/* =========================================================
   Wonderland — main page (3차, 원점 재작성)
   흰 바탕 + 로고 브랜드 색면 / Pretendard 단일 서체
   글자·회색·모서리·간격은 쏘카 프레임(Socar Frame 2.0) 규격을 따르고,
   색과 로고·색면 같은 원더랜드 정체성만 그대로 둔다.
   ========================================================= */
:root {
  /* 로고 브랜드 컬러 */
  --red: #F30827;
  --green: #00A750;
  --indigo: #393A93;
  --yellow: #FFBA00;
  --pink: #EB4480;
  --orange: #FD7919;
  --sky: #00A0DC;
  --teal: #00A8A0;
  --teal-ink: #007C76;
  --cam-teal: #00BCB6;  /* 프렙센터 로고의 청록 */

  /* 흰 글자를 올리는 색면용(대비 4.5:1 이상) */
  --red-deep: #E00020;

  /* 중립색: 쏘카 그레이 스케일(gray-1000·800·600·300·200·100) */
  --ink: #141A24;
  --ink-2: #354153;
  --muted: #697383;
  --gray-300: #CBD1DC;
  --line: #E5E8EF;
  --gray: #F2F3F8;
  --white: #FFFFFF;

  /* 모서리: 쏘카 radius L·M */
  --radius-l: 14px;
  --radius-m: 12px;

  --wrap: 1280px;
  --gutter: 40px;

  /* 레이아웃 간격: 쏘카 Spacing(1 unit = 4px, 최대 spacing-1000 = 40px)만 쓴다.
     섹션·블록 사이는 40px 두 번(80px), 휴대폰은 40px */
  --header-h: 64px;
  --section-y: 80px;
  --block-gap: 80px;
  --head-gap: 40px;
  --grid-gap: 40px;
  --card-gap: 16px;
  --card-pad: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 글자 체계: 쏘카 Typography (굵기 크기/줄높이). Display만 자간 -0.6px */
  --display-1: 700 40px/50px var(--font);
  --display-2: 700 36px/44px var(--font);
  --heading-1: 700 26px/36px var(--font);
  --heading-2: 700 24px/34px var(--font);
  --heading-3: 700 22px/30px var(--font);
  --title-1: 600 18px/26px var(--font);
  --title-2: 600 16px/24px var(--font);
  --title-3: 600 14px/22px var(--font);
  --title-4: 600 13px/20px var(--font);
  --body-1: 400 18px/26px var(--font);
  --body-2: 400 16px/24px var(--font);
  --body-3: 400 14px/22px var(--font);
  --body-4: 400 13px/20px var(--font);
  --caption-1: 600 12px/18px var(--font);
  --caption-2: 500 12px/18px var(--font);
  --caption-3: 600 10px/16px var(--font);
  --display-ls: -0.6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--body-2);
  color: var(--ink);
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
section[id] { scroll-margin-top: var(--header-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
.contact :focus-visible { outline-color: var(--yellow); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--white); font: var(--title-3); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 타이포 ---------- */
.title { font: var(--display-2); letter-spacing: var(--display-ls); }
.title--light { color: var(--white); }
[data-lines] > span { display: block; }
.line-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line-mask > span { display: block; }
.text { margin-top: 16px; color: var(--ink-2); max-width: 32em; }

/* ---------- 버튼 ---------- */
/* 움직임 없이 색만 천천히 바뀌는 단정한 버튼. 규격은 쏘카 프레임 ActionButton large(56px, 모서리 14px) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 22px; border-radius: var(--radius-l);
  font: var(--title-2); white-space: nowrap;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--indigo); }
.btn--line { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--line); }
.btn--ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); color: var(--white); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--white); background: rgba(255,255,255,.08); }

/* ---------- 헤더 ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  transition: box-shadow .4s;
}
.header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header__inner { display: flex; align-items: center; height: var(--header-h); gap: 40px; }
.header__logo img { height: 24px; width: auto; }
.header__tel {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink); white-space: nowrap;
}
/* 버튼 대신 노란 원 아이콘 + 두 줄 글자(작은 안내, 굵은 번호) */
.header__icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--yellow); fill: var(--ink); flex: 0 0 auto; }
.header__tel-text { display: grid; font: var(--title-1); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.header__tel-text small { font: var(--caption-2); color: var(--muted); }
.header__tel:hover .header__tel-text { color: var(--indigo); }

/* ---------- 히어로 ---------- */
.hero { padding: 40px 0 0; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: center; min-height: min(calc(100vh - var(--header-h) - 160px), 520px); }
.hero__title { font: var(--display-1); letter-spacing: var(--display-ls); }
.hero__lead { margin-top: 16px; max-width: 30em; font: var(--body-1); color: var(--ink-2); }
.hero__art { width: 100%; max-width: 440px; justify-self: center; }
.blocks { width: 100%; height: auto; overflow: visible; }


/* ---------- 섹션 공통 ---------- */
.section { padding: var(--section-y) 0; }
.section--gray { background: var(--gray); }
.head { margin-bottom: var(--head-gap); }
.head--split { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--grid-gap); align-items: end; }
.head__text { color: var(--ink-2); max-width: 28em; justify-self: end; }
.head__text--small { font: var(--body-3); color: var(--muted); text-align: right; }

