/* ═══════════════════════════════════════════════════════════════════════════
   케이스 문서 지면 **v7 «PLATE»** — 2026-07-29
   ---------------------------------------------------------------------------
   한 줄: **도판이 문서를 이끌고, 글은 도판 사이를 지나간다.**

   ★왜 다시 지었나 (v5 «SHOW» 실측 진단 · 이전 세대는 `_archive/v5-show/`)
     v5는 «덱 보드 한 장»을 시각 단위로 썼다. 원본 9장은 전부 iF 제출 덱의 합성 보드라
     672px에 넣으면 안에 든 글자가 5px이 되고, 유닛은 9개에서 안 늘어난다.
     ●v5 = 10,685px · 이미지 7 · 306자/유닛. ●레퍼런스 = blackyak 5.1 · emart 7.2 ·
     dorco 25.4 · km 22.1자/유닛. 컬럼이 **하나뿐**이라 리듬을 만들 수단도 없었다.
     ⇒ ①보드를 **잘라 제 크기로**(`_build/bake-plates.py` · 29장) ②**좌표 레지스터 5개**
       ③도식은 «자료엔 있으나 그림이 없는 것»에만.

   ★잠금
     · 라디우스 0 · 그림자 0 (E-SPEC R2 — 사이트 전역)
     · 서체 Pretendard 1종 (E-T4·R32)
     · **지면 액센트 0색** — 유채색은 작업물 안에서만 난다. 「전부에 붙은 액센트는 아무것도
       지목하지 못한다」(DIAGRAM-RESEARCH §4-1)를 규칙이 아니라 **팔레트**로 닫는다.
     · 지면 톤은 **케이스별**(`data-ground="white|dark"`) — 사용자 확정 2026-07-29.
       v6가 못 넘긴 이식성(「먹 지면의 근거 = 자산이 어둡다」)이 여기서 닫힌다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 토큰 ─────────────────────────────────────────────────────────────── */
