/* 3판 갈래 H 재질(11-03 · 뼈대) — 첫 화면 아래 B1~B5. 크림 종이 · 먹 1px 괘선 · 모래 머리줄 · 주황은 상태·지금 단계·로고 마크에만 · 먹 큰 면은 B3 판 하나.
   글꼴 = home.css 의 --font(AboutUs Home Sans 하나) · 주소도 산스 + tabular-nums · 데스크톱 15px↑ · 폰 14px↑.
   반경: 창 16 · 종이 14 · 단추 12 · 작은 단추 10 · 칩 999 · 먹 판 40(폰 24) · 30칸 3(0<r<8 은 30칸과 관문 네모뿐).
   움직임: CSS 기본 상태 = 끝 상태 = 포스터. html.anim + .is-armed 일 때만 처음 상태, .hb-bN(박)이 붙을 때마다 그 박의 전환(js/board-ui.js).
   움직이는 속성은 transform · opacity · grid-template-rows(+ 색 200ms) 뿐 · @keyframes 1(hb-press) · infinite 0.
   11-03 정리: 지운 덩어리(B1 지문 대조 위성·실측 문장 · B2 상황 설명 · B3 30칸 줄·실측 문장 · B4 월별 보고 견본 · B5 이유 줄) 규칙 뺌 ·
   4단 진행 줄 .hb-prog · 장면 자리 .hb-gfx(빈 동안 높이 0) · B3 왼쪽 기둥 따라옴(1181↑ · 높이 820↑) · B4 머리 두 칸.
   11-04 통합: 장면 자리에 지문 비트장 · 30일 재확인 시계(css/gfx-bits.css · css/gfx-dial.css) · 장면 아래 띠 .hb.hb-gfx-band ·
   B1 띠 · B3 단계 이름표·새 줄·전·후 증빙 위성·기록 기준 · B4 머리 띠 규칙 뺌(맨 끝 통합 블록).
   11-04 무대(지시서 §19 · css/stage.css 토큰): 첫 줄 #different → 진행 줄 → B1 → 장면 자리 4 → 무대 끝 띠 = 어두운 무대(.hb-stage) · 그 뒤 B2~B5 밝은 판.
   무대 위 .hb 는 --c-* 토큰을 무대 값으로 바꿔 끼움(아래 규칙이 그대로 어두운 판에서 읽힘) · B1 = 카드 틀 0 · 초점 줄(주소 44px + 상태 칩) 하나 · B3 먹 판 → 밝은 판(hb3-desk).
   빈 장면 자리 = 임시 높이(--slot-h) · 진행 줄 = 무대 색 · 첫 줄 섹션에서 네 단계를 훑는 시연(is-fill · 한 바퀴 8.2초).
   11-04 §20(antimetal 결): 딱 잘린 검은 상자 → 쪽 전체 색 뒤집기(html[data-scheme] · board-ui scheme() · 60% 선) · 무대 구간 바탕 투명 · 첫 화면 = 크림 한 장(아래 모서리 둥긂) ·
   장면 사이 점선 머리카락 선 · 무대 끝 띠 = 밝은 판 복귀 + 주황 띠 한 번 · 머리줄·독·진행 줄도 뒤집힘 · B1 초점 64px + 꼬리 3(+1) 줄. */

.hb {
  --c-cream: #fdfbf7; --c-paper: #fffdf9; --c-sand: #f3e9dc; --c-sand2: #faf5ec; --c-sand3: #f6eee2;
  --c-line: #e6dccd; --c-line2: #efe7dc; --c-rule: #d9cfbf;
  --c-mute: #736d66; --c-dim: #8f897f; --c-sub: #4d4a46; --c-ink: #151414; --c-ink2: #2a2623; --c-grey: #6b665f;
  --c-or: #ff5e1f; --c-ort: #c2410c; --c-orb: #fff1ea; --c-orl: #f3cbb8; --c-ok: #1f7a4d; --c-okb: #e8f3ec; --c-okl: #cfe3d6;
  --sh-win: 0 0 0 1px rgba(21, 20, 20, .06), 0 30px 60px -12px rgba(21, 20, 20, .18), 0 18px 36px -18px rgba(21, 20, 20, .22);
  --sh-sat: 0 0 0 1px rgba(21, 20, 20, .04), 0 14px 32px -8px rgba(21, 20, 20, .16), 0 4px 10px -4px rgba(21, 20, 20, .08);
  --e-arrive: cubic-bezier(.25, .8, .25, 1); --e-travel: cubic-bezier(.45, 0, .1, 1); --e-settle: cubic-bezier(.05, .85, .3, 1); --e-tab: cubic-bezier(.22, 1, .36, 1);
  --g: 40px;
  position: relative; padding: 112px 0 0; color: var(--c-ink); font-family: var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word;
}
.hb :where(h2, h3, h4, p, dl, dd, dt, ul, ol, figure) { margin: 0; padding: 0; }
.hb :where(ul, ol) { list-style: none; }
.hb :where(i, b, em) { font-style: normal; }
.hb a { color: inherit; text-decoration: none; }
.hb-wrap { width: min(100% - 2 * var(--g), 1360px); margin: 0 auto; }
.hb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 글 ── */
.hb-eb { margin: 0 0 18px; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--c-ort); }
.hb-h { font-size: 40px; line-height: 1.2; letter-spacing: -.025em; font-weight: 720; color: var(--c-ink); }
.hb-h .w4 { font-weight: 400; } .hb-h .w7 { font-weight: 720; }
.hb-h .hb-h2 { color: var(--c-grey); font-weight: 400; }
.hb-lead { margin-top: 22px; font-size: 17px; line-height: 1.62; color: var(--c-sub); max-width: 34em; }
.hb-lead + .hb-lead { margin-top: 10px; }
.hb-why { font-size: 16px; line-height: 1.6; font-weight: 560; color: var(--c-ink); }
.hb-lnk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-or); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hb-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hb-kst { font-size: 14px; line-height: 1.4; color: var(--c-sub); }
.hb-kst:empty { display: none; }

/* ── 단추 ── */
.hb-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin-top: 16px; }
.hb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 12px; border: 0;
  font: inherit; font-size: 15.5px; font-weight: 620; line-height: 1.2; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform .1s, filter .1s; }
.hb-btn.ink { background: var(--c-ink); color: var(--c-cream); }
.hb-btn.line { box-shadow: inset 0 0 0 1.5px var(--c-ink); color: var(--c-ink); background: transparent; }
.hb-btn.cream { background: var(--c-cream); color: var(--c-ink); }
.hb-btn.line-cream { box-shadow: inset 0 0 0 1.5px rgba(252, 249, 245, .7); color: #fcf9f5; background: transparent; }
.hb-btn:active { transform: scale(.98); filter: brightness(.95); }
.hb :is(a, button, textarea, input, summary):focus-visible { outline: 2px solid var(--c-ort); outline-offset: 3px; }

/* ── 칩 · 상태 칩(28 알약 · 채움 모래 중립 · 초록 끝남 · 주황 문제·지금 · 테두리 아직) · 응답 칩 ── */
.hb-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-paper);
  font-size: 15px; font-weight: 600; color: var(--c-sub); white-space: nowrap; line-height: 1; }
.hb-stc { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-sand);
  font-size: 15px; font-weight: 620; color: var(--c-ink); white-space: nowrap; line-height: 1; overflow: hidden; vertical-align: middle; }
.hb-stc.is-ok { color: var(--c-ok); background: var(--c-okb); border-color: var(--c-okl); }
.hb-stc.is-or { color: var(--c-ort); background: var(--c-orb); border-color: var(--c-orl); }
.hb-stc.is-line { background: transparent; border-color: var(--c-rule); color: var(--c-sub); }
.hb-roll { display: inline-grid; grid-template-areas: "s"; justify-items: start; }
.hb-roll > span { grid-area: s; }
.hb-roll > .r0 { visibility: hidden; }
/* 보드·요청서 굴림 칩: 포스터에서는 처음 낱말(r0)이 칩 폭을 차지하지 않게(끝 낱말 폭 그대로) — 장면 중 폭은 board-ui 가 잰 --rw0 → --rw1 로 옮김 */
.hb1-tbl .hb-roll > .r0, .hb3-slip .hb-roll > .r0 { display: none; }
.hb-hop { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--c-sand2); border: 1px solid var(--c-line2);
  font-size: 15px; font-weight: 600; color: var(--c-ink2); white-space: nowrap; line-height: 1; }
.hb-hop + .hb-hop { margin-left: 14px; position: relative; }
.hb-hop + .hb-hop::before { content: ""; position: absolute; left: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c-rule); }
.hb-rib { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--c-sand); font-size: 15px; font-weight: 620; color: var(--c-ink); white-space: nowrap; }
.hb-sep { width: 1px; height: 16px; background: var(--c-line); align-self: center; flex: none; }

/* ── 사건 기록 창 · 머리줄 · 단계 ── */
.hb-win { position: relative; background: var(--c-paper); border-radius: 16px; box-shadow: var(--sh-win); overflow: clip; color: var(--c-ink); }
.hb-wh { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; background: var(--c-sand); border-bottom: 1px solid var(--c-line); min-width: 0; }
.hb-mk { width: 22px; height: 22px; flex: none; fill: var(--c-or); }
.hb-nm { font-size: 16px; font-weight: 720; letter-spacing: -.01em; white-space: nowrap; }
.hb-wh .hb-ad { padding-left: 12px; border-left: 1px solid rgba(21, 20, 20, .18); font-size: 16px; font-weight: 600; color: var(--c-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hb-wh .hb-ad:empty { display: none; }
.hb-st { margin-left: auto; display: flex; gap: 16px; font-size: 15px; color: var(--c-mute); white-space: nowrap; flex: none; }
.hb-st li { position: relative; padding: 18px 0 16px; line-height: 1; }
.hb-st li.is-now { color: var(--c-ink); font-weight: 720; }
.hb-st li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-or); transform: scaleX(0); transform-origin: left; }
.hb-st li.is-now::after { transform: none; }

/* ── 위성 · 열쇠-값 줄 ── */

/* ═══ B1 「주소 확인」(11-04 무대 · 찾기) — 한 화면 초점 하나 = 맨 위 예시 줄(초점 줄)의 주소 64px + 상태 칩 큰 알약 ═══════════
   11-04 §20 마무리: 초점 아래 줄 = 3(+ 늦은 1 · 폰 2) · 한 단씩 흐려지는 꼬리(t1 1 → t2 .8 → t3 .64 → t4 .5) · 초점 묶음과 꼬리 사이 점선 머리카락 선.
   카드 틀 0: 모래 머리줄·사이드바·기록 줄·단계 탭 뺌 → 흐린 이름 줄(사건 기록 · 가상 예시) + 1px 괘선 원장 · 열 머리는 읽기 전용(화면 0).
   열(화면 순서) = 주소 · 종류 · 찾은 곳 · 응답 · 상태 · 다음 요청처(DOM 은 종류 먼저 · 읽기 순서 그대로). 꺼짐(off) = 원장 아래 안내 한 줄 + 카카오(#address-check 도 그 줄로 · flex order). */