/* ---------- 32년 + 연혁 타임라인 ---------- */
/* 로고 건물의 아치처럼 윗변이 둥근 남색 영역. 스크롤하면 아치가 솟아오른다(--arch, main.js) */
.section--history { --history-bg: #252E3D; position: relative; margin-top: 160px; padding-top: 40px; background: var(--history-bg); color: var(--white); }
.history__arch {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 160px; pointer-events: none;
  background: var(--history-bg); clip-path: ellipse(75% calc(var(--arch, 1) * 100%) at 50% 100%);
}
.section--history .title { color: var(--white); }
.history__head { display: grid; grid-template-columns: 1fr auto; gap: var(--grid-gap); align-items: end; }
.history__num {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: clamp(120px, 15vw, 220px); font-weight: 800; letter-spacing: -0.07em; line-height: .8;
  font-variant-numeric: tabular-nums;
}
/* 숫자는 다 오르면 흰색. 오르는 동안에는 로고 글자 색 줄무늬가 숫자 속을 흘러간다(--shift, --w: main.js) */
.history__num span {
  --w: 1; --shift: 0em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image:
    linear-gradient(rgba(255, 255, 255, var(--w)), rgba(255, 255, 255, var(--w))),
    repeating-linear-gradient(110deg, var(--pink) 0 .2em, var(--orange) .2em .4em, var(--yellow) .4em .6em, var(--green) .6em .8em, var(--sky) .8em 1em);
  background-position: 0 0, var(--shift) 0;
  padding-right: .04em;
}
/* 「년」은 숫자 오른쪽 아래, 숫자 밑줄에 맞춘다 */
.history__num em { align-self: flex-end; font: var(--display-1); font-style: normal; letter-spacing: 0; color: var(--white); }

/* 가로 타임라인: 연도 → 점 → 설명, 점들이 한 줄 위에 놓인다 */
.timeline { --line-y: 61px; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: var(--head-gap); }
.timeline::before,
.timeline__bar { content: ""; position: absolute; left: 0; right: 0; top: var(--line-y); height: 2px; background: rgba(255, 255, 255, .18); }
/* 선은 한 가지 색(노랑)으로 그어진다 */
.timeline__bar { background: var(--yellow); transform-origin: left; transform: scaleX(var(--p, 1)); }
.timeline li { position: relative; padding-right: 24px; }
/* 아직 선이 닿지 않은 연도는 흐리게만 둔다 */
.timeline time { display: block; height: 36px; font: var(--heading-1); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .3); transition: color .5s ease; }
.timeline li.is-on time { color: var(--white); }
.timeline li.is-now.is-on time { color: var(--c); }
.timeline i {
  position: relative; z-index: 1; display: block; width: 16px; height: 16px; margin: 18px 0 24px;
  border-radius: 50%; background: var(--history-bg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3);
  transition: background-color .5s ease, box-shadow .5s ease;
}
.timeline li.is-on i { background: var(--c); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 4px var(--history-bg); }
.timeline p { font: var(--body-3); color: rgba(255, 255, 255, .45); transition: color .5s ease; }
.timeline li.is-on p { color: rgba(255, 255, 255, .8); }

