/*
 * 국시핵심정리 스타일 — web/guide/집필_원칙.md "읽기 좋은 화면" 절을 코드로 옮긴 것.
 *
 * 지키는 것:
 *   - 14px보다 작은 글자는 없다 (tests/guide.test.mjs가 font-size를 센다). 꼬리표·딱지·고정폭 머리말을 쓰지 않는다.
 *   - 제목은 장(h1) · 절(h2) · 표 이름(h3) 세 단계뿐이다. 번호는 제목 안에 같은 글꼴로 쓴다.
 *   - 영어 병기는 본문과 같은 크기, 색만 옅게.
 *   - 넓은 표는 가로로 밀어도 행 이름(첫 열)이 남는다. 폰에서 4열 이상 표는 행마다 묶음으로 바뀐다.
 * 색은 앱(design.md, css/tokens.css)의 Clinical Workbench 팔레트를 그대로 쓴다.
 */
:root {
  color-scheme: light;
  --paper: oklch(98.5% 0.003 240);
  --paper-2: oklch(96.5% 0.005 240);
  --paper-3: oklch(93% 0.008 240);
  --rule: oklch(89% 0.007 240);
  --ink: oklch(18% 0.012 240);
  --ink-2: oklch(40% 0.01 240);
  --muted: oklch(46% 0.008 240);
  --accent: oklch(48% 0.115 205);
  --accent-text: oklch(45% 0.115 205);
  --accent-soft: oklch(94% 0.025 205);
  --hot: oklch(52% 0.17 35);
  --hot-soft: oklch(95% 0.028 35);
  --good: oklch(46% 0.11 165);
  --good-soft: oklch(95% 0.025 165);
  --warn: oklch(50% 0.12 70);
  --warn-soft: oklch(95.5% 0.035 80);
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --read: 42rem;
  --wide: 62rem;
  --bar: 3.25rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: oklch(26.5% 0.002 80);
    --paper-2: oklch(29.8% 0.003 80);
    --paper-3: oklch(34.5% 0.004 80);
    --rule: oklch(38% 0.004 80);
    --ink: oklch(95% 0.002 80);
    --ink-2: oklch(80% 0.003 80);
    --muted: oklch(74% 0.004 80);
    --accent-text: oklch(80% 0.1 215);
    --accent-soft: oklch(34% 0.04 215);
    --hot: oklch(76% 0.13 35);
    --hot-soft: oklch(34% 0.05 30);
    --good: oklch(80% 0.12 155);
    --good-soft: oklch(33% 0.045 155);
    --warn: oklch(82% 0.12 80);
    --warn-soft: oklch(35% 0.05 75);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(26.5% 0.002 80);
  --paper-2: oklch(29.8% 0.003 80);
  --paper-3: oklch(34.5% 0.004 80);
  --rule: oklch(38% 0.004 80);
  --ink: oklch(95% 0.002 80);
  --ink-2: oklch(80% 0.003 80);
  --muted: oklch(74% 0.004 80);
  --accent-text: oklch(80% 0.1 215);
  --accent-soft: oklch(34% 0.04 215);
  --hot: oklch(76% 0.13 35);
  --hot-soft: oklch(34% 0.05 30);
  --good: oklch(80% 0.12 155);
  --good-soft: oklch(33% 0.045 155);
  --warn: oklch(82% 0.12 80);
  --warn-soft: oklch(35% 0.05 75);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 1rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent-text); text-underline-offset: 0.18em; }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 0.5rem; z-index: 30; background: var(--paper); padding: 0.4rem 0.8rem; }

/* ── 위 막대 ─────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top, 0px);
}
.bar-in {
  max-width: 82rem; margin: 0 auto; height: var(--bar);
  padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 1rem;
}
.home { font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; }
.crumbs { min-width: 0; flex: 1; display: flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: var(--muted); }

.toc-pop { flex: none; }
.toc-pop > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: 0.9375rem; font-weight: 700; color: var(--ink);
  padding: 0.35rem 0.85rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2);
}
.toc-pop > summary::-webkit-details-marker { display: none; }
.toc-pop[open] > summary { background: var(--accent-soft); border-color: var(--accent); }
.toc-pop-body {
  position: fixed; left: 0; right: 0; top: calc(var(--bar) + env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - var(--bar) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 24px oklch(0% 0 0 / 0.12);
  padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) 1.5rem max(1rem, env(safe-area-inset-left, 0px));
}

/* 밝기 단추·앱으로 가기: 목차 버튼과 같은 모양. 밝기 단추는 JS가 있을 때만 보인다(hidden). */
.theme, .to-app {
  flex: none; font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  padding: 0.35rem 0.85rem; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; text-decoration: none;
}
.theme { color: var(--ink-2); background: transparent; }
.theme:hover { color: var(--ink); background: var(--paper-2); }
.theme[hidden] { display: none; }
.to-app { color: #fff; background: var(--accent); border-color: var(--accent); }
.to-app:hover { filter: brightness(1.08); }

/* ── 틀: 왼쪽 목차 + 본문 ────────────────────────────────────────────────── */
.shell { max-width: 82rem; margin: 0 auto; padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px)); }
.side { display: none; }
@media (min-width: 72rem) {
  .shell:not(.solo) { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; }
  .side {
    display: block; position: sticky; top: calc(var(--bar) + 1.5rem); align-self: start;
    max-height: calc(100vh - var(--bar) - 3rem); overflow-y: auto; padding: 0.25rem 0.5rem 2rem 0;
    scrollbar-width: thin;
  }
  .toc-pop { display: none; }
}

