/* ============================================================
   C1120 媽媽氣候行動聯盟 — 核後監督平台
   Canonical Design Tokens
   A/B 兩版共用。勿在此檔做版本差異，差異放各版 HTML <style>。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&family=Comfortaa:wght@700&display=swap');

:root {
  /* ── 品牌色盤（canonical）──────────────────────────────── */
  --c-primary:        #c6caff;   /* Periwinkle 淡藍紫   65~70% */
  --c-primary-dark:   #9ca2c7;   /* 灰紫（點綴/hover）  3~5%  */
  --c-eyebrow:        #595f80;   /* eyebrow 小標達 AA（白6.23/淡5.72/暖5.32），07-07 由 primary-dark #9ca2c7 壓深、su 再調沉穩 */
  --c-primary-mid:    #b3b5e0;   /* 灰紫輕               3~5%  */
  --c-beige-1:        #fef5ea;   /* 淺米色               次主色 */
  --c-beige-2:        #ead2ad;   /* 中米色               次主色 */
  --c-beige-3:        #f1ca9e;   /* 暖米橙               次主色 */
  --extrude-face:     var(--c-beige-2);  /* 地圖積木頂面＝中米色 #ead2ad（2026-07-13 su 定案，取代原珊瑚 #e44d52；積木是裝飾非警示、脫離語義 coral）*/
  --extrude-wall:     var(--c-beige-3);  /* 地圖積木側面＝暖米橙 #f1ca9e（同上，取代原 face 自動加深）*/
  /* 地圖陸地色＝periwinkle 以 twmap.js 的 DIM_OPACITY(.45) 疊在地圖段底色上的**實色結果**（≈#dfe2fd）。
     2026-08-24 建：本島縣市走 `fill:--c-primary + opacity:.45`，離島插卡島形卻只寫了 fill、沒跟上那個
     透明度，於是同一座蘭嶼在主圖與插卡上濃度差了約 25 階（su 發現）。插卡改用本 token 即與主圖全等。
     ⚠ 主圖**不改用本 token**：那邊的 opacity 同時在管縣市之間的白色分隔線（stroke:#fff），
        換成實色填充會讓邊界從 45% 白跳成純白＝順手改掉沒被點名的東西。要不要統一是另一題。
     ⚠ 改 --c-primary 或 DIM_OPACITY 時，這裡的 45% 要一起對——比例目前是兩處各寫一份。 */
  --c-map-land:       color-mix(in srgb, var(--c-primary) 45%, var(--c-bg-soft));
  --c-coral:          #e44d52;   /* 珊瑚紅（強調/注意）  10~12% */
  --c-coral-bg:       #fdeaea;   /* 珊瑚紅背景           */
  --c-orange:         #c84630;   /* 深橘（輔助強調）     5~8%  */
  --c-normal:         #4a9e6b;   /* 正常綠               監測用 */
  --c-normal-bg:      #e6f4ec;   /* 正常綠背景           */
  --c-caution:        #e44d52;   /* 注意紅 = 珊瑚紅      監測用 */
  --c-caution-bg:     #fdeaea;   /* 注意紅背景           */

  /* ── 中性色（案 D 清透天光定案：暖棕系替換 peri 冷調）── */
  --c-ink:            #2a2723;   /* 暖棕近黑（原 #1e1e2e）*/
  --c-text:           #4a463f;   /* 暖棕字色（原 #3a3a52）*/
  --c-sub:            #6c675e;   /* 暖灰棕次要字（原 #6b6b80）*/
  --c-line:           #e0e2f0;   /* 線條（保留 peri 調，原 #dde0f4）*/
  --c-line-2:         #eef0f8;   /* 輕線條               */
  --c-bg:             #ffffff;   /* 頁面 surface 底色    */
  --c-bg-soft:        #f4f5fb;   /* 極淡彌散底（原 #f8f7ff）*/
  --c-page-bg:        #f4f5fb;   /* 頁面地色（body／nav 拱形／山遮罩溶入目標的共同基準）
                                    2026-08-21 收編：原為 4+2 處散落 hardcode（index.html 內聯 4／page-chrome.css 2），
                                    index.html 舊註解「待色彩 #4 一併收編為 token」即指此。
                                    2026-08-21(晚) su 拍板改值 #f9f9f9 → #f4f5fb：此值＝地圖段彌散大底的起始色
                                    （與上方 --c-bg-soft 同值，刻意不寫成 var() 以保留兩者各自調整的餘地），
                                    因此段標底／地圖段頂那道 ΔE 3.35 的硬階變成同色連續。⚠ 這同時是山／海屏
                                    下緣 mask 的溶入基準，改值＝換溶接基準（改前改後對照：~/_claude_view/c1120-地色改值預覽/）。 */
  --c-dark:           #262019;   /* 深色（footer/強調）暖炭 R≥B */
  --c-dark-hover:     #3a322a;   /* dark hover 暖炭 */

  /* ── 彌散大底（案 D 清透天光）────────────────────────── */
  --c-diffuse-from:   #f8f9fd;
  --c-diffuse-to:     #f1f3fb;
  --c-diffuse-corner: rgba(188,192,240,.20);  /* 深紫角（hsl≈230° 規格對齊）*/
  --c-diffuse-warm:   hsl(24 85% 93%);        /* ≈ #fceade 杏桃；hue=24≥22 守住 */
  --c-diffuse-foot:   #c6caff;                /* 底部 peri 彌散 */

  /* ── 點綴綠 G2 青草（監測正常態、除役進度條）──────── */
  --c-sage-fill:  #6aa85f;   /* 背景/圖形專用；對白底 2.6:1，勿作文字前景 */
  --c-sage-fg:    #2d6020;   /* 文字前景；on sage-fill 6.59:1 ✓ WCAG AA */

  /* ── 電廠狀態 chip（全部從品牌色域衍生，WCAG AA ≥4.5:1 已驗）── */
  --chip-op-fg:       #2d6847;   /* 運轉中—sage 深綠 5.76:1  */
  --chip-op-bg:       #e2f4e8;
  --chip-op-bd:       #a8d9b8;
  --chip-deing-fg:    #7a3c00;   /* 除役中—深琥珀橘 7.30:1  */
  --chip-deing-bg:    #faecd8;
  --chip-deing-bd:    #e8c898;
  --chip-de-fg:       #5a5d78;   /* 已除役—灰紫（刻意低彩）5.51:1 */
  --chip-de-bg:       #ecedf6;
  --chip-de-bd:       #c8cad8;
  --chip-seal-fg:     #3840a0;   /* 封存中—深藍紫 peri 7.32:1 */
  --chip-seal-bg:     #e8eaff;
  --chip-seal-bd:     #b0b5f0;
  --chip-store-fg:    #5a3e90;   /* 貯存中—薰衣草紫 7.05:1  */
  --chip-store-bg:    #ede8ff;   /* 暖薰衣草（vs seal 冷藍白） */
  --chip-store-bd:    #c4b2f2;
  --chip-review-fg:   #9c2900;   /* 重啟審查中—深橘紅 6.52:1 */
  --chip-review-bg:   #fde8e0;
  --chip-review-bd:   #e8a890;

  /* ── 發展史分類標籤（tag，全部從品牌色域衍生）──────── */
  --tag-tech-fg:      #3840a0;   /* 技術發展—深藍紫 peri 7.11:1 */
  --tag-tech-bg:      #e4e6ff;
  --tag-policy-fg:    #7a3c00;   /* 政策事件—深琥珀橘 7.30:1 */
  --tag-policy-bg:    #faecd8;
  --tag-incident-fg:  #8c2028;   /* 事故爭議—深珊瑚紅 7.71:1 */
  --tag-incident-bg:  #fdeaea;
  --tag-civic-fg:     #2d6847;   /* 公民行動—sage 深綠 5.74:1 */
  --tag-civic-bg:     #e0f4e8;

  /* ── 圓角（圓潤硬偏好）──────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r:      16px;     /* 卡片標準             */
  --r-lg:   24px;     /* 大卡片/Hero          */
  --r-full: 999px;    /* chip/pill            */

  /* ── 陰影（冷紫；地圖段卡片改用 --shadow-warm-*）────── */
  --shadow-sm:  0 2px 8px rgba(100,110,200,.08);
  --shadow-md:  0 6px 24px rgba(100,110,200,.12);
  --shadow-lg:  0 12px 48px rgba(100,110,200,.14);

  /* ── 暖棕陰影（案 D 地圖卡片、底板）────────────────── */
  --shadow-warm-sm: 0 2px 10px rgba(42,39,35,.08);
  --shadow-warm:    0 6px 32px rgba(42,39,35,.12);
  --shadow-warm-lg: 0 12px 48px rgba(42,39,35,.16);

  /* ── Vue 元件語意色票（for Tailwind arbitrary-safe 用法）────── */
  --c-meta-zebra:   color-mix(in srgb, var(--c-beige-2) 12%, transparent);
  --c-hero-tint:    color-mix(in srgb, var(--c-beige-2) 14%, transparent);
  --c-ev-dot:       color-mix(in srgb, var(--c-beige-2) 50%, var(--c-sub));
  --c-switch-idle:  color-mix(in srgb, var(--c-beige-2) 22%, white);
  --c-switch-hover: color-mix(in srgb, var(--c-beige-2) 45%, white);

  /* ── 排版 ──────────────────────────────────────────── */
  --font-serif:  "Noto Serif TC", "Georgia", "Times New Roman", serif;
  --font-sans:   "Noto Sans TC", "PingFang TC", -apple-system, "Microsoft JhengHei", sans-serif;
  --en-round:    "Comfortaa", sans-serif;   /* 英文 accent 字族（段標巨字 History/Sites；su 拍板保留英文。2026-07-14 自 index 本地回寫成 canonical）*/

  --lh-title:  1.25;   /* H1/H2 緊排          */
  --lh-h3:     1.35;
  --lh-body:   1.75;   /* 內文（客戶要求）    */
  --lh-ui:     1.5;    /* 小元件              */

  /* ── 佈局 ──────────────────────────────────────────── */
  --maxw:       1440px;
  --wrap-px:    clamp(16px, 4vw, 64px);
  --nav-h:      80px;
}

/* ── 全域 reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--lh-title);
  margin: 0;
}
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ── 共用電廠狀態 chip ──────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-full);
  border: 1px solid;
  line-height: var(--lh-ui);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.chip.st-op     { color: var(--chip-op-fg);     background: var(--chip-op-bg);     border-color: var(--chip-op-bd); }
.chip.st-deing  { color: var(--chip-deing-fg);  background: var(--chip-deing-bg);  border-color: var(--chip-deing-bd); }
.chip.st-de     { color: var(--chip-de-fg);     background: var(--chip-de-bg);     border-color: var(--chip-de-bd); }
.chip.st-seal   { color: var(--chip-seal-fg);   background: var(--chip-seal-bg);   border-color: var(--chip-seal-bd); }
.chip.st-store  { color: var(--chip-store-fg);  background: var(--chip-store-bg);  border-color: var(--chip-store-bd); }
.chip.st-review { color: var(--chip-review-fg); background: var(--chip-review-bg); border-color: var(--chip-review-bd); }
.chip.normal   { color: var(--c-normal);  background: var(--c-normal-bg);  border-color: #9cd4b2; }
.chip.caution  { color: var(--c-caution); background: var(--c-caution-bg); border-color: #f0b8ba; }
.chip.neutral  { color: var(--c-sub); background: #f4f4f8; border-color: var(--c-line); }

/* ── 監測進度條 ──────────────────────────────────────── */
.mon-bar {
  height: 12px;
  border-radius: var(--r-full);
  background: var(--c-line-2);
  overflow: hidden;
}
.mon-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  transition: width .5s ease;
}
.mon-bar > i.normal  { background: var(--c-normal); }
.mon-bar > i.caution { background: var(--c-caution); }

/* ── 動效安全閘 ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}