/* 오틸리아 화면 전부. 색·치수는 tokens.css 의 변수를 쓴다 — 여기에 색을 직접 쓰지 마라.
   원본은 data/design-tokens.json, 규칙은 wiki/오틸리아-디자인-시스템.

   방향: 랜딩에서 첫 문항을 바로 노출하고, 문답은 한 문항씩 전체화면으로, 결과는 문서 받기
   레일을 고정해 전환 지점을 항상 손에 닿게 둔다. 목표 지표는 문답 완주율이다.

   축은 둘이다 — 판(--shell) 과 읽는 줄(--measure). 판은 화면을 쓰고, 읽는 줄은 44rem 을 넘지
   않는다. 넓히면 한 줄이 길어져 가독성이 떨어지므로 남는 폭은 레일·사이드가 받는다. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* hidden 속성은 «없는 것» 이라는 뜻인데, 컴포넌트에 display 를 주는 순간 그 규칙이 이겨서
   숨긴 요소가 되살아난다. 실제로 안내 문구가 빈 채로 «!» 동그라미만 남아 떠 있었다.
   기본값(display:none)이 약해서 생기는 문제라 여기서 한 번 못박는다. */
[hidden] { display: none !important; }

body {
  margin: 0; padding: 0;
  background: var(--c-bg); color: var(--c-fg);
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body);
  font-feature-settings: "tnum" 1;
  word-break: keep-all;            /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: anywhere;
}

/* 모든 페이지가 같은 컨테이너를 쓴다. 페이지별 통일성이 이번 개편의 핵심 요구사항이다. */
.wrap { max-width: var(--shell); margin: 0 auto; padding-left: var(--space-11); padding-right: var(--space-11); }
@media (max-width: 40rem) { .wrap { padding-left: var(--space-5); padding-right: var(--space-5); } }
/* #app 은 판이 아니다 — 안에서 렌더되는 화면이 저마다 .wrap 을 갖는다.
   여기에 폭이나 여백을 걸면 판정 배너의 배경 띠만 좌우로 밀려 상단바보다 좁아 보인다.
   실제로 그렇게 어긋나 있었다. 배너는 전폭이고, 판 폭을 잡는 것은 그 «안쪽» 컨테이너다. */
main#app { max-width: none; margin: 0; padding: 0; }

/* ── 타이포 ───────────────────────────────────────────────────────────
   제목은 IBM Plex Sans KR, 본문은 Pretendard. 서체를 나누는 이유는 멋이 아니라 위계다 —
   제목이 본문의 굵은 판이면 스크롤에서 층이 생기지 않는다. */
h1, h2, h3, .display {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading); margin: 0;
}
h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
a { color: var(--c-accent); }
.lead { font-size: var(--text-lg); color: var(--c-fgMuted); }
.note { color: var(--c-fgMuted); font-size: var(--text-sm); }
.loading { color: var(--c-fgMuted); }

/* 근거 조문 — 이 제품의 시그니처. 판정 옆에서 절대 떨어지지 않고, 절대 줄바꿈되지 않는다. */
.cite {
  display: block; color: var(--c-fgMuted); font-size: var(--text-xs);
  line-height: var(--leading-body); margin-top: var(--space-1);
}
/* 조문은 절대 줄바꿈되지 않는다. 이 제품의 시그니처가 «법 / 제34조제1항제1 / 호» 로 깨져
   보이는 것은 다른 어떤 문제보다 크다. 표 안이든 문장 안이든 같은 규칙을 쓴다. */
.cite-inline, .clause {
  color: var(--c-fgMuted); font-size: var(--text-xs);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
blockquote.source {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  background: var(--c-raised); border-left: 2px solid var(--c-lineStrong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm); color: var(--c-fg);
}
/* 원문 열거 — 문장 안에 «① ② ③» 으로 박혀 있던 것을 목록으로 세운 것이다. 번호 글자는
   원문 그대로 둔다(조문 인용이라 표기를 바꾸면 인용이 아니게 된다). 매달린 들여쓰기로 줄을 맞춘다. */
ul.enum { list-style: none; padding: 0; margin: var(--space-3) 0; }
ul.enum > li { padding-left: 1.6em; text-indent: -1.6em; margin-bottom: var(--space-2); }
ul.enum > li:last-child { margin-bottom: 0; }

/* ── 상단바 ── 스티키. 어디서든 진행 상황과 남은 시간이 보인다. ─────────── */
.bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--c-barBg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.bar-inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.brand { display: flex; align-items: center; gap: 11px; margin: 0; }
/* 로고는 CSS 원형이라 파일이 필요 없다. */
.brand::before { content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 5px solid var(--c-accent); display: block; flex: none; }
.brand b, .brand a { font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); letter-spacing: -.01em; color: var(--c-fg); text-decoration: none; }
/* 로고가 «처음으로» 라는 것이 손에 닿아야 안다 — 누를 수 있는 것처럼 반응한다. */
.brand a:hover { color: var(--c-accent); }
.brand:has(a:hover)::before { border-color: var(--c-accentHover); }
.brand a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.brand-sub { color: var(--c-fgMuted); font-size: var(--text-xs); }
/* 본문 건너뛰기 링크. 키보드·낭독기 사용자에게만 필요하고 포커스가 오기 전에는 보이면 안 된다.
   해설 13면이 이 링크를 달고 있었는데 규칙이 없어 화면 좌상단에 「본문으로」 글자가 그대로
   떠 있었다(2026-09-02 실측). display:none 은 안 된다 — 포커스를 못 받아 링크가 죽는다. */
.skip { position: absolute; left: 0; top: 0; padding: var(--space-2) var(--space-4);
  background: var(--c-accent); color: var(--c-accentFg); border-radius: 0 0 var(--radius-md) 0;
  transform: translateY(-120%); transition: transform .12s ease; z-index: 10; }
.skip:focus-visible { transform: none; outline: 2px solid var(--c-focus); outline-offset: 2px; }

.progress { display: flex; align-items: center; gap: var(--space-5); }
.progress .step-label { font-size: var(--text-xs); color: var(--c-fgMuted); }
.progress .eta { font-size: var(--text-xs); color: var(--c-fgMuted); font-variant-numeric: tabular-nums; }
.progress .track { display: block; width: 200px; height: 6px; border-radius: 3px; background: var(--c-raised); }
.progress .track > i { display: block; height: 6px; border-radius: 3px; background: var(--c-accent);
  transition: width .3s ease; }
@media (max-width: 40rem) {
  .progress .step-label, .progress .eta { display: none; }
  .progress .track { width: 96px; }
}

/* ── 폼 ── 보기는 카드다. 라디오 하나에 손이 닿는 면적이 넓어야 완주한다. ─── */
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }
label { cursor: pointer; }
input[type=text], input[type=email], input:not([type]), textarea, select {
  font: inherit; width: 100%; max-width: var(--layout-field); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-lineStrong); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-fg);
}
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* 보기 카드 — 선택은 색만이 아니라 «테두리 두께» 로도 말한다(원칙 4). */
.opt {
  display: flex; gap: var(--space-4); align-items: center;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background: var(--c-surface); cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
@media (hover: hover) { .opt:hover { border-color: var(--c-lineStrong); } }
.opt input { accent-color: var(--c-accent); width: 18px; height: 18px; flex: none; margin: 0; }
.opt > span { font-size: var(--text-sm); font-weight: var(--weight-medium); }
/* 선택 상태는 «크기» 를 바꾸지 않는다. border-box 에서 테두리를 2px 로 키우면 안쪽 폭이 그만큼
   줄어 글자가 다시 흐른다 — 고른 순간 카드가 작아져 보이던 원인이다.
   두께는 inset 그림자로 얹는다. 레이아웃에 전혀 영향이 없고 흑백에서도 테두리로 읽힌다. */
.opt:has(input:checked) { border-color: var(--c-accent); background: var(--c-accentSoft);
  box-shadow: inset 0 0 0 1px var(--c-accent); }
/* 가로 3열 — 보기가 셋이고 짧을 때만. 넷 이상이거나 길면 세로로 쌓는다. */
.opts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
/* 첫 문항 보기 — 동그라미와 글을 한 줄에. 동그라미를 위에 따로 세우면 카드 위쪽이 비고 글이 가운데 떠서
   «무엇을 누르는 칸인가» 가 한 박자 늦게 읽혔다(2026-09-29). 다음 단계 보기와 같은 모양이다. */
.opts-row .opt { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.opts { display: grid; gap: var(--space-3); max-width: var(--measure); }
@media (max-width: 52rem) { .opts-row { grid-template-columns: 1fr; }
  .opts-row .opt { flex-direction: row; align-items: center; } }

/* ── 버튼 ── 들림은 «종이와 먹» 절에서 준다(마우스가 있고 움직임을 줄이지 않은 경우만). ──── */
button {
  font: inherit; font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--c-btn); color: var(--c-btnFg); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) { button:hover { background: var(--c-btnHover); } }
button:disabled { opacity: .55; cursor: default; }
/* 부팅 전 첫 문항의 버튼·보기는 «비활성» 이 아니라 «아직 준비 중» 이다. 0.2초 뒤 살아나는데
   그동안 흐리게 두면 살아나는 순간이 번쩍임으로 읽힌다. 모양은 같게 두고 동작만 막는다. */
button.pending:disabled { opacity: 1; }
.opts-row:disabled .opt { opacity: 1; }
.opts-row:disabled .opt input { opacity: 1; }
button.ghost { background: var(--c-surface); color: var(--c-fg);
  border: 1px solid var(--c-lineStrong); font-weight: var(--weight-medium); }
@media (hover: hover) { button.ghost:hover { background: var(--c-raised); border-color: var(--c-accent); color: var(--c-accent); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 하단 스티키 액션바 — 다음 단계 분량을 미리 알려주는 것이 완주율에 직접 기여한다. */
.actionbar {
  position: sticky; bottom: 0; z-index: 4; margin-top: var(--space-8);
  background: var(--c-barBg); backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
}
.actionbar .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.actionbar .summary { font-size: var(--text-xs); color: var(--c-fgMuted); margin: 0; }

/* ── 카드 ─────────────────────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--layout-padCard); }
.card > h4, .card-title { font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--c-accent); margin: 0 0 var(--space-3); }
.card p:last-child { margin-bottom: 0; }

/* ── 랜딩 ───────────────────────────────────────────────────────────
   머리 → 첫 문항 카드 → 소개·문서 → 근거. 첫 문항을 바로 노출하는 것이 이 화면의 전부다.
   머리는 광고지가 아니라 문서의 머리처럼 왼쪽에서 시작한다(2026-09-29). 가운데 정렬 큰 제목과
   알약 배지는 SaaS 랜딩의 문법이라 규제 도구에서는 신뢰를 깎는다. 오른쪽 «판정 기준» 카드는
   확인할 수 있는 사실(법령 버전 · 원문 링크 · 매일의 확인 날짜)만 싣는다. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-rail);
  gap: var(--space-16); align-items: center; padding-top: var(--space-20); padding-bottom: var(--space-6); }
.hero .doc-ref { font-size: var(--text-sm); color: var(--c-fgMuted); margin: 0 0 var(--space-5);
  padding-left: var(--space-3); border-left: 3px solid var(--c-accent); }
.hero h1 { font-size: var(--text-4xl); line-height: 1.25; letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5); text-wrap: balance; }
.hero .lead { font-size: var(--text-lg); color: var(--c-fgMuted); margin: 0; max-width: var(--measure); }
.hero .lead > span { display: block; text-wrap: balance; }
.hero .lead > span + span { margin-top: var(--space-1); }
.hero strong { color: var(--c-fg); font-weight: var(--weight-semibold); }

/* 판정 기준 — 문서의 «근거 법령» 란. 윗선을 먹색으로 굵게 둬 기록 카드로 읽히게 한다(결과서 제목 밑줄과 같은 선). */
.ledger { background: var(--c-surface); border: 1px solid var(--c-line); border-top: 3px solid var(--c-fg);
  border-radius: var(--radius-md); padding: var(--space-5); font-size: var(--text-sm); }
.ledger-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  color: var(--c-fgMuted); margin: 0 0 var(--space-3); }
.ledger dl { margin: 0; }
.ledger dl > div { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--c-line); }
/* 구분 이름을 위 작은 줄로 올린다 — 옆에 두면 «고영향 인공지능 판단 가이드라인» 이 좁은 칸에서 두 줄로 꺾인다. */
.ledger dt { color: var(--c-fgMuted); font-size: var(--text-xs); }
.ledger dd { margin: 0; display: grid; }
.ledger dd a { color: var(--c-fg); font-weight: var(--weight-medium); text-decoration-color: var(--c-lineStrong); }
.ledger dd a:hover { color: var(--c-accent); }
.ledger dd span { color: var(--c-fgSubtle); font-size: var(--text-xs); }
.ledger-check { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--c-line);
  font-size: var(--text-xs); color: var(--c-ok); line-height: 1.6;
  /* 두 줄 자리를 먼저 잡는다 — stamp.js 가 한 줄 문구를 두 줄 날짜로 바꾸면 카드가 20px 자라 제목과 첫 문항이
     새로고침마다 밀려 내려갔다(2026-09-29 실측). */
  box-sizing: content-box; min-height: 3.2em; }
