@charset "utf-8";

/* ==========================================================================
   POPPLE Kids Free Trial Landing V1  (POPPLE-LP-KIDS-001)
   Mobile First / 390px 기준 설계 → 768px → 1024px 확장
   기준 문서: DESIGN-SYSTEM.md v1.0
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* 브랜드 컬러 — poppleonline.com 실사용 값 기준 (#8139fa) */
  --color-primary:        #8139FA;
  --color-primary-dark:   #6A20E0;
  --color-primary-deep:   #3B0B84;
  --color-primary-light:  #F3EAFF;
  --color-primary-tint:   #FAF6FF;

  --color-secondary:      #1066D6;
  --color-secondary-light:#EAF2FE;

  --color-text:           #1F2937;
  --color-text-strong:    #111827;
  --color-text-soft:      #6B7280;
  --color-text-faint:     #9CA3AF;

  --color-background:     #FFFFFF;
  --color-background-soft:#F7F8FA;
  --color-line:           #E5E7EB;
  --color-line-soft:      #F0F1F3;

  --color-danger:         #DC2626;
  --color-danger-bg:      #FEF2F2;
  --color-success:        #059669;

  /* Spacing — 8px 단위 */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 40px;  --sp-6: 48px;  --sp-8: 64px;  --sp-10: 80px;  --sp-12: 96px;

  /* Layout */
  --wrap-max:  1200px;
  --wrap-body: 1080px;
  --wrap-text: 860px;
  --gutter:    20px;

  /* Radius */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .05);
  --sh-md: 0 4px 12px rgba(17, 24, 39, .07), 0 2px 4px rgba(17, 24, 39, .04);
  --sh-lg: 0 12px 32px rgba(17, 24, 39, .10), 0 4px 8px rgba(17, 24, 39, .04);
  --sh-cta: 0 6px 18px rgba(129, 57, 250, .32);

  /* Sticky CTA 높이 — 본문 하단 여백 계산에 재사용 */
  --sticky-h: 68px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* --------------------------------------------------------------------------
   02. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 스티키 헤더 높이만큼 앵커 오프셋 */
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 가로 스크롤 원천 차단 */
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------------
   03. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap-body);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--text { max-width: var(--wrap-text); }

.section { padding-block: 56px; }
.section--tight { padding-block: 44px; }
.section--soft  { background: var(--color-background-soft); }
.section--brand { background: var(--color-primary-tint); }
.section--deep  {
  background: linear-gradient(160deg, var(--color-primary-deep) 0%, var(--color-primary) 100%);
  color: #fff;
}

.section__head { text-align: center; margin-bottom: var(--sp-4); }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.section--deep .eyebrow { color: #D9C2FF; }

.h2 {
  font-size: 28px;
  line-height: 1.34;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
}
.section--deep .h2 { color: #fff; }

.lead {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-soft);
}
.section--deep .lead { color: rgba(255, 255, 255, .82); }

.mark { color: var(--color-primary); }
.mark-hl {
  background: linear-gradient(transparent 58%, var(--color-primary-light) 58%);
  padding-inline: 2px;
}
.nowrap { white-space: nowrap; }


/* --------------------------------------------------------------------------
   04. CTA BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 60px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.995); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--sh-cta);
}
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--onDeep {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.btn--onDeep:hover { background: #F6F0FF; }

.btn--ghost {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  min-height: 56px;
  font-size: 16px;
  box-shadow: none;
}
.btn--ghost:hover { background: var(--color-primary-light); }

.btn__arrow { font-size: 18px; line-height: 1; transform: translateY(-1px); }

/* CTA 아래 안심 문구 */
.cta-note {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-soft);
}
.section--deep .cta-note { color: rgba(255, 255, 255, .78); }

/* 섹션 하단 CTA 블록 */
.cta-block { margin-top: var(--sp-4); }


/* --------------------------------------------------------------------------
   05. HEADER  (메뉴 없음 — 광고 랜딩 원칙)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 56px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-line-soft);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* 접근성: 로고가 링크일 때 최소 터치 타깃 */
}
.site-header__logo img { height: 26px; width: auto; }

