﻿/* Dr.MVP V2 Courses Page 02 (/Intro) - derived from delivery 02_Courses/Backend_Handoff/..._v1.1_20260826/02_Page_Frontend/courses-overview-v2.css
   SHA256 22e496c750a5c7ec93f160542077de10160d273dc034707c4d621d94ff6838e2 (Final Freeze v1.1 2026-08-26). Load after courses-integration.css.
   Conversion: every selector prefixed with .drmvpv2-courses; image paths ../03_Formal_WebP_Assets/ -> ./assets/ (same file names, byte-identical copies);
   declarations, source order and breakpoints otherwise unchanged (incl. .final .actions .line{display:none!important} - spec D07 kept as delivered). */
.drmvpv2-courses .feature-section,.drmvpv2-courses .planning-section,.drmvpv2-courses .topics-section{position:relative;overflow:hidden}
.drmvpv2-courses .feature-kicker{display:inline-flex;align-items:center;gap:11px;margin:0 0 18px;color:var(--blue);font-size:17px;font-weight:900;letter-spacing:.1em}
.drmvpv2-courses .feature-kicker>span{position:relative;width:32px;height:32px;flex:0 0 32px;border-radius:11px;background:#e7f1ff}
.drmvpv2-courses .feature-kicker>span::before,.drmvpv2-courses .feature-kicker>span::after{content:"";position:absolute}
.drmvpv2-courses .feature-kicker>span::before{left:8px;top:8px;width:11px;height:11px;border:3px solid var(--blue);border-radius:50%}
.drmvpv2-courses .feature-kicker>span::after{right:6px;bottom:6px;width:9px;height:3px;border-radius:99px;background:var(--yellow);transform:rotate(-45deg)}
.drmvpv2-courses .feature-title{font-size:clamp(34px,3.15vw,48px);line-height:1.28;letter-spacing:-.025em}
.drmvpv2-courses .feature-title>span{display:block;white-space:nowrap}
.drmvpv2-courses .feature-visual{position:relative;min-width:0}
.drmvpv2-courses .feature-visual::before{content:"";position:absolute;inset:22px -18px -18px 22px;z-index:-1;border-radius:34px;background:linear-gradient(135deg,#dceaff,#f8fbff);box-shadow:0 18px 48px rgba(7,27,77,.09)}
.drmvpv2-courses .visual-accent{position:absolute;right:-15px;bottom:38px;width:88px;height:88px;border:18px solid rgba(255,194,26,.92);border-left-color:transparent;border-radius:50%;transform:rotate(16deg)}
.drmvpv2-courses .feature-copy{min-width:0}
.drmvpv2-courses .feature-copy .section-lead{margin:0 0 26px}
.drmvpv2-courses .schedule-cards{display:grid;gap:10px;margin:0}
.drmvpv2-courses .schedule-cards li{position:relative;display:grid;grid-template-columns:88px 132px minmax(0,1fr);align-items:center;gap:14px;min-height:74px;padding:13px 18px;border:1px solid #d8e4f3;border-radius:17px;background:linear-gradient(100deg,#fff,#f8fbff);box-shadow:0 10px 24px rgba(7,27,77,.055);overflow:hidden}
.drmvpv2-courses .schedule-cards li::after{content:"";position:absolute;right:-22px;top:-30px;width:74px;height:74px;border:15px solid rgba(13,91,221,.06);border-radius:50%}
.drmvpv2-courses .schedule-cards li:nth-child(2){margin-left:18px}
.drmvpv2-courses .schedule-cards li:nth-child(3){margin-left:36px}
.drmvpv2-courses .schedule-cards b{font-size:18px}
.drmvpv2-courses .schedule-cards li>span:last-child{position:relative;color:#617697}
.drmvpv2-courses .schedule-mark{font-size:11px!important;font-weight:900;letter-spacing:.12em;color:var(--blue)!important}
.drmvpv2-courses .feature-note{margin:18px 0 0;padding-left:15px;border-left:3px solid var(--yellow);font-size:14px}
.drmvpv2-courses .planning-section{background:linear-gradient(135deg,#f4f8ff 0%,#edf4ff 58%,#f8fbff 100%)}
.drmvpv2-courses .planning-section::before{content:"";position:absolute;right:-130px;top:-170px;width:430px;height:430px;border:85px solid rgba(13,91,221,.045);border-radius:50%}
.drmvpv2-courses .planning-intro{position:relative;z-index:1;max-width:900px}
.drmvpv2-courses .planning-intro .section-lead{margin-bottom:0}
.drmvpv2-courses .planning-flow{position:relative;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;margin:54px 0 0!important}
.drmvpv2-courses .planning-flow::before{content:"";position:absolute;left:7%;right:7%;top:48px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--blue),#75a9f7 74%,var(--yellow));opacity:.55}
.drmvpv2-courses .planning-flow li{position:relative;z-index:1;width:auto!important;min-height:176px!important;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-end;gap:18px!important;padding:24px!important;border:1px solid #d7e4f6!important;border-top:5px solid var(--blue)!important;border-radius:24px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 16px 38px rgba(7,27,77,.08);font-size:18px!important;white-space:normal!important;overflow:hidden}
.drmvpv2-courses .planning-flow li::before{content:"";position:absolute;right:-22px;top:-28px;width:96px;height:96px;border:22px solid rgba(13,91,221,.055);border-radius:50%}
.drmvpv2-courses .planning-flow li:nth-child(even){transform:translateY(24px)}
.drmvpv2-courses .planning-flow li:last-child{border-top-color:var(--yellow)!important}
.drmvpv2-courses .planning-flow span{position:relative;width:54px!important;height:54px!important;display:grid!important;place-items:center;flex:0 0 54px!important;margin:0!important;border:7px solid #eaf2ff;border-radius:18px!important;background:var(--blue)!important;color:#fff!important;box-shadow:0 0 0 1px #bed3f4;font-size:15px!important;letter-spacing:.05em}
.drmvpv2-courses .planning-flow strong{position:relative;font-size:19px;line-height:1.5}
.drmvpv2-courses .topic-showcase{display:grid;grid-template-columns:minmax(320px,.86fr) minmax(0,1.4fr);gap:28px;align-items:stretch}
.drmvpv2-courses .topic-intro{position:relative;min-height:470px;padding:44px 42px;border-radius:30px;overflow:hidden;background:linear-gradient(145deg,#071b4d,#0d469c);color:#fff;box-shadow:0 22px 54px rgba(7,27,77,.16)}
.drmvpv2-courses .topic-intro::before{content:"";position:absolute;right:-105px;bottom:-120px;width:330px;height:330px;border:76px solid rgba(255,255,255,.06);border-radius:50%}
.drmvpv2-courses .topic-intro::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--yellow) 0 22%,#71a8fb 22% 62%,transparent 62%)}
.drmvpv2-courses .topic-intro .feature-kicker{color:#9ec5ff}
.drmvpv2-courses .topic-intro .feature-kicker>span{background:rgba(255,255,255,.12)}
.drmvpv2-courses .topic-intro .feature-kicker>span::before{border-color:#fff}
.drmvpv2-courses .topic-intro .feature-title{position:relative;z-index:1;color:#fff}
.drmvpv2-courses .topic-intro .section-lead{position:relative;z-index:1;color:#cfe0fa;font-size:18px}
.drmvpv2-courses .topic-intro-art{position:absolute;left:42px;bottom:38px;display:flex;align-items:flex-end;gap:9px;height:82px}
.drmvpv2-courses .topic-intro-art span{display:block;width:18px;border-radius:99px;background:linear-gradient(180deg,#8bb9ff,var(--blue));box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.drmvpv2-courses .topic-intro-art span:nth-child(1){height:34px}
.drmvpv2-courses .topic-intro-art span:nth-child(2){height:58px}
.drmvpv2-courses .topic-intro-art span:nth-child(3){height:80px;background:linear-gradient(180deg,#ffe07c,var(--yellow))}
.drmvpv2-courses .topic-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.drmvpv2-courses .topic-group{position:relative;min-width:0;min-height:226px;padding:28px;border:1px solid #d7e4f6;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(7,27,77,.075)}
.drmvpv2-courses .topic-group::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--topic-color,var(--blue))}
.drmvpv2-courses .topic-group::after{content:"";position:absolute;right:-25px;top:-30px;width:120px;height:120px;border:25px solid rgba(13,91,221,.06);border-radius:50%}
.drmvpv2-courses .topic-group h3{position:relative;z-index:1;margin:24px 0 20px;font-size:22px}
.drmvpv2-courses .topic-group ul{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.drmvpv2-courses .topic-group li{display:inline-flex;align-items:center;min-height:38px;padding:7px 13px;border-radius:999px;background:#edf4ff;color:#12366f;font-size:15px;font-weight:900;white-space:nowrap}
.drmvpv2-courses .topic-symbol{position:relative;z-index:1;width:42px;height:42px;display:block;border-radius:14px;background:#e7f1ff}
.drmvpv2-courses .topic-symbol::before,.drmvpv2-courses .topic-symbol::after{content:"";position:absolute}
.drmvpv2-courses .topic-symbol::before{left:11px;top:11px;width:16px;height:16px;border:3px solid var(--topic-color,var(--blue));border-radius:5px}
.drmvpv2-courses .topic-symbol::after{left:19px;top:7px;width:3px;height:28px;border-radius:99px;background:var(--topic-color,var(--blue));transform:rotate(45deg)}
.drmvpv2-courses .topic-life{--topic-color:#1d7aa5}
.drmvpv2-courses .topic-test{--topic-color:#6655c5}
.drmvpv2-courses .topic-skill{--topic-color:#d58d00}
.drmvpv2-courses .topic-life .topic-symbol{background:#e8f6fa}
.drmvpv2-courses .topic-test .topic-symbol{background:#f0edff}
.drmvpv2-courses .topic-skill .topic-symbol{background:#fff4d8}
.drmvpv2-courses .topic-life .topic-symbol::before{border-radius:50%}
.drmvpv2-courses .topic-test .topic-symbol::before{transform:rotate(45deg);border-radius:3px}
.drmvpv2-courses .topic-skill .topic-symbol::before{border-radius:50%;border-style:dashed}
@media(max-width:1199px) and (min-width:768px){.drmvpv2-courses .feature-title>span{white-space:normal}.drmvpv2-courses .feature-layout{gap:40px}.drmvpv2-courses .schedule-cards li{grid-template-columns:74px 1fr;gap:4px 12px}.drmvpv2-courses .schedule-cards li>span:last-child{grid-column:2}.drmvpv2-courses .schedule-cards li:nth-child(2),.drmvpv2-courses .schedule-cards li:nth-child(3){margin-left:0}.drmvpv2-courses .planning-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important}.drmvpv2-courses .planning-flow::before{display:none}.drmvpv2-courses .planning-flow li:nth-child(even){transform:none}.drmvpv2-courses .topic-showcase{grid-template-columns:1fr}.drmvpv2-courses .topic-intro{min-height:350px}.drmvpv2-courses .topic-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.drmvpv2-courses .feature-kicker{margin-bottom:14px;font-size:15px}.drmvpv2-courses .feature-kicker>span{width:28px;height:28px;flex-basis:28px}.drmvpv2-courses .feature-title{font-size:clamp(30px,9vw,38px);line-height:1.35}.drmvpv2-courses .feature-title>span,.drmvpv2-courses .semantic-copy>span{white-space:normal}.drmvpv2-courses .feature-visual::before{inset:14px -7px -10px 14px;border-radius:25px}.drmvpv2-courses .visual-accent{right:-4px;bottom:18px;width:62px;height:62px;border-width:13px}.drmvpv2-courses .schedule-cards li{grid-template-columns:1fr;gap:3px;min-height:0;padding:16px 18px}.drmvpv2-courses .schedule-cards li:nth-child(2),.drmvpv2-courses .schedule-cards li:nth-child(3){margin-left:0}.drmvpv2-courses .schedule-mark{font-size:10px!important}.drmvpv2-courses .planning-flow{display:flex!important;flex-direction:column;align-items:stretch!important;gap:12px!important;margin-top:34px!important}.drmvpv2-courses .planning-flow::before{left:26px;right:auto;top:20px;bottom:20px;width:3px;height:auto}.drmvpv2-courses .planning-flow li{min-height:112px!important;display:grid!important;grid-template-columns:54px minmax(0,1fr);align-items:center!important;justify-content:initial;gap:16px!important;padding:18px!important}.drmvpv2-courses .planning-flow li:nth-child(even){transform:none}.drmvpv2-courses .planning-flow strong{font-size:18px}.drmvpv2-courses .topic-showcase{grid-template-columns:1fr;gap:16px}.drmvpv2-courses .topic-intro{min-height:390px;padding:34px 26px;border-radius:24px}.drmvpv2-courses .topic-intro-art{left:26px;bottom:30px}.drmvpv2-courses .topic-groups{grid-template-columns:1fr;gap:12px}.drmvpv2-courses .topic-group{min-height:178px;padding:22px;border-radius:22px}.drmvpv2-courses .topic-group h3{margin:17px 0 14px;font-size:20px}.drmvpv2-courses .topic-group li{font-size:14px}}
@media(max-width:374px){.drmvpv2-courses .topic-group ul{display:grid}.drmvpv2-courses .topic-group li{white-space:normal}.drmvpv2-courses .feature-title{font-size:29px}}
.drmvpv2-courses #course-needs .section-no{position:relative;display:inline-block;min-height:40px;margin:0 0 18px;padding:0 0 0 52px;color:var(--blue);font-size:17px;font-weight:900;letter-spacing:.1em;line-height:1.25}
.drmvpv2-courses #course-needs .section-no::before{content:"";position:absolute;left:0;top:0;width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#e7f1ff,#fff);box-shadow:inset 0 0 0 1px #cfe0f7,0 8px 20px rgba(13,91,221,.09)}
.drmvpv2-courses #course-needs .section-no::after{content:"依需求選擇";display:block;margin-top:3px;color:#6980a3;font-size:11px;font-weight:800;letter-spacing:.05em}
.drmvpv2-courses #course-needs .section-no{background-image:linear-gradient(var(--blue),var(--blue)),linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-size:10px 10px,8px 3px;background-position:14px 11px,25px 27px}
.drmvpv2-courses .feature-section .feature-kicker::after,.drmvpv2-courses .planning-section .feature-kicker::after{display:inline-flex;align-items:center;min-height:28px;margin-left:2px;padding:3px 10px;border:1px solid #d5e4f8;border-radius:999px;background:#fff;color:#6980a3;font-size:11px;font-weight:800;letter-spacing:.035em}
.drmvpv2-courses .feature-section .feature-kicker::after{content:"配合生活節奏"}
.drmvpv2-courses .planning-section .feature-kicker::after{content:"從程度到持續調整"}
.drmvpv2-courses .feature-section .feature-kicker,.drmvpv2-courses .planning-section .feature-kicker{padding:6px 11px 6px 6px;border:1px solid #dae6f7;border-radius:17px;background:rgba(255,255,255,.82);box-shadow:0 9px 24px rgba(7,27,77,.055)}
.drmvpv2-courses #course-needs>div>h2{font-size:clamp(34px,3.15vw,48px);line-height:1.28;letter-spacing:-.025em}
@media(min-width:1200px){.drmvpv2-courses #course-needs .section-lead,.drmvpv2-courses .feature-section .section-lead,.drmvpv2-courses .planning-section .section-lead{max-width:none;white-space:nowrap}.drmvpv2-courses #course-needs .section-lead span,.drmvpv2-courses .feature-section .section-lead span,.drmvpv2-courses .planning-section .section-lead span{display:inline;white-space:inherit}}
.drmvpv2-courses .topic-intro{min-height:558px}
.drmvpv2-courses .topic-group{min-height:270px;padding:142px 24px 24px}
.drmvpv2-courses .topic-group::after{content:"";position:absolute;left:0;right:0;top:0;width:auto;height:118px;border:0;border-radius:25px 25px 0 0;background-image:linear-gradient(180deg,rgba(7,27,77,.02),rgba(7,27,77,.34)),var(--topic-image);background-repeat:no-repeat;background-size:cover;background-position:var(--topic-position,center);transform:none}
.drmvpv2-courses .topic-group:nth-child(1){--topic-image:url('./assets/P02_Hero_Main_Candidate_v2.webp');--topic-position:72% 34%}
.drmvpv2-courses .topic-group:nth-child(2){--topic-image:url('./assets/P02_Flexible_Learning_Morning_Candidate_v2.webp');--topic-position:28% 38%}
.drmvpv2-courses .topic-group:nth-child(3){--topic-image:url('./assets/P02_Need_Speaking_Candidate_v1.webp');--topic-position:45% 34%}
.drmvpv2-courses .topic-group:nth-child(4){--topic-image:url('./assets/P02_Grand_Hall_Online_Lecture_Candidate_v1.webp');--topic-position:55% 43%}
.drmvpv2-courses .topic-group .topic-symbol{margin-top:-25px;border:4px solid #fff;box-shadow:0 8px 20px rgba(7,27,77,.14)}
.drmvpv2-courses .topic-group h3{margin:10px 0 13px}
.drmvpv2-courses .topic-group ul{gap:7px}
.drmvpv2-courses .topic-group li{min-height:34px;padding:5px 11px}
.drmvpv2-courses .final .actions .line{display:none!important}
.drmvpv2-courses .floating{transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.drmvpv2-courses .floating.is-suppressed{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}
.drmvpv2-courses .mobile-cta.is-suppressed{display:none}
@media(max-width:1199px) and (min-width:768px){.drmvpv2-courses #course-needs .section-lead,.drmvpv2-courses .feature-section .section-lead,.drmvpv2-courses .planning-section .section-lead{max-width:none}.drmvpv2-courses .topic-intro{min-height:360px}.drmvpv2-courses .topic-group{min-height:260px}}
@media(max-width:767px){.drmvpv2-courses #course-needs .section-no{margin-bottom:14px}.drmvpv2-courses .feature-section .feature-kicker,.drmvpv2-courses .planning-section .feature-kicker{flex-wrap:wrap}.drmvpv2-courses .feature-section .feature-kicker::after,.drmvpv2-courses .planning-section .feature-kicker::after{margin-left:39px;margin-top:-7px}.drmvpv2-courses .topic-intro{min-height:390px}.drmvpv2-courses .topic-group{min-height:248px;padding:136px 20px 20px}.drmvpv2-courses .topic-group::after{height:112px}.drmvpv2-courses .topic-group .topic-symbol{margin-top:-23px}}
.drmvpv2-courses #course-needs .section-no{position:relative;display:inline-flex;align-items:center;gap:11px;min-height:46px;margin:0 0 18px;padding:6px 11px 6px 49px;border:1px solid #dae6f7;border-radius:17px;background:rgba(255,255,255,.82);color:var(--blue);box-shadow:0 9px 24px rgba(7,27,77,.055);font-size:17px;font-weight:900;letter-spacing:.1em;line-height:1.25;background-image:none}
.drmvpv2-courses #course-needs .section-no::before{content:"";position:absolute;left:6px;top:6px;width:32px;height:32px;border-radius:11px;background:radial-gradient(circle at 14px 14px,transparent 0 5px,var(--blue) 5.5px 8px,transparent 8.5px),linear-gradient(135deg,transparent 0 64%,var(--yellow) 65% 71%,transparent 72%),#e7f1ff;box-shadow:none}
.drmvpv2-courses #course-needs .section-no::after{content:"依需求選擇";display:inline-flex;align-items:center;min-height:28px;margin:0 0 0 2px;padding:3px 10px;border:1px solid #d5e4f8;border-radius:999px;background:#fff;color:#6980a3;font-size:11px;font-weight:800;letter-spacing:.035em}
.drmvpv2-courses .topic-group:nth-child(1){--topic-image:url('./assets/P02_Topic_Workplace_Application_v2.webp');--topic-position:50% 43%}
.drmvpv2-courses .topic-group:nth-child(2){--topic-image:url('./assets/P02_Topic_Life_Communication_v1.webp');--topic-position:50% 45%}
.drmvpv2-courses .topic-group:nth-child(3){--topic-image:url('./assets/P02_Topic_Test_Goals_v1.webp');--topic-position:50% 43%}
.drmvpv2-courses .topic-group:nth-child(4){--topic-image:url('./assets/P02_Topic_Skill_Building_v1.webp');--topic-position:50% 46%}
@media(max-width:767px){.drmvpv2-courses #course-needs .section-no{flex-wrap:wrap}.drmvpv2-courses #course-needs .section-no::after{margin-left:39px;margin-top:-7px}}
