/* 도판의 단일 진실 — 이 파일 하나만 고치면 발행면의 모든 그림이 따라온다.
 *
 * 왜 새 파일인가.
 * 2026-08-08 실측 : site.css 에는 figure 정의가 **한 줄도 없다**. 대신
 * `figure{margin:2.5rem 0}` 과 `figcaption{...}` 이 페이지 인라인 <style> 30곳에,
 * `.prose figure > img{padding:1.5rem}` 이 3곳에 각각 복제돼 있다. tokens.css 머리말이
 * 기록한 폭 토큰 이전의 병 — 같은 숫자가 32곳에 흩어져 하나만 고치면 반쪽만 적용되고,
 * 빌더가 발행 파일의 <head> 를 통째로 복사해 다음 재빌드에 옛 값이 되살아나던 — 과
 * 정확히 같은 상태다. 표·차트·도식 규격을 새로 세우는 지금이 이 병을 도판으로
 * 옮기지 않을 유일한 기회라서, tokens.css 가 폭에 대해 한 일을 도판에 대해 그대로 한다.
 *
 * 링크 순서 — site.css 뒤에 온다. 도판 규칙이 사이트 기본값을 덮어야 하기 때문이다.
 *   <link rel="stylesheet" href="{상대경로}/assets/site.css?v=...">
 *   <link rel="stylesheet" href="{상대경로}/assets/figures.css?v=20260808m">
 *
 * ★ 이 파일을 고치면 **같은 회차에** 링크하는 표면 전부의 토큰을 올린다. 한쪽만 올리면
 *   이미 방문한 브라우저가 옛 스타일을 계속 본다 — 이 리포의 알려진 함정이다.
 *   토큰을 갖는 자리는 **셋이다** [2026-08-09 재측]. 실측으로 세어 둔다 :
 *     ① 이 주석  ② scripts/build_page.py 의 FIGURES_CSS_V  ③ 03-시각-규격.md §4-1 예시
 *                                          (발행면 index.html 은 ②가 찍는다)
 *   앞선 판이 적어 둔 ④ _dia-try.html · ⑤ _style-try.html 은 **이 리포에 없다**
 *   (2026-08-09 `find` 로 확인 — 0건). 없는 자리를 목록에 두면 다음 회차가 그 둘을
 *   찾다가 못 찾고 「어차피 다 못 찾는 목록」으로 취급한다. 지우고 셋으로 줄인다.
 *
 * 현재 토큰 : v=20260815a  (2026-08-15 회차 — §10-3-b 계보 갈래 신설 · 좌표 클래스를
 *                            .fig--run 에서 .fig 로 넓힘. 기존 15편 렌더값 무변화)
 *
 * 고칠 때 지킬 것.
 * 1. **발행본 15편과 시각적으로 동일해야 한다.** §1 승계 블록의 값은 인라인에서 그대로
 *    옮겨 온 것이다. 숫자를 바꾸면 이미 나간 15편이 같이 바뀐다. 바꾸려면 그건 도판
 *    작업이 아니라 사이트 개편이다.
 * 2. **자료 페이지의 `table` 을 건드리지 않는다.** series 아래 sources/research 에 이미
 *    전면 괘선 표가 있고(폭 넓은 자료면용) 이 파일의 표 규격과 다르다. 그래서 이 파일의
 *    표 규칙은 전부 `.fig--table` 안에만 건다. 벌거벗은 `table` 선택자를 쓰지 않는다.
 * 3. **hex 는 여기에만 둔다.** 발행 HTML 안에 색값을 쓰지 않고, 도판 마크업에
 *    `style=` 속성을 한 건도 두지 않는다(회차 차트의 점 위치까지 §7 의 좌표 클래스로 준다).
 * 4. **다크 모드 값을 지어내지 않는다.** §9 참조.
 *
 * 근거 — 색은 `../../2026.08.07 유니버스 시리즈00/03-시각-규격.md`.
 * 안료 6색은 관측소 설계 노트 v4 의 저채도 안료 대역을 상속해 dataviz validator
 * (채도 하한 0.10 · 인접 정상시 ΔE ≥15 · 인접 CVD ΔE ≥8)로 재보정한 값이고,
 * 종이(#f3f3ef)·면(#fbfbf8) 두 표면 모두에서 전 검사 PASS 를 실행으로 확인했다.
 */

/* ══════════════════════════════════════════════════════════════════
   1. 승계 — 발행본 15편이 이미 쓰고 있는 값. 한 글자도 바꾸지 않았다.
      새 페이지는 인라인 <style> 의 아래 여덟 규칙을 지우고 이 파일을 링크한다.
   ══════════════════════════════════════════════════════════════════ */

/* 이미지는 그림자로 띄우지 않고 1px 선으로 종이 위에 얹는다 */
figure { margin: 2.5rem 0 }
figure img { display: block; width: 100%; border: 1px solid var(--rule) }
/* 정사각에 가까운 미디어는 폭 상한을 인라인으로 걸고(빌드 시점) 가운데 정렬한다 */
figure img.tall { margin-inline: auto }
/* 캡션은 가운데. 본문이 왼쪽 정렬이라 그림에 딸린 설명임이 한눈에 구분된다 */
figcaption {
  margin-block-start: .75rem;
  color: var(--ink-muted);
  font-size: .875rem;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}
.prose figure > img { padding: 1.5rem; background: var(--surface) }
.prose .slides__strip img { padding: 1.5rem; background: var(--surface) }
@media (max-width: 34rem) {
  .prose figure > img { padding: .75rem }
  .prose .slides__strip img { padding: .75rem }
}

