/* 집 저울 · application shell & workbench modules (spec-005)
   Consumes design-tokens.css + typography.css only — no local palette.
   Font sizes come exclusively from --font-caption/body/title/display via the
   canonical .type-* classes; inputs keep typography.css mobile 16px. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--surface-canvas);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
strong { font-weight: 700; }

/* Desktop/tablet controls inherit body size; phones keep typography.css 16px. */
@media (min-width: 768px) {
  input, select, textarea { font-size: var(--font-body); line-height: var(--line-body); }
}
input, select, textarea { color: var(--text-primary); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-muted); }
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 80;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--selected-surface); color: var(--selected-text); text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ───────── shared controls ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch-target-min); padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-micro), border-color var(--dur-fast) var(--ease-micro), transform var(--dur-instant) var(--ease-micro);
}
.btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
.btn--primary { background: var(--selected-surface); color: var(--selected-text); }
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--selected-surface) 88%, var(--surface-card)); }
.btn--secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.btn--secondary:hover:not(:disabled) { border-color: var(--control-border); }
.btn--ghost { color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-inset); color: var(--text-primary); }
.btn--chip {
  min-height: 44px; padding: 0 var(--space-3); border-radius: var(--token-radius-full);
  border-color: var(--border-strong); background: var(--surface-card); position: relative;
}
.btn--chip::before { content: ""; position: absolute; inset: -4px 0; }
.btn--chip[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }
.btn--report { color: var(--text-secondary); padding: 0 var(--space-2); font-weight: 500; justify-self: start; }
.btn--danger-text { border-color: var(--control-border); color: var(--text-primary); }
.btn .ui-icon { width: 16px; height: 16px; }
.link-btn {
  display: inline-flex; align-items: center; min-height: var(--touch-target-min); padding: 0 var(--space-1);
  color: var(--text-primary); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.link-btn:hover { text-decoration-color: currentColor; }
.icon-btn {
  display: inline-grid; place-items: center; width: var(--touch-target-min); height: var(--touch-target-min);
  border-radius: var(--radius-md); color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-micro), color var(--dur-fast) var(--ease-micro);
}
.icon-btn:hover { background: var(--surface-inset); color: var(--text-primary); }
.icon-btn[aria-pressed="true"], .icon-btn[aria-expanded="true"] { color: var(--text-primary); background: var(--surface-inset); }
.ui-icon--chevron { transition: transform var(--dur-normal) var(--ease-out-expo); }

.segmented {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--token-radius-full);
  background: var(--surface-inset); border: 1px solid var(--border-subtle);
}
.segment {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--token-radius-full); color: var(--text-secondary); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-micro), color var(--dur-fast) var(--ease-micro);
}
.segment::before { content: ""; position: absolute; inset: -6px 0; }
.segment:hover { color: var(--text-primary); }
.segment[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); }
.segmented--compact { margin-top: var(--space-2); }

.class-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
  background: var(--poly-unknown-fill); border: 1.5px dashed var(--poly-unknown-stroke);
}
.class-swatch--shintong { background: var(--poly-shintong-fill); border: 1.5px solid var(--poly-shintong-stroke); }
.class-swatch--moa { background: var(--poly-moa-fill); border: 1.5px solid var(--poly-moa-stroke); }
.class-swatch--union { background: var(--poly-union-fill); border: 1.5px solid var(--poly-union-stroke); }
.class-swatch--initial { background: var(--poly-initial-fill); border: 1.5px solid var(--poly-initial-stroke); }

/* risk icon + Korean label (shape carries meaning, colour only reinforces) */
.risk-icon { color: var(--risk-unknown); }
.risk-icon--safe { color: var(--risk-safe); }
.risk-icon--caution { color: var(--risk-caution); }
.risk-icon--danger { color: var(--risk-danger); }
.risk-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px;
  border-radius: var(--token-radius-full); font-weight: 700; white-space: nowrap;
  color: var(--risk-unknown); background: color-mix(in srgb, currentColor 9%, var(--surface-card));
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}
.risk-badge .risk-icon { color: currentColor; }
.risk-badge--safe { color: var(--risk-safe); }
.risk-badge--caution { color: var(--risk-caution); }
.risk-badge--danger { color: var(--risk-danger); }
.risk-badge--unknown { border-style: dashed; }

.source-badge, .source-tag {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--token-radius-full);
  border: 1px solid var(--border-strong); color: var(--text-secondary); background: var(--surface-card); white-space: nowrap; font-weight: 500;
}
.source-badge--manual, .source-tag[data-source="MANUAL"] { color: var(--text-primary); border-color: var(--control-border); }
.source-badge--engine, .source-tag[data-source="ENGINE"] { color: var(--brand-accent); border-color: color-mix(in srgb, var(--brand-accent) 48%, transparent); }
.source-badge--unknown, .source-tag[data-source="NONE"] { border-style: dashed; }

/* ═════════ App shell ═════════ */
#app-shell {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: 56px 48px minmax(0, 1fr);
}

