@charset "utf-8";
/* ============================================================================
   대치플랜 · 반응형 v2 (2026-09-16) — 모든 페이지에서 마지막에 읽는다
   기준 문서 : 반응형_기준.md (v2 절)

   화면 단계
     P  폰 세로        ≤599
     T  태블릿 · 폴드   600–1023 (세로 · 가로 모두. 높이 560 이상)
     L  낮은 가로 화면  높이 ≤559 (폰 가로)
     D  데스크톱       ≥1024 (핀 장면은 높이 560+)
     W  와이드         ≥1921

   원칙
   1. 폰 · 태블릿은 "읽는 페이지"다. 한 화면 장면(100svh 최소 높이)을 풀고, 섹션은 내용만큼만 높다.
   2. 같은 종류 카드가 네 장 넘게 세로로 쌓이면 가로로 넘기는 줄(스냅 + 옆 카드 살짝)이나 두 칸 격자로 바꾼다.
   3. 제목은 폰에서 두 줄, 태블릿에서 두 줄을 넘기지 않게 크기를 잡는다.
   4. 등장 모션은 화면에 들어오기 직전에 켜서 빈 화면을 남기지 않는다.
   ========================================================================== */

/* ── 1. 활자 단계 : 폰 · 태블릿
   v1 은 폰 제목(4xl)이 36px, 태블릿이 47px 이라 한 문장 제목이 서너 줄로 접혔다.
   폰은 폭(vw)에 비례하되 좁은 쪽 한계를 두고, 태블릿은 폰과 데스크톱 사이 값으로 따로 잡는다. */
