/* ============ 色票（深色＝夜藍科技、淺色＝和紙＋藍染的日式科技感）============
   所有顏色都從這裡來：元件只用 var(--x) 或 rgba(var(--x-rgb), α)，換主題只換這一段。 */
:root {
  --bg: #070b14;
  --grid-rgb: 110, 190, 255; --grid-a: .045;
  --surface-rgb: 16, 26, 46; --surface2-rgb: 20, 34, 60; --deep-rgb: 5, 10, 20;
  --surface-solid: #101a2e;
  --panel: rgba(var(--surface-rgb), .78);
  --panel-solid: var(--surface-solid);
  --line-rgb: 110, 190, 255;
  --line: rgba(var(--line-rgb), .16);
  --line2: rgba(var(--line-rgb), .32);
  --ink: #e6f1ff; --ink-rgb: 230, 241, 255;
  --ink2: #9aaecb;
  --ink3: #6a7d9b;
  --ink-strong: #ffffff;
  --muted-rgb: 142, 163, 192;
  --accent: #3ee0ff; --accent-rgb: 62, 224, 255;
  --accent2: #8b7bff; --accent2-rgb: 139, 123, 255;
  --good: #3ddc97; --good-rgb: 61, 220, 151;
  --bad: #ff5c7a; --bad-rgb: 255, 92, 122;
  --warn: #ffb547; --warn-rgb: 255, 181, 71;
  --door: #e05bff; --door-rgb: 224, 91, 255;   /* 大門（使用者 10-30：「標出一個顏色告知大家那是大門」）：跟吉綠、凶紅、警示橘、主色都分得開 */
  --ref: #c3a8ff;
  --on-color: #04121a;
  --shadow-rgb: 0, 0, 0;
  --accent-glow: 0 0 18px rgba(var(--accent-rgb), .45);
  --grad-primary: linear-gradient(135deg, #1fb6ff, #6b5bff);
  --grad-on: linear-gradient(135deg, rgba(31, 182, 255, .35), rgba(107, 91, 255, .35));
  --center-deep: var(--center-deep);
  --hl: rgba(255, 213, 79, .22);            /* 螢光筆標重點 */
  --good-soft: rgba(var(--good-rgb), .14);
  --bad-soft: rgba(var(--bad-rgb), .14);
  --warn-soft: rgba(var(--warn-rgb), .14);
  --info-soft: rgba(var(--muted-rgb), .12);
  --ref-soft: rgba(var(--accent2-rgb), .14);
  --radius: 16px;
  --tabbar: 66px;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --serif: "Hiragino Mincho ProN", "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Heiti TC", sans-serif;
  color-scheme: dark;
}
/* 淺色：生成（きなり）紙底＋墨色字＋藍染主色；吉＝緑青、凶＝朱、注意＝山吹。科技感來自方眼細格、等寬數字、細線框。
   .pal-light：報告「存成一張圖」在深色模式下也照這一套算平面圖和標籤的顏色（js/sumimg.js），所以引用別的色票的也要在這裡再寫一次 */
:root[data-theme="light"], .pal-light {
  --bg: #f2efe6;
  --grid-rgb: 31, 75, 110; --grid-a: .055;
  --surface-rgb: 252, 251, 247; --surface2-rgb: 245, 242, 234; --deep-rgb: 233, 229, 219;
  --surface-solid: #fcfbf7;
  --panel: rgba(var(--surface-rgb), .94);
  --panel-solid: var(--surface-solid);
  --line-rgb: 38, 58, 84;
  --line: rgba(var(--line-rgb), .14);
  --line2: rgba(var(--line-rgb), .26);
  --ink: #24282e; --ink-rgb: 36, 40, 46;
  --ink2: #565c64;
  --ink3: #868b92;
  --ink-strong: #121519;
  --muted-rgb: 110, 116, 124;
  --accent: #1f5f8b; --accent-rgb: 31, 95, 139;
  --accent2: #6d5a9c; --accent2-rgb: 109, 90, 156;
  --good: #2c7a57; --good-rgb: 44, 122, 87;
  --bad: #c8433a; --bad-rgb: 200, 67, 58;
  --warn: #a8701a; --warn-rgb: 196, 138, 38;
  --door: #9b2fc2; --door-rgb: 155, 47, 194;
  --ref: #6d5a9c;
  --on-color: #ffffff;
  --shadow-rgb: 60, 48, 28;
  --accent-glow: 0 0 0 transparent;
  --grad-primary: linear-gradient(135deg, #1f5f8b, #2b4c86);
  --grad-on: linear-gradient(135deg, rgba(31, 95, 139, .14), rgba(43, 76, 134, .14));
  --center-deep: rgba(31, 95, 139, .06);
  --hl: rgba(240, 196, 64, .32);
  --good-soft: rgba(var(--good-rgb), .09);
  --bad-soft: rgba(var(--bad-rgb), .08);
  --warn-soft: rgba(var(--warn-rgb), .12);
  --info-soft: rgba(var(--muted-rgb), .09);
  --ref-soft: rgba(var(--accent2-rgb), .08);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* .row、.seg 這類有 display 的元件，加 hidden 也要真的藏起來 */
html, body { margin: 0; color: var(--ink); background: var(--bg); }
/* 手機左右不晃（使用者 10-30：「左右邊界固定住，只要上下可以滑動」）：超出螢幕寬的直接剪掉、不能左右拖、也不回彈；
   用 clip 不用 hidden：hidden 會讓 body 變成捲動容器，上方工具列、案例分頁那些 sticky 就黏不住 */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
body {
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(var(--accent2-rgb), .12), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(var(--accent-rgb), .1), transparent 60%),
    linear-gradient(rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; color: inherit; }
b { color: var(--ink-strong); }

.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgb(var(--deep-rgb));
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; border: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; padding: 4px 2px; cursor: pointer; border-radius: 10px; }
.brand:active { opacity: .7; }
.brand small { font-weight: 500; color: var(--accent); letter-spacing: .1em; font-size: calc(12px * var(--fz)); border: 1px solid var(--line2); border-radius: 999px; padding: 1px 8px; }
.logo { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: var(--accent-glow); position: relative; }
.logo::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 14px; background: linear-gradient(var(--bad), var(--ink)); transform: translateX(-50%) rotate(25deg); transform-origin: 50% 70%; }
.project { display: flex; gap: 6px; min-width: 0; margin-left: auto; }   /* 靠右；左邊「上一頁」「陽宅羅盤」固定靠左，不因名字長短移位 */
.icon-btn { border: 1px solid var(--line2); background: var(--panel-solid); border-radius: 12px; width: 40px; flex: 0 0 40px; }   /* 清除、⋯ 不被名字擠窄 */

main { max-width: 760px; margin: 0 auto; padding: 12px 16px 24px; }
.tab { display: none; animation: fade .25s ease; }
.tab.active { display: block; }
@keyframes fade { from { transform: translateY(6px); } to { transform: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(7, 1fr);
  height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgb(var(--deep-rgb)); border-top: 1px solid var(--line);
}
.tabbar button { border: 0; background: none; color: var(--ink3); font-size: calc(12px * var(--fz)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; letter-spacing: .04em; white-space: nowrap; padding: 0; min-width: 0; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.tabbar button.active { color: var(--accent); text-shadow: var(--accent-glow); }
.tabbar button.active svg { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .7)); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .25); }
.panel-title { font-weight: 700; margin-bottom: 8px; overflow-wrap: anywhere; }   /* 房子名字是很長、沒有空格的英文（報告開頭、學分頁你家）也要折行，不被切掉 */
.panel-title::before { content: ""; display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--accent); box-shadow: var(--accent-glow); margin-right: 8px; vertical-align: -1px; }
.hint { color: var(--ink2); font-weight: 400; }
.note { background: var(--warn-soft); border: 1px solid rgba(var(--warn-rgb), .3); border-radius: 12px; padding: 10px 12px; font-size: calc(14px * var(--fz)); line-height: 1.6; margin: 10px 0; }
.note .an-p { margin: 6px 0 0; }   /* 配置說明一句一段，中間留一點空 */
.summary { font-size: calc(14px * var(--fz)); margin-top: 8px; line-height: 1.75; }
.howto summary, .sub-details summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.howto ol { margin: 8px 0 0; padding-left: 20px; font-size: calc(14px * var(--fz)); line-height: 1.7; color: var(--ink2); }
.sub-details { margin-top: 10px; }

.row { display: flex; align-items: flex-end; }
.gap { gap: 8px; }
/* 量方向頁下面那一排（再固定一次、確認下一步）：兩顆排不下就整顆換到下一行、撐滿寬度（字不在詞中間折開），窄螢幕、特大字時「確認，下一步」不會超出畫面（使用者 11-04 回報） */
.measure-bar { flex-wrap: wrap; }
.measure-bar .btn { flex: 1 1 auto; max-width: 100%; }
.wrap { flex-wrap: wrap; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.grow { flex: 1 1 140px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fz)); color: var(--ink2); margin: 6px 0; flex: 1 1 120px; letter-spacing: .04em; }
.field input, .field select { font-size: calc(16px * var(--fz)); padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .6); color: var(--ink); width: 100%; font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }

.btn { border: 1px solid var(--line2); background: rgba(var(--surface2-rgb), .7); border-radius: 12px; padding: 10px 14px; font-size: calc(15px * var(--fz)); cursor: pointer; white-space: nowrap; transition: transform .1s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad-primary); border-color: transparent; color: var(--ink-strong); font-weight: 700; box-shadow: 0 6px 22px rgba(var(--accent-rgb), .3); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); border-color: rgba(var(--bad-rgb), .5); }
.hs-bad .hs-acts { padding: 0 12px 12px; }   /* 讀不出來的那一間：刪掉的按鈕（使用者 11-06） */
.btn:disabled { opacity: .4; }
.btn.wide { width: 100%; padding: 14px; margin-top: 12px; }
.hud .row .btn { flex: 1 1 0; padding: 14px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; margin: 6px 0; background: rgba(var(--deep-rgb), .5); }
.seg button { border: 0; padding: 12px 6px; background: transparent; font-size: calc(15px * var(--fz)); color: var(--ink2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--grad-on); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--accent); }
/* 選取中的按鈕不換字重：粗體比較寬，剛好卡在換行邊緣的字會多擠一行、整排框框跟著變高；改用不佔寬度的文字陰影加粗（描邊在變體字型的筆畫交疊處會出雜線） */
.seg button.on, .cmp-chip.on, .hrk-atr .btn.on, .qr-keys button.on { text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }
.seg button:disabled { opacity: .3; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: calc(14px * var(--fz)); line-height: 1.5; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.check:last-child { border-bottom: 0; }
.check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); }
.check small { display: block; color: var(--ink2); }

/* 羅盤 */
.hud { position: relative; }
.dial-wrap { position: relative; width: min(88vw, 380px); margin: 22px auto 0; aspect-ratio: 1; }
#dial { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .18)); }
/* 「向」的記號：菱形，長的尖端朝外（往上），短的那半壓在羅盤外圈上 */
.dial-pointer { pointer-events: none; position: absolute; left: 50%; top: -16px; width: 18px; height: 34px; transform: translateX(-50%); background: var(--bad); clip-path: polygon(50% 0, 100% 64%, 50% 100%, 0 64%); filter: drop-shadow(0 0 6px rgba(var(--bad-rgb), .9)); }
.dial-pointer.sit { top: auto; bottom: -16px; background: var(--good); clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%); filter: drop-shadow(0 0 6px rgba(var(--good-rgb), .9)); }
.d-axis { stroke: var(--bad); stroke-width: 1.1; opacity: .85; pointer-events: none; }
.cap-sit { display: inline-block; width: 9px; height: 15px; margin-right: 6px; vertical-align: -2px; background: var(--good); clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%); }
.cap-dia { display: inline-block; width: 9px; height: 15px; margin-right: 6px; vertical-align: -2px; background: var(--bad); clip-path: polygon(50% 0, 100% 64%, 50% 100%, 0 64%); }
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dial-center .big { font-family: var(--mono); font-size: calc(40px * var(--fz)); font-weight: 700; color: var(--ink-strong); text-shadow: var(--accent-glow); font-variant-numeric: tabular-nums; }
.dial-center .big small { font-size: calc(20px * var(--fz)); color: var(--accent); }
.dial-center .sub { font-size: calc(13px * var(--fz)); color: var(--ink2); margin-top: 2px; text-align: center; max-width: 60%; line-height: 1.35; word-break: keep-all; }
.d-ring { fill: rgba(var(--surface-rgb), .85); stroke: var(--line2); }
.d-ring2 { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-opacity: .55; }
.d-sep { stroke: var(--line2); stroke-width: 1; }
.d-sep-strong { stroke: rgba(var(--accent-rgb), .5); stroke-width: 1.2; }
.d-mt { font-size: calc(14px * var(--fz)); fill: var(--ink); text-anchor: middle; --vc: 1; font-weight: 600; }
.d-gua { font-size: calc(17px * var(--fz)); fill: var(--accent); text-anchor: middle; --vc: 1; font-weight: 800; }
.d-dir { font-size: calc(9px * var(--fz)); fill: var(--ink2); text-anchor: middle; --vc: 1; }
.d-tick { stroke: var(--ink3); stroke-width: 1; }
.d-tick.big { stroke: var(--accent); stroke-width: 1.4; }
.d-deg { font-size: calc(9px * var(--fz)); fill: var(--ink2); text-anchor: middle; --vc: 1; font-family: var(--mono); }
.d-n { fill: var(--bad); font-weight: 700; }
.d-center { fill: rgba(var(--deep-rgb), .9); stroke: var(--accent); stroke-opacity: .5; }
.d-lockarc { fill: none; stroke: var(--warn); stroke-width: 6; stroke-linecap: round; opacity: .55; }
.d-lockdot { fill: var(--warn); stroke: rgba(var(--deep-rgb), .9); stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(var(--warn-rgb), .9)); }
/* 量完方向：固定了什麼、量了幾次、下一步（使用者 10-30：要分得出這是確定了，還是只是其中一次） */
.measure-done { margin: 12px 0 4px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(var(--good-rgb), .55); background: rgba(var(--good-rgb), .10); }
.measure-done .md-h { font-size: calc(17px * var(--fz)); font-weight: 800; color: var(--ink-strong); line-height: 1.5; }
.measure-done .md-h b { color: var(--good); }
.measure-done .hint { margin: 6px 0 10px; }
.measure-done .md-w { margin: 0 0 10px; color: var(--warn); font-size: calc(14.5px * var(--fz)); }
#dial.scrolly { touch-action: pan-y; }
.g-done { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(var(--good-rgb), .55); background: rgba(var(--good-rgb), .10); font-size: calc(15px * var(--fz)); line-height: 1.6; }
.g-done b { color: var(--good); }
.lock-cap { text-align: center; font-size: calc(13px * var(--fz)); color: var(--ink2); margin-top: 4px; }
.lock-cap i { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--warn); margin-right: 6px; vertical-align: 0; }
.lock-cap b { color: var(--warn); }
.warn-line { min-height: 22px; color: var(--warn); font-size: calc(14px * var(--fz)); text-align: center; margin: 4px 0; }
.samples { margin: 4px 0 8px; padding-left: 22px; font-size: calc(14px * var(--fz)); line-height: 1.9; font-family: var(--mono); }
.samples li { font-family: -apple-system, "PingFang TC", sans-serif; }
.samples button { border: 0; background: none; color: var(--bad); padding: 0 8px; }


.result .big-line { font-size: calc(22px * var(--fz)); font-weight: 800; margin: 4px 0 8px; letter-spacing: .03em; }
.result .big-line em { font-style: normal; color: var(--accent); text-shadow: var(--accent-glow); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: calc(14px * var(--fz)); margin: 0; }
.kv dt { color: var(--ink2); }
.kv dd { margin: 0; }
.verdict { border-radius: 12px; padding: 10px 12px; margin-top: 10px; border: 1px solid var(--line); }
.v-good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .35); }
.v-bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .35); }
.v-warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .35); }
.v-info { background: var(--info-soft); }
.cand { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fz)); }
.issues { margin: 6px 0 0; padding-left: 20px; font-size: calc(14px * var(--fz)); line-height: 1.6; }
table.grid th { color: var(--ink2); font-weight: 500; }
.s-good { color: var(--good); font-weight: 700; }
.s-bad { color: var(--bad); font-weight: 700; }
.s-warn { color: var(--warn); font-weight: 700; }
/* 重點上色：好的綠、壞的紅、要留意的黃（js/humanize.js tone） */
.t-g { color: var(--good); font-weight: 700; }
.t-b { color: var(--bad); font-weight: 700; }
.t-w { color: var(--warn); font-weight: 700; }
.rp-overall span b, .cs-vd span b { display: inline; font-size: inherit; font-weight: 700; }
.rp-overall span b.st.g, .cs-vd span b.st.g { color: var(--good); } .rp-overall span b.st.b, .cs-vd span b.st.b { color: var(--bad); }
.rp-overall span b.t-g, .cs-vd span b.t-g { color: var(--good); } .rp-overall span b.t-b, .cs-vd span b.t-b { color: var(--bad); } .rp-overall span b.t-w, .cs-vd span b.t-w { color: var(--warn); }

/* 平面 */
.floor-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.floor-tabs button { flex: 0 0 auto; border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .7); color: var(--ink2); border-radius: 999px; padding: 7px 14px; font-size: calc(14px * var(--fz)); font-family: var(--mono); }
.floor-tabs button.on { color: var(--ink-strong); border-color: var(--accent); box-shadow: var(--accent-glow); background: rgba(var(--accent-rgb), .12); }
.floor-tabs button small { font-family: -apple-system, sans-serif; margin-left: 4px; }
/* 平面圖上方即時總評＋放大縮小：高度固定；捲動時停在上面那一排下方；顏色跟報告的總評框同一套 */
.plan-live { --pl-tint: transparent; position: sticky; top: calc(63px + env(safe-area-inset-top)); z-index: 9; display: flex; align-items: center; gap: 4px; height: calc(42px * var(--fz) + 4px); margin: 0 0 8px; padding-right: 3px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(var(--pl-tint), var(--pl-tint)), var(--panel-solid); box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .16); }
.plan-live.good { --pl-tint: var(--good-soft); border-color: rgba(var(--good-rgb), .5); }
.plan-live.warn { --pl-tint: var(--warn-soft); border-color: rgba(var(--warn-rgb), .5); }
.plan-live.bad { --pl-tint: var(--bad-soft); border-color: rgba(var(--bad-rgb), .5); }
.plan-live.dim { --pl-tint: transparent; border-style: dashed; }
.pl-sum { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 1px 0 8px; border: 0; background: none; text-align: left; cursor: pointer; }
/* 放不下時「1F 總評：」整段換到看不見的第二行，等級留著（字大、窄手機；row-reverse 才能先排等級、畫面上又在右邊） */
.pl-grade { display: flex; flex-flow: row-reverse wrap; justify-content: flex-end; height: 1.25em; overflow: hidden; font-size: calc(14px * var(--fz)); font-weight: 800; line-height: 1.25; white-space: nowrap; }
.pl-gv { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pl-gv::after { content: " ›"; color: var(--ink3); font-weight: 400; }
.plan-live.good .pl-grade { color: var(--good); } .plan-live.warn .pl-grade { color: var(--warn); } .plan-live.bad .pl-grade { color: var(--bad); }
.pl-sub { display: flex; min-width: 0; font-size: calc(12px * var(--fz) * var(--pl-n, 1)); line-height: calc(15px * var(--fz)); color: var(--ink2); white-space: nowrap; }   /* --pl-n：放不下時 planLiveFit 收字級，行高不變，高度才固定 */
.pl-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-state { flex: none; }
.pl-note:not(:empty) + .pl-state:not(:empty)::before { content: "・"; color: var(--ink3); font-weight: 400; }
.pl-z { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: calc(19px * var(--fz)); font-weight: 700; line-height: 1; touch-action: manipulation; }
.pl-z0 { font-size: calc(11px * var(--fz)); font-weight: 600; line-height: 1.15; white-space: normal; }
.plan-wrap.zoomed { touch-action: none; cursor: grab; }
.plan-wrap.zoomed .door-compass .dc-t, .plan-wrap.zoomed .door-compass .dc-live { display: none; }   /* 放大時圖鋪滿整個框，羅盤只留指針，少蓋一點 */
.plan-wrap.zoomed .dim-chip { visibility: hidden; }   /* 長寬那一條：位置留著框才不會變矮 */
.plan-wrap.zoomed .p-house { filter: none; }   /* 放大移動畫面時每一格都要重畫，光暈算起來很重 */
@media (max-width: 899px) { .plan-main { display: contents; } }   /* 手機上捲到下面的「加入物件」，即時那一條也還在 */
.plan-wrap { position: relative; background: rgba(var(--deep-rgb), .75); border: 1px solid var(--line2); border-radius: var(--radius); touch-action: pan-y; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb), .06), 0 10px 30px rgba(var(--shadow-rgb), .3); }
#plan { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.dim-chip { position: static; display: inline-block; margin: 0 0 10px 10px; font-family: var(--mono); font-size: calc(12px * var(--fz)); color: var(--accent); background: rgba(var(--deep-rgb), .8); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; pointer-events: none; }
.p-grid { stroke: rgba(var(--line-rgb), .07); vector-effect: non-scaling-stroke; }
.p-house { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .8)); }
.p-sector { stroke: rgba(var(--line-rgb), .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-good { fill: rgba(var(--good-rgb), .10); }
.p-bad { fill: rgba(var(--bad-rgb), .10); }
.p-qx { fill: url(#qxHatch); }
.p-center { fill: rgba(var(--accent2-rgb), .08); stroke: var(--accent2); stroke-dasharray: 4 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-axis { stroke: var(--ink3); stroke-dasharray: 6 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-labels text { pointer-events: none; paint-order: stroke; stroke: rgba(var(--deep-rgb), .9); stroke-linejoin: round; }
.p-door { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .9)); }
.p-door-t { fill: var(--on-color); text-anchor: middle; --vc: 1; font-weight: 800; }
.p-item { stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: grab; }
.p-item.room { fill: rgba(var(--accent-rgb), .13); stroke: rgba(var(--accent-rgb), .8); }
.p-item.plain { fill: rgba(var(--muted-rgb), .10); stroke: rgba(var(--muted-rgb), .55); stroke-dasharray: 4 3; }
.p-item.wf { fill: rgba(var(--bad-rgb), .16); stroke: rgba(var(--bad-rgb), .9); }
.p-item.object { fill: rgba(var(--accent2-rgb), .2); stroke: rgba(var(--accent2-rgb), .9); }
.p-item.marker { fill: var(--warn); stroke: var(--on-color); }
.p-item.auto { opacity: .45; }   /* 實際平面圖上沒標、照常理補的設備和門：不算吉凶 */
.p-item.entry { fill: var(--accent2); stroke: var(--ink-strong); }
.p-item.open { stroke-dasharray: 6 4; fill-opacity: .55; }   /* 開放式廚房：沒有牆 */
.p-item.sel { stroke-width: 3; stroke-dasharray: 5 3; stroke: var(--ink-strong); }
.p-hit { fill: transparent; cursor: grab; }
.p-item-t { text-anchor: middle; --vc: 1; fill: var(--ink-strong); font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(var(--deep-rgb), .85); stroke-linejoin: round; }
.p-dir { fill: var(--ink-strong); pointer-events: none; }
.p-handle { fill: var(--accent); stroke: var(--on-color); vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.p-hh-hit { fill: transparent; }
.plan-tools { margin-top: 10px; }
.plan-more { margin-top: 10px; }
.plan-more > summary { cursor: pointer; color: var(--accent); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.plan-more > .plan-tools { margin-top: 4px; }
.palette { flex-wrap: wrap; gap: 8px; }
.palette button { border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .7); border-radius: 999px; padding: 8px 12px; font-size: calc(14px * var(--fz)); }
.palette button.wf { border-color: rgba(var(--bad-rgb), .55); color: var(--bad); }
.sel .row { flex-wrap: wrap; }
.sel .shares { font-size: calc(14px * var(--fz)); line-height: 1.7; margin: 4px 0 8px; }
.tpl-list { display: grid; gap: 8px; max-height: 60vh; overflow: auto; margin: 8px 0; }
.tpl-list button { text-align: left; border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .8); border-radius: 12px; padding: 10px 12px; }
.tpl-list b { display: block; margin-bottom: 2px; }
.tpl-list span { color: var(--ink2); font-size: calc(13px * var(--fz)); }

/* 報告 */
.f { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--ink3); margin: 10px 0; }
.f.bad { border-left-color: var(--bad); box-shadow: -6px 0 18px -10px var(--bad); }
.f.warn { border-left-color: var(--warn); }
.f.good { border-left-color: var(--good); box-shadow: -6px 0 18px -10px var(--good); }
.f h3 { margin: 0 0 4px; }
.f p { margin: 4px 0; }
.f .src { color: var(--ink3); font-size: calc(12px * var(--fz)); }
.tag { display: inline-block; font-size: calc(11px * var(--fz)); padding: 1px 8px; border-radius: 999px; margin-right: 6px; vertical-align: 2px; font-weight: 700; border: 1px solid transparent; }
.tag.bad { background: var(--bad-soft); color: var(--bad); border-color: rgba(var(--bad-rgb), .4); }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(var(--warn-rgb), .4); }
.tag.good { background: var(--good-soft); color: var(--good); border-color: rgba(var(--good-rgb), .4); }
.tag.info { background: var(--info-soft); color: var(--ink2); }
.tag.inf { background: rgba(var(--accent-rgb), .1); color: var(--accent); }
.tag.asm { background: var(--info-soft); color: var(--ink2); border: 1px dashed var(--ink3); }   /* 依 App 假設的格局：虛線表示還不是實際的 */
.disclaimer { font-size: calc(12px * var(--fz)); color: var(--ink3); line-height: 1.7; }

.toast { position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%);
  background: rgba(var(--surface-rgb), .95); color: var(--ink); border: 1px solid var(--accent); box-shadow: var(--accent-glow); padding: 10px 16px; border-radius: 16px; font-size: calc(14px * var(--fz)); line-height: 1.6; text-align: center; text-wrap: pretty; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; max-width: min(calc(100vw - 32px), 560px); width: max-content; }
.toast.show { opacity: 1; }
dialog { border: 1px solid var(--line2); border-radius: var(--radius); padding: 0; width: min(92vw, 460px); background: var(--panel-solid); color: var(--ink); }
dialog::backdrop { background: rgba(var(--shadow-rgb), .6); backdrop-filter: blur(4px); }
.dlg { padding: 16px; }

@media print {
  body { background: #fff; color: #000; }
  .topbar, .tabbar, #tab-compass, #tab-house, #tab-plan, .row { display: none !important; }
  #tab-report { display: block !important; }
  .rp-version, #rpFixBtn, .rp-basis-go, .rp-top-links, .rp-top-go { display: none !important; }
  .rp-actions { display: none !important; }   /* 傳給家人看、存成一張圖、看屋比較：印出來按不了 */
  #reportAngles { display: none !important; }   /* 換個角度看是重排過的導覽，完整的結論卡都印得到 */
  .ot-ui { display: none !important; }   /* 屋外環境：印出來按不了的切換、說明、標記（下載的報告網頁也藏同一個 class） */
}
@media (min-width: 900px) {
  main { max-width: 1180px; }
  #tab-plan.active { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
  #tab-plan > .note { grid-column: 1 / -1; }
}

.panel-title.sm { font-size: calc(14px * var(--fz)); margin-top: 14px; }
input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; border: 0; background: none; }
.p-cut { fill: var(--bg); stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.p-cut-hatch { fill: url(#cutHatch); pointer-events: none; }
.p-cut-t.p-cut-pub { fill: rgb(var(--muted-rgb)); }
.cs-frame { fill: none; stroke: rgb(var(--muted-rgb)); stroke-width: 1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.cs-notch { fill: var(--bad); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.cs-notch.pub { fill: rgb(var(--muted-rgb)); }
.cs-guess { fill: rgba(var(--good-rgb), .6); }
.cs-sidenote b { color: var(--good); }
.notch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.notch-row .seg { flex: 0 0 auto; }
.p-cut-t { text-anchor: middle; --vc: 1; fill: var(--bad); font-weight: 800; }
.p-zone { text-anchor: middle; dominant-baseline: central; fill: var(--ink2); font-weight: 700; letter-spacing: .12em; pointer-events: none; opacity: .72; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-opacity: .6; vector-effect: non-scaling-stroke; }   /* 沒隔間的地方叫什麼（玄關、餐廳、走道）：淡灰、不搶房間的字 */
.p-ch { fill: var(--bad); stroke: var(--ink-strong); vector-effect: non-scaling-stroke; }
.p-tick { stroke: rgba(var(--accent-rgb), .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-tick-big { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.p-mt { text-anchor: middle; --vc: 1; fill: var(--ink2); font-weight: 600; }

/* 平面圖重排：宮名改淡浮水印、卦星標籤移到外框外 */
.p-water { text-anchor: middle; --vc: 1; font-weight: 900; pointer-events: none; opacity: .16; }
.p-water-good { fill: var(--good); }
.p-water-bad { fill: var(--bad); }
.p-pill rect { fill: rgba(var(--surface-rgb), .92); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.p-pill.good rect { stroke: var(--good); }
.p-pill.bad rect { stroke: var(--bad); }
.p-pill.qx rect { stroke-dasharray: 3 2; }
.p-pill text { text-anchor: middle; --vc: 1; font-weight: 800; pointer-events: none; }
.p-pill.good text { fill: var(--good); }
.p-pill.bad text { fill: var(--bad); }
.p-item-t.room { text-anchor: start; fill: var(--accent); }
.p-mark-t { text-anchor: middle; --vc: 1; fill: var(--on-color); font-weight: 900; pointer-events: none; }
.p-labels .p-mark-t, .p-labels .p-door-t { stroke: none; }   /* 字在有顏色的圓點上，不用描邊（深色模式的描邊和字同色會糊成一團） */
.p-hh { fill: rgba(var(--deep-rgb), .95); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chip-n { width: 14px; height: 14px; vertical-align: -2px; fill: var(--bad); margin-right: 2px; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: calc(12px * var(--fz)); color: var(--ink2); margin: 8px 2px 0; }
.plan-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
.dial-cap { text-align: center; font-size: calc(13px * var(--fz)); color: var(--ink2); margin-top: 6px; }
.dial-cap.top { color: var(--bad); margin-bottom: -2px; }
.dial-cap.bottom { margin-top: 20px; line-height: 1.6; }
.dial-cap b { color: var(--ink-strong); }
#dial { cursor: grab; touch-action: none; }
#dial.dragging { cursor: grabbing; }
.nudge { justify-content: center; margin: 4px 0 8px; }
.hud .row.nudge { gap: 0; }
.hud .row.nudge .btn { flex: 0 0 auto; padding: 8px 14px; font-family: var(--mono); border-radius: 0; margin-left: -1px; }
.hud .row.nudge .btn:first-child { border-radius: 12px 0 0 12px; margin-left: 0; }
.hud .row.nudge .btn:nth-child(4) { border-radius: 0 12px 12px 0; }
.hud .row.nudge #backToCompass { border-radius: 12px; margin-left: 8px; }
.mk-seg { margin: 10px 0 4px; }
/* 羅盤下方：先選要量透天還是大樓 */
.kind-pick { margin: 8px auto 4px; max-width: 360px; }
.kind-seg { margin: 0; }
.kind-seg button { padding: 9px 6px; }
.kind-hint { margin: 5px 0 0; text-align: center; font-size: calc(13px * var(--fz)); color: var(--ink2); line-height: 1.5; }
/* 大樓的樣子：俯視圖卡片（量方向頁、房子頁共用） */
.hrk-intro { margin: 0 0 8px; }
.hrk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(12px * var(--fz)); color: var(--ink3); margin: 0 0 10px; }
.hrk-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.hrk-legend .lg-road { background: rgba(var(--muted-rgb), .45); }
.hrk-legend .lg-gate { background: var(--bad); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 0; }
.hrk-legend .lg-core { background: rgba(var(--warn-rgb), .55); border: 1px solid var(--warn); }
.hrk-legend .lg-unit { background: rgba(var(--accent-rgb), .18); border: 1px solid rgba(var(--accent-rgb), .6); }
.hrk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1100px) { .hrk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hrk-card { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 8px 8px 10px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .45); color: var(--ink); font: inherit; cursor: pointer; }
.hrk-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--grad-on); }
.hrk-card svg { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.hrk-card b { font-size: calc(15px * var(--fz)); color: var(--ink-strong); }
.hrk-card b small { color: var(--ink3); font-size: calc(12px * var(--fz)); margin-left: 6px; font-weight: 400; }
.hrk-card > span { font-size: calc(13px * var(--fz)); color: var(--ink2); line-height: 1.45; }
.hrk-detail { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--info-soft); font-size: calc(14px * var(--fz)); line-height: 1.65; }
.hrk-detail .seg { margin-top: 4px; }
.hrk-sideq { margin-top: 10px; font-size: calc(13px * var(--fz)); font-weight: 700; color: var(--ink); }
.hrk-none { margin: 10px 0 0; }
.hrk-next { margin-top: 18px; }
.tv-road { fill: rgba(var(--muted-rgb), .25); }
.tv-rt { fill: var(--ink3); font-size: calc(10px * var(--fz)); text-anchor: middle; }
.tv-bldg { fill: rgba(var(--line-rgb), .07); stroke: var(--line2); }
.tv-unit { fill: rgba(var(--accent-rgb), .12); stroke: rgba(var(--accent-rgb), .6); }
.tv-garden { fill: rgba(var(--good-rgb), .16); stroke: rgba(var(--good-rgb), .55); stroke-dasharray: 3 2; }
.tv-core { fill: rgba(var(--warn-rgb), .38); stroke: var(--warn); }
.tv-gate { fill: var(--bad); }
.tv-t { fill: var(--ink2); font-size: calc(12px * var(--fz)); text-anchor: middle; }
.tv-ct { fill: var(--ink-strong); font-size: calc(11px * var(--fz)); font-weight: 700; text-anchor: middle; }
.size-presets { margin-top: 8px; } .size-presets button small, #doorWidthSeg button small { display: block; font-size: calc(11px * var(--fz)); color: var(--ink3); font-family: var(--mono); }
.seg button.on small { color: var(--accent); }
#doorWidthSeg button.on small { color: inherit; opacity: .85; }

.house-ed-wrap { position: relative; background: rgba(var(--deep-rgb), .75); border: 1px solid var(--line2); border-radius: var(--radius); margin: 10px 0; touch-action: pan-y; overflow: hidden; }
/* 圖上空白的地方可以上下捲；只有把手、大門、物件攔下手指 */
[data-he-door], [data-he-house], [data-he-v], [data-he-add], #plan [data-house], #plan [data-handle], #plan [data-rot], #plan [data-id].sel, #plan [data-cut] { touch-action: none; }   /* 平面上只有選起來的那一件擋住捲動；沒選的手指滑過去是捲頁面 */
#houseEd { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; max-height: 62vh; }
.he-bbox { fill: url(#heHatch); stroke: var(--bad); stroke-dasharray: 5 4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* 引導那一步點住戶大門的小圖（使用者 11-05：屋內指南針會被鋼筋影響，改點圖） */
.g-unitpick { display: block; width: 100%; max-height: 42vh; margin: 8px auto; cursor: pointer; touch-action: manipulation; }
.he-house { fill: var(--surface-solid); stroke: var(--accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .7)); }
.he-dim { fill: var(--accent); text-anchor: middle; --vc: 1; font-family: var(--mono); font-weight: 700; }
.he-side { fill: var(--ink2); text-anchor: middle; --vc: 1; letter-spacing: .1em; }
.he-v { fill: var(--bg); stroke: var(--warn); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
.he-add { fill: rgba(var(--accent-rgb), .25); stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: copy; }
.he-add-t { fill: var(--accent); text-anchor: middle; --vc: 1; pointer-events: none; font-weight: 800; }
.door-w { align-items: center; }
.door-w .seg { flex: 1 1 220px; margin: 0; }
.p-bbox { fill: none; stroke: var(--bad); stroke-dasharray: 5 4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.p-solid { fill: var(--surface-solid); }

/* 即時羅盤疊圖 */

/* 左上角大門方位小羅盤 */
.door-compass { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 8px; pointer-events: none;
  background: rgba(var(--deep-rgb), .82); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px 4px 4px; }
.door-compass svg { width: 58px; height: 58px; display: block; }
.dc-ring { fill: rgba(var(--surface-rgb), .95); stroke: var(--accent); stroke-width: 1.5; }
.dc-tick { stroke: var(--ink3); stroke-width: 1; }
.dc-n { fill: var(--bad); font-size: calc(9px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; }
.dc-needle { fill: var(--accent); filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .9)); }
.dc-tail { fill: var(--ink3); }
.door-compass .dc-t { font-size: calc(12px * var(--fz)); color: var(--ink2); line-height: 1.35; }
.door-compass .dc-t b { color: var(--accent); font-family: var(--mono); font-size: calc(14px * var(--fz)); }
.plan-wrap, .house-ed-wrap { padding-top: 72px; }

.steps { margin: 4px 0 10px; padding-left: 20px; font-size: calc(13px * var(--fz)); line-height: 1.7; color: var(--ink2); }
.photo-cal-wrap { background: #fff; border-radius: 12px; overflow: hidden; margin: 10px 0; touch-action: none; }
#photoCal { width: 100%; height: auto; display: block; max-height: 60vh; }
.pc-box { fill: rgba(var(--bad-rgb), .08); stroke: #ff2d55; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pc-h { fill: #ff2d55; stroke: var(--ink-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pc-up { fill: #ff2d55; font-weight: 900; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: .28em; stroke-linejoin: round; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chips button { border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .8); border-radius: 999px; padding: 6px 10px; font-family: var(--mono); font-size: calc(13px * var(--fz)); }
.photo-ctl { align-items: center; margin-top: 6px; }
.p-photo { pointer-events: none; }
.p-photo.inv { filter: invert(1) hue-rotate(180deg); }
.p-solid.see { fill-opacity: .35; }
.he-sec { fill: rgba(var(--accent-rgb), .05); }
.he-gua { text-anchor: middle; --vc: 1; fill: rgba(var(--ink-rgb), .28); font-weight: 900; pointer-events: none; }
.he-star-g { fill: rgba(var(--good-rgb), .8); font-weight: 800; }
.he-star-b { fill: rgba(var(--bad-rgb), .8); font-weight: 800; }
.dc-live { font-size: calc(11px * var(--fz)); color: var(--warn); line-height: 1.3; margin-left: 4px; }
.palette { display: block; }
.pal-g { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pal-h { flex: 0 0 64px; font-size: calc(12px * var(--fz)); color: var(--accent); letter-spacing: .08em; }

/* ---------- ④ 查 ---------- */
.lk-head { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 5; margin: -12px -16px 12px; padding: 12px 16px 8px; background: rgb(var(--deep-rgb)); border-bottom: 1px solid var(--line); }
.lk-box { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; height: 48px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); transition: box-shadow .2s, border-color .2s; }
.lk-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15), var(--accent-glow); }
.lk-box svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; }
.lk-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: calc(17px * var(--fz)); }
.lk-box input::-webkit-search-cancel-button { display: none; }
.lk-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--info-soft); font-size: calc(20px * var(--fz)); line-height: 1; }
.lk-status { margin: 8px 2px 6px; min-height: 18px; }
.lk-status b { color: var(--accent); }
.lk-syn { color: var(--ink3); margin-left: 4px; }
.lk-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lk-kinds::-webkit-scrollbar { display: none; }
.lk-kinds button, .lk-chips button { flex: none; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel-solid); font-size: calc(14px * var(--fz)); white-space: nowrap; }
.lk-kinds button.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.lk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-chips button:active, .lk-topics button:active, .lk-stars button:active { transform: scale(.97); }
.lk-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lk-topics button { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); display: flex; flex-direction: column; gap: 2px; }
.lk-topics span { color: var(--ink3); font-size: calc(12px * var(--fz)); }
.lk-stars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lk-stars button { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: calc(13px * var(--fz)); color: var(--ink2); }
.lk-stars button b { font-size: calc(17px * var(--fz)); }
.lk-stars .good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .35); }
.lk-stars .good b { color: var(--good); }
.lk-stars .bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .35); }
.lk-stars .bad b { color: var(--bad); }
.lk-nine { color: var(--ink); font-size: calc(12px * var(--fz)); }
.lk-pair { font-family: var(--mono); letter-spacing: .05em; color: var(--ink3); font-size: calc(12px * var(--fz)); }
.lk-tri tr[data-q] { cursor: pointer; }
.lk-tri tr[data-q]:active td { background: rgba(var(--accent-rgb), .08); }
.lk-wheel-wrap { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 14px; align-items: center; }
@media (max-width: 520px) { .lk-wheel-wrap { grid-template-columns: 1fr; justify-items: center; } }
.lk-wheel { width: 100%; max-width: 240px; }
.lk-wheel path.w0 { fill: rgba(var(--accent-rgb), .09); stroke: var(--line2); }
.lk-wheel path.w1 { fill: rgba(var(--accent2-rgb), .12); stroke: var(--line2); }
.lk-wheel text { fill: var(--ink); font-size: calc(13px * var(--fz)); text-anchor: middle; --vc: 1; }
.lk-wheel .lk-wg { fill: var(--accent); font-size: calc(18px * var(--fz)); font-weight: 700; }
.lk-wheel .lk-wn { fill: var(--ink3); font-size: calc(11px * var(--fz)); }
.lk-card { position: relative; margin-bottom: 10px; padding: 12px 14px 8px; border: 1px solid var(--line); border-left: 3px solid var(--ink3); border-radius: 4px 14px 14px 4px; background: var(--panel); cursor: pointer; animation: fade .2s ease; }
.lk-card.k-rule { border-left-color: var(--accent); }
.lk-card.k-term { border-left-color: var(--ref); }
.lk-card.k-video, .lk-card.k-answer { border-left-color: var(--good); }
.lk-card.k-size { border-left-color: var(--ink2); }
.lk-card h3 { margin: 4px 0 6px; font-size: calc(16px * var(--fz)); line-height: 1.4; }
.lk-meta { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fz)); color: var(--ink3); }
.lk-kind { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); flex: none; }
.lk-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-hit { margin-left: auto; font-family: var(--mono); flex: none; }
.lk-hit.full { color: var(--good); }
.lk-bar { height: 3px; border-radius: 3px; background: var(--info-soft); overflow: hidden; margin-bottom: 8px; }
.lk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.lk-text { margin: 0; color: var(--ink2); line-height: 1.75; font-size: calc(15px * var(--fz)); }
.lk-card.open .lk-text { color: var(--ink); }
.lk-near { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--info-soft); color: var(--ink2); font-size: calc(14px * var(--fz)); line-height: 1.7; }
.lk-near span { display: block; font-size: calc(12px * var(--fz)); color: var(--ink3); }
.lk-foot { text-align: right; font-size: calc(12px * var(--fz)); color: var(--ink3); margin-top: 6px; }
mark { background: rgba(var(--warn-rgb), .28); color: var(--ink-strong); border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px rgba(var(--warn-rgb), .35); }
.lk-more { display: block; width: 100%; margin: 6px 0 16px; }

