/* 처음수학 중등부 내신대비반 랜딩(/middle) — 2026-10 포스터·인스타 게시물 1:1 복제 스타일
   WHY: 홈페이지 빌드(vite inlineCss)는 모든 CSS 를 전 페이지에 인라인한다 → 이 팔레트가 홈페이지로 번지지 않게
        public/ 정적 파일로 분리했다. 색은 인스타 원본 이미지에서 k-means 실측(_ref/middle/).
   이 파일은 /admin, /privacy 도 토큰·버튼 공용으로 불러간다. */

:root {
  --sky: #46ccd4;        /* 포스터 배경 청록 */
  --sky-deep: #179ea8;   /* 시간 배지·요일 바 */
  --sky-ice: #ddf2f5;
  --navy: #0d2242;       /* 텍스트·외곽선·무료 박스 */
  --yellow: #f9fa19;     /* 헤드라인 노랑 */
  --yellow-soft: #f9f96b;/* 신청자 특혜 띠 */
  --red: #de2847;        /* 할인·번호 배지 (큰 글씨 전용) */
  --red-text: #c0183a;   /* 오류 문구 등 본문 크기 빨강 — 연한 바탕에서도 대비 5.8:1 */
  --paper: #f6fafb;
  --gray: #4e5968;       /* 흰 바탕 보조 텍스트(대비 7:1) */
  --line: #d5e5ea;
  --shadow: 0 12px 32px rgba(13, 34, 66, 0.16);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* 클래스의 display 가 hidden 속성을 이기지 못하게 */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* landing-workflow 교훈: 등장 애니메이션이 가로 스크롤을 만들지 않게 html·body 둘 다 */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  /* viewport-fit=cover — 노치 아이폰 가로 모드에서 가장자리가 가려지지 않게 */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  font-family: var(--font);
  color: var(--navy);
  background: var(--sky);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ── 버튼 ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 26px;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 18px; font-weight: 900; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn .ic { width: 20px; height: 20px; stroke-width: 2.6; }
.btn--primary { background: var(--navy); color: var(--yellow); box-shadow: 0 6px 0 #05132a; }
.btn--ghost { background: #fff; color: var(--navy); box-shadow: 0 6px 0 rgba(13, 34, 66, 0.22); }
.btn--yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 6px 0 #b9ba00; } /* 남색 바탕 위 버튼 */
.btn:hover { transform: translateY(-2px); }
.btn--primary:hover { box-shadow: 0 8px 0 #05132a; }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #05132a; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }

/* ── 히어로 ─────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  padding: 22px 0 0;
  background:
    radial-gradient(ellipse 70% 55% at 78% 30%, rgba(255, 255, 255, 0.28), transparent 70%),
    var(--sky);
}
/* 수학 노트 모눈 — 포스터의 은은한 결을 웹 디테일로 */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 92%);
  mask-image: linear-gradient(#000 40%, transparent 92%);
}
.hero__stage { display: flex; flex-direction: column; }
.hero__copy { position: relative; z-index: 2; }
.hero__chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 6px 13px;
  background: rgba(255, 255, 255, 0.86); border-radius: 999px;
  font-size: 14px; font-weight: 800;
}
.hero__chip .ic { width: 16px; height: 16px; color: var(--sky-deep); stroke-width: 2.4; }
.hero__chip b { font-weight: 900; }

.hero__title {
  margin: 14px 0 14px;
  font-size: clamp(56px, 17vw, 84px);
  font-weight: 900; line-height: 1.04; letter-spacing: -0.035em;
  /* 포스터의 스티커식 입체감: 네이비 외곽선 + 아래로 떨어지는 그림자 */
  filter: drop-shadow(0 0.055em 0 var(--navy));
}
.hero__title .ln {
  position: relative;
  display: block; width: fit-content;
  -webkit-text-stroke: 0.15em var(--navy);
  paint-order: stroke fill;
}
.ln--white { color: #fff; }
.ln--yellow { color: var(--yellow); font-size: 0.84em; margin: 0.06em 0; }
.ln:last-child { font-size: 1.06em; }
/* 헤드라인 옆 반짝 선 3개 (포스터 장식) */
.spark { position: absolute; top: 46px; left: calc(clamp(56px, 17vw, 84px) * 2.95); width: 34px; height: 40px; }
.spark i {
  position: absolute; left: 0; width: 6px; border-radius: 6px; background: #fff;
  transform-origin: bottom center;
}
.spark i:nth-child(1) { height: 18px; top: 4px; transform: rotate(28deg); left: 18px; }
.spark i:nth-child(2) { height: 22px; top: 12px; transform: rotate(62deg); left: 26px; }
.spark i:nth-child(3) { height: 14px; top: 26px; transform: rotate(92deg); left: 26px; }

.hero__sub {
  margin: 0 0 22px;
  font-size: clamp(17px, 4.4vw, 22px); font-weight: 800; line-height: 1.5;
}
.hero__sub em {
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  padding: 0 2px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.hero__cta .btn { flex: 1 1 220px; }

.hero__art {
  position: relative;
  container-type: inline-size;
  width: 100%; max-width: 540px;
  margin: 26px 0 0 auto;
}
/* 포스터 끝에서 잘린 오른팔의 수직 절단선을 부드럽게 사라지게(원본 이미지 없음 — 폰 사진 컷의 한계 보정) */
.hero__img {
  position: relative; z-index: 1; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 99%);
  mask-image: linear-gradient(to right, #000 88%, transparent 99%);
}
.bubble {
  position: absolute; z-index: 2;
  left: 63%; top: 31%; width: 36%;
  margin: 0; padding: 0.9em 0.35em;
  background: #fff; border-radius: 2.4em;
  box-shadow: 0 8px 20px rgba(13, 34, 66, 0.18);
  text-align: center;
  /* 인물 크기에 비례(cqi)하되 좁은 폰(320px)에서도 14px 아래로 내려가지 않게 */
  font-size: clamp(14px, 3.9vw, 21px);
  font-size: max(14px, 4.5cqi);
  font-weight: 800; line-height: 1.34; letter-spacing: -0.02em;
}
.bubble::before { /* 말꼬리 → 인물 쪽 */
  content: "";
  position: absolute; left: -0.32em; top: 24%;
  width: 0.9em; height: 0.9em;
  background: #fff; transform: rotate(45deg); border-radius: 0.12em;
}
.bubble mark { background: linear-gradient(transparent 52%, var(--yellow) 52%); color: inherit; }
.bubble u {
  text-decoration: underline; text-decoration-color: var(--yellow);
  text-decoration-thickness: 0.24em; text-underline-offset: 0.1em;
}
/* AI 편집 표시 — 인물 가까이, 특징 패널에 가리지 않는 높이 */
.ai-label {
  position: absolute; z-index: 3; left: 2%; bottom: 58px; margin: 0; padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92); color: var(--navy); border-radius: 8px;
  font-size: 14px; font-weight: 800; line-height: 1.3; box-shadow: 0 2px 8px rgba(13, 34, 66, 0.15);
}
@media (min-width: 768px) { .ai-label { bottom: 100px; } }
.doodle { position: absolute; z-index: 0; color: rgba(255, 255, 255, 0.92); }
.doodle--eq {
  top: 0; right: 3%;
  font: italic 600 5.4cqi/1 Georgia, 'Times New Roman', serif;
  letter-spacing: 0.03em;
}
.doodle--tri { top: 0; left: 55%; width: 15cqi; height: 15cqi; stroke-width: 1.3; }
.doodle--box { top: 9%; right: 6%; width: 16cqi; height: 16cqi; stroke-width: 1.2; }

/* ── 특징 3카드 (히어로 하단을 덮는 흰 패널 — 포스터 구도) ─── */
.features { position: relative; z-index: 3; margin-top: -46px; }
.features__list {
  list-style: none; margin-block: 0; padding: 4px 18px;
  background: #fff; border-radius: 22px; box-shadow: var(--shadow);
}
.feature { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature__ic {
  flex: none; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
}
.feature__ic .ic { width: 28px; height: 28px; stroke-width: 2.1; }
.feature__ic--1 { background: #cdeff3; color: #0f7f88; }
.feature__ic--2 { background: #dce6f3; color: var(--navy); }
.feature__ic--3 { background: var(--yellow); color: var(--navy); }
.feature h2 { font-size: 18px; font-weight: 900; line-height: 1.3; }
.feature p { margin: 4px 0 0; font-size: 15px; color: var(--gray); line-height: 1.45; }
/* 한 단어만 다음 줄로 떨어지는 것('뿌리') 방지 */
.feature h2, .feature p, .step__desc, .perk__body strong, .perk__body p, .trial__note { text-wrap: balance; }

/* ── 무료 체험수업 ─────────────────────── */
.trial { padding: 30px 0 0; }
.trial__grid { display: grid; gap: 14px; }
.trial__box {
  background: var(--navy); color: #fff;
  border-radius: 22px; padding: 22px 18px 18px;
  text-align: center; box-shadow: var(--shadow);
}
.trial__box h2 { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.trial__free {
  color: var(--yellow);
  font-size: clamp(56px, 16vw, 80px); font-weight: 900; line-height: 1;
  letter-spacing: -0.02em;
}
.trial__title { font-size: clamp(31px, 8.6vw, 44px); font-weight: 900; line-height: 1.2; letter-spacing: -0.03em; }
.trial__sched { background: #fff; color: var(--navy); border-radius: 16px; padding: 16px 14px; }
.trial__label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 10px; font-size: 17px; font-weight: 800;
}
.trial__label .ic { width: 22px; height: 22px; }
.trial__days {
  margin: 0 0 10px; padding: 9px 0;
  background: var(--sky-deep); color: #fff; border-radius: 999px;
  font-size: clamp(20px, 5.4vw, 25px); font-weight: 900; letter-spacing: 0.08em;
}
.trial__time {
  margin: 0; white-space: nowrap; /* '~ 8시'만 다음 줄로 떨어지지 않게 — 크기는 화면폭에 맞춰 줄인다 */
  font-size: clamp(26px, 8.6vw, 48px); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em;
}
.trial__time small { font-size: max(14px, 0.42em); font-weight: 800; color: var(--gray); vertical-align: 0.35em; }

.trial__steps {
  list-style: none; margin: 0; padding: 18px;
  display: grid; gap: 30px; align-content: center;
  background: rgba(255, 255, 255, 0.94); border-radius: 22px; box-shadow: var(--shadow);
}
.step {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.step:hover { transform: translateY(-3px); border-color: var(--sky); }
.step + .step::before { /* ▼ 진행 화살표 */
  content: "";
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
  border: 10px solid transparent; border-bottom: 0; border-top: 12px solid var(--sky-deep);
}
.step__ic {
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--sky-ice); color: var(--navy);
}
.step__ic .ic { width: 34px; height: 34px; stroke-width: 1.7; }
/* 배지 위·제목 아래로 고정 — 제목 길이에 따라 한 단계만 줄이 갈리던 불일치 제거 */
.step__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.step__head strong { font-size: clamp(19px, 5vw, 23px); font-weight: 900; letter-spacing: -0.02em; }
.pill {
  padding: 4px 14px; border-radius: 999px;
  background: var(--sky-deep); color: #fff;
  font-size: 19px; font-weight: 900; line-height: 1.3; /* 19px 굵게 = 큰 글씨 기준 → 포스터 청록 유지하며 대비 통과 */
}
.step__desc { margin: 6px 0 0; font-size: 15.5px; color: var(--gray); }
.trial__note {
  margin-top: 14px; margin-bottom: 0; padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6); border-radius: 16px;
  font-size: 15.5px; text-align: center;
}
.trial__note b { font-weight: 900; }

/* ── 신청자 특혜 (노란 띠) ─────────────── */
.perks { padding: 18px 0 0; }
.perks__inner {
  display: grid; gap: 10px; padding: 14px;
  background: var(--yellow-soft); border-radius: 22px;
  box-shadow: inset 0 0 0 3px var(--yellow), var(--shadow);
}
.perks__tag { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0; }
.perks__tag .ic { width: 32px; height: 32px; color: var(--red); stroke-width: 2.2; }
.perks__tag h2 { font-size: 22px; font-weight: 900; line-height: 1.2; }
.perks__tag br { display: none; }
.perk {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 64px 16px 16px;
  background: #fff; border-radius: 16px;
}
.perk__num {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; margin-top: 1px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 16px; font-weight: 900;
}
.perk__body strong { display: block; font-size: clamp(17px, 4.7vw, 20px); font-weight: 900; line-height: 1.35; }
.perk__body p { margin: 4px 0 0; font-size: 15px; color: var(--gray); }
.perk__body .perk__big {
  margin: 2px 0 8px; white-space: nowrap; /* '30% / 할인'으로 갈리지 않게 */
  color: var(--red); font-size: clamp(30px, 9.4vw, 44px); font-weight: 900; line-height: 1.1;
}
.perk__body .perk__limit {
  display: inline-block; margin: 0; padding: 5px 14px; white-space: nowrap;
  background: var(--yellow); color: var(--navy); border-radius: 999px;
  font-size: 15px; font-weight: 800;
}
.perk__limit b { color: var(--red); font-size: 1.3em; } /* 큰 글씨 기준으로 노랑 위 빨강 대비 확보 */
.perk__ic {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; color: var(--navy); stroke-width: 1.6;
}
.perk__ic--tag { color: var(--red); transform: translateY(-50%) rotate(-12deg); }

/* ── 신청서 ─────────────────────────────── */
.apply { padding: 40px 0 56px; scroll-margin-top: 8px; }
.apply__card {
  max-width: 620px; margin: 0 auto; padding: 28px 20px 24px;
  background: #fff; border-radius: 26px; box-shadow: var(--shadow);
}
.apply__eyebrow {
  width: fit-content; margin: 0 auto 6px; padding: 4px 14px;
  background: var(--yellow); border-radius: 999px;
  font-size: 14px; font-weight: 900;
}
.apply h2 { text-align: center; font-size: clamp(28px, 7.6vw, 36px); font-weight: 900; letter-spacing: -0.03em; }
.apply__lead { margin: 8px 0 24px; text-align: center; font-size: 15.5px; color: var(--gray); }
.field { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; margin-bottom: 7px; padding: 0; font-size: 15px; font-weight: 800; }
.req { color: var(--red); }
.opt { font-size: 14px; font-weight: 500; color: var(--gray); }
.field input[type="text"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; font-size: 16px; /* iOS 확대 방지 */
  color: var(--navy); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sky-deep); background: #fff; box-shadow: 0 0 0 3px rgba(70, 204, 212, 0.35); }
.field [aria-invalid="true"] { border-color: var(--red); background: #fff6f8; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field__hint { margin: 8px 0 0; font-size: 14px; color: var(--gray); }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.days label { position: relative; margin: 0; }
.days input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.days span {
  display: grid; place-items: center; min-height: 50px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 18px; font-weight: 900; cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.days input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--yellow); transform: translateY(-2px); }
.days input:focus-visible + span { outline: 3px solid var(--sky-deep); outline-offset: 2px; }
.days input[aria-invalid="true"] + span { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { margin: 4px 0 18px; padding: 6px 14px; background: var(--paper); border-radius: 12px; font-size: 15px; }
/* 터치 영역 44px 이상 — 라벨 전체가 체크박스 */
.check { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; font-weight: 700; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--navy); }
.check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }
.consent details { font-size: 14.5px; color: var(--gray); }
.consent summary { display: list-item; min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 800; color: #0f7f88; }
.consent dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 10px 0 8px; }
.consent dt { font-weight: 800; color: var(--navy); }
.consent dd { margin: 0; }
.consent details p { margin: 0 0 8px; }
.consent details a { display: inline-block; min-height: 44px; padding: 12px 0; }
.field__err { margin: 7px 0 0; font-size: 14.5px; font-weight: 800; color: var(--red-text); }
.consent .field__err { margin: 0 0 8px; padding: 6px 10px; background: #fff; border-radius: 8px; }
.form-error { margin: 0 0 12px; font-weight: 800; color: var(--red-text); }
.form-note { margin: 0 0 12px; padding: 10px 12px; background: var(--sky-ice); border-radius: 10px; font-weight: 700; }
.form-reload { margin-bottom: 12px; border: 2px solid var(--navy); }
.apply__alt { margin: 10px 0 0; text-align: center; font-size: 15px; color: var(--gray); }
.apply__alt a { display: inline-block; padding: 12px 0; font-weight: 900; color: var(--navy); }
/* 접수 완료 후: '신청서 작성' 머리말은 숨기고 완료 안내만 / 하단 바는 전화 버튼만 */
.apply__card.is-done .apply__eyebrow, .apply__card.is-done h2, .apply__card.is-done .apply__lead { display: none; }
.applied .dock__apply { display: none; }
.applied .dock { grid-template-columns: 1fr; }
.apply__done { padding: 18px 0 6px; text-align: center; }
.apply__done:focus { outline: none; }
.apply__done .ic { width: 68px; height: 68px; margin: 0 auto 12px; color: var(--sky-deep); stroke-width: 1.8; }
.apply__done h3 { font-size: 24px; font-weight: 900; }
.apply__done p { margin: 10px 0 0; font-size: 16px; }

/* ── 푸터 (포스터 하단 흰 띠) ─────────────── */
.foot { padding: 26px 0 34px; background: #fff; border-top: 6px solid var(--yellow); }
.foot__brand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
.foot__name { font-size: clamp(28px, 7.6vw, 38px); font-weight: 900; letter-spacing: -0.03em; }
.foot__bar { width: 2px; height: 30px; background: var(--navy); opacity: 0.45; }
.foot__tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-size: clamp(26px, 7.2vw, 38px); font-weight: 900; letter-spacing: -0.01em; text-decoration: none;
}
.foot__tel .ic { width: 1.05em; height: 1.05em; padding: 0.2em; background: var(--navy); color: #fff; border-radius: 50%; stroke-width: 2.4; }
.foot__visit {
  display: grid; gap: 12px; max-width: 620px; margin: 20px auto 0; padding: 14px 16px;
  background: var(--paper); border-radius: 16px;
}
.foot__addr { display: flex; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.foot__addr .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--sky-deep); }
.foot__addr small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--gray); }
.foot__maps { display: flex; gap: 8px; }
.foot__maps a {
  flex: 1; display: grid; place-items: center; min-height: 46px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 15px; font-weight: 800; text-decoration: none;
}
.foot__maps a:hover { border-color: var(--sky-deep); }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  max-width: 620px; margin: 18px auto 0; font-size: 14px; color: var(--gray);
}
.foot__legal div { display: flex; gap: 6px; }
.foot__legal dt { font-weight: 800; }
.foot__legal dd { margin: 0; }
.foot__links { display: flex; justify-content: center; gap: 8px; margin: 4px 0 0; font-size: 14px; }
.foot__links a { display: inline-block; padding: 12px 8px; color: var(--gray); }

/* ── 모바일 하단 고정 바 ─────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -6px 22px rgba(13, 34, 66, 0.14);
  transition: transform 0.25s ease;
}
.dock.is-hidden { transform: translateY(115%); }
.dock a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; border-radius: 14px;
  font-size: 17px; font-weight: 900; text-decoration: none;
}
.dock .ic { width: 19px; height: 19px; stroke-width: 2.5; }
.dock__call { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.dock__apply { background: var(--navy); color: var(--yellow); }
@media (max-width: 767px) {
  .foot { padding-bottom: calc(34px + 76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 479px) {
  .foot__brand { flex-direction: column; }
  .foot__bar { display: none; }
}
/* 320~359px: 특혜 카드 오른쪽 장식 아이콘을 빼서 '선착순 10명 한정' 알약이 한 줄에 들어가게 */
@media (max-width: 359px) {
  .perk { padding-right: 16px; }
  .perk__ic { display: none; }
  .times div { flex-direction: column; gap: 2px; } /* 요일 위·시간 아래 — 시간 줄이 카드 폭을 넘지 않게 */
}

/* ── 태블릿·데스크탑: 포스터처럼 좌우 구도 ─────────── */
@media (min-width: 768px) {
  .hero { padding-top: 48px; }
  .hero__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 0 12px; }
  .hero__copy { align-self: center; padding-bottom: 104px; }
  .hero__title { font-size: clamp(64px, 8.4vw, 112px); }
  .spark { top: 64px; left: calc(clamp(64px, 8.4vw, 112px) * 2.95); }
  .hero__cta .btn { flex: 0 1 auto; }
  .hero__art { max-width: 560px; margin: 0; justify-self: end; }
  .features { margin-top: -88px; }
  .features__list { display: grid; grid-template-columns: repeat(3, 1fr); padding: 24px 8px; }
  .feature { padding: 4px 18px; align-items: flex-start; } /* 3열 제목 윗선 맞춤 */
  .feature + .feature { border-top: 0; border-left: 1px solid var(--line); }
  .trial { padding-top: 22px; }
  .trial__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 18px; }
  .trial__box { display: flex; flex-direction: column; justify-content: center; padding: 26px 26px 24px; }
  .trial__steps { padding: 24px; gap: 34px; }
  .step { padding: 20px; }
  .step__ic { width: 72px; height: 72px; }
  /* 태블릿(768~950)에서 박스가 좁아 큰 숫자가 줄바꿈되던 것 — 화면폭 비례로 줄인다 */
  .trial__time { font-size: clamp(28px, 4vw, 48px); }
  .perk__body .perk__big { font-size: clamp(30px, 4.6vw, 44px); }
  .perks__inner { grid-template-columns: 112px 1fr 1fr; align-items: stretch; padding: 16px; }
  .perks__tag { flex-direction: column; text-align: center; }
  .perk { align-items: center; } /* 두 카드 높이가 달라도 내용이 가운데 — 1번 카드 아래가 비어 보이지 않게 */
  .perks__tag br { display: inline; }
  .apply__card { padding: 40px 44px 34px; }
  .dock { display: none; }
}
@media (min-width: 1080px) {
  .feature h2 { font-size: 20px; }
}

/* ── 혜택 요약 띠 (특징 카드 바로 아래) ─────────── */
.offer { padding-top: 14px; }
.offer__inner { display: grid; gap: 16px; padding: 20px; background: var(--navy); color: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.offer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offer__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.offer__list .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--yellow); stroke-width: 3; }
.offer__list b { color: var(--yellow); }
.offer__list small { font-size: 14px; color: #c9d4e4; white-space: nowrap; }
.offer__meta { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 15px; font-weight: 600; line-height: 1.6; color: #c9d4e4; }
.offer__meta b { color: #fff; }
.offer__meta span { display: block; } /* 줄 끝에 구분점만 남지 않게 항목마다 한 줄 */
.nw { white-space: nowrap; } /* '화·토'·'(선착순 10명)'처럼 중간에서 꺾이면 안 되는 묶음 */
.offer :focus-visible { outline-color: var(--yellow); } /* 남색 바탕에서 기본(남색) 포커스 링이 안 보임 */

/* ── 상세 섹션 공통 (2026-10 추가: 교육관·수업 방식·정규반·원장·FAQ) ─────────── */
.sec { padding: 46px 0 0; }
.sec-head { margin-bottom: 22px; text-align: center; }
.sec-eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 5px 14px;
  background: var(--navy); color: var(--yellow); border-radius: 999px;
  font-size: 14px; font-weight: 900; letter-spacing: 0.02em;
}
.sec-title { font-size: clamp(27px, 7.2vw, 42px); font-weight: 900; line-height: 1.28; letter-spacing: -0.035em; text-wrap: balance; } /* 320px 에서 '이유' 같은 한 단어 줄 방지 */
.sec-title mark { background: linear-gradient(transparent 58%, var(--yellow) 58%); color: inherit; padding: 0 0.08em; }
.sec-lead { max-width: 660px; margin: 14px auto 0; font-size: 16.5px; line-height: 1.75; text-wrap: pretty; }
.sec-cta { margin-top: 24px; text-align: center; }
.panel { padding: 30px 20px; background: #fff; border-radius: 26px; box-shadow: var(--shadow); text-align: center; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 28px; line-height: 1.55; }
.ticks li::before { /* CSS 체크 표시 */
  content: ""; position: absolute; left: 5px; top: 0.42em;
  width: 11px; height: 6px; border-left: 3px solid #0f7f88; border-bottom: 3px solid #0f7f88; transform: rotate(-45deg);
}

/* 고민 공감 */
.worry__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.worry__list li { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--paper); border-radius: 14px; font-size: 16px; font-weight: 600; line-height: 1.55; }
.worry__list .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--red-text); }
.quote {
  position: relative; margin: 26px 0 0; padding: 24px 20px 20px;
  background: var(--navy); color: #fff; border-radius: 18px; text-align: left;
}
.quote::before { content: "\201C"; position: absolute; top: -20px; left: 16px; font: 900 64px/1 Georgia, serif; color: var(--yellow); }
.quote p { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.75; }
.quote b { color: var(--yellow); }
.quote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: #c9d4e4; }
.quote--light { margin: 0; background: var(--sky-ice); color: var(--navy); }
.quote--light cite { color: var(--gray); }

