/* ═══════════════════════════════════════════════════
   ECHO&DELTA Design System v3.0 — tokens + components
   단일 출처. 이 파일 밖의 hex는 린트 위반이다.
   v3.0 (2026-08-05): 서가 전면 폐기 → 출판물 셸.
   홈 = Echo Field(§10-2′), 구조 화면 5문법(§4-2′).
   ═══════════════════════════════════════════════════ */

/* ── 브레이크포인트 정본 (§10-1) — 이 파일의 폭 조건은 아래 넷뿐이다.
   같은 조건은 한 블록으로 병합한다 — 파편화 금지. 값 추가는 §7 파기 절차로만.
     max-width: 640px                       모바일 — GNB 3×2 접기·히어로 스택·Cases 단계식·1열
     max-width: 900px                       Questions 2열 경계
     min-width: 901px                       데스크톱 — 프레임 상수 1200px + 공통 12컬럼(목차·챕터)
     min-width: 1120px                      장표 확대(§10-4)
   예외: 호버 게이트(hover:hover ∧ pointer:fine)는 프레스·호버 캐스케이드 순서를
   지키기 위해 각 컴포넌트 옆에 둔다 */

:root {
  /* Foundation — 순백 편집 지면 + 청회색 외곽 (08-06 컬러 확정) */
  --canvas:         #E3E8ED;   /* 예비 — 08-06 셸 통일로 전역 지면 = --surface. 외곽 배경 용도 은퇴 */
  --surface:        #FFFFFF;   /* 주요 콘텐츠 지면 — 순백 */
  --surface-muted:  #F2F5F8;   /* 그래픽 영역·제한적 보조 면 */
  --surface-raised: #FFFFFF;   /* 장표·대화상자 — 별도 면 */
  /* Ink — 블루 블랙 */
  --ink:       #10161C;   /* 제목·본문·핵심 괘선 (18.1:1 on surface) */
  --ink-muted: #4E5963;   /* 보조 설명 (7.1:1) */
  --ink-faint: #687580;   /* 날짜·번호·출처 등 비핵심 메타 (4.7:1 — 하한) */
  --rule-strong: rgba(16, 22, 28, .42);   /* 구조 괘선 */
  --rule-soft:   rgba(16, 22, 28, .16);   /* 행 구분·카드 테두리 */
  /* Signal — 코발트 = 상태 신호(현재·선택·링크·포커스·활성·변위) */
  --signal:        #0047AB;
  --signal-strong: #003A8E;
  --signal-soft:   #E6EFFF;
  --seal:          #146B4B;   /* 검인 그린 — 완료 전용(항상 텍스트 라벨 동반) */
  /* 괘선 굵기 */
  --rule-doc: 3px;  --rule-block: 1.5px;  --rule-row: 1px;
  /* 간격 — 관계 스케일 (08-06 §2-3 개편). 레이아웃 간격은 이 스케일로만.
     컴포넌트 내부 패딩은 반복 컴포넌트끼리 통일, 1~3px 광학 보정은 주석 필수 */
  --space-1: 4px;   --space-2: 8px;   --space-3: 16px;  --space-4: 24px;
  --space-5: 40px;  --space-6: 64px;  --space-7: 96px;  --space-8: 144px;
  --gap-micro:   var(--space-1);   /* 라벨↔값, 최소 결속 */
  --gap-related: var(--space-3);   /* 제목↔리드, 같은 화제 */
  --gap-group:   var(--space-5);   /* 그룹 경계 */
  --gap-section: var(--space-7);   /* 큰 주제 전환 */
  --gap-hero:    var(--space-8);   /* 선언적 무대 */
  /* 모션 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-press: 100ms;  --t-hover: 150ms;
  /* 서체 — 국문 1종 Wanted Sans(웨이트로 위계: 400 본문 / 600 중간 / 700 표제),
     영문·숫자 메타 = 시스템 모노 레지스터. Paperlogy 은퇴 (08-06 2차 — 서체 1종화) */
  --f-body: "Wanted Sans Variable", "Wanted Sans", "Wanted Sans Fallback", "Pretendard Variable",
            -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --f-display: var(--f-body);
  --f-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ── 메트릭 매칭 폴백 — 웹폰트 스왑 시 재개행(FOUT 시프트) 방지. 비율은 캔버스 실측 ── */
@font-face {
  font-family: "Wanted Sans Fallback";
  src: local("Apple SD Gothic Neo"), local("Malgun Gothic");
  size-adjust: 101.0%;
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3;
}

/* ── 베이스 ───────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%;
       scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--surface);   /* 전역 단일 캔버스 (08-06 셸 통일) — 전 페이지 동일 지면 */
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;                 /* KRDS */
  line-height: 1.7;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }   /* 홈 CTA → INDEX 앵커 — reduce에선 즉시 점프 */
}

/* 타이포 스케일 — 크기별 트래킹. 중간 크기 없음(08-05 스케일 단절) */
.display { font-family: var(--f-display); font-weight: 700;
           font-size: clamp(2.5rem, 5.4vw, 3.5rem); line-height: 1.22;
           letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-family: var(--f-display); font-weight: 700;
     font-size: clamp(2rem, 3.9vw, 2.5rem); line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-family: var(--f-display); font-weight: 700;
     font-size: 1.4rem; line-height: 1.4; letter-spacing: -0.015em; text-wrap: balance; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.5; }
.small  { font-size: .88rem; line-height: 1.65; }
.label  { font-size: .76rem; font-weight: 600; letter-spacing: .06em; }
.caption{ font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.muted  { color: var(--ink-muted); }
p { text-wrap: pretty; }
.reading { max-width: 40.5rem; }
.num { font-variant-numeric: tabular-nums; }

/* ── 정렬 프레임 (08-06 셸 통일) — 보이는 액자가 아니라 보이지 않는 정렬 장치.
   배경 투명(지면은 body 한 벌)·좌우 선 없음. 1200 경계는 색·선·그림자로 드러나지 않는다 ── */
.doc {
  background: transparent;
  max-width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.doc > main { flex: 1; }
/* ≥901 프레임(폭 1200 상수)은 데스크톱 병합 블록(§10-1)에서 — 파일 하단 */

/* ── GNB — 여백으로 그룹화, 세로 구분선 없음 (08-06 2차).
   현재 = 굵기 + 잉크 농도 (레이아웃 불변 — 상태는 서버 렌더 고정) ── */
.gnb {
  display: flex; align-items: stretch; padding: 0 44px;   /* 전역 거터 한 벌 — 콘텐츠 축(44)과 정렬 */
  border-top: var(--rule-doc) solid var(--ink);
  border-bottom: var(--rule-doc) solid var(--ink);
}
.doc.home .gnb { padding: 0 max(44px, calc(50% - 556px)); }   /* 홈 — 콘텐츠 1200 축, 괘선은 풀블리드 */
.gnb .wm {
  padding: 14px 0; font-weight: 700; font-size: .98rem; letter-spacing: -0.01em;
  text-decoration: none; display: flex; align-items: center;
}
.gnb .wm b { color: var(--signal); font-weight: 700; }
.gnb nav { display: flex; margin-left: auto; gap: 6px; }
.gnb nav a {
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap;
  font-size: .8rem; font-weight: 500; color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}
.gnb nav a:last-child { padding-right: 0; }
@media (hover: hover) and (pointer: fine) {
  .gnb nav a:hover:not([aria-current]) { color: var(--ink); }
}
.gnb nav a[aria-current] { color: var(--ink); font-weight: 700; }

/* ── 라벨 셀 그리드 (챕터 판권 행 전용) ─────────────── */
.lgrid { display: flex; flex-wrap: nowrap; overflow: hidden;
         border-top: var(--rule-doc) solid var(--ink);
         border-bottom: var(--rule-doc) solid var(--ink); }
.lgrid .c { padding: 8px 14px; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
            border-right: var(--rule-block) solid var(--ink); white-space: nowrap; }
.lgrid .c:last-child { border-right: 0; }
.lgrid .c.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lgrid .c.dim  { font-weight: 600; color: var(--ink-muted); }

/* ── 필드 행 ─────────────────────────────── */
.frow { display: flex; border-bottom: var(--rule-row) solid var(--rule-strong); }
.frow:last-child { border-bottom: 0; }
.frow .fk { width: 118px; flex: none; padding: 20px 18px 0;
            font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em;
            color: var(--ink-faint); border-right: var(--rule-row) solid var(--rule-strong); }
.frow .fv { flex: 1; min-width: 0; padding: 17px 22px; }

/* ── 홈 히어로 — 단일 무대 (§10-2′ 08-06 2차): 텍스트와 파장이 한 장면.
   파동 중심은 헤드라인 곁(430,330) — 선언이 반향의 진원. 안쪽 진하고 바깥 옅은
   깊이 계층(w1>w2>w3). 정지 자세(SVG 초기값)가 완성 구도 — 모션 없이 성립 ── */
/* 무대 풀블리드(판정단 08-06): 홈 .doc는 클램프 해제 — 파장이 화면 끝에서만 잘린다.
   콘텐츠 1200 정렬은 max(44px, 50%-556px) 패딩이 대신한다(1112 콘텐츠 + 거터 — 기존 축과 픽셀 동일).
   지면·프레임은 전역 셸(body surface + .doc 투명)이 담당 — 홈 전용 배경 규칙 없음 */
.doc.home .foot .in { padding-left: max(44px, calc(50% - 556px));
                      padding-right: max(44px, calc(50% - 556px)); }
.hero { position: relative; overflow: hidden; display: flex; align-items: center;
        min-height: calc(92vh - 57px); }           /* INDEX 첫 행이 폴드에 걸린다 — CTA와 한 몸 */
.hero .hv { position: absolute; inset: -5%; }      /* 포인터 틸트 시 모서리 노출 방지 여유 */
.hero .pv3d { perspective: 1200px; width: 100%; height: 100%; }
.hero .pv { width: 100%; height: 100%; }   /* will-change 금지 — 상시 레이어化가 SVG를 래스터로 뭉갠다 (08-06 선명도) */
.hero .pv svg { display: block; width: 100%; height: 100%; }
.hero .ht { position: relative; width: 100%;
            padding: 48px max(44px, calc(50% - 556px)) 64px; }
.hero .ht h1 { font-size: clamp(2.4rem, 3.5vw, 3.3rem); line-height: 1.18;
               letter-spacing: -0.032em; max-width: 9.5em; }   /* 홈 히어로 전용 스케일 (§2-1) */
.hero .sub { margin-top: 30px; font-size: 1.06rem; color: var(--ink-muted);
             max-width: 30em; line-height: 1.75; }   /* 강제 줄바꿈 없음 — 폭으로만 통제 */
.hero .go { margin-top: var(--space-5); font-size: .95rem; font-weight: 600; }
/* 파장 — 색은 클래스로만 (§6-3: SVG hex 금지). 깊이 = 굵기·농도 사다리.
   전 선 vector-effect=non-scaling-stroke — viewBox 확대·breath에도 화면 픽셀 기준 렌더
   (08-06 선명도: 아래 굵기는 스케일 무관한 실픽셀. 1440 실효값 기준 재보정 ×1.2) */
.hero .ring { fill: none; stroke: var(--ink); }
.hero .w1 { stroke-width: 1.6; }
.hero .w2 { stroke-width: 1.25; }
.hero .w3 { stroke-width: 0.95; }
/* 발생점 — 코발트의 유일한 역할: 최초의 판단·개입 (08-06 후속. 호 2개는 무채색으로 회귀).
   진입 1회 짧은 펄스만 — 반복 박동 금지, reduced에선 정지 자세 그대로 */
.hero .hero-source { fill: var(--signal); transform-box: fill-box; transform-origin: center;
                     animation: srcpulse 360ms var(--ease-out) 1 both; }
@keyframes srcpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.hero .phase .w1 { stroke-width: 1.8; }   /* 변위 반부는 회색만으로도 절단이 읽힌다 — 인쇄·고대비 */
.hero .phase .w2 { stroke-width: 1.45; }
.hero .phase .w3 { stroke-width: 1.1; }
.hero .cut { stroke: var(--ink); stroke-opacity: .16; stroke-width: 1; }
/* ambient — Echo 반복(breath 16s) · Delta 위상(phase 12s). GPU transform만 */
.hero .waves { transform-origin: 430px 330px; animation: breath 16s ease-in-out infinite; }
.hero .phase { animation: phase 12s ease-in-out infinite; }
@keyframes breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes phase  { 0%, 100% { transform: translateY(26px); } 50% { transform: translateY(14px); } }

/* ── 홈 인덱스 — 편집형 4행 (§4-2′: 상세 목차는 책 안에) ── */
.index { border-top: var(--rule-doc) solid var(--ink);
         padding: 26px max(44px, calc(50% - 556px)) 44px; }
.index .cap { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em;
              color: var(--ink-faint); }
/* 행 리듬 — 4행 동일 규칙(패딩·헤어라인), 마지막 행도 같은 헤어라인으로 종료 (08-06 2차) */
.index a { display: flex; align-items: baseline; gap: 14px; text-decoration: none;
           padding: 19px 2px; border-bottom: var(--rule-row) solid var(--rule-soft);
           color: var(--ink); }
.index .t { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem;
            letter-spacing: -0.02em; }
.index .m { font-size: .85rem; color: var(--ink-faint);
            transition: color var(--t-hover) ease; }
.index .n { margin-left: auto; font-family: var(--f-mono); font-size: .9rem;
            color: var(--ink-faint); font-variant-numeric: tabular-nums;
            transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {   /* 호버 = 탈색 한 채널(회색→잉크) */
  .index a:hover .m, .index a:hover .n { color: var(--ink); }
}

/* ── 페이지 선언 — 랜딩·Cases·About·Questions 공용 머리 (§4-2′) ── */
.decl { padding: 56px 44px 30px; }
.decl .cap { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em;
             color: var(--ink-faint); }
.decl h1 { margin-top: 12px; }
.decl .sub { margin-top: 16px; color: var(--ink-muted); max-width: 34em; }
.decl.row2 { display: flex; gap: 44px; align-items: baseline; flex-wrap: wrap; }
.decl.row2 h1 { margin-top: 0; }
.decl.row2 .sub { margin-top: 0; max-width: 34em; font-size: .98rem; line-height: 1.75; }
.fxnote { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em;
          color: var(--ink-faint); padding: 0 44px 14px; }

/* 유일 CTA — 페이지당 1개 (§3-4 v3) */
.cta { display: inline-block; padding: 11px 22px;
       border: var(--rule-row) solid var(--signal); color: var(--signal);
       font-weight: 600; font-size: .92rem; text-decoration: none;
       transition: color var(--t-hover) ease, background-color var(--t-hover) ease,
                   transform var(--t-press) var(--ease-out); }
.cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--signal); color: var(--surface); }
}

