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

/* ---- 源柔黑體 Gen Jyuu Gothic（自 Figma 設計指定，OFL 授權，已做頁面子集化）---- */
@font-face{
  font-family:'GenJyuuGothic';
  font-weight:700;
  font-style:normal;
  font-display:swap;
  src:url('/img/figma/fonts/GenJyuuGothic-Bold.subset.woff2') format('woff2');
}
@font-face{
  font-family:'GenJyuuGothic';
  font-weight:500;
  font-style:normal;
  font-display:swap;
  src:url('/img/figma/fonts/GenJyuuGothic-Medium.subset.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-soft:#BAB5FF;     /* main/purple-soft */
  --pink:#FBC5B8;            /* main/pink */

  /* ---- 文字 / 中性色 ---- */
  --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-display:'GenJyuuGothic','Noto Sans TC','PingFang TC',-apple-system,sans-serif; /* 標題：源柔黑體 */
  --font-body:'Noto Sans TC','PingFang TC',-apple-system,sans-serif;                    /* 內文：思源黑 */
  --font-en:'Inter','Noto Sans TC',sans-serif;                                          /* 英數 */
}

*{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;
  box-shadow:0 23px 30px rgba(3,38,57,.18);}

/* ---- 版心 ---- */
.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;}

/* ---- 頂部導覽（sticky RWD）---- */
.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 var(--line);}
.ds-nav-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 24px;}
.ds-nav-logo{display:flex;align-items:center;gap:10px;}
.ds-nav-logo img{width:38px;height:auto;}
.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;}
.ds-nav-pill{display:flex;align-items:center;gap:26px;background:#fff;padding:11px 26px;
  border-radius:999px;box-shadow:0 10px 22px rgba(3,38,57,.10);}
.ds-nav-pill a{font-family:var(--font-body);font-weight:500;font-size:14.5px;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);font-weight:700;}
.ds-nav-login{background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:14px;letter-spacing:.06em;padding:11px 18px;border-radius:999px;
  display:inline-flex;align-items:center;box-shadow:0 10px 18px rgba(255,153,37,.28);transition:transform .2s;}
.ds-nav-login:hover{transform:translateY(-1px);}
.ds-nav-gear{width:40px;height:40px;border-radius:999px;background:var(--dark);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ds-nav-gear img{width:22px;height:22px;}
.ds-nav-burger{display:none;width:44px;height:44px;border:none;background:#fff;border-radius:14px;
  box-shadow:0 8px 18px rgba(3,38,57,.10);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(--dark);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;
  box-shadow:0 20px 30px rgba(3,38,57,.18);transition:transform .25s;}
.ds-cta:hover{transform:translateY(-2px);}
.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;}
.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);box-shadow:0 14px 26px rgba(3,38,57,.10);}
.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;}

/* 文字小連結（箭頭 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:64px;height:64px;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:26px;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-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;}

/* 名師雜誌式（左右交錯）*/
.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;}

/* ---- 安心保證 / 一般圖文 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);}
.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;}
.ds-btn-primary:hover{transform:translateY(-1px);}
.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;}
  .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;}
}
@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{transform:translateY(-1px);border-color:var(--blue);background:#fff;box-shadow:0 12px 26px rgba(20,34,56,.10);}
/* 重點面板（白底大留白卡，取代原手風琴卡）*/
.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;}
/* 引導打開助教的一句話 */
.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:transform .2s,box-shadow .2s;box-shadow:0 10px 24px rgba(47,107,216,.28);}
.unit-tutor .go:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(47,107,216,.36);}
/* 主題色：金句左條、重點圓點、助教卡頂條與按鈕 */
.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;box-shadow:0 10px 24px rgba(47,107,216,.28);}
.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;box-shadow:0 10px 24px rgba(88,114,207,.3);}
.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;box-shadow:0 10px 24px rgba(232,105,11,.3);}
.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;box-shadow:0 10px 24px rgba(76,175,25,.3);}
@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:transform .2s,box-shadow .2s,border-color .2s;}
.unit-sib:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,34,56,.10);}
.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;}

/* ---- 章節分組助教卡（彩色上邊框對應技術色）---- */
.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-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;}
}