/* ---------- 報告首頁 ---------- */
.rp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.rp-tile { border-radius: 12px; padding: 8px 4px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 0; }
.rp-tile span { font-size: calc(12px * var(--fz)); }
.rp-tile b { font-size: calc(26px * var(--fz)); line-height: 1.15; font-family: var(--mono); }
.rp-tile.bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .4); color: var(--bad); }
.rp-tile.warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .4); color: var(--warn); }
.rp-tile.good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .4); color: var(--good); }
.rp-tile b { color: inherit; }
.rp-tile b small { font-size: calc(12px * var(--fz)); font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Heiti TC", sans-serif; font-weight: 600; margin-left: 2px; }
.rp-disk { display: block; width: 100%; max-width: 340px; margin: 4px auto 0; touch-action: manipulation; }
.rp-w { stroke: rgba(var(--line-rgb), .28); stroke-width: 1; cursor: pointer; transition: fill .2s, opacity .2s; }
.rp-w.g { fill: rgba(var(--good-rgb), .13); }
.rp-w.b { fill: rgba(var(--bad-rgb), .11); }
.rp-w.x-warn { stroke: var(--warn); stroke-width: 2.5; }
.rp-w.x-bad { stroke: var(--bad); stroke-width: 3; }
.rp-w.sel { fill: rgba(var(--accent-rgb), .22); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .6)); }
.rp-disk text { text-anchor: middle; --vc: 1; pointer-events: none; }
.rp-g { fill: var(--ink); font-size: calc(21px * var(--fz)); font-weight: 800; }
.rp-s { font-size: calc(12px * var(--fz)); font-weight: 700; }
.rp-s.g { fill: var(--good); } .rp-s.b { fill: var(--bad); }
.rp-i { fill: var(--ink2); font-size: calc(11px * var(--fz)); }
.rp-dot.bad { fill: var(--bad); } .rp-dot.warn { fill: var(--warn); }
.rp-dot-t { fill: var(--on-color); font-size: calc(10px * var(--fz)); font-weight: 900; }
.rp-c { fill: var(--panel-solid); stroke: var(--line2); }
.rp-ct { fill: var(--accent); font-size: calc(15px * var(--fz)); font-weight: 800; }
.rp-ct2 { fill: var(--ink2); font-size: calc(10px * var(--fz)); }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: calc(12px * var(--fz)); color: var(--ink3); margin: 2px 0 10px; }
.rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.rp-legend i.g { background: rgba(var(--good-rgb), .5); } .rp-legend i.b { background: rgba(var(--bad-rgb), .45); } .rp-legend i.x { border: 2px solid var(--bad); }
.rp-detail { border: 1px solid var(--line2); border-radius: 14px; padding: 10px 12px; background: rgba(var(--deep-rgb), .45); }
.rp-d-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rp-d-h b { font-size: calc(18px * var(--fz)); }
.rp-d-h > span:not(.tag) { color: var(--ink2); font-size: calc(13px * var(--fz)); }
.rp-d-l { margin: 3px 0; color: var(--ink2); font-size: calc(14px * var(--fz)); }
.rp-d-f { margin: 6px 0; font-size: calc(14px * var(--fz)); }
.rp-d-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rp-d-b .btn { padding: 6px 12px; font-size: calc(13px * var(--fz)); }
.rp-toc { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 4; margin: 0 -16px 4px; padding: 8px 16px; background: rgb(var(--deep-rgb)); border-bottom: 1px solid var(--line); }
.rp-toc:empty { display: none; }
.rp-toc-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.rp-toc-in::-webkit-scrollbar { display: none; }
.rp-toc.more-r .rp-toc-in { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.rp-toc.more-l .rp-toc-in { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.rp-toc.more-l.more-r .rp-toc-in { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.rp-chip { flex: none; padding: 6px 11px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel-solid); font-size: calc(13px * var(--fz)); white-space: nowrap; }
.rp-chip b { color: var(--warn); margin-left: 2px; }
.rp-chip.has { border-color: rgba(var(--warn-rgb), .45); }
.rp-chip.on { border-color: var(--accent); color: var(--accent); }
.rp-only { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: calc(13px * var(--fz)); white-space: nowrap; }
.rp-only input { accent-color: var(--accent); margin: 0; }
.rp-toc-in .rp-chip, .rp-toc-in .rp-only { min-height: 40px; }   /* 目錄每一顆都按得到（至少 40 高），整排一樣高 */
.rp-sec { font-size: calc(15px * var(--fz)); letter-spacing: .08em; color: var(--ink2); margin: 18px 2px 4px; padding-left: 10px; border-left: 3px solid var(--accent); scroll-margin-top: 130px; }
#reportList.only-issues article.f.good, #reportList.only-issues article.f.info { display: none; }
.rp-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.rp-foot button { border: 1px solid var(--line2); background: none; border-radius: 999px; padding: 5px 14px; min-height: 36px; font-size: calc(13px * var(--fz)); color: var(--ink2); }   /* 卡片下面的「乾宮」「查這條」：原本 27 高、12 字，手指不好點 */
.rp-foot .rp-ask { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.rp-tw { overflow-x: auto; }
.rp-table { width: 100%; table-layout: fixed; } .rp-table th:nth-child(1), .rp-table td:nth-child(1) { width: 15%; } .rp-table th:nth-child(2), .rp-table td:nth-child(2) { width: 17%; } .rp-table th:nth-child(4), .rp-table td:nth-child(4) { width: 23%; } .rp-table th:nth-child(5), .rp-table td:nth-child(5) { width: 15%; } .rp-table td { word-break: break-all; }
.rp-table tr[data-rppal] { cursor: pointer; }
.rp-table td small { display: block; color: var(--ink3); font-size: calc(11px * var(--fz)); }

/* ---------- 圖表 ---------- */
.smp-wrap { margin-top: 10px; }
.smp { display: block; width: 100%; max-width: 420px; margin: 4px auto 0; }
.smp-band { fill: rgba(var(--warn-rgb), .14); }
.smp-b { stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .8; }
.smp-t { stroke: var(--ink3); }
.smp-ax { stroke: var(--line2); stroke-width: 1.5; }
.smp-m { fill: var(--ink2); font-size: calc(11px * var(--fz)); text-anchor: middle; }
.smp-p { fill: var(--accent); stroke: var(--on-color); stroke-width: 1.5; }
.smp-f { stroke: var(--accent); stroke-width: 2; }
.smp-ft { fill: var(--accent); font-size: calc(11px * var(--fz)); font-weight: 700; text-anchor: middle; }
.heat { display: inline-block; width: 34px; height: 6px; border-radius: 3px; background: var(--info-soft); margin-right: 6px; vertical-align: 1px; overflow: hidden; }
.heat i { display: block; height: 100%; background: var(--good); }
.smp-out { fill: var(--warn); font-size: calc(12px * var(--fz)); text-anchor: middle; --vc: 1; }
.smp-warn { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: calc(13px * var(--fz)); }
.smp-li-out { color: var(--warn); }
.smp-li-out small { margin-left: 6px; font-size: calc(11px * var(--fz)); border: 1px solid rgba(var(--warn-rgb), .5); border-radius: 999px; padding: 0 6px; }
.stale { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(var(--warn-rgb), .5); background: var(--warn-soft); color: var(--ink); font-size: calc(14px * var(--fz)); line-height: 1.6; }
.stale b { color: var(--warn); }
.stale .btn { display: block; margin-top: 8px; padding: 6px 12px; font-size: calc(13px * var(--fz)); }
.dc-dial, .dc-ndl { transform-box: view-box; transform-origin: 0 0; }
.drag-tip { position: absolute; right: 10px; top: 12px; z-index: 3; padding: 6px 14px; border-radius: 999px; background: rgba(var(--deep-rgb), .92); border: 1px solid var(--accent); box-shadow: var(--accent-glow); font-size: calc(14px * var(--fz)); white-space: nowrap; pointer-events: none; }
.drag-tip b { color: var(--accent); font-size: calc(16px * var(--fz)); }
.drag-tip small { color: var(--ink3); }
.drag-tip.pop { animation: tip-pop .45s ease; }
.door-real-back { display: block; margin: 6px 0 0; }
/* 樓梯通到幾樓（1d D3，Cases.stairMark）：跟「梯」同一個顏色；框底不透明，不透出宮色 */
.st-mk { pointer-events: none; }
/* 屋裡的門旁邊的卦＋五行（1d D4，Cases.doorTag）：顏色＝內五行的角色；選到只換外框顏色 */
.plan-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.plan-inner[hidden] { display: none; }
.tog { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel-solid); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.tog i { width: 30px; height: 18px; border-radius: 9px; background: rgba(var(--ink-rgb), .2); position: relative; flex: none; }
.tog i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-solid); transition: transform .15s; }
.tog.on { background: var(--accent); border-color: var(--accent); color: var(--on-color); text-shadow: 0 0 .5px currentColor; }
.tog.on i { background: rgba(255, 255, 255, .35); }
.tog.on i::after { transform: translateX(12px); }
.plan-inner .hint { flex: 1 1 200px; margin: 0; }
#doorFit { min-height: 44px; }
.door-fit-note { flex: 1 1 100%; font-size: calc(14px * var(--fz)); line-height: 1.6; }
.door-fit-note[hidden] { display: none; }
.door-fit-note p { margin: 0 0 4px; }
.door-fit-note ul { margin: 0 0 6px; padding-left: 1.2em; }
.door-fit-note .btn { white-space: normal; }
.dt { pointer-events: none; }
.dt-bx { fill: var(--surface-solid); stroke: var(--ink3); }
.dt-t { fill: var(--ink2); font-weight: 800; text-anchor: middle; dominant-baseline: central; letter-spacing: 0; }
.dt.good .dt-bx { fill: var(--good-soft); stroke: var(--good); } .dt.good .dt-t { fill: var(--good); }
.dt.warn .dt-bx { fill: var(--warn-soft); stroke: var(--warn); } .dt.warn .dt-t { fill: var(--warn); }
.dt.none .dt-bx { stroke-dasharray: 0.1 0.07; }
.dt.sel .dt-bx { stroke: var(--accent); }
.dt-ln { stroke: var(--ink3); stroke-dasharray: 0.08 0.06; }
.wseg { stroke: rgba(var(--ink-rgb), .35); stroke-linecap: butt; pointer-events: none; }
.wseg.good { stroke: var(--good); } .wseg.warn { stroke: var(--warn); }
.wseg.now { stroke-opacity: .55; }
.wseg.outer { stroke: rgba(var(--ink-rgb), .45); stroke-linecap: round; }   /* 外牆那一段：開不了門（灰點線） */
.wseg-t { fill: var(--good); font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: 0; paint-order: stroke; stroke: var(--surface-solid); stroke-width: .06px; }   /* 畫在樓梯上面，不擋手指拖樓梯 */
.cs-stp line { stroke: rgba(var(--ink-rgb), .35); stroke-width: 0.03; }
.st-ar { stroke: var(--accent2); stroke-linecap: round; fill: none; }
.st-ah { fill: var(--accent2); }
.st-lg { color: var(--accent2); font-weight: 800; }
.st-bx { fill: var(--surface-solid); stroke: var(--accent2); }
.st-bx.dash { stroke-dasharray: 0.12 0.08; }
.st-t { fill: var(--accent2); font-weight: 800; text-anchor: middle; dominant-baseline: central; letter-spacing: 0; }
.door-real-back[hidden] { display: none; }
@keyframes tip-pop { 0% { transform: scale(1); } 35% { transform: scale(1.15); background: rgba(var(--accent-rgb), .25); } 100% { transform: scale(1); } }

/* ---------- 門星怎麼算（動畫） ---------- */
.how-btn { margin: 0 0 10px; padding: 6px 14px; font-size: calc(14px * var(--fz)); }
.how-box { margin: 0 0 12px; padding: 10px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(var(--deep-rgb), .5); }
.how-svg { display: block; width: 100%; max-width: 260px; margin: 0 auto; }
.how-ring { fill: none; stroke: var(--line2); stroke-dasharray: 2 4; }
.how-g circle { fill: var(--panel-solid); stroke: var(--line2); transition: fill .4s, stroke .4s, r .4s; }
.how-g text { fill: var(--ink2); font-size: calc(15px * var(--fz)); font-weight: 700; text-anchor: middle; --vc: 1; transition: fill .4s; }
.s1 .how-g.is-h circle { fill: rgba(var(--accent-rgb), .25); stroke: var(--accent); stroke-width: 2.5; }
.s1 .how-g.is-h text { fill: var(--accent); }
.s2 .how-g.is-d circle { fill: rgba(var(--accent2-rgb), .3); stroke: var(--accent2); stroke-width: 2.5; }
.s2 .how-g.is-d text { fill: var(--ink-strong); }
.how-link { fill: none; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.how-link.g { stroke: var(--good); } .how-link.b { stroke: var(--bad); }
.s3 .how-link { transition: stroke-dashoffset .8s ease; stroke-dashoffset: 0; }
.how-star { font-size: calc(24px * var(--fz)); font-weight: 900; text-anchor: middle; --vc: 1; opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s .5s, transform .5s .5s cubic-bezier(.3, 1.6, .5, 1); }
.how-star.g { fill: var(--good); } .how-star.b { fill: var(--bad); }
.how-star2 { fill: var(--ink3); font-size: calc(11px * var(--fz)); text-anchor: middle; opacity: 0; transition: opacity .4s .8s; }
.s3 .how-star { opacity: 1; transform: scale(1); } .s3 .how-star2 { opacity: 1; }
.how-steps { margin: 6px 0 4px; padding-left: 22px; font-size: calc(14px * var(--fz)); line-height: 1.8; color: var(--ink2); }
.how-steps li { opacity: .25; transition: opacity .4s; }
.s1 .st1, .s2 .st2, .s3 .st3, .s4 .st4 { opacity: 1; }
.c-h { color: var(--accent); } .c-d { color: var(--ref); }
.how-pairs span { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 6px; font-family: var(--mono); }
.how-pairs span.on { background: rgba(var(--warn-rgb), .25); color: var(--ink-strong); box-shadow: 0 0 0 1px rgba(var(--warn-rgb), .5); }
.how-again { padding: 4px 12px; font-size: calc(13px * var(--fz)); }
@media (prefers-reduced-motion: reduce) { .how-box *, .how-box { transition: none !important; } }

/* ---------- 24 山示範 ---------- */
.demo-row { align-items: center; margin: -2px 0 8px; }
.demo-row .btn { padding: 6px 14px; font-size: calc(14px * var(--fz)); }
.d24-wall { fill: none; stroke: var(--accent); stroke-width: .12; stroke-dasharray: 1; stroke-dashoffset: 1; animation: d24-draw .9s ease forwards; }
.d24-dot { fill: var(--ink); opacity: 0; animation: d24-in .3s ease forwards; }
.d24-dot.edge { fill: var(--warn); }
.d24-t { fill: var(--accent); font-weight: 700; text-anchor: middle; --vc: 1; opacity: 0; animation: d24-in .3s ease forwards; }
.d24-ray { stroke: var(--warn); stroke-width: .08; stroke-dasharray: 1; stroke-dashoffset: 1; animation: d24-draw .6s ease forwards; }
.d24-c { fill: var(--warn); opacity: 0; animation: d24-in .3s ease forwards; }
@keyframes d24-draw { to { stroke-dashoffset: 0; } }
@keyframes d24-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.d24-dot, .d24-t, .d24-c { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .d24 * { animation-duration: .01s !important; animation-delay: 0s !important; } }
#houseEd > * { transition: opacity .4s; }
#houseEd.demo-on > :not(.d24) { opacity: .22; }
.d24.out { opacity: 0; transition: opacity .5s; }
.p-gl { fill: none; stroke: rgba(var(--ink-rgb), .38); stroke-width: 1.1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.p-gl * { vector-effect: non-scaling-stroke; }
/* 設備細節：水（馬桶、臉盆、水槽、浴缸、洗衣機）、水龍頭、爐火、車窗；平面頁、案例卡、報告共用 */
.p-gl .w { fill: rgba(70, 150, 230, .3); stroke: rgba(70, 150, 230, .85); }
.p-gl .t { fill: rgba(var(--ink-rgb), .55); stroke: none; }
.p-gl .b { stroke: var(--bad); stroke-width: 1.2px; }
.p-gl .g { fill: rgba(120, 170, 220, .35); stroke: none; }
.cs-plan .p-gl { stroke-width: .9px; }

/* ---------- 步驟進度、復原、屬性面板 ---------- */
.tabbar button { position: relative; }
.tb-dot { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; font-size: calc(10px * var(--fz)); font-weight: 900; line-height: 15px; text-align: center; display: none; letter-spacing: 0; }
.tb-dot.ok { display: block; background: var(--good); color: var(--on-color); }
.tb-dot.warn { display: block; background: var(--warn); color: var(--on-color); }
.tb-dot.bad { display: block; background: var(--bad); color: var(--ink-strong); }
.tb-dot.asm { display: block; top: 9px; left: calc(50% + 11px); min-width: 9px; width: 9px; height: 9px; padding: 0; background: var(--ink3); }   /* 還是 App 假設的格局：不帶數字的中性小點 */
#undoBtn { font-size: calc(18px * var(--fz)); }
#undoBtn:disabled { opacity: .35; }
.panel.sel { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); z-index: 18; max-height: 46vh; overflow-y: auto; margin: 0; background: var(--panel-solid); border-color: var(--accent); box-shadow: 0 -10px 30px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--accent-rgb), .25); animation: sheet-up .25s ease; }
@keyframes sheet-up { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { .panel.sel { position: sticky; left: auto; right: auto; max-height: none; } }
.sel-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel); font-size: calc(20px * var(--fz)); line-height: 1; }
.panel.sel .panel-title { padding-right: 40px; }
.panel.sel .row { margin: 6px 0 0; }
/* 速查卡片固定欄數：8 顆星排 2×4、12 個主題排 2×6，不要剩一張孤零零掉到下一列 */
.lk-stars, .lk-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .lk-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lk-stars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lk-topics { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* 寬螢幕：報告分兩欄（左：總覽與表；右：目錄與結論），查詢頁限寬置中 */
@media (min-width: 900px) {
  #tab-report.active { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 18px; align-items: start; }
  #tab-report > .stale { grid-column: 1 / -1; }
  .rp-toc { margin: 0 0 4px; border-radius: 0 0 14px 14px; }
  #tab-lookup.active { max-width: 860px; margin: 0 auto; }
}
.btn.mini { padding: 2px 10px; font-size: calc(12px * var(--fz)); margin-left: 4px; }
/* ---------- 學習圖解（diagram.js） ---------- */
.dg { display: block; width: 100%; max-width: 380px; margin: 0 auto; }
.dg text { text-anchor: middle; font-family: inherit; }
.dg-cell { stroke: rgba(var(--line-rgb), .35); stroke-width: 1; }
.dg-cell.g { fill: rgba(var(--good-rgb), .12); } .dg-cell.b { fill: rgba(var(--bad-rgb), .1); } .dg-cell.n { fill: rgba(var(--surface-rgb), .8); }
.dg-cell.mk { stroke: var(--warn); stroke-width: 3; }
.dg-hatch { stroke: rgba(var(--bad-rgb), .55); stroke-width: 2; }
.dg-misst { fill: var(--bad); font-size: calc(12px * var(--fz)); font-weight: 800; text-anchor: end; }
.dg-center { fill: rgba(var(--accent-rgb), .08); stroke: rgba(var(--accent-rgb), .4); }
.dg-wall { fill: none; stroke: var(--accent); stroke-width: 3; }
.dg-gua { fill: var(--ink); font-size: calc(22px * var(--fz)); font-weight: 800; }
.dg-gua.s { font-size: calc(15px * var(--fz)); }
.dg-star { font-size: calc(13px * var(--fz)); font-weight: 700; } .dg-star.g { fill: var(--good); } .dg-star.b { fill: var(--bad); }
.dg-house { fill: var(--accent); font-size: calc(18px * var(--fz)); font-weight: 900; }
.dg-sub { fill: var(--ink2); font-size: calc(12px * var(--fz)); }
.dg-arrow { fill: var(--accent); }
.dg-doort { fill: var(--door); font-size: calc(13px * var(--fz)); font-weight: 800; }
.dg-dir { fill: var(--ink3); font-size: calc(12px * var(--fz)); }
.dg-cap { fill: var(--ink3); font-size: calc(11px * var(--fz)); text-anchor: start !important; }
.dg-item { opacity: .9; } .dg-itemt { fill: var(--on-color); font-size: calc(10.5px * var(--fz)); font-weight: 800; }
  
    
.dg-wedge.a { fill: rgba(var(--accent-rgb), .08); } .dg-wedge.b { fill: rgba(var(--accent2-rgb), .1); } .dg-wedge { stroke: var(--line2); }
/* 小太極（diagram.js taiji）：左邊整間房子、右邊放大的房間，門在房間的哪一格就是哪一卦 */
.dg.dg-tj { max-width: 420px; }
.dg-tj-h { fill: var(--ink2); font-size: calc(12px * var(--fz)); font-weight: 700; }
.dg-tj-s { fill: var(--ink2); font-size: calc(10px * var(--fz)); font-weight: 700; }
.dg-tj-n { fill: var(--ink3); font-size: calc(10.5px * var(--fz)); }
.dg-tj-el { fill: var(--ink2); font-size: calc(11px * var(--fz)); }
.dg-star.n { fill: var(--ink3); font-size: calc(11px * var(--fz)); font-weight: 600; }
.dg-tj-rm { fill: rgba(var(--accent-rgb), .55); stroke: var(--accent); stroke-width: 1; }
.dg-tj-dot { fill: var(--warn); }
.dg-tj-ray { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 5 4; }
.dg-tj-l { fill: var(--ink); font-size: calc(14px * var(--fz)); font-weight: 800; text-anchor: start !important; }
.dg-tj-l2 { fill: var(--ink2); font-size: calc(12.5px * var(--fz)); text-anchor: start !important; }
.dg-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; align-items: start; }
/* ---------- 學 ---------- */
.ln-hero { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.ln-prog { min-width: 140px; font-size: calc(13px * var(--fz)); color: var(--ink2); } .ln-prog b { font-size: calc(24px * var(--fz)); color: var(--accent); font-family: var(--mono); }
.ln-bar { height: 5px; border-radius: 4px; background: var(--info-soft); margin-top: 4px; overflow: hidden; } .ln-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.ln-cont { margin: 4px 0 12px; }
.ln-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ln-ch { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.ln-ch.done { border-color: rgba(var(--good-rgb), .45); }
.ln-no { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 900; font-family: var(--mono); }
.ln-cht b { display: block; font-size: calc(15px * var(--fz)); } .ln-cht small { color: var(--ink3); font-size: calc(12px * var(--fz)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ln-cnt { font-family: var(--mono); font-size: calc(12px * var(--fz)); color: var(--ink3); }
.ln-ex-card { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 12px; padding: 14px; text-align: left; border-radius: 14px; border: 1px solid rgba(var(--warn-rgb), .45); background: var(--warn-soft); }
.ln-ex-card b { font-size: calc(16px * var(--fz)); color: var(--warn); } .ln-ex-card span { color: var(--ink2); font-size: calc(13px * var(--fz)); }
.ln-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: calc(13px * var(--fz)); color: var(--ink3); }
.ln-crumb button { border: 0; background: none; color: var(--accent); padding: 4px 2px; }
.ln-list { padding-left: 0; list-style: none; counter-reset: ln; }
.ln-list li button { width: 100%; text-align: left; padding: 12px 14px; margin: 0 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: flex; justify-content: space-between; gap: 8px; }
.ln-list li button.read { border-color: rgba(var(--good-rgb), .35); } .ln-list li button span { color: var(--good); font-size: calc(12px * var(--fz)); }
.ln-h { padding-left: 10px; }
.ln-note { margin: 10px 0; }
.ln-listb { margin: 10px 0; background: var(--panel); border: 1px solid var(--line); }
.ln-listb ul { margin: 0; }
.ln-src { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: calc(11px * var(--fz)); line-height: 18px; vertical-align: 1px; border: 1px solid var(--line2); color: var(--ink3); white-space: nowrap; }
.ln-src.both { color: var(--good); border-color: rgba(var(--good-rgb), .4); } .ln-src.main { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.ln-src.supp { color: var(--ref); border-color: rgba(var(--accent2-rgb), .4); } .ln-src.video { color: var(--warn); border-color: rgba(var(--warn-rgb), .4); }
.ln-ref { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: calc(11px * var(--fz)); line-height: 18px; background: var(--info-soft); color: var(--ink3); }
.btn.mini.ln-golink { display: block; margin: 6px 0 0; text-align: left; white-space: normal; line-height: 1.5; padding: 4px 10px; }
.ln-conf { margin: 10px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--warn-rgb), .5); background: var(--warn-soft); }
.ln-conf2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; font-size: calc(15px * var(--fz)); line-height: 1.75; }
.ln-conf2 > div { padding: 8px 10px; border-radius: 10px; } .ln-conf2 .ln-src { margin: 0 6px 0 0; }
.ln-tw { overflow-x: auto; }
.ln-fig { margin: 14px 0; padding: 10px; border-radius: 16px; background: rgba(var(--deep-rgb), .6); border: 1px solid var(--line2); }
.ln-fig figcaption { text-align: center; margin-top: 6px; line-height: 1.6; }
.ln-dgseg { justify-content: center; margin: 0 auto 8px; max-width: 280px; } .ln-dgseg button { padding: 5px 10px; font-size: calc(13px * var(--fz)); }
.ln-try { display: block; width: 100%; margin: 12px 0; border-color: var(--accent); color: var(--accent); }
.ln-nav { display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 10px; } .ln-nav .btn { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-exf { margin: 6px 0; } .ln-exf button.on { border-color: var(--accent); color: var(--accent); }
.ln-exp { list-style: none; counter-reset: exn; padding-left: 0; margin: 12px 0; line-height: 1.85; }
.ln-exp li { counter-increment: exn; position: relative; padding: 2px 0 2px 42px; margin: 10px 0; }
.ln-exp li::before { content: counter(exn); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 15px/1 var(--mono); background: var(--panel-solid); border: 2px solid var(--line2); color: var(--ink2); }
.ln-exp li.bad::before { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.ln-exp li.warn::before { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.ln-exp li.good::before { border-color: var(--good); color: var(--good); background: var(--good-soft); }
/* 學分頁上方：你家（量過方向才有）、收藏的課。一列一課，整列按得到（至少 44 高）；收藏鈕選起來只換顏色 */
.ln-top > .panel { margin: 0 0 12px; }
.ln-home-n { margin-left: 8px; font-size: calc(13px * var(--fz)); font-weight: 400; letter-spacing: 0; color: var(--ink2); }
.ln-home-d { margin: 0 0 4px; font-size: calc(19px * var(--fz)); font-weight: 800; line-height: 1.45; letter-spacing: .02em; color: var(--ink-strong); }
.ln-home-d em { font-style: normal; color: var(--accent); }
.ln-home-p { margin: 0 0 10px; }
.ln-sugl { list-style: none; padding: 0; margin: 0; }
.ln-sugl li { display: flex; gap: 8px; align-items: stretch; margin: 0 0 8px; }
.ln-sugl li:last-child { margin-bottom: 0; }
.ln-sug { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--surface2-rgb), .55); color: var(--ink); cursor: pointer; }
.ln-sug.read { border-color: rgba(var(--good-rgb), .35); }
.ln-sug-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ln-sug-t { font-size: calc(15px * var(--fz)); font-weight: 700; line-height: 1.45; color: var(--ink-strong); }
.ln-sug-w { font-size: calc(12.5px * var(--fz)); line-height: 1.55; color: var(--ink2); }
.ln-sug-w .tag { margin-right: 4px; }
.ln-sug-r { flex: none; font-size: calc(12px * var(--fz)); color: var(--good); }
.ln-fav { flex: none; width: 56px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border-radius: 12px; border: 1px solid var(--line2); background: transparent; color: var(--ink3); font-size: calc(11.5px * var(--fz)); line-height: 1.2; cursor: pointer; }
.ln-fav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ln-fav.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .12); }
.ln-fav.on svg { fill: currentColor; }
.ln-favs li.off .ln-sug, .ln-favs li.off .ln-sug-t { color: var(--ink3); }
.ln-titlerow { display: flex; align-items: flex-start; gap: 10px; }
.ln-titlerow .ln-title { flex: 1 1 auto; min-width: 0; }
.ln-titlerow .ln-fav { margin-top: 6px; }
.lk-open { margin-top: 8px; padding: 5px 12px; font-size: calc(13px * var(--fz)); }
@media (min-width: 900px) { #tab-learn.active { margin: 0 auto; } }

.chips button.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .22); color: var(--ink-strong); }
.extra-doors { margin: 8px 0 4px; }
.extra-doors summary { cursor: pointer; color: var(--ink2); font-size: calc(14px * var(--fz)); }

/* ---------- 量方向頁：坐／系統／向 三格＋即時盤面 ---------- */
.scv { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; margin: 6px 0 12px; }
.scv-c { border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--surface-rgb), .7); padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scv-c span { font-size: calc(12px * var(--fz)); color: var(--ink2); }
.scv-c b { font-size: calc(20px * var(--fz)); color: var(--ink-strong); font-weight: 800; }
.scv-c small { font-size: calc(12px * var(--fz)); color: var(--ink2); font-family: var(--mono); }
.scv-c.mid b { color: var(--accent); }
.live-board { display: flex; flex-direction: column; gap: 12px; }
.bd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bd-t { font-size: calc(22px * var(--fz)); font-weight: 800; color: var(--ink-strong); }
.bd-src { flex: 0 0 auto; font-size: calc(12px * var(--fz)); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; }
.bd-src.live { color: var(--accent); border-color: rgba(var(--accent-rgb), .55); }
.bd-src.live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; box-shadow: var(--accent-glow); animation: bdPulse 1.4s ease-in-out infinite; }
.bd-src.lock { color: var(--warn); border-color: rgba(var(--warn-rgb), .5); }
@keyframes bdPulse { 50% { opacity: .25; } }
.bd-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.bd-door { flex: 1 1 220px; }
.bd-door button small { display: block; font-size: calc(11px * var(--fz)); color: var(--ink2); }
.bd-door button.on small { color: inherit; }
.bd-floor { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line2); border-radius: 12px; padding: 3px; }
.bd-floor b { min-width: 40px; text-align: center; font-family: var(--mono); }
.bd-floor button { width: 38px; height: 38px; border: 0; border-radius: 9px; background: rgba(var(--accent-rgb), .1); color: var(--accent); font-size: calc(18px * var(--fz)); }
.bd-line { font-size: calc(15px * var(--fz)); color: var(--ink2); }
.bd-line b { color: var(--ink-strong); }
.bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bd-cell { position: relative; aspect-ratio: 1.15; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--surface-rgb), .75); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; min-width: 0; transition: background .25s, border-color .25s; }
.bd-cell.g { background: linear-gradient(160deg, rgba(var(--good-rgb), .16), rgba(var(--surface-rgb), .8)); border-color: rgba(var(--good-rgb), .35); }
.bd-cell.b { background: linear-gradient(160deg, rgba(var(--bad-rgb), .12), rgba(var(--surface-rgb), .8)); border-color: rgba(var(--bad-rgb), .28); }
.bd-cell.center { background: linear-gradient(160deg, rgba(var(--accent-rgb), .28), var(--center-deep)); border-color: var(--accent); box-shadow: inset 0 0 24px rgba(var(--accent-rgb), .2); }
.bd-cell.is-door { outline: 2px solid var(--accent); outline-offset: -2px; }
.bd-star { font-size: clamp(13px, 2.2vw, 17px); font-weight: 800; }
.bd-cell.g .bd-star { color: var(--good); }
.bd-cell.b .bd-star { color: var(--bad); }
.bd-cell.center .bd-star { color: var(--accent); font-size: calc(13px * var(--fz)); font-weight: 600; }
.bd-gua { font-size: clamp(26px, 5vw, 44px); font-weight: 900; color: var(--ink-strong); line-height: 1.1; }
.bd-dir { font-size: calc(11px * var(--fz)); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bd-tags { position: absolute; top: 5px; left: 6px; display: flex; gap: 3px; }
.bd-tags em { font-style: normal; font-size: calc(10px * var(--fz)); padding: 1px 5px; border-radius: 6px; background: rgba(var(--muted-rgb), .2); color: var(--ink2); }
.bd-tags em.door { background: var(--accent); color: var(--on-color); font-weight: 800; }
.bd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.bd-card { border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--surface-rgb), .65); padding: 10px 12px; min-width: 0; }
.bd-card.good { border-color: rgba(var(--good-rgb), .45); background: var(--good-soft); }
.bd-card.warn { border-color: rgba(var(--warn-rgb), .45); background: var(--warn-soft); }
.bd-card.bad { border-color: rgba(var(--bad-rgb), .45); background: var(--bad-soft); }
.bd-ck { font-size: calc(12px * var(--fz)); color: var(--ink2); margin-bottom: 4px; }
.bd-cv { font-size: calc(15px * var(--fz)); font-weight: 700; color: var(--ink-strong); }
.bd-lv { display: inline-block; font-size: calc(12px * var(--fz)); padding: 1px 7px; border-radius: 6px; margin-right: 6px; background: rgba(var(--ink-rgb), .12); }
.bd-card.good .bd-lv { background: var(--good); color: var(--on-color); }
.bd-card.warn .bd-lv { background: var(--warn); color: var(--on-color); }
.bd-card.bad .bd-lv { background: var(--bad); color: var(--on-color); }
.bd-card p { margin: 4px 0 0; font-size: calc(13px * var(--fz)); line-height: 1.55; color: var(--ink2); }
.bd-act { flex-wrap: wrap; }   /* 窄手機（360 寬）兩顆按鈕排不下就換行，不要把整頁撐寬 */
.bd-act .btn { flex: 1 1 0; }
.bd-empty, .bd-blocked { padding: 20px 4px; text-align: center; }
.bd-blocked { color: var(--warn); }
@media (min-width: 900px) {
  /* 羅盤那一欄比右欄高：最後一列 1fr 把多出來的高度吃掉，右欄的卡片才不會被撐出一段一段的空白 */
  #tab-compass.active { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: repeat(7, auto) 1fr; gap: 18px; align-items: start; }
  #tab-compass > .hud { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 8px; }
  #tab-compass > .live-board { grid-column: 2; grid-row: 1; }
  #tab-compass > .howto { grid-column: 2; }
  #tab-compass > .panel:not(.live-board):not(.howto) { grid-column: 2; }
  /* 上面那排按鈕的說明卡：寬螢幕放右欄最上面，即時盤往下一列 */
  #tab-compass > .howto-bar { grid-column: 2; grid-row: 1; margin: 0; }
  #tab-compass:has(> .howto-bar:not([hidden])) > .live-board { grid-row: 2; }
  .dial-wrap { width: min(100%, 400px); }
}
@media (min-width: 900px) {
  .bd-cell { aspect-ratio: 1.75; }
  .bd-gua { font-size: clamp(26px, 2.8vw, 38px); }
  .live-board { gap: 10px; }
}

.rp-overall { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 4px; }
.rp-overall.good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .5); } .rp-overall.good b { color: var(--good); }
.rp-overall.warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .5); } .rp-overall.warn b { color: var(--warn); }
.rp-overall.bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .5); } .rp-overall.bad b { color: var(--bad); }
.bd-ov { grid-column: 1 / -1; }

.fl-scroll { overflow-x: auto; }
.fl-table td small { display: block; font-size: calc(11px * var(--fz)); color: var(--ink2); }
.fl-table td em { font-style: normal; margin-left: 4px; }
.fl-table tr[data-floor] { cursor: pointer; }
.fl-table tr.on td { background: rgba(var(--accent-rgb), .1); }
.fl-lv { font-weight: 800; white-space: nowrap; }
.fl-lv.good { color: var(--good); } .fl-lv.warn { color: var(--warn); } .fl-lv.bad { color: var(--bad); }
.fl-best { margin: 6px 0; } .fl-best b { color: var(--good); }
.fl-top { max-width: 200px; }

.floor-dims { margin: 8px 0; } .floor-dims summary { cursor: pointer; color: var(--ink2); font-size: calc(14px * var(--fz)); }
.fd-row { align-items: flex-end; flex-wrap: wrap; } .fd-row b { min-width: 34px; padding-bottom: 10px; } .fd-row .field { max-width: 120px; }

.map-seg { flex-wrap: wrap; margin: 4px 0 8px; } .map-seg button { padding: 6px 10px; min-height: 38px; font-size: calc(13px * var(--fz)); }
.shape-out { fill: none; stroke: var(--accent); stroke-width: 2; stroke-opacity: .6; pointer-events: none; }
.shape-map .rp-g, .shape-map .rp-s, .shape-map .rp-i { text-anchor: middle; --vc: 1; pointer-events: none; }

.shape-map { max-height: 460px; }
.bd-map { display: flex; justify-content: center; } .bd-map .rp-disk { height: min(380px, 70vw); width: auto; max-width: 100%; max-height: none; margin: 0 auto; }

.map-seg button { white-space: nowrap; flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { .map-seg button { padding: 6px 4px; font-size: calc(12px * var(--fz)); } }

/* 大門圖示（doorglyph.js） */
/* 門圖示預設就是大門（大門色）；屋裡另一扇門（課程圖的後門、側門）加 .sub 用一般主色 */
.dglyph .dg-sill { stroke: var(--door); stroke-linecap: butt; opacity: .95; }
.dglyph .dg-frame { stroke: var(--ink-strong); stroke-linecap: butt; opacity: .3; }
.dglyph .dg-fan { fill: rgba(var(--door-rgb), .3); stroke: none; }
.dglyph .dg-jamb { stroke: var(--ink-strong); stroke-linecap: round; }
.dglyph .dg-leaf { stroke: var(--door); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(var(--door-rgb), .7)); }
.dglyph .dg-swing { fill: none; stroke: var(--door); opacity: .85; }
.dglyph .dg-arrowin { fill: var(--door); }
.dglyph .dg-lbl { fill: var(--door); font-weight: 800; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: rgba(var(--deep-rgb), .85); }
.dglyph.sub .dg-sill, .dglyph.sub .dg-leaf, .dglyph.sub .dg-swing { stroke: var(--accent); }
.dglyph.sub .dg-sill { opacity: .55; } .dglyph.sub .dg-fan { fill: rgba(var(--accent-rgb), .2); } .dglyph.sub .dg-leaf { filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .7)); }
.dglyph.off { opacity: .35; } .dglyph.off .dg-leaf { filter: none; }

/* 手機寬度：頂列放不下時，品牌字縮短、選單可以縮 */
@media (max-width: 440px) {
  .brand small { display: none; }
  .project { flex: 1 1 auto; justify-content: flex-end; }
}

/* 主題切換按鈕：深色顯示太陽（按了變淺色）、淺色顯示月亮 */

/* ================= 閱讀排版（10-27 重新設計） =================
   原則：內文夠大、行距夠鬆、一行不要太長；重點靠「顏色＋粗細」而不是靠框；表格要有格線、表頭要有底色。 */
body { font-size: calc(16px * var(--fz)); line-height: 1.6; }
.panel { padding: 16px; }
.panel-title { font-size: calc(17px * var(--fz)); letter-spacing: .06em; }
.hint { font-size: calc(13.5px * var(--fz)); line-height: 1.65; }

/* 重點標注（humanize.rich 產生） */
.st { font-weight: 800; padding: 0 .12em; border-radius: 4px; }
.st.g { color: var(--good); background: rgba(var(--good-rgb), .1); }
.st.b { color: var(--bad); background: rgba(var(--bad-rgb), .1); }
.st.w { color: var(--warn); background: rgba(var(--warn-rgb), .1); }
.gm { color: var(--ink-strong); font-weight: 800; }
.neg { color: var(--bad); font-weight: 800; }
.num { font-family: var(--mono); font-size: .94em; font-weight: 700; color: var(--ink-strong); white-space: nowrap; }
.lead { color: var(--ink-strong); font-weight: 800; }
/* 說明文字的重點（humanize rich 的 **…** 和說明模式裡「」的按鈕名）：只加粗，不上色 */
.kw { color: var(--ink-strong); font-weight: 700; }
.kp { display: inline-block; margin: 0 6px 0 0; padding: 0 8px; border-radius: 6px; font-size: calc(12px * var(--fz)); line-height: 20px; vertical-align: 1px; font-weight: 800; letter-spacing: .1em; color: var(--on-color); background: var(--accent); }

/* 學：一行最多約 38 個字，標題分層 */
@media (min-width: 900px) { #tab-learn.active { max-width: 820px; } }
.ln-title { font-size: calc(26px * var(--fz)); line-height: 1.35; margin: 6px 0 16px; letter-spacing: .04em; font-weight: 800; color: var(--ink-strong); }
.ln-h { font-size: calc(19px * var(--fz)); margin: 28px 0 10px; padding: 0 0 6px 0; border-left: 0; border-bottom: 1px solid var(--line2); color: var(--ink-strong); display: flex; align-items: center; gap: 10px; }
.ln-h::before { content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--accent); }
.ln-p { font-size: calc(17px * var(--fz)); line-height: 1.95; margin: 10px 0 14px; color: var(--ink); }
.ln-listb { padding: 14px 16px 12px; border-radius: 14px; }
.ln-lt { font-size: calc(13px * var(--fz)); letter-spacing: .14em; color: var(--accent); font-weight: 800; margin-bottom: 8px; }
.ln-listb ul { padding-left: 1.25em; }
.ln-listb li { font-size: calc(16.5px * var(--fz)); line-height: 1.85; margin: 6px 0; }
.ln-listb li::marker { color: var(--accent); }
.ln-note { position: relative; padding: 12px 14px 12px 46px; border-radius: 12px; border: 1px solid rgba(var(--accent2-rgb), .3); border-left: 4px solid var(--accent2); background: var(--ref-soft); font-size: calc(16px * var(--fz)); line-height: 1.85; }
.ln-note::before { content: "!"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent2); color: var(--on-color); font-weight: 900; font-size: calc(13px * var(--fz)); line-height: 20px; text-align: center; font-family: var(--mono); }
.ln-conf { border-left: 4px solid var(--warn); }
.ln-conf2 > div { background: rgba(var(--surface-rgb), .6); border: 1px solid var(--line); }
.ln-conf2 .ln-src.main { color: var(--on-color); background: var(--accent); border-color: var(--accent); }
.ln-fig figcaption { font-size: calc(14.5px * var(--fz)); color: var(--ink2); }