/* 목차 (왼쪽·목차 버튼 공용) */
.toc { font-size: 0.9375rem; line-height: 1.5; }
.toc p { margin: 0; }
.toc a { color: var(--ink-2); text-decoration: none; display: block; padding: 0.3rem 0.5rem; border-radius: 6px; }
.toc a:hover { background: var(--paper-2); color: var(--ink); }
.toc .toc-book a { color: var(--muted); font-weight: 600; }
.toc .toc-part a { color: var(--ink); font-weight: 800; font-size: 1.0625rem; margin-top: 0.25rem; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc-ch { margin-top: 0.5rem !important; display: grid; gap: 0.1rem; }
.toc-ch > li > a .no { color: var(--muted); font-weight: 600; margin-right: 0.15rem; }
.toc-ch > li.here > a { color: var(--ink); font-weight: 750; background: var(--paper-2); }
.toc-sec { margin: 0.2rem 0 0.6rem 0.75rem !important; border-left: 2px solid var(--rule); }
.toc-sec a { padding: 0.25rem 0.6rem; border-radius: 0 6px 6px 0; margin-left: -2px; border-left: 2px solid transparent; }
.toc-sec a .no { color: var(--muted); }
.toc-sec a[aria-current] { color: var(--accent-text); border-left-color: var(--accent); font-weight: 650; background: transparent; }

/* ── 본문 ────────────────────────────────────────────────────────────────── */
.page { min-width: 0; padding: 2.5rem 0 4rem; }
.page > * { max-width: var(--wide); }
.chapter-head { display: grid; gap: 0.25rem; }
h1 {
  margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4.2vw, 2.5rem); line-height: 1.2; letter-spacing: -0.025em;
  font-weight: 800; text-wrap: balance;
}
h1 .no, h2 .no { color: var(--accent-text); font-weight: inherit; margin-right: 0.1em; }
h2 {
  margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance;
}
h3 { margin: 2.25rem 0 0.6rem; font-size: 1.1875rem; line-height: 1.45; font-weight: 750; letter-spacing: -0.01em; max-width: var(--read); }
.page p, .page ul, .page ol { max-width: var(--read); }
.page p { margin: 0.8rem 0; }
.page ul, .page ol { padding-left: 1.35em; margin: 0.8rem 0; }
.page li { margin: 0.35rem 0; }
.page li::marker { color: var(--muted); }
.facts { color: var(--ink-2); font-weight: 600; margin: 0 0 0.5rem !important; }

.sec { border-top: 1px solid var(--rule); margin-top: 3.5rem; padding-top: 2.25rem; }
.sec > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }

/* 영어 병기: 같은 크기, 옅은 색. 굵은 글씨 안에 있어도 굵지 않게. */
.gl { color: var(--ink-2); font-weight: 400; }
th .en { display: block; margin-top: 0.15rem; color: var(--ink-2); font-weight: 400; }

/* 빈출 라벨 */
.tier {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0.875rem; font-weight: 700; line-height: 1.4; letter-spacing: 0;
  padding: 0.1rem 0.6rem; border-radius: 999px;
}
.tier.top { color: var(--hot); background: var(--hot-soft); }
.tier.frequent { color: var(--accent-text); background: var(--accent-soft); }
.tier.trend { color: var(--good); background: var(--good-soft); }

/* 장 첫머리의 절 목록 */
.contents { margin: 1.25rem 0 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); padding: 0.5rem 0; max-width: var(--read); }
.contents ol { list-style: none; margin: 0 !important; padding: 0 !important; }
.contents li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 !important; padding: 0.45rem 1.1rem; }
.contents li + li { border-top: 1px solid var(--rule); }
.contents a { text-decoration: none; color: var(--ink); font-weight: 600; display: inline-flex; gap: 0.6rem; }
.contents a:hover .t { text-decoration: underline; }
.contents .no { color: var(--accent-text); min-width: 2.2em; }

