@charset "utf-8";
/* 대치플랜 · main : 메인 페이지 전용 (지면 · 인트로 s0 · 표지 s1 · M2~M9) */

/* ------------------------------------------------------- 지면 (배경 레이어) */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.field__mesh { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }

.blob {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
  animation: drift var(--dur, 46s) ease-in-out infinite alternate;
}

/* 옮기기만 한다. 크기를 같이 바꾸면 그 큰 면을 매번 다시 래스터라이즈해야 해서
   컴포지터에 올린 의미가 없어진다(드롭 프레임 9%까지 올라갔었다). */
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx, 6%), var(--dy, -5%), 0); }
}

/* 지면이 보이는 건 표지뿐이다. 표지를 지나면 멈춘다. */
body.past-hero .blob { animation-play-state: paused; }

.blob--1 { width: 78vw; height: 78vw; left: 24%; top: 8%;   --dx: 7%;  --dy: -6%;  --dur: 44s;
  background: radial-gradient(circle, rgba(255,138,110,.62), rgba(255,138,110,0) 66%); }

.blob--2 { width: 66vw; height: 66vw; left: -4%; top: -16%; --dx: 9%;  --dy: 7%;  --dur: 58s;
  background: radial-gradient(circle, rgba(255,181,158,.55), rgba(255,181,158,0) 66%); }

.blob--3 { width: 60vw; height: 60vw; left: -18%; top: 30%; --dx: 8%;  --dy: -9%; --dur: 52s;
  background: radial-gradient(circle, rgba(255,255,255,.78), rgba(255,255,255,0) 64%); }

.blob--4 { display: none;
  /* 다섯 장은 컴포지터에 과하다. 카드가 지면을 대부분 덮어 셋이면 같은 그림이다. */
   width: 70vw; height: 70vw; left: 52%;  top: 56%; --dx: -8%; --dy: -6%; --dur: 64s;
  background: radial-gradient(circle, rgba(246,160,138,.46), rgba(246,160,138,0) 66%); }

.blob--5 { display: none;
   width: 56vw; height: 56vw; left: 66%;  top: -22%; --dx: -6%; --dy: 8%;  --dur: 50s;
  background: radial-gradient(circle, rgba(255,240,232,.66), rgba(255,240,232,0) 64%); }

.field__dark {
  position: absolute; inset: 0; opacity: 0;
  /* 프레임 루프가 아니라 컴포지터가 잇는다. 탭이 뒤로 가 있어도 값이 어긋나지 않는다. */
  transition: opacity .55s linear;
  background:
    /* 이 레이어는 화면에 고정돼 있어서 색을 넣으면 섹션 경계에서 어긋난다.
       전환(밝기)만 맡고, 페이지의 색은 각 페이지의 ::before 가 갖는다. */
    linear-gradient(#17161A, #17161A);
}

.field__grain {
  /* mix-blend-mode 를 쓰면 아래 레이어 전부를 한 장으로 합쳐서 다시 그린다.
     스크롤 중 p90 프레임이 16.7ms -> 33.3ms 로 두 배가 됐다.
     블렌드 없이 옅게 덮어도 질감은 그대로다. */
  position: absolute; inset: 0; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- 페이지 */
.page {
  position: relative; z-index: 1;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--u) * 7) var(--gut) calc(var(--u) * 4.5);
  overflow: hidden;
}

.shell { width: 100%; }

/* 카드가 없는 페이지는 글이 기준선에서 시작한다 */
.page:not(.hero) .shell { padding-left: calc(var(--col) - var(--gut)); padding-right: calc(var(--col) - var(--gut)); }

/* 페이지마다 지면이 조금씩 다르게 흐른다.
   메시 캔버스는 고정이라 그대로면 여섯 장이 전부 같은 배경이 된다.
   섹션마다 얇은 색면을 한 겹 더 얹어 성격을 바꾼다. */
.page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}

/* 다크 페이지의 지면과 활자색.
   지면을 섹션이 직접 들고 있어야 스크립트가 멎어도 글자가 읽힌다.
   전면 오버레이(.field__dark)는 앞뒤 페이지까지 함께 잠기게 하는 연출용이다. */
.page[data-tone="dark"] {
  color: var(--on-noir-2);
  background: #17161A;
}

.page[data-tone="dark"] h1, .page[data-tone="dark"] h2, .page[data-tone="dark"] h3 { color: var(--on-noir); }

/* ══════════════════════════════════════════════════ 01 표지
   시안(2560x1400)에서 잰 비율을 그대로 옮겼다.
   카드 안을 3열로 나눈다 : 글 / 인물 / 이력.
   인물은 두 행을 걸쳐 바닥에 붙고, 마퀴는 글 아래 왼쪽에만 깔린다. */
.hero { padding: calc(var(--u) * 6.6) var(--gut) calc(var(--u) * 2.6); }

/* 래퍼는 전환 모션(GSAP)이, 카드는 진입 모션(CSS)이 각자 맡는다.
   한 요소의 transform 을 둘이 같이 만지면 서로 덮어쓴다. */
.hero__wrap { flex: 1; min-height: 0; width: 100%; display: flex; }

.hero__card {
  position: relative;
  flex: 1; min-height: 0; width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 23);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u) * .8) 0 calc(var(--col) - var(--gut));
}

@media (max-width: 899px) {
  .hero__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    row-gap: calc(var(--u) * 1.2);
    padding: calc(var(--u) * 2.6) calc(var(--u) * 2.2) 0;
  }
}

.hero__mark {
  position: absolute; top: calc(var(--u) * 2.2); right: calc(var(--u) * 1.6);
  font-weight: 900; letter-spacing: -.006em; line-height: .82;
  font-size: calc(var(--u) * 5.4);
  color: rgba(23, 21, 26, .058);
  pointer-events: none; user-select: none; white-space: nowrap;
}

/* ── 글 ── */
.hero__lede {
  position: relative; z-index: 2;
  grid-column: 1; grid-row: 1;
  align-self: center; justify-self: start;
  display: grid; gap: calc(var(--u) * .9);
  padding-top: calc(var(--u) * 3);
}

.hero__sym { width: calc(var(--u) * 2.5); min-width: 24px; height: auto; }

.hero__h {
  font-weight: 900; letter-spacing: -.004em; line-height: 1.06; color: var(--ink);
  font-size: calc(var(--u) * 3.5);
  white-space: nowrap;
  margin-top: calc(var(--u) * .3);
}

/* 필기체가 '올케어' 바로 위에 얹힌다. 시안의 자리다. */
.hero__accent { position: relative; display: inline-block; }

.hero__accent em { font-style: normal; color: var(--red); }

.hero__script {
  position: absolute; left: 50%; bottom: 100%;
  transform: translate(-46%, -.22em) rotate(-2deg);
  font-size: .46em; line-height: 1; white-space: nowrap;
  color: var(--red); pointer-events: none;
}

.hero__sub {
  margin-top: calc(var(--u) * 1.5);
  font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-2);
  font-weight: 500;
}

.hero__sub .l { display: inline-block; vertical-align: top; }

.hero__sub b { color: var(--red); font-weight: 800; }

.pills { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 1.5); }

.pill {
  padding: .82em 1.5em; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: -.002em;
}

.pill--red { background: var(--red); color: #fff; box-shadow: var(--e-red); }

.pill--ink { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(23, 21, 26, .45); }

/* ── 인물 : 두 행을 걸쳐 카드 바닥에 붙는다 ── */
/* 인물은 그리드 밖에서 카드 바닥에 붙는다.
   칸 안에 넣으면 칸 폭이 키를 결정해 시안보다 훨씬 작아진다. */
.hero__photo {
  position: absolute; bottom: 0; right: calc(var(--u) * 23); z-index: 1;
  height: 75%; width: auto; max-width: none;
  object-fit: contain; object-position: bottom center;
  pointer-events: none;
}

@media (max-width: 899px) {
  .hero__photo { display: none; }
}

/* ── 이력 ── */
.hero__who {
  position: relative; z-index: 2;
  grid-column: 2; grid-row: 1 / -1;
  /* 가운데 맞추면 인물 얼굴과 같은 높이라 서로 다툰다.
     아래로 내려 앉히면 인물은 위, 이력은 아래로 읽는 순서가 생긴다. */
  align-self: end;
  /* 칸 안에서 글이 왼쪽에 붙어 오른쪽에 빈자리가 남아 있었다. 그만큼 밀어 준다. */
  padding-left: calc(var(--u) * 1.7);
  padding-bottom: calc(var(--u) * 3.6);
  display: grid; gap: calc(var(--u) * 1.2); justify-items: start;
  margin: 0;
}

.hero__cred {
  position: relative;
  padding-left: calc(var(--u) * 1.1);
  display: grid; gap: calc(var(--u) * .26);
}

.hero__cred::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 3px; height: 1.15em; border-radius: 2px; background: var(--red);
}

.hero__role { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-2); }

.hero__name { font-size: var(--fs-xl); font-weight: 900; letter-spacing: -.006em; color: var(--ink); line-height: 1.2; }

.hero__list { margin-top: calc(var(--u) * .6); display: grid; gap: calc(var(--u) * .24); }

.hero__list li {
  position: relative; padding-left: .8em;
  font-size: var(--fs-2xs); line-height: 1.5; color: var(--ink-3);
}

.hero__list li::before { content: "-"; position: absolute; left: 0; }

.hero__sign { width: calc(var(--u) * 9.5); height: auto; opacity: .8; margin-left: calc(var(--u) * 1.1); margin-top: calc(var(--u) * .4); }

/* ── 대학 마퀴 : 글 아래, 왼쪽에만 ── */
.marquee {
  position: relative; z-index: 2;
  grid-column: 1; grid-row: 2;
  align-self: end; justify-self: start;
  /* 인물이 왼쪽으로 물러난 만큼 마퀴도 폭을 줄여야 발치에서 겹치지 않는다 */
  width: min(100%, calc(var(--u) * 31));
  padding-block: calc(var(--u) * 1.2) calc(var(--u) * 2.4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 80%, transparent 100%);
}

@media (max-width: 899px) {
  .marquee { grid-column: 1; grid-row: 3; width: 100%; }
}

.marquee__track { display: flex; align-items: center; width: max-content; will-change: transform; }

.marquee__item { flex: none; padding-right: calc(var(--u) * 2.2); }

.marquee__item img {
  height: calc(var(--u) * 1.9); min-height: 20px; width: auto;
  opacity: .78; filter: grayscale(1) brightness(.5) contrast(1.1);
  transition: opacity .4s var(--ease), filter .4s var(--ease);
}

.marquee:hover .marquee__item img { opacity: 1; filter: grayscale(0) brightness(1); }

/* 위쪽 빨간 실선. 올려다보면 길어지며 밝아진다. */
@property --rail { syntax: "<number>"; inherits: false; initial-value: 1; }

/* ------------------------------------------------- 글자 단위 모션
   창(.ch)을 씌우고 그 안에서 글자(.ch__i)를 밀어 올린다.
   글자가 창 밖에서 걸어 들어오는 것처럼 보인다. */
.ch { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: inherit; }

.ch__i { display: inline-block; will-change: transform, opacity; }

.js .hero__lede > *, .js .hero__who, .js .marquee { opacity: 0; transform: translateY(calc(var(--u) * 1.4)); }

.js .hero.is-on .hero__lede > *, .js .hero.is-on .hero__who, .js .hero.is-on .marquee {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.js .hero.is-on .hero__lede > *:nth-child(1) { transition-delay: 120ms; }

.js .hero.is-on .hero__lede > *:nth-child(2) { transition-delay: 200ms; }

.js .hero.is-on .hero__lede > *:nth-child(3) { transition-delay: 280ms; }

.js .hero.is-on .hero__lede > *:nth-child(4) { transition-delay: 380ms; }

.js .hero.is-on .hero__lede > *:nth-child(5) { transition-delay: 460ms; }

.js .hero.is-on .hero__who { transition-delay: 320ms; }

.js .hero.is-on .marquee { transition-delay: 620ms; }

.js .hero__card { opacity: 0; transform: translateY(calc(var(--u) * 2.4)) scale(.985); }

.js .hero.is-on .hero__card { opacity: 1; transform: none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }

/* --------------------------------------------------------- 모션 축소 */
@media (prefers-reduced-motion: reduce) {
  .js [data-par], .js .hero__card, .js .hero__lede > *, .js .hero__who, .js .marquee { opacity: 1 !important; transform: none !important; }
  .marquee__track { transform: none !important; }
  .ch__i { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* --------------------------------------------------- 좁은 화면 보정 */
@media (max-width: 899px) {
  .page { padding: calc(var(--u) * 8) var(--pad) calc(var(--u) * 6); }
  .hero__card { padding: calc(var(--u) * 3.4) calc(var(--u) * 2.6) calc(var(--u) * 2); }
  /* 카드 폭보다 길어서 'AECHI PLAN' 처럼 잘려 나온다.
     장식이고 로고는 헤더에 이미 있으니 좁은 화면에서는 뺀다. */
  .hero__mark { display: none; }
}

@media (max-width: 599px) {
  .page { padding-top: max(56px, calc(var(--u) * 6)); padding-bottom: calc(var(--u) * 2.6); }
}

@media (max-width: 599px) and (max-height: 800px) {
  .page { padding-bottom: calc(var(--u) * 2.2); }
}

/* 세로가 660px도 안 되는 화면(구형 소형 폰)에서는
   글자를 더 줄이면 읽을 수 없고, 그대로 두면 overflow:hidden 이 내용을 잘라낸다.
   잘라내는 쪽이 훨씬 나쁘므로 이때만 한 화면 규칙을 놓아준다. */
@media (max-width: 599px) and (max-height: 660px) {
  .page { height: auto; min-height: 100svh; overflow: visible; }
}

/* 04 · 05 의 카드 뒤는 거의 평면이라 블러가 눈에 보이지 않는다.
   반투명 면과 테두리만으로 같은 유리 인상이 나오고, 그리기 비용은 사라진다. */
.guard {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* 1페이지 : 이력이 두 행을 걸치게 바꿨으니 좁은 화면에서는 제자리로 */
@media (max-width: 899px) {
  .hero__who { grid-column: 1; grid-row: 2; padding: 0; gap: calc(var(--u) * .6); }
}

/* 1페이지 이력 : 좁은 노트북(1100~1280)에서 한 항목이 두 줄로 접히며 수상/대상 한 낱말만 남았다.
   줄 수는 그대로 두고 두 줄의 길이만 고르게 맞춘다. */
.hero__list li { text-wrap: balance; }

#s1 .hero__h { font-size: var(--fs-5xl); }

@media (max-width: 599px) {
  #s1 .hero__h { font-size: calc(var(--u) * 3.5); }
}

/* 이력 글자를 줄인 만큼 칸도 좁혀서, 오른쪽 여백은 그대로 둔 채 블록째 오른쪽으로 옮긴다 */
#s1 .hero__card { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 21.5); }

@media (max-width: 899px) {
  #s1 .hero__card { grid-template-columns: minmax(0, 1fr); }
}

#s1 .hero__photo { right: calc(var(--u) * 21.5); }

#s1 .hero__list li { font-size: clamp(12px, calc(var(--u) * .78), 12.5px); }

#s1 .hero__role { font-size: var(--fs-2xs); }

#s1 .hero__name { font-size: var(--fs-lg); }

/* ══════════════════════════════════════════════════ 2026-09-11 · 4차 ══════════ */
/* ── 01 표지 ─────────────────────────────────────────────
   이력 글자를 한 단계 더 줄인 만큼 칸을 좁힌다. 오른쪽 여백(.8u)은 그대로라 블록째 오른쪽으로 간다.
   인물은 이력 칸보다 조금 더 오른쪽으로 들어온다(사진 오른쪽 11% 는 투명이라 실제 인물과 이력 사이 틈은 남는다). */
#s1 .hero__card { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 19.8); }

@media (max-width: 899px) {
  #s1 .hero__card { grid-template-columns: minmax(0, 1fr); }
}

#s1 .hero__photo { right: calc(var(--u) * 17.8); }

#s1 .hero__list li { font-size: clamp(12px, calc(var(--u) * .72), 11.5px); }

#s1 .hero__role { font-size: clamp(12px, calc(var(--u) * .76), 12px); }

#s1 .hero__name { font-size: var(--fs-lg); }

#s1 .hero__sign { width: calc(var(--u) * 8.8); }

/* All Care : '올케어' 오른쪽 어깨에 비스듬히 얹힌 손글씨 표지. 크게, 끝을 올케어 끝에 맞춘다. */
#s1 .hero__script {
  left: auto; right: -.22em; bottom: 86%;
  transform: rotate(-7deg); transform-origin: 100% 100%;
  font-size: .58em; line-height: 1;
}

/* 두 알약은 살짝 아래로 */
#s1 .pills { margin-top: calc(var(--u) * 2.6); }

/* 마퀴 : 보이는 폭을 조금 넓힌다 (인물 발치와는 여전히 떨어져 있다) */
#s1 .marquee {
  width: min(100%, calc(var(--u) * 35));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 86%, transparent 100%);
}

/* All Care : 올케어 글자와 겹치지 않게 어깨 위로 완전히 올린다 */
#s1 .hero__script { bottom: calc(100% + .02em); right: -.34em; transform: rotate(-6deg); font-size: .56em; }

/* ══════════════════════════════════════════════════ 2026-09-11 · 5차 ══════════ */
/* 01 두 알약 : 조금 더 아래로 */
#s1 .pills { margin-top: calc(var(--u) * 3.6); }

/* ══════════════════════════════════════════════════════════════════════════
   반응형 재설계 (2026-09-11)
   화면을 폭 하나로 자르지 않고, 사람이 그 화면에서 어떻게 읽는지로 나눈다.

   A. 데스크톱 · 노트북 · 태블릿 가로 (폭 600+ · 높이 560+)
      한 화면 한 장면. 크기는 --u = min(1vw, 1.78vh) 로 폭과 높이 중 좁은 쪽을 따른다.
   B. 태블릿 세로 (폭 600~899 · 높이 760+)
      한 화면 한 장면은 지키되, 세로가 넉넉하니 폭 기준으로 키워 빈 화면을 채운다. 인물 사진을 되살린다.
   C. 폰 세로 (폭 599 이하)
      읽히는 것이 먼저다. 높이에 맞춰 글자를 줄이지 않는다(폭 기준 --u).
      긴 페이지는 제 높이만큼 늘어나고, 02 는 겹쳐 쌓이는 카드(sticky), 05 는 스크롤 위치로 켜지는 목록.
   D. 낮은 가로 화면 (높이 559 이하 · 폰 가로 등)
      한 화면에 담을 수 없으니 모든 페이지가 제 높이로 흐른다. 핀 장면은 쓰지 않는다(JS 와 같은 기준).
   ══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────── C. 폰 세로 ───────── */
@media (max-width: 599px) {
  .page { height: auto; min-height: 100svh; overflow: visible; padding: 84px var(--pad) 60px; }
  /* 01 표지 : 글 → 사진과 이름 → 이력 → 대학 로고. 사진을 다시 보여 준다 */
  #s1 { padding: 68px 12px 14px; }
  #s1 .hero__card {
    grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto;
    align-content: center; column-gap: 14px; row-gap: 0;
    padding: 26px 18px 6px;
  }
  #s1 .hero__lede { grid-column: 1 / -1; grid-row: 1; padding-top: 0; gap: 10px; margin-bottom: 22px; }
  #s1 .hero__sym { width: 26px; min-width: 0; }
  #s1 .hero__h { font-size: min(7.3vw, 32px); margin-top: 6px; }
  #s1 .hero__sub { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.65; }
  #s1 .pills { margin-top: 8px; gap: 8px; }
  #s1 .pill { font-size: var(--fs-xs); padding: .72em 1.1em; }
  #s1 .hero__photo {
    display: block; position: relative; right: auto; bottom: auto; z-index: 1;
    grid-column: 1; grid-row: 2 / span 2; align-self: start;
    width: 88px; height: 112px; max-width: none;
    object-fit: cover; object-position: 50% 6%;
    border-radius: 14px; background: linear-gradient(160deg, #FFFFFF, #F6E3E0);
    box-shadow: 0 10px 22px -14px rgba(84, 34, 30, .45);
  }
  #s1 .hero__who, #s1 .hero__cred { display: contents; }
  #s1 .hero__role { grid-column: 2; grid-row: 2; align-self: end; font-size: var(--fs-2xs); }
  #s1 .hero__name { grid-column: 2; grid-row: 3; align-self: start; font-size: var(--fs-2xl); margin-top: 2px; }
  #s1 .hero__sign { grid-column: 2; grid-row: 3; align-self: end; justify-self: start; width: 100px; margin: 0; opacity: .75; }
  #s1 .hero__list { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; gap: 3px; }
  #s1 .hero__list li { font-size: var(--fs-2xs); line-height: 1.5; text-wrap: pretty; }
  #s1 .marquee { grid-column: 1 / -1; grid-row: 5; width: 100%; padding-block: 14px 12px; }
}

