:root{
  /* =========================================================
     福利通 — 設計識別「Editorial Warm・福利公報 / Almanac」
     概念：散落各處的好康，編成一本溫暖、可信、考究的福利公報。
     - 主導色：朱紅（auspicious 印章紅 #C8432B）— 一個自信的強調色，
       絕不平均分配；CTA / 連結 / 折扣 / 急迫全部由它承擔。
     - 次要：黃銅金（brass）只服務「政府・可信」這一條 track，極克制。
     - success 葉綠：只給「已參與」。
     - 表面：暖象牙紙 ivory，文字深墨棕；陰影用暖棕 rgba，不用中性黑。
     舊變數名（--coral/--forest/--gold/--reward…）全部保留並對映新色，
     讓既有 SPA 一鍵換膚、零 JS 改動。對比皆顧 WCAG AA（高齡友善）。
     ========================================================= */

  /* ---- 語意 TOKEN（主軸：朱紅主導）---- */
  --reward:#C8432B;            /* 朱紅：reward / CTA / 連結 主色 */
  --reward-strong:#B23A24;     /* fill + 白字 5.6:1 AA */
  --reward-deep:#97301D;       /* hover / pressed */
  --reward-ink:#A8351F;        /* 朱紅文字（連結/折扣）on ivory 5.8:1 AA */
  --reward-soft:#FAE5DC;       /* 朱紅洗：折扣 chip / 品牌標底 */
  --reward-line:#EDC9BC;       /* 朱紅淡邊 */
  --trust:#5A4A39;             /* 墨棕：信任載體 on ivory 8.6:1 AA */
  --trust-gold:#B07A1E;        /* 黃銅金：政府可信點綴（已加深，本身可當文字 4.5:1） */
  --trust-gold-ink:#8A5E12;    /* 金文字版 on ivory 5.4:1 AA */
  --trust-soft:#F2E6CF;        /* 金/棕洗：可信章底 */
  --trust-line:#E3D3AE;
  --success:#2F7D4F;           /* 葉綠：極少量，僅「已參與」 on ivory 4.7:1 AA */
  --success-soft:#E4F0E6;
  --urgent:#BC4014;            /* 快過期暖提醒：朱紅暖方向 fill+白 5.6:1 AA */
  --urgent-strong:#93300E;
  --urgent-soft:#FBE4D6;

  /* ---- surfaces: 暖象牙紙，never cold white ---- */
  --paper:#FBF4E8;          /* warm ivory paper — 公報底紙 */
  --paper-2:#F3E9D6;        /* sunken / grouped band */
  --paper-warm:#F8EAD2;     /* light wheat promo band */
  --card:#FFFDF8;           /* card surface — warm white，比底紙亮一階浮起 */

  /* ---- text: 深墨棕近黑，not pure #000 ---- */
  --ink:#2E251C;            /* headings/body  on ivory ~12:1 AA */
  --ink-2:#5F5040;          /* muted body     ~6.0:1           AA */
  --ink-3:#6E5E49;          /* metadata       ~3.6:1           AA-Large */

  /* ---- 舊變數對映新色（保留 API，全 SPA 自動換膚）---- */
  --coral:var(--reward);
  --coral-fill:var(--reward-strong);
  --coral-deep:var(--reward-deep);
  --coral-ink:var(--reward-ink);
  --coral-soft:var(--reward-soft);
  --gold:var(--trust-gold-ink);
  --gold-soft:var(--trust-gold);
  --amber:var(--trust-gold);
  --amber-soft:var(--trust-soft);
  /* forest 系：政府福利「可信章」用墨棕+黃銅金 */
  --forest:var(--trust);
  --forest-deep:#473829;
  --forest-ink:var(--trust);
  --moss:#A6885C;
  --leaf-tint:var(--trust-soft);

  /* ---- lines & status ---- */
  --line:#EBDEC7;           /* warm hairline on ivory */
  --line-soft:#F1E6D2;
  --line-strong:#DDCBA8;    /* stronger border / inputs */
  --rust:var(--urgent);
  --rust-tint:var(--urgent-soft);
  --grey-exp:#988873;       /* expired text (warm grey) AA-Large */
  --expired-bg:#F1E9DA;     /* expired card bg — desaturated, still warm */

  /* ---- warm soft shadows (brown rgba, not neutral black) ---- */
  --shadow-soft:none; /* 試移除陰影 was 0 1px 2px rgba(110,80,45,.04), 0 2px 8px rgba(110,80,45,.05) */
  --shadow-lift:none; /* was 0 6px 16px rgba(110,80,45,.09), 0 12px 28px rgba(110,80,45,.08) */

  --radius-card:16px;
  --radius-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);  /* easeOutExpo — premium entrance curve */
  --maxw:1200px;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  /* --serif 名稱：display 標題字體堆疊 — 思源宋(Noto Serif TC) → 系統繁中襯線 */
  --serif:"Noto Serif TC","Songti TC","PingFang TC","Source Han Serif TC",serif;
  --round:var(--serif);
  /* --mono：標籤/資料 = DM Mono；大數字另用 --figure(Fraunces) */
  --mono:"DM Mono","Noto Sans TC",ui-monospace,monospace;
  /* 2026-06-11 UIUX：數字字體從 Fraunces 換成與標題同款 Noto Serif TC——
     少載一套字型、數字與中文標題同一個 serif 個性（Fraunces 是典型 AI 生成網站簽名字體）。 */
  --figure:"Noto Serif TC",Georgia,serif;
  /* ===== 升級新增：模組化字級尺標（1.20 minor-third，以 17px 內文為錨）===== */
  --fs-100:13px; --fs-200:13.5px; --fs-300:15px; --fs-400:17px;
  --fs-500:clamp(18px,1.2vw,20px); --fs-600:clamp(22px,2.4vw,25px);
  --fs-700:clamp(26px,3.4vw,34px); --fs-800:clamp(32px,4.6vw,46px);
  /* ===== 8pt 間距尺標 ===== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  /* ===== 精準排版常數（字距/行高分階）===== */
  --lh-display:1.18; --lh-title:1.34; --lh-body:1.74;
  --ls-display:-.018em; --ls-title:-.006em; --ls-eyebrow:.2em;
  /* ===== 第三階陰影（hero / modal）+ focus ring ===== */
  --shadow-hero:0 2px 8px rgba(110,80,45,.06), 0 18px 44px rgba(110,80,45,.13), 0 40px 80px rgba(110,80,45,.10);
  --ring-focus:0 0 0 3px rgba(200,67,43,.16);
}
/* ===== 三軌色系主題（body[data-track]）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   brand＝現行暖紅（:root 預設即是，不需覆寫）
   gov  ＝藍＋綠官方感（主色青藍 teal、官方章轉綠、急迫轉藍）
   all  ＝暖紅為主、藍綠點綴（信任色轉藍綠、裝飾線三色漸層）
   切換時由 .theme-anim 提供 0.6s 顏色漸變。 ====================== */