@media (max-width: 599px) {
  :root {
    --fs-xl: clamp(17.5px, 4.6vw, 19px);
    --fs-2xl: clamp(19px, 5vw, 21px);
    --fs-3xl: clamp(21px, 5.7vw, 24px);
    --fs-4xl: clamp(25px, 6.9vw, 29px);
    --fs-5xl: clamp(29px, 8.2vw, 34px);
    --fs-6xl: clamp(34px, 10vw, 42px);
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  :root {
    --fs-2xl: clamp(21px, 2.8vw, 25px);
    --fs-3xl: clamp(24px, 3.4vw, 30px);
    --fs-4xl: clamp(31px, 4.7vw, 40px);
    --fs-5xl: clamp(36px, 5.8vw, 50px);
    --fs-6xl: clamp(46px, 7.4vw, 66px);
  }
}

/* ── 2. 섹션 높이 · 여백 : 폰 · 태블릿은 내용만큼
   메인 챕터는 데스크톱의 '한 화면 한 장면' 최소 높이(100svh)를 폰에서도 지켜 짧은 섹션 아래가 비었다. */
@media (max-width: 1023px) {
  .page[data-chapter], .page[data-snap]:not(.hero) { min-height: 0; }
}
@media (max-width: 599px) {
  .page[data-chapter] { padding-top: calc(var(--top-h) + 28px); padding-bottom: 56px; }
  .ps { padding-top: 60px; padding-bottom: 60px; }
  .ps__head { margin-bottom: 26px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .page[data-chapter] { padding-top: calc(var(--top-h) + 44px); padding-bottom: 72px; }
  .ps { padding-top: 80px; padding-bottom: 80px; }
  .ps__head { margin-bottom: 36px; }
}

/* ── 3. 등장 모션 : 짧고 가깝게
   떠오르는 거리 26px · 0.8~0.95초가 빠르게 넘기는 폰에서 빈 면으로 보였다. 거리 14px · 0.55초. 표지(s1) 카드도 0.6초. */
html.js [data-reveal] { transform: translate3d(0, 14px, 0); transition: opacity .55s var(--ease) var(--d, 0ms), transform .65s var(--ease) var(--d, 0ms); }
.js .hero.is-on .hero__card { transition: opacity .6s var(--ease), transform .7s var(--ease); }

/* ══════════════════════════════════════════════ 메인 ══════════ */

/* ── 01 학년 여정 : 폰 · 태블릿 · 낮은 창 = 옆으로 넘기는 카드 줄(main.js .is-swipe)
   세로로 여덟 칸(폰 3.4화면)을 쌓던 것을, 학년 탭(가로 스크롤 알약) + 넘김 장치 + 카드 줄로 바꿨다.
   카드 폭 : 폰 84% (옆 카드가 살짝 보여 넘길 수 있다는 것을 알린다) · 태블릿 두 장 반 안쪽. */
.journey.is-swipe .journey__head { gap: 16px; }
.journey.is-swipe .journey__head > .stp { order: 3; }
.journey.is-swipe .jmini {
  order: 2; position: relative; display: flex; gap: 6px; padding: 2px var(--col) 4px; margin-inline: calc(var(--col) * -1);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.journey.is-swipe .jmini::-webkit-scrollbar { display: none; }
.journey.is-swipe .jmini__line { display: none; }
.journey.is-swipe .jmini__g {
  flex: none; display: inline-flex; align-items: baseline; gap: .15em; min-height: 40px; padding: 0 15px; align-items: center;
  border: 0; border-radius: 999px; cursor: pointer; font-family: var(--f); font-size: var(--fs-sm); font-weight: 800; color: var(--ink-2);
  background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .12);
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.journey.is-swipe .jmini__g small { font-size: .8em; font-weight: 700; margin-left: .15em; }
.journey.is-swipe .jmini__g::after { content: none; }
.journey.is-swipe .jmini__g.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.journey.is-swipe .journey__in { gap: 18px; }
.journey.is-swipe .jtrack {
  margin-inline: calc(var(--col) * -1); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--col); overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.journey.is-swipe .jtrack::-webkit-scrollbar { display: none; }
.journey.is-swipe .jtrack__list { display: flex; align-items: stretch; gap: 12px; width: max-content; padding: 4px var(--col) 10px; }
.journey.is-swipe .jpanel {
  flex: none; width: min(84vw, 400px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px 8px; border: 0; border-radius: 20px;
  background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 16px 34px -26px rgba(80, 30, 30, .4);
}
.journey.is-swipe .jpanel::before { content: none; }
.journey.is-swipe .jpanel.is-on { box-shadow: inset 0 3px 0 var(--red), inset 0 0 0 1px rgba(23, 21, 26, .07), 0 16px 34px -26px rgba(80, 30, 30, .4); }
.journey.is-swipe .jpanel__g { font-size: clamp(34px, 9vw, 46px); color: rgba(23, 21, 26, .28); }
.journey.is-swipe .jpanel.is-on .jpanel__g { color: var(--red); }
.journey.is-swipe .jpanel__t { max-width: none; font-size: var(--fs-sm); line-height: 1.66; }
.journey.is-swipe .jpanel__p { margin-top: auto; border-bottom: 0; }
.journey.is-swipe .jpanel__p::before { content: "지금 필요한 프로그램"; display: block; padding: 4px 0 6px; font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); }
/* 프로그램 줄(모든 화면) : 이름 한 줄, 회차 · 대상은 그 아래 작은 글씨.
   한 줄에 이름 | 회차 | 화살표를 나란히 두면 좁은 칸(폰 · 1024~1366 데스크톱)에서 이름이 서너 줄로 무너졌다. */
.journey .jp { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; padding-block: 9px; }
.journey .jp b { grid-column: 1; line-height: 1.35; word-break: keep-all; }
.journey .jp span { grid-column: 1; grid-row: 2; white-space: normal; word-break: keep-all; font-size: var(--fs-2xs); line-height: 1.4; }
.journey .jp .go { grid-column: 2; grid-row: 1 / 3; }
.journey.is-swipe .jp b { font-size: var(--fs-sm); }
@media (min-width: 600px) {
  .journey.is-swipe .jpanel { width: calc((100vw - var(--col) * 2 - 24px) / 2.35); min-width: 290px; }
  .journey.is-swipe .jmini { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.journey.is-swipe .jpanel__p { align-self: stretch; width: 100%; }

/* ── 02 프로그램 : 폰 · 태블릿 = 옆으로 넘기는 카드 줄(main.js .is-swipe, 저절로 넘기지 않음)
   목록(.pstack__idx)은 제목 아래 가로 알약 탭, 그 아래 넘김 장치, 카드 줄. 카드 폭 폰 88% · 태블릿 80%. */
.programs.is-swipe .pstack { display: flex; flex-direction: column; gap: 18px; }
.programs.is-swipe .pstack__side { display: flex; flex-direction: column; gap: 14px; position: static; }
.programs.is-swipe .pstack__ext { order: 2; margin-top: -4px; }
.programs.is-swipe .pstack__idx {
  order: 3; display: flex; gap: 6px; border: 0; margin-inline: calc(var(--col) * -1); padding: 2px var(--col) 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.programs.is-swipe .pstack__idx::-webkit-scrollbar { display: none; }
.programs.is-swipe .pstack__idx li { flex: none; }
.programs.is-swipe .pstack__ia {
  position: relative; display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: 0 15px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--on-noir-2); white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease);
}
.programs.is-swipe .pstack__ia::before { content: none; }
.programs.is-swipe .pstack__ia b { font-size: var(--fs-sm); font-weight: 700; }
.programs.is-swipe .pstack__ia span { display: none; }
.programs.is-swipe .pstack__ia.is-on { background: #fff; color: var(--noir); box-shadow: none; }
.programs.is-swipe .pstack__side > .stp { order: 4; }
.stp--manual .stp__play, .stp--manual .stp__time { display: none; }
.programs.is-swipe .pstack__stage {
  display: flex; gap: 12px; margin-inline: calc(var(--col) * -1); padding: 4px var(--col) 12px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--col);
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.programs.is-swipe .pstack__stage::-webkit-scrollbar { display: none; }
.programs.is-swipe .pstack__card { flex: none; width: min(88vw, 640px); scroll-snap-align: start; padding: 22px 20px 20px; transform: none !important; }
.programs.is-swipe .pstack__card + .pstack__card { transform: none !important; }
.programs.is-swipe .pstack__shade { display: none; }
.programs.is-swipe .pstack__of { display: none; }
.programs.is-swipe .pex__name { font-size: var(--fs-2xl); }
.programs.is-swipe .pex__lede { font-size: var(--fs-sm); line-height: 1.62; }
.programs.is-swipe .pex__works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.programs.is-swipe .pex__works li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.programs.is-swipe .pex__works li:nth-child(2) { border-top: 0; padding-top: 2px; }
.programs.is-swipe .pex__wi { width: 32px; height: 32px; border-radius: 9px; }
.programs.is-swipe .pex__works b { font-size: var(--fs-xs); line-height: 1.3; word-break: keep-all; }
.programs.is-swipe .pex__works span { font-size: 12px; line-height: 1.35; word-break: keep-all; }
.programs.is-swipe .pex__steps li { padding-block: 2px; }
.programs.is-swipe .pex__steps b { font-size: var(--fs-xs); }
.programs.is-swipe .pex__act { gap: 8px 18px; }
.programs.is-swipe .pex__gon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pex__facts dd, .pex__name, .pex__lede { word-break: keep-all; }
@media (min-width: 600px) {
  .programs.is-swipe .pstack__card { width: min(80vw, 680px); padding: 28px 30px 26px; }
  .programs.is-swipe .pstack__idx { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* ── 00 인트로 : 폰 · 태블릿에서 길이를 줄인다
   폰은 카드 여덟 장이 3화면에 걸쳐 흘러 인트로만 6.3화면이었다. 폰 네 장 · 태블릿 여섯 장, 간격도 당긴다.
   카드가 제목을 지나가는 시간이 짧아져 제목이 가려진 채 오래 머물지 않는다. 데스크톱(1024+) 구성은 그대로. */
@media (max-width: 599px) {
  #s0 .intro__reviews { --card: min(58vw, 240px); --lead: 22vh; --last: 108vh; }
  #s0 .kc:nth-child(n+5) { display: none; }
  #s0 .kc:nth-child(1) { --x: 5%;  --t: 0vh; }
  #s0 .kc:nth-child(2) { --x: 38%; --t: 36vh; }
  #s0 .kc:nth-child(3) { --x: 8%;  --t: 72vh; }
  #s0 .kc:nth-child(4) { --x: 36%; --t: 108vh; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  #s0 .intro__reviews { --lead: 24vh; --last: 150vh; }
  #s0 .kc:nth-child(n+7) { display: none; }
  #s0 .kc:nth-child(1) { --x: 6%;  --t: 0vh; }
  #s0 .kc:nth-child(2) { --x: 58%; --t: 26vh; }
  #s0 .kc:nth-child(3) { --x: 28%; --t: 58vh; }
  #s0 .kc:nth-child(4) { --x: 64%; --t: 90vh; }
  #s0 .kc:nth-child(5) { --x: 8%;  --t: 118vh; }
  #s0 .kc:nth-child(6) { --x: 50%; --t: 150vh; }
}
@media (max-height: 559px) and (min-width: 600px) {
  #s0 .intro__reviews { --last: 150vh; }
  #s0 .kc:nth-child(n+7) { display: none; }
}
@media (max-width: 1023px) { .intro-fx #s0 .intro__tail { height: 125vh; } }

/* ── 05 합격 사례 : 폰은 사례 카드 네 장을 옆으로 넘기는 줄(스냅, 옆 카드 살짝) */
@media (max-width: 599px) {
  .results .rcases {
    display: flex; gap: 10px; margin-inline: calc(var(--col) * -1); padding: 2px var(--col) 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--col); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .results .rcases::-webkit-scrollbar { display: none; }
  .results .rcase { flex: none; width: 84vw; scroll-snap-align: start; }
}

/* ── 단계 트랙(메인 04 · 상세 02) : 폰은 번호를 제목 왼쪽 작은 칸으로, 방식 · 결과물 표는 촘촘하게
   단계당 약 300px 이던 것을 190px 안팎으로. 한 줄에 번호 | 시점 · 제목, 그 아래 설명과 표. */
@media (max-width: 599px) {
  :root .track:not(.is-pinned) .track__list { grid-template-rows: none; }
  :root .track:not(.is-pinned) .track__step {
    grid-row: auto; grid-template-rows: none; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; row-gap: 4px;
    padding: 16px 0 18px 22px;
  }
  :root .track:not(.is-pinned) .track__step::before { top: 22px; }
  :root .track:not(.is-pinned) .track__n { grid-column: 1; grid-row: 1 / 3; align-self: start; font-size: 26px; line-height: 1.05; padding-top: 1px; }
  :root .track:not(.is-pinned) .track__when { grid-column: 2; grid-row: 1; font-size: var(--fs-2xs); }
  :root .track:not(.is-pinned) .track__t { grid-column: 2; grid-row: 2; font-size: var(--fs-lg); line-height: 1.3; }
  :root .track:not(.is-pinned) .track__d { grid-column: 1 / -1; font-size: var(--fs-sm); line-height: 1.6; margin-top: 2px; }
  :root .track:not(.is-pinned) .track__meta { grid-column: 1 / -1; margin-top: 6px; }
  :root .track:not(.is-pinned) .track__meta > div { padding: 7px 2px; }
}

/* ══════════════════════════════════════════════ 입시연구소 · 합격 실적 ══════════ */

/* ── 입시연구소 목록 : 폰 두 칸(23편이 한 칸씩 11화면이던 것). 표지 4:3 · 소개 한 줄(hook)과 '읽기' 줄은 숨기고 카드 전체가 링크 */
@media (max-width: 599px) {
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rc__a { border-radius: 16px; }
  .rc__cover { aspect-ratio: 4 / 3; }
  .rc__kind { left: 10px; top: 9px; font-size: 11.5px; font-size: max(11.5px, .78rem); padding: .22em .6em; }
  .rc__name { left: 11px; bottom: 9px; font-size: clamp(19px, 5.4vw, 23px); }
  .rc__word { font-size: 56px; }
  .rc__embs--3, .rc__embs--4 { display: none; }
  .rc__body { padding: 10px 11px 13px; }
  .rc__meta { gap: 6px; font-size: 12px; flex-wrap: wrap; }
  .rc__meta span::before { margin-right: 6px; }
  .rc__t { margin-top: 4px; font-size: 14.5px; line-height: 1.42; }
  .rc__hook, .rc__go { display: none; }
}
/* 표지 워터마크 낱말 : 표지 폭보다 길면 잘린 조각이 제목과 겹쳐 두 번 읽혔다 */
.rc__cover { container-type: inline-size; }
.rc__word { font-size: min(var(--fs-6xl), 26cqi); max-width: 100%; overflow: hidden; }
/* 필터 알약 줄 : 폰은 한 줄 가로 스크롤 */
@media (max-width: 599px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--col) * -1); padding: 2px var(--col) 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips > * { flex: none; }
}
/* 짧은 머리 면(입시연구소 · 합격 실적) : 폰 · 태블릿은 최소 높이를 풀어 제목 위가 비지 않게 */
@media (max-width: 1023px) {
  .ps-hero--short { min-height: 0; padding-top: calc(var(--top-h) + 56px); }
}

/* ── 합격 실적 : 카톡 후기 · 합격 사례 카드
   폰 · 태블릿은 카톡 후기를 옆으로 넘기는 줄(폰 한 칸 8장 3화면), 합격 사례는 폰에서 옆으로 넘기는 줄. 1024~1199 카톡은 두 칸. */
@media (max-width: 1023px) {
  .ktc-grid {
    display: flex; gap: 12px; margin-inline: calc(var(--col) * -1); padding: 4px var(--col) 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--col); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ktc-grid::-webkit-scrollbar { display: none; }
  .ktc-grid > * { flex: none; width: min(80vw, 340px); scroll-snap-align: start; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .ktc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .pcs__grid {
    display: flex; gap: 12px; margin-inline: calc(var(--col) * -1); padding: 4px var(--col) 12px; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--col); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pcs__grid::-webkit-scrollbar { display: none; }
  .pcs__grid > * { flex: none; width: 84vw; scroll-snap-align: start; }
  .nrv__q .nrv__lead { font-size: var(--fs-lg); line-height: 1.6; }
}
@media (min-width: 700px) and (max-width: 1023px) { .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rc__hook { display: none; } }

/* ══════════════════════════════════════════════ 프로그램 상세 ══════════ */
/* 머리 면 전화 · 카톡 버튼 : 폰은 두 칸 한 줄(세로로 64px 두 개가 쌓였다) */
@media (max-width: 599px) {
  .ps-hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ps-hero__cta .btn { min-height: 52px; padding-inline: 10px; justify-content: center; font-size: var(--fs-sm); }
}
/* 01 구성 네 항목 : 폰은 아이콘을 제목 왼쪽 44px 로, 결과물은 상자 없이 한 줄 */
@media (max-width: 599px) {
  .ps-what .work { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 18px 0; }
  .ps-what .work__icw { grid-row: 1; grid-column: 1; width: 52px; margin: -4px 0 0 -6px; }
  .ps-what .work__t { grid-row: 1; grid-column: 2; margin-top: 0; align-self: center; font-size: var(--fs-lg); }
  .ps-what .work__d { grid-column: 1 / -1; margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.62; }
  .ps-what .work__get { grid-column: 1 / -1; margin-top: 10px; padding: 0; background: none; box-shadow: none; font-size: var(--fs-sm); }
}
/* 폰 : 따라다니는 상담 바가 푸터 마지막 줄을 가리지 않게 */
@media (max-width: 767px) { .foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* ══════════════════════════════════════════════ 학원소개 ══════════ */
/* 캠퍼스 목록 : 폰은 줄 간격을 줄이고(한 줄 130px → 100px 안팎), 태블릿은 지역마다 두 칸 카드 */
.ps .cg__h { white-space: nowrap; }
@media (max-width: 599px) {
  .cg-wrap { gap: 22px; margin-top: 36px; }
  .cr { gap: 2px 10px; min-height: 0; padding: 13px 16px; }
  .cr__no { font-size: 12px; }
  .cr__adr { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.45; }
  .cr__tel { font-size: var(--fs-sm); }
  .cr__map { min-height: 36px; padding: 0 12px 0 10px; font-size: 13px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .cg__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg__list .cr + .cr { border-top: 0; }
  .cg__list .cr { border-bottom: 1px solid rgba(23, 21, 26, .07); }
  .cg__list .cr:nth-child(odd) { border-right: 1px solid rgba(23, 21, 26, .07); }
  .cg__list .cr:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}
/* 인사말 : 폰 사진 240px, 태블릿은 사진 | 제목 두 칸 */
@media (max-width: 599px) {
  .ab-hello__photo { max-width: 240px; }
  .ab-hello__text p { font-size: var(--fs-md); line-height: 1.8; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .ab-hello__grid { grid-template-columns: minmax(200px, 3fr) minmax(0, 5fr); gap: 36px; }
  .ab-hello__photo { position: sticky; max-width: none; }
}

/* ── 따라다니는 상담 버튼 : 태블릿(768~1023)은 글자 없는 원 두 개를 세로로. 알약 두 개(폭 240px)가 본문 오른쪽 줄을 가렸다.
   이름은 읽기 도구용으로 남긴다(.dock__t). 폰(≤767)은 전폭 바, 데스크톱은 알약 그대로. */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 501px) {
  .dock { grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .dock__b { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .dock__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dock__ic { width: 21px; height: 21px; }
}

/* ── 세로로 긴 큰 태블릿(iPad Pro 세로 1024×1366 등, 폭 1024+ · 세로 방향) : 핀 장면이 꺼지고 흐르는 페이지가 된다.
   챕터 최소 높이(100svh = 1366px)가 짧은 섹션 아래를 크게 비웠다. 프로그램 카드는 넘김 줄(main.js). */
@media (min-width: 1024px) and (orientation: portrait) {
  .page[data-chapter], .page[data-snap]:not(.hero) { min-height: 0; }
  .page[data-chapter] { padding-top: calc(var(--head-off) + 48px); padding-bottom: 88px; }
  .programs.is-swipe .pstack { display: flex; }
  .programs.is-swipe .pstack__card { width: min(78vw, 820px); }
}

/* ── 리포트 표 : 폰은 줄마다 카드(첫 칸 = 제목, 나머지 칸은 머리글 이름표 + 값). 350px 에 3열을 넣어 칸마다 세 줄로 접혔다 */
@media (max-width: 599px) {
  .rp-table { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .rp-table table, .rp-table tbody, .rp-table tr, .rp-table th, .rp-table td { display: block; width: auto; }
  .rp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rp-table tbody { display: grid; gap: 8px; }
  .rp-table tr { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08); overflow: hidden; }
  .rp-table tbody th { width: auto; min-width: 0; padding: 11px 14px; background: color-mix(in srgb, var(--uc, #17161A) 8%, #fff); font-size: var(--fs-sm); }
  .rp-table td { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); column-gap: 12px; padding: 9px 14px; font-size: var(--fs-sm); line-height: 1.55; }
  .rp-table td + td { border-top: 1px solid rgba(23, 21, 26, .06); }
  .rp-table td::before { content: attr(data-k); font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 1px; }
}

/* ══════════════════════════════════════════════ 2차 검증 뒤 보정 (2026-09-16) ══════════ */
/* 데스크톱 세 칸 카드(낮은 창) : 버튼 글자가 네 줄로 무너졌다. 프로그램 이름은 읽기 도구용, '자세히 보기'만 한 줄 */
@media (min-width: 1024px) and (max-height: 680px) {
  .programs.is-stack .pex__gon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pex__go { white-space: nowrap; }
.next__t, .rc__t, .pc__h, .dcard__t { word-break: keep-all; }

/* 프로그램 알약 탭 : 태블릿도 한 줄 가로 스크롤(820 에서 마지막 탭만 둘째 줄로 떨어졌다) */
@media (min-width: 600px) {
  .programs.is-swipe .pstack__idx { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--col) * -1); padding-inline: var(--col); }
}

/* 단계 트랙 두 칸(태블릿) : 홀수 개면 마지막 단계가 한 칸에 혼자 남아 오른쪽이 비었다 → 두 칸 폭 */
@media (min-width: 600px) and (max-width: 1023px) {
  :root .track:not(.is-pinned) .track__step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :root .track:not(.is-pinned) .track__step:last-child:nth-child(odd) .track__d,
  :root .track:not(.is-pinned) .track__step:last-child:nth-child(odd) .track__meta { max-width: 560px; }
}

/* 폰 가로(높이 ≤500) : 상담 버튼 원 두 개를 세로 대신 가로로, 40px. 인트로 카드는 화면 높이의 절반 이하 */
@media (max-height: 500px) and (min-width: 568px) {
  .dock { grid-auto-flow: column; gap: 8px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .dock__b { width: 40px; height: 40px; }
  .dock__ic { width: 17px; height: 17px; }
}
@media (min-width: 600px) and (max-height: 559px) {
  #s0 .intro__reviews { --card: clamp(150px, 40vh, 190px); }
}

/* 세로로 긴 큰 태블릿 : 표지는 원장 이름 · 서명을 제목 묶음 바로 아래로(가운데 600px 빈 칸), 합격 사례는 설명 위 · 카드 아래 한 줄 */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: portrait) and (min-height: 1000px) {
  #s1 .hero__who { align-self: start; margin-top: calc(var(--u) * 5); }
}
@media (min-width: 1024px) and (orientation: portrait) {
  #results .results__in { grid-template-columns: minmax(0, 1fr); }
}

/* 학원소개 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cr { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) max-content auto; column-gap: 16px; }
}
@media (max-width: 599px) {
  .cmap2__map { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .ab-subjects:not(.ab-subjects--5) { grid-template-columns: minmax(0, 1fr); }
  .ab-subjects:not(.ab-subjects--5) li { display: grid; grid-template-columns: 9em minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .ab-subjects:not(.ab-subjects--5) li > * { grid-column: 2; }
  .ab-subjects:not(.ab-subjects--5) li > .ab-subj__en, .ab-subjects:not(.ab-subjects--5) li > h3 { grid-column: 1; }
  .cg__list .cr { align-content: start; align-items: start; }
}

/* 합격 실적 */
.ktc-grid { align-items: stretch; }
@media (max-width: 1023px) { .ktc-grid > .ktc { height: auto; } }
@media (max-width: 599px) { .nrv__card { padding: 26px 20px; } }
.pc__facts dd { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) { .pcs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 입시연구소 : 짧은 머리 면은 데스크톱에서도 최소 높이 대신 여백으로 */
@media (min-width: 1024px) {
  .ps-hero--short { min-height: 0; padding-top: calc(var(--head-off) + 72px); padding-bottom: 64px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .rc__name { font-size: min(32px, 12cqi); right: 14px; }
}

/* 상세 머리 목차 칩 : 태블릿은 두 줄로 접어 07 이 잘리지 않게 */
@media (min-width: 600px) and (max-width: 1023px) {
  .htoc__list { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
/* 넘김 줄은 부모 폭 안에서만 스크롤한다(세로 큰 태블릿에서 데스크톱 격자 규칙과 섞여 줄 전체 폭으로 늘어났다) */
.programs.is-swipe .pstack { align-items: stretch; }
.programs.is-swipe .pstack__side, .programs.is-swipe .pstack__stage { min-width: 0; max-width: calc(100vw - var(--gut) * 0); }
.programs.is-swipe .pstack__stage { width: auto; }
.journey.is-swipe .journey__in { display: flex; flex-direction: column; align-items: stretch; }
.journey.is-swipe .jtrack { min-width: 0; width: auto; height: auto; }

/* 고입 판단 기준 표(고입 컨설팅) : 폰은 기준 이름 | 점 세 칸을 한 줄에, 설명(small)은 그 아래 표 전체 폭으로(설명 칸 130px 에서 낱말 하나씩 떨어졌다) */
@media (max-width: 599px) {
  .hr__tr:not(.hr__tr--h) { grid-template-columns: minmax(0, 1fr) repeat(3, 46px); row-gap: 6px; }
  .hr__tr:not(.hr__tr--h) .hr__k { display: contents; }
  .hr__tr:not(.hr__tr--h) .hr__k small { grid-column: 1 / -1; grid-row: 2; }
}

/* 문구 정비 뒤 줄 수 보정 : 다음 과정 제목(1024~1439 반 칸)과 인사말 제목(태블릿 사진 옆 칸)이 세 줄로 접혔다 */
@media (min-width: 1024px) and (max-width: 1439px) { .next__h { font-size: clamp(28px, 2.6vw, 40px); } }
@media (min-width: 600px) and (max-width: 1023px) { .ab-hello__h { font-size: clamp(22px, 3.3vw, 28px); } }

/* 표지 소개 문구 (2026-09-16 문구 교체) : 한 줄이 길어져 오른쪽 인물 사진 아래로 들어갔다.
   사진 앞에서 끊기도록 폭을 묶는다(문장은 .l 묶음 단위로 두 줄이 된다). */
#s1 .hero__sub { max-width: min(100%, 34em); }

/* 02 프로그램 카드 · 두 과정(자기소개서/면접 · 수시/정시) : 태블릿은 과정과 결과물을 위에 한 줄로, 두 과정을 그 아래 나란히 */
@media (min-width: 700px) and (max-width: 1023px) {
  .pex__cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .pex__cols--3 > .pex__col:first-child { grid-column: 1 / -1; }
  .pex__cols--3 .pex__col--grp { margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* 04 관리 과정 : 마지막 단계의 방식 · 결과물 줄이 떠 있는 상담 버튼에 가리던 것 (2026-09-16)
   단계 내용이 길어져 아래로 더 내려온다. 창이 낮을수록 아래를 더 비운다. */
@media (min-width: 1024px) and (max-height: 960px) {
  .process.has-pin-track { padding-bottom: 76px; }
  .process .track.is-pinned .track__n { font-size: clamp(30px, 5.4vh, 52px); }
  .process .track.is-pinned .track__t { font-size: clamp(17px, 2.6vh, 24px); }
  .process .track.is-pinned .track__d { font-size: clamp(12.5px, 1.75vh, 15px); line-height: 1.5; }
  .process .track.is-pinned .track__step { gap: .4vh; }
  :root .process .track.is-pinned .track__meta { margin-top: .8vh; }
  :root .process .track.is-pinned .track__meta > div { padding: .5vh 2px; }
  .process.has-pin-track .process__in { gap: 1.8vh; }
  .process.has-pin-track .sec-p { margin-top: .4vh; }
  :root .process .track.is-pinned .track__meta dd { font-size: clamp(12.5px, 1.7vh, 15px); }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .process .track.is-pinned .track__d { line-height: 1.45; }
  :root .process .track.is-pinned .track__meta { margin-top: .5vh; }
  :root .process .track.is-pinned .track__meta > div { padding: .4vh 2px; }
}

/* 02 프로그램 넘겨 보는 줄 (2026-09-16) : 700px 부터는 두 칸이 판이 되어 자리가 생겼다.
   '과정과 결과물'을 두 칸으로 접던 것을 한 칸으로 펴서 이름이 낱말째 끊기지 않게 한다. */
@media (min-width: 700px) {
  .programs.is-swipe .pex__works { grid-template-columns: minmax(0, 1fr); }
  .programs.is-swipe .pex__works li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
  .programs.is-swipe .pex__works li:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 7px; }
  .programs.is-swipe .pex__works li:first-child { border-top: 0; padding-top: 0; }
  .programs.is-swipe .pex__works li:last-child { padding-bottom: 0; }
  .programs.is-swipe .pex__works b { font-size: var(--fs-sm); }
  .programs.is-swipe .pex__works span { font-size: var(--fs-xs); }
}

/* 넘겨 보는 줄 (2026-09-16) : 카드마다 담긴 양이 달라 가장 긴 카드에 키를 맞추면
   짧은 카드는 아래가 크게 비었다. 한 번에 한 장씩 보는 줄이라 키를 맞출 이유가 없다. */
.programs.is-swipe .pstack__stage { align-items: flex-start; }

/* ══════════════════════════════════════════════════════════════════════════
   입시연구소 반응형 다시 잡기 (2026-09-17)
   재 본 결과 :
   - 칸 수 규칙이 세 파일에 흩어져 600~639px 에서 한 칸이 되었다(28장이 한 줄씩, 문서 15,690px).
   - 1280 이상에서도 세 칸이라 1920 에서는 카드 하나가 500px, 표지가 310px 로 부풀었다.
   - 고입 표지를 16:7 로 낮춰 둔 탓에 태블릿(3칸)에서 갈래 표지 · 학교 이름 · 아이콘이 서로 닿았다.
   칸 수는 여기 한 곳에서 정한다(이 파일이 마지막에 읽힌다).
     ~ 479   두 칸(폰)            480 ~ 699  두 칸
     700 ~ 1199  세 칸            1200 ~     고입 다섯 칸 · 대입 네 칸
   ══════════════════════════════════════════════════════════════════════════ */
.rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .rc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 480px) and (max-width: 699px) { .rc-grid { gap: 14px; } }

/* 넓은 화면 네 칸 : 카드가 좁아지니 표지 글자 · 본문을 한 단계 줄인다 */
@media (min-width: 1200px) {
  .rc-grid .rc__name { font-size: clamp(24px, calc(var(--u) * 1.95), 32px); }
  .rc-grid .rc__body { padding: 16px 18px 18px; }
  .rc-grid .rc__t { font-size: clamp(15.5px, calc(var(--u) * 1.05), 17.5px); }
  .rc-grid .rc__hook { font-size: 13.5px; }
}

/* 고입 리포트 표지 : 대입 카드(엠블럼이 든 높은 표지)와 한눈에 구별되게 낮은 띠 표지를 유지한다.
   세 칸(태블릿)에서는 띠가 너무 낮아 갈래 · 이름 · 아이콘이 닿았으니 조금만 높인다. 아이콘은 오른쪽 위. */
.rc--soon .rc__cover { aspect-ratio: 16 / 10; }
.rc--soon .rc__embs { top: 22%; right: 8%; height: 40%; width: auto; translate: none; }
.rc--soon .rc__name { right: 14px; }
/* 600 ~ 699 는 대입 카드가 16:10 이라 고입도 같은 비율. 폰(~599)만 두 카드 모두 4:3 */
@media (max-width: 599px) {
  .rc--soon .rc__cover { aspect-ratio: 4 / 3; }
  .rc--soon .rc__embs { top: 30%; right: 8%; height: 34%; }
  .rc--soon .rc__name { font-size: clamp(19px, 5.4vw, 24px); }
}

/* 제목 줄바꿈 : 끝줄에 낱말 하나만 남지 않게 */
.rc__t, .rc__hook, .rc-sec .sec-p, .rc-note { text-wrap: pretty; }
.rc--soon .rc__t { text-wrap: balance; }

/* 폰 거르기 줄 : 가로로 밀리는 줄이라 오른쪽 끝을 흐리게 해 더 있다는 것을 보인다 */
@media (max-width: 599px) {
  .rc-sec .chips {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
    padding-right: 44px;
  }
}

/* 태블릿 · 폰 : 구간 머리 붉은 기둥이 제목 크기에 비해 굵어 보이지 않게 */
@media (max-width: 699px) {
  .rc-sec .ps__head { padding-left: 13px; }
  .rc-sec .ps__head::before { width: 2.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   입시연구소 두 구간 통일 (2026-09-17 · 2차)
   - 카드 : 고입(띠 표지 · 다섯 칸)과 대입(높은 표지 · 네 칸)이 크기가 달라 한 페이지로 읽히지 않았다.
     두 구간 모두 같은 칸 수 · 같은 표지 비율 · 같은 글자 크기로 맞춘다. 고입은 '준비 중' 표시만 다르다.
   - 바탕 : 흰 막을 62% 로 한 겹 얹었던 차이는 거의 보이지 않았다.
     고입은 짙은 종이색, 대입은 흰색으로 확실히 가르고, 두 면 사이에 선을 긋는다.
   ══════════════════════════════════════════════════════════════════════════ */
.rc-sec::before { background: #F4E6E1; }
.rc-sec + .rc-sec::before { background: #FFFFFF; }
.rc-sec + .rc-sec { border-top: 1px solid rgba(23, 21, 26, .1); }
/* 흰 바탕 위 카드는 테두리를 한 단계 진하게 해 바탕과 떨어지게 */
.rc-sec + .rc-sec .rc__a { box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .09), 0 18px 36px -30px rgba(40, 20, 30, .38); }
/* 종이 바탕 구간의 거르기 버튼 · 안내 글은 바탕에 묻히지 않게 */
.rc-sec .chip:not([aria-pressed="true"]) { background: #fff; }

/* 카드 본문 높이 : 고입 카드는 날짜 · 소개 줄이 없어 20~60px 짧았다. 두 구간 모든 카드의 본문 최소 높이를
   대입 카드(제목 두 줄 + 소개 한 줄) 기준으로 맞춰 한 줄에 놓였을 때 크기가 같게 한다(실측 : 폰 110 · 그 위 172~180). */
.rc-grid .rc__body { min-height: 178px; }
@media (max-width: 599px) { .rc-grid .rc__body { min-height: 110px; } }
@media (min-width: 600px) and (max-width: 1199px) { .rc-grid .rc__body { min-height: 182px; } }
/* 고입 카드 본문을 대입 카드와 같은 짜임으로 : 위 상태 줄(날짜 자리) → 제목 → 아래 줄(리포트 읽기 자리) */
.rc--soon .rc__body { justify-content: flex-start; }
.rc--soon .rc__soon { order: -1; margin-top: 0; padding-top: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.rc--soon .rc__t { margin-top: 8px; }
.rc__next { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 700; color: rgba(23, 21, 26, .38); }
.rc__next::after { content: ""; width: 16px; height: 2px; background: currentColor; opacity: .5; }
@media (max-width: 599px) { .rc--soon .rc__soon { font-size: 12px; } .rc--soon .rc__t { margin-top: 4px; } .rc__next { display: none; } .rc--soon .rc__body { justify-content: flex-start; } }

/* ══════════════════════════════════════════════════════════════════════════
   메인 줄바꿈 · 학년별 로드맵 정리 (2026-09-17)
   ══════════════════════════════════════════════════════════════════════════ */
/* 줄바꿈 : 두세 줄짜리 설명은 줄 길이를 고르게, 짧은 라벨은 끝에 한 낱말만 남지 않게 */
.jpanel__s { text-wrap: balance; }
.pex__works b, .pex__works span, .pex__steps b, .pex__facts dd, .track__meta dd, .cinfo dd, .jp b, .jp span, .row__t, .row__d { text-wrap: balance; }
@media (max-width: 599px) { .pex__hookp { text-wrap: pretty; } }

/* 학년별 로드맵 : 설명 글과 '지금 필요한 프로그램'이 같은 흐름에 붙어 어디까지가 설명인지 흐렸다.
   프로그램 목록을 옅은 판으로 묶고, 판 머리에 붉은 눈금 + 이름을 둬 설명과 확실히 가른다. */
.journey .jpanel .jpanel__p {
  margin-top: clamp(16px, 2.2vh, 26px);
  padding: 12px 14px 2px;
  border: 0; border-radius: 14px;
  background: rgba(23, 21, 26, .035);
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06);
}
.journey .jpanel.is-on .jpanel__p { background: #FBF1EE; box-shadow: inset 0 0 0 1px rgba(208, 2, 27, .14); }
.journey .jpanel .jpanel__p::before {
  content: "지금 필요한 프로그램"; display: block;
  padding: 0 0 8px 11px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: -.002em; color: var(--ink-2);
  background: linear-gradient(var(--red), var(--red)) 0 calc(50% - 4px) / 3px 1em no-repeat;
}
.journey .jpanel.is-on .jpanel__p::before { color: var(--red); }
.journey .jpanel .jp { border-top-color: rgba(23, 21, 26, .09); }
.journey .jpanel .jp-none { margin-bottom: 10px; padding: 12px 0 2px; border-top-color: rgba(23, 21, 26, .09); }
/* 설명 글 두 문장 사이도 조금 벌려 한 덩어리로 뭉치지 않게 */
.journey .jpanel__s + .jpanel__s { margin-top: .45em; }
/* 낮은 창 : 판 머리는 두고 안쪽 여백만 줄인다 */
@media (min-width: 1024px) and (max-height: 780px) {
  .journey .jpanel .jpanel__p { margin-top: 10px; padding: 8px 12px 0; }
  .journey .jpanel .jpanel__p::before { display: block; padding-bottom: 4px; }
  .journey .jpanel .jp { padding-block: 5px; }
}
@media (max-width: 599px) {
  .journey .jpanel .jpanel__p { padding: 10px 12px 0; border-radius: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 프로그램 카드 7차 (2026-09-17)
   재점검 : 카드(먹색 판) 안에 두 판(옅은 판)이, 그 안에 가는 가로줄이 또 겹쳐 선과 상자가 너무 많았다.
   목록 줄을 벌려 빈자리를 메우니 헐거웠고, 붉은 시기 글자가 줄마다 튀어 눈이 쉬지 못했다.
   - 두 칸의 판을 걷어내고 제목 + 세로 구분선으로만 나눈다.
   - 과정과 결과물 : 목록 줄 → 타일(아이콘 위, 이름 · 결과물 아래). 늘어나도 헐겁지 않다.
     두 칸 카드는 2×2, 세 칸 카드(자소서 · 면접 / 수시 · 정시)는 한 줄에 하나(아이콘 왼쪽).
   - 진행 순서 : 시기 글자는 흐린 흰색, 첫 단계만 붉게. 단계는 판 높이에 맞춰 고르게 선다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (orientation: landscape) {
  .programs.is-stack .pstack__card .pex__cols {
    flex: 1 1 auto; max-height: clamp(250px, 38vh, 380px);
    margin-top: clamp(12px, 1.5vh, 22px);
    column-gap: clamp(26px, calc(var(--u) * 2.8), 46px);
  }
  .programs.is-stack .pstack__card .pex__cols--3 { column-gap: clamp(20px, calc(var(--u) * 2.1), 34px); }
  .programs.is-stack .pstack__card .pex__col {
    position: relative; display: flex; flex-direction: column; min-height: 0;
    padding: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .programs.is-stack .pstack__card .pex__col + .pex__col::before {
    content: ""; display: block; position: absolute; top: 2px; bottom: 2px;
    left: calc(clamp(26px, calc(var(--u) * 2.8), 46px) / -2); width: 1px; background: rgba(255, 255, 255, .1);
  }
  .programs.is-stack .pstack__card .pex__cols--3 .pex__col + .pex__col::before { left: calc(clamp(20px, calc(var(--u) * 2.1), 34px) / -2); }
  .programs.is-stack .pstack__card .pex__h { margin-bottom: clamp(6px, .85vh, 12px); font-size: clamp(12.5px, 1.5vh, 14px); }

  /* 과정과 결과물 : 타일(아이콘 왼쪽, 이름 · 결과물 오른쪽). 한 줄에 하나씩 쌓고, 칸 높이에 맞춰 고르게 늘어난다 */
  .programs.is-stack .pstack__card .pex__works {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
    gap: clamp(5px, .7vh, 9px); flex: 1 1 auto; min-height: 0; align-content: stretch;
  }
  .programs.is-stack .pstack__card .pex__works li,
  .programs.is-stack .pstack__card .pex__works li:first-child,
  .programs.is-stack .pstack__card .pex__works li:last-child {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 12px; row-gap: 1px;
    padding: clamp(4px, .55vh, 10px) 14px clamp(4px, .55vh, 10px) 10px;
    border: 0; border-radius: 12px;
    background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075);
  }
  .programs.is-stack .pstack__card .pex__works .pex__wi {
    grid-row: 1 / 3; align-self: center; margin: 0;
    width: clamp(26px, 3.1vh, 34px); height: clamp(26px, 3.1vh, 34px); border-radius: 8px;
  }
  .programs.is-stack .pstack__card .pex__works b,
  .programs.is-stack .pstack__card .pex__works span { grid-column: 2; align-self: auto; margin: 0; text-align: left; }
  .programs.is-stack .pstack__card .pex__works b { font-size: clamp(13px, 1.62vh, 15px); line-height: 1.3; }
  .programs.is-stack .pstack__card .pex__works span { font-size: clamp(11.5px, 1.36vh, 13px); line-height: 1.3; color: rgba(255, 255, 255, .58); }

  /* 진행 순서 */
  .programs.is-stack .pstack__card .pex__steps { flex: 1 1 auto; min-height: 0; align-content: space-between; }
  .programs.is-stack .pstack__card .pex__steps span { color: rgba(255, 255, 255, .5); font-weight: 700; }
  .programs.is-stack .pstack__card .pex__steps li:first-child span { color: var(--red-on-noir); }
  .programs.is-stack .pstack__card .pex__steps b { color: #fff; font-weight: 700; }
}

@media (min-width: 1024px) and (orientation: landscape) and (max-height: 740px) {
  .programs.is-stack .pstack__card .pex__cols { margin-top: 9px; }
  .programs.is-stack .pstack__card .pex__h { margin-bottom: 5px; }
  .programs.is-stack .pstack__card .pex__works { gap: 5px; }
}

/* 02 프로그램 넘겨 보는 줄(700px~)도 같은 짜임 : 판 없이 구분선 · 결과물 타일 · 차분한 진행 순서 */
@media (min-width: 700px) {
  .programs.is-swipe .pex__cols { column-gap: 32px; }
  .programs.is-swipe .pex__col, .programs.is-swipe .pex__col--grp {
    position: relative; padding: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .programs.is-swipe .pex__cols:not(.pex__cols--3) .pex__col + .pex__col::before,
  .programs.is-swipe .pex__cols--3 .pex__col:nth-child(3)::before {
    content: ""; display: block; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 1px; background: rgba(255, 255, 255, .1);
  }
  .programs.is-swipe .pex__h { margin-bottom: 10px; }
  .programs.is-swipe .pex__works { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .programs.is-swipe .pex__works li,
  .programs.is-swipe .pex__works li:first-child,
  .programs.is-swipe .pex__works li:nth-child(2),
  .programs.is-swipe .pex__works li:last-child {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 12px; row-gap: 1px;
    padding: 8px 14px 8px 10px; border: 0; border-radius: 12px;
    background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075);
  }
  .programs.is-swipe .pex__works .pex__wi { grid-row: 1 / 3; align-self: center; width: 32px; height: 32px; border-radius: 8px; }
  .programs.is-swipe .pex__works b, .programs.is-swipe .pex__works span { grid-column: 2; }
  .programs.is-swipe .pex__works span { color: rgba(255, 255, 255, .58); }
  .programs.is-swipe .pex__col { display: flex; flex-direction: column; }
  .programs.is-swipe .pex__steps { flex: 1 1 auto; align-content: space-between; }
  .programs.is-swipe .pex__steps span { color: rgba(255, 255, 255, .5); font-weight: 700; }
  .programs.is-swipe .pex__steps li:first-child span { color: var(--red-on-noir); }
  .programs.is-swipe .pex__steps b { color: #fff; }
}
@media (min-width: 1024px) {
  .programs.is-swipe .pex__cols--3 .pex__col + .pex__col::before {
    content: ""; display: block; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 1px; background: rgba(255, 255, 255, .1);
  }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .programs.is-swipe .pex__cols--3 > .pex__col:first-child { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .programs.is-swipe .pex__cols--3 .pex__col--grp + .pex__col--grp { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 프로그램 · 진행 순서 다시 짜기 (2026-09-17)
   작은 점 + 목록 한 줄 전체를 지나는 선 한 줄이었다. 줄을 벌리면 점만 둥둥 떠 보였고
   선이 첫 점 위 · 끝 점 아래로 삐져나와 끝을 흐리게 지워야 했다.
   - 점 → 번호 원(01 · 02 …). 첫 단계만 붉게 채운다.
   - 선 → 줄마다 '내 원 중심에서 다음 원 중심까지' 한 토막. 줄 높이를 같게(1fr) 나누니 토막이 정확히 이어지고,
     마지막 원 아래로는 선이 없다.
   - 줄 안 : 번호 원 · 시기(흐린 글자) · 단계 이름(흰 글자). 두 과정 카드는 시기를 위, 이름을 아래에.
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pex__steps {
  --stp-d: 22px; --stp-p: 4px; --stp-lh: 22px; --stp-gap: 12px;
  position: relative; display: grid; grid-auto-rows: minmax(min-content, 1fr); row-gap: 0;
  align-content: stretch; counter-reset: stp;
}
#programs .pex__steps::before { display: none; }
#programs .pex__steps li {
  position: relative; counter-increment: stp;
  align-content: start; align-items: center;
  padding: var(--stp-p) 0 var(--stp-p) calc(var(--stp-d) + var(--stp-gap));
}
#programs .pex__steps li::before { display: none; }
#programs .pex__steps li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--stp-d) / 2 - .5px); top: calc(var(--stp-p) + var(--stp-lh) / 2);
  width: 1px; height: 100%;
  background: rgba(255, 255, 255, .16);
}
#programs .pex__steps span,
#programs .pex__steps b { line-height: var(--stp-lh); }
#programs .pex__steps span {
  position: relative; z-index: 1;
  font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .5); white-space: nowrap;
}
#programs .pex__steps b { font-size: clamp(13.5px, 1.62vh, 15px); font-weight: 700; color: #fff; }
#programs .pex__steps span::before {
  content: counter(stp, decimal-leading-zero);
  position: absolute; left: calc(-1 * (var(--stp-d) + var(--stp-gap))); top: 50%; translate: 0 -50%;
  display: grid; place-items: center; box-sizing: border-box;
  width: var(--stp-d); height: var(--stp-d); border-radius: 50%;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1;
  color: rgba(255, 255, 255, .78); background: #211E24; border: 1.5px solid rgba(255, 255, 255, .24);
}
#programs .pex__steps li:first-child span { color: var(--red-on-noir); }
#programs .pex__steps li:first-child span::before { color: #fff; background: var(--red); border-color: var(--red); }

/* 시기 칸 : 한 줄 카드에서는 시기 글자 폭을 맞춰 이름이 한 세로줄에서 시작 */
#programs .pex__col:not(.pex__col--grp) .pex__steps { grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
#programs .pex__col:not(.pex__col--grp) .pex__steps li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
/* 한 줄 카드는 줄이 늘어나도 내용을 줄 가운데에 두고, 선은 줄 가운데(=원 중심)에서 다음 줄 가운데까지 */
#programs .pex__col:not(.pex__col--grp) .pex__steps li { align-content: center; }
#programs .pex__col:not(.pex__col--grp) .pex__steps li:not(:last-child)::after { top: 50%; }

/* 두 과정 카드 : 시기 위, 이름 아래 */
/* 단계 수가 적은 쪽(면접 3단계)도 줄 사이가 벌어지지 않게 : 줄을 늘리지 않고 같은 간격으로 위에서부터 쌓는다.
   선은 줄마다 자기 높이만큼(=다음 원 중심까지) 이어지므로 줄 높이가 달라도 끊기지 않는다. */
#programs .pex__col--grp .pex__steps { --stp-p: 8px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: start; }
#programs .pex__col--grp .pex__steps li { display: block; }
#programs .pex__col--grp .pex__steps span, #programs .pex__col--grp .pex__steps b { display: block; }
#programs .pex__col--grp .pex__steps b { line-height: 1.35; margin-top: 0; }

/* 낮은 창 : 원 · 줄을 한 단계 작게 */
@media (max-height: 780px) {
  #programs .pex__steps { --stp-d: 20px; --stp-p: 3px; --stp-lh: 20px; --stp-gap: 10px; }
  #programs .pex__steps span::before { font-size: 10px; }
}
/* 폰 */
@media (max-width: 599px) {
  #programs .pex__steps { --stp-d: 20px; --stp-p: 4px; --stp-lh: 20px; --stp-gap: 10px; }
  #programs .pex__steps span::before { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   03 관리 차별점 비교표 다듬기 (2026-09-17)
   머리글 · 항목 이름 · 칩 글자가 작아 표가 흐릿했고, 두 쪽이 색 말고는 구별이 약했다.
   - 머리글 : 글자를 키우고 앞에 표식(업체 : 회색 점, 대치플랜 : 붉은 체크 원).
   - 값 : 한 단계 크게. 업체 쪽은 회색 줄표, 대치플랜 쪽은 붉은 체크를 앞에.
   - 항목 이름 : 붉은 짧은 막대 + 큰 글자. 칩 : 알약 모양, 글자 12px 이상.
   - 판 테두리 · 경계 손잡이(흰 테) 정리. 빈 칸(폰의 업체 쪽 문서 칸)은 점선.
   ══════════════════════════════════════════════════════════════════════════ */
.split__who { display: flex; align-items: center; gap: 10px; }
.split__who::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(23, 21, 26, .3);
}
.split__layer--us .split__who::before {
  width: 22px; height: 22px; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.split__v::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
  background: rgba(23, 21, 26, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857a7e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.split__layer--us .split__v::before {
  background: rgba(208, 2, 27, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0021B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.split__v small { margin-top: 4px; }
.split__layer--them .split__v { color: rgba(23, 21, 26, .72); }
.split__layer--them .split__v small { color: rgba(23, 21, 26, .5); }

.yr4 i, .doc4 i { border-radius: 999px; font-size: 12.5px; }
.wk16 i { border-radius: 3px; }
.split__layer--them i.on { background: #7A6F73; }
.doc4 i:empty { box-shadow: none; border: 1.5px dashed rgba(23, 21, 26, .16); background: transparent; }

/* 폰 · 태블릿 두 장 */
.split__who { font-size: clamp(17px, 4.4vw, 20px); }
.split__layer--us { box-shadow: inset 0 0 0 1.5px rgba(208, 2, 27, .18), var(--e2); }
.split__k { font-size: 13px; color: rgba(23, 21, 26, .55); }
.split__v { font-size: 16px; }
.split__v small { font-size: 13px; padding-left: 24px; }

/* 데스크톱 한 판 */
@media (min-width: 1024px) {
  .cmp2.is-live .cmp2__k { gap: 10px; }
  .cmp2.is-live .cmp2__k::before { content: ""; flex: none; width: 3px; height: 1em; border-radius: 2px; background: var(--red); }
  .cmp2.is-live .cmp2__k:last-of-type { border-bottom: 1px solid rgba(23, 21, 26, .1); }
  .cmp2.is-live .cmp2__k--head::before { display: none; }
  .split.is-live { box-shadow: inset 0 0 0 1px rgba(84, 34, 30, .08), 0 1px 2px rgba(60, 20, 20, .05), 0 30px 60px -34px rgba(84, 34, 30, .42); }
  .split.is-live .split__layer--them { background: #F1E6E2; }
  .split.is-live .split__who { border-bottom: 1px solid rgba(23, 21, 26, .08); }
  .split.is-live .split__layer--us .split__who { justify-content: flex-end; color: var(--red); }
  .split.is-live .split__layer--us .split__who { background: linear-gradient(180deg, rgba(208, 2, 27, .05), rgba(208, 2, 27, 0)); }
  .split.is-live .split__row:first-of-type, .split.is-live .split__who + .split__row { border-top: 0; }
  .split.is-live .split__v small { padding-left: 24px; }
  .split.is-live .split__layer--us .split__v small { padding-left: 0; padding-right: 0; }
  .split.is-live .split__v { max-width: 46%; }
  .split__knob { box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 10px 24px -8px rgba(23, 21, 26, .6); }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .cmp2.is-live .cmp2__k { font-size: clamp(15px, 2.15vh, 20px); }
  .split.is-live .split__who { padding: 1.7vh calc(var(--u) * 2.4) 1.4vh; font-size: clamp(16px, 2.4vh, 22px); }
  .split.is-live .split__row { gap: 1.2vh; padding: 1.35vh calc(var(--u) * 2.4); }
  .split.is-live .split__v { font-size: clamp(15px, 2.15vh, 20px); line-height: 1.38; }
  .split.is-live .split__v small { font-size: clamp(12.5px, 1.6vh, 15px); }
  .split.is-live .split__v::before { width: clamp(16px, 2vh, 20px); height: clamp(16px, 2vh, 20px); background-size: 70%; }
  .split.is-live .yr4 i, .split.is-live .doc4 i { min-height: clamp(26px, 3.3vh, 40px); font-size: clamp(12px, 1.5vh, 14px); }
}
/* 태블릿 두 장 : 줄 높이를 맞추느라 늘어난 칸이 칩까지 늘려 동그랗게 만들었다. 내용은 위에서부터 채운다 */
@media (min-width: 700px) and (max-width: 1023px) {
  .split__row { align-content: start; }
  /* 두 장이 줄 높이를 함께 쓴다 : 각 줄은 두 장 중 긴 쪽에 맞추고, 짧은 줄을 억지로 늘리지 않는다 */
  .split { grid-template-rows: auto repeat(4, auto); row-gap: 0; column-gap: 12px; }
  .split__layer { grid-row: 1 / 6; grid-template-rows: subgrid; row-gap: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   03 관리 차별점 비교표 2차 (2026-09-17)
   - 대치플랜 머리글을 붉은 띠(흰 글자 · 흰 체크 원)로. 업체 머리글은 한 톤 짙은 베이지 띠.
   - 업체 쪽 켜진 칩을 한 톤 연하게 : 두 쪽이 같은 무게로 보이지 않게.
   - 폰 · 태블릿 카드도 같은 머리글 띠.
   ══════════════════════════════════════════════════════════════════════════ */
.split__layer--them i.on { background: #A69A9E; }
.split__layer--us .split__who { color: #fff; background: var(--red); }
.split__layer--us .split__who::before {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0021B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.split__who { margin: -18px -18px 0; padding: 16px 18px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.split__layer--them .split__who { background: rgba(23, 21, 26, .05); }
.split__layer--us { box-shadow: inset 0 0 0 1.5px rgba(208, 2, 27, .22), var(--e2); overflow: hidden; }
.split__who + .split__row { border-top: 0; }
.split__layer--us .split__v { letter-spacing: -.005em; }

@media (min-width: 1024px) {
  .split.is-live .split__who { margin: 0; border-radius: 0; border-bottom: 0; }
  .split.is-live .split__layer--them .split__who { background: #E8DAD5; color: rgba(23, 21, 26, .78); }
  .split.is-live .split__layer--us .split__who { color: #fff; background: var(--red); }
  .split.is-live .split__layer--them .split__who::before { background: rgba(23, 21, 26, .35); }
  .split.is-live .split__bar { background: #17151A; }
  .split.is-live .split__v { font-weight: 700; }
  .split.is-live .split__layer--us .split__v { font-weight: 800; }
}

/* ── 03 관리 차별점 : 모서리가 너무 둥글었다(데스크톱 약 37px). 판 16px · 폰/태블릿 카드 14px 로 (2026-09-17) */
.split__layer, .split__who { --cmp-r: 14px; }
.split__layer { border-radius: var(--cmp-r); }
.split__who { border-radius: var(--cmp-r) var(--cmp-r) 0 0; }
@media (min-width: 1024px) {
  .split.is-live { border-radius: 16px; }
  .split.is-live .split__layer, .split.is-live .split__who { border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 프로그램 · 진행 순서 2차 (2026-09-17)
   줄을 판 높이에 맞춰 벌리니 가는 연결선 위에 작은 원만 떠 보였다.
   연결선을 걷고 줄마다 가는 구분선을 두는 '번호 목록'으로 정리한다.
   - 번호 원 28px(글자 12px), 원은 줄 전체의 세로 가운데. 첫 단계만 붉게 채운다.
   - 줄 사이는 가는 구분선. 줄이 벌어져도 표처럼 정돈돼 보인다.
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pex__steps { --stp-d: 28px; --stp-gap: 14px; }
#programs .pex__steps li:not(:last-child)::after { display: none; }
#programs .pex__steps li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
#programs .pex__steps span { position: static; }
#programs .pex__steps span::before {
  left: 0; top: 50%;
  font-size: 12px; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .2);
}
#programs .pex__steps li:first-child span::before { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px rgba(208, 2, 27, .18); }
#programs .pex__col--grp .pex__steps { --stp-p: 10px; }
#programs .pex__col--grp .pex__steps b { margin-top: 2px; }
@media (max-height: 780px) {
  #programs .pex__steps { --stp-d: 24px; --stp-gap: 12px; }
  #programs .pex__steps span::before { font-size: 12px; letter-spacing: -.04em; }
  #programs .pex__col--grp .pex__steps { --stp-p: 7px; }
}
@media (max-width: 599px) {
  #programs .pex__steps { --stp-d: 24px; --stp-p: 7px; --stp-gap: 12px; }
  #programs .pex__steps span::before { font-size: 12px; letter-spacing: -.04em; }
}
/* 두 과정 카드도 줄을 판 높이에 고르게 나눈다(구분선이 있어 벌어져도 정돈돼 보인다). 내용은 줄 가운데 */
#programs .pex__col--grp .pex__steps { grid-auto-rows: minmax(min-content, 1fr); align-content: stretch; }
#programs .pex__col--grp .pex__steps li { display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: left; }
/* 낮은 창 : 구분선이 더해진 만큼 줄 안 여백을 줄여 가장 긴 카드(학생부)가 화면을 넘지 않게 */
@media (max-height: 780px) {
  #programs .pex__col:not(.pex__col--grp) .pex__steps { --stp-p: 2px; }
}

/* ── 02 학생부 카드 소개글 · 후킹 설명 : 문장 단위 줄바꿈 (2026-09-17 요청)
   소개글 두 문장, 후킹 설명 [첫 문장 두 줄] · 둘째 문장 앞 · 뒤 구절을 각각 한 줄에. 좁은 화면에서는 줄 안에서만 넘친다. */
.pex__lede--ln .ln, .pex__hookp--ln .ln { display: block; }
.pex__lede--ln, .pex__hookp--ln { text-wrap: wrap; max-width: none; }
/* 소개글 두 문장은 원래 글자 크기로는 1440 카드 폭(700px)에 한 줄로 들어가지 않는다.
   소개글 자신의 폭(100cqi)에 맞춰 글자를 줄이되 12px 아래로는 내리지 않는다(긴 둘째 문장 ≈ 57.2em).
   12px로도 넘치는 좁은 카드에서는 그 문장 안에서만 고르게 두 줄로 나뉜다. */
.pex__lede--ln { container-type: inline-size; }
.pex__lede--ln .ln { text-wrap: balance; }
@media (min-width: 1024px) {
  .pex__lede--ln .ln { font-size: clamp(12px, calc(100cqi / 58), 1em); }
}
.pex__hookp--ln .ln { text-wrap: balance; }

/* ══════════════════════════════════════════════════════════════════════════
   02 프로그램 · 진행 순서 3차 (2026-09-17)
   번호(01 · 02) 대신 예전처럼 점 + 연결선의 도형으로. 대신 더 정돈되게:
   - 점 : 속이 빈 고리(12px). 첫 단계만 붉게 채우고 옅은 붉은 테.
   - 선 : 줄마다 '위 절반 + 아래 절반' 두 토막으로 그려, 줄 높이가 달라도 점과 점이 정확히 이어지고
     첫 점 위 · 끝 점 아래로는 나가지 않는다.
   - 구분선 : 글자 칸에만(선 · 점 자리는 비움).
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pex__steps { --stp-d: 12px; --stp-gap: 18px; --stp-rail: rgba(255, 255, 255, .16); --stp-bg: #1D1A20; }
#programs .pex__steps li + li {
  border-top: 0;
  background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)) right top / calc(100% - var(--stp-d) - var(--stp-gap)) 1px no-repeat;
}
#programs .pex__steps li:not(:last-child)::after,
#programs .pex__steps li:not(:first-child)::before {
  content: ""; display: block; position: absolute; z-index: 0;
  left: calc(var(--stp-d) / 2 - .5px); width: 1px; background: var(--stp-rail);
}
#programs .pex__steps li:not(:last-child)::after { top: 50%; bottom: 0; height: auto; }
#programs .pex__steps li:not(:first-child)::before { top: 0; height: 50%; }
#programs .pex__col:not(.pex__col--grp) .pex__steps li:not(:last-child)::after { top: 50%; }
#programs .pex__steps span::before,
#programs .pex__steps li:first-child span::before {
  content: ""; z-index: 1;
  width: var(--stp-d); height: var(--stp-d); box-sizing: border-box;
  background: var(--stp-bg); border: 2px solid rgba(255, 255, 255, .34); box-shadow: 0 0 0 3px var(--stp-bg);
}
#programs .pex__steps li:first-child span::before {
  background: var(--red); border-color: var(--red);
  box-shadow: 0 0 0 3px var(--stp-bg), 0 0 0 6px rgba(208, 2, 27, .28);
}
#programs .pex__steps li:last-child span::before { border-color: rgba(255, 255, 255, .6); }
@media (max-height: 780px) {
  #programs .pex__steps { --stp-d: 11px; --stp-gap: 16px; }
}
@media (max-width: 599px) {
  #programs .pex__steps { --stp-d: 11px; --stp-gap: 14px; }
}
/* 위 절반 토막 : 예전 점 규칙(main.css, 붉은 테 · 음수 여백 · 둥근 모서리)이 남아 있어 모두 걷는다 */
#programs .pex__steps li:not(:first-child)::before { margin: 0; border: 0; border-radius: 0; box-shadow: none; bottom: auto; }

/* ── 02 프로그램 · 두 과정 카드(자소서 · 면접 / 수시 · 정시) 진행 순서 시작점 정렬 (2026-09-17)
   줄을 판 높이에 벌리고 점을 줄 가운데에 두니, 두 목록의 첫 단계 높이가 서로 달랐고(3단계 · 4단계)
   점이 시기 글자와 이름 사이에 떠 있었다.
   - 두 목록 모두 위에서부터 같은 간격으로 쌓는다 → 첫 단계가 왼쪽 첫 타일 윗선과 같은 높이에서 시작.
   - 점은 시기 글자 줄의 가운데. 선도 그 높이를 기준으로 잇는다. */
#programs .pex__col--grp .pex__steps { --stp-p: 12px; grid-auto-rows: auto; align-content: start; }
#programs .pex__col--grp .pex__steps li { --pt: var(--stp-p); padding-top: var(--pt); justify-content: flex-start; }
#programs .pex__col--grp .pex__steps li:first-child { --pt: 0px; }
#programs .pex__col--grp .pex__steps span { position: relative; }
#programs .pex__col--grp .pex__steps span::before { left: calc(-1 * (var(--stp-d) + var(--stp-gap))); top: 50%; }
#programs .pex__col--grp .pex__steps li:not(:first-child)::before { top: 0; height: calc(var(--pt) + var(--stp-lh) / 2); }
#programs .pex__col--grp .pex__steps li:not(:last-child)::after { top: calc(var(--pt) + var(--stp-lh) / 2); bottom: 0; }
@media (max-height: 780px) {
  #programs .pex__col--grp .pex__steps { --stp-p: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 학생부 카드 강조 영역 다시 짜기 (2026-09-18)
   제목 한 줄 + 설명 네 줄이 한 덩어리로 쌓여 높고 밋밋했다.
   - 카드 폭이 넉넉하면(카드 760px 이상) 두 칸 : 왼쪽 제목, 오른쪽 설명.
   - 설명은 '교육과정 변화'(흐린 글자) / '대치플랜이 하는 일'(밝은 글자) 두 묶음, 사이에 가는 선.
     두 번째 묶음 앞에는 붉은 점을 달아 무엇을 하는지가 먼저 보이게. 줄 나눔(문장별 한 줄)은 그대로.
   - 판 : 붉은 왼쪽 굵은 선 대신 옅은 테두리 + 왼쪽 위 붉은 빛. 줄어든 높이는 아래 목록 간격으로 돌린다.
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pstack__card { container: pcard / inline-size; }
#programs .pex__hook {
  position: relative; overflow: hidden;
  border: 0; border-radius: 16px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(208, 2, 27, .2), rgba(208, 2, 27, 0) 55%), rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
#programs .pex__hook::before { content: none; }
#programs .pex__hookt { color: #fff; font-weight: 800; letter-spacing: -.01em; }
#programs .pex__hookp--ln .ln--p { color: rgba(255, 255, 255, .6); }
#programs .pex__hookp--ln .ln--us {
  position: relative; margin-top: .4em; padding-top: .4em; color: rgba(255, 255, 255, .92);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
#programs .pex__hookp--ln .ln--us { padding-left: 13px; }
#programs .pex__hookp--ln .ln--us::before {
  content: ""; position: absolute; left: 0; top: calc(.4em + .75em - 3px); width: 6px; height: 6px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(208, 2, 27, .25);
}
@container pcard (min-width: 680px) {
  #programs .pex__hook {
    display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); column-gap: 16px; align-items: center;
    padding: clamp(12px, 1.5vh, 18px) clamp(16px, 1.8vh, 22px);
  }
  #programs .pex__hookt { font-size: clamp(14px, 1.75vh, 17px); line-height: 1.4; text-wrap: balance; }
  #programs .pex__hookp { margin-top: 0; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .1); }
}
/* 줄어든 강조 영역 높이만큼 아래 두 목록의 칸을 키운다(창이 낮으면 거의 그대로) */
@media (min-width: 1200px) and (orientation: landscape) {
  .programs.is-stack .pstack__card .pex__cols { min-height: calc(36vh - 56px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 학생부 카드 강조 영역 2차 (2026-09-18) — 높이를 확실히 줄인다
   1차는 제목이 좁은 왼쪽 칸에서 네 줄로 늘어져 판 전체가 높았다(구분선 · 붉은 번짐도 과했다).
   - 두 칸 : 왼쪽(174px) 제목 두세 줄, 오른쪽 설명 네 줄. 판 높이 = 설명 네 줄 + 위아래 여백.
   - 설명 글자는 판 폭에 맞춰(100cqi) 문장 하나가 한 줄에 들어가는 크기로(12 ~ 13.5px).
   - 구분선 · 점 · 번짐 제거. 변화(흐림) → 대치플랜이 하는 일(밝음) 두 묶음은 글자 밝기로만 가른다.
   - 판 : 옅은 면 한 장, 왼쪽 제목 칸 뒤만 아주 옅은 레드.
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pex__hook {
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); border-radius: 14px;
}
#programs .pex__hookp--ln .ln--us { margin-top: .35em; padding-top: 0; padding-left: 0; border-top: 0; }
#programs .pex__hookp--ln .ln--us::before { content: none; }
#programs .pex__hookp--ln .ln--p { color: rgba(255, 255, 255, .55); }
@container pcard (min-width: 640px) {
  #programs .pex__hook {
    grid-template-columns: 200px minmax(0, 1fr); column-gap: 0; align-items: stretch; padding: 0;
  }
  #programs .pex__hookt {
    display: flex; align-items: center; padding: 10px 16px 10px 18px;
    font-size: clamp(14px, 1.65vh, 15.5px); line-height: 1.4;
    background: linear-gradient(135deg, rgba(208, 2, 27, .22), rgba(208, 2, 27, .06));
    border-radius: 14px 0 0 14px;
  }
  #programs .pex__hookp {
    align-self: center; padding: 9px 18px; border-left: 0;
    font-size: clamp(12px, calc((100cqi - 200px - 36px) / 37.8), 13.5px); line-height: 1.46;
  }
  #programs .pex__hookp .ln { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 프로그램 카드 버튼줄 (2026-09-18)
   흰 알약 + 밑줄 글자라 디자인이 없는 것처럼 보였다. 같은 높이(46px)의 버튼 한 쌍으로.
   - 자세히 보기 : 흰 버튼. 프로그램 이름은 흐린 글자, '자세히 보기' 굵게, 끝에 붉은 원 화살표.
   - 상담 예약 : 테두리 버튼 + 달력 표식. 올리면 면이 차오른다.
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pex__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#programs .pex__go, #programs .pex__ask {
  box-sizing: border-box; height: 46px; min-height: 46px; border-radius: 999px;
  display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
  font-size: 14.5px; line-height: 1; transition: background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
#programs .pex__go { gap: 10px; padding: 0 6px 0 20px; background: #fff; color: var(--noir); font-weight: 800; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .8); }
#programs .pex__gon { font-weight: 600; color: rgba(23, 21, 26, .55); margin-right: -4px; }
#programs .pex__go .go { width: 34px; height: 34px; margin-left: 4px; }
#programs .pex__ask {
  gap: 8px; padding: 0 20px 0 16px; color: #fff; font-weight: 700;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
#programs .pex__ask::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#programs .pex__ask:hover, #programs .pex__ask:focus-visible { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
#programs .pex__go:hover { box-shadow: 0 12px 28px -14px rgba(208, 2, 27, .6); }
@media (max-height: 740px) and (min-width: 1024px) {
  #programs .pex__go, #programs .pex__ask { height: 42px; min-height: 42px; font-size: 14px; }
  #programs .pex__go .go { width: 30px; height: 30px; }
}
@media (max-width: 599px) {
  #programs .pex__go, #programs .pex__ask { height: 44px; min-height: 44px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 학생부 카드 강조 영역 3차 (2026-09-18)
   2차는 왼쪽 칸만 붉게 칠한 상자라 '칸 나눈 표'처럼 보였다.
   - 판 한 장 : 왼쪽에서 오른쪽으로 옅어지는 면, 칸 경계는 가는 세로선 하나(위아래가 흐려지는 선).
   - 왼쪽 : 작은 붉은 표식 '2022 개정 교육과정' + 제목. 뒤에 크게 흐린 숫자 2022(바탕 무늬).
   - 오른쪽 : 설명 네 줄은 그대로(변화 흐림 → 대치플랜 밝음).
   높이는 2차와 같다(설명 네 줄 기준).
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pex__hook {
  background: linear-gradient(100deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .02) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
@container pcard (min-width: 640px) {
  #programs .pex__hookt {
    position: relative; isolation: isolate; overflow: hidden;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    background: none; border-radius: 14px 0 0 14px;
  }
  #programs .pex__hookt::before {
    content: "2022 개정 교육과정"; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0; line-height: 1; color: #FF5A69;
  }
  #programs .pex__hookt::after {
    content: "2022"; position: absolute; z-index: -1; right: -10px; bottom: -14px;
    font-size: 64px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
  }
  #programs .pex__hookp { position: relative; }
  #programs .pex__hookp::before {
    content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
  }
}
/* 좁은 카드(1280 · 태블릿 · 폰) : 높이가 빠듯해 표식은 넣지 않는다 */

/* ── 버튼 2차 : 흰 알약은 너무 쨍했다. 주 버튼은 메인 레드, 프로그램 이름을 굵게 · '자세히 보기'는 한 단계 옅게 */
#programs .pex__go {
  gap: 8px; padding: 0 6px 0 20px; color: #fff;
  background: linear-gradient(180deg, #E0102A, var(--red) 55%, #B80018);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 24px -14px rgba(208, 2, 27, .75);
}
#programs .pex__gon { margin-right: 0; font-weight: 800; color: #fff; }
#programs .pex__go { font-weight: 600; }
#programs .pex__go > .go { background: #fff; color: var(--red); }
#programs .pex__go:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -14px rgba(208, 2, 27, .9); }
#programs .pex__go { color: rgba(255, 255, 255, .8); }
#programs .pex__gon { font-size: 1.04em; letter-spacing: -.01em; }
#programs .pex__go { color: #fff; }
#programs .pex__gon { display: inline-flex; align-items: center; gap: 8px; }
#programs .pex__gon::after { content: ""; width: 1px; height: 13px; background: rgba(255, 255, 255, .4); }

/* ══════════════════════════════════════════════════════════════════════════
   02 학생부 카드 강조 영역 4차 (2026-09-18)
   상자(면 + 테두리)로 감싸니 카드 안에 또 카드가 든 것처럼 보였고, 제목 뒤 숫자 무늬는 글자와 겹쳐 어수선했다.
   - 상자를 걷고 카드 본문의 한 단(段)으로 : 위 가는 선 하나, 왼쪽 제목 단 · 오른쪽 설명 단, 사이 가는 세로선.
   - 왼쪽 : '2022 개정 교육과정' 붉은 알약 + 제목(흰 글자, 조금 크게).
   - 오른쪽 : 변화(흐림) → 대치플랜이 하는 일(밝음). 하는 일 가운데 '과목 선택 방향' · '전공 관심과 학업 역량'만 흰 굵은 글자.
   ══════════════════════════════════════════════════════════════════════════ */
#programs .pex__hook {
  background: none; box-shadow: none; border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
#programs .pex__hookp--ln .ln--us { color: rgba(255, 255, 255, .78); }
#programs .pex__hookp--ln .ln--us b { font-weight: 800; color: #fff; }
@container pcard (min-width: 640px) {
  #programs .pex__hook { grid-template-columns: 206px minmax(0, 1fr); }
  #programs .pex__hookt { padding: 12px 18px 12px 0; gap: 8px; font-size: clamp(14.5px, 1.75vh, 16.5px); line-height: 1.38; border-radius: 0; }
  #programs .pex__hookt::before {
    padding: 5px 9px; border-radius: 999px; font-size: 11.5px;
    color: #FF6B78; background: rgba(208, 2, 27, .16); box-shadow: inset 0 0 0 1px rgba(240, 38, 59, .28);
  }
  #programs .pex__hookt::after { content: none; }
  #programs .pex__hookp { padding: 12px 0 12px 20px; font-size: clamp(12px, calc((100cqi - 206px - 20px) / 37.8), 13.5px); }
  #programs .pex__hookp::before { top: 16%; bottom: 16%; background: rgba(255, 255, 255, .12); }
}
@container pcard (max-width: 639.98px) {
  #programs .pex__hook { padding: 12px 0 0; }
}
#programs .pex__hookp b { white-space: nowrap; }   /* 굵게 강조한 구절은 중간에서 끊지 않는다 */

/* ══════════════════════════════════════════════════════════════════════════
   표지 카드 : 인물 뒤 배경 (2026-09-20)
   카드 전체에 사진을 깔면 글이 탁해진다. 인물 주변에만 둥글게 번지도록 가장자리를 흐리게 지운다(mask).
   사진은 초점이 나간 밝은 학습 공간(Higgsfield 제작, images/hero-amb). 인물 · 글 뒤에서 아주 옅게만 보인다.
   폰 · 좁은 화면(인물이 숨는 구간)에서는 깔지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */
.hero__amb {
  position: absolute; z-index: 0; bottom: 0; right: calc(var(--u) * 14);
  width: min(48%, calc(var(--u) * 48)); height: min(88%, calc(var(--u) * 48));
  background: url("../images/hero-amb.jpg") center 42% / cover no-repeat;
  filter: blur(5px) saturate(.9) brightness(1.04);
  opacity: .46; pointer-events: none;
  -webkit-mask-image: radial-gradient(58% 54% at 52% 60%, #000 0 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, 0) 86%);
          mask-image: radial-gradient(58% 54% at 52% 60%, #000 0 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, 0) 86%);
}
@supports (background-image: image-set(url("../images/hero-amb.webp") type("image/webp"))) {
  .hero__amb { background-image: image-set(url("../images/hero-amb.webp") type("image/webp") 1x, url("../images/hero-amb.jpg") type("image/jpeg") 1x); }
}
@media (max-width: 899px) { .hero__amb { display: none; } }
/* 번짐이 글자 쪽까지 왔고 회색으로 탁해 보였다 → 인물 뒤로 더 모으고, 더 밝고 옅게 (2026-09-20) */
.hero__amb {
  right: calc(var(--u) * 14.5); width: min(42%, calc(var(--u) * 40)); height: min(84%, calc(var(--u) * 44));
  filter: blur(7px) saturate(.82) brightness(1.12);
  opacity: .38;
  -webkit-mask-image: radial-gradient(52% 50% at 52% 58%, #000 0 30%, rgba(0, 0, 0, .48) 60%, rgba(0, 0, 0, 0) 84%);
          mask-image: radial-gradient(52% 50% at 52% 58%, #000 0 30%, rgba(0, 0, 0, .48) 60%, rgba(0, 0, 0, 0) 84%);
}
/* 2차 : 동그란 얼룩처럼 옅게 번지니 있으나 마나였다.
   인물 뒤에 바닥에서 올라오는 '부드러운 세로 패널'로 : 위 · 좌 · 우 가장자리만 서서히 사라지게 한다. */
.hero__amb {
  right: calc(var(--u) * 9); bottom: 0;
  width: min(44%, calc(var(--u) * 46)); height: min(82%, calc(var(--u) * 52));
  border-radius: calc(var(--u) * 2.4) calc(var(--u) * 2.4) 0 0;
  background-position: center 46%;
  filter: blur(3.5px) saturate(.88) brightness(1.06);
  opacity: .72;
  -webkit-mask-image:
    linear-gradient(to top, #000 0 58%, rgba(0, 0, 0, .42) 86%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 22%, #000 82%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to top, #000 0 58%, rgba(0, 0, 0, .42) 86%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 22%, #000 82%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
}
/* 3차 : 원본 사진이 이미 초점이 나간 것이라 CSS 흐림까지 더하니 형체가 사라졌다. 흐림은 최소로, 대신 조금 더 또렷하게 */
.hero__amb { filter: blur(1px) saturate(.95) brightness(1.03); opacity: .8; }
/* 4차 : 흐림을 한 번 더 걷어낸다(1px → 0). 투명도만 살짝 올려 형체가 더 또렷하게 */
.hero__amb { filter: saturate(.97) brightness(1.02); opacity: .88; }
/* 5차 : 배경을 '위는 빈 벽 · 아래에만 책상' 구도로 바꿨다. 인물 머리 뒤는 벽, 허리 아래에 책상이 오도록 위치를 잡는다 */
.hero__amb { background-position: center 62%; background-size: 118% auto; }
/* 6차 : 초점이 또렷한 강의실 사진으로 교체(가운데 통로가 비어 인물이 서기 좋다). 또렷해진 만큼 투명도는 조금 낮춘다 */
.hero__amb { background-position: center 58%; background-size: 112% auto; opacity: .8; }
/* 7차 : 아래쪽(책상 줄)만 흐리게. 같은 배경을 한 겹 더 깔아 흐림을 주고, 아래에서만 보이도록 가린다 */
.hero__amb::after {
  content: ""; position: absolute; inset: 0;
  background: inherit;
  filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 46%, #000 72%, #000 100%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 46%, #000 72%, #000 100%);
  pointer-events: none;
}
/* 8차 : 아래쪽 흐림은 과했다. 흐림 대신 아래로 갈수록 서서히 옅어지게(책상 줄이 카드 바닥에서 자연스럽게 사라진다) */
.hero__amb::after { content: none; }
.hero__amb {
  -webkit-mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .45) 12%, #000 34%, #000 60%, rgba(0, 0, 0, .42) 86%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 22%, #000 82%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .45) 12%, #000 34%, #000 60%, rgba(0, 0, 0, .42) 86%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 22%, #000 82%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
}

/* 성능(2026-09-21) : 사진 배경 색 보정 필터 제거. 차이는 거의 없고 큰 면을 매번 다시 그린다 */
.hero__amb { filter: none; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-28 : 기기별 반응형 다듬기 1차 — 읽히는 크기 · 잘림 · 누르는 영역
   폭 320 ~ 1920, 높이 568 ~ 1368 스무 가지 화면을 돌려 실제로 걸린 것만 고친다.
   원칙 : 읽는 글자는 어떤 화면에서도 12px 아래로 내려가지 않는다.
          손으로 쓰는 화면에서 누르는 것은 짧은 쪽이 44px 이상이다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 인트로 합격 카드(#s0 .kc) : 글자 크기가 카드 폭(cqi)에 매여 있어
   폰에서 발표일 · 전형 이름이 8.5px 까지 떨어졌다. 바닥을 깔아 준다. */
#s0 .kc__room { font-size: max(12px, 5cqi); }
#s0 .kc__uname { font-size: max(15px, 6.2cqi); }
#s0 .kc__dept { font-size: max(13px, 6.2cqi); }
#s0 .kc__year { font-size: max(12px, 4.4cqi); }
#s0 .kc__foot { font-size: max(12px, 3.9cqi); }

/* ── 2. 학년 여정 미니 내비 : 고3 아래 '1학기 · 2학기' 가 10.8px 였다 */
.jmini__g small { font-size: max(12px, .68em); }

/* ── 3. 학년 축(중1~N수) 아래 작은 글자 */
.prail--8 li small { font-size: max(12px, .74em); }

/* ── 4. 프로그램 카드 회차 배지(4회 · 8회 · 가·나·다군) */
.pex__h i { font-size: max(12px, .92em); }

/* ── 5. 자료 예시 탭 번호(01 · 02) */
.exs__tab b { font-size: max(12px, .8em); }

/* ── 6. 자주 묻는 질문 번호 */
.faq__n { font-size: max(12px, .78em); }

/* ── 7. ABOUT 컨설턴트 카드의 담당 표시 */
.xpp__r { font-size: max(12px, var(--fs-2xs)); }
@media (max-width: 599px) { .xpp__r { font-size: 12px; } }

/* ── 8. ABOUT 지도 안내 글자(나침반 N) */
.cmap2__map svg text { font-size: max(12px, 1em); }

/* ── 9. 합격 실적 카톡 카드 : 좁은 폰에서 대학 · 학과 이름이 잘렸다.
   한 줄로 우겨넣지 말고 두 줄까지 내려 쓴다. */
@media (max-width: 480px) {
  .ktc__t b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ktc__head { align-items: flex-start; }
  .ktc__t time { margin-top: 2px; }
}

/* ── 10. 손으로 쓰는 화면에서 누르는 곳은 44px 이상 ── */
@media (max-width: 1023px), (pointer: coarse) {
  /* 합격 후기 카드의 '후기 원문' (62×28 이었다) */
  .rcase__src { min-height: 44px; align-items: center; padding-top: 10px; }
  /* 자동 넘김 멈춤 · 재생 단추 (38×38 이었다) */
  .stp__play { width: 44px; height: 44px; }
  .stp__btn { min-width: 44px; min-height: 44px; }
  /* ABOUT 본원 정보의 전화 · 메일 (높이 18px 이었다) */
  .cmap2__info .cmap__dl dd a { display: inline-flex; align-items: center; min-height: 44px; }
  /* ABOUT 캠퍼스 목록의 '지도' (66×36 이었다) */
  .cr__map { min-height: 44px; }
  /* 입시 리포트 머리의 원문 링크 (169×26 이었다) */
  .rp-hero__meta a { min-height: 44px; align-items: center; }
}

/* 넘김 방식 여정에서도 '1학기 · 2학기' 바닥은 12px (위 규칙보다 선택자가 세서 따로 적는다) */
.journey.is-swipe .jmini__g small { font-size: max(12px, .8em); }

/* ── 11. 낮은 노트북(높이 768 이하)에서 프로그램 카드 잔글씨가 11px 까지 내려갔다.
   카드 높이를 벌기 위한 축소였지만 읽는 글자라 12px 을 바닥으로 둔다. */
.programs.is-stack .pex__facts dt { font-size: clamp(12px, 1.45vh, 12.5px); }
.programs.is-stack .pex__works span { font-size: clamp(12px, 1.4vh, 12.5px); }

/* ── 12. 손으로 쓰는 큰 태블릿(아이패드 세로 등)에서 상단 메뉴가 33px 이었다 */
@media (pointer: coarse) and (min-width: 1024px) {
  .gnb__a { min-height: 44px; }
  .gnb__list { align-items: center; }
}
.programs.is-stack .pstack__card .pex__works span { font-size: clamp(12px, 1.36vh, 13px); }

/* ══ 2026-09-28 : 기기별 반응형 다듬기 2차 — 화면에 맞는 배치로 바꾼다 ══ */

/* ── 입시 리포트 목록 : 폰에서 두 칸으로 나누면 카드 한 장이 165px 밖에 안 돼
   표지 그림도 제목도 다 작아진다. 한 칸 가로형(왼쪽 표지 · 오른쪽 제목)으로 바꿔
   제목을 키우고 목록처럼 훑어 내려갈 수 있게 한다. */
@media (max-width: 520px) {
  .rc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rc__a { flex-direction: row; align-items: stretch; border-radius: 18px; }
  .rc__cover { flex: 0 0 39%; aspect-ratio: auto; }
  .rc--soon .rc__cover { aspect-ratio: auto; }
  .rc__kind { left: 12px; top: 11px; padding: .25em .6em; }
  .rc__name { left: 12px; bottom: 11px; font-size: 19px; line-height: 1.1; }
  .rc--soon .rc__name { font-size: 18px; }
  .rc__embs { right: -10%; width: 66%; height: 70%; }
  .rc--soon .rc__embs { right: 4%; height: 40%; }
  .rc__word { font-size: 34px; right: 6%; bottom: -4%; }
  .rc__body { flex: 1; justify-content: center; padding: 13px 15px 13px 14px; }
  .rc__t { margin-top: 6px; font-size: 16px; line-height: 1.38; }
  .rc__go { padding-top: 10px; margin-top: 8px; }
  .rc__soon { margin-top: 8px; }
  .rc__next { display: none; }
}

/* ══ 표지(#s1) 태블릿 세로 : 글 덩어리와 인물 사이가 100px 가까이 비고, 인물이 카드 가운데에
   어중간하게 떠서 손이 카드 선에 걸렸다. 글 → (서명 · 인물) → 대학 줄 세 단으로 다시 세운다.
   인물은 카드 오른쪽 아래 모서리에 붙여 카드 선이 자연스럽게 잘라 주게 한다. ══ */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  /* 세로로 긴 태블릿에서 표지가 화면 하나를 통째로 쓰면서 카드 아래가 크게 비었다.
     카드는 내용만큼만 쓰고 화면 가운데에 둔다 */
  #s1.hero { min-height: min(100svh, 980px); }
  #s1 .hero__wrap { align-items: center; }
  #s1 .hero__card {
    min-height: 0; align-content: start; row-gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 40%);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "mark mark" "lede lede" "who photo" "marq marq";
    padding: clamp(28px, 4.2vw, 46px) clamp(24px, 3.6vw, 40px) 0;
  }
  #s1 .hero__mark { grid-area: mark; }
  #s1 .hero__lede { grid-area: lede; margin-bottom: clamp(20px, 3vw, 34px); }
  #s1 .hero__who { grid-area: who; align-self: end; margin: 0 0 clamp(18px, 2.6vw, 30px); }
  #s1 .hero__photo {
    grid-area: photo; align-self: end; justify-self: end;
    width: min(100%, 360px); height: auto; max-height: 56vh; object-fit: contain; object-position: bottom center;
    margin: 0; translate: 0; transform: none;
  }
  #s1 .marquee {
    grid-area: marq; width: auto; margin: 0 clamp(-24px, -3.6vw, -40px);
    padding: 12px 0 14px; border-top: 1px solid rgba(23, 21, 26, .1);
  }
}

/* ══ 표지 폰 : 카드 아래쪽에 120px 넘는 빈 자리가 남고, 대표원장 사진이 87px 짜리 도장만 했다.
   카드는 내용만큼만 쓰고, 사진 · 이름 · 서명 줄을 키워 한 덩어리로 읽히게 한다. ══ */
@media (max-width: 599px) {
  /* 카드가 화면 높이만큼 늘어나 아래쪽 150px 가 빈 채로 남았다. 내용만큼만 쓰고 가운데에 둔다 */
  #s1.hero { min-height: min(100svh, 760px); }
  #s1 .hero__wrap { align-items: center; }
  /* 사진을 이름 옆에 붙인 작은 도장(87px) 으로 두니 인물도 글도 어중간했다.
     태블릿 · 데스크톱과 같은 짜임으로 : 글 → (이름 · 서명 │ 인물) → 대학 줄.
     인물은 카드 오른쪽 아래 모서리에 붙여 카드 선이 잘라 주게 한다. */
  #s1 .hero__card {
    flex: 0 0 auto; align-content: start; row-gap: 0;
    grid-template-columns: minmax(0, 1fr) 42%;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "mark mark" "lede lede" "who photo" "marq marq";
    padding: 22px 18px 0;
  }
  #s1 .hero__mark { grid-area: mark; }
  #s1 .hero__lede { grid-area: lede; margin-bottom: 16px; }
  #s1 .hero__who {
    grid-area: who; display: grid; grid-template-columns: minmax(0, 1fr);
    align-self: end; align-content: end; justify-items: start;
    gap: 0; margin: 0 0 16px; padding: 0;
  }
  /* 폰 폭에서는 이름 칸 · 서명이 display:contents 로 풀려 서명이 이름 위에 겹쳤다. 다시 묶는다 */
  #s1 .hero__cred { display: block; margin: 0; }
  #s1 .hero__sign { grid-column: 1; grid-row: auto; justify-self: start; }
  #s1 .hero__sign { width: min(100%, 124px); height: auto; margin: 7px 0 0; opacity: .9; }
  #s1 .hero__photo {
    grid-area: photo; align-self: end; justify-self: end;
    width: 100%; max-width: 170px; height: auto; margin: 0; translate: 0; transform: none;
    border-radius: 0; box-shadow: none; background: none;
  }
  #s1 .marquee {
    grid-area: marq; width: auto; margin: 0 -18px; padding: 10px 0 12px;
    border-top: 1px solid rgba(23, 21, 26, .1);
  }
}

/* 화면 크기별 확인 보조 표시 : 주소에 ?dev 를 붙였을 때만 나온다 */
.devtag {
  position: fixed; left: 10px; bottom: 10px; z-index: 9999; pointer-events: none;
  padding: 7px 11px; border-radius: 9px;
  background: rgba(18, 16, 20, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 12px/1.3 var(--f, system-ui); letter-spacing: .01em; color: #fff; white-space: nowrap;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7);
}
@media (max-width: 420px) { .devtag { left: 8px; bottom: 8px; padding: 5px 8px; font-size: 11px; } }

/* ══ 2026-09-28 : 로드맵 · 프로그램 넘김 줄(폰 · 태블릿) 다듬기 ══
   카드마다 담는 양이 달라 줄 높이가 가장 긴 카드에 맞춰져 있었다.
   짧은 카드(고입 컨설팅)를 보면 아래로 440px 가 빈 채 남는다. 카드마다 제 높이를 쓰게 한다. */
.programs.is-swipe .pstack__stage,
.journey.is-swipe .journey__stage,
.journey.is-swipe .jview { align-items: flex-start; }
.programs.is-swipe .pstack__stage { transition: height .38s var(--ease); }
@media (prefers-reduced-motion: reduce) { .programs.is-swipe .pstack__stage { transition: none; } }

/* ── 학년별 로드맵 : 폰에서 학년 알약 여덟 개가 한 줄에 다 안 들어가(390px 에서 159px 이 밖으로)
   '고3 2학기 · N수' 가 보이지 않았다. 옆으로 미는 대신 두 줄로 나눠 여덟 개를 모두 보여 준다. */
@media (max-width: 599px) {
  .journey.is-swipe .jmini {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    overflow: visible; margin-inline: 0; padding: 2px 0 4px;
  }
  .journey.is-swipe .jmini__g {
    justify-content: center; padding: 0 6px; min-height: 42px;
    font-size: clamp(12.5px, 3.4vw, 14px); white-space: nowrap;
  }
  .journey.is-swipe .jmini__g small { margin-left: .2em; }
}

/* ══ 2026-09-28 : 전체 메뉴(햄버거) ══
   · '컨설팅 프로그램' 은 ABOUT 대치 · 합격 실적 · 입시연구소와 똑같은 크기의 한 줄이다.
     그 아래 다섯 가지는 한 단 작은 글씨로 들여 써서 딸린 것임이 바로 보이게 한다(펼친 채로 시작).
   · 프로그램마다 테두리 친 네모 판을 두르던 것을 걷어냈다. 얇은 구분선만 남긴다.
   · 메뉴를 열면 닫는 것 말고 할 일이 없으므로 머리의 전화번호 알약은 감춘다. */
/* 햄버거가 나오는 폭(1024 미만)에서는 머리에 전화번호를 두지 않는다.
   좁은 머리에서 로고 · 번호 · 햄버거가 서로 밀어내고, 전화는 화면 아래 따라다니는 단추에 늘 있다. */
@media (max-width: 1023px) {
  .top__tel { display: none; }
  /* 번호가 빠지면서 햄버거를 오른쪽으로 밀어 주던 요소가 없어져 로고에 딱 붙었다.
     본문 끝선(오른쪽 여백)에 서도록 스스로 오른쪽 끝으로 민다. */
  .top__menu { margin-left: auto; margin-right: -10px; }
}

.menu__in { gap: 0; }
.menu__list { display: grid; }
.menu__group { display: block; }
.menu__plist {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  padding: 2px 0 10px; margin: 0;
  border: 0; border-bottom: 1px solid rgba(23, 21, 26, .09);
}
.menu__plist[hidden] { display: none; }

/* 큰 줄 : ABOUT · 컨설팅 프로그램 · 합격 실적 · 입시연구소 — 넷이 완전히 같다 */
.menu__a {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 62px; padding: 0 2px; border: 0; border-radius: 0;
  background: none; box-shadow: none; text-align: left; cursor: pointer;
  border-bottom: 1px solid rgba(23, 21, 26, .09);
  font-family: var(--f); font-size: clamp(16px, 4.4vw, 18px); font-weight: 700; letter-spacing: -.004em;
  color: var(--ink); word-break: keep-all;
}
.menu__a::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; margin-right: 3px;
  border-top: 2px solid rgba(23, 21, 26, .26); border-right: 2px solid rgba(23, 21, 26, .26);
  rotate: 45deg; transition: rotate .25s var(--ease);
}
/* 펼침 줄 : 펼쳐져 있으면 화살표가 아래를 본다. 아래 목록과 맞닿으므로 밑줄은 뺀다 */
.menu__a--group { border-bottom: 0; }
.menu__a--group::after { rotate: 135deg; margin-right: 6px; margin-bottom: 3px; }
.menu__a--group[aria-expanded="false"] { border-bottom: 1px solid rgba(23, 21, 26, .09); }
.menu__a--group[aria-expanded="false"]::after { rotate: 45deg; margin-bottom: 0; margin-right: 3px; }

/* 딸린 줄 : 한 단 작게, 왼쪽으로 들여쓰고, 네모 판 없이 얇은 선만 */
.menu__pa {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 3px 0 16px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: clamp(14px, 3.9vw, 15.5px); font-weight: 600; letter-spacing: -.002em;
  color: var(--ink-2); word-break: keep-all;
}
.menu__plist > li + li .menu__pa { border-top: 1px solid rgba(23, 21, 26, .06); }
.menu__pa::before {
  content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(23, 21, 26, .22); margin-right: 2px;
}
.menu__pa b { flex: 0 1 auto; min-width: 0; font: inherit; color: inherit; }
.menu__pa span {
  flex: none; margin-left: auto; padding: 0;
  background: none; border-radius: 0;
  font-size: max(12px, .8em); font-weight: 500; color: var(--ink-3); white-space: nowrap;
}

/* 지금 보고 있는 쪽 */
.menu__a[aria-current="page"] { color: var(--red); }
.menu__a[aria-current="page"]::after { border-color: var(--red); }
.menu__pa[aria-current="page"],
.menu__pa[aria-current="page"] b { color: var(--red); font-weight: 700; }
.menu__pa[aria-current="page"]::before { background: var(--red); }
.menu__pa[aria-current="page"] span { color: var(--red); opacity: .75; }

@media (hover: hover) {
  .menu__a:hover, .menu__pa:hover { background: rgba(23, 21, 26, .035); }
}
@media (prefers-reduced-motion: reduce) { .menu__a::after { transition: none; } }



/* ══ 2026-09-28 : 작은 폰(≤430)에서 글이 너무 잘게 끊기던 곳 ══ */

/* ── 프로그램 카드의 '과정과 결과물' : 320px 에서 두 칸으로 접혀 한 칸이 114px,
   설명이 한 줄에 여섯 자씩 끊겼다. 좁을수록 한 칸으로 편다(700px 이상은 이미 한 칸). */
@media (max-width: 440px) {
  .programs.is-swipe .pex__works { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .programs.is-swipe .pex__works li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 11px; padding: 8px 0; }
  .programs.is-swipe .pex__works li:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
  .programs.is-swipe .pex__works li:first-child { border-top: 0; padding-top: 0; }
  .programs.is-swipe .pex__works li:last-child { padding-bottom: 0; }
}

/* ── 표지 인트로 합격 카드 : 카드가 150px 까지 좁아지면 아래 두 항목(전형 · 발표일)을
   한 줄에 나란히 두지 못해 날짜가 잘려 접혔다. 위아래로 쌓는다. */
@media (max-width: 380px) {
  #s0 .kc__foot { flex-direction: column; align-items: flex-start; gap: 1.6cqi; }
}

/* ── 표지 해시태그 : 320px 에서 두 번째 알약이 두 줄로 접혔다. 한 줄에 하나씩 펴 준다 */
@media (max-width: 380px) {
  #s1 .pills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
  #s1 .pills .pill { width: 100%; justify-content: flex-start; white-space: nowrap; font-size: 12px; padding-inline: 12px; }
}

/* ── 합격 실적 카톡 카드 : 말풍선이 96px 밖에 안 돼 한 줄에 여섯 자씩 끊겼다.
   프로필 그림과 보낸 시각을 덜어 말풍선에 폭을 돌려준다(카드 머리에 날짜가 이미 있다). */
@media (max-width: 430px) {
  .ktc { padding: 6px; }
  .ktc__pair { padding: 13px 11px 14px; gap: 8px; }
  .ktc__av { display: none; }
  .ktc__msg { gap: 0; }
  .ktc__row time { display: none; }
  .ktc__col { flex: 1 1 auto; min-width: 0; width: 100%; }
  .ktc__row, .ktc__msg--out .ktc__row { max-width: 100%; width: 100%; }
  .ktc__msg--out .ktc__row { justify-content: flex-end; }
  /* overflow-wrap:anywhere 때문에 말풍선의 최소 폭이 아주 작게 잡혀 줄에서 쪼그라들었다. 줄을 채우게 한다 */
  .ktc__row > .ktc__b { flex: 1 1 auto; }
  .ktc__b { font-size: 14.5px; line-height: 1.55; }
  .ktc__msg--in .ktc__b::before, .ktc__msg--out .ktc__b::after { content: none; }
}

/* ── 입시 리포트 가로형 목록 : 아주 좁은 폰에서는 표지가 제목 자리를 너무 많이 가져갔다 */
@media (max-width: 380px) {
  .rc__cover { flex: 0 0 33%; }
  .rc__t { font-size: 15px; }
  .rc__name { font-size: 16px; left: 10px; bottom: 9px; }
}

/* ── 머리의 전화번호 알약 : 320px 에서 번호가 '02-2135- / 7135' 로 접혔다 */
.top__tel-n { white-space: nowrap; }


/* ── 상세 페이지 머리의 요약 표(대상 · 진단 · 분석 · 결과) : 320px 에서도 두 칸이라
   한 칸이 142px, 값이 한 줄에 예닐곱 자씩 끊겼다. 좁으면 한 칸으로 편다. */
/* 폰에서는 두 칸으로 접히면서 가로 배치용 세로 구분선(border-left)과 들여쓰기가 그대로 남아,
   첫 항목만 왼쪽에 붙고 나머지는 세로선과 함께 안쪽으로 밀려 줄이 맞지 않았다.
   한 줄에 하나씩 [이름 | 값] 두 칸으로 세우고, 칸마다 높이 · 여백을 똑같이 준다.
   윗선은 .spec 이 이미 가지고 있으므로 첫 줄에는 선을 얹지 않고, 마지막 줄 아래를 닫아 블록이 맺힌다. */
@media (max-width: 599px) {
  .spec { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .spec > div,
  .spec > div + div,
  .spec > div:nth-child(3) {
    display: grid; grid-template-columns: 5.4em minmax(0, 1fr);
    align-items: baseline; column-gap: 14px;
    padding: 13px 0; margin: 0;
    border-left: 0; border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .spec > div:first-child { border-top: 0; }
  .spec > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ps[data-tone="light"] .spec > div,
  .ps[data-tone="light"] .spec > div + div,
  .ps[data-tone="light"] .spec > div:nth-child(3) { border-top-color: rgba(23, 21, 26, .1); }
  .ps[data-tone="light"] .spec > div:last-child { border-bottom-color: rgba(23, 21, 26, .1); }
  .spec dt { grid-column: 1; line-height: 1.5; }
  .spec dd { grid-column: 2; margin: 0; font-size: clamp(14.5px, 3.9vw, 16px); line-height: 1.5; }
}

/* ── 입시 리포트 제목 : 320px 에서 43px 이라 한 줄에 여섯 자씩 세 줄로 쪼개졌다 */
@media (max-width: 420px) {
  .rp-hero__h { font-size: clamp(26px, 8.6vw, 34px); line-height: 1.24; }
}

/* ── 메일 주소가 중간에서 접히던 것 */
.cmap2__info .cmap__dl dd a, .foot a[href^="mailto"] { white-space: nowrap; }
@media (max-width: 380px) {
  .cmap2__info .cmap__dl dd a[href^="mailto"], .foot a[href^="mailto"] { font-size: 13.5px; letter-spacing: -.01em; }
}

/* ══ 2026-09-28 : 프로그램 상세 '하는 일' 네 칸(.work) — 태블릿 · 폰 ══
   예전 : 아이콘 칸이 44px 인데 아이콘은 52px 이라 글자 칸을 파고들어 제목 · 설명과 겹쳤다.
          아이콘에 음수 여백(-6% / -8%)까지 걸려 있어 카드 선 위로 삐져나왔다.
          설명과 결과물은 아이콘 아래까지 전폭으로 깔려 왼쪽 줄이 맞지 않았다.
   지금 : 아이콘 · 제목이 한 줄에서 가운데로 맞고, 설명 · 결과물은 제목과 같은 왼쪽 선에 선다. */
@media (max-width: 899px) {
  .ps-what .works { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ps-what .work {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px; row-gap: 7px; align-items: start;
    padding: 18px 0; border-bottom: 1px solid var(--line-d);
  }
  .ps-what .work:last-child { border-bottom: 0; }
  .ps-what .work__icw {
    grid-column: 1; grid-row: 1; align-self: center;
    width: 44px; height: 44px; margin: 0; padding: 0;
  }
  .ps-what .work__ic { width: 44px; height: 44px; }
  .ps-what .work__t { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: clamp(16px, 4.3vw, 18px); }
  .ps-what .work__d { grid-column: 2; grid-row: 2; margin: 0; }
  .ps-what .work__get { grid-column: 2; grid-row: 3; margin: 0; }
}
/* 태블릿 세로(600~899)는 두 칸이 들어간다 : 아이콘 줄이 맞도록 칸마다 같은 짜임 유지 */
@media (min-width: 600px) and (max-width: 899px) {
  .ps-what .works { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 36px); }
  .ps-what .work { padding: 20px 0; }
  .ps-what .work:nth-last-child(2) { border-bottom: 0; }
}

/* ══ 2026-09-28 : ABOUT 인사말 — 태블릿 · 폰 ══
   인사말은 공식 사이트의 줄바꿈을 그대로 따라 한 줄씩(.ln) 끊어 놓았다.
   데스크톱에서는 한 줄이 한 줄로 들어가지만, 폰에서는 그 한 줄이 다시 두세 줄로 접혀
   짧은 줄이 스무 개 넘게 쌓이면서 세로로 한없이 길어졌다(390px 에서 글 부분만 734px).
   좁은 화면에서는 줄 묶음을 풀어 보통 문단처럼 흐르게 하고(문장 · 구절 단위 묶음은 .sub 가 유지),
   글자 크기와 줄 간격도 화면에 맞게 줄인다. */
@media (max-width: 899px) {
  .ab-hello__lines .ln { display: inline; }
  /* 구절 묶음(.sub)이 통째로 다음 줄로 넘어가면서 줄 끝이 뭉텅 비었다(한 줄이 반만 차는 곳이 여러 곳).
     좁은 화면에서는 묶음을 풀어 글이 줄을 꽉 채우게 하고, 낱말이 쪼개지는 것은 keep-all 이 막는다. */
  .ab-hello__lines .sub { display: inline; max-width: none; }
  .ab-hello__text p { word-break: keep-all; overflow-wrap: break-word; }
  html.js .ab-hello__lines.is-ready .ln { transform: none; }
  .ab-hello__text { margin-top: clamp(18px, calc(var(--u) * 2), 28px); gap: 1.05em; }
  .ab-hello__text p { font-size: clamp(14.5px, 3.85vw, 16.5px); line-height: 1.62; }
  .ab-hello__h { font-size: clamp(21px, 5.6vw, 28px); line-height: 1.34; }
  .ab-hello__h .ln { display: block; }   /* 제목은 두 줄 그대로 */
  .ab-hello__grid { gap: clamp(22px, 4vw, 36px); }
  .ab-hello__sign { margin-top: clamp(18px, calc(var(--u) * 2), 28px); }
}
@media (max-width: 599px) {
  .ab-hello__photo .leader__photo { max-width: 200px; }
  .ab-hello { padding-block: clamp(44px, 9vw, 60px); }
}

/* ── ABOUT 03 관리 시스템 : 세로로 쌓이는 폭에서 영문(PLAN · MANAGE)과 번호가 오른쪽에 붙었다.
   가로로 놓일 때 쓰던 align-items: flex-end 가 세로 배치에서는 '오른쪽 맞춤'이 되어 버린 탓.
   제목 · 설명과 같은 왼쪽 선에 맞춘다. */
.ab-ensm .ensm__top { align-items: flex-start; text-align: left; }

/* ══ 2026-09-28 : 따라다니는 상담 단추(.dock) — 실제 기기에 맞춘 자리 ══
   · 폰 : 안드로이드 제스처 바가 있는 기기는 env(safe-area-inset-bottom) 이 0 이라
     바닥에서 8px 밖에 안 떨어져 손가락 영역과 겹쳤다. 최소 14px 를 확보한다.
   · 누르는 높이를 46 → 48px 로 키운다.
   · 푸터 끝줄이 단추에 가리지 않게 페이지 맨 아래에 자리를 비워 둔다.
   · 태블릿 : 원형 두 개를 본문 오른쪽 줄에서 조금 더 띄워 글을 덜 가리게 한다. */
@media (max-width: 767px) {
  .dock {
    left: 12px; right: 12px;
    bottom: max(14px, calc(10px + env(safe-area-inset-bottom, 0px)));
    gap: 10px;
  }
  .dock__b { height: 48px; font-size: var(--fs-sm); }
  .foot { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 501px) {
  .dock {
    right: max(16px, calc(var(--col, 20px) * .8));
    bottom: max(18px, calc(14px + env(safe-area-inset-bottom, 0px)));
  }
  .foot { padding-bottom: 96px; }
}
/* 가로로 누운 폰 : 화면이 낮아 단추가 본문을 많이 가린다. 더 작게, 더 구석으로 */
@media (max-height: 500px) and (min-width: 568px) {
  .dock { right: 10px; bottom: max(10px, calc(6px + env(safe-area-inset-bottom, 0px))); }
}

/* ══ 2026-09-28 : 수강 후기 카드 — 태블릿 · 폰 ══
   후기는 학생이 길게 쓴 글이라 문장이 대여섯 개씩 이어진다.
   문장마다 줄을 바꾸는 집 규칙(.sn)이 그대로 걸려 있어 '정말 감사합니다!' 같은 짧은 줄이
   줄줄이 생기고, 카드가 687px 까지 길어졌다.
   좁은 화면에서는 후기 본문만 보통 글처럼 흐르게 하고(제목 · 리드 문구는 그대로),
   글자 · 줄 간격 · 안쪽 여백도 화면에 맞게 조인다. */
@media (max-width: 899px) {
  .nrv__q .sn, .nrv__q .cl { display: inline; max-width: none; }
  .nrv__card { padding: clamp(20px, 5vw, 30px) clamp(18px, 4.6vw, 28px); border-radius: 20px; }
  .nrv__q { gap: .85em; }
  .nrv__q p { font-size: clamp(14.5px, 3.85vw, 16px); line-height: 1.7; }
  .nrv__q .nrv__lead { font-size: clamp(16px, 4.3vw, 19px); line-height: 1.5; padding-left: 12px; }
  .nrv__card::before { font-size: clamp(74px, 18vw, 110px); right: 14px; }
  .nrv__keys { gap: 5px; }
  .nrv__keys li { padding: 6px 11px; font-size: max(12px, .86em); }
  .nrv__cap { margin-top: clamp(16px, 4vw, 24px); }
}
@media (max-width: 899px) {
  /* 줄 높이가 지금 후기에 맞춰 부드럽게 바뀌도록 */
  .nrv__view { transition: height .35s var(--ease); }
  .nrv__list { align-items: flex-start; }
  .nrv__item .nrv__card { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .nrv__view { transition: none; } }

/* ── 상세 페이지 소개글 : 폰에서는 문장 · 구절 단위로 줄을 끊으면 '설문지)까지 준비합니다.' 처럼
   반 줄짜리가 계속 생긴다. 좁은 화면에서는 보통 글처럼 흐르게 하고 낱말만 지킨다. */
@media (max-width: 599px) {
  .ps-hero__lede .sn, .ps-hero__lede .cl { display: inline; max-width: none; }
  .ps-hero__lede.is-stack .l { display: inline; }
  /* 줄로 나눠 둔 조각을 인라인으로 풀면 사이 공백이 없어 낱말이 붙는다(분석해학생에게) */
  .ps-hero__lede.is-stack .l + .l::before { content: " "; }
  .ps-hero__lede { word-break: keep-all; }
}

/* ── 합격 실적 1안 : 합격 현황 면이 표지가 되면서 data-chapter 가 떨어져,
   챕터 면에 주던 머리 아래 여백 규칙이 적용되지 않았다.
   폰에서 제목이 헤더 4px 아래에 붙어 있었다. 헤더 아래 여백을 따로 준다. */
.ps.rs-hero {
  padding-top: max(clamp(76px, calc(var(--u) * 8.2), 148px), calc(var(--top-h, 60px) + 34px));
}

/* ── 상세 페이지 소개글 : 폰에서 17px / 굵기 500 은 제목 바로 아래라 다소 세게 읽힌다.
   한 단 작고 가볍게 내려 제목과 요약 표 사이에서 본문답게 놓이도록 한다. */
@media (max-width: 599px) {
  .ps-hero__lede {
    font-size: clamp(14.5px, 3.9vw, 15.5px); font-weight: 450; line-height: 1.66;
    letter-spacing: -.008em; color: #DFD9E0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   학생부 종합 · 한 달 점검 주기(.cycle) 다시 그리기 (2026-09-28)
   예전 : 점을 %(--at)로 절대 배치하고 첫 점은 왼쪽 맞춤 · 가운데 점은 가운데 맞춤 ·
          끝 점은 오른쪽 맞춤이라, 점과 그 아래 글자가 서로 어긋나 보였다.
          점은 속이 빈 굵은 테두리 원이라 선이 원을 뚫고 지나가는 것처럼 보였고,
          선은 판 끝에서 끝까지 그어져 어디서 시작하고 끝나는지 읽히지 않았다.
   지금 : 세 칸을 똑같이 나눠 점 · 날짜 · 할 일을 한 줄로 세운다.
          선은 첫 점 가운데에서 끝 점 가운데까지만 긋고, 점은 속을 채워 선 위에 놓는다.
          좁은 화면에서는 세로 타임라인으로 바꿔 글이 쪼개지지 않게 한다.
   ══════════════════════════════════════════════════════════════════════════ */

.cycle__bar {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto; margin: clamp(14px, calc(var(--u) * 1.6), 22px) 0 0;
}
/* 트랙 : 첫 점 가운데(1/6) ~ 끝 점 가운데(5/6) */
.cycle__bar::before,
.cycle__bar::after {
  content: ""; position: absolute; left: 16.667%; right: 16.667%; top: 7px;
  height: 2px; border-radius: 2px;
}
.cycle__bar::before { background: rgba(255, 255, 255, .16); }
.cycle__bar::after { background: var(--red-on-noir); transform-origin: 0 50%; }

.cycle__bar li,
.cycle__bar li:first-child,
.cycle__bar li:last-child {
  position: static; left: auto; top: auto; transform: none;
  display: grid; justify-items: center; align-content: start; text-align: center;
  padding: 0 4px; min-width: 0; width: auto;
}
.cycle__bar li::before {
  content: ""; position: relative; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red-on-noir); border: 0;
  box-shadow: 0 0 0 4px rgba(255, 122, 132, .16), 0 0 0 5px rgba(23, 21, 26, .001);
}
.cycle__bar b { margin-top: 13px; font-size: clamp(15px, calc(var(--u) * 1.15), 18px); font-weight: 800; letter-spacing: -.004em; color: #fff; }
.cycle__bar span { margin-top: 3px; font-size: max(12px, var(--fs-2xs)); line-height: 1.45; color: var(--on-noir-2); word-break: keep-all; }

/* 밝은 무대(.exstage) 위에서는 색만 바꾼다 */
.exstage .cycle__bar::before { background: rgba(23, 21, 26, .14); }
.exstage .cycle__bar::after { background: var(--red); }
.exstage .cycle__bar li::before { background: var(--red); border: 0; box-shadow: 0 0 0 4px rgba(215, 16, 42, .12); }
.exstage .cycle__bar b { color: var(--ink); }
.exstage .cycle__bar span { color: var(--ink-3); }

/* 좁은 화면 : 가로로 세 칸을 나누면 한 칸이 100px 밖에 안 돼 '과제 · 교내활동 점검' 이 세 줄로 쪼개진다.
   왼쪽에 선과 점을 세우고 오른쪽에 글을 놓는 세로 타임라인으로 바꾼다. */
@media (max-width: 560px) {
  .cycle__bar { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
  /* 선은 첫 점 가운데에서 끝 점 가운데까지만 (마지막 항목 높이만큼 아래를 비운다) */
  .cycle__bar::before, .cycle__bar::after { left: 7px; right: auto; top: 8px; bottom: calc(100% / 3 - 8px); width: 2px; height: auto; }
  .cycle__bar::after { transform-origin: 50% 0; }
  .cycle__bar li,
  .cycle__bar li:first-child,
  .cycle__bar li:last-child {
    display: grid; grid-template-columns: 16px minmax(0, 1fr); justify-items: start; text-align: left;
    align-content: start; column-gap: 14px; padding: 0 0 18px; width: auto;
  }
  .cycle__bar li:last-child { padding-bottom: 0; }
  .cycle__bar li::before { grid-row: 1 / 3; align-self: start; margin-top: 1px; }
  .cycle__bar b { grid-column: 2; margin-top: 0; line-height: 1.2; }
  .cycle__bar span { grid-column: 2; margin-top: 2px; }
}
@media (max-width: 459px) { .cycle__bar li { width: auto; } }

/* 등장 : 선이 자라고 점이 차례로 뜬다(가로는 좌→우, 세로는 위→아래) */
html.js .cycle.is-ready .cycle__bar::after { transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; }
html.js .cycle.is-ready.is-in .cycle__bar::after { transform: none; }
@media (max-width: 560px) {
  html.js .cycle.is-ready .cycle__bar::after { transform: scaleY(0); }
  html.js .cycle.is-ready.is-in .cycle__bar::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cycle.is-ready .cycle__bar::after { transform: none !important; transition: none; }
}

/* ══ 2026-10-08 : 카카오톡 · 전화 상담 버튼은 첫 화면부터 항상 보인다 ══
   전에는 표지를 지난 뒤에 나타나고(is-in), 큰 상담 면(on-end) · 카드 핀 구간(dock-yield) · 전체 메뉴에서는 비켰다.
   이제 어느 면에서도 비키지 않는다(전체 메뉴에도 상담 버튼이 없으므로 메뉴 위에도 그대로 둔다). */
.dock, .dock.is-in, body.on-end .dock, body.dock-yield .dock, html.menu-open .dock {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
}

/* 2026-10-26 : 인트로 카드 뒷면(카톡 대화)도 읽는 글자 12px 바닥. 예전에는 앞면(합격증)만 깔아 두어
   날짜 · 이름 · 시각이 8~10px 였다(카드를 두 줄 배치로 조금 줄이면서 같이 손봄). 칸이 좁아지는 만큼 말풍선 폭을 넓힌다 */
#s0 .kc__date { font-size: max(12px, 3.4cqi); }
#s0 .kc__name { font-size: max(12px, 3.7cqi); }
#s0 .kc__b { font-size: max(12px, 4.7cqi); }
#s0 .kc__t { font-size: max(12px, 3.1cqi); }
#s0 .kc__read { font-size: max(12px, 3.3cqi); }
#s0 .kc__b--me { max-width: 70cqi; }