/* 家業視窗（H1-b，C 款極簡收折式）：色票全用 style.css 既有變數；收折圖示沿用遊戲統一的 #i-fold（加粗與旋轉規則在 style.css）。
   字級對齊遊戲慣例（2026-11-03）：內文 14px/1.5（body）、視窗標題 16px/700（.dialog h2、武學視窗）、名稱 15px/600（.mw-art）、次要 12px（.mc-sub、.mw-opt-sum）、標籤 11px/500（.badge）、說明段 13px（.mw-info） */
.hw { --tm: var(--male-t); --mo: var(--accent); --bw: 124px; --pr: 12px; --hw-help: 22px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; container-type: inline-size; }
/* 容器寬度 ≤400px（340px 側欄、360／375 手機）把動作欄從 124 收到 88。查詢套在子元素，--bw 再往下繼承。 */
@container (max-width: 400px) { .hw > * { --bw: 88px; } }
.hw button, .hw-dlg button { font: inherit; color: inherit; cursor: pointer; white-space: normal; height: auto; background: none; border: 0; border-radius: 0; padding: 0; gap: 0; }
.hw :focus-visible, .hw-dlg :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hw .chev { font-size: 18px; transition: transform .2s; }
.hw [aria-expanded="true"] > .chev, .hw [aria-expanded="true"] > .hw-fc > .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .hw .chev { transition: none; } }
.hw .hw-fc { width: 24px; display: flex; align-items: center; justify-content: center; flex: none; }
.hw .hw-tm { color: var(--tm); font-variant-numeric: tabular-nums; }
.hw .hw-mo { color: var(--mo); font-variant-numeric: tabular-nums; }
.hw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; overflow: visible; position: relative; }
.hw-head h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 問號圓鈕 22px。點擊範圍是下面 ::after 的 44×44，視窗裡不要再做 32px 的另一組。 */
.hw .hw-ibtn { position: relative; width: var(--hw-help); height: var(--hw-help); flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--raise); color: var(--help-ink); font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.hw .hw-ibtn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.hw .hw-card2 { background: var(--raise); border: 1px solid var(--line); border-radius: 14px; }
.hw .hw-tog { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 var(--pr); background: none; border: 0; text-align: left; }
.hw .hw-list { display: grid; gap: 14px; margin-top: 18px; }
.hw .hw-item { background: var(--raise); border: 1px solid var(--line); border-radius: 14px; }
.hw .hw-item.hw-open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.hw .hw-rowhead { display: grid; grid-template-columns: minmax(0, 1fr) var(--bw); align-items: center; gap: 4px; padding: 5px 8px 5px 0; }
.hw .hw-rowhead .hw-tog { grid-template-columns: 20px minmax(0, 1fr); min-height: 44px; gap: 4px; padding: 0 2px 0 8px; }
.hw .hw-rowhead .hw-fc { width: 20px; }
.hw .hw-one { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* 名稱至少 4em、收合時最多兩行，並吃掉列上剩下的寬度。展開後取消行數上限，全名要看得到。
   狀態標籤寬度有上限、不縮小；長標籤在上限內折兩行。「Đang bán」這類短標籤要放得進一行（約 8.5em）。 */
.hw .hw-nm { font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: break-word; word-break: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; min-width: 4em; flex: 1 1 auto; }
.hw .hw-item.hw-open .hw-nm { display: block; -webkit-line-clamp: unset; line-clamp: unset; -webkit-box-orient: unset; overflow: visible; }
.hw .hw-sub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 2px; min-width: 0; }
.hw .hw-rowhead .hw-sub { margin-top: 0; flex: 0 0 auto; width: max-content; max-width: 8.5em; min-width: 0; flex-wrap: nowrap; }
.hw .hw-rowhead .hw-tg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 8.5em; white-space: normal; overflow-wrap: break-word; vertical-align: middle; box-sizing: border-box; }
.hw .hw-rowhead .hw-tg::before { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.hw .hw-tg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--paper); max-width: 100%; line-height: 1.5; }
.hw .hw-tg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.hw .hw-tg.hw-acc::before { background: var(--accent); } .hw .hw-tg.hw-ok::before { background: var(--ok); } .hw .hw-tg.hw-bad::before { background: var(--danger); }
.hw .hw-tg.hw-acc { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.hw .hw-tg.hw-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.hw .hw-tg.hw-bad { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.hw .hw-bcol, .hw-dlg .hw-bcol { width: var(--bw); display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.hw .hw-why { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.hw .hw-btn, .hw-dlg .hw-btn { min-height: 44px; padding: 4px 8px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.25; text-align: center; }
.hw .hw-rowhead .hw-btn { min-height: 40px; }   /* 列上的主要按鈕：比對話框小一點，上下和卡片邊緣留出間距（仍高於 36px） */
/* 88px 動作欄裡，「Details」這類單詞要和折疊圖示留在同一行。 */
.hw .hw-amt .hw-btn { padding: 4px 4px; gap: 2px; }
.hw .hw-amt .hw-btn > span { white-space: nowrap; }
.hw .hw-bcol .hw-btn, .hw .hw-act .hw-btn, .hw .hw-amt .hw-btn { width: var(--bw); }
.hw .hw-btn.hw-pri, .hw-dlg .hw-btn.hw-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.hw .hw-btn.hw-danger { border-color: var(--danger); color: var(--danger); }
.hw .hw-btn[aria-disabled="true"], .hw-dlg .hw-btn[aria-disabled="true"] { border-style: dashed; color: var(--muted); background: transparent; cursor: not-allowed; }
.hw .hw-body { padding: 14px var(--pr) 18px 16px; border-top: 1px dashed var(--line); display: grid; gap: 14px; }
.hw .hw-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.hw .hw-amt, .hw .hw-act { display: grid; grid-template-columns: minmax(0, 1fr) var(--bw); align-items: center; gap: 8px; }
.hw .hw-amt .hw-v { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.hw .hw-amt .hw-l { color: var(--muted); }
.hw .hw-amt b { font-size: 18px; font-variant-numeric: tabular-nums; margin-left: auto; text-align: right; }
.hw .hw-acts { display: grid; gap: 10px; }
.hw .hw-act .hw-ai { text-align: right; font-size: 12px; line-height: 1.5; color: var(--muted); }
.hw .hw-act .hw-ai .hw-tm, .hw .hw-act .hw-ai .hw-mo, .hw .hw-meta .hw-tm { font-weight: 600; }
.hw table.hw-kv, .hw-dlg table.hw-kv { width: 100%; border-collapse: collapse; }
.hw .hw-kv td, .hw-dlg .hw-kv td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.hw .hw-kv td:last-child, .hw-dlg .hw-kv td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.hw .hw-kv tr.hw-tot td, .hw-dlg .hw-kv tr.hw-tot td { font-weight: 700; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.hw .hw-kv tr.hw-mu td:first-child { color: var(--muted); }
.hw .hw-unk { letter-spacing: .2em; }
.hw .hw-pi { display: grid; grid-template-columns: 24px 10px auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px var(--pr); background: none; border: 0; border-top: 1px solid var(--line); text-align: left; }
.hw .hw-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.hw .hw-dot.hw-acc { background: var(--accent); } .hw .hw-dot.hw-ok { background: var(--ok); } .hw .hw-dot.hw-bad { background: var(--danger); }
.hw .hw-pt { padding: 0 var(--pr) 14px 62px; font-size: 13px; }
.hw .hw-dots { display: inline-flex; gap: 5px; justify-self: end; }
.hw .hw-lab { font-weight: 600; }
.hw .hw-mapbox { margin-top: 18px; }
.hw .hw-maprow { display: grid; grid-template-columns: minmax(0, 1fr) var(--bw); align-items: center; gap: 8px; padding-right: var(--pr); overflow: visible; position: relative; }
.hw .hw-sort { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.hw .sortchip { height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); }
.hw .sortchip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.hw .hw-reserves { display: grid; gap: 8px; }
.hw .hw-reserve { min-height: 36px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.hw .hw-mh .hw-t { width: 100%; min-height: 44px; padding: 0; background: none; border: 0; text-align: left; }
.hw .hw-mh .hw-h { margin-left: auto; }
.hw .hw-md { min-width: 0; }
.hw .hw-maprow .hw-ibtn { justify-self: end; }
.hw .hw-st { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 var(--pr); background: none; border: 0; border-top: 1px solid var(--line); text-align: left; }
.hw .hw-cnt { font-variant-numeric: tabular-nums; color: var(--muted); }
.hw .hw-mh { padding: 10px var(--pr) 12px 44px; border-top: 1px dashed var(--line); display: grid; gap: 4px; }
.hw .hw-mh .hw-t { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.hw .hw-mh .hw-h { font-size: 12px; color: var(--muted); }
.hw .hw-empty { padding: 18px 4px; color: var(--muted); }
.hw-dlg { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: 16px; padding: 0; width: calc(100vw - 24px); max-width: 560px; box-shadow: var(--shadow); font-size: 14px; line-height: 1.5; }
.hw-dlg::backdrop { background: rgba(0, 0, 0, .55); }
.hw-dlg .hw-tm { color: var(--male-t); font-variant-numeric: tabular-nums; font-weight: 600; }
.hw-dlg .hw-mo { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
.hw-dlg .hw-dh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--raise); }
.hw-dlg .hw-dh b { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.5; }
.hw-dlg .hw-db { padding: 0 16px 8px; max-height: 68vh; overflow: auto; }
.hw-dlg .hw-db section { padding: 14px 0 10px; }
.hw-dlg .hw-db section + section { border-top: 1px solid var(--line); }
.hw-dlg .hw-db h3 { font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 6px; letter-spacing: .04em; }
.hw-dlg .hw-db p, .hw-dlg .hw-db li { margin: 0 0 6px; font-size: 13px; line-height: 1.7; }
.hw-dlg .hw-db ul { margin: 0; padding-left: 18px; }
.hw-dlg .hw-cf { padding: 22px 18px 18px; display: grid; gap: 18px; text-align: center; }
.hw-dlg .hw-cf .hw-q { font-size: 18px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.hw-dlg .hw-cf .hw-r { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hw-dlg .hw-cf .hw-r .hw-btn { width: 100%; }
/* H1-b2：進度一句話、掛牌填價框、確認框明細（賣回官府） */
.hw .hw-note { font-size: 13px; line-height: 1.6; }
.hw-dlg .hw-cf .hw-q.hw-q2 { font-size: 16px; line-height: 1.5; }
.hw-dlg.hw-confirm .hw-q.hw-q2 { text-wrap: balance; }   /* 看房／議價問句：折行時兩行均分，不留「する？」孤字 */
.hw-dlg.hw-confirm .hw-q .hw-qn { display: inline-block; max-width: 100%; }   /* 房名整塊換行；比一行還長時才在房名裡折 */
.hw-dlg .hw-cf .hw-kv { text-align: left; font-size: 14px; }
.hw-dlg .hw-f { display: grid; gap: 6px; text-align: left; }
.hw-dlg .hw-fl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font-weight: 600; }
.hw-dlg .hw-fl small { font-size: 12px; font-weight: 400; color: var(--muted); }
.hw-dlg .hw-f input { width: 100%; min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--raise); color: var(--ink); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.hw-dlg .hw-wn { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: left; }
.hw-dlg .hw-err { color: var(--danger); font-size: 13px; text-align: left; }
.hw-dlg .hw-err:empty { display: none; }
/* 看房、議價代表色（站長 2026-11-03：避免按錯不自知）。只用 style.css 現成色票；文字原樣保留，不只靠顏色區分。
   列上按鈕：文字與邊框上色，主按鈕底色上色；確認框：確認鍵用同一色。深淺主題文字對比都 ≥ 4.5（見測試）。 */
.hw, .hw-dlg { --hw-view: var(--male-t); --hw-haggle: var(--accent); }   /* 站長選 A 案：看房藍、議價金，都填實心底 */
.hw-a-view { --hw-c: var(--hw-view); } .hw-a-haggle { --hw-c: var(--hw-haggle); }
.hw .hw-btn.hw-a-view:not([aria-disabled]), .hw .hw-btn.hw-a-haggle:not([aria-disabled]) { color: var(--hw-c); border-color: var(--hw-c); }
.hw .hw-btn.hw-pri.hw-a-view, .hw .hw-btn.hw-pri.hw-a-haggle, .hw-dlg .hw-btn.hw-pri.hw-a-view, .hw-dlg .hw-btn.hw-pri.hw-a-haggle { background: var(--hw-c); color: var(--accent-ink); border-color: var(--hw-c); }