/* ═══════════════════════════════════════════
   投資型專區 ・ 共用樣式
   鼎綸保經 ・ 設計系統
   ═══════════════════════════════════════════ */

:root {
  --orange: #F05A28;
  --orange-deep: #D04618;
  --teal: #1A6B72;
  --teal-deep: #0F4D52;
  --navy: #0D2A3A;
  --navy-deep: #061827;
  --light: #F8F5F0;
  --gold: #E8A020;
  --gold-bright: #FFD700;
  --orange-light: #FDE8DF;
  --teal-light: #D0EAEC;
  --green: #2E8B57;
  --red: #C8203A;
  --bg-cream: #FAF7F2;
  --border: #EAE5DC;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-cream);
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--navy);
  line-height: 1.5;
}

.page {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 20px 80px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* ─── 通用次頁 HEADER ─── */
.subpage-header {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(232,160,32,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 85%, rgba(26,107,114,0.3) 0%, transparent 55%),
    linear-gradient(135deg, rgba(13,42,58,0.92) 0%, rgba(10,35,52,0.95) 100%),
    url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80');
  background-size: cover, cover, cover, cover;
  background-position: center;
  padding: 32px 56px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.subpage-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
}
.breadcrumb a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: rgba(255,255,255,0.3); }
.breadcrumb .current { color: var(--gold); font-weight: 700; }

.subpage-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.subpage-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--gold);
}

.subpage-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.2;
  color: #fff;
  position: relative;
  z-index: 2;
}
.subpage-title .accent { color: var(--gold); }
.subpage-title .accent-orange { color: var(--orange); }

.subpage-desc {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
}

/* ─── 內容區 ─── */
.content {
  padding: 48px 56px;
}

.section-block {
  margin-bottom: 48px;
}
.section-block:last-child { margin-bottom: 0; }

.block-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.block-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--orange);
  border-radius: 2px;
}
.block-subtitle {
  font-size: 13px;
  color: #6b7680;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  margin-left: 16px;
}

/* ─── FOOTER ─── */
.footer-mini {
  background: var(--navy-deep);
  padding: 28px 56px;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-align: center;
  letter-spacing: 1px;
}
.footer-mini a { color: var(--orange); text-decoration: none; }
.footer-line { margin-bottom: 4px; }

/* ─── FLOATING CTA ─── */
.float-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  padding: 14px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 28px rgba(240,90,40,0.45);
  z-index: 999;
  transition: all .3s;
}
.float-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 36px rgba(240,90,40,0.6);
}

/* ─── 通用卡片元件 ─── */
.info-card {
  background: var(--bg-cream);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
.info-card-highlight {
  background: linear-gradient(135deg, var(--orange-light) 0%, #fff 100%);
  border-color: var(--orange);
}
.info-card-dark {
  background: linear-gradient(135deg, var(--navy) 0%, #1a4a5a 100%);
  color: #fff;
  border: none;
}

/* ─── 數據卡 ─── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
}
.stat-label {
  font-size: 11px;
  color: #888;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 700;
}
.stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  color: var(--orange);
  line-height: 1;
  letter-spacing: 1px;
}
.stat-value.teal { color: var(--teal); }
.stat-value.green { color: var(--green); }
.stat-value.gold { color: var(--gold); }
.stat-value.navy { color: var(--navy); }
.stat-value .unit { font-size: 16px; color: #999; margin-left: 2px; }

/* ─── 表格 ─── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.data-table thead { background: var(--navy); }
.data-table thead th {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 12px;
  text-align: left;
  letter-spacing: 1px;
}
.data-table thead th.center { text-align: center; }
.data-table thead th.right { text-align: right; }
.data-table tbody td {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--navy);
  border-bottom: 1px solid #F0EBDD;
}
.data-table tbody td.center { text-align: center; }
.data-table tbody td.right { text-align: right; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-cream); }
.data-table .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--orange);
  letter-spacing: 0.5px;
}
.data-table .pct-up { color: var(--green); font-weight: 700; }
.data-table .pct-down { color: var(--red); font-weight: 700; }
.data-table .badge {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--orange-light);
  color: var(--orange-deep);
  font-weight: 700;
  letter-spacing: 1px;
}

/* ─── 標籤式列表 ─── */
.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.feature-list.cols-1 { grid-template-columns: 1fr; }
.feature-list.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-list li {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all .2s;
}
.feature-list li:hover {
  border-color: var(--orange);
  box-shadow: 0 6px 18px rgba(240,90,40,0.1);
}
.feature-list .feat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--orange-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.feature-list .feat-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--navy);
}
.feature-list .feat-text strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
  color: var(--navy);
}

/* ─── 警語/註記 ─── */
.note-box {
  background: rgba(232,160,32,0.08);
  border-left: 4px solid var(--gold);
  padding: 14px 20px;
  border-radius: 0 10px 10px 0;
  font-size: 12px;
  line-height: 1.7;
  color: #6b6253;
  margin-top: 16px;
}
.note-box strong { color: var(--gold); }

.warning-box {
  background: rgba(200,32,58,0.06);
  border-left: 4px solid var(--red);
  padding: 14px 20px;
  border-radius: 0 10px 10px 0;
  font-size: 12px;
  line-height: 1.7;
  color: #6b3a3e;
  margin-top: 16px;
}
.warning-box strong { color: var(--red); }

/* ─── 返回鏈接 ─── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  transition: all .25s;
  position: relative;
  z-index: 2;
}
.back-link:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* ─── CTA 按鈕 ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: all .25s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(240,90,40,0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(240,90,40,0.45);
}
.btn-navy {
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover { background: var(--orange); }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--navy);
}
.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .subpage-header { padding: 24px 20px 32px; }
  .subpage-title { font-size: 26px; letter-spacing: 1px; }
  .content { padding: 32px 20px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .feature-list.cols-3 { grid-template-columns: 1fr; }
  .data-table { font-size: 11px; }
  .data-table thead th, .data-table tbody td { padding: 10px 8px; }
  .footer-mini { padding: 20px 20px; }
}

/* ═══════════════════════════════════════════
   ✨ V2 美化補強層（2026/05 更新）
   ═══════════════════════════════════════════ */

/* 全站微動畫 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 10px 28px rgba(240,90,40,0.45); }
  50% { box-shadow: 0 14px 36px rgba(240,90,40,0.6); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 頁面進場動畫 */
.subpage-header,
.product-hero,
.allianz-hero,
.article-hero,
.hero-case {
  animation: fadeUp 0.6s ease-out;
}
.section-block {
  animation: fadeUp 0.7s ease-out backwards;
}
.section-block:nth-child(1) { animation-delay: 0.05s; }
.section-block:nth-child(2) { animation-delay: 0.1s; }
.section-block:nth-child(3) { animation-delay: 0.15s; }
.section-block:nth-child(4) { animation-delay: 0.2s; }
.section-block:nth-child(5) { animation-delay: 0.25s; }

/* 強化浮動 CTA 動畫 */
.float-cta {
  animation: pulse-soft 2.5s ease-in-out infinite;
}
.float-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  pointer-events: none;
  opacity: 0.5;
}

/* 強化 breadcrumb */
.breadcrumb a {
  position: relative;
  padding: 2px 0;
}
.breadcrumb a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.breadcrumb a:hover::after { width: 100%; }

/* 強化標題 - 添加微妙背景光暈 */
.block-title {
  position: relative;
  padding-left: 4px;
}
.block-title::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--orange) 0%, transparent 100%);
  opacity: 0.3;
  margin-left: 8px;
}

/* 統計卡 - 加上滑入特效 */
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--gold) 100%);
  transition: left 0.4s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border-color: var(--orange);
}
.stat-card:hover::before { left: 0; }

/* 表格 - 強化視覺層次 */
.data-table {
  border: 1px solid var(--border);
}
.data-table thead {
  position: relative;
}
.data-table thead::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--gold) 50%, var(--orange) 100%);
}
.data-table tbody tr {
  transition: all 0.2s ease;
}

/* 警語/註記強化 */
.note-box, .warning-box {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.note-box::before, .warning-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.05;
  transform: translate(30px, -30px);
}
.note-box::before { background: var(--gold); }
.warning-box::before { background: var(--red); }
.note-box:hover, .warning-box:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

/* 按鈕 - 漣漪效果 */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: -1;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}

/* 強化 info-card */
.info-card {
  transition: all 0.3s ease;
  position: relative;
}
.info-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--orange) 50%,
    transparent 100%);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.4s ease;
}
.info-card:hover::after { transform: translateX(-50%) scaleX(1); }

.info-card-highlight::before {
  content: '★';
  position: absolute;
  top: 12px;
  right: 16px;
  color: var(--orange);
  font-size: 14px;
  opacity: 0.4;
}

/* feature-list 圖示 - 加上發光效果 */
.feature-list .feat-icon {
  transition: all 0.3s ease;
  position: relative;
}
.feature-list li:hover .feat-icon {
  background: var(--orange);
  color: #fff;
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 6px 16px rgba(240,90,40,0.3);
}

/* back-link 強化 */
.back-link {
  backdrop-filter: blur(8px);
}
.back-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--orange) 0%, var(--gold) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.back-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.back-link:hover::before { opacity: 1; }
.back-link:hover {
  border-color: transparent;
  color: #fff;
  transform: translateX(-2px);
}

/* footer 強化 */
.footer-mini {
  background:
    linear-gradient(180deg, transparent 0%, rgba(232,160,32,0.04) 100%),
    var(--navy-deep);
  position: relative;
}
.footer-mini::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
.footer-mini a {
  transition: all 0.2s ease;
  display: inline-block;
}
.footer-mini a:hover {
  color: var(--gold);
  transform: translateY(-1px);
}

/* 通用滾動條美化 (Webkit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-cream);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
  border-radius: 10px;
  border: 2px solid var(--bg-cream);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold) 0%, var(--orange) 100%);
}

/* 文字選取顏色 */
::selection {
  background: var(--orange);
  color: #fff;
}
::-moz-selection {
  background: var(--orange);
  color: #fff;
}

/* 列印美化 */
@media print {
  .float-cta, .back-link { display: none !important; }
  .page { box-shadow: none; }
  body { background: #fff; }
}

/* 主視覺紋理增強層 */
.subpage-header,
.product-hero,
.allianz-hero,
.article-hero,
.hero-case {
  position: relative;
}
.subpage-header::after,
.product-hero::after,
.allianz-hero::after,
.article-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,160,32,0.4) 20%,
    rgba(232,160,32,0.4) 80%,
    transparent 100%);
  pointer-events: none;
}

/* 長文章內容區強化 */
.article-content {
  position: relative;
}
.article-content::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--orange-light) 20%,
    var(--orange-light) 80%,
    transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 900px) {
  .article-content::before { display: none; }
}

/* article-h2 強化裝飾 */
.article-h2 {
  position: relative;
  padding-right: 40px;
}
.article-h2::after {
  content: '';
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 1px;
  background: var(--orange);
  opacity: 0.3;
}

/* tab-bar 強化 */
.tab-bar {
  position: relative;
}
.tab-bar::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--orange-light) 100%);
  pointer-events: none;
}

/* 全站漸進顯示 */
.page > * {
  animation: fadeUp 0.5s ease-out backwards;
}
.page > *:nth-child(1) { animation-delay: 0s; }
.page > *:nth-child(2) { animation-delay: 0.1s; }

/* 卡片群統一懸浮效果 */
.profile-card,
.audience-card,
.feat-card,
.benefit-card,
.month-card,
.idx-card,
.obs-card,
.related-item,
.tree-option,
.rec-card,
.why-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 連結預設轉場 */
a {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* 強化所有表格 hover */
table tbody tr {
  transition: all 0.2s ease;
}

/* 細節：改善文字渲染 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 數字字體統一加上 tabular-nums，對齊更整齊 */
.stat-value,
.idx-current,
.balance-pct,
.case-d-amount,
.case-g-amount,
.case-std-amount,
.summary-stat-value,
.hero-case-amount,
.qqq-stat-value,
.a-stat-value {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════
   ✨ V3 美化升級層（2026/05 ・全站精修版）
   作者：Cowork ・ Claude
   原則：1) 不動 SPA 路由 2) 向下相容既有 class 3) 全純 CSS+少量 vanilla JS
   ═══════════════════════════════════════════ */

/* ───── V3.0 設計 Token 擴充（深色模式變數準備） ───── */
:root {
  --shadow-sm: 0 2px 6px rgba(13,42,58,0.06);
  --shadow-md: 0 8px 24px rgba(13,42,58,0.08);
  --shadow-lg: 0 20px 48px rgba(13,42,58,0.12);
  --shadow-gold: 0 12px 32px rgba(232,160,32,0.28);
  --shadow-orange: 0 12px 32px rgba(240,90,40,0.32);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --grad-warm: linear-gradient(135deg, #F05A28 0%, #E8A020 100%);
  --grad-deep: linear-gradient(135deg, #0D2A3A 0%, #061827 100%);
  --grad-teal: linear-gradient(135deg, #1A6B72 0%, #0F4D52 100%);
  --grad-shimmer: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
}

/* 深色模式變數（自動偵測 prefers-color-scheme，可由 body[data-theme=dark] 強制覆蓋） */
@media (prefers-color-scheme: dark) {
  :root.dark-auto {
    --bg-cream: #0F1B24;
    --light: #1A2832;
    --navy: #E8EEF2;
    --border: #2A3744;
  }
}
body[data-theme="dark"] {
  --bg-cream: #0F1B24;
  --light: #1A2832;
  --border: #2A3744;
  background: #0A141C !important;
}
body[data-theme="dark"] .page { background: #0F1B24; box-shadow: 0 20px 80px rgba(0,0,0,0.6); }
body[data-theme="dark"] .info-card,
body[data-theme="dark"] .feature-list li,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .data-table { background: #1A2832; color: #E8EEF2; border-color: #2A3744; }
body[data-theme="dark"] .data-table tbody td { color: #E8EEF2; }
body[data-theme="dark"] .block-title,
body[data-theme="dark"] .section-title,
body[data-theme="dark"] .feat-text strong { color: #F5DBA7; }
body[data-theme="dark"] .content { background: #0F1B24; }
body[data-theme="dark"] .info-card-highlight { background: linear-gradient(135deg, rgba(240,90,40,0.18) 0%, rgba(26,40,50,1) 100%); }

/* ───── V3.1 SCROLL REVEAL（資料屬性驅動，無 framework） ───── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-out-quint), transform 0.85s var(--ease-out-quint);
}
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-visible {
  opacity: 1;
  transform: none; /* 不留殘餘 transform，避免捲動時每區塊常駐合成圖層（iOS 重影） */
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ───── V3.2 COUNT-UP 數字計數動畫 ───── */
[data-countup] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ───── V3.3 玻璃擬態 ───── */
.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
}
.glass-light {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
}

/* ───── V3.4 全站案例卡 / 商品卡 / 鑽石卡 進階懸浮 ───── */
.case-card-diamond,
.case-card-gold,
.case-card-std,
.case-diamond,
.product-card,
.k-card,
.knowledge-card,
.res-card,
.qn-item {
  position: relative;
  isolation: isolate;
}

/* 鑽石卡金光暈再強化 */
.case-card-diamond,
.case-diamond {
  background-image: linear-gradient(135deg, var(--navy) 0%, #1A4A5A 50%, #0F3645 100%) !important;
}
.case-card-diamond::after,
.case-diamond::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0%, rgba(232,160,32,0.45) 25%, transparent 50%, rgba(232,160,32,0.45) 75%, transparent 100%);
  filter: blur(14px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s var(--ease-out-quint);
  animation: orbitGlow 8s linear infinite;
}
.case-card-diamond:hover::after,
.case-diamond:hover::after {
  opacity: 1;
}
@keyframes orbitGlow {
  to { transform: rotate(360deg); }
}

/* 卡片群通用上浮陰影深化 */
.case-card-gold:hover,
.case-card-std:hover,
.product-card:hover,
.knowledge-card:hover,
.res-card:hover,
.profile-card:hover,
.audience-card:hover,
.feat-card:hover,
.benefit-card:hover,
.month-card:hover,
.idx-card:hover {
  transform: translateY(-5px) !important;
}

/* ───── V3.5 SVG 迷你圖表元件（內嵌到案例頁） ───── */
.mini-chart-block {
  background: linear-gradient(180deg, #fff 0%, var(--bg-cream) 100%);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mini-chart-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-warm);
}
.mini-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) {
  .mini-chart-grid { grid-template-columns: 1fr; }
}
.mini-chart-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: all 0.3s var(--ease-out-quint);
}
.mini-chart-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange);
}
.mini-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.mini-chart-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1px;
}
.mini-chart-subtitle {
  font-size: 10px;
  color: #999;
  letter-spacing: 1px;
  margin-top: 4px;
  text-transform: uppercase;
}
.mini-chart-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--orange);
  letter-spacing: 1px;
  line-height: 1;
}
.mini-chart-value.green { color: var(--green); }
.mini-chart-value.teal { color: var(--teal); }
.mini-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.mini-chart-svg .bar-rect {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform-origin: bottom;
}
.mini-chart-svg .bar-rect:hover {
  opacity: 0.85;
}
.mini-chart-svg .line-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mini-chart-svg .area-fill {
  opacity: 0.18;
}
.mini-chart-svg .axis-line {
  stroke: #E0DAC9;
  stroke-width: 1;
  stroke-dasharray: 3,3;
}
.mini-chart-svg .data-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  fill: #888;
  letter-spacing: 0.5px;
}
.mini-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: #888;
  margin-top: 8px;
  letter-spacing: 1px;
  flex-wrap: wrap;
}
.mini-chart-legend .legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.mini-chart-note {
  font-size: 10px;
  color: #aaa;
  margin-top: 10px;
  letter-spacing: 0.5px;
  font-style: italic;
}

