/* =====================================================================
   練息場 · 線上課程 Design System
   來源：Figma「線上課程」CSBhFd6yW6O19rRKYWquWv（node 17:181）
   設計變數、字體、字級全部對齊 Figma；內頁與測試頁共用這一份。
   ===================================================================== */

/* ---- 源柔黑體 Gen Jyuu Gothic（Figma 設計指定，OFL 授權）----
   改用 emfont（font.emtech.cc）動態子集服務：每字重 277 個 unicode-range
   分片、font-display:swap，瀏覽器只抓頁面實際用到的碼位，且**全字集覆蓋**
   （不再有靜態子集缺字→Noto 回退的問題）。站上用到 500／700 兩個字重。
   @import 必須置於所有樣式規則之前（僅可在 @charset 之後）。 */
@import url('https://font.emtech.cc/css/GenJyuuGothic/700');
@import url('https://font.emtech.cc/css/GenJyuuGothic/500');

/* ---- 金萱 jf-jinxuan-3.0（justfont，本站授權）----
   由完整 4MB otf/ttf 依「站上實際用到的碼位」子集成 woff2（每字重約 176KB），
   font-display:swap。book→400、medium→500、bold→700。切到金萱模式時渲染真金萱。 */
@font-face{font-family:'jf-jinxuan';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/jinxuan-book.woff2') format('woff2');}
@font-face{font-family:'jf-jinxuan';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/jinxuan-medium.woff2') format('woff2');}
@font-face{font-family:'jf-jinxuan';font-weight:600 700;font-style:normal;font-display:swap;
  src:url('/fonts/jinxuan-bold.woff2') format('woff2');}

:root{
  /* ---- 品牌主色（Figma brand/*）---- */
  --blue:#2F6BD8;            /* brand/blue · sb/blue */
  --blue-deep:#003864;       /* brand/blue-deep */
  --blue-dark:#004D89;       /* brand/blue-dark */
  --blue-bright:#3786E6;     /* brand/blue-bright */
  --blue-gray:#6694B8;       /* brand/blue-gray */
  --blue-soft:#C5DBF7;       /* sub/blue-soft */
  --blue-pale:#EAF1FC;       /* sb/pblue */
  --dark:#032639;            /* brand/dark · 主色（深墨藍，按鈕底）*/

  /* ---- 輔助色（Figma main/* · sub/*）---- */
  --orange:#FF9925;          /* main/orange */
  --orange-dark:#E8690B;     /* main/orange-dark */
  --yellow:#FFDC2D;          /* main/yellow */
  --green:#4CAF19;           /* main/green */
  --green-light:#7CC04B;     /* main/green-light */
  --green-soft:#B0D98B;      /* sub/green-soft */
  --grass:#E8F684;           /* sub/grass */
  --purple:#7A6BD8;          /* main/purple */
  --purple-soft:#BAB5FF;     /* main/purple-soft */
  --teal:#34C8A0;            /* main/teal */
  --pink:#FEE6E0;            /* main/pink */
  /* sub/*：淺色系，2.0 用來當卡片／對話框底色 */
  --purple-sub:#EBEAFF;      /* sub/purple-sott */
  --yellow-soft:#FFF2C2;     /* sub/yellow-soft */
  --peach:#FFE3CC;           /* sub/peach */
  --gray-soft:#C0C0C0;       /* sub/gray */

  /* ---- 文字 / 中性色 ---- */
  --ink:#1A2230;             /* ink */
  --ink-2:#5A6573;           /* brand/gray */
  --ink-3:#6F838E;           /* brand/gray-light */
  --ink-4:#9AA3B0;           /* sub/gary */
  --line:rgba(20,34,56,.07); /* line #14223812 */

  /* ---- 背景 ---- */
  --bg:#FFFFFF;              /* bg */
  --bg-soft:#F6F8FB;         /* sub/bg */

  /* ---- 圓角（Figma r/* · radius/18）---- */
  --r-sm:14px;               /* r/sm */
  --r-18:18px;               /* radius/18 */
  --r-md:20px;               /* r/md */
  --r-lg:28px;               /* r/lg */

  /* ---- 字體家族（主要字型可切換：黑體系統 ⇄ 金萱系統，見 font-switch.js）---- */
  --font-heiti:'GenJyuuGothic','Noto Sans TC','PingFang TC',-apple-system,sans-serif;          /* 源柔黑體系統 */
  --font-jinxuan:'jf-jinxuan','源樣明體','GenYoMin TW','Noto Serif TC','Songti TC','PingFang TC',serif; /* 金萱系統（jf-jinxuan-3.0 已嵌入 woff2 子集；未載入前用系統明體暫代）*/
  --font-display:var(--font-heiti);   /* 全站主要字型：預設黑體，data-font=jinxuan 時切金萱 */
  --font-body:'Noto Sans TC','PingFang TC',-apple-system,sans-serif;                    /* 內文：思源黑（不隨切換）*/
  --font-en:'Inter','Noto Sans TC',sans-serif;                                          /* 英數 */
}
/* 金萱模式：只換主要字型（標題／hero／按鈕），內文維持思源黑 */
:root[data-font="jinxuan"]{ --font-display:var(--font-jinxuan); }

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* =====================================================================
   字級 Type Ramp —— 完全對齊 Figma H1~H5 / Paragraph / Content
   桌機用 Figma 原始尺寸；窄螢幕用 clamp 等比縮。
   ===================================================================== */
.ds-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,4.7vw,67px);line-height:1.08;letter-spacing:.01em;margin:0;}
.ds-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,57px);line-height:1.22;letter-spacing:.01em;margin:0;}
.ds-h3{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.1vw,45px);line-height:1.3;letter-spacing:.01em;margin:0;}
.ds-h4{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.43;margin:0;}
.ds-h5{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.48;margin:0;}
.ds-lead{font-family:var(--font-display);font-weight:500;font-size:clamp(16px,1.4vw,20px);line-height:1.75;color:var(--ink-3);margin:0;}
.ds-p{font-family:var(--font-body);font-weight:500;font-size:17px;line-height:2;letter-spacing:.04em;color:var(--ink-2);margin:0;}
.ds-body{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.7;letter-spacing:.02em;color:var(--ink-2);margin:0;}
.ds-cap{font-family:var(--font-body);font-weight:400;font-size:11.5px;line-height:1.2;color:var(--ink-4);margin:0;}

/* 斷行規範：標題平衡、內文避免孤字（沿用站上既有規範）*/
.ds-h1,.ds-h2,.ds-h3,.ds-h4,.ds-h5{text-wrap:balance;}
.ds-p,.ds-body,.ds-lead,p{text-wrap:pretty;}

/* ---- 共用元件 ---- */
.ds-tag{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:#fff;background:var(--blue);
  border-radius:var(--r-sm);line-height:1.276;}

.ds-btn-pill{display:inline-flex;align-items:center;gap:14px;
  background:var(--dark);color:#fff;font-family:var(--font-display);font-weight:700;
  border:none;border-radius:999px;cursor:pointer;
  transition:background .22s ease;}
.ds-btn-pill:hover{background:var(--blue);}

/* ---- 版心 ---- */
.ds-wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.ds-wrap--wide{max-width:1200px;}
.ds-wrap--narrow{max-width:880px;}

/* =====================================================================
   內頁共用元件 RWD —— 課程／助教／預約／登入檢測 四頁共用
   視覺語彙沿用 figma-test；版面改成真‧響應式。
   一切動態緩和療癒，並尊重 prefers-reduced-motion。
   ===================================================================== */

/* ---- 緩和療癒動態 keyframes（全站共用）---- */
@keyframes dsFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes dsFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-22px) rotate(2deg)}}
@keyframes dsFloatC{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-18px) rotate(-2deg)}}
@keyframes dsArrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes dsPulseDot{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes dsGlow{0%,100%{box-shadow:0 18px 30px rgba(3,38,57,.16)}50%{box-shadow:0 22px 42px rgba(47,107,216,.26)}}

.ds-float{will-change:transform;animation:dsFloatA 15s ease-in-out infinite;}
.ds-float.b{animation:dsFloatB 18s ease-in-out infinite .6s;}
.ds-float.c{animation:dsFloatC 16s ease-in-out infinite .3s;}
.ds-float.slow{animation-duration:21s;}

/* 背景療癒光暈 blob */
.ds-blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;pointer-events:none;z-index:0;}

