genetics-mcp 2.14.0 → 2.15.0

package/skills/gazette-report/template/gazette.css

@@ -0,0 +1,2120 @@
+/* gazette.css — 관보(정부간행물) 문서 문법 조판 뼈대
+gazette-report 스킬 · 추출 원본: FI-soft/report-v2 (8종 검사를 통과한 구현)
+※ 손으로 고치지 마라. 원본을 고치고 scripts/extract.sh 를 다시 돌린다.
+
+담는 것 — 문서 무관한 것만:
+조판 3체계(활자·굵기·간격) · 가구(표지·이력·차례·활용법·요약·간지·부록·판권지)
+두 단 본문(여백 주석 단) · 위치 브레드크럼 머리띠 · 측면 색인 레일
+표 4괘선 · 확인 강도 표식(●◐○─) · ※ 각주 · 인쇄 페이지 문법
+
+고칠 것은 셋뿐:
+1. 장 색 [data-chapter] · PART 색 [data-part-no]
+— 팔레트를 베끼지 말고 **그 문서가 이미 쓰는 상태색**에서 뽑아라
+2. --wide (문서 폭) · --marg (여백 주석 단 폭)
+3. @page 마진 박스의 러닝 푸터 문구
+
+외부 의존: Pretendard GOV 웹폰트 하나. JS 라이브러리 0개.
+상호작용(처리 표시·머리띠 추적·진입 모션)은 문서마다 다르므로 여기 없다 —
+skeleton.html 의 「스크립트 계약」 주석 참조.
+*/
+
+/* guidebook.css — report-v2 · KRDS 테마 + 관보 문서 문법 + ux-story 행동 설계
+   SSOT: 이 폴더 전용. lim-report.css / build.py 와 공유하지 않는다.
+
+   ── 문서 문법 (행안부·KISA 『소프트웨어 개발보안 가이드』 구조 이식) ──
+   표지(한 면) · 차례 · 절 간지 · 우측 세로 색인 · 표 캡션 칩 · 판권지
+   인쇄에서는 @page 로 진짜 페이지가 된다. 17절 참조.
+
+   ── 정보 위계 (ux-story 4단계 결정) ──────────────────────────
+   독자(FI-soft 웹·서버 담당)의 몫  → Primary #256EF4
+   그중 가장 시급한 한 건          → Danger  #DE3412
+   서버가 준비돼야 풀리는 것        → Warning #FFB114
+   우리가 이미 끝낸 것              → 중립 회색
+   처리 표시된 것                   → 가라앉힘 (opacity·grayscale)
+
+   ── 컨텍스트 축 ─────────────────────────────────────────────
+   진행 상태 · 긴급도 · 시간 · 환경 · 읽기 위치                  */
+
+/* ══ 1. KRDS 토큰 ════════════════════════════════════════════ */
+:root {
+  --krds-primary: #256ef4;
+  --krds-primary-hover: #0b50d0;
+  --krds-primary-deep: #083891;
+  --krds-primary-surface: #ecf2fe;
+  --krds-primary-line: #b1cefb;
+
+  --krds-success: #228738;
+  --krds-success-deep: #17692b;
+  --krds-success-surface: #eaf6ec;
+  --krds-success-line: #a9d6b4;
+
+  --krds-warning: #ffb114;
+  --krds-warning-text: #8a5c00;
+  --krds-warning-surface: #fff8e9;
+  --krds-warning-line: #f0d69a;
+
+  --krds-danger: #de3412;
+  --krds-danger-text: #b5250a;
+  --krds-danger-surface: #fdefec;
+  --krds-danger-line: #f4b8ab;
+
+  --krds-info: #0b78cb;
+  --krds-info-surface: #e8f4fd;
+  --krds-info-line: #a8d5f2;
+
+  --krds-canvas: #ffffff;
+  --krds-surface: #f4f5f6;
+  --krds-surface-deep: #e9ebee;
+  --krds-text: #1e2124;
+  --krds-text-subtle: #464c53;
+  --krds-text-muted: #6d7882;
+  --krds-border: #b1b8be;
+  --krds-border-strong: #58616a;
+  --krds-divider: #e6e8ea;
+
+  /* ── 반경: 문서는 각(角)이다 ──────────────────────────────
+     KRDS 4/6/8px 반경 계약을 이 산출물에서는 쓰지 않는다. 근거 넷:
+     ① KRDS 는 정부 「웹 서비스 UI」 표준이며 인쇄물 조판 규격이 없다.
+        이 문서의 최종 형태는 A4 21쪽 PDF 다.
+     ② 원전(행안부·KISA 가이드)은 KRDS 와 발행 주체가 같고 반경이 0 이다.
+     ③ 반경이 화면/인쇄 이원화의 원인이다 — border-radius 는 overflow:hidden 과
+        짝인데, overflow:hidden 은 monolithic 후보(css-break-3 §4.1)라 쪽 넘김에서
+        요소를 잘라낸다. 반경 0 이면 @media print 의 되돌림 규칙 8개가 소멸한다.
+     ④ 색·대비 AA·포커스 규격은 KRDS 계약 그대로다. 깨는 것은 반경 하나뿐.
+     이름은 유지한다 — 되돌림은 값 네 개 복원. */
+  --r-sm: 0;
+  --r-md: 0;
+  --r-lg: 0;
+  --r-pill: 0;
+  --r-ui: 2px;   /* 컨트롤·포커스 링 전용. 0 이면 포커스 링 두 겹이 모서리에서 뾰족해진다 */
+
+  /* ── 굵기 3종 ───────────────────────────────────────────
+     굵기는 위계를 나르는 신호다. 종류가 많으면 신호가 죽는다.
+     500 은 Pretendard 에서 400 과 구분이 안 되고, 800 은 700 과 겹친다.
+     굵게 쓸 수 있는 것: 제목 · 라벨 · 좌표 번호 · 수치 · 강조 · 기호. 그뿐. */
+  --w-light: 300;   /* 표제 부제 — 표지 2행 · 간지 로마숫자 */
+  --w-body: 400;    /* 본문 · 표 셀 값 · 설명 */
+  --w-bold: 700;    /* 제목 · 라벨 · 번호 · 수치 · 강조 */
+
+  /* ── 활자 스케일 1.2 (Minor Third) · 본문 17px 기준 ───────── */
+  /* 14px 미만은 쓰지 않는다. 한글 판독 하한이고, 그 아래는 「작아서 넣은 것」이 된다.
+     그래서 최소 등급은 하나 — 라벨·칩·표 머리·각주·범례·여백 주석이 모두 여기. */
+  --t-sm: 14px;    --lh-sm: 1.7;     /* 부속 — 라벨·칩·표 머리·각주·여백 주석 */
+  --t-base: 17px;  --lh-base: 1.75;  /* 모든 문단 */
+  --t-md: 20px;    --lh-md: 1.4;     /* 건 제목 · 요약면 제목 */
+  --t-lg: 24px;    --lh-lg: 1.35;    /* 가구 제목(차례·부록·판권지) */
+  --t-xl: 29px;    --lh-xl: 1.3;     /* 절 제목 */
+  --t-2xl: 35px;   --lh-2xl: 1.25;   /* PART 제목 · 수치 */
+  /* 표제(題字) register — 본문 스케일 밖. 표지 대제목·간지 로마숫자 전용 */
+  --t-d1: 42px;    --t-d2: 51px;     --t-d3: 61px;    --lh-d: 1.1;
+
+  /* ── 간격 격자 4px ────────────────────────────────────────
+     8px 기각: 12px 칩 + 8px 여백 = 28px 로 --topbar 2단(32px/단)에 안 들어간다. */
+  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
+  --s6: 24px;  --s8: 32px;  --s12: 48px; --s16: 64px;
+
+  /* clamp 는 min·max 를 둘 다 격자값으로 고정한다 —
+     --wide 고정폭과 인쇄에서 최종 조판은 언제나 max = 격자값 */
+  --pad-lg: clamp(24px, 4vw, 48px);     /* 전면 패널 */
+  --pad-md: clamp(16px, 2.4vw, 24px);   /* 그 외 */
+
+  /* ── 괘선 3종 · 관보 표 문법 ──────────────────────────────
+     표의 좌·우 바깥 테두리는 없다. 세로선은 라벨-값 양식표에만. */
+  /* 두께 3종. style 을 포함해야 한다 — `border-top: 2px` 만 쓰면 style 이 없어 선이 안 그려진다. */
+  --rule-thin: 1px solid;
+  --rule-mid: 2px solid;
+  --rule-thick: 4px solid;
+
+  --rule-edge: 2px solid var(--krds-text);            /* 표 위 · 표 맨 아래 */
+  --rule-head: 1px solid var(--krds-border-strong);   /* 헤더 아래 */
+  --rule-row: 1px solid var(--krds-divider);          /* 행 사이 */
+
+  --font: "Pretendard GOV", "Pretendard", -apple-system, BlinkMacSystemFont,
+    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
+  --focus: 0 0 0 2px #fff, 0 0 0 5px var(--krds-primary);
+
+  --wide: 1080px;
+  /* 한글 자폭은 Pretendard 에서 1em 이 아니라 0.8625em 이다(실측).
+     44em 은 44자가 아니라 51자가 된다 — 라틴 기준 토큰을 그대로 쓰면 글줄이 길어진다.
+     37em × 0.8625 ≈ 43자. 한글 적정은 35~45자.                                   */
+  --measure: 37em;
+  --pad: 24px;
+  --topbar: 64px;
+  --marg: 240px;   /* 주석 단 글줄 19자 — 관보 가이드의 여백 단은 12~19자 */
+  --rail: 0px;   /* 가로 탭 스트립 폐지 — 브레드크럼 머리띠가 대신한다 */
+  --rail-side: 48px;
+  --marg-gap: var(--s8);
+
+  color-scheme: light only;
+}
+
+/* ══ 1-2. 장 색 ═══════════════════════════════════════════════
+   PDF 의 파스텔 팔레트를 옮겨오지 않는다.
+   이 문서가 이미 본문에서 쓰고 있는 상태색을 장 정체성으로 승격한다.
+   그래야 04절의 초록 `.tag--live` 태그가 04장 색과 저절로 이어진다.
+
+   01 독자 몫    Primary        DESIGN.md 제1계약 그대로 — 진짜 Primary 는 여기뿐
+   02 요지       딥네이비        01 의 배경 = 같은 계열 더 깊은 쪽
+   03 한눈에     진회색          모든 절로 흩어지는 허브 — 특정 상태에 속하지 않음
+   04 끝난 것    Success        `.tag--live`(실기기 확인함) 가 이미 쓰는 색
+   05 서버 대기  Warning 계열   `.tag--wait` · `tr.open` 이 이미 쓰는 색
+                                면은 노랑(#FFF8E9), 글자 면은 #8A5C00
+                                — 노랑 #FFB114 위의 흰 글자는 대비 1.8 로 미달
+   06 미확인     연회색          판단 보류에는 색을 주지 않는다               */
+
+[data-chapter="01"] { --ch: #256ef4; --ch-deep: #083891; --ch-surf: #ecf2fe; --ch-line: #b1cefb; }
+[data-chapter="02"] { --ch: #083891; --ch-deep: #06265f; --ch-surf: #e9eef8; --ch-line: #b6c4dd; }
+[data-chapter="03"] { --ch: #58616a; --ch-deep: #3d444b; --ch-surf: #eff1f3; --ch-line: #c9ced3; }
+[data-chapter="04"] { --ch: #228738; --ch-deep: #17692b; --ch-surf: #eaf6ec; --ch-line: #a9d6b4; }
+[data-chapter="05"] { --ch: #8a5c00; --ch-deep: #6b4700; --ch-surf: #fff8e9; --ch-line: #f0d69a; }
+[data-chapter="06"] { --ch: #68727b; --ch-deep: #464c53; --ch-surf: #f4f5f6; --ch-line: #d5d9dd; }
+
+/* ══ 1-3. PART 층위 ═══════════════════════════════════════════
+   PDF 는 PART > Chapter > 절 > 항 4단이다. 이 문서를 절 6개로 납작하게
+   펴 놓으면 「먼저 읽을 것 / 경과 / 남은 것」이라는 독자의 실제 읽기 순서가 사라진다.
+
+   PART I  요청  01절        — 독자 몫.  Primary (01 과 같은 색)
+   PART II 경과  02·03·04절  — 기록·사실. 흑연 (색을 주지 않는다)
+   PART III 잔여 05·06절     — 대기·미결. 황갈 (05 의 색 계열)              */
+
+[data-part-no="1"] { --pt: #256ef4; --pt-deep: #083891; --pt-surf: #ecf2fe; }
+[data-part-no="2"] { --pt: #3d444b; --pt-deep: #1e2124; --pt-surf: #eff1f3; }
+[data-part-no="3"] { --pt: #8a5c00; --pt-deep: #6b4700; --pt-surf: #fff8e9; }
+[data-part-no="apx"] { --pt: #59496b; --pt-deep: #3f3550; --pt-surf: #f1eef6; }
+
+/* 06절은 확정된 것이 아니라 유보다. 이 문서가 이미 쓰는 파선 문법
+   (`.tag--soon` 준비되면 확인)을 빌려 채우지 않고 테두리만 준다.
+   03절의 진회색과도 이것으로 확실히 갈린다. */
+[data-chapter="06"] .toc__no,
+[data-chapter="06"] .part__count {
+  background: var(--krds-canvas); color: var(--ch-deep);
+  border: 1px dashed var(--ch); font-weight: var(--w-bold);
+}
+
+.part[data-chapter="06"] .part__head { border-left-style: dashed; }
+.part[data-chapter="06"] .part__no { border-right-style: dashed; }
+
+/* ══ 2. 기반 ══════════════════════════════════════════════════ */
+*, *::before, *::after { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  margin: 0;
+  font-family: var(--font);
+  font-size: var(--t-base);
+  line-height: 1.5;
+  color: var(--krds-text);
+  background: var(--krds-canvas);
+  -webkit-font-smoothing: antialiased;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+h1, h2, h3 { letter-spacing: -0.02em; }
+
+.sr {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+
+a { color: inherit; text-underline-offset: 3px; }
+
+a:focus-visible, button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus);
+  border-radius: var(--r-ui);
+}
+
+.skip {
+  position: absolute; left: 16px; top: -100px; z-index: 500;
+  padding: var(--s3) var(--s4); border-radius: var(--r-ui);
+  background: var(--krds-primary); color: #fff;
+  font-weight: var(--w-bold); text-decoration: none;
+}
+
+.skip:focus { top: 14px; }
+
+/* 본문 상호참조 — KRDS 텍스트 링크 */
+.ref {
+  color: var(--krds-primary-hover);
+  font-weight: var(--w-body);   /* 밑줄이 이미 신호다 — 본문 119군데가 굵으면 문단이 얼룩진다 */
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--krds-primary-line);
+}
+
+.ref:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
+
+/* ══ 3. 러닝 헤더 = 위치 브레드크럼 ═══════════════════════════
+   관보 가이드의 머리띠 문법. 브랜드 바가 아니라 「지금 어디인가」를
+   PART · Chapter 두 계층에서 동시에 알려 주는 좌표계다.
+   그래서 매 쪽(=매 스크롤 위치)에 있어야 한다. */
+.topbar {
+  position: sticky; top: 0; z-index: 200;
+  display: grid; grid-template-rows: 1fr 1fr;
+  height: var(--topbar);
+  background: var(--krds-canvas);
+  font-size: var(--t-sm);
+}
+
+.crumb {
+  display: flex; align-items: center; gap: var(--s2);
+  max-width: var(--wide); width: 100%; margin: 0 auto; padding: 0 var(--pad);
+  min-width: 0;
+}
+
+.crumb + .crumb { border-top: 1px solid var(--krds-divider); }
+
+.crumb__k {
+  flex: 0 0 auto; width: 5.8em;
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.08em;
+  color: var(--krds-text-muted); text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.crumb__row {
+  display: flex; align-items: center; gap: var(--s1);
+  margin: 0; padding: 0; list-style: none;
+}
+
+.crumb__row li { display: inline-flex; align-items: center; }
+
+/* 칸 하나 = 한 PART / 한 Chapter. 현재 것만 채운다 */
+.crumb__c {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 19px; height: 19px; padding: 0 var(--s1);
+  border: 1px solid var(--krds-border);
+  background: var(--krds-canvas); color: var(--krds-text-muted);
+  font-size: var(--t-sm); font-weight: var(--w-bold); line-height: var(--lh-sm);
+  font-variant-numeric: tabular-nums; text-decoration: none;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.crumb__c:hover { background: var(--krds-surface); color: var(--krds-text); }
+
+.crumb__row--part .crumb__c { min-width: 24px; letter-spacing: 0.04em; }
+
+.crumb__c.is-on {
+  background: var(--pt, var(--ch, var(--krds-primary)));
+  border-color: var(--pt, var(--ch, var(--krds-primary)));
+  color: #fff;
+}
+
+/* 잔여 건수를 번호 칸과 같은 행에 두지 않는다.
+   칸(19px·굵게·tabular-nums)과 배지(17px·굵게·tabular-nums)는 모양이 사실상 같아서
+   「1 6 2 3 4 5 6」 — 여섯 절 사이에 낀 일곱 번째 절로 읽힌다.
+   숫자만 있는 표식은 숫자 행 옆에 두지 않는다. 낱말로 감싸 우측 판독부로 옮긴다. */
+.crumb__rem {
+  flex: 0 0 auto; padding-left: var(--s3); margin-left: var(--s3);
+  border-left: 1px solid var(--krds-divider);
+  font-size: var(--t-sm); line-height: var(--lh-sm);
+  color: var(--krds-text-muted); white-space: nowrap;
+}
+
+.crumb__rem[hidden] { display: none; }
+
+.crumb__badge { font-weight: var(--w-bold); color: var(--krds-primary-deep); font-variant-numeric: tabular-nums; }
+
+.crumb__now {
+  flex: 1 1 auto; min-width: 0; text-align: right;
+  color: var(--krds-text-subtle);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.crumb--part .crumb__now { font-weight: var(--w-bold); color: var(--pt-deep, var(--krds-text)); }
+
+/* 관보 머리띠의 우측 끝은 「쪽번호」다 — 문서 안 어디인지를 알려 주는 앵커.
+   화면에는 쪽이 없으므로 절 위치(N / 6)로 옮긴다. 날짜는 표지·이력·판권지의 몫. */
+.crumb__pos {
+  flex: 0 0 auto; padding-left: var(--s3); margin-left: var(--s3);
+  border-left: 1px solid var(--krds-divider);
+  font-size: var(--t-sm); color: var(--krds-text-muted);
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+
+.crumb__pos b {
+  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-text);
+  margin-right: 0;
+}
+
+@media (max-width: 700px) {
+  .crumb__k { width: auto; font-size: var(--t-sm); }
+  .crumb__now, .crumb__rem { display: none; }
+  .crumb { gap: var(--s2); }
+}
+
+/* 관보 머리띠 아래의 색 괘선. 웹의 진행률 막대가 아니라 머리띠의 밑선으로 읽히게 한다. */
+.progress {
+  position: sticky; top: var(--topbar); z-index: 199;
+  height: 2px; background: var(--krds-border); pointer-events: none;
+}
+
+.progress__fill {
+  display: block; height: 100%; width: 0%;
+  background: var(--krds-primary); transition: width 0.15s linear;
+}
+
+.rail { display: none; }   /* ≥1280px 에서만 세로 색인으로 되살아난다 */
+
+.rail__tabs {
+  display: flex; overflow-x: auto; scrollbar-width: none;
+  max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad);
+}
+
+.rail__tabs::-webkit-scrollbar { display: none; }
+
+/* KRDS 탭 — 활성은 primary 글자 + 하단 2px */
+.rail__tab {
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s2);
+  height: var(--rail); padding: 0 var(--s4);
+  font-size: var(--t-sm); color: var(--krds-text-subtle);
+  text-decoration: none; white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.rail__tab b { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; color: var(--krds-text-muted); }
+.rail__tab:hover { background: var(--krds-surface); color: var(--krds-text); }
+
+.rail__tab.is-active {
+  color: var(--krds-primary); font-weight: var(--w-bold);
+  border-bottom-color: var(--krds-primary);
+}
+
+.rail__tab.is-active b { color: var(--krds-primary); }
+
+/* 남은 건수 배지 — 진행 상태 축 */
+.rail__badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 20px; padding: 0 var(--s2);
+  border-radius: var(--r-pill);
+  background: var(--krds-primary); color: #fff;
+  font-size: var(--t-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
+}
+
+.rail__badge[hidden] { display: none; }
+
+.rail__badge.is-bump { animation: bump 0.2s ease-out; }
+
+@keyframes bump { 50% { transform: scale(1.18); } }
+
+/* ── 우측 세로 색인 레일 — 관보의 책등 색인 ──
+   넓은 화면에서만. 같은 마크업을 방향만 돌려 쓴다.
+   좁은 화면에서 세로 탭은 폭이 없으므로 위의 가로 스트립을 그대로 둔다. */
+@media (min-width: 1280px) {
+  .rail {
+    display: block;
+    position: fixed; top: 50%; right: 0; left: auto;
+    transform: translateY(-50%);
+    max-height: calc(100vh - 80px);
+    overflow-y: auto; scrollbar-width: none;
+    background: none; border-bottom: none;
+  }
+
+  .rail::-webkit-scrollbar { display: none; }
+
+  .rail__tabs {
+    display: block; overflow: visible;
+    max-width: none; margin: 0; padding: 0;
+  }
+
+  .rail__tab {
+    display: flex; align-items: center; justify-content: flex-start;
+    gap: var(--s2);
+    writing-mode: vertical-rl;
+    width: var(--rail-side); height: auto; min-height: 92px;
+    margin: 0 0 var(--s1) auto; padding: var(--s3) 0 var(--s3);
+    background: transparent;
+    border-top: var(--rule-thin); border-top-color: var(--krds-divider);
+    font-size: var(--t-sm); letter-spacing: 0.01em;
+    transition: background 0.15s ease, color 0.15s ease, width 0.15s ease;
+  }
+
+  /* 세로쓰기에서 숫자는 눕는다. 두 자리를 한 글자처럼 세운다 (타테추요코) */
+  .rail__tab b {
+    color: var(--krds-text-muted);
+    text-combine-upright: all;
+    -webkit-text-combine: horizontal;
+  }
+  .rail__tab:hover { width: calc(var(--rail-side) + 5px); background: var(--krds-surface-deep); }
+
+  /* 현재 장은 그 장의 색으로 채운다 */
+  .rail__tab.is-active {
+    width: calc(var(--rail-side) + 8px);
+    background: var(--ch); color: #fff;
+    border-color: var(--ch);
+  }
+
+  .rail__tab.is-active b { color: #fff; }
+
+  .rail__badge {
+    writing-mode: horizontal-tb;
+    min-width: 19px; height: 19px; font-size: var(--t-sm);
+  }
+
+  .rail__tab.is-active .rail__badge { background: #fff; color: var(--ch-deep); }
+
+  /* 레일이 위에 없으므로 착지 여백·표지 높이에서 그 높이를 뺀다 */
+  .cover { min-height: calc(100vh - var(--topbar) - 56px); }
+  .part { scroll-margin-top: calc(var(--topbar) + var(--s4)); }
+  .ask, .sheet { scroll-margin-top: calc(var(--topbar) + var(--s6)); }
+}
+
+/* ══ 4. 문서 그릇 ═════════════════════════════════════════════ */
+.doc { max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad) var(--s16); }
+
+/* ══ 5. 알림 배너 — 긴급도 × 진행 상태 ═══════════════════════ */
+/* 요약면 안의 「현황」 줄. 표지 위에 떠 있는 웹 토스트는 관보 문법에 없고,
+   이 문서는 같은 말을 이미 01-1 카드 · 02절 시급 박스 · 잔여 배지에서 한다.
+   상태가 바뀌는 한 줄이므로 요약면이 있을 자리다. */
+.notice {
+  display: flex; align-items: flex-start; gap: var(--s3);
+  margin: 0; padding: var(--s3) var(--s4);
+  border: 0; border-bottom: var(--rule-thin); border-bottom-color: var(--krds-divider);
+  border-left: var(--rule-thick); border-left-color: transparent;
+  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+@keyframes notice-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.notice__mark {
+  flex: 0 0 auto; display: inline-flex;
+  align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 50%;
+  font-size: var(--t-sm); font-weight: var(--w-bold); color: #fff;
+  transition: background 0.3s ease;
+}
+
+.notice__text { margin: 0; max-width: var(--measure); font-size: var(--t-base); line-height: var(--lh-base); }
+
+.notice[data-state="critical"] {
+  background: var(--krds-danger-surface);
+  border-color: var(--krds-danger-line); border-left-color: var(--krds-danger);
+  color: var(--krds-danger-text);
+}
+.notice[data-state="critical"] .notice__mark { background: var(--krds-danger); }
+
+.notice[data-state="info"] {
+  background: var(--krds-info-surface);
+  border-color: var(--krds-info-line); border-left-color: var(--krds-info);
+  color: #0a5d9e;
+}
+.notice[data-state="info"] .notice__mark { background: var(--krds-info); }
+.notice[data-state="info"] .notice__mark::after { content: "i"; }
+.notice[data-state="info"] .notice__mark { font-style: italic; }
+
+.notice[data-state="success"] {
+  background: var(--krds-success-surface);
+  border-color: var(--krds-success-line); border-left-color: var(--krds-success);
+  color: var(--krds-success-deep);
+}
+.notice[data-state="success"] .notice__mark { background: var(--krds-success); }
+
+.notice[data-state="info"] .notice__mark,
+.notice[data-state="success"] .notice__mark { font-size: 0; }
+.notice[data-state="info"] .notice__mark::before { content: "i"; font-size: var(--t-sm); font-style: italic; }
+.notice[data-state="success"] .notice__mark::before { content: "\2713"; font-size: var(--t-sm); }
+
+/* ══ 6. 표지 — 한 면을 통째로 쓴다 (관보 세로 스택) ══════════
+   번호 박스 → 대제목 2행 → 괘선 노드 → 도해 → 메타 → 발행처
+   그림 파일은 쓰지 않는다. 괘선·노드는 전부 CSS. */
+.cover {
+  /* 머리(auto) · 표제 마당(1fr — 남는 높이를 전부 먹는다) · 메타(auto) · 발행처(auto).
+     가운데 빈 마당은 관보 표지의 문법이다. 선으로 닫지 않는다 — 여백 자체가 마감이다. */
+  display: grid; grid-template-rows: auto 1fr auto auto;
+  min-height: calc(100vh - var(--topbar) - 56px);
+  margin: var(--s6) 0 0;
+  border-top: var(--rule-thick); border-top-color: var(--krds-primary-deep);
+  border-bottom: var(--rule-thin); border-bottom-color: var(--krds-border);
+  background: var(--krds-canvas);
+}
+
+/* 표지 머리 — 좌: 발간등록번호 상자 / 우: 고객사 마크.
+   관보 표지의 우상단은 발행 주체의 마크 자리다. 로고를 못 받으면 비워 두지 말고
+   고객사명을 활자로 세운다 — 빈 자리는 「받을 것을 못 받은 문서」로 읽힌다. */
+.cover__top {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s6);
+  padding: var(--pad-lg) var(--pad-lg) 0;
+}
+
+/* 발간등록번호 박스 — 관보 표지 좌상단 */
+.cover__docno {
+  flex: 0 0 auto;
+  border: 1px solid var(--krds-border-strong);
+  border-radius: var(--r-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.cover__dk {
+  display: block; padding: var(--s1) var(--s3) var(--s1);
+  background: var(--krds-surface);
+  border-bottom: 1px solid var(--krds-border-strong);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.06em;
+  color: var(--krds-text-subtle); text-align: center;
+}
+
+.cover__dv {
+  display: block; padding: var(--s2) var(--s3);
+  font-size: var(--t-sm); font-weight: var(--w-bold); text-align: center;
+}
+
+/* 로고를 받았을 때. 비트맵이든 SVG 든 높이만 묶고 폭은 원본비로 둔다 */
+.cover__logo { flex: 0 0 auto; max-height: 52px; max-width: 40%; width: auto; height: auto; }
+
+.cover__org {
+  flex: 0 1 auto; min-width: 0; margin: 0; text-align: right;
+  border-bottom: var(--rule-mid); border-bottom-color: var(--krds-primary-deep);
+  padding-bottom: var(--s2);
+}
+
+.cover__ork {
+  display: block; margin-bottom: var(--s1);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.14em;
+  color: var(--krds-text-muted);
+}
+
+.cover__orn {
+  display: block;
+  font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-bold);
+  letter-spacing: -0.02em; color: var(--krds-primary-deep);
+}
+
+@media (max-width: 560px) {
+  .cover__top { flex-direction: column; gap: var(--s4); }
+  .cover__org { text-align: left; }
+}
+
+.cover__key { align-self: start; padding: var(--pad-lg) var(--pad-lg) 0; }
+
+.cover__kicker {
+  margin: 0 0 var(--s4); font-size: var(--t-sm); font-weight: var(--w-bold);
+  letter-spacing: 0.04em; color: var(--krds-text-muted);
+}
+
+/* 1행 굵은 남색 + 2행 가는 글자 — 관보 대제목 문법 */
+.cover__title { margin: 0; line-height: 1.16; }
+
+.cover__t1 {
+  display: block;
+  font-size: var(--t-d2); line-height: var(--lh-d); font-weight: var(--w-bold);
+  letter-spacing: -0.035em; color: var(--krds-primary-deep);
+}
+
+.cover__t2 {
+  display: block; margin-top: 0;
+  font-size: var(--t-d1); line-height: var(--lh-d); font-weight: var(--w-light);
+  letter-spacing: -0.02em; color: var(--krds-text-subtle);
+}
+
+.cover__lead {
+  margin: var(--s6) 0 0; max-width: 40ch;
+  font-size: var(--t-base); line-height: var(--lh-base); color: var(--krds-text-subtle);
+}
+
+.cover__meta {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  margin: 0; padding: 0; list-style: none;
+  border-top: 1px solid var(--krds-border);
+}
+
+@media (max-width: 880px) { .cover__meta { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 520px) { .cover__meta { grid-template-columns: 1fr; } }
+
+.cover__meta li { padding: var(--s4) var(--s4); border-right: 1px solid var(--krds-divider); }
+.cover__meta li:last-child { border-right: none; }
+
+@media (max-width: 880px) {
+  .cover__meta li { border-bottom: 1px solid var(--krds-divider); }
+  .cover__meta li:nth-child(2n) { border-right: none; }
+  .cover__meta li:nth-last-child(-n + 2) { border-bottom: none; }
+}
+
+@media (max-width: 520px) {
+  .cover__meta li { border-right: none; }
+  .cover__meta li:last-child { border-bottom: none; }
+}
+
+.cover__mk { display: block; font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-text-muted); }
+.cover__mv { display: block; font-size: var(--t-base); line-height: var(--lh-base); }
+
+/* 하단 발행기관 스트립 — 관보 표지 맨 아래 */
+.cover__issuer {
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
+  margin: 0; padding: var(--s4) var(--pad-lg);
+  background: var(--krds-primary-deep); color: #fff;
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.01em;
+}
+
+.cover__issuer span + span::before {
+  content: ""; display: inline-block;
+  width: 4px; height: 4px; margin-right: var(--s4); vertical-align: 3px;
+  border-radius: 50%; background: rgba(255, 255, 255, 0.55);
+}
+
+.cover__issuer em { font-style: normal; margin-left: auto; font-weight: var(--w-body); opacity: 0.82; }
+
+/* 시간 축 — 7일이 지나야 나타난다 */
+
+/* ══ 5-2. PART 간지 ═══════════════════════════════════════════
+   전면 색 패널 + 사선 해칭 + 반투명 원 무리. 그림 파일은 쓰지 않는다. */
+.pt {
+  margin: var(--s16) 0 0;
+  scroll-margin-top: calc(var(--topbar) + var(--s4));
+}
+
+.pt__panel {
+  position: relative; isolation: isolate;
+  padding: var(--pad-lg) var(--pad-lg) var(--pad-lg);
+  /* 반투명 원 5겹은 웹 히어로 배경이지 관보 간지가 아니다. 사선 해칭 한 겹만 남긴다. */
+  background:
+    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.055) 7px 8px),
+    var(--pt);
+  color: #fff;
+}
+
+.pt__label {
+  margin: 0; font-size: var(--t-sm); font-weight: var(--w-bold);
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.pt__no {
+  display: block; margin: 0 0 0;
+  font-size: var(--t-d3); font-weight: var(--w-light);
+  letter-spacing: 0.06em; line-height: 1;
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.pt__title {
+  margin: var(--s2) 0 0; padding-top: var(--s4);
+  border-top: 2px solid rgba(255, 255, 255, 0.55);
+  font-size: var(--t-2xl); font-weight: var(--w-bold); line-height: var(--lh-2xl);
+}
+
+.pt__lede {
+  margin: var(--s2) 0 0; max-width: 34ch;
+  font-size: var(--t-base); line-height: var(--lh-base); color: rgba(255, 255, 255, 0.95);
+}
+
+.pt__grid {
+  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--pad-lg);
+  margin: var(--pad-md) 0 0;
+}
+
+@media (max-width: 780px) { .pt__grid { grid-template-columns: 1fr; gap: var(--s6); } }
+
+.pt__list {
+  display: grid; gap: var(--s2); align-content: start;
+  margin: 0; padding: 0; list-style: none;
+}
+
+/* 이 PART 가 답하는 질문 — 각 절 여백 단의 Why 를 그대로 모은 것.
+   간지 오른쪽을 장식으로 채우지 않고 「무엇을 알게 되는가」로 채운다. */
+.pt__ask { align-content: start; }
+
+.pt__askk {
+  margin: 0 0 var(--s2); padding-bottom: var(--s2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.06em;
+  color: rgba(255, 255, 255, 0.82);
+}
+
+.pt__askl { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
+
+.pt__askl li {
+  position: relative; padding-left: var(--s6);
+  max-width: 28ch;
+  font-size: var(--t-base); line-height: var(--lh-base); color: #fff;
+}
+
+/* 간지 원 무리에 뜻을 넣는다 — 빈 원은 장식이지만 표식은 안내다 */
+.pt__icons {
+  display: none;   /* 관보 간지에 아이콘은 없다. 마크업은 aria-hidden 이라 남겨 둔다 */
+}
+
+.pt__ic {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: clamp(38px, 4.4vw, 50px); height: clamp(38px, 4.4vw, 50px);
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.42);
+  background: rgba(0, 0, 0, 0.18);   /* 흰색을 얹으면 면이 밝아져 흰 획이 죽는다 */
+  color: #fff;
+}
+
+.pt__ic svg { width: 52%; height: 52%; }
+
+@media (max-width: 620px) { .pt__icons { position: static; margin-top: var(--s6); } }
+
+.pt__askl li::before {
+  content: "?"; position: absolute; left: 0; top: 1px;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 15px; height: 15px; border-radius: 50%;
+  background: rgba(255, 255, 255, 0.22);
+  font-size: var(--t-sm); font-weight: var(--w-bold);
+}
+
+.pt__list a {
+  display: inline-flex; align-items: baseline; gap: var(--s2);
+  font-size: var(--t-base); color: #fff; text-decoration: none;
+}
+
+.pt__list b {
+  padding: var(--s1) var(--s2); border-radius: var(--r-sm);
+  background: rgba(0, 0, 0, 0.26);   /* 흰색을 얹으면 면이 밝아져 흰 글자가 죽는다 */
+  font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap;
+}
+
+.pt__list a:hover span { text-decoration: underline; text-underline-offset: 3px; }
+
+/* ══ 6-2. 차례 ════════════════════════════════════════════════
+   관보 CONTENTS. 쪽번호 대신 건수를 오른쪽에 둔다 —
+   target-counter() 는 어느 브라우저에서도 안 되고,
+   웹 문서에서 독자에게 쓸모 있는 건 「몇 쪽」이 아니라 「몇 건」이다. */
+.toc {
+  margin: var(--s8) 0 0; padding: 0;
+  background: var(--krds-canvas);
+}
+
+.toc__h {
+  display: flex; align-items: baseline; gap: var(--s3);
+  margin: 0 var(--pad-md) var(--s1);
+  padding-bottom: var(--s3);
+  border-bottom: 2px solid var(--krds-border-strong);
+  font-size: var(--t-lg); font-weight: var(--w-bold);
+}
+
+.toc__en {
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.18em;
+  color: var(--krds-text-muted);
+}
+
+.toc__parts, .toc__list { margin: 0; padding: 0; list-style: none; }
+.toc__part + .toc__part { margin-top: var(--s2); }
+
+/* PART 밴드 — 차례에서 세 덩어리를 갈라 놓는다 */
+.toc__band {
+  display: flex; align-items: baseline; gap: var(--s3);
+  margin: 0 var(--pad-md);
+  padding: var(--s3) var(--s4);
+  background: var(--pt); color: #fff;
+  border-radius: var(--r-sm);
+  text-decoration: none;
+}
+
+.toc__pk {
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.18em;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.toc__pn {
+  font-size: var(--t-md); font-weight: var(--w-light); letter-spacing: 0.06em;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.toc__pt { font-size: var(--t-base); font-weight: var(--w-bold); }
+
+.toc__pc {
+  margin-left: auto; font-size: var(--t-sm);
+  color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums;
+}
+
+.toc__link {
+  display: grid; grid-template-columns: auto auto 1fr auto;
+  align-items: baseline; gap: var(--s1) var(--s4);
+  padding: var(--s4) var(--pad-md);
+  border-bottom: 1px solid var(--krds-divider);
+  text-decoration: none;
+  transition: background 0.15s ease;
+}
+
+.toc__part:last-child .toc__row:last-child .toc__link { border-bottom: none; }
+.toc__link:hover { background: var(--ch-surf); }
+
+/* 좌측 장 칩 — 장 색 채움 */
+.toc__no {
+  grid-row: 1 / 3; align-self: start;
+  display: inline-flex; align-items: center;
+  min-width: 3.6em; padding: 0 0 0 var(--s2);
+  border-left: var(--rule-mid); border-left-color: var(--ch);
+  color: var(--ch-deep);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+.toc__title {
+  grid-column: 2; grid-row: 1;
+  font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-base);
+  color: var(--ch-deep);
+}
+
+/* 점선 리더 — 제목과 건수를 잇는다. 차례를 차례로 만드는 것 */
+.toc__dots {
+  grid-column: 3; grid-row: 1;
+  align-self: baseline; min-width: 24px; height: 0;
+  border-bottom: 1px dotted var(--krds-border);
+  transform: translateY(-4px);
+}
+
+/* 하위 항목 — 관보 차례는 절 아래 항목을 개별 행으로 세우고 각각 리더를 단다.
+   한 줄로 이어 붙이면 목록이 아니라 설명문이 된다. */
+.toc__subs {
+  margin: 0 0 var(--s3); padding: 0 var(--pad-md) 0
+          calc(var(--pad-md) + 3.6em + var(--s4));
+  list-style: none;
+}
+
+.toc__subs a {
+  display: grid; grid-template-columns: 5.4em 1fr;
+  align-items: baseline; gap: 0 var(--s2);
+  padding: var(--s1) 0;
+  color: var(--krds-text-subtle); text-decoration: none;
+  font-size: var(--t-sm); line-height: var(--lh-sm);
+}
+
+.toc__subs a:hover span { text-decoration: underline; text-underline-offset: 3px; }
+.toc__subs a:hover { color: var(--ch-deep); }
+
+.toc__subs b {
+  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-text-muted);
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+
+.toc__subs a:hover b { color: var(--ch); }
+
+.toc__subs span { min-width: 0; }
+
+.toc__d { display: none; }
+
+@media (max-width: 560px) {
+  .toc__subs { padding-left: calc(var(--pad-md) + var(--s3)); }
+  .toc__subs a { grid-template-columns: 4.8em 1fr; }
+}
+
+.toc__count {
+  grid-column: 4; grid-row: 1;
+  font-size: var(--t-sm); color: var(--krds-text-subtle);
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+
+/* 크기를 올리지 않는다 — 「6건」은 한 낱말이다. 숫자만 키우면 낱말 가운데 이음매가 생긴다.
+   강조는 굵기와 색으로 충분하다. */
+.toc__count b { font-weight: var(--w-bold); color: var(--ch-deep); }
+
+@media (max-width: 560px) {
+  .toc__link { grid-template-columns: auto 1fr auto; }
+  .toc__dots { display: none; }
+  .toc__count { grid-column: 3; grid-row: 1; }
+  .toc__sub { grid-column: 2 / -1; }
+}
+
+/* ══ 6-3. 표·그림 캡션 칩 ═════════════════════════════════════
+   관보 문법: 번호 칩 + 굵은 제목이 표 「위」에 온다.
+   번호는 CSS counter 가 아니라 실제 텍스트로 적는다 —
+   생성 콘텐츠는 aria-labelledby 접근명에 안정적으로 들어가지 않는다. */
+.tabnum {
+  display: inline-block; margin-right: var(--s2); padding: var(--s1) var(--s2);
+  border-radius: var(--r-sm);
+  background: var(--krds-border-strong); color: #fff;
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.02em;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+  vertical-align: 2px;
+}
+
+/* ══ 6-1. 제·개정 이력 ═══════════════════════════════════════
+   관보 간행물은 표지 바로 뒤에 이력을 둔다. 회차 문서라는 사실을
+   문서 스스로 밝히는 장치. */
+.hist {
+  display: grid; grid-template-columns: auto 1fr;
+  gap: 0 var(--pad-md);
+  margin: var(--s8) 0 0; padding: 0;
+}
+
+.hist__h {
+  grid-row: 1 / 3; align-self: start;
+  margin: 0; padding-right: var(--pad-md);
+  border-right: 2px solid var(--krds-primary-line);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.02em;
+  color: var(--krds-primary-deep); white-space: nowrap;
+}
+
+.hist__t {
+  width: 100%; border-collapse: collapse; font-size: var(--t-sm);
+  border-top: var(--rule-edge);
+}
+
+.hist__t th {
+  padding: var(--s2) var(--s4) var(--s2) 0; text-align: left; white-space: nowrap;
+  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-text-subtle);
+  border-bottom: var(--rule-head);
+}
+
+.hist__t td {
+  padding: var(--s3) var(--s4) var(--s3) 0; text-align: left; vertical-align: top;
+  line-height: var(--lh-sm); color: var(--krds-text);
+  border-bottom: var(--rule-row);
+}
+
+.hist__t tbody tr:last-child td { border-bottom: var(--rule-edge); }
+
+/* 표 셀의 max-width 는 표 레이아웃이 무시한다 — 안쪽 인라인 블록으로 잡아야 한다 */
+.hist__c { display: inline-block; max-width: var(--measure); }
+
+.hist__n {
+  color: var(--krds-text); font-weight: var(--w-bold);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 560px) {
+  .hist { grid-template-columns: 1fr; }
+  .hist__h { grid-row: auto; padding: 0 0 var(--s2); border-right: none; border-bottom: 2px solid var(--krds-primary-line); margin-bottom: var(--s3); }
+}
+
+/* ══ 6-1-2. 이 문서 읽는 법 (UTILIZE GUIDE) ══════════════════
+   관보 가이드의 활용법 면. 좌측 질문 라벨 단 + 우측 ▶ 지시.
+   차례가 「무엇이 있는가」라면 이것은 「어떻게 읽는가」다. */
+.guide {
+  margin: var(--s8) 0 0;
+  background: var(--krds-canvas);
+}
+
+.guide__h {
+  display: flex; align-items: baseline; gap: var(--s3);
+  margin: 0 0 var(--s2); padding: 0 0 var(--s3);
+  border-bottom: var(--rule-mid); border-bottom-color: var(--krds-border-strong);
+  font-size: var(--t-md); font-weight: var(--w-bold);
+}
+
+.guide__en {
+  margin-left: auto; font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.16em;
+  color: var(--krds-text-subtle);
+}
+
+.guide__l { margin: 0; padding: 0; }
+
+.guide__row {
+  display: grid; grid-template-columns: 12.5em minmax(0, 1fr);
+  gap: 0 var(--pad-md);
+  padding: var(--s4) var(--pad-md);
+  border-bottom: 1px solid var(--krds-divider);
+}
+
+.guide__l > .guide__row:last-child { border-bottom: none; }
+
+.guide__q {
+  margin: 0; padding-right: var(--pad-md);
+  border-right: 2px solid var(--krds-border);
+  /* 이 칸은 「질문 문장」이지 어깨 라벨이 아니다. 답(17px)의 표제이므로 답보다 작으면 안 된다. */
+  font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-base);
+  color: var(--krds-text-subtle);
+}
+
+.guide__a { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
+
+.guide__a li {
+  position: relative; padding-left: var(--s4);
+  max-width: var(--measure);
+  font-size: var(--t-base); line-height: var(--lh-base); color: var(--krds-text);
+}
+
+/* ▶ 지시 마커 — 관보 활용법 면의 화살표 */
+.guide__a li::before {
+  content: ""; position: absolute; left: 0; top: 0.62em;
+  width: 0; height: 0;
+  border: 4px solid transparent;
+  border-left: 6px solid var(--krds-primary); border-right-width: 0;
+}
+
+@media (max-width: 620px) {
+  .guide__row { grid-template-columns: 1fr; gap: var(--s2); }
+  .guide__q { padding: 0 0 var(--s2); border-right: none; border-bottom: 2px solid var(--krds-border); }
+}
+
+/* ══ 6-4. ※ 각주 ═════════════════════════════════════════════
+   관보 문법: 표·그림 아래에 한정 조건을 ※ 로 단다.
+   본문에 섞어 쓰면 한정이 주장처럼 읽힌다. */
+/* ── 문장 한 줄 — 한글 문서는 마침표에서 줄을 바꾼다 ──────────────────────────
+   문장을 이어 붙인 한글 문단은 기계가 쓴 글처럼 읽힌다. 한글 보고서의 기본은
+   「한 문장 한 줄」이다.
+
+   줄만 바꾸면 부족하다 — 실측: 문장의 26%(여백 주석 단은 54%)가 글줄 폭을 넘어 접힌다.
+   접히면 둘째 줄과 다음 문장의 첫 줄이 같은 자리에서 시작해 구별할 수 없다.
+   그래서 문장마다 블록으로 세우고 **이어지는 줄만 1em 내어쓴다** — 한 문장이 한 덩어리다.
+
+   text-indent 의 each-line 은 쓰지 않는다. Chrome 은 CSS.supports 에 true 를
+   돌려주고 계산값도 `-17px each-line` 으로 보여 주면서 **렌더에서는 무시한다**(실측). */
+.sn { display: block; padding-left: 1em; text-indent: -1em; }
+
+.note {
+  position: relative;
+  margin: var(--s3) 0 0; padding-left: 1.5em;
+  max-width: calc(var(--measure) + 1.5em);
+  font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--krds-text-subtle);
+}
+
+/* flex 로 하면 안의 <a> 가 별도 flex 항목이 되어 문장이 토막 난다.
+   ※ 는 행잉 인덴트로 매단다 — 관보 각주도 이 방식이다. */
+.note::before {
+  content: "\203B"; position: absolute; left: 0; top: 0;
+  color: var(--krds-text-muted); font-weight: var(--w-bold);
+}
+
+.note + .note { margin-top: var(--s1); }
+.note b, .figcap b { white-space: nowrap; }
+.note--in { margin-left: var(--s4); margin-right: var(--s4); }
+
+/* ══ 6-5. 확인 강도 표식 ══════════════════════════════════════
+   ●실기기 ◐시뮬레이터 ○산출물 —미확인.
+   본문의 `.tag--live`(초록) `.tag--data`(파랑) `.tag--soon`(회색 파선)과
+   같은 색을 쓴다 — 표 3-1 과 표 3-2 가 같은 말을 하게 하려는 것. */
+.dot {
+  display: inline-block; flex: 0 0 auto;
+  width: 13px; height: 13px; margin-right: var(--s2);
+  border-radius: 50%; vertical-align: -1px;
+  border: 2px solid currentColor;
+}
+
+.dot--full { background: currentColor; color: var(--krds-success); }
+.dot--half {
+  color: var(--krds-info);
+  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
+}
+.dot--open { color: var(--krds-border-strong); background: transparent; }
+.dot--none {
+  width: 12px; height: 0; margin-right: var(--s2);
+  border: none; border-top: 2px solid currentColor; border-radius: 0;
+  color: var(--krds-text-muted); vertical-align: 4px;
+}
+
+/* th 안에 들어가면 굵기 700 을 물려받는다. 같은 표식이 자리에 따라 두 굵기로 보이면
+   표식이 아니라 강조로 읽힌다 — 굵기를 못 박는다. */
+.lvl { display: inline-flex; align-items: center; white-space: nowrap; font-weight: var(--w-body); }
+.lvl--full { color: var(--krds-success-deep); }
+.lvl--half { color: #0a5d9e; }
+.lvl--open { color: var(--krds-text-subtle); }
+.lvl--none { color: var(--krds-text-muted); }
+.lvl .dot { margin-right: var(--s2); }
+
+/* 표 밴드 안의 범례 */
+.legend {
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4);
+  margin-left: auto; font-size: var(--t-sm); font-weight: var(--w-body);
+}
+
+.legend__i { display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.94); }
+.legend__i .dot { width: 11px; height: 11px; margin-right: var(--s2); border-width: 2px; }
+.legend .dot--full { color: #fff; }
+.legend .dot--half { color: #fff; }
+.legend .dot--open { color: rgba(255, 255, 255, 0.85); }
+.legend .dot--none { color: rgba(255, 255, 255, 0.72); }
+.legend .dot--none { width: 10px; margin-right: var(--s2); }
+
+@media (max-width: 720px) { .legend { margin-left: 0; width: 100%; } }
+
+/* ══ 7. 요약면 ════════════════════════════════════════════════ */
+.sum {
+  margin: var(--s8) 0 0;
+  background: var(--krds-canvas);
+}
+
+.sum__h {
+  display: flex; align-items: baseline; gap: var(--s3);
+  margin: 0 0 var(--s2); padding: 0 0 var(--s3);
+  border-bottom: var(--rule-mid); border-bottom-color: var(--krds-border-strong);
+  color: var(--krds-text);
+  font-size: var(--t-md); font-weight: var(--w-bold);
+}
+
+.sum__h span {
+  margin-left: auto; font-size: var(--t-sm); font-weight: var(--w-body);
+  color: var(--krds-text-subtle); font-variant-numeric: tabular-nums;
+}
+
+/* 일곱 건의 상태 분포 — 숫자만으로는 비율이 안 잡힌다 */
+.sum__bar {
+  display: flex; margin: var(--s4) 0 0;
+  border-top: var(--rule-thin); border-top-color: var(--krds-border);
+  border-bottom: var(--rule-thin); border-bottom-color: var(--krds-border);
+}
+
+.sum__seg {
+  display: flex; align-items: center; gap: var(--s2);
+  width: var(--w); min-width: 0; padding: var(--s3) var(--s4);
+  font-size: var(--t-sm); white-space: nowrap; overflow: hidden;
+}
+
+.sum__seg b { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
+
+.sum__seg--done { background: var(--krds-surface); color: var(--krds-text-subtle); }
+.sum__seg--wait {
+  background: var(--krds-warning-surface); color: var(--krds-warning-text);
+  border-left: 3px solid var(--krds-warning);   /* 두 구간의 실제 경계다 */
+}
+
+.sum .note { margin: var(--s3) 0 var(--s4); }
+
+/* ══ 7-2. 수치 세 칸 — 첫 칸이 독자 몫 ═══════════════════════ */
+.tally {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  margin: var(--s4) 0 0; padding: 0; list-style: none;
+  border-top: var(--rule-head); border-bottom: var(--rule-edge);
+}
+
+@media (max-width: 720px) { .tally { grid-template-columns: 1fr; } }
+
+.tally__cell {
+  display: flex; flex-direction: column;
+  padding: var(--s6) var(--s6) var(--s4); border-right: 1px solid var(--krds-border);
+}
+
+.tally__cell:last-child { border-right: none; }
+
+@media (max-width: 720px) {
+  .tally__cell { border-right: none; border-bottom: 1px solid var(--krds-border); }
+  .tally__cell:last-child { border-bottom: none; }
+}
+
+.tally__cell--you {
+  background: var(--krds-primary-surface);
+  transition: background 0.3s ease;
+}
+
+/* 진행 상태 축 — 다 끝나면 강조를 거둔다 */
+.tally__cell--you.is-clearedall { background: var(--krds-success-surface); }
+
+.tally__n {
+  margin: 0; font-size: var(--t-2xl); font-weight: var(--w-bold); line-height: var(--lh-2xl);
+  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
+}
+
+/* 자식 결합자여야 한다 — 자손이면 .roll 안의 .roll__d 까지 17px 로 줄어든다 */
+.tally__n > span:not(.roll) { margin-left: var(--s1); font-size: var(--t-base); font-weight: var(--w-body); letter-spacing: 0; }
+
+.tally__cell--you .tally__n { color: var(--krds-primary-deep); }
+.tally__cell--you.is-clearedall .tally__n { color: var(--krds-success-deep); }
+
+.tally__l { margin: var(--s2) 0 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--krds-text-muted); }
+.tally__cell--you .tally__l { color: var(--krds-primary-hover); font-weight: var(--w-bold); }
+.tally__cell--you.is-clearedall .tally__l { color: var(--krds-success-deep); }
+
+.tally__go {
+  margin-top: var(--s3); align-self: flex-start;
+  font-size: var(--t-sm); font-weight: var(--w-bold);
+  color: var(--krds-primary-hover);
+  text-decoration: underline; text-underline-offset: 4px;
+}
+
+.tally__go::after { content: " →"; }
+
+/* 숫자 롤 [Key-path B-3] */
+
+/* ══ 8. 절 — 머리는 간지다 ═══════════════════════════════════
+   PDF 는 간지(전면 파스텔)와 절 밴드를 둘 다 쓴다. 한 장 안에 절이
+   여럿이라서다. 이 문서는 절 = 장이므로 하나로 합친다.
+   장 색은 [data-chapter] 가 --ch / --ch-deep / --ch-surf / --ch-line 으로 준다. */
+.part {
+  margin-top: var(--s16);
+  scroll-margin-top: calc(var(--topbar) + var(--rail) + var(--s4));
+}
+
+.part__head {
+  display: flex; align-items: stretch; gap: var(--pad-md);
+  margin-bottom: var(--s8);
+  padding: var(--pad-md);
+  background: var(--ch-surf);
+  border-left: var(--rule-thick); border-left-color: var(--ch);
+}
+
+/* 「제N절」 + 세로 괘선 — 관보 간지의 왼쪽 기둥 */
+.part__no {
+  flex: 0 0 auto;
+  display: flex; align-items: flex-start;
+  padding-right: var(--pad-md);
+  border-right: 2px solid var(--ch);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.02em;
+  color: var(--ch-deep); white-space: nowrap;
+}
+
+.part__main { flex: 1 1 auto; min-width: 0; }
+
+.part__line {
+  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4);
+}
+
+.part__title {
+  flex: 1 1 auto; margin: 0;
+  font-size: var(--t-xl); font-weight: var(--w-bold); line-height: var(--lh-xl);
+  color: var(--ch-deep);
+}
+
+.part__count {
+  flex: 0 0 auto;
+  color: var(--ch-deep);
+  font-size: var(--t-sm); font-weight: var(--w-bold);
+}
+
+.part__lede {
+  margin: var(--s4) 0 0; max-width: var(--measure);
+  font-size: var(--t-base); line-height: var(--lh-base); color: var(--ch-deep);
+}
+
+@media (max-width: 560px) {
+  .part__head { flex-direction: column; gap: var(--s4); }
+  .part__no {
+    padding: 0 0 var(--s3); border-right: none;
+    border-bottom: 2px solid var(--ch);
+  }
+}
+
+/* ══ 8-2. 두 단 본문 — 좌측 여백 주석 단 ══════════════════════
+   이 문서가 「카드 목록」이 아니라 「안내서」로 읽히게 하는 장치.
+   관보 가이드는 모든 본문 쪽에 ? Why / Key Point / Advice 를 여백에 둔다.
+   내용은 독자가 실제로 던지는 질문이어야 한다 — 장식이면 넣지 않는 게 낫다.
+
+   화면에서는 sticky 로 절을 읽는 내내 따라온다(쪽이 없으니 쪽마다 반복할 수 없다).
+   900px 미만에서는 본문 위 가로 띠로 접힌다. */
+.part__grid {
+  display: grid; grid-template-columns: var(--marg) minmax(0, 1fr);
+  gap: clamp(var(--s6), 3vw, var(--marg-gap)); align-items: start;
+}
+
+.part__body { min-width: 0; }
+
+.marg { display: grid; gap: var(--s4); position: sticky; top: calc(var(--topbar) + 22px); }
+
+.marg__b {
+  padding-left: var(--s3);
+  border-left: 3px solid var(--ch-line);
+}
+
+.marg__k {
+  display: flex; align-items: center; gap: var(--s2);
+  margin: 0 0 var(--s1);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.03em;
+  color: var(--ch-deep);
+}
+
+/* 배너의 원형 표식(!,i,✓) 문법을 그대로 빌린다 — 같은 뜻엔 같은 장치 */
+.marg__i {
+  flex: 0 0 auto; display: inline-flex;
+  align-items: center; justify-content: center;
+  width: 18px; height: 18px; border-radius: 50%;
+  background: var(--ch); color: #fff;
+  font-size: var(--t-sm); font-weight: var(--w-bold); line-height: var(--lh-sm);
+}
+
+.marg__b--adv .marg__i { background: var(--krds-text-muted); }
+.marg__b--adv .marg__k { color: var(--krds-text-subtle); }
+.marg__b--adv { border-left-color: var(--krds-border); }
+
+.marg__t {
+  margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm);
+  color: var(--krds-text-subtle);
+}
+
+.marg__b--why .marg__t { font-weight: var(--w-bold); color: var(--ch-deep); }
+
+@media (max-width: 900px) {
+  .part__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
+  .marg {
+    position: static;
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+    gap: var(--s4) var(--s6);
+    padding: var(--s4) 0;
+    border-top: var(--rule-mid); border-top-color: var(--ch);
+    border-bottom: var(--rule-thin); border-bottom-color: var(--krds-divider);
+  }
+  .marg__b { padding-left: var(--s3); }
+}
+
+/* ══ 9. 01절 — 독자 몫 ═══════════════════════════════════════ */
+.asks { display: grid; margin: 0; padding: 0; list-style: none; }
+
+.ask {
+  padding-top: var(--s4);
+  border-top: var(--rule-mid); border-top-color: var(--krds-primary);
+  background: var(--krds-canvas);
+  scroll-margin-top: calc(var(--topbar) + var(--rail) + var(--s6));
+  transition: border-color 0.3s ease-out;
+}
+
+.ask__head {
+  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
+  padding: 0 0 var(--s3);
+  border-bottom: var(--rule-thin); border-bottom-color: var(--krds-divider);
+  transition: background 0.3s ease-out, border-color 0.3s ease-out;
+}
+
+.ask.is-urgent { border-color: var(--krds-danger-line); }
+.ask.is-urgent .ask__head {
+  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) 0;
+  padding: var(--s3) var(--s4);
+  background: var(--krds-danger-surface);
+  border-bottom-color: var(--krds-danger-line);
+}
+
+.ask__no {
+  flex: 0 0 auto; padding: var(--s1) var(--s2); border-radius: var(--r-sm);
+  background: var(--krds-primary); color: #fff;
+  font-size: var(--t-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
+}
+
+.ask.is-urgent .ask__no { background: var(--krds-danger); }
+
+.ask__title {
+  flex: 1 1 240px; margin: 0;
+  font-size: var(--t-md); font-weight: var(--w-bold); line-height: var(--lh-md);
+}
+
+.ask__flag {
+  flex: 0 0 auto; padding: var(--s1) var(--s2); border-radius: var(--r-sm);
+  background: var(--krds-danger); color: #fff;
+  font-size: var(--t-sm); font-weight: var(--w-bold);
+}
+
+.ask__ref {
+  flex: 0 0 auto;
+  color: var(--krds-primary-hover);
+  font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap;
+  text-decoration: underline; text-underline-offset: 3px;
+  text-decoration-color: var(--krds-primary-line);
+}
+
+.ask__ref:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
+
+/* 「처리함」 컨트롤 — 스크립트가 있을 때만 삽입된다 */
+.ask__check {
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s2);
+  margin-left: auto; padding: var(--s1) var(--s3) var(--s1) var(--s2);
+  border: 1px solid var(--krds-border); border-radius: var(--r-ui);
+  background: var(--krds-canvas); color: var(--krds-text-subtle);
+  font-family: inherit; font-size: var(--t-sm); font-weight: var(--w-bold);
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.ask__check:hover { border-color: var(--krds-primary); color: var(--krds-primary-hover); }
+
+.ask__box {
+  width: 17px; height: 17px; border-radius: var(--r-sm);
+  border: 2px solid var(--krds-border-strong);
+  background: var(--krds-canvas);
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.ask__box::after {
+  content: "\2713"; color: #fff; font-size: var(--t-sm); font-weight: var(--w-bold);
+  opacity: 0; transform: scale(0.6);
+}
+
+.ask__check[aria-pressed="true"] {
+  background: var(--krds-success-surface);
+  border-color: var(--krds-success);
+  color: var(--krds-success-deep);
+}
+
+.ask__check[aria-pressed="true"] .ask__box {
+  background: var(--krds-success); border-color: var(--krds-success);
+  animation: check-pop 0.26s cubic-bezier(0.34, 1.5, 0.64, 1);
+}
+
+.ask__check[aria-pressed="true"] .ask__box::after {
+  opacity: 1; transform: scale(1);
+  transition: opacity 0.15s ease-out 0.06s, transform 0.15s ease-out 0.06s;
+}
+
+@keyframes check-pop { from { transform: scale(0.6); } to { transform: scale(1); } }
+
+/* 처리 표시된 카드는 「흐려지는」 것이 아니라 「강조를 내려놓는」 것이다.
+   opacity·grayscale 로 죽이면 글자 대비가 무너진다 — 실측 2.26~3.61 (기준 4.5).
+   색을 중립으로 내리고 번호 칩만 완료색으로 바꾼다. 글자는 그대로 읽힌다. */
+.ask.is-cleared {
+  border-color: var(--krds-border);
+  transition: border-color 0.2s ease-in;
+}
+
+.ask.is-cleared .ask__head {
+  background: var(--krds-surface);
+  border-bottom-color: var(--krds-border);
+  transition: background 0.2s ease-in, border-color 0.2s ease-in;
+}
+
+.ask.is-cleared .ask__no {
+  background: var(--krds-success); color: #fff;
+  transition: background 0.2s ease-in;
+}
+
+.ask.is-cleared .ask__title { color: var(--krds-text-subtle); }
+.ask.is-cleared .ask__flag { background: var(--krds-border-strong); }
+
+/* 읽으라고 쓴 글은 본문 색으로 조판한다. 보조 회색은 캡션·라벨의 몫이다. */
+.ask__body {
+  margin: 0; padding: var(--s3) 0 var(--s6);
+  max-width: var(--measure);
+  font-size: var(--t-base); line-height: var(--lh-base);
+  color: var(--krds-text);
+}
+
+/* ══ 10. 02절 — 요지 ═════════════════════════════════════════ */
+.gist {
+  display: grid; margin: 0; padding: 0; list-style: none;
+  border-top: var(--rule-edge); border-bottom: var(--rule-edge);
+}
+
+.gist__item { padding: var(--s6) 0; border-bottom: var(--rule-row); }
+.gist__item:last-child { border-bottom: none; }
+
+.gist__lead {
+  margin: 0 0 var(--s2); max-width: var(--measure);
+  font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-base);
+}
+
+.gist__body { margin: 0; max-width: var(--measure); font-size: var(--t-base); line-height: var(--lh-base); color: var(--krds-text); }
+
+/* KRDS Critical 배너 */
+.urgent {
+  margin: var(--s6) 0 0; padding: var(--s4) var(--s6);
+  background: var(--krds-danger-surface);
+  border-left: var(--rule-thick); border-left-color: var(--krds-danger);
+}
+
+.urgent__k { margin: 0 0 var(--s2); font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-danger-text); }
+.urgent__t { margin: 0; max-width: var(--measure); font-size: var(--t-base); line-height: var(--lh-base); }
+.urgent strong { color: var(--krds-danger-text); }
+
+/* ══ 11. 03절 — 일곱 건 한눈에 ═══════════════════════════════ */
+/* 감싸개는 상자가 아니다 — 가로 스크롤 기능만 남긴다.
+   구조는 표 자신의 4괘선(위 굵은 줄 / 헤더 아래 / 행 사이 / 맨 아래 굵은 줄)이 만든다. */
+.board-wrap { overflow-x: auto; }
+
+.board { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-sm); }
+
+/* 관보 캡션: 전폭 색 밴드가 표 「위」에 얹힌다. 칩보다 훨씬 세다. */
+.board__cap { padding: 0; text-align: left; }
+
+.board__band {
+  display: flex; align-items: center; gap: var(--s2);
+  padding: var(--s3) var(--s4);
+  background: var(--ch); color: #fff;
+  /* 색 밴드가 「표 위 굵은 줄」을 겸한다 */
+  font-size: var(--t-base); font-weight: var(--w-bold);
+}
+
+.board__band .tabnum {
+  margin: 0; background: rgba(0, 0, 0, 0.24); color: #fff;
+  vertical-align: baseline;
+}
+
+.board__caphint {
+  display: block; padding: var(--s3) 0; max-width: var(--measure);
+  border-bottom: var(--rule-row);
+  font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--krds-text-subtle);
+}
+
+.board thead th {
+  padding: var(--s3) var(--s4); text-align: left;
+  font-size: var(--t-sm); font-weight: var(--w-bold);
+  background: var(--krds-surface); color: var(--krds-text-subtle);
+  border-bottom: var(--rule-head); white-space: nowrap;
+}
+
+.board tbody th, .board tbody td {
+  padding: var(--s3) var(--s4); text-align: left; font-weight: var(--w-body);
+  line-height: var(--lh-sm);
+  border-bottom: var(--rule-row);
+}
+
+/* 맨 아래 굵은 줄 — 이게 없으면 표가 「표」가 아니라 「목록」으로 읽힌다 */
+.board tbody tr:last-child th, .board tbody tr:last-child td { border-bottom: var(--rule-edge); }
+
+/* 행 그룹 — 관보 매트릭스는 왼쪽 열을 병합해 묶는다.
+   병합 셀은 좁은 화면에서 무너지므로 구분 행으로 옮겨 같은 효과를 낸다. */
+.board tbody tr.grp th {
+  padding: var(--s2) var(--s4);
+  background: var(--krds-surface-deep); color: var(--krds-text-subtle);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.02em;
+  border-top: var(--rule-head); border-bottom: var(--rule-head);
+}
+
+.board tbody tr.grp:hover { background: none; }
+.board tbody tr.grp th span { float: right; font-weight: var(--w-body); color: var(--krds-text-muted); }
+.board tbody tr:hover { background: var(--krds-surface); }
+.board tbody th { font-weight: var(--w-body); }
+.board__ref { font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+@media (max-width: 719px) {
+  .board-wrap { overflow-x: visible; }
+  .board, .board tbody { display: block; min-width: 0; }
+  .board thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .board__cap { display: block; }
+  .board tbody tr {
+    display: grid; grid-template-columns: 1fr auto; align-items: center;
+    gap: var(--s2) var(--s2); padding: var(--s4) 0; border-bottom: var(--rule-row);
+  }
+  .board tbody tr:last-child { border-bottom: var(--rule-edge); }
+  .board tbody th, .board tbody td { display: block; padding: 0; border-bottom: none !important; }
+  .board tbody th { grid-column: 1 / -1; font-weight: var(--w-bold); }
+  .board__ref { grid-column: 2; grid-row: 2 / 4; justify-self: end; }
+
+  /* 매트릭스는 열 이름이 값의 뜻이다 — thead 가 숨으면 라벨을 셀에 붙여야 한다 */
+  .board--mx tbody tr { grid-template-columns: 1fr 1fr; gap: var(--s2); }
+  .board--mx tbody th { grid-column: 1 / -1; }
+  .board--mx tbody td::before {
+    content: attr(data-k); display: block; margin-bottom: var(--s1);
+    font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.03em;
+    color: var(--krds-text-muted);
+  }
+}
+
+/* ══ 12. 상태 표식 ════════════════════════════════════════════ */
+/* 칩(면 + 테두리)이 아니라 기호 + 색 글자다.
+   표 3-2·부록 2 의 확인 강도 표식(●◐○─)과 같은 체계로 수렴시킨다 —
+   같은 문서 안에서 같은 뜻을 두 문법으로 말하지 않는다. */
+.tag {
+  display: inline-flex; align-items: baseline; gap: var(--s1);
+  font-size: var(--t-sm); white-space: nowrap;   /* 표 셀의 「값」이다 — .lvl 과 같은 등급 */
+}
+
+.tag::before { font-weight: var(--w-body); }
+
+.tag--done { color: var(--krds-text-subtle); }
+.tag--done::before { content: "\25A0"; }                                /* 끝남 */
+
+.tag--wait { color: var(--krds-warning-text); }
+.tag--wait::before { content: "\25A1"; }                                /* 대기 */
+
+.tag--live { color: var(--krds-success-deep); }
+.tag--live::before { content: "\25CF"; color: var(--krds-success); }    /* 실기기 */
+
+.tag--data { color: #0a5d9e; }
+.tag--data::before { content: "\25D0"; color: var(--krds-info); }       /* 산출물 */
+
+.tag--soon { color: var(--krds-text-subtle); font-weight: var(--w-body); }
+.tag--soon::before { content: "\2014"; color: var(--krds-text-muted); } /* 미확인 */
+
+/* ══ 13. 04·05절 — 건 필드표 ═════════════════════════════════ */
+.sheets { display: grid; gap: var(--s8); }
+
+/* 건은 카드가 아니라 「제목 + 표」다. 상자를 없애고 표 4괘선이 구조를 맡는다. */
+.sheet {
+  scroll-margin-top: calc(var(--topbar) + var(--rail) + var(--s6));
+}
+
+.sheet__head {
+  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
+  padding: 0 0 var(--s3);
+  border-bottom: var(--rule-edge);   /* 표 위 굵은 줄 */
+}
+
+/* 건 번호는 그 절의 장 색을 단다 — 본문에서도 장이 어디인지 읽힌다 */
+.sheet__no {
+  flex: 0 0 auto; padding: var(--s1) var(--s2); border-radius: var(--r-sm);
+  background: var(--ch, var(--krds-border-strong)); color: #fff;
+  font-size: var(--t-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
+}
+
+.sheet__title { flex: 1 1 240px; margin: 0; font-size: var(--t-md); font-weight: var(--w-bold); line-height: var(--lh-md); }
+
+.sheet__grid { width: 100%; border-collapse: collapse; }
+
+.sheet__grid th, .sheet__grid td {
+  padding: var(--s3) var(--s4); text-align: left; vertical-align: top;
+  border-bottom: var(--rule-row);
+}
+
+.sheet__grid th:first-child { padding-left: 0; }
+.sheet__grid td:last-child { padding-right: 0; }
+
+/* 맨 아래 굵은 줄 */
+.sheet__grid tr:last-child th, .sheet__grid tr:last-child td { border-bottom: var(--rule-edge); }
+
+.sheet__grid th {
+  width: 8.5em; min-width: 96px;
+  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-text-subtle);
+  border-right: var(--rule-row); white-space: nowrap;   /* 라벨-값 양식표의 열 구분선 */
+}
+
+.sheet__grid td p { margin: 0; max-width: var(--measure); font-size: var(--t-base); line-height: var(--lh-base); color: var(--krds-text); }
+
+/* 「미결」은 앞의 네 행과 종류가 다른 행이다 — 앞은 기술(記述), 이건 요구다.
+   inset box-shadow 로 띠를 그리거나 한쪽 보더 색만 땜질하지 않는다.
+   성격이 다른 행은 실제 가로 괘선으로 가른다(관보 표의 기본 문법). */
+.sheet__grid tr.open > * {
+  background: var(--krds-warning-surface);
+  border-top: var(--rule-mid); border-top-color: var(--krds-warning);
+}
+
+.sheet__grid tr.open th { color: var(--krds-warning-text); }
+
+@media (max-width: 680px) {
+  .sheet__grid, .sheet__grid tbody, .sheet__grid tr,
+  .sheet__grid th, .sheet__grid td { display: block; width: auto; }
+  .sheet__grid th { padding: var(--s3) 0 0; border-right: none; border-bottom: none; }
+  .sheet__grid tr.open > * { border-top: none; }
+  .sheet__grid tr.open th { border-top: var(--rule-mid); border-top-color: var(--krds-warning); }
+  .sheet__grid td { padding: var(--s1) 0 var(--s3); }
+  .sheet__grid tr:last-child td { border-bottom: var(--rule-edge); }
+}
+
+/* ══ 13-2. 의존 흐름도 ═══════════════════════════════════════
+   「서버가 할 일 → 앱은 이미 준비됨 → 그러면 이렇게 된다」.
+   글로 세 번 반복해 설명하던 것을 한 번에 보이게 한다. */
+.figcap {
+  margin: 0 0 var(--s2); max-width: var(--measure);
+  font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-base); color: var(--krds-text);
+}
+
+.fignum {
+  display: inline; margin-right: var(--s2);
+  /* 「그림 5-1」은 「표 3-1」(.tabnum)과 같은 역할 — 캡션 앞머리 번호.
+     크기를 적지 않으면 캡션(17px)을 상속해 표 번호(14px)와 어긋난다. */
+  font-size: var(--t-sm);
+  color: var(--krds-text);
+  font-weight: var(--w-bold); letter-spacing: 0.02em;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+
+.flow { margin: 0; }
+
+.flow__wrap {
+  border-top: var(--rule-edge);
+  overflow-x: auto; overflow-y: hidden;
+}
+
+.flow__head, .flow__row {
+  display: grid;
+  grid-template-columns: 4.6em minmax(180px, 1fr) minmax(170px, 0.92fr) minmax(180px, 1.05fr);
+  min-width: 660px;
+}
+
+.flow__head {
+  background: var(--krds-surface);
+  border-bottom: 1px solid var(--krds-border);
+}
+
+.flow__hk {
+  padding: var(--s2) var(--s4);
+  border-left: 1px solid var(--krds-divider);
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.02em;
+  color: var(--krds-text-subtle); white-space: nowrap;
+}
+
+.flow__hk:first-child { border-left: none; }
+.flow__hk--out { color: var(--ch-deep); }
+
+.flow__rows { margin: 0; padding: 0; list-style: none; }
+.flow__row { border-bottom: 1px solid var(--krds-divider); }
+.flow__row:last-child { border-bottom: none; }
+
+.flow__no {
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--s4) var(--s2);
+  background: var(--ch-surf); color: var(--ch-deep);
+  font-size: var(--t-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
+}
+
+.flow__c {
+  position: relative;
+  padding: var(--s4) var(--s4);
+  border-left: 1px solid var(--krds-divider);
+  font-size: var(--t-sm); line-height: var(--lh-sm);
+}
+
+/* 단계 사이 화살표 */
+.flow__c--srv::after, .flow__c--app::after {
+  content: ""; position: absolute; right: -1px; top: 50%; z-index: 2;
+  transform: translate(50%, -50%);
+  width: 0; height: 0;
+  border: 6px solid transparent;
+  border-left: 8px solid var(--ch); border-right-width: 0;
+}
+
+.flow__c--srv { background: var(--krds-warning-surface); color: var(--krds-warning-text); font-weight: var(--w-bold); }
+.flow__c--app { color: var(--krds-text-subtle); }
+.flow__c--out { color: var(--krds-text); }
+
+.flow__c small {
+  display: block; margin-top: var(--s1);
+  font-size: var(--t-sm); font-weight: var(--w-body); line-height: var(--lh-sm); color: var(--krds-text-subtle);
+}
+
+/* 경로·기술 문자열은 본문 활자로 읽히면 안 된다 — 끊어 읽을 자리도 다르다 */
+.path {
+  padding: 0 var(--s1);
+  background: rgba(30, 33, 36, 0.07);
+  font-family: ui-monospace, SFMono-Regular, Menlo, "Consolas", monospace;
+  font-size: var(--t-sm); overflow-wrap: anywhere;
+  color: var(--krds-text);
+}
+
+/* 좁은 화면: 가로 3단을 세로 3단으로 접는다.
+   .flow__c 는 <span> 이므로 반드시 다시 블록화해야 한다 —
+   grid 가 풀리면 인라인으로 되돌아가 서로 겹친다. */
+@media (max-width: 700px) {
+  .flow__wrap { overflow-x: visible; border: none; }
+  .flow__head { display: none; }
+
+  .flow__row {
+    display: block; min-width: 0;
+    padding: var(--s4) 0 var(--s6);
+    border-bottom: 1px solid var(--krds-divider);
+  }
+
+  .flow__no {
+    display: block; padding: 0 0 var(--s3);
+    background: none; text-align: left; font-size: var(--t-sm);
+  }
+
+  .flow__c {
+    display: block; position: relative;
+    margin: 0 0 var(--s6); padding: var(--s2) 0 var(--s2) var(--s3);
+    border-left: var(--rule-mid); border-left-color: var(--krds-border);
+  }
+
+  .flow__c::before {
+    content: attr(data-k); display: block; margin-bottom: var(--s1);
+    font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.04em;
+    color: var(--krds-text-muted);
+  }
+
+  .flow__c--srv { border-left-color: var(--krds-warning); }
+  .flow__c--srv::before { color: var(--krds-warning-text); }
+  .flow__c--out { margin-bottom: 0; border-left-color: var(--ch); }
+
+  .flow__c--srv::after, .flow__c--app::after {
+    left: 50%; right: auto; top: auto; bottom: -18px;
+    transform: translateX(-50%);
+    border: 7px solid transparent;
+    border-top: 9px solid var(--ch); border-bottom-width: 0; border-left-width: 7px;
+  }
+}
+
+/* ══ 14. 06절 — 확인하지 못한 것 ═════════════════════════════ */
+.limit {
+  padding: var(--s4) var(--s6);
+  background: var(--krds-warning-surface);
+  border-left: var(--rule-thick); border-left-color: var(--krds-warning);
+}
+
+.limit__k { margin: 0 0 var(--s2); font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-warning-text); }
+.limit__list { display: grid; gap: var(--s2); margin: 0; padding-left: 1.15em; }
+.limit__list li { max-width: var(--measure); font-size: var(--t-base); line-height: var(--lh-base); }
+
+/* ══ 14-2. 부록 ═══════════════════════════════════════════════
+   본문에서 반복 참조되는 기준·환경을 뒤로 뺀다. 본문이 가벼워진다. */
+.apx { margin: var(--s16) 0 0; }
+
+.apx__h {
+  display: flex; align-items: baseline; gap: var(--s3);
+  margin: 0 0 var(--s4); padding-bottom: var(--s3);
+  border-bottom: 2px solid var(--krds-border-strong);
+  font-size: var(--t-lg); font-weight: var(--w-bold);
+}
+
+.apx__en {
+  font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: 0.16em;
+  color: var(--krds-text-muted);
+}
+
+.apx__b { margin: 0 0 var(--s6); }
+.apx__b:last-child { margin-bottom: 0; }
+
+.apx__t {
+  display: flex; align-items: baseline; gap: var(--s2);
+  margin: 0 0 var(--s2);
+  font-size: var(--t-md); font-weight: var(--w-bold); color: var(--krds-text);
+}
+
+.apx__no {
+  color: var(--krds-text);
+  font-weight: var(--w-bold); white-space: nowrap;
+}
+
+.apx__g {
+  width: 100%; border-collapse: collapse; font-size: var(--t-sm);
+  border-top: var(--rule-edge);
+}
+
+.apx__g th, .apx__g td {
+  padding: var(--s3) var(--s4); text-align: left; vertical-align: top;
+  line-height: var(--lh-sm);
+  border-bottom: var(--rule-row);
+}
+
+.apx__g th:first-child { padding-left: 0; }
+.apx__g td:last-child { padding-right: 0; }
+.apx__g tr:last-child th, .apx__g tr:last-child td { border-bottom: var(--rule-edge); }
+
+/* 면 대신 굵은 글자 + 세로선 — .sheet__grid 와 같은 양식표 문법 */
+.apx__g th {
+  width: 12em; min-width: 130px; font-weight: var(--w-bold);
+  color: var(--krds-text-subtle);
+  border-right: var(--rule-row);
+}
+
+.apx__g td b { display: block; margin-bottom: 0; }
+
+/* small 은 셀 안의 블록이므로 max-width 가 듣는다 (셀 자체는 표 레이아웃이 무시) */
+.apx__g td small {
+  display: block; max-width: var(--measure); margin-top: var(--s1);
+  color: var(--krds-text-subtle); font-size: var(--t-sm); line-height: var(--lh-sm);
+}
+
+/* 표 셀의 max-width 는 표 레이아웃이 무시한다 — 표 전체를 잡아야 글줄이 잡힌다. */
+.apx__wrap { max-width: 720px; }   /* 라벨 열 12em + 셀 여백 + 본문 43자 */
+
+@media (max-width: 620px) {
+  .apx__g, .apx__g tbody, .apx__g tr, .apx__g th, .apx__g td { display: block; width: auto; }
+  .apx__g th { border-right: none; border-bottom: none; min-width: 0; padding-bottom: 0; }
+  .apx__g td { padding-top: var(--s2); }
+}
+
+/* ══ 15. 판권지 — 관보식으로 문서를 닫는다 ═══════════════════ */
+.eof { margin-top: var(--s16); }
+
+.colophon {
+  padding: var(--s6) 0;
+  border-top: var(--rule-thick); border-top-color: var(--krds-primary-deep);
+  border-bottom: var(--rule-thin); border-bottom-color: var(--krds-border);
+  background: var(--krds-canvas);
+}
+
+.colophon__t {
+  margin: 0 0 var(--s1); font-size: var(--t-lg); font-weight: var(--w-bold);
+  color: var(--krds-primary-deep);
+}
+
+.colophon__sub {
+  margin: 0 0 var(--s4); padding-bottom: var(--s4); max-width: var(--measure);
+  border-bottom: 1px solid var(--krds-divider);
+  font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--krds-text-subtle);
+}
+
+.colophon__grid { display: grid; gap: 0; margin: 0; }
+
+.colophon__grid > div {
+  display: grid; grid-template-columns: 6.5em 1fr;
+  gap: var(--s3); padding: var(--s2) 0;
+  border-bottom: 1px solid var(--krds-divider);
+}
+
+.colophon__grid > div:last-of-type { border-bottom: none; }
+
+.colophon__grid dt {
+  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--krds-text-muted);
+}
+
+.colophon__grid dd { margin: 0; max-width: var(--measure); font-size: var(--t-sm); line-height: var(--lh-sm); }
+
+.colophon__mark {
+  display: flex; align-items: center; gap: var(--s3);
+  margin: var(--s4) 0 0; padding-top: var(--s4);
+  border-top: 1px solid var(--krds-border);
+  font-size: var(--t-sm); color: var(--krds-text-muted);
+}
+
+.colophon__mark b {
+  margin-left: auto; padding: var(--s1) var(--s3);
+  border: 1px solid var(--krds-border-strong); border-radius: var(--r-sm);
+  font-size: var(--t-sm); letter-spacing: 0.04em; color: var(--krds-text-subtle);
+}
+
+/* 독자가 실제로 오해할 수 있는 것을 적는다 — 체크 표시는 우리에게 오지 않는다 */
+.colophon__note {
+  margin: var(--s4) 0 0; max-width: calc(var(--measure) + 32px); padding: var(--s3) var(--s4);
+  background: var(--krds-surface);
+  border-left: 3px solid var(--krds-border-strong);
+
+  font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--krds-text-subtle);
+}
+
+.eof__note { margin: var(--s6) 0 0; max-width: var(--measure); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--krds-text-subtle); }
+
+/* ══ 16. 진입 모션 ════════════════════════════════════════════ */
+
+.ask:nth-child(2).is-in, .sheet:nth-child(2).is-in { animation-delay: 0.06s; }
+.ask:nth-child(3).is-in, .sheet:nth-child(3).is-in { animation-delay: 0.12s; }
+.ask:nth-child(4).is-in, .sheet:nth-child(4).is-in { animation-delay: 0.18s; }
+.ask:nth-child(5).is-in { animation-delay: 0.24s; }
+.ask:nth-child(6).is-in { animation-delay: 0.3s; }
+
+@keyframes rise { to { opacity: 1; transform: translateY(0); } }
+
+.ask.is-target, .sheet.is-target {
+  border-color: var(--krds-primary);
+  animation: flash 0.6s ease-out;
+}
+
+@keyframes flash {
+  0% { box-shadow: 0 0 0 0 var(--krds-primary-surface); }
+  35% { box-shadow: 0 0 0 5px var(--krds-primary-surface); }
+  100% { box-shadow: 0 0 0 0 var(--krds-primary-surface); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  
+  .ask__check[aria-pressed="true"] .ask__box::after { opacity: 1; transform: scale(1); }
+}
+
+/* ══ 17. 인쇄 = 진짜 페이지 문법 ══════════════════════════════
+   지원 범위는 실측·스펙 확인분에만 기댄다.
+
+   | 기능                     | Chrome 131+ | Firefox | Safari |
+   | @page size/margin        | O           | O       | O 18.2 |
+   | @page 마진 박스 + 쪽번호 | O           | X 856371| X      |
+   | thead 쪽 넘김 반복       | O           | O       | X 17205|
+   | break-after: avoid       | O           | X 1972340| X 294559 (avoid-page 로 보완)
+   | orphans / widows         | O           | X 137367| O      |
+
+   → 배포용 PDF 는 Chrome 131+ 에서 생성한다.
+     인쇄 대화상자의 「머리글 및 바닥글」은 반드시 체크 해제
+     (안 하면 브라우저 URL·날짜가 아래 푸터와 겹쳐 찍힌다).
+   → Paged.js 는 도입하지 않는다. 추가로 얻는 건 사실상 차례 쪽번호 하나인데
+     921KB · 3년 미유지보수 · 런타임 DOM 재조립(레일·진행률·체크와 충돌) 이다. */
+
+@page {
+  size: A4;
+  margin: 20mm 18mm 18mm;
+
+  /* Chrome 131+ 전용. FF·Safari 는 이 블록을 무시할 뿐 깨지지 않는다 */
+  @bottom-left {
+    content: counter(page);
+    font-family: "Pretendard GOV", sans-serif;
+    font-size: 10pt; font-weight: var(--w-bold); color: #1e2124;
+  }
+  @bottom-right {
+    content: "앱 도메인 전환 1차 보고 · FI-soft";
+    font-family: "Pretendard GOV", sans-serif;
+    font-size: 8.5pt; color: #6d7882;
+  }
+}
+
+/* 전면부 로마자 쪽번호(i·ii·iii)는 넣지 않는다.
+   관보 관례이지만 Chrome 이 `counter-reset: page` 를 무시하므로
+   전면을 로마자로 돌리면 본문이 1 이 아니라 7 부터 시작해 앞뒤가 어긋난다.
+   (#part-1 로 직접 지목해도 동일. 실측 2026-08-23 · Chrome 151)
+   → 표지만 번호 없이 두고 나머지는 연속 아라비아로 간다. */
+
+/* 표지에는 쪽번호·러닝 푸터를 찍지 않는다 */
+@page :first {
+  margin: 0;
+  @bottom-left { content: ""; }
+  @bottom-right { content: ""; }
+}
+
+@media print {
+  /* 진행 중인 transition 은 !important 보다 우선하므로 먼저 끈다 */
+  *, *::before, *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+
+  /* 없으면 장 색·태그 배경·간지 면이 전부 백지로 인쇄된다 */
+  html {
+    -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+  }
+
+  /* ── 화면 전용 크롬 ──
+     .rail 은 ≥1280px 에서 position:fixed 다. fixed 요소는 Chrome·FF 에서
+     매 인쇄 페이지에 반복되며 본문을 덮으므로 반드시 지운다. */
+  .topbar, .progress, .rail, .skip, .tally__go, .ask__check, .notice { display: none !important; }
+
+  .doc { max-width: none; padding: 0; }
+
+  /* ── 쪽 나누기: 표지 1쪽 · 차례 1쪽 · 절마다 새 쪽 ── */
+  /* 표지는 한 면을 가득 채운다. @page :first 가 여백 0 이므로 100vh = A4 전체.
+     grid 의 1fr 행(도해)이 늘어나면서 메타·발행처가 아래로 붙는다. */
+  .cover {
+    min-height: 100vh; margin: 0;   /* 화면용 margin-top 이 남으면 100vh+26px 가 되어 두 쪽으로 갈라진다 */
+    border: none;
+    break-after: page;
+    padding-bottom: 0;
+  }
+
+  .hist { break-after: page; margin-top: 0; }
+  .toc { break-before: page; break-after: page; padding-top: 0; }
+  .toc__link:hover { background: none; }
+  .guide { break-before: page; break-after: page; }
+  .sum { break-before: page; break-after: page; }
+
+  /* 부록은 판권지 앞, 새 쪽에서 */
+  .apx { break-before: page; margin-top: 0; }
+  .apx__b { break-inside: avoid; }
+
+  /* PART 간지는 한 면을 통째로 쓴다 */
+  .pt { break-before: page; break-after: page; margin-top: 0; }
+  /* 간지도 한 면을 채운다. 인쇄에서 vh 는 「용지 전체」이지 본문 영역이 아니다 —
+     A4 297mm 에서 위아래 여백 38mm 를 빼면 본문은 87.2vh 다. 넘기면 쪽이 하나 더 생긴다. */
+  .pt__panel { min-height: 84vh; }
+
+  .part { break-before: page; margin-top: 0; scroll-margin-top: 0; }
+  .eof { break-before: page; margin-top: 0; }
+
+  /* 여백 주석 단은 인쇄에서도 두 단으로 남는다 (쪽에는 여백이 있다) */
+  .part__grid { display: grid; grid-template-columns: 46mm 1fr; gap: 8mm; }
+  .marg { position: static; display: block; background: none; border: none; padding: 0; }
+  .marg__b { break-inside: avoid; margin-bottom: 7mm; }
+
+  /* break-after: avoid 는 FF·Safari 에서 무효(1972340 / 294559).
+     Safari 는 avoid-page 를 받으므로 둘을 겹쳐 쓴다. FF 는 이 층위를 포기한다. */
+  .part__head, .sheet__head, .ask__head, .toc__h {
+    break-after: avoid;
+    break-after: avoid-page;
+    break-inside: avoid;
+  }
+
+  /* ── 쪽 경계에서 잘리지 않게 ──
+     break-inside 에서 avoid-page 는 Safari 미지원이므로 plain avoid 를 쓴다. */
+  .tally, .ask, .urgent, .limit, .gist__item,
+  .cover__meta, .toc__link, .toc__band, .colophon, .board__band,
+  .sum, .note, .flow__row, .figcap, .pt__askl li {
+    break-inside: avoid;
+    box-shadow: none !important;
+  }
+
+  /* 흐름도는 가로 스크롤 컨테이너다 — 풀지 않으면 인쇄에서 잘린다 */
+  .flow__wrap { overflow: visible; }
+  .flow__head, .flow__row { min-width: 0; }
+  .figcap { break-after: avoid; break-after: avoid-page; }
+  .sum__bar { break-inside: avoid; }
+
+  /* 한 쪽보다 큰 카드를 avoid 로 묶으면 통째로 밀린 뒤 잘려 사라진다.
+     overflow:hidden 은 monolithic 후보이므로(css-break-3 §4.1) 반드시 푼다. */
+  .sheet {
+    break-inside: auto;
+    overflow: visible;
+    box-shadow: none !important;
+  }
+
+  .sheet__grid tr, .board tbody tr { break-inside: avoid; }
+
+  /* 표 헤더 반복. 스크롤 컨테이너를 풀어야 표 분할 자체가 가능하다. */
+  .board-wrap { overflow: visible; }
+  .board { min-width: 0; }
+  .board thead { display: table-header-group; }
+  .board thead th { position: static; }
+  /* 범례가 밴드 안에서 두 줄로 접히면 표 머리가 어긋난다 */
+  .legend { font-size: 8.5pt; gap: var(--s1) var(--s2); }
+  .board tbody tr:hover { background: none; }
+
+  p, li, .sheet__grid td p { orphans: 3; widows: 3; }
+
+  /* ── 모션 잔재 제거 ── */
+  
+
+  .ref { text-decoration: none; color: inherit; font-weight: var(--w-bold); }
+}