/* SVG bar animation on reveal */
.mini-chart-svg .bar-rect {
  transform-origin: bottom center;
  animation: barRise 1.2s var(--ease-out-quint) backwards;
}
.mini-chart-svg .bar-rect:nth-child(1) { animation-delay: 0.05s; }
.mini-chart-svg .bar-rect:nth-child(2) { animation-delay: 0.1s; }
.mini-chart-svg .bar-rect:nth-child(3) { animation-delay: 0.15s; }
.mini-chart-svg .bar-rect:nth-child(4) { animation-delay: 0.2s; }
.mini-chart-svg .bar-rect:nth-child(5) { animation-delay: 0.25s; }
.mini-chart-svg .bar-rect:nth-child(6) { animation-delay: 0.3s; }
.mini-chart-svg .bar-rect:nth-child(7) { animation-delay: 0.35s; }
.mini-chart-svg .bar-rect:nth-child(8) { animation-delay: 0.4s; }
.mini-chart-svg .bar-rect:nth-child(9) { animation-delay: 0.45s; }
.mini-chart-svg .bar-rect:nth-child(10) { animation-delay: 0.5s; }
.mini-chart-svg .bar-rect:nth-child(11) { animation-delay: 0.55s; }
.mini-chart-svg .bar-rect:nth-child(12) { animation-delay: 0.6s; }
@keyframes barRise {
  from { transform: scaleY(0); opacity: 0.3; }
  to { transform: scaleY(1); opacity: 1; }
}

/* 線圖描繪動畫 */
.mini-chart-svg .line-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineDraw 1.6s var(--ease-out-quint) 0.2s forwards;
}
@keyframes lineDraw {
  to { stroke-dashoffset: 0; }
}

/* ───── V3.6 TAB 切換動畫升級（products/） ───── */
.tab-pane {
  animation: tabSlideIn 0.45s var(--ease-out-quint);
}
.tab-pane.fade-leave {
  animation: tabSlideOut 0.2s ease-in;
}
@keyframes tabSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tabSlideOut {
  to { opacity: 0; transform: translateY(-6px); }
}
.tab-bar button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tab-bar button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-warm);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.tab-bar button.active::before { opacity: 1; }
.tab-bar button.active {
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-orange);
  transform: translateY(-1px);
}

/* ───── V3.7 RWD 強化（小螢幕表格） ───── */
@media (max-width: 720px) {
  .data-table { font-size: 11px; }
  .data-table thead th, .data-table tbody td { padding: 8px 6px; }
  /* 大型表格小螢幕橫向滾動 */
  .table-scroll-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -10px;
    padding: 0 10px;
  }
  .table-scroll-mobile .data-table { min-width: 560px; }
  .table-scroll-mobile::after {
    content: '← 左右滑動 →';
    display: block;
    font-size: 10px;
    color: #999;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 6px;
    opacity: 0.7;
  }
  .hero-case { padding: 24px 20px 28px !important; }
  .hero-case-grid { grid-template-columns: 1fr !important; }
  .hero-case-amount { font-size: 60px !important; }
}

/* ───── V3.8 搜尋元件樣式（cases/index.html 用） ───── */
.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
.search-box input {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 25px;
  padding: 10px 16px 10px 38px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--navy);
  font-family: inherit;
  transition: all 0.25s;
}
.search-box input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 4px 14px rgba(240,90,40,0.18);
}
.search-box::before {
  content: '🔍';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.6;
  pointer-events: none;
}

/* ───── V3.10 列印優化擴充 ───── */
@media print {
  body { background: #fff !important; -webkit-print-color-adjust: exact; }
  .page { box-shadow: none !important; max-width: 100% !important; }
  .float-cta, .back-link, .spa-home-btn, #spa-loader, #spa-progress { display: none !important; }
  .hero, .hero-case, .product-hero, .allianz-hero, .subpage-header {
    background: linear-gradient(135deg, #0D2A3A, #1a4a5a) !important;
    color: #fff !important;
  }
  .section, .content { padding: 24px 32px !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a { color: inherit; text-decoration: none; }
  .mini-chart-svg .bar-rect, .mini-chart-svg .line-path { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .case-card-diamond, .case-diamond, .case-card-gold, .case-card-std {
    page-break-inside: avoid;
  }
  .section-block { page-break-inside: avoid; }
}

/* ───── V4 home.html 白金/鈦金案例卡(case-card-diamond + .case-card-premium) ───── */
.case-card-premium[data-tier="platinum"] {
  border-color: #c8ccd2 !important;
  box-shadow: 0 8px 24px rgba(200,204,210,0.22) !important;
}
.case-card-premium[data-tier="platinum"]:hover {
  box-shadow: 0 14px 32px rgba(200,204,210,0.4) !important;
}
.case-card-premium[data-tier="platinum"] .case-tier-badge {
  background: linear-gradient(135deg, #f7f8fa 0%, #d6d8db 55%, #a8acb1 100%) !important;
  color: #1a1f24 !important;
}
.case-card-premium[data-tier="platinum"] .case-amount {
  background: linear-gradient(135deg, #f7f8fa 0%, #c0c4c8 55%, #8d9196 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.case-card-premium[data-tier="titanium"] {
  border-color: #6e7378 !important;
  box-shadow: 0 8px 24px rgba(70,75,80,0.3) !important;
}
.case-card-premium[data-tier="titanium"]:hover {
  box-shadow: 0 14px 32px rgba(70,75,80,0.45) !important;
}
.case-card-premium[data-tier="titanium"] .case-tier-badge {
  background: linear-gradient(135deg, #b0b3b8 0%, #6e7378 55%, #3d4146 100%) !important;
  color: #f4f5f7 !important;
}
.case-card-premium[data-tier="titanium"] .case-amount {
  background: linear-gradient(135deg, #d0d2d6 0%, #8d9196 55%, #5d6166 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ───── V3.11 「鑽石/金/標準」案例分級徽章脈動 ───── */
.case-tier-badge,
.hero-case-tag,
.case-d-tag {
  position: relative;
  overflow: hidden;
}
.case-tier-badge::after,
.hero-case-tag::after,
.case-d-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-shimmer);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: shimmerSlide 3.5s linear infinite;
  pointer-events: none;
}
@keyframes shimmerSlide {
  to { background-position: -100% 0; }
}

/* ───── V3.12 統計大數字加底光 ───── */
.hero-stat-value,
.summary-stat-value {
  text-shadow: 0 0 24px rgba(232,160,32,0.35);
}

/* ───── V3.13 預設 a 點擊高亮抑制 ───── */
a, button {
  -webkit-tap-highlight-color: rgba(240,90,40,0.15);
}

/* ───── V3.14 整頁淡入（SPA 切換補強） ───── */
#spa-content .page {
  animation: fadeUp 0.55s var(--ease-out-quint);
}

/* ───── V3.15 hero/section 標題 gradient text 工具 ───── */
.text-gradient-warm {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ───── V3.16 parallax 工具類（不依賴 JS，CSS background-attachment） ───── */
.parallax-bg {
  background-attachment: fixed !important;
}
@media (max-width: 900px) {
  .parallax-bg { background-attachment: scroll !important; }
}

/* ───── V3.17 footer-mini 強化（多列版） ───── */
.footer-rich {
  background: linear-gradient(180deg, rgba(232,160,32,0.04) 0%, var(--navy-deep) 100%);
  padding: 36px 56px 28px !important;
  text-align: left !important;
}
.footer-rich .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.footer-rich .footer-col h4 {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  font-weight: 900;
}
.footer-rich .footer-col a {
  display: block;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.footer-rich .footer-col a:hover { color: var(--gold); }
.footer-rich .footer-line { text-align: center; }
@media (max-width: 720px) {
  .footer-rich { padding: 28px 20px 20px !important; }
  .footer-rich .footer-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ───── V3.18 知識/資源/FAQ 觸發互動加強 ───── */
.faq-item summary {
  position: relative;
}
.faq-item summary:focus { outline: none; }
.faq-item summary:focus-visible {
  box-shadow: 0 0 0 3px rgba(240,90,40,0.3);
}
.faq-item[open] {
  animation: faqOpen 0.4s var(--ease-out-quint);
}
@keyframes faqOpen {
  from { transform: translateY(2px); opacity: 0.7; }
  to { transform: translateY(0); opacity: 1; }
}

/* ───── V3.19 標籤 / 徽章自動排版 ───── */
.tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ───── V3.20 Hero 上方數字計數時的小提示 ───── */
[data-countup]::after {
  content: '';
}

/* ───── V3.21 商品卡保險公司色點 ───── */
.product-card[data-brand="kgi"]::before,
.product-card[data-brand="yuanta"]::before,
.product-card[data-brand="bnp"]::before,
.product-card[data-brand="chubb"]::before,
.product-card[data-brand="allianz"]::before {
  background: var(--grad-warm) !important;
}

/* ───── V3.22 平滑滾動 + 鎖定 viewport 偏移（避免 anchor 被 hero 蓋住） ───── */
:where(section[id]) {
  scroll-margin-top: 24px;
}

/* ───── V3.23 文字工具類 ───── */
.font-display { font-family: 'Playfair Display', serif; font-style: italic; }
.font-num { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }
.text-gold { color: var(--gold); }
.text-orange { color: var(--orange); }
.text-teal { color: var(--teal); }
.text-navy { color: var(--navy); }
.text-muted { color: #8a8f95; }

/* ───── V3.24 高品質 hover 微交互（資源卡圖示自動修正） ───── */
.res-card .res-icon-wrap {
  transition: all 0.35s var(--ease-spring);
}
.res-card:hover .res-icon-wrap {
  transform: rotate(-6deg) scale(1.1);
}

/* ───── V3.25 強化首頁 hero stats 卡片懸浮 ───── */
.hero-stat {
  transition: background 0.3s ease, transform 0.3s var(--ease-out-quint);
}
.hero-stat:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.hero-stat:hover .hero-stat-value {
  text-shadow: 0 0 32px rgba(232,160,32,0.6);
}

/* ───── V3.26 鑽石卡 動態金線邊框 ───── */
.case-card-diamond .case-amount,
.case-diamond .case-d-amount,
.case-diamond .case-amount {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(232,160,32,0.4));
}

/* ───── V3.27 product-card 進階：浮現「了解更多」遮罩 ───── */
.product-card .product-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,42,58,0.92) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 900;
}
.product-card:hover .product-overlay { opacity: 1; }

/* ───── V3.28 進場 stagger（卡片網格） ───── */
.products-grid > *,
.case-diamond-row > *,
.case-gold-row > *,
.case-std-row > *,
.diamond-grid > *,
.knowledge-grid > *,
.resources-grid > *,
.quicknav-grid > * {
  animation: fadeUp 0.7s var(--ease-out-quint) backwards;
}
.products-grid > *:nth-child(1) { animation-delay: 0.05s; }
.products-grid > *:nth-child(2) { animation-delay: 0.1s; }
.products-grid > *:nth-child(3) { animation-delay: 0.15s; }
.products-grid > *:nth-child(4) { animation-delay: 0.2s; }
.products-grid > *:nth-child(5) { animation-delay: 0.25s; }
.products-grid > *:nth-child(6) { animation-delay: 0.3s; }
.case-diamond-row > *:nth-child(1),
.case-gold-row > *:nth-child(1),
.case-std-row > *:nth-child(1) { animation-delay: 0.05s; }
.case-diamond-row > *:nth-child(2),
.case-gold-row > *:nth-child(2),
.case-std-row > *:nth-child(2) { animation-delay: 0.1s; }
.case-diamond-row > *:nth-child(3),
.case-gold-row > *:nth-child(3),
.case-std-row > *:nth-child(3) { animation-delay: 0.15s; }
.case-diamond-row > *:nth-child(4),
.case-gold-row > *:nth-child(4),
.case-std-row > *:nth-child(4) { animation-delay: 0.2s; }

/* ───── V3.29 案例頁專屬 chart-section 包裝 ───── */
.case-projection-section {
  margin-top: 16px;
}
.case-projection-section .block-title { margin-bottom: 4px; }

/* ───── V3.30 高 z-index 層級規範 ───── */
/* loader: 9999, progress: 10000, float-cta: 999, home-btn: 998 */

/* ───── V3.31 案例對帳單截圖區塊 + Lightbox（V3.32 升級：置頂 + 放大） ───── */
.case-screenshots-section {
  margin-top: 0 !important;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 2px dashed rgba(232,160,32,0.35);
}
.case-screenshots-section[hidden] { display: none; }
.case-screenshots-section .block-title {
  font-size: 26px !important;
  letter-spacing: 2px;
}
.case-screenshots-section .block-title::before {
  height: 26px;
  background: linear-gradient(135deg, var(--gold), var(--orange)) !important;
}
.case-screenshots-section .block-subtitle {
  font-size: 14px;
  margin-bottom: 24px;
}

.screenshots-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
}
.screenshot-card {
  background: #fff;
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all 0.35s var(--ease-out-quint);
  box-shadow: var(--shadow-md);
}
.screenshot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(232,160,32,0.35);
  border-color: var(--orange);
}
.screenshot-card::after {
  content: '🔍 點擊放大檢視';
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(13,42,58,0.85);
  color: #fff;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 14px;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(6px);
  font-weight: 700;
  pointer-events: none;
}
.screenshot-card:hover::after { opacity: 1; }
.screenshot-card img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-cream);
  /* 保持原始比例，不再強制 min-height（避免細長表格被拉伸） */
}
/* 圖片上方薄條（不擋圖） */
.ss-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--bg-cream) 0%, rgba(232,160,32,0.08) 100%);
  border-bottom: 1.5px solid var(--gold);
}
.screenshot-card .ss-tag {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(232,160,32,0.3);
  position: static;          /* 取消絕對定位 */
}
.screenshot-card .ss-date {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: 2px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.screenshot-card .ss-date::before {
  content: '📅';
  font-size: 13px;
}
/* 舊月份的 header 用較淡的橘色 */
.screenshot-month-group:not(:first-child) .ss-header {
  background: var(--bg-cream);
  border-bottom-color: var(--border);
}
.screenshot-month-group:not(:first-child) .ss-tag {
  background: #C5BFB0;
  box-shadow: none;
}
@media (max-width: 720px) {
  .case-screenshots-section .block-title { font-size: 22px !important; }
  .screenshot-card { border-width: 2px; }
  .ss-header { padding: 8px 12px; }
  .screenshot-card .ss-tag { font-size: 10px; padding: 3px 9px; letter-spacing: 1px; }
  .screenshot-card .ss-date { font-size: 12px; letter-spacing: 1px; }
  .screenshot-card::after { font-size: 10px; bottom: 10px; right: 10px; }
}

/* ───── V3.34 案例頁對帳單 年月分組顯示 ───── */
.screenshot-month-group {
  margin-bottom: 32px;
}
.screenshot-month-group:last-child {
  margin-bottom: 0;
}
.screenshot-month-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--bg-cream) 0%, rgba(232,160,32,0.1) 100%);
  border-left: 5px solid var(--gold);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--shadow-sm);
}
.month-icon {
  font-size: 20px;
  line-height: 1;
}
.month-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--navy);
  letter-spacing: 3px;
  font-weight: 900;
  line-height: 1;
}
.month-badge {
  background: linear-gradient(135deg, var(--green) 0%, #1a6b3a 100%);
  color: #fff;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: 14px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(46,139,87,0.4);
  animation: pulse-soft 2.4s ease-in-out infinite;
}
.month-count {
  margin-left: auto;
  font-size: 12px;
  color: #888;
  letter-spacing: 1px;
  font-weight: 700;
}
.screenshot-month-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* 最新月份的圖加金色邊框，舊月份維持淺色 */
.screenshot-month-group:first-child .screenshot-card {
  border-color: var(--gold);
}
.screenshot-month-group:not(:first-child) .screenshot-card {
  border-color: var(--border);
  border-width: 2px;
  opacity: 0.92;
}
.screenshot-month-group:not(:first-child) .screenshot-card:hover {
  opacity: 1;
  border-color: var(--orange);
}
@media (max-width: 720px) {
  .month-label { font-size: 22px; letter-spacing: 2px; }
  .screenshot-month-header { padding: 10px 16px; gap: 10px; }
  .month-count { font-size: 11px; }
}

/* ───── V3.33 案例頁精簡：隱藏 Hero 模板假資料 ───── */
.hero-case-title,
.hero-case-subtitle {
  display: none !important;
}
/* hero-case-id-row 第 3 個 meta 是「客戶年齡」假資料 */
.hero-case-id-row .meta:nth-of-type(3) {
  display: none !important;
}
/* 重新調整 Hero 排版（少了 title/subtitle 後不留太多空白） */
.hero-case .hero-case-grid {
  align-items: center !important;
  min-height: 180px;
}
.hero-case-tag {
  margin-bottom: 18px !important;
}
.hero-case-id-row {
  margin-top: 14px !important;
}

/* ───── V4 案例 5 級徽章配色(DIAMOND/PLATINUM/TITANIUM/GOLD/SILVER) ───── */
.hero-case-tag.tier-diamond {
  background: linear-gradient(135deg, #B9F2FF 0%, #FFD700 55%, #E8A020 100%) !important;
  color: #1a2b3c !important;
  box-shadow: 0 2px 14px rgba(255,215,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
}
.hero-case-tag.tier-platinum {
  background: linear-gradient(135deg, #f7f8fa 0%, #d6d8db 55%, #a8acb1 100%) !important;
  color: #1a1f24 !important;
  box-shadow: 0 2px 12px rgba(180,184,190,0.45), inset 0 0 0 1px rgba(255,255,255,0.55) !important;
}
.hero-case-tag.tier-titanium {
  background: linear-gradient(135deg, #b0b3b8 0%, #6e7378 55%, #3d4146 100%) !important;
  color: #f4f5f7 !important;
  box-shadow: 0 2px 12px rgba(60,65,70,0.5), inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
.hero-case-tag.tier-gold {
  background: linear-gradient(135deg, #ffd76b 0%, #e8a020 55%, #b97412 100%) !important;
  color: #1a1f24 !important;
  box-shadow: 0 2px 12px rgba(232,160,32,0.42), inset 0 0 0 1px rgba(255,255,255,0.3) !important;
}
.hero-case-tag.tier-silver {
  background: linear-gradient(135deg, #f3f5f7 0%, #c0c4c8 55%, #8d9196 100%) !important;
  color: #1a1f24 !important;
  box-shadow: 0 2px 10px rgba(155,160,170,0.4), inset 0 0 0 1px rgba(255,255,255,0.45) !important;
}

/* ───── V3.35 Hero 右側：純排版精緻設計（無框、典雅、有層次） ───── */
.hero-case-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 56px;
  text-align: right;
  position: relative;
}
/* 兩個 block 中間的金色分隔線 */
.hero-case-right .hero-meta-block + .hero-meta-block {
  position: relative;
}
.hero-case-right .hero-meta-block + .hero-meta-block::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232,160,32,0.5) 30%,
    rgba(232,160,32,0.5) 70%,
    transparent 100%);
}
.hero-case-right .hero-meta-block {
  background: none;
  border: none;
  padding: 0;
  text-align: right;
  transition: opacity 0.3s ease;
}
.hero-meta-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.hero-meta-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.hero-case-date {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: #fff;
  line-height: 1;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(255,255,255,0.15);
}
.hero-case-right .hero-case-amount {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 64px !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  white-space: nowrap !important;   /* 防「萬」掉到下一行 */
  display: inline-flex !important;
  align-items: baseline !important;
  /* 金色漸層字 */
  background: linear-gradient(135deg, #FFD700 0%, #E8A020 50%, #F05A28 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(232,160,32,0.25));
}
.hero-case-right .hero-case-amount .unit {
  font-size: 22px !important;
  margin-left: 6px !important;
  -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
  background: none !important;
  filter: none;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .hero-case-right { gap: 32px; justify-content: flex-start; padding-top: 8px; }
  .hero-case-right .hero-meta-block + .hero-meta-block::before { left: -16px; }
  .hero-meta-label { font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; }
  .hero-meta-label::after { width: 20px; }
  .hero-case-date { font-size: 28px; letter-spacing: 1px; }
  .hero-case-right .hero-case-amount { font-size: 34px !important; letter-spacing: 1px !important; }
  .hero-case-right .hero-case-amount .unit { font-size: 16px !important; }
  .hero-case .hero-case-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

.screenshots-empty {
  display: none;
}

/* Lightbox 蓋層 */
#case-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(6,24,39,0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(8px);
  padding: 40px 20px;
  cursor: zoom-out;
}
#case-lightbox.show {
  display: flex;
  animation: fadeUp 0.3s ease-out;
}
#case-lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  background: #fff;
}
#case-lightbox .lb-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.25s;
}
#case-lightbox .lb-close:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(90deg);
}
#case-lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.25s;
}
#case-lightbox .lb-nav:hover {
  background: var(--orange);
  border-color: var(--orange);
}
#case-lightbox .lb-prev { left: 10px; }
#case-lightbox .lb-next { right: 10px; }
/* V4.170b: 反複製強化 — 佐證區禁選取、控制鈕壓在盾之上、列印時整區消失 */
.case-screenshots-section, #case-lightbox { user-select: none; -webkit-user-select: none; }
.case-screenshots-section img, #case-lightbox img { -webkit-user-drag: none; }
#case-lightbox .lb-close, #case-lightbox .lb-nav, #case-lightbox .lb-counter { z-index: 3; }
@media print { .case-screenshots-section, #case-lightbox { display: none !important; } }
/* V4.170: 箭頭縮小貼邊+圖片兩側留出走道,不再壓到對帳單內容 */
#case-lightbox .lb-nav { width: 44px; height: 44px; font-size: 22px; background: rgba(0,0,0,0.45); }
#case-lightbox img { max-width: calc(100vw - 140px); max-height: 88vh; }
@media (max-width: 700px) {
  #case-lightbox .lb-nav { width: 36px; height: 36px; top: auto; bottom: 14px; transform: none; }
  #case-lightbox img { max-width: 96vw; }
}
#case-lightbox .lb-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  background: rgba(0,0,0,0.4);
  padding: 6px 16px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
}
@media (max-width: 720px) {
  #case-lightbox .lb-nav { width: 44px; height: 44px; font-size: 22px; }
  #case-lightbox .lb-prev { left: 12px; }
  #case-lightbox .lb-next { right: 12px; }
}

