/* 언락 진단기 — 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, .place, .actions, .note, #result, 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: 64px 0 0; padding-top: 24px; border-top: 2px solid var(--toner); }
#result > h2 { font-size: var(--t3); }
#result > h2:not(:first-child) { margin-top: 48px; }
.tally { margin: 16px 0 0; }
.grade { margin: 8px 0 0; font-size: var(--t2); font-weight: 700; }
.grade-note { margin: 8px 0 0; color: var(--toner-2); }
.ledger { margin: 24px 0 0; }
.ledger h3 { font-size: var(--t2); margin: 32px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.ledger h3:first-child { margin-top: 0; }
.row { border-bottom: 1px solid var(--rule); }
.row summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 16px 0; }
.row summary::-webkit-details-marker { display: none; }
.row .rname { flex: 0 1 auto; }
.row .leader { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--rule); position: relative; top: -8px; }
.row .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; }
.row .more { flex: 0 0 auto; color: var(--toner-2); }
.row[open] .more { display: none; }
.rbody { padding: 0 0 16px; 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 h3 { font-size: var(--t2); margin: 32px 0 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: 16px 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: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.mine summary { cursor: pointer; font-size: var(--t2); font-weight: 700; padding: 8px 0; }   /* 탭 타깃 44+ (U9-b②) — 36 → 52px */
.mine ul { margin: 16px 0 0; padding-left: 24px; }
.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); }
.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%; }
}

/* ── 인쇄: 결과·할 일·면책만 (사장이 대행사와 얘기할 종이) ── */
@media print {
  .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, .tally, .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: ""; }
}