.hb1 { --cols: minmax(0, 1.25fr) 132px 150px 140px 188px minmax(0, .85fr); }   /* 응답 칸 140 = 실측 줄 넘어가기 칩 두세 개(301 · 200) */
.hb1-top { padding-bottom: 56px; }
.hb1-top .hb-lead { max-width: 34em; }
.hb1-board { position: relative; }
.hb1-meta { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); font-size: 15px; color: var(--c-mute); }
.hb1-meta .hb-mk { width: 18px; height: 18px; }
.hb1-meta .hb-nm { font-size: 15px; font-weight: 650; color: var(--c-ink); }
.hb1-meta .hb-ex { margin-left: 4px; }
.hb1-main { display: flex; flex-direction: column; min-width: 0; }
.hb-anchor { display: block; height: 0; scroll-margin-top: calc(var(--hd-h, 64px) + 16px); }
/* 입력 줄(on) = 원장 위 큰 한 줄 · 꺼짐(off·JS 없음) = 원장 아래 안내 한 줄 + 카카오 */
.hb1-in { position: relative; }
.hb1-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 26px 0 22px; margin: 0; border-bottom: 1px solid var(--c-line); }
.hb1-field { position: relative; display: grid; gap: 8px; min-width: 0; }
.hb1-field textarea { display: block; width: 100%; min-height: 44px; height: 44px; margin: 0; padding: 0; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 30px; line-height: 44px; font-weight: 600; letter-spacing: -.015em; color: var(--c-ink); overflow: hidden; field-sizing: content; max-height: 176px; }
.hb1-field textarea::placeholder { color: var(--c-mute); font-weight: 500; opacity: 1; }
.hb1-field small { font-size: 15px; line-height: 1.4; color: var(--c-mute); }
.hb1-form:focus-within { border-bottom-color: var(--c-or); }
.hb1-typed { position: absolute; left: 0; top: 0; height: 44px; line-height: 44px; font-size: 30px; font-weight: 600; letter-spacing: -.015em; color: var(--c-ink); pointer-events: none; visibility: hidden; white-space: nowrap; }
.hb1-btns { display: flex; align-items: center; gap: 10px; }
.hb1-go, .hb1-after { min-height: 52px; padding: 0 22px; }
.hb1-after[hidden] { display: none; }
.hb1-off { display: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 40px; padding: 44px 0 0; }
.hb1-off-t { max-width: 22em; font-size: 28px; font-weight: 660; line-height: 1.36; letter-spacing: -.022em; color: var(--c-ink); text-wrap: balance; }
.hb1-off .hb-btn { min-height: 56px; padding: 0 28px; font-size: 16px; }
.hb1-off .hb-kst { grid-column: 1 / -1; }
.hb1[data-live="off"] .hb1-form, html:not(.fxjs) .hb1 .hb1-form { display: none; }
.hb1[data-live="off"] .hb1-off, html:not(.fxjs) .hb1 .hb1-off { display: grid; }
.hb1[data-live="off"] .hb1-main > #address-check, .hb1[data-live="off"] .hb1-in, html:not(.fxjs) .hb1 .hb1-main > #address-check, html:not(.fxjs) .hb1 .hb1-in { order: 2; }
.hb1[data-live="off"] .hb1-foot, html:not(.fxjs) .hb1 .hb1-foot { order: 3; }
.hb1-nojs { padding: 12px 0 0; font-size: 15px; color: var(--c-sub); }
/* 열 머리 = 읽기 전용(줄 글이 스스로 읽힘 · 표 틀 0) */
.hb1-th { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hb1-rows { position: relative; }
.hb1-r { position: relative; display: grid; grid-template-columns: var(--cols); column-gap: 20px; align-items: center; min-height: 56px; border-bottom: 1px solid var(--c-line); font-size: 15.5px; }
.hb1-r > .ad { grid-area: 1 / 1; min-width: 0; font-size: 17px; font-weight: 560; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb1-r > .ty { grid-area: 1 / 2; font-weight: 600; color: var(--c-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb1-r > .sf { grid-area: 1 / 3; color: var(--c-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb1-r > .hp { grid-area: 1 / 4; display: flex; align-items: center; white-space: nowrap; min-width: 0; }
.hb1-r > .st { grid-area: 1 / 5; min-width: 0; }
.hb1-r > .nx { grid-area: 1 / 6; min-width: 0; color: var(--c-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb1-r .hp .hb-hop { background: transparent; color: var(--c-sub); }
.hb1-r.has-m { grid-template-rows: auto auto; row-gap: 2px; padding: 10px 0; }
/* 꼬리(초점 아래 줄): 한 단씩 흐려짐 — 표 반복이 아니라 '같은 사건에서 더 찾은 곳'으로 읽히게(글자 대비는 마지막 줄도 3:1 위) */
.hb1-r.t2 { opacity: .8; } .hb1-r.t3 { opacity: .64; } .hb1-r.t4 { opacity: .5; }
.hb1-r > .m { grid-area: 2 / 1 / 3 / -1; font-size: 15px; color: var(--c-mute); line-height: 1.4; }
/* 초점 줄 = 이 판의 주인공(주소 44px + 상태 칩 44px 알약 · 흰 1.5px 테두리 — 칩 색 문법은 그대로) · 둘째 줄 = 종류 · 찾은 곳 · 응답 · 다음 요청처 */
.hb1-trk { display: grid; grid-template-rows: 1fr; }
.hb1-trk-in { min-height: 0; }
.hb1-r.is-f { grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 18px; row-gap: 16px; padding: 40px 0 20px; border-bottom: 0; }
.hb1-r.is-f > .ad { grid-area: 1 / 1 / 2 / 5; font-size: 64px; line-height: 72px; font-weight: 650; letter-spacing: -.032em; color: var(--c-ink); }
.hb1-r.is-f > .st { grid-area: 1 / 5; justify-self: end; }
.hb1-r.is-f > .ty { grid-area: 2 / 1; font-size: 16px; color: var(--c-ink); }
.hb1-r.is-f > .sf { grid-area: 2 / 2; font-size: 16px; color: var(--c-sub); }
.hb1-r.is-f > .hp { grid-area: 2 / 3; }
.hb1-r.is-f > .nx { grid-area: 2 / 5; justify-self: end; font-size: 16px; font-weight: 600; color: var(--c-ink); }
.hb1-r.is-f .st .hb-stc { height: 52px; padding: 0 22px; font-size: 20px; border: 1.5px solid var(--c-ink); background: transparent; color: var(--c-ink); }
.hb1-strk { display: grid; grid-template-rows: 1fr; border-bottom: 1px dashed var(--c-rule); }
.hb1-strk-in { min-height: 0; }
.hb1-strip dl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 56px; padding: 6px 0 28px; }
.hb1-strip dl > div { display: grid; gap: 8px; min-width: 0; }
.hb1-strip dt { font-size: 15px; color: var(--c-mute); line-height: 1.3; }
.hb1-strip dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--c-ink); line-height: 1.45; }
.hb1-strip dd.hp { display: flex; flex-wrap: wrap; gap: 8px 0; }
.hb-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-weight: 560; color: var(--c-sub); }
.hb-chain b { font-weight: 650; color: var(--c-ink); }
.hb-chain i + i::before, .hb-chain b + i::before { content: ""; display: inline-block; width: 14px; height: 1px; margin: 0 12px 4px 0; background: var(--c-rule); }
/* 늦게 오는 줄 두 개(재게시 후보 · 캐시) — 박 4 에 트랙이 열리며 착지(처음 상태에 빈 자리를 남기지 않게) */
.hb1-ltrk { display: grid; grid-template-rows: 1fr; }
.hb1-ltrk-in { min-height: 0; }
/* 날아가는 글(박 1 · on 일 때만) — 초점 줄 주소 자리(위 34px · 줄 높이 52px)에 내려앉음 */
.hb1-fly { position: absolute; left: 0; right: 0; top: 40px; z-index: 4; display: none; height: 72px; pointer-events: none; }
.hb1-fly > span { font-size: 64px; line-height: 72px; font-weight: 650; letter-spacing: -.032em; color: var(--c-ink); white-space: nowrap; }
/* 발치: 한계 문장 */
.hb1-foot { padding: 20px 0 0; }
.hb1-limit { font-size: 15px; line-height: 1.55; color: var(--c-mute); }
/* 실측 줄(손님 주소) — '입력한 주소' 구분 줄 아래, 도장은 서버 row 이벤트가 온 줄에만 */
.hb1-live { border-bottom: 1px solid var(--c-line); }
.hb1-div { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid var(--c-line); font-size: 15px; font-weight: 600; color: var(--c-sub); }
.hb1-div-ex { border-bottom: 0; color: var(--c-mute); font-weight: 560; }
.hb1-r.is-live { min-height: 84px; grid-template-rows: auto auto; row-gap: 4px; padding: 12px 0; }
.hb1-r.is-live > .ad { color: var(--c-ink); font-weight: 650; }
.hb1-r.is-live > .st { display: flex; align-items: center; gap: 10px; }
.hb1-r.is-live .st .hb-stc { background: var(--c-sand); color: var(--c-ink); }
/* 실측 줄 상태 칩: 기다리는 동안 '확인 중'(모션 줄이기에서도) · 끝나면 끝 낱말 폭만(처음 낱말 r0 빼기 — 칩 오른쪽 빈 칸 0) */
.hb1-r.is-live:not(.is-done) .hb-roll > .r0 { visibility: visible; }
.hb1-r.is-live.is-done .hb-roll > .r0 { display: none; }
.hb1-r.is-live > .nx { color: var(--c-ink); font-weight: 600; white-space: normal; }
.hb1-r.is-live > .hb1-why { grid-area: 2 / 4 / 3 / -1; font-size: 15px; line-height: 1.5; color: var(--c-sub); }
/* 넓은 화면: 도장은 '찾은 곳' 칸(실측 줄은 비어 있음)에 두 줄 높이로 · 도장이 찍혀도 줄 높이 그대로(84) */
.hb1-r.is-live > .sf { grid-area: 1 / 3 / 3 / 4; display: flex; align-items: center; overflow: visible; }
.hb1-r.is-live .hb1-why:empty { display: none; }
.hb1-r.is-live .hp .hb-hop { background: var(--c-sand2); color: var(--c-ink2); }
.hb1-stamp { position: relative; flex: none; width: 60px; height: 60px; }
.hb1-stamp svg { width: 60px; height: 60px; display: block; }
.hb1-stamp circle { fill: none; stroke: var(--c-ink); stroke-width: 1; }
.hb1-stamp .f { fill: rgba(244, 242, 238, .04); stroke: none; }
.hb1-stamp text { font-family: var(--font); font-size: 11px; font-weight: 650; fill: var(--c-ink); letter-spacing: .02em; }
.hb1-stamp .c { font-size: 12px; font-variant-numeric: tabular-nums; }
.hb1-lmsg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.hb1-lmsg[hidden] { display: none; }
.hb1-lmsg-t { font-size: 16px; font-weight: 600; color: var(--c-ink); line-height: 1.5; }
.hb1-lmsg .hb-btn { min-height: 44px; }
.hb1-lmsg.is-wait, .hb1-lmsg.is-after { grid-template-columns: 1fr; }
.hb1-lmsg.is-wait .hb-btn, .hb1-lmsg.is-after .hb-btn { display: none; }
.hb1-lmsg.is-after .hb1-lmsg-t { font-size: 15px; font-weight: 500; color: var(--c-sub); }

/* ═══ B2 「결과서 둘째 쪽」 ═════════════════════════════════════════════ */
.hb2-g { display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
.hb2-l { grid-area: 1 / 1; }
.hb2-band { grid-area: 2 / 1; align-self: end; padding: 28px 0 0; }
.hb2-stage { grid-area: 1 / 2 / 3 / 3; position: relative; height: 900px; margin-right: calc(-1 * var(--g) - 120px); overflow: clip; }
.hb2-list { margin-top: 32px; border-top: 1px solid var(--c-line); }
.hb2-it { border-bottom: 1px solid var(--c-line); }
.hb2-h { font: inherit; letter-spacing: inherit; } /* 상황 이름 7 = h3(옛 홈 탭 h3 ×7 자리 · 제목 수 34) — 모양은 링크가 정함 */
.hb2-nm { display: flex; align-items: center; min-height: 58px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--c-mute); line-height: 1.25; }
.hb2-it.is-sel .hb2-nm { color: var(--c-ink); font-weight: 720; }
.hb2-more { display: grid; grid-template-rows: 0fr; }
.hb2-more-in { min-height: 0; clip-path: inset(0); visibility: hidden; }
.hb2-it.is-sel .hb2-more { grid-template-rows: 1fr; }
.hb2-it.is-sel .hb2-more-in { visibility: visible; }
.hb2-more .hb-go { margin: 2px 0 8px; }
.hb2-hub { margin-top: 18px; }
.hb2-win { width: 1000px; min-height: 1060px; }
.hb2-win .hb-wh { padding-right: 140px; }
.hb2-pg { display: flex; gap: 24px; padding: 0 40px; border-bottom: 1px solid var(--c-line); font-size: 15px; color: var(--c-mute); }
.hb2-pg span { position: relative; padding: 14px 0 12px; }
.hb2-pg span.is-on { color: var(--c-ink); font-weight: 650; }
.hb2-pg span.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-ink); }
.hb2-doc { padding: 24px 140px 22px 40px; }
.hb2-dt { display: flex; align-items: center; gap: 10px; }
.hb2-dt h3 { font-size: 24px; font-weight: 720; letter-spacing: -.015em; }
.hb2-sit { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; font-size: 15px; color: var(--c-mute); }
.hb2-sit b { font-size: 18px; font-weight: 720; color: var(--c-ink); }
.hb2-adr { color: var(--c-sub); font-weight: 600; }
.hb2-items { margin-top: 16px; border-top: 1px solid var(--c-line); }
.hb2-ir { display: grid; grid-template-columns: 180px minmax(0, 1fr) 170px; column-gap: 16px; align-items: center; min-height: 50px; border-bottom: 1px solid var(--c-line); font-size: 16px; }
.hb2-ir[hidden] { display: none; }
.hb2-ir > span:first-child { font-weight: 650; color: var(--c-ink); }
.hb2-ir > span:nth-child(2) { color: var(--c-sub); }
.hb2-ih { min-height: 38px; font-size: 15px; color: var(--c-mute); }
.hb2-ih > span:first-child, .hb2-ih > span:nth-child(2) { font-weight: 400; color: var(--c-mute); }
.hb2-route, .hb2-rec, .hb2-role { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-size: 15px; color: var(--c-sub); }
.hb2-route .k, .hb2-rec .k { color: var(--c-mute); min-width: 92px; }
.hb2-role { padding-top: 14px; border-top: 1px solid var(--c-line); color: var(--c-mute); }
.hb2-role b { color: var(--c-ink); font-weight: 650; }
.hb2-ribs { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.hb2-gate { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.hb2-gate > div { padding: 14px 0 16px; min-width: 0; }
.hb2-gate > div + div { padding-left: 20px; border-left: 1px solid var(--c-line); }
.hb2-gate h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.hb2-gate .sq { width: 10px; height: 10px; border-radius: 2px; background: var(--c-ink); flex: none; }
.hb2-gate .sq.o { background: var(--c-or); }
.hb2-gate .sq.e { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-mute); }
.hb2-gate p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--c-ink); font-weight: 560; }
.hb2-gate .is-dim p { color: var(--c-sub); font-weight: 500; }
.hb2-ft { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--c-mute); }
.hb2-ft a { color: var(--c-sub); text-decoration: underline; text-underline-offset: 3px; }
.hb2-peek { border-top: 1px solid var(--c-line); padding: 16px 140px 0 40px; background: var(--c-paper); }
.hb2-pk-h { font-size: 17px; font-weight: 720; margin-bottom: 6px; }
.hb2-pk-r { display: grid; grid-template-columns: 130px minmax(0, 1fr) 220px 110px; column-gap: 14px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--c-line); font-size: 15.5px; }
.hb2-pk-r .ty { font-weight: 650; } .hb2-pk-r .ad { color: var(--c-ink2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hb2-pk-r .rt { color: var(--c-sub); }

/* ═══ B3 「작업대」(11-04 무대 뒤 · 밝은 판) — 먹 큰 면은 무대가 맡아 이 판은 크림 위 왼쪽 기둥 | 오른쪽 사건 기록 창(이름 hb3-plate → hb3-desk) ═══ */
.hb3-desk { position: relative; display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 56px; align-items: start; width: min(100% - 2 * var(--g), 1360px); margin: 0 auto; }
.hb3-band { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.hb3-tel { margin-top: 10px; font-size: 15px; color: var(--c-sub); }
.hb3-stage { position: relative; min-width: 0; }
.hb3-win { width: 100%; }
.hb3-win .hb-wh { padding-right: 20px; }
.hb3-rail { padding: 18px 28px 4px; }
.hb3-cap { margin-bottom: 4px; font-size: 18px; }
.hb3-cap b { font-weight: 720; }
.hb3-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; column-gap: 18px; align-items: center; min-height: 64px; border-top: 1px solid var(--c-line); padding: 10px 0; }
.hb3-row.has-slip { align-items: start; }
.hb3-row.has-slip .nm { padding-top: 10px; }
.hb3-row .nm { font-size: 18px; font-weight: 720; letter-spacing: -.01em; line-height: 1.3; }
.hb3-row .nt { font-size: 15px; color: var(--c-sub); line-height: 1.45; }
.hb3-row.is-dim .nm { color: var(--c-mute); font-weight: 600; }
.hb3-row.is-dim .nt { color: var(--c-dim); }
.hb3-row[data-r="4"] .hb3-m4 { grid-column: 3; max-width: 150px; }
.hb3-slip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; width: min(100%, 470px); padding: 12px 16px 12px; border-radius: 14px; background: var(--c-paper); box-shadow: var(--sh-sat); z-index: 2; }
.hb3-slip .k { grid-column: 1; font-size: 15px; color: var(--c-mute); }
.hb3-slip .r { grid-column: 1; font-size: 16px; font-weight: 650; margin-top: 2px; line-height: 1.35; }
.hb3-slip > .hb-stc { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hb3-doc { grid-column: 1 / -1; grid-row: 3; align-self: stretch; min-height: 0; clip-path: inset(0); }
.hb3-doc::before { content: ""; display: block; margin: 8px 0 6px; border-top: 1px solid var(--c-line2); } /* 위 간격·괘선을 접히는 칸 안에(펼칠 때 한 프레임 튐 0) */
.hb3-doc > div { display: flex; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--c-dim); }
.hb3-doc > div.lit { color: var(--c-sub); font-weight: 560; }
.hb3-doc dd { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb3-doc .wrap dd { white-space: normal; } /* 본문 줄은 접지 않고 두 줄로(말줄임 0 — film-lite 잘린 글) */
.hb3-reply { grid-column: 1 / -1; display: grid; grid-template-rows: 1fr; }
.hb3-reply-in { min-height: 0; clip-path: inset(0); }
.hb3-reply p { padding: 8px 0 2px 186px; font-size: 15px; color: var(--c-sub); line-height: 1.5; }
.hb3-reply b { font-weight: 650; color: var(--c-ink); }
.hb3-log { margin: 16px 28px 0 72px; border-top: 1px solid var(--c-line); padding: 8px 0 12px; }
.hb3-log > li { font-size: 15px; color: var(--c-sub); }
.hb3-log > li > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 0; clip-path: inset(0); }
.hb3-log > li > div > * { padding: 7px 0; }
.hb3-log b { font-weight: 650; color: var(--c-ink); }
.hb3-lx { display: grid; grid-template-rows: 1fr; }

/* ═══ B4 「조건 판」 ═══════════════════════════════════════════════════ */
.hb4-top { display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 56px; align-items: end; } /* 오른쪽 칸 왼쪽 끝 = 아래 FAQ 칸·B5 요청서 창과 같은 줄(440 + 56) */
.hb4-board { position: relative; z-index: 1; margin-top: 48px; }
.hb4-prom { border-top: 1px solid var(--c-ink); background: var(--c-cream); }
.hb4-prom > li { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; column-gap: 28px; align-items: center; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--c-line); background: var(--c-cream); }
.hb4-prom h3 { font-size: 19px; font-weight: 720; letter-spacing: -.012em; line-height: 1.3; }
.hb4-prom p { font-size: 15.5px; line-height: 1.55; color: var(--c-sub); }
.hb4-prom > li > a { justify-self: end; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hb4-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hb4-chips li { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-paper); font-size: 15px; color: var(--c-sub); white-space: nowrap; }
.hb4-faq { display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 56px; margin-top: 72px; }
.hb4-faq > .hb4-fh { grid-column: 1; grid-row: 1; }
.hb4-faq > .hb4-more { grid-column: 1; grid-row: 2 / span 6; align-self: start; margin-top: 8px; }
.hb4-hubs { margin-top: 6px; display: grid; }
.hb4-hubs .hb-go { color: var(--c-sub); }
.hb4-faq > .hb4-q { grid-column: 2; }
.hb4-faq > .hb4-q:first-of-type { border-top: 1px solid var(--c-ink); }
.hb4-fh { font-size: 22px; font-weight: 720; letter-spacing: -.015em; line-height: 1.3; padding-top: 14px; }
.hb4-q { border-bottom: 1px solid var(--c-line); }
.hb4-q > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 8px 0; font-size: 18px; font-weight: 620; line-height: 1.4; list-style: none; cursor: pointer; }
.hb4-q > summary::-webkit-details-marker { display: none; }
.hb4-q > summary i { flex: none; font-size: 24px; font-weight: 300; color: var(--c-mute); transition: transform .2s; }
.hb4-q[open] > summary i { transform: rotate(45deg); }
.hb4-a { display: grid; grid-template-rows: 1fr; }
.hb4-a > p { min-height: 0; overflow: hidden; padding: 0 48px 18px 0; font-size: 15.5px; line-height: 1.65; color: var(--c-sub); }

