/* ═══════════════════════════════════════════════════════════════
   花家 v6 · TYPOGRAPHY — Hot Edo (Direction 4 hybrid)
   ─────────────────────────────────────────────────────────────
   設計哲學：漢字 serif 主角 (Noto Serif TC 900)
            + Latin small caps spaced (Cinzel)
            + 桃紅 hot pink #ec4899 取代朱紅
            + 編號（壹/貳）+ 印章 + 縱橫混排組件
   套用範圍：所有頁面 hero / section title / page H1
   依賴 token： --display-zh / --display-latin / --serif-latin
              （定義於 v6-system.css :root）
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE HEADLINES（漸進覆寫；不靠 !important，靠 cascade 順序）── */
/* 注意：此檔必須在 v6-system.css / refined-theme.css 之後載入才會生效 */

h1.hua-display,
.hua-display h1,
.hero h1.hua-zh,
.page-hero h1,
.section-title.hua-zh {
  font-family: var(--display-zh, 'Noto Serif TC', serif);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.96;
}

/* ── HUAJIA EDO · 全站主標題系統統一 serif ────────────────────────
   範圍：page hero / banner / section title / 大標 H1-H2
   不動：chip / button / 表格 / 內文 / 編號數字（保留 sans 易讀）
   邏輯：font-family 用 var(--display-zh)；letter-spacing 微調防擠
   ─────────────────────────────────────────────────────────── */
.page-hero-title,
.banner-title,
.section-title,
.hero-title,
.hero-slide__title,
.vouchers-title,
.daily-title,
.live-title,
.winners-title,
.contact-title,
.ann-title,
.draw-page-head h1,
.profile-info-name,
.brand-name-zh,
.product-name,
.product-detail-name,
.support-hero-title,
.footer-hero-title {
  font-family: var(--display-zh, 'Noto Serif TC', 'Songti TC', 'Source Han Serif TC', serif) !important;
  letter-spacing: 0.02em;
}

/* em / strong inside serif titles 也跟著 serif，保持整體一致 */
.page-hero-title em, .page-hero-title strong,
.banner-title em, .banner-title strong,
.section-title em, .section-title strong,
.hero-title em, .hero-title strong,
.hero-slide__title em,
.vouchers-title em,
.daily-title em,
.live-title em,
.winners-title em,
.contact-title em,
.ann-title em,
.product-name em,
.product-detail-name em,
.brand-name-zh em {
  font-family: inherit !important;
}