/* ---------- 전인교육 색면 ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 360px; padding: var(--card-pad); border-radius: var(--radius-l);
  color: var(--white); background: var(--bg);
  transition: transform .8s var(--ease);
}
.tile--red { --bg: var(--red-deep); }
.tile--yellow { --bg: var(--yellow); color: var(--ink); }
.tile--green { --bg: var(--green); color: var(--ink); }
.tile--indigo { --bg: var(--indigo); }
.tile__en { font: var(--display-2); letter-spacing: var(--display-ls); }
.tile__body h3 { font: var(--heading-3); }
.tile__body p { margin-top: 8px; font: var(--body-2); }
.tile__shape { position: absolute; z-index: -1; transition: transform 1.1s var(--ease); }
.tile__shape--arch { background: rgba(255,255,255,.16); border-radius: 999px 999px 0 0; width: 46%; height: 46%; right: 8%; top: 24%; }
.tile__shape--circle { background: rgba(255,255,255,.4); border-radius: 50%; width: 56%; aspect-ratio: 1; right: -10%; top: 20%; }
.tile__shape--quarter { background: rgba(255,255,255,.28); border-radius: 0 0 0 100%; width: 54%; aspect-ratio: 1; right: 0; top: 0; }
.tile__shape--bars { display: flex; align-items: flex-end; gap: 10%; width: 50%; height: 44%; right: 10%; top: 24%; }
.tile__shape--bars i { flex: 1; background: rgba(255,255,255,.18); border-radius: 6px 6px 0 0; }
.tile__shape--bars i:nth-child(1) { height: 45%; }
.tile__shape--bars i:nth-child(2) { height: 100%; }
.tile__shape--bars i:nth-child(3) { height: 70%; }
@media (hover: hover) {
  .tile:hover { transform: translateY(-8px); }
  .tile:hover .tile__shape { transform: scale(1.12) rotate(-6deg); }
}

/* ---------- 캠브리지 ---------- */
.cam { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: center; }
/* 사진은 모양을 바꾸지 않고 그대로 넣는다 */
.cam__media { position: relative; }
/* 하늘을 지운 투명 사진을 원본 비율 그대로 넣는다(틀·모서리 없음) */
.cam__photo { position: relative; }
.cam__photo img { display: block; width: 100%; height: auto; }
/* 로고는 하늘을 지운 오른쪽 위 여백에 얹는다(사진과 한 덩어리) */
.cam__logo { position: absolute; z-index: 1; top: 0; right: 2%; width: 40%; height: auto; }
.cam__points { margin-top: 24px; border-top: 1px solid var(--line); }
.cam__points li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cam__points b { font: var(--title-2); color: var(--teal-ink); }
.cam__points span { font: var(--body-2); color: var(--ink-2); }

/* 어린이 시험 3단계 */
.yle { margin-top: var(--block-gap); }
.yle__head { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--grid-gap); align-items: end; margin-bottom: 24px; }
.yle__title { font: var(--heading-1); }
.yle__head p { color: var(--ink-2); max-width: 40em; justify-self: end; }
.yle__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.yle__card { position: relative; padding: var(--card-pad); border-radius: var(--radius-l); background: var(--gray); }
.yle__card--goal { background: var(--teal-ink); color: var(--white); }
.yle__level { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--white); color: var(--teal-ink); font: var(--caption-1); }
.yle__card h4 { margin: 12px 0 0; font: var(--display-2); letter-spacing: var(--display-ls); }
/* 캠브리지 ILA: ILA 자료(아이디어 팩·4 Key Pillars)의 청록 바탕, 남색 머리, 연민트 테두리를 따른다 */
.ila { --ila: #36AFAC; --ila-deep: #2A9693; --ila-navy: #0B2E3C; --ila-mint: #D2E6E4;
  position: relative; overflow: hidden; isolation: isolate; margin-top: var(--block-gap); padding: 40px; border-radius: var(--radius-l); background: var(--ila); color: var(--white); }
.ila__waves { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ila__waves path:nth-child(1) { fill: var(--ila-deep); }
.ila__waves path:nth-child(2) { fill: rgba(255,255,255,.12); }
.ila__intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--grid-gap); align-items: center; }
.ila__title { font: var(--display-2); letter-spacing: var(--display-ls); }
.ila__name { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: var(--ila-navy); color: var(--ila-mint); font: var(--title-3); }
.ila__text { margin-top: 16px; max-width: 30em; font: var(--body-2); color: rgba(255,255,255,.92); }
.ila__text + .ila__text { margin-top: 8px; }
.ila__text b { color: var(--white); box-shadow: inset 0 -.45em 0 rgba(11,46,60,.35); }
.ila__media { position: relative; padding: 0 0 40px 40px; }
.ila__photo { overflow: hidden; border-radius: var(--radius-l); background: var(--ila-deep); }
.ila__photo img { display: block; width: 100%; height: auto; }
.ila__photo--main { border: 8px solid var(--ila-mint); }
.ila__photo--sub { position: absolute; left: 0; bottom: 0; width: 42%; border: 8px solid var(--white); box-shadow: 0 18px 40px rgba(11,46,60,.25); }
.ila__pillars { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; padding-bottom: 32px; }
/* 마지막 단계에서 처음으로 돌아가는 고리 */
.ila__pillars::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 48px; border: 4px solid var(--ila-mint); border-top: 0; border-radius: 0 0 var(--radius-l) var(--radius-l); opacity: .85; }
.ila__pillars li { position: relative; z-index: 1; display: flex; flex-direction: column; border-radius: var(--radius-l); border: 4px solid var(--ila-mint); background: var(--ila); }
.ila__pillars li.is-key { border-color: var(--white); box-shadow: 0 0 0 4px var(--ila-navy); }
.ila__pillars li:not(:last-child)::after { content: ""; position: absolute; right: -28px; top: 50%; width: 24px; height: 4px; background: var(--ila-mint); }
.ila__cap { padding: 16px 18px 20px; border-radius: 10px 10px 0 0; background: var(--ila-navy); clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.ila__cap h4 { margin: 0; font: var(--title-1); color: #8ED1CE; }
.ila__pillars li.is-key .ila__cap h4 { color: var(--white); }
.ila__cap span { display: block; margin-top: 2px; font: var(--caption-2); color: rgba(210,230,228,.8); }
.ila__pillars p { padding: 12px 18px 18px; font: var(--body-3); color: var(--ila-navy); }
.ila__loop { margin-top: 24px; max-width: 46em; font: var(--body-3); color: rgba(255,255,255,.9); }
.ila__loop b { color: var(--white); }

.yle__desc { margin-top: 12px; min-height: 44px; font: var(--body-3); color: var(--ink-2); }
.yle__card--goal .yle__desc { color: rgba(255,255,255,.88); }

/* 이후 단계: 높아지는 막대 */
.ladder { margin-top: var(--block-gap); }
.ladder__title { font: var(--title-3); color: var(--muted); }
/* CEFR 단계: 큰 등급 글자 아래로 7칸 막대가 이어지고, 맨 아래에 세 묶음을 쉬운 말로 푼다 */
.cefr { margin-top: 12px; }
.cefr__intro { max-width: 44em; font: var(--body-3); color: var(--ink-2); }
.cefr__intro b { font-weight: 600; color: var(--ink); }
.cefr__levels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 4px; margin-top: 32px; }
.cefr__lv { display: grid; align-content: start; }
.cefr__lv b { font: var(--display-1); letter-spacing: var(--display-ls); color: var(--t); }
.cefr__lv--a { --t: #3AA8A3; }
.cefr__lv--b { --t: #007C76; }
.cefr__lv--c { --t: #0B2E3C; }
.cefr__lv i { display: block; height: 12px; margin-top: 8px; background: var(--c); transform-origin: left; }
.cefr__lv:first-child i { border-radius: 999px 0 0 999px; }
.cefr__lv:last-child i { border-radius: 0 999px 999px 0; }
.cefr__lv span { margin-top: 12px; padding-right: 8px; font: var(--body-4); color: var(--ink-2); }
.cefr__bands { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 0 4px; margin-top: 24px; }
.cefr__band { display: grid; gap: 4px; padding: 12px 16px 0 0; border-top: 2px solid var(--g); }
.cefr__band b { font: var(--title-3); color: var(--ink); }
.cefr__band em { margin-left: 4px; font: var(--caption-1); font-style: normal; color: var(--muted); }
.cefr__band span { font: var(--body-4); color: var(--muted); }
.cefr__band--a { --g: #9ADBD7; }
.cefr__band--b { --g: #2FA9A5; }
.cefr__band--c { --g: #0B2E3C; }
.ladder__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.ladder__facts b { display: block; font: var(--heading-1); font-variant-numeric: tabular-nums; }
.ladder__facts span { font: var(--body-3); color: var(--muted); }

/* ---------- 교습비 ---------- */
.fee { background: var(--white); border-radius: var(--radius-l); padding: 8px 32px 24px; }
.fee__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fee__table th, .fee__table td { padding: 16px 12px; text-align: right; border-bottom: 1px solid var(--line); font: var(--body-2); }
.fee__table thead th { padding: 16px 12px 12px; font: var(--title-4); color: var(--muted); }
.fee__table th:first-child { text-align: left; padding-left: 0; }
.fee__table td:last-child, .fee__table thead th:last-child { padding-right: 0; }
.fee__table tbody th { font: var(--title-1); }
.fee__table td { color: var(--ink-2); }
.fee__table .fee__sum { color: var(--ink); font: var(--heading-3); }
.fee__law { margin-top: 16px; font: var(--body-4); color: var(--muted); }
.fee__refund { margin-top: 16px; border-top: 1px solid var(--line); }
.fee__refund summary { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; cursor: pointer; list-style: none; font: var(--title-2); }
.fee__refund summary::-webkit-details-marker { display: none; }
.fee__refund summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--muted); transition: transform .5s var(--ease); }
.fee__refund[open] summary::after { transform: rotate(45deg); }
.fee__refund-body { display: grid; gap: 12px; padding-top: 12px; font: var(--body-3); color: var(--ink-2); }
.fee__refund-body ul { border-top: 1px solid var(--line); }
.fee__refund-body li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fee__refund-body li b { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- 상담 ---------- */
.contact { position: relative; background: var(--ink); color: var(--white); padding: var(--section-y) 0 0; }
.contact__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--grid-gap); align-items: end; padding-bottom: var(--section-y); }
.contact__tel {
  display: block; width: max-content; max-width: 100%; margin-top: 24px; overflow: hidden;
  font: var(--display-1); letter-spacing: var(--display-ls);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.contact__tel .ch { display: inline-block; }
.contact__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.contact__info { display: grid; gap: 24px; }
.contact__info dt { font: var(--caption-1); color: rgba(255,255,255,.6); }
.contact__info dd { margin-top: 4px; font: var(--body-2); color: rgba(255,255,255,.92); }
.contact__band { display: grid; grid-template-columns: repeat(6, 1fr); height: 16px; }
.contact__band i { transform-origin: bottom; }
.contact__band i:nth-child(1) { background: var(--green); }
.contact__band i:nth-child(2) { background: var(--red); }
.contact__band i:nth-child(3) { background: var(--yellow); }
.contact__band i:nth-child(4) { background: var(--indigo); }
.contact__band i:nth-child(5) { background: var(--pink); }
.contact__band i:nth-child(6) { background: var(--sky); }

/* ---------- 푸터 ---------- */
.footer { padding: 40px 0; }
.footer__inner { display: flex; gap: 40px; align-items: flex-start; }
.footer__logo { width: 72px; flex: 0 0 auto; }
.footer__info { display: grid; gap: 4px; font: var(--body-4); color: var(--muted); }
.footer__info p span + span::before { content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 12px; background: var(--gray-300); vertical-align: middle; }
.footer__name { font: var(--title-3); color: var(--ink); margin-bottom: 4px; }
.footer__note { margin-top: 8px; font: var(--caption-2); }

.dock { display: none; }

/* ---------- 애니메이션 초기 상태 (스크립트가 있을 때만) ---------- */
.js [data-reveal] { opacity: 0; }
.js .hero__art { visibility: hidden; }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 320px; }
  .ila__pillars { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .ila__pillars::before, .ila__pillars li:nth-child(2)::after { display: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; --header-h: 56px; --section-y: 40px; --block-gap: 40px; --head-gap: 24px; --grid-gap: 24px; --card-gap: 8px; --card-pad: 20px; }
  body { padding-bottom: 88px; }
  .header__logo img { height: 19px; }
  .header__tel { gap: 8px; }
  .header__icon { width: 32px; height: 32px; padding: 8px; }
  .header__tel-text { font: var(--title-2); }
  .header__tel-text small { display: none; }
  .header__logo img { height: 17px; }

  .hero { padding-top: 16px; }
  .hero__grid { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .hero__art { order: -1; justify-self: center; max-width: 240px; }
  .hero__title { margin-top: 8px; font: var(--display-2); letter-spacing: var(--display-ls); }
  .hero__lead { margin-top: 16px; font: var(--body-2); }

  .title { font: var(--heading-1); }
  .head--split { grid-template-columns: 1fr; gap: 12px; }
  .head__text { justify-self: start; }
  .head__text--small { text-align: left; }

  .section--history { margin-top: 80px; padding-top: 24px; }
  .history__arch { height: 64px; }
  .history__head { grid-template-columns: 1fr; gap: 24px; }
  .history__num { font-size: 120px; }
  .timeline { --line-x: 7px; grid-template-columns: 1fr; margin-top: 32px; padding-left: 40px; }
  .timeline::before, .timeline__bar { left: var(--line-x); right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .timeline__bar { transform-origin: top; transform: scaleY(var(--p, 1)); }
  .timeline li { padding: 0 0 24px; }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline time { height: auto; font: var(--heading-3); }
  .timeline i { position: absolute; left: -40px; top: 7px; margin: 0; }
  .timeline p { margin-top: 4px; }
  .timeline p br { display: none; }

  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 240px; padding: 20px 16px; }
  .tile__en { font: var(--heading-2); letter-spacing: 0; }
  .tile__body h3 { font: var(--title-1); }
  .tile__body p { font: var(--body-3); }
  /* 좁은 카드에서는 장식 도형을 제목과 본문 사이 빈 곳에 작게 둔다 */
  .tile__shape--arch { width: 34%; height: 30%; right: 8%; top: 34%; }
  .tile__shape--circle { width: 34%; right: 4%; top: 34%; }
  .tile__shape--quarter { width: 40%; top: 32%; right: 0; border-radius: 100% 0 0 0; }
  .tile__shape--bars { width: 38%; height: 30%; right: 8%; top: 34%; }

  .cam { grid-template-columns: 1fr; gap: 32px; }
  .cam__logo { top: 0; right: 0; width: 42%; }
  .cam__points li { grid-template-columns: 1fr; gap: 4px; }
  .ila { padding: 24px 20px; }
  .ila__title { font: var(--heading-1); letter-spacing: 0; }
  .ila__intro { grid-template-columns: 1fr; }
  .ila__text { font: var(--body-3); }
  .ila__media { padding: 0 0 24px 24px; }
  .ila__photo--main { border-width: 6px; }
  .ila__photo--sub { border-width: 6px; width: 46%; }
  .ila__pillars { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; padding-bottom: 0; }
  .ila__pillars li { border-width: 4px; border-radius: var(--radius-m); }
  .ila__pillars li::after { display: none; }
  .ila__cap { padding: 12px 12px 16px; }
  .ila__cap h4 { font: var(--title-2); }
  .ila__cap span { font: var(--caption-3); }
  .ila__pillars p { padding: 8px 12px 12px; font: var(--body-4); }
  .yle__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .yle__head p { justify-self: start; }
  .yle__cards { grid-template-columns: 1fr; }
  .yle__card h4 { font: var(--heading-1); letter-spacing: 0; }
  .yle__desc { min-height: 0; }
  /* 휴대폰: 단계마다 한 줄. 왼쪽 세로 막대 + 등급 + 시험 이름, 묶음 설명은 그 아래 */
  .cefr__levels { grid-template-columns: 1fr; gap: 4px 0; margin-top: 24px; }
  .cefr__lv { grid-template-columns: 8px 72px 1fr; align-items: center; gap: 0 16px; }
  .cefr__lv b { grid-column: 2; grid-row: 1; font: var(--heading-2); letter-spacing: 0; }
  .cefr__lv i { grid-column: 1; grid-row: 1; width: 8px; height: 52px; margin: 0; transform-origin: top; }
  .cefr__lv:first-child i { border-radius: 999px 999px 0 0; }
  .cefr__lv:last-child i { border-radius: 0 0 999px 999px; }
  .cefr__lv span { grid-column: 3; grid-row: 1; margin: 0; padding: 0; }
  .cefr__bands { grid-template-columns: 1fr; gap: 12px; }
  .cefr__band { padding: 0 0 0 12px; border-top: 0; border-left: 3px solid var(--g); }
  .ladder__facts { grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 32px; }
  .ladder__facts b { font: var(--heading-2); }

  .fee { padding: 8px 20px 20px; }
  .fee__table thead { display: none; }
  .fee__table, .fee__table tbody, .fee__table tr, .fee__table th, .fee__table td { display: block; }
  .fee__table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .fee__table th, .fee__table td { padding: 0; border: 0; text-align: left; font: var(--body-3); }
  .fee__table tbody th { font: var(--title-1); }
  .fee__table .fee__sum { grid-column: 2; grid-row: 1; text-align: right; font: var(--heading-3); }
  .fee__table td:not(.fee__sum)::before { content: attr(data-th) " "; color: var(--muted); }

  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact__links .btn { flex: 1 1 auto; }

  .footer { padding-bottom: 40px; }
  .footer__inner { flex-direction: column; gap: 16px; }
  .footer__info p span { display: block; }
  .footer__info p span + span::before { display: none; }

  /* 앱 탭바처럼 아이콘 위, 글자 아래. 흰 바탕에 전화만 노란 원으로 강조 */
  .dock {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
    height: 64px; border-radius: var(--radius-l);
    background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(20, 26, 36, .14);
  }
  .dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: var(--caption-1); color: var(--ink-2); }
  .dock__icon { width: 26px; height: 26px; fill: var(--ink-2); flex: 0 0 auto; }
  .dock .dock__call { color: var(--ink); }
  .dock__call .dock__icon { padding: 5px; border-radius: 50%; background: var(--yellow); fill: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}