/* ═══ B5 「빈 요청서」 ═════════════════════════════════════════════════ */
.hb5 { padding-bottom: 112px; }
.hb5-g { display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 56px; align-items: start; }
.hb5-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hb5-chips li { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-paper); font-size: 15px; color: var(--c-sub); white-space: nowrap; }
.hb5 .who { margin-top: 30px; }
.hb5-wh { font-size: 17px; font-weight: 720; padding-bottom: 10px; border-bottom: 1px solid var(--c-ink); }
.hb5 .who4 li { border-bottom: 1px solid var(--c-line); }
.hb5 .who4 a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 64px; padding: 10px 0; }
.hb5 .who4 b { font-size: 16px; font-weight: 650; }
.hb5 .who4 span { grid-column: 1; font-size: 15px; color: var(--c-sub); line-height: 1.5; }
.hb5 .who4 i { grid-column: 2; grid-row: 1 / span 2; color: var(--c-mute); }
.hb5-not { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--c-sub); }
.hb5-stage { position: relative; }
.hb5-win { width: 100%; }   /* 오른쪽 끝 = 다른 구간 보드와 같은 1400 줄(760 상한 걷음 · 1440 물건 면적 42→45+) */
.hb5-wh .hb-st li { color: var(--c-dim); }
.hb5-form { margin: 0; }
.hb5-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--c-line); background: var(--c-sand2); }
.hb5-tabs li { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 15px; color: var(--c-mute); border-right: 1px solid var(--c-line); }
.hb5-tabs li:last-child { border-right: 0; }
.hb5-form:has(#f-url:not(:placeholder-shown)) .hb5-tabs .t0 { background: var(--c-sand); color: var(--c-ink); font-weight: 650; }
.hb5-win:has(#f-url:not(:placeholder-shown)) .hb5-s0 { color: var(--c-ink); font-weight: 720; }
.hb5-form .fill { padding: 24px 32px 28px; }
.hb5-ft { font-size: 20px; font-weight: 720; letter-spacing: -.01em; }
.hb5-form .pick { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; color: var(--c-sub); }
.hb5-form .pick[hidden] { display: none; }
.hb5-form .pick button { min-width: 44px; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 18px; cursor: pointer; }
.hb5-form .fld { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.hb5-form label[for="f-url"], .hb5-form legend { display: block; padding: 0; font-size: 15px; font-weight: 600; color: var(--c-ink); }
.hb5-form textarea { display: block; width: 100%; margin-top: 8px; min-height: 104px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-cream);
  font: inherit; font-size: 16px; line-height: 1.55; color: var(--c-ink); resize: vertical; }
.hb5-form textarea::placeholder, .hb5-form input::placeholder { color: var(--c-mute); opacity: 1; }
.hb5-form .hint { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--c-mute); }
.hb5-form .err { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--c-ort); }
.hb5-form .err[hidden] { display: none; }
.hb5-form .reads { margin-top: 12px; }
.hb5-form .reads[hidden] { display: none; }
.hb5-form .r-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.hb5-form .r-list .bud { display: none; }
.hb5-form .r-place { font-weight: 650; } .hb5-form .r-op { color: var(--c-sub); } .hb5-form .r-guide { color: var(--c-sub); text-decoration: underline; text-underline-offset: 3px; }
.hb5-form .r-note { width: 100%; font-size: 15px; color: var(--c-mute); padding-bottom: 6px; }
.hb5-form .r-lock { margin-top: 8px; border-top: 1px solid var(--c-line); }
.hb5-form .r-lock > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; min-height: 44px; align-items: center; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.hb5-form .r-lock dt { color: var(--c-mute); } .hb5-form .r-lock dd { color: var(--c-sub); font-weight: 560; }
.hb5-form .r-cap, .hb5-form .r-sum { margin-top: 8px; font-size: 15px; color: var(--c-mute); }
.hb5-form .r-sum:empty { display: none; }
.hb5-form .via-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; margin-top: 8px; }
.hb5-form .seg { display: flex; gap: 8px; }
.hb5-form .seg label { position: relative; display: inline-flex; }
.hb5-form .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hb5-form .seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 15px; white-space: nowrap; color: var(--c-ink); }
.hb5-form .seg input:checked + span { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.hb5-form .seg input:focus-visible + span { outline: 2px solid var(--c-ort); outline-offset: 3px; }
.hb5-form .one { min-height: 44px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-cream); font: inherit; font-size: 16px; color: var(--c-ink); min-width: 0; }
.hb5-form .agree-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; font-size: 15px; color: var(--c-sub); }
.hb5-form .agree { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.hb5-form .agree input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-ink); flex: none; }
.hb5-form .agree-pv { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.hb5-form .send { width: 100%; margin-top: 14px; min-height: 52px; }
.hb5-form .fine { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--c-mute); }
.hb5-form .nojs { margin-top: 10px; font-size: 15px; color: var(--c-ort); }
.hb5-form .sent { padding: 28px 32px 30px; }
.hb5-form .sent[hidden] { display: none; }
.hb5-form .sent h3 { font-size: 22px; font-weight: 720; letter-spacing: -.01em; }
.hb5-form .sent-to { margin-top: 8px; font-size: 16px; color: var(--c-sub); }
.hb5-form .sent-lines { margin-top: 14px; }
.hb5-form .sent-lines[hidden] { display: none; }
.hb5-form .sl-h { font-size: 15px; font-weight: 650; }
.hb5-form .sent-lines li { display: flex; gap: 10px; min-height: 40px; align-items: center; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.hb5-form .sent-lines .bud { display: none; }
.hb5-form .sent-k { margin-top: 12px; }
.hb5-form .again { margin-top: 12px; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: 10px; background: transparent; font: inherit; font-size: 15px; cursor: pointer; }
.hb5-form .proto { display: inline-flex; margin-bottom: 10px; font-size: 14px; color: var(--c-ort); }

/* ═══ 움직임(포스터 = 기본 · html.anim 에서만 처음 상태) ════════════════ */
@keyframes hb-press { 0% { transform: none; } 45% { transform: scale(.97); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .hb.is-snap, html.anim .hb.is-snap *, html.anim .hb .is-snap, html.anim .hb .is-snap * { transition: none !important; animation: none !important; }
  /* B1 — 박 1(0.3) 누름·날기·초점 줄 도착 · 박 2(1.4) 종류·찾은 곳·응답·다음 요청처 · 박 3(2.6) 상태 굴림(초점 줄 '확인 중 → 담당자 확인 필요'·검색 미리보기 줄)
          박 4(3.3) 읽은 것 띠 펼침·늦은 줄 2 착지 · 박 5(4.2) 입력 비움 · 끝 7.0(11-04 무대: 사이드바 점·기록 줄·카메라 뺌) */
  html.anim .hb1.is-armed .hb1-typed { visibility: visible; transition: opacity .2s ease; }
  html.anim .hb1[data-live="on"].is-armed .hb1-typed { visibility: hidden; }
  html.anim .hb1.is-armed.hb-b1 .hb1-typed { opacity: 0; }
  html.anim .hb1.is-armed.hb-b5 .hb1-typed { visibility: hidden; }
  html.anim .hb1.is-armed .hb1-field textarea::placeholder { transition: color .2s ease; }
  html.anim .hb1.is-armed:not(.hb-b5) .hb1-field textarea::placeholder { color: transparent; }
  html.anim .hb1.is-armed.hb-b1 .hb1-go { animation: hb-press .18s ease-out 1 both; }
  html.anim .hb1.is-armed .hb1-trk { transition: grid-template-rows .8s var(--e-arrive); }
  html.anim .hb1.is-armed .hb1-trk-in { clip-path: inset(0); }
  html.anim .hb1[data-live="on"].is-armed:not(.hb-b1) .hb1-trk { grid-template-rows: 0fr; }   /* 11-04 무대: 꺼짐(운영) 판은 초점 줄이 처음부터 자리에 있음(주인공이 빈 자리로 시작하지 않게) — 켜짐만 날아온 주소가 내려앉을 줄을 엶 */
  html.anim .hb1.is-armed .hb1-r.is-f > * { transition: opacity .35s var(--e-arrive), transform .35s var(--e-arrive); }
  html.anim .hb1.is-armed:not(.hb-b2) .hb1-r.is-f > :not(.ad) { opacity: 0; transform: translateY(4px); }
  html.anim .hb1[data-live="on"].is-armed .hb1-r.is-f > .ad { transition: opacity .15s linear .7s; }
  html.anim .hb1[data-live="on"].is-armed:not(.hb-b1) .hb1-r.is-f > .ad { opacity: 0; }
  html.anim .hb1[data-live="off"].is-armed .hb1-r.is-f { transition: transform .8s var(--e-arrive); }
  html.anim .hb1[data-live="off"].is-armed:not(.hb-b1) .hb1-r.is-f { transform: translateY(-16px); }
  html.anim .hb1[data-live="on"].is-armed .hb1-fly { display: grid; transform: translate(var(--fly-x, 0px), var(--fly-y, -116px)); opacity: 1;
    transition: transform .8s var(--e-arrive), opacity .15s linear .72s; }
  html.anim .hb1[data-live="on"].is-armed.hb-b1 .hb1-fly { transform: none; opacity: 0; }
  html.anim .hb1.is-armed .hb1-r.is-f .hp .hb-hop { transition: opacity .35s var(--e-arrive), transform .35s var(--e-arrive); }
  html.anim .hb1.is-armed .hb1-r.is-f .hp .hb-hop:nth-child(1) { transition-delay: .2s; }
  html.anim .hb1.is-armed .hb1-r.is-f .hp .hb-hop:nth-child(2) { transition-delay: .6s; }
  html.anim .hb1.is-armed:not(.hb-b2) .hb1-r.is-f .hp .hb-hop { opacity: 0; transform: translateY(6px); }
  html.anim .hb1.is-armed .hb1-tbl .hb-roll > span { transition: opacity .35s var(--e-arrive), transform .35s var(--e-arrive); }
  html.anim .hb1.is-armed:not(.hb-b3) .hb1-tbl .hb-roll > .r0 { visibility: visible; }
  html.anim .hb1.is-armed:not(.hb-b3) .hb1-tbl .hb-roll > .r1 { opacity: 0; transform: translateY(4px); }
  html.anim .hb1.is-armed.hb-b3 .hb1-tbl .hb-roll > .r0 { visibility: visible; opacity: 0; transform: translateY(-4px); }
  html.anim .hb1.is-armed .hb1-tbl .hb-roll > .r0 { display: block; }
  html.anim .hb1.is-armed .hb1-tbl .hb-roll { width: var(--rw0, auto); transition: background-color .2s, border-color .2s, color .2s, width .35s var(--e-arrive); }
  html.anim .hb1.is-armed.hb-b3 .hb1-tbl .hb-roll { width: var(--rw1, auto); }
  html.anim .hb1.is-armed:not(.hb-b3) .hb1-tbl .hb-roll { background: transparent; border-color: var(--c-rule); color: var(--c-sub); }
  html.anim .hb1.is-armed .hb1-r.is-f > .nx { transition-delay: .2s; transition-duration: .4s; }
  html.anim .hb1.is-armed.hb-b2:not(.hb-b3) .hb1-r.is-f > .nx { opacity: 0; transform: translateX(16px); }
  html.anim .hb1.is-armed .hb1-strk { transition: grid-template-rows .42s var(--e-arrive); }
  html.anim .hb1.is-armed .hb1-strk-in { clip-path: inset(0); }
  html.anim .hb1.is-armed:not(.hb-b4) .hb1-strk { grid-template-rows: 0fr; }
  html.anim .hb1.is-armed .hb1-strip dl > div { transition: opacity .35s var(--e-arrive), transform .35s var(--e-arrive); }
  html.anim .hb1.is-armed .hb1-strip dl > .k1 { transition-delay: .2s; } html.anim .hb1.is-armed .hb1-strip dl > .k2 { transition-delay: .26s; } html.anim .hb1.is-armed .hb1-strip dl > .k3 { transition-delay: .32s; }
  html.anim .hb1.is-armed:not(.hb-b4) .hb1-strip dl > div { opacity: 0; transform: translateY(16px); }
  html.anim .hb1.is-armed .hb1-ltrk { transition: grid-template-rows .6s var(--e-arrive); }
  html.anim .hb1.is-armed .hb1-ltrk-in { clip-path: inset(0); }
  html.anim .hb1.is-armed:not(.hb-b4) .hb1-ltrk { grid-template-rows: 0fr; }
  html.anim .hb1.is-armed .hb1-late { transition: transform .6s var(--e-arrive), opacity .6s var(--e-arrive); }
  html.anim .hb1.is-armed .hb1-late + .hb1-late { transition-delay: .09s; }
  html.anim .hb1.is-armed:not(.hb-b4) .hb1-late { transform: translateY(-16px); opacity: 0; }
  /* 실측 줄 착지(손님 누름) — 도착 0.8s · 상태 굴림 0.35s · 도장 1.12→1 */
  html.anim .hb1-r.is-live { transition: transform .8s var(--e-arrive), opacity .8s var(--e-arrive); }
  html.anim .hb1-r.is-live.is-new { transform: translateY(-16px); opacity: 0; }
  html.anim .hb1-r.is-live .hb-roll > span { transition: opacity .35s var(--e-arrive), transform .35s var(--e-arrive); }
  html.anim .hb1-r.is-live:not(.is-done) .hb-roll > .r0 { visibility: visible; }
  html.anim .hb1-r.is-live:not(.is-done) .hb-roll > .r1 { opacity: 0; transform: translateY(4px); }
  html.anim .hb1-r.is-live.is-done .hb-roll > .r0 { display: block; visibility: visible; opacity: 0; transform: translateY(-4px); }
  html.anim .hb1-r.is-live .hb-roll { transition: width .35s var(--e-arrive); }   /* 폭은 board-live 가 잰 값(지금 폭 → 끝 낱말 폭)으로 옮기고 0.45초 뒤 r0 를 빼요 */
  html.anim .hb1-r.is-live .hp .hb-hop { transition: opacity .35s var(--e-arrive), transform .35s var(--e-arrive); }
  html.anim .hb1-r.is-live .hp .hb-hop.is-new { opacity: 0; transform: translateY(6px); }
  html.anim .hb1-r.is-live .hb1-stamp { transition: transform .14s ease-out; }
  html.anim .hb1-r.is-live .hb1-stamp.is-new { transform: scale(1.12); }

  /* B2 — 확인 항목 60ms 시차 · 경로 칩 도장 · 관문 값 · 목록 누름(몸통 200ms 교차 + 8px) */
  html.anim .hb2.is-armed .hb2-ir:not(.hb2-ih) { transition: opacity .45s var(--e-arrive), transform .45s var(--e-arrive); }
  html.anim .hb2.is-armed .hb2-ir:nth-child(3) { transition-delay: .06s; } html.anim .hb2.is-armed .hb2-ir:nth-child(4) { transition-delay: .12s; } html.anim .hb2.is-armed .hb2-ir:nth-child(5) { transition-delay: .18s; }
  html.anim .hb2.is-armed:not(.hb-b1) .hb2-ir:not(.hb2-ih) { opacity: 0; transform: translateY(16px); }
  html.anim .hb2.is-armed .hb2-ribs .hb-rib { transition: transform .2s var(--e-arrive), opacity .2s; }
  html.anim .hb2.is-armed:not(.hb-b2) .hb2-ribs .hb-rib { transform: scale(.96); opacity: 0; }
  html.anim .hb2.is-armed .hb2-gate p { transition: opacity .3s var(--e-arrive); }
  html.anim .hb2.is-armed .hb2-gate > div:nth-child(2) p { transition-delay: .06s; } html.anim .hb2.is-armed .hb2-gate > div:nth-child(3) p { transition-delay: .12s; }
  html.anim .hb2.is-armed:not(.hb-b3) .hb2-gate p { opacity: 0; }
  html.anim .hb2-body { transition: opacity .2s ease, transform .2s ease; }
  html.anim .hb2-body.is-swap { opacity: 0; transform: translateY(8px); }
  html.anim .hb2-more { transition: grid-template-rows .28s var(--e-tab); }
  html.anim .hb2-nm { transition: color .28s var(--e-tab); }

  /* B3 — 종이 1·2 이동 · 회신 굴림 · 새 줄 · 위성 · 기록 줄 · 단계(처음 '요청' → 박3 '회신' → 박4 '재확인' = 포스터) · 30칸 줄은 11-03 정리에서 뺌(장면 자리 #gfx-dial 이 맡음) */
  html.anim .hb3.is-armed .hb3-slip { transition: transform .9s var(--e-arrive), opacity .3s, grid-template-rows .9s var(--e-arrive); }
  html.anim .hb3.is-armed:not(.hb-b1) .hb3-slip[data-slip="1"], html.anim .hb3.is-armed:not(.hb-b2) .hb3-slip[data-slip="2"] { grid-template-rows: auto auto 0fr; }
  html.anim .hb3.is-armed .hb3-row[data-r="0"] .nt { transition: opacity .35s var(--e-arrive) .5s, transform .35s var(--e-arrive) .5s; }
  html.anim .hb3.is-armed:not(.hb-b1) .hb3-row[data-r="0"] .nt { opacity: 0; transform: translateY(16px); }
  html.anim .hb3.is-armed .hb3-slip[data-slip="2"] { transition: transform 1.2s var(--e-travel), opacity .3s, grid-template-rows 1.2s var(--e-travel); }
  html.anim .hb3.is-armed:not(.hb-b1) .hb3-slip[data-slip="1"] { transform: translate(var(--sx1, 0px), var(--sy1, -74px)) scale(.94); }
  html.anim .hb3.is-armed:not(.hb-b2) .hb3-slip[data-slip="2"] { transform: translate(var(--sx2, 0px), var(--sy2, -300px)) scale(.94); }
  html.anim .hb3.is-armed:not(.hb-b20) .hb3-slip[data-slip="2"] { opacity: 0; } /* hb-b20 = 종이 2 가 접수 줄에 나타남(박 2 직전 · JS 가 그때 자리를 다시 잼) */
  html.anim .hb3.is-armed .hb3-slip > .hb-stc { transition: opacity .25s ease .55s; }
  html.anim .hb3.is-armed:not(.hb-b1) .hb3-slip[data-slip="1"] > .hb-stc, html.anim .hb3.is-armed:not(.hb-b2) .hb3-slip[data-slip="2"] > .hb-stc { opacity: 0; }
  html.anim .hb3.is-armed .hb3-slip .hb-roll > span { transition: opacity .35s var(--e-arrive), transform .35s var(--e-arrive); }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-slip .hb-roll > .r0 { visibility: visible; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-slip .hb-roll > .r1 { opacity: 0; transform: translateY(4px); }
  html.anim .hb3.is-armed.hb-b3 .hb3-slip .hb-roll > .r0 { visibility: visible; opacity: 0; transform: translateY(-4px); }
  html.anim .hb3.is-armed .hb3-slip .hb-roll > .r0 { display: block; }
  html.anim .hb3.is-armed .hb3-slip .hb-roll { width: var(--rw0, auto); transition: opacity .25s ease .55s, background-color .2s, color .2s, border-color .2s, width .35s var(--e-arrive); } /* opacity 를 빼면 칩이 박 1 에 한 프레임 튀어나옴 */
  html.anim .hb3.is-armed.hb-b3 .hb3-slip .hb-roll { width: var(--rw1, auto); }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-slip .hb-roll { color: var(--c-ink); background: var(--c-sand); border-color: var(--c-line); }
  html.anim .hb3.is-armed .hb3-reply { transition: grid-template-rows .42s var(--e-arrive); }
  html.anim .hb3.is-armed .hb3-reply-in > p { transition: transform .42s var(--e-arrive); }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-reply { grid-template-rows: 0fr; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-reply-in > p { transform: translateY(16px); }
  html.anim .hb3.is-armed .hb3-next { transition: opacity .3s var(--e-arrive) .1s, transform .3s var(--e-arrive) .1s; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-next { opacity: 0; transform: translateY(16px); }
  html.anim .hb3.is-armed .hb3-lx { transition: grid-template-rows .5s var(--e-arrive); }
  html.anim .hb3.is-armed .hb3-lx > div { transition: opacity .4s var(--e-arrive) .1s; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-lx[data-lx="3"], html.anim .hb3.is-armed:not(.hb-b4) .hb3-lx[data-lx="4"], html.anim .hb3.is-armed:not(.hb-b6) .hb3-lx[data-lx="6"] { grid-template-rows: 0fr; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb3-lx[data-lx="3"] > div, html.anim .hb3.is-armed:not(.hb-b4) .hb3-lx[data-lx="4"] > div, html.anim .hb3.is-armed:not(.hb-b6) .hb3-lx[data-lx="6"] > div { opacity: 0; }
  html.anim .hb3.is-armed .hb-st li::after { transition: transform .2s ease, color .2s ease; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb-st [data-s="회신"].is-now { color: inherit; font-weight: inherit; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb-st [data-s="회신"].is-now::after { transform: scaleX(0); }
  html.anim .hb3.is-armed:not(.hb-b3) .hb-st [data-s="요청"], html.anim .hb3.is-armed.hb-b3:not(.hb-b4) .hb-st [data-s="회신"] { color: var(--c-ink); font-weight: 720; }
  html.anim .hb3.is-armed:not(.hb-b3) .hb-st [data-s="요청"]::after, html.anim .hb3.is-armed.hb-b3:not(.hb-b4) .hb-st [data-s="회신"]::after { transform: none; }

  /* B4 — 약속 줄 60ms 시차(월별 보고 견본은 11-03 정리에서 뺌) */
  html.anim .hb4.is-armed .hb4-prom > li { transition: transform .45s var(--e-arrive); }
  html.anim .hb4.is-armed .hb4-prom > li:nth-child(2) { transition-delay: .06s; } html.anim .hb4.is-armed .hb4-prom > li:nth-child(3) { transition-delay: .12s; }
  html.anim .hb4.is-armed .hb4-prom > li:nth-child(4) { transition-delay: .18s; } html.anim .hb4.is-armed .hb4-prom > li:nth-child(5) { transition-delay: .24s; }
  html.anim .hb4.is-armed .hb4-prom > li:nth-child(6) { transition-delay: .3s; } html.anim .hb4.is-armed .hb4-prom > li:nth-child(7) { transition-delay: .36s; }
  html.anim .hb4.is-armed:not(.hb-b2) .hb4-prom > li { transform: translateY(16px); }
  html.anim .hb4-a { transition: grid-template-rows .28s var(--e-tab); }
  html.anim .hb4-q.is-closing > .hb4-a, html.anim .hb4-q.is-opening > .hb4-a { grid-template-rows: 0fr; }

  /* B5 — 빈 파일 24px 위에서 착지 · 빈 탭 5 60ms 시차 */
  html.anim .hb5-win.is-armed { transition: transform .8s var(--e-arrive); }
  html.anim .hb5-win.is-armed:not(.hb-b1) { transform: translateY(-24px); }
  html.anim .hb5-win.is-armed .hb5-tabs li { transition: transform .35s var(--e-arrive); }
  html.anim .hb5-win.is-armed .hb5-tabs li:nth-child(2) { transition-delay: .06s; } html.anim .hb5-win.is-armed .hb5-tabs li:nth-child(3) { transition-delay: .12s; }
  html.anim .hb5-win.is-armed .hb5-tabs li:nth-child(4) { transition-delay: .18s; } html.anim .hb5-win.is-armed .hb5-tabs li:nth-child(5) { transition-delay: .24s; }
  html.anim .hb5-win.is-armed:not(.hb-b2) .hb5-tabs li { transform: translateY(8px); }
}

/* ═══ 4단 진행 줄 .hb-prog(11-03 정리 · 11-04 무대 · 지시서 §15-1·§16·§19) ════════════════════
   찾기·가려내기·요청·확인 — 무대 위 어두운 줄(토큰 = css/stage.css · nav 에 class hb-stage) · 지금 단계 = 흰 글자 + 주황 2px 밑줄 · 지난 단계 사이 선 = 흰 1px 채움 · 아직 = 흐림 · 아이콘·번호 0.
   자리 = 첫 줄 섹션(#different) 바로 아래(같은 화면의 '진행 4단계 한 줄') · JS(board-ui prog → html.hb-prog-on) = 머리줄 아래에 붙어 무대 끝까지(sticky) · B2(data-prog 0)부터 .is-out(숨음).
   첫 줄 섹션이 읽는 줄에 있는 동안(.is-idx) = 네 단계 모두 흰 글자 · html.anim 이면 그 위로 시연(.is-demo · board-ui 가 is-now · is-fill 을 차례로: 사이 선이 2초 동안 흰색으로 차오름 · 한 바퀴 8.2초 · 끝 1.5초 멈춤).
   붙은 동안(.is-stuck) 바탕(::before)이 머리줄 띠까지 덮음(알약 뒤로 글·단추 비침 0). 폰은 머리줄이 숨으면(#site-header.is-hidden) 같이 위로 붙음.
   움직임 = transform · opacity · 색 · 1px 선 채움(background-size) 뿐(모션 줄이기 = 바로). */
.hb-prog { --pg-bg: var(--st-bg, #fdfbf7); --pg-ink: var(--st-ink, #151414); --pg-mute: var(--st-dim, #8f897f); --pg-line: var(--st-line, #151414); --pg-link: var(--st-line, rgba(21, 20, 20, .22)); --pg-or: var(--st-accent, #ff5e1f); --prog-h: var(--st-prog, 44px);
  position: relative; z-index: 40; height: var(--prog-h); background: var(--pg-bg); border-bottom: 1px solid var(--pg-line); color: var(--pg-ink);
  font-family: var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; word-break: keep-all;
  transform: translateY(calc(var(--pg-hd, 0px) + var(--pg-out, 0px))); }
.hb-prog-in { display: flex; align-items: stretch; height: 100%; width: min(100% - 80px, 1360px); margin: 0 auto; padding: 0; list-style: none; }
.hb-prog-in > li { position: relative; display: flex; align-items: center; flex: 1 1 0; gap: 16px; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1; color: var(--pg-mute); white-space: nowrap; }
.hb-prog-in > li:last-child { flex: 0 0 auto; }
.hb-prog-in > li > span { position: relative; display: flex; align-items: center; height: 100%; }
.hb-prog-in > li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; margin-right: 16px; background: var(--pg-link) linear-gradient(var(--pg-ink), var(--pg-ink)) no-repeat 0 0 / 0% 100%; }
.hb-prog-in > li.is-past::after, .hb-prog-in > li.is-fill::after { background-size: 100% 100%; }
.hb-prog-in > li.is-past, .hb-prog-in > li.is-now, .hb-prog.is-idx:not(.is-demo) .hb-prog-in > li, html:not(.fxjs) .hb-prog-in > li { color: var(--pg-ink); }
.hb-prog-in > li.is-now { font-weight: 720; }
.hb-prog-in > li > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pg-or); transform: scaleX(0); transform-origin: left; }
.hb-prog-in > li.is-now > span::after { transform: none; }
.hb-prog::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--hdx-band, 64px); background: var(--pg-bg); opacity: 0; pointer-events: none; }
.hb-prog.is-stuck::before { opacity: 1; }
html.hb-prog-on .hb-prog { position: sticky; top: var(--hdx-band, 64px); }
html.hb-prog-on { scroll-padding-top: calc(var(--hd-h, 64px) + 56px); }
html.hb-prog-on .hb-anchor { scroll-margin-top: calc(var(--hd-h, 64px) + 64px); }
.hb-prog.is-out { --pg-out: -12px; opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html.hb-prog-on .hb-prog { transition: transform var(--t-fast, .2s) var(--ease-ui, cubic-bezier(.22, 1, .36, 1)), opacity .2s, visibility 0s, background-color .2s, border-color .2s; }
  html.hb-prog-on .hb-prog.is-out { transition: transform .2s, opacity .2s, visibility 0s .2s; }
  .hb-prog-in > li { transition: color .3s; }
  .hb-prog-in > li::after { transition: background-size var(--fill-t, .3s) linear; }
  .hb-prog-in > li.is-fill { --fill-t: 2s; }
  .hb-prog-in > li > span::after { transition: transform .25s var(--e-tab, cubic-bezier(.22, 1, .36, 1)); }
  .hb-prog::before { transition: opacity .15s linear, background-color .2s; }
}
@media (max-width: 767px) {
  .hb-prog-in { width: calc(100% - 32px); }
  .hb-prog-in > li { gap: 8px; font-size: 14.5px; }
  .hb-prog-in > li:not(:last-child)::after { margin-right: 8px; min-width: 8px; }
  html.hb-prog-on #site-header.is-hidden ~ #main .hb-prog { --pg-hd: calc(-1 * var(--hdx-band, 56px)); }
  html.hb-prog-on { scroll-padding-top: calc(var(--hd-h, 56px) + 48px); }
}
@media (max-width: 379px) { .hb-prog-in > li { font-size: 14px; letter-spacing: -.01em; } }

/* ═══ B3 왼쪽 기둥 따라옴(11-03 정리 · 11-04 밝은 판) — 넓은 화면(1181↑ · 높이 820↑)에서 제목·단추가 머리줄 아래에 붙어 창과 같이 내려감(무대 뒤라 진행 줄 없음) */
@media (min-width: 1181px) and (min-height: 820px) {
  .hb3-l { position: sticky; top: calc(var(--hdx-band, 64px) + 40px); align-self: start; }
}

/* ═══ 좁은 데스크톱·태블릿(≤1180): 쌓기 ════════════════════════════════ */
@media (max-width: 1180px) {
  .hb1 { --cols: minmax(0, 1.2fr) 104px 120px 116px 164px minmax(0, .8fr); }
  .hb1-r { column-gap: 14px; }
  .hb1-r.is-f > .ad { font-size: 46px; line-height: 54px; }
  .hb1-fly { height: 54px; } .hb1-fly > span { font-size: 46px; line-height: 54px; }
  .hb2-g, .hb4-top, .hb5-g { display: flex; flex-direction: column; }
  .hb2-stage { height: auto; margin: 32px calc(-1 * var(--g)) 0 0; max-height: 960px; }
  .hb2-win { width: calc(100% + 40px); min-height: 0; }
  .hb2-band { padding-top: 24px; align-self: stretch; } /* 세로 쌓기에서 end 는 오른쪽 붙임이 돼서 8px 들여쓰기가 생겼음 */
  .hb3-desk { display: flex; flex-direction: column; }
  .hb3-stage { margin-top: 32px; width: 100%; }
  /* 좁은 데스크톱·태블릿: 위성은 창 아래에 쌓음(창 안 글 덮음 0) */
  .hb4-top { align-items: stretch; } /* 세로 쌓기에서 end = 오른쪽 붙음(넓은 화면 두 칸의 아래 맞춤 값) → 늘임 */
  .hb4-board { margin-top: 40px; }
  .hb4-faq { display: block; }
  .hb4-faq > .hb4-q:first-of-type { border-top: 0; }
  .hb4-fh { padding: 0 0 14px; border-bottom: 1px solid var(--c-ink); }
  .hb5-stage { margin-top: 32px; width: 100%; }
  .hb5-win { width: 100%; }
}

/* ═══ B1 원장 줄 1100 이하(태블릿·폰 · 11-04 무대) — 두 줄 행(주소 / 종류 · 찾은 곳 | 상태 칩) · 응답·다음 요청처·메모 칸은 초점 줄에만(주소 칸이 좁아지지 않게) ═══ */
@media (max-width: 1100px) {
  .hb1-r, .hb1-r.has-m { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; padding: 12px 0; min-height: 66px; }
  .hb1-r > .ad { grid-area: 1 / 1 / 2 / 3; }
  .hb1-r > .ty { grid-area: 2 / 1; font-size: 14.5px; }
  .hb1-r > .sf { grid-area: 2 / 2; font-size: 14.5px; }
  .hb1-r > .st { grid-area: 1 / 3 / 3 / 4; justify-self: end; }
  .hb1-r > .hp, .hb1-r > .nx, .hb1-r > .m { display: none; }
  .hb1-r.is-f { padding: 30px 0 16px; }
  .hb1-r.is-f > .hp { display: flex; }
  .hb1-r.is-f > .nx { display: block; }
  /* 실측 줄: 주소 | 도장(찾은 곳 칸 · 768↑) | 상태 · 아래로 종류 · 응답 · 다음 요청처 · 이유 */
  .hb1-r.is-live { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto auto; min-height: 72px; }
  .hb1-r.is-live > .ad { grid-area: 1 / 1; }
  .hb1-r.is-live > .ty { grid-area: 2 / 1; }
  .hb1-r.is-live > .hp { display: flex; grid-area: 3 / 1; }
  .hb1-r.is-live > .sf { grid-area: 1 / 2 / 4 / 3; display: flex; }
  .hb1-r.is-live > .st { grid-area: 1 / 3 / 3 / 4; flex-direction: column; align-items: flex-end; gap: 6px; }
  .hb1-r.is-live > .nx { display: block; grid-area: 4 / 1 / 5 / -1; font-size: 14.5px; }
  .hb1-r.is-live > .hb1-why { grid-area: 5 / 1 / 6 / -1; font-size: 14px; }
}

/* ═══ 폰(≤767) — 다시 설계(1:1 크게 · 두 줄 행 · 위성 쌓기) ═══════════ */
@media (max-width: 767px) {
  .hb { --g: 16px; padding-top: 48px; }
  .hb-eb { margin-bottom: 10px; font-size: 14px; }
  .hb-h { font-size: 30px; line-height: 1.22; letter-spacing: -.022em; }
  .hb-lead { margin-top: 10px; font-size: 16px; line-height: 1.6; }
  .hb-why { font-size: 15px; }
  .hb-acts { gap: 10px; margin-top: 12px; }
  .hb-acts .hb-btn { flex: 1 1 auto; min-height: 48px; padding: 0 16px; font-size: 15px; }
  .hb-btn { font-size: 15px; }
  .hb-m-off { display: none !important; }
  .hb-chip, .hb-stc { height: 26px; font-size: 14px; padding: 0 9px; }
  /* 폰 글 바닥 14 — 폭이 소수점인 칩·이름표(inline 상자)는 렌더 크기가 13.9 로 재져서(film-lite 작은 글) 14.5 로 */
  .hb-chip, .hb-stc, .hb-hop { font-size: 14.5px; }
  .hb-hop { height: 24px; font-size: 14px; padding: 0 7px; }
  .hb-wh { height: 52px; padding: 0 14px; gap: 10px; }
  .hb-wh .hb-ad { display: none; }
  .hb-st { gap: 12px; font-size: 14px; }
  .hb-st li { padding: 17px 0 15px; }
  .hb-lnk, .hb-go { min-height: 48px; font-size: 15px; }

  /* B1(11-04 무대) — 초점 줄 = 주소 한 줄 크게(폭에 맞춰 22~26px) + 둘째 줄 종류·찾은 곳·상태 칩 · 나머지 줄은 위 1100 이하 블록(두 줄 행) */
  .hb1-top { padding-bottom: 32px; }
  .hb1-meta { min-height: 36px; padding-bottom: 10px; font-size: 14px; }
  .hb1-meta .hb-nm { font-size: 14.5px; }
  .hb1-meta .hb-ex { margin-left: auto; }
  .hb1-form { grid-template-columns: 1fr; gap: 12px; padding: 18px 0 16px; }
  .hb1-field textarea { min-height: 30px; height: 30px; font-size: 20px; line-height: 30px; }
  .hb1-typed { height: 30px; line-height: 30px; font-size: 20px; }
  .hb1-field small { font-size: 14px; }
  .hb1-btns { flex-direction: column; align-items: stretch; gap: 8px; }
  .hb1-go, .hb1-after { width: 100%; min-height: 48px; }
  .hb1-off { grid-template-columns: 1fr; gap: 16px; padding: 30px 0 0; }
  .hb1-off-t { font-size: 21px; line-height: 1.42; }
  .hb1-r.t3 { opacity: .72; }
  .hb1-off .hb-btn { width: 100%; min-height: 50px; }
  .hb1-r > .ad { font-size: 16px; }
  .hb1-r > .ty, .hb1-r > .sf { font-size: 14px; }
  .hb1-r.is-f { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 14px; padding: 28px 0 18px; }
  .hb1-r.is-f > .ad { grid-area: 1 / 1 / 2 / 4; font-size: clamp(23px, 6.9vw, 28px); line-height: 34px; letter-spacing: -.025em; }
  .hb1-r.is-f > .ty { grid-area: 2 / 1; font-size: 15px; }
  .hb1-r.is-f > .sf { grid-area: 2 / 2; font-size: 15px; }
  .hb1-r.is-f > .st { grid-area: 2 / 3; }
  .hb1-r.is-f > .hp, .hb1-r.is-f > .nx { display: none; }
  .hb1-r.is-f .st .hb-stc { height: 36px; padding: 0 13px; font-size: 15px; }
  .hb1-strip dl { gap: 12px 28px; padding: 4px 0 18px; }
  .hb1-strip .k3 { flex-basis: 100%; }
  .hb1-strip dt { font-size: 14px; } .hb1-strip dd { font-size: 14.5px; }
  .hb-chain { gap: 6px 10px; font-size: 14px; }
  .hb-chain i + i::before, .hb-chain b + i::before { width: 10px; margin-right: 10px; }
  .hb1-fly { top: 28px; height: 34px; }
  .hb1-fly > span { font-size: clamp(23px, 6.9vw, 28px); line-height: 34px; letter-spacing: -.025em; }
  .hb1-foot { padding-top: 14px; }
  .hb1-limit { font-size: 14px; }
  /* 실측 줄(폰): 도장은 상태 칸으로(board-live stampHost · 768 미만) — 찾은 곳 칸 숨김 */
  .hb1-r.is-live { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hb1-r.is-live > .ad { grid-area: 1 / 1 / 2 / 3; }
  .hb1-r.is-live > .ty { grid-area: 2 / 1 / 3 / 3; }
  .hb1-r.is-live > .hp { grid-area: 3 / 1 / 4 / -1; }
  .hb1-r.is-live > .sf { display: none; }
  .hb1-stamp { width: 52px; height: 52px; }
  .hb1-stamp svg { width: 52px; height: 52px; }
  .hb1-lmsg { grid-template-columns: 1fr; }
  .hb1-lmsg .hb-btn { width: 100%; }
  .hb1-div { font-size: 14px; min-height: 36px; }

  /* B2 — 폰 순서: 제목 → 상황 알약 7 → 결과서 → 허브 링크 → 상담 이유·단추 (본문 B2-P 는 폰에서 접음 · 결과서가 같은 말을 보여 줌) */
  .hb2-l { display: contents; }
  .hb2-l > .hb-eb { order: 1; } .hb2-l > .hb-h { order: 2; } .hb2-l > .hb2-list { order: 3; }
  .hb2-g > .hb2-stage { order: 4; } .hb2-l > .hb2-hub { order: 5; } .hb2-g > .hb2-band { order: 6; }
  .hb2-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; border-top: 0; }
  .hb2-it { border: 0; }
  .hb2-nm { min-height: 44px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--c-ink); background: var(--c-paper); }
  .hb2-it.is-sel .hb2-nm { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); font-weight: 650; }
  .hb2-more { display: none; }
  .hb2-hub { margin-top: 10px; }
  .hb2-stage { margin: 20px calc(-1 * var(--g)) 0 0; max-height: 600px; }
  .hb2-peek { display: none; }
  .hb2-win { width: 100%; border-radius: 16px 0 0 16px; }
  .hb2-win .hb-wh { padding-right: 14px; }
  .hb2-pg { padding: 0 16px; gap: 16px; font-size: 14px; }
  .hb2-doc { padding: 16px 16px 18px; }
  .hb2-dt h3 { font-size: 20px; }
  .hb2-sit b { font-size: 16px; }
  .hb2-sit .hb2-adr, .hb2-sit .hb-sep, .hb2-sit .k + .hb2-adr { display: none; }
  .hb2-sit .k:nth-of-type(2) { display: none; }
  .hb2-ir { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; min-height: 58px; padding: 8px 0; font-size: 15px; }
  .hb2-ir > span:nth-child(1) { grid-column: 1; grid-row: 1; }
  .hb2-ir > span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 14px; }
  .hb2-ir > span:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .hb2-ih { display: none; }
  .hb2-gate { grid-template-columns: 1fr; }
  .hb2-gate > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 0; }
  .hb2-gate > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .hb2-gate h4 { font-size: 14.5px; }
  .hb2-gate p { margin-top: 0; font-size: 14.5px; }
  .hb2-route .k, .hb2-rec .k { min-width: 0; width: 100%; font-size: 14px; }
  .hb2-role { font-size: 14px; }
  .hb2-ft { font-size: 14px; }

  /* B3 — 밝은 판(11-04) · 창 = 폭 가득 */
  .hb3-band { margin-top: 22px; padding-top: 18px; }
  .hb3-tel { font-size: 14.5px; }
  .hb3-stage { margin-top: 22px; }
  .hb3-win .hb-wh { padding-right: 14px; }
  .hb3-rail { padding: 12px 16px 4px; }
  .hb3-cap { display: none; }
  .hb3-row[data-r="0"] .nt { display: none; }
  .hb3-row { grid-template-columns: 1fr; row-gap: 8px; padding: 12px 0; min-height: 0; }
  .hb3-row.is-dim { display: none; }
  .hb3-row .nm { font-size: 17px; }
  .hb3-row .nt { font-size: 14.5px; }
  .hb3-row > .hb-stc { justify-self: start; }
  .hb3-row[data-r="4"] .hb3-m4, .hb3-row[data-r="2"] .nt { display: none; }
  .hb3-slip { width: 100%; padding: 10px 12px; }
  .hb3-slip .k { display: none; }
  .hb3-slip .r { font-size: 15px; margin: 0; }
  .hb3-slip > .hb-stc { grid-row: 1; }
  .hb3-doc > div { font-size: 14px; }
  .hb3-doc > div:not(.lit), .hb3-doc > div.lit:first-child { display: none; }
  .hb3-reply p { padding-left: 0; font-size: 14.5px; }
  .hb3-log { display: none; }

  /* B4 */
  .hb4-board { margin-top: 24px; }
  .hb4-prom > li { grid-template-columns: 1fr; row-gap: 3px; min-height: 0; padding: 9px 0; }
  .hb4-prom h3 { font-size: 17px; } .hb4-prom p { font-size: 15px; }
  .hb4-prom > li > a { display: none; }
  .hb4-chips li { height: 28px; font-size: 14.5px; padding: 0 10px; }
  .hb4-faq { margin-top: 36px; }
  .hb4-fh { font-size: 19px; }
  .hb4-q > summary { font-size: 16px; min-height: 48px; }
  .hb4-a > p { font-size: 15px; padding-right: 20px; }

  /* B5 — 폰 순서(설계서 B5 폰): 제목 → 본문 → 단추 2 → 빈 요청서 창 → 약속 칩 3 → 대상 4 (왼쪽 기둥을 풀어 창을 단추 바로 아래로) */
  .hb5 { padding-bottom: 56px; }
  .hb5-l { display: contents; }
  .hb5-l > .hb-eb { order: 1; } .hb5-l > .hb-h { order: 2; } .hb5-l > .hb-lead { order: 3; }
  .hb5-l > .hb-acts { order: 5; } .hb5-l > .kk-st { order: 6; }
  .hb5-g > .hb5-stage { order: 7; }
  .hb5-l > .hb5-chips { order: 8; } .hb5-l > .who { order: 9; }
  .hb5-chips li { height: 30px; font-size: 14.5px; }
  .hb5 .who { margin-top: 24px; }
  .hb5 .who4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .hb5 .who4 a { min-height: 52px; padding: 6px 0; }
  .hb5 .who4 b { font-size: 15.5px; line-height: 1.35; }
  .hb5 .who4 span { display: none; } /* 폰: 이름만(설명은 데스크톱 · 길이 −150) */
  .hb5 .who4 i { grid-row: 1; }
  .hb5-not { font-size: 14.5px; }
  .hb5-stage { margin-top: 24px; }
  .hb5-tabs li { font-size: 14px; min-height: 44px; }
  .hb5-form .fill { padding: 18px 16px 20px; }
  .hb5-ft { font-size: 18px; }
  .hb5-form textarea { min-height: 88px; }
  .hb5-form .via-row { grid-template-columns: 1fr; }
  .hb5-form .seg span { font-size: 14.5px; }
  .hb5-form .hint, .hb5-form .fine, .hb5-form .r-cap { font-size: 14px; }
  .hb5-form .r-lock > div { grid-template-columns: 100px minmax(0, 1fr); font-size: 14.5px; }
  .hb5-form .sent { padding: 20px 16px 22px; }
}
@media (max-width: 379px) {
  .hb-h { font-size: 28px; }
  .hb-st { gap: 10px; }
}

/* B4 약속 줄(11-04 · 5줄): 삭제 결정 줄 = 설명 + 보장 고지(#jurisdiction) 한 칸 · 쓰지 않는 수단 = 칩(#principles) + 원칙 문장 */
.hb4-d .hb4-f4 { margin-top: 4px; font-size: 15px; color: var(--c-mute); }
.hb4-pr { margin-top: 8px; }
/* FAQ 폰 접기 단추(board-ui b4 · 폰에서만 보임) — FAQ 줄과 같은 괘선 한 줄 */
.hb4-fbtn { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px; padding: 0; border: 0; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-line);
  background: none; font: inherit; font-size: 16px; font-weight: 620; color: var(--c-ink); text-align: left; cursor: pointer; }
.hb4-fbtn i { font-size: 24px; font-weight: 300; color: var(--c-mute); }
.hb4-fbtn[hidden] { display: none; }

/* 넓은 화면(1181↑) B4 = 조건 줄(왼쪽) | 자주 묻는 질문(오른쪽) 두 칸 — 시계 아래 글 화면을 한 화면 안쪽으로(1,128 → 약 640) */
@media (min-width: 1181px) {
  .hb4 { padding-top: 88px; }
  .hb4-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; margin-top: 32px; }
  .hb4-prom > li { grid-template-columns: 136px minmax(0, 1fr) auto; column-gap: 20px; min-height: 60px; padding: 12px 0; }
  .hb4-prom h3 { font-size: 17px; }
  .hb4-faq { display: block; margin-top: 0; border-top: 1px solid var(--c-ink); }
  .hb4-faq > .hb4-fh { padding: 13px 0 12px; font-size: 17px; border-bottom: 1px solid var(--c-line); }
  .hb4-faq > .hb4-q:first-of-type { border-top: 0; }
  .hb4-q > summary { min-height: 52px; font-size: 16px; }
  .hb4-a > p { font-size: 15px; padding-right: 32px; }
  .hb4-faq > .hb4-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin-top: 6px; }
  .hb4-hubs { display: flex; gap: 0 20px; margin-top: 0; }
}

