/* ===== 토큰 — H안: 네이비 톤온톤 (2026-10-21 대표 확정)
   2026-10-20 설치한 실물 간판은 연한 민트 바탕 + 진한 네이비 글씨다.
   그중 **네이비만** 가져와 색을 하나도 더하지 않고 명도만으로 끌고 간다.
   대표 선택 근거(10/21): "네이비 톤온톤이 좀 전문가스럽고 깔끔하긴 하다."
   (진민트 톤온톤·민트 넓게 안과 나란히 비교한 뒤 네이비로 확정했다.)

     네이비     #0E1F3C ≈ PANTONE 289 C — 본문·제목·어두운 면
                간판 최종시안 PNG에서 직접 추출한 값이다(눈대중 아님).
     밝은 네이비 #1B3C72 ≈ PANTONE 294 C — 밝은 바탕 위 포인트(버튼·단계·게이지)
     연한 네이비 #AFC6E8               — 어두운 면 위 포인트
   팬톤은 모두 화면 기준 근사치다(실물 인쇄는 팬톤 칩 대조가 따로 필요).

   대비(WCAG AA): 본문 #0E1F3C/흰 16.41:1 · 보조 #4A5B74/흰 6.91:1 ·
   포인트 #1B3C72/흰 10.85:1 · 흰 글씨/네이비 버튼 10.85:1 ·
   연한 네이비/네이비 9.43:1 — 전부 본문 기준 4.5:1 이상.

   글꼴: 한글 Pretendard(OFL) · 숫자 포인트 Fraunces(OFL) — 변경 없음
   이전 B안(버건디 #4D1821 · 글래셔 #E8F2FF)에서 교체. ===== */