/* 導覽列捲動後會收窄（80→64px），版面高度跟著變，瀏覽器的「捲動錨定」
   (scroll anchoring) 會反手把捲動位置拉回去 → 又跨過門檻 → 在門檻附近無限來回，
   左上角 logo 就一直跳（2026-08-20 大寶回報）。關掉錨定，收放全交給 JS 的遲滯門檻。 */
html{overflow-anchor:none;}

/* ---- 頂部導覽（sticky RWD）----
   對齊 Figma 19:309（1440×840 hero）：Menu 列高 80、貼右緣內縮 50；
   logo 直式組合寬 98、放在 (67,46)＝比 Menu 列還高，所以會「掛」到 hero 上緣下方。
   捲動後（.scrolled）logo 縮回 44px 收進 64px 高的列裡，不會擋到下面的內容。 */
.ds-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;overflow:visible;
  height:clamp(58px,5.56vw,80px);transition:height .25s ease,border-color .25s ease;}
.ds-nav.scrolled{border-bottom-color:var(--line);}
.ds-nav-in{position:relative;height:100%;max-width:none;margin:0;
  display:flex;align-items:center;justify-content:flex-end;
  gap:16px;padding:0 clamp(20px,3.47vw,50px) 0 clamp(20px,4.65vw,67px);}
.ds-nav-logo{position:absolute;left:clamp(20px,4.65vw,67px);top:clamp(10px,3.19vw,46px);
  display:flex;align-items:center;gap:10px;transition:top .25s ease;}
.ds-nav-logo img{width:clamp(44px,6.8vw,98px);height:auto;display:block;transition:width .25s ease;}
.ds-nav.scrolled{height:64px;}
/* 選單膠囊與齒輪一律在 header 列裡上下置中（2026-08-18 大寶指定）；
   原本是 flex-end，膠囊下緣會貼在 header 底線上、捲動前後高度還會跳。 */
.ds-nav.scrolled .ds-nav-logo{top:8px;}
.ds-nav.scrolled .ds-nav-logo img{width:44px;}
/* ---- 內頁 logo 固定在左上角 header（2026-08-18 大寶指定）----
   只有首頁（.ds-nav.home）保留「大 logo 掛出 header 外」的設計；
   其餘所有內頁一律：小 logo、垂直置中收在 header 列裡、不再掛出去、捲動也不變。 */
.ds-nav:not(.home) .ds-nav-logo{top:50%;transform:translateY(-50%);}
.ds-nav:not(.home) .ds-nav-logo img{width:clamp(40px,3.6vw,52px);}
.ds-nav:not(.home).scrolled .ds-nav-logo{top:50%;}
.ds-nav:not(.home).scrolled .ds-nav-logo img{width:clamp(40px,3.6vw,52px);}
.ds-nav-logo b{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--dark);letter-spacing:.02em;}
.ds-nav-right{display:flex;align-items:center;gap:14px;}
/* menu.btn（Figma 2059:756／2059:803）：sub/bg #F6F8FB 底、gap 30、padding 10/30、無陰影；
   連結 14px Medium brand/gray，目前頁 brand/blue */
.ds-nav-pill{display:flex;align-items:center;gap:18px;background:var(--bg-soft);padding:10px 26px;
  border-radius:999px;}
.ds-nav-pill a{font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:.04em;
  color:var(--ink-2);white-space:nowrap;transition:color .2s;}
.ds-nav-pill a:hover{color:var(--blue);}
.ds-nav-pill a.on{color:var(--blue);}
/* button.btn（Figma 71:199）：main/orange 底、白字 14px、tracking 1.12、105×40 圓角 999
   高度固定 40px＝主選單膠囊（.ds-nav-pill）的高度，兩顆按鈕在同一列上下才會齊
   （2026-08-20 大寶指示；原本用 padding 撐出 41px，比選單高 1px）。 */
.ds-nav-login{background:var(--orange);color:#fff;font-family:var(--font-body);font-weight:400;
  font-size:14px;letter-spacing:.08em;height:40px;padding:0 18px;line-height:1;border-radius:999px;min-width:105px;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .2s;}
.ds-nav-login:hover{background:var(--orange-deep,#f08a12);}
/* a.gear（Figma 2059:764）：38px 深藍圓、22px icon */
.ds-nav-gear{width:38px;height:38px;border-radius:999px;background:var(--dark);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .2s;}
.ds-nav-gear:hover{background:var(--blue-dark);}
.ds-nav-gear img{width:22px;height:22px;filter:brightness(0) invert(1);opacity:.92;}
/* 齒輪工具組：「登入預約／我的名字」永遠顯示（2026-08-18 大寶指示）；
   只有 v1 舊版 這種內部捷徑仍收在灰齒輪後、滑過才滑出。*/
.ds-nav-tools{display:flex;align-items:center;}
.ds-nav-tools .ds-nav-login{margin-right:9px;white-space:nowrap;}
.ds-nav-tools .ds-nav-login.nav-v1{max-width:0;margin:0;padding-left:0;padding-right:0;opacity:0;overflow:hidden;
  pointer-events:none;box-shadow:none;
  transition:max-width .3s ease,opacity .22s ease,padding .3s ease,margin .3s ease;}
.ds-nav-tools:hover .ds-nav-login.nav-v1,.ds-nav-tools:focus-within .ds-nav-login.nav-v1{
  max-width:150px;margin-right:9px;opacity:1;pointer-events:auto;padding:11px 18px;}
/* 正式站不露出齒輪與 v1 舊版捷徑（2026-08-25，九月上線 PRD §3.11）
   站別由 font-switch.js 在 <head> 同步寫進 html[data-site]，所以不會先閃一下再消失。
   後台仍可直接輸入 /admin 進入，只是不掛在對外的導覽列上。 */
html[data-site="prod"] .ds-nav-gear,
html[data-site="prod"] .ds-nav-tools .ds-nav-login.nav-v1{display:none !important;}
/* 字型切換鈕是 v2 選字型用的內部工具，正式站不顯示（2026-08-25） */
html[data-site="prod"] #meFontSw{display:none !important;}
/* 登入後：橘鈕換成自己的名字（前面加一顆小圓點頭像位） */
.ds-nav-login.is-me{max-width:190px;overflow:hidden;text-overflow:ellipsis;display:inline-block;
  line-height:20px;text-align:center;}
.ds-nav-burger{display:none;width:44px;height:44px;border:none;background:#fff;border-radius:14px;
  border:1px solid var(--line);align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.ds-nav-burger span{display:block;width:20px;height:2px;background:var(--dark);border-radius:2px;transition:.25s;}

/* ---- Hero（內頁通用）---- */
.ds-hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,90px);
  background:linear-gradient(180deg,var(--blue-pale) 0%,var(--bg) 78%);}
.ds-hero-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:22px;}
.ds-eyebrow{font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);margin:0;}
.ds-hero .ds-lead{max-width:680px;}

/* ---- 區塊 ---- */
.ds-section{padding:clamp(54px,8vw,104px) 0;position:relative;overflow:hidden;}
.ds-section.soft{background:var(--bg-soft);}
.ds-sec-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:0 auto clamp(36px,5vw,60px);max-width:760px;}

/* ---- 藥丸 CTA（含箭頭：箭頭緩和右推）---- */
.ds-cta{display:inline-flex;align-items:center;gap:18px;background:var(--blue-deep);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,24px);letter-spacing:.08em;
  border:none;padding:13px 13px 13px 34px;border-radius:999px;cursor:pointer;
  transition:background .22s ease;}
/* hover＝箭頭圓放大＋藍色描邊、微微溢出鈕外（2026-08-20 設計師指定；同時全站按鈕取消陰影，
   底色不再換色，讓四處按鈕風格一致）*/
