/* ==========================================================================
   promos.css — 信用卡新戶活動一覽頁
   v2（2026-07-15）：改回主站設計語言（白底容器＋深藍 header／footer＋主站字級間距），
   只保留兩個可愛點綴——類型徽章糖果色、「最後 N 天」徽章微抖動。其餘沿用主站
   styles.css 的配色／組件配方（見各段落註解標明抄自哪個 class）。
   仍然完全獨立於 styles.css（不 @import、不共用 class），避免跨檔版本耦合；
   顏色數值是手動對照 styles.css 抄過來的，主站配色若改，這裡要跟著手動同步。
   ========================================================================== */

* {
  box-sizing: border-box;
}

:root {
  /* 主站色票（抄自 styles.css，非變數，是實際色碼——主站本身也沒用 CSS 變數，
     這裡建成變數只是方便本檔內部重複使用，改動需對照 styles.css 手動同步）。 */
  --pmc-blue-deep: #1e40af;
  --pmc-blue: #3b82f6;
  --pmc-ink: #333333;
  --pmc-label: #374151;
  --pmc-muted: #6b7280;
  --pmc-green: #059669;
  /* 卡片主數字（.promo-hero-big）專用綠，2026-08-15 站長指定。刻意與 --pmc-green
     分開放：那個是「跟主站回饋率同色」的語意，這個是本頁自己的視覺決定，
     日後只想動其中一個時不會互相牽連。 */
  --pmc-hero-green: #10b981;
  --pmc-white: #ffffff;
  --pmc-page-bg-1: #e4e5e8;
  --pmc-page-bg-2: #b0b2b8;
  --pmc-warn-bg: #1f2937;
  --pmc-border: #e5e7eb;
  /* 白卡上的極淺填色（hero 引言塊）：比 --pmc-page-bg-1 淺一階，只求跟純白有區隔 */
  --pmc-tint: #f5f6f8;
  --pmc-chip-border: #7dd3fc;
  --pmc-chip-text: #0369a1;
  --pmc-chip-hover-bg: #f0f9ff;

  /* 可愛點綴專用：類型徽章糖果色（僅這一處保留糖果配色，其餘元素一律主站風） */
  --pmc-candy-pink-bg: #ffe3ec;
  --pmc-candy-pink-text: #b03a63;
  --pmc-candy-yellow-bg: #fff3c4;
  --pmc-candy-yellow-text: #8a5c00;
  --pmc-candy-mint-bg: #ddfbef;
  --pmc-candy-mint-text: #0b7a56;
  --pmc-candy-default-bg: #ede6ff;
  --pmc-candy-default-text: #5b3fbf;

  --pmc-radius-lg: 16px;
  --pmc-radius-md: 12px;
  --pmc-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --pmc-shadow-container: 0 20px 40px rgba(0, 0, 0, 0.15);
}

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* 頁面底色：抄自 styles.css body{}（灰階漸層，.container 白卡浮在上面）。
   奶油黃整頁背景在 v2 移除。 */
body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--pmc-ink);
  background: linear-gradient(135deg, var(--pmc-page-bg-1) 0%, var(--pmc-page-bg-2) 100%);
  min-height: 100vh;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* ---------------- 白底容器（抄自 styles.css .container）---------------- */

.promos-container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--pmc-white);
  border-radius: var(--pmc-radius-lg);
  box-shadow: var(--pmc-shadow-container);
  overflow: clip;
}

/* ---------------- Header（抄自 styles.css header/.header-top/.header-content）---------------- */

.promos-header {
  background: linear-gradient(135deg, var(--pmc-blue-deep) 0%, var(--pmc-blue) 100%);
  color: white;
  padding: 10px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.promos-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 2026-07-16 v3：整塊 logo+站名包成連回 `/` 的連結（跟 faq.html 一樣，副頁差異——
   promos 本身也不是「首頁」）。顯式蓋掉 UA 底線／visited 紫色，維持白字視覺。 */
.promos-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: white;
}

.promos-header-content:visited {
  color: white;
}

