/* 셈터 — tokens, shell and components. Mobile-first (16px gutter), light/dark, print. No external files. */
:root {
  --bg: #F6F6F9; --card: #FFFFFF; --sunk: #EFEFF4; --line: #E4E3EC;
  --text: #16151D; --sub: #55536A; --weak: #7C7A90;
  --brand: #5B47E0; --brand-strong: #4433C2; --brand-soft: #EEEBFD; --brand-ink: #FFFFFF;
  --sun: #FFB020; --sun-soft: #FFF4DC; --sun-ink: #9A5B00;
  --mint: #14A38B; --mint-soft: #E2F6F1; --rose: #E2557A; --rose-soft: #FCE8EE; --sky: #2F7BEB; --sky-soft: #E6F0FD;
  --up: #E5484D; --down: #2F6FEB;
  --q0: #F1EFFD; --q1: #D6D0FA; --q2: #AFA4F3; --q3: #7F6EE8; --q4: #4B37CF; --q-ink-dark: #16151D; --q-ink-light: #FFFFFF; --qna: #E4E3EC;
  --c0: var(--brand); --c1: var(--rose); --c2: var(--sky); --c3: var(--mint); --c4: var(--sun); --c5: #8E5BD8;
  --r: 16px; --r-lg: 20px; --r-sm: 12px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(22, 21, 29, .05), 0 2px 10px rgba(22, 21, 29, .04);
  --sh-2: 0 4px 14px rgba(22, 21, 29, .07), 0 14px 34px rgba(22, 21, 29, .06);
  --ease: cubic-bezier(.2, .9, .3, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, sans-serif;
  --w-read: 776px; --w-data: 880px; --w-home: 1280px; --w-shell: 1280px; --w-side: 200px; --w-rail: 300px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111118; --card: #1B1A24; --sunk: #23222E; --line: #2E2D3B;
    --text: #EEEDF4; --sub: #B3B1C4; --weak: #8E8CA2;
    --brand: #9C8CFF; --brand-strong: #B4A8FF; --brand-soft: #2A2550; --brand-ink: #12111A;
    --sun: #FFC24D; --sun-soft: #3A2F17; --sun-ink: #FFC24D;
    --mint: #3CCBB0; --mint-soft: #163631; --rose: #FF7C9C; --rose-soft: #3D1D28; --sky: #6AA5FF; --sky-soft: #18273F;
    --up: #FF6B70; --down: #6A9BFF;
    --q0: #262340; --q1: #352F66; --q2: #4D4397; --q3: #7366D6; --q4: #A89CFF; --q-ink-dark: #EEEDF4; --q-ink-light: #12111A; --qna: #2E2D3B;
    --c5: #B48CFF;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 8px 24px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg: #111118; --card: #1B1A24; --sunk: #23222E; --line: #2E2D3B;
  --text: #EEEDF4; --sub: #B3B1C4; --weak: #8E8CA2;
  --brand: #9C8CFF; --brand-strong: #B4A8FF; --brand-soft: #2A2550; --brand-ink: #12111A;
  --sun: #FFC24D; --sun-soft: #3A2F17; --sun-ink: #FFC24D;
  --mint: #3CCBB0; --mint-soft: #163631; --rose: #FF7C9C; --rose-soft: #3D1D28; --sky: #6AA5FF; --sky-soft: #18273F;
  --up: #FF6B70; --down: #6A9BFF;
  --q0: #262340; --q1: #352F66; --q2: #4D4397; --q3: #7366D6; --q4: #A89CFF; --q-ink-dark: #EEEDF4; --q-ink-light: #12111A; --qna: #2E2D3B;
  --c5: #B48CFF;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 8px 24px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 var(--font); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
a { color: var(--brand); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.muted { color: var(--weak); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 50; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
b, strong { font-weight: 800; }
code { font-family: inherit; font-weight: 700; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hd-in { max-width: var(--w-shell); margin: 0 auto; padding: 0 8px 0 16px; height: 60px; display: flex; align-items: center; gap: 8px; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -.03em; flex: none; }
.logo small { font-size: 12px; font-weight: 600; color: var(--weak); }
.logo-mark { display: block; }
.site-nav { display: none; margin-left: 12px; min-width: 0; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 8px 12px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; color: var(--sub); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { background: var(--sunk); color: var(--text); }
.site-nav a[aria-current] { background: var(--brand-soft); color: var(--brand); }
.hd-sp { flex: 1; }
.iconbtn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--sub); cursor: pointer; flex: none; list-style: none; }
.iconbtn::-webkit-details-marker { display: none; }
.iconbtn:hover { background: var(--sunk); color: var(--text); }
.iconbtn svg, .search-ic { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menu { position: relative; }
.menu[open] > summary { background: var(--sunk); color: var(--text); }
.menu-panel {
  position: absolute; right: 0; top: 52px; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 8px;
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-groups a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.menu-groups a:hover { background: var(--sunk); }
.menu-panel .menu-subs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 0 6px 42px; }
.menu-groups .menu-subs a { display: inline-flex; min-height: 36px; padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--sub); }
.menu-site { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line); margin-top: 6px !important; padding-top: 8px !important; }
.menu-site a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 10px; border-radius: 8px; color: var(--sub); text-decoration: none; font-size: 13px; font-weight: 600; }
.menu-site a:hover { background: var(--sunk); }
.hd-search { max-width: var(--w-read); margin: 0 auto; padding: 0 16px 12px; }
.iconbtn-map { color: var(--mint); }
.iconbtn-map:hover { color: var(--mint); }
.iconbtn-map[aria-current] { background: var(--mint-soft); }
/* the five menus (layout.mjs): in the header from 768px, below that a row under the header that scrolls away */
.phone-nav { border-bottom: 1px solid var(--line); }
.phone-nav ul { display: flex; justify-content: space-between; gap: 2px; list-style: none; margin: 0; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
.phone-nav ul::-webkit-scrollbar { display: none; }
.phone-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-bottom: 2px solid transparent; font-weight: 700; font-size: 14px; letter-spacing: -.02em; color: var(--sub); text-decoration: none; white-space: nowrap; }
.phone-nav a[aria-current] { color: var(--brand); border-bottom-color: var(--brand); }
@media (max-width: 340px) { .phone-nav a { padding: 0 6px; } }
@media (min-width: 768px) {
  .site-nav { display: block; }
  .phone-nav { display: none; }
}

/* ---------------------------------------------------------------- page frame */
/* Phones and tablets: one column (read and tool 776px, data 880px). From 1100px the shell is 1280px wide:
   data pages use all of it (sticky toc column on the left, cards two by two: .content.g2), read pages put the toc
   beside their 776px column, a split tool page (.tool-split) puts the calculator beside its sticky result
   (.content.g-calc). The tool rail sits beside a 776px column from 1024px, beside a split page from 1600px.
   From 1600px the shell is 1440px. */
.page { max-width: var(--w-read); margin: 0 auto; padding: 0 16px; }
.page-data { max-width: var(--w-data); }
.page-home { max-width: var(--w-home); }
.page-tool { max-width: var(--w-shell); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.page-tool > main { min-width: 0; max-width: var(--w-read); width: 100%; margin: 0 auto; }
main { min-width: 0; }
.rail, .toc-side { display: none; }
.rail { padding-top: 56px; }
.rail-in { position: sticky; top: 76px; display: grid; gap: 14px; }
.rail .card { margin: 0; }
@media (min-width: 1024px) {
  .page-tool:not(.no-rail):not(.tool-split) { grid-template-columns: minmax(0, var(--w-read)) var(--w-rail); justify-content: center; }
  .page-tool:not(.no-rail):not(.tool-split) > main { margin: 0; }
  .page-tool:not(.tool-split) > .rail { display: block; }
}
@media (min-width: 1100px) {
  .page-data { max-width: var(--w-shell); }
  .page-tool.tool-split > main { max-width: none; }
  .page.has-side { display: grid; grid-template-columns: var(--w-side) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .page-read.has-side { max-width: calc(var(--w-side) + var(--w-read) + 64px); }
  .has-side > .toc-side { display: block; }
  .has-side .toc { display: none; }
}
/* very wide screens: the shell grows to 1440px (less empty margin); the rail joins a split tool page only here, so
   the result column never gets narrower than it was without the rail */
@media (min-width: 1600px) {
  :root { --w-shell: 1440px; --w-home: 1440px; }
  .page-tool.tool-split:not(.no-rail) { grid-template-columns: minmax(0, 1fr) var(--w-rail); }
  .page-tool.tool-split > .rail { display: block; }
}
/* the toc as a sticky column (layout.mjs sideToc); app.js marks the section in view with aria-current */
.toc-side { position: sticky; top: 76px; margin-top: 52px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 16px; }
.toc-side-h { margin: 0 0 8px 16px; font-size: 12px; font-weight: 800; color: var(--weak); }
.toc-side ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); display: grid; }
.toc-side a { display: block; margin-left: -2px; padding: 7px 8px 7px 14px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--sub); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.toc-side a:hover { color: var(--text); border-left-color: var(--weak); background: var(--sunk); }
.toc-side a[aria-current] { color: var(--brand); border-left-color: var(--brand); background: var(--brand-soft); font-weight: 800; }

/* wide screens: the card grid (layout.mjs arrangeBody). In the HTML the body stays one column in reading order. */
@media (min-width: 1100px) {
  .content.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .content.g2 > * { grid-column: 1 / -1; }
  .content > [data-wide="half"] { grid-column: auto; align-self: stretch; }
  /* the calculator and its result: their own grid, so the sticky result cannot slide over the cards below */
  .split-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr); column-gap: 20px; align-items: start; }
  .split-row > [data-wide="in"] { grid-column: 1; }
  .split-row > [data-wide="out"] { grid-column: 2; position: sticky; top: 76px; align-self: start; }
  /* text keeps a reading measure in wide cards */
  :is(.page-data, .tool-split) :is(.content > p, .content > ul:not([class]), .content > ol:not([class]), .card > p, .card > ul:not([class]), .card-lead, .callout p, .faq-a, .answer p, .dh-lead, .bridge-text) { max-width: 72ch; }
  /* the card is wide enough: a wide table scrolls inside it instead of growing into the toc column */
  main .table-wrap.wide { width: auto; max-width: none; margin-left: 0; }
}
.rail-h { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; gap: 2px; }
.rank-list li { counter-increment: r; }
.rank-list a { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 7px 4px; border-radius: 8px; color: var(--text); text-decoration: none; }
.rank-list a::before { content: counter(r); width: 18px; font-weight: 800; color: var(--brand); text-align: center; flex: none; }
.rank-list a:hover { background: var(--sunk); }
.rail-today a, .rail-today div { display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.rt-l { font-size: 13px; color: var(--weak); }
.rt-v { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.rt-v small { font-size: 14px; margin-left: 2px; }
.rt-c { font-size: 13px; color: var(--sub); }

/* ---------------------------------------------------------------- page head */
.crumbs ol { list-style: none; margin: 0; padding: 16px 0 4px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; font-weight: 600; color: var(--weak); }
.crumbs li + li::before { content: '›'; margin-right: 4px; }
.crumbs a { color: var(--weak); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
h1 { margin: 4px 0 6px; font-size: 24px; line-height: 1.32; font-weight: 800; letter-spacing: -.035em; }
h1 em { font-style: normal; color: var(--brand); }
h2 { font-size: 18px; line-height: 1.4; font-weight: 800; letter-spacing: -.03em; margin: 28px 0 10px; }
h3 { font-size: 16px; line-height: 1.45; font-weight: 800; margin: 18px 0 6px; }
.def { margin: 0 0 4px; color: var(--sub); font-size: 14px; }
.meta { margin: 0; font-size: 12px; color: var(--weak); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.meta a { color: var(--weak); }
.copy-link { font: inherit; font-size: 12px; color: var(--sub); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 10px; cursor: pointer; min-height: 28px; }
.answer { margin: 12px 0 0; padding: 14px 16px; background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1); border-left: 4px solid var(--brand); }
.answer p { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 600; }
.answer b { color: var(--brand); }
.toc ul { display: flex; gap: 6px; overflow-x: auto; list-style: none; margin: 0; padding: 12px 0 4px; scrollbar-width: none; }
.toc ul::-webkit-scrollbar { display: none; }
.toc a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); color: var(--sub); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.toc a:hover { border-color: var(--brand); color: var(--brand); }
@media (min-width: 640px) { h1 { font-size: 28px; } .page-data h1 { font-size: 30px; } }

/* ---------------------------------------------------------------- content and cards */
.content > p, .content > ul, .content > ol { margin: .7em 0; }
.content li { margin: .2em 0; }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1); padding: 18px 16px; margin-top: 14px; }
.card > h2:first-child, .card > .chips-title:first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-lead { margin: -4px 0 12px; color: var(--sub); font-size: 14px; }
.sg-h { margin-top: 36px; }
.btn, .exp button, .exp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover, .exp button:hover { border-color: var(--brand); color: var(--brand); }
.more { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.link-list { padding-left: 1.1em; }
.link-list li .muted { font-size: 13px; }
.updates { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.updates time { color: var(--weak); font-size: 13px; margin-right: 6px; }
.license-text { margin: 8px 0 0; padding: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.5; color: var(--sub); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.callout { border-radius: var(--r-sm); padding: 12px 14px; margin: 12px 0; background: var(--sunk); }
.callout-warn { background: var(--sun-soft); }
.callout-info { background: var(--sky-soft); }
.callout-title { font-weight: 800; margin: 0 0 4px; }
.callout > :last-child { margin-bottom: 0; }
.callout p:first-child:not(.callout-title) { margin-top: 0; }
.badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0; color: var(--sun-ink); background: var(--sun-soft); border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; line-height: 1.5; }
.pill { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); width: max-content; max-width: 100%; }
.pill-up { background: var(--rose-soft); color: var(--up); }
.pill-down { background: var(--sky-soft); color: var(--down); }
.pill-flat, .pill-neutral { background: var(--sunk); color: var(--sub); }
.ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.ic svg { width: 26px; height: 26px; }
.ic-sm { width: 32px; height: 32px; border-radius: 10px; }
.ic-sm svg { width: 20px; height: 20px; }
.c-brand { background: var(--brand-soft); color: var(--brand); }
.c-sun { background: var(--sun-soft); color: #C77D00; }
.c-mint { background: var(--mint-soft); color: var(--mint); }
.c-rose { background: var(--rose-soft); color: var(--rose); }
.c-sky { background: var(--sky-soft); color: var(--sky); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-sun { color: var(--sun); } }
:root[data-theme="dark"] .c-sun { color: var(--sun); }

/* ---------------------------------------------------------------- forms */
.calc-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .seg-field > legend { font-size: 13px; font-weight: 700; color: var(--sub); padding: 0; }
.money { display: flex; align-items: center; gap: 6px; background: var(--sunk); border: 1.5px solid transparent; border-radius: var(--r-sm); height: 56px; padding: 0 14px; transition: border-color .2s, background .2s; min-width: 0; }
.money:focus-within { border-color: var(--brand); background: var(--card); }
.money input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.money .unit { font-weight: 700; color: var(--sub); white-space: nowrap; }
.field.sm .money { height: 48px; }
.field.sm .money input { font-size: 17px; }
.reading { margin: 0; font-size: 12px; color: var(--weak); min-height: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 > * { min-width: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button, .search-chips button, .share-bar button, .seg-inline button {
  font: inherit; font-size: 13px; font-weight: 700; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--sub); cursor: pointer;
}
.presets button:hover, .search-chips button:hover { border-color: var(--brand); color: var(--brand); }
.presets button[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.presets button[data-add] { color: var(--weak); }
.field-help { display: block; font-size: 12px; line-height: 1.5; color: var(--weak); font-weight: 400; }
.seg-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.seg { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); background: var(--sunk); border-radius: var(--r-sm); padding: 4px; gap: 4px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 40px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--sub); }
.seg input:checked + span { background: var(--card); color: var(--text); box-shadow: var(--sh-1); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.seg-inline { display: inline-flex; padding: 3px; gap: 2px; }
.seg-inline button { border: 0; background: transparent; min-height: 36px; border-radius: 9px; }
.seg-inline button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--sh-1); }
form { counter-reset: calc-step; }
fieldset.calc-step { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 4px; min-width: 0; }
fieldset.calc-step:first-of-type { border-top: 0; padding-top: 0; }
fieldset.calc-step > legend { counter-increment: calc-step; display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 8px; font-weight: 800; }
fieldset.calc-step > legend::before { content: counter(calc-step); display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 12px; }
details.calc-more { margin: 4px 0; }
details.calc-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--brand); font-weight: 700; }

/* ---------------------------------------------------------------- result card */
.result-card {
  margin-top: 14px; border-radius: var(--r-lg); padding: 20px 18px;
  background: linear-gradient(160deg, var(--brand-soft) 0%, var(--card) 70%);
  box-shadow: var(--sh-2); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.result-card:focus { outline: none; }
.r-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--sub); }
.r-big { margin: 4px 0 8px; line-height: 1.1; }
.r-big strong { font-size: 44px; font-weight: 800; letter-spacing: -.045em; color: var(--brand); font-variant-numeric: tabular-nums; }
.r-big small { font-size: 20px; font-weight: 800; margin-left: 2px; color: var(--text); }
.r-pill { margin: 0; }
.verdict { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 700; }
.verdict i { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); flex: none; }
.r-note { margin: 12px 0 0; font-size: 12px; color: var(--weak); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.kpi { background: var(--card); border-radius: var(--r-sm); padding: 12px; border: 1px solid var(--line); min-width: 0; }
.kpi.wide { grid-column: 1 / -1; }
.kpi .k { font-size: 12px; color: var(--weak); font-weight: 700; }
.kpi .v { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.kpi .s { font-size: 11px; color: var(--weak); }
.kpi-bar { height: 6px; border-radius: 9px; background: var(--sunk); margin-top: 8px; overflow: hidden; }
.kpi-bar i { display: block; height: 100%; background: var(--rose); border-radius: 9px; }
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.share-title { font-size: 13px; font-weight: 700; color: var(--sub); margin-right: 4px; }
.share-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.share-actions .share-title { grid-column: 1 / -1; }
.share-bar button { min-height: 44px; color: var(--text); }
.share-bar button.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.share-status { grid-column: 1 / -1; font-size: 12px; color: var(--brand); min-height: 0; }
.share-status:empty { display: none; }
@media (min-width: 640px) {
  .r-big strong { font-size: 52px; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
/* the result card sizes its own boxes (it may sit in a narrow column beside the form): numbers never break inside */
.result-card { container-type: inline-size; }
.kpi .v, .r-big { overflow-wrap: normal; }
@container (max-width: 500px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .r-big strong { font-size: 44px; }
}
@container (max-width: 280px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.answer-box { margin: 14px 0; padding: 14px 16px; background: var(--brand-soft); border-radius: var(--r); }
.answer-box p { margin: 0; font-weight: 600; }
.answer-box b { color: var(--brand); }
.answer-box .answer-note { margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--sub); }

/* ---------------------------------------------------------------- breakdown, formula, amounts */
.stack { display: flex; height: 14px; border-radius: 8px; overflow: hidden; margin: 4px 0 10px; background: var(--sunk); }
.stack i { display: block; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--sub); }
.stack-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; background: var(--tc); }
.t-brand { --tc: var(--brand); } .t-mint { --tc: var(--mint); } .t-sky { --tc: var(--sky); } .t-rose { --tc: var(--rose); } .t-sun { --tc: var(--sun); }
.stack i { background: var(--tc); }
.formula { background: var(--sunk); border-radius: var(--r-sm); padding: 14px; font-size: 14px; line-height: 1.75; }
.assume { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--sub); }
.assume li::before { content: '✓'; color: var(--mint); font-weight: 800; margin-right: 8px; }
.amount-grid ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.amount-grid a { display: block; background: var(--sunk); border-radius: 10px; padding: 10px 6px; text-align: center; font-size: 13px; font-weight: 700; min-height: 44px; color: var(--text); text-decoration: none; }
.amount-grid a span { display: block; font-size: 12px; color: var(--weak); font-weight: 600; }
.amount-grid a:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.amount-grid a[aria-current] { background: var(--brand); color: var(--brand-ink); }
.amount-grid a[aria-current] span { color: inherit; opacity: .8; }
@media (min-width: 640px) { .amount-grid ul { grid-template-columns: repeat(6, 1fr); } }

/* ---------------------------------------------------------------- FAQ, sources, related */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 12px 28px 12px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 15px; font-weight: 700; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--weak); border-bottom: 2px solid var(--weak); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-a { color: var(--sub); font-size: 14px; padding-bottom: 12px; }
.faq-a > :first-child { margin-top: 0; }
.faq-a > :last-child { margin-bottom: 0; }
.sources { font-size: 14px; }
.src-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.src-list li { display: flex; gap: 10px; align-items: flex-start; }
.src-list .tag, .tag { flex: none; font-size: 11px; font-weight: 800; color: var(--brand); background: var(--brand-soft); border-radius: 6px; padding: 2px 6px; margin-top: 2px; }
.src-list a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); }
.src-list a:hover { text-decoration-color: var(--brand); }
.src-card { display: grid; grid-template-columns: 76px 1fr; gap: 8px 12px; margin: 0 0 12px; font-size: 14px; }
.src-card dt { color: var(--weak); font-weight: 700; font-size: 13px; }
.src-card dd { margin: 0; }
.src-date { font-size: 12px; margin: 10px 0 0; }
.report { font-size: 12px; margin: 6px 0 0; }
.related ul, .next ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.related a, .next a { display: block; height: 100%; background: var(--sunk); border-radius: var(--r-sm); padding: 12px; font-size: 14px; font-weight: 700; line-height: 1.35; min-height: 60px; color: var(--text); text-decoration: none; }
.related a:hover, .next a:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.related a span { display: block; font-size: 12px; color: var(--weak); font-weight: 600; margin-top: 2px; }
/* 이어서 볼 숫자 (site/nextup.mjs): the middle of the page, one column on phones, three in a row from 640px */
.nextup { margin: 16px 0; }
.nextup h2 { margin: 0 0 8px; font-size: 15px; color: var(--sub); }
.nextup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nextup a { display: block; height: 100%; padding: 12px 14px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.nextup a:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.nextup a span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--sub); }
@media (min-width: 640px) { .nextup ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.next a span { display: block; font-size: 13px; color: var(--brand); font-weight: 800; margin-top: 2px; }
@media (min-width: 640px) { .related ul { grid-template-columns: repeat(3, 1fr); } .next ul { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- chips */
.chips-title { font-size: 16px; margin: 0 0 8px; }
.chips-nav { margin: 14px 0; }
.chip-list, .amount-chips ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips-nav.scroll .chip-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-list a, .amount-chips a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 10px; background: var(--sunk); color: var(--sub); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip-list a:hover, .amount-chips a:hover { background: var(--brand-soft); color: var(--brand); }
.chip-list a[aria-current], .amount-chips a[aria-current] { background: var(--brand); color: var(--brand-ink); }
.amount-chips { margin: 14px 0; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--sh-1); text-decoration: none; color: var(--text); font-weight: 700; }
.pager a:last-child:not(:first-child) { margin-left: auto; text-align: right; }
.cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); font-weight: 800; text-decoration: none; }
.bridge { margin: 14px 0; }
.bridge a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 16px; min-height: 44px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh-1); color: var(--text); text-decoration: none; border-left: 4px solid var(--brand); }
.bridge-title { color: var(--brand); }
.bridge-text { flex: 1 1 14em; }
.bridge-go { color: var(--brand); font-weight: 800; white-space: nowrap; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; margin: 12px 0; border-radius: var(--r-sm); background: var(--card); container-type: inline-size; }
.table-wrap:focus-visible { outline: 2px solid var(--brand); }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
/* a wide table scrolls inside .table-wrap; its caption (source and date) stays in the visible width */
caption { caption-side: top; text-align: left; font-size: 12px; color: var(--weak); padding: 0 4px 8px; position: sticky; left: 0; max-width: calc(100vw - 40px); max-width: 100cqw; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
thead th { font-size: 12px; color: var(--weak); font-weight: 700; background: var(--card); }
tbody th { font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }
.num { text-align: right; }
tbody th[scope=row], td:not(.num) { white-space: normal; min-width: 6em; }
.table-wrap tbody th[scope=row] { position: sticky; left: 0; z-index: 1; background: var(--card); }
.table-wrap.tall { max-height: 70vh; overflow: auto; }
.table-wrap.tall thead th { position: sticky; top: 0; z-index: 2; }
@media (min-width: 900px) { .table-wrap.wide { width: var(--tw); max-width: calc(100vw - 32px); margin-left: calc(50% - var(--tw) / 2); } }
.bar-cell { position: relative; min-width: 7em; }
.bar-cell .bar { position: absolute; left: 4px; top: 50%; height: 60%; transform: translateY(-50%); width: calc(var(--w, 0%) - 8px); max-width: calc(100% - 8px); background: var(--brand-soft); border-radius: 5px; }
.bar-cell .bar-v { position: relative; }
tr.total > * { font-weight: 800; border-top: 2px solid var(--text); }
.kv { margin: 0; display: grid; }
.kv > div { display: grid; grid-template-columns: minmax(6em, 34%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--weak); font-weight: 700; font-size: 13px; }
.kv dd { margin: 0; }

/* ---------------------------------------------------------------- data page */
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.mchips span { font-size: 12px; font-weight: 700; color: var(--sub); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px; }
.mchips .st { background: var(--sun-soft); border-color: transparent; color: var(--sun-ink); }
.data-hero { display: grid; gap: 14px; margin-top: 14px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 20px 18px; border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.dh-main > p { margin: 0; }
.hl { font-size: 13px; font-weight: 700; color: var(--sub); }
.hv { line-height: 1; margin: 6px 0 !important; }
.hv strong { font-size: 56px; font-weight: 800; letter-spacing: -.05em; color: var(--brand); }
.hv small { font-size: 22px; font-weight: 800; margin-left: 4px; }
.dh-delta { margin-top: 10px !important; }
.dh-lead { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 600; }
.dh-lead b { color: var(--brand); }
.data-hero .kpis { margin: 0; grid-template-columns: repeat(3, 1fr); }
.data-hero .kpi { background: var(--sunk); border: 0; padding: 10px 12px; }
.data-hero .kpi .v { font-size: 17px; }
@media (min-width: 720px) {
  .data-hero { grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; padding: 24px; }
  .data-hero .kpis { grid-column: 1 / -1; }
  .hv strong { font-size: 72px; }
}
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rule; }
.rules li { counter-increment: rule; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.rules li::before { content: counter(rule); flex: none; width: 26px; height: 26px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 13px; display: grid; place-items: center; margin-top: 1px; }
.records { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.records > div { background: var(--sunk); border-radius: var(--r-sm); padding: 12px; }
.records .k { font-size: 12px; color: var(--weak); font-weight: 700; }
.records .v { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.records .s { font-size: 12px; color: var(--sub); }
@media (min-width: 720px) { .records { grid-template-columns: repeat(4, 1fr); } }
.chart-toggle .seg-inline { margin-bottom: 8px; }
.cnote { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--weak); margin: 6px 0 0; }
.cnote i { display: inline-block; width: 16px; border-top: 2.5px solid var(--brand); vertical-align: middle; margin-right: 5px; }
.cnote i.d { border-top-style: dashed; }
.cnote i.r { border-top: 2px dashed var(--rose); }
.exp { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.exp:not(:has(> :not([hidden]))) { display: none; }
.mapwrap { display: grid; gap: 16px; }
@media (min-width: 720px) { .mapwrap { grid-template-columns: minmax(0, 320px) 1fr; align-items: start; } }
@media (min-width: 1100px) { .mapwrap { grid-template-columns: minmax(0, 460px) 1fr; column-gap: 24px; } }

/* ---------------------------------------------------------------- charts and maps (server SVG) */
/* Owner: charts (svg.mjs, ui.mjs stackBar/chartLegend, client/chart.mjs). Colours are tokens only (light/dark). */
.chart { margin: 8px 0; position: relative; }
.chart figcaption { font-size: 12px; color: var(--weak); margin-top: 6px; }
/* A chart fills its card but is shown at most about 1.3 × its viewBox width (svg.mjs CHART_MAX_SCALE), so its
   11-unit labels stay at most about 14px: the cap follows the first digit of the viewBox width (360 → 470px,
   560 → 730px, 680 → 890px, 960 → 1250px). Wide cards show the 960-wide copy (cx, below) instead of a stretched one. */
.chart-svg { width: 100%; max-width: 470px; height: auto; display: block; overflow: visible; }
.chart-svg[viewBox^="0 0 4"] { max-width: 600px; }
.chart-svg[viewBox^="0 0 5"] { max-width: 730px; }
.chart-svg[viewBox^="0 0 6"] { max-width: 890px; }
.chart-svg[viewBox^="0 0 7"] { max-width: 1000px; }
.chart-svg[viewBox^="0 0 8"] { max-width: 1120px; }
.chart-svg[viewBox^="0 0 9"] { max-width: 1250px; }
.chart-svg text { font-size: 11px; font-family: var(--font); fill: var(--weak); }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-svg .baseline, .chart-svg .tick { stroke: color-mix(in srgb, var(--line) 55%, var(--weak)); stroke-width: 1; }
.chart-svg .line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .prov { stroke-dasharray: 4 5; }
.chart-svg .area { stroke: none; }
.chart-svg .ga { stop-color: var(--c0); stop-opacity: .26; }
.chart-svg .gb { stop-color: var(--c0); stop-opacity: 0; }
.chart-svg .ref { stroke: var(--rose); stroke-dasharray: 5 4; stroke-width: 1.5; }
.chart-svg .med { stroke: var(--sub); stroke-dasharray: 3 3; stroke-width: 1.2; }
.chart-svg .ref-t { fill: var(--rose); font-weight: 700; }
.chart-svg path.pt.dot { fill: none; stroke-width: 4.6; stroke-linecap: round; } /* zero-length round caps = dots */
.chart-svg circle.o { fill: var(--card); stroke-width: 2; }
.chart-svg .extreme circle { fill: var(--card); stroke-width: 2; }
.chart-svg .extreme.hi circle { stroke: var(--sub); }
.chart-svg .extreme.lo circle { stroke: var(--down); }
.chart-svg .extreme text, .chart-svg .ref-t { font-weight: 700; paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.chart-svg .extreme.hi text { fill: var(--sub); }
.chart-svg .extreme.lo text { fill: var(--down); }
.chart-svg .legend line { stroke-width: 3; stroke-linecap: round; }
.chart-svg .legend text { fill: var(--sub); font-weight: 600; }
.chart-svg .latest circle:not(.o) { stroke: var(--card); stroke-width: 2.5; }
.s0 { stroke: var(--c0); } .dot.s0, .t0 { fill: var(--c0); }
.s1 { stroke: var(--c1); } .dot.s1, .t1 { fill: var(--c1); }
.s2 { stroke: var(--c2); } .dot.s2, .t2 { fill: var(--c2); }
.s3 { stroke: var(--c3); } .dot.s3, .t3 { fill: var(--c3); }
.s4 { stroke: var(--c4); } .dot.s4, .t4 { fill: var(--c4); }
.s5 { stroke: var(--c5); } .dot.s5, .t5 { fill: var(--c5); }
/* pill labels: latest value (series colour, darkened in light mode and lightened in dark mode for contrast),
   reference (outlined rose), median and '내 위치' tags (ink) */
.chart-svg .pl text { font-weight: 800; fill: var(--card); }
.chart-svg .latest .pl text { font-size: 12px; }
.chart-svg .pl.k0 rect { fill: color-mix(in srgb, var(--c0) 76%, var(--text)); }
.chart-svg .pl.k1 rect { fill: color-mix(in srgb, var(--c1) 76%, var(--text)); }
.chart-svg .pl.k2 rect { fill: color-mix(in srgb, var(--c2) 76%, var(--text)); }
.chart-svg .pl.k3 rect { fill: color-mix(in srgb, var(--c3) 76%, var(--text)); }
.chart-svg .pl.k4 rect { fill: var(--card); stroke: var(--c4); stroke-width: 1.5; }
.chart-svg .pl.k4 text { fill: var(--sun-ink); }
.chart-svg .pl.k5 rect { fill: color-mix(in srgb, var(--c5) 76%, var(--text)); }
.chart-svg .pl.ref rect { fill: var(--card); stroke: var(--rose); stroke-width: 1.2; }
.chart-svg .pl.ref text { fill: var(--rose); }
.chart-svg .pl.med rect, .chart-svg .pl.tag rect { fill: var(--text); }
.chart-svg .pl.tag.in rect { fill: var(--card); }
.chart-svg .pl.tag.in text { fill: var(--brand-strong); }
/* hover read-out (client/chart.mjs) */
.chart-svg .hov { display: none; pointer-events: none; }
.chart-svg .hov.on { display: inline; }
.chart-svg .xh { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .hd { fill: var(--card); stroke-width: 2.5; }
.chart[data-d] .chart-svg { touch-action: pan-y; cursor: crosshair; }
.chart-svg:focus-visible, .tile-map:focus-visible, svg.map:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.ctip {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; min-width: 64px; max-width: 260px;
  padding: 8px 10px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--sh-2); font-size: 12px; line-height: 1.5; opacity: 0; visibility: hidden; transition: opacity .12s;
}
.ctip.on { opacity: 1; visibility: visible; }
.ctip .ct { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctip .cr { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ctip .cs { color: var(--sub); }
.ctip .cr strong { margin-left: auto; padding-left: 6px; font-weight: 800; }
.ctip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c0); }
.ctip i.k1 { background: var(--c1); } .ctip i.k2 { background: var(--c2); } .ctip i.k3 { background: var(--c3); }
.ctip i.k4 { background: var(--c4); } .ctip i.k5 { background: var(--c5); }
/* bars: a light track, the main (highlighted) bar in brand colour and the context lighter; zero line darker */
.bar-chart { --bar: var(--q3); --bar-ctx: var(--q2); } /* q3 ≈ 3.4:1 on the track in both themes; q2 context ≈ 2.8:1 to brand */
.bar-svg .trk { fill: var(--sunk); }
.bar-svg .b { fill: var(--bar); transform-box: fill-box; transform-origin: 0 50%; transition: opacity .15s; }
.has-hl .bar-svg .b { fill: var(--bar-ctx); }
.bar-svg .bar.hl .b { fill: var(--brand); }
.bar-h text { font-size: 12px; }
.bar-svg .pl text { font-size: 11px; }
.bar-svg .bv { fill: var(--text); font-weight: 700; }
.has-hl .bar-svg .bar:not(.hl) .bv { fill: var(--sub); font-weight: 600; }
.bar-svg .bar.hl .bv, .bar-svg .bar.hl .bl { fill: var(--brand); font-weight: 800; }
.bar-svg .bl { fill: var(--sub); }
.bar-svg .x { display: none; }
.bar-svg .zero { stroke: var(--sub); stroke-width: 1.4; }
.bar-svg .base { stroke: var(--line); stroke-width: 1; }
.bar-chart.hov .bar:not(.on) .b { opacity: .45; }
.bar-chart.hov .bar.on .bl { fill: var(--text); }
.bar-h .neg .b { transform-origin: 100% 50%; }
.bar-v .b { transform-origin: 50% 100%; }
.bar-v .neg .b { transform-origin: 50% 0; }
.chart.grow .bar-svg .b { transition: transform .7s var(--ease), opacity .15s; }
.chart.grow .bar-svg .bv { transition: opacity .3s .4s; }
.chart.pre .bar-h .b { transform: scaleX(0); }
.chart.pre .bar-v .b { transform: scaleY(0); }
.chart.pre .bar-svg .bv { opacity: 0; }
svg.map, .tile-map { width: 100%; height: auto; display: block; }
.tile-map { max-width: 320px; margin: 0 auto; }
/* wide screens: maps grow with the card, but a whole map stays on the screen (the SVG keeps its proportions) */
svg.map { max-height: min(80vh, 820px); }
@media (min-width: 1100px) { .tile-map { max-width: 420px; } }
.tile-map text { font-family: var(--font); }
.tile-map .tn { font-size: 12px; font-weight: 700; }
.tile-map .tv { font-size: 15px; font-weight: 800; }
.tile-map .tile.me rect { stroke: var(--text); stroke-width: 2.5; }
.tile-map a:hover rect, .tile-map .tile.on rect, svg.map a:hover .region, svg.map .region.on { stroke: var(--text); stroke-width: 2; }
.q0 rect, .region.q0 { fill: var(--q0); } .q1 rect, .region.q1 { fill: var(--q1); } .q2 rect, .region.q2 { fill: var(--q2); }
.q3 rect, .region.q3 { fill: var(--q3); } .q4 rect, .region.q4 { fill: var(--q4); } .region.qna { fill: var(--qna); }
.q0 text, .q1 text, .q2 text { fill: var(--q-ink-dark); } .q3 text, .q4 text { fill: var(--q-ink-light); }
.region { stroke: var(--card); stroke-width: .8; }
svg.map .map-label { fill: var(--text); font-size: 11px; }
.map-legend { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--weak); margin-top: 8px; }
.map-legend .sw { width: 28px; height: 10px; border-radius: 3px; display: inline-block; }
.map-legend .q0 { background: var(--q0); } .map-legend .q1 { background: var(--q1); } .map-legend .q2 { background: var(--q2); }
.map-legend .q3 { background: var(--q3); } .map-legend .q4 { background: var(--q4); }
.sparkline { display: block; width: 100%; max-width: 240px; height: 32px; margin-top: 6px; }
.sparkline polyline { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sparkline circle { fill: var(--brand); }
/* 100% ratio band (ui.mjs stackBar): rounded band with thin gaps, legend with the shares */
.stack { height: 16px; border-radius: var(--r-pill); gap: 2px; background: transparent; }
.stack i { min-width: 3px; }
.stack-legend { gap: 6px 14px; font-size: 13px; }
.stack-legend b { color: var(--text); font-weight: 800; }
.stack-legend small { color: var(--weak); font-size: 12px; }
.t-gray { --tc: var(--weak); }
.cnote i.m { border-top: 2px dashed var(--sub); }
.cnote i.o { width: 9px; height: 9px; border: 2px solid var(--brand); border-radius: 50%; }

/* ---------------------------------------------------------------- stat cards (indicator grid) */
.stat-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
.stat-card { position: relative; padding: 14px 16px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh-1); }
.stat-card:hover { box-shadow: var(--sh-2); }
.stat-card .stat-title { font-size: 14px; margin: 0; line-height: 1.4; }
.stat-card .stat-title a { color: var(--text); text-decoration: none; }
.stat-card .stat-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }
.stat-q { margin: 2px 0 0; font-size: 13px; color: var(--weak); }
.stat-value { margin: 4px 0 0; line-height: 1.2; }
.stat-value strong { font-size: 26px; letter-spacing: -.03em; }
.stat-unit { margin-left: 2px; font-size: 14px; color: var(--sub); font-weight: 700; }
.stat-delta { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.stat-up { color: var(--up); } .stat-down { color: var(--down); } .stat-flat { color: var(--weak); }
.stat-meta { margin: 4px 0 0; font-size: 12px; color: var(--weak); }
@media (min-width: 640px) { .stat-cards { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- site search */
.site-search { position: relative; margin: 14px 0; }
.site-search > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.search-field { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 0 6px 0 14px; height: 48px; box-shadow: var(--sh-1); transition: border-color .2s; }
.search-field:focus-within { border-color: var(--brand); }
.search-ic { flex: none; color: var(--weak); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.search-field input::placeholder { color: var(--weak); }
.search-field input::-webkit-search-cancel-button { cursor: pointer; }
.search-go { height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700; cursor: pointer; flex: none; }
.search-hero { margin: 0; }
.search-hero .search-field { height: 56px; border-radius: var(--r); padding: 0 8px 0 16px; }
.search-compact { margin: 0; }
.search-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qchips { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 12px 0 2px; margin: 0; scrollbar-width: none; }
.qchips::-webkit-scrollbar { display: none; }
.qchip { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); font: inherit; font-size: 13px; font-weight: 600; color: var(--sub); text-decoration: none; cursor: pointer; white-space: nowrap; }
.qchip b { color: var(--brand); margin-right: 4px; }
.qchip:hover { border-color: var(--brand); color: var(--brand); }
.search-results { position: absolute; left: 0; right: 0; z-index: 15; list-style: none; margin: 6px 0 0; padding: 4px; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); box-shadow: var(--sh-2); }
.search-results li { margin: 0; }
.search-results a { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.search-results [aria-selected=true] a, .search-results a:hover { background: var(--brand-soft); }
.search-results .r-sec { flex: none; font-size: 12px; color: var(--weak); }
.search-status { margin: 6px 0 0; font-size: 13px; }
.search-status:empty { display: none; }

/* ---------------------------------------------------------------- home */
.hero { padding: 28px 0 8px; }
.hero h1 { margin: 0; font-size: 26px; line-height: 1.3; letter-spacing: -.035em; }
.hero-lead { margin: 6px 0 16px; color: var(--sub); font-size: 15px; }
.main-home .content > .sec, .main-home .trust { margin-top: 32px; }
.content > .sec { margin-top: 28px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-h h2 { margin: 0; font-size: 19px; }
.sec-h a { font-size: 13px; color: var(--weak); font-weight: 600; padding: 8px 0; text-decoration: none; }
.sec-aside { font-size: 13px; color: var(--weak); font-weight: 600; letter-spacing: 0; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; background: var(--card); border-radius: var(--r); padding: 14px; box-shadow: var(--sh-1); min-height: 72px; color: var(--text); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.tile .rank { position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 800; color: var(--weak); }
.tile-text { min-width: 0; }
.tile .t { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
.tile .s { display: block; font-size: 12px; color: var(--weak); margin-top: 2px; }
.feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fc { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 6px; min-height: 132px; color: var(--text); text-decoration: none; min-width: 0; }
a.fc:hover { box-shadow: var(--sh-2); }
.fc .lab { font-size: 12px; font-weight: 700; color: var(--weak); display: flex; align-items: center; gap: 6px; }
.fc .lab i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; flex: none; }
.fc .big { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.fc .big small { font-size: 15px; font-weight: 700; margin-left: 2px; }
.fc .cap { font-size: 13px; color: var(--sub); line-height: 1.45; }
.fc .src { margin-top: auto; font-size: 11px; color: var(--weak); }
.fc .meter { display: block; height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.fc .meter i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.fc.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; background: linear-gradient(135deg, #5B47E0 0%, #4433C2 100%); color: #fff; }
.fc.wide .fc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc.wide .lab, .fc.wide .cap { color: rgba(255, 255, 255, .85); }
.fc.wide .lab i { background: var(--sun); }
.fc.wide .big-q { font-size: 21px; line-height: 1.3; }
.fc.wide .go { margin-left: auto; flex: none; height: 44px; padding: 0 16px; border-radius: 12px; background: #fff; color: #4433C2; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
/* 내 연봉은 몇 등 (home.mjs quickRank) */
.quick { margin-top: 20px; padding: 18px 16px; border-radius: var(--r); background: linear-gradient(135deg, #5B47E0 0%, #4433C2 100%); color: #fff; }
.quick h2 { margin: 0 0 12px; font-size: 19px; line-height: 1.35; letter-spacing: -.03em; }
.quick-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.quick-field { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: 12px; background: #fff; color: #1B1B26; }
.quick-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 20px; font-weight: 800; }
.quick-field input::placeholder { color: #A5A5B4; font-weight: 700; }
.quick-field:focus-within { box-shadow: 0 0 0 3px var(--sun); }
.quick-field span { flex: none; font-size: 14px; font-weight: 700; color: #6B6B7B; }
.quick-result { margin-top: 12px; }
.quick-result b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.quick-result p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.quick-result ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.quick-result a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; background: #fff; color: #4433C2; font-size: 14px; font-weight: 800; text-decoration: none; }
.quick-note { margin: 8px 0 0; font-size: 12px; color: rgba(255, 255, 255, .78); }
.quick-links { display: flex; flex-wrap: wrap; gap: 2px 14px; list-style: none; margin: 8px 0 0; padding: 0; }
.quick-links a { display: inline-flex; align-items: center; min-height: 36px; color: #fff; font-size: 13px; font-weight: 700; }
/* phones: the first 4 cards of 오늘의 숫자, and one line of chips per 전체 분야 card that scrolls sideways */
@media (max-width: 639px) {
  .main-home .feed > :nth-child(n+5) { display: none; }
  .main-home .cats { grid-template-columns: minmax(0, 1fr); } /* a line of chips must not widen the card, or the whole page */
  .main-home .cat ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .main-home .cat ul::-webkit-scrollbar { display: none; }
  .main-home .cat li a { white-space: nowrap; }
  /* the footer lists every hub on larger screens; on phones the 10 sections are enough (each page lists its hubs) */
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .foot-nav .foot-title { margin: 0; }
  .foot-nav .foot-title a { display: flex; align-items: center; min-height: 40px; }
  .foot-group ul { display: none; }
}
@media (min-width: 960px) {
  .quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 24px; }
  .quick h2 { grid-column: 1; margin: 0 0 4px; font-size: 22px; }
  .quick-form { grid-column: 2; grid-row: 1 / span 3; }
  .quick-result { grid-column: 2; }
  .quick-note, .quick-links { grid-column: 1; }
}
.cats { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cat { background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px; }
.cat-h { margin: 0 0 10px; }
.cat-h a { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.cat-h .t { display: block; font-weight: 800; font-size: 16px; }
.cat-h .n { display: block; font-size: 12px; color: var(--weak); font-weight: 600; }
.cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cat li a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 10px; background: var(--sunk); font-size: 13px; font-weight: 600; color: var(--sub); text-decoration: none; }
.cat li a:hover { background: var(--brand-soft); color: var(--brand); }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh-1); color: var(--text); text-decoration: none; height: 100%; }
.row .q { flex: 1; font-weight: 600; font-size: 14px; line-height: 1.4; min-width: 0; }
.row .q span { display: block; font-size: 12px; color: var(--weak); font-weight: 500; }
.row .v { font-weight: 800; font-size: 17px; white-space: nowrap; }
.row .sparkline { width: 64px; height: 28px; flex: none; margin: 0; }
.trust { margin-top: 32px; padding: 20px; }
.trust h2 { margin: 0 0 12px; font-size: 17px; }
.trust ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.trust li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--sub); line-height: 1.5; }
.trust li b { color: var(--text); }
.trust p { margin: 12px 0 0; font-size: 14px; font-weight: 700; }
@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .feed { grid-template-columns: repeat(3, 1fr); }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 32px; }
}
@media (min-width: 960px) {
  .hero { padding: 44px 0 8px; max-width: 720px; }
  .hero + .content > .site-search, .hero + .content > .qchips { max-width: 720px; }
  .tiles { grid-template-columns: repeat(5, 1fr); }
  .tile { flex-direction: column; align-items: flex-start; min-height: 120px; }
  .feed { grid-template-columns: repeat(4, 1fr); }
  .fc.wide { grid-column: span 2; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .strip { grid-template-columns: repeat(3, 1fr); }
}
/* wide screens (1280px shell): a bigger head, more tiles and cards a row (home.mjs counts fill whole rows) */
@media (min-width: 1100px) {
  .hero { padding: 56px 0 12px; max-width: 920px; }
  .hero h1 { font-size: 40px; }
  .hero-lead { font-size: 17px; margin-bottom: 20px; }
  .hero + .content > .site-search, .hero + .content > .qchips { max-width: 920px; }
  .feed { grid-template-columns: repeat(6, 1fr); }
  .fc.wide { grid-column: 1 / -1; }
  .cats { grid-template-columns: repeat(5, 1fr); }
  .main-home .content > .sec, .main-home .trust { margin-top: 40px; }
}

/* ---------------------------------------------------------------- ads, footer */
.ad-slot { min-height: 250px; margin: 14px 0; }
.site-footer { margin-top: 40px; border-top: 1px solid var(--line); color: var(--weak); font-size: 12px; line-height: 1.7; padding: 24px 0 40px; }
.ft-in { max-width: var(--w-home); margin: 0 auto; padding: 0 16px; }
.site-footer a { color: var(--sub); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.foot-nav { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 18px; }
.foot-title { font-weight: 800; color: var(--text); margin: 0 0 4px; font-size: 13px; }
.foot-group ul, .foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; font-weight: 600; }
.foot-note { margin: 4px 0 0; }

/* ---------------------------------------------------------------- phones: result bar */
.result-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px;
  background: var(--text); color: var(--bg); box-shadow: var(--sh-2);
}
.result-bar > div { min-width: 0; display: grid; }
.result-bar-label { font-size: 12px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-bar-value { font-size: 18px; font-weight: 800; white-space: nowrap; }
.result-bar-go { margin-left: auto; flex: none; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; border-radius: 10px; padding: 0 14px; min-height: 40px; display: grid; place-items: center; text-decoration: none; }
@media (min-width: 1024px) { .result-bar { display: none !important; } }
.layout-tool .site-footer { padding-bottom: 96px; }
@media (min-width: 1024px) { .layout-tool .site-footer { padding-bottom: 40px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media print {
  .site-header, .site-footer, .rail, .result-bar, .ad-slot, .share-bar, .presets, .site-search, .qchips, .toc, .toc-side, .chips-nav, .amount-chips, .amount-grid, .bridge, .copy-link, .skip, .crumbs, .exp, .seg-inline { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .card, .result-card, .data-hero, .answer { box-shadow: none; border: 1px solid #999; background: #fff; }
  a { color: #000; }
  .table-wrap { overflow: visible; }
  th, td { white-space: normal; }
  .sources a::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
}

/* Choropleth colour steps with value ranges (readable without hover). */
.map-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 8px 0 0; padding: 0; font-size: 12px; color: var(--weak); }
.map-steps li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.map-steps .sw { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.map-steps .q0 { background: var(--q0); } .map-steps .q1 { background: var(--q1); } .map-steps .q2 { background: var(--q2); }
.map-steps .q3 { background: var(--q3); } .map-steps .q4 { background: var(--q4); }

/* Wide charts carry a 360-wide copy (svg.mjs withNarrow, class cn) and, from 560 wide, a 960-wide copy (cx). The
   figure is a size container, so the copy that fits the figure shows: phones and half-width cards (< 540px) get cn,
   full-width cards on wide screens (≥ 880px) get cx, the rest the module's own width (cw). Labels stay 10–14px. */
.chart:has(.chart-svg.cn) { container-type: inline-size; }
.chart-svg.cn, .chart-svg.cx { display: none; }
/* the phone copy is laid out for 13-unit axis labels (svg.mjs NARROW_AXIS_PX): about 11px on a 375px phone */
.chart-svg.cn .axis text { font-size: 13px; }
@container (max-width: 539px) {
  .chart-svg.cw { display: none; }
  .chart-svg.cn { display: block; }
}
/* in a half-width card the phone copy is drawn larger: its axis labels go back to the normal size */
@container (min-width: 400px) { .chart-svg.cn .axis text { font-size: 11px; } }
@container (min-width: 880px) {
  .chart-svg.cw:has(~ .chart-svg.cx) { display: none; }
  .chart-svg.cx { display: block; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 599px) { .chart-svg.cw { display: none; } .chart-svg.cn { display: block; } }
}
/* a horizontal bar chart drawn 360 wide (explicit width) is not blown up to the card: labels stay near body size */
.chart-svg.bar-h:not(.cn)[viewBox^="0 0 3"] { max-width: 440px; }
/* the phone copy of a bar chart (12-unit labels) in a half-width card: at most 1.15 × (labels about 14px, not 15.6) */
.chart-svg.bar-h.cn { max-width: 414px; }

/* Big hero number: the unit stays on the number's line; long numbers shrink instead of wrapping. */
.hv strong, .hv small { white-space: nowrap; }
.hv strong { font-size: clamp(36px, 12vw, 56px); }
@media (min-width: 720px) { .hv strong { font-size: 72px; } }

/* Home tiles on phones: icon above the text so titles get the full tile width; words never break mid-word. */
.tile .t, .tile .s { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 419px) {
  .tile { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Two fields side by side, stacked on phones when a field needs its full width (e.g. a month picker). */
@media (max-width: 479px) { .row2.row2-stack { grid-template-columns: 1fr; } }

/* ---- explorer (탐색 표: src/site/explorer.mjs + client/explorer.mjs; tokens only, light and dark) */
.explorer { margin: 12px 0; }
.xp-tools { display: grid; gap: 10px; margin: 0 0 6px; }
.xp-search > label, .xp-filter > label, .xp-flabel { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 4px; }
.xp-search .search-field, .xp-jump .search-field { height: 46px; }
.xp-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xp-filter-chips .xp-flabel { flex-basis: 100%; margin: 0; }
.xp-chip { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--sub); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.xp-chip:hover { border-color: var(--brand); color: var(--brand); }
.xp-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.xp-filter select { width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); font: inherit; font-size: 15px; }
.xp-filter select:focus-visible { border-color: var(--brand); }
.xp-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--sub); cursor: pointer; }
.xp-toggle input { width: 20px; height: 20px; accent-color: var(--brand); }
.xp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 28px; }
.xp-status { margin: 0; font-size: 13px; font-weight: 700; color: var(--sub); }
.xp-reset { min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--sunk); color: var(--sub); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.xp-reset:hover { color: var(--brand); }
.xp-hint { margin: 0; font-size: 13px; }
@media (min-width: 720px) {
  .explorer .xp-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .explorer .xp-search, .explorer .xp-filter-chips, .explorer .xp-bar, .explorer .xp-hint { grid-column: 1 / -1; }
  .xp-fpanel { display: contents; }
  .xp-ftoggle { display: none; }
}
/* phones: search, one scrolling row of chips and the status line; selects, 연도 and toggles fold into '조건 더 보기' */
@media (max-width: 719px) {
  .explorer .xp-tools { gap: 8px; }
  .xp-filter-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
  .card .xp-filter-chips { margin: 0 -16px; padding: 2px 16px; }
  .xp-filter-chips::-webkit-scrollbar { display: none; }
  .xp-filter-chips .xp-flabel { flex-basis: auto; flex: none; margin-right: 2px; }
  .xp-fpanel { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: var(--r-sm); background: var(--sunk); }
  .xp-tools.fopen .xp-fpanel { display: grid; }
  .xp-fpanel .xp-toggle, .xp-fpanel .xp-hint { grid-column: 1 / -1; }
  .xp-fpanel .xp-filter > label { font-size: 12px; margin-bottom: 2px; }
  .xp-fpanel select { min-height: 44px; font-size: 14px; padding: 0 8px; }
  .xp-bar { justify-content: flex-start; }
  .xp-bar .xp-reset { margin-left: auto; }
}
.xp-ftoggle { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.xp-ftoggle::after { content: ' ▾'; color: var(--weak); }
.xp-ftoggle[aria-expanded="true"]::after { content: ' ▴'; }
.xp-ftoggle:hover { border-color: var(--brand); color: var(--brand); }
.xp-fcount { color: var(--brand); }
/* numeric columns of a 탐색 표 (dataExplorer writes their positions in data-nc instead of a class on every cell) */
.explorer table[data-nc~="2"] td:nth-child(2), .explorer table[data-nc~="3"] td:nth-child(3), .explorer table[data-nc~="4"] td:nth-child(4),
.explorer table[data-nc~="5"] td:nth-child(5), .explorer table[data-nc~="6"] td:nth-child(6), .explorer table[data-nc~="7"] td:nth-child(7),
.explorer table[data-nc~="8"] td:nth-child(8), .explorer table[data-nc~="9"] td:nth-child(9), .explorer table[data-nc~="10"] td:nth-child(10),
.explorer table[data-nc~="11"] td:nth-child(11), .explorer table[data-nc~="12"] td:nth-child(12) { text-align: right; white-space: nowrap; min-width: 0; }
/* sortable heads: the whole head is one button; the arrow follows aria-sort */
th .xp-sort { all: unset; display: inline-flex; align-items: center; gap: 2px; min-height: 28px; cursor: pointer; border-radius: 6px; font: inherit; color: inherit; }
th.num .xp-sort { flex-direction: row-reverse; }
th .xp-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
th .xp-sort:hover { color: var(--brand); }
.xp-arrow { display: inline-block; width: 1em; text-align: center; color: var(--weak); }
.xp-arrow::before { content: '↕'; opacity: .5; }
th[aria-sort="ascending"] .xp-arrow::before { content: '▲'; opacity: 1; color: var(--brand); font-size: 9px; }
th[aria-sort="descending"] .xp-arrow::before { content: '▼'; opacity: 1; color: var(--brand); font-size: 9px; }
th[aria-sort] { color: var(--text); }
.xp-on .table-wrap { margin-top: 4px; }
.xp-empty { margin: 8px 4px; font-size: 14px; }
.xp-more { margin: 8px 0 0; text-align: center; }
.xp-more .btn { width: 100%; max-width: 360px; }
/* phones: the name column (and its head) stays in view while the table scrolls sideways */
.explorer tbody th[scope=row] { min-width: 8em; max-width: 13em; }
.table-wrap:has(tbody th[scope=row]) thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--card); }
.xp-cell { display: flex; align-items: center; gap: 6px; }
.xp-cell .xp-label { min-width: 0; }
@media (max-width: 599px) {
  .explorer table { font-size: 13px; }
  .explorer th, .explorer td { padding: 9px 6px; }
  .explorer tbody th[scope=row] { box-shadow: 1px 0 0 var(--line); }
}
/* compare: + button in the name cell, picked rows side by side */
.xp-pick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -3px 0; vertical-align: middle; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--weak); font: inherit; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; }
.xp-pick { position: relative; }
.xp-pick::after { content: ''; position: absolute; inset: -9px; }
.xp-pick:hover { border-color: var(--brand); color: var(--brand); }
.xp-pick[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.xp-compare { margin: 6px 0 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--brand-soft); }
.xp-cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.xp-cmp-title { margin: 0; flex-basis: 100%; font-size: 14px; font-weight: 800; color: var(--text); }
.xp-cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xp-compare .xp-cmp-go { background: var(--brand); color: var(--brand-ink); }
.xp-compare .xp-cmp-go:hover { color: var(--brand-ink); filter: brightness(1.08); }
@media (max-width: 719px) {
  /* folded: one line of names that scrolls sideways, then the buttons */
  .xp-cmp-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .xp-cmp-chips::-webkit-scrollbar { display: none; }
  .xp-cmp-chips .xp-chip { min-height: 32px; padding: 4px 10px; }
}
.xp-compare .table-wrap { margin: 10px 0 0; }
.xp-cmp-table thead th { color: var(--text); font-size: 13px; white-space: normal; min-width: 7em; }
/* jump box: the big '기관 찾기' near the top of a hub */
.xp-jump { border: 1.5px solid var(--brand-soft); }
.xp-jump-label { display: block; font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.xp-jump-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.xp-jump-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.xp-jump-list li:last-child { border-bottom: 0; }
.xp-jump-name { font-weight: 700; min-height: 28px; display: inline-flex; align-items: center; }
.xp-jump-meta { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.xp-jump-status { margin: 6px 0 0; font-size: 13px; }
.xp-jump-status:empty { display: none; }
.xp-jump-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 700; }
/* 채용공고 안내 카드 (공고 목록이 없을 때): the 잡알리오 button stands out */
.jobs-go { border-left: 4px solid var(--brand); }
.jobs-go .cta { margin-top: 2px; }
@media print { .xp-tools, .xp-more, .xp-pick, .xp-jump .search-field { display: none !important; } }

/* ---- search page (검색 결과 search/, client/search-page.mjs; 자동완성 '모두 보기' 줄, 메뉴 검색, 404, 맨 위로; tokens only) */
.search-results .r-all a { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 2px; color: var(--brand); font-weight: 700; }
.search-results .r-all .r-sec { color: var(--brand); font-size: 16px; }
.menu-search { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 6px; padding: 6px 12px; border-radius: 10px; background: var(--sunk); color: var(--sub); text-decoration: none; font-weight: 700; font-size: 14px; }
.menu-search:hover { color: var(--brand); background: var(--brand-soft); }
.sp-form { margin: 4px 0 0; }
.sp-form .search-field { height: 56px; border-radius: var(--r); padding: 0 8px 0 16px; }
.sp-status { margin: 10px 0 0; font-size: 14px; }
.sp-status:empty { display: none; }
.sp-filter { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 12px 0 4px; padding-bottom: 2px; }
.sp-filter::-webkit-scrollbar { display: none; }
.sp-filter .qchip { gap: 6px; }
.sp-filter .qchip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.sp-n { font-size: 12px; font-weight: 600; opacity: .8; }
.sp-h { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; font-size: 17px; }
.sp-h .sp-n { color: var(--weak); }
.sp-intents, .sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-intents a, .sp-list a { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--sh-1); }
.sp-intents a { border-color: var(--brand); background: var(--brand-soft); }
.sp-intents a:hover, .sp-list a:hover { border-color: var(--brand); }
.sp-t { font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.sp-x { font-size: 13px; color: var(--sub); line-height: 1.45; overflow-wrap: anywhere; }
.sp-meta { font-size: 12px; color: var(--weak); }
.sp-go { font-size: 13px; font-weight: 700; color: var(--brand); }
.sp-list mark, .sp-intents mark { background: var(--sun-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.sp-more { margin-top: 10px; width: 100%; max-width: 360px; }
.sp-help { margin-top: 18px; }
.sp-help h3 { font-size: 15px; margin: 18px 0 8px; }
.sp-popular { flex-wrap: wrap; }
.sp-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-groups a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 12px; color: var(--text); text-decoration: none; }
.sp-groups a:hover { background: var(--sunk); }
.sp-groups a > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sp-groups .muted { font-size: 13px; }
@media (min-width: 720px) { .sp-groups { grid-template-columns: 1fr 1fr; } }
.nf-links { display: flex; flex-wrap: wrap; gap: 8px; }
.to-top { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 25; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2); color: var(--sub); font-size: 13px; font-weight: 700; text-decoration: none; }
.to-top svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { color: var(--brand); border-color: var(--brand); }
body:has(.result-bar:not([hidden])) .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
main[tabindex="-1"]:focus { outline: 0; }
@media print { .to-top, .sp-form, .sp-filter, .sp-more { display: none !important; } }

/* ---- maps — src/site/maps.mjs mapBlock()/mapLink() ('지도에서 크게 보기 →' to map/), bubbleMap() */
.xmap { display: grid; gap: 8px; }
.xmap-head { margin: 0; display: flex; justify-content: flex-end; font-size: 14px; }
.xmap-link { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; text-decoration: none; }
.xmap-link:hover { text-decoration: underline; }
.xmap-bar { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.xmap-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); text-decoration: none; }
.xmap-go svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.xmap-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--weak); }
svg.map .xm-base path { fill: var(--sunk); stroke: var(--line); stroke-width: .8; }
svg.map .bub { stroke: var(--card); stroke-width: 1; fill-opacity: .9; }
svg.map a:hover .bub, svg.map .bub.on { stroke: var(--text); stroke-width: 2; }
.xm-sizes { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 6px 0 0; font-size: 12px; color: var(--weak); }
.xm-sizes span { display: inline-flex; align-items: center; gap: 4px; }
.xm-sizes circle { fill: none; stroke: var(--sub); stroke-width: 1; }
.xm-regions { display: grid; gap: 8px; }
.xm-orgs { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
@media print { .xmap-head, .xmap-bar { display: none !important; } }

/* ---- map app — page map/ (src/modules/map/), src/site/client/map-app.mjs. html.mapapp-on is set by the script. */
.mapapp-on .page { max-width: none; }
.mapapp-on main > .crumbs, .mapapp-on main > article > :not(.content), .mapapp-on .content > :not(.mapapp) { max-width: var(--w-data); margin-left: auto; margin-right: auto; }
.mapapp-on .page-head { margin-top: 2px; margin-bottom: 8px; }
.mapapp-on .page-head h1 { font-size: 20px; margin: 0; display: inline; }
.mapapp-on .page-head .def { display: inline; margin: 0 0 0 8px; font-size: 13px; color: var(--weak); }
.mapapp-on .content > .mapapp { margin: 0 -16px 24px; }
.mapapp {
  --ma-h: calc(100vh - 150px); --panel: 360px;
  position: relative; display: grid; grid-template-columns: var(--panel) minmax(0, 1fr); height: var(--ma-h); min-height: 440px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sunk); overflow: hidden;
}
.ma-stage { position: relative; grid-column: 2; grid-row: 1; min-width: 0; }
/* .ma-stage > .ma-map outranks .maplibregl-map { position: relative } of maplibre-gl.css, which loads after this file */
.ma-stage > .ma-map, .ma-map.maplibregl-map { position: absolute; inset: 0; }
.ma-map:focus-within { outline: 2px solid var(--brand); outline-offset: -2px; }
.ma-status { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 3; max-width: min(92%, 460px); margin: 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--card); color: var(--text); box-shadow: var(--sh-2); font-size: 13px; text-align: center; }
.ma-status:empty { display: none; }
.ma-tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-panel { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; background: var(--card); border-right: 1px solid var(--line); z-index: 5; }
.ma-grip { display: none; }
.ma-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 20px; display: grid; align-content: start; gap: 14px; }
.ma-kicker { margin: 0; font-size: 12px; font-weight: 700; color: var(--weak); }
.ma-title { margin: 2px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.ma-h { margin: 0 0 8px; font-size: 15px; }
.ma-h3 { margin: 12px 0 4px; font-size: 13px; color: var(--sub); }
.ma-sum { display: grid; gap: 6px; }
.ma-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--sub); }
.ma-steps li { display: inline-flex; align-items: center; gap: 5px; }
.ma-steps .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.ma-steps .q0 { background: var(--q0); } .ma-steps .q1 { background: var(--q1); } .ma-steps .q2 { background: var(--q2); } .ma-steps .q3 { background: var(--q3); } .ma-steps .q4 { background: var(--q4); } .ma-steps .qna { background: var(--qna); }
.ma-steps .sw-c { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--sub); }
.ma-search { position: relative; display: grid; gap: 4px; }
.ma-label { font-size: 12px; font-weight: 700; color: var(--weak); }
.ma-q { width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--sunk); color: var(--text); font: inherit; font-size: 16px; }
.ma-q:focus { border-color: var(--brand); background: var(--card); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.ma-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-2); max-height: 320px; overflow-y: auto; }
.ma-results li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; min-height: 40px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ma-results li.is-on, .ma-results li:hover { background: var(--brand-soft); }
.ma-results .ma-sub { font-size: 12px; color: var(--weak); white-space: nowrap; }
.ma-results .ma-none { cursor: default; color: var(--weak); }
.ma-sec { display: grid; gap: 6px; }
.ma-info { padding: 12px; border-radius: var(--r); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); }
.ma-info-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ma-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--sub); font-size: 20px; line-height: 1; cursor: pointer; }
.ma-x:hover { color: var(--brand); border-color: var(--brand); }
.ma-pos { margin: 2px 0 0; font-size: 13px; color: var(--sub); }
.ma-vals, .ma-list, .ma-links, .ma-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ma-vals li { display: grid; gap: 0; padding: 2px 0; }
.ma-row { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ma-row:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.ma-row.is-cur { background: var(--card); box-shadow: inset 3px 0 0 var(--brand); }
.ma-row.is-static { cursor: default; } .ma-row.is-static:hover { background: transparent; }
.ma-row .ma-nm { flex: 1; min-width: 0; }
.ma-row .ma-v { font-weight: 800; white-space: nowrap; }
.ma-row .ma-rk { flex: none; min-width: 2.2em; color: var(--weak); font-size: 12px; font-weight: 700; }
.ma-row-meta { padding: 0 8px 4px; font-size: 11.5px; line-height: 1.4; color: var(--weak); }
.ma-row-meta a { color: inherit; }
.ma-links li, .ma-more { font-size: 14px; font-weight: 700; margin: 0; }
.ma-links li { padding: 4px 0; }
.ma-lines { font-size: 13px; color: var(--sub); padding-left: 8px; }
.ma-up { min-height: 40px; font-size: 14px; }
.ma-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.ma-group + .ma-group { margin-top: 8px; }
.ma-group legend { padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--weak); }
.ma-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-chip { position: relative; }
.ma-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ma-chip span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--sub); font-size: 13px; font-weight: 600; cursor: pointer; }
.ma-chip input:hover + span { border-color: var(--brand); color: var(--brand); }
.ma-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 800; }
.ma-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ma-about { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ma-desc, .ma-meta, .ma-note { margin: 0; font-size: 13px; line-height: 1.55; }
.ma-meta { color: var(--weak); } .ma-meta a { color: inherit; }
.ma-seg { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; justify-self: start; }
.ma-seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--sub); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ma-seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.ma-credit { margin: 0; font-size: 11px; line-height: 1.5; color: var(--weak); }
.ma-credit a { color: inherit; }
.mapapp .maplibregl-ctrl-group { box-shadow: var(--sh-1); border-radius: 10px; }
.mapapp .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.mapapp .maplibregl-ctrl-attrib { font-size: 11px; }
/* the text under the app (layer list for search engines and no-JS readers) */
.ml-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.ml-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.ml-list p { margin: 2px 0; }
.ml-t { font-weight: 800; }
.ml-meta, .ml-ends { font-size: 13px; }
@media (min-width: 1280px) { .mapapp { --panel: 400px; } }
/* phones: map full, the panel a sheet from the bottom (folded / half / full) */
@media (max-width: 767px) {
  .mapapp { display: block; min-height: 480px; }
  .ma-stage { position: absolute; inset: 0; }
  .ma-panel { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet, 168px); max-height: calc(100% - 12px); border-right: 0; border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .14); transition: height .25s var(--ease); }
  .ma-panel.sheet-peek { --sheet: 168px; } .ma-panel.sheet-half { --sheet: 55%; } .ma-panel.sheet-full { --sheet: calc(100% - 12px); }
  .ma-grip { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 100%; min-height: 32px; padding: 6px 0 2px; border: 0; background: transparent; color: var(--weak); font: inherit; font-size: 11px; cursor: grab; touch-action: none; }
  .ma-grip-bar { width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  .ma-grip-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ma-body { padding-top: 2px; }
  .ma-sum { touch-action: none; }
  .ma-title { font-size: 18px; }
  .ma-status { top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ma-panel { transition: none; } }
@media print { .mapapp { display: none !important; } }