@media (max-width: 767px) {
  /* 폰 길이: 허브 안내 링크·FAQ 더 보기 링크는 DOM 그대로 두고 화면에서만 뺌(데스크톱 그대로) */
  .hb2-l > .hb2-hub { display: none; }
  .hb4-faq.is-fold > .hb4-more { display: none; }
  .hb4-chips { gap: 5px; }
  .hb4-chips li { height: 27px; padding: 0 9px; }
  .hb4-d .hb4-f4 { font-size: 14px; }
  .hb4-faq.is-fold > .hb4-q { display: none; }
  .hb4-faq.is-fold > .hb4-fh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .hb4-faq { margin-top: 22px; }
  .hb4 { padding-top: 36px; }
  .hb5 { padding-bottom: 32px; }
  .hb5 .who { margin-top: 18px; }
  .hb5-stage { margin-top: 18px; }
}

/* ═══ 무대 .hb-stage(11-04 · 지시서 §19 + §20 쪽 색 뒤집기 · 토큰 = css/stage.css) ═══════════════════════════════════════════
   #different(첫 줄) → nav.hb-prog → B1 → 장면 자리 4 → .hb-end(무대 끝 띠 = 밝은 판 복귀 · 주황 띠) 가 main 직속으로 이어 붙은 한 줄기(바깥 여백 0 · 위 여백 = --st-pad).
   구간 바탕 = 투명(쪽 색이 비침 · board-ui scheme() 이 html[data-scheme] 을 60% 선에서 뒤집음) · JS 꺼짐만 구간이 스스로 어두운 판(stage.css).
   무대 위 .hb 는 --c-* 를 무대 토큰으로 바꿔 끼움 — 위 B1·단추·칩 규칙이 두 쪽(밝음·어두움)에서 그대로 읽힘(먹 단추 = 글자색 알약 · 테두리 단추 = 글자색 1.5px). */
