/* ============================================================
   아이오코딩학원 — Design tokens & base
   Input → Output Journey
   ============================================================ */

/* Pretendard is loaded asynchronously via FontFace API in index.html
   (a render/load-blocking @font-face stalled the preview), with a
   robust Korean-capable system fallback until it arrives. */

:root {
  /* ---- Brand palette — cool white + navy + orange (editorial, intentional) ---- */
  --navy:        #0E2143;   /* deep ink / dark scenes */
  --navy-2:      #16325C;
  --navy-3:      #25497F;
  --navy-soft:   #56627A;   /* cool slate, muted ink on light */

  --orange:      #FF5A1F;   /* primary accent (punchier) */
  --orange-deep: #E8470F;
  --orange-soft: #FF9E73;

  --sand:        #5E7494;   /* steel-slate (replaces gold; pro/영재고 accent) */
  --sand-soft:   #B7C0D2;

  --ivory:       #F4F5F8;   /* cool light gray base (was warm ivory) */
  --paper:       #FAFBFC;   /* near-white cool */
  --paper-2:     #FFFFFF;

  --line:        #E6E8EE;   /* cool hairline on light */
  --line-navy:   rgba(255,255,255,.14);

  /* ---- Semantic (light scene default) ---- */
  --bg:    var(--paper-2);
  --fg:    var(--navy);
  --muted: var(--navy-soft);
  --accent: var(--orange);

  /* ---- Type ---- */
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;

  /* fluid display scale */
  --fs-mega:  clamp(3.4rem, 9.5vw, 9rem);
  --fs-h1:    clamp(2.2rem, 5.4vw, 4.8rem);
  --fs-h2:    clamp(1.9rem, 4.4vw, 3.6rem);
  --fs-h3:    clamp(1.45rem, 2.6vw, 2.1rem);
  --fs-lead:  clamp(1.1rem, 1.7vw, 1.5rem);
  --fs-body:  clamp(1rem, 1.15vw, 1.15rem);
  --fs-small: 0.86rem;
  --fs-label: 0.74rem;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 80px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

h1,h2,h3,h4 { font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; word-break: keep-all; }
p { text-wrap: pretty; word-break: keep-all; }

/* ============================================================
   줄바꿈(엔터) 규칙 — 기기/방향별로 명확히
   ------------------------------------------------------------
   .lb  = "designed line break". 헤드라인을 의도한 2줄로 끊는 <br>.
          ≥721px(태블릿 세로·가로, PC, 폴드 펼침, 폰 가로, 플립 가로)에서만 보임.
          ≤720px(폰 세로, 폴드 커버, 작은 폰)에서는 숨겨 자연 줄바꿈(balance)에 맡김.
   .br-mobile = 반대로 폰에서만 강제 줄바꿈하고 싶을 때(현재 미사용, 확장용).
   h2,h3 는 text-wrap:balance + word-break:keep-all 로 어절 단위로만 끊김 →
   폰에서 단어 중간이 잘리지 않아 읽기 안정적.
   ============================================================ */
.lb { display: inline; }
@media (max-width: 720px) { .lb { display: none; } }
.br-mobile { display: none; }
@media (max-width: 720px) { .br-mobile { display: inline; } }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--orange); color: #fff; }

/* ---- Shared layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); width: 100%; }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--orange);
  display: inline-block;
}
.eyebrow.is-light { color: var(--orange-soft); }
.eyebrow.is-light::before { background: var(--orange-soft); }

.section-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 10px 30px -10px rgba(255,106,43,.7); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 38px -12px rgba(255,106,43,.85); }
.btn-ghost { border: 1.5px solid currentColor; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; transform: translateY(-3px); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost.on-dark:hover { background: #fff; color: var(--navy); }

/* reveal helper — OPACITY-SAFE: content is always visible (opacity 1); only a
   subtle transform rise transitions in. Never strands content if a timeline is
   throttled or an observer fails to fire. */
.reveal { transform: translateY(28px); transition: transform .85s var(--ease); will-change: transform; }
.reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none !important; }
}