/* 表格：完整格線、表頭底色、斑馬紋、第一欄加粗 */
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: calc(15px * var(--fz)); line-height: 1.6; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; background: rgba(var(--surface-rgb), .55); }
table.grid th, table.grid td { padding: 10px 12px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid tr > :last-child { border-right: 0; }
table.grid tr:last-child > * { border-bottom: 0; }
table.grid tr:first-child th { background: rgba(var(--accent-rgb), .12); color: var(--ink-strong); font-weight: 800; font-size: calc(14px * var(--fz)); letter-spacing: .06em; border-bottom: 1px solid var(--line2); white-space: nowrap; }
table.grid th[scope=row] { color: var(--ink-strong); font-weight: 800; background: rgba(var(--accent-rgb), .04); white-space: nowrap; }
table.grid tr:nth-child(even) td { background: rgba(var(--muted-rgb), .06); }
.ln-tw { margin: 14px 0; border-radius: 12px; }
.ln-tw caption, .ln-tw + .hint { caption-side: bottom; }

/* 報告：標題、內文分層 */
.f { padding: 14px 16px; border-radius: 14px; }
.f h3 { font-size: calc(17px * var(--fz)); line-height: 1.5; color: var(--ink-strong); }
.f p { font-size: calc(15.5px * var(--fz)); line-height: 1.85; color: var(--ink); }
.rp-overall b { font-size: calc(19px * var(--fz)); }
.rp-overall span { font-size: calc(14.5px * var(--fz)); line-height: 1.75; color: var(--ink); }
.verdict { font-size: calc(15px * var(--fz)); line-height: 1.8; }

/* ================= 淺色主題：日式紙感、不發光 ================= */
:root[data-theme="light"] body { background:
    linear-gradient(rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(var(--grid-rgb), var(--grid-a)) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(1000px 500px at 85% -10%, rgba(var(--accent-rgb), .07), transparent 60%),
    var(--bg); }
:root[data-theme="light"] .panel, :root[data-theme="light"] .f, :root[data-theme="light"] .lk-card, :root[data-theme="light"] .ln-ch, :root[data-theme="light"] .ln-list li button {
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(var(--shadow-rgb), .04), 0 8px 24px -12px rgba(var(--shadow-rgb), .18); }
:root[data-theme="light"] .topbar, :root[data-theme="light"] .tabbar, :root[data-theme="light"] .lk-head, :root[data-theme="light"] .rp-toc, :root[data-theme="light"] .tut-top, :root[data-theme="light"] .cs-mode { background: rgb(var(--surface-rgb)); }
/* 加到主畫面開啟時狀態列的字是白色；淺色主題在狀態列那一段墊一條深色，時間、電量才看得見（沒有狀態列時高度是 0） */
@media (display-mode: standalone) {
  :root[data-theme="light"] .topbar, :root[data-theme="light"] .tut-top { background: linear-gradient(#2b2924, #2b2924) top / 100% env(safe-area-inset-top, 0px) no-repeat, rgb(var(--surface-rgb)); }
}
:root[data-theme="light"] .panel-title::before { box-shadow: none; border-radius: 0; width: 3px; }
:root[data-theme="light"] .logo { box-shadow: none; }
:root[data-theme="light"] * { text-shadow: none !important; }
:root[data-theme="light"] #dial { filter: drop-shadow(0 6px 16px rgba(var(--shadow-rgb), .14)); }
:root[data-theme="light"] .dial-pointer, :root[data-theme="light"] .dial-pointer.sit { filter: drop-shadow(0 2px 2px rgba(var(--shadow-rgb), .25)); }
:root[data-theme="light"] .p-house, :root[data-theme="light"] .he-house, :root[data-theme="light"] .p-door, :root[data-theme="light"] .dglyph .dg-leaf, :root[data-theme="light"] .dc-needle, :root[data-theme="light"] .d-lockdot, :root[data-theme="light"] .tabbar button.active svg, :root[data-theme="light"] .rp-w.sel, :root[data-theme="light"] .p-tick-big { filter: none; }
:root[data-theme="light"] .btn.primary { color: #fff; box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb), .55); }   /* 淺色的主要按鈕是深藍底：字要白 */
:root[data-theme="light"] .tabbar button.active { color: var(--accent); }
:root[data-theme="light"] .tabbar button.active::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--accent); }
:root[data-theme="light"] .d-ring { fill: rgba(var(--surface-rgb), .96); }
:root[data-theme="light"] .d-center { fill: var(--surface-solid); }
:root[data-theme="light"] .dg-itemt { fill: #0b0f18; }
:root[data-theme="light"] .ln-title, :root[data-theme="light"] .ln-h, :root[data-theme="light"] .bd-t, :root[data-theme="light"] .rp-sec { font-family: var(--serif); }
:root[data-theme="light"] mark { color: var(--ink-strong); background: var(--hl); box-shadow: none; }
:root[data-theme="light"] .p-photo.inv { filter: none; }

:root[data-theme="light"] .ln-fig { background: rgba(var(--surface-rgb), .95); border-color: var(--line); }
:root[data-theme="light"] .dg-wedge.a { fill: rgba(var(--accent-rgb), .045); } :root[data-theme="light"] .dg-wedge.b { fill: rgba(var(--accent2-rgb), .05); }
:root[data-theme="light"] .dg-cell.n { fill: rgba(var(--surface-rgb), .9); }
/* 五行色：木青、火朱、土黃土、金灰金、水藍 */
.wx { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; font-weight: 800; font-size: .95em; }
.wx-木 { color: #2f9e62; background: rgba(47, 158, 98, .14); } .wx-火 { color: #e2553f; background: rgba(226, 85, 63, .14); }
.wx-土 { color: #b07b2c; background: rgba(176, 123, 44, .16); } .wx-金 { color: #8d8a7c; background: rgba(160, 150, 120, .2); }
.wx-水 { color: #3a7bd5; background: rgba(58, 123, 213, .14); }
:root:not([data-theme="light"]) .wx-金 { color: #d8cfa8; } :root:not([data-theme="light"]) .wx-水 { color: #6aa8ff; } :root:not([data-theme="light"]) .wx-土 { color: #e2b25f; }
/* 淺色版：選中的選項用藍染實色，一眼看得出選了哪個 */
:root[data-theme="light"] .seg button.on { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-theme="light"] .seg button.on small, :root[data-theme="light"] .bd-door button.on small { color: rgba(255, 255, 255, .82); }
:root[data-theme="light"] .ot-pr button.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }   /* 屋外環境選方向：淺色跟 .seg 選起來一樣是實心 */
:root[data-theme="light"] .floor-tabs button.on, :root[data-theme="light"] .lk-kinds button.on, :root[data-theme="light"] .chips button.on { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
:root[data-theme="light"] .floor-tabs button.on small { color: rgba(255, 255, 255, .82); }

/* ===== 平面圖：旋轉、長寬標註（10-28）===== */
.p-selo { pointer-events: none; }
.p-selo .p-hh-hit, .p-selo .p-handle { pointer-events: auto; }
.p-rot-hit { cursor: grab; } .p-rs-hit { cursor: nwse-resize; }
.p-dim-l { stroke: var(--accent); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.p-dim-t { fill: var(--accent); font-family: var(--mono); font-weight: 700; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: var(--bg); stroke-width: .28em; stroke-linejoin: round; }
.p-dim-t.big { fill: var(--ink-strong); }
.p-rot-l { stroke: var(--accent); stroke-width: 1.2px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.p-rot { fill: var(--panel-solid); stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.p-rot-i { fill: none; stroke: var(--accent); stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sel-dim { margin-left: 10px; font-family: var(--mono); font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--accent); letter-spacing: 0; }
.sel-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.sel-lbl { min-width: 2.6em; font-size: calc(13px * var(--fz)); color: var(--ink2); font-weight: 700; }
.sel-num { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fz)); color: var(--ink2); border: 1px solid var(--line2); border-radius: 12px; padding: 0 10px; background: rgba(var(--deep-rgb), .45); }
.sel-num input { width: 4.6em; border: 0; background: transparent; color: var(--ink-strong); font-size: calc(16px * var(--fz)); font-weight: 700; font-family: var(--mono); padding: 9px 0; text-align: right; }
.sel-num input:focus { outline: none; } .sel-num:focus-within { border-color: var(--accent); }
.sel-num i { font-style: normal; color: var(--ink3); }
.btn.sel-ic { padding: 8px 12px; font-size: calc(14px * var(--fz)); }
.sel-tip { margin: 10px 0 0; font-size: calc(12.5px * var(--fz)); line-height: 1.7; }
:root[data-theme="light"] .sel-num { background: #fff; }
/* 大門樣式的小圖示（寬度按鈕、樣式按鈕）：跟著按鈕文字的顏色，選到時也看得清楚 */
#doorWidthSeg button, #doorKindSeg button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.dmini { width: 40px; height: 34px; overflow: visible; }
.dmini .dg-frame, .dmini .dg-sill, .dmini .dg-leaf, .dmini .dg-swing, .dmini .dg-jamb { stroke: currentColor; }
.dmini .dg-sill { opacity: .45; }
.dmini .dg-leaf { filter: none; } .dmini .dg-swing { opacity: .8; } .dmini .dg-jamb { opacity: .75; }
.dmini .dg-fan { fill: currentColor; opacity: .22; }
/* 指北針 */
.nrose .nr-bezel { fill: none; stroke: rgba(var(--ink-rgb), .22); stroke-width: 1.6; }
.nrose .nr-ring { fill: var(--panel-solid); stroke: var(--ink3); stroke-width: 1.2; }
.nrose .nr-ring2 { fill: none; stroke: var(--line); stroke-width: 1; }
.nrose .nr-tk { stroke: var(--ink3); stroke-width: .8; } .nrose .nr-tk.m { stroke: var(--ink2); stroke-width: 1.3; }
.nrose .nr-n { fill: var(--bad); } .nrose .nr-n2 { fill: var(--bad); opacity: .62; }
.nrose .nr-s { fill: var(--ink3); opacity: .55; } .nrose .nr-s2 { fill: var(--ink3); opacity: .35; }
.nrose .nr-c { fill: var(--panel-solid); stroke: var(--ink2); stroke-width: 1; }
.nrose .nr-t { fill: var(--bad); font-weight: 800; text-anchor: middle; --vc: 1; letter-spacing: 0; }
/* 大門所在那一宮的標籤：粗一點的外框＋門的顏色，跟一般宮名標籤分得出來 */
.p-pill.door rect { stroke-width: 2.2; fill: var(--panel-solid); }
.p-pill.door text { fill: var(--ink-strong); }
/* 手機：底部設定面板打開時，提示訊息移到上方，不蓋住面板的按鈕；面板本身緊湊一點 */
@media (max-width: 899px) {
  body.sheet-open .toast { bottom: auto; top: calc(66px + env(safe-area-inset-top)); }
  .panel.sel { max-height: 44vh; padding-top: 12px; padding-bottom: 12px; }
  .panel.sel .sel-tip { font-size: calc(12px * var(--fz)); margin-top: 8px; }
  .panel.sel .sel-grp { margin-top: 8px; }
}
/* 八宮總表在手機上：星名、結論不要一字一行；家人那欄在八宮圖的細節卡裡已經有，窄螢幕收起來 */
@media (max-width: 520px) {
  .rp-table { table-layout: auto; }
  .rp-table th, .rp-table td { width: auto !important; padding: 9px 7px; }
  .rp-table th:nth-child(5), .rp-table td:nth-child(5) { display: none; }
  .rp-table td:nth-child(1), .rp-table td:nth-child(2), .rp-table td:nth-child(4), .rp-table th { white-space: nowrap; }
  .rp-table td { word-break: normal; }
}
.hr-steps { margin: 8px 0 4px; padding-left: 1.4em; line-height: 1.8; }
.hr-steps li { margin: 6px 0 10px; } .hr-steps li .btn { margin-top: 6px; }
.pc-door { fill: rgba(255, 45, 85, .25); stroke: #ff2d55; stroke-width: 3; vector-effect: non-scaling-stroke; }
.bd-warn { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid rgba(var(--warn-rgb), .45); font-size: calc(14px * var(--fz)); line-height: 1.7; color: var(--ink); }
.bd-warn .btn { margin-left: 6px; padding: 4px 10px; font-size: calc(13px * var(--fz)); }
@media (max-width: 899px) {
  .sel-num { padding: 0 8px; } .sel-num input { width: 3.4em; }
  .sel-grp { gap: 6px; } .sel-lbl { min-width: 2.2em; }
}
.samples li.empty { list-style: none; margin-left: -1.3em; }

/* 新手教學入口 */
.tut-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); margin: 0 0 12px; }
.tut-card b { display: block; font-size: calc(16px * var(--fz)); color: var(--ink-strong); }
.tut-card small { display: block; font-size: calc(13px * var(--fz)); color: var(--ink2); line-height: 1.6; margin-top: 2px; }
.tut-play { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.tut-play svg { width: 22px; height: 22px; fill: var(--on-color); }
.tut-tip { position: relative; margin-top: 12px; }
.tut-tip .tut-card { margin: 0; padding-right: 48px; }
.tut-tip .sel-x { top: 50%; transform: translateY(-50%); right: 8px; }
.p-center-t { fill: var(--accent2); text-anchor: middle; --vc: 1; font-weight: 700; pointer-events: none; opacity: .85; letter-spacing: .1em; }
/* 立體圖（娃娃屋） */
.dg-iso .i3-floor { fill: var(--panel-solid); stroke: var(--ink3); stroke-width: 1.5; }
.dg-iso .i3-cell { stroke: rgba(var(--line-rgb), .4); stroke-width: 1; }
.dg-iso .i3-cell.g { fill: rgba(var(--good-rgb), .2); } .dg-iso .i3-cell.b { fill: rgba(var(--bad-rgb), .17); } .dg-iso .i3-cell.n { fill: rgba(var(--surface-rgb), .85); }
.dg-iso .i3-cell.miss { fill: rgba(var(--bad-rgb), .05); stroke: var(--bad); stroke-dasharray: 4 3; }
.dg-iso .i3-cap { fill: var(--ink2); font-size: calc(15px * var(--fz)); font-weight: 600; text-anchor: start !important; }
.dg-iso .i3-miss { fill: var(--bad); font-size: calc(14px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3px; }
.dg-iso .i3-mark { fill: none; stroke: var(--warn); stroke-width: 3; stroke-linejoin: round; }
.dg-iso .i3-center { fill: rgba(var(--accent-rgb), .07); stroke: rgba(var(--accent-rgb), .45); stroke-dasharray: 4 3; }
.dg-iso .i3-wall { stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; }
.dg-iso .i3-wall.front { fill: rgba(var(--accent-rgb), .26); } .dg-iso .i3-wall.right { fill: rgba(var(--accent-rgb), .13); }
.dg-iso .i3-leaf { fill: rgba(var(--accent-rgb), .35); stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; }
.dg-iso .i3-curb { fill: rgba(var(--ink-rgb), .25); }
.dg-iso .i3-dotdoor { fill: var(--accent); }
.dg-iso .i3-gua { fill: var(--ink-strong); font-size: calc(28px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 4px; stroke-linejoin: round; }
.dg-iso .i3-star { font-size: calc(18px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3px; stroke-linejoin: round; }
.dg-iso .i3-star.g { fill: var(--good); } .dg-iso .i3-star.b { fill: var(--bad); }
.dg-iso .i3-house { fill: var(--accent); font-size: calc(22px * var(--fz)); font-weight: 900; text-anchor: middle; --vc: 1; }
.dg-iso .i3-box { stroke: rgba(var(--shadow-rgb), .45); stroke-width: 1; }
.dg-iso .i3-shade.a { fill: #000; opacity: .14; } .dg-iso .i3-shade.b { fill: #000; opacity: .28; }
.dg-iso .i3-item { fill: var(--ink-strong); font-size: calc(15px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3px; stroke-linejoin: round; }
.dg-iso .i3-arrow { fill: none; stroke-width: 3; stroke-linecap: round; } .dg-iso .i3-arrow.f { stroke: var(--bad); } .dg-iso .i3-arrow.b { stroke: var(--accent); }
.dg-iso .i3-ah.f { fill: var(--bad); } .dg-iso .i3-ah.b { fill: var(--accent); }
.dg-iso .i3-dir { font-size: calc(17px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3px; }
.dg-iso .i3-dir.f { fill: var(--bad); } .dg-iso .i3-dir.b { fill: var(--accent); }

/* ---------- 案例分頁（透天模擬、大樓模擬、好壞範例） ---------- */
.cs-mode { position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 5; margin: 8px 0 4px; background: rgb(var(--deep-rgb)); box-shadow: 0 0 0 8px var(--bg); }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.cs-grid > * { min-width: 0; }
.cs-grid { overflow-anchor: none; }   /* 模擬整區重畫時被按的按鈕由 keepPlace 留在原位；Chrome 的捲動錨點會再自己捲一次（大樓模擬實測多捲 4px），這一區不用它 */
@media (min-width: 960px) { .cs-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .cs-colB { position: sticky; top: 70px; } }
/* 模擬上面那一塊：羅盤旁邊放不下結果摘要（窄手機加大字，一行擠不到 7 個字）時，摘要排到羅盤下面，不折成一兩個字一行。
   羅盤靠上：拖羅盤時摘要變高變矮，羅盤不在手指下面上下跑；撐住（keepPlace 的 hold）多出來的高度也留在下面 */
.cs-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
.cs-dial { flex: 0 0 164px; width: 164px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cs-dial:active { cursor: grabbing; }
@media (min-width: 600px) { .cs-dial { flex-basis: 184px; width: 184px; } }
.cs-dialsvg { display: block; width: 100%; height: auto; }
.cd-bez { fill: var(--panel-solid); stroke: var(--line2); stroke-width: 2; }
.cd-ring { fill: rgba(var(--surface2-rgb), .7); stroke: var(--line); }
.cd-w.a { fill: rgba(var(--accent-rgb), .10); } .cd-w.b { fill: rgba(var(--accent-rgb), .04); }
.cd-g { font-size: calc(17px * var(--fz)); font-weight: 800; fill: var(--ink-strong); text-anchor: middle; --vc: 1; }
.cd-m { font-size: calc(12.5px * var(--fz)); fill: var(--ink2); text-anchor: middle; --vc: 1; }
.cd-t { stroke: var(--line2); stroke-width: 1; }
.cd-n { font-size: calc(11px * var(--fz)); font-weight: 800; fill: var(--bad); text-anchor: middle; --vc: 1; }
.cd-ptr { fill: var(--bad); }
.cd-c { fill: var(--panel-solid); stroke: var(--accent); stroke-width: 1.5; }
.cd-v { font-size: calc(17px * var(--fz)); font-weight: 800; fill: var(--accent); text-anchor: middle; --vc: 1; }
.cd-d { font-size: calc(13px * var(--fz)); font-family: var(--mono); fill: var(--ink2); text-anchor: middle; --vc: 1; }
.cs-sum { flex: 1 1 7em; min-width: 0; display: grid; gap: 4px; font-size: calc(14px * var(--fz)); }
.cs-zhai { font-size: calc(28px * var(--fz)); font-weight: 900; letter-spacing: .06em; color: var(--accent); line-height: 1.1; }
.cs-sl { font-size: calc(14px * var(--fz)); color: var(--ink2); line-height: 1.5; }
.cs-sl b.gm, .cs-hl b.gm { color: var(--ink-strong); }
.cs b.st.g { color: var(--good); } .cs b.st.b { color: var(--bad); } .cs b.st.w { color: var(--warn); }
.cs-fv { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cs-fv span { font-size: calc(12px * var(--fz)); font-weight: 800; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); }
.cs .good, .cs-fv .good { color: var(--good); } .cs .warn { color: var(--warn); } .cs .bad { color: var(--bad); }
.cs-fv span.good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .4); } .cs-fv span.warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .45); } .cs-fv span.bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .4); }
/* 模擬的微調：在方向框裡 24 山按鈕上面 */
.cs-nudge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.cs-nudge button { min-height: 40px; border: 1px solid var(--line2); background: transparent; border-radius: 10px; padding: 4px 6px; font-size: calc(13px * var(--fz)); font-family: var(--mono); color: var(--ink2); }
.cs-note { margin: 8px 0 0; font-size: calc(13px * var(--fz)); color: var(--warn); }
.cs-doorrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cs-doorrow > span:first-child { font-size: calc(13px * var(--fz)); color: var(--ink2); }
.cs-doorseg { flex: 1 1 220px; margin: 0; }
.cs-doorseg button small { display: block; font-size: calc(11px * var(--fz)); color: var(--ink3); }
.cs-top .cs-set { margin-top: 8px; }   /* 模擬的房子條件：跟吉凶案例「改條件」同一種收成一行的框（.cs-filters） */
.cs-form { display: grid; gap: 6px; margin-top: 8px; }
.cs-fr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-fr > span:first-child { flex: 0 0 64px; font-size: calc(13px * var(--fz)); color: var(--ink2); }
.cs-fr .seg { flex: 1 1 180px; margin: 0; }
.cs-fr .seg button { padding: 9px 4px; font-size: calc(14px * var(--fz)); }
.cs-step { display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.cs-step button { border: 0; background: transparent; width: 34px; height: 36px; font-size: calc(18px * var(--fz)); color: var(--accent); }
.cs-step button:disabled { opacity: .3; }
.cs-step b { min-width: 26px; text-align: center; font-family: var(--mono); }
.cs-area { width: 96px; font-size: calc(16px * var(--fz)); padding: 8px 10px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(var(--deep-rgb), .5); color: var(--ink); }
.cs-dimnote { margin: 2px 0 0; }
.cs-floors { margin: 0 0 8px; }
.cs-floors button small { display: block; font-size: calc(11px * var(--fz)); font-weight: 800; }
/* 手機上模擬的大門位置、樓層排成一行（小字接在後面），平面圖才排得進第一個畫面；放不下時小字自己換到下一行。
   小字的寬度撐成最長的那一種（門位「跨」加兩個字、樓層「注意」）：看不見的同樣字數撐寬，換方向時小字換了，換不換行還是一樣，這兩列的高度不跟著方向變 */
@media (max-width: 959px) {
  .cs-doorseg button, .cs-floors button { padding: 9px 4px; }
  .cs-doorseg button { padding-inline: 2px; }   /* 三個門位在 360 寬也排得成一行 */
  .cs-doorseg button small, .cs-floors button small { display: inline-block; margin-left: 3px; text-align: left; }
  .cs-doorseg button small::before, .cs-floors button small::before { display: block; height: 0; overflow: hidden; visibility: hidden; }
  .cs-doorseg button small::before { content: "跨亥壬"; }
  .cs-floors button small::before { content: "注意"; }
  .cs-floors button { font-variant-numeric: tabular-nums; }   /* 1F–5F 一樣寬：同一排要換行就一起換 */
}
.cs-planwrap { position: relative; }
.cs-plan { display: block; width: 100%; height: auto; max-height: 72vh; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.cs-plan * { vector-effect: non-scaling-stroke; }
/* 牆的厚度照實際比例（公尺）：隔間牆 10 公分、外牆 18 公分；門片、開門弧線是細線 */
.cs-plan .cs-iw { fill: none; stroke: rgba(var(--ink-rgb), .82); stroke-width: .1; vector-effect: none; }
.cs-plan .cs-ow { fill: none; stroke: rgba(var(--ink-rgb), .9); stroke-width: .2; vector-effect: none; pointer-events: none; }
.cs-plan .cs-dgap { stroke: var(--panel-solid); stroke-width: .14; vector-effect: none; }
.cs-plan .cs-dleaf { fill: none; stroke: rgba(var(--ink-rgb), .7); stroke-width: 1px; }
.cs-plan .cs-ns { fill: rgba(var(--surface-rgb), .5); stroke: rgba(var(--ink-rgb), .38); stroke-width: .9px; }
.cs-floor { fill: var(--panel-solid); }
.cs-sec { stroke: none; } .cs-sec.g { fill: rgba(var(--good-rgb), .20); } .cs-sec.b { fill: rgba(var(--bad-rgb), .15); }
.cs-sec.qx { stroke: rgba(var(--warn-rgb), .7); stroke-width: 1.2px; stroke-dasharray: 5 4; }
.cs-hall { fill: rgba(var(--surface-rgb), .25); }
.cs-hall.lv { fill: rgba(var(--surface-rgb), .55); }
.cs-hallt { fill: var(--ink3); text-anchor: middle; --vc: 1; font-weight: 700; pointer-events: none; }
.cs-doordot { fill: var(--accent); pointer-events: none; }
.cs-pill.door rect { stroke-width: 2px; }
.cs-room { stroke: var(--ink2); stroke-width: 1.6px; cursor: pointer; touch-action: pan-y; }
.cs-room.k-living { fill: rgba(var(--surface-rgb), .55); }
.cs-room.k-kitchen { fill: rgba(232, 150, 60, .42); }
.cs-room.k-bath { fill: rgba(70, 150, 230, .42); }
.cs-room.k-bed { fill: rgba(var(--surface-rgb), .62); }
.cs-room.k-stairs { fill: rgba(var(--ink-rgb), .14); }
.cs-room.k-garage { fill: rgba(var(--ink-rgb), .09); stroke-dasharray: 4 3; }
.cs-room.guess { stroke-dasharray: 4 3; }   /* 照設備抓的框，不是實際的牆 */
.cs-room.k-shelter { fill: rgba(var(--ink-rgb), .16); }
.garage-box { align-self: flex-end; max-width: 100%; }
.garage-box small { display: block; color: var(--ink3); font-size: calc(12.5px * var(--fz)); }
.field .fl-note { display: block; color: var(--ink3); font-size: calc(12.5px * var(--fz)); font-weight: normal; max-width: 17em; }
.cs-room.sel { stroke: var(--accent); stroke-width: 3.5px; }
.cs-center { fill: none; stroke: var(--accent); stroke-width: 1.4px; stroke-dasharray: 6 4; pointer-events: none; }
.cs-ct { fill: var(--accent); text-anchor: middle; --vc: 1; font-weight: 800; pointer-events: none; }
.cs-wall { fill: none; stroke: var(--ink-strong); stroke-width: 3px; pointer-events: none; }
.cs-bbox { fill: none; stroke: var(--ink3); stroke-width: 1px; stroke-dasharray: 4 4; pointer-events: none; }
.cs-cutt { fill: var(--bad); text-anchor: middle; --vc: 1; font-weight: 800; }
.cs-obj { pointer-events: none; }
.cs-obj rect, .cs-obj line { fill: var(--panel-solid); stroke: var(--ink2); stroke-width: 1px; }
.cs-obj .cs-pillow { fill: rgba(var(--ink-rgb), .12); }
.cs-obj.stove circle { fill: none; stroke: var(--bad); stroke-width: 1px; }
.cs-obj .cs-mouth { fill: var(--bad); stroke: none; }
.cs-steps line { stroke: var(--ink3); stroke-width: 1px; pointer-events: none; }
.cs-gap { stroke: var(--panel-solid); stroke-width: 4px; pointer-events: none; }
.cs-swing { fill: none; stroke: var(--ink3); stroke-width: 1px; stroke-dasharray: 3 3; pointer-events: none; }
.cs-leaf { stroke: var(--ink2); stroke-width: 1.6px; pointer-events: none; }
.cs-doorhit { fill: transparent; cursor: grab; touch-action: none; }
.cs-lbl { pointer-events: none; }
.cs-lbl text { text-anchor: middle; --vc: 1; paint-order: stroke; stroke: var(--panel-solid); stroke-linejoin: round; vector-effect: none; }
.cs-rn { fill: var(--ink-strong); font-weight: 800; }
.cs-rs { font-weight: 800; } .cs-rs.g { fill: var(--good); } .cs-rs.b { fill: var(--bad); } .cs-rs.c { fill: var(--accent); }
.cs-rs.x { fill: var(--bad); text-decoration: underline; }
.cs-ra { fill: var(--ink3); font-family: var(--mono); }
.cs-pill rect { stroke-width: 1px; } .cs-pill.g rect { fill: var(--good-soft); stroke: rgba(var(--good-rgb), .5); } .cs-pill.b rect { fill: var(--bad-soft); stroke: rgba(var(--bad-rgb), .45); }
.cs-pill.qx rect { stroke: var(--warn); stroke-dasharray: 3 2; }
.cs-pill text { text-anchor: middle; --vc: 1; font-weight: 800; } .cs-pill.g text { fill: var(--good); } .cs-pill.b text { fill: var(--bad); }
.cs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: calc(12px * var(--fz)); color: var(--ink2); margin: 6px 0; }
.cs-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 2px; }
.cs-legend i.door { background: var(--door); border-radius: 2px 8px 2px 2px; } .cs-legend i.g { background: rgba(var(--good-rgb), .45); } .cs-legend i.b { background: rgba(var(--bad-rgb), .4); } .cs-legend i.qx { border: 1.5px dashed var(--warn); }
.cs-made { margin-left: auto; color: var(--accent); font-weight: 700; }
.cs-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-acts .btn { flex: 1 1 auto; }
.cs-acts .btn.ghost { flex: 0 0 auto; }
.cs-tip { margin: 8px 0 0; }
.cs-vd { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line2); }
.cs-vd b { font-size: calc(24px * var(--fz)); font-weight: 900; line-height: 1.3; }
.cs-vd span { font-size: calc(14px * var(--fz)); line-height: 1.7; color: var(--ink2); }
.cs-vd.good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .45); } .cs-vd.good b { color: var(--good); }
.cs-vd.warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .5); } .cs-vd.warn b { color: var(--warn); }
.cs-vd.bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .45); } .cs-vd.bad b { color: var(--bad); }
.cs-hl { margin: 10px 0 4px; font-size: calc(14px * var(--fz)); line-height: 1.7; color: var(--ink2); }
.cs-fl { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: csf; display: grid; gap: 6px; }
.cs-fl li { counter-increment: csf; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--surface-rgb), .5); }
.cs-fl summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 9px 10px; font-size: calc(14.5px * var(--fz)); line-height: 1.5; }
.cs-fl summary::-webkit-details-marker { display: none; }
.cs-fl summary::before { content: counter(csf); flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: calc(12px * var(--fz)); font-weight: 800; background: rgba(var(--ink-rgb), .1); color: var(--ink2); align-self: center; }
.cs-fl summary i { font-style: normal; font-size: calc(12px * var(--fz)); font-weight: 800; padding: 1px 7px; border-radius: 999px; white-space: nowrap; align-self: center; }
.cs-fl li.bad summary i { background: var(--bad-soft); color: var(--bad); } .cs-fl li.warn summary i { background: var(--warn-soft); color: var(--warn); } .cs-fl li.good summary i { background: var(--good-soft); color: var(--good); }
.cs-fl li.bad { border-color: rgba(var(--bad-rgb), .35); }
.cs-fl p { margin: 0; padding: 0 12px 10px 40px; font-size: calc(14px * var(--fz)); line-height: 1.75; color: var(--ink2); }
.cs-sug { margin-top: 12px; display: grid; gap: 6px; }
.cs-sugt { font-size: calc(13px * var(--fz)); font-weight: 800; color: var(--accent); }
.cs-sugb { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .07); border-radius: 12px; padding: 10px 12px; font-size: calc(14.5px * var(--fz)); color: var(--ink); }
.cs-sugb b { font-size: calc(13px * var(--fz)); white-space: nowrap; }
.cs-sugnone { margin-top: 10px; }
/* 大樓：整棟立面 */
.cs-elev { display: grid; gap: 3px; margin-top: 8px; }
.ce-row { display: grid; grid-template-columns: 38px 52px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 4px; align-items: stretch; }
.ce-roof span { font-size: calc(12px * var(--fz)); color: var(--ink3); text-align: center; }
.ce-f { font-family: var(--mono); font-size: calc(12px * var(--fz)); color: var(--ink2); align-self: center; text-align: right; }
.ce-h { font-size: calc(13px * var(--fz)); font-weight: 800; text-align: center; align-self: center; border-radius: 8px; padding: 4px 0; }
.ce-row.c0 .ce-h { background: rgba(var(--accent-rgb), .14); } .ce-row.c1 .ce-h { background: rgba(var(--accent2-rgb), .16); } .ce-row.c2 .ce-h { background: rgba(var(--warn-rgb), .16); } .ce-row.c4 .ce-h { background: rgba(var(--bad-rgb), .12); }
.ce-core { background: rgba(var(--ink-rgb), .12); border-radius: 3px; }
.ce-u { border: 1px solid var(--line2); border-radius: 8px; padding: 4px 6px; display: flex; justify-content: space-between; align-items: center; gap: 4px; background: rgba(var(--surface-rgb), .6); min-height: 34px; }
.ce-u b { font-size: calc(14px * var(--fz)); } .ce-u small { font-size: calc(11px * var(--fz)); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-u.good { background: var(--good-soft); border-color: rgba(var(--good-rgb), .45); } .ce-u.good b { color: var(--good); }
.ce-u.warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .5); } .ce-u.warn b { color: var(--warn); }
.ce-u.bad { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .45); } .ce-u.bad b { color: var(--bad); }
.ce-u.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.ce-lobby .ce-lb { grid-column: 3 / 6; text-align: center; font-size: calc(12px * var(--fz)); color: var(--ink3); border: 1px dashed var(--line2); border-radius: 8px; padding: 6px; }
.cs-plate { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; align-items: stretch; margin-bottom: 10px; }
.cs-pu { border: 1px solid var(--line2); border-radius: 12px; background: transparent; padding: 4px; display: grid; gap: 2px; text-align: center; font-size: calc(13px * var(--fz)); color: var(--ink2); }
.cs-pu.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cs-pu svg.thumb { max-height: 140px; }
.cs-coreb { display: grid; place-items: center; text-align: center; font-size: calc(11px * var(--fz)); color: var(--ink3); background: rgba(var(--ink-rgb), .08); border-radius: 8px; line-height: 1.4; }
/* 好壞範例 */
.cs-how { margin: -2px 0 10px; }
.cs-how summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: calc(14px * var(--fz)); padding: 9px 0; min-height: 40px; box-sizing: border-box; }   /* 吉凶案例開頭的說明也收在這裡：按得到 */
.cs-how p { margin: 6px 0 0; }
@media (min-width: 900px) {  }
.cs-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cs-card h3 { margin: 0 0 6px; font-size: calc(17px * var(--fz)); line-height: 1.45; }
.cs-card > p { margin: 0 0 10px; font-size: calc(14px * var(--fz)); line-height: 1.75; color: var(--ink2); }
.cs-badge { display: inline-block; font-size: calc(13px * var(--fz)); font-weight: 800; padding: 2px 10px; border-radius: 999px; }
.cs-badge.good { background: var(--good-soft); color: var(--good); } .cs-badge.warn { background: var(--warn-soft); color: var(--warn); } .cs-badge.bad { background: var(--bad-soft); color: var(--bad); }
/* 家具 */
.cs-f { fill: var(--panel-solid); stroke: var(--ink3); stroke-width: 1px; pointer-events: none; }
.cs-auto { opacity: .4; }
.cs-f.sofa { fill: rgba(var(--ink-rgb), .08); }
.cs-f.tv { fill: rgba(var(--ink-rgb), .2); }
.cs-f.counter { fill: rgba(var(--ink-rgb), .06); }
.cs-f.sink { fill: rgba(70, 150, 230, .25); }
.cs-f.basin { fill: rgba(70, 150, 230, .18); }
.cs-f.shower { fill: none; stroke-dasharray: 3 2; }
.cs-f.wardrobe { fill: rgba(var(--ink-rgb), .07); }
.cs-obj.dining rect { fill: var(--panel-solid); stroke: var(--ink2); }
.cs-obj .cs-chair { fill: rgba(var(--ink-rgb), .1); stroke: var(--ink3); }

/* ---------- 新手教學（App 裡的全螢幕面板；樣式原本在 tutorial.html） ---------- */
.tut-layer { position: fixed; inset: 0; z-index: 60; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
body.tut-open { overflow: hidden; }
body.tut-open .tabbar { display: none; }
.tut-top .tut-back, .tut-foot .tut-go { border: 0; background: none; font: inherit; cursor: pointer; }
.tut-foot .tut-go { font-size: calc(16px * var(--fz)); }

  .tut-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgb(var(--deep-rgb)); border-bottom: 1px solid var(--line); }
  .tut-top .tut-back { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
  /* 標題一行：窄手機、大字放不下就縮字、再放不下才用…（原本只有看屋比較、所有房子、地圖這樣，新手教學 320 寬大字會折成兩行） */
  .tut-top h1 { margin: 0; font-size: min(calc(18px * var(--fz)), 5.6vw); font-weight: 800; letter-spacing: .06em; flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tut-top .sp { width: 72px; }
  /* 看屋比較、所有房子、地圖：左上角的「回 App」至少 40 高；標題一行（窄手機、大字照畫面寬縮小），頁首不長高。看屋比較、所有房子的頁首上下空白收一點 */
  .cmp-layer .tut-back, .hs-layer .tut-back, .mc-layer .tut-back { min-height: 40px; padding: 0 4px; }
  .cmp-layer .tut-top, .hs-layer .tut-top { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .tut { max-width: 1120px; margin: 0 auto; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tut > * { min-width: 0; }   /* 章節列很長，不能把欄位撐寬（手機上整頁會變寬、舞台看不到） */
  @media (min-width: 960px) { .tut { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
  .tut-stage-wrap { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); background: var(--panel-solid); box-shadow: 0 12px 34px rgba(var(--shadow-rgb), .18); max-width: min(100%, 76vh); margin: 0 auto; width: 100%; }
  #tutStage { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .tut-cover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(var(--deep-rgb), .55); }
  .tut-cover button { display: grid; justify-items: center; gap: 10px; border: 0; background: var(--accent); color: var(--on-color); padding: 22px 30px; border-radius: 22px; font-size: calc(20px * var(--fz)); font-weight: 800; box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .3); }
  .tut-cover button svg { width: 54px; height: 54px; fill: var(--on-color); }
  .tut-cover small { font-size: calc(14px * var(--fz)); font-weight: 600; opacity: .9; }
  .tut-cover { align-content: center; gap: 12px; }
  .tut-cover .tut-resume { display: block; padding: 12px 22px; font-size: calc(16px * var(--fz)); font-weight: 700; background: var(--panel-solid); color: var(--accent); border-radius: 14px; }
  .tut-cover .tut-resume[hidden] { display: none; }
  .tut-rate { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; max-width: min(100%, 76vh); margin: 8px auto 0; font-size: calc(13px * var(--fz)); color: var(--ink2); }
  .tut-rate button { min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel-solid); color: var(--ink); font-size: calc(13px * var(--fz)); }
  .tut-rate button.on { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
  .tut-sub { min-height: 3.6em; margin: 12px auto 4px; max-width: 40em; text-align: center; font-size: calc(19px * var(--fz)); line-height: 1.75; font-weight: 600; color: var(--ink-strong); }
  .tut-ctl { display: flex; align-items: center; gap: 10px; max-width: min(100%, 76vh); margin: 0 auto; }
  .tut-ctl button { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel-solid); display: grid; place-items: center; }
  .tut-ctl button svg { width: 22px; height: 22px; fill: var(--ink); }
  #tutPlay { width: 58px; height: 58px; background: var(--accent); border-color: var(--accent); }
  #tutPlay svg { fill: var(--on-color); width: 26px; height: 26px; }
  #tutPlay .ic-pause { display: none; } #tutPlay.on .ic-pause { display: block; } #tutPlay.on .ic-play { display: none; }
  .tut-ctl input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
  #tutTime { font-family: var(--mono); font-size: calc(13px * var(--fz)); color: var(--ink2); white-space: nowrap; }
  .tut-meta { display: flex; justify-content: space-between; gap: 10px; max-width: min(100%, 76vh); margin: 8px auto 0; font-size: calc(14px * var(--fz)); color: var(--ink2); }
  #tutTitle { font-weight: 700; color: var(--accent); }
  #tutNote { color: var(--warn); }
  .tut-side h2 { font-size: calc(15px * var(--fz)); margin: 0 0 8px; color: var(--ink2); letter-spacing: .08em; }
  #tutChapters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  @media (min-width: 960px) { #tutChapters { flex-direction: column; overflow: visible; } }
  #tutChapters button { flex: 0 0 auto; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line2); background: var(--panel-solid); border-radius: 14px; padding: 10px 12px; font-size: calc(15px * var(--fz)); color: var(--ink); min-width: 200px; }
  #tutChapters button b { font-family: var(--mono); color: var(--ink3); }
  #tutChapters button small { font-family: var(--mono); color: var(--ink3); font-size: calc(12px * var(--fz)); }
  #tutChapters button.on { border-color: var(--accent); background: var(--accent); color: var(--on-color); }
  #tutChapters button.on b, #tutChapters button.on small { color: var(--on-color); opacity: .8; }
  .tut-foot { max-width: min(100%, 76vh); margin: 18px auto 0; text-align: center; }
  .tut-foot .tut-go { display: inline-block; padding: 14px 22px; border-radius: 16px; background: var(--accent); color: var(--on-color); font-weight: 800; text-decoration: none; }

/* ---------- App 使用導覽 ---------- */
.tour-layer { position: fixed; inset: 0; z-index: 70; }
.tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .58); outline: 3px solid var(--accent); outline-offset: 0; transition: all .25s ease; pointer-events: none; }
.tour-card { position: fixed; background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line2); border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); transition: top .25s ease, left .25s ease; }
.tour-card b { display: block; font-size: calc(18px * var(--fz)); margin: 2px 0 6px; color: var(--ink-strong); }
.tour-card p { margin: 0 0 12px; font-size: calc(15px * var(--fz)); line-height: 1.75; color: var(--ink2); }
.tour-n { font-size: calc(12px * var(--fz)); font-family: var(--mono); color: var(--accent); }
.tour-btns { display: flex; align-items: center; gap: 8px; }
.tour-btns span { flex: 1; }
.tour-btns .btn { padding: 9px 14px; font-size: calc(14px * var(--fz)); }
body.tour-open .toast { z-index: 80; }
.tour-link { display: block; margin-top: 8px; font-size: calc(14px * var(--fz)); color: var(--accent); font-weight: 700; text-decoration: none; }
.tour-card-link .tut-play svg { fill: none; color: var(--on-color); }