/* ══════════════════════════════════════════════════════════════════
   2. 토큰 — 도판이 쓰는 모든 값. 마크업에는 hex 가 없다.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* 계열색 6슬롯. 순서가 곧 배정 순서다 — 앞에서부터 쓴다.
   * mauve · sage · indigo · clay · verdigris · brick
   * 이 순서는 발명이 아니라 720개 순열 중 인접 CVD 여유가 가장 큰 배열이다
   * (원안 clay 시작은 인접 deutan ΔE 8.1 로 목표선 8.0 바로 위, 이 배열은 10.3).
   * ★ 앞 3슬롯(c1~c3)만 all-pairs 로도 통과한다 — 한 도판에 동시에 쓰는 계열색은 3까지.
   *   c4 를 앉히는 순간 clay↔sage 가 protan ΔE 3.1 로 무너진다(실행 확인).
   * ★ 코발트(--accent #2457d6)는 이 목록에 없다. 상호작용(선택·링크) 전용이다. */
  --fig-c1: #8f5281;  /* mauve      L .526  C .103  코발트와 ΔE 19.8 */
  --fig-c2: #528347;  /* sage       L .560  C .103  코발트와 ΔE 28.0 */
  --fig-c3: #6d87c8;  /* indigo     L .631  C .103  코발트와 ΔE 16.1 — 여섯 중 가장 가깝다 */
  --fig-c4: #a77e34;  /* clay       L .619  C .104  코발트와 ΔE 32.7 */
  --fig-c5: #0195a1;  /* verdigris  L .611  C .104  코발트와 ΔE 20.4 */
  --fig-c6: #ad604f;  /* brick      L .574  C .104  코발트와 ΔE 28.9 */

  /* 무분류·문맥. 카테고리 슬롯이 아니라 de-emphasis 색이다.
   * 안료와 짝지어 두 계열로 쓰면 무너진다 — verdigris 와 protan ΔE 2.7. */
  --fig-neutral: #888884;

  /* ── 라벨 전용 색 ──────────────────────────────────────────────
   * 열 머리·행 머리·칸 머리가 쓴다. **데이터 마크에는 절대 쓰지 않는다.**
   *
   * 왜 계열색을 안 쓰나 : 라벨은 데이터가 아니다. 계열색을 라벨에 주면
   * 읽는 사람이 그 색을 계열 표시로 읽고, 실제 계열이 등장했을 때 충돌한다.
   * 코발트를 데이터 팔레트에서 빼 상호작용 전용으로 돌린 것과 같은 처분이다 —
   * 이번엔 라벨 자리를 하나 예약한다.
   *
   * 왜 이 값인가 : 라벨은 micro 대문자라 **텍스트 대비 4.5:1** 이 필요하다.
   * verdigris 원색 #0195a1 은 3.48:1 로 미달이고, indigo #6d87c8 은 3.40:1 로 미달이다.
   * 같은 색조의 어두운 끝 #05585f 는 7.89:1 로 여유 있게 통과한다(실측).
   *
   * 서열 램프의 가장 어두운 단과 값이 같다. 램프는 셀을 채우는 **면**이고
   * 라벨은 micro 대문자 **글자**라 화면에서 섞이지 않는다. 다만 한 도판이
   * 서열 램프와 색 라벨을 **함께** 쓰면 그때는 라벨을 잉크로 내린다. */
  --fig-label: #05585f;

  /* 서열 램프 — verdigris 한 색조. 3단은 앞 세 값, 4단은 네 값을 그대로 쓴다.
   * --ordinal 검사(명도 단조·인접 ΔL ≥.06·밝은 끝 대비·단일 색상) 전부 PASS. */
  --fig-ramp-1: #68b2bb;
  --fig-ramp-2: #49939c;
  --fig-ramp-3: #27757e;
  --fig-ramp-4: #05585f;
  /* 3단으로 쓸 때 : ramp-1 · #38848c · ramp-4 */
  --fig-ramp-3a: #38848c;

  /* 사이트 토큰 참조 + 폴백. 페이지가 tokens.css 만 링크하고 site.css 를 링크하지
   * 않는 경우가 12건 있어(자료·슬라이드 면) 색 토큰이 그 페이지 인라인에만 있다.
   * 폴백이 없으면 그 면에서 도판이 색을 잃는다. */
  --fig-ink:       var(--ink, #17181a);
  --fig-ink-mute:  var(--ink-muted, #5e6065);
  --fig-ink-faint: var(--ink-faint, #686a6f);
  --fig-rule:      var(--rule, #cfcfc8);
  /* ★ 지금 이 파일에서 **쓰이는 자리가 없다.** 본인 지시(굵은선 없음)로 표 머리 아래와
   * 양식 도식 테두리에서 차례로 걷어냈다. 정의만 남겨 두는 것은 사이트 토큰과의
   * 배선을 기록하기 위해서지 다시 쓰라는 뜻이 아니다 — 새 형태에 이 값을 넣기 전에
   * 왜 옅은 선으로는 안 되는지를 먼저 적는다. */
  --fig-rule-hard: var(--rule-strong, #17181a);
  --fig-surface:   var(--surface, #fbfbf8);

  /* 조판 */
  --fig-pad: var(--space-6, 1.5rem);
  --fig-pad-narrow: var(--space-3, .75rem);
  --fig-micro: var(--micro, .6875rem);
  --fig-body: .9375rem;
  --fig-body-narrow: .875rem;
}

/* ══════════════════════════════════════════════════════════════════
   3. 골격 — 다섯 형태가 공유한다.
      .fig__frame 은 발행본 `figure img` 처리를 그대로 승계한다.
      그려진 도판과 사진 도판이 같은 선반 위에 얹히게 하는 것이 이 블록의 전부다.
   ══════════════════════════════════════════════════════════════════ */

.fig { margin-block: var(--space-10, 2.5rem) }

.fig__frame {
  padding: var(--fig-pad);
  background: var(--fig-surface);
  border: 1px solid var(--fig-rule);
  /* 그림자 0 · 둥근 모서리 0 — 사이트는 선만 쓴다 */
}
@media (max-width: 34rem) { .fig__frame { padding: var(--fig-pad-narrow) } }

/* 도판 안의 모든 글자는 HTML 텍스트다. 이미지에 굽지 않고 SVG <text> 도 쓰지 않는다.
 * 근거는 사이트가 배너에서 이미 세운 규범 — 「글자가 선택·검색되고 확대해도
 * 깨지지 않으며」. 부수 효과로 한글 word-break:keep-all 이 그대로 걸린다. */
.fig__frame { word-break: keep-all; overflow-wrap: break-word }

/* 화면 낭독기에만 읽히는 보조 문구. .skip 과 같은 기법을 쓴다. */
.fig-sr { position: absolute; left: -9999px }

/* 값이 없는 자리는 빈칸이 아니라 표시된 부재다.
 * 「결측이 아니라 측정된 부재」 — 관측소 설계 노트 v4.1 에서 상속한 원리이고,
 * 이 한 줄이 이 파일에서 가장 자주 쓰이는 규칙이다. */
.fig .absent { color: var(--fig-ink-faint) }

/* 수치 칸 */
.fig .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* 라벨 — 칸 도식의 칸 머리·분기 도식의 좌우 머리·다이어그램의 이름표.
 *
 * 표의 두 머리와 **같은 규격**을 쓴다 [본인 지시 2026-08-08].
 * 원래는 사이트의 micro 딱지 규격(.meta-label)을 물려받았는데, 그 규격의 두 장치가
 * 한국어에서 무효이거나 역효과다(§4 열 머리 주석 참조). 형태가 달라도 「이건
 * 라벨이다」라는 신호는 한 가지여야 하고, 그 한 가지는 **색과 굵기**다.
 *
 * 자간은 `normal` 이 아니라 **`inherit`** 이다 [2026-08-08 정정]. 둘 다 「확장하지
 * 않는다」는 지키지만 같은 값이 아니다 — 본문은 -.005em 을 쓰고 `normal` 은 그것을
 * 끊어 0 으로 돌린다. 실측에서 `.k`·열 머리는 normal, 행 머리는 -0.085px 로 갈려
 * 있었다. 눈에는 안 보이지만(20자에 1.7px) **「두 머리는 같은 규격」이라는 §4 의
 * 선언이 실행기에서 거짓이었다.** 「본문 계열 서체·크기」[본인 지시]를 글자대로
 * 집행하면 답은 본문값 승계다. 지우지 않고 `inherit` 을 적어 두는 것은, 이 자리에
 * micro 딱지 자간(.09em)을 다시 넣지 말라는 기록을 남기기 위해서다. */
.fig .k {
  font-family: var(--font-body);
  font-size: var(--fig-body);
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--fig-label);
  line-height: 1.5;
}

/* 계열 좌막대는 **쓰지 않는다** [본인 지시 2026-08-08 「왼쪽 세로선 장식 없도록」].
 *
 * 한 회차 앞서 칸 도식에서 걷어냈고(§5), 이번에 분기 도식에서도 걷었다. 두 번 다
 * 같은 진단이었다 — 막대가 가른 두 무리는 글자가 이미 「급한 것 / 위험한 것」으로
 * 갈라 놓은 것이라, 색은 아무 새 정보도 싣지 않으면서 계열이라는 주장만 더했다.
 * 남은 자리가 없으므로 규칙 자체를 지운다. 눌러 두는 override 를 쌓으면 다음
 * 회차가 s1 을 다시 붙이고 「왜 색이 안 나오지」로 시작한다.
 *
 * 회차 차트의 `.dot.s1/.s2`(§7)는 남는다 — 그쪽은 장식이 아니라 **계열이 둘일 때의
 * 데이터색**이고, 반드시 각 계열을 직접 라벨한다는 조건이 붙어 있다. */

/* ══════════════════════════════════════════════════════════════════
   4. 대조표 .fig--table — 항목 대 항목. 이 블로그에서 가장 많이 쓰인다.
      세로선·색면·zebra 전면 금지. 사이트는 선만 쓴다.
   ══════════════════════════════════════════════════════════════════ */

.fig--table table { width: 100%; border-collapse: collapse }

/* 열 머리 — 표 위쪽 한 줄. **행 머리와 같은 규격을 쓴다** [본인 지시 2026-08-08].
 *
 * 처음에는 사이트의 micro 딱지 규격(.meta-label)을 그대로 물려받았는데, 그 규격이
 * 담아 온 것은 「Essay」·「시리즈 04」·「생각의 기록」 같은 **6자 이하 딱지**다.
 * 거기에 「그 답변이 정한 것」 같은 문장 조각을 넣으면 두 장치가 어긋난다 —
 * `text-transform: uppercase` 는 한국어에 **아무 효과가 없고**,
 * `letter-spacing: .09em` 는 라틴 대문자를 읽히게 하는 장치라 한국어에서는
 * **글자만 성기게** 만든다. 핵심 장치 하나는 무효, 하나는 역효과였다.
 *
 * 그래서 한 표 안에서 두 머리가 만나는 자리는 규격을 하나로 맞춘다.
 * 딱지 규격은 짧은 딱지에만 남긴다(칸 도식의 `.k` 는 그대로 쓴다 — 그쪽은
 * 슬롯마다 라벨이 하나뿐이라 두 축이 만나지 않는다).
 *
 * 자간은 `inherit` 이다 — 사유는 §3 `.k` 주석에 한 번만 적었다. 요지는 하나다 :
 * **「같은 규격」이라고 선언한 두 머리가 실행기에서 실제로 같아야 한다.** */
.fig--table thead th,
.fig--table th[scope="col"] {
  font-family: var(--font-body);
  font-size: var(--fig-body);
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--fig-label);
  text-align: start;
  padding: 0 0 .7rem;
  /* 굵은선 없음 [본인 지시] — 머리라는 신호는 색·굵기·자리가 이미 준다 */
  border-block-end: 1px solid var(--fig-rule);
}

/* 행 머리 — 표 왼쪽 열. `<th scope="row">` 로 적으면 여기에 걸린다.
 *
 * 왜 열 머리와 다르게 두나 : 행 머리는 한국어 구절이 들어와 길다. 대문자 변환과
 * 자간 확장은 라틴 micro 라벨용이라 한국어에서는 글자만 성기게 만든다. 그래서
 * 색과 굵기로만 구분하고 서체·크기는 본문 계열을 유지한다. 오른쪽 실선 한 줄이
 * 열 머리의 아래 실선과 짝을 이뤄, 두 머리가 만나는 왼쪽 위가 표의 원점이 된다. */
/* 행 머리 — 표 왼쪽 열. `<th scope="row">` 로 적으면 여기에 걸린다.
 * 열 머리와 같은 서체·크기를 쓴다(위 주석). 다른 것은 굵기가 아니라 자리뿐이다. */
.fig--table tbody th,
.fig--table th[scope="row"] {
  color: var(--fig-label);
  font-weight: 600;
  font-size: var(--fig-body);
  line-height: 1.6;
  text-align: start;
  vertical-align: top;
  /* 세로선 없음 · 들여쓰기 없음 [본인 지시]. 오른쪽 여백은 아래 열 간격 규칙이 준다 */
  padding: .7rem 0;
  border-block-end: 1px solid var(--fig-rule);
  white-space: normal;
  word-break: keep-all;
}

/* 두 머리가 만나는 왼쪽 위 모서리 — 비운다. 선도 글자도 넣지 않는다 */
.fig--table thead th:first-child:empty { border-inline-end: 0 }
.fig--table td {
  padding: .7rem 0;
  border-block-end: 1px solid var(--fig-rule);
  vertical-align: top;
  font-size: var(--fig-body);
  line-height: 1.6;
}

/* 열 사이 간격은 **앞 열의 오른쪽 여백**으로만 만든다 [본인 지시 2026-08-08].
 *
 * 뒤 열에 왼쪽 들여쓰기를 주면 그 열의 머리와 칸이 함께 밀릴 것 같지만 그렇지 않다.
 * 열 머리는 자기 규격의 여백을 쓰고 데이터 칸은 이 규칙의 여백을 써서, 한 열 안에서
 * 머리와 칸의 왼쪽 선이 어긋난다(실측 — F4 「내가 하는 것」 머리와 그 아래 칸).
 * 행 머리가 있는 표에서는 이미 이렇게 하고 있었다 — 위 `tbody th` 주석이 「데이터
 * 칸에 왼쪽 여백을 또 주면 간격이 두 겹이 된다」로 적어 둔 그 판단이다. 열 머리만
 * 있는 표에만 옛 방식이 남아 있었던 것이라, 예외를 없애고 하나로 맞춘다. */
.fig--table th:not(:last-child),
.fig--table td:not(:last-child) { padding-inline-end: 2rem }

/* 마지막 행은 선으로 닫지 않는다 [본인 지시 2026-08-08].
 *
 * 앞 회차 주석은 「표가 선으로 닫힌다」를 근거로 이 선을 남겨 뒀었다. 그런데 같은
 * 파일의 두 줄 변형(§4-b)은 처음부터 마지막 선을 지우고 있었다 — 같은 표가 마크업에
 * 따라 다르게 닫히고 있었던 것이다. 닫는 일은 도판 테두리가 이미 한다. */
.fig--table tbody tr:last-child > * { border-block-end: 0 }

/* 3열일 때 셋째 열이 수치·부재·짧은 상태 라벨이면 오른쪽으로 붙인다 */
.fig--table td.num,
.fig--table th.num { text-align: end }

@media (max-width: 34rem) {
  .fig--table td { font-size: var(--fig-body-narrow) }
  .fig--table th:not(:last-child),
  .fig--table td:not(:last-child) { padding-inline-end: 1rem }
}

/* ══════════════════════════════════════════════════════════════════
   5. 칸 도식 .fig--slots — 값이 아니라 그릇이 주제일 때.
      간격 자체가 1px 격자선이 된다(테두리를 그리지 않는다).
   ══════════════════════════════════════════════════════════════════ */

.fig--slots .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--fig-rule);
}
.fig--slots .slot {
  background: var(--fig-surface);
  padding: .75rem .9rem;
  display: grid;
  gap: .35rem;
  align-content: start;
}
.fig--slots .slot .b {
  font-size: var(--fig-body-narrow);
  line-height: 1.65;
  color: var(--fig-ink);
}
/* 계열 좌막대는 §3 에서 규칙째로 지웠다 — 여기 눌러 두던 override 도 함께 없앤다.
 * 칸을 가르는 것은 1px 격자선이 이미 한다.
 * ≤34rem 에서 auto-fit 이 스스로 1열로 접힌다 — 추가 규칙이 필요 없다 */

/* ══════════════════════════════════════════════════════════════════
   6. 분기 도식 .fig--fork — 하나가 둘로 갈리거나 둘이 각각 다른 곳으로 갈 때.
      줄과 줄을 잇는 선·화살표·괄호를 절대 그리지 않는다.
      붙이지 않는 것 자체가 이 형태의 논지이고, 형태가 집필 상한을 집행한다.
   ══════════════════════════════════════════════════════════════════ */

.fig--fork { --fig-arrow: "\2192" }          /* → */
.fig--fork .row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 1rem;
  align-items: start;
  padding: .75rem 0;
  border-block-end: 1px solid var(--fig-rule);
}
/* ★ `:last-child` 가 아니라 `:last-of-type` 이다. 주석(<p>)이 뒤에 붙는 순간
 * 마지막 행은 더 이상 프레임의 마지막 자식이 아니고, 그러면 이 규칙이 통째로
 * 빗나가 행의 아래 선이 남는다. 그 선과 주석의 위 선이 겹쳐 **선 두 겹 사이에
 * 빈 띠**가 생긴다(실측 2026-08-08 F11 : 18px). 기하 검사기도 못 잡았다 —
 * 프레임 안쪽 여백은 대칭인 채로 안쪽에서만 벌어지기 때문이다.
 * 행은 div, 띠는 p 라 of-type 이 「마지막 행」을 정확히 가리킨다. */
