/* 사용법 · 개인정보처리방침 · 404 본문 (SPEC §12.4, §7.7). 휴대폰 한 줄(최대 480px). style.css의 토큰만 쓴다(밝은·어두운 화면 모두).
   크기 단계: 14 / 16 / 18 / 22 / 32px (본문 16px 이상). 괘선은 스코어카드처럼 가늘게. */

/* ───────── 글 본문 ───────── */
.doc-wrap { padding-bottom: 8px; }
.doc { padding-top: 4px; }
.doc-head h1 { margin-top: 20px; font-size: var(--fs-xl); font-weight: 800; }
.doc .lead { margin-top: 12px; font-size: var(--fs-m); line-height: 1.7; }

.doc-sec { scroll-margin-top: 12px; }
.doc-sec h2 { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-l); font-weight: 800; scroll-margin-top: 12px; }
.doc h3 { margin-top: 28px; font-size: var(--fs-m); font-weight: 800; scroll-margin-top: 12px; }
.doc p { margin-top: 12px; line-height: 1.75; }
.doc .lead, .doc .doc-head + p { margin-top: 12px; }
.doc strong { font-weight: 800; }

.doc ul, .doc ol { margin-top: 12px; padding-left: 22px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li { line-height: 1.7; padding-left: 2px; }
.doc li + li { margin-top: 6px; }
.doc li > ul, .doc li > ol { margin-top: 6px; }
.doc li::marker { color: var(--muted); }
.doc ul.meta-list { margin-top: 12px; padding-left: 0; list-style: none; color: var(--muted); }
.doc ul.meta-list li + li { margin-top: 2px; }

.doc a { overflow-wrap: anywhere; }
.doc code {
  padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; font-size: .9em;
  overflow-wrap: anywhere; word-break: break-all;
}

/* 카톡 글 예시 */
.doc pre.sample {
  margin: 12px 0 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--fairway); border-radius: var(--radius);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.doc pre.sample code { padding: 0; background: none; border-radius: 0; font: 400 var(--fs-b)/1.7 var(--font); word-break: keep-all; }

/* 표: 스코어카드처럼 가는 괘선. 폭이 모자라면 글이 줄을 바꾼다(가로 스크롤 없음) */
.table-wrap { margin-top: 12px; overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); line-height: 1.6; }
.doc th, .doc td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc th { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); font-size: var(--fs-s); font-weight: 700; color: var(--muted); }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc td:first-child { width: 40%; font-weight: 700; }

/* 칸이 넷 이상인 표(개인정보 저장 항목)는 폰 폭에서 행마다 카드로 쌓는다. 칸 제목은 칸 위에 붙는다 */
.doc table.stack, .doc table.stack tbody, .doc table.stack tr, .doc table.stack td { display: block; width: auto; }
.doc table.stack { border: 0; background: none; }
.doc table.stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.doc table.stack tr { margin-top: 12px; padding: 2px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.doc table.stack td, .doc table.stack td:first-child { width: auto; padding: 10px 0 0; border: 0; font-weight: 400; }
.doc table.stack td::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--fs-s); font-weight: 700; }

/* 목차(접힘) */
.toc { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.toc summary { display: flex; align-items: center; min-height: var(--tap); padding: 0 16px; font-weight: 700; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.doc .toc ul { margin: 0; padding: 0 8px 4px; list-style: none; }
.doc .toc li { padding: 0; }
.doc .toc li + li { margin-top: 0; }
.toc li a { display: flex; align-items: center; min-height: var(--tap); padding: 0 8px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }

/* 머리 메뉴: 지금 보는 쪽 */
.head-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ───────── 404 ───────── */
.notfound { padding-top: 40px; text-align: center; }
.nf-art { width: 120px; height: 120px; margin: 0 auto; }
.nf-green { fill: var(--fairway); }
.nf-hole { fill: var(--bg); }
.nf-pole { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.nf-flag { fill: var(--flag); }
.nf-ball { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.nf-code { margin-top: 8px; font-size: 48px; font-weight: 800; line-height: 1.1; color: var(--fairway); font-variant-numeric: tabular-nums; }
.notfound h1 { margin-top: 8px; font-size: var(--fs-l); font-weight: 800; }
.notfound p { margin-top: 8px; color: var(--muted); line-height: 1.7; }
.nf-actions { display: grid; gap: 12px; margin-top: 28px; }