/* 표 */
.tbl {
  margin: 1rem 0 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.96875rem; line-height: 1.6; }
th, td { text-align: left; vertical-align: top; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--rule); }
th + th, th + td, td + td { border-left: 1px solid var(--rule); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { background: var(--paper-3); font-weight: 750; white-space: nowrap; }
thead th .en { white-space: normal; }
tbody th { background: var(--paper-2); font-weight: 700; position: sticky; left: 0; z-index: 1; min-width: 8em; max-width: 13em; }
td { min-width: 8.5em; }
td strong { font-weight: 750; }

/* 함정·암기·참고: 머리말 상자가 아니라 굵은 첫 낱말 하나 */
.note {
  max-width: var(--read); margin: 1rem 0; padding: 0.75rem 1.1rem;
  border-left: 4px solid var(--rule); border-radius: 0 10px 10px 0; background: var(--paper-2);
}
.note p { margin: 0.35rem 0 !important; }
.note .lead { margin-right: 0.2rem; }
.note.trap { border-left-color: var(--hot); background: var(--hot-soft); }
.note.trap .lead { color: var(--hot); }
.note.memo { border-left-color: var(--good); background: var(--good-soft); }
.note.memo .lead { color: var(--good); }
.note.info .lead { color: var(--accent-text); }

/* 확인 문제 */
.quiz { list-style: decimal; padding-left: 1.6em !important; display: grid; gap: 0.5rem; }
.quiz li { margin: 0 !important; }
.qa { border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.qa > summary { cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 600; list-style-position: inside; }
.qa > summary::marker { color: var(--muted); }
.qa[open] > summary { border-bottom: 1px solid var(--rule); }
.qa > p { margin: 0 !important; padding: 0.6rem 0.9rem; color: var(--ink); background: var(--good-soft); border-radius: 0 0 10px 10px; }

.to-cards { margin: 1.5rem 0 0 !important; font-weight: 650; }
.to-cards a { text-decoration: none; }
.to-cards a:hover { text-decoration: underline; }

/* 이 장의 카드: 앱의 카드 한 장을 본문 사이에 둔다. 표·함정 상자와 구별되게 테두리 있는 카드 모양 */
.card-pick {
  max-width: var(--read); margin: 1.5rem 0; padding: 1rem 1.15rem 0.9rem;
  border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 12px; background: var(--paper);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
}
.card-pick p { margin: 0 !important; }
.pick-kicker { font-size: 0.875rem; font-weight: 700; color: var(--accent-text); letter-spacing: 0.01em; }
.pick-front { margin-top: 0.5rem !important; font-size: 1.0625rem; line-height: 1.7; font-weight: 550; }
.pick-blank {
  display: inline-block; min-width: 4.5em; margin: 0 0.15em; padding: 0 0.5em; text-align: center;
  border-bottom: 2px solid var(--accent); color: var(--muted); font-weight: 500; font-size: 0.9375em;
}
.pick-back { margin-top: 0.75rem; }
.pick-back > summary {
  display: inline-block; cursor: pointer; padding: 0.35rem 0.9rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 0.9375rem; list-style: none;
}
.pick-back > summary::-webkit-details-marker { display: none; }
.pick-back[open] > summary { display: none; }
/* 답을 열면 같은 문장이 답을 채워 다시 나온다 — 앞면은 접는다 */
.card-pick:has(.pick-back[open]) .pick-front { display: none; }
.card-pick:has(.pick-back[open]) .pick-back { margin-top: 0.5rem; }
.pick-answer { line-height: 1.7; }
.pick-answer mark { background: var(--good-soft); color: var(--good); font-weight: 750; padding: 0 0.2em; border-radius: 4px; }
.pick-why { margin-top: 0.6rem !important; padding-top: 0.6rem; border-top: 1px dashed var(--rule); color: var(--ink-2, var(--ink)); font-size: 0.9375rem; line-height: 1.7; }
.pick-cta { margin-top: 0.85rem !important; font-size: 0.9375rem; font-weight: 650; }
.pick-cta a { text-decoration: none; }
.pick-cta a:hover { text-decoration: underline; }
.status { margin-top: 3rem !important; color: var(--muted); font-size: 0.9375rem; }

/* 감수 표시: 주소 끝이 #review일 때만 */
.rv, .review-list { display: none; }
body.review .rv {
  display: inline; font-size: 0.875rem; font-weight: 700; color: var(--warn); background: var(--warn-soft);
  border-radius: 4px; padding: 0 0.35rem; margin-left: 0.2rem; cursor: help;
}
body.review .rv::after { content: " · " attr(data-note); font-weight: 500; }
body.review .review-list { display: block; margin-top: 3rem; padding: 1rem 1.25rem; border-radius: 10px; background: var(--warn-soft); }
body.review .review-list h2 { font-size: 1.25rem; }

/* 앞뒤 장 */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 3.5rem; }
.pager a { display: grid; gap: 0.15rem; padding: 0.9rem 1.1rem; border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; background: var(--paper-2); }
.pager a:hover { border-color: var(--accent); }
.pager .next { text-align: right; }
.pager .dir { color: var(--muted); font-size: 0.9375rem; font-weight: 600; }
.pager .name { color: var(--ink); font-weight: 700; }

/* 과목 표지·책 표지 */
.chap-list { list-style: none; padding: 0 !important; margin: 1rem 0 !important; display: grid; gap: 0.75rem; max-width: var(--wide) !important; }
.chap { margin: 0 !important; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); }
.chap-title { font-size: 1.1875rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.chap-title .no { color: var(--accent-text); }
.chap-title:hover { text-decoration: underline; }
.chap-desc { margin: 0.35rem 0 !important; color: var(--ink-2); }
.chap-secs { margin: 0.4rem 0 0 !important; }
.chap-secs > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: baseline; gap: 0.35rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.chap-secs > summary::-webkit-details-marker { display: none; }
.chap-secs > summary::before { content: "›"; width: 0.8rem; text-align: center; color: var(--muted); font-weight: 700; transition: transform 0.15s ease; }
.chap-secs[open] > summary::before { transform: rotate(90deg); }
.chap-secs > summary:hover { color: var(--ink); }
.chap-secs ol { list-style: none; margin: 0.4rem 0 0 !important; padding: 0 !important; border-left: 2px solid var(--rule); }
.chap-secs li { margin: 0 !important; }
.chap-secs a { display: block; padding: 0.25rem 0.75rem; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
.chap-secs a:hover { color: var(--ink); text-decoration: underline; }
.chap-secs .no { color: var(--muted); margin-right: 0.2rem; }
/* 책 표지의 과목 타일: 과목 하나가 상자 하나. 펼치면 장(→ 절)이 그 상자 안에 열린다. */
.part-list, .part-list ol { list-style: none; margin: 0 !important; padding: 0 !important; }
.part-list ol, .chap-secs ol { max-width: none !important; }
.part-list { margin: 1rem 0 !important; display: grid; gap: 0.6rem; max-width: var(--wide) !important; }
.part-list li { margin: 0 !important; }
.part-list > li { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); }
.part-list > li:has(> details[open]) { border-color: color-mix(in oklch, var(--accent) 45%, var(--rule)); }
.part-list > li.soon { background: transparent; }
.part-list summary { list-style: none; cursor: pointer; }
.part-list summary::-webkit-details-marker { display: none; }
.part-list a { text-decoration: none; }
.part-list a:hover { text-decoration: underline; }
.part-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.9rem 0.85rem 1.15rem; }
.part-row > a, .part-row > .name { flex: 1; min-width: 0; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.soon .part-row > .name { color: var(--muted); font-weight: 650; font-size: 1.0625rem; }
.part-row .q { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.part-row .state { color: var(--muted); white-space: nowrap; }
/* 펼침 화살표: 오른쪽 끝의 둥근 단추. summary 어디를 눌러도 열리고, 이름만 링크다. */
.fold { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); }
.fold::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
details[open] > .part-row .fold::before { transform: translateY(2px) rotate(-135deg); }
.part-row:hover .fold { background: var(--paper-3); color: var(--ink); }

/* 펼친 과목 안: 장은 본문 크기, 절은 작고 옅게 */
.part-list .t-ch { border-top: 1px solid var(--rule); padding: 0.4rem 0.6rem 0.6rem !important; }
.t-ch summary, .t-ch > li.leaf > a { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.45rem 0.55rem; border-radius: 8px; }
.t-ch summary:hover, .t-ch > li.leaf > a:hover { background: var(--paper-3); }
.t-ch summary::before { content: "›"; flex: none; width: 1rem; text-align: center; color: var(--muted); font-weight: 700; transition: transform 0.15s ease; }
.t-ch details[open] > summary::before { transform: rotate(90deg); }
.t-ch > li.leaf > a { padding-left: 1.95rem; }
.t-ch a { color: var(--ink); font-weight: 650; }
.t-ch .no { color: var(--accent-text); }
.part-list .t-sec { margin: 0 0 0.4rem 1.55rem !important; border-left: 2px solid var(--rule); }
.t-sec a { display: block; padding: 0.3rem 0.75rem; color: var(--ink-2); font-weight: 500; font-size: 0.9375rem; }
.t-sec .no { color: var(--muted); margin-right: 0.2rem; }

/* 과목 표지의 "이 자료 사용법": 접을 수 있는 절 */
.sec.how > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; }
.sec.how > summary::-webkit-details-marker { display: none; }
.sec.how > summary h2 { margin: 0; }
.sec.how > summary::after { content: "접기"; color: var(--muted); font-size: 0.9375rem; font-weight: 600; }
.sec.how:not([open]) > summary::after { content: "펼치기"; }
.sec.how[open] > summary { margin-bottom: 1rem; }