.fig--fork .row:last-of-type { border-block-end: 0; padding-block-end: 0 }
/* ★ 위 줄의 짝이다. 여기도 `:first-child` 가 아니라 **`:first-of-type`** 이어야 한다
 * [2026-08-09 정정]. 위 규칙이 주석(<p>) 때문에 빗나가던 것과 **같은 사고가 머리
 * 쪽에서 대칭으로 일어난다** — `.fig__head` 가 붙는 순간 첫 행은 더 이상 프레임의
 * 첫 자식이 아니라서 이 규칙이 통째로 빠지고, 첫 행이 자기 위 여백 .75rem 을 되찾는다.
 * 그러면 머리→도형 간격이 1.15+0.75=1.9rem, 도형→주석 간격이 1.15rem 으로 갈린다.
 *
 * 기하 검사기가 못 잡는다. 검사 2는 `.fig__head` 의 margin-block-end 와 `.fig__note`
 * 의 margin-block-start 를 **계산값으로** 비교하는데 둘 다 1.15rem 이라 통과하고,
 * 검사 1은 프레임 안쪽 위아래 여백을 재는데 그건 프레임 padding 이라 대칭인 채다.
 * 벌어지는 곳은 그 안쪽이다 — §6 의 `:last-of-type` 주석이 「기하 검사기도 못 잡았다」
 * 로 적어 둔 것과 정확히 같은 자리이고, 그때 아래쪽만 고치고 위쪽을 안 고쳤다.
 * 실측 2026-08-09 : 머리가 있는 분기 도식 다섯(1편 F4·F7·F9·F11·F13)에서 12px 차. */
.fig--fork .row:first-of-type { padding-block-start: 0 }
/* 화살표는 **첫 줄에 선다.** 행 세로 중앙에 두면 좌우 글이 길어질수록 어느
 * 줄과도 안 맞는 자리로 내려간다(실측 2026-08-08 : 첫 줄에서 13~21px 아래).
 * 「A 화살표 B」는 한 줄에서 읽히는 말이라, 화살표가 그 한 줄을 벗어나면
 * 잇는 기호가 아니라 두 덩어리 사이에 뜬 장식이 된다.
 *
 * 서체도 본문 계열로 되돌렸다. mono 화살표는 폭이 고정이라 글자 사이에서
 * 혼자 성기게 앉는다. 크기·줄높이를 좌우 첫 줄과 같은 값으로 맞춰 세 조각이
 * 같은 줄상자에 놓이게 한다. */
.fig--fork .row::before {
  content: var(--fig-arrow);
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  font-family: var(--font-body);
  font-size: var(--fig-body);
  line-height: 1.5;
  color: var(--fig-ink-faint);
}
.fig--fork .a { grid-column: 1 }
.fig--fork .b { grid-column: 3 }
.fig--fork .a, .fig--fork .b { display: grid; gap: .3rem }
.fig--fork .t { font-size: var(--fig-body); line-height: 1.6 }

@media (max-width: 34rem) {
  /* 1열로 접고 잇는 글자를 아래 방향으로 바꾼다. 마크업은 그대로다.
   * ::before 는 소스 순서상 첫 자식이라 자동 배치에 맡기면 원인 칸 위에 선다.
   * order 로만 순서를 바로잡는다 — 마크업에 손대지 않기 위해서다. */
  .fig--fork { --fig-arrow: "\2193" }        /* ↓ */
  .fig--fork .row { grid-template-columns: 1fr; gap: .4rem }
  .fig--fork .row::before {
    grid-column: 1; grid-row: auto; justify-self: start; order: 2;
    align-self: auto;
  }
  .fig--fork .a { grid-column: 1; order: 1 }
  .fig--fork .b { grid-column: 1; order: 3 }
  .fig--fork .t { font-size: var(--fig-body-narrow) }
}