@media (max-width: 374px) {
  #s1 .hero__list li { font-size: 12px; }
}

/* ─────────────────────────────────────────────── D. 낮은 가로 화면 ─── */
@media (min-width: 600px) and (max-height: 559px) {
  .page { height: auto; min-height: 0; overflow: visible; padding: 88px var(--gut) 64px; }
  #s1 { padding-top: 72px; padding-bottom: 24px; }
  #s1 .hero__card { flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); grid-template-rows: auto auto; padding: 32px 28px 0 32px; }
  #s1 .hero__photo { display: none; }
  #s1 .hero__lede { grid-column: 1; grid-row: 1; padding-top: 0; }
  #s1 .hero__h { font-size: clamp(26px, calc(var(--u) * 3.6), 40px); }
  #s1 .hero__sub { font-size: var(--fs-xs); }
  #s1 .hero__who { grid-column: 2; grid-row: 1 / -1; align-self: center; padding: 0 0 16px; }
  #s1 .hero__list li { font-size: 12px; }
  #s1 .marquee { grid-column: 1; grid-row: 2; width: 100%; }
}

/* ─────────────────────────────────────────────── B. 태블릿 세로 ────── */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 760px) {
  /* 01 : 인물을 오른쪽 아래에 크게, 이력은 그 왼쪽에 */
  #s1 .hero__card { grid-template-rows: minmax(0, 1fr) auto auto; padding: calc(var(--u) * 4.4) calc(var(--u) * 3.4) 0; }
  #s1 .hero__lede { align-self: start; padding-top: calc(var(--u) * 2); }
  #s1 .hero__h { font-size: calc(var(--u) * 3.3); }
  #s1 .hero__sub { font-size: var(--fs-md); }
  #s1 .hero__photo { display: block; right: 2%; height: 52%; }
  #s1 .hero__who { grid-column: 1; grid-row: 2; max-width: 52%; padding: 0 0 calc(var(--u) * 1.6); gap: calc(var(--u) * .9); }
  #s1 .hero__list li { font-size: var(--fs-2xs); }
  #s1 .hero__role { font-size: var(--fs-2xs); }
  #s1 .hero__name { font-size: var(--fs-xl); }
  #s1 .marquee { grid-row: 3; width: 54%; }
}

/* ─────────────────────────────────────────────── A. 보정 ─────────── */
/* 900~1199 : 이력 칸이 좁아 한 줄 이력이 두 줄로 접혔다 */
@media (min-width: 900px) and (max-width: 1199px) {
  #s1 .hero__card { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 24); }
  #s1 .hero__photo { right: calc(var(--u) * 21.5); }
}

/* 아주 큰 화면 : 제목은 커지는데 본문이 상한에 막혀 작아 보이던 것 */
@media (min-width: 1800px) and (min-height: 900px) {
  #s1 .hero__list li { font-size: var(--fs-2xs); }
  #s1 .hero__role { font-size: var(--fs-2xs); }
  #s1 .pill { font-size: var(--fs-md); }
}

/* B 보정 : 글 묶음이 제 높이보다 작은 칸에 들어가 이력과 겹쳤다. 첫 칸은 글 높이 그대로, 남는 자리는 이력 칸이 갖는다 */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 760px) {
  #s1 .hero__card { grid-template-rows: auto minmax(0, 1fr) auto; }
  #s1 .hero__lede { padding-top: 0; }
  #s1 .hero__who { align-self: end; }
  #s1 .hero__sign { width: calc(var(--u) * 7.6); }
}

/* 세로로 긴 큰 태블릿(1024x1366 등) : 두 칸 표지는 인물이 제목을 덮는다. 태블릿 세로 배치를 쓴다 */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: portrait) and (min-height: 1000px) {
  #s1 .hero__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--u) * 6) calc(var(--u) * 5) 0; }
  #s1 .hero__lede { grid-column: 1; grid-row: 1; padding-top: calc(var(--u) * 3); }
  #s1 .hero__h { font-size: calc(var(--u) * 5); }
  #s1 .hero__sub { font-size: var(--fs-2xl); }
  #s1 .pill { font-size: var(--fs-lg); }
  #s1 .hero__photo { right: 4%; height: 54%; }
  #s1 .hero__who { grid-column: 1; grid-row: 2; align-self: end; max-width: 50%; padding: 0 0 calc(var(--u) * 2.4); }
  #s1 .hero__list li { font-size: var(--fs-xs); }
  #s1 .hero__role { font-size: var(--fs-xs); }
  #s1 .hero__name { font-size: var(--fs-2xl); }
  #s1 .marquee { grid-column: 1; grid-row: 3; width: 54%; }
}

/* 대학 로고 마퀴 : 픽셀 높이가 아니라 눈에 보이는 크기를 맞춘다.
   로고 이미지는 테두리 여백을 잘라낸 파일(images/univ)을 쓰고, 칸마다 --k 로 높이를 보정한다.
   (가로로 긴 로고는 조금 낮게, 좁고 촘촘한 로고는 조금 높게 · 잉크가 짙은 로고는 조금 작게)
   여백이 잘려 있으니 같은 간격이 실제로도 같은 간격으로 보인다. */
.marquee { --logo-h: max(18px, calc(var(--u) * 1.62)); --logo-gap: max(22px, calc(var(--u) * 2.6)); }

.marquee__item { padding-right: var(--logo-gap); display: flex; align-items: center; height: calc(var(--logo-h) * 1.12); }

.marquee__item img { height: calc(var(--logo-h) * var(--k, 1)); min-height: 0; width: auto; }

/* 01 이력 칸 : 높이가 낮은 노트북(1366x625 등)에서는 크기 단위가 높이에 묶여 칸이 220px 까지 좁아지고
   이력 아홉 줄이 모두 두 줄로 접혔다. 칸 폭에 바닥값을 둔다(1440 이상에서는 원래 폭이 더 넓어 달라지지 않는다). */
@media (min-width: 1200px) {
  #s1 .hero__card { grid-template-columns: minmax(0, 1fr) max(calc(var(--u) * 19.8), 280px); }
  #s1 .hero__photo { right: max(calc(var(--u) * 17.8), 258px); }
}

@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  #s1 .hero__card { grid-template-columns: minmax(0, 1fr) max(calc(var(--u) * 24), 262px); }
  #s1 .hero__photo { right: max(calc(var(--u) * 21.5), 236px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   00 인트로 4차 (2026-09-11)
   - 배경 : 붉은 면 대신 사이트의 다크 지면(--noir) 한 장. 빛 번짐 · 셰이더 없이 가운데만 아주 옅게 밝다.
   - 제목 : 로드 때 굴러 내려온 첫 문장이, 후기가 흐르기 시작하면 '같은 고민을 하던 학생들이 / 합격으로 답했습니다.' 로 굴러 바뀐다.
   - 후기 : 카톡 대화 캡처 모양의 카드(같은 크기 4:5). 화면에 들어오면 날짜 → 학생 말풍선 → 선생님 답장 순서로 도착한다.
   - 끝   : 표지(s1)가 종이 한 장처럼 아래에서 덮어 올라오고, 무대는 뒤로 물러나며 어두워진다.
   핀 대신 sticky. 표지의 종이 면은 #s1::before (끝나면 사라져 원래 지면이 보인다).
   ══════════════════════════════════════════════════════════════════════════ */
#s0.page {
  height: auto; min-height: 0; display: block; padding: 0;
  overflow: visible; background: transparent; z-index: 2;
  pointer-events: none;   /* 섹션 상자는 표지와 겹친다. 무대와 카드만 입력을 받는다. */
}

#s0::before, #s0::after { content: none; }

#s0 .intro__stage {
  position: sticky; top: 0; z-index: 1;
  height: 100vh; overflow: hidden; pointer-events: auto;
  background: var(--noir); color: var(--on-noir);
}

#s0 .intro__stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 46%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%);
}

#s0 .intro__tint { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }

#s0 .intro__lift { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; transform-origin: 50% 42%; }

#s0 .intro__heads { display: grid; place-items: center; }

#s0 .intro__h {
  grid-area: 1 / 1; margin: 0; padding: 0 var(--gut);
  text-align: center; color: #F6F4F5;
  font-size: min(6.4vw, 17.5vh); font-weight: 800;
  line-height: 1.12; letter-spacing: -.01em; word-break: keep-all;
}

#s0 .intro__h--b { visibility: hidden; }

/* 스크립트가 글자를 창 위로 올려 둔 뒤에 보이게 한다 */
#s0 .intro__ln { display: block; white-space: nowrap; }

/* 낱말 덩어리 : 줄바꿈 단위이자 굴러가는 글자를 가리는 창 */
#s0 .intro__seg {
  position: relative; display: inline-block; vertical-align: top;
  white-space: nowrap; overflow: hidden;
  padding: .015em .03em .025em; margin: -.015em -.03em -.025em;
}

/* 글자 아래로 같은 글자 두 벌 : 굴러갈 때 슬롯처럼 지나가고, 멈춰 있으면 창 밖이라 보이지 않는다 */
#s0 .rch { display: inline-block; line-height: 1.12; text-shadow: 0 1.12em 0 currentColor, 0 2.24em 0 currentColor; }

#s0 .intro__strike::after {
  content: ""; position: absolute; left: .03em; right: .03em; top: 50%;
  height: .085em; margin-top: -.02em; border-radius: 99px;
  background: var(--red-hi);
  transform: rotate(-3deg) scaleX(var(--strike, 0)); transform-origin: 0 50%;
}

#s0 .intro__foot { position: absolute; left: 0; right: 0; bottom: max(22px, 4.6vh); text-align: center; }

#s0 .intro__brand { display: inline-block; font-size: clamp(12px, calc(var(--u) * .92), 15px); font-weight: 600; letter-spacing: -.01em; color: var(--on-noir-2); }

/* ── 카톡 후기 카드 : 크기 · 짜임은 모두 같고 자리만 불규칙하다 */
#s0 .intro__reviews {
  --card: clamp(240px, min(21vw, 34vh), 340px);
  --lead: 30vh;      /* 제목만 보이는 첫 박자 */
  --last: 214vh;     /* 마지막 카드의 --t */
  position: relative; z-index: 2;
  margin: 0; padding: 0; list-style: none;
  height: calc(var(--lead) + var(--last) + var(--card) * 1.08);
}

#s0 .kc {
  position: absolute;
  left: min(var(--x), calc(100% - var(--card) - var(--gut)));
  top: calc(var(--lead) + var(--t));
  width: var(--card); aspect-ratio: 1 / 1.08;   /* 대화 분량에 맞춘 비율 : 4:5 는 위쪽이 비었다 */
  pointer-events: auto;
}

#s0 .kc__in {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: calc(var(--card) * .065);
  background: #B2C7D9; color: #1C2630;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .4), 0 40px 70px -30px rgba(0, 0, 0, .85);
  container-type: inline-size;
}

#s0 .kc__bar { flex: none; display: flex; align-items: center; gap: 2.4cqi; padding: 3.4cqi 4.6cqi 2.6cqi; }

#s0 .kc__arrow { font-size: 8.4cqi; line-height: .7; font-weight: 300; color: #26313C; }

#s0 .kc__room { font-size: 5cqi; font-weight: 700; letter-spacing: -.008em; color: #1C2630; }

/* 대화는 아래에 붙는다 (가장 최근 메시지가 바닥) */
#s0 .kc__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.2cqi; padding: 0 3.8cqi 4.6cqi; }

#s0 .kc__date {
  align-self: center; margin-bottom: 1.4cqi;
  padding: .42em 1.15em; border-radius: 999px;
  background: rgba(33, 52, 71, .2); color: #F3F6F9;
  font-size: 3.4cqi; font-weight: 500; line-height: 1.3; letter-spacing: -.01em;
}

#s0 .kc__them { display: flex; align-items: flex-start; gap: 2cqi; }

#s0 .kc__av { flex: none; width: 11cqi; height: 11cqi; border-radius: 40%; background: var(--av, #9FB0BF); }

#s0 .kc__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqi; }

#s0 .kc__name { font-size: 3.7cqi; line-height: 1.2; color: #3A4552; margin-bottom: .4cqi; }

#s0 .kc__row { display: flex; align-items: flex-end; gap: 1.3cqi; max-width: 100%; transform-origin: 0 100%; }

#s0 .kc__b {
  position: relative; margin: 0; max-width: 58cqi;
  padding: .5em .76em; border-radius: .9em;
  background: #FFFFFF; color: #191919;
  font-size: 4.7cqi; font-weight: 400; line-height: 1.4; letter-spacing: -.01em;
  word-break: keep-all; overflow-wrap: anywhere;
}

#s0 .kc__b--tail { border-top-left-radius: .22em; transform-origin: 0 0; }

#s0 .kc__b--tail::before {
  content: ""; position: absolute; top: 0; left: -.34em; width: .5em; height: .62em;
  background: inherit; clip-path: polygon(100% 0, 0 0, 100% 100%);
}

#s0 .kc__me { display: flex; justify-content: flex-end; align-items: flex-end; gap: 1.3cqi; margin-top: 1cqi; transform-origin: 100% 100%; }

#s0 .kc__b--me { max-width: 62cqi; background: #FEE500; border-top-right-radius: .22em; }

#s0 .kc__b--me::after {
  content: ""; position: absolute; top: 0; right: -.34em; width: .5em; height: .62em;
  background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
}

#s0 .kc__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .5cqi; }

#s0 .kc__t { font-size: 3.1cqi; line-height: 1.2; color: #4B5763; white-space: nowrap; }

#s0 .kc__read { font-size: 3.3cqi; line-height: 1; font-weight: 700; color: #D9A900; }

/* 자리 · 프로필(가림 처리한 사진처럼 흐린 색면) */
#s0 .kc:nth-child(1) { --x: 7%;  --t: 0vh;   --av: radial-gradient(circle at 50% 38%, #F1D9CB 0 24%, rgba(241, 217, 203, 0) 46%), linear-gradient(165deg, #8FA6B8, #4F5F70); }

#s0 .kc:nth-child(2) { --x: 67%; --t: 24vh;  --av: radial-gradient(circle at 46% 40%, #EAD3C0 0 22%, rgba(234, 211, 192, 0) 46%), linear-gradient(160deg, #C8B28F, #7C6A55); }

#s0 .kc:nth-child(3) { --x: 36%; --t: 60vh;  --av: linear-gradient(150deg, #9CC3A8, #4E7A63); }

#s0 .kc:nth-child(4) { --x: 77%; --t: 92vh;  --av: radial-gradient(circle at 52% 36%, #F3DDD0 0 23%, rgba(243, 221, 208, 0) 45%), linear-gradient(170deg, #E3A9A4, #8C5A62); }

#s0 .kc:nth-child(5) { --x: 12%; --t: 118vh; --av: linear-gradient(140deg, #A7B4D8, #56618F); }

#s0 .kc:nth-child(6) { --x: 56%; --t: 154vh; --av: radial-gradient(circle at 48% 40%, #EFD8C6 0 22%, rgba(239, 216, 198, 0) 46%), linear-gradient(160deg, #BFA3C9, #6D5878); }

#s0 .kc:nth-child(7) { --x: 24%; --t: 186vh; --av: linear-gradient(155deg, #E7C98A, #A0763A); }

#s0 .kc:nth-child(8) { --x: 70%; --t: 214vh; --av: radial-gradient(circle at 50% 38%, #F0DACD 0 24%, rgba(240, 218, 205, 0) 46%), linear-gradient(165deg, #93B7C9, #45697D); }

/* ── 끝 : 표지가 종이 한 장처럼 덮어 올라온다.
   스크립트가 켜질 때만(.intro-fx) 표지를 한 화면 끌어올려 무대 위 층에 겹친다. 없으면 무대가 그대로 올라가며 표지가 이어진다. */
#s0 .intro__tail { height: 70vh; }

.intro-fx #s0 .intro__tail { height: 170vh; }

.intro-fx #s1 { margin-top: -100vh; z-index: 3; }

.hero__sheet { display: none; }

.intro-fx #s1 .hero__sheet {
  display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper);
  border-radius: 40px 40px 0 0;
  box-shadow: 0 -26px 60px -18px rgba(0, 0, 0, .5);
}

/* 폰 세로 : 제목은 데스크톱과 같은 두 줄을 폭에 맞춰 줄이고, 카드는 화면 폭의 64% */
@media (max-width: 599px) {
  #s0 .intro__h { font-size: 7.8vw; line-height: 1.2; padding: 0 16px; letter-spacing: -.012em; }
  #s0 .rch { line-height: 1.2; text-shadow: 0 1.2em 0 currentColor, 0 2.4em 0 currentColor; }
  #s0 .intro__reviews { --card: min(64vw, 270px); --lead: 26vh; --last: 300vh; }
  #s0 .kc { left: var(--x); }
  #s0 .kc:nth-child(1) { --x: 4%;  --t: 0vh; }
  #s0 .kc:nth-child(2) { --x: 32%; --t: 42vh; }
  #s0 .kc:nth-child(3) { --x: 8%;  --t: 86vh; }
  #s0 .kc:nth-child(4) { --x: 33%; --t: 128vh; }
  #s0 .kc:nth-child(5) { --x: 3%;  --t: 172vh; }
  #s0 .kc:nth-child(6) { --x: 30%; --t: 214vh; }
  #s0 .kc:nth-child(7) { --x: 7%;  --t: 258vh; }
  #s0 .kc:nth-child(8) { --x: 33%; --t: 300vh; }
  .intro-fx #s1 .hero__sheet { border-radius: 28px 28px 0 0; }
}

/* 낮은 가로 화면 */
@media (min-width: 600px) and (max-height: 559px) {
  #s0 .intro__reviews { --card: clamp(206px, min(24vw, 52vh), 240px); }
  #s0 .kc { aspect-ratio: 1 / 1.14; }
}

/* ── 00 카드 뒤집기 (2026-09-11)
   앞면 카톡 캡처 ↔ 뒷면 대학 합격 카드. 마우스를 올리면 뒤집히고 떼면 돌아온다.
   스크롤로 화면 위쪽을 지나간 카드는 저절로 뒤집혀 그대로 남는다(스크립트가 is-flipped 상태를 관리).
   구조 : li.kc(자리) > .kc__move(흐르는 속도 · 마우스) > .kc__flip(회전) > .kc__back(앞 : 합격증) + .kc__in(뒤 : 카톡)
   마우스는 회전하지 않는 .kc__move 가 받는다. 회전하는 면에 걸면 옆으로 선 순간 면이 얇아져 마우스가 빠진 것으로 잡힌다. */
#s0 .kc { pointer-events: none; }

#s0 .kc.is-up { z-index: 3; }

#s0 .kc__move { height: 100%; perspective: 1500px; pointer-events: auto; }

#s0 .kc__flip { position: relative; height: 100%; transform-style: preserve-3d; }

#s0 .kc__in, #s0 .kc__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* 앞면 : 합격증(2026-09-16 앞뒤 교체 — 합격 카드가 먼저 보이고, 뒤집으면 카톡 대화가 나온다).
   학교마다 대표색(--uc)만 다르고 짜임은 모두 같다 */