.hb.hb-stage {
  --c-cream: var(--st-bg); --c-paper: var(--st-bg); --c-sand: var(--st-bg2); --c-sand2: var(--st-bg2); --c-sand3: var(--st-bg2);
  --c-line: var(--st-line); --c-line2: var(--st-line); --c-rule: var(--st-rule);
  --c-mute: var(--st-dim); --c-dim: var(--st-dim); --c-sub: var(--st-sub); --c-ink: var(--st-ink); --c-ink2: var(--st-sub); --c-grey: var(--st-dim);
  --c-or: var(--st-accent); --c-ort: var(--st-accent); --c-orb: transparent; --c-orl: var(--st-accent); --c-ok: var(--st-ok); --c-okb: transparent; --c-okl: var(--st-ok);
  --sh-win: none; --sh-sat: none;
  padding-top: var(--st-pad); color: var(--st-ink);
}
.hb-stage .hb-eb { margin-bottom: 18px; font-size: var(--st-eb); color: var(--st-accent); }
.hb-stage .hb-h { font-size: var(--st-h); line-height: 1.1; letter-spacing: -.028em; font-weight: 720; color: var(--st-ink); }
.hb-stage .hb-lead { margin-top: 18px; font-size: var(--st-lead); line-height: 1.6; color: var(--st-dim); }