.site-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;      /* 접근성: 최소 터치 타깃 */
  padding: 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   06. HERO  — 390px 첫 화면 안에 헤드라인/USP/비주얼/CTA 전부 노출
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 20px 0 36px;
  background:
    radial-gradient(120% 70% at 100% 0%, var(--color-primary-light) 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--color-primary-tint) 100%);
  overflow: hidden;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.hero__title {
  margin-top: 12px;
  font-size: 33px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -.032em;
  color: var(--color-text-strong);
}
.hero__title strong { font-weight: 800; color: var(--color-primary); }

.hero__sub {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--color-text-soft);
}
.hero__sub b {
  display: block;
  margin-top: 2px;
  font-weight: 800;
  color: var(--color-text-strong);
}

/* --- Hero 비주얼: 실제 강사 사진 기반 1:1 화상수업 목업 ---
   선생님 타일 + 아이 타일을 나란히 두어 "1:1" 을 한눈에 읽히게 한다.
   인물 사진은 원본 세로 비율(264:374)에 가까운 3:4 타일에 담아 왜곡·과크롭을 피한다. */
.hero__visual {
  position: relative;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #2B1055 0%, #5B21C9 100%);
  box-shadow: var(--sh-lg);
}

.hero__tile {
  position: relative;
  aspect-ratio: 3 / 4;      /* CLS 방지: 높이를 미리 선점 */
  border-radius: 11px;
  overflow: hidden;
  background: #EEF0F6;
}
.hero__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 4%;
}
.hero__tile--child {
  display: grid;
  place-items: center;
  background: linear-gradient(170deg, #EDF1FF 0%, #DCE5FF 100%);
}
.hero__tile--child svg { width: 46%; height: auto; }

/* 타일 하단 이름표 — 사진 위 가독성을 위해 스크림 포함 */
.hero__tile-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 8px 6px;
  background: linear-gradient(180deg, transparent 0%, rgba(17, 24, 39, .72) 62%);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -.01em;
}
.hero__tile-name b {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: #D9C2FF;
  letter-spacing: .04em;
}

.hero__live {
  position: absolute;
  top: 7px;
  left: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: rgba(17, 24, 39, .74);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF4D4F;
}

/* --- Hero USP 칩 --- */
.hero__usp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.hero__usp li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid #E7DBFF;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-deep);
  white-space: nowrap;
}
.hero__usp li::before {
  content: "✓";
  font-size: 11px;
  font-weight: 900;
  color: var(--color-primary);
}

.hero__cta { margin-top: 16px; }


/* --------------------------------------------------------------------------
   07. PROBLEM
   -------------------------------------------------------------------------- */
.problem__list { display: grid; gap: 10px; margin-top: var(--sp-3); }

.problem__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px 16px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--color-line);
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--color-text);
  box-shadow: var(--sh-sm);
}
.problem__item::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-danger-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.problem__turn {
  margin-top: var(--sp-3);
  padding: 22px 20px;
  border-radius: var(--r-lg);
  background: var(--color-primary-deep);
  color: #fff;
  text-align: center;
}
.problem__turn p { font-size: 15px; color: rgba(255, 255, 255, .78); }
.problem__turn strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -.02em;
}


/* --------------------------------------------------------------------------
   08. SOLUTION
   -------------------------------------------------------------------------- */
.solution__body {
  margin-top: var(--sp-3);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-soft);
  text-align: center;
}
.solution__body p + p { margin-top: 14px; }
.solution__body b { color: var(--color-text-strong); font-weight: 700; }

.shift {
  margin-top: var(--sp-4);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.shift__row {
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.shift__row + .shift__row { border-top: 1px solid var(--color-line-soft); }
.shift__row--head {
  background: var(--color-background-soft);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-text-soft);
  letter-spacing: -.01em;
}
.shift__from { color: var(--color-text-faint); font-weight: 600; }
.shift__to   { color: var(--color-primary-deep); font-weight: 800; }
.shift__arrow {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 900;
}


/* --------------------------------------------------------------------------
   09. WHY POPPLE / USP
   -------------------------------------------------------------------------- */
.usp__list { display: grid; gap: 12px; margin-top: var(--sp-3); }

.usp__item {
  position: relative;
  padding: 20px 18px 20px 18px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--sh-sm);
}
.usp__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 12px;
}
.usp__title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
}
.usp__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-soft);
}


/* --------------------------------------------------------------------------
   10. TEACHERS
   -------------------------------------------------------------------------- */
.teachers__scroller {
  margin-top: var(--sp-3);
  /* 좌우 gutter 를 벗어나 화면 끝까지 스크롤되도록 */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.teachers__scroller::-webkit-scrollbar { display: none; }

.teacher-card {
  flex: 0 0 232px;
  scroll-snap-align: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.teacher-card__photo {
  position: relative;
  aspect-ratio: 264 / 374;   /* 크롭 원본 비율 그대로 — 왜곡 없음 */
  background: linear-gradient(180deg, #F4F6FA 0%, #E9EDF5 100%);
}
.teacher-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}
.teacher-card__cert {
  position: absolute;
  left: 8px; bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--color-primary-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}
.teacher-card__body { padding: 14px 14px 16px; }
.teacher-card__name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
}
.teacher-card__name span {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-faint);
}
.teacher-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.teacher-card__tags li {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-deep);
  font-size: 11.5px;
  font-weight: 700;
}
.teacher-card__fit {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed var(--color-line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-soft);
}
.teacher-card__fit b { color: var(--color-primary); font-weight: 800; }

.teachers__hint {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-faint);
}

.teachers__criteria {
  margin-top: var(--sp-3);
  display: grid;
  gap: 8px;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: var(--color-primary-tint);
  border: 1px solid #EADFFF;
}
.teachers__criteria dt {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary-deep);
  margin-bottom: 4px;
}
.teachers__criteria li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}
.teachers__criteria li::before {
  content: "✓";
  position: absolute;
  left: 2px; top: 0;
  font-size: 12px;
  font-weight: 900;
  color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   11. HOW IT WORKS
   -------------------------------------------------------------------------- */
.steps { margin-top: var(--sp-3); display: grid; gap: 0; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding-bottom: 22px;
}
.step:last-child { padding-bottom: 0; }

/* 세로 연결선 */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px; top: 40px; bottom: 2px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-line));
}
.step__num {
  position: relative;
  z-index: 1;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 900;
}
.step--last .step__num { background: var(--color-primary); color: #fff; }

.step__title {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
  padding-top: 8px;
}
.step__desc {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.how__emphasis {
  margin-top: var(--sp-3);
  padding: 18px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 2px solid var(--color-primary);
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-primary-deep);
}
.how__emphasis span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-soft);
}


/* --------------------------------------------------------------------------
   12. REVIEWS
   -------------------------------------------------------------------------- */
.reviews__list { display: grid; gap: 14px; margin-top: var(--sp-3); }

.review {
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--sh-sm);
}
.review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.review__meta span {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--color-background-soft);
  border: 1px solid var(--color-line);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-soft);
}

.review__change {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--color-background-soft);
}
.review__ba {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
}
.review__ba dt {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 4px 0;
  text-align: center;
  border-radius: 5px;
  white-space: nowrap;   /* BEFORE 가 두 줄로 깨지지 않도록 */
}
.review__ba--before dt { background: #F1F2F4; color: var(--color-text-faint); }
.review__ba--after  dt { background: var(--color-primary); color: #fff; }
.review__ba--before dd { color: var(--color-text-soft); }
.review__ba--after  dd { color: var(--color-text-strong); font-weight: 700; }

.review__arrow {
  text-align: center;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.review__quote {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}
.review__quote::before { content: "“"; }
.review__quote::after  { content: "”"; }

.reviews__disclaimer {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-faint);
  text-align: center;
}


/* --------------------------------------------------------------------------
   13. CLASS OPTIONS
   -------------------------------------------------------------------------- */
.options { display: grid; gap: 14px; margin-top: var(--sp-3); }

.option-group {
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--sh-sm);
}
.option-group__label {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.option-group__items { display: flex; flex-wrap: wrap; gap: 8px; }
.option-group__items li {
  flex: 1 1 0;
  min-width: 88px;
  padding: 14px 8px;
  border-radius: var(--r-md);
  background: var(--color-primary-tint);
  border: 1px solid #EADFFF;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-primary-deep);
  letter-spacing: -.02em;
}
.option-group__items li small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-soft);
}

.options__note {
  margin-top: var(--sp-3);
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: var(--color-primary-deep);
  color: #fff;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
}
.options__note b { display: block; font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.options__note span { color: rgba(255, 255, 255, .8); }


/* --------------------------------------------------------------------------
   14. OFFER
   -------------------------------------------------------------------------- */
.offer__card {
  margin-top: var(--sp-3);
  padding: 26px 20px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: var(--sh-lg);
  text-align: center;
}
.offer__tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}
.offer__name {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-soft);
}
.offer__price {
  margin-top: 4px;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--color-primary);
}
.offer__price small {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-soft);
  letter-spacing: 0;
  margin-top: 4px;
}
.offer__includes {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--color-line);
  text-align: left;
}
.offer__includes li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--color-text);
}
.offer__includes li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}


/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { margin-top: var(--sp-3); border-top: 1px solid var(--color-line); }

.faq__item { border-bottom: 1px solid var(--color-line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 0;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-text-strong);
}
.faq__q::before {
  content: "Q";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
  margin-top: 1px;
}
.faq__icon {
  flex: 0 0 auto;
  margin-left: auto;
  width: 20px; height: 20px;
  position: relative;
  margin-top: 3px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: var(--color-text-soft);
  transform: translate(-50%, -50%);
  transition: transform .22s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 0 18px 32px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-soft);
}


/* --------------------------------------------------------------------------
   16. LEAD FORM
   -------------------------------------------------------------------------- */
/* 주의: 텍스트 유틸리티 .lead 와 이름이 겹치지 않도록 섹션은 .lead-section 을 쓴다 */
.lead-section { background: var(--color-primary-tint); }

.lead__card {
  margin-top: var(--sp-3);
  padding: 24px 18px 26px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid #EADFFF;
  box-shadow: var(--sh-lg);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* CTA 로 스크롤 도착했음을 알리는 짧은 하이라이트 */
.lead__card.is-highlight {
  border-color: var(--color-primary);
  box-shadow: var(--sh-lg), 0 0 0 4px rgba(129, 57, 250, .18);
}

.lead__reassure {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--color-primary-light);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-primary-deep);
}
.lead__reassure svg { flex: 0 0 auto; }

.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }

.field__label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-strong);
}
.field__req { color: var(--color-primary); margin-left: 2px; }
.field__opt {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-faint);
}

.field__control {
  width: 100%;
  height: 54px;
  padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: 16px;   /* iOS 자동 확대 방지 최소값 */
  color: var(--color-text-strong);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field__control::placeholder { color: var(--color-text-faint); }
.field__control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(129, 57, 250, .16);
}
select.field__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
}
select.field__control:invalid { color: var(--color-text-faint); }

.field.is-error .field__control {
  border-color: var(--color-danger);
  /* background 단축속성을 쓰면 select 의 화살표 background-image 가 지워진다 */
  background-color: var(--color-danger-bg);
}
.field.is-error .field__control:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .14);
}

.field__error {
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-danger);
}
.field.is-error .field__error { display: flex; }
.field__error::before { content: "!"; display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 900; }

/* 상담 희망 시간 — 칩 버튼 */
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
/* 라디오 본체는 감추고 label 을 실제 터치 타깃으로 쓴다.
   크기를 1px 로 줄여 여러 개가 같은 자리에 겹쳐 쌓이지 않도록 한다. */
.chips input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chips label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  flex: 1 1 calc(50% - 4px);
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-line);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-soft);
  text-align: center;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.chips input:checked + label {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-deep);
}
.chips input:focus-visible + label { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* 개인정보 동의 */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--color-background-soft);
  border: 1px solid var(--color-line);
}
.consent input {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  accent-color: var(--color-primary);
}
.consent__text { font-size: 14px; line-height: 1.5; color: var(--color-text); }
.consent__text a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* 접근성: 최소 터치 타깃 */
  margin-left: 6px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;   /* "전문 보기" 가 중간에서 끊기지 않도록 */
  vertical-align: middle;
}
.field.is-error .consent { border-color: var(--color-danger); background: var(--color-danger-bg); }

.lead__submit { margin-top: 22px; }
.lead__submit .btn[disabled] {
  opacity: .62;
  cursor: not-allowed;
  box-shadow: none;
}
.lead__submit .btn.is-loading { pointer-events: none; }

.spinner {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 제출 실패 배너 */
.form-alert {
  display: none;
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--color-danger-bg);
  border: 1px solid #FCA5A5;
  font-size: 14px;
  line-height: 1.6;
  color: #991B1B;
}
.form-alert.is-visible { display: block; }
.form-alert a { font-weight: 800; color: #991B1B; text-decoration: underline; }

/* Honeypot — 사람에게 보이지 않음 */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}


/* --------------------------------------------------------------------------
   17. SUCCESS + SECONDARY SURVEY
   -------------------------------------------------------------------------- */
.lead__success { display: none; }
.lead__success.is-visible { display: block; }

.success-head { text-align: center; padding-bottom: 22px; border-bottom: 1px dashed var(--color-line); }
.success-head__icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: grid;
  place-items: center;
}
.success-head__icon svg { width: 30px; height: 30px; }
.success-head__title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
}
.success-head__desc {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-soft);
}
.success-head__id {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--color-background-soft);
  border: 1px solid var(--color-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-soft);
}

.survey { padding-top: 22px; }
.survey__head { text-align: center; margin-bottom: 20px; }
.survey__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
  line-height: 1.45;
}
.survey__desc { margin-top: 7px; font-size: 13.5px; color: var(--color-text-soft); }

.survey__q { margin-bottom: 20px; }
.survey__q > legend {
  display: block;
  padding: 0;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-strong);
}
.survey__q { border: 0; padding: 0; }

.survey__actions { display: grid; gap: 10px; margin-top: 22px; }
.survey__skip {
  min-height: 48px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   18. FINAL CTA
   -------------------------------------------------------------------------- */
.final { text-align: center; }
.final__title {
  font-size: 26px;
  line-height: 1.38;
  font-weight: 800;
  letter-spacing: -.025em;
}
.final__desc {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .84);
}
.final__desc b { display: block; margin-top: 6px; color: #fff; font-size: 18px; font-weight: 800; }
.final .btn { margin-top: var(--sp-3); }


/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 32px 0 calc(32px + var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  background: #15161A;
  color: #9CA3AF;
  font-size: 12.5px;
  line-height: 1.75;
}
.site-footer__logo { height: 22px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1) opacity(.85); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2A2C33;
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* 접근성: 최소 터치 타깃 */
  font-weight: 700;
  color: #E5E7EB;
}
.site-footer__info dl { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.site-footer__info div { display: flex; gap: 6px; }
.site-footer__info dt { color: #6B7280; }
.site-footer__copy { margin-top: 14px; color: #6B7280; font-size: 11.5px; }


/* --------------------------------------------------------------------------
   20. STICKY CTA (Mobile)
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -4px 16px rgba(17, 24, 39, .07);
  transform: translateY(110%);
  transition: transform .28s var(--ease);
  visibility: hidden;
}
.sticky-cta.is-visible { transform: translateY(0); visibility: visible; }

.sticky-cta__text { flex: 1 1 auto; min-width: 0; }
.sticky-cta__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}
.sticky-cta__sub {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-strong);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta .btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 48px;
  padding: 0 22px;
  font-size: 15.5px;
  border-radius: 12px;
}

/* 본문 하단이 스티키에 가리지 않도록 — 푸터 padding 으로 처리하므로 body 는 건드리지 않음 */


/* --------------------------------------------------------------------------
   21. MOTION
   -------------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  will-change: opacity, transform;
}
.fade-up.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* --------------------------------------------------------------------------
   22. 짧은 뷰포트 대응 — Hero CTA 를 Fold 안에 유지
   -------------------------------------------------------------------------- */
@media (max-height: 700px) {
  .hero { padding-top: 14px; }
  .hero__title { font-size: 30px; }
  .hero__visual { margin-top: 14px; }
  .hero__tile { aspect-ratio: 1 / 1; }   /* 세로 공간 확보 */
  .hero__sub { margin-top: 10px; font-size: 15px; }
  .hero__usp { margin-top: 11px; }
  .hero__cta { margin-top: 13px; }
}


/* --------------------------------------------------------------------------
   23. TABLET  (768px+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; }

  body { font-size: 17px; }

  .section { padding-block: 80px; }
  .section--tight { padding-block: 64px; }
  .section__head { margin-bottom: var(--sp-5); }

  .h2 { font-size: 34px; }
  .lead { font-size: 17px; }

  /* 섹션 CTA 는 데스크톱에서 폭 제한 */
  .cta-block { display: flex; flex-direction: column; align-items: center; }
  .cta-block .btn { max-width: 420px; }

  .hero { padding: 40px 0 64px; }
  .hero__title { font-size: 44px; }
  .hero__sub { font-size: 18px; margin-top: 16px; }
  /* 태블릿에서 1단 유지 시 비주얼이 너무 커져 CTA 가 Fold 밖으로 밀리므로 폭을 제한한다 */
  .hero__visual {
    margin: 28px auto 0;
    max-width: 440px;
    gap: 12px; padding: 12px;
    border-radius: var(--r-xl);
  }
  .hero__tile { border-radius: 14px; }
  .hero__tile-name { padding: 20px 10px 10px; font-size: 14px; }
  .hero__tile-name b { font-size: 11px; }
  .hero__live { top: 10px; left: 10px; height: 28px; font-size: 12.5px; padding: 0 11px; }
  .hero__usp { gap: 8px; margin-top: 20px; }
  .hero__usp li { height: 38px; padding: 0 15px; font-size: 15px; }
  .hero__cta { margin-top: 24px; max-width: 420px; }

  .problem__list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .problem__item { font-size: 16px; }
  .problem__turn strong { font-size: 26px; }

  .shift__row { padding: 18px; font-size: 16px; grid-template-columns: 1fr 56px 1fr; }

  .usp__list { grid-template-columns: repeat(2, 1fr); }
  .usp__item { padding: 26px 22px; }
  .usp__title { font-size: 19px; }

  .teacher-card { flex-basis: 250px; }

  .steps { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .step { padding-bottom: 26px; }

  .reviews__list { grid-template-columns: repeat(2, 1fr); }

  .options { grid-template-columns: repeat(2, 1fr); }

  .offer__card { padding: 40px 32px; max-width: 620px; margin-inline: auto; }
  .offer__price { font-size: 42px; }

  .faq { max-width: var(--wrap-text); margin-inline: auto; }
  .faq__q { font-size: 17px; padding: 22px 0; }

  .lead__card { max-width: 620px; margin-inline: auto; padding: 36px 32px 38px; }
  .chips label { flex: 1 1 calc(25% - 6px); }

  .final__title { font-size: 34px; }
  .final .btn { max-width: 420px; margin-inline: auto; }

  .site-footer { padding-bottom: 40px; font-size: 13px; }

  /* 태블릿부터 스티키 CTA 숨김 — 데스크톱은 상시 CTA 가 충분 */
  .sticky-cta { display: none; }
}


/* --------------------------------------------------------------------------
   24. DESKTOP  (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .section { padding-block: 104px; }
  .section--tight { padding-block: 80px; }

  .h2 { font-size: 40px; }

  .site-header { height: 68px; }
  .site-header__logo img { height: 32px; }
  .site-header__tel { font-size: 16px; }

  /* Hero 2단 */
  .hero { padding: 72px 0 88px; }
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    /* 1fr 을 마지막 행에 두어 남는 높이가 CTA 아래로 몰리게 한다.
       (행마다 균등 분배되면 카피-칩-CTA 사이가 벌어진다) */
    grid-template-rows: auto auto 1fr;
    gap: 0 56px;
    align-items: start;
    max-width: var(--wrap-body);
  }
  /* 좌: 카피 / USP / CTA · 우: 비주얼 — 자동배치에 맡기지 않고 명시 배치 */
  .hero__copy   { grid-column: 1; grid-row: 1; }
  .hero__usp    { grid-column: 1; grid-row: 2; }
  .hero__cta    { grid-column: 1; grid-row: 3; }
  .hero__visual {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    max-width: none;      /* 태블릿 폭 제한 해제 — 그리드 컬럼을 채운다 */
    align-self: center;
  }
  .hero__title { font-size: 54px; line-height: 1.22; }
  .hero__sub { font-size: 19px; }
  .hero__usp { margin-top: 24px; }
  .hero__cta { margin-top: 28px; max-width: 400px; }

  .usp__list { grid-template-columns: repeat(3, 1fr); }
  .usp__item:nth-child(4), .usp__item:nth-child(5) { grid-column: span 1; }

  .teachers__scroller {
    margin-inline: 0;
    padding-inline: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    overflow: visible;
  }
  .teacher-card { flex-basis: auto; }
  .teachers__hint { display: none; }
  .teachers__criteria { grid-template-columns: 1fr; padding: 24px; }
  .teachers__criteria ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; }

  .steps { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .step { grid-template-columns: 1fr; gap: 12px; padding-bottom: 0; }
  .step:not(:last-child)::before {
    left: 48px; right: -24px; top: 19px; bottom: auto;
    width: auto; height: 2px;
    background: var(--color-line);
  }
  .step__title { padding-top: 0; font-size: 17px; }

  .reviews__list { grid-template-columns: repeat(3, 1fr); }

  .options { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .final__title { font-size: 42px; }
}