/* NestHunt v4：DesignForge ink-board v8（墨色看板）。色碼取自卡的 palette／palette_dark；
兩條捷運路線色取自臺北捷運公司官網 web.metro.taipei 的 CSS（--color-g、--color-r），明暗兩版同值。 */
@font-face { font-family: "Inter"; src: url("fonts/Inter-subset.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "TW Symbols"; src: url("fonts/Symbols-subset.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+2715; }
@font-face { font-family: "Noto Sans TC Sub"; src: url("fonts/NotoSansTC-subset.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { /* v4.5 字級（4 級：12 標籤、14 內文、20 標題與關鍵數字、44 第一名分數）與間距基準（4px） */
  --fs-1: 12px; --fs-2: 14px; --fs-3: 20px; --fs-4: 44px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; color-scheme: light; --bg: #FFFFFF; --surface: #F7F7F7; --raised: #FCFCFD; --text: #18181B; --ink: #0A0A0A; --muted: #6B6B70; --faint: #A1A1A6; --line: #EDEDED; --accent: #7C3AED; --on-accent: #FFFFFF; --cat-yellow: #F59E0B; --cat-blue: #0EA5E9; --seg4-text: #0A0A0A; --shadow: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06); --g: #008659; --r: #E4002C; --neg: #8F5200; --font-body: "TW Symbols", "Inter", "Noto Sans TC Sub", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --font-mono: "TW Symbols", ui-monospace, SFMono-Regular, Menlo, "Noto Sans TC Sub", monospace; }
:root[data-theme="dark"] { color-scheme: dark; --bg: #0B0B0C; --surface: #18181B; --raised: #222226; --text: #EDEDEF; --ink: #FAFAFA; --muted: #A1A1AA; --faint: #8B8B93; --line: #2A2A2E; --accent: #A78BFA; --on-accent: #0B0B0C; --neg: #E9A449; --cat-yellow: #FBBF24; --cat-blue: #38BDF8; --seg4-text: #0B0B0C; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-2); line-height: 1.6; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nobr { white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { margin: 0 auto; }
[hidden] { display: none !important; }
/* 頁首 */
.masthead { padding-top: 16px; }
.masthead-row { flex-wrap: wrap; }
.wordmark { margin: 0; font-weight: 800; font-size: var(--fs-3); line-height: 1.4; color: var(--ink); }
.source-row { margin: 0; font-size: var(--fs-1); color: var(--muted); flex: 1 1 320px; }
/* 卡片 */
main { display: grid; padding-top: 8px; }
.card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); min-width: 0; scroll-margin-top: 12px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.section-title { line-height: 1.4; font-weight: 700; color: var(--ink); }
.caption { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-2); }
.note { color: var(--text); font-size: var(--fs-2); margin: 8px 0 0; }
.note.small { font-size: var(--fs-2); color: var(--muted); }
.fine { font-size: var(--fs-1); color: var(--muted); margin: 8px 0 0; }
.error-state { border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px 16px; margin: 8px 0; font-weight: 700; }
.legend { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-2); color: var(--text); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
details.more { margin-top: 8px; }
details.more > summary { cursor: pointer; font-size: var(--fs-2); color: var(--muted); width: fit-content; }
details.more[open] > summary { color: var(--text); }
/* 站號色塊：白字對官方路線色 4.61（G）、4.84（R） */
.stn { display: inline-block; font-family: var(--font-body); font-size: var(--fs-1); line-height: 1.5; font-weight: 700; color: #FFFFFF; padding: 0 4px; border-radius: 4px; vertical-align: 1px; white-space: nowrap; }
.stn-g { background: var(--g); }
.stn-r { background: var(--r); }
/* 總覽 */
.update-banner { display: flex; flex-wrap: wrap; align-items: baseline; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 8px 16px; font-size: var(--fs-2); }
.update-banner strong { font-weight: 700; }
.headline { margin: 12px 0; line-height: 1.25; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.headline b { font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--muted); }
.summary { margin: 4px 0; font-size: var(--fs-2); }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.metric { background: var(--bg); border-radius: 10px; padding: 8px 12px; }
.metric .lab { font-size: var(--fs-1); color: var(--muted); display: block; }
.metric .val { display: block; font-size: var(--fs-3); line-height: 1.1; font-weight: 600; margin: 4px 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.metric .det { font-size: var(--fs-1); color: var(--muted); display: block; line-height: 1.45; }
.props { display: grid; grid-template-columns: 9em minmax(0, 1fr); margin: 4px 0 0; font-size: var(--fs-2); }
.props dt, .props dd { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--line); }
.props dt { color: var(--muted); }
/* 加分排名：分數組成堆疊條 */
.rank-bars { display: grid; gap: 8px; margin: 4px 0; }
.rank-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 8.5em; align-items: center; }
.rank-row .nm { font-size: var(--fs-2); font-weight: 600; }
.rank-row .nm .pos { color: var(--muted); margin-right: 8px; font-weight: 400; }
.rank-track { display: flex; height: 28px; background: var(--bg); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--muted); }
.seg-part { height: 100%; position: relative; display: flex; align-items: center; justify-content: center; border-right: 2px solid var(--bg); min-width: 0; }
.seg-num { font-size: var(--fs-1); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg-part.tight .seg-num { visibility: hidden; }
.seg-0 { background: var(--ink); color: var(--bg); }
.seg-1 { background: var(--cat-blue); color: #0A0A0A; }
.seg-2 { background: var(--cat-yellow); color: #0A0A0A; }
.seg-3 { background: var(--muted); color: var(--bg); }
.seg-4 { background: var(--faint); color: var(--seg4-text); }
.seg-5 { background: var(--raised); color: var(--text); }
.rank-row .sc { text-align: right; white-space: nowrap; }
.rank-row .sc-v { font-size: var(--fs-3); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 8px; }
.rank-row.lead .sc-v { color: var(--ink); }
.seg-out { grid-column: 2 / -1; margin: 0; font-size: var(--fs-1); color: var(--muted); }
.seg-out:empty { display: none; }
.weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.weights label { display: grid; font-size: var(--fs-1); color: var(--muted); }
.weights input { font: inherit; font-size: var(--fs-2); color: var(--text); background: var(--bg); border: 1px solid var(--muted); border-radius: 10px; padding: 4px 8px; width: 100%; font-variant-numeric: tabular-nums; }
.scenarios { display: grid; gap: 4px; margin: 8px 0 0; }
.scenarios label { display: flex; align-items: center; font-size: var(--fs-2); cursor: pointer; }
.scenarios input { accent-color: var(--ink); }
.actions { margin-top: 8px; }
/* 通勤與費用比較表 */
.cmp { font-size: var(--fs-2); }
.cmp-row { display: grid; border-bottom: 1px solid var(--line); }
.cmp-head { padding-bottom: 2px; }
.cmp-nm { font-weight: 600; line-height: 1.35; }
.cmp-head .cmp-nm { font-weight: 400; color: var(--muted); font-size: var(--fs-1); }
.cmp-h { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--muted); }
.cmp-lab { display: none; }
.cap { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid var(--ink); }
.link { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--muted); }
.key-limit { width: 0; border-left: 2px dashed var(--ink); }
.key-cap { width: 0; border-left: 2px solid var(--ink); }
.val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--fs-1); }
.over { font-weight: 700; }
/* 必要條件矩陣 */
.matrix td.cm { text-align: center; vertical-align: middle; position: relative; }
.matrix .cm-mark { display: inline-block; font-size: var(--fs-2); line-height: 1.2; margin-right: 4px; }
.matrix .cm-text { font-size: var(--fs-1); color: var(--muted); }
.matrix .cm-no .cm-text { color: var(--text); font-weight: 700; }
.matrix tbody th, .matrix tbody td:first-child { min-width: 9em; }
.matrix tfoot td, .matrix tfoot th { font-weight: 700; border-top: 1px solid var(--muted); border-bottom: 0; }
.matrix td.cm-sum { text-align: center; }
.matrix th { white-space: normal; text-align: center; }
.matrix th:first-child { text-align: left; }
/* 時程帶 */
.tape-scroll { overflow-x: auto; border-radius: 10px; background: var(--surface); }
#tape svg { display: block; height: auto; }
.tape-axis { stroke: var(--ink); stroke-width: 1; }
.tape-grid { stroke: var(--line); stroke-width: 1; }
.tape-tick-week { stroke: var(--muted); stroke-width: 1; }
.tape-tick-month { stroke: var(--ink); stroke-width: 1; }
.tape-month { fill: var(--ink); font-size: var(--fs-2); font-weight: 700; }
.tape-day { fill: var(--muted); font-size: var(--fs-1); }
.tape-lane { fill: var(--muted); font-size: var(--fs-2); }
.tape-future { fill: var(--bg); }
.tape-future-label { fill: var(--muted); font-size: var(--fs-1); }
.tape-now { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 4; }
.tape-now-label { fill: var(--bg); font-size: var(--fs-1); font-weight: 700; }
.tape-now-tag { fill: var(--ink); }
.mark-sure { fill: var(--ink); }
.mark-est { fill: var(--muted); }
.mark-unk { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tape-label { fill: var(--text); font-size: var(--fs-2); }
.tape-label-bg { fill: var(--surface); }
.tape-label-bg-future { fill: var(--bg); }
.tl-sw { width: 20px; height: 10px; display: inline-block; border-radius: 2px; }
.tl-sure { background: var(--ink); }
.tl-est { background: var(--muted); }
.tl-unk { border: 1.5px dashed var(--muted); }
.tl-overlap { border: 1.5px dashed var(--muted); background: repeating-linear-gradient(45deg, var(--muted) 0 1px, transparent 1px 5px); }
.tape-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.tape-list li { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); display: flex; gap: 12px; }
.tape-list .when { color: var(--muted); flex: 0 0 15em; }
/* 篩選與表格 */
.controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button[aria-pressed="true"] .ct { color: var(--bg); }
.seg button .ct { color: var(--muted); margin-left: 8px; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); line-height: 1.5; }
th { text-align: left; font-weight: 400; color: var(--muted); font-size: var(--fs-1); padding: 4px 8px; border-bottom: 1px solid var(--muted); white-space: nowrap; vertical-align: bottom; }
td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nm a { font-weight: 700; }
td.nm .id { display: block; font-size: var(--fs-1); color: var(--muted); }
#listings td { min-width: 88px; }
#listings td.wide { min-width: 200px; }
.st { white-space: nowrap; font-weight: 700; color: var(--text); }
.links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.links li { padding: 4px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; font-size: var(--fs-2); }
.links .site { font-size: var(--fs-1); color: var(--muted); }
.questions { margin: 0; font-size: var(--fs-2); }
.questions ul { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-2); }
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .val { text-align: left; }
}
/* 淺色時 cat_blue、cat_yellow、faint、raised 對底色間隙不到 3:1，段四周加 muted 1px 外框（muted 對 bg 5.30、對深色 bg 7.68） */
.seg-1, .seg-2, .seg-4, .seg-5 { box-shadow: inset 0 0 0 1px var(--muted); }
/* v4.1：第一名主角數字（96px），和「加分排名」標題、圖例同一列，不另占一列 */
.rank-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; margin-bottom: 8px; }
.hero { display: flex; align-items: flex-end; gap: 8px; }
.hero-side { display: grid; gap: 2px; padding-bottom: 2px; }
.hero-name { font-size: var(--fs-3); font-weight: 800; color: var(--ink); }
.hero-stn { font-size: var(--fs-2); color: var(--muted); }
/* ================= v4.2：全寬版面、觸控區 44px、行長 ================= */
.wrap { max-width: none; padding: 0 24px; }
main { align-items: start; }
/* 行長：說明段落限制在約 30 到 45 個中文字 */
.note, .summary, .caption, .fine, .questions, .update-banner span, .tape-list { max-width: 42em; }
.note.small { max-width: 42em; }
/* 觸控區：按鈕、輸入、開關、summary、連結至少 44×44 */
.scenarios label { min-height: 44px; }
.scenarios input { width: 22px; height: 22px; }
details.more > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 0; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸"; color: var(--muted); font-size: var(--fs-1); }
details.more[open] > summary::before { content: "▾"; }
td.nm a { display: inline-flex; align-items: center; min-height: 44px; }
.links li a { display: flex; align-items: center; min-height: 44px; }
/* ================= v4.4：第一屏「先看這幾間」，其他區塊降為次要 ================= */
#weights-card, #list, #links-card { grid-area: auto; align-self: auto; }
@media (min-width: 1400px) {
  .links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
  /* 1800 起：總覽與排名並排；權重與比較表並排；時程與待問房東並排；必要條件與 591 連結並排 */
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ov-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-bottom: 12px; }
.ov-head .headline { margin: 0; }
.st-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; font-size: var(--fs-2); color: var(--muted); }
.st-strip b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.st-strip .st-all { color: var(--text); }
.picks { list-style: none; margin: 0; padding: 0; display: grid; }
.pick { background: var(--bg); border-radius: 10px; gap: 8px; min-width: 0; }
.pick-top { flex-wrap: wrap; }
.pick-name { font-weight: 800; color: var(--ink); }
.pick-name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.pick-name a:hover { text-decoration: underline; }
.pick-score { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pick-score small { font-weight: 700; letter-spacing: 0; }
.pick-lead .pick-score { color: var(--accent); }
.pick-kv { margin: 0; display: grid; gap: 8px 12px; }
.pick-block { display: grid; gap: 4px; }
.q-who { font-size: var(--fs-1); color: var(--muted); white-space: nowrap; }
#more details.more + details.more { margin-top: 0; }
.pick-kv { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* v4.4：必要條件矩陣給足寬度，格子不換行 */
.matrix td.cm { white-space: nowrap; }
/* ================= v4.5：一套字級、4px 間距、區塊結構一致，版型依內容不同 ================= */
main { row-gap: var(--sp-6); column-gap: var(--sp-6); }
.card { padding: var(--sp-6); }
#overview { margin-bottom: var(--sp-6); }
/* 第一屏和次要區塊之間拉開到 48px */
.section-title { font-size: var(--fs-3); margin: 0 0 var(--sp-1); }
.headline { font-size: var(--fs-3); }
/* 每個區塊：標題 → 一句結論（一個關鍵數字）→ 內容 */
.sec-key { margin: 0 0 var(--sp-4); font-size: var(--fs-2); color: var(--muted); line-height: 1.4; }
.sec-key b { font-size: var(--fs-3); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: var(--sp-1); vertical-align: -2px; }
/* 版型：sheet＝表格直接放在頁面底色上；plain＝清單，不加框 */
.block { min-width: 0; scroll-margin-top: 12px; }
.block-sheet { padding: var(--sp-2) 0 0; }
.block-plain { padding: var(--sp-2) 0 0; }
.block-sheet .table-scroll, .block-sheet .cmp { background: transparent; }
/* 三張卡：subgrid 讓每一列（名稱、分數、地段、硬體、交通、費用、卡在哪、要問房東）在三張卡上同高對齊 */
.picks { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: auto; row-gap: 0; column-gap: var(--sp-4); }
.pick { display: grid; grid-template-rows: subgrid; padding: var(--sp-4); margin-bottom: var(--sp-4); align-content: stretch; }
.pick-top { align-self: start; }
.dim { border-top: 1px solid var(--line); min-width: 0; }
.pick-h { margin: 0 0 var(--sp-1); font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.chip-dim { font-size: var(--fs-1); font-weight: 700; color: var(--muted); line-height: 1.75; }
.chip-items + .chip-items { grid-column: 2; }
.dim-stuck .none { margin: 0; font-size: var(--fs-2); }
/* v4.5 間距收斂到 4px 基準：清單縮排、checkbox 預設外距、2px 微間距改 4px（只留站號色塊與主題切換內距 2px） */
.questions, .questions ul, ul.legend, .tape-list { padding-left: var(--sp-4); }
.questions { padding-left: var(--sp-6); }
input[type="checkbox"] { margin: 0; }
.update-banner, .rank-row, .scenarios label, .weights label { row-gap: var(--sp-1); column-gap: var(--sp-2); }
.questions li, .links li, .tape-list li { margin-top: 0; margin-bottom: 0; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.cmp-row { padding-bottom: var(--sp-1); }
ul.legend { padding-left: 0; }
/* v4.5 修訂：卡片壓縮（每個維度 2 到 4 行，左邊維度名、右邊內容），紫色只留第一張卡的分數 */
.mark-key { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--fs-1); color: var(--muted); }
.pick { row-gap: var(--sp-2); }
.pick-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); min-height: 44px; }
.pick-id { display: grid; gap: 0; min-width: 0; }
.pick-name { font-size: var(--fs-3); line-height: 1.2; }
.pick-name a { min-height: 44px; }
.pick-top .st { font-size: var(--fs-1); }
.pick-score { margin: 0; font-size: var(--fs-3); line-height: 1; white-space: nowrap; align-self: auto; }
.pick-score small { font-size: var(--fs-2); }
.pick-lead .pick-score { font-size: var(--fs-4); line-height: 0.9; }
.pick-lead .pick-score small { font-size: var(--fs-3); }
.dim { display: grid; column-gap: var(--sp-2); align-items: baseline; padding-top: var(--sp-2); }
.dim .pick-h { margin: 0; line-height: 1.75; }
.dim-lines { display: grid; gap: 0; min-width: 0; }
.ln { margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--ink); }
.ln b { font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dim-stuck .ln { color: var(--text); display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: var(--sp-1); }
.dim-stuck .chip-items + .chip-items { grid-column: 2; }
.dim { grid-template-columns: 3.6em minmax(0, 1fr); }
/* 間距基準 4px：殘留的 2px 改成 4px */
.val .stn { margin-left: var(--sp-1); }
.rank-row { row-gap: var(--sp-1); }
.weights label { gap: var(--sp-1); }
.questions > li { padding: var(--sp-1) 0; }
.questions ul { margin-top: var(--sp-1); }
/* v4.5 第二輪：拿掉明暗切換與頁內導覽，統一按鈕、對齊與圖示 */
/* 按鈕只有一種：1px 外框、圓角 10、高 44、字 14；選中的篩選鈕填 ink 表示狀態 */
.btn, .btn-primary, .seg button { font: inherit; font-size: var(--fs-2); font-weight: 400; color: var(--text); background: transparent; border: 1px solid var(--muted); border-radius: 10px; padding: 0 var(--sp-4); min-height: 44px; min-width: 44px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; }
.btn[hidden] { display: none; }
#cmp-more { margin: var(--sp-2) 0; }
.cmp-row[hidden] { display: none; }
/* 卡片：左項目、右值；值靠右，和分數同一條右緣 */
.ln.kv2 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.ln.kv2 .v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ln.kv2 .k { min-width: 0; }
/* 圖例圖示統一 12px 高 */
.key-limit, .key-cap { height: 12px; }
/* 分項得分表 */
.breakdown td.sum { font-weight: 700; color: var(--ink); }
.rank-bars:empty { display: none; }
.masthead { padding-bottom: 0; }
.weights input { min-height: 44px; }
/* v4.5 第二輪：分項得分表改成直接顯示，分數區給足寬度，物件名不斷行 */
.breakdown td:first-child { white-space: nowrap; }
.breakdown th, .breakdown td { padding-left: var(--sp-1); padding-right: var(--sp-1); }
.breakdown th:first-child, .breakdown td:first-child { padding-left: 0; }
/* v4.6 明暗切換：頁首右側小圖示按鈕，44×44 可點區，沒有底色與外框 */
.masthead-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 var(--sp-4); }
.masthead-row .source-row { flex: none; }
.theme-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; margin-right: calc(-1 * var(--sp-3)); background: transparent; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer; }
.theme-btn:hover { color: var(--ink); }
.theme-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0B0B0C; --surface: #18181B; --raised: #222226; --text: #EDEDEF; --ink: #FAFAFA; --muted: #A1A1AA; --faint: #8B8B93; --line: #2A2A2E; --accent: #A78BFA; --on-accent: #0B0B0C; --neg: #E9A449; --cat-yellow: #FBBF24; --cat-blue: #38BDF8; --seg4-text: #0B0B0C; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4); }
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: #FFFFFF; --surface: #FFFFFF; --raised: #FFFFFF; --text: #18181B; --ink: #0A0A0A; --muted: #6B6B70; --faint: #A1A1A6; --line: #EDEDED; --accent: #7C3AED; --on-accent: #FFFFFF; --neg: #8F5200; --cat-yellow: #F59E0B; --cat-blue: #0EA5E9; --seg4-text: #0A0A0A; --shadow: none; }
  .controls, .weights, .scenarios, .actions, .btn { display: none; }
  .theme-btn { display: none; }
}
/* ===== v4.6 全頁重排：每個區塊都全寬，一欄往下讀；並排只留在區塊內部、兩邊內容量相當的地方 ===== */
main { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
#overview, #compare, #rank, #timeline, #check, #questions, #more { grid-area: auto; align-self: auto; }
@media (min-width: 1100px) {
  main { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
}
/* 卡片：拿掉要問房東後 6 列 */
.pick { grid-row: span 6; }
/* 通勤與費用：純數字表。第一欄 15.5em，其餘 4 欄等寬、數字靠右；列高與必要條件矩陣一致 */
.cmp { display: grid; }
.cmp-row { gap: 0 var(--sp-4); align-items: baseline; padding: var(--sp-2) 0; min-height: 40px; }
.cmp-head { display: grid; align-items: end; border-bottom: 1px solid var(--muted); padding: var(--sp-1) 0; }
.cmp-head .cmp-v { font-size: var(--fs-1); color: var(--muted); }
.cmp-head .cmp-v small { font-size: var(--fs-1); }
.cmp-v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.cmp-v.is-over b { color: var(--neg); font-weight: 700; }
.cmp-v.is-over small { font-size: var(--fs-1); color: var(--neg); }
.cmp-nm .st { margin-right: var(--sp-1); }
/* 分數：表頭寫滿分；手機改成每間一塊，不橫捲 */
.breakdown th small { display: block; font-size: var(--fs-1); color: var(--muted); }
/* 必要條件：全寬矩陣，第一欄 15.5em 與比較表對齊，列高 40 */
.matrix { table-layout: fixed; }
.matrix td, .matrix th { padding: var(--sp-2); }
.matrix td.cm { padding: var(--sp-2); }
/* 待問房東：題目是主角；每間與各間專屬上下兩組（內容量不同，不並排） */
.q-cols { display: grid; gap: var(--sp-6); }
.q-h { margin: 0 0 var(--sp-1); font-size: var(--fs-2); font-weight: 700; color: var(--ink); }
.q-check { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--muted); }
.q-check li { margin: 0; padding: 0; }
.q-item { display: grid; align-items: center; gap: 0 var(--sp-3); min-height: 44px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.q-item input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.q-t { font-size: var(--fs-2); font-weight: 700; color: var(--ink); }
.q-item .q-who { font-size: var(--fs-1); color: var(--muted); white-space: normal; }
.q-item:has(input:checked) .q-t { font-weight: 400; color: var(--muted); }
/* 頁尾：完整資料與來源，一個全寬區塊；物件總表全寬，其餘三個收合項三欄等寬 */
.site-foot { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.site-foot > details.more, .foot-grid > details.more { margin: 0; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-6); align-items: start; }
.foot-grid .links { grid-template-columns: minmax(0, 1fr); }
.site-foot .source-row { margin: var(--sp-2) 0 0; font-size: var(--fs-1); color: var(--muted); }
.site-foot .source-row a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-right: 0; }
.foot-brand { margin: 0; font-size: var(--fs-1); color: var(--muted); }
.foot-brand span[lang="en"] { font-weight: 700; color: var(--ink); }
/* 時程：svg 用實際像素寬（不縮放）；手機改成日期清單 */
#tape svg { width: auto; min-width: 0; max-width: none; }
.tape-m { display: none; }
/* 待問房東：適用物件緊接在題目後面 */
.q-item .q-who { text-align: left; }
/* 必要條件手機版：每間一列 */
.mx-m { display: none; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--muted); }
.mx-m > li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); margin: 0; }
.mxm-h { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0; }
.mxm-nm { font-weight: 700; color: var(--ink); }
.mxm-n { font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; }
.mxm-miss { list-style: none; margin: 0; padding: 0; }
.mxm-miss li, .mxm-all { margin: 0; padding: 0; font-size: var(--fs-1); color: var(--text); }
.tape-m .when { flex: none; }
/* v4.6 收尾：第一欄 18em（比較表與矩陣同寬）；待問房東適用物件對齊成一欄 */
.cmp-row { grid-template-columns: 18em repeat(4, minmax(0, 1fr)); }
.matrix thead th:first-child, .matrix td.mx-c, .matrix tfoot th { width: 18em; }
.q-item { grid-template-columns: 20px minmax(0, 32em) minmax(0, 1fr); }
@media (max-width: 720px) {
  .card { border-radius: 16px; }
  .headline { line-height: 1.3; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rank-row .rank-track { grid-column: 1 / -1; grid-row: 2; }
  .seg-out { grid-column: 1 / -1; }
  .weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-lab { display: block; }
  .val { text-align: right; }
  .tape-list { grid-template-columns: 1fr; }
  .tape-list li { flex-direction: column; gap: 0; }
  .links { grid-template-columns: 1fr; }
  .props { grid-template-columns: 1fr; }
  .val { white-space: normal; }
  .val .over { display: block; }
  .rank-head { grid-template-columns: minmax(0, 1fr); }
  .hero { flex-wrap: wrap; row-gap: 4px; }
  /* 手機比較表：表頭刻度列留在畫面上方（sticky），每條軌道畫同位置的刻度短線 */
  .wrap { padding: 0 12px; }
  .cmp-head { top: 0; z-index: 2; background: var(--surface); }
  /* v4.2 手機比較表：標籤一行、下面軌道＋數值，刻度列與軌道同一欄寬 */
  .cmp-lab, .cmp-head .cmp-h { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--muted); }
  .pick-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick { grid-template-rows: none; }
  .card { padding: var(--sp-4); }
  .cmp-row { row-gap: var(--sp-1); column-gap: var(--sp-1); }
  /* 狀態列手機改 3 欄 2 列，每項不換行 */
  .st-strip { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--sp-1) var(--sp-4); }
  .st-strip li { white-space: nowrap; }
  /* v4.5 第二輪 手機比較表：沒有刻度後表頭不需要；每格「標籤＋軌道＋數值」一行 */
  .cmp-lab { grid-column: auto; line-height: 1.5; }
  .masthead-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "w b" "s s"; }
  .masthead-row .wordmark { grid-area: w; }
  .masthead-row .theme-btn { grid-area: b; }
  .masthead-row .source-row { grid-area: s; }
  .pick { grid-row: auto; }
  .cmp-head { display: grid; position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--sp-2); }
  .cmp-head .cmp-nm { display: none; }
  .cmp-head .cmp-v { white-space: normal; line-height: 1.4; }
  .cmp-row { gap: 0 var(--sp-2); padding: var(--sp-2) 0; }
  .cmp-row .cmp-nm { grid-column: 1 / -1; }
  .breakdown, .breakdown tbody, .breakdown tr { display: block; }
  .breakdown thead { display: none; }
  .breakdown tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .breakdown td { display: flex; justify-content: space-between; gap: var(--sp-2); border: 0; padding: var(--sp-1) 0; }
  .breakdown td.bd-nm { grid-column: 1 / -1; font-weight: 700; color: var(--ink); }
  .breakdown td[data-label]::before { content: attr(data-label); font-size: var(--fs-1); color: var(--muted); text-align: left; }
  #rank .table-scroll { overflow: visible; }
  .matrix, .matrix tbody, .matrix tfoot { display: block; table-layout: auto; }
  .matrix thead { display: none; }
  .matrix tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .matrix td, .matrix th { display: block; border: 0; padding: 0; text-align: left; width: auto; min-width: 0; }
  .matrix td.mx-c, .matrix tfoot th { grid-column: 1 / -1; font-weight: 700; color: var(--ink); }
  .matrix td.cm { text-align: left; white-space: normal; padding: 0; }
  .matrix td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-1); color: var(--muted); line-height: 1.4; }
  .matrix tbody th, .matrix tbody td:first-child { min-width: 0; }
  #check .table-scroll { overflow: visible; }
  .q-item .q-who { grid-column: 2; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  #timeline .tape-scroll, #tape-legend { display: none; }
  .tape-m { display: grid; grid-template-columns: minmax(0, 1fr); padding-left: 0; margin: 0; }
  .tape-m li { flex-direction: column; gap: 0; }
  #check .mx-wide { display: none; }
  .mx-m { display: block; }
  .cmp-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .q-item { grid-template-columns: 20px minmax(0, 1fr); }
}
@media (min-width: 721px) {
  .breakdown { table-layout: fixed; width: 100%; }
  .breakdown thead th:first-child, .breakdown td.bd-nm { width: 18em; }
}