html[data-track="gov"]{
  --reward:#1E7F86;            /* 青藍 teal 接手主色職責 */
  --reward-strong:#17696F;     /* fill + 白字 AA */
  --reward-deep:#115257;
  --reward-ink:#116A71;        /* teal 文字 on ivory AA */
  --reward-soft:#DEF0EE;
  --reward-line:#BBDDD9;
  --trust-gold:#2E8B57;        /* 官方「可信章」轉綠 */
  --trust-gold-ink:#1F6B41;
  --trust-soft:#E1F0E5;
  --trust-line:#BFDFC9;
  --urgent:#1E6FA8;            /* 急迫提醒走藍 */
  --urgent-strong:#175A89;
  --urgent-soft:#DEEBF7;
  --ring-focus:0 0 0 3px rgba(30,127,134,.16);
  /* —— 整體背景／表面換成藍綠冷調紙 —— */
  --paper:#EDF4F1;             /* 冷調薄荷紙 */
  --paper-2:#E0EDE8;           /* 沉版分組帶 */
  --paper-warm:#E3F0EA;        /* 促銷帶 */
  --card:#F9FCFB;              /* 卡片冷白 */
  --line:#D5E5DF;              /* 冷調 hairline */
  --line-soft:#E1EEE9;
  --line-strong:#BFD8D0;
  --expired-bg:#E6EEEA;
  --shadow-soft:none; /* was 0 1px 2px rgba(40,85,90,.04), 0 2px 8px rgba(40,85,90,.05) */
  --shadow-lift:none; /* was 0 6px 16px rgba(40,85,90,.09), 0 12px 28px rgba(40,85,90,.08) */
  --shadow-hero:0 2px 8px rgba(40,85,90,.06), 0 18px 44px rgba(40,85,90,.13), 0 40px 80px rgba(40,85,90,.10);
}
html[data-track="all"]{
  /* 暖紅維持主角；信任/輔助系帶入藍綠 → 紅+藍+綠混搭 */
  --trust-gold:#2C8C77;
  --trust-gold-ink:#1E6B59;
  --trust-soft:#E0F0EB;
  --trust-line:#BFDFD4;
  /* —— 背景轉中性偏青的混搭紙（介於暖紅與藍綠之間）—— */
  --paper:#F4F3EA;
  --paper-2:#EAEBDD;
  --paper-warm:#EEF0E0;
  --card:#FCFDF8;
  --line:#DFE2CE;
  --line-soft:#E9EBDA;
  --line-strong:#CDD2B8;
  --shadow-soft:none; /* was 0 1px 2px rgba(80,90,55,.04), 0 2px 8px rgba(80,90,55,.05) */
  --shadow-lift:none; /* was 0 6px 16px rgba(80,90,55,.09), 0 12px 28px rgba(80,90,55,.08) */
  --shadow-hero:0 2px 8px rgba(80,90,55,.06), 0 18px 44px rgba(80,90,55,.13), 0 40px 80px rgba(80,90,55,.10);
}
/* all：裝飾性線條改紅→藍→綠三色漸層 */
html[data-track="all"] .kicker .rule,
html[data-track="all"] .list-head::after{
  background:linear-gradient(90deg, var(--reward) 0%, #1E7F86 55%, #2E8B57 100%);
}
/* gov 卡片官方章：原本帶硬編碼棕金，轉綠系 */
html[data-track="gov"] .kind-tag.tag-gov{background:linear-gradient(180deg,var(--trust-gold),#1F6B41);border-color:#1A5A36;box-shadow:0 1px 2px rgba(31,107,65,.2)}
html[data-track="gov"] .kind-tag.tag-gov .i{color:#D9F2E2}
html[data-track="all"] .kind-tag.tag-gov{background:linear-gradient(180deg,var(--trust-gold),#1E6B59);border-color:#19584A;box-shadow:0 1px 2px rgba(30,107,89,.2)}
html[data-track="all"] .kind-tag.tag-gov .i{color:#D8F0EA}
/* gov：政府補助 pill active 在綠底上改白字（原本深棕字是配金底的） */
html[data-track="gov"] .track-pill.is-gov.active{color:#fff}
html[data-track="gov"] .track-pill.is-gov.active .i,
html[data-track="gov"] .track-pill.is-gov.active .tk-ct{color:#fff;opacity:1}
/* gov：硬編碼紅色 rgba 陰影改 teal 版（聚焦、主按鈕、導覽） */
html[data-track="gov"] .mn-tab.active{box-shadow:0 3px 10px rgba(30,127,134,.28)}
html[data-track="gov"] .btn-primary{box-shadow:0 10px 24px rgba(23,105,111,.26)}
@media (hover:hover){html[data-track="gov"] .btn-primary:hover{box-shadow:0 14px 30px rgba(23,105,111,.32)}}
html[data-track="gov"] .hero-search input:focus{box-shadow:0 0 0 3px rgba(30,127,134,.14),var(--shadow-soft)}
/* gov / all：頁面氛圍暈（紙質底紋）跟著轉色 */
html[data-track="gov"] body::before{
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(30,127,134,.05), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(46,139,87,.05), transparent 60%);
}
html[data-track="all"] body::before{
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(200,67,43,.04), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(30,127,134,.045), transparent 60%);
}
/* 0.6s 主題漸變：切換瞬間掛上，700ms 後移除（避免長期蓋掉元件自身的互動動效） */
body.theme-anim, body.theme-anim *, body.theme-anim *::before, body.theme-anim *::after{
  transition: background-color .6s ease, color .6s ease, border-color .6s ease,
              box-shadow .6s ease, fill .6s ease, stroke .6s ease !important;
}
/* ===== Morilife 田野森專題頁：致敬官方 landing 的金×深色質感 ===== */
.vendor-inner[data-vslug="morilife0102"] .vendor-hero{min-height:340px}
.vendor-inner[data-vslug="morilife0102"] .vendor-hero h1{font-family:var(--serif);font-weight:900;letter-spacing:.01em;color:#fff}
.vendor-inner[data-vslug="morilife0102"] .vendor-hero .topic-tagline{color:#EAD9B0}
.vendor-inner[data-vslug="morilife0102"] .th-kind{background:transparent;border:1px solid #D9B36C;color:#EAD9B0;letter-spacing:.22em;text-transform:uppercase;border-radius:999px}
.vendor-inner[data-vslug="morilife0102"] .vf-label{color:#8A6A2E}
.vendor-inner[data-vslug="morilife0102"] .vf-label .i{color:#B98A3A}
.vendor-inner[data-vslug="morilife0102"] .vf-cell{border-color:#E4D5B4;background:#FFFDF6}
.vendor-inner[data-vslug="morilife0102"] .vendor-info h2 .i{color:#B98A3A}
.vendor-inner[data-vslug="morilife0102"] .vi-cta{background:#F6EBD2;border-color:#E4D5B4}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}   /* 2026-06-11 Joker：手機不允許橫向滑動（clip 不產生捲動容器、不影響 sticky header） */
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.74;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* 紙質氛圍：極淡暖色漸層暈 + 幾乎不可見的纖維點，殺掉平板 AI 感而不喧賓奪主 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(200,67,43,.045), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(176,122,30,.05), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(150,100,50,.028) 1px, transparent 1.4px);
  background-size:20px 20px;
}
/* display 標題：思源宋襯線；900 給最大標、700 給段落標。字距微收使其緊湊有刊物感 */
h1,h2,h3,h4{font-family:var(--round);line-height:1.32;margin:0;color:var(--ink);font-weight:700;letter-spacing:-.005em}
.mono{font-family:var(--mono);letter-spacing:.01em}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* 大數字：Fraunces 襯線數字，有個性、tnum 對齊 */
.num-big{font-family:var(--figure);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
button{font-family:inherit;cursor:pointer}
a{color:var(--coral-ink);text-decoration:none}
img{max-width:100%}
:focus-visible{outline:3px solid var(--coral-fill);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* icon helper — every icon is currentColor, 1.6 stroke, round joins */
/* 2026-06-05 Joker：全部小 icon 放大一點點、粗一點點 */
.i{display:inline-block;vertical-align:-0.2em;width:1.12em;height:1.12em;stroke:currentColor;stroke-width:1.95;
  stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}
.i--sm{width:.98em;height:.98em}

/* eyebrow / kicker — DM Mono，編輯式署名；前置一道朱紅短規 */
.kicker{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--coral-ink);display:inline-flex;align-items:center;gap:10px;
}
.kicker .rule{display:inline-block;width:26px;height:2px;background:var(--coral);border-radius:2px}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  /* 2026-06-05 Joker：header 底色跟著軌道主題（固定暖米色在政府綠主題下突兀）。
     color-mix 讓 --paper 帶 86% 不透明度配 blur，三軌都融入各自背景 */
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:14px;padding:10px 26px;
}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0}
.brand img{width:40px;height:40px;display:block;border-radius:8px}
.site-header .brand img{width:68px;height:68px;border-radius:13px}  /* 左上 logo（2026-06-05 再放大） */
/* 2026-06-05：721–960px 中等寬度把 logo 略縮，避免 68px 撐高 header 吃掉小筆電/平板垂直空間 */
@media (max-width:960px){.site-header .brand img{width:60px;height:60px}}
.brand .name{font-family:var(--serif);font-weight:900;font-size:25px;color:var(--ink);letter-spacing:.02em;line-height:1.05}
.brand .en{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:500;letter-spacing:.24em;text-transform:uppercase;margin-top:3px}
.header-count{
  margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  display:flex;align-items:baseline;gap:7px;white-space:nowrap;letter-spacing:.02em;
}
.menu-wrap{margin-left:6px}
.header-count b{font-family:var(--figure);font-size:20px;color:var(--reward-ink);font-weight:600}
.header-count .lbl{letter-spacing:.1em;font-size:12px;color:var(--ink-3)}

/* ============ 主導覽（header）：首頁 / 專題 / 專屬福利 ============ */
.main-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.mn-tab{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid transparent;border-radius:11px;
  padding:9px 15px;font-family:var(--sans);font-size:15px;font-weight:700;
  color:var(--ink-2);letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  transition:color .16s,background .16s,border-color .16s;
}
.mn-tab .i{font-size:18px;stroke-width:1.8}
@media (hover:hover){.mn-tab:hover{color:var(--ink);background:var(--paper-2)}}
.mn-tab.active{color:#fff;background:var(--reward);border-color:var(--reward);box-shadow:0 3px 10px rgba(200,67,43,.28)}
.mn-tab.active .i{color:#fff}
.mn-tab .mn-ct{
  min-width:19px;height:19px;border-radius:999px;padding:0 5px;
  background:var(--trust-gold);color:#3A2E24;font-family:var(--mono);font-weight:700;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
}
.mn-tab.active .mn-ct{background:#fff;color:var(--reward-ink)}
/* header 統計＋搜尋（自 greeting 帶移入；順序：logo→品牌→統計→搜尋→導覽） */
.header-tools{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:22px;margin:0 20px}
.header-tools .hero-stats{display:flex;gap:16px;align-items:center;margin:0;flex:0 0 auto}
.header-tools .hero-stats .num{font-size:21px}
.header-tools .hero-stats .lbl{font-size:12px}
.header-tools .hero-search{flex:1 1 auto;min-width:160px;max-width:520px;margin:0}
.header-tools .hero-search input{padding:9px 14px 9px 40px;font-size:16px;border-radius:999px;width:100%}
.header-tools .hero-search .mag{left:14px;font-size:16px}
/* 搜尋送出鈕：嵌在膠囊右端 */
.hero-search{position:relative}
.search-go{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  border:none;cursor:pointer;border-radius:999px;padding:6px 14px;
  background:var(--reward-strong);color:#fff;font-weight:700;font-size:13px;font-family:var(--sans);
  transition:background .15s ease;
}
@media (hover:hover){.search-go:hover{background:var(--reward-deep)}}
.header-tools .hero-search input{padding-right:74px}
@media (max-width:1100px){.header-tools .hero-stats .stat:nth-child(2){display:none}}
@media (max-width:960px){.header-tools .hero-stats{display:none}}
@media (max-width:760px){.header-inner{flex-wrap:wrap !important}.header-tools{order:9;flex-basis:100%;margin:8px 0 0}
/* 2026-06-05 Joker：手機版 header（含搜尋列）不要 sticky 跟著捲動 */
.site-header{position:static}}
/* 我的好康收集冊：小 icon */
.collect-icon{
  position:relative;flex-shrink:0;margin-left:10px;
  width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .16s,background .16s,border-color .16s,transform .12s;
}
.collect-icon .i{font-size:20px;stroke-width:1.8}
@media (hover:hover){.collect-icon:hover{color:var(--reward-ink);border-color:var(--reward-line);background:var(--coral-soft)}}
.collect-icon:active{transform:scale(.93)}
.collect-icon .ci-ct{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:999px;padding:0 4px;
  background:var(--trust-gold);color:#3A2E24;font-family:var(--mono);font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--paper);
}
.visually-hidden-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:720px){
  .header-inner{gap:8px;padding:9px 14px}
  .site-header .brand img{width:52px;height:52px;border-radius:10px}
  .brand .name{font-size:19px}
  .brand .en{display:none}
  .mn-tab{padding:8px 11px;font-size:13px;gap:5px}
  .mn-tab .i{font-size:16px}
  .main-nav{gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .collect-icon{width:38px;height:38px;margin-left:6px}
}
@media (max-width:440px){
  .mn-tab span:not(.mn-ct){display:none}
  .mn-tab{padding:8px 10px}
}

/* ============ HERO 已被 full-bleed 輪播取代；保留 .hero 但隱藏（避免重複大標）。
   功能（搜尋 + 統計）改放進輪播下方的精簡 masthead 帶（.greeting）。 ============ */
.hero{display:none}
.hero-mark{display:none}
.hero-inner{display:none}
.hero-left,.hero-right{min-width:0}
.hero h1 .accent{color:var(--coral-ink)}
.hero h1.lit .accent::after{}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:16px;border:none;border-radius:12px;
  padding:0 22px;min-height:52px;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s ease, border-color .16s ease;
}
.btn .i{font-size:19px;stroke-width:1.8}
/* primary CTA = coral fill (the one action color that dominates the screen) */
.btn-primary{background:var(--coral-fill);color:#fff;box-shadow:0 10px 24px rgba(200,73,42,.26)}
@media (hover:hover){.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(200,73,42,.32);background:var(--coral-deep)}}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line-strong);box-shadow:var(--shadow-soft)}
@media (hover:hover){.btn-ghost:hover{background:var(--paper-2);transform:translateY(-2px);border-color:var(--coral)}}
.btn-ghost:active{transform:translateY(0)}

/* masthead search — 放進 .greeting 帶右側 */
.hero-search{flex:1;min-width:240px;max-width:420px;position:relative}
.hero-search input{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  padding:14px 18px 14px 48px;border-radius:13px;border:1.5px solid var(--line-strong);
  box-shadow:var(--shadow-soft);background:var(--card);transition:border-color .14s, box-shadow .14s;
}
.hero-search input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(200,67,43,.14),var(--shadow-soft)}
.hero-search input::placeholder{color:var(--ink-3)}
.hero-search .mag{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--coral);pointer-events:none;display:flex}
/* compact stat row — Fraunces 大數字 */
.hero-stats{display:flex;flex-wrap:wrap;gap:0;flex-shrink:0}
.hero-stats .stat{padding-right:22px;margin-right:22px;border-right:1px solid var(--line-strong)}
.hero-stats .stat:last-child{border-right:none;margin-right:0;padding-right:0}
.hero-stats .num{font-family:var(--figure);font-size:27px;font-weight:600;color:var(--reward-ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0}
.hero-stats .lbl{font-size:12px;color:var(--ink-3);margin-top:6px;letter-spacing:.02em}
@media (max-width:680px){.hero-stats{display:none}}

/* ===== entrance reveal (single-shot, small offset, staggered) ===== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease), transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* match banner */
.match-banner{max-width:var(--maxw);margin:20px auto 0;padding:0 26px}
.match-banner-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:15px 20px;position:relative;
}
.match-banner-inner::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;background:var(--coral);border-radius:0 3px 3px 0;
}
.match-banner-inner .mb-ico{color:var(--coral);font-size:22px;display:flex}
.match-banner-inner .mb-text{font-weight:600;color:var(--ink);font-size:17px}
.match-banner-inner .mb-text b{font-family:var(--mono);font-size:20px;color:var(--coral-ink)}
.match-banner-inner .mb-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.chip-mini{
  font-size:14px;font-weight:600;padding:8px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--paper);color:var(--forest-ink);min-height:40px;
  display:inline-flex;align-items:center;gap:6px;transition:all .14s;
}
.chip-mini .i{font-size:15px}
@media (hover:hover){.chip-mini:hover{background:var(--leaf-tint);border-color:var(--moss)}}

/* ============ FILTER BAR — compact single-row toolbar ============
   top must equal the sticky header height (minus its 1px border) so the
   bar docks flush under the header with no gap/overlap. Header ≈ 77px
   desktop / 75px mobile (driven by the 54px logo + padding). */
.filterbar{
  /* 2026-06-04 Joker：往下捲時分類列不要 sticky 跟住 → 改回一般文流 */
  /* 2026-06-05 Joker：底色跟著軌道主題走（原本固定暖米色，在政府/全部主題下突兀） */
  position:relative;z-index:40;
  background:var(--paper);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:9px 0;
}
.filterbar-inner{max-width:var(--maxw);margin:0 auto;padding:0 26px;display:flex;align-items:center;gap:10px}
/* horizontal scroll cat strip — fades at the right edge */
.cat-scroll{
  display:flex;align-items:center;gap:7px;overflow-x:auto;flex:1;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  padding:2px 0;
}
.cat-scroll::-webkit-scrollbar{display:none}
.filter-label{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.18em;margin-right:2px;flex-shrink:0;
}
.chip{
  font-size:14px;font-weight:600;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;min-height:38px;display:inline-flex;align-items:center;gap:7px;
  transition:background .14s ease, color .14s ease, border-color .14s ease, transform .12s var(--ease);
  white-space:nowrap;flex-shrink:0;
}
.chip .i{font-size:15px;color:var(--ink-3);transition:color .14s}
.chip.is-empty{opacity:.45;pointer-events:none}
.chip .cat-ic{width:20px;height:20px;border-radius:6px;object-fit:cover;flex-shrink:0}
@media (hover:hover){.chip:hover{border-color:var(--reward-line);color:var(--ink);background:var(--reward-soft)}}
@media (hover:hover){.chip:hover .i{color:var(--coral)}}
.chip:active{transform:scale(.96)}
.chip.active{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill);box-shadow:0 4px 12px rgba(178,58,36,.22)}
.chip.active .i{color:#fff}
.chip.active .dot{box-shadow:0 0 0 2px rgba(255,255,255,.5) inset}
.chip .ct{font-family:var(--mono);font-size:12px;opacity:.55;font-variant-numeric:tabular-nums}
.chip.active .ct{opacity:.85}
.chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ============ 排序鈕列（最新/期限/熱門/地區），位於分類列下方 ============ */
.sortbar-inner{max-width:var(--maxw);margin:2px auto 14px;padding:0 26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filterbar .filterbar-inner{margin-bottom:6px}  /* 與下方品牌列留呼吸（2026-06-05 行距調整） */
.sort-row{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.sort-btn{
  font-size:14px;font-weight:700;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;min-height:36px;display:inline-flex;align-items:center;gap:6px;
  transition:background .14s,color .14s,border-color .14s,transform .12s;white-space:nowrap;
}
.sort-btn .i{font-size:15px;color:var(--ink-3);transition:color .14s}
@media (hover:hover){.sort-btn:hover{border-color:var(--reward-line);color:var(--ink);background:var(--coral-soft)}}
@media (hover:hover){.sort-btn:hover .i{color:var(--coral)}}
.sort-btn:active{transform:scale(.96)}
.sort-btn.active{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill);box-shadow:0 4px 12px rgba(178,58,36,.22)}
.sort-btn.active .i{color:#fff}
.region-pick-wrap{position:relative;margin-left:auto}
.region-btn.has-region{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill)}
.region-btn.has-region .i{color:#fff}
.region-caret{font-size:14px}
.region-menu{
  position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:92vw;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 54px rgba(20,30,14,.2);padding:14px 16px 16px;
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .16s var(--ease),transform .16s var(--ease);
}
.region-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
.rm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rm-title{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase}
.rm-clear{font-size:13px;font-weight:700;color:var(--coral-ink);background:none;border:none;padding:4px 6px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (hover:hover){.rm-clear:hover{color:var(--coral-deep)}}
.region-menu .q-region-cascade{margin-top:0;gap:11px;max-width:none}
.region-menu .date-note{margin-top:10px;font-size:13px}
.region-menu .date-note b{font-size:14px}
.region-menu .rc-lbl{flex:0 0 64px;font-size:14px}
.region-menu .date-sel select{min-height:42px}
.rm-apply{display:block;width:100%;margin-top:14px;padding:12px;border:none;border-radius:12px;background:var(--coral-fill);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
@media (hover:hover){.rm-apply:hover{background:var(--coral-deep)}}
/* 2026-06-11 UIUX：手機篩選區從「pill 疊三行吃掉首屏」收斂成固定兩行——
   第 1 行＝軌道分段（全部/政府/品牌）佔滿；第 2 行＝排序 pills 單行橫滑＋地區鈕釘在右側。
   橫滑列右緣做淡出遮罩提示還有內容；「排序」字樣省略（pills 自說明）。 */
@media (max-width:680px){
  .sortbar-inner{padding:0 14px;row-gap:9px}
  .sortbar-inner > .filter-label{display:none}
  .track-seg{flex:1 1 100%}
  .sort-row{
    flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;padding:2px 0;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  }
  .sort-row::-webkit-scrollbar{display:none}
  .region-pick-wrap{margin-left:0;flex-shrink:0}
  /* 觸控目標：手機上 pill 高度拉到 42px+（原 36/38px 偏小） */
  .sort-btn{min-height:42px;padding:8px 15px}
  .chip{min-height:42px;padding:8px 15px}
}
/* 2026-06-11 Joker：手機版地區彈框會超出畫面 → 改成由下往上的 bottom sheet（與「我的收藏」抽屜一致） */
@media (max-width:760px){
  body.region-sheet-open::before{
    content:"";position:fixed;inset:0;z-index:115;background:rgba(50,32,20,.5);backdrop-filter:blur(2px);
  }
  .region-menu{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;z-index:120;
    border-radius:24px 24px 0 0;max-height:78vh;overflow-y:auto;
    padding:16px 18px calc(22px + env(safe-area-inset-bottom,0));
    box-shadow:0 -10px 40px rgba(50,32,20,.25);
    transform:translateY(100%);
  }
  .region-menu.open{transform:none}
}

/* ============ LIST ============ */
.list-wrap{max-width:var(--maxw);margin:0 auto;padding:22px 26px 90px}
.list-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;
  border-bottom:2px solid var(--line);padding-bottom:13px;position:relative}
.list-head::after{content:"";position:absolute;left:0;bottom:-2px;width:48px;height:2px;background:var(--reward)}
.list-head h2{font-size:24px;font-weight:900;letter-spacing:-.01em}
.list-head .sub{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.03em;font-variant-numeric:tabular-nums}

/* asymmetric grid: cards vary, but rhythm stays editorial */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;grid-auto-rows:1fr}
/* card entrance — short staggered fade-up, applied only on first paint of a slice */
@media (prefers-reduced-motion:no-preference){
  .grid.anim > .card{opacity:0;transform:translateY(12px);animation:cardIn .5s var(--ease) forwards;animation-delay:var(--d,0ms)}
}
@keyframes cardIn{to{opacity:1;transform:none}}

/* CARD — 暖白紙片浮在象牙底上。雙軌識別 (政府 vs 民間) 一眼可辨：
   1) 左側一道粗色脊 (spine)  2) 卡面與頁首帶有極淡的軌道色暈
   3) 類型章 (政府福利盾牌 / 品牌優惠標)。色彩與象牙底紙、朱紅主色和諧。
   政府 = 黃銅金/墨棕「官方・可信」；民間 = 朱紅「促銷・活潑」。 */
.card{
  position:relative;background:var(--card);border-radius:var(--radius-card);
  border:1px solid transparent;   /* Joker 不喜歡卡片框線：去 border，靠陰影＋左色脊分隔 */
  box-shadow:var(--shadow-soft);
  padding:0;overflow:hidden;cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  display:flex;flex-direction:column;min-height:208px;height:100%;
  --track:var(--trust-gold);          /* 軌道主色：預設政府=黃銅金 */
  --track-ink:var(--trust-gold-ink);
  --track-soft:var(--trust-soft);
  --track-line:var(--trust-line);
}
.card.kind-brand{
  --track:var(--reward);              /* 民間=朱紅 */
  --track-ink:var(--reward-ink);
  --track-soft:var(--reward-soft);
  --track-line:var(--reward-line);
}
/* 左側色脊已移除（Joker：AI 產出網頁的套路）— 雙軌辨識交給 card-top 底色、kind-tag、金額 chip 與右下色暈 */
/* 卡片 kind-tag 已整顆移除（2026-06-05）；雙軌辨識靠卡頭底色與金額色 */
/* 即將截止的卡片給一點視覺權重：右下軌道色暈加深 + 陰影略升，不用框線 */
.card.is-expiring::after{opacity:.85}
.card.is-expiring{box-shadow:0 3px 14px rgba(120,70,30,.12)}
/* 卡面右下角極淡軌道色暈，讓整張卡帶上 track 氣味，但不喧賓奪主 */
.card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 100% 0%, var(--track-soft), transparent 46%);
  opacity:.5;transition:opacity .22s var(--ease);
}
.card > *{position:relative;z-index:1}
@media (hover:hover){.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--track-line)}}
@media (hover:hover){.card:hover::after{opacity:.85}}
.card:focus-visible{transform:translateY(-4px)}

/* category strip header: type tag + category dot/label + region.
   頁首帶上極淡軌道色，與左脊呼應，讓「政府/民間」一眼成立。 */
.card-top{
  display:flex;align-items:center;gap:9px;padding:15px 20px 13px;flex-wrap:wrap;
  background:linear-gradient(180deg, var(--track-soft) 0%, transparent 100%);
  border-bottom:1px solid var(--track-line);
  /* 2026-06-05 Joker：卡頭固定高度 → 底下那條軌道色分隔線每張卡同高，好掃讀 */
  min-height:96px;align-content:flex-start;
}
.card-top .deal-figure{min-height:34px;align-items:baseline}
.card-top .deal-figure.df-text{align-items:center}
/* 2026-06-05 Joker：標題最多一行（超出…），位置全卡一致 */
/* h3 一行規則已併入下方主規則 */
/* 剩N天 pill 置中且不佔位（absolute），與品類/地區同一行高，不再把內容往下推 */
/* dual-track type tag — 政府福利(盾牌徽章·實心金) / 品牌優惠(實心朱紅標)。
   兩者形狀(盾 vs 標)、底色(金 vs 紅)、字都不同，跨房間都能分辨。 */
.kind-tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;font-family:var(--sans);
  padding:4px 11px;border-radius:7px;line-height:1.55;white-space:nowrap;
}
.kind-tag .i{font-size:13px;stroke-width:2}
/* 政府：黃銅金實心盾牌徽章，左端略尖 → 官方蓋章感 */
.kind-tag.tag-gov{
  background:linear-gradient(180deg,var(--trust-gold),#9c6a16);color:#FFF9EC;
  border:1px solid #835713;box-shadow:0 1px 2px rgba(110,80,45,.18);
  border-radius:6px 6px 6px 6px;
}
.kind-tag.tag-gov .i{color:#FFE9B8}
/* 民間：朱紅實心促銷標，右端切角 → 吊牌/標籤感 */
.kind-tag.tag-brand{
  background:linear-gradient(180deg,var(--reward),var(--reward-deep));color:#fff;
  border:1px solid var(--reward-deep);box-shadow:0 1px 2px rgba(200,73,42,.22);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  padding-right:16px;
}
.kind-tag.tag-brand .i{color:#FFE3D8}
.card-cat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
.card-cat .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.card-region{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--ink-3);
}
.card-region .i{font-size:14px}
.card-body{padding:14px 20px 18px;display:flex;flex-direction:column;flex:1}
.card h3{
  font-family:var(--round);font-size:20px;font-weight:700;color:var(--ink);margin-bottom:11px;
  /* 2026-06-11 Joker：標題固定一行。原用 -webkit-line-clamp:1 但 display 被算成 flow-root 時失效→文字硬切無 ellipsis、
     甚至溢出。改用不依賴 display 的 nowrap+ellipsis，任何 display 都正確截斷。 */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.4;letter-spacing:-.005em;min-height:1.4em;
}
/* 2026-06-05 Joker：內文固定兩行（超出…），內文/日期/主辦/互動列字級調大好讀；
   每張卡等高、各區塊等高，內文與日期之間拉開呼吸空間（日期以下錨定卡片底部） */
.card-excerpt{
  font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.6em);
}
.card .period{font-size:15px!important;margin-top:auto!important;padding-top:16px;min-height:1.5em;
  color:var(--track-ink)!important}
.card .period span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* 期間固定一行，卡高一致 */
.card .meta-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .meta-row .sb-cta{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--reward-ink);flex-shrink:0;margin-left:auto}  /* 靠右（2026-06-05 Joker） */
  /* 日期用軌道色與內文區分（2026-06-05 Joker） */
.card .period .i{color:var(--track)!important}
.card .meta-row{font-size:14px!important;margin-top:8px!important;min-height:1.45em}
.social-bar .sb-stat{font-size:14px!important}
.social-bar .sb-stat .i{font-size:15px!important}
.social-bar .sb-hint{font-size:13px!important}
/* AMOUNT — deal 列：跟著軌道色 (民間=朱紅可省、政府=黃銅金可領)，柔色底 chip。
   軌道色靠文字與 icon 表達，不加左側色條（去 AI 模板感）。 */
.card .amount{
  font-size:15px;font-weight:700;color:var(--track-ink);
  display:inline-flex;align-items:flex-start;gap:8px;margin-bottom:9px;line-height:1.45;
  background:var(--track-soft);border-radius:10px;padding:8px 12px;align-self:flex-start;max-width:100%;
}
.card .amount .i{font-size:16px;color:var(--track);margin-top:.15em;flex-shrink:0}
.card .amount span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .period{font-size:14px;color:var(--ink-2);margin-bottom:5px;line-height:1.5;display:flex;align-items:flex-start;gap:7px}
.card .period .i{font-size:15px;color:var(--ink-3);margin-top:.12em}
.card .meta-row{font-size:13px;color:var(--ink-3);margin-top:auto;display:flex;align-items:flex-start;gap:7px;padding-top:10px}
.card .meta-row .i{font-size:15px;margin-top:.1em}
/* 查看原文 已移至明細 modal，卡片不再放原文連結 */

/* expiring marker — 內縮圓 pill（原本貼角的色塊 tab 太模板感），急迫度仍用 rust 色 */
.exp-pill{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:#fff;background:var(--rust);
  padding:4px 11px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 2px 6px rgba(140,60,30,.25);
}
.exp-pill .i{font-size:13px}
/* 2026-06-05 Joker：詳情頁剩餘倒數 pill（隨 badges 同列，非絕對定位） */
.pv-exp-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:#fff;background:var(--rust);
  padding:4px 11px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;
  box-shadow:0 2px 6px rgba(140,60,30,.25);
}
.pv-exp-pill .i{font-size:13px}
/* 2026-06-05 Joker：剩 N 天統一同一款樣式，不依天數變化（is-far / is-urgent 變體已移除） */

/* spent/ended card — same warm desaturated treatment as expired, still clickable.
   .is-dim covers BOTH 已過期 (date past) and 已結束 (贈畢/額滿/截止…). */
.card.is-dim{
  opacity:.82;background:var(--expired-bg);
  --track:var(--grey-exp);--track-soft:#EAE3D8;--track-line:#DCD2C2;
}
.card.is-dim::after{display:none}
.card.is-dim .card-top{background:#EAE3D8;border-bottom-color:#DCD2C2}
@media (hover:hover){.card.is-dim:hover{opacity:1}}
.card.is-dim h3{color:var(--grey-exp)}
.card.is-dim .amount{color:var(--grey-exp);background:#EAE3D8}
.card.is-dim .amount .i{color:var(--grey-exp)}
.card.is-dim .deal-figure{color:var(--grey-exp)}
.card.is-dim .card-cat .dot{filter:grayscale(.7);opacity:.55}
.card.is-dim .kind-tag{filter:grayscale(.55);opacity:.85}
.expired-tag{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;background:var(--grey-exp);
  padding:4px 11px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.expired-tag .i{font-size:12px}
.card .expired-note{
  font-size:13px;color:var(--grey-exp);font-weight:600;margin-top:10px;
  padding-top:9px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:6px;
}
.card .expired-note .i{font-size:14px}

/* ============ PAGINATION (SEO: real <a href="?page=N"> anchors) ============ */
.pagination{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;
  margin-top:48px;padding-top:28px;border-top:1px solid var(--line);
}
.pg-link{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:46px;height:46px;padding:0 13px;border-radius:10px;
  font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line);
  transition:all .14s ease;text-decoration:none;
}
@media (hover:hover){.pg-link:hover{border-color:var(--coral);color:var(--coral-ink);background:var(--coral-soft)}}
.pg-link.current{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill);cursor:default}
@media (hover:hover){.pg-link.current:hover{background:var(--coral-fill);color:#fff}}
.pg-edge{font-family:var(--sans);font-weight:700;font-size:15px}
.pg-edge .i{font-size:16px}
.pg-link[aria-disabled="true"]{opacity:.4;pointer-events:none}
.pg-gap{min-width:24px;text-align:center;color:var(--ink-3);font-family:var(--mono);user-select:none}
.pg-info{
  width:100%;text-align:center;margin-top:14px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.05em;font-variant-numeric:tabular-nums;
}
@media (max-width:680px){
  .pg-link{min-width:44px;height:44px;font-size:14px;padding:0 10px}
  .pg-edge span{display:none}
}

.load-more-wrap{display:flex;justify-content:center;margin-top:40px}
.btn-load{
  background:var(--card);color:var(--ink);border:1.5px solid var(--line-strong);
  border-radius:12px;padding:0 36px;min-height:56px;font-size:17px;font-weight:700;
  display:inline-flex;align-items:center;gap:9px;transition:all .16s ease;box-shadow:var(--shadow-soft);
}
.btn-load .i{font-size:18px;color:var(--coral)}
@media (hover:hover){.btn-load:hover{background:var(--coral-soft);border-color:var(--coral);transform:translateY(-2px)}}
.empty-state{text-align:center;padding:80px 20px;color:var(--ink-2)}
/* 2026-06-11 UIUX：空狀態行動鈕 */
.es-reset{
  margin-top:20px;display:inline-flex;align-items:center;gap:8px;
  background:var(--coral-fill);color:#fff;border:none;border-radius:12px;
  min-height:46px;padding:0 22px;font-size:15px;font-weight:700;cursor:pointer;
  transition:background .15s,transform .15s;box-shadow:0 8px 20px rgba(178,58,36,.2);
}
@media (hover:hover){.es-reset:hover{background:var(--coral-deep);transform:translateY(-2px)}}
.es-reset .i{color:#fff;font-size:16px}
.empty-state .big{color:var(--ink-3);margin-bottom:16px;display:flex;justify-content:center}
.empty-state .big .i{font-size:52px;stroke-width:1.4}
.empty-state h3{font-size:23px;margin-bottom:9px}

/* loading */
.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:18px;color:var(--ink-2)}
.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--coral);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ MODAL / DETAIL ============
   桌機：置中 modal，內容區可內捲（合理）。
   手機：改成「全螢幕 sheet・單一捲動」——overlay 不捲、modal 撐滿視窗、
        由 .modal-body 當唯一捲動容器，head/foot sticky 固定，body 一條到底。
        詳見 @media(max-width:680px)。 */
.overlay{
  position:fixed;inset:0;z-index:100;background:rgba(28,20,12,.52);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;
  overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--card);border-radius:18px;max-width:720px;width:100%;
  box-shadow:0 40px 90px rgba(40,25,10,.34);overflow:hidden;
  transform:translateY(18px) scale(.985);transition:transform .22s var(--ease);margin:auto;
  border:1px solid var(--line);
}
.overlay.open .modal{transform:translateY(0) scale(1)}
.modal-head{
  padding:24px 28px 20px;border-bottom:1px solid var(--line);position:relative;
  background:linear-gradient(180deg,var(--paper-warm),var(--paper-2));
}
.modal-head .mh-badges{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:13px;align-items:center}
.modal-head .mh-cat{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.modal-head .mh-cat .dot{width:10px;height:10px;border-radius:50%}
.modal-head .mh-region{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-3)}
.modal-head .mh-region .i{font-size:15px}
.modal-head h2{font-size:25px;padding-right:44px;line-height:1.32;letter-spacing:.3px}
.modal-close{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:all .14s;
}
.modal-close .i{font-size:20px}
@media (hover:hover){.modal-close:hover{background:var(--paper-2);border-color:var(--moss)}}
.modal-expired-banner{
  background:var(--rust-tint);color:var(--rust);font-weight:600;font-size:15px;
  padding:11px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;
}
.modal-expired-banner .i{font-size:18px}
.modal-body{padding:14px 28px 28px;max-height:calc(100vh - 250px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.box-section{margin-top:24px;padding-top:0}
.box-section+.box-section{border-top:1px solid var(--line-soft);padding-top:22px}
.box-section h4{
  font-size:12px;color:var(--ink-3);font-weight:500;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.box-section h4 .i{font-size:16px;stroke-width:1.7;color:var(--coral)}
.box-section h4 .zh{font-family:var(--serif);font-size:17px;color:var(--ink);letter-spacing:0;font-weight:700}
.box-section .body{font-size:16px;color:var(--ink);line-height:1.8;white-space:pre-wrap;word-break:break-word}
.box-section .body p{margin:0 0 .7em}
.box-section.summary .body{color:var(--ink-2)}
.box-section ol{margin:0;padding-left:24px}
.box-section ol li{margin-bottom:6px;font-size:16px;line-height:1.7}
.box-section ul{margin:0;padding-left:0;list-style:none}
.box-section ul li{margin-bottom:8px;font-size:16px;padding-left:22px;position:relative;line-height:1.7}
.box-section ul li::before{content:"";position:absolute;left:3px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--coral);transform:rotate(45deg)}
.modal-foot{padding:18px 28px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap;background:var(--paper-2)}
.btn-source{
  flex:1;min-width:200px;background:var(--coral-fill);color:#fff;border:none;border-radius:13px;
  min-height:54px;font-size:17px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:background .15s, transform .15s, box-shadow .15s;box-shadow:0 10px 24px rgba(178,58,36,.24);
}
.btn-source .i{font-size:18px;color:#fff}
@media (hover:hover){.btn-source:hover{background:var(--coral-deep);transform:translateY(-2px);box-shadow:0 14px 30px rgba(178,58,36,.3)}}

/* ============ SOCIAL INTERACTION (讚 / 回應 / 收藏 / 已參與) ============
   Mirrors the Pro OmniPerks app: heart / chat / bookmark / check-circle.
   Active(=engaged) fills the icon in the app green (#44D3A1) / verify deep
   green (#059669). Counts use the base+(now?1:0)-(init?1:0) optimistic rule. */
:root{
  /* 互動色：讚/收藏走品牌朱紅；已參與走葉綠（語意=已完成） */
  --like-on:var(--reward);          /* 讚/收藏 active = 朱紅，與品牌一致 */
  --like-on-ink:var(--reward-ink);
  --like-on-bg:var(--reward-soft);
  --app-green:var(--reward);        /* 保留舊名相容 */
  --app-green-bg:var(--reward-soft);
  --app-verify:var(--success);      /* 已參與 active = 葉綠 */
  --app-verify-bg:var(--success-soft);
}
/* 卡片底列：乾淨意圖列。左=自己的狀態徽章 或 一句價值提示；右=回報 + 看詳情 CTA。
   不再印一排恆為 0 的死數字（社群數字只在明細互動，避免「未populated」的廉價感）。 */
.social-bar{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line-soft);min-height:24px;
}
.social-bar .sb-spacer{flex:1}
/* 卡片底部社群數字（純顯示、不可點）：讚 / 收藏 / 已參與 */
.social-bar .sb-stats{display:flex;flex:0 0 42%;align-items:center;min-width:0;pointer-events:none}  /* 2026-06-11 Joker：點贊區佔左約1/3，三欄平均分配 */
.social-bar .card-org{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;font-size:13px;color:var(--ink-3)}
.social-bar .card-org>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-bar .card-org .i{font-size:15px;flex-shrink:0;color:var(--ink-3)}
.social-bar .sb-stat{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink-3);flex:1 1 33%;min-width:0}  /* 2026-06-05 Joker：每欄固定寬，數字再大也不推擠，跨卡片對齊 */
.social-bar .sb-stat .i{font-size:14px;color:var(--ink-3)}
.social-bar .sb-stat b{font-family:var(--figure);font-variant-numeric:tabular-nums;font-weight:700}
/* 2026-06-11 UIUX：計數依 Joker 2026-06-05 決策常駐顯示（含 0），但 0 的視覺權重降到背景級——
   有真實互動的數字才浮出來，整片 0 不再像一排死資訊。 */
.social-bar .sb-stat.is-zero{opacity:.42}
.social-bar .sb-stat.on{color:var(--like-on-ink)}
.social-bar .sb-stat.on .i{color:var(--like-on);fill:none;stroke-width:2.2}
.social-bar .sb-stat.on.is-verify{color:var(--success)}
.social-bar .sb-stat.on.is-verify .i{color:var(--app-verify);fill:none}  /* 圓圈勾 icon 填滿會糊成色塊 → 只變色不填滿 */
/* 左側價值提示（無互動時）：低調、像署名的一句話 */
.social-bar .sb-hint{font-size:12px;color:var(--ink-3);font-weight:600;display:inline-flex;align-items:center;gap:6px;min-width:0}
.social-bar .sb-hint .i{font-size:14px;color:var(--moss);flex-shrink:0}
.social-bar .sb-hint--mute{color:var(--ink-3);font-weight:500;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 左側狀態徽章列（使用者已讚/收藏/已參與） */
.social-bar .sb-flags{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.social-bar .sb-flag{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  color:var(--ink-2);background:var(--paper-2);border-radius:999px;padding:3px 9px;
  font-variant-numeric:tabular-nums;
}
.social-bar .sb-flag .i{font-size:13px;color:var(--ink-3)}
.social-bar .sb-flag.on{color:var(--like-on-ink);background:var(--like-on-bg)}
.social-bar .sb-flag.on .i{color:var(--like-on);fill:none;stroke-width:2.2}
.social-bar .sb-flag.on.is-verify{color:var(--success);background:var(--app-verify-bg)}
.social-bar .sb-flag.on.is-verify .i{color:var(--app-verify);fill:none}
/* 右側「看詳情 →」CTA：朱紅、低調但明確；hover 時箭頭推進 */
.social-bar .sb-cta{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:13px;font-weight:700;color:var(--coral-ink);letter-spacing:.01em;
}
.social-bar .sb-cta .i{font-size:15px;transition:transform .18s var(--ease)}
@media (hover:hover){.card:hover .social-bar .sb-cta .i{transform:translateX(3px)}}

/* 明細完整互動列：橫向 pill 列，icon + 標籤 + 數字同一行，乾淨優雅。
   未啟用=描邊；啟用=柔色填底 + 著色 icon。等寬均分。 */
.detail-social{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:10px;margin:4px 0 6px;
}
.ds-btn{
  min-width:0;min-height:48px;border:1.5px solid var(--line-strong);background:var(--card);
  border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;
  color:var(--ink-2);font-weight:700;
  transition:transform .14s var(--ease),border-color .14s,background .14s,color .14s,box-shadow .14s;
}
.ds-btn .i{font-size:19px;color:var(--ink-3);stroke-width:1.75;transition:transform .15s var(--ease)}
.ds-btn .ds-lbl{font-size:14px;font-weight:700;letter-spacing:.01em}
.ds-btn .ds-num{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3);
  background:var(--paper-2);border-radius:999px;padding:1px 8px;min-width:24px;text-align:center}
@media (hover:hover){.ds-btn:hover{transform:translateY(-2px);border-color:var(--reward-line);box-shadow:var(--shadow-soft)}}
.ds-btn:active{transform:translateY(0)}
.ds-btn.on{border-color:var(--like-on);background:var(--like-on-bg);color:var(--like-on-ink)}
.ds-btn.on .i{color:var(--like-on);fill:none;stroke-width:2.2}
.ds-btn.on .ds-num{color:var(--like-on-ink);background:rgba(200,67,43,.1)}
.ds-btn.on.is-verify{border-color:var(--app-verify);background:var(--app-verify-bg);color:var(--success)}
.ds-btn.on.is-verify .i{color:var(--app-verify);fill:none;stroke-width:2.2}
.ds-btn.on.is-verify .ds-num{color:var(--success);background:rgba(47,125,79,.1)}
@media (prefers-reduced-motion:no-preference){
  .ds-btn.pop .i{animation:dsPop .34s var(--ease)}
}
@keyframes dsPop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ===== 手機版詳情頁互動列固定底部（2026-06-11 Joker）=====
   讚/收藏/已參與/分享 在 ≤760px 黏在視窗底；小飛機 FAB 同步上移避免重疊；
   PC 版維持原本內文中的位置；鍵盤開啟（html.kb-open）時暫時隱藏。 */
@media (max-width:760px){
  html[data-view="perk"] .pv-social{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    margin:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0));
    background:var(--card);border-top:1px solid var(--line-strong);
    box-shadow:0 -4px 16px rgba(43,33,24,.08);
  }
  html[data-view="perk"] .pv-social .detail-social{margin:0;gap:8px}
  html[data-view="perk"] .pv-social .ds-btn{min-height:44px;border-radius:10px}
  @media (hover:hover){html[data-view="perk"] .pv-social .ds-btn:hover{transform:none;box-shadow:none}}
  /* 內容底部留出固定列高度，最後的留言/相關福利不被蓋住 */
  html[data-view="perk"] #perkPage{padding-bottom:calc(76px + env(safe-area-inset-bottom,0))}
  /* 小飛機 FAB 上移到固定列上方 */
  html[data-view="perk"] .share-fab{bottom:calc(76px + env(safe-area-inset-bottom,0))}
  html.kb-open .pv-social{display:none}
}

/* ============ COMMENTS (FB / Threads clean thread) ============ */
.comments{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.comments h4{
  font-family:var(--serif);font-size:17px;color:var(--ink);font-weight:700;
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
}
.comments h4 .i{font-size:18px;color:var(--coral-ink)}
.comments h4 .c-ct{font-family:var(--mono);font-size:13px;color:var(--ink-3);font-weight:600}
.c-form{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px}
.c-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);
}
.c-avatar .i{font-size:18px}
.c-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.c-form .c-input-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.c-form textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);line-height:1.55;
  padding:11px 13px;border-radius:13px;border:1px solid var(--line-strong);background:var(--card);
  resize:vertical;min-height:46px;transition:border-color .14s,box-shadow .14s;
}
.c-form textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(242,114,75,.13)}
.c-form .c-send-row{display:flex;justify-content:flex-end}
.c-send{
  background:var(--coral-fill);color:#fff;border:none;border-radius:11px;
  min-height:40px;padding:0 18px;font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;gap:7px;transition:background .14s,transform .14s;
}
.c-send .i{font-size:15px;color:#fff}
@media (hover:hover){.c-send:hover{background:var(--coral-deep);transform:translateY(-1px)}}
/* 2026-06-11 UIUX：disabled 從混濁金底改成明確的 ghost 態——一眼可辨「還不能送」；
   白色 icon 在淡底上會洗掉，一併換色。 */
.c-send:disabled{background:var(--paper-2);color:var(--ink-3);border:1px solid var(--line);cursor:not-allowed;transform:none}
.c-send:disabled .i{color:var(--ink-3)}
.c-list{display:flex;flex-direction:column;gap:18px}
.c-row{display:flex;gap:10px;align-items:flex-start}
.c-body{flex:1;min-width:0}
.c-meta{display:flex;align-items:baseline;gap:7px;margin-bottom:2px}
.c-name{font-size:14px;font-weight:700;color:var(--ink)}
.c-time{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.c-text{font-size:15px;line-height:1.55;color:var(--ink);word-break:break-word;white-space:pre-wrap}
/* 已棄用 2026-06-05：留言本身不可被點讚/回覆，.c-actions / .c-act* 樣式移除 */
.c-empty{font-size:14px;color:var(--ink-3);padding:6px 0 2px}

/* ============ FEEDBACK (反饋) ============ */
.fb-btn{
  border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2);
  border-radius:var(--radius-pill);font-size:12px;font-weight:600;
  padding:5px 11px;display:inline-flex;align-items:center;gap:5px;
  transition:border-color .14s,color .14s,background .14s;
}
.fb-btn .i{font-size:13px;stroke-width:1.8}
@media (hover:hover){.fb-btn:hover{border-color:var(--rust);color:var(--rust);background:var(--rust-tint)}}
/* card feedback flag lives in the footer social row, left of 看詳情 (icon-only, quiet) */
.card-fb{flex-shrink:0;display:inline-flex}
.card-fb .fb-btn{padding:0;border:none;background:none;color:var(--ink-3);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.card-fb .fb-btn .fb-lbl{display:none}      /* icon-only on cards */
.card-fb .fb-btn .i{font-size:15px}
@media (hover:hover){.card-fb .fb-btn:hover{background:none;color:var(--rust)}}
.modal-fb{position:absolute;top:18px;right:70px}  /* left of the close button */
/* feedback popover/form — single floating layer appended to <body> */
.fb-pop{
  width:min(300px,86vw);
  background:var(--card);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow-lift);padding:15px;display:none;
}
.fb-pop.fb-float{position:fixed;z-index:140}
.fb-pop.open{display:block}
.fb-pop h5{font-family:var(--serif);font-size:15px;color:var(--ink);margin:0 0 10px;font-weight:700}
.fb-opt{display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.fb-opt label{
  display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);cursor:pointer;
  padding:7px 10px;border:1px solid var(--line);border-radius:10px;transition:border-color .12s,background .12s;
}
@media (hover:hover){.fb-opt label:hover{border-color:var(--moss);background:var(--paper-2)}}
.fb-opt input{accent-color:var(--coral-fill);width:16px;height:16px}
.fb-pop textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);line-height:1.5;
  padding:9px 11px;border-radius:10px;border:1px solid var(--line-strong);background:var(--card);
  resize:vertical;min-height:54px;margin-bottom:11px;
}
.fb-pop textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(242,114,75,.13)}
.fb-pop .fb-foot{display:flex;gap:8px;justify-content:flex-end}
.fb-pop .fb-cancel{background:none;border:1px solid var(--line-strong);color:var(--ink-2);border-radius:10px;padding:7px 13px;font-size:13px;font-weight:600}
.fb-pop .fb-submit{background:var(--coral-fill);color:#fff;border:none;border-radius:10px;padding:7px 15px;font-size:13px;font-weight:700}
@media (hover:hover){.fb-pop .fb-submit:hover{background:var(--coral-deep)}}
.fb-done{font-size:14px;color:var(--forest-ink);font-weight:600;display:flex;align-items:center;gap:7px;padding:8px 2px}
.fb-done .i{font-size:16px;color:var(--forest)}

/* ============ QUIZ ============ */
.quiz-overlay{position:fixed;inset:0;z-index:120;background:var(--paper);display:none;flex-direction:column}
.quiz-overlay.open{display:flex}
.quiz-header{padding:15px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;background:var(--card);flex-shrink:0}
.quiz-header .brand{cursor:default}
.quiz-header .brand .name{font-size:20px}
.quiz-header .quiz-close{
  margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .14s;
}
.quiz-header .quiz-close .i{font-size:20px}
@media (hover:hover){.quiz-header .quiz-close:hover{background:var(--paper-2);border-color:var(--moss)}}
.quiz-live-count{
  display:flex;align-items:center;gap:9px;background:var(--coral-soft);color:var(--coral-ink);font-weight:600;
  padding:9px 16px;border-radius:10px;font-size:15px;border:1px solid #f6d6c8;white-space:nowrap;
}
.quiz-live-count b{font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums}
.quiz-live-count .qlc-lbl-short{display:none}
.progress-track{height:5px;background:var(--line);flex-shrink:0}
.progress-fill{height:100%;background:var(--coral);transition:width .35s ease}
.quiz-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.quiz-stage{max-width:680px;width:100%;margin:0 auto;padding:42px 22px 34px;flex:1;display:flex;flex-direction:column}
.q-step-label{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--coral-ink);letter-spacing:.16em;margin-bottom:16px;text-transform:uppercase}
.q-step-label .of{color:var(--ink-3);font-weight:500}
.q-question{font-size:clamp(24px,4vw,32px);font-weight:700;line-height:1.34;color:var(--ink);letter-spacing:.3px}
.q-subtitle{font-size:16px;color:var(--ink-2);margin-top:14px;line-height:1.65}
.q-safe-note{
  margin-top:18px;display:flex;align-items:center;gap:10px;
  background:var(--amber-soft);border:1px solid #f0d9a8;border-radius:11px;
  padding:12px 16px;font-size:15px;color:var(--gold);font-weight:600;
}
.q-safe-note .i{font-size:18px;flex-shrink:0}
.q-options{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.q-opt{
  display:flex;align-items:center;gap:15px;text-align:left;width:100%;
  background:var(--card);border:1.5px solid var(--line);border-radius:13px;
  padding:16px 18px;min-height:64px;font-size:18px;font-weight:600;color:var(--ink);
  transition:all .15s ease;
}
@media (hover:hover){.q-opt:hover{border-color:var(--reward-line);background:var(--reward-soft);transform:translateY(-1px);box-shadow:0 6px 16px rgba(40,32,16,.06)}}
.q-opt.selected{border-color:var(--reward);background:var(--reward-soft);color:var(--reward-ink)}
.q-opt .q-ico{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--moss);border:1px solid var(--line);
}
.q-opt .q-ico .i{font-size:22px}
.q-opt.selected .q-ico{background:#fff;color:var(--reward-strong);border-color:var(--reward-line)}
.q-opt .q-check{margin-left:auto;color:var(--reward-strong);opacity:0;transition:opacity .15s;display:flex}
.q-opt .q-check .i{font-size:22px;stroke-width:2.2}
.q-opt.selected .q-check{opacity:1}
.quiz-nav{display:flex;align-items:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.quiz-nav .btn-back{background:none;border:none;color:var(--ink-2);font-size:16px;font-weight:700;padding:10px 8px;display:inline-flex;align-items:center;gap:7px}
.quiz-nav .btn-back .i{font-size:17px}
@media (hover:hover){.quiz-nav .btn-back:hover{color:var(--forest-ink)}}
.quiz-nav .btn-skip{background:var(--card);border:1.5px solid var(--line);color:var(--ink-2);border-radius:11px;min-height:50px;padding:0 22px;font-size:16px;font-weight:700}
@media (hover:hover){.quiz-nav .btn-skip:hover{border-color:var(--moss);color:var(--forest-ink)}}
.quiz-nav .spacer{flex:1}
.quiz-nav .btn-seeresult{background:var(--coral-fill);color:#fff;border:none;border-radius:12px;min-height:50px;padding:0 24px;font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 20px rgba(200,73,42,.22)}
.quiz-nav .btn-seeresult .i{font-size:17px;color:#fff}
@media (hover:hover){.quiz-nav .btn-seeresult:hover{background:var(--coral-deep);transform:translateY(-1px)}}

.quiz-center{max-width:580px;margin:auto;padding:48px 22px;text-align:center}
.quiz-center .big-ico{margin-bottom:14px;display:flex;justify-content:center;color:var(--coral)}
.quiz-center .big-ico .i{font-size:56px;stroke-width:1.5}
.quiz-center h2{font-size:31px;margin-bottom:16px;letter-spacing:.4px}
.quiz-center p{font-size:18px;color:var(--ink-2);line-height:1.72}
.quiz-center .result-num{font-family:var(--mono);font-size:66px;font-weight:700;color:var(--coral-ink);font-variant-numeric:tabular-nums;line-height:1;margin:20px 0 8px}
.quiz-center .feat-list{display:flex;flex-direction:column;gap:11px;margin:26px 0;text-align:left}
.quiz-center .feat-list .f{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.quiz-center .feat-list .f .ic{color:var(--forest);display:flex;margin-top:.18em}
.quiz-center .feat-list .f .ic .i{font-size:18px;stroke-width:2.2}
.quiz-center .btn-row{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.quiz-center .btn-row .btn{width:100%}
.btn-cta-green{background:var(--coral-fill);color:#fff;box-shadow:0 10px 24px rgba(200,73,42,.26)}
.btn-cta-green .i{color:#fff}
@media (hover:hover){.btn-cta-green:hover{background:var(--coral-deep);transform:translateY(-2px)}}
.btn-soft{background:var(--card);border:1.5px solid var(--line);color:var(--ink-2)}
.btn-soft .i{font-size:18px}
@media (hover:hover){.btn-soft:hover{border-color:var(--moss);color:var(--forest-ink)}}
.profile-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.profile-chips .pc{font-size:14px;background:var(--leaf-tint);color:var(--forest-ink);padding:6px 13px;border-radius:9px;font-weight:600;border:1px solid var(--trust-line)}
.saved-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-top:12px;text-align:left}
.saved-row .nm{font-weight:700;color:var(--forest-ink)}
.saved-row .ct{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.saved-row .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.saved-title{font-weight:700;color:var(--forest-ink);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.saved-title .i{font-size:17px;color:var(--gold)}

.footer{background:var(--card);border-top:1px solid var(--line);padding:40px 26px;color:var(--ink-2);font-size:15px;text-align:center;line-height:1.85}
.footer .f-inner{max-width:1200px;margin:0 auto}   /* Footer 內容收斂 1200 置中，背景 100% — 2026-06-11 Joker */
html[data-view="perk"] .footer{display:none}   /* 詳情內頁不放 footer，其餘視圖照常 — 2026-06-11 Joker */
.footer .brand{justify-content:center;cursor:default;margin-bottom:14px}
.footer .brand .name{font-family:var(--serif);font-weight:900;font-size:20px;color:var(--forest-ink)}
.footer a{font-weight:700;text-underline-offset:3px}
.footer .f-disclaimer{max-width:62ch;margin:0 auto}
.footer .f-privacy{max-width:74ch;margin:12px auto 0;font-size:13.5px;color:var(--ink-3)}
.footer .f-privacy summary{cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink-2);list-style:none;padding:4px 8px;border-radius:8px}
.footer .f-privacy summary::-webkit-details-marker{display:none}
@media (hover:hover){.footer .f-privacy summary:hover{background:var(--paper-2)}}
.footer .f-privacy summary .i{font-size:15px;color:var(--moss);flex-shrink:0}
.footer .f-privacy[open] summary{margin-bottom:4px}
.footer .f-privacy p{line-height:1.8;text-align:left;margin:0 auto}

/* ============ HEADER MENU (我的專屬福利 ▾) ============ */
.menu-wrap{position:relative;margin-left:14px;flex-shrink:0}
.menu-trigger{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--sans);font-weight:700;font-size:15px;
  color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  width:42px;height:42px;padding:0;transition:all .14s;cursor:pointer;
}
.menu-trigger .i{font-size:20px;color:var(--ink-2);stroke-width:1.8}
@media (max-width:720px){ .menu-trigger{width:38px;height:38px} }
.menu-trigger .menu-caret{font-size:14px;color:var(--ink-3);transform:rotate(90deg);transition:transform .18s}
.menu-trigger[aria-expanded="true"] .menu-caret{transform:rotate(-90deg)}
@media (hover:hover){.menu-trigger:hover{border-color:var(--coral);background:var(--coral-soft);color:var(--coral-ink)}}
@media (hover:hover){.menu-trigger:hover .i{color:var(--coral)}}
.menu-trigger.has-active{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill)}
.menu-trigger.has-active .i{color:#fff}
.menu-trigger.has-active .menu-caret{color:#fff}
.menu-ct{position:absolute;top:-5px;right:-5px;font-family:var(--mono);font-size:12px;font-weight:700;background:var(--trust-gold);color:#3A2E24;border-radius:999px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--paper);line-height:1}
.menu-trigger.has-active .menu-ct{background:#fff;color:var(--coral-fill)}
.menu-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:88vw;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 50px rgba(20,30,14,.22);padding:10px;
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .16s,transform .16s;
}
.menu-dropdown.open{opacity:1;transform:translateY(0);pointer-events:auto}
.menu-sec-label{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;padding:8px 10px 6px}
.menu-empty{font-size:14px;color:var(--ink-2);line-height:1.6;padding:6px 12px 12px}
.menu-item{display:flex;align-items:stretch;gap:4px;border-radius:10px;transition:background .12s}
@media (hover:hover){.menu-item:hover{background:var(--paper-2)}}
.menu-item.active{background:var(--coral-soft)}
.menu-apply{flex:1;display:flex;align-items:center;gap:11px;background:none;border:none;text-align:left;padding:10px 8px 10px 10px;border-radius:10px}
.menu-apply .mi-dot{width:34px;height:34px;border-radius:9px;background:var(--paper-2);color:var(--coral);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line)}
.menu-item.active .mi-dot{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill)}
.menu-apply .mi-dot .i{font-size:18px}
.mi-text{display:flex;flex-direction:column;min-width:0}
.mi-name{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-ct{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:1px}
.mi-acts{display:flex;align-items:center;gap:2px;padding-right:4px}
.mi-icon{width:34px;height:34px;border-radius:8px;border:none;background:none;color:var(--ink-3);display:flex;align-items:center;justify-content:center;transition:all .12s}
.mi-icon .i{font-size:16px}
@media (hover:hover){.mi-icon:hover{background:var(--line-soft);color:var(--forest-ink)}}
@media (hover:hover){.mi-icon.mi-del:hover{background:var(--rust-tint);color:var(--rust)}}
@media(max-width:680px){.mi-icon{width:44px;height:44px}}
.menu-divider{height:1px;background:var(--line);margin:8px 4px}
.menu-action{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;text-align:left;padding:11px 12px;border-radius:10px;font-weight:700;font-size:15px;color:var(--ink)}
.menu-action .i{font-size:17px;color:var(--coral)}
@media (hover:hover){.menu-action:hover{background:var(--paper-2)}}
.menu-action.primary{color:#fff;background:var(--coral-fill)}
.menu-action.primary .i{color:#fff}
@media (hover:hover){.menu-action.primary:hover{background:var(--coral-deep)}}

.match-banner-inner .mb-sub{font-size:14px;color:var(--ink-3);font-weight:500;margin-top:2px}

/* ============ TIER HEADERS (match view) ============ */
.tier-head{display:flex;align-items:center;gap:14px;margin:34px 0 18px;padding-bottom:14px;border-bottom:2px solid var(--line);}
.tier-head:first-child{margin-top:0}
.tier-head .th-ico{width:42px;height:42px;border-radius:11px;background:var(--leaf-tint);color:var(--forest);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--trust-line)}
.tier-head .th-ico .i{font-size:21px}
.tier-head .th-text{display:flex;flex-direction:column;min-width:0}
.tier-head .th-title{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--forest-ink)}
.tier-head .th-sub{font-size:14px;color:var(--ink-3);margin-top:1px;line-height:1.5}
.tier-head .th-ct{margin-left:auto;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--forest);font-variant-numeric:tabular-nums;flex-shrink:0}
.tier-general-head{cursor:pointer;border-bottom-style:dashed;transition:opacity .14s}
@media (hover:hover){.tier-general-head:hover{opacity:.82}}
.tier-general-head .th-ico{background:var(--paper-2);color:var(--ink-3);border-color:var(--line)}
.tier-general-head .th-toggle{margin-left:14px;font-size:13px;font-weight:700;color:var(--forest);display:inline-flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap}
.tier-general-head .th-toggle .i{font-size:14px;transform:rotate(90deg)}
.tier-empty{font-size:15px;color:var(--ink-2);background:var(--paper-2);border:1px dashed var(--line);border-radius:12px;padding:18px 20px;line-height:1.6}

/* upcoming flag inside card — amber = anticipation (即將符合) */
.up-flag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--gold);
  background:var(--amber-soft);border:1px solid #f0d9a8;border-radius:8px;padding:4px 9px;margin-bottom:10px;align-self:flex-start;line-height:1.3}
.up-flag .i{font-size:13px}

/* conditional "需：..." reason chips inside card (需符合特定條件 tier) — calm amber */
.need-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--line)}
.need-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--gold);
  background:var(--amber-soft);border:1px solid #f0d9a8;border-radius:8px;padding:4px 9px;line-height:1.35}
.need-chip .i{font-size:13px;flex-shrink:0}

/* ============ QUIZ: date + children inputs ============ */
.q-date-wrap{margin-top:28px}
.q-date{display:flex;flex-direction:column;gap:11px}
.q-date .dl{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ink)}
.q-date .dl .i{font-size:17px;color:var(--coral)}
/* year / month / day select group — one or two steps to any year, both screens */
.date-selects{display:flex;gap:10px;flex-wrap:wrap;max-width:440px}
.date-sel{position:relative;flex:1;min-width:96px}
.date-sel select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--sans);font-size:18px;font-weight:600;color:var(--ink);width:100%;
  background:var(--card);border:1.5px solid var(--line);border-radius:13px;
  padding:14px 38px 14px 16px;min-height:58px;cursor:pointer;transition:border-color .14s;
}
.date-sel.yr{flex:1.25}
.date-sel select:focus{border-color:var(--coral);outline:none;box-shadow:0 0 0 3px rgba(242,114,75,.15)}
.date-sel select:invalid,.date-sel select.placeholder{color:var(--ink-3);font-weight:500}
.date-sel .caret{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--ink-3);pointer-events:none;display:flex}
.date-note{margin-top:16px;display:inline-flex;align-items:center;gap:9px;background:var(--leaf-tint);border:1px solid var(--trust-line);
  border-radius:11px;padding:11px 16px;font-size:15px;color:var(--forest-ink);font-weight:600}