#s0 .kc__back {
  position: relative; height: 100%;
  overflow: hidden;
  border-radius: calc(var(--card) * .065);
  background: var(--uc, #1C2630); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .4), 0 40px 70px -30px rgba(0, 0, 0, .85);
  container-type: inline-size;
}

/* 카드 재질 : 왼쪽 위 은은한 광택, 오른쪽 아래로 가라앉는 그늘, 안쪽 가는 테 */
#s0 .kc__back::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(120% 80% at 100% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 62%);
}

#s0 .kc__back::after {
  content: ""; position: absolute; inset: 3.4cqi; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: calc(var(--card) * .04);
}

#s0 .kc__bk { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 10cqi 9.5cqi 9cqi; }

/* 학교 표지 : 공식 엠블럼(흰색, 안쪽은 비워 학교색이 비친다) + 학교명. 엠블럼 높이는 모양에 따라 --k 로 눈대중을 맞춘다. */
#s0 .kc__brand { display: flex; align-items: center; gap: 3.2cqi; }

#s0 .kc__emblem { display: block; width: auto; height: calc(15cqi * var(--k, 1)); }

#s0 .kc__uname { font-size: 6.2cqi; font-weight: 700; line-height: 1.1; letter-spacing: -.006em; color: #fff; }

/* 같은 엠블럼을 크게 · 아주 옅게 오른쪽 아래에 걸쳐 둔다 : 합격증 종이의 투명 무늬처럼 */
#s0 .kc__mark { position: absolute; right: -15cqi; bottom: -13cqi; width: auto; height: 80cqi; opacity: .085; pointer-events: none; }

#s0 .kc__res { margin-top: auto; display: flex; flex-direction: column; gap: 1.8cqi; }

#s0 .kc__year { font-size: 4.4cqi; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .74); }

#s0 .kc__pass { font-size: 14cqi; font-weight: 800; line-height: 1.04; letter-spacing: -.01em; }

#s0 .kc__dept { font-size: 6.2cqi; font-weight: 600; letter-spacing: -.012em; color: rgba(255, 255, 255, .92); }

#s0 .kc__foot {
  align-self: stretch; margin-top: 7cqi; padding-top: 4cqi;
  border-top: 1px solid rgba(255, 255, 255, .26);
  display: flex; justify-content: space-between; gap: 2cqi;
  font-size: 3.9cqi; font-weight: 500; letter-spacing: -.005em; color: rgba(255, 255, 255, .76);
}

/* 스크립트가 없을 때만 CSS 로 뒤집는다(스크립트가 있으면 GSAP 이 맡는다. 둘이 같이 돌면 전환이 프레임마다 뒤처진다). */
html:not(.intro-fx) #s0 .kc__flip { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }

@media (hover: hover) {
  html:not(.intro-fx) #s0 .kc__move:hover .kc__flip { transform: rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.intro-fx) #s0 .kc__flip { transition: none; }
}

/* ── 00 첫 화면 아래 : 스크롤 안내 (브랜드 문구 대신) */
#s0 .intro__cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 0; color: var(--on-noir-2);
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .24em;
}

#s0 .intro__cue span { padding-left: .24em; }

/* 자간이 오른쪽에만 붙어 가운데가 틀어지는 것 보정 */
#s0 .intro__cue i { position: relative; display: block; width: 1px; height: 38px; overflow: hidden; background: rgba(246, 244, 245, .16); }

#s0 .intro__cue i::after {
  content: ""; position: absolute; left: 0; top: -45%; width: 100%; height: 45%;
  background: #F6F4F5;
  animation: introCue 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes introCue { 0% { top: -45%; } 100% { top: 100%; } }

@media (max-width: 599px) {
  #s0 .intro__cue i { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  #s0 .intro__cue i::after { animation: none; top: 28%; }
}

/* ── 00 '없습니다' 강조 (2026-09-11)
   스크립트가 처음엔 흰 글자로 두었다가, '교과성적만으로' 에 줄이 그어진 뒤 붉은 글자로 한 번 더 굴러 내려와 선다.
   스크립트가 없거나 모션을 줄인 환경에서는 처음부터 붉다. */
/* '없습니다.' : 어둡고 채도 높은 무거운 레드. 먹색 위 대비 2.8:1 이지만 굵기 900 · 제목 크기라 또렷하다 */
#s0 .intro__em { color: #B8162C; font-weight: 900; }

/* '합격' : 채도 높은 긍정의 파랑. 대비 5.8:1 */
#s0 .intro__ok { color: #358FFF; font-weight: 900; }

/* 두 강조 낱말은 굴림 대신 떨어짐 · 튀어 오름으로 등장해 창(가림) 밖까지 움직인다 → 가림을 풀고 굴림용 글자 그림자도 뗀다 */
#s0 .intro__em, #s0 .intro__ok { overflow: visible; }

#s0 .intro__em .rch, #s0 .intro__ok .rch { text-shadow: none; }


/* ══════════════════════════════════════════════════════════════════════════
   메인 M1 ~ M9 (2026-09-11 전면 개편)
   리듬 : 표지(밝음) → 학년 지도(밝음) → 프로그램(어두움) → 학원이라서(밝음) → 진행 과정(밝음)
          → 합격 실적(어두움) → 입시연구소(밝음) → 상담(어두움) → FAQ · 푸터(밝음)
   한 화면 = 한 면. 크기는 --u. 내용이 한 화면보다 길어지는 화면(폰 · 낮은 창)에서는 면이 제 높이만큼 늘어난다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 스냅 : 데스크톱에서 가까이 멈췄을 때만 면의 윗선에 붙는다(proximity). 인트로 안에는 붙을 자리가 없다. */
/* (예전 세로 스냅 규칙은 지웠다 : 아래 2026-09-18 설명 참고) */

/* 새 면은 한 화면을 채우되, 내용이 더 길면 잘라내지 않고 늘어난다 */
.page[data-snap]:not(.hero) { height: auto; min-height: 100svh; }

/* ─────────────────────────────────────────────── M1 표지 : 문구만 바뀌었다 */
#s1 .hero__h--2l { font-size: var(--fs-4xl); line-height: 1.16; white-space: normal; }
#s1 .hero__l { display: block; white-space: nowrap; }
/* 글자 단위 모션이 글자마다 상자를 만들어 낱말 중간에서도 줄이 넘어갈 수 있다 → 구 단위로 묶어 둔다 */
#s1 .hero__w { display: inline-block; white-space: nowrap; }
/* 'Plan' : 설계합니다 끝에 비스듬히 붙는 손글씨. 설계 = plan = 대치플랜 */
#s1 .hero__h--2l .hero__script {
  /* 원본 규칙의 right 값이 남아 있으면 left 와 함께 상자 폭이 10px 로 줄고, 등장 모션의 clip-path 가 그 폭으로 글자를 자른다 */
  left: 100%; right: auto; bottom: auto; top: -.08em; width: max-content;
  transform: translateX(.16em) rotate(-9deg);
  font-size: .64em;
}
@media (max-width: 599px) {
  #s1 .hero__h--2l { font-size: min(7.4vw, 31px); line-height: 1.22; }
  #s1 .hero__l { white-space: normal; }
}
@media (min-width: 600px) and (max-height: 559px) {
  #s1 .hero__h--2l { font-size: var(--fs-3xl); }
}
@media (min-width: 600px) and (max-width: 899px) and (min-height: 760px) {
  #s1 .hero__h--2l { font-size: var(--fs-4xl); }
}
@media (min-width: 900px) and (max-width: 1199px) and (orientation: portrait) and (min-height: 1000px) {
  #s1 .hero__h--2l { font-size: var(--fs-5xl); }
}

/* ══════════════════════════════════════════════════════════════════════════
   시안1 「가로 챕터」 · 메인 M2 ~ M9
   표지 뒤는 여덟 챕터. 챕터 번호(.chap) · 헤더 아래 레일(.rail) · 단계 트랙(.track)은 components.css.
   리듬 : 01 학년 여정(종이) → 02 프로그램(먹색) → 03 다른 점(종이) → 04 진행 순서(종이)
          → 05 합격 사례(먹색) → 06 입시리포트(종이) → 07 상담(먹색) → 08 FAQ · 푸터(종이)
   데스크톱(1024+ · 높이 640+ · 모션 허용)에서만 01 · 02 · 04 가 화면에 붙는다(main.js). 그 밖에서는 모두 세로로 흐른다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 스냅 (2026-09-16) : 예전에는 아예 껐더니, 붙지 않는 면들(03 · 04 · 05 · 06 · 07 · 08)이
   한 화면씩 이어져 스크롤이 면 중간에 어중간하게 멈추거나 한 면을 훌쩍 지나쳐 버렸다.
   핀으로 붙는 챕터(표지 · 01 · 02 · 04 핀 상태)에는 붙을 자리를 두지 않고, 나머지 면만
   가까이 왔을 때 윗선에 붙인다(proximity). 핀 구간에는 목표가 없으니 끌려가지 않는다.
   2026-09-18 : 브라우저 스냅(scroll-snap)은 핀 구간 · GSAP 스냅과 부딪혀 쓰지 않는다. 대신 main.js 의 면 정착이
   스크롤이 멎은 뒤에만 가장 가까운 면 윗선으로 맞춘다(핀 구간 · 마지막 면 제외).
   (이 주석이 한 줄 일찍 닫혀 아래 규칙이 통째로 무시됐고, 그동안 스냅이 켜진 채 표지로 튕기는 원인이 됐다.) */
html.is-main { scroll-snap-type: none; }
.page[data-snap] { scroll-snap-align: none; }

/* 챕터 면 : 내용이 한 화면보다 길면 늘어난다. 데스크톱에서는 헤더 + 레일 아래에서 시작한다 */
.page[data-chapter] { height: auto; min-height: 100svh; }
/* 밝은 챕터 : 뒤의 메시 지면을 종이색으로 한 겹 눌러 글이 색덩어리 위에서 탁해지지 않게 */
.page[data-chapter][data-tone="light"] { background-color: rgba(251, 241, 238, .62); }
@media (min-width: 1024px) and (min-height: 560px) {
  .page[data-chapter] { padding-top: calc(var(--head-off) + var(--u) * 2.4); padding-bottom: calc(var(--u) * 3.2); }
}

/* ─────────────────────────────────────────────── 01 학년 여정 */
#journey::before {
  background:
    radial-gradient(70% 60% at 6% 4%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 62%),
    radial-gradient(60% 50% at 96% 96%, rgba(255, 138, 110, .2), rgba(255, 138, 110, 0) 66%);
}
.journey__in { display: flex; flex-direction: column; gap: clamp(22px, calc(var(--u) * 2.4), 44px); }
.journey__head { display: flex; flex-direction: column; gap: clamp(18px, calc(var(--u) * 2), 34px); }

/* 학년 줄 : 데스크톱에서만. 누르면 그 학년으로 간다 */
.jmini { display: none; }
@media (min-width: 1024px) {
  .jmini { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding-bottom: 12px; }
  .jmini__g {
    position: relative; display: inline-flex; align-items: baseline; justify-content: flex-start; gap: .2em;
    padding: 6px 0; border: 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--f); font-size: var(--fs-md); font-weight: 800; letter-spacing: -.004em;
    color: rgba(23, 21, 26, .38); transition: color .3s var(--ease);
  }
  .jmini__g small { font-size: .68em; font-weight: 700; letter-spacing: 0em; }
  .jmini__g::after {
    content: ""; position: absolute; left: 0; bottom: -12px; width: 9px; height: 9px; margin-bottom: -4px;
    border-radius: 50%; background: var(--paper); border: 1.5px solid rgba(23, 21, 26, .3);
    transition: background .3s var(--ease), border-color .3s var(--ease);
  }
  .jmini__g:hover { color: var(--ink); }
  .jmini__g.is-on { color: var(--red); }
  .jmini__g.is-on::after { background: var(--red); border-color: var(--red); }
  .jmini__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: rgba(23, 21, 26, .14); }
  .jmini__fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
  html:not(.js) .jmini, .journey:not(.is-pinned) .jmini__line { display: none; }
  .journey:not(.is-pinned) .jmini { display: none; }
}

/* 학년 칸 : 기본은 세로 목록 (학년 | 설명 | 프로그램) */
.jtrack__list { display: grid; }
.jpanel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 22px 0 24px 26px;
  border-left: 1.5px solid rgba(23, 21, 26, .14);
}
.jpanel::before {
  content: ""; position: absolute; left: -6px; top: 30px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid rgba(23, 21, 26, .3);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.jpanel.is-on::before { background: var(--red); border-color: var(--red); }
.jpanel__g { font-size: clamp(30px, calc(var(--u) * 3.6), 66px); font-weight: 900; letter-spacing: -.012em; line-height: 1; color: var(--ink); font-variant-numeric: proportional-nums; transition: color .35s var(--ease); }
.jpanel__g small { font-size: .38em; font-weight: 800; letter-spacing: 0em; margin-left: .25em; vertical-align: .6em; }
.jpanel.is-on .jpanel__g { color: var(--red); }
.jpanel__t { max-width: 26em; font-size: var(--fs-md); line-height: 1.62; font-weight: 500; color: var(--ink-2); }
.jpanel__p { display: grid; margin-top: 4px; border-bottom: 1px solid rgba(23, 21, 26, .1); }
.jp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px;
  min-height: 48px; padding: 8px 0; border-top: 1px solid rgba(23, 21, 26, .1);
  color: var(--ink); transition: color .24s var(--ease);
}
.jp b { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.002em; }
.jp span { font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.jp .go { width: 1.8em; height: 1.8em; }
.jp--ext { grid-template-columns: minmax(0, 1fr) auto; }
.jp--ext b { font-weight: 700; color: var(--ink-2); }
.jp:hover b, .jp:focus-visible b { color: var(--red); }
.jp:hover .go, .jp:focus-visible .go { transform: translateX(3px); background: var(--red); color: #fff; }

@media (min-width: 600px) {
  .journey:not(.is-pinned) .jpanel { grid-template-columns: clamp(96px, calc(var(--u) * 12), 160px) minmax(0, 1fr); column-gap: calc(var(--u) * 3); align-items: start; padding-block: 26px; }
  .journey:not(.is-pinned) .jpanel__p { grid-column: 2; margin-top: 4px; max-width: 520px; }
}
@media (min-width: 960px) {
  .journey:not(.is-pinned) .jpanel { grid-template-columns: clamp(96px, calc(var(--u) * 12), 160px) minmax(0, 1fr) minmax(0, 1fr); }
  .journey:not(.is-pinned) .jpanel__p { grid-column: 3; margin-top: 0; }
}

/* 데스크톱 핀 : 칸들이 가로 한 줄로 서서 옆으로 흐른다 */
.journey.is-pinned { height: 100svh; min-height: 0; justify-content: flex-start; }
.journey.is-pinned .journey__in { height: 100%; justify-content: center; gap: clamp(18px, calc(var(--u) * 2), 34px); }
.journey.is-pinned .journey__head { display: grid; grid-template-columns: minmax(0, 1fr); }
.journey.is-pinned .jtrack { flex: 0 1 auto; height: clamp(340px, 52vh, 520px); min-height: 0; margin-right: calc((var(--col) - var(--gut)) * -1 - var(--gut)); overflow: hidden; }
.journey.is-pinned .jtrack__list { display: flex; height: 100%; width: max-content; padding-right: var(--col); will-change: transform; }
.journey.is-pinned .jpanel {
  flex: none; width: clamp(290px, 29vw, 440px); height: 100%;
  display: flex; flex-direction: column; gap: clamp(12px, calc(var(--u) * 1.2), 20px);
  padding: clamp(22px, calc(var(--u) * 2.4), 40px) clamp(20px, calc(var(--u) * 2.2), 36px);
  border-left: 1px solid rgba(23, 21, 26, .1);
  border-radius: 0; transition: background .45s var(--ease);
}
.journey.is-pinned .jpanel::before { display: none; }
.journey.is-pinned .jpanel.is-on { background: rgba(255, 255, 255, .7); box-shadow: inset 0 3px 0 var(--red); }
.journey.is-pinned .jpanel__g { font-size: clamp(40px, calc(var(--u) * 5.2), 92px); color: rgba(23, 21, 26, .26); }
.journey.is-pinned .jpanel.is-on .jpanel__g { color: var(--red); }
.journey.is-pinned .jpanel__p { margin-top: auto; }

/* ─────────────────────────────────────────────── 02 프로그램 (먹색) : 쌓이는 안내 카드 */
#programs:not(.is-stack) { overflow: visible; }  /* 핀 없을 때 왼쪽 sticky 가 붙도록 */
#programs::before {
  background:
    radial-gradient(46% 40% at 72% 38%, rgba(208, 2, 27, .2), rgba(208, 2, 27, 0) 74%),
    radial-gradient(40% 30% at 8% 86%, rgba(255, 122, 132, .07), rgba(255, 122, 132, 0) 76%);
}
.pstack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, calc(var(--u) * 3), 48px); }
.pstack__side { display: flex; flex-direction: column; gap: clamp(22px, calc(var(--u) * 2.6), 44px); }
.pstack .sec-p { max-width: 26em; }
.pstack__idx { display: none; }
.pstack__stage { display: grid; gap: 16px; min-width: 0; }
.pstack__card {
  position: relative; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(22px, calc(var(--u) * 2.4), 42px) clamp(20px, calc(var(--u) * 2.6), 46px) clamp(22px, calc(var(--u) * 2.2), 38px);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #26232A 0%, #1C1A1F 58%, #19171C 100%);
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .7);
  transform-origin: 50% 0;
}
.pstack__shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #0E0D10; opacity: 0; pointer-events: none; }
.pstack__of { font-size: 13px; font-weight: 700; color: var(--on-noir-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 1024px) {
  .pstack { grid-template-columns: minmax(0, 4fr) minmax(0, 7.4fr); gap: clamp(28px, calc(var(--u) * 4.4), 88px); align-items: center; }
  .pstack__idx { display: grid; border-top: 1px solid rgba(255, 255, 255, .1); }
  .pstack__ia {
    position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1em;
    padding: clamp(11px, calc(var(--u) * 1), 17px) 0 clamp(11px, calc(var(--u) * 1), 17px) 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: var(--on-noir-2); transition: color .3s var(--ease);
  }
  .pstack__ia b { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.006em; }
  .pstack__ia span { font-size: var(--fs-2xs); font-weight: 700; color: rgba(255, 255, 255, .4); white-space: nowrap; }
  .pstack__ia::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--red-on-noir); transform: scaleY(0); transition: transform .45s var(--ease); }
  .pstack__ia:hover { color: #fff; }
  .pstack__ia.is-on { color: #fff; }
  .pstack__ia.is-on span { color: var(--red-on-noir); }
  .pstack__ia.is-on::before { transform: none; }
  .pstack__ia:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: -2px; }
}
/* 핀 없는 데스크톱(모션 축소 · 낮은 창) : 카드가 세로로 흐르는 동안 왼쪽 제목 · 목록은 화면에 붙어 있다 */
@media (min-width: 1024px) {
  .programs:not(.is-stack) .pstack { align-items: start; }
  .programs:not(.is-stack) .pstack__side { position: sticky; top: calc(var(--head-off) + var(--u) * 2.4); }
}
/* 쌓기 : 다섯 장을 한 칸에 겹친다. 칸 높이 = 가장 긴 장 */
.programs.is-stack { height: 100svh; min-height: 0; }
.programs.is-stack .pstack { height: 100%; }
.programs.is-stack .pstack__stage { gap: 0; }
.programs.is-stack .pstack__card { grid-area: 1 / 1; will-change: transform; }
.pstack__card:focus-within { outline: none; }

