:root {
  --green-950: #08261f;
  --green-900: #0b342a;
  --green-800: #105442;
  --green-700: #0d7557;
  --green-600: #07966b;
  --green-500: #0bad78;
  --green-100: #dff7ed;
  --green-50: #f0fbf7;
  --blue-600: #3678e8;
  --orange-500: #e99a24;
  --yellow-500: #d4a600;
  --red-500: #e55757;
  --purple-700: #6d28d9;
  --purple-600: #7c3aed;
  --purple-100: #ede9fe;
  --amber-500: #f59e0b;
  --slate-950: #111c19;
  --slate-800: #283b36;
  --slate-600: #60716c;
  --slate-400: #97a6a1;
  --slate-200: #dce5e2;
  --slate-100: #edf2f0;
  --white: #fff;
  --shadow: 0 14px 40px rgba(12, 43, 34, .14);
  --font: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { color: var(--slate-950); font-family: var(--font); background: #e9efed; overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(54,120,232,.45); outline-offset: 2px; }
.is-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.topbar {
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; color: var(--white); background: linear-gradient(110deg, var(--green-950), var(--green-800));
  box-shadow: 0 2px 18px rgba(4, 24, 18, .22); position: relative; z-index: 1000;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: 34px; display: grid; place-items: center; background: #fff; color: var(--green-900); transform: skew(-12deg); border-radius: 3px 10px 3px 10px; }
.brand-mark span { font-weight: 900; letter-spacing: -.08em; transform: skew(12deg); }
.brand strong { display: block; font-size: 20px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .02em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.compare-button, .evidence-button { height: 36px; padding: 0 13px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 9px; font-size: 11px; font-weight: 800; }
.compare-button:hover, .evidence-button:hover { background: rgba(255,255,255,.2); }
.sync-state { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.82); }
.sync-state span { width: 8px; height: 8px; background: #7fe8bd; border-radius: 50%; box-shadow: 0 0 0 5px rgba(127,232,189,.13); }
.sync-state.is-error span { background: #ff8f8f; }
.icon-button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.08); border-radius: 10px; font-size: 22px; }

.workspace { height: calc(100vh - 72px); display: grid; grid-template-columns: 326px minmax(0, 1fr); }
.control-panel { position: relative; z-index: 600; overflow-y: auto; padding: 16px; background: rgba(255,255,255,.98); border-right: 1px solid var(--slate-200); box-shadow: 7px 0 25px rgba(17, 44, 36, .06); }
.control-panel-mobile-header { display: none; }
.panel-section { padding: 16px 0; border-bottom: 1px solid var(--slate-100); }
.search-section { position: relative; padding-bottom: 4px; }
.search-box { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.search-box input { min-width: 0; height: 42px; padding: 0 13px; border: 1px solid var(--slate-200); border-radius: 9px; outline: none; background: #f9fbfa; }
.search-box input:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(7,150,107,.1); }
.search-box button { padding: 0 14px; color: #fff; background: var(--green-700); border: 0; border-radius: 9px; font-weight: 700; }
.search-results { position: absolute; top: 48px; left: 0; right: 0; max-height: 340px; overflow-y: auto; z-index: 900; background: #fff; border: 1px solid var(--slate-200); border-radius: 10px; box-shadow: var(--shadow); }
.search-result { display: block; width: 100%; padding: 11px 12px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--slate-100); }
.search-result:hover { background: var(--green-50); }
.search-result strong { display: block; margin-bottom: 3px; font-size: 13px; }
.search-result span { display: block; color: var(--slate-600); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-history-head { display: flex; min-height: 42px; padding: 8px 10px 7px 12px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--slate-100); }
.search-history-head strong { color: var(--slate-800); font-size: 12px; }
.search-history-head button { min-height: 32px; padding: 0 5px; color: var(--slate-600); background: transparent; border: 0; font-size: 10px; font-weight: 700; }
.search-history-item { display: grid; min-height: 44px; grid-template-columns: minmax(0,1fr) 44px; align-items: stretch; border-bottom: 1px solid var(--slate-100); }
.search-history-query, .search-history-remove { background: #fff; border: 0; }
.search-history-query { min-width: 0; padding: 10px 4px 10px 12px; text-align: left; }
.search-history-query span { display: block; color: var(--slate-700); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-history-remove { color: var(--slate-500); font-size: 20px; line-height: 1; }
.search-history-query:hover, .search-history-remove:hover { background: var(--green-50); }

.section-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 13px; }
.eyebrow { display: block; margin-bottom: 3px; color: var(--green-600); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
h2 { margin: 0; font-size: 16px; letter-spacing: -.03em; }
.text-button { padding: 3px; color: var(--slate-600); background: none; border: 0; font-size: 11px; }
.field-label { display: block; margin: 10px 0 5px; color: var(--slate-600); font-size: 11px; font-weight: 700; }
select, .filter-section input[type="text"] { width: 100%; height: 38px; padding: 0 10px; color: var(--slate-800); background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; outline: none; }
.two-column-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.quick-filters button { min-height: 35px; padding: 7px; color: var(--slate-600); background: var(--slate-100); border: 1px solid transparent; border-radius: 8px; font-size: 11px; font-weight: 700; }
.quick-filters button.is-active { color: var(--green-800); background: var(--green-100); border-color: #a9e0cb; }
.advanced-filter { margin: 12px 0; border-top: 1px dashed var(--slate-200); border-bottom: 1px dashed var(--slate-200); }
.advanced-filter summary { padding: 10px 0; color: var(--slate-600); font-size: 11px; font-weight: 700; }
.range-fields { padding: 0 0 10px; display: grid; gap: 6px; }
.range-fields label { display: flex; align-items: center; justify-content: space-between; color: var(--slate-600); font-size: 11px; }
.range-fields input { width: 72px; height: 30px; padding: 0 8px; border: 1px solid var(--slate-200); border-radius: 6px; }
.primary-button { width: 100%; height: 42px; color: #fff; background: linear-gradient(110deg, var(--green-700), var(--green-500)); border: 0; border-radius: 9px; font-weight: 800; box-shadow: 0 7px 16px rgba(7,150,107,.18); }

.source-section h2 { margin-bottom: 12px; }
.source-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.source-tabs button { height: 34px; padding: 0 4px; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; font-size: 10px; font-weight: 800; }
.source-tabs button.is-active { color: #fff; background: var(--slate-800); border-color: var(--slate-800); }
.source-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px; margin: 10px 0; color: var(--slate-600); font-size: 9px; }
.source-legend span { display: inline-flex; align-items: center; gap: 5px; }
.public-dot, .public-only-dot, .private-dot, .private-only-dot, .mixed-dot, .unresolved-dot, .conflict-dot, .count-conflict-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green-600); }
.private-dot, .private-only-dot { background: var(--purple-600); }
.mixed-dot { background: var(--orange-500); }
.unresolved-dot { background: var(--yellow-500); }
.conflict-dot, .count-conflict-dot { background: var(--red-500); }
.apartment-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.apartment-filters label { color: var(--slate-600); font-size: 9px; font-weight: 700; }
.apartment-filters select { margin-top: 4px; height: 34px; font-size: 10px; }
.apartment-filters .full-field { grid-column: 1 / -1; }

.metric-section h2 { margin-bottom: 12px; }
.metric-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.metric-tabs button { height: 34px; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; font-size: 11px; font-weight: 700; }
.metric-tabs button.is-active { color: #fff; background: var(--green-800); border-color: var(--green-800); }
.legend { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: var(--slate-600); font-size: 10px; }
.legend-scale { flex: 1; height: 7px; background: var(--legend-gradient, linear-gradient(90deg,#fff 0 47%,#17395c 53% 100%)); border: 1px solid rgba(23,57,92,.18); border-radius: 99px; }
.future-section, .apartment-summary { margin: 15px 0 4px; padding: 13px; color: #416158; background: linear-gradient(145deg, #eef7f3, #f8fbfa); border: 1px solid #dcebe5; border-radius: 10px; }
.future-title { display: flex; justify-content: space-between; align-items: center; }
.future-title span { font-size: 12px; font-weight: 800; }
.future-title small { color: var(--green-600); font-size: 9px; }
.future-section ul { margin: 9px 0 0; padding-left: 16px; font-size: 10px; line-height: 1.7; }
.mini-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.mini-stat-grid div { padding: 8px; background: rgba(255,255,255,.8); border: 1px solid #e2ece8; border-radius: 7px; }
.mini-stat-grid span { display: block; color: var(--slate-600); font-size: 8px; }
.mini-stat-grid strong { display: block; margin-top: 2px; color: var(--slate-800); font-size: 13px; }
.summary-reference { margin: 9px 0 0; color: var(--slate-600); font-size: 8px; line-height: 1.45; }
.data-policy-section h2 { margin-bottom: 11px; }
.source-date-list { display: grid; gap: 7px; margin: 0; }
.source-date-list div { display: grid; grid-template-columns: 78px 1fr; gap: 2px 8px; padding: 8px 9px; background: #f8fbfa; border: 1px solid var(--slate-100); border-radius: 8px; }
.source-date-list dt { color: var(--slate-800); font-size: 10px; font-weight: 800; }
.source-date-list dd { margin: 0; color: var(--green-700); font-size: 9px; font-weight: 800; text-align: right; }
.source-date-list small { grid-column: 1 / -1; color: var(--slate-600); font-size: 8px; line-height: 1.45; }
.data-policy-note { margin: 8px 0 0; padding: 9px; color: var(--slate-600); background: #fff8df; border: 1px solid #f4e3a7; border-radius: 8px; font-size: 9px; line-height: 1.55; }
.data-policy-note strong { color: #725c00; }
.number-type-guide { margin-top: 9px; background: #f8fbfa; border: 1px solid var(--slate-100); border-radius: 8px; }
.number-type-guide summary { padding: 9px; color: var(--slate-700); font-size: 9px; font-weight: 800; }
.number-type-guide dl { display: grid; gap: 5px; margin: 0; padding: 0 9px 9px; }
.number-type-guide dl div { display: grid; grid-template-columns: 72px 1fr; gap: 6px; }
.number-type-guide dt { color: var(--green-800); font-size: 8px; font-weight: 800; }
.number-type-guide dd { margin: 0; color: var(--slate-600); font-size: 8px; line-height: 1.45; }
.service-version { margin-top: 9px; color: var(--slate-400); font-size: 8px; text-align: right; }
.service-version span { font-weight: 800; }

.map-stage { position: relative; min-width: 0; overflow: hidden; }
#map { position: absolute; inset: 0; background: #dfe8e4; }
.map-type-legend { position: absolute; z-index: 520; right: 14px; bottom: 92px; display: flex; gap: 10px; padding: 7px 10px; color: var(--slate-700); background: rgba(255,255,255,.94); border: 1px solid var(--slate-200); border-radius: 9px; box-shadow: 0 6px 18px rgba(18,53,42,.12); font-size: 9px; transition: right .22s ease; }
.map-stage.detail-open .map-type-legend { right: 354px; }
.map-type-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.type-legend-icon { display: inline-block; width: 15px; height: 15px; background: #fff; border: 2px solid #17395c; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(23,57,92,.16); }
.type-legend-icon.is-apartment { border-radius: 4px; }
.type-legend-icon.is-station { width: 14px; height: 14px; background: #17395c; border-color: #17395c; border-radius: 50%; }
.type-legend-icon b { display: none; }
.comparison-panel { position: absolute; z-index: 800; inset: 14px; padding: 18px; overflow: auto; color: var(--slate-950); background: rgba(249,252,251,.98); border: 1px solid var(--slate-200); border-radius: 15px; box-shadow: 0 20px 60px rgba(9,39,30,.2); backdrop-filter: blur(14px); }
.comparison-header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--slate-200); }
.comparison-header h2 { font-size: 21px; }
.comparison-header p { margin: 5px 0 0; color: var(--slate-600); font-size: 10px; }
.comparison-close { width: 34px; height: 34px; flex: 0 0 auto; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 9px; font-size: 22px; }
.comparison-tabs { display: flex; gap: 7px; margin: 14px 0; }
.comparison-tabs button { min-width: 108px; height: 36px; padding: 0 12px; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 9px; font-size: 11px; font-weight: 800; }
.comparison-tabs button.is-active { color: #fff; background: var(--green-800); border-color: var(--green-800); }
.comparison-toolbar { padding: 12px; background: #fff; border: 1px solid var(--slate-200); border-radius: 11px; }
.comparison-toolbar-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 9px; }
.comparison-toolbar-heading strong { font-size: 12px; }
.comparison-toolbar-heading span { color: var(--slate-600); font-size: 9px; }
.comparison-selector-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 6px; max-height: 150px; overflow-y: auto; }
.comparison-choice { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 8px; color: var(--slate-800); background: #f8fbfa; border: 1px solid var(--slate-100); border-radius: 8px; font-size: 10px; }
.comparison-choice input { accent-color: var(--green-700); }
.comparison-choice small { margin-left: auto; color: var(--slate-400); font-size: 8px; }
.comparison-run { display: block; width: 160px; height: 38px; margin: 10px 0 0 auto; color: #fff; background: var(--green-700); border: 0; border-radius: 9px; font-size: 11px; font-weight: 800; }
.comparison-notice { margin: 10px 0; padding: 9px 11px; color: #725c00; background: #fff8df; border: 1px solid #f4e3a7; border-radius: 9px; font-size: 9px; line-height: 1.55; }
.comparison-notice.is-error { color: #9f3030; background: #fff0f0; border-color: #f2c5c5; }
.comparison-results { min-height: 180px; }
.comparison-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; }
.comparison-card { position: relative; padding: 13px; background: #fff; border: 1px solid var(--slate-200); border-radius: 11px; overflow: hidden; }
.comparison-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--green-600); }
.comparison-card header { display: flex; align-items: start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.comparison-card h3 { margin: 0; font-size: 14px; }
.comparison-card header small { display: block; margin-top: 3px; color: var(--slate-400); font-size: 8px; }
.quality-badge { padding: 3px 6px; color: var(--green-800); background: var(--green-100); border-radius: 99px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.quality-badge.is-partial { color: #7b5d00; background: #fff3bf; }
.comparison-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.comparison-kpis div { padding: 8px; background: #f6faf8; border-radius: 7px; }
.comparison-kpis span { display: block; color: var(--slate-600); font-size: 8px; }
.comparison-kpis strong { display: block; margin-top: 2px; font-size: 13px; }
.number-context { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; margin-top: 8px; padding: 7px; color: var(--slate-600); background: var(--slate-100); border-radius: 7px; }
.number-context > span { color: var(--green-800); font-size: 7px; font-weight: 900; }
.number-context > small { font-size: 7px; line-height: 1.35; }
.comparison-bar { height: 7px; margin: 11px 0 5px; overflow: hidden; background: var(--slate-100); border-radius: 99px; }
.comparison-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--green-500),var(--green-700)); border-radius: inherit; }
.comparison-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; color: var(--slate-400); font-size: 8px; }
.map-link-button { padding: 5px 7px; color: var(--green-800); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 6px; font-size: 8px; font-weight: 800; }
.timeline-grid { display: grid; grid-template-columns: repeat(6,minmax(130px,1fr)); gap: 9px; min-width: 790px; align-items: end; }
.timeline-scroll { overflow-x: auto; padding-bottom: 5px; }
.timeline-month { display: grid; grid-template-rows: 120px auto; gap: 7px; }
.timeline-column { display: flex; align-items: end; justify-content: center; height: 120px; background: linear-gradient(#f8fbfa,#edf5f1); border-radius: 8px 8px 3px 3px; }
.timeline-column i { width: 54%; min-height: 6px; background: linear-gradient(180deg,var(--green-500),var(--green-800)); border-radius: 6px 6px 2px 2px; }
.timeline-month article { padding: 9px; background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; }
.timeline-month strong,.timeline-month span,.timeline-month small { display: block; }
.evidence-panel { position: absolute; z-index: 810; inset: 14px; padding: 18px; overflow: auto; color: var(--slate-950); background: rgba(249,252,251,.99); border: 1px solid var(--slate-200); border-radius: 15px; box-shadow: 0 20px 60px rgba(9,39,30,.2); backdrop-filter: blur(14px); }
.evidence-header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--slate-200); }
.evidence-header h2 { font-size: 21px; }
.evidence-header p { margin: 5px 0 0; color: var(--slate-600); font-size: 10px; }
.evidence-close { width: 34px; height: 34px; flex: 0 0 auto; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 9px; font-size: 22px; }
.evidence-loading { margin: 18px 0; padding: 14px; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 10px; font-size: 11px; }
.evidence-content { max-width: 1120px; margin: 0 auto; }
.evidence-section { padding: 22px 0; border-bottom: 1px solid var(--slate-200); }
.evidence-section:last-child { border-bottom: 0; }
.evidence-section > h3, .evidence-section-heading h3 { margin: 0 0 12px; font-size: 17px; }
.evidence-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.evidence-section-heading > p { margin: 0 0 12px; color: var(--slate-600); font-size: 9px; text-align: right; }
.evidence-metric-grid, .accuracy-evidence-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.evidence-metric-grid article, .accuracy-evidence-grid article { padding: 13px; background: #fff; border: 1px solid var(--slate-200); border-radius: 11px; }
.evidence-metric-grid span, .accuracy-evidence-grid span { display: block; color: var(--slate-600); font-size: 9px; }
.evidence-metric-grid strong, .accuracy-evidence-grid strong { display: block; margin-top: 5px; color: var(--green-900); font-size: 20px; font-variant-numeric: tabular-nums; }
.evidence-metric-grid strong small, .accuracy-evidence-grid strong small { display: inline; margin-left: 3px; color: var(--slate-600); font-size: 9px; }
.evidence-metric-grid p, .accuracy-evidence-grid p { min-height: 26px; margin: 6px 0 0; color: var(--slate-400); font-size: 8px; line-height: 1.55; }
.spatial-evidence-grid, .use-case-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.spatial-evidence-grid article, .use-case-grid article { padding: 14px; color: #25493d; background: linear-gradient(145deg,#eef7f3,#fff); border: 1px solid #dcebe5; border-radius: 11px; }
.spatial-evidence-grid strong, .use-case-grid strong { font-size: 12px; }
.spatial-evidence-grid p, .use-case-grid p { margin: 7px 0 0; color: var(--slate-600); font-size: 9px; line-height: 1.65; }
.evidence-limit-note { margin: 10px 0 0; padding: 10px 12px; color: #725c00; background: #fff8df; border: 1px solid #f4e3a7; border-radius: 9px; font-size: 9px; line-height: 1.6; }
.source-evidence-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.source-evidence-list article { padding: 13px; background: #fff; border: 1px solid var(--slate-200); border-radius: 11px; }
.source-evidence-list header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.source-evidence-list header strong { font-size: 12px; }
.source-evidence-list header span { padding: 3px 6px; color: var(--green-800); background: var(--green-100); border-radius: 99px; font-size: 8px; font-weight: 800; }
.source-evidence-list > article > p { margin: 7px 0; color: var(--slate-600); font-size: 9px; }
.source-evidence-list dl { display: grid; gap: 5px; margin: 0; }
.source-evidence-list dl div { display: grid; grid-template-columns: 62px 1fr; gap: 7px; }
.source-evidence-list dt { color: var(--slate-400); font-size: 8px; }
.source-evidence-list dd { margin: 0; color: var(--slate-700); font-size: 8px; line-height: 1.45; }
.evidence-methodology ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.evidence-methodology li { padding: 11px; background: #fff; border: 1px solid var(--slate-200); border-radius: 9px; }
.evidence-methodology li strong, .evidence-methodology li span { display: block; }
.evidence-methodology li strong { color: var(--green-800); font-size: 10px; }
.evidence-methodology li span { margin-top: 4px; color: var(--slate-600); font-size: 8px; line-height: 1.55; }
.evidence-methodology > p { margin: 10px 0 0; color: var(--slate-600); font-size: 8px; }
.timeline-month strong { font-size: 11px; }
.timeline-month span { margin-top: 4px; color: var(--slate-800); font-size: 9px; }
.timeline-month small { margin-top: 2px; color: var(--slate-400); font-size: 8px; }
.timeline-month em { display: block; margin-top: 3px; color: #8a6a00; font-size: 7px; font-style: normal; }
.leaflet-container { font-family: var(--font); }
.leaflet-control-zoom a { color: var(--green-900) !important; }
.map-overlay { position: absolute; z-index: 500; }
.kpi-strip { top: 14px; left: 14px; right: 14px; display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); background: rgba(255,255,255,.95); border: 1px solid rgba(210,224,219,.95); border-radius: 13px; box-shadow: var(--shadow); backdrop-filter: blur(12px); transition: right .22s ease; }
.map-stage.detail-open .kpi-strip { right: 354px; }
.kpi-strip article { position: relative; min-width: 0; padding: 10px 34px 10px 14px; border-right: 1px solid var(--slate-100); }
.kpi-strip article:last-child { border-right: 0; }
.kpi-strip span { display: block; color: var(--slate-600); font-size: 10px; }
.kpi-strip strong { display: inline-block; margin-top: 2px; font-size: 20px; letter-spacing: -.04em; }
.kpi-strip .kpi-unit { margin-left: 3px; color: var(--slate-400); font-size: 9px; }
.kpi-strip article > p { margin: 3px 0 0; color: var(--slate-500); font-size: 7px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.number-help { position: relative; display: inline-block; }
.number-help summary { width: 18px; height: 18px; display: grid; place-items: center; color: var(--green-800); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 50%; font-size: 9px; font-weight: 900; list-style: none; cursor: pointer; }
.number-help summary::-webkit-details-marker { display: none; }
.number-help p { position: absolute; z-index: 1200; right: 0; top: 22px; width: 190px; margin: 0; padding: 9px; color: var(--slate-700); background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; box-shadow: var(--shadow); font-size: 8px; line-height: 1.55; }
.number-help p strong { display: block; margin-bottom: 2px; color: var(--green-800); font-size: 7px; letter-spacing: .04em; }
.kpi-strip > article > .number-help { position: absolute; top: 9px; right: 9px; }
.map-status { left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 13px; color: var(--slate-800); background: rgba(255,255,255,.94); border: 1px solid var(--slate-200); border-radius: 99px; box-shadow: 0 7px 20px rgba(18,53,42,.12); font-size: 10px; }

.cluster-marker, .station-marker, .apartment-marker { border: 0 !important; background: transparent !important; }
.cluster-bubble { display: grid; place-items: center; width: var(--cluster-size,44px); height: var(--cluster-size,44px); max-width: 44px; max-height: 44px; color: #fff; background: #2f4358; border: 2px solid rgba(255,255,255,.98); border-radius: 50%; box-shadow: 0 0 0 3px rgba(35,54,74,.2), 0 4px 12px rgba(18,42,71,.3), inset 0 0 0 1px rgba(255,255,255,.14); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.cluster-bubble.is-metric { color: var(--marker-text-color,#fff); background: var(--marker-color,#17395c); }
.cluster-bubble strong { font-size: 12px; }
.cluster-bubble small { font-size: 8px; opacity: .86; }
.station-pin { display: grid; place-items: center; width: 29px; height: 29px; color: var(--marker-text-color,#fff); background: var(--marker-color,#17395c); border: 2px solid rgba(255,255,255,.96); border-radius: 50%; box-shadow: 0 3px 10px rgba(13,42,68,.26); transition: transform .14s ease, box-shadow .14s ease; }
.station-pin strong, .apartment-pin strong { position: relative; z-index: 2; display: block; max-width: calc(100% - 4px); overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -.04em; text-align: center; text-overflow: clip; text-shadow: 0 1px 2px rgba(0,0,0,.3); font-variant-numeric: tabular-nums; }
.apartment-cluster { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: #17395c; background: #fff; border: 3px solid #17395c; border-radius: 14px; box-shadow: 0 5px 18px rgba(13,42,68,.24); text-shadow: none; }
.apartment-cluster strong { font-size: 12px; }
.apartment-cluster small { font-size: 8px; opacity: .9; }
.apartment-pin { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: #17395c; background: #fff; border: 2px solid #17395c; border-radius: 9px; box-shadow: 0 3px 11px rgba(13,42,68,.24); transition: transform .14s ease, box-shadow .14s ease; }
.marker-status-dot { position: absolute; z-index: 3; top: -3px; right: -3px; width: 8px; height: 8px; background: #87939d; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(13,42,68,.22); }
.apartment-cluster .marker-status-dot { top: -4px; right: -4px; width: 10px; height: 10px; }
.marker-status-dot.is-public-only { background: #2d8b70; }
.marker-status-dot.is-private-only { background: #7652a8; }
.marker-status-dot.is-mixed { background: #df8a3f; }
.marker-status-dot.is-unresolved, .marker-status-dot.is-none { background: #87939d; }
.marker-status-dot.is-count-conflict { background: #c8403f; }
.station-pin.is-selected, .apartment-pin.is-selected { transform: scale(1.14); outline: 3px solid rgba(255,255,255,.98); outline-offset: 1px; box-shadow: 0 0 0 6px rgba(13,42,68,.5), 0 7px 18px rgba(13,42,68,.36); }
.apartment-pin.has-count-conflict.is-selected { box-shadow: 0 0 0 6px rgba(13,42,68,.5), 0 7px 18px rgba(13,42,68,.36); }

[data-kind="A0"] { --kind-color: #2f6bff; }
[data-kind="B0"] { --kind-color: #3fa9f5; }
[data-kind="C0"] { --kind-color: #65c94a; }
[data-kind="D0"] { --kind-color: #8e62e8; }
[data-kind="E0"] { --kind-color: #ff8a1f; }
[data-kind="F0"] { --kind-color: #555; }
[data-kind="G0"] { --kind-color: #9e9e9e; }
[data-kind="H0"] { --kind-color: #ff4d4f; }
[data-kind="I0"] { --kind-color: #f4c430; }
[data-kind="J0"] { --kind-color: #e255c9; }
.station-pin.kind-marker { position: relative; width: 30px; height: 30px; color: #fff; background: #243b53; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--kind-color,#9e9e9e), 0 4px 10px rgba(18,42,71,.34); font-variant-numeric: tabular-nums; }
.station-pin.kind-marker.is-h0 { width: 32px; height: 32px; border-radius: 8px; }
.station-pin.kind-marker.is-metric { color: var(--marker-text-color,#fff); background: var(--marker-color,#17395c); box-shadow: 0 4px 10px rgba(18,42,71,.34); }
.station-pin.kind-marker.is-selected { transform: scale(1.16); outline: 3px solid #ffd84d; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(255,216,77,.42), 0 8px 18px rgba(18,42,71,.4); }
.station-pin.kind-marker strong { color: inherit; font-weight: 850; }
.station-pin.kind-marker.digits-3 strong { font-size: 10px; }
.station-pin.kind-marker.digits-4 strong { font-size: 9px; letter-spacing: -.07em; }
.mix-badge { position: absolute; z-index: 2; right: -11px; bottom: -9px; min-width: 26px; padding: 3px 5px; border: 1.5px solid #fff; border-radius: 999px; color: #fff; background: #566678; box-shadow: 0 2px 6px rgba(20,43,69,.38); font-size: 9px; font-weight: 850; line-height: 1; text-align: center; }
.mix-badge.is-f, .mix-chip.is-f { background: #c9364c; }
.mix-badge.is-f-plus-s, .mix-chip.is-f-plus-s { background: #b85a00; }
.mix-badge.is-s, .mix-chip.is-s { background: #087d91; }
.bus-badge { position: absolute; z-index: 3; top: -9px; left: -11px; min-width: 24px; padding: 3px 4px; border: 1.5px solid #fff; border-radius: 999px; color: #fff; background: #6842c2; box-shadow: 0 2px 6px rgba(48,34,91,.35); font-size: 7px; font-weight: 850; line-height: 1; text-align: center; }
.kind-marker.is-metric .mix-badge, .kind-marker.is-metric .bus-badge { display: none; }
.classification-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0; }
.classification-strip span { padding: 4px 7px; color: var(--slate-700); background: var(--slate-100); border-radius: 999px; font-size: 9px; font-weight: 750; }
.classification-strip .kind-chip { color: #fff; background: var(--kind-color,#566678); }
.classification-strip .mix-chip, .classification-strip .bus-chip { color: #fff; }
.classification-strip .bus-chip { background: #6842c2; }
.feature-legend { margin-top: 9px; color: var(--slate-600); font-size: 9px; }
.feature-legend summary { cursor: pointer; font-weight: 800; }
.kind-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin: 8px 0; }
.kind-legend-grid span { display: flex; align-items: center; gap: 5px; }
.kind-legend-grid i { width: 9px; height: 9px; background: var(--kind-color,#9e9e9e); border-radius: 50%; }
.feature-legend p { margin: 7px 0 4px; line-height: 2; }
.feature-legend small { display: block; line-height: 1.5; }
.mix-key { padding: 2px 4px; color: #fff; border-radius: 999px; font-size: 8px; }
.mix-key.is-f { background: #c9364c; }.mix-key.is-f-plus-s { background: #b85a00; }.mix-key.is-s { background: #087d91; }.mix-key.is-bus { background: #6842c2; }

.detail-panel { position: absolute; z-index: 650; top: 0; right: 0; width: 340px; height: 100%; background: rgba(255,255,255,.98); border-left: 1px solid var(--slate-200); box-shadow: -8px 0 30px rgba(13,49,39,.1); overflow-y: auto; transform: translateX(105%); transition: transform .22s ease; }
.detail-panel.has-selection { transform: translateX(0); }
.detail-close { position: sticky; top: 10px; float: right; z-index: 2; width: 32px; height: 32px; margin: 10px 10px 0 0; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 9px; font-size: 22px; }
.detail-content { min-height: 100%; padding: 22px 18px 28px; }
.detail-placeholder { min-height: 70vh; display: grid; align-content: center; justify-items: center; text-align: center; color: var(--slate-600); }
.detail-placeholder h2 { margin-top: 15px; color: var(--slate-800); }
.detail-placeholder p { max-width: 230px; margin: 9px 0; font-size: 11px; line-height: 1.65; }
.detail-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 18px; font-weight: 900; }
.station-header { padding: 5px 0 16px; border-bottom: 1px solid var(--slate-100); }
.station-header .badge { display: inline-block; margin-bottom: 8px; padding: 4px 7px; color: var(--green-800); background: var(--green-100); border-radius: 5px; font-size: 9px; font-weight: 800; }
.apartment-header .badge { color: var(--purple-700); background: var(--purple-100); }
.apartment-header.is-public-only .badge { color: var(--green-800); background: var(--green-100); }
.apartment-header.is-mixed .badge { color: #91570c; background: #fff1d8; }
.apartment-header.is-unresolved .badge { color: #725c00; background: #fff6c5; }
.apartment-header.is-count-conflict .badge { color: #a22f2f; background: #ffe2e2; }
.station-header h2 { padding-right: 30px; font-size: 19px; line-height: 1.35; }
.station-header p { margin: 8px 0 0; color: var(--slate-600); font-size: 11px; line-height: 1.55; }
.detail-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0; }
.apartment-kpis { grid-template-columns: repeat(3, 1fr); }
.detail-kpis div { padding: 10px 7px; text-align: center; background: var(--green-50); border-radius: 9px; }
.detail-kpis span { display: block; color: var(--slate-600); font-size: 9px; }
.detail-kpis strong { display: block; margin-top: 3px; font-size: 15px; }
.detail-kpis small { display: block; margin-top: 3px; color: var(--slate-500); font-size: 7px; }
.detail-number-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -5px 0 12px; padding: 8px 9px; color: var(--slate-600); background: var(--slate-100); border-radius: 8px; font-size: 8px; line-height: 1.45; }
.detail-number-context .number-help { flex: 0 0 auto; }
.detail-caption { margin: -3px 0 7px; color: var(--slate-500); font-size: 8px; }
.info-list { margin: 14px 0; padding: 0; list-style: none; }
.info-list li { display: grid; grid-template-columns: 80px 1fr; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--slate-100); font-size: 10px; }
.info-list span { color: var(--slate-600); }
.detail-title { margin: 18px 0 8px; font-size: 12px; }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.status-card { padding: 8px 5px; text-align: center; border-radius: 7px; background: var(--slate-100); }
.status-card strong { display: block; font-size: 14px; }
.status-card span { color: var(--slate-600); font-size: 8px; }
.trend-table { width: 100%; border-collapse: collapse; font-size: 9px; }
.trend-table th, .trend-table td { padding: 7px 4px; text-align: right; border-bottom: 1px solid var(--slate-100); }
.trend-table th:first-child, .trend-table td:first-child { text-align: left; }
.trend-table th { color: var(--slate-600); font-weight: 700; }
.detail-note { margin: 8px 0; padding: 10px; color: var(--slate-600); background: var(--slate-100); border-radius: 8px; font-size: 10px; line-height: 1.6; white-space: pre-line; }
.data-footnote { margin-top: 18px; padding-top: 10px; color: var(--slate-400); border-top: 1px solid var(--slate-100); font-size: 8px; }
.result-dot { margin-right: 6px; vertical-align: 1px; }
.charger-dot { background: var(--orange-500); }
.detail-actions { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; }
.share-action { padding: 7px 11px; color: var(--green-800); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 8px; font-size: 10px; font-weight: 800; }
.share-action:hover { background: var(--green-100); }
.share-feedback { color: var(--green-700); font-size: 9px; }
.selected-charger { margin: 12px 0; padding: 11px 12px; background: #fff5e6; border: 1px solid #f3c988; border-radius: 9px; }
.selected-charger span, .selected-charger small { display: block; color: var(--slate-600); font-size: 9px; }
.selected-charger strong { display: block; margin: 4px 0; color: #93560b; font-size: 15px; }
.mobile-filter-button { display: none; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 292px minmax(0, 1fr); }
  .kpi-strip { right: 14px; grid-template-columns: repeat(3, 1fr); }
  .map-stage.detail-open .kpi-strip { right: 318px; }
  .kpi-strip article:nth-child(4), .kpi-strip article:nth-child(5) { display: none; }
  .detail-panel { width: 305px; }
  .map-stage.detail-open .map-type-legend { right: 319px; }
}

@media (max-width: 1024px) {
  .topbar { height: 62px; padding: 0 12px; }
  .brand strong { font-size: 17px; }
  .brand small, .sync-state { display: none; }
  .compare-button, .evidence-button { max-width: 128px; min-height: 44px; padding: 0 9px; font-size: 9px; }
  .workspace { height: calc(100vh - 62px); display: block; }
  .control-panel { position: absolute; z-index: 1200; inset: 62px auto 0 0; width: min(88vw, 330px); transform: translateX(-105%); transition: transform .2s ease; }
  .control-panel.is-open { transform: translateX(0); }
  .control-panel-mobile-header { position: sticky; z-index: 5; top: -16px; display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin: -16px -16px 12px; padding: 7px 10px 7px 16px; color: var(--slate-800); background: rgba(255,255,255,.98); border-bottom: 1px solid var(--slate-200); }
  .control-panel-mobile-header strong { font-size: 15px; }
  .control-panel-mobile-header button { width: 44px; height: 44px; color: var(--slate-600); background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; font-size: 24px; line-height: 1; }
  .map-stage { height: 100%; }
  .detail-panel { width: min(44vw, 360px); transform: translateX(100%); transition: transform .2s ease; }
  .detail-panel.has-selection { transform: translateX(0); }
  .kpi-strip { left: 8px; right: 8px; top: 8px; grid-template-columns: repeat(3, 1fr); }
  .map-stage.detail-open .kpi-strip { right: calc(min(44vw, 360px) + 8px); }
  .kpi-strip article { padding: 8px; }
  .kpi-strip article > p { max-width: 85px; }
  .kpi-strip > article > .number-help { top: 6px; right: 5px; }
  .number-help summary { width: 32px; height: 32px; }
  .number-help p { position: fixed; left: 12px; right: 12px; top: auto; bottom: 70px; width: auto; }
  .kpi-strip strong { font-size: 16px; }
  .mobile-filter-button { display: block; position: absolute; z-index: 700; left: 12px; bottom: 18px; width: 64px; height: 44px; color: #fff; background: var(--green-800); border: 0; border-radius: 10px; box-shadow: var(--shadow); font-weight: 800; transition: opacity .18s ease, transform .18s ease; }
  .map-stage.detail-open .mobile-filter-button { opacity: 0; pointer-events: none; transform: translateY(8px); }
  .map-type-legend { right: 8px; bottom: 72px; gap: 7px; padding: 6px 8px; font-size: 8px; }
  .map-stage.detail-open .map-type-legend { right: calc(min(44vw, 360px) + 8px); }
  .map-status { max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .comparison-panel, .evidence-panel { inset: 8px; padding: 13px; }
  .comparison-header h2 { font-size: 17px; }
  .comparison-close, .evidence-close, .detail-close { width: 44px; height: 44px; }
  .evidence-header h2 { font-size: 17px; }
  .evidence-metric-grid, .accuracy-evidence-grid, .spatial-evidence-grid, .use-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .share-action { min-width: 64px; min-height: 44px; }
  .comparison-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
  .comparison-tabs button { min-width: 0; min-height: 44px; padding: 0 5px; font-size: 9px; }
  .comparison-selector-grid { grid-template-columns: 1fr 1fr; max-height: 180px; }
  .comparison-choice { min-height: 44px; }
  .comparison-run { min-height: 44px; }
  .search-box input, .search-box button, select, .source-tabs button, .metric-tabs button, .quick-filters button, .advanced-filter summary { min-height: 44px; }
  .comparison-card-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 5px; }
  .comparison-card { min-width: 82vw; scroll-snap-align: start; }
}

@media (max-width: 600px) {
  .topbar-actions { gap: 7px; }
  .brand-mark { width: 40px; }
  .brand strong { font-size: 14px; }
  .compare-button, .evidence-button { max-width: 82px; min-height: 44px; padding: 0 6px; font-size: 8px; }
  .icon-button { width: 44px; height: 44px; }
  .detail-panel {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: min(58vh, 520px);
    border-top: 1px solid var(--slate-200); border-left: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 34px rgba(13,49,39,.18); overscroll-behavior: contain;
    transform: translateY(105%); transition: transform .22s ease;
  }
  .detail-panel::before { content: ""; position: sticky; z-index: 3; top: 7px; display: block; width: 42px; height: 4px; margin: 7px auto -11px; background: var(--slate-200); border-radius: 99px; }
  .detail-panel.has-selection { transform: translateY(0); }
  .detail-content { min-height: 0; padding: 28px 16px 30px; }
  .detail-close { top: 8px; width: 44px; height: 44px; margin: 8px 8px 0 0; border-radius: 12px; }
  .station-header h2 { font-size: 18px; }
  .share-action { min-width: 64px; min-height: 44px; padding: 8px 13px; }
  .map-stage.detail-open .kpi-strip { right: 8px; }
  .kpi-strip, .map-stage.detail-open .kpi-strip { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .kpi-strip::-webkit-scrollbar { display: none; }
  .kpi-strip article, .kpi-strip article:nth-child(4), .kpi-strip article:nth-child(5) { display: block; flex: 0 0 122px; min-width: 122px; padding: 8px 30px 8px 10px; scroll-snap-align: start; }
  .kpi-strip article > p { max-width: 100px; }
  .kpi-strip > article > .number-help { top: 5px; right: 5px; }
  .kpi-strip .number-help summary { width: 32px; height: 32px; }
  .number-help p { left: 12px; right: 12px; bottom: 12px; max-height: 42vh; overflow-y: auto; }
  .map-stage.detail-open .map-type-legend { right: 8px; }
  .mobile-filter-button { min-width: 64px; min-height: 44px; }
  .comparison-panel, .evidence-panel { inset: 4px; padding: 12px; border-radius: 13px; }
  .comparison-close, .evidence-close { width: 44px; height: 44px; border-radius: 12px; }
  .evidence-header { gap: 10px; }
  .evidence-header p { max-width: 260px; }
  .evidence-section { padding: 16px 0; }
  .evidence-section-heading { display: block; }
  .evidence-section-heading > p { text-align: left; }
  .evidence-metric-grid, .accuracy-evidence-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .evidence-metric-grid article, .accuracy-evidence-grid article { padding: 10px; }
  .evidence-metric-grid strong, .accuracy-evidence-grid strong { font-size: 17px; }
  .spatial-evidence-grid, .use-case-grid, .source-evidence-list, .evidence-methodology ul { grid-template-columns: 1fr; }
  .comparison-tabs button { height: 44px; font-size: 10px; }
  .comparison-choice { min-height: 44px; }
  .comparison-run { width: 100%; height: 44px; }
  .comparison-card { min-width: calc(100vw - 58px); }
  .search-result { min-height: 52px; }
}