.ledger-check::before { content: "● "; }
.ledger-check.is-overturn { color: var(--c-warn); }
@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-top: var(--space-11); }
  .hero h1 { font-size: var(--text-3xl); }
  /* 좁은 화면에서는 카드가 첫 문항을 밀어낸다 — 행을 한 줄씩으로 줄인다. 첫 문항 노출이 우선이다. */
  .ledger { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
  .ledger-title { margin-bottom: var(--space-1); }
  .ledger dl > div { padding: 3px 0; border-top: 0; }
  .ledger dd { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
  .ledger-check { margin-top: var(--space-2); padding-top: var(--space-2); }
}

/* 폰 폭에서만 쓰는 «첫 문항 아래» 판정 기준 카드(아래 ≤40rem 블록). 넓은 화면에서는 머리의 카드가 그 자리다. */
.ledger-after { display: none; }

/* 첫 문항 카드 — 전환의 핵심. 이 화면에서 그림자를 쓰는 유일한 자리다. */
.ask {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card); padding: var(--space-11) var(--space-12);
  margin-top: var(--space-11);
}
.ask-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); margin-bottom: var(--space-5); }
.ask-head .step { font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--c-accent); margin: 0 0 var(--space-2); }
.ask-head h2 { font-size: var(--text-2xl); }
.ask-head .cite { text-align: right; max-width: var(--layout-sideNote); margin: 0; text-wrap: balance; }
.ask-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--c-line); }
.ask-foot .note { margin: 0; font-size: var(--text-xs); }
.ask-foot button { white-space: nowrap; }
@media (max-width: 52rem) {
  .ask { padding: var(--space-6); }
  .ask-head { flex-direction: column; gap: var(--space-3); }
  .ask-head .cite { text-align: left; max-width: none; }
  .ask-foot { flex-direction: column; align-items: stretch; }
}

/* 랜딩 소개 — 세 장 카드(누가/왜/무엇을)였다. 「무엇을 받나」가 카드 한 장에 한 줄로 눌려
   있었는데 그게 이 제품이 파는 물건이다. 누가·왜는 한 문장으로 접고 자리를 문서 목록에 준다. */
.intro-who { margin: var(--space-4) 0 var(--space-8); max-width: var(--measure);
  color: var(--c-fgMuted); text-wrap: pretty; }
.intro-who strong, .intro-who em { color: var(--c-fg); font-style: normal;
  font-weight: var(--weight-semibold); }
.intro .docs { max-width: var(--measure); }
.intro .card-title { max-width: var(--measure); margin-bottom: var(--space-4); }
/* 절 — 판정문·결과서와 같은 문서 문법. 위 괘선과 번호로 어디서 끊기는지 보이게 한다(2026-09-29).
   절 사이는 한 가지 간격만 쓴다. 절마다 여백이 다르면 같은 문서로 안 읽힌다.
   `.sec` 는 결과 화면 카드 이름이라 쓰지 않는다 — 처음에 겹쳐 두 절이 카드 상자로 떴다. */
.lp-sec { margin-top: var(--space-24); padding-top: var(--space-8); border-top: 1px solid var(--c-line); }
.lp-sec-head { display: flex; align-items: baseline; gap: var(--space-4); margin: 0 0 var(--space-8); }
.lp-sec-no { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-accent);
  letter-spacing: var(--tracking-mono); }
.lp-sec-head h2 { margin: 0; font-size: var(--text-2xl); font-family: var(--font-body); font-weight: var(--weight-medium);
  letter-spacing: -0.03em; text-wrap: balance; }
.lp-sec-foot { margin-top: var(--space-6); max-width: var(--measure); text-wrap: pretty; }
.docs > li span { text-wrap: pretty; }
@media (max-width: 52rem) { .lp-sec { margin-top: var(--space-11); } }

/* 근거 줄 — 위아래 괘선 하나씩.
   숫자만 세워 두면 자랑이고, 문장이 붙어야 근거가 된다. 「13 / 개 영역 전부」처럼 끊긴
   조각을 크게 찍어 두었더니 만든 사람에게도 뜻이 닿지 않았다. 그래서 칸마다 셋을 쌓는다 —
   숫자, 읽는 사람 말로 된 주장 한 줄, 그 주장을 떠받치는 사실 한 줄. */
.evidence .stats-row { margin-top: var(--space-2); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  margin: 0; padding: var(--space-6) 0;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.stats-row > div { display: flex; flex-direction: column; gap: var(--space-2); }
.stats-row .num { font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: var(--weight-semibold); margin: 0; line-height: 1;
  letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
/* 단위는 숫자에 붙되 숫자가 아닌 것으로 읽혀야 한다 — 크기·색·서체를 전부 본문 쪽으로 되돌린다. */
.stats-row .num span { font-size: var(--text-sm); color: var(--c-fgMuted);
  font-weight: var(--weight-regular); font-family: var(--font-body);
  letter-spacing: normal; margin-left: .2em; }
.stats-row .claim { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--c-fg); line-height: var(--leading-heading); text-wrap: balance; }
.stats-row .why { margin: 0; font-size: var(--text-xs); color: var(--c-fgMuted);
  line-height: 1.6; text-wrap: pretty; }
/* 좁은 화면에서는 한 줄에 하나. 셋을 억지로 밀어 넣으면 주장 한 줄이 네 줄로 접힌다. */
@media (max-width: 52rem) {
  .stats-row { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-5) 0; }
}

/* ── 활용 영역 (a1) ─────────────────────────────────────────────────── */
.pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
/* 같은 행의 카드는 높이가 같이 늘어난다. 글이 위에 붙으면 한 줄짜리 카드만 떠 보이므로
   체크박스와 글을 함께 세로 가운데로 맞춘다. */
.pick .opt { align-items: center; padding: var(--space-4) var(--space-5); border-radius: 12px; }
.pick .opt input { margin-top: 0; }
.pick .opt > span { font-weight: var(--weight-semibold); }
.pick .opt .cite { font-weight: var(--weight-regular); }
/* 카목은 비어 있다 — 고를 수 없다는 사실을 점선으로 말한다. 열거가 닫혀 있다는 근간이다.
   옆 카드와 «같은 상자» 여야 한다. p 의 기본 아래 여백이 살아 있고 글자가 체크박스 자리만큼
   덜 들어가 있어서 혼자 짧고 어긋나 보였다. 격자를 옆 카드와 똑같이 맞춘다. */
.pick .empty {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-4);
  align-items: center; align-self: start; margin: 0;
  border: 1px dashed var(--c-lineStrong); border-radius: 12px;
  padding: var(--space-4) var(--space-5); background: var(--c-raised);
  font-size: var(--text-sm); color: var(--c-fgMuted);
}
/* 체크박스 자리에는 «고를 수 없다» 는 표시를 둔다. 빈칸으로 두면 격자가 어긋난 것처럼 보인다. */
.pick .empty::before { content: '—'; display: block; text-align: center;
  color: var(--c-fgDisabled); line-height: 18px; }
/* 별개 의무 — 고영향과 무관하게 걸린다. 그 사실이 무게로 읽혀야 한다. */
.side-duty .opt { border-left: 4px solid var(--c-warn); }
.side-duty .opt input { accent-color: var(--c-warn); }
.side-duty .opt:has(input:checked) { border-color: var(--c-warn); background: var(--c-warnSoft);
  box-shadow: inset 0 0 0 1px var(--c-warn); }
@media (max-width: 52rem) { .pick { grid-template-columns: 1fr; } }

/* ── 문항 (a2) ── 좌: 지나온 경로 / 우: 한 문항 ────────────────────── */
/* 보조 칸은 «항상 오른쪽» 이다. 문답에서는 지나온 경로, 결과·해설에서는 문서와 링크가 오는데
   화면마다 좌우가 바뀌면 같은 사이트로 안 읽힌다. 폭도 결과 레일과 같은 값을 쓴다. */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-rail); gap: var(--space-8);
  align-items: start; padding-top: var(--space-8); }
/* 마크업은 경로가 먼저다 — 좁은 화면에서 진행 상황이 위에 와야 하기 때문이다.
   넓은 화면에서만 순서를 바꿔 오른쪽에 세운다. */
.qa > .trail { order: 2; }
.qa > div { order: 1; }
.trail { position: sticky; top: var(--layout-stickyTop); list-style: none; margin: 0;
  --dot: 10px; --dot-col: 18px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--layout-padCard); }
/* 점을 세로선으로 잇는다. 선이 없으면 줄 길이가 제각각일 때 항목이 흩어져 보이고
   «지나온 절차» 라는 뜻도 전달되지 않는다 — 이 사이드의 요지가 그거다. */
.trail li {
  position: relative; display: grid; grid-template-columns: var(--dot-col) minmax(0, 1fr);
  gap: var(--space-3); align-items: start;
  padding-bottom: var(--space-4); font-size: var(--text-xs); color: var(--c-fgMuted);
}
.trail li:last-child { padding-bottom: 0; }
/* 점과 선의 중심이 어긋나면 1px 꺾임이 생기고, 줄이 짧을수록 그게 크게 보인다.
   둘 다 «칸의 가운데» 를 한 값에서 잡는다 — 점은 auto 마진으로, 선은 중심 이동으로. */
.trail li::before {
  content: ''; width: var(--dot); height: var(--dot); margin: 5px auto 0;
  border-radius: 50%; background: var(--c-lineStrong); z-index: 1;
}
/* 잇는 선 — 다음 항목이 있을 때만. 마지막 점 아래로 삐져나오면 미완처럼 보인다. */
.trail li::after {
  content: ''; position: absolute; left: calc(var(--dot-col) / 2); transform: translateX(-50%);
  top: calc(5px + var(--dot)); bottom: 0;
  width: 1px; background: var(--c-line);
}
.trail li:last-child::after, .trail li.head::after { display: none; }
.trail li.done::before { background: var(--c-accent); }
.trail li.done::after { background: var(--c-accent); opacity: .3; }
.trail li.now { color: var(--c-fg); font-weight: var(--weight-medium); }
.trail li.now::before { background: var(--c-surface); border: 2px solid var(--c-accent); }
.trail li.todo { color: var(--c-fgDisabled); }

/* 격자의 두 번째 칸은 «블록» 이어야 한다. 인라인 span 안에 -webkit-box 를 넣으면 줄 제한이
   걸리지 않고 칸이 내용만큼 부풀어 오른다 — 긴 영역 이름에서 실제로 터졌다.
   min-width:0 도 함께 준다. 안 주면 격자 칸이 내용의 최소 폭까지 벌어진다. */
.trail li > span { display: block; min-width: 0; }

/* 클래스 이름은 «화면 전체에서» 하나다. 경로의 문항 텍스트에 .ask 를 쓴 적이 있는데
   그건 랜딩의 첫 문항 «카드» 이름이라, 사이드 텍스트가 카드 배경·테두리·여백을 뒤집어쓰고
   display 까지 덮여 줄 제한이 죽었다. 화면 안에서만 통하는 이름은 접두어를 붙인다.

   경로는 길잡이다. 문항 지문이 최대 67자, 영역 이름이 46자라 그대로 두면 칸이 뚫린다.
   -webkit-line-clamp 는 «보이는 것» 만 자르지 칸의 최소 폭은 줄이지 못한다 —
   한글에 keep-all 이 걸려 있어 «(교통수단·교통시설·교통체계의» 가 한 덩어리로 버티면
   칸이 그만큼 벌어진다. 실제로 그렇게 무너졌다.
   그래서 두 겹으로 막는다: 조상마다 min-width:0 + overflow:hidden 으로 칸이 못 벌어지게 하고,
   한 줄짜리는 line-clamp 대신 text-overflow 로 자른다(이쪽이 폭 계산까지 확실히 막는다). */
.trail li, .trail li > span { min-width: 0; overflow: hidden; }
.trail-q {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 2; overflow-wrap: anywhere;
}
.trail-a {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--c-fg); font-weight: var(--weight-regular); margin-top: 2px;
}
.trail li.now .trail-a { color: var(--c-accent); }

.q-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--c-accent); margin: 0 0 var(--space-2); }
.q-ask { letter-spacing: var(--tracking-heading); font-size: var(--text-3xl); line-height: 1.35; max-width: 24em; margin: 0 0 var(--space-3); }
.q-cite { font-size: var(--text-sm); color: var(--c-fgMuted); margin: 0 0 var(--space-6); }
@media (max-width: 60rem) {
  .qa { grid-template-columns: 1fr; gap: var(--space-6); }
  /* 좁은 화면에서는 점만 남긴 가로 스텝으로 접는다. 글자까지 옆으로 흐르면 읽히지 않는다. */
  .qa > .trail { order: 1; }
  .qa > div { order: 2; }
  .trail { position: static; display: flex; gap: var(--space-2);
    padding: var(--space-4) var(--space-5); }
  .trail li { flex: 1; grid-template-columns: 1fr; padding-bottom: 0; }
  /* 선택자를 .qa 로 한 겹 더 잡는다 — 같은 무게면 뒤에 오는 규칙이 이겨서 글자가 그대로 남는다.
     실제로 .trail .ans 라는 옛 이름이 남아 답 텍스트가 모바일에서 안 숨겨졌다. */
  .qa .trail-q, .qa .trail-a { display: none; }
  .trail li::before { margin: 0; width: 100%; height: 4px; border-radius: 2px; }
  /* 지나온 곳·지금·앞으로가 구별돼야 스텝바다. 전부 같은 색이면 그냥 줄 세 개다. */
  .trail li.done::before { background: var(--c-accent); opacity: .4; }
  .trail li.now::before { border: 0; background: var(--c-accent); opacity: 1; }
  .trail li.todo::before { background: var(--c-line); }
  .trail li.head { display: none; }
  .trail li::after { display: none; }
  .q-ask { font-size: var(--text-xl); }
}

/* ── 결과 ── 판정 배너 + 2단(본문 / 스티키 문서 레일) ─────────────────── */
.banner { background: var(--c-banner); color: var(--c-bannerFg); }
.banner .wrap { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-12); padding-top: var(--space-12); padding-bottom: var(--space-8); }
.banner .tag { display: inline-block; background: var(--c-bannerFg); color: var(--c-banner);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em;
  border-radius: var(--radius-pill); padding: 5px 13px; margin-bottom: var(--space-4); }
.banner h1 { color: var(--c-bannerFg); font-size: var(--text-4xl); margin: 0; }
.banner .sub { color: var(--c-bannerMuted); font-size: var(--text-base); margin: var(--space-3) 0 0; max-width: var(--measure); }
.banner .doc-meta { display: inline-block; margin: var(--space-5) 0 0; padding: 4px 10px; font-size: var(--text-xs);
  color: var(--c-bannerFg); border: 1px solid var(--c-bannerLine); }
/* 판정별 구분은 색만이 아니라 배지 텍스트 + 배너 채도로 준다(원칙 3·4).
   «불명확» 은 실패가 아니라 정식 결론이라 배너를 유지하고 좌측 스트라이프만 얹는다. */
.banner.is-unclear { border-left: 4px solid var(--c-warn); }
.banner.is-none { background: var(--c-surface); color: var(--c-fg); border-bottom: 1px solid var(--c-lineStrong); }
.banner.is-none h1 { color: var(--c-fg); }
.banner.is-none .tag { background: none; border: 1px solid var(--c-lineStrong); color: var(--c-fgMuted); }
.banner.is-none .sub { color: var(--c-fgMuted); }

.banner .facts { display: flex; gap: var(--space-8); margin: 0; }
.banner .facts > div { padding-left: var(--space-8); border-left: 1px solid var(--c-bannerLine); }
.banner .facts > div:first-child { border-left: 0; padding-left: 0; }
.banner .facts dt { font-size: var(--text-xs); color: var(--c-bannerMuted); margin: 0 0 var(--space-2); }
.banner .facts dd { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--weight-semibold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.banner .facts dd small { font-size: var(--text-sm); color: var(--c-bannerMuted); font-weight: var(--weight-regular); }
.banner.is-none .facts > div { border-left-color: var(--c-line); }
.banner.is-none .facts dt, .banner.is-none .facts dd small { color: var(--c-fgMuted); }
@media (max-width: 60rem) {
  .banner .wrap { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .banner .facts { flex-wrap: wrap; gap: var(--space-6); }
  .banner .facts > div { padding-left: var(--space-6); }
}

/* 본문 + 레일 격자. 결과 화면과 카피 페이지가 «같은» 격자를 쓴다 —
   페이지마다 칸 폭이 다르면 같은 사이트로 안 읽힌다. 폭·간격·레일 너비를 한 규칙에서만 정한다. */
.result, .page { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-rail);
  gap: var(--space-8); align-items: start;
  padding-top: var(--space-8); padding-bottom: var(--space-16); }
.sec { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--layout-padCard); margin-bottom: var(--space-6); }
.sec > :is(h2, h3) { font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); color: var(--c-fgMuted); margin: 0 0 var(--space-5); }
.sec > :last-child { margin-bottom: 0; }
.sec .note:last-child { margin-bottom: 0; }

/* 괘선으로 나뉜 목록. 해설 13편과 결과 화면이 같이 쓴다. 목록 뒤에 문단이 이어지는 일이
   많아 아래 여백을 반드시 준다 — 없으면 다음 문단이 마지막 항목에 붙어 한 덩어리로 읽힌다. */
ul.reasons { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
ul.reasons > li { position: relative; padding: 0 0 var(--space-5) 0;
  margin-bottom: var(--space-5); border-bottom: 1px solid var(--c-line); font-size: 15px; }
ul.reasons > li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* 번호 원은 «결과 화면에서만» 단다. 근거가 이 제품의 상품이라 결과서·PDF 와 서로 가리킬 수
   있어야 하기 때문이다. 해설 본문에는 달지 않는다 — 거기서는 원문의 ① ② 가 이미 번호라
   우리 번호와 겹쳐 «1 ① 의사결정 관여 정도» 처럼 두 번 매겨진다. */
.sec ul.reasons { counter-reset: r; }
.sec ul.reasons > li { counter-increment: r; padding-left: 40px; }
.sec ul.reasons > li::before {
  content: counter(r); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-accentSoft); color: var(--c-accent);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  display: grid; place-items: center;
}

/* 의무 표 */
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); margin: 0; }
th, td { border-bottom: 1px solid var(--c-line); padding: var(--space-3) var(--space-2);
  text-align: left; vertical-align: top; }
th { color: var(--c-fgMuted); font-weight: var(--weight-semibold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
/* 좁은 화면에서 표가 «스크롤» 대신 «압축» 되면 첫 칸이 한 글자씩 세로로 쪼개진다
   (에/너/지/공/급). 최소 폭을 주어야 감싼 상자가 실제로 넘쳐 스크롤이 생긴다. */
.table-wrap > table { min-width: var(--layout-tableMin); }
/* 의무 표의 칸 폭에는 손대지 않는다. 2026-08-27 에 «첫 칸이 좁다» 고 보고 다른 칸을
   width:1% + nowrap 으로 묶었더니, 조문·제재의 nowrap 폭 합이 표를 넘겨 첫 칸이 한 글자씩
   세로로 쪼개졌다 — 고치려던 것보다 나빠졌다. 원래 줄바꿈은 낱말 경계에서 끊겨 읽을 만했다.
   진짜 문제는 성격 칸의 괄호 단서 하나였고 그건 app.js 의 binding() 이 갈라 세운다. */
.duty td .cite { margin-top: var(--space-1); }
/* 출처 표는 두 칸이다. 첫 칸이 폭을 못 받아 「채/용」 처럼 한 글자씩 세로로 쪼개졌다(2026-09-02).
   비율로 준다 — 라벨은 2자에서 46자까지라 고정폭이면 어느 쪽이든 어긋난다. */
.prov th:first-child, .prov td:first-child { width: 30%; }
.prov td .cite.is-partial-src { color: var(--c-warn); }
.badge { display: inline-block; font-size: var(--text-xs); padding: 0 var(--space-2);
  border: 1px solid var(--c-lineStrong); border-radius: var(--radius-sm); color: var(--c-fg); white-space: nowrap; }
.badge.warn { border-color: var(--c-warn); color: var(--c-warn); }
.badge.soft { border-style: dashed; color: var(--c-fgMuted); }
/* 갈음된 행은 «지워진 것» 이 아니라 «다른 법으로 대체됐다» 는 정보다. 읽히되 한 단 물러선다.
   구분은 색이 아니라 취소선과 배지가 맡는다(원칙 4). */
tr.is-exempt td { color: var(--c-fgDisabled); }
tr.is-exempt td:first-child { text-decoration: line-through; text-decoration-color: var(--c-lineStrong); }
/* 부분 갈음은 취소선을 긋지 않는다. 「개인정보 처리 및 보호에 대해서는」 같은 한정이 붙은
   것을 지워 버리면 남은 부분까지 안 해도 되는 줄 알게 된다 — 지워진 것이 아니라 «줄어든» 것이다.
   구분은 색이 아니라 배지와 한정 문구가 맡는다(원칙 4). */
tr.is-partial-exempt td:first-child { border-left: 2px solid var(--c-warn); padding-left: var(--space-3); }
tr.is-partial-exempt .cite { color: var(--c-warn); }
/* 판정 대상 영역이 늘었다는 것은 「개정이 있었다」와 무게가 다르다 — 다시 검토해야 한다. */
#law-checked.is-overturn { color: var(--c-critical); font-weight: var(--weight-semibold); }
.note.is-partial-note { border-left: 2px solid var(--c-warn); padding-left: var(--space-3);
  margin-top: var(--space-4); }
tbody tr { transition: opacity .28s ease; }
tbody tr td, tbody tr td * { transition: color .28s ease, text-decoration-color .28s ease; }

/* 우측 문서 레일 — 본문과 «같이» 흐른다.
   예전에는 sticky + max-height + overflow-y 로 화면에 붙여 뒀다. 문서 받기가 전환 지점이라
   어디서나 손에 닿게 하려던 것인데, 레일이 화면보다 길어지면 안쪽에 스크롤바가 하나 더 생겼다.
   한 면에 스크롤이 둘이면 휠이 어디에 먹는지 예측이 안 되고, 본문을 읽다 레일 위로 커서가
   지나가면 본문이 멈춘다. 붙여서 얻는 것보다 잃는 것이 크다(2026-08-28). */
.rail { display: grid; gap: var(--space-4); align-content: start; }
.rail .panel { background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--layout-padCard); }
.rail .panel.quiet { background: var(--c-raised); }
.rail :is(h2, h4) { font-family: var(--font-body); line-height: var(--leading-body); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); color: var(--c-fgMuted); margin: 0 0 var(--space-4); }
.rail button { display: block; width: 100%; text-align: center; margin-bottom: var(--space-2); }
.rail button:last-of-type { margin-bottom: 0; }
/* 패널 맨 아래 안내는 «각주» 다. 그냥 여백만 주면 패널 테두리에 붙어 버려서 버튼 묶음의
   일부인지 다음 패널 머리인지 안 읽힌다. 괘선으로 끊어 각주라는 것을 형태로 말한다. */
.rail .hint { font-size: var(--text-xs); color: var(--c-fgMuted); margin: var(--space-3) 0 0; }
.rail .panel > .hint:last-child {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
}
/* 안내가 둘 이상 이어지면 위엣것만 끊는다 — 줄마다 선이 그이면 목록처럼 보인다. */
.rail .panel > .hint + .hint { margin-top: var(--space-2); padding-top: 0; border-top: 0; }
/* 문서 다섯을 한 줄로 쌓아 놓으니 «같은 것이 왜 둘이냐» 는 물음이 나왔다. 실제로 쓰임이
   다르다 — 하나는 우리 검토 기록, 하나는 정부에 낼 첨부 목록이다. 언제 쓰는지로 묶어 준다. */
.rail-sub { font-size: var(--text-xs); color: var(--c-fgMuted); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); margin: var(--space-5) 0 var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
.rail ul { list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.rail li { padding: var(--space-2) 0; border-top: 1px solid var(--c-line); }
.rail li:first-child { border-top: 0; }
@media (max-width: 60rem) {
  .result, .page { grid-template-columns: minmax(0, 1fr); }
}

/* 원문 사례 — 문항이 조문 말투라 제일 어렵다. 정부가 같은 기준을 설명하려고 쓴 문장을
   그대로 옮겨 놓는다. 접어 두는 이유는 길어서다(한 건이 문단 하나) — 문항을 밀어내면 안 된다.
   해당/비해당 두 건이 붙으면 그 «대비» 가 설명이 된다. 색으로 갈라 준다. */
details.eg { margin-top: var(--space-4); max-width: var(--measure); }
details.eg > summary { cursor: pointer; font-size: var(--text-xs); color: var(--c-fgMuted); }
details.eg > summary::marker { color: var(--c-fgSubtle); }
.eg-case { margin-top: var(--space-3); padding-left: var(--space-4);
  border-left: 2px solid var(--c-ok); }
.eg-case.is-hi { border-left-color: var(--c-critical); }
.eg-tag { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--c-ok);
  margin: 0 0 var(--space-2); }
.eg-case.is-hi .eg-tag { color: var(--c-critical); }
.eg-text { font-size: var(--text-sm); margin: 0; }
.eg-why { font-size: var(--text-sm); color: var(--c-fgMuted); margin: var(--space-2) 0 0; }

/* 갈음 — 체크하면 위 표가 즉시 줄어드는 인과가 이 블록의 요지다. 기본으로 펴 둔다. */
details.disclose { border-top: 1px solid var(--c-line); margin-top: var(--space-5); padding-top: var(--space-5); }
details.disclose > summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
details.disclose > summary::marker { color: var(--c-fgMuted); }
/* 갈음 항목 — 「고르면 무엇이 빠지는가」. 고르기 «전에» 보여야 결정을 할 수 있다.
   데이터(covers)에 이미 있던 것을 화면이 쓰지 않아, 고르고 나서 표가 바뀌는 것을 보고
   짐작하게 두고 있었다. 조문 인용(.cite)보다 위, 본문보다 아래 단으로 둔다. */
.drops { display: block; margin-top: var(--space-1); color: var(--c-ok); font-size: var(--text-xs); }
/* 부분 면제는 «빠진다» 가 아니라 «줄어든다» 다. 색도 완결(ok)이 아니라 주의(warn)로 둔다. */
.drops.is-partial { color: var(--c-warn); }

details.disclose label { display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-2) 0; font-size: var(--text-sm); }
details.disclose input { accent-color: var(--c-accent); margin-top: .35em; flex: none; }

/* ── 순서도 ── 원문은 이미지라 아무도 못 읽는다. 우리만 데이터로 갖고 있다. ── */
.flow-wrap { margin: var(--space-4) 0; }
/* 그림을 글로 읽기 — role="img" 가 SVG 안의 글자를 라벨 한 줄로 눌러 버린다.
   그림을 못 보는 사람에게 판정 절차가 통째로 사라지므로 같은 것을 글로도 둔다. */
.flow-text-alt { margin-top: var(--space-3); }
.flow-text-alt > summary { cursor: pointer; font-size: var(--text-xs); color: var(--c-fgMuted); }
.flow-text-alt ol { margin: var(--space-3) 0 0; padding-left: var(--space-6); font-size: var(--text-sm); }
.flow-text-alt li { margin-bottom: var(--space-2); }
.flow { width: 100%; height: auto; display: block; }
.flow-node { fill: var(--c-surface); stroke: var(--c-lineStrong); stroke-width: 1; }
.flow-text { fill: var(--c-fg); font-family: var(--font-body); font-size: 13px; }
.flow-group { fill: var(--c-fgMuted); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.flow-edge { stroke: var(--c-lineStrong); stroke-width: 1.5; }
.flow-id { fill: var(--c-fgMuted); font-weight: 600; }
.flow-branch { fill: var(--c-fgMuted); font-family: var(--font-body); font-size: 11.5px; }
.flow-branch.is-hi { fill: var(--c-critical); font-weight: 600; }
.flow-branch.is-no { fill: var(--c-fgDisabled); }
/* 점수 칸은 «묻는 것» 이 아니라 «세는 것» 이다. 관문과 같은 상자에 넣으면 읽는 사람이
   예/아니오를 답해야 하는 줄 안다 — 원문에서도 이 자리는 표이지 마름모가 아니다. */
.flow-node.is-score { fill: var(--c-raised); stroke: var(--c-line); }
/* 답이 «예» 로 지나온 관문. 색만으로 가르지 않는다(원칙 4) — 테두리 굵기와 아래 문장이 같이 말한다.
   인쇄에서도 남아야 한다. 결과서를 뽑아 결재에 올리는 그림이다. */
.flow-node.is-path { stroke: var(--c-accent); stroke-width: 2.5; fill: var(--c-accentSoft); }
.flow-note.is-path { border-left-color: var(--c-accent); }
.flow-score-head { fill: var(--c-fg); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.flow-per { fill: var(--c-fgMuted); font-weight: 400; font-size: 11.5px; }
.flow-num { fill: var(--c-fgMuted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.flow-note { font-size: var(--text-sm); border-left: 3px solid var(--c-line);
  padding: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; color: var(--c-fgMuted); }
.flow-note.is-warn { border-left-color: var(--c-warn); }
.flow-note.is-critical { border-left-color: var(--c-critical); }
.flow-note.is-ok { border-left-color: var(--c-ok); }
.flow-note strong { color: var(--c-fg); }
details.flow-details { margin: var(--space-3) 0; }
details.flow-details > summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
details.flow-details > summary::marker { color: var(--c-fgMuted); }

/* ── 카피 페이지 (해설·판정 방법·처리방침) ─────────────────────────── */
/* 읽는 줄만 44rem 으로 묶는다. 칸 자체는 결과 화면과 같은 폭이라 왼쪽 선이 페이지마다 흔들리지 않는다. */
.page main { max-width: var(--measure); }
.page > div, .result > div { min-width: 0; }
/* 하위 면 머리 — 첫 화면 머리와 같은 문법(위치 줄 앞 짧은 선 · 본문 서체 500 의 큰 제목 · lead · 칩).
   아래 괘선으로 머리와 본문을 끊는다. 틀은 scripts/subpage.js 가 씌운다(2026-09-29). */
.page-head { padding-top: var(--space-16); padding-bottom: var(--space-11); margin-bottom: var(--space-12);
  border-bottom: 1px solid var(--c-line); }
.page-head h1 { font-family: var(--font-body); font-weight: var(--weight-medium); letter-spacing: -0.04em;
  font-size: var(--text-4xl); line-height: 1.22; margin: 0 0 var(--space-5); max-width: var(--measure); text-wrap: balance; }
.page-head .lead { max-width: var(--measure); margin: 0; text-wrap: pretty; }
.page-head > .note { max-width: var(--measure); margin: var(--space-3) 0 0; }
@media (max-width: 52rem) {
  .page-head { padding-top: var(--space-11); padding-bottom: var(--space-8); margin-bottom: var(--space-8); }
  .page-head h1 { font-size: var(--text-3xl); }
}

/* ── 푸터 ─────────────────────────────────────────────────────────── */
footer { background: var(--c-raised); border-top: 1px solid var(--c-line);
  margin-top: var(--space-16); font-size: var(--text-xs); color: var(--c-fgMuted); }
footer .wrap { padding-top: var(--space-6); padding-bottom: var(--space-6); }
footer p { margin: 0 0 var(--space-2); }
footer p:last-child { margin-bottom: 0; }

/* ── 증거 섹션 (판정 방법 페이지) ───────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4); margin: 0 0 var(--space-6); }
.stats > div { border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: var(--c-surface); padding: var(--space-4); }
.stats dt { color: var(--c-fgMuted); font-size: var(--text-xs); margin-bottom: var(--space-1); }
.stats dd { margin: 0; font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-semibold); line-height: 1.1; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.stats dd span { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--c-fgMuted); margin-left: .25em; }
.stats p { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--c-fgMuted); line-height: 1.5; }
table.coverage td:nth-child(3) { font-variant-numeric: tabular-nums; color: var(--c-fgMuted); }
/* 「문항」 같은 두 글자 머리가 세로로 쪼개져 «문 / 항» 으로 읽히던 것을 막는다. */
table.coverage th { white-space: nowrap; }
/* 마지막 칸은 «그래서 우리가 어떻게 답하나» 라 문장이다. 숫자가 아니므로 왼쪽에서 시작한다. */
table.coverage td:last-child, table.coverage th:last-child { text-align: left; }
.dv { display: inline-block; font-size: var(--text-xs); padding: 0 var(--space-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); color: var(--c-fgMuted); white-space: nowrap; }
.dv-narrow { border-color: var(--c-warn); color: var(--c-warn); }
.dv-polar { border-color: var(--c-critical); color: var(--c-critical); font-weight: var(--weight-medium); }
.dv-ok { border-color: var(--c-line); }

#fb textarea, #fb select { max-width: var(--layout-fieldWide); }
#fb p { margin: var(--space-2) 0; }
#fb-note { display: inline-block; margin-left: var(--space-3); }

/* ── 인쇄 ── 결과서를 뽑아 결재에 올린다. 조작 요소는 사라지고 근거는 남는다. ─ */
@media print {
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .bar, .actionbar, .rail, .trail, button, .proof, #fb, #gate, footer .disclaimer { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .banner { background: none; color: var(--c-fg); border-bottom: 1px solid var(--c-lineStrong); }
  .banner h1, .banner .sub, .banner .facts dt, .banner .facts dd, .banner .facts dd small { color: var(--c-fg); }
  .banner .tag { background: none; color: var(--c-fg); border: 1px solid var(--c-fg); }
  .banner .wrap { padding: 0 0 var(--space-4); }
  .banner .facts > div { border-left-color: var(--c-lineStrong); }
  .result, .page, .qa { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .page main { max-width: none; }
  .sec { border: 1px solid var(--c-line); break-inside: avoid; }
  .cite, .cite-inline { color: #333; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* 움직임은 진행바 보간과 갈음 페이드뿐이다. 줄여 달라고 한 사람에게는 예외 없이 정지한다. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── 분석 화면 ── 판정 직전의 한 박자. 무엇을 대조하는지 한 번 보여 준다.
   진행 막대를 돌리지 않는다 — 가짜 진행률은 규제 제품에서 특히 나쁘다.
   항목이 «순서대로 확인됨» 이 되는 것으로 충분하고, 그건 실제로 일어나는 일의 순서다.
   타이밍은 app.js 의 2,600ms 와 맞물려 있다 — 항목당 0.55초씩 켜지고 마지막 체크 뒤 한 박자다.
   여기를 빠르게 만들면 목록이 다 켜진 채로 남은 시간을 기다리게 되어, 없느니만 못한 «가짜 대기» 가 된다.
   .analyzing 은 .wrap 과 같은 요소라 여기서 max-width 를 줄이면 판 자체가 좁아져 통째로
   가운데로 밀린다 — 다른 화면과 왼쪽 시작선이 어긋난다. 폭 제한은 «안쪽 내용» 에만 준다. */
.analyzing { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.analyzing :is(h1, h2) { letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); font-size: var(--text-2xl); margin: 0 0 var(--space-8); max-width: var(--measure); }
.analyzing > .note { max-width: var(--measure); }
.analyze-steps { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid;
  gap: var(--space-5); max-width: var(--measure); }

/* 아직 차례가 오지 않은 항목은 흐리게 서 있고, 자기 차례에 «켜진다».
   전부 한꺼번에 뜨면 «대조 중» 이 아니라 그냥 목록이다. */
.analyze-steps > li {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-4);
  align-items: baseline; opacity: .35;
  animation: analyze-lit .4s ease-out forwards;
  animation-delay: calc(var(--i) * .55s);
}
.analyze-steps > li > div { min-width: 0; }
.analyze-steps b { font-weight: var(--weight-medium); color: var(--c-fg); }
.analyze-steps span { display: block; font-size: var(--text-sm); color: var(--c-fgMuted); margin-top: 2px; }
@keyframes analyze-lit {
  from { opacity: .35; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* 표시는 두 겹이다 — 차례가 오기 전에는 빈 원, 확인되면 체크.
   체크는 이미지 없이 테두리 두 변으로 그린다. 테마가 바뀌어도 따라온다. */
.analyze-steps > li::before {
  content: ''; justify-self: center; margin-top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--c-line); box-sizing: border-box;
  animation: analyze-mark .01s linear forwards;
  animation-delay: calc(var(--i) * .55s + .25s);
}
/* 체크로 바뀌는 순간 — 원을 지우고 갈고리만 남긴다. */
@keyframes analyze-mark {
  to {
    width: 9px; height: 5px; border-radius: 0; margin-top: 7px;
    border-width: 0 0 1.5px 1.5px; border-color: var(--c-accent);
    transform: rotate(-45deg);
  }
}
/* 움직임을 줄여 달라고 한 사람에게는 분석 화면 자체를 건너뛴다(app.js). 여기서는 정지만 보장한다. */
@media (prefers-reduced-motion: reduce) {
  .analyze-steps > li { opacity: 1; animation: none; }
  .analyze-steps > li::before { animation: none; width: 9px; height: 5px; border-radius: 0;
    margin-top: 7px; border-width: 0 0 1.5px 1.5px; border-color: var(--c-accent); transform: rotate(-45deg); }
}

/* 배너 위 칩 — 걸린 영역은 이름으로 말한다. 여럿이어도 줄바꿈으로 늘어날 뿐 겹치지 않는다. */
.banner .facts dd { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.chip { display: inline-block; font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: var(--weight-medium); letter-spacing: 0;
  background: var(--c-bannerFg); color: var(--c-banner);
  border-radius: var(--radius-pill); padding: 2px 11px; }
.chip.is-off { background: none; border: 1px solid var(--c-bannerMuted); color: var(--c-bannerMuted); }
.banner.is-none .chip { background: var(--c-accentSoft); color: var(--c-accent); }
@media print { .chip { background: none; color: var(--c-fg); border: 1px solid var(--c-fg); } }

/* 법의 열거 — 괘선 목록. 라벨이 2자에서 46자까지라 균등 격자로는 칸이 들쭉날쭉해 읽히지 않았다.
   행으로 세우면 번호가 왼쪽에 정렬되고 긴 라벨은 행 안에서 흐른다.
   상태는 셋이다 — 걸림 / 골랐지만 기준 미해당 / 고르지 않음. 두 번째를 첫 번째와 뭉뚱그리면
   «해당 없음» 판정의 근거가 화면에서 사라진다. */
.lead-note { margin-bottom: var(--space-5); }
.enum-map { list-style: none; padding: 0; margin: 0; }
.enum-map > li {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: baseline;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--text-sm); color: var(--c-fgDisabled);
}
.enum-map > li:last-child { border-bottom: 0; }
.enum-map > li > b { font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold); color: var(--c-fgDisabled); text-align: right; }
.enum-map > li > em { font-style: normal; font-size: var(--text-xs); white-space: nowrap; }
/* 고르지 않은 절은 접는다. 13행 중 12행이 빈 줄이면 걸린 한 줄이 목록에 묻힌다. */
.enum-rest { margin-top: var(--space-3); }
.enum-rest > summary { cursor: pointer; font-size: var(--text-xs); color: var(--c-fgMuted);
  padding: var(--space-2) 0; }
.enum-rest > summary::marker { color: var(--c-fgSubtle); }
.enum-rest > .enum-map { margin-top: var(--space-2); }

/* 골랐지만 확인 기준에 안 걸린 절 — 읽히되 한 단 물러선다. */
.enum-map > li.picked { color: var(--c-fgMuted); }
.enum-map > li.picked > b { color: var(--c-fgMuted); }
.enum-map > li.picked > em { color: var(--c-fgMuted); }

/* 걸린 절 — 색만으로 구분하지 않는다(원칙 4). 좌측 보더·글자 굵기·상태 라벨이 함께 움직인다. */
.enum-map > li.on {
  color: var(--c-fg); font-weight: var(--weight-medium);
  background: var(--c-accentSoft);
  border-left: 3px solid var(--c-accent);
  padding-left: var(--space-3); margin-left: -3px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.enum-map > li.on > b { color: var(--c-accent); }
.enum-map > li.on > em { color: var(--c-accent); font-weight: var(--weight-semibold); }
@media print { .enum-map > li.on { background: none; border-left-color: var(--c-fg); } }
@media (max-width: 40rem) {
  .enum-map > li { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .enum-map > li > em { grid-column: 2; }
}

/* a1 머리글 */
.qa-head { max-width: var(--measure); margin-bottom: var(--space-5); padding-top: var(--space-8); }
.qa-head :is(h1, h2) { letter-spacing: var(--tracking-heading); font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.qa-head .note { margin: 0; }

/* ── 제보 폼 ── 좁은 레일 안이라 라벨을 위에 얹고 필드는 폭을 다 쓴다.
   무엇을 적는 칸인지 라벨이 말해야 한다 — placeholder 는 입력을 시작하면 사라진다. */
.fb-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.field { display: grid; gap: 6px; }
.field-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--c-fg); }
.opt-mark { font-weight: var(--weight-regular); color: var(--c-fgMuted); }
.fb-form input, .fb-form textarea, .fb-form select {
  max-width: none; width: 100%; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--c-lineStrong); background: var(--c-surface); color: var(--c-fg);
  transition: border-color .18s ease;
}
.fb-form input:hover, .fb-form textarea:hover, .fb-form select:hover { border-color: var(--c-fgMuted); }
.fb-form input:focus-visible, .fb-form textarea:focus-visible, .fb-form select:focus-visible { border-color: var(--c-accent); }
.fb-form textarea { resize: vertical; min-height: 5.5rem; line-height: 1.6; }
.fb-form button { width: 100%; }

/* 셀렉트 — 기본 화살표는 OS 마다 제각각이라 폼 안에서 혼자 튄다. 직접 그린다.
   이미지 대신 CSS 로 그려야 테마가 바뀌어도 따라온다(다크에서 검은 화살표가 남는 사고를 막는다). */
.select { position: relative; display: block; }
.select > select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--space-8); cursor: pointer;
}
.select::after {
  content: ''; position: absolute; right: var(--space-3); top: 50%;
  width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
  border: solid var(--c-fgMuted); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.select:hover::after { border-color: var(--c-fg); }

/* 문서 받기 게이트 — 이 제품의 전환 지점이다. 회사 이메일을 남기느냐가 Phase 1 게이트 지표라
   여기가 화면에서 제일 정돈돼 있어야 한다. placeholder 로 라벨을 대신하지 않는다 —
   입력을 시작하면 사라져서 무슨 칸이었는지 알 수 없다. */
.gate-card { border: 0; padding: 0; max-width: none; }
.gate-card h3 { margin: 0 0 var(--space-2); }
.gate-card > .note { margin: 0 0 var(--space-5); }
.gate-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-5); }
.gate-fields .field input { max-width: none; width: 100%; font-size: var(--text-sm);
  transition: border-color .18s ease; }
.gate-fields .field input:hover { border-color: var(--c-fgMuted); }
.gate-fields .field input:focus-visible { border-color: var(--c-accent); }
/* 개정 알림 동의는 고르는 것이라 보기 카드와 같은 문법을 쓴다. */
.gate-notify { align-items: flex-start; margin-bottom: var(--space-5); }
.gate-notify > span { font-weight: var(--weight-regular); }
/* 동의 문구 아래 붙는 단서 — 지금 지킬 수 있는 범위를 같은 자리에서 말한다.
   못 지킬 약속을 받아 두는 것보다, 받되 «언제부터인지» 를 밝히는 편이 낫다. */
.gate-notify .cite { margin-top: var(--space-1); }
/* 이메일 칸은 수집 안내를 달고 있어 한 줄을 통째로 쓴다. 반 칸에 넣으면 안내가 세로로 길게 늘어진다. */
.gate-fields .field:first-child { grid-column: 1 / -1; }
.gate-err { margin: calc(-1 * var(--space-3)) 0 var(--space-4); color: var(--c-critical); font-size: var(--text-sm); }
@media (max-width: 52rem) { .gate-fields { grid-template-columns: 1fr; } }

/* ── 자주 묻는 것 ────────────────────────────────────────────────────
   접어 두지 않는다. 클릭해야 보이는 답은 «있다» 는 표시일 뿐 읽히지 않는다.
   네 문항뿐이라 펼쳐 두는 편이 짧다. */
.faq { margin: var(--space-4) 0 0; max-width: var(--measure); }
.faq dt { font-weight: var(--weight-semibold); color: var(--c-fg);
  padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.faq dt:first-child { border-top: 0; padding-top: 0; }
.faq dd { margin: var(--space-2) 0 var(--space-5); color: var(--c-fgMuted);
  font-size: var(--text-sm); line-height: var(--leading-body); }
.faq dd:last-child { margin-bottom: 0; }

/* ── 판정 예시 계단 (/method) ────────────────────────────────────────
   「어떻게 판정하는가」에 방법론을 나열하면 아무도 안 읽는다. 실제 문답 하나를 끝까지
   따라가게 두면 절차가 저절로 설명된다. 마지막 문항에서 갈리는 것이 이 제품의 요점이라
   거기서만 두 갈래로 벌린다. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--space-6); }
.steps > li { counter-increment: step; position: relative;
  padding: 0 0 var(--space-6) var(--space-11); }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-accentSoft); color: var(--c-accent);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
/* 관문 사이를 잇는 선 — 「다음으로 넘어간다」가 눈으로 읽혀야 한다. */
.steps > li::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: var(--space-2);
  width: 1px; background: var(--c-line); }
.steps > li:last-child::after { display: none; }
.steps-q { margin: 0; font-weight: var(--weight-semibold); color: var(--c-fg); }
.steps-a { margin: var(--space-2) 0 0; color: var(--c-accent); font-weight: var(--weight-medium); }
.steps-why { margin: var(--space-1) 0 0; color: var(--c-fgMuted); font-size: var(--text-sm); }
.steps-why b { color: var(--c-fg); font-weight: var(--weight-semibold); }
.ex-lead { border-left: 2px solid var(--c-accent); padding-left: var(--space-4); }

/* 마지막 관문만 갈라진다. 같은 서비스가 여기서 두 결론으로 나뉜다. */
.fork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-4); }
.fork-arm { border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--c-surface); }
.fork-arm .steps-a { margin-top: 0; }
.verdict { margin: var(--space-3) 0 0; font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.verdict.is-on { color: var(--c-critical); }
.verdict.is-none { color: var(--c-ok); }
@media (max-width: 40rem) { .fork { grid-template-columns: minmax(0, 1fr); } }

/* 원문 이야기는 한 번만, 눈에 띄게. 본문에 풀어 쓰면 다시 장황해진다. */
.callout { border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-md); background: var(--c-raised);
  padding: var(--space-5); margin: var(--space-5) 0; }
