/* ====================================================================
   流年命書「新春朱紅」主題(2026-10-25)
   只在 <html class="theme-festive"> 時生效(App\Support\AnnualTheme::active():頁面在 PAGES 清單裡 + 開關 annual.theme / 預覽 cookie)。
   classic(原本宣紙米色)時這支檔根本不載入,舊樣子完全不變。
   目前範圍:流年命書填寫頁(/annual_book/start,含 /zh-CN),連同導覽列、公告列、頁尾、cookie 橫幅、LINE 側鈕。
   互動腳本 public/js/annual-festive.js(金線煙火、鞭炮紅紙屑、金箔微光的 canvas;填好生日時送出鈕旁綻放一朵小煙火)。

   構想:春聯的灑金朱砂紅紙當底,卡片是米金灑金箋(像紅包裡抽出來的信箋),點綴用金箔金;
        2.5D 元素只用剪紙(左上梅枝、右上窗花,捲動時視差錯位)、細金線煙火、鞭炮放完飄落的紅紙屑、少量金箔閃光。
        不用燈籠、元寶、紅包雨、吉祥話大字;元素少、偏淡、不加大光暈。

   作法(照月老主題):html.theme-festive 重新定義全站色票(紅底上:紙 → 朱紅、墨 → 象牙米、金 → 金箔),
        卡片(main .card-paper)與正文書頁(.sc-main)裡再把色票還原成原本的宣紙米色深墨字,表單元件幾乎不用另外覆寫。

   色票
     紅底     #9c2420 上緣 / #8e1f1f 朱砂 / #7a1a1c 下緣(春聯紅紙,極細纖維紋 + 疏落灑金)
     剪紙     #6a1316 深胭脂(梅枝、窗花)、落影 #2a0405
     紙卡     #fcf5e6 → #f7ecd6 米金灑金箋,暗金灑金 #b8903e、外框暗金細線 + 內框朱紅細線
     字       紅底上 #fbf1dc 象牙米(在 #9c2420 上 6.5:1、#8e1f1f 上 12.8:1)/ 次要 #f2dcc0 / 淡 #e8c9ab(在最亮的紅上 5:1)
     金       #d9b46a 金箔 / #e8cc8a 淡金 / #b08a3e 暗金(只當裝飾線,不當字)
     按鈕     紅底上:金箔漸層 + 深紅字;紙卡裡的送出鈕:朱砂紅 + 金字 + 金細框(紅包封的配色,在米色紙上最醒目)
   可調常數:下面 --fx-* 變數(剪紙濃淡、尺寸)、JS 檔頭 CFG(煙火、紙屑、金箔的數量與濃淡)。
   ==================================================================== */

