/* =========================================================================
   site.css — 휘스쿨 랜딩 디자인 시스템
   -------------------------------------------------------------------------
   toeic.wheeschool.com 의 스타일을 그대로 옮겨 왔습니다.
   같은 회사 상품이므로 디자인을 새로 그리지 않습니다 —
   토익을 본 사람이 일본어 페이지에 와도 같은 브랜드로 읽혀야 합니다.

   토익 쪽 index.html 의 <style> 블록이 원본입니다.
   그쪽 디자인을 고치면 여기도 같이 고쳐야 합니다.
   ========================================================================= */

/* ---------- Reset & tokens ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#101418;            /* 본문 잉크 (렉서스풍 소프트 블랙) */
  --ink-soft:#4b5563;
  --paper:#ffffff;
  --line:#e2e5e9;
  --dark:#0b0e13;           /* 다크 섹션 배경 */
  --blue:#2b4ea2;           /* 휘스쿨 로고 블루 — 포인트로만 */
  --header-h:76px;
  --disp:"Helvetica Neue","Segoe UI",Arial,sans-serif;                 /* 영문 디스플레이 */
  --body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Segoe UI",sans-serif;
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:var(--header-h)}
body{font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none}

/* ---------- 레이아웃 컨테이너 ----------
   좌우 여백(거터)의 기준. 이 규칙이 없으면 .wrap 이 화면 끝까지 붙어
   좌우가 빽빽해집니다. study.css·aipt.css·voca.css 등과 동일한 값입니다. */
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:800px}
.wrap--wide{max-width:1240px}

/* 렉서스풍 디스플레이 타이포 */
.disp{font-family:var(--disp);font-weight:200;letter-spacing:.04em;text-transform:uppercase;line-height:1.04}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--disp);font-weight:400;font-size:13px;letter-spacing:.28em;text-transform:uppercase}
.eyebrow::after{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.6}

/* 사각 아웃라인 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:180px;height:52px;padding:0 34px;
  border:1px solid currentColor;font-size:15px;font-weight:500;letter-spacing:.06em;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--light{color:#fff}
.btn--light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--solid{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--white{background:#fff;border-color:#fff;color:var(--ink);font-weight:600}
.btn--white:hover{background:transparent;border-color:#fff;color:#fff}
.hero-free{margin-top:20px;font-size:14.5px;font-weight:400;letter-spacing:-.01em;
  color:rgba(255,255,255,.72)}
.hero-free b{font-weight:600;color:#fff}
.btn--solid:hover{background:transparent;color:var(--ink)}

/* 언더라인 텍스트 링크 */
.tlink{display:inline-block;font-size:16px;font-weight:500;letter-spacing:.02em;
  border-bottom:1px solid currentColor;padding-bottom:4px;transition:opacity .2s}
.tlink:hover{opacity:.55}

/* 스크롤 페이드인 */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}

/* ---------- Header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;gap:40px;padding:0 40px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  transition:box-shadow .3s}
.hd.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(16,20,24,.06)}
.hd-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hd-logo img{height:44px;width:auto}
.hd-logo span{font-family:var(--disp);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft)}
.hd-nav{display:flex;gap:34px;margin:0 auto}
.hd-nav a{font-size:15.5px;font-weight:600;letter-spacing:.01em;padding:6px 2px;position:relative}
.hd-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ink);transition:right .25s ease}
.hd-nav a:hover::after{right:0}
.hd-util{display:flex;align-items:center;gap:26px;flex:0 0 auto}
.hd-util a{font-size:13.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-soft)}
.hd-util a:hover{color:var(--ink)}
.hd-util a.em{color:var(--ink);font-weight:700}
/* 언어 선택 드롭다운 (렉서스풍 미니멀) */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 4px;
  font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--ink-soft)}
.lang-btn:hover{color:var(--ink)}
.lang-caret{font-size:9px;transition:transform .2s}
.lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:120px;list-style:none;
  background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(16,20,24,.1);
  display:none;z-index:110}
