/* ══ Material 3 토큰 ══════════════════════════════════════════
   그동안 --bg/--surface/--line 몇 개를 그때그때 밀면서 다듬었다. 체계가 없으니
   아무리 값을 만져도 "완성된" 느낌이 안 났다. M3 의 역할 체계를 그대로 가져온다.

   톤 번호는 Material Color Utilities 의 color_spec_2021 실제 배정값이다.
   M3 의 톤은 CIELAB L* 축이고 CSS lch() 의 L 이 같은 축이라 그대로 매핑된다.
   시드: 기존 액센트 #1f6245 → H160 (녹) · 경고 #8a5513 → H69 (호박)
   중립은 M3 방식대로 시드 색조를 아주 옅게 머금는다(C=4 / 변이 C=8). */
:root {
  --hue-primary: 160;
  --hue-neutral: 160;
  --hue-tertiary: 69;
  --c-primary: 34;
  --c-neutral: 1;     /* 실측: Google 은 중립을 거의 무채색으로 둔다 */
  --c-neutral-v: 5;
  --c-tertiary: 40;

  /* 표면 사다리 — 깊이를 그림자가 아니라 톤으로 만든다(M3 방식) */
  --surface-dim:               lch(87% var(--c-neutral) var(--hue-neutral));
  --surface-base:              lch(100% 0 0);   /* 순백 — 크림 배경을 버린다 */
  --surface-bright:            lch(98% var(--c-neutral) var(--hue-neutral));
  --surface-container-lowest:  lch(100% var(--c-neutral) var(--hue-neutral));
  --surface-container-low:     lch(96% var(--c-neutral) var(--hue-neutral));
  --surface-container:         lch(94% var(--c-neutral) var(--hue-neutral));
  --surface-container-high:    lch(92% var(--c-neutral) var(--hue-neutral));
  --surface-container-highest: lch(90% var(--c-neutral) var(--hue-neutral));

  --on-surface:          lch(10% var(--c-neutral) var(--hue-neutral));
  --on-surface-variant:  lch(30% var(--c-neutral-v) var(--hue-neutral));
  --outline:             lch(50% var(--c-neutral-v) var(--hue-neutral));
  --outline-variant:     lch(80% var(--c-neutral-v) var(--hue-neutral));

  --primary:               lch(40% var(--c-primary) var(--hue-primary));
  --on-primary:            lch(100% 0 var(--hue-primary));
  --primary-container:     lch(90% calc(var(--c-primary) * .45) var(--hue-primary));
  --on-primary-container:  lch(30% var(--c-primary) var(--hue-primary));

  --tertiary:              lch(40% var(--c-tertiary) var(--hue-tertiary));
  --tertiary-container:    lch(90% calc(var(--c-tertiary) * .4) var(--hue-tertiary));
  --on-tertiary-container: lch(30% var(--c-tertiary) var(--hue-tertiary));

  /* 모양 — 반지름이 .5/.6/.7/.75rem 으로 흩어져 있었다. 다섯 단계로 고정한다. */
  /* 실측(m3.material.io): 카드 16~40px, 히어로 24px, 탭 40px. 12px 은 쓰지 않는다. */
  --shape-xs: 8px;
  --shape-sm: 12px;
  --shape-md: 16px;
  --shape-lg: 24px;
  --shape-xl: 40px;
  --shape-full: 999px;

  /* 높이 — M3 는 표면 톤으로 깊이를 만들고 그림자는 아주 절제해서 쓴다. */
  --elev-1: 0 1px 2px lch(0% 0 0 / .06), 0 1px 3px 1px lch(0% 0 0 / .05);
  --elev-2: 0 1px 2px lch(0% 0 0 / .07), 0 2px 6px 2px lch(0% 0 0 / .06);
  --elev-3: 0 4px 8px 3px lch(0% 0 0 / .07), 0 1px 3px lch(0% 0 0 / .08);

  /* 상태 레이어 — hover/focus 를 임의 색이 아니라 정해진 불투명도로 얹는다. */
  --state-hover: .08;
  --state-focus: .10;
  --state-press: .10;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-primary: 40;
    --surface-dim:               lch(6% var(--c-neutral) var(--hue-neutral));
    --surface-base:              lch(6% var(--c-neutral) var(--hue-neutral));
    --surface-bright:            lch(24% var(--c-neutral) var(--hue-neutral));
    --surface-container-lowest:  lch(4% var(--c-neutral) var(--hue-neutral));
    --surface-container-low:     lch(10% var(--c-neutral) var(--hue-neutral));
    --surface-container:         lch(12% var(--c-neutral) var(--hue-neutral));
    --surface-container-high:    lch(17% var(--c-neutral) var(--hue-neutral));
    --surface-container-highest: lch(22% var(--c-neutral) var(--hue-neutral));
    --on-surface:          lch(90% var(--c-neutral) var(--hue-neutral));
    --on-surface-variant:  lch(80% var(--c-neutral-v) var(--hue-neutral));
    --outline:             lch(60% var(--c-neutral-v) var(--hue-neutral));
    --outline-variant:     lch(30% var(--c-neutral-v) var(--hue-neutral));
    --primary:               lch(80% var(--c-primary) var(--hue-primary));
    --on-primary:            lch(20% var(--c-primary) var(--hue-primary));
    --primary-container:     lch(30% var(--c-primary) var(--hue-primary));
    --on-primary-container:  lch(90% calc(var(--c-primary) * .5) var(--hue-primary));
    --tertiary:              lch(80% var(--c-tertiary) var(--hue-tertiary));
    --tertiary-container:    lch(30% var(--c-tertiary) var(--hue-tertiary));
    --on-tertiary-container: lch(90% calc(var(--c-tertiary) * .5) var(--hue-tertiary));
    --elev-1: 0 1px 2px lch(0% 0 0 / .3), 0 1px 3px 1px lch(0% 0 0 / .15);
    --elev-2: 0 1px 2px lch(0% 0 0 / .3), 0 2px 6px 2px lch(0% 0 0 / .15);
    --elev-3: 0 4px 8px 3px lch(0% 0 0 / .15), 0 1px 3px lch(0% 0 0 / .3);
  }
}

/* 기존 이름을 M3 역할에 연결한다 — 규칙을 전부 고쳐 쓰지 않고 체계만 갈아끼운다. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --bg: var(--surface-base);
  --surface: var(--surface-container-lowest);
  --surface-quiet: var(--surface-container);
  --text: var(--on-surface);
  --muted: var(--on-surface-variant);
  --faint: var(--outline);
  --line: var(--outline-variant);
  --accent: var(--primary);
  --accent-soft: var(--primary-container);
  --warn: var(--tertiary);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-primary: 40;
  --surface-dim: lch(6% var(--c-neutral) var(--hue-neutral));
  --surface-base: lch(6% var(--c-neutral) var(--hue-neutral));
  --surface-bright: lch(24% var(--c-neutral) var(--hue-neutral));
  --surface-container-lowest: lch(4% var(--c-neutral) var(--hue-neutral));
  --surface-container-low: lch(10% var(--c-neutral) var(--hue-neutral));
  --surface-container: lch(12% var(--c-neutral) var(--hue-neutral));
  --surface-container-high: lch(17% var(--c-neutral) var(--hue-neutral));
  --surface-container-highest: lch(22% var(--c-neutral) var(--hue-neutral));
  --on-surface: lch(90% var(--c-neutral) var(--hue-neutral));
  --on-surface-variant: lch(80% var(--c-neutral-v) var(--hue-neutral));
  --outline: lch(60% var(--c-neutral-v) var(--hue-neutral));
  --outline-variant: lch(30% var(--c-neutral-v) var(--hue-neutral));
  --primary: lch(80% var(--c-primary) var(--hue-primary));
  --on-primary: lch(20% var(--c-primary) var(--hue-primary));
  --primary-container: lch(30% var(--c-primary) var(--hue-primary));
  --on-primary-container: lch(90% calc(var(--c-primary) * .5) var(--hue-primary));
  --tertiary: lch(80% var(--c-tertiary) var(--hue-tertiary));
  --tertiary-container: lch(30% var(--c-tertiary) var(--hue-tertiary));
  --on-tertiary-container: lch(90% calc(var(--c-tertiary) * .5) var(--hue-tertiary));
}
:root[data-theme="light"] { color-scheme: light; }

:root {
  color-scheme: light dark;

  /* 타입 스케일 (1.2 배율) — 크기를 그때그때 정하면 화면이 산만해진다. */
  --fs-3xs: 0.694rem;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.833rem;
  --fs-sm: 0.9rem;
  --fs-md: 1.0rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.44rem;
  --fs-2xl: 1.728rem;
  --fs-3xl: 2.074rem;
  --fs-4xl: 2.986rem;
  --fs-5xl: 4.3rem;

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  /* 세리프를 버린다 — Google 은 어디에도 세리프를 쓰지 않는다.
     크림 배경 + 세리프 제목이 "AI 가 만든 템플릿" 의 전형이었다. */
  --serif: var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --shell: 78rem;

  /* 행간 3단계 — KRDS 는 전 스타일 150%. 한글 본문은 라틴보다 여유를 준다. */
  --lh-tight: 1.3;   /* 제목 */
  --lh-ui: 1.5;      /* UI·라벨 */
  --lh-body: 1.6;    /* 본문 — 실측 1.5, 한글이라 조금만 더 */

  /* 본문 1행 길이 — ch 는 "0" 글리프 기준이라 한글에 맞지 않는다(실측 1.37배).
     한글 35~45자가 들어가는 폭을 rem 으로 직접 잡는다. */
  --measure: 42rem;
  --rail: 13rem;     /* 우측 목차 레일 */
  --sidebar: 15rem;  /* 좌측 내비 */
}




* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fs-md)/var(--lh-body) var(--sans);
  /* 한글은 기본값에서 어절 중간이 잘린다(영어는 안 잘림). 어절 단위로 끊는다. */
  word-break: keep-all;
  /* keep-all 은 긴 URL·식별자를 컨테이너 밖으로 밀어내므로 그것만 예외로 쪼갠다. */
  overflow-wrap: anywhere;
}
/* 코드·표 셀은 anywhere 가 오히려 해로워 원래 규칙을 쓴다. */
code, kbd, samp, pre { word-break: normal; overflow-wrap: normal; }
a { color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.shell { width: min(calc(100% - 3rem), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; inset-block-start: .75rem; inset-inline-start: .75rem; z-index: 2; padding: .6rem .9rem; color: #fff; background: #111; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute !important; clip-path: inset(50%) !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; white-space: nowrap !important; }
.site-header { position: sticky; inset-block-start: 0; z-index: 20; border-block-end: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.header-inner { min-height: 4rem; display: flex; align-items: center; gap: 1.5rem; }
.header-inner nav { margin-inline-end: auto; }
.brand { display: inline-flex; gap: .7rem; align-items: center; color: var(--text); font-weight: 650; text-decoration: none; white-space: nowrap; }
.brand-name { font-size: var(--fs-sm); color: var(--muted); border-inline-start: 1px solid var(--line); padding-inline-start: .7rem; }
.brand-mark {
  display: block; width: 5rem; aspect-ratio: 320 / 92; background: currentColor;
  /* 워드마크 원본은 단색 + 알파다. 알파만 마스크로 쓰면 색은 CSS 가 정한다 →
     라이트/다크용 이미지를 따로 두지 않아도 된다. */
  /* 이 파일 자체가 assets/ 안에 있으므로 경로는 파일명만 쓴다. */
  mask-image: url(soluni-mark.png); mask-size: contain;
  mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url(soluni-mark.png); -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
.top-nav, .side-nav { display: flex; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.top-nav a { color: var(--muted); font-size: var(--fs-xs); }
.layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--rail); gap: 3rem; padding-block: 2.5rem 6rem; align-items: start; }
/* 목차가 없는 페이지(홈·기록 등)에서 레일을 비워 두면 오른쪽이 그냥 빈다. */
.layout:not(:has(.doc-toc)) { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; inset-block-start: 5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; }
.eyebrow { margin: 0 0 .85rem; color: var(--faint); font: var(--fs-3xs)/1.3 var(--mono); letter-spacing: .11em; }
.side-nav { display: grid; gap: .35rem; }
.nav-link { display: grid; gap: .08rem; padding: .55rem .65rem; border-inline-start: 2px solid transparent; color: var(--muted); text-decoration: none; }
.nav-link small { color: var(--faint); font-size: var(--fs-3xs); }
.nav-link:hover, .nav-link.is-active { color: var(--text); border-inline-start-color: var(--accent); background: var(--surface-quiet); }
.side-record {
  margin-block: 1.25rem 0;
  font-size: var(--fs-xs);
  display: grid;
  gap: .4rem;
  justify-items: start;
}
.side-record a { color: var(--accent); text-decoration: none; }
.side-record a:hover { text-decoration: underline; }

/* 문서 도구 링크는 작은 글자여도 포인터 목표까지 작아지면 안 된다.
   본문 중간의 인라인 링크는 문장 흐름을 보존하고, 독립 동작만 WCAG 2.5.8
   최소 24px 목표를 갖게 한다. */
.brand,
.side-record a,
.feedback-link,
.capture-link,
.page-footer a,
.prose p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
  min-inline-size: 1.5rem;
}

@media (pointer: coarse) {
  .brand,
  .side-record a,
  .feedback-link,
  .capture-link,
  .page-footer a,
  .prose p > a:only-child { min-block-size: 2.75rem; }
}

/* 스크롤 전 첫 화면이 검색창·GitHub편집·피드백·배지 순이었다 — 전부 관리자용 도구다.
   방문자가 먼저 볼 것은 제목이다. 도구는 읽고 난 뒤에 필요하다. */
.content { min-width: 0; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
.content > .prose { order: 1; }
.content > .content-toolbar { order: 90; margin-block: 3rem 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.content > .page-nav { order: 91; }
.content > .page-footer { order: 92; }
.content-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-end: 2.2rem; }
.content-toolbar .search-box { flex: 1 1 16rem; min-width: 12rem; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.status-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-block: 1.2rem 0; }
.badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: var(--fs-2xs)/1.3 var(--mono); }
.badge-evidence { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.badge-maturity { background: var(--surface-quiet); }
.doc-toc { grid-column: 3; grid-row: 1; position: sticky; inset-block-start: 5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; padding-inline-start: 1rem; border-inline-start: 1px solid var(--line); }
.doc-toc .eyebrow { margin-block-end: .45rem; }
.doc-toc ol { display: grid; gap: .1rem; padding: 0; margin: 0; list-style: none; }
.doc-toc a { display: block; padding: .3rem .5rem; border-inline-start: 2px solid transparent; color: var(--muted); font: var(--fs-2xs)/var(--lh-ui) var(--sans); text-decoration: none; }
.doc-toc a:hover { color: var(--text); }
.doc-toc a.is-current { border-inline-start-color: var(--accent); color: var(--text); font-weight: 600; }
.search-box { position: relative; display: block; width: min(100%, 25rem); }
.search-box label { display: block; margin-block-end: .4rem; color: var(--muted); font-size: var(--fs-2xs); }
.search-box input { width: 100%; min-height: 2.9rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--text); background: var(--surface); font: var(--fs-sm) var(--sans); }
.search-results { position: absolute; inset-block-start: calc(100% + .35rem); inset-inline: 0; z-index: 3; max-height: 18rem; overflow: auto; padding: .35rem; margin: 0; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); box-shadow: 0 12px 30px #0002; list-style: none; }
.search-result { display: block; padding: .55rem .65rem; border-radius: .35rem; color: var(--text); text-decoration: none; }
.search-result:hover { background: var(--surface-quiet); }
.search-result small { display: block; color: var(--faint); }
.button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--accent); border-radius: 999px; color: #fff; background: var(--accent); font-size: var(--fs-xs); text-decoration: none; }
.button:hover { filter: brightness(1.1); }
.button-quiet { border-color: var(--line); color: var(--text); background: var(--surface); }
.hero { padding-block: 2rem 4rem; border-block-end: 1px solid var(--line); }
h1, h2, h3 { text-wrap: balance; }
h1 { max-width: 22ch; margin: 0; font: 600 clamp(var(--fs-2xl), var(--fs-lg) + 2.2vw, var(--fs-3xl))/var(--lh-tight) var(--serif); letter-spacing: 0; }
h1 em { color: var(--accent); font-style: normal; }
.lede { max-width: 42rem; margin-block: 1.5rem 1.8rem; color: var(--muted); font-size: clamp(var(--fs-md), var(--fs-sm) + .3vw, var(--fs-lg)); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.section-block { padding-block: 3.5rem; }
.section-heading h2 { margin: 0; font: 500 clamp(var(--fs-xl), var(--fs-lg) + 1vw, var(--fs-3xl))/1.2 var(--serif); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block-start: 1.4rem; }
.card { padding: 1.3rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.card h2 { margin: 0; font: 500 var(--fs-lg)/1.25 var(--serif); }
.card p:not(.eyebrow) { min-height: 4.5rem; color: var(--muted); font-size: var(--fs-sm); }
.text-link { font-size: var(--fs-xs); }
.layer-strip { padding: 1.4rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface-quiet); }
.layer-strip ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; padding: 0; margin: 0; list-style: none; }
.layer-strip li { padding-inline-end: .5rem; border-inline-end: 1px solid var(--line); }
.layer-strip li a { display: grid; gap: .15rem; padding: .2rem .1rem; border-radius: .3rem; text-decoration: none; }
.layer-strip li a:hover strong { text-decoration: underline; }
.layer-strip li:last-child { border-inline-end: 0; }
.layer-strip strong { font: 600 var(--fs-xs)/var(--lh-ui) var(--sans); color: var(--accent); }
.layer-strip span { color: var(--faint); font: var(--fs-3xs) var(--mono); }
.disclaimer { margin-block-start: 1.4rem; padding: 1rem 1.2rem; border-inline-start: 3px solid var(--warn); color: var(--muted); background: var(--surface-quiet); font-size: var(--fs-xs); }
.disclaimer p { margin: .25rem 0 0; }
.prose { max-width: 48rem; }
.document-summary { margin-block: 0 2rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--accent); color: var(--muted); font: var(--fs-lg)/1.6 var(--serif); }
.prose h1 { max-width: none; margin-block: 0 2.8rem; font-size: clamp(var(--fs-3xl), var(--fs-xl) + 2vw, var(--fs-4xl)); }
.prose h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin-block: 3rem 1rem; font: 600 clamp(var(--fs-xl), var(--fs-lg) + .8vw, var(--fs-2xl))/1.25 var(--serif); scroll-margin-block-start: 1.5rem; }
.prose h3 { margin-block: 2rem .65rem; font-size: var(--fs-lg); }
.heading-label { min-width: 0; }
.feedback-link {
  flex: 0 0 auto; color: var(--faint); font: var(--fs-3xs) var(--mono);
  opacity: 0; transition: opacity .12s ease;
}
h2:hover > .feedback-link, h3:hover > .feedback-link,
.feedback-link:focus-visible { opacity: 1; }
.feedback-link:hover { color: var(--accent); }
@media (hover: none) { .feedback-link { opacity: 1; } }
.prose p, .prose ul, .prose ol, .prose table, .prose blockquote { text-wrap: pretty; }
.prose li + li { margin-block-start: .35rem; }
.prose code { padding: .1em .3em; border-radius: .25rem; background: var(--surface-quiet); font: .86em var(--mono); }
.prose pre { overflow: auto; padding: 1rem; border-radius: .5rem; background: var(--surface-quiet); }
.prose pre code { padding: 0; background: transparent; }
/* 표에 display:block 을 걸면 표 레이아웃이 깨지고 폭이 컨테이너를 넘긴다.
   스크롤은 래퍼가 맡고 표는 표로 둔다 → 정말 안 맞을 때만 스크롤이 생긴다. */
