/* css/ui-sentence.css — 「04 造句設計」的設計語言 * * 使用者可以在正式版與這一套設計之間切換（右上角切換鈕，見 js/ui-mode.js）。 * 選擇存在 localStorage['ct-ui']，每頁內有一段 inline script 在樣式表 * 之前把 data-ui 補回上，避免載入時閃一下另一套樣式。 * * **這一批只換外觀，不換導覽方式**：側邊欄與返回鍵仍是正式版那一套。 * 造句導覽本體（句子即狀態、退詞即返回、網址即句子）是下一批的工作。 * * 鐵律：本檔所有規則一律寫在 [data-ui="sentence"] 之下—— * 這是「不破壞正式版」能被證明的原因：屬性不存在時，本檔等於不存在。 * css/styles.css、css/nav.css 等既有檔案的既有選擇器一條都不動。 * 驗證方式：workspace/work/restyle/baseline.py --compare 比對的是**關閉態** * 與改動前的基準（108 頁 × 亮暗 × 390/1440）；parity.py 比對的是同一頁 * 在開／關兩態下的可見文字必須完全相同。 * * 色票／字體來源：workspace/work/restyle/style-04-sentence/css/proof.css * （04 造句設計的排字校樣底層），變數改名加上 --sentence- 前綴， * 避免與 css/styles.css 既有的 --ink／--paper 等變數同名互相覆蓋。 */ /* ---------- 色票：亮＝骨白底配墨字，暗＝極深墨綠底配骨白字 ---------- */ :root[data-ui="sentence"] { --sentence-bg: #efece1; --sentence-bg2: #e6e2d4; --sentence-bg3: #dcd7c6; --sentence-fg: #1f1f1d; /* 色票的近黑，取代原本的墨綠黑 */ --sentence-fg2: #474643; /* 墨↔紙軸上取值，中性暖灰（與換版前對比等值） */ --sentence-dim: #5f5d58; /* 2026-09-06 由 #706e69 加深：亮色在骨白上 4.31→5.56，這個角色專排全站最小的字 */ --sentence-line: #c3bda9; --sentence-line2: #a8a18b; --sentence-inv-bg: #1f1f1d; --sentence-inv-fg: #efece1; /* 臨床語意色改用新色票**加深後**的變體：緋紅在米白上只有 4.44、橘只有 2.15，當內文都不到 AA 的 4.5。加深後每一項都與換版前等值或更好（hot 6.33→6.43、 warn 5.31→5.41），原色 --pal-crimson／--pal-orange 留給燈號填色與螢光筆。墨綠照舊：這套色票裡沒有「安全」色，拿暖色當低風險會把臨床語意講反。 */ --sentence-hot: #ab0027; /* 緋紅（加深）：最高急迫度／危險 */ --sentence-warn: #954b00; /* 橘（加深）：中 */ --sentence-calm: #2b5f45; /* 墨綠：低／安全——照舊 */ --sentence-mid: #615e09; /* 墨綠與新 warn 的中間色，只給 T×N 決策格用（見 P11 段） */ --sentence-sel: #1f1f1d; --sentence-shade: rgba(31,31,29,.06); --sentence-scrim: rgba(239,236,225,.94); /* ---------- 字體堆疊（全部系統字，無外部載入） ---------- */ --sentence-serif: "Iowan Old Style", Georgia, "Noto Serif TC", "Songti TC", serif; --sentence-sans: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", sans-serif; --sentence-mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace; /* ---------- 動態時間軸 ---------- */ --sentence-fast: 180ms; --sentence-slow: 260ms; --sentence-ease: cubic-bezier(.22,.61,.36,1); /* ---------- 排版基本鉤子：零陰影、零圓角、髮絲線 ---------- */ --sentence-radius: 0px; --sentence-shadow: none; --sentence-border-w: 1px; } @media (prefers-color-scheme: dark) { :root[data-ui="sentence"] { --sentence-bg: #0a1512; --sentence-bg2: #0f1e19; --sentence-bg3: #162922; --sentence-fg: #ece6d8; --sentence-fg2: #cfc8b8; --sentence-dim: #97978d; --sentence-line: #2a3b34; --sentence-line2: #3d5349; --sentence-inv-bg: #ece6d8; --sentence-inv-fg: #0a1512; --sentence-hot: #fd5f66; --sentence-warn: #ed893a; --sentence-calm: #79b58e; --sentence-mid: #9b994e; --sentence-sel: #ece6d8; --sentence-shade: rgba(236,230,216,.07); --sentence-scrim: rgba(10,21,18,.94); } } /* ================================================================ * 第 3 段 — 把 04 的設計語言套進 108 頁 * ================================================================ * 做法：打全站共用的 markup 慣例（schema/check_pages.py 驗的就是這些： * .app-header 內的 .eyebrow／h1／.sub、.back-stack、卡片、表格、徽章、 *

、輸入列……），不逐檔案改 markup。 * * 三條鐵律（貫穿以下所有規則）： * 1. 只加樣式，不加/刪/搬文字節點——不用 text-overflow:ellipsis 截字、 * 不用 display:none 藏內容、不用 order／flex-direction:row-reverse * 改變閱讀順序。document.body.innerText 經驗證不含 ::before/::after * 的 content（用 cdp.py 對 news2.html 現場量過），故本檔可以放心用 * 生成內容做圖形記號（▸／▮▯／○✓…），不會被 parity.py 誤判成內容被改。 * 2. 嚴重度一律三重（以上）編碼：格數／邊框粗細＋文字＋色。 * hot／warn／calm 三色只用於臨床嚴重度，不當導覽或裝飾色。 * 3. 觸控目標 ≥44px（僅本設計要求）；表格與橫向清單一律自己 * overflow-x:auto，不讓整頁橫向溢出。 * * 章節： * A. 全站基礎排版 * B. 頁首三件組／返回鍵（.app-header/.eyebrow/h1/.sub/.back-stack/.back-btn） * C. 卡片與容器（.card/.section-title/.organ-*／.lede） * D. 摺疊區塊（details.def-box/.info-box/.box-inner/.dot-line/.plain-list） * E. 輸入列與控制項（.field-row/.toggle-inline/label.item/.pt-badge/.exclusive-note） * F. 表格（.score-ref/.def-table/.ref/通用 table 防溢出） * G. 結果面板（.result/.metric-*／.risk-band/.risk-note/.breakdown） * H. 公式顯示（.meld-field/.formula-box） * I. 決策流程（.flow-*／.rec-*） * J. 分級／分類查閱頁（.tab-row/.sys-*） * K. 分級清單（.lv-*／.dept-*／.op-item，急診手術分級頁） * L. 頁尾與連結（footer.tool-footer/.ref-link/.tool-link/.ind-badge/.mono） * M. 通用觸控目標安全網＋動態降級 * Q. 藥物與抗生素查閱頁（tools/antibiotics.html 藥物查詢分頁、tools/drug-database.html； * drugcard／dc-*／db-*／cov-* 的造句設計配色，見該段開頭） * （N／O 兩段見檔案後段——N 側欄導覽觸控目標，O 造句導覽本體 js/sentence-nav.js， * 非本次交付範圍，維持原樣不動） * P. 癌症頁（tools/cancer.html）專屬元件——js/cancer-staging.js 與 * 30 個癌別共用的 js/*-pathway.js 各自的 render 函式輸出的 markup， * 不吃 A–N 段的全站共用慣例，見該段開頭說明。 * * ── 以下 R–AB 是 2026-08-13 補的「頁面專屬 class」層 ────────────────── * 起因：使用者實機指出 pathways/cardiogenic-shock.html 的藥卡沒有套到本設計。 * 根因與 P 段同一類——那些元件是各頁