:root {
  /* 좌표 레지스터 — v5가 리듬을 못 만든 원인은 컬럼이 «672» 하나뿐이었던 것이다.
     ★레일은 «예약된 띠»가 아니라 **남는 여백에 얹히는 것**이다(2026-07-29 교정 — 아래 참조). */
  --c-pad: clamp(20px, 4vw, 80px);
  --c-gap: clamp(12px, 1.7vw, 24px);
  --c-max: 880px;      /* ★사용자 지정 — 기존 컬럼 672에서 «조금 더» (v7 1차는 1104로 과했다) */
  /* ★★컨텐츠 폭은 **레일과 무관**하다(2026-07-29 교정).
     이전 판은 `100vw − 레일 − 2·pad`였고, 레일이 켜지는 1180에서 지면이 1099 → 892로
     **넓어지는데 좁아졌다**. 레일을 «예약된 띠»가 아니라 «남는 여백에 얹히는 것»으로 바꾸면
     그 역전이 구조적으로 불가능해진다 — 레일은 여백이 자기를 담을 만할 때만 선다(≥1410). */
  --c-cw: min(var(--c-max), calc(100vw - 2 * var(--c-pad)));
  --c-x:  calc((100vw - var(--c-cw)) / 2);                /* 컨텐츠 좌변 */
  --c-u:  calc((var(--c-cw) - 11 * var(--c-gap)) / 12);   /* 1칸 — n-업 격자의 단위 */
  --c-off: calc(2 * var(--c-u) + 2 * var(--c-gap));       /* 레일이 설 때의 글 좌변 = 3칸째 */
  /* 글 폭은 **고정값**이다 — 격자에서 파생하면 폭마다 측정이 달라져 «넓은데 좁다»가 다시 생긴다 */
  --c-col: min(660px, var(--c-cw));                       /* 본문 */
  --c-say: min(780px, var(--c-cw));                       /* 주장·표·도식 */
  --c-inc: calc(var(--c-x) + (var(--c-cw) - var(--c-col)) / 2);   /* 레일 없음 = 중앙 */
  --c-ins: calc(var(--c-x) + (var(--c-cw) - var(--c-say)) / 2);

  /* 활자 6단 — [디스플레이 · 수치 · 주장 · 본문 · 캡션 · 라벨] */
  --c-t1: 64px; --c-t2: 48px; --c-t3: 30px; --c-t4: 17px; --c-t5: 13px; --c-t6: 11px;

  /* 세로 리듬 — 본문 행간 32가 유일한 단위. 배수만 쓴다 */
  --c-lh: 32px;
  --c-s1: 16px; --c-s2: 32px; --c-s3: 64px; --c-s4: 128px; --c-s5: 192px;

  /* ★v2 «RIB» 시각표현 토큰(플레이북 2026-07-31 · 참조 전면 채택 — 사용자 결정)
     · 판·칩에 한해 R2(라디우스 0) 해제 — 도판 프레임·표·지면은 여전히 0
     · 모노 라벨 등급 복귀(R32의 «자리» 재분화) — **라틴·수치 전용**, 한글 금지 */
  --r-plate: 12px; --r-pill: 999px;
  --fmono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* 지면 톤 — 흰 지면(기본) */
:root, [data-ground="white"] {
  --c-bg:   #FFFFFF;
  --c-ink:  #101215;   /* ●18.76:1 on white */
  --c-ink2: #5A6068;   /* ●6.39:1 */
  --c-ink3: #6B717A;   /* ●4.92:1 — 11px 라벨도 AA */
  --c-hair: #E3E5E8;
  --c-hair2:#F1F2F4;
  --c-band: #0B0C0E;   /* 뒤집히는 띠 */
  --c-band-ink: #F4F5F6;
  --c-band-ink2:#A9AFB7;
  --c-band-hair:#24272C;
  --c-panel:#F3F4F6;   /* 도식 판 */
  --c-ink3p:#646A73;   /* 판 위 라벨 — 판이 밝아 지면 기준 ink3(●4.47)로는 AA 미달이다 */
  --c-acc:  #C700A9;   /* 지목 1색 — 사이트 팝(E-T1). ★도식 판 안에서만 난다 */
}
/* 지면 톤 — 먹 지면 */
[data-ground="dark"] {
  --c-bg:   #0B0C0E;
  --c-ink:  #F4F5F6;
  --c-ink2: #A9AFB7;   /* ●8.85:1 on #0B0C0E */
  --c-ink3: #8A9099;   /* ●5.97:1 */
  --c-hair: #24272C;
  --c-hair2:#17191D;
  --c-band: #F4F5F6;
  --c-band-ink: #101215;
  --c-band-ink2:#5A6068;
  --c-band-hair:#DFE1E4;
  --c-panel:#15181C;
  --c-ink3p:#8E949C;
  --c-acc:  #F262D8;
}

/* ★v2 «RIB» §12 — 프로젝트 액센트 바인딩. `--c-acc`(면·칩·글로우 채움 전용)와
   `--c-acc-ink`(잉크화 램프 — 선·활자 전용, 자기 판 위 대비 ●실측 ≥4.5:1).
   원색을 가는 선·작은 글자로 쓰는 순간 지목이 사라진다(§4-2) — 특히 g10 옐로.
   `data-ground`가 body에 있어 body 레벨로 묶는다(우선순위: slug > ground). */
html[data-slug="g1"] body  { --c-acc:#FA2828; --c-acc-ink:#E00505; } /* 덱 자신의 이탈 표기색 · ●4.55 */
/* ★g7 CLASSBOX — 2026-08-07 시각화 세션에서 교체. 종전 값 `#3340F0 / #6A73F4`는 두 곳에서 틀렸다:
   ①램프 #6A73F4가 **라이트 판(#F3F4F6) 위 3.55:1**로 §11의 «자기 판 위 ≥4.5»에 미달했다
     (종전 주석의 ●4.55는 **먹 판** 기준인데 이 편은 ground:'white'다 — 판이 서는 지면과 안 맞았다).
   ②#3340F0은 UI 스포이드 실측값(유래 ③)인데, 이 편 자료에는 **인쇄된 브랜드 메인 컬러 #3A42FF**가 있다
     (Brand Guideline p52 · Logo Guideline p26 「이외 다양한 고객 접점에서 노출되는 블루 컬러는
      브랜드 메인 컬러(#3A42FF)를 적용합니다」 · 원고 해결 2도 그 값을 쓴다) = 유래 ①.
   ⚠로고 전용 #2100EB는 판에 쓰지 않는다 — 「로고에서만 사용 가능」이 이 편이 세운 규정이고,
     소재의 사용 규정을 도식이 어기지 않는다(플레이북 §0-2 함정 41). */
html[data-slug="g7"] body,
html[data-slug="g7-rib"] body,
html[data-slug="g7-prewash"] body { --c-acc:#3A42FF; --c-acc-ink:#3A42FF; } /* 브랜드 메인 컬러(인쇄값) · ●판 위 5.61 · 흰 배경 6.17 */
html[data-slug="g10"] body,
html[data-slug="g10-rib"] body,
/* ★2026-08-07 — 워싱 전 원고 보존본. 도판을 가진 유일한 보존본이라 액센트 바인딩이 필요하다
   (없으면 dia 게이트가 «--c-acc 마젠타 폴백»으로 잡는다). 대표와 같은 값을 쓴다. */
html[data-slug="g10-rib-prewash"] body { --c-acc:#FAD700; --c-acc-ink:#806E00; } /* 사용자 확정 2026-07-31 · ●4.60 · g10-rib=시각 사본 */
/* ★g11 CS WIND — 유래 ①브랜드 확정 헥스. #0085FF는 토큰 파일 헤더가 «cswind.com(공식 사이트)에서
   추출»이라 적은 프라이머리이고 UI 가이드 §3 스와치에도 있다. 램프는 §11 규칙(같은 색상에서 명도만
   내려 자기 판 위 ≥4.5:1 첫 값)의 계산값 #006FD5 — ●판 #F3F4F6 위 4.51 · 흰 배경 4.96.
   ⚠프로젝트가 스스로 정한 AA-safe 액션색 #006FD6은 흰 배경 4.95지만 우리 판 위에선 4.4954로
     문턱을 못 넘는다. 한 헥스 차이로 인접했을 뿐 같은 값이 아니다(사용자 확정 2026-08-01). */
html[data-slug="g11"] body,
html[data-slug="g11-rib"] body { --c-acc:#0085FF; --c-acc-ink:#006FD5; }
/* ★g12 카카오페이 QA — 유래 ①브랜드 확정 헥스(사용자 확정 2026-08-01 «카카오 옐로우 #FAE100»).
   사실 정본(카카오페이QA-사실골격.json)에 인쇄된 헥스는 #F0F2F4·#FFFFFF·#EEF2F4 셋뿐이고 전부
   무채색이라, 이 값은 **자료 실측이 아니라 사용자가 확정해 준 브랜드색**이다 — 그 지위를 여기 남긴다.
   램프 #7D7100 = §11 규칙(같은 색상 HLS에서 명도만 내려 자기 판 위 ≥4.5:1 첫 값)의 계산값.
   ●판 #F3F4F6 위 4.5068 · 흰 배경 4.9598 (colorsys 계산 + 렌더 실측).
   ⚠★**이 편에서는 大타이포에 원색(`text.acc-b`)을 쓰지 않는다** — 플레이북 §4-2가 «大타이포는
     원색이 진다(대형 활자 3:1)»로 완화된 것은 파랑(#0085FF 판 위 3.29)에서 성립한 규칙이고,
     #FAE100은 판 위 **1.2051**이라 대형 기준 3:1조차 못 넘는다. 저대비 브랜드색은 §4-3이 계속
     지배한다 — 원색은 «잉크가 병치된 큰 면»에서만 살고, 활자·선·소형 마크는 램프가 진다.
     ⇒ g12의 «포인트 컬러가 느껴지는» 자리는 활자가 아니라 **채워진 덩어리(면)**다. */
html[data-slug="g12"] body,
html[data-slug="g12-rib"] body { --c-acc:#FAE100; --c-acc-ink:#7D7100; }
/* ★g2 EY한영 — 유래 ①브랜드 확정 헥스이되 **자료 안에서** 나왔다(사용자 확정 2026-08-01).
   출처 = PROD 배포 실물 `dist - prod_251021/logo.svg`(사실골격 «배포실물» 항) — 흰색 path 2개(EY 글자꼴)와
   `fill="#FEE502"` path 1개(사선 빔)로 된 파일이다. 추측한 브랜드색이 아니라 **배포된 제품이 싣고 있는 값**이라
   유래 ①로 잠근다. 외부 지식의 EY 옐로를 끌어오지 않았다 — 사실 정본 밖 값은 무조작 위반이다.
   램프 #7D7100 = §11 규칙 계산값 ●판 #F3F4F6 위 4.5068 · 흰 배경 4.9598 (colorsys + 렌더 실측).
   ⚠g12(#FAE100)와 램프가 같은 헥스로 떨어진다 — 두 브랜드 옐로의 색상·채도가 8비트에서 같은 자리에
     내려앉기 때문이고, 값이 같다고 유래가 같은 것은 아니다. 편이 다르니 의미 고정(§4-4)도 깨지지 않는다.
   ⚠★**大타이포 원색(`text.acc-b`) 금지** — #FEE502는 판 위 **1.1619**라 대형 활자 기준 3:1도 못 넘는다.
     g10·g12와 같은 저대비 브랜드색이라 §4-3이 계속 지배한다: 원색은 «잉크가 병치된 큰 면»에서만 살고,
     선·활자·독립 소형 마크는 램프(`acc-i`/`acc-t`)나 원색+잉크 링(`acc-o`)이 진다.
   ★이 편은 그 «큰 면»의 근거를 제품이 직접 준다 — 실물 UI에서 옐로가 서는 자리는 셋뿐이다:
     활성 탭의 배지 pill · 하단 고정 CTA 면(«승인»·«확인») · 본문 활자 뒤 형광 하이라이트.
     전부 잉크가 병치된 면이다. 판의 액센트도 그 문법을 따른다. */
/* ★2026-08-01 2차 — 시각 사본 `g2-rib`을 **다시 지어 되살렸다**(원고 수정 완료 후 · 전 판 신규 저작).
   1차 보존본은 `_archive/g2-rib-260801/`에 그대로 있고 참조하지 않았다.
   ⚠새 사본 슬러그를 만들 땐 이 바인딩에 **반드시 함께 등록한다** — 빠뜨리면 그 판이 마젠타
     폴백으로 렌더되는데도 유채색 검사가 «바인딩된 값»과 대조하므로 자기모순 없이 통과한다(함정 24). */
html[data-slug="g2"] body,
html[data-slug="g2-rib"] body { --c-acc:#FEE502; --c-acc-ink:#7D7100; }

/* ★★g3 bandi S&D — 릴에서 **처음으로 무채색 액센트**다(사용자 확정 2026-08-01).
   유래 ①브랜드 확정 헥스 = 가이드 p3 「RGB 28 28 28 | HEX 1C1C1C」. 이 브랜드의 색은 실제로
   검정 하나이고(지면 해결 3 「브랜드 색은 검정 하나로 정했다」), 유채색을 하나 꾸며 넣으면
   그것이 곧 지면이 말하는 「색을 늘리지 않고 흑백 안에서」의 반증이 된다.
   ⚠**램프가 원색과 같은 값이다.** §11이 램프에 요구하는 것은 «자기 판 위 ≥4.5:1»인데
     #1C1C1C는 판 #F3F4F6 위 이미 ●15.51이라 내릴 이유가 없고, 무채색에는 «명도만 이동»할
     색상 자체가 없다. 규칙을 어긴 것이 아니라 규칙이 이미 충족된 경우다.
   ⚠★그래서 이 편에서는 **색이 지목을 지지 않는다** — 우리 잉크 #101215(●16.99)와 눈으로
     구별되지 않기 때문이다. `text.acc-b`·`acc-t`(원색·램프 활자)는 이 편에서 쓰지 않고,
     지목은 **채움 대 윤곽**과 농도 3계단이 진다. 액센트 클래스가 쓰이는 자리는 두 판뿐이다
     (먹 1도 판의 K 칸 · 탐색 판의 채택 띠 — `dia-g3.mjs` 머리말이 정본).
     함정 27(옐로는 너무 밝아 활자 지목 불가)의 반대편 극단이다. */
html[data-slug="g3"] body,
html[data-slug="g3-rib"] body { --c-acc:#1C1C1C; --c-acc-ink:#1C1C1C; }

/* ★g13 신세계라이브쇼핑 — 브론즈·골드(사용자 확정 2026-08-07 «브론즈·골드 계열»).
   유래 ③저작 선택 — 덱의 금색 리드·p22 스와치 «Accent 카키/골드 베이지» 계열이되, 덱 어디에도
   색상값(HEX)이 인쇄돼 있지 않아(사실골격 p22·26 «컬러값 표기 없음») 실측 복제가 아니라 우리가
   정한 값이다. 그 지위를 여기 남긴다. #CFA230 = h43 s62 l50.
   램프 #886B20 = §11 규칙(같은 색상에서 명도만 내려 자기 판 위 ≥4.5:1 첫 값) 계산값 —
   ●판 #F3F4F6 위 4.58 (l50→l33). 골드 면 위 잉크 활자 8.04. */
html[data-slug="g13"] body,
html[data-slug="g13-rib"] body,
/* ★격상본 보존(2026-08-07 · 지면에서 내림) — 도판을 가진 숨김 사본이라 바인딩이 필요하다.
   빠뜨리면 dia 게이트가 «액센트 미바인딩(마젠타 폴백)»으로 잡는다. */
html[data-slug="g13-rib-elevated"] body,
html[data-slug="g13-prewash"] body { --c-acc:#CFA230; --c-acc-ink:#886B20; }

/* ★g14 NHN — 유래 ①**자료 인쇄값**. 덱 p6 «Color» 아랫줄(유채색 5)의 첫 칩이 #FA2828이고,
   p7이 기록한 GNB 로고의 «가운데 가로획 하나만 빨간색»과 같은 계열이다.
   g10·g12·g2의 브랜드색이 사용자 확정이었던 것과 달리 이 값은 장표에 적혀 있다.
   램프 #E00505 = §11 규칙(같은 색상에서 명도만 내려 자기 판 위 ≥4.5:1 첫 값) 계산값
   — ●판 #F3F4F6 위 4.55 · 흰 배경 5.01. 원색은 판 위 3.53이라 大타이포도 넘길 수 있으나,
   이 지면의 «수치=램프» 문법을 따라 활자는 램프가 지고 원색은 면이 진다.
   ⚠같은 헥스를 쓰던 g1 바인딩이 아래에 남아 있으나 g1은 데이터·빌드에서 삭제됐다(2026-08-02 · 확인함). */
html[data-slug="g14"] body,
html[data-slug="g14-rib"] body,
html[data-slug="g14-rib-drawn"] body,
html[data-slug="g14-rib-dense"] body,
html[data-slug="g14-prewash"] body { --c-acc:#FA2828; --c-acc-ink:#E00505; }

/* ★레일이 설 때만 글이 3칸째로 옮겨 간다 — 폭이 아니라 **자리**만 바뀐다(폭은 고정 680/880) */
@media (min-width: 1330px) and (pointer: fine) {
  :root { --c-inc: calc(var(--c-x) + var(--c-off)); --c-ins: calc(var(--c-x) + var(--c-off)); }
}
@media (max-width: 1179px) { :root { --c-t1: 44px; --c-t2: 36px; --c-t3: 25px; --c-t4: 16px; } }
@media (max-width: 767px)  { :root { --c-t1: 30px; --c-t2: 28px; --c-t3: 20px; --c-lh: 28px;
                                     --c-s3: 48px; --c-s4: 80px; --c-s5: 112px; } }

/* ── 2. 지면 ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font-family: var(--fk); font-size: var(--c-t4); line-height: var(--c-lh);
  font-weight: 400; letter-spacing: -0.006em;
  /* ★한글은 어절 단위로 접는다 — 없으면 «웹사이 / 트를»처럼 낱말 한가운데서 끊긴다(첫 렌더 결함) */
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
/* ★UA 기본값 `figure{margin:1em 40px}` 해제 — 안 하면 n-업 칸마다 좌우 40px이 먹어
   ●5칸 도판이 212 → 132px로 줄어든다(첫 렌더 결함). 블리드에서는 우측 40px이 넘침을 만든다. */
figure, figcaption, dl, dd, h1, h2, p { margin: 0; }
a { color: inherit; }
/* ★`html.mjs`의 `g()`는 `<i class="g">`로 감싼다 — UA 기본 `font-style:italic`을 지우는 규칙이
   `e.css:27`에만 있어서 케이스 지면에서는 수치가 **합성 오블리크**로 렌더되고 있었다.
   Pretendard Variable에는 이탤릭 페이스가 없어 브라우저가 기울여 그린다(●`.nums` 4개 전부). */
.g { font-style: normal; font-feature-settings: 'tnum'; }
::selection { background: var(--c-ink); color: var(--c-bg); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 90; background: var(--c-ink); color: var(--c-bg); padding: 10px 14px; }

.wrap { width: 100%; }

/* ── 3. 레지스터 5개 ─────────────────────────────────────────────────────── */
/*  col   본문      7칸 · 좌변 = 3칸째        (●1440 737 / 1280 671)
    say   주장·표   9칸 · 같은 좌변
    wide  도판     12칸 = 컨텐츠 전폭
    row-n n-업     12칸 안에서 나눈다
    bleed 접합     100vw                                                     */
.u        { width: var(--c-cw); margin-left: var(--c-x); }
.u-mark   { width: min(260px, var(--c-cw)); margin-left: var(--c-inc); }  /* 배지 — 업스케일 금지 자리 */
.u-col    { width: var(--c-col); margin-left: var(--c-inc); }
.u-say    { width: var(--c-say); margin-left: var(--c-ins); }
.u-bleed  { width: 100vw; margin-left: 0; }

/* ── 4. 좌측 레일 ────────────────────────────────────────────────────────── */
.rail.side {
  position: fixed; top: 50%; transform: translateY(-50%);
  /* ★컨텐츠 좌변에서 정확히 24px 왼쪽에 오른쪽 끝을 맞춘다 — 폭이 넓어져도 간격이 일정하다.
     `max()`가 뷰포트 밖으로 나가는 것을 막는다. 폭은 `nowrap`이 정한다(가장 긴 이름 ●104px). */
  left: max(24px, calc(var(--c-x) - var(--c-rgap) - var(--c-rw)));
  --c-rw: 40px;   /* ●번호 상태 실측 렌더 폭 — «↰ REEL»이 폭을 정한다 */
  width: auto; max-width: 128px;
  --c-rgap: 100px;  /* ★본문과의 거리(2026-07-30 사용자 지정). 24 → 56 → **100** */
  z-index: 20; display: none;
}
/* ★1280~1409는 **번호만** 선다 — 여백이 라벨을 담지 못하는 폭에서 목차를 통째로 잃지 않는다.
   (c-x 실측 1280→88 · 1410→153. 라벨 폭 ●104px은 88에 안 들어가고 40px 번호는 들어간다) */
.rail.side .rlab { display: none; margin-left: 8px; }   /* 기본 = 숨김 — 미디어쿼리가 연다(소스 순서 주의) */
@media (min-width: 1210px) and (pointer: fine) { .rail.side { display: block; max-width: 40px; } }
@media (min-width: 1330px) and (pointer: fine) { .rail.side { max-width: 128px; --c-rw: 97px; } .rail.side .rlab { display: inline; } }   /* ●라벨 상태 실측 97 */
.rail.side .rno { font-style: normal; font-variant-numeric: tabular-nums; }
.rail.side ol { list-style: none; margin: 0; padding: 0; }
.rail.side li + li { margin-top: 11px; }
.rail.side a {
  display: block; text-decoration: none;
  font-size: var(--c-t6); line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; color: var(--c-ink3); transition: color .25s;
}
/* ★가로 막대(틱) 폐기(2026-07-30 사용자) — 현재 위치는 **색과 굵기**가 진다.
   번호(`.rno`)가 이미 자리를 세고 있어 막대는 같은 말을 두 번 하고 있었다. */
.rail.side a:hover { color: var(--c-ink2); }
.rail.side a[aria-current="true"] { color: var(--c-ink); font-weight: 500; }
/* 블리드가 화면에 걸치는 동안은 레일을 물린다 — 100vw가 컨텐츠 좌변을 덮는다(case.js) */
.rail.side { transition: opacity .3s; }
html.at-full .rail.side { opacity: 0; pointer-events: none; }
.sback, .back {
  display: inline-block; text-decoration: none; color: var(--c-ink3);
  font-size: var(--c-t6); letter-spacing: .1em; text-transform: uppercase;
}
.sback { margin-bottom: 30px; }
.sback:hover, .back:hover { color: var(--c-ink); }
.top { width: var(--c-cw); margin-left: var(--c-x); padding-top: 28px; }
@media (min-width: 1210px) and (pointer: fine) { .top { display: none; } }

/* ── 5. 표지 ─────────────────────────────────────────────────────────────── */
.cover { width: var(--c-cw); margin-left: var(--c-x); padding-top: var(--c-s4); }
.kicker {
  margin: 0 0 var(--c-s2); font-size: var(--c-t6); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink3); font-variant-numeric: tabular-nums;
}
.ch { margin: 0; font-size: var(--c-t1); line-height: 1.12; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.csum { margin: var(--c-s2) 0 0; font-size: var(--c-t3); line-height: 1.5; font-weight: 400; color: var(--c-ink2);
        letter-spacing: -0.02em; max-width: var(--c-say); }

.meta { margin: var(--c-s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--c-gap); row-gap: var(--c-s2); }
.meta > div { min-width: 0; }
.mk { margin: 0 0 8px; font-size: var(--c-t6); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink3); }
.mv { margin: 0; font-size: var(--c-t5); line-height: 1.55; color: var(--c-ink); }
/* ~~.myrole~~ — MY ROLE이 TEAM 안 괄호에서 **자기 열**로 승격되며 대상이 없어졌다(RB59) */
@media (max-width: 767px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rule { border: 0; border-top: 1px solid var(--c-hair); margin: var(--c-s3) 0 0; }
.lede { margin: var(--c-s3) 0 0 0; width: var(--c-say); font-size: var(--c-t4); line-height: var(--c-lh); color: var(--c-ink2); }
@media (max-width: 1179px) { .lede { width: 100%; } }

.coverfig { margin: var(--c-s4) 0 0; }
.coverfig figcaption { margin-top: 14px; font-size: var(--c-t5); color: var(--c-ink2); }
.cframe { display: block; }
.covermedia { display: block; box-shadow: inset 0 0 0 1px var(--c-hair); }
.covermedia img { width: 100%; }

/* ── 6. 파트 ─────────────────────────────────────────────────────────────── */
.sec { padding-top: var(--c-s5); scroll-margin-top: 40px; }

/* 파트 머리 — 전폭 헤어라인 + 좌단 번호·이름. 이름은 크기가 아니라 **자리**가 진다 */
.pt {
  width: var(--c-cw); margin-left: var(--c-x); padding-bottom: 16px;
  border-top: 1px solid var(--c-ink); display: flex; gap: 16px; align-items: baseline;
}
.pt .no { font-size: var(--c-t6); letter-spacing: .1em; color: var(--c-ink3); font-variant-numeric: tabular-nums; padding-top: 14px; }
.sname { margin: 0; padding-top: 14px; font-size: var(--c-t6); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }

/* 구간 — 한 주장 단위 */
.run { padding-top: var(--c-s3); }
.sec > .pt + .run { padding-top: var(--c-s2); }

/* ── 7. 활자 ─────────────────────────────────────────────────────────────── */
.claim {
  width: var(--c-say); margin: 0 0 var(--c-s2) var(--c-ins);
  font-size: var(--c-t3); line-height: 1.45; font-weight: 600; letter-spacing: -0.028em; text-wrap: pretty;
}
.run > p:not(.claim):not(.note), .sec > p:not(.claim):not(.note) {
  width: var(--c-col); margin: 0 0 var(--c-lh) var(--c-inc); color: var(--c-ink2);
}
.run > p:last-child, .sec > p:last-child { margin-bottom: 0; }
.note { width: var(--c-col); margin: var(--c-s1) 0 0 var(--c-inc); font-size: var(--c-t5); line-height: 1.65; color: var(--c-ink3); }
/* ★도판 바로 밑 16px에 note가 앉으면 **그 도판의 캡션처럼** 읽힌다(iF 배지 ↔ 면책 문구에서 실제로 났다) */
.fig + .note, .row + .note { margin-top: var(--c-s3); }

/* ── 8. 도판 ─────────────────────────────────────────────────────────────── */
/*  ★캡션은 도판 **아래**. 「이게 무엇인가」는 보고 나서 확인하는 것이지
    보기 전에 규정하는 것이 아니다(Truth&Beauty 실측 · DIAGRAM-RESEARCH §5-4). */
.fig { margin-top: var(--c-s3); }
.run > .fig:first-child { margin-top: 0; }
/* ★하이라인은 `.plate`가 아니라 `::after`가 진다(2026-08-07).
   판 자체에 그으면 이미지가 닦이기 «전»에 빈 사각형이 먼저 튀어나온다(사용자 지적).
   ::after는 이미지와 같은 clip을 받아 **같이 자라난다**(§12-B). */
.plate { display: block; position: relative; }
.plate::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--c-hair); }
.plate img, .plate video { width: 100%; }
.fig figcaption { margin-top: 14px; font-size: var(--c-t5); line-height: 1.6; color: var(--c-ink2); max-width: min(560px, 100%); }
.fig.u-bleed > figcaption, .fig.u-bleed > .lab { width: var(--c-cw); margin-left: var(--c-x); }
.fig.u-bleed .plate::after { box-shadow: none; }
/* 벽라벨 — 저작 도식이 «어디까지가 우리가 그린 것인가»를 지는 자리.
   ★11px 한두 줄. 자백이 그림보다 커지면 그건 실패다(v5 ISSUE 판 = 잉크 2.19배). */
.lab { margin-top: 8px; font-size: var(--c-t6); line-height: 1.7; color: var(--c-ink3); max-width: min(660px, 100%); }
.lab b { font-family: var(--fmono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }  /* v2 — SOURCE·NOTE는 라틴이라 모노 등급 */
.lab i { font-style: normal; display: block; }

/* n-업 격자 */
.row { display: grid; column-gap: var(--c-gap); row-gap: var(--c-s2); }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 12px; }
/* ★칸을 세로 플렉스로 두고 캡션을 바닥으로 민다 — 원본 비율이 제각각인 크롭을
   한 줄에 놓으면 캡션 높이가 어긋난다. 이미지를 자르지 않고 정렬만 맞추는 방법이다. */
.row .cell { min-width: 0; display: flex; flex-direction: column; }
.row .cell figcaption { margin-top: auto; padding-top: 12px; font-size: var(--c-t5); color: var(--c-ink2); }
.row .cell .plate::after { box-shadow: inset 0 0 0 1px var(--c-hair); }  /* u-bleed 행에서도 하이라인 유지 — ::after라야 §12-B clip을 받는다 */
/* ★n-업은 **같은 원본 계열끼리** 짝짓는다 — 비율을 강제로 맞추면 레터박스가 생기고,
   맞추지 않으면 밑변이 어긋난다. 데이터 쪽에서 짝을 고르는 것이 옳은 해다(캡션은 바닥 정렬). */
@media (max-width: 1179px) { .row-5 { column-gap: 8px; } }
@media (max-width: 767px) {
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ★5대 사업은 «하나의 시각 언어로 묶었다»는 주장을 지는 **한 세트**다. 2+2+1로 접으면
     세트가 깨져 형태가 주장을 배반한다 → 좁은 폭에서는 가로 스크롤로 다섯을 유지한다. */
  .row-5 { grid-auto-flow: column; grid-auto-columns: 42vw; grid-template-columns: none;
           overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px;
           margin-right: calc(-1 * var(--c-pad)); padding-right: var(--c-pad); }
  .row-5 .cell { scroll-snap-align: start; }
}

/* 대비 쌍 — 좌우 완전 동형 + 중앙 1px 규선. ★잇는 선을 그리지 않는다
   (Carbon v10→v11 토큰 개칭 실측 · DIAGRAM-RESEARCH §5-9) */
.vs { position: relative; }
.vs::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--c-hair); }
@media (max-width: 767px) { .vs::after { display: none; } }
.tag { display: block; margin-bottom: 12px; font-size: var(--c-t6); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink3); }

/* 뒤집히는 띠 — 파트 전환의 유일한 극적 장치 */
.band { background: var(--c-band); color: var(--c-band-ink); padding: var(--c-s4) 0; margin-top: var(--c-s4); }
.band .claim, .band p { color: var(--c-band-ink); }
.band .lab, .band figcaption, .band .tag { color: var(--c-band-ink2); }
.band .plate::after { box-shadow: inset 0 0 0 1px var(--c-band-hair); }
.band > .fig:first-child { margin-top: 0; }
.band.tight { padding: 0; margin-top: var(--c-s3); }

/* ── 9. 블록 형(型) ──────────────────────────────────────────────────────── */
/* 수치 — 큰 활자가 도식을 대신한다. 기하가 없으면 없는 관계를 만들 수 없다 */
.nums {
  width: var(--c-cw); margin: var(--c-s3) 0 0 var(--c-x);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: var(--c-gap);
  border-top: 1px solid var(--c-ink); padding-top: 24px;
}
.nums > div { min-width: 0; }
.nums b { display: block; font-size: var(--c-t2); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.nums span { display: block; margin-top: 12px; font-size: var(--c-t5); color: var(--c-ink2); }
@media (max-width: 767px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--c-s2); } }

/* 라벨–값 2열 */
.prin, .spec, .out { width: var(--c-say); margin: var(--c-s3) 0 0 var(--c-ins); padding: 0; list-style: none; }
.prin li, .spec > div, .out > div {
  display: grid; grid-template-columns: calc(2 * var(--c-u) + var(--c-gap)) 1fr; column-gap: var(--c-gap);
  padding: 20px 0; border-top: 1px solid var(--c-hair); align-items: baseline;
}
.prin li:last-child, .spec > div:last-child, .out > div:last-child { border-bottom: 1px solid var(--c-hair); }
.pen, .spec dt, .out dt { font-size: var(--c-t5); color: var(--c-ink3); margin: 0; }
.pko, .spec dd, .out dd { margin: 0; font-size: var(--c-t4); line-height: 1.6; color: var(--c-ink); }
/* 레거시 폼 렌더러(미기입 13편)가 내는 조각 — 규칙이 없으면 브라우저 기본값이 활자 단수를 늘린다 */
.out .ar { padding: 0 8px; color: var(--c-ink3); }
.out .how { display: block; margin-top: 4px; font-size: var(--c-t5); color: var(--c-ink3); }

/* 용어 통일 — 전 N열 → 후 1열 */
.terms { width: var(--c-say); margin: var(--c-s3) 0 0 var(--c-ins); border-collapse: collapse; }
.terms th, .terms td { text-align: left; padding: 18px 0; border-top: 1px solid var(--c-hair); font-weight: 400; }
.terms thead th { border-top: 1px solid var(--c-ink); font-size: var(--c-t6); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink3); padding-bottom: 14px; }
.terms tbody td { font-size: var(--c-t4); color: var(--c-ink2); }
.terms tbody td.to { color: var(--c-ink); }
.terms tbody tr:last-child td { border-bottom: 1px solid var(--c-hair); }

/* 칩 — 「확인한 방법」류. 폭은 글자 길이대로. 등폭 상자는 «일곱이 같은 무게»를 주장한다 */
.chips { width: var(--c-say); margin: var(--c-s2) 0 0 var(--c-ins); display: flex; flex-wrap: wrap; gap: 8px; }
/* ★v2 — 칩은 pill(참조 문법). 표·헤어라인은 여전히 각지다 — 둥근 것은 «표현», 각진 것은 «증거» */
.chips span { display: inline-block; padding: 8px 14px; font-size: var(--c-t5); color: var(--c-ink2);
              box-shadow: inset 0 0 0 1px var(--c-hair); border-radius: var(--r-pill); }

@media (max-width: 1179px) { .prin li, .spec > div, .out > div { grid-template-columns: 160px 1fr; } }
@media (max-width: 767px)  { .prin li, .spec > div, .out > div { grid-template-columns: 1fr; row-gap: 6px; } }

/* 저작 도식 — 넓은 판 / 좁은 판 두 벌(모바일은 축소가 아니라 재저작) */
/* ★★v2 «RIB» 판(2026-07-31) — 옅은 판 + 1.5px 선화 + 프로젝트 액센트 1지목 + 모노 라벨.
   참조(devouringdetails) 실측 **전면 채택**(사용자 결정): 판 라디우스 12 · 획 3종 선언
   {1 구조 / 1.35 노드 원 / 1.5 형태} · 농도 3계단 {.18/.45/1} · 라벨 모노는 라틴 전용.
   형태·색·문구는 복제하지 않는다 — 문법만. 정보는 여기서 지고, 이미지는 근거를 진다. */
.dgm { display: block; background: var(--c-panel); padding: 40px 40px 0; border-radius: var(--r-plate); }
.dgm .dlab { display: block; padding: 26px 0 30px; font-size: var(--c-t6); color: var(--c-ink3p); }
/* 국문 캡션엔 자간·대문자 금지(§5) — 라틴 전용 캡션만 `.dlab-en`으로 모노 등급 */
.dgm .dlab-en { font-family: var(--fmono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.dia { display: block; color: var(--c-ink); }
.dia svg { display: block; width: 100%; height: auto; overflow: visible; }
.dia .d-n { display: none; }
@media (max-width: 767px) { .dgm { padding: 24px 20px 0; } .dgm .dlab { padding: 20px 0 24px; } }
/* ★2026-08-01 — 판 안 캡션(.dlab)을 걷은 편에서 **판의 아래 여백이 함께 사라진다**.
   `.dgm`의 패딩이 `40 40 0`이고 바닥 여백을 .dlab의 padding-bottom이 내고 있었기 때문이다
   (●사용자 적발 «카드 안쪽 아래 여백이 없어졌어»). 캡션이 없는 판만 바닥을 스스로 낸다. */
.dgm:not(:has(.dlab)) { padding-bottom: 40px; }
@media (max-width: 767px) { .dgm:not(:has(.dlab)) { padding-bottom: 24px; } }
/* ★판 전환은 799에서 — 376~767 대역에서 좁은 판(295)이 2배로 «확대»되며 활자 26px가 되던
   결함(크리틱 실측)의 해법 + prose 판이 880(저작 W=800)으로 넓어지며 하한도 올라갔다:
   ≥800이어야 넓은 판 스케일 ≥0.82(활자 10.7). 그 아래는 좁은 판을 375 캡으로 중앙에 둔다. */
@media (max-width: 799px) { .dia .d-w { display: none; } .dia .d-n { display: block; } }
.dia .d-n { max-width: 375px; margin: 0 auto; }
.dia .ln  { stroke: currentColor; stroke-width: 1; opacity: .18; }   /* 구조선 — §2 */
.dia .bx  { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; }  /* 보조 형태 */
.dia .fm  { fill: none; stroke: currentColor; stroke-width: 1.5; }               /* 형태 주선 */
.dia .nd  { fill: var(--c-panel); stroke: currentColor; stroke-width: 1.35; }    /* 노드 펀치아웃 */
.dia .brk path { stroke: currentColor; stroke-width: 1; opacity: .18; }
.dia .acc   { fill: var(--c-acc); }                                  /* 지목 — 면 채움 전용(§4) */
.dia .acc-f { fill: var(--c-acc); stroke: none; opacity: 1; }
/* ★액센트 «활자·선»은 원색이 아니라 잉크화 램프가 진다(§4-2) — 저대비 브랜드색(옐로) 방어.
   ★★`text.acc-t`로 특이성을 올린다 — 클래스 둘(0,2,0) 동률이면 «뒤에 선언된» t-sub/t-krl의
   fill이 이겨서 액센트 라벨이 잉크로 죽는다(크리틱 실측: 의도색 픽셀 0). */
.dia text.acc-t { fill: var(--c-acc-ink, var(--c-acc)); opacity: 1; }
/* ★大타이포 전용 **원색** 등급(2026-08-01 · 사용자 «포인트 컬러가 안 느껴진다») —
   WCAG는 대형 활자(≥24px, 또는 ≥18.66px bold)의 기준이 3:1이라 브랜드 원색이 그대로 선다.
   램프는 작은 활자를 위해 명도를 내린 값이라 «브랜드색»으로는 읽히지 않는다(g11 #006FD5 = 탁한 파랑).
   ⚠`t-num`(30px)에만 붙인다 — 13px에 쓰면 4.5:1을 못 넘는다. 게이트 액센트 예산은 그대로 센다.
   ●g11 #0085FF 판 위 3.29:1 — 대형 기준 통과. 공교롭게도 CS WIND 표준 자신의 정책과 같다
    («#0085FF는 큰 요소·포커스 링, 작은 텍스트는 액션색»). */
.dia text.acc-b { fill: var(--c-acc); opacity: 1; }
.dia .acc-s { stroke: var(--c-acc-ink, var(--c-acc)); }
/* ★저대비 원색 방어 2종(§4-2 보강) — 독립 소형 마크는 원색 단독 금지:
   `acc-i` = 잉크램프 채움(막대·소형 필) · `acc-o` = 원색 채움 + 잉크 링(픽토그램 원) */
.dia .acc-i { fill: var(--c-acc-ink, var(--c-acc)); }
.dia .acc-o { fill: var(--c-acc); stroke: currentColor; stroke-width: 1.35; }   /* 원색+잉크 링 — 데이터 도식에서도 동일 어휘 */
.dia .t-num { font-size: 30px; font-weight: 600; fill: currentColor; letter-spacing: -0.03em; }
/* ★`.t-kr` 규칙이 없어서 도식의 한글 라벨이 **활자 6단 밖**에서 렌더되고 있었다(SVG 기본값).
   게이트의 «활자 단수»는 DOM 텍스트만 세므로 SVG 안은 못 본다 — 죽은 클래스 점검이 잡았다. */
.dia .t-kr  { font-size: 13px; font-weight: 500; fill: currentColor; }
/* ⚠★한 번 지웠다가 되살렸다 — `.t-lab` 규칙이 없으면 브래킷·동사 라벨이 SVG 기본값 16px으로
   렌더돼 **13px 이름보다 커진다**(실제로 그렇게 났다). 클래스를 지울 땐 실물 렌더로 확인할 것.
   ★v2 — `.t-lab`은 **모노·라틴 전용**이 됐다. 한글 라벨은 `.t-kr`/`.t-sub`이 진다(게이트가 잡는다). */
.dia .t-lab { font-family: var(--fmono); font-size: 11px; font-weight: 500; fill: var(--c-ink3p);
              letter-spacing: .08em; text-transform: uppercase; }
/* ★v2 — 보조 활자의 위계는 **농도가 아니라 잉크 토큰**이 진다(.8이 농도 4번째 계단이 되고 있었다 —
   신 게이트가 text까지 재면서 적발). 판 위 ink2 대비 ●5.8:1(흰 판)·8.5:1(먹 판) */
.dia .t-sub { font-size: 13px; fill: var(--c-ink2); }
.dia .t-krl { font-size: 12px; fill: var(--c-ink3p); }   /* 국문 라벨 — 자간·대문자 없음(§5) */

/* ── 9-B. 개념 삽화 `.ill` — 선화 + 해칭 + 지목 1색 + **스크롤 진입 모션** ────
   ★참조(devouringdetails) 실측: 획 1.5 · 원은 판 색으로 채운다 · 해칭 · 액센트 1자리 ·
     모션은 drawPath(stroke-dashoffset) · unclip(와이프) · fade. 스크롤 진입 시 1회.
   ★우리 구현 — 해칭은 `<pattern>`(남의 패스 데이터 복제 0) · 라디우스 0 · 액센트는 사이트 팝.
   ★★모션의 3중 방어: 시작 상태를 **`html.rvon` 안에서만** 준다. JS가 없으면(=`rvon` 미부여)
     삽화는 처음부터 **끝 상태**로 그려지고, `prefers-reduced-motion`·인쇄에서도 끝 상태다. */
.ill { display: block; width: 100%; height: auto; overflow: visible; color: var(--c-ink); }
.ill .st  { stroke: currentColor; stroke-width: 1.5; }
.ill .st2 { stroke: currentColor; stroke-width: 1.5; opacity: .45; }
.ill .gd  { stroke: currentColor; stroke-width: 1; opacity: .18; }
.ill .nd  { fill: var(--c-panel); stroke: currentColor; stroke-width: 1.35; }
/* ★v2 — 획은 선언 집합 {1 / 1.35 / 1.5} 뿐(§2). 옛 2.4(mk)·4.5(core)는 집합 밖이라 폐기 —
   «굵은 표시»는 굵기가 아니라 **리브(1.5px 바 · 3px 피치)**나 채움이 진다. */
.ill .mk  { stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; }
.ill .pn  { fill: var(--c-panel); stroke: currentColor; stroke-width: 1.5; }
.ill .cb line { stroke: currentColor; stroke-width: 1.5; }
.ill .cb.acc-s line { stroke: var(--c-acc-ink, var(--c-acc)); }
/* 액센트 — 채움은 원색(`--c-acc`), 선·활자는 잉크화 램프(`--c-acc-ink`) (§4-2) */
.ill .acc-s  { stroke: var(--c-acc-ink, var(--c-acc)); }
.ill .acc-st { stroke: var(--c-acc-ink, var(--c-acc)); }
.ill text.acc-t { fill: var(--c-acc-ink, var(--c-acc)); }
.ill .acc-i  { fill: var(--c-acc-ink, var(--c-acc)); }
.ill .acc-o  { fill: var(--c-acc); stroke: currentColor; stroke-width: 1.35; }
.ill .acc-f  { fill: var(--c-acc); }
.ill .dt     { fill: currentColor; }
.ill .pn.acc-st { stroke: var(--c-acc-ink, var(--c-acc)); }
.ill .t-lab  { font-family: var(--fmono); font-size: 11px; font-weight: 500; fill: var(--c-ink3p);
               letter-spacing: .08em; text-transform: uppercase; }
/* 국문 라벨 — 자간·대문자 없는 국문 전용 등급(픽토그램·삽화 공용) */
.ill .t-krl  { font-size: 12px; fill: var(--c-ink3p); }

/* 모션 — 시작 상태는 `html.rvon`에서만. 끝 상태는 `.rv.in` 안에서 트랜지션으로 */
/* ★대시 1.03 오버슛 — pathLength=1 렉트가 안착 후 좌상단에 10~15px 노치를 남기는
   스케일 오차 봉합(●검증 크롭 실측). 초과분은 경로 밖이라 안 보인다. */
html.rvon :is(.ill, .dia) .dr  { stroke-dasharray: 1.03; stroke-dashoffset: 1.03; }
html.rvon :is(.ill, .dia) .pop,
html.rvon :is(.ill, .dia) .fd  { opacity: 0; }
/* ★v2 pop = **blur 리빌**(참조 실측: blur 2→0 · scale .98→1) — 팽창이 아니라 초점이 맞는 등장 */
html.rvon :is(.ill, .dia) .pop { transform: scale(.96); filter: blur(2px); transform-box: fill-box; transform-origin: center; }
html.rvon :is(.ill, .dia) .wp  { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
html.rvon :is(.ill, .dia) .sl  { transform: translateY(0); }
html.rvon :is(.ill, .dia) .wpy { transform: scaleY(0); transform-box: fill-box; transform-origin: top center; }
html.rvon .rv.in :is(.ill, .dia) .dr { stroke-dashoffset: 0; transition: stroke-dashoffset 1.05s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
html.rvon .rv.in :is(.ill, .dia) .wpy { transform: none; transition: transform .85s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
html.rvon .rv.in :is(.ill, .dia) .pop { opacity: 1; transform: none; filter: blur(0); transition: opacity .5s ease var(--d, 0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), filter .5s ease var(--d, 0ms); }
html.rvon .rv.in :is(.ill, .dia) .fd  { opacity: 1; transition: opacity .6s ease var(--d, 0ms); }
html.rvon .rv.in :is(.ill, .dia) .wp  { transform: none; transition: transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
html.rvon .rv.in :is(.ill, .dia) .sl  { transform: translateY(var(--ty, 0)); transition: transform .8s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
/* ★`ar` arrive — **감쇠·탄성 도착**(2026-08-01 · 플레이북 §0 격차 2 «모션의 물리성»).
   기존 어휘 다섯은 전부 감속 일변도(.2,.7,.2,1)라 «그려진다»는 있어도 «내려앉는다»가 없었다.
   참조(devouringdetails)의 물리감은 도착에 아주 얕은 오버슛이 있다는 데서 온다 — y>1 제어점이 그것이다.
   판마다 **결론 수치 한 곳**에만 쓴다(지목 예산과 같은 규율 — 남용하면 UI 토스트 톤이 된다).
   ⚠새 클래스라 기존 저작물은 한 픽셀도 바뀌지 않는다 — 어휘를 «더한» 것이지 바꾼 것이 아니다. */
html.rvon :is(.ill, .dia) .ar  { opacity: 0; transform: translateY(7px); transform-box: fill-box; transform-origin: center; }
html.rvon .rv.in :is(.ill, .dia) .ar  { opacity: 1; transform: none;
  transition: opacity .42s ease var(--d, 0ms), transform .78s cubic-bezier(.22,1.34,.36,1) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  html.rvon :is(.ill, .dia) .dr { stroke-dashoffset: 0; }
  html.rvon :is(.ill, .dia) .pop, html.rvon :is(.ill, .dia) .fd { opacity: 1; transform: none; filter: none; }
  html.rvon :is(.ill, .dia) .wp, html.rvon :is(.ill, .dia) .wpy { transform: none; }
  html.rvon :is(.ill, .dia) .ar { opacity: 1; transform: none; }
  html.rvon :is(.ill, .dia) .sl { transform: translateY(var(--ty, 0)); }
  html.rvon .rv.in :is(.ill, .dia) * { transition: none !important; }
}

/* ── 9-C. 픽토그램 카드 `.pcard` — v2 «RIB» §7. DD 챕터 카드 문법(444×320 · 1.39:1) ──
   판(라운드) 중앙에 원시 도형 픽토그램, 좌하단 모노 라벨(DOM — 축소돼도 활자 하한 안전).
   ★카드 안 SVG에는 활자를 넣지 않는다(§5) — 수치·이름은 라벨과 본문이 진다. */
.pcards { display: grid; grid-template-columns: repeat(var(--pc-n, 3), minmax(0, 1fr));
          column-gap: var(--c-gap); row-gap: var(--c-gap); }
.pcard { position: relative; margin: 0; background: var(--c-panel); border-radius: var(--r-plate);
         aspect-ratio: 25 / 18; display: grid; place-items: center; overflow: hidden; }
.pcard svg { width: 82%; height: auto; display: block; overflow: visible; }   /* DD 실측 81% */
/* 단독 와이드 카드 — 한 개념이 카드 하나를 온전히 쓸 때(DD 896×320 대응 · 저작 760×246) */
.pcard.pc-wide { aspect-ratio: 25 / 9; }
.pcard.pc-wide svg { width: 88%; }
/* ★픽토그램 획은 카드 크기와 무관하게 저작값(1.5px)을 유지한다 — 3업·모바일 축소에서
   헤어라인으로 사라지는 것을 막는다(참조는 스케일 ≈1이라 이 문제가 없다) */
.pcard svg line, .pcard svg path, .pcard svg rect, .pcard svg circle { vector-effect: non-scaling-stroke; }
.pcard .plab { position: absolute; left: 16px; bottom: 12px; margin: 0;
               font-family: var(--fmono); font-size: var(--c-t6); font-weight: 500;
               letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink3p); }
.pcard .pkr  { position: absolute; right: 16px; bottom: 12px; margin: 0;
               font-size: var(--c-t6); color: var(--c-ink3p); }
@media (max-width: 767px) { .pcards { grid-template-columns: 1fr; } }

/* ── 10. 영상 ────────────────────────────────────────────────────────────── */
.vid { width: 100%; display: block; background: #000; }
.vidfall { display: none; }
@media (prefers-reduced-motion: reduce) { .vid[autoplay] { display: none; } .vidfall { display: block; } }

/* ── 11. 마감 · 다음 ─────────────────────────────────────────────────────── */
.next { margin-top: var(--c-s5); padding: var(--c-s4) 0; border-top: 1px solid var(--c-ink); }
.nextrow { width: var(--c-cw); margin-left: var(--c-x); display: grid; grid-template-columns: 1fr auto; gap: var(--c-gap); align-items: end; }
.nextk { margin: 0 0 16px; font-size: var(--c-t6); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink3); }
.nexth { margin: 0; font-size: var(--c-t3); line-height: 1.35; font-weight: 600; letter-spacing: -0.028em; max-width: var(--c-col); }
.nextm { margin: 16px 0 0; font-size: var(--c-t5); color: var(--c-ink3); }
.reelback { display: inline-block; margin-top: var(--c-s2); font-size: var(--c-t6); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink3); text-decoration: none; }
.reelback:hover { color: var(--c-ink); }
/* ★썸네일이 없는 편에서는 «회색 와이어프레임»을 두지 않는다 — 문서의 마지막 그림이
   고스트가 되면 그게 마감이 된다(v5 크리틱). 대신 활자 카드로 닫는다. */
.mini { display: block; text-decoration: none; width: calc(4 * var(--c-u) + 3 * var(--c-gap)); }
.mini .win { display: block; box-shadow: inset 0 0 0 1px var(--c-hair); }
.mini .win img { width: 100%; }
.mini .mlab { display: block; margin-top: 14px; font-size: var(--c-t5); color: var(--c-ink); }
.mini .mmeta { display: block; margin-top: 5px; font-size: var(--c-t6); color: var(--c-ink3); letter-spacing: .06em; }
.mini.noart .win { display: grid; place-items: center; aspect-ratio: 16 / 9; }
.mini.noart .win::after { content: attr(data-t); font-size: var(--c-t6); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink3); }
@media (max-width: 767px) { .nextrow { grid-template-columns: 1fr; } .mini { width: 100%; } }

/* ── 12. 등장 모션 — 은은하게. 인쇄에서도 성립한다 ───────────────────────── */
html.rvon .rv { opacity: 0; transform: translateY(10px); }
html.rvon .rv.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
@media (prefers-reduced-motion: reduce) { html.rvon .rv { opacity: 1; transform: none; transition: none; } }

/* ── 12-B. 도판 «닦임» — 전 편 공통 (2026-08-07 사용자 결정) ─────────────
   ★적용 범위 = **`.plate`를 가진 도판 전부**(전 편의 이미지·영상 도판).
     커버(`.covermedia`)와 NEXT 미니(`.win`)는 `.plate`가 아니라 손대지 않는다 —
     커버는 릴↔케이스 뷰 트랜지션이 따로 안무를 갖고 있어서 겹치면 모프가 깨진다.
   ★동작 = 세 박자.
       ① 아무것도 없다 — 지면과 같은 흰 바탕뿐
       ② 이미지가 **위에서 아래로** 닦여 내려온다(장표 헤드라인이 먼저 오므로 읽는 순서와 같다).
          **하이라인도 같은 clip을 받아 이미지와 같이 자란다** — 빈 사각형이 먼저 튀어나오지 않는다
       ③ 캡션·Note가 뒤따라 든다
   ⚠빈 틀의 바탕은 **지면과 같은 흰색**(`--c-bg`)이다. 종전 회색 판(`--c-panel`)은
     «회색 덩어리가 이미지로 바뀐다»로 읽혔다 — 흰색이면 «빈 자리가 채워진다»가 된다.
     (`--c-bg`를 쓰므로 다크 모드에서도 지면색을 따른다.)
   ⚠기존 `.rv`(투명도+이동)를 이 도판에서는 끈다 — 두 모션이 겹치면 «흔들린다».
   ⚠모션 3중 방어는 그대로다: 시작 상태는 `html.rvon` 안에서만 준다(JS 없으면 끝 상태).
   ⚠`:has()` 미지원 브라우저에서는 이 블록이 통째로 무시되고 기본 `.rv` 등장으로 강등된다. */
.fig .plate { overflow: hidden; background: var(--c-bg); }
html.rvon .fig:has(.plate) { opacity: 1; transform: none; }
html.rvon .fig:has(.plate) :is(.plate img, .plate video) {
  clip-path: inset(0 0 100% 0); will-change: clip-path;
}
html.rvon .fig:has(.plate) .plate::after { clip-path: inset(0 0 100% 0); }
html.rvon .fig:has(.plate).in :is(.plate img, .plate video) {
  clip-path: inset(0);
  transition: clip-path .9s cubic-bezier(.2,.7,.2,1) var(--wd, 0ms);
}
html.rvon .fig:has(.plate).in .plate::after {
  clip-path: inset(0);
  transition: clip-path .9s cubic-bezier(.2,.7,.2,1) var(--wd, 0ms);
}
/* n-업 격자 — 칸마다 살짝 시차를 준다(동시에 닦이면 «한 장»으로 읽힌다) */
html.rvon .fig .row .cell:nth-child(2) { --wd: 110ms; }
html.rvon .fig .row .cell:nth-child(3) { --wd: 220ms; }
html.rvon .fig .row .cell:nth-child(4) { --wd: 330ms; }
html.rvon .fig:has(.plate) :is(figcaption, .lab) { opacity: 0; transform: translateY(6px); }
html.rvon .fig:has(.plate).in :is(figcaption, .lab) {
  opacity: 1; transform: none;
  transition: opacity .5s ease .48s, transform .5s ease .48s;
}
@media (prefers-reduced-motion: reduce) {
  html.rvon .fig:has(.plate) :is(.plate img, .plate video) { clip-path: none; will-change: auto; }
  html.rvon .fig:has(.plate) .plate::after { clip-path: none; }
  html.rvon .fig:has(.plate) :is(figcaption, .lab) { opacity: 1; transform: none; }
}

/* ── 13. 작성 모드 고지 (--final 에서 제거된다) ──────────────────────────── */
.slotnote, .pending { width: var(--c-col); margin-left: var(--c-inc); font-size: var(--c-t6); color: var(--c-ink3); }
.sample { color: var(--c-ink3); }

/* ── 13-B. 뷰 전환 옵트인 — v7 재작성 때 누락돼 릴↔케이스 모프가 전량 스킵되고 있었다
   (●검증: 콘솔 "Transition was skipped" · HANDOFF 이슈 A · 규칙 R17 — 옵트인은 양쪽 문서 모두). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── 14. 인쇄 ────────────────────────────────────────────────────────────── */
@media print {
  :root { --c-pad: 0px; --c-max: 100%; --c-t1: 28pt; --c-t2: 20pt; --c-t3: 14pt; --c-t4: 10pt; --c-t5: 8pt; --c-t6: 7pt; --c-s4: 24pt; --c-s5: 28pt; }
  body { background: #fff; color: #000; }
  .rail.side, .top, .next { display: none; }
  /* ★`break-before: page`를 걷었다 — 파트마다 새 쪽을 열면 «머리 + 주장 한 줄»만 실린
     ●잉크 1.0% 쪽이 32쪽 중 2쪽 생긴다(도판이 `break-inside: avoid`로 다음 쪽에 통째로 밀린다).
     인쇄에서 그건 챕터 표지가 아니라 사고로 읽힌다. 대신 파트 머리가 자기 첫 블록과 붙게 한다. */
  .sec { break-inside: auto; }
  .pt { break-after: avoid; }
  .claim { break-after: avoid; }
  /* ★`.row` 통째로 avoid 를 걸면 한 쪽에 안 들어갈 때 **캡션만 다음 쪽에 남는다**
     (●Screens 3-업에서 「Contents」 캡션 한 줄짜리 쪽이 실제로 나왔다).
     쪼개지면 안 되는 단위는 행이 아니라 **칸**이다. */
  .fig, .nums, .prin, .terms, .claim { break-inside: avoid; }
  /* ★도식 판은 세로로 긴 «좁은 판»으로 인쇄된다 — 통째로 avoid 하면 앞 쪽이 주장 한 줄만
     남는 0.7% 쪽이 된다(실측). 판 안에서 쪼개지는 편이 낫다. */
  .fig-dia { break-inside: auto; }
  .row .cell { break-inside: avoid; }
  p { orphans: 2; widows: 2; }
  .band { background: none; color: #000; padding: 12pt 0; }
  html.rvon .rv { opacity: 1; transform: none; }
  html.rvon :is(.ill, .dia) .dr { stroke-dashoffset: 0; }
  html.rvon :is(.ill, .dia) .pop, html.rvon :is(.ill, .dia) .fd { opacity: 1; transform: none; filter: none; }
  html.rvon :is(.ill, .dia) .wp, html.rvon :is(.ill, .dia) .wpy { transform: none; }
  html.rvon :is(.ill, .dia) .sl { transform: translateY(var(--ty, 0)); }
  /* 도판 — 인쇄에서는 끝 상태로(12-B) */
  html.rvon .fig:has(.plate) :is(.plate img, .plate video) { clip-path: none; }
  html.rvon .fig:has(.plate) .plate::after { clip-path: none; }
  html.rvon .fig:has(.plate) :is(figcaption, .lab) { opacity: 1; transform: none; }
}

/* ══ §P — prose 편 (2026-07-31 사용자 결정) ═══════════════════════════════
   텍스트 전용 상세 — 검토 완료 카피(v3)를 무수정으로 흘린다. 참조: rauno.me/craft.
   폼 장치(30px 주장 · 글축 들여쓰기 · 커버 규선)를 쓰지 않는다. 잠금(콘텐츠 880 ·
   Pretendard · radius 0 · 그림자 0 · 지면 무채색)은 그대로다.
   ★본문 축(2026-07-31 2차): 측정폭 640을 콘텐츠 880 «가운데»에 앉힌다 — 880이 뷰포트
     중앙이므로 결과적으로 rauno처럼 화면 중앙 1열이 된다. 네비 잠금(콘텐츠 좌변-94)은
     880 프레임 기준이라 움직이지 않는다. */
body.prose { --c-prose: min(640px, var(--c-cw));
  --c-ax: calc(var(--c-x) + (var(--c-cw) - var(--c-prose)) / 2); }
/* 커버 자식은 .cover 컨테이너가 이미 콘텐츠 좌변(--c-x)을 제공하므로 상대 오프셋만 준다 */
body.prose .kicker, body.prose .ch, body.prose .csum, body.prose .meta {
  width: var(--c-prose); margin-left: calc((var(--c-cw) - var(--c-prose)) / 2); }
body.prose .ch { font-size: var(--c-t2); letter-spacing: -0.02em; }
body.prose .csum { font-size: var(--c-t4); line-height: var(--c-lh); font-weight: 700;
  color: var(--c-ink); margin-top: var(--c-s2); }
body.prose .claim { width: var(--c-prose); margin-left: var(--c-ax);
  font-size: var(--c-t4); line-height: var(--c-lh); font-weight: 700; letter-spacing: -0.006em; }
body.prose .run > p:not(.claim):not(.note) { width: var(--c-prose); margin-left: var(--c-ax); }
body.prose .run > p.note { width: var(--c-prose); margin-left: var(--c-ax); }
body.prose .pt { width: var(--c-prose); margin-left: var(--c-ax); }
body.prose .sname { letter-spacing: .06em; }
/* 간격 규정(2026-07-31 4차 · rauno 실측 이식) — rauno novelty 실측: 문단 8px(행간 0.29배) ·
   그룹 전환 56px의 2단 촘촘 리듬. 한글 17px·keep-all은 문단 식별 단서가 적어 행간 비율 환산
   10~12px를 안전선으로 잡는다(잉크 ~27 = rauno 체감 동일).
   계단(박스): 8(헤딩→본문) < 12(문단·인용) < ~18(라벨→헤딩) < 64(부제→메타 · 구간간) <
   192(커버→본문 · 파트 경계). 구간·파트는 토큰 기반 calc라 375에서 48/112로 비례 축소. */
body.prose .kicker { margin-bottom: var(--c-s1); }
body.prose .meta { margin-top: var(--c-s3); margin-bottom: var(--c-s5); }
body.prose .pt { margin-bottom: 8px; }
body.prose .sec > .pt + .run { padding-top: 0; }   /* 라벨→헤딩 결합 — 기존 +32 패딩 제거 */
body.prose .claim { margin-bottom: 8px; }
body.prose .run > p:not(.claim):not(.note) { margin-bottom: 12px; }
body.prose .run > p:last-child { margin-bottom: 0; }
body.prose .voices { margin-bottom: 12px; }
body.prose .run { padding-top: calc(var(--c-s3) - 12px); }      /* 구간간 = 12 + (64-12) = 64 */
body.prose .sec { padding-top: calc(var(--c-s5) - 12px); }      /* 파트 경계 = 12 + (192-12) = 192 */
/* 구분선 0 — rauno 준거. 커버 규선·파트 상단 검정선·다음 편 상단선을 모두 걷는다 */
body.prose .cover .rule { display: none; }
body.prose .pt { border-top: 0; padding-bottom: 0; }
body.prose .next { border-top: 0; }
/* 스켈레톤 0 — 고스트 커버 와이어프레임을 그리지 않는다(실자산이 오면 coverfig가 다시 선다) */
body.prose .coverfig { display: none; }
/* ★인용 블록 — 첨부 준거(rauno)·2026-07-31 사용자 채택: 본문 흐름 안, 회색 글,
   여는 ❝는 첫 행 왼쪽에 내어걸고 닫는 ❞는 끝에 붙는다. 서체는 잠금대로 Pretendard.
   ⚠쓰임 구분(상설): 「인용」= 이 블록 · 「짧은 메모성 주석」= 우측 회색 소자(사이드노트,
   필요해지는 편에서 .aside로 부활 — 폭 192 · 13px · ink3 · 본문 오른쪽 +48). */
body.prose .voices { width: var(--c-prose); margin: 0 0 12px var(--c-ax);
  padding: 0; list-style: none; }
body.prose .voices li { position: relative; display: block; padding-left: 34px; }
body.prose .voices li::before { content: '\275D'; position: absolute; left: 0; top: 0;
  font-size: var(--c-t4); line-height: var(--c-lh); color: var(--c-ink3); }
body.prose .voices q { display: inline; quotes: none; font-size: var(--c-t4);
  line-height: var(--c-lh); color: var(--c-ink2); }
body.prose .voices q::after { content: ' \275E'; color: var(--c-ink3); }
body.prose .voices .src { display: block; margin-top: 4px; font-size: var(--c-t5);
  line-height: 20.8px; color: var(--c-ink3); }
/* ★인용은 가운데 정렬(2026-08-01 사용자 결정) — 사람이 한 말은 지면 한가운데 세운다.
   ❝ 왼쪽 내어걸기(rauno 준거)를 걷고 인라인으로 되돌린다: 가운데 정렬에서 내어걸기는
   축이 둘이 되어(글은 중앙 ↔ 글리프는 좌변) 어느 쪽도 서지 않는다. 측정폭 640은 그대로다. */
body.prose .voices { text-align: center; }
body.prose .voices li { padding-left: 0; }
body.prose .voices li::before { position: static; margin-right: 6px; }

/* ★v2 «RIB» × prose(2026-07-31 사용자 확정 2차) — 본문은 좁게(640), **판·카드는 넓게(880)**.
   rauno.me/craft/novelty 실측: 본문 672 ↔ 미디어 960(1.43×), 둘 다 중앙 정렬 — 우리 640×1.375=880
   = 콘텐츠 전폭 레지스터 재사용. 판이 본문 좌우로 120px씩 나간다. */
body.prose .fig { width: var(--c-cw); margin-left: var(--c-x); }
body.prose .fig .lab, body.prose .fig figcaption { max-width: min(660px, 100%); }
/* ★시각↔글 간격(2026-07-31 3차 · ●실측 정합) — 판은 자기 문단에 붙는다.
   novelty 글→미디어 20/미디어→글 15 · DD 40/40 대칭 — 우리 한글 17px 척도로 24/32.
   기존 64는 구간 경계(64)와 같은 값이라 판이 «새 구간»처럼 떨어져 읽혔다(실측 적발). */
body.prose .fig { margin-top: 24px; margin-bottom: 32px; }
/* ★구간·파트 경계 calc는 마지막 블록의 +12를 전제한다 — 0으로 지우면 판으로 끝나는
   구간이 52, 파트가 180이 되어 선언(64·192)에 12px씩 미달한다(●검증 실측 6/8 이음매). */
body.prose .fig:last-child { margin-bottom: 12px; }
body.prose .fig figcaption { margin-top: 12px; }   /* 14는 계단 밖 값 — 문단 단(12)으로 */
/* ★★꼬리 = 판에 «딸린» 주석(2026-08-01 사용자 결정 · 간격 통일 세션) ────────────────────
   ●실측 진단: 경계 자체는 균일한데(잉크→잉크 편차 3.6) 지면이 들쭉날쭉해 보인 원인은
   판 아래 붙는 꼬리(캡션·SOURCE·NOTE)의 높이가 0/28/29.5/40.4/60.5/73.5로 제각각이라
   «한 섹션 콘텐츠의 끝»이 어떤 데선 17px 본문이고 어떤 데선 10px 회색 주석이었기 때문이다.
   눈은 회색 주석을 글이 아니라 여백으로 읽는다 → 판 모서리 기준 편차 73.7.
   해법: 캡션·NOTE는 데이터에서 걷고(cases.data.mjs), 남긴 SOURCE 한 줄은 **흐름에서 뺀다**.
   그러면 `.fig` 상자가 판 모서리에서 끝나 경계가 판 기준으로 균일해진다.
   ⚠`position: relative`는 `.fig`에만 준다 — `.plate`·`.pcard`가 이미 각자 기준을 세워
     `.plab`/`.pkr`의 앵커는 바뀌지 않는다(●확인).
   ⚠NOTE를 되살릴 거면 이 규칙을 함께 걷어라 — 두세 줄짜리 꼬리는 흐름 밖에서 다음 구간을
     침범한다(●실측: 1440에서 2곳, 375에서 3곳 겹침). */
body.prose .fig { position: relative; }
body.prose .fig > .lab { position: absolute; top: 100%; left: 0; right: 0; margin-top: 12px; }
/* ★단 «구간 안에서 뒤가 더 있는 판»은 예외 — 흐름 안에 남긴다(2026-08-01 · ●실측 교정).
   흐름 밖으로 빼는 근거는 «경계의 큰 여백(64·192) 위에 얹는다»였다. 뒤에 형제가 있는 판은
   그 여백이 아니라 판→글 32뿐이라, SOURCE가 그 32를 다 먹고 다음 글까지 20.9px만 남겼다
   (●리서치 파트 실측 — 사용자 «간격이 너무 좁다»). 흐름 안에 두면 판 →12→ SOURCE →32→ 글이 선다. */
body.prose .fig:not(:last-child) > .lab { position: static; margin-top: 12px; }
/* 커버 → 본문 시작 — 246으로 벌어져 있던 것을 DD 시트 전환(●100)에 근접시킨다.
   ★첫 파트의 경계 패딩은 커버 마진과 «합산»된다(마진↔패딩 비상쇄 · ●실측 308 적발) —
   첫 파트만 패딩을 걷어 커버 마진 128이 그대로 서게 한다. */
body.prose .csum { margin-top: 24px; }
body.prose .meta { margin-bottom: var(--c-s4); }
body.prose .cover + .sec { padding-top: 0; }
/* ★문서 끝 → 다음 편(2026-08-01 · 같은 세션) — 공용 `.next`는 margin 192 + padding 128 = 320이라
   ●실측 376.8로 사다리(8 < 12 < 64 < 192) 밖에 혼자 서 있었다. 파트 경계와 같은 값으로 내린다:
   마지막 문단의 +12에 180을 얹어 192 — `.sec`의 경계 계산식과 같은 식이다(375에서 100+12=112). */
body.prose .next { margin-top: 0; padding-top: calc(var(--c-s5) - 12px); }