/* 첫 줄 섹션 #different — 사장님 문장 한 줄(1181↑ 한 줄 · 폰 두 줄 · 그 밖 설명 0) · 아래 = 진행 줄(같은 화면의 진행 4단계 한 줄)
   밝은 쪽에서 먹 글자로 들어와 윗변이 60% 선을 넘는 순간 쪽 전체가 숯색으로(0.5초) — 이 문장이 뒤집기의 문턱 */
.hb.hb-dif { padding: 200px 0 64px; }
.hb-dif-t { margin: 0; font-size: clamp(36px, 6.6vw, 100px); line-height: 1.12; font-weight: 720; letter-spacing: -.035em; color: var(--st-ink); text-wrap: balance; }
main > section.hb-dif:not(.cv-open) { contain-intrinsic-block-size: auto 345px; }
main > section.hb1.hb-stage:not(.cv-open) { contain-intrinsic-block-size: auto 1040px; }

/* 첫 화면(꽃 · 바이트 그대로)은 쪽이 숯색으로 뒤집혀도 크림 그대로 — 아래 모서리만 둥근 한 장(40 · 폰 24)이라 숯색 위로 종이 한 장이 올라가는 모양(밝은 쪽에서는 크림 위 크림 = 안 보임) */
html.fxjs .s0 { background: var(--page, #fdfbf7); border-radius: 0 0 40px 40px; }

/* 장면 자리 4 — 위 여백 --st-pad(장면 사이 간격) · 폭 = 무대 전폭(조각이 글 기둥 var(--st-col) 을 씀) · 빈 동안 임시 높이 --slot-h(조각이 들어오면 :empty 가 풀려 저절로 0) */
main > section.hb-gfx.hb-stage { position: relative; padding: var(--st-pad) 0 0; }
.hb-gfx-sweep { --slot-h: 760px; } .hb-gfx-bits { --slot-h: 820px; } .hb-gfx-route { --slot-h: 760px; } .hb-gfx-dial { --slot-h: 980px; }
main > section.hb-gfx.hb-stage:empty { min-height: calc(var(--st-pad) + var(--slot-h)); }
main > section.hb-gfx-sweep:not(.cv-open) { contain-intrinsic-block-size: auto 1245px; }   /* 11-04 리드: 장면 담당 실측 1440 */
main > section.hb-gfx-bits:not(.cv-open) { contain-intrinsic-block-size: auto 1018px; }
main > section.hb-gfx-route:not(.cv-open) { contain-intrinsic-block-size: auto 886px; }
main > section.hb-gfx-dial:not(.cv-open) { contain-intrinsic-block-size: auto 900px; }
.hb-stage.hb-anchor { background: none; }
/* 단계 사이 점선 머리카락 선(§20 ④ · antimetal border dashed 1px 선 색 그대로) — 장면 사이 간격 한가운데 · 글 기둥 폭 · 무대 끝 띠 위에도 하나 */
main > section.hb-gfx.hb-stage::before, .hb.hb-end::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--st-pad) / 2); width: var(--st-col); margin: 0 auto;
  border-top: 1px dashed var(--st-line); pointer-events: none; }