.date-note .i{font-size:17px;color:var(--forest)}
.date-note b{font-family:var(--mono);font-size:19px;color:var(--forest)}
.date-note.warn{background:var(--rust-tint);border-color:#e7d2bd;color:var(--rust)}
.date-note.warn .i{color:var(--rust)}

/* region cascade rows */
.q-region-cascade{margin-top:28px;display:flex;flex-direction:column;gap:14px;max-width:480px}
.rc-row{display:flex;align-items:center;gap:14px}
.rc-lbl{flex:0 0 76px;font-weight:700;font-size:15px;color:var(--forest-ink)}
.rc-row .date-sel{flex:1;min-width:0}
.rc-row select:disabled{opacity:.5;cursor:not-allowed;background:var(--paper-2)}
@media (max-width:680px){
  .rc-row{gap:10px}
  .rc-lbl{flex:0 0 62px;font-size:14px}
}

/* live child age note inside each kid row */
.kid-age-note{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:var(--leaf-tint);
  border:1px solid var(--trust-line);border-radius:10px;padding:9px 14px;font-size:15px;color:var(--forest-ink);font-weight:600}
.kid-age-note .i{font-size:16px;color:var(--forest)}
.kid-age-note b{font-family:var(--mono);font-size:17px;color:var(--forest)}
.kid-age-note.due{background:var(--rust-tint);border-color:#e7d2bd;color:var(--rust)}
.kid-age-note.due .i{color:var(--rust)}
.kid-age-note.due b{color:var(--rust)}

.q-children{margin-top:28px}
.kid-count-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.kid-count-lbl{font-weight:700;font-size:15px;color:var(--forest-ink);margin-right:6px}
.kid-count{width:54px;height:54px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);
  font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink);transition:all .14s}
