/* ---------- 폰트 ---------- */
@font-face { font-family: 'Pear Toucan'; font-weight: 300; font-display: swap; src: url('/font/PearToucan-Light.woff2') format('woff2'), local('페어 큰부리새 Light'), local('PearToucan-Light'); }
@font-face { font-family: 'Pear Toucan'; font-weight: 400; font-display: swap; src: url('/font/PearToucan-Regular.woff2') format('woff2'), local('페어 큰부리새 Regular'), local('PearToucan-Regular'); }
@font-face { font-family: 'Pear Toucan'; font-weight: 700; font-display: swap; src: url('/font/PearToucan-Bold.woff2') format('woff2'), local('페어 큰부리새 Bold'), local('PearToucan-Bold'); }

/* ---------- 토큰 (시안 실측값) ---------- */
:root {
  --ink: #191919;
  --ink-2: #191f2c;
  --ink-3: #0f1a2e;
  --body: #555;
  --muted: #4e5968;
  --sky: #1fbdff;
  --sky-2: #22ade6;
  --blue: #3182f6;
  --blue-2: #4a7aff;
  --yellow: #f2b819;
  --brown: #915b41;
  --bg-soft: #f9fafb;
  --bg-soft-2: #f8fbff;
  --line: #e5e8eb;
  --ph: #f1f2f6;

  /* 글자용 색. 시안의 하늘색(#1fbdff 2.2:1)과 노랑은 흰 배경에서 글자로 못 쓴다 → 같은 계열의 진한 값 */
  --sky-text: #0a6f9e;   /* 흰 배경 5.2:1, 하늘색 틴트(#e5f7ff) 위 4.8:1 */
  --blue-text: #1e6ad4;  /* 5.0:1 */
  --gold-text: #b8860b;  /* 4.5:1 큰 글씨용 */
  --cta: #1ab5f6;        /* 쌤하고 브랜드 블루 */
  --cta-text: #111;      /* 밝은 브랜드 블루 위 가독성 확보 */
  --muted-2: #6b7684;    /* 흐린 보조 글자, 4.6:1 */
  --white-text: #fff;   /* CTA 버튼 흰 글씨 */

  --font-body: 'Wanted Sans Std', 'Wanted Sans', 'Noto Sans KR', system-ui, sans-serif;
  --font-display: 'Pear Toucan', '페어 큰부리새', 'Wanted Sans Std', 'Wanted Sans', serif;
  --font-latin: 'Inter', var(--font-body);

  /* 1920 시안의 좌우 240 여백. 화면이 좁아지면 같이 줄어든다 */
  --gutter: clamp(20px, 6vw, 80px);
  --content: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  letter-spacing: -0.01em;
  line-height: 1.5;
  overflow-x: clip;   /* hidden 은 body 를 스크롤 컨테이너로 만들어 sticky 고정과 ScrollTrigger 좌표를 망가뜨린다 */
  word-break: keep-all;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p, h1, h2, h3 { font-weight: inherit; }

.wrap { width: min(100% - var(--gutter) * 2, var(--content)); margin-inline: auto; }
.center { text-align: center; }

/* 시안 공통 활자 */
/* 섹션 제목은 히어로를 뺀 전부가 한 스케일이다. 시안은 36~56 이 섞여 있었다 (사용자: "크기가 달라지면 곤란") */
.h-36, .h-44, .h-52, .cond__title, .faq__title { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.lead { font-size: clamp(16px, 1.2vw, 18px); color: var(--body); line-height: 1.6; }
.keyword { display: block; font-size: 14px; font-weight: 600; color: var(--blue-text); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 16px; }

/* ============================================================
   1. 히어로
   ============================================================ */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 960px 264px at 50% 20%, #e0ebff 0%, #f0f5ff 40%, #fff 100%);
}
.hero .wrap { max-width: 1440px; }
/* 히어로 그라데이션이 아주 천천히 숨쉬게 한다.
   .hero 의 배경은 그대로 두어 애니메이션이 없을 때의 모습으로 쓰고,
   같은 그라데이션을 얹은 층만 transform 으로 움직인다 (합성 단계라 다시 그리지 않는다).
   overflow 는 clip 이어야 한다. hidden 이면 sticky 와 ScrollTrigger 좌표가 어긋난다 */
.hero { overflow: clip; }
.hero::before {
  content: "";
  position: absolute; inset: -12%; z-index: 0;
  background: radial-gradient(ellipse 960px 264px at 50% 20%, #e0ebff 0%, #f0f5ff 40%, #fff 100%);
  pointer-events: none;
  will-change: transform;
  animation: heroGlow 30s ease-in-out infinite;
}
/* 배경 위에 본문과 스텝 바를 올린다 */
.hero > .wrap, .hero > .subnav { position: relative; z-index: 1; }
@keyframes heroGlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(0, 2.2%, 0) scale(1.14); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.gnb {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  transition: background-color .25s, box-shadow .25s;
}
.gnb.is-solid { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 -1px 0 var(--line); }
.gnb__in { max-width: 1440px; display: flex; align-items: center; justify-content: space-between; height: 80px; }
/* 히어로는 고정 바 높이만큼 위를 비운다 */
.hero { padding-top: 80px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.hero > .wrap { flex: 1; display: flex; flex-direction: column; }
.logo { display: flex; align-items: center; gap: 3px; }
.logo__mark { width: 21px; height: 26px; }
.logo__word { width: 48px; height: 19px; margin-top: 4px; }
.logo__sub {
  font-family: var(--font-display); font-weight: 300;
  font-size: 18px; line-height: .9; margin-left: 3px; margin-top: 4px; letter-spacing: -0.01em;
}
.btn-enter {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border-radius: 12px;
  color: #fff; font-size: 16px; font-weight: 600;
  background: linear-gradient(185deg, #f2b819 30%, #f9cf5b 110%);
  filter: drop-shadow(0 2px 3.8px rgba(0,0,0,.05));
}
.btn-enter img { width: 22px; height: 22px; }

.hero__body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 0 80px;
  text-align: center;
}
.hero__q { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.01em; }
.hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 9.5vw, 140px); line-height: .9; letter-spacing: -0.01em;
  margin: clamp(20px, 2.6vw, 39px) 0;
  white-space: nowrap;
}
.hero__title .eui { font-size: .5em; color: #767676; }
.hero__title .ch { display: inline-block; }   /* 글자별 등장용. inline-block 이라야 transform 이 먹는다 */
.hero__sub { font-size: 16px; color: var(--muted); }
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: clamp(28px, 3.2vw, 47px);
  padding: 16px 28px; border-radius: 12px;
  background: var(--cta); color: var(--white-text); font-size: 16px; font-weight: 600;
}

/* 히어로 아래로 이어지는 내용이 있다는 신호.
   히어로 안에만 두면 첫 스크롤에 사라져 인트로(The Truth)를 읽는 동안에는 유도가 없다.
   그래서 화면 하단에 붙여 두고 인트로가 끝날 때 물러난다 (사용자 09-08) */
.hero__scroll {
  /* 누를 수 있는 것처럼 보이면 안 된다. 배경 없는 표시일 뿐이고 클릭도 받지 않는다 (사용자 09-08) */
  position: fixed; left: 50%; margin-left: -20px; bottom: 24px;
  /* 고정 GNB(1000) 와 하단 CTA(900) 보다도 위. 무엇에도 가리지 않는다 */
  z-index: 1100; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--ink-2); opacity: .7;
  transition: opacity .3s, bottom .25s;
  animation: scroll-hint 1.9s ease-in-out infinite;
}
/* 아이콘은 CSS 로 그린다. 마크업에 두면 HTML 이 캐시된 브라우저에서 옛 도형이 그대로 남는데,
   CSS 는 ?v= 로 갱신되므로 여기 두면 확실히 새 아이콘이 나온다 (사용자 09-08) */
.hero__scroll::before {
  content: ''; display: block; width: 40px; height: 40px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M213-802q-7%2025-10%2050.5t-3%2051.5q0%2063%2018%20121.5T270-468q8%2011%207%2024t-10%2022q-9%209-21%208t-20-12q-42-60-64-130t-22-144q0-27%203-54t9-54l-49%2049q-9%209-21%209t-21-9q-9-9-9-21t9-21l91-91q12-12%2028-12t28%2012l91%2091q9%209%209%2021t-9%2021q-9%209-21%208.5t-21-8.5l-44-43Zm445%20675q-23%208-46.5%207.5T566-131L340-236q-15-7-21-22.5t1-30.5l2-4q10-20%2028-32.5t40-14.5l68-5-112-307q-6-16%201-30.5t23-20.5q16-6%2030.5%201t20.5%2023l130%20357q7%2019-4%2035.5T516-268l-47%203%20131%2061q7%203%2015%203.5t15-1.5l157-57q31-11%2045-41.5t3-61.5l-55-150q-6-16%201-30.5t23-20.5q16-6%2030.5%201t20.5%2023l55%20150q23%2063-4.5%20122.5T815-184l-157%2057Zm-89.5-466q14.5%207%2020.5%2023l41%20112q6%2016-1%2031t-23%2021q-16%206-31-1t-21-23l-40-113q-6-16%201-30.5t23-20.5q16-6%2030.5%201Zm126-3q14.5%207%2020.5%2023l27%2075q6%2016-.5%2030.5T719-447q-16%206-31-1t-21-23l-27-75q-6-16%201-30.5t23-20.5q16-6%2030.5%201ZM679-355Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M213-802q-7%2025-10%2050.5t-3%2051.5q0%2063%2018%20121.5T270-468q8%2011%207%2024t-10%2022q-9%209-21%208t-20-12q-42-60-64-130t-22-144q0-27%203-54t9-54l-49%2049q-9%209-21%209t-21-9q-9-9-9-21t9-21l91-91q12-12%2028-12t28%2012l91%2091q9%209%209%2021t-9%2021q-9%209-21%208.5t-21-8.5l-44-43Zm445%20675q-23%208-46.5%207.5T566-131L340-236q-15-7-21-22.5t1-30.5l2-4q10-20%2028-32.5t40-14.5l68-5-112-307q-6-16%201-30.5t23-20.5q16-6%2030.5%201t20.5%2023l130%20357q7%2019-4%2035.5T516-268l-47%203%20131%2061q7%203%2015%203.5t15-1.5l157-57q31-11%2045-41.5t3-61.5l-55-150q-6-16%201-30.5t23-20.5q16-6%2030.5%201t20.5%2023l55%20150q23%2063-4.5%20122.5T815-184l-157%2057Zm-89.5-466q14.5%207%2020.5%2023l41%20112q6%2016-1%2031t-23%2021q-16%206-31-1t-21-23l-40-113q-6-16%201-30.5t23-20.5q16-6%2030.5%201Zm126-3q14.5%207%2020.5%2023l27%2075q6%2016-.5%2030.5T719-447q-16%206-31-1t-21-23l-27-75q-6-16%201-30.5t23-20.5q16-6%2030.5%201ZM679-355Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 옛 마크업이 캐시된 브라우저에서 도형이 둘로 보이지 않게 한다 */
.hero__scroll svg { display: none; }
@keyframes scroll-hint {
  /* 아이콘이 '위로 미는' 손가락이라 움직임도 위로 간다.
     opacity 는 여기서 건드리지 않는다. 키프레임이 opacity 를 쥐고 있으면 애니메이션이 일반 선언을 이겨
     .is-past-intro 의 opacity:0 이 영영 먹지 않는다 (사용자 09-08: 사라지라고 했는데 계속 보였다) */
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
/* 하단 고정 CTA 가 올라와 있는 동안에는 그 위로 비킨다 */
.is-cta-on .hero__scroll { bottom: 88px; }
/* 인트로를 다 읽고 나면 역할이 끝난다 */
.is-past-intro .hero__scroll { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero__scroll { animation: none; } }
/* 히어로 밑 3단 스텝 바: 세리프 큰 숫자 + 문장, 항목 사이 세로선, 3번(이 상품의 핵심)만 하늘색 면 (사용자 09-07 "무게감") */
.subnav { background: #fff; border-top: 1px solid var(--line); }
.subnav__in { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.step { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-left: 1px solid var(--line); }
.step:first-child { border-left: 0; padding-left: 0; }
.step__n { font-family: var(--font-body); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: #8d99a6; }
.step p { font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.step.last { background: #e5f7ff; border-left-color: transparent; border-radius: 0; }
.step.last .step__n { color: var(--sky-text); }
.step.last p { color: var(--sky-text); font-weight: 700; }

/* ============================================================
   2, 3. 인트로 (The Truth)
   ============================================================ */
.intro { background: var(--bg-soft); text-align: left; }
.intro__stage { max-width: 820px; }
.intro__pin { padding: clamp(96px, 15vw, 290px) 0; }
.intro__step + .intro__step { margin-top: 1.4em; }
/* GSAP 이 떠 있을 때만: 문장 세 개를 한 자리에 겹쳐 두고 스크롤 길이(문장당 한 화면)를 확보한다 */
.gsap-on .intro { height: calc(100vh * 3); height: calc(100svh * 3); }
.gsap-on .intro__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding: 0;
}
.gsap-on .intro__pin .wrap { width: min(100% - var(--gutter) * 2, var(--content)); }
.gsap-on .intro__stage { display: grid; }
/* 문장 셋을 한 칸에 겹쳐 둘 뿐, 카드로 감싸지 않는다 (배경 위에 문장만 얹힌다) */
.gsap-on .intro__step { grid-area: 1 / 1; margin: 0; position: relative; }
.gsap-on .intro__step + .intro__step { opacity: 0; }
.intro__step {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* 마지막 줄: 파랑 → 보라 그라데이션 글자. 빛 띠(가운데 밝은 색)가 스크롤에 맞춰 한 번 스친다 */
.glow {
  background: linear-gradient(90deg, #1e6ad4 0%, #0b7aae 30%, #8fd3ff 50%, #0b7aae 70%, #984c93 100%);
  background-size: 300% 100%; background-position-x: 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   4. 순서가 있습니다 (feature-1)
   ============================================================ */
.feature1 { padding: clamp(80px, 6.25vw, 120px) 0; }
.feature1 .wrap { display: grid; grid-template-columns: 480px 1fr; gap: 40px; align-items: start; }
.feature1__head { position: sticky; top: 40px; }
.feature1__list { display: flex; flex-direction: column; gap: clamp(72px, 7.3vw, 140px); justify-self: end; width: 100%; max-width: 590px; }
/* 좁은 화면에서 두 줄로 넘어가므로 line-height 1 은 줄이 붙는다 */
.feature1__item h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.feature1__item p { margin-top: 19px; font-size: clamp(15px, 1.2vw, 18px); color: var(--body); line-height: 1.6; }

/* 그래픽 3장. 시안이 590×397 박스 안에 절대 좌표로 그린 UI 라, 그 좌표계를 그대로 두고
   박스 폭에 맞춰 통째로 축소한다 (--s 는 JS 의 ResizeObserver 가 박스폭/590 으로 준다) */
.f1g { position: relative; margin-top: 28px; aspect-ratio: 590 / 397; border-radius: clamp(32px, 4.3vw, 64px); background: var(--ph); overflow: hidden; }
.f1g__inner { position: absolute; left: 0; top: 0; width: 590px; height: 397px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.f1g__card {
  position: absolute; left: 103px; top: 48px; width: 384px; height: 381px;
  background: #fff; border-radius: 30px; box-shadow: 0 12px 28px rgba(49,130,246,.08);
  padding: 26px 22px;
}
.f1g__hd { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #e6e6e6; font-size: 14px; font-weight: 500; color: var(--body); }
.f1g__hd img { width: 16px; height: 16px; }
.f1g__subj { position: relative; width: 19px; height: 19px; flex: 0 0 auto; }
.f1g__subj img { position: absolute; inset: 0; width: 100%; height: 100%; }
.f1g__subj img + img { inset: 15%; width: 70%; height: 70%; }
.f1g__hd .f1g__subj { width: 15px; height: 15px; }
/* 1. 목표 점수 */
.f1g__row { display: flex; align-items: center; gap: 12px; height: 69px; margin-top: 20px; padding: 0 20px; border-radius: 20px; background: var(--ph); font-size: 18.8px; font-weight: 500; }
.f1g__score { margin-left: auto; padding: 11.6px 14.5px; border-radius: 11.6px; color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1; }
.f1g__score--g { background: linear-gradient(189deg, #177a52 30%, #5fcf9f 110%); }
.f1g__score--b { background: linear-gradient(188deg, #1670a6 30%, #6fb8e2 110%); }
.f1g__score--r { background: linear-gradient(189deg, #d63c3c 30%, #ff9f9f 110%); }
/* 2. 회독 계획 */
.f1g__plan {
  display: flex; align-items: center; gap: 12px; height: 74px; margin-top: 10px; padding: 0 14px;
  border: .8px solid #e6e6e6; border-radius: 16px; background: #fff; box-shadow: 0 1.6px 6.2px rgba(0,0,0,.05);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s, border-color .3s;
}
/* 끝낸 칸은 조금 커지며 앞으로 나온다 (사용자 09-07) */
.f1g__plan.is-done { transform: scale(1.05); box-shadow: 0 8px 18px rgba(242,184,25,.22); border-color: #f2b819; position: relative; z-index: 1; }
.f1g__chk { width: 32px; height: 32px; border-radius: 50%; border: .8px solid #e6e6e6; display: grid; place-items: center; flex: 0 0 auto; transition: background .3s, border-color .3s; }
.f1g__chk img { width: 21px; height: 21px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.f1g__plan.is-done .f1g__chk { background: linear-gradient(194deg, #f2b819 30%, #f6e4b3 110%); border-color: transparent; }
.f1g__plan.is-done .f1g__chk img { opacity: 1; transform: none; }
.f1g__plan > div { flex: 1; min-width: 0; }
.f1g__tag { display: inline-block; padding: 5px 6.5px; border-radius: 999px; background: rgba(152,76,147,.1); color: #984c93; font-size: 9.8px; font-weight: 600; line-height: 1; margin-right: 6px; vertical-align: middle; }
.f1g__plan b { font-size: 13px; font-weight: 600; color: #3a3a3a; vertical-align: middle; }
.f1g__plan small { display: block; margin-top: 6px; font-size: 11.4px; color: #6e6e6e; }
.f1g__time { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #3a3a3a; white-space: nowrap; }
.f1g__time img { width: 11px; height: 11px; }
.f1g__fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, var(--ph) 100%); pointer-events: none; }
/* 3. 타이머 */
.f1g__timer {
  position: absolute; left: 77px; top: 71px; width: 436px; height: 255px;
  border-radius: 82px; background: #f4f4f4; box-shadow: 0 3.6px 20.7px rgba(0,0,0,.1);
  display: flex; align-items: center; padding: 0 36px 0 44px; gap: 20px;
}
.f1g__tleft small { display: block; font-size: 14.6px; color: #767676; }
.f1g__tleft b { display: block; margin-top: 8px; font-size: 54.7px; font-weight: 600; color: #3a3a3a; line-height: 1; letter-spacing: -0.01em; }
.f1g__reset { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 12.8px; color: #757575; }
.f1g__reset img { width: 17px; height: 17px; }
.f1g__ring { position: relative; width: 182px; height: 182px; margin-left: auto; flex: 0 0 auto; }
.f1g__ring .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.f1g__ring .play { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ============================================================
   5. 왜 이번 중간고사가 중요할까요 (why-now)
   ============================================================ */
.whynow {
  background: linear-gradient(180deg, var(--bg-soft) 57%, #fff 89%);
  padding: clamp(80px, 6.25vw, 120px) 0;
}
.whynow__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
.whynow__head .lead { margin-top: 20px; }
.whynow__head .h-36 { color: var(--ink-3); }
.whynow__head .lead { font-family: var(--font-latin); color: var(--muted); max-width: 600px; }
.whynow__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1200px; margin: 80px 0 0;
  align-items: stretch;
}
/* 카드 3장은 중학교 학년별 이야기다. 고등학생도 대상이라는 사실은 그 아래 한 줄로 붙인다 */
.whynow__note {
  max-width: 1200px; margin: 24px 0 0; padding: 22px 28px;
  border-radius: 20px; background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--body);
  text-wrap: pretty;
}
.whynow__note b { font-weight: 700; color: var(--ink-2); }
.gcard {
  padding: clamp(40px, 4.2vw, 80px) 32px; border-radius: 40px;
  background: #fff;
}
@media (hover: hover) and (min-width: 1024px) {
  .gcard, .ccard { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
  .gcard:hover, .ccard:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 24px 48px rgba(17,22,36,.10); }   /* 학년 카드와 조건 카드 같은 호버 */
}
.gcard--y { background: linear-gradient(193deg, rgba(242,184,25,.1) 30%, rgba(255,242,205,.1) 110%), #fff; }
.gcard--b { background: linear-gradient(193deg, rgba(31,189,255,.1) 30%, rgba(215,243,255,.1) 110%), #fff; }
.gcard--n { background: linear-gradient(193deg, rgba(145,91,65,.1) 30%, rgba(255,242,205,.1) 110%), #fff; }
.gcard__grade {
  font-weight: 600; letter-spacing: -0.01em; line-height: 1;
  background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block;
}
.gcard__grade small { font-size: 20px; font-weight: 600; }
.gcard__grade b { font-size: 40px; font-weight: 700; }
.gcard--y .gcard__grade { background-image: linear-gradient(116deg, #b8860b 70%, #191919 90%); }
.gcard--b .gcard__grade { background-image: linear-gradient(116deg, #0b7aae 70%, #191919 90%); }
.gcard--n .gcard__grade { background-image: linear-gradient(116deg, #915b41 70%, #191919 90%); }
.gcard h3 { margin-top: 38px; font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.gcard p:not(.gcard__grade) { margin-top: 16px; font-size: 15px; color: var(--body); line-height: 1.6; }

/* ============================================================
   6. 어디서 공부해야 할까요 (feature-3)
   ============================================================ */
.where { background: var(--bg-soft); padding: clamp(80px, 6.25vw, 120px) 0; }
.where__head { text-align: center; }
.where__head .lead { margin-top: 20px; color: var(--muted); }
.where__list { display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin: 80px auto 0; }
.acard {
  display: flex; align-items: center; gap: 24px;
  padding: 24px; border-radius: 40px;
  background: #fff; border: 1px solid var(--line);
}
.acard--on { background: #f6fcff; border-color: var(--sky); }
.acard__img { flex: 0 0 140px; width: 140px; height: 100px; border-radius: 24px; overflow: hidden; }
.acard__img img { width: 100%; height: 100%; object-fit: cover; }
.acard__body { flex: 1; min-width: 0; }
.acard__body h3 { font-size: 24px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.acard__body p { margin-top: 8px; font-size: 16px; color: var(--body); }
.acard__mark {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-latin); font-size: 28px; line-height: 1;
  background: #fee2e2; color: #dc2626;
}
.acard--on .acard__mark { background: var(--cta); color: var(--cta-text); font-size: 24px; }

/* ============================================================
   7. 단, 이 조건이 필요합니다 (recruitment-cta)
   ============================================================ */
.cond {
  background: linear-gradient(87deg, #e0f6ff 17%, #fffaef 72%, #fff3ee 129%);
  padding: clamp(96px, 8.3vw, 160px) 0;
}
.cond__title { margin-top: 0; }
.cond .lead { margin-top: 20px; }
.cond__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; }
.ccard { background: #fff; border: 1px solid #dcebff; border-radius: 24px; padding: 36px 24px; filter: drop-shadow(0 12px 14px rgba(49,130,246,.08)); }
.ccard__ic { width: 54px; height: 54px; }
.ccard h3 { margin-top: 16px; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.ccard h3 em { font-style: normal; }
.c-y { color: var(--gold-text); }
.c-b { color: var(--sky-text); }
.c-n { color: var(--brown); }
.ccard p { margin-top: 16px; font-size: 16px; font-weight: 500; color: var(--body); line-height: 1.6; }

/* ============================================================
   8. 혼자 세우기 어려운 계획을 함께 (free-planner)
   ============================================================ */
.together { background: var(--bg-soft-2); padding: clamp(96px, 8.3vw, 160px) 0; }
.together__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
.together__head .lead { max-width: 760px; margin-top: 20px; }
.together__stage {
  position: relative;
  max-width: 1200px; margin: 56px 0 0;
  min-height: 567px;
}
.collage {
  width: 506px; max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column;
}
.collage__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 506 / 284;
  border: 11px solid var(--brown);
  border-radius: 25px 25px 0 0;
  background: #fff;
}
.collage__frame--b { border-color: var(--yellow); border-radius: 0 0 27px 27px; margin-top: -1px; }
.collage__frame img { width: 100%; height: 100%; object-fit: cover; }
.collage__name {
  position: absolute; left: 14px; bottom: 14px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 22px; font-weight: 500; line-height: 1;
}
.fcard {
  position: absolute; width: 334px;
  padding: 28px; border-radius: 24px;
  /* 불투명 유리(사용자 09-07). 사진 위에 떠서 뒤가 비쳐 보이게 z 를 사진보다 위에 둔다 */
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 16px 40px rgba(17,22,36,.10), inset 0 1px 0 rgba(255,255,255,.9);
  z-index: 2;
}
.fcard__num {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 600;
}
.fcard h3 { margin-top: 16px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.fcard p { margin-top: 16px; font-size: 16px; color: var(--body); line-height: 1.6; }
/* 시안 좌표를 1200 무대 기준으로 옮긴 값 */
.collage { position: relative; z-index: 1; }
.fcard--1 { left: 48px; top: -18px; }
.fcard--1 .fcard__num { background: var(--cta); }
.fcard--2 { right: 35px; top: 167px; }
.fcard--2 .fcard__num { background: var(--brown); }
.fcard--3 { left: 92px; top: 323px; }
.fcard--3 .fcard__num { background: var(--yellow); }

/* ============================================================
   9. 실제로 끝내는 시간 (night-timeline)
   ============================================================ */
.night {
  position: relative; color: #fff;
  min-height: clamp(640px, 50vw, 955px);
  background: #111 url('/image/night-bg.jpg') center / cover no-repeat;
  display: flex; align-items: center;
}
.night::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.7) 100%);
}
/* 새 시안(09-07): 글이 가운데, 그 아래 시간표와 운영시간이 전폭으로 */
.night .wrap { position: relative; max-width: 1291px; display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 80px 0; }
.night__copy { text-align: center; max-width: 520px; }
.night .keyword { color: #9fd6ff; }   /* 어두운 사진 위라 밝은 하늘색 */
.night__copy .lead { margin-top: 20px; color: #d6d8e0; font-weight: 500; line-height: 1.5; }
.night__side { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.timeline { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.timeline__row { display: flex; gap: 20px; align-items: flex-start; }
.timeline__dot { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.timeline__dot i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.timeline__dot span { width: 1px; height: 20px; background: rgba(255,255,255,.6); }
.timeline__row:last-child .timeline__dot span { display: none; }
.timeline__t { font-size: 14px; line-height: 1.3; }
.timeline__l { font-size: 16px; line-height: 1.3; margin-top: 2px; }
.hours {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 30px; border-radius: 30px;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hours__k { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); line-height: 1.4; }
.hours__v { margin-top: 8px; font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.hours__d { margin-top: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); }
.hours__txt { min-width: 0; }
/* 운영시간 카드 안 CTA (사용자 09-07): 어두운 유리 위라 흰 버튼, 펄스 고리도 흰색 */
.hours__cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; white-space: nowrap; }
.hours__cta.cta-pulse::after { animation-name: ctaPulseLight; }
@keyframes ctaPulseLight { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* ============================================================
   10. 내 아이만의 계획표 (시안: 800 카드 3장이 가로로 늘어선다. 세로 스크롤에 맞춰 옆으로 밀린다)
   ============================================================ */
.demo { background: linear-gradient(180deg, #f9fafc 0%, #fbfbfb 50%); overflow-x: clip; overflow-y: visible; }   /* 세로 sticky는 살리고 가로 트랙만 자른다 */
.demo__pin { padding: clamp(80px, 6.25vw, 120px) 0; }
.demo__copy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.demo .lead { margin-top: 20px; }
.demo__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.demo__steps li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; color: var(--muted-2); transition: color .3s; letter-spacing: -0.01em; white-space: nowrap; }
.demo__steps li b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: #eef1f5; color: var(--muted-2); transition: background .3s, color .3s; flex: 0 0 auto; }
.demo__steps li.is-on { color: var(--ink); }
.demo__steps li.is-on b { background: var(--wz); color: #fff; }

/* 트랙: 카드 3장이 가로로. 카드는 시안의 회색 라운드 박스, 그 안에 위저드 화면(흰 카드) */
:root { --wz: #984C93; --wz-soft: #F3E9F2; --wz-line: #e5e8eb; --wz-mute: #f4f6f9; --card-h: 620px; }
.demo__stage { position: relative; margin-top: 40px; }
/* 기본은 세로 스택(폰·태블릿, GSAP 없을 때). PC 는 아래 min-width 규칙에서 화면에 고정된 가로 트랙 (사용자 결정 09-07 오후: "PC 가로, 폰은 세로") */
.demo__track { display: flex; flex-direction: column; gap: 24px; }
.demo__card {
  width: min(800px, 100%); height: var(--card-h);
  border-radius: clamp(32px, 4.3vw, 64px); background: var(--ph); padding: clamp(16px, 2vw, 28px);
}
@media (max-width: 1023px) {
  .demo__card { margin-block: 12px; }
}
@media (min-width: 1024px) {
  .gsap-on .demo { height: calc(100vh * 3); height: calc(100svh * 3); --card-h: 620px; }   /* 키 작은 화면은 카드를 줄이지 않고 JS 가 무대를 통째로 축소한다(카드 안 내용이 520 에서 79px 넘쳤음) */
  .gsap-on .demo__pin { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 24px; }
  .gsap-on .demo__track { flex-direction: row; width: max-content; will-change: transform; }
  .gsap-on .demo__card { flex: 0 0 auto; width: 800px; }
  .demo.demo-native { height: 400vh; }
  .demo.demo-native .demo__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 24px; }
  .demo.demo-native .demo__track { flex-direction: row; width: max-content; will-change: transform; }
  .demo.demo-native .demo__card { flex: 0 0 auto; width: 800px; }
}
.scene {
  position: relative; width: 100%; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 28px;
  box-shadow: 0 16px 40px rgba(17,22,36,.05);
  padding: 22px 28px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--ink);
}
.wz-head { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wz-x { width: 16px; height: 16px; position: relative; }
.wz-x::before, .wz-x::after { content: ''; position: absolute; left: 1px; top: 7px; width: 14px; height: 1.5px; background: var(--muted); transform: rotate(45deg); }
.wz-x::after { transform: rotate(-45deg); }
.wz-crumb { display: flex; gap: 10px; font-size: 13px; color: var(--muted-2); }
.wz-crumb b { color: var(--wz); font-weight: 600; }
.wz-crumb i { font-style: normal; }
.wz-bar { height: 4px; border-radius: 2px; background: #eef1f5; margin-bottom: 6px; }
.wz-bar i { display: block; height: 100%; border-radius: 2px; background: var(--wz); }
.wz-q { font-size: 16px; font-weight: 600; margin-top: 2px; letter-spacing: -0.01em; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip { padding: 9px 15px; border-radius: 999px; background: var(--wz-mute); font-size: 14px; font-weight: 500; color: var(--body); transition: background .2s, color .2s; white-space: nowrap; }
.wz-chip.is-on { background: var(--wz-soft); color: var(--wz); font-weight: 600; }
.wz-days { display: flex; gap: 8px; }
.wz-day { flex: 1; text-align: center; padding: 10px 0; border-radius: 12px; background: var(--wz-mute); font-size: 14px; font-weight: 500; color: var(--body); transition: background .2s, color .2s; }
.wz-day.is-on { background: var(--wz-soft); color: var(--wz); font-weight: 600; }
.wz-sum { margin-top: auto; padding: 12px 16px; border-radius: 14px; background: var(--wz-mute); font-size: 14px; color: var(--body); line-height: 1.5; }
.wz-sum b { color: var(--ink); }
.wz-cta { padding: 15px; border-radius: 16px; background: var(--wz); color: #fff; text-align: center; font-size: 16px; font-weight: 600; filter: drop-shadow(0 8px 12px rgba(152,76,147,.18)); }
.wz-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-sub { border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.wz-sub__top { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.wz-sub__top span { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); }
.wz-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 14px; font-weight: 700; }
.wz-sub--ko .wz-ic { background: #22c07a; }
.wz-sub--ma .wz-ic { background: #1e95d4; }
.wz-input { min-height: 44px; padding: 11px 16px; border: 1px solid var(--wz-line); border-radius: 999px; font-size: 14px; display: flex; align-items: center; background: #fff; }
.wz-caret { display: none; width: 1.5px; height: 18px; background: var(--wz); margin-left: 2px; }
.wz-caret.is-on { display: inline-block; animation: wzBlink .9s steps(2) infinite; }
@keyframes wzBlink { to { opacity: 0; } }
.wz-parsed { display: inline-block; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--wz-soft); color: var(--wz); font-size: 13px; font-weight: 600; }
.wz-parsed em { font-style: normal; font-weight: 400; opacity: .8; }
.wz-rounds { display: flex; gap: 6px; }
.wz-rounds span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 0 7px; border: 1px solid var(--wz-line); border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--wz); line-height: 1; transition: background .2s, color .2s; }
.wz-rounds small { font-size: 11px; font-weight: 400; margin-top: 4px; color: var(--muted); }
.wz-rounds span.is-on { background: var(--wz); border-color: var(--wz); color: #fff; }
.wz-rounds span.is-on small { color: rgba(255,255,255,.85); }
.wz-track { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: 16px; background: var(--wz-mute); position: relative; }
.wz-track::before { content: ''; position: absolute; left: 30px; right: 30px; top: 50%; border-top: 1.5px dashed #d9d0d8; }
.wz-dot { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #8f7f8d; color: #fff; font-size: 14px; font-weight: 600; transition: background .2s; }
.wz-dot.is-on { background: var(--wz); }
.wz-dot--exam { width: auto; padding: 0 12px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 12px; }
.wz-dot--exam.is-on { background: #fee2e2; }
/* 주 3줄이 남는 높이를 똑같이 나눠 갖는다. 칸이 auto 면 칩 두 개인 날이 다음 줄과 겹친다 */
.wz-cal { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 4px; flex: 1; min-height: 0; }
.wz-cal__h { font-size: 12px; color: var(--muted-2); text-align: center; padding-bottom: 2px; }
.wz-cal__d { border-top: 1px solid #eef1f5; padding: 5px 2px 2px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; }
.wz-cal__d em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1; }
.wz-pl { display: block; font-size: 10.5px; font-weight: 600; padding: 3px 4px; border-radius: 6px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-pl--ko { background: #e6f7ee; color: #0f6b41; }
.wz-pl--ma { background: #e6f2fb; color: #155d8a; }
.demo__cursor {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(152,76,147,.3); border: 2px solid var(--wz);
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%); z-index: 2;
}
html:not(.gsap-on) .demo__cursor { display: none; }

/* PC 왼쪽 섹션 진행 도트 */
.section-dots { display: none; }
@media (min-width: 1200px) {
  .section-dots {
    position: fixed; left: clamp(18px, 2vw, 38px); top: 50%; z-index: 90;
    display: flex; flex-direction: column; align-items: center; gap: 11px;
    transform: translateY(-50%); padding: 12px 9px; border-radius: 999px;
    background: rgba(255,255,255,.72); box-shadow: 0 8px 28px rgba(17,22,36,.08);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .section-dots__dot {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
    background: #c9d1d8; cursor: pointer;
    transition: height .25s, background .25s, transform .25s;
  }
  .section-dots__dot:hover { transform: scale(1.35); background: var(--sky); }
  .section-dots__dot.is-active { height: 22px; background: var(--cta); }
}

/* ============================================================
   11. 앞으로 쌤하고가 바꿀 일상
   ============================================================ */
.life { background: linear-gradient(180deg, #f9fafc 0%, #fbfbfb 50%); padding: clamp(80px, 6.25vw, 120px) 0; }
.life__text .h-52 { color: var(--ink-2); }
.life__text p:not(.keyword) { margin-top: 20px; font-size: 16px; color: var(--muted); line-height: 1.6; }
.life__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 70px; align-items: start; }
.life__col { display: flex; flex-direction: column; gap: 24px; }
.lcard { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.03); }
.lcard--img { height: var(--h, 280px); }
.lcard--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lcard--txt { padding: 24px; border-radius: 20px; display: flex; flex-direction: column; gap: 26px; }
.lcard__k { font-size: 14px; }
.lcard__t { margin-top: 8px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.lcard__d { font-size: 16px; font-weight: 500; color: var(--body); line-height: 1.6; }
.lcard--student { background: linear-gradient(90deg, #fffbf5, #fff1c9); }
.lcard--student .lcard__k { color: #8a6500; }
.lcard--student .lcard__t { color: #9a7000; }
.lcard--parent { background: linear-gradient(90deg, #faf5ff, #e8d8fd); }
.lcard--parent .lcard__k { color: #6d28d9; }
.lcard--parent .lcard__t { color: #5b21b6; }
.lcard--home { background: linear-gradient(90deg, #fff4ef, #c3a89b); }
.lcard--home .lcard__k, .lcard--home .lcard__t { color: var(--brown); }
.lcard--exam { background: linear-gradient(90deg, #f4fcff, #bddce9); }
.lcard--exam .lcard__k { color: var(--sky-text); }
.lcard--exam .lcard__t { color: #0b7aae; }

/* ============================================================
   12. 이 모든 서비스, 독서실 비용보다 저렴하게 (pricing)
   ============================================================ */
.pricing {
  background: linear-gradient(88deg, #e0f6ff 17%, #fffaef 72%, #fff3ee 129%), #f8fbff;
  padding: clamp(96px, 8.3vw, 160px) 0;
}
.pricing__head { max-width: 820px; }
.pricing__head .lead { margin-top: 20px; }
.pricing__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 80px; }
.pcard { background: #fff; border: 1px solid #dcebff; border-radius: 24px; padding: 36px 24px; filter: drop-shadow(0 12px 14px rgba(49,130,246,.08)); display: flex; flex-direction: column; gap: 16px; }
.pcard__ic { width: 54px; height: 54px; }
.pcard h3 { font-size: clamp(20px, 1.7vw, 26px); font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.pcard p { font-size: 16px; font-weight: 500; color: var(--body); line-height: 1.6; flex: 1; }
.pcard__link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-text); font-size: 16px; font-weight: 500; }
.pcard__link img { width: 20px; height: 20px; }
/* 가격 티켓 (사용자 09-07 레퍼런스 2장 합침): 왼쪽 어두운 면 = 제목 + 큰 숫자 2개(왼쪽 선), 오른쪽 흰 면 = 이용료 행 + 월 금액 + 전폭 CTA. 사이는 점선 */
.ticket { margin-top: 32px; display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 56px rgba(17,22,36,.14); }
.ticket__l { background: var(--ink-3); color: #fff; padding: 44px 48px; display: flex; flex-direction: column; gap: 20px; }
.ticket__k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #9fd6ff; }
.ticket__k i { width: 8px; height: 8px; border-radius: 50%; background: #9fd6ff; }
.ticket__t { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.ticket__d { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); }
.ticket__stats { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ticket__stat { border-left: 2px solid rgba(255,255,255,.22); padding: 4px 0 4px 18px; }
.ticket__stat .k { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); }
.ticket__stat .v { margin-top: 28px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ticket__stat .v small { font-size: .5em; font-weight: 600; margin-left: 2px; }
.ticket__stat--old .v { color: rgba(255,255,255,.45); text-decoration: line-through; text-decoration-thickness: 2px; }
.ticket__stat--us { border-left-color: #9fd6ff; }
.ticket__foot { font-size: 13px; color: rgba(255,255,255,.5); }
.ticket__r { background: #fff; padding: 40px 44px; border-left: 2px dashed var(--line); display: flex; flex-direction: column; }
.ticket__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; font-size: 15px; color: var(--muted-2); }
.ticket__row b { font-weight: 600; color: var(--ink); }
.ticket__row .off { color: var(--blue-text); font-weight: 600; margin-right: 6px; }
.ticket__sep { border-top: 1px solid var(--line); margin: 14px 0 18px; }
.ticket__now { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ticket__now .k { font-size: 15px; font-weight: 600; color: var(--ink); padding-bottom: 6px; }
.ticket__now .v { font-size: clamp(34px, 3vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.ticket__now .v small { font-size: .5em; font-weight: 600; }
.ticket__sub { margin-top: 10px; text-align: right; font-size: 13px; color: var(--muted-2); }
.ticket__cta { margin-top: auto; padding-top: 28px; }
.ticket__cta .btn-primary { width: 100%; padding: 18px; font-size: 18px; }
.ticket__note { margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted-2); }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 20px 48px; border-radius: 16px;
  background: var(--cta); color: #fff;
  font-size: 20px; font-weight: 600;
  filter: drop-shadow(0 8px 12px rgba(49,130,246,.2));
}

/* 가격 영역은 앞 섹션의 가벼운 카드 언어를 이어간다 */
.ticket {
  border: 1px solid #dcebff;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(49,130,246,.07);
}
.ticket__l {
  background: #f8fcff;
  color: var(--ink-2);
}
.ticket__k { color: var(--sky-text); }
.ticket__k i { background: var(--sky-text); }
.ticket__t { color: var(--ink-2); }
.ticket__d { color: var(--body); }
.ticket__stat { border-left-color: #b9dff2; }
.ticket__stat .k { color: var(--muted); }
.ticket__stat .v { color: var(--ink-2); }
.ticket__stat--old .v { color: #8d98a5; }
.ticket__stat--us { border-left-color: var(--sky); }
.ticket__foot { color: var(--muted-2); }
.ticket__r { border-left: 1px dashed #cfe0ee; }

/* ============================================================
   13. FAQ
   ============================================================ */
.faq { background: var(--bg-soft); padding: clamp(80px, 6.25vw, 120px) 0; }
.faq .wrap { max-width: 1440px; display: grid; grid-template-columns: 300px minmax(0, 800px); justify-content: space-between; gap: 40px; }
.faq__title { font-family: var(--font-latin); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; text-align: left;
  font-family: var(--font-latin); font-size: 18px; font-weight: 600; line-height: 1.4;
}
.faq__q img { width: 24px; height: 24px; flex: 0 0 auto; }
.faq__q .ic-minus { display: none; }
.faq__item.open .faq__q .ic-minus { display: block; }
.faq__item.open .faq__q .ic-plus { display: none; }
.faq__a { display: none; padding: 0 0 24px; margin-top: -12px; font-family: var(--font-latin); font-size: 15px; color: var(--muted); line-height: 1.6; }
.faq__item.open .faq__a { display: block; }

/* ============================================================
   13-2. 최종 CTA
   ============================================================ */
.final { background: var(--bg-soft-2); padding: clamp(80px, 6.25vw, 120px) 0; }
.final__box {
  display: block;
  background: transparent; border: 0; border-top: 1px solid #dce8f3; border-radius: 0;
  padding: clamp(48px, 5vw, 72px) 0 0;
}
.final__box .keyword { margin-bottom: 16px; }
.final__box .lead { margin-top: 20px; max-width: 620px; }
.final__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 32px; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 20px 32px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 600; }

/* ============================================================
   14. 푸터
   ============================================================ */
.footer { background: rgba(230,230,230,.4); color: #444; padding: 64px 0 56px; }
.footer__in { max-width: 1440px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer__brand img { display: block; }
.footer__brand .s { width: 143px; height: 21px; }
.footer__brand .l { width: 141px; height: 52px; margin-top: 13px; }
.footer__info { display: flex; gap: 60px; flex-wrap: wrap; font-size: 14px; line-height: 2.1; }
.footer__info b { font-weight: 600; }
.footer__copy { margin-top: 48px; font-size: 14px; }

/* ============================================================
   하단 고정 CTA. 히어로를 지나면 올라오고, 가격 섹션과 푸터가 보이면 숨는다
   ============================================================ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2,0,0,1);
}
.sticky-cta.is-show { transform: none; }
/* 신청 버튼 펄스: 테두리에서 고리가 퍼져 나간다. 상시 루프지만 사용자 요청(09-07 "잘 보이게 펄스"). 움직임 줄이기면 끈다 */
.cta-pulse { position: relative; }
.cta-pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: ctaPulse 2.4s cubic-bezier(.2,.6,.4,1) infinite; }
@keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(26,115,232,.55); } 70% { box-shadow: 0 0 0 16px rgba(26,115,232,0); } 100% { box-shadow: 0 0 0 0 rgba(26,115,232,0); } }
@media (prefers-reduced-motion: reduce) { .cta-pulse::after { animation: none; } }
.sticky-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.sticky-cta__txt { font-size: 15px; font-weight: 500; color: var(--body); }
.sticky-cta__txt b { color: var(--ink); font-weight: 600; }
.sticky-cta__btn { padding: 14px 28px; border-radius: 12px; background: var(--cta); color: var(--white-text); font-size: 16px; font-weight: 600; white-space: nowrap; filter: drop-shadow(0 8px 12px rgba(26,181,246,.22)); }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1279px) {
  .feature1 .wrap { grid-template-columns: 1fr; }
  .feature1__head { position: static; }
  .feature1__list { justify-self: stretch; max-width: 640px; }
  .together__stage { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .fcard { position: static; width: 100%; max-width: 506px; background: #fff; margin-top: 0; }
  .fcard--3 { margin-left: 0; }
  .life__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing__cards { grid-template-columns: repeat(2, 1fr); }
  .faq .wrap { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 1023px) {
  .step { padding: 18px 16px; gap: 8px; }
  .step__n { font-size: 26px; }
  .whynow__cards { grid-template-columns: 1fr; max-width: 520px; }
  .cond__cards { grid-template-columns: 1fr; max-width: 520px; }
  .cond__cards { margin-top: 48px; }
  :root { --card-h: auto; }
  .scene { min-height: 540px; }
  .demo__copy .lead br { display: none; }
  .demo__steps { gap: 8px 16px; }
  .demo__steps li { font-size: 14px; gap: 8px; }
  .final__box { grid-template-columns: 1fr; gap: 8px; }
  .final__actions { justify-content: flex-start; }
  .demo__steps li b { width: 22px; height: 22px; font-size: 11px; }
  .demo__stage { margin-top: 20px; }
  .demo__track { gap: 16px; }
  .demo__card { padding: 12px; border-radius: 28px; }
  .scene { padding: 16px 18px; gap: 8px; font-size: 13px; border-radius: 20px; }
  .wz-head { display: none; }
  .wz-bar { margin-bottom: 4px; }
  .wz-q { font-size: 15px; margin-top: 2px; }
  /* 칩은 한 줄로 두고 넘치는 건 자른다. 고른 칩은 셋째 안이라 항상 보인다 */
  .wz-chips { flex-wrap: nowrap; overflow: hidden; }
  .wz-chip { padding: 7px 12px; font-size: 13px; flex: 0 0 auto; }
  .wz-day { padding: 8px 0; font-size: 13px; border-radius: 10px; }
  .wz-sum { padding: 10px 12px; font-size: 13px; }
  .wz-cta { padding: 13px; font-size: 15px; border-radius: 12px; }
  .wz-subs { grid-template-columns: 1fr; }
  .wz-sub { padding: 14px; gap: 10px; }
  .wz-sub--ma { display: none; }
  .wz-input { min-height: 40px; font-size: 13px; }
  .wz-rounds span { font-size: 14px; padding: 6px 0 5px; }
  .wz-track { padding: 12px 10px; }
  .wz-dot { width: 28px; height: 28px; font-size: 12px; }
  .wz-pl { font-size: 9px; padding: 2px 3px; }
  .wz-cal__d em { font-size: 10px; }
  .ticket { grid-template-columns: 1fr; border-radius: 24px; }
  .ticket__l { padding: 32px 24px; }
  .ticket__stats { gap: 16px; }
  .ticket__stat .v { margin-top: 16px; }
  .ticket__r { padding: 28px 24px; border-left: 0; border-top: 2px dashed var(--line); }
  .ticket__cta { padding-top: 20px; }
}

/* 가격 정보는 한 번만 읽히도록 단순화 */
.ticket__includes { list-style:none; display:grid; gap:12px; margin-top:auto; padding-top:28px; color:var(--ink-2); font-size:15px; }
.ticket__includes li::before { content:'✓'; margin-right:9px; color:var(--sky-text); font-weight:600; }
@media (max-width: 719px) {
  .gnb__in { height: 64px; }
  .hero { padding-top: 64px; }
  .logo__sub { font-size: 16px; }
  .btn-enter { height: 36px; font-size: 14px; }
  .btn-enter img { width: 18px; height: 18px; }
  .hero__body { padding: 24px 0 24px; }
  /* 문장은 화면 중앙 그대로 두고 크기만 키워 빈 공간을 채운다.
     pin 길이는 2 화면까지 줄였다가 문장이 훅훅 넘어가 다시 늘렸다. 폰은 한 번 튕기면 두세 화면이 지나가므로 PC(3) 보다 길어야 한다 (사용자 09-08) */
  .intro__pin { padding: 72px 0; }
  .gsap-on .intro { height: calc(100vh * 3.6); height: calc(100svh * 3.6); }
  .intro__stage { max-width: 100%; }
  .intro__step { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.3; }
  .hero__title { white-space: normal; max-width: 100%; font-size: clamp(56px, 17vw, 82px); line-height: .95; }
  .hero__sub, .lead, .feature1__item p, .life__text p, .lcard__d, .pcard p, .final .lead { white-space: normal; text-wrap: pretty; }
  .hero__sub br, .lead br, .feature1__item p br, .life__text p br, .lcard__d br, .pcard p br, .final .lead br { display: none; }
  .h-36, .h-44, .h-52, .cond__title, .faq__title,
  .feature1__item h3, .ticket__t, .lcard__t, .pcard h3 { text-wrap: balance; }
  .subnav__in { grid-template-columns: 1fr; }
  .step { flex-direction: row; align-items: center; gap: 10px; padding: 13px 10px; border-left: 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; padding-left: 10px; }
  .step__n { font-size: 24px; min-width: 26px; }
  .step.last { border-radius: 0; border-top-color: transparent; }
  .ticket__t br { display: none; }
  .ticket__l { padding: 28px 20px; }
  .ticket__r { padding: 24px 20px; }
  .ticket__stats { grid-template-columns: 1fr; gap: 14px; }
  .ticket__stat .v { margin-top: 10px; font-size: 30px; }
  .ticket__row { font-size: 14px; }
  .ticket__now { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ticket__now .v { font-size: 32px; }
  .ticket__sub { text-align: left; }
  .ticket__includes { font-size: 14px; gap: 10px; }
  .final__actions { flex-direction: column; align-items: stretch; }
  .final__actions > a { width: 100%; }
  .acard { flex-wrap: wrap; border-radius: 28px; }
  .acard__img { flex-basis: 100%; width: 100%; height: 160px; }
  .acard__body { flex-basis: calc(100% - 80px); }
  .acard__body p { white-space: normal; }
  .ccard h3 { font-size: 21px; }
  .collage__frame { border-width: 7px; }
  .collage__name { font-size: 16px; }
  .night { min-height: 0; }
  .night::before { background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.72) 100%); }
  .night .wrap { padding: 64px 0; }
  .night__side { flex-direction: column; }
  .hours { width: 100%; flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 22px; }
  .hours__v { font-size: 32px; }
  .hours__cta { width: 100%; padding: 16px; }
  .life__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .life__col { gap: 16px; }
  .life__grid .lcard--img { height: 220px !important; }
  .pricing__cards { grid-template-columns: 1fr; margin-top: 48px; }
  /* 시안의 강제 줄바꿈은 1920 기준이라 좁은 폭에선 어색하게 끊긴다. 본문은 흐르게 둔다 */
  .lead br, .pcard p br, .lcard__d br, .life__text p br, .feature1__item p br, .final .lead br { display: none; }
  .btn-primary { width: 100%; padding: 18px 24px; font-size: 18px; }
  .btn-ghost { width: 100%; padding: 16px 24px; font-size: 16px; }
  .faq__q { font-size: 16px; }
  .footer__in { flex-direction: column; gap: 32px; }
  .footer__info { gap: 8px 32px; }
  .sticky-cta__txt { display: none; }
  .sticky-cta__btn { flex: 1; text-align: center; padding: 16px; }
  body.has-sticky { padding-bottom: 0; }
}
/* scroll-behavior 는 CSS 에서 쓰지 않는다 (앵커 이동은 JS 에서 처리) */

/* 가격 영역: 정상가 → 할인액 → 시험기간 특가의 강한 위계 */
.ticket__r { position: relative; }
.ticket__price-lines { display:grid; gap:10px; }
.ticket__price-line { display:flex; align-items:baseline; justify-content:space-between; gap:18px; font-size:16px; line-height:1.25; }
.ticket__price-line span { color:var(--muted-2); }
.ticket__price-line--normal s { color:#858d96; font-weight:600; }
.ticket__price-line--discount b { color:var(--ink); font-weight:600; }
.ticket__price-line--special { margin-top:4px; align-items:center; }
.ticket__price-line--special span { color:var(--blue-text); font-weight:600; }
.ticket__price-line--special strong { color:var(--blue-text); font-size:clamp(38px,4vw,58px); font-weight:600; letter-spacing:-.045em; line-height:1; white-space:nowrap; }
.ticket__price-line--special strong small { font-size:.42em; letter-spacing:-.02em; }
.ticket__price-lines + .ticket__sep { margin-top:24px; }
@media (max-width: 719px) {
  .ticket__price-lines { padding-right:0; }
  .ticket__price-line { font-size:14px; }
  .ticket__price-line--special strong { font-size:clamp(34px,11vw,48px); }
}

/* 폰에서 읽는 본문은 최소 16px (사용자 09-08).
   앱 화면을 재현한 목업(.wz-*, .f1g, .demo, .scene)과 뱃지·칩·원형 번호는 그 화면의 축소 재현이라 그대로 둔다.
   기존 모바일 선언을 덮어야 하므로 파일 맨 끝에 둔다 */
@media (max-width: 719px) {
  .step p,
  .feature1__item p,
  .whynow__note,
  .gcard p:not(.gcard__grade),
  .faq__a,
  .timeline__t, .hours__k, .hours__d,
  .ticket__k, .ticket__stat .k, .ticket__foot,
  .ticket__row, .ticket__now .k, .ticket__includes,
  .ticket__price-line, .ticket__sub, .ticket__note,
  .footer__info, .footer__copy { font-size: 16px; }
}

/* Step by step(순서가 있습니다) 항목 제목은 '어디서 공부' 카드(.acard 24px/1.4)가 폰에서 가장 읽기 좋다는 판단에 맞춘다 (사용자 09-08) */
@media (max-width: 719px) {
  .feature1__item h3 { font-size: 24px; line-height: 1.4; }
}