.table-scroll { overflow-x: auto; margin-block: 1.4rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { min-width: 5rem; padding: .55rem .7rem; border: 1px solid var(--line); text-align: start; vertical-align: top; line-height: var(--lh-ui); }
.prose .align-left { text-align: left; }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.prose th { background: var(--surface-quiet); }
.page-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-block-start: 4rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); color: var(--faint); font: var(--fs-3xs) var(--mono); }
.page-footer a { color: var(--muted); }
/* 문서 순서 이동 — manifest 순서가 곧 읽는 순서다 (Case 1~5 등 이어 읽는 문서). */
.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block-start: 3rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
}
.page-nav-link {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--surface-quiet);
  color: var(--text);
  text-decoration: none;
}
.page-nav-link:hover { border-color: var(--accent); background: var(--accent-soft); }
.page-nav-link .eyebrow { color: var(--muted); }
.page-nav-next { grid-column: 2; text-align: end; align-items: flex-end; }
.page-nav-gap { display: block; }
/* 홈 카드 트랙 그룹 — 문서가 늘어도 성격별로 읽히게 한다. */
.track-groups { display: grid; gap: 2.5rem; }
.track-heading {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.track-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.track-count {
  order: 1;
  padding: .1rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-2xs);
  color: var(--muted);
}
/* ── 생성된 그림 (sfx-* 코드펜스) ─────────────────────────────
   색은 의미가 있을 때만 쓴다. 단계 구분과 델타 밴드에만 쓰고 장식으로는 쓰지 않는다. */
.figure { margin: 2.25rem 0; }
.figure-canvas { overflow-x: auto; padding-block: .25rem; }
.figure .fig { display: block; width: 100%; min-width: 34rem; height: auto; }
.figure figcaption {
  margin-block-start: .7rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.figure-alt { margin-block-start: .6rem; }
.figure-alt summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.figure-alt summary:hover { color: var(--accent); }
.figure-data { width: 100%; margin-block-start: .7rem; border-collapse: collapse; font-size: var(--fs-xs); }
.figure-data th, .figure-data td {
  padding: .4rem .8rem .4rem 0;
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: baseline;
}
.figure-data td { font-variant-numeric: tabular-nums; }

/* SVG 내부 — 전부 토큰으로 그려 라이트/다크 자동 대응 */
.fig .stratum { fill: var(--accent); }
.fig .fig-band { fill: var(--bg); font: 600 11px var(--sans); }
.fig .fig-axis { fill: var(--faint); font: 10px var(--mono); }
.fig .fig-note { fill: var(--muted); font: 10px var(--sans); }
.fig .fig-lane-label { fill: var(--muted); font: 10px var(--mono); }
.fig .fig-grid { stroke: var(--line); stroke-width: 1; }
.fig .fig-trunk { fill: var(--text); font-weight: 600; }
.fig .trunk-line { stroke: var(--text); stroke-width: 2; }
.fig .lane { fill: var(--muted); }
.fig .lane-dept { fill: var(--accent); }
.fig .lane-tip { fill: var(--accent); }
.fig .curve { fill: none; stroke-width: 1.6; }
.fig .curve-head { stroke: var(--text); }
.fig .curve-all { stroke: var(--accent); stroke-dasharray: 3 2; }
.fig .curve-band { fill: var(--accent); opacity: .16; }

/* ── 경험 기록 창구 ───────────────────────────────────────────
   실측(깃 증거)과 서술(경험)을 섞지 않는다. 지면 처리를 다르게 둔다. */
.capture-link {
  float: inline-end;
  margin-inline-start: .75rem;
  font-size: var(--fs-2xs);
  color: var(--accent);
  text-decoration: none;
  border-block-end: 1px solid var(--accent-soft);
}
.capture-link:hover { border-block-end-color: var(--accent); }

.prose h3#내-기록 + blockquote,
.prose blockquote.field-note {
  margin-block: .8rem 2rem;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--line);
  border-inline-start: 0;
  background: transparent;
  color: var(--faint);
  font-size: var(--fs-sm);
  font-style: normal;
}
.field-hint { display: block; margin-block-start: .35rem; color: var(--faint); font-size: var(--fs-xs); line-height: 1.5; }
/* ══════════════════════════════════════════════════════════════
   페이지 전환 — 문서의 fragment/skip link는 즉시 이동해야 한다.
   MPA View Transition은 fragment 이동과 충돌해 AbortError를 남길 수 있으므로
   이 읽기 중심 사이트에서는 비활성화한다.
   ══════════════════════════════════════════════════════════════ */
@view-transition { navigation: none; }

::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .26s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* 헤더와 사이드바는 페이지가 바뀌어도 제자리에 머문다 — 앱처럼 읽힌다. */
.site-header { view-transition-name: site-header; }
.sidebar { view-transition-name: side-nav; }
.content-toolbar { view-transition-name: toolbar; }

/* ══════════════════════════════════════════════════════════════
   스크롤 연동 등장 — animation-timeline (CSS만, JS 없음)
   ══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
  .track-group,
  .figure,
  .card,
  .prose > h2,
  .layer-strip {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 42%;
  }
  @keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
}

/* ══════════════════════════════════════════════════════════════
   컨테이너 질의 — 카드가 뷰포트가 아니라 놓인 폭에 반응한다
   ══════════════════════════════════════════════════════════════ */
.card-grid { container-type: inline-size; }
@container (min-width: 34rem) {
  .card h2 { font-size: var(--fs-lg); }
}

/* 읽기 품질 — 마지막 줄에 한 단어만 남는 것을 막는다 */
.prose p, .lede, .standfirst, .card p { text-wrap: pretty; }

/* 구조 기반 스타일 — 그림이 바로 뒤따르는 제목은 아래 여백을 줄인다 */
.prose h2:has(+ .figure) { margin-block-end: .6rem; }

/* 움직임을 줄여달라는 설정을 전면 존중한다 */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .track-group, .figure, .card, .prose > h2, .layer-strip {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 히어로가 곧 증거다. 숫자를 크게, 라벨은 조용히. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-block: 2.5rem 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
}
.hero-proof > div {
  padding-inline-end: 2.5rem;
  display: grid;
  gap: .2rem;
}
.hero-proof dt {
  order: 2;
  font-size: var(--fs-2xs);
  color: var(--muted);
  font-family: var(--mono);
}
.hero-proof dd {
  order: 1;
  margin: 0;
  font: 600 var(--fs-3xl)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--text);
}
.hero-proof .spark {
  display: block;
  width: 5.5rem; height: 1.4rem;
  margin-block-start: .35rem;
  color: var(--accent);
  opacity: .85;
}
.hero-proof-note {
  margin-block-start: .9rem;
  font-size: var(--fs-2xs);
  color: var(--faint);
}
.hero-proof-note code { font-size: .95em; }

/* 실측 지표 — 손으로 적지 않는 숫자. 자릿수가 눈에 들어와야 한다. */
.metrics-figure .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.metric {
  background: var(--surface);
  padding: 1rem 1.1rem 1.1rem;
  display: grid;
  gap: .25rem;
  align-content: start;
}
.metric-value {
  margin: 0;
  font: 600 var(--fs-xl)/1.1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--text);
}
.metric-label { margin: 0; font-size: var(--fs-xs); color: var(--text); }
.metric-note { margin: 0; font-size: var(--fs-3xs); font-family: var(--mono); color: var(--faint); }

/* ══════════════════════════════════════════════════════════════
   레이아웃 원형 — 내용 모양이 다르면 읽는 방식도 다르다.
   장식이 아니라 스캔 경로를 바꾸는 차이만 둔다.
   ══════════════════════════════════════════════════════════════ */

/* 케이스 — 문제·해결·결과가 실제 구조다. 한 문단으로 흘리지 않고 3열로 세운다. */
.case-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-block: 2rem 3.2rem;
  border-block: 1px solid var(--line);
}
.case-cell {
  padding: 1.5rem 1.4rem 1.6rem 0;
  display: grid;
  gap: .55rem;
  align-content: start;
}
.case-cell + .case-cell {
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid var(--line);
}
.case-cell p:not(.eyebrow) {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text);
}
/* 결과는 확인된 성과다 — 액센트가 "확인된 사실" 을 나른다. */
.case-cell:last-child p:not(.eyebrow) { font-weight: 550; color: var(--accent); }
.case-cell .eyebrow { margin: 0; font-size: var(--fs-2xs); letter-spacing: .06em; }

/* 에세이 — 읽기가 전부다. 단을 좁히고 첫 문단을 크게 연다. */
.prose > p, .prose > ul, .prose > ol, .prose > blockquote { max-width: var(--measure); }
[data-layout="essay"] .document-summary + p {
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--text);
}

/* 카탈로그 — 표를 스캔하는 화면이다. 폭을 내주고 숫자를 정렬한다. */
[data-layout="catalog"] .prose { max-width: none; }
[data-layout="catalog"] .prose table { font-size: var(--fs-sm); }
[data-layout="catalog"] .prose td { font-variant-numeric: tabular-nums; }
[data-layout="catalog"] .prose thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

/* 개관 — 그림이 주인공이다. 본문 폭 밖으로 내보낸다. */
@media (min-width: 64rem) {
  [data-layout="overview"] .figure {
    /* 본문 컬럼이 913px 일 때 만든 블리드다. 672px + 3단 그리드에서는
       우측 목차 레일을 48px 침범한다. 그림은 .figure-canvas 가 이미
       스크롤을 맡으므로 블리드는 뺀다. */
    width: 100%;
    margin-inline-start: 0;
  }
}

/* 축적 — 22개월의 실제 커밋. 막대 폭은 CSP 때문에 인라인 style 대신 클래스로 준다. */
.ch-month { margin-block: 0; padding-block: .85rem; border-block-end: 1px solid var(--line-soft, var(--line)); }
.ch-month:last-of-type { border-block-end: 0; }
.ch-head { display: grid; grid-template-columns: 5.2rem 1fr 3rem; align-items: center; gap: .9rem; }
.prose .ch-head > h2 {
  margin: 0;
  font: 600 var(--fs-2xs) var(--mono);
  letter-spacing: .04em;
  color: var(--muted);
  /* 날짜는 한 덩어리다. body 의 overflow-wrap: anywhere 가 여기까지 오면 안 된다. */
  overflow-wrap: normal;
}
.ch-bar { block-size: .5rem; background: var(--surface-quiet); border-radius: 999px; overflow: hidden; }
.ch-bar > span { display: block; block-size: 100%; background: var(--accent); border-radius: 999px; }
.ch-bar .w1 { inline-size: 5%; }
.ch-bar .w2 { inline-size: 10%; }
.ch-bar .w3 { inline-size: 15%; }
.ch-bar .w4 { inline-size: 20%; }
.ch-bar .w5 { inline-size: 25%; }
.ch-bar .w6 { inline-size: 30%; }
.ch-bar .w7 { inline-size: 35%; }
.ch-bar .w8 { inline-size: 40%; }
.ch-bar .w9 { inline-size: 45%; }
.ch-bar .w10 { inline-size: 50%; }
.ch-bar .w11 { inline-size: 55%; }
.ch-bar .w12 { inline-size: 60%; }
.ch-bar .w13 { inline-size: 65%; }
.ch-bar .w14 { inline-size: 70%; }
.ch-bar .w15 { inline-size: 75%; }
.ch-bar .w16 { inline-size: 80%; }
.ch-bar .w17 { inline-size: 85%; }
.ch-bar .w18 { inline-size: 90%; }
.ch-bar .w19 { inline-size: 95%; }
.ch-bar .w20 { inline-size: 100%; }
.ch-total {
  margin: 0;
  text-align: end;
  font: 600 var(--fs-sm) var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ch-repos { margin: .5rem 0 0 6.1rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.ch-repo { font: var(--fs-3xs) var(--mono); color: var(--faint); }
.ch-repo b { color: var(--muted); font-weight: 600; }
.ch-marks { margin: .7rem 0 .2rem 6.1rem; padding: 0; display: grid; gap: .35rem; }
.ch-mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: var(--fs-xs); }
.ch-mark > span {
  order: -1;
  flex: none;
  padding: .05rem .4rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  font: var(--fs-3xs) var(--mono);
  color: var(--faint);
}
.ch-mark-born > span { border-color: var(--accent); color: var(--accent); }
.ch-mark > a { color: var(--text); text-decoration: none; }
.ch-mark > a:hover { color: var(--accent); }
.ch-mark > p { flex-basis: 100%; margin: 0 0 0 4.2rem; font: var(--fs-3xs) var(--mono); color: var(--faint); }

@media (max-width: 52rem) {
  .ch-head { grid-template-columns: 4.4rem 1fr 2.6rem; gap: .6rem; }
  .ch-repos, .ch-marks { margin-inline-start: 0; }
  .ch-mark > p { margin-inline-start: 0; }
}

/* 접이식 문서 묶음 — 273개까지 견뎌야 한다. 평면 목록은 30개에서 무너진다. */
.nav-group { border-block-end: 1px solid var(--line-soft, var(--line)); }
.nav-group:last-of-type { border-block-end: 0; }
.nav-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem 0;
  cursor: pointer;
  list-style: none;
  font: 600 var(--fs-2xs) var(--sans);
  letter-spacing: .01em;
  color: var(--muted);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::before {
  content: "";
  flex: none;
  width: .5rem; height: .5rem;
  margin-inline-end: .1rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .16s ease;
}
.nav-group[open] > summary::before { transform: rotate(45deg); }
.nav-group > summary:hover { color: var(--text); }
.nav-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.nav-count {
  margin-inline-start: auto;
  font: var(--fs-3xs) var(--mono);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.nav-group .side-nav { padding-block-end: .5rem; display: grid; gap: .1rem; }
.nav-group .nav-link {
  display: block;
  padding: .32rem .6rem;
  border-inline-start: 2px solid transparent;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  border-radius: 0 2px 2px 0;
}
.nav-group .nav-link:hover { color: var(--text); background: var(--surface-quiet); }
.nav-group .nav-link.is-active {
  border-inline-start-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .nav-group > summary::before { transition: none; }
}

/* 단축키는 보여야 쓰인다. 입력창 안쪽 끝에 조용히 둔다. */
.search-box { position: relative; }
.search-kbd {
  position: absolute;
  inset-inline-end: .6rem;
  inset-block-start: 2.1rem;
  padding: .12rem .38rem;
  border: 1px solid var(--line);
  border-radius: .3rem;
  background: var(--surface-quiet);
  font: var(--fs-3xs) var(--mono);
  color: var(--faint);
  pointer-events: none;
}
#site-search:focus + .search-kbd { opacity: 0; }
.search-result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 테마 선택 — 시스템 / 라이트 / 다크. 상태가 눈에 보여야 한다. */
.theme-switch {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.theme-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: .3rem .6rem;
  font: 500 var(--fs-3xs) var(--sans);
  color: var(--muted);
  cursor: pointer;
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.theme-switch button + button { border-inline-start: 1px solid var(--line); }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* 인쇄·발췌 시에는 등장 애니메이션이 요소를 숨긴 채로 굳으면 안 된다. */
@media print {
  .track-group, .figure, .card, .prose > h2, .layer-strip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .sidebar, .content-toolbar, .page-nav, .capture-link, .feedback-link { display: none; }
}

@media (max-width: 52rem) {
  .case-strip { grid-template-columns: 1fr; }
  .case-cell + .case-cell {
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
    padding-block-start: 1rem;
  }
  [data-layout="overview"] .figure { width: auto; margin-inline-start: 0; }
}

/* 좌측 내비 접이식 — 모바일에서는 접힌 채로 두어 본문을 화면 위로 올리고,
   데스크톱에서는 CSS 로 강제로 펴서 늘 보이게 한다.
   HTML 에 open 을 박으면 모바일에서 접을 수가 없다. */
@media (min-width: 52.01rem) {
  .nav-drawer > summary, .toc-fold > summary { display: none; }
  .nav-drawer::details-content, .toc-fold::details-content { content-visibility: visible; block-size: auto; }
}
.toc-fold > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .1rem 0; cursor: pointer; list-style: none;
  font: 600 var(--fs-2xs) var(--sans); color: var(--text);
}
.toc-fold > summary::-webkit-details-marker { display: none; }
.toc-fold > summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); }
/* ::details-content 를 모르는 브라우저에서는 요약을 남겨 한 번 눌러 펴게 한다. */
@supports not selector(::details-content) {
  @media (min-width: 52.01rem) {
    .nav-drawer > summary { display: flex; align-items: center; gap: .4rem; padding: .4rem 0; cursor: pointer; list-style: none; font: 600 var(--fs-2xs) var(--sans); color: var(--muted); }
  }
}