html.theme-festive {
  --fx-red-hi: #9c2420;
  --fx-red: #8e1f1f;
  --fx-red-lo: #7a1a1c;
  --fx-rouge: #6a1316;
  --fx-deep: #5a1012;
  --fx-ivory: #fbf1dc;
  --fx-ivory-2: #f2dcc0;
  --fx-ivory-3: #e8c9ab;
  --fx-gold: #d9b46a;
  --fx-gold-l: #e8cc8a;
  --fx-gold-d: #b08a3e;
  --fx-btn: linear-gradient(180deg, #f1dca4 0%, #e0c07c 46%, #c49a4e 100%);
  --fx-btn-ink: #6a1316;
  --fx-btn-bd: #9a7232;
  --fx-seal: linear-gradient(180deg, #b42d24 0%, #9a2420 55%, #841c1c 100%);

  /* 剪紙層的濃淡與尺寸(老闆嫌太搶就調小 opacity) */
  --fx-cut-opacity: .9;
  --fx-window-opacity: .62;
  --fx-plum-w: clamp(210px, 22vw, 340px);
  --fx-window-w: clamp(230px, 25vw, 380px);

  /* ── Tailwind 色票(紅底上):紙 → 朱紅、墨 → 象牙米、金 → 金箔 ── */
  --color-paper-50: #962421;
  --color-paper-100: #8e1f1f;
  --color-paper-200: #861d1e;
  --color-paper-300: #7c1b1c;
  --color-paper-400: #6a1316;
  --color-paper-500: #5a1012;
  --color-paper: #8e1f1f;

  --color-ink-50: #7c1b1c;
  --color-ink-100: #8a2a26;
  --color-ink-200: #b5574a;
  --color-ink-300: #d9b8a0;
  --color-ink-400: #e8c9ab;
  --color-ink-500: #f0d6bc;
  --color-ink-600: #f4dec6;
  --color-ink-700: #f7e6d0;
  --color-ink-800: #f9ecd7;
  --color-ink-900: #fbf1dc;
  --color-ink-950: #6a1316;

  --color-brand-50: #8a2724;
  --color-brand-100: #93302a;
  --color-brand-200: #b0703f;
  --color-brand-300: #c09050;
  --color-brand-400: #cfa560;
  --color-brand-500: #d9b46a;
  --color-brand-600: #e0bf7a;
  --color-brand-700: #e8cc8a;
  --color-brand-800: #efd9a5;
  --color-brand-900: #f5e6c4;
  --color-brand-950: #faf0dc;

  --color-accent: #d9b46a;
  --color-accent-dark: #b08a3e;

  /* 朱紅在紅底上當字看不見 → 提亮成淡金杏色 */
  --color-cinnabar: #f3c9a4;
  --color-cinnabar-50: #8a2724;
  --color-cinnabar-100: #93302a;
  --color-cinnabar-200: #f0b9a0;
  --color-cinnabar-300: #f3c3a6;
  --color-cinnabar-400: #e8a080;
  --color-cinnabar-500: #c8322b;
  --color-cinnabar-600: #a3271f;
  --color-cinnabar-700: #f6d2b8;
  --color-rose-500: #f3c3a6;

  /* 綠色(免費、成功)→ 象牙米(紅綠並列像聖誕節) */
  --color-jade: #f2dcc0;
  --color-jade-50: #842220;
  --color-jade-500: #f2dcc0;
  --color-jade-700: #f7e6d0;
  --color-emerald-50: #842220;
  --color-emerald-100: #8a2724;
  --color-emerald-200: #a8574a;
  --color-emerald-500: #f2dcc0;
  --color-emerald-600: #f2dcc0;
  --color-emerald-700: #f7e6d0;
  --color-emerald-800: #fbf1dc;
  --color-amber-50: #862420;
  --color-amber-100: #8e2a24;
  --color-amber-200: #b0703f;
  --color-amber-500: #d9b46a;
  --color-amber-600: #e0bf7a;
  --color-amber-700: #e8cc8a;
  --color-amber-800: #f5e6c4;
  --color-red-50: #862420;
  --color-red-100: #8e2a24;
  --color-red-200: #b5574a;
  --color-red-600: #f3c3a6;
  --color-red-700: #f6d2b8;
  --color-red-800: #f9e0cc;

  /* ── v2 材質色票 ── */
  --xd-paper: #8e1f1f;
  --xd-paper-2: #8a1e1f;
  --xd-paper-3: #821c1d;
  --xd-paper-4: #6a1316;
  --xd-sheet: #861d1e;
  --xd-ink: #fbf1dc;
  --xd-ink-2: #f9ecd7;
  --xd-ink-3: #f4dec6;
  --xd-ink-4: #f0d6bc;
  --xd-ink-5: #e8c9ab;
  --xd-gold: #d9b46a;
  --xd-gold-2: #b08a3e;
  --xd-gold-ink: #e8cc8a;
  --xd-gold-light: #f0dba8;
  --xd-cinnabar: #c8322b;
  --xd-cinnabar-2: #a3271f;
  --xd-cinnabar-ink: #f3c3a6;
  --xd-rule: rgba(217, 180, 106, .24);
  --xd-rule-2: rgba(217, 180, 106, .42);
  --xd-rule-ink: rgba(251, 241, 220, .1);
  --xd-grain: none;
  --xd-shadow-sheet: 0 22px 50px -30px rgba(40, 4, 6, .7);
  --xd-shadow-lift: 0 26px 60px -28px rgba(40, 4, 6, .75), 0 0 0 1px rgba(217, 180, 106, .3);
  --xd-frame: inset 0 0 0 1px rgba(217, 180, 106, .3);

  background: var(--fx-red);
  color-scheme: dark;
}

/* ====================================================================
   0. 紙卡與正文書頁裡:色票還原成原本的宣紙米色、深墨字(表單元件、滾輪、價格說明照原樣)
      只改一個地方:選中的選項(原本黑底金字)改朱砂紅底金字。
   ==================================================================== */
html.theme-festive main .card-paper,
html.theme-festive .sc-main {
  --color-paper-50: #FDFCF7;
  --color-paper-100: #FAF6EE;
  --color-paper-200: #F5F1E8;
  --color-paper-300: #EDE6D3;
  --color-paper-400: #D9CFB4;
  --color-paper-500: #B8A985;
  --color-paper: #FAF6EE;
  --color-ink-50: #F8F5EE;
  --color-ink-100: #ECE6D6;
  --color-ink-200: #D4CBB2;
  --color-ink-300: #A99B7A;
  --color-ink-400: #7A6E54;
  --color-ink-500: #5C5240;
  --color-ink-600: #443D2F;
  --color-ink-700: #322C22;
  --color-ink-800: #221E18;
  --color-ink-900: #1A1812;
  --color-ink-950: #8e1f1f;
  --color-brand-50: #FBF5DF;
  --color-brand-100: #F4E6B0;
  --color-brand-200: #ECD480;
  --color-brand-300: #DCB95A;
  --color-brand-400: #D4A93C;
  --color-brand-500: #C8A452;
  --color-brand-600: #A37B2E;
  --color-brand-700: #826024;
  --color-brand-800: #5E441A;
  --color-brand-900: #3E2D11;
  --color-brand-950: #25190A;
  --color-accent: #e3c27a;
  --color-accent-dark: #A37B2E;
  --color-cinnabar: #B4242C;
  --color-cinnabar-50: #FBE9E9;
  --color-cinnabar-100: #F4C7C8;
  --color-cinnabar-200: #E89094;
  --color-cinnabar-300: #D85A60;
  --color-cinnabar-400: #C8383F;
  --color-cinnabar-500: #B4242C;
  --color-cinnabar-600: #951B22;
  --color-cinnabar-700: #7A1820;
  --color-rose-500: #c0322b;
  --color-jade: #4F7A60;
  --color-jade-50: #EEF4EC;
  --color-jade-500: #4F7A60;
  --color-jade-700: #2E4A3A;
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-500: #4F7A60;
  --color-emerald-600: #3f6a50;
  --color-emerald-700: #2E4A3A;
  --color-emerald-800: #234030;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-500: #C8A452;
  --color-amber-600: #A37B2E;
  --color-amber-700: #826024;
  --color-amber-800: #5E441A;
  --color-red-50: #FBE9E9;
  --color-red-100: #F4C7C8;
  --color-red-200: #E89094;
  --color-red-600: #B4242C;
  --color-red-700: #951B22;
  --color-red-800: #7A1820;
  --xd-paper: #FAF6EE;
  --xd-paper-2: #F5F0E4;
  --xd-paper-3: #EDE5D1;
  --xd-paper-4: #E2D6BA;
  --xd-sheet: #FDFBF5;
  --xd-ink: #1C1913;
  --xd-ink-2: #322C22;
  --xd-ink-3: #514836;
  --xd-ink-4: #6F6450;
  --xd-ink-5: #958869;
  --xd-gold: #C8A452;
  --xd-gold-2: #B08A3C;
  --xd-gold-ink: #7E5D22;
  --xd-gold-light: #E8D29A;
  --xd-cinnabar: #B4242C;
  --xd-cinnabar-2: #96191F;
  --xd-cinnabar-ink: #7A1820;
  --xd-rule: rgb(150 112 44 / 0.24);
  --xd-rule-2: rgb(150 112 44 / 0.42);
  --xd-rule-ink: rgb(40 32 20 / 0.12);
  color: #1A1812;
  color-scheme: light;
}

/* ====================================================================
   1. 紅紙底:朱砂漸層 + 極細纖維 + 疏落灑金(fixed,只畫一次)
   ==================================================================== */
html.theme-festive body,
html.theme-festive.ui-v2 body {
  background: transparent;
  background-image: none;
  color: var(--fx-ivory);
}
html.theme-festive body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e2a8'/%3E%3Cstop offset='1' stop-color='%23c9a050'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpolygon points='183.1,84.9 181.1,88.2 179.6,84.9 181.2,82.3' fill-opacity='0.67'/%3E%3Cpolygon points='37.6,317.1 34.5,319.4 31.5,317.9 30.5,315.9 31.5,315.1 34.6,312.7' fill-opacity='0.55'/%3E%3Cpolygon points='328.1,358.2 326.7,359.9 324.2,360.3 322.5,357.9 324.6,356.3 326.5,355.0' fill-opacity='0.52'/%3E%3Cpolygon points='171.3,276.7 169.4,279.0 166.7,277.9 167.0,276.4 169.4,274.7' fill-opacity='0.67'/%3E%3Cpolygon points='493.9,175.7 491.7,176.9 489.1,178.9 487.0,176.9 488.3,173.3 492.0,173.5' fill-opacity='0.71'/%3E%3Cpolygon points='498.9,193.7 499.2,197.5 495.2,196.4 493.0,192.1 496.7,191.2' fill-opacity='0.66'/%3E%3Cpolygon points='499.1,459.5 495.2,461.6 493.3,460.3 491.3,457.6 494.4,454.7' fill-opacity='0.55'/%3E%3Cpolygon points='161.5,81.8 158.8,84.0 156.1,84.0 154.6,82.8 156.9,78.3 159.5,79.9' fill-opacity='0.62'/%3E%3Cpolygon points='59.6,355.9 58.6,357.1 56.2,355.8 58.1,352.7' fill-opacity='0.68'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 560px 560px repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E %3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .42' numOctaves='3' seed='11'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .7 0 0 0 .075 -.015'/%3E%3C/filter%3E %3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='5'/%3E %3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .02 0 0 0 0 .03 0 0 0 .08 -.01'/%3E%3C/filter%3E %3Crect width='300' height='300' filter='url(%23a)'/%3E%3Crect width='300' height='300' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 300px 300px repeat,
    radial-gradient(130% 95% at 50% 38%, transparent 58%, rgba(58, 6, 8, .32) 100%),
    radial-gradient(70vmax 34vmax at 50% -8%, rgba(190, 64, 40, .26), transparent 72%),
    linear-gradient(180deg, #9c2420 0%, #922120 38%, #861d1e 72%, #7a1a1c 100%);
}

/* ====================================================================
   2. 剪紙層(2.5D):右上窗花(遠)、左上梅枝與它的落影(近)
      fixed + 捲動時間軸(animation-timeline: scroll()),不跑 JS;捲動時三層速度不同 → 錯位;
      平常極慢地輕晃(rotate 屬性,跟捲動的 transform 互不干擾)。不支援捲動時間軸的瀏覽器就靜止在原位。
   ==================================================================== */
html.theme-festive body::after {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 58px;
  right: calc(var(--fx-window-w) * -0.34);
  width: var(--fx-window-w);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 420 420'%3E %3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='200' cy='200' r='169'/%3E%3C/clipPath%3E %3Cg id='w' fill='none'%3E%3Ccircle cx='200' cy='200' r='188' stroke-width='12'/%3E%3Ccircle cx='200' cy='200' r='169' stroke-width='3'/%3E %3Cg clip-path='url(%23c)' stroke-width='4.2'%3E%3Ccircle cx='32' cy='116' r='29.70'/%3E%3Ccircle cx='32' cy='158' r='29.70'/%3E%3Ccircle cx='32' cy='200' r='29.70'/%3E%3Ccircle cx='32' cy='242' r='29.70'/%3E%3Ccircle cx='32' cy='284' r='29.70'/%3E%3Ccircle cx='74' cy='74' r='29.70'/%3E%3Ccircle cx='74' cy='116' r='29.70'/%3E%3Ccircle cx='74' cy='158' r='29.70'/%3E%3Ccircle cx='74' cy='200' r='29.70'/%3E%3Ccircle cx='74' cy='242' r='29.70'/%3E%3Ccircle cx='74' cy='284' r='29.70'/%3E%3Ccircle cx='74' cy='326' r='29.70'/%3E%3Ccircle cx='116' cy='32' r='29.70'/%3E%3Ccircle cx='116' cy='74' r='29.70'/%3E%3Ccircle cx='116' cy='116' r='29.70'/%3E%3Ccircle cx='116' cy='158' r='29.70'/%3E%3Ccircle cx='116' cy='200' r='29.70'/%3E%3Ccircle cx='116' cy='242' r='29.70'/%3E%3Ccircle cx='116' cy='284' r='29.70'/%3E%3Ccircle cx='116' cy='326' r='29.70'/%3E%3Ccircle cx='116' cy='368' r='29.70'/%3E%3Ccircle cx='158' cy='32' r='29.70'/%3E%3Ccircle cx='158' cy='74' r='29.70'/%3E%3Ccircle cx='158' cy='116' r='29.70'/%3E%3Ccircle cx='158' cy='158' r='29.70'/%3E%3Ccircle cx='158' cy='200' r='29.70'/%3E%3Ccircle cx='158' cy='242' r='29.70'/%3E%3Ccircle cx='158' cy='284' r='29.70'/%3E%3Ccircle cx='158' cy='326' r='29.70'/%3E%3Ccircle cx='158' cy='368' r='29.70'/%3E%3Ccircle cx='200' cy='32' r='29.70'/%3E%3Ccircle cx='200' cy='74' r='29.70'/%3E%3Ccircle cx='200' cy='116' r='29.70'/%3E%3Ccircle cx='200' cy='158' r='29.70'/%3E%3Ccircle cx='200' cy='200' r='29.70'/%3E%3Ccircle cx='200' cy='242' r='29.70'/%3E%3Ccircle cx='200' cy='284' r='29.70'/%3E%3Ccircle cx='200' cy='326' r='29.70'/%3E%3Ccircle cx='200' cy='368' r='29.70'/%3E%3Ccircle cx='242' cy='32' r='29.70'/%3E%3Ccircle cx='242' cy='74' r='29.70'/%3E%3Ccircle cx='242' cy='116' r='29.70'/%3E%3Ccircle cx='242' cy='158' r='29.70'/%3E%3Ccircle cx='242' cy='200' r='29.70'/%3E%3Ccircle cx='242' cy='242' r='29.70'/%3E%3Ccircle cx='242' cy='284' r='29.70'/%3E%3Ccircle cx='242' cy='326' r='29.70'/%3E%3Ccircle cx='242' cy='368' r='29.70'/%3E%3Ccircle cx='284' cy='32' r='29.70'/%3E%3Ccircle cx='284' cy='74' r='29.70'/%3E%3Ccircle cx='284' cy='116' r='29.70'/%3E%3Ccircle cx='284' cy='158' r='29.70'/%3E%3Ccircle cx='284' cy='200' r='29.70'/%3E%3Ccircle cx='284' cy='242' r='29.70'/%3E%3Ccircle cx='284' cy='284' r='29.70'/%3E%3Ccircle cx='284' cy='326' r='29.70'/%3E%3Ccircle cx='284' cy='368' r='29.70'/%3E%3Ccircle cx='326' cy='74' r='29.70'/%3E%3Ccircle cx='326' cy='116' r='29.70'/%3E%3Ccircle cx='326' cy='158' r='29.70'/%3E%3Ccircle cx='326' cy='200' r='29.70'/%3E%3Ccircle cx='326' cy='242' r='29.70'/%3E%3Ccircle cx='326' cy='284' r='29.70'/%3E%3Ccircle cx='326' cy='326' r='29.70'/%3E%3Ccircle cx='368' cy='116' r='29.70'/%3E%3Ccircle cx='368' cy='158' r='29.70'/%3E%3Ccircle cx='368' cy='200' r='29.70'/%3E%3Ccircle cx='368' cy='242' r='29.70'/%3E%3Ccircle cx='368' cy='284' r='29.70'/%3E%3C/g%3E%3C/g%3E %3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E %3Cuse href='%23w' stroke='%232a0405' opacity='.45' transform='translate(5 8)' filter='url(%23f)'/%3E %3Cuse href='%23w' stroke='%236a1316'/%3E %3Cg fill='none' stroke='%23d9b46a' stroke-opacity='.6' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='178.5'/%3E%3C/g%3E %3Cg fill='%23d9b46a' fill-opacity='.7'%3E%3Ccircle cx='179' cy='179' r='2.2'/%3E%3Ccircle cx='221' cy='179' r='2.2'/%3E%3Ccircle cx='179' cy='221' r='2.2'/%3E%3Ccircle cx='221' cy='221' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: var(--fx-window-opacity);
  transform-origin: 50% 50%;
}
html.theme-festive main::before,
html.theme-festive main::after {
  content: "";
  position: fixed;
  z-index: -3;
  pointer-events: none;
  top: 86px;
  left: calc(var(--fx-plum-w) * -0.08);
  width: var(--fx-plum-w);
  aspect-ratio: 340 / 280;
  transform-origin: 0 10%;
}
/* 落影:比梅枝晚一點跟上捲動 → 影子和剪紙的距離會變,看起來剪紙浮在紅紙上 */
html.theme-festive main::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 280'%3E %3Cdefs%3E%3Cg id='b' stroke='none'%3E%3Ccircle cx='0.00' cy='-8.00' r='6.6'/%3E%3Ccircle cx='7.61' cy='-2.47' r='6.6'/%3E%3Ccircle cx='4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-7.61' cy='-2.47' r='6.6'/%3E%3C/g%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E %3Cg fill='%232a0405' stroke='%232a0405' opacity='.55' filter='url(%23f)'%3E%3Cpath d='M-14 46 C 30 38 62 62 104 52' fill='none' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M104 52 C 140 44 168 24 206 40' fill='none' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M206 40 C 240 54 266 74 318 66' fill='none' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M104 52 C 118 80 108 104 126 128' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M206 40 C 214 24 232 14 254 10' fill='none' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M62 54 C 56 78 70 96 62 120' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M150 42 C 160 60 176 68 184 88' fill='none' stroke-width='2' stroke-linecap='round'/%3E%3Cuse href='%23b' transform='translate(98 38) rotate(10) scale(1.15)'/%3E%3Cuse href='%23b' transform='translate(160 28) rotate(-20) scale(0.9)'/%3E%3Cuse href='%23b' transform='translate(222 58) rotate(30) scale(1.0)'/%3E%3Cuse href='%23b' transform='translate(128 128) rotate(0) scale(0.85)'/%3E%3Cuse href='%23b' transform='translate(64 120) rotate(15) scale(0.75)'/%3E%3Cuse href='%23b' transform='translate(286 62) rotate(-10) scale(0.72)'/%3E%3Cuse href='%23b' transform='translate(184 90) rotate(40) scale(0.62)'/%3E%3Cuse href='%23b' transform='translate(34 52) rotate(-30) scale(0.7)'/%3E%3Ccircle cx='188' cy='34' r='3.6' stroke='none'/%3E%3Ccircle cx='116' cy='92' r='3.2' stroke='none'/%3E%3Ccircle cx='318' cy='66' r='3' stroke='none'/%3E%3Ccircle cx='254' cy='10' r='3' stroke='none'/%3E%3Ccircle cx='78' cy='92' r='2.8' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  translate: 5px 9px;
  opacity: var(--fx-cut-opacity);
}
html.theme-festive main::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 280'%3E %3Cdefs%3E%3Cg id='b' stroke='none'%3E%3Ccircle cx='0.00' cy='-8.00' r='6.6'/%3E%3Ccircle cx='7.61' cy='-2.47' r='6.6'/%3E%3Ccircle cx='4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-7.61' cy='-2.47' r='6.6'/%3E%3C/g%3E%3C/defs%3E %3Cg fill='%236a1316' stroke='%236a1316'%3E%3Cpath d='M-14 46 C 30 38 62 62 104 52' fill='none' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M104 52 C 140 44 168 24 206 40' fill='none' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M206 40 C 240 54 266 74 318 66' fill='none' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M104 52 C 118 80 108 104 126 128' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M206 40 C 214 24 232 14 254 10' fill='none' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M62 54 C 56 78 70 96 62 120' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M150 42 C 160 60 176 68 184 88' fill='none' stroke-width='2' stroke-linecap='round'/%3E%3Cuse href='%23b' transform='translate(98 38) rotate(10) scale(1.15)'/%3E%3Cuse href='%23b' transform='translate(160 28) rotate(-20) scale(0.9)'/%3E%3Cuse href='%23b' transform='translate(222 58) rotate(30) scale(1.0)'/%3E%3Cuse href='%23b' transform='translate(128 128) rotate(0) scale(0.85)'/%3E%3Cuse href='%23b' transform='translate(64 120) rotate(15) scale(0.75)'/%3E%3Cuse href='%23b' transform='translate(286 62) rotate(-10) scale(0.72)'/%3E%3Cuse href='%23b' transform='translate(184 90) rotate(40) scale(0.62)'/%3E%3Cuse href='%23b' transform='translate(34 52) rotate(-30) scale(0.7)'/%3E%3Ccircle cx='188' cy='34' r='3.6' stroke='none'/%3E%3Ccircle cx='116' cy='92' r='3.2' stroke='none'/%3E%3Ccircle cx='318' cy='66' r='3' stroke='none'/%3E%3Ccircle cx='254' cy='10' r='3' stroke='none'/%3E%3Ccircle cx='78' cy='92' r='2.8' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(98 38) rotate(10) scale(1.15)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Cg fill='none' stroke='%23d9b46a' stroke-width='.7' stroke-opacity='.75'%3E%3Ccircle cx='0.00' cy='-8.00' r='6.6'/%3E%3Ccircle cx='7.61' cy='-2.47' r='6.6'/%3E%3Ccircle cx='4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-7.61' cy='-2.47' r='6.6'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(160 28) rotate(-20) scale(0.9)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3C/g%3E%3Cg transform='translate(222 58) rotate(30) scale(1.0)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3C/g%3E%3Cg transform='translate(128 128) rotate(0) scale(0.85)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Cg fill='none' stroke='%23d9b46a' stroke-width='.7' stroke-opacity='.75'%3E%3Ccircle cx='0.00' cy='-8.00' r='6.6'/%3E%3Ccircle cx='7.61' cy='-2.47' r='6.6'/%3E%3Ccircle cx='4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-4.70' cy='6.47' r='6.6'/%3E%3Ccircle cx='-7.61' cy='-2.47' r='6.6'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(64 120) rotate(15) scale(0.75)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3C/g%3E%3Cg transform='translate(286 62) rotate(-10) scale(0.72)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3C/g%3E%3Cg transform='translate(184 90) rotate(40) scale(0.62)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3C/g%3E%3Cg transform='translate(34 52) rotate(-30) scale(0.7)'%3E%3Ccircle r='3.1' fill='%23962421'/%3E%3Ccircle cx='1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='0.00' cy='2.10' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-2.00' cy='0.65' r='.75' fill='%23d9b46a'/%3E%3Ccircle cx='-1.23' cy='-1.70' r='.75' fill='%23d9b46a'/%3E%3C/g%3E%3Cpath d='M-14 44 C 30 36 62 60 104 50' fill='none' stroke='%23d9b46a' stroke-opacity='.45' stroke-width='.6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: var(--fx-cut-opacity);
}
@keyframes fxSway { from { rotate: -.7deg; } to { rotate: .7deg; } }
@keyframes fxSwayFar { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
html.theme-festive main::before,
html.theme-festive main::after { animation: fxSway 9s ease-in-out infinite alternate; }
html.theme-festive body::after { animation: fxSwayFar 14s ease-in-out infinite alternate; }

@keyframes fxWindowRise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -46vh, 0) rotate(9deg); } }
@keyframes fxPlumRise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -74vh, 0); } }
@keyframes fxPlumShadowRise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(8px, -69vh, 0); } }
@supports (animation-timeline: scroll()) {
  html.theme-festive body::after {
    animation: fxSwayFar 14s ease-in-out infinite alternate, fxWindowRise linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0px 1500px;
  }
  html.theme-festive main::after {
    animation: fxSway 9s ease-in-out infinite alternate, fxPlumRise linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0px 1400px;
  }
  html.theme-festive main::before {
    animation: fxSway 9s ease-in-out infinite alternate, fxPlumShadowRise linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0px 1400px;
  }
}