.promos-header-logo {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* 站名文字視覺上跟主站 header h1 同款（字級/粗細一致），但刻意不用 <h1>——
   這頁真正的 SEO H1 是下面 hero 區的「信用卡新戶活動一覽」，同頁兩個 h1
   對 SEO 結構不利，用 span 純視覺呈現即可。 */
.promos-header-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

/* 桌機導覽（2026-07-16 v3，抄自 styles.css .header-page-links／.header-nav-link）：
   純文字＋hover 底線，取代 v2 的半透明按鈕樣式——與 faq.html／index.html 站內導覽同款。
   手機（≤768px）隱藏，改用漢堡抽屜（.promos-sidebar-page-links 兩張卡片）。 */
.promos-header-links {
  display: none;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

@media (min-width: 769px) {
  .promos-header-links {
    display: flex;
  }
}

.promos-header-nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}

.promos-header-nav-link:visited {
  color: rgba(255, 255, 255, 0.92);
}

.promos-header-nav-link:hover {
  border-bottom-color: #ffc933;
  color: #ffffff;
}

/* 2026-07-17 四輪回饋：跟 styles.css 的 .header-nav-link + .header-nav-link
   同步修正——原本 padding-left+border-left 把分隔線留白框進第二顆連結的 box，
   導致 hover/active 底線（border-bottom）比「新戶活動」又低又寬。改用
   margin-left 把留白移出 box，padding-left 只留 2px（跟基礎 padding-right:2px
   對稱），分隔線改用 ::before 畫在 margin 區間內。 */
.promos-header-nav-link + .promos-header-nav-link {
  margin-left: 18px;
  padding-left: 2px;
  border-left: none;
}

.promos-header-nav-link + .promos-header-nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

/* 本頁（新戶活動）在導覽列的 active 視覺：加粗＋底線，抄自 styles.css:119-135
   一帶對 aria-current="page" 的處理精神（主站導覽本身沒有 active 態，這裡是
   promos/faq 兩個副頁互相對照才需要標示「目前在哪一頁」）。此頁「新戶活動」是
   當前頁，不套用 header-nav-link--sparkle 煙花效果（見 styles.css 對應規則）。 */
.promos-header-nav-link[aria-current="page"] {
  font-weight: 800;
  border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* ---------------- 漢堡選單 + 返回首頁（2026-07-16 v3，抄自 styles.css
   .sidebar-toggle-btn；v3 曾試過頭像＋dropdown，站長二輪回饋裁定「副頁頭像做不到
   主站完整功能，意義不大」，撤回改用同款 faq.html 的 .back-home-btn，這裡加
   promos- 前綴）---------------- */

.promos-sidebar-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  color: white;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.promos-sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.promos-back-home-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.promos-back-home-btn:visited {
  color: white;
}

.promos-back-home-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateX(-2px);
}

.promos-back-home-btn svg {
  transition: transform 0.2s;
}

.promos-back-home-btn:hover svg {
  transform: translateX(-2px);
}

/* ---------------- 手機漢堡抽屜（抄自 styles.css .sidebar／.sidebar-overlay 一帶，
   styles.css:6694-7108）---------------- */

.promos-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.promos-sidebar-overlay.active {
  display: block;
  opacity: 1;
}

.promos-sidebar {
  background: #ffffff;
  color: #374151;
  padding: 0;
}

.promos-sidebar-header {
  display: none;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.promos-sidebar-close-btn {
  background: transparent;
  border: none;
  color: #6b7280;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promos-sidebar-close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.promos-sidebar-content {
  padding: 16px;
}

.promos-sidebar-page-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 工具卡（💳）／FAQ 卡（💬）：同構型但配色刻意區隔（2026-07-16 站長二輪回饋：
   兩卡原本都走灰階，長得太像分不出來）。工具卡改用糖果薄荷色系（沿用類型徽章
   已有的 --pmc-candy-mint-* 變數，融入本頁糖果果凍風），FAQ 卡維持原本低調灰階。 */
.promos-sidebar-tool-card,
.promos-sidebar-faq-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.promos-sidebar-tool-card {
  background: var(--pmc-candy-mint-bg);
  border: 1px solid #b7f0d5;
}

.promos-sidebar-tool-card:hover {
  background: #c9f5e2;
  border-color: #9fe9c8;
}

.promos-sidebar-faq-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.promos-sidebar-faq-card:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.promos-sidebar-tool-card-emoji,
.promos-sidebar-faq-card-emoji {
  font-size: 18px;
  line-height: 1;
}

.promos-sidebar-tool-card-text,
.promos-sidebar-faq-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.promos-sidebar-tool-card-text strong {
  font-size: 0.85rem;
  color: var(--pmc-candy-mint-text);
}

.promos-sidebar-tool-card-text small {
  font-size: 0.7rem;
  color: var(--pmc-candy-mint-text);
}

.promos-sidebar-faq-card-text strong {
  font-size: 0.85rem;
  color: #4b5563;
}

.promos-sidebar-faq-card-text small {
  font-size: 0.7rem;
  color: #9ca3af;
}

.promos-sidebar-tool-card-arrow {
  color: var(--pmc-candy-mint-text);
  font-weight: 700;
}

.promos-sidebar-faq-card-arrow {
  color: #9ca3af;
  font-weight: 700;
}

/* 桌機（≥769px）：抽屜整組隱藏——這頁沒有 .app-layout 常駐左欄，不隱藏會版面壞
   （同 faq.css 的處理，見 data-pipeline.md 第 9 節）。 */
@media (min-width: 769px) {
  .promos-sidebar,
  .promos-sidebar-overlay,
  .promos-sidebar-toggle-btn {
    display: none !important;
  }
}

/* 手機（≤768px）：抽屜滑出式，比照 styles.css:7071-7108 的 .sidebar/.sidebar.open。 */
@media (max-width: 768px) {
  .promos-sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .promos-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 85vw;
    max-width: 360px;
    height: 100vh;
    max-height: 100vh;
    z-index: 950;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: none;
  }

  .promos-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }

  .promos-sidebar-header {
    display: flex;
  }
}

/* ---------------- Main / hero ---------------- */

.promos-main {
  padding: 16px 24px 28px;
}

/* 麵包屑（2026-07-16 新增）：低調小字，「首頁」連回主站，當前頁純文字。
   結構化資料見 pmcBuildBreadcrumbJsonLd_() 輸出到 <head> 的 BreadcrumbList。 */
.promos-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 0;
  font-size: 0.8rem;
  color: #9ca3af;
}

.promos-breadcrumb a {
  color: #9ca3af;
  text-decoration: none;
}

.promos-breadcrumb a:hover {
  color: #6b7280;
  text-decoration: underline;
}

.promos-breadcrumb [aria-current="page"] {
  color: #6b7280;
  font-weight: 600;
}

.promos-breadcrumb-sep {
  color: #d1d5db;
}

.promos-hero {
  padding: 20px 4px 8px;
}

.promos-hero h1 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pmc-ink);
  letter-spacing: 0.01em;
}

/* 淡底卡片引言（3 個 mockup 選項中站長選定的 Option 3）：跟白卡本體有區隔，
   但沒有邊框/引號那麼「裝飾」，用主站灰階頁面底色當淡底。 */
.promos-hero-intro {
  /* 淡底區塊本身橫跨 main 內寬（2026-07-30）：h1、搜尋框、篩選列、卡片格線都是滿版，
     這塊原本 max-width: 44em 停在約六成寬，視覺上像沒對齊的殘塊。
     行長舒適度改由下面 p 的 max-width 負責——區塊滿版、字仍不過長。 */
  margin: 14px 0 4px;
  padding: 12px 16px;
  background: var(--pmc-tint);
  border-radius: 10px;
}

.promos-hero-intro p {
  /* 行長不再用 max-width 硬切（2026-07-30 移除 62em）：淡底區塊滿版之後，字寬上限會讓
     每行都在區塊右緣前就斷掉、看起來像沒排完。改由第二段文案自己用 <br> 指定斷行點
     （站長指定：「…幫你一頁比完多家銀行」／「還能一併查看…」），桌機兩行、右緣自然。
     生成端 apps-script/cards-export.gs 的 generatePromosPageHtml() 同步。 */
  margin: 0 0 6px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--pmc-muted);
  /* pretty＝避免最後一行只剩一兩個字的孤字（手機實測原本會掉出單獨一行「件。」）。
     刻意不用 balance：中文沒有詞間空白，balance 為了兩行等長會硬切在詞中間
     （實測切成「難的不／是找到活動」），比孤字更難讀。 */
  text-wrap: pretty;
}

/* 第一句是整頁的主張、第二句是說明——給層次，不要兩段同樣大小同樣灰糊成一塊。 */
.promos-hero-intro p:first-child {
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pmc-ink);
}

.promos-hero-intro p:last-child {
  margin-bottom: 0;
}

/* ---------------- 卡片名稱搜尋框（2026-07-22）----------------
   抄自 styles.css .merchant-search-box / .merchant-input-wrap / .merchant-clear-btn
   的配方（白底、粗細框、聚焦藍光暈、自製清除 ✕ 鈕，關掉原生 search cancel），
   顏色改用本頁 --pmc-* 變數。互動見 promos.js setupSearch()。 */
.promos-search-box {
  margin: 4px 0 14px;
}

/* 刻意低調（2026-07-22 站長回饋：不是必須看到的東西，用戶需要時找得到就好）：
   1px 細框（不用主站搜尋框的 3px 粗框）、小圓角、淡灰底線感，聚焦才給輕微藍框。 */
