/* ═══════════════════════════════════════════════════════════════════
   AI 應用規劃師備考站 — Redesign 設計系統（Design System）
   對齊 TibaMe 緯育學習平台風格：白底淺灰・青綠/藍綠・CTA 黃・金橙漸層
   ─────────────────────────────────────────────────────────────────────
   前綴規範：
   - 所有元件 class 皆以 `.rs-` 開頭 (Redesign System)，避免與現有站衝突。
   - 設計 token 以 `--rs-*` 命名，掛在 `:root` 上。
   - 本檔為「設計系統」：不含頁面排版骨架（.rs-container / .rs-grid 僅為區塊容器）。
   用法：於 index.html 引入本檔（在各既有 CSS 之後），再逐段將既有 class 換成
         .rs-* 對應 class。可與既有 style.css 並存（因前綴不同不會互相覆寫）。
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   1. 設計 Token（:root）
   ────────────────────────────────────────────── */
:root {
  /* 主品牌色（沿用既有站，不更動） */
  --rs-teal:        #00b894;   /* 主青綠 */
  --rs-teal-dark:   #00997e;   /* 青綠深 */
  --rs-teal-deep:   #0a3d33;   /* 深青綠 / 主文字 */
  --rs-teal-bright: #55efc4;   /* 亮青綠 */
  --rs-teal-light:  #d9f2ec;   /* 青綠淺底 */
  --rs-teal-bg:     #f7fcfb;   /* 青綠極淺底 */

  /* 新增 Accent（不更動品牌主色，僅新增） */
  --rs-cta:         #f7c948;   /* CTA 黃 */
  --rs-cta-dark:    #e5b324;   /* CTA 黃深（hover） */
  --rs-cta-ink:     #3a2c00;   /* CTA 黃上文字色 */
  --rs-gold-orange: #f59f00;   /* 金橙深（與 CTA 黃銜接） */
  /* 金→橙 漸層：hero 關鍵詞 / 強調 */
  --rs-accent-grad: linear-gradient(135deg, #fbbf24 0%, #f59f00 55%, #fb923c 100%);
  /* 青綠漸層：品牌應用（主按鈕 / 圖示底） */
  --rs-teal-grad:   linear-gradient(135deg, #00b894 0%, #55efc4 100%);

  /* 背景 / 中性色 */
  --rs-bg:          #f7f9f8;   /* 全站淺灰底 */
  --rs-bg-card:     #ffffff;   /* 卡片白 */
  --rs-bg-soft:     #eef4f1;   /* 淺青綠灰區隔帶 */
  --rs-ink:         #0a3d33;   /* 主文字（深青綠） */
  --rs-ink-2:       #2d5a50;   /* 次文字 */
  --rs-text:        #1b3b33;   /* 正文 */
  --rs-text-2:      #5f7d74;   /* 次要文字灰綠 */
  --rs-text-3:      #8aa39b;   /* 輔助文字 */
  --rs-border:      #e2ece7;   /* 卡片分隔線 */
  --rs-border-soft: #eef4f1;   /* 更淺分隔線 */

  /* 語意色 */
  --rs-green:       #1a8a3f;   --rs-green-light: #e6f6ec;
  --rs-amber:       #b8860b;   --rs-amber-light: #fef6e0;
  --rs-red:         #d64545;   --rs-red-light:   #fdecec;
  --rs-blue:        #2f80ed;   --rs-blue-light:  #e8f1fd;

  /* 訊息 / 狀態徽章 */
  --rs-badge-lv1:   #e6f6ec;   --rs-badge-lv1-ink: #1a8a3f;  /* 級別·初階 */
  --rs-badge-lv2:   #e8f1fd;   --rs-badge-lv2-ink: #2f80ed;   /* 級別·中階 */
  --rs-badge-lv3:   #fef3e0;   --rs-badge-lv3-ink: #b8860b;   /* 級別·進階 */
  --rs-badge-ipas:  #dff1e8;   --rs-badge-ipas-ink: #0a7a5c;  /* 官方 iPAS */

  /* 字體 */
  --rs-font: "PingFang TC", "PingFang SC", "Heiti TC", "Heiti SC",
             "Microsoft JhengHei", "Microsoft YaHei", -apple-system,
             "Segoe UI", "Noto Sans TC", sans-serif;

  /* 字級階層 */
  --rs-f-hero:  clamp(2.4rem, 5.2vw, 3.5rem);   /* hero H1 ~3.2rem 基準 */
  --rs-f-h2:    clamp(1.4rem, 3vw, 2rem);       /* 區塊標題 ~1.6rem */
  --rs-f-h3:    1.25rem;
  --rs-f-h4:    1.05rem;
  --rs-f-body:  1rem;
  --rs-f-sm:    .9rem;        /* 卡片內小字 */
  --rs-f-xs:    .8rem;        /* 標籤 / 徽章 */

  /* 間距 / 圓角 / 陰影 */
  --rs-radius:   16px;
  --rs-radius-lg: 20px;
  --rs-radius-pill: 999px;
  --rs-shadow-sm: 0 1px 3px rgba(10,61,51,.05), 0 1px 2px rgba(10,61,51,.04);
  --rs-shadow-md: 0 6px 22px rgba(10,61,51,.08);
  --rs-shadow-lg: 0 14px 44px rgba(10,61,51,.12);
  --rs-shadow-glow: 0 6px 22px rgba(247,201,72,.45); /* CTA 黃光暈 */
  --rs-tr:        .22s cubic-bezier(.4,0,.2,1);

  /* 容器寬度 */
  --rs-container-max: 1200px;
}

/* ──────────────────────────────────────────────
   2. 基底 / Reset（僅套用 .rs- 體系，避免污染既有站）
   ────────────────────────────────────────────── */
.rs-bg { background: var(--rs-bg); color: var(--rs-text); }
body.rs-root { margin:0; font-family: var(--rs-font); line-height:1.65;
               font-size: var(--rs-f-body); -webkit-font-smoothing:antialiased; }
.rs-container { width:100%; max-width: var(--rs-container-max); margin:0 auto; padding:0 24px; }
.rs-container-wide { max-width: 1360px; }
.rs-section { padding: clamp(48px, 7vw, 88px) 0; }
.rs-section--soft { background: var(--rs-bg-soft); }
.rs-section--white { background: var(--rs-bg-card); }

/* 標題字級階層 */
.rs-h1 { font-size: var(--rs-f-hero); font-weight:800; line-height:1.15;
         letter-spacing:-.02em; color: var(--rs-ink); }
.rs-h2 { font-size: var(--rs-f-h2); font-weight:750; letter-spacing:-.015em;
         color: var(--rs-ink); line-height:1.2; }
.rs-h3 { font-size: var(--rs-f-h3); font-weight:700; color: var(--rs-ink); }
.rs-h4 { font-size: var(--rs-f-h4); font-weight:700; color: var(--rs-ink); }
.rs-lead { font-size: 1.06rem; color: var(--rs-text-2); }
.rs-center { text-align:center; }

/* 金橙漸層關鍵詞 */
.rs-accent-text {
  background: var(--rs-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 青綠漸層關鍵詞 */
.rs-teal-text {
  background: var(--rs-teal-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 區塊頂部小標（kicker） */
.rs-kicker { display:inline-block; padding:5px 14px; border-radius: var(--rs-radius-pill);
             background: var(--rs-teal-light); color: var(--rs-teal-dark);
             font-size: .8rem; font-weight:750; letter-spacing:.02em; margin-bottom:16px; }

/* ──────────────────────────────────────────────
   3. Sticky Header（sticky：白底・品牌・導航・右側 CTA）
   ────────────────────────────────────────────── */
.rs-header {
  position: sticky; top:0; z-index: 1000;
  background: rgba(255,255,255,.92); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rs-border-soft);
  box-shadow: 0 1px 0 rgba(10,61,51,.02);
}
.rs-nav { display:flex; align-items:center; justify-content:space-between;
          height: 68px; gap: 20px; }
.rs-brand { display:flex; align-items:center; gap:11px; font-weight:800;
            font-size:1.08rem; color: var(--rs-ink); text-decoration:none; }
.rs-brand-logo { width:36px; height:36px; border-radius:11px;
                 background: var(--rs-teal-grad); color:#fff; font-weight:800;
                 display:flex; align-items:center; justify-content:center;
                 font-size:1.02rem; box-shadow: 0 3px 10px rgba(0,184,148,.35); flex:none; }
.rs-brand-name { line-height:1.1; }
.rs-brand-sub { display:block; font-size:.68rem; font-weight:600;
                color: var(--rs-text-3); letter-spacing:.04em; }
.rs-nav-links { display:flex; gap:4px; }
.rs-nav-links a { padding:8px 14px; border-radius: var(--rs-radius-pill);
                  font-size:.92rem; font-weight:600; color: var(--rs-ink-2);
                  text-decoration:none; transition: all var(--rs-tr); }
.rs-nav-links a:hover { background: var(--rs-teal-light); color: var(--rs-teal-dark); }
.rs-nav-links a.rs-active { background: var(--rs-teal); color:#fff; }
.rs-nav-cta { margin-left:6px; }

/* 漢堡選單按鈕（桌面隱藏，手機顯示） */
.rs-menu-btn { display:none; align-items:center; justify-content:center; width:42px; height:42px;
               border:1.5px solid var(--rs-border); background:#fff; border-radius:10px;
               font-size:1.3rem; line-height:1; cursor:pointer; color:var(--rs-ink);
               font-family:inherit; transition: all var(--rs-tr); }
.rs-menu-btn:hover { border-color: var(--rs-teal); color: var(--rs-teal-dark); background: var(--rs-teal-bg); }

/* ──────────────────────────────────────────────
   4. 按鈕（主 / 次 / CTA黃 / 純文字）
   ────────────────────────────────────────────── */
.rs-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
          padding:13px 28px; border-radius: var(--rs-radius-pill);
          font-weight:700; font-size:1rem; cursor:pointer; border:none;
          text-decoration:none; line-height:1; transition: all var(--rs-tr); }
.rs-btn:active { transform: translateY(0) scale(.98); }

.rs-btn--primary { background: var(--rs-teal); color:#fff;
                   box-shadow: 0 5px 16px rgba(0,184,148,.35); }
.rs-btn--primary:hover { background: var(--rs-teal-dark); transform: translateY(-2px);
                         box-shadow: 0 9px 26px rgba(0,184,148,.42); }

.rs-btn--cta { background: var(--rs-cta); color: var(--rs-cta-ink);
               box-shadow: var(--rs-shadow-glow); }
.rs-btn--cta:hover { background: var(--rs-cta-dark); transform: translateY(-2px);
                     box-shadow: 0 10px 26px rgba(229,179,36,.5); }

.rs-btn--ghost { background: #fff; color: var(--rs-ink);
                 border: 1.5px solid var(--rs-border); box-shadow: var(--rs-shadow-sm); }
.rs-btn--ghost:hover { border-color: var(--rs-teal); color: var(--rs-teal-dark);
                       background: var(--rs-teal-bg); transform: translateY(-1px); }

.rs-btn--link { background:none; color: var(--rs-teal-dark); padding:8px 8px; box-shadow:none; }
.rs-btn--link:hover { color: var(--rs-teal); }

.rs-btn--sm { padding:9px 18px; font-size:.88rem; }
.rs-btn--lg { padding:16px 34px; font-size:1.05rem; }
.rs-btn--block { width:100%; }
.rs-btn-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; }

/* ──────────────────────────────────────────────
   5. Badge（pill 徽章 / 級別）
   ────────────────────────────────────────────── */
.rs-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
            border-radius: var(--rs-radius-pill); font-size: .78rem; font-weight:750;
            line-height:1.4; white-space:nowrap; }
.rs-badge--teal { background: var(--rs-teal-light); color: var(--rs-teal-dark); }
.rs-badge--cta  { background: #fdf0cd; color: var(--rs-cta-dark); }
.rs-badge--ipas { background: var(--rs-badge-ipas); color: var(--rs-badge-ipas-ink); }
.rs-badge--level1 { background: var(--rs-badge-lv1); color: var(--rs-badge-lv1-ink); }
.rs-badge--level2 { background: var(--rs-badge-lv2); color: var(--rs-badge-lv2-ink); }
.rs-badge--level3 { background: var(--rs-badge-lv3); color: var(--rs-badge-lv3-ink); }
.rs-badge--gray { background: var(--rs-bg-soft); color: var(--rs-text-2); }
.rs-badge-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.rs-badge--level1 .rs-badge-dot, .rs-badge--green .rs-badge-dot { background: var(--rs-green); }
.rs-badge--level2 .rs-badge-dot { background: var(--rs-blue); }
.rs-badge--level3 .rs-badge-dot { background: var(--rs-amber); }
.rs-badge--teal  .rs-badge-dot { background: var(--rs-teal); }

/* 進度百分比 chip（課程卡計數用） */
.rs-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
           border-radius: var(--rs-radius-pill); font-size: .76rem; font-weight:700;
           color: var(--rs-text-2); background: var(--rs-bg); }

/* ──────────────────────────────────────────────
   6. Hero（大字 + 副標 + CTA + 右側飾卡/影像）
   ────────────────────────────────────────────── */
.rs-hero {
  position:relative; overflow:hidden; padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(760px 320px at 92% -8%, rgba(85,239,196,.32), transparent 60%),
    radial-gradient(620px 280px at -6% 112%, rgba(0,184,148,.16), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--rs-bg) 100%);
}
/* 背景裝飾圓點 / 圓環 */
.rs-hero::before, .rs-hero::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }
.rs-hero::before { top:70px; left:52%; width:16px; height:16px; background: var(--rs-teal-bright); opacity:.7; }
.rs-hero::after  { top:150px; right:6%;  width:110px; height:110px; border:3px solid rgba(0,184,148,.16); }

.rs-hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,56px);
                align-items:center; position:relative; z-index:2; }
.rs-hero-content { max-width: 560px; }
.rs-hero h1 { margin: 6px 0 20px; }
.rs-hero-sub { font-size: 1.08rem; color: var(--rs-text-2); max-width: 480px; margin-bottom: 30px; }
.rs-hero-cta { display:flex; gap:14px; flex-wrap:wrap; }

/* Hero 右側飾卡/影像 */
.rs-hero-visual { position:relative; display:flex; justify-content:center; min-height:340px; }
.rs-hero-card {
  width: min(380px, 92%); background: var(--rs-bg-card); border:1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg); padding: 26px;
  box-shadow: var(--rs-shadow-lg); position: relative;
}
.rs-hero-card-title { display:flex; justify-content:space-between; align-items:center;
                      font-size:.92rem; font-weight:750; color: var(--rs-ink); margin-bottom: 16px; }
.rs-hero-float { position:absolute; top:-14px; right:-10px; background:#fff;
                 border:1px solid var(--rs-border); border-radius: 12px;
                 padding:8px 14px; font-size:.8rem; font-weight:750; color: var(--rs-teal-dark);
                 box-shadow: var(--rs-shadow-md); display:flex; align-items:center; gap:6px; z-index:3; }
.rs-hero-float--bottom { top:auto; bottom:-14px; right:auto; left:-10px; color: var(--rs-gold-orange); }
/* 迷你統計（hero 飾卡內） */
.rs-hero-mini { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.rs-mini-stat { background: var(--rs-bg-soft); border-radius: 12px; padding: 11px 14px;
                transition: all var(--rs-tr); }
.rs-mini-stat:hover { background: var(--rs-teal-light); }
.rs-mini-stat b { display:block; font-size:1.15rem; font-weight:800; color: var(--rs-teal-dark); }
.rs-mini-stat span { font-size:.76rem; color: var(--rs-text-2); }

/* ──────────────────────────────────────────────
   7. 統計區塊（白卡・大數字品牌色・圓角陰影）
   ────────────────────────────────────────────── */
.rs-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.rs-stat-card {
  background: var(--rs-bg-card); border:1px solid var(--rs-border);
  border-radius: var(--rs-radius); padding: 24px 22px; text-align:center;
  box-shadow: var(--rs-shadow-sm); transition: all var(--rs-tr); position:relative; overflow:hidden;
}
.rs-stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
                        background: var(--rs-teal-grad); opacity:0; transition: opacity var(--rs-tr); }