.lang.open .lang-menu{display:block}
.lang-menu li{padding:11px 16px;font-size:13.5px;font-weight:500;cursor:pointer}
.lang-menu li:hover{background:var(--ink);color:#fff}
.lang-menu li.on{font-weight:700}
.hd-join{display:inline-flex;align-items:center;height:38px;padding:0 20px;
  border:1px solid var(--ink);color:var(--ink) !important;font-weight:700 !important;
  transition:background .25s,color .25s}
.hd-join:hover{background:var(--ink);color:#fff !important}
.hd-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.hd-burger span{width:22px;height:1.5px;background:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;
  background:var(--dark)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
/* [REPLACE] assets/hero.jpg — 브랜드 키비주얼로 교체 (권장 2400×1350↑, 어두운 톤) */
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.04);animation:heroIn 2.4s ease forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(75deg,rgba(5,8,14,.82) 0%,rgba(5,8,14,.45) 46%,rgba(5,8,14,.15) 100%)}
.hero-in{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto;padding:120px 64px 90px}
.hero .eyebrow{color:rgba(255,255,255,.85);margin-bottom:34px}
.hero h1{font-size:clamp(44px,7.2vw,104px);margin-bottom:30px}
.hero h1 em{font-style:normal;font-weight:200;text-transform:none;letter-spacing:.02em}
.hero-kw{display:block;margin-top:18px;font-family:var(--body);font-weight:500;
  font-size:clamp(18px,2vw,26px);letter-spacing:-.01em;text-transform:none;
  color:rgba(255,255,255,.92)}
.hero-sub{font-size:clamp(17px,1.6vw,22px);font-weight:300;line-height:1.75;color:rgba(255,255,255,.92);margin-bottom:52px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:1;
  width:1px;height:56px;overflow:hidden}
.hero-scroll::before{content:"";position:absolute;left:0;top:-56px;width:1px;height:56px;background:#fff;
  animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%{top:-56px}55%{top:56px}100%{top:56px}}

/* ---------- Early Bird ---------- */
.earlybird{padding:100px 24px 96px;text-align:center;background:#0b0e13;color:#fff}
.earlybird .eyebrow{justify-content:center;color:#9aa3b0;margin-bottom:18px}
.earlybird .eyebrow::before{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.6}
.earlybird h2{font-size:clamp(28px,4vw,46px);margin-bottom:10px;max-width:760px;margin-left:auto;margin-right:auto}
.eb-sub{font-size:16px;color:#c3c8d1;margin-bottom:48px}
.eb-card{max-width:480px;margin:0 auto;padding:48px 40px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.eb-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:20px}
.eb-amount{font-family:var(--disp);font-weight:200;font-size:58px;letter-spacing:-.01em}
.eb-amount small{font-size:26px;font-weight:300;margin-left:4px}
.eb-per{font-size:16px;color:#9aa3b0}
.eb-desc{font-size:15px;line-height:1.7;color:#c3c8d1;margin-bottom:28px}
.eb-points{list-style:none;text-align:left;margin:0 0 34px;display:flex;flex-direction:column;gap:12px}
.eb-points li{font-size:14.5px;color:#e6e9ee;padding-left:22px;position:relative}
.eb-points li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:1px;background:#fff;opacity:.7}
.eb-cta{width:100%;background:#fff;border-color:#fff;color:var(--ink);min-width:0}
.eb-cta:hover{background:transparent;color:#fff}
.eb-free{margin-top:16px;font-size:14px;color:#c3c8d1;letter-spacing:-.01em}
.eb-free b{color:#fff;font-weight:600}
.eb-deadline{margin-top:20px;font-size:12.5px;color:#8b93a1;line-height:1.6}
.eb-bugnote{margin-top:40px;font-size:13.5px;color:#9aa3b0;line-height:1.7;max-width:560px;margin-left:auto;margin-right:auto}
.eb-bugnote a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Line-up (세트 캐러셀) ---------- */
.lineup{padding:110px 0 96px;text-align:center;overflow:hidden}
.lineup .eyebrow{justify-content:center;color:var(--ink-soft);margin-bottom:18px}
.lineup .eyebrow::before{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.6}
.lineup h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:8px}
.lineup-sub{font-size:16px;color:var(--ink-soft);margin-bottom:64px}
.car-stage{position:relative;max-width:1100px;margin:0 auto}
.car-track{display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.car-slide{flex:0 0 100%;padding:0 20px}
.set-no{font-family:var(--disp);font-weight:200;font-size:clamp(72px,13vw,170px);letter-spacing:.02em;line-height:1;
  background:linear-gradient(180deg,var(--ink) 55%,rgba(16,20,24,.25));-webkit-background-clip:text;background-clip:text;color:transparent}
.set-name{font-size:clamp(17px,1.7vw,21px);font-weight:700;margin:18px 0 6px}
.set-meta{font-size:14.5px;color:var(--ink-soft);letter-spacing:.03em}
.car-arrow{position:absolute;top:38%;transform:translateY(-50%);width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;
  transition:border-color .2s}
.car-arrow:hover{border-color:var(--ink)}
.car-arrow svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.4;fill:none}
.car-prev{left:-6px}.car-next{right:-6px}
.lineup-cta{display:flex;justify-content:center;gap:14px;margin:56px 0 34px;flex-wrap:wrap}
.car-page{font-family:var(--disp);font-weight:300;font-size:17px;letter-spacing:.14em}
.car-page b{font-weight:400}

/* ---------- EXPERIENCE (풀블리드) ---------- */
.exp{position:relative;min-height:72svh;display:flex;align-items:center;color:#fff;background:var(--dark)}
/* [REPLACE] assets/experience.jpg */
.exp-bg{position:absolute;inset:0}
.exp-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.exp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,14,.7),rgba(5,8,14,.25))}
.exp-in{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto;padding:110px 64px;
  display:flex;align-items:baseline;gap:40px;flex-wrap:wrap}
.exp h2{font-size:clamp(56px,9vw,128px)}
.exp .tlink{color:#fff;font-size:17px}

/* ---------- 2-up 스플릿 카드 ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr}
.duo-card{position:relative;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;color:#fff;padding:88px 40px 0;overflow:hidden;background:var(--dark)}
.duo-bg{position:absolute;inset:0}
.duo-bg img{width:100%;height:100%;object-fit:cover;opacity:.42;transition:transform .8s ease,opacity .4s}
.duo-card:hover .duo-bg img{transform:scale(1.045);opacity:.5}
.duo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,14,.55),rgba(5,8,14,.4))}
.duo-card>*{position:relative;z-index:1}
.duo-card h3{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.01em;margin-bottom:18px}
.duo-card p{font-size:16px;line-height:1.75;font-weight:300;color:rgba(255,255,255,.9);max-width:420px;margin-bottom:30px}

/* ---------- 숫자 밴드 ---------- */
.stats{padding:110px 40px;border-bottom:1px solid var(--line)}
.stats-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
.stat b{display:block;font-family:var(--disp);font-weight:200;font-size:clamp(40px,4.6vw,64px);letter-spacing:.02em;margin-bottom:10px}
.stat span{font-size:14.5px;letter-spacing:.08em;color:var(--ink-soft)}

/* ---------- TOEFL 크로스 ---------- */
/* VOCA — 51세트 다음에 붙는 별도 상품 띠.
   섹션을 새로 디자인하지 않습니다. .cmp(비교표) 와 같은 밝은 배경에
   왼쪽 글 / 오른쪽 숫자 두 칸으로만 둡니다. 상품이 둘이라는 게
   한눈에 보이면 충분하고, 여기서 화려해지면 51세트가 묻힙니다. */
.voca{background:var(--faint);padding:104px 40px}
.voca-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.voca .eyebrow{color:var(--ink-soft);margin-bottom:18px}
.voca h2{font-size:clamp(28px,3.8vw,44px);letter-spacing:-.03em;margin-bottom:16px}
.voca p{font-size:15.5px;color:var(--ink-soft);line-height:1.75;max-width:520px}
.voca-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.voca-num{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.voca-num div{background:#fff;padding:26px 22px}
.voca-num b{display:block;font-family:var(--disp);font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.02em}
.voca-num span{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft)}
@media (max-width:900px){
  .voca{padding:64px 20px}
  .voca-in{grid-template-columns:1fr;gap:36px}
  .voca-cta a{flex:1 1 100%}
}
.cross{padding:120px 40px;text-align:center}
.cross .eyebrow{justify-content:center;color:var(--ink-soft);margin-bottom:22px}
.cross .eyebrow::before{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.6}
.cross h2{font-size:clamp(26px,3vw,40px);font-weight:300;letter-spacing:-.01em;line-height:1.5;margin-bottom:14px}
.cross p{font-size:16px;color:var(--ink-soft);margin-bottom:42px}
/* 대학 파트너 밴드 */
.univ{margin:0 auto 46px;padding:38px 32px;max-width:720px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.univ-title{font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--ink);margin-bottom:26px !important}
.univ-logos{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap}
.univ-logos img{height:44px;width:auto;filter:grayscale(1);opacity:.75;transition:filter .25s,opacity .25s}
.univ-logos img:hover{filter:none;opacity:1}
.univ-refs{list-style:none;margin:26px auto 0;padding:0;max-width:560px;
  display:flex;flex-direction:column;gap:9px}
.univ-refs li{font-size:13.5px;line-height:1.6;color:var(--ink-soft);
  padding-left:16px;position:relative;text-align:left}
.univ-refs li::before{content:"";position:absolute;left:0;top:10px;
  width:8px;height:1px;background:var(--ink);opacity:.5}
.univ-refs b{color:var(--ink);font-weight:600}
@media(max-width:600px){.univ-refs li{font-size:12.5px}}

/* ---------- AI 스터디 PT ---------- */
.aipt{background:var(--dark);color:#fff;text-align:center;padding:130px 40px 120px}
.aipt .eyebrow{justify-content:center;color:rgba(255,255,255,.85);margin-bottom:22px}
.aipt .eyebrow::before{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.6}
.aipt h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:22px}
.aipt-sub{font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.75;color:rgba(255,255,255,.86);margin-bottom:72px}
.aipt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1100px;margin:0 auto 72px}
.aipt-item{padding:34px 34px 8px;border-top:1px solid rgba(255,255,255,.28);text-align:left}
/* 직계 자식으로 한정합니다. 그냥 `b` 로 두면 본문 <p> 안에서 강조로 쓴 <b> 까지
   블록이 되어 그 자리에서 줄이 끊깁니다. */
.aipt-item > b{display:block;font-size:18px;font-weight:700;margin-bottom:12px}
.aipt-item p{font-size:14.5px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.72)}
@media (max-width:860px){
  .aipt{padding:90px 24px}
  .aipt-grid{grid-template-columns:1fr;margin-bottom:56px}
  .aipt-item{padding:28px 4px 6px}
}

/* ---------- Inquiry (상담 문의) ---------- */
.inq{padding:120px 40px;border-top:1px solid var(--line);background:#f7f8fa}
.inq-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:72px}
.inq .eyebrow{color:var(--ink-soft);margin-bottom:18px}
.inq h2{font-size:clamp(34px,4vw,54px);margin-bottom:22px}
.inq-desc{font-size:16.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:44px}
.inq-contacts{list-style:none}
.inq-contacts li{display:flex;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.inq-contacts li:first-child{border-top:1px solid var(--line)}
.inq-label{flex:0 0 84px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.inq-value{font-size:17px;font-weight:600;letter-spacing:.01em}
a.inq-value:hover{opacity:.6}
.inq-form{display:flex;flex-direction:column;gap:22px}
.inq-form label{display:flex;flex-direction:column;gap:8px}
.inq-form label span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.inq-form input,.inq-form textarea{width:100%;border:1px solid var(--line);background:#fff;
  padding:14px 16px;font-family:inherit;font-size:15.5px;color:var(--ink);border-radius:0;
  transition:border-color .2s}
.inq-form input:focus,.inq-form textarea:focus{outline:none;border-color:var(--ink)}
.inq-form textarea{resize:vertical;min-height:130px}
.inq-submit{margin-top:6px;align-self:flex-start}
.inq-note{font-size:13px;color:var(--ink-soft)}
@media (max-width:860px){
  .inq{padding:88px 28px}
  .inq-in{grid-template-columns:1fr;gap:48px}
  .inq-submit{align-self:stretch}
}

/* ---------- Footer ---------- */
.ft{background:var(--dark);color:#fff;padding:76px 40px 46px}
.ft-in{max-width:1280px;margin:0 auto}
.ft-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.14)}
.ft-brand img{height:46px;width:auto;filter:brightness(0) invert(1);margin-bottom:16px}
.ft-brand p{font-family:var(--disp);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ft-cols{display:flex;gap:72px;flex-wrap:wrap}
.ft-col h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px;font-weight:600}
.ft-col a{display:block;font-size:15px;font-weight:300;color:rgba(255,255,255,.85);margin-bottom:12px}
.ft-col a:hover{color:#fff}
.ft-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;
  font-size:13px;color:rgba(255,255,255,.45)}

/* ---------- 플로팅 버튼 ---------- */
.fab{position:fixed;right:34px;bottom:34px;z-index:90;width:62px;height:62px;border-radius:50%;
  background:#fff;box-shadow:0 6px 24px rgba(10,14,20,.22);display:flex;align-items:center;justify-content:center;
  transition:transform .25s}
.fab:hover{transform:translateY(-3px)}
.fab img{height:34px;width:auto}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
  .hd{gap:24px;padding:0 24px}
  .hd-nav{gap:22px}
  .hd-util{gap:16px}
  .hd-util a:not(.em):not(.hd-join){display:none}
}
@media (max-width:860px){
  .hd-nav{display:none}
  .hd-burger{display:flex;margin-left:auto}
  .hd-util{margin-left:0}
  .hero-in{padding:110px 28px 80px}
  .exp-in{padding:90px 28px}
  .duo{grid-template-columns:1fr}
  .duo-card{min-height:480px}
  .stats-in{grid-template-columns:repeat(2,1fr);gap:48px 24px}
  .car-arrow{display:none}
}
@media (max-width:560px){
  /* 좁은 화면에서는 로고 + 햄버거만 남깁니다.
     여백 48 + 로고 163 + 햄버거 38 + gap 48 = 297. 375px 화면에 78px 밖에
     안 남아서 「시작하기 · 모의고사 풀기」(184px)까지 두면 햄버거가 화면
     밖으로 밀려 아예 눌리지 않습니다. 두 링크는 어차피 메뉴 안에 있습니다. */
  .hd{gap:12px;padding:0 18px}
  .hd-util{display:none}
  .hd-logo img{height:36px}
  .hd-logo span{font-size:9px;letter-spacing:.24em}
}
/* 모바일 내비 패널 */
.mnav{position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:#fff;padding:36px 28px;
  display:none;flex-direction:column;gap:4px}
.mnav.open{display:flex}
.mnav a{font-size:19px;font-weight:600;padding:16px 4px;border-bottom:1px solid var(--line)}
.mnav .sub{font-size:15px;font-weight:400;color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq{padding:120px 40px;background:#fff}
.faq-in{max-width:900px;margin:0 auto}
.faq .eyebrow{color:var(--ink-soft);margin-bottom:22px}
.faq h2{font-size:clamp(34px,4.4vw,58px);margin-bottom:48px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:17px;font-weight:600;letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item p{padding:0 44px 26px 0;font-size:15.5px;line-height:1.85;color:var(--ink-soft)}
@media (max-width:720px){ .faq{padding:80px 24px} }

/* ---------- 가격 비교 ---------- */
.cmp{padding:120px 40px;background:var(--paper,#faf9f7)}
.cmp-in{max-width:980px;margin:0 auto;text-align:center}
.cmp .eyebrow{color:var(--ink-soft);margin-bottom:22px}
.cmp h2{font-size:clamp(32px,4.2vw,54px);line-height:1.22;margin-bottom:56px}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.cmp-card{border:1px solid var(--line);border-radius:4px;padding:38px 34px;background:#fff}
.cmp-card--ours{border:1.5px solid var(--ink);position:relative}
.cmp-label{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink-soft);margin-bottom:14px}
.cmp-card--ours .cmp-label{color:var(--ink)}
.cmp-big{font-family:var(--disp,inherit);font-size:clamp(52px,7vw,86px);font-weight:200;
  line-height:1;letter-spacing:-.03em;color:var(--ink-soft);margin-bottom:26px}
.cmp-card--ours .cmp-big{color:var(--ink);font-weight:300}
.cmp-big small{font-size:.26em;font-weight:400;letter-spacing:-.01em;margin-left:8px;vertical-align:super}
.cmp-list{list-style:none;padding:0;margin:0 0 26px;border-top:1px solid var(--line)}
.cmp-list li{padding:13px 0 13px 20px;border-bottom:1px solid var(--line);position:relative;
  font-size:14.5px;line-height:1.6;color:var(--ink-soft);letter-spacing:-.01em}
.cmp-list li::before{content:"";position:absolute;left:2px;top:21px;width:5px;height:5px;
  border-radius:50%;background:var(--line)}
.cmp-card--ours .cmp-list li{color:var(--ink)}
.cmp-card--ours .cmp-list li::before{background:var(--ink)}
.cmp-per{font-size:15px;color:var(--ink-soft);letter-spacing:-.01em}
.cmp-per b{font-weight:600}
.cmp-per--ours{color:var(--ink)}
.cmp-per--ours b{font-size:19px}
.cmp-note{margin-top:30px;font-size:13px;line-height:1.8;color:var(--ink-soft)}
.cmp-cta{margin-top:40px}
@media (max-width:760px){
  .cmp{padding:80px 24px}
  .cmp-grid{grid-template-columns:1fr}
  .cmp h2{margin-bottom:40px}
}

/* ── 모바일 메뉴 ─────────────────────────────────────────────────────
   마크업은 js/nav.js 가 만듭니다(헤더가 8개 파일에 복사돼 있어서
   목록까지 복사하면 반드시 한 곳이 빠집니다). 여기는 모양만. */
.hd-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  margin-left:auto;padding:10px;background:none;border:0;cursor:pointer}
.hd-burger span{display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease}
.hd-burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hd-burger.on span:nth-child(2){opacity:0}
.hd-burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mnav{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 14px 30px rgba(17,20,26,.08);padding:8px 0}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 28px;font-size:15.5px;font-weight:600;
  text-decoration:none;color:var(--ink)}
.mnav a:hover{background:var(--faint,#f6f7f9)}
.mnav a[aria-current]{color:var(--blue)}

@media (max-width:860px){ .hd-burger{display:flex} }
/* 좁은 화면에서 헤더가 두 줄이 되면 히어로가 그만큼 밀립니다.
   메뉴는 전부 버거 안에 있으니, 여기서는 **행동 하나(AI 스터디 PT)만** 남기고
   나머지 유틸 링크를 접습니다. 남긴 것도 줄바꿈을 막습니다. */
@media(max-width:860px){
  .hd-util a:not(.hd-join){display:none}
  .hd-util a.hd-join{white-space:nowrap;font-size:12.5px;padding:8px 12px}
  .hd-util{gap:10px}
}

/* ── 시험 전환 드롭다운 ──────────────────────────────────────────────
   마크업은 js/nav.js 가 만듭니다. 랜딩(index.html)은 자립형 스타일이라
   같은 규칙을 자기 <style> 안에 따로 갖고 있습니다 — 둘은 짝입니다. */
.hd-logo{position:relative}
.prod-btn{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:var(--disp);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-soft);padding:6px 2px}
.prod-btn i{font-style:normal;font-size:9px;transition:transform .15s}
.hd-logo.open .prod-btn i{transform:rotate(180deg)}
.prod-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;background:#fff;
  border:1px solid var(--line);box-shadow:0 12px 32px rgba(10,14,20,.12);
  list-style:none;margin:0;padding:6px;display:none;z-index:70}
.hd-logo.open .prod-menu{display:block}
.prod-menu a{display:block;padding:11px 14px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink)}
.prod-menu a:hover{background:var(--faint,#f6f7f9)}
.prod-menu a.on{color:var(--blue);font-weight:700}

/* ── ETS 공동구매 — 헤더의 강조 링크. 모든 페이지 헤더에 복제돼 있습니다(8곳). ── */
.hd-nav .nav-gg{color:#2b4ea2;font-weight:800;position:relative}
.hd-nav .nav-gg::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#2b4ea2;margin-right:7px;vertical-align:1px}
.hd.scrolled .nav-gg,.hd-nav .nav-gg:hover{color:#1d3a80}

/* ── nav 항목이 8개라 860~1024px 구간에서 줄바꿈이 납니다.
      이 구간은 데스크톱 nav 대신 버거 메뉴를 씁니다 (860 블록의 모바일
      패딩 규칙은 그대로 두고, 항목 숨김만 여기서 별도로 올립니다). ── */
@media (max-width:1024px){
  .hd-nav{display:none}
  .hd-burger{display:flex;margin-left:auto}
  .hd-util{margin-left:0}
}