/* Global site theme tokens extracted from base.html and index.html. */
:root {
    --gold-primary: #C48945;
    --gold-deep:    #8F6128;
    --gold-bright:  #e7c985; /* Keep the index.html value that was already winning in cascade. */
    --gold-line:    rgba(196, 137, 69, 0.32);
    --cream-site:   #F7F1E7;
    --cream-panel:  #FFFDF8;
    --ink-site:     #2A1A0A;
    --ink-soft:     #584635; /* Shared by legacy homepage tokens and newer site tokens. */
    --shadow-refined: 0 18px 48px rgba(42, 26, 10, 0.10);

    /* Mobile drawer wood tones. */
    --wood-dark:    #2E1A0E;
    --wood-mid:     #3D2410;
    --wood-light:   #5C3820;
    --wood-grain:   #4A2C0A;

    --gold: #c48945;
    --gold-rich: #8f6128;
    --gold-pale: #f0dfbd;
    --gold-wash: rgba(196, 137, 69, 0.055);
    --gold-glow: rgba(196, 137, 69, 0.22);
    --gold-glow-strong: rgba(231, 201, 133, 0.55);   /* R9：看得見的金光（呼吸/強調用） */
    /* R10 拆字主視覺的字影/手機遮罩 */
    --c-black-a55: rgba(0, 0, 0, 0.55);
    --c-black-a60: rgba(0, 0, 0, 0.6);
    --c-13-7-3-a72: rgba(13, 7, 3, 0.72);
    --gold-border: rgba(196, 137, 69, 0.16);
    /* LINE 品牌綠（T4 綠金規則）：外部品牌色單一真相——全站「會開 LINE」的
       綠鈕（components.css .btn-line）與衍生樣式一律引用此 token，禁再散落硬編。 */
    --line-green: #06C755;
    --line-green-deep: #05A14B;   /* hover/active 加深綠 */
    /* 綠鈕光暈：首頁 R9「香火」呼吸動畫用（原為金光，鈕改綠後光暈同步改綠，
       否則綠底配金暈＝髒色）。強度比照 --gold-glow/--gold-glow-strong。 */
    --line-green-glow: rgba(6, 199, 85, 0.32);
    --line-green-glow-strong: rgba(6, 199, 85, 0.5);
    --ink: #2a1a0a;
    --ink-gray: #81705d;
    --cream: #faf6ef;
    --cream-warm: #f5ead9;
    --cream-deep: #eadcc5;
    --white: #fff;
    --white-warm: #fffdf8;
    --shadow-sm: 0 8px 28px rgba(42, 26, 10, 0.055);
    --shadow-md: 0 16px 42px rgba(42, 26, 10, 0.09);
    --shadow-lg: 0 24px 60px rgba(42, 26, 10, 0.13);
    --shadow-gold: 0 12px 34px rgba(143, 97, 40, 0.16);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    /* C1 interim radius tokens（現值換 token、零外觀變更）：值錨定命名＝機械替換不需判斷；
       之後設計線（Figma→token）在此一次重併尺標（如 15→16、99/999→pill），全站跟著走。 */
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-15: 15px;
    --radius-20: 20px;
    --radius-50: 50px;
    --radius-99: 99px;
    --radius-999: 999px;
    --radius-full: 50%;
    /* T3 收尾（尾巴重複值）。 */
    --radius-2: 2px;
    --radius-18: 18px;
    --radius-25: 25px;
    /* C1 interim color tokens（現值換 token、零外觀變更；值錨定命名，≥8 次高頻值收錄；
       ~500 處一次性長尾留給設計線(Figma→token)在此一次重併）。 */
    --c-e6ba67: #e6ba67;
    --c-4b2c1c: #4b2c1c;
    --c-333: #333333;
    --c-555: #555555;
    --c-595959: #595959;   /* 次要動作鈕（灰）漸層深端；配白字 7.0:1 */
    --c-666: #666666;
    /* 配白字仍達 WCAG AA（4.5:1）的最淺灰，實測 4.54:1。次要動作鈕漸層淺端。
       刻意不用後台 admin.css 的 --secondary(#8c8c8c)：那個配白字只有 3.36:1，
       過不了 AA，而使用者年齡偏高、以手機為主（PRODUCT.md）。 */
    --c-767676: #767676;
    --c-888: #888888;
    --c-aaa: #aaaaaa;
    --c-ddd: #dddddd;
    --c-black-a05: rgba(0,0,0,0.05);
    --c-black-a10: rgba(0,0,0,0.1);
    --c-black-a50: rgba(0,0,0,0.5);
    --c-white-a50: rgba(255,255,255,0.5);
    /* C1 color batch2（≥4 次值）。 */
    --c-000: #000000;
    --c-999: #999999;
    --c-ccc: #cccccc;
    --c-eee: #eeeeee;
    --c-574634: #574634;
    --c-8b4513: #8b4513;
    --c-c0392b: #c0392b;
    --c-d43636: #d43636;
    --c-d4af37: #d4af37;
    --c-faad14: #faad14;
    --c-efe4d3: #efe4d3;
    --c-f5e2ba: #f5e2ba;
    --c-fdf6e9: #fdf6e9;
    --c-fdfaf0: #fdfaf0;
    --c-fff8ea: #fff8ea;
    --c-fffcf5: #fffcf5;
    --c-black-a06: rgba(0,0,0,0.06);
    --c-black-a08: rgba(0,0,0,0.08);
    --c-black-a15: rgba(0,0,0,0.15);
    --c-black-a20: rgba(0,0,0,0.2);
    --c-black-a25: rgba(0,0,0,0.25);
    --c-black-a30: rgba(0,0,0,0.3);
    --c-black-a40: rgba(0,0,0,0.4);
    --c-black-a60: rgba(0,0,0,0.6);
    --c-white-a40: rgba(255,255,255,0.4);
    --c-white-a60: rgba(255,255,255,0.6);
    --c-white-a70: rgba(255,255,255,0.7);
    --c-white-a72: rgba(255,255,255,0.72);
    --c-white-a80: rgba(255,255,255,0.8);
    /* 捐款頁和風副調色盤（原 donation.css 局部 :root，C1 T3 verbatim 併入＝零外觀變更；
       只有 /donation 使用，設計線在此一次重定義）。 */
    --c-bg: #F5EDE0;          /* 生成り */
    --c-bg-soft: #EDE3D4;
    --c-bg-card: #FCF8EE;
    --c-bg-warm: #F0E6D0;
    --c-text-deep: #2C2420;   /* 墨色 */
    --c-text-mid: #5A4F45;
    --c-text-light: #8A7E72;
    --shu: #C8372D;           /* 朱紅（神社鳥居色） */
    --shu-deep: #9B2923;
    --shu-light: #E06357;
    --enji: #7D1E1E;
    --kin: #C89B3F;           /* 和式金（霧面） */
    --kin-deep: #8A6A28;
    --kin-light: #E8C977;
    --kin-bright: #E0B85C;
    --rikyu: #8A8977;         /* 侘寂 */
    --matsuba: #5D6F52;
    --glow-soft: 0 0 40px var(--c-200-155-63-a18);
    --glow-kin: 0 0 60px rgba(200, 155, 63, 0.12);
    --shadow-card: 0 10px 40px rgba(44, 36, 32, 0.06);
    --shadow-card-hover: 0 20px 60px rgba(138, 106, 40, 0.14);
    --shadow-altar: 0 25px 70px rgba(44, 36, 32, 0.08), 0 0 100px rgba(200, 155, 63, 0.06);
    --c-error: #B85450;
    --c-error-bg: #FDF5F4;
    --c-42-26-10-a12: rgba(42,26,10,0.12);
    --c-138-106-40-a28: rgba(138,106,40,0.28);
    --c-143-97-40-a18: rgba(143,97,40,0.18);
    --c-196-137-69-a15: rgba(196,137,69,0.15);
    --c-196-137-69-a18: rgba(196,137,69,0.18);
    --c-196-137-69-a20: rgba(196,137,69,0.2);
    --c-196-137-69-a30: rgba(196,137,69,0.3);
    --c-196-137-69-a40: rgba(196,137,69,0.4);
    --c-200-155-63-a18: rgba(200,155,63,0.18);
    --c-200-155-63-a22: rgba(200,155,63,0.22);
    --c-255-253-248-a92: rgba(255,253,248,0.92);
    /* C1 color batch3（T3，==3 次值；機械批到此為止，≤2 次＝設計 pass 長尾）。 */
    --c-096dd9: #096dd9;
    --c-231815: #231815;
    --c-389e0d: #389e0d;
    --c-5e0000: #5e0000;
    --c-b3402a: #b3402a;
    --c-d9b88a: #d9b88a;
    --c-fcf6ba: #fcf6ba;
    --c-fef0a5: #fef0a5;
    --c-black-a28: rgba(0,0,0,0.28);
    --c-42-26-10-a06: rgba(42,26,10,0.06);
    --c-42-26-10-a55: rgba(42,26,10,0.55);
    --c-120-90-50-a05: rgba(120,90,50,0.05);
    --c-120-90-50-a10: rgba(120,90,50,0.1);
    --c-143-97-40-a22: rgba(143,97,40,0.22);
    --c-196-137-69-a12: rgba(196,137,69,0.12);
    --c-196-137-69-a28: rgba(196,137,69,0.28);
    --c-196-137-69-a34: rgba(196,137,69,0.34);
    --c-196-137-69-a35: rgba(196,137,69,0.35);
    --c-196-137-69-a45: rgba(196,137,69,0.45);
    --c-200-155-63-a15: rgba(200,155,63,0.15);
    --c-200-155-63-a30: rgba(200,155,63,0.3);
    --c-200-155-63-a35: rgba(200,155,63,0.35);
    --c-212-175-55-a08: rgba(212,175,55,0.08);
    --c-231-201-133-a18: rgba(231,201,133,0.18);
    /* R7 首頁：三大 CTA 卡片配色（紅／暗紅／金／米白）＋ Hero 左遮罩／暗遮罩保字。
       色 token 單一真相在此（index.css 只引用 var()，維持顏色棘輪）。 */
    --hero-mask-dark: rgba(13,7,3,0.94);
    --cta-scrim: rgba(20,10,6,0.30);
    --cta-scrim-strong: rgba(20,10,6,0.66);
    --cta-red: #9a2b23;
    --cta-red-deep: #5e0000;
    --cta-gold: #c9a24b;
    --cta-cream: #f7efe0;
    /* ============================================================
       Gate 9：提示條（.ff-note）三態——警告／錯誤／成功的底色、邊框、文字。
       同一組值同時給「後台表單設計器的『已發布不可改』橫幅」與「公開填表頁
       /f/<slug> 的截止／額滿／錯誤／成功提示」使用＝後台與公開面說同一種視覺語言
       （這正是 owner 說「風格差很多」要收斂的東西）。色相沿用站內既有語意色：
       警告＝--c-faad14 系、錯誤＝danger 紅系、成功＝綠系。
       ============================================================ */
    --note-warn-bg:   rgba(250, 173, 20, 0.10);
    --note-warn-line: rgba(250, 173, 20, 0.30);
    --note-warn-ink:  #86602a;
    --note-error-bg:   rgba(255, 77, 79, 0.06);
    --note-error-line: rgba(255, 77, 79, 0.25);
    --note-error-ink:  #b23b3b;
    --note-ok-bg:   rgba(82, 196, 26, 0.08);
    --note-ok-line: rgba(82, 196, 26, 0.28);
    --note-ok-ink:  #2e7d4f;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* 字型單一真相（#6 C0）。--font-body=內文：系統中文字型堆疊（零下載、最快）。
       --font-brand=品牌/標題：預設同內文；廟方設了品牌字才覆寫並載那一支（C0-4 後台注入）。 */
    --font-body: system-ui, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    --font-brand: var(--font-body);
    --content-width: 1080px;

    /* ============================================================
       語義層 SEMANTIC LAYER —「換廟／換皮只改這一層」的單一介面
       ------------------------------------------------------------
       分兩層：上面是「原始色票」（--gold #c48945、--cream-* 等，錨定實際色值＝
       設計線 Figma→token 的落點）；下面是「語義角色」，用 var() 指到色票。
       各前台頁面吃這裡的語義 token；換整體風格＝把這層重新映到另一組色票即可
       （例：--brand 由 var(--gold) 改指青瓷/朱紅，全站品牌色一鍵換皮）。
       ⚠️零外觀：以下值＝目前站台預設，只新增別名、未改任何既有 token。
       ⚠️採用注意：各頁 surface 值目前略有差異（services/feedback/profile 各自
       米白）＝設計 pass 尚未統一；現階段各頁先零外觀採用 --brand 系（金色多半
       ＝--gold），surface/ink 待 owner 拍板統一米白後再全面收斂到 --surface-*。
       ============================================================ */
    /* 表面／底色 surfaces（淺色宮廟風預設；深色頁如 committee/fund 走自身 namespace） */
    --surface-page:  var(--cream-site);    /* 頁面米白底 */
    --surface-panel: var(--cream-panel);   /* 卡片／面板底 */
    --surface-warm:  var(--cream-warm);    /* 暖色區塊底 */
    --surface-deep:  var(--cream-deep);    /* 較深暖底／分隔帶 */
    /* 文字 ink（--ink-soft 已於上定義 #584635，語義層沿用為「次要文字」） */
    --ink-strong: var(--ink-site);   /* 主文字墨 */
    --ink-muted:  var(--ink-gray);   /* 更淡的輔助文字 */
    /* 品牌 brand（金；換廟改這幾條的映射＝品牌色全站換皮） */
    --brand:        var(--gold);         /* 品牌主金 */
    --brand-deep:   var(--gold-deep);    /* 加深金（標題/對比用；R6-2 對比修正的文字金落點） */
    --brand-bright: var(--gold-bright);  /* 亮金（裝飾） */
    --brand-pale:   var(--gold-pale);    /* 淡金（底/hover） */
    --brand-line:   var(--gold-line);    /* 金線（分隔/漸層） */
    /* 線／邊框／陰影 */
    --line-brand:  var(--gold-border);    /* 金邊框 */
    --shadow-page: var(--shadow-refined); /* 頁面級柔和陰影 */

    /* admin_v2 後台 ERP 調色盤（v2-final §3.1）。獨立 --v2-* 命名空間，只有 admin-v2.css 用；
       與前台宮廟風調色盤完全分離。色值單一真相在此。舊別名（--v2-ok/--v2-warn/--v2-pending…）
       保留並對映到新語意值，避免 admin-v2.css 大量改名。 */
    /* R5（2026-07-13 owner 新配色）後台五色主題調色盤：取代舊 gold/vermilion/indigo/jade/purple，
       改 amber/coral/rose/teal/blue（琥珀金→珊瑚紅→玫瑰粉→青綠→霧藍）。owner：舊深藍深紫太暗、
       整排黑黑的。每主題＝主色/hover/淡底(soft)/邊框(border)/ring/白字(on) 六 token（主色對白字 ≥4.5:1）。
       套用原則：主色不大面積實心鋪在側欄/卡片，只用在數字/選中字/邊框/ring/主要按鈕。
       換色/加色＝只動這裡＋admin-v2.css 一個 [data-theme] 覆寫塊（色值單一真相）。 */
    --v2-theme-amber:  #A06116;  --v2-theme-amber-hover: #7F4D0D;  --v2-theme-amber-soft: #FFF7E8;  --v2-theme-amber-border: #E7C58F;  --v2-theme-amber-ring: rgba(160,97,22,0.20);   --v2-theme-amber-on: #FFFFFF;  /* ①琥珀金 */
    --v2-theme-coral:  #C24B40;  --v2-theme-coral-hover: #A83A31;  --v2-theme-coral-soft: #FFF1EF;  --v2-theme-coral-border: #E5A39D;  --v2-theme-coral-ring: rgba(194,75,64,0.20);   --v2-theme-coral-on: #FFFFFF;  /* ②珊瑚紅 */
    --v2-theme-rose:   #B63B72;  --v2-theme-rose-hover:  #9A2F60;  --v2-theme-rose-soft:  #FFF0F6;  --v2-theme-rose-border:  #E3A2BE;  --v2-theme-rose-ring:  rgba(182,59,114,0.20);  --v2-theme-rose-on:  #FFFFFF;  /* ③玫瑰粉 */
    --v2-theme-teal:   #16806A;  --v2-theme-teal-hover:  #0F6857;  --v2-theme-teal-soft:  #ECF8F4;  --v2-theme-teal-border:  #8FCBBC;  --v2-theme-teal-ring:  rgba(22,128,106,0.20);  --v2-theme-teal-on:  #FFFFFF;  /* ④青綠 */
    --v2-theme-blue:   #4E6FAE;  --v2-theme-blue-hover:  #3D5E95;  --v2-theme-blue-soft:  #EEF4FF;  --v2-theme-blue-border:  #A8BCE0;  --v2-theme-blue-ring:  rgba(78,111,174,0.20);  --v2-theme-blue-on:  #FFFFFF;  /* ⑤霧藍（預設） */

    --v2-primary: var(--v2-theme-blue);              /* 主色（預設＝霧藍；owner 明訂新使用者預設 blue；每人可切 5 色，存 ui_prefs） */
    --v2-primary-hover:  var(--v2-theme-blue-hover); /* 主色 hover（主要按鈕加深） */
    --v2-primary-soft:   var(--v2-theme-blue-soft);  /* 主色淡底（選中列/卡片 hover 底） */
    --v2-primary-border: var(--v2-theme-blue-border);/* 主色淺邊框（卡片 hover 邊框） */
    --v2-primary-ring:   var(--v2-theme-blue-ring);  /* 主色 focus ring（box-shadow） */
    --v2-on-primary:     var(--v2-theme-blue-on);    /* 主色底上的字（白） */
    --v2-success: #16A34A;      /* 成功／完成 */
    --v2-warning: #D97706;      /* 警示／待處理 */
    --v2-danger:  #D92D20;      /* 危險（登出/刪除；不跟主題變） */
    --v2-danger-soft: #FEE4E2;  /* 危險淡底（危險按鈕 hover 底） */
    --v2-info:    #2563EB;      /* 資訊／進行中 */
    --v2-bg: #F5F7FA;           /* 頁底（共用中性 page-bg） */
    --v2-surface: #FFFFFF;      /* 卡片／面板 surface */
    --v2-subtle: #F9FAFB;
    --v2-text: #172033;         /* 主文字（標題/內文，不跟主題變） */
    --v2-muted: #667085;        /* 次文字（說明/標籤，共用中性 text-secondary） */
    --v2-disabled: #98A2B3;     /* 停用/圖示灰（共用中性 icon-muted） */
    --v2-border: #DDE3EA;       /* 中性邊框 */
    --v2-hover: #EEF1F5;        /* 中性 hover 底（表格列等，不跟主題） */
    --v2-active-bg:   var(--v2-primary-soft);   /* 別名→主色淡底（沿用既有用點；隨主題） */
    --v2-primary-tint: var(--v2-primary-soft);  /* 別名→主色淡底 */
    --v2-success-bg: #E7F6EC;   /* 徽章底（綠） */
    --v2-warning-bg: #FDF0E1;   /* 徽章底（橘） */
    /* 舊別名（沿用中，值對映新語意）。 */
    --v2-ok: var(--v2-success);
    --v2-warn: var(--v2-danger);
    --v2-pending: var(--v2-warning);
    --v2-muted-2: var(--v2-disabled);
    --v2-warn-bg: var(--v2-danger-soft);
}

/* ============================================================
   共用分類篩選膠囊（filter pills）——單一真相
   FAQ／信徒回饋等頁的分類篩選鈕共用此元件；owner 要調 pill 樣式
   ＝改這裡一處、全站生效（過去各頁 CSS 各寫各的、長相不一）。
   三態：預設／hover／選中(.is-active)。全部吃 theme token（金色系）。
   桌機自動換行置中；手機（≤768px）改橫向捲動（不換行、隱藏捲軸）＝觸控友善。
   ============================================================ */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.filter-pill {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: var(--radius-50);
    border: 1.5px solid var(--gold-line);
    background: transparent;
    color: var(--gold-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    letter-spacing: 1px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s ease;
}

.filter-pill:hover {
    background: var(--gold-pale);
    border-color: var(--gold-primary);
    color: var(--gold-rich);
}

.filter-pill.is-active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: var(--white);
    box-shadow: var(--shadow-gold);
    font-weight: bold;
}

@media (max-width: 768px) {
    .filter-pills {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .filter-pills::-webkit-scrollbar { display: none; }
}