/* am-light.css — 담당 3(11-04 지시서 §23 "그냥 똑같이 카피 — 내용만 다르게"): 밝은 구간 B2·B3·B4 · 마지막 CTA B5 · 머리줄 스크롤 뒤 유리 겹.
   (마무리 끝 띠 .s7x-bar · 바닥 .ft7 = css/s7x.css · 바닥 기본 = css/frame.css)
   값 = antimetal 실측 정본 stage1104/ref-am/REF_ANTIMETAL.md(§1 토큰 · §3 글 · 4-3 밝은 구간 창 · 4-5 순찰 카드 · §5 (다)(라)(사)(차) · §6 단추 · §7 머리줄 · §8 복숭아 띠).
   antimetal 의 글·로고·그림·셰이더·코드 파일 0 — 겉 결 숫자만. 흐린 결 바탕·알갱이 = 우리가 새로 그린 CSS 그러데이션 · SVG 잡음(파일 0).
   글자 = 산스 --font 그대로 · 제목만 세리프(--al-serif · Hahmlet 은 쪽 머리에서 불러옴 · 없으면 설치 세리프).
   색 뒤집기(§21): html[data-scheme="dark"] · body[data-theme="dark"] 둘 다 받음 → 내 구간 글 토큰(--al-*)이 0.5초 ease 로 같이 뒤집힘(밝은 구간이 어두운 쪽에 걸려도 글 묻힘 0).
   제품 판(B2 목록·결과서 · B3 창 안 흰 판)은 그쪽처럼 늘 밝은 판 · 상담 폼 판(B5)은 늘 어두운 판(색 고정). JS 꺼짐 = 뒤집기 없음(B5 만 스스로 어두운 판 — stage.css). */

/* ── 뿌리 토큰(§1 그대로 · 흐린 글 = 글 60% + 종이 40% · 선 12% · 진한 선 24%) — 등록(@property)·전환 0: 뒤집기 순간 한 번만 바뀜(쪽 바탕은 body 가 0.5초 · 폰 CPU 4배 긴 작업 0 — 전환을 걸면 내 구간 1,200개 요소가 0.5초 동안 프레임마다 다시 계산돼 35~58ms 작업이 생겼음) ── */
.hb.hb2, .hb.hb3, .hb.hb4, .hb.hb5, .hb.hb-duo, .hb.hb-ar, .s7x, .ft {
  --al-ink: #1a1614; --al-muted: #696663; --al-line: #dbdbd6; --al-strong: #c0c0bc; --al-paper: #f5f6f1; --al-soft: rgba(26, 22, 20, .05); --al-soft2: rgba(26, 22, 20, .1);
  --al-or: #ff5e1f; --al-ort: #c2410c;                                        /* 우리 브랜드 주황(이름표·강조만) */
  --al-ui: #353b37; --al-ui2: #5b6466; --al-ui3: #8d9688; --al-uiline: rgba(41, 57, 43, .08);   /* 제품 판 안 글·선(그쪽 순찰 판 실측) */
  --al-serif: var(--am-serif, 'Hahmlet', 'AppleMyungjo', 'Nanum Myeongjo', 'Noto Serif KR', serif);
  --al-ease: cubic-bezier(.22, 1, .36, 1); --al-ui-t: .15s cubic-bezier(.4, 0, .2, 1);
  --al-g: clamp(12px, 5vw - 8px, 40px);                                       /* --gutter 40 / 12 */
  --al-py: 80px; --al-gap: 48px;                                              /* 섹션 위아래 · 제목→내용 */
  --al-3xl: clamp(1.6875rem, 1.41rem + 1.184vw, 2.475rem);                    /* 39.6 / 27.18 */
  --al-2xl: clamp(1.35rem, 1.192rem + .676vw, 1.8rem);                        /* 28.8 / 21.71 */
  --al-xl: clamp(1.25rem, 1.162rem + .376vw, 1.5rem);                         /* 24 / 20.06 */
  --al-lg: clamp(1.125rem, 1.081rem + .188vw, 1.25rem);                       /* 20 / 18.03 */
  --al-base: clamp(1rem, .956rem + .188vw, 1.125rem);                         /* 18 / 16.03 */
  --al-sm: clamp(.875rem, .853rem + .094vw, .9375rem);                        /* 15 / 14.01 */
  --al-xs: clamp(.75rem, .728rem + .094vw, .8125rem);                         /* 13 / 12.01 */
}
/* 화면에서 한 화면 넘게 떨어진 구간(.al-far · js/am-light.js ④)은 어두운 토큰을 안 받음 → 첫 뒤집기(#different) 때 내 구간 속 1,200개 다시 계산 0 · JS 꺼짐 = .al-far 없음 = 그대로 */
:is(html[data-scheme="dark"], body[data-theme="dark"]) :is(.hb.hb2, .hb.hb3, .hb.hb4, .hb.hb5, .hb.hb-duo, .hb.hb-ar, .s7x, .ft):not(.al-far), html:not(.fxjs) .hb.hb5 {
  --al-ink: #fafbf7; --al-muted: #989693; --al-line: #35312f; --al-strong: #504d4a; --al-paper: #1a1614; --al-soft: rgba(250, 251, 247, .05); --al-soft2: rgba(250, 251, 247, .1);
}
@media (max-width: 1023px) { .hb.hb2, .hb.hb3, .hb.hb4, .hb.hb5, .hb.hb-duo, .hb.hb-ar, .s7x, .ft { --al-py: 64px; } }
@media (max-width: 767px) { .hb.hb2, .hb.hb3, .hb.hb4, .hb.hb5, .hb.hb-duo, .hb.hb-ar, .s7x, .ft { --al-py: 48px; --al-gap: 40px; } }

/* ── 공통: 구간 틀 · 세리프 제목 · 이름표 숨김(그쪽 밝은 구간엔 이름표 0) ── */
.hb.hb2, .hb.hb3, .hb.hb4 { padding: var(--al-py) 0; color: var(--al-ink); }
:is(.hb2, .hb3, .hb4, .hb5) .hb-wrap { width: min(100% - 2 * var(--al-g), 1080px); }
:is(.hb2, .hb3, .hb4, .hb5) .hb-eb { display: none; }
.hb:is(.hb2, .hb3, .hb4, .hb5) .hb-h { font-family: var(--al-serif); font-size: var(--al-3xl); line-height: 1.15; letter-spacing: -.015em; font-weight: 400; color: var(--al-ink); text-wrap: balance; font-synthesis: none; }
:is(.hb2, .hb3, .hb4, .hb5) :focus-visible { outline: 2px solid var(--al-or); outline-offset: 2px; }
/* 글 링크 + 화살표(§6: 18 w500 흐린 글 · 밑줄 글 25% · 띄움 4 · 화살표 칸 6 → hover 글자색 · 밑줄 100% · 화살표 오른쪽 2px) */
.hb .hb2-hub, .hb .hb2-sub { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--al-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); transition: color var(--al-ui-t), text-decoration-color var(--al-ui-t); }
.hb .hb2-hub { text-decoration-color: color-mix(in srgb, var(--al-ink) 25%, transparent); }   /* §24: 밑줄 = 글 25%(흐린 글의 25% 아님) */
.hb .hb2-hub:hover, .hb .hb2-sub:hover { color: var(--al-ink); text-decoration-color: currentColor; }
.hb2-ar { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--al-ui-t); }
.hb :is(.hb2-hub, .hb2-sub):hover .hb2-ar { transform: translateX(2px); }

/* ═══ B2 상황별 1차 검토 결과서 = 순찰 섹션 판박이(§5 (라) · 4-5 · §8) ═══════════════════════════════════════════════
   1440: 12칸 틈 16 — 제목 6칸(532) · 글 7번째부터 5칸(441: 본문 + 24 + 글 링크) → 48 → 목록 445 | 판 623(틈 12 · 줄 틈 6) · 섹션 아래 복숭아 띠(::before 위 −128 아래 −96) */
.hb.hb2 { isolation: isolate; }
.hb.hb2 .hb2-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 16px; row-gap: 0; align-items: start; }
.hb.hb2 .hb2-l { grid-area: 1 / 1 / 2 / 7; }
.hb.hb2 .hb2-r { grid-area: 1 / 7 / 2 / 12; }
.hb.hb2 .hb2-p { font-size: var(--al-base); line-height: 1.55; color: var(--al-ink); text-wrap: pretty; max-width: none; }
.hb.hb2 .hb2-hub { margin-top: 24px; font-size: var(--al-base); line-height: 1.55; }
.hb.hb2 .hb2-lib { grid-area: 2 / 1 / 3 / -1; margin-top: var(--al-gap); display: grid; grid-template-columns: minmax(0, 445fr) minmax(0, 623fr); column-gap: 12px; align-items: start; }
.hb.hb2 .hb2-band { display: none; }
/* 목록 줄(4-5): 445×57 · 고른 줄 ×70 · 둥글기 10 · 1px 흰 · 흐림 14 · [28 기호 | 이름 | 둘째 글] · 그림자 = 따뜻한 갈색 #744123 */
.hb.hb2 .hb2-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.hb.hb2 .hb2-it { position: relative; display: grid; grid-template-columns: 28px auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 57px; padding: 10px 14px; box-sizing: border-box;
  border: 1px solid #fff; border-radius: 10px; background: rgba(250, 251, 249, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 3px rgba(116, 65, 35, .1); color: var(--al-ui2); cursor: pointer; transition: background-color .35s, box-shadow .35s, color .35s; }
.hb.hb2 .hb2-it:hover { background: rgba(255, 255, 255, .88); }
.hb.hb2 .hb2-it.is-sel { min-height: 70px; grid-template-rows: auto auto; background: #fff; box-shadow: 0 12px 26px -14px rgba(116, 65, 35, .3), 0 1px 3px rgba(116, 65, 35, .1); }
.hb2-gl { grid-area: 1 / 1; width: 28px; height: 28px; margin-right: 0; border-radius: 50%; background: var(--gb); box-shadow: inset 0 0 0 1px rgba(26, 22, 20, .06); filter: saturate(.55) opacity(.8); transition: filter .35s; }
.hb2-it.is-sel .hb2-gl { filter: none; }
.hb.hb2 .hb2-h { grid-area: 1 / 2; min-width: 0; font: inherit; }
.hb.hb2 .hb2-nm { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 500; line-height: 20.3px; letter-spacing: 0; color: var(--al-ui); white-space: nowrap; }
.hb.hb2 .hb2-nm::after { content: ""; position: absolute; inset: -1px; border-radius: 10px; }   /* 줄 전체 = 누름 자리(링크 하나) */
.hb.hb2 .hb2-nm:focus-visible { outline: none; }
.hb.hb2 .hb2-it:has(.hb2-nm:focus-visible) { outline: 2px solid var(--al-or); outline-offset: 2px; }
.hb.hb2 .hb2-it.is-sel .hb2-nm { color: var(--al-ui); font-weight: 500; background: none; border: 0; }
.hb2-sb { grid-area: 1 / 3; min-width: 0; margin-left: -4px; font-size: 12px; font-weight: 500; line-height: 17.4px; color: var(--al-ui2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb2-mt { grid-area: 2 / 1 / 3 / -1; display: none; position: relative; height: 13px; }
.hb2-it.is-sel .hb2-mt { display: block; }
.hb2-mt::before, .hb2-mt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; }
.hb2-mt::before { background: rgba(53, 59, 55, .12); }
.hb2-mt::after { background: var(--al-or); transform-origin: 0 50%; }
@keyframes hb2-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hb2.is-auto .hb2-it.is-sel .hb2-mt::after { animation: hb2-meter 6s linear both; animation-play-state: paused; }
.hb2.is-auto.is-run .hb2-it.is-sel .hb2-mt::after { animation-play-state: running; }
/* 상황 기호 7(28 원 · 우리 팔레트만 · 무늬로 구분) */
.hb2-it[data-i="0"] { --gb: repeating-linear-gradient(90deg, #ff5e1f 0 3.2px, #ffd8c6 3.2px 5.6px); }
.hb2-it[data-i="1"] { --gb: conic-gradient(#c25a2f 0 25%, #f3d7c4 0 50%, #c25a2f 0 75%, #f3d7c4 0); }
.hb2-it[data-i="2"] { --gb: repeating-linear-gradient(45deg, #d9a066 0 3px, #f6e6d2 3px 6px); }
.hb2-it[data-i="3"] { --gb: linear-gradient(90deg, #b8400e 50%, #f1d2c2 50%); }
.hb2-it[data-i="4"] { --gb: repeating-linear-gradient(0deg, #736d66 0 3px, #e4e0da 3px 6px); }
.hb2-it[data-i="5"] { --gb: conic-gradient(from 30deg, #1f7a4d 0 33%, #cfe3d6 0 66%, #8fbfa3 0); }
.hb2-it[data-i="6"] { --gb: repeating-radial-gradient(circle, #c2410c 0 2.4px, #f6d9ca 2.4px 4.8px); }
/* 결과서 판(4-5 오른쪽 상세 판): 623 · 둥글기 10 · 1px 흰 · rgba(250,251,249,.82) · 흐림 14 · 머리줄 42(#f1f3f0 · 아래 1px 8%) */
.hb.hb2 .hb2-stage { position: relative; min-width: 0; height: auto; max-height: none; margin: 0; overflow: visible; }
.hb.hb2 .hb2-win { display: flex; flex-direction: column; width: auto; min-height: 448px; border: 1px solid #fff; border-radius: 10px; background: rgba(250, 251, 249, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -14px rgba(116, 65, 35, .32), 0 1px 3px rgba(116, 65, 35, .1); color: var(--al-ui); overflow: clip; }
.hb.hb2 .hb2-win .hb-wh { flex: none; height: 42px; gap: 8px; padding: 0 14px; background: #f1f3f0; border-bottom: 1px solid var(--al-uiline); }
.hb.hb2 .hb2-win .hb-mk { width: 18px; height: 18px; }
.hb.hb2 .hb2-win .hb-nm { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--al-ui); }
.hb.hb2 .hb2-win .hb-wh .hb-ad { padding-left: 0; border-left: 0; font-size: 12.5px; font-weight: 500; color: var(--al-ui2); }
.hb.hb2 .hb2-win .hb-ex { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: auto; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 400; color: var(--al-ui3); }
.hb.hb2 .hb2-win .hb-ex::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hb.hb2 .hb2-doc { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
.hb.hb2 .hb2-sit { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 14px; line-height: 20.3px; color: var(--al-ui); }
.hb.hb2 .hb2-dt { font-size: 14px; font-weight: 500; line-height: 20.3px; letter-spacing: 0; color: var(--al-ui); }
.hb.hb2 .hb2-sit .hb-sep { height: 12px; background: var(--al-uiline); }
.hb.hb2 .hb2-sit .k { font-size: 12.5px; font-weight: 500; color: var(--al-ui3); }
.hb.hb2 .hb2-sitn { font-size: 14px; font-weight: 500; color: var(--al-ui); }
/* 확인 항목 = 그쪽 지표 줄 + 점 격자 결(점 6px 격자 · 점 반지름 1 · 글 8%) */
.hb.hb2 .hb2-body { display: flex; flex-direction: column; gap: 12px; }
.hb.hb2 .hb2-items { margin: 0; border-top: 0; padding: 2px 10px 4px; border-radius: 8px; background: radial-gradient(circle, rgba(53, 59, 55, .1) 1px, transparent 1.5px) 0 0 / 7px 7px; }
.hb.hb2 .hb2-ir { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 33px; padding: 0; border-bottom: 1px solid var(--al-uiline); font-size: 14px; line-height: 20.3px; }
.hb.hb2 .hb2-ir:last-child { border-bottom: 0; }
.hb.hb2 .hb2-ir > span:first-child { font-weight: 500; color: var(--al-ui); }
.hb.hb2 .hb2-ir > span:nth-child(2) { font-size: 12.5px; font-weight: 500; color: var(--al-ui2); }
.hb.hb2 .hb2-ih { min-height: 26px; font-size: 12px; }
.hb.hb2 .hb2-ih > span { font-size: 12px !important; font-weight: 500 !important; color: var(--al-ui3) !important; }
.hb.hb2 .hb2-ih > span:last-child { text-align: right; }
.hb.hb2 .hb2-win .hb-stc { height: 22px; padding: 0 8px; font-size: 12px; font-weight: 500; }
/* 요청 경로 카드(그쪽 결과 카드: 흰 70% · 1px 흰 · 둥글기 8 · 안쪽 10/14 · 꼬리표 → 제목 14 w500 → 글 12 → 위 1px 8% 강조 줄) */
.hb.hb2 .hb2-out { padding: 9px 14px; border: 1px solid #fff; border-radius: 8px; background: rgba(255, 255, 255, .7); box-shadow: 0 1px 3px rgba(116, 65, 35, .1); }
.hb.hb2 .hb2-route { display: block; margin: 0; font-size: 14px; color: var(--al-ui); }
.hb.hb2 .hb2-route .k { display: block; min-width: 0; width: auto; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: var(--al-ort); }
.hb.hb2 .hb2-ribs { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 18.9px; letter-spacing: -.01em; color: var(--al-ui); }
.hb.hb2 .hb2-ribs .hb-rib { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; color: inherit; white-space: normal; }
.hb.hb2 .hb2-ribs .hb-rib + .hb-rib::before { content: " · "; color: var(--al-ui3); }
.hb.hb2 .hb2-gate { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; border: 0; }
.hb.hb2 .hb2-gate > div { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding: 0; border: 0; }
.hb.hb2 .hb2-gate h4 { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; line-height: 17.4px; color: var(--al-ui3); white-space: nowrap; }
.hb.hb2 .hb2-gate .sq { width: 7px; height: 7px; border-radius: 1.5px; background: var(--al-ui); }
.hb.hb2 .hb2-gate .sq.o { background: var(--al-or); }
.hb.hb2 .hb2-gate .sq.e { background: transparent; box-shadow: inset 0 0 0 1.2px var(--al-ui3); }
.hb.hb2 .hb2-gate p, .hb.hb2 .hb2-gate .is-dim p { margin: 0; font-size: 12px; font-weight: 400; line-height: 17.4px; color: var(--al-ui2); }
.hb.hb2 .hb2-rec { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--al-uiline); font-size: 12px; font-weight: 500; line-height: 17.4px; color: #b4531f; }
.hb.hb2 .hb2-rec .k { min-width: 0; width: auto; font-size: inherit; color: inherit; }
.hb.hb2 .hb2-facts { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 2px; }
.hb.hb2 .hb2-role { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 12px; line-height: 16.8px; color: var(--al-ui2); }
.hb.hb2 .hb2-role span { font-weight: 500; color: var(--al-ui3); }
.hb.hb2 .hb2-role b { font-weight: 400; color: var(--al-ui2); }
.hb.hb2 .hb2-role .hb-sep { height: 10px; margin: 0 4px; background: var(--al-uiline); }
.hb.hb2 .hb2-sub { font-size: 12.5px; line-height: 16.8px; color: var(--al-ui2); }
.hb.hb2 .hb2-sub:hover { color: var(--al-ui); }
.hb.hb2 .hb2-ft { margin: -4px 0 0; font-size: 12px; line-height: 1.45; color: var(--al-ui3); }
.hb.hb2 .hb2-ft a { color: var(--al-ui2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
/* 복숭아·주황 띠(§8 값 그대로 · 알갱이 = 우리 SVG 잡음 · 움직임 = transform 왕복 64px 20s · 화면에 있을 때만) — 어두운 쪽에 걸리면 0.5초에 걸쳐 사라짐 */
.hb.hb2::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -128px; bottom: -96px; pointer-events: none;
  background-color: #f6ecdf;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(174deg, #faf6ef 0%, #f6ebde 29%, #ebbd90 46%, #d98a52 60%, #d5a792 74%, #e5c4b5 85%, #f1e2cf 96%, #f6ecdf 100%);
  background-size: 160px 160px, 100% calc(100% + 96px); background-position: 0 0, 50% -2.96px; background-repeat: repeat, no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .03) 5%, rgba(0, 0, 0, .15) 11%, rgba(0, 0, 0, .44) 20%, rgba(0, 0, 0, .78) 30%, #000 42%, #000 calc(100% - 176px), rgba(0, 0, 0, .65) calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 60px), rgba(0, 0, 0, .08) calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .03) 5%, rgba(0, 0, 0, .15) 11%, rgba(0, 0, 0, .44) 20%, rgba(0, 0, 0, .78) 30%, #000 42%, #000 calc(100% - 176px), rgba(0, 0, 0, .65) calc(100% - 96px), rgba(0, 0, 0, .35) calc(100% - 60px), rgba(0, 0, 0, .08) calc(100% - 24px), transparent 100%);
  filter: saturate(.84); transition: opacity .5s ease;
}
:is(html[data-scheme="dark"], body[data-theme="dark"]) .hb.hb2::before { opacity: 0; }
@keyframes hb2-band { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -64px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  html.anim .hb.hb2.is-band::before { animation: hb2-band 20s ease-in-out infinite alternate; will-change: transform; }
}

/* ═══ B3 요청서 → 회신 = 밝은 구간 2칸 카드 판박이(§5 (다) · 4-3) ═══════════════════════════════════════════════
   제목(최대 672) → 48 → 534 | 534(틈 12 · 줄 48) · 카드 = 창 512(폰 464) → 20 → 카드 제목 20/1.5 w500 · 8 · 본문 18 흐린 글 최대 448 · 좌우 4 */
.hb.hb3 .hb3-g { display: flex; flex-direction: column; gap: var(--al-gap); }
.hb.hb3 .hb3-l { position: static; }   /* board.css 넓은 화면 따라옴(sticky) 끔 — 제목이 카드 위로 겹침 0 */
.hb.hb3 .hb3-l .hb-h { max-width: 672px; }
.hb3-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 48px; }
.hb3-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hb3-say { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.hb.hb3 .hb3-say h3 { font-size: var(--al-lg); line-height: 1.5; font-weight: 500; letter-spacing: 0; color: var(--al-ink); text-wrap: balance; }
.hb.hb3 .hb3-say p { max-width: 448px; font-size: var(--al-base); line-height: 1.55; color: var(--al-muted); text-wrap: pretty; }
/* 창(4-3): 둥글기 8 · 안쪽 1px 흰 20% · 흐린 결 바탕(그쪽 대체 그러데이션 값 110deg + 우리 흐린 얼룩 둘 · 천천히 떠다님) + 알갱이 · 창 안 여백 36(폰 = 폭 7%) */
.hb3-win { position: relative; isolation: isolate; height: 512px; border-radius: 8px; overflow: clip; container-type: inline-size; background: #655b51; }
.hb3-win::before { content: ""; position: absolute; z-index: -2; inset: -18%; pointer-events: none;
  background: radial-gradient(40% 34% at 30% 34%, rgba(255, 228, 205, .34), transparent 70%), radial-gradient(46% 40% at 72% 70%, rgba(40, 30, 26, .42), transparent 72%), linear-gradient(110deg, #855e46, #655b51 45%, #454440);
  filter: blur(18px); }
.hb3-win--b { background: #4c434b; }
.hb3-win--b::before { background: radial-gradient(44% 36% at 68% 30%, rgba(236, 220, 246, .26), transparent 70%), radial-gradient(42% 40% at 24% 76%, rgba(24, 20, 22, .5), transparent 72%), linear-gradient(110deg, #302f2d, #4c434b 45%, #4d3858); }
.hb3-win::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E") 0 0 / 160px 160px; mix-blend-mode: overlay; }
@keyframes hb3-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(3%, -2%, 0) rotate(2deg); } 100% { transform: translate3d(-2%, 2%, 0) rotate(-1deg); } }
@media (prefers-reduced-motion: no-preference) { html.anim .hb3.is-live .hb3-win::before { animation: hb3-drift 26s ease-in-out infinite alternate; } html.anim .hb3.is-live .hb3-win--b::before { animation-duration: 31s; animation-direction: alternate-reverse; } }
.hb3-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; padding: min(36px, 7cqw); box-sizing: border-box; }
/* 창 안 흰 판(그쪽 ctx-window: rgba(250,251,249,.88) · 둥글기 10 · 그림자 0 20 40 −12 · 머리줄 #f1f3f0) — 카드 1 = 요청서 한 장(종이 1) */
.hb.hb3 .hb3-win--a .hb3-slip { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 12px; width: 100%; max-height: 100%; padding: 0; overflow: clip;
  border-radius: 10px; background: rgba(250, 251, 249, .9); box-shadow: 0 20px 40px -12px rgba(46, 68, 87, .27), 0 2px 4px rgba(24, 42, 52, .08); color: var(--al-ui); }
.hb.hb3 .hb3-win--a .hb3-slip::before { content: ""; grid-area: 1 / 1 / 3 / -1; z-index: -1; background: #f1f3f0; border-bottom: 1px solid var(--al-uiline); }
.hb.hb3 .hb3-win--a .hb3-slip .k { grid-area: 1 / 1; padding: 12px 0 0 16px; font-size: 12.5px; font-weight: 500; color: var(--al-ui3); }
.hb.hb3 .hb3-win--a .hb3-slip .r { grid-area: 2 / 1; margin: 2px 0 0; padding: 0 0 12px 16px; font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--al-ui); }
.hb.hb3 .hb3-win--a .hb3-slip > .hb-stc { grid-area: 1 / 2 / 3 / 3; align-self: center; margin-right: 14px; }
.hb.hb3 .hb3-win--a .hb3-doc { grid-area: 3 / 1 / 4 / -1; padding: 6px 16px 14px; clip-path: none; }
.hb.hb3 .hb3-win--a .hb3-doc::before { display: none; }
.hb.hb3 .hb3-doc > div { display: block; padding: 7px 0; border-bottom: 1px solid var(--al-uiline); font-size: 13px; line-height: 1.5; color: var(--al-ui2); }
.hb.hb3 .hb3-doc > div:last-child { border-bottom: 0; }
.hb.hb3 .hb3-doc > div.lit { font-size: 14px; font-weight: 500; color: var(--al-ui); }
.hb.hb3 .hb3-doc dd { white-space: normal; overflow: visible; }
/* 카드 2 = 요청 순서 판(사건 기록 창) — 줄 = [역할 | 메모 | 상태] · 운영자 줄 = 회신 · 검색엔진 줄 = 종이 2 */
.hb.hb3 .hb3-board { width: 100%; max-height: 100%; border-radius: 10px; background: rgba(250, 251, 249, .9); box-shadow: 0 20px 40px -12px rgba(46, 68, 87, .27), 0 2px 4px rgba(24, 42, 52, .08); color: var(--al-ui); overflow: clip; }
.hb.hb3 .hb3-board .hb-wh { height: 46px; gap: 8px; padding: 0 14px; background: #f1f3f0; border-bottom: 1px solid var(--al-uiline); }
.hb.hb3 .hb3-board .hb-mk { width: 18px; height: 18px; }
.hb.hb3 .hb3-board .hb-nm { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--al-ui); }
.hb.hb3 .hb3-board .hb-wh .hb-ad { padding-left: 0; border-left: 0; font-size: 12.5px; font-weight: 500; color: var(--al-ui2); }
.hb.hb3 .hb3-rail { padding: 2px 14px 6px; }
.hb.hb3 .hb3-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 0; padding: 9px 0; border-top: 1px solid var(--al-uiline); }
.hb.hb3 .hb3-row:first-child { border-top: 0; }
.hb.hb3 .hb3-row .nm { grid-column: 1; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--al-ui); }
.hb.hb3 .hb3-row .nt { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--al-ui2); }
.hb.hb3 .hb3-row > .hb-stc { grid-column: 3; height: 22px; padding: 0 8px; font-size: 12px; font-weight: 500; justify-self: end; }
.hb.hb3 .hb3-row.is-dim .nm { color: var(--al-ui3); font-weight: 500; }
.hb.hb3 .hb3-row.is-dim .nt { color: var(--al-ui3); }
.hb.hb3 .hb3-row.is-dim .nm { grid-column: 1 / -1; }
.hb.hb3 .hb3-row.is-dim .nt { grid-column: 1 / -1; margin-top: 2px; }
.hb.hb3 .hb3-row.is-dim .nm span { white-space: nowrap; }
.hb.hb3 .hb3-row[data-r="1"] { align-items: start; }
.hb.hb3 .hb3-row[data-r="1"] .nm { padding-top: 1px; }
.hb.hb3 .hb3-reply { grid-column: 2; }
.hb.hb3 .hb3-reply p { padding: 0; font-size: 12.5px; line-height: 1.45; color: var(--al-ui2); }
.hb.hb3 .hb3-reply b { font-weight: 600; color: var(--al-ui); }
.hb.hb3 .hb3-row.has-slip { align-items: start; }
.hb.hb3 .hb3-row.has-slip .nm { padding-top: 8px; }
.hb.hb3 .hb3-row[data-r="4"] .hb3-slip { grid-column: 2 / 4; width: 100%; padding: 8px 12px 8px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(116, 65, 35, .12), inset 0 0 0 1px var(--al-uiline); }
.hb.hb3 .hb3-row[data-r="4"] .hb3-slip .k { font-size: 12px; font-weight: 500; color: var(--al-ui3); }
.hb.hb3 .hb3-row[data-r="4"] .hb3-slip .r { margin-top: 1px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--al-ui); }
.hb.hb3 .hb3-row[data-r="4"] .hb3-slip > .hb-stc { height: 22px; padding: 0 8px; font-size: 12px; font-weight: 500; }
.hb.hb3 .hb3-row[data-r="4"] .hb3-doc::before { margin: 6px 0 2px; border-color: var(--al-uiline); }
.hb.hb3 .hb3-row[data-r="4"] .hb3-doc > div { padding: 2px 0; border: 0; font-size: 12px; }
.hb.hb3 .hb3-row[data-r="4"] .hb3-doc > div.lit { font-size: 12.5px; }
.hb.hb3 .hb3-row[data-r="4"] .hb3-doc > div:nth-child(n+3) { display: none; }
.hb.hb3 .hb3-win .hb-stc { height: 22px; padding: 0 8px; font-size: 12px; font-weight: 500; }

/* ═══ B4 계약 조건과 한계 + 자주 묻는 질문 = 점선 칸 결(§5 (자)(차) · 바닥·연구 기록 점선 1px 글 24% · 칸 안 28/20) ══════════════ */
.hb.hb4 .hb4-g { display: flex; flex-direction: column; }
.hb.hb4 .hb4-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
.hb.hb4 .hb4-top .hb-h { grid-column: 1 / span 6; }
.hb.hb4 .hb4-p { grid-column: 7 / span 5; padding-top: 6px; font-size: var(--al-base); line-height: 1.55; color: var(--al-ink); text-wrap: pretty; }
.hb.hb4 .hb4-prom { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--al-gap); border-top: 1px dashed var(--al-strong); background: none; }
.hb.hb4 .hb4-prom > li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 28px 20px; border: 0; border-left: 1px dashed var(--al-strong); background: none; }
.hb.hb4 .hb4-prom > li:first-child { border-left: 0; padding-left: 0; }
.hb.hb4 .hb4-prom h3 { font-size: var(--al-lg); line-height: 1.5; font-weight: 500; letter-spacing: 0; color: var(--al-ink); }
.hb.hb4 .hb4-prom p { font-size: var(--al-base); line-height: 1.55; color: var(--al-muted); }
.hb.hb4 .hb4-d { display: flex; flex-direction: column; gap: 8px; }
.hb.hb4 .hb4-d .hb4-f4 { margin: 0; font-size: var(--al-xs); line-height: 1.5; color: var(--al-muted); }
.hb.hb4 .hb4-seven { display: flex; flex-direction: column; gap: 10px; }
.hb.hb4 .hb4-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.hb.hb4 .hb4-chips li { display: inline-flex; align-items: center; height: auto; padding: 6px 8px; border: 0; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1px var(--al-strong); font-size: var(--al-xs); font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--al-muted); white-space: nowrap; }
.hb.hb4 .hb4-pr { margin: 0; }
.hb.hb4 .hb4-lk { justify-self: auto; display: inline-flex; align-items: center; min-height: 0; margin-top: 2px; font-size: var(--al-sm); font-weight: 400; line-height: 1.5; color: var(--al-muted); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--al-line); transition: color var(--al-ui-t), text-decoration-color var(--al-ui-t); }
.hb.hb4 .hb4-lk:hover { color: var(--al-ink); text-decoration-color: currentColor; }
/* 질문 칸: 왼쪽 1칸(세리프 24 제목 + 더 보기) | 오른쪽 3칸(질문 7 · 줄 점선 · 32 원 단추) */
.hb.hb4 .hb4-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); margin: 0; border-top: 1px dashed var(--al-strong); }
.hb4-fl { display: flex; flex-direction: column; gap: 16px; padding: 28px 20px 28px 0; }
.hb.hb4 .hb4-fh { padding: 0; border: 0; font-family: var(--al-serif); font-size: var(--al-xl); line-height: 1.35; letter-spacing: -.005em; font-weight: 400; color: var(--al-ink); }
.hb.hb4 .hb4-more { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.hb.hb4 .hb4-more .hb-lnk, .hb.hb4 .hb4-hubs .hb-go { display: inline; min-height: 0; font-size: var(--al-sm); font-weight: 400; line-height: 1.5; color: var(--al-muted);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--al-line); transition: color var(--al-ui-t), text-decoration-color var(--al-ui-t); }
.hb.hb4 .hb4-more .hb-lnk:hover, .hb.hb4 .hb4-hubs .hb-go:hover { color: var(--al-ink); text-decoration-color: currentColor; }
.hb.hb4 .hb4-hubs { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.hb4-qs { min-width: 0; padding: 8px 0 8px 20px; border-left: 1px dashed var(--al-strong); }
.hb.hb4 .hb4-q { border: 0; border-bottom: 1px dashed var(--al-strong); }
.hb.hb4 .hb4-q:last-child { border-bottom: 0; }
.hb.hb4 .hb4-q > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 12px 0; font-size: var(--al-lg); font-weight: 500; line-height: 1.5; color: var(--al-ink); list-style: none; cursor: pointer; }
.hb.hb4 .hb4-q > summary i, .hb.hb4 .hb4-fbtn i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--al-strong); background: var(--al-soft);
  font-size: 18px; font-weight: 400; font-style: normal; line-height: 1; color: var(--al-ink); transition: background-color var(--al-ui-t), transform .2s; }
.hb.hb4 .hb4-q > summary:hover i, .hb.hb4 .hb4-fbtn:hover i { background: var(--al-soft2); }
.hb.hb4 .hb4-q[open] > summary i { transform: rotate(45deg); }
.hb.hb4 .hb4-a > p { padding: 0 56px 22px 0; font-size: var(--al-base); line-height: 1.55; color: var(--al-muted); }
.hb.hb4 .hb4-fbtn { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 64px; padding: 12px 0; border: 0; border-bottom: 1px dashed var(--al-strong); background: none;
  font: inherit; font-size: var(--al-lg); font-weight: 500; line-height: 1.5; color: var(--al-ink); text-align: left; cursor: pointer; }
.hb.hb4 .hb4-fbtn[hidden] { display: none; }
.hb.hb4 .hb4-faq.is-fold .hb4-q { display: none; }

/* ═══ B5 상담 접수 = 마지막 CTA 판박이(§5 (사) · §6 흰 알약 · 4-1 옆 판) ═══════════════════════════════════════════════
   CTA: 위 변 점선(글 12%) · 최소 512(폰 400) · 세로 가운데 · 세리프 3xl + 24 + 본문(글자색 · 최대 768) → 48 → 흰 알약(어두움) + 전화 글 링크 · 아래쪽 어스름 빛(우리 그러데이션 · 어두울 때만)
   그 아래(점선 24% 위 변): 의뢰 대상 4 | 상담 폼 옆 판(둥글기 19 · 머리카락 고리 12% · 0 2 6 −2 · 0 32 64 −24 · 머리줄 46 #231f1d · 판 #1f1b19 — 늘 어두운 판) */
#contact.hb5 { padding: 0 0 var(--al-py); color: var(--al-ink); }
.hb5-cta { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 512px; padding: var(--al-py) 0; box-sizing: border-box; border-top: 1px dashed var(--al-line); }
.hb5-cta::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.12'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(70% 60% at 50% 104%, rgba(46, 60, 112, .55), transparent 70%),
    linear-gradient(180deg, #1a1614 0%, #1f1c18 20%, #2c3431 40%, #2b4052 60%, #243863 80%, #272d62 95%, #262b5c 100%); }
:is(html[data-scheme="dark"], body[data-theme="dark"]) .hb5-cta::before, html:not(.fxjs) .hb5-cta::before { opacity: 1; }
.hb.hb5 .hb5-c { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hb.hb5 .hb5-c .hb-h { max-width: 768px; }
.hb.hb5 .hb5-c .hb-lead { max-width: 768px; margin: 24px 0 0; font-size: var(--al-base); line-height: 1.55; color: var(--al-ink); text-wrap: pretty; }
.hb.hb5 .hb5-c .hb-acts { justify-content: center; gap: 12px 24px; margin-top: 48px; }
.hb.hb5 .hb5-c .hb-kst { margin-top: 12px; color: var(--al-muted); }
/* 알약(§6): 높이 47(폰 46) · 16/24 · 둥글기 999 · 15 w500 · 밝음 = 검은 알약 · 어두움 = 흰 알약(자동 반전) · hover 90% · .15s */
.hb .hb5-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; padding: 16px 24px; box-sizing: border-box; border-radius: 999px; background: var(--al-ink); color: var(--al-paper);
  font-size: var(--al-sm); font-weight: 500; line-height: 1; letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: opacity var(--al-ui-t), transform .1s; }
.hb .hb5-pill:hover { opacity: .9; }
.hb .hb5-pill:active { transform: scale(.98); }
.hb .hb5-tel { display: inline-flex; align-items: center; gap: 6px; min-height: 0; font-size: var(--al-base); font-weight: 500; line-height: 1.55; color: var(--al-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--al-ink) 25%, transparent); transition: color var(--al-ui-t), text-decoration-color var(--al-ui-t); }
.hb .hb5-tel:hover { color: var(--al-ink); text-decoration-color: currentColor; }
.hb.hb5 .hb5-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 28px; }
.hb.hb5 .hb5-chips li { display: inline-flex; align-items: center; height: auto; padding: 6px 8px; border: 0; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1px var(--al-strong); font-size: var(--al-xs); font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--al-muted); }
.hb.hb5 .hb5-chips li:first-child { background: var(--al-ink); color: var(--al-paper); box-shadow: none; }
/* 대상 4 | 폼 판 — 12칸: 대상 5칸 · 폼 7칸(틈 16) · 위 변 점선 24% */
.hb.hb5 .hb5-g { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: start; padding-top: 56px; }
.hb.hb5 .hb5-g::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px dashed var(--al-strong); pointer-events: none; }
.hb.hb5 .hb5-l { grid-column: 1 / span 5; display: block; }
.hb.hb5 .hb5-stage { grid-column: 6 / -1; margin: 0; width: auto; }
.hb.hb5 .who { margin: 0; }
.hb.hb5 .hb5-wh { padding: 0 0 20px; border: 0; font-family: var(--al-serif); font-size: var(--al-xl); line-height: 1.35; letter-spacing: -.005em; font-weight: 400; color: var(--al-ink); }
.hb.hb5 .who4 { display: block; border-top: 1px dashed var(--al-strong); }
.hb.hb5 .who4 li { border-bottom: 1px dashed var(--al-strong); }
.hb.hb5 .who4 a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 72px; padding: 14px 0; color: var(--al-ink); }
.hb.hb5 .who4 b { font-size: var(--al-lg); font-weight: 500; line-height: 1.4; }
.hb.hb5 .who4 span { display: block; grid-column: 1; margin-top: 2px; font-size: var(--al-sm); line-height: 1.5; color: var(--al-muted); }
.hb.hb5 .who4 i { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--al-strong); background: var(--al-soft);
  font-style: normal; color: var(--al-ink); transition: background-color var(--al-ui-t); }
.hb.hb5 .who4 a:hover i { background: var(--al-soft2); }
.hb.hb5 .hb5-not { margin-top: 16px; font-size: var(--al-sm); line-height: 1.55; color: var(--al-muted); }
.hb.hb5 .hb5-not .hb-go { display: inline; min-height: 0; font-size: inherit; font-weight: 500; color: var(--al-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--al-line); }
.hb.hb5 .hb5-not .hb-go:hover { color: var(--al-ink); text-decoration-color: currentColor; }
/* 폼 옆 판 — 늘 어두운 제품 판(색 고정 · 쪽 뒤집기와 무관) */
.hb.hb5 .hb5-win { --c-cream: #1a1614; --c-paper: #1f1b19; --c-sand: #2a2522; --c-sand2: #231f1d; --c-sand3: #231f1d; --c-line: rgba(250, 251, 247, .12); --c-line2: rgba(250, 251, 247, .08); --c-rule: rgba(250, 251, 247, .24);
  --c-mute: #989693; --c-dim: #989693; --c-sub: #bbbbb7; --c-ink: #fafbf7; --c-ink2: #e4e4e0; --c-or: #ff6b2e; --c-ort: #ff8a57; --c-orb: transparent; --c-orl: #ff6b2e; --c-ok: #34a36b; --c-okb: transparent; --c-okl: #34a36b;
  width: 100%; border-radius: 19px; background: #1f1b19; color: #fafbf7; overflow: clip;
  box-shadow: 0 0 0 1px rgba(250, 251, 247, .12), 0 2px 6px -2px rgba(0, 0, 0, .3), 0 32px 64px -24px rgba(0, 0, 0, .7), 0 0 32px 0 rgba(255, 94, 31, .07); }
.hb.hb5 .hb5-win .hb-wh { height: 46px; box-sizing: border-box; gap: 9px; padding: 12px 15px; background: #231f1d; border-bottom: 1px solid rgba(250, 251, 247, .12); }
.hb.hb5 .hb5-win .hb-mk { width: 18px; height: 18px; }
.hb.hb5 .hb5-win .hb-nm { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #fafbf7; }
.hb.hb5 .hb5-win .hb-wh .hb-ad { border-left-color: rgba(250, 251, 247, .2); font-size: 12px; color: #bbbbb7; }
.hb.hb5 .hb5-win .hb-st { gap: 12px; font-size: 12px; color: #989693; }
.hb.hb5 .hb5-win .hb-st li { padding: 16px 0 15px; }
.hb.hb5 .hb5-tabs li { min-height: 38px; font-size: 12.5px; }
.hb.hb5 .hb5-form .fill { padding: 22px 24px 24px; }
.hb.hb5 .hb5-ft { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.hb.hb5 .hb5-form textarea, .hb.hb5 .hb5-form .one { border-radius: 8px; }
.hb.hb5 .hb5-form .seg span { min-height: 40px; }
.hb.hb5 .hb5-form .send { min-height: 47px; border-radius: 999px; font-size: 15px; font-weight: 500; }

/* ═══ §26-2 밝은 구간 풍성(담당 2 · 11-04) ════════════════════════════════════════════════════════════════
   ① .hb-duo = 그쪽 후기·통계 흰 카드(4-4 실측): 1080 · #fff(어두우면 흰 2%) · 둥글기 8 · 안쪽 8 · 글 5% 고리 · [1fr | 18rem] 틈 16 · 폰 = 위아래 틈 16
      왼쪽 = 카카오톡 상담 판(후기 0 · 가상 예시 대화 · 늘 밝은 제품 판) · 오른쪽 = 통계 카드(5-1: 둥글기 6 · 안쪽 24 · 종이 + 강조 12% · 글 + 강조 40% · 글 6% 고리)
   ② .hb-ar  = 그쪽 연구 기록 줄(5 (자) 실측): 위 점선 글 24% · 위아래 28 · 좌우 20 · 세리프 24(폰 20.06) 제목 | 작은 글 링크 15 + 32 원 단추(틈 8) → 24 → 카드 줄
      카드 = 그림(264×188.6 비율 · 둥글기 6) → 12 → 분류 13 w500 흐린 글 → 6 → 세리프 20/1.5(폰 18.03) 글 75% · 칸 = 그림 + 오른쪽 24 · 폰 70% 폭(273)
   칩(.am-chip)·원 단추(.am-rbtn)·카드 hover(.am-card) = am.css(담당 3) — 그 토큰 --am-* 을 내 구간 --al-* 에 이어 색 뒤집기 따라감. 움직임 = 담당 3 규칙(data-am-*). */
.hb.hb-duo, .hb.hb-ar { --al-acc: #c2410c; --am-ink: var(--al-ink); --am-muted: var(--al-muted); --am-line: var(--al-line); --am-line2: var(--al-strong); --am-accent: var(--al-acc); color: var(--al-ink); }
:is(html[data-scheme="dark"], body[data-theme="dark"]) :is(.hb.hb-duo, .hb.hb-ar):not(.al-far) { --al-acc: #ff6b2e; }
.hb.hb-duo { padding: var(--al-py) 0; }
.hb.hb-duo .hb-wrap { width: min(100% - 2 * var(--al-g), 1080px); }
.al-duo { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 16px; padding: 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--al-ink) 5%, transparent); }
:is(html[data-scheme="dark"], body[data-theme="dark"]) .hb.hb-duo:not(.al-far) .al-duo { background: rgba(255, 255, 255, .02); }
/* 카카오톡 상담 판 — 색 고정(그쪽 Slack 판처럼 제품 화면) · 첫 화면 꽃 대화와 같은 결: 머리줄 모래 · 손님 = 모래 말풍선(오른쪽) · 답장 = 흙 말풍선(왼쪽 · 프로필 32 · 이름) · 둥글기 16 */
.al-kk { display: flex; flex-direction: column; min-width: 0; border-radius: 6px; background: #fffdf9; box-shadow: inset 0 0 0 1px rgba(26, 22, 20, .07); color: #1a1614; overflow: clip; }
.hb .al-kk-h { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 15px; box-sizing: border-box; background: #f3e9dc; border-bottom: 1px solid rgba(26, 22, 20, .06); }
.al-kk-h .hb-mk { width: 18px; height: 18px; fill: #ff5e1f; }
.al-kk-h b { font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.al-kk-cv { flex: none; width: 14px; height: 14px; fill: none; stroke: #696663; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hb .al-kk-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 16px 16px; }
.al-kk-list > li { display: flex; flex-direction: column; align-items: flex-start; padding-left: 42px; }
.al-kk-list > li.al-kk-c { align-items: flex-end; padding-left: 0; }
.al-kk-list > li.al-kk-c + li.al-kk-u, .al-kk-list > li.al-kk-u + li.al-kk-c { margin-top: 10px; }
.al-kk-1 { position: relative; }
.al-kk-av { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: #1a1614; }
.al-kk-av svg { width: 17px; height: 17px; fill: #ff5e1f; }
.al-kk-who { margin: 0 0 5px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #696663; }
.hb .al-kk-b { max-width: min(78%, 400px); padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.5; letter-spacing: -.005em; color: #1a1614; overflow-wrap: anywhere; word-break: keep-all; }
.al-kk-c .al-kk-b { background: #f3e9dc; }
.al-kk-u .al-kk-b { background: #ebc49d; }
.al-kk-doc { width: min(100%, 248px); padding: 11px 13px 12px; box-sizing: border-box; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(26, 22, 20, .1), 0 1px 3px rgba(116, 65, 35, .08); }
.hb .al-kk-doc .t { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.4; }
.al-kk-doc .t .hb-mk { width: 15px; height: 15px; fill: #ff5e1f; }
.al-kk-doc .t b { font-weight: 600; }
.hb .al-kk-doc .d { margin: 5px 0 0 22px; font-size: 12.5px; line-height: 1.5; color: #5b6466; }
.al-kk-doc .d span + span::before { content: " · "; color: #8d9688; }
.hb .al-kk-f { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 11px 15px; border-top: 1px solid rgba(26, 22, 20, .06); font-size: 12.5px; line-height: 1.45; color: #696663; }
.al-kk-ex { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(26, 22, 20, .18); font-size: 12px; font-weight: 500; line-height: 1; color: #1a1614; white-space: nowrap; }
/* 통계 카드(5-1) — 숫자 묶음(숫자 75.6/1.02 −0.025em → 12 → 설명 18/1.55) → 32 → 점 판 두 기둥(틈 16 · 점 하나 = 주소 하나: 30열 × 41줄 = 1,230) → 8 → 축 글 13 → 16 → 표기 13 */
.al-stat { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px; box-sizing: border-box; border-radius: 6px;
  background: color-mix(in oklab, var(--al-paper), var(--al-or) 12%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--al-ink) 6%, transparent);
  color: color-mix(in oklab, var(--al-ink), var(--al-acc) 40%); }
.al-defs { position: absolute; width: 0; height: 0; overflow: hidden; color: var(--al-acc); }
.hb .al-stat-n { font-size: var(--am-5xl); line-height: 1.02; letter-spacing: -.025em; font-weight: 400; color: var(--al-acc); font-variant-numeric: tabular-nums; }
.al-stat-n b { font-weight: inherit; }
/* 설명 + 가상 예시 칩(숫자 줄엔 숫자만 — 그쪽처럼 · 1,230 → 48 세는 동안 칸 폭 = '1,230' 이라 1440 안 폭 240 에 칩이 같이 못 들어감): 폰 = 한 줄 · 1440 = 칩이 아래 줄 */
.hb .al-stat-d { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: var(--al-base); line-height: 1.55; text-wrap: balance; }
.al-stat-d .am-chip { flex: none; }
/* '후' 판 빠짐(숫자 1,230 → 48 과 같은 순간 · 같은 1.4s · 그쪽 점 차오름 곡선 cubic-bezier(.2,.7,.2,1) · 방향만 위 → 아래): 기다리는 동안 1,230 점 다 켜짐 → 71% 선에서 위부터 빠져 48 점만.
   포스터(JS 꺼짐·모션 줄이기·?still=1·이미 지난 카드) = 다 빠진 끝 그림. board-ui 가 [data-am-stat] 에 붙이는 .am-stat-wait → .is-on 만 읽음(배치 읽기 0 · 합성 단계 clip-path) */
.al-stat-dr { clip-path: inset(100% 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  html.anim .al-stat.am-stat-wait .al-stat-dr { clip-path: inset(0 0 0 0); }
  html.anim .al-stat.is-on .al-stat-dr { transition: clip-path 1.4s cubic-bezier(.2, .7, .2, 1); }
}
.hb .al-stat-ch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 32px; }
.al-stat-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.al-stat-pl { position: relative; aspect-ratio: 300 / 410; }
.al-stat-pl > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.al-stat-ax { font-size: var(--al-xs); line-height: 1; letter-spacing: .01em; text-align: center; white-space: nowrap; }
.hb .al-stat-f { margin-top: 16px; font-size: var(--al-xs); line-height: 1.5; letter-spacing: .01em; color: var(--al-muted); text-wrap: pretty; }
/* 기록 서고 카드 줄 */
.hb.hb-ar { container-type: inline-size; padding: 28px 0; border-top: 1px dashed var(--al-strong); --ar-w: max(288px, calc((100cqw - 16px) / 4)); }
.al-ar-h { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 0 20px; }
.hb .al-ar-t { font-family: var(--al-serif); font-size: var(--al-xl); line-height: 1.35; letter-spacing: -.005em; font-weight: 400; color: var(--al-ink); font-synthesis: none; }
.al-ar-r { display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
.hb .al-ar-all { font-size: var(--al-sm); font-weight: 400; line-height: 1.5; color: var(--al-muted); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--al-line);
  transition: color var(--al-ui-t), text-decoration-color var(--al-ui-t); }
.hb .al-ar-all:hover { color: var(--al-ink); }   /* 18:1x 리드: 그쪽은 글자색만 바뀜 */
.al-ar-nav { display: flex; gap: 8px; }
.hb-ar:not(.is-js) .al-ar-nav, .hb-ar.is-fit .al-ar-nav { display: none; }
.al-ar-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.al-ar-nav .am-rbtn[disabled] { opacity: .5; cursor: default; }   /* 그쪽 .5 */
.hb .al-ar-list { display: flex; margin: 24px 0 -16px; padding: 8px 20px 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.al-ar-list::-webkit-scrollbar { display: none; }
.al-ar-list > li { flex: none; width: var(--ar-w); padding-right: 24px; box-sizing: border-box; scroll-snap-align: start; }
.al-ar-list > li:last-child { width: calc(var(--ar-w) - 24px); padding-right: 0; }
.hb .al-ar-c { display: flex; flex-direction: column; margin: -8px; padding: 8px; border-radius: 14px; }
.hb .al-ar-c:focus-visible { outline-offset: -2px; }
.al-ar-art { position: relative; display: block; aspect-ratio: 264 / 188.6; border-radius: 6px; overflow: hidden; background: var(--al-line); }
.al-ar-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--al-ink) 10%, transparent); pointer-events: none; }   /* 모래 그림(밝은 종이 위)·먹 그림(어두운 쪽) 가장자리 */
.al-ar-art > svg { display: block; width: 100%; height: 100%; }
:is(html[data-scheme="dark"], body[data-theme="dark"]) .hb.hb-ar:not(.al-far) .al-ar-ink { fill: #25211f; }   /* 먹 그림 = 쪽이 어두워지면(B5 가 가운데 줄에 걸칠 때) 한 단 밝은 먹(--st-bg2) — 바탕에 묻힘 0 */
.al-ar-m { margin-top: 12px; font-size: var(--al-xs); font-weight: 500; line-height: 1.5; letter-spacing: .01em; color: var(--al-muted); }
.hb .al-ar-ct { margin-top: 6px; font-family: var(--al-serif); font-size: var(--al-lg); line-height: 1.5; font-weight: 400; color: color-mix(in srgb, var(--al-ink) 75%, transparent); text-wrap: pretty; font-synthesis: none; }
@media (max-width: 767px) {
  .al-duo { grid-template-columns: minmax(0, 1fr); }
  .hb .al-kk-b { max-width: 86%; }
  .hb.hb-ar { --ar-w: 70cqw; }
  .al-ar-h { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .al-ar-r { justify-content: space-between; }
}

/* ═══ 머리줄 = 스크롤 뒤 유리 겹(§7) — 첫 화면 바이트·맨 위 상태 그대로(framex-ui 가 맨 위 = .hdx.is-top · JS 전 = html.fx-top → 둘 다 제외) ═══════════════
   둥글기 8 · 종이 70% + 1px 글 5% 고리 + 흐림 12px · .3s ease-out(0,0,.2,1) · 링크 15 w500 흐린 글 → hover 글자색 · 칸막이 1×16 글 24% · 카톡 = 검은 알약(어두우면 흰 알약)
   어두울 때 = 진짜 판은 비우고 먹 사본(.hdx-ink · board.css 가 통째로 켬)이 #1a1614 70% + 고리 #fafbf7 5% · 밝은 쪽 먹 면 오림(framex)은 그대로 */
html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle { border-radius: 8px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-shape rect { rx: 7.5px; fill: rgb(245 246 241 / .7); stroke: rgb(26 22 20 / .05); transition: fill .3s cubic-bezier(0, 0, .2, 1), stroke .3s cubic-bezier(0, 0, .2, 1); }
html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-ink > .hdx-shape rect { rx: 7.5px; }
@media (min-width: 1024px) {
  html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-face .hdx-nav > * { color: #696663; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
  html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-face .hdx-nav > .is-hot { color: #1a1614; background: transparent; }
  html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-face .hdx-nav > [data-i="4"] { box-shadow: none; background: transparent; }
  html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-face .hdx-nav > [data-i="4"]::before { top: 14px; bottom: 14px; background: rgb(26 22 20 / .24); }
  html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-face .hdx-sep { height: 16px; margin: 0 6px; background: rgb(26 22 20 / .24); }
  html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-face .hdx-kakao { height: 42.75px; padding: 0 18px; border: 0; background: #1a1614; color: #f5f6f1; font-weight: 500; letter-spacing: 0; line-height: 1.25; transition: opacity .15s cubic-bezier(.4, 0, .2, 1); }
  html:not(.fx-top) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-face .hdx-kakao.is-hot { opacity: .9; background: #1a1614; }
  :is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-ink .hdx-nav > * { color: #989693; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
  :is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-ink .hdx-nav > .is-hot { color: #fafbf7; background: transparent; }
  :is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-ink .hdx-nav > [data-i="4"] { box-shadow: none; background: transparent; }
  :is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-ink .hdx-nav > [data-i="4"]::before { top: 14px; bottom: 14px; background: rgb(250 251 247 / .24); }
  :is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-ink .hdx-sep { height: 16px; margin: 0 6px; background: rgb(250 251 247 / .24); }
  :is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-ink .hdx-kakao { height: 42.75px; padding: 0 18px; border: 0; background: #fafbf7; color: #1a1614; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
}
:is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-isle > .hdx-shape rect { fill: rgb(26 22 20 / 0); stroke: rgb(250 251 247 / 0); }
:is(html[data-scheme="dark"], body[data-theme="dark"]) .hdx:not(.is-top):not(.is-sheet) .hdx-ink > .hdx-shape rect { fill: rgb(26 22 20 / .7); stroke: rgb(250 251 247 / .05); }

/* ═══ 덩어리 등장(js/am-light.js · §9: 16px · 0.8s cubic-bezier(.22,1,.36,1) · 80ms 계단 · 화면 아래 9% 선) — 움직임 허락일 때만 숨김 ═══ */
@media (prefers-reduced-motion: no-preference) {
  html.anim .am-rv { opacity: 0; transform: translate3d(0, 16px, 0); }
  html.anim .am-rv.is-in { opacity: 1; transform: none; transition: opacity .8s var(--al-ease, cubic-bezier(.22, 1, .36, 1)) var(--rv-d, 0ms), transform .8s var(--al-ease, cubic-bezier(.22, 1, .36, 1)) var(--rv-d, 0ms); }
}

/* ═══ 좁은 데스크톱·태블릿(768~1023) ═══ */
@media (max-width: 1023px) {
  .hb.hb2 .hb2-lib { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .hb.hb4 .hb4-prom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb.hb4 .hb4-prom > li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hb.hb4 .hb4-prom > li:nth-child(n+3) { border-top: 1px dashed var(--al-strong); }
  .hb.hb5 .hb5-l { grid-column: 1 / -1; }
  .hb.hb5 .hb5-stage { grid-column: 1 / -1; margin-top: 40px; }
}
@media (max-width: 1180px) {   /* board.css 1180↓ 쌓기 규칙 되돌림(내 구간) */
  .hb.hb2 .hb2-g { display: grid; }
  .hb.hb2 .hb2-stage { margin: 0; max-height: none; }
  .hb.hb2 .hb2-win { width: auto; }
  .hb.hb4 .hb4-top { display: grid; align-items: start; }
  .hb.hb5 .hb5-g { display: grid; }
}

/* ═══ 폰(≤767 · 1순위) — 그쪽 390 값: 좌우 12 · 섹션 48 · 제목→내용 40 · 섹션 제목 27.18 · 본문 16.03 · 단추 46 ═══ */
@media (max-width: 767px) {
  .hb.hb2, .hb.hb3, .hb.hb4 { padding: var(--al-py) 0; }
  /* B2: 한 칸 — 제목 → 24 → 글 → 링크 → 40 → 목록(고른 줄 바로 아래 결과서가 붙는 아코디언 · CSS order) */
  .hb.hb2 .hb2-g { display: flex; flex-direction: column; align-items: stretch; }
  .hb.hb2 .hb2-l { display: block; }
  .hb.hb2 .hb2-r { margin-top: 24px; }
  .hb.hb2 .hb2-hub { margin-top: 24px; }
  .hb.hb2 .hb2-l > .hb2-hub { display: inline-flex; }
  .hb.hb2 .hb2-lib { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: var(--al-gap); }
  .hb.hb2 .hb2-list { display: contents; }
  .hb.hb2 .hb2-it { min-height: 50px; padding: 10px 14px; }
  .hb.hb2 .hb2-it.is-sel { min-height: 61px; border-radius: 10px 10px 0 0; border-bottom-width: 0; box-shadow: 0 1px 3px rgba(116, 65, 35, .1); }
  .hb.hb2 .hb2-it[data-i="0"] { order: 0; } .hb.hb2 .hb2-it[data-i="1"] { order: 2; } .hb.hb2 .hb2-it[data-i="2"] { order: 4; } .hb.hb2 .hb2-it[data-i="3"] { order: 6; }
  .hb.hb2 .hb2-it[data-i="4"] { order: 8; } .hb.hb2 .hb2-it[data-i="5"] { order: 10; } .hb.hb2 .hb2-it[data-i="6"] { order: 12; }
  .hb.hb2 .hb2-stage { order: 1; margin-top: -6px; }
  .hb2-lib:has(.hb2-it[data-i="1"].is-sel) .hb2-stage { order: 3; } .hb2-lib:has(.hb2-it[data-i="2"].is-sel) .hb2-stage { order: 5; } .hb2-lib:has(.hb2-it[data-i="3"].is-sel) .hb2-stage { order: 7; }
  .hb2-lib:has(.hb2-it[data-i="4"].is-sel) .hb2-stage { order: 9; } .hb2-lib:has(.hb2-it[data-i="5"].is-sel) .hb2-stage { order: 11; } .hb2-lib:has(.hb2-it[data-i="6"].is-sel) .hb2-stage { order: 13; }
  .hb.hb2 .hb2-win { min-height: 0; border-top: 0; border-radius: 0 0 10px 10px; background: #fff; box-shadow: 0 12px 26px -14px rgba(116, 65, 35, .3), 0 1px 3px rgba(116, 65, 35, .1); }
  .hb.hb2 .hb2-win .hb-wh { display: none; }
  .hb.hb2 .hb2-doc { padding: 0 14px 14px; }
  .hb.hb2 .hb2-items { padding: 0 8px 2px; }
  .hb.hb2 .hb2-ir { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: none; row-gap: 0; column-gap: 10px; min-height: 36px; padding: 4px 0; }
  .hb.hb2 .hb2-ir > span { grid-column: auto; grid-row: auto; }   /* board.css 폰 두 줄 자리(종류 ↓ 표면 · 상태 두 줄 걸침) 풀기 → 한 줄 [종류 | 표면 | 상태] */
  .hb.hb2 .hb2-ir > span:nth-child(2) { text-align: right; }
  .hb.hb2 .hb2-ih { display: grid; min-height: 28px; padding: 2px 0; }
  .hb.hb2 .hb2-gate { flex-direction: column; gap: 2px; }
  .hb.hb2 .hb2-facts { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hb.hb2 .hb2-sit .hb2-sitn, .hb.hb2 .hb2-sit .k, .hb.hb2 .hb2-sit .hb-sep { display: none; }
  .hb.hb2 .hb2-sit { padding-top: 2px; }
  .hb.hb2::before { top: -80px; bottom: -48px; }
  /* B3: 한 칸 — 카드 사이 48 · 창 366×464 · 창 안 여백 = 폭 7% */
  .hb3-cards { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .hb3-win { height: 464px; }
  .hb.hb3 .hb3-rail { padding: 0 12px 4px; }
  .hb.hb3 .hb3-row { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 10px; }
  .hb.hb3 .hb3-row .nt { display: none; }
  .hb.hb3 .hb3-row.is-dim { display: none; }
  .hb.hb3 .hb3-row[data-r="1"] { grid-template-columns: 64px minmax(0, 1fr); }
  .hb.hb3 .hb3-row[data-r="1"] > .hb-stc { grid-area: 2 / 2; justify-self: start; margin-top: 6px; }
  .hb.hb3 .hb3-row[data-r="0"] .nt, .hb.hb3 .hb3-row[data-r="2"] .nt { display: block; }
  .hb.hb3 .hb3-win--a .hb3-slip .k { display: block; }
  .hb.hb3 .hb3-win--a .hb3-slip .r { margin: 2px 0 0; font-size: 15.5px; }
  .hb.hb3 .hb3-win--a .hb3-slip > .hb-stc { grid-row: 1 / 3; }
  .hb.hb3 .hb3-doc > div { padding: 6px 0; font-size: 12.5px; }
  .hb.hb3 .hb3-doc > div.lit { font-size: 13.5px; }
  .hb.hb3 .hb3-board .hb-wh .hb-ad { display: none; }
  /* B4: 한 칸 — 제목 → 24 → 글 → 40 → 칸마다 위 점선(칸 안 28 · 좌우 0) */
  .hb.hb4 .hb4-top { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .hb.hb4 .hb4-p { padding-top: 0; }
  .hb.hb4 .hb4-prom { grid-template-columns: minmax(0, 1fr); }
  .hb.hb4 .hb4-prom > li, .hb.hb4 .hb4-prom > li:nth-child(3) { padding: 28px 0; border-left: 0; }
  .hb.hb4 .hb4-prom > li + li { border-top: 1px dashed var(--al-strong); }
  .hb.hb4 .hb4-faq { grid-template-columns: minmax(0, 1fr); }
  .hb4-fl { padding: 28px 0 8px; }
  .hb.hb4 .hb4-faq.is-fold .hb4-fl { display: none; }
  .hb4-qs { padding: 0; border-left: 0; }
  .hb.hb4 .hb4-q > summary, .hb.hb4 .hb4-fbtn { min-height: 64px; gap: 16px; }
  .hb.hb4 .hb4-a > p { padding: 0 0 20px; }
  .hb.hb4 .hb4-more { margin-bottom: 8px; }
  /* B5: CTA 400 · 가운데 → 폼 판 → 대상 4 */
  #contact.hb5 { padding-bottom: var(--al-py); }
  .hb5-cta { min-height: 400px; }
  .hb.hb5 .hb5-c .hb-acts { flex-direction: column; gap: 4px; margin-top: 48px; }
  .hb .hb5-pill { min-height: 46px; padding: 16px 24px; }
  .hb .hb5-tel { padding: 10px 0; }   /* 폰 누름 자리 44.85(글 줄 24.85 + 위아래 10) */
  .hb.hb5 .hb5-g { display: flex; flex-direction: column; gap: 0; padding-top: 40px; }
  .hb.hb5 .hb5-stage { order: 1; margin: 0; }
  .hb.hb5 .hb5-l { order: 2; margin-top: 48px; }
  .hb.hb5 .hb5-win { border-radius: 19px; }
  .hb.hb5 .hb5-win .hb-st li { padding: 16px 0 15px; }
  .hb.hb5 .hb5-form .fill { padding: 18px 16px 20px; }
  .hb.hb5 .who4 a { min-height: 64px; }
  .hb.hb5 .who4 span { display: block; }
}
/* B3 폰 첫 창(11-04 저녁 · 운영 폰 점검): 카드가 위아래로 쌓이면 종이 1 이 아래 카드 접수 줄(약 668px 아래)에서 출발해
   레일 장면이 돌 때까지 첫 창이 비어 보였음 → 폰에서는 종이 1 이 제 창 안에서만 접힌 채 28px 아래 → 펼침
   (박 hb-b9 = 첫 창이 보일 때 · js/board-ui.js b3 · 데스크톱은 예전 그대로 박 hb-b1) */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.anim .hb.hb3.is-armed:not(.hb-b9) .hb3-win--a .hb3-slip[data-slip="1"] { transform: translate3d(0, 28px, 0) scale(.94); grid-template-rows: auto auto 0fr; }
  html.anim .hb.hb3.is-armed.hb-b9 .hb3-win--a .hb3-slip[data-slip="1"] { transform: none; grid-template-rows: auto auto 1fr; }
  html.anim .hb.hb3.is-armed:not(.hb-b9) .hb3-win--a .hb3-slip[data-slip="1"] > .hb-stc { opacity: 0; }
  html.anim .hb.hb3.is-armed.hb-b9 .hb3-win--a .hb3-slip[data-slip="1"] > .hb-stc { opacity: 1; }
}
@media (max-width: 379px) {
  .hb.hb2 .hb2-sb { font-size: 12px; }
  .hb.hb3 .hb3-row { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .hb.hb3 .hb3-row[data-r="1"] { grid-template-columns: 58px minmax(0, 1fr); }
}