.callout p { margin: 0 0 var(--space-3); }
.callout p:last-child { margin-bottom: 0; }

/* ── 받는 문서 목록 (/method) ────────────────────────────────────────
   이 면은 원래 «우리가 얼마나 팠는가» 만 말했다. 읽는 사람이 사는 것은 결재에 올릴 물건이라
   그것을 맨 위로 올린다. 한 줄에 셋을 쌓는다 — 이름 · 어디에 쓰는지 · 근거 조문.
   번호를 붙이는 이유는 «다섯 종» 이 한눈에 세어지기 때문이다. */
.docs { list-style: none; counter-reset: doc; padding: 0; margin: 0 0 var(--space-6); }
.docs > li { counter-increment: doc; display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-1) var(--space-4);
  padding: var(--space-5) 0; border-top: 1px solid var(--c-line); }
.docs > li:last-child { border-bottom: 1px solid var(--c-line); }
.docs > li > div { min-width: 0; display: grid; gap: var(--space-1); }
.docs > li::before { content: counter(doc);
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  color: var(--c-fgSubtle); font-variant-numeric: tabular-nums; }
.docs b { font-weight: var(--weight-semibold); color: var(--c-fg); }
.docs span { color: var(--c-fgMuted); font-size: var(--text-sm); line-height: var(--leading-body); }
.docs em { font-style: normal; }

/* ── 팝오버 ── 문서 받기와 제보는 «지금 이것만» 하는 일이라 화면을 덮는다.
   네이티브 <dialog> 를 쓴다 — 포커스 가둠·Esc 닫기·백드롭·스크롤 잠금이 전부 딸려 오고
   라이브러리가 필요 없다(의존성 0 원칙). 결과 화면은 뒤에 그대로 남아 맥락이 끊기지 않는다. */
.modal {
  border: 0; border-radius: var(--radius-xl); padding: 0;
  width: min(38rem, calc(100vw - var(--space-8)));
  max-height: min(44rem, calc(100vh - var(--space-12)));
  background: var(--c-surface); color: var(--c-fg);
  box-shadow: var(--shadow-card);
  overflow: visible;
}
.modal::backdrop { background: rgba(16, 19, 26, .45); backdrop-filter: blur(2px); }
.modal-body { padding: var(--space-8); overflow-y: auto; max-height: inherit; }
.modal-body > h3 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.modal-body > .note { margin: 0 0 var(--space-6); }
/* 닫기는 오른쪽 위. 백드롭 클릭이나 Esc 로도 닫히지만 눈에 보이는 출구가 하나는 있어야 한다. */
.modal-close { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; }
.modal-close .icon {
  background: none; border: 0; color: var(--c-fgMuted);
  font-size: var(--text-sm); line-height: 1; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); cursor: pointer;
}
.modal-close .icon:hover { background: var(--c-raised); color: var(--c-fg); }
/* 열릴 때만 아주 짧게. 뜻은 «이게 지금 앞으로 나왔다» 하나뿐이라 튀지 않는다. */
@keyframes modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal[open] { animation: modal-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
@media (max-width: 40rem) { .modal-body { padding: var(--space-6); } }
@media print { .modal { display: none !important; } }

/* 영역을 여럿 고르면 문항이 영역별로 이어 붙는다. 경로에 머리를 달아 묶는다 —
   한 줄로 쏟아 놓으면 어느 문항이 어느 영역 것인지 알 수 없다. */
.trail li.head {
  grid-template-columns: 1fr; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  color: var(--c-fgMuted); margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--c-line);
}
.trail li.head::before { display: none; }
.trail li.head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 60rem) { .trail li.head { display: none; } }

/* 영역 카드 + 설명 버튼. 버튼이 카드 안에 있으면 카드를 누르려다 설명이 열린다 —
   고르는 것과 읽는 것은 손이 닿는 자리를 나눈다. */
.pick-item { position: relative; display: grid; }
.pick-item .opt { padding-right: calc(var(--space-5) + 2.25rem); }
/* 13칸 전부에 같은 라벨이 붙으면 그 버튼이 격자를 덮어 정작 영역 이름이 안 읽힌다.
   기호 하나로 줄인다 — 반복돼도 소음이 적고 조문 인용과 경쟁하지 않는다.
   무엇을 여는 버튼인지는 aria-label 과 title 이 말한다. */
.explain {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1;
  border-radius: 50%; background: none; border: 1px solid var(--c-line); color: var(--c-fgMuted);
}
@media (hover: hover) { .explain:hover { background: var(--c-accentSoft); border-color: var(--c-accent); color: var(--c-accent); } }
/* 원은 24px 로 두되 «누르는 자리» 를 넓힌다. WCAG 2.5.8 최소치(24)와 정확히 같아 여유가 0이었고,
   손가락으로 체크박스 옆의 작은 원을 찍는 동작이라 실사용에서 제일 먼저 어긋난다.
   테두리를 키우면 조문 인용과 경쟁하므로 보이는 크기는 그대로 두고 히트 영역만 넓힌다. */
.explain::after { content: ''; position: absolute; inset: -10px; }
@media (pointer: coarse) { .explain::after { inset: -12px; } }

/* 설명 팝오버 — 원문을 그대로 편다. 길어질 수 있으므로 스스로 스크롤한다. */
#detail { width: min(46rem, calc(100vw - var(--space-8))); }
.detail-clause { font-size: var(--text-xs); color: var(--c-accent);
  font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.modal-body > h4 { font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); color: var(--c-fgMuted);
  margin: var(--space-6) 0 var(--space-3); }
