/* rex/compare、rex/life 新版：第二批 ChatGPT 插圖接入（2026-10-18）
   全部包在 @media screen → 列印／存 PDF 不會出現任何等待圖、步驟圖、底紋（列印版面維持舊站原樣）。
   全部用 CSS 背景圖（裝飾圖不進 DOM、不需 alt）；深色版靠全站 html[data-rex-theme="dark"]，即時切換自動生效。
   圖檔：/rex/shared/next-img/（新版專用資料夾，舊站不引用）。 */
@media screen {

/* ── D1／D2／D3 三步驟圖示：各步驟標題左側 ───────────────────── */
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-1 .page-title h2::before,
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-2 .page-title h2::before,
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-3 .s3-title::before {
  content:'' !important; display:inline-block !important; vertical-align:middle; flex:0 0 auto; position:static !important;
  width:40px !important; height:40px !important; margin:0 10px 0 0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:url(/rex/shared/next-img/compare-step1.webp) center / contain no-repeat !important;
}
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-2 .page-title h2::before { background-image:url(/rex/shared/next-img/compare-step2.webp) !important; }
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-3 .s3-title::before { width:34px !important; height:34px !important; background-image:url(/rex/shared/next-img/compare-step3.webp) !important; }
html[data-calc-next="compare"][data-calc-next][data-calc-next][data-rex-theme="dark"] body #step-1 .page-title h2::before { background-image:url(/rex/shared/next-img/compare-step1-dark.webp) !important; }
html[data-calc-next="compare"][data-calc-next][data-calc-next][data-rex-theme="dark"] body #step-2 .page-title h2::before { background-image:url(/rex/shared/next-img/compare-step2-dark.webp) !important; }
html[data-calc-next="compare"][data-calc-next][data-calc-next][data-rex-theme="dark"] body #step-3 .s3-title::before { background-image:url(/rex/shared/next-img/compare-step3-dark.webp) !important; }
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-1 .page-title h2,
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-2 .page-title h2,
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-3 .s3-title { display:flex !important; align-items:center; }

/* ── D4 compare 手機窄頁首（左側留白放標題、右側留白給功能膠囊） ── */
@media (max-width:640px) {
  html[data-calc-next="compare"][data-calc-next][data-calc-next] body .top-header {
    background:#0a2334 url(/rex/shared/next-img/compare-mobile-header.webp) center / cover no-repeat !important;
  }
}

/* ── D5 「試算全部商品」等待卡（只有載入遮罩出現時才看得到） ───── */
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #loading-card::before {
  content:''; display:block; width:min(220px,70%); aspect-ratio:800 / 560; margin:0 auto 6px;
  background:url(/rex/shared/next-img/compare-calculating.webp) center / contain no-repeat;
}
html[data-calc-next="compare"][data-calc-next][data-calc-next][data-rex-theme="dark"] body #loading-card::before { background-image:url(/rex/shared/next-img/compare-calculating-dark.webp); }

/* ── D9 compare 結果卡標題列：右側極淡等高線（偽元素＋左側漸隱，避免米色底在白卡上變成一塊色塊） ── */
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-3 .s3-top { position:relative; isolation:isolate; }
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #step-3 .s3-top::after {
  content:''; position:absolute; top:0; right:0; bottom:0; left:35%; z-index:-1; pointer-events:none; opacity:.55;
  background:url(/rex/shared/next-img/compare-result-decoration.webp) right center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%); mask-image:linear-gradient(90deg,transparent,#000 45%);
  mix-blend-mode:multiply;
}
html[data-calc-next="compare"][data-calc-next][data-calc-next][data-rex-theme="dark"] body #step-3 .s3-top::after {
  background-image:url(/rex/shared/next-img/compare-result-decoration-dark.webp); mix-blend-mode:normal; opacity:.6;
}

/* ── D12 compare 頁尾：疊一層深藍讓線條退到背景；手機寬度不放圖（線條會壓到文字） ── */
html[data-calc-next="compare"][data-calc-next][data-calc-next] body #global-footer {
  background:linear-gradient(rgba(10,35,52,.55),rgba(10,35,52,.55)), url(/rex/shared/next-img/compare-footer.webp) right center / cover no-repeat, #0a2334 !important;
}
@media (max-width:768px) {
  html[data-calc-next="compare"][data-calc-next][data-calc-next] body #global-footer { background:#0a2334 !important; }
}

/* ── D6 life「正式建議書產生中」等待卡：只在轉圈（.opdf-ring）時出現，完成／失敗畫面不放 ── */
html[data-calc-next="life"][data-calc-next][data-calc-next] body .opdf-card:has(.opdf-ring)::before {
  content:''; display:block; width:min(200px,64%); aspect-ratio:800 / 560; margin:0 auto 4px;
  background:url(/rex/shared/next-img/life-pdf-generating.webp) center / contain no-repeat;
}
html[data-calc-next="life"][data-calc-next][data-calc-next][data-rex-theme="dark"] body .opdf-card:has(.opdf-ring)::before { background-image:url(/rex/shared/next-img/life-pdf-generating-dark.webp); }

/* ── D10 life 兩張圖表卡：方格紙底紋，再蓋一層半透明讓它幾乎看不出來 ── */
html[data-calc-next="life"][data-calc-next][data-calc-next] body .charts-wrap .chart-box {
  background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)), url(/rex/shared/next-img/life-chart-texture.webp) !important;
  background-size:auto, cover !important; background-position:center !important; background-repeat:no-repeat !important;
}
html[data-calc-next="life"][data-calc-next][data-calc-next][data-rex-theme="dark"] body .charts-wrap .chart-box {
  background-image:linear-gradient(rgba(15,44,66,.62),rgba(15,44,66,.62)), url(/rex/shared/next-img/life-chart-texture-dark.webp) !important;
}

/* ── D7 AI 快速填表小圖示（取代 ✨）／D8 說明卡 ─────────────────── */
html[data-calc-next][data-calc-next] .cnask-ico {
  display:inline-block; width:22px; height:22px; flex:0 0 22px; vertical-align:-5px; margin-right:6px;
  background:url(/rex/shared/next-img/ai-quick-fill-icon.webp) center / contain no-repeat;
}
html[data-calc-next][data-calc-next][data-rex-theme="dark"] .cnask-ico { background-image:url(/rex/shared/next-img/ai-quick-fill-icon-dark.webp); }
html[data-calc-next][data-calc-next] .cnask-guide-art {
  display:block; width:100%; max-width:420px; aspect-ratio:960 / 480; margin:0 auto 8px;
  background:url(/rex/shared/next-img/ai-quick-fill-guide.webp) center / contain no-repeat;
}
html[data-calc-next][data-calc-next][data-rex-theme="dark"] .cnask-guide-art { background-image:url(/rex/shared/next-img/ai-quick-fill-guide-dark.webp); }

}