/* 언락 진단기 — v2 「갱지 복사물 + 토너 + 복사된 볼펜」 (DESIGN_v2 · 2026-09-11)
   ────────────────────────────────────────────────────────────────────────────
   세계: 먼저 겪은 사장이 복사해서 나눠 주는 한 장짜리 유인물. 갱지 위에 토너, 볼펜 표시는 복사기를
        거쳐 흐린 청색이 된다. 사진·스톡·이미지·SVG 0 — 전부 HTML 텍스트(스테이플 SVG 는 독립 게이트 2026-09-11 지문 3 으로 삭제).
   얼굴: 잘라 붙인 계약서 복사본(.cutout) — 세 조항을 계약서 조판(명조 500·1.6)으로, 사장을 묶는
        구절에 볼펜 밑줄(.pen), 오른쪽 난외에 「→ 3번」(.margin) — 실제로 그 문항으로 이동하고 답 상태를 되비춘다.
   시리즈 배제(tests/series_check.mjs 가 기계 강제): 지면 #c4baab(갱지 L76 — 라이트 대역 L78~97 은
        형제로 포화) · 면 1곳 #c5c2bf(설계값 #cec8c4 는 OFB 면과 dE 6.6 라 이동) · 강조 #276a8b(채움·선 전용,
        글자색 금지) · 웨이트 500/700(설계 500/800 은 OFB 선점 → 비킴) · 스케일 1.333 base 18 · 행간 1.5
        · radius 0 · 그림자 1층 경질(복사기 노광 — 오른쪽·아래 1px, 블러 0, .cutout 1곳) · 모션 0 · 자간 0.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --copy: #c4baab;      /* 지면 — 갱지 (L 76.0 · C 9 · h 84). 카드 없음 */
  --cutout: #c5c2bf;    /* 면(1곳) — 잘라 붙인 계약서 복사본 (L 78.6). 이것 외 면 없음 */
  /* 면 토큰: --cutout */
  --toner: #201d1a;     /* 본문·제목·버튼 채움 (토너 흑) — 8.75:1 on copy */
  --toner-2: #4a453f;   /* 보조 문장·힌트 — 4.95:1 on copy */
  --rule: #67605a;      /* 괘선·미선택 윤곽·복사본 가장자리선 — 3.23:1 on copy (비텍스트) */
  --pen: #276a8b;       /* 강조 — 복사된 볼펜: 밑줄·선택 윤곽·체크. 채움·선 전용, 글자색 금지 (3.11:1) */

  --sans: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif: "Noto Serif KR", "Apple Myungjo", "Batang", "Nanum Myeongjo", serif;

  /* 타입 스케일 1.333 · base 18 → 18 · 24 · 32 · 43 (4단계 · 최소 18 — 고령 사장) */
  --t1: 18px; --t2: 24px; --t3: 32px; --t4: 43px;
  /* 간격 4 · 8 · 16 · 24 · 32 · 48 · 64 */
}

/* 계약서 발췌 전용 — Noto Serif KR 500, 발췌 글리프만 서브셋(fonts/, OFL 1.1 동봉). 폴백도 명조. */
@font-face {
  font-family: "Noto Serif KR";
  src: url("fonts/NotoSerifKR-Medium-subset.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--copy); }
body {
  margin: 0;
  background: var(--copy);
  color: var(--toner);
  font-family: var(--sans);
  font-size: var(--t1);
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
a { color: var(--toner); text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, fieldset:focus-visible {
  outline: 3px solid var(--pen); outline-offset: 2px;
}
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0; }

/* 한 열(65ch)로 위에서 아래로. 65ch 는 본문 크기(18px) 컨테이너 여섯 곳에만 건다 — h2(32px)·괘선·행은 그 폭을 상속해
   오른쪽 끝이 하나다(독립 게이트 2026-09-11 지문 4: 요소별 65ch 는 글자 크기마다 다른 폭이 된다).
   복사본만 열보다 넓다(.wrap 전폭 = 100cqw) — 종이 위에 다른 종이를 붙인 것처럼. */
.wrap { max-width: 800px; margin: 0 auto; padding: 0 16px 64px; container-type: inline-size; }
.head, .q, .actions, .note, footer { max-width: 65ch; }

/* ── 머리 ── */
.head { padding: 48px 0 24px; }
.head h1 { font-size: var(--t4); }
.head .lede { margin: 16px 0 0; font-size: var(--t2); line-height: 1.5; color: var(--toner-2); }

/* ── 구역(답하는 장소) ── */
.place { margin: 48px 0 0; }
.place > h2 { font-size: var(--t3); padding-bottom: 8px; border-bottom: 2px solid var(--toner); }
.place-lede { margin: 8px 0 0; color: var(--toner-2); }

/* ── 문항 ── */
.q { border: 0; padding: 0; margin: 32px 0 0; min-width: 0; position: relative; }
.q legend { padding: 0; font-size: var(--t2); font-weight: 700; line-height: 1.2; }
.q .qno { font-variant-numeric: tabular-nums; }
/* 비어 있는 문항 표시 — 번호 앞 볼펜 세로 획(카드 보더가 아니라 8px 짧은 획) */
.q .qn { display: none; }
.q.missing .qn { display: inline-block; width: 2px; height: 24px; margin: 0 8px 0 0; vertical-align: text-bottom; background: var(--pen); }
.q:target { outline: 2px solid var(--pen); outline-offset: 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.choice {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 16px;
  border: 1px solid var(--rule); border-radius: 0;
  background: transparent; cursor: pointer;
}
.choice input { margin: 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--pen); }
.choice:has(input:checked) { outline: 3px solid var(--pen); outline-offset: -3px; border-color: transparent; }
.choice:has(input:focus-visible) { outline: 3px solid var(--pen); outline-offset: 2px; }
.hint { margin: 8px 0 0; color: var(--toner-2); }

/* ── 얼굴: 잘라 붙인 계약서 복사본 ── */
.cutout {
  position: relative;
  width: 100cqw;   /* .wrap 안쪽 전폭 — 65ch 열 밖으로 오른쪽만 튀어나온다(모바일에선 열 폭과 같다) */
  margin: 24px 0 0; padding: 32px 24px 24px;
  background: var(--cutout);
  border: 1px solid var(--rule);
  box-shadow: 1px 1px 0 var(--rule);   /* 복사기 노광 — 붙인 종이 가장자리의 경질선. 블러 0. 이 1곳뿐 */
}
.clause {
  display: grid; grid-template-columns: 1fr 9em; gap: 16px; align-items: start;
  margin: 0 0 16px;
  font-family: var(--serif); font-weight: 500; font-size: var(--t1); line-height: 1.6;
}
.clause:last-of-type { margin-bottom: 0; }
.clause .art { font-weight: 500; }
.pen {
  background: transparent; color: inherit;
  text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.margin { font-family: var(--sans); font-weight: 700; line-height: 1.5; }
.margin-link {
  text-decoration-color: var(--pen);
  /* 탭 타깃 44+ (U9-b②) — 인라인 상자의 세로 padding 은 줄 상자 높이에 관여하지 않는다.
     시그니처 조판(9em 난외 칸·첫 줄 baseline 정렬)을 1px 도 움직이지 않고 표적만 21→53px 로 넓힌다. */
  padding: 16px 0;
}
.margin .margin-note { font-weight: 500; }
.margin .margin-state { font-weight: 500; display: block; }
figcaption { margin: 16px 0 0; font-family: var(--sans); color: var(--toner-2); }

/* ── 버튼·상태 문장 ── */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 48px 0 0; }
button {
  font: inherit; font-weight: 700; min-height: 48px; padding: 8px 24px;
  border-radius: 0; cursor: pointer; border: 2px solid var(--toner);
}
button.primary { background: var(--toner); color: var(--cutout); }
button.ghost { background: transparent; color: var(--toner); }
.count { color: var(--toner-2); }
.note { margin: 16px 0 0; color: var(--toner-2); }
/* 탭 타깃 44+ (U9-b②) — about.html 뒤로가기 링크. 문단의 유일한 내용이라 WCAG 2.5.8 문장 속 인라인 예외가 성립하지 않는다.
   인라인 세로 padding 이므로 조판 이동 0(조건 m 과 같은 종류). index.html 의 .note 2곳(#formNote·#copyNote)에는 링크가 없어 무영향. */
.note a { padding: 16px 0; }

/* ── 결과: 「누구 손에 있나」 대조표 ── */
#result { margin: 0; padding-top: 8px; border-top: 2px solid var(--toner); }
#result > h2 { font-size: var(--t3); }
.grade { margin: 8px 0 0; font-size: var(--t2); font-weight: 700; }
.grade-note { margin: 8px 0 0; color: var(--toner-2); }
.ledger { margin: 8px 0 0; }
.row summary::-webkit-details-marker { display: none; }
.rhead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; color: var(--toner); }
.rhead .leader { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--rule); position: relative; top: -8px; }
.rstate { flex: 0 0 auto; white-space: nowrap; padding: 0 4px; }
.row-theirs .rstate { outline: 2px solid var(--pen); outline-offset: 2px; }
.row-unsure .rstate { outline: 2px dashed var(--rule); outline-offset: 2px; }
.rbody { color: var(--toner-2); }
.rbody p { margin: 8px 0 0; }
.rbody b { color: var(--toner); font-weight: 700; }
.empty { margin: 16px 0 0; color: var(--toner-2); }

/* ── 통지 전에 할 일 ── */
#result > h2 + .todo, .todo { margin: 16px 0 0; }
.todo { position: relative; }
.todo h3 { font-size: var(--t2); margin: 16px 0 0; }
.todo .todo-group:first-child h3 { margin-top: 0; }
.todo .gnote { margin: 8px 0 0; color: var(--toner-2); }
.todo ol { list-style: none; padding: 0; margin: 8px 0 0; }
.todo li { padding: 8px 0; border-top: 1px solid var(--rule); }
/* 탭 타깃 44+ (U9-b②) — padding 으로 표적을 넓히고 같은 값의 음수 margin 으로 흐름에서 되돌린다.
   단행 28.8 → 44.8px. 체크박스·글자·「먼저 확인」 문단 위치는 그대로(다행 항목의 위 정렬도 유지). */
.todo .ck { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; padding: 8px 0; margin: -8px 0; }
.todo .ck input { margin: 4px 0 0; width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--pen); }
.todo .ck-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.todo .ck-text { font-size: var(--t2); line-height: 1.2; }
.todo .ck-act { margin: 8px 0 0 48px; color: var(--toner-2); }
.todo .ck:has(input:checked) .ck-text { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; }

.fallback { display: block; margin: 16px 0 0; color: var(--toner-2); }
.fallback textarea {
  display: block; width: 100%; margin: 8px 0 0; padding: 16px;
  background: transparent; color: var(--toner); border: 1px solid var(--rule); border-radius: 0;
  font: inherit; line-height: 1.5; resize: vertical;
}
.mine { margin: 0; }
.mine summary { cursor: pointer; font-size: var(--t2); font-weight: 700; padding: 8px 0; }   /* 탭 타깃 44+ (U9-b②) — 36 → 52px */
.mine ul { margin: 8px 0 0; padding-left: 24px; columns: 2; column-gap: 32px; }
.mine li { color: var(--toner-2); margin: 0 0 8px; }

/* ── 꼬리 ── */
footer { margin-top: 64px; padding-top: 24px; border-top: 2px solid var(--toner); color: var(--toner-2); }
footer p { margin: 0 0 8px; }
footer .colophon { margin: 24px 0 0; color: var(--toner); }
/* 형제 도구 — 카운터에 같이 놓인 다른 유인물. 한 장씩 세로로 쌓고, 줄마다 손가락이 닿게 44px 이상을 준다(U9-b②). */
.rack { margin: 16px 0 0; color: var(--toner-2); }
.rack a { display: block; padding: 10px 0; line-height: 1.4; text-wrap: balance; }   /* 좁은 지면에서 마지막 줄에 한 글자만 남는 것을 막는다(390 육안 검출) */
.adsense { margin: 32px 0 0; }
.adsense .adlabel { display: block; color: var(--toner-2); margin: 0 0 8px; }

/* ── 모바일 390: 한 열, 선택지 세로 쌓임(전폭·48+), 복사본은 열 폭 그대로, 난외주는 문장 아래 줄 ── */
@media (max-width: 720px) {
  .head { padding-top: 32px; }
  .head h1 { font-size: var(--t3); }
  .choices { flex-direction: column; }
  .choice { width: 100%; }
  .cutout { padding: 32px 16px 16px; }
  .clause { grid-template-columns: 1fr; gap: 4px; }
  .margin { justify-self: start; }
  .actions button { width: 100%; }
}

/* ── 한 화면 (2026-09-28 대표 지시 「스크롤 없이 한 화면에서」) ──────────────────────────────
   index.html(body.app)만: 머리 · 구역 탭 + 번호 띠 · 문항 한 개(또는 결과 세 장) · 버튼 줄 · 바닥 줄이
   화면 높이(100dvh) 안에 들어간다. 페이지는 스크롤되지 않는다. 푸터(면책·데이터·형제)는 바닥 줄 버튼으로 여는 겹창. */
.app .wrap { max-width: 1200px; height: 100dvh; padding: 0 16px; display: flex; flex-direction: column; }
.app .head { padding: 16px 0 8px; flex: 0 0 auto; }
.app .head .lede { margin: 8px 0 0; }
.app main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.quizview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.steps { display: flex; gap: 8px; flex-wrap: wrap; }
.steps .step { min-height: 48px; padding: 8px 16px; background: transparent; color: var(--toner); border: 1px solid var(--rule); font-weight: 500; }
.steps .step[aria-current="step"] { border-color: transparent; outline: 3px solid var(--pen); outline-offset: -3px; }
.steps .step-n { color: var(--toner-2); }

/* 번호 띠 — 스무 칸. 답한 칸은 토너로 채우고, 지금 칸은 볼펜 윤곽, 비어서 걸린 칸은 볼펜 점선. */
.strip { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; }
.strip li { height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); color: var(--toner-2); line-height: 1; }
.strip li.done { background: var(--toner); color: var(--cutout); border-color: var(--toner); }
.strip li.cur { outline: 3px solid var(--pen); outline-offset: 1px; }
.strip li.miss { outline: 2px dashed var(--pen); outline-offset: 1px; }
.strip li.cur.miss { outline-style: solid; }

#quiz { flex: 1 1 auto; min-height: 0; margin: 16px 0 0; }
.app .place { display: none; }
.app .place.on { display: grid; grid-template-columns: minmax(0, 65ch); align-content: start; column-gap: 32px; }
.place.on[data-place="contract"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.place.on > h2 { grid-column: 1; font-size: var(--t2); }
.place.on > .place-lede { grid-column: 1; }
.q { display: none; margin: 16px 0 0; }
.q.on { display: block; grid-column: 1; }
.place.on[data-place="contract"] > .cutout { grid-column: 2; grid-row: 1 / span 8; margin: 0; width: auto; }
.cutbar { display: none; }
.app .place { margin: 0; }

.app .quizview > .actions { margin: 16px 0 0; gap: 8px 16px; }
.app .note { margin: 4px 0 0; min-height: 1.5em; }

/* 바닥 줄 — 처음부터 다시 · 면책과 만든 이야기(겹창) */
.base { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 16px; border-top: 1px solid var(--rule); }
.base button { padding: 8px 16px; font-weight: 500; border-width: 1px; }
footer[popover] { margin: auto; max-width: 65ch; max-height: 100dvh; padding: 24px; background: var(--copy); color: var(--toner-2); border: 2px solid var(--toner); overflow: auto; }
footer[popover] { border-top-width: 2px; }
footer[popover]::backdrop { background: var(--toner); opacity: .5; }
.foot-close { margin: 16px 0 0; }

/* ── 결과 — 대조표·할 일·내 손 ── */
#result { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
#result > h2 { font-size: var(--t2); }
.tally { margin: 4px 0 0; }
.grade { margin: 4px 0 0; }
.grade-note { margin: 0; }
.rtabs { display: flex; gap: 8px; margin: 8px 0 0; }
.rtab { min-height: 48px; padding: 8px 16px; background: transparent; color: var(--toner); border: 1px solid var(--rule); font-weight: 500; }
.rtab[aria-selected="true"] { border-color: transparent; outline: 3px solid var(--pen); outline-offset: -3px; }
.pane { flex: 1 1 auto; min-height: 0; margin: 8px 0 0; position: relative; }
.pane:not(.on) { display: none; }
.legend { color: var(--toner-2); }
.key { display: inline-block; width: 16px; height: 16px; margin: 0 4px 0 0; vertical-align: -2px; border: 1px solid var(--rule); }
.key-theirs { border: 3px solid var(--pen); background: var(--cutout); }
.key-unsure { border: 3px dashed var(--rule); }
.key-mine { border-color: transparent; background: var(--toner-2); }
.axis { margin: 8px 0 0; }
.axis h3 { font-size: var(--t1); }
.cells { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.cell, .row summary {
  width: 48px; height: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; list-style: none;
}
.row summary { cursor: pointer; min-height: 48px; }
.cell.row-mine { color: var(--cutout); background: var(--toner-2); }
.row-theirs summary { border: 3px solid var(--pen); background: var(--cutout); }
.row-unsure summary { border: 3px dashed var(--rule); }
.row[open] summary { outline: 3px solid var(--toner); outline-offset: 2px; }
.rname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 칸을 누르면 그 칸의 설명이 대조표 위에 겹쳐 뜬다 — 높이를 늘리지 않는다. 닫기·Esc·같은 칸 다시 누르기로 닫힌다. */
.row[open] > .rbody {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; max-height: 100%; overflow: auto;
  padding: 16px; background: var(--cutout); border: 2px solid var(--toner);
}
.rbody p { margin: 4px 0 0; }
/* 닫힌 칸의 본문은 상자 자체를 없앤다 — 크롬은 닫힌 <details> 내용을 content-visibility 로만 감춰, 한 번 그려진(인쇄 등) 뒤에는
   화면 스크롤 높이에 잔상으로 남는다(2026-09-28 헤드리스 실측: 인쇄 에뮬레이션 뒤 scrollHeight 900→2659). */
@media screen { .row:not([open]) > .rbody, .mine:not([open]) > ul { display: none; } }
.rclose { margin: 8px 0 0; }
.todo .ck-text { font-size: var(--t1); line-height: 1.5; }
.todo .ck-act { margin: 0 0 0 48px; }
.todo h3 { font-size: var(--t1); }
.todo .off, .todo .todo-group.off { display: none; }
.pager { display: flex; align-items: center; gap: 16px; margin: 8px 0 0; }
#todoPane > h2 { font-size: var(--t2); }
#result .actions { margin: 8px 0 0; gap: 8px 16px; }
#result .actions .note { margin: 0; }
.fallback { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 3; padding: 16px; background: var(--copy); border: 2px solid var(--toner); }

/* 넓은 화면 — 결과 세 장을 나란히(탭 없음): 왼쪽 등급·대조표·내 손, 오른쪽 할 일 */
@media (min-width: 721px) {
  .app .head h1 { font-size: var(--t3); }
  #result {
    display: grid; column-gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "h todo" "tally todo" "grade todo" "gnote todo" "ledger todo" "ledger mine" "act act";
  }
  #result > h2 { grid-area: h; }
  .tally { grid-area: tally; } .grade { grid-area: grade; } .grade-note { grid-area: gnote; }
  .rtabs { display: none; }
  .pane, .pane:not(.on) { display: block; }
  #ledgerPane { grid-area: ledger; }
  #todoPane { grid-area: todo; margin: 0; display: flex; flex-direction: column; }
  #todoPane .todo { flex: 0 1 auto; }
  #minePane { grid-area: mine; }
  #result .actions { grid-area: act; }
}

/* 기준(1440×900) 밖 노트북 높이(720~780) — 도입 한 줄을 접어 스크롤 0 을 지킨다 */
@media (min-width: 721px) and (max-height: 780px) {
  .app .head .lede { display: none; }
  /* 발췌가 문항 옆에 다 들어가지 않는 높이 — 좁은 화면과 같이 「계약서 세 줄 보기」로 한 조항씩 */
  .place.on[data-place="contract"] { grid-template-columns: minmax(0, 65ch); }
  .place.on[data-place="contract"] > .cutout { display: none; grid-column: 1; grid-row: auto; }
  .cut .place.on[data-place="contract"] > .cutout { display: block; }
  .cut .q.on, .cut .place.on > h2 { display: none; }
  .cut .cutout .clause:not(.on) { display: none; }
  [data-place="contract"] .cutbar { display: flex; gap: 8px; margin: 8px 0 0; }
  #clauseBtn { display: none; }
  .cut #clauseBtn { display: block; }
  .axis { margin: 4px 0 0; }
  .cells { margin: 0; }
}

@media (max-width: 720px) {
  .app .head { padding: 16px 0 4px; }
  .app .head h1 { font-size: var(--t2); }
  .app .head .lede { font-size: var(--t1); margin: 4px 0 0; }
  .steps { flex-wrap: nowrap; gap: 4px; }
  .steps .step { flex: 1 1 0; padding: 8px 4px; }
  .strip { gap: 2px; margin: 4px 0 0; }
  .strip li, .strip li.done { height: 8px; color: transparent; overflow: hidden; }
  #quiz { margin: 8px 0 0; }
  .place.on, .place.on[data-place="contract"] { grid-template-columns: minmax(0, 1fr); }
  .place.on > .place-lede { display: none; }
  .place.on[data-place="contract"] > .cutout { display: none; grid-column: 1; grid-row: auto; }
  .cut .place.on[data-place="contract"] > .cutout { display: block; }
  .cut .q.on { display: none; }
  .cutout { padding: 16px; }
  .clause { margin: 0 0 8px; }
  figcaption { margin: 8px 0 0; }
  [data-place="contract"] .cutbar { display: flex; gap: 8px; margin: 8px 0 0; }
  .cutbar button { flex: 1 1 0; padding: 8px; }
  #clauseBtn { display: none; }
  .cut #clauseBtn { display: block; }
  .cut .place.on > h2 { display: none; }
  .cut .cutout .clause:not(.on) { display: none; }
  .choices { gap: 4px; margin: 4px 0 0; }
  .choice { padding: 4px 16px; }
  .q legend { font-size: var(--t1); }
  .app .quizview > .actions { margin: 8px 0 0; }
  .app .quizview > .actions button { width: auto; flex: 1 1 0; padding: 8px; }
  .app .quizview > .actions .count { flex: 1 0 100%; }
  #result .actions button { width: auto; flex: 1 1 0; padding: 8px; }
  .base { padding: 4px 0 8px; }
  .base { flex-wrap: nowrap; }
  [data-view="result"] .app .head .lede, .app[data-view="result"] .head .lede { display: none; }
  .legend-hint { display: none; }
  /* 할 일·내 손 장에서는 등급 줄을 접는다 — 등급은 대조표 장의 머리다(탭을 돌아오면 그대로 있다) */
  #result:not([data-tab="tabLedger"]) > .tally, #result:not([data-tab="tabLedger"]) > .grade, #result:not([data-tab="tabLedger"]) > .grade-note { display: none; }
  #todoPane > h2 { display: none; }
  .todo .gnote { display: none; }
  #result .actions button { white-space: nowrap; padding: 8px 4px; }
  .base button { flex: 1 1 auto; padding: 8px; }
}

/* ── 인쇄: 결과·할 일·면책만 (사장이 대행사와 얘기할 종이) ── */
@media print {
  /* 한 화면 골격 해제 — 종이에는 장·탭·겹창이 없다. 결과 세 장과 할 일 전량, 면책을 이어서 싣는다. */
  .app .wrap { height: auto; display: block; }
  .quizview, .rtabs, .legend, .pager, .base, .cutbar, .rclose, .cell.row-mine { display: none !important; }
  .pane, .pane:not(.on), #result { display: block !important; }
  .todo .off, .todo .todo-group.off, .todo .gnote, #todoPane > h2, #result > .tally, #result > .grade, #result > .grade-note { display: block !important; }
  /* 대조표는 종이에서 「번호. 이름 상태」 줄로 — 칸 도식 대신 글 목록(펼칠 수 없는 종이). ::details-content 강제 노출은 쓰지 않는다
     (헤드리스 인쇄 에뮬레이션 뒤 화면 레이아웃에 잔상이 남는 것을 실측 — 2026-09-28). */
  .cells { display: block; }
  .row summary { display: block; width: auto; height: auto; min-height: 0; border: 0; background: transparent; font-weight: 500; }
  .row summary .rno::after { content: ". "; }
  .rname { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  footer[popover] { display: block; position: static; inset: auto; margin: 16px 0 0; padding: 16px 0 0; max-height: none; border: 0; border-top: 2px solid #000; overflow: visible; background: #fff; }
  .foot-close { display: none; }
  .head .lede, #quiz, .actions, .note, .fallback, footer .data, .adsense, .more { display: none !important; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  #result { border-color: #000; margin-top: 0; }
  .row, .ledger h3, .todo li, .mine, footer { border-color: #000; }
  .row[open] .rbody, .rbody { display: block; }
  /* 종이에는 펼칠 것이 없다 — 접힌 채 인쇄되면 「이미 내 손에 있는 것 (8)」 이 숫자만 남고 목록이 빠진다(독립 게이트 2026-09-11 관찰 ②).
     ▶ 삼각형도 종이에선 무용 컨트롤이라 지운다. ::details-content 는 신형 크롬용 — 구형은 display 규칙으로 열린다. */
  .mine > ul { display: block; }
  .mine::details-content { content-visibility: visible; }
  .mine summary { list-style: none; cursor: auto; }
  .mine summary::-webkit-details-marker { display: none; }
  .row summary, .rbody, .rbody b, .todo .ck-act, .grade-note, .mine li, footer, footer p, .row .leader { color: #000; border-color: #000; }
  .row-theirs .rstate { outline-color: #000; }
  .row-unsure .rstate { outline-color: #000; }
  a[href]::after { content: ""; }
  .rack { display: none; }   /* 종이로 뽑은 한 장에 다른 유인물 목록은 안 싣는다 */
}