.detail-text { font-size: var(--text-sm); color: var(--c-fg); }
.detail-defs { margin: 0; display: grid; gap: var(--space-3); }
.detail-defs > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--c-line); }
.detail-defs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-defs dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--c-fg); }
.detail-defs dd { margin: 0; font-size: var(--text-sm); color: var(--c-fgMuted); }
#detail .modal-body > .note { margin: var(--space-6) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--c-line); }
@media (max-width: 52rem) {
  .pick-item .opt { padding-right: calc(var(--space-5) + 2.25rem); }
  .detail-defs > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* 고르지 않고 넘기려 할 때 — 흔들지 않는다. 규제 제품에서 흔들리는 UI 는 신뢰를 깎는다.
   테두리를 한 번 밝혔다 가라앉히고, 왜 안 넘어가는지는 문장이 말한다. */
@keyframes missing-pulse {
  0% { box-shadow: 0 0 0 0 var(--c-warnRing, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.is-missing > .opt { border-color: var(--c-warn); }
.is-missing > .opt:first-child { animation: missing-pulse .9s ease-out 2; }
.need {
  display: flex; gap: var(--space-2); align-items: baseline;
  font-size: var(--text-sm); color: var(--c-warn); font-weight: var(--weight-medium);
  margin: var(--space-4) 0 0;
}
.need::before { content: '!'; font-weight: var(--weight-semibold);
  width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%;
  border: 1px solid var(--c-warn); display: grid; place-items: center;
  font-size: var(--text-xs); }
@media (prefers-reduced-motion: reduce) { .is-missing > .opt:first-child { animation: none; } }

/* 조문 인용에 목 표시가 붙는 경우 — 보건의료처럼 한 영역이 두 목에 걸친다. 목을 합치지 않는다. */
blockquote.source .mok { display: block; font-size: var(--text-xs); color: var(--c-accent);
  font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }

/* ── 화면 전환 ── 뜻은 하나다: «다음 화면으로 넘어왔다». 그 이상은 규제 제품에서 군더더기다.
   앞으로 갈 때는 오른쪽에서, 뒤로 갈 때는 왼쪽에서 들어온다 — 방향이 없으면 어느 쪽으로
   움직였는지 안 읽힌다. 튀는 이징을 쓰지 않고, 0.22초 안에 끝난다. */
/* 세로로 움직인다. 가로로 밀면 전폭 요소가 화면 밖으로 나가 가로 스크롤바가 잠깐 생긴다.
   위아래도 «다음 / 이전» 으로 충분히 읽힌다. */
@keyframes step-forward { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes step-back { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* 하단 액션바는 빼고 태운다 — 조상에 transform 이 걸리면 sticky 가 그 상자를 기준으로 잡아
   애니메이션 동안 바가 튄다. 고정돼 있어야 할 것은 움직이지 않는다. */
#app.stepping[data-enter="forward"] > :not(.actionbar) { animation: step-forward .22s cubic-bezier(.22, .61, .36, 1); }
#app.stepping[data-enter="back"] > :not(.actionbar) { animation: step-back .22s cubic-bezier(.22, .61, .36, 1); }
/* 문항 단계에서는 «답한 목록» 이 옆 칸에 쌓인다. 이미 읽은 줄이 넘어갈 때마다 같이 밀리면
   「다음 문항이 왔다」가 아니라 「목록이 다시 그려졌다」로 읽힌다 — 쌓이는 것은 쌓인 자리에
   그대로 있어야 한다. 그래서 그 화면만 «통째로» 대신 «바뀐 것만» 태운다.
   지금 답하는 줄(.now)은 문항 카드와 한 몸이라 같이 들어온다. */
#app.stepping .wrap:has(.trail) { animation: none; }
#app.stepping[data-enter="forward"] .wrap:has(.trail) > :not(.trail),
#app.stepping[data-enter="forward"] .trail > li.now {
  animation: step-forward .22s cubic-bezier(.22, .61, .36, 1); }
#app.stepping[data-enter="back"] .wrap:has(.trail) > :not(.trail),
#app.stepping[data-enter="back"] .trail > li.now {
  animation: step-back .22s cubic-bezier(.22, .61, .36, 1); }

/* 결과 화면은 배너가 전폭이라 밀면 배경이 잘린다. 여기서는 뜨는 것만 한다.
   `[data-enter]` 를 붙여 두는 이유는 특이도다 — 위의 방향 규칙이 (1,3,0) 이라 이 줄이
   (1,2,1) 로는 진다. 그래서 2026-08-27 까지 이 규칙은 **한 번도 적용되지 않았고**
   결과 화면도 밀려 들어오고 있었다. 죽은 CSS 는 없는 것보다 나쁘다 — 고쳤다고 착각하게 만든다. */
body.is-result #app.stepping[data-enter] > * { animation: fade-in .28s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #app.stepping > *, #app.stepping .wrap > *, #app.stepping .trail > li { animation: none !important; } }


/* 팝오버 안의 버튼 줄 — 주 동작이 왼쪽이다. 「계속 답하기」가 기본값처럼 보이면 안 된다. */
.modal-actions { margin-top: var(--space-6); }
.modal-actions button { min-width: 8rem; }

/* 좁은 화면의 하단 액션바 — 버튼이 줄바꿈되면 «다음» 이 어디 있는지 매번 찾게 된다.
   한 줄에 나란히 두고, 키보드가 없는 화면에서는 Enter 안내를 접는다. */
@media (max-width: 40rem) {
  .actionbar .wrap { gap: var(--space-2); }
  .actionbar .summary { display: none; }
  .actionbar .actions { flex: 1; flex-wrap: nowrap; }
  .actionbar .actions button { flex: 1; padding-left: var(--space-3); padding-right: var(--space-3); }
  .actionbar .actions button:last-child { flex: 1.4; }   /* 주 동작을 조금 넓게 */
}

/* ── 원문 그림 인용 ─────────────────────────────────────────────────
   가이드라인의 확인 절차 그림은 원문에서 이미지로만 제공된다. 판독한 결과를 글로 옮겨 적으면
   «네 말을 믿어라» 가 되므로, 원본을 그대로 잘라 옆에 놓는다. 익명으로 운영하는 도구라
   신뢰를 얻을 방법이 검증 가능성밖에 없다 — wiki/오틸리아-디자인-시스템 §7-5.
   스캔은 어두운 화면에서도 흰 종이 그대로 둔다. 반전시키면 원문이 아니게 된다. */
figure.scan { margin: var(--space-5) 0; }
figure.scan img {
  display: block; width: 100%; height: auto;
  background: #fff;                     /* 종이 — 두 테마 모두 흰색이 원문이다 */
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
}
figure.scan figcaption {
  margin-top: var(--space-2); color: var(--c-fgMuted);
  font-size: var(--text-xs); line-height: var(--leading-body);
}
figure.scan.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
figure.scan.pair figcaption { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 40rem) { figure.scan.pair { grid-template-columns: 1fr; } }

/* 원문 인용에 붙는 줄 번호. 어느 면 몇째 줄인지가 이 글의 근거라 본문과 같이 실린다.
   줄번호와 본문을 격자 두 칸으로 세운다 — 흘려 쓰면 인용 두 줄이 한 줄로 붙어 버린다. */
.source:has(.ln) { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); }
.source .ln {
  color: var(--c-fgSubtle); font-family: var(--font-mono);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  text-align: right; padding-top: 0.15em;
}
.source .lt { min-width: 0; overflow-wrap: break-word; }

/* 재현 절차 — 읽는 사람이 그대로 쳐 볼 수 있어야 한다. */
pre.proof {
  margin: var(--space-3) 0; padding: var(--space-4);
  background: var(--c-raised); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-loose);
  color: var(--c-fg); overflow-x: auto;
}

/* 각 절의 결론 — 「그래서 우리는 어떻게 답하나」. 근거와 판정을 눈으로 갈라 준다. */
p.verdict {
  margin-top: var(--space-4); padding-left: var(--space-4);
  border-left: 2px solid var(--c-accent); color: var(--c-fgMuted);
}
p.verdict strong { color: var(--c-fg); }


/* ── 결과서 첫 장 — 문서 목록 옆에 실제 결과서를 종이 한 장처럼 둔다(2026-09-29) ──────
   빌드가 실제 엔진·렌더러로 만든다(scripts/sample-report.js). 말로 «이런 문서가 나옵니다» 하는 것보다
   받을 물건을 보여 주는 쪽이 믿을 만하다. 종이 느낌은 여백·가는 괘선·그림자 하나로만 낸다 — 장식 금지. */
.docs-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-fieldWide);
  gap: var(--space-16); align-items: start; }
.docs-row .docs { max-width: none; }
.paper { margin: 0; }   /* 화면보다 길어 따라다니게 두면 끝이 잘린다 — 제자리에 둔다 */
.paper figcaption { font-size: var(--text-xs); color: var(--c-fgMuted); margin: 0 0 var(--space-3); }
.paper-sheet { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: var(--space-6) var(--space-5); font-size: var(--text-xs);
  line-height: var(--leading-body); color: var(--c-fg); word-break: keep-all; }
/* 종이 안 제목은 두 단 내린 h3~h5 다(scripts/sample-report.js). 모양은 예전 h1~h3 그대로. */
.paper-sheet :is(h3, h4, h5) { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); }
.paper-sheet h3 { font-size: var(--text-base); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--c-fg); }
.paper-sheet h4 { font-size: var(--text-sm); margin: var(--space-5) 0 var(--space-2); }
.paper-sheet h5 { font-size: var(--text-xs); color: var(--c-fgMuted); margin: var(--space-3) 0 var(--space-1); }
.paper-sheet blockquote { margin: 0 0 var(--space-3); padding: 0; border: 0; color: var(--c-fgMuted); }
.paper-sheet table { width: 100%; border-collapse: collapse; margin: 0; }
.paper-sheet th, .paper-sheet td { text-align: left; padding: 4px 6px; border: 1px solid var(--c-line); vertical-align: top; }
.paper-sheet th { background: var(--c-raised); font-weight: var(--weight-semibold); }
.paper-sheet td:first-child { color: var(--c-fgMuted); white-space: nowrap; }
.paper-sheet td { text-wrap: balance; }
.paper-sheet p { margin: 0 0 var(--space-2); }
.paper-sheet ul { margin: 0; padding-left: 1.1em; }
.paper-sheet li { margin: 0 0 var(--space-2); }
.paper-sheet .src { color: var(--c-fgSubtle); }
.paper-more { margin: var(--space-4) 0 0 !important; padding-top: var(--space-3); border-top: 1px dashed var(--c-lineStrong);
  color: var(--c-fgMuted); }
@media (max-width: 60rem) {
  .docs-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}


/* ── 흐름도 — «어떻게 판정하나» (2026-09-29) ─────────────────────────────
   drawio 처럼 얇은 선 상자와 직각 연결선. 색은 전부 토큰이라 다크에서도 같은 그림이다.
   넓은 판·세로 판 둘 중 하나만 보인다. 움직임은 public/diagram.js 가 화면에 들어올 때 한 번 켠다 —
   스크립트가 없으면 처음부터 다 보이고, 움직임을 줄이는 설정이면 켜지 않는다. */