/* ── 버튼·링크 ────────────────────────────── */
.btn { display: inline-block; padding: 11px 20px; cursor: pointer;
       font-size: .86rem; font-weight: 700; text-decoration: none; text-align: center;
       background: var(--ink); color: var(--surface); border: var(--rule-block) solid var(--ink);
       transition: opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { opacity: .9; } }
.btn.ghost { background: transparent; color: var(--ink); }
.link { color: var(--ink); text-decoration: underline;
        text-decoration-color: var(--signal); text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: text-decoration-color var(--t-hover) ease, text-underline-offset var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: var(--ink); text-underline-offset: 4px; }
}

/* ── 배지·태그 ────────────────────────────── */
.tag { display: inline-block; padding: 3px 10px; margin-right: 6px;
       font-size: .68rem; font-weight: 700; letter-spacing: .04em;
       border: var(--rule-row) solid var(--rule-strong); color: var(--ink-muted); }
.tag.done { border-color: var(--seal); color: var(--seal); }

/* ── Exhibit figure ───────────────────────── */
.exhibit { border: var(--rule-block) solid var(--ink); background: var(--surface-raised); margin: 8px 0; }
.exhibit .art { aspect-ratio: 16 / 9; display: grid; place-items: center;
                padding: 26px; text-align: center; }
.exhibit .cap { border-top: var(--rule-row) solid var(--rule-strong); padding: 7px 12px;
                display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
                font-size: .66rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── 랜딩 차례 — 공통 12컬럼 문법 (§4-2′ 08-06 개편):
   PART 1–2열 · 제목 3–9열 · 상태 10–11열 · 번호 12열(우끝).
   PART 경계는 점선이 아니라 거리(--space-6). 챕터 제목 축 = 상세 H1 축.
   미집필 = 명도(ink-faint)·굵기(500)·"집필 중" 라벨 — opacity 감쇄 금지 ── */
.toc { padding: 40px 44px 96px; }
.toc .tpart + .tpart { margin-top: var(--space-6); }
.toc .tgroup { display: block; font-family: var(--f-mono); font-size: .68rem;
               font-weight: 400; letter-spacing: .16em; color: var(--ink-faint);
               padding: 11px 0 4px; }
.toc .trow { display: flex; align-items: baseline; gap: var(--space-4);
        padding: 11px 0; text-decoration: none; font-size: 1.02rem; font-weight: 600;
        letter-spacing: -0.01em; color: var(--ink-muted); transition: color var(--t-press) ease; }
@media (hover: hover) and (pointer: fine) { .toc a.trow:hover { color: var(--ink); } }
.toc .trow.t-dim { color: var(--ink-faint); font-weight: 500; }
.toc .tt { flex: 1; min-width: 0; }
.toc .ttag { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em;
             color: var(--ink-faint); margin-left: 8px; }
.toc .tstat { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em;
              color: var(--ink-faint); }
.toc .tno { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .18em;
            color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.toc .done-mark { margin-left: 8px; color: var(--seal); font-size: .78rem; font-weight: 700; }

/* ── 챕터 이전/다음 — 괘선 상자 2장 (Linear /method 번안) ── */
.pn { display: flex; gap: 16px; }
.pn .pnbox { flex: 1; min-width: 0; border: var(--rule-row) solid var(--rule-strong);
             padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 3px;
             text-decoration: none; color: var(--ink);
             transition: background-color var(--t-hover) ease; }
.pn .pnbox.next { text-align: right; }
.pn .pnbox.t-dim { color: var(--ink-faint); }
@media (hover: hover) and (pointer: fine) { .pn a.pnbox:hover { background: var(--surface-raised); } }
.pn .pnh { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint); }
.pn .pnt { font-weight: 700; font-size: .95rem; line-height: 1.5; }

/* ── 챕터 상세 — 에디토리얼 문서 (§4-2′ 08-06 개편):
   locator 한 줄(← 책 · PART·번호 · 목차 열기) + 본문 3–9열(≈639px).
   S/F/E/A 필드 테이블·상시 레일 폐기 — 전체 차례는 드로어로 ── */
.doc.chapter > main { padding: 0 44px; }
.locator { display: flex; align-items: baseline; gap: var(--space-4);
           padding: 14px 0; border-bottom: var(--rule-row) solid var(--rule-soft);
           font-size: .85rem; }
.locator .loc-back { color: var(--ink-muted); text-decoration: none;
                     transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .locator .loc-back:hover { color: var(--ink); } }
.locator .loc-pos { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
                    color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.locator .loc-open { margin-left: auto; background: none; cursor: pointer;
                     border: var(--rule-row) solid var(--rule-strong); color: var(--ink);
                     padding: 5px 13px; font-size: .78rem; font-weight: 600;
                     transition: border-color var(--t-hover) ease,
                                 transform var(--t-press) var(--ease-out); }
.locator .loc-open:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .locator .loc-open:hover { border-color: var(--ink); } }
.ch { margin-top: var(--space-6); }
/* 서지 메타 — 목차가 아니라 현재 글의 위치 정보. 데스크톱(≥1120, locator 대신)만 (08-06 2차) */
.ch-meta { display: none; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
           color: var(--ink-faint); font-variant-numeric: tabular-nums;
           margin: 0 0 var(--gap-related); }
/* 사이드 목차 — 데스크톱 유일한 강한 로컬 내비 (08-06 2차 복원, 1–3열).
   박스·테두리 없음 — 관리 패널이 아니라 차례다. <1120은 드로어가 대신한다 */
.chtoc { display: none; font-size: .82rem; }
.chtoc .ct-back { display: block; font-weight: 700; font-size: .85rem; color: var(--ink);
                  text-decoration: none; margin-bottom: var(--space-3); }
@media (hover: hover) and (pointer: fine) { .chtoc .ct-back:hover { color: var(--ink-muted); } }
.chtoc .tgroup { display: block; font-family: var(--f-mono); font-size: .64rem;
                 letter-spacing: .14em; color: var(--ink-faint); padding: 14px 0 5px; }
.chtoc .trow { display: flex; align-items: baseline; gap: 9px; padding: 5px 0;
               color: var(--ink-muted); text-decoration: none; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .chtoc a.trow:hover { color: var(--ink); } }
.chtoc .trow .no { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-faint);
                   font-variant-numeric: tabular-nums; flex: none; }
.chtoc .trow[aria-current] { color: var(--ink); font-weight: 700;
                             border-left: 2.5px solid var(--signal);
                             padding-left: 8px; margin-left: -10.5px; }
.chtoc .trow.t-dim { color: var(--ink-faint); }
.ch h1 { margin: 0 0 var(--gap-related); }
.ch .ch-body > p:first-child { font-size: 1.12em; line-height: 1.65;
                               margin-bottom: var(--space-5); }   /* 리드 — 제목 16 · 본문 40 (§8) */
.ch .exwrap { margin-top: var(--space-5); }
.ch .apply { margin-top: var(--space-6); }
.ch .apply .sk { font-family: var(--f-body); font-size: .82rem; font-weight: 700;
                 letter-spacing: .05em; line-height: 1.5; margin: 0 0 var(--gap-related); }
.ch .src-note { margin-top: var(--space-5); }
.ch .pn { margin-top: var(--space-6); }
.doc.chapter .lgrid { margin-top: var(--space-6); }

/* 목차 드로어 — 전체 책 차례는 요청 시에만. 네이티브 dialog = ESC·포커스 기본기 */
dialog.tocdrawer { border: 0; border-left: var(--rule-doc) solid var(--ink); padding: 0;
                   width: min(440px, 92vw); height: 100dvh; max-height: 100dvh;
                   margin: 0 0 0 auto; background: var(--surface); color: var(--ink); }
dialog.tocdrawer[open] { display: flex; flex-direction: column; }
dialog.tocdrawer::backdrop { background: rgba(16, 22, 28, .32); }
dialog.tocdrawer .td-head { display: flex; align-items: center; gap: 10px; flex: none;
                            padding: 13px 20px; border-bottom: var(--rule-doc) solid var(--ink); }
dialog.tocdrawer .td-head b { font-family: var(--f-mono); font-size: .78rem; font-weight: 700; }
dialog.tocdrawer .td-head .td-t { font-weight: 700; }
dialog.tocdrawer .td-x { margin-left: auto; }
dialog.tocdrawer nav { padding: 10px 20px 24px; overflow: auto; }
dialog.tocdrawer .tgroup { display: block; font-family: var(--f-mono); font-size: .66rem;
                           letter-spacing: .16em; color: var(--ink-faint); padding: 16px 0 6px; }
dialog.tocdrawer .trow { display: flex; align-items: baseline; gap: 12px; padding: 8px 0;
                         color: var(--ink-muted); text-decoration: none;
                         font-size: .95rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { dialog.tocdrawer a.trow:hover { color: var(--ink); } }
dialog.tocdrawer .trow .no { font-family: var(--f-mono); font-size: .72rem;
                             color: var(--ink-faint); font-variant-numeric: tabular-nums; }
dialog.tocdrawer .trow[aria-current] { color: var(--ink); font-weight: 700;
                                       border-left: 2.5px solid var(--signal);
                                       padding-left: 10px; margin-left: -12.5px; }
dialog.tocdrawer .trow.t-dim { color: var(--ink-faint); font-weight: 500; }

/* ── 실습 블록 ────────────────────────────── */
.practice { border: var(--rule-block) solid var(--signal); background: var(--signal-soft);
            padding: 20px; margin: 14px 0; }
.practice .pk { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em;
                color: var(--signal); font-weight: 700; }
.choice { display: block; width: 100%; text-align: left; cursor: pointer; margin-top: 8px;
          padding: 12px 14px; background: var(--surface); color: var(--ink);
          border: var(--rule-row) solid var(--rule-strong); font-size: .88rem; line-height: 1.6;
          transition: border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.choice:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--ink); } }
