/* ============================================================
   unit-ep.css — 單集頁（/course/chX/epY）v4（2026-10-14）
   大寶：「太像 wireframe，要更有設計感、雜誌簡潔感；header EP 名稱完整、排版清爽；
         延續課程助教頁的設計風格」
   語彙全部取自課程助教頁（course-ch1-v2.css）：
   深藍 #153546／橘色眉標 #ff772d／灰底大圓角面板 #f4f6f9／
   EP 色卡＋公仔探出（EP1 藍、EP2 粉、EP3 綠、EP4 黃）／橘色編號＋細線清單／黃色主鈕。
   ============================================================ */
.unit-wrap{background:#fff;}
.nw{display:inline-block;}

.ep-page,.ep-pill{--tint:#8db8ff;}
.ep1{--tint:#8db8ff;}
.ep2{--tint:#ffadd2;}
.ep3{--tint:#86dca4;}
.ep4{--tint:#ffd84f;}

/* ── 章節列（課程頁 chip 樣式，四集完整名稱）── */
/* 細線在站台 header 下緣，切換鈕放線下方；章名已在大標眉標出現，不重複 */
.ep-bar{background:#fff;border-top:1px solid #e9edf1;}
.ep-bar-in{max-width:1080px;margin:0 auto;padding:18px clamp(16px,4vw,32px) 0;display:flex;align-items:center;gap:12px 20px;}
.ep-pills{display:flex;gap:8px;flex:1;min-width:0;}
.ep-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #d6dde3;border-radius:999px;background:#f5f7fa;
  color:#5d6d79;text-decoration:none;white-space:nowrap;font-size:14px;transition:border-color .2s,background .2s;}
.ep-pill b{font-family:var(--font-en);font-size:12px;letter-spacing:.04em;}
.ep-pill span{font-weight:700;}
.ep-pill em{display:inline-flex;gap:3px;margin-left:2px;}
.ep-pill:hover{border-color:#153546;}
.ep-pill.on{background:#153546;border-color:#153546;color:#fff;}
.ep-pill.on b{background:var(--tint);color:#153546;padding:2px 8px;border-radius:999px;}
.ep-pill .d{width:7px;height:7px;border-radius:50%;border:1.5px solid #b9c4cf;background:transparent;}
.ep-pill.on .d{border-color:#6f8797;}
.ep-pill .d.ok{background:#ff772d;border-color:#ff772d;}

/* ── 開版：左大標右公仔卡 ── */
/* 左右內距放在 1080 盒子裡面，跟切換列、影片欄同一條左線（10/14 修：原本內距在外面，標題比影片往左凸 28px） */
.ep-hero{padding:clamp(48px,6vw,80px) 0 clamp(36px,4vw,48px);}
.ep-hero-in{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}
.ep-eyebrow{margin:0 0 14px;color:#ff772d;font-size:14px;font-weight:700;letter-spacing:.06em;}
.ep-eyebrow i{font-style:normal;color:#f3b48c;margin:0 6px;}
.ep-title{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;font-family:var(--font-display);font-weight:700;color:#202e37;
  font-size:clamp(36px,4.6vw,56px);line-height:1.25;letter-spacing:.03em;}
.ep-no{font-family:var(--font-en);}
.ep-tbar{width:2px;height:.85em;background:#202e37;}
.ep-quote{margin:28px 0 0;font-size:clamp(22px,2.4vw,30px);line-height:1.55;color:#153546;letter-spacing:.02em;max-width:none;white-space:nowrap;text-wrap:pretty;}
/* 桌機一句話維持單行（10/14 大寶）；手機才在逗號處斷（.nw 片段不拆字） */
.ep-rule{display:block;width:48px;height:3px;border-radius:2px;background:#ff772d;margin:28px 0 0;}

@keyframes ep-jelly{0%,100%{transform:scale(1,1) translateY(0);}40%{transform:scale(1.05,.95) translateY(2px);}60%{transform:scale(.97,1.04) translateY(-3px);}}

/* ── 主欄 ── */
.ep-col{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px);text-wrap:pretty;overflow-wrap:break-word;}
.ep-video{margin:0;border-radius:22px;overflow:hidden;}

/* 這一集，你會帶走（課程頁 ep-take：灰底面板＋橘號＋細線） */
.ep-points{margin-top:clamp(40px,5vw,56px);background:#f4f6f9;border-radius:26px;padding:clamp(28px,4vw,48px) clamp(22px,5vw,64px);}
.ep-take-h{font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);font-weight:700;color:#202e37;letter-spacing:.03em;margin:0 0 16px;}
.ep-points ol{list-style:none;margin:0;padding:0;border-top:1px solid #dde3e9;}
.ep-points li{display:flex;align-items:baseline;gap:30px;padding:20px 0;border-bottom:1px solid #dde3e9;}
.ep-points .no{flex:0 0 auto;font-size:21px;font-weight:700;color:#ff772d;font-variant-numeric:tabular-nums;font-family:var(--font-en);}
.ep-points li p{margin:0;font-size:17px;font-weight:500;line-height:1.6;color:#153546;}

/* 任務：兩張等高 */
.ep-sec-head{margin-top:clamp(64px,8vw,96px);}
.ep-sec-head .ep-eyebrow{margin-bottom:10px;}
.ep-note{margin:12px 0 0;font-size:14px;color:#677a87;}
.ep-note a{color:#153546;font-weight:700;}
.ep-h2{margin:0;font-family:var(--font-display);font-weight:700;color:#202e37;font-size:clamp(28px,3vw,38px);line-height:1.3;letter-spacing:.03em;}
.ep-missions{margin-top:clamp(72px,7vw,96px);display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;}
.ep-mis{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px 32px 30px;border-radius:26px;box-sizing:border-box;}
/* 撞色滿版：01 深藍、02 本集 EP 色 */
.ep-mis.m1{background:#153546;color:#fff;}
.ep-mis.m2{background:var(--tint);}
.m2 .ep-mis-no{padding-right:120px;}
.ep-mis-art{position:absolute;right:14px;top:-92px;width:150px;height:auto;pointer-events:none;transform-origin:50% 90%;
  filter:drop-shadow(0 10px 12px #15354630);animation:ep-jelly 3.8s ease-in-out infinite;}
.ep-mis-no{margin:0;display:flex;align-items:baseline;gap:14px;font-family:var(--font-display);font-weight:700;font-size:21px;color:#153546;}
.ep-mis-no b{font-family:var(--font-en);font-size:21px;color:#ff772d;font-variant-numeric:tabular-nums;}
.ep-mis-desc{margin:0;font-size:15px;line-height:1.8;color:#2c4352;}
.m1 .ep-mis-no,.m1 .ep-mis-st .ok{color:#fff;}
.m1 .ep-mis-no b{color:#ffb81c;}
.m1 .ep-mis-desc,.m1 .ep-mis-st{color:#c4d3de;}
.m1 .ep-bar-track{background:#ffffff26;}
.m1 .ep-bar-track i{background:#ffb81c;}
.m2 .ep-mis-no b{color:#153546;}
.m2 .ep-mis-st,.m2 .ep-again{color:#2c4352;}
.ep-bar-track{height:8px;border-radius:999px;background:#dde3e9;overflow:hidden;margin-top:auto;}
.ep-bar-track i{display:block;height:100%;width:0;border-radius:inherit;background:#ff772d;transition:width .6s ease;}
.ep-mis-st{margin:0;font-size:14px;color:#546b7b;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;}
.ep-mis-st .ok{font-weight:700;color:#153546;}
.ep-ask{margin:0;font-size:15px;line-height:1.6;color:#153546;background:#fff;border-radius:16px;padding:14px 18px;}
.ep-ask small{display:block;font-size:12px;font-weight:700;color:#ff772d;letter-spacing:.06em;margin-bottom:4px;}
.ep-mis-act{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
/* 主鈕＝課程頁「進入課程」黃鈕 */
.ep-go{display:inline-flex;align-items:center;gap:12px;background:#ffb81c;color:#153546;padding:14px 32px;border-radius:999px;box-shadow:0 5px 0 #e2a00f55;
  font-family:var(--font-display);font-weight:700;font-size:16px;text-decoration:none;transition:background .2s,transform .2s;}
.ep-go:hover{background:#ffc640;transform:translateY(-1px);}
.m2 .ep-go{background:#153546;color:#fff;box-shadow:0 5px 0 #15354633;}
.m2 .ep-go:hover{background:#244b60;}
.ep-mis.wait .ep-go{background:#fff;color:#153546;box-shadow:0 5px 0 #15354622;}
.ep-mis.wait .ep-go:hover{background:#153546;color:#fff;}
.ep-again{font-size:13px;color:#546b7b;text-decoration:underline;}

/* EP3 加碼功課：薩提爾測驗（比任務卡低一階：白底＋EP 色細邊，不用深色框） */
.ep-bonus{margin-top:20px;display:flex;align-items:center;gap:20px 32px;padding:26px 32px;border-radius:22px;background:#fff;border:2px dashed var(--tint);}
.ep-bonus-tx{flex:1;min-width:0;}
.ep-bonus-k{margin:0 0 6px;font-size:13px;font-weight:700;color:#ff772d;letter-spacing:.06em;}
.ep-bonus-k i{font-style:normal;color:#f3b48c;margin:0 4px;}
.ep-bonus-h{margin:0;font-family:var(--font-display);font-weight:700;font-size:20px;color:#153546;}
.ep-bonus-d{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:#546b7b;}
.ep-bonus-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:999px;background:var(--tint);color:#153546;
  font-family:var(--font-display);font-weight:700;font-size:15px;text-decoration:none;transition:filter .2s,transform .2s;}
.ep-bonus-go:hover{filter:brightness(1.05);transform:translateX(2px);}
.ep-extra{margin:20px 0 0;font-size:14px;color:#546b7b;}
.ep-extra a{font-weight:700;color:#153546;margin-left:6px;}

/* 講義 PDF */
.ep-pdf{margin-top:20px;}
.ep-pdf:empty{display:none;}
.ep-pdf-btn{display:flex;align-items:center;gap:14px;padding:18px 26px;border-radius:999px;border:1px solid #d6dde3;background:#fff;
  font-family:var(--font-display);font-weight:700;font-size:16px;color:#153546;text-decoration:none;transition:border-color .2s;}
.ep-pdf-btn > span{width:34px;height:34px;border-radius:50%;background:var(--tint);color:#153546;display:inline-flex;align-items:center;justify-content:center;}
.ep-pdf-btn small{margin-left:auto;font-family:var(--font-body);font-weight:500;font-size:13px;color:#677a87;}
.ep-pdf-btn:hover{border-color:#153546;}

.ep-page .unit-nav{margin:48px 0 clamp(64px,8vw,96px);}

/* 預約區（同課程頁底部 CTA：ds-section soft） */
.ep-cta{position:relative;overflow:hidden;}
.ep-cta-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;}
.ep-perk{display:inline-block;margin:0;padding:9px 20px;border-radius:999px;background:#fff1e6;font-size:15px;color:#3d5260;}
.ep-perk b{color:#ff772d;}
.ep-cta-btn{align-items:center;padding-top:10px;padding-bottom:10px;}
.ep-cta-btn .cta-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25;}
.ep-cta-btn .cta-txt small{font-family:var(--font-body);font-weight:400;font-size:12.5px;letter-spacing:.04em;opacity:.82;}

/* ── 平板／手機 ── */
@media (max-width:1040px){
  .ep-pill b{display:none;}
  .ep-pill.on b{display:inline;}
  .ep-mis-art{width:118px;top:-70px;}
  .m2 .ep-mis-no{padding-right:96px;}
}
@media (max-width:760px){
  .ep-bar-in{padding:14px 0 0;}
  .ep-pills{padding-left:16px;padding-right:16px;}
  .ep-pills{overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .ep-pills::-webkit-scrollbar{display:none;}
  .ep-pill{padding:8px 14px;font-size:13px;}
  .ep-pill b{display:inline;}
  .ep-hero{padding:36px 0 32px;}
  .ep-title{gap:10px 16px;}
  .ep-quote{font-size:21px;margin-top:20px;white-space:normal;}
  .ep-rule{margin-top:22px;}
  .ep-video{border-radius:16px;}
  .ep-points{border-radius:22px;}
  .ep-points li{gap:18px;}
  .ep-missions{grid-template-columns:1fr;gap:84px;margin-top:64px;}
  .ep-mis-art{width:120px;top:-60px;right:12px;}
  .ep-mis{padding:26px 22px 24px;border-radius:22px;}
  .ep-bonus{flex-direction:column;align-items:flex-start;padding:22px;}
  .ep-pdf-btn{border-radius:18px;}
  .ep-pdf-btn small{display:none;}
}
@media (prefers-reduced-motion:reduce){.ep-mis-art{animation:none;}}