/* ============================================================
   버숑에듀 공통 스타일 (클린 에듀 · 밝은 흰색 고정 · 모바일 우선)
   ★다크모드 미사용. 브랜드: 민트 #12b0b1 / 코랄 #f85a5a
   ============================================================ */
:root{
  --bg:#ffffff; --alt:#eefafa; --surface:#ffffff; --fg:#13242c; --muted:#5a6d74; --line:#e4eef0; --line2:#d6e6e7;
  --mint:#12b0b1; --mint-deep:#0c8c8d; --mint-bright:#28cdce; --coral:#f85a5a; --ink:#0f1e25;
  --green:#1b9e6a; --green-soft:#e7f7ef; --amber:#e8930c;
  --card-sh:0 10px 30px rgba(16,40,46,.10); --rad:16px; --maxw:1260px;
  --disp:"Noto Sans KR",sans-serif; --body:"Noto Sans KR",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.02em;word-break:keep-all}
p{margin:0;word-break:keep-all}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.gut{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.inner{max-width:var(--maxw);margin:0 auto;width:100%}
[hidden]{display:none!important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--body);font-weight:800;
  font-size:15px;border-radius:12px;padding:13px 22px;border:none;cursor:pointer;white-space:nowrap;min-height:48px;
  transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.primary{background:var(--mint);color:#fff}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--line2)}
.btn.sm{font-size:13.5px;padding:10px 16px;min-height:42px;border-radius:10px}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* 헤더 */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:16px;height:64px}
.brand{font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:-.03em}
.brand b{color:var(--mint)}
.nav{display:flex;gap:24px;margin-left:12px;font-weight:600;font-size:15px;color:var(--muted)}
.nav a:hover{color:var(--fg)}
.hsp{flex:1}
.hact{display:flex;align-items:center;gap:10px}
.login{font-weight:700;font-size:14px;color:var(--muted)}
.login:hover{color:var(--fg)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);align-items:center;justify-content:center}
.burger svg{width:20px;height:20px;stroke:var(--fg)}
@media (max-width:820px){.nav{display:none}.login{display:none}.burger{display:inline-flex}}
.mmenu{display:none;flex-direction:column;background:var(--surface);border-top:1px solid var(--line)}
.mmenu.open{display:flex}
.mmenu a,.mmenu button{display:block;width:100%;text-align:left;padding:14px 20px;font-weight:700;font-size:15px;color:var(--fg);background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer}
.mmenu .mm-out{color:var(--muted)}
@media (min-width:821px){.mmenu,.burger{display:none!important}}

/* 히어로 */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-8%;top:-26%;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--mint-bright) 26%,transparent),transparent 62%);pointer-events:none;max-width:100%}
.hwrap{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center;padding-block:60px 54px;position:relative}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--mint-deep);background:color-mix(in srgb,var(--mint) 13%,transparent);padding:8px 14px;border-radius:999px}
.pill svg{width:14px;height:14px;stroke:var(--mint-deep)}
.htitle{font-family:var(--disp);font-weight:900;font-size:clamp(32px,5.6vw,52px);line-height:1.12;margin:18px 0 16px}
.htitle em{font-style:normal;color:var(--mint)}
.hsub{font-size:clamp(15px,2.3vw,17px);color:var(--muted);max-width:30ch;margin-bottom:30px;line-height:1.7}
.hcta{display:flex;gap:12px;flex-wrap:wrap}
.htrust{display:flex;gap:30px;margin-top:32px;flex-wrap:wrap}
.htrust b{display:block;font-family:var(--disp);font-weight:900;font-size:23px;color:var(--fg);font-variant-numeric:tabular-nums}
.htrust span{font-size:12.5px;color:var(--muted)}
.hvis{position:relative}
.playcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--card-sh);padding:14px;max-width:460px;margin-left:auto;width:100%}
.playcard .screen{position:relative;border-radius:14px;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,var(--mint-bright),var(--mint-deep))}
.playcard .pbtn{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.playcard .pbtn svg{width:23px;height:23px;fill:var(--mint-deep);margin-left:3px}
.playcard .scap{position:absolute;left:14px;bottom:14px;z-index:2;color:#fff}
.playcard .scap b{font-weight:800;font-size:15px}
.playcard .scap span{font-size:12px;opacity:.9}
.playcard .meta{display:flex;align-items:center;gap:8px;padding:12px 6px 4px}
.playcard .meta .cat{font-size:12px;font-weight:800;color:var(--mint-deep);background:color-mix(in srgb,var(--mint) 13%,transparent);padding:4px 9px;border-radius:7px}
.playcard .meta .dur{font-size:12.5px;color:var(--muted);margin-left:auto}
@media (max-width:880px){.hwrap{grid-template-columns:1fr;gap:34px;padding-block:40px 44px}.playcard{margin:0 auto}.hvis{order:-1}}

/* 섹션 공통 */
section{scroll-margin-top:84px}
.band{padding-block:62px}
.band.alt{background:var(--alt)}
.shead{max-width:56ch;margin:0 0 32px}
.shead h2{font-family:var(--disp);font-weight:900;font-size:clamp(24px,3.8vw,34px);margin:0 0 12px}
.shead p{color:var(--muted);font-size:15.5px}
.ccount{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:700;color:var(--mint-deep);background:color-mix(in srgb,var(--mint) 12%,transparent);padding:8px 15px;border-radius:999px}
.ccount svg{width:16px;height:16px;stroke:var(--mint-deep)}

/* 강의 그리드 */
.courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:22px}
.course{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}
.course:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--card-sh)}
.course .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,#2ecccd,#0e8a8b)}
.course .thumb .lv{position:absolute;top:11px;left:11px;z-index:2;font-size:11px;font-weight:800;color:#fff;background:rgba(15,30,37,.5);padding:4px 10px;border-radius:7px}
.course .thumb .hot{position:absolute;top:11px;right:11px;z-index:2;font-size:11px;font-weight:800;color:#fff;background:var(--coral);padding:4px 10px;border-radius:7px}
.course .thumb .pl{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:2;opacity:0;transition:opacity .18s ease}
.course .thumb .pl svg{width:17px;height:17px;fill:var(--mint-deep);margin-left:2px}
.course:hover .thumb .pl{opacity:1}
.course .cbody{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.course .cbody h3{font-size:17px;font-weight:800;margin-bottom:6px}
.course .cbody .desc{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:11px}
.course .cbody .cmeta{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:13px}
.course .cbody .cmeta svg{width:14px;height:14px;stroke:var(--mint);flex:none}
.course .cbody .cbuy{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.course .cbody .price{font-family:var(--disp);font-weight:900;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.course .cbody .price b{font-size:12px;font-weight:700;color:var(--muted);margin-left:2px}
.course .cbody .price.free{color:var(--mint-deep,#0aa08c)}
.course .cbody .go{margin-left:auto;color:var(--mint-deep);font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:3px}
.course .cbody .go svg{stroke:var(--mint-deep);width:14px;height:14px}
.gridnote{margin-top:16px;font-size:12px;color:var(--muted)}
.allbtn{margin-top:30px}

/* 왜 버숑에듀 */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:18px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:24px 22px}
.feat .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--mint) 13%,transparent);margin-bottom:15px}
.feat .ic svg{width:24px;height:24px;stroke:var(--mint-deep)}
.feat h3{font-size:17px;font-weight:800;margin-bottom:7px}
.feat p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* 수강 3단계 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:26px 22px}
.step .n{font-family:var(--disp);font-weight:900;font-size:15px;color:var(--mint);letter-spacing:.06em}
.step h3{font-size:18px;font-weight:800;margin:9px 0 7px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.55}
@media (max-width:720px){.steps{grid-template-columns:1fr}}

/* CTA 밴드 */
.cta-band{background:linear-gradient(120deg,var(--mint-deep),var(--mint-bright));color:#fff;border-radius:24px;padding:48px 36px;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-6%;bottom:-40%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 62%);max-width:100%}
.cta-band h2{font-family:var(--disp);font-weight:900;font-size:clamp(23px,3.6vw,32px);margin-bottom:10px;position:relative}
.cta-band p{opacity:.95;font-size:15.5px;margin-bottom:24px;position:relative}
.cta-band .btn{position:relative;background:#fff;color:var(--mint-deep)}
.cta-band .btn.out{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.cta-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 푸터 */
footer.site{border-top:1px solid var(--line);background:var(--alt);padding-block:36px 42px}
.frow{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}
.fbrand .brand{font-size:20px}
.fbrand p{font-size:12.5px;color:var(--muted);margin-top:8px;max-width:34ch;line-height:1.6}
.fnav{display:flex;gap:46px;flex-wrap:wrap}
.fcol h4{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.fcol a{display:block;font-size:13.5px;color:var(--fg);opacity:.82;margin-bottom:9px}
.fcol a:hover{opacity:1;color:var(--mint-deep)}
.fnote{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.7}

/* 모바일: 전부 가운데 정렬 */
@media (max-width:640px){
  .hwrap{text-align:center}
  .pill,.hsub{margin-left:auto;margin-right:auto}
  .hcta,.htrust{justify-content:center}
  .htrust{gap:24px}
  .shead{margin-left:auto;margin-right:auto;text-align:center}
  .shead p{margin-left:auto;margin-right:auto}
  .allbtn,.gridnote{text-align:center}
  .feat,.step{text-align:center}
  .feat .ic{margin-left:auto;margin-right:auto}
  .frow{justify-content:center;text-align:center}
  .fbrand p{margin-left:auto;margin-right:auto}
  .fnav{justify-content:center;gap:36px}
  .band{padding-block:48px}
}