.promos-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--pmc-border);
  border-radius: 10px;
  background: var(--pmc-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.promos-search-input-wrap:focus-within {
  border-color: var(--pmc-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.10);
}

/* 單色放大鏡 SVG（Bootstrap search icon，同 header 其他圖示同一套線條）：絕對定位
   在框內左側、淡灰不搶眼，pointer-events:none 讓點擊穿透到底下的 input（點圖示
   等於點輸入框）。刻意不用彩色 🔍 emoji——站長回饋太顯眼（2026-07-22）。 */
.promos-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #b0b5bd;
  pointer-events: none;
}

#promos-search-input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  padding: 8px 38px 8px 34px; /* 左 34px 讓開放大鏡圖示、右 38px 讓長輸入不壓在清除 ✕ 底下 */
  font-family: inherit;
  font-size: 0.8rem; /* 低調小字 */
  color: var(--pmc-ink);
}

/* placeholder 更淡更小，強調「非必要、需要時才找」的低調定位 */
#promos-search-input::placeholder {
  color: #9ca3af;
  font-size: 0.8rem;
}

#promos-search-input:focus {
  outline: none;
  box-shadow: none;
}

/* 原生 type=search 的清除叉／裝飾關掉，改用下方跨瀏覽器一致的自製 ✕ 鈕 */
#promos-search-input::-webkit-search-cancel-button,
#promos-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.promos-search-clear-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 50%;
  color: #9ca3af;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.promos-search-clear-btn:hover {
  background: #f3f4f6;
  color: #4b5563;
}

/* [hidden] 的 UA 樣式被上面 display:inline-flex 蓋過（同 specificity 下 author
   勝），這裡明確補回 display:none，否則沒有輸入時 ✕ 仍會露出（跟
   #promos-owned-filter-group[hidden] 同一個坑）。 */
.promos-search-clear-btn[hidden] {
  display: none;
}

/* ---------------- Controls: filter chips + sort ---------------- */

.promos-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 20px;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: var(--pmc-radius-md);
}

/* 「類型」／「排序」兩組容器：各自一個 label + chips 列，讓兩排 chips 一眼看出
   是不同的操作（2026-07-15 站長回饋：原本兩排長得一樣，分不出差異） */
.promos-control-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.promos-control-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pmc-muted);
  letter-spacing: 0.02em;
}

.promos-filter-chips,
.promos-sort-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 「隱藏我持有的卡片」篩選（2026-07-16 第四輪站長回饋）：generatePromosPageHtml()
   一律先輸出 hidden（生成當下不知道訪客/用戶持有哪些卡），promos.js 偵測到
   localStorage 有持有資料才拿掉 hidden。.promos-control-group 已設
   display:flex，同 specificity 下 author 樣式蓋過 [hidden] 的 UA 樣式
   （跟 .promo-ending-badge 同一個坑，見上方註解），這裡明確補一條規則覆蓋回去，
   否則沒有持有資料時這組控制項還是會露出來。 */
#promos-owned-filter-group[hidden] {
  display: none;
}

.promos-owned-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pmc-chip-text);
  cursor: pointer;
  user-select: none;
}

.promos-owned-filter-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pmc-blue);
  cursor: pointer;
}

/* 「?」說明：絕對定位浮層，不推開版面（2026-07-16 站長回饋）。
   浮層錨定在整個篩選列（group）而非小小的「?」上——錨在「?」時窄螢幕會
   伸出 .promos-container 的 overflow:clip 邊界被裁掉（站長截圖實證）。 */
#promos-owned-filter-group {
  position: relative;
}

.promos-owned-help-wrap {
  display: inline-flex;
  align-items: center;
}

.promos-owned-help-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--pmc-chip-border);
  border-radius: 999px;
  background: var(--pmc-white);
  color: var(--pmc-chip-text);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.promos-owned-help-btn:hover {
  background: var(--pmc-chip-hover-bg);
  border-color: var(--pmc-blue);
}

.promos-owned-help-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
  max-width: 340px;
  z-index: 60;
  padding: 10px 12px;
  background: var(--pmc-warn-bg);
  color: #f9fafb;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.55;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.promos-owned-help-pop[hidden] {
  display: none;
}

.promos-owned-help-pop strong {
  color: #fbbf24;
}

/* 篩選鈕／排序鈕：抄自 styles.css .quick-search-btn 配方（白底細框圓角），
   不再用果凍漸層。active 用主站藍底白字。 */
