/* 집 저울 · map chrome, 정비구역 shortcut cards, gauge & dossier (spec-005)
   Map overlays are opaque (no data on blurred glass). Polygon families and
   risk colours come only from design-tokens.css; risk never colours polygons. */

/* ═════════ Screen 2 · map stage ═════════ */
#map { position: relative; overflow: hidden; background: var(--map-land); isolation: isolate; }
/* Bridge: the map engine reads these non-canonical names; point them at design tokens so
   light/dark themes share one source. (--poly-shintong-* already are canonical tokens.) */
#map {
  --map-land-fill: var(--map-land);
  --map-water-fill: var(--map-water);
  --map-water-stroke: var(--map-water);
  --map-district-stroke: var(--map-gu-boundary);
  --map-district-label: var(--map-label);
  --map-selection-halo: var(--poly-halo);
  --poly-comb-fill: var(--poly-union-base);
  --poly-comb-stroke: var(--poly-union-stroke);
  --poly-moatown-fill: var(--poly-moa-base);
  --poly-moatown-stroke: var(--poly-moa-stroke);
  --poly-consent-fill: var(--poly-initial-base);
  --poly-consent-stroke: var(--poly-initial-stroke);
  --brand-primary: var(--selected-surface);
  --surface-elevated: var(--surface-card);
}
/* The map engine writes position:relative inline; the canvas must still fill #map. */
#map-canvas { position: absolute !important; inset: 0; z-index: 0; }
.map-pills { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
/* Engine labels use presentation attributes; CSS wins, so labels and halos follow the theme. */
#map-canvas svg text { fill: var(--map-label); stroke: var(--map-label-halo); paint-order: stroke; font-family: var(--font-brand-hybrid); }

/* Engine pills: normalise inline colours to tokens (opaque neutral surface, inverted when selected). */
.map-pill {
  min-height: 44px !important; min-width: 44px !important;
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card) !important;
  font-family: var(--font-brand-hybrid);
  letter-spacing: 0;
  transition: transform var(--dur-instant) var(--ease-micro);
}
.map-pill::before { content: ""; position: absolute; inset: -8px -2px; }
.map-pill[aria-pressed="true"] {
  background: var(--selected-surface) !important;
  color: var(--selected-text) !important;
  border-color: var(--selected-surface) !important;
}
.map-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.map-tooltip {
  position: absolute; z-index: 15; pointer-events: none; padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--selected-surface); color: var(--selected-text); box-shadow: var(--shadow-card);
}

/* overlay layout: filter stack → (legend | controls) */
.map-chrome {
  position: absolute; top: var(--space-4); left: var(--space-4); right: var(--space-4); z-index: 20;
  display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none;
}
.map-chrome > * { pointer-events: auto; }

#map-filter-stack { min-width: 0; align-self: flex-start; max-width: 100%; }
#map-filter-stack[data-open="false"] .filter-rows { display: none; }
#map-filter-stack[data-open="true"] .filter-rows { margin-top: 8px; max-height: 50dvh; overflow-y: auto; }
.map-filter-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding: 0 8px; border-radius: 0; background: var(--surface-card); color: var(--text-secondary); }
.map-filter-status .btn { min-height: 44px; }
#track-filter .segment { min-height: 44px; min-width: 44px; }
#track-filter .segmented { flex-wrap: wrap; }

.map-filter-open {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--token-radius-full); background: var(--surface-card); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card); font-weight: 600;
}
.filter-rows {
  display: grid; gap: var(--space-2); padding: var(--space-2); min-width: 0; max-width: 100%;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.filter-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; }
.row-label {
  flex-shrink: 0; width: 36px; padding: 0; float: none; text-align: center;
  color: var(--text-muted); font-weight: 700;
}
fieldset.filter-row > legend.row-label { float: left; line-height: 36px; }
.chip-row {
  display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding: 4px 24px 4px 0; margin: -4px 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.chip-row::-webkit-scrollbar { display: none; }
.filter-pill {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; min-width: 44px; padding: 0 var(--space-3); border-radius: var(--token-radius-full);
  border: 1px solid var(--control-border); background: var(--surface-card); color: var(--text-primary); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-micro), color var(--dur-fast) var(--ease-micro), border-color var(--dur-fast) var(--ease-micro);
}
.filter-pill::before { content: ""; position: absolute; inset: -4px 0; }
.filter-pill:hover { border-color: var(--text-primary); }
.filter-pill:active { transform: scale(var(--press-scale)); }
.filter-pill[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }
.pill-count {
  min-width: 20px; padding: 0 6px; border-radius: var(--token-radius-full); text-align: center;
  background: var(--surface-inset); color: var(--text-secondary); font-weight: 700;
}
.filter-pill[aria-pressed="true"] .pill-count { background: color-mix(in srgb, var(--selected-text) 18%, transparent); color: var(--selected-text); }
#track-filter .segmented { flex-shrink: 1; }

.map-float-row { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-3); pointer-events: none; }
.map-float-row > * { pointer-events: auto; }

/* floating legend (collapsible control, never a stacked full panel) */
#map-legend details {
  width: 232px; max-width: 100%;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.legend-summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--touch-target-min); padding: 0 var(--space-3); cursor: pointer; font-weight: 700;
}
.legend-summary::-webkit-details-marker { display: none; }
#map-legend details[open] .legend-summary .ui-icon--chevron { transform: rotate(180deg); }
.legend-body { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.legend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-3); }
.legend-list li:last-child { grid-column: 1 / -1; }
.legend-list li, .legend-carto li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.legend-poly { width: 18px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.legend-poly--shintong { background: var(--poly-shintong-fill); box-shadow: inset 0 0 0 1.5px var(--poly-shintong-stroke), 0 0 0 1px var(--poly-halo); }
.legend-poly--moa { background: var(--poly-moa-fill); box-shadow: inset 0 0 0 1.5px var(--poly-moa-stroke), 0 0 0 1px var(--poly-halo); }
.legend-poly--union { background: var(--poly-union-fill); box-shadow: inset 0 0 0 1.5px var(--poly-union-stroke), 0 0 0 1px var(--poly-halo); }
.legend-poly--initial { background: var(--poly-initial-fill); box-shadow: inset 0 0 0 1.5px var(--poly-initial-stroke), 0 0 0 1px var(--poly-halo); }
.legend-poly--unknown { background: var(--poly-unknown-fill); border: 1.5px dashed var(--poly-unknown-stroke); }
.legend-note { padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-secondary); }
.legend-carto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.carto-key { width: 18px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.carto-key--water { background: var(--map-water); }
.carto-key--park { background: var(--map-park); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--map-label) 20%, transparent); }
.carto-key--gu { height: 0; border-top: 2px dashed var(--map-gu-boundary); border-radius: 0; }
.carto-key--road { height: 6px; background: var(--map-road); box-shadow: 0 0 0 1.5px var(--map-road-casing); }
.carto-key--station { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-card); box-shadow: inset 0 0 0 1.5px var(--map-label); }
.carto-key--dong { height: 0; border-top: 1px dashed var(--map-gu-boundary); border-radius: 0; opacity: .7; }
.carto-key--pier { width: 9px; height: 9px; margin: 0 1px; border-radius: 1px; transform: rotate(45deg); background: var(--map-water); box-shadow: inset 0 0 0 1.2px var(--map-label); }
.carto-key--school { width: 8px; height: 8px; margin: 0 1px; border-radius: 2px; background: var(--risk-caution, #92400e); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.legend-dot--apt { background: var(--surface-card); box-shadow: inset 0 0 0 2px var(--text-secondary); }
.class-swatch--apt { background: var(--surface-card); border: 2px solid var(--text-secondary); border-radius: 50%; box-shadow: none; }
.legend-price { color: var(--text-secondary); }
.price-up { color: var(--price-up); font-weight: 700; }
.price-down { color: var(--price-down); font-weight: 700; }
.price-flat { color: var(--price-flat); font-weight: 700; }

/* top-right map controls */
#map-controls { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.ctrl-group {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.ctrl-group .ctrl-btn + .ctrl-btn { border-top: 1px solid var(--border-subtle); }
.ctrl-btn {
  display: inline-grid; place-items: center; width: var(--touch-target-min); height: var(--touch-target-min);
  color: var(--text-primary); background: var(--surface-card);
  transition: background-color var(--dur-fast) var(--ease-micro);
}
.ctrl-btn:hover { background: var(--surface-inset); }
.ctrl-solo { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.ctrl-btn[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); }
.layer-wrap { position: relative; }
.layer-details > summary { list-style: none; cursor: pointer; }
.layer-details > summary::-webkit-details-marker { display: none; }
.layer-details[open] > summary { background: var(--selected-surface); color: var(--selected-text); }
.layer-panel {
  position: absolute; right: calc(100% + 8px); top: 0; width: 168px; z-index: 22;
  display: grid; gap: 2px; padding: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sheet);
}
.layer-panel > p { padding: 2px var(--space-2) var(--space-1); }
.layer-panel > p:not(:first-child) { margin-top: var(--space-1); }
.map-chrome:has(.layer-details[open]) { z-index: 30; }
.layer-toggle {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target-min); padding: 0 var(--space-2);
  border-radius: var(--radius-sm); text-align: left; font-weight: 600;
}
.layer-toggle::before {
  content: ""; width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--control-border); background: var(--surface-card);
}
.layer-toggle[aria-pressed="true"]::before {
  border-color: var(--selected-surface);
  background: var(--selected-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
html[data-theme="dark"] .layer-toggle[aria-pressed="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2318181B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E");
}
.layer-toggle:hover { background: var(--surface-inset); }

/* accessible list alternative to the map */
.candidate-panel {
  position: absolute; right: calc(var(--space-4) + 52px); top: var(--space-4); z-index: 25;
  width: min(340px, calc(100% - 96px)); max-height: calc(100% - 180px); overflow-y: auto;
  display: grid; gap: var(--space-2); padding: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet);
}
#candidate-list { display: grid; }
.list-row {
  width: 100%; min-height: var(--touch-target-min); display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: var(--space-2); align-items: center;
  padding: 6px var(--space-2); border-radius: var(--radius-sm); text-align: left;
}
.list-row > .type-body { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row > .type-caption { grid-column: 2; }
.list-row:hover { background: var(--surface-inset); }
.list-row[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--text-primary); background: var(--surface-inset); }

/* bottom dock: status banner + selection tray */
.map-dock {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none;
}
.map-dock > * { pointer-events: auto; }
#map-status-banner {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%;
  padding: 6px var(--space-3); border-radius: var(--token-radius-full);
  background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
}
#map-status { font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
#map-attribution { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#map-status-banner[data-mode="UNAVAILABLE"] .status-dot-sm { background: var(--risk-danger); }
#map-status-banner[data-mode="ONLINE"] .status-dot-sm { background: var(--brand-accent); }

#selection-tray {
  width: min(480px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head cta" "chips chips"; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sheet);
}
#selection-tray[data-count="0"] { grid-template-areas: "head cta" "chips chips"; }
.tray-head { grid-area: head; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tray-title { white-space: nowrap; }
.tray-title .numeric { color: var(--text-secondary); font-weight: 700; }
.tray-cta { grid-area: cta; min-height: 44px; padding: 0 var(--space-3); position: relative; }
.tray-cta::before { content: ""; position: absolute; inset: -2px 0; }
.tray-empty { grid-area: chips; color: var(--text-secondary); }
.tray-chips { grid-area: chips; display: flex; gap: var(--space-2); min-width: 0; }
.tray-chip {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; height: var(--touch-target-min);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card);
}
.tray-chip.is-active { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.tray-chip-main { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 0 0 var(--space-2); text-align: left; }
.tray-order {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--token-radius-full);
  background: var(--selected-surface); color: var(--selected-text); font-weight: 700;
}
.tray-text { display: grid; min-width: 0; line-height: 1; }
.tray-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tray-sub { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-chip.is-outside { border-style: dashed; }
.tray-remove { display: inline-grid; place-items: center; width: 44px; height: 100%; color: var(--text-muted); flex-shrink: 0; }
.tray-remove:hover { color: var(--text-primary); }
.tray-slot { flex: 1 1 0; height: var(--touch-target-min); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.tray-flag {
  display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--token-radius-full); white-space: nowrap;
  background: var(--surface-inset); color: var(--text-secondary); font-weight: 600;
}
.tray-flag--pending { border: 1px dashed var(--control-border); overflow: hidden; text-overflow: ellipsis; }

/* ═════════ 3A · 정비구역 shortcut cards ═════════ */
.shortcut-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); }
.shortcut-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease-micro), transform var(--dur-fast) var(--ease-micro);
}
.shortcut-card:hover { border-color: var(--border-strong); transform: translateY(var(--hover-lift)); }
.shortcut-preview { position: relative; height: 160px; background: var(--map-land); border-bottom: 1px solid var(--border-subtle); }
.shortcut-preview-svg { display: block; width: 100%; height: 100%; }
.pv-land { fill: var(--map-land); }
.shortcut-preview-svg.is-map { background: var(--map-land); }
.shortcut-preview-svg.is-map * { vector-effect: non-scaling-stroke; }
.pv-mark { fill: var(--poly-unknown-fill); stroke: var(--poly-unknown-stroke); paint-order: stroke; }
.pv-mark--shintong { fill: var(--poly-shintong-selected-fill); stroke: var(--poly-shintong-stroke); }
.pv-mark--moa { fill: var(--poly-moa-selected-fill); stroke: var(--poly-moa-stroke); }
.pv-mark--union { fill: var(--poly-union-selected-fill); stroke: var(--poly-union-stroke); }
.pv-mark--initial { fill: var(--poly-initial-selected-fill); stroke: var(--poly-initial-stroke); }
.pv-marks { filter: drop-shadow(0 0 1px var(--poly-halo)); }
.pv-poly { stroke-width: 1; vector-effect: non-scaling-stroke; fill: var(--poly-unknown-fill); stroke: var(--poly-unknown-stroke); stroke-dasharray: 2 2; }
.pv-poly--shintong { fill: var(--poly-shintong-selected-fill); stroke: var(--poly-shintong-stroke); stroke-dasharray: none; }
.pv-poly--moa { fill: var(--poly-moa-selected-fill); stroke: var(--poly-moa-stroke); stroke-dasharray: none; }
.pv-poly--union { fill: var(--poly-union-selected-fill); stroke: var(--poly-union-stroke); stroke-dasharray: none; }
.pv-poly--initial { fill: var(--poly-initial-selected-fill); stroke: var(--poly-initial-stroke); stroke-dasharray: none; }
.pv-dot { fill: var(--surface-card); stroke-width: 1.5; stroke: var(--poly-unknown-stroke); }
.pv-dot--shintong { stroke: var(--poly-shintong-stroke); }
.pv-dot--moa { stroke: var(--poly-moa-stroke); }
.pv-dot--union { stroke: var(--poly-union-stroke); }
.pv-dot--initial { stroke: var(--poly-initial-stroke); }
.shortcut-preview-caption {
  position: absolute; left: var(--space-2); bottom: var(--space-2); padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-secondary); box-shadow: var(--shadow-card);
}
.shortcut-preview-empty { display: grid; place-items: center; height: 100%; color: var(--text-muted); }
.shortcut-body { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); flex: 1; }
.shortcut-criteria { min-height: 44px; }
.shortcut-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: var(--radius-sm); overflow: hidden; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.shortcut-metrics > div { display: grid; gap: 0; padding: 6px var(--space-2); background: var(--surface-inset); }
.shortcut-metrics .type-caption { color: var(--text-muted); }
.shortcut-metrics strong { font-weight: 800; }
.shortcut-cta { width: 100%; }
.shortcut-meta { display: grid; gap: 2px; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); color: var(--text-muted); }
.shortcut-meta > div { display: flex; justify-content: space-between; gap: var(--space-2); }
.shortcut-meta dd { color: var(--text-secondary); text-align: right; overflow-wrap: anywhere; }

/* ═════════ 3D · categorical 180° gauge ═════════ */
.gauge-figure { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); }
#gauge { display: block; width: min(100%, 320px); height: auto; overflow: visible; }
#gauge .gauge-track { fill: none; stroke: var(--border-subtle); stroke-width: 8; }
#gauge .gauge-sector { fill: none; stroke-width: 8; stroke-linecap: butt; stroke-opacity: .26; transition: stroke-opacity var(--dur-normal) var(--ease-micro); }
#gauge .gauge-sector--safe { stroke: var(--risk-safe); }
#gauge .gauge-sector--caution { stroke: var(--risk-caution); }
#gauge .gauge-sector--danger { stroke: var(--risk-danger); }
#gauge .gauge-sector.is-on { stroke-opacity: 1; }
#gauge .gauge-unknown-arc { fill: none; stroke: var(--risk-unknown); stroke-width: 8; stroke-dasharray: 6 6; }
#gauge .gauge-unknown-icon circle, #gauge .gauge-unknown-icon path { fill: none; stroke: var(--risk-unknown); stroke-width: 2; stroke-linecap: round; }
#gauge .gauge-unknown-icon .gauge-dot { fill: var(--risk-unknown); stroke: none; }
#gauge .gauge-needle { stroke: var(--text-primary); stroke-width: 3; stroke-linecap: round; }
#gauge .gauge-hub { fill: var(--text-primary); stroke: var(--surface-inset); stroke-width: 2; }
#gauge .gauge-label { fill: var(--text-primary); font-family: var(--font-brand-hybrid); font-weight: 700; }
.gauge-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 320px); text-align: center; }
.gauge-scale > span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--text-muted); }
.gauge-scale > span[data-on="true"] { font-weight: 700; color: var(--text-primary); }
.gauge-scale > span[data-on="false"] .risk-icon { opacity: .6; }
#risk-verdict { display: grid; justify-items: center; gap: var(--space-1); text-align: center; max-width: 420px; }
.verdict-line { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }

/* ═════════ 3E · dossier drawer (modal) ═════════ */
#dossier {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(560px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
  background: var(--surface-card); box-shadow: var(--shadow-sheet); border-left: 1px solid var(--border-subtle);
}
#dossier[open] { animation: drawer-in var(--dur-sheet) var(--ease-spring); }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.dossier-panel { display: flex; flex-direction: column; height: 100%; }
.dossier-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle);
}
.dossier-head h2 { margin-top: 2px; }
.dossier-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--space-6); padding: var(--space-6); }
.dossier-sec { display: grid; gap: var(--space-3); }
.dossier-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-6) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); }
#provenance { display: grid; gap: var(--space-2); }
.prov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: var(--radius-md); overflow: hidden; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.prov-grid > div { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--surface-inset); min-width: 0; }
.prov-grid dt { color: var(--text-muted); }
.prov-grid dd { font-weight: 600; overflow-wrap: anywhere; }
#zone-economics dd:not(.type-title), .prov-grid dd.dossier-source { overflow-wrap: anywhere; word-break: keep-all; hyphens: none; line-height: 1.45; }
.prox-caveat { color: var(--text-secondary); padding: var(--space-1) var(--space-2); border-left: 2px solid var(--risk-caution, #92400e); background: var(--surface-inset); border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0; }

#progress-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); counter-reset: none; }
.step { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.step::after {
  content: ""; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px;
  background: var(--border-strong);
}
.step:nth-child(4n)::after, .step:last-child::after { display: none; }
.step-dot {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--token-radius-full);
  background: var(--surface-card); border: 1.5px solid var(--border-strong); color: var(--text-muted); font-weight: 700;
  font-size: var(--font-body); line-height: 1;
}
.step-label { color: var(--text-secondary); }
.step--past .step-dot { background: var(--surface-inset); color: var(--text-secondary); border-color: var(--control-border); }
.step--past::after { background: var(--control-border); }
.step--current .step-dot { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--selected-surface) 14%, transparent); }
.step--current .step-label { color: var(--text-primary); font-weight: 700; }
.step--unknown .step-dot { border-style: dashed; }
#progress-stepper[data-path="moa"] .step-dot { border-radius: var(--radius-sm); }

#zone-economics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: var(--radius-md); overflow: hidden; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.ze-cell { display: grid; align-content: start; gap: 4px; padding: var(--space-3); background: var(--surface-card); min-width: 0; }
.ze-cell dt { color: var(--text-secondary); font-weight: 600; }
.ze-cell dd.type-title { font-weight: 800; }
.prox-list { display: grid; }
.prox-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.prox-list li > :first-child { color: var(--text-secondary); }
.prox-list li > :last-child { font-weight: 600; text-align: right; }

/* ═════════ Mobile <768 — overlays adapt to the sheet ═════════ */
@media (max-width: 767px) {
  .map-chrome { top: var(--space-3); left: var(--space-3); right: var(--space-3); gap: var(--space-2); }
  .map-filter-open { display: inline-flex; }
  #map-filter-stack[data-open="false"] .filter-rows { display: none; }
  #map-filter-stack[data-open="true"] .filter-rows { margin-top: var(--space-2); }
  #map-legend details { width: auto; max-width: 220px; }
  .layer-panel { right: 0; top: calc(100% + 8px); }
  .candidate-panel { left: var(--space-3); right: var(--space-3); width: auto; top: 64px; max-height: calc(100% - 240px); }
  .map-dock { left: var(--space-3); right: var(--space-3); bottom: calc(140px + var(--space-3)); transition: bottom var(--dur-sheet) var(--ease-spring); }
  /* The map is the subject on a phone: one row of chrome, three buttons, one status line, no empty tray. */
  .map-chrome { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) 6px; }
  :is(#map-filter-stack[data-open="true"], #map-filter-stack[data-filtered="true"]) { grid-column: 1 / -1; }
  .map-float-row { grid-column: 1 / -1; justify-self: end; }
  .map-filter-open { width: 44px; padding: 0; justify-content: center; }
  .map-filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #map-controls .ctrl-group { display: none; } /* pinch and double-tap zoom on a phone */
  /* M6: provenance stays with the exposed map: one line, the required credit whole, the rest truncating (tap opens the full list) */
  #map-status-banner { flex-wrap: nowrap; max-width: 100%; gap: 6px; padding-left: var(--space-2); padding-right: var(--space-2); }
  #map-attribution { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #selection-tray { padding: var(--space-2) var(--space-3); }
  #selection-tray[data-count="0"] { display: none; }
  .tray-empty { display: none; }
  #workspace[data-snap="HALF"] .map-dock { bottom: calc(min(52dvh, var(--vvh, 100dvh) - 324px) + var(--space-3)); }
  #workspace[data-snap="HALF"] :is(#map-filter-stack, #map-legend, #map-controls, #selection-tray) { display: none; }
  .tray-sub { display: none; }
  .tray-chip-main { padding-left: 6px; }
  #workspace[data-snap="FULL"] :is(.map-chrome, .candidate-panel, #selection-tray) { display: none; }
  /* FULL keeps a compact status/source line inside the 64px map strip */
  #workspace[data-snap="FULL"] .map-dock { top: 4px; bottom: auto; }
  #workspace[data-snap="FULL"] #map-status-banner { padding-top: 4px; padding-bottom: 4px; }

  #dossier {
    inset: auto 0 0 0; width: 100vw; height: auto; max-height: calc(100vh - 168px); max-height: calc(100dvh - 104px - 64px);
    border-left: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  #dossier[open] { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
  .dossier-head { padding-left: var(--space-4); }
  .dossier-scroll { padding: var(--space-4); gap: var(--space-4); }
  .dossier-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  #zone-economics { grid-template-columns: minmax(0, 1fr); }
  .prov-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) and (max-height: 699px) {
  #map-filter-stack[data-open="true"] .filter-rows { max-height: 35dvh; }
}

@media (max-width: 767px) { #workspace[data-snap="FULL"] .map-pills { visibility: hidden; } }

/* ═════════ v31 background map + map-index overlay ═════════ */
#map-basemap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#map-basemap .basemap-level img { display: block; user-select: none; }
html[data-theme="dark"] #map-basemap .basemap-level img { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); }
/* Layers the background already draws: the toggle would do nothing over it. */
html[data-basemap="raster"] .layer-toggle[data-layer="parks"], html[data-basemap="kakao"] .layer-toggle[data-layer="parks"] { display: none; }
html[data-basemap="raster"] [data-offline-only], html[data-basemap="kakao"] [data-offline-only] { display: none; }
/* Kakao's logo and copyright sit at the map's bottom edge: the dock keeps clear of them. */
html[data-basemap="kakao"] .map-dock { margin-bottom: 28px; }

#map-basemap-attr { flex: none; font-weight: 600; white-space: nowrap; }
#map-basemap-attr a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#map-status-banner { min-width: 0; }

.map-cluster {
  position: absolute; left: 0; top: 0; min-width: 58px; height: 36px; padding: 2px 8px 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: center;
  background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  font-family: var(--font-brand-hybrid); cursor: pointer; will-change: transform; white-space: nowrap;
}
.map-cluster::before { content: ""; position: absolute; inset: -6px -2px; }
.map-cluster:hover { border-color: var(--text-primary); z-index: 2; }
.map-cluster:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; z-index: 2; }
.map-cluster[data-failed="true"] { border-style: dashed; }
.cluster-name { font-size: var(--font-caption); line-height: 16px; font-weight: 600; text-align: left; }
.cluster-count { font-size: var(--font-caption); line-height: 16px; font-weight: 800; }
.cluster-bar { grid-column: 1 / -1; display: flex; gap: 1px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--surface-inset); }
.cluster-bar > span { display: block; min-width: 1px; }
.map-cluster[data-tier="dong"] { height: 26px; padding: 2px 6px 4px; border-radius: var(--radius-sm); }
.map-cluster[data-tier="dong"] .cluster-bar { height: 2px; }
.map-cluster[data-tier="dong"] .cluster-name { font-weight: 500; }
.map-cluster[data-tier="dong"]::before { inset: -9px -2px; }