/* ───────── Screen 1 · header ───────── */
#global-header {
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-6); min-width: 0;
  background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
}
.brand { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark {
  /* Official B-다이얼 mark: 28px desktop / 26px mobile (spec 24–28px), no tile, colour from --brand-mark-fill. */
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  color: var(--brand-mark-fill);
}
.brand-mark-svg { display: block; width: 100%; height: 100%; }
.brand-name { white-space: nowrap; letter-spacing: -0.02em; }
.brand-x { color: var(--text-muted); font-weight: 400; margin: 0 2px; }
.brand-short { display: none; }

#location-search-form {
  position: relative; flex: 1 1 360px; max-width: 440px; min-width: 0;
  display: flex; align-items: center; height: var(--touch-target-min);
  border-radius: var(--radius-md); border: 1px solid var(--control-border); background: var(--surface-card);
  transition: box-shadow var(--dur-fast) var(--ease-micro);
}
#location-search-form:focus-within { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--focus-ring); }
.search-icon { display: inline-grid; place-items: center; width: 40px; color: var(--text-muted); }
#location-search {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; padding: 0;
}
#location-search::placeholder { color: var(--text-muted); }
#location-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-submit {
  position: relative; height: 44px; min-width: 44px; margin-right: 4px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  background: var(--surface-inset); color: var(--text-primary); font-weight: 600;
}
/* M5: 34px visual box, 44px effective hit area inside the 44px search field */
.search-submit::before { content: ""; position: absolute; inset: -5px -4px -5px 0; }
.search-submit:hover { background: var(--border-strong); }
#search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45;
  max-height: min(60vh, 420px); overflow-y: auto; padding: var(--space-1);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet);
}
.search-hit {
  width: 100%; min-height: var(--touch-target-min); display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; row-gap: 0; align-items: center;
  padding: 6px var(--space-3); border-radius: var(--radius-md); text-align: left;
}
.search-hit-name { font-weight: 600; }
.search-hit-meta { grid-column: 2; color: var(--text-muted); }
.search-hit:hover, [aria-selected="true"] > .search-hit { background: var(--surface-inset); }
.search-empty { padding: var(--space-3); color: var(--text-secondary); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }
.search-open { display: none; }
.h0-chip {
  display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center;
  min-height: var(--touch-target-min); padding: 2px var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface-card); text-align: right;
  transition: border-color var(--dur-fast) var(--ease-micro);
}
.h0-chip:hover { border-color: var(--control-border); }
.h0-chip-label { color: var(--text-muted); }
.h0-chip-value { font-weight: 700; }
.h0-chip[data-state="empty"] .h0-chip-value { color: var(--text-muted); font-weight: 600; }
.h0-chip[data-state="ready"] { border-color: color-mix(in srgb, var(--brand-accent) 48%, transparent); }
.icon-sun { display: none; }
html[data-theme="dark"] .icon-sun { display: block; }
html[data-theme="dark"] .icon-moon { display: none; }
.share-wrap { position: relative; }
.share-controls {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; z-index: 45;
  display: grid; gap: var(--space-2); padding: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet);
}
.check-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target-min); cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--selected-surface); margin: 0; }

/* ───────── Screen 1 · category bar ───────── */
#category-nav {
  position: relative; z-index: 39; min-width: 0;
  background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
}
.category-scroll {
  display: flex; align-items: center; gap: var(--space-2); height: 100%;
  padding: 2px var(--space-6); overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.category-scroll::-webkit-scrollbar { display: none; }
.category-pill {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 var(--space-3); border-radius: var(--token-radius-full);
  border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-primary);
  transition: background-color var(--dur-fast) var(--ease-micro), border-color var(--dur-fast) var(--ease-micro);
}
.category-pill::before { content: ""; position: absolute; inset: -4px 0; }
.category-pill:hover { border-color: var(--control-border); }
.category-label { font-weight: 600; white-space: nowrap; }
.category-value { color: var(--text-muted); white-space: nowrap; }
.category-pill[data-active="true"] { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }
.category-pill[data-active="true"] .category-value { color: var(--selected-text); }
.category-pill[aria-expanded="true"] { border-color: var(--text-primary); }
.category-pill[aria-expanded="true"] .ui-icon--chevron { transform: rotate(180deg); }
.category-divider { flex-shrink: 0; width: 1px; height: 20px; background: var(--border-strong); margin: 0 var(--space-1); }
.reset-btn {
  flex-shrink: 0; min-height: var(--touch-target-min); padding: 0 var(--space-2); margin-right: var(--space-6);
  color: var(--text-muted); font-weight: 600; white-space: nowrap;
}
.reset-btn[data-active="true"] { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

.filter-popover {
  position: absolute; top: calc(100% + 4px); left: var(--space-6); z-index: 45;
  width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet);
  animation: pop-in var(--dur-normal) var(--ease-out-expo);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.popover-form { display: grid; }
.popover-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) 0 var(--space-4); }
.popover-body { display: grid; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-4); }
.popover-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); }
.choice-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-grid--gu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-chip { position: relative; display: inline-flex; }
.choice-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice-chip > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  min-height: var(--touch-target-min); padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface-card); font-weight: 600; white-space: nowrap;
}
.choice-chip input:checked + span { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }
.choice-chip input:checked + span .risk-icon { color: var(--selected-text); }
.choice-chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.range-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--space-2); }
.range-pair input, .field input, .field textarea {
  width: 100%; min-height: var(--touch-target-min); padding: 0 var(--space-3);
  border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface-card);
}
.range-dash { padding-bottom: 12px; color: var(--text-muted); }
.field { display: grid; gap: 6px; }
.field textarea { padding: var(--space-3); resize: vertical; min-height: 112px; }

/* ═════════ Workspace grid ═════════ */
#workspace {
  display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  min-height: 0; min-width: 0;
}
#map, #workbench { min-width: 0; min-height: 0; }
#workbench {
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-canvas); border-left: 1px solid var(--border-subtle);
  scrollbar-gutter: stable;
}
#workbench:focus { outline: none; }
#sheet-header { display: none; }
#sheet-scroll {
  overflow: visible; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--module-gap);
  max-width: var(--content-max); margin: 0 auto;
}
@media (min-width: 768px) and (max-width: 1359px) {
  #workspace[data-mode="COMPARE"] { grid-template-columns: minmax(240px, 32fr) minmax(0, 68fr); }
}
@media (min-width: 1360px) {
  #workspace[data-mode="COMPARE"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
#workspace[data-mode="COMPARE"] #sheet-scroll { max-width: none; }
#workspace[data-mode="COMPARE"][data-compare-wide="true"] { grid-template-columns: minmax(0, 1fr); }
#workspace[data-mode="COMPARE"][data-compare-wide="true"] #map { display: none; }

/* mode tabs */
#mode-nav { order: 0; }
#workbench-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-subtle);
}
.wb-tab {
  position: relative; min-height: 44px; min-width: 44px; padding: 0 var(--space-2); border-radius: 4px;
  color: var(--text-secondary); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-micro), color var(--dur-fast) var(--ease-micro), box-shadow var(--dur-fast) var(--ease-micro);
}
.wb-tab::before { content: ""; position: absolute; inset: -2px 0; }
.wb-tab:hover { color: var(--text-primary); }
.wb-tab[aria-selected="true"] { border-bottom: 2px solid var(--text-primary); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }

.wb-tab--secondary { grid-column: 1 / -1; justify-self: end; padding-inline: 16px; }
.workbench-intro { order: -1; display: grid; gap: 8px; color: var(--text-primary); }
.workbench-intro h2 { text-wrap: balance; }
.workbench-intro p { max-width: 70ch; }
.workbench-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.workbench-preview-actions .btn { min-height: 44px; white-space: normal; }
.budget-advanced-disclosure, .comparison-advanced-disclosure, .precision-tools-disclosure { border-top: 1px solid var(--border-strong); padding-block: 8px; min-width: 0; }
.budget-advanced-disclosure > summary, .comparison-advanced-disclosure > summary, .precision-tools-disclosure > summary { min-height: 44px; padding: 12px 4px; cursor: pointer; font-weight: 600; color: var(--text-primary); }
.budget-advanced-disclosure[open] > summary, .comparison-advanced-disclosure[open] > summary, .precision-tools-disclosure[open] > summary { margin-bottom: 16px; }
.precision-tools-disclosure { order: 6; }
.precision-tools-disclosure p { margin-bottom: 12px; }
#workspace[data-mode="BUDGET"] #budget-module > .module-head { order: -3; padding-top: 16px; }
#workspace[data-mode="BUDGET"] #finance-inputs { order: -2; }
#workspace[data-mode="BUDGET"] #budget-sticky { order: -1; position: static; }
#budget-advanced .fi-group { margin-bottom: 16px; }
#finance-inputs input, #finance-inputs .preset-btn { min-height: 44px; }
#finance-inputs .preset-btn { min-width: 44px; }

/* mode → visible regions (DOM and store stay the same) */
#budget-module { order: 1; }
#overview { order: 2; }
#comparison { order: 3; }
#risk-module { order: 4; }
#workspace[data-mode="OVERVIEW"] :is(#comparison, #risk-module),
#workspace[data-mode="BUDGET"] :is(#overview, #comparison, #risk-module),
#workspace[data-mode="COMPARE"] :is(#overview, #risk-module),
#workspace[data-mode="RISK"] :is(#overview, #comparison) { display: none; }

/* ───────── module chrome ───────── */
.module {
  display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
}
.module-head { display: grid; gap: var(--space-1); }
.module-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }

/* ═════════ 3B · budget module ═════════ */
#budget-module { padding: 0 var(--space-6) var(--space-6); gap: var(--space-4); }
#budget-sticky {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6);
  background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sticky-main { display: grid; gap: 2px; min-width: 0; }
.sticky-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 600; }
.est-tag { padding: 0 6px; border-radius: 0; border: 0; color: var(--text-secondary); font-weight: 600; }
#h0 { display: block; letter-spacing: -0.02em; font-weight: 800; color: var(--text-primary); }
#h0[data-state="empty"] { color: var(--text-muted); font-weight: 700; }
.sticky-side { display: grid; justify-items: end; gap: var(--space-2); }
.sticky-actions { display: flex; gap: var(--space-1); }
.constraint-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border-radius: 0;
  background: transparent; border: 0; color: var(--text-primary); font-weight: 600; white-space: nowrap;
}
.constraint-chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--token-radius-full); background: var(--text-primary); }
.constraint-chip[data-constraint="RULE_MISSING"] { border-style: dashed; color: var(--text-secondary); }
.constraint-chip[data-constraint="RULE_MISSING"]::before { background: transparent; border: 1px dashed var(--text-secondary); }
#workspace[data-mode="BUDGET"] .sticky-expand { display: none; }

/* compact: only the sticky H0 bar stays, pinned above other modes */
#workspace:not([data-mode="BUDGET"]) #budget-module { position: sticky; top: 0; z-index: 6; padding: 0; gap: 0; box-shadow: var(--shadow-sheet); }
#workspace:not([data-mode="BUDGET"]) #budget-module > :not(#budget-sticky) { display: none; }
#workspace:not([data-mode="BUDGET"]) #budget-sticky { position: static; margin: 0; border-bottom: 0; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
#workspace:not([data-mode="BUDGET"]) #h0-note { display: none; }

#finance-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden;
}
.fs-cell { display: grid; gap: 2px; align-content: start; padding: var(--space-3) var(--space-4); background: var(--surface-card); min-width: 0; }
.fs-cell dt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-secondary); font-weight: 600; }
.fs-cell dd { font-weight: 700; overflow-wrap: anywhere; }
.fs-cell--result { background: var(--surface-inset); }
.fs-cell--result dd { color: var(--text-primary); }

#finance-inputs { display: grid; gap: var(--space-6); }
.fi-group { display: grid; gap: var(--space-3); }
.fi-group > legend { margin-bottom: var(--space-3); float: left; width: 100%; }
.fi-group > legend + * { clear: both; }
.fi-note { margin-top: calc(-1 * var(--space-2)); }
.money-field { display: grid; gap: 6px; min-width: 0; }
.money-field > label { font-weight: 600; }
.money-input {
  display: flex; align-items: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-3);
  border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface-card);
  transition: box-shadow var(--dur-fast) var(--ease-micro), border-color var(--dur-fast) var(--ease-micro);
}
.money-input:focus-within { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--focus-ring); }
.money-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0;
  text-align: right; font-weight: 600;
}
.money-input input::placeholder { color: var(--text-muted); font-weight: 400; }
.money-input input[aria-invalid="true"] { color: var(--risk-danger); }
.unit { color: var(--text-muted); }
.money-hint { text-align: right; }
.field-error { color: var(--risk-danger); font-weight: 600; }

.slider-field { display: grid; gap: 2px; }
#cash-slider {
  --fill: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--touch-target-min); margin: 0;
  background: transparent; cursor: pointer;
}
#cash-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--token-radius-full);
  background: linear-gradient(to right, var(--brand-accent) var(--fill), var(--border-strong) var(--fill));
}
#cash-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: var(--token-radius-full);
  background: var(--surface-card); border: 2px solid var(--brand-accent); box-shadow: var(--shadow-card);
  transition: transform var(--dur-instant) var(--ease-micro);
}
#cash-slider:active::-webkit-slider-thumb { transform: scale(1.08); }
#cash-slider::-moz-range-track { height: 4px; border-radius: var(--token-radius-full); background: var(--border-strong); }
#cash-slider::-moz-range-progress { height: 4px; border-radius: var(--token-radius-full); background: var(--brand-accent); }
#cash-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: var(--token-radius-full); background: var(--surface-card); border: 2px solid var(--brand-accent); box-shadow: var(--shadow-card); }
#cash-slider:focus-visible { outline: none; }
#cash-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--focus-ring); }
#cash-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--focus-ring); }
.slider-scale { display: flex; justify-content: space-between; color: var(--text-muted); padding: 0 2px; }

.preset-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.preset-row > .preset-btn { grid-column: span 2; padding: 6px 8px; }
.preset-row > .preset-btn[data-action="apply-two-input-defaults"],
.preset-row > .preset-btn[data-action="demo-quickstart"] { grid-column: span 3; }
.preset-btn {
  min-height: var(--touch-target-min); border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface-card); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-micro), transform var(--dur-instant) var(--ease-micro);
}
.preset-btn:hover { border-color: var(--control-border); }
.preset-btn:active { transform: scale(var(--press-scale)); }
.preset-btn[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }

.cost-rows { display: grid; gap: var(--space-4); }
.cost-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label source" "input input" "hint hint" "err err"; align-items: center; column-gap: var(--space-2); }
.cost-row > label { grid-area: label; }
.cost-row > .cost-source { grid-area: source; justify-self: end; }
.cost-row > .money-input { grid-area: input; }
.cost-row > .money-hint { grid-area: hint; }
.cost-row > .field-error { grid-area: err; }

.fi-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }

/* waterfall */
#waterfall { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); }
.waterfall-empty { color: var(--text-secondary); padding: var(--space-2) 0; }
.wf-steps { display: grid; gap: 0; }
.wf-step { display: grid; grid-template-columns: 96px minmax(0, 1fr) 136px; align-items: center; gap: 8px; min-height: 32px; }
/* M1: fixed label/value columns on every row → every .wf-step-track has the same width (one shared KRW axis). */
.wf-step-label { min-width: 0; color: var(--text-secondary); font-weight: 600; overflow-wrap: anywhere; word-break: keep-all; }
.wf-step-value { width: 100%; min-width: 0; text-align: right; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-v-compact { display: none; }
.wf-step-track { position: relative; height: 32px; }
.wf-step-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--border-subtle); }
.wf-step-bar {
  position: absolute; top: 6px; bottom: 6px; left: var(--s); width: max(2px, calc(var(--e) - var(--s)));
  border-radius: 3px; transition: left var(--dur-normal) var(--ease-out-expo), width var(--dur-normal) var(--ease-out-expo);
}
/* connector: running total carried to the next step */
.wf-step-link { position: absolute; left: var(--x); top: calc(100% - 6px); height: 12px; border-left: 1px dashed var(--text-secondary); }
.wf-zero { position: absolute; left: var(--x); top: 2px; bottom: 2px; border-left: 2px solid var(--text-primary); }
.wf-step--inflow .wf-step-bar { background: var(--brand-accent); }
.wf-step--loan .wf-step-bar {
  background:
    repeating-linear-gradient(135deg, var(--brand-accent) 0 2px, transparent 2px 7px),
    color-mix(in srgb, var(--brand-accent) 12%, var(--surface-card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-accent) 60%, transparent);
}
.wf-step--deduct .wf-step-bar {
  background: repeating-linear-gradient(45deg, var(--text-secondary) 0 1.5px, transparent 1.5px 5px), var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--text-secondary);
}
.wf-step--unknown .wf-step-bar { width: 2px; background: none; border-left: 2px dotted var(--text-muted); box-shadow: none; }
.wf-step--unknown .wf-step-value { color: var(--text-muted); font-weight: 500; }
.wf-step--result { margin-top: var(--space-1); border-top: 1px solid var(--border-strong); padding-top: var(--space-1); }
.wf-step--result .wf-step-bar { background: var(--text-primary); }
.wf-step--partial .wf-step-bar { background: repeating-linear-gradient(90deg, var(--text-primary) 0 6px, transparent 6px 10px); }
.wf-step--negative .wf-step-bar { background: repeating-linear-gradient(135deg, var(--risk-danger, #b91c1c) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--risk-danger, #b91c1c); }
.wf-step--result .wf-step-label, .wf-step--result .wf-step-value { color: var(--text-primary); font-weight: 700; }
.wf-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--text-secondary); }
.wf-legend li { display: inline-flex; align-items: center; gap: 6px; }
.wf-key { width: 12px; height: 12px; border-radius: 3px; }
.wf-key--cash { background: var(--brand-accent); }
.wf-key--loan { background: repeating-linear-gradient(135deg, var(--brand-accent) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.wf-key--cost { background: repeating-linear-gradient(45deg, var(--text-secondary) 0 1px, transparent 1px 3.5px); box-shadow: inset 0 0 0 1px var(--text-secondary); }
.wf-key--residual { background: var(--text-primary); }
#waterfall-summary {
  padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-card);
  font-weight: 700; overflow-wrap: anywhere;
}
#waterfall-summary[data-complete="false"] { color: var(--text-secondary); font-weight: 600; }

#cost-breakdown { display: grid; }
.cb-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.cb-row dt { color: var(--text-secondary); }
.cb-row dd { text-align: right; font-weight: 600; }
.cb-row--total { border-bottom: 0; border-top: 1px solid var(--text-primary); margin-top: -1px; }
.cb-row--total dt, .cb-row--total dd { color: var(--text-primary); font-weight: 700; }

#loan-evidence { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
#loan-evidence > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--touch-target-min); padding: var(--space-2) var(--space-4); cursor: pointer; font-weight: 600;
}
#loan-evidence > summary::-webkit-details-marker { display: none; }
#loan-evidence[open] > summary .ui-icon--chevron { transform: rotate(180deg); }
#loan-evidence > summary:focus-visible { outline-offset: -2px; border-radius: var(--radius-md); }
.evidence-rows { display: grid; }
.ev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); }
.ev-row dt { color: var(--text-secondary); }
.ev-row dd { text-align: right; font-weight: 600; }
.ev-row--input dd { display: grid; gap: 4px; justify-items: end; }
.ev-row--input .money-input { width: min(240px, 100%); height: var(--touch-target-min); }
.ev-preset { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border-subtle); }
.ev-preset .btn { justify-self: start; min-height: var(--touch-target-min); }
.ev-preset .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text-primary); }
.risk-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.risk-filters .btn { min-height: var(--touch-target-min); gap: 6px; }
.risk-filters .btn[data-active="true"] { box-shadow: inset 0 0 0 2px var(--text-primary); }
.risk-filters .category-value { color: var(--text-muted); }
.step--before .step-dot { background: var(--surface-inset); color: var(--text-secondary); }
.ev-note { padding: 0 var(--space-4) var(--space-3); }

/* ═════════ 3A · overview ═════════ */
#overview { display: grid; }
#overview-panel { display: flex; flex-direction: column; gap: var(--module-gap); }
#viewport-summary, #budget-quick, #quick-candidates {
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
}
.summary-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.summary-stats > div { display: grid; gap: 2px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-inset); min-width: 0; }
.summary-stats dt { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-stats dd { font-weight: 700; }
.quick-budget { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.quick-budget .type-title { font-weight: 800; }
.quick-list { display: grid; }
.quick-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle);
}
.quick-card:first-child { border-top: 0; padding-top: 0; }
.quick-card.is-active .quick-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.quick-card-main { display: grid; gap: 2px; text-align: left; min-width: 0; min-height: var(--touch-target-min); }
.quick-card-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.quick-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-card-price { display: flex; align-items: baseline; gap: 6px; }
.quick-card-price .type-body { font-weight: 700; }
.hint-card { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); color: var(--text-secondary); text-align: center; }
.empty-state { padding: var(--space-3) 0; color: var(--text-secondary); }

.margin-tag {
  display: inline-flex; align-items: center; width: fit-content; padding: 2px 8px; border-radius: var(--radius-sm);
  font-weight: 700; white-space: nowrap;
}
.margin-tag--ok { color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 10%, var(--surface-card)); }
.margin-tag--short { color: var(--text-primary); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--control-border); }
.margin-tag--unknown { color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ═════════ 3C · comparison ═════════ */
.sort-field { display: grid; gap: 2px; }
#compare-sort {
  min-height: var(--touch-target-min); padding: 0 36px 0 var(--space-3);
  border: 1px solid var(--control-border); border-radius: var(--radius-md); background-color: var(--surface-card);
  -webkit-appearance: none; appearance: none; font-weight: 600;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.compare-basis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset);
}
.compare-basis .type-body { font-weight: 600; }
#comparison-scroll {
  position: relative; overflow-x: auto; overflow-y: visible; max-height: none; overscroll-behavior-x: contain;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card);
}
#comparison-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.compare-empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-6); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
#comparison-scroll[data-cols="1"] .compare-table { min-width: 0; width: 100%; }
#comparison-scroll[data-cols="2"] .compare-table { min-width: 0; width: 100%; }
#comparison-scroll[data-cols="3"] .compare-table { min-width: calc(96px + 160px * 3); }
.compare-table th, .compare-table td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; text-align: left; height: 44px; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-card); border-bottom: 1px solid var(--border-strong); }
.compare-table .attr-col, .compare-table tbody th {
  position: sticky; left: 0; z-index: 1; width: 96px; background: var(--surface-card);
  box-shadow: inset -1px 0 0 var(--border-subtle); color: var(--text-secondary); font-weight: 600;
}
.compare-table thead .attr-col { z-index: 3; vertical-align: bottom; }
.compare-table tbody tr:hover > * { background: color-mix(in srgb, var(--surface-inset) 60%, var(--surface-card)); }
.cand-col { width: auto; min-width: 0; }
.baseline-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.compare-detail-bar { padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--surface-inset); display: flex; justify-content: center; }
.compare-detail-bar .btn { min-height: 44px; width: 100%; }
.w10-yearly-ledger { margin-top: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 4px 8px; background: var(--surface-inset); text-align: left; }
.w10-yearly-ledger > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--text-primary); }
.w10-ledger-wrap { overflow-x: auto; margin-top: 6px; }
.w10-ledger-table { width: 100%; border-collapse: collapse; text-align: left; }
.w10-ledger-table th, .w10-ledger-table td { padding: 6px 8px; border: 1px solid var(--border-subtle); vertical-align: top; }
.check-portal-link { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 8px; text-decoration: underline; font-weight: 600; }
#budget-step-progress { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-inset); border-left: 3px solid var(--brand-accent); font-weight: 600; color: var(--text-primary); }
.cand-col.is-active { box-shadow: inset 0 -2px 0 var(--text-primary); }
.cand-order { display: block; color: var(--text-muted); font-weight: 600; }
.cand-name { display: flex; align-items: center; gap: 6px; margin-top: 2px; text-align: left; font-weight: 700; min-height: var(--touch-target-min); }
.cand-name .class-swatch { margin-top: 5px; }
.cand-actions { display: flex; gap: var(--space-2); margin-top: 2px; }
.cand-actions .link-btn { min-height: 44px; position: relative; }
.cand-actions .link-btn::before { content: ""; position: absolute; inset: -6px 0; }
.cell-main { display: block; font-weight: 600; overflow-wrap: anywhere; }
/* M4: money and measured values align right on the cell, not only inside numeric spans */
.compare-table td.td-num { text-align: right; }
.compare-table td.td-num .cell-main { display: flex; flex-direction: column; align-items: flex-end; }
.compare-table td.td-num .axis-bar { align-self: stretch; }
.cell-sub { display: block; margin-top: 4px; color: var(--text-muted); }
.cell-na { color: var(--text-muted); font-weight: 500; }
.cell-risk { display: flex; }
.compare-table td .btn--report { min-height: var(--touch-target-min); }
.track-tag {
  display: inline-flex; padding: 1px 8px; border-radius: var(--radius-sm); border: 1px solid var(--control-border); font-weight: 700; white-space: nowrap;
}
.track-tag--redev { border-style: dashed; }
.axis-bar { position: relative; display: block; height: 8px; margin-top: var(--space-2); border-radius: var(--token-radius-full); background: var(--surface-inset); }
.axis-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--text-secondary); }
.axis-fill.is-over { background: repeating-linear-gradient(135deg, var(--text-primary) 0 2px, var(--text-secondary) 2px 5px); }
.axis-h0 { position: absolute; left: var(--x); top: -4px; width: 2px; height: 16px; border-radius: 1px; background: var(--brand-accent); transform: translateX(-1px); }
.compare-invite { padding: var(--space-3) var(--space-4); border-top: 1px dashed var(--border-strong); }

/* ═════════ 3D · risk module ═════════ */
#risk-target { display: grid; gap: 2px; margin-top: var(--space-2); }
.check-group { display: grid; gap: var(--space-2); }
.check-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-strong); }
.group-verdict { display: inline-flex; align-items: center; gap: var(--space-2); }
.check-item { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.check-item:last-child { border-bottom: 0; }
.check-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); }
.check-name { min-width: 0; }
.check-toggle {
  position: relative; min-height: 44px; padding: 0 10px; border-radius: var(--token-radius-full);
  border: 1px solid var(--border-strong); color: var(--text-secondary); font-weight: 600; white-space: nowrap;
}
.check-toggle::before { content: ""; position: absolute; inset: -6px 0; }
.check-toggle[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }
.check-meta { display: grid; gap: 4px; padding-left: var(--space-2); border-left: 2px solid var(--border-subtle); margin-left: 10px; }
.check-meta > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-2); }
.check-meta dt { color: var(--text-muted); padding-top: 3px; }
.check-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary); text-underline-offset: 3px; }
.check-next dd { font-weight: 700; }
.check-item--danger .check-meta { border-left-color: var(--risk-danger); }
.check-item--caution .check-meta { border-left-color: var(--risk-caution); }
.check-item--safe .check-meta { border-left-color: var(--risk-safe); }
.check-item--unknown .check-meta { border-left-style: dashed; border-left-color: var(--risk-unknown); }
.check-empty { padding: var(--space-3) 0; color: var(--text-secondary); }
.risk-foot { margin-top: calc(-1 * var(--space-2)); }

/* ═════════ dialogs ═════════ */
dialog { color: var(--text-primary); }
dialog::backdrop { background: rgba(9, 9, 11, 0.42); }
.modal {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: var(--space-6);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sheet);
}
.modal[open] { display: grid; gap: var(--space-3); animation: modal-in var(--dur-normal) var(--ease-out-expo); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
#report-form { display: grid; gap: var(--space-3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); }
.replace-options { display: grid; gap: var(--space-2); }
.replace-option {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-strong); text-align: left;
}
.replace-option:hover { border-color: var(--text-primary); background: var(--surface-inset); }
.replace-option .type-body { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.report-context > div { padding: var(--space-2) var(--space-3); background: var(--surface-inset); display: grid; gap: 2px; }
.report-context dt { color: var(--text-muted); }

/* ═════════ Tablet 768–1279 ═════════ */
@media (min-width: 768px) and (max-width: 1279px) {
  #workspace { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
  #global-header { padding: 0 var(--space-4); gap: var(--space-3); }
  .category-scroll { padding: 2px var(--space-4); }
  #sheet-scroll { padding: var(--space-4); }
  .module { padding: var(--space-4); }
  #budget-module { padding: 0 var(--space-4) var(--space-4); }
  #budget-sticky { margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); }
  #viewport-summary, #budget-quick, #quick-candidates { padding: var(--space-4); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }
}

/* ═════════ Mobile <768 · map 100% + 3-snap bottom sheet ═════════ */
@media (max-width: 767px) {
  .wf-step { grid-template-columns: 84px minmax(0, 1fr) 116px; gap: 6px; }
  .wf-v-full { display: none; }
  .wf-v-compact { display: inline; }
  #global-header { padding: 0 var(--space-2) 0 var(--space-4); gap: var(--space-2); }
  .brand-full { display: none; }
  .brand-short { display: inline; }
  .brand-mark { width: 26px; height: 26px; }
  #location-search-form { display: none; }
  html[data-search-open] #location-search-form {
    display: flex; position: absolute; inset: 6px var(--space-2); max-width: none; z-index: 46; box-shadow: var(--shadow-sheet);
  }
  .search-open { display: inline-grid; }
  .h0-chip { padding: 0 var(--space-2); }
  .h0-chip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .category-scroll { padding: 2px var(--space-4); }
  .reset-btn { margin-right: var(--space-4); }
  .filter-popover { left: var(--space-2) !important; right: var(--space-2); width: auto; }
  .choice-grid--gu { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  #workspace { display: block; position: relative; overflow: visible; }
  #map { position: absolute; inset: 0; height: 100%; width: 100%; }
  #workbench {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; flex-direction: column; overflow: visible;
    max-height: calc(100vh - 168px); max-height: calc(var(--vvh, 100dvh) - 104px - 32px);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface-card); border-left: 0; border-top: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sheet);
    transition: height var(--dur-sheet) var(--ease-spring);
    scrollbar-gutter: auto;
  }
  #workbench[data-snap="PEEK"] { height: 140px; }
  /* M6: snaps are capped by the visual viewport (--vvh from visualViewport) so the keyboard never hides inputs;
     very short screens merge HALF into FULL instead of showing two near-identical snaps. */
  #workbench[data-snap="HALF"] { height: 52vh; height: min(52dvh, calc(var(--vvh, 100dvh) - 104px - 220px)); }
  #workbench[data-snap="FULL"] { height: 88vh; height: min(88dvh, calc(var(--vvh, 100dvh) - 104px - 32px)); }
  :root[data-short="true"] #workbench[data-snap="HALF"] { height: calc(var(--vvh, 100dvh) - 104px - 32px); }
  :root[data-keyboard="true"] #workbench[data-snap="PEEK"] { height: min(140px, calc(var(--vvh, 100dvh) - 104px)); }
  #sheet-header {
    display: flex; flex-shrink: 0; align-items: center; gap: var(--space-2); min-height: 56px;
    padding: 4px var(--space-2) 0 var(--space-4);
  }
  #sheet-handle {
    position: relative; flex: 1; min-width: 0; min-height: var(--touch-target-min);
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-2);
    padding-top: 10px; text-align: left; touch-action: none;
  }
  .grabber { position: absolute; top: 0; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: var(--token-radius-full); background: var(--border-strong); }
  #sheet-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #map-peek { padding: 0 var(--space-2); font-size: var(--font-body); line-height: var(--line-caption); }
  #sheet-scroll {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-2) var(--space-4) var(--space-4); max-width: none; margin: 0; width: 100%;
  }
  #workbench-tabs { overflow-x: auto; scrollbar-width: none; grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
  #workbench-tabs::-webkit-scrollbar { display: none; }
  .wb-tab { padding: 0 var(--space-2); }

  .module { padding: var(--space-4); box-shadow: none; }
  #budget-module { padding: 0 var(--space-4) var(--space-4); }
  #budget-sticky { margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); }
  #workspace:not([data-mode="BUDGET"]) #budget-module { box-shadow: var(--shadow-card); }
  .sticky-side { justify-items: start; }
  #workspace:not([data-mode="BUDGET"]) .sticky-side { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  #workspace:not([data-mode="BUDGET"]) [data-action="open-loan-basis"] { display: none; }
  #workspace:not([data-mode="BUDGET"]) #budget-sticky { gap: var(--space-2); }
  #viewport-summary, #budget-quick, #quick-candidates { padding: var(--space-4); box-shadow: none; }
  #comparison-scroll { max-height: none; }
  .check-head { grid-template-columns: auto minmax(0, 1fr); }
  .check-toggle { min-height: 44px; grid-column: 1 / -1; justify-self: start; }
  .report-context { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .brand-name { display: none; }
  #theme-toggle { display: none; }
}
/* 390px에서 한도 값(예: 약 16.97억 원)이 들어오면 헤더가 8px 넘쳤어요. 좁은 폰에서는 로고 글자를 숨겨 자리를 만들어요
   (링크 이름 '집 저울 처음으로'는 그대로라 화면 읽기에는 영향 없어요). 한도 값은 자르지 않아요. */
@media (max-width: 430px) {
  .brand-name { display: none; }
}
/* 모바일: 헤더가 한 줄에 다 들어가지 않을 때만(예: 360px에서 '구매 가능 금액 없음', 320px 폰, 200% 확대 시 CSS 195px)
   버튼 묶음이 다음 줄로 자연스럽게 넘어가요. 들어가면 지금처럼 56px 한 줄이에요. 한도 값은 자르지 않아요. */
@media (max-width: 767px) {
  #app-shell { grid-template-rows: auto 48px minmax(0, 1fr); }
  #global-header { flex-wrap: wrap; min-height: 56px; row-gap: var(--space-1); }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; min-width: 0; max-width: 100%; row-gap: var(--space-1); }
}


/* rev2 · explicit finance inputs (B3) */
.btn--quick { min-height: var(--touch-target-min); margin-top: var(--space-1); padding: 0 var(--space-3); }
.btn--quick[aria-pressed="true"] { border-color: var(--text-primary); background: var(--selected-surface); color: var(--selected-text, var(--surface-card)); }

/* v2.1 N2 · hydration banner · 직접 입력 후보(BYOC) · 영수증 미리보기 */
.hydrate-banner {
  position: fixed; top: 116px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 24px)); padding: var(--space-3) calc(var(--space-6) + var(--space-4)) var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-sheet);
}
.hydrate-banner p { margin: 0; }
.hydrate-banner-sub { margin-top: var(--space-1) !important; }
.hydrate-fix { min-height: var(--touch-target-min); padding: 0 var(--space-1); text-decoration: underline; font-weight: 700; }
.hydrate-close { position: absolute; top: var(--space-2); right: var(--space-2); }
.byoc-panel { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.byoc-form { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.byoc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.byoc-field { display: grid; gap: var(--space-1); min-width: 0; }
.byoc-field--wide { grid-column: 1 / -1; }
.byoc-field input, .byoc-field select { min-height: var(--touch-target-min); min-width: 0; width: 100%; padding: 0 var(--space-2); border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); font: inherit; }
.byoc-price-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1); }
.byoc-price-row select { width: auto; }
.byoc-actions, .byoc-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.byoc-foot { margin-top: var(--space-3); }
.byoc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.byoc-table th, .byoc-table td { padding: var(--space-2); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.byoc-table thead th { color: var(--text-secondary); }
.byoc-table td[data-tone="red"] { color: var(--risk-danger); }
.byoc-table td[data-tone="green"] { color: var(--risk-safe); }
.byoc-cell-actions { white-space: nowrap; }
.byoc-prov { display: inline-block; padding: 0 var(--space-1); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); }
.byoc-prov--user { border-style: dashed; color: var(--text-primary); font-weight: 700; }
.receipt-reveal { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target-min); }
.receipt-preview img { display: block; max-width: 100%; height: auto; max-height: min(60vh, 640px); margin: 0 auto; border: 1px solid var(--border-subtle); }
@media (max-width: 599px) {
  .hydrate-banner { top: 108px; }
  .byoc-grid { grid-template-columns: minmax(0, 1fr); }
  .byoc-table thead { display: none; }
  .byoc-table, .byoc-table tbody, .byoc-table tr, .byoc-table th, .byoc-table td { display: block; width: 100%; }
  .byoc-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
  .byoc-table th, .byoc-table td { border: 0; padding: var(--space-1) 0; }
}

/* Focused phone previews cover the workbench; suppress background visual noise. */
@media (max-width: 767px) {
  body:has(#sample-report-dialog[open], #demo-video-dialog[open], #pricing-dialog[open]) #app-shell { visibility: hidden; }
}

.workbench-intro-details {
  margin-top: var(--space-1);
}
.workbench-intro-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--text-secondary);
  text-decoration: underline;
}
.workbench-value-bullets {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-primary);
  display: grid;
  gap: var(--space-1);
}
.step-next-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.step-next-bar .btn {
  flex: 1 1 200px;
  justify-content: center;
}
#category-program:not([data-active="true"]),
#category-stage:not([data-active="true"]),
#category-display:not([data-active="true"]),
#category-area:not([data-active="true"]) {
  border-color: var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
}
#workbench[data-mode="COMPARE"] .workbench-intro,
#workbench[data-mode="RISK"] .workbench-intro {
  display: none;
}