.promo-chip,
.promo-sort-btn {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--pmc-chip-border);
  border-radius: 16px;
  padding: 6px 14px;
  background: var(--pmc-white);
  color: var(--pmc-chip-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.promo-chip:hover,
.promo-sort-btn:hover {
  background: var(--pmc-chip-hover-bg);
  border-color: var(--pmc-blue);
  transform: translateY(-1px);
}

.promo-chip.is-active,
.promo-sort-btn.is-active {
  background: linear-gradient(135deg, var(--pmc-blue-deep) 0%, var(--pmc-blue) 100%);
  border-color: var(--pmc-blue-deep);
  color: white;
}

/* ---------------- Promo grid + cards ---------------- */

.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.promo-card {
  position: relative;
  background: var(--pmc-white);
  border: 1px solid var(--pmc-border);
  border-radius: var(--pmc-radius-lg);
  box-shadow: var(--pmc-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease;
}

.promo-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.promo-card[hidden] {
  display: none;
}

/* 2026-08-15：卡片頂部的類型色條（.promo-type-bar）整組移除。
   站長裁定「彩色頂條」太有 AI 生成模板的味道，本站明令不再使用這個手法
   （通則寫在 docs/project/ui-display.md）。類型資訊仍由卡片內的
   .promo-type-badge 表達，色條只是同一份資訊的裝飾性重複。 */

.promo-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* 2026-07-16 第五輪站長回饋：header 改兩列——.promo-card-topline（類型徽章＋
   「立即申辦」，靠右）在上，.promo-card-mainline（卡圖＋卡名＋chevron）在下。
   topline 跟 mainline 是完全不同的兩列，CTA 按鈕（topline 右側）跟 chevron
   （mainline 右側、垂直置中）天生落在不同列，不需要額外調校就不會重疊。 */
.promo-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.promo-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.promo-card-topline .promo-apply-btn {
  flex-shrink: 0;
}

.promo-card-mainline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 卡圖左上角保留——站長點名喜歡，維持原尺寸與位置 */
.promo-card-cardimg {
  width: 64px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #f9fafb;
  flex-shrink: 0;
  padding: 4px;
  border: 1px solid var(--pmc-border);
}

.promo-card-headline {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ⓘ 卡片詳情深連結：對齊主站結果卡 .card-detail-peek-btn 的淺藍膠囊＋「卡片詳情」
   文字（原為低調灰圓 i，用戶反映太不明顯、找不到）。HTML 由 Apps Script 生成、
   內容只有 ⓘ 字符，故標籤文字用 ::after 補上，不需改動生成端。 */
.promo-card-info-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 9px 0 7px;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.promo-card-info-btn::after {
  content: '卡片詳情';
}

.promo-card-info-btn:hover {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #60a5fa;
}

.promo-type-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  /* 2026-07-16 第五輪：badges 現在自己一列（.promo-card-topline），不再疊在卡名
     上方，原本用來跟卡名留白的 margin-bottom 已無意義；改給 flex:1/min-width:0
     讓徽章多時能自然換行收縮，不會把右側「立即申辦」按鈕擠出容器。 */
  flex: 1;
  min-width: 0;
  /* 2026-08-15 站長裁定：類型徽章要「貼齊卡框的 label」，不要獨立浮著的 pill。
     作法＝用負 margin 抵銷 .promo-card-body 的上／左 padding，把整排推到卡片邊框上；
     .promo-card 有 overflow:hidden ＋ border-radius，左上角會自動被卡片圓角切齊，
     不用自己算圓角。
     ⚠️ 這兩個負值必須跟 .promo-card-body 的 padding 一致——手機版 padding 不同，
        下面 @media (max-width: 768px) 有一組對應值，**改任何一邊都要一起改**。 */
  margin: -16px 0 0 -18px;
}

/* 可愛點綴 1/2：類型徽章維持糖果色，其餘元素一律收斂成主站風 */
.promo-type-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 11px;
  /* 外側三角切齊卡框、只留內側（右下）圓角＝「從邊框長出來的 label」。
     兩個徽章相鄰時（少數卡片）會連成一條分段色帶，這是預期的樣子。 */
  border-radius: 0 0 9px 0;
  color: var(--pmc-candy-default-text);
  background: var(--pmc-candy-default-bg);
  white-space: nowrap;
}

/* 倒數徽章跟著容器被拉上去了，用等量的正 margin 推回原位——
   「貼邊」是類型 label 專屬的樣子，紅色 pill 貼在卡框上會很奇怪。
   ⚠️ 這個值＝上面 .promo-type-badges 負 margin 的絕對值，改一邊要改兩邊。 */
.promo-ending-badge {
  margin-top: 16px;
}

.promo-type-badge--gift { background: var(--pmc-candy-pink-bg); color: var(--pmc-candy-pink-text); }
.promo-type-badge--bonus { background: var(--pmc-candy-yellow-bg); color: var(--pmc-candy-yellow-text); }
.promo-type-badge--voucher { background: var(--pmc-candy-mint-bg); color: var(--pmc-candy-mint-text); }
.promo-type-badge--default { background: var(--pmc-candy-default-bg); color: var(--pmc-candy-default-text); }

/* 「最後 N 天」倒數徽章：可愛點綴 2/2 靠 wiggle 動畫保留，不是靠顏色。
   2026-07-15 bug fix：生成器輸出的是一律存在、初始無文字的 <span>（給
   promos.js 即時填字），舊版這裡直接 display:inline-block 會蓋掉瀏覽器對
   [hidden] 的預設 display:none（author 樣式優先權高於 UA 樣式，即使
   specificity 相同）——結果沒有任何倒數活動時，每張卡還是會顯示一條有底色
   /內距/wiggle 動畫、但沒有文字的紅色殘影。改用 :empty 當顯示開關（[hidden]
   一併覆蓋，雙保險），animation 也只在非空狀態套用，徹底不可見。 */
/* 紅色細框 pill 徽章（2026-07-19 站長定案）：紅字＋1px 紅色細 pill 框、透明底，
   移除 2026-07-17 的 pixel 黑描邊（8 方向 text-shadow）。文案「最後 N 天」
   （promos.js 填字，無驚嘆號；0 天維持「今天截止！」）。
   靠左的類型徽章之間多留一點距離，用 margin-left（.promo-type-badges 本身
   gap 只有 6px）。 */
.promo-ending-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 1px 9px;
  color: #dc2626;
  border: 1px solid #dc2626;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  display: inline-block;
  transform-origin: 50% 90%;
}

.promo-ending-badge:empty,
.promo-ending-badge[hidden] {
  display: none;
}

.promo-ending-badge:not(:empty) {
  animation: promo-ending-wiggle 4.5s ease-in-out infinite;
}

/* 每 4.5 秒輕輕晃一下（多數時間靜止），不是持續搖晃——避免視覺干擾 */
@keyframes promo-ending-wiggle {
  0%, 90%, 100% { transform: rotate(0deg); }
  91% { transform: rotate(-8deg); }
  92.5% { transform: rotate(7deg); }
  94% { transform: rotate(-5deg); }
  95.5% { transform: rotate(4deg); }
  97% { transform: rotate(-2deg); }
  98.5% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-ending-badge {
    animation: none;
  }
}

.promo-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pmc-ink);
  overflow-wrap: break-word;
  /* 2026-07-16 第四輪站長回饋：標題/hero 用 balance 避免最後一行只剩單字（如
     「首刷禮3選1」的「1」單獨掉到下一行）——不支援的瀏覽器（<Chromium 117）
     自動忽略，退回原本的自然斷行，無害。 */
  text-wrap: balance;
}

/* 展開 chevron：加大點擊/視覺目標至 44×44（原本只是個小箭頭字元） */
.promo-card-chevron {
  display: none;
  flex-shrink: 0;
  align-self: center;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--pmc-muted);
  transition: transform 0.25s ease;
}

.promo-card-chevron::before {
  content: '▾';
}

.promo-card.is-open .promo-card-chevron {
  transform: rotate(180deg);
}

/* 摘要行——顯示 new_customer_summary（活動摘要），不是贈品內容；字級/顏色比照
   主站內文，不再用粉色跳色強調。2026-07-15 站長回饋：拿掉單行 ellipsis 截斷，
   完整顯示摘要（卡片收合態高度會因此變動，可接受）。2026-07-15 第三輪站長
   回饋：桌機／手機都要顯示這一行（不再只在手機收合態靠 media query 打開），
   因為展開後的詳情區塊已經移除重複的 .promo-card-summary，這行是全頁唯一的
   摘要文字來源；同時字級從 14px 升到 16px，可感知地變大、跟卡片標題層次更協調。 */
.promo-quick-highlight {
  display: block;
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--pmc-label);
  overflow-wrap: break-word;
  /* 2026-07-16 第四輪站長回饋：內文用 pretty 避免單字孤行（orphan），例如
     「首刷禮3選1」的「1」單獨掉到下一行——不支援的瀏覽器自動忽略，無害。 */
  text-wrap: pretty;
}