@media (hover:hover){.kid-count:hover{border-color:var(--moss)}}
.kid-count.selected{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.kid-rows{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.kid-row{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:16px 18px}
.kid-row-head{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.kid-mode{display:flex;gap:8px;margin-bottom:14px}
.kid-mode-btn{flex:1;min-height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);
  font-weight:700;font-size:15px;color:var(--ink-2);transition:all .14s}
@media (hover:hover){.kid-mode-btn:hover{border-color:var(--moss)}}
.kid-mode-btn.on{background:var(--leaf-tint);border-color:var(--forest);color:var(--forest-ink)}
.kid-date{flex-direction:column}
.kid-date .date-selects{max-width:100%}
.kid-date .date-sel select{min-height:52px;font-size:16px;padding:12px 36px 12px 14px}

@media (max-width:680px){
  body{font-size:16px}
  .menu-wrap{margin-left:8px}
  .menu-trigger span#menuTrigLabel{display:none}
  .menu-trigger{padding:9px 11px}
  .menu-dropdown{position:fixed;left:8px;right:8px;width:auto;top:62px}
  .tier-head .th-title{font-size:18px}
  .tier-head .th-sub{display:none}
  .header-inner{padding:10px 16px}
  /* 2026-06-05 Joker：filterbar 已非 sticky（position:relative），不再需要 top 宣告 */
  .filterbar-inner{padding:0 16px}
  .filter-pop{position:fixed;left:8px;right:8px;width:auto;top:130px}
  .list-wrap{padding:18px 16px 84px}
  .grid{grid-template-columns:1fr;gap:14px}
  /* 2026-06-05 Joker：手機列表卡片精簡——日期列只在詳情頁顯示 */
  .card .period{display:none!important}
  /* 2026-06-05：period 隱藏後改由 meta-row 接手底部錨定（覆蓋 L763 的 margin-top:8px），
     讓主辦單位/看詳情＋social-bar 重新貼齊卡底，避免短內容卡片下緣留白 */
  .card .meta-row{margin-top:auto!important}
  .header-count{display:none}
  .brand .en{display:none}

  /* ===== 手機詳情：全螢幕 SHEET・單一捲動（無 modal 內巢狀內捲） =====
     overlay 變不可捲的全螢幕容器；modal 撐滿並 flex column；
     唯一捲動容器 = .modal-body（head/foot sticky）。body 一條主捲動到底。 */
  .overlay{padding:0;align-items:stretch;overflow:hidden}
  .modal{
    max-width:none;width:100%;height:100dvh;height:100vh;margin:0;
    border-radius:0;border:none;display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .28s var(--ease);
  }
  .overlay.open .modal{transform:none}
  .modal-head{
    padding:18px 18px 16px;flex-shrink:0;
    padding-top:calc(18px + env(safe-area-inset-top,0));
  }
  .modal-head h2{font-size:22px;padding-right:48px}
  .modal-close{top:calc(16px + env(safe-area-inset-top,0));right:14px}
  .modal-expired-banner{flex-shrink:0;padding:10px 18px}
  .modal-body{
    flex:1 1 auto;min-height:0;max-height:none;        /* 解除高度上限：自然撐開 */
    overflow-y:auto;-webkit-overflow-scrolling:touch;   /* 唯一捲動容器 */
    padding:14px 18px 24px;
  }
  .modal-foot{
    flex-shrink:0;padding:14px 18px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0));
  }
  /* 明細互動列改直排，點擊區域更大、不擠 */
  .detail-social{grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
  .ds-btn{flex-direction:column;gap:3px;min-height:62px;padding:8px 4px}
  .ds-btn .ds-lbl{font-size:12px}
  .ds-btn .ds-num{font-size:12px}

  .q-opt{font-size:16px}
  .quiz-header{padding:12px 16px;gap:10px}
  .quiz-live-count{font-size:13px;padding:7px 11px}
  .quiz-live-count .qlc-lbl-full{display:none}
  .quiz-live-count .qlc-lbl-short{display:inline}
  .quiz-stage{padding:30px 18px 28px}
  .date-selects{gap:8px}
  .date-sel{min-width:0}
  .date-sel select{padding:13px 30px 13px 12px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================
   ▼▼▼ 已核可設計識別 — 新增層（暖刊 Feed / Hero 輪播 / 印章 /
        signature 元件 / 底部導覽 / 骨架屏）。疊加在 v2 之上。 ▲▲▲
   ============================================================ */

/* 紙質顆粒已由 body::after 統一處理（editorial-warm 版），此處不再疊加斜紋 */

/* ============ HERO 輪播 — FULL-BLEED 整頁寬，edge-to-edge ============
   桌機/手機皆滿寬；object-fit:cover；7s/張；指示點；可手動；
   reduced-motion 不自動播；圖載失敗用暖色漸層占位。 */
.hero-carousel{
  position:relative;width:100%;margin:0 auto;padding:0;
  max-width:1200px;   /* Banner 內容收斂 1200 置中，兩側背景 100% — 2026-06-04 Joker */
}
.hcar-track{
  position:relative;overflow:hidden;
  width:100%;
  height:clamp(300px,36vw,440px);
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
/* 2026-06-11 Joker：輪播改「左右滑＋手指拖動跟隨＋放開吸附」，不再淡入淡出。
   slides 包進橫向 flex 的 .hcar-rail，用 translate3d 以 px 位移；無限循環靠頭尾各複製一張。 */
.hcar-rail{display:flex;height:100%;will-change:transform;touch-action:pan-y;cursor:grab}
.hcar-track.hcar-grab{cursor:grabbing}
.hcar-slide{
  flex:0 0 100%;width:100%;height:100%;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;
  user-select:none;-webkit-user-select:none;
}
/* 占位暖色漸層（真圖放進 assets/banner-N.jpg 後由 JS 覆蓋 background-image） */
.hcar-slide[data-fallback="1"]::before{content:"";position:absolute;inset:0;z-index:0}
.hcar-slide.g1::before{background:radial-gradient(120% 150% at 12% -10%, #E8B48C 0%, transparent 55%), linear-gradient(135deg,#C8432B,#B07A1E)}
.hcar-slide.g2::before{background:radial-gradient(120% 150% at 90% 0%, #E8CC95 0%, transparent 55%), linear-gradient(135deg,#B07A1E,#97301D)}
.hcar-slide.g3::before{background:radial-gradient(120% 150% at 50% -20%, #E2B69E 0%, transparent 55%), linear-gradient(135deg,#5A4A39,#C8432B)}
/* 文字罩：左下漸深，確保白字在任何圖上都可讀 */
/* 2026-06-11 UIUX：scrim 加強——左下文字區的暗化加深、底部帶拉高，
   亮色照片（天空/草地）上副標也要過 AA 對比；右上仍保留照片亮部。 */
.hcar-slide::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(75deg, rgba(30,22,14,.8) 0%, rgba(30,22,14,.5) 40%, rgba(30,22,14,.1) 66%, transparent 82%),
            linear-gradient(0deg, rgba(30,22,14,.62) 0%, rgba(30,22,14,.2) 32%, transparent 54%);
}
.hcar-inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:0 clamp(20px,4vw,40px) clamp(34px,5vw,60px);
}
/* 箭頭顯示時（>680px）文案讓出箭頭的位置，避免 ← 壓到字（2026-06-05 Joker） */
@media (min-width:681px){
  .hcar-inner{padding-left:clamp(76px,7vw,104px);padding-right:clamp(76px,7vw,104px)}
}
.hcar-body{color:#fff;max-width:min(94vw,620px)}
.hcar-kicker{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#FBF4E8;display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  border:1px solid rgba(255,255,255,.4);padding:6px 13px;border-radius:999px;backdrop-filter:blur(4px);
  background:rgba(255,255,255,.08);
}
.hcar-kicker .rule{width:18px;height:2px;background:#fff;border-radius:2px;display:inline-block}
.hcar-title{font-family:var(--round);font-weight:900;color:#fff;font-size:clamp(26px,3.9vw,46px);line-height:1.18;text-shadow:0 2px 24px rgba(0,0,0,.38);letter-spacing:-.01em}
.hcar-sub{font-size:clamp(14px,1.5vw,18px);color:#fff;margin-top:14px;line-height:1.6;max-width:46ch;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hcar-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  background:#fff;color:var(--reward-strong);font-weight:700;font-size:16px;
  padding:14px 26px;border-radius:13px;border:none;box-shadow:0 12px 30px rgba(0,0,0,.28);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
@media (hover:hover){.hcar-cta:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.34)}}
.hcar-cta .i{font-size:18px}
/* 指示點 + 左右切換 */
/* 2026-06-05 Joker：指示點固定在 Banner 圖內下緣「置中」（桌機不再靠右、不超出圖） */
.hcar-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:3;display:flex;gap:8px}
.hcar-dot{width:9px;height:9px;border-radius:999px;border:none;background:rgba(255,255,255,.5);transition:all .25s var(--ease);cursor:pointer;padding:0}
.hcar-dot.active{background:#fff;width:26px}
@media (hover:hover){.hcar-dot:hover:not(.active){background:rgba(255,255,255,.8)}}
.hcar-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(255,253,248,.86);color:var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:background .16s,transform .16s;
}
@media (hover:hover){.hcar-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}}
.hcar-nav.prev{left:clamp(14px,2.5vw,30px)}
.hcar-nav.next{right:clamp(14px,2.5vw,30px)}
.hcar-nav .i{font-size:22px;stroke-width:2}
@media (max-width:680px){
  .hcar-nav{display:none}
  .hcar-track{height:clamp(300px,72vw,400px)}
}

/* ============ 個人化 MASTHEAD 帶（問候 + 搜尋 + 統計，取代舊大標 hero） ============ */
.greeting{
  max-width:var(--maxw);margin:0 auto;padding:26px 26px 8px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.greet-lede{display:flex;align-items:center;gap:15px;min-width:0;flex:1 1 320px}
.greet-stamp{
  flex-shrink:0;width:50px;height:50px;border-radius:13px;
  background:var(--reward-soft);border:1.5px solid var(--reward-line);color:var(--reward-strong);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(200,67,43,.12);position:relative;
}
.greet-stamp::after{content:"";position:absolute;inset:4px;border-radius:9px;border:1px dashed currentColor;opacity:.35}
.greet-stamp .i{font-size:24px}
.greet-text{min-width:0}
.greet-dateline{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--trust-gold-ink);display:flex;align-items:center;gap:8px;margin-bottom:5px}
.greet-dateline .dl-rule{flex:0 0 auto;width:14px;height:1.5px;background:var(--trust-gold);border-radius:2px}
.greet-hi{font-family:var(--round);font-weight:900;font-size:clamp(21px,2.6vw,30px);color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.greet-hi b{color:var(--reward-ink);font-family:var(--figure);font-weight:600}
.greet-sub{font-size:14px;color:var(--ink-2);margin-top:5px;line-height:1.55}
.greet-tools{display:flex;align-items:center;gap:20px;flex:1 1 300px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:680px){
  .greeting{gap:14px;padding:18px 16px 6px}
  .greet-tools{justify-content:stretch}
  .greet-tools .hero-search{max-width:none}
}

/* ============ 編輯式分組標題（暖刊 Feed） ============ */
.feed-group{max-width:var(--maxw);margin:0 auto}
/* 策展橫列（最適合你 / 快過期 / 大家都在領）= 精選 3 筆，固定 3 欄，
   永遠填滿整列、不留 ragged 空欄；窄螢幕自然降為 2 / 1 欄。 */
.feed-row{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.feed-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.feed-row{grid-template-columns:1fr}}
.group-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:34px 0 16px;padding-bottom:11px;border-bottom:2px solid var(--line);position:relative;
}
.group-head::before{
  content:"";position:absolute;left:0;bottom:-2px;width:54px;height:2px;background:var(--reward);
}
.group-head h2{font-family:var(--round);font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--ink);letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.group-head .gh-stamp{
  width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.group-head .gh-stamp .i{font-size:17px}
.group-head .gh-sub{font-size:14px;color:var(--ink-2);font-weight:500;font-family:var(--sans)}
.group-head .gh-ct{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.05em}
.group-stamp-urgent{background:var(--urgent-soft);color:var(--urgent)}
.group-stamp-best{background:var(--reward-soft);color:var(--reward-strong)}
.group-stamp-pop{background:var(--trust-soft);color:var(--trust-gold-ink)}
.group-stamp-all{background:var(--paper-2);color:var(--ink-2)}

/* ============ 品類小印章（核可章記號，方正不旋轉，刊物感） ============ */
.cat-stamp{
  position:relative;width:1.5em;height:1.5em;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
  border:1.5px solid currentColor;background:transparent;
}
.cat-stamp .i{font-size:.9em}
.cat-stamp-img{width:1.55em;height:1.55em;border-radius:7px;object-fit:cover;flex-shrink:0}
/* 票券缺口 signature 已移除（過度裝飾）；卡片改以頂端色規 + 類型章承載識別 */

/* ============ 雙標籤卡：右側「省/領多少」大數字 ============ */
.deal-figure{
  display:inline-flex;align-items:baseline;gap:4px;
  font-family:var(--figure);font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--track-ink);line-height:1;
}
.deal-figure .df-num{font-size:28px;letter-spacing:0}
.deal-figure .df-unit{font-size:13px;font-weight:600;color:var(--ink-2);font-family:var(--sans)}
.deal-figure .df-pre{font-size:12px;font-weight:600;color:var(--ink-3);font-family:var(--sans);align-self:center}
/* deal-figure 換到新的一行、佔滿、靠右大數字，當視覺主角 */
.card-top .deal-figure{flex-basis:100%;justify-content:flex-end;margin-top:2px}
/* 無法抽出數字時：amount 首行文字直接當這一行（單行截斷，右對齊小字） */
.card-top .deal-figure.df-text{justify-content:flex-end}
/* 2026-06-11 UIUX：文字型 hook（買一送一/壽星免費…）是這張卡的賣點，字級跟數字版同一個量級，
   不再縮成 14px 小字——掃列表時「能省什麼」要一眼抓到。 */
.df-amt-text{font-family:var(--round);font-size:17.5px;font-weight:700;color:var(--track-ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
.card.is-dim .deal-figure{color:var(--grey-exp)!important}

/* ============ 媒合暖度條（★ 很適合你 + 白話理由） ============ */
.match-warmth{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  background:var(--reward-soft);border:1px solid var(--reward);border-radius:11px;
  padding:8px 11px;
}
.mw-stars{color:var(--reward-strong);font-size:13px;letter-spacing:1px;display:inline-flex;align-items:center;gap:1px;flex-shrink:0}
.mw-stars .i{font-size:14px;fill:var(--reward-strong);stroke:none}
.mw-label{font-weight:700;font-size:13px;color:var(--reward-strong);flex-shrink:0;font-family:var(--round)}
.mw-why{font-size:12.5px;color:var(--ink-2);line-height:1.45;min-width:0}
.match-warmth.lvl-2{background:var(--trust-soft);border-color:var(--trust-gold)}
.match-warmth.lvl-2 .mw-stars,.match-warmth.lvl-2 .mw-label{color:var(--trust-gold-ink)}
.match-warmth.lvl-2 .mw-stars .i{fill:var(--trust-gold-ink)}

/* ============ 好康集印章 — 收藏時蓋章 toast ============ */
.stamp-toast{
  position:fixed;left:50%;bottom:108px;transform:translate(-50%,30px) scale(.8);
  z-index:2000;pointer-events:none;opacity:0;
  display:flex;align-items:center;gap:11px;
  background:#fff;border-radius:16px;padding:13px 20px 13px 14px;
  box-shadow:var(--shadow-lift);border:1px solid var(--line);
}
.stamp-toast.show{opacity:1;transform:translate(-50%,0) scale(1);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.stamp-toast .st-seal{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:var(--reward-soft);border:2px solid var(--reward-strong);color:var(--reward-strong);
  display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);
}
.stamp-toast .st-seal .i{font-size:22px}
.stamp-toast .st-text{font-family:var(--round);font-weight:700;color:var(--ink);font-size:15px}
.stamp-toast .st-text small{display:block;font-family:var(--sans);font-weight:500;font-size:12px;color:var(--ink-2);margin-top:1px}
/* 印章蓋下去的脈衝 */
@media (prefers-reduced-motion:no-preference){
  .stamp-toast.show .st-seal{animation:sealPunch .5s var(--ease)}
}
@keyframes sealPunch{0%{transform:rotate(-8deg) scale(1.7);opacity:.2}55%{transform:rotate(-8deg) scale(.92)}100%{transform:rotate(-8deg) scale(1)}}

/* ============ 快過期暖提醒帶（善意急迫，非焦慮） ============ */
.urgent-band{
  max-width:var(--maxw);margin:18px auto 0;padding:0 26px;
}
.urgent-band-inner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(100deg, var(--urgent-soft), #FDE0CE);
  border:1px solid var(--urgent);border-radius:14px;padding:13px 18px;color:var(--urgent-strong);
}
.urgent-band-inner .ub-ico{
  width:34px;height:34px;border-radius:10px;background:var(--urgent);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.urgent-band-inner .ub-ico .i{font-size:18px}
.urgent-band-inner .ub-text{font-weight:700;font-size:15px;font-family:var(--round)}
.urgent-band-inner .ub-text b{font-family:var(--mono);font-size:18px;color:var(--urgent)}
.urgent-band-inner .ub-text small{display:block;font-family:var(--sans);font-weight:500;font-size:12.5px;color:var(--urgent-strong);opacity:.85;margin-top:1px}
.urgent-band-inner .ub-go{margin-left:auto;flex-shrink:0;background:var(--urgent);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.urgent-band-inner .ub-go .i{font-size:15px}
/* 手機：圖示 + 文字同列（文字佔滿剩餘寬，避免「了」孤字斷行），按鈕整顆降到下一列靠右。 */
@media (max-width:680px){
  .urgent-band{padding:0 16px}
  .urgent-band-inner{flex-wrap:wrap;align-items:flex-start;gap:10px 11px;padding:14px 15px}
  .urgent-band-inner .ub-ico{order:1}
  .urgent-band-inner .ub-text{order:2;flex:1 1 calc(100% - 45px);min-width:0;font-size:15px;line-height:1.5}
  .urgent-band-inner .ub-go{order:3;flex:0 0 auto;margin-left:45px;padding:11px 20px}
}
@media (prefers-reduced-motion:no-preference){
  .urgent-band-inner .ub-ico{animation:ubPulse 2s ease-in-out infinite}
}
@keyframes ubPulse{0%,100%{box-shadow:0 0 0 0 rgba(194,65,12,.34)}50%{box-shadow:0 0 0 7px rgba(194,65,12,0)}}

/* ============ 骨架屏 ============ */
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.sk-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);min-height:212px;padding:16px 20px;overflow:hidden;
}
.sk-line{height:13px;border-radius:7px;margin:9px 0;
  background:linear-gradient(100deg,var(--paper-2) 30%,#FBEFDD 50%,var(--paper-2) 70%);
  background-size:200% 100%;}
.sk-line.w-tag{width:38%;height:18px;border-radius:999px}
.sk-line.w-title{width:90%;height:20px;margin-top:16px}
.sk-line.w-title2{width:62%;height:20px}
.sk-line.w-amt{width:48%;height:30px;border-radius:11px;margin-top:16px}
.sk-line.w-meta{width:70%}
@media (prefers-reduced-motion:no-preference){
  .sk-line{animation:skShimmer 1.3s ease-in-out infinite}
}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.fade-in{animation:fadeIn .45s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ 底部導覽 ≤5 tab（中央凸起=好康集印章） ============ */
/* 底部導覽已移除（主導覽改放 header）。2026-06-11 Joker：底部留白也移除，footer 直接貼底。 */
.footer{margin-bottom:0}

/* ============ 我的好康收集冊（抽屜） ============ */
.collect-overlay{
  position:fixed;inset:0;z-index:120;background:rgba(50,32,20,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.collect-overlay.open{opacity:1;pointer-events:auto}
@media (min-width:921px){ .collect-overlay{align-items:center} }
.collect-sheet{
  background:var(--paper);width:100%;max-width:760px;max-height:84vh;border-radius:24px 24px 0 0;
  overflow:hidden;display:flex;flex-direction:column;transform:translateY(40px);transition:transform .28s var(--ease);
  box-shadow:0 -10px 40px rgba(50,32,20,.25);
}
.collect-overlay.open .collect-sheet{transform:none}
@media (min-width:921px){ .collect-sheet{border-radius:24px} }
.collect-head{
  display:flex;align-items:center;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--line);
}
.collect-head .ch-seal{width:42px;height:42px;border-radius:12px;background:var(--reward-soft);border:2px solid var(--reward-strong);color:var(--reward-strong);display:flex;align-items:center;justify-content:center;transform:rotate(-6deg);flex-shrink:0}
.collect-head .ch-seal .i{font-size:22px}
.collect-head h3{font-family:var(--round);font-size:21px;font-weight:700}
.collect-head .ch-sub{font-size:12.5px;color:var(--ink-2);font-family:var(--sans);font-weight:500}
.collect-head .collect-close{margin-left:auto;background:var(--paper-2);border:none;border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer}
.collect-head .collect-close .i{font-size:18px}
.collect-body{padding:18px 22px 28px;overflow-y:auto}
.collect-body .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.collect-empty{text-align:center;padding:50px 20px;color:var(--ink-2)}
.collect-empty .ce-seal{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;background:var(--reward-soft);border:2px dashed var(--reward);color:var(--reward-strong);display:flex;align-items:center;justify-content:center}
.collect-empty .ce-seal .i{font-size:30px}
.collect-empty h4{font-family:var(--round);font-size:19px;margin-bottom:7px}

@media (max-width:920px){
  /* 行動優先單欄：問候帶 + 分組流自然堆疊（grid 既有 auto-fill 已處理） */
  .greeting{padding-top:16px}
}

/* =========================================================
   整頁視圖（福利詳情 / 專題索引 / 單一專題）— 暖刊 editorial
   ========================================================= */
.page-view{max-width:var(--maxw);margin:0 auto;padding:18px 26px 96px;animation:pvIn .4s var(--ease)}
@keyframes pvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pv-inner{max-width:840px;margin:0 auto;
  --track:var(--trust-gold);--track-ink:var(--trust-gold-ink);--track-soft:var(--trust-soft);--track-line:var(--trust-line);--track-deep:#835713;}
.pv-inner.kind-brand{
  --track:var(--reward);--track-ink:var(--reward-ink);--track-soft:var(--reward-soft);--track-line:var(--reward-line);--track-deep:var(--reward-deep);}
.topic-inner{max-width:900px}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.pv-back{
  display:inline-flex;align-items:center;gap:7px;background:var(--paper-2);border:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-weight:600;font-size:14px;
  padding:9px 16px 9px 13px;border-radius:var(--radius-pill);cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease)}
@media (hover:hover){.pv-back:hover{background:var(--paper-warm);transform:translateX(-2px)}}
.pv-back .i{font-size:17px}
.pv-fb{display:inline-flex}

/* 福利詳情整頁 — 頁首頂端一道軌道色規 + 軌道色暈，延續卡片的雙軌識別 */
.pv-head{position:relative;padding:18px 0 6px;border-bottom:2px solid var(--track-line);margin-bottom:6px;display:flex;flex-direction:column}
/* 2026-06-05 Joker：金額區塊跟卡片列表一樣靠右 */
/* 2026-06-11 UIUX：靠右不變，但跟標題同一列（標題左、金額右）——不再是標題下方的孤兒框；
   窄螢幕換行時金額落到標題下方靠左，閱讀順序自然。 */
.pv-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 24px}
.pv-title-row .pv-title{flex:1 1 380px;min-width:0}
.pv-head .pv-deal{flex-shrink:0;margin-bottom:14px}
/* pv-head 短色條已移除（2026-06-05 Joker：沒作用的裝飾線） */
.pv-badges .mh-cat .dot{box-shadow:0 0 0 3px var(--track-soft)}
.pv-badges{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:14px}
.pv-badges .mh-cat{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);font-weight:600;letter-spacing:.02em}
.pv-badges .mh-cat .dot{width:9px;height:9px;border-radius:50%}
.pv-badges .mh-region{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);font-weight:600}
.pv-badges .mh-region .i{font-size:15px}
.pv-title{font-family:var(--serif);font-size:clamp(25px,4.4vw,38px);line-height:1.28;font-weight:900;color:var(--ink);letter-spacing:-.01em;margin:2px 0 14px}
.pv-deal{display:inline-flex;align-items:baseline;gap:5px;margin-bottom:6px;padding:7px 16px;border:1.5px solid var(--track);border-radius:14px;background:var(--track-soft)}
.pv-deal-pre{font-family:var(--sans);font-size:14px;color:var(--track-ink);font-weight:700}
.pv-deal-num{font-family:var(--figure);font-size:34px;font-weight:600;color:var(--track-deep);line-height:1;font-variant-numeric:tabular-nums}
.pv-deal-unit{font-family:var(--sans);font-size:15px;color:var(--track-ink);font-weight:700}
.pv-deal-hook{font-family:var(--sans);font-size:17px;color:var(--track-ink);font-weight:700;line-height:1.4}
.pv-expired{display:flex;align-items:center;gap:9px;margin:16px 0 4px;padding:11px 16px;background:var(--paper-2);border:1px solid var(--line-strong);border-radius:12px;color:var(--ink-2);font-size:14px;font-weight:600}
.pv-expired .i{font-size:18px;color:var(--coral);flex:none}
/* 重點資訊快覽列（期間/年齡/地區） */
.pv-facts{display:flex;flex-wrap:wrap;margin:18px 0 4px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-warm)}
.pv-fact{flex:1 1 0;min-width:148px;padding:13px 18px;border-right:1px solid var(--line)}
.pv-fact:last-child{border-right:none}
.pv-fact .fl{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);font-weight:600;letter-spacing:.03em;margin-bottom:6px}
.pv-fact .fl .i{font-size:14px;color:var(--track);stroke-width:1.8}
.pv-fact .fv{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:700;line-height:1.4;display:block}
@media(max-width:560px){.pv-fact{flex:1 1 50%;min-width:50%;border-bottom:1px solid var(--line)}.pv-fact:nth-child(even){border-right:none}}
/* 區塊標題 icon → 柔色方塊 chip，更有設計感 */
.box-section h4 .i{box-sizing:border-box;width:30px;height:30px;padding:7px;border-radius:9px;background:var(--track-soft);color:var(--track-ink);font-size:16px;flex:none}
.pv-social{margin:18px 0 6px}
.pv-body .box-section:first-child{margin-top:20px}
.pv-foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.pv-source{display:inline-flex;align-items:center;gap:8px}
.pv-comments{margin-top:8px}
/* 2026-06-17 Joker：詳情頁標籤 chips（上方分隔線與資格條件區隔；點擊→搜尋） */
.pv-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.pv-tag{font:inherit;font-size:.92rem;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:6px 15px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
@media (hover:hover){.pv-tag:hover{border-color:var(--moss);color:var(--ink)}}
/* 2026-06-17 Joker：你可能也想看（標題清單，刻意跟相關福利卡片不同呈現） */
.pv-alsoviewed{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line-strong)}
.av-head{font-size:1.05rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;margin:0 0 10px}
.av-head .i{color:var(--moss)}
.av-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.av-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .15s}
.av-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--paper-2);color:var(--ink-2);font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.av-t{flex:1;font-size:.95rem;line-height:1.45}
.av-item .i{color:var(--ink-2);flex-shrink:0;opacity:.55}
@media (hover:hover){.av-item:hover{background:var(--paper-2)}.av-item:hover .av-num{background:var(--moss);color:#fff}}

/* 資格條件 */
.pv-gates .pv-gate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:6px}
.pv-gate{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px}
.pv-gate .pg-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--paper-warm);color:var(--forest-ink)}
.pv-gate .pg-ic .i{font-size:17px}
.pv-gate .pg-k{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;margin-bottom:2px}
.pv-gate .pg-v{font-size:15px;color:var(--ink);font-weight:600;line-height:1.45}
.pv-gate-note{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.pv-gate-note .i{flex:none}

/* 相關福利 */
.pv-related{margin-top:38px;padding-top:8px;border-top:2px solid var(--line)}
.pv-related .group-head{margin-bottom:14px}
/* 相關福利：橫向滾動一排（約露出 2.5 張暗示可滑），最相關 5 筆。2026-06-05 Joker */
.grid.related-row{
  display:flex;align-items:stretch;grid-template-columns:none;overflow-x:auto;gap:16px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:10px;
  scrollbar-width:thin;
  /* 2026-06-11 UIUX：右緣淡出遮罩——卡片不再被硬切，並暗示還有內容可滑 */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
}
/* 2026-06-05 Joker：橫滑「相關福利」同列卡片等高。
   flex 容器預設 align-items:stretch 即可等高，但卡片本身的 height:100% 在 flex
   情境下無定值父高可解析，會讓 stretch 失效→各卡依內容高度不一。
   這裡把 height 改回 auto，交回 stretch 拉等高；卡內已是 flex column + 摘要 line-clamp 兩行，視覺自然對齊。 */
.grid.related-row > .card{flex:0 0 38%;min-width:280px;scroll-snap-align:start;height:auto}
@media (max-width:680px){ .grid.related-row > .card{flex-basis:78%} }
@media (max-width:380px){ .grid.related-row > .card{min-width:240px} }
/* 相關福利指示點＋左右箭頭同一排置中（2026-06-05 Joker） */
.rel-scroll-wrap{position:relative}
.rel-dots-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.rel-nav{width:34px;height:34px;border-radius:999px;border:1px solid var(--line-strong);cursor:pointer;flex-shrink:0;
  background:var(--card);color:var(--ink-2);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);transition:background .16s,color .16s,transform .12s}
@media (hover:hover){.rel-nav:hover{background:#fff;color:var(--ink);transform:scale(1.08)}}
.rel-nav .i{font-size:17px;stroke-width:2}
.rel-dots{display:flex;align-items:center;gap:8px}
.rel-dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;cursor:pointer;background:var(--line-strong);transition:all .25s var(--ease)}
.rel-dot.active{width:22px;background:var(--coral)}
@media (hover:hover){.rel-dot:hover:not(.active){background:var(--ink-3)}}

/* 專題索引頁 */
.topics-head{padding:6px 0 22px;border-bottom:2px solid var(--line);margin-bottom:26px}
.topics-head .th-kicker{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--coral-ink);text-transform:uppercase;margin-bottom:12px}
.topics-head .th-kicker .rule{width:30px;height:2px;background:var(--coral-fill);display:inline-block}
.topics-head h1{font-family:var(--serif);font-size:clamp(28px,5vw,42px);font-weight:900;letter-spacing:-.01em;margin-bottom:8px}
.topics-head p{color:var(--ink-2);font-size:16px;line-height:1.7;max-width:620px}
.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
/* 2026-06-05 Joker：專題索引改列表式 — 一排一個，封面在左、文案在右 */
.topics-grid.tg-list{grid-template-columns:1fr;gap:18px}
.tg-list .topic-card.tc-row{flex-direction:row;align-items:stretch;min-height:150px}
.tg-list .tc-row .tc-cover{width:320px;min-height:150px;flex-shrink:0}
.tg-list .tc-row .tc-meta{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 22px}
.tc-pin{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;background:var(--reward-strong);
  padding:4px 10px;border-radius:999px;letter-spacing:.06em;box-shadow:0 2px 6px rgba(120,40,20,.3)}
.tc-date{display:inline-flex;align-items:center;gap:4px;color:var(--ink-3);font-size:12.5px;font-family:var(--mono)}
.topics-toolbar{display:flex;gap:8px;margin:0 0 18px}
@media (max-width:680px){
  .tg-list .topic-card.tc-row{flex-direction:column}
  .tg-list .tc-row .tc-cover{width:100%;min-height:130px}
}
.topic-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .22s var(--ease),box-shadow .22s var(--ease);color:inherit}
@media (hover:hover){.topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}}
.tc-cover{position:relative;min-height:168px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center}
/* 2026-06-11 UIUX：封面圖加底部 scrim——白字標題在亮色照片（天空/雪地）上也要可讀，
   不能只靠 text-shadow。 */
.tc-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,18,12,.68) 0%,rgba(25,18,12,.22) 46%,transparent 72%)}
.tc-cover > *:not(.tc-pin){position:relative;z-index:1}   /* tc-pin 維持 absolute 右上角 */
.tc-kind{align-self:flex-start;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.28);padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:auto;backdrop-filter:blur(2px)}
.tc-cover-title{font-family:var(--serif);font-size:21px;font-weight:900;color:#fff;line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.4);margin-top:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tc-meta{padding:15px 17px 17px;display:flex;flex-direction:column;gap:11px;flex:1}
.tc-tagline{font-size:14px;color:var(--ink-2);line-height:1.6;flex:1}
.tc-ct{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--coral-ink);font-weight:600}
.tc-ct .i{font-size:15px}