#map-layer-bar { align-self: flex-start; max-width: 100%; }
.layer-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.layer-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; position: relative;
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--token-radius-full); box-shadow: var(--shadow-card);
  color: var(--text-primary); font-weight: 600; white-space: nowrap; cursor: pointer; list-style: none;
}
.layer-chip::before { content: ""; position: absolute; inset: -4px 0; }
.layer-chip::-webkit-details-marker { display: none; }
.layer-chip[aria-pressed="false"] { background: var(--surface-inset); color: var(--text-muted); box-shadow: none; text-decoration: line-through; }
.layer-chip[aria-pressed="false"] svg { opacity: .35; }
.layer-chip--plain { font-weight: 500; }
.layer-legend { position: relative; }
.layer-legend-body {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; width: 240px; display: grid; gap: var(--space-2); padding: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sheet);
}
.legend-layer ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.legend-layer li, .legend-basemap li { display: inline-flex; align-items: center; gap: 6px; }
.legend-basemap { display: grid; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.legend-line { width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #0052A4 0 33%, #00A84D 33% 66%, #EF7C1C 66%); }
.cluster-bar--demo { width: 18px; }

.grade-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); font-size: var(--font-caption); line-height: 16px; font-weight: 700; white-space: nowrap; color: var(--text-secondary); background: var(--surface-card); }
.grade-badge[data-grade="verified"], .grade-badge[data-grade="decision"] { color: var(--selected-text); background: var(--selected-surface); border-color: var(--selected-surface); }
.grade-badge[data-grade="experimental"], .grade-badge[data-grade="assumed"] { border-style: dashed; color: var(--risk-caution); }
.grade-badge[data-grade="no-verdict"] { color: var(--text-muted); }

.map-item-card {
  position: absolute; top: 116px; left: var(--space-4); z-index: 22; width: min(320px, calc(100% - 2 * var(--space-4))); max-height: calc(100% - 260px); overflow-y: auto;
  display: grid; gap: var(--space-2); padding: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet);
}
.item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.item-head h3 { min-width: 0; overflow-wrap: anywhere; }
.item-badges, .item-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.item-chip { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface-inset); font-size: var(--font-caption); line-height: 16px; }
.item-meta, .item-note, .item-loading { color: var(--text-secondary); }
.item-band { display: grid; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.item-band-head { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); font-size: var(--font-caption); line-height: 16px; }
.item-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.item-actions .btn { min-height: 44px; }

.unmapped-table { width: 100%; border-collapse: collapse; }
.unmapped-table th, .unmapped-table td { padding: var(--space-2); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: middle; }
.unmapped-table th { font-weight: 700; white-space: nowrap; }
.unmapped-table th svg { margin-right: 6px; vertical-align: -3px; }
.unmapped-list { display: grid; gap: 2px; max-height: 40dvh; overflow-y: auto; }
.unmapped-list li { display: grid; padding: var(--space-2); border-bottom: 1px solid var(--border-subtle); }

.dev-key-form { display: grid; gap: 4px; padding-top: var(--space-2); margin-top: var(--space-2); border-top: 1px dashed var(--border-strong); }
.dev-key-form input { width: 100%; min-height: 36px; padding: 0 var(--space-2); border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); }

/* Filter status: one quiet line beside its opener, not a white block over the map. */
#map-filter-stack[data-open="false"] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.map-filter-status { margin-top: 0; padding: 0; background: transparent; }
#map-active-filter-summary { display: none; }
.map-filter-status .btn { display: none; }
#map-filter-stack[data-filtered="true"] #map-active-filter-summary { display: inline; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: var(--shadow-card); }
#map-filter-stack[data-filtered="true"] .map-filter-status .btn { display: inline-flex; align-items: center; background: var(--surface-card); min-height: 36px; box-shadow: var(--shadow-card); }

@media (max-width: 767px) {
  #map-layer-bar { width: 100%; }
  .layer-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; margin-bottom: -8px; }
  .layer-chips::-webkit-scrollbar { display: none; }
  .layer-legend { position: static; }
  .layer-legend-body { left: 0; right: auto; }
  .map-item-card { top: 108px; left: var(--space-3); width: calc(100% - 2 * var(--space-3)); max-height: calc(100% - 320px); }
  #workspace[data-snap="HALF"] #map-layer-bar { display: none; }
  #workspace[data-snap="FULL"] #map-layer-bar { display: none; }
}
.map-cluster[hidden] { display: none; }
.map-cluster[data-compact="true"][data-tier="gu"] { height: 28px; min-width: 0; padding: 2px 6px 4px; }
.map-cluster[data-compact="true"][data-tier="gu"] .cluster-bar { height: 2px; }
.map-cluster[data-compact="true"][data-tier="gu"]::before { inset: -8px -2px; }