/* framex.css — 갈래 frame(10-24 · 수리 2판): 머리줄 섬 .hdx · 펼침 판 · 폰 시트 · 독 알약 .dockx · 이음(html.nightx J4 · html.seamx J5').
   C1 흐림·유리·그라디언트·그림자·노이즈 0 · C3 반경 999(섬·알약) / 24(폰 시트 = 섬이 그대로 자람) / 18(판·첫 말 판) / 16(카드) / 12(타일 창·줄 강조·바닥) · 0<r<8 0 · 새 @keyframes 0.
   먹 사본(.hdx-ink · .dockx-inv)의 clip-path = js 가 아래 먹 면 모양 그대로 오림(시간 0 · 스크롤에 묶임 · 멈추면 많이 덮인 쪽으로 0.2s). */
:root { --hdx-ink: #221f1d; --hdx-ink-line: #2f2a27; --hdx-on: #fcf9f5; --hdx-top: 6px; --hdx-h: 52px; --hdx-r: 26px; --hdx-band: 64px; --dockx-h: 56px; --dockx-c: 48px; }

/* ══ 머리줄 ══ .hdx = 흐름 안 자리 · .hdx-bar = 고정 띠(초점이 가도 쪽 스크롤 0) */
.hdx { position: relative; z-index: 50; height: var(--hdx-band); }
.hdx-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 3; height: var(--hdx-band); pointer-events: none; transition: transform var(--t-fast) var(--ease-ui); }
.hdx .skip { pointer-events: auto; }
.hdx .skip[hidden] { display: none; }
.hdx-veil { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--page); pointer-events: none; will-change: transform; }
.hdx-veil[hidden] { display: none; }
.hdx-in { position: relative; display: flex; justify-content: space-between; align-items: flex-start; max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 40px; }
.hdx-isle { position: relative; z-index: 3; flex: none; height: var(--hdx-h); margin-top: var(--hdx-top); border-radius: 999px; pointer-events: auto; }
.hdx-shape { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hdx-shape rect { x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: calc(var(--hdx-r) - .5px); fill: var(--paper); stroke: var(--line); stroke-width: 1px;
  transition: fill var(--t-fast) var(--ease-ui), stroke var(--t-fast) var(--ease-ui), width var(--t-fast) var(--ease-ui); }
html.fx-top .hdx-shape rect, .hdx.is-top .hdx-shape rect, .hdx.is-sheet .hdx-isle > .hdx-shape rect { fill: rgb(255 253 249 / 0); stroke: rgb(230 220 205 / 0); }
.hdx-face { position: relative; display: flex; align-items: center; height: 100%; }
.hdx-l .hdx-face { padding: 0 18px 0 14px; }
.hdx-brand, .hdx-sbrand { display: inline-flex; align-items: center; gap: 10px; height: var(--hdx-h); border-radius: 999px; color: var(--ink); text-decoration: none; -webkit-user-select: none; user-select: none; }
.hdx-brand { margin: 0 -18px 0 -14px; padding: 0 18px 0 14px; clip-path: inset(-6px round calc(var(--hdx-r) + 6px)); transition: clip-path var(--t-fast) var(--ease-ui); }
.hdx-mark { display: block; flex: none; width: 24px; height: 24px; }
.hdx-name { font-size: 16px; font-weight: 720; letter-spacing: -.02em; line-height: 1; white-space: nowrap; transition: opacity .15s linear; }
/* M2 접힘(첫 화면 로고 띠가 지나간 뒤): 이름은 오른쪽에서 잘리고 판은 원 52 */
.hdx.is-folded .hdx-l:not(:hover):not(:focus-within) .hdx-brand { clip-path: inset(0 calc(100% - var(--hdx-h)) 0 0 round var(--hdx-r)); }
.hdx.is-folded .hdx-l:not(:hover):not(:focus-within) .hdx-shape rect { width: calc(var(--hdx-h) - 1px); }
.hdx.is-folded .hdx-l:not(:hover):not(:focus-within) .hdx-name { opacity: 0; }
.hdx-r .hdx-face { padding: 4px; }
.hdx-nav { display: flex; align-items: center; }
.hdx-nav > * { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink2); font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui); }
.hdx-sep { flex: none; width: 1px; height: 20px; margin: 0 8px; background: var(--line); }
.hdx-kakao, .hdx-menu { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color .2s var(--ease-ui); }
.hdx-menu { display: none; position: relative; width: 72px; padding: 0; overflow: hidden; }
.hdx-mw { display: grid; height: 20px; overflow: hidden; line-height: 20px; }
.hdx-mw > span { grid-area: 1 / 1; transition: transform var(--t-fast) var(--ease-ui); }
.hdx-mw > span + span { transform: translateY(100%); }
.hdx.is-sheet .hdx-mw > span:first-child { transform: translateY(-100%); }
.hdx.is-sheet .hdx-mw > span + span { transform: none; }
.hdx-face .is-hot, .hdx-face .is-open { background: var(--sand); color: var(--ink); }
.hdx-face :focus-visible, .hdx-sbrand:focus-visible { outline: 2px solid var(--fl-text); outline-offset: 3px; }
/* 먹 사본(js 가 만듦): 같은 판 · 먹 색 · 가리킴·초점 표시는 js 가 짝 요소에 같이 씀 */
.hdx-ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; contain: layout paint; }
.hdx-ink.is-off, .hdx.is-open .hdx-r .hdx-ink, .hdx.is-sheet .hdx-ink { visibility: hidden; }
.hdx-ink .hdx-shape rect { fill: var(--hdx-ink); stroke: var(--hdx-ink-line); }
.hdx-ink .hdx-brand, .hdx-ink .hdx-nav > *, .hdx-ink .hdx-kakao, .hdx-ink .hdx-menu { color: var(--hdx-on); }
.hdx-ink .hdx-kakao, .hdx-ink .hdx-menu { border-color: var(--hdx-on); }
.hdx-ink .hdx-sep { background: #4d4741; }
.hdx-ink .is-hot, .hdx-ink .is-open { background: var(--hdx-ink-line); color: var(--hdx-on); }
.hdx-ink .is-fv { outline: 2px solid var(--fl); outline-offset: 3px; }
.hdx.is-open .hdx-r > .hdx-shape rect { stroke: rgb(230 220 205 / 0); }
.hdx-toast { position: absolute; right: 40px; top: calc(var(--hdx-top) + var(--hdx-h) + 12px); z-index: 4; width: max-content; max-width: 320px; pointer-events: auto; }
html:not(.fxjs) .hdx-menu { display: none !important; }

/* ── M5 데스크톱 펼침: 오른쪽 섬이 그 자리에서 760 판으로 자람 ── */
.hdx-drop { position: absolute; top: var(--hdx-top); right: 40px; z-index: 2; width: 760px; height: var(--dh, 420px); pointer-events: auto; --rw: 664px; --ph: 420px; }
.hdx-drop[hidden] { display: none; }
.hdx-drop.is-close { pointer-events: none; }
.hdx-drop-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hdx-drop-bg rect { x: calc(100% - var(--rw) + .5px); y: .5px; width: calc(var(--rw) - 1px); height: calc(var(--hdx-h) - 1px); rx: calc(var(--hdx-r) - .5px); fill: var(--paper); stroke: var(--line); stroke-width: 1px;
  transition: x var(--t-mid) var(--ease-ui), width var(--t-mid) var(--ease-ui), height var(--t-mid) var(--ease-ui), rx var(--t-mid) var(--ease-ui); }
.hdx-drop.is-on .hdx-drop-bg rect { x: .5px; width: calc(100% - 1px); height: calc(var(--ph) - 1px); rx: 17.5px; }
.hdx-drop-clip { position: absolute; inset: 0; clip-path: inset(0 0 calc(100% - var(--hdx-h)) calc(100% - var(--rw)) round var(--hdx-r)); transition: clip-path var(--t-mid) var(--ease-ui); }
.hdx-drop.is-on .hdx-drop-clip { clip-path: inset(0 0 calc(100% - var(--ph)) 0 round 18px); }
.hdx-drop.is-close .hdx-drop-bg rect, .hdx-drop.is-close .hdx-drop-clip, .hdx-drop.is-swap .hdx-drop-bg rect, .hdx-drop.is-swap .hdx-drop-clip { transition-duration: var(--t-fast); }
.hdx-pane { position: absolute; left: 0; top: 0; width: 760px; padding: calc(var(--hdx-h) + 16px) 28px 24px; display: grid; grid-template-columns: 404px minmax(0, 1fr); column-gap: 52px; visibility: hidden; }
.hdx-drop[data-pane="svc"] #hdx-pane-svc, .hdx-drop[data-pane="steps"] #hdx-pane-steps, .hdx-pane.is-leaving { visibility: visible; }
.hdx-kick { margin: 0 0 8px; padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--sub); }
.hdx-sits, .hdx-steps { list-style: none; margin: 0; padding: 0; }
.hdx-sits a { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease-ui); }
.hdx-sits b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.hdx-sits a > span { color: var(--sub); font-size: 18px; transform: translateX(-4px); opacity: 0; transition: transform var(--t-fast) var(--ease-ui), opacity var(--t-fast) var(--ease-ui); }
.hdx-sits a:hover, .hdx-sits a:focus-visible, .hdx-sits a.is-hot { background: var(--sand); }
.hdx-sits a:hover > span, .hdx-sits a:focus-visible > span, .hdx-sits a.is-hot > span { transform: none; opacity: 1; }
.hdx-steps li { display: flex; align-items: center; height: 52px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); transition: background-color .2s var(--ease-ui); }
.hdx-steps li:first-child { border-top: 1px solid var(--line); }
.hdx-steps li.is-hot { background: var(--sand); }
.hdx-more { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-top: 8px; padding: 0 12px; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--fl); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hdx-pr { display: flex; flex-direction: column; align-items: center; perspective: 900px; }
/* M8·M9 상황 카드(s4 무대 카드 앞면 문법 200×282) */
.hdx-card { width: 200px; height: 282px; transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform var(--t-fast) var(--ease-ui); }
.hdx-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(var(--fy, 0deg)); transition: transform var(--t-mid) var(--ease-fly); }
.hdx-cf { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--cream); color: var(--ink); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hdx-cb { transform: rotateY(180deg); }
.hdx-win { display: block; flex: none; height: 44%; border-radius: 12px; background: var(--bg, #f1dbc1) var(--tile, none) center / cover no-repeat; }
.hdx-cf b { margin: 14px 6px 0; font-size: 16px; font-weight: 720; letter-spacing: -.02em; line-height: 1.3; }
.hdx-cf span { margin: 8px 6px 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
/* 진행 과정: 다섯 단계의 물건 카드 부채(겹친 자리 → 펼침 0.45s 비행 곡선 · 40ms 차례) · 줄을 가리키면 그 카드가 올라옴 */
.hdx-fan { position: relative; width: 276px; height: 300px; }
.hdx-fc { position: absolute; left: 74px; top: 64px; width: 128px; height: 168px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper) var(--art) center / 84% auto no-repeat;
  transform-origin: 50% 120%; transform: translateY(18px) rotate(0deg); transition: transform var(--t-mid) var(--ease-fly) calc(var(--k) * 40ms); }
.hdx-drop.is-on[data-pane="steps"] .hdx-fc { transform: translateX(calc((var(--k) - 2) * 26px)) rotate(calc((var(--k) - 2) * 8deg)); }
.hdx-drop.is-on[data-pane="steps"] .hdx-fan.is-pick .hdx-fc { transition-delay: 0s; transition-duration: var(--t-fast); }
.hdx-drop.is-on[data-pane="steps"] .hdx-fc.is-up { z-index: 5; transform: translate(calc((var(--k) - 2) * 26px), -40px) rotate(calc((var(--k) - 2) * 3deg)); }
/* 줄 차례 120 + 24n ms(−6px → 0) · 닫힘 = 0.12s 한꺼번에 · 카드 = rotateY(−90° → 0) +160ms */
.hdx-drop .hdx-st { opacity: 0; transform: translateY(-6px); transition: opacity .12s linear, transform .12s linear; }
.hdx-drop.is-on .hdx-st { opacity: 1; transform: none; transition: opacity var(--t-fast) var(--ease-ui) calc(120ms + var(--n, 0) * 24ms), transform var(--t-fast) var(--ease-ui) calc(120ms + var(--n, 0) * 24ms); }
.hdx-drop.is-on .hdx-steps li.hdx-st { transition: opacity var(--t-fast) var(--ease-ui) calc(120ms + var(--n, 0) * 24ms), transform var(--t-fast) var(--ease-ui) calc(120ms + var(--n, 0) * 24ms), background-color .2s var(--ease-ui); }
.hdx-drop .hdx-card.hdx-st { opacity: 1; transform: rotateY(-90deg); }
.hdx-drop.is-on .hdx-card.hdx-st { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform var(--t-mid) var(--ease-ui) 160ms; }
.hdx-drop.is-on .hdx-card.hdx-st.is-in { transition: transform var(--t-fast) var(--ease-ui); }

/* ── M10 폰·태블릿 시트: 섬이 그대로 아래로 자람(윗줄 = 섬 줄 · 같은 반경) · 뒤 = 모래색 단색 ── */
.hdx-scrim { position: fixed; inset: 0; z-index: 1; background: var(--sand); opacity: 0; pointer-events: auto; transition: opacity var(--t-fast) var(--ease-ui); }
.hdx-scrim.is-on { opacity: 1; }
.hdx-scrim[hidden], .hdx-sheet[hidden] { display: none; }
.hdx-sheet { position: fixed; top: 4px; left: 8px; right: 8px; bottom: 8px; z-index: 2; pointer-events: auto; --st: 2px; --sh: 52px; --sr: 26px; }
.hdx-sheet-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hdx-sheet-bg rect { x: .5px; y: calc(var(--st) + .5px); width: calc(100% - 1px); height: calc(var(--sh) - 1px); rx: calc(var(--sr) - .5px); fill: var(--page); stroke: var(--line); stroke-width: 1px;
  transition: y var(--t-mid) var(--ease-ui), height var(--t-mid) var(--ease-ui), rx var(--t-mid) var(--ease-ui); }
.hdx-sheet.is-on .hdx-sheet-bg rect { y: .5px; height: calc(100% - 1px); rx: 23.5px; }
.hdx-sbrand { position: absolute; left: 16px; top: var(--st); z-index: 1; padding: 0 18px 0 14px; }
.hdx-sheet-clip { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; padding: 64px 20px calc(16px + env(safe-area-inset-bottom));
  clip-path: inset(var(--st) 0 calc(100% - var(--st) - var(--sh)) 0 round var(--sr)); transition: clip-path var(--t-mid) var(--ease-ui); }
.hdx-sheet.is-on .hdx-sheet-clip { clip-path: inset(0 round 24px); }
.hdx-sheet.is-close .hdx-sheet-bg rect, .hdx-sheet.is-close .hdx-sheet-clip { transition-duration: var(--t-fast); }
.hdx.is-sheet .hdx-l .hdx-face { visibility: hidden; }
.hdx-snav { display: flex; flex-direction: column; flex: none; }
.hdx-srow { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; margin: 0; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink); font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -.02em; text-align: left; text-decoration: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.hdx-srow i { font-style: normal; font-weight: 400; font-size: 22px; color: var(--sub); transition: transform var(--t-fast) var(--ease-ui); }
.hdx-sx[aria-expanded="true"] i { transform: rotate(45deg); }
.hdx-ssits { padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.hdx-ssits[hidden] { display: none; }
.hdx-sall, .hdx-night a { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 4px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--fl); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hdx-ssits ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.hdx-ssits li.hdx-s7 { grid-column: 1 / -1; }
.hdx-ssits li a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
/* 카톡·전화 덩어리는 시트 바닥에 붙음(빈 크림 면이 바닥에 남지 않게) · 친구가 단추 윗변 오른쪽 24 에 앉음 */
.hdx-sk { position: relative; flex: none; margin-top: auto; padding-top: 28px; }
.hdx-sk .btn-kakao { width: 100%; min-height: 52px; }
.hdx-perch { position: absolute; right: 24px; bottom: calc(100% - 33px); width: 40px; height: 40px; pointer-events: none; }
.hdx-sst { flex: none; margin: 6px 0 0; }
.hdx-night { flex: none; margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.hdx-night a { display: inline-flex; padding: 0; }
.hdx-ask { flex: none; margin: 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.hdx-sheet .hdx-st { opacity: 0; transform: translateY(-8px); transition: opacity .12s linear, transform .12s linear; }
.hdx-sheet.is-on .hdx-st { opacity: 1; transform: none; transition: opacity var(--t-fast) var(--ease-ui) calc(120ms + var(--n, 0) * 24ms), transform var(--t-fast) var(--ease-ui) calc(120ms + var(--n, 0) * 24ms); }

/* ── 폭별 ── */
@media (max-width: 1023px) {
  .hdx-nav, .hdx-sep, .hdx-drop { display: none !important; }
  .hdx-menu { display: inline-flex; margin-left: 8px; }
  .hdx-kakao { padding: 0 16px; }
  .hdx-toast { right: 24px; }
  .hdx-sheet-clip { padding-left: max(20px, calc((100% - 560px) / 2)); padding-right: max(20px, calc((100% - 560px) / 2)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hdx-in { padding: 0 24px; }
}
@media (max-width: 767px) {
  :root { --hdx-top: 4px; --hdx-h: 48px; --hdx-r: 24px; --hdx-band: 56px; --dockx-h: 48px; --dockx-c: 40px; }
  .hdx.is-hidden .hdx-bar { transform: translateY(-100%); }
  .hdx-in { padding: 0 8px; }
  .hdx-l { flex: 1 1 auto; }
  .hdx-l .hdx-face { padding: 0 8px 0 12px; }
  .hdx-brand { margin: 0 -8px 0 -12px; padding: 0 12px; }
  .hdx-r { position: absolute; right: 8px; top: 0; }
  .hdx-r .hdx-shape, .hdx-kakao { display: none; }
  .hdx-menu { margin-left: 0; }
  .hdx-toast { right: 8px; }
  .hdx-sheet { --st: 0px; --sh: 48px; --sr: 24px; }
  .hdx-sbrand { left: 0; padding: 0 12px; }
  .hdx-sheet-clip { padding: 56px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* ══ 독 ══ */
.dockx { position: fixed; left: 0; bottom: 24px; z-index: 40; width: 0; height: var(--dockx-h); pointer-events: none; visibility: hidden; transition: transform var(--t-mid) var(--ease-ui); }
.dockx.is-ready { visibility: visible; }
.dockx.is-yield:not(.is-open) { transform: translateY(calc(100% + 40px)); }
.dockx.is-yield.is-gone:not(.is-open) { visibility: hidden; }
.dockx-pill { position: absolute; left: 0; bottom: 0; width: var(--pw, 238px); height: var(--dockx-h); will-change: transform; }
.dockx-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dockx-bg rect { x: 0; y: 0; width: 100%; height: 100%; rx: calc(var(--dockx-h) / 2); fill: var(--ink); transition: width var(--t-fast) var(--ease-ui); }
.dockx.is-folded .dockx-bg rect { width: var(--dockx-h); }
/* 글은 알약 판과 같은 모양·같은 시간으로 오림(판이 자라는 동안 글이 판 밖으로 나오는 일 0) · 펴질 때 글은 100ms 뒤에 나타남 */
.dockx .dockx-go, .dockx-go-c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 0 22px 0 calc(var(--dockx-h) + 8px);
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 20px; white-space: nowrap; clip-path: inset(-6px round 999px); transition: clip-path var(--t-fast) var(--ease-ui); }
.dockx.is-folded .dockx-go, .dockx.is-folded .dockx-go-c { clip-path: inset(-6px calc(100% - var(--dockx-h) - 6px) -6px -6px round 999px); }
.dockx .dockx-go { z-index: 1; min-height: 0; border-radius: 999px; background: transparent; color: var(--cream); pointer-events: auto; }
.dockx-go-c { color: var(--ink); }
.dockx-go span, .dockx-go-c > span { display: block; line-height: 20px; transition: opacity .15s linear .1s; }
.dockx.is-folded .dockx-go span, .dockx.is-folded .dockx-go-c > span { opacity: 0; transition-delay: 0s; }
.dockx.is-folded .dockx-go { visibility: hidden; transition: visibility 0s .15s, clip-path var(--t-fast) var(--ease-ui); }
.dockx-inv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; contain: layout paint; }
.dockx-inv.is-off { visibility: hidden; }
.dockx-inv .dockx-bg rect { fill: var(--cream); }
.dockx-friend { position: absolute; left: 0; top: 0; z-index: 3; width: var(--dockx-h); height: var(--dockx-h); margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; pointer-events: auto; -webkit-user-select: none; user-select: none; }
.dockx-friend:active .dockx-ring { transform: scale(.96); }
.dockx-ring { position: absolute; left: 4px; top: 4px; width: var(--dockx-c); height: var(--dockx-c); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); transition: transform .1s; }
.dockx-seat { position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; }
.dockx-seat svg, .fx-fly svg, .hdx-perch svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fx-fly { position: fixed; z-index: 75; pointer-events: none; }
.dockx .dockx-go:focus-visible, .dockx-friend:focus-visible { outline: 2px solid var(--fl-text); outline-offset: 3px; }
.dockx.is-inked .dockx-go:focus-visible, .dockx.is-inked .dockx-friend:focus-visible { outline-color: var(--fl); }
.dockx-toast { left: 0; bottom: calc(100% + 12px); width: 300px; transform: translateX(var(--tx, 0px)); }
.dockx-panel { position: absolute; left: 0; bottom: calc(var(--dockx-h) + 16px); width: 360px; padding: 20px 20px 18px; border: 1.5px solid var(--ink); border-radius: var(--r-paper); background: var(--paper); color: var(--ink); pointer-events: auto; transform: translateX(var(--px, 0px)); }
.dockx-panel[hidden] { display: none; }
.dockx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dockx-head .t-label { padding-top: 12px; color: var(--sub); }
.dockx-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -2px -10px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.dockx-lines { margin: 8px 0 16px; padding: 14px 16px; list-style: none; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--page); }
.dockx-lines li { font-size: 16px; line-height: 1.55; color: var(--ink); }
.dockx-panel .btn-kakao, .dockx-panel .btn-line { width: 100%; }
.dockx-panel .btn-line { margin-top: 8px; }
.dockx-panel [data-kakao-status] { margin: 6px 0 0; }
.dockx-night, .dockx-ask { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.dockx-ask { margin-top: 4px; }
.dockx-night a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--fl); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 767px) {
  .dockx { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .dockx .dockx-go, .dockx-go-c { justify-content: center; padding: 0 16px 0 calc(var(--dockx-h) + 4px); }
  .dockx-panel, .dockx-toast { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom) + var(--dockx-h) + 12px); width: auto; transform: none; }
  .dockx-panel { max-height: calc(100% - 140px); overflow: auto; padding: 16px; }
  .dockx-night a { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdx, .hdx *, .dockx, .dockx * { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ══ 이음 J4 '밤 바닥'(html.nightx · 통합 때 s4x.css 로 옮길 줄): 판 → 바닥 → 원칙 줄 → s5x 띠 = 먹 한 덩어리 ══ */
html.nightx .s4x .s4x-track { isolation: isolate; }
html.nightx .s4x .s4x-track::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; height: 49px; pointer-events: none;
  /* 수리(10-24 · desk #4): 판(양옆 12 안쪽) → 화면 끝까지 먹 = 오목 곡선 12 로 벌어짐(볼록 어깨 + 크림 홈 0). 위 12px 띠의 양 끝만 원 바깥이 먹 */
  background: radial-gradient(circle at 0 0, transparent 11.5px, #151414 12px) 0 0 / 12px 12px no-repeat, radial-gradient(circle at 100% 0, transparent 11.5px, #151414 12px) 100% 0 / 12px 12px no-repeat,
    linear-gradient(#151414, #151414) 12px 0 / calc(100% - 24px) 12px no-repeat, linear-gradient(#151414, #151414) 0 12px / 100% calc(100% - 12px) no-repeat; }
html.nightx .s4x > .prin { width: 100%; max-width: none; margin: 0; padding: 0 max(40px, calc((100% - 1360px) / 2)); border: 0; background: #151414; color: #fcf9f5; }
html.nightx .s4x > .prin > summary { border-top: 1px solid #2f2a27; border-bottom: 1px solid #2f2a27; }
html.nightx .s4x > .prin .ph, html.nightx .s4x > .prin h3, html.nightx .s4x > .prin h4 { color: #fcf9f5; }
html.nightx .s4x > .prin .plus, html.nightx .s4x > .prin .plead, html.nightx .s4x > .prin p, html.nightx .s4x > .prin summary i { color: #a39d95; }
html.nightx .s4x > .prin summary:focus-visible { outline-color: #ff5e1f; }
html.nightx .s4x > .prin[open] { padding-bottom: 24px; }
@media (max-width: 767px) {
  html.nightx .s4x .s4x-track::after { height: 25px; border-radius: 0; }
  html.nightx .s4x > .prin { padding: 0 16px; }
}
html.nightx .s4x > .prin .prin4 li { border-top-color: #2f2a27; }   /* 리드가 index 임시 블록에 더한 한 줄(원칙 줄 구분선) */

/* ══ 이음 J5' '종이 귀환'(2순위 · ?seam=paper · html.seamx · js/framex-seam.js) ══ */
html.seamx .s5x .band { padding-bottom: calc(var(--s5x-padB) + 96px); }
html.seamx .s5x .faq5x { position: relative; z-index: 1; margin-top: -96px; border-radius: 48px 48px 0 0; background: var(--page); transform-origin: 50% 0; }
@media (max-width: 767px) {
  html.seamx .s5x .band { padding-bottom: calc(var(--s5x-padB) + 56px); }
  html.seamx .s5x .faq5x { margin-top: -56px; border-radius: 24px 24px 0 0; }
}