.hd-wrap { margin: 0; }
.how-block { padding-top: var(--space-8); }
.hd { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.hd-tall { display: none; max-width: var(--layout-fieldWide); margin: 0 auto; }
@media (max-width: 52rem) { .hd-wide { display: none; } .hd-tall { display: block; } }
.hd-bound { fill: var(--c-raised); stroke: var(--c-lineStrong); stroke-width: 1.2; stroke-dasharray: 6 5; }
.hd-cap { fill: var(--c-fgMuted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.hd-n rect, .hd-n polygon { fill: var(--c-surface); stroke: var(--c-fgSubtle); stroke-width: 1.2; }
.hd-step rect { stroke: var(--c-accent); stroke-width: 1.5; }
.hd-diamond polygon { fill: var(--c-accentSoft); stroke: var(--c-accent); stroke-width: 1.5; }
.hd-pill-hi rect { fill: var(--c-accentSoft); stroke: var(--c-accent); }
.hd-pill-none rect { fill: var(--c-okSoft); stroke: var(--c-ok); }
.hd-pill-unclear rect { fill: var(--c-warnSoft); stroke: var(--c-warn); }
.hd-ghost rect { fill: none; stroke-dasharray: 5 4; }
.hd-fold { fill: none; stroke: var(--c-fgSubtle); stroke-width: 1; }
.hd-t { fill: var(--c-fg); font-size: 14px; font-weight: 600; }
.hd-s { fill: var(--c-fgMuted); }
.hd-pill-hi .hd-t { fill: var(--c-accent); } .hd-pill-none .hd-t { fill: var(--c-ok); } .hd-pill-unclear .hd-t { fill: var(--c-warn); }
.hd-e path { fill: none; stroke-linejoin: round; }
.hd-line { stroke: var(--c-fgMuted); stroke-width: 1.3; }
.hd-e.is-dashed .hd-line { stroke-dasharray: 4 4; }
/* 잡는 선 — 투명하고 넓다. 1px 선은 마우스로 올리기 어렵다. */
.hd-hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.hd-flow { stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0; pointer-events: none; }
.hd-head { fill: var(--c-fgMuted); }
.hd-l { fill: var(--c-fgMuted); font-size: 11.5px; }

/* 펼치기 — 상자는 순서대로 떠오르고 선은 그어진다(pathLength=1 로 길이를 1 로 맞춰 둔다). */
.hd-wrap.is-armed .hd-n, .hd-wrap.is-armed .hd-head, .hd-wrap.is-armed .hd-l { opacity: 0; }
.hd-wrap.is-armed .hd-e:not(.is-dashed) .hd-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hd-wrap.is-armed .hd-e.is-dashed .hd-line { opacity: 0; }
.hd-wrap.is-in .hd-n { opacity: 1; animation: hd-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 120ms); }
.hd-wrap.is-in .hd-e:not(.is-dashed) .hd-line { stroke-dashoffset: 0; animation: hd-draw .5s ease-in-out both; animation-delay: calc(var(--i) * 120ms); }
.hd-wrap.is-in .hd-e.is-dashed .hd-line, .hd-wrap.is-in .hd-head, .hd-wrap.is-in .hd-l { opacity: 1;
  animation: hd-fade .25s ease-out both; animation-delay: calc(var(--i) * 120ms + 400ms); }
@keyframes hd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hd-fade { from { opacity: 0; } to { opacity: 1; } }
.hd-n { transform-box: fill-box; }
@media print { .hd-wrap .hd-n, .hd-wrap .hd-head, .hd-wrap .hd-l, .hd-wrap .hd-line { opacity: 1 !important; animation: none !important; stroke-dashoffset: 0 !important; } }

/* 구성도 호버 — 상자에 올리면 그 상자와 이어진 선·옆 상자만 남고 나머지는 물러난다. 선에 올리면 그 선과 양 끝.
   강조된 선은 코발트로 바뀌고 그 위로 점선이 흐른다(방향 = 화살표 방향). 연결은 data-from/data-to(src/ui/how-diagram.js). */
.hd .hd-n, .hd .hd-e { transition: opacity .22s ease; }
.hd-wrap.no-tr .hd-n, .hd-wrap.no-tr .hd-e { transition: none; }
.hd.is-focus .hd-n:not(.is-hl), .hd.is-focus .hd-e:not(.is-hl), .hd.is-focus .hd-l:not(.is-hl) { opacity: .22; }
/* 강조된 것은 펼치기 전(is-armed, 투명)이어도 보인다 — 흐린 것만 불투명도를 받고 강조된 것이 투명하게 남아
   «올린 상자가 사라지는» 일이 캡처에서 나왔다. */
.hd.is-focus .hd-n.is-hl, .hd.is-focus .hd-e.is-hl .hd-head, .hd.is-focus .hd-e.is-hl .hd-l { opacity: 1; }
.hd.is-focus .hd-e.is-hl .hd-line { opacity: 1; stroke-dashoffset: 0; }
.hd.is-focus .hd-e.is-hl .hd-line { stroke: var(--c-accent); stroke-width: 1.8; }
.hd.is-focus .hd-e.is-hl .hd-head { fill: var(--c-accent); }
.hd.is-focus .hd-e.is-hl .hd-flow { opacity: .9; }
.hd.is-focus .hd-n.is-hl rect, .hd.is-focus .hd-n.is-hl polygon { stroke: var(--c-accent); stroke-width: 2; }
.hd-n { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .hd.is-focus .hd-e.is-hl .hd-flow { animation: hd-march .7s linear infinite; }
}
@keyframes hd-march { to { stroke-dashoffset: -11; } }


/* ── 결 (2026-09-29) ─────────────────────────────────────────────────
   «종이와 먹»(종이색·먹선·어긋난 그림자)을 하루 만에 되돌렸다 — 이전 색감이 낫다는 판단. 대신 «고급스럽게» :
   두꺼운 선 대신 머리카락 선(1px), 딱딱한 그림자 대신 겹친 부드러운 그림자, 채운 태그 대신 가는 선과 코발트 숫자,
   흐름도는 판정 배너와 같은 짙은 남색 띠 위의 어두운 판. 색·모서리·그림자는 토큰이 정한다. */
.ledger { box-shadow: var(--shadow-card); }

/* 절 번호 — 코발트 숫자와 짧은 선. 채운 상자보다 조용하다. */
.lp-sec-no { font-family: var(--font-mono); letter-spacing: .08em; font-size: var(--text-sm);
  color: var(--c-accent); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: var(--space-3); }
.lp-sec-no::after { content: ""; width: var(--space-6); height: 1px; background: var(--c-accent); opacity: .5; }

/* 머리 — 근거 조문 줄은 앞에 짧은 선을 둔 난외 표기. 제목은 본문 서체 500 으로 크게, 자간을 조여 차분하게. */
.hero .doc-ref { display: flex; align-items: center; gap: var(--space-3); border: 0; padding: 0;
  font-size: var(--text-xs); letter-spacing: .02em; color: var(--c-fgMuted); }
.hero .doc-ref::before { content: ""; flex: none; width: var(--space-8); height: 1px; background: var(--c-accent); }
.hero h1 { font-family: var(--font-body); font-weight: var(--weight-medium); letter-spacing: -0.04em;
  font-size: var(--text-5xl); line-height: 1.18; }
@media (max-width: 52rem) { .hero h1 { font-size: var(--text-3xl); } }

/* 흐름도 띠 — 판정 배너와 같은 짙은 남색. 안에서는 색 변수를 띠 전용 값으로 바꿔 그림을 어두운 판으로 뒤집는다. */
.lp-band { background: var(--c-band); color: var(--c-bannerFg);
  margin-top: var(--space-24); padding: var(--space-20) 0;
  --c-fg: var(--c-bannerFg); --c-fgMuted: var(--c-bannerMuted); --c-fgSubtle: var(--c-bannerMuted);
  --c-surface: var(--c-bandSurface); --c-raised: var(--c-bandSurface);
  --c-line: var(--c-bandLine); --c-lineStrong: var(--c-bandLineStrong);
  --c-accent: var(--c-bandAccent); --c-accentSoft: var(--c-bandAccentSoft);
  --c-ok: var(--c-bandOk); --c-okSoft: var(--c-bandOkSoft); --c-warn: var(--c-bandWarn); --c-warnSoft: var(--c-bandWarnSoft); }
.lp-band .lp-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.lp-band .hd-bound { fill: var(--c-bandSurface); }
/* 별이 상자 안으로 비치면 글자가 산만하다 — 띠 위 상자는 불투명하게(띠 색에 글자색을 조금 섞는다). */
.lp-band .hd-box rect, .lp-band .hd-step rect, .lp-band .hd-doc rect, .lp-band .hd-diamond polygon {
  fill: color-mix(in srgb, var(--c-band) 90%, var(--c-bannerFg)); }
.lp-band button.ghost { background: transparent; color: var(--c-bannerFg); border-color: var(--c-bandLineStrong); }
.lp-band button.ghost:hover { border-color: var(--c-bandAccent); color: var(--c-bandAccent); }
@media (max-width: 52rem) { .lp-band { margin-top: var(--space-11); padding: var(--space-11) 0; } }

/* ── 손에 닿는 반응 (2026-09-29) ─────────────────────────────────────────
   마우스를 올리면 상자가 부드러운 그림자와 함께 살짝 뜬다. 튀지 않게 2~3px 만.
   마우스가 없거나(터치) 움직임을 줄이는 설정이면 하지 않는다. 고른 보기(inset 테두리)는 들지 않는다. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .opt, .ledger, .paper-sheet, .docs > li, button {
    transition: transform .16s ease, box-shadow .16s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
  .opt:hover:not(:has(input:checked)) { transform: translateY(-2px); box-shadow: var(--shadow-card); }
  .ledger:hover, .paper-sheet:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  button:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
  button:not(:disabled):active { transform: none; box-shadow: none; }
}

/* 문서 목록 = 탭. 누르면 옆 종이가 그 문서의 첫 장으로 바뀐다(public/motion.js). 스크립트가 없으면 결과서만 보인다. */
.docs > li[data-doc] { cursor: pointer; padding-left: var(--space-4); padding-right: var(--space-4);
  margin: 0 calc(-1 * var(--space-4)); }
@media (hover: hover) { .docs > li[data-doc]:hover { background: var(--c-raised); } }
.docs > li.is-on { background: var(--c-surface); box-shadow: inset 2px 0 0 var(--c-accent); }
.docs > li.is-on b { color: var(--c-accent); }
.docs > li[data-doc]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

/* 절 떠오르기 — 스크롤 연동 애니메이션. 지원하지 않는 브라우저에서는 아무 일도 없고 처음부터 보인다.
   JS 로 숨겼다 켜지 않는다 — 감지가 안 도는 환경에서 본문이 투명한 채로 남았다(2026-09-29 캡처에서 확인). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-sec { animation: lp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 흐름도 «다시 보기» */
.hd-block { position: relative; }
.hd-replay { position: absolute; top: calc(-1 * var(--space-12)); right: 0; padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs); }
@media (max-width: 52rem) {
  .hd-replay { position: static; margin-bottom: var(--space-3); }
  /* 좁은 화면에서는 단추가 흐름도 위 줄을 차지한다. motion.js 가 뒤늦게 꺼내면 그림이 한 줄 밀린다 — 자리는 미리 잡아 둔다. */
  /* !important — 전역 [hidden]{display:none!important} 가 이겨 자리 예약이 한 번도 먹지 않았다(2026-09-29 확인). */
  .hd-replay[hidden] { display: inline-block !important; visibility: hidden; }
}

/* 링크로 감싼 버튼(해설·영역 안내의 «사전검토 시작») — 링크 밑줄이 버튼 글자에 그어지지 않게. */
a:has(> button) { text-decoration: none; }


/* 별밭 — 짙은 남색 흐름도 띠의 배경. public/motion.js 가 캔버스를 깐다. 띠가 보일 때만 돌고,
   움직임을 줄이는 설정이면 멈춘 별만 그린다. 내용은 캔버스 위에 둔다. */
.lp-band { position: relative; overflow: hidden; isolation: isolate; }
.lp-band > .wrap { position: relative; z-index: 1; }
.lp-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  animation: stars-in 1.2s ease-out both; }
/* 캔버스는 스크립트가 뒤늦게 깐다 — 별이 한 박자 늦게 툭 켜지지 않게 서서히 밝힌다. */
@keyframes stars-in { from { opacity: 0; } to { opacity: 1; } }

/* 이행 계획 미리보기 — 4칸 표를 좁은 종이에 넣으면 제재 칸이 «시정명령 / 불이행 시 / 과태료» 로 세 줄씩 접힌다.
   미리보기에서만 행을 카드로 푼다: 윗줄 의무 + 제재 태그(한 줄), 아랫줄 근거·만들 것. 실제 PDF 의 표는 그대로다. */
#sheet-plan table, #sheet-plan tbody { display: block; }
#sheet-plan thead { display: none; }
#sheet-plan tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "duty pen" "cite cite" "make make";
  gap: 2px var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--c-line); }
#sheet-plan tr:last-child { border-bottom: 0; }
#sheet-plan td { border: 0; padding: 0; background: none; }
#sheet-plan td:nth-child(1) { grid-area: duty; color: var(--c-fg); font-weight: var(--weight-semibold); white-space: normal; }
#sheet-plan td:nth-child(2) { grid-area: cite; color: var(--c-fgMuted); }
#sheet-plan td:nth-child(3) { grid-area: make; color: var(--c-fgMuted); }
#sheet-plan td:nth-child(3)::before { content: "만들 것 · "; color: var(--c-fgSubtle); }
#sheet-plan td:nth-child(4) { grid-area: pen; align-self: start; white-space: nowrap; font-size: 11px; color: var(--c-fg);
  border: 1px solid var(--c-lineStrong); border-radius: var(--radius-pill); padding: 1px 8px; }


/* 상단 메뉴 (2026-09-29) — 빌드가 모든 면의 .bar 에 넣는다. 로고 옆에 조용히, 지금 면은 코발트 밑줄. */
.bar-nav { display: flex; align-items: center; gap: var(--space-6); margin-right: auto; margin-left: var(--space-8);
  font-size: var(--text-sm); }
.bar-nav a, .bar-nav span { color: var(--c-fgMuted); text-decoration: none; padding: var(--space-1) 0;
  border-bottom: 1.5px solid transparent; transition: color .16s ease, border-color .16s ease; }
.bar-nav a:hover { color: var(--c-fg); border-bottom-color: var(--c-lineStrong); }
.bar-nav [aria-current], .bar-nav .is-here { color: var(--c-fg); border-bottom-color: var(--c-accent); }
.bar-cta { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap;
  color: var(--c-btnFg); background: var(--c-btn); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4);
  transition: background-color .18s ease, transform .16s ease, box-shadow .16s ease; }
.bar-cta:hover { background: var(--c-btnHover); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .bar-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } }
.bar-inner:has(.bar-nav) .brand-sub { display: none; }
body.in-flow .bar-nav { display: none; }
@media (max-width: 52rem) { .bar-nav { gap: var(--space-4); margin-left: var(--space-4); font-size: var(--text-xs); } }
@media (max-width: 40rem) {
  .bar-inner:has(#progress) .bar-nav { display: none; }
  /* 폰 폭에서 로고·메뉴 셋·시작 단추가 한 줄에 들지 않아 «오틸 / 리아», «판정 / 방법» 으로 꺾였다(2026-09-29).
     메뉴를 둘째 줄로 내린다 — 로고와 시작 단추가 윗줄, 메뉴가 아랫줄 전체. */

  .bar-cta { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
}


/* 버튼 모양 링크 줄 · «더 보기» 링크 — 머리·띠·시작 띠가 같이 쓴다. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin: var(--space-8) 0 0; }
.hero-actions .bar-cta { font-size: var(--text-base); padding: var(--space-3) var(--space-6); }
.more-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--c-accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2); }
.more-link::after { content: "→"; transition: transform .16s ease; }
.more-link:hover::after { transform: translateX(3px); }
.band-more { margin: var(--space-8) 0 0; text-align: right; }

/* /method 절 배치 — 본문과 따라다니는 카드, 두 칸, 질문 격자, 끝의 시작 띠. */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-rail); gap: var(--space-16); align-items: start; }
.lp-aside { position: sticky; top: var(--layout-stickyTop); }
.lp-aside .panel { box-shadow: var(--shadow-card); }
.lp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); align-items: start; }
.lp-two .callout { margin: 0; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: 0; }
.faq-item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--space-6); transition: transform .16s ease, box-shadow .16s ease; }
.faq-item dt { font-weight: var(--weight-semibold); margin: 0 0 var(--space-3); }
.faq-item dd { margin: 0; color: var(--c-fgMuted); font-size: var(--text-sm); line-height: var(--leading-body); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .faq-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } }
.lp-cta { margin: var(--space-24) 0 var(--space-16); padding: var(--space-12); text-align: center;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.lp-cta-t { font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: -0.03em; margin: 0 0 var(--space-3); }
.lp-cta .hero-actions { justify-content: center; }
@media (max-width: 60rem) {
  .lp-split, .lp-two, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .lp-aside { position: static; }
  .lp-cta { padding: var(--space-8) var(--space-5); }
}

/* 결과 링크(#v1.…)로 열 때 — public/boot.js 가 <head> 에서 표시하고 app.js 가 결과를 그린 뒤 푼다.
   그 사이 정적 첫 화면이 번쩍 보였다가 결과로 바뀌지 않게 가린다. display 가 아니라 visibility 라
   자리는 그대로다 — 푸터가 상단바 밑으로 올라붙었다 내려가지 않는다. */
html.boot-result :is(#hero, #app, .ledger-after, .intro, .lp-band, #progress) { visibility: hidden; }

/* ── 하위 면 공통 틀 (2026-09-29) ─────────────────────────────────────────
   해설·영역 안내·처리방침·404 가 첫 화면·/method 와 같은 사이트로 읽히게: 위치 줄 · 칩 · 차례 · 번호 붙은 소제목 ·
   카드 목록 · 앞뒤 글 · 시작 띠 · 푸터 사이트 메뉴. 마크업은 scripts/subpage.js 가 만든다. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  font-size: var(--text-xs); letter-spacing: .02em; color: var(--c-fgMuted); margin: 0 0 var(--space-5); }
.crumbs::before { content: ""; flex: none; width: var(--space-8); height: 1px; background: var(--c-accent); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--c-accent); }
.crumbs .sep { color: var(--c-fgSubtle); }
.crumbs [aria-current] { color: var(--c-fg); }
.page-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-6) 0 0; }
.page-meta li { font-size: var(--text-xs); color: var(--c-fgMuted); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); padding: 3px var(--space-3); white-space: nowrap; }

/* 글 본문 — 차례 카드, 번호 붙은 소제목. 소제목은 상단바에 가리지 않게 스크롤 여백을 둔다. */
.toc { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-11); }
.toc-t { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  color: var(--c-fgMuted); margin: 0 0 var(--space-3); }
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; font-size: var(--text-sm);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-8); }
.toc li { counter-increment: toc; display: flex; gap: var(--space-3); align-items: baseline; min-width: 0; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--c-accent); flex: none; }
.toc a { color: var(--c-fg); text-decoration: none; }
.toc a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.page main h2[id] { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-xl);
  letter-spacing: -0.02em; margin: var(--space-12) 0 var(--space-4); scroll-margin-top: var(--layout-stickyTop); }