.choice[data-picked] { border-color: var(--signal); }
.feedback { margin-top: 10px; padding: 12px 14px; background: var(--surface);
            border-left: var(--rule-doc) solid var(--ink); font-size: .88rem; line-height: 1.7; }

/* ── 폼 ─────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 7px; }
.field input, .field textarea { width: 100%; padding: 12px 14px; font-size: 1rem;
  background: var(--surface-raised); border: var(--rule-block) solid var(--rule-strong);
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 0; border-color: var(--signal); box-shadow: 0 0 0 3.5px var(--signal-soft); }
.hint { font-size: .76rem; color: var(--ink-faint); }
.field .hint { margin-top: 6px; }

/* ── 칼럼 본문 조판 — 에디터와 공개 페이지가 같은 골격을 쓴다 ── */
.colbody { font-size: 18.5px; }
/* 장문 리듬 (§8 08-06): 문단 간격(28px)이 행간(≈31px)과 맞먹어야 문단이 구분된다.
   주제 전환(h2)은 40px — 관련은 가깝게, 전환은 확실히 멀게 */
.colbody p { margin: 0 0 28px; }
.colbody h2 { margin: 40px 0 16px; }
.colbody h3 { margin: 28px 0 12px; }
.colbody ul, .colbody ol { margin: 0 0 28px; padding-left: 24px; }
.colbody li { margin-bottom: 8px; }
.colbody blockquote { margin: 28px 0; padding: 2px 0 2px 14px;
  border-left: var(--rule-doc) solid var(--ink); color: var(--ink-muted); }
.colbody blockquote p:last-child { margin-bottom: 0; }
.colbody img { display: block; max-width: 100%;
  border: var(--rule-row) solid var(--rule-strong); margin: 28px 0; }
.colbody hr { border: 0; border-top: var(--rule-row) solid var(--rule-strong); margin: 40px 0; }
.colbody code { font-family: var(--f-mono); font-size: .85em; background: var(--surface-raised);
  border: var(--rule-row) solid var(--rule-strong); padding: 1px 5px; }
.colbody pre { background: var(--surface-raised); border: var(--rule-row) solid var(--rule-strong);
  padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
.colbody pre code { border: 0; padding: 0; background: transparent; }
@media (max-width: 640px) { .colbody { font-size: 17px; } }

/* ── 케이스 전문 해부 (상담 응답 상세 — 카드에서 진입할 상세 페이지가 쓴다) ── */
.case { border-bottom: var(--rule-row) solid var(--rule-strong); padding: 20px 22px; }
.case .ck { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; color: var(--ink-faint); }
.case .cq { font-size: .85rem; color: var(--ink-muted);
            border-left: var(--rule-doc) solid var(--ink); padding-left: 12px; margin-top: 8px; }
.case h3 { margin-top: 10px; }
.done-text { color: var(--seal); font-size: .72rem; font-weight: 700; }

/* ── Questions 카드 그리드 — TCI 문법 (§4-2′): 질문이 주인공.
   유형은 색면이 아니라 텍스트 라벨로 (08-06 컬러 확정 — 파스텔 색면 폐지) ── */
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
         padding: 0 44px 64px; }
/* 폼 ↔ 최근 응답 = 큰 주제 전환 (§9 08-06): decl 하단 30 + 64 ≈ --gap-section.
   라벨 ↔ 카드의 가까운 관계는 fxnote 기존 리듬 유지 */
.qarchive { margin-top: var(--space-6); }
.qc { display: flex; flex-direction: column; min-height: 176px; padding: 20px 20px 16px;
      background: var(--surface-muted);
      border: var(--rule-row) solid var(--rule-soft); color: var(--ink); text-decoration: none; }
.qc .q { font-family: var(--f-display); font-weight: 700; font-size: 1.22rem;
         line-height: 1.42; letter-spacing: -0.015em; text-wrap: balance; }
.qc .meta { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline;
            gap: 10px; font-size: .76rem; color: var(--ink-muted); }