/* 꼬리 */
.foot { border-top: 1px solid var(--rule); background: var(--paper-2); }
.foot-in { max-width: 82rem; margin: 0 auto; padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); color: var(--muted); font-size: 0.9375rem; }
.foot p { margin: 0.35rem 0; max-width: 46rem; }
.foot a { color: var(--ink-2); }

/* 쿠키 설정: 꼬리의 링크 줄에 섞이는 버튼, 그리고 analytics.js가 띄우는 동의 배너(유럽 접속 첫 방문·쿠키 설정).
   마크업은 앱과 같고 모양만 이 책의 토큰으로 다시 적는다 — 앱의 style.css를 싣지 않기 위해서다. */
.linklike { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--accent-text); }
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 2rem;
  padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  background: var(--paper-2); border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px oklch(0% 0 0 / 0.18);
}
.consent-copy { flex: 1 1 32ch; max-width: 76ch; }
.consent-copy strong { display: block; margin-bottom: 0.25rem; }
.consent-copy p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.consent-copy a { color: var(--ink); font-weight: 700; }
/* 거부는 동의만큼 쉬워야 한다 — 두 버튼을 같은 모양·크기로 나란히 둔다. */
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent-actions .btn {
  flex: 1 1 auto; font: inherit; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  padding: 0.5rem 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
}
.consent-actions .btn:hover { background: var(--accent-soft); }
@media (max-width: 40rem) { .consent-actions { width: 100%; } }