/* 1200px 미만 — 우측 목차 레일을 접어 본문 위 접이식으로 내린다. */
@media (max-width: 75rem) {
  .layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .content { grid-row: 2; }
  .doc-toc {
    grid-column: 2; grid-row: 1;
    position: static; max-height: none; overflow: visible;
    padding: .9rem 1rem; margin-block-end: 2rem;
    border: 1px solid var(--line); border-radius: .6rem;
  }
  .doc-toc ol { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

@media (max-width: 52rem) {
  .shell { width: min(calc(100% - 2rem), var(--shell)); }
  .layout { display: block; padding-block-start: 1.5rem; }
  /* 사이드바 전량을 본문 앞에 깔면 모바일에서 본문까지 1500px 을 스크롤해야 한다.
     레퍼런스(Astro Docs)처럼 접어 두고 본문을 화면 위로 올린다. */
  .sidebar { position: static; margin-block-end: 1.5rem; max-height: none; overflow: visible; }
  .nav-drawer { border: 1px solid var(--line); border-radius: .6rem; }
  .nav-drawer > summary {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .9rem; cursor: pointer; list-style: none;
    font: 600 var(--fs-xs) var(--sans); color: var(--text);
  }
  .nav-drawer > summary::-webkit-details-marker { display: none; }
  .nav-drawer > summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); }
  .nav-drawer[open] > summary { border-block-end: 1px solid var(--line); }
  .nav-drawer > .drawer-body { padding: .6rem .9rem 1rem; }
  /* 헤더에 브랜드·내비·테마가 다 들어가면 375px 에서 세로로 뭉개진다(실측 218px).
     제목과 상단 내비는 아래 문서 목록에 이미 있으므로 마크와 테마만 남긴다. */
  .brand-name, .header-inner nav { display: none; }
  .header-inner { min-height: 3.5rem; justify-content: space-between; }
  /* 검색·GitHub 동작은 읽기보다 뒤다. 본문을 화면 위로 올린다. */
  .content { display: flex; flex-direction: column; }
  .content-toolbar { order: 99; align-items: stretch; flex-direction: column; margin-block: 2.5rem 0; }
  .content-toolbar .search-box { flex: 0 0 auto; }
  .page-footer { order: 100; }
  .status-badges { margin-block-start: -1rem; }
  .search-box { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .layer-strip ol { grid-template-columns: repeat(2, 1fr); }
  .layer-strip li:nth-child(2) { border-inline-end: 0; }
  .layer-strip li:nth-child(5) { grid-column: 1 / -1; border-inline-end: 0; }
  .page-nav { grid-template-columns: 1fr; }
  .page-nav-next { grid-column: 1; text-align: start; align-items: flex-start; }
  .page-nav-gap { display: none; }
  .figure .fig { min-width: 30rem; }
  .capture-link { float: none; display: block; margin: .35rem 0 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ══ 조판 블록 ═══════════════════════════════════════════════
   케이스 문서가 24블록 중 문단 0개·불릿 9개였다. 좋은 내용이 개조식으로 뭉개졌다.
   아래 블록들이 그 불릿을 대신한다. 색은 장식이 아니라 의미를 나른다 —
   액센트=확인된 사실 / warn=실패·미검증 / 무채색=서술. */

.block { margin-block: 2.4rem; }

/* 넓은 화면에서 비교 블록만 본문 폭 밖으로 — 다만 좌우 그리드 간격(3rem) 안에서만.
   더 키우면 사이드바와 목차 레일을 덮는다. 양쪽으로 대칭 확장한다. */
@media (min-width: 75rem) {
  .block-wide { width: calc(100% + 5rem); margin-inline: -2.5rem; }
}

/* ── 전후 비교 — 핵심 증거였는데 본문(16px)보다 작은 14.4px 회색 표였다 */
.before-after .ba-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .7rem; padding: 0; margin: 0; list-style: none;
}
.ba-item {
  display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: .6rem;
}
.ba-label { margin: 0; color: var(--faint); font: var(--fs-3xs)/var(--lh-ui) var(--mono); letter-spacing: .08em; }
.ba-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.ba-before { color: var(--muted); font-size: var(--fs-sm); text-decoration: line-through; text-decoration-thickness: 1px; overflow-wrap: break-word; }
.ba-arrow { color: var(--faint); font-size: var(--fs-2xs); }
.ba-after { color: var(--accent); font: 600 var(--fs-md)/1.35 var(--sans); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.ba-after strong { font-weight: 700; }
.ba-delta { margin: 0; color: var(--text); font: var(--fs-2xs)/var(--lh-ui) var(--mono); }
.ba-source { margin: 0; color: var(--faint); font: var(--fs-3xs)/1.45 var(--mono); overflow-wrap: anywhere; }

/* ── 결정 카드 — "A vs B → 선택" 을 대비로 */
.decision-cards .dc-list { display: grid; gap: .9rem; padding: 0; margin: 0; list-style: none; }
.dc-item { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); }
.dc-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-block-end: .5rem; }
.dc-drop { color: var(--muted); font-size: var(--fs-sm); text-decoration: line-through; text-decoration-color: var(--line); }
.dc-vs { color: var(--faint); font: var(--fs-3xs) var(--mono); }
.dc-keep { color: var(--text); font: 650 var(--fs-md)/1.3 var(--sans); }
.dc-chose { margin: 0 0 .3rem; color: var(--accent); font: 600 var(--fs-2xs)/var(--lh-ui) var(--sans); }
.dc-why { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ── 산출물 그리드 */
.deliverables .dl-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .7rem; padding: 0; margin: 0; list-style: none;
}
.dl-item {
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .6rem;
  background: var(--surface-quiet); color: var(--text);
  font-size: var(--fs-sm); line-height: var(--lh-body);
}
.dl-item code { font-size: var(--fs-2xs); }

/* ── 면접 답변 카드 */
.answer-cards .ans-list { display: grid; gap: .1rem; padding: 0; margin: 0; list-style: none; }
.ans-item { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; padding: .85rem 0; border-block-start: 1px solid var(--line); }
.ans-item:last-child { border-block-end: 1px solid var(--line); }
.ans-label { margin: 0; color: var(--accent); font: 650 var(--fs-2xs)/1.7 var(--sans); }
.ans-body { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ── 실패 카드 — 색이 "실패" 를 나른다 */
.failure-cards .fail-list { display: grid; gap: .7rem; padding: 0; margin: 0; list-style: none; }
.fail-item { padding: .9rem 1rem; border: 1px solid var(--line); border-inline-start: 3px solid var(--warn); border-radius: .5rem; background: var(--surface); }
.fail-head { margin: 0 0 .3rem; color: var(--warn); font: 650 var(--fs-sm)/1.35 var(--sans); }
.fail-body { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

@media (max-width: 52rem) {
  .ans-item { grid-template-columns: 1fr; gap: .2rem; }
  .before-after .ba-list { grid-template-columns: 1fr; }
}

/* ══ 홈 — 증거를 앞세운다 ═══════════════════════════════════
   숫자 4개는 이 사이트의 핵심 주장("손으로 적지 않는다")인데
   작은 회색 라벨과 함께 한 줄에 눌려 있었다. 액센트=확인된 사실 규칙을 여기에도 적용한다. */
.hero-proof {
  gap: .8rem; margin-block: 3rem 0; padding-block-start: 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.hero-proof > div {
  padding: 1rem 1.1rem 1.1rem; padding-inline-end: 1.1rem;
  border: 1px solid var(--line); border-radius: .6rem; background: var(--surface);
  gap: .3rem;
}
.hero-proof dt { color: var(--faint); font-size: var(--fs-3xs); letter-spacing: .07em; }
.hero-proof dd { color: var(--accent); }
.hero-proof .spark { width: 100%; opacity: 1; margin-block-start: .5rem; }

/* 카드 제목에 상시 밑줄이 그어져 목록 전체가 지저분했다. 가리킬 때만 긋는다. */
.card h2 a, .track-group .card h2 a { color: var(--text); text-decoration: none; }
.card h2 a:hover, .card h2 a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
.card { transition: border-color .14s ease; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

@media (max-width: 52rem) {
  .hero-proof { grid-template-columns: repeat(2, 1fr); }
}

/* ══ M3 컴포넌트 ═════════════════════════════════════════════
   토큰만 갈아끼우면 색만 바뀌고 "완성된" 느낌은 안 난다.
   M3 를 M3 로 보이게 하는 건 모양(반지름 5단계) · 표면 톤으로 만든 깊이 ·
   상태 레이어(hover 를 임의 색이 아니라 primary 8% 로 얹기) 세 가지다. */

/* ── 상단 앱 바 */
.site-header {
  background: var(--surface-container);
  border-block-end: 0;
  backdrop-filter: none;
}
.header-inner { min-height: 4rem; }
.top-nav a {
  padding: .4rem .75rem; border-radius: var(--shape-full);
  color: var(--on-surface-variant); text-decoration: none;
  transition: background-color .12s ease;
}
.top-nav a:hover { background: color-mix(in srgb, var(--primary) calc(var(--state-hover) * 100%), transparent); color: var(--on-surface); }

/* ── 내비게이션 드로어 — M3 는 알약 모양에 secondary-container 로 활성 표시 */
.nav-link {
  min-height: 2.75rem; align-content: center;
  padding: .5rem 1rem; border-inline-start: 0;
  border-radius: var(--shape-full);
  color: var(--on-surface-variant);
  transition: background-color .12s ease, color .12s ease;
}
.nav-link:hover {
  background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
  border-inline-start: 0; color: var(--on-surface);
}
.nav-link.is-active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-inline-start: 0; font-weight: 600;
}
.nav-group > summary { border-radius: var(--shape-full); padding-inline: 1rem; }
.nav-group { border-block-end: 0; }

/* ── 카드 — outlined card (반지름 12 · outline-variant 1px) */
.card {
  padding: 1.25rem; border-radius: var(--shape-md);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  transition: background-color .12s ease, border-color .12s ease;
}
.card:hover {
  background: color-mix(in srgb, var(--primary) calc(var(--state-hover) * 100%), var(--surface-container-lowest));
  border-color: var(--outline-variant);
}

/* ── 칩 — M3 assist chip (높이 32 · 반지름 8) */
.badge {
  min-height: 2rem; padding: .3rem .75rem;
  border-radius: var(--shape-sm);
  border: 1px solid var(--outline-variant);
  background: transparent; color: var(--on-surface-variant);
}
.badge-evidence { border-color: var(--outline-variant); background: var(--primary-container); color: var(--on-primary-container); }
.badge-maturity { background: var(--surface-container-high); }

/* ── 버튼 — filled / outlined (높이 40 · 반지름 full) */
.button {
  min-block-size: 2.5rem; padding: .55rem 1.5rem;
  border-radius: var(--shape-full); border: 0;
  background: var(--primary); color: var(--on-primary);
  font: 500 var(--fs-sm)/1.4 var(--sans);
  transition: box-shadow .12s ease, background-color .12s ease;
}
.button:hover { filter: none; box-shadow: var(--elev-1);
  background: color-mix(in srgb, var(--on-primary) calc(var(--state-hover) * 100%), var(--primary)); }
.button-quiet {
  background: transparent; color: var(--primary);
  border: 1px solid var(--outline);
}
.button-quiet:hover { box-shadow: none;
  background: color-mix(in srgb, var(--primary) calc(var(--state-hover) * 100%), transparent); }

/* ── 검색 — M3 search bar (반지름 full · surface-container-high · 테두리 없음) */
.search-box input {
  min-height: 3.5rem; padding: .8rem 1.25rem;
  border: 0; border-radius: var(--shape-full);
  background: var(--surface-container-high); color: var(--on-surface);
  font-size: var(--fs-sm);
}
.search-box input::placeholder { color: var(--on-surface-variant); }
.search-kbd { inset-inline-end: 1rem; }
.search-results {
  border: 0; border-radius: var(--shape-md);
  background: var(--surface-container-high); box-shadow: var(--elev-2);
}
.search-result { border-radius: var(--shape-sm); }
.search-result:hover { background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent); }

/* ── 테마 스위치 — M3 segmented button */
.theme-switch { border: 1px solid var(--outline); border-radius: var(--shape-full); background: transparent; overflow: hidden; }
.theme-switch button { padding: .4rem .85rem; min-height: 2.25rem; }
.theme-switch button + button { border-inline-start: 1px solid var(--outline); }
.theme-switch button[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary-container); }
.theme-switch button:hover { background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent); }

/* ── 조판 블록도 같은 모양·표면 체계로 */
.ba-item, .dc-item, .fail-item {
  border-radius: var(--shape-md); border-color: var(--outline-variant);
  background: var(--surface-container-lowest);
}
.dl-item { border-radius: var(--shape-md); border-color: var(--outline-variant); background: var(--surface-container-low); }
.layer-strip { border-radius: var(--shape-lg); border-color: var(--outline-variant); background: var(--surface-container-low); }
.hero-proof > div { border-radius: var(--shape-md); border-color: var(--outline-variant); background: var(--surface-container-lowest); }
.doc-toc a { border-radius: var(--shape-full); border-inline-start: 0; padding-inline: .75rem; }
.doc-toc a:hover { background: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent); }
.doc-toc a.is-current { background: var(--primary-container); color: var(--on-primary-container); border-inline-start: 0; }
.table-scroll { border-radius: var(--shape-md); }
.nav-drawer, .toc-fold { border-radius: var(--shape-md); border-color: var(--outline-variant); }

