/** * gear-list.css — 裝備清單共用樣式（2026-08-10） * * 三個掛載點共用：/gear（母版編輯）、trip.html overlay（行程模式）、 * tripPreview（隊員模式）。一份樣式三處長得一樣，是刻意的—— * 使用者在三個地方看到的是同一份清單，長不一樣只會讓人以為是不同東西。 * * ⚠️ 顏色紀律（memory feedback_darkmode_color_rules）： * ① 所有顏色都在這裡定義成 token，**JS 生成的 markup 一律只給 class**， * 絕不 inline style 寫色 —— inline 贏過所有 CSS，日後要加暗化就追不上了。 * ② 等級色是「語意色」，與品牌 CTA 的 --pk-amber 刻意分開： * 畫面上同時有「重要度」與「主要動作」時，兩者不可以撞色。 * ③ 淡化不用 opacity（見規則四），用字級/字重撐層級。 */ :root { /* ── 重要度色階（S 最高 → D 最低；N/L 是特殊標記不在光譜上）── 取色原則：全部往土色調壓，跟 Dawn Spectrum 同一個世界； 不用純紅/純橘那種警示色（清單上有 20 個 S 級時整片會太吵）。 */ --gl-S: #B0392E; --gl-S-bg: rgba(176, 57, 46, 0.10); --gl-A: #C07020; --gl-A-bg: rgba(192, 112, 32, 0.10); --gl-B: #94800F; --gl-B-bg: rgba(148, 128, 15, 0.12); --gl-C: #3B6FA0; --gl-C-bg: rgba(59, 111, 160, 0.10); --gl-D: #7C7668; --gl-D-bg: rgba(124, 118, 104, 0.10); --gl-N: #98A0AC; --gl-N-bg: rgba(152, 160, 172, 0.12); --gl-L: #3E7B7D; --gl-L-bg: rgba(62, 123, 125, 0.10); /* ── 左側漸層長度＝重要度（創辦人 2026-08-11 選定「F 案」）── 顏色之外多一條編碼通道：重要的東西「視覺重量」真的比較重， 而且色弱也分得出來（色相看不出差異時，長度還在）。 🔧 要微調就改這七個數字，其餘規則不必動。 */ --gl-len-S: 60%; /* 絕對必要 */ --gl-len-A: 42%; /* 相當重要 */ --gl-len-B: 26%; /* 必須有 */ --gl-len-C: 14%; /* 建議攜帶 */ --gl-len-D: 7%; /* 自行考量 */ --gl-len-N: 20%; /* 不建議帶：不在強度光譜上，但要看得見——它是「刻意告訴你別帶」 的資訊（氧氣罐那類），配合灰字讀成「已標記、但不重要」 */ --gl-len-L: 26%; /* 領隊協調：也不在光譜上，但這是**待辦**（有人得去協調）， 所以給得到 B 級的存在感 */ --gl-fade: 0.22; /* 漸層起點濃度；再高會蓋到品名的可讀性 */ /* N 級的文字色：比主文灰、但仍讀得清楚（對白底 4.7:1，過 WCAG AA）。 🔴 不要直接用 --gl-N (#98A0AC) 當文字色——那個是給色塊用的， 當文字時對比只有 2.5:1，等於把「別帶什麼」這條資訊藏起來。 */ --gl-N-ink: #6E7480; --gl-line: rgba(174, 189, 212, 0.32); --gl-line-2: rgba(174, 189, 212, 0.55); --gl-surface: #FFFFFF; --gl-surface-2: #F7F5F0; --gl-radius: 12px; } /* ══ 容器 ═════════════════════════════════════════════ */ .gl-root { display: flex; flex-direction: column; gap: 10px; color: var(--pk-dusk, #4A5168); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; } .gl-root *, .gl-sheet * { box-sizing: border-box; } /* ── 子版切換列 ─────────────────────────────────────── */ .gl-variants { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; } .gl-variants::-webkit-scrollbar { display: none; } .gl-vchip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1.5px solid var(--gl-line-2); border-radius: 999px; background: var(--gl-surface); color: var(--pk-dusk, #4A5168); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .16s ease, border-color .16s ease, color .16s ease; } .gl-vchip:hover { border-color: var(--pk-amber, #C4845A); } .gl-vchip.is-on { background: var(--pk-night, #1E2330); border-color: var(--pk-night, #1E2330); color: #fff; } .gl-vchip__wt { font-size: 12px; font-weight: 600; opacity: .78; font-variant-numeric: tabular-nums; } /* 選中的子版 chip 內的 ✎（2026-08-19 創辦人：「編輯子版名稱的方式有點怪，很不直觀」）。 編輯入口原本是排在整列最後的獨立鉛筆 chip —— 和它要編輯的對象隔著其他 chip、 而且這一列橫向捲動時常整個捲出畫面外。改成長在選中的那顆上：**看得到就點得到**。 ⚠️ 不用巢狀