/* ───── V3.36 已驗證徽章（manifest 有對帳單的案例自動標記） ───── */
.case-card-diamond.is-verified,
.case-card-gold.is-verified,
.case-card-std.is-verified,
.case-diamond.is-verified,
.case-gold.is-verified,
.case-std.is-verified {
  position: relative;
}
.verified-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, #2E8B57 0%, #1a6b3a 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(46,139,87,0.45);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: verified-pulse 2.4s ease-in-out infinite;
  border: 2px solid #fff;
}
.verified-badge::before {
  content: '✓';
  font-size: 12px;
}
@keyframes verified-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(46,139,87,0.45); }
  50% { transform: scale(1.05); box-shadow: 0 6px 16px rgba(46,139,87,0.65); }
}
/* 案例表格列的徽章 */
.case-table tbody tr.is-verified .id-cell::after {
  content: ' ✓';
  color: var(--green);
  font-weight: 900;
}

/* ───── V3.37 iPad / 平板響應式（橫式 + 直式） ───── */
/* iPad 直式 ~768px-1024px */
@media (min-width: 721px) and (max-width: 1024px) {
  .page { max-width: 100%; }
  .content { padding: 36px 32px; }

  /* Hero */
  .hero-case { padding: 28px 32px; }
  .hero-case-grid { gap: 24px; }
  .hero-case-right { gap: 36px; }
  .hero-case-date { font-size: 44px; letter-spacing: 2px; }
  .hero-case-right .hero-case-amount { font-size: 54px !important; }

  /* 案例卡片 */
  .case-diamond-row { grid-template-columns: 1fr 1fr; }
  .case-gold-row { grid-template-columns: repeat(2, 1fr); }
  .case-std-row { grid-template-columns: repeat(3, 1fr); }
  .diamond-grid { grid-template-columns: 1fr 1fr; }
  .gold-grid { grid-template-columns: repeat(2, 1fr); }
  .std-grid { grid-template-columns: repeat(3, 1fr); }

  /* 商品 + 資源 */
  .products-grid { grid-template-columns: 1fr 1fr; }
  .resources-grid { grid-template-columns: 1fr 1fr; }
  .knowledge-grid { grid-template-columns: 1fr 1fr; }
  .knowledge-grid .knowledge-card:first-child { grid-column: 1 / -1; }

  /* 安聯卡片 */
  .allianz-card { grid-template-columns: 1fr; }

  /* 首頁 hero */
  .hero { padding: 44px 32px 56px; }
  .hero-title { font-size: 54px; letter-spacing: 3px; }
  .hero-title .hero-title-en { font-size: 60px; }
  .hero-stats { grid-template-columns: repeat(5, 1fr); }
  .hero-trend-svg { width: 220px; height: 140px; right: 32px; opacity: 0.4; }
}

/* iPad 橫式 ~1024-1366 — 維持桌機版面，但縮一點留邊 */
@media (min-width: 1025px) and (max-width: 1366px) {
  .page { max-width: 1000px; }
  .hero-trend-svg { width: 280px; }
}

/* 手機橫式 480-720 */
@media (min-width: 481px) and (max-width: 720px) {
  .hero-case-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .hero-case-right { justify-content: flex-start; gap: 24px; }
  .hero-case-date { font-size: 30px; }
  .hero-case-right .hero-case-amount { font-size: 36px !important; }

  .case-diamond-row { grid-template-columns: 1fr 1fr; }
  .case-gold-row { grid-template-columns: 1fr 1fr; }
  .case-std-row { grid-template-columns: 1fr 1fr; }
  .diamond-grid { grid-template-columns: 1fr 1fr; }
  .gold-grid { grid-template-columns: 1fr 1fr; }
  .std-grid { grid-template-columns: 1fr 1fr; }

  .hero-stats { grid-template-columns: repeat(5, 1fr) !important; }
  .hero-trend-svg { display: none; }
}