/* 교육관 */
.philo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.philo__item { padding: 22px 20px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.philo__num { display: block; font-size: 40px; font-weight: 900; line-height: 1; color: var(--sky-deep); letter-spacing: -0.02em; }
.philo__item h3 { margin: 10px 0 8px; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; }
.philo__item p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--gray); }
.philo__item b { color: var(--navy); }

/* 수업 진행 6단계 */
.process__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step2 { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.step2__ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--yellow); color: var(--navy); }
.step2__ic .ic { width: 26px; height: 26px; }
.step2__no { margin: 0; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; color: #0f7f88; }
.step2 h3 { margin: 2px 0 6px; font-size: 19px; font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; }
.step2 div > p:last-child { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--gray); }
.process__note {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.65); border-radius: 16px; font-size: 16px; line-height: 1.65;
}
.process__note .ic { flex: none; width: 26px; height: 26px; color: var(--navy); }

/* 정규반 안내 */
/* minmax(0,…): 칸이 안의 긴 시간표 줄 폭만큼 늘어나 320px 에서 화면 밖으로 9px 밀려났다(overflow-x:clip 이라 가로 스크롤 측정엔 안 잡힘) */
.classes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.class-card { padding: 22px 20px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.class-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 19px; font-weight: 900; }
.class-card h3 .ic { width: 24px; height: 24px; color: #0f7f88; }
.class-card--fee { background: var(--yellow-soft); }
.times { margin: 0; display: grid; gap: 8px; }
.times div { display: flex; gap: 12px; padding: 10px 12px; background: var(--paper); border-radius: 12px; }
.times dt { flex: none; width: 62px; font-weight: 900; }
.times dd { margin: 0; font-weight: 700; line-height: 1.5; }
.fee { margin: 0; font-size: 18px; font-weight: 800; }
.fee b { font-size: 2em; font-weight: 900; color: var(--red); letter-spacing: -0.02em; }
.class-card__note { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--gray); }
.class-card--fee .class-card__note { color: var(--navy); }
.class-card--fee .btn { margin-top: 16px; }