.page main .toc + h2[id], .page main > h2[id]:first-child { margin-top: 0; }
.sec-no { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--c-accent); letter-spacing: .08em; flex: none; }
/* 원문 인용에는 «원문» 표시 — 우리 말과 가이드라인의 말이 한눈에 갈려야 한다(목 표시가 있는 인용은 그것이 머리다). */
.page main blockquote.source:not(:has(.mok))::before { content: "원문"; display: block; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); color: var(--c-accent); letter-spacing: var(--tracking-label); margin-bottom: var(--space-1); }
@media (max-width: 52rem) { .toc ol { grid-template-columns: minmax(0, 1fr); } }

/* 목록 면 — 카드 격자. 카드 전체가 눌린다(링크를 카드 크기로 늘린다). 조문 표기는 위, 제목, 한 줄 설명, 화살표. */
.sub-body .sub-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sub-sec { margin-top: var(--space-20); }
ul.cards { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: var(--space-5); }
/* min(…,100%) — 320px 폭에서 카드 최소 폭(304px)이 안쪽 폭(288px)을 넘어 면이 옆으로 밀렸다. */
ul.cards > li { position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-11); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
ul.cards > li > a { order: 1; color: var(--c-fg); text-decoration: none; font-weight: var(--weight-semibold);
  font-size: var(--text-lg); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
ul.cards > li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
ul.cards > li > .cite { order: 0; margin: 0; }
/* 묶음에 글이 하나뿐이면(해설 «판단 방법») 카드 한 장이 한 칸만 차지하고 옆 두 칸이 비었다 — 한 줄 전체를 쓴다. */
ul.cards > li:only-child { grid-column: 1 / -1; }
ul.cards > li:only-child > :is(a, .card-d) { max-width: var(--measure); }
ul.cards > li > .card-d { order: 2; margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--c-fgMuted);
  line-height: var(--leading-body); text-wrap: pretty; }
ul.cards > li::after { content: "→"; position: absolute; right: var(--space-6); bottom: var(--space-5);
  color: var(--c-accent); font-weight: var(--weight-semibold); transition: transform .16s ease; }
@media (hover: hover) { ul.cards > li:hover { border-color: var(--c-lineStrong); } }
ul.cards > li:hover > a { color: var(--c-accent); }
/* 키보드 초점일 때만 카드 전체에 테두리 — :focus-within 은 마우스로 눌러도 켜진다. */
ul.cards > li:has(> a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
ul.cards > li > a:focus-visible { outline: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  ul.cards > li:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
  ul.cards > li:hover::after { transform: translateX(3px); } }
.guide-list .table-wrap { margin-top: var(--space-6); }

/* 글 끝 — 앞뒤 글 카드와 시작 띠. 본문·레일 두 칸 아래에 전체 폭으로. */
.sub-tail .pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
  margin-top: var(--space-20); padding-top: var(--space-8); border-top: 1px solid var(--c-line); }
.pager a { display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-6); text-decoration: none; color: var(--c-fg);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.pager small { font-size: var(--text-xs); color: var(--c-fgMuted); }
.pager .prev small::before { content: "← "; }
.pager .next { text-align: right; }
.pager .next small::after { content: " →"; }
.pager span { font-weight: var(--weight-medium); text-wrap: pretty; }
.pager a:hover { border-color: var(--c-lineStrong); }
.pager a:hover span { color: var(--c-accent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pager a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } }
.sub-cta { margin: var(--space-16) 0 0; }
.sub-cta .note { max-width: var(--measure); margin: 0 auto; }
.sub-tail > .sub-cta:first-child { margin-top: var(--space-20); }
@media (max-width: 52rem) {
  .sub-tail .pager { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-12); }
  .pager .next { text-align: left; }
  .sub-cta, .sub-tail > .sub-cta:first-child { margin-top: var(--space-11); }
}
/* 레일이 없는 목록 면에서 본문과 시작 띠 사이 */
.sub-body + .sub-tail > .sub-cta:first-child { margin-top: var(--space-20); }

/* 푸터 사이트 메뉴 — 모든 면에 같은 한 벌. 아래로 근거 줄·고지가 이어진다. */
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-4) var(--space-8);
  padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--c-line); }
.foot-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: 0; }
.foot-brand b { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--c-fg); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-xs); }
.foot-nav a { color: var(--c-fgMuted); text-decoration: none; }
.foot-nav a:hover { color: var(--c-accent); }
.foot-nav [aria-current] { color: var(--c-fg); }
@media print { .crumbs, .page-meta, .toc, .sub-tail, .foot-top { display: none !important; } }
/* 제목 안에서 떨어지면 안 되는 말 묶음 — 폰 폭에서 «3분 / 만에» 로 꺾였다. */
.nobr { white-space: nowrap; }

/* ── 다듬기 (2026-09-29, 전 화면 점검) ─────────────────────────────────────
   폰 폭·결과 화면에서 꺾이고 잘리던 것들. 한 곳에 모아 둔다. */

/* 절 번호가 «0 / 1» 로 꺾였다 — 제목이 길면 번호 칸이 밀렸다. 번호는 줄지 않는다. */
.lp-sec-no { flex: none; white-space: nowrap; }
.lp-cta-t { text-wrap: balance; }

/* 결과 배너 — 걸린 영역 칩이 «대출 / 심사» 로 꺾였다. 칩 안은 한 줄, lead 는 외톨이 낱말 없이. */
.chip { white-space: nowrap; }
.banner .sub { text-wrap: pretty; }
.jump-docs { display: none; }
@media (max-width: 60rem) {
  .jump-docs { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 0;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm);
    font-weight: var(--weight-semibold); text-decoration: none; background: var(--c-bannerFg); color: var(--c-banner); }
  .jump-docs::after { content: "↓"; }
  .banner.is-none .jump-docs { background: var(--c-btn); color: var(--c-btnFg); }
  #docs { scroll-margin-top: var(--layout-stickyTop); }
}
@media (max-width: 52rem) {
  /* 요지 셋이 두 줄로 넘어가면 셋째 앞의 세로 괘선이 허공에 떴다 — 폰에서는 괘선 없는 두 칸 격자로. */
  .banner .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
  .banner .facts > div { border-left: 0; padding-left: 0; }
}

/* /method 의 따라다니는 카드 — .rail 밖이라 패널 상자가 안 입혀져 글과 단추가 허공에 떠 있었다. */
.lp-aside .panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--layout-padCard); }
.lp-aside :is(h3, h4) { font-family: var(--font-body); line-height: var(--leading-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  color: var(--c-fgMuted); margin: 0 0 var(--space-3); }
.lp-aside .hint { font-size: var(--text-sm); color: var(--c-fgMuted); margin: 0; }
.lp-aside .hero-actions { margin-top: var(--space-5); }

/* 푸터 링크 — 파란 밑줄 열여섯 개가 한 줄에 서면 푸터가 본문보다 시끄럽다. 회색 글자와 옅은 밑줄로 한 단 물린다. */
footer a { color: var(--c-fgMuted); text-decoration-color: var(--c-line); text-underline-offset: 3px; }
footer a:hover { color: var(--c-accent); text-decoration-color: currentColor; }
/* 문답 중에는 푸터 메뉴도 감춘다 — 상단 메뉴를 감추는 것과 같은 이유(누르면 답이 날아간다). */
body.in-flow .foot-nav, body.in-flow .area-links { display: none; }

@media (max-width: 40rem) {
  /* 문항 화면 단추 — «잘 모르겠습니다» 가 세 줄로 꺾였다. 그 단추는 윗줄 전체로, 이전·다음은 아랫줄에. */
  .actionbar .actions button { white-space: nowrap; }
  .actionbar .actions:has(#skip) { flex-wrap: wrap; }
  .actionbar #skip { order: -1; flex: 1 1 100%; }

  /* 폰 첫 화면 — 첫 문항 제목이 844px 화면의 845px 에 있었다(320px 폭은 897px). 스크롤 전에는 «문답 도구» 인 줄
     모른다. 머리를 줄여 첫 문항과 첫 보기를 첫 화면에 올린다(2026-09-29 실측).
     · 위 난외 줄(법 이름)은 감춘다 — lead 가 제33조제1항을 이미 말한다
     · lead 는 한 단계 작게
     · 판정 기준 카드는 첫 문항 «아래» 로 — 빌드가 같은 카드를 .ledger-after 로 한 번 더 그린다. 실제 아이폰 Safari 는
       주소창·도구 막대 때문에 보이는 높이가 660px 안팎이라, 머리에 두면 줄여도 첫 보기가 밖으로 나갔다.
     · 구분 이름(법률·시행령·가이드라인)은 바로 옆 이름이 이미 말한다 — 접는다 */
  .hero { padding-top: var(--space-6); gap: var(--space-4); }
  .hero .doc-ref { display: none; }
  .hero h1 { margin-bottom: var(--space-3); }
  .hero .lead { font-size: var(--text-base); }
  .hero .ledger { display: none; }
  .ledger-after { display: block; margin-top: var(--space-6); }
  .ledger dt { display: none; }
  .ask { margin-top: var(--space-6); }

  /* 의무 표 — 네 칸이 폰 폭을 넘어 제재 칸이 화면 밖으로 밀렸다. 행을 카드로: 윗줄 의무·제재, 아랫줄 근거·성격. */
  .table-wrap > table.duty { min-width: 0; }
  table.duty, table.duty tbody { display: block; }
  table.duty thead { display: none; }
  table.duty tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
  table.duty tr:last-child { border-bottom: 0; }
  table.duty td { display: block; padding: 0; border: 0; text-align: left; }
  table.duty td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: var(--weight-medium); }
  table.duty td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; font-size: var(--text-xs); }
  table.duty td:nth-child(2) { grid-column: 1; grid-row: 2; }
  table.duty td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; font-size: var(--text-xs); color: var(--c-fgMuted); }

  /* 출처 표 — 둘째 칸이 잘렸다. 폰에서는 위아래로 쌓는다. */
  .table-wrap > table.prov { min-width: 0; }
  table.prov, table.prov tbody, table.prov tr, table.prov td { display: block; }
  table.prov thead { display: none; }
  table.prov tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
  table.prov tr:last-child { border-bottom: 0; }
  table.prov td, table.prov td:first-child { width: auto; padding: 0; border: 0; text-align: left; }

  /* 확인 절차 그림 — 폰 폭에 맞춰 줄이면 글자가 5px 로 읽을 수 없었다. 원래 크기로 두고 옆으로 민다. */
  .flow-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .flow-wrap > svg.flow { min-width: 38rem; }
}

/* 짙은 남색 위 초점 표시 — 초점 색(#1d3fd0)이 띠·배너(#0f1c4d) 위에서 대비 1.9:1 로 거의 안 보였다(기준 3:1).
   띠 안에서는 띠의 밝은 강조색, 배너 안에서는 배너 글자색으로 바꾼다. */
.lp-band { --c-focus: var(--c-bandAccent); }
.banner { --c-focus: var(--c-bannerFg); }

/* iOS Safari 는 16px 보다 작은 입력칸을 누르면 화면을 확대하고 되돌리지 않는다 — 결과서 받기·제보 폼이 14px 이었다.
   손가락 화면에서는 입력칸 글자를 16px 로 둔다(2026-09-29 점검). */
@media (pointer: coarse), (max-width: 52rem) {
  input[type=text], input[type=email], input:not([type]), textarea, select,
  .fb-form input, .fb-form textarea, .fb-form select, .gate-fields .field input { font-size: 16px; }
}

/* 손가락 화면 — iOS 는 누른 뒤 :hover 가 남는다. 보기를 눌렀다 떼도 테두리가 진하게 남아 «골라진 것» 처럼 보였고,
   단추는 누른 색이 그대로 남았다. 그래서 보기·단추·카드의 호버 색은 제자리에서 @media (hover: hover) 로 감쌌다(순서를 옮기면
   같은 우선순위의 뒤 규칙을 덮는다). 누를 때 회색 번쩍임도 끈다(2026-09-29). */
.opt, .docs > li, ul.cards > li > a, .pager a, button, .bar-cta, .jump-docs { -webkit-tap-highlight-color: transparent; }

/* 상단바 — 태블릿 세로(768px)에서 로고·메뉴 셋·진행 표시가 한 줄에 몰려 «오틸리 / 아», «판정 / 방법», «약 / 3분» 으로
   꺾였다(2026-09-29). 52rem 이하에서는 메뉴를 둘째 줄 전체로 내리고, 로고·메뉴·진행 표시 글자는 줄바꿈하지 않는다.
   (40rem 이하 첫 화면은 진행 표시가 있으면 메뉴를 감추는 규칙이 그대로 이긴다.) */
.brand a, .bar-nav a, .bar-nav span, .progress .step-label, .progress .eta { white-space: nowrap; }
@media (max-width: 52rem) {
  .bar-inner:has(.bar-nav) { flex-wrap: wrap; row-gap: 0; }
  .bar-inner:has(.bar-nav) .bar-nav { order: 3; flex-basis: 100%; margin: 0; gap: var(--space-5); padding-bottom: var(--space-1); }
}
/* 첫 문항 제목 — 320px 에서 «인공지능시스템인 / 가요?» 로 낱말 가운데가 끊겼다. 좁은 폭에서는 화면 폭에 맞춰 줄인다. */
@media (max-width: 40rem) { .ask-head h2 { font-size: clamp(var(--text-xl), 7vw, var(--text-2xl)); } }