/* ========================================================================== SPOUT DESIGN — 官網視覺系統 ========================================================================== */ @font-face { font-family: 'DFLiSong'; src: url('../fonts/DFLiSongStd-W3.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'DFLiSong'; src: url('../fonts/DFLiSongStd-W5.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'DFLiSong'; src: url('../fonts/DFLiSongStd-W7.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Bodoni Moda（英文字體）——2026-09-28 起改為主題內自架，不再走 Google Fonts CDN。來源與授權見 fonts/bodoni-moda/README.txt、OFL.txt。可變字體：wght 400–900、含 opsz 光學尺寸軸； unicode-range 沿用 Google Fonts 原本的 latin／latin-ext 分割，瀏覽器只下載用得到的子集。 */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/bodoni-moda/bodoni-moda-latin-ext-opsz-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../fonts/bodoni-moda/bodoni-moda-latin-ext-opsz-italic.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/bodoni-moda/bodoni-moda-latin-opsz-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../fonts/bodoni-moda/bodoni-moda-latin-opsz-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { /* 全站區塊左右內距的單一來源。原本只定義在 .section 這個 class 上，2026-09-26 發現這個做法有一個隱藏限制：CSS 自訂屬性只會繼承給「該規則所在元素的子孫」，任何不在 .section 底下的元素完全讀不到值（例如 .site-header／.nav-trigger／.fan-menu--social 這些獨立掛在底下、不屬於任何 .section 的元素），套用 var(--section-side-padding) 會直接失效、悄悄退回瀏覽器預設值，不會報錯也看不出來，這輪修 Header／漢堡選單對齊時才踩到。改成定義在 :root，全站任何元素都能穩定繼承到同一個值，各斷點只需要覆蓋這裡一處，.section 的 padding 跟其他所有用到這個變數的地方會自動同步 */ --section-side-padding: var(--space-12); } :root { /* ---- 色彩系統 ---- 2026-08-28 重新定義：業主指出 --ink 從 #000000 改成 #505050 後，中間 8 階灰階仍是照著舊端點（white→#000000）內插算出來的舊值，導致 --grey-900(#505050) 反而比 --grey-800(#333333) 亮，出現「數字越大顏色越淺」的矛盾，不符合灰階遞增/遞減的基本邏輯。重新內插原則： 1. 頭尾端點改成 white(#ffffff) → ink(#505050)，取代舊的 white → #000000 端點，讓整條刻度跟目前的 --ink 定義一致。 2. --grey-300（品牌灰 Brand Grey #c9caca）業主明確要求維持原值不動，這是設計稿定案的品牌色，不隨這次內插改變。 3. 因為 --grey-300 要固定住、不能被公式蓋掉，改採兩段內插： white → grey-300 分 4 階（50/100/200/300）， grey-300 → ink 分 7 階（300/400/500/600/700/800/900/ink， counting 300 為共用起點），確保 --grey-300 精準等於 #c9caca，同時前後兩段各自都是均勻等距漸層，不會在中間出現轉折感。這組新數值業主已用色票對照圖確認過，全站遞減嚴格單調，不再有 900 比 800 亮的矛盾。 */ --grey-50: #f2f2f2; --grey-100: #e4e4e4; --grey-200: #d6d7d7; --grey-300: #c9caca; /* 品牌灰 Brand Grey，業主要求維持原值不隨內插改變 */ --grey-400: #b8b9b9; --grey-500: #a6a7a7; --grey-600: #959696; --grey-700: #848484; --grey-800: #737373; --grey-900: #616161; --ink: #505050; /* 業主 2026-08-24 要求：原純黑 #000000 全站改成 #505050，其餘色票不變。這也是新灰階刻度的終點 */ --white: #ffffff; /* 純白，新灰階刻度的起點 */ --placeholder: var(--grey-300); /* Logo / 徽章 / icon 替代色塊 */ /* ---- 字級系統（10 階，16px 為內文基準） ---- */ --text-14: 14px; --text-16: 16px; /* base */ --text-18: 18px; --text-20: 20px; --text-22: 22px; --text-24: 24px; --text-26: 26px; --text-28: 28px; --text-30: 30px; --text-32: 32px; /* ---- 字距（先歸零，日後需要再套用 utility class） ---- */ /* ---- 字距系統 ---- CSS letter-spacing 只能吃 em/px 等單位，沒有「Illustrator tracking 值」這種格式可以直接輸入，但兩者是固定的線性換算關係：CSS em 值 × 1000 = Illustrator 字元面板的 Tracking 值（Illustrator 的 Tracking 本來就是以 1/1000 em 為單位）。業主是平面設計背景、習慣用 Illustrator 字元面板的 Tracking 數值溝通字距，這裡直接把對應的 Illustrator 數值標在註解裡，方便業主跟工程端對話時直接對照，不需要每次都心算換算。 */ --tracking-0: 0em; /* Illustrator Tracking: 0 */ --tracking-xs: 0.1em; /* Illustrator Tracking: 100 */ --tracking-tight: 0.2em; /* Illustrator Tracking: 200 */ /* 2026-08-24：--tracking-wide (0.4em / Illustrator 400) 全站沒有任何元素實際使用，業主要求先移除，之後有需要再重新建立 */ /* ---- 行高（4 階，1–2 倍區間） ---- */ --leading-1: 1.2; /* 標題／緊 */ --leading-2: 1.5; /* 內文預設 */ --leading-3: 1.75; /* 舒展內文 */ --leading-4: 2; /* 長文/寬鬆段落 */ /* ---- 間距系統（10 階，4px 基準） ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; /* ---- 水波紋線條系統：隨螢幕寬度連續縮放 ---- Hero 水波紋（canvas，main.js initRippleCanvas 讀取本變數的計算值）與硬幣觸水波紋（.splash-ripple，SVG）兩處共用同一個線寬 token --stroke-water，統一在這裡調整，不用兩處分別改。（2026-09-20：原本還有第三處「回彈水柱 .splash-column」與它專用的 --stroke-water-thin，水柱改成填色的半調圓點水花後不再有描邊，該變數已刪除，業主同意。）原本三處都是寫死的固定 px（5 / 5 / 4），搭配 vector-effect: non-scaling-stroke（讓線條粗細不受 SVG 縮放影響），這在桌機沒問題，但小螢幕上 viewBox 整體視覺縮小、線條粗細沒有跟著等比例縮小，導致小裝置上線條「相對畫面比例」顯得過粗。改用 clamp(最小值, 隨螢幕寬度浮動的中間值, 最大值)，讓線寬隨螢幕寬度連續、流暢地縮放，不會有斷點切換造成的視覺跳動（水波紋是很細膩的線條動畫，斷點式的粗細突變會很明顯、顯得廉價，連續縮放才符合這個動畫本身的質感）。中間值用 vw（視窗寬度百分比）而非 vh，因為線條粗細應該跟隨版面的「水平方向」尺寸感縮放，這跟大部分 RWD 排版的直覺一致。--stroke-water 是主要水波紋／觸水波紋用的寬度 */ /* 2026-09-07：業主指定線條粗細改為絕對值 2px。--stroke-water 是背景水波紋跟硬幣觸水水花共用的 token，業主確認兩者要連動，不要分開設定 */ --stroke-water: clamp(1.6px, 0.4vw, 2px); /* ---- 圓角系統（4 階） ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; /* ---- 版面容器 ---- */ --container-max: 1240px; /* ---- 圖示系統（3 階） ---- */ --icon-sm: 16px; /* 行內小圖示、表單符號 */ --icon-md: 24px; /* 導覽/按鈕圖示（例：水滴選單圖示） */ --icon-lg: 34px; /* 強調用圖示（例：footer 社群圖示） */ /* ---- 元件狀態 ---- */ --state-hover-opacity: 0.75; --state-disabled-opacity: 0.4; --focus-ring: 2px solid var(--ink); --focus-ring-offset: 3px; /* ---- 字體 ---- */ --font-cn: 'DFLiSong', 'Noto Serif TC', serif; --font-en: 'Bodoni Moda', 'DFLiSong', serif; /* ---- 節奏 ---- */ --ease-water: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- 導覽色系（依 JS 偵測目前疊在哪個區塊上，動態切換） ---- hover：互動時的強調色（滿色黑／白） muted：扇形選單文字預設色（未 hover 前的淡化狀態）預設值＝淺色背景版本。 ⚠️ 2026-09-08 死碼清理記錄：這裡原本還提到「JS 會在偵測到深色背景區塊時，於切換成對應深色背景版本」，並且下方也有對應的 html[data-nav-bg="dark"] { ... } 選擇器區塊。但這個機制早在 2026-08-22 就被業主關閉，JS 永遠不會寫入這個屬性，該選擇器規則從未生效過，已確認是死碼並整段刪除。全站真正生效的深色背景智慧變色機制是 .nav-trigger.is-over-dark（水滴/文字疊在 Footer 深色底上時由 JS 局部加上這個 class），不要再照抄 data-nav-bg 這個寫法去做新的深色背景適配。 2026-09-28：--nav-fg-idle（水滴本身未互動時的顏色）已刪除——水滴改成圖檔後沒有任何元素讀取它。它的顏色沿革（grey-500→600→700）與刪除前原文逐字保存在《已移除程式碼備查_2026-09-28.md》E10；本檔其他註解中提到 --nav-fg-idle 的地方是歷史說明，不是現行變數 ---- */ --nav-fg-hover: var(--ink); /* 2026-09-08：新增獨立變數，只給扇形選單連結（.fan-menu a）跟水滴提示文字（.droplet-hint）的 hover/highlight 狀態用，不再共用 --nav-fg-hover。原因：--nav-fg-hover 同時控制水滴本身的亮燈顏色跟 Logo 顏色，業主要求「Footer 上選單連結 hover 要變深色，但水滴本身亮燈仍要維持白色」，這兩個需求互相衝突，沒辦法共用同一個變數同時滿足，才拆成獨立變數。淺色背景版本沿用 --ink（深色），跟原本 --nav-fg-hover 在淺色背景下的值一致，不影響淺色背景的既有視覺 */ --nav-fg-link-hover: var(--ink); /* 2026-09-08：新增獨立變數，只給水滴下方常駐提示文字（.droplet-hint，「選單」二字）用，跟水滴本身（--nav-fg-idle）綁定同一個顏色來源，不再跟 --nav-fg-muted（扇形選單連結的預設色）共用。業主要求「選單」二字要跟水滴顏色一致，但扇形選單連結的預設顏色要維持獨立（Footer 上是白色），這兩者用同一個變數會互相衝突，所以拆開。淺色背景版本直接沿用 --nav-fg-idle 的值，等於淺色背景下維持原本的行為不變 */ /* 「社群」二字（.droplet-hint）default 色——智慧變色：淺色背景：--ink（#505050，宗霖 2026-09-24 晚指定；先前一版用 --grey-500 跟水滴平均色一致，但在灰底上太淡、看不清楚）；深色背景（Footer，.nav-trigger.is-over-dark）：--white（2026-09-24 晚宗霖改為白色；先前是 --grey-500），見下方 .nav-trigger.is-over-dark 的覆蓋。不綁 --nav-fg-idle（已不再有元素使用，水滴本體改為圖檔） */ --nav-fg-hint: var(--ink); /* 水滴 hover／展開時的濾鏡：新水滴是固定灰階圖檔，無法像舊版遮罩水滴那樣改 background-color，改用 filter 調整明暗。淺色背景變深（更有份量），深色背景（Footer）變亮（維持可視度） */ --droplet-hover-filter: brightness(0.62) contrast(1.15); /* 2026-09-08：新增獨立變數，只給水滴展開後的社群圖示（.fan-menu--social a，FB/IG/LINE/Threads）用，不再跟 --nav-fg-muted 共用。業主要求這組圖示的 default 顏色要能獨立指定成 grey-700（比原本共用的 --nav-fg-muted 深一階），不要因為 --nav-fg-muted 之後被其他地方調整而被連動改變 */ --nav-fg-social-icon: var(--grey-600); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* 2026-09-24：全站禁止左右滑動（宗霖要求）。根因：body 原本就有 overflow-x:hidden，理論上瀏覽器會把 body 的 overflow 值「傳遞」給（視窗實際捲動的對象是 html，不是 body），但實測（Chromium）不管用——html 仍可被拖到 scrollLeft:135px，跟手機版已知的橫向溢出量（135px，見 index.html 硬幣水波紋、 contact.html 側欄裝飾等未收邊元素）完全吻合，代表這個「傳遞」沒有實際生效，html 本身才是真正需要設定的層級，body 那條單獨設定並不夠。這裡直接在 html 上也明確加 overflow-x（見下方 2026-09-26 追記，這裡當時用的是 hidden，已改成 clip）。 ⚠️⚠️⚠️ 2026-09-26 重大追記（宗霖回報：首頁硬幣落水動畫捲到一半莫名蓋上一大塊灰色空白，硬幣還沒入水就被吃掉）——上面這個 2026-09-24 的「防呆」本身就是根因，不是防呆完全無害： CSS 規範規定，只要 overflow-x 被設成 visible 以外的值（這裡是 hidden），瀏覽器就【必須】把同一個元素原本沒特別設定、維持預設 visible 的 overflow-y 自動升級成 auto（兩軸不能一個 visible 一個不是 visible，只要有一軸不是 visible，另一軸就會被強制變成可捲動的 auto）。這裡 html 跟 body 兩層都被設了 overflow-x:hidden，兩層的 overflow-y 因此雙雙被瀏覽器自動偷改成 auto——實測 getComputedStyle 證實：html/body 的 overflow-y 從沒設定過的 visible 變成 auto。「html 跟 body 同時變成各自獨立的可捲動容器」正是這次事故的根因：全站所有 position:sticky 元素（.hero-pin、獎項清單的 .awards-scroll-sticky 等）都是靠「相對於最近的可捲動祖先」來卡住畫面，最近可捲動祖先原本該是瀏覽器視窗本身；現在 html／ body 意外插進來變成兩層額外的可捲動容器，sticky 的定位基準被打亂，在某些瀏覽器/環境下整個失效——實測 .hero-pin 的 getBoundingClientRect().top 直接等於 -scrollY，等於完全沒有卡住，硬幣所在的整塊內容跟著頁面正常捲走，捲完那一小段（僅一個視窗高）後，「硬幣掉落／觸水」這一大段本來要在畫面中央慢慢播放的動畫，因為畫面本身已經捲走消失，變成後面一大段（將近一個螢幕高）空空如也的軌道空間，才會看起來像「莫名跑出一塊灰色空白」，硬幣也才會在還沒真正入水的分鏡就被「吃掉」（不是被誰蓋住，是硬幣所在的整個畫面本身已經被捲出視窗外）。這個 bug 在無頭測試環境剛好沒有實際重現（推測是無頭瀏覽器對這個特定 CSS 規格邊界案例的實作跟真實瀏覽器有落差），導致一開始排查花了很多輪都對不上，改用真正的瀏覽器手動逐步捲動測量 .hero-pin 的 rect.top 才抓到。修法：改用 overflow-x: clip 取代 overflow-x: hidden。clip 是 CSS 較新的關鍵字，效果一樣是「裁掉超出範圍的內容、不給捲動」，但明確不受這條「另一軸強制變 auto」的規範限制（clip 從設計上就是為了不產生可捲動容器），實測 overflow-y 恢復成 visible， sticky 完全恢復正常，橫向捲動依然完全鎖死（scrollWidth／強制 scrollTo 都驗證過）。瀏覽器支援：Chrome/Edge 90+、 Safari 16+、Firefox 102+，2026 年的正式站台無相容性疑慮 */ overflow-x: clip; } body { font-family: var(--font-cn); font-size: var(--text-16); line-height: var(--leading-2); color: var(--ink); background: var(--grey-100); overflow-x: clip; /* 2026-09-26：同上，從 hidden 改成 clip，避免強制 overflow-y:auto 打斷全站 position:sticky */ letter-spacing: var(--tracking-0); } /* loading 期間鎖定捲動：#loading-screen 雖然用 position:fixed 蓋滿全螢幕，但底下的頁面內容原本還是能被滑鼠滾輪/觸控捲動（只是被蓋住看不到），業主要求 loading 期間完全不能捲動。由 main.js 在 loading 開始時加上這個 class、loading 畫面真正隱藏的同一刻移除，兩者動作同步 */ body.is-loading { overflow: hidden; height: 100vh; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; border: none; background: none; cursor: pointer; } /* ---- 無障礙：鍵盤 focus 可視樣式（全站統一） ---- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* ---- 元件狀態：disabled 統一樣式 ---- */ button:disabled, input:disabled, [aria-disabled="true"] { opacity: var(--state-disabled-opacity); cursor: not-allowed; pointer-events: none; } /* ---- 滾動淡入：data-reveal 元素進場動畫（整塊淡入 + 輕微上移）---- 涵蓋所有標題與內文區塊，統一用同一種手法，不再區分逐行遮罩滑入 */ [data-reveal] { opacity: 0; transform: translateY(48px); z-index: 1; transition: opacity 1s var(--ease-water), transform 1s var(--ease-spring); } [data-reveal].is-visible { opacity: 1; transform: none; } /* 2026-09-12：宗霖要求全站中英標 appear animation 統一，以首頁 showcase 分類卡片（室內設計/品牌設計/整合型設計）為模範——那組英標中標是同一個 data-reveal 容器一起觸發，動畫參數完全相同。拿掉這裡原本讓中標（.about-tagline）位移 80px、比英標（.about-label 沿用全域 48px）更大的特例，兩者現在統一用全域預設的 48px，視覺上才會是「同一個動作」，不是中標動得比英標明顯的兩個各自獨立的動作 */ /* 內文區塊延遲稍晚一點再淡入，製造漸進層次感（泉力以赴、設計實力兩塊都用同一個延遲時間，讓標題→內文的節奏感一致） */ .about-desc-group[data-reveal], .stat-block-body[data-reveal] { transition-delay: 0.25s; } /* 2026-09-12：about.html 的「設計實力推動產業與城市發展」區塊（about-recognition-*，從首頁 #recognition 簡化複製而來，見 about.html 對應區塊上方註解）補齊 appear animation，宗霖指出標題/內文/照片完全沒有進場動畫。套用跟首頁 .stat-block-body 完全一致的節奏：標題與照片正常淡入，內文延遲 0.25s 晚一點，不發明新的時間值 */ .about-recognition-body[data-reveal] { transition-delay: 0.25s; } /* 2026-09-11 第一次調整：全站英標補上 data-reveal 後，曾經統一跟對應的中標之間錯開 0.15s（英標先、中標後），營造由上到下的閱讀順序。 2026-09-11 第二次調整（撤回上面的做法）：宗霖盤點後發現這造成全站中英標動畫時序不一致——首頁三組（About/FAQ/Contact）用了 0.15s 錯開、變成「中標明顯慢一拍」，但 Showcase 三個分類卡片的英標中標是同一個 data-reveal 容器（topRow）觸發、完全同步，兩種模式並存在同一個頁面上很突兀。宗霖明確要求統一成「差不多時間出現」（即 Showcase 那種同步模式），所以撤回這裡原本的 transition-delay:0.15s 宣告，讓英標中標都用基礎值 0s、完全同步淡入 */ /* 2026-09-21 移除：#faq .page-header-cta[data-reveal]、.page-label[data-reveal]／.contact-label[data-reveal]（含 .is-visible 變體）、 html[data-page="home"] .page-label[data-reveal]（含 .is-visible 變體）、.contact-title[data-reveal] 這幾組規則。原因：這些元素「自己」已不帶 data-reveal（2026-09-12 全站中英標統一重構後，淡入改掛在外層 .page-header／.contact-aside 容器），選擇器在 17 頁 × 5 種寬度的實測與靜態掃描中一次都沒有比對到元素，是永遠不會生效的死碼。 ⚠️ 若日後又讓 .page-label／.contact-label／.contact-title／.page-header-cta 自己帶 data-reveal，會與 main.js 直接寫入的 transform／transition 互搶同一個屬性、造成位置錯亂（FAQ 的 CTA 曾因此偏移 116px）。屆時要恢復「transform:none ＋只保留 opacity transition」的排除規則；原規則與完整除錯記錄逐字保存在《已移除程式碼備查_2026-09-21.md》。 */ .showcase-row--bottom[data-reveal] { transition-delay: 0.15s; } /* 2026-09-10：作品內頁的標題區塊+資訊總覽，套用同一套「主要內容先出現、補充資訊延遲淡入」慣例——業主反饋原本只有資訊總覽有 appear animation、標題區塊完全沒有動畫，兩者現在合併成同一塊白底、物理距離很近，若整塊只用單一 data-reveal 一起觸發，容易在使用者捲動到一半時「上半部已完全進入視窗、下半部還沒觸發 20% threshold」，動畫效果不夠俐落；也不想讓每個小欄位各自跳動顯得太花。折衷做法：標題區塊（.work-detail-title-section）正常淡入，資訊總覽延遲 0.25s（沿用上面 .stat-block-body 同一個數值，不發明新的節奏）晚一點淡入，兩塊有先後層次但克制、統一 */ .work-detail-info-summary[data-reveal] { transition-delay: 0.25s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 共用元件：膠囊標籤（Tag Pill） ========================================================================== */ /* 全站所有「圓角膠囊、點擊後反黑」的標籤共用同一份樣式定義，目前套用在：聯絡我們表單的服務項目（.pill）、作品案例頁的分類篩選標籤（.project-filter-item）。之前這兩處各自獨立寫了一份幾乎相同的 CSS，只要改其中一邊（內距/顏色/字重）忘記同步另一邊，兩處視覺就會不一致——這正是先前反覆回報「不一樣」的根本原因。統一成單一元件類別後，往後任何頁面需要同款標籤，直接加上 .tag-pill 即可，只有一份真相來源，不會再有兩邊各自維護、彼此漂移的問題。 */ .tag-pill { display: inline-flex; align-items: center; border: 1px solid var(--grey-600); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-family: var(--font-cn); font-weight: 500; font-size: var(--text-14); /* 明確鎖定 line-height，不放任它被繼承來源不同而跑掉。根因：這個元件套用在不同 HTML 標籤上時（