:root {
  --font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  /* 공용 토큰을 홈에서만 덮는다 — home.css는 index.html에서만 불린다. */
  --bg: #FFFFFF;
  --band: #EDF1F7;
  --ink-b: #0E1F3C;
  --muted-b: #4A5B74;
  --line-b: #DCE3ED;
  --burgundy: #1B3C72;   /* 밝은 면 포인트 → 한 단계 밝은 네이비 */
  --glacier: #AFC6E8;    /* 어두운 면 포인트 → 연한 네이비 */
  --black: #0E1F3C;      /* 검정 면 → 간판 네이비 면 */
  --navy: #0E1F3C;
  --navy-light: #1B3257;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink-b); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }

/* 상단 바 */
.top { position: sticky; top: 0; z-index: 50; background: var(--black); border-bottom: 1px solid rgba(255,255,255,.07); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.logo { font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; color: #F5F5F7; display: flex; align-items: baseline; gap: 8px; }
.nav { display: flex; align-items: center; gap: 24px; font-size: .82rem; color: #BFC3CB; }
.nav a:hover { color: #fff; }
.pill { display: inline-block; font-weight: 600; border-radius: 999px; background: var(--glacier); color: var(--burgundy); padding: 7px 15px; font-size: .8rem; }

.btn { display: inline-block; border-radius: 999px; padding: 13px 26px; font-weight: 600; font-size: 1rem; background: var(--burgundy); color: #fff; }
.more { display: inline-flex; align-items: center; gap: 4px; padding: 13px 8px; font-weight: 500; font-size: 1rem; color: var(--burgundy); }
.more::after { content: "›"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); }

/* 히어로 */
.hero { background: radial-gradient(90% 70% at 50% 100%, rgba(122,38,52,.5) 0%, rgba(77,24,33,.22) 40%, rgba(11,11,13,0) 70%), var(--black); color: #F5F5F7; text-align: center; padding: clamp(64px, 11vw, 124px) 0 0; overflow: hidden; }
.eyebrow { font-size: 1rem; color: #A9AEB8; }
.hero h1 { margin-top: 18px; font-size: clamp(2.2rem, 7vw, 4.4rem); line-height: 1.16; font-weight: 700; letter-spacing: -.045em; }
.hero h1 .hl { color: var(--glacier); }
.hero .sub { margin: 22px auto 0; max-width: 600px; font-size: clamp(1.02rem, 2.2vw, 1.22rem); font-weight: 400; color: #C2C6CF; }
.hero .seat { margin-top: 18px; font-size: .86rem; color: #8C909A; letter-spacing: .01em; }
.hero .seat i { display: inline-block; width: 18px; height: 1px; background: #8C909A; vertical-align: middle; margin: 0 10px; }
.links { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero .btn { background: var(--glacier); color: var(--burgundy); }
.hero .more { color: var(--glacier); }

/* 신뢰 띠 */
.stats { border-bottom: 1px solid var(--line-b); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat { padding: 34px 10px; }
.stat + .stat { border-left: 1px solid var(--line-b); }
.stat b { display: block; font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; letter-spacing: -.03em; color: var(--burgundy); }
.stat span { display: block; margin-top: 6px; font-size: .8rem; color: var(--muted-b); }

/* 섹션 공통 */
.sec { padding: clamp(88px, 12vw, 144px) 0; }
.sec.band { background: var(--band); }
.sec.dark { background: var(--black); color: #F5F5F7; }
.head { text-align: center; max-width: 740px; margin: 0 auto; }
.kicker { font-size: .95rem; color: var(--burgundy); }
.sec.dark .kicker { color: var(--glacier); }
.head h2 { margin-top: 12px; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.2; font-weight: 700; letter-spacing: -.04em; }
.head p { margin-top: 18px; font-size: clamp(1rem, 1.8vw, 1.12rem); color: var(--muted-b); }
.sec.dark .head p { color: #A9AEB8; }

/* S1 학부모 질문 */
.qa { margin-top: clamp(44px, 6vw, 68px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.q { background: var(--band); border-radius: 26px; padding: 34px 32px 36px; }
.q.key { background: var(--glacier); }
.q .qn { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--burgundy); }
.q .qq { margin-top: 6px; font-size: clamp(1.15rem, 2.2vw, 1.38rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.38; }
.q .aa { margin-top: 16px; font-size: .95rem; color: var(--muted-b); }
.q .aa strong { color: var(--ink-b); font-weight: 600; }

/* 선언 띠 — 성적 보장 대신 */
.vow { background: var(--black); color: #F5F5F7; text-align: center; padding: clamp(96px, 13vw, 160px) 0; }
.vow h2 { font-size: clamp(2rem, 5.6vw, 3.6rem); line-height: 1.2; font-weight: 700; letter-spacing: -.045em; }
.vow h2 .hl { color: var(--glacier); }
.vow .trio div { position: relative; }
.vow .trio div + div::before { content: "→"; position: absolute; left: -8px; top: 30px; color: #6E7280; }
.vow p { margin: 24px auto 0; max-width: 560px; color: #A9AEB8; font-size: clamp(1rem, 1.8vw, 1.12rem); }
.vow .trio { margin: 48px auto 0; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #26262C; }
.vow .trio div { padding: 22px 10px 0; }
.vow .trio span { display: block; margin-top: 4px; font-size: .9rem; color: #C2C6CF; }

.split { margin-top: 28px; text-align: center; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.split span { color: var(--burgundy); }

/* 원장의 글 */
.letter { max-width: 760px; margin: 0 auto; text-align: center; }
.letter .q1 { font-size: clamp(1.45rem, 3.6vw, 2.2rem); line-height: 1.5; font-weight: 600; letter-spacing: -.035em; }
.letter .q1 em { font-style: normal; color: var(--burgundy); }
.letter .by { margin-top: 26px; font-size: .9rem; color: var(--muted-b); }

/* S4 과정 */
.levels { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lv { background: #fff; border-radius: 26px; padding: 34px 28px; border: 1px solid var(--line-b); }
.lv .lvn { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--muted-b); }
.lv h3 { margin-top: 6px; font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -.035em; }
.lv .gauge { margin-top: 22px; display: flex; gap: 6px; }
.lv .gauge i { flex: 1; height: 4px; border-radius: 99px; background: var(--line-b); }
.lv .gauge i.on { background: var(--burgundy); }
.lv p { margin-top: 18px; font-size: .92rem; color: var(--muted-b); }
.note { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: .8rem; color: var(--muted-b); }

/* S5 진단상담 */
.steps { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 1px; background: #D6D6DA; }
.step { text-align: center; padding: 0 12px; position: relative; }
.step .num { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 1.3rem; background: #fff; border: 1px solid var(--burgundy); color: var(--burgundy); position: relative; }
.step:last-child .num { background: var(--burgundy); color: #fff; }
.step h3 { margin-top: 18px; font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.step p { margin-top: 8px; font-size: .88rem; color: var(--muted-b); }

/* 마지막 신청 띠 */
.cta { background: var(--burgundy); color: #fff; text-align: center; padding: clamp(84px, 11vw, 128px) 0; }
.cta .kicker { color: #E3C9CD; }
.cta h2 { margin-top: 12px; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.2; font-weight: 700; letter-spacing: -.04em; }
.cta p { margin: 18px auto 0; max-width: 560px; color: #E3C9CD; }
.cta .btn { margin-top: 30px; background: var(--glacier); color: var(--burgundy); }

/* 연락처 */
.contact .grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc { background: var(--band); border-radius: 22px; padding: 26px 24px; }
.cc h3 { font-size: .86rem; font-weight: 500; color: var(--muted-b); }
.cc p { margin-top: 8px; font-weight: 600; font-size: 1.02rem; }
.cc small { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted-b); font-weight: 400; }
.kakao { display: inline-block; margin-top: 2px; background: #FEE500; color: #191919; border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: .9rem; }

/* 스크롤 등장 */
.motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.motion .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .motion .rv { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  .nav a:not(.pill) { display: none; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 24px 8px; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line-b); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-b); }
  .qa { grid-template-columns: 1fr; }
  .q { padding: 28px 24px 30px; }
  .vow .trio { grid-template-columns: 1fr; }
  .vow .trio div { padding: 18px 0; border-bottom: 1px solid #26262C; }
  .vow .trio div + div::before { content: "↓"; left: 50%; top: -11px; transform: translateX(-50%); background: var(--black); padding: 0 8px; }
  .levels { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 1px; height: auto; }
  .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; text-align: left; padding: 0; }
  .step .num { margin: 0; grid-row: span 2; }
  .step h3 { margin-top: 4px; }
  .step p { margin-top: 2px; }
  .contact .grid { grid-template-columns: 1fr; }
}
/* 공용 스타일의 같은 클래스에 남는 속성을 시안 v6 기준으로 해제한다. */
.top .nav a:hover { color: #fff; }
.hero .eyebrow { display: block; font-size: 1rem; font-weight: 400; letter-spacing: normal; color: #A9AEB8; margin-bottom: 0; text-transform: none; }
.btn { transition: none; }
.btn:hover { transform: none; }
.steps { counter-reset: none; }
@media (min-width: 761px) { .steps { gap: 0; } }
.step { background: transparent; border: 0; border-radius: 0; }
.step::before { content: none; }
.step h3 { color: inherit; }
@media (max-width: 720px) { .top .nav { display: flex; } }

/* v6: 영어 없음·내부 방식 비노출·신청 하나로 */
.rise { margin: clamp(40px, 6vw, 60px) auto 0; max-width: 760px; height: clamp(120px, 22vw, 200px); }
.rise svg { width: 100%; height: 100%; display: block; }
.vow .trio .kr { display: block; font-size: 1.15rem; font-weight: 600; color: #F5F5F7; }
.vow .trio div:last-child .kr { color: var(--glacier); }
.q .qn { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--burgundy); }
.promise { margin-top: clamp(44px, 6vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pm { background: #fff; border-radius: 26px; padding: 30px 28px 32px; border: 1px solid var(--line-b); }
.pm .pn { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--burgundy); }
.pm h3 { margin-top: 8px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.pm p { margin-top: 10px; font-size: .92rem; color: var(--muted-b); }
.lv .lvn { font-family: var(--font); font-style: normal; font-size: .85rem; font-weight: 600; }
.cta .sub-link { margin-top: 18px; font-size: .9rem; }
.cta .sub-link a { color: #E3C9CD; text-decoration: underline; text-underline-offset: 3px; }
.contact { padding-top: clamp(56px, 8vw, 88px); }
.contact .grid { margin-top: 0; }
@media (max-width: 760px) { .promise { grid-template-columns: 1fr; } }


/* ===== H안 색 적용 — 구조·문구는 그대로, 색만 ===== */

/* 히어로 — 묵직함은 유지하되 검정이 아니라 간판 네이비로. 글로우도 같은 계열 */
.hero {
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(43,79,145,.52) 0%, rgba(14,31,60,.55) 42%, rgba(14,31,60,0) 72%),
    var(--black);
}

/* 상승 곡선 — index.html의 inline SVG 그라데이션을 CSS로만 갈아끼운다 */
.rise stop:first-child { stop-color: #2B4F91; }
.rise stop:last-child { stop-color: #AFC6E8; }
.rise circle { fill: #AFC6E8; }

/* 어두운 면에 남아 있던 검정 잔재 정리 */
.vow .trio { border-top-color: rgba(255,255,255,.18); }
.vow .trio div + div::before { color: rgba(255,255,255,.55); }
@media (max-width: 760px) {
  .vow .trio div { border-bottom-color: rgba(255,255,255,.18); }
  .vow .trio div + div::before { background: var(--black); }
}
.steps::before { background: #DCE3ED; }

/* 학교 시험 띠(#exam)의 신청 버튼 — 히어로·마지막 띠와 같은 연한 네이비 버튼으로.
   H안 적용 때 이 자리만 덮어쓰기가 빠져 버튼면 #1B3C72가 띠 #0E1F3C 위에서 1.51:1로
   거의 안 보였다(2026-10-22 디자인 학습 세션 발견, 실물 확인). 비텍스트 기준은 3:1.
   지금: 버튼면/띠 9.43:1 · 글씨/버튼 6.23:1. */
.sec.dark .btn { background: var(--glacier); color: var(--burgundy); }

/* 마지막 신청 띠 — 네이비 바탕 + 연한 네이비 글씨 (11.37:1) */
.cta .kicker, .cta p, .cta .sub-link a { color: #C9D8EF; }


/* ===== 글자 크기 7단계 (2026-10-22 대표 결정) =====
   디자인 학습(실제 사이트 21곳 측정): 레퍼런스 중앙값 7단계, 우리는 17단계였다.
   데스크톱 기준 13 · 14 · 16 · 18 · 24 · 40 · 56px 일곱 개만 쓴다.
   제목 상한: 히어로·선언 70/58 → 56px, 섹션 제목 50 → 40px(교육·서비스형 중앙값 48px).
   clamp()의 모바일 하한은 그대로 둔다 — 휴대폰 화면은 거의 바뀌지 않는다. */
:root {
  --fs-xs: .8125rem;  /* 13 */
  --fs-sm: .875rem;   /* 14 */
  --fs-base: 1rem;    /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 2.5rem;   /* 40 */
  --fs-3xl: 3.5rem;   /* 56 */
}
.note, .cc small { font-size: var(--fs-xs); }
/* 공용 푸터(법정 표시)는 style.css에서 .78rem(12.5px)라 홈에서만 8단계째가 됐다.
   대표 지시 "푸터는 기존처럼 연하게"는 색 이야기라 색은 그대로 두고, 크기만 13px로 맞춘다.
   0.5px 차이라 다른 페이지 푸터와 눈으로는 구분되지 않는다. */
.site-footer { font-size: var(--fs-xs); }
.nav, .stat span, .q .aa, .lv p, .step p, .pm p, .hero .seat, .cc h3, .kakao,
.letter .by, .vow .trio span, .cta .sub-link, .lv .lvn { font-size: var(--fs-sm); }
.logo, .more, .cc p, .kicker, .eyebrow, .hero .eyebrow, .q .qn, .pm .pn, .split { font-size: var(--fs-base); }
.hero .sub, .head p, .vow p, .vow .trio .kr, .step .num { font-size: var(--fs-lg); }
.q .qq, .lv h3, .pm h3, .step h3, .stat b { font-size: var(--fs-xl); }
.letter .q1 { font-size: clamp(1.5rem, 3.2vw, var(--fs-2xl)); }
.head h2, .cta h2 { font-size: clamp(1.9rem, 4.4vw, var(--fs-2xl)); }
.hero h1 { font-size: clamp(2.2rem, 6vw, var(--fs-3xl)); }
.vow h2 { font-size: clamp(2rem, 5vw, var(--fs-3xl)); }  /* 선언 띠도 히어로와 같은 56 — 정확히 7단계 */

/* ===== 계속 수강률 95% — 숫자는 크게, 단서는 작고 연하게(2026-10-22 대표) =====
   대표: "단서 기준은 작게 여리게 하고, 크게 키우는 거 오케이." 문구는 그대로다.
   단서는 연하게 하되 표시광고 하한을 지킨다(homepage-ad-figure-rules):
     ① 수치 바로 아래 같은 칸(같은 시야) ② 흰 바탕 대비 4.5:1 이상 ③ 휴대폰에서도 읽히는 13px.
   #66748A = 흰 바탕 4.74:1 — 이전 #4A5B74(6.91:1)보다 연하지만 하한 위다.
   "여리게"가 "안 보이게"가 되면 표시광고법 위반이므로 이보다 더 연하게 하지 말 것. */
.stat.fig .num { display: block; margin-top: 2px; font-size: var(--fs-2xl); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.stat.fig > span { font-size: var(--fs-xs); color: #66748A; line-height: 1.5; }

/* ===== 진단상담 신청 버튼 — 크고 아름답게(2026-10-22 대표) =====
   헤더·히어로·학교 시험 띠·마지막 띠, 신청으로 가는 네 버튼만 같은 버튼으로 통일한다.
   크기: 터치 영역 최소 44px(헤더), 본문 버튼 56px. 제목이 작아진 만큼 버튼이 더 돋보인다.
   디테일: 올리면 살짝 떠오르고 화살표가 앞으로, 누르면 살짝 눌린다(designspells 참고).
   이 반응은 신청 버튼에만 쓴다 — 여러 곳에 쓰면 싸구려가 된다.
   색: 연한 네이비 면 + 네이비 글씨(어두운 띠 위 9.43:1 · 글씨 6.23:1). */
a.btn[href^="/apply"], a.pill[href^="/apply"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  border-radius: 999px; background: var(--glacier); color: var(--burgundy); font-weight: 700;
  box-shadow: 0 8px 24px rgba(175,198,232,.22), inset 0 0 0 1px rgba(255,255,255,.45);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, opacity .9s cubic-bezier(.2,.7,.2,1);
}
a.btn[href^="/apply"] { min-height: 56px; padding: 0 34px; font-size: var(--fs-lg); }
a.pill[href^="/apply"] { min-height: 44px; padding: 0 18px; font-size: var(--fs-sm); }
a.btn[href^="/apply"]::after, a.pill[href^="/apply"]::after {
  content: "→"; display: inline-block; transition: transform .18s cubic-bezier(.2,.7,.2,1);
}
a.btn[href^="/apply"]:hover, a.pill[href^="/apply"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(175,198,232,.32), inset 0 0 0 1px rgba(255,255,255,.6);
}
a.btn[href^="/apply"]:hover::after, a.pill[href^="/apply"]:hover::after { transform: translateX(4px); }
a.btn[href^="/apply"]:active, a.pill[href^="/apply"]:active { transform: translateY(0) scale(.97); }
a.btn[href^="/apply"]:focus-visible, a.pill[href^="/apply"]:focus-visible { outline: 3px solid rgba(175,198,232,.7); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  a.btn[href^="/apply"], a.pill[href^="/apply"],
  a.btn[href^="/apply"]::after, a.pill[href^="/apply"]::after { transition: none; }
  a.btn[href^="/apply"]:hover, a.pill[href^="/apply"]:hover,
  a.btn[href^="/apply"]:hover::after, a.pill[href^="/apply"]:hover::after,
  a.btn[href^="/apply"]:active, a.pill[href^="/apply"]:active { transform: none; }
}