/* ══════════════════════════════════════════════════════════════════
   7. 회차 차트 .fig--run — 같은 자로 잰 같은 계열이 회차를 따라 움직인 방향.
      막대가 아니라 가로 점 눈금이다. 0에서 시작하지 않으므로 막대는 거짓말이 된다.
   ══════════════════════════════════════════════════════════════════ */

/* ★ 격자는 행마다 따로 서면 안 된다. 행별 grid 로 짜면 라벨 길이에 따라 트랙 폭이
 * 행마다 달라지고, 그러면 같은 눈금처럼 보이는 세 줄이 실제로는 서로 다른 자로 잰
 * 그림이 된다(실측 — 행별 grid 에서 트랙 폭 428.3 / 321.8 / 424.5px).
 * 그래서 격자는 .runwrap 하나에만 서고 각 행은 display:contents 로 그 안에 흩어진다. */
.fig--run .runwrap {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr auto;
  gap: .9rem 1rem;
  align-items: center;
}
.fig--run .row { display: contents }
.fig--run .lab { font-size: var(--fig-body); line-height: 1.45 }
.fig--run .track {
  position: relative;
  height: 1px;
  background: var(--fig-rule);
  align-self: center;
}
.fig--run .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fig-body-narrow);
}
.fig--run .dot {
  position: absolute;
  top: 50%;
  left: calc((var(--xt, 0) + var(--xu, 0)) * 1%);
  translate: -50% -50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fig-neutral);
  box-shadow: 0 0 0 2px var(--fig-surface);
}
/* 색 0종이 기본이다. 요점 행만 잉크로 올린다 — 계열이 아니라 강조다. */
.fig--run .is-lead .dot { background: var(--fig-ink) }
.fig--run .is-lead .lab,
.fig--run .is-lead .v { color: var(--fig-ink) }
/* 회차 차트의 왼쪽 라벨은 **행 머리**다 — 표의 행 머리와 같은 색을 준다.
 * 오른쪽 값(.v)은 데이터라 잉크로 남긴다. */
.fig--run .lab { color: var(--fig-label) }
.fig--run .v { color: var(--fig-ink-mute) }
/* 계열이 둘일 때만 안료를 쓰고, 반드시 각 계열을 직접 라벨한다(레전드 상자 금지) */
.fig--run .dot.s1 { background: var(--fig-c1); box-shadow: 0 0 0 2px var(--fig-surface) }
.fig--run .dot.s2 { background: var(--fig-c2); box-shadow: 0 0 0 2px var(--fig-surface) }

/* 눈금 — **점과 같은 좌표계에 선다** [본인 지시 2026-08-08 「7.0도 추가 · 6, 7, 8」].
 *
 * 처음 판은 양 끝값 둘을 `space-between` 으로 밀어 놓은 것이었다. 끝값만 있을 때는
 * 맞지만 눈금이 셋이 되는 순간 틀린다 — 가운데 눈금이 자기 값의 자리가 아니라
 * 「가운데」에 서기 때문이다. 축이 6.0~9.0 이면 8 은 66.7% 지 50% 가 아니다.
 * 그래서 눈금도 점과 같은 xt/xu 좌표를 쓴다. 라벨이 곧 위치가 된다.
 *
 * 값은 소수점 없이 적는다 — 눈금은 축을 읽는 자이고, 소수 둘째 자리는 오른쪽
 * 값(.v)이 이미 말한다. 두 곳이 같은 정밀도로 적히면 어느 쪽이 자인지 흐려진다. */
/* ★ 높이는 **자기 줄높이와 같은 값**으로 잡는다. 눈금 라벨이 absolute 라 부모
 * 높이에 기여하지 않기 때문에, 부모 높이를 따로 적으면 그 값이 라벨보다 작아도
 * 아무도 말해 주지 않는다. 실측 2026-08-08 : 박스 12px 에 라벨 20px 이라 7px 이
 * 밖으로 나갔고, 바로 아래 주석의 구분선을 그만큼 침범했다 — 화면에서 6·7·8·9 가
 * 가로선에 걸쳐 보이던 것이 그것이다.
 * line-height 와 block-size 에 같은 값을 쓰면 라벨 줄상자와 박스가 정확히 같아진다.
 * 폰트 크기를 나중에 바꿔도 둘이 함께 움직이므로 이 어긋남이 되살아나지 않는다. */
.fig--run .scale {
  position: relative;
  grid-column: 2;
  line-height: 1.5;
  block-size: 1.5em;
  margin-block-start: .1rem;
  font-family: var(--font-mono);
  font-size: var(--fig-micro);
  color: var(--fig-ink-faint);
}
.fig--run .scale > * {
  position: absolute;
  top: 0;
  line-height: inherit;
  left: calc((var(--xt, 0) + var(--xu, 0)) * 1%);
  translate: -50% 0;
}

/* 점과 눈금의 가로 위치. 인라인 style 을 쓰지 않기 위한 좌표 클래스다.
 * 십의 자리 .xt0~.xt10 (10% 눈금) + 반올림 자리 .xu0~.xu19 (0.5% 눈금)를 겹쳐
 * 0~100% 를 0.5% 해상도로 덮는다. 규칙 31개로 201개 위치가 나온다.
 *
 * 축은 6.0~9.0 이다. 값 v 의 자리는 (v-6)/3 × 100% 이고, 0.5% 는 0.015점에 해당한다.
 * 3분할이라 눈금 7·8 은 격자에 정확히 떨어지지 않아 33.5% · 66.5% 로 앉는다
 * (참값 33.33 · 66.67, 어긋남 0.17% — 600px 트랙에서 1px). 이 어긋남은 눈금과 점에
 * **똑같이** 걸리므로 8 눈금과 8.00 점은 서로 어긋나지 않는다. 둘 다 xt6 xu13 이다.
 *   보기 : 8.00 → xt6 xu13 · 7.25 → xt4 xu3 · 6.12 → xt0 xu8 */
.fig .xt0{--xt:0}   .fig .xt1{--xt:10}  .fig .xt2{--xt:20}
.fig .xt3{--xt:30}  .fig .xt4{--xt:40}  .fig .xt5{--xt:50}
.fig .xt6{--xt:60}  .fig .xt7{--xt:70}  .fig .xt8{--xt:80}
.fig .xt9{--xt:90}  .fig .xt10{--xt:100}
.fig .xu0{--xu:0}    .fig .xu1{--xu:.5}  .fig .xu2{--xu:1}
.fig .xu3{--xu:1.5}  .fig .xu4{--xu:2}   .fig .xu5{--xu:2.5}
.fig .xu6{--xu:3}    .fig .xu7{--xu:3.5} .fig .xu8{--xu:4}
.fig .xu9{--xu:4.5}  .fig .xu10{--xu:5}  .fig .xu11{--xu:5.5}
.fig .xu12{--xu:6}   .fig .xu13{--xu:6.5}.fig .xu14{--xu:7}
.fig .xu15{--xu:7.5} .fig .xu16{--xu:8}  .fig .xu17{--xu:8.5}
.fig .xu18{--xu:9}   .fig .xu19{--xu:9.5}

@media (max-width: 34rem) {
  /* 라벨을 트랙 위 줄로 올린다 */
  .fig--run .runwrap { grid-template-columns: 1fr auto; gap: .35rem 1rem }
  .fig--run .lab { grid-column: 1 / -1; font-size: var(--fig-body-narrow) }
  .fig--run .scale { grid-column: 1 }
}

/* ══════════════════════════════════════════════════════════════════
   8. 층 도식 .fig--stack — 순서와 위계, 그리고 층과 층 사이에 무엇이 서 있는가.
      ★ 시리즈 00 1편에서는 쓰지 않는다(층 모델 설명은 2편 전용). 정의만 둔다.
      색 0종. 구조는 계열이 아니다 — 잉크·neutral·선만 쓴다.
   ══════════════════════════════════════════════════════════════════ */

.fig--stack .band {
  border: 1px solid var(--fig-rule);
  padding: .75rem 1rem;
  display: grid;
  gap: .25rem;
}
.fig--stack .band + .gate { margin-block: var(--space-6, 1.5rem) 0 }
.fig--stack .gate + .band { margin-block-start: var(--space-6, 1.5rem) }
.fig--stack .band .t { font-size: var(--fig-body); line-height: 1.5 }
.fig--stack .band .n { font-size: var(--fig-body-narrow); color: var(--fig-ink-mute) }

/* 관문 표식 — 폭 100% 파선을 그리지 않는다. 실선 hairline 한 줄에 면색 knockout 라벨. */
.fig--stack .gate {
  position: relative;
  text-align: center;
}
.fig--stack .gate::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--fig-rule);
}
.fig--stack .gate span {
  position: relative;
  display: inline-block;
  padding-inline: .5rem;
  background: var(--fig-surface);
  font-family: var(--font-mono);
  font-size: var(--fig-micro);
  letter-spacing: .09em;
  color: var(--fig-ink-mute);
}
/* 관문이 한 자리로 모이는 것을 보일 때만 오른쪽 여백에 세로 hairline 을 세우고,
 * 각 관문의 가로 hairline 을 그 줄까지 뻗는다. 줄 끝의 라벨은 마크업이 하나만 단다. */
