/* Seoul Housing Age — shared tokens, layout, header/footer, content pages. Map pages add map2d.css / map3d.css. */
:root {
  --bg: #f1f2f1;
  --surface: #fbfbfa;
  --stage: #e7e9e8;
  --ink: #1d1f1f;
  --ink-2: #4f5452;
  --ink-3: #6f7472;
  --line: #d9dcda;
  --accent: #a8481f;
  --focus: #1f5fbf;
  --glass: #2a5fa8;
  --seoul: #4f5452;
  --r0: #f4e2d2; --r1: #eabd95; --r2: #d98f5c; --r3: #b85f2f; --r4: #853813;
  --mk-rebuild: #2a78d6; --mk-redev: #6250d6; --mk-moa: #0f8a5f;
  --mark: #1d1f1f;
  --f-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161817; --surface: #1d1f1e; --stage: #121413; --ink: #ecedec; --ink-2: #b9bdbb; --ink-3: #959a98; --line: #333735;
    --accent: #e9895a; --focus: #7aa7ec; --glass: #8fb6f0; --seoul: #b9bdbb;
    --r0: #3a2b22; --r1: #64402b; --r2: #985934; --r3: #cd7b45; --r4: #f4ab78;
    --mk-rebuild: #5b9cee; --mk-redev: #9085e9; --mk-moa: #2fbf8a;
    --mark: #f4f5f4;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: 15px; line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--surface); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1180px; margin: 0 auto; display: grid; gap: 26px; }
main.wrap { padding-block: 26px 56px; }
.wrap > * { min-width: 0; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* site header */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; text-decoration: none; font-size: 16px; color: var(--ink); }
.brand svg { width: 22px; height: 22px; flex: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-left: auto; }
.site-nav a { text-decoration: none; color: var(--ink-2); font-size: 14px; padding: 5px 9px; border-radius: 6px; }
.site-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--line) 55%, transparent); }
.site-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--line) 80%, transparent); font-weight: 500; }
@media (max-width: 640px) { .site-nav { margin-left: 0; width: 100%; } .site-nav a { padding: 4px 8px; } }

/* page heading */
.page-head { display: grid; gap: 8px; }
.eyebrow { font-size: 12px; letter-spacing: .06em; color: var(--ink-3); font-family: var(--f-mono); }
h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: 20px; line-height: 1.35; margin: 0; text-wrap: balance; }
h2.sec { font-size: 18px; }
h3 { font-size: 16px; margin: 0; }
.lede { margin: 0; color: var(--ink-2); max-width: 68ch; }
.crumbs { font-size: 13px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }

/* prose pages */
.prose { max-width: 72ch; display: grid; gap: 14px; }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.prose h2 { margin-top: 14px; }
.prose code { font-family: var(--f-mono); font-size: 13px; background: color-mix(in srgb, var(--line) 50%, transparent); padding: 1px 5px; border-radius: 4px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }

/* tables */
.tablewrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.data th, table.data td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
table.data td { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
table.data td:first-child { font-family: var(--f-sans); }
table.data tr.seoul td { font-weight: 700; }

/* gu page */
.statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; }
.stat .k { font-size: 12.5px; color: var(--ink-3); }
.stat .v { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; line-height: 1.25; }
.stat .s { font-size: 12.5px; color: var(--ink-2); }
.gu-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 820px) { .gu-grid { grid-template-columns: minmax(0, 1fr); } }
.summary p { margin: 0; color: var(--ink-2); }
.summary { display: grid; gap: 10px; }
.locator svg { width: 100%; height: auto; display: block; }
.locator .g { fill: color-mix(in srgb, var(--line) 85%, var(--bg)); stroke: var(--surface); stroke-width: 1.4; }
.locator .g.on { fill: var(--accent); }
.locator text { font-family: var(--f-sans); font-size: 12px; fill: var(--ink-3); }
.chart { display: grid; gap: 8px; }
.chart svg { width: 100%; min-width: 520px; height: auto; display: block; overflow: visible; }
.chart .tablewrap { margin-inline: -4px; padding-inline: 4px; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis text { font-family: var(--f-mono); font-size: 12px; fill: var(--ink-3); }
.chart .lbl { font-family: var(--f-sans); font-size: 13px; fill: var(--ink-2); }
.chart .val { font-family: var(--f-mono); font-size: 13px; font-weight: 500; fill: var(--ink); }
.chart .line-gu { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-seoul { fill: none; stroke: var(--seoul); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.chart .dot-gu { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart .bar-apt { fill: var(--r3); }
.chart .bar-low { fill: var(--r1); }
.chart .old-zone { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.chart-legend i.box { width: 11px; height: 11px; border-radius: 2px; }
.projects { display: grid; gap: 10px; }
.project { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; }
.project b { font-size: 14.5px; }
.project .meta { font-size: 12px; color: var(--ink-3); }
.project ul { margin: 2px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.kind svg { width: 12px; height: 12px; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; }
.gu-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.gu-links a { display: flex; justify-content: space-between; gap: 8px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: 14px; }
.gu-links a span { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); }
.gu-links a:hover { border-color: var(--ink-3); }
.gu-index { display: grid; gap: 12px; }
.alt-link { font-size: 14px; }
.downloads { display: grid; gap: 10px; }
.dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.dl a.btn { justify-self: end; }
.btn { display: inline-block; text-decoration: none; background: var(--ink); color: var(--surface); padding: 7px 14px; border-radius: 7px; font-size: 14px; }
.btn:hover { color: var(--surface); opacity: .9; }
.dl .desc { font-size: 13px; color: var(--ink-3); }

/* data sources */
.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .sources { grid-template-columns: minmax(0, 1fr); } }
.src { display: grid; gap: 8px; align-content: start; }
.src b { font-size: 16px; }
.src p { margin: 0; color: var(--ink-2); font-size: 14px; }
.src dl { margin: 0; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 10px; font-size: 13.5px; }
.src dt { color: var(--ink-3); }
.src dd { margin: 0; }
.src a { font-size: 14px; }

/* news */
.news-days { display: grid; gap: 22px; }
.news-day { display: grid; gap: 8px; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.news-item { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: grid; gap: 3px; }
.news-item a { text-decoration: none; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.news-item a:hover { text-decoration: underline; }
.news-item .ext { margin-left: 6px; font-size: 12px; color: var(--ink-3); }
.news-item .meta { font-size: 12.5px; color: var(--ink-3); }
.news-home { display: grid; gap: 10px; }
.news-home-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.news-home-head a { font-size: 14px; }
.news-note { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* ad / sponsor slots: render nothing until configured */
.slot { display: grid; place-items: center; min-height: 0; }
.slot .slot-label { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }

/* footer */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); }
.site-foot .inner { max-width: 1180px; margin: 0 auto; padding-block: 22px 30px; display: grid; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
.site-foot p { margin: 0; max-width: 100ch; }
.site-foot a { color: var(--ink-2); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }