/* 집 저울 · spec-006 workbench additions
 * 8-category property icons, couple alignment bar, 6-axis radar, W10 baseline, redevelopment cost stress bar,
 * share-card button/modal. Loaded after map-workbench.css; uses design-tokens.css variables only. */

/* ───────── D2 · property category icons ───────── */
.prop-icon { flex-shrink: 0; vertical-align: middle; }
.prop-cat-badge { white-space: nowrap; max-width: 100%; }
.prop-cat-badge > span { overflow: hidden; text-overflow: ellipsis; }

.prop-legend { display: grid; gap: 6px; padding-top: var(--space-2); border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-2); }
.prop-legend-title { color: var(--text-muted); font-weight: 600; }
.prop-legend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--space-3); }
.prop-legend-list li { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary); }
.prop-legend-list li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-mesh-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; justify-self: start;
  border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface-card);
  color: var(--text-secondary); font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-micro), color var(--dur-fast) var(--ease-micro);
}
.zone-mesh-chip[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }
.zone-mesh-chip[aria-pressed="true"] .prop-icon { color: var(--selected-text) !important; }
.zone-mesh-chip:hover { border-color: var(--text-secondary); }
/* P1: public zone legend — boundary vs representative parcel, geometry_source counts and dataset attribution */
.zone-source-legend { display: grid; gap: 2px; color: var(--text-secondary); min-width: 0; }
.zone-source-legend p { margin: 0; overflow-wrap: anywhere; }
.zone-legend-row { display: flex; align-items: center; gap: 6px; }
.zone-swatch { width: 14px; height: 10px; flex-shrink: 0; border-radius: 2px; border: 1px solid #2563eb; background: rgba(37, 99, 235, 0.22); }
.zone-swatch--parcel { border: 1px dashed #475569; background: rgba(71, 85, 105, 0.08); }
.zone-legend-src, .zone-legend-attr { font-size: 12px; }

/* candidate list cards */
#candidate-list .candidate-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
#candidate-list .candidate-card-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#candidate-list .candidate-card-head .prop-cat-badge { font-weight: 600; flex-shrink: 0; }
.quick-card-head { flex-wrap: wrap; row-gap: 4px; }

/* comparison header / dossier header */
.cand-cat { display: flex; margin: 2px 0; }
.dossier-cat { margin-top: 6px; min-height: 22px; }
.dossier-cat:empty { display: none; }

/* ───────── D7 · share card trigger ───────── */
.share-card-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--touch-target-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);
  color: var(--text-primary); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.share-card-btn:hover { background: var(--surface-inset); }
.share-card-btn:focus-visible, .zone-mesh-chip:focus-visible, .persona-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 1279px) { .share-card-btn-label { display: none; } .share-card-btn { padding: 0; border-color: transparent; } }
@media (max-width: 420px) { .share-card-btn { min-width: 44px; width: 44px; } }

.module-head-actions { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.share-card-inline { display: inline-flex; align-items: center; gap: 6px; }

/* ───────── D4 · couple alignment bar ───────── */
.couple-alignment-bar, .location-radar-panel {
  display: grid; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-card);
}
.couple-alignment-bar:empty, .location-radar-panel:empty { display: none; }
.couple-head, .radar-head { display: grid; gap: 4px; }
.couple-hubs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--space-2); }
.couple-hub { display: grid; gap: 4px; min-width: 0; }
.couple-hub select {
  width: 100%; min-height: var(--touch-target-min); padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--control-border, var(--border-strong)); background: var(--surface-card); color: var(--text-primary); font: inherit; font-size: var(--font-body);
}
.couple-link { font-size: 18px; color: var(--text-muted); padding-bottom: 10px; }
.couple-slider { display: grid; gap: 4px; }
#couple-alpha-slider {
  width: 100%; height: 44px; margin: 0; accent-color: var(--selected-surface);
  background: transparent; cursor: pointer;
}
.couple-scale { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--text-muted); }
.couple-scale span:nth-child(2) { text-align: center; }
.couple-scale span:last-child { text-align: right; }
.couple-alpha-value { justify-self: center; font-weight: 700; }
.couple-verdict { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.couple-verdict-chip {
  flex: 1 1 260px; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-inset); line-height: 1.5;
}
.couple-verdict-chip[data-level="FAIR"] { box-shadow: inset 3px 0 0 var(--risk-safe); }
.couple-verdict-chip[data-level="MODERATE"] { box-shadow: inset 3px 0 0 var(--risk-caution); }
.couple-verdict-chip[data-level="SEVERE"] { box-shadow: inset 3px 0 0 var(--risk-danger); }
.couple-verdict-label { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--selected-surface); color: var(--selected-text); font-weight: 700; }
.couple-cell--fair { color: var(--text-primary); }
.couple-cell--moderate { color: var(--risk-caution); }
.couple-cell--severe { color: var(--risk-danger); }

/* ───────── D5 · 6-axis radar & persona ───────── */
.persona-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.persona-tab {
  min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-secondary); font-weight: 600; cursor: pointer;
}
.persona-tab[aria-pressed="true"] { background: var(--selected-surface); color: var(--selected-text); border-color: var(--selected-surface); }
.radar-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.location-radar-svg { width: 100%; height: auto; overflow: visible; }
.radar-ring { fill: none; stroke: var(--border-subtle); stroke-width: 1; }
.radar-ring--outer { stroke: var(--border-strong); fill: var(--surface-inset); fill-opacity: .5; }
.radar-spoke { stroke: var(--border-subtle); stroke-width: 1; }
.radar-axis-label { font-size: 12px; font-weight: 600; fill: var(--text-secondary); font-family: var(--font-sans); }
.radar-poly { fill: var(--series); fill-opacity: .16; stroke: var(--series); stroke-width: 2.25; stroke-linejoin: round; }
.radar-legend { display: grid; gap: var(--space-2); }
.radar-legend-item {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: 2px; align-items: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset);
}
.radar-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--series); }
.radar-legend-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-score { grid-column: 2; color: var(--text-muted); }
.radar-legend-item .pqr-badge { grid-column: 3; grid-row: 1 / span 2; }
.pqr-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 700; white-space: nowrap; }
.pqr-badge--safe { background: color-mix(in srgb, var(--risk-safe) 14%, transparent); color: var(--risk-safe); }
.pqr-badge--caution { background: color-mix(in srgb, var(--risk-caution) 14%, transparent); color: var(--risk-caution); }
.pqr-badge--check { background: color-mix(in srgb, var(--risk-danger) 12%, transparent); color: var(--risk-danger); }
/* 입지-가격 비교 배지: 평가가 아닌 묘사라 무채색 */
.pqr-badge--neutral { background: var(--surface-inset); color: var(--text-secondary); border: 1px solid var(--border-subtle); }

/* ───────── D6 · W10 baseline + stress test ───────── */
.baseline-toggle-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-2); }
.w10-cell { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; align-items: center; }

.stress-toggle { margin-top: 0; }
.stress-bars { display: grid; gap: var(--space-2); }
.stress-row { display: grid; gap: 4px; }
.stress-label { color: var(--text-secondary); }
.stress-track { position: relative; display: flex; height: 14px; border-radius: var(--radius-full); background: var(--surface-inset); overflow: hidden; }
.stress-seg { display: block; width: var(--w); height: 100%; transition: width var(--dur-normal) var(--ease-out-expo); }
.stress-seg--entry, .stress-key--entry { background: var(--text-primary); }
.stress-seg--contrib, .stress-key--contrib { background: repeating-linear-gradient(135deg, var(--risk-caution) 0 4px, color-mix(in srgb, var(--risk-caution) 60%, transparent) 4px 8px); }
.stress-seg--bench, .stress-key--bench { background: var(--poly-shintong-stroke, #047857); }
.stress-legend { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); color: var(--text-muted); }
.stress-legend li { display: inline-flex; align-items: center; gap: 6px; }
.stress-key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.stress-verdict { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); }
.stress-verdict--ok { box-shadow: inset 3px 0 0 var(--risk-safe); }
.stress-verdict--caution { box-shadow: inset 3px 0 0 var(--risk-caution); }
.stress-verdict--short { box-shadow: inset 3px 0 0 var(--risk-danger); }

/* ───────── D1 · institution-first source display ───────── */
.source-inst { display: block; }
.source-raw { margin-top: 2px; font-weight: 400; }
.source-raw summary { cursor: pointer; color: var(--text-muted); list-style: none; }
.source-raw summary::-webkit-details-marker { display: none; }
.source-raw summary::before { content: "▸ "; }
.source-raw[open] summary::before { content: "▾ "; }
.source-raw code { display: block; font-family: var(--font-mono); color: var(--text-muted); word-break: keep-all; overflow-wrap: anywhere; }

/* ───────── D7 · share card modal ───────── */
.share-card-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(var(--vvh, 100vh) - 32px); }
.share-card-modal[open] { overflow-y: auto; grid-template-columns: minmax(0, 1fr); }
.share-card-modal > * { min-width: 0; }
.share-card-modal .modal-foot { flex-wrap: wrap; }
.share-card-formats { width: 100%; }
.share-card-formats { display: flex; }
.share-card-formats .segment { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; padding: 4px var(--space-2); }
.share-card-preview {
  display: grid; place-items: center; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-inset); min-height: 200px;
}
.share-card-preview img { display: block; max-width: 100%; height: auto; max-height: min(60vh, 640px); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.share-card-preview[data-format="landscape"] img { max-height: none; }

/* ───────── responsive ───────── */
@media (max-width: 767px) {
  .share-card-modal { padding: var(--space-4); }
  .couple-alignment-bar, .location-radar-panel { padding: var(--space-3); }
  .couple-hubs { grid-template-columns: minmax(0, 1fr); }
  .couple-link { display: none; }
  .couple-scale { font-size: 12px; }
  .radar-body { grid-template-columns: minmax(0, 1fr); }
  .location-radar-svg { max-width: 300px; justify-self: center; }
  .prop-legend-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* P1 (2026-10-31): 도구 모음 dialog (web/src/tools-panel.js) */
.tools-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 dashed var(--border-strong); background: var(--surface-card); color: var(--text-primary); cursor: pointer;
}
.tools-pill:hover { border-color: var(--control-border); }
.tools-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tools-pill-label { font-weight: 600; white-space: nowrap; }
.tools-pill-count { color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.tools-modal { width: min(960px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
.tools-body { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.tools-nav { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.tools-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tools-cat-label { color: var(--text-muted); font-weight: 700; margin: 0; }
.tools-item { min-height: 44px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--text-primary); cursor: pointer; }
.tools-item[aria-current="true"] { background: var(--selected-surface); color: var(--selected-text); }
.tools-item:hover { background: var(--surface-muted, rgba(100, 116, 139, 0.12)); }
.tools-view, .tool, .tool-form { display: grid; gap: var(--space-3); min-width: 0; }
.tool-field { display: grid; gap: 4px; min-width: 0; }
.tool-field input, .tool-field select { min-height: 44px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 6px); background: var(--surface-card); color: var(--text-primary); min-width: 0; max-width: 100%; }
.tool-req { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.tool-help, .tool-won { color: var(--text-muted); }
.tool-multi, .tool-q, .tool-check-sec, .tool-list-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 6px); padding: var(--space-2); display: grid; gap: 4px; min-width: 0; }
.tool-check-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.tool-result:empty { display: none; }
.tool-result { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); display: grid; gap: var(--space-2); min-width: 0; }
.tool-kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px var(--space-3); margin: 0; }
.tool-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tool-table-wrap { overflow-x: auto; max-width: 100%; }
.tool-table { border-collapse: collapse; font-size: 14px; }
.tool-table th, .tool-table td { border-bottom: 1px solid var(--border-subtle); padding: 4px 6px; text-align: left; vertical-align: top; }
.tool-findings { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tool-findings li { display: grid; gap: 2px; padding: 6px 8px; border-left: 3px solid var(--border-strong); background: var(--surface-card); }
.tool-findings li[data-status="risk"], .tool-findings li[data-status="fail"] { border-left-color: #b91c1c; }
.tool-findings li[data-status="conditional"], .tool-findings li[data-status="unknown"] { border-left-color: #b45309; }
.tool-findings li[data-status="pass"] { border-left-color: #047857; }
.tool-template { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 6px); background: var(--surface-card); font: inherit; }
.tool-stage.is-current { border-left: 3px solid var(--selected-surface); padding-left: var(--space-2); }
.tool-zone-results, .tool-zone-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tool-sources ul, .tool-notes { margin: 0; padding-left: 1.2em; }
.tool-foot { display: grid; gap: 4px; }
@media (max-width: 720px) {
  .tools-body { grid-template-columns: minmax(0, 1fr); }
  .tools-nav { max-height: 34dvh; overflow: auto; }
}

/* 2026-10-31 · 실험 도구(건축허가·착공 제한 확인) · 외부 사이트 바로가기 · 대표 필지 토글 */
.exp-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--token-radius-full); border: 1px solid var(--risk-caution); color: var(--risk-caution); font-weight: 700; line-height: 1.4; vertical-align: middle; }
.tools-item[aria-current="true"] .exp-badge { color: var(--selected-text); border-color: var(--selected-text); }
.tools-cat--exp { border-top: 1px dashed var(--border-subtle); padding-top: var(--space-2); }
.permit-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.permit-verdict { display: grid; gap: 2px; margin: 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--risk-unknown); background: var(--surface-inset); border-radius: var(--radius-sm, 6px); }
.permit-verdict[data-applies="applies"] { border-left-color: var(--risk-caution); }
.permit-verdict[data-applies="clear"] { border-left-color: var(--risk-safe); }
.permit-verdict[data-applies="conflict"] { border-left-color: var(--risk-danger); border-left-style: double; border-left-width: 6px; }
.permit-verdict-sub { color: var(--text-secondary); font-weight: 400; }
.permit-rows { display: grid; gap: 0; margin: 0; }
.permit-row { display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.permit-row dt { color: var(--text-muted); font-weight: 600; }
.permit-row dd { margin: 0; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.permit-sub { display: block; }
.permit-warn { color: var(--risk-caution); margin: 0; }
.permit-errors ul { margin: 4px 0 0; padding-left: 1.2em; }
.permit-card { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md, 10px); background: var(--surface-card); }
.permit-card-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.permit-badge { display: inline-flex; padding: 1px 8px; border-radius: var(--token-radius-full); font-weight: 700; }
.permit-badge--check { background: var(--risk-caution); color: var(--on-accent, #fff); }
.permit-card-block { display: grid; gap: 2px; padding-left: var(--space-2); border-left: 3px solid var(--risk-safe); }
.permit-card-block[data-tone="caution"] { border-left-color: var(--risk-danger); }
.permit-card-block p, .permit-card-block ul { margin: 0; }
.permit-card-block ul { padding-left: 1.1em; display: grid; gap: 2px; }
.permit-card-k { color: var(--text-muted); font-weight: 700; }
.permit-card-action { margin: 0; }
.permit-anchor { display: grid; gap: 4px; padding: var(--space-2) var(--space-3); border: 1px dashed var(--risk-caution); border-radius: var(--radius-sm, 6px); }
.permit-anchor p { margin: 0; }
.permit-anchor .btn { justify-self: start; }
.permit-meta { margin: 0; }
.approx-chip { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 26; display: inline-flex; align-items: center; gap: var(--space-2); max-width: calc(100% - 24px); padding: 4px 4px 4px 12px; border: 1px dashed var(--risk-caution); border-radius: var(--token-radius-full); background: var(--surface-card); color: var(--risk-caution); box-shadow: var(--shadow-card); pointer-events: auto; }
.map-dock .approx-chip { position: static; transform: none; align-self: center; }
.approx-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approx-chip-close { min-width: 44px; min-height: 44px; }

.parcel-toggle-bar { display: flex; min-width: 0; }
.parcel-toggle { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; row-gap: 0; min-height: 44px; padding: 4px 10px; border-radius: var(--radius-md, 10px); border: 1px dashed var(--border-strong); background: var(--surface-card); color: var(--text-secondary); font-weight: 600; cursor: pointer; text-align: left; max-width: 100%; }
.parcel-toggle[aria-pressed="true"] { border-style: solid; border-color: var(--selected-surface); color: var(--text-primary); }
.parcel-toggle:hover { border-color: var(--text-secondary); }
.parcel-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.parcel-toggle-label { overflow-wrap: anywhere; }
.parcel-toggle-count { grid-column: 2; color: var(--text-muted); font-weight: 700; }
#zone-source-legend .parcel-toggle { min-height: 44px; margin-top: 4px; justify-self: start; }
#candidate-parcel-toggle { margin: 0 0 var(--space-2); }

.outlinks { display: grid; gap: 4px; min-width: 0; }
.outlinks-title { margin: 0; color: var(--text-muted); font-weight: 700; }
.outlinks-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.outlink { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--token-radius-full); background: var(--surface-card); color: var(--text-primary); font-weight: 600; text-decoration: none; }
.outlink:hover { border-color: var(--text-secondary); }
.outlink:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.outlink-icon { flex-shrink: 0; color: var(--text-muted); }
.outlinks-note { margin: 0; }
.outlinks--compact { grid-column: 1 / -1; }
.outlinks--compact .outlink { min-height: 44px; padding: 2px 8px; }

/* ───────── v2.2 V1 · 가독성: 보류 카드(숫자 1개 + 그림 1개 + 행동 1개) · 자료 부족 팁 3단계 ─────────
 * 시안 docs/v22/MOCKUP_VISUAL_REDESIGN.html. 디자인 토큰만 써요(밝은·어두운 테마). 아이콘은 SVG(이모지 없음).
 * 이름 공간: .v-hold-* / .v-lever-* (web/src/levers.js) · .v-tip-* (web/src/data-gap-tips.js) · .v-mbar* (혼인 스포크).
 * 지난 W1 주입 스타일(.gap-tip · .lever-line)보다 앞서도록 두 클래스 선택자를 써요. 390px · 200%(195px)에서 넘치지 않게 줄바꿈해요. */
.v-hold { display: grid; gap: 6px; min-width: 0; max-width: 100%; padding: var(--space-3); border: 1px solid var(--border-strong); border-left: 4px solid var(--risk-caution); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); overflow-wrap: anywhere; word-break: keep-all; text-align: left; }
.v-hold[data-hold-tone="ok"] { border-left-color: var(--brand-accent); }
.v-hold > p, .v-hold-panel > p { margin: 0; }
.v-hold-panel { display: grid; gap: var(--space-2); margin: 10px 0; min-width: 0; }
.v-hold-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.v-hold-tag { justify-self: start; padding: 1px 8px; border-radius: var(--token-radius-full); border: 1px solid var(--border-strong); color: var(--text-secondary); font-weight: 600; }
.v-hold-num { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.v-hold-barwrap { display: grid; gap: 2px; min-width: 0; }
.v-hold-bar { display: block; width: 100%; overflow: visible; }
.v-hold-bar-track { fill: var(--surface-inset); stroke: var(--border-strong); stroke-width: 1; }
.v-hold-bar-gap { fill: color-mix(in srgb, var(--risk-caution) 40%, transparent); }
.v-hold-bar-have { fill: var(--text-secondary); }
.v-hold-bar-have.is-ok { fill: var(--brand-accent); }
.v-hold-bar-need { fill: var(--text-primary); }
.v-hold-bar-neg { fill: color-mix(in srgb, var(--risk-danger) 55%, transparent); }
.v-hold-bar-zero { fill: var(--text-secondary); }
.v-hold-scale-neg { flex-basis: 100%; color: var(--risk-danger); font-weight: 600; }
.v-lever-chip-delta { flex-basis: 100%; text-align: right; color: var(--text-secondary); }
.v-lever-chip-note { flex-basis: 100%; color: var(--text-muted); }
.v-hold-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; color: var(--text-secondary); }
.v-hold-scale b { color: var(--text-primary); font-weight: 700; }
.v-hold-scale-need { margin-left: auto; text-align: right; }
.v-hold-chips-title { color: var(--text-secondary); font-weight: 600; }
.v-hold-levers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.v-lever-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); text-align: left; }
.v-lever-chip[data-best="true"] { border-color: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.v-lever-icon { flex: none; color: var(--text-secondary); }
.v-lever-chip[data-best="true"] .v-lever-icon { color: var(--brand-accent); }
.v-lever-chip-label { min-width: 0; flex: 1 1 6em; font-weight: 600; }
.v-lever-chip-value { margin-left: auto; max-width: 100%; font-weight: 800; text-align: right; word-break: keep-all; overflow-wrap: anywhere; }
.v-lever-best { order: -1; flex-basis: 100%; color: var(--brand-accent); font-weight: 700; }
.v-lever-chip--long .v-lever-chip-long { flex-basis: 100%; color: var(--text-secondary); font-weight: 400; }
.v-hold-note { margin: 0; color: var(--text-secondary); }
.v-hold-cause { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-inset); }
.v-hold-cause .v-lever-icon { margin-top: 1px; }
.v-hold-why, .v-hold-more { min-width: 0; }
.v-hold-why > summary, .v-hold-more > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; color: var(--text-secondary); font-weight: 600; }
.v-hold-why > summary::-webkit-details-marker, .v-hold-more > summary::-webkit-details-marker { display: none; }
.v-hold-why > summary::before, .v-hold-more > summary::before { content: ''; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dur-fast) var(--ease-micro); }
.v-hold-why[open] > summary::before, .v-hold-more[open] > summary::before { transform: rotate(90deg); }
.v-hold-why > summary:focus-visible, .v-hold-more > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.v-hold-why-body { display: grid; gap: 4px; padding: 2px 0 4px; color: var(--text-secondary); }
.v-hold-why-body p { margin: 0; }
.v-hold-facts { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.v-hold-facts b { color: var(--text-primary); }
.v-hold-more { display: grid; gap: var(--space-2); }
.v-hold-more[open] > .v-hold { margin-top: 0; }
/* 좁은 칸: 작은 막대 + 칩 하나 */
.v-hold-mini { display: grid; gap: 4px; margin-top: 4px; min-width: 0; max-width: 100%; text-align: left; }
.v-hold-mini .v-lever-chip { min-height: 44px; padding: 3px 8px; gap: 2px 6px; }
.v-hold-mini .v-lever-chip-label { flex: 0 1 auto; font-weight: 500; }
.v-hold-wraptag { white-space: normal; max-width: 100%; overflow-wrap: anywhere; word-break: keep-all; }
.v-hold-quick { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; }
.v-hold-quick .quick-card-main { min-width: 0; }
.v-hold-quick .quick-card-price { flex-wrap: wrap; min-width: 0; }
.v-hold-quick .quick-card-price > .type-body { white-space: nowrap; }
.v-hold-quick .quick-card-price > .type-caption { min-width: 0; overflow-wrap: anywhere; }
.v-hold-quick > .v-tip { grid-column: 1 / -1; }
/* 200% 확대(폭 195px 안팎): 후보 카드를 한 줄로 쌓아 글자가 한 글자씩 끊기지 않게 해요 */
@media (max-width: 280px) { .v-hold-quick { grid-template-columns: minmax(0, 1fr); } .v-hold-quick > .btn--chip { justify-self: start; max-width: 100%; white-space: normal; height: auto; } }
.v-byoc-margin { display: block; font-weight: 700; }
.v-byoc-w10 { display: block; margin-top: 4px; }
/* 혼인 스포크: 경로별 대출 한도 막대 */
.v-mbars { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.v-mbar { display: grid; gap: 2px; min-width: 0; }
.v-mbar-label { color: var(--text-secondary); overflow-wrap: anywhere; word-break: keep-all; }
.v-mbar-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-mbar-svg { flex: 1 1 auto; min-width: 40px; display: block; }
.v-mbar-track { fill: var(--surface-inset); stroke: var(--border-strong); stroke-width: 1; }
.v-mbar-fill { fill: var(--text-secondary); }
.v-mbar-fill.is-drop { fill: var(--risk-caution); }
.v-mbar-value { flex: none; font-weight: 800; white-space: nowrap; }
.v-hold--spoke { border-left-color: var(--brand-accent); }
.v-hold-table .lever-scroll { margin-top: 4px; }

/* 자료 부족 팁: 접힌 한 줄(경고는 늘 보여요) → 3단계 */
.gap-tip.v-tip { margin: 4px 0; padding: 0; min-width: 0; max-width: 100%; border: 1px solid var(--border-strong); border-left: 3px solid var(--risk-caution); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); text-align: left; overflow-wrap: anywhere; word-break: keep-all; }
.v-tip > .v-tip-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 6px 10px; cursor: pointer; list-style: none; }
.v-tip > .v-tip-sum::-webkit-details-marker { display: none; }
.v-tip > .v-tip-sum:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-md); }
.v-tip .v-tip-badge { display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid var(--risk-caution); border-radius: var(--token-radius-full); color: var(--risk-caution); font-size: var(--font-body); font-weight: 700; white-space: nowrap; }
.v-tip .v-tip-head { flex: 1 1 8em; min-width: 0; font-weight: 600; }
.v-tip .v-tip-cue { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-right: 4px; color: var(--text-muted); white-space: nowrap; }
.v-tip .v-tip-cue::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease-micro); }
.v-tip[open] .v-tip-cue::after { transform: rotate(225deg) translateY(-1px); }
.v-tip .v-tip-body { display: grid; gap: 10px; padding: 4px 10px 10px; }
.v-tip .v-tip-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v-tip .v-tip-step, .v-tip .v-tip-ask { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.v-tip .v-tip-step:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 26px; bottom: -8px; width: 2px; background: var(--border-subtle); }
.v-tip .v-tip-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--selected-surface); color: var(--selected-text); font-size: var(--font-body); font-weight: 700; line-height: 1; }
.v-tip .v-tip-num--q { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.v-tip .v-tip-step-body { display: grid; gap: 4px; min-width: 0; }
.v-tip .v-tip-step-body p, .v-tip .v-tip-step-body ul { margin: 0; }
.v-tip .v-tip-step-body ul { padding-left: 0; list-style: none; display: grid; gap: 2px; }
.v-tip .v-tip-step-body li { position: relative; padding-left: 12px; }
.v-tip .v-tip-step-body li::before { content: ''; position: absolute; left: 2px; top: 0.65em; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }
.v-tip .v-tip-k { font-weight: 700; color: var(--text-primary); }
.v-tip .v-tip-links { display: flex; flex-wrap: wrap; gap: 6px; }
.v-tip .v-tip-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); font-weight: 600; text-decoration: none; }
.v-tip .v-tip-link:hover { border-color: var(--text-secondary); }
.v-tip .v-tip-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.v-tip .v-tip-ext { flex: none; color: var(--text-muted); }
.v-tip .gap-tip-src { margin: 0; color: var(--text-muted); }
.v-tip--compact > .v-tip-sum { min-height: 44px; padding: 4px 8px; }
.v-tip--compact .v-tip-cue { font-size: var(--font-caption); gap: 4px; }
.v-tip-panel { display: grid; gap: 6px; margin: 10px 0; min-width: 0; }
.v-tip-panel > .v-tip-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.v-tip-count { padding: 0 8px; border-radius: var(--token-radius-full); background: var(--surface-inset); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .v-hold-why > summary::before, .v-hold-more > summary::before, .v-tip .v-tip-cue::after { transition: none; }
}
/* 공유 카드 '왜 보류인가요?'(마스킹): 후보별 묶음 — 왜 보류 · 이렇게 하면 · 확인 팁 */
.v-why .v-why-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; }
.v-why .v-why-cand { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); }
.v-why .v-why-cand-h { margin: 0; }
.v-why .v-why-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v-why .v-why-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 8px; align-items: start; min-width: 0; }
.v-why .v-why-k { padding: 0 7px; border-radius: var(--token-radius-full); border: 1px solid var(--border-strong); color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
.v-why .v-why-row[data-why-kind="reason"] .v-why-k { border-color: var(--risk-caution); color: var(--risk-caution); }
.v-why .v-why-row[data-why-kind="lever"] .v-why-k { border-color: var(--brand-accent); color: var(--brand-accent); }
.v-why .v-why-t { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
@media (max-width: 360px) { .v-why .v-why-row { grid-template-columns: minmax(0, 1fr); } .v-why .v-why-k { justify-self: start; } }

/* ═════════ v31 dashboard: one number, one figure, one action ═════════ */
:root, html[data-theme="light"] { --dash-series-1: #0D9488; --dash-series-2: #E11D48; --dash-series-3: #4F46E5; --dash-base: #94A3B8; }
html[data-theme="dark"], .dark { --dash-series-1: #2DD4BF; --dash-series-2: #FB7185; --dash-series-3: #818CF8; --dash-base: #64748B; }

.dash { display: grid; gap: var(--space-3); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.dash[data-cols="0"] .dash-grid { display: none; }
.dash-slot { display: block; min-width: 0; }
.dash-card {
  display: grid; gap: var(--space-2); padding: var(--space-3); min-width: 0; align-content: start;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dash-head h3 { font-weight: 700; min-width: 0; }
.dash-head { flex-wrap: wrap; }
.dash-head-actions { display: inline-flex; flex: none; flex-wrap: nowrap; gap: 0 var(--space-2); margin-left: auto; white-space: nowrap; }
.nw-row .fc { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-subtle); }
.info-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 28px; padding: 0 var(--space-1); position: relative; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.info-btn::before { content: ""; position: absolute; inset: -8px -4px; }
.info-btn:hover { color: var(--text-primary); }
.dash-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.01em; }
.nw-lead { display: grid; gap: 2px; }
.nw-lead-k { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--text-secondary); }
.nw-lead-name { font-weight: 700; color: var(--text-primary); }
.nw-cond-box { display: grid; gap: 2px; }
.nw-conds { display: flex; flex-wrap: wrap; gap: 4px; }
.nw-cond { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-primary); font-weight: 600; }
.nw-cond[data-cond="funding"] { background: color-mix(in srgb, var(--risk-caution) 16%, var(--surface-card)); }
.nw-cond-more > p { margin-top: 2px; color: var(--text-secondary); }
.nw-jump { justify-self: start; min-height: 28px; }
.fc-range-none { color: var(--text-primary); font-weight: 700; }
.dash-legend-k { font-weight: 600; }
#dash-same-home:empty { display: none; }
#dash-same-home { margin-top: var(--space-3); }
.sc-note { color: var(--text-secondary); }
.sc-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.sc-row { display: grid; gap: 4px; align-content: start; min-width: 0; }
.dash--single .dash-card--wide { grid-column: 1 / -1; }
.radar-badge-note { color: var(--text-secondary); }
.tray-budget { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--space-2); color: var(--text-secondary); }
.tray-budget .btn { min-height: 36px; padding: 0 var(--space-2); }
.disclosure-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.quick-outlink-note:empty { display: none; }
#map-view-list-dialog .map-list-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 100%; min-height: 44px; padding: var(--space-1) var(--space-2); text-align: left; }
#map-view-list-dialog .map-list-row:hover { background: var(--surface-inset); }
#map-view-list-dialog .map-view-list { max-height: 60dvh; }
#map-view-list-dialog .map-view-list li { padding: 0; }
#search-results .search-hit--map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; text-align: left; }
#search-results .search-hit--map .search-hit-name { white-space: normal; }
#search-results .search-hit--map .search-hit-meta, #map-view-list-dialog .map-list-row > .type-caption { grid-column: 1; }
@media (min-width: 768px) {
  /* Two-column cards keep small print readable. */
  .dash-card .type-caption, .dash-card .nw-label, .dash-card .nw-value { font-size: 13px; line-height: 18px; }
}
.dash-number[data-tone="up"] { color: var(--price-up); }
.dash-number[data-tone="down"] { color: var(--price-down); }
.dash-number--short { color: var(--text-muted); font-size: var(--font-title); line-height: var(--line-title); }
.dash-number-sub { color: var(--text-secondary); font-weight: 500; letter-spacing: 0; }
.dash-note { color: var(--text-secondary); }
.dash-action { justify-self: start; min-height: 44px; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); color: var(--text-secondary); }
.dash-legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-bar { width: 14px; height: 8px; border-radius: 0 3px 3px 0; }
.legend-bar--series { background: var(--dash-series-1); }
.legend-bar--base { background: var(--dash-base); }