.fig--stack.has-rail .stackwrap { position: relative; padding-inline-end: 3rem }
.fig--stack.has-rail .gate { margin-inline-end: -1.5rem }
.fig--stack.has-rail .stackwrap::after {
  content: "";
  position: absolute;
  inset-block: 1.5rem;
  inset-inline-end: 1.5rem;
  width: 1px;
  background: var(--fig-rule);
}
@media (max-width: 34rem) {
  .fig--stack.has-rail .stackwrap { padding-inline-end: 0 }
  .fig--stack.has-rail .stackwrap::after { display: none }
}

/* ══════════════════════════════════════════════════════════════════
   9. 폭과 다크 모드
   ══════════════════════════════════════════════════════════════════ */

/* 도판은 언제나 읽기 열 안이다. main 이 --measure(46rem)이므로 프레임 안쪽 유효 폭은
 * 데스크톱 약 43rem, 375px 화면에서 약 319px 다.
 * breakout(음수 마진으로 --wide 까지 넓히기) 금지, 프레임 안 가로 스크롤 금지.
 * 좁은 화면에서 접히는 규칙은 형태별 블록이 이미 갖고 있다 — 스크롤로 도망가지 않는다. */
.fig, .fig__frame { max-width: 100% }
.fig__frame > * { min-width: 0 }

/* 다크 모드는 지금 넣지 않는다. 사이트 전체에 prefers-color-scheme 이 CSS 0건이고
 * (있는 것은 agent-handoff.js 한 곳뿐), validator 를 --mode dark 로 돌린 적이 없다.
 * 검증하지 않은 값을 정본에 넣지 않는다.
 * 대신 도판이 하드코딩 hex 를 한 곳도 갖지 않게 해 두었다 — 사이트가 다크를 열 때
 * 아래 한 블록을 채우는 것만으로 도판 전수가 따라온다. 채울 값은 반드시
 *   node validate_palette.js "<6색>" --mode dark --surface "<다크 면색>"
 * 을 실행해 PASS 를 확인한 값이어야 한다.
 *
 * @media (prefers-color-scheme: dark) {
 *   :root { --fig-c1: …; --fig-c2: …; --fig-c3: …;
 *           --fig-c4: …; --fig-c5: …; --fig-c6: …;
 *           --fig-neutral: …; --fig-ramp-1: …; }
 * }
 */


/* ══════════════════════════════════════════════════════════════════
   4-b. 대조표 두 줄 변형 .fig--table--stacked — 행 머리를 값 위에 얹는다.
        [본인 지시 2026-08-08 「경우에 따라 함께 활용」]

        언제 쓰나 : 값이 길어 두 열로 나누면 오른쪽이 여러 줄로 접힐 때,
        또는 행이 둘셋뿐이라 표의 격자가 과할 때. 세로 훑기를 잃는 대신
        각 항목이 한 덩어리로 읽힌다. 마크업은 표가 아니라 행 묶음이다.

        <figure class="fig fig--table fig--table--stacked"><div class="fig__frame">
          <div class="row"><span class="lab">…</span><span class="val">…</span></div>
        </div></figure>
   ══════════════════════════════════════════════════════════════════ */

.fig--table--stacked .row {
  border-block-end: 1px solid var(--fig-rule);
  padding-block: .85rem;
}
/* ★ `:first-child`·`:last-child` 가 아니라 **of-type** 이다 [2026-08-09 정정].
 * 이 변형은 정의만 있고 쓰인 적이 없어(2026-08-09 실측 — 발행면 사용 0건) 아무도
 * 밟지 않았을 뿐, §6 분기 도식이 이미 겪은 사고를 **그대로** 갖고 있었다. 머리나
 * 주석이 붙는 순간 두 규칙이 다 빗나가고, 그때 마지막 행의 아래 선이 살아남아
 * 주석의 위 선과 만나 **선 두 겹 사이 빈 띠**가 생긴다. 이쪽은 기하 검사기 4번이
 * 잡는다 — 행도 주석도 가로선 하나만 가진 것이라 `isRule` 이 양쪽 다 참이 된다.
 * 행은 div, 띠는 p 라 of-type 이 「마지막 행」을 정확히 가리킨다. */
.fig--table--stacked .row:first-of-type { padding-block-start: 0 }
.fig--table--stacked .row:last-of-type { border-block-end: 0; padding-block-end: 0 }

/* 무리 밖 행 — 표의 `tr.aside`(§4-c-1)·분기 도식의 `.row.aside`(§11-1)와 **같은 말**을
 * 이 변형에서도 쓴다 [2026-08-09 신설]. 형태가 셋으로 갈려도 「이건 그 무리 밖이다」는
 * 한 뜻이어야 하고, 그 뜻을 그리는 장치도 하나여야 한다 — **여백 한 칸.**
 * 선·괄호·들여쓰기를 쓰지 않고 라벨색도 바꾸지 않는다(지위 표시로 돌리면 한 색이 두
 * 뜻을 갖는다). 값은 앞의 둘과 같다 : 1.9rem, 좁은 화면에서 1.35rem.
 * **무리 밖임을 적은 글자는 지우지 않는다** — CSS 가 빠져도 사실이 남아야 한다. */
.fig--table--stacked .row.aside { padding-block-start: 1.9rem }
.fig--table--stacked .lab {
  display: block;
  color: var(--fig-label);
  font-weight: 600;
  font-size: var(--fig-body);
  margin-block-end: .25rem;
}
.fig--table--stacked .val {
  display: block;
  font-size: var(--fig-body);
  line-height: 1.6;
  color: var(--fig-ink);
}
@media (max-width: 34rem) {
  .fig--table--stacked .lab,
  .fig--table--stacked .val { font-size: var(--fig-body-narrow) }
  .fig--table--stacked .row.aside { padding-block-start: 1.35rem }
}

/* ══════════════════════════════════════════════════════════════════
   4-c. 대조표의 두 지위 표시 — **형태가 아니라 변형이다** [2026-08-08]

   왜 형태로 만들지 않았나. 아래 둘이 그리는 것은 표가 이미 그리고 있는 것에
   **행 하나의 지위**를 더한 것뿐이다. 새 형태를 세우면 어휘가 열을 넘고, 그러면
   규격이 아니라 잡동사니가 된다(§3 원칙). 두 자리 모두 매핑의 **상한이 이미
   요구하고 있는데 글자 하나에만 맡겨져 있던** 것을 형태로 옮긴 것이라,
   담는 사실은 늘지 않는다 — 도판이 본문보다 세게 말하지 않는다.
   ══════════════════════════════════════════════════════════════════ */

/* 4-c-1. 무리 밖 행 `tr.aside` — 한 행이 나머지와 같은 무리가 아닐 때.
 *
 * 언제 : 표의 행 대부분이 한 묶음인데 마지막 하나가 그 묶음 밖일 때.
 *   1편 F7 이 그 자리다 — 되돌아온 자리 넷 + 넷 밖의 부수 정정 하나. 매핑 F7 상한 3
 *   「넷과 부수 정정 하나를 같은 무게로 그리지 않는다」를 지금까지 셀 안의 글자
 *   한 조각이 혼자 지고 있었다.
 *
 * 그리면 안 되는 것
 *   - 선·괄호·들여쓰기로 가르지 않는다 [본인 지시]. **여백 한 칸**만 쓴다.
 *   - 행 머리 색을 바꾸지 않는다. 라벨색은 「이건 라벨이다」 한 가지 신호이고,
 *     지위 표시로 돌리는 순간 한 색이 두 뜻을 갖는다(§3-1a 예외 조항과 같은 이유).
 *   - **무리 밖임을 적은 글자를 지우지 않는다.** 상한이 「적는다」를 요구한다.
 *     여백은 글자를 대신하지 않고 거든다 — CSS 가 빠져도 사실이 남아야 한다.
 *   - 무리 밖 행을 둘 이상 두지 않는다. 둘이면 그건 두 번째 무리이고, 표를 쪼갠다.
 *
 * 이름은 분할 막대의 `.aside`(줄 밖 조각)와 같은 말을 쓴다 — 형태가 달라도
 * 「이건 그 무리 밖이다」라는 뜻은 하나여야 한다. 선택자 범위가 갈라져 있어
 * 서로 걸리지 않는다. */
.fig--table tbody tr.aside > * { padding-block-start: 1.9rem }
@media (max-width: 34rem) {
  .fig--table tbody tr.aside > * { padding-block-start: 1.35rem }
}