/* 帶宣傳圖縮圖的卡片：縮圖（左）＋摘要文字（右）橫排一列（2026-07-15 第三輪
   站長回饋）。這個容器由 cards-export.gs 的 pmcRenderPromoCard_ 只在有縮圖時
   才輸出（見 highlightRowHtml），無圖的卡完全沒有這個容器、不佔任何空間。
   容器本身刻意放在 .promo-card-toggle 之外（跟舊版縮圖位置一樣），理由見
   cards-export.gs 對應註解：promos.js 的點擊監聽都掛在 document 上，
   stopPropagation 攔不住同層另一個監聽器，縮圖若塞進 toggle 內點擊會誤觸展開。 */
.promo-highlight-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 0;
}

.promo-highlight-row .promo-gift-thumb-row {
  margin: 0;
}

.promo-highlight-row .promo-quick-highlight {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* ---------------- 好康 hero（重點好康區）---------------- */
/* 保留但收斂：大字重點仍醒目，底色一律極淡主站灰（2026-07-19 站長定案：取消
   gift 粉／voucher 綠／bonus 黃的類型底色，全部統一淺灰），回饋率一律用主站綠 */

.promo-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promo-hero-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--pmc-radius-md);
  background: #f9fafb;
  border: 1px solid var(--pmc-border);
}

/* 2026-07-15 第三輪站長回饋：定額金額／回饋率的大字＋用途小字改成同一行橫排
   （原本是上下兩行），用 baseline 對齊讓大字數字與小字說明看起來像一句話。 */
.promo-hero-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.promo-hero-big {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--pmc-ink);
  overflow-wrap: break-word;
  /* hero 大字同樣套 balance（見 .promo-card-title 的說明），不支援的瀏覽器無害忽略 */
  text-wrap: balance;
}

/* 回饋率／金額的綠字。2026-08-15 站長指定改用 #10b981（比原本的 #059669 亮一階）。
   ⚠️ 這裡因此**不再**與主站 styles.css 的 .cashback-rate-num（#059669）同色——
      是刻意的，不是漏改；主站那邊要不要跟進由站長決定。 */
.promo-hero-item--voucher .promo-hero-big,
.promo-hero-item--bonus .promo-hero-big {
  color: var(--pmc-hero-green);
}

.promo-hero-item--gift .promo-hero-big {
  color: var(--pmc-label);
}

/* 贈品內容是商品名稱（可能多行、偏長），字級比金額/百分比數字克制一點；
   行距拉開讓多行清單好讀（2026-07-16 第六輪站長回饋） */
.promo-hero-big--gift {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
}

.promo-hero-small {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--pmc-muted);
  text-wrap: balance;
}

/* 活動宣傳圖小縮圖＋lightbox（2026-07-15 新增）：獨立於可收合的
   .promo-card-toggle 之外，手機收合態、桌機都看得到；點擊由 promos.js 開
   lightbox 看原圖。放在 .promo-card-toggle 與 CTA 按鈕之間，收合態摘要行
   下方。 */
.promo-gift-thumb-row {
  display: flex;
  margin: 6px 0 0;
}

.promo-gift-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--pmc-border);
  border-radius: var(--pmc-radius-md);
  overflow: hidden;
  background: #f9fafb;
  cursor: zoom-in;
}

.promo-gift-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-gift-thumb:hover {
  border-color: var(--pmc-blue);
}

.promo-gift-thumb:focus-visible {
  outline: 3px solid var(--pmc-blue);
  outline-offset: 2px;
}

/* Lightbox：全螢幕深色遮罩置中放大圖，promos.js 用 .is-open 切換顯示；
   點遮罩／關閉鈕／Esc 都會關閉（行為見 promos.js setupGiftLightbox）。 */
.promo-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.86);
  z-index: 1000;
}

.promo-lightbox.is-open {
  display: flex;
}

.promo-lightbox-img {
  display: block;
  max-width: min(92vw, 720px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.promo-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.promo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.promo-lightbox-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* 卡片詳情內嵌彈窗（2026-07-16，方案 A）：點 ⓘ 不開新分頁，改在這個全螢幕遮罩裡用
   常駐 iframe 載入主站 /?start&embed=1 顯示 #card-detail-modal（見 promos.js
   setupCardDetailOverlay）。z-index 故意高於 .promo-lightbox（1000），避免兩者疊在一起
   時被蓋住。手機全版面貼齊螢幕（模擬原生彈窗）；桌機留邊距＋置中直式卡片，寬度貼近
   主站 modal-content 本身的比例，視覺上像原生彈窗而不是「網頁裡的網頁」。 */
/* 遮罩本身透明：變暗交給 iframe 內 #card-detail-modal 自己的半透明遮罩，
   這樣本頁內容會像主站一樣「透出來但變暗」，而不是被蓋成一片空白。
   （載入中還沒有東西可透時，才由下面的 :has() 規則暫時上一層深色底） */
.promo-detail-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1200;
}

/* 尚未 ready（spinner 還在）時給深色底，讓白色 spinner 看得見 */
.promo-detail-overlay:has(.promo-detail-spinner:not([hidden])) {
  background: rgba(15, 23, 42, 0.86);
}

.promo-detail-overlay.is-open {
  display: flex;
}

.promo-detail-overlay-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.promo-detail-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* 必須透明：原本 #fff 會把 iframe 整塊塗白，桌機看起來多一個白框、
     手機則整個背景變空白（embed 模式的 body 本來就已是透明背景） */
  background: transparent;
}

.promo-detail-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: promo-detail-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes promo-detail-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 桌機不再把 iframe 框成一個白色圓角方塊：那個外框加上 iframe 內
   #card-detail-modal 自己的視窗，看起來會是「兩層 modal 框」（2026-07-27 修）。
   iframe 改滿版，讓詳情彈窗像在主站一樣自己置中、外圍只有半透明遮罩。 */
@media (min-width: 640px) {
  .promo-detail-overlay-inner {
    width: 100%;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-detail-spinner { animation-duration: 1.6s; }
}

.promo-card-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-meta-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  align-items: baseline;
}

/* label 樣式：抄自主站「活動期間」一類 dt 的字級／字重／顏色，全站統一，
   備註標題也照這個樣式（見下面 .promo-notes-label），不再用粉色跳色 */
.promo-meta-row dt {
  font-weight: 700;
  color: var(--pmc-label);
  white-space: nowrap;
}

.promo-meta-row dd {
  margin: 0;
  color: var(--pmc-ink);
  overflow-wrap: break-word;
  /* 條件/新戶定義/活動期間等內文同樣套 pretty，見 .promo-quick-highlight 說明 */
  text-wrap: pretty;
}

/* 新戶定義：直接顯示全文，不再收合 */
.promo-definition-row dd {
  color: var(--pmc-ink);
}

/* 適用通路（2026-07-16 第五輪站長回饋）：跟備註同一套收合機制（見下方
   .promo-notes-text 註解），但門檻是 3 行不是 2 行——通路清單常常比備註短句
   長很多。包一層 <span class="promo-merchants-value">（見 apps-script/
   cards-export.gs pmcRenderPromoCard_ 的 clampClass）而不是直接把 class 掛在
   <dd> 上：<dl> 內容模型只允許 dt/dd 當子元素，promos.js 的「展開 ▾」toggle
   按鈕必須插在 <dd> 內部（這個 span 之後），不能像備註那樣直接插在量測目標的
   afterend——備註的量測目標是 <div>，不受 <dl> 內容模型限制，這裡不一樣。
   display:block 讓它在未收合狀態也是塊級（撐滿 dd 寬度，量測/換行行為跟
   notes-text 一致）；line-height 明確設定（不是靠 .promo-meta-row 繼承），
   JS scrollHeight 量測才穩定。 */
.promo-merchants-value {
  display: block;
  line-height: 1.6;
  /* 藍色粗體，對齊主站搜尋結果的 .matched-merchant strong（2026-07-18 站長定案） */
  color: var(--pmc-blue);
  font-weight: 700;
}

.promo-merchants-value.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 備註：2026-07-15 改版，不再用 <details> 無條件收合——標題樣式跟「活動期間」
   等 label 完全一樣（同字級同色，不用粉色突出）；內文預設完整渲染，
   promos.js 量測 scrollHeight 超過兩行高才加上 .is-clamped（clamp 成兩行）
   ＋「展開 ▾」toggle 按鈕（見 promos.js setupNotesClamp）；兩行內完全不出現
   任何 toggle。line-height 用固定數值（不是 normal），量測才準。 */
.promo-notes {
  margin-top: 2px;
  font-size: 14px;
}

.promo-notes-label {
  font-weight: 700;
  color: var(--pmc-label);
}

.promo-notes-text {
  margin: 6px 0 0;
  color: var(--pmc-muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.promo-notes-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-notes-toggle {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--pmc-muted);
  cursor: pointer;
}

.promo-notes-toggle:hover,
.promo-notes-toggle:focus-visible {
  color: var(--pmc-blue);
}

/* 收合／展開的可折疊容器：用 grid-template-rows 0fr→1fr 做高度動畫（比 max-height
   更準確，不用猜內容高度上限）。桌機（預設，見檔尾 min-width:769px 以下都不受
   media query 限制）grid-template-rows 固定 1fr＝一律展開，跟收合機制無關——桌機
   版型維持「全部展開」。收合行為只在 ≤768px 的 media query 內生效。 */
.promo-card-detail {
  display: grid;
  grid-template-rows: 1fr;
}

.promo-card-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  overflow: hidden;
  min-height: 0;
}

/* 收合/展開觸控區只在手機有作用；桌機卡片永遠展開，游標與可點語意都要拿掉
   （2026-07-16 站長回饋：桌機整塊 hover 出現手型、點了卻沒反應＋醜藍框） */
.promo-card-toggle {
  border-radius: 12px;
}

@media (max-width: 768px) {
  /* 展開/收合只由箭頭觸發（見 promos.js），所以手型游標放在箭頭上，
     整塊 toggle 不再給可點暗示，避免「看似整張可點、點了才知道只有箭頭有用」 */
  .promo-card-toggle {
    cursor: default;
  }

  .promo-card-toggle:focus-visible {
    outline: 3px solid var(--pmc-blue);
    outline-offset: 3px;
  }
}

/* 立即申辦按鈕：奶油蛋蜜「糖衣亮面」版（2026-07-19 站長色系決選定案，mockup
   代號 C3b）：蛋黃橘→奶油黃斜向漸層＋頂部透明亮膜＋1.5px 細白內圈（糖衣），
   扁平無厚底、深蜜糖字。主站三顆申辦按鈕（styles.css .card-apply-cta-btn 家族）
   同日改用同配方——改配方時兩檔要手動同步。
   hover 效果見檔尾「申辦按鈕光影」區；active＝原地縮小回彈（無位移） */
.promo-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: #7a4e00;
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
  background-image:
    radial-gradient(130% 70% at 50% 0%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(115deg, #ffce66 0%, #ffe28a 55%, #fff0bd 100%);
  border: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.75),
    0 3px 10px rgba(255, 183, 77, 0.55);
  transition: transform 0.15s ease, box-shadow 0.3s ease, filter 0.25s ease;
}

.promo-apply-btn:active {
  transform: scale(0.95);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(255, 183, 77, 0.45);
}

/* ---------------- Empty state ---------------- */

.promos-empty-state {
  text-align: center;
  color: var(--pmc-muted);
  font-weight: 600;
  padding: 40px 0;
}

/* ---------------- Footer（抄自 index.html .finance-warning-row /
   .social-media-footer——主站改動這兩塊時，這裡要手動同步）---------------- */

/* 信用卡警語橫條，樣式抄自 styles.css .finance-warning-row，放在 footer 上方，
   跟主站「精選活動區下方」同款用法：一整行深色警語 */
.promos-warning-row {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 24px;
  background: var(--pmc-warn-bg);
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 0 0 12px 12px;
  margin-top: 16px;
}

/* 抄自 styles.css .social-media-footer 一整段（含 .social-media-container /
   .social-section 等），配色/間距逐一比照 */
.social-media-footer {
  max-width: 1200px;
  margin: 20px auto 10px;
  padding: 0 24px;
  text-align: center;
  min-height: 100px;
}

.social-media-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
}

.social-section,
.sponsor-section,
.explore-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.social-media-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.social-media-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.social-link.threads:hover {
  background: #000000;
  border-color: transparent;
  color: white;
}

.social-link.sponsor:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: white;
}