/* 單一專題頁 — editorial 公報層次 */
.topic-kicker{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--coral-ink);text-transform:uppercase;margin-bottom:14px}
.topic-kicker .rule{width:30px;height:2px;background:var(--coral-fill);display:inline-block}
.topic-meta-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-12px 0 24px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);font-weight:600}
.topic-meta-strip .tms-item{display:inline-flex;align-items:center;gap:6px}
.topic-meta-strip .tms-item .i{color:var(--coral);font-size:15px}
.topic-meta-strip .tms-dot{color:var(--ink-3)}
.topic-hero{position:relative;border-radius:var(--radius-card);overflow:hidden;min-height:220px;padding:30px 28px;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;margin-bottom:22px;box-shadow:var(--shadow-soft)}
/* 2026-06-11 UIUX：專題 hero 同樣加底部 scrim，副標（tagline）在亮部照片上才過得了對比 */
.topic-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,18,12,.72) 0%,rgba(25,18,12,.28) 52%,rgba(25,18,12,.06) 80%)}
.topic-hero > *{position:relative;z-index:1}
/* 首段 drop-lede：第一段放大為導言，拉開層次 */
.topic-intro > p:first-child{font-size:19px;line-height:1.8;color:var(--ink);font-weight:500}
.topic-perks{margin-top:30px;padding-top:22px;border-top:2px solid var(--line)}
.topic-hero-body .th-kind{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.3);padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:14px}
.topic-hero-body h1{font-family:var(--serif);font-size:clamp(26px,5vw,40px);font-weight:900;color:#fff;line-height:1.26;text-shadow:0 2px 12px rgba(0,0,0,.45);margin-bottom:10px}
.topic-tagline{font-size:16px;color:rgba(255,255,255,.94);line-height:1.65;max-width:640px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.topic-intro{font-size:17px;line-height:1.85;color:var(--ink);margin-bottom:26px}
.topic-intro p{margin:0 0 1.05em}
.topic-intro ul{margin:0 0 1.05em;padding-left:1.2em}
.topic-intro li{margin:.35em 0;line-height:1.75}
.topic-intro strong{color:var(--coral-ink);font-weight:700}
.topic-highlights{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:30px}
.topic-highlights h2{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:18px;font-weight:800;margin-bottom:12px}
.topic-highlights h2 .i{font-size:19px;color:var(--coral)}
.topic-highlights ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.topic-highlights li{position:relative;padding-left:24px;font-size:16px;line-height:1.7;color:var(--ink)}
.topic-highlights li::before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--coral-fill)}
.topic-highlights strong{color:var(--coral-ink);font-weight:700}
.topic-perks .group-head{margin-bottom:16px}
.topic-perk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.tp-item{display:flex;flex-direction:column;min-width:0}
.tp-reason{margin-top:8px;padding:10px 13px;background:var(--paper-warm);border-radius:8px;font-size:14px;line-height:1.6;color:var(--ink-2);display:flex;gap:7px;align-items:flex-start}
.tp-reason .i{flex:none;color:var(--coral);margin-top:2px}
.topic-empty,.topic-perks .topic-empty{color:var(--ink-2);padding:20px 0}

/* 店家專題 */
.vendor-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:30px}
.vf-cell{padding:18px 19px;background:var(--paper-2);border:1px solid var(--line);border-radius:13px}
.vf-label{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:17px;font-weight:800;color:var(--ink);margin-bottom:8px}
.vf-label .i{color:var(--forest-ink);flex:none}
.vf-desc{font-size:15px;line-height:1.65;color:var(--ink-2)}
.vendor-info{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:20px}
.vendor-info h2{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:18px;font-weight:800;margin-bottom:14px}
.vendor-info h2 .i{color:var(--coral)}
.vi-row{display:flex;align-items:center;gap:11px;padding:10px 0;font-size:16px;color:var(--ink);border-top:1px solid var(--line-soft)}
.vi-row:first-of-type{border-top:none}
.vi-row .i{flex:none;font-size:19px;color:var(--forest-ink)}
.vi-link{color:var(--coral-ink);font-weight:600}
.vi-cta{color:var(--forest-ink);font-weight:700}

@media (max-width:640px){
  .page-view{padding:14px 16px 96px}
  .pv-title{font-size:25px}
  .topic-hero{min-height:180px;padding:22px 18px}
  .topic-perk-list,.topics-grid{grid-template-columns:1fr}
}
/* 深連(?perk/?topic/?topics)時，啟動瞬間先隱藏首頁區塊，避免「閃首頁」。Router 套用後由 inline 樣式接手 */
body.deeproute .hero-carousel,body.deeproute #greetingBand,body.deeproute #filterbar,body.deeproute #listWrap,body.deeproute #urgentBand,body.deeproute #matchBanner{display:none}