/* 4-c-2. 닫히지 않는 대조표 `.fig--table--open` — 마지막 자리가 아직 열려 있을 때.
 *
 * 언제 : **표가 닫히지 않았다는 것이 논지**일 때. 1편 F13 이 그 자리다 — 매핑 F13
 *   상한 4 가 「네 번째 자리를 반드시 열린 채로 둔다. 세 행만 닫힌 표가 닫힌 표처럼
 *   보이면 §7 전체의 논지가 뒤집힌다」로 못박았는데, 그 일을 부재 기호 하나가
 *   혼자 하고 있었고 표는 선으로 말끔히 닫혀 있었다. 형태가 반대로 말하던 자리다.
 *
 * 어떻게 그리나 : 마지막 행에서 **답이 있는 칸 아래만 닫는다.**
 *   ★ 이 변형은 한 번 뒤집혔다. 처음 판은 「기본은 닫힘, 이 표만 마지막 행을 열고
 *   첫 칸만 되돌린다」였다. 그 뒤 본인 지시로 **모든 표의 마지막 선이 없어졌고**,
 *   그러면 「열려 있음」이 더 이상 이 표만의 것이 아니게 되어 장치가 통째로 죽는다.
 *   그래서 방향을 뒤집었다 — 지금은 이 표만 첫 칸 아래에 선을 **되돌린다.**
 *   그리는 그림은 같다(반쪽만 닫힌 표). 다른 것은 무엇이 기본인가뿐이다.
 *   전부 열면 마감선을 빠뜨린 렌더 사고로 읽힌다. 한쪽만 닫혀 있으면 그것이
 *   의도라는 것이 보인다 — 표는 답이 있는 데까지만 닫힌다.
 *
 * 그리면 안 되는 것
 *   - 파선을 쓰지 않는다(§3-5 anti-patterns 과 같은 판정).
 *   - 「계속됨」·「미정」 같은 글자를 넣지 않는다. 열림은 형태가 말하고,
 *     어떤 종류의 부재인지는 `.fig-sr` 이 말한다(§6-3 부재 세 종류).
 *   - 마지막 행이 부재가 아닌 표에 쓰지 않는다. 그때는 그냥 닫힌 표다.
 *   - 부재 칸이 마지막 행의 첫 칸인 표에 쓰지 않는다 — 그 배치에서는 이 규칙이
 *     정확히 반대로 걸린다. 그런 표는 열을 바꾸거나 이 변형을 쓰지 않는다. */
.fig--table--open tbody tr:last-child > :first-child {
  border-block-end: 1px solid var(--fig-rule);
}

/* ══════════════════════════════════════════════════════════════════
   10. 다이어그램 .fig--dia — 정보를 공간으로 옮긴다 [실험 2026-08-08]

   앞의 형태들(표·칸·분기)은 전부 **글자를 상자에 담은 것**이다. 배치가 뜻을
   나르지 않는다. 여기 것들은 자리·크기·채움 자체가 정보다.

   지킬 것 — 글자는 여전히 HTML 텍스트다(§3). SVG <text> 를 쓰지 않는다.
   도형만 CSS 로 그리고 이름표는 그 위에 얹는다.
   ══════════════════════════════════════════════════════════════════ */

/* 10-1. 채움 격자 — 전체 중 얼마가 채워졌는가.
   「열여섯 차원 중 다섯만 내려왔다」처럼 부분 도달이 논지일 때.
   빈 칸을 그리는 것이 핵심이다 — 안 그리면 「부분」이 시각적으로 사라진다.

   **한 줄에 전부 놓는다.** 8열 2줄로 접으면 첫 줄만 보고 「여덟 중 다섯」으로
   읽는다(실측 — 아래 줄이 통째로 비어 더 그렇다). 분모가 한눈에 세어져야 한다.
   칸을 작게 두는 것도 같은 이유다 — 크면 격자가 도판의 주인공이 된다.

   ★ 좁은 화면에서도 접지 않는다. 처음 쓴 ≤34rem 규칙이 `flex-wrap: wrap` 이라
   위 문단이 금지한 두 줄이 375px 에서 정확히 재현됐다 — 규격과 실행기가 서로를
   부정하던 자리다. 좁은 화면에서는 접는 대신 칸을 얇게 만든다. */
.fig--dia .cells {
  display: flex;
  gap: 3px;
  margin-block-end: .9rem;
}
.fig--dia .cell {
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: 1.6rem;
  max-inline-size: 2.2rem;
  border: 1px solid var(--fig-rule);
  background: transparent;
}
/* 채운 칸은 **잉크**다. 라벨색(--fig-label)을 쓰면 안 된다 — 이 파일 §2 가
 * 「라벨 전용 색은 데이터 마크에 절대 쓰지 않는다」로 못박았는데 처음 판이
 * 정확히 그것을 어기고 있었다. 채움/빈칸은 계열이 아니라 한 변수의 두 상태라
 * 색을 줄 자격이 없다. 잉크와 선으로만 그린다. */
.fig--dia .cell.on { background: var(--fig-ink); border-color: var(--fig-ink) }
.fig--dia .legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  font-size: var(--fig-body-narrow); color: var(--fig-ink-mute);
}
.fig--dia .legend b { font-weight: 400; color: var(--fig-ink) }
.fig--dia .swatch {
  display: inline-block; inline-size: .7em; block-size: .7em;
  border: 1px solid var(--fig-rule); margin-inline-end: .4em; vertical-align: baseline;
}
.fig--dia .swatch.on { background: var(--fig-ink); border-color: var(--fig-ink) }

/* 격자가 센 것과 **이름이 붙은 것**은 다른 층위다. 이름 목록을 레전드 옆에 붙이면
 * 「빈 칸 = 이 이름들」로 읽혀 근거에 없는 귀속이 된다. 가로선 하나로 갈라 놓고
 * 자기 이름표를 따로 준다. 세로선·들여쓰기는 쓰지 않는다 [본인 지시]. */
.fig--dia .named {
  display: grid;
  gap: .3rem;
  margin-block-start: .95rem;
  padding-block-start: .95rem;
  border-block-start: 1px solid var(--fig-rule);
}
.fig--dia .named .t {
  font-size: var(--fig-body-narrow);
  line-height: 1.65;
  color: var(--fig-ink);
}

/* 10-2. 양식 도식 .dia--form — 그릇에 칸이 몇이고 어디가 비었는가.
   칸 도식이 「나란한 세 덩어리」라면 이건 **하나의 양식** 안의 칸들이다.

   테두리는 옅은 선이다. 처음 판은 --fig-rule-hard 였는데, 같은 회차에 표에서
   굵은선을 걷어냈으므로(§4 열 머리 주석) 여기만 남겨 둘 근거가 없다. 「하나의
   양식」이라는 신호는 테두리가 있다는 사실이 주는 것이지 선의 굵기가 아니다.

   나중에 더한 칸을 **들여쓰지 않는다** [본인 지시 — 세로선 없음·들여쓰기 없음].
   처음 판은 margin-inline-start + 왼쪽 세로선으로 그렸다. 두 장치 다 지시에
   어긋나고, 무엇보다 들여쓴 칸은 「하위 칸」으로도 읽힌다 — 근거는 나중에 더했다는
   것까지만 말한다. 순서와 칸 몸의 글자가 그 사실을 말하게 두고 도형은 침묵한다. */
.fig--dia .form {
  border: 1px solid var(--fig-rule);
  display: grid;
}
.fig--dia .field {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  padding: .75rem .9rem;
  border-block-end: 1px solid var(--fig-rule);
  align-items: baseline;
}
.fig--dia .field:last-child { border-block-end: 0 }
.fig--dia .field .v { font-size: var(--fig-body); line-height: 1.6 }
/* 비어 있는 칸은 빗금으로 **보이게** 비운다 — 「표시된 부재」의 공간판.
 *
 * 빗금은 **남은 자리에만** 깔린다. 처음 판은 칸 몸 전체에 background 로 깔아
 * 글자 뒤를 가로질렀고, 실물에서 취소선처럼 읽혔다 — 「아직 없다」를 그리려던
 * 도형이 「지웠다」를 말하고 있었다. 부재 표시(—)는 글자 자리에 두고, 빗금은
 * 그 오른쪽 빈 폭을 채운다. 비어 있는 것은 글자가 아니라 자리다. */