/* 背景 canvas(JS 建立):煙火、紅紙屑、金箔 */
html.theme-festive .fx-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}
/* 送出鈕旁的小煙火(JS 建立,疊在紙卡上、不擋點擊) */
html.theme-festive .fx-pop {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

html.theme-festive ::selection { background: rgba(217, 180, 106, .45); color: #3a0a0b; }
html.theme-festive :focus-visible { outline: 2px solid var(--fx-gold-l); outline-offset: 3px; }
html.theme-festive main .card-paper :focus-visible,
html.theme-festive .sc-main :focus-visible { outline-color: #a3271f; }
html.theme-festive .scroll-progress,
html.theme-festive.ui-v2 .scroll-progress {
  height: 2px;
  background: linear-gradient(90deg, rgba(217, 180, 106, .45), var(--fx-gold) 70%, var(--fx-gold-l));
  box-shadow: none;
}

/* ====================================================================
   3. 導覽列:深朱紅(不透明、不做毛玻璃,底下有動畫時比較省)+ 春聯框的雙金線
   ==================================================================== */
html.theme-festive body > nav,
html.theme-festive.ui-v2 body > nav {
  background-color: rgba(118, 24, 26, .97) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(217, 180, 106, .5);
  box-shadow: 0 2px 0 0 rgba(118, 24, 26, .97), 0 3px 0 0 rgba(217, 180, 106, .3), 0 14px 28px -20px rgba(30, 2, 4, .8) !important;
}
html.theme-festive body > nav .hidden.md\:flex > div > button,
html.theme-festive body > nav .hidden.md\:flex > a:not(.rounded-full):not([class*="btn"]) { color: #f7e6d0; }
/* 「免費註冊 / 送 1 次解鎖」的朱紅小字在紅色導覽列上看不見 → 淺金 */
html.theme-festive body > nav .xd-nav-login .xd-nav-gift { color: var(--fx-gold-l); }
html.theme-festive body > nav .hidden.md\:flex > div > button:hover,
html.theme-festive body > nav .hidden.md\:flex > a:not(.rounded-full):not([class*="btn"]):hover { color: var(--fx-gold-l); text-shadow: none; }
/* AI 問事主打鈕 */
html.theme-festive body > nav a.rounded-full.bg-ink-950 {
  background: rgba(90, 16, 18, .9);
  color: var(--fx-gold-l);
  box-shadow: 0 0 0 1px rgba(217, 180, 106, .55);
}
/* 下拉、頭像選單 */
html.theme-festive body > nav [x-show].absolute.rounded-xl,
html.theme-festive.ui-v2 body > nav [x-show].absolute.rounded-xl {
  background-color: #7a1a1c;
  background-image: radial-gradient(120% 80% at 0% 0%, rgba(156, 36, 32, .5), transparent 60%);
  border-color: rgba(217, 180, 106, .3);
  border-radius: 14px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(217, 180, 106, .1), 0 30px 60px -24px rgba(30, 2, 4, .85);
}
html.theme-festive body > nav .bg-gradient-to-r.via-accent { background-image: linear-gradient(90deg, transparent, rgba(217, 180, 106, .55), transparent); }
html.theme-festive body > nav .bg-ink-950 { background-color: #5a1012; }
html.theme-festive body > nav .text-accent { color: var(--fx-gold-l); }
html.theme-festive body > nav [style*="color:#8A6D1F"] { color: var(--fx-gold-l) !important; }
html.theme-festive body > nav [style*="color:#B4242C"] { color: #f6d2b8 !important; }
html.theme-festive body > nav [style*="#c9a227"] { box-shadow: 0 0 0 2px var(--fx-gold) !important; }
html.theme-festive body > nav [style*="#fff8e8"] {
  background: linear-gradient(135deg, rgba(156, 36, 32, .7), rgba(106, 19, 22, .7)) !important;
  box-shadow: 0 0 0 1px rgba(217, 180, 106, .5), 0 8px 20px -12px rgba(30, 2, 4, .7) !important;
}
html.theme-festive body > nav [style*="#8f1c22"] { background: #5a1012 !important; box-shadow: 0 0 0 1px rgba(217, 180, 106, .45) !important; }
html.theme-festive .text-emerald-600 { color: var(--fx-ivory-2); }
/* 2026-10-28 老闆:下拉選單的 FREE 角標在紅底上幾乎看不見(綠色被換成米色,字又是白的)→ 金箔底深朱字;小字「免費」再亮一點、9px 放大到 10px */
html.theme-festive body > nav span.bg-emerald-600 {
  background: linear-gradient(180deg, #f8e6b4 0%, #e8cc8a 100%);
  color: #5e1013;
  box-shadow: 0 0 0 1px #5a1012, 0 1px 3px rgba(30, 2, 4, .55);
}
html.theme-festive body > nav .text-emerald-600 { color: #fbf1dc; }
html.theme-festive body > nav .text-\[9px\] { font-size: 10px; }
/* NEW / 限免 紅角標疊在深紅圖示上會糊成一片 → 加一圈金邊 */
html.theme-festive body > nav span[style*="background:#B4242C"] { box-shadow: 0 0 0 1px #e8cc8a, 0 1px 3px rgba(30, 2, 4, .55) !important; }
html.theme-festive body > nav .text-paper-100\/75 { color: rgba(251, 241, 220, .82); }
html.theme-festive body > nav .btn-ink-gold [style*="color:#4a3208"] { color: var(--fx-btn-ink) !important; }
html.theme-festive body > nav .btn-ink-gold [style*="color:#6b4a10"] { color: rgba(106, 19, 22, .8) !important; }
/* 手機選單 */
html.theme-festive body > nav > div.md\:hidden,
html.theme-festive body > nav [x-show].md\:hidden {
  background-color: rgba(112, 22, 25, .99) !important;
  border-color: rgba(217, 180, 106, .2) !important;
}
html.theme-festive body > nav .ring-1.bg-paper-50\/70 { background-color: rgba(90, 16, 18, .6); }
html.theme-festive body > nav button.md\:hidden { color: #f7e6d0; }
html.theme-festive body > nav button.md\:hidden:hover { background-color: rgba(251, 241, 220, .08); }
html.theme-festive body > nav [data-zh-toggle],
html.theme-festive body > nav a[hreflang] { color: #f7e6d0; border-color: rgba(217, 180, 106, .4); background-color: rgba(90, 16, 18, .55); }

/* ====================================================================
   4. 按鈕、公告列、提示、cookie、LINE 側鈕
   ==================================================================== */
/* 紅底上的主按鈕:金箔漸層 + 深紅字 + 暗金細邊(朱紅按鈕在紅底會被吃掉) */
html.theme-festive .btn-ink-cinnabar,
html.theme-festive.ui-v2 .btn-ink-cinnabar,
html.theme-festive .btn-ink-gold,
html.theme-festive.ui-v2 .btn-ink-gold {
  color: var(--fx-btn-ink);
  background: var(--fx-btn);
  border-color: var(--fx-btn-bd);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .6), 0 10px 22px -14px rgba(30, 2, 4, .8);
  text-shadow: none;
}
html.theme-festive .btn-ink-cinnabar::after,
html.theme-festive .btn-ink-gold::after { border-color: rgba(106, 19, 22, .28); }
html.theme-festive .btn-ink-cinnabar:hover,
html.theme-festive .btn-ink-gold:hover {
  color: #4a0c0e;
  border-color: #7a5622;
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .65), 0 0 0 1px rgba(232, 204, 138, .3), 0 14px 26px -14px rgba(30, 2, 4, .9);
}
/* 紙卡裡的送出鈕 / 「回到上方」:朱砂紅 + 金字 + 金細框(紅包封) */
html.theme-festive main .card-paper .btn-ink-cinnabar,
html.theme-festive.ui-v2 main .card-paper .btn-ink-cinnabar {
  color: #f5dfa6;
  background: var(--fx-seal);
  border-color: #6a1316;
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, .28), inset 0 -7px 12px -8px rgba(60, 6, 8, .5), 0 10px 22px -12px rgba(122, 26, 28, .55);
}
html.theme-festive main .card-paper .btn-ink-cinnabar::after { border-color: rgba(232, 204, 138, .62); }
html.theme-festive main .card-paper .btn-ink-cinnabar:hover {
  color: #fbe9bd;
  border-color: #5a1012;
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, .32), 0 0 0 1px rgba(217, 180, 106, .45), 0 14px 26px -12px rgba(122, 26, 28, .65);
}
html.theme-festive .btn-ghost { color: #f7e6d0; }
html.theme-festive .btn-ghost:hover { background: rgba(251, 241, 220, .08); }

html.theme-festive [data-free-mode-bar].xd-mix-bar {
  background: linear-gradient(90deg, #5a1012, #6a1316 50%, #5a1012);
  color: #f7e6d0;
  border-bottom: 1px solid rgba(217, 180, 106, .26);
}
html.theme-festive .xd-mix-bar .mb-dot { background: var(--fx-gold); box-shadow: none; }
html.theme-festive .xd-mix-bar a { color: var(--fx-gold-l); }
html.theme-festive .xd-mix-bar .mb-close { color: #ecd2bc; }
html.theme-festive [data-free-mode-bar]:not(.xd-mix-bar) {
  background: linear-gradient(90deg, #5a1012 0%, #6a1316 50%, #5a1012 100%) !important;
  background-image: linear-gradient(90deg, #5a1012 0%, #6a1316 50%, #5a1012 100%) !important;
  color: #f7e6d0 !important;
  box-shadow: inset 0 -1px 0 rgba(217, 180, 106, .32);
}
html.theme-festive [data-free-mode-bar]:not(.xd-mix-bar) > span > span:first-child { color: #6a1316 !important; background: #e8cc8a !important; border-color: transparent !important; }

html.theme-festive .card {
  background: #7a1a1c;
  border: 1px solid rgba(217, 180, 106, .28);
  color: var(--fx-ivory);
}
html.theme-festive [role="status"] > .rounded-xl.shadow-lg { background: #7a1a1c !important; }

/* LINE 側鈕:保留 LINE 綠(品牌辨識),只把收合小鈕換成深紅 */
html.theme-festive #line-side-tab > a { box-shadow: 0 0 0 1px rgba(217, 180, 106, .4), 0 10px 26px -12px rgba(30, 2, 4, .8) !important; }
html.theme-festive #line-side-tab > button {
  background: #6a1316 !important;
  color: #f7e6d0 !important;
  border-color: rgba(217, 180, 106, .38) !important;
}

/* ====================================================================
   5. 頁尾:收起宣紙山水,換深朱紅 + 頂端雙金線與一枚小窗花章
   ==================================================================== */
html.theme-festive body > footer {
  position: relative;
  color: var(--fx-ivory-2);
  background: linear-gradient(180deg, #6e1517 0%, #5e1214 100%);
  border-top: 0;
}
html.theme-festive body > footer > img,
html.theme-festive body > footer > .absolute.inset-0 { display: none; }
html.theme-festive body > footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E %3Cg stroke='%23d9b46a' fill='none'%3E %3Cpath d='M0 17.5 H578 M622 17.5 H1200' stroke-opacity='.55' stroke-width='1'/%3E %3Cpath d='M0 22.5 H578 M622 22.5 H1200' stroke-opacity='.3' stroke-width='.6'/%3E %3Ccircle cx='600' cy='20' r='16' stroke-opacity='.7' stroke-width='1'/%3E %3Cg stroke-opacity='.55' stroke-width='.8'%3E%3Cellipse cx='600' cy='20' rx='13' ry='4.6' transform='rotate(0 600 20)'/%3E%3Cellipse cx='600' cy='20' rx='13' ry='4.6' transform='rotate(45 600 20)'/%3E%3Cellipse cx='600' cy='20' rx='13' ry='4.6' transform='rotate(90 600 20)'/%3E%3Cellipse cx='600' cy='20' rx='13' ry='4.6' transform='rotate(135 600 20)'/%3E%3C/g%3E %3C/g%3E%3Ccircle cx='600' cy='20' r='2' fill='%23d9b46a'/%3E%3C/svg%3E") center top / 1200px 40px no-repeat;
}
html.theme-festive body > footer h4 { color: var(--fx-ivory); }
html.theme-festive body > footer .footer-link,
html.theme-festive.ui-v2 body > footer .footer-link { color: #ecd2bc; }
html.theme-festive body > footer .footer-link:hover,
html.theme-festive.ui-v2 body > footer .footer-link:hover { color: var(--fx-gold-l); text-shadow: none; }
html.theme-festive body > footer .footer-link::after { background: linear-gradient(90deg, rgba(217, 180, 106, .75), transparent); }
html.theme-festive body > footer .cloud-divider {
  height: 1px;
  margin: 0 auto;
  max-width: 80rem;
  background: linear-gradient(90deg, transparent, rgba(217, 180, 106, .35), transparent);
}
html.theme-festive body > footer > .container-wide:first-of-type,
html.theme-festive.ui-v2 body > footer > .container-wide:first-of-type { border-top: 0; }
html.theme-festive body > footer .text-ink-500 { color: var(--fx-ivory-2); }
html.theme-festive body > footer .text-ink-400 { color: var(--fx-ivory-3); }
html.theme-festive body > footer img.master-float { filter: none; }

/* ====================================================================
   6. 首屏:收起格線/幾何/古錢(換成剪紙與煙火),封面卷軸原圖原色(像掛在紅紙牆上的一幅畫)
   ==================================================================== */
html.theme-festive main > section.bg-candle-glow { background: none; }
html.theme-festive main > section:first-child > [aria-hidden="true"].absolute.inset-0,
html.theme-festive main > section:first-child > img[src*="coin-icon"] { display: none; }
html.theme-festive .xd-cover-scroll { filter: drop-shadow(0 18px 22px rgba(40, 4, 6, .5)); }
html.theme-festive .xd-start-title h1 span { color: var(--fx-gold-l); }
html.theme-festive .xd-start-tagline { color: var(--fx-ivory-2); }
/* 寬螢幕左欄的步驟編號:金箔小方印、深紅字 */
html.theme-festive .xd-svc-steps li::before { background: var(--fx-btn); color: #6a1316; box-shadow: inset 0 0 0 1px rgba(154, 114, 50, .6); }

/* ====================================================================
   7. 紙卡(流年說明卡、表單、側欄、延伸閱讀):米金灑金箋 + 暗金外框 + 朱紅內框
   ==================================================================== */
html.theme-festive main .card-paper,
html.theme-festive.ui-v2 main .card-paper {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e2c278'/%3E%3Cstop offset='1' stop-color='%23a8802f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpolygon points='79.2,318.2 77.0,320.5 74.3,319.2 74.9,316.2 77.3,315.5' fill-opacity='0.41'/%3E%3Cpolygon points='348.4,425.1 345.6,426.7 344.4,425.7 344.2,422.9 347.0,422.1' fill-opacity='0.41'/%3E%3Cpolygon points='379.3,56.5 376.8,59.3 373.6,58.8 374.9,56.0 376.3,54.2' fill-opacity='0.56'/%3E%3Cpolygon points='305.4,435.7 303.8,438.9 301.9,438.5 300.4,436.6 302.2,433.9 303.7,434.1' fill-opacity='0.44'/%3E%3Cpolygon points='385.2,72.5 384.3,75.6 381.9,74.3 382.8,71.7 384.9,70.6' fill-opacity='0.56'/%3E%3Cpolygon points='154.6,349.9 152.0,353.9 149.6,350.8 153.4,346.7' fill-opacity='0.59'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 460px 460px repeat,
    linear-gradient(180deg, #fcf5e6 0%, #f8eedb 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(176, 138, 62, .6);
  box-shadow: inset 0 0 0 4px #fbf3e2, inset 0 0 0 5px rgba(163, 39, 31, .2), 0 24px 50px -28px rgba(40, 4, 6, .7), 0 2px 6px -2px rgba(40, 4, 6, .3);
}
html.theme-festive main .card-paper:hover { border-color: rgba(176, 138, 62, .75); }
/* 表單四角:春聯框的金色小角 */
html.theme-festive main form.card-paper::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  z-index: 0;
  --c: rgba(176, 138, 62, .75);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 18px no-repeat;
}
/* 「這次最想問什麼」選中:黑底 → 朱砂紅底金字(其餘照原樣) */
html.theme-festive .ask-chip.is-on,
html.theme-festive .ask-none.is-on { background: #8e1f1f; color: #f5dfa6; border-color: #b08a3e; }
html.theme-festive .ask-mic,
html.theme-festive .mic-dictate { background: #8e1f1f; color: #f5dfa6; }
/* 必填星號在紙卡裡用朱紅 */
html.theme-festive main .card-paper .text-rose-500 { color: #b4242c; }
/* 表單下方紅底上的小字 */
html.theme-festive main .text-ink-400 { color: var(--fx-ivory-3); }
html.theme-festive main .card-paper .text-ink-400,
html.theme-festive .sc-main .text-ink-400 { color: #7A6E54; }

/* ====================================================================
   8. 服務正文 + FAQ:紅底上鋪一張米色書頁(長文在紙上讀比較不累);側欄大綱是紙卡
   ==================================================================== */
html.theme-festive .sc-wrap {
  background: linear-gradient(180deg, rgba(58, 6, 8, .12), rgba(58, 6, 8, .2));
  border-top: 0;
}
html.theme-festive .sc-cloud { display: none; }
html.theme-festive .sc-main {
  position: relative;
  padding: clamp(18px, 3.6vw, 46px) clamp(16px, 3.6vw, 48px);
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e2c278'/%3E%3Cstop offset='1' stop-color='%23a8802f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpolygon points='79.2,318.2 77.0,320.5 74.3,319.2 74.9,316.2 77.3,315.5' fill-opacity='0.41'/%3E%3Cpolygon points='348.4,425.1 345.6,426.7 344.4,425.7 344.2,422.9 347.0,422.1' fill-opacity='0.41'/%3E%3Cpolygon points='379.3,56.5 376.8,59.3 373.6,58.8 374.9,56.0 376.3,54.2' fill-opacity='0.56'/%3E%3Cpolygon points='305.4,435.7 303.8,438.9 301.9,438.5 300.4,436.6 302.2,433.9 303.7,434.1' fill-opacity='0.44'/%3E%3Cpolygon points='385.2,72.5 384.3,75.6 381.9,74.3 382.8,71.7 384.9,70.6' fill-opacity='0.56'/%3E%3Cpolygon points='154.6,349.9 152.0,353.9 149.6,350.8 153.4,346.7' fill-opacity='0.59'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 460px 460px repeat,
    linear-gradient(180deg, #fcf5e6 0%, #f8eedb 100%);
  border: 1px solid rgba(176, 138, 62, .6);
  box-shadow: inset 0 0 0 5px #fbf3e2, inset 0 0 0 6px rgba(163, 39, 31, .18), 0 30px 60px -34px rgba(40, 4, 6, .75), 0 2px 8px -3px rgba(40, 4, 6, .3);
}
html.theme-festive .sc-main .sc-cta.card-paper { box-shadow: inset 0 0 0 1px rgba(176, 138, 62, .35), 0 12px 24px -18px rgba(40, 4, 6, .5); }
/* 側欄大綱在紅底上跟著捲動:紙卡 */
html.theme-festive .sc-side .sc-side-card { color: #1A1812; }
/* 延伸閱讀:標題在紅底上;卡片是紙卡 */
html.theme-festive section[aria-labelledby^="related-heading"] { background: transparent; border-top-color: rgba(217, 180, 106, .22); }

/* ====================================================================
   9. 結果頁預留(之後 AnnualTheme::PAGES 加入 annual_book.show 才會用到;2026-10-25 尚未實際看過)
   ==================================================================== */

/* ====================================================================
   10. 手機:剪紙縮小靠邊
   ==================================================================== */
@media (max-width: 767px) {
  html.theme-festive { --fx-plum-w: 168px; --fx-window-w: 190px; --fx-window-opacity: .5; }
  html.theme-festive body::after { top: 50px; right: -74px; }
  html.theme-festive main::before,
  html.theme-festive main::after { top: 84px; left: -22px; }
}
@media (max-width: 767px), (pointer: coarse) {
  html.theme-festive body > nav [x-show].absolute.rounded-xl { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ====================================================================
   11. 減少動態:剪紙不晃、不隨捲動(canvas 由 JS 只畫一張靜態:一朵定格煙火 + 靜止紙屑)
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.theme-festive body::after,
  html.theme-festive main::before,
  html.theme-festive main::after { animation: none !important; }
}