/* ===== 3D 看屋（js/view3d.js）：全螢幕，可以轉、放大、走進屋內 ===== */
body.v3d-open { overflow: hidden; }
.v3d { position: fixed; inset: 0; z-index: 65; background: radial-gradient(120% 80% at 50% 0%, #2a3c5c 0%, #142034 55%, #0b1322 100%); touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }
.v3d.light { background: radial-gradient(120% 80% at 50% 0%, #fdfdfb 0%, #e6edf3 55%, #d5dfe8 100%); }
.v3d[hidden] { display: none; }
.v3d-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.v3d-cv:active { cursor: grabbing; }
.v3d-lbls { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.v3l { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; font-weight: 800; line-height: 1.25; text-align: center; will-change: transform; }
.v3l[hidden] { display: none; }
.v3l.pal { font-size: calc(15px * var(--fz)); padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #1d2733; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.v3l.pal b { font-size: calc(18px * var(--fz)); margin-right: 4px; color: #1d2733; }
.v3l.pal.g { color: #0d7a4c; border: 2px solid #2fd08a; } .v3l.pal.b { color: #b4233f; border: 2px solid #ff5f78; }
.v3l.palo { font-size: calc(13px * var(--fz)); padding: 2px 8px; border-radius: 999px; background: rgba(20, 30, 46, .82); color: #fff; }
.v3l.palo.g { box-shadow: inset 0 0 0 2px #2fd08a; } .v3l.palo.b { box-shadow: inset 0 0 0 2px #ff5f78; }
.v3l.palo.door { background: #ffad33; color: #241500; font-size: calc(14px * var(--fz)); }
.v3l.room { font-size: calc(14px * var(--fz)); padding: 3px 9px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #1d2733; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
.v3l.room small { display: block; font-size: calc(12.5px * var(--fz)); font-weight: 800; }
.v3l.room small.g { color: #0d7a4c; } .v3l.room small.b { color: #b4233f; } .v3l.room small.c { color: #4b5fae; }
.v3l.furn { font-size: calc(12.5px * var(--fz)); padding: 1px 7px; border-radius: 6px; background: rgba(36, 44, 56, .78); color: #fff; }
.v3l.furn.hot { background: #e86a2c; }
.v3l.dir { font-size: calc(14px * var(--fz)); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 8px rgba(0, 0, 0, .5); }
.v3l.dir.f { color: #ffd0d8; } .v3l.dir.b { color: #cfe0ff; }
.v3l.n { font-size: calc(18px * var(--fz)); color: #ff5c7a; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.v3l.house { font-size: calc(20px * var(--fz)); color: #1d2733; background: rgba(255, 255, 255, .85); padding: 2px 10px; border-radius: 10px; }
.v3d.light .v3l.dir { color: #3a4553; text-shadow: 0 1px 2px rgba(255, 255, 255, .9); } .v3d.light .v3l.dir.f { color: #b4233f; } .v3d.light .v3l.dir.b { color: #2b55b8; }
.v3d-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: linear-gradient(rgba(8, 14, 24, .78), rgba(8, 14, 24, 0)); color: #fff; pointer-events: none; }
.v3d.light .v3d-top { background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); color: #1d2733; }
.v3d-top > * { pointer-events: auto; }
.v3d-x { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: inherit; font-size: calc(20px * var(--fz)); font-weight: 800; flex: none; }
.v3d.light .v3d-x { background: rgba(0, 0, 0, .08); }
.v3d-tt { flex: 1; min-width: 0; line-height: 1.3; pointer-events: none; }
.v3d-tt b { display: block; font-size: calc(17px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-tt small { display: block; font-size: calc(13px * var(--fz)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-rose { width: 50px; height: 50px; padding: 0; border: 0; background: none; flex: none; }
.v3d-rose[hidden] { display: none; }
.v3d-rose svg { width: 100%; height: 100%; }
.v3d-rose circle { fill: rgba(255, 255, 255, .92); stroke: rgba(0, 0, 0, .2); }
.v3d-rose .n { fill: #ff5c7a; } .v3d-rose .s { fill: #8a96a8; }
.v3d-rose text { font-size: calc(7px * var(--fz)); font-weight: 900; fill: #fff; text-anchor: middle; --vc: 1; }
.v3d-tabs { position: absolute; left: 50%; transform: translateX(-50%); top: calc(62px + env(safe-area-inset-top)); display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(10, 18, 30, .72); max-width: calc(100vw - 24px); overflow-x: auto; }
.v3d-tabs[hidden] { display: none; }
.v3d-tabs button { border: 0; border-radius: 999px; padding: 6px 14px; font-size: calc(15px * var(--fz)); font-weight: 800; background: transparent; color: #dfe8f5; white-space: nowrap; }
.v3d-tabs button.on { background: #fff; color: #142034; }
.v3d-tabs button.good { box-shadow: inset 0 -3px 0 #2fd08a; } .v3d-tabs button.bad { box-shadow: inset 0 -3px 0 #ff5f78; } .v3d-tabs button.warn { box-shadow: inset 0 -3px 0 #ffad33; }
.v3d-hud { position: absolute; left: 50%; transform: translateX(-50%); top: calc(112px + env(safe-area-inset-top)); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 7px 14px; border-radius: 14px; background: rgba(10, 18, 30, .78); color: #fff; font-size: calc(14.5px * var(--fz)); max-width: calc(100vw - 24px); pointer-events: none; }
.v3d-hud[hidden] { display: none; }
.v3d-hud b { font-weight: 900; color: #fff; } .v3d-hud b.g { color: #4be3a2; } .v3d-hud b.b { color: #ff8a9c; }
.v3d-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .97); color: #1d2733; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: calc(14px * var(--fz)); max-width: 260px; }
.v3d-tip[hidden] { display: none; }
.v3d-tip b { font-size: calc(17px * var(--fz)); color: #1d2733; } .v3d-tip b.g { color: #0d7a4c; } .v3d-tip b.b { color: #b4233f; }
.v3d-tip em { font-style: normal; color: #4a5566; }
.v3d-tip button { margin-top: 4px; border: 0; border-radius: 999px; padding: 6px 12px; background: #1f6fe5; color: #fff; font-weight: 800; font-size: calc(14px * var(--fz)); }
.v3d-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); padding: 7px 14px; border-radius: 999px; background: rgba(10, 18, 30, .78); color: #fff; font-size: calc(13.5px * var(--fz)); text-align: center; max-width: calc(100vw - 24px); pointer-events: none; transition: opacity .6s; }
.v3d-hint.out { opacity: 0; }
.v3d.walking .v3d-hint { bottom: calc(196px + env(safe-area-inset-bottom)); }
.v3d-pad { position: absolute; left: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px); gap: 6px; grid-template-areas: ". f ." "l b r"; }
.v3d-pad[hidden] { display: none; }
.v3d-pad button { border: 0; border-radius: 14px; background: rgba(10, 18, 30, .7); color: #fff; font-size: calc(22px * var(--fz)); font-weight: 900; touch-action: none; }
.v3d-pad button:active { background: rgba(31, 111, 229, .9); }
.v3d-pad [data-k='f'] { grid-area: f; } .v3d-pad [data-k='b'] { grid-area: b; } .v3d-pad [data-k='l'] { grid-area: l; } .v3d-pad [data-k='r'] { grid-area: r; }
.v3d-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(8, 14, 24, 0), rgba(8, 14, 24, .82)); }
.v3d.light .v3d-bar { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .92)); }
.v3d-mode { display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.v3d.light .v3d-mode { background: rgba(0, 0, 0, .08); }
.v3d-mode button { border: 0; border-radius: 999px; padding: 8px 14px; font-size: calc(15px * var(--fz)); font-weight: 800; background: transparent; color: #e8eef7; }
.v3d.light .v3d-mode button { color: #2a3646; }
.v3d-mode button.on { background: #1f6fe5; color: #fff; }
.v3d-b { border: 0; border-radius: 999px; padding: 8px 12px; font-size: calc(14.5px * var(--fz)); font-weight: 800; background: rgba(255, 255, 255, .16); color: #e8eef7; }
.v3d.light .v3d-b { background: rgba(0, 0, 0, .08); color: #2a3646; }
.v3d-b:disabled { opacity: .4; }
.v3d-err { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: #1d2733; font-size: calc(16px * var(--fz)); max-width: 300px; text-align: center; }
.v3d-err[hidden] { display: none; }
@media (max-width: 480px) {
  /* 手機：上面一列「外面看／走進屋內」，下面一列工具 */
  .v3d-bar { row-gap: 8px; }
  .v3d-mode { flex: 1 1 100%; max-width: 340px; justify-content: stretch; }
  .v3d-mode button { flex: 1; padding: 9px 10px; font-size: calc(15px * var(--fz)); }
  .v3d-b { padding: 7px 11px; font-size: calc(14px * var(--fz)); }
  .v3d-hint { bottom: calc(118px + env(safe-area-inset-bottom)); }
  .v3d.walking .v3d-hint { bottom: calc(238px + env(safe-area-inset-bottom)); }
  .v3d-pad { bottom: calc(116px + env(safe-area-inset-bottom)); }
}
/* 開 3D 的按鈕 */
.v3d-open-btn { display: inline-flex; align-items: center; gap: 6px; }
.dg-3dwrap { position: relative; cursor: pointer; }
.dg-3dwrap .dg-3dgo { display: block; margin: 6px auto 2px; border: 0; border-radius: 999px; padding: 8px 16px; font-size: calc(14.5px * var(--fz)); font-weight: 800; background: var(--grad-primary); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.v3l.miss { font-size: calc(15px * var(--fz)); padding: 3px 10px; border-radius: 999px; background: rgba(255, 92, 122, .92); color: #fff; }

/* ---------- 看屋比較（全螢幕，2–4 間並排） ---------- */
body.cmp-open, body.mc-open { overflow: hidden; }
body.cmp-open .tabbar, body.mc-open .tabbar { display: none; }
.cmp { max-width: 1120px; margin: 0 auto; padding: 12px 14px 0; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.cmp-chip { border: 1px solid var(--line2); background: rgba(var(--surface2-rgb), .7); border-radius: 999px; padding: 8px 14px; font-size: calc(15px * var(--fz)); color: var(--ink2); cursor: pointer; }
.cmp-chip.on { background: var(--grad-on); color: var(--ink-strong); border-color: var(--accent); }
.cmp-sum p { margin: 6px 0; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px -14px 0; padding: 0 14px 4px; }
table.cmp-t { border-collapse: separate; border-spacing: 0; width: 100%; font-size: calc(14px * var(--fz)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.cmp-t th, .cmp-t td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; min-width: 132px; }
.cmp-t tr:last-child > * { border-bottom: 0; }
.cmp-t .cmp-l { position: sticky; left: 0; z-index: 2; background: var(--panel-solid); min-width: 48px; width: 48px; color: var(--ink2); font-weight: 600; font-size: calc(12px * var(--fz)); border-right: 1px solid var(--line); }
.cmp-t small { display: block; color: var(--ink2); font-size: calc(12px * var(--fz)); margin-top: 2px; font-weight: 400; }
.cmp-t em { font-style: normal; font-weight: 700; margin-left: 4px; }
.cmp-head th { background: rgba(var(--surface2-rgb), .9); }
.cmp-name { display: block; font-size: calc(16px * var(--fz)); color: var(--ink-strong); margin-bottom: 6px; overflow-wrap: anywhere; }
.cmp-best { display: inline-block; font-size: calc(12px * var(--fz)); font-weight: 800; color: var(--on-color); background: var(--good); border-radius: 999px; padding: 1px 9px; margin-bottom: 4px; }
.cmp-todo { color: var(--warn); font-size: calc(13px * var(--fz)); margin: 6px 0 0; font-weight: 500; }
.cmp-map { width: 100%; max-width: 230px; max-height: 250px; display: block; }
.cmp-g { fill: var(--ink); font-size: calc(9px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; }
.cmp-s { font-size: calc(6.5px * var(--fz)); font-weight: 700; text-anchor: middle; --vc: 1; }
.cmp-s.g { fill: var(--good); } .cmp-s.b { fill: var(--bad); }
.cmp-hatch { stroke: rgba(var(--ink-rgb), .3); stroke-width: 1; }
.cmp-n { display: inline-block; margin: 0 10px 2px 0; font-size: calc(12px * var(--fz)); color: var(--ink2); white-space: nowrap; }
.cmp-n b { font-size: calc(17px * var(--fz)); margin-left: 2px; }
.cmp-n.bad b { color: var(--bad); } .cmp-n.warn b { color: var(--warn); } .cmp-n.good b { color: var(--good); }
.cmp-room { padding: 2px 0 2px 8px; border-left: 3px solid var(--line2); margin: 3px 0; }
.cmp-room.good { border-left-color: var(--good); } .cmp-room.warn { border-left-color: var(--warn); } .cmp-room.bad { border-left-color: var(--bad); }
.cmp-fl { font-size: calc(13px * var(--fz)); margin: 2px 0; }
@media (max-width: 480px) { .cmp-t th, .cmp-t td { min-width: 128px; padding: 8px 6px; } .cmp-t .cmp-l { min-width: 40px; width: 40px; } }
/* 看屋筆記的摘要（所有房子的卡片、看屋比較的「筆記」那一列同一份 HS.notesHtml）；看屋比較裡一行一項，寫筆記的按鈕至少 40 高 */
.nt-sum { display: block; overflow-wrap: anywhere; }
.nt-sum .nt-k { color: var(--ink3); font-size: calc(11.5px * var(--fz)); margin-right: 4px; letter-spacing: .04em; }
.nt-incmp .nt-i, .nt-incmp .nt-txt { display: block; margin: 1px 0; }
.nt-sum .nt-i.price { color: var(--ink-strong); font-weight: 700; }
.nt-sum .nt-txt { color: var(--ink2); font-size: calc(13px * var(--fz)); line-height: 1.55; }
.cmp-t .nt-go { display: block; min-height: 40px; margin-top: 6px; padding: 6px 12px; font-size: calc(13px * var(--fz)); }

/* ---------- 所有房子（全螢幕，一間一張卡；勾選只換顏色，下面那一條高度固定、換字不跳） ---------- */
body.houses-open { overflow: hidden; }   /* 所有房子開著（body 的 class 不跟卡片按鈕 .hs-open 同名） */
body.houses-open .tabbar { display: none; }
body.houses-open .toast, body.cmp-open .toast { z-index: 80; }   /* 蓋在上面的畫面裡也看得到提示（最多比四間） */
.hs { max-width: 1120px; margin: 0 auto; padding: 12px 14px 0; }
.hs-layer.has-bar .hs { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }   /* 最下面一張卡不被下面那一條蓋住 */
.hs-lead { margin: 4px 2px 0; }
.hs-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 2px 8px; font-size: calc(15px * var(--fz)); font-weight: 800; letter-spacing: .04em; color: var(--ink-strong); }
.hs-h span { flex: none; white-space: nowrap; font-size: calc(12px * var(--fz)); font-weight: 400; color: var(--ink2); letter-spacing: 0; }   /* 標題折兩行時「1 間」不拆成兩行 */
.hs-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 760px) { .hs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hs-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hs-card.cur { border-color: rgba(var(--accent-rgb), .55); }
.hs-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(var(--accent-rgb), .07); }
.hs-open { display: block; width: 100%; flex: 1 1 auto; text-align: left; border: 0; background: none; padding: 12px 66px 10px 14px; cursor: pointer; min-height: 72px; line-height: 1.55; }
.hs-open > span { display: block; }
.hs-name { font-size: calc(16px * var(--fz)); font-weight: 800; color: var(--ink-strong); overflow-wrap: anywhere; margin-bottom: 2px; }
.hs-name .tag { margin: 0 0 0 8px; }
.hs-l { font-size: calc(14px * var(--fz)); color: var(--ink); margin: 2px 0; overflow-wrap: anywhere; }
.hs-l small { color: var(--ink2); font-size: calc(12px * var(--fz)); margin-left: 4px; }
.hs-l em { font-style: normal; font-weight: 700; margin-left: 4px; }
.hs-k { display: inline-block; min-width: 2.6em; color: var(--ink3); font-size: calc(12px * var(--fz)); }
.hs-l .tag { vertical-align: 1px; }
.hs-todo { color: var(--warn); }
.hs-wait { color: var(--ink3); }   /* 還在算的那幾張（背景補上） */
.hs-note { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-top: 1px dashed var(--line2); background: rgba(var(--deep-rgb), .25); padding: 10px 14px; min-height: 48px; cursor: pointer; font-size: calc(14px * var(--fz)); line-height: 1.5; }
.hs-note .nt-sum { flex: 1 1 auto; min-width: 0; }
.hs-note .nt-i { margin-right: 10px; }
.hs-note .nt-txt { display: block; }
.nt-empty { flex: 1 1 auto; color: var(--accent); font-weight: 600; }
.hs-pen { flex: none; color: var(--accent); font-size: calc(16px * var(--fz)); }
.hs-pick { position: absolute; top: 6px; right: 6px; width: 56px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; cursor: pointer; font-size: calc(11.5px * var(--fz)); color: var(--ink2); }
/* 勾選框自己畫：Safari（iPhone）的原生勾選框不照設定的大小畫，只有十幾像素；勾起來只換底色、打勾 */
.hs-pick input { -webkit-appearance: none; appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border: 2px solid var(--ink3); border-radius: 7px; background: var(--panel-solid) center / 18px 18px no-repeat; cursor: pointer; }
.hs-pick input:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304121a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .hs-pick input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }   /* 淺色的主色是深藍：勾要白 */
.hs-pick input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-new { display: grid; gap: 2px; place-items: center; min-height: 56px; width: 100%; border: 1px dashed var(--line2); border-radius: var(--radius); background: transparent; color: var(--accent); font-weight: 700; font-size: calc(15px * var(--fz)); cursor: pointer; padding: 10px 14px; }
.hs-new small { font-weight: 400; color: var(--ink2); font-size: calc(12.5px * var(--fz)); }
.hs-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgb(var(--deep-rgb)); border-top: 1px solid var(--line); }
.hs-bar[hidden] { display: none; }
.hs-bar .btn { display: block; width: 100%; max-width: 560px; margin: 0 auto; min-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 看屋筆記對話框 */
.nt-what { margin: 0 0 6px; }
.nt-what small { display: block; color: var(--ink2); font-size: calc(12.5px * var(--fz)); }
.field textarea { font: inherit; font-size: calc(16px * var(--fz)); line-height: 1.55; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .6); color: var(--ink); width: 100%; resize: vertical; min-height: 7.5em; }
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
.nt-dlg .row .btn { min-height: 44px; min-width: 96px; }
.share-notes .check { min-height: 44px; align-items: center; border-bottom: 0; }

/* ---------- 報告頂端的分享、比較；分享連結 ---------- */
.rp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* 報告存成一張圖（js/sumimg.js）：預覽框的高度只看螢幕，不看圖畫好了沒有，產生前後下面的按鈕不跳；圖比框高就在框裡捲。
   矮的手機、大字放不下時只縮預覽框（最矮 120），標題、按鈕不用捲就看得到 */
.si-dlg { display: flex; flex-direction: column; max-height: calc(100vh - 2em - 8px); max-height: calc(100dvh - 2em - 8px); }
.si-dlg > * { flex: none; }
.si-dlg .si-pv { flex: 0 1 auto; min-height: 120px; height: min(54vh, 520px); overflow-y: auto; overscroll-behavior: contain; margin: 10px 0; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .5); display: grid; place-items: center; }
#sumImgDialog { overscroll-behavior: contain; }   /* 預覽框捲到底再捲，不帶動後面的報告（擋不住的關掉時放回原位，app.js） */
/* 好幾層的透天放哪一層：五層以內在 320 寬也一排放得下（層數再多才換行），每一顆至少 44 高；選起來只換顏色（.seg） */
.si-floors { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); margin: 4px 0 0; }
.si-floors button { padding: 6px 4px; min-height: 44px; line-height: 1.2; }
.si-floors button small { display: block; font-size: calc(11px * var(--fz)); }
.si-dlg > .hint { margin: 8px 0; }
.si-pv img { display: block; width: 100%; height: auto; align-self: start; }
.si-pv .hint { margin: 0; padding: 0 16px; text-align: center; }
.si-acts .btn { min-height: 44px; }
.share-link { width: 100%; font-size: calc(13px * var(--fz)); padding: 9px 10px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(var(--deep-rgb), .6); color: var(--ink2); margin: 8px 0; font-family: var(--mono); }
.paste-row { align-items: stretch; margin: 8px 0; }
.paste-row input { flex: 1; min-width: 0; font-size: calc(16px * var(--fz)); padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .6); color: var(--ink); }
.share-in-app { border: 1px dashed var(--line2); border-radius: 12px; padding: 4px 10px 10px; margin: 8px 0; }

/* ---------- 現場量床頭、爐口、馬桶方向 ---------- */
.ms-pic { width: 100%; max-width: 240px; display: block; margin: 4px auto; }
.ms-obj { fill: rgba(var(--surface2-rgb), .9); stroke: var(--line2); stroke-width: 1.5; }
.ms-obj2 { fill: rgba(var(--ink-rgb), .1); stroke: var(--line2); }
.ms-phone rect { fill: var(--panel-solid); stroke: var(--accent); stroke-width: 2; }
.ms-arrow { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ms-t { fill: var(--ink2); font-size: calc(12px * var(--fz)); }
.ms-read { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(var(--deep-rgb), .5); border: 1px solid var(--line); }
.ms-read #msDeg { font-size: calc(30px * var(--fz)); font-family: var(--mono); color: var(--ink-strong); }
.ms-read em { font-style: normal; font-weight: 800; }
.ms-read small { display: block; color: var(--ink2); }
.ms-warn { color: var(--warn); font-size: calc(13px * var(--fz)); min-height: 1em; margin: 6px 0; }
.ms-man { flex: 1 1 180px; }
.ms-go { width: 100%; margin-top: 8px; }
.ms-done { display: inline-block; margin-left: 8px; font-size: calc(11px * var(--fz)); color: var(--good); border: 1px solid rgba(var(--good-rgb), .4); border-radius: 999px; padding: 0 7px; }
.cmp-base { fill: var(--panel-solid); }
.cmp-map .rp-w { stroke-width: .5; cursor: default; }
.cmp-map .shape-out { stroke-width: 1.2; }
.ms-actions { margin-top: 14px; }

/* ---------- 拿手機指方向看宮位（全螢幕；圖跟著手機轉，手機指的方向朝上） ---------- */
.pt { max-width: 980px; margin: 0 auto; padding: 10px 14px 0; display: grid; gap: 4px; }
@media (min-width: 900px) { .pt { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 18px; } .pt-how { grid-column: 1 / -1; } }
.pt-how { color: var(--ink2); font-size: calc(14px * var(--fz)); margin: 4px 0; }
.pt-stage { min-width: 0; }
#ptSvg { touch-action: none; user-select: none; -webkit-user-select: none; }
.pt-svg { display: block; width: 100%; max-width: min(100%, 62vh); margin: 0 auto; }
.pt-ring { fill: none; stroke: var(--line2); stroke-width: .8; }
.pt-tick { stroke: var(--ink3); stroke-width: .6; }
.pt-dirbg { fill: var(--bg); }
.pt-dir { fill: var(--ink2); font-size: calc(6.5px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; }
.pt-dir.n { fill: var(--bad); }
.pt-w { cursor: pointer; transition: fill .2s; }
.pt-w.hit { fill: rgba(var(--accent-rgb), .3); stroke: var(--accent); stroke-width: 1.4; }
.pt-it { fill: rgba(var(--ink-rgb), .07); stroke: rgba(var(--ink-rgb), .45); stroke-width: .5; }
.pt-it.room { fill: none; stroke-dasharray: 2 1.2; }
.pt-mk { fill: var(--ink3); }
.pt-itl { fill: var(--ink2); font-size: calc(5px * var(--fz)); text-anchor: middle; --vc: 1; pointer-events: none; }
.pt-svg .cmp-g, .pt-svg .cmp-s { pointer-events: none; }
.pt-beam { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .8)); }
.pt-arrow { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; opacity: .7; }
.pt-me { fill: var(--accent); stroke: var(--panel-solid); stroke-width: 1.2; }
.pt-met { fill: var(--accent); font-size: calc(6px * var(--fz)); font-weight: 800; text-anchor: middle; --vc: 1; }
.pt-ctl { display: flex; justify-content: center; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.pt-read { margin-top: 6px; }
.pt-read p { margin: 6px 0; }
.pt-dirline { color: var(--ink2); font-size: calc(14px * var(--fz)); }
.pt-dirline b { color: var(--ink-strong); font-family: var(--mono); }
.pt-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 4px; }
.pt-big b { font-size: calc(30px * var(--fz)); color: var(--ink-strong); letter-spacing: .04em; }
.pt-big em { font-style: normal; font-size: calc(22px * var(--fz)); font-weight: 800; }
.pt-cut { color: var(--warn); font-size: calc(13px * var(--fz)); }
.pt-finds { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 6px; }
.pt-finds p { font-size: calc(14px * var(--fz)); }
.pt-fit { margin: 8px 0 2px; padding-left: 20px; font-size: calc(14px * var(--fz)); color: var(--ink); }
.pt-fit li { margin: 3px 0; }
.pt-fit .neg { color: var(--bad); }

/* ---------- 課程圖（三房兩衛的真實格局，跟案例同一套畫法） ---------- */
.cs-sec.n { fill: rgba(var(--muted-rgb), .07); }
.cs-pill.n rect { fill: var(--info-soft); stroke: var(--line2); } .cs-pill.n text { fill: var(--ink); }
.cs-pill .cs-pdir { font-weight: 600; opacity: .85; }
.cs-mark { fill: rgba(var(--accent-rgb), .1); stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 7 5; stroke-linejoin: round; opacity: .9; }
.cs-cap { fill: var(--ink2); font-weight: 600; }
.cs-x rect { stroke: rgba(var(--shadow-rgb), .35); stroke-width: 1px; opacity: .92; }
.cs-x text { fill: #10161f; text-anchor: middle; --vc: 1; font-weight: 800; }
.cs-obj.desk rect { fill: rgba(var(--ink-rgb), .1); stroke: var(--ink2); stroke-width: 1px; }
.cs-xt { fill: var(--ink2); text-anchor: middle; --vc: 1; font-weight: 700; pointer-events: none; }
.ln-fig .cs-plan { max-height: none; max-width: 560px; margin: 0 auto; }
.dg-snap { display: block; width: 100%; height: auto; aspect-ratio: 600 / 440; border-radius: 14px; background: rgba(var(--deep-rgb), .5); object-fit: cover; }
.cs-xt.d { fill: var(--accent); font-weight: 800; }

/* ---------- 名詞小卡：專有名詞點一下看白話解釋 ---------- */
.tm { border-bottom: 1.5px dotted rgba(var(--accent-rgb), .75); cursor: help; border-radius: 2px; }
.tm:hover, .tm:focus { background: rgba(var(--accent-rgb), .12); outline: none; }
.tmc { position: fixed; z-index: 80; background: var(--panel-solid); color: var(--ink); border: 1px solid var(--accent); border-radius: 14px; padding: 12px 14px 10px; box-shadow: 0 12px 34px rgba(var(--shadow-rgb), .45); font-size: calc(14.5px * var(--fz)); line-height: 1.65; }
.tmc p { margin: 6px 0; }
/* 名詞小卡、房子頁說明的小圖（terms.js fig）：線條、字跟著深色淺色 */
.tf { display: block; width: 100%; max-width: 280px; height: auto; margin: 8px auto 4px; overflow: visible; }
.tf-box { display: block; margin: 6px 0 2px; }
.tf-box[hidden] { display: none; }
.tf .w { fill: rgba(var(--surface2-rgb), .9); stroke: var(--ink2); stroke-width: 1.6; }
.tf .o { fill: none; stroke: var(--ink3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tf .x { fill: var(--bad-soft); stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tf .c { fill: var(--bad-soft); stroke: var(--ink2); stroke-width: 1.6; }
.tf .s1 { fill: rgba(var(--accent-rgb), .16); stroke: var(--line2); stroke-width: .8; }
.tf .s2 { fill: rgba(var(--accent2-rgb), .1); stroke: var(--line2); stroke-width: .8; }
.tf .dr { fill: var(--door); }
.tf .l { stroke: var(--ink3); stroke-width: 1.2; }
.tf .d { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 3; }
.tf .a, .tf .g.ah, .tf .b.ah, .tf .p.ah { stroke: var(--ink2); stroke-width: 1.6; fill: var(--ink2); }
.tf line.g { stroke: var(--good); stroke-width: 2; } .tf polygon.g.ah { fill: var(--good); stroke: var(--good); }
.tf line.b { stroke: var(--bad); stroke-width: 2; } .tf polygon.b.ah { fill: var(--bad); stroke: var(--bad); }
.tf line.p { stroke: var(--accent); stroke-width: 2; } .tf polygon.p.ah { fill: var(--accent); stroke: var(--accent); }
.tf circle.p { fill: var(--accent); }
.tf .ph { fill: var(--panel-solid); stroke: var(--accent); stroke-width: 1.6; }
.tf .rd { fill: none; stroke: var(--ink3); stroke-width: 7; stroke-linecap: round; opacity: .55; }
.tf .rd2 { fill: var(--ink3); opacity: .35; stroke: none; }
.tf text { font-size: 11px; fill: var(--ink); text-anchor: middle; font-weight: 600; }
.tf text.s { fill: var(--ink2); font-weight: 500; }
.tf text.g { fill: var(--good); } .tf text.b { fill: var(--bad); }
.tf text.t9 { font-size: 7.5px; fill: var(--ink2); font-weight: 500; } .tf text.t9b { font-size: 9px; fill: var(--ink); }
.tmc-h { display: block; font-size: calc(16px * var(--fz)); color: var(--ink-strong); padding-right: 26px; }
.tmc-h small { display: block; font-size: calc(12px * var(--fz)); font-weight: 500; color: var(--ink2); }
.tmc-w { color: var(--ink2); }
.tmc-e { background: rgba(var(--accent-rgb), .08); border-radius: 8px; padding: 6px 8px; }
.tmc-e i { font-style: normal; font-weight: 800; color: var(--accent); margin-right: 6px; }
.tmc-s { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tmc-s button { border: 1px solid var(--line2); background: transparent; color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: calc(13px * var(--fz)); cursor: pointer; }
.tmc-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--ink2); font-size: calc(22px * var(--fz)); line-height: 1; cursor: pointer; }

/* ---------- 一步一步看我家（新手引導） ---------- */
button.tut-card { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.guide-layer .tut-top h1 { letter-spacing: .04em; flex: 1 0 auto; overflow: visible; }   /* 看我家：標題短，不縮成…，讓右邊「第幾步」折成兩行 */
.guide-n { font-size: calc(13px * var(--fz)); color: var(--ink2); min-width: 0; text-align: right; line-height: 1.25; }
.guide-n span { white-space: nowrap; }
.guide-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; min-height: 10px; }
.guide-dots i { width: 34px; height: 5px; border-radius: 3px; background: rgba(var(--line-rgb), .25); }
.guide-dots i.done { background: rgba(var(--accent-rgb), .55); }
.guide-dots i.on { background: var(--accent); }
.guide-body { max-width: 620px; margin: 0 auto; padding: 8px 16px 24px; font-size: calc(15px * var(--fz)); line-height: 1.7; }
.guide-body h2 { font-size: calc(22px * var(--fz)); line-height: 1.4; margin: 14px 0 10px; color: var(--ink-strong); }
.guide-body h3.g-sub { font-size: calc(17px * var(--fz)); margin: 22px 0 8px; }
.g-lead { margin: 0 0 12px; color: var(--ink); }
.g-hero { display: flex; justify-content: center; margin-top: 10px; }
.g-hero .g-ico { width: 120px; height: 96px; }
.g-ico { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); }
.g-steps { list-style: none; counter-reset: gs; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
/* 四個步驟只是說明、不能點：畫成一條時間線（原本每一步一個框，看起來像按鈕，有人會去點） */
.g-steps li { counter-increment: gs; position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; padding: 6px 0; }
.g-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: calc(50% + 18px); height: calc(100% - 28px); width: 2px; background: var(--line2); }
.g-steps li::before { content: counter(gs); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--on-color); background: var(--accent); }
.g-steps b { font-size: calc(16px * var(--fz)); color: var(--ink-strong); }
.g-steps span { font-size: calc(13px * var(--fz)); color: var(--ink2); }
.g-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-choice.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(var(--deep-rgb), .45); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.g-card .g-ico { width: 72px; height: 58px; }
.g-card b { font-size: calc(17px * var(--fz)); color: var(--ink-strong); }
.g-card span { font-size: calc(13px * var(--fz)); color: var(--ink2); line-height: 1.45; }
.g-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--grad-on); }
.g-card:disabled { opacity: .4; cursor: not-allowed; }
.g-pic { width: 100%; max-width: 360px; display: block; margin: 4px auto 10px; }
.g-pic.sm { max-width: 110px; margin: 0 auto 4px; }
.gp-house { fill: rgba(var(--accent-rgb), .08); stroke: var(--line2); stroke-width: 1.5; }
.gp-door { stroke: var(--bad); stroke-width: 5; stroke-linecap: round; }
.gp-dim { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 3; }
.gp-me { fill: var(--accent); }
.gp-phone { fill: var(--ink-strong); stroke: var(--line2); }
.gp-arrow { fill: none; stroke: var(--bad); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gp-t { fill: var(--ink2); font-size: calc(13px * var(--fz)); text-anchor: middle; }
.gp-s { fill: var(--ink2); font-size: calc(12px * var(--fz)); }
.gp-acc { fill: var(--bad); font-weight: 700; }
.g-how { margin: 0 0 12px; padding-left: 22px; }
.g-how li { margin: 4px 0; }
.g-read { text-align: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(var(--deep-rgb), .5); }
.g-read small { color: var(--ink2); font-size: calc(13px * var(--fz)); }
.g-deg { font-family: var(--mono); font-size: calc(44px * var(--fz)); font-weight: 700; color: var(--ink-strong); line-height: 1.2; font-variant-numeric: tabular-nums; }
.g-dir { font-size: calc(15px * var(--fz)); color: var(--accent); }
.g-warn { font-size: calc(13px * var(--fz)); color: var(--warn); min-height: 0; }
.g-btns { margin-top: 10px; }
.g-btns .btn { flex: 1 1 0; padding: 13px 10px; }
.g-count { font-size: calc(14px * var(--fz)); color: var(--ink2); margin: 10px 0; }
.g-manual { margin-top: 6px; font-size: calc(14px * var(--fz)); }
.g-manual summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.g-manual .row { margin-top: 8px; }
.g-manual input { flex: 1 1 auto; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(var(--deep-rgb), .5); color: var(--ink); font-size: calc(16px * var(--fz)); }
.g-floor { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.g-floor span { color: var(--ink2); }
.g-floor .g-fl-n { display: inline-flex; align-items: center; gap: 4px; font-size: calc(20px * var(--fz)); font-weight: 700; color: var(--ink-strong); }
.g-floor .g-fl-n input { width: 3.2em; min-height: 44px; padding: 4px 2px; text-align: center; font: inherit; color: inherit; border: 1px solid var(--line2); border-radius: 10px; background: rgba(var(--deep-rgb), .6); -moz-appearance: textfield; }
.g-floor .g-fl-n input:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
.g-floor .g-fl-n input::-webkit-outer-spin-button, .g-floor .g-fl-n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.g-floor .btn { width: 46px; padding: 8px 0; font-size: calc(20px * var(--fz)); }
.g-res { position: relative; }
.g-badge { display: inline-block; padding: 2px 12px; border-radius: 999px; font-weight: 800; font-size: calc(14px * var(--fz)); background: rgba(var(--ink-rgb), .12); }
.v-good .g-badge { background: var(--good); color: var(--on-color); }
.v-bad .g-badge { background: var(--bad); color: var(--on-color); }
.v-warn .g-badge { background: var(--warn); color: var(--on-color); }
.g-big { font-size: calc(19px * var(--fz)); line-height: 1.55; margin: 8px 0; color: var(--ink-strong); }
.g-big b { color: var(--accent); }
.g-explain { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--info-soft); font-size: calc(14px * var(--fz)); }
.g-explain ul { margin: 6px 0 0; padding-left: 20px; }
.g-explain li { margin: 4px 0; }
.g-next { margin-top: 8px; }
.linkish { border: 0; background: none; padding: 0 0 0 6px; font: inherit; color: var(--accent); font-weight: 700; cursor: pointer; text-decoration: underline; }
.guide-foot { position: sticky; bottom: 0; z-index: 5; max-width: 620px; margin: 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgb(var(--deep-rgb)); border-top: 1px solid var(--line); }
.guide-foot .row .btn { flex: 1 1 0; padding: 14px; }
.guide-foot .row .btn[hidden] { display: none !important; }
/* 往下走的那一顆比「上一步」寬，最後一步的「下一步：把廚房、廁所、床放上去」放得下，窄手機、大字就折成兩行 */
.guide-foot .row #guideNext { flex-grow: 2; white-space: normal; line-height: 1.3; }
.guide-why { margin: 0 0 6px; font-size: calc(13px * var(--fz)); color: var(--warn); text-align: center; min-height: 0; }
.guide-why:empty { display: none; }
:root[data-theme="light"] .guide-foot { background: rgb(var(--surface-rgb)); }
/* 中庭大樓：兩種情況並排 */
.hrk-atr-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.hrk-atr-pics figure { margin: 0; }
.hrk-atr-pics svg { width: 100%; height: auto; display: block; }
.hrk-atr-pics figcaption { font-size: calc(12.5px * var(--fz)); color: var(--ink2); line-height: 1.45; text-align: center; margin-top: 2px; }
.hrk-atr { display: grid; gap: 6px; margin-top: 4px; }
.hrk-atr .btn { text-align: left; white-space: normal; }
.hrk-atr .btn.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--grad-on); color: var(--ink-strong); }
.guide-layer:not([hidden]) { display: flex; flex-direction: column; padding-bottom: 0; }
.guide-layer .guide-body { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.guide-layer .guide-foot { width: 100%; box-sizing: border-box; }
/* App 假設的格局：提示和確認後那一句疊在同一格，換內容高度不變，平面圖不跳 */
.plan-assumed { display: grid; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--ink3); background: var(--info-soft); font-size: calc(13px * var(--fz)); line-height: 1.5; color: var(--ink); }
.plan-assumed > * { grid-area: 1 / 1; min-width: 0; }
.pa-ask { display: flex; flex-direction: column; }   /* 提示條高度留著的時候字變少：按鈕還是在同一個位置 */
.pa-ask p { margin: 0 0 6px; text-align: justify; text-justify: inter-character; }
.pa-btns { display: flex; gap: 6px; margin-top: auto; }
.pa-btns .btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 8px; font-size: calc(13px * var(--fz)); white-space: normal; }
.pa-done { margin: 0; align-self: center; visibility: hidden; text-align: justify; text-justify: inter-character; }
.plan-assumed.done .pa-ask { visibility: hidden; }
.plan-assumed.done .pa-done { visibility: visible; }
.rp-basis { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.rp-basis p { margin: 0; text-align: justify; text-justify: inter-character; }
.rp-overall .rp-basis .tag { font-size: calc(11px * var(--fz)); line-height: 1.5; }
.fo-asm { display: block; font-size: calc(11.5px * var(--fz)); }
.rp-basis-go { align-self: flex-start; min-height: 40px; margin-top: 6px; padding: 6px 12px; font-size: calc(14px * var(--fz)); white-space: normal; }
.plan-start { margin: 8px 0 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); font-size: calc(14px * var(--fz)); line-height: 1.65; }
.plan-start ol { margin: 6px 0; padding-left: 20px; }
.plan-start .row { margin-top: 10px; }
.plan-start .row .btn { flex: 1 1 0; }

/* 上一頁（左上角）：有上一頁才出現；窄螢幕時把「後天派」小字讓出來 */
.nav-back { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 10px 0 6px; margin-right: 6px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), .45); background: var(--panel-solid); color: var(--accent); font: inherit; font-size: calc(14px * var(--fz)); font-weight: 700; cursor: pointer; white-space: nowrap; }
.nav-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-back:active { opacity: .7; }
.nav-back[hidden] { display: none; }
@media (max-width: 520px) { body.has-back .brand small { display: none; } }
@media print { .nav-back { display: none !important; } }
/* 報告：參考直接展開；這一組宅門的全部說法（跟學分頁同一套樣式） */
.ref-open { background: var(--ref-soft); border-radius: 10px; padding: 6px 10px; margin-top: 8px; }
.ref-open p { font-size: calc(14.5px * var(--fz)); line-height: 1.75; color: var(--ink); margin: 4px 0; }
.ref-open .ln-ref { margin: 0 6px 0 0; }
.rp-full { margin: 6px 0 4px; }
.rp-fullsec { margin: 14px 0 6px; padding: 14px 16px 6px; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--surface-rgb), .55); }
.rp-full-h { margin: 0 0 6px; font-size: calc(18px * var(--fz)); line-height: 1.5; color: var(--ink-strong); padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
.rp-fullsec .ln-p { font-size: calc(16px * var(--fz)); }
.rp-fullsec .ln-listb li { font-size: calc(15.5px * var(--fz)); }
@media (max-width: 520px) { .rp-fullsec { padding: 12px 12px 4px; } }

/* 方向權限被拒絕：留在量方向頁上的說明（不只閃過的提示） */
.perm-help { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(var(--warn-rgb), .5); background: var(--warn-soft); font-size: calc(14.5px * var(--fz)); line-height: 1.75; color: var(--ink); }
.perm-help[hidden] { display: none; }

/* 課文、報告裡的圖很多：還沒捲到的圖先不排版、不畫（瀏覽器支援才有作用；不支援的照舊）。auto 會記住畫過的真實高度，捲回來不會跳 */
.ln-fig { content-visibility: auto; contain-intrinsic-size: auto 560px; }

/* ---------- 10-28 外觀檢查後的修正（打開畫面逐頁看出來的） ---------- */
/* 連結跟著主題色，不用瀏覽器預設的亮藍 */
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:visited { color: var(--accent); }
/* 標題、短標籤換行時最後一行不要只剩一兩個字（「改）」「梯」掉到第二行）。中文不用 balance：它會從詞中間平均切開（「方｜向」） */
h1, h2, h3, summary, figcaption, .g-card span, .hrk-card span, .ln-title, .ln-h, .rp-full-h, .cmp-todo { text-wrap: pretty; }
/* 內文要填滿框（使用者 11-01：「刻意提早換行，而不是把框框填滿」）：pretty 為了最後一行不要太短，會把前面幾行提早折，內文不用它；
   再左右對齊，標點不能放行首造成的一個字空白也一起攤平。最後一行照常靠左 */
/* Chrome 預設的 text-spacing-trim 會壓全形標點，斷行跟著算錯（量到一行只放 7 個字就換行、右邊空 200 多 px）；標點照全形算才會填滿 */
html { text-spacing-trim: space-all; }
.f p, .verdict, .ln-p, .ln-listb li, .ln-note, .ln-exp li, .ref-open p, .rp-overall span, .cs-vd span, .an-p, .tmc p, .cs-fl p, .qr-sec p, .qr-sec li, .mc-l, .smp-mapl, .mc-ask-in li, .mc-about li, .ln-home-p, .ln-sug-w, .rp-top-t, .rp-ang-s { text-align: justify; text-justify: inter-character; }
/* 輸入框旁邊的按鈕：跟輸入框同高、底部對齊（欄位本身有 6px 下邊距） */
.field input, .field select { min-height: 46px; }
.row:has(> .field) > .btn { margin-bottom: 6px; min-height: 46px; }
/* 上一課／下一課：小字一行＋課名（可以兩行），不截斷 */
.ln-nav { align-items: stretch; }
.ln-nav .btn { flex: 1 1 0; max-width: none; overflow: visible; white-space: normal; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; line-height: 1.45; text-align: left; }
.ln-nav .btn small { font-size: calc(12px * var(--fz)); font-weight: 600; opacity: .8; }
.ln-nav .btn span { font-size: calc(15px * var(--fz)); font-weight: 700; }
.ln-nav .ln-next { text-align: right; align-items: flex-end; }
/* 加入物件：分類名稱一欄，按鈕換行後還是對齊第一顆按鈕 */
.pal-g { position: relative; padding-left: 70px; min-height: 40px; }
.pal-h { position: absolute; left: 0; top: 10px; width: 64px; }
/* 3D 小圖拍好之前：淡色底，不出現破圖 */
img.dg-snap:not(.ok) { background: rgba(var(--deep-rgb), .5); border-radius: 12px; }
/* 八卦圓盤圖：中宮圓圈蓋住輻射線 */
.dg-center { fill: var(--panel-solid); }
/* 看屋比較：左邊欄的名稱不斷行 */
.cmp-t .cmp-l { min-width: 62px; width: 62px; white-space: nowrap; }
/* 專案選單：動作按鈕兩欄一樣寬；刪除跟完成分在兩邊 */
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.dlg-sec { margin: 14px 0 0; font-size: calc(13px * var(--fz)); font-weight: 700; color: var(--ink2); letter-spacing: .04em; }   /* ⋯ 裡的分組小標題（這一間、所有房子、顯示、說明） */
.dlg-grid .btn { width: 100%; text-align: center; white-space: normal; display: flex; align-items: center; justify-content: center; }   /* 「從備份檔還原」是 label：跟旁邊的按鈕一樣字在正中間 */
.dlg-links { display: flex; flex-direction: column; align-items: flex-start; margin: 4px 0 8px; font-size: calc(15px * var(--fz)); }
.dlg-links > * { min-height: 40px; display: inline-flex; align-items: center; }   /* 說明那一組一行一個，手指好點 */
.dlg-links .linkish { padding: 0; font-weight: 400; }
.row.between { justify-content: space-between; align-items: center; }
/* 一小段文字不從中間斷行 */
.nw { white-space: nowrap; }
/* 標題旁的小說明：不跟著標題拉開字距 */
.panel-title .hint { letter-spacing: 0; }
/* 課文小標兩行時，菱形對齊第一行 */
.ln-h { align-items: flex-start; }
.ln-h::before { margin-top: .5em; }
.ln-nav > span:empty { flex: 1 1 0; }
/* 深色主題的房子外框光暈：SVG 裡的模糊半徑是用圖的單位（公尺）算的，會擴散很大；讓它畫到外框為止，別在圖的上緣被切成一條硬邊 */
#houseEd, #plan { overflow: visible; }
.lk-chips .ln-exmore { border: 1px dashed var(--line2); background: none; border-radius: 999px; padding: 6px 12px; color: var(--accent); font-weight: 700; }
.ln-nav .btn span { max-width: 100%; overflow-wrap: anywhere; }

/* 10-29：右上角「清除本頁」（橡皮擦＋字）；原本的 ↶ 復原看起來像勾勾、又跟上一頁搞混，復原搬進 ⋯ */
.reset-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 2px 0 1px; color: var(--ink); }
.reset-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reset-btn small { font-size: calc(10px * var(--fz)); line-height: 1.1; letter-spacing: .05em; color: var(--ink2); }
.reset-btn.dim { opacity: .4; }
/* 專案名稱：span 顯示（字太長加「…」），select 透明蓋在上面負責選 */
.psel { position: relative; display: flex; align-items: center; min-width: 0; max-width: 44vw; padding: 7px 26px 7px 10px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel-solid); cursor: pointer; }
.psel-i { flex: 0 0 15px; width: 15px; height: 15px; margin-right: 5px; fill: none; stroke: var(--ink2); stroke-width: 2; stroke-linejoin: round; }   /* 一看就知道這是「房子」 */
.g-name { margin: 0 0 14px; }
.psel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.psel::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid var(--ink2); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); pointer-events: none; }
.psel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; max-width: none; padding: 0; border: 0; cursor: pointer; font-size: calc(16px * var(--fz)); }
.psel:focus-within { outline: 2px solid rgba(var(--accent-rgb), .6); outline-offset: 1px; }
@media (max-width: 440px) { .psel { max-width: none; flex: 1 1 auto; padding: 7px 22px 7px 8px; } .psel::after { right: 8px; } .topbar:has(#navBack:not([hidden])) .psel-i { display: none; } }   /* 手機上有「上一頁」時讓出位置給房子名字 */
/* 首頁說明卡：上面那排按鈕各是什麼 */
.howto-bar { position: relative; margin-top: 12px; padding: 12px 14px 12px; border-radius: 18px; border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .7); }
.howto-bar .hb-t { display: flex; align-items: center; min-height: 34px; padding-right: 40px; }
.howto-bar .sel-x { top: 10px; right: 10px; }
.howto-bar ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.howto-bar li { display: flex; gap: 10px; align-items: flex-start; font-size: calc(14px * var(--fz)); line-height: 1.55; color: var(--ink2); }
.howto-bar li b { color: var(--ink); }
.hb-i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line2); background: var(--panel-solid); color: var(--accent); font-weight: 800; font-size: calc(16px * var(--fz)); }
.hb-i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-i.brand-i::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; background: radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px); }
.howto-bar .tour-link { margin-top: 10px; }
/* 平面圖的房門：門洞（蓋掉牆線）、門扇、開門弧線 */
.p-door2 { pointer-events: none; }
.p-dgap { stroke: var(--bg); stroke-width: .12px !important; stroke-linecap: butt; }
.p-dleaf { stroke: var(--ink); stroke-width: .05px !important; stroke-linecap: round; }
.p-dswing { fill: none; stroke: var(--ink2); stroke-width: .03px !important; stroke-dasharray: .08 .06; }
.howto-bar.top { margin: 0 0 14px; }
@media (min-width: 900px) { .howto-bar ul { grid-template-columns: 1fr 1fr; column-gap: 18px; } }
/* 10-29 報告開頭：大門配宅主星整段、要處理的問題分三種 */
.rp-hd { margin-top: 14px; }
.rp-hd > .rp-sec { margin-top: 4px; }
.rp-hd article.f { margin-bottom: 10px; }
/* 報告最上面「最要緊的事」：摘要加跳轉 */
.rp-top { margin: 10px 0 8px; padding: 10px 12px 2px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .6); }
.rp-top-h { margin: 0 0 6px; padding: 0; border: 0; font-size: calc(16px * var(--fz)); line-height: 1.5; font-weight: 700; letter-spacing: normal; color: var(--ink-strong); }
.rp-top.ok .rp-top-h { color: var(--good); }
.rp-top-h .tag { margin: 0 0 0 6px; }
.rp-top-sub { margin: 8px 0 4px; font-size: calc(13px * var(--fz)); color: var(--ink2); }
.rp-top-i { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font-size: calc(14.5px * var(--fz)); line-height: 1.65; cursor: pointer; }
.rp-top-i:active { background: rgba(var(--accent-rgb), .08); }
.rp-top-t { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; }   /* 英文房名連在一起（MasterBedroomEnsuiteBathroom）也要折行，不壓到 › */
.rp-top-i .tag.fx { padding: 1px 8px; font-size: calc(11px * var(--fz)); }
.rp-top-go { flex: none; color: var(--accent); font-size: calc(18px * var(--fz)); line-height: 1; }
.rp-top-unset { margin: 8px 0 2px; }
.rp-top-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 10px; border-top: 1px solid var(--line); }
.rp-top-links .rp-chip { min-height: 40px; color: var(--accent); }
.ln-fig.rp-myplan { content-visibility: visible; contain-intrinsic-size: none; }   /* 這張圖在長內容的上面：高度用估的話，第一次跳到下面的卡會差一截 */
/* 報告「換個角度看這一間」：家人、主題。一列＝一張卡（標題＋這張卡講到的句子），按下去跳到完整的卡；選取只換顏色 */
.rp-ang-seg { margin: 8px 0 6px; }
.rp-ang-seg button { min-height: 44px; line-height: 1.35; }
.rp-ang-seg button small { display: block; font-size: calc(12px * var(--fz)); color: var(--ink2); }   /* 選起來的顏色照 .seg button.on small（深色、淺色各一份） */
.rp-ang-lead { margin: 10px 0 2px; }
.rp-ang-p { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.rp-ang-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 2px; font-size: calc(15px * var(--fz)); font-weight: 400; line-height: 1.5; }
.rp-ang-h > b { font-size: calc(17px * var(--fz)); }
.rp-ang-h small, .rp-ang-pal { color: var(--ink2); font-size: calc(13px * var(--fz)); }
.rp-ang-h .tag { margin-right: 0; }
.rp-ang-i { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px dashed var(--line); background: none; color: var(--ink); text-align: left; font-size: calc(14.5px * var(--fz)); line-height: 1.6; cursor: pointer; }
.rp-ang-i:active { background: rgba(var(--accent-rgb), .08); }
.rp-ang-b { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rp-ang-t { display: block; }
.rp-ang-s { display: block; margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line2); color: var(--ink2); font-size: calc(13.5px * var(--fz)); line-height: 1.6; }
.rp-ang-more { display: block; margin-top: 2px; padding-left: 12px; color: var(--ink3); font-size: calc(12px * var(--fz)); }
.rp-ang-sub { margin: 10px 0 0; font-size: calc(13px * var(--fz)); color: var(--ink2); }
.rp-ang-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rp-ang-jump .rp-chip { min-height: 40px; color: var(--accent); }
/* ---------- 屋外環境：路、水與煞（js/outside.js）：24 山方位圖，房子正面朝上；選取只換顏色 ---------- */
.ot-seg { margin: 8px 0 4px; }
.ot-seg button { min-height: 44px; }
.ot-dialw { display: flex; justify-content: center; }
.ot-dial { display: block; width: 100%; max-width: 360px; height: auto; touch-action: manipulation; }
.ot-dial text { text-anchor: middle; --vc: 1; pointer-events: none; letter-spacing: 0; }
.ot-gw { stroke: var(--line); stroke-width: 1; }
.ot-gw.a { fill: rgba(var(--line-rgb), .05); } .ot-gw.b { fill: rgba(var(--line-rgb), .11); }
.ot-gt { fill: var(--accent); font-size: calc(15px * var(--fz)); font-weight: 800; }
.ot-gd { fill: var(--ink2); font-size: calc(9.5px * var(--fz)); }
.ot-c { fill: rgba(var(--deep-rgb), .35); stroke: var(--line2); stroke-width: 1; cursor: pointer; }
.ot-c.b { fill: rgba(var(--bad-rgb), .42); } .ot-c.x { fill: rgba(var(--bad-rgb), .72); } .ot-c.w { fill: rgba(var(--warn-rgb), .34); } .ot-c.g { fill: rgba(var(--good-rgb), .38); }
.ot-c.p { fill: rgba(var(--bad-rgb), .15); }   /* 八煞所在那一宮的另外兩個字：只淡淡標出位置，不算凶方 */
.ot-c.sel { stroke: var(--accent); stroke-width: 3; }
.ot-m { fill: var(--ink); font-size: calc(14px * var(--fz)); font-weight: 600; }
.ot-m.b { fill: var(--ink-strong); }
.ot-door { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }   /* 房子正面（向）：大門的紫色留給大門本身，這裡不用 */
.ot-dt { fill: var(--accent); font-size: calc(12px * var(--fz)); font-weight: 700; }
.ot-n { fill: var(--accent); font-size: calc(12px * var(--fz)); font-weight: 800; }
.ot-cc { fill: var(--panel-solid); stroke: var(--line2); }
.ot-ct { fill: var(--ink-strong); font-size: calc(15px * var(--fz)); font-weight: 800; }
.ot-cs { fill: var(--ink2); font-size: calc(11px * var(--fz)); }
.ot-mk circle { fill: var(--panel-solid); stroke: var(--accent); stroke-width: 1.6; }
.ot-mk.bad circle { stroke: var(--bad); } .ot-mk.warn circle { stroke: var(--warn); } .ot-mk.good circle { stroke: var(--good); }
.ot-mt { fill: var(--ink); font-size: calc(11px * var(--fz)); font-weight: 700; }
.ot-legend .ot-i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ot-i.b { background: rgba(var(--bad-rgb), .55); } .ot-i.x { background: rgba(var(--bad-rgb), .85); } .ot-i.w { background: rgba(var(--warn-rgb), .55); } .ot-i.g { background: rgba(var(--good-rgb), .55); } .ot-i.p { background: rgba(var(--bad-rgb), .2); }
.ot-i.d { background: var(--accent); } .ot-i.m { border-radius: 50%; border: 1.6px solid var(--accent); }
/* 點了哪一座山：兩邊 ‹ › 靠上排，字變成兩三行時按鈕不跟著移 */
.ot-info { display: flex; align-items: flex-start; gap: 6px; padding: 4px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .35); font-size: calc(14px * var(--fz)); line-height: 1.7; }
.ot-it { flex: 1; min-width: 0; align-self: center; padding: 4px 2px; }
.ot-step { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line2); border-radius: 10px; background: rgba(var(--surface2-rgb), .7); color: var(--accent); font-size: calc(22px * var(--fz)); line-height: 1; cursor: pointer; }
.ot-step:active { background: rgba(var(--accent-rgb), .14); }
.ot-info b { margin-right: 6px; }
.ot-info .tag { margin: 2px 4px 2px 0; }
.ot-h { font-size: calc(15px * var(--fz)); margin: 18px 0 2px; color: var(--ink-strong); }
.ot-hint { margin: 0 0 2px; }
.ot-ln { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px dashed var(--line); background: none; color: var(--ink); text-align: left; font-size: calc(14.5px * var(--fz)); line-height: 1.6; cursor: pointer; }
.ot-ln:active { background: rgba(var(--accent-rgb), .08); }
.ot-lb { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ot-lt { display: block; font-weight: 700; }
.ot-ls { display: block; margin-top: 2px; color: var(--ink2); font-size: calc(13.5px * var(--fz)); text-align: justify; text-justify: inter-character; }
.ot-sub .ot-ls { margin-top: 0; color: var(--ink); font-size: calc(14px * var(--fz)); }
.ot-go { flex: none; color: var(--accent); font-size: calc(12px * var(--fz)); white-space: nowrap; }
.ot-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ot-k { min-height: 40px; padding: 8px 12px; font-size: calc(14px * var(--fz)); white-space: normal; }
.ot-k.on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ot-two { display: inline-grid; justify-items: center; }   /* 「其他…」「收起其他」疊在同一格，寬度照長的那一個 */
.ot-two > span { grid-area: 1 / 1; }
.ot-more { padding-top: 6px; border-top: 1px dashed var(--line); }
.ot-edit { margin: 8px 0 12px; padding: 12px; border: 1px solid var(--accent); border-radius: 14px; background: rgba(var(--accent-rgb), .05); }
.ot-eh { font-size: calc(15px * var(--fz)); line-height: 1.5; margin-bottom: 2px; }
.ot-edit .hint { margin: 2px 0 6px; }
.ot-now { min-height: 1.7em; margin: 6px 0; font-weight: 700; }
.ot-ends button { min-height: 54px; line-height: 1.3; }
/* 選了哪一座山那一行一律留兩行高：大字、窄螢幕「乾（西北・右後方）」會折成兩行，選之前之後這一排一樣高 */
.ot-ends button small { display: flex; align-items: center; justify-content: center; min-height: 2.6em; font-size: calc(12px * var(--fz)); color: var(--ink2); }
.ot-pick { display: grid; gap: 4px; margin: 8px 0; }
.ot-pr { display: grid; grid-template-columns: minmax(5.6em, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; }
.ot-pr span { font-size: calc(12.5px * var(--fz)); color: var(--ink2); line-height: 1.3; }
.ot-pr button { min-height: 40px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(var(--surface2-rgb), .7); color: var(--ink); font-size: calc(16px * var(--fz)); }
.ot-pr button.on { background: var(--grad-on); border-color: var(--accent); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.ot-shape { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; align-items: center; }
.ot-shape > span { font-size: calc(13px * var(--fz)); color: var(--ink2); margin-right: 2px; }
.ot-shape button { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 999px; background: none; color: var(--ink2); font-size: calc(13.5px * var(--fz)); }
.ot-shape button.on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ot-doorck { border-bottom: 0; }
.ot-eb { display: flex; gap: 8px; margin-top: 10px; }
.ot-eb .btn { min-height: 44px; flex: 1; }
.ot-eb .btn:disabled { opacity: .45; }
.ot-card h3 { font-size: calc(15.5px * var(--fz)); }
.ot-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.ot-del { min-height: 40px; font-size: calc(13.5px * var(--fz)); color: var(--bad); }
.sc-h { margin: 12px 0 2px; font-size: calc(13px * var(--fz)); font-weight: 700; color: var(--ink2); letter-spacing: .04em; }
@keyframes rpFlash { 0%, 55% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
article.f.rp-flash { animation: rpFlash 1.5s ease-out; }
article.f[tabindex="-1"]:focus { outline: none; }
.rp-fixsum { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(var(--surface-rgb), .6); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-fixsum > b { margin-right: 4px; }
.rp-fixsum .hint { flex-basis: 100%; margin: 4px 0 0; }
.fx { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: calc(13px * var(--fz)); font-weight: 700; border: 1px solid currentColor; white-space: nowrap; }
.fx.fixed, .tag.fx.fixed { color: var(--bad); }
.fx.work, .tag.fx.work { color: var(--warn); }
.fx.move, .tag.fx.move { color: var(--good); }
.tag.fx { background: transparent; border: 1px solid currentColor; }
.rp-sec.minor { opacity: .85; }
.rp-sec-n { margin: -4px 0 10px; }
/* 10-29 案例頁：吉凶案例 */
.cs-galbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.cs-galbar .seg { flex: 1 1 260px; }
.cs-galbar .seg button small { display: block; font-size: calc(11px * var(--fz)); color: var(--ink3); }
.cs-galbar .seg button.on small { color: inherit; opacity: .8; }
.cs-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
/* 寬螢幕一排好幾張：有一張打開「24 山、八種擺法比一比」（很長）時，同一排別張不跟著拉長留一大片空白；被點的那一張頂端不動、按鈕不跳 */
.cs-gal:has(.cs-r8 .cs-fv) { align-items: start; }
/* 吉凶案例的條件：坪數、外形、房數、廚廁排到最佳（使用者 10-30） */
.cs-galarea, .cs-galbeds { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-galarea > label, .cs-galbeds > span { flex: 0 0 auto; font-size: calc(13px * var(--fz)); color: var(--ink2); min-width: 64px; }
.cs-galarea .seg { flex: 1 1 120px; margin: 0; }
.cs-galbeds .seg { flex: 1 1 180px; margin: 0; }
.cs-galarea .seg button, .cs-galbeds .seg button { padding: 9px 4px; font-size: calc(14px * var(--fz)); }
.cs-galsize .seg button { line-height: 1.35; min-height: calc(2.7em + 1.35 * 11px + 18px); }   /* 大小：固定留兩行數字＋一行間數，換單位（坪 → m²、ft²）框框不跳 */
.cs-galbeds > small { flex: 1 1 100%; font-size: calc(12.5px * var(--fz)); }
.cs-galbar .cs-galshape { flex: 1 1 100%; }
.cs-galshape button { padding: 9px 2px; font-size: calc(14px * var(--fz)); }
.cs-galrow { flex: 1 1 100%; display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.cs-galrow .seg { flex: 1 1 220px; margin: 0; }
.cs-best { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cs-best small { font-size: calc(11.5px * var(--fz)); font-weight: 400; opacity: .8; }
.cs-best.on { background: var(--good-soft); color: var(--good); box-shadow: inset 0 0 0 1px rgba(var(--good-rgb), .5); }
.cs-fv button { font: inherit; font-size: calc(12px * var(--fz)); font-weight: 800; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: inherit; cursor: pointer; }
.cs-fv button.good { color: var(--good); background: var(--good-soft); border-color: rgba(var(--good-rgb), .4); } .cs-fv button.warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .45); } .cs-fv button.bad { color: var(--bad); background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .4); }
.cs-fv button.on { box-shadow: 0 0 0 2px currentColor; }
.cs-fv button.dim { opacity: .72; }
/* 實際平面圖的擺法：轉 0/90/180/270 一組＋鏡像開關，說明一行在下面 */
.cs-rv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cs-rv > span { font-size: calc(13px * var(--fz)); color: var(--ink2); }
.cs-r4 { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cs-r4b { font: inherit; padding: 4px 3px 5px; border: 1px solid var(--line2); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.cs-r4b.on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cs-r4s { display: block; width: 100%; aspect-ratio: 1; }
.cs-r4s svg { width: 100%; height: 100%; display: block; }
.cs-r4b small { font-size: calc(11.5px * var(--fz)); line-height: 1.3; text-align: center; color: var(--ink2); min-height: 2.6em; }   /* 吉凶字有長有短：先留兩行，換擺法、補上吉凶時高度不變 */
.cs-r4b small b { font-weight: 800; }
.cs-mir { font: inherit; font-size: calc(13px * var(--fz)); font-weight: 700; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; }
.cs-mir.on { background: var(--accent-soft, rgba(var(--accent-rgb), .16)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6); }
.cs-rv > small { flex: 1 1 100%; font-size: calc(12px * var(--fz)); color: var(--ink3); }
/* 卡片上半段、大圖的框：換擺法、換樓層時位置和大小不變（使用者 11-01：畫面不要跳來跳去） */
.cs-rtop { display: flex; flex-direction: column; gap: 8px; }
.cs-gfix { width: 100%; max-height: 300px; }
.cs-card.gal .cs-gfix svg.thumb { position: absolute; inset: 0; height: 100%; max-height: none; }
/* 報告頁：換一版看報告（擺法、原本／小調整／大調整） */
.rp-version { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 8px; }
.rp-version.wait { min-height: 280px; }
.rp-version .panel-title { margin: 0; }
.rp-version .seg { margin: 0; }
.cs-r8h { font-size: calc(12.5px * var(--fz)); color: var(--ink2); margin-top: 4px; }
.cs-gthumb { position: relative; cursor: zoom-in; }
.cs-gthumb::after { content: "點圖放大"; position: absolute; right: 4px; bottom: 4px; font-size: calc(11px * var(--fz)); color: var(--ink3); background: rgba(var(--deep-rgb), .7); padding: 1px 6px; border-radius: 6px; pointer-events: none; }
.cs-zoom { width: min(96vw, 720px); max-width: 96vw; max-height: 94vh; padding: 0; border: 1px solid var(--line2); border-radius: 16px; background: var(--bg); color: var(--ink); }
.cs-zoom::backdrop { background: rgba(0, 0, 0, .55); }
.cs-zoomb { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cs-zoomh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-fix { width: min(96vw, 1040px); }
.cs-fixbtn { width: 100%; margin-top: 8px; }
.cs-fix .btn, .cs-fixbtn { white-space: normal; }   /* 字大、螢幕窄時換行，不要把對話框撐出橫向捲動 */
.cs-fix .cs-zoomh .btn { flex: none; white-space: nowrap; }
.cs-fixasm { margin: 0; }   /* 這間怎麼改：還是假設的格局（樣子跟平面頁的提示條同一份） */
.rp-verkeep { margin: 0; display: grid; }
.rp-verkeep > span { grid-area: 1 / 1; min-width: 0; }
.rp-hold { visibility: hidden; }
.rp-title::after { content: "（小調整）"; visibility: hidden; }   /* 報告標題先留好換一版多出來的字：捲到最上面時補不了捲動，多一行下面的按鈕就會跳 */
.cs-fade { margin: 4px 0 0; }
.cs-fixmode { width: 100%; }
.cs-fixmode button { flex: 1 1 0; min-width: 0; }
.cs-fixmode small { display: block; font-size: calc(12px * var(--fz)); opacity: .8; }
.cs-fixnote { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); font-size: calc(13px * var(--fz)); line-height: 1.6; text-align: justify; }
.cs-fixnote b { color: var(--warn); }
.cs-fixrows { display: flex; flex-direction: column; gap: 4px; }
.cs-fixrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; }
button.cs-fixrow { cursor: pointer; }
.cs-fixrow.on { background: var(--ref-soft); border-color: var(--accent); }
.cs-fixrow > b { flex: none; min-width: 2.6em; }
.cs-fixgrade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-fixgrade i { font-style: normal; color: rgb(var(--muted-rgb)); }
.cs-fixgrade small { color: rgb(var(--muted-rgb)); font-size: calc(12px * var(--fz)); }
.cs-fixplans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cs-fixplans figure { margin: 0; min-width: 0; }
.cs-fixplans figcaption { font-size: calc(13px * var(--fz)); font-weight: 700; margin-bottom: 2px; }
.cs-fixplans.show-after .before, .cs-fixplans.show-before .after { display: none; }
.cs-fixkey { display: inline-block; width: 12px; height: 12px; margin: 0 2px; vertical-align: -1px; border: 2px dashed var(--accent); background: rgba(var(--accent-rgb), .18); border-radius: 2px; }
.cs-fixh { margin: 6px 0 0; font-size: calc(14px * var(--fz)); }
.cs-fixlist { margin: 0; padding-left: 1.2em; font-size: calc(14px * var(--fz)); line-height: 1.65; text-align: justify; }
.cs-fixmark { fill: rgba(var(--accent-rgb), .18); stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; pointer-events: none; }
@media (min-width: 760px) {
  .cs-fixplans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-fixplans.show-after .before, .cs-fixplans.show-before .after { display: block; }
  .cs-fixview { display: none; }
}
.cs-zoom svg.rp-plan { width: 100%; max-height: 66vh; }
.cs-zleg { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: calc(13px * var(--fz)); color: var(--ink2); }
.cs-zleg span { display: inline-flex; align-items: center; gap: 4px; }
.cs-zleg svg { width: 26px; height: 26px; }
.cs-card.gal { display: flex; flex-direction: column; gap: 8px; }
.cs-card.gal h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.cs-gsub { font-size: calc(15px * var(--fz)); font-weight: 700; color: var(--ink); }
.cs-gsub small { display: block; font-size: calc(12px * var(--fz)); font-weight: 400; color: var(--ink3); margin-top: 2px; }
.cs-card.gal svg.thumb { width: 100%; max-height: 300px; }
.cs-gt { fill: var(--ink); font-weight: 700; text-anchor: middle; --vc: 1; pointer-events: none; paint-order: stroke; stroke: var(--panel-solid); stroke-width: .08px; }
.cs-f.wf { stroke: var(--bad); }
.cs-f.car { fill: rgba(var(--accent-rgb), .16); stroke: var(--ink3); }
.cs-fl { fill: var(--ink2); font-weight: 700; text-anchor: middle; --vc: 1; pointer-events: none; paint-order: stroke; stroke: var(--panel-solid); stroke-width: .06px; }
.cs-why { margin: 0; padding-left: 18px; font-size: calc(13.5px * var(--fz)); line-height: 1.6; }
.cs-why li.bad { color: var(--bad); } .cs-why li.good { color: var(--good); } .cs-why li.warn { color: var(--warn); }
.cs-card.gal .btn { margin-top: auto; }
.sel-wall { flex: 1; margin: 0; }
.sel-wall button { padding: 9px 6px; font-size: calc(14px * var(--fz)); }
/* 總評：吉凶看宅門，廚廁壓錯打折（吉）、壓對減半（凶）時顏色淡一點、框線虛線（使用者 10-29） */
.rp-overall.dim, .bd-card.dim { background: transparent; border-style: dashed; }
.fl-lv.dim { opacity: .78; }
.cs-badge.dim { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.cs-fv span.dim, .ce-u.dim { opacity: .72; }
.cs-vd.dim { background: transparent; border-style: dashed; }
/* 速查表：64 組大門配宅主星（使用者 10-29） */
.ln-qr-card { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.ln-qr-card b { color: var(--accent); }
.qr-mode { margin-top: 8px; }
.qr-gridwrap { overflow-x: auto; margin: 10px 0 4px; }
.qr-grid { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 520px; }
.qr-grid th { font-size: calc(13px * var(--fz)); color: var(--ink2); font-weight: 700; padding: 4px 2px; white-space: nowrap; }
.qr-grid td { padding: 0; }
.qr-grid td button { width: 100%; min-height: 46px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel-solid); color: var(--ink); font-size: calc(14px * var(--fz)); font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 2px; }
.qr-grid td button small { font-size: calc(11px * var(--fz)); font-weight: 600; }
.qr-grid td.good button { background: var(--good-soft); border-color: rgba(var(--good-rgb), .45); } .qr-grid td.good small { color: var(--good); }
.qr-grid td.warn button { background: var(--warn-soft); border-color: rgba(var(--warn-rgb), .45); } .qr-grid td.warn small { color: var(--warn); }
.qr-grid td.bad button { background: var(--bad-soft); border-color: rgba(var(--bad-rgb), .45); } .qr-grid td.bad small { color: var(--bad); }
.qr-grid td.on button { outline: 2px solid var(--accent); outline-offset: 1px; }
.qr-legend span { margin-right: 8px; font-weight: 700; } .qr-legend .good { color: var(--good); } .qr-legend .warn { color: var(--warn); } .qr-legend .bad { color: var(--bad); }
.qr-keys { margin: 10px 0; }
.qr-c { border: 1px solid var(--line2); border-left-width: 4px; border-radius: 12px; background: var(--panel-solid); margin: 8px 0; overflow: hidden; }
.qr-c.good { border-left-color: var(--good); } .qr-c.warn { border-left-color: var(--warn); } .qr-c.bad { border-left-color: var(--bad); }
.qr-hd { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; background: none; border: 0; text-align: left; color: var(--ink); font: inherit; }
.qr-name { font-size: calc(16px * var(--fz)); } .qr-name b { font-weight: 800; }
.qr-star { font-weight: 800; padding: 1px 8px; border-radius: 999px; font-size: calc(13px * var(--fz)); }
.qr-star.g { color: var(--good); background: var(--good-soft); } .qr-star.b { color: var(--bad); background: var(--bad-soft); } .qr-star.w { color: var(--warn); background: rgba(var(--warn-rgb), .12); }
.qr-lv { font-size: calc(13px * var(--fz)); font-weight: 700; } .qr-lv.good { color: var(--good); } .qr-lv.warn { color: var(--warn); } .qr-lv.bad { color: var(--bad); }
.qr-one { flex: 1 1 100%; font-size: calc(13px * var(--fz)); color: var(--ink2); line-height: 1.5; }
.qr-tog { margin-left: auto; font-size: calc(12px * var(--fz)); color: var(--accent); }
.qr-body { padding: 0 12px 12px; }
.qr-sub { font-size: calc(13px * var(--fz)); color: var(--ink2); margin: 0 0 6px; }
.qr-sec { margin: 8px 0; } .qr-sec > b { font-size: calc(13px * var(--fz)); color: var(--ink2); margin-right: 6px; }
.qr-sec p { margin: 3px 0 0; line-height: 1.65; } .qr-sec ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }
.qr-alt { display: block; color: var(--ink3, var(--ink2)); font-size: calc(12px * var(--fz)); margin-top: 2px; }
.qr-keys button.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); }

/* ---------- 手機上更好按（10-31 使用者：更好用、更方便、更好看） ---------- */
.to-top { position: fixed; right: 12px; bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); z-index: 16; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel-solid); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: grid; place-items: center; }
.to-top[hidden] { display: none; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.sheet-open .to-top { display: none; }
.go-prompt { padding: 6px 2px; }
.go-prompt b { display: block; font-size: calc(18px * var(--fz)); color: var(--ink-strong); }
.go-prompt p { margin: 6px 0 12px; color: var(--ink2); font-size: calc(14.5px * var(--fz)); line-height: 1.6; }
#planBlocked .go-prompt { color: var(--ink); }
#tab-plan.blocked .plan-wrap, #tab-plan.blocked .plan-legend, #tab-plan.blocked .plan-tools, #tab-plan.blocked .plan-more, #tab-plan.blocked .floor-tabs, #tab-plan.blocked .plan-side { display: none; }
body.tour-open #tab-plan.blocked .plan-wrap, body.tour-open #tab-plan.blocked .plan-side { display: block; }
body.tour-open #tab-plan.blocked .plan-tools { display: flex; }   /* 導覽講到「標出我家的設備」：還沒量方向也框得到那一排 */
#tab-report .panel:empty { display: none; }
.house-mini { position: sticky; top: calc(66px + env(safe-area-inset-top)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 10px; padding: 9px 14px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel-solid); box-shadow: 0 3px 10px rgba(0, 0, 0, .08); font-size: calc(15px * var(--fz)); font-weight: 700; color: var(--ink-strong); text-align: left; }
.house-mini[hidden] { display: none; }
.house-mini em { font-style: normal; color: var(--accent); }
.house-mini.good { border-color: var(--good); }
.house-mini.bad { border-color: var(--bad); }
.house-mini.warn { border-color: var(--warn); }
.house-mini small { flex: 0 0 auto; font-size: calc(12px * var(--fz)); font-weight: 500; color: var(--ink3); }
.an-more { margin-top: 6px; }
.an-more summary, .sel-more summary, .cs-filters summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: calc(14px * var(--fz)); }
.sel-more { margin: 8px 0; }
.cs-filters { margin-top: 2px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel-solid); padding: 0 12px; }
.cs-filters > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; list-style: none; }
.cs-filters > summary::-webkit-details-marker { display: none; }
.cs-filters > summary::after { content: ""; margin-left: auto; flex: 0 0 auto; width: 7px; height: 7px; border: solid var(--ink2); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.cs-filters[open] > summary::after { transform: rotate(-135deg); }
.cs-filters > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px * var(--fz)); font-weight: 500; color: var(--ink3); }
.cs-filters > summary b { flex: none; white-space: nowrap; }   /* 後面那一行字很長時，前面的「更多條件」「改條件」不被擠成兩行 */
.cs-filters[open] { padding-bottom: 12px; }
.cs-count { margin: 10px 2px 4px; font-size: calc(13px * var(--fz)); color: var(--ink3); }
.cs-morebar { margin: 12px 0; }
.cs-morebar:empty { display: none; }
.cs-morebar .btn { width: 100%; }
.cs-card.gal { content-visibility: auto; contain-intrinsic-size: auto 760px; }
@media (max-width: 899px) {
  .measure-bar { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); z-index: 6; padding: 8px; margin-left: -8px; margin-right: -8px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-solid); box-shadow: 0 4px 16px rgba(0, 0, 0, .14); }
  /* 房子頁往平面頁的那一顆貼在分頁列上面：房子頁有三個畫面長，量完方向進來不用捲到最下面才找得到（使用者 11-06 同意） */
  /* 平面頁「看評估報告」也貼在分頁列上面（使用者 11-06 同意）；側欄在手機上拆開，按鈕才能跟著整頁；放大編輯平面圖時回到最下面，不擋圖 */
  #tab-plan .plan-side { display: contents; }
  #planNext { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); z-index: 6; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
  #planNext:not(.primary) { background: var(--panel-solid); }
  #tab-plan:has(.plan-wrap.zoomed) #planNext { position: static; box-shadow: none; }
  body[data-tab="plan"] .to-top, body[data-tab="house"] .to-top, body[data-tab="compass"] .to-top { bottom: calc(var(--tabbar) + 100px + env(safe-area-inset-bottom)); }   /* 不壓在那一排按鈕上 */
  #houseNext { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); z-index: 6; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
  #houseNext:not(.primary) { background: var(--panel-solid); }   /* 還缺設定時是白色那一種：底要實的，後面的字和按鈕不透上來 */
  .plan-tools.row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .plan-tools .btn { grid-column: span 3; width: 100%; min-height: 46px; padding: 8px 6px; font-size: calc(14px * var(--fz)); line-height: 1.3; }
  .plan-tools #improveMov, .plan-tools #quickMark { grid-column: span 6; }
  .plan-tools #openPhoto, .plan-tools #openTemplates, .plan-tools #clearFloor { grid-column: span 2; }
  .pal-g { flex-wrap: nowrap; overflow-x: auto; padding-left: 0; min-height: 0; margin-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pal-g::-webkit-scrollbar { display: none; }
  .pal-h { position: sticky; left: 0; top: auto; width: auto; flex: 0 0 58px; align-self: stretch; display: flex; align-items: center; z-index: 1; background: var(--panel-solid); }
  .palette .pal-g button { flex: 0 0 auto; white-space: nowrap; padding: 7px 11px; }
  #tab-report.active { display: flex; flex-direction: column; }
  #tab-report .rp-left, #tab-report .rp-right { display: contents; }
  #tab-report #reportStale { order: 0; }
  #tab-report #reportHead { order: 1; }
  #tab-report #reportToc { order: 2; }
  #tab-report .rp-left > *:not(#reportHead), #tab-report .rp-right > *:not(#reportToc) { order: 3; }
}
@media (max-width: 520px) {
  .cs-filters .cs-galbeds { display: block; margin-top: 10px; }
  .cs-filters .cs-galbeds > span { display: block; margin-bottom: 5px; font-size: calc(13px * var(--fz)); }
  .cs-filters .cs-galbeds > .seg { width: 100%; }
  .cs-filters > .cs-galset > .cs-galbeds { margin-top: 0; }   /* 吉凶案例：框裡已經有間距 */
  .cs-filters .cs-fr > span:first-child { flex: 1 1 100%; }   /* 模擬的改條件：框裡比較窄，標題放上面、按鈕整排（「長方形」才不折行） */
}
.cs-filters { width: 100%; box-sizing: border-box; }
.cs-filters > .cs-galset { margin: 2px 0 0; }   /* 吉凶案例的改條件：框裡照原本的排法 */
/* 大樓模擬：原始碼照手機的順序（上面、這一戶的平面圖和說明、整棟表），手機一欄就這樣排；
   電腦兩欄照舊：左欄上面那一塊、下面整棟表，右欄平面圖和說明（跨兩列、黏在上面） */
@media (min-width: 960px) {
  .cs-bldgrid { grid-template-areas: "a b" "c b"; grid-template-rows: auto 1fr; }
  .cs-bldgrid > .cs-colA { grid-area: a; }
  .cs-bldgrid > .cs-colB { grid-area: b; }
  .cs-bldgrid > .cs-colC { grid-area: c; }
}
@media (max-width: 959px) {
  .cs-bldgrid .cs-planp { scroll-margin-top: calc(124px + env(safe-area-inset-top)); }   /* 點整棟表的一格捲回平面圖：停在案例分頁那一排下面 */
  .cs-grid > :not(:first-child) > .panel:first-child { margin-top: 0; }   /* 手機一欄：換到下一塊的那一張跟上一張也只隔 12px（分在不同格子裡上下的間距不會合併） */
}
.cs-owner { margin: 0 0 6px; padding: 6px 10px; border-radius: 10px; background: rgba(var(--door-rgb), .12); font-size: calc(14px * var(--fz)); }
.cs-owner b { color: var(--door); }
.cs-owner small { display: block; font-size: calc(12px * var(--fz)); }
.cs-near { margin: 0 0 6px; padding: 5px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: calc(13px * var(--fz)); font-weight: 700; }
.cs-nearhd { margin: 10px 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--ink); font-size: calc(14px * var(--fz)); line-height: 1.6; }
/* 實際平面圖依吉凶篩選：全部／吉／凶和也看鏡像轉向各佔一行（擠同一行的話，寬的畫面按吉時三顆會縮成一半寬）；
   進度條在三顆底下的空隙裡（不佔位置；疊在按鈕上會被選起來那一格同色的底蓋掉）；列表上面那一行只留一行（算完換字時下面的卡片不跳）；也看鏡像轉向選起來只換顏色 */
.cs-lvwrap { flex: 1 1 100%; position: relative; min-width: 0; }
.cs-lvprog { position: absolute; left: 0; bottom: -6px; height: 3px; width: 0; border-radius: 2px; background: var(--accent); transition: width .2s linear, opacity .4s ease; pointer-events: none; }
.cs-lvprog.done { opacity: 0; }
.cs-lvrow .cs-lvalt { flex: 1 1 100%; min-height: 48px; min-width: 0; white-space: normal; text-align: center; }   /* .btn 不換行：窄手機特大字會撐出畫面 */
#realCount, #galCount { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink2); }
.cs-galbar .cs-lvseg button small { color: var(--ink2); }   /* 間數是這一排要看的東西：比國家那一排的小字深一點（淺色對比夠） */
.cs-altnote { margin: 0 0 6px; padding: 5px 10px; border-radius: 10px; background: var(--good-soft); color: var(--ink); font-size: calc(13px * var(--fz)); line-height: 1.55; }
.cs-lvnone p { margin: 0 0 10px; }

/* ---------- 字體大小（⋯ 裡選；SVG 圖、下面那排分頁、上面那排、案例四個分頁不跟著變，圖才不會爆框） ---------- */
:root { --fz: 1; }
svg, .tabbar, .topbar, .cs-mode, #tutLayer .tut-stage-wrap { --fz: 1; }
.fz-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.fz-row > span { flex: none; font-size: calc(14px * var(--fz)); color: var(--ink2); }
.fz-row .seg { flex: 1; margin: 0; }
.fz-row .seg button { padding: 8px 4px; }
/* ---------- 手機上好按、Safari 選單不要矮一截 ---------- */
select:not(.psel select) { -webkit-appearance: none; appearance: none; min-height: 44px; padding: 8px 32px 8px 12px; border: 1px solid var(--line2); border-radius: 12px; background-color: rgba(var(--deep-rgb), .6); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; color: var(--ink); }
/* 左上角「陽宅羅盤」（按一下檢查有沒有新版）不跟著房子名字被擠：名字長的時候縮的是房子選單（字變成…），圖示一直是完整的圓（使用者 11-06：「更新那個按鈕，有時候會因為我的房子那個下拉選單的文字比較長而被壓縮掉」） */
.brand, .nav-back { flex: 0 0 auto; }
.brand { min-height: 40px; min-width: 40px; justify-content: center; }
.brand .logo { flex: 0 0 auto; }
details > summary { padding-block: 7px; }
.cs-fv button { min-height: 34px; padding: 5px 10px; }
.cs-mode button { white-space: nowrap; padding-inline: 2px; }
.sc-wrap > summary { cursor: pointer; list-style: none; padding-block: 0; min-height: 40px; display: flex; align-items: center; }
.sc-wrap > summary::-webkit-details-marker { display: none; }
.sc-wrap > summary .panel-title::after { content: "▾"; margin-left: 6px; color: var(--ink2); }
.sc-wrap:not([open]) > summary .panel-title::after { content: "▸"; }
.sc-wrap:not([open]) > summary .panel-title { margin-bottom: 0; }
.plan-tools .btn { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .brand .brand-t { display: none; } }   /* 手機、小平板只放圖示：大小不會因為有沒有「上一頁」、名字長短而變，省下的位置給房子名字 */
/* 手機橫放：畫面很矮，量方向那排按鈕不要黏在畫面上蓋住羅盤 */
@media (max-height: 500px) and (orientation: landscape) { .measure-bar, #houseNext, #planNext { position: static; } }
.lk-topics span, .house-mini small { color: var(--ink2); }
:root[data-theme="light"] .rp-chip b { color: #855710; }

/* ---------- 案例的方向：羅盤＋24 山按鈕 ---------- */
.cs-facebox { margin: 8px 0; padding: 0 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel-solid); }
.cs-facebox[open] { padding-bottom: 10px; }
/* 收起來只佔一行、整行都按得到：字放不下時截短方向那幾個字，不折成兩行（模擬的框比較窄，折行會把平面圖往下推） */
.cs-facebox > summary { cursor: pointer; color: var(--ink2); font-size: calc(14px * var(--fz)); display: flex; align-items: center; min-height: 46px; padding-block: 0; list-style: none; white-space: nowrap; }
.cs-facebox > summary::-webkit-details-marker { display: none; }
.cs-facebox > summary::before { content: ""; flex: none; width: 0; height: 0; margin-right: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--ink2); }
.cs-facebox[open] > summary::before { transform: rotate(90deg); }
.cs-facebox > summary b { color: var(--ink-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-galbar > .cs-facebox, .cs-galbar > .cs-filters { flex: 1 1 100%; min-width: 0; }   /* 吉凶案例、實際平面圖：跟上下兩個框一樣寬；一行的字很長時框不撐出畫面 */
.cs-galbar > .cs-facebox { margin: 0; }
.cs-fpwrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 6px; }
.cs-fpside { flex: 1 1 280px; min-width: 0; }
.cs-fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.cs-fgr { display: flex; align-items: center; gap: 3px; min-width: 0; }
.cs-fgr > span, .cs-fz > span, .cs-r24l { flex: 0 0 auto; width: 3.1em; font-size: calc(12.5px * var(--fz)); color: var(--ink2); }
.cs-fgr button, .cs-fz button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 2px; border: 1px solid var(--line2); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: calc(15px * var(--fz)); cursor: pointer; }
.cs-fz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.cs-fz button { flex: 1 1 40%; font-size: calc(13px * var(--fz)); }
.cs-fgr button.on, .cs-fz button.on { background: var(--accent); color: var(--on-color); border-color: var(--accent); text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }
.cs-fpmine { margin: 0 0 6px; width: 100%; min-height: 40px; }
.cs-fpmine.on { border-color: var(--accent); color: var(--accent); }
.cs-fg + .cs-fz + .cs-fpmine { margin: 8px 0 0; }
.cs-r24 .cs-fv { align-items: center; margin-top: 4px; }
.cs-r24 .cs-fv button { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.cs-r24 .cs-fv button small { font-weight: 600; }
.cs-r24 .cs-fv button.now { outline: 2px solid var(--accent); outline-offset: 1px; }
.cs-r24 .cs-fv { display: grid; grid-template-columns: 3.1em repeat(3, minmax(0, 1fr)); gap: 4px; }
.cs-r24 .cs-fv.cs-r24z { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-r24z .cs-r24l { grid-column: 1 / -1; }
.cs-r24 .cs-r24l { border: 0; padding: 0; background: none; font-weight: 500; white-space: nowrap; }
.cs-r24 .cs-fv button { white-space: normal; padding: 4px 2px; border-radius: 10px; line-height: 1.25; }
.cs-r24 .cs-fv button small { display: block; font-size: calc(11px * var(--fz)); }
.cs-facebox > summary small { flex: none; margin-left: 6px; color: var(--accent); white-space: nowrap; }
.cs-facebox[open] > summary small { display: none; }
/* 大門回原位的按鈕按了換成一句說明：那一格高度跟按鈕一樣，下面的按鈕不往上補 */
.cs-doorhint { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; flex-wrap: wrap; }
.cs-doorhint .hint { margin: 0; }
.cs-doorauto { font-size: calc(13px * var(--fz)); padding: 6px 12px; min-height: 40px; }

/* ---------- 標出我家的設備（全螢幕：上面平面圖、下面固定的問題和按鈕，換步驟畫面不動） ---------- */
body.qm-open { overflow: hidden; --qm-h: calc(102px + 108px * var(--fz) + env(safe-area-inset-bottom)); --qm-w: min(calc(100vw - 32px), 560px); }
body.qm-open .topbar, body.qm-open .tabbar, body.qm-open .to-top, body.qm-open .plan-side, body.qm-open #tab-plan .plan-side, body.qm-open .plan-main > :not(.plan-wrap), body.qm-open .dim-chip, body.qm-open .door-compass .dc-t { display: none; }
body.qm-open .plan-wrap { position: fixed; left: 0; right: 0; top: 0; bottom: var(--qm-h); z-index: 30; padding: env(safe-area-inset-top) 0 0; border: 0; border-radius: 0; background: rgb(var(--deep-rgb)); box-shadow: none; touch-action: none; }
body.qm-open #plan { height: 100%; touch-action: none; cursor: crosshair; }
body.qm-open #plan .p-item, body.qm-open #plan .p-hit { cursor: inherit; }
body.qm-open .door-compass { top: calc(6px + env(safe-area-inset-top)); left: 6px; right: 6px; bottom: 6px; align-items: flex-start; padding: 0; background: none; border: 0; box-shadow: none; }
body.qm-open .door-compass svg { width: 44px; height: 44px; }
body.qm-open .door-compass .dc-live { position: absolute; left: 0; bottom: 0; max-width: 34%; margin: 0; }   /* 超長屋的說明放左下角，左上會壓到門的標籤 */
body.qm-open .toast { z-index: 40; }
.qm-panel { position: fixed; left: 0; right: 0; bottom: 0; height: var(--qm-h); z-index: 31; padding: 10px 16px env(safe-area-inset-bottom); background: var(--panel-solid); border-top: 1px solid var(--line2); box-shadow: 0 -8px 24px rgba(var(--shadow-rgb), .25); overflow: hidden; touch-action: manipulation; }
.qm-box { display: flex; flex-direction: column; gap: 6px; height: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 8px; }
.qm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.qm-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: min(calc(19px * var(--fz)), calc((var(--qm-w) - 8px - 66px * var(--fz)) / var(--qm-n, 8))); }   /* 問題一行放得下：長的句子字級才收，不會被切掉 */
.qm-head span { flex: 0 0 auto; font-size: calc(12px * var(--fz)); color: var(--ink2); font-variant-numeric: tabular-nums; }
.qm-panel p { flex: 1 1 0; min-height: 0; margin: 0; overflow-y: auto; font-size: calc(13px * var(--fz)); line-height: 1.45; color: var(--ink2); }
.qm-panel p.warn { color: var(--warn); }
.qm-panel p.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent); mask-image: linear-gradient(#000 calc(100% - 20px), transparent); }   /* 放不下要捲：下緣淡出，看得出來還有 */
.qm-btns { flex: 0 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 6px; }
.qm-btns .btn { min-width: 0; padding: 2px 6px; font-size: calc(13px * var(--fz)); line-height: 1.2; white-space: normal; }
.qm-btns [data-qm=prev], .qm-btns [data-qm=none], .qm-btns [data-qm=next] { grid-column: span 2; }
.qm-btns [data-qm=more], .qm-btns [data-qm=stop] { grid-column: span 3; }
.qm-pal { fill: rgba(var(--accent-rgb), .12); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.qm-ring { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.qm-ghost { fill: rgba(var(--muted-rgb), .14); stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.qm-ghost-t { text-anchor: middle; --vc: 1; fill: var(--ink2); pointer-events: none; }
.qm-dot { fill: var(--accent); stroke: rgb(var(--deep-rgb)); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
/* 手機橫放：問題和按鈕放右邊，平面圖才有高度 */
@media (max-height: 500px) and (min-width: 600px) {
  body.qm-open { --qm-w: 276px; }
  body.qm-open .plan-wrap { right: calc(300px + env(safe-area-inset-right)); bottom: 0; }
  .qm-panel { left: auto; top: 0; width: calc(300px + env(safe-area-inset-right)); height: auto; padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) env(safe-area-inset-bottom) 12px; border-top: 0; border-left: 1px solid var(--line2); }
}
.p-item.guess { stroke-dasharray: 5 4; }   /* 房間框是照設備抓的，不是實際的牆 */

/* ---------- 用地圖核對方向（全畫面地圖；js/mapcheck.js）：上面搜尋、中間地圖、下面固定高度的說明和三顆按鈕，字變了地圖不動 ---------- */
body.mc-open .toast { z-index: 80; }
.mc-layer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg); overscroll-behavior: contain;
  --mc-line: #ffd60a; --mc-ink: #ffffff; --mc-case: rgba(0, 0, 0, .78); }   /* 畫在衛星照片、街道圖上：底下不是 App 的底色，深淺色模式用同一組高對比的顏色 */
.mc-layer .tut-top { position: static; flex: 0 0 auto; }   /* 左上角「回 App」的高度、標題一行跟看屋比較、所有房子同一條（.tut-top 那一段） */
.mc-layer .tut-top .sp { display: none; }   /* 窄手機、大字：標題一行放得下，不讓頁首長高把地圖擠掉 */
.mc-ask { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.mc-ask-in { max-width: 560px; margin: 0 auto; font-size: calc(15px * var(--fz)); line-height: 1.7; }
.mc-ask-in ul, .mc-about ul { padding-left: 20px; margin: 6px 0 10px; color: var(--ink2); }
.mc-ask-in li, .mc-about li { margin: 4px 0; }
.mc-lead { margin: 4px 0 14px; color: var(--ink); }
.mc-ask-btns .btn { flex: 1 1 0; min-height: 48px; white-space: normal; }
.mc-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "find" "stage" "sheet"; }
.mc-find { grid-area: find; display: flex; gap: 6px; margin: 0; padding: 8px 12px; background: var(--panel-solid); border-bottom: 1px solid var(--line); }
.mc-find input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .6); color: var(--ink); font-size: calc(16px * var(--fz)); }
.mc-find .btn { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; }
.btn.busy { cursor: progress; }
.mc-stage { grid-area: stage; position: relative; overflow: hidden; min-height: 140px; }
.mc-map { position: absolute; inset: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: crosshair; outline: none;
  background: linear-gradient(rgba(var(--grid-rgb), .12) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(var(--grid-rgb), .12) 1px, transparent 1px) 0 0 / 32px 32px, rgb(var(--deep-rgb)); }
.mc-map:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.mc-tiles { position: absolute; inset: 0; }
.mc-tile { position: absolute; left: 0; top: 0; z-index: 1; max-width: none; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.mc-tile.old { z-index: 0; }
.mc-tile[data-ok="0"] { visibility: hidden; }   /* 載不出來的那一張：Safari 會畫一個問號，藏起來（地圖上有提示） */
.mc-ov { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.mc-guide { stroke: var(--mc-line); stroke-width: 1.5; stroke-dasharray: 7 6; opacity: .8; }
.mc-wall { stroke: var(--mc-line); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 1.5px var(--mc-case)); }
.mc-shaft { fill: none; stroke: var(--bad); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 1.5px var(--mc-case)); }
.mc-head { fill: var(--bad); stroke: var(--mc-ink); stroke-width: 1.5; stroke-linejoin: round; }
.mc-lab { font-size: calc(14px * var(--fz)); font-weight: 800; text-anchor: middle; fill: var(--mc-ink); stroke: var(--mc-case); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; }
.mc-lab.in { font-size: calc(12px * var(--fz)); font-weight: 700; fill: var(--mc-line); }
.mc-pt { fill: rgba(255, 255, 255, .22); stroke: var(--mc-ink); stroke-width: 3; filter: drop-shadow(0 0 2px var(--mc-case)); }
.mc-dot { fill: var(--mc-line); stroke: var(--mc-case); stroke-width: 1; }
.mc-cross { fill: none; stroke: var(--mc-ink); stroke-width: 1.5; filter: drop-shadow(0 0 1.5px var(--mc-case)); }
.mc-me { fill: #2f8cff; stroke: var(--mc-ink); stroke-width: 2.5; }
.mc-pin { fill: #e5484d; stroke: var(--mc-ink); stroke-width: 2.5; }   /* 搜尋框貼上的座標 */
/* 底部說明最下面：在 Google 地圖看這裡、看街景確認大門（按了開新分頁） */
.mc-l.mc-g { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-left: 0; border: 0; }
.mc-l.mc-g .btn { flex: 1 1 auto; min-height: 40px; text-decoration: none; }
.mc-acc { fill: rgba(47, 140, 255, .15); stroke: rgba(47, 140, 255, .65); stroke-width: 1; }
.mc-north { position: absolute; left: 10px; top: 10px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel-solid); color: var(--ink); font-size: calc(13px * var(--fz)); line-height: 1.05; box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .3); pointer-events: none; }
.mc-north b { color: var(--bad); }
.mc-lyr { position: absolute; right: 10px; top: 10px; z-index: 3; margin: 0; width: calc(136px * var(--fz)); background: var(--panel-solid); box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .3); }
.mc-lyr button { min-height: 40px; padding: 0 6px; font-size: calc(14px * var(--fz)); }
.mc-zoom { position: absolute; right: 10px; bottom: 40px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.mc-zoom .btn, .mc-i { width: 44px; height: 44px; padding: 0; background: var(--panel-solid); font-size: calc(22px * var(--fz)); line-height: 1; box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .3); }
.mc-i { position: absolute; left: 56px; top: 10px; z-index: 3; width: 40px; height: 40px; font-size: calc(20px * var(--fz)); }
.mc-credit { position: absolute; left: 0; bottom: 0; z-index: 3; max-width: calc(100% - 64px); padding: 2px 8px; border-top-right-radius: 8px; background: rgba(255, 255, 255, .8); color: #1d2329; font-size: calc(10.5px * var(--fz)); line-height: 1.35; }   /* 版權標示：地圖慣例的白底深字，蓋在照片上也看得清；右邊留給＋－那一欄，大字折成好幾行也不壓到 */
.mc-credit a { color: inherit; text-decoration: none; }
.mc-ban { position: absolute; left: 10px; right: 10px; top: 60px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--warn); background: var(--panel-solid); box-shadow: 0 6px 20px rgba(var(--shadow-rgb), .35); }
.mc-ban p { flex: 1 1 auto; margin: 0; font-size: calc(13.5px * var(--fz)); line-height: 1.5; color: var(--ink); }
.mc-ban .btn { flex: 0 0 auto; min-height: 44px; }
.mc-res { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 5; max-height: calc(100% - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 4px 6px 6px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel-solid); box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .35); }
.mc-res-h { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-bottom: 1px solid var(--line); color: var(--ink2); font-size: calc(13px * var(--fz)); }
.mc-res-h span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-res-x { flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: none; color: var(--ink2); font-size: calc(24px * var(--fz)); line-height: 1; }
.mc-hit { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font-size: calc(14px * var(--fz)); line-height: 1.4; cursor: pointer; }
.mc-res p { margin: 10px 8px; font-size: calc(14px * var(--fz)); line-height: 1.55; color: var(--ink2); }
.mc-here { padding: 2px 8px 8px; } .mc-here .btn { flex: 1 1 0; min-height: 44px; }   /* 你現在在這間房子嗎？ */
.mc-res .mc-res-c { margin: 6px 8px 2px; font-size: calc(11px * var(--fz)); }
.mc-about { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6; max-height: calc(100% - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel-solid); box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .35); font-size: calc(14px * var(--fz)); line-height: 1.6; }
.mc-about p { margin: 0 0 6px; }
.mc-about .btn { flex: 1 1 0; min-height: 44px; }
.mc-about > .row { position: sticky; bottom: -12px; margin: 0 -14px -12px; padding: 8px 14px 12px; background: var(--panel-solid); }   /* 說明一長（多了 Google 那一句）要捲：知道了、取消同意固定在框底，不用捲到最下面才按得到 */
.mc-sheet { grid-area: sheet; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--panel-solid); border-top: 1px solid var(--line2); box-shadow: 0 -8px 24px rgba(var(--shadow-rgb), .2); }
.mc-info { height: min(calc(200px * var(--fz)), 30vh); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-size: calc(13.5px * var(--fz)); line-height: 1.5; color: var(--ink); }
.mc-info.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent); mask-image: linear-gradient(#000 calc(100% - 20px), transparent); }   /* 放不下要捲：下緣淡出，看得出來還有 */
.mc-step { margin: 0 0 6px; font-weight: 700; color: var(--ink-strong); font-size: calc(14.5px * var(--fz)); }
.mc-l { margin: 0 0 6px; padding-left: 9px; border-left: 3px solid transparent; }
.mc-l.res { padding-left: 0; border: 0; font-size: calc(15.5px * var(--fz)); text-align: left; }   /* 結果那一行折行時不要把字拉開 */
.mc-l.res b { color: var(--accent); }
.mc-l.cv, .mc-l.hint { color: var(--ink2); }
.mc-l.ok { border-left-color: var(--good); } .mc-l.ok b { color: var(--good); }
.mc-l.warn { border-left-color: var(--warn); } .mc-l.warn b { color: var(--warn); }
.mc-l.bad { border-left-color: var(--bad); } .mc-l.bad b { color: var(--bad); }
.mc-rg { display: block; min-height: 40px; margin-top: 6px; padding: 6px 12px; font-size: calc(14px * var(--fz)); }
.mc-btns { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; }
.mc-btns .btn { min-height: 46px; padding: 6px 4px; white-space: nowrap; line-height: 1.2; font-size: calc(15px * var(--fz)); }
/* 手機橫放、電腦：地圖在左，搜尋和說明在右 */
@media (max-height: 520px) and (min-width: 600px), (min-width: 900px) {
  .mc-main { grid-template-columns: minmax(0, 1fr) min(400px, 44vw); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "stage find" "stage sheet"; }
  .mc-find, .mc-sheet { border-left: 1px solid var(--line2); }
  .mc-sheet { border-top: 0; min-height: 0; }
  .mc-info { flex: 1 1 0; height: auto; min-height: 0; }
}
/* 量方向頁的入口、量測紀錄裡地圖那一筆 */
.map-card { margin: 12px 0 0; border-color: var(--line2); background: rgba(var(--surface-rgb), .55); }
.map-card .tut-play { background: transparent; border: 1.5px solid var(--accent); }
.map-card .tut-play svg { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linejoin: round; }
.map-alt, .g-map { min-height: 46px; white-space: normal; }
.map-alt { margin-top: 6px; }
.samples .smp-map { margin-left: 6px; padding: 0 6px; border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 999px; color: var(--accent); font-size: calc(11px * var(--fz)); }
.smp-mapl { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--line2); border-radius: 10px; background: var(--info-soft); font-size: calc(13.5px * var(--fz)); line-height: 1.6; }
.smp-mapl.ok { border-left-color: var(--good); }
.smp-mapl.warn { border-left-color: var(--warn); background: var(--warn-soft); } .smp-mapl.warn b { color: var(--warn); }
.smp-mapl.bad { border-left-color: var(--bad); background: var(--bad-soft); } .smp-mapl.bad b { color: var(--bad); }

/* ===== 白話解說（樣品；課文、報告共用一份）：原句下面一個框，長內文左右對齊 ===== */
.ln-pl { margin: 6px 0 4px; padding: 8px 12px 9px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), .28); border-left: 4px solid var(--accent); background: rgba(var(--accent-rgb), .07); font-size: calc(15px * var(--fz)); line-height: 1.8; color: var(--ink); text-align: justify; }
.ln-plh { display: inline-block; margin: 0 8px 0 0; padding: 0 7px; border-radius: 6px; font-size: calc(12px * var(--fz)); line-height: 20px; font-weight: 800; letter-spacing: .1em; color: var(--on-color); background: var(--accent); vertical-align: 1px; }
.ln-pfig { margin: 8px 0 6px; padding: 8px; }
.ln-pzoom { margin-top: 8px; border-top: 1px dashed var(--line2); padding-top: 6px; }
/* 報告門字卡的大門牆圖：整間只是看門在哪一面，窄長的房子不要高過半個畫面（細節看下面的放大圖） */
.rp-doorfig > svg { display: block; width: 100%; max-height: 48vh; }
.rp-doorfig .ln-pzoom svg { display: block; width: 100%; }
.ln-pzoom > span { display: block; text-align: center; font-size: calc(12px * var(--fz)); color: var(--ink3); margin-bottom: 2px; }
.ln-pfig figcaption { text-align: justify; }
.ln-plf { font-weight: 800; margin-right: 2px; }
/* 門位圖滑到才畫：先留好位子（平面圖約 1:1.15、放大那一段約 1.9:1；圓盤 1:1），畫上去時畫面不跳 */
.ln-pwait { aspect-ratio: 1 / 1.75; border-radius: 10px; background: rgba(var(--ink-rgb), .04); }
.ln-pwait.cmp { aspect-ratio: 1 / 1; }
/* 門位圖的記號（cases.js wallMarks） */
.cs-plan .wm-ray { stroke: var(--accent); stroke-width: 1.4px; stroke-dasharray: 5 4; }
.cs-plan .wm-tick { stroke: var(--ink2); stroke-width: 1px; }
.cs-plan .wm-tick.big { stroke: var(--accent); stroke-width: 2px; }
.cs-plan .wm-name { fill: var(--ink2); text-anchor: middle; --vc: 1; font-weight: 700; }
.cs-plan .wm-name.hl { fill: var(--ink-strong); font-weight: 900; }
.cs-plan .wm-hlbg { fill: rgba(var(--accent-rgb), .16); stroke: rgba(var(--accent-rgb), .6); stroke-width: 1px; }
.cs-plan .wm-hlbg.t1 { fill: rgba(var(--muted-rgb), .18); stroke: rgba(var(--muted-rgb), .7); }   /* 第二種底色不用紫（紫是大門色） */
.cs-plan .wm-orig { fill: var(--ink2); text-anchor: middle; --vc: 1; font-weight: 700; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3px; }
.ln-listb li > .ln-pl, .ln-listb li > .ln-pfig { margin-left: -1.25em; }
.cs-plan .wm-pair { fill: none; stroke: var(--ink2); stroke-width: 1.4px; }
.cs-plan .wm-lead { stroke: var(--door); stroke-width: 1.2px; }
.cs-plan .wm-pill rect { fill: var(--panel-solid); stroke: var(--door); stroke-width: 1.6px; }
.cs-plan .wm-pill text { fill: var(--door); text-anchor: middle; --vc: 1; font-weight: 900; }
.cs-plan .wm-pill.b rect, .cs-plan .wm-lead.b { stroke: var(--bad); } .cs-plan .wm-pill.b text { fill: var(--bad); }
.cs-plan .wm-pill.w rect, .cs-plan .wm-lead.w { stroke: var(--warn); } .cs-plan .wm-pill.w text { fill: var(--warn); }   /* 要注意的字（甲卯、巳丙、亥壬、單一地支）黃 */
@media (max-width: 360px) { .ln-pl { padding: 7px 9px 8px; } }
/* 24 山圓盤的記號（diagram.js compassMarks） */
.dg-compass .dg-wm.t0 { fill: rgba(var(--accent-rgb), .22); stroke: rgba(var(--accent-rgb), .7); stroke-width: 1px; }
.dg-compass .dg-wm.t1 { fill: rgba(var(--muted-rgb), .22); stroke: rgba(var(--muted-rgb), .75); stroke-width: 1px; }
.dg-compass .dg-wmn { fill: var(--ink-strong); font-weight: 900; text-anchor: middle; }
.dg-compass .dg-wmd { stroke: var(--door); stroke-width: 3px; stroke-linecap: round; } .dg-compass .dg-wmd.b { stroke: var(--bad); } .dg-compass .dg-wmd.w { stroke: var(--warn); }
.dg-compass .dg-wmdt { fill: var(--door); font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 3px; } .dg-compass .dg-wmdt.b { fill: var(--bad); } .dg-compass .dg-wmdt.w { fill: var(--warn); }   /* 窄螢幕特大字：左右內距縮一點，對齊比較不會拉出大空白 */
.cs-plan.wm-zoom .cs-lbl, .cs-plan.wm-zoom .cs-pill, .cs-plan.wm-zoom .cs-ct { opacity: .3; }

/* 大門微調（1d D2）：‹ 5 公分、5 公分 ›、離左邊牆幾公尺 */
.door-fine { flex-wrap: wrap; align-items: center; margin-top: 6px; }
.door-fine .btn { min-height: 40px; flex: 0 0 auto; }
.door-fine .door-off { display: inline-flex; align-items: center; gap: 4px; }
.door-fine #doorOffset { width: 5.5em; min-height: 40px; font-size: calc(16px * var(--fz)); padding: 6px 10px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(var(--deep-rgb), .6); color: var(--ink); }   /* 跟其他輸入框同一個樣子（原本是瀏覽器預設的方框） */
.door-fine #doorOffset:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
.door-cover { font-weight: 700; color: var(--ink); }
.p-doorhit { fill: transparent; stroke: none; cursor: grab; pointer-events: all; touch-action: none; }   /* 平面頁大門的拖點（1d D2） */
/* 看屋筆記（2B）：四組收合、App 算的那幾行灰底唯讀、星星選了只換顏色、電話和地圖按鈕在欄位旁邊 */
.nt-g { margin: 6px 0; border-top: 1px solid var(--line2); padding-top: 4px; }
.nt-g > summary { font-weight: 800; cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.nt-auto { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--ink-rgb), .06); font-size: calc(13.5px * var(--fz)); margin: 6px 0 8px; }
.nt-auto:empty { display: none; }
.nt-auto .nt-k { display: inline-block; min-width: 4.5em; color: var(--ink3); }
.nt-auto small { display: block; color: var(--ink3); }
.nt-line { display: flex; gap: 8px; align-items: center; }
.nt-line input { flex: 1 1 auto; min-width: 0; }
.nt-side { flex: none; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.nt-side[hidden] { display: none; }
.nt-starrow { display: inline-flex; gap: 2px; }
.nt-star { width: 44px; height: 44px; border: 0; background: transparent; font-size: calc(24px * var(--fz)); color: rgba(var(--ink-rgb), .25); cursor: pointer; padding: 0; line-height: 1; }
.nt-star.on { color: var(--warn); }
.hs-jot { margin-top: 8px; }
/* 看屋照片（2C）：一排固定高度可以橫向捲的縮圖（新加的往右加，下面的欄位不動）；大圖區固定大小、換張時按鈕不動 */
.nt-ph { margin: 6px 0 8px; }
.nt-ph-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nt-ph-add { min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; }
.nt-ph-add.disabled { opacity: .45; pointer-events: none; }
.nt-ph-tip { margin: 2px 0 6px; font-size: calc(12.5px * var(--fz)); }
.nt-ph-strip { display: flex; gap: 6px; height: 84px; overflow-x: auto; overflow-y: hidden; align-items: center; }
.nt-ph-t { position: relative; flex: none; width: 84px; height: 84px; padding: 0; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; background: var(--panel-solid); cursor: pointer; }
.nt-ph-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-ph-t span { position: absolute; left: 0; right: 0; bottom: 0; font-size: calc(11px * var(--fz)); line-height: 1.3; padding: 1px 3px; background: rgba(0, 0, 0, .55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-ph-t.busy { display: grid; place-items: center; font-size: calc(12px * var(--fz)); color: var(--ink2); cursor: default; }
.nt-ph-none { font-size: calc(13px * var(--fz)); }
.ph-view { width: min(560px, 96vw); max-height: 96vh; }
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ph-box { position: relative; width: 100%; height: min(60vh, 420px); background: #000; border-radius: 10px; overflow: hidden; }
.ph-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ph-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 60px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .45); color: #fff; font-size: calc(28px * var(--fz)); cursor: pointer; }
.ph-nav.prev { left: 6px; } .ph-nav.next { right: 6px; }
.ph-nav[hidden] { display: none; }
.ph-acts .btn { min-height: 44px; }
.btn.danger { color: var(--bad); }
.hs-cover { float: left; display: grid; justify-items: center; gap: 2px; width: 56px; margin: 0 8px 2px 0; }
.hs-cover img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.hs-cover::before { content: ""; display: block; width: 56px; height: 56px; border-radius: 6px; background: rgba(var(--ink-rgb), .08); grid-area: 1 / 1; }
.hs-cover img { grid-area: 1 / 1; }
.hs-cover small { font-size: calc(11px * var(--fz)); color: var(--ink2); white-space: nowrap; }
.cmp-ph { border: 0; background: transparent; padding: 0; cursor: pointer; }
.cmp-ph .hs-cover, .cmp-ph .hs-cover::before, .cmp-ph .hs-cover img { width: 120px; }
.cmp-ph .hs-cover::before, .cmp-ph .hs-cover img { height: 90px; }
/* 判斷變了才標出（2F） */
.verd-chg { display: block; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--warn); background: var(--warn-soft); font-size: calc(14px * var(--fz)); }
.verd-chg .btn { margin-left: 6px; }
.hs-l.verd-chg { padding: 2px 6px; margin: 4px 0 0; font-size: calc(12.5px * var(--fz)); }
/* 吉凶案例「改條件」的外形：尺寸放第二行、不折；窄手機（320 寬、特大字）排成兩欄兩列，名字不再折成三四行（第 5 步舊問題） */
.cs-galshape button small { display: block; white-space: nowrap; font-size: .8em; }
@media (max-width: 360px) { .cs-galshape { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }