@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

/* ═══════ 공통 축 ═══════ */
:root{
  --navy:#11203F; --navy-2:#1B3260; --navy-deep:#0E1C3A;
  --paper:#F4F1EA; --cream:#FBF8F1; --card:#FFFFFF; --line:#E3DDD0; --line-2:#ECEAE3;
  --ink:#1D2330; --muted:#6B7280; --muted-2:#5B6577; --faint:#8A93A6;
  --ice:#C3CDE0; --ice-2:#9FB0CC;
  --g-humanities:#5C6BC0; --g-social:#C2702B; --g-science:#2E8B6B; --g-engineer:#2E75B6;
  --g-medical:#C0497B; --g-education:#1F7A8C; --g-arts:#9C5BB0;
  --shadow-sm:0 1px 2px rgba(17,32,63,.06), 0 8px 24px rgba(17,32,63,.06);
  --shadow:0 12px 34px rgba(20,30,50,.08);
  --r-sm:10px; --r:12px; --r-md:14px; --r-lg:20px;
  --max:1240px;
}
/* ═══════ 브랜드 축 — 기본 = 에듀케레(코랄) ═══════ */
:root{
  --accent:#E8714E; --accent-soft:#F0997B; --accent-ink:#B34420;
  --accent-tint:rgba(232,113,78,.22); --accent-shadow:rgba(179,68,32,.30);
}
[data-brand="orda"]{
  --accent:#E8A93C; --accent-soft:#F4B942; --accent-ink:#8A6008;
  --accent-tint:rgba(232,169,60,.24); --accent-shadow:rgba(138,96,8,.28);
}
[data-brand="hub"]{
  --accent:#2D7D65; --accent-soft:#4DA084; --accent-ink:#2A7360;
  --accent-tint:rgba(45,125,101,.20); --accent-shadow:rgba(42,115,96,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:4.5rem}
body{margin:0; font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.6; letter-spacing:-.025em;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; word-break:keep-all; text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,62px); line-height:1.14; letter-spacing:-.05em}
h2{font-size:clamp(24px,3vw,30px); line-height:1.25; font-weight:700}
h3{font-size:18px; font-weight:700}
p{margin:0; color:var(--muted)}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}
.wrap{width:min(var(--max),calc(100% - 44px)); margin:0 auto}

/* ═══════ 상표 락업 ═══════ */
.lockup{display:inline-flex; flex-direction:column; line-height:1; gap:5px}
.lockup .house{font-size:9px; font-weight:800; letter-spacing:.24em; color:var(--muted)}
.lockup .mark{font-size:21px; font-weight:900; letter-spacing:-.035em; color:var(--navy)}
.lockup .mark .en{font-size:.62em; font-weight:800; letter-spacing:.04em; color:var(--muted-2); margin-left:7px}
.lockup.on-navy .house{color:rgba(255,255,255,.60)}
.lockup.on-navy .mark{color:#fff}
.lockup.on-navy .mark .en{color:var(--ice-2)}
.lockup.lg .mark{font-size:27px}
.lockup.xl .mark{font-size:clamp(28px,3.6vw,38px)}
.tm{font-size:.5em; vertical-align:super; font-weight:700; opacity:.65; letter-spacing:0; margin-left:1px}

/* ═══════ 헤더 + 7계열 띠 ═══════ */
.edu-header{position:relative; background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff}
.edu-header::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,
    var(--g-humanities) 0 14.3%, var(--g-social) 14.3% 28.6%, var(--g-science) 28.6% 42.9%,
    var(--g-engineer) 42.9% 57.2%, var(--g-medical) 57.2% 71.5%, var(--g-education) 71.5% 85.8%,
    var(--g-arts) 85.8%)}
.edu-header .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0}
.edu-header nav{display:flex; align-items:center; gap:22px; font-size:14px; font-weight:600}
.edu-header nav a{color:rgba(255,255,255,.86)}
.edu-header nav a:hover{color:#fff}

/* ═══════ 버튼 ═══════ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:13px 26px; border:0; border-radius:var(--r-md);
  font-size:15px; font-weight:900; cursor:pointer; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn.accent{background:var(--accent-ink); color:#fff; box-shadow:0 14px 30px var(--accent-shadow)}
.btn.accent:hover{transform:translateY(-2px); box-shadow:0 18px 38px var(--accent-shadow)}
.btn.ghost{min-height:44px; padding:11px 20px; font-size:14px; border-radius:var(--r);
  background:#fff; color:var(--navy); border:1px solid var(--line-2); box-shadow:none}
.btn.ghost:hover{transform:translateY(-2px); background:var(--cream); border-color:#DCCFB7}
.btn.sm{min-height:42px; padding:10px 20px; font-size:14px; border-radius:var(--r)}
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.edu-header .btn.ghost{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.28)}
.edu-header .btn.ghost:hover{background:rgba(255,255,255,.18)}

/* ═══════ 히어로 ═══════ */
.hero{background:var(--navy-deep); color:#fff; text-align:center; padding:84px 0 72px}
.hero h1{margin-bottom:20px}
.hero h1 span{color:var(--accent)}
.hero .lead{max-width:640px; margin:0 auto; color:var(--ice); font-size:17px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ice);
  font-weight:600; margin-bottom:18px}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-tint)}
.hero-cta{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ═══════ 자기증명 스트립 ═══════ */
.proof{background:var(--navy); color:#fff; padding:32px 0; border-top:1px solid rgba(255,255,255,.10)}
.proof-in{display:grid; grid-template-columns:1.25fr 1fr; gap:30px; align-items:center}
.proof h2{font-size:clamp(19px,2.2vw,23px); line-height:1.35; margin-bottom:9px}
.proof p{color:var(--ice); font-size:14.5px; line-height:1.7}
.proof-pts{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.proof-pts li{position:relative; padding-left:20px; font-size:13.5px; color:var(--ice)}
.proof-pts li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:2px; background:var(--accent)}

/* ═══════ 섹션 ═══════ */
section{padding:72px 0}
.sec-cream{background:var(--cream)}
.sec-white{background:#fff}
.sec-head{max-width:680px; margin-bottom:36px}
.sec-head .kicker{font-size:12.5px; font-weight:800; letter-spacing:.14em; color:var(--accent-ink);
  margin-bottom:11px}
.sec-head p{margin-top:13px; font-size:15.5px}
.paper-wash{background:radial-gradient(1100px 480px at 82% -12%, rgba(46,117,182,.09), transparent 60%), var(--paper)}

/* ═══════ 문제 선택 (첫 갈림길) ═══════ */
.fork{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.fork-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; position:relative;
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease}
.fork-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent)}
.fork-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.fork-card .quote{font-size:clamp(17px,2vw,20px); font-weight:700; color:var(--navy); line-height:1.45}
.fork-card .to{font-size:13px; color:var(--muted); margin-top:auto}
.fork-card .go{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:800;
  color:var(--accent-ink)}
.fork-card .go::after{content:"→"; transition:transform .18s ease}
.fork-card:hover .go::after{transform:translateX(3px)}

/* ═══════ 제품 섹션 ═══════ */
.prod-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:10px}
.tagline{font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--accent-ink)}
.promise{background:var(--navy); color:#fff; border-radius:var(--r-md); padding:17px 22px;
  font-size:15.5px; font-weight:700; margin:20px 0 30px; line-height:1.5}
.promise span{color:var(--accent)}

/* 옵션 3종 */
.opts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.opt{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease}
.opt:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.opt.pick{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint), var(--shadow-sm)}
.opt .tag{font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; align-self:flex-start;
  background:#F1EDE4; color:#8A7B5E; border:1px solid var(--line)}
.opt.pick .tag{background:var(--accent-tint); color:var(--accent-ink); border-color:transparent}
.opt h4{font-size:17px}
.opt .what{font-size:13.5px; line-height:1.65; color:var(--muted)}
.opt ul{margin:0; padding-left:16px; color:var(--muted); font-size:13px; line-height:1.75}
.opt ul li::marker{color:var(--accent)}
.opt .foot{margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.opt .price{font-size:13.5px; font-weight:800; color:var(--navy); white-space:nowrap}
.opt .price:empty{display:none}

/* 구매 후 첫 화면 */
.first{margin-top:32px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 26px}
.first h3{font-size:15px; margin-bottom:4px}
.first .sub{font-size:13px; margin-bottom:16px}
.steps{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap}
.step{flex:1 1 180px; background:var(--cream); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:15px 17px}
.step .n{font-size:10.5px; font-weight:800; letter-spacing:.12em; color:var(--accent-ink); margin-bottom:6px}
.step strong{display:block; font-size:14.5px; color:var(--navy); margin-bottom:4px}
.step span{font-size:12.5px; color:var(--muted); line-height:1.6}

/* ═══════ 기관 ═══════ */
.founding{display:grid; grid-template-columns:1.05fr 1fr; gap:26px; align-items:start}
.terms{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.terms li{position:relative; padding-left:24px; font-size:14px; color:var(--muted-2); line-height:1.6}
.terms li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent-ink); font-weight:900}
.notice{background:var(--cream); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--r-sm); padding:16px 19px; font-size:14px; color:var(--muted-2); line-height:1.7}
.notice strong{color:var(--navy)}