/* 站內頁連結 hover 上色（抄自 styles.css 同名規則，主站改動需同步） */
.social-link.promos:hover {
  background: linear-gradient(180deg, #ffe066 0%, #ffc933 100%);
  border-color: transparent;
  color: #7a4e00;
}

.social-link.faq:hover {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  border-color: transparent;
  color: white;
}

.social-link.about:hover {
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  border-color: transparent;
  color: white;
}

.social-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.social-link:hover svg {
  transform: scale(1.1) rotate(5deg);
}

.social-link.sponsor:hover svg {
  transform: scale(1.2);
  animation: promos-heartbeat 0.6s ease-in-out;
}

@keyframes promos-heartbeat {
  0%, 100% { transform: scale(1.2); }
  50% { transform: scale(1.35); }
}

.social-text {
  font-weight: 500;
  font-size: 12px;
}

/* 最後資料更新日期（抄自 styles.css .data-update-footer） */
/* 「資料更新於」戳章（2026-07-23 從頁尾 footer 搬到 controls 下方、grid 上方，讓用戶
   一眼看到新鮮度）。與 controls／grid 同層（.promos-main 內），自動對齊、不需 max-width；
   右對齊小灰字，不搶排版。 */
.promos-data-update {
  margin: -8px 0 14px;
  text-align: right;
  font-size: 12px;
  color: var(--pmc-muted);
}

/* 回到頂部浮標（抄自 styles.css .back-to-top-btn，2026-07-16 新增）：手機限定
   （見下方 Responsive 區塊的 .is-visible 規則），捲動超過門檻才顯示，行為邏輯
   在 promos.js setupBackToTopButton。 */
.promos-back-to-top-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(107, 114, 128, 0.2);
  background: rgba(107, 114, 128, 0.15);
  color: #374151;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  z-index: 999;
  transition: all 0.2s ease;
  /* 桌機隱藏；手機顯示由 Responsive 區塊的 .is-visible 規則接手 */
  display: none;
}

.promos-back-to-top-btn:active {
  transform: scale(0.96);
}