.fig--dia .field.empty .v {
  color: var(--fig-ink-faint);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.fig--dia .field.empty .v::after {
  content: "";
  flex: 1 1 auto;
  block-size: .8rem;
  background: repeating-linear-gradient(135deg,
    transparent 0 5px, var(--fig-rule) 5px 6px);
}

/* 10-3. 경로 도식 .dia--path — 시도가 갈라져 어디로 갔는가.
   분기 도식이 「원인 → 결과」 두 열이라면 이건 **세 갈래가 한 자리로 모이는** 그림.

   ★ 시리즈 00 1편 미사용. 그 편에서 세 시도를 그리는 자리(F6)는 「세 줄을 잇지
   않는다」가 상한이라 모이는 그림을 쓸 수 없고, 길이가 같은 막대 셋은 닿음·못 닿음을
   한 번 더 말할 뿐 새 정보를 싣지 않는다. 층 도식과 같이 정의만 두고 쓰지 않는다. */
.fig--dia .paths { display: grid; gap: .55rem }
.fig--dia .path {
  display: grid;
  grid-template-columns: 12rem 1fr auto;
  align-items: center;
  gap: 1rem;
}
.fig--dia .bar {
  block-size: 3px;
  background: var(--fig-rule);
  position: relative;
}
/* 채움 격자와 같은 판정 — 데이터 마크는 잉크다. 라벨색을 쓰지 않는다 */
.fig--dia .path.hit .bar { background: var(--fig-ink) }
.fig--dia .path .end { font-size: var(--fig-body-narrow); color: var(--fig-ink-mute) }
.fig--dia .path.hit .end { color: var(--fig-ink) }

/* 10-3-b. 계보 갈래 .paths--tree — R10 의 첫 실사용 [2026-08-15 · 시리즈 06]
   §3-8 이 R10 을 정의하고 「미사용」으로 남겨 둔 자리를 처음 쓴다. 그리는 것은
   **파일 하나가 일곱 갈래로 갈라져 각각 어디까지 갔는가**다.

   위 10-3 의 기본형과 다른 점 하나 — **막대가 3px 채움이 아니라 1px 헤어라인이다.**
   기본형의 막대는 길이가 곧 값이라 채워도 되지만, 계보의 가로축은 **시간**이고
   막대는 그 자(尺)일 뿐 값이 아니다. §7 이 회차 차트에서 「막대가 아니라 가로 점
   눈금이다 — 0에서 시작하지 않으므로 막대는 거짓말이 된다」고 적은 것과 같은 판정을
   여기서도 내린다. 값은 점의 **자리**가 지고, 막대는 침묵한다.
   같은 이유로 이 변형에는 `.hit` 을 쓰지 않는다 — 축을 굵게 만들면 축이 값을 말한다.

   **왼쪽 뿌리를 세로선으로 그리지 않는다** [본인 지시 승계 — §10-1 `.named` ·
   §10-2 `.form` · §10-4 `.split` 이 이미 세 번 못박은 「세로선 없음·들여쓰기 없음」].
   일곱 줄이 **같은 왼쪽 모서리에서 시작한다는 사실 자체**가 한 뿌리를 말한다. 격자가
   이미 그리고 있는 것을 선으로 다시 그리면 없는 인과가 하나 더 생긴다(§6-2).
   뿌리가 무엇인지는 `.fig__head` 가 글로 말한다 — 그것은 시간축 위의 점이 아니라
   파일에 대한 사실이라 축에 앉힐 자리가 없다.

   **승계율은 숫자다.** 막대 굵기·길이에 싣지 않는다 — 굵기로 실으면 형태가 값을
   주장하는데 이 값들은 서로 같은 자로 잰 것이 아니다(96.2% 는 두 판 사이의 승계,
   34.6% 는 한 판의 확장분). 오른쪽 `.end` 열에 글자로 둔다. */
/* ★ 격자는 갈래마다 따로 서면 안 된다 — §7 이 회차 차트에서 이미 당한 자리다.
 * 위 10-3 의 기본형은 `.path` 마다 grid 를 세우는데, R10 이 미사용이라 그 결함이
 * 드러난 적이 없었다. 첫 실사용에서 그대로 나왔다 : 라벨과 끝말 길이가 행마다
 * 달라 축 폭이 **266 / 325 / 230 / 256 / 337 / 230 / 392px** 로 갈렸다(1280 실측).
 * 그러면 같은 날짜가 갈래마다 다른 자리에 앉아 **한 시간축처럼 보이는 그림이 실제로는
 * 일곱 개의 다른 자로 잰 것**이 된다. 격자를 감싸개 하나에만 세우고 각 줄은
 * display:contents 로 그 안에 흩어진다. */
.fig--dia .paths--tree {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr minmax(0, 11rem);
  gap: .8rem 1rem;
  align-items: center;
}
.fig--dia .paths--tree .path { display: contents }
.fig--dia .paths--tree .bar { block-size: 1px }
.fig--dia .paths--tree .lab {
  font-size: var(--fig-body);
  line-height: 1.45;
  color: var(--fig-label);
}
.fig--dia .paths--tree .lab .sub { color: var(--fig-ink-mute) }

/* 점 — §7 회차 차트의 점과 같은 규격(7px·면색 테두리)을 그대로 승계한다. 같은
 * 사이트에서 같은 크기의 점이 두 규격을 가지면 독자가 둘을 다른 것으로 읽는다.
 * 기본값은 **빈 점**이다 — 이 도판에서 다수는 축약·재사용판이고, 채운 점은 원자료로
 * 실제 여는 대표판에만 준다. 「무엇이 열려 있는가」가 이 그림의 실용적 논지다. */
.fig--dia .paths--tree .mark {
  position: absolute;
  top: 50%;
  left: calc((var(--xt, 0) + var(--xu, 0)) * 1%);
  translate: -50% -50%;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  border: 1px solid var(--fig-ink);
  background: var(--fig-surface);
  box-shadow: 0 0 0 2px var(--fig-surface);
}
.fig--dia .paths--tree .mark.on { background: var(--fig-ink) }
/* 노트가 본체인 판은 **점 옆**에 작은 사각을 하나 더 둔다. 점의 채움/빔은 이미
 * 「대표판인가」를 지고 있으므로 여기에 세 번째 상태를 얹으면 한 기호가 두 변수를
 * 나른다. 다른 변수는 다른 기호로 — 그리고 그 기호가 무엇인지는 `.named` 가 말한다. */
.fig--dia .paths--tree .mark.note::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  translate: 0 -50%;
  inline-size: 4px;
  block-size: 4px;
  background: var(--fig-ink);
}
/* 눈금 — §7 과 같은 좌표계에 선다. 라벨이 곧 위치다(§7 눈금 주석) */
.fig--dia .paths--tree .scale {
  position: relative;
  grid-column: 2;
  line-height: 1.5;
  block-size: 1.5em;
  margin-block-start: .35rem;
  font-family: var(--font-mono);
  font-size: var(--fig-micro);
  color: var(--fig-ink-faint);
}
.fig--dia .paths--tree .scale > * {
  position: absolute;
  top: 0;
  line-height: inherit;
  left: calc((var(--xt, 0) + var(--xu, 0)) * 1%);
  translate: -50% 0;
}
/* 0% 자리의 눈금만 시작 정렬로 돌린다. 가운데 정렬이면 라벨의 왼쪽 반이 프레임
 * 밖으로 나간다 — 375 실측에서 라벨 왼쪽 6px, 프레임 왼쪽 16px 이었다. 축의 끝에
 * 선 라벨은 「가운데가 곧 위치」가 아니라 「모서리가 곧 위치」로 읽힌다. */
.fig--dia .paths--tree .scale > .xt0.xu0 { translate: 0 0 }
@media (max-width: 34rem) {
  /* 좁은 화면에서는 **한 열**로 내린다 — 라벨 · 축 · 끝말이 갈래마다 세 줄로 쌓인다.
   * §7 처럼 라벨만 올리고 끝말을 축 옆에 두면(1fr auto) 끝말이 auto 로 폭을 먹어
   * 축이 99.9px 로 눌리고 A 갈래 두 점의 간격이 3.5px 가 된다 — 375 실측. 점이
   * 7px 이므로 그건 겹친 것이다. 축은 프레임 안쪽 폭을 통째로 쓴다(317px, §4-5).
   * §7 이 두 열로 버틴 것은 그쪽 끝말이 숫자 한 개라서다. */
  .fig--dia .paths--tree { grid-template-columns: 1fr; gap: .3rem }
  .fig--dia .paths--tree .path { display: block }
  .fig--dia .paths--tree .lab { display: block; font-size: var(--fig-body-narrow) }
  .fig--dia .paths--tree .bar { display: block; margin-block: .55rem }
  .fig--dia .paths--tree .end { display: block; margin-block-end: 1.1rem }
  .fig--dia .paths--tree .scale { grid-column: 1 }
}

/* 10-4. 분할 막대 .dia--split — **한 줄의 어디**가 무엇인가.
   앞의 셋은 「무엇이 있는가」를 그리고 이건 **자리**를 그린다. 한 문장을 앞뒤로
   가르고 각 자리에 이름표를 다는 형태다. 나란한 칸 셋으로 그리면 「앞쪽 절반」·
   「뒤쪽 절반」이라는 말이 가리킬 곳이 그림에 없다 — 그 말이 곧 자리이기 때문이다.

   가르는 것은 **여백**이지 세로선이 아니다 [본인 지시]. 두 조각을 1fr 1fr 로 두는
   것도 근거가 있다 — 본문이 쓰는 말이 「절반」이라 반반이 실측과 같다.

   줄 안에 없는 조각은 **밑줄을 주지 않는다.** 밑줄이 「이 조각은 그 줄의 일부다」를
   말하는 유일한 장치이고, 그것이 없는 것이 「그 줄이 말하지 않는 자리」의 그림이다.
   괄호·화살표·번호를 쓰지 않는다 — 순서가 아니라 분할이다. */
.fig--dia .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
.fig--dia .seg { display: flex; flex-direction: column }
/* 조각 글자는 아래로 붙이고 밑줄을 단다. flex:1 이 두 조각의 밑줄을 같은 높이에
 * 세운다 — 두 조각의 줄 수가 다를 때 밑줄이 어긋나면 한 줄로 읽히지 않는다. */