.qc .ck { font-family: var(--f-mono); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.qc .st { margin-left: auto; }
.qc .st.done { color: var(--seal); font-weight: 700; }   /* 응답 완료 = 검인 그린 (§3-5) */
a.qc { transition: border-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { a.qc:hover { border-color: var(--ink); } }
a.qc:focus-visible { border-color: var(--ink); }

/* ── About — 신뢰 형성 순서: 리드 → WORKS → BACKGROUND → ON RECORD → CONTACT (08-08 개편).
   축 2개(라벨·연도 / 내용) · 세로 타임라인 선 폐기 · 코발트는 링크 전용(현재 마커 = 잉크).
   섹션 구분은 여백이 먼저 — 구분선·배경색 남발 금지 ── */
.doc.about .decl { padding-top: 128px; max-width: 58rem; }   /* 헤더 → 첫 콘텐츠 120~140 (지시 §12 — 광학 128) */
.doc.about .decl h1 { max-width: 14em; }
.doc.about .decl .sub { max-width: 27em; }   /* 고아 줄("다 한다.") 방지 — 실측 조정 */
.ab-quick { margin-top: var(--space-6); }    /* 리드 → 상단 Contact 링크 ≥48 */
.ab { max-width: 58rem; padding: 0 44px; }
.ab + .ab { margin-top: var(--space-8); }    /* 큰 섹션 전환 ≥140 */
.ab-label { display: block; font-family: var(--f-mono); font-size: .68rem;
            letter-spacing: .16em; color: var(--ink-faint);
            margin-bottom: var(--space-5); } /* 섹션 라벨 → 첫 콘텐츠 32~48 */
/* About 안의 목록 — 홈 INDEX의 행 문법(제목·부제·우측 메타·헤어라인)만 재사용,
   표제 스케일은 강등. WORKS는 08-08 에코 지시로 제외 — 현재는 예비(주석) WHAT I CAN DO 전용 */
.ab .index { padding: 0; border-top: 0; }
.ab .index a, .ab .index .noref { padding: 15px 2px; }
.ab .index .t { font-size: 1.15rem; }
.ab .index .n { font-family: var(--f-body); font-size: .78rem; letter-spacing: 0;
                color: var(--ink-muted); }   /* 상태 메타는 한글 — 모노 금지 (§2-1) */
.ab .index .noref { display: flex; align-items: baseline; gap: 14px;
                    border-bottom: var(--rule-row) solid var(--rule-soft); }
/* BACKGROUND — 세로선 없는 2열: 연도(마커 포함) | 직함·설명 */
.ab-bg .row { display: grid; grid-template-columns: 9em 1fr; column-gap: var(--space-4);
              padding-bottom: var(--space-5); }
.ab-bg .row:last-child { padding-bottom: 0; }
.ab-bg .y { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .04em;
            color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 5px; }
.ab-bg .mk { display: inline-block; width: 8px; height: 8px; margin-right: 10px;
             border: var(--rule-row) solid var(--ink); background: var(--surface); }
.ab-bg .row.now .mk { background: var(--ink); }   /* 현재 = 잉크 채움 — 코발트 금지 (지시 §11) */
.ab-bg .n { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.ab-bg .d { margin-top: 6px; font-size: .92rem; color: var(--ink-muted);
            line-height: 1.7; max-width: 34em; }
/* ON RECORD — 행 목록: 기관(볼드) · 과정 · 연도(우측 tnum) / 소속 맥락은 다음 줄 */
.ab-rec .r { display: grid; grid-template-columns: 10em 1fr auto; column-gap: var(--space-4);
             align-items: baseline; padding: 12px 0 14px;
             border-bottom: var(--rule-row) solid var(--rule-soft); }
.ab-rec .org { font-weight: 700; font-size: .98rem; }
.ab-rec .tt { font-size: .98rem; }
.ab-rec .yr { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-faint);
              font-variant-numeric: tabular-nums; justify-self: end; }
.ab-rec .ctx { grid-column: 2 / 4; font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }
/* 영상 — 차가운 중립 표면(--surface-muted). 카드 테두리·그림자·라운드 없음 */
.ab-videos { margin-top: var(--space-6); display: grid; grid-template-columns: 1fr 1fr;
             gap: var(--space-4); }
.ab-video .vf { aspect-ratio: 16 / 9; background: var(--surface-muted); }
.ab-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.ab-video figcaption { margin-top: 10px; font-size: .78rem; line-height: 1.55;
                       color: var(--ink-muted); }
/* 사진 — 캡션 확정 전 비노출(마크업 주석 §8). 3:2 파생, 톤은 CSS 흑백으로 통일 */
.ab-photos { margin-top: var(--space-6); display: grid; grid-template-columns: 1fr 1fr 1fr;
             gap: var(--space-4); }
.ab-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
                 object-fit: cover; background: var(--surface-muted);
                 filter: grayscale(1) contrast(.94); }
.ab-photos figcaption { margin-top: 8px; font-size: .76rem; line-height: 1.55;
                        color: var(--ink-muted); }
/* CONTACT — 에디토리얼 결론. 앞 여백이 페이지에서 가장 크다 */
.ab-close { margin-top: calc(var(--space-8) + var(--space-5));   /* 144+40 — CONTACT 앞 최대 쉼 (지시 §12) */
            padding-bottom: var(--space-7); }
.ab-close .ab-lead { font-size: 1.15rem; font-weight: 600; max-width: 30em; }
.ab-close p + p { margin-top: var(--space-3); }

/* ── Cases 3단 탐색 — EI 문법 (§4-2′): 좌 산업 / 중 사례 / 우 L1~L8.
   선택 유지 · 비선택 흐림(읽을 수 있는 수준) · 같은 화면 progressive disclosure ── */
.explorer { display: grid; grid-template-columns: 190px 300px 1fr;
            border-top: var(--rule-doc) solid var(--ink); min-height: 620px; }
.pane { padding: 22px 0 44px; min-width: 0; }
.pane + .pane { border-left: var(--rule-row) solid var(--rule-soft); }
/* 패널 헤더·행 공통 시작축 = 24px (§9 08-06 — 밀도는 유지, 축만 통일) */
.pane .plabel { display: block; font-family: var(--f-mono); font-size: .66rem;
                letter-spacing: .16em; color: var(--ink-faint); padding: 0 24px 12px; }
.pane ul { list-style: none; padding: 0; }
.pane button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
               word-break: keep-all; }
/* 좌: 산업 */
.ind button { display: flex; width: 100%; align-items: baseline; gap: 8px;
              padding: 10px 24px; font-size: .95rem; font-weight: 600; color: var(--ink-faint);
              border-left: 2px solid transparent; transition: color var(--t-press) ease; }
.ind button .cnt { margin-left: auto; font-family: var(--f-mono); font-size: .72rem;
                   font-variant-numeric: tabular-nums; }
.ind button[aria-current] { color: var(--ink); border-left-color: var(--signal); }
@media (hover: hover) and (pointer: fine) { .ind button:hover { color: var(--ink); } }
/* 중: 사례 */
.cs button { display: block; width: 100%; padding: 13px 24px;
             border-left: 2px solid transparent; }
.cs button .ct { display: block; font-weight: 600; font-size: .98rem; line-height: 1.5;
                 color: var(--ink-faint); transition: color var(--t-press) ease; }
