:root{ --c-purple-900:#5B3977; --c-purple-800:#7D5B99; --c-purple-700:#8557A8; --c-purple-600:#8E6FA7; --c-purple-400:#9C74BC; /* 官方 --c-purple-300 是高彩度亮紫，文件明講「只給漸層用」，不能拿來當一般 border/outline（會太搶眼）。這裡先校正數值本身，呼叫端的 border 用法另外 改連 --c-purple-600（見下方各處），不要因為校正了數值就變成滿版霓虹紫框。 */ --c-purple-300:#D5A4FF; --c-purple-200:#D7C8E4; --c-purple-100:#EBE3F2; /* hpsk-ui 文件記載的推導式寫法（color-mix + --opacity-50），不是自創色階； 算出來的值跟這裡原本寫死的 #F5F1F8 完全一致，純粹是把「怎麼算出這個顏色」的 依據換成官方公式，視覺上不會有變化。 */ --c-purple-50:color-mix(in srgb, var(--c-purple-100) var(--opacity-50), var(--white)); --opacity-10:10%; /* 引導橫幅脈動光暈（.hm-click-hint 的 hm-notice-pulse keyframe）原本寫死 rgba(133,87,168,.15)，改用 color-mix 需要的透明度階，數值照抄 5168-tokens.css。 */ --opacity-20:20%; --opacity-50:50%; /* 圖表色值收攏（sdd/ui-align-list-page/01-UIUX評估與修正建議.md 建議6）新增這兩階， 數值照抄 5168-tokens.css 官方透明度量表，不自己調整： --opacity-80 給直條圖有資料的長條用（原本寫死 opacity="0.82"，官方階最接近的是 80%）； --opacity-0 給趨勢圖面積漸層淡出的那一端用（原本寫死 stop-opacity="0.01"，視覺上跟 完全透明沒有可辨識差異，官方階直接有 0% 可用，不需要湊一個非 0 的假值）。 */ --opacity-80:80%; --opacity-0:0%; /* hpsk-ui 0.6.0：橘色價格「文字」專用 800 階（≥20px 且粗體，只放白卡／灰卡）； 700 階 #F97D03 只留給非文字（底色、描邊、漸層），不得再當價格字色。 */ --c-orange-800:#E17002; --c-orange-700:#F97D03; --c-brown-600:#B5A99D; --c-yellow-500:#FFFB83; --c-yellow-100:#FFFEE0; /* 錯誤/警示語意色。「特殊交易」原本用這階做紅底標籤（.tag-spec），2026-09 異常備註三層收斂（§3-A）拍板拿掉，改成灰字純文字＋ⓘ icon；此階暫無其他呼叫端， 保留 token 定義本身（不是本輪要清的範圍）。 */ /* 漲色「文字」專用 800 階（年增率漲幅等）；700 階只給邊框、色塊、圖表線 */ --c-red-800:#CE331A; --c-red-700:#EC3C1F; /* 跌色／成交確認「文字」專用 800 階（年增率跌幅、.bc-social「社宅」標籤字）；700 階只給色塊、圖表線、淡底 */ --c-green-800:#317E1A; /* 色塊／淡底用（.bc-social 淡底），當文字請用 --c-green-800 */ --c-green-700:#3D9921; --c-dark-900:#333333; --c-dark-100:#F8F7F5; /* 填色灰卡底色（規範 --c-surface-sunken → .card-shell.is-sunken，放白底區塊） */ --c-surface-sunken:var(--c-dark-100); --radius:4px; --ink:#333333; --ink-soft:#666666; /* hpsk-ui 文字色只有三階（333/434343/666），沒有自己這個 #767676 的第四階； 改成跟官方「輔助文字」階（--c-dark-700）同值，不改變數名以免要動所有呼叫端。 */ --ink-mute:#666666; /* 官方灰階中間那一階（--c-dark-800），本站原本的灰階只有 --ink/--ink-soft/ --ink-mute 三個語意命名、缺這一階，按鈕 hover 需要它，直接沿用官方命名補上。 */ --c-dark-800:#434343; /* 官方灰階分隔線的下一階（比 --line／官方 --c-dark-300 深一階）。官方對這階 的用途註記是「灰底上的分隔線（白底分隔線用 dark-300）」——本站表格坐在 白卡上，用途上並不合規，這裡是明知並刻意的偏離，不是「數值照抄官方色階 就等於合規」。取這階的理由：dark-300 就是本站原值 --line #EAEAEA，對白底 僅 1.20:1，在密集表格 612px 跨距上淡到等於不存在；參考頁 #CCCCCE 又不在 官方色階內。PM 拍板（sdd/ui-align-list-page/01-UIUX評估與修正建議.md §5 Q4 選項 A）改用這階換取列邊界可讀性，數值照抄 5168-tokens.css，不自己 調深淺；同一次拍板 PM 也決定不採斑馬紋，避免引入本站與參考頁都沒有的視覺 語彙。表格元件官方無規範可循，缺件已另案提報設計團隊。 */ --c-dark-400:#D5D5D5; /* 圖表軸線（renderHist／renderQtrTrend 的 X/Y 軸本體，原本寫死 #ccc）要用的官方 灰階，站上其餘語意名（--ink/--ink-soft/--line/--bg/--c-dark-800/--c-dark-400） 都沒有對到這一階，比照上面幾個新增 token 的作法，數值照抄 5168-tokens.css。 */ --c-dark-500:#B0B0B0; --line:#EAEAEA; --bg:#F1F1F1; --card:#FFFFFF; --white:#FFFFFF; --ff:system-ui,-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei','Segoe UI','Noto Sans TC','Heiti TC',sans-serif; --r:8px; /* 內容上方固定佔用的高度，JS 執行前的預設值。 實際值由 app.js 的 setFilterStickyTop() 量測 NavBar／麵包屑／膠囊分頁／ 地圖頁標題列後寫入——2026-08-17 版面重構後這段由四塊可變高度組成，寫死會失準。 */ --chrome:226px; /* --sh 已確認完全等同官方 --shadow（一般卡片階），維持原樣、不要動—— 以下是原本沒有引入、但這次要拿來取代站上其餘 ~8 個自創 box-shadow 數值的 官方陰影量表其餘幾階，數值照抄 5168-tokens.css，不自己調整模糊/位移。 */ --shadow-sm:0 1px 2px 0 rgb(0 0 0/.05); --shadow-md:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); --shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1); --shadow-xl:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1); --shadow-2xl:0 25px 50px -12px rgb(0 0 0/.25); --sh:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scrollbar-gutter:stable} body{font-family:var(--ff);font-size:16px;color:var(--ink);background:var(--bg);min-height:100vh} a{color:var(--c-purple-800);text-decoration:none} /* 正式 NavBar 內的連結顏色交回套件自己的 class 決定（否則下拉選單會被染成本站紫）。 用 :where() 把特異度壓成 0,0,1：贏得過瀏覽器預設連結藍、又輸給 Tailwind 的 .text-white / .text-c-dark-800（0,1,0），active 項目的白字才不會被壓掉。 必須放在上面那條 a 之後——兩者特異度相同，靠順序決勝。 */ :where(.navbar-slot) a{color:inherit} button{font-family:var(--ff);cursor:pointer;border:none;background:none} select,input{font-family:var(--ff)} /* 鍵盤 focus 指示：站上多處對可互動元件下了 outline:none 只留邊框變色（不夠明顯， 純滑鼠使用者也看得到、干擾視覺），鍵盤操作者因此完全看不到焦點在哪。 統一補一條全站規則，只在鍵盤導覽時出現（:focus-visible 不會在滑鼠點擊時觸發）。 */ :focus-visible{outline:2px solid var(--c-purple-600);outline-offset:2px} /* HEADER */ /* 一律用 #area-hdr / #area-nav 指名本站的標題列與主選單： 全站正式 NavBar（@houseprice/shared）本身也是
且內含