/* ---------------- Responsive ---------------- */
/* ≤768px＝手機版「摘要卡可展開」版型：卡片預設收合成一行重點好康＋申辦鈕的摘要條，
   點卡片（除申辦鈕外）展開看完整內容。桌機（預設樣式，不在這個 media query 內）
   維持原本全部展開的 grid 卡片版型不變。 */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .promos-header {
    padding: 12px 16px;
  }

  /* 手機版 header 固定單行（2026-07-23 站長回饋）：原本 .promos-header-top 用
     justify-content:space-between + flex-wrap:wrap，窄螢幕（375px iPhone SE）三顆
     ——漢堡／logo＋站名／返回首頁——擠不下時「返回首頁」換到第二行，剩下兩顆被
     space-between 推開，logo＋站名貼到右緣（iPhone 13 的 390px 剛好塞得下才沒事）。
     改成不換行、靠左起排，logo＋站名緊貼漢堡右側，「返回首頁」用 margin-left:auto
     推到最右；站名 min-width:0 + 省略號，極窄時截斷而非撐破行。 */
  .promos-header-top {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
  }

  .promos-header-content {
    min-width: 0;
  }

  .promos-header-logo {
    height: 32px;
  }

  /* 手機收窄站名文字，只留 logo（比照主站 header 手機版把 h1 視覺隱藏的做法，
     這裡文字本來就短，改成截斷＋縮小字級，不整段隱藏，因為沒有 auth 區搶空間） */
  .promos-header-title {
    font-size: 1.02rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .promos-back-home-btn {
    margin-left: auto;
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .promos-back-home-btn svg {
    width: 16px;
    height: 16px;
  }

  .promos-main {
    padding: 10px 12px 18px;
  }

  .promos-hero {
    padding: 12px 4px 4px;
  }

  .promos-hero h1 {
    font-size: 1.15rem;
    margin-bottom: 4px;
  }

  .promos-hero-intro {
    padding: 10px 12px;
  }

  .promos-hero-intro p {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  /* 領句手機版收斂一級：桌機的 0.95rem 在手機會逼近 h1（1.15rem），層次糊掉 */
  .promos-hero-intro p:first-child {
    font-size: 0.88rem;
  }

  .promos-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  /* 篩選 chips／排序切換：改成可換行全部顯示，不橫向捲動（2026-07-15 站長回饋：
     原本橫向捲動的 chips 在 390px 螢幕上會被裁切、看不出還有更多選項可滑）。
     .promos-control-group 各自成一列。
     2026-07-16 第五輪站長回饋：原本 .promos-control-group 沿用桌機的
     flex-wrap:wrap，手機窄版面下 label（「類型」/「排序」/「篩選」）跟後面
     的 pills/checkbox 容器擠不進同一行時，會整組換行——結果整個 pills 容器
     掉到 label 下一行，而不是 pills 自己換行。改成 flex-wrap:nowrap 讓
     label／內容容器兩者固定同一行起頭，內容容器再用 flex:1+min-width:0
     接手自己內部換行（pills 換行時仍從 label 右側那一欄開始，不會整個掉到
     下一行）。三組（類型/排序/篩選）都是「label + 一個內容容器」的相同
     結構，套同一條規則即可視覺一致。 */
  .promos-control-group {
    width: 100%;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .promos-filter-chips,
  .promos-sort-toggle {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 「隱藏我持有的卡片」label 不吃滿整行（2026-07-23 站長回饋）：原本併入上面
     flex:1 1 auto，label 撐滿整列 → 把後面同層的「?」說明鈕（.promos-owned-help-wrap）
     推到最右緣。改成自然寬度（flex-grow:0），讓「?」緊貼 label 右側；min-width:0
     保留可縮性，避免極窄螢幕撐破 group 的 nowrap 行。 */
  .promos-owned-filter-label {
    flex: 0 1 auto;
    min-width: 0;
  }

  .promos-filter-chips,
  .promos-sort-toggle {
    flex-wrap: wrap;
    overflow-x: visible;
    max-width: 100%;
  }

  .promo-chip,
  .promo-sort-btn {
    font-size: 0.72rem;
    padding: 5px 11px;
    white-space: nowrap;
  }

  .promo-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 收合態卡片目標高度 ~110-130px：下面每個元素都刻意壓縮，一屏（390x844）
     才塞得下 4-5 張。展開後（.promo-card-detail 撐開）不受這裡影響。 */
  .promo-card-body {
    padding: 8px 10px 10px;
    gap: 0;
  }

  .promo-card-cardimg {
    width: 40px;
    height: 28px;
    padding: 3px;
  }

  /* 2026-07-16 第五輪：header 是 topline（徽章＋按鈕）／mainline（卡圖＋卡名＋
     chevron）兩列，手機版面較擠，列間距收窄成 4px；mainline 內部（圖／卡名／
     chevron）維持跟桌機一樣的 gap 判斷，這裡沿用原本收合態緊湊值改到
     mainline 上。 */
  .promo-card-header {
    gap: 4px;
  }

  .promo-card-mainline {
    gap: 8px;
  }

  /* 貼邊 label 的手機版對應值：負 margin 必須等於上面 .promo-card-body 的
     padding（8px 10px 10px）的上／左，不然 label 會浮在半空或超出卡框 */
  .promo-type-badges {
    gap: 0;
    margin: -8px 0 0 -10px;
  }

  /* 2026-08-15 站長要求手機版字加大：0.58rem（實測 9.28px）小到吃力，
     拉到 0.72rem（≈11.5px，與桌機同級）。倒數徽章同一列、一起放大才不會失衡。 */
  .promo-type-badge,
  .promo-ending-badge {
    font-size: 0.72rem;
    padding: 2px 9px;
    line-height: 1.35;
  }

  .promo-ending-badge {
    margin-top: 8px;   /* ＝上面負 margin 的絕對值，把倒數徽章推回原位 */
  }

  /* 2026-07-16 第四輪站長回饋：卡名旁曾經多過「立即申辦」按鈕（第五輪已移到
     topline，不再跟卡名同一列），但單行 line-clamp 限制維持移除——多行卡名
     直接自然換行，收合態高度因此可能變動，可接受。字級/line-height 沿用原本
     收合態的緊湊值。 */
  .promo-card-title {
    font-size: 0.86rem;
    line-height: 1.2;
    margin: 0;
  }

  /* 卡名副標（.promo-card-cardname）已從生成器移除，這裡不再需要對應規則 */

  .promo-card-chevron {
    display: flex;
    /* 手機版展開/收合箭頭加大（原 1.1rem 太小不好按也不明顯） */
    font-size: 1.7rem;
    cursor: pointer;
  }

  /* display 已由桌機規則統一設為 block，這裡不用再設一次；字級跟桌機一樣
     比原本（0.76rem≈12px）調升一階，維持「可感知變大」但仍比桌機 16px 收斂，
     手機版面較擠 */
  .promo-quick-highlight {
    margin-top: 4px;
    font-size: 0.86rem;
    line-height: 1.3;
  }

  .promo-apply-btn {
    padding: 6px 16px;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .promo-meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
    font-size: 0.82rem;
  }

  .promo-hero-big {
    font-size: 1.05rem;
  }

  /* 贈品清單手機再小一階（桌機 15px；行距沿用桌機的 1.65）。
     必須排在上面的 .promo-hero-big 之後，否則同特異度會被它蓋掉 */
  .promo-hero-big--gift {
    font-size: 13px;
  }

  .promo-hero-item {
    padding: 8px 12px;
  }

  .promo-gift-thumb {
    width: 72px;
    height: 72px;
  }

  .promos-warning-row {
    font-size: 14px;
    padding: 12px 16px;
    letter-spacing: 1px;
  }

  .social-media-footer {
    padding: 0 16px;
    margin: 16px auto 10px;
  }

  .social-media-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .social-media-title {
    font-size: 10px;
  }

  .social-link {
    padding: 7px 10px;
    font-size: 12px;
    gap: 5px;
  }

  .social-link svg {
    width: 15px;
    height: 15px;
  }

  .social-text {
    font-size: 11px;
  }

  /* 收合機制：只在手機生效。桌機的 .promo-card-detail 維持檔案前段預設的
     grid-template-rows: 1fr（一律展開），這裡覆寫成 0fr 當收合態，配合
     .is-open 展開，靠 grid-template-rows 動畫做過渡。 */
  .promo-card-detail {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
  }

  .promo-card.is-open .promo-card-detail {
    grid-template-rows: 1fr;
  }

  .promo-card-detail-inner {
    padding-top: 10px;
  }

  /* 回到頂部浮標：手機限定顯示，行為與 index.html／faq.html 一致（見 promos.js
     setupBackToTopButton）。桌機維持 display:none（基礎樣式），這裡只在達到
     捲動門檻時才 display:flex。 */
  .promos-back-to-top-btn.is-visible {
    display: flex;
  }
}

/* ═══ 申辦按鈕光影（2026-07-19 站長定案，mockup 代號 H4「糖衣變厚」：
   hover＝內白圈 1.5px→2.5px 變厚變白＋整顆微提亮；無位移、無掠光、無放大。
   舊掠光 ::after 配方已隨果凍黃版一起移除。
   「減少動態」系統設定下 hover 完全靜態（站長指示：與其看到殘缺的動畫不如不要動）。 */
.promo-apply-btn:hover {
  filter: brightness(1.03);
  box-shadow:
    inset 0 0 0 2.5px rgba(255, 255, 255, 1),
    0 3px 10px rgba(255, 183, 77, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .promo-apply-btn { transition: none; }

  .promo-apply-btn:hover {
    filter: none;
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 255, 255, 0.75),
      0 3px 10px rgba(255, 183, 77, 0.55);
  }
}
/* ═══ 光影區結束 ═══ */

/* ═══ 申辦前 FAQ（白色框框外、社群 footer 之後，收合區塊，預設關閉）═══
   位置與外框比照 styles.css .disclaimer-footer：置中、無底色、直接坐在頁面灰底上，
   收合態就只是一行低調小字（2026-07-29 從 .promos-main 內搬出來）。 */
.promos-faq {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 24px 24px;
  text-align: center;
}

/* 摘要鈕刻意低調（站長回饋：這個區塊不那麼重要，不該比活動列表本身顯眼）——
   配方抄自 styles.css .disclaimer-toggle（主站「使用須知與免責聲明」摺疊鈕）：
   透明底、小巧 inline-flex 藥丸、hover 才有淺底。差異只有兩處：disclaimer-toggle
   用半透明白字（主站那行在灰底上幾乎看不見），這裡改半透明黑字；字級也比
   11px 基準稍微加大到 13px（站長要求「比目前明顯但保持低調」）。 */
.promos-faq-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  transition: all 0.2s;
}

.promos-faq-summary:hover {
  color: rgba(0, 0, 0, 0.85);
  background: rgba(0, 0, 0, 0.06);
}

.promos-faq-summary::-webkit-details-marker {
  display: none;
}

.promos-faq-chevron {
  font-size: 10px;
  transition: transform 0.3s;
}

.promos-faq-chevron::before {
  content: '▾';
}

.promos-faq[open] .promos-faq-chevron {
  transform: rotate(180deg);
}

/* 展開後的內容面板：比照 styles.css .disclaimer-content-wrapper（圓角面板、左對齊、
   跟上方摘要鈕留一段距離）。底色不能照抄主站的 rgba(255,255,255,0.1)——那是配深色
   白字用的；這裡文字是深色，需要一塊夠亮的底才讀得動，所以用近乎不透明的白。 */
.promos-faq-body {
  margin-top: 12px;
  padding: 16px 20px 18px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  text-align: left;
}

.promos-faq-body h3 {
  margin: 18px 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--pmc-ink);
}

.promos-faq-body h3:first-child {
  margin-top: 0;
}

.promos-faq-body p {
  margin: 0 0 4px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--pmc-muted);
}

@media (max-width: 640px) {
  .promos-faq {
    margin: 14px auto;
    padding: 0 12px 18px;
  }

  .promos-faq-summary {
    font-size: 12px;
    padding: 6px 10px;
  }

  .promos-faq-body {
    padding: 14px 14px 16px;
  }

  .promos-faq-body p {
    font-size: 0.82rem;
    line-height: 1.65;
  }
}
/* ═══ 申辦前 FAQ 區結束 ═══ */