.fig--dia .seg .q {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-end;
  font-size: var(--fig-body);
  line-height: 1.6;
  color: var(--fig-ink);
  border-block-end: 1px solid var(--fig-rule);
  padding-block-end: .55rem;
  margin-block-end: .5rem;
}
.fig--dia .seg .t,
.fig--dia .aside .t {
  font-size: var(--fig-body-narrow);
  line-height: 1.6;
  color: var(--fig-ink-mute);
}
.fig--dia .aside {
  grid-column: 1 / -1;
  display: grid;
  gap: .2rem;
  margin-block-start: 1.35rem;
}

@media (max-width: 34rem) {
  /* 격자는 접지 않는다(§10-1 주석) — 칸을 얇게 만들어 한 줄을 지킨다 */
  .fig--dia .cells { flex-wrap: nowrap; gap: 2px }
  .fig--dia .cell { block-size: 1.25rem; max-inline-size: none }
  .fig--dia .field,
  .fig--dia .path { grid-template-columns: 1fr; gap: .3rem }
  /* 분할 막대는 1열로 접는다. 좌우가 위아래가 될 뿐 자리는 그대로 남는다 */
  .fig--dia .split { grid-template-columns: 1fr; gap: 1.1rem 0 }
  .fig--dia .seg .q { font-size: var(--fig-body-narrow) }
  .fig--dia .aside { grid-column: 1; margin-block-start: .25rem }
}

/* ══════════════════════════════════════════════════════════════════
   11. 캡션 없는 도판 [본인 지시 2026-08-08 「그 자체로 완결성」]

   왜 캡션을 걷어냈나. 캡션이 달려 있으면 도판이 **첨부 이미지**로 읽힌다 —
   본문이 있고 그 아래 사진이 있고 사진을 설명하는 글이 붙은 꼴이다. 이 도판들은
   그게 아니라 글과 글 사이에 놓인 **같은 정보의 다른 형태**여야 한다. 설명이
   따라붙는 순간 그림은 스스로 말하기를 그만둔다.

   그런데 캡션은 장식만 지고 있던 게 아니다. 매핑의 상한 몇은 **캡션에 적으라고
   지정**돼 있었다(F4 「프로필 한 장만 준 첫 판본」 시점 표기, F5 「같은 자로 잰
   상대값」, F10 「오른쪽은 겪지 않은 쪽」). 캡션만 지우면 그 한정이 통째로
   사라지고, 남은 그림은 근거가 허락한 것보다 세게 말한다.

   그래서 지우는 대신 **프레임 안으로 들인다.** 밖에 있으면 설명이고 안에 있으면
   도판의 일부다. 위치가 곧 지위다.
     .fig__head — 도판 전체에 걸리는 조건. 무엇을 재고 있는지·언제 것인지.
     .fig__note — 그림이 못 그리는 단서. 도형 아래 가는 선 하나로 갈라 둔다.
   둘 다 **한 도판에 한 줄**을 넘기지 않는다. 넘으면 그건 캡션이 안으로 들어온 것뿐이다.
   ══════════════════════════════════════════════════════════════════ */

/* 띠(머리·주석)의 여백은 **위아래가 같은 값**이다 [본인 지시 2026-08-08].
 * 두 값을 따로 적으면 반드시 갈라진다 — 처음 판이 1.1/0.7 과 1.15/0.8 로 갈려
 * 있었다. 눈에는 안 보이는 차이지만 「대칭」이라고 부를 수 없는 상태였다.
 * 토큰 둘로 묶어 한 자리에서만 정한다. */
.fig { --fig-band-gap: 1.15rem; --fig-band-rule: .8rem }

/* ★ 선택자에 `.fig` 를 겹쳐 (0,2,0) 으로 올린다. 띠가 `<p>` 라서 site.css 의
 * `.prose p` (0,1,1) 와 겨루는데, 클래스 하나짜리로는 **뒤에 와도 진다.**
 * 실측 2026-08-08 : 이 자리를 한 번 고치고도 머리 아래가 18.4px 이 아니라 24px
 * (=`.prose p` 의 1.5rem) 이었고 주석 위는 0 이었다. 아래 첫·끝 자식 규칙만
 * 특이도를 올리고 정작 값을 정하는 두 규칙은 안 올린 것이 원인이다. */
.fig .fig__head,
.fig .fig__note {
  font-size: var(--fig-body-narrow);
  line-height: 1.6;
  color: var(--fig-ink-mute);
}
.fig .fig__head {
  margin: 0 0 var(--fig-band-gap);
  padding-block-end: var(--fig-band-rule);
  border-block-end: 1px solid var(--fig-rule);
}
.fig .fig__note {
  margin: var(--fig-band-gap) 0 0;
  padding-block-start: var(--fig-band-rule);
  border-block-start: 1px solid var(--fig-rule);
}

/* ★ 프레임 안쪽 여백은 사방이 같다. 그 대칭을 깨는 것은 **바깥에서 온 마진**이다.
 *
 * 실측 2026-08-08 : 주석이 있는 도판 넷만 아래 여백이 49px 이고 나머지 아홉은
 * 25px 이었다. `.fig__note` 가 `<p>` 라서 site.css 의 `.prose p` 아래 마진 24px 을
 * 그대로 받고 있었다. 내 `.fig__note { margin: … 0 }` 가 뒤에 있는데도 진 것은
 * **특이도** 때문이다 — `.prose p` (0,1,1) 가 `.fig__note` (0,1,0) 를 이긴다.
 * 링크 순서로 이길 거라고 믿은 자리다.
 *
 * 그래서 값을 다시 적어 덮는 대신 **바깥 마진이 들어올 자리 자체를 막는다.**
 * 다음에 어떤 태그를 넣든, 사이트가 그 태그에 무슨 마진을 주든 프레임의 첫·끝은
 * 프레임 패딩만 본다. 두 클래스를 겹쳐 (0,2,1) 로 특이도를 확보한다. */
.fig .fig__frame > :first-child { margin-block-start: 0 }
.fig .fig__frame > :last-child { margin-block-end: 0 }

/* 라벨에 딸리는 조건 한 조각. 라벨(.k)이 「무엇인가」면 이건 「어느 쪽인가」다.
 * 라벨색을 주지 않는다 — 라벨색은 「이건 라벨이다」 한 뜻만 진다(§3 .k 주석). */
.fig .sub {
  display: block;
  font-size: var(--fig-micro);
  line-height: 1.5;
  color: var(--fig-ink-faint);
  margin-block-start: .15rem;
}

/* 칸의 값. 칸 머리가 물음이고 이것이 답일 때, 답이 한 조각으로 끝날 때 쓴다.
 * 여러 줄로 늘어지면 그건 값이 아니라 목록이라 `.b` 를 쓴다.
 *
 * 수량은 숫자가 아니라 **글자로 적는다** — 「5」는 값이고 「다섯」은 읽는 말이다.
 * 이 블로그 본문이 수량을 한글로 적는 것과 같은 규칙이고, 도판만 아라비아
 * 숫자를 쓰면 도판이 본문과 다른 문서에서 온 것처럼 읽힌다. 0 도 예외가 아니다
 * (실측 — 처음 판이 「0건」이었다. 「하나도 없다」가 그 자리의 논지이기도 하다).
 * 잰 값 자체는 다르다 — 회차 차트의 8.00 은 소수 둘째 자리가 곧 정보라 숫자다. */
.fig--slots .slot .n {
  font-size: var(--fig-body);
  line-height: 1.5;
  color: var(--fig-ink);
}
.fig--slots .slot .n + .b { margin-block-start: .45rem }

/* 11-1. 분기 도식의 두 지위 — 표에서 하던 일을 여기서도 한다 [2026-08-08].
 *
 * 표 여섯 장을 분기·칸 도식으로 옮기면서, 표에만 있던 두 변형(무리 밖 행 ·
 * 닫히지 않은 표)이 갈 곳을 잃었다. 형태를 바꿨다고 상한이 없어지지는 않는다.
 *
 * `.row.aside` — 나머지와 같은 무리가 아닌 행. 여백 한 칸으로만 가른다.
 *   선·괄호·들여쓰기를 쓰지 않는다 [본인 지시]. 무리 밖임을 적은 글자는 남긴다.
 *
 * `.row.open` — 원인은 있는데 결과가 아직 없는 행. **화살표를 그리지 않는다.**
 *   화살표가 「여기서 저기로 갔다」를 말하는 유일한 장치이고, 가지 않은 자리에
 *   그것을 그리면 형태가 사실과 반대로 말한다. 빈 자리는 양식 도식(§10-2)과
 *   같은 빗금으로 **보이게** 비운다 — 한 뜻에는 한 도형이다. */
.fig--fork .row.aside { padding-block-start: 1.9rem }
.fig--fork .row.open::before { content: "" }
.fig--fork .row.open .b .t {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--fig-ink-faint);
}
.fig--fork .row.open .b .t::after {
  content: "";
  flex: 1 1 auto;
  block-size: .8rem;
  background: repeating-linear-gradient(135deg,
    transparent 0 5px, var(--fig-rule) 5px 6px);
}
@media (max-width: 34rem) {
  .fig--fork .row.aside { padding-block-start: 1.35rem }
}