/* ── 폰 ──────────────────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  body { font-size: 1.03125rem; line-height: 1.72; }
  .home { display: none; }
  .bar-in { gap: 0.5rem; }
  .theme, .to-app, .toc-pop > summary { padding: 0.3rem 0.6rem; }
  .page { padding-top: 1.75rem; }
  h2 { font-size: 1.375rem; }
  .sec { margin-top: 2.75rem; padding-top: 1.75rem; }
  th, td { padding: 0.55rem 0.7rem; }
  td { min-width: 7.5em; }
  tbody th { min-width: 5.5em; max-width: 9em; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }

  /* 4열 이상 표: 행 하나를 묶음 하나로. 열 이름은 칸마다 앞에 붙는다. */
  .tbl.stack { border: 0; border-radius: 0; overflow: visible; background: transparent; }
  .tbl.stack table, .tbl.stack tbody, .tbl.stack tr, .tbl.stack th, .tbl.stack td { display: block; }
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl.stack tr { border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 0.6rem; overflow: hidden; background: var(--paper); }
  .tbl.stack tbody th { position: static; max-width: none; min-width: 0; border-bottom: 1px solid var(--rule); font-size: 1.03125rem; }
  .tbl.stack td { min-width: 0; border-left: 0 !important; border-bottom: 1px solid var(--rule); }
  .tbl.stack tr > td:last-child { border-bottom: 0; }
  .tbl.stack td::before { content: attr(data-label); display: block; font-size: 0.875rem; font-weight: 700; color: var(--muted); }
  .tbl.stack td[data-label=""]::before { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  :root { --paper: #fff; --paper-2: #f5f6f7; --paper-3: #eceef0; --rule: #c9ced3; --ink: #111; --ink-2: #333; --muted: #555; }
  body { font-size: 10.5pt; }
  .bar, .side, .pager, .to-cards, .pick-cta, .foot, .status, .skip, .fold, .consent-banner { display: none !important; }
  .shell { display: block !important; max-width: none; padding: 0; }
  .sec { break-before: auto; }
  .tbl { overflow: visible; break-inside: avoid; }
  tbody th { position: static; }
  h2, h3 { break-after: avoid; }
  .qa > p { display: block; }
}