.cs button .cm { display: block; margin-top: 3px; font-size: .8rem; color: var(--ink-faint); }
.cs button[aria-current] { border-left-color: var(--signal); }
.cs button[aria-current] .ct { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .cs button:hover .ct { color: var(--ink); } }
.cs .ex, .ly .ex, .ab .ex { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em;
        color: var(--ink-faint); border: var(--rule-row) solid var(--rule-soft);
        padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
/* 우: 레이어 L1~L8 */
.ly .ctx { padding: 0 24px 14px; font-size: .85rem; color: var(--ink-muted); }
.ly .ctx b { font-weight: 700; color: var(--ink); }
.ly li { border-top: var(--rule-row) solid var(--rule-soft); }
.ly li:last-child { border-bottom: var(--rule-row) solid var(--rule-soft); }
.ly .lrow { display: flex; width: 100%; align-items: baseline; gap: 14px;
            padding: 11px 24px; transition: opacity var(--t-hover) ease; }
.ly .lno { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em;
           color: var(--ink-faint); flex: 0 0 2.2em; }
.ly .lname { font-weight: 700; font-size: .95rem; flex: 0 0 6.2em; }
.ly .lsum { font-size: .85rem; color: var(--ink-muted); line-height: 1.6; }
.ly li.open .lno, .ly li.open .lname { color: var(--signal); }
.ly li.open .lsum { display: none; }
.ly li.dim .lrow { opacity: .55; }   /* 읽을 수 있는 흐림 (§4-2′) */
@media (hover: hover) and (pointer: fine) { .ly .lrow:hover .lsum { color: var(--ink); } }
.ly .lbody { display: none; padding: 4px 24px 22px; }
.ly li.open .lbody { display: block; }
.ly .lfull { font-size: .92rem; color: var(--ink); max-width: 38em; line-height: 1.7; }
.ly .lfields { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr;
               gap: 1px; background: var(--rule-soft); border: var(--rule-row) solid var(--rule-soft);
               max-width: 44em; }
.ly .lfields > div { background: var(--surface); padding: 10px 14px; }
.ly .lfields .lfk { display: block; font-family: var(--f-mono); font-size: .62rem;
                    letter-spacing: .14em; color: var(--ink-faint); }
.ly .lfields .lfv { display: block; margin-top: 4px; font-size: .85rem; color: var(--ink-faint); }
/* 모바일 단계식 브레드크럼 — 데스크톱·빈 상태에선 숨김 */
.crumb { display: none; }
.crumb:empty { display: none !important; }

/* ── 푸터 ────────────────────────────────── */
.foot { border-top: var(--rule-doc) solid var(--ink); margin-top: 48px; }
.foot .in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
            padding: 16px 44px; font-size: .74rem; color: var(--ink-faint);   /* 전역 거터 축(44) — 모바일은 20 */
            font-variant-numeric: tabular-nums; }
.foot a { color: var(--ink-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink); } }
.doc.home .foot, .doc.wide .foot { margin-top: 0; }

/* ── 유틸 ────────────────────────────────── */
.pad   { padding: 26px 22px; }
.pad-l { padding: 40px 22px 30px; }
.row   { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spacer{ flex: 1; }

/* 간격 스케일 — margin-top 유틸. 컴포넌트 자체 마진을 이겨야 하므로 컴포넌트 뒤에 둔다 */
.mt-4  { margin-top: 4px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-26 { margin-top: 26px; }
.mt-40 { margin-top: 40px; }

/* ── 접근성 3종 ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation: none !important; }
  .btn:active, .choice:active, .cta:active { transform: none; }
}
@media (prefers-contrast: more) {
  .frow, .index a, .case { border-color: var(--ink-muted); }
  .field input, .field textarea { border-color: var(--ink); }
}

/* ── Questions 2열 경계 + 홈 파장 감쇠 ── */
@media (max-width: 900px) {
  .qgrid { grid-template-columns: repeat(2, 1fr); }
  /* 좁은 폭 글리프 보호는 텍스트 안전영역 마스크(app.js — .hv mask-image)가 담당 (08-06 후속).
     블랭킷 감쇠 폐기 — 파장은 전 폭에서 같은 존재감 */
}

/* ── 데스크톱 ≥901 — 프레임 상수 + 공통 12컬럼 그리드 (§10-1 08-06) ── */
@media (min-width: 901px) {
  /* 프레임은 상수, 칼럼만 변한다: 문서 틀(GNB·괘선·푸터)은 전 페이지 1200px.
     목차·챕터는 공통 12컬럼(거터 24px) — 3열 시작축(≈233px)을 공유한다.
     잔여(문의·라이선스)는 중앙 58rem + 18.5px */
  .doc { max-width: 1200px; }
  .doc.home { max-width: none; }   /* 무대 풀블리드 — 1200은 콘텐츠 패딩(max 식)이 지킨다 */
  .doc:not(.home):not(.chapter):not(.wide) > main { width: 100%; max-width: 58rem;
                                                    margin: 0 auto; font-size: 18.5px; }
  .doc:not(.home):not(.chapter):not(.wide) > main .reading { max-width: none; }
  .doc:not(.home):not(.chapter):not(.wide) > main .small { font-size: .88em; }
  /* 랜딩 차례 — PART 라벨은 1–3열, 같은 행의 첫 챕터와 baseline 정렬.
     제목 시작축 = 4열 = 챕터 상세 H1 축 (08-06 2차 — 사이드 목차 1–3열과 공유) */
  .toc .tpart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
                column-gap: var(--space-4); align-items: baseline; }
  .toc .tgroup { grid-column: 1 / 4; grid-row: 1; padding: 11px 0; }
  .toc .trow { grid-column: 4 / 13; }
  /* 챕터 — main 자체가 12컬럼: 사이드 목차 1–3열(≥1120) · 본문 4–10열 ≈ 639px */
  .doc.chapter > main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
                        column-gap: var(--space-4); align-content: start; }
  .locator { grid-column: 1 / 13;
             display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
             column-gap: var(--space-4); align-items: baseline; }
  .locator .loc-back { grid-column: 1 / 4; }
  .locator .loc-pos { grid-column: 4 / 11; }
  .locator .loc-open { grid-column: 11 / 13; justify-self: end; margin-left: 0; }
  .ch { grid-column: 4 / 11; min-width: 0; }
  .doc.chapter .lgrid { grid-column: 1 / 13; }
}

/* ── 장표 확대 dialog 기본(§10-4) ── */
.exdialog { border: var(--rule-doc) solid var(--ink); padding: 0;
            width: min(92vw, 1080px); background: var(--surface); }
.exdialog::backdrop { background: var(--surface); }
.exdialog .art { aspect-ratio: 16 / 9; display: grid; place-items: center;
                 padding: 40px; text-align: center; background: var(--surface-raised); }
.exdialog .bar { border-top: var(--rule-row) solid var(--rule-strong); display: flex; align-items: center;
                 gap: 10px; padding: 10px 14px; font-size: .74rem; color: var(--ink-faint); }
.exdialog .bar .x { margin-left: auto; }
.exhibit .cap .zoombtn { display: none; }

/* ── 챕터 데스크톱 ≥1120 — 사이드 목차(08-06 2차) + 장표 확대(§10-4) ── */
@media (min-width: 1120px) {
  .locator { display: none; }   /* 뒤로 = 사이드 목차, 위치 = 서지 메타 — "목차 열기" 중복 금지 */
  .ch-meta { display: block; }
  .chtoc { display: block; grid-column: 1 / 4; align-self: start;
           position: sticky; top: var(--space-4);
           max-height: calc(100vh - 48px); overflow: auto;
           margin-top: var(--space-6);
           padding-top: 2px; }   /* 광학 보정 — ct-back 대문자 높이를 ch-meta 첫 줄에 맞춤 */
  .doc.chapter .exhibit .art { cursor: zoom-in; }
  .doc.chapter .exhibit .cap .zoombtn { display: inline-block; font: inherit; font-size: .64rem;
      font-weight: 700; color: var(--ink); background: transparent; cursor: pointer;
      border: var(--rule-row) solid var(--ink); padding: 2px 8px; }
}

/* ── 유틸: 스크린리더 전용 텍스트 ── */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 필드 값 영역의 리치 본문 — 마지막 요소의 하단 여백 제거 */
.frow .fv .fvbody > :last-child { margin-bottom: 0; }

/* ── 모바일 ≤640 — 한 블록 병합(§10-1): GNB 3×2 · 히어로 스택 · 단계식 Cases · 1열 ── */
@media (max-width: 640px) {
  .gnb { flex-wrap: wrap; padding: 0 20px; }   /* 모바일 전역 거터 20 */
  .doc.home .gnb { padding: 0 20px; }
  .foot .in { padding: 14px 20px; }
  .gnb .wm { width: 100%; padding: 12px 0 2px; font-size: .9rem; }
  .gnb nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 0; }
  .gnb nav a { flex: 1 0 33.333%; justify-content: center; padding: 9px 4px 11px;
               font-size: .78rem; }
  .frow { display: block; }
  .frow .fk { width: auto; border-right: 0; padding: 15px 18px 0; }
  .frow .fv { padding: 6px 18px 15px; }
  /* 홈 — 같은 단일 무대, 파장은 배경으로 더 옅게 */
  .hero { min-height: 66vh; }
  .hero .ht { padding: 44px 20px 56px; }
  .hero .ht h1 { font-size: 2.4rem; }
  .doc.home .foot .in { padding-left: 20px; padding-right: 20px; }
  .index { padding: 20px 20px 36px; }
  .index .t { font-size: 1.15rem; }
  /* 선언·차례·타임라인·카드 */
  .decl { padding: 36px 20px 18px; }
  .decl.row2 { gap: 12px; }
  .fxnote { padding: 0 20px 12px; }
  .toc { padding: 24px 20px 64px; }
  .toc .tpart + .tpart { margin-top: var(--space-5); }
  .toc .tgroup { padding: 0 0 8px; }
  .toc .trow { padding: 10px 0; gap: 14px; }
  /* 챕터 — 단일 시작축(거터 20px) */
  .doc.chapter > main { padding: 0 20px; }
  .locator { flex-wrap: wrap; gap: 12px; padding: 12px 0; }
  .ch { margin-top: var(--space-5); }
  .ch .apply, .ch .pn { margin-top: var(--space-5); }
  dialog.tocdrawer { width: 100vw; max-width: 100vw; border-left: 0; }
  .qarchive { margin-top: var(--space-5); }   /* 모바일 전환 ≈ 18 + 40 = 58 (§9) */
  /* About — 모바일에서도 연도·내용 2열 관계 유지 (About 지시 §16) */
  .doc.about .decl { padding-top: 96px; }
  .ab { padding: 0 20px; }
  .ab + .ab { margin-top: var(--space-7); }
  .ab-bg .row { grid-template-columns: 84px 1fr; column-gap: 14px; }
  .ab-bg .y { font-size: .72rem; }
  .ab-rec .r { grid-template-columns: 1fr auto; }
  .ab-rec .tt { grid-column: 1 / 3; grid-row: 2; }
  .ab-rec .ctx { grid-column: 1 / 3; }
  .ab-videos { grid-template-columns: 1fr; }
  .ab-photos { grid-template-columns: 1fr; }
  .ab-close { margin-top: var(--space-8); }
  .qgrid { grid-template-columns: 1fr; gap: 12px; padding: 0 20px 56px; }
  .qc { min-height: 0; padding-bottom: 14px; }
  /* Cases — 단계식: JS가 .on을 옮긴다. 뒤로·맥락은 .crumb */
  .explorer { grid-template-columns: 1fr; min-height: 0; border-top: 0; }
  .pane { display: none; padding-bottom: 10px; }
  .pane.on { display: block; }
  .pane + .pane { border-left: 0; border-top: var(--rule-row) solid var(--rule-soft); }
  .crumb { display: flex; gap: 10px; align-items: center; padding: 12px 24px;
           border-top: var(--rule-doc) solid var(--ink); font-size: .82rem;
           color: var(--ink-muted); }
  .crumb button { background: none; border: 0; padding: 0; cursor: pointer;
                  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
                  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .crumb .sep { color: var(--ink-faint); }
  .crumb > span:not(.sep) { flex: 1; min-width: 0; overflow: hidden;
                            text-overflow: ellipsis; white-space: nowrap; }
  .ly .lfields { grid-template-columns: 1fr; }
  .pn { flex-direction: column; }
  .pn .pnbox.next { text-align: left; }
}