/* 보는지도 콘텐츠 페이지 스타일 — design.md "Content pages: Long Document" 계열.
 * 토큰 값은 tokens.css와 동기화한다 (tests/tokens.test.ts가 같은 이름의 값을 비교한다). */
@import url("/fonts/fonts.css");

:root {
  --color-paper: #f3f5ef;
  --color-paper-2: #e8ece3;
  --color-paper-3: #dce2d6;
  --color-surface: #ffffff;
  --color-ink: #0d1b1e;
  --color-ink-soft: #2a3a3d;
  --color-muted: #56645f;
  --color-rule: #d8ded3;
  --color-accent: #c6f24e;
  --color-accent-deep: #47730e;
  --color-accent-ink: #0d1b1e;
  --color-focus: #3f6a0a;
  --color-shadow: oklch(18% 0.015 200 / 0.14);
  --color-warning: oklch(48% 0.09 68);
  --tag-gun-ink: oklch(46% 0.05 255); --tag-gun-surface: oklch(91% 0.025 255);
  --tag-gu-ink: oklch(46% 0.07 60); --tag-gu-surface: oklch(92% 0.04 75);
  --font-display: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --rule-thin: 1px;
  --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-card: 1rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-paper: #0d1b1e;
    --color-paper-2: #132327;
    --color-paper-3: #1b2e32;
    --color-surface: #17292d;
    --color-ink: #eef3ea;
    --color-ink-soft: #d3dcd4;
    --color-muted: #9aaba4;
    --color-rule: #2c4146;
    --color-accent-deep: #c6f24e;
    --color-focus: #c6f24e;
    --color-shadow: oklch(0% 0 0 / 0.55);
    --color-warning: oklch(82% 0.11 75);
    --tag-gun-ink: oklch(82% 0.06 255); --tag-gun-surface: oklch(32% 0.04 255);
    --tag-gu-ink: oklch(85% 0.08 70); --tag-gu-surface: oklch(33% 0.05 70);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--color-accent-deep); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
img { max-width: 100%; }

/* Header mirrors the map-mode floating header (.app-header / .brand):
   same insets, pill card, logo and wordmark metrics so switching views feels stable. */
.doc-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 3.25rem; margin: max(var(--space-sm), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) 0 max(var(--space-md), env(safe-area-inset-left)); padding: var(--space-2xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 4px 18px -12px var(--color-shadow); }
.doc-brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; text-decoration: none; white-space: nowrap; }
.doc-brand img { display: block; width: 2.25rem; height: 2.25rem; }
.doc-nav { display: flex; gap: var(--space-xs); flex-wrap: nowrap; }
.doc-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--space-sm); border-radius: var(--radius-md); color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (min-width: 60rem) {
  .doc-header { margin: max(var(--space-md), env(safe-area-inset-top)) max(var(--space-lg), env(safe-area-inset-right)) 0 max(var(--space-lg), env(safe-area-inset-left)); padding: var(--space-xs); background: color-mix(in oklch, var(--color-surface) 92%, transparent); }
  .doc-brand { font-size: var(--text-lg); }
  .doc-brand img { width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 40rem) {
  /* Single flat row: brand and nav share the pill without a nested card. */
  .doc-header { gap: var(--space-xs); }
  .doc-brand { font-size: var(--text-sm); }
  .doc-brand img { width: 1.75rem; height: 1.75rem; }
  .doc-nav { gap: var(--space-2xs); }
  .doc-nav a { min-height: 2.75rem; padding-inline: var(--space-2xs); font-size: var(--text-xs); }
  .doc-main { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
}
.doc-nav a:hover { background: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface)); color: var(--color-ink); }
.doc-nav a[aria-current="page"] { color: var(--color-accent-deep); background: color-mix(in oklch, var(--color-accent) 12%, var(--color-surface)); }

.doc-main { max-width: 44rem; margin-inline: auto; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.doc-main > *:first-child { margin-block-start: 0; }
.doc-main h1 { margin-block: 0 var(--space-sm); font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.doc-main h2 { margin-block: var(--space-2xl) var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.02em; text-wrap: balance; }
.doc-main h3 { margin-block: var(--space-lg) var(--space-xs); font-size: var(--text-md); }
.doc-main p { margin-block: var(--space-sm); text-wrap: pretty; }
.doc-main li { text-wrap: pretty; }
.doc-main ul:not([class]), .doc-main ol:not([class]) { margin-block: var(--space-sm); padding-inline-start: var(--space-xl); }
.doc-main li { margin-block: var(--space-2xs); }
.doc-main li::marker { color: var(--color-muted); }
.doc-lede { color: var(--color-ink-soft); font-size: var(--text-lg); line-height: 1.5; }
.doc-meta { color: var(--color-muted); font-size: var(--text-sm); }

.doc-card { margin-block: var(--space-md); padding: var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.doc-card > *:first-child { margin-block-start: 0; }
.doc-card > *:last-child { margin-block-end: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-xs); margin-block: var(--space-md); }
.metric-grid > div { padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); }
.metric-grid dt { color: var(--color-muted); font-size: var(--text-xs); }
.metric-grid dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }

.caveat { margin-block: var(--space-md); padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid color-mix(in oklch, var(--color-warning) 45%, var(--color-rule)); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-ink-soft); font-size: var(--text-sm); }
.caveat strong { color: var(--color-ink); }

.purpose-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; list-style: none; }
.purpose-list li { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); font-weight: 600; }
.purpose-list li span { color: var(--color-muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-lg); }
.cta-button { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule-thin) solid var(--color-accent-deep); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out); }
.cta-button:hover { transform: translateY(-1px); }
.cta-button--secondary { background: var(--color-surface); border-color: var(--color-rule); color: var(--color-ink); font-weight: 600; }

/* 시·군·구 유형 배지 — 색으로 유형을 구분한다 */
.type-tag { display: inline-block; min-width: 1.35rem; margin-inline-end: var(--space-2xs); padding: 0 var(--space-2xs); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; line-height: 1.6; text-align: center; }
.tag-si { color: var(--color-accent-deep); background: color-mix(in oklch, var(--color-accent) 16%, var(--color-surface)); }
.tag-gun { color: var(--tag-gun-ink); background: var(--tag-gun-surface); }
.tag-gu { color: var(--tag-gu-ink); background: var(--tag-gu-surface); }
.tag-etc { color: var(--color-muted); background: var(--color-paper-2); }

/* 지역 인덱스: 시/도 카드에 소속 시·군·구를 유형별로 나열 */
.province-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-sm); margin-block: var(--space-md); padding: 0; list-style: none; }
.province-card { padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); }
.province-head { display: block; color: var(--color-ink); text-decoration: none; }
.province-head strong { display: block; font-size: var(--text-md); overflow-wrap: normal; }
.province-meta { display: block; margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.province-head:hover strong { color: var(--color-accent-deep); }
.county-groups { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-xs); padding-block-start: var(--space-xs); border-block-start: var(--rule-thin) solid var(--color-rule); }
.county-group { display: flex; align-items: baseline; gap: var(--space-xs); }
.county-group .type-tag { margin-inline-end: 0; }
.county-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.county-chips a { padding: 0 var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); color: var(--color-ink-soft); font-size: var(--text-xs); line-height: 1.7; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); }
.county-chips a:hover { border-color: var(--color-accent-deep); color: var(--color-ink); }

/* Sibling cards: the link text is just "강동구 CCTV"; the type tag and count sit
   outside it, and the stretched ::after keeps the whole card clickable. */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-xs); margin-block: var(--space-md); padding: 0; list-style: none; }
.region-grid li { position: relative; padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.region-grid li:hover { border-color: var(--color-accent-deep); background: color-mix(in oklch, var(--color-accent) 6%, var(--color-surface)); }
.region-grid a { color: var(--color-ink); font-weight: 700; text-decoration: none; }
.region-grid a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.region-grid small { display: block; color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Installation-year distribution: label · proportional bar · count. */
.year-list { display: grid; gap: var(--space-2xs); margin-block: var(--space-sm) var(--space-md); padding: 0; list-style: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.year-list li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--space-sm); }
.year-label { color: var(--color-ink-soft); }
.year-bar { display: block; height: 0.6rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-accent-deep) var(--share), var(--color-paper-2) var(--share)); }
.year-count { color: var(--color-muted); text-align: end; }

.table-scroll { overflow-x: auto; margin-block: var(--space-md); }
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.doc-table th, .doc-table td { padding: var(--space-xs) var(--space-sm); border-block-end: var(--rule-thin) solid var(--color-rule); text-align: start; }
.doc-table th:not(:first-child), .doc-table td:not(:first-child) { text-align: end; }
.doc-table th { color: var(--color-muted); font-weight: 600; }
.doc-table tbody tr:hover { background: var(--color-paper-2); }
.doc-table td:first-child a { color: var(--color-ink); font-weight: 600; }

.faq-item { margin-block: var(--space-md); padding-block-end: var(--space-md); border-block-end: var(--rule-thin) solid var(--color-rule); }
.faq-item h2 { margin-block: 0 var(--space-xs); font-size: var(--text-md); }
.faq-item p { margin-block: var(--space-xs); }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-md); padding: 0; list-style: none; color: var(--color-muted); font-size: var(--text-sm); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.breadcrumbs li + li::before { content: "›"; color: var(--color-rule); }
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent-deep); }
.breadcrumbs [aria-current] { color: var(--color-ink); font-weight: 600; }

.doc-footer { border-block-start: var(--rule-thin) solid var(--color-rule); background: var(--color-surface); }
.doc-footer-inner { max-width: 44rem; margin-inline: auto; padding: var(--space-lg) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.doc-footer-inner p { margin-block: var(--space-2xs); }
.doc-footer-inner nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-sm); }
.doc-footer-inner a, .doc-footer-link { color: var(--color-ink-soft); }
.doc-footer-link { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }

.insight-list { padding-inline-start: 1.2em; }
.insight-list li { margin-block: var(--space-2xs); line-height: 1.6; }
.read-more { padding-inline-start: 1.2em; font-size: var(--text-sm); }