/* 무대 끝 띠 = 밝은 판 복귀(§20 ④) — #gfx-dial 아랫변이 60% 선을 넘으면 쪽이 크림으로 돌아오고, 이 띠 아래쪽에 주황 계열 그러데이션 띠가 한 번(쪽 전체에 하나).
   띠 = 브랜드 주황만 투명도로(밝은 쪽 = 복숭아 · 어두운 쪽 = 구리) · 위·아래 끝은 투명이라 B2 크림과 이음매 0 · 상담 입구 한 줄이 띠 위에 앉음. */
.hb.hb-end { padding: var(--st-pad) 0 calc(var(--st-pad) + 24px); isolation: isolate; }
.hb.hb-end::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(100% - var(--st-pad) / 2 - 1px); pointer-events: none;
  background:
    radial-gradient(160% 120% at 38% 64%, color-mix(in srgb, var(--st-accent) 9%, transparent), transparent 60%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--st-accent) 8%, transparent) 22%, color-mix(in srgb, var(--st-accent) 19%, transparent) 52%,
      color-mix(in srgb, var(--st-accent) 12%, transparent) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 70%, transparent 100%); }
.hb-end-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 48px; }
.hb-end .hb-why { flex: 1 1 20em; max-width: 26em; font-size: 30px; font-weight: 660; line-height: 1.38; letter-spacing: -.022em; color: var(--st-ink); text-wrap: balance; }
.hb-end .hb-acts { margin-top: 0; }
.hb-end .hb-btn { min-height: 56px; padding: 0 26px; font-size: 16px; }
.hb-end .hb-kst { flex-basis: 100%; }

/* 머리줄·독도 쪽 색을 따라 뒤집힘(§20 ⑤) — 어두운 쪽 = 머리줄 섬 통째로 framex 먹 사본(.hdx-ink · --hdx-ink 판 · --hdx-on 글) · 독 = 크림 사본(.dockx-inv) · 새 색 0.
   framex 가 가장자리 화소 줄로 오리는 clip 대신 통째로 · 판(.is-open 오른쪽 섬)·폰 시트(.is-sheet)가 열리면 framex 규칙대로 크림.
   움직임 허락(html.anim.hb-sch) = 사본을 늘 깔아 두고 투명도만 0.5초(바탕과 같은 박자) · 모션 줄이기·?still=1 = 바로. */
html[data-scheme="dark"] .hdx:not(.is-sheet) .hdx-l .hdx-ink, html[data-scheme="dark"] .hdx:not(.is-open):not(.is-sheet) .hdx-r .hdx-ink, html[data-scheme="dark"] .dockx-inv { visibility: visible !important; clip-path: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html.anim.hb-sch .hdx:not(.is-sheet) .hdx-l .hdx-ink, html.anim.hb-sch .hdx:not(.is-open):not(.is-sheet) .hdx-r .hdx-ink, html.anim.hb-sch .dockx-inv {
    visibility: visible !important; clip-path: none !important; opacity: 0; transition: opacity .5s var(--st-ease); }
  html.anim.hb-sch[data-scheme="dark"] .hdx:not(.is-sheet) .hdx-l .hdx-ink, html.anim.hb-sch[data-scheme="dark"] .hdx:not(.is-open):not(.is-sheet) .hdx-r .hdx-ink, html.anim.hb-sch[data-scheme="dark"] .dockx-inv { opacity: 1; }
  /* 진행 줄 = 자기 움직임(붙기·숨기) + 토큰 0.5초를 한 목록으로(바탕·선 색 따로 전환 0 — 토큰이 섞음) */
  html.anim.hb-sch.hb-prog-on .hb-prog { transition: transform var(--t-fast, .2s) var(--ease-ui, cubic-bezier(.22, 1, .36, 1)), opacity .2s, visibility 0s, var(--st-tr); }
  html.anim.hb-sch.hb-prog-on .hb-prog.is-out { transition: transform .2s, opacity .2s, visibility 0s .2s, var(--st-tr); }
  html.anim.hb-sch .hb-prog::before { transition: opacity .15s linear; }
}

@media (max-width: 1180px) {
  .hb.hb-dif { padding: 160px 0 56px; }
  .hb-end .hb-why { font-size: 26px; }
}
@media (max-width: 767px) {
  .hb-stage .hb-eb { margin-bottom: 10px; }
  .hb-stage .hb-lead { margin-top: 12px; }
  .hb.hb-dif { padding: 88px 0 36px; }
  .hb-dif-t { font-size: clamp(28px, 10.1vw, 42px); line-height: 1.24; letter-spacing: -.035em; }
  html.fxjs .s0 { border-radius: 0 0 24px 24px; }
  main > section.hb-dif:not(.cv-open) { contain-intrinsic-block-size: auto 210px; }
  main > section.hb1.hb-stage:not(.cv-open) { contain-intrinsic-block-size: auto 860px; }
  .hb-gfx-sweep { --slot-h: 640px; } .hb-gfx-bits { --slot-h: 700px; } .hb-gfx-route { --slot-h: 640px; } .hb-gfx-dial { --slot-h: 820px; }
  main > section.hb-gfx-sweep:not(.cv-open) { contain-intrinsic-block-size: auto 914px; }   /* 폰 390 실측 */
  main > section.hb-gfx-route:not(.cv-open) { contain-intrinsic-block-size: auto 772px; }
  main > section.hb-gfx-bits:not(.cv-open) { contain-intrinsic-block-size: auto 915px; }
  main > section.hb-gfx-dial:not(.cv-open) { contain-intrinsic-block-size: auto 820px; }
  .hb.hb-end { padding: var(--st-pad) 0 calc(var(--st-pad) + 48px); }
  .hb-end-in { display: block; }
  .hb-end .hb-why { font-size: 22px; line-height: 1.42; }
  .hb-end .hb-acts { margin-top: 20px; }
  .hb-end .hb-btn { min-height: 52px; }
}