/* 手機直式 <= 480 */
@media (max-width: 480px) {
  .page { box-shadow: none; }
  .content { padding: 24px 16px; }
  .hero-case { padding: 20px 16px 24px; }
  .hero-case-tag { font-size: 10px; padding: 3px 10px; }

  .hero-case-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .hero-case-right {
    gap: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .hero-case-right .hero-meta-block + .hero-meta-block::before {
    display: none;
  }
  .hero-case-right .hero-meta-block { flex: 1; min-width: 130px; }
  .hero-case-date { font-size: 22px !important; letter-spacing: 0.5px !important; }
  .hero-case-right .hero-case-amount { font-size: 28px !important; letter-spacing: 0.5px !important; }
  .hero-case-right .hero-case-amount .unit { font-size: 13px !important; }
  .hero-meta-label { font-size: 9px; letter-spacing: 1.5px; margin-bottom: 4px; }
  .hero-meta-label::after { width: 18px; }

  .hero-case-id-row .meta { padding: 8px 14px; }
  .hero-case-id-row .meta-value.lg { font-size: 20px; }

  /* 案例列表 */
  .case-diamond-row { grid-template-columns: 1fr; }
  .case-gold-row { grid-template-columns: 1fr; }
  .case-std-row { grid-template-columns: 1fr 1fr; }
  .diamond-grid { grid-template-columns: 1fr; }
  .gold-grid { grid-template-columns: 1fr; }
  .std-grid { grid-template-columns: 1fr 1fr; }

  /* 對帳單 */
  .screenshot-month-header { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .month-label { font-size: 18px; letter-spacing: 1px; }
  .month-badge { font-size: 9px; padding: 3px 10px; }
  .month-count { font-size: 10px; margin-left: 0; width: 100%; text-align: right; margin-top: 4px; }
  .screenshot-card { border-width: 2px; border-radius: 12px; }
  .ss-header { padding: 8px 12px; }
  .screenshot-card .ss-tag { font-size: 10px; padding: 3px 8px; letter-spacing: 1px; }
  .screenshot-card .ss-date { font-size: 11px; letter-spacing: 1px; }

  /* 首頁 hero */
  .hero { padding: 28px 18px 36px; }
  .hero-title { font-size: 38px; letter-spacing: 2px; }
  .hero-title .hero-title-en { font-size: 44px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stat-value { font-size: 32px; }
  .hero-trend-svg { display: none; }

  /* 商品 / 資源 */
  .products-grid { grid-template-columns: 1fr; }
  .resources-grid { grid-template-columns: 1fr 1fr; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .allianz-card { grid-template-columns: 1fr; }

  /* CTA */
  .cta-title { font-size: 24px; letter-spacing: 1px; }
  .cta-btn { font-size: 12px; padding: 12px 24px; }

  /* nav-cases */
  .nav-cases { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Lightbox 手機優化 */
  #case-lightbox img { max-width: 100vw; max-height: 75vh; }
  #case-lightbox .lb-counter { bottom: 10px; font-size: 14px; padding: 5px 12px; }

  /* Float CTA 縮小 */
  .float-cta { padding: 10px 18px; font-size: 12px; }
}

/* ───── V3.38 列印優化 ───── */
@media print {
  body { background: #fff !important; }
  .page { box-shadow: none !important; }
  .float-cta, .spa-home-btn, #spa-loader, #spa-progress, .back-link, .nav-cases { display: none !important; }
  .hero-case { padding: 20px 24px !important; page-break-after: avoid; }
  .hero-case-date, .hero-case-right .hero-case-amount {
    color: #0D2A3A !important;
    -webkit-text-fill-color: #0D2A3A !important;
    background: none !important;
    filter: none !important;
  }
  .case-screenshots-section { page-break-inside: avoid; }
  .screenshot-month-group { page-break-inside: avoid; }
  .screenshot-card { page-break-inside: avoid; break-inside: avoid; border-width: 1px !important; }
  .ss-header { background: #f5f5f5 !important; }
  .screenshot-card img { max-height: 80vh; }
  /* 隱藏不需印的 */
  .case-screenshots-section [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* 每頁邊距 */
  @page { margin: 12mm; }
}

/* ───── V3.39 觸控優化（行動裝置點擊熱區、無 hover 處理） ───── */
@media (hover: none) {
  /* 手機沒 hover，把 hover 效果改成 active */
  .case-card-diamond:active, .case-card-gold:active, .case-card-std:active,
  .case-diamond:active, .case-gold:active, .case-std:active,
  .product-card:active, .knowledge-card:active, .res-card:active,
  .screenshot-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s;
  }
  /* 預設展示 hover 視覺 */
  .screenshot-card::after { opacity: 0.85; }
}

/* ───── V3.40 平板橫式（iPad landscape 1024-1366） ───── */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
  .hero-case-right { gap: 44px; }
  .hero-case-date { font-size: 60px; }
  .hero-case-right .hero-case-amount { font-size: 70px !important; }
  /* 主頁 hero 縮小 trend SVG */
  .hero-trend-svg { width: 260px; opacity: 0.45; }
}

/* ───── V3.41 hero 高度動態 ───── */
@media (min-width: 481px) {
  .hero-case { min-height: auto; }
}

/* ───── V3.42 對帳單最大顯示寬度（避免在 iPad 橫式太寬看不清楚） ───── */
@media (min-width: 1025px) {
  .screenshots-grid {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ───── V3.43 Lightbox 觸控滑動切換 ───── */
#case-lightbox img {
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

/* ===== V4 a11y + detail polish (2026/06) ===== */

/* V4.0 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-countup] { animation: none !important; }
}

/* V4.1 keyboard focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--gold, #E8A020) !important;
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(232,160,32,0.18);
  transition: outline-offset .12s, box-shadow .12s;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* V4.2 skip-to-content */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--navy, #0D2A3A);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  z-index: 100000;
  transition: top .2s;
}
.skip-link:focus { top: 8px; }

/* V4.3 touch device disable hover transform */
@media (hover: none) {
  .case-diamond:hover,
  .case-gold:hover,
  .case-std:hover,
  .product-card:hover,
  .filter-tab:hover {
    transform: none !important;
  }
}

/* V4.4 selection color */
::selection {
  background: var(--gold, #E8A020);
  color: var(--navy, #0D2A3A);
}

/* V4.5 custom scrollbar (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(13,42,58,0.04); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold, #E8A020) 0%, var(--orange, #F05A28) 100%);
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFD700 0%, var(--orange-deep, #D04618) 100%);
}
body[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }

/* V4.6 case ID select all on click */
.id-cell, .case-d-id, .case-g-id, .case-std-id {
  -webkit-user-select: all;
  user-select: all;
}

/* End V4 layer */

/* ───── V4.x 觸控裝置合成層減載（iPad Safari 捲動重影／區塊變黑） ─────
   根因：十多個全寬區塊同時帶 will-change/transform + 16+ 個 backdrop-filter + 無限動畫，
   舊 iOS WebKit 合成層吃光記憶體 → 文字雙重繪製、區塊漏繪。滑鼠桌機不受影響。 */
@media (hover: none) and (pointer: coarse) {
  #spa-content *, #spa-content *::before, #spa-content *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #spa-content *::before, #spa-content *::after { filter: none !important; }
  #spa-content .page > section { animation: none !important; }
  #spa-content *, #spa-content *::before, #spa-content *::after {
    animation-iteration-count: 1 !important;
  }
  #spa-content .cta-section::after,
  #spa-content .cta-btn-primary,
  #spa-content [style*="pulse-soft"] { animation: none !important; }
  #spa-content .parallax-bg { background-attachment: scroll !important; }
  #spa-content [data-reveal] { will-change: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   V5 質感層「私人銀行 Private Banking」（2026-10-18 質感深度優化，競稿 va 勝出）
   淺色＝:root、原生深色＝html[data-rex-theme="dark"]（全站已宣告 rex-theme native）
   元件規則前綴 :is(#spa-content, body:not(:has(#spa-content)))：SPA 內與直開子頁都吃得到、權重同 #id
   以下由總架構師維護；各頁專屬樣式寫在該頁自己的 <style>
   ═══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   proto-va.css ・ 「私人銀行 Private Banking」設計層（rex/vip 全站共用）
   方向：深海軍藍 #0a2334 ＋ 香檳金 #E8A020｜Playfair Display 襯線數字｜細金髮絲線｜
         低對比層次卡片（細邊框＋柔和長陰影）｜極克制動畫（淡入＋2px 浮起）
   載入順序：shared.css → proto-va.css（本檔）→ 各子頁自己的 <style>（SPA 會把它注入 :is(#spa-content,body:not(:has(#spa-content)))）
   因此子頁共用元件的規則一律掛在 :is(#spa-content,body:not(:has(#spa-content))) 底下（ID 權重 > 子頁的 class 規則），不必到處加 !important。
   若日後併入 shared.css 正式化：把 ":is(#spa-content,body:not(:has(#spa-content)))" 全部換成 "body" 即可（權重仍高於單一 class）。
   明暗：淺色＝:root；原生深色＝html[data-rex-theme="dark"]（頁面宣告 <meta name="rex-theme" content="native">）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────── 0. DESIGN TOKENS ───────── */
:root{
  color-scheme:light;
  /* 深海軍藍階 */
  --pb-navy-950:#06141f;
  --pb-navy-900:#0a2334;
  --pb-navy-800:#0e2f45;
  --pb-navy-700:#143d57;
  /* 香檳金：fill／髮絲線＝#E8A020 系；文字依底色分兩支 */
  --pb-gold:#E8A020;
  --pb-gold-hi:#EDBB5C;      /* 深底上的金色文字／數字 */
  --pb-gold-lo:#B97D12;      /* 髮絲線、邊框 */
  --pb-gold-ink:#8F5F0A;     /* 淺底上的金色文字（對 ivory 5.2:1） */
  --pb-gold-tint:rgba(232,160,32,.09);
  --pb-hair-gold:rgba(184,125,18,.42);
  --pb-on-navy:#F3EFE6;
  --pb-on-navy-2:rgba(243,239,230,.78);
  --pb-on-navy-3:rgba(243,239,230,.60);
  /* 紙張層次 */
  --pb-bg:#EBE7DE;           /* body 底（紙外） */
  --pb-sheet:#FBF9F5;        /* 主頁紙面 */
  --pb-sheet-2:#F4F0E7;      /* 次層帶狀區 */
  --pb-sheet-3:#EAE4D6;
  --pb-card:#FFFFFF;
  --pb-ink:#0A2334;
  --pb-ink-2:#3D4F5C;
  --pb-ink-3:#5D6E7B;
  --pb-line:rgba(10,35,52,.13);
  --pb-line-soft:rgba(10,35,52,.07);
  --pb-pos:#2C7A57;
  --pb-neg:#B23A45;
  /* 深色帶狀區（hero／商品／CTA／頁尾）漸層停靠點 */
  --pb-band-1:#0f3249;
  --pb-band-2:#0a2334;
  --pb-band-3:#061826;
  --pb-band-1-rgb:15,50,73;
  --pb-band-2-rgb:10,35,52;
  --pb-band-3-rgb:6,24,38;
  /* 字體 */
  --pb-serif:'Playfair Display','Noto Serif TC',Georgia,'Times New Roman',serif;
  --pb-sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --pb-caps:'Montserrat','Noto Sans TC',sans-serif;
  /* 8px 間距系統 */
  --pb-s1:8px; --pb-s2:16px; --pb-s3:24px; --pb-s4:32px; --pb-s5:40px; --pb-s6:48px; --pb-s8:64px; --pb-s10:80px; --pb-s12:96px;
  /* 圓角 */
  --pb-r1:2px; --pb-r2:4px; --pb-r3:8px; --pb-r4:12px;
  /* 景深（柔和長陰影） */
  --pb-sh-1:0 1px 2px rgba(10,35,52,.05),0 10px 26px -14px rgba(10,35,52,.16);
  --pb-sh-2:0 2px 4px rgba(10,35,52,.05),0 22px 48px -22px rgba(10,35,52,.26);
  --pb-sh-3:0 4px 10px rgba(10,35,52,.06),0 36px 70px -26px rgba(10,35,52,.36);
  --pb-sh-sheet:0 50px 120px -50px rgba(10,35,52,.34),0 0 0 1px rgba(10,35,52,.05);
  /* 動畫：克制 */
  --pb-ease:cubic-bezier(.2,.7,.2,1);
  --pb-dur:.28s;

  /* ── 舊 token 重映射：讓 shared.css 與各子頁既有的 var(--orange) 等自動吃到新配色 ── */
  --navy:#0A2334; --navy-deep:#06141F; --light:#F4F0E7;
  --gold:#E8B450; --gold-bright:#F6D58A;
  --orange:#A8700C; --orange-deep:#7C5207; --orange-light:#F7EDD6;
  --teal:#1F5673; --teal-deep:#143D57; --teal-light:#E6EDF2;
  --green:#2C7A57; --red:#B23A45;
  --bg-cream:#F6F2E9; --border:#E3DDCF;
  --ink-mut:#5D6E7B;
  --shadow-sm:var(--pb-sh-1); --shadow-md:var(--pb-sh-2); --shadow-lg:var(--pb-sh-3);
  --shadow-gold:0 14px 34px -14px rgba(184,125,18,.45); --shadow-orange:0 14px 34px -14px rgba(184,125,18,.45);
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px;
  --ease-out-quint:var(--pb-ease); --ease-spring:var(--pb-ease);
  --grad-warm:linear-gradient(135deg,#C98A1E 0%,#E8B450 100%);
  --grad-deep:linear-gradient(135deg,#0E2F45 0%,#06141F 100%);
  --grad-teal:linear-gradient(135deg,#1F5673 0%,#143D57 100%);
}
html[data-rex-theme="dark"]{
  color-scheme:dark;
  --pb-gold-hi:#D6B676;
  --pb-gold-lo:#B8934A;
  --pb-gold-ink:#D6B676;
  --pb-gold-tint:rgba(214,182,118,.10);
  --pb-hair-gold:rgba(214,182,118,.34);
  --pb-on-navy:#E9EDF0;
  --pb-on-navy-2:rgba(233,237,240,.78);
  --pb-on-navy-3:rgba(233,237,240,.58);
  --pb-bg:#040e16;
  --pb-sheet:#0a1c2a;
  --pb-sheet-2:#0c2233;
  --pb-sheet-3:#0f2a3d;
  --pb-card:#102739;
  --pb-ink:#E8EDF1;
  --pb-ink-2:#B6C3CD;
  --pb-ink-3:#8DA0AF;
  --pb-line:rgba(214,182,118,.16);
  --pb-line-soft:rgba(233,237,240,.08);
  --pb-pos:#5FBF92;
  --pb-neg:#E27D86;
  --pb-band-1:#0d2b40;
  --pb-band-2:#08202f;
  --pb-band-3:#04111b;
  --pb-band-1-rgb:13,43,64;
  --pb-band-2-rgb:8,32,47;
  --pb-band-3-rgb:4,17,27;
  --pb-sh-1:inset 0 1px 0 rgba(255,255,255,.035),0 12px 30px -16px rgba(0,0,0,.65);
  --pb-sh-2:inset 0 1px 0 rgba(255,255,255,.04),0 26px 52px -24px rgba(0,0,0,.75);
  --pb-sh-3:inset 0 1px 0 rgba(255,255,255,.05),0 40px 76px -30px rgba(0,0,0,.85);
  --pb-sh-sheet:0 50px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(214,182,118,.07);

  --navy:#E8EDF1; --navy-deep:#04111B; --light:#0C2233;
  --gold:#D6B676; --gold-bright:#E8D2A0;
  --orange:#D6B676; --orange-deep:#E8D2A0; --orange-light:rgba(214,182,118,.12);
  --teal:#8FBBD4; --teal-deep:#B5D4E4; --teal-light:rgba(143,187,212,.12);
  --green:#5FBF92; --red:#E27D86;
  --bg-cream:#102739; --border:#22405a;
  --ink-mut:#8DA0AF;
  --shadow-gold:0 14px 34px -14px rgba(0,0,0,.7); --shadow-orange:0 14px 34px -14px rgba(0,0,0,.7);
  --grad-warm:linear-gradient(135deg,#B8934A 0%,#D6B676 100%);
}

/* ───────── 1. 基礎 ───────── */
html{scroll-behavior:smooth}
body{
  background:var(--pb-bg);
  background-image:radial-gradient(1100px 520px at 50% -180px,rgba(255,255,255,.65),transparent 70%);
  background-repeat:no-repeat;
  color:var(--pb-ink);
  font-family:var(--pb-sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums;
}
html[data-rex-theme="dark"] body{background-image:radial-gradient(1000px 520px at 50% -200px,rgba(214,182,118,.07),transparent 70%)}
::selection{background:var(--pb-gold);color:var(--pb-navy-900)}
::-moz-selection{background:var(--pb-gold);color:var(--pb-navy-900)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(184,125,18,.35);border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(184,125,18,.6);background-clip:content-box}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--pb-gold) !important;outline-offset:3px;border-radius:4px;box-shadow:none;
}
a{transition:color var(--pb-dur) var(--pb-ease),background-color var(--pb-dur) var(--pb-ease),border-color var(--pb-dur) var(--pb-ease),transform var(--pb-dur) var(--pb-ease)}

/* 動畫曲線：把 shared.css 的 fadeUp 12px 改成 2px（所有 stagger／進場一起變克制） */
@keyframes fadeUp{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:1}}
@keyframes drift{0%,100%{transform:none}50%{transform:none}}
[data-reveal]{opacity:0;transform:translateY(2px);transition:opacity .75s var(--pb-ease),transform .75s var(--pb-ease)}
[data-reveal="left"],[data-reveal="right"],[data-reveal="scale"],[data-reveal="fade"]{transform:translateY(2px)}
[data-reveal].is-visible{opacity:1;transform:none}

[data-countup]{font-variant-numeric:lining-nums tabular-nums}

/* 紙面 */
:is(#spa-content,body:not(:has(#spa-content))){min-height:100vh}
:is(#spa-content,body:not(:has(#spa-content))) .page{
  max-width:1080px;margin:0 auto;background:var(--pb-sheet);
  box-shadow:var(--pb-sh-sheet);overflow:hidden;position:relative;
}
:is(#spa-content,body:not(:has(#spa-content))) .page > *{animation:fadeUp .6s var(--pb-ease) backwards}

/* 浮動預約諮詢（電話 CTA）：低調的深海軍藍膠囊，不閃爍 */
:is(#spa-content,body:not(:has(#spa-content))) .float-cta{
  right:24px;bottom:24px;min-height:48px;padding:0 24px;border-radius:999px;
  background:linear-gradient(180deg,#123b55 0%,#0a2334 100%);color:#F6E7C2;
  border:1px solid rgba(232,180,80,.55);
  font-size:13px;font-weight:700;letter-spacing:.16em;gap:10px;
  box-shadow:0 20px 40px -16px rgba(6,20,31,.6),0 0 0 1px rgba(6,20,31,.2);
  animation:none;transition:transform var(--pb-dur) var(--pb-ease),box-shadow var(--pb-dur) var(--pb-ease),border-color var(--pb-dur) var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .float-cta::before{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .float-cta.is-away{opacity:0;transform:translateY(8px);pointer-events:none;visibility:hidden;transition:opacity .35s var(--pb-ease),transform .35s var(--pb-ease),visibility 0s linear .35s}
:is(#spa-content,body:not(:has(#spa-content))) .float-cta:hover{transform:translateY(-2px);border-color:var(--pb-gold-hi);box-shadow:0 24px 44px -16px rgba(6,20,31,.65),0 0 0 1px rgba(6,20,31,.2)}
:is(#spa-content,body:not(:has(#spa-content))) .float-cta > span:first-child:not(:last-child){display:inline-block;flex:none;width:18px;height:18px;font-size:0;line-height:0;background:var(--pb-gold-hi);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E") center/contain no-repeat}
:is(#spa-content,body:not(:has(#spa-content))) .float-cta svg{width:18px;height:18px;fill:none;stroke:var(--pb-gold-hi);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .float-cta{background:linear-gradient(180deg,#14364d 0%,#0a2334 100%);border-color:rgba(214,182,118,.5);box-shadow:0 20px 40px -16px rgba(0,0,0,.85),0 0 0 1px rgba(214,182,118,.12)}

/* ───────── 2. 版頭：子頁／商品／案例 hero ───────── */
:is(#spa-content,body:not(:has(#spa-content))) .subpage-header,
:is(#spa-content,body:not(:has(#spa-content))) .product-hero,
:is(#spa-content,body:not(:has(#spa-content))) .allianz-hero,
:is(#spa-content,body:not(:has(#spa-content))) .article-hero{
  position:relative;isolation:isolate;color:var(--pb-on-navy);
  padding:40px 64px 48px;
  /* 共用背景槽（V2 vip-header-band，4:1）：最底層＝插圖 --vip-header-img，上面蓋半透明深海軍藍，文字永遠清楚；沒圖＝純漸層（現在的樣子）。
     用法（業主補圖後，寫在 :root 或單頁外層）：--vip-header-img:url(assets/img/vip-header-band.webp);--vip-header-veil:.55;
     （url 相對於 shared.css；veil 預設 1＝幾乎不透，數字越小圖越明顯，建議 .45～.65）。舊名 --va-header-img 仍相容。 */
  background-color:var(--pb-band-2);
  background-image:
    radial-gradient(760px 420px at 92% -12%,rgba(232,160,32,.18),transparent 62%),
    radial-gradient(620px 420px at -8% 112%,rgba(46,120,160,.20),transparent 60%),
    linear-gradient(165deg,rgba(var(--pb-band-1-rgb),calc(.9*var(--vip-header-veil,1))) 0%,rgba(var(--pb-band-2-rgb),calc(.94*var(--vip-header-veil,1))) 52%,rgba(var(--pb-band-3-rgb),calc(.97*var(--vip-header-veil,1))) 100%),
    var(--vip-header-img,var(--va-header-img,linear-gradient(transparent,transparent)));
  background-size:auto,auto,auto,cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-header::before,
:is(#spa-content,body:not(:has(#spa-content))) .product-hero::before,
:is(#spa-content,body:not(:has(#spa-content))) .allianz-hero::before,
:is(#spa-content,body:not(:has(#spa-content))) .article-hero::before{
  content:'';position:absolute;z-index:-1;inset:auto -80px -140px auto;width:520px;height:520px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(232,180,80,.11) 0 1px,transparent 1px 12px);
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);
  pointer-events:none;top:auto;right:-80px;left:auto;bottom:-140px;background-size:auto;
}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-header::after,
:is(#spa-content,body:not(:has(#spa-content))) .product-hero::after,
:is(#spa-content,body:not(:has(#spa-content))) .allianz-hero::after,
:is(#spa-content,body:not(:has(#spa-content))) .article-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;width:auto;
  background:linear-gradient(90deg,transparent,rgba(232,180,80,.55) 20%,rgba(232,180,80,.55) 80%,transparent);
}
:is(#spa-content,body:not(:has(#spa-content))) .breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:32px;
  font-size:12px;letter-spacing:.14em;color:var(--pb-on-navy-3);
}
:is(#spa-content,body:not(:has(#spa-content))) .breadcrumb a{color:var(--pb-on-navy-2);padding:2px 0}
:is(#spa-content,body:not(:has(#spa-content))) .breadcrumb a:hover{color:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .breadcrumb a::after{background:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .breadcrumb .sep{color:rgba(243,239,230,.32)}
:is(#spa-content,body:not(:has(#spa-content))) .breadcrumb .current{color:var(--pb-gold-hi);font-weight:500}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-eyebrow{
  display:flex;align-items:center;gap:16px;margin-bottom:16px;
  font-family:var(--pb-caps);font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--pb-gold-hi);
}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-eyebrow::before{width:40px;height:1px;background:var(--pb-gold-hi);opacity:.8}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-title{font-size:40px;font-weight:700;letter-spacing:.1em;line-height:1.25;color:#fff}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-title .accent{color:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-title .accent-orange{color:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .subpage-desc{margin-top:16px;font-size:14px;line-height:1.9;letter-spacing:.06em;color:var(--pb-on-navy-2)}
:is(#spa-content,body:not(:has(#spa-content))) .back-link{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 20px;
  font-size:12px;letter-spacing:.16em;color:var(--pb-on-navy-2);
  border:1px solid rgba(243,239,230,.26);border-radius:4px;background:transparent;backdrop-filter:none;
  transform:none;white-space:nowrap;flex:none;
}
:is(#spa-content,body:not(:has(#spa-content))) .back-link::before{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .back-link:hover{background:rgba(232,180,80,.08);border-color:var(--pb-gold-hi);color:var(--pb-gold-hi);transform:none}

/* 商品 hero 右側規格表 */
:is(#spa-content,body:not(:has(#spa-content))) .product-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:center}
:is(#spa-content,body:not(:has(#spa-content))) .product-company-tag{
  display:inline-block;padding:8px 16px;margin-bottom:20px;border-radius:2px;
  font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--pb-gold-hi);
  background:transparent;border:1px solid rgba(232,180,80,.45);
}
:is(#spa-content,body:not(:has(#spa-content))) .product-hero-name{font-size:46px;font-weight:700;letter-spacing:.12em;line-height:1.15;color:#fff;margin-bottom:12px}
:is(#spa-content,body:not(:has(#spa-content))) .product-hero-en{font-family:var(--pb-serif);font-style:normal;font-size:17px;letter-spacing:.06em;color:var(--pb-on-navy-3);margin-bottom:24px}
:is(#spa-content,body:not(:has(#spa-content))) .product-hero-tagline{font-size:14px;line-height:2;letter-spacing:.06em;color:var(--pb-on-navy-2)}
:is(#spa-content,body:not(:has(#spa-content))) .product-hero-side{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(232,180,80,.22);border-radius:8px;padding:8px 28px;backdrop-filter:none;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
}
:is(#spa-content,body:not(:has(#spa-content))) .hero-side-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-size:13px;border-bottom:1px solid rgba(243,239,230,.1)}
:is(#spa-content,body:not(:has(#spa-content))) .hero-side-row .label{color:var(--pb-on-navy-3);letter-spacing:.14em}
:is(#spa-content,body:not(:has(#spa-content))) .hero-side-row .value{color:#fff;font-weight:500;letter-spacing:.06em;text-align:right}
:is(#spa-content,body:not(:has(#spa-content))) .hero-side-row .value.gold{color:var(--pb-gold-hi)}

/* 案例詳細頁 hero（沿用既有 class，只換材質；同樣支援 --vip-header-img／--vip-header-veil 背景槽） */
:is(#spa-content,body:not(:has(#spa-content))) .hero-case{
  position:relative;isolation:isolate;overflow:hidden;color:var(--pb-on-navy);padding:40px 64px 48px;
  background-color:var(--pb-band-2);
  background-image:
    radial-gradient(760px 420px at 92% -12%,rgba(232,160,32,.18),transparent 62%),
    linear-gradient(165deg,rgba(var(--pb-band-1-rgb),calc(.96*var(--vip-header-veil,1))) 0%,rgba(var(--pb-band-2-rgb),calc(.98*var(--vip-header-veil,1))) 52%,rgba(var(--pb-band-3-rgb),calc(.99*var(--vip-header-veil,1))) 100%),
    var(--vip-header-img,var(--va-header-img,linear-gradient(transparent,transparent)));
  background-size:auto,auto,cover;
  background-position:center;
  background-repeat:no-repeat;
}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case::before{content:'';position:absolute;z-index:-1;right:-80px;bottom:-140px;top:auto;left:auto;width:520px;height:520px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(232,180,80,.11) 0 1px,transparent 1px 12px);
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);font-size:0;color:transparent}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-tag{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;margin-bottom:20px;border-radius:2px;
  font-family:var(--pb-caps);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  background:transparent !important;color:var(--pb-gold-hi) !important;border:1px solid rgba(232,180,80,.5);box-shadow:none !important;text-shadow:none !important;
}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-tag::after{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-amount,
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-right .hero-case-amount{font-family:var(--pb-serif) !important;font-weight:700;letter-spacing:-.01em !important;font-variant-numeric:lining-nums tabular-nums;
  background:linear-gradient(180deg,#F8E9C4 0%,#E8B450 58%,#C98A1E 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;filter:none !important}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-amount .unit,
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-right .hero-case-amount .unit{font-family:var(--pb-sans);font-weight:500;-webkit-text-fill-color:rgba(243,239,230,.7) !important;background:none !important}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-date{font-family:var(--pb-serif) !important;font-weight:700;letter-spacing:.02em !important;text-shadow:none !important;font-variant-numeric:lining-nums tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .hero-meta-label{font-family:var(--pb-caps);color:var(--pb-gold-hi);letter-spacing:.3em}
:is(#spa-content,body:not(:has(#spa-content))) .hero-meta-label::after{background:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-id-row .meta{background:rgba(255,255,255,.04);border:1px solid rgba(232,180,80,.22);border-radius:4px;backdrop-filter:none}
:is(#spa-content,body:not(:has(#spa-content))) .hero-case-id-row .meta-value.lg{font-family:var(--pb-serif);letter-spacing:.04em}

/* ───────── 3. 內容區：標題、卡片、數據、表格 ───────── */
:is(#spa-content,body:not(:has(#spa-content))) .content{padding:64px}
:is(#spa-content,body:not(:has(#spa-content))) .section-block{margin-bottom:56px}
:is(#spa-content,body:not(:has(#spa-content))) .block-title{
  display:block;position:relative;padding:0;margin-bottom:8px;
  font-size:24px;font-weight:700;letter-spacing:.08em;line-height:1.4;color:var(--pb-ink);
}
:is(#spa-content,body:not(:has(#spa-content))) .block-title::before{content:'';display:block;width:40px;height:1px;border-radius:0;background:var(--pb-gold-lo);margin-bottom:16px}
:is(#spa-content,body:not(:has(#spa-content))) .block-title::after{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .block-subtitle{margin:0 0 32px 0;font-size:14px;line-height:1.85;letter-spacing:.04em;color:var(--pb-ink-3)}

:is(#spa-content,body:not(:has(#spa-content))) .info-card{
  background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;padding:32px;margin-bottom:16px;
  box-shadow:var(--pb-sh-1);
}
:is(#spa-content,body:not(:has(#spa-content))) .info-card::after{height:1px;background:linear-gradient(90deg,transparent,var(--pb-gold-lo),transparent)}
:is(#spa-content,body:not(:has(#spa-content))) .info-card-highlight{background:linear-gradient(180deg,var(--pb-gold-tint),transparent 70%),var(--pb-card);border-color:var(--pb-hair-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .info-card-highlight::before{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .info-card-dark{background:linear-gradient(165deg,var(--pb-band-1),var(--pb-band-3));color:var(--pb-on-navy);border:1px solid rgba(232,180,80,.22)}

:is(#spa-content,body:not(:has(#spa-content))) .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
:is(#spa-content,body:not(:has(#spa-content))) .stat-card{
  background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;padding:28px 16px 24px;text-align:center;
  box-shadow:var(--pb-sh-1);transition:transform .4s var(--pb-ease),box-shadow .4s var(--pb-ease),border-color .4s var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .stat-card::before{left:0;top:0;width:100%;height:1px;background:var(--pb-gold-lo);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--pb-ease)}
:is(#spa-content,body:not(:has(#spa-content))) .stat-card:hover{transform:translateY(-2px);box-shadow:var(--pb-sh-2);border-color:var(--pb-hair-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .stat-card:hover::before{left:0;transform:scaleX(1)}
:is(#spa-content,body:not(:has(#spa-content))) .stat-label{font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--pb-ink-3);margin-bottom:12px}
:is(#spa-content,body:not(:has(#spa-content))) .stat-value{font-family:var(--pb-serif);font-weight:700;font-size:40px;line-height:1;letter-spacing:0;color:var(--pb-ink);font-variant-numeric:lining-nums tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .stat-value.teal{color:var(--teal)}
:is(#spa-content,body:not(:has(#spa-content))) .stat-value.green{color:var(--pb-pos)}
:is(#spa-content,body:not(:has(#spa-content))) .stat-value.gold{color:var(--pb-gold-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .stat-value.navy{color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .stat-value .unit{font-family:var(--pb-sans);font-size:14px;font-weight:500;color:var(--pb-ink-3);margin-left:4px;letter-spacing:.06em}

:is(#spa-content,body:not(:has(#spa-content))) .data-table{
  background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;overflow:hidden;box-shadow:var(--pb-sh-1);
}
:is(#spa-content,body:not(:has(#spa-content))) .data-table thead{background:var(--pb-navy-900)}
:is(#spa-content,body:not(:has(#spa-content))) .data-table thead::after{height:1px;background:linear-gradient(90deg,transparent,var(--pb-gold-hi),transparent)}
:is(#spa-content,body:not(:has(#spa-content))) .data-table thead th{color:var(--pb-gold-hi);font-size:12px;font-weight:600;letter-spacing:.16em;padding:16px 16px}
:is(#spa-content,body:not(:has(#spa-content))) .data-table tbody td{padding:16px;font-size:13px;color:var(--pb-ink);border-bottom:1px solid var(--pb-line-soft);font-variant-numeric:tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .data-table tbody tr:hover{background:var(--pb-sheet-2)}
:is(#spa-content,body:not(:has(#spa-content))) .data-table .num{font-family:var(--pb-serif);font-size:18px;font-weight:700;color:var(--pb-ink);letter-spacing:0;font-variant-numeric:lining-nums tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .data-table .pct-up{color:var(--pb-pos)}
:is(#spa-content,body:not(:has(#spa-content))) .data-table .pct-down{color:var(--pb-neg)}
:is(#spa-content,body:not(:has(#spa-content))) .data-table .badge{padding:3px 10px;border-radius:2px;background:var(--pb-gold-tint);color:var(--pb-gold-ink);border:1px solid var(--pb-hair-gold);letter-spacing:.12em}

:is(#spa-content,body:not(:has(#spa-content))) .feature-list li{background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;padding:20px;box-shadow:var(--pb-sh-1)}
:is(#spa-content,body:not(:has(#spa-content))) .feature-list li:hover{border-color:var(--pb-hair-gold);box-shadow:var(--pb-sh-2)}
:is(#spa-content,body:not(:has(#spa-content))) .feature-list .feat-icon{width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid var(--pb-hair-gold);color:var(--pb-gold-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .feature-list li:hover .feat-icon{background:var(--pb-gold-tint);color:var(--pb-gold-ink);transform:none;box-shadow:none}
:is(#spa-content,body:not(:has(#spa-content))) .feature-list .feat-text{color:var(--pb-ink-2)}
:is(#spa-content,body:not(:has(#spa-content))) .feature-list .feat-text strong{color:var(--pb-ink);font-weight:700;letter-spacing:.06em}

:is(#spa-content,body:not(:has(#spa-content))) .note-box,
:is(#spa-content,body:not(:has(#spa-content))) .warning-box{
  position:relative;padding:20px 24px;margin-top:24px;border-radius:0 4px 4px 0;font-size:13px;line-height:1.9;letter-spacing:.03em;color:var(--pb-ink-2);
  transition:none;
}
:is(#spa-content,body:not(:has(#spa-content))) .note-box{background:var(--pb-gold-tint);border-left:2px solid var(--pb-gold-lo)}
:is(#spa-content,body:not(:has(#spa-content))) .note-box strong{color:var(--pb-gold-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .warning-box{background:var(--pb-sheet-2);border-left:2px solid var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .warning-box strong{color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .note-box::before,:is(#spa-content,body:not(:has(#spa-content))) .warning-box::before{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .note-box:hover,:is(#spa-content,body:not(:has(#spa-content))) .warning-box:hover{transform:none;box-shadow:none}

/* 頁面內的彩色 emoji 圖示：統一成金棕單色（不改 HTML，只上濾鏡） */
:is(#spa-content,body:not(:has(#spa-content))) :where(.feat-card-icon,.audience-icon,.profile-icon,.benefit-card-icon,.feat-icon,.type-icon,.step-icon,.concept-icon,.why-icon){filter:grayscale(1) sepia(.55) saturate(1.5) brightness(.92)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) :where(.feat-card-icon,.audience-icon,.profile-icon,.benefit-card-icon,.feat-icon,.type-icon,.step-icon,.concept-icon,.why-icon){filter:grayscale(1) sepia(.5) saturate(1.2) brightness(1.15)}

/* ───────── 4. 按鈕與表單 ───────── */
:is(#spa-content,body:not(:has(#spa-content))) .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 32px;border-radius:4px;
  font-size:13px;font-weight:700;letter-spacing:.14em;line-height:1;
  transition:transform var(--pb-dur) var(--pb-ease),box-shadow var(--pb-dur) var(--pb-ease),background var(--pb-dur) var(--pb-ease),border-color var(--pb-dur) var(--pb-ease),color var(--pb-dur) var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .btn::before{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .btn-primary{
  background:linear-gradient(180deg,#F1C56C 0%,#E5A730 100%);color:#0a2334;border:1px solid #C98A1E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 24px -12px rgba(184,125,18,.55);
}
:is(#spa-content,body:not(:has(#spa-content))) .btn-primary:hover{transform:translateY(-1px);background:linear-gradient(180deg,#F5CF82 0%,#EAB040 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 30px -12px rgba(184,125,18,.6)}
:is(#spa-content,body:not(:has(#spa-content))) .btn-primary:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
:is(#spa-content,body:not(:has(#spa-content))) .btn-navy{background:var(--pb-navy-900);color:#fff;border:1px solid rgba(232,180,80,.45)}
:is(#spa-content,body:not(:has(#spa-content))) .btn-navy:hover{background:var(--pb-navy-800);border-color:var(--pb-gold-hi);color:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .btn-ghost{background:transparent;color:var(--pb-ink);border:1px solid var(--pb-line)}
:is(#spa-content,body:not(:has(#spa-content))) .btn-ghost:hover{border-color:var(--pb-gold-lo);color:var(--pb-gold-ink)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .btn-primary{background:linear-gradient(180deg,#DDBE7E 0%,#C9A458 100%);border-color:#B8934A;color:#0a2334;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 24px -12px rgba(0,0,0,.7)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .btn-primary:hover{background:linear-gradient(180deg,#E6C98C 0%,#D2AE62 100%)}

:is(#spa-content,body:not(:has(#spa-content))) .search-box{flex:1 1 100%;max-width:none}
:is(#spa-content,body:not(:has(#spa-content))) .search-box input{
  min-height:44px;background:var(--pb-card);border:1px solid var(--pb-line);border-radius:4px;padding:10px 16px 10px 44px;
  font-size:14px;letter-spacing:.04em;color:var(--pb-ink);
}
:is(#spa-content,body:not(:has(#spa-content))) .search-box input::placeholder{color:var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .search-box input:focus{outline:none !important;border-color:var(--pb-gold-lo);box-shadow:0 0 0 3px rgba(232,160,32,.18)}
:is(#spa-content,body:not(:has(#spa-content))) .search-box::before{
  content:'';width:16px;height:16px;left:16px;font-size:0;opacity:1;background:var(--pb-ink-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

:is(#spa-content,body:not(:has(#spa-content))) :is(.btn,.cta-btn,.cases-cta-btn,.allianz-cta,.cases-tab,.filter-tab,.sort-btn,.back-link,.hero-back,.float-cta,.view-toggle button):active{transform:translateY(0) scale(.985)}

/* 分頁籤 */
:is(#spa-content,body:not(:has(#spa-content))) .tab-bar{display:flex;gap:0;border-bottom:1px solid var(--pb-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin-bottom:0}
:is(#spa-content,body:not(:has(#spa-content))) .tab-bar::-webkit-scrollbar{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .tab-bar::after{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .tab-bar button{
  flex:none;min-height:56px;padding:0 28px;border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;margin-bottom:-1px;
  font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--pb-ink-3);white-space:nowrap;
  transition:color var(--pb-dur) var(--pb-ease),border-color var(--pb-dur) var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .tab-bar button::before{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .tab-bar button:hover{color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .tab-bar button.active{color:var(--pb-ink) !important;font-weight:700;border-color:transparent !important;border-bottom-color:var(--pb-gold) !important;box-shadow:none;transform:none;background:transparent}
:is(#spa-content,body:not(:has(#spa-content))) .tab-content{padding-top:48px}

/* 表單欄位（商品頁試算） */
:is(#spa-content,body:not(:has(#spa-content))) .calc-box{background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;padding:32px;box-shadow:var(--pb-sh-1)}
:is(#spa-content,body:not(:has(#spa-content))) .calc-input label{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .calc-input input,
:is(#spa-content,body:not(:has(#spa-content))) .calc-input select,
:is(#spa-content,body:not(:has(#spa-content))) .form-row input,:is(#spa-content,body:not(:has(#spa-content))) .form-row select,:is(#spa-content,body:not(:has(#spa-content))) .form-input input,:is(#spa-content,body:not(:has(#spa-content))) .form-input select{
  min-height:48px;padding:0 16px;background:var(--pb-sheet);border:1px solid var(--pb-line);border-radius:4px;font-size:14px;color:var(--pb-ink);
  transition:border-color var(--pb-dur) var(--pb-ease),box-shadow var(--pb-dur) var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .calc-input input:focus,
:is(#spa-content,body:not(:has(#spa-content))) .calc-input select:focus,
:is(#spa-content,body:not(:has(#spa-content))) .form-row input:focus,:is(#spa-content,body:not(:has(#spa-content))) .form-row select:focus,:is(#spa-content,body:not(:has(#spa-content))) .form-input input:focus,:is(#spa-content,body:not(:has(#spa-content))) .form-input select:focus{outline:none !important;border-color:var(--pb-gold-lo);box-shadow:0 0 0 3px rgba(232,160,32,.18)}
:is(#spa-content,body:not(:has(#spa-content))) .calc-result{
  background:linear-gradient(165deg,var(--pb-band-1),var(--pb-band-3));border:1px solid rgba(232,180,80,.28);border-radius:8px;padding:28px 32px;color:var(--pb-on-navy);
}
:is(#spa-content,body:not(:has(#spa-content))) .calc-result-label{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--pb-on-navy-3)}
:is(#spa-content,body:not(:has(#spa-content))) .calc-result-value{font-family:var(--pb-serif);font-weight:700;font-size:34px;letter-spacing:0;color:var(--pb-gold-hi);font-variant-numeric:lining-nums tabular-nums}

/* ───────── 5. 商品頁元件 ───────── */
:is(#spa-content,body:not(:has(#spa-content))) .features-grid{gap:24px}
:is(#spa-content,body:not(:has(#spa-content))) .feat-card{
  background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;padding:32px 32px 28px;
  box-shadow:var(--pb-sh-1);transition:transform .4s var(--pb-ease),box-shadow .4s var(--pb-ease),border-color .4s var(--pb-ease) !important;
}
:is(#spa-content,body:not(:has(#spa-content))) .feat-card::before{content:'';position:absolute;left:32px;top:0;width:40px;height:2px;background:var(--pb-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .feat-card:hover{transform:translateY(-2px) !important;box-shadow:var(--pb-sh-2);border-color:var(--pb-hair-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .feat-card-num{top:20px;right:28px;font-family:var(--pb-serif);font-weight:700;font-size:56px;line-height:1;color:var(--pb-gold-lo);opacity:.22;font-variant-numeric:lining-nums}
:is(#spa-content,body:not(:has(#spa-content))) .feat-card-icon{font-size:28px;margin-bottom:16px}
:is(#spa-content,body:not(:has(#spa-content))) .feat-card-title{font-size:18px;font-weight:700;letter-spacing:.08em;color:var(--pb-ink);margin-bottom:8px}
:is(#spa-content,body:not(:has(#spa-content))) .feat-card-desc{font-size:13px;line-height:1.95;color:var(--pb-ink-2)}

:is(#spa-content,body:not(:has(#spa-content))) .audience-grid{gap:24px}
:is(#spa-content,body:not(:has(#spa-content))) .audience-card{
  background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;padding:32px 24px;box-shadow:var(--pb-sh-1);
  transition:transform .4s var(--pb-ease),box-shadow .4s var(--pb-ease),border-color .4s var(--pb-ease) !important;
}
:is(#spa-content,body:not(:has(#spa-content))) .audience-card:hover{border-color:var(--pb-hair-gold);transform:translateY(-2px) !important;box-shadow:var(--pb-sh-2)}
:is(#spa-content,body:not(:has(#spa-content))) .audience-icon{width:56px;height:56px;background:transparent;border:1px solid var(--pb-hair-gold);margin-bottom:16px}
:is(#spa-content,body:not(:has(#spa-content))) .audience-title{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .audience-desc{font-size:12.5px;line-height:1.9;color:var(--pb-ink-3)}

:is(#spa-content,body:not(:has(#spa-content))) .fund-item{background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;padding:16px 20px;box-shadow:var(--pb-sh-1)}
:is(#spa-content,body:not(:has(#spa-content))) .fund-item:hover{border-color:var(--pb-hair-gold);background:var(--pb-card)}
:is(#spa-content,body:not(:has(#spa-content))) .fund-tag{font-family:var(--pb-caps);font-weight:700;font-size:12px;letter-spacing:.08em;color:#fff;background:var(--pb-navy-900);border-radius:2px;padding:5px 10px}
:is(#spa-content,body:not(:has(#spa-content))) .fund-tag.usd{background:var(--pb-pos)}
:is(#spa-content,body:not(:has(#spa-content))) .fund-tag.high{background:var(--pb-gold-lo);color:#0a2334}
:is(#spa-content,body:not(:has(#spa-content))) .fund-name{font-size:13px;font-weight:500;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .fund-rate{font-family:var(--pb-serif);font-weight:700;font-size:20px;letter-spacing:0;color:var(--pb-gold-ink);font-variant-numeric:lining-nums tabular-nums}

:is(#spa-content,body:not(:has(#spa-content))) .commission-section{
  background:linear-gradient(165deg,var(--pb-band-1),var(--pb-band-3));border:1px solid rgba(232,180,80,.22);border-radius:8px;padding:40px;margin-bottom:24px;color:var(--pb-on-navy);
}
:is(#spa-content,body:not(:has(#spa-content))) .commission-section .block-title{color:#fff}
:is(#spa-content,body:not(:has(#spa-content))) .commission-section .block-title::before{background:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .commission-section .block-subtitle{color:var(--pb-on-navy-3)}
:is(#spa-content,body:not(:has(#spa-content))) .commission-table{background:rgba(255,255,255,.03);border:1px solid rgba(232,180,80,.2);border-radius:6px}
:is(#spa-content,body:not(:has(#spa-content))) .commission-table th{background:rgba(255,255,255,.05);color:var(--pb-gold-hi);font-size:12px;font-weight:600;letter-spacing:.16em;padding:16px;border-bottom:1px solid rgba(232,180,80,.22)}
:is(#spa-content,body:not(:has(#spa-content))) .commission-table td{padding:16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.07)}
:is(#spa-content,body:not(:has(#spa-content))) .commission-table .pct{font-family:var(--pb-serif);font-weight:700;font-size:24px;letter-spacing:0;color:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .commission-table .small{color:var(--pb-on-navy-3)}

:is(#spa-content,body:not(:has(#spa-content))) .process-flow::before{top:32px;height:1px;background:var(--pb-hair-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .process-step-num{width:64px;height:64px;background:var(--pb-sheet);border:1px solid var(--pb-gold-lo);color:var(--pb-gold-ink);font-family:var(--pb-serif);font-weight:700;font-size:24px;letter-spacing:0}
:is(#spa-content,body:not(:has(#spa-content))) .process-step-title{font-weight:700;letter-spacing:.08em;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .process-step-desc{color:var(--pb-ink-3);line-height:1.8}

:is(#spa-content,body:not(:has(#spa-content))) .product-cta{
  position:relative;overflow:hidden;border:1px solid rgba(232,180,80,.28);border-radius:8px;padding:56px 40px;color:var(--pb-on-navy);
  background:
    radial-gradient(520px 260px at 85% 0%,rgba(232,160,32,.16),transparent 62%),
    linear-gradient(165deg,var(--pb-band-1),var(--pb-band-3));
}
:is(#spa-content,body:not(:has(#spa-content))) .cta-title-md{font-size:28px;font-weight:700;letter-spacing:.1em;color:#fff}
:is(#spa-content,body:not(:has(#spa-content))) .cta-title-md .accent{color:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .cta-desc-md{font-size:14px;letter-spacing:.06em;color:var(--pb-on-navy-2);margin-bottom:28px}
:is(#spa-content,body:not(:has(#spa-content))) .cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 36px;border-radius:4px;
  font-size:14px;font-weight:700;letter-spacing:.14em;text-decoration:none;
  transition:transform var(--pb-dur) var(--pb-ease),box-shadow var(--pb-dur) var(--pb-ease),background var(--pb-dur) var(--pb-ease),border-color var(--pb-dur) var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .cta-btn-primary{
  background:linear-gradient(180deg,#F1C56C 0%,#E5A730 100%);color:#0a2334;border:1px solid #C98A1E;animation:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 30px -14px rgba(0,0,0,.5);font-size:14px !important;padding:0 36px !important;
}
:is(#spa-content,body:not(:has(#spa-content))) .cta-btn-primary::before{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .cta-btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 20px 34px -14px rgba(0,0,0,.55)}
:is(#spa-content,body:not(:has(#spa-content))) .cta-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(243,239,230,.34);backdrop-filter:none}
:is(#spa-content,body:not(:has(#spa-content))) .cta-btn-ghost:hover{background:rgba(232,180,80,.08);border-color:var(--pb-gold-hi);color:var(--pb-gold-hi)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .cta-btn-primary{background:linear-gradient(180deg,#DDBE7E 0%,#C9A458 100%);border-color:#B8934A}

/* ───────── 6. 案例牆（cases/index）元件 ───────── */
:is(#spa-content,body:not(:has(#spa-content))) .summary-banner{
  position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;margin-bottom:48px;border-radius:8px;
  background:radial-gradient(520px 260px at 92% -20%,rgba(232,160,32,.16),transparent 62%),linear-gradient(165deg,var(--pb-band-1),var(--pb-band-3));
  border:1px solid rgba(232,180,80,.26);box-shadow:var(--pb-sh-2);color:var(--pb-on-navy);
}
:is(#spa-content,body:not(:has(#spa-content))) .summary-banner::before{content:'';position:absolute;inset:auto -60px -120px auto;width:360px;height:360px;border-radius:50%;font-size:0;color:transparent;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(232,180,80,.10) 0 1px,transparent 1px 12px);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);top:auto;right:-60px;bottom:-120px;left:auto}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat{padding:32px 16px 28px;text-align:center;position:relative;z-index:1}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat + .summary-stat{border-left:1px solid rgba(232,180,80,.18)}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat:last-child .summary-stat-value{font-size:36px;white-space:nowrap}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat-label{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--pb-on-navy-3);margin-bottom:12px}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat-value{font-family:var(--pb-serif);font-weight:700;font-size:44px;line-height:1;letter-spacing:0;color:#fff;font-variant-numeric:lining-nums tabular-nums;text-shadow:none}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat-value .unit{font-family:var(--pb-sans);font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--pb-gold-hi);margin-left:4px}

:is(#spa-content,body:not(:has(#spa-content))) .filter-bar{
  display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:20px 24px;margin-bottom:32px;
  background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;box-shadow:var(--pb-sh-1);
}
:is(#spa-content,body:not(:has(#spa-content))) .filter-label{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .filter-tab{
  min-height:44px;padding:0 18px;background:transparent;border:1px solid var(--pb-line);border-radius:4px;
  font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--pb-ink-2);transform:none;box-shadow:none;
  transition:background var(--pb-dur) var(--pb-ease),border-color var(--pb-dur) var(--pb-ease),color var(--pb-dur) var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .filter-tab:hover,
:is(#spa-content,body:not(:has(#spa-content))) .filter-tab[data-filter]:hover{background:var(--pb-gold-tint);border-color:var(--pb-hair-gold);color:var(--pb-ink);transform:none}
:is(#spa-content,body:not(:has(#spa-content))) .filter-tab.active,
:is(#spa-content,body:not(:has(#spa-content))) .filter-tab[data-filter].active{background:var(--pb-navy-900);border-color:var(--pb-navy-900);color:#fff;box-shadow:none}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .filter-tab.active,
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .filter-tab[data-filter].active{background:var(--pb-gold-ink);border-color:var(--pb-gold-ink);color:#0a2334}
:is(#spa-content,body:not(:has(#spa-content))) .filter-tab .count{font-family:var(--pb-serif);font-size:15px;font-weight:700;color:var(--pb-gold-ink);margin-left:6px;font-variant-numeric:lining-nums tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .filter-tab.active .count{color:var(--pb-gold-hi)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .filter-tab.active .count{color:#0a2334}

:is(#spa-content,body:not(:has(#spa-content))) .sort-bar{margin-bottom:24px;padding:0}
:is(#spa-content,body:not(:has(#spa-content))) .sort-info{font-size:13px;letter-spacing:.04em;color:var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .sort-info strong{font-family:var(--pb-serif);font-weight:700;font-size:20px;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .sort-btn{min-height:36px;padding:0 16px;border-radius:4px;border:1px solid var(--pb-line);color:var(--pb-ink-2)}
:is(#spa-content,body:not(:has(#spa-content))) .sort-btn:hover{border-color:var(--pb-hair-gold);color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .sort-btn.active{background:var(--pb-navy-900);border-color:var(--pb-navy-900);color:#fff}
:is(#spa-content,body:not(:has(#spa-content))) .view-toggle{padding:3px;background:var(--pb-sheet-2);border:1px solid var(--pb-line);border-radius:6px}
:is(#spa-content,body:not(:has(#spa-content))) .view-toggle button{min-height:36px;padding:0 18px;border-radius:4px;font-size:12px;letter-spacing:.1em;color:var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .view-toggle button.active{background:var(--pb-card);color:var(--pb-ink);box-shadow:var(--pb-sh-1)}

:is(#spa-content,body:not(:has(#spa-content))) .gold-grid{gap:16px}
:is(#spa-content,body:not(:has(#spa-content))) .std-grid{gap:12px !important}

/* 層級分隔：年報式章節線 */
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider{
  position:relative;margin:56px 0 24px;padding:0 0 16px;background:none !important;border:0;border-bottom:1px solid var(--pb-line);border-radius:0;color:var(--pb-ink);box-shadow:none;overflow:visible;
}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider::before{content:'';position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--tier,var(--pb-gold))}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider::after{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider-title{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:.1em;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider-title .icon{font-size:18px;text-shadow:none;color:var(--tier,var(--pb-gold-lo)) !important}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider-sub{font-family:var(--pb-caps);font-size:11px;font-weight:600;letter-spacing:.26em;color:var(--pb-ink-3);margin-top:8px}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="diamond"]{--tier:#C98A1E}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="platinum"]{--tier:#8793A0}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="titanium"]{--tier:#5E6A75}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="gold"]{--tier:#A8700C}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="silver"]{--tier:#98A2AC}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="diamond"]{--tier:#D6B676}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="platinum"]{--tier:#A7B3BF}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="titanium"]{--tier:#8793A0}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="gold"]{--tier:#C9A458}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="silver"]{--tier:#8D99A5}

/* 鑽石／白金／鈦金卡：深色金屬卡，細框＋內框髮絲線 */
:is(#spa-content,body:not(:has(#spa-content))) .diamond-grid{display:grid;gap:20px;margin-bottom:24px}
:is(#spa-content,body:not(:has(#spa-content))) .case-diamond{
  --mtl:rgba(232,180,80,.40);--mtl-in:rgba(232,180,80,.16);--mtl-txt:#EDBB5C;
  position:relative;display:block;padding:28px 28px 24px;border-radius:8px;color:#fff;overflow:hidden;
  background-image:none !important;
  background:radial-gradient(120% 140% at 100% 0%,rgba(232,160,32,.13),transparent 56%),linear-gradient(160deg,#0f3249 0%,#0a2334 62%,#08202f 100%) !important;
  border:1px solid var(--mtl);box-shadow:var(--pb-sh-2);
  transition:transform .45s var(--pb-ease),box-shadow .45s var(--pb-ease),border-color .45s var(--pb-ease);animation:none;
}
:is(#spa-content,body:not(:has(#spa-content))) .case-diamond::before{content:'';position:absolute;inset:6px;top:6px;right:6px;font-size:0;border:1px solid var(--mtl-in);border-radius:4px;pointer-events:none;color:transparent}
:is(#spa-content,body:not(:has(#spa-content))) .case-diamond::after{content:'';position:absolute;inset:auto;top:0;left:24px;right:24px;height:1px;border-radius:0;background:linear-gradient(90deg,transparent,var(--mtl-txt),transparent);filter:none;opacity:.7;z-index:1;animation:none;transition:none}
:is(#spa-content,body:not(:has(#spa-content))) .case-diamond:hover{transform:translateY(-2px) !important;box-shadow:var(--pb-sh-3);border-color:var(--mtl-txt)}
:is(#spa-content,body:not(:has(#spa-content))) .case-diamond:hover::after{opacity:1}
:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="platinum"]{--mtl:rgba(190,200,210,.42);--mtl-in:rgba(190,200,210,.16);--mtl-txt:#C9D3DC;border-color:var(--mtl);box-shadow:var(--pb-sh-2)}
:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="platinum"]{background:radial-gradient(120% 140% at 100% 0%,rgba(190,205,220,.12),transparent 56%),linear-gradient(160deg,#163a52 0%,#10293a 62%,#0c2230 100%) !important}
:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="titanium"]{--mtl:rgba(140,152,163,.40);--mtl-in:rgba(140,152,163,.15);--mtl-txt:#9AA6B2;border-color:var(--mtl);box-shadow:var(--pb-sh-2)}
:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="titanium"]{background:radial-gradient(120% 140% at 100% 0%,rgba(150,162,174,.10),transparent 56%),linear-gradient(160deg,#1b2a36 0%,#14202a 62%,#101a22 100%) !important}
:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="platinum"]:hover,:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="titanium"]:hover{border-color:var(--mtl-txt);box-shadow:var(--pb-sh-3)}
:is(#spa-content,body:not(:has(#spa-content))) .case-d-tag{
  display:inline-flex;align-items:center;gap:8px;padding:0 0 10px;margin-bottom:16px;border-radius:0;background:none !important;color:var(--mtl-txt) !important;
  border-bottom:1px solid var(--mtl-in);font-family:var(--pb-caps);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
}
:is(#spa-content,body:not(:has(#spa-content))) .case-d-tag::after{display:none}
:is(#spa-content,body:not(:has(#spa-content))) .case-d-amount{
  font-family:var(--pb-serif);font-weight:700;font-size:56px;line-height:1.05;letter-spacing:-.005em;margin-bottom:4px;font-variant-numeric:lining-nums tabular-nums;
  background:linear-gradient(180deg,#F8E9C4 0%,#EDBB5C 56%,#C98A1E 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;filter:none !important;
}
:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="platinum"] .case-d-amount{background:linear-gradient(180deg,#FFFFFF 0%,#D5DEE6 56%,#9FADBA 100%) !important;-webkit-background-clip:text !important;background-clip:text !important}
:is(#spa-content,body:not(:has(#spa-content))) .case-premium[data-tier="titanium"] .case-d-amount{background:linear-gradient(180deg,#E6EAEE 0%,#AEB8C1 56%,#7F8B96 100%) !important;-webkit-background-clip:text !important;background-clip:text !important}
:is(#spa-content,body:not(:has(#spa-content))) .case-d-amount .unit{font-family:var(--pb-sans);font-size:16px;font-weight:500;letter-spacing:.06em;margin-left:6px;-webkit-text-fill-color:rgba(255,255,255,.66);background:none;color:rgba(255,255,255,.66)}
:is(#spa-content,body:not(:has(#spa-content))) .case-d-meta{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.7)}
:is(#spa-content,body:not(:has(#spa-content))) .case-d-id{font-family:var(--pb-caps);font-size:12px;font-weight:600;letter-spacing:.18em;color:#fff}
:is(#spa-content,body:not(:has(#spa-content))) .case-d-meta .date::before{color:rgba(255,255,255,.5)}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="titanium"] + .diamond-grid .case-d-amount,
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="platinum"] + .diamond-grid .case-d-amount{font-size:44px}
:is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="diamond"] + .diamond-grid .case-diamond{animation:none}

/* 黃金級卡片（白底、金髮絲線）／標準卡片（紙面、細邊框） */
:is(#spa-content,body:not(:has(#spa-content))) .case-gold{
  position:relative;display:block;padding:24px;border-radius:8px;overflow:hidden;background:var(--pb-card);color:var(--pb-ink);
  border:1px solid var(--pb-hair-gold);box-shadow:var(--pb-sh-1);
  transition:transform .4s var(--pb-ease),box-shadow .4s var(--pb-ease),border-color .4s var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .case-gold::before{content:'';position:absolute;left:24px;top:0;right:auto;width:40px;height:2px;background:var(--pb-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .case-gold:hover{transform:translateY(-2px) !important;box-shadow:var(--pb-sh-2);border-color:var(--pb-gold-lo)}
:is(#spa-content,body:not(:has(#spa-content))) .case-g-tag{display:inline-block;padding:0;margin-bottom:12px;border-radius:0;background:none;color:var(--pb-gold-ink);font-family:var(--pb-caps);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase}
:is(#spa-content,body:not(:has(#spa-content))) .case-g-amount{font-family:var(--pb-serif);font-weight:700;font-size:40px;line-height:1.05;letter-spacing:0;color:var(--pb-ink);font-variant-numeric:lining-nums tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .case-g-amount .unit{font-family:var(--pb-sans);font-size:14px;font-weight:500;color:var(--pb-ink-3);margin-left:4px;letter-spacing:.06em}
:is(#spa-content,body:not(:has(#spa-content))) .case-g-meta{margin-top:12px;padding-top:12px;border-top:1px solid var(--pb-line-soft);font-size:12px;letter-spacing:.06em;color:var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .case-g-id{font-family:var(--pb-caps);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .case-g-meta .date::before,:is(#spa-content,body:not(:has(#spa-content))) .case-std-meta > span:not([class])::before{color:var(--pb-ink-3);opacity:.8}
:is(#spa-content,body:not(:has(#spa-content))) .case-std{
  display:block;padding:16px 18px;border-radius:6px;background:var(--pb-card);border:1px solid var(--pb-line);color:var(--pb-ink);box-shadow:none;
  transition:transform .35s var(--pb-ease),box-shadow .35s var(--pb-ease),border-color .35s var(--pb-ease),background .35s var(--pb-ease);
}
:is(#spa-content,body:not(:has(#spa-content))) .case-std:hover{background:var(--pb-card);border-color:var(--pb-hair-gold);transform:translateY(-2px) !important;box-shadow:var(--pb-sh-1)}
:is(#spa-content,body:not(:has(#spa-content))) .case-std.case-silver{border-left:2px solid var(--pb-line)}
:is(#spa-content,body:not(:has(#spa-content))) .case-std-amount{font-family:var(--pb-serif);font-weight:700;font-size:26px;line-height:1.05;letter-spacing:0;color:var(--pb-ink);font-variant-numeric:lining-nums tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .case-std.case-silver .case-std-amount{font-size:22px}
:is(#spa-content,body:not(:has(#spa-content))) .case-std-amount .unit{font-family:var(--pb-sans);font-size:12px;font-weight:500;color:var(--pb-ink-3);margin-left:3px;letter-spacing:.06em}
:is(#spa-content,body:not(:has(#spa-content))) .case-std-amount.usd{color:var(--pb-pos)}
:is(#spa-content,body:not(:has(#spa-content))) .case-std-meta{margin-top:8px;font-size:11px;letter-spacing:.04em;color:var(--pb-ink-3)}
:is(#spa-content,body:not(:has(#spa-content))) .case-std-id{font-family:var(--pb-caps);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--pb-ink)}

/* 已驗證徽章：收進卡片內，細字不閃爍 */
:is(#spa-content,body:not(:has(#spa-content))) .verified-badge{
  top:16px;right:16px;padding:4px 10px;border-radius:2px;border:1px solid rgba(95,191,146,.45);background:rgba(44,122,87,.14);
  color:#8FD7B4;font-size:10px;font-weight:600;letter-spacing:.18em;box-shadow:none;animation:none;gap:6px;
}
:is(#spa-content,body:not(:has(#spa-content))) .verified-badge::before{font-size:11px}
:is(#spa-content,body:not(:has(#spa-content))) .case-gold .verified-badge,:is(#spa-content,body:not(:has(#spa-content))) .case-std .verified-badge{color:var(--pb-pos);border-color:rgba(44,122,87,.4);background:rgba(44,122,87,.08)}
:is(#spa-content,body:not(:has(#spa-content))) .case-gold.is-verified,:is(#spa-content,body:not(:has(#spa-content))) .case-std.is-verified{position:relative}

/* 表格檢視 */
:is(#spa-content,body:not(:has(#spa-content))) .case-table{background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;overflow:hidden;box-shadow:var(--pb-sh-1)}
:is(#spa-content,body:not(:has(#spa-content))) .case-table thead{background:var(--pb-navy-900)}
:is(#spa-content,body:not(:has(#spa-content))) .case-table thead th{color:var(--pb-gold-hi);font-size:12px;font-weight:600;letter-spacing:.16em;padding:16px}
:is(#spa-content,body:not(:has(#spa-content))) .case-table tbody td{padding:16px;font-size:13px;color:var(--pb-ink);border-bottom:1px solid var(--pb-line-soft);font-variant-numeric:tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .case-table tbody tr:hover{background:var(--pb-sheet-2)}
:is(#spa-content,body:not(:has(#spa-content))) .case-table .id-cell{font-family:var(--pb-caps);font-size:13px;font-weight:600;letter-spacing:.14em}
:is(#spa-content,body:not(:has(#spa-content))) .case-table .amount-cell{font-family:var(--pb-serif);font-weight:700;font-size:20px;letter-spacing:0;color:var(--pb-ink);font-variant-numeric:lining-nums tabular-nums}
:is(#spa-content,body:not(:has(#spa-content))) .case-table .amount-cell.diamond,:is(#spa-content,body:not(:has(#spa-content))) .case-table .amount-cell.gold{color:var(--pb-gold-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .case-table .amount-cell.usd{color:var(--pb-pos)}
:is(#spa-content,body:not(:has(#spa-content))) .tier-pill{padding:3px 10px;border-radius:2px;font-size:10px;font-weight:600;letter-spacing:.14em;border:1px solid var(--pb-line);background:transparent;color:var(--pb-ink-2)}
:is(#spa-content,body:not(:has(#spa-content))) .tier-pill.diamond{color:var(--pb-gold-ink);border-color:var(--pb-hair-gold);background:var(--pb-gold-tint)}
:is(#spa-content,body:not(:has(#spa-content))) .tier-pill.gold{color:var(--pb-gold-ink);border-color:var(--pb-hair-gold);background:var(--pb-gold-tint)}
:is(#spa-content,body:not(:has(#spa-content))) .tier-pill.platinum,:is(#spa-content,body:not(:has(#spa-content))) .tier-pill.titanium,:is(#spa-content,body:not(:has(#spa-content))) .tier-pill.silver,:is(#spa-content,body:not(:has(#spa-content))) .tier-pill.std{color:var(--pb-ink-2);background:var(--pb-sheet-2)}
:is(#spa-content,body:not(:has(#spa-content))) .tier-pill.usd{color:var(--pb-pos);border-color:rgba(44,122,87,.35);background:rgba(44,122,87,.08)}

/* 案例對帳單（case detail）基本材質 */
:is(#spa-content,body:not(:has(#spa-content))) .case-screenshots-section{border-bottom:1px solid var(--pb-line);border-bottom-style:solid}
:is(#spa-content,body:not(:has(#spa-content))) .case-screenshots-section .block-title{font-size:26px !important;letter-spacing:.08em}
:is(#spa-content,body:not(:has(#spa-content))) .case-screenshots-section .block-title::before{height:1px;background:var(--pb-gold-lo) !important}
:is(#spa-content,body:not(:has(#spa-content))) .screenshot-card{background:var(--pb-card);border:1px solid var(--pb-hair-gold);border-radius:8px;box-shadow:var(--pb-sh-2)}
:is(#spa-content,body:not(:has(#spa-content))) .screenshot-card:hover{border-color:var(--pb-gold-lo);box-shadow:var(--pb-sh-3)}
:is(#spa-content,body:not(:has(#spa-content))) .ss-header{background:var(--pb-sheet-2);border-bottom:1px solid var(--pb-line)}
:is(#spa-content,body:not(:has(#spa-content))) .screenshot-card .ss-tag{background:var(--pb-navy-900);color:var(--pb-gold-hi);border-radius:2px;box-shadow:none;letter-spacing:.14em}
:is(#spa-content,body:not(:has(#spa-content))) .screenshot-card .ss-date{font-family:var(--pb-serif);font-weight:700;letter-spacing:.04em;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .screenshot-month-header{background:var(--pb-sheet-2);border-left:2px solid var(--pb-gold);border-radius:0 6px 6px 0;box-shadow:none}
:is(#spa-content,body:not(:has(#spa-content))) .month-label{font-family:var(--pb-serif);font-weight:700;letter-spacing:.06em;color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .month-badge{background:rgba(44,122,87,.12);color:var(--pb-pos);border:1px solid rgba(44,122,87,.35);border-radius:2px;box-shadow:none;animation:none}
:is(#spa-content,body:not(:has(#spa-content))) .profile-card,:is(#spa-content,body:not(:has(#spa-content))) .nav-case{background:var(--pb-card);border:1px solid var(--pb-line);border-radius:8px;box-shadow:var(--pb-sh-1)}
:is(#spa-content,body:not(:has(#spa-content))) .profile-icon{background:transparent;border:1px solid var(--pb-hair-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .profile-value,:is(#spa-content,body:not(:has(#spa-content))) .nav-case .info{color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .plan-card{background:linear-gradient(180deg,var(--pb-gold-tint),transparent 60%),var(--pb-card);border:1px solid var(--pb-hair-gold);border-radius:8px;box-shadow:var(--pb-sh-1)}
:is(#spa-content,body:not(:has(#spa-content))) .plan-product-name{color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .plan-product-tag{background:var(--pb-navy-900);color:var(--pb-gold-hi);border-radius:2px;letter-spacing:.16em}
:is(#spa-content,body:not(:has(#spa-content))) .plan-detail{background:var(--pb-card);border:1px solid var(--pb-line);border-radius:6px}
:is(#spa-content,body:not(:has(#spa-content))) .plan-detail-value{color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .plan-detail-value.big{font-family:var(--pb-serif);font-weight:700;color:var(--pb-gold-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .flow-list li{background:var(--pb-card);border:1px solid var(--pb-line);border-left:2px solid var(--pb-gold);border-radius:6px}
:is(#spa-content,body:not(:has(#spa-content))) .flow-list li::before{font-family:var(--pb-serif);font-weight:700;color:var(--pb-gold-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .flow-list li strong{color:var(--pb-ink)}
:is(#spa-content,body:not(:has(#spa-content))) .benefit-card{background:linear-gradient(165deg,var(--pb-band-1),var(--pb-band-3));border:1px solid rgba(232,180,80,.24);border-radius:8px;color:var(--pb-on-navy)}
:is(#spa-content,body:not(:has(#spa-content))) .benefit-card::before{height:2px;background:var(--pb-gold)}
:is(#spa-content,body:not(:has(#spa-content))) .benefit-card-title{color:var(--pb-gold-hi);letter-spacing:.12em}

/* ───────── 7. 頁尾 ───────── */
:is(#spa-content,body:not(:has(#spa-content))) .footer-mini{
  position:relative;padding:32px 64px;text-align:center;font-size:12px;letter-spacing:.1em;line-height:2;color:var(--pb-on-navy-3);
  background:linear-gradient(180deg,var(--pb-band-2),var(--pb-band-3));
}
:is(#spa-content,body:not(:has(#spa-content))) .footer-mini::before{content:'';position:absolute;top:0;left:50%;width:160px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--pb-gold-hi),transparent)}
:is(#spa-content,body:not(:has(#spa-content))) .footer-mini a{color:var(--pb-gold-hi)}
:is(#spa-content,body:not(:has(#spa-content))) .footer-mini a:hover{color:#F6E3B4;transform:none}

/* ───────── 8. 深色模式：舊頁面「淺色面＋深字」統一翻成深色面＋淺字 ─────────
   做法：--navy 在深色模式翻成淺字色（子頁約 700 處 color:var(--navy) 自動變亮），
   舊頁面裡「用 --navy 當深色底」的面板在下面明列成深海軍藍；淺色卡片與灰字也明列。 */
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .page{background:var(--pb-sheet)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .content{background:transparent}
/* 以 --navy 當「深色底」的舊面板：維持深海軍藍（白字／金字照舊） */
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) :where(.calc-section,.toast,.perf-table thead,.compare-table thead,.folder-btn,.paste-zone .pz-shortcut,.logo-fallback,.cat-tab.active,.faq-cat-header,.article-cta,.perf-compare-table thead,.trend-viz,.qqq-overview,.holdings-table thead,.div-table thead,.fund-table thead,.type-card.investment,.tree-question,.keypoint,.shortcut,.roadmap,.calc-summary,.client-summary,.conclusion-card,.skip-link){background:var(--pb-navy-900);color:var(--pb-on-navy)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) :where(.adv-card,.advanced-section,.asset-table,.calc-table,.channel-card,.chart-card,.compare-card,.compare-col.bad,.compare-col.good,.compare-strip,.compare-table,.concept-card,.crm-card,.dividend-chart,.doc-card,.faq-question,.fee-table,.filename-preview,.focus-card,.fund-card,.fund-filter,.fund-row,.fund-table,.holding-card,.holdings-table,.kpi-card,.legal-foot,.ls-stage,.pdf-quick-bar,.perf-compare-table,.perf-table,.preview-item,.recent-cases,.result-table,.result-table-wrap,.scenario,.scenario-bar,.scenario-conclusion,.smile-wrap,.step-section,.step-time,.tr-chartbox,.tr-ret,.tr-ret-t,.wip,.div-table){background:var(--pb-card);border-color:var(--pb-line);color:var(--pb-ink)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) table tbody tr{background:transparent}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) table tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) :where(.holding-desc,.faq-a,.article-p,.article-lead,.block-subtitle,.feat-card-desc,.audience-desc,.fund-rate-note,.process-step-desc,.stat-label,.profile-label,.plan-detail-label,.nav-case .label,.filter-label,.sort-info,.case-g-meta,.case-std-meta,.res-desc,.qn-sub){color:var(--pb-ink-3)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) :where(.feat-card,.audience-card,.fund-item,.info-card,.stat-card,.calc-box,.profile-card,.nav-case,.plan-detail,.flow-list li,.case-gold,.case-std,.filter-bar,.mini-chart-block,.mini-chart-card,.faq-item,.related-item,.rec-card,.tree-option,.obs-card,.idx-card,.month-card,.res-card,.why-item,.form-card,.reg-form-card,.reg-card,.preset-card,.concept-card,.adv-card,.chart-card,.step-card,.trust-card,.target-card,.channel-card,.doc-card,.rank-link-card,.pc-card){background:var(--pb-card);border-color:var(--pb-line);color:var(--pb-ink)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .feat-card,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .plan-card,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .info-card-highlight{background:linear-gradient(180deg,var(--pb-gold-tint),transparent 70%),var(--pb-card)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) :where(.calc-input input,.calc-input select,.form-row input,.form-row select,.form-input input,.form-input select,.search-box input,.case-input,select,input[type="text"],input[type="number"],input[type="search"],textarea){background:var(--pb-sheet-2);color:var(--pb-ink);border-color:var(--pb-line)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .commission-table td{color:#fff}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .commission-table th{color:var(--pb-gold-hi)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .data-table thead th,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .case-table thead th{color:var(--pb-gold-hi)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tab-bar button.active,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tab-bar button:hover{color:var(--pb-ink) !important}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tab-bar button.active{border-bottom-color:var(--pb-gold-ink) !important}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .case-diamond,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .case-card-diamond{color:#fff}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .hero-case,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .product-hero,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .subpage-header,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .allianz-hero,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .article-hero,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .benefit-card,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .product-cta,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .commission-section,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .info-card-dark,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .summary-banner,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .calc-result{color:var(--pb-on-navy)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .hero-case-title,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .product-hero-name,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .subpage-title,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .cta-title-md,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .commission-section .block-title{color:#fff}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .subpage-title .accent,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .cta-title-md .accent{color:var(--pb-gold-hi)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .product-hero-tagline{color:var(--pb-on-navy-2)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .case-gold{border-color:var(--pb-hair-gold)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .screenshot-card,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .screenshot-card img{background:var(--pb-card)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .verified-badge,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .case-gold .verified-badge,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .case-std .verified-badge{color:#8FD7B4;background:rgba(95,191,146,.1);border-color:rgba(95,191,146,.4)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tier-pill.diamond,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .tier-pill.gold,html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .data-table .badge{color:var(--pb-gold-hi)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) .process-step-num{background:var(--pb-sheet)}
html[data-rex-theme="dark"] :is(#spa-content,body:not(:has(#spa-content))) table:not(.data-table):not(.case-table):not(.commission-table) :where(td,th){border-color:var(--pb-line-soft)}

/* ───────── 9. 響應式 ───────── */
@media (max-width:900px){
  :is(#spa-content,body:not(:has(#spa-content))) .subpage-header,:is(#spa-content,body:not(:has(#spa-content))) .product-hero,:is(#spa-content,body:not(:has(#spa-content))) .allianz-hero,:is(#spa-content,body:not(:has(#spa-content))) .article-hero,:is(#spa-content,body:not(:has(#spa-content))) .hero-case{padding:32px 24px 40px}
  :is(#spa-content,body:not(:has(#spa-content))) .subpage-title{font-size:30px;letter-spacing:.08em}
  :is(#spa-content,body:not(:has(#spa-content))) .product-hero-grid{grid-template-columns:1fr;gap:32px}
  :is(#spa-content,body:not(:has(#spa-content))) .product-hero-name{font-size:34px}
  :is(#spa-content,body:not(:has(#spa-content))) .content{padding:40px 24px}
  :is(#spa-content,body:not(:has(#spa-content))) .stat-grid{grid-template-columns:1fr 1fr}
  :is(#spa-content,body:not(:has(#spa-content))) .summary-banner{grid-template-columns:1fr 1fr}
  :is(#spa-content,body:not(:has(#spa-content))) .summary-stat:nth-child(3){border-left:0}
  :is(#spa-content,body:not(:has(#spa-content))) .summary-stat:nth-child(n+3){border-top:1px solid rgba(232,180,80,.18)}
  :is(#spa-content,body:not(:has(#spa-content))) .footer-mini{padding:24px}
  :is(#spa-content,body:not(:has(#spa-content))) .commission-section{padding:24px 16px}
}
@media (max-width:720px){
  :is(#spa-content,body:not(:has(#spa-content))) .subpage-header > div[style*="display"]{flex-wrap:wrap;row-gap:20px}
  :is(#spa-content,body:not(:has(#spa-content))) .subpage-header > div[style*="display"] > div{flex:1 1 100%}
  :is(#spa-content,body:not(:has(#spa-content))) .breadcrumb{margin-bottom:12px;gap:0 8px}
  :is(#spa-content,body:not(:has(#spa-content))) .breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  :is(#spa-content,body:not(:has(#spa-content))) .back-link{min-height:44px}
  :is(#spa-content,body:not(:has(#spa-content))) .view-toggle button,:is(#spa-content,body:not(:has(#spa-content))) .sort-btn{min-height:44px}
  :is(#spa-content,body:not(:has(#spa-content))) .footer-mini a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  :is(#spa-content,body:not(:has(#spa-content))) .page{box-shadow:none}
  :is(#spa-content,body:not(:has(#spa-content))) .float-cta{right:16px;bottom:16px;min-height:48px;padding:0 20px;font-size:13px}
  :is(#spa-content,body:not(:has(#spa-content))) .subpage-title{font-size:28px}
  :is(#spa-content,body:not(:has(#spa-content))) .block-title{font-size:21px}
  :is(#spa-content,body:not(:has(#spa-content))) .info-card{padding:24px}
  :is(#spa-content,body:not(:has(#spa-content))) .calc-box{padding:24px 20px}
  /* 商品頁 tab-bar（共用元件）：手機橫向捲動＋右側漸隱提示（尾端留一格空白，捲到底時最後一個分頁不會被漸隱蓋住）；觸控高度 >= 48px */
  :is(#spa-content,body:not(:has(#spa-content))) .tab-bar{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent 100%);scroll-snap-type:x proximity}
  :is(#spa-content,body:not(:has(#spa-content))) .tab-bar::after{content:'';display:block;position:static;flex:0 0 40px;width:40px;height:1px;bottom:auto;right:auto;background:none}
  :is(#spa-content,body:not(:has(#spa-content))) .tab-bar button{padding:0 18px;font-size:13px;min-height:48px;scroll-snap-align:start}
  :is(#spa-content,body:not(:has(#spa-content))) .filter-bar{padding:16px}
  :is(#spa-content,body:not(:has(#spa-content))) .summary-stat-value{font-size:34px}
  :is(#spa-content,body:not(:has(#spa-content))) .case-d-amount{font-size:44px}
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider{margin:40px 0 20px}
  :is(#spa-content,body:not(:has(#spa-content))) .table-scroll-mobile{margin:0 -4px;padding:0 4px}
  :is(#spa-content,body:not(:has(#spa-content))) .search-box{max-width:none;width:100%;flex:1 1 100%}
}
@media (max-width:480px){
  :is(#spa-content,body:not(:has(#spa-content))) .diamond-grid{grid-template-columns:1fr}
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="platinum"] + .diamond-grid,
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="titanium"] + .diamond-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="platinum"] + .diamond-grid .case-diamond,
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="titanium"] + .diamond-grid .case-diamond{padding:20px 16px 16px}
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="platinum"] + .diamond-grid .case-d-amount,
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="titanium"] + .diamond-grid .case-d-amount{font-size:36px}
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="platinum"] + .diamond-grid .case-d-meta,
  :is(#spa-content,body:not(:has(#spa-content))) .tier-divider[data-tier="titanium"] + .diamond-grid .case-d-meta{flex-wrap:wrap;gap:4px 8px}
  :is(#spa-content,body:not(:has(#spa-content))) .content{padding:32px 20px}
  :is(#spa-content,body:not(:has(#spa-content))) .subpage-header,:is(#spa-content,body:not(:has(#spa-content))) .product-hero,:is(#spa-content,body:not(:has(#spa-content))) .hero-case{padding:28px 20px 36px}
  :is(#spa-content,body:not(:has(#spa-content))) .product-hero-side{padding:4px 20px}
  :is(#spa-content,body:not(:has(#spa-content))) .product-cta{padding:40px 24px}
  :is(#spa-content,body:not(:has(#spa-content))) .cta-title-md{font-size:24px}
  :is(#spa-content,body:not(:has(#spa-content))) .feat-card{padding:28px 24px 24px}
  :is(#spa-content,body:not(:has(#spa-content))) .case-gold{padding:20px}
  :is(#spa-content,body:not(:has(#spa-content))) .std-grid{gap:8px !important}
}

/* ───────── 10. 觸控與無動畫 ───────── */
@media (hover:none){
  :is(#spa-content,body:not(:has(#spa-content))) .case-diamond:hover,:is(#spa-content,body:not(:has(#spa-content))) .case-gold:hover,:is(#spa-content,body:not(:has(#spa-content))) .case-std:hover,:is(#spa-content,body:not(:has(#spa-content))) .feat-card:hover,:is(#spa-content,body:not(:has(#spa-content))) .audience-card:hover{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ───────── 11. Lightbox（對帳單放大）─────────
   殼（index.html）的 #case-lightbox：深海軍藍毛玻璃遮罩＋金色髮絲圈控制鈕（SVG 圖示）＋襯線頁碼；淺色／深色各自吃 band token（深色更沉、金色降飽和）。 */
#case-lightbox{
  --lb-gold:237,187,92;--lb-ink:243,239,230;
  padding:72px 96px 88px;
  background:
    radial-gradient(900px 520px at 50% -10%,rgba(var(--pb-band-1-rgb),.62),transparent 70%),
    rgba(var(--pb-band-3-rgb),.965);
  -webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9);
}
html[data-rex-theme="dark"] #case-lightbox{--lb-gold:214,182,118;--lb-ink:233,237,240}
#case-lightbox.show{animation:lbIn .32s var(--pb-ease) both}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
#case-lightbox img{
  max-width:min(1080px,calc(100vw - 192px));max-height:calc(100vh - 160px);object-fit:contain;
  border-radius:6px;background:#fff;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7),0 0 0 1px rgba(var(--lb-gold),.28);
}
#case-lightbox .lb-close,#case-lightbox .lb-nav{
  display:flex;align-items:center;justify-content:center;padding:0;
  width:48px;height:48px;border-radius:50%;font-size:0;line-height:0;
  color:rgb(var(--lb-gold));
  background:rgba(var(--lb-ink),.05);border:1px solid rgba(var(--lb-gold),.42);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .28s var(--pb-ease),border-color .28s var(--pb-ease),color .28s var(--pb-ease),transform .28s var(--pb-ease);
}
#case-lightbox .lb-close{top:24px;right:24px}
#case-lightbox .lb-nav{width:52px;height:52px}
#case-lightbox .lb-prev{left:24px}
#case-lightbox .lb-next{right:24px}
#case-lightbox .lb-close svg,#case-lightbox .lb-nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#case-lightbox .lb-close:hover,#case-lightbox .lb-nav:hover{background:rgba(var(--lb-gold),.16);border-color:rgb(var(--lb-gold));color:rgb(var(--lb-ink))}
#case-lightbox .lb-close:hover{transform:none}
#case-lightbox .lb-close:active{transform:scale(.96)}
#case-lightbox .lb-nav:active{transform:translateY(-50%) scale(.96)}
#case-lightbox .lb-close:focus-visible,#case-lightbox .lb-nav:focus-visible{outline:2px solid rgb(var(--lb-gold)) !important;outline-offset:3px}
#case-lightbox .lb-counter{
  bottom:28px;padding:8px 20px;border-radius:999px;
  background:rgba(var(--lb-ink),.05);border:1px solid rgba(var(--lb-gold),.32);
  color:rgb(var(--lb-ink));font-family:var(--pb-serif);font-size:15px;font-weight:700;letter-spacing:.18em;font-variant-numeric:lining-nums tabular-nums;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
@media (max-width:720px){
  #case-lightbox{padding:64px 12px 108px}
  #case-lightbox img{max-width:100%;max-height:calc(100vh - 190px)}
  #case-lightbox .lb-close{top:12px;right:12px}
  #case-lightbox .lb-nav{top:auto;bottom:24px;transform:none;width:48px;height:48px}
  #case-lightbox .lb-nav:active{transform:scale(.96)}
  #case-lightbox .lb-prev{left:16px}
  #case-lightbox .lb-next{right:16px}
  #case-lightbox .lb-counter{bottom:32px;font-size:14px;padding:7px 16px}
}
@media (prefers-reduced-motion:reduce){#case-lightbox.show{animation:none}}

/* ───────── 12. 深色安全網（核心批補強，思路取自競稿 proto-vb 11a／11b）─────────
   目的：子頁還有「寫死白底／淺灰底＋淺字」沒被逐頁處理到時，深色模式不會整片漏白。
   原則：權重刻意壓低——前綴 html[data-rex-theme="dark"]（0,1,1）＋ :where()（0 分）：
        · 贏過子頁「單一 class 的淺色底」規則（0,1,0）；
        · 輸給子頁自己寫的深色規則 html[data-rex-theme="dark"] .頁面 .元件（0,2,1 以上）→ 逐頁細節永遠以子頁為準；
        · 行內 style 一定要 !important 才壓得過，故行內寫死的白底／淺灰底另列。 */
/* 12a. 行內寫死的淺色底（單純換成卡片面；邊框不動，避免吃掉彩色強調邊） */
html[data-rex-theme="dark"] :where([style*="background:#fff"],[style*="background: #fff"],[style*="background:#FFF"],[style*="background: #FFF"],[style*="background:white"],[style*="background: white"],[style*="background:#fffbf0"],[style*="background: #fffbf0"],[style*="background:#f5f3ee"],[style*="background: #f5f3ee"],[style*="background:#f4f5f7"],[style*="background: #f4f5f7"],[style*="background:#faf8f5"],[style*="background:#fafafa"],[style*="background:#f8f9fa"],[style*="background:#f9fafb"],[style*="background-color:#fff"],[style*="background-color: #fff"],[style*="background-color:white"]){
  background:var(--pb-card) !important;
}
html[data-rex-theme="dark"] :where([style*="background:var(--bg-cream)"],[style*="background: var(--bg-cream)"],[style*="background:var(--light)"],[style*="background: var(--light)"]){background:var(--pb-sheet-2) !important}
/* 12b. 行內寫死的深色字／灰字（淺字翻面） */
html[data-rex-theme="dark"] :where([style*="color:#333"],[style*="color: #333"],[style*="color:#444"],[style*="color: #444"],[style*="color:#555"],[style*="color: #555"],[style*="color:#666"],[style*="color: #666"],[style*="color:#0d2a3a"],[style*="color: #0d2a3a"],[style*="color:#0D2A3A"],[style*="color: #0D2A3A"],[style*="color:#4a5560"],[style*="color:#1a1a2e"],[style*="color:#222"],[style*="color:#1a1a1a"]){color:var(--pb-ink-2) !important}
html[data-rex-theme="dark"] :where([style*="color:#6b7680"],[style*="color: #6b7680"],[style*="color:#6c7178"],[style*="color:#8a95a3"],[style*="color:#777"],[style*="color: #777"],[style*="color:#888"],[style*="color: #888"],[style*="color:#999"],[style*="color: #999"]){color:var(--pb-ink-3) !important}
/* 12c. 白底 pill／晶片／次按鈕／行內代碼／欄位（目前子頁掃出來的寫死白底；只壓單一 class 的淺色底） */
html[data-rex-theme="dark"] :where(.assumption-tag,.recent-chip,.ghost-btn,.reg-product-btn,.val-input,.holding-logo,.future-section,.header-path .path-text,.step-body code){background:var(--pb-sheet-2);border-color:var(--pb-line);color:var(--pb-ink)}
/* 12d. 元素預設值：程式碼、引用、分隔線、表格線、下拉選項、禁用欄位、日期選擇器圖示 */
html[data-rex-theme="dark"] :where(code,kbd,samp,pre){background:var(--pb-sheet-2);color:var(--pb-ink-2);border-color:var(--pb-line)}
html[data-rex-theme="dark"] :where(blockquote){border-color:var(--pb-hair-gold);color:var(--pb-ink-2)}
html[data-rex-theme="dark"] :where(hr){border-color:var(--pb-line);background-color:var(--pb-line)}
html[data-rex-theme="dark"] :where(table th,table td){border-color:var(--pb-line-soft)}
html[data-rex-theme="dark"] :where(select option,select optgroup){background:var(--pb-sheet);color:var(--pb-ink)}
html[data-rex-theme="dark"] :where(input,textarea)::placeholder{color:var(--pb-ink-3);opacity:1}
html[data-rex-theme="dark"] :where(input[type="email"],input[type="tel"],input[type="password"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime-local"],input:not([type])){background-color:var(--pb-sheet-2);color:var(--pb-ink);border-color:var(--pb-line)}
html[data-rex-theme="dark"] :where(input:disabled,select:disabled,textarea:disabled,input[readonly]){background:var(--pb-sheet);color:var(--pb-ink-3);border-color:var(--pb-line-soft)}
html[data-rex-theme="dark"] :where(input[type="checkbox"],input[type="radio"],input[type="range"],progress,meter){accent-color:var(--pb-gold-hi)}
html[data-rex-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(214,182,118,.32);background-clip:content-box}
html[data-rex-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(214,182,118,.55);background-clip:content-box}

/* ───────── 13. 收尾（總架構師，2026-10-18）───────── */
/* 分頁切換：舊 tabSlideIn（10px＋縮放）改成規範的淡入＋2px */
:is(#spa-content,body:not(:has(#spa-content))) .tab-pane{animation:fadeUp .45s var(--pb-ease) both}
/* 寬表格橫捲提示：舊版寫死 #999，改吃 token */
:is(#spa-content,body:not(:has(#spa-content))) .table-scroll-mobile::after{color:var(--pb-ink-3)}
/* 手機：頁尾留出右下浮動預約鈕的位置，避免壓到業務員專線 */
@media (max-width:720px){ :is(#spa-content,body:not(:has(#spa-content))) .footer-mini{padding-bottom:96px} }
@media (prefers-reduced-motion:reduce){ :is(#spa-content,body:not(:has(#spa-content))) .tab-pane{animation:none} }

/* ───────── 14. 圖槽接圖（img-vip-sub，2026-10-18）───────── */
/* url() 相對於 shared.css；直開子頁與 SPA 都吃得到。veil 越小圖越明顯，文字清晰度靠 veil＋版頭左側漸層遮罩 */
:root{
  --vip-header-img:url(assets/img/v5/vip-header-band.webp);
  --vip-header-veil:.5;
  --vip-cases-hero-img:url(assets/img/v5/vip-cases-hero.webp);
  --vip-tier-diamond-img:url(assets/img/v5/vip-tier-diamond.webp);
  --vip-tier-platinum-img:url(assets/img/v5/vip-tier-platinum.webp);
  --vip-tier-titanium-img:url(assets/img/v5/vip-tier-titanium.webp);
  --vip-tier-gold-img:url(assets/img/v5/vip-tier-gold.webp);
  --vip-tier-silver-img:url(assets/img/v5/vip-tier-silver.webp);
}

/* ───────── 15. 手機防裁切（業主實機回報 2026-10-18：案例牆統計數字右半被切）───────── */
:is(#spa-content,body:not(:has(#spa-content))) :is(.summary-banner,.hero-stats,.stat-grid)>*{min-width:0}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat-value{font-size:clamp(26px,3.6vw,44px);overflow-wrap:anywhere}
:is(#spa-content,body:not(:has(#spa-content))) .summary-stat:last-child .summary-stat-value{font-size:clamp(20px,2.9vw,36px);white-space:normal}
@media (max-width:720px){
  :is(#spa-content,body:not(:has(#spa-content))) .summary-banner{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#spa-content,body:not(:has(#spa-content))) .summary-stat{padding-left:14px;padding-right:14px}
  :is(#spa-content,body:not(:has(#spa-content))) .summary-stat-value{font-size:clamp(24px,8vw,34px)}
  :is(#spa-content,body:not(:has(#spa-content))) .summary-stat:last-child .summary-stat-value{font-size:clamp(18px,5.6vw,26px)}
}