/* =============================================================
   EZP Guide System — 導覽／文章／導購頁統一版型語言
   2026-08-22 統一改版：以 dealer-modern 的版型語言為基準，
   把導覽 6 頁、批發小學堂列表與文章頁收斂成同一套 class。

   使用規則
   1. 這批頁面的 CSS 一律寫在本檔，不要再在 .dwt 內寫 <style>
   2. 版面骨架： body.eg-body > main.eg-page > section.eg-* > .eg-container
   3. 配色沿用全站已定案色票（與 theme.css 一致）：
      #39729D 主色 / #2B5778 加深 / #264C69 文字
      #E9F1F7 淺底 / #B03B57 實心 CTA / #F47A94 粉點綴（僅裝飾，不承載文字）
   ============================================================= */

:root {
  /* 主色階 */
  --eg-primary: #39729d;        /* 主色，白字 5.16 AA */
  --eg-primary-deep: #2b5778;   /* 加深，白字 7.67 AA */
  --eg-navy: #2b5778;           /* 舊名保留：標題／深底 */
  --eg-blue: #39729d;           /* 舊名保留：kicker／圖示 */
  --eg-cta: #b03b57;            /* 實心 CTA，白字 5.82 AA */
  --eg-cta-hover: #97314a;
  --eg-pink: #f47a94;           /* 僅裝飾用，不放小字 */
  --eg-sky: #89cee9;
  /* 文字 */
  --eg-ink: #264c69;            /* 內文 9.05 AA */
  --eg-muted: #506a7c;          /* 次要文字 6.3 AA */
  /* 線與底 */
  --eg-line: #d3e0ea;
  --eg-soft: #e9f1f7;
  --eg-soft-blue: #e9f1f7;      /* 舊名保留 */
  --eg-soft-pink: #fdf1f4;
  --eg-soft-yellow: #fff9e8;
  --eg-page-bg: #f6fafc;
  --eg-shadow: 0 18px 50px rgba(43, 87, 120, .11);
  --eg-shadow-sm: 0 8px 24px rgba(43, 87, 120, .07);
  /* 節奏 */
  --eg-gap: 18px;
}

/* ---------- 1. 導覽列 ---------- */
.ez-guide-nav-shell {
  position: relative;
  z-index: 15;
  border-block: 1px solid var(--eg-line);
  background: rgba(255,255,255,.97);
}
.ez-guide-nav {
  width: min(1180px,calc(100% - 32px));
  margin-inline: auto;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}