/* 성장 점수표 — 값과 상태를 분리하고, 상태는 색과 텍스트를 함께 쓴다. */
.growth-scorecard { margin-block: 2.5rem; }
.growth-scorecard > h3 { margin-block-end: .35rem; }
.growth-scorecard-meta { margin-block-start: 0; color: var(--muted); font-family: var(--mono); }
.growth-scorecard-group {
  margin-block: 1.25rem; padding: 1rem;
  border: 1px solid var(--outline-variant); border-radius: var(--shape-md);
  background: var(--surface-container-lowest);
}
.growth-scorecard-group h3 { margin-block: 0 .75rem; }
.growth-scorecard-table { min-width: 44rem; }
.growth-scorecard-table caption { text-align: start; font-weight: 650; padding-block-end: .6rem; }
.growth-scorecard-table th[scope="row"] { text-align: start; color: var(--on-surface); }
.growth-value { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.growth-status {
  display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: baseline;
  padding: .2rem .55rem; border: 1px solid var(--outline-variant);
  border-radius: var(--shape-full); color: var(--on-surface);
}
.growth-status-code { font-family: var(--mono); color: var(--on-surface-variant); }
.growth-status-verified { background: var(--primary-container); color: var(--on-primary-container); }
.growth-status-zero { background: var(--surface-container-high); }
.growth-status-not-verified { border-color: var(--warn); }
.growth-status-unavailable { color: var(--on-surface-variant); }

/* ══ 화면 증거 ═══════════════════════════════════════════════
   32,440자에 이미지가 0장이었다. 만든 것을 글로만 주장하지 않는다. */
.shots { display: grid; gap: 1rem; }
/* 세로(기기) 화면은 1fr 로 늘리면 784px 짜리 거대한 폰이 된다. 실제 기기처럼 폭을 묶는다. */
.shots-tall { grid-template-columns: repeat(auto-fit, minmax(12rem, 19rem)); justify-content: start; align-items: start; }
.shots-wide { grid-template-columns: 1fr; }

.shot { margin: 0; display: grid; gap: .6rem; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--outline-variant); border-radius: var(--shape-md);
  background: var(--surface-container-low);
}
/* 세로 화면은 실제 기기 비율이라 테두리를 더 둥글게 — 기기처럼 읽힌다. */
.shots-tall .shot img { border-radius: var(--shape-lg); }
.shot figcaption {
  color: var(--on-surface-variant); font-size: var(--fs-2xs);
  line-height: var(--lh-ui); text-wrap: pretty;
}

@media (max-width: 52rem) {
  .growth-scorecard-group { padding: .75rem; }
  /* 375px 에서 2열이면 폰 화면이 158px 로 줄어 내용이 안 보인다. 한 장씩 크게 본다. */
  .shots-tall { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .shot figcaption { font-size: var(--fs-3xs); }
}

/* ══ 기록 폼 ═════════════════════════════════════════════════
   입력 요소가 브라우저 기본 스타일이라 나머지 화면과 따로 놀았다.
   M3 outlined text field 로 맞춘다. */
.capture-form { display: grid; gap: 1.4rem; max-width: var(--measure); margin-block: 1.8rem 0; }
.capture-form > p { margin: 0; display: grid; gap: .4rem; }
.capture-form label { color: var(--on-surface-variant); font: 500 var(--fs-2xs)/var(--lh-ui) var(--sans); }

.capture-form input,
.capture-form select,
.capture-form textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
  border: 1px solid var(--outline); border-radius: var(--shape-xs);
  background: var(--surface-container-lowest); color: var(--on-surface);
  font: var(--fs-sm)/var(--lh-body) var(--sans);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.capture-form textarea { min-height: 9rem; resize: vertical; }
.capture-form select {
  appearance: none; padding-inline-end: 2.5rem;
  /* 화살표는 CSP 상 외부 이미지를 못 쓰므로 그라디언트로 그린다. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}
.capture-form input:hover,
.capture-form select:hover,
.capture-form textarea:hover { border-color: var(--on-surface); }
.capture-form input:focus-visible,
.capture-form select:focus-visible,
.capture-form textarea:focus-visible {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.capture-form ::placeholder { color: var(--outline); }
.capture-form button[type="submit"] { justify-self: start; }

/* 카드의 실측 근거 — 위계를 지어내지 않고 문서가 든 증거로 만든다. */
.card { display: grid; gap: .55rem; align-content: start; }
.card-proof {
  margin: 0; padding: .35rem .75rem;
  justify-self: start; align-self: start;
  border-radius: var(--shape-xl); background: var(--surface-container-high);
  color: var(--on-surface-variant); font: 500 var(--fs-3xs)/1.6 var(--mono);
}
.card-proven .card-proof { color: var(--primary); }
.card p:not(.card-proof) { min-height: 0; }
.card .text-link { margin-block-start: .35rem; }
/* 홈 첫 구획(만든 것)이 포트폴리오의 본체다. 조금 더 넓게 준다. */
.track-group:first-of-type .card-grid { gap: 1rem; }

/* ══ Google 조판 문법으로 ══════════════════════════════════
   실측(m3.material.io): 페이지 #ffffff · 히어로 면 #f8f1f6 radius 24 padding 56 ·
   카드 radius 16~40 **테두리 0** 그림자 0 · h1 96px/475 · 본문 16/24.
   면을 테두리가 아니라 **톤 차이**로 나눈다. 이게 가장 큰 차이였다. */

/* ── 카드: 테두리 → 톤 */
.card, .ba-item, .dc-item, .fail-item, .dl-item,
.hero-proof > div, .layer-strip, .table-scroll {
  border: 0;
  background: var(--surface-container-low);
  border-radius: var(--shape-lg);
}
/* 드로어는 접히는 모바일에서만 면이 된다. 데스크톱에선 그냥 목록이다. */
.nav-drawer, .toc-fold { border: 0; background: transparent; }
@media (max-width: 52rem) {
  .nav-drawer, .toc-fold {
    background: var(--surface-container-low); border-radius: var(--shape-md);
  }
  .nav-drawer[open] > summary { border-block-end: 0; }
}
.card { padding: 1.6rem; }
.card:hover { background: var(--surface-container); }
.ba-item, .dc-item, .fail-item { padding: 1.4rem 1.5rem; }
.dl-item { background: var(--surface-container); padding: 1.1rem 1.25rem; }
.fail-item { border-inline-start: 4px solid var(--tertiary); border-start-start-radius: var(--shape-xs); border-end-start-radius: var(--shape-xs); }
.hero-proof > div { padding: 1.4rem 1.5rem; }
.layer-strip { padding: 1.8rem; }
.table-scroll { padding: .25rem; }
.prose th, .prose td { border-color: color-mix(in srgb, var(--outline-variant) 55%, transparent); }
.prose th { background: transparent; color: var(--on-surface-variant); font-weight: 500; }

/* ── 히어로: 톤 면 위에 큰 글자 (실측 radius 24 · padding 56) */
.hero {
  padding: 3.5rem; margin-block: 1rem 0;
  border-block-end: 0; border-radius: var(--shape-lg);
  background: var(--surface-container-low);
}
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 40rem; color: var(--on-surface-variant); }
.hero-proof { border-block-start: 0; padding-block-start: 1.6rem; margin-block-start: 2rem; }
.hero-proof > div { background: var(--surface-container-high); }

/* ── 제목을 키운다 (실측 h1 96px/475 — 문서 사이트라 그만큼은 아니되 지금은 너무 작다) */
h1 {
  font: 500 clamp(var(--fs-3xl), var(--fs-2xl) + 2.4vw, var(--fs-4xl))/1.14 var(--sans);
  letter-spacing: -.02em; max-width: 20ch;
}
/* 홈 히어로는 첫인상이다. 문서 제목보다 한 단계 크게. */
.hero h1 {
  font-size: clamp(var(--fs-3xl), var(--fs-2xl) + 3.4vw, var(--fs-5xl));
  line-height: 1.08; letter-spacing: -.03em; max-width: 16ch;
}
.prose h2 {
  font: 500 var(--fs-2xl)/1.25 var(--sans);
  letter-spacing: -.01em; margin-block: 3.2rem 1rem;
}
.prose h3 { font: 600 var(--fs-lg)/1.35 var(--sans); }

/* ── 헤더·내비: 선을 지우고 톤으로 */
.site-header { background: var(--surface-base); border-block-end: 0; }
.header-inner { min-height: 4.5rem; }
.nav-group { border-block-end: 0; }
.doc-toc { border-inline-start: 0; padding-inline-start: 0; }
.page-footer { border-block-start: 0; padding-block-start: 2rem; }
.content > .content-toolbar { border-block-start: 0; }
.section-block { padding-block: 4rem 1rem; }
.track-heading { border-block-end: 0; }

/* ── 검색: 실측대로 알약 + 톤 */
.search-box input { background: var(--surface-container-high); border-radius: var(--shape-xl); }

/* 히어로 보조 문장 — 리드 바로 아래, 수치의 출처를 밝힌다. */
.hero-sub {
  margin-block: .9rem 0; max-width: 40rem;
  color: var(--on-surface-variant); font-size: var(--fs-sm); line-height: var(--lh-body);
}
.hero-sub code { font-size: .95em; }
.hero .lede strong { color: var(--on-surface); font-weight: 600; }
.hero-actions { margin-block-start: 1.8rem; }

/* ══ 사례 진열대 ═══════════════════════════════════════════
   "이 페이지가 뭘 제공하는지" 를 히어로 바로 뒤에서 답한다.
   문구는 각 사례 문서의 "결과:" 를 그대로 쓴다. */
.case-shelf { padding-block: 3.5rem 1rem; }
.cs-head { margin-block-end: 1.5rem; }
.cs-head h2 { margin: 0 0 .4rem; font: 500 var(--fs-2xl)/1.25 var(--sans); letter-spacing: -.01em; }
.cs-head p { margin: 0; color: var(--on-surface-variant); font-size: var(--fs-sm); }

.cs-list { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.cs-item a {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem; align-items: baseline;
  padding: 1.15rem 1.4rem; border-radius: var(--shape-lg);
  background: var(--surface-container-low); color: inherit; text-decoration: none;
  transition: background-color .12s ease;
}
.cs-item a:hover { background: var(--surface-container); }
.cs-n { color: var(--primary); font: 500 var(--fs-2xs)/1.6 var(--mono); }
.cs-title { font: 600 var(--fs-md)/1.4 var(--sans); }
.cs-out { color: var(--on-surface-variant); font-size: var(--fs-sm); line-height: var(--lh-body); }

@media (max-width: 60rem) {
  .cs-item a { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .3rem 1.25rem; }
  .cs-out { grid-column: 2; }
}

/* 트랙 아이콘 — Google 의 레일처럼 구역에만 붙인다(문서 14개에 각각 붙이면 노이즈).
   CSP(img-src 'self')가 외부 아이콘 폰트를 막으므로 인라인 SVG 다. */
.nav-icon { inline-size: 1.15rem; block-size: 1.15rem; flex: none; color: var(--on-surface-variant); }
.nav-group > summary { gap: .65rem; }
.nav-group[open] > summary .nav-icon { color: var(--primary); }

/* ── 쪼개지면 안 되는 한 덩어리
   body 의 overflow-wrap: anywhere 는 긴 한글 문장이 칸을 밀어내는 걸 막으려고 넣었다.
   그런데 날짜("2026-08-30" → "2026-08-" / "30")와 상태 코드("UNAVAILABLE" → "UNAVAILAB" / "LE")
   까지 잘라 놨다. 표는 이미 .table-scroll 안이라 넘치면 가로로 스크롤하면 된다 — 자를 필요가 없다. */
time,
.growth-value,
.growth-status-code,
.table-scroll th,
.table-scroll td { overflow-wrap: normal; }
/* 날짜·기간은 한 덩어리로 — 하이픈에서 끊기는 것까지 막으려면 nowrap 이어야 한다. */
.nb, time { white-space: nowrap; }
/* 실측값 칸은 값 하나만 담는다 — "1,995" 가 "1," / "995" 로 갈리면 안 된다. */
.hero-proof dd, .metric-value { white-space: nowrap; }

/* ── 위키 뇌 지도 ─────────────────────────────────────────────
   흰 페이지 안에 어두운 표본 관찰창을 하나 박는다. 라이트/다크 어느 테마에서도
   같게 보여야 해서 색을 여기서 한 번에 못박는다 — [data-theme] 안에 숨기지 않는다.
   논문 그림의 파랑/분홍은 가져오지 않는다. 사이트 팔레트를 검정 위에 올린다:
   좌반구=녹(확인된 것), 우반구=호박(성향), 공개=흰 링. */
.brain-block { margin-block: 2rem; }
.brain-panel {
  background: lch(8% 3 160);
  border: 1px solid lch(20% 4 160);
  border-radius: var(--shape-lg);
  padding: 1rem 1rem .5rem;
  overflow: hidden;
}
.brain-panel .figure-canvas { padding-block: 0; }
.brain-panel .brain { min-width: 34rem; }

.brain-controls { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: .75rem; }
.brain-filter {
  padding: .32rem .8rem;
  border: 1px solid lch(28% 5 160);
  border-radius: var(--shape-full);
  background: transparent;
  color: lch(72% 6 160);
  font: 500 var(--fs-2xs) var(--sans);
  cursor: pointer;
}
.brain-filter:hover { border-color: lch(45% 10 160); color: lch(88% 6 160); }
.brain-filter[aria-pressed="true"] { background: lch(72% 34 160); border-color: lch(72% 34 160); color: lch(12% 6 160); }
.brain-filter:focus-visible { outline: 2px solid lch(80% 30 160); outline-offset: 2px; }

.brain-fill path { fill: lch(13% 3 160); stroke: none; }
.brain-outline path { fill: none; stroke: lch(64% 7 160); stroke-width: 1.6; }
.brain-gyri polyline { fill: none; stroke: lch(26% 5 160); stroke-width: 1.7; }

.brain-edges .be { fill: none; stroke: lch(52% 12 160); stroke-width: .7; opacity: .16; }
.brain-edges .be[data-edge="링크"] { stroke: lch(74% 34 160); stroke-width: .9; opacity: .42; }

/* 노드 — 반구가 색을, 유형이 모양을 정한다. */
.bn circle, .bn rect, .bn path { fill: lch(70% 30 160); }
.bn[data-side="우"] circle, .bn[data-side="우"] rect, .bn[data-side="우"] path { fill: lch(76% 44 78); }
.bn[data-side="원문"] circle { fill: lch(56% 6 160); }
.bn[data-public="1"] circle, .bn[data-public="1"] rect, .bn[data-public="1"] path { fill: lch(97% 4 160); }
.bn-halo { fill: lch(70% 30 160); opacity: .16; }
.bn[data-side="우"] .bn-halo { fill: lch(76% 44 78); }
a.bn:hover .bn-halo, a.bn:focus-visible .bn-halo { opacity: .5; }
a.bn:focus-visible { outline: 2px solid lch(95% 4 160); outline-offset: 2px; }

.brain-rail path { fill: none; stroke: lch(58% 6 160); stroke-width: 1.2; opacity: .55; }
.rail-label { fill: lch(72% 8 160); font: 500 22px var(--sans); }
.rail-label-r { text-anchor: end; }
.brain-side-label { fill: lch(70% 26 160); font: 600 24px var(--sans); }
.brain-side-r { fill: lch(76% 40 78); text-anchor: end; }

.brain-ruler line { stroke: lch(40% 5 160); stroke-width: 1; }
.brain-ruler .tick { stroke: lch(66% 20 160); stroke-width: 1.4; }
.ruler-label { fill: lch(58% 6 160); font: 500 17px var(--mono); text-anchor: middle; }
.ruler-note { text-anchor: end; }

.brain-caption { margin-block-start: .8rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }

/* 필터 — JS 는 data-filter 속성 하나만 바꾼다. 숨김·강조는 전부 여기서.
   인라인 style 을 쓰면 CSP style-src 'self' 에 걸린다. */
.brain .bn, .brain .be { transition: opacity .18s ease; }
.brain[data-filter="좌"] .bn:not([data-side="좌"]),
.brain[data-filter="우"] .bn:not([data-side="우"]),
.brain[data-filter="원문"] .bn:not([data-side="원문"]),
.brain[data-filter="public"] .bn:not([data-public="1"]) { opacity: .07; }
.brain:not([data-filter="all"]) .be { opacity: .05; }

@media (prefers-reduced-motion: reduce) {
  .brain .bn, .brain .be { transition: none; }
}

/* Mobile interaction contract — 실기기 폭에서 pointer 미디어쿼리가 항상 coarse로
   보고되지 않는다. 독립 동작은 포인터 종류와 무관하게 44×44px를 보장한다. */
@media (max-width: 52rem) {
  .brand,
  .theme-switch button,
  .side-record a,
  .doc-toc a,
  .button,
  .feedback-link,
  .capture-link,
  .page-footer a,
  .nav-group > summary,
  .nav-drawer > summary,
  .toc-fold > summary,
  .nav-link,
  .search-result,
  .page-nav a,
  .brain-filter,
  .text-link {
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
  }

  .brand,
  .side-record a,
  .doc-toc a,
  .button,
  .feedback-link,
  .capture-link,
  .page-footer a,
  .nav-link,
  .search-result,
  .page-nav a,
  .text-link {
    align-items: center;
  }

  .doc-toc a,
  .nav-link,
  .search-result,
  .page-nav a {
    display: flex;
  }
}