.rs-stat-card:hover { transform: translateY(-4px); box-shadow: var(--rs-shadow-md); }
.rs-stat-card:hover::before { opacity:1; }
.rs-stat-card b { display:block; font-size: 2.2rem; font-weight:800; line-height:1;
                  color: var(--rs-teal); letter-spacing:-.02em; }
.rs-stat-card:nth-child(2) b { color: var(--rs-teal-dark); }
.rs-stat-card:nth-child(3) b { color: var(--rs-teal); }
.rs-stat-card:nth-child(4) b { color: var(--rs-teal-dark); }
.rs-stat-card span { display:inline-block; margin-top:8px; font-size:.86rem;
                     color: var(--rs-text-2); font-weight:550; }

/* ──────────────────────────────────────────────
   8. Lead Magnet 帶（左文右圖・黃色 CTA）
   ────────────────────────────────────────────── */
.rs-lead {
  position:relative; border-radius: var(--rs-radius-lg); overflow:hidden;
  padding: clamp(28px,4vw,44px); color: #fff;
  background:
    radial-gradient(420px 220px at 90% -10%, rgba(85,239,196,.35), transparent 60%),
    linear-gradient(135deg, var(--rs-teal-deep) 0%, #0e5243 100%);
  box-shadow: var(--rs-shadow-lg);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.rs-lead::after { content:''; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px;
                  border-radius:50%; border: 26px solid rgba(85,239,196,.12); }
.rs-lead-content { max-width: 540px; position:relative; z-index:2; }
.rs-lead-content h3 { color:#fff; margin-bottom:10px; }
.rs-lead-content p { color: rgba(255,255,255,.82); margin-bottom:0; }
.rs-lead-badge { display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
                 padding:5px 13px; border-radius: var(--rs-radius-pill);
                 background: rgba(247,201,72,.18); color: var(--rs-teal-bright);
                 font-size:.8rem; font-weight:750; }
.rs-lead-art { flex:none; width: min(300px, 100%); position:relative; z-index:2;
               display:flex; justify-content:center; }
.rs-lead-chip { background:#fff; border-radius: 14px; padding:16px 18px; width:100%; max-width:300px;
                box-shadow: var(--rs-shadow-lg); }
.rs-lead-chip b { display:block; font-size:1rem; font-weight:800; color: var(--rs-ink); }
.rs-lead-chip span { font-size:.8rem; color: var(--rs-text-2); }
.rs-lead-chip .rs-bar { margin-top:12px; background: var(--rs-bg-soft); height:8px; border-radius:999px; overflow:hidden; }
.rs-lead-chip .rs-bar i { display:block; height:100%; width:72%;
                          background: var(--rs-accent-grad); border-radius:999px; }

/* ──────────────────────────────────────────────
   9. 課程卡（級別徽章/時長/進度/進入鈕）
   ────────────────────────────────────────────── */
.rs-course-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.rs-course-card {
  background: var(--rs-bg-card); border:1px solid var(--rs-border);
  border-radius: var(--rs-radius); overflow:hidden;
  box-shadow: var(--rs-shadow-sm); display:flex; flex-direction:column;
  transition: all var(--rs-tr); position:relative;
}
.rs-course-card:hover { transform: translateY(-5px); box-shadow: var(--rs-shadow-md); border-color: var(--rs-teal); }
.rs-course-top { padding: 20px 20px 6px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.rs-course-title { font-size: calc(var(--rs-f-h4) + .04rem); font-weight:750; color: var(--rs-ink); }
.rs-course-desc { padding: 4px 20px 0; font-size: .9rem; color: var(--rs-text-2); flex:1; }
.rs-course-meta { display:flex; align-items:center; gap:16px; padding: 12px 20px 0; }
.rs-course-meta span { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color: var(--rs-text-2); }
.rs-course-meta svg, .rs-course-meta i { color: var(--rs-teal); font-style:normal; }
/* 進度列 */
.rs-progress { margin: 16px 20px 6px; }
.rs-progress-top { display:flex; justify-content:space-between; font-size:.78rem;
                   color: var(--rs-text-2); margin-bottom:7px; }
.rs-progress-top b { color: var(--rs-teal-dark); }
.rs-bar { background: var(--rs-bg-soft); height:8px; border-radius:999px; overflow:hidden; }
.rs-bar i { display:block; height:100%; border-radius:999px; background: var(--rs-teal-grad); }
/* 課程卡底部進入鈕 */
.rs-course-cta { padding: 16px 20px 20px; }
.rs-course-cta .rs-btn { width:100%; }

/* 平板卡片（診斷/精選卡片風格） */
.rs-panel-card {
  background: var(--rs-bg-card); border:1px solid var(--rs-border);
  border-radius: var(--rs-radius); padding: 26px;
  box-shadow: var(--rs-shadow-sm); transition: all var(--rs-tr);
}
.rs-panel-card:hover { box-shadow: var(--rs-shadow-md); transform: translateY(-3px); }
.rs-panel-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.rs-panel-ico { width:46px; height:46px; border-radius:13px; flex:none;
                background: var(--rs-teal-light); color: var(--rs-teal-dark);
                display:flex; align-items:center; justify-content:center; font-size:1.3rem; }

/* ──────────────────────────────────────────────
   10. Sprint / 學習衝刺卡（並排 4 步驟風格）
   ────────────────────────────────────────────── */
.rs-sprint-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; counter-reset: sprint; }
.rs-sprint {
  position:relative; background: var(--rs-bg-card); border:1px solid var(--rs-border);
  border-radius: var(--rs-radius); padding: 26px 22px 22px;
  box-shadow: var(--rs-shadow-sm); transition: all var(--rs-tr); counter-increment: sprint;
}
.rs-sprint:hover { transform: translateY(-5px); box-shadow: var(--rs-shadow-md); }
.rs-sprint::before { content: counter(sprint, decimal-leading-zero);
  position:absolute; top:-13px; left:20px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background: var(--rs-teal); color:#fff; font-weight:800; font-size:.85rem;
  border-radius:50%; box-shadow: 0 3px 10px rgba(0,184,148,.4); }
.rs-sprint:nth-child(2)::before { background: var(--rs-teal-dark); }
.rs-sprint:nth-child(3)::before { background: var(--rs-cta); color: var(--rs-cta-ink); box-shadow: var(--rs-shadow-glow); }
.rs-sprint:nth-child(4)::before { background: var(--rs-gold-orange); }
.rs-sprint-ico { width:52px; height:52px; border-radius:15px; display:flex; align-items:center;
                 justify-content:center; font-size:1.5rem; margin-bottom:16px;
                 background: var(--rs-teal-light); color: var(--rs-teal-dark); }
.rs-sprint h4 { margin-bottom:8px; }
.rs-sprint p { font-size:.9rem; color: var(--rs-text-2); }

/* ──────────────────────────────────────────────
   11. 多欄 Footer（專業分欄）
   ────────────────────────────────────────────── */
.rs-footer { background: var(--rs-teal-deep); color:#cfefe4; padding: clamp(44px,6vw,72px) 0 0; }
.rs-footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap:32px; }
.rs-footer-col { min-width:0; }
.rs-footer-about b { display:block; font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:14px; }
.rs-footer h4 { color:#fff; font-size:.95rem; font-weight:750; margin-bottom:16px; letter-spacing:.03em; }
.rs-footer ul { list-style:none; padding:0; margin:0; }
.rs-footer ul li { margin-bottom:11px; }
.rs-footer a { color:#9fd6c4; text-decoration:none; font-size:.9rem; transition: color var(--rs-tr); }
.rs-footer a:hover { color: var(--rs-teal-bright); }
.rs-footer-desc { color:#8fb8a9; font-size:.88rem; margin-top:14px; line-height:1.7; }
.rs-footer-social { display:flex; gap:10px; margin-top:18px; }
.rs-footer-social a { width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08);
                      display:flex; align-items:center; justify-content:center; color:#fff; font-size:.95rem; }
.rs-footer-social a:hover { background: var(--rs-teal); }
.rs-footer-news { display:flex; margin-top:16px; }
.rs-footer-news input { flex:1; padding:10px 14px; border:1px solid rgba(255,255,255,.18);
                        border-radius: 10px 0 0 10px; background: rgba(255,255,255,.06);
                        color:#fff; font-family:inherit; font-size:.88rem; outline:none; }
.rs-footer-news input::placeholder { color:#8fb8a9; }
.rs-footer-news button { padding:10px 16px; border:none; border-radius:0 10px 10px 0;
                         background: var(--rs-cta); color: var(--rs-cta-ink);
                         font-weight:750; font-size:.88rem; cursor:pointer; transition: background var(--rs-tr); }
.rs-footer-news button:hover { background: var(--rs-cta-dark); }
.rs-footer-bottom { margin-top:40px; border-top:1px solid rgba(255,255,255,.12);
                    padding: 20px 0; display:flex; justify-content:space-between;
                    align-items:center; gap:16px; flex-wrap:wrap; }
.rs-footer-bottom p { font-size:.8rem; color:#8fb8a9; margin:0; }
.rs-footer-bottom a { font-size:.8rem; }

/* ──────────────────────────────────────────────
   12. 響應式（media query + flex/grid，手機單欄堆疊）
   ────────────────────────────────────────────── */

/* 平板 ≤1024px */
@media (max-width: 1024px) {
  .rs-course-grid { grid-template-columns: repeat(2,1fr); }
  .rs-sprint-grid { grid-template-columns: repeat(2,1fr); }
  .rs-stats { grid-template-columns: repeat(2,1fr); }
  .rs-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* 手機 ≤768px（單欄堆疊） */
@media (max-width: 768px) {
  .rs-nav { height:60px; }
  .rs-brand-name, .rs-brand-sub { display:none; }
  .rs-nav-links { display:none; }
  .rs-menu-btn { display:flex; }
  .rs-nav-cta { margin-left:auto; }
  /* 手機下拉選單：點 ☰ 開 .open → 顯示為面板 */
  .rs-nav-links.open {
    position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column;
    background:#fff; border-bottom:1px solid var(--rs-border); box-shadow: var(--rs-shadow-md);
    padding:10px 16px 16px; gap:4px; z-index:999;
  }
  .rs-nav-links.open a { padding:13px 14px; border-radius:10px; font-size:1rem; }
  .rs-nav-links.open a:hover { background: var(--rs-teal-light); }
  .rs-nav-links.open .rs-nav-cta, .rs-nav-links.open a.rs-btn { margin-top:6px; }

  .rs-hero-grid { grid-template-columns: 1fr; gap:36px; }
  .rs-hero-visual { order:2; min-height:0; }
  .rs-hero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); letter-spacing:-.01em; }
  .rs-hero-float { right:auto; left:50%; transform:translateX(-50%); top:-46px; width:max-content; }
  .rs-hero-float--bottom { left:50%; top:auto; bottom:-14px; right:auto; }

  .rs-stats { grid-template-columns: 1fr 1fr; gap:14px; }
  .rs-course-grid { grid-template-columns: 1fr; }
  .rs-sprint-grid { grid-template-columns: 1fr; }
  .rs-lead { flex-direction: column; text-align:center; align-items:center; }
  .rs-lead .rs-lead-badge { margin-left:auto; margin-right:auto; }

  /* 頁腳堆疊為單欄 */
  .rs-footer-grid { grid-template-columns: 1fr; gap:28px; }
  .rs-footer-bottom { flex-direction:column; text-align:center; }

  /* 行動裝置主文維持可讀（≥ 15px） */
  .rs-course-desc, .rs-lead-content p, .rs-stat-card span,
  .rs-sprint p, .rs-lead { font-size: 1rem; }
  .rs-btn--lg { font-size:1.02rem; }
}

/* 細小屏 ≤420px */
@media (max-width: 420px) {
  .rs-container { padding:0 16px; }
  .rs-stats { grid-template-columns: 1fr; }
  .rs-hero-cta { flex-direction:column; }
  .rs-hero-cta .rs-btn { width:100%; }
  .rs-stat-card b { font-size: 2rem; }
}

/* ──────────────────────────────────────────────
   13. 動畫 / 工具類
   ────────────────────────────────────────────── */
@keyframes rs-fade-up {
  from { opacity:0; transform: translateY(22px); }
  to   { opacity:1; transform: translateY(0); }
}
.rs-anim-up { animation: rs-fade-up .6s var(--rs-tr) both; }
.rs-anim-delay-1 { animation-delay:.1s; }
.rs-anim-delay-2 { animation-delay:.2s; }
.rs-anim-delay-3 { animation-delay:.3s; }

.rs-mt-0{margin-top:0}.rs-mt-1{margin-top:12px}.rs-mt-2{margin-top:24px}
.rs-mt-3{margin-top:40px}.rs-mb-0{margin-bottom:0}.rs-mb-1{margin-bottom:12px}
.rs-mb-2{margin-bottom:24px}.rs-center{text-align:center}.rs-flex{display:flex}
.rs-flex-center{align-items:center;justify-content:center}.rs-gap-2{gap:16px}.rs-gap-3{gap:24px}
.rs-text-2{color:var(--rs-text-2)}.rs-text-teal{color:var(--rs-teal-dark)}
.rs-text-cta{color:var(--rs-cta-dark)}.rs-hide{display:none}

/* 尊重使用者減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
/* ===== 標題：證照名青綠品牌色高亮（極簡、去促銷動畫） ===== */
.rs-title-highlight {
  color: var(--rs-teal);
  font-weight: 800;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* ===== 四步驟卡層次放大：h4 更粗更大、p 拉淡加間距 ===== */
.rs-sprint h4 { font-size: 1.06rem; font-weight: 780; letter-spacing: -.01em; margin-bottom: 10px; }
.rs-sprint p  { font-size: .86rem; color: var(--rs-text-2); line-height: 1.55; margin-top: 2px; }

/* Day0 免費 badge（明確標示不誤導為付費門檻） */
.rs-badge--free {
  background: var(--rs-teal-light); color: var(--rs-teal-dark);
  font-weight: 800; font-size: .78rem;
}
.rs-badge--free::before { content: '✓ '; }

/* ===== Ticker 跑馬燈（最新公告輪播）===== */
.rs-ticker {
  display: flex; align-items: center; gap: 0;
  background: #ffffff; border-top: 1px solid var(--rs-border); border-bottom: 1px solid var(--rs-border);
  padding: 0; overflow: hidden; height: 42px; position: relative;
  max-width: var(--rs-container-max); margin: 0 auto;
}
.rs-ticker-label {
  flex-shrink: 0; padding: 0 14px; font-size: .82rem; font-weight: 700;
  background: var(--rs-teal-deep); color: #fff; height: 100%; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; z-index: 1;
}
.rs-ticker-track {
  display: flex; gap: 48px; align-items: center; white-space: nowrap;
  animation: rsTickerScroll 32s linear infinite; padding-left: 20px;
}
.rs-ticker-track a {
  font-size: 1rem; color: var(--rs-ink); text-decoration: none; transition: color var(--rs-tr); font-weight: 500;
}
.rs-ticker-track a:hover { color: var(--rs-teal); }
.rs-ticker-track .rs-ticker-cat {
  font-size: .7rem; font-weight: 700; color: #fff; background: var(--rs-teal-dark);
  padding: 2px 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle;
}
@keyframes rsTickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-ticker-track { animation: none; }
}

/* ===== Hero 單欄居中（拿掉考情卡後）===== */
.rs-hero-center {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 720px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2;
}
.rs-hero-center .rs-badge { margin-bottom: 20px; }
.rs-hero-center .rs-h1 { margin: 0 0 20px; }
.rs-hero-center .rs-hero-sub { font-size: 1.08rem; color: var(--rs-text-2); max-width: 600px; margin: 0 auto 28px; line-height: 1.7; }
.rs-hero-center .rs-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.rs-hero-trust { font-size: .92rem; color: var(--rs-text-2); margin-top: 10px; text-align: center; max-width: 520px; }
@media (max-width: 768px) {
  .rs-hero-center .rs-hero-sub { font-size: 1rem; max-width: 100%; }
  .rs-hero-center .rs-h1 { font-size: 1.7rem; }
}

/* ===== 產品截圖特效 ===== */
.rs-preview-img {
  border-radius: var(--rs-radius); overflow: hidden;
  box-shadow: var(--rs-shadow-md); border: 1px solid var(--rs-border);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.rs-preview-img:hover {
  transform: translateY(-6px) scale(1.008);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
/* 滾動淡入 */
.rs-preview-img { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.rs-preview-img.rs-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rs-preview-img { opacity: 1; transform: none; transition: none; }
}

/* ===== 跑馬燈配色 v2：柔和反差 ===== */
.rs-ticker { background: var(--rs-teal-bg); border-color: var(--rs-border-soft); }
.rs-ticker-label { background: var(--rs-teal-dark); color: #fff; }
.rs-ticker-track a { color: var(--rs-ink); font-weight: 600; }
.rs-ticker-track .rs-ticker-cat { background: var(--rs-teal); color: #fff; }

/* ===== 統計卡繽紛柔和配色 + 數字 count-up 動畫 ===== */
.rs-stat-card { overflow: hidden; }
.rs-stat-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.06; border-radius: inherit; transition: opacity var(--rs-tr); pointer-events: none;
}
.rs-stat-card:nth-child(1)::after { background: var(--rs-teal); }
.rs-stat-card:nth-child(2)::after { background: var(--rs-blue); }
.rs-stat-card:nth-child(3)::after { background: var(--rs-amber); }
.rs-stat-card:nth-child(4)::after { background: #8e44ad; }
.rs-stat-card:nth-child(1) b { color: var(--rs-teal); }
.rs-stat-card:nth-child(2) b { color: var(--rs-blue); }
.rs-stat-card:nth-child(3) b { color: var(--rs-amber); }
.rs-stat-card:nth-child(4) b { color: #8e44ad; }

/* count-up 動畫態：數字初始為 0，動畫結束才顯示真實值 */
.rs-stat-count { display: inline-block; }

/* ===== Hero 左文右圖 ===== */
.rs-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.rs-hero-grid .rs-hero-content {
  display: flex; flex-direction: column;
  text-align: left;
}
.rs-hero-grid .rs-hero-content .rs-badge { margin-bottom: 18px; align-self: flex-start; }
.rs-hero-grid .rs-hero-content .rs-h1 { text-align: left; }
.rs-hero-grid .rs-hero-content .rs-hero-sub { text-align: left; margin-left: 0; }
.rs-hero-grid .rs-hero-content .rs-hero-cta { justify-content: flex-start; }
.rs-hero-grid .rs-hero-content .rs-hero-trust { text-align: left; margin-left: 0; max-width: none; }
.rs-hero-grid .rs-hero-content .rs-hero-scarcity { text-align: left; margin-left: 0; }
.rs-hero-grid .rs-hero-img {
  border-radius: var(--rs-radius-lg); overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  max-height: 420px;
}
.rs-hero-grid .rs-hero-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 768px) {
  .rs-hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .rs-hero-grid .rs-hero-content { text-align: center; }
  .rs-hero-grid .rs-hero-content .rs-h1 { text-align: center; }
  .rs-hero-grid .rs-hero-content .rs-hero-sub { text-align: center; margin: 0 auto 28px; }
  .rs-hero-grid .rs-hero-content .rs-hero-cta { justify-content: center; }
  .rs-hero-grid .rs-hero-content .rs-hero-trust { text-align: center; margin: 0 auto; }
  .rs-hero-grid .rs-hero-img { max-height: 280px; }
}


/* ===== Hero 底圖加文字（淡化處理）===== */
.rs-hero {
  background: url('/assets/hero-desk.jpg') center/cover no-repeat;
  position: relative;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px;
}
.rs-hero::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(247,249,248,.82); /* 淺白淡化遮罩 */
  z-index: 1;
}
.rs-hero > * { position: relative; z-index: 2; }
.rs-hero-center {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 680px; margin: 0 auto;
}
@media (max-width: 768px) {
  .rs-hero { min-height: 400px; padding: 60px 20px; }
}

/* ===== Hero 底圖遮罩強化（文字更明顯）===== */
.rs-hero::before { background: rgba(247,249,248,.65); } /* 淡化遮罩降到65% */
.rs-hero .rs-h1 { text-shadow: 0 2px 8px rgba(255,255,255,.6); }
.rs-hero .rs-hero-sub { text-shadow: 0 1px 4px rgba(255,255,255,.4); }
.rs-hero .rs-hero-trust { text-shadow: 0 1px 3px rgba(255,255,255,.3); }
.rs-hero::before { background: rgba(247,249,248,.30); } /* 再降到30%，圖片清晰可見 */
.rs-hero .rs-h1 { color: var(--rs-teal-deep); text-shadow: 0 2px 12px rgba(255,255,255,.9); }
/* 修復：hero 內 .rs-accent-text 金橙漸層被 .rs-hero .rs-h1 的 color 覆蓋（specificity 衝突）
   在 Firefox 及依賴標準 color:transparent 顯示漸層的瀏覽器，標題字會變深墨而非金橙 */
.rs-hero .rs-h1 .rs-accent-text { color: transparent; -webkit-text-fill-color: transparent; }
.rs-hero .rs-hero-sub { color: var(--rs-ink); text-shadow: 0 1px 8px rgba(255,255,255,.8); }

/* ===== ① 標題 Serif 字型（權威感）===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700;900&display=swap');
.rs-h1 { font-weight: 800; letter-spacing: 0; }
/* 明體(Noto Serif TC)僅保留給首頁封面 title；其他頁(學習/刷題/衝刺等)的 .rs-h1 用黑體 var(--rs-font)，不讓全域 h1 變明體 */
#rs-hero .rs-h1 { font-family: 'Noto Serif TC', serif; font-weight: 900; letter-spacing: -0.03em; }

/* ===== ② 雙色強調：「14 天」青綠 + 「AI 應用規劃師」深墨 ===== */
.rs-title-highlight { color: var(--rs-teal); }
.rs-title-ink { color: var(--rs-teal-deep); font-weight: 900; }
.rs-hero::before { background: rgba(247,249,248,.50); } /* 刷白淡化到50% */
.rs-hero::before { background: rgba(247,249,248,.70); } /* 再刷白到70% */
.rs-hero .rs-h1 { text-shadow: 0 2px 16px rgba(255,255,255,.95); }
.rs-hero .rs-hero-sub { text-shadow: 0 1px 12px rgba(255,255,255,.9); }

/* ===== Hero 遮罩（用 ::after 覆蓋舊裝飾）===== */
.rs-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(247,249,248,.70); /* 70% 白淡化 */
  border-radius: 0; /* 覆蓋原本的50%圓角 */
}
.rs-hero > * { position: relative; z-index: 2; }
.rs-hero .rs-h1 { text-shadow: 0 2px 16px rgba(255,255,255,.95); }
.rs-hero .rs-hero-sub { text-shadow: 0 1px 12px rgba(255,255,255,.9); }
/* ===== Hero 遮罩：完全覆蓋舊裝飾設定 ===== */
.rs-hero::after {
  width: auto !important; height: auto !important;
  border-radius: 0 !important; border: none !important;
  background: rgba(247,249,248,.70) !important;
}
@media (max-width: 768px) {
  .rs-hero-sub { font-size: 1.05rem; }
  .rs-hero-trust { font-size: .95rem; }
  .rs-hero-scarcity { font-size: .95rem; }
}
/* ===== 產品截圖 section 高度統一 ===== */
#rs-preview { padding: clamp(48px, 7vw, 88px) 0; background: var(--rs-bg); }
.rs-preview-img { min-height: 400px; }
.rs-preview-img img { min-height: 400px; object-fit: cover; }
/* ===== 產品截圖 section 視覺重量加強 ===== */
#rs-preview { background: var(--rs-bg-soft); } /* 加淺灰底區隔 */
.rs-preview-img { min-height: 480px; border-radius: var(--rs-radius-lg); }
.rs-preview-img img { min-height: 480px; object-fit: contain; }
.rs-hero::after { background: rgba(247,249,248,.50); } /* 調深：白淡化50% */
.rs-hero .rs-h1 { text-shadow: 0 2px 20px rgba(255,255,255,1), 0 1px 4px rgba(0,61,51,.3); }
.rs-hero .rs-hero-sub { text-shadow: 0 1px 16px rgba(255,255,255,1); }
.rs-hero .rs-hero-trust { text-shadow: 0 1px 10px rgba(255,255,255,.95); }
#rs-preview { background: var(--rs-bg); } /* 回主站底色 */

/* ===== 科學備考法：流程時間軸 ===== */
.rs-flow {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.rs-flow-line {
  position: absolute; top: 22px; left: 60px; right: 60px; height: 3px;
  background: linear-gradient(90deg, var(--rs-teal-light), var(--rs-teal), var(--rs-teal-light));
  z-index: 0;
}
.rs-flow-step { position: relative; z-index: 1; text-align: center; }
.rs-flow-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--rs-teal);
  color: #fff; font-weight: 800; font-size: 1.1rem; display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0,184,148,.35);
}
.rs-flow-card {
  background: #fff; border-radius: var(--rs-radius); padding: 20px 16px;
  border: 1px solid var(--rs-border); box-shadow: var(--rs-shadow-sm);
  transition: all var(--rs-tr);
}
.rs-flow-card:hover { transform: translateY(-4px); box-shadow: var(--rs-shadow-md); }
.rs-flow-card h4 { font-size: .95rem; font-weight: 750; margin-bottom: 8px; line-height: 1.35; }
.rs-flow-card p { font-size: .85rem; color: var(--rs-text-2); line-height: 1.55; }
.rs-flow-tag {
  display: inline-block; margin-top: 10px; padding: 4px 10px;
  background: var(--rs-teal-light); color: var(--rs-teal-dark);
  font-size: .75rem; font-weight: 700; border-radius: 999px;
}

/* ===== 對比卡 ===== */
.rs-compare { display: inline-flex; align-items: center; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--rs-shadow-md); }
.rs-compare-item { padding: 24px 36px; text-align: center; }

@media (max-width: 768px) {
  .rs-flow { grid-template-columns: 1fr 1fr; }
  .rs-flow-line { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   12. study.njk 學習頁 — 14天路徑圖 / 課程卡導讀 / 一天怎麼學 / 衝刺班預覽
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero：14 天路徑圖（Day1-8 青綠免費 / Day9-14 金橙鎖頭）── */
.rs-path { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; text-align: left; }
.rs-path-half {}
.rs-path-label { font-size: .72rem; font-weight: 800; margin-bottom: 7px; display: flex; align-items: center; gap: 5px; }
.rs-path--free .rs-path-label { color: var(--rs-teal-dark); }
.rs-path--paid .rs-path-label { color: var(--rs-gold-orange); }
.rs-path-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-path-chip {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: #fff; background: var(--rs-teal-grad);
  box-shadow: 0 3px 8px rgba(0,184,148,.3);
}
.rs-path--paid .rs-path-chip { background: linear-gradient(135deg, #fbbf24, #f59f00); color: var(--rs-cta-ink); box-shadow: 0 3px 8px rgba(245,159,0,.35); }

/* ── 課程卡導讀區塊 ── */
.rs-course-guide {
  margin: 14px 16px 0; padding: 10px 16px; background: var(--rs-bg);
  border: 1px solid var(--rs-border); border-radius: 12px; text-align: left;
}
.guide-row { padding: 8px 0; border-bottom: 1px dashed var(--rs-border-soft); }
.guide-row:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-label { display: inline-flex; align-items: center; gap: 4px; font-size: .71rem; font-weight: 800;
               color: var(--rs-teal-dark); letter-spacing: .2px; }
.rs-course-guide .guide-row > span:not(.guide-label) { display: block; margin-top: 3px; font-size: .83rem; color: var(--rs-text-2); line-height: 1.6; }
.guide-row p { margin: 3px 0 0; font-size: .83rem; color: var(--rs-text-2); line-height: 1.6; }
.guide-row ul { margin: 3px 0 0; padding: 0; list-style: none; }
.guide-row li { position: relative; font-size: .83rem; color: var(--rs-text-2); line-height: 1.55; padding-left: 16px; margin-bottom: 2px; }
.guide-row li::before { content: '·'; position: absolute; left: 3px; color: var(--rs-teal); font-weight: 800; }

/* ── 一天怎麼學：40 分鐘時間分配 ── */
.rs-day-plan { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rs-day-plan > li { display: flex; gap: 14px; align-items: flex-start; background: var(--rs-bg-card);
                    border: 1px solid var(--rs-border); border-radius: 16px; padding: 20px 18px; box-shadow: var(--rs-shadow-sm); }
.rs-day-min { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--rs-teal-grad); color: #fff;
              display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.rs-day-min small { font-size: .6rem; font-weight: 700; margin-top: 2px; }
.rs-day-plan b { display: block; font-size: .95rem; color: var(--rs-ink); margin-bottom: 4px; }
.rs-day-plan p { font-size: .82rem; color: var(--rs-text-2); line-height: 1.6; margin: 0; }
.rs-day-note { margin-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem;
               background: var(--rs-teal-light); color: var(--rs-teal-dark); padding: 8px 14px; border-radius: 999px; font-weight: 700; }

/* ── Day9–14 衝刺班預覽（付費專屬，只揭露「會做什麼」）── */
.rs-sprint-preview-label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800;
                           color: var(--rs-gold-orange); background: #fef6e0; padding: 5px 12px; border-radius: 999px; }

@media (max-width: 768px) {
  .rs-day-plan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .rs-day-plan { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   課程地圖 Course Map（cm-）：真正有層級結構的心智圖
   中心節點 → 科目一/二 → L-code → Day，以 SVG 連接線串起分層。
   免費 Day1–8 用青綠 #00b894；付費 Day9–14 用金色 + 🔒 標示。
   ═══════════════════════════════════════════════════════════════════ */
.cm-map { margin: 18px 0 6px; }

/* 中心節點 */
.cm-center {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--rs-teal-grad); color: #fff; padding: 16px 30px;
  border-radius: var(--rs-radius); box-shadow: var(--rs-shadow-md);
  width: fit-content; margin: 0 auto; text-align: center;
}
.cm-center-main { font-size: 1.3rem; font-weight: 800; letter-spacing: .5px; }
.cm-center-sub { font-size: .82rem; opacity: .95; line-height: 1.5; }

/* SVG 連接線 */
.cm-conn { display: block; width: 100%; }
.cm-conn line { stroke: var(--rs-teal); stroke-width: 2; stroke-linecap: round; }
.cm-conn--top { height: 24px; }
.cm-conn--l { height: 22px; }
.cm-conn--d { height: 12px; }

/* 兩科目分支 */
.cm-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 26px); }
.cm-subj {
  background: var(--rs-bg-card); border: 1px solid var(--rs-border);
  border-top: 3px solid var(--rs-teal); border-radius: var(--rs-radius);
  padding: 18px 14px 18px; box-shadow: var(--rs-shadow-sm);
}
.cm-subj--s1 { border-top-color: var(--rs-teal); }
.cm-subj--s2 { border-top-color: var(--rs-blue); }
.cm-subj--s2 .cm-conn--l line, .cm-subj--s2 .cm-conn--d line { stroke: var(--rs-blue); }
.cm-subj-head { text-align: center; font-weight: 800; color: var(--rs-teal-deep); font-size: .95rem; }
.cm-subj-head small { display: block; font-weight: 600; color: var(--rs-text-2); font-size: .78rem; margin-top: 3px; }

/* L-code 層 */
.cm-l-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cm-l {
  background: var(--rs-teal-light); color: var(--rs-teal-deep); border-radius: 10px;
  text-align: center; padding: 8px 4px; font-weight: 800; font-size: .8rem; letter-spacing: .3px;
}
.cm-subj--s2 .cm-l { background: var(--rs-blue-light); color: var(--rs-blue); }

/* Day 層（免費 = 青綠） */
.cm-d-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cm-d {
  border-radius: 10px; text-align: center; padding: 8px 4px; font-size: .78rem; line-height: 1.4;
  background: var(--rs-bg-soft); color: var(--rs-text-2); font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cm-d b { color: var(--rs-teal-dark); font-size: .84rem; font-weight: 800; }

/* footer：Day7 總複習 + 付費衝刺 */
.cm-footer { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 2px; }
.cm-day7, .cm-paid { border-radius: 12px; padding: 12px 16px; font-size: .86rem; font-weight: 700; }
.cm-day7 { background: var(--rs-teal-light); color: var(--rs-teal-deep); border: 1px dashed var(--rs-teal); }
.cm-paid {
  background: linear-gradient(135deg, #fdf3dc, #fbeed8); color: #8a5b00;
  border: 1px solid #e9c46a; display: flex; align-items: center; gap: 8px;
}

/* 圖例 */
.cm-leg { font-size: .8rem; color: var(--rs-text-2); display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.cm-leg i { font-style: normal; width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* 手機：科目堆疊、隱藏 T 型頂部線 */
@media (max-width: 720px) {
  .cm-col-grid { grid-template-columns: 1fr; gap: 14px; }
  .cm-conn--top { height: 16px; }
  .cm-footer { flex-direction: column; align-items: flex-start; }
}

/* ── 開始今日課程互動入口（cm-launch / cm-day-tab）── */
.cm-launch {
  background: var(--rs-bg-card); border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius); padding: 20px 18px; margin: 22px 0 4px;
  box-shadow: var(--rs-shadow-sm);
}
.cm-launch-recommend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--rs-teal-light); border: 1px solid rgba(0,184,148,.3);
  border-radius: 14px; padding: 14px 16px;
}
.cm-launch-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rs-teal); flex: none; box-shadow: 0 0 0 4px rgba(0,184,148,.18); }
.cm-launch-info { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.cm-launch-tag { font-size: .7rem; font-weight: 800; letter-spacing: .5px; color: var(--rs-teal-dark); }
.cm-launch-title { font-weight: 800; font-size: .95rem; color: var(--rs-teal-deep); }
.cm-launch-start {
  background: var(--rs-teal-grad); color: #fff; border: none; border-radius: 12px;
  padding: 12px 22px; font-size: .92rem; font-weight: 800; cursor: pointer;
  box-shadow: var(--rs-shadow-md); transition: transform var(--rs-tr);
}
.cm-launch-start:hover { transform: translateY(-1px); }
.cm-launch-hint { font-size: .78rem; color: var(--rs-text-2); line-height: 1.6; margin: 12px 4px 14px; }

/* Day 切換標籤 */
.cm-day-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-day-tab {
  border: 1px solid var(--rs-border); background: var(--rs-bg); color: var(--rs-text-2);
  border-radius: 12px; padding: 8px 12px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px; min-width: 132px; transition: all var(--rs-tr);
  font-family: inherit;
}
.cm-day-tab-num { font-weight: 800; font-size: .82rem; color: var(--rs-teal-dark); }
.cm-day-tab-title { font-size: .78rem; font-weight: 600; color: var(--rs-text); }
.cm-day-tab-status { font-size: .72rem; }
.cm-day-tab:hover { border-color: var(--rs-teal); }
.cm-day-tab.active {
  background: var(--rs-teal-light); border-color: var(--rs-teal);
  box-shadow: inset 0 0 0 1px var(--rs-teal);
}
.cm-day-tab.active .cm-day-tab-num { color: var(--rs-teal-dark); }

/* 互動內容：隱藏重複的課程標題列（由上 Day 標籤與靜態課程卡取代） */
.cm-course-list { margin-top: 18px; }
.cm-course-header { display: none !important; }

/* ===== FAQ（免費 vs 付費）===== */
.rs-faq { background:#fff; border:1px solid var(--rs-border); border-radius:12px; padding:16px 20px; margin-bottom:12px; box-shadow:var(--rs-shadow-sm); }
.rs-faq summary { cursor:pointer; font-weight:700; color:var(--rs-ink); font-size:.98rem; }
.rs-faq p { margin-top:10px; color:var(--rs-text-2); font-size:.92rem; line-height:1.6; }