.ez-guide-nav::-webkit-scrollbar { display: none; }
.ez-guide-nav a {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--eg-muted);
  text-decoration: none;
  font-weight: 750;
  line-height: 1.35;
  transition: color .2s,background-color .2s,border-color .2s;
}
.ez-guide-nav a:hover { background: var(--eg-soft); color: var(--eg-primary-deep); }
.ez-guide-nav a.is-active { background: var(--eg-primary-deep); color: #fff; }
.ez-guide-nav a.ez-guide-nav-cta { margin-left: auto; background: var(--eg-cta); color: #fff; }
.ez-guide-nav a.ez-guide-nav-cta:hover { background: var(--eg-cta-hover); color: #fff; }
.ez-guide-nav a:focus-visible,
.eg-btn:focus-visible,
.eg-faq summary:focus-visible,
.eg-card-link:focus-visible,
.eg-anchor-nav a:focus-visible,
.eg-post-card:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

/* ---------- 2. 版面骨架 ---------- */
body.eg-body { background: var(--eg-page-bg); color: var(--eg-ink); }
.eg-page { overflow: clip; }
.eg-page section { scroll-margin-top: 88px; }
.eg-container { width: min(1120px,calc(100% - 32px)); margin-inline: auto; }
.eg-container-narrow { width: min(880px,calc(100% - 32px)); margin-inline: auto; }

/* ---------- 3. Hero ---------- */
.eg-hero {
  padding: 52px 0 44px;
  background: #f6fafc;
  border-bottom: 1px solid var(--eg-line);
}
.eg-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.72fr); gap: 42px; align-items: center; }
.eg-hero-grid-wide { grid-template-columns: minmax(0,1fr) minmax(400px,.86fr); }
.eg-eyebrow { text-decoration: none; display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #c2d8e6; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--eg-primary-deep); font-size: 14px; font-weight: 800; }
.eg-hero h1 { margin: 17px 0 14px; color: var(--eg-primary-deep); font-size: clamp(32px,4.1vw,50px); line-height: 1.14; letter-spacing: -.03em; font-weight: 850; }
.eg-hero h1 span { color: var(--eg-cta); }
.eg-lead { max-width: 700px; margin: 0 0 22px; color: var(--eg-muted); font-size: 17px; line-height: 1.75; }
.eg-hero-panel { padding: 26px; border: 1px solid rgba(255,255,255,.75); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: var(--eg-shadow); }
.eg-hero-panel i { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 16px; border-radius: 17px; background: var(--eg-soft); color: var(--eg-primary-deep); font-size: 28px; }
.eg-hero-panel strong { display: block; margin-bottom: 7px; color: var(--eg-primary-deep); font-size: 22px; }
.eg-hero-panel p { margin: 0; color: var(--eg-muted); line-height: 1.7; }

/* 情境圖（統一 pg-hero-image / mg-hero-media / dealer-hero-image） */
.eg-hero-media { display: block; position: relative; }
.eg-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border: 7px solid rgba(255,255,255,.9); border-radius: 25px; box-shadow: var(--eg-shadow); }
.eg-hero-media-square img { aspect-ratio: 1/1; }

/* 數據條（來自 dealer-modern） */
.eg-hero-stats { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0 0 24px; padding: 0; list-style: none; }
.eg-hero-stat { min-width: 0; }
.eg-hero-stat strong { display: block; color: var(--eg-primary-deep); font-size: clamp(24px,2.6vw,32px); font-weight: 850; line-height: 1.15; }
.eg-hero-stat strong small { font-size: .58em; font-weight: 800; }
.eg-hero-stat span { display: block; margin-top: 4px; color: var(--eg-muted); font-size: 14px; }

/* 標籤膠囊 */
.eg-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.eg-pills li { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #c2d8e6; border-radius: 999px; background: #fff; color: var(--eg-primary-deep); font-size: 14px; font-weight: 800; }
.eg-pills li.is-accent { border-color: #e7bcc7; background: var(--eg-soft-pink); color: var(--eg-cta); }

/* ---------- 4. 按鈕 ---------- */
.eg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.eg-actions-center { justify-content: center; }
.eg-btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 11px 19px; border: 2px solid transparent; border-radius: 12px; text-decoration: none; font-weight: 800; line-height: 1.35; cursor: pointer; transition: color .2s,background-color .2s,border-color .2s,box-shadow .2s; }
.eg-btn-primary { background: var(--eg-primary-deep); color: #fff; box-shadow: 0 10px 24px rgba(43,87,120,.2); }
.eg-btn-primary:hover { background: #1f4460; color: #fff; }
.eg-btn-secondary { border-color: #b0cbdd; background: #fff; color: var(--eg-primary-deep); }
.eg-btn-secondary:hover { border-color: var(--eg-primary); background: var(--eg-soft); color: var(--eg-primary-deep); }
/* eg-btn-pink 為既有頁面沿用的類名，實際採用 AA 通過的 #B03B57 */
.eg-btn-pink { background: var(--eg-cta); color: #fff; box-shadow: 0 10px 24px rgba(176,59,87,.22); }
.eg-btn-pink:hover { background: var(--eg-cta-hover); color: #fff; }
.eg-btn-line { background: #04804a; color: #fff; }  /* 白字 5.01 AA */
.eg-btn-line:hover { background: #036b3d; color: #fff; }
.eg-btn-sm { min-height: 40px; padding: 8px 14px; font-size: 15px; border-radius: 10px; }

/* ---------- 5. 區塊與標題 ---------- */
.eg-section { padding: 64px 0; }
.eg-section-tight { padding: 40px 0; }
.eg-section-soft { background: var(--eg-soft); }
.eg-section-head { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.eg-section-head-left { margin-inline: 0; text-align: left; }
.eg-kicker { margin-bottom: 8px; color: var(--eg-primary); font-size: 14px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.eg-section-head h2 { margin: 0 0 11px; color: var(--eg-primary-deep); font-size: clamp(26px,3.1vw,38px); line-height: 1.2; font-weight: 850; }
.eg-section-head p { margin: 0; color: var(--eg-muted); font-size: 17px; line-height: 1.75; }

/* ---------- 6. 卡片元件 ---------- */
.eg-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.eg-stat { min-width: 0; padding: 22px 18px; border: 1px solid var(--eg-line); border-radius: 18px; background: #fff; box-shadow: var(--eg-shadow-sm); }
.eg-stat i { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 13px; border-radius: 13px; background: var(--eg-soft); color: var(--eg-primary-deep); font-size: 22px; }
.eg-stat strong { display: block; margin-bottom: 6px; color: var(--eg-primary-deep); font-size: 20px; }
.eg-stat p { margin: 0; color: var(--eg-muted); line-height: 1.65; }

.eg-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--eg-gap); }
.eg-card-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.eg-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--eg-line); border-radius: 20px; background: #fff; box-shadow: var(--eg-shadow-sm); }
.eg-card h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--eg-primary-deep); font-size: 21px; font-weight: 850; }
.eg-card h3 i { color: var(--eg-primary); }
.eg-card p { margin: 0; color: var(--eg-muted); line-height: 1.75; }
.eg-card ul,.eg-check-list { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.eg-card li,.eg-check-list li { position: relative; padding-left: 26px; color: var(--eg-muted); line-height: 1.65; }
.eg-card li::before,.eg-check-list li::before { content: "\F26E"; position: absolute; left: 0; top: 1px; color: #1f7a55; font-family: "bootstrap-icons"; }
.eg-card-accent-blue { border-top: 6px solid var(--eg-primary); }
.eg-card-accent-pink { border-top: 6px solid var(--eg-cta); }

/* 圖示卡（統一 mg-buy-card / pg-check-card / quote-support-card） */
.eg-icon-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--eg-line); border-radius: 20px; background: #fff; box-shadow: var(--eg-shadow-sm); }
.eg-icon-card > i { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 16px; border-radius: 15px; background: var(--eg-soft); color: var(--eg-primary-deep); font-size: 25px; }
.eg-icon-card.is-accent > i { background: var(--eg-soft-pink); color: var(--eg-cta); }
.eg-icon-card h3 { margin: 0 0 9px; color: var(--eg-primary-deep); font-size: 21px; font-weight: 850; }
.eg-icon-card p { margin: 0 0 4px; color: var(--eg-muted); line-height: 1.7; }
.eg-card-link { margin-top: auto; padding-top: 14px; align-self: flex-start; display: inline-flex; min-height: 40px; align-items: center; gap: 7px; color: var(--eg-primary-deep); text-decoration: none; font-weight: 800; }
.eg-card-link:hover { color: var(--eg-primary); text-decoration: underline; }

/* 強調數值卡 */
.eg-value-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--eg-gap); }
.eg-value-card { padding: 24px; border-radius: 20px; color: #fff; box-shadow: var(--eg-shadow); background: linear-gradient(135deg,var(--eg-primary-deep),var(--eg-primary)); }
.eg-value-card.is-dealer { background: linear-gradient(135deg,#8d2f46,var(--eg-cta)); }
.eg-value-card small { display: block; margin-bottom: 6px; color: rgba(255,255,255,.95); font-weight: 800; }
.eg-value-card strong { display: block; margin-bottom: 8px; font-size: clamp(23px,2.8vw,32px); line-height: 1.2; }
.eg-value-card p { margin: 0; color: rgba(255,255,255,.95); line-height: 1.7; }

/* 流程步驟 */
.eg-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.eg-steps-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.eg-steps-6 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.eg-step { padding: 23px 20px; border: 1px solid var(--eg-line); border-radius: 18px; background: #fff; }
.eg-step-no { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 50%; background: var(--eg-primary-deep); color: #fff; font-weight: 850; }
.eg-step-no-accent { background: var(--eg-cta); }
.eg-step h3 { margin: 0 0 7px; color: var(--eg-primary-deep); font-size: 18px; font-weight: 850; }
.eg-step p { margin: 0; color: var(--eg-muted); line-height: 1.65; }
.eg-step .eg-btn { margin-top: 12px; }

/* 會員等級條 */
.eg-ranks { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.eg-rank { min-width: 0; padding: 18px 10px; border: 1px solid var(--eg-line); border-radius: 16px; background: #fff; text-align: center; }
.eg-rank i { display: block; margin-bottom: 9px; color: var(--rank-color,var(--eg-primary)); font-size: 26px; }
.eg-rank strong { display: block; color: var(--eg-primary-deep); font-size: 16px; }
.eg-rank span { display: block; margin-top: 5px; color: var(--eg-muted); font-size: 13px; line-height: 1.45; }
.eg-rank b { display: block; margin-top: 8px; color: var(--rank-color,var(--eg-primary)); font-size: 18px; }

/* 提示區塊 */
.eg-note { margin-top: 18px; padding: 17px 19px; border-left: 4px solid var(--eg-primary); border-radius: 0 12px 12px 0; background: #fff; color: var(--eg-muted); line-height: 1.7; }
.eg-note strong { color: var(--eg-primary-deep); }
.eg-note a { color: var(--eg-primary); font-weight: 750; }
.eg-alert { padding: 20px; border: 1px solid #e5cb93; border-radius: 15px; background: var(--eg-soft-yellow); color: #5d4818; line-height: 1.75; }
.eg-alert strong { color: #4a390f; }
.eg-disclosure { margin-top: 22px; padding: 20px; border: 1px solid #e7bcc7; border-radius: 15px; background: var(--eg-soft-pink); color: #6d3243; line-height: 1.75; }
.eg-disclosure strong { color: var(--eg-cta); }

/* 比較表 */
.eg-compare { overflow-x: auto; border: 1px solid var(--eg-line); border-radius: 20px; background: #fff; box-shadow: var(--eg-shadow-sm); }
.eg-compare table { min-width: 760px; width: 100%; border-collapse: collapse; }
.eg-compare caption { padding: 17px 20px; color: var(--eg-muted); text-align: left; background: #f6fafd; }
.eg-compare th,.eg-compare td { padding: 16px 19px; border-bottom: 1px solid var(--eg-line); vertical-align: top; line-height: 1.65; }
.eg-compare thead th { background: var(--eg-primary-deep); color: #fff; font-size: 17px; }
.eg-compare thead th:last-child { background: var(--eg-cta); }
.eg-compare tbody th { width: 21%; background: #f6fafd; color: var(--eg-primary-deep); }
.eg-compare tr:last-child th,.eg-compare tr:last-child td { border-bottom: 0; }

/* FAQ */
.eg-faq { display: grid; gap: 12px; max-width: 920px; margin-inline: auto; }
.eg-faq details { border: 1px solid var(--eg-line); border-radius: 15px; background: #fff; box-shadow: 0 6px 18px rgba(43,87,120,.04); }
.eg-faq summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 19px; color: var(--eg-primary-deep); font-weight: 850; cursor: pointer; list-style: none; }
.eg-faq summary::-webkit-details-marker { display: none; }
.eg-faq summary::after { content: "+"; flex: 0 0 auto; font-size: 24px; font-weight: 500; }
.eg-faq details[open] summary::after { content: "\2212"; }
.eg-faq .eg-answer,.eg-faq details > p { padding: 0 19px 19px; color: var(--eg-muted); line-height: 1.75; }
.eg-faq .eg-answer p { margin: 0; }
.eg-faq a { color: var(--eg-primary); font-weight: 750; }

/* 活動專區卡 */
.eg-zone-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.eg-zone { overflow: hidden; border: 1px solid var(--eg-line); border-radius: 18px; background: #fff; color: var(--eg-ink); text-decoration: none; box-shadow: var(--eg-shadow-sm); transition: box-shadow .2s,transform .2s; }
.eg-zone:hover { color: var(--eg-ink); transform: translateY(-4px); box-shadow: var(--eg-shadow); }
.eg-zone img { display: block; width: 100%; height: auto; aspect-ratio: 1376/768; object-fit: cover; }
.eg-zone-copy { padding: 16px 17px 18px; }
.eg-zone-copy .eg-zone-badge { display: inline-block; margin-bottom: 8px; padding: 4px 11px; border-radius: 999px; background: var(--eg-cta); color: #fff; font-size: 15px; font-weight: 850; }
.eg-zone-copy strong { display: block; color: var(--eg-primary-deep); font-size: 18px; }
.eg-zone-copy span { display: block; margin-top: 5px; color: var(--eg-muted); font-size: 15px; }

/* ---------- 7. 段落錨點導覽 ---------- */
.eg-anchor-wrap { position: sticky; top: 0; z-index: 14; border-block: 1px solid var(--eg-line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.eg-anchor-nav { display: flex; gap: 8px; overflow-x: auto; padding: 9px 0; scrollbar-width: none; }
.eg-anchor-nav::-webkit-scrollbar { display: none; }
.eg-anchor-nav a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; color: var(--eg-muted); text-decoration: none; font-weight: 750; }
.eg-anchor-nav a:hover { background: var(--eg-soft); color: var(--eg-primary-deep); }

/* ---------- 8. 文章頁 ---------- */
.eg-article-hero { padding: 26px 0 22px; background: #f6fafc; border-bottom: 1px solid var(--eg-line); }
.eg-article-hero .eg-eyebrow { margin-bottom: 12px; }
.eg-article-hero h1 { margin: 0 0 12px; color: var(--eg-primary-deep); font-size: clamp(25px,2.9vw,36px); line-height: 1.28; font-weight: 850; }
.eg-article-sub { max-width: 760px; margin: 0 0 14px; color: var(--eg-muted); font-size: 17px; line-height: 1.75; }
.eg-article-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--eg-muted); font-size: 14px; }
.eg-article-figure { margin: 22px 0 0; }
.eg-article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 20px; box-shadow: var(--eg-shadow-sm); background: var(--eg-soft); }

.eg-article-body { padding: 34px 0 10px; }
.eg-article-main { width: min(880px,100%); margin-inline: auto; }

.eg-toc { margin: 0 0 26px; padding: 18px 20px; border: 1px solid var(--eg-line); border-radius: 16px; background: #fff; }
.eg-toc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--eg-primary-deep); font-weight: 850; }
.eg-toc-head button { min-height: 40px; padding: 0 6px; border: 0; background: none; color: var(--eg-muted); cursor: pointer; }
.eg-toc ol { margin: 0; padding-left: 20px; color: var(--eg-muted); font-size: 15px; line-height: 1.95; }
.eg-toc a { color: var(--eg-primary-deep); text-decoration: none; }
.eg-toc a:hover { color: var(--eg-primary); text-decoration: underline; }

/* 內文（DB HTML）：只調字級與節奏，不覆寫既有內嵌樣式 */
.eg-prose { color: var(--eg-ink); font-size: 17px; line-height: 1.85; }
.eg-prose > h2 { margin: 2em 0 .7em; padding-bottom: .4em; border-bottom: 2px solid var(--eg-soft); color: var(--eg-primary-deep); font-size: clamp(21px,2.2vw,27px); font-weight: 850; line-height: 1.35; }
.eg-prose > h3 { margin: 1.7em 0 .6em; color: var(--eg-primary-deep); font-size: clamp(19px,1.9vw,22px); font-weight: 800; line-height: 1.4; }
.eg-prose h4 { margin: 1.4em 0 .5em; color: var(--eg-primary-deep); font-weight: 800; }
.eg-prose p { margin: 0 0 1.1em; }
.eg-prose ul,.eg-prose ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.eg-prose li { margin-bottom: .45em; }
.eg-prose a { color: var(--eg-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.eg-prose a:hover { color: var(--eg-primary-deep); }
.eg-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.2em 0; }
.eg-prose blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 4px solid var(--eg-primary); border-radius: 0 12px 12px 0; background: var(--eg-soft); color: var(--eg-muted); }
.eg-prose table { width: 100%; border-collapse: collapse; }
.eg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.3em 0; }

/* 上一篇／下一篇 */
.eg-prevnext { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--eg-line); }
.eg-prevnext a { display: block; padding: 14px 16px; border: 1px solid var(--eg-line); border-radius: 14px; background: #fff; color: var(--eg-primary-deep); text-decoration: none; font-weight: 750; line-height: 1.55; }
.eg-prevnext a:hover { border-color: var(--eg-primary); background: var(--eg-soft); }
.eg-prevnext small { display: block; margin-bottom: 4px; color: var(--eg-muted); font-size: 13px; font-weight: 600; }
.eg-prevnext .is-next { text-align: right; }

/* ---------- 9. 文章列表卡（小學堂列表／延伸閱讀） ---------- */
.eg-post-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--eg-gap); }
.eg-post-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.eg-post-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--eg-line); border-radius: 18px; background: #fff; color: var(--eg-ink); text-decoration: none; box-shadow: var(--eg-shadow-sm); transition: box-shadow .2s,transform .2s,border-color .2s; }
.eg-post-card:hover { color: var(--eg-ink); border-color: var(--eg-primary); transform: translateY(-4px); box-shadow: var(--eg-shadow); }
.eg-post-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: var(--eg-soft); }
/* 無題圖時用矮版占位，不要用 16:9 大色塊把列表拉長 */
.eg-post-thumb-fallback { display: grid; place-items: center; width: 100%; height: 62px; background: linear-gradient(135deg,var(--eg-soft),#dbe9f3); color: var(--eg-primary); font-size: 24px; }
.eg-post-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.eg-post-body h3 { margin: 0 0 8px; color: var(--eg-primary-deep); font-size: 17px; font-weight: 800; line-height: 1.5; }
.eg-post-body p { margin: 0 0 12px; color: var(--eg-muted); font-size: 15px; line-height: 1.65; }
.eg-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--eg-muted); font-size: 13px; }
.eg-post-foot span:last-child { color: var(--eg-primary); font-weight: 800; }

/* 簡潔清單（無縮圖時） */
.eg-link-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.eg-link-list a { display: flex; gap: 9px; min-height: 44px; align-items: center; padding: 11px 14px; border: 1px solid var(--eg-line); border-radius: 12px; background: #fff; color: var(--eg-primary-deep); text-decoration: none; font-weight: 700; line-height: 1.5; }
.eg-link-list a:hover { border-color: var(--eg-primary); background: var(--eg-soft); }
.eg-link-list i { flex: 0 0 auto; color: var(--eg-primary); }

/* 分頁 */
.eg-pager { display: flex; justify-content: center; margin-top: 30px; }
.eg-pager .pagination { margin: 0; }

/* ---------- 10. 導購 CTA ---------- */
/* 輕量橫條：文章頁中段／底部用 */
.eg-cta-band { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 30px 0; padding: 22px 24px; border: 1px solid var(--eg-line); border-left: 5px solid var(--eg-primary); border-radius: 0 16px 16px 0; background: var(--eg-soft); }
.eg-cta-band-copy { flex: 1 1 260px; min-width: 0; }
.eg-cta-band strong { display: block; margin-bottom: 5px; color: var(--eg-primary-deep); font-size: 19px; font-weight: 850; }
.eg-cta-band p { margin: 0; color: var(--eg-muted); line-height: 1.7; }
.eg-cta-band .eg-actions { flex: 0 0 auto; }

/* 深色結尾卡 */
.eg-final { padding: 56px 0 68px; }
.eg-final-card { padding: 40px; border-radius: 25px; background: linear-gradient(135deg,var(--eg-primary-deep),var(--eg-primary)); color: #fff; text-align: center; box-shadow: var(--eg-shadow); }
.eg-final-card h2 { margin: 0 0 10px; color: #fff; font-size: clamp(25px,3.1vw,36px); font-weight: 850; }
.eg-final-card p { max-width: 760px; margin: 0 auto 22px; color: rgba(255,255,255,.95); font-size: 17px; line-height: 1.7; }
.eg-final-card .eg-actions { justify-content: center; }
.eg-final-card .eg-btn-secondary { border-color: rgba(255,255,255,.75); background: transparent; color: #fff; }
.eg-final-card .eg-btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; }
.eg-final-card .eg-btn-primary { background: #fff; color: var(--eg-primary-deep); }
.eg-final-card .eg-btn-primary:hover { background: #eef5fa; color: var(--eg-primary-deep); }
.eg-final-contact { margin: 20px 0 0; color: rgba(255,255,255,.95); font-size: 15px; line-height: 1.9; }

/* 深色結尾卡內的按鈕：theme.css 的全站按鈕規則假設淺底，
   在 .eg-final-card 這種深底上會變成深字壓深底，這裡以更高權重校正回白字／白底。
   （只在本檔加規則，不修改 theme.css） */
body .eg-final-card .eg-btn.eg-btn-primary {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--eg-primary-deep) !important;
}
body .eg-final-card .eg-btn.eg-btn-primary:hover { background-color: var(--eg-soft) !important; }
body .eg-final-card .eg-btn.eg-btn-pink {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--eg-cta) !important;
}
body .eg-final-card .eg-btn.eg-btn-pink:hover { background-color: var(--eg-soft-pink) !important; }
body .eg-final-card .eg-btn-secondary.eg-btn-secondary {
  background-color: transparent !important;
  border-color: rgba(255,255,255,.8) !important;
  color: #fff !important;
}
body .eg-final-card .eg-btn-secondary.eg-btn-secondary:hover {
  background-color: rgba(255,255,255,.16) !important;
  border-color: #fff !important;
}

/* ---------- 11. 評論區（收合） ---------- */
.eg-comments { max-width: 920px; margin: 0 auto 40px; border: 1px solid var(--eg-line); border-radius: 16px; background: #fff; }
.eg-comments > summary { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 15px 20px; color: var(--eg-primary-deep); font-weight: 800; cursor: pointer; list-style: none; }
.eg-comments > summary::-webkit-details-marker { display: none; }
.eg-comments > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-weight: 400; }
.eg-comments[open] > summary::after { content: "\F286"; }
.eg-comments-body { padding: 0 20px 20px; }

/* ---------- 12. RWD ---------- */
@media (max-width: 991.98px) {
  .eg-hero-grid,.eg-hero-grid-wide { grid-template-columns: 1fr; gap: 26px; }
  .eg-stat-grid,.eg-steps,.eg-steps-3,.eg-steps-6 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .eg-zone-grid,.eg-post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .eg-card-grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .eg-ranks { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
  .ez-guide-nav,.eg-container { width: min(100% - 24px,1120px); }
  .eg-container-narrow { width: min(100% - 24px,880px); }
  .ez-guide-nav a.ez-guide-nav-cta { margin-left: 0; }
  .eg-hero { padding: 30px 0 28px; }
  .eg-hero h1 { font-size: 32px; }
  .eg-lead { font-size: 16px; }
  .eg-hero-media img { border-width: 5px; border-radius: 18px; }
  .eg-hero-stats { gap: 10px 24px; }
  .eg-section { padding: 44px 0; }
  .eg-section-tight { padding: 30px 0; }
  .eg-section-head { margin-bottom: 22px; text-align: left; }
  .eg-section-head p { font-size: 16px; }
  .eg-card-grid,.eg-card-grid-3,.eg-stat-grid,.eg-steps,.eg-steps-3,.eg-steps-6,
  .eg-zone-grid,.eg-post-grid,.eg-post-grid-2,.eg-value-grid,.eg-link-list,
  .eg-prevnext { grid-template-columns: 1fr; }
  .eg-ranks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .eg-card,.eg-icon-card { padding: 22px; }
  .eg-prevnext .is-next { text-align: left; }
  .eg-article-hero { padding: 20px 0 18px; }
  .eg-article-body { padding: 26px 0 6px; }
  .eg-prose { font-size: 16px; }
  .eg-cta-band { margin: 24px 0; padding: 20px; }
  .eg-cta-band .eg-actions,.eg-cta-band .eg-btn { width: 100%; }
  .eg-final { padding: 40px 0 50px; }
  .eg-final-card { padding: 28px 20px; text-align: left; }
  .eg-final-card .eg-actions { justify-content: flex-start; }
  .eg-final-card .eg-btn { width: 100%; }
}
@media (max-width: 420px) {
  .eg-actions .eg-btn { width: 100%; }
  .eg-ranks { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* === 20260822 hero 底色：品牌淺藍取代近白，讓導覽頁 hero 有份量 ===
   theme.css 有 section.eg-hero{background-color:#F6FAFC!important}（近白，深字可讀但缺份量）。
   guide-system.css 在 theme.css 之後載入 → 同權重 + !important 可覆蓋。
   #E9F1F7 是設計系統的 brand-soft，配 #264C69 文字對比 7.93（AA 通過），
   比純深藍底安全（深藍底需整組文字翻白，且與其他五頁不一致）。 */
section.eg-hero,
.eg-hero {
  background-color: #E9F1F7 !important;
  border-bottom: 1px solid #D6E4EF;
}
/* hero 內的次要說明文字在淺藍底上維持足夠對比 */
.eg-hero .eg-lead { color: #33586E; }

/* === 20260822 會員等級階梯（eg-ladder）===
   一般會員 6 級的門檻與折扣一眼看懂：桌機用高度遞增的階梯柱，
   手機轉為長度遞增的橫條，強化「越買越省」的遞進感。
   數值全部對應 DB ym_user_rank（min_points / discount），勿手動改數字。
   顏色由淺到深，前四階深字淺底、後兩階白字深底，對比皆 >= 4.5:1。 */
.eg-ladder-wrap { margin-top: 22px; }
.eg-ladder {
  display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; align-items: end;
  padding: 20px 16px 0; border: 1px solid var(--eg-line); border-radius: 20px;
  background: #fff; box-shadow: var(--eg-shadow-sm);
}
.eg-ladder-step { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.eg-ladder-bar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--step-h,60px); padding: 12px 6px; border-radius: 14px 14px 0 0;
  background: var(--step-bg,#EFF5FA); color: var(--step-fg,#264C69); text-align: center;
}
.eg-ladder-bar b { font-size: clamp(17px,1.9vw,22px); font-weight: 850; line-height: 1.1; }
.eg-ladder-bar small { font-size: 12px; font-weight: 750; opacity: .92; }
.eg-ladder-foot { padding: 11px 4px 15px; border-top: 3px solid var(--step-fg-line,#39729D); text-align: center; }
.eg-ladder-foot strong { display: block; color: var(--eg-primary-deep); font-size: 15px; font-weight: 800; line-height: 1.3; }
.eg-ladder-foot span { display: block; margin-top: 4px; color: var(--eg-muted); font-size: 12px; line-height: 1.45; }
.eg-ladder-axis {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px 2px 0; color: var(--eg-muted); font-size: 13px; font-weight: 700;
}
.eg-ladder-axis span { display: inline-flex; align-items: center; gap: 6px; }

/* 等級明細表：沿用 eg-compare 外框，但欄位是同一制度的 6 個等級，
   不需要 eg-compare 那種「最後一欄＝對照組」的粉色表頭。 */
.eg-compare-flat thead th:last-child { background: var(--eg-primary-deep); }
.eg-compare-flat tbody th { width: 22%; white-space: nowrap; }
.eg-compare-flat td { white-space: nowrap; }
.eg-compare-flat tbody tr.is-top th,
.eg-compare-flat tbody tr.is-top td { background: var(--eg-soft); font-weight: 800; }
.eg-compare-flat .eg-cell-save { color: var(--eg-cta); font-weight: 800; }

@media (max-width: 991.98px) {
  .eg-ladder { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; padding: 16px 10px 0; }
  .eg-ladder-bar { padding: 10px 3px; }
  .eg-ladder-foot { padding: 9px 2px 13px; }
  .eg-ladder-foot strong { font-size: 13px; }
  .eg-ladder-foot span { font-size: 12px; }
}
@media (max-width: 575.98px) {
  .eg-ladder { grid-template-columns: 1fr; gap: 0; align-items: stretch; padding: 8px 14px; }
  .eg-ladder-step { flex-direction: row; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--eg-line); }
  .eg-ladder-step:last-child { border-bottom: 0; }
  .eg-ladder-bar { flex: 0 0 auto; width: var(--step-w,45%); min-height: 0; padding: 9px 8px; border-radius: 11px; }
  .eg-ladder-bar b { font-size: 18px; }
  .eg-ladder-foot { flex: 1 1 auto; padding: 0; border-top: 0; text-align: left; }
  .eg-ladder-foot strong { font-size: 14px; }
  .eg-ladder-axis { margin-top: 6px; font-size: 12px; }
}