/* ════════════════════════════════════════════════════════════════
   視覺升級・精煉層 v1 —— 純加性，沿用既有變數與 class，不動 JS/結構
   字級對齊尺標、間距上 8pt 節奏、層級對比再拉一階、質感更克制高級
   ════════════════════════════════════════════════════════════════ */
body{font-size:var(--fs-400);line-height:var(--lh-body);letter-spacing:.005em}
h1,h2,h3,h4{letter-spacing:var(--ls-title);line-height:var(--lh-title)}
.greet-hi,.hcar-title,.topics-head h1,.topic-hero-body h1,.list-head h2,.group-head h2{font-feature-settings:"palt" 1}
.kicker,.hcar-kicker,.topics-head .th-kicker,.topic-kicker,.greet-dateline,.filter-label,.rm-title{letter-spacing:var(--ls-eyebrow)}
.hcar-title{font-size:var(--fs-800);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.hcar-sub{margin-top:var(--sp-4);max-width:42ch}
.hcar-slide::after{background:linear-gradient(78deg, rgba(28,20,12,.82) 0%, rgba(28,20,12,.50) 30%, rgba(28,20,12,.10) 58%, transparent 76%),linear-gradient(0deg, rgba(28,20,12,.50) 0%, transparent 34%)}
.hcar-cta{background:var(--card);border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.6);padding:14px 26px;letter-spacing:.01em}
@media (hover:hover){.hcar-cta:hover{background:#fff}}
.greeting{padding:var(--sp-6) var(--sp-6) var(--sp-2);gap:var(--sp-6)}
.greet-hi{font-size:var(--fs-600);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.greet-sub{font-size:var(--fs-200);color:var(--ink-2);margin-top:var(--sp-2)}
.greet-stamp{box-shadow:0 4px 12px rgba(200,67,43,.12), inset 0 1px 0 rgba(255,255,255,.5)}
.hero-search input{font-size:var(--fs-300);border-color:var(--line-strong)}
.hero-search input:focus{box-shadow:var(--ring-focus),var(--shadow-soft)}
.list-head{margin-bottom:var(--sp-5);padding-bottom:var(--sp-3)}
.list-head h2,.group-head h2{font-size:var(--fs-600);letter-spacing:var(--ls-title)}
.list-head .sub,.group-head .gh-sub{font-size:var(--fs-200)}
.list-head::after,.group-head::before{width:56px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,var(--reward),var(--reward-deep))}
.card{border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}
@media (hover:hover){.card:hover{transform:translateY(-3px)}}
.card-top{padding:var(--sp-4) var(--sp-5) var(--sp-3)}
.card-body{padding:var(--sp-3) var(--sp-5) var(--sp-5)}
.card h3{font-size:var(--fs-500);line-height:var(--lh-title);letter-spacing:var(--ls-title);margin-bottom:var(--sp-3)}
.card-excerpt{font-size:var(--fs-200);line-height:1.62;margin-bottom:var(--sp-3)}
.card .amount{font-size:var(--fs-300);margin-bottom:var(--sp-2)}
.card .period,.card-region,.card-cat{font-size:var(--fs-200)}
.card .meta-row{font-size:var(--fs-100);padding-top:var(--sp-2)}
.deal-figure .df-num{font-size:25px}
.hero-stats .num,.header-count b{letter-spacing:0}
.deal-figure .df-pre,.deal-figure .df-unit{color:var(--ink-3)}
@media (max-width:680px){ .card-excerpt{font-size:14px} }
@media (prefers-reduced-motion:no-preference){
  .grid.anim > .card{opacity:0;transform:translateY(10px);animation:cardIn .46s var(--ease) forwards;animation-delay:var(--d,0ms)}
  .reveal{transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
}
@keyframes cardIn{to{opacity:1;transform:none}}
.modal{box-shadow:var(--shadow-hero)}
.modal-head h2{font-size:var(--fs-600);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.box-section{margin-top:var(--sp-6)}
.box-section+.box-section{padding-top:var(--sp-6)}
.box-section .body{font-size:var(--fs-400);line-height:1.8}
.box-section h4 .zh{font-size:17px;letter-spacing:var(--ls-title)}
.topics-head h1,.topic-hero-body h1{font-size:var(--fs-700);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.topic-intro > p:first-child{font-size:var(--fs-500);line-height:1.78}
.topic-perks,.topic-intro{font-size:var(--fs-400)}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:8px}
.chip:focus-visible,.sort-btn:focus-visible,.mn-tab:focus-visible,.card:focus-visible{box-shadow:var(--ring-focus)}
body::after{opacity:.45;background-size:22px 22px}
@media (hover:hover){.btn-primary:hover,.btn-ghost:hover,.btn-load:hover,.hcar-cta:hover,.btn-source:hover{transform:translateY(-2px)}}
.btn-primary:active,.btn-ghost:active,.btn-load:active,.btn-source:active{transform:translateY(0)}
/* 殘留舊鮭橘修正(audit #3)：導覽選中態投影改朱紅同色相 */
.mn-tab.active{box-shadow:0 3px 10px rgba(200,67,43,.28)}

/* ============ 軌道分段控制（全部 / 政府金盾 / 品牌朱紅吊牌） ============ */
.track-seg{display:inline-flex;align-items:center;gap:0;flex-shrink:0;margin-right:6px;background:var(--paper-2);border:1px solid var(--line-strong);border-radius:999px;padding:3px}
.track-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px;font-weight:700;color:var(--ink-2);background:transparent;border:none;border-radius:999px;padding:6px 13px;min-height:34px;cursor:pointer;transition:background .16s var(--ease),color .16s,box-shadow .16s}
.track-pill .i{font-size:15px;color:var(--ink-3);transition:color .16s}
.track-pill .tk-ct{font-family:var(--mono);font-size:12px;opacity:.6;font-variant-numeric:tabular-nums}
@media (hover:hover){.track-pill:hover{color:var(--ink)}}
@media (hover:hover){.track-pill:hover .i{color:var(--trust)}}
.track-pill.is-gov.active{background:var(--trust-gold);color:#3A2E24;box-shadow:0 3px 10px rgba(176,122,30,.30)}
.track-pill.is-gov.active .i,.track-pill.is-gov.active .tk-ct{color:#3A2E24;opacity:1}
.track-pill.is-brand.active{background:var(--reward-strong);color:#fff;box-shadow:0 3px 10px rgba(178,58,36,.28)}
.track-pill.is-brand.active .i,.track-pill.is-brand.active .tk-ct{color:#fff;opacity:.95}
.track-pill.is-all.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow-soft)}
.track-pill.is-all.active .i{color:var(--trust)}
/* filterbar 左側色條已移除（Joker：AI 套路黑名單） */
/* ===== 品牌 Logo 篩選列 ===== */
.brandbar-outer{display:flex;align-items:stretch;max-width:var(--maxw);margin:0 auto}
.brandbar-inner{display:flex;gap:6px;overflow-x:auto;padding:10px 20px 12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-width:0}
/* 2026-06-16 Joker：品牌列右側「展開全部品牌」鈕（四方塊 icon）＋彈框；列中段照舊可橫滑 */
.brand-all-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;border-left:1px solid var(--line);cursor:pointer;padding:10px 18px 12px 14px;width:80px}
.brand-all-btn .bab-circle{width:50px;height:50px;border-radius:50%;background:var(--card);border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.brand-all-btn .bab-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3.5px;width:20px;height:20px}
.brand-all-btn .bab-grid i{background:var(--reward-ink);border-radius:2.5px;display:block}
.brand-all-btn .bab-label{font-size:12px;color:var(--ink-2);white-space:nowrap}
@media (hover:hover){.brand-all-btn:hover .bab-circle{transform:translateY(-2px);border-color:var(--reward-line);box-shadow:var(--shadow-soft)}.brand-all-btn:hover .bab-label{color:var(--reward-ink)}}
.brand-sheet{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;width:min(680px,92vw);max-height:80vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 60px rgba(20,30,14,.26);padding:18px 20px 22px;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.brand-sheet.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
body.brand-sheet-open::before{content:"";position:fixed;inset:0;z-index:115;background:rgba(50,32,20,.5);backdrop-filter:blur(2px)}
.bs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bs-title{font-family:var(--serif);font-weight:900;font-size:19px;color:var(--ink)}
.bs-close{background:none;border:none;font-size:21px;line-height:1;color:var(--ink-3);cursor:pointer;padding:4px 9px;border-radius:9px}
@media (hover:hover){.bs-close:hover{background:var(--paper-2);color:var(--ink)}}
.bs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:16px 6px;justify-items:center}
@media (max-width:760px){.brand-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:82vh;border-radius:22px 22px 0 0;transform:translateY(100%);padding-bottom:calc(22px + env(safe-area-inset-bottom,0))}.brand-sheet.open{transform:translateY(0)}}
.brand-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:0;width:53px}
.brand-chip .bc-circle{width:50px;height:50px;border-radius:50%;background:var(--card);border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
/* 2026-06-11 UIUX：內圈的彩色 inline border 拿掉（每顆跟著品牌色五顏六色，整列很散）；
   品牌識別交給圈內文字色與淡底，外框由 bc-circle 統一安靜一致，active/hover 態不受影響。 */
.brand-chip .bc-txt{border-color:transparent !important}
.brand-chip .bc-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.brand-chip .bc-circle img.bc-logo{object-fit:contain;padding:6px;box-sizing:border-box;background:#fff;border-radius:0}
/* 2026-06-17 Joker：APP/會員專屬福利 → 卡片背景蓋「會員專屬 APP ONLY」紅印章浮水印(opacity .08，multiply 去白底) */
.card.appmember{isolation:isolate}
.card.appmember::before{content:"";position:absolute;inset:0;z-index:-1;background:url(assets/member-stamp.png?v=1) no-repeat center / 72%;opacity:.08;mix-blend-mode:multiply;pointer-events:none}
/* 內頁(詳情頁)：印章水平置中。用 isolation+z-index:-1 把印章壓到內容後面，不動子元素定位(避免蓋掉絕對定位的倒數角標) */
.pv-inner.appmember{position:relative;isolation:isolate}
.pv-inner.appmember::before{content:"";position:absolute;top:46px;left:50%;transform:translateX(-50%);width:240px;height:240px;z-index:-1;background:url(assets/member-stamp.png?v=1) no-repeat center / contain;opacity:.08;mix-blend-mode:multiply;pointer-events:none}
/* 文字圈：品牌名前兩字，色彩由品牌 key 穩定生成（不用他站 logo 圖） */
.brand-chip .bc-txt{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;letter-spacing:.02em;border:1.5px solid transparent;font-family:var(--round)}
.brand-chip .bc-fallback{font-family:var(--serif);font-weight:900;font-size:17px;color:var(--reward-ink)}
.brand-chip .bc-name{font-size:12px;color:var(--ink-2);white-space:nowrap;max-width:66px;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.brand-chip:hover .bc-circle{transform:translateY(-2px);border-color:var(--reward-line);box-shadow:var(--shadow-soft)}}
.brand-chip.active .bc-circle{border:2.5px solid var(--reward);box-shadow:0 0 0 3px var(--reward-soft)}
.brand-chip.active .bc-name{color:var(--reward-ink);font-weight:800}
/* ===== 身分證對中：按鈕＋小對話框 ===== */
.idq-x{margin-left:7px;font-weight:900;opacity:.85;padding:0 2px}
@media (hover:hover){.idq-x:hover{opacity:1}}
.idq-overlay{position:fixed;inset:0;z-index:1200;background:rgba(46,37,28,.42);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.idq-box{position:relative;background:var(--card);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow-lift);padding:26px 26px 20px;width:min(420px,calc(100vw - 40px))}
.idq-box h3{font-family:var(--serif);font-size:20px;margin:0 0 6px}
.idq-sub{font-size:14px;color:var(--ink-2);margin:0 0 14px;line-height:1.6}
.idq-row{display:flex;gap:10px}
.idq-row input{flex:1;border:1.5px solid var(--line-strong);border-radius:12px;padding:10px 14px;font-size:16px;letter-spacing:.12em;font-family:var(--mono);background:var(--paper);color:var(--ink)}
.idq-row input:focus{outline:none;border-color:var(--reward);box-shadow:var(--ring-focus)}
.idq-go{border:none;cursor:pointer;border-radius:12px;padding:10px 20px;background:var(--reward-strong);color:#fff;font-weight:800;font-size:15px}
/* ===== 分享福利 FAB + 彈框 ===== */
.share-fab{position:fixed;right:22px;bottom:22px;z-index:80;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:var(--reward-strong);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 8px 24px rgba(140,50,30,.35);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
@media (hover:hover){.share-fab:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(140,50,30,.45)}}
@media (max-width:680px){
  .share-fab{width:48px;height:48px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0))}
  .share-fab .sf-lbl{display:none}
  .share-fab .i{font-size:20px}
  .page-view,.pv-inner{padding-bottom:84px}  /* FAB 避讓：內文底部留白（P1-4） */
}

.share-fab .i{font-size:19px}
.share-fab .sf-lbl{font-size:12px;font-weight:800;line-height:1.15;letter-spacing:.05em}
.share-sheet{max-width:430px;width:92vw}
.share-sheet h3{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.share-lead{font-size:14px;color:var(--ink-2);margin-bottom:12px}
.share-url,.share-desc{width:100%;border:1.5px solid var(--line-strong);border-radius:11px;padding:11px 13px;font-size:16px;
  background:var(--paper);color:var(--ink);margin-bottom:10px;font-family:inherit}
.share-url:focus,.share-desc:focus{outline:none;border-color:var(--reward)}
.share-desc{resize:vertical;min-height:90px}
.share-done{text-align:center;padding:26px 8px}
.share-done .i{font-size:42px;color:var(--success)}
.share-done h3{justify-content:center;margin:10px 0 6px}
.share-done p{font-size:14px;color:var(--ink-2);line-height:1.7}
@media (hover:hover){.idq-go:hover{background:var(--reward-deep)}}
.idq-note{font-size:12px;color:var(--ink-3);margin:12px 0 0;display:flex;align-items:flex-start;gap:6px}
.idq-note .i{font-size:14px;flex-shrink:0;margin-top:.1em;color:var(--ink-3)}
.idq-close{position:absolute;top:12px;right:14px;border:none;background:none;font-size:16px;color:var(--ink-3);cursor:pointer;padding:6px}
@media (hover:hover){.idq-close:hover{color:var(--ink)}}
@media (max-width:560px){.track-seg{margin-right:0;order:-1}.track-pill span:not(.tk-ct){font-size:13px}}
@media (max-width:380px){.track-pill{padding:6px 10px}}

/* ============ 右上角個人中心：頭像 + 選單 ============ */
.acct-wrap{position:relative;flex-shrink:0;margin-left:8px}
.acct-trigger{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .16s,background .16s,transform .12s;padding:0}
@media (hover:hover){.acct-trigger:hover{border-color:var(--trust-line);background:var(--trust-soft)}}
.acct-trigger:active{transform:scale(.93)}
.acct-trigger[aria-expanded="true"]{border-color:var(--trust-gold);background:var(--trust-soft)}
.acct-avatar{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--trust-gold),var(--reward-strong));color:#fff}
.acct-avatar .i{font-size:17px;stroke-width:2}
.acct-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av-ini{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;background:linear-gradient(135deg,#8b7cf6,#6246ea);color:#fff;font-weight:700;font-size:12px;letter-spacing:.02em}
.acct-menu{position:fixed;width:248px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);overflow-y:auto;z-index:1000;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);padding:8px;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .16s var(--ease),transform .16s var(--ease);-webkit-overflow-scrolling:touch}
.acct-menu.open{opacity:1;transform:none;pointer-events:auto}
.acct-id{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-id .ai-av{width:38px;height:38px;border-radius:999px;background:linear-gradient(135deg,var(--trust-gold),var(--reward-strong));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.acct-id .ai-av .i{font-size:19px;stroke-width:2}
.acct-id .ai-av img{width:100%;height:100%;object-fit:cover;display:block}
.acct-id .ai-name{font-family:var(--round);font-weight:700;font-size:16px;color:var(--ink);line-height:1.2}
.acct-id .ai-sub{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.acct-act{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;text-align:left;padding:11px 10px;border-radius:10px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;transition:background .12s}
.acct-act .i{font-size:17px;color:var(--trust)}
@media (hover:hover){.acct-act:hover{background:var(--paper-2)}}
.acct-act .aa-ct{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.acct-act.aa-login{color:#fff;background:var(--trust-gold);margin-top:4px;justify-content:center}
.acct-act.aa-login .i{color:#fff}
@media (hover:hover){.acct-act.aa-login:hover{background:var(--trust-gold-ink)}}
@media (max-width:720px){.acct-trigger{width:38px;height:38px}.acct-avatar{width:27px;height:27px}}
@media (max-width:440px){.acct-menu{left:8px!important;right:8px!important;width:auto;top:62px!important}}

/* ============ 登入彈窗（Line/Google/FB 品牌色） ============ */
.auth-overlay{position:fixed;inset:0;z-index:130;background:rgba(50,32,20,.52);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.auth-overlay.open{opacity:1;pointer-events:auto}
.auth-sheet{position:relative;background:var(--card);width:100%;max-width:400px;border-radius:22px;padding:34px 30px 24px;text-align:center;box-shadow:var(--shadow-lift);transform:translateY(16px) scale(.98);transition:transform .26s var(--ease)}
.auth-overlay.open .auth-sheet{transform:none}
.auth-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;border-radius:10px;background:var(--paper-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.auth-close .i{font-size:18px}
.auth-mark img{border-radius:12px}
.auth-sheet h3{font-family:var(--round);font-size:23px;font-weight:900;margin:12px 0 8px;color:var(--ink)}
.auth-lede{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0 auto 22px;max-width:320px}
.auth-btns{display:flex;flex-direction:column;gap:11px;text-align:left}
.auth-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px;border-radius:13px;border:1.5px solid transparent;font-family:var(--sans);font-weight:700;font-size:16px;cursor:pointer;transition:transform .14s var(--ease),box-shadow .14s,filter .14s}
@media (hover:hover){.auth-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}}
.auth-btn:active{transform:translateY(0)}
.auth-btn .ab-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:900;font-size:18px}
.auth-btn .ab-tx{flex:1}
.auth-btn .ab-soon{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.10);opacity:.85}
.auth-line{background:#06C755;color:#fff}
.auth-line .ab-ico{background:none;color:#fff}
.auth-line .ab-ico .i{font-size:18px;stroke-width:2.2}
.auth-google{background:#fff;color:#3c4043;border-color:#DADCE0}
.auth-google .ab-ico.ab-g{background:#fff;color:#4285F4;font-family:var(--round);box-shadow:inset 0 0 0 1px #DADCE0}
.auth-google .ab-soon{background:rgba(60,64,67,.10)}
.auth-apple{background:#000;color:#fff}
.auth-apple .ab-ico.ab-a{background:rgba(255,255,255,.16);color:#fff}
.auth-facebook{background:#1877F2;color:#fff}
.auth-facebook .ab-ico{background:none;color:#fff}
.auth-fine{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--ink-3);margin:20px auto 0;line-height:1.5;max-width:320px}
.auth-fine .i{font-size:14px;flex-shrink:0}

/* ============ 個人中心面板（我的收藏 / 已參與） ============ */
.prof-overlay{position:fixed;inset:0;z-index:120;background:rgba(50,32,20,.5);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.prof-overlay.open{opacity:1;pointer-events:auto}
@media (min-width:921px){.prof-overlay{align-items:center}}
.prof-sheet{background:var(--paper);width:100%;max-width:760px;max-height:84vh;border-radius:24px 24px 0 0;overflow:hidden;display:flex;flex-direction:column;transform:translateY(40px);transition:transform .28s var(--ease);box-shadow:0 -10px 40px rgba(50,32,20,.25)}
.prof-overlay.open .prof-sheet{transform:none}
@media (min-width:921px){.prof-sheet{border-radius:24px}}
.prof-head{display:flex;align-items:center;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.prof-head .ph-avatar{width:46px;height:46px;border-radius:999px;flex-shrink:0;background:linear-gradient(135deg,var(--trust-gold),var(--reward-strong));color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prof-head .ph-avatar .i{font-size:24px;stroke-width:1.9}
.prof-head .ph-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.prof-head .ph-meta{flex:1;min-width:0}
.prof-head .ph-meta h3{font-family:var(--round);font-size:21px;font-weight:700;line-height:1.2}
.ph-login{display:inline-flex;align-items:center;gap:5px;margin-top:3px;background:none;border:none;padding:0;font-size:13px;font-weight:700;color:var(--trust-gold-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ph-login .i{font-size:13px}
.prof-close{background:var(--paper-2);border:none;border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;flex-shrink:0}
.prof-close .i{font-size:18px}
.prof-tabs{display:flex;gap:6px;padding:12px 22px 0;border-bottom:1px solid var(--line)}
.prof-tab{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;padding:10px 4px 13px;font-weight:700;font-size:15px;color:var(--ink-2);position:relative;transition:color .14s}
.prof-tab .i{font-size:17px;color:var(--ink-3)}
.prof-tab .pt-ct{font-family:var(--mono);font-size:12px;padding:1px 7px;border-radius:999px;background:var(--paper-2);color:var(--ink-2)}
@media (hover:hover){.prof-tab:hover{color:var(--ink)}}
.prof-tab.active{color:var(--ink)}
.prof-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:var(--reward)}
.prof-tab.active .i{color:var(--reward)}
.prof-tab.active .pt-ct{background:var(--reward-soft);color:var(--reward-ink)}
.prof-body{padding:18px 22px 28px;overflow-y:auto}
.prof-body .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prof-empty{text-align:center;padding:50px 20px;color:var(--ink-2)}
.prof-empty .pe-seal{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;background:var(--reward-soft);border:2px dashed var(--reward);color:var(--reward-strong);display:flex;align-items:center;justify-content:center}
.prof-empty .pe-seal.j{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.prof-empty .pe-seal .i{font-size:30px}
.prof-empty h4{font-family:var(--round);font-size:19px;margin-bottom:7px}
.prof-empty p{font-size:14px;line-height:1.6;max-width:340px;margin:0 auto}
/* 2026-06-05 Joker：個人中心清單改緊湊列表 + 過濾 + 分頁 */
.prof-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.prof-search{flex:1 1 180px;min-width:140px;height:40px;padding:0 13px;border-radius:11px;border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);font-family:var(--sans);font-size:14px}
.prof-search:focus{outline:none;border-color:var(--coral)}
.prof-chips{display:flex;gap:7px;flex-shrink:0}
.prof-chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
@media (hover:hover){.prof-chip:hover{border-color:var(--coral);color:var(--coral-ink)}}
.prof-chip.active{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill)}
.prof-list{display:flex;flex-direction:column}
.prof-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:9px 4px;border-bottom:1px solid var(--line);text-align:left;background:none;border-left:none;border-right:none;border-top:none;width:100%;cursor:pointer;font-family:inherit;color:inherit}
.prof-row:last-child{border-bottom:none}
@media (hover:hover){.prof-row:hover .pr-title{color:var(--coral-ink)}}
.pr-main{flex:1 1 auto;min-width:0}
.pr-title{display:block;font-family:var(--round);font-size:15px;font-weight:700;color:var(--ink);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-meta{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-arrow{flex-shrink:0;color:var(--ink-3)}
.prof-noresult{text-align:center;padding:40px 20px;color:var(--ink-2);font-size:14px}
.prof-body .pagination{margin-top:20px;padding-top:18px}
@media(max-width:520px){
  .prof-filter{gap:8px}
  .prof-chips{width:100%;order:2}
  .prof-search{order:1}
}

/* ===== 合作店家 landing 升級（2026-06-05） ===== */
.v-hero-xl{min-height:340px}
.v-hero-cta{margin-top:18px}
.v-sec{margin-top:44px}
.v-sec-head{margin-bottom:18px}
.v-kicker{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:#B98A3A;font-weight:600;margin-bottom:6px}
.v-sec-head h2{font-family:var(--serif);font-size:26px;font-weight:900}
.v-quote{margin:20px 0 0;padding:16px 22px;background:var(--paper-warm);border-radius:12px;font-size:16px;line-height:1.7;color:var(--ink-2);font-weight:600}
.v-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.v-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
@media (max-width:680px){.v-gallery{grid-template-columns:repeat(2,1fr)}}
.vendor-info .vi-row{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px}
.vendor-info .vi-row b{flex-shrink:0;color:var(--ink-2);min-width:88px}
.v-booking{background:var(--paper-warm);border-radius:16px;padding:28px;text-align:center}
.v-booking .v-sec-head{margin-bottom:8px}
.v-booking-lead{font-size:16px;color:var(--ink-2);margin-bottom:18px}
.v-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.v-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:700;font-size:15px;
  background:var(--card);color:var(--ink);border:1.5px solid var(--line-strong);transition:transform .16s var(--ease)}
@media (hover:hover){.v-cta:hover{transform:translateY(-2px)}}
/* 2026-06-11 UIUX：全站唯一的綠色 CTA 改回站方朱紅——一頁一個 accent（Color Consistency Lock），
   訂房按鈕跟全站主行動同一個語言。 */
.v-cta.primary{background:var(--coral-fill);color:#fff;border-color:var(--coral-fill)}
@media (hover:hover){.v-cta.primary:hover{background:var(--coral-deep);border-color:var(--coral-deep)}}

/* ===== 2026-06-05 Joker 預覽：全站 box-shadow 全部移除（要還原刪掉這一段即可） ===== */
*, *::before, *::after{box-shadow:none!important}
/* 鍵盤焦點不能消失（無障礙）：改用 outline 補回 */
:focus-visible{outline:2px solid var(--reward);outline-offset:2px}
/* 視覺隱藏但保留給螢幕閱讀器與 SEO 的內容（如 H1） */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}