.ds-cta:hover{background:var(--blue-deep);}
.ds-cta .ds-arrow{width:52px;height:52px;border-radius:999px;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,box-shadow .25s ease;}
.ds-cta:hover .ds-arrow{transform:scale(1.2);box-shadow:0 0 0 2.5px var(--blue);}
.ds-cta .ds-arrow img{width:26px;height:26px;animation:dsArrowNudge 2.6s ease-in-out infinite;}
.ds-cta.ghost{background:#fff;color:var(--dark);border:1.5px solid var(--line);}
.ds-cta.ghost .ds-arrow{background:var(--dark);}
.ds-cta.ghost .ds-arrow img{filter:invert(1) brightness(2);}
.ds-cta:disabled{background:var(--bg-soft);color:var(--ink-4);box-shadow:none;cursor:not-allowed;}
.ds-cta:disabled .ds-arrow{display:none;}
/* outline 變體＝Figma btn.appointment（2327:1969 / 2327:1976）：
   白底、1.846 灰框 #9AA3B0、字 brand/blue-dark 27.69 tracking .08em、右側 #EEE 圓 55.28 */
.ds-cta.outline{background:#fff;color:var(--blue-dark);border:1.8px solid var(--ink-4);box-shadow:none;}
.ds-cta.outline:hover{background:#fff;border-color:var(--blue);color:var(--blue);}
.ds-cta.outline .ds-arrow{background:#EEEEEE;}
.ds-cta.outline .ds-arrow img{filter:none;}

/* ---- v2 單元 hero：eyebrow 尾線 + 右側柔色圓弧 ---- */
.ds-eyebrow.line{font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:.08em;
  text-transform:none;color:var(--blue-dark);display:inline-flex;align-items:center;gap:14px;}
.ds-eyebrow.line::after{content:"";width:44px;height:2px;background:currentColor;opacity:.6;border-radius:2px;}
.ds-hero-blob{position:absolute;z-index:0;pointer-events:none;top:-22%;right:-16%;width:56%;height:150%;
  background:#EFEEFA;border-radius:46% 54% 60% 40%/55% 48% 52% 45%;}
@media(max-width:860px){ .ds-hero-blob{display:none;} }

/* ---- v2 內頁 hero（助教 2059:549、預約 2059:663）----
   Figma 整框 1440×700，其中上方 80 是浮在 hero 上的 Menu 列 → 本體 620 高。
   div.段落標題 在 (290, 185) 寬 541；副標 20/39 #004D89 tracking1.6 內縮 8；
   H1 67/1.32 #032639 tracking .67；小標 22/41 #6F838E tracking .44 內縮 4；三者 gap 8。
   btn.appointment 在標題區下方 35 → 見 .ds-cta.outline。所有 vw＝Figma px ÷1440×100。 */
.ds-hero.v2{min-height:clamp(430px,43.06vw,620px);padding:0;display:flex;align-items:flex-start;
  background:#fff;overflow:hidden;}
.ds-hero.v2 .ds-hero-in{width:100%;max-width:none;margin:0;gap:8px;
  padding-left:clamp(24px,20.14vw,290px);padding-right:24px;
  padding-top:clamp(24px,7.29vw,105px);}
.ds-hero.v2 .ds-eyebrow.line{font-size:clamp(14px,1.39vw,20px);line-height:1.95;letter-spacing:.08em;
  color:var(--blue-dark);padding-left:8px;gap:clamp(8px,.97vw,14px);}
.ds-hero.v2 .ds-eyebrow.line::after{width:clamp(28px,3.06vw,44px);}
.ds-hero.v2 .ds-h1{font-size:clamp(32px,4.65vw,67px);line-height:1.32;letter-spacing:.01em;color:var(--dark);}
.ds-hero.v2 .ds-lead{font-size:clamp(15px,1.53vw,22px);line-height:1.864;letter-spacing:.02em;
  color:var(--ink-3);max-width:none;padding:5px 4px;}
.ds-hero.v2 .ds-cta{margin-top:clamp(14px,1.88vw,27px);
  font-size:clamp(17px,1.92vw,27.7px);letter-spacing:.08em;gap:clamp(6px,.56vw,8px);
  padding:clamp(3px,.29vw,4.2px) clamp(6px,.53vw,7.7px) clamp(3px,.29vw,4.2px) clamp(16px,1.53vw,22px);}
.ds-hero.v2 .ds-cta .ds-arrow{width:clamp(38px,3.84vw,55.3px);height:clamp(38px,3.84vw,55.3px);}
.ds-hero.v2 .ds-cta .ds-arrow img{width:clamp(19px,1.88vw,27px);height:clamp(14px,1.36vw,19.6px);}
/* 背景大 blob：壓在所有形狀最底層。
   共用的 .ds-blob 有 blur(8px)+opacity .5（給小光暈用的），套在這種大面積底色上會整片變太淡
   （2026-08-17 大寶回報「底色太淡」），這裡一律取消，讓 Figma 的 #F2F6FC 原色實打實顯示。 */
.ds-hero.v2{--ds-navh:clamp(58px,5.56vw,80px);}
.ds-hero.v2 .ds-blob{z-index:0;opacity:1;filter:none;border-radius:0;}
/* .full＝這個 blob 是照 Figma 1440×700 整框畫的（含上方 80 的浮動 Menu 列）。
   我們的 hero 只有下面的 620，所以往上外擴一個 Menu 列高，多出來的由 overflow:hidden 裁掉，
   左緣那條斜線才會落在 Figma 的位置（否則整塊會被壓扁又往右偏）。 */
.ds-hero.v2 .ds-blob.full{left:0;right:auto;top:calc(-1 * var(--ds-navh));
  width:100%;height:calc(100% + var(--ds-navh));}
.ds-hero.v2 .ds-shape{z-index:1;}
@media(max-width:900px){
  .ds-hero.v2{min-height:0;padding:52px 0 52px;align-items:flex-start;}
  .ds-hero.v2 .ds-hero-in{padding-left:24px;padding-top:0;}
  .ds-hero.v2 .ds-shape,.ds-hero.v2 .ds-blob{display:none;}
}

/* ---- 首頁物理遊樂場 hero：形狀從上匡外落下、彈跳、互撞（hero-physics.js）----
   對齊 Figma 27:447（1440×840 整框；上方 80 是 Menu 列 → hero 本體 760 高）：
   文字區 left 290、H1 上緣 136.53（＝hero 內 56.53）、H1/H2 67px/1.32、
   內文 22px/41 #6F838E、CTA 319×82 於 (287,483) 底色 #003864。
   所有 vw 值＝Figma px ÷ 1440 × 100，右側留給形狀，內容永遠落在安全區（160～1280）內。 */
.ds-hero.physics{min-height:clamp(520px,52.78vw,760px);padding:0;display:flex;align-items:flex-start;
  background:#fff;overflow:hidden;position:relative;}
.ds-hero.physics #heroCanvas{position:absolute;inset:0;z-index:1;pointer-events:none;}
.ds-hero.physics .ds-hero-in{position:relative;z-index:2;width:100%;max-width:none;margin:0;gap:0;
  padding-left:clamp(24px,20.14vw,290px);padding-right:24px;
  padding-top:clamp(24px,3.93vw,56.5px);pointer-events:none;}
/* hero 標題兩行同尺寸（Figma 67px / 1.32），內文 22px / 41 */
.ds-hero.physics .ds-h1,
.ds-hero.physics .ds-h2{font-size:clamp(34px,4.65vw,67px);line-height:1.32;letter-spacing:0;}
.ds-hero.physics .ds-lead{font-size:clamp(15px,1.53vw,22px);line-height:1.864;
  color:var(--ink-3);max-width:none;margin-top:clamp(10px,1.16vw,16.6px);}
/* hero CTA＝Figma 319×82：深藍底 #003864、字 29.54、白箭頭圓 58.97 */
.ds-hero.physics .ds-cta{background:var(--blue-deep);font-size:clamp(19px,2.05vw,29.5px);
  letter-spacing:.02em;gap:clamp(10px,1.1vw,16px);padding:11px 11px 11px clamp(20px,2.1vw,30px);
  margin-top:clamp(18px,2.08vw,30px);}
.ds-hero.physics .ds-cta .ds-arrow{width:clamp(40px,4.09vw,59px);height:clamp(40px,4.09vw,59px);}
.ds-hero.physics .ds-cta .ds-arrow img{width:clamp(20px,1.9vw,27px);height:clamp(20px,1.9vw,27px);}
.ds-hero.physics .ds-hero-in a,.ds-hero.physics .ds-hero-in button{pointer-events:auto;}
.ds-hero.physics .ds-hint{margin-top:14px;font-family:var(--font-body);font-weight:500;font-size:13px;
  letter-spacing:.04em;color:var(--ink-4);opacity:.85;}
/* 小字在按鈕上方 → 按鈕的上緣間距改由這裡接手，整體節奏不變 */
.ds-hero.physics .ds-hint + .ds-cta{margin-top:clamp(14px,1.6vw,22px);}
@media(max-width:900px){
  .ds-hero.physics{min-height:0;padding:52px 0 52px;align-items:flex-start;}
  .ds-hero.physics #heroCanvas{display:none;}
  .ds-hero.physics .ds-hero-in{padding-left:24px;padding-top:0;}
  .ds-hero.physics .ds-lead{margin-top:14px;}
  .ds-hero.physics .ds-cta{margin-top:24px;}
  .ds-hero.physics .ds-hint{display:none;}
}

/* 文字小連結（箭頭 hover 右推）*/
.ds-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:700;
  font-size:14px;color:var(--blue);}
.ds-more .a{transition:transform .25s;}
.ds-more:hover .a{transform:translateX(4px);}

/* ---- 一般卡片 ---- */
.ds-card{background:#fff;border-radius:var(--r-lg);padding:32px;
  box-shadow:0 18px 40px rgba(20,34,56,.07);border:1px solid var(--line);}
.ds-grid{display:grid;gap:24px;}
.ds-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.ds-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.ds-grid.cols-4{grid-template-columns:repeat(4,1fr);}

/* 質地小卡（icon 圓底 + 標題 + 說明）*/
.ds-feature{background:#fff;border-radius:var(--r-md);padding:28px 24px;border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(20,34,56,.06);display:flex;flex-direction:column;gap:12px;}
.ds-feature .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-pale);}
.ds-feature h4{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--dark);margin:0;}
.ds-feature p{margin:0;}

/* ---- 主題大卡 EP（漸層帶 + 學習點 + 助教 chip）---- */
.ds-ep{position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;
  padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:18px;
  box-shadow:0 22px 50px rgba(3,38,57,.16);}
.ds-ep .ep-star{position:absolute;right:-40px;top:-40px;width:280px;height:280px;opacity:.16;z-index:0;pointer-events:none;}
.ds-ep>*{position:relative;z-index:1;}
.ds-ep .ep-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.ds-ep .ep-no{font-family:var(--font-en);font-weight:600;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.03em;opacity:.92;}
.ds-ep .ep-name{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,32px);margin:0;}
.ds-ep .ep-tag{margin-left:auto;background:rgba(255,255,255,.22);color:#fff;font-family:var(--font-body);
  font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;white-space:nowrap;}
.ds-ep .ep-quote{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,2vw,24px);line-height:1.6;margin:0;}
.ds-ep .ep-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ds-ep .ep-points li{display:flex;gap:10px;font-family:var(--font-body);font-weight:400;font-size:15px;
  line-height:1.7;color:rgba(255,255,255,.92);}
.ds-ep .ep-points li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:rgba(255,255,255,.28);background-image:url('/img/figma/z4/check-green.svg');
  background-size:11px;background-repeat:no-repeat;background-position:center;}
.ds-ep .ep-bot{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.14);
  border-radius:var(--r-18);padding:14px 18px;flex-wrap:wrap;}
.ds-ep .ep-bot img{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.9);flex:0 0 auto;}
.ds-ep .ep-bot .nm{font-family:var(--font-display);font-weight:700;font-size:15px;}
.ds-ep .ep-bot .mt{font-family:var(--font-body);font-weight:400;font-size:12.5px;opacity:.85;margin-top:2px;}
.ds-ep .ep-bot .desc{flex:1 1 240px;font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.65;opacity:.92;}
/* EP 漸層配色（對齊 figma-test ch1~ch4）*/
.ds-ep.t1{background:linear-gradient(150deg,#3786E6 0%,#1F74DB 100%);}
.ds-ep.t2{background:linear-gradient(150deg,#94A9F3 0%,#5872CF 100%);}
.ds-ep.t3{background:linear-gradient(150deg,#F5A623 0%,#E8690B 100%);}
.ds-ep.t4{background:linear-gradient(150deg,#7CC04B 0%,#4CAF19 100%);}

/* ---- 人物卡（頭像圓 + 姓名 + 標籤 + 簡介 + 經歷）---- */
.ds-person{background:#fff;border-radius:var(--r-lg);padding:30px;border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(20,34,56,.07);display:flex;flex-direction:column;gap:14px;}
.ds-person .ph{display:flex;align-items:center;gap:16px;}
.ds-avatar{width:78px;height:78px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-weight:700;font-size:30px;color:#fff;
  background:linear-gradient(150deg,var(--blue-bright),var(--blue-deep));}
.ds-avatar.g{background:linear-gradient(150deg,var(--green-light),var(--green));}
.ds-avatar.o{background:linear-gradient(150deg,var(--orange),var(--orange-dark));}
.ds-avatar.p{background:linear-gradient(150deg,var(--purple-soft),#6E66E0);}
.ds-avatar.img{background:var(--bg-soft);overflow:hidden;}
.ds-avatar.img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;filter:brightness(1.06) saturate(1.02);}
.ds-person .nm{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--dark);}
.ds-person .ti{font-family:var(--font-body);font-weight:500;font-size:13.5px;color:var(--blue);margin-top:3px;}
.ds-tags{display:flex;flex-wrap:wrap;gap:8px;}
.ds-chip{font-family:var(--font-body);font-weight:500;font-size:12.5px;color:var(--ink-2);
  background:var(--bg-soft);border:1px solid var(--line);padding:5px 12px;border-radius:999px;}
.ds-person .bio{margin:0;}
.ds-person .exp{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;}
.ds-person .exp li{display:flex;gap:8px;font-family:var(--font-body);font-weight:400;font-size:13.5px;
  line-height:1.6;color:var(--ink-2);}
.ds-person .exp li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--blue);margin-top:8px;}
/* bio 富文本：超連結可點 */
.ds-person .bio a{color:var(--blue);font-weight:600;text-underline-offset:2px;}
.ds-person .bio a:hover{opacity:.7;}
/* 師資卡的服務情境照（後台填了 scene 才出現）*/
.ds-person .scene{margin:4px 0 0;border-radius:var(--r-md,14px);overflow:hidden;background:var(--line);}
.ds-person .scene img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.ds-person .bio p{margin:0 0 8px;}
.ds-person .bio p:last-child{margin-bottom:0;}
/* 師資篩選列（全部/心理師/療癒師）*/
.tfilter{display:flex;gap:10px;justify-content:center;margin:0 0 34px;flex-wrap:wrap;}
.tfilter .tf{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 22px;transition:all .18s;}
.tfilter .tf:hover{border-color:var(--blue);color:var(--blue);}
.tfilter .tf.on{background:var(--dark);border-color:var(--dark);color:#fff;}
.tgroup{margin-bottom:44px;}
.tgroup:last-child{margin-bottom:0;}

/* 名師雜誌式（左右交錯）*/
.ds-master{display:flex;gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:clamp(40px,6vw,72px);}
.ds-master:nth-child(even){flex-direction:row-reverse;}
.ds-master .m-photo{flex:0 0 clamp(180px,26vw,300px);}
.ds-master .m-photo .ds-avatar{width:clamp(150px,24vw,260px);height:clamp(150px,24vw,260px);
  font-size:clamp(56px,9vw,96px);border-radius:36px;}
.ds-master .m-body{flex:1;display:flex;flex-direction:column;gap:14px;}
.ds-master .m-quote{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,2vw,24px);
  line-height:1.55;color:var(--dark);margin:0;}

/* ---- 維度卡（檢測量表）---- */
.ds-dim{border-radius:var(--r-md);padding:26px;color:#fff;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 16px 34px rgba(3,38,57,.14);}
.ds-dim h4{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0;}
.ds-dim p{margin:0;font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.7;color:rgba(255,255,255,.92);}
.ds-dim .sc{font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.1em;opacity:.85;}
.ds-dim.green{background:linear-gradient(150deg,#7CC04B,#4CAF19);}
.ds-dim.orange{background:linear-gradient(150deg,#FFB45A,#E8690B);}
.ds-dim.blue{background:linear-gradient(150deg,#3786E6,#1F74DB);}

/* ---- 對話示範卡（沿用 figma-test ZONE5，改 RWD）---- */
.ds-chat{width:100%;max-width:480px;background:#fff;border:1px solid #e6e9ef;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 18px 44px rgba(20,34,56,.14);}
.ds-chat .ch-h{display:flex;gap:14px;align-items:center;padding:18px 22px;
  background:linear-gradient(131deg,var(--blue-pale) 0%,#fff 100%);border-bottom:1px solid rgba(217,217,217,.5);}
.ds-chat.green .ch-h{background:linear-gradient(131deg,#e6f4d8 0%,#fff 100%);}
.ds-chat .ch-h .av{width:44px;height:44px;border-radius:12px;flex:0 0 auto;object-fit:cover;}
.ds-chat .ch-h .nm{flex:1;min-width:0;}
.ds-chat .ch-h .n1{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--blue);}
.ds-chat.green .ch-h .n1{color:var(--green);}
.ds-chat .ch-h .n2{font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--ink-3);margin-top:2px;}
.ds-chat .ch-st{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(217,217,217,.6);
  border-radius:999px;padding:6px 12px;flex:0 0 auto;}
.ds-chat .ch-st i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:dsPulseDot 2.4s ease-in-out infinite;}
.ds-chat .ch-st span{font-family:var(--font-body);font-weight:700;font-size:11px;color:var(--green);}
.ds-chat .ch-b{background:var(--bg-soft);padding:20px;display:flex;flex-direction:column;gap:12px;}
.ds-chat .bub{font-family:var(--font-body);font-weight:400;font-size:14.5px;line-height:1.6;max-width:88%;}
.ds-chat .bub.l{align-self:flex-start;background:#fff;border:1px solid rgba(217,217,217,.5);
  color:var(--dark);border-radius:18px 18px 18px 4px;padding:12px 16px;}
.ds-chat .bub.r{align-self:flex-end;background:var(--blue);color:#fff;border-radius:18px 18px 4px 18px;padding:12px 16px;}
.ds-chat.green .bub.r{background:var(--green);}
.ds-chat .ch-f{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-top:1px solid rgba(217,217,217,.5);background:#fff;}
.ds-chat .ch-f .cap{font-family:var(--font-body);font-weight:400;font-size:12.5px;color:var(--ink-4);}
.ds-chat .ch-f .btn{background:var(--dark);color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:13px;padding:10px 16px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:background .22s ease;}
.ds-chat .ch-f .btn:hover{background:var(--blue);}

/* ---- 安心保證 / 一般圖文 pillar ---- */
.ds-pillar{background:#fff;border-radius:var(--r-md);padding:30px 26px;border:1px solid var(--line);
  box-shadow:0 14px 32px rgba(20,34,56,.06);display:flex;flex-direction:column;gap:12px;}
.ds-pillar .pic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;}
.ds-pillar .pic svg{width:28px;height:28px;}
.ds-pillar h4{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--dark);margin:0;}
.ds-pillar p{margin:0;}

/* ---- 次數券 ---- */
.ds-credits{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.ds-ticket{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:22px;}
.ds-ticket.on{background:var(--blue-pale);color:var(--blue);border:2px solid var(--blue-soft);}
.ds-ticket.lock{background:var(--bg-soft);color:var(--ink-4);border:2px dashed var(--line);}

/* ---- 登入區 ---- */
.ds-login-box{background:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);
  border:1px solid var(--line);box-shadow:0 22px 50px rgba(20,34,56,.10);max-width:460px;margin:0 auto;
  display:flex;flex-direction:column;gap:14px;}
.ds-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-family:var(--font-body);
  font-weight:500;font-size:15px;color:var(--dark);transition:background .2s;}
.ds-oauth:hover{background:var(--bg-soft);}
.ds-divider{display:flex;align-items:center;gap:12px;color:var(--ink-4);font-size:12px;margin:6px 0;}
.ds-divider::before,.ds-divider::after{content:"";flex:1;height:1px;background:var(--line);}
/* 登入盒裡的每個步驟（Email／驗證碼）：標籤 → 輸入框 → 按鈕要有呼吸，
   原本是三個 block 直接疊在一起、輸入框和按鈕黏成一塊（2026-08-18 大寶回報）。 */
.ds-login-box > div[id^="step-"]{display:flex;flex-direction:column;gap:11px;}
.ds-login-box > div[id^="step-"] > label{margin-bottom:-1px;}
.ds-login-box > div[id^="step-"] > .ds-btn-primary{margin-top:5px;}
.ds-input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:15px;background:var(--bg-soft);}
.ds-input:focus{outline:none;border-color:var(--blue);background:#fff;}
.ds-btn-primary{width:100%;padding:15px;border:none;border-radius:var(--r-sm);background:var(--dark);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;cursor:pointer;transition:transform .2s,background .22s ease;}
.ds-btn-primary:hover{transform:translateY(-1px);background:var(--blue);}
.ds-note{font-family:var(--font-body);font-weight:400;font-size:12.5px;line-height:1.7;color:var(--ink-3);}

/* ---- 旅程步驟 ---- */
.ds-journey{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.ds-journey .stp{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 20px;
  font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--dark);
  box-shadow:0 8px 18px rgba(20,34,56,.06);}
.ds-journey .sep{color:var(--blue);font-weight:700;}

/* ---- 頁尾 ---- */
.ds-footer{background:var(--bg-soft);padding:clamp(36px,5vw,56px) 0;}
.ds-footer-in{max-width:1200px;margin:0 auto;padding:32px 40px;background:#fff;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  box-shadow:0 14px 34px rgba(20,34,56,.06);}
.ds-footer-in img.flogo{height:46px;width:auto;}
.ds-footer-in .copy{font-family:var(--font-en);font-weight:400;font-size:14px;letter-spacing:.06em;color:var(--ink-2);}
.ds-footer-in .social{display:flex;gap:14px;}
.ds-footer-in .social a{width:46px;height:46px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;}
.ds-footer-in .social img{width:22px;height:22px;}

/* =====================================================================
   響應式斷點
   ===================================================================== */
@media(max-width:860px){
  .ds-grid.cols-3,.ds-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .ds-master,.ds-master:nth-child(even){flex-direction:column;text-align:center;}
  .ds-master .m-photo{flex:none;}
  .ds-master .ph,.ds-master .tags,.ds-person .ph{justify-content:center;}
  .ds-nav-pill,.ds-nav-gear{display:none;}
  .ds-nav-burger{display:flex;}
  /* 手機：logo 收回列內置中，不再掛到 hero 上 */
  .ds-nav{height:64px;}
  .ds-nav-in{align-items:center;justify-content:space-between;padding:0 20px;}
  .ds-nav-logo{position:static;left:auto;top:auto;transform:none;margin-right:auto;}
  .ds-nav:not(.home) .ds-nav-logo{transform:none;}
  .ds-nav:not(.home) .ds-nav-logo img{width:46px;}
  .ds-nav-logo img{width:46px;}
  .ds-nav.open .ds-nav-pill{display:flex;position:absolute;top:72px;right:24px;left:24px;
    flex-direction:column;align-items:flex-start;gap:18px;padding:22px 26px;border-radius:var(--r-md);}
  .ds-nav.open .ds-nav-gear{display:inline-flex;}
  /* 手機：登入預約鈕仍留在列上，縮小一點讓 burger 有位置 */
  .ds-nav-tools .ds-nav-login{font-size:13px;min-width:0;height:36px;padding:0 14px;margin-right:8px;}
}
@media(max-width:560px){
  .ds-grid.cols-2,.ds-grid.cols-3,.ds-grid.cols-4{grid-template-columns:1fr;}
  .ds-footer-in{flex-direction:column;text-align:center;}
}
@media(prefers-reduced-motion:reduce){
  .ds-float,.ds-cta .ds-arrow img,.ds-chat .ch-st i{animation:none!important;}
}

/* =====================================================================
   v2：參考原 prototype 排版（左對齊英雄、分欄、章節）＋真彩色形狀 PNG 穿插
   ===================================================================== */

/* ---- 真彩色形狀 PNG（散落穿插、緩和漂浮）---- */
.ds-shape{position:absolute;z-index:0;pointer-events:none;will-change:transform;user-select:none;}
.ds-shape.soft{opacity:.55;}
.ds-shape.faint{opacity:.35;}
.ds-section,.ds-hero{position:relative;}
.ds-section>.ds-wrap,.ds-hero>.ds-wrap{position:relative;z-index:2;}

/* ---- 兩色標題 ---- */
.tt{color:var(--blue);}

/* ---- 左對齊英雄 ---- */
/* 橫幅色調（讓各頁 banner 顏色不同）*/
.ds-hero.tint-green{background:linear-gradient(180deg,#e7f3d8 0%,var(--bg) 80%);}
.ds-hero.tint-warm{background:linear-gradient(180deg,#fff0df 0%,var(--bg) 80%);}
.ds-hero.tint-purple{background:linear-gradient(180deg,#ece9ff 0%,var(--bg) 80%);}

.ds-hero.left .ds-hero-in{text-align:left;align-items:flex-start;}
.ds-hero.left .ds-lead{max-width:600px;margin-left:0;}
.ds-hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;}
.ds-hero-split .copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;text-align:left;}
.ds-hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.ds-gift{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink-3);}

/* ---- 課程說明卡（分欄右側）---- */
.ds-infocard{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:0 22px 50px rgba(20,34,56,.10);padding:24px;display:flex;flex-direction:column;gap:14px;}
.ds-infocard .eb{align-self:flex-start;background:var(--blue-pale);color:var(--blue);font-family:var(--font-display);
  font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;}
.ds-infocard .q{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--dark);margin:0;}
.ds-thumb{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-deep));display:flex;align-items:center;justify-content:center;}
.ds-thumb .play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(3,38,57,.25);}
.ds-thumb .play::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--blue);margin-left:4px;}
.ds-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ds-infocard .meta{display:flex;flex-direction:column;gap:4px;}
.ds-infocard .meta b{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--dark);}

/* ---- YouTube 播放器（封面式：點了才載 iframe；封面用 YT 縮圖）---- */
.yt-facade{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;cursor:pointer;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-deep));display:block;width:100%;}
.yt-facade .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.yt-facade .pbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border:0;
  border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 10px 24px rgba(3,38,57,.25);cursor:pointer;
  transition:transform .18s ease;padding:0;}
.yt-facade .pbtn::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--blue);}
.yt-facade:hover .pbtn{transform:translate(-50%,-50%) scale(1.08);}
.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt-coming{aspect-ratio:16/9;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#dfe8f5,#cdd9ec);color:var(--blue-deep);font-family:var(--font-display);font-weight:700;font-size:15px;}
.yt-cap{margin:8px 0 0;text-align:right;font-size:13px;color:var(--ink-3);}
.yt-cap a{color:var(--blue);font-weight:700;text-decoration:none;}
/* hero 說明卡裡的縮圖位：讓 facade 直接填滿、沿用卡片圓角比例 */
.ds-thumb{padding:0;}
.ds-thumb .yt-facade,.ds-thumb .yt-coming{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;}
/* 手風琴單元內的影片：收斂寬度，不佔滿整欄 */
.acc-video{margin:2px 0 20px;max-width:680px;}

/* 總覽手風琴底部：單元 AI 助教一行提示＋看完整單元頁深連結 */
.acc-tutorline{font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--ink-3);margin:4px 0 2px;}
.acc-more{align-self:flex-start;font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--blue);
  text-decoration:none;padding:8px 0 2px;border-bottom:1.5px solid transparent;transition:border-color .2s;}
.acc-more:hover{border-bottom-color:var(--blue);}

/* ---- 單元獨立頁（/course/chX/epY）---- */
/* 柔色 hero 背景（依主題輕染，由白漸出，不搶內容）*/
.unit-hero{padding-top:clamp(40px,6vw,72px);}
.unit-hero .ds-wrap{position:relative;z-index:1;}
.unit-hero.t1{background:linear-gradient(180deg,#EAF1FC 0%,#F5F9FE 52%,#fff 100%);}
.unit-hero.t2{background:linear-gradient(180deg,#ECEFFB 0%,#F6F8FE 52%,#fff 100%);}
.unit-hero.t3{background:linear-gradient(180deg,#FDF4E3 0%,#FCF9F1 52%,#fff 100%);}
.unit-hero.t4{background:linear-gradient(180deg,#EEF8E2 0%,#F6FBF0 52%,#fff 100%);}
.unit-back{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--ink-3);
  text-decoration:none;margin-bottom:18px;transition:color .2s;}
.unit-back:hover{color:var(--blue);}
.unit-title{margin:10px 0 16px;}
.unit-tags{margin-bottom:26px;}
.unit-video{margin:0 0 18px;}
/* 講義 PDF 下載鈕（收在「本單元重點」面板底部，整框的動作鈕）*/
.unit-pdf:empty{display:none;}
.unit-pdf{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.unit-pdf-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:14.5px;color:var(--dark);text-decoration:none;
  background:var(--bg-soft);border:1.5px solid var(--line);
  border-radius:999px;padding:13px 22px;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;}
.unit-pdf-btn::before{content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;
  -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42l2.3 2.3V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42l2.3 2.3V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");}
.unit-pdf-btn:hover{border-color:var(--blue);background:#fff;}
/* 重點面板（白底大留白卡，取代原手風琴卡）*/
.unit-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,46px);box-shadow:0 22px 54px rgba(20,34,56,.08);}
.unit-panel-eb{display:inline-block;font-family:var(--font-en);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.unit-quote{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.1vw,25px);
  line-height:1.7;color:var(--dark);margin:0 0 26px;padding-left:22px;border-left:4px solid var(--blue);}
.unit-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;}
.unit-points li{display:flex;gap:14px;font-family:var(--font-body);font-size:clamp(15px,1.5vw,16.5px);
  line-height:1.8;color:var(--ink-2);}
.unit-points li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--blue);margin-top:10px;}
/* 單元導言（標題下的一段介紹）＋情境清單（planner 腳本的「痛點」段）*/
.unit-intro{font-family:var(--font-body);font-size:clamp(15px,1.6vw,17px);line-height:1.95;
  color:var(--ink-2);margin:14px 0 0;max-width:62ch;}
.unit-cases{margin-top:26px;padding-top:24px;border-top:1px dashed var(--line);}
.unit-cases .uc-h{font-family:var(--font-display);font-weight:700;font-size:15.5px;
  color:var(--dark);margin:0 0 14px;}
.unit-cases ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.unit-cases li{font-family:var(--font-body);font-size:14.5px;line-height:1.75;color:var(--ink-2);
  background:var(--bg-soft);border-radius:14px;padding:13px 16px;}
/* 引導打開助教的一句話 */
.unit-guide{font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.5vw,17px);
  color:var(--ink-2);text-align:center;margin:42px 0 18px;}
/* 助教 CTA 卡（獨立、頂部主題色條）*/
.unit-tutor{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--blue);border-radius:var(--r-lg);padding:24px clamp(22px,3vw,30px);
  box-shadow:0 16px 40px rgba(20,34,56,.08);flex-wrap:wrap;}
.unit-tutor img{width:62px;height:62px;border-radius:16px;flex:0 0 auto;}
.unit-tutor .ut-info{flex:1 1 240px;min-width:0;}
.unit-tutor .ut-nm{font-family:var(--font-display);font-weight:700;font-size:17.5px;color:var(--dark);}
.unit-tutor .ut-mt{font-family:var(--font-body);font-size:12.5px;color:var(--ink-3);margin:3px 0 7px;}
.unit-tutor .ut-desc{font-family:var(--font-body);font-size:14px;line-height:1.7;color:var(--ink-2);margin:0;}
.unit-tutor .go{flex:0 0 auto;font-family:var(--font-body);font-weight:700;font-size:14px;
  padding:13px 24px;border-radius:999px;color:#fff;background:var(--blue);white-space:nowrap;
  text-decoration:none;transition:filter .2s;}
.unit-tutor .go:hover{filter:brightness(1.08);}
/* 主題色：金句左條、重點圓點、助教卡頂條與按鈕 */
.unit-hero.t1 .unit-panel-eb,.unit-hero.t1 .unit-quote{border-left-color:#2F6BD8;color:#2F6BD8;}
.unit-hero.t1 .unit-quote{color:var(--dark);}
.unit-hero.t1 .unit-points li::before{background:#2F6BD8;}
.unit-hero.t1 .unit-tutor{border-top-color:#2F6BD8;} .unit-hero.t1 .unit-tutor .go{background:#2F6BD8;}
.unit-hero.t2 .unit-panel-eb{color:#5872CF;} .unit-hero.t2 .unit-quote{border-left-color:#5872CF;}
.unit-hero.t2 .unit-points li::before{background:#5872CF;}
.unit-hero.t2 .unit-tutor{border-top-color:#5872CF;} .unit-hero.t2 .unit-tutor .go{background:#5872CF;}
.unit-hero.t3 .unit-panel-eb{color:#E8690B;} .unit-hero.t3 .unit-quote{border-left-color:#E8690B;}
.unit-hero.t3 .unit-points li::before{background:#E8690B;}
.unit-hero.t3 .unit-tutor{border-top-color:#E8690B;} .unit-hero.t3 .unit-tutor .go{background:#E8690B;}
.unit-hero.t4 .unit-panel-eb{color:#4CAF19;} .unit-hero.t4 .unit-quote{border-left-color:#4CAF19;}
.unit-hero.t4 .unit-points li::before{background:#4CAF19;}
.unit-hero.t4 .unit-tutor{border-top-color:#4CAF19;} .unit-hero.t4 .unit-tutor .go{background:#4CAF19;}
@media(max-width:560px){
  .unit-tutor{gap:14px;}
  .unit-tutor .go{margin-left:0;width:100%;justify-content:center;text-align:center;}
}
/* 本章其他單元（移到標題下方，取代心理學標籤，當作單元導覽）*/
.unit-siblings{margin-top:34px;}
.unit-siblings--top{margin:6px 0 26px;}
.unit-sib-h{font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--ink-3);margin:0 0 12px;letter-spacing:.04em;}
.unit-sib-row{display:flex;flex-wrap:wrap;gap:10px;}
.unit-sib{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;transition:border-color .2s,background .2s;}
.unit-sib:hover{border-color:var(--blue);background:var(--bg-soft);}
.unit-sib .ep{font-family:var(--font-body);font-weight:800;font-size:12px;color:var(--blue);}
.unit-sib .tp{font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--ink-2);}
.unit-sib.on{border-color:var(--blue);background:var(--blue-pale,#eef4fe);}
.unit-sib.on .tp{color:var(--dark);}
.unit-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;}
.unit-step{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 20px;text-decoration:none;box-shadow:0 8px 22px rgba(20,34,56,.05);
  transition:transform .2s,box-shadow .2s;}
.unit-step:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,34,56,.10);}
.unit-step.next{text-align:right;}
.unit-step.empty{background:transparent;border:none;box-shadow:none;}
.unit-step .lbl{font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--ink-3);}
.unit-step .nm{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--dark);}
@media(max-width:560px){
  .unit-nav{grid-template-columns:1fr;}
  .unit-step.next{text-align:left;}
  .unit-step.empty{display:none;}
}

/* ---- 名師真照片 ---- */
.ds-master .m-photo img{width:clamp(180px,26vw,300px);height:auto;border-radius:36px;display:block;
  box-shadow:0 20px 44px rgba(20,34,56,.14);object-fit:cover;filter:brightness(1.06) saturate(1.02);}

/* ---- 章節分組助教卡（彩色上邊框對應技術色）---- */
.ds-chapter-label{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;}
.ds-chapter-label .ch{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--green);}
.ds-chapter-label h4{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--dark);margin:0;}
.ds-tutor2{background:#fff;border-radius:var(--r-md);border:1px solid var(--line);border-top:4px solid var(--blue);
  box-shadow:0 14px 32px rgba(20,34,56,.06);padding:24px;display:flex;flex-direction:column;gap:12px;}
.ds-tutor2 .t2-h{display:flex;align-items:center;gap:12px;}
.ds-tutor2 .t2-h img{width:48px;height:48px;border-radius:12px;flex:0 0 auto;}
.ds-tutor2 .t2-h .n1{font-family:var(--font-display);font-weight:700;font-size:17px;}
.ds-tutor2 .t2-h .n2{font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--ink-3);margin-top:2px;}
.ds-tutor2 .t2-btn{margin-top:auto;align-self:flex-start;font-family:var(--font-body);font-weight:700;
  font-size:13px;padding:9px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:transform .2s;}
.ds-tutor2 .t2-btn:hover{transform:translateY(-1px);}
.ds-tutor2.c-blue{border-top-color:var(--blue);} .ds-tutor2.c-blue .n1{color:var(--blue);} .ds-tutor2.c-blue .t2-btn{background:var(--blue);color:#fff;}
.ds-tutor2.c-orange{border-top-color:var(--orange);} .ds-tutor2.c-orange .n1{color:var(--orange-dark);} .ds-tutor2.c-orange .t2-btn{background:var(--orange);color:#fff;}
.ds-tutor2.c-green{border-top-color:var(--green);} .ds-tutor2.c-green .n1{color:var(--green);} .ds-tutor2.c-green .t2-btn{background:var(--green);color:#fff;}
.ds-tutor2.c-purple{border-top-color:#6E66E0;} .ds-tutor2.c-purple .n1{color:#6E66E0;} .ds-tutor2.c-purple .t2-btn{background:#6E66E0;color:#fff;}

/* ---- 四大主題 手風琴收合（白底細列＋主題色左邊框，點開展開）---- */
.ds-acc{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);
  border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;box-shadow:0 8px 22px rgba(20,34,56,.05);
  transition:box-shadow .25s;}
.ds-acc[open]{box-shadow:0 16px 38px rgba(20,34,56,.10);}
.ds-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 24px;}
.ds-acc>summary::-webkit-details-marker{display:none;}
.ds-acc>summary::marker{content:"";}
.ds-acc .acc-no{font-family:var(--font-en);font-weight:700;font-size:20px;color:var(--blue);flex:0 0 auto;}
.ds-acc .acc-name{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,22px);color:var(--dark);}
.ds-acc .acc-tag{margin-left:auto;font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--ink-3);
  background:var(--bg-soft);padding:6px 12px;border-radius:999px;white-space:nowrap;}
.ds-acc .acc-chev{flex:0 0 auto;margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);transition:transform .25s;}
.ds-acc .acc-chev::after{content:"";border-style:solid;border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent currentColor;margin-left:2px;}
.ds-acc[open] .acc-chev{transform:rotate(90deg);}
.ds-acc .acc-body{padding:0 24px 24px 24px;display:flex;flex-direction:column;gap:16px;}
.ds-acc .acc-intro{font-family:var(--font-body);font-size:14.5px;line-height:1.9;color:var(--ink-2);margin:0;}
.ds-acc .acc-quote{font-family:var(--font-display);font-weight:500;font-size:clamp(17px,1.8vw,21px);
  line-height:1.6;color:var(--dark);margin:0;}
.ds-acc .acc-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ds-acc .acc-points li{display:flex;gap:10px;font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--ink-2);}
.ds-acc .acc-points li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-top:9px;}
.ds-acc .acc-tutor{display:flex;align-items:center;gap:14px;background:var(--bg-soft);
  border-radius:var(--r-18);padding:14px 18px;flex-wrap:wrap;}
.ds-acc .acc-tutor img{width:46px;height:46px;border-radius:12px;flex:0 0 auto;}
.ds-acc .acc-tutor .nm{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--dark);}
.ds-acc .acc-tutor .mt{font-family:var(--font-body);font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.ds-acc .acc-tutor .desc{flex:1 1 220px;font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--ink-2);}
.ds-acc .acc-tutor .go{margin-left:auto;font-family:var(--font-body);font-weight:700;font-size:13px;
  padding:9px 16px;border-radius:999px;color:#fff;white-space:nowrap;}
.ds-acc.t1{border-left-color:#2F6BD8;} .ds-acc.t1 .acc-no{color:#2F6BD8;} .ds-acc.t1 .acc-points li::before{background:#2F6BD8;} .ds-acc.t1 .acc-tutor .go{background:#2F6BD8;}
.ds-acc.t2{border-left-color:#5872CF;} .ds-acc.t2 .acc-no{color:#5872CF;} .ds-acc.t2 .acc-points li::before{background:#5872CF;} .ds-acc.t2 .acc-tutor .go{background:#5872CF;}
.ds-acc.t3{border-left-color:#E8690B;} .ds-acc.t3 .acc-no{color:#E8690B;} .ds-acc.t3 .acc-points li::before{background:#E8690B;} .ds-acc.t3 .acc-tutor .go{background:#E8690B;}
.ds-acc.t4{border-left-color:#4CAF19;} .ds-acc.t4 .acc-no{color:#4CAF19;} .ds-acc.t4 .acc-points li::before{background:#4CAF19;} .ds-acc.t4 .acc-tutor .go{background:#4CAF19;}
@media(max-width:560px){
  .ds-acc .acc-tag{display:none;}
  .ds-acc .acc-tutor .go{margin-left:0;}
}

/* ---- 預約次數 gate 卡（全寬淺藍）---- */
.ds-gate{background:var(--blue-pale);border-radius:var(--r-lg);padding:clamp(30px,4vw,44px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;border:1px solid var(--blue-soft);}
.ds-gate h3{margin:0;}

@media(max-width:860px){
  .ds-hero-split{grid-template-columns:1fr;}
  .ds-master .m-photo img{margin:0 auto;}
}
@media(prefers-reduced-motion:reduce){
  .ds-shape{animation:none!important;}
}

/* 頁尾法務連結（政策頁需全站公開可瀏覽，PAYUNi 商店審核要件） */
.ds-footer-in .flinks{margin-top:5px;font-size:12.5px;letter-spacing:.03em;}
.ds-footer-in .flinks a{color:var(--ink-2);text-decoration:underline;margin-right:10px;}
.ds-footer-in .flinks a:last-child{margin-right:0;}

/* =====================================================================
   主要字型切換鈕（v2 視覺預覽用，font-switch.js 注入）
   左下浮動，避開右下角助教對話匡。每顆按鈕用自己的字型顯示標籤，
   讓大寶直接「看到」黑體 vs 金萱長怎樣。
   ===================================================================== */
#meFontSw{position:fixed;left:20px;bottom:20px;z-index:9998;display:flex;align-items:center;gap:4px;
  padding:5px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(3,38,57,.16);
  border:1px solid rgba(3,38,57,.08);font-family:var(--font-body);user-select:none;}
#meFontSw .mf-cap{font-size:12px;color:var(--ink-3);padding:0 4px 0 9px;letter-spacing:.5px;}
#meFontSw button{border:0;background:transparent;color:var(--ink-2);font-size:15px;font-weight:700;
  padding:7px 15px;border-radius:999px;line-height:1;transition:background .2s,color .2s;}
#meFontSw button[data-f="heiti"]{font-family:var(--font-heiti);}
#meFontSw button[data-f="jinxuan"]{font-family:var(--font-jinxuan);}
#meFontSw button[aria-pressed="true"]{background:var(--dark);color:#fff;}
#meFontSw button:not([aria-pressed="true"]):hover{background:var(--blue-pale);color:var(--blue);}
@media(max-width:640px){
  #meFontSw{left:12px;bottom:12px;transform:scale(.9);transform-origin:left bottom;}
}

/* =====================================================================
   超寬螢幕（>1440）：背景照舊左右撐滿，只把「文字內容欄」鎖在中間
   （2026-08-18 大寶更正：紅色區塊指的是文字內容，不是整個頁面）
   ---------------------------------------------------------------------
   區塊底色、hero 色塊、裝飾形狀都維持滿版；這裡只做兩件事：
   ① 內容容器 .ds-wrap 維持置中（本來就是），最寬不超過設計稿的內容欄；
   ② 螢幕越寬時，裝飾形狀不跟著等比放大（避免拉寬後形狀變巨大蓋住版面）。
   ===================================================================== */
@media (min-width:1441px){
  .ds-hero .ds-wrap,.ds-section .ds-wrap{margin-left:auto;margin-right:auto;}
}

/* =====================================================================
   AI 助教卡（共用元件 .ds-asst-*）
   ---------------------------------------------------------------------
   這一組就是首頁 ZONE 5 那四張彩色助教卡的「可重複使用版」：
   淡彩底 + 28 圓角 + 卡內插畫（.art）+ 標題（.tt）+ 說明（.dd），
   上方可再掛一顆情境標籤膠囊（.ds-asst-tag）。
   首頁自己那份樣式仍寫在 index.html 的 #z5（權重較高、不受影響）；
   內頁（助教頁…）改用這一組，兩邊視覺就會一致。（2026-08-18 大寶指定）
   ===================================================================== */
.ds-asst-cell{display:flex;flex-direction:column;gap:9px;}
/* 2026-08-20 設計師：情境註解改成「純小字」——不要白膠囊、框線與陰影，
   顏色統一淡灰，讓視覺重量回到助教卡本身。*/
.ds-asst-tag{display:block;width:100%;box-sizing:border-box;text-align:center;background:none;
  border:0;border-radius:0;font-family:var(--font-body);font-weight:400;font-size:13.5px;
  letter-spacing:.03em;padding:0 4px 2px;color:var(--ink-3);white-space:nowrap;box-shadow:none;}
.ds-asst-tag.t-blue,.ds-asst-tag.t-amber,.ds-asst-tag.t-purple,.ds-asst-tag.t-green{color:var(--ink-3);}
.ds-asst-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:7.4px;
  width:100%;aspect-ratio:252/217.4;border-radius:28px;overflow:hidden;
  padding:24px 12px 24px 24px;box-sizing:border-box;text-align:left;
  transition:box-shadow .2s ease,transform .2s ease;}
.ds-asst-card.top{justify-content:flex-start;}
.ds-asst-card .art{position:absolute;inset:0;pointer-events:none;}
.ds-asst-card .art img{width:100%;height:100%;display:block;}
.ds-asst-card .tt{position:relative;font-family:var(--font-display);font-weight:700;
  font-size:clamp(17px,1.55vw,21px);line-height:1.48;letter-spacing:.05em;}
.ds-asst-card .dd{position:relative;width:100%;font-family:var(--font-body);font-weight:400;
  font-size:clamp(12.5px,1.02vw,14px);line-height:1.7;letter-spacing:.03em;color:#5a6573;text-wrap:pretty;}
a.ds-asst-card:hover,.ds-asst-card.hoverable:hover{transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(20,34,56,.12);}
.ds-asst-card.b-blue{background:#e9f3ff;}   .ds-asst-card.b-blue .tt{color:#004d89;}
.ds-asst-card.b-amber{background:#fff5d1;}  .ds-asst-card.b-amber .tt{color:#f39a66;}
.ds-asst-card.b-purple{background:#ebeaff;} .ds-asst-card.b-purple .tt{color:#9081ef;}
.ds-asst-card.b-green{background:#e8f4dd;}  .ds-asst-card.b-green .tt{color:#4caf19;}
.ds-asst-card.b-peach{background:#ffeee9;}  .ds-asst-card.b-peach .tt{color:#e8690b;}
/* 內容較多的版本（例如助教頁上方那三張說明卡）：不鎖比例、高度隨字長，插畫改放在卡片內上方 */
.ds-asst-card.flow{aspect-ratio:auto;justify-content:flex-start;gap:14px;
  padding:30px 26px 32px;min-height:100%;}
.ds-asst-card.flow .face{position:relative;width:104px;height:70px;display:block;flex:0 0 auto;}
.ds-asst-card.flow .tt{font-size:clamp(19px,1.7vw,23px);line-height:1.34;}
.ds-asst-card.flow .dd{font-size:clamp(13.5px,1.06vw,14.5px);line-height:1.78;}
@media(max-width:768px){
  .ds-asst-card{padding:18px 12px 18px 18px;border-radius:22px;}
  .ds-asst-card.flow{padding:24px 20px 26px;}
}

/* ── 解鎖規則提示（2026-08-25）────────────────────────────
   「看完本章 4 支影片＋4 位助教小結，才能預約真人支持」這句話，
   課程總覽頁與單元頁共用同一個樣式。 */
.unlock-note{margin:0 0 18px;padding:12px 18px;border-radius:14px;background:rgba(55,134,230,.08);
  border:1px solid rgba(55,134,230,.22);color:#2b4257;font-size:14.5px;line-height:1.75;}
.unlock-note b{color:#1F74DB;}
.unit-tutor + .unlock-note{margin:18px 0 0;}