/* Hot pink accent token：給漢字標題的關鍵字 */
.hua-hot {
  color: var(--magenta, #ec4899);
  text-shadow: 0 0 32px rgb(var(--magenta-rgb, 236 72 153) / 0.42);
}

/* ─────────────────────────────────────────────────────────────
   組件 1：章節編號（壹 / 貳 / 參 ...）
   用法：<div class="hua-num"><span>壹</span><small>章</small></div>
   ───────────────────────────────────────────────────────────── */
.hua-num {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--display-zh, 'Noto Serif TC', serif);
  color: var(--paper, #f8f1e6);
  user-select: none;
}
.hua-num > span:first-child {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
}
.hua-num small {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(248,241,230,0.4);
}

/* ─────────────────────────────────────────────────────────────
   組件 2：印章（桃紅方塊，白字短詞）
   用法：<span class="hua-stamp">即時</span>
   ───────────────────────────────────────────────────────────── */
.hua-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 4px 10px;
  background: var(--magenta, #ec4899);
  color: var(--paper, #f8f1e6);
  font-family: var(--display-zh, 'Noto Serif TC', serif);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow:
    0 0 22px rgb(var(--magenta-rgb, 236 72 153) / 0.42),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.hua-stamp--sm {
  min-width: 0;
  min-height: 0;
  padding: 5px 9px 6px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* ─────────────────────────────────────────────────────────────
   組件 3：縱書 kicker（直書英文/中文，hero 旁邊用）
   用法：<div class="hua-vert">即時上線 · 新北獨家</div>
   ───────────────────────────────────────────────────────────── */
.hua-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--display-zh, 'Noto Serif TC', serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(248,241,230,0.55);
}

/* ─────────────────────────────────────────────────────────────
   組件 4：Latin small caps spaced（subtitle 配角）
   用法：<span class="hua-latin">Live Now · Tonight</span>
   ───────────────────────────────────────────────────────────── */
.hua-latin {
  font-family: var(--display-latin, 'Cinzel', serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold, #c89f4a);
  text-transform: uppercase;
}
.hua-latin--lg {
  font-size: 14px;
  letter-spacing: 0.2em;
}
.hua-latin-italic {
  font-family: var(--serif-latin, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--gold, #c89f4a);
  text-transform: none;
}

/* ─────────────────────────────────────────────────────────────
   組件 5：section eyebrow 改造 — kicker + Latin
   refined-theme.css 原本是 sans uppercase，這裡升級為
   「金色 dash + Cinzel spaced caps」（不破壞舊 class 結構）
   ───────────────────────────────────────────────────────────── */
.section-eyebrow.hua-edo,
.hua-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display-latin, 'Cinzel', serif);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold, #c89f4a);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hua-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold, #c89f4a);
}

/* ─────────────────────────────────────────────────────────────
   組件 6：紙紋背景修飾（給 hero / featured 區塊外加質感）
   用法：在容器加 class="hua-paper"
   ───────────────────────────────────────────────────────────── */
.hua-paper {
  position: relative;
}
.hua-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.05'/></svg>");
  pointer-events: none;
  z-index: 0;
}
.hua-paper > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   全站既有 selector 升級（同類 specificity，靠 cascade 後勝出）
   只動 font-family，不動 size / weight / spacing — 風險最小
   ═══════════════════════════════════════════════════════════════ */

/* refined-theme.css 內的 .section-title / .section-sub 改用漢字 serif */
.section-title {
  font-family: var(--display-zh, 'Noto Serif TC', serif);
}
.section-title em {
  font-style: normal;
  color: var(--magenta, #ec4899);
  text-shadow: 0 0 28px rgb(var(--magenta-rgb, 236 72 153) / 0.36);
}

/* index.html / search.html 內的 .reviews-title / .detail-name 等 */
.reviews-title,
.detail-name,
h1.hero-title,
h1.page-title {
  font-family: var(--display-zh, 'Noto Serif TC', serif);
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Brand wordmark (sidebar / header / footer) — 編輯精緻明體
   Noto Serif TC 500，乾淨、雜誌封面感、不油不糊 */
.brand-name-zh,
.footer-brand-zh {
  font-family: 'Noto Serif TC', 'Songti TC', 'STSong', serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
}
.brand-name-zh em,
.footer-brand-zh em {
  font-style: normal !important;
}

/* Card name (技師卡片名字) — Noto Serif TC 900 取代 sans */
.card-name,
.card-name-coin__zh {
  font-family: var(--display-zh, 'Noto Serif TC', serif);
  font-weight: 900;
}

/* Card 上的英文 (em / coin__en) — Cinzel small caps */
.card-name em,
.card-name-coin__en {
  font-family: var(--display-latin, 'Cinzel', serif);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   K-Model Magazine treatment（雜誌封面 frame · cover-star tag）
   2026-05-15 升級：給卡片像韓系明星雜誌的「press photo」frame
   ═══════════════════════════════════════════════════════════════ */

/* 1. 卡片圖片區：inner champagne hairline frame（雜誌封面感） */
.card .card-img {
  position: relative;
  isolation: isolate;
}
.card .card-img::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--champagne-hair, rgba(217,185,122,0.38));
  pointer-events: none;
  z-index: 5;
  transition: inset .4s cubic-bezier(0.22,1,0.36,1), border-color .4s;
}
.card:hover .card-img::after {
  inset: 5px;
  border-color: var(--champagne, #d9b97a);
}

/* 2. 卡片圖片：K-model 高反差略冷暖一點處理 */
.card .card-img img {
  filter: contrast(1.05) saturate(0.92) brightness(0.98);
  transition: filter .8s, transform 1.2s cubic-bezier(0.22,1,0.36,1);
}
.card:hover .card-img img {
  filter: contrast(1.08) saturate(1.06) brightness(1);
  transform: scale(1.03);
}

/* 3. 卡片編號（左上）— 雜誌期數風 VOL.№ 01 */
.card .card-num {
  position: absolute;
  top: 14px; left: 16px;
  z-index: 6;
  font-family: var(--display-latin, 'Cinzel', serif) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  color: var(--paper, #f8f1e6) !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.card .card-num small {
  font-family: var(--mono, monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--champagne, #d9b97a);
  opacity: 1;
}
.card .card-num small::after { content: ''; }
.card .card-num::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--champagne, #d9b97a);
}

/* 4. 卡片分站徽章（右上）— Cinzel 金色 spaced caps */
.card .card-area-pill {
  font-family: var(--display-latin, 'Cinzel', serif) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ivory, #f3ead8) !important;
  background: rgba(10,9,8,0.78) !important;
  border: 1px solid var(--champagne-hair, rgba(217,185,122,0.38)) !important;
  padding: 5px 11px !important;
  z-index: 6 !important;
}

/* 5. 卡片名字區：雜誌封面 typo
      [中文 serif] —— [Cinzel italic en]
      ────────────────
      branch · age · cup */
.card .card-name-coin,
.card.has-fav-name-badge .card-name-coin {
  background: linear-gradient(135deg, #0e0d0c, #1a1612) !important;
  border-color: var(--champagne-hair, rgba(217,185,122,0.38)) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(217,185,122,0.18) !important;
}
.card .card-name-coin.is-fav {
  background: linear-gradient(135deg, var(--rose-deep, #c95583), var(--magenta-deep, #be185d)) !important;
  border-color: var(--rose, #e9779f) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.5),
    0 0 0 2px rgb(var(--rose-rgb, 233 119 159) / 0.32),
    0 0 26px rgb(var(--rose-rgb, 233 119 159) / 0.48) !important;
}
/* 跟 brand wordmark 對齊：Noto Serif TC 500、letter-spacing 0.10em
   高 specificity 蓋 refined-theme.css 內 Ma Shan Zheng 規則 */
.card .card-name-coin .card-name-coin__zh,
html .card .card-name-coin .card-name-coin__zh {
  font-family: 'Noto Serif TC', 'Songti TC', 'STSong', serif !important;
  font-weight: 500 !important;
  color: var(--paper, #f8f1e6) !important;
  letter-spacing: 0.10em !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55) !important;
}
.card .card-name-coin .card-name-coin__en,
html .card .card-name-coin .card-name-coin__en {
  font-family: var(--display-latin, 'Cinzel', serif) !important;
  font-weight: 500 !important;
  font-size: 7.5px !important;
  letter-spacing: 0.2em !important;
  color: var(--champagne, #d9b97a) !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
.card .card-name-coin.is-fav .card-name-coin__en {
  color: var(--ivory, #f3ead8) !important;
}

/* 6. 卡片 CTA「查看檔案」雜誌風
   高 specificity 蓋過 refined-theme.css 的 html[data-hj-theme] .card-cta 規則 */
/* J · 玫瑰光暈膠囊 — 用 --magenta 主題變數，pink=玫瑰 / ice=冰藍 自動切 */
html .card .card-cta,
html[data-hj-theme="pink"] .card .card-cta,
html[data-hj-theme="ice"] .card .card-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin-top: 8px !important;
  padding: 14px 18px !important;
  border: 1px solid rgb(var(--magenta-rgb, 236 72 153) / 0.5) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--magenta-rgb, 236 72 153) / 0.30), transparent 70%),
    linear-gradient(135deg, #1a0f15, #120c10) !important;
  box-shadow:
    0 0 26px rgb(var(--magenta-rgb, 236 72 153) / 0.26),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  color: var(--ivory, #f3ead8) !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: box-shadow .3s, border-color .3s, transform .3s !important;
}
html .card .card-cta .card-cta-dot,
html[data-hj-theme="pink"] .card .card-cta .card-cta-dot,
html[data-hj-theme="ice"] .card .card-cta .card-cta-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--magenta, #ec4899) !important;
  box-shadow: 0 0 10px var(--magenta, #ec4899) !important;
  flex: 0 0 auto !important;
}
html .card .card-cta .card-cta-label,
html[data-hj-theme="pink"] .card .card-cta .card-cta-label,
html[data-hj-theme="ice"] .card .card-cta .card-cta-label {
  font-family: var(--display-zh, 'Noto Serif TC', serif) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  color: var(--ivory, #f3ead8) !important;
}
html .card .card-cta .card-cta-arrow,
html[data-hj-theme="pink"] .card .card-cta .card-cta-arrow,
html[data-hj-theme="ice"] .card .card-cta .card-cta-arrow {
  font-family: var(--serif-latin, 'Cormorant Garamond', serif) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: var(--magenta, #ec4899) !important;
  transition: transform .3s cubic-bezier(0.22,1,0.36,1) !important;
}
html .card:hover .card-cta,
html[data-hj-theme="pink"] .card:hover .card-cta,
html[data-hj-theme="ice"] .card:hover .card-cta {
  border-color: var(--magenta, #ec4899) !important;
  box-shadow:
    0 0 40px rgb(var(--magenta-rgb, 236 72 153) / 0.5),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transform: translateY(-1px) !important;
}
html .card:hover .card-cta .card-cta-arrow {
  transform: translateX(5px) !important;
}
/* 手機窄欄：縮字距/padding/字級，強制不斷行 */
html .card .card-cta .card-cta-label {
  white-space: nowrap !important;
}
@media (max-width: 700px) {
  html .card .card-cta,
  html[data-hj-theme="pink"] .card .card-cta,
  html[data-hj-theme="ice"] .card .card-cta {
    gap: 7px !important;
    padding: 11px 8px !important;
    margin-top: 7px !important;
  }
  html .card .card-cta .card-cta-label,
  html[data-hj-theme="pink"] .card .card-cta .card-cta-label,
  html[data-hj-theme="ice"] .card .card-cta .card-cta-label {
    font-size: 11.5px !important;
    letter-spacing: 0.1em !important;
  }
  html .card .card-cta .card-cta-arrow,
  html[data-hj-theme="pink"] .card .card-cta .card-cta-arrow,
  html[data-hj-theme="ice"] .card .card-cta .card-cta-arrow {
    font-size: 15px !important;
  }
  html .card .card-cta .card-cta-dot,
  html[data-hj-theme="pink"] .card .card-cta .card-cta-dot,
  html[data-hj-theme="ice"] .card .card-cta .card-cta-dot {
    width: 5px !important;
    height: 5px !important;
  }
}
@media (max-width: 420px) {
  html .card .card-cta .card-cta-dot { display: none !important; }
  html .card .card-cta .card-cta-label { font-size: 11px !important; letter-spacing: 0.06em !important; }
}

/* ═══════════════════════════════════════════════════════════════
   6.5 卡片內容防裁切（窄欄手機：meta 換行、英名縮放、name-bar 不爆寬）
   ═══════════════════════════════════════════════════════════════ */
/* meta 改成可換行，不再 nowrap+ellipsis 把「165cm · D」裁掉 */
html .card .card-meta,
body[data-page="search"] .card .card-meta,
body[data-page="index"] .card .card-meta {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.5 !important;
}
/* coin 英文：放寬 max-width、收緊字距，長名（SAI HONG）才不被切 */
html .card .card-name-coin .card-name-coin__en,
body[data-page="search"] .card .card-name-coin .card-name-coin__en,
body[data-page="index"] .card .card-name-coin .card-name-coin__en {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* name-bar：單行不 wrap（wrap 會把 coin/互動數擠成兩行 → 整片空白）
   coin 放大填滿、互動數縮小，body 緊貼上來消除死空帶 */
html .card .card-name-bar,
body[data-page="search"] .card .card-name-bar,
body[data-page="index"] .card .card-name-bar {
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 6px !important;
  overflow: visible !important;
  margin-bottom: -10px !important;     /* 把下方 body 往上拉 */
}
/* coin 縮小一點（業主要求），仍壓圖底左 */
html .card .card-name-bar .card-name-coin,
body[data-page="search"] .card .card-name-bar .card-name-coin,
body[data-page="index"] .card .card-name-bar .card-name-coin {
  margin-top: -24px !important;
  width: 48px !important;
  height: 48px !important;
}
html .card .card-name-coin__zh,
body[data-page="search"] .card .card-name-coin__zh,
body[data-page="index"] .card .card-name-coin__zh {
  font-size: 16px !important;
}
html .card .card-name-coin__en,
body[data-page="search"] .card .card-name-coin__en,
body[data-page="index"] .card .card-name-coin__en {
  font-size: 5.5px !important;
  letter-spacing: 0.1em !important;
}
/* 互動數 chip：便利貼風 — 貼齊卡片右緣、右側切平、只左側圓角 + 微陰影 */
html .card .card-name-bar .card-engagement--name,
body[data-page="search"] .card .card-name-bar .card-engagement--name,
body[data-page="index"] .card .card-name-bar .card-engagement--name {
  min-height: 22px !important;
  padding: 3px 10px 3px 11px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin-right: -10px !important;            /* 撐破 name-bar 右邊距，貼到卡片邊緣 */
  border-radius: 11px 0 0 11px !important;    /* 只圓左側，右邊切平像黏在邊上 */
  border-right: 0 !important;
  box-shadow: -3px 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
@media (max-width: 700px) {
  html .card .card-name-bar .card-engagement--name,
  body[data-page="search"] .card .card-name-bar .card-engagement--name,
  body[data-page="index"] .card .card-name-bar .card-engagement--name {
    margin-right: -8px !important;            /* 手機 name-bar 邊距是 8px，剛好貼齊 */
  }
}
html .card .card-engagement--name .card-engagement__item strong,
body[data-page="search"] .card .card-engagement--name .card-engagement__item strong,
body[data-page="index"] .card .card-engagement--name .card-engagement__item strong {
  font-size: 9.5px !important;
}
/* 身體密碼（年齡/身高/罩杯）與地區同一行，不再把「D」擠到第二行 */
html .card .card-meta,
body[data-page="search"] .card .card-meta,
body[data-page="index"] .card .card-meta {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}
/* body 緊貼 name-bar，去掉 padding-top 大空白、行距收緊 */
html .card .card-body,
body[data-page="search"] .card .card-body,
body[data-page="index"] .card .card-body {
  padding-top: 14px !important;   /* 給 coin 下緣留位，但不再 12+空帶 */
  gap: 7px !important;
  display: flex !important;
  flex-direction: column !important;
}
html .card .card-body > *,
body[data-page="search"] .card .card-body > *,
body[data-page="index"] .card .card-body > * {
  margin: 0 !important;
}
@media (max-width: 700px) {
  html .card .card-name-coin .card-name-coin__en,
  body[data-page="search"] .card .card-name-coin .card-name-coin__en,
  body[data-page="index"] .card .card-name-coin .card-name-coin__en {
    font-size: 6px !important;
    letter-spacing: 0.12em !important;
  }
  html .card .card-engagement,
  body[data-page="search"] .card .card-engagement,
  body[data-page="index"] .card .card-engagement {
    gap: 5px !important;
    font-size: 9px !important;
  }
  html .card .card-engagement svg,
  body[data-page="search"] .card .card-engagement svg,
  body[data-page="index"] .card .card-engagement svg {
    width: 11px !important;
    height: 11px !important;
  }
  html .card .card-meta,
  body[data-page="search"] .card .card-meta,
  body[data-page="index"] .card .card-meta {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   7. 卡片色票統一（K-Model magazine harmony）
   全卡只用一套：jet 黑底 + 香檳金 + 玫瑰 accent + 象牙白文字
   綠點只當「上線中」功能訊號保留；其餘冷藍/鮭紅/薄荷綠全收掉
   高 specificity 蓋過 index/search/refined-theme/themed 規則
   ═══════════════════════════════════════════════════════════════ */

/* meta 行：象牙白 + 地區名香檳金 */
html .card .card-meta,
html[data-hj-theme="pink"] .card .card-meta,
body[data-page="search"] .card .card-meta {
  color: rgba(243,234,216,0.66) !important;
  letter-spacing: 0.04em !important;
}
html .card .card-meta .card-meta-area,
html[data-hj-theme="pink"] .card .card-meta .card-meta-area,
body[data-page="search"] .card .card-meta .card-meta-area {
  color: var(--champagne, #d9b97a) !important;
  font-weight: 600 !important;
}

/* 上線中 status：深底 + 香檳細框 + 象牙白字，僅保留綠點 */
html .card .card-status-bar .online-status,
html[data-hj-theme="pink"] .card .card-status-bar .online-status,
body[data-page="search"] .card .card-status-bar .online-status {
  color: var(--ivory, #f3ead8) !important;
  background: rgba(10,9,8,0.72) !important;
  border: 1px solid var(--champagne-hair, rgba(217,185,122,0.38)) !important;
  font-family: var(--mono, monospace) !important;
  letter-spacing: 0.14em !important;
}
html .card .card-status-bar .online-status::before,
html[data-hj-theme="pink"] .card .card-status-bar .online-status::before,
body[data-page="search"] .card .card-status-bar .online-status::before {
  background: #34d399 !important;          /* 唯一保留的功能色：上線綠點 */
  box-shadow: 0 0 8px rgba(52,211,153,0.7) !important;
}
html .card .card-status-bar .online-status.online-offline,
body[data-page="search"] .card .card-status-bar .online-status.online-offline {
  color: rgba(243,234,216,0.45) !important;
}
html .card .card-status-bar .online-status.online-offline::before,
body[data-page="search"] .card .card-status-bar .online-status.online-offline::before {
  background: rgba(243,234,216,0.4) !important;
  box-shadow: none !important;
}

/* 主標籤：實心三色 — 熱門=紅 / 新人=黃(深字) / 回歸=粉 */
html .card .card-tag-row--inline .tag-pill.tag-hot,
html .card .card-tag-row--inline .tag-pill.tag-superhot,
html[data-hj-theme="pink"] .card .card-tag-row--inline .tag-pill.tag-hot,
html[data-hj-theme="pink"] .card .card-tag-row--inline .tag-pill.tag-superhot,
body[data-page="search"] .card .card-tag-row--inline .tag-pill.tag-hot,
body[data-page="search"] .card .card-tag-row--inline .tag-pill.tag-superhot {
  font-family: var(--mono, monospace) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
  background: #d8342e !important;
  border: 1px solid #d8342e !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html .card .card-tag-row--inline .tag-pill.tag-newface,
body[data-page="search"] .card .card-tag-row--inline .tag-pill.tag-newface {
  color: #2a1d05 !important;
  background: #efc34a !important;            /* 實心黃 · 深字 */
  border-color: #efc34a !important;
  font-weight: 800 !important;
}
html .card .card-tag-row--inline .tag-pill.tag-comeback,
body[data-page="search"] .card .card-tag-row--inline .tag-pill.tag-comeback {
  color: #fff !important;
  background: #e9779f !important;            /* 實心粉 */
  border-color: #e9779f !important;
}

/* 副標籤：editorial 細線 outline，象牙白字，透明底 */
/* 熱門 與副標籤之間不要空格：兩個容器 margin 歸零，只靠 body gap */
html .card .card-tag-row--inline,
body[data-page="search"] .card .card-tag-row--inline,
body[data-page="index"] .card .card-tag-row--inline,
html .card .card-tags-line,
body[data-page="search"] .card .card-tags-line,
body[data-page="index"] .card .card-tags-line,
html .card .card-tags-line--bottom,
body[data-page="search"] .card .card-tags-line--bottom {
  margin: 0 !important;
  padding: 0 !important;
}

html .card .card-tags-line .tag-line,
html[data-hj-theme="pink"] .card .card-tags-line .tag-line,
body[data-page="search"] .card .card-tags-line .tag-line,
body[data-page="search"] .card .tag-line {
  color: rgba(243,234,216,0.78) !important;
  background: transparent !important;
  border: 1px solid var(--champagne-hair, rgba(217,185,122,0.32)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html .card .card-tags-line .tag-line.tag-more,
body[data-page="search"] .card .tag-line.tag-more {
  color: var(--champagne, #d9b97a) !important;
  border-color: var(--champagne-hair, rgba(217,185,122,0.38)) !important;
}

/* 評分 pill / card-rating：香檳金，不再金黃刺眼 */
html .card .card-rating,
body[data-page="search"] .card .card-rating {
  color: var(--champagne, #d9b97a) !important;
}
html .card .card-rating,
body[data-page="search"] .card .card-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html .card .card-rating .star,
body[data-page="search"] .card .card-rating .star,
body[data-page="index"] .card .card-rating .star {
  color: var(--champagne, #d9b97a) !important;
  font-size: 0.92em !important;
  line-height: 1 !important;
  margin: 0 !important;
  filter: drop-shadow(0 0 4px rgba(217,185,122,0.5)) !important;
}

/* 價格：象牙白主數字 + 香檳金幣別感（去掉桃紅刺眼） */
html .card .card-price,
body[data-page="search"] .card .card-price {
  color: var(--ivory, #f3ead8) !important;
  text-shadow: none !important;
}
html .card .card-price small,
body[data-page="search"] .card .card-price small {
  color: rgba(243,234,216,0.5) !important;
}
html .card .price-original,
body[data-page="search"] .card .price-original {
  color: rgba(243,234,216,0.34) !important;
}

/* ─────────────────────────────────────────────────────────────
   主題：ice 模式下保留 hot pink → cyan 切換
   ───────────────────────────────────────────────────────────── */
html[data-hj-theme="ice"] .section-title em,
[data-theme="ice"] .section-title em,
html[data-hj-theme="ice"] .hua-hot,
[data-theme="ice"] .hua-hot {
  color: var(--magenta);
  text-shadow: 0 0 28px rgb(var(--magenta-rgb) / 0.4);
}

/* LINE WebView compact density 2026-06-10
   Kept here too because typography loads after v6-system on most public pages. */
@media (max-width: 700px) {
  html.is-line-webview body:not([data-admin-page]) .card .card-name-coin,
  html.is-line-webview body:not([data-admin-page]) .card.has-fav-name-badge .card-name-coin {
    width: 52px !important;
    height: 52px !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-name-coin__zh {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-name-coin__en {
    font-size: 6px !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-body {
    padding: 12px 11px 14px !important;
    gap: 6px !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-meta {
    font-size: 11.2px !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-meta-area {
    font-size: 1em !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-tagline {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 11.6px !important;
    line-height: 1.42 !important;
    max-height: none !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-status-bar .online-status,
  html.is-line-webview body:not([data-admin-page]) .card .online-status {
    font-size: 10px !important;
    line-height: 1.15 !important;
    padding: 5px 8px !important;
    max-width: 100% !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-tag-row--inline .tag-pill,
  html.is-line-webview body:not([data-admin-page]) .card .card-tags-line .tag-line {
    font-size: 9px !important;
    line-height: 1.1 !important;
    padding: 4px 6px !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-cta {
    min-height: 35px !important;
    padding: 9px 10px !important;
  }

  html.is-line-webview body:not([data-admin-page]) .card .card-cta .card-cta-label {
    font-size: 10.5px !important;
    letter-spacing: .08em !important;
  }

  html.is-line-webview body:not([data-admin-page]) nav.bottom-nav {
    height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 8px env(safe-area-inset-bottom, 0px) !important;
  }

  html.is-line-webview body:not([data-admin-page]) .bnav-item {
    min-height: 54px !important;
    gap: 2px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  html.is-line-webview body:not([data-admin-page]) .bnav-icon-wrap {
    width: 25px !important;
    height: 25px !important;
  }

  html.is-line-webview body:not([data-admin-page]) .bnav-icon-wrap svg {
    width: 20px !important;
    height: 20px !important;
  }

  html.is-line-webview body:not([data-admin-page]) .bnav-item--center .bnav-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    margin-top: -18px !important;
  }
}