/* ═══════ 폼 ═══════ */
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--shadow-sm)}
.frow{display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-bottom:13px}
.field label{display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px}
.field label .req{color:var(--accent-ink); margin-left:3px}
.field input,.field select,.field textarea{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--cream); color:var(--ink); font-size:14.5px}
.field textarea{min-height:92px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint); background:#fff}
.form-note{font-size:12.5px; color:var(--faint); margin-top:12px; line-height:1.6}
.consent{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--muted-2); margin:4px 0 16px}
.consent input{width:16px; height:16px; margin-top:3px; flex:none; accent-color:var(--navy)}

/* ═══════ 브랜드 언어 ═══════ */
.cloud{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:6px 20px; max-width:920px; margin:0 auto; line-height:1.25}
.cloud span{font-weight:900; letter-spacing:-.035em; color:var(--navy); white-space:nowrap}
.cloud .s1{font-size:clamp(26px,4.4vw,46px)}
.cloud .s2{font-size:clamp(19px,3vw,31px)}
.cloud .s3{font-size:clamp(15px,2.1vw,21px); font-weight:800}
.cloud .s4{font-size:clamp(12px,1.5vw,15px); font-weight:700; letter-spacing:.02em}
.cloud .c1{color:var(--accent-ink)}
.cloud .c2{color:#4A6591}
.cloud .c3{color:var(--muted)}

/* ═══════ FAQ ═══════ */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 0; font-weight:700; font-size:15.5px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; color:var(--accent-ink); font-weight:900; flex:none; transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px; font-size:14.5px; color:var(--muted); line-height:1.75; max-width:94%}

/* ═══════ 푸터 ═══════ */
footer{background:var(--navy-deep); color:var(--ice); padding:50px 0 38px; font-size:13.5px}
footer .cols{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; margin-bottom:30px}
footer h4{color:#fff; font-size:13px; letter-spacing:.06em; margin-bottom:12px}
footer ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
footer a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.13); padding-top:22px; display:grid; gap:9px;
  font-size:12.5px; color:var(--ice-2); line-height:1.7}
.legal .tmline{color:var(--ice)}

@media (max-width:900px){
  .proof-in{grid-template-columns:1fr; gap:18px}
  .opts{grid-template-columns:1fr}
  .founding{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 28px)}
  .fork{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .edu-header nav a:not(.btn){display:none}
  section{padding:54px 0}
  .cloud{gap:4px 14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}
/* ═══════ 묶음 상품 띠 ═══════ */
.bundle{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;
  border-radius:var(--r-lg);padding:30px 32px;margin-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.bundle .b-l{flex:1 1 320px;min-width:0}
.bundle .b-tag{display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.05em;
  padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;margin-bottom:12px}
.bundle h3{color:#fff;font-size:20px;margin:0 0 9px}
.bundle p{color:var(--ice);font-size:14.5px;line-height:1.65;margin:0}
.bundle .b-r{flex:0 0 auto;text-align:right}
.bundle .b-was{font-size:14px;color:var(--ice-2);text-decoration:line-through;margin:0 0 3px}
.bundle .b-now{font-size:30px;font-weight:900;color:#fff;letter-spacing:-.03em;margin:0;line-height:1.1}
.bundle .b-per{font-size:13px;color:var(--ice-2);margin:5px 0 15px}
.bundle .b-save{display:inline-block;font-size:12.5px;font-weight:800;color:var(--navy);
  background:#fff;padding:4px 10px;border-radius:999px;margin-bottom:14px}
@media (max-width:640px){
  .bundle{padding:26px 22px}
  .bundle .b-r{text-align:left;flex:1 1 100%}
}

/* 네이비 띠 위에서는 흰 버튼이 대비가 훨씬 높다 (초록·코랄 잉크는 네이비와 붙는다) */
.bundle .btn.accent{background:#fff;color:var(--navy);box-shadow:0 14px 30px rgba(0,0,0,.24)}
.bundle .btn.accent:hover{background:#fff;transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.3)}

/* ═══════ 허브 — 제품 소개 아래 대상별 경로 ═══════ */
.opts-go{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:22px}
.opts-go .go-card{display:block;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:20px 22px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.opts-go .go-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-tint)}
.opts-go .go-card strong{display:flex;align-items:center;gap:7px;font-size:15.5px;color:var(--navy);margin-bottom:5px}
.opts-go .go-card strong::after{content:"→";color:var(--accent-ink);transition:transform .18s ease}
.opts-go .go-card:hover strong::after{transform:translateX(3px)}
.opts-go .go-card span{font-size:13px;color:var(--muted);line-height:1.55}