/* 카드 안 : 원래 안내 판 부품(pex__*)을 그대로 쓴다 */
.pex__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 30px; }
.pex__rule { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; width: min(100%, 300px); }
.pex__rule li {
  padding-top: 8px; font-size: 12px; font-weight: 700; text-align: center; color: rgba(255, 255, 255, .4);
  background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) top / 100% 4px no-repeat;
}
.pex__rule li.on { color: var(--red-on-noir); background-image: linear-gradient(var(--red-on-noir), var(--red-on-noir)); }
.pex__name { margin-top: clamp(12px, calc(var(--u) * 1.2), 20px); font-size: clamp(26px, calc(var(--u) * 2.5), 44px); font-weight: 800; letter-spacing: -.003em; line-height: 1.18; color: #fff; }
.pex__lede { margin-top: 8px; max-width: 34em; font-size: var(--fs-md); line-height: 1.6; color: #E4DFE6; }
.pex__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(14px, calc(var(--u) * 1.5), 24px);
  border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pex__facts > div { padding: 11px 14px 11px 0; }
.pex__facts > div + div { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
.pex__facts dt { font-size: 12.5px; font-weight: 700; color: var(--on-noir-2); }
.pex__facts dd { margin: 3px 0 0; font-size: clamp(14px, calc(var(--u) * 1), 16.5px); font-weight: 700; line-height: 1.4; color: #fff; }
.pex__cols { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(20px, calc(var(--u) * 2.4), 40px); margin-top: clamp(16px, calc(var(--u) * 1.6), 26px); }
.pex__h { margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--on-noir-2); }
.pex__works li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 1px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.pex__works li > b { grid-column: 2; align-self: end; }
.pex__works li > span { grid-column: 2; align-self: start; }
.pex__wi { grid-row: 1 / 3; grid-column: 1; display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 11px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pex__works li:first-child { border-top: 0; padding-top: 2px; }
.pex__works b { font-size: clamp(14.5px, calc(var(--u) * 1.02), 17px); font-weight: 700; color: #fff; }
.pex__works span { font-size: 13.5px; color: var(--on-noir-2); }
.pex__steps { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
.pex__steps::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: rgba(255, 255, 255, .16); }
.pex__steps li { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 4px 0 4px 22px; }
.pex__steps li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #2A272D; border: 1.5px solid var(--red-on-noir); box-sizing: border-box; }
.pex__steps li:first-child::before { background: var(--red-on-noir); }
.pex__steps span { font-size: 12.5px; font-weight: 700; color: var(--red-on-noir); white-space: nowrap; }
.pex__steps b { font-size: clamp(14px, calc(var(--u) * .98), 16px); font-weight: 600; color: #fff; }
.pex__steps--8 li { padding-block: 2px; }
.pex__note { font-size: 14.5px; line-height: 1.65; color: #E4DFE6; }
.pex__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: auto; padding-top: clamp(16px, calc(var(--u) * 1.7), 28px); }
.pex__go {
  display: inline-flex; align-items: center; gap: .7em; padding: .66em .7em .66em 1.25em; border-radius: 999px;
  background: #fff; color: var(--noir); font-size: clamp(14px, calc(var(--u) * .98), 16.5px); font-weight: 800;
}
.pex__go .go { background: var(--red); color: #fff; }
.pex__go:hover .go, .pex__go:focus-visible .go { transform: translateX(3px); }
.pex__ask { font-size: clamp(14px, calc(var(--u) * .98), 16.5px); font-weight: 700; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 5px; transition: text-decoration-color .3s var(--ease); }
.pex__ask:hover, .pex__ask:focus-visible { text-decoration-color: var(--red-on-noir); }
.pstack a:focus-visible { outline-color: var(--red-on-noir); }
@media (min-width: 1024px) and (max-height: 860px) {
  .pstack__card { padding-block: 20px 18px; }
  .pex__name { margin-top: 8px; font-size: var(--fs-3xl); }
  .pex__lede { margin-top: 4px; line-height: 1.5; }
  .pex__facts { margin-top: 12px; }
  .pex__facts > div { padding-block: 8px; }
  .pex__cols { margin-top: 12px; }
  .pex__works li { padding-block: 4px; }
  .pex__steps li { padding-block: 2px; }
  .pex__steps--8 li { padding-block: 0; }
  .pex__act { padding-top: 12px; }
}
@media (max-width: 699px) {
  .pex__facts { grid-template-columns: minmax(0, 1fr); }
  .pex__facts > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: baseline; padding: 9px 0; }
  .pex__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .pex__facts dd { margin: 0; }
  .pex__cols { grid-template-columns: minmax(0, 1fr); }
  .pex__rule { width: min(100%, 240px); }
}
@media (prefers-reduced-motion: no-preference) {
  .pex__name { view-transition-name: var(--vt, none); }
}

/* ─────────────────────────────────────────────── 03 다른 점 : 경계선을 끄는 비교판 */
#why::before {
  background:
    linear-gradient(178deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .18) 46%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(64% 48% at 90% 10%, rgba(255, 196, 178, .32), rgba(255, 196, 178, 0) 66%);
}
.why__hint { display: none; }
@media (min-width: 1024px) { .why__hint { display: inline; } }
.why__in { display: flex; flex-direction: column; gap: clamp(24px, calc(var(--u) * 2.8), 48px); }

/* 공통 시각물 : 넉 달 16주 · 네 학년 · 문서 네 칸 */
.wk16 { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.wk16 i { height: clamp(18px, calc(var(--u) * 1.7), 28px); border-radius: 4px; background: rgba(23, 21, 26, .07); }

.yr4, .doc4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.yr4 i, .doc4 i {
  display: grid; place-items: center; min-height: clamp(30px, calc(var(--u) * 2.5), 42px); padding: 4px 8px; border-radius: 8px;
  font-style: normal; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0em; line-height: 1.3; text-align: center;
  background: rgba(23, 21, 26, .06); color: var(--ink-3);
}
.doc4 i:empty { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .12); }
.split__layer--them i.on { background: rgba(23, 21, 26, .52); color: #fff; }
.split__layer--us .wk16 i, .split__layer--us .yr4 i, .split__layer--us .doc4 i { background: rgba(208, 2, 27, .08); color: var(--red); }
.split__layer--us i.on { background: var(--red); color: #fff; }

/* 기본(좁은 화면 · 스크립트 없음) : 두 장을 차례로 */
.cmp2__k { display: none; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.split__layer { display: grid; gap: 0; padding: 18px 18px 8px; border-radius: var(--r-lg); }
.split__layer--them { background: rgba(23, 21, 26, .04); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08); }
.split__layer--us { background: #fff; box-shadow: inset 0 3px 0 var(--red), var(--e2); }
.split__who { font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.004em; color: var(--ink-2); padding-bottom: 8px; }
.split__layer--us .split__who { color: var(--red); }
.split__row { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid rgba(23, 21, 26, .08); }
.split__k { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.split__v { font-size: var(--fs-md); font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.split__v small { display: block; margin-top: 2px; font-size: .8em; font-weight: 600; color: var(--ink-3); }
.split__layer--us .split__v { font-weight: 800; letter-spacing: 0em; color: var(--ink); }
.split__layer--us .split__v small { color: var(--red); }
.split__bar, .split__range { display: none; }
@media (min-width: 700px) and (max-width: 1023px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__layer { grid-template-rows: auto repeat(4, 1fr); }
}

/* 데스크톱 + 스크립트 : 한 판에 겹쳐 두고 경계선으로 나눈다 */
@media (min-width: 1024px) {
  .cmp2.is-live {
    display: grid; grid-template-columns: calc(var(--u) * 10) minmax(0, 1fr); grid-template-rows: auto repeat(4, auto);
    column-gap: calc(var(--u) * 2);
  }
  .cmp2.is-live .cmp2__k {
    display: flex; align-items: center; grid-column: 1;
    font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.006em; color: var(--ink);
    border-top: 1px solid rgba(23, 21, 26, .1);
  }
  .cmp2.is-live .cmp2__k--head { grid-row: 1; border-top: 0; }
  .split.is-live {
    --pos: 50%;
    position: relative; grid-column: 2; grid-row: 1 / 6;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: 0;
    border-radius: var(--r-xl); overflow: hidden;
    box-shadow: 0 1px 2px rgba(60, 20, 20, .05), 0 30px 60px -34px rgba(84, 34, 30, .42);
    user-select: none; -webkit-user-select: none;
  }
  .split.is-live .split__layer {
    grid-column: 1; grid-row: 1 / 6; display: grid; grid-template-rows: subgrid;
    padding: 0; border-radius: 0; box-shadow: none;
  }
  .split.is-live .split__layer--them { background: #F3E7E3; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .split.is-live .split__layer--us { background: #fff; clip-path: inset(0 0 0 var(--pos)); }
  .split.is-live .split__who { padding: calc(var(--u) * 1.5) calc(var(--u) * 2.4) calc(var(--u) * .9); }
  .split.is-live .split__layer--us .split__who { text-align: right; }
  .split.is-live .split__row { gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.5) calc(var(--u) * 2.4); align-content: center; }
  .split.is-live .split__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .split.is-live .split__v { max-width: 44%; }
  .split.is-live .split__layer--us .split__v { justify-self: end; text-align: right; }
  .split.is-live .split__bar {
    display: block; position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
    background: var(--ink); pointer-events: none;
  }
  .split__knob {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%; background: var(--ink); box-shadow: 0 8px 20px -8px rgba(23, 21, 26, .6);
    transition: transform .25s var(--ease);
  }
  .split__knob::before, .split__knob::after {
    content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  }
  .split__knob::before { left: 12px; transform: rotate(45deg); }
  .split__knob::after { right: 12px; transform: rotate(-135deg); }
  .split.is-drag .split__knob, .split.is-live:hover .split__knob { transform: scale(1.08); }
  .split.is-live .split__range {
    display: block; position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
  }
  .split__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 400px; }
  .split__range::-moz-range-thumb { width: 2px; height: 400px; border: 0; }
  .split.is-live.is-focus .split__knob { outline: 3px solid var(--red); outline-offset: 4px; }
}

/* ─────────────────────────────────────────────── 04 진행 순서 : 단계 트랙은 components.css .track */
#process::before {
  background:
    radial-gradient(66% 74% at 4% 40%, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 64%),
    radial-gradient(56% 46% at 94% 96%, rgba(255, 138, 110, .22), rgba(255, 138, 110, 0) 66%);
}
.process__in { display: flex; flex-direction: column; gap: clamp(26px, calc(var(--u) * 3.6), 64px); }
.process .track { --sw: minmax(0, 1fr); }
.process .track__rail, .process .track.is-pinned .track__rail { width: 100%; min-width: 0; }
.process .track.is-pinned .track__view { margin-right: 0; padding-right: 0; }
.process.has-pin-track { height: 100svh; min-height: 0; }

/* ─────────────────────────────────────────────── 05 합격 사례 (먹색) : 가로로 넘기는 목록 */
#results::before {
  background:
    radial-gradient(50% 40% at 22% 30%, rgba(208, 2, 27, .2), rgba(208, 2, 27, 0) 74%),
    radial-gradient(40% 30% at 90% 78%, rgba(140, 110, 255, .07), rgba(140, 110, 255, 0) 76%);
}
.results__in { display: flex; flex-direction: column; gap: clamp(22px, calc(var(--u) * 2.6), 44px); }
.results__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.car__ctl { display: flex; align-items: center; gap: 14px; }
.car__btn {
  position: relative; width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #fff;
  transition: background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.car__btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.car__btn--next::before { margin-left: -7px; transform: rotate(-135deg); }
.car__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.car__btn:disabled { opacity: .32; cursor: default; }
.car__btn:focus-visible, .car__view:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 3px; }
.car__count { display: flex; align-items: baseline; gap: .35em; min-width: 3.6em; justify-content: center; font-variant-numeric: tabular-nums; color: var(--on-noir-2); font-size: 15px; font-weight: 700; }
.car__count b { font-size: 22px; font-weight: 900; color: #fff; }
.car { margin-right: calc(var(--col) * -1); }
.car__view {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  padding: 6px var(--col) 10px 2px; margin-left: -2px;
  scrollbar-width: none; cursor: grab; border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.car__view::-webkit-scrollbar { display: none; }
.car.is-drag .car__view { cursor: grabbing; }
.car.is-drag .wcard { pointer-events: none; }
.car__list { display: flex; gap: clamp(10px, calc(var(--u) * 1.1), 18px); width: max-content; }
.wcard {
  flex: none; width: clamp(236px, 21vw, 320px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
  user-select: none; -webkit-user-select: none;
}
.wcard__mark {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: var(--uc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.wcard__mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 50%); }
.wcard__mark { overflow: hidden; }
.wcard__mark img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: calc(46% * var(--k, 1)); transform: translate(-50%, -50%); }
.wcard__u { padding: clamp(14px, calc(var(--u) * 1.4), 22px) clamp(16px, calc(var(--u) * 1.5), 24px) 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.006em; color: #fff; }
.wcard__d { padding: 2px clamp(16px, calc(var(--u) * 1.5), 24px) 0; font-size: var(--fs-md); font-weight: 600; color: #E4DFE6; }
.wcard__t { margin-top: auto; padding: 14px clamp(16px, calc(var(--u) * 1.5), 24px) clamp(16px, calc(var(--u) * 1.5), 22px); font-size: var(--fs-xs); color: var(--on-noir-2); }
@media (hover: none), (pointer: coarse) {
  .car__view { scroll-snap-type: x mandatory; cursor: auto; scroll-padding-left: 2px; }
  .wcard { scroll-snap-align: start; }
}
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, calc(var(--u) * 2.4), 44px); }
.voice { margin: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; gap: 12px; }
.voice blockquote { margin: 0; }
.voice p { font-size: var(--fs-md); line-height: 1.62; font-weight: 500; color: var(--on-noir); }
.voice figcaption { margin-top: auto; display: flex; justify-content: space-between; gap: 1em; font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); }
.voice__who { color: var(--on-noir-2); }
.voice__pg { color: var(--red-on-noir); font-weight: 700; }
.results__more { align-self: flex-start; }
@media (max-width: 899px) { .voices { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .car__btn { width: 44px; height: 44px; }
  .wcard { width: min(76vw, 300px); }
}

/* ─────────────────────────────────────────────── 06 입시리포트 : 줄 목록 + 따라다니는 표지 */
#insight::before {
  background:
    radial-gradient(60% 60% at 96% 6%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%),
    radial-gradient(50% 50% at 4% 94%, rgba(255, 181, 158, .24), rgba(255, 181, 158, 0) 66%);
}
.insight__in { display: flex; flex-direction: column; gap: clamp(26px, calc(var(--u) * 3.2), 56px); }
.insight__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.rows { border-top: 1.5px solid var(--ink); }
.row { border-bottom: 1px solid rgba(23, 21, 26, .12); }
.row__a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta go" "main go";
  column-gap: 16px; row-gap: 8px; align-items: center;
  padding: clamp(20px, calc(var(--u) * 2.2), 38px) 0;
  color: var(--ink);
}
.row__thumb {
  grid-area: thumb; display: none; place-items: center; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
  background: var(--uc); color: #fff;
}
.row__thumb img { width: auto; height: 60%; }
.row__thumb b { font-size: 26px; font-weight: 900; color: #fff; }
.row__thumb--noir { background: radial-gradient(80% 80% at 80% 90%, rgba(208, 2, 27, .6), rgba(208, 2, 27, 0) 70%), var(--noir); }
.row__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .3em 1em; font-size: clamp(13px, calc(var(--u) * .9), 15px); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row__meta span { font-weight: 700; color: var(--ink-2); }
.row__main { grid-area: main; display: grid; gap: 6px; }
.row__t { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.006em; line-height: 1.34; transition: color .25s var(--ease); }
.row__d { max-width: 44em; font-size: clamp(14.5px, calc(var(--u) * 1.02), 17.5px); line-height: 1.6; color: var(--ink-2); }
.row__a .go { grid-area: go; width: 2.6em; height: 2.6em; }
.row__a:hover .row__t, .row__a:focus-visible .row__t { color: var(--red); }
.row__a:hover .go, .row__a:focus-visible .go { transform: translateX(4px); background: var(--red); color: #fff; }
@media (min-width: 900px) {
  .row__a { grid-template-columns: calc(var(--u) * 13) minmax(0, 1fr) auto; grid-template-areas: "meta main go"; column-gap: calc(var(--u) * 3); align-items: start; }
  .row__meta { flex-direction: column; padding-top: .45em; }
  .row__a .go { align-self: center; }
}
@media (hover: none), (pointer: coarse) {
  .row__a { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "thumb meta go" "thumb main go"; align-items: start; }
  .row__thumb { display: grid; }
  .row__a .go { align-self: center; }
}
@media (hover: none) and (min-width: 900px), (pointer: coarse) and (min-width: 900px) {
  .row__a { grid-template-columns: 56px calc(var(--u) * 13) minmax(0, 1fr) auto; grid-template-areas: "thumb meta main go"; }
}
.peek { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(240px, 20vw, 320px); pointer-events: none; }
.peek__cover {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px;
  background: var(--uc, var(--noir)); color: #fff;
  box-shadow: 0 30px 60px -24px rgba(40, 10, 10, .55);
  opacity: 0; transform: scale(.86); transform-origin: 0 50%;
  transition: opacity .25s var(--ease), transform .45s var(--ease);
}
.peek.is-on .peek__cover { opacity: 1; transform: none; }
.peek__cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%); }
.peek__cover--noir { background: radial-gradient(70% 70% at 80% 90%, rgba(208, 2, 27, .5), rgba(208, 2, 27, 0) 70%), var(--noir); }
.peek__em { position: absolute; right: -10%; bottom: -16%; width: auto; height: 96%; opacity: .16; }
.peek__kind { position: absolute; left: 18px; top: 16px; padding: .32em .8em; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 700; }
.peek__big { position: absolute; left: 18px; bottom: 14px; font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.01em; line-height: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .peek { display: none; } }

/* ─────────────────────────────────────────────── 08 상담 (먹색) + 푸터 */
#contact { padding-bottom: 0; }
#contact .foot { margin-inline: calc(var(--gut) * -1); }
#contact::before {
  background:
    radial-gradient(54% 50% at 30% 46%, rgba(240, 48, 64, .2), rgba(240, 48, 64, 0) 74%),
    radial-gradient(44% 30% at 86% 76%, rgba(140, 110, 255, .07), rgba(140, 110, 255, 0) 76%);
}
.contact__in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, calc(var(--u) * 5), 110px); align-items: center; }
.contact__main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, calc(var(--u) * 1.5), 26px); }
.contact__close { max-width: 14em; font-size: var(--fs-5xl); font-weight: 800; letter-spacing: -.004em; line-height: 1.16; color: var(--on-noir); }
.contact__close em { font-style: normal; color: var(--red-on-noir); }
/* 2026-09-15 : 제목 아래 '무엇을 알려 주면 무엇을 해 주는지' 한 문장 → 방문 조건 세 칸 → 버튼.
   예전 설명 문단 · 준비물 줄에 흩어져 있던 조건(시간 · 동행 · 준비물)을 한 줄 표로 모았다. */
.contact__lead {
  max-width: 30em; padding-left: var(--sp-4); border-left: 2px solid var(--red-on-noir);
  font-size: var(--fs-lead); line-height: 1.66; font-weight: 500; color: rgba(246, 244, 245, .9);
}
.cinfo {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); width: min(100%, 40em);
  margin: calc(var(--u) * .4) 0 0; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.cinfo__i { display: grid; align-content: start; gap: 6px; padding: var(--sp-4) var(--sp-5); }
.cinfo__i + .cinfo__i { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.cinfo dt { font-size: var(--fs-xs); font-weight: 600; color: var(--on-noir-2); }
.cinfo dd { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.45; color: #fff; }
.cinfo dd b { font-weight: 800; color: #fff; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--u) * .6); }
.contact__faq { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35em .6em; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: clamp(14px, calc(var(--u) * .98), 17px); color: var(--on-noir-2); }
.contact__faq b { color: #fff; font-weight: 700; }
.contact__faq:hover .go, .contact__faq:focus-visible .go { transform: translateX(3px); }
.nums { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.num { padding: clamp(18px, calc(var(--u) * 2.2), 40px) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.num__n { display: flex; align-items: flex-start; font-size: clamp(56px, calc(var(--u) * 7.4), 136px); font-weight: 900; letter-spacing: -.005em; line-height: .9; color: #fff; font-variant-numeric: proportional-nums; }
.num__plus { margin-left: .03em; font-size: .5em; line-height: 1; color: var(--red-on-noir); }
.num__k { margin-top: calc(var(--u) * .8); font-size: var(--fs-md); color: var(--on-noir-2); }
.num__k b { color: #fff; font-weight: 800; }
@media (max-width: 899px) {
  .contact__in { grid-template-columns: minmax(0, 1fr); }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 599px) {
  .num__n { font-size: 52px; }
  .contact__cta { width: 100%; }
  .contact__cta .btn { flex: 1 1 100%; }
}

/* ─────────────────────────────────────────────── 07 자주 묻는 질문 */
#faq { justify-content: flex-start; }
#faq::before {
  background:
    radial-gradient(60% 60% at 4% 8%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%),
    radial-gradient(50% 40% at 96% 60%, rgba(255, 196, 178, .26), rgba(255, 196, 178, 0) 66%);
}
.faq__wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2.4); padding-block: calc(var(--u) * 1.2) calc(var(--u) * 4.4); }

.faq__board { position: relative; }
.faq__i { border-bottom: 1px solid rgba(23, 21, 26, .09); }
.faq__q { font-size: inherit; }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 16px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--f); font-size: var(--fs-md); font-weight: 700; letter-spacing: -.002em; line-height: 1.45;
  color: var(--ink-2); transition: color .24s var(--ease);
}
.faq__btn:hover, .faq__btn[aria-expanded="true"] { color: var(--ink); }
.faq__chev { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(23, 21, 26, .06); transition: transform .3s var(--ease), background .3s var(--ease); }
.faq__chev::before, .faq__chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; border-radius: 1px; background: currentColor; }
.faq__chev::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.faq__btn[aria-expanded="true"] .faq__chev { background: var(--red); color: #fff; }
.faq__btn[aria-expanded="true"] .faq__chev::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__ans { padding-bottom: 18px; }
.faq__aq { display: none; }
.faq__ap { font-size: var(--fs-md); line-height: 1.75; color: var(--ink-2); }
.faq__bar { display: none; }
@media (min-width: 900px) {
  .faq__board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); column-gap: calc(var(--u) * 3.6); min-height: calc(var(--u) * 30); }
  .faq__list { grid-column: 1; }
  .faq__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(23, 21, 26, .1); }
  .faq__i { border-bottom: 0; }
  .faq__btn { padding: calc(var(--u) * .74) 0 calc(var(--u) * .74) calc(var(--u) * 1.6); font-size: var(--fs-md); }
  .faq__chev { display: none; }
  .faq__btn[aria-expanded="true"] { color: var(--red); }
  .faq__a { position: absolute; top: 0; right: 0; width: calc((100% - var(--u) * 3.6) * 1.06 / 2.06); overflow: visible; }
  .faq__ans {
    padding: calc(var(--u) * 2.6) calc(var(--u) * 2.8);
    border-radius: var(--r-xl);
    background: #fff;
    box-shadow: 0 1px 2px rgba(84, 34, 30, .06), 0 24px 44px -26px rgba(84, 34, 30, .34);
  }
  .faq__aq { display: block; margin-bottom: calc(var(--u) * 1.2); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.008em; line-height: 1.35; color: var(--ink); }
  .faq__ap { font-size: var(--fs-md); }
  .faq__bar { display: block; position: absolute; left: -1px; top: 0; width: 3px; border-radius: 3px; background: var(--red); opacity: 0; transition: transform .42s var(--ease), height .42s var(--ease), opacity .3s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .jpanel, .jpanel::before, .jpanel__g, .pstack__ia::before, .peek__cover, .split__knob { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   반응형 : 낮은 데스크톱 · 노트북 창 (폭 1024+ · 높이 560~860)
   핀이 켜지는 조건은 폭 1024+ · 높이 560+ · 모션 허용(DP.pinMQ). 창이 낮을수록 한 화면에 들어오게 밀도를 세 단계로 줄인다.
   H1 ≤ 820 : 여백만 줄인다 / H2 ≤ 720 : 레일 40px, 제목 · 카드 글자 한 단계 작게 / H3 ≤ 640 : 레일 36px, 프로그램 카드 안을 세 칸으로
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-height: 820px) {
  .journey.is-pinned .journey__in, .pstack, .process__in { gap: clamp(14px, 2.4vh, 26px); }
  .journey.is-pinned .jtrack { height: auto; flex: 1 1 0; min-height: 0; }
  .journey.is-pinned .journey__in { justify-content: flex-start; }
}
@media (min-width: 1024px) and (max-height: 720px) {
  :root { --rail-h: 40px; }
  .page[data-chapter] { padding-top: calc(var(--head-off) + 2.4vh); padding-bottom: 2.4vh; }
  .page[data-chapter] .sec-h { font-size: clamp(24px, 5vh, 36px); }
  .page[data-chapter] .sec-p { margin-top: 6px; font-size: var(--fs-md); line-height: 1.55; }
  .page[data-chapter] .chap { margin-bottom: 6px; }
  .rail__a { row-gap: 5px; font-size: var(--fs-2xs); }
  /* 01 학년 여정 : 제목 · 설명을 한 줄로 */
  .journey.is-pinned .journey__head > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; }
  .journey.is-pinned .journey__head > div:first-child .chap { flex-basis: 100%; }
  .journey.is-pinned .journey__head { gap: 10px; }
  .journey.is-pinned .jmini { padding-bottom: 10px; }
  .journey.is-pinned .jmini__g { padding: 2px 0; font-size: 15px; }
  .journey.is-pinned .jpanel { gap: 8px; padding: 2.6vh 22px 1.6vh; }
  .journey.is-pinned .jpanel__g { font-size: clamp(34px, 7.4vh, 60px); }
  .journey.is-pinned .jpanel__t { font-size: 15px; line-height: 1.55; }
  .journey.is-pinned .jp { min-height: 0; padding: 7px 0; }
  .journey.is-pinned .jp b { font-size: 15px; }
  /* 02 프로그램 카드 */
  .programs.is-stack .pstack__card { padding: 16px 24px 14px; }
  .programs.is-stack .pex__top { min-height: 0; }
  .programs.is-stack .pex__name { margin-top: 6px; font-size: clamp(22px, 4.2vh, 30px); }
  .programs.is-stack .pex__lede { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; }
  .programs.is-stack .pex__facts { margin-top: 10px; }
  .programs.is-stack .pex__facts > div { padding-block: 6px; }
  .programs.is-stack .pex__facts dd { font-size: var(--fs-sm); margin-top: 1px; }
  .programs.is-stack .pex__cols { margin-top: 10px; }
  .programs.is-stack .pex__h { margin-bottom: 4px; }
  .programs.is-stack .pex__works li { padding-block: 3px; grid-template-columns: 34px minmax(0, 1fr); }
  .programs.is-stack .pex__wi { width: 34px; height: 34px; border-radius: 9px; }
  .programs.is-stack .pex__works b { font-size: var(--fs-sm); }
  .programs.is-stack .pex__works span { font-size: var(--fs-xs); }
  .programs.is-stack .pex__steps li { padding-block: 1px; }
  .programs.is-stack .pex__steps b { font-size: 14px; }
  .programs.is-stack .pex__act { padding-top: 10px; }
  .programs.is-stack .pex__go { padding-block: .5em; }
  .programs.is-stack .pstack__side { gap: 18px; }
  .programs.is-stack .pstack__ia { padding-block: 9px; }
  .programs.is-stack .pstack__ia b { font-size: 17px; }
  /* 04 진행 순서 */
  .track.is-pinned .track__bar { margin: 6px 0 24px; }
  .track.is-pinned .track__step::before { top: -31px; }
  .track.is-pinned .track__n { font-size: clamp(32px, 7vh, 56px); }
  .track.is-pinned .track__step { gap: 5px; }
  .track.is-pinned .track__t { font-size: clamp(19px, 3.4vh, 24px); }
  .track.is-pinned .track__d { font-size: var(--fs-sm); line-height: 1.55; }
  .track.is-pinned .track__meta > div { padding: .3em .75em; }
}
@media (min-width: 1024px) and (max-height: 640px) {
  :root { --rail-h: 36px; }
  .rail__a { row-gap: 4px; }
  .page[data-chapter] { padding-top: calc(var(--head-off) + 1.8vh); padding-bottom: 1.8vh; }
  .journey.is-pinned .jpanel__p .jp { padding-block: 5px; }
  /* 02 프로그램 : 카드 안을 [이름 · 설명 · 조건 · 버튼] [하는 일] [진행 순서] 세 칸으로 */
  .programs.is-stack .pstack { grid-template-columns: minmax(0, 3fr) minmax(0, 8.6fr); gap: 32px; }
  .programs.is-stack .pstack__card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 22px; }
  .programs.is-stack .pstack__card > .pex__top, .programs.is-stack .pstack__card > .pex__name, .programs.is-stack .pstack__card > .pex__lede,
  .programs.is-stack .pstack__card > .pex__facts, .programs.is-stack .pstack__card > .pex__act { grid-column: 1; }
  .programs.is-stack .pex__top { grid-row: 1; }
  .programs.is-stack .pex__name { grid-row: 2; }
  .programs.is-stack .pex__lede { grid-row: 3; }
  .programs.is-stack .pex__facts { grid-row: 4; align-self: start; grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .programs.is-stack .pex__facts > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; padding: 4px 0; }
  .programs.is-stack .pex__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .programs.is-stack .pex__facts dd { margin: 0; }
  .programs.is-stack .pex__act { grid-row: 5; padding-top: 8px; }
  .programs.is-stack .pex__cols { display: contents; }
  .programs.is-stack .pex__col { grid-row: 1 / 6; min-width: 0; padding-top: 4px; }
  .programs.is-stack .pex__col:first-child { grid-column: 2; }
  .programs.is-stack .pex__col:last-child { grid-column: 3; }
  .programs.is-stack .pstack__of { display: none; }
  .programs.is-stack .pex__rule { width: 100%; }
}
/* 따라다니는 상담 버튼(오른쪽 아래)에 핀 챕터의 마지막 줄이 가리지 않게 아래를 비운다 */
@media (min-width: 1024px) and (max-height: 820px) {
  .journey.is-pinned, .process.has-pin-track { padding-bottom: 64px; }
}
/* 글자 바닥 12px */
.pex__rule li { font-size: var(--fs-2xs); }
.jmini__g small { font-size: max(12px, .72em); }
@media (max-width: 767px), (pointer: coarse) {
  .pex__ask { display: inline-flex; align-items: center; min-height: 44px; }
  .pex__go { min-height: 44px; }
}

/* 터치 : 비교판 · 합격 사례는 가로 조작만 가져가고 세로 스크롤은 페이지에 넘긴다 */
.split__range { touch-action: pan-y; }
.car__view { touch-action: pan-x pan-y; }
.jpanel__g small { font-size: max(12px, .38em); }
@media (pointer: coarse) { .faq__btn { min-height: 44px; } }
@media (min-width: 1024px) and (max-height: 640px) {
  /* 세 칸 카드의 진행 순서 칸 : 시기와 이름을 두 줄로(시기 칸이 좁은 칸을 다 차지하던 것) */
  .programs.is-stack .pex__steps { grid-template-columns: minmax(0, 1fr); }
  .programs.is-stack .pex__steps li { display: block; padding-block: 2px; line-height: 1.25; }
  .programs.is-stack .pex__steps span { display: block; font-size: var(--fs-2xs); line-height: 1.3; }
  .programs.is-stack .pex__steps b { display: block; font-size: var(--fs-xs); }
  .programs.is-stack .pex__steps li::before { top: 9px; margin-top: 0; }
  .programs.is-stack .pex__steps::before { top: 10px; bottom: 10px; }
  .programs.is-stack .pex__steps--8 li { padding-block: 0; }
}

/* ── 반응형 보정 (메인 검토) */
/* 03 다른 점 결과물 칩 : 칸이 좁아지면 낱말 중간('첨삭 보고 / 서')에서 끊기지 않게 낱말째 넘기고, 두 칸씩 놓는다 */
.yr4 i, .doc4 i { word-break: keep-all; }
@media (max-width: 1023px) {
  .doc4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 02 프로그램 세 칸 카드(낮은 노트북) : 진행 순서를 '시기 이름' 한 줄로. 8차시도 세로로 흩어지지 않고 한눈에 */
@media (min-width: 1024px) and (max-height: 640px) {
  .programs.is-stack .pex__steps li { display: block; padding-block: 1.5px; line-height: 1.35; }
  .programs.is-stack .pex__steps span { display: inline; margin-right: .45em; font-size: var(--fs-2xs); line-height: inherit; }
  .programs.is-stack .pex__steps b { display: inline; font-size: var(--fs-xs); }
  .programs.is-stack .pex__steps li::before { top: 8px; }
  .programs.is-stack .pex__steps--8 li { padding-block: 0; }
}

/* ══════════════════════════════════════════════════ 성능 · 호환 (2026-09-14) ══════════
   - 스크롤 중 계속 바뀌는 작은 막대만 자기 층(will-change)을 준다 : 레일 선(헤더 안), 학년 줄 진행선.
     헤더는 유리 블러 층이라, 안의 막대가 바뀔 때마다 헤더 전체를 다시 그리던 것을 막는다.
   - subgrid 없는 브라우저 : 프로그램 카드의 진행 순서 시기 칸을 고정 폭으로.
   - svh 없는 브라우저(Safari 15.3 이하 등) : vh 로. */
.rail__fill, .jmini__fill { will-change: transform; }
body.past-hero #s0 .intro__cue i::after { animation-play-state: paused; }
@supports not (grid-template-columns: subgrid) {
  .pex__steps li { grid-template-columns: minmax(6.5em, max-content) minmax(0, 1fr); }
}
@supports not (height: 100svh) {
  .page { height: 100vh; }
  .page[data-chapter], .page[data-snap]:not(.hero) { min-height: 100vh; }
  .journey.is-pinned, .programs.is-stack, .process.has-pin-track { height: 100vh; }
}
/* 원장 사진 : WebP(172KB, PNG 1.9MB 대신) + PNG 폴백. picture 상자는 만들지 않아 사진 배치는 그대로 */
.hero__pic { display: contents; }
/* aspect-ratio 없는 브라우저(Safari 14 이하) : 안의 엠블럼 · 글이 절대 위치라 높이가 0 이 되지 않게 비율 상자로 */
@supports not (aspect-ratio: 1 / 1) {
  .wcard__mark { height: 0; padding-top: 62.5%; }
  .peek__cover { height: 0; padding-top: 75%; }
}

/* 교과목 수업 외부 링크 (2026-09-14) : 컨설팅 목록 아래 한 줄. 카테고리에는 넣지 않는다 */
.pstack__ext { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(16px, calc(var(--u) * 1.8), 26px); min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--on-noir-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 5px; transition: color .25s var(--ease); }
.pstack__ext i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-style: normal; font-size: var(--fs-2xs); text-decoration: none; transition: background .25s var(--ease), transform .3s var(--ease); }
.pstack__ext:hover { color: #fff; }
.pstack__ext:hover i { background: var(--red); transform: translate(2px, -2px); }


/* 자주 묻는 질문 답 판 꾸밈 (2026-09-14, 2차) — Q · A 네모 표시를 빼고 진행 막대 · 큰 질문 · 답 · 관련 프로그램 링크로 정리
   질문 목록 : 번호 + 고른 줄 옅은 바탕. 답 판 : 위 8칸 막대(지금 칸 붉게, 지난 칸 옅게) + 순번 / 질문 / 답(34em) / 관련 링크 · 상담 전화 한 줄.
   질문을 바꾸면 답 판이 살짝 떠오르며 바뀐다. 폰 : 막대 · 질문 사본 없이 답 + 왼쪽 붉은 선 + 관련 링크. */
.faq__btn { gap: 12px; }
.faq__n { flex: none; min-width: 1.8em; font-size: .78em; font-weight: 800; color: rgba(23, 21, 26, .3); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.faq__btn[aria-expanded="true"] .faq__n { color: var(--red); }
.faq__qt { flex: 1; }
.faq__meta { display: none; }
.faq__ap { word-break: keep-all; max-width: 34em; text-wrap: pretty; }
.faq__foot { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(23, 21, 26, .08); }
.faq__rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.faq__rel span { margin-right: 4px; font-size: var(--fs-2xs); font-weight: 800; color: var(--ink-3); }
.faq__rel a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: #F6EEEB; font-size: 13.5px; font-weight: 700; color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease); }
.faq__rel a i { font-style: normal; transition: transform .3s var(--ease); }
.faq__rel a:hover { background: var(--ink); color: #fff; }
.faq__rel a:hover i { transform: translateX(3px); }
.faq__tel { font-size: 13.5px; color: var(--ink-3); }
.faq__tel a { font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(208, 2, 27, .45); text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
.faq__tel a:hover { color: var(--red); }
@media (max-width: 899px) {
  .faq__ans { padding: 4px 0 22px 16px; border-left: 2px solid var(--red); margin-left: 2px; }
}
@media (min-width: 900px) {
  .faq__btn { position: relative; border-radius: 0 14px 14px 0; transition: background .3s var(--ease), color .3s var(--ease); }
  .faq__btn:hover { background: rgba(255, 255, 255, .45); }
  .faq__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .75); }
  .faq__ans { position: relative; overflow: hidden; padding: calc(var(--u) * 2.4) calc(var(--u) * 2.8) calc(var(--u) * 2); }
  .faq__meta { display: flex; align-items: center; gap: 14px; margin-bottom: calc(var(--u) * 1.6); }
  .faq__segs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; flex: 1; max-width: 220px; }
  .faq__segs i { height: 3px; border-radius: 2px; background: rgba(23, 21, 26, .1); }
  .faq__segs i.past { background: rgba(208, 2, 27, .25); }
  .faq__segs i.on { background: var(--red); }
  .faq__num { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .faq__num b { color: var(--ink); }
  .faq__aq { margin-bottom: calc(var(--u) * 1.1); }
  .faq__ap { font-size: var(--fs-md); line-height: 1.8; color: var(--ink-2); }
  .faq__foot { margin-top: calc(var(--u) * 1.8); }
  .faq__a:not([hidden]) .faq__ans { animation: faqIn .5s cubic-bezier(.2, .8, .2, 1) both; }
  .faq__a:not([hidden]) .faq__segs i.on { animation: faqSeg .6s var(--ease) both .15s; transform-origin: 0 50%; }
  @keyframes faqIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes faqSeg { from { transform: scaleX(0); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .faq__a:not([hidden]) .faq__ans, .faq__a:not([hidden]) .faq__segs i.on { animation: none; } }

/* 질문 쪽 넘김 (2026-10-19) : 1쪽 공통 질문 · 2쪽 학생부 종합 컨설팅. 목록 바로 아래, 왼쪽은 쪽 번호 + 쪽 이름, 오른쪽은 < > 둥근 단추.
   넓은 화면에서는 목록 왼쪽 세로선 · 질문 들여쓰기와 같은 선에 맞춘다 */
.faq__pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.faq__pg { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.faq__pg b { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.faq__pg em { margin-left: 8px; padding-left: 10px; border-left: 1px solid rgba(23, 21, 26, .16); font-style: normal; color: var(--ink-2); }
.faq__pbtns { display: flex; gap: 8px; }
.faq__pb {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08), 0 10px 22px -14px rgba(84, 34, 30, .4);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.faq__pb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq__pb:hover { background: var(--ink); color: #fff; }
.faq__pb:active { transform: scale(.94); }
.faq__pb:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (min-width: 900px) {
  .faq__pager { grid-column: 1; padding-left: calc(var(--u) * 1.6); margin-top: calc(var(--u) * .9); }
  /* 쪽 넘김 줄이 더해진 만큼 아래 여백과 질문 줄 간격을 조금 줄여, 한 화면(넘김 맞춤 면) 높이를 전과 같게 둔다 */
  .faq__wrap:has(.faq__pager:not([hidden])) { padding-bottom: calc(var(--u) * 2); }
  .faq__board:has(.faq__pager:not([hidden])) .faq__btn { padding-block: calc(var(--u) * .62); }
}
@media (prefers-reduced-motion: reduce) { .faq__pb { transition: none; } }

/* ------------------------------------------------------- 표지 → 학년 여정 덮기 (2026-09-15)
   덮는 면이 비치면 아래 표지 카드가 겹쳐 보인다. 덮는 동안만 불투명한 종이 면으로 만들고 표지(z 3) 위로 올린다. */
#journey.is-cover {
  z-index: 4;
  background:
    radial-gradient(60% 50% at 88% 0%, rgba(255, 181, 158, .22), rgba(255, 181, 158, 0) 70%),
    var(--paper);
  box-shadow: 0 -18px 48px -24px rgba(23, 21, 26, .16), 0 -1px 0 rgba(23, 21, 26, .05);
}

/* 학년 여정 → 프로그램 덮기 : 먹색 면이 학년 여정(z 4) 위로 올라온다 */
#programs.is-cover {
  z-index: 5;
  box-shadow: 0 -22px 60px -26px rgba(10, 9, 12, .38);
}

/* ─────────────────────────────────────────────── 01 학년 여정 : 넘김 장치(2026-09-16)
   학년 칸 줄은 세로 스크롤에 끌려가지 않는다. 손으로 밀 수 있는 가로 줄(스냅)이고, 제목 오른쪽 넘김 장치 · 학년 탭으로 넘긴다. */
.journey.is-pinned .journey__head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-6); align-items: end; }
.journey.is-pinned .journey__head > div:first-child { grid-column: 1; }
.journey.is-pinned .journey__head > .stp { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 4px; }
.journey.is-pinned .jmini { grid-column: 1 / -1; }
.journey.is-pinned .jtrack {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 0;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.journey.is-pinned .jtrack::-webkit-scrollbar { display: none; }
.journey.is-pinned .jtrack__list { will-change: auto; }
.journey.is-pinned .jpanel { scroll-snap-align: start; }
.journey.is-pinned .jmini__fill { transition: transform .7s var(--ease); }
.journey.is-pinned .jmini__g { cursor: pointer; }
.journey.is-pinned .jpanel__t { max-width: none; }

/* ─────────────────────────────────────────────── 05 합격 사례 (먹색) : 실제 공지 합격 후기 (2026-09-16)
   왼쪽 : 제목 · 설명 · 합격 15곳 목록 · 전체 보기 / 오른쪽 : 후기 카드 네 장(2×2). 예전 대학 카드 캐러셀(.car · .wcard · .voice)은 쓰지 않는다. */
#results .results__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, calc(var(--u) * 5), 96px); align-items: center; }
.results__side { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, calc(var(--u) * 1.6), 26px); }
.rsum { width: 100%; padding-top: clamp(14px, calc(var(--u) * 1.4), 22px); border-top: 1px solid rgba(255, 255, 255, .14); }
.rsum__h { font-size: var(--fs-sm); font-weight: 600; color: var(--on-noir-2); }
.rsum__h b { margin: 0 .12em; font-size: 1.5em; font-weight: 900; color: #fff; }
.rsum__names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rsum__names li { padding: .34em .78em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: var(--fs-xs); font-weight: 600; color: #E9E5EA; }
.rcases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, calc(var(--u) * 1.2), 20px); }
.rcase {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: clamp(16px, calc(var(--u) * 1.8), 30px) clamp(16px, calc(var(--u) * 1.8), 28px);
  border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.rcase__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rcase__type { padding: .28em .7em; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 800; color: #fff; background: var(--red); }
.rcase--high .rcase__type { color: var(--ink); background: #F4EFE9; }
.rcase__who { font-size: var(--fs-2xs); font-weight: 600; color: var(--on-noir-2); }
.rcase__h { margin-top: 6px; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.006em; line-height: 1.25; color: #fff; }
.rcase__sub { font-size: var(--fs-sm); font-weight: 600; color: var(--on-noir-2); }
.rcase__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 2px; }
.rcase__facts div { display: flex; gap: 6px; align-items: baseline; }
.rcase__facts dt { font-size: var(--fs-2xs); color: var(--on-noir-2); }
.rcase__facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.rcase__d, .rcase__q p { font-size: var(--fs-sm); line-height: 1.62; color: rgba(246, 244, 245, .82); }
.rcase__q { margin: 0; padding-left: 12px; border-left: 2px solid var(--red-on-noir); }
.rcase__q p { color: #fff; font-weight: 500; }
.rcase__src { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--red-on-noir); align-self: flex-start; }
.rcase__src:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  #results .results__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .rcases { grid-template-columns: minmax(0, 1fr); }
  .rsum__names li:nth-child(n+9) { display: none; }
}

/* 2026-09-16 모션 덜어내기 : 입시리포트 커서 표지(.peek)를 쓰지 않는다. 작은 표지가 모든 화면에서 줄 왼쪽에 선다. */
.peek { display: none !important; }
.row__a { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "thumb meta go" "thumb main go"; align-items: start; }
.row__thumb { display: grid; }
.row__a .go { align-self: center; }
@media (min-width: 900px) {
  .row__a { grid-template-columns: 56px calc(var(--u) * 13) minmax(0, 1fr) auto; grid-template-areas: "thumb meta main go"; }
}

/* ─────────────────────────────────────────────── 01 학년 여정 : 학년 탭 · 소개글 (2026-09-16)
   탭 : 글자는 칸 가운데, 동그라미도 글자 가운데 아래 선 위에 선다(예전에는 글자 왼쪽 끝에 붙어 어긋나 보였다).
        칸 전체(글자 + 동그라미)가 누르는 영역이고, 누르면 그 학년 칸으로 넘어간다(DP.stepper tabs).
   소개글 : 문장마다 새 줄에서 시작하고(.jpanel__s), 줄 끝에 한두 글자만 남지 않게 text-wrap: pretty. */
@media (min-width: 1024px) {
  .journey.is-pinned .jmini { padding-bottom: 0; }
  .journey.is-pinned .jmini__g {
    justify-content: center; align-items: baseline; width: 100%; min-height: 44px;
    padding: 8px 4px 22px; text-align: center; border-radius: 10px;
  }
  .journey.is-pinned .jmini__g::after { left: 50%; bottom: 0; margin: 0 0 -4.5px -4.5px; }
  .journey.is-pinned .jmini__g:hover::after { border-color: var(--ink); }
  .journey.is-pinned .jmini__g.is-on::after { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(208, 2, 27, .14); }
  .journey.is-pinned .jmini__g::after { transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
  .journey.is-pinned .jmini__g:focus-visible { outline-offset: -2px; }
}
.jpanel__s { display: block; text-wrap: pretty; }
.jpanel__s + .jpanel__s { margin-top: .35em; }
.nw { white-space: nowrap; }

/* 학년 여정 도착 고정(main.js) : 잠시 페이지 스크롤을 멈춘다. 스크롤바 자리는 늘 비워 둬서 잠글 때 화면 폭이 바뀌지 않게 */
html.is-main { scrollbar-gutter: stable; }
html.scroll-hold, html.scroll-hold body { overflow: hidden; }

/* ─────────────────────────────────────────────── 01 학년 여정 : 칸 정리 (2026-09-16 · 2)
   칸마다 소개글 길이 · 프로그램 수가 달라 프로그램 목록이 칸 바닥에서 제각각 시작했다.
   줄(.jtrack__list)을 행 네 개(학년 | 소개글 | 프로그램 | 남는 자리)인 격자로 두고 칸이 그 행을 나눠 쓴다(subgrid).
   가장 긴 소개글에 맞춰 모든 칸의 프로그램 목록이 같은 높이에서 시작한다. 목록 위에는 '지금 필요한 프로그램' 이름표. */
@media (min-width: 1024px) {
  .journey.is-pinned .jtrack__list {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(290px, 29vw, 440px);
    grid-template-rows: auto auto auto minmax(0, 1fr); row-gap: 0; height: 100%;
  }
  .journey.is-pinned .jpanel { grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; width: auto; height: auto; row-gap: 0; }
  .journey.is-pinned .jpanel__g { margin-bottom: clamp(12px, calc(var(--u) * 1.2), 20px); }
  .journey.is-pinned .jpanel__p { margin-top: clamp(18px, calc(var(--u) * 2), 30px); align-self: start; border-bottom: 1px solid rgba(23, 21, 26, .1); }
  .journey.is-pinned .jpanel__p::before {
    content: "지금 필요한 프로그램"; display: block; padding-bottom: 8px;
    font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3);
  }
  .journey.is-pinned .jpanel.is-on .jpanel__p::before { color: var(--red); }
}
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    .journey.is-pinned .jtrack__list { display: flex; }
    .journey.is-pinned .jpanel { display: flex; flex-direction: column; width: clamp(290px, 29vw, 440px); height: 100%; }
    .journey.is-pinned .jpanel__t { min-height: 9.6em; }
  }
}
.jp-none { padding: 14px 0 12px; border-top: 1px solid rgba(23, 21, 26, .1); font-size: var(--fs-sm); color: var(--ink-3); }

/* 학년 탭 진행선 : 선은 동그라미 뒤로(z), 동그라미 중심은 선 한가운데. 호버는 옅은 빨강 테두리로만 */
@media (min-width: 1024px) {
  .journey.is-pinned .jmini__line { bottom: 5px; height: 2px; z-index: 0; border-radius: 2px; }
  .journey.is-pinned .jmini__g { z-index: 1; }
  .journey.is-pinned .jmini__g::after {
    width: 10px; height: 10px; bottom: 1px; margin: 0 0 0 -5px;
    background: var(--paper); border: 1.5px solid rgba(23, 21, 26, .26); box-shadow: 0 0 0 3px var(--paper);
  }
  .journey.is-pinned .jmini__g:hover::after { border-color: rgba(208, 2, 27, .55); transform: scale(1.12); }
  .journey.is-pinned .jmini__g.is-on::after { background: var(--red); border-color: var(--red); transform: scale(1.2); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px rgba(208, 2, 27, .16); }
}
/* 낮은 창(높이 820 이하) : 프로그램 두 줄이 칸 아래에서 잘리지 않게 칸 안 간격을 줄인다 */
@media (min-width: 1024px) and (max-height: 820px) {
  .journey.is-pinned .jpanel { padding-top: clamp(14px, 2.4vh, 26px); padding-bottom: 8px; }
  .journey.is-pinned .jpanel__g { margin-bottom: 8px; font-size: clamp(34px, 6.4vh, 60px); }
  .journey.is-pinned .jpanel__p { margin-top: clamp(10px, 1.8vh, 18px); }
  .journey.is-pinned .jpanel__p::before { padding-bottom: 4px; }
  .journey.is-pinned .jp { min-height: 0; padding-block: 6px; }
  .journey.is-pinned .jpanel__s + .jpanel__s { margin-top: .2em; }
}
@media (min-width: 1024px) and (max-height: 780px) {
  .journey.is-pinned .journey__in { gap: clamp(10px, 1.8vh, 18px); }
  .journey.is-pinned .jpanel__t { font-size: var(--fs-sm); line-height: 1.55; }
  .journey.is-pinned .jpanel__p::before { display: none; }
  .journey.is-pinned .jp b { font-size: var(--fs-sm); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .journey.is-pinned .jtrack__list { grid-auto-columns: clamp(300px, 34vw, 400px); }
}

/* 01 학년 여정 : 칸(활성 흰 면)이 프로그램 목록 바로 아래에서 잘려 여백이 없던 것 (2026-09-16 · 3)
   줄 높이를 내용에 맞추고(남는 행 없음) 칸 아래에 여백을 준다. */
@media (min-width: 1024px) {
  .journey.is-pinned .jtrack { height: auto; flex: 0 1 auto; }
  .journey.is-pinned .jtrack__list { grid-template-rows: auto auto auto; height: auto; }
  .journey.is-pinned .jpanel { grid-row: 1 / span 3; padding-bottom: clamp(22px, calc(var(--u) * 2.4), 40px); }
  .journey.is-pinned .jpanel__p { margin-bottom: 0; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .journey.is-pinned .jpanel { padding-bottom: clamp(14px, 2.2vh, 22px); }
}

/* 01 학년 여정 : 창 높이에 맞춘 칸 크기 (2026-09-16 · 4)
   1536×864 · 1680×930 · 1920×960 같은 흔한 창에서 칸 내용이 화면보다 길어 카드 아래가 잘렸다.
   데스크톱 가로 줄에서는 학년 숫자 · 소개글 · 간격 · 프로그램 줄 높이를 창 높이(vh)에 묶는다. */
@media (min-width: 1024px) {
  .journey.is-pinned .journey__in { gap: clamp(10px, 1.9vh, 30px); }
  .journey.is-pinned .journey__head { gap: clamp(8px, 1.4vh, 20px); }
  .journey.is-pinned .sec-h { font-size: clamp(26px, 4.6vh, 46px); }
  .journey.is-pinned .sec-p { margin-top: clamp(4px, .8vh, 12px); }
  .journey.is-pinned .jmini__g { min-height: 0; padding-top: clamp(4px, .8vh, 8px); padding-bottom: 20px; }
  .journey.is-pinned .jpanel { padding: clamp(14px, 2.4vh, 34px) clamp(18px, 2vw, 34px) clamp(16px, 2.6vh, 34px); }
  .journey.is-pinned .jpanel__g { font-size: clamp(32px, 6.4vh, 76px); margin-bottom: clamp(6px, 1.1vh, 16px); }
  .journey.is-pinned .jpanel__t { font-size: clamp(13.5px, 1.72vh, 16.5px); line-height: 1.6; }
  .journey.is-pinned .jpanel__s + .jpanel__s { margin-top: clamp(2px, .5vh, 6px); }
  .journey.is-pinned .jpanel__p { margin-top: clamp(10px, 2vh, 26px); }
  .journey.is-pinned .jpanel__p::before { padding-bottom: clamp(4px, .7vh, 8px); }
  .journey.is-pinned .jp { min-height: 0; padding-block: clamp(6px, 1.1vh, 12px); }
  .journey.is-pinned .jp b { font-size: clamp(13.5px, 1.72vh, 16px); }
  .journey.is-pinned, .journey.is-pinned.page { padding-bottom: clamp(24px, 4.2vh, 56px); }
}
@media (min-width: 1024px) {
  .journey.is-pinned .jpanel { padding-bottom: clamp(24px, 3.2vh, 42px); }
  /* 넘어갈 때 지금 칸 강조가 줄 이동과 같은 속도로 스며들게 */
  .journey.is-pinned .jpanel { transition: background .8s cubic-bezier(.65, 0, .35, 1), box-shadow .8s cubic-bezier(.65, 0, .35, 1); }
  .journey.is-pinned .jpanel__g { transition: color .8s cubic-bezier(.65, 0, .35, 1); }
  .journey.is-pinned .jmini__fill { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
}
.track.is-pinned .track__fill { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.track.is-pinned .track__n, .track.is-pinned .track__t, .track.is-pinned .track__step::before { transition-duration: .7s; }

/* 02 프로그램 → 03 다른 점 덮기 (2026-09-16) : 밝은 면이 먹색 프로그램(z 5) 위로 불투명하게 올라온다 */
#why.is-cover {
  z-index: 6;
  background: radial-gradient(60% 50% at 88% 0%, rgba(255, 181, 158, .22), rgba(255, 181, 158, 0) 70%), var(--paper);
  box-shadow: 0 -22px 60px -26px rgba(10, 9, 12, .45), 0 -1px 0 rgba(23, 21, 26, .05);
}

/* 03 ~ 07 면 높이 = 화면 높이 (2026-09-16)
   위 여백(헤더 + 챕터 레일 + 여유)이 낮은 창에서도 그대로라 03 다른 점이 1536×864 에서 28px, 1366×768 에서 31px 길었다.
   덮기 전환이 끝나 면이 화면에 딱 섰을 때 아래가 모자라 보였다. 여유 여백을 창 높이에 묶는다. */
@media (min-width: 1024px) and (min-height: 640px) {
  #why, #process, #results, #insight, #contact {
    padding-top: calc(var(--head-off) + clamp(10px, 2.6vh, 44px));
    padding-bottom: clamp(16px, 3.2vh, 56px);
  }
  #why .why__in { gap: clamp(16px, 2.4vh, 44px); }
}

/* 02 프로그램 카드 쌓임 : 아직 올라오지 않은 카드의 기본 자리는 화면 아래 (2026-09-16)
   새로고침하면 스크롤 트리거가 위치를 다시 재며 아직 차례가 오지 않은 카드의 위치값을 지운다. 그때 카드가 제자리(맨 위)에 겹쳐 보였다. */
.programs.is-stack .pstack__card + .pstack__card { transform: translate3d(0, 100vh, 0); }

/* 02 프로그램 핀 화면 높이 맞춤 (2026-09-16)
   높이 1000px 아래 창(1536×864 · 1920×960 · 1680×930 등)에서 카드 아래 '자세히 보기'와 왼쪽 '내신 교과목' 링크가 화면 밖으로 잘렸다.
   글자 크기는 두고, 위아래 여백 · 목록 칸 높이 · 카드 안 간격을 화면 높이(vh)에 맞춰 줄여 카드와 왼쪽 열이 화면 안에 끝나게 한다.
   카드 아래에는 따라다니는 상담 버튼 높이만큼 여유를 남긴다. 높이 720 이하는 위 H2 · H3 단계가 맡는다. */
@media (min-width: 1024px) and (min-height: 801px) and (max-height: 1000px) {
  .programs.is-stack { padding-top: calc(var(--head-off) + 2.6vh); padding-bottom: 5.4vh; }
  .programs.is-stack .pstack { align-items: center; }
  .programs.is-stack .pstack__side { gap: 2.4vh; }
  .programs.is-stack .pstack__side .sec-p { margin-top: 1vh; }
  .programs.is-stack .pstack__ia { padding-block: 1.45vh; }
  .programs.is-stack .pstack__ext { margin-top: 0; }
  .programs.is-stack .pstack__card { padding: 2.9vh clamp(20px, calc(var(--u) * 2.6), 46px) 2.5vh; }
  .programs.is-stack .pex__name { margin-top: 1.3vh; font-size: clamp(26px, 4.4vh, 44px); }
  .programs.is-stack .pex__lede { margin-top: .6vh; line-height: 1.55; }
  .programs.is-stack .pex__facts { margin-top: 1.6vh; }
  .programs.is-stack .pex__facts > div { padding-block: 1vh; }
  .programs.is-stack .pex__cols { margin-top: 1.8vh; }
  .programs.is-stack .pex__works li { padding-block: .55vh; }
  .programs.is-stack .pex__steps li { padding-block: .35vh; }
  .programs.is-stack .pex__steps--8 li { padding-block: .1vh; }
  .programs.is-stack .pex__act { padding-top: 2vh; }
  .programs.is-stack .pex__go { padding-block: .55em; }
}
/* 높이 721~800 : 위 H2 단계(≤720)의 카드 밀도를 그대로 쓰고, 위아래 여백만 화면 높이에 맞춘다 */
@media (min-width: 1024px) and (min-height: 721px) and (max-height: 800px) {
  .programs.is-stack { padding-top: calc(var(--head-off) + 2.2vh); padding-bottom: 5vh; }
  .programs.is-stack .pstack__card { padding: 18px 26px 16px; }
  .programs.is-stack .pex__top { min-height: 0; }
  .programs.is-stack .pex__name { margin-top: 6px; font-size: clamp(22px, 4.2vh, 32px); }
  .programs.is-stack .pex__lede { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; }
  .programs.is-stack .pex__facts { margin-top: 10px; }
  .programs.is-stack .pex__facts > div { padding-block: 6px; }
  .programs.is-stack .pex__facts dd { font-size: var(--fs-sm); margin-top: 1px; }
  .programs.is-stack .pex__cols { margin-top: 12px; }
  .programs.is-stack .pex__h { margin-bottom: 4px; }
  .programs.is-stack .pex__works li { padding-block: 3px; grid-template-columns: 34px minmax(0, 1fr); }
  .programs.is-stack .pex__wi { width: 34px; height: 34px; border-radius: 9px; }
  .programs.is-stack .pex__works b { font-size: var(--fs-sm); }
  .programs.is-stack .pex__works span { font-size: var(--fs-xs); }
  .programs.is-stack .pex__steps li { padding-block: 1px; }
  .programs.is-stack .pex__steps b { font-size: 14px; }
  .programs.is-stack .pex__act { padding-top: 12px; }
  .programs.is-stack .pex__go { padding-block: .5em; }
  .programs.is-stack .pstack__side { gap: 18px; }
  .programs.is-stack .pstack__ia { padding-block: 10px; }
  .programs.is-stack .pstack__ext { margin-top: 0; }
}
/* 높이 720 이하 : 위아래 여백을 확보. 폭 1200 이상은 카드를 세 칸(H3)으로 펴서 높이를 줄인다 */
@media (min-width: 1024px) and (max-height: 720px) {
  .programs.is-stack { padding-top: calc(var(--head-off) + 2vh); padding-bottom: 4.6vh; }
  .programs.is-stack .pstack__ext { margin-top: 0; min-height: 36px; }
}
@media (min-width: 1200px) and (min-height: 641px) and (max-height: 680px) {
  .programs.is-stack .pstack { grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.4fr); gap: 40px; }
  .programs.is-stack .pstack__card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 24px; }
  .programs.is-stack .pstack__card > .pex__top, .programs.is-stack .pstack__card > .pex__name, .programs.is-stack .pstack__card > .pex__lede,
  .programs.is-stack .pstack__card > .pex__facts, .programs.is-stack .pstack__card > .pex__act { grid-column: 1; }
  .programs.is-stack .pex__top { grid-row: 1; }
  .programs.is-stack .pex__name { grid-row: 2; }
  .programs.is-stack .pex__lede { grid-row: 3; }
  .programs.is-stack .pex__facts { grid-row: 4; align-self: start; grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .programs.is-stack .pex__facts > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; padding: 5px 0; }
  .programs.is-stack .pex__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .programs.is-stack .pex__facts dd { margin: 0; }
  .programs.is-stack .pex__act { grid-row: 5; padding-top: 10px; }
  .programs.is-stack .pex__cols { display: contents; }
  .programs.is-stack .pex__col { grid-row: 1 / 6; min-width: 0; padding-top: 4px; }
  .programs.is-stack .pex__col:first-child { grid-column: 2; }
  .programs.is-stack .pex__col:last-child { grid-column: 3; }
  .programs.is-stack .pstack__of { display: none; }
  .programs.is-stack .pex__rule { width: 100%; }
  .programs.is-stack .pex__steps { grid-template-columns: minmax(0, 1fr); }
  .programs.is-stack .pex__steps li { display: block; padding-block: 2px; line-height: 1.35; }
  .programs.is-stack .pex__steps span { display: inline; margin-right: .45em; font-size: var(--fs-2xs); line-height: inherit; }
  .programs.is-stack .pex__steps b { display: inline; font-size: var(--fs-xs); }
  .programs.is-stack .pex__steps li::before { top: 8px; margin-top: 0; }
  .programs.is-stack .pex__steps::before { top: 10px; bottom: 10px; }
  .programs.is-stack .pex__steps--8 li { padding-block: 0; }
}
/* 폭 1024~1199 · 높이 640 이하 : 왼쪽 열이 좁아 설명 · 목록이 여러 줄로 불어났다. 설명은 숨기고(제목 · 목록만) 목록 칸을 낮춘다 */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 640px) {
  .programs.is-stack .pstack { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.2fr); gap: 24px; }
  .programs.is-stack .pstack__side .sec-p { display: none; }
  .programs.is-stack .pstack__side { gap: 12px; }
  .programs.is-stack .pstack__ia { padding: 6px 0 6px 14px; }
  .programs.is-stack .pstack__ia b { font-size: 15px; }
  .programs.is-stack .pstack__ext { font-size: 13px; }
}
.pstack__ext { word-break: keep-all; }

/* ── 02 프로그램 카드 : 두 과정으로 나뉘는 진행 순서 · 후킹 문구 (2026-09-16)
   고입 자소서 · 면접(자기소개서 4회 / 면접 8회)과 대입(수시 / 정시)은 커리큘럼이 둘로 나뉜다.
   한 줄기 타임라인에 모두 세우면 어디까지가 어느 과정인지 보이지 않아, 과정마다 칸을 따로 세우고 소제목 옆에 회차 배지를 둔다. */
.pex__h i {
  font-style: normal; margin-left: .5em; padding: .2em .6em; border-radius: var(--r-pill);
  font-size: max(11px, .92em); font-weight: 800; letter-spacing: .01em;
  color: var(--red-on-noir); background: rgba(255, 122, 132, .16);
}
.pex__col--grp .pex__h { color: #fff; font-size: clamp(12.5px, calc(var(--u) * .92), 15px); }
@media (min-width: 1024px) {
  .pex__cols--3 { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pex__col--grp { position: relative; padding-left: clamp(14px, calc(var(--u) * 1.4), 24px); }
  .pex__col--grp::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: rgba(255, 255, 255, .14); }
}
@media (max-width: 1023px) {
  .pex__col--grp + .pex__col--grp { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* 후킹 문구 : 카드 맨 아래 버튼 바로 위. 왼쪽 붉은 기둥 + 한 줄 제목 + 설명 */
.pex__hook {
  margin-top: clamp(12px, calc(var(--u) * 1.2), 20px);
  padding: clamp(12px, calc(var(--u) * 1.1), 18px) clamp(14px, calc(var(--u) * 1.3), 22px);
  border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 3px 0 0 var(--red-on-noir);
}
/* 넓은 화면 : 제목과 설명을 두 칸으로 나란히 둔다(세로로 쌓으면 카드 한 장 높이를 넘긴다) */
@media (min-width: 900px) {
  .pex__hook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: center; column-gap: clamp(14px, calc(var(--u) * 1.4), 26px); }
  .pex__hookp { margin-top: 0; }
}
.pex__hookt { font-size: clamp(15px, calc(var(--u) * 1.12), 19px); font-weight: 800; line-height: 1.4; color: #fff; word-break: keep-all; }
.pex__hookp { margin-top: 5px; font-size: clamp(12.5px, calc(var(--u) * .9), 14.5px); line-height: 1.62; color: var(--on-noir-2); word-break: keep-all; }
@media (min-width: 1024px) and (max-height: 720px) { .pex__hook { padding: 9px 13px; } }

/* ── 02 프로그램 쌓이는 카드 : 창 높이에 맞춘 밀도 (2026-09-16 · 내용 개편)
   설명 두 문장 · 과정 7~9줄 · 후킹 문구가 들어가며 카드가 한 화면을 넘겼다.
   글자와 줄 간격을 창 높이(vh)에 비례시키고, 낮은 창 보정(860 · 720 · 680)보다 뒤에 두어 한 곳에서 관리한다. */
@media (min-width: 1024px) and (orientation: landscape) {
  .programs.is-stack .pex__name { margin-top: .8vh; font-size: clamp(21px, 4.1vh, 38px); }
  .programs.is-stack .pex__lede { margin-top: .6vh; font-size: clamp(12.5px, 1.68vh, 14.5px); line-height: 1.42; max-width: none; }
  .programs.is-stack .pex__facts { margin-top: 1.4vh; }
  .programs.is-stack .pex__facts > div { padding-block: .5vh; }
  .programs.is-stack .pex__facts dt { font-size: clamp(11.5px, 1.45vh, 12.5px); }
  .programs.is-stack .pex__facts dd { margin-top: 2px; font-size: clamp(12.5px, 1.7vh, 14.5px); }
  .programs.is-stack .pex__cols { margin-top: 1.6vh; column-gap: clamp(14px, calc(var(--u) * 1.6), 30px); }
  .programs.is-stack .pex__h { margin-bottom: .5vh; font-size: clamp(11.5px, 1.5vh, 13px); }
  .programs.is-stack .pex__works li { padding: .3vh 0; column-gap: 10px; grid-template-columns: clamp(24px, 3.2vh, 30px) minmax(0, 1fr); line-height: 1.3; }
  .programs.is-stack .pex__wi { width: clamp(24px, 3.2vh, 30px); height: clamp(24px, 3.2vh, 30px); border-radius: 8px; }
  .programs.is-stack .pex__works b { font-size: clamp(12px, 1.6vh, 13.5px); }
  .programs.is-stack .pex__works span { font-size: clamp(11px, 1.4vh, 12px); }
  .programs.is-stack .pex__steps li { padding: .2vh 0 .2vh 20px; }
  .programs.is-stack .pex__steps b { font-size: clamp(11.5px, 1.55vh, 13px); line-height: 1.35; }
  .programs.is-stack .pex__steps span { font-size: clamp(10.5px, 1.4vh, 12px); }
  .programs.is-stack .pex__hook { margin-top: 1vh; padding: .85vh clamp(12px, 1.5vh, 17px); }
  .programs.is-stack .pex__hookt { font-size: clamp(12.5px, 1.7vh, 14.5px); line-height: 1.3; }
  .programs.is-stack .pex__hookp { font-size: clamp(12px, 1.45vh, 13px); line-height: 1.45; }
  .programs.is-stack .pex__act { padding-top: 1vh; }
  .programs.is-stack .pex__go { padding-block: .45em; font-size: clamp(13px, 1.65vh, 16px); }
  .programs.is-stack .pex__ask { font-size: clamp(12.5px, 1.65vh, 16px); }
}
/* 낮은 창의 세 칸 카드 : 커리큘럼이 둘로 나뉜 프로그램은 네 칸으로(정보 · 과정과 결과물 · 과정1 · 과정2) */
@media (min-width: 1200px) and (min-height: 641px) and (max-height: 680px) {
  .programs.is-stack .pstack__card:has(.pex__cols--3) { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, .85fr) minmax(0, .85fr); }
  .programs.is-stack .pex__cols--3 .pex__col:first-child { grid-column: 2; }
  .programs.is-stack .pex__cols--3 .pex__col--grp:nth-child(2) { grid-column: 3; }
  .programs.is-stack .pex__cols--3 .pex__col--grp:nth-child(3) { grid-column: 4; }
}

/* 낮은 창 세 칸 카드 : 후킹 문구는 칸 하나에 갇히면 좁아서 길어진다. 카드 맨 아래 전체 폭으로 둔다 */
@media (min-width: 1200px) and (min-height: 641px) and (max-height: 680px) {
  .programs.is-stack .pstack__card { grid-template-rows: auto auto auto 1fr auto auto; }
  .programs.is-stack .pex__hook { grid-column: 1 / -1; grid-row: 5; margin-top: .8vh; }
  .programs.is-stack .pstack__card > .pex__act { grid-row: 6; }
}
/* 후킹 문구 : 설명은 카드 폭에 맞춰 촘촘하게 */
@media (min-width: 1200px) {
  .programs.is-stack .pex__hook { grid-template-columns: minmax(0, .85fr) minmax(0, 2.4fr); }
}

/* ── 03 관리 차별점 : 비교 항목이 넷으로 늘어 한 화면을 넘겼다 (2026-09-16)
   글자 크기는 두고 줄 높이 · 칸 여백 · 시각물 높이를 창 높이(vh)에 맞춘다. */
@media (min-width: 1024px) and (orientation: landscape) {
  .cmp2.is-live .cmp2__k { font-size: clamp(14px, 2vh, 19px); }
  .split.is-live .split__who { padding: 1.5vh calc(var(--u) * 2.4) .7vh; font-size: clamp(14px, 2vh, 19px); }
  .split.is-live .split__row { gap: 1.1vh; padding: 1.3vh calc(var(--u) * 2.4); }
  .split.is-live .split__v { font-size: clamp(13.5px, 1.95vh, 18px); line-height: 1.4; }
  .split.is-live .wk16 i { height: clamp(14px, 2.1vh, 26px); }
  .split.is-live .yr4 i, .split.is-live .doc4 i { min-height: clamp(24px, 3.2vh, 40px); font-size: clamp(11px, 1.45vh, 13.5px); }
}

/* 후킹 설명 : 창이 낮으면(높이 820 이하) 카드 한 장을 넘기지 않게 세 줄까지만 보여 준다.
   (줄 제한은 블록 상자 안에서만 동작해 .pex__hookc 로 한 겹 감쌌다. 전체 문장은 폰 · 높은 창 · 상세 페이지에서 그대로 보인다.) */

/* ══════════════════════════════════════════════════════════════════════════
   08 상담 (2026-09-16 3차)
   - 안내 문장은 두 마디로 끊어 읽는다. 폰에서는 억지로 끊지 않고 이어 흐른다.
   - 예약 안내 한 줄과 버튼은 한 덩어리(.cbook)로 묶어 '무엇을 하면 되는지'가 버튼 바로 위에 붙게 했다.
   - 버튼은 한 치수 줄였다(btn--lg → 중간 치수). 먹색 바탕에서 두 덩어리가 서로 밀지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) { .contact__lead .l { display: block; } }
.contact__lead .l { vertical-align: top; }

.cbook {
  display: grid; justify-items: start; gap: clamp(10px, calc(var(--u) * 1.1), 16px);
  margin-top: clamp(14px, calc(var(--u) * 1.5), 26px);
}
.contact__note {
  display: inline-flex; align-items: baseline; gap: .55em;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: var(--on-noir-2); word-break: keep-all;
}
.contact__note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red-on-noir); translate: 0 -.15em; }
.contact__cta { margin-top: 0; gap: 8px; }
/* 푸터가 바로 이어지므로 상담 판 아래에 숨 쉴 자리를 둔다 */
.contact__in { padding-bottom: clamp(40px, calc(var(--u) * 4.4), 96px); }
.contact__cta .btn { padding: .92em 1.9em; font-size: var(--fs-md); }
.contact__cta .btn__ic { width: 1.05em; height: 1.05em; }
@media (max-width: 599px) {
  .cbook { width: 100%; }
  .contact__cta { width: 100%; }
  .contact__cta .btn { flex: 1 1 100%; padding: .95em 1.4em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 프로그램 카드 다시 재기 (2026-09-16 2차)
   재 본 결과 카드 아래에 90~190px 이 남는데 '과정과 결과물 · 진행 순서' 줄만 3~6px 간격으로 붙어 있었다.
   남는 자리를 줄 사이로 돌려준다. 글자 크기는 그대로 두고 줄 높이와 칸 사이만 넓힌다.
   - 진행 순서 동그라미 : 이름이 두 줄로 넘어가도 시기 글자와 같은 줄에 선다(칸 한가운데가 아니라 첫 줄 기준).
   - 세로 줄기 : 양 끝을 흐리게 지워 첫 · 마지막 동그라미 밖으로 삐져나오지 않는다.
   - 두 과정으로 나뉘는 카드(자기소개서 · 면접 / 수시 · 정시) : 과정마다 옅은 판을 깔아 경계를 분명히 한다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 진행 순서 : 동그라미를 첫 줄에 맞춘다 */
.pex__steps li::before { display: none; }
.pex__steps span { position: relative; }
.pex__steps span::before {
  content: ""; position: absolute; left: -22px; top: 50%; translate: 0 -50%;
  width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
  background: #2A272D; border: 1.5px solid var(--red-on-noir);
}
.pex__steps li:first-child span::before { background: var(--red-on-noir); }
.pex__steps::before {
  top: 0; bottom: 0; width: 1px; background: linear-gradient(
    rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .16) 16px,
    rgba(255, 255, 255, .16) calc(100% - 16px), rgba(255, 255, 255, 0) 100%);
}
.pex__steps b { line-height: 1.4; }
.pex__steps li { align-items: start; }
.pex__steps span { line-height: 1.4; }

/* ── 줄 사이를 넓힌다. 화면 높이에 따라 남는 만큼만 */
@media (min-width: 1024px) and (orientation: landscape) {
  .programs.is-stack .pex__h { margin-bottom: clamp(6px, .78vh, 11px); }
  .programs.is-stack .pex__works li { padding-block: clamp(3.5px, .68vh, 8px); }
  .programs.is-stack .pex__steps li { padding-block: clamp(3px, .54vh, 7px); }
  .programs.is-stack .pex__steps--8 li { padding-block: clamp(2px, .38vh, 5px); }
  .programs.is-stack .pex__cols { margin-top: clamp(11px, 1.55vh, 22px); column-gap: clamp(22px, calc(var(--u) * 2.6), 46px); }
}

/* ── 두 과정으로 나뉘는 카드 : 과정마다 판을 깐다 */
@media (min-width: 1024px) {
  /* 두 과정 판은 글줄이 좁아 회차 이름이 자꾸 끊겼다. 판을 조금 넓히고 시기는 이름 위 줄로 올린다. */
  .pex__cols--3 { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(12px, calc(var(--u) * 1.3), 22px); }
  .pex__col--grp .pex__steps { grid-template-columns: minmax(0, 1fr); }
  .pex__col--grp .pex__steps li { display: block; }
  .pex__col--grp .pex__steps span { display: block; }
  .pex__col--grp .pex__steps b { display: block; margin-top: 1px; }
  .pex__col--grp {
    padding: clamp(9px, 1.15vh, 15px) clamp(13px, calc(var(--u) * 1.3), 20px);
    border-radius: 14px; background: rgba(255, 255, 255, .038);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  }
  .pex__col--grp::before { display: none; }
  .pex__col--grp .pex__h { margin-bottom: clamp(7px, .85vh, 12px); font-weight: 800; }
  .pex__col--grp .pex__steps { padding-left: 2px; }
}
@media (max-width: 1023px) {
  .pex__col--grp {
    padding: 14px 15px; border-radius: 14px;
    background: rgba(255, 255, 255, .038); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  }
  .pex__col--grp + .pex__col--grp { margin-top: 10px; padding-top: 14px; border-top: 0; }
}

/* ── 후킹 문구 : 글줄이 답답하지 않게 자리를 조금 더 준다 */
@media (min-width: 900px) {
  .programs.is-stack .pex__hook { padding: clamp(12px, 1.45vh, 18px) clamp(16px, calc(var(--u) * 1.7), 26px); column-gap: clamp(18px, calc(var(--u) * 2), 34px); }
}

/* ==========================================================================
   02 프로그램 카드 3차 (2026-09-16)
   재 본 결과 : 카드 높이는 가장 긴 학생부 종합(743px)이 정하고, 나머지 넉 장은
   548~623px 이라 아래가 120~195px 씩 비어 있었다. 빈 자리에 '과정과 결과물 ·
   진행 순서'가 떠 있으니 두 줄기가 허공에 걸린 것처럼 보였다.
   - 두 칸을 각각 판으로 깔고, 그 판이 버튼 바로 위까지 내려오게 했다.
     빈 데가 카드의 맨바닥이 아니라 판 안쪽이 되어 짜임새가 생긴다.
   - 칸 이름(과정과 결과물 · 진행 순서)은 작고 흐린 글씨였는데, 붉은 눈금과
     흰 글씨로 올려 두 칸의 머리라는 게 바로 보이게 했다.
   - 학생부 종합의 후킹 문구는 문장마다 줄을 바꾸느라 여섯 줄이었다.
     이어 흐르게 두어(data-no-phrase) 네 줄로 줄이고, 판 높이도 낮췄다.
   ========================================================================== */
@media (min-width: 1024px) and (orientation: landscape) {
  /* 두 칸이 버튼 바로 위까지 내려온다 */
  .programs.is-stack .pex__cols { align-items: stretch; }
  .programs.is-stack .pex__col {
    padding: clamp(12px, 1.6vh, 20px) clamp(14px, calc(var(--u) * 1.4), 22px);
    border-radius: 16px; background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .065);
  }
  .programs.is-stack .pex__col--grp { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .085); }
  .programs.is-stack .pex__h {
    display: flex; align-items: center; gap: .5em;
    font-size: clamp(12.5px, .95vh, 14px); font-weight: 800; color: #fff;
  }
  .programs.is-stack .pex__h::before {
    content: ""; flex: none; width: 3px; height: 1.05em; border-radius: 2px; background: var(--red-on-noir);
  }
  .programs.is-stack .pex__h i { margin-left: auto; }
  /* 판이 버튼까지 내려오니 줄도 판 안에서 고르게 퍼진다 */
  .programs.is-stack .pex__col { display: flex; flex-direction: column; }
  .programs.is-stack .pex__works, .programs.is-stack .pex__steps { display: grid; align-content: start; }
  /* 판은 담긴 만큼만 높다. 남는 자리는 카드가 위아래로 나눠 가져 CTA 가 붕 뜨지 않는다. */
  .programs.is-stack .pstack__card { justify-content: center; }
  .programs.is-stack .pex__act { margin-top: 0; }
  /* 판 안쪽이므로 세로 줄기는 왼쪽 여백에 붙지 않게 조금 들여 쓴다 */
  .programs.is-stack .pex__hook { margin-top: clamp(10px, 1.3vh, 16px); }
  .programs.is-stack .pex__hookt { font-size: clamp(13px, 1.85vh, 16px); line-height: 1.34; }
  .programs.is-stack .pex__hookp { font-size: clamp(12px, 1.5vh, 13.5px); line-height: 1.5; }
}

/* 넘겨 보는 줄(태블릿 · 작은 노트북)도 같은 짜임 : 카드 높이는 가장 긴 카드가 정하니
   여기도 아래가 비었다. 두 칸을 판으로 깔고 버튼 바로 위까지 내려오게 한다. */
@media (min-width: 700px) {
  .programs.is-swipe .pex__cols { align-items: stretch; }
  .programs.is-swipe .pex__col {
    display: flex; flex-direction: column;
    padding: 16px 18px; border-radius: 16px;
    background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .065);
  }
  .programs.is-swipe .pex__col--grp { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .085); }
  .programs.is-swipe .pex__h {
    display: flex; align-items: center; gap: .5em;
    font-size: 13px; font-weight: 800; color: #fff;
  }
  .programs.is-swipe .pex__h::before {
    content: ""; flex: none; width: 3px; height: 1.05em; border-radius: 2px; background: var(--red-on-noir);
  }
  .programs.is-swipe .pex__h i { margin-left: auto; }
  .programs.is-swipe .pex__works, .programs.is-swipe .pex__steps { display: grid; flex: 1; align-content: space-between; }
  .programs.is-swipe .pex__works li:first-child { padding-top: 0; }
  .programs.is-swipe .pex__works li:last-child, .programs.is-swipe .pex__steps li:last-child { padding-bottom: 0; }
}

}

/* ==========================================================================
   02 프로그램 카드 4차 (2026-09-16)
   '왜 중요한가' 글을 잘라 보여 주던 건 자리를 잘못 잡은 탓이었다.
   - 띠를 왼쪽 제목 · 오른쪽 글 두 단으로 나누면 글 칸이 좁아 다섯 줄이 됐다.
     제목을 윗줄로 올리고 글은 띠 너비를 다 쓰게 해 세 줄로 줄였다. 자를 필요가 없다.
   - 글줄이 너무 길어지지 않게 읽기 폭을 76자로 묶는다.
   - 카드 속 여백을 한 번 더 고르게 다듬어 학생부 종합도 화면 안에서 끝난다.
   ========================================================================== */
.pex__hook { display: block; }
.pex__hookt { max-width: 46em; }
.pex__hookp { max-width: 76ch; }
@media (min-width: 900px) {
  .pex__hook { display: block; }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .programs.is-stack .pex__hook { padding: clamp(11px, 1.35vh, 16px) clamp(15px, calc(var(--u) * 1.5), 24px); }
  .programs.is-stack .pex__hookt { font-size: clamp(13px, 1.75vh, 15.5px); line-height: 1.34; }
  .programs.is-stack .pex__hookp { margin-top: .45em; font-size: clamp(12px, 1.45vh, 13.5px); line-height: 1.56; }
  /* 설명 글이 문장마다 줄을 바꾸지 않게(도입 문단도 마찬가지) */
  .programs.is-stack .pex__lede { line-height: 1.48; }
  .programs.is-stack .pex__col { padding: clamp(10px, 1.35vh, 17px) clamp(14px, calc(var(--u) * 1.4), 22px); }
}

/* 높이 820 이하 : 학생부 종합(가장 긴 카드)이 화면 안에서 끝나도록 사이만 조금 더 좁힌다 */
@media (min-width: 1024px) and (orientation: landscape) and (max-height: 820px) {
  .programs.is-stack .pex__cols { margin-top: 1.25vh; }
  .programs.is-stack .pex__hook { margin-top: 1vh; padding-block: 1.1vh; }
  .programs.is-stack .pex__hookp { line-height: 1.5; }
  .programs.is-stack .pex__act { padding-top: 1.5vh; }
}

/* 높이 740 이하 : 한 단계 더 */
@media (min-width: 1024px) and (orientation: landscape) and (max-height: 740px) {
  .programs.is-stack .pex__cols { margin-top: .95vh; }
  .programs.is-stack .pex__works li, .programs.is-stack .pex__steps li { padding-block: clamp(3px, .58vh, 6px); }
  .programs.is-stack .pex__facts > div { padding-block: .42vh; }
  .programs.is-stack .pex__col { padding-block: clamp(8px, 1.05vh, 13px); }
  .programs.is-stack .pex__hook { margin-top: .85vh; padding-block: .95vh; }
  .programs.is-stack .pex__act { padding-top: 1.3vh; }
}

/* ==========================================================================
   02 프로그램 카드 5차 (2026-09-16) — 재 보고 고친 것
   1) 카드 폭 : 왼쪽 목록 388px / 카드 708px 이었다. 카드가 화면의 62% 밖에 못 써서
      설명이 세 줄, 진행 순서 이름이 두 줄씩 접혔다. 목록을 줄이고 카드에 90px 를 더 준다.
   2) 과정과 결과물 줄 높이가 40 · 47 · 47 · 41 로 들쭉날쭉했다(첫 줄 · 끝 줄만 여백을 깎던 탓).
      네 줄 모두 같은 높이로 맞춘다. 줄 사이 여백은 판 안쪽 여백이 맡는다.
   3) 두 과정 판의 진행 순서 : 동그라미가 세로 줄기보다 2px 왼쪽에 찍혔다. 들여쓰기를 걷어 맞춘다.
   ========================================================================== */
@media (min-width: 1200px) and (min-height: 681px) and (orientation: landscape) {
  .programs.is-stack .pstack { grid-template-columns: minmax(0, 3.62fr) minmax(0, 8.38fr); gap: clamp(24px, calc(var(--u) * 2.9), 50px); }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .programs.is-stack .pex__works li { padding-block: clamp(5px, .82vh, 9px); }
  .programs.is-stack .pex__works li:first-child { border-top: 0; }
  .programs.is-stack .pex__col--grp .pex__steps { padding-left: 0; }
}

/* 진행 순서 동그라미와 세로 줄기가 2px 어긋나 있었다(칸 들여쓰기가 20px 인데 동그라미는 22px 기준).
   들여쓰기를 22px 로 통일해 둘의 중심을 맞춘다. 줄기도 조금 진하게. */
.programs.is-stack .pex__steps li, .programs.is-swipe .pex__steps li { padding-left: 22px; }
.pex__steps::before {
  background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 10px,
    rgba(255, 255, 255, .2) calc(100% - 10px), rgba(255, 255, 255, 0) 100%);
}

/* 줄바꿈 (2026-09-16) : 마지막 줄에 낱말 한둘만 남던 것(고아 줄)을 없앤다.
   text-wrap: balance 는 서너 줄짜리 짧은 글에서 줄 길이를 고르게 나눠 준다. 지원하지 않는 브라우저는 지금처럼 흐른다. */
.pex__lede, .pex__hookt, .pex__hookp, .pex__works b, .pex__works span, .pex__steps b { text-wrap: balance; }
.pex__name, .pstack__side .sec-p { text-wrap: balance; }

/* 낮은 창(≤780) 마무리 : 앞 규칙보다 뒤에 두어 밀도만 한 단계 더 좁힌다 */
@media (min-width: 1024px) and (orientation: landscape) and (max-height: 780px) {
  .programs.is-stack .pex__works li, .programs.is-stack .pex__steps li { padding-block: clamp(3px, .55vh, 6px); }
  .programs.is-stack .pex__facts > div { padding-block: .42vh; }
  .programs.is-stack .pex__col { padding-block: clamp(8px, 1.05vh, 13px); }
  .programs.is-stack .pex__cols { margin-top: .95vh; }
  .programs.is-stack .pex__h { margin-bottom: clamp(5px, .62vh, 8px); }
}

/* 왼쪽 열이 좁아지며 교과목 사이트 링크가 두 줄이 되고 화살표만 옆에 떨어졌다.
   글 흐름 안에 화살표를 넣어 마지막 낱말 뒤에 붙게 한다. */
@media (min-width: 1200px) and (orientation: landscape) {
  .programs.is-stack .pstack__ext { display: block; min-height: 0; line-height: 1.55; }
  .programs.is-stack .pstack__ext > span { display: inline; }
  .programs.is-stack .pstack__ext i { display: inline-grid; width: 20px; height: 20px; margin-left: 6px; vertical-align: -5px; }
}

/* ==========================================================================
   02 프로그램 카드 6차 (2026-09-16) — 재 본 값으로 고친 것
   · 카드는 가장 긴 학생부 종합에 키를 맞추느라, 나머지 넉 장은 버튼 아래가 91~106px 씩 비었다.
     카드마다 제 키를 갖게 해 버튼 바로 밑에서 카드가 끝난다.
   · 판과 판 사이가 37px 로 떠 있었다. 20px 로 좁혀 두 판이 한 덩어리로 읽히게 한다.
   · 판 아래 빈칸이 12~57px 로 제각각이었다. 줄을 판 안에서 고르게 퍼뜨려 바닥을 맞춘다.
     (남는 자리가 이제 60px 이하라 줄 사이가 벌어지지 않는다)
   ========================================================================== */
@media (min-width: 1024px) and (orientation: landscape) {
  /* 판은 담긴 만큼만 높다. 남는 자리는 카드 아래 한 곳에 모으고, 버튼줄을 바닥에 붙여 마무리한다. */
  .programs.is-stack .pstack__card { justify-content: flex-start; }
  /* 판은 남는 자리를 가져가되 40vh 까지만. 그 위로는 카드 아래 한 곳에 모인다.
     (다 가져가게 두면 넉 줄짜리 목록이 헐거워지고, 안 가져가게 두면 아래가 300px 비었다) */
  .programs.is-stack .pex__cols { flex: 1 1 auto; max-height: clamp(240px, 40vh, 400px); }
  .programs.is-stack .pex__act {
    margin-top: auto; padding-top: clamp(14px, 1.9vh, 24px);
    border-top: 1px solid rgba(255, 255, 255, .09);
  }
  .programs.is-stack .pex__cols { column-gap: clamp(11px, calc(var(--u) * 1.3), 17px); }
  .programs.is-stack .pex__cols--3 { column-gap: clamp(9px, calc(var(--u) * 1.05), 13px); }
  /* 판끼리 키가 다르면 줄을 고르게 퍼뜨려 바닥선만 맞춘다(남는 자리는 몇십 px 이라 벌어지지 않는다) */
  .programs.is-stack .pex__works, .programs.is-stack .pex__steps { flex: 1; align-content: space-between; }
  .programs.is-stack .pex__steps li { align-items: center; }
}

/* 낮은 창(≤740) : 버튼줄 위 구분선과 여백만 한 단계 더 좁힌다 */
@media (min-width: 1024px) and (orientation: landscape) and (max-height: 740px) {
  .programs.is-stack .pex__act { padding-top: clamp(10px, 1.4vh, 16px); }
  .programs.is-stack .pex__cols { max-height: 44vh; }
}


/* ── 부드러운 스크롤(Lenis) : 브라우저 자체 부드러운 스크롤과 겹치지 않게 (2026-09-21) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }


/* ------------------------------------------------------- 성능 (2026-09-21)
   - 표지가 다음 면에 다 덮이면 숨긴다(고정된 채 깔려 있어 유리 흐림 · 마스크를 계속 그렸다).
   - 덮기 시작하면 배경 방울 애니메이션을 멈춘다.
   - 사진 배경의 색 보정 필터는 뺀다(차이가 거의 없고 큰 면을 다시 그린다).
   - 글자 조각(.ch__i)은 GSAP 이 움직일 때만 레이어를 만든다. 늘 켜 두면 레이어가 수십 개 남는다.
   - Lenis 가 잠깐 멈출 때 html 에 overflow:hidden 을 걸면 전체 레이아웃을 다시 계산한다. 휠은 Lenis 가 막으므로 뺀다. */
body.past-hero #s1 { visibility: hidden; }
body.hero-moving .blob { animation-play-state: paused; }
.hero__amb { filter: none; }
.ch__i { will-change: auto; }
.lenis.lenis-stopped { overflow: visible; }

/* 멈춘 배경 방울은 레이어를 따로 들고 있을 이유가 없다 */
body.past-hero .blob { will-change: auto; }
/* 챕터 레일 : 유리 흐림(backdrop blur)은 스크롤하는 매 프레임 아래 글을 다시 흐린다. 거의 불투명한 면으로 바꾼다 */
@media (min-width: 1024px) {
  .rail { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(251, 243, 240, .95); }
  body.is-dark .rail { background: rgba(22, 21, 25, .95); }
}

/* 03 비교판 안내 모션 동안 손잡이 원도 살짝 커진다(끌 수 있다는 표시) */
@media (min-width: 1024px) { .split.is-hint .split__knob { transform: scale(1.1); } }

/* 2026-10-20 : 합격 후기 NEW(게시일부터 30일) · 게시 중인 리포트가 없을 때 (관리자 콘텐츠에서 그린다) */
.rcase__new { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; background: var(--red); font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .04em; line-height: 1.5; color: #fff; vertical-align: 3px; }
.rows__empty { padding: 28px 0; border-top: 1.5px solid var(--ink); font-size: var(--fs-md); color: var(--ink-3); }

/* 2026-10-22 대입 컨설팅 카드 : 대상 · 수시 · 정시 · 결과 네 줄. 넓은 카드에서는 네 칸, 쌓인 카드에서는 지금처럼 한 칸 */
.pex__facts--4 { grid-template-columns: minmax(0, .62fr) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.pex__facts--4 dd .nw { display: inline-block; }
.pex__ar { margin: 0 0 0 .35em; font-weight: 600; color: var(--red-on-noir); }
@media (max-width: 899px) { .pex__facts--4 { grid-template-columns: minmax(0, 1fr); } }

/* ── 02 대입 컨설팅 카드 (2026-10-22) : 수시(빨강) · 정시(파랑) 구분 + 요약 칸 줄 맞춤
   요약 칸은 '분석 방법(옅게) → 결과(굵게)' 두 줄로, 화살표는 둘째 줄 앞에 둔다(첫 줄 끝에 매달리지 않게).
   정시 파랑은 합격 실적 페이지 '정시 합격' 꼬리표(#35508F)를 어두운 면에 맞게 밝힌 색 */
:root { --jeong-on-noir: #9DB4E8; }
@media (min-width: 700px) { .pex__facts--cs { grid-template-columns: minmax(0, .62fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); } }
.pex__facts--cs dt { display: flex; align-items: center; gap: 6px; }
.pex__facts--cs .is-su dt { color: var(--red-on-noir); }
.pex__facts--cs .is-jeong dt { color: var(--jeong-on-noir); }
.pex__facts--cs .is-su dt::before, .pex__facts--cs .is-jeong dt::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pex__facts--cs dd { display: grid; gap: 2px; }
.pex__fm { font-size: 13px; font-weight: 600; color: var(--on-noir-2); }
.pex__fv { display: flex; align-items: baseline; gap: 6px; }
.pex__fv::before { content: "→"; flex: none; font-weight: 700; }
.is-su .pex__fv::before { color: var(--red-on-noir); }
.is-jeong .pex__fv::before { color: var(--jeong-on-noir); }
.pex__fl { display: block; }
.pex__h i { white-space: nowrap; }
.pex__col--grp.is-jeong .pex__h i { color: var(--jeong-on-noir); background: rgba(157, 180, 232, .16); }
.programs.is-stack .pex__col--grp.is-jeong .pex__h::before { background: var(--jeong-on-noir); }
.pex__col--grp.is-jeong .pex__steps span { color: var(--jeong-on-noir); }
.pex__col--grp.is-jeong .pex__steps li::before { border-color: var(--jeong-on-noir); }
.pex__col--grp.is-jeong .pex__steps li:first-child::before { background: var(--jeong-on-noir); }
/* rwd.css 의 #programs 단계 색(첫 단계 빨강)보다 앞서도록 아이디 두 개로 */
#programs #pg-col .pex__col--grp.is-jeong .pex__steps li:first-child span { color: var(--jeong-on-noir); }
#programs #pg-col .pex__col--grp.is-jeong .pex__steps li:first-child span::before { background: var(--jeong-on-noir); border-color: var(--jeong-on-noir); }
#programs #pg-col .pex__col--grp.is-jeong .pex__h i { color: var(--jeong-on-noir); background: rgba(157, 180, 232, .16); }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-26 : 인트로(합격 카드) 구간이 길다는 의견 → 속도만 올리지 않고 배치를 바꾼다
   · 카드 여덟 장을 왼쪽 · 오른쪽 두 줄로 엇갈려 내려보낸다(홀수 왼쪽, 짝수 오른쪽, 20vh 마다 번갈아).
     예전에는 한 장씩 한 줄로 흘러 카드 구간만 214vh, 인트로 전체 4.5화면이었다 → 카드 구간 140vh, 인트로 약 3화면.
   · 카드를 조금 작게(가운데 제목이 덜 가린다), 처음 제목만 보이는 박자 30 → 18vh, 끝의 빈 구간 170 → 115vh.
   · 아래 가운데(두 줄 카드가 지나가지 않는 자리)에 '합격 소식 03 / 08' 진행 표시 + 표지로 바로 가는 '건너뛰기'.
   폰 · 태블릿 · 낮은 화면 배치는 rwd.css 그대로(장 수를 이미 줄여 둠).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (min-height: 560px) {
  #s0 .intro__reviews { --card: clamp(220px, min(18.5vw, 31vh), 300px); --lead: 18vh; --last: 140vh; }
  #s0 .kc:nth-child(1) { --x: 5%;  --t: 0vh; }
  #s0 .kc:nth-child(2) { --x: 68%; --t: 20vh; }
  #s0 .kc:nth-child(3) { --x: 12%; --t: 40vh; }
  #s0 .kc:nth-child(4) { --x: 61%; --t: 60vh; }
  #s0 .kc:nth-child(5) { --x: 3%;  --t: 80vh; }
  #s0 .kc:nth-child(6) { --x: 70%; --t: 100vh; }
  #s0 .kc:nth-child(7) { --x: 10%; --t: 120vh; }
  #s0 .kc:nth-child(8) { --x: 63%; --t: 140vh; }
  .intro-fx #s0 .intro__tail { height: 115vh; }
}

/* 건너뛰기(skip) : 스크립트가 켜질 때만(모션 축소면 숨김). 'scroll' 안내와 같은 말투로 작고 옅게 */
#s0 .intro__ctl { display: none; }
.intro-fx #s0 .intro__ctl {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: max(22px, 4.6vh); margin-inline: auto; width: max-content;
  display: block; visibility: hidden; opacity: 0;
}
#s0 .intro__skip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 13px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(246, 244, 245, .16);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(246, 244, 245, .55); text-decoration: none;
  transition: color .25s ease, box-shadow .25s ease, background .25s ease;
}
#s0 .intro__skip svg { width: 13px; height: 13px; transition: transform .25s ease; }
@media (hover: hover) {
  #s0 .intro__skip:hover { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(246, 244, 245, .34); }
  #s0 .intro__skip:hover svg { transform: translateY(2px); }
}
#s0 .intro__skip:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; }
@media (max-width: 599px), (pointer: coarse) { #s0 .intro__skip { height: 32px; } }