/* 원장 소개 */
.director__card { padding: 26px 20px; background: #fff; border-radius: 28px; box-shadow: var(--shadow); }
.director__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* 320px: 이름표가 사진 옆에 안 들어가면 아래로 */
.director__photo {
  flex: none; width: 108px; height: 108px; object-fit: cover; border-radius: 50%;
  border: 4px solid var(--yellow); box-shadow: 0 6px 16px rgba(13, 34, 66, 0.15);
}
.director__head .sec-eyebrow { margin-bottom: 4px; }
.director__name { font-size: clamp(26px, 6.8vw, 34px); font-weight: 900; letter-spacing: -0.03em; }
.director__role { margin: 16px 0 0; font-size: 16px; font-weight: 600; line-height: 1.65; color: var(--gray); }
.director__body { display: grid; gap: 18px; margin-top: 22px; }
.director__profile li { font-weight: 700; }
.history { margin-top: 24px; padding-top: 22px; border-top: 2px dashed var(--line); }
.history__title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 19px; font-weight: 900; }
.history__title .ic { width: 24px; height: 24px; color: #0f7f88; }
.history__list { list-style: none; margin: 0 0 0 8px; padding: 0 0 0 18px; display: grid; gap: 14px; border-left: 3px solid var(--sky); }
.history__list li { position: relative; display: grid; align-content: start; gap: 2px; } /* 가로 배치 때 칸 높이가 달라도 글자를 윗선에 */
.history__list li::before {
  content: ""; position: absolute; left: -28px; top: 4px;
  width: 13px; height: 13px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--navy);
}
.history__list b { font-size: 15px; font-weight: 900; color: #0f7f88; }
.history__list span { font-weight: 700; }
.history__words { margin: 18px 0 0; padding: 14px 16px; background: var(--paper); border-radius: 14px; font-weight: 700; line-height: 1.7; }
.history__words cite { display: block; margin-top: 6px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--gray); }