/* ===== v4.7：寬螢幕通勤與分數並排（同一組列、同列高），表格有最大閱讀寬度 ===== */
.duo { display: grid; gap: var(--sp-6); min-width: 0; }
.duo > section { min-width: 0; }
.m-only { display: none; }
#score-table { display: none; }
.cmp-row { max-width: 64em; }
.cmp-v.sc-sum { font-weight: 700; }
.sc-none { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-1); text-align: right; }
.sc-cap { margin: 0; font-size: var(--fs-1); color: var(--muted); }
@media (min-width: 1240px) {
  .duo { grid-template-columns: minmax(0, 40fr) minmax(0, 37fr); grid-template-rows: auto auto auto; align-items: start; }
  .duo > section { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .duo > #rank { padding-top: var(--sp-2); padding-bottom: 0; background: transparent; box-shadow: none; border-radius: 0; padding-left: 0; padding-right: 0; }
  .duo-h { align-self: end; padding-bottom: var(--sp-2); }
  .duo-f { align-self: start; }
  #rank .table-scroll { display: none; }
  #score-table { display: grid; }
  #compare-table .cmp-row, #score-table .cmp-row { height: 36px; min-height: 0; padding: 0; align-items: center; white-space: nowrap; }
  #compare-table .cmp-head, #score-table .cmp-head { height: 56px; align-items: end; padding-bottom: var(--sp-1); white-space: normal; }
  #compare-table .cmp-row { grid-template-columns: minmax(12em, 16em) 5.5em 5.5em minmax(7em, 8.5em) minmax(6.5em, 7.5em); max-width: none; }
  #score-table .cmp-row { grid-template-columns: repeat(6, minmax(4.5em, 6em)) minmax(4.5em, 5em); gap: 0 var(--sp-3); max-width: none; }
  #compare-table .cmp-nm { overflow: hidden; text-overflow: ellipsis; }
  #score-table .cmp-head .cmp-v small { display: block; }
}
/* 必要條件與待問房東：寬螢幕並排（兩邊內容量相當） */
@media (min-width: 1440px) {
  main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
  #overview, .duo, #timeline, #more { grid-column: 1 / -1; }
  #check { grid-column: 1; } #questions { grid-column: 2; }
  .q-item { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 12em); }
  .matrix thead th:first-child, .matrix td.mx-c, .matrix tfoot th { width: 14em; }
}
/* 表格最大閱讀寬度：全寬區塊裡的表不無限拉長 */
.matrix { max-width: 72em; }
.breakdown { max-width: 64em; }
@media (min-width: 1240px) {
  .duo > #compare { grid-area: 1 / 1 / span 3 / 2; }
  .duo > #rank { grid-area: 1 / 2 / span 3 / 3; }
}
.cmp-head .cmp-v { white-space: normal; }
.legend li.m-only { display: none; }
@media (max-width: 720px) {
  .legend li.m-only { display: list-item; }
  .cmp-head .hn { display: none; }
}

/* v4.7 手機卡片：第一層每個維度一個關鍵值與卡在哪，其餘放進「更多細節」 */
.pick-more { display: none; }
@media (max-width: 720px) {
  .pick .ln-x { display: none; }
  .pick-more { display: block; }
  .pick-more .pm-g { margin: 0; padding: var(--sp-1) 0; }
  .pick-more .pm-h { margin: 0; font-size: var(--fs-1); color: var(--muted); }
}