/* WhereWise business-area pages (design-system/MASTER.md, 2026-10-17). Tokens and shared parts (.ww-*) live in brand.css,
   loaded before this file; the names below point at them so the older rules keep working. Most of every screen is white
   and ink, split by thin lines and the light grey surface; coral (--ww-here) marks "here" (the chosen area or spot) and is
   never text; deep red (--ww-action) is the one primary button of a view. One typeface (Pretendard), one shadow, kept for
   floating parts. Map layer and chart colours live in the page scripts next to what they draw. */
:root {
  --ink: var(--ww-ink, #222222);            /* text, headings, data, selected states */
  --ink-2: var(--ww-body, #3F3F3F);         /* long and supporting text (10.5:1) */
  --ink-3: var(--ww-muted, #6A6A6A);        /* notes and labels (5.4:1) */
  --line: var(--ww-line, #DDDDDD);          /* hairlines and card borders */
  --line-2: var(--ww-line-strong, #C1C1C1); /* input borders */
  --line-soft: var(--ww-line-soft, #EBEBEB);/* lighter dividers, chart grids */
  --surface: var(--ww-bg, #FFFFFF);         /* page */
  --card: var(--ww-bg, #FFFFFF);            /* maps, inputs and panels */
  --soft: var(--ww-soft, #F7F7F7);          /* quiet fills: bands, hover, disabled */
  --strong: var(--ww-strong, #F2F2F2);      /* round icon buttons */
  --brand: var(--ww-ink, #222222);          /* selected states: ink */
  --brand-2: var(--ww-ink, #222222);
  --brand-soft: var(--ww-soft, #F7F7F7);
  --brand-line: var(--ww-line, #DDDDDD);
  --accent: var(--ww-action, #E00B41);      /* the one primary action of a view (white text 4.9:1) */
  --accent-press: var(--ww-action-press, #B8082F);
  --here: var(--ww-here, #FF385C);          /* coral: the chosen area, spot or item (graphics only, never text) */
  --error: var(--ww-error, #C13515);
  --data: var(--ww-ink, #222222);           /* this area's figures */
  --data-soft: var(--ww-line-strong, #C1C1C1); /* the city beside them */
  --blue: #2563eb;                          /* SkyTrain stations (a map category) */
  --red: var(--ww-error, #C13515);          /* vacancies on the map, invalid input */
  --orange: var(--ww-here, #FF385C);        /* the picked trade on the map: "here" */
  --gray-bar: var(--ww-line-strong, #C1C1C1);
  --ramp-1: var(--ww-ramp-1, #222222); --ramp-2: var(--ww-ramp-2, #5E5E5E); --ramp-3: var(--ww-ramp-3, #929292);
  --ramp-4: var(--ww-ramp-4, #C1C1C1); --ramp-5: var(--ww-ramp-5, #EBEBEB);   /* grade 1 (best) is the darkest */
  --radius: var(--ww-r-card, 14px);         /* cards and panels */
  --r-btn: var(--ww-r-btn, 8px);            /* buttons and inputs */
  --r-sm: var(--ww-r-sm, 4px);              /* small tags */
  --r-lg: var(--ww-r-lg, 20px);             /* large surfaces (the phone layer sheet) */
  --pill: var(--ww-r-pill, 999px);          /* chips */
  --shadow: none;                           /* flat by default */
  --float: var(--ww-shadow, 0 0 0 1px rgba(0, 0, 0, .02), 0 2px 6px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .10));  /* the one shadow: floating parts only */
  --sans: var(--ww-sans, "Pretendard", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif);
  --serif: var(--sans);                     /* older names: every face is Pretendard now */
  --mono: var(--sans);
  --ease: var(--ww-ease, cubic-bezier(.2, .8, .2, 1));
  --gutter: 24px;                           /* page side margin (16px on phones) */
}
@media (max-width: 560px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }

/* the hidden attribute must win over display rules such as .legend-row */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button, select, summary, [role="button"] { cursor: pointer; }
button { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* one measure for the bar and the page: 1120px of content and the side margin */
.wrap { max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a { color: inherit; text-underline-offset: 3px; }

/* top bar: logo and Beta, page tabs, then the area picker and report button on the right. It stays on screen while scrolling. */
html { scroll-padding-top: 80px; }  /* in-page jumps stop below the bar */
.topbar { position: sticky; top: 0; z-index: 1100; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.topbar-in { display: flex; justify-content: space-between; gap: 0 16px; min-height: 64px; }
.tabs { display: flex; gap: 2px; }
.tabs a { display: flex; align-items: center; padding: 0 10px; text-decoration: none; color: var(--ink-3); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs a:hover { color: var(--ink); }
.tools { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.tools label { font-weight: 600; white-space: nowrap; }
.tools select { min-width: 0; max-width: 260px; min-height: 44px; font-weight: 600; }
/* the report button is a secondary button: white, ink outline */
.save-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.save-button:hover { background: var(--soft); }
.tip { position: absolute; top: calc(100% + 6px); right: 0; padding: 6px 10px; border-radius: var(--r-btn); background: var(--ink); color: #fff; font-size: 13px; line-height: 1.4; white-space: nowrap; box-shadow: var(--float); visibility: hidden; opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.save-button:focus-visible + .tip { visibility: visible; opacity: 1; }
@media (hover: hover) { .save-button:hover + .tip { visibility: visible; opacity: 1; } }
.narrow { display: none; }
/* narrower screens: the picker moves under the tabs, the tabs scroll away and only the picker row stays on screen */
@media (max-width: 1060px) {
  html { scroll-padding-top: 78px; }
  .topbar { top: -45px; }  /* tabs row (44px) + the picker row's top border */
  .topbar.tabs-only { position: static; }
  .topbar-in { flex-wrap: wrap; min-height: 0; }
  .tabs { flex: 1 1 0; min-width: 0; height: 44px; }
  .tools { flex: 1 1 calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter); gap: 8px; border-top: 1px solid var(--line-soft); }
  .tools select { flex: 1 1 auto; max-width: 340px; }
  .save-button { margin-left: auto; }
  .tip { right: var(--gutter); }
}
/* phones: short labels so the picker and the button share one row */
@media (max-width: 560px) {
  .wide { display: none; }
  .narrow { display: inline; }
  .tip { max-width: calc(100vw - 2 * var(--gutter)); white-space: normal; }
  /* the language button becomes the round globe of MASTER section 7 (its name stays in aria-label; the footer spells it out) */
  .lang-switch { justify-content: center; width: 44px; padding: 0; }
  .lang-switch .lang-long, .topbar .lang-switch .lang-short { display: none; }
  .tabs { gap: 0; }
  .tabs a { padding: 0 10px; }
}

/* hero */
.hero { padding-top: 48px; padding-bottom: 24px; text-align: center; }
.eyebrow { display: inline-block; margin: 0 0 12px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
h1 { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.lead { max-width: 640px; margin: 16px auto 0; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
@media (max-width: 560px) { h1 { font-size: 30px; } .lead { font-size: 17px; } }

/* sections */
section.wrap { margin-top: 64px; }
section.wrap:first-of-type { margin-top: 8px; }
h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 700; }
.section-lead { margin: 0 0 20px; max-width: 720px; color: var(--ink-2); }
.caption, .note { margin: 12px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.insight { margin: 14px 0 0; font-weight: 600; }

/* map */
.map-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
#map { height: min(72vh, 760px); min-height: 440px; background: #fff; }
.map-panel {
  position: absolute; z-index: 1000; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; line-height: 1.5; box-shadow: var(--float);
}
.map-controls { top: 12px; right: 12px; }
.map-controls fieldset { border: 0; margin: 10px 0 0; padding: 0; }
.map-controls legend { padding: 0; font-weight: 700; }
.map-controls label { display: block; cursor: pointer; }
/* segmented choice: a light outline, the chosen part filled with ink */
.seg { display: flex; border: 1px solid var(--line-2); border-radius: var(--r-btn); overflow: hidden; background: var(--card); }
.seg button { flex: 1; min-height: 40px; border: 0; background: var(--card); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 14px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button:hover { color: var(--ink); background: var(--soft); }
.seg button.on { background: var(--ink); color: #fff; }
.seg button:focus-visible { outline-offset: -3px; }
.map-legend { left: 12px; bottom: 28px; max-width: 300px; }
.map-legend button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }
.map-legend button span { color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.legend-title { margin: 6px 0 2px; font-weight: 600; }
.legend-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ln { display: inline-block; width: 48px; background: var(--ink); border-radius: 9px; flex: none; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot.station { background: var(--blue); }
.dot.shop { background: var(--ink); }
.dot.vacant { border: 2px solid var(--red); margin-left: 6px; }
.dot.trade { background: var(--orange); }
.dot.ring { background: #fff; border: 2px solid var(--ink-3); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: var(--r-sm); flex: none; vertical-align: -2px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.legend-row .swatch { margin-right: 0; }

/* layer panel above the map: any number of layers, in five groups, plus ready-made combinations */
.layer-panel { margin-bottom: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.layer-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.layer-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); }
.layer-toggle svg { color: var(--ink); }
.layer-toggle::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; }
.layer-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); }
.layer-count { padding: 1px 8px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.layer-count:empty { display: none; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.presets-label { color: var(--ink-3); font-size: 13px; font-weight: 600; margin-right: 2px; }
/* ready-made combinations are chips: pills with a light outline, the chosen one outlined in ink */
.presets button { display: inline-flex; align-items: center; min-height: 36px; font: inherit; font-size: 13px; font-weight: 500; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); color: var(--ink); transition: border-color 0.15s, background 0.15s; }
.presets button:hover { border-color: var(--ink); }
.presets button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.presets button.clear { border-color: var(--line); background: var(--card); color: var(--ink-3); }
.presets button.clear:hover { color: var(--ink); border-color: var(--ink); }
.layer-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.layer-group { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.layer-group-label { flex: 0 0 100%; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.layer-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; transition: border-color 0.15s, background 0.15s; }
.layer-chip:hover { border-color: var(--ink); }
.layer-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.layer-chip svg { flex: none; }
@media (pointer: coarse) { .layer-chip, .presets button { min-height: 44px; } }
.layer-hint { margin: 10px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.layer-note { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
#legend-body { max-height: min(52vh, 460px); overflow-y: auto; }
.legend-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.legend-block .legend-title { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; }
.legend-block .legend-title small { color: var(--ink-3); font-weight: 400; }
.info-popup .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; }
.info-popup .info-title { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.info-popup ul { margin: 0; padding-left: 16px; }
.info-popup li + li { margin-top: 3px; }
.info-popup p { margin: 0; }
.leaflet-container { font-family: inherit; }
.leaflet-tooltip { font-size: 13px; line-height: 1.45; }
.muted-tiles { filter: grayscale(1) contrast(0.8) brightness(1.12); opacity: 0.5; }
/* Leaflet's own floating parts: white, rounded, the one shadow */
.leaflet-container .leaflet-tooltip { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--ink); box-shadow: var(--float); }
.leaflet-container .leaflet-tooltip-top::before { border-top-color: var(--card); }
.leaflet-container .leaflet-tooltip-bottom::before { border-bottom-color: var(--card); }
.leaflet-container .leaflet-tooltip-left::before { border-left-color: var(--card); }
.leaflet-container .leaflet-tooltip-right::before { border-right-color: var(--card); }
.leaflet-container .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--float); color: var(--ink); }
.leaflet-container .leaflet-popup-tip { box-shadow: none; border: 1px solid var(--line); }
.leaflet-container .leaflet-bar { border: 1px solid var(--line); border-radius: var(--r-btn); box-shadow: var(--float); background-clip: border-box; }
.leaflet-container .leaflet-bar a { color: var(--ink); border-bottom-color: var(--line-soft); }
.leaflet-container .leaflet-bar a:hover { background: var(--soft); }
.leaflet-container .leaflet-bar a:first-child { border-top-left-radius: var(--r-btn); border-top-right-radius: var(--r-btn); }
.leaflet-container .leaflet-bar a:last-child { border-bottom-left-radius: var(--r-btn); border-bottom-right-radius: var(--r-btn); }
.leaflet-container .leaflet-control-attribution { color: var(--ink-3); }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.tile .label { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.tile .value { margin-top: 4px; font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tile .value small { font-size: 16px; font-weight: 600; margin-left: 2px; }
.tile .sub { margin-top: 6px; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.tile .value .empty { font-size: 20px; letter-spacing: 0; }
.tile .value .word { font-size: 24px; letter-spacing: -0.01em; }

/* charts */
.chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; font-size: 15px; }
.chart-head label { font-weight: 600; }
select { font: inherit; min-height: 40px; padding: 6px 34px 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-btn); color: var(--ink); appearance: none; -webkit-appearance: none;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
select:hover { border-color: var(--ink); }
select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 14px; margin-left: auto; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.chart-box { position: relative; width: 100%; }
.table-view { margin-top: 12px; font-size: 14px; }
.table-view summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.table-view summary:hover { color: var(--ink); }
.table-scroll { overflow-x: auto; position: relative; background: none; border-bottom: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
tbody tr:last-child > * { border-bottom: 0; }
.table-scroll > table { max-width: none; }  /* the card sets the width; tables fill it */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
thead th { font-weight: 600; color: var(--ink-2); font-size: 13px; background: none; border-bottom: 1px solid var(--ink); }

/* lists */
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px 24px; }
.column { border-top: 1px solid var(--ink); padding-top: 12px; }
.column h3 { margin: 0 0 8px; font-size: 18px; }
.column h3 span { color: var(--ink-3); font-weight: 600; margin-left: 4px; }
.column ul { list-style: none; margin: 0; padding: 0; }
.column li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.45; }
.column li small { display: block; color: var(--ink-3); font-size: 13px; }
.column li .was { color: var(--ink-3); }
.column .more summary { cursor: pointer; padding: 10px 0; color: var(--ink-2); font-size: 14px; font-weight: 600; }

.bars { display: grid; gap: 10px; max-width: 760px; }
.bar-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 56px; align-items: center; gap: 12px; font-size: 15px; }
.bar-row .name small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.3; }
.bar-row .track { height: 14px; }
.bar-row .fill { height: 100%; background: var(--data); border-radius: 0 var(--r-sm) var(--r-sm) 0; min-width: 2px; }
.bar-row .count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* trends */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
figure.trend { margin: 0; padding: 18px 20px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.trend-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.card-box { padding: 16px 16px 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.season-head { margin-top: 32px; justify-content: space-between; }
.season-head .sub-title { margin: 0; }
figure.trend figcaption strong { display: block; font-size: 18px; font-weight: 700; }
figure.trend figcaption span { display: block; min-height: 24px; color: var(--ink-2); font-size: 15px; font-weight: 600; }
figure.trend .chart-legend { margin: 6px 0 4px; min-height: 22px; font-size: 13px; }
.empty-note { margin: 12px 0 0; color: var(--ink-3); font-size: 14px; }

/* where people arrive */
.where-summary { min-width: 620px; }
.where-summary th[scope=row] { width: 110px; font-size: 16px; vertical-align: top; padding-top: 14px; }
.where-summary td { width: 45%; padding: 10px; }
.where-summary ol { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.where-summary li { counter-increment: rank; display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.where-summary li::before { content: counter(rank); flex: none; width: 18px; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.where-summary li b { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.where-summary .hint { margin: 4px 0 0 26px; color: var(--ink-3); font-size: 13px; }
.where-head { margin-top: 32px; justify-content: space-between; }
.where-head h3 { margin: 0; font-size: 18px; }
.where-head .seg { flex: none; }
.where { min-width: 680px; }
.away { margin-left: 6px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
/* screen-reader-only text */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "주소로 찾기" (version 9) */
.locate-form { margin-top: 4px; }
.locate-form label { display: block; font-weight: 600; font-size: 15px; }
.locate-row { display: flex; gap: 8px; margin-top: 6px; max-width: 640px; }
.locate-row input { flex: 1; min-width: 0; min-height: 48px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; }
.locate-row input::placeholder { color: var(--ink-3); }
.locate-row input:hover { border-color: var(--ink); }
.locate-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
/* the address search is the page's one primary action: deep red */
.locate-row .save-button { min-height: 48px; padding: 0 22px; border-color: var(--accent); background: var(--accent); color: #fff; font-size: 16px; }
.locate-row .save-button:hover { border-color: var(--accent-press); background: var(--accent-press); }
.locate-help { margin: 8px 0 0; max-width: 760px; color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.locate-results { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.locate-status { margin: 12px 0 0; padding: 10px 14px; border: 0; border-left: 3px solid var(--ink); border-radius: 0; background: var(--soft); color: var(--ink); font-size: 15px; }
.locate-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 14px; }
.locate-legend span { display: inline-flex; align-items: center; gap: 6px; }
.locate-legend i { display: inline-block; width: 22px; height: 6px; border-radius: 3px; }
/* walking rings, 5, 10 and 15 minutes: the same ink-to-grey steps locate.js draws (the page lists Korean then English) */
.locate-legend span:nth-of-type(3n+1) i { background: var(--ramp-1) !important; }
.locate-legend span:nth-of-type(3n+2) i { background: var(--ramp-3) !important; }
.locate-legend span:nth-of-type(3n) i { background: var(--ramp-4) !important; }
.locate-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.locate-select { min-height: 36px; padding: 4px 30px 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-btn); color: var(--ink); font: inherit; font-size: 13.5px; background-position: right 10px center; }
@media (pointer: coarse) { .locate-select { min-height: 44px; } }
.locate-map { cursor: crosshair; }
.locate-table tr.total td { font-weight: 700; border-top: 1px solid var(--ink); }
.tile .value .word a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.locate-axes .grade-axis small { font-weight: 500; }

/* "내 가게 계산" form (version 10) */
.calc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; margin-top: 8px; }
.calc-group { margin: 0; padding: 20px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; }
.calc-group legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-weight: 700; font-size: 18px; }
.calc-group legend + * { clear: both; }
.calc-field { margin-top: 12px; }
.calc-field > label, .calc-label { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.calc-field select, .calc-input input { width: 100%; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-btn); color: var(--ink); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.calc-field select { padding-right: 34px; }
.calc-input input { background: var(--card); }
.calc-field select:hover, .calc-input input:hover { border-color: var(--ink); }
.calc-input { display: flex; align-items: center; gap: 6px; }
.calc-input span { color: var(--ink-3); font-weight: 600; }
.calc-input input:focus-visible, .calc-field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.calc-input input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 3px 0 0 var(--error); background: var(--card); }
.calc-place { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.calc-place .calc-label { width: 100%; }
.calc-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.calc-radio input { width: 18px; height: 18px; accent-color: var(--ink); }
.calc-hint { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.calc-actions { grid-column: 1 / -1; margin: 0; }
/* errors carry a line and a sentence, never red text alone */
.calc-error { margin: 14px 0 0; padding: 10px 14px; border: 0; border-left: 3px solid var(--error); border-radius: 0; background: var(--soft); color: var(--error); font-size: 15px; font-weight: 600; }
#calc-result .tiles + .sub-title { margin-top: 28px; }
@media print { .calc-form { display: none; } }

/* overall grade (version 9): 1 = top fifth of the areas, the darkest; 5 = bottom fifth, the lightest; the number is always written */
.grade-card { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.grade-head { display: flex; gap: 16px; align-items: center; }
.grade-badge { flex: none; display: flex; align-items: baseline; justify-content: center; min-width: 84px; height: 84px; padding: 16px 12px 0; border-radius: var(--radius); background: var(--soft); color: var(--ink); }
.grade-badge .grade-num { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.grade-badge .grade-unit { margin-left: 2px; font-size: 15px; font-weight: 600; }
.grade-badge.g1 { background: var(--ramp-1); color: #fff; }
.grade-badge.g2 { background: var(--ramp-2); color: #fff; }
.grade-badge.g3 { background: var(--ramp-3); color: var(--ink); }
.grade-badge.g4 { background: var(--ramp-4); color: var(--ink); }
.grade-badge.g5 { background: var(--ramp-5); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.grade-title { margin: 0; font-size: 18px; }
.grade-lead { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.grade-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px 24px; margin-top: 20px; }
.grade-axis-head { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; }
.grade-axis-value { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.grade-axis-value b { color: var(--ink); }
.grade-bar { margin-top: 6px; height: 8px; border-radius: var(--r-sm); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line-soft); overflow: hidden; }
.grade-bar span { display: block; height: 100%; border-radius: var(--r-sm); background: var(--gray-bar); }
.grade-bar .g1 { background: var(--ramp-1); }
.grade-bar .g2 { background: var(--ramp-2); }
.grade-bar .g3 { background: var(--ramp-3); }
.grade-bar .g4 { background: var(--ramp-4); }
.grade-bar .g5 { background: var(--ramp-5); box-shadow: inset 0 0 0 1px var(--line-2); }
.grade-detail { margin-top: 16px; }
.grade-detail summary { color: var(--ink); font-weight: 600; font-size: 15px; }
.grade-parts { margin-top: 10px; }
.grade-parts th[scope=rowgroup] { vertical-align: top; text-align: left; white-space: nowrap; }
.grade-parts small { color: var(--ink-3); }
.grade-cell { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.grade-chip { display: inline-block; min-width: 46px; padding: 1px 6px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; text-align: center; background: var(--ramp-3); color: var(--ink); }
.grade-chip.g1 { background: var(--ramp-1); color: #fff; }
.grade-chip.g2 { background: var(--ramp-2); color: #fff; }
.grade-chip.g4 { background: var(--ramp-4); color: var(--ink); }
.grade-chip.g5 { background: var(--ramp-5); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media print { .grade-card { break-inside: avoid; } .grade-detail:not([open]) { display: none; } }

.ranks { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }
.ranks strong { margin-right: 4px; color: var(--ink); }
.ranks a { margin-left: 10px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.muted { color: var(--ink-3); }

/* residents nearby */
.sub-title { margin: 32px 0 8px; font-size: 18px; font-weight: 700; }
.age-head { margin-top: 32px; justify-content: space-between; }
.age-head .sub-title { margin: 0; }
.residents { max-width: 760px; }
.residents tr.strong td { font-weight: 700; }
.residents td:first-child { width: 42%; }
.groups-lead { margin: 0 0 12px; max-width: 760px; color: var(--ink-2); font-size: 15px; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.group-block { border-top: 1px solid var(--ink); padding-top: 12px; }
.group-block h4 { margin: 0; font-size: 16px; font-weight: 700; }
.group-note { margin: 2px 0 8px; min-height: 2.8em; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.group-table th, .group-table td { padding: 6px 6px; font-size: 14px; vertical-align: middle; }
.group-table td small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.2; }
.group-bar { display: flex; align-items: center; gap: 8px; }
.group-bar .track { flex: 1; height: 10px; min-width: 40px; }
.group-bar .fill { height: 100%; background: var(--data); border-radius: 0 var(--r-sm) var(--r-sm) 0; min-width: 2px; }
.group-bar b { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* chapter menu under the hero: chips */
.chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: -4px; margin-bottom: 24px; }
.chapters a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; background: var(--card); transition: border-color 0.15s, background 0.15s; }
.chapters a:hover { border-color: var(--ink); }
@media (pointer: coarse) { .chapters a { min-height: 44px; } }

/* workers, upcoming changes, cuisine */
.workers { max-width: 860px; }
.upcoming { min-width: 720px; }
.upcoming td small { color: var(--ink-2); font-size: 12px; }
.upcoming tr.extra { display: none; }
.upcoming-head { margin-top: 32px; justify-content: space-between; }
.upcoming-head .sub-title { margin: 0; }
.cuisine td.num small { color: var(--ink-3); font-size: 12px; }

/* version 6: demand facilities, road works, plan, overlaps */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 24px; }
.facilities td:first-child { font-weight: 600; }
.facilities tr.extra { display: none; }
/* "겹쳐 보면" sentences: a note set off by an ink line */
.overlaps { margin: 16px 0 0; padding: 0; list-style: none; max-width: 860px; }
.overlaps li { position: relative; margin-top: 8px; padding: 8px 0 8px 16px; border: 0; border-left: 2px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font-size: 14.5px; line-height: 1.55; }
/* status tags: pills with a small dot in the colour the map draws them in */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.status.construction::before { background: #c2410c; }
.status.upcoming::before { background: transparent; box-shadow: inset 0 0 0 1.5px #c2410c; }
.status.closure::before { background: #7f1d1d; }
#weather-table .status::before { display: none; }
.facilities td small { color: var(--ink-3); font-size: 12px; }
.roads td:nth-child(2) { min-width: 260px; }
.roads a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.plan, .roads { max-width: 900px; }

/* version 7: pedestrians, sidewalks, trends */
.peds { max-width: 760px; }
.stack-bar { display: flex; height: 22px; margin-top: 4px; border-radius: var(--r-sm); overflow: hidden; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.stack-bar span { display: block; height: 100%; min-width: 2px; }
.stack-bar span + span { box-shadow: inset 1px 0 0 #fff; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.stack-legend span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
#land-block, #levy-block, #sidewalk-block, #tickets-block, #vendors-block, #campus-block, #places-public-block, #ev-block { margin-top: 8px; }
#land-block .card-box, #tickets-block .card-box { margin-top: 10px; }

/* liquor licences, survival, land value and zoning */
.layer-head { margin-top: 32px; justify-content: space-between; }
.layer-head .sub-title, .layer-head h2 { margin: 0; }
section.wrap > .chart-head:first-child { margin-top: 0; }   /* a heading row that opens a section sits right under the section line */
.survival { min-width: 640px; max-width: 900px; }
.survival td small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.2; }
.survival tr.total td { border-top: 1px solid var(--ink); font-weight: 700; }
.survival .group-bar { min-width: 150px; }
.zoning { max-width: 900px; }
.zoning td { vertical-align: middle; }
.zoning td small { color: var(--ink-2); font-size: 13px; }
.zoning td:first-child { white-space: nowrap; font-weight: 600; }

/* industry finances tab */
.industry { min-width: 640px; }
.industry td small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.3; }
.split-legend { margin: 0 0 8px; }

/* comparison tab: every area in one sortable table, the area picked on the map page marked */
.areas { min-width: 880px; }
.areas th, .areas td { padding: 10px; vertical-align: middle; }
.areas thead th { vertical-align: bottom; }
.areas thead th button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-align: inherit; white-space: nowrap; cursor: pointer; }
.areas thead th.on button { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.areas thead th small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; white-space: nowrap; }
.areas td.on { font-weight: 700; }
.areas tbody th { font-weight: 600; white-space: nowrap; }
.areas tbody th a { text-decoration-color: var(--line-2); }
.areas tbody th a:hover { text-decoration-color: var(--ink); }
.areas tbody tr:hover { background: var(--soft); }
.areas tbody tr.on { background: var(--soft); }
.areas tbody tr.on > :first-child { box-shadow: inset 3px 0 0 var(--here); }   /* the chosen area: coral */
.compare-map-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
#compare-map { height: min(64vh, 620px); min-height: 380px; background: #fff; }
.compare-legend { margin-top: 10px; font-size: 14px; }
.compare-legend small { color: var(--ink-3); margin-left: 4px; }
.legend-steps { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--ink-2); }
.legend-step { display: inline-flex; align-items: center; white-space: nowrap; }
.where td.heat { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.where tr.extra { display: none; }
.where.all tr.extra { display: table-row; }
.place-button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.place-button:hover { text-decoration-color: var(--ink); }
.kind { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; background: var(--card); color: var(--ink-2); }
.kind.rail { color: var(--ink); }
.kind.rail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }   /* the station colour on the map */
/* quiet buttons: white with a light outline; turned on, they fill with ink */
.more-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.more-button:hover { border-color: var(--ink); }
.more-button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (pointer: coarse) { .more-button { min-height: 44px; } }

/* trades table */
.trades { min-width: 640px; }
.trades th, .trades td { padding: 10px; vertical-align: middle; }
.trades tbody tr { cursor: pointer; }
.trades tbody tr:hover { background: var(--soft); }
.trades tbody tr.on { background: var(--soft); }
.trades tbody tr.on > :first-child { box-shadow: inset 3px 0 0 var(--here); }
.trades .name small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.3; font-weight: 400; }
.trades .name { font-weight: 600; }
.trades .count-cell { min-width: 190px; }
.trades .count-bar { display: flex; align-items: center; gap: 10px; }
.trades .count-bar .track { flex: 1; height: 12px; }
.trades .count-bar .fill { height: 100%; background: var(--data); border-radius: 0 var(--r-sm) var(--r-sm) 0; min-width: 2px; }
.trades tr.on .count-bar .fill { background: var(--orange); }
.trades .count-bar b { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.trades button { font: inherit; font-size: 13px; font-weight: 600; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--ink); cursor: pointer; white-space: nowrap; }
.trades button:hover { border-color: var(--ink); }
.trades tr.on button { background: var(--ink); border-color: var(--ink); color: #fff; }

/* benchmark page */
.tile .sub.big { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.notes .tile .label { font-weight: 700; color: var(--ink); }
.group { margin: 32px 0 10px; font-size: 18px; }
/* benchmark: summary comparison, our column tinted */
.compare { min-width: 780px; table-layout: fixed; }
.compare th, .compare td { padding: 10px 8px; text-align: center; vertical-align: middle; font-size: 14px; line-height: 1.45; }
.compare thead th { vertical-align: bottom; font-size: 15px; }
.compare small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; font-weight: 400; line-height: 1.4; }
.compare thead small { color: var(--ink-3); }
.compare th[scope=row] { width: 19%; text-align: left; font-weight: 600; }
.compare .m { display: block; font-size: 19px; font-weight: 700; line-height: 1.15; }
.compare td.no .m { color: var(--ink-3); font-weight: 400; }
.compare td.unknown { color: var(--ink-3); font-size: 13px; }
.compare .ours { background: var(--soft); }
.compare-key { margin: 10px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.kind.done { color: var(--ink); border-color: var(--ink-3); }
/* benchmark: folded detail sections */
details.fold { border-top: 1px solid var(--line); }
details.fold:last-of-type { border-bottom: 1px solid var(--line); }
details.fold > summary { display: flex; align-items: baseline; gap: 10px; padding: 16px 0; list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h3 { margin: 0; font-size: 18px; }
details.fold > summary .count { color: var(--ink-3); font-size: 15px; font-weight: 600; }
details.fold > summary::after { content: "+"; margin-left: auto; color: var(--ink-2); font-size: 24px; line-height: 1; }
details.fold[open] > summary::after { content: "\2212"; }
details.fold[open] { padding-bottom: 24px; }
.features { min-width: 720px; }
.features td:first-child { width: 28%; }
.features td:last-child { width: 14%; }
.features td, .matrix td, .matrix th { font-size: 14px; line-height: 1.55; }
.matrix { min-width: 760px; }
.matrix td:first-child { font-weight: 600; width: 26%; }
.matrix td.yes { font-weight: 600; }
.matrix td.no, .matrix td.unknown { color: var(--ink-3); }
.matrix td:last-child, .matrix th:last-child { background: var(--soft); }

ul.plain { margin: 0; padding-left: 20px; max-width: 760px; }
ul.plain li { margin-bottom: 8px; }

/* sources table: cards on narrow screens */
.sources td:first-child { min-width: 150px; }
.sources td { font-size: 14px; line-height: 1.55; }
@media (max-width: 760px) {
  .sources thead { display: none; }
  .sources tr { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; }
  .sources td { display: block; border: 0; padding: 4px 0; }
  .sources td::before { content: attr(data-label); display: block; color: var(--ink-3); font-size: 12px; }
  .sources td:first-child::before { display: none; }
  /* controls move out of the map so they do not cover the street */
  .map-frame { display: flex; flex-direction: column; }
  .map-controls { position: static; order: -1; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
                  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; }
  .map-controls fieldset { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
  .map-controls legend { float: left; margin-right: 10px; }
  .map-controls label { display: inline-flex; align-items: center; gap: 4px; }
  #map { height: 62vh; min-height: 400px; }
  .map-legend { max-width: 220px; }
  .chart-legend { margin-left: 0; }
  body { font-size: 16px; }
}

/* source notes and licences at the end of each page */
footer.wrap { margin-top: 96px; padding-top: 20px; padding-bottom: 32px; background: linear-gradient(var(--line), var(--line)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px; color: var(--ink-3); font-size: 13px; }
footer p { margin: 2px 0; }

/* site footer (MASTER section 7): a light grey band; links on the left, the language row on the right; stacked on phones */
.site-foot { margin-top: 0; background: var(--soft); border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 14px; }
footer.wrap + .site-foot { margin-top: 0; }
.site-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 20px; padding-bottom: 24px; }
.site-foot .site-foot-links { margin: 0; color: var(--ink-2); line-height: 1.8; }
.site-foot-links a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-foot-links a:hover { text-decoration: underline; }
.site-foot .ww-locale { margin-right: -10px; }
.site-foot .ww-locale-item { min-height: 44px; }
.site-foot .ww-locale-item svg { flex: none; }
/* help menu: a small card that opens upward */
.site-foot .ww-help { position: relative; }
.site-foot .ww-help > summary { list-style: none; }
.site-foot .ww-help > summary::-webkit-details-marker { display: none; }
.site-foot .ww-help > summary svg { transition: transform 0.15s; }
.site-foot .ww-help[open] > summary svg { transform: rotate(180deg); }
.site-foot .ww-help-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 220px; margin: 0; padding: 8px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--float); }
.site-foot .ww-help-menu a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--r-btn); color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-foot .ww-help-menu a:hover { background: var(--soft); }
.site-foot .ww-help-k { color: var(--ink-3); font-weight: 500; }
@media (max-width: 760px) {
  .site-foot-in { flex-direction: column; align-items: flex-start; }
  .site-foot .ww-locale { margin: 0 0 0 -10px; }
  .site-foot .ww-help-menu { right: auto; left: 0; }
}

/* report (print) */
.print-only { display: none; }
.report-meta { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; }
#print-map svg { display: block; margin: 0 auto; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-btn); }
.print-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.print-legend span { display: inline-flex; align-items: center; gap: 6px; }
@page { size: A4; margin: 13mm 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 10.5pt; line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }
  .topbar, .map-frame, .compare-map-frame, .compare-legend, #measure-select, .layer-panel, .layer-note, #school-more, button[data-show-layer], .layer-buttons, .table-view, #residents-radius, #where-around, .chapters, #workers-radius, #fitout-map, #fitout-more, .where-head .seg, #where-more, #station-select, .chart-head label,
  .trades th:last-child, .trades td:last-child, .site-foot { display: none !important; }
  .print-only { display: block !important; }
  .screen-only { display: none !important; }
  /* sections short enough for one page stay whole, so a heading never ends a page on its own */
  section[aria-labelledby="key-title"], section[aria-labelledby="hour-title"], section[aria-labelledby="trend-title"],
  section[aria-labelledby="mix-title"], section[aria-labelledby="report-source-title"] { break-inside: avoid; }
  .residents, #residents-tiles, .age-head, #age-chart, .group-block, #workers-tiles, .workers, #upcoming-tiles, #liquor-tiles, #place-tiles, .survival, .zoning, #demand-tiles, #site-tiles, .overlaps li, .facilities, #ped-tiles, #land-tiles, #levy-tiles, #public-tiles, #vendors-tiles, #bike-tiles, #ev-tiles, .stack-bar, .peds { break-inside: avoid; }
  .groups { grid-template-columns: repeat(3, 1fr); gap: 10pt; }
  span.print-only { display: inline !important; font-weight: 700; }
  .hero { padding: 0 0 8pt; }
  .eyebrow { font-size: 9.5pt; }
  h1 { font-size: 26pt; }
  .lead { font-size: 11pt; margin-top: 6pt; max-width: none; }
  section.wrap { margin-top: 20pt; }
  h2 { font-size: 16pt; break-after: avoid; }
  h3 { break-after: avoid; }
  .section-lead { break-after: avoid; margin-bottom: 8pt; }
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 6pt; }
  .tile { padding: 8pt 10pt; }
  .tile .value { font-size: 20pt; }
  .tile .value small { font-size: 11pt; }
  .tile, tr, .column li, .bar-row, figure.trend, .chart-box, #print-map { break-inside: avoid; }
  .trend-grid { grid-template-columns: repeat(3, 1fr); gap: 10pt; }
  .columns { grid-template-columns: repeat(3, 1fr); }
  .where tr.extra { display: none !important; }
  .where-summary, .where, .trades, .sources, .compare, .features, .matrix, .areas, .residents, .upcoming, .industry, .survival, .peds { min-width: 0; }
  .table-scroll { overflow: visible; }
  .place-button { text-decoration: none; }
  .trades tbody tr.on { background: none; }
  .sources td, table { font-size: 8.5pt; }
  th, td { padding: 4pt 6pt; }
  a { text-decoration: none; }
  footer.wrap { margin-top: 18pt; padding-bottom: 0; }
}


/* ---------- WhereWise layer: the report-page components on white (replaces the version 11 paper look) ---------- */
body { background: var(--surface); }

/* top bar: the pin logo and a hand-written Beta, the tabs, the tools */
.brand { display: flex; align-items: center; gap: 8px; margin-right: 0; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand svg { flex: none; }
.brand > span { font-family: var(--sans); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.brand .ww-wise { color: var(--ink-3); }
.topbar-in > .ww-beta { align-self: center; margin: 0 6px 0 -4px; font-size: 21px; }
.topbar-in { align-items: stretch; }
.topbar-in > .brand { align-self: center; }
.tabs { margin-right: auto; }
.tabs a { color: var(--ink-3); font-weight: 600; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs a:hover { color: var(--ink); }
/* narrow screens: the pin stays at the start of the tabs row; the name and Beta give the tabs the room */
@media (max-width: 1060px) {
  .topbar-in > .brand { height: 44px; margin-right: 4px; }
  .brand > span, .topbar-in > .ww-beta { display: none; }
}
/* phones: the logo, Beta (and the language button on pages without the picker) make the first row, the tabs the second,
   the picker row the third; on the map page only the picker row stays on screen */
@media (max-width: 560px) {
  .brand > span, .topbar-in > .ww-beta { display: inline-block; }
  .topbar-in > .ww-beta { font-size: 19px; }
  .topbar-in { justify-content: flex-start; }
  .topbar-in > .lang-switch { margin-left: auto; }
  .tabs { order: 5; flex: 0 0 100%; }
  .tools { order: 6; }
  .topbar { top: -89px; }  /* logo row (44px) + tabs row (44px) + the picker row's top border */
}

/* hero: left-aligned like a report cover */
.hero { text-align: left; padding-top: 48px; padding-bottom: 24px; }
.eyebrow { display: block; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.lead { margin: 16px 0 0; max-width: 700px; color: var(--ink-2); }

/* chapter chips under the hero start at the left edge too */
.chapters { justify-content: flex-start; gap: 8px; margin-top: -4px; padding-bottom: 8px; }

/* sections: a thin ink line and a small grey number above each heading */
main { counter-reset: sec; }
main section.wrap { counter-increment: sec; padding-top: 24px; background: linear-gradient(var(--ink), var(--ink)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px; }
main section.wrap h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 8px; color: var(--ink-3);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
@media print { main section.wrap, footer.wrap { background-size: 100% 1px; } }   /* the page has no side margin in print */
.section-lead, .groups-lead { color: var(--ink-2); }
.note, .caption { color: var(--ink-3); }

/* numbers: a strip of figures under an ink line, light lines between them */
.tiles { gap: 0; margin-top: 20px; border-top: 1px solid var(--ink); clip-path: inset(0 0 0 1px); margin-left: -1px; }
.tile { background: none; border: 0; border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); border-radius: 0; padding: 14px 18px 16px; }
.tile .label { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.tile .value { margin-top: 6px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tile .value small { font-size: 16px; font-weight: 600; margin-left: 3px; color: var(--ink-2); }
.tile .value .word { font-size: 24px; }
.tile .value .empty { font-size: 20px; color: var(--ink-3); }
.tile .sub { color: var(--ink-3); font-size: 13.5px; }

/* tables: an ink line under the header row, light lines between rows, no card */
tbody tr:hover > * { background: var(--soft); }

/* boxed panels: map, charts */
.map-frame { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.layer-toggle svg { color: var(--ink); }
.info-popup .info-title { color: var(--ink); }
.status { border-radius: var(--pill); }

/* calculator legends on white */
.calc-group legend { background: none; }
.locate-chips .layer-chip[aria-pressed="true"] { background: var(--card); color: var(--ink); }

/* footer */
footer.wrap { color: var(--ink-3); font-size: 13px; }
main section.wrap:has(#layer-panel) { background: none; padding-top: 0; }   /* the map section starts with its own tools */

/* top bar width: the label of the picker is for screen readers on wide screens */
.tools select { min-width: 180px; }
@media (min-width: 1061px) { .tools label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 1060px) { .tools label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .tools select { min-width: 0; } }
.locate-axes .grade-axis small { display: block; }

/* ---------- consultation panel (version 12): white, ink text; only the send button is deep red ---------- */
.chat-launch { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 1150;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--card); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--float); transition: background 0.15s, border-color 0.15s; }
.chat-launch:hover { background: var(--soft); border-color: var(--ink); }
.chat-launch[aria-expanded="true"] { display: none; }
.chat-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200; display: flex; flex-direction: column; width: min(460px, 100vw);
  background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--float); }
.chat-panel[hidden] { display: none !important; }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.chat-kicker { margin: 0; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.chat-title { margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.chat-title::before { content: none !important; }
.chat-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -4px -6px 0 0; border: 0; border-radius: 50%; background: var(--strong); color: var(--ink); cursor: pointer; transition: background 0.15s; }
.chat-close:hover { background: var(--line-soft); }
.chat-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
.chat-models button { min-height: 36px; padding: 4px 14px; }
.chat-remaining { margin: 0; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 18px 16px; overscroll-behavior: contain; }
.chat-intro { padding: 12px 0 6px; color: var(--ink-2); font-size: 14px; line-height: 1.6; border-bottom: 1px solid var(--line-soft); }
.chat-intro p { margin: 0 0 8px; }
.chat-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 8px; }
.chat-suggest .more-button { justify-content: flex-start; text-align: left; font-size: 14px; font-weight: 500; line-height: 1.4; }
.chat-msg { padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; line-height: 1.65; }
.chat-msg p { margin: 0 0 8px; }
.chat-who { margin: 0 0 4px !important; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.chat-q > p:last-child { font-weight: 600; }
.chat-a .chat-who { color: var(--ink); }
.chat-body ul, .chat-body ol { margin: 0 0 8px; padding-left: 20px; }
.chat-body li { margin: 2px 0; }
.chat-body h4 { margin: 10px 0 4px; font-size: 15px; }
.chat-body .advice { padding-left: 10px; border-left: 2px solid var(--line-2); color: var(--ink-2); }
.chat-body .fact { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.chat-body sup { margin-left: 1px; color: var(--ink-3); font-size: 10px; font-weight: 600; }
.chat-body .est { margin-left: 2px; padding: 0 4px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-3); font-size: 10.5px; vertical-align: 1px; }
/* the panel tells readers that unverified figures are yellow: a highlighter stroke in the brand marker yellow */
.chat-body mark.unverified { padding: 0 1px; background: linear-gradient(transparent 40%, var(--ww-marker, #FFE45C) 40%, var(--ww-marker, #FFE45C) 92%, transparent 92%); color: var(--ink); }
.chat-warn { margin: 6px 0 0 !important; padding: 6px 10px; border-left: 3px solid var(--ww-marker, #FFE45C); background: var(--soft); color: var(--ink); font-size: 13px; }
.chat-cites { margin: 6px 0 0; padding-left: 18px; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.chat-cites li::marker { color: var(--ink-3); }
.chat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 !important; }
.chat-actions .more-button { text-decoration: none; font-size: 13.5px; }
.chat-error { margin-top: 8px; padding-left: 12px !important; border-left: 3px solid var(--error); }
.chat-error p { color: var(--error); font-weight: 600; }
.chat-wait p:last-child { color: var(--ink-2); }
.chat-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.chat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: chat-dot 1s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.chat-form { padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: var(--card); }
.chat-form textarea { width: 100%; min-height: 64px; max-height: 180px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-btn);
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.chat-form textarea::placeholder { color: var(--ink-3); }
.chat-form textarea:hover { border-color: var(--ink); }
.chat-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.chat-send-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.chat-hint { color: var(--ink-3); font-size: 12px; }
/* the send button is the panel's one primary action */
.chat-send-row .save-button { min-height: 44px; padding: 0 20px; border-color: var(--accent); background: var(--accent); color: #fff; }
.chat-send-row .save-button:hover { border-color: var(--accent-press); background: var(--accent-press); }
.chat-send-row .save-button:disabled { border-color: var(--line); background: var(--soft); color: var(--ink-3); cursor: not-allowed; }
@media (max-width: 560px) { .chat-panel { width: 100vw; border-left: 0; } .chat-hint { display: none; } }
@media print { .chat-launch, .chat-panel { display: none !important; } }

/* ---------- map layers as a map control (version 14): a button on the map, the list floats over the map's left side ---------- */
@media (min-width: 761px) { .map-frame #map:not(.locate-map) { height: calc(100dvh - 120px); min-height: 520px; max-height: 900px; } }
.map-bar { position: absolute; top: 10px; left: 56px; right: 200px; z-index: 1001; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; pointer-events: none; }
.map-bar[hidden] { display: none; }
.map-bar > * { pointer-events: auto; }
.layer-open { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-btn);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.layer-open svg { color: var(--ink); }
.layer-open:hover { border-color: var(--ink); }
.layer-open[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.layer-open .layer-count { min-width: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.layer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.layer-tags:empty { display: none; }
/* a layer that is on: a chip outlined in ink, with a close mark */
.layer-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px 3px 12px; border: 1px solid var(--ink); border-radius: var(--pill);
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.layer-tag:hover { background: var(--soft); }
.layer-panel { position: absolute; top: 58px; left: 10px; bottom: 10px; z-index: 1002; width: 340px; margin: 0; padding: 12px 14px 14px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--float); font-size: 14px; animation: layer-in 0.16s var(--ease); }
.layer-panel[hidden] { display: none; }
.layer-panel-head { justify-content: space-between; flex-wrap: nowrap; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.layer-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.layer-title svg { color: var(--ink); }
.layer-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; margin: -4px -4px -4px 0; border: 0; border-radius: 50%; background: var(--strong); color: var(--ink); cursor: pointer; transition: background 0.15s; }
.layer-close:hover { background: var(--line-soft); }
.layer-panel .presets { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.layer-panel .presets-label { flex: 0 0 100%; }
.layer-panel .layer-body { display: block; margin: 0; padding: 0; border: 0; }
.layer-panel .layer-group { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.layer-panel .layer-hint { margin-top: 10px; }
.map-frame .map-legend { left: auto; right: 12px; }
/* compact list (2026-10-17): group names sit to the left of their buttons, smaller buttons where a mouse is used */
.layer-panel { bottom: auto; max-height: calc(100% - 68px); width: 360px; padding: 10px 12px 12px; }
.layer-panel-head { padding-bottom: 6px; }
.layer-panel .presets, .layer-panel .layer-group { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 0 7px 66px; }
.layer-panel .presets-label, .layer-panel .layer-group-label { position: absolute; left: 0; top: 13px; width: 62px; margin: 0; color: var(--ink-3); font-size: 12px; font-weight: 600; line-height: 1.3; }
.layer-panel .presets button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.layer-panel .layer-chip { min-height: 30px; gap: 5px; padding: 3px 10px 3px 8px; font-size: 13px; }
.layer-panel .layer-group:last-child { border-bottom: 0; padding-bottom: 0; }
@media (pointer: coarse) { .layer-panel .presets button, .layer-panel .layer-chip { min-height: 44px; } .layer-panel .presets-label, .layer-panel .layer-group-label { top: 20px; } }
@keyframes layer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  /* phones: the button and tags make a row above the map, the list rises from the bottom */
  .map-bar { position: static; order: -1; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--card); }
  .layer-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 75dvh; z-index: 1300; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .map-frame .map-legend { right: auto; left: 12px; }
}

/* ---------- AI 상담 docked on the right (version 14): a rail on the window's right edge opens the panel, the page narrows beside it,
   and the panel's left edge drags. Phones keep the floating button and a full-screen panel. ---------- */
:root { --chat-w: 400px; --chat-rail: 52px; }
.chat-grip { position: absolute; top: 0; bottom: 0; left: -6px; width: 12px; cursor: col-resize; touch-action: none; }
.chat-grip::after { content: ""; position: absolute; top: 50%; left: 4px; width: 4px; height: 44px; margin-top: -22px; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: var(--card); }
.chat-grip:hover::after, .chat-grip:focus-visible::after, .chat-dragging .chat-grip::after { border-color: var(--ink); }
.chat-grip:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.chat-dragging, .chat-dragging * { cursor: col-resize !important; user-select: none; }
@keyframes chat-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (min-width: 761px) {
  body { padding-right: var(--chat-rail); }
  body.chat-open { padding-right: var(--chat-w); }
  .chat-panel { width: var(--chat-w); animation: chat-in 0.2s var(--ease); }
  .chat-rail { top: 0; right: 0; bottom: 0; flex-direction: column; justify-content: flex-start; gap: 12px; width: var(--chat-rail); min-height: 0; padding: 84px 0 0;
    border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; background: var(--card); color: var(--ink); box-shadow: none; }
  .chat-rail svg { color: var(--ink); }
  .chat-rail:hover { background: var(--soft); border-color: var(--line-soft); color: var(--ink); }
  .chat-rail:hover svg { color: var(--ink); }
  .chat-rail-label { writing-mode: vertical-rl; letter-spacing: 0.14em; font-size: 15px; font-weight: 600; }
  .chat-rail-ai { text-combine-upright: all; letter-spacing: 0; }
}
/* the top bar answers to its own width, because the screen-width rules do not know the page got narrower
   (only on wide screens: a size container would otherwise pin floating parts inside the bar) */
@media (min-width: 1061px) { .topbar { container-type: inline-size; } }
/* the bar holds at most 1120px however wide the screen, so the map page (picker, report button, language) always uses the
   short report and language labels, and the short English tab names; the tooltip still names the report in full */
@media (min-width: 1061px) {
  .topbar:not(.tabs-only) .tools .save-button .wide, .topbar:not(.tabs-only) .lang-switch .lang-long { display: none; }
  .topbar:not(.tabs-only) .tools .save-button .narrow, .topbar:not(.tabs-only) .lang-switch .lang-short { display: inline; }
  html[lang="en"] .topbar:not(.tabs-only) .tabs .wide { display: none; }
  html[lang="en"] .topbar:not(.tabs-only) .tabs .narrow { display: inline; }
}
@container (max-width: 1180px) {
  .topbar:not(.tabs-only) .brand > span { display: none; }
  .tools select { max-width: 190px; }
}
@container (max-width: 1060px) {
  .topbar:not(.tabs-only) .tabs .wide { display: none; }
  .topbar:not(.tabs-only) .tabs .narrow { display: inline; }
}
@container (max-width: 960px) {
  .brand > span { display: none; }
}
@container (max-width: 860px) {
  .tabs .wide { display: none; }
  .tabs .narrow { display: inline; }
  .topbar:not(.tabs-only) .topbar-in > .ww-beta { display: none; }
  .tools select { min-width: 120px; max-width: 160px; }
}
@media (max-width: 760px) {
  .chat-panel { width: 100vw; border-left: 0; }
  .chat-grip { display: none; }
}
@media print { body, body.chat-open { padding-right: 0; } .chat-rail { display: none !important; } }

/* section leads are one sentence (2026-10-17): wide enough that most fit one line */
.section-lead { max-width: 860px; }

/* map bar (2026-10-17): the presets stay on the map beside the layer button; the button opens the detailed list only */
.map-bar .presets { display: flex; flex-wrap: wrap; gap: 6px; }
.map-bar .presets button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.map-bar .presets button:hover { border-color: var(--ink); }
.map-bar .presets button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--card); color: var(--ink); }
.map-bar .presets button.clear { border-color: var(--line); color: var(--ink-3); }
.map-bar .presets button.clear:hover { border-color: var(--ink); color: var(--ink); }
.map-bar .presets button[hidden] { display: none; }
.map-bar .layer-tags { flex: 0 0 100%; }
.section-lead, .groups-lead { max-width: 1000px; }
@media (max-width: 760px) {
  .map-bar .presets button { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
}
@media (max-width: 760px) and (pointer: coarse) { .map-bar .presets button { min-height: 44px; } }

/* ---------- map layout (2026-10-17): tools above the map, only zoom on the map, the key in one strip under it ---------- */
.map-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; margin: 0 0 12px; }
.map-toolbar .map-bar { position: static; flex: 1 1 520px; pointer-events: auto; padding: 0; border: 0; background: none; }
.map-view { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.map-view .seg button { min-height: 40px; padding: 0 14px; font-size: 14px; }
.base-seg { display: flex; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-btn); overflow: hidden; }
.base-seg label { position: relative; display: flex; cursor: pointer; }
.base-seg label + label { border-left: 1px solid var(--line-2); }
.base-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.base-seg span { display: flex; align-items: center; min-height: 40px; padding: 0 12px; background: var(--card); color: var(--ink-2); font-size: 14px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.base-seg label:hover span { background: var(--soft); color: var(--ink); }
.base-seg input:checked + span { background: var(--ink); color: #fff; }
.base-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -4px; box-shadow: inset 0 0 0 2px #fff; }
.layer-panel { top: 10px; }
@media (min-width: 761px) { .map-frame #map:not(.locate-map) { height: calc(100dvh - 180px); min-height: 480px; max-height: 860px; } }
.map-key { margin-top: 12px; }
.map-key-items { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.map-key-items li { display: inline-flex; align-items: center; gap: 6px; }
.map-key-items li[hidden] { display: none; }
.map-key-items .dot.vacant { margin-left: 4px; }
.key-lines { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.key-lines i { display: block; width: 14px; background: var(--ink); border-radius: 6px; }
.key-dash { display: inline-block; width: 24px; border-top: 2px dashed var(--ink-2); flex: none; }
.map-key-layers { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.map-key-layers .legend-block { min-width: 150px; }
.map-key .caption { margin: 8px 0 0; }
@media (max-width: 760px) {
  .map-toolbar .map-bar { flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
  /* phones: the presets sit in one row beside the layer button and slide sideways; the right edge fades while more is hidden */
  .map-toolbar .map-bar .presets { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .map-toolbar .map-bar .presets::-webkit-scrollbar { display: none; }
  .map-toolbar .map-bar .presets button, .map-toolbar .layer-open { flex: none; white-space: nowrap; }
  .map-toolbar .layer-open { min-height: 36px; padding: 0 12px; }
  .map-view { width: 100%; }
  .map-view .seg button, .base-seg span { min-height: 36px; padding: 0 8px; font-size: 13px; }
  .map-key-items { gap: 6px 16px; font-size: 13px; }
}
@media (max-width: 760px) and (pointer: coarse) { .map-toolbar .layer-open, .map-view .seg button, .base-seg span { min-height: 44px; } }
@media print { .map-toolbar, .map-key-layers { display: none !important; } }

/* the presets carry a visible name, set off from the layer button by a thin rule (2026-10-17) */
.map-bar .presets { align-items: center; }
.map-bar .presets-label { flex: none; margin: 0 2px 0 4px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--ink-3); font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .map-bar .presets-label { margin-left: 2px; padding-left: 8px; font-size: 12.5px; } }

/* language switch (i18n.js adds it to the top bar): a round grey button */
.lang-switch { display: inline-flex; align-items: center; align-self: center; gap: 6px; min-height: 44px; padding: 0 14px; margin-left: 4px; border: 0; border-radius: var(--pill); background: var(--strong); color: var(--ink); font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.lang-switch:hover { background: var(--line-soft); color: var(--ink); }
@media print { .lang-switch { display: none; } }

/* i18n: legal — data sources, privacy policy and terms of use pages */
.src-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); column-gap: 40px; border-top: 1px solid var(--ink); }
.src-item { min-width: 0; padding: 18px 0 20px; border-bottom: 1px solid var(--line-soft); }
.src-item h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.35; }
.src-item dl { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 15px; line-height: 1.55; }
.src-item dt { padding-top: 2px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.src-item dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.src-statement { margin: 0 0 6px; padding-left: 10px; border-left: 2px solid var(--ink); color: var(--ink); }
.src-statement:last-child, .src-extra:last-child { margin-bottom: 0; }
.src-extra { margin: 6px 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 560px) { .src-item dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .src-item dd + dt { margin-top: 8px; } }
.legal-draft { max-width: 760px; margin: 24px 0 0; padding: 12px 16px; border-left: 3px solid var(--ink); background: var(--soft); color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.legal-draft strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 16px; }
.legal-meta { margin: 12px 0 0; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.legal-body section.wrap > div { max-width: 780px; }
.legal-body h3 { margin: 20px 0 6px; font-size: 17px; }
.legal-body ul { margin: 0 0 12px; padding-left: 20px; }
.legal-body li { margin-bottom: 6px; }
.legal-body p { margin: 0 0 12px; }
.legal-body section.wrap { margin-top: 48px; }
.legal-body section.wrap:first-of-type { margin-top: 8px; }
.ph { padding: 0 4px; border-radius: var(--r-sm); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.legal-foot .legal-links { margin-bottom: 6px; font-size: 13.5px; }
.legal-foot a { color: var(--ink-2); }
@media print { .legal-draft { border: 1px solid var(--ink); } }

/* i18n: cmp-loc */
#measure-select { max-width: 100%; }   /* long English measure names must not push the page sideways on phones */

/* i18n: calc-tour */
/* the English names of the three business types are long: on phones the picker above the sales-size chart wraps them */
@media (max-width: 640px) {
  html[lang="en"] #size-industry { max-width: 100%; }
  html[lang="en"] #size-industry button { white-space: normal; padding: 6px 8px; line-height: 1.25; }
}

/* i18n: chat */
/* the English answer-type buttons are wider: they keep their size and the daily count moves under them in a narrow panel;
   the sideways "Ask AI" on the rail needs less letter spacing than the upright Korean */
html[lang="en"] .chat-controls { flex-wrap: wrap; row-gap: 6px; }
html[lang="en"] .chat-models { flex: none; }
html[lang="en"] .chat-remaining { white-space: nowrap; }
@media (min-width: 761px) { html[lang="en"] .chat-rail-label { letter-spacing: 0.04em; } }

/* i18n: top bar in English — the English tab names are longer, so short labels from 1060px down,
   and on phones the tabs row scrolls by itself instead of widening the page */
@media (max-width: 1060px) {
  html[lang="en"] .tabs .wide { display: none; }
  html[lang="en"] .tabs .narrow { display: inline; }
}
@media (max-width: 560px) {
  .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  html[lang="en"] .tabs a { padding: 0 8px; }
}
/* i18n: a crowded wide top bar (the map page has the area picker and the PDF button too) */
.lang-switch .lang-short { display: none; }
@container (max-width: 1400px) {
  .lang-switch .lang-long { display: none; }
  .lang-switch .lang-short { display: inline; }
  html[lang="en"] .tabs .wide, html[lang="en"] .tools .save-button .wide { display: none; }
  html[lang="en"] .tabs .narrow, html[lang="en"] .tools .save-button .narrow { display: inline; }
}

/* i18n: map */
/* English day names are longer: on phones the sort buttons share the row and wrap inside;
   the grade badge reads "Grade 4", the small word before the number (Korean puts its unit after) */
@media (max-width: 480px) {
  html[lang="en"] .where-head .seg { flex: 1 1 100%; }
  html[lang="en"] .where-head .seg button { padding: 6px 6px; white-space: normal; line-height: 1.25; }
}
html[lang="en"] .grade-badge .grade-unit { margin: 0 6px 0 0; }
/* i18n: chat privacy link */
.chat-intro .chat-privacy { font-size: 13px; margin-top: 2px; }
.chat-intro .chat-privacy a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }