/* 2026-10-28 課程助教頁改版（Figma 3593:8858）：Hero 文字與播放鈕、章節頁籤配色、四集卡片、面板（按鈕移到底部）、結尾形狀＋預約＋頁尾。
   載入順序在 course-ch1-v2.css 之後，同權重直接覆蓋；動態（影片播放、切集、公仔果凍）沿用原本的 JS。 */

/* ===== Hero ===== */
.chero{min-height:clamp(440px,44.4vw,640px);}
.chero-scrim{background:linear-gradient(90deg,rgba(6,17,32,.66) 25%,rgba(6,17,32,.18) 100%);}
.chero-inner{max-width:1248px;}
.chero-copy{max-width:640px;gap:0;}
.chero-copy .ds-eyebrow{color:#4ff067;font-size:12px;letter-spacing:2px;margin:0 0 14px;}
.chero-copy .ds-h1{font-size:clamp(34px,4.6vw,66px);line-height:1.06;letter-spacing:.02em;margin:0 0 26px;text-wrap:nowrap;}
.chero-copy .ds-lead{color:rgba(255,255,255,.8);font-size:clamp(16px,1.46vw,21px);line-height:1.81;max-width:none;margin:0 0 40px;}
.chero-copy .ds-hero-actions{margin:0;}
.chero-play.ds-cta.ghost{height:70px;padding:0 9px 0 32px;gap:22px;background:#fff;border:0;color:#032639;font-size:24px;letter-spacing:.06em;}
.chero-play .ds-arrow.pp{width:52px;height:52px;background:#032639;}
.chero-play .pp::after{border-width:8px 0 8px 13px;margin-left:4px;}
/* 2026-10-28 Figma 3600:9748：滑過時深藍圓放大到 69px、略往右、外圈多一道白框，三角形跟著放大 */
.chero-play .ds-arrow.pp{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;}
.chero-play .pp::after{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
@media (hover:hover){
  .chero-play.ds-cta:hover .ds-arrow.pp{transform:translateX(2px) scale(1.327);box-shadow:inset 0 0 0 3.8px #fff;}
  .chero-play:hover .pp::after{transform:scale(1.04);}
}
@media(max-width:768px){
  .chero{min-height:clamp(400px,116vw,560px);}
  .chero-copy .ds-h1{font-size:34px;margin-bottom:16px;text-wrap:balance;}
  .chero-copy .ds-lead{font-size:15px;line-height:1.85;margin-bottom:26px;}
  .chero-copy .ds-lead br.dk{display:none;}
  .chero-play.ds-cta.ghost{height:58px;font-size:19px;padding-left:24px;gap:16px;}
  .chero-play .ds-arrow.pp{width:42px;height:42px;}
}
@media(min-width:769px){.chero-copy .ds-lead br.dk{display:inline;}}

/* ===== 章節頁籤 ===== */
#ch1{padding-top:80px;}
#ch1 .ch-chips{margin-bottom:40px;}
#ch1 .ch-chip{background:#f5f5f7;border-color:#d2d2d7;color:#6e6e73;}
#ch1 .ch-chip small{color:#6e6e73;}
#ch1 .ch-chip.on{background:#1f3a5f;border-color:#1f3a5f;color:#fff;}
#ch1 .ch-chip.on b{background:#ffb020;color:#1f3a5f;}

/* ===== 章節標題 ===== */
#ch1 .ch-head{max-width:1040px;}
#ch1 .ch-kicker{color:#e8590c;font-size:16px;margin-bottom:16px;}
#ch1 .ch-head h2{font-size:clamp(36px,3.9vw,56px);color:#1d1d1f;margin-bottom:24px;}
#ch1 .ch-bar{background:#1d1d1f;}
#ch1 .ch-desc{font-size:clamp(16px,1.4vw,20px);line-height:1.8;color:#6e6e73;}

/* ===== 四集卡片 ===== */
#ch1 .episode-tabs{margin-top:100px;gap:22px;}
#ch1 .episode-tab{min-height:198px;border-radius:20px;}
#ch1 .episode-tab[aria-selected=true]{transform:translateY(-4px);box-shadow:0 5px 0 rgba(27,53,72,.13);}
#ch1 .ep-pop{width:119px;right:16px;top:-46px;}
#ch1 .ep-tab-label{padding:0 22px 24px;}
#ch1 .ep-index,#ch1 .ep-tab-label strong,#ch1 .ep-companion{color:#222f34;}
#ch1 .ep-tab-label strong{font-size:22px;}
#ch1 .ep-companion{font-size:10px;opacity:.85;margin-top:8px;}
#ch1 .ep-tab-mark{width:27px;height:27px;right:16px;bottom:18px;border-color:#222f34;}
#ch1 .ep-tab-mark:before,#ch1 .ep-tab-mark:after{background:#222f34;}

/* ===== 面板 ===== */
#ch1 .episode-panels{margin-top:25px;}
#ch1 .episode-panel{background:#f5f7fa;border-radius:12px 12px 26px 26px;}
#ch1 .episode-panel .acc-body.ep-v3{padding:64px 72px;}
#ch1 .ep-v3 .ep-panel-label{color:#ff772d;font-size:14px;margin-bottom:24px;}
#ch1 .ep-v3 .acc-quote{font-size:clamp(26px,2.8vw,40px);line-height:1.5;color:#12364a;max-width:944px;}
#ch1 .ep-rule{width:56px;height:4px;margin:32px 0;}
#ch1 .ep-v3 .acc-intro{font-size:clamp(16px,1.32vw,19px);line-height:1.95;color:#3d5261;max-width:800px;margin:0 0 48px;}
#ch1 .ep-take-h{font-size:15px;color:#12364a;margin:0 0 12px;}
#ch1 .ep-take{max-width:none;border-top-color:#d6dee5;}
#ch1 .ep-take li{min-height:75px;box-sizing:border-box;align-items:center;gap:0;padding:14px 0;border-bottom-color:#d6dee5;font-size:clamp(16px,1.32vw,19px);color:#12364a;}
#ch1 .ep-take .no{width:72px;font-size:24px;}
/* 進入課程（2026-10-28 大寶：本區最重要的 CTA）：放在 CH 標題＋金句右側空白處，
   和金句垂直置中對齊、不加說明灰字；一進面板第一眼就看到。 */
#ch1 .ep-head{align-items:center;flex-wrap:nowrap;gap:48px;}
#ch1 .ep-head-txt{flex:1 1 auto;}
#ch1 .ep-go{flex:0 0 auto;flex-direction:row;align-items:center;margin:0;}
#ch1 .ep-v3 .acc-more{padding:18px 44px;font-size:19px;color:#12364a;white-space:nowrap;box-shadow:0 6px 16px rgba(255,153,0,.35);}
@media(max-width:760px){
  #ch1{padding-top:56px;}
  #ch1 .episode-tabs{margin-top:76px;gap:52px 12px;}
  #ch1 .episode-tab{min-height:150px;}
  #ch1 .ep-pop{width:88px;top:-38px;right:8px;}
  #ch1 .ep-tab-label{padding:0 13px 16px;}
  #ch1 .ep-tab-label strong{font-size:18px;}
  #ch1 .ep-tab-mark{width:22px;height:22px;right:10px;bottom:12px;}
  #ch1 .episode-panel .acc-body.ep-v3{padding:34px 22px 30px;}
  #ch1 .ep-rule{margin:22px 0;}
  #ch1 .ep-v3 .acc-intro{margin-bottom:30px;}
  #ch1 .ep-take li{min-height:0;padding:15px 0;}
  #ch1 .ep-take .no{width:44px;font-size:19px;}
  #ch1 .ep-head{display:block;}
  #ch1 .ep-go{flex-direction:column;align-items:stretch;margin-top:26px;}
}

/* ===== 結尾：形狀＋預約真人＋頁尾（1440 舞台，形狀位置照 Figma 原寸） ===== */
.c-end{position:relative;background:#f6f8fb;overflow:hidden;height:951px;}
.c-end-stage{position:relative;width:1440px;height:100%;left:50%;transform:translateX(-50%);}
.c-shapes{position:absolute;inset:0;pointer-events:none;}
.c-shapes .cs{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;}
.c-shapes .cs i{display:block;flex:none;position:relative;}
.c-shapes .cs img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;}
.s-ring{left:845px;top:-466px;width:800px;height:800px;}
.s-ring i{width:800px;height:800px;}
.s-burst{left:-412.58px;top:-128.92px;width:776.19px;height:775.96px;}
.s-burst i{width:641.185px;height:640.859px;transform:rotate(13.88deg);}
.s-yellow{left:calc(50% + 32.34px);top:625.05px;width:736.69px;height:736.69px;margin-left:-368.345px;}
.s-yellow i{width:585.336px;height:585.335px;transform:scaleY(-1) rotate(-162.13deg);}
.s-blue{left:-283.2px;top:230.83px;width:1041.436px;height:1029.373px;}
.s-blue i{width:834.375px;height:631.199px;transform:rotate(42.59deg);}
.s-blue img{inset:10.96% 8.74% 0 8.74%;width:auto;height:auto;}
.s-green{left:967.27px;top:316px;width:873.717px;height:805.083px;}
.s-green i{width:633.326px;height:731.646px;transform:scaleY(-1) rotate(-105.42deg);}
.s-green img{inset:1.69% 0;width:auto;height:auto;}
.s-flower{left:188.79px;top:-304.32px;width:657.32px;height:657.32px;}
.s-flower i{width:517.428px;height:517.428px;transform:rotate(-108.93deg);}
/* 捲到這裡：一片片從原位長出，長完各自輕擺 */
.c-end.bloom .cs{animation:cGrow .7s cubic-bezier(.34,1.56,.64,1) both;}
.c-end.bloom .s-blue{animation-delay:0s;}
.c-end.bloom .s-green{animation-delay:.12s;}
.c-end.bloom .s-yellow{animation-delay:.24s;}
.c-end.bloom .s-burst{animation-delay:.36s;}
.c-end.bloom .s-flower{animation-delay:.48s;}
.c-end.bloom .s-ring{animation-delay:.6s;}
@keyframes cGrow{0%{opacity:0;transform:scale(.6)}55%{opacity:1}100%{opacity:1;transform:scale(1)}}
.c-end.bloom .cs img{animation:cSway 6s ease-in-out 1.4s infinite;}
.c-end.bloom .s-ring img{animation-duration:7.4s;animation-direction:reverse;}
.c-end.bloom .s-burst img{animation-duration:5.6s;animation-delay:1.7s;}
.c-end.bloom .s-yellow img{animation-duration:6.8s;animation-delay:2s;animation-direction:reverse;}
.c-end.bloom .s-blue img{animation-duration:7.8s;animation-delay:1.5s;}
.c-end.bloom .s-green img{animation-duration:6.4s;animation-delay:1.9s;animation-direction:reverse;}
.c-end.bloom .s-flower img{animation-duration:5.2s;animation-delay:1.6s;}
@keyframes cSway{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:3deg}}
@media(prefers-reduced-motion:reduce){.c-shapes .cs{opacity:1!important;animation:none!important;}.c-shapes .cs img{animation:none!important;}}

.c-end-head{position:absolute;left:50%;top:231px;width:1080px;margin-left:-540px;text-align:center;}
.c-end-head h3{font-family:var(--font-display);font-weight:700;font-size:45px;line-height:70px;letter-spacing:1px;color:#1a2230;margin:0 0 16px;}
.c-end-head p{font-size:17px;line-height:2;letter-spacing:1.19px;color:#5a6573;margin:0;}
.c-end .nw{display:inline-block;}
.c-appt{position:absolute;left:50%;top:399.41px;width:507px;height:138px;margin-left:-253.5px;border-radius:999px;background:#032639;color:#fff;text-decoration:none;}
.c-appt .lbl{position:absolute;left:calc(50% - 44.75px);top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;line-height:1.2;font-family:var(--font-display);font-weight:700;font-size:36px;letter-spacing:2px;white-space:nowrap;}
.c-appt .lbl small{font-size:17px;font-weight:500;letter-spacing:1px;opacity:.92;margin-top:8px;}
.c-appt .arrow{position:absolute;right:15.38px;top:50%;transform:translateY(-50%);width:106.5px;height:106.5px;border-radius:100px;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .25s ease,box-shadow .25s ease;}
.c-appt .arrow img{width:58.8px;height:44.6px;}
/* 2026-10-28 Figma 3572:7926：整顆轉亮藍，箭頭白圓放大貼齊右緣、加藍色內框，箭頭換藍 */
.c-appt{transition:background-color .25s ease;}
.c-appt .arrow img.hv{position:absolute;inset:0;margin:auto;opacity:0;transition:opacity .2s ease;}
@media (hover:hover){
  .c-appt:hover{background:#2f6bd8;}
  .c-appt:hover .arrow{transform:translateY(-50%) scale(1.289);box-shadow:inset 0 0 0 7.76px #2f6bd8;}
  .c-appt:hover .arrow img.hv{opacity:1;}
}
.c-appt:focus-visible{outline:3px solid #2f6bd8;outline-offset:4px;}
.c-footer{position:absolute;left:77.68px;right:77.68px;top:657.42px;height:133.21px;background:#fff;border-radius:46px;display:flex;align-items:center;justify-content:space-between;padding:0 50px;box-sizing:border-box;}
.c-footer .flogo{width:145px;height:51px;display:flex;flex-direction:column;justify-content:space-between;}
.c-footer .flogo img{display:block;width:100%;height:auto;}
.c-footer .legal{display:flex;gap:40px;}
.c-footer .legal a{font-weight:500;color:#5a6573;font-size:18px;letter-spacing:2.34px;text-decoration:none;}
.c-footer .legal a:hover{color:#003864;text-decoration:underline;}
.c-footer .social{display:flex;gap:16px;align-items:center;}
.c-footer .social a{width:53.21px;height:53.21px;border-radius:50%;background:#1a2230;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease;}
.c-footer .social a:hover{transform:translateY(-3px);background:#2f6bd8;}
.c-footer .social img{width:26.6px;height:26.6px;}
.c-copy{position:absolute;left:50%;top:869px;transform:translate(-50%,-50%);margin:0;font-family:var(--font-en);font-size:15px;letter-spacing:1.35px;color:#5a6573;white-space:nowrap;}

/* 小於 1440：整個舞台等比縮小（版面與 Figma 一致）；手機改直排 */
@media(min-width:761px) and (max-width:1439px){
  .c-end{height:calc(951px * var(--ck,1));}
  .c-end-stage{height:951px;transform:translateX(-50%) scale(var(--ck,1));transform-origin:50% 0;}
}
@media(max-width:760px){
  .c-end{height:auto;}
  .c-end-stage{width:auto;left:auto;transform:none;display:flex;flex-direction:column;align-items:center;gap:26px;padding:300px 20px 40px;}
  .s-ring,.s-flower,.s-burst{scale:.42;transform-origin:0 0;}
  .s-ring{left:auto;right:-300px;top:-170px;}
  .s-flower{left:22%;top:-110px;}
  .s-burst{left:-190px;top:-20px;}
  .c-end-head,.c-appt,.c-footer,.c-copy{position:relative;left:auto;right:auto;top:auto;margin:0;transform:none;}
  .c-end-head{width:100%;}
  .c-end-head h3{font-size:26px;line-height:1.5;margin-bottom:10px;}
  .c-end-head p{font-size:14px;}
  .c-appt{width:100%;max-width:330px;height:80px;}
  .c-appt .lbl{left:42%;font-size:20px;letter-spacing:1px;}
  .c-appt .lbl small{font-size:12px;margin-top:4px;}
  .c-appt .arrow{width:60px;height:60px;right:10px;}
  .c-appt .arrow img{width:30px;height:24px;}
  .c-footer{width:100%;height:auto;flex-direction:column;gap:18px;padding:26px;border-radius:28px;}
  .c-footer .legal{gap:18px;flex-wrap:wrap;justify-content:center;}
  .c-footer .legal a{font-size:14px;letter-spacing:1px;}
  .c-footer .social a{width:44px;height:44px;}
  .c-footer .social img{width:22px;height:22px;}
  .c-copy{font-size:12px;}
}