.cand-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cand-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 6px; position: relative; border: 1px solid var(--border-strong); border-radius: var(--token-radius-full); background: var(--surface-card); font-weight: 600; cursor: pointer; }
.cand-chip::before { content: ""; position: absolute; inset: -4px 0; }
.cand-chip[aria-pressed="true"] { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.cand-dot { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--series, var(--text-primary)); color: #fff; font-size: var(--font-caption); line-height: 16px; font-weight: 700; }
html[data-theme="dark"] .cand-dot { color: #09090B; }

.nw-row { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.nw-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nw-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-delta { margin-left: auto; flex: none; font-weight: 800; }
.nw-delta[data-tone="up"] { color: var(--price-up); }
.nw-delta[data-tone="down"] { color: var(--price-down); }
.nw-bars { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; }
.nw-label { color: var(--text-secondary); font-size: var(--font-caption); line-height: 16px; text-align: right; }
.nw-value { color: var(--text-primary); font-size: var(--font-caption); line-height: 16px; font-weight: 700; }
.nw-track { display: block; width: 100%; height: 14px; }
.nw-bar--base { fill: var(--dash-base); }
.wf-label { fill: var(--text-secondary); font-size: 13.5px; font-family: var(--font-brand-hybrid); }
.wf-value { fill: var(--text-primary); font-size: 13.5px; font-weight: 700; font-family: var(--font-brand-hybrid); }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }

.fc { display: grid; gap: 2px; }
.fc-title { color: var(--text-secondary); font-weight: 600; }
.fc-bar { display: block; }
.fc-axis { stroke: var(--border-strong); stroke-width: 1; }
.fc-loss { fill: var(--price-down); }
.fc-gain { fill: var(--price-up); }
.fc-zero { stroke: var(--text-primary); stroke-width: 1; }
.fc-mid { fill: var(--text-primary); stroke: var(--surface-card); stroke-width: 1; }
.fc-range { display: grid; grid-template-columns: minmax(60px, 1fr) auto; align-items: center; gap: var(--space-2); }
.fc-range--stack { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.fc-range--stack .fc-range-ends { white-space: normal; }
.fc-range:has(> .fc-range-none) { grid-template-columns: minmax(0, 1fr); }
.fc-range-ends { color: var(--text-secondary); white-space: nowrap; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-chip { display: inline-flex; gap: 4px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-primary); white-space: nowrap; }
.fc-chip-k { color: var(--text-secondary); font-weight: 600; flex: none; }
.fc-chip[data-part="basis"] { white-space: normal; }

.data-short { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-secondary); }
.data-short-text { display: grid; flex: 1 1 140px; min-width: 0; }
.data-short-text strong { color: var(--text-primary); }
.data-short-icon { flex: none; }
.data-short-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.data-short-actions .btn { min-height: 36px; padding: 0 var(--space-2); }

.wf { display: block; overflow: visible; }
.wf-bar--base, .wf-bar--total { fill: var(--text-secondary); }
.wf-bar--total { fill: var(--text-primary); }
.wf-bar--add { fill: var(--dash-base); }
.wf-bar--bench { fill: var(--dash-series-3); }
.wf-bar--gain { fill: var(--price-up); }
.wf-bar--loss { fill: var(--price-down); }
.wf-bar--assumed { fill-opacity: .35; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 2; color: var(--text-secondary); }
.wf-link { stroke: var(--border-strong); stroke-width: 1; }
.wf-tag { fill: var(--risk-caution); font-size: 13.5px; font-weight: 700; font-family: var(--font-brand-hybrid); }

.signal-rows { display: grid; gap: var(--space-2); }
.signal-row { display: grid; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.signal-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.signal { display: flex; align-items: flex-start; gap: 4px; min-width: 0; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-inset); }
.signal-text { display: grid; min-width: 0; }
.signal-axis { color: var(--text-secondary); }
.signal-value { font-weight: 700; white-space: nowrap; }
.signal-sub { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signal-icon { flex: none; color: var(--risk-unknown); }
.signal-icon--safe, .signal-icon--ok { color: var(--risk-safe); }
.signal-icon--caution { color: var(--risk-caution); }
.signal-icon--danger, .signal-icon--short { color: var(--risk-danger); }

#location-radar-panel.dash-card { margin: 0; }
#location-radar-panel .radar-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
#location-radar-panel .location-radar-svg, .location-radar-svg--mini { display: block; width: 100%; max-width: 232px; height: auto; margin: 0 auto; overflow: visible; }
.location-radar-svg .radar-axis-label { font-size: 18px; }
#location-radar-panel .radar-legend { display: grid; gap: 2px; }
#location-radar-panel .radar-legend-item { grid-template-columns: 10px minmax(0, 1fr) auto auto; column-gap: 6px; padding: 0 2px; background: transparent; }
#location-radar-panel .radar-swatch { width: 10px; height: 10px; }
#location-radar-panel .radar-score { grid-column: auto; color: var(--text-primary); font-weight: 700; }
#location-radar-panel .radar-legend-item .pqr-badge { grid-column: auto; grid-row: auto; padding: 0; border: 0; background: transparent; color: var(--text-secondary); font-weight: 500; }
#location-radar-panel .persona-tabs { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0; }
#location-radar-panel .persona-tabs::-webkit-scrollbar { display: none; }
#location-radar-panel .persona-tab { flex: none; min-height: 36px; padding: 0 var(--space-2); font-size: var(--font-caption); line-height: var(--line-caption); }

.dash-empty { display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.dash-empty:empty, #dash-empty:empty, #dash-cands:empty { display: none; }
.dash-empty-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); width: 100%; }
.dash-empty-tile { display: grid; justify-items: center; gap: 4px; color: var(--text-secondary); text-align: center; min-width: 0; }
.dash-empty-svg { width: 100%; max-width: 120px; height: auto; }
.dash-empty-svg > * { fill: var(--surface-inset); stroke: var(--border-strong); stroke-width: 1; }
.dash-empty-signals { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; }
.dash-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

.dash--single .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-settings > summary { cursor: pointer; padding: var(--space-2) 0; font-weight: 600; color: var(--text-secondary); min-height: 44px; display: flex; align-items: center; }

/* Compact chrome in the screens where charts must own the first view. */
#workbench-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wb-tab--secondary { grid-column: auto; justify-self: stretch; padding-inline: var(--space-2); }
#workspace:not([data-mode="BUDGET"]) #budget-sticky { align-items: center; padding: var(--space-2) var(--space-3); }
#workspace:not([data-mode="BUDGET"]) .sticky-main { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
#workspace:not([data-mode="BUDGET"]) #h0 { font-size: var(--font-title); line-height: var(--line-title); }
#workspace:not([data-mode="BUDGET"]) .sticky-side { display: flex; align-items: center; }
#workspace:not([data-mode="BUDGET"]) #binding-constraint, #workspace:not([data-mode="BUDGET"]) [data-action="open-loan-basis"] { display: none; }
#workspace:not([data-mode="BUDGET"]) .sticky-expand { min-height: 36px; }
#comparison .module-head > div > p, #comparison .module-head--row > div:first-child > p { display: none; }

@media (max-width: 767px) {
  .dash-grid, .dash--single .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-number { font-size: 22px; line-height: 28px; }
  .wb-tab { font-size: var(--font-caption); }
  .dash-empty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #comparison { padding-left: var(--space-3); padding-right: var(--space-3); }
}

.dash-summary { display: none; }
#dash-summary:empty { display: none; }
/* Compare screen head: title and one icon action; sorting lives with the table settings. */
#comparison { padding-top: var(--space-3); gap: var(--space-2); }
#comparison .module-head--row { align-items: center; }
#comparison .share-card-inline { gap: 0; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.compare-settings .sort-field { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (max-width: 767px) {
  .dash-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .cand-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: -4px; }
  .cand-chips::-webkit-scrollbar { display: none; }
  .cand-chips > li { flex: none; }
  .dash-tile { display: grid; gap: 2px; min-height: 52px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); color: inherit; text-decoration: none; align-content: start; min-width: 0; }
  .dash-tile-label { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-tile-value { display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-body); line-height: var(--line-body); font-weight: 800; white-space: nowrap; }
  .dash-tile-value[data-tone="up"] { color: var(--price-up); }
  .dash-tile-value[data-tone="down"] { color: var(--price-down); }
  .h0-chip-value { font-size: 13px; white-space: nowrap; }
  #global-header { flex-wrap: nowrap; }
  .h0-chip { flex: none; }
}

/* Candidates sit beside the title: selecting one focuses the waterfall without costing a row. */
#comparison .module-head--row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); }
#comparison .module-head--row > #dash-cands { min-width: 0; }
#workspace[data-mode="COMPARE"] #comparison { padding: var(--space-3) var(--space-4) var(--space-4); }
@media (max-width: 767px) {
  #comparison .module-head--row { grid-template-columns: minmax(0, 1fr) auto; }
  #comparison .module-head--row > #dash-cands { grid-column: 1 / -1; grid-row: 2; }
  #workspace[data-mode="COMPARE"] #comparison { padding: var(--space-3); }
  .header-actions { flex-wrap: nowrap; min-width: 0; gap: 0; }
  .h0-chip { flex: none; padding: 0 6px; }
}

/* Two independent columns: a tall net-worth card must not push the other charts out of the first view. */
.dash-grid--columns { display: flex; align-items: flex-start; gap: var(--space-3); }
.dash-col { flex: 1 1 0; min-width: 0; display: grid; gap: var(--space-3); }
.dash[data-cols="0"] .dash-grid--columns { display: none; }
#location-radar-panel .location-radar-svg { max-width: 232px; }
.data-short { padding: 4px var(--space-2); gap: 6px; }
.data-short-text { flex: 1 1 auto; }
.data-short-actions { flex: none; }
.data-short-actions .btn { min-height: 32px; padding: 0 var(--space-2); white-space: nowrap; }
.dash--single .dash-card[data-chart="waterfall"], .dash--single .dash-card[data-chart="signal"] { grid-column: 1 / -1; }
.wf { max-width: 380px; margin: 0 auto; }
@media (max-width: 767px) {
  .dash-grid--columns { display: grid; grid-template-columns: minmax(0, 1fr); }
  #location-radar-panel .location-radar-svg { max-width: 232px; }
  #workspace:not([data-mode="BUDGET"]) #budget-sticky { flex-wrap: nowrap; }
  #workspace:not([data-mode="BUDGET"]) .eyebrow-full { display: none; }
  #workspace:not([data-mode="BUDGET"]) .sticky-main { min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; }
  #workspace:not([data-mode="BUDGET"]) .sticky-side { flex: none; width: auto; }
  #workspace:not([data-mode="BUDGET"]) .est-tag { flex: none; padding: 0; }
  #workspace:not([data-mode="BUDGET"]) #h0 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Closed disclosures are truly closed: no layout, no focus stops, nothing read aloud. */
details:not([open]) > :not(summary) { display: none !important; }

/* v31 folded detail in cells, checklists and the modal */
.cell-more > summary, .check-more > summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; min-height: 24px; display: inline-flex; align-items: center; gap: 2px; }
.cell-more .cell-sub { display: block; }
.check-more { margin-top: 2px; }
/* 44×44 to press; margins keep the line height of the chips beside it. */
.info-btn--icon { width: 44px; height: 44px; min-height: 44px; margin: -14px -14px -14px -10px; padding: 0; justify-content: center; position: relative; z-index: 1; }
.info-btn--icon::before { content: none; }
.fc-chip-info { display: inline-flex; align-items: center; }
#map-attribution { cursor: help; }
.disclosure-modal { width: min(560px, calc(100vw - 24px)); }
.disclosure-summary { margin-top: var(--space-2); }
.disclosure-items { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding-left: var(--space-4); list-style: disc; }
.disclosure-part { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.disclosure-part h3 { color: var(--text-secondary); font-weight: 700; margin-bottom: 4px; }
.disclosure-formula { display: block; padding: var(--space-2); margin-top: 4px; border-radius: var(--radius-sm); background: var(--surface-inset); font-family: var(--font-mono); font-size: var(--font-caption); line-height: 18px; white-space: normal; overflow-wrap: anywhere; }
.compare-empty:empty { display: none; }

/* Phones: search is a 44px icon in the header. The icon is the field itself and opens across the header, so its hint is never cut. */
@media (max-width: 767px) {
  #location-search-form { display: flex; flex: 0 0 44px; width: 44px; height: 44px; position: relative; border-color: transparent; background: transparent; box-shadow: none; }
  #location-search-form .search-submit { display: none; }
  #location-search-form .search-icon { display: grid; place-items: center; position: absolute; inset: 0 auto 0 0; width: 44px; color: var(--text-primary); pointer-events: none; }
  #location-search-form input { min-width: 0; width: 100%; padding: 0; color: transparent; background: transparent; cursor: pointer; }
  #location-search-form input::placeholder { color: transparent; }
  #location-search-form:is(:focus-within, :has(#search-results:not([hidden]))) { position: absolute; inset: 6px var(--space-2); width: auto; max-width: none; z-index: 46; border-color: var(--border-strong); background: var(--surface-card); box-shadow: var(--shadow-sheet); }
  #location-search-form:is(:focus-within, :has(#search-results:not([hidden]))) input { padding: 0 var(--space-2) 0 40px; color: var(--text-primary); cursor: text; }
  #location-search-form:is(:focus-within, :has(#search-results:not([hidden]))) input::placeholder { color: var(--text-muted); }
  #location-search-form:is(:focus-within, :has(#search-results:not([hidden]))) .search-submit { display: inline-flex; align-items: center; }
  .search-open { display: none !important; }
  .brand-name { display: none; }
  /* The page behind a phone's detail sheet is inert and covered: it stays out of the reading order and the text budget. */
  html:has(#dossier[open]) :is(#workbench, #map-clusters, #map-pills, .map-chrome, .map-dock) { visibility: hidden; }
}

.cand-chip > .type-caption { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dossier-fold > summary, .byoc-fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.compare-table th[scope="row"] { min-width: 96px; }
.byoc-fold > summary.module-head { padding: 0; }

.compare-table th[scope="row"] { min-width: 132px; }
#location-radar-panel .radar-score { white-space: nowrap; }
@media (max-width: 767px) {
  #location-radar-panel .radar-legend-item { grid-template-columns: 10px minmax(0, 1fr) auto; }
  #location-radar-panel .radar-legend-item .pqr-badge { grid-column: 2 / -1; }
}

.sticky-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
#h0-note { flex-basis: 100%; }
.compare-table-fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--text-secondary); }
.signal-axis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#location-radar-panel .radar-swatch { background: none; }

@media (max-width: 767px) {
  #workspace:not([data-mode="BUDGET"]) #h0 { font-size: var(--font-body); line-height: var(--line-body); overflow: visible; }
  #workspace:not([data-mode="BUDGET"]) .est-tag { margin-right: 2px; }
}