/* FAQ — 네이티브 details(스크립트 없이 열고 닫힘·키보드 지원) */
.faq__list { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.faq details { background: #fff; border-radius: 16px; box-shadow: 0 4px 14px rgba(13, 34, 66, 0.08); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 14px 18px; list-style: none; cursor: pointer;
  font-size: 16.5px; font-weight: 800; line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  /* 두 번째 줄 = 화면낭독기가 '+'를 읽지 않게(대체 텍스트 빈칸). 미지원 브라우저는 첫 줄로 */
  content: "+"; content: "+" / ""; flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  background: var(--sky-ice); border-radius: 50%; font-size: 20px; font-weight: 900; color: var(--navy);
}
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; background: var(--yellow); }
.faq details p { margin: 0; padding: 0 18px 18px; font-size: 15.5px; line-height: 1.75; color: var(--gray); }

@media (min-width: 768px) {
  .sec { padding-top: 64px; }
  .panel { padding: 44px 40px; }
  .worry__list { grid-template-columns: 1fr 1fr; }
  .philo__list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .process__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* 768~1079: 3열이면 칸이 좁아 시간표가 꺾인다 → 2열 + 수업료 카드는 아래 전체 폭 */
  .classes__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .class-card--fee { grid-column: 1 / -1; }
  .offer__inner { grid-template-columns: 1fr auto; align-items: center; padding: 20px 28px; }
  .director__card { padding: 38px 42px; }
  .director__photo { width: 140px; height: 140px; }
  .director__body { grid-template-columns: 1fr 1.1fr; align-items: start; }
}
@media (min-width: 1080px) {
  .process__list { grid-template-columns: repeat(3, 1fr); }
  .classes__grid { grid-template-columns: repeat(3, 1fr); }
  .class-card--fee { grid-column: auto; }
  .offer__list { grid-template-columns: repeat(3, auto); gap: 8px 24px; }
  /* 연혁 가로 5칸은 1080px 이상에서만 — 그 아래는 칸이 좁아 '·확장'처럼 줄 첫머리가 깨졌다 */
  .history__list { grid-template-columns: repeat(5, 1fr); margin: 0; padding: 18px 0 0; gap: 16px; border-left: 0; border-top: 3px solid var(--sky); }
  .history__list li::before { left: 0; top: -27px; }
}

/* ── 모션 (모션 줄이기 설정이면 전부 끔) ─────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .ln { animation: pop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  .hero__title .ln:nth-child(2) { animation-delay: 0.12s; }
  .hero__title .ln:nth-child(3) { animation-delay: 0.24s; }
  .spark { animation: fade 0.5s ease 0.6s both; }
  /* WHY: 인물 이미지가 LCP 요소 — 투명도 애니메이션은 LCP 를 늦춘다 → 위치 이동만 */
  .hero__img { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .bubble { animation: pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.8s both; transform-origin: 0 40%; }
  .doodle { animation: bob 6s ease-in-out infinite; }
  .doodle--tri { animation-delay: -2s; }
  .doodle--box { animation-delay: -4s; }
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .feature__ic { transition: transform 0.25s cubic-bezier(0.2, 1.5, 0.4, 1); }
  .feature:hover .feature__ic { transform: rotate(-8deg) scale(1.08); }
}
@keyframes pop { from { opacity: 0; transform: scale(0.6) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: translateY(40px); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(3deg); } }