@charset "utf-8";
/* ============================================================================
   대치플랜 · program : 프로그램 상세 공통 템플릿 (학원소개 · 합격 실적 · 입시연구소도 같이 쓴다)

   네 상세 페이지가 같은 골격을 쓴다. 바뀌는 것은 내용뿐이다.
   P1 히어로(다크) → P2 이런 경우 → P3 구성(다크, 글래스 아이콘) → P4 진행 순서(커리큘럼 포함) → P6 결과물 → P7 사례(다크) → P8 다음 단계 → P9 상담(다크)
   스크롤은 일반 스크롤, 핀 없음(진행 순서의 왼쪽만 CSS sticky). 등장은 data-reveal(common.js).
   크기는 --u 에 px 바닥 · 천장을 건다(긴 페이지라 낮고 넓은 창에서 글자가 작아지지 않게).
   ========================================================================== */

.ps {
  position: relative; z-index: 1;
  padding: clamp(80px, calc(var(--u) * 8.6), 156px) var(--col);
}
.ps::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ps[data-tone="dark"] { background: #17161A; color: var(--on-noir-2); }
.ps[data-tone="dark"] h1, .ps[data-tone="dark"] h2, .ps[data-tone="dark"] h3 { color: var(--on-noir); }
.ps__head { max-width: 46em; margin-bottom: clamp(32px, calc(var(--u) * 3.6), 64px); }

/* ─────────────────────────────────────────────── P1 히어로 (다크) */
.ps-hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(clamp(56px, calc(var(--u) * 4.6), 82px) + clamp(28px, calc(var(--u) * 3.6), 70px));
  padding-bottom: clamp(32px, calc(var(--u) * 3.4), 64px);
  overflow: hidden;
}
.ps-hero::before {
  background:
    radial-gradient(52% 46% at 78% 34%, rgba(208, 2, 27, .3), rgba(208, 2, 27, 0) 72%),
    radial-gradient(40% 36% at 12% 90%, rgba(255, 122, 132, .09), rgba(255, 122, 132, 0) 74%),
    radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 70%);
}
/* 학원소개 · 실적 · 연구소 : 제목과 한 줄뿐이라 한 화면 전체를 쓰면 위가 비어 보인다 */
.ps-hero--short { min-height: min(100svh, max(520px, 66svh)); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); color: var(--on-noir-2); }
.crumb a { transition: color .2s var(--ease); }
.crumb a:hover { color: #fff; }
.crumb li + li::before { content: "/"; margin-right: .5em; opacity: .5; }
.crumb [aria-current] { color: #fff; font-weight: 700; }
.ps-hero__body { margin-top: auto; padding-top: clamp(32px, calc(var(--u) * 4), 90px); }
.ps-hero__grade { display: block; width: max-content; font-size: var(--fs-md); font-weight: 700; color: var(--red-on-noir); }
.ps-hero__h {
  position: relative; display: inline-block;
  margin-top: clamp(10px, calc(var(--u) * .9), 18px);
  font-size: var(--fs-6xl); font-weight: 900; letter-spacing: -.012em; line-height: 1.02;
  color: #fff; word-break: keep-all;
}
.ps-hero__lede {
  margin-top: clamp(14px, calc(var(--u) * 1.4), 26px); max-width: 34em;
  font-size: var(--fs-lg); line-height: 1.6; font-weight: 500; letter-spacing: -.012em;
  color: #E7E2E8; word-break: keep-all;
}
/* 프로그램 한눈에 : 대상 · 기간 · 방식 · 결과물 (학부모가 먼저 찾는 조건) */
.spec {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px; margin-top: clamp(22px, calc(var(--u) * 2.4), 40px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.spec > div { padding: 14px 20px 0 0; min-width: 0; }
.spec > div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .1); }
.spec dt { font-size: var(--fs-2xs); font-weight: 700; color: var(--on-noir-2); }
.spec dd { margin: 4px 0 0; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0em; line-height: 1.45; color: #fff; word-break: keep-all; }
.ps-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, calc(var(--u) * 2.4), 40px); }
@media (max-width: 767px) {
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .spec > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 599px) {
  /* 폰 : 프로그램 이름은 한 줄 */
  .ps-hero__h { font-size: var(--fs-5xl); }
  .ps-hero__cta .btn { flex: 1 1 auto; }
}

/* 학년 축 : 메인의 학년 지도와 같은 여섯 칸. 이 프로그램이 걸린 시기만 붉다 */
.prail {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(32px, calc(var(--u) * 4), 72px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.prail li {
  position: relative; padding: 14px 8px 0 0;
  font-size: var(--fs-xs); font-weight: 600; color: rgba(246, 244, 245, .42); white-space: nowrap;
}
.prail li small { font-size: .78em; margin-left: .2em; }
.prail li::before {
  content: ""; position: absolute; left: 0; right: 3px; top: -2px; height: 3px; border-radius: 0 0 2px 2px;
  background: transparent; transform-origin: 0 50%;
}
.prail li.on { color: #fff; font-weight: 700; }
.prail li.on::before { background: var(--red-on-noir); }
html.js .prail.is-ready li.on::before { transform: scaleX(0); transition: transform .8s var(--ease) calc(var(--k, 0) * 90ms + 200ms); }
html.js .prail.is-ready.is-in li.on::before { transform: none; }
.ps[data-tone="light"] .prail { border-top-color: rgba(23, 21, 26, .14); }
.ps[data-tone="light"] .prail li { color: rgba(23, 21, 26, .38); }
.ps[data-tone="light"] .prail li.on { color: var(--ink); }
.ps[data-tone="light"] .prail li.on::before { background: var(--red); }
.ps[data-tone="light"] .prail li.next::before { background: repeating-linear-gradient(90deg, var(--red) 0 6px, transparent 6px 10px); }
.ps[data-tone="light"] .prail li.next { color: var(--red); font-weight: 700; }
@media (max-width: 899px) { .prail li small { display: block; margin: 0; } }
@media (max-width: 599px) { .prail li { font-size: var(--fs-2xs); padding-top: 10px; } }

/* ─────────────────────────────────────────────── P2 이런 경우 상담을 권합니다 : 체크리스트
   줄이 화면에 들어오면 체크 표시가 그어진다(해당하는지 스스로 대 보는 목록) */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, calc(var(--u) * 4.4), 88px); }
.checks > li {
  position: relative;
  padding: clamp(18px, calc(var(--u) * 1.8), 30px) 0 clamp(18px, calc(var(--u) * 1.8), 30px) 2.5em;
  border-top: 1px solid rgba(23, 21, 26, .1);
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.006em; line-height: 1.5;
  color: var(--ink); word-break: keep-all;
}
.checks > li::before {
  content: ""; position: absolute; left: 0; top: calc(clamp(18px, calc(var(--u) * 1.8), 30px) + .14em);
  width: 1.3em; height: 1.3em; border-radius: 7px;
  border: 1.5px solid rgba(23, 21, 26, .22); background: #fff;
}
.checks > li::after {
  content: ""; position: absolute; left: .46em; top: calc(clamp(18px, calc(var(--u) * 1.8), 30px) + .34em);
  width: .38em; height: .68em;
  border-right: 2.2px solid var(--red); border-bottom: 2.2px solid var(--red);
  transform: rotate(45deg) scale(0); transform-origin: 60% 70%;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 380ms);
}
.checks > li.is-in::after, html:not(.js) .checks > li::after { transform: rotate(45deg) scale(1); }
@media (max-width: 767px) { .checks { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .checks > li::after { transform: rotate(45deg) scale(1); transition: none; } }

/* ─────────────────────────────────────────────── P3 프로그램 구성 (다크)
   글래스 아이콘(흰 유리 · 붉은 번짐)이 제대로 보이는 먹색 면. 카드는 어두운 유리(.glass-d). */
.ps-what::before {
  background:
    radial-gradient(46% 40% at 82% 18%, rgba(208, 2, 27, .2), rgba(208, 2, 27, 0) 72%),
    radial-gradient(40% 36% at 6% 92%, rgba(255, 122, 132, .07), rgba(255, 122, 132, 0) 74%);
}
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.2), 22px); }
/* 카드 구조 : 윗줄 = 아이콘 + 제목(아이콘 높이 가운데), 그 아래 설명 · 결과물은 카드 폭 전체 → 네 장의 글 왼선이 하나로 맞는다 */
.work {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  column-gap: clamp(12px, calc(var(--u) * 1.1), 18px);
  padding: clamp(22px, calc(var(--u) * 2.4), 40px);
  border-radius: var(--r-lg);
}
/* 아이콘 : 받침 없이 어두운 카드 위에 그대로. 크기 고정(64~84px), 96칸 안쪽 여백만큼 왼쪽 · 위를 당겨 카드 안쪽 선에 맞춘다 */
.work__icw { grid-row: 1; grid-column: 1; width: clamp(64px, calc(var(--u) * 5.6), 84px); margin: -6% 0 -6% -8%; }
.work__ic { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.43, .2, .02, 1); }
@media (hover: hover) { .work:hover .work__ic { transform: translate3d(0, -3px, 0) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .work__ic { transition: none; } }
.work__t { grid-row: 1; grid-column: 2; align-self: center; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.006em; line-height: 1.32; color: #fff; word-break: keep-all; }
.work__d { grid-column: 1 / -1; margin-top: clamp(12px, calc(var(--u) * 1.1), 18px); font-size: clamp(14.5px, calc(var(--u) * 1.02), 17.5px); line-height: 1.7; color: var(--on-noir-2); word-break: keep-all; }
.work__get {
  grid-column: 1 / -1; margin-top: clamp(16px, calc(var(--u) * 1.6), 26px);
  display: flex; align-items: baseline; gap: .8em;
  padding: .85em 1em; border-radius: 10px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 3px 0 0 var(--red-on-noir);
  font-size: clamp(14.5px, calc(var(--u) * 1.02), 17.5px); color: #fff;
}
.work__get span { flex: none; font-size: .82em; font-weight: 700; color: var(--red-on-noir); }
.work__get b { font-weight: 800; letter-spacing: 0em; }
@media (max-width: 899px) { .works { grid-template-columns: minmax(0, 1fr); } }

/* ─────────────────────────────────────────────── P4 진행 순서 (밝음) : 부품은 components.css 의 .story */
.ps-steps::before { background: radial-gradient(50% 40% at 10% 20%, rgba(255, 196, 178, .3), rgba(255, 196, 178, 0) 74%); }
/* 상세는 단계가 많아(최대 8) 한 칸을 조금 낮춘다 */
@media (min-width: 900px) { .ps-steps .story__step { min-height: clamp(220px, 40vh, 420px); } }

/* ─────────────────────────────────────────────── P6 결과물 : 겹쳐 있던 문서가 부채꼴로 펼쳐진다
   네 장이 한 묶음으로 쌓여 있다가 화면에 들어오면 좌우로 벌어진다. 한 장에 손을 얹으면 그 장만 들린다. */
.sheet {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(20px, calc(var(--u) * 2), 32px) clamp(18px, calc(var(--u) * 1.8), 28px);
  border-radius: 6px var(--r-md) var(--r-md) var(--r-md);
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 20, 20, .06), 0 22px 40px -26px rgba(60, 20, 20, .4);
}
.sheet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
.sheet::after { content: ""; position: absolute; right: 0; top: 0; width: 26px; height: 26px; background: linear-gradient(225deg, var(--paper) 50%, #F1E4E0 50%); }
.sheet__kind { font-size: var(--fs-2xs); font-weight: 700; color: var(--red); }
.sheet__t { margin-top: .4em; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.006em; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.sheet__l { margin-top: auto; padding-top: 18px; display: grid; gap: .45em; border-top: 1px dashed rgba(23, 21, 26, .16); }
.sheet__l li { position: relative; padding-left: 1.05em; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.sheet__l li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1.5px; background: var(--red); }

.fan { position: relative; height: clamp(400px, calc(var(--u) * 31), 520px); }
.fan .sheet {
  --w: clamp(230px, calc(var(--u) * 19), 290px);
  position: absolute; left: 50%; top: 24px;
  width: var(--w); min-height: clamp(310px, calc(var(--u) * 24), 400px); margin-left: calc(var(--w) / -2);
  transform: translate3d(calc(var(--i) * 7px), calc(var(--i) * 7px), 0) rotate(calc((var(--i) - 1.5) * 1.4deg));
  z-index: calc(4 - var(--i));
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms + 160ms), box-shadow .35s var(--ease);
}
.fan.is-in .sheet { transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)); }
@media (hover: hover) {
  .fan.is-in .sheet:hover {
    z-index: 6; transform: translate3d(var(--x), calc(var(--y) - 16px), 0) rotate(0deg);
    box-shadow: 0 2px 4px rgba(60, 20, 20, .08), 0 36px 60px -30px rgba(60, 20, 20, .5);
    transition-delay: 0s; transition-duration: .45s;
  }
}
@media (max-width: 899px) {
  .fan { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fan .sheet { position: relative; left: auto; top: auto; width: auto; margin: 0; min-height: 0; transform: none !important; }
}
@media (max-width: 459px) { .fan { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .fan .sheet { transition: none; } }

/* ─────────────────────────────────────────────── P7 사례 (다크) */
.ps-case::before { background: radial-gradient(54% 44% at 86% 30%, rgba(208, 2, 27, .2), rgba(208, 2, 27, 0) 74%); }
.cases2 { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.4), 24px); }
.casebox { padding: clamp(24px, calc(var(--u) * 2.6), 44px); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: clamp(16px, calc(var(--u) * 1.6), 28px); }
.casebox__who { display: flex; flex-wrap: wrap; gap: 6px; }
.casebox__who span { padding: .3em .8em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); color: var(--on-noir); font-weight: 600; }
.casebox__ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.casebox__ba div { padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.casebox__ba div + div { background: rgba(255, 122, 132, .1); box-shadow: inset 0 0 0 1px rgba(255, 122, 132, .22); }
.casebox__ba dt { font-size: var(--fs-2xs); font-weight: 700; color: var(--on-noir-2); }
.casebox__ba div + div dt { color: var(--red-on-noir); }
.casebox__ba dd { margin-top: .35em; font-size: clamp(14.5px, calc(var(--u) * 1.02), 17px); line-height: 1.6; color: var(--on-noir); word-break: keep-all; }
.casebox blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.62; font-weight: 600; letter-spacing: -.012em; color: #fff; word-break: keep-all; }
.casebox figcaption { margin-top: -.4em; font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); color: var(--on-noir-2); }
@media (max-width: 899px) { .cases2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 459px) { .casebox__ba { grid-template-columns: minmax(0, 1fr); } }

/* ─────────────────────────────────────────────── P8 다음 단계 */
.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, calc(var(--u) * 4), 80px); align-items: center; }
.next__h { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.008em; line-height: 1.22; color: var(--ink); word-break: keep-all; }
.next__h .l { display: inline-block; vertical-align: top; }
.next__h em { font-style: normal; color: var(--red); }
.next__p { margin-top: 14px; font-size: var(--fs-md); line-height: 1.7; color: var(--ink-2); max-width: 30em; word-break: keep-all; }
.next .prail { margin-top: clamp(26px, calc(var(--u) * 3), 50px); }
.next__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(26px, calc(var(--u) * 2.8), 48px);
  border-radius: var(--r-xl);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.next__card:hover { transform: translateY(-6px); }
.next__grade { font-size: clamp(13px, calc(var(--u) * .9), 15.5px); font-weight: 700; color: var(--red); }
.next__t { font-size: clamp(26px, calc(var(--u) * 2.8), 50px); font-weight: 900; letter-spacing: -.01em; line-height: 1.1; color: var(--ink); }
.next__d { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.next__go { margin-top: 14px; display: inline-flex; align-items: center; gap: .7em; font-weight: 700; color: var(--ink); font-size: clamp(14px, calc(var(--u) * .98), 17px); }
.next__card:hover .go { transform: translateX(3px); background: var(--red); color: #fff; }
.next__also { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-3); }
.next__also a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23, 21, 26, .3); }
@media (max-width: 899px) { .next { grid-template-columns: minmax(0, 1fr); } }

/* ─────────────────────────────────────────────── P9 상담 (다크) : 예약 → 방문 진단 → 계획 전달 */
.ps-contact { padding-block: clamp(90px, calc(var(--u) * 10), 170px); }
.ps-contact::before { background: radial-gradient(54% 60% at 24% 50%, rgba(240, 48, 64, .22), rgba(240, 48, 64, 0) 74%); }
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, calc(var(--u) * 5.4), 120px) clamp(32px, calc(var(--u) * 5.4), 120px); align-items: center; }
.book__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, calc(var(--u) * 2.4), 40px); }
.book__steps { counter-reset: bk; }
.book__steps > li {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 2px 14px;
  padding: clamp(18px, calc(var(--u) * 1.8), 30px) 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.book__steps > li::before {
  counter-increment: bk; content: counter(bk, decimal-leading-zero);
  grid-row: 1 / 3; padding-top: .1em;
  font-size: clamp(20px, calc(var(--u) * 1.8), 30px); font-weight: 900; letter-spacing: -.004em; line-height: 1;
  color: var(--red-on-noir); font-variant-numeric: tabular-nums;
}
.book__steps b { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.004em; color: #fff; }
.book__steps span { font-size: clamp(14px, calc(var(--u) * 1), 17px); line-height: 1.6; color: var(--on-noir-2); word-break: keep-all; }
.book__prep { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-sm); color: var(--on-noir-2); }
.book__prep b { margin-right: .8em; color: #fff; }
@media (max-width: 899px) { .book { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .book__cta .btn { flex: 1 1 100%; } }

/* ══════════════════════════════════════════════════════════════════════════
   학원소개 · 합격 실적 · 입시연구소 : 같은 히어로 · 상담 블록 위에 페이지 고유 블록만 더한다
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 대표원장 */
.leader { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, calc(var(--u) * 4.4), 88px); align-items: end; }
.leader__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-xl); background: linear-gradient(165deg, #FFFFFF 0%, #F8E6E1 100%); box-shadow: var(--e2); }
.leader__photo img { position: absolute; left: 50%; bottom: 0; width: auto; height: 96%; max-width: none; transform: translateX(-50%); }
.leader__role { font-size: clamp(14px, calc(var(--u) * 1), 17px); font-weight: 700; color: var(--red); }
.leader__name { margin-top: .12em; font-size: clamp(36px, calc(var(--u) * 4.6), 84px); font-weight: 900; letter-spacing: -.012em; line-height: 1.04; color: var(--ink); }
.leader__p { margin-top: 18px; max-width: 34em; font-size: var(--fs-md); line-height: 1.78; color: var(--ink-2); word-break: keep-all; }
.leader__list { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(23, 21, 26, .1); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.leader__list li { position: relative; padding-left: 1em; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.leader__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1.5px; background: var(--red); }
.leader__sign { margin-top: 22px; width: clamp(120px, calc(var(--u) * 11), 190px); height: auto; opacity: .85; }
@media (max-width: 899px) {
  .leader { grid-template-columns: minmax(0, 1fr); }
  .leader__photo { width: min(100%, 420px); }
  .leader__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── 운영 방식 : 항목 · 내용 두 칸 표 */
.ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, calc(var(--u) * 4.4), 88px); }
.ops > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: clamp(18px, calc(var(--u) * 1.8), 30px) 0; border-top: 1px solid rgba(23, 21, 26, .1); }
.ops dt { padding-top: .2em; font-size: var(--fs-sm); font-weight: 700; color: var(--red); }
.ops dd { margin: 0; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.012em; line-height: 1.55; color: var(--ink); word-break: keep-all; }
.ops dd small { display: block; margin-top: 4px; font-size: .76em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
@media (max-width: 767px) { .ops { grid-template-columns: minmax(0, 1fr); } .ops > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ── 다섯 프로그램 바로가기 (다크) */
.plinks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, calc(var(--u) * 1), 18px); }
.plink {
  display: flex; flex-direction: column; gap: 8px;
  min-height: clamp(190px, calc(var(--u) * 16), 270px);
  padding: clamp(18px, calc(var(--u) * 1.8), 30px);
  border-radius: var(--r-lg);
  transition: transform .32s var(--ease), border-color .32s var(--ease);
}
.plink:hover, .plink:focus-visible { transform: translateY(-6px); border-color: rgba(255, 255, 255, .24); }
.plink__g { font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); font-weight: 700; color: var(--red-on-noir); }
.plink__t { font-size: clamp(19px, calc(var(--u) * 1.6), 28px); font-weight: 800; letter-spacing: -.008em; line-height: 1.2; color: #fff; }
.plink__d { font-size: var(--fs-sm); line-height: 1.55; color: var(--on-noir-2); word-break: keep-all; }
.plink .go { margin-top: auto; }
.plink:hover .go, .plink:focus-visible .go { background: var(--red); transform: translateX(3px); }
.plink--ext { border-style: dashed; }
@media (max-width: 1023px) { .plinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 459px) { .plinks { grid-template-columns: minmax(0, 1fr); } .plink { min-height: 0; } }

/* ── 오시는 길 · 상담 안내 */
.visit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.2), 22px); }
.visit > div { padding: clamp(20px, calc(var(--u) * 2.2), 36px); border-radius: var(--r-lg); }
.visit dt { font-size: clamp(13px, calc(var(--u) * .9), 15px); font-weight: 700; color: var(--ink-3); }
.visit dd { margin-top: 8px; font-size: clamp(18px, calc(var(--u) * 1.4), 25px); font-weight: 800; letter-spacing: -.004em; line-height: 1.4; color: var(--ink); word-break: keep-all; }
.visit dd a { color: var(--red); }
.visit dd small { display: block; margin-top: 6px; font-size: .6em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
@media (max-width: 899px) { .visit { grid-template-columns: minmax(0, 1fr); } }

/* ── 거르기 버튼 */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: clamp(20px, calc(var(--u) * 2.2), 36px); }
.chip {
  padding: .62em 1.15em; border-radius: var(--r-pill);
  border: 1px solid rgba(23, 21, 26, .16); background: rgba(255, 255, 255, .6);
  font-family: var(--f); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0em;
  color: var(--ink-2); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { border-color: rgba(23, 21, 26, .36); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips__n { margin-left: auto; font-size: clamp(13px, calc(var(--u) * .9), 15px); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 합격 사례 */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, calc(var(--u) * 1), 18px); }
.rcell {
  display: grid; grid-template-columns: clamp(50px, calc(var(--u) * 4.2), 70px) minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: clamp(14px, calc(var(--u) * 1.4), 24px); border-radius: var(--r-lg);
}
.rcell__mark {
  grid-row: 1 / 4; width: 100%; aspect-ratio: 1; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--uc, var(--ink)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: -.004em;
}
.rcell__mark img { width: auto; height: calc(58% * var(--k, 1)); }
.rcell__u { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.004em; line-height: 1.3; color: var(--ink); }
.rcell__d { font-size: var(--fs-sm); color: var(--ink-2); }
.rcell__t { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-2xs); color: var(--ink-3); }
.rcell__t b { font-weight: 700; color: var(--red); }
@media (max-width: 1023px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .rgrid { grid-template-columns: minmax(0, 1fr); } }

/* ── 후기 모음 (다크) : 가운데 열을 한 칸 내려 격자가 딱딱하지 않게 */
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, calc(var(--u) * 1.1), 20px); align-items: start; }
.vcard { margin: 0; padding: clamp(22px, calc(var(--u) * 2.2), 36px); border-radius: var(--r-lg); }
.vcard:nth-child(3n + 2) { margin-top: clamp(0px, calc(var(--u) * 2.6), 44px); }
.vcard blockquote { margin: 0; font-size: var(--fs-md); line-height: 1.66; font-weight: 500; color: var(--on-noir); word-break: keep-all; }
.vcard figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 1em; font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); color: var(--on-noir-2); }
.vcard figcaption b { font-weight: 700; color: var(--red-on-noir); }
@media (max-width: 1023px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcard:nth-child(3n + 2) { margin-top: 0; } }
@media (max-width: 599px) { .vgrid { grid-template-columns: minmax(0, 1fr); } }

/* ── 입시리포트 목록 */
.rlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.2), 22px); }
.ritem {
  scroll-margin-top: 110px;
  display: grid; grid-template-columns: clamp(120px, calc(var(--u) * 12), 200px) minmax(0, 1fr);
  overflow: hidden; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--e1);
}
.ritem:target { box-shadow: 0 0 0 2px var(--red), var(--e2); }
.ritem__cover { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; padding: 14px; background: var(--uc, var(--noir)); color: #fff; }
.ritem__cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 46%); }
.ritem__cover--noir { background: var(--noir); }
.ritem__cover--noir::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 80% 90%, rgba(208, 2, 27, .45), rgba(208, 2, 27, 0) 70%); }
.ritem__cover img { position: absolute; right: -14%; bottom: -14%; width: auto; height: 90%; opacity: .14; }
.ritem__kind { position: relative; z-index: 1; align-self: flex-start; padding: .3em .78em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); font-size: var(--fs-2xs); font-weight: 700; }
.ritem__big { position: relative; z-index: 1; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.008em; line-height: 1.05; }
.ritem__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, calc(var(--u) * 1.6), 26px); }
.ritem__meta { display: flex; gap: 1em; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ritem__t { font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.004em; line-height: 1.4; color: var(--ink); word-break: keep-all; }
.ritem__d { font-size: var(--fs-sm); line-height: 1.62; color: var(--ink-2); word-break: keep-all; }
.ritem__go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: .6em; align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--ink); }
.ritem__go:hover .go, .ritem__go:focus-visible .go { transform: translateX(3px); background: var(--red); color: #fff; }
.ritem--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ritem--lead .ritem__cover { min-height: clamp(240px, calc(var(--u) * 22), 380px); padding: clamp(18px, calc(var(--u) * 2), 32px); }
.ritem--lead .ritem__big { font-size: clamp(36px, calc(var(--u) * 4.4), 80px); }
.ritem--lead .ritem__t { font-size: var(--fs-2xl); }
.ritem--lead .ritem__body { justify-content: center; padding: clamp(22px, calc(var(--u) * 2.6), 44px); }
@media (max-width: 899px) { .rlist { grid-template-columns: minmax(0, 1fr); } .ritem--lead { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 459px) { .ritem { grid-template-columns: minmax(0, 1fr); } .ritem__cover { min-height: 120px; } }
.ritem[hidden], .rcell[hidden], .vcard[hidden] { display: none !important; }

/* 다음 페이지로 넘어갈 때 : 프로그램 이름이 이어진다(지원하는 브라우저에서만) */
@media (prefers-reduced-motion: no-preference) {
  .ps-hero__h { view-transition-name: var(--vt, none); }
}

/* ══════════════════════════════════════════════════════════════════════════
   시안1 「가로 챕터」 · 상세 · 학원 페이지
   히어로 아래 페이지 차례(.htoc) · 챕터 번호(.chap, common.js) · 헤더 아래 레일(.rail, common.js)
   02 구성 : 네 칸 가로 띠 / 03 진행 순서 : 가로 단계 트랙(.track) / 07 상담 : 가로 세 단계
   ══════════════════════════════════════════════════════════════════════════ */
.ps[data-chapter] .ps__head .chap, .ps[data-chapter] .book__head .chap { margin-bottom: clamp(10px, calc(var(--u) * 1.2), 20px); }

/* ── P1 히어로 : 학년 축 + 페이지 차례 */
.ps-hero__foot { margin-top: clamp(28px, calc(var(--u) * 3.4), 64px); }
.ps-hero__foot .prail { margin-top: 0; }
.htoc { margin-top: clamp(18px, calc(var(--u) * 2), 34px); }
.htoc__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 8px;
  overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--col) * -1); padding: 2px var(--col) 4px;
}
.htoc__list::-webkit-scrollbar { display: none; }
.htoc__a {
  display: flex; align-items: baseline; gap: .6em; height: 100%;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  font-size: var(--fs-sm); font-weight: 600; color: var(--on-noir-2); white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.htoc__a b { font-weight: 800; color: var(--red-on-noir); font-variant-numeric: tabular-nums; }
.htoc__a:hover, .htoc__a:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .07); }
.htoc__a:focus-visible { outline-color: var(--red-on-noir); }
@media (min-width: 1024px) { .htoc__list { overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* ── P3 구성 : 네 칸 가로 띠. 칸 사이 세로선, 네 칸의 제목 · 설명 · 결과물이 같은 높이에 선다 */
.ps-what .works { gap: 0; border-top: 1px solid var(--line-d); }
.ps-what .work {
  position: relative; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column;
  padding: clamp(22px, calc(var(--u) * 2.4), 40px) clamp(18px, calc(var(--u) * 2), 34px) clamp(22px, calc(var(--u) * 2.4), 40px) 0;
  border-bottom: 1px solid var(--line-d);
}
.ps-what .work__icw { width: clamp(64px, calc(var(--u) * 5.6), 88px); margin: -6% 0 0 -8%; }
.ps-what .work__t { margin-top: clamp(10px, calc(var(--u) * 1), 16px); align-self: stretch; text-align: left; }
.ps-what .work__get { margin-top: auto; }
.ps-what .work__d { margin-bottom: clamp(16px, calc(var(--u) * 1.6), 26px); }
@media (min-width: 600px) and (max-width: 1199px) {
  .ps-what .works { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, calc(var(--u) * 2.4), 40px); }
}
@media (min-width: 1200px) {
  .ps-what .works { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; border-bottom: 1px solid var(--line-d); }
  .ps-what .work { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; border-bottom: 0; padding-inline: clamp(18px, calc(var(--u) * 2), 34px); }
  .ps-what .work + .work { border-left: 1px solid var(--line-d); }
  .ps-what .work:first-child { padding-left: 0; }
  .ps-what .work:last-child { padding-right: 0; }
  .ps-what .work > * { grid-column: 1; }
  .ps-what .work__icw { grid-row: 1; }
  .ps-what .work__t { grid-row: 2; align-self: start; }
  .ps-what .work__d { grid-row: 3; }
  .ps-what .work__get { grid-row: 4; }
}

/* ── P4 진행 순서 : 핀이 걸리면 한 화면 */
.ps-steps .ps__head { margin-bottom: clamp(24px, calc(var(--u) * 3.2), 56px); }
.ps-steps.has-pin-track {
  height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--head-off) + var(--u) * 2.4); padding-bottom: calc(var(--u) * 3);
}
.ps-steps .track.is-pinned .track__view { margin-right: calc(var(--col) * -1); }

/* ── P9 상담 : 제목 · 버튼 위, 예약 → 방문 진단 → 계획 전달이 가로 한 줄 */
@media (min-width: 900px) {
  .ps-contact .book { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: clamp(32px, calc(var(--u) * 4), 72px); }
  .ps-contact .book__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
  .ps-contact .book__head .chap, .ps-contact .book__head .sec-h, .ps-contact .book__head .sec-p { grid-column: 1; }
  .ps-contact .book__cta { grid-column: 2; grid-row: 2 / 4; align-self: end; margin-top: 0; }
  .ps-contact .book__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, calc(var(--u) * 3), 56px); }
  .ps-contact .book__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--line-d); }
  .ps-contact .book__steps > li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0; border-top: 0; }
  .ps-contact .book__steps > li::before {
    position: relative; z-index: 1; align-self: flex-start; padding: 0 14px 0 0; margin-bottom: 14px;
    background: #17161A; line-height: 30px;
  }
}
.ps-steps::before { background: none; }
@media (min-width: 1024px) and (max-height: 820px) {
  .ps-steps.has-pin-track { padding-bottom: 64px; }
}
/* 헤더 + 챕터 레일 아래에서 챕터가 시작하게 : 레일로 이동했을 때 챕터 번호 · 제목이 가리지 않는다 */
@media (min-width: 1024px) and (min-height: 560px) {
  .ps[data-chapter] { padding-top: max(clamp(80px, calc(var(--u) * 8.6), 156px), calc(var(--head-off) + 28px)); }
}
/* 글자 바닥 12px */
.prail li small { font-size: max(12px, .78em); }
.work__get span { font-size: max(12px, .82em); }
@media (max-width: 599px) { .prail li { font-size: var(--fs-2xs); } }
.visit dd small { font-size: max(12px, .6em); }
@media (max-width: 767px), (pointer: coarse) {
  .chip { min-height: 44px; }
  .ritem__go { min-height: 44px; }
  .visit dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .next__also a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* 결과물 부채꼴은 폭 1024+ 에서만(900~1023 에서는 네 장이 화면 밖으로 3~40px 삐져나왔다) */
@media (min-width: 900px) and (max-width: 1023px) {
  .fan { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fan .sheet { position: relative; left: auto; top: auto; width: auto; margin: 0; min-height: 0; transform: none !important; }
}
.ps-steps .track.is-pinned .track__rail { padding-right: var(--col); }  /* 줄 끝에서 마지막 단계가 본문 끝선에 멈추게 */

/* ═══════════════════════════════════════════════ 학원소개 (about.html)
   내용 : 대치학원 공식 사이트(인사말 · 강의안내 · 캠퍼스). 챕터 레일과 가로 단계 트랙은 시안1 공통 부품을 쓴다.
   모션 : 인사말 인용문 낱말 차오름(IO) · 6인 협력 선 긋기(IO) + 사람 누르면 역할 바뀜 · 강의 탭 · 캠퍼스 지역 거르기 · 첫 화면 숫자 올리기 */

/* ── 첫 화면 숫자 줄 */
.ab-stat {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px; margin-top: clamp(22px, calc(var(--u) * 2.6), 44px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.ab-stat > div { padding: 16px 20px 0 0; min-width: 0; }
.ab-stat > div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .1); }
.ab-stat dt { font-size: var(--fs-2xs); font-weight: 700; color: var(--on-noir-2); }
.ab-stat dd { margin: 6px 0 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: 0em; color: #fff; }
/* 큰 숫자 : 고정폭 숫자(tabular)는 '1' 둘레가 비어 벌어져 보여 비례 숫자로. 단위(년 · 곳)와는 살짝만 띄운다 */
.ab-stat dd b { font-size: 1.5em; font-weight: 800; font-variant-numeric: proportional-nums; letter-spacing: 0em; margin-right: .08em; }
.ab-stat small { display: block; margin-top: 4px; font-size: var(--fs-2xs); color: var(--on-noir-2); word-break: keep-all; }
@media (max-width: 767px) {
  .ab-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .ab-stat > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ── 03 교육 시스템 : 트랙 번호 자리에 E · N · S · M */
.ab-ensm .track__n { font-size: clamp(40px, calc(var(--u) * 4.4), 78px); }
.ab-ensm .track__when { font-weight: 700; letter-spacing: .01em; }

/* ── 04 강의 안내 (다크) : 과정 탭 + 과목 */
.ab-course__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ab-tab {
  display: grid; gap: 4px; padding: clamp(16px, calc(var(--u) * 1.6), 24px) clamp(18px, calc(var(--u) * 2), 30px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg); background: rgba(255, 255, 255, .03);
  font-family: var(--f); text-align: left; color: var(--on-noir-2); cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ab-tab b { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.002em; }
.ab-tab span { font-size: var(--fs-sm); word-break: keep-all; }
.ab-tab:hover { border-color: rgba(255, 255, 255, .28); color: #fff; }
.ab-tab.is-on { background: linear-gradient(150deg, rgba(208, 2, 27, .32), rgba(208, 2, 27, .08)); border-color: rgba(255, 122, 132, .5); color: #fff; }
.ab-tab:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 3px; }
.ab-cpanel { padding-top: clamp(24px, calc(var(--u) * 2.8), 44px); }
html.js .ab-cpanel:not(.is-on) { display: none; }
html.js .ab-cpanel.is-on > * { animation: abIn .7s cubic-bezier(.43, .2, .02, 1) both; }
html.js .ab-cpanel.is-on > :nth-child(2) { animation-delay: .08s; }
@keyframes abIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.ab-cpanel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-bottom: clamp(20px, calc(var(--u) * 2.2), 32px); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ab-cpanel__lede { max-width: 32em; font-size: var(--fs-lead); font-weight: 600; line-height: 1.65; color: #fff; word-break: keep-all; }
.ab-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-levels span { padding: .5em .95em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); font-size: clamp(13px, calc(var(--u) * .92), 15px); font-weight: 700; color: #fff; white-space: nowrap; }
.ab-levels span:last-child { background: rgba(208, 2, 27, .3); }
.ab-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, calc(var(--u) * 3), 48px); }
.ab-subjects--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-subjects li { display: flex; flex-direction: column; padding-top: clamp(20px, calc(var(--u) * 2.2), 32px); }
.ab-subj__en { font-family: "Yellowtail", cursive; font-size: var(--fs-xl); line-height: 1; color: var(--red-on-noir); }
.ab-subjects h3 { margin-top: 6px; font-size: clamp(22px, calc(var(--u) * 2), 32px); font-weight: 900; letter-spacing: -.002em; color: #fff; }
.ab-subj__tags { margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: clamp(13px, calc(var(--u) * .92), 15px); font-weight: 700; line-height: 1.55; color: #F0C6CB; word-break: keep-all; }
.ab-subj__d { margin-top: 12px; font-size: clamp(14px, calc(var(--u) * .98), 16px); line-height: 1.7; color: var(--on-noir-2); word-break: keep-all; }
.ab-course__note { margin-top: clamp(28px, calc(var(--u) * 3), 48px); font-size: clamp(13px, calc(var(--u) * .92), 15px); color: var(--on-noir-2); }
@media (max-width: 1279px) { .ab-subjects--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ab-subjects, .ab-subjects--5 { grid-template-columns: minmax(0, 1fr); }
  .ab-course__tabs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html.js .ab-cpanel.is-on > * { animation: none; } }

/* ── 05 캠퍼스 : 대치캠퍼스 카드 + 지역 거르기 목록 */
.ab-hq { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, calc(var(--u) * 4), 72px); padding: clamp(24px, calc(var(--u) * 3.4), 56px); border-radius: var(--r-xl); }
.ab-hq__tag { font-size: clamp(13px, calc(var(--u) * .92), 15px); font-weight: 700; color: var(--red); }
.ab-hq__name { margin-top: 6px; font-size: clamp(32px, calc(var(--u) * 3.6), 62px); font-weight: 900; letter-spacing: -.006em; line-height: 1.1; color: var(--ink); }
.ab-hq__addr { margin-top: 10px; font-size: var(--fs-lead); font-weight: 600; color: var(--ink-2); word-break: keep-all; }
.ab-hq__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(20px, calc(var(--u) * 2.4), 36px); }
.ab-maplink { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-size: clamp(14px, calc(var(--u) * 1), 17px); font-weight: 700; color: var(--ink); }
.ab-maplink:hover .go, .ab-maplink:focus-visible .go { transform: translateX(3px); background: var(--red); }
.ab-hq__info { align-self: center; margin: 0; border-top: 1px solid var(--line-l); }
.ab-hq__info > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-l); }
.ab-hq__info dt { font-size: clamp(13px, calc(var(--u) * .92), 15px); font-weight: 700; color: var(--ink-3); }
.ab-hq__info dd { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--ink); word-break: keep-all; }
.ab-hq__info dd small { display: block; margin-top: 2px; font-size: max(12px, .8em); font-weight: 500; color: var(--ink-3); }
.ab-hq__info a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23, 21, 26, .25); text-underline-offset: 4px; }
.ab-sns { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ab-chips { margin-top: clamp(40px, calc(var(--u) * 4.4), 72px); }
.ab-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ab-camp {
  position: relative; display: grid; align-content: start; gap: 4px;
  padding: clamp(18px, calc(var(--u) * 1.8), 26px) clamp(18px, calc(var(--u) * 1.8), 26px) 22px;
  border-radius: var(--r-lg); background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08);
  transition: box-shadow .3s var(--ease), transform .45s cubic-bezier(.43, .2, .02, 1);
}
.ab-camp[hidden] { display: none; }
html.js .ab-camp.is-in { animation: abIn .6s cubic-bezier(.43, .2, .02, 1) both; }
.ab-camp.is-hq { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(208, 2, 27, .45); }
@media (hover: hover) { .ab-camp:hover { transform: translate3d(0, -3px, 0); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .14), 0 18px 34px -24px rgba(84, 34, 30, .45); } }
.ab-camp__r { font-size: 12.5px; font-weight: 700; color: var(--red); }
.ab-camp__n { padding-right: 56px; font-size: clamp(19px, calc(var(--u) * 1.55), 24px); font-weight: 800; letter-spacing: -.002em; color: var(--ink); }
.ab-camp__a { margin-top: 4px; font-size: clamp(14px, calc(var(--u) * .95), 15.5px); line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.ab-camp__t { margin-top: 6px; font-size: clamp(14px, calc(var(--u) * 1), 16px); font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-camp__t a { color: var(--ink); }
.ab-camp__map {
  position: absolute; top: clamp(16px, calc(var(--u) * 1.6), 24px); right: clamp(16px, calc(var(--u) * 1.6), 24px);
  display: grid; place-items: center; min-width: 48px; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;
}
.ab-camp__map:hover, .ab-camp__map:focus-visible { background: var(--red); }
@media (max-width: 899px) { .ab-hq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px), (pointer: coarse) {
  .ab-camp__t a, .ab-hq__info a { display: inline-flex; align-items: center; min-height: 44px; }
  .ab-camp__map { height: 44px; min-width: 56px; }
}
@media (prefers-reduced-motion: reduce) { html.js .ab-camp.is-in { animation: none; } .ab-camp { transition: none; } }

/* ── 상담 단계 번호 : 번호 뒤에 배경 판을 깔아 선을 가리던 방식 대신, 선을 번호 오른쪽에서부터 칸마다 긋는다.
   면 배경이 그라데이션이어도 번호 둘레에 까만 네모가 생기지 않는다 */
@media (min-width: 900px) {
  .ps-contact .book__steps::before { content: none; }
  .ps-contact .book__steps > li::before { background: none; padding: 0; }
  .ps-contact .book__steps > li::after {
    content: ""; position: absolute; top: 15px; left: calc(2.4em + 14px);
    right: calc(clamp(20px, calc(var(--u) * 3), 56px) * -1); height: 1px; background: var(--line-d);
  }
  .ps-contact .book__steps > li:last-child::after { right: 0; }
}

/* ── 01 인사말 : 왼쪽 사진(화면에 붙음) · 오른쪽 본문 → 서명. 이름 · 직함은 서명 한 곳에만 둔다 */
.ab-hello__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, calc(var(--u) * 6.4), 128px); align-items: start; }
.ab-hello__photo { position: sticky; top: calc(var(--head-off, 110px) + 32px); }
.ab-hello__photo .leader__photo { aspect-ratio: 4 / 5; }
.ab-hello__body { max-width: 40em; }
.ab-hello__h { font-size: clamp(24px, calc(var(--u) * 2.35), 40px); line-height: 1.38; }
.ab-hello__h2 { color: var(--red); }
.ab-hello__text { margin-top: clamp(28px, calc(var(--u) * 3.2), 52px); display: grid; gap: 1.3em; }
.ab-hello__text p { font-size: clamp(16px, calc(var(--u) * 1.18), 19px); line-height: 1.9; color: var(--ink-2); word-break: keep-all; }
/* 한 줄 = 원문 한 줄. 좁은 화면에서 한 줄이 넘치면 그 줄 안에서만 낱말 단위로 꺾인다 */
.ab-hello__lines .ln { display: block; }
.ab-hello__lines .sub { display: inline-block; max-width: 100%; }
.ab-hello__text .em-r { font-weight: 700; color: var(--red); }
.ab-hello__text .em-b { font-weight: 700; color: var(--ink); }
@media (max-width: 599px) {
  .ab-hello__h { font-size: var(--fs-3xl); }
}
/* 등장 : 줄이 차례로 12px 떠오르며 선명해지고, 강조 낱말은 잉크색에서 붉은색으로(한 번). 모션 축소면 처음부터 다 보인다 */
html.js .ab-hello__lines.is-ready .ln { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform 1.1s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .ab-hello__lines.is-ready .em-r { color: var(--ink); transition: color .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 650ms); }
html.js .ab-hello__lines.is-in .ln { opacity: 1; transform: none; }
html.js .ab-hello__lines.is-in .em-r { color: var(--red); }
.ab-hello__sign {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: clamp(28px, calc(var(--u) * 3), 48px); font-size: clamp(14px, calc(var(--u) * .98), 16px); color: var(--ink-3);
}
.ab-hello__sign b { font-size: 1.2em; font-weight: 800; color: var(--ink); }
.ab-hello__sign img { width: clamp(104px, calc(var(--u) * 9), 150px); height: auto; opacity: .85; }

/* 약력 표 : 연도가 먼저 오는 한국식 약력. [구분 7em] [연도 6em] [내용 · 부문]
   구분 칸은 묶음(rowspan)이라 학력 · 수상의 높이가 표 안에서 저절로 맞는다 */
.ab-cv { margin-top: clamp(64px, calc(var(--u) * 7.4), 128px); padding: clamp(28px, calc(var(--u) * 3.8), 60px); border-radius: var(--r-xl); }
.ab-cv__h { padding-bottom: clamp(18px, calc(var(--u) * 2), 30px); font-size: clamp(22px, calc(var(--u) * 2), 34px); font-weight: 900; letter-spacing: 0em; color: var(--ink); }
.ab-cvt { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.ab-cvt th, .ab-cvt td { padding: clamp(14px, calc(var(--u) * 1.4), 20px) 0; border-bottom: 1px solid var(--line-l); text-align: left; vertical-align: top; }
.ab-cvt tbody:last-child tr:last-child td { border-bottom: 0; }
.ab-cv__g {
  width: 7em; padding-right: 16px !important; border-right: 1px solid var(--line-l);
  font-size: clamp(14px, calc(var(--u) * 1), 16px); font-weight: 800; color: var(--ink);
}
.ab-cvt tbody + tbody .ab-cv__g { border-top: 1px solid var(--line-l); }
.ab-cv__y {
  width: 6.5em; padding-left: clamp(18px, calc(var(--u) * 2.4), 40px) !important;
  font-size: var(--fs-md); font-weight: 800; color: var(--red); white-space: nowrap;
}
.ab-cv__y span { color: rgba(23, 21, 26, .3); font-weight: 600; }
.ab-cv__t { font-size: var(--fs-md); font-weight: 600; line-height: 1.55; color: var(--ink); word-break: keep-all; }
.ab-cv__f { margin-left: .6em; font-size: .88em; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
@media (hover: hover) { .ab-cvt tbody tr:hover .ab-cv__t { color: var(--red); } }
@media (max-width: 767px) {
  .ab-cvt, .ab-cvt tbody, .ab-cvt tr, .ab-cvt th, .ab-cvt td { display: block; }
  .ab-cvt tr { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); column-gap: 12px; border-bottom: 1px solid var(--line-l); }
  .ab-cvt th, .ab-cvt td { border: 0 !important; padding: 12px 0 !important; }
  .ab-cv__g { grid-column: 1 / -1; width: auto; padding: 18px 0 4px !important; font-size: var(--fs-sm); color: var(--red); }
  .ab-cvt tbody + tbody .ab-cv__g { border-top: 0; }
  .ab-cv__y { width: auto; padding-left: 0 !important; }
  .ab-cv__f { display: block; margin: 2px 0 0; white-space: normal; }
}



/* ── 02 교육 이념 (다크) : 원형 도식 + 역할 설명 목록
   도식 : 여섯 조각(가로세로 600 좌표)이 모여 하나의 고리를 이루고 가운데에 입시 성공. 조각 사이 틈은 폭이 일정하다.
   색은 공식 도식처럼 붉은 조각 셋 · 먹회색 조각 셋을 엇갈려 둔다. 바깥 눈금은 조각 경계만 진하게.
   설명 목록은 도식과 같은 시계 방향 순서. 호버 없음. */
.rg-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, calc(var(--u) * 6), 120px); align-items: center; }
.rg-text .ps__head { margin-bottom: 0; }
.hl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, calc(var(--u) * 3), 48px); margin-top: clamp(32px, calc(var(--u) * 3.6), 56px); list-style: none; }
.hl { position: relative; padding: clamp(18px, calc(var(--u) * 1.8), 26px) 0 clamp(18px, calc(var(--u) * 1.8), 26px); border-top: 1px solid rgba(255, 255, 255, .1); }
.hl::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; background: #77727E; }
.hl--red::before { background: var(--red-on-noir); }
.hl__n { font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0em; color: #fff; }
.hl__d { margin-top: 8px; font-size: clamp(14px, calc(var(--u) * .98), 15.5px); line-height: 1.65; color: var(--on-noir-2); word-break: keep-all; }

.rg-stage { width: 100%; }
.rg { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin-inline: auto; }
.rg::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(208, 2, 27, .28), rgba(208, 2, 27, 0)); pointer-events: none; }
.rg-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; font-family: inherit; }
.rg-orbit { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.rg-tick { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.2; }
.rg-tick--major { stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
.rg-seg path { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.rg-seg--red path { fill: url(#rg-red); }
.rg-seg--ink path { fill: url(#rg-ink); }
.rg-ko { fill: #fff; font-size: 23px; font-weight: 800; letter-spacing: 0em; text-anchor: middle; }
.rg-en { fill: rgba(255, 255, 255, .6); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-anchor: middle; }
.rg-core circle { fill: url(#rg-core); stroke: rgba(255, 122, 132, .4); stroke-width: 1.2; }
.rg-core__s { fill: var(--red-on-noir); font-size: 17px; font-weight: 700; text-anchor: middle; }
.rg-core__b { fill: #fff; font-size: 46px; font-weight: 900; letter-spacing: 0em; text-anchor: middle; }

/* 등장 : 가운데 → 여섯 조각이 시계 방향으로 돌아 들어와 고리를 닫는다 → 눈금(한 번). 모션 축소면 처음부터 다 보인다 */
html.js .rg-wrap.is-ready .rg-seg,
html.js .rg-wrap.is-ready .rg-core { transform-box: view-box; transform-origin: 300px 300px; }
html.js .rg-wrap.is-ready .rg-core { opacity: 0; transform: scale(.88); transition: opacity .7s var(--ease), transform 1s cubic-bezier(.43, .2, .02, 1); }
html.js .rg-wrap.is-ready .rg-seg { opacity: 0; transform: rotate(-24deg) scale(.94); transition: opacity .6s var(--ease), transform 1.1s cubic-bezier(.43, .2, .02, 1); transition-delay: calc(var(--k, 0) * 90ms + 180ms); }
html.js .rg-wrap.is-ready .rg-tick,
html.js .rg-wrap.is-ready .rg-orbit { opacity: 0; transition: opacity .9s var(--ease) .9s; }
html.js .rg-wrap.is-ready .rg::before { opacity: 0; transition: opacity 1.2s var(--ease) .3s; }
html.js .rg-wrap.is-in .rg-seg,
html.js .rg-wrap.is-in .rg-core,
html.js .rg-wrap.is-in .rg-tick,
html.js .rg-wrap.is-in .rg-orbit,
html.js .rg-wrap.is-in .rg::before { opacity: 1; transform: none; }

@media (max-width: 1199px) {
  .rg-wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, calc(var(--u) * 4), 56px); }
  .rg-text { display: contents; }
  .rg-text .ps__head { order: -2; }
  .rg-stage { order: -1; }
  .rg { width: min(100%, 500px); }
  .hl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
}
@media (max-width: 767px) {
  .hl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .hl-list { grid-template-columns: minmax(0, 1fr); }
  .rg-ko { font-size: 30px; }
  .rg-en { display: none; }
  .rg-seg .rg-ko { transform: translateY(12px); transform-box: fill-box; }
  .rg-core__s { font-size: var(--fs-2xl); }
  .rg-core__b { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-seg, .rg-core, .rg-tick, .rg-orbit, .rg::before { transition: none !important; }
}

@media (max-width: 899px) {
  .ab-hello__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-hello__photo { position: static; max-width: 280px; }
}

/* ══════════════════════════════════════════════════ 성능 · 호환 (2026-09-14) ══════════ */
@supports not (height: 100svh) {
  .ps-hero { min-height: 100vh; }
  .ps-hero--short { min-height: 66vh; }
  .ps-steps.has-pin-track { height: 100vh; }
}
/* subgrid 없는 브라우저 : 구성 네 칸을 각자 세로로 쌓는다(칸끼리 줄 높이만 안 맞는다) */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .ps-what .works { grid-template-rows: none; }
    .ps-what .work { grid-row: auto; display: flex; flex-direction: column; }
  }
}
@media (min-width: 1024px) and (max-height: 820px) { .ps-steps.has-pin-track { padding-bottom: 74px; } }   /* 문구 교정으로 단계 칸이 길어져 상담 버튼 윗선에 1px 닿던 것 */

/* ══════════════════════════════════════════════════════════════════════════
   프로그램 개편 (2026-09-14) : 블로그 실제 운영 내용 기준 상세 5쪽
   03 대표 모듈(다크) — 진단지(.dx) · 회차표(.ses) · 첨삭 3파일(.rl + .cycle) · 답변 틀(.ans) · 가나다군(.gun)
   05 원칙(다크) — .scope
   학년 축은 중1~N수 여덟 칸(.prail--8)
   ══════════════════════════════════════════════════════════════════════════ */
.prail--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 599px) { .prail--8 li { font-size: 12px; padding-right: 2px; } .prail--8 li small { font-size: 12px; } }

.ps-focus::before { background: radial-gradient(48% 42% at 88% 12%, rgba(208, 2, 27, .18), rgba(208, 2, 27, 0) 72%), radial-gradient(36% 34% at 4% 96%, rgba(255, 122, 132, .06), rgba(255, 122, 132, 0) 74%); }
.ps-rule::before { background: radial-gradient(50% 50% at 12% 20%, rgba(208, 2, 27, .14), rgba(208, 2, 27, 0) 72%); }
.ps-focus .sec-p, .ps-rule .sec-p { color: var(--on-noir-2); }

/* 다크 면 위 흰 종이 카드 */
.paperc { background: #FFFDFC; color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3); }

/* ── 진단지 */
.dx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(14px, calc(var(--u) * 1.6), 28px); align-items: stretch; }
.dx__card { display: flex; flex-direction: column; padding: clamp(24px, calc(var(--u) * 2.8), 48px); background: #FFFDFC; color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3); }
.dx__kind { font-size: clamp(12.5px, calc(var(--u) * .88), 14.5px); font-weight: 700; color: var(--red); }
.ps .dx__t { margin-top: .45em; font-size: clamp(19px, calc(var(--u) * 1.6), 28px); font-weight: 800; letter-spacing: -.007em; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.dx__groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(14px, calc(var(--u) * 1.4), 22px); }
.dx__groups li { padding: .38em .8em; border-radius: var(--r-pill); background: #F6ECE9; font-size: clamp(13px, calc(var(--u) * .9), 15px); color: var(--ink-2); }
.dx__groups b { margin-right: .4em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dx__label { margin-top: auto; padding-top: clamp(22px, calc(var(--u) * 2.4), 40px); font-size: clamp(13.5px, calc(var(--u) * .94), 16px); font-weight: 700; color: var(--ink-2); }
.dx__meter { position: relative; margin-top: 12px; }
.dx__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.dx__range::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #E9DAD6 0 33.3%, #F2C9C9 33.3% 63.3%, #F4A7AC 63.3% 100%); }
.dx__range::-moz-range-track { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #E9DAD6 0 33.3%, #F2C9C9 33.3% 63.3%, #F4A7AC 63.3% 100%); }
.dx__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: var(--red); border: 4px solid #fff; box-shadow: 0 4px 12px rgba(120, 10, 20, .35); }
.dx__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 4px solid #fff; box-shadow: 0 4px 12px rgba(120, 10, 20, .35); }
.dx__range:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 8px; }
.dx__bands { display: grid; grid-template-columns: 33.3fr 30fr 36.7fr; margin-top: 2px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dx__bands li:nth-child(2) { text-align: center; }
.dx__bands li:last-child { text-align: right; }
.dx__out { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em .8em; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #FBEFEC; }
.dx__n { font-size: clamp(22px, calc(var(--u) * 2), 34px); font-weight: 900; letter-spacing: -.008em; color: var(--red); font-variant-numeric: tabular-nums; }
.dx__verdict { font-size: clamp(14.5px, calc(var(--u) * 1.04), 17.5px); font-weight: 700; color: var(--ink); word-break: keep-all; }
.dx__note { margin-top: 12px; font-size: clamp(12.5px, calc(var(--u) * .86), 14.5px); color: var(--ink-3); }
.bars { display: grid; gap: clamp(8px, calc(var(--u) * .8), 12px); margin-top: clamp(18px, calc(var(--u) * 2), 30px); }
.bars__row { display: grid; grid-template-columns: 8.2em minmax(0, 1fr) 2em; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.bars__k { color: var(--ink-2); white-space: nowrap; }
.bars__track { position: relative; height: 12px; border-radius: 6px; background: #F3E8E5; overflow: hidden; }
.bars__fill { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 6px; background: linear-gradient(90deg, #E8505E, var(--red)); transform-origin: 0 50%; }
.bars__v { text-align: right; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
html.js .dx.is-ready .bars__fill { transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--i) * 70ms + 150ms); }
html.js .dx.is-ready.is-in .bars__fill { transform: none; }
.dx__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: clamp(18px, calc(var(--u) * 2), 30px); }
.dx__sum div { padding: 12px 14px; border-radius: 12px; background: #F8F1EF; }
.dx__sum div + div { background: #FBEFEC; }
.dx__sum dt { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.dx__sum dd { margin-top: .3em; font-size: clamp(14px, calc(var(--u) * 1), 16.5px); font-weight: 700; color: var(--ink); word-break: keep-all; }
@media (max-width: 899px) { .dx { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 459px) { .bars__row { grid-template-columns: 6.6em minmax(0, 1fr) 1.8em; gap: 8px; font-size: var(--fs-xs); } .dx__sum { grid-template-columns: 1fr; } }

/* ── 회차표 */
.ses { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(16px, calc(var(--u) * 2.4), 44px); align-items: start; }
.ses__board { display: grid; gap: clamp(18px, calc(var(--u) * 2), 32px); }
.ses__row { display: grid; gap: 12px; }
.ps .ses__name { font-size: var(--fs-lg); font-weight: 800; color: #fff; letter-spacing: -.002em; }
.ses__name small { margin-left: .6em; font-size: .72em; font-weight: 600; color: var(--red-on-noir); }
.ses__cells { display: grid; gap: 8px; }
.ses__cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ses__cells--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ses__b {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 96px;
  padding: 14px 14px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  background: rgba(255, 255, 255, .03); color: var(--on-noir-2); text-align: left; cursor: pointer;
  font: inherit; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease);
}
.ses__b b { font-size: clamp(22px, calc(var(--u) * 1.9), 32px); font-weight: 900; line-height: 1; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.ses__b span { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; word-break: keep-all; }
.ses__b:hover { border-color: rgba(255, 255, 255, .28); color: #fff; }
.ses__b:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 3px; }
.ses__b.is-on { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(208, 2, 27, .9); }
.ses__b.is-on b { color: #fff; }
.ses__panels { position: sticky; top: calc(var(--head-off, 110px) + 24px); display: grid; }
.ses__p { grid-area: 1 / 1; padding: clamp(24px, calc(var(--u) * 2.8), 44px); border-radius: var(--r-lg); background: #FFFDFC; color: var(--ink); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s .4s; }
.ses__p.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ses__pk { font-size: clamp(13px, calc(var(--u) * .9), 15px); font-weight: 700; color: var(--red); }
.ps .ses__pt { margin-top: .4em; font-size: clamp(22px, calc(var(--u) * 2), 34px); font-weight: 900; letter-spacing: -.008em; line-height: 1.25; color: var(--ink); word-break: keep-all; }
.ses__pd { margin-top: 14px; font-size: var(--fs-md); line-height: 1.75; color: var(--ink-2); word-break: keep-all; }
html:not(.js) .ses__p { position: static; opacity: 1; visibility: visible; transform: none; margin-bottom: 10px; }
@media (max-width: 1023px) { .ses { grid-template-columns: minmax(0, 1fr); } .ses__panels { position: relative; top: auto; } }
@media (max-width: 599px) { .ses__cells--4, .ses__cells--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ses__b { min-height: 84px; } }

/* ── 첨삭 3파일 + 한 달 주기 */
.rl { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, calc(var(--u) * 4), 72px); align-items: center; }
.rl__tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rl__tab { flex: none; display: inline-flex; align-items: baseline; gap: .5em; min-height: 44px; padding: 0 1.1em; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-noir-2); font: inherit; font-size: clamp(13.5px, calc(var(--u) * .95), 16px); font-weight: 700; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); align-items: center; }
.rl__tab b { font-size: .82em; color: var(--red-on-noir); }
.rl__tab.is-on { background: #fff; color: var(--ink); }
.rl__tab.is-on b { color: var(--red); }
.rl__tab:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 2px; }
.rl__paper { position: relative; display: grid; margin-top: 14px; padding: clamp(26px, calc(var(--u) * 3), 52px); background: #FFFDFC; color: var(--ink); border-radius: 6px var(--r-lg) var(--r-lg) var(--r-lg); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3); }
.rl__paper::after { content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: linear-gradient(225deg, #17161A 50%, #EFE3DF 50%); border-radius: 0 0 0 6px; }
.rl__meta { grid-area: 1 / 1; align-self: start; display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px dashed rgba(23, 21, 26, .18); font-size: clamp(12.5px, calc(var(--u) * .88), 14.5px); font-weight: 700; color: var(--ink-3); }
.rl__meta span { color: var(--red); }
.rl__p { grid-area: 2 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .35s; }
.rl__p.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rl__p p { font-size: clamp(15.5px, calc(var(--u) * 1.16), 19.5px); line-height: 2; color: var(--ink); word-break: keep-all; }
.rl__p del { color: #D0021B; text-decoration: line-through; text-decoration-thickness: 1.5px; background: rgba(208, 2, 27, .06); }
.rl__p ins { color: #1D4ED8; text-decoration: none; background: rgba(29, 78, 216, .07); box-shadow: inset 0 -2px 0 rgba(29, 78, 216, .35); }
.rl__wavy { text-decoration: underline wavy #E88A1A; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.rl__p sup { font-size: .7em; color: var(--ink-3); }
.rl__memo { margin-top: 16px; padding: 12px 14px; border-left: 3px solid #E88A1A; border-radius: 0 10px 10px 0; background: #FFF6EA; font-size: clamp(13.5px, calc(var(--u) * .95), 16px); line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.rl__memo b { margin-right: .6em; color: #B45F06; }
html.js .rl__p.is-on del, html.js .rl__p.is-on ins { animation: rlMark .7s var(--ease) both; }
html.js .rl__p.is-on ins { animation-delay: .18s; }
@keyframes rlMark { from { background-size: 0 100%; opacity: .2; } to { opacity: 1; } }
.rl__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: clamp(12.5px, calc(var(--u) * .88), 14.5px); color: var(--on-noir-2); }
.rl__lg::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; border-radius: 2px; }
.rl__lg--ins::before { background: #6D8EF5; }
.rl__lg--del::before { background: var(--red-on-noir); }
.rl__lg--wavy::before { height: 6px; background: radial-gradient(circle at 3px 3px, transparent 2px, #F3A24B 2.5px, transparent 3px) 0 0 / 6px 6px repeat-x; }
html:not(.js) .rl__p { grid-area: auto; opacity: 1; visibility: visible; transform: none; margin-bottom: 18px; }
.ps .rl__h { font-size: clamp(22px, calc(var(--u) * 2.2), 38px); font-weight: 800; letter-spacing: -.008em; line-height: 1.3; color: #fff; word-break: keep-all; }
.rl__d { margin-top: 14px; font-size: clamp(15px, calc(var(--u) * 1.08), 18px); line-height: 1.75; color: var(--on-noir-2); word-break: keep-all; }
.cycle { margin-top: clamp(28px, calc(var(--u) * 3.4), 56px); padding-top: 22px; border-top: 1px solid var(--line-d); }
.cycle__k { font-size: clamp(13px, calc(var(--u) * .9), 15px); font-weight: 700; color: var(--red-on-noir); }
.cycle__bar { position: relative; height: 104px; margin: 18px 12px 0; }
.cycle__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.cycle__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: var(--red-on-noir); transform-origin: 0 50%; }
.cycle__bar li { position: absolute; left: var(--at); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 8.4em; }
.cycle__bar li:first-child { transform: translateX(-12px); align-items: flex-start; text-align: left; }
.cycle__bar li:last-child { transform: translateX(calc(-100% + 12px)); align-items: flex-end; text-align: right; }
.cycle__bar li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #17161A; border: 3px solid var(--red-on-noir); box-sizing: border-box; }
.cycle__bar b { margin-top: 10px; font-size: var(--fs-lg); font-weight: 900; color: #fff; }
.cycle__bar span { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; color: var(--on-noir-2); word-break: keep-all; }
html.js .cycle.is-ready .cycle__bar::after { transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; }
html.js .cycle.is-ready .cycle__bar li { opacity: 0; transition: opacity .6s var(--ease); }
html.js .cycle.is-ready .cycle__bar li:nth-child(2) { transition-delay: .8s; }
html.js .cycle.is-ready .cycle__bar li:nth-child(3) { transition-delay: 1.5s; }
html.js .cycle.is-ready.is-in .cycle__bar::after { transform: none; }
html.js .cycle.is-ready.is-in .cycle__bar li { opacity: 1; }
.cycle__note { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-noir-2); word-break: keep-all; }
@media (max-width: 1023px) { .rl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 459px) { .cycle__bar li { width: 6.6em; } .rl__tab { padding: 0 .8em; } }

/* ── 답변 틀 */
.ans { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); grid-template-areas: "q steps" "tail steps" "foot foot"; gap: clamp(14px, calc(var(--u) * 1.6), 26px) clamp(20px, calc(var(--u) * 4), 72px); align-items: start; }
.ans__q { grid-area: q; padding: clamp(24px, calc(var(--u) * 2.8), 44px); border-radius: var(--r-lg); background: #FFFDFC; color: var(--ink); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); }
.ans__tail { grid-area: tail; padding: clamp(20px, calc(var(--u) * 2.2), 34px); border-radius: var(--r-lg); border: 1px dashed rgba(255, 122, 132, .5); color: #fff; }
.ans__qk { font-size: var(--fs-xs); font-weight: 700; color: var(--red); }
.ans__tail .ans__qk { color: var(--red-on-noir); }
.ans__qt { margin-top: .5em; font-size: var(--fs-3xl); font-weight: 900; letter-spacing: -.008em; line-height: 1.3; word-break: keep-all; }
.ans__tail .ans__qt { font-size: var(--fs-lg); font-weight: 800; }
.ans__steps { grid-area: steps; display: grid; gap: 10px; counter-reset: none; }
.ans__s { position: relative; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: clamp(18px, calc(var(--u) * 2), 30px) clamp(18px, calc(var(--u) * 2.2), 34px); border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: background .5s var(--ease), border-color .5s var(--ease), opacity .6s var(--ease), transform .7s var(--ease); }
.ans__s::after { content: ""; position: absolute; left: clamp(18px, calc(var(--u) * 2.2), 34px); right: clamp(18px, calc(var(--u) * 2.2), 34px); bottom: 0; height: 2px; background: var(--red-on-noir); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.ans__k { font-size: clamp(14px, calc(var(--u) * 1), 17px); font-weight: 800; color: var(--red-on-noir); white-space: nowrap; }
.ans__t { font-size: var(--fs-lead); font-weight: 600; line-height: 1.55; color: #fff; word-break: keep-all; }
html.js .ans.is-ready .ans__s { opacity: .28; transform: translateX(12px); }
html.js .ans.is-ready .ans__s.is-on { opacity: 1; transform: none; background: rgba(255, 255, 255, .07); border-color: rgba(255, 122, 132, .28); }
html.js .ans.is-ready .ans__s.is-on::after { transform: scaleX(1); }
html.js .ans.is-ready .ans__tail { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
html.js .ans.is-ready.is-done .ans__tail { opacity: 1; transform: none; }
.ans__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.ans__replay { min-height: 44px; padding: 0 1.2em; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: background .25s var(--ease); }
.ans__replay:hover { background: rgba(255, 255, 255, .08); }
.ans__replay:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 3px; }
html:not(.js) .ans__replay { display: none; }
.ans__note { font-size: var(--fs-xs); color: var(--on-noir-2); }
@media (max-width: 1023px) { .ans { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "steps" "tail" "foot"; } }
@media (max-width: 599px) { .ans__s { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ── 가 · 나 · 다군 */
.gun { display: grid; gap: clamp(14px, calc(var(--u) * 1.6), 26px); }
.gun__switch { display: inline-flex; gap: 4px; justify-self: start; padding: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.gun__b { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 1.2em; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-noir-2); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.gun__b b { font-size: .82em; color: var(--red-on-noir); }
.gun__b[aria-pressed="true"] { background: #fff; color: var(--ink); }
.gun__b[aria-pressed="true"] b { color: var(--red); }
.gun__b:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 2px; }
.gun__board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, calc(var(--u) * 1.2), 20px); padding: clamp(18px, calc(var(--u) * 2.2), 36px); padding-bottom: clamp(64px, calc(var(--u) * 6), 92px); border-radius: var(--r-lg); background: #FFFDFC; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); }
.gun__col { display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, calc(var(--u) * 1.4), 22px); border-radius: 14px; background: #F7EEEB; }
.ps .gun__h { font-size: var(--fs-xl); font-weight: 900; color: var(--ink); letter-spacing: -.008em; }
.gun__list { display: grid; gap: 8px; }
.gun__c { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid rgba(23, 21, 26, .1); font-size: clamp(14px, calc(var(--u) * 1), 16.5px); font-weight: 700; color: var(--ink); transition: opacity .5s var(--ease), transform .6s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.gun__c::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; }
.gun__c--up::before { background: var(--red); }
.gun__c--mid::before { background: #E88A1A; }
.gun__c--safe::before { background: #2F8F5B; }
/* 최종 안 : 군마다 한 곳만 남는다(가군 적정 · 나군 적정 · 다군 상향 대신 안정) */
.gun[data-state="b"] .gun__col:nth-child(1) .gun__c--up,
.gun[data-state="b"] .gun__col:nth-child(2) .gun__c--safe,
.gun[data-state="b"] .gun__col:nth-child(3) .gun__c--up { opacity: .28; transform: scale(.97); text-decoration: line-through; text-decoration-color: rgba(23, 21, 26, .4); }
.gun[data-state="b"] .gun__col:nth-child(1) .gun__c--mid,
.gun[data-state="b"] .gun__col:nth-child(2) .gun__c--mid,
.gun[data-state="b"] .gun__col:nth-child(3) .gun__c--safe { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: #FFF4F3; }
.gun__review { position: absolute; left: clamp(18px, calc(var(--u) * 2.2), 36px); bottom: clamp(18px, calc(var(--u) * 2), 30px); display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.gun__review i { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -12px; border-radius: 50%; border: 2px solid #FFFDFC; background: #E7DAD6; color: var(--ink-2); font-style: normal; font-size: var(--fs-2xs); font-weight: 800; transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease); }
.gun__review span { margin-left: 22px; }
.gun[data-state="b"] .gun__review i { background: var(--red); color: #fff; }
.gun[data-state="b"] .gun__review i:nth-child(2) { transition-delay: .08s; }
.gun[data-state="b"] .gun__review i:nth-child(3) { transition-delay: .16s; }
.gun[data-state="b"] .gun__review i:nth-child(4) { transition-delay: .24s; }
.gun__cap { font-size: var(--fs-md); line-height: 1.7; color: #fff; word-break: keep-all; }
.gun[data-state="a"] .gun__cap--b, .gun[data-state="b"] .gun__cap--a { display: none; }
.gun__note { font-size: var(--fs-xs); color: var(--on-noir-2); }
@media (max-width: 767px) { .gun__board { grid-template-columns: minmax(0, 1fr); } }

/* ── 원칙 : 두 칸(또는 세 칸) 목록 */
.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.4), 24px); }
.scope--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scope__col { padding: clamp(24px, calc(var(--u) * 2.6), 44px); border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.scope__col:first-child { background: rgba(208, 2, 27, .12); border-color: rgba(255, 122, 132, .28); }
.ps .scope__h { font-size: clamp(19px, calc(var(--u) * 1.6), 28px); font-weight: 800; letter-spacing: -.006em; line-height: 1.3; color: #fff; word-break: keep-all; }
.scope__l { display: grid; margin-top: clamp(14px, calc(var(--u) * 1.4), 22px); }
.scope__l li { position: relative; padding: 12px 0 12px 1.5em; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-md); line-height: 1.55; color: var(--on-noir); word-break: keep-all; }
.scope__l li::before { content: ""; position: absolute; left: 0; top: calc(12px + .5em); width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--red-on-noir); }
.scope__col + .scope__col .scope__l li::before { background: #8E8894; }
.scope__note { margin-top: clamp(16px, calc(var(--u) * 1.8), 28px); font-size: clamp(14px, calc(var(--u) * 1), 16.5px); line-height: 1.6; color: var(--on-noir-2); word-break: keep-all; }
@media (max-width: 899px) { .scope, .scope--three { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .ses__p, .rl__p, .ses__b, .gun__c, .gun__review i, .ans__s, .ans__s::after, .ans__tail { transition: none !important; animation: none !important; }
}

/* 흰 카드 안 제목 : 다크 면의 h3 글자색 규칙(.ps[data-tone="dark"] h3)보다 앞서게 */
.ps[data-tone="dark"] .dx__t, .ps[data-tone="dark"] .ses__pt { color: var(--ink); }
.dx__qs { display: grid; margin-top: clamp(16px, calc(var(--u) * 1.6), 24px); border-top: 1px solid rgba(23, 21, 26, .1); }
.dx__qs li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 2em; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(23, 21, 26, .08); }
.dx__qs span { font-size: 13px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dx__qs p { font-size: clamp(14px, calc(var(--u) * 1), 16.5px); color: var(--ink); word-break: keep-all; }
.dx__qs i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--red); font-style: normal; font-weight: 900; font-size: 13px; color: var(--red); }
.dx__qs i.x { border-color: #B8B0B4; color: #8E8894; }
/* 회차표 · 폰 : 회차 칸을 한 줄 가로 스크롤로 두어 설명 카드가 바로 아래 보이게 */
@media (max-width: 599px) {
  .ses__cells--4, .ses__cells--8 { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--col) * -1); padding: 4px var(--col) 8px; }
  .ses__cells::-webkit-scrollbar { display: none; }
  .ses__b { flex: 0 0 min(40%, 150px); scroll-snap-align: start; min-height: 88px; }
  .ses__b.is-on { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3차 (2026-09-14) : 공식 사이트 네 프로그램 · 예시 자료 탭(.exs) · 새 자료 모듈
   .qx 자기소개서 질문 첨삭 / .sx 교과세특 예시 / .qd 생기부 기반 예상 질문 / .cm 정시 분석 자료
   모든 자료는 [다크 면 위 흰 종이] + [옆 설명] 두 칸으로 같은 틀을 쓴다
   ══════════════════════════════════════════════════════════════════════════ */
.exs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(18px, calc(var(--u) * 2.2), 36px); }
.exs__tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.exs__tabs::-webkit-scrollbar { display: none; }
.exs__tab { flex: none; display: inline-flex; align-items: center; gap: .6em; min-height: 46px; padding: 0 1.3em; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-noir-2); font: inherit; font-size: clamp(14px, calc(var(--u) * 1), 17px); font-weight: 700; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease); }
.exs__tab b { font-size: .8em; color: var(--red-on-noir); font-variant-numeric: tabular-nums; }
.exs__tab:hover { color: #fff; }
.exs__tab.is-on { background: #fff; color: var(--ink); }
.exs__tab.is-on b { color: var(--red); }
.exs__tab:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 2px; }
.exs__note { font-size: var(--fs-xs); color: var(--on-noir-2); }
.exs__p:not(.is-on) { display: none; }
html.js .exs__p.is-on { animation: exIn .6s var(--ease) both; }
@keyframes exIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html:not(.js) .exs__p { display: block; margin-bottom: 48px; }

/* 옆 설명 (모든 자료 공통) */
.ps .ex__h { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.008em; line-height: 1.32; color: #fff; word-break: keep-all; }
.ex__d { margin-top: 14px; font-size: var(--fs-md); line-height: 1.75; color: var(--on-noir-2); word-break: keep-all; }
.ex__facts { display: grid; margin-top: clamp(20px, calc(var(--u) * 2.4), 36px); border-top: 1px solid var(--line-d); }
.ex__facts li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line-d); font-size: clamp(14px, calc(var(--u) * 1), 16.5px); line-height: 1.55; color: var(--on-noir-2); word-break: keep-all; }
.ex__facts b { font-size: var(--fs-md); color: #fff; font-weight: 800; }
.qx, .sx, .qd, .cm { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(22px, calc(var(--u) * 4.4), 80px); align-items: center; }
.qx__paper, .sx__paper, .qd__paper, .cm__paper {
  position: relative; padding: clamp(26px, calc(var(--u) * 3), 52px);
  background: #FFFDFC; color: var(--ink); border-radius: 6px var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3);
}
.qx__paper::after, .sx__paper::after, .qd__paper::after, .cm__paper::after { content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: linear-gradient(225deg, #17161A 50%, #EFE3DF 50%); border-radius: 0 0 0 6px; }
.qx__head, .sx__head, .qd__head, .cm__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 0 28px 14px 0; margin-bottom: 18px; border-bottom: 1px dashed rgba(23, 21, 26, .2); }
.qx__doc, .sx__doc, .qd__doc, .cm__doc { font-size: var(--fs-md); font-weight: 800; color: var(--ink); letter-spacing: -.002em; }
.qx__lim, .sx__who, .qd__sub, .cm__score { font-size: var(--fs-xs); font-weight: 700; color: var(--red); }
@media (max-width: 1023px) { .qx, .sx, .qd, .cm { grid-template-columns: minmax(0, 1fr); } }

/* ── 자기소개서 질문 첨삭 */
.qx__q { padding: 12px 14px; border-radius: 10px; background: #F6EEEB; font-size: clamp(14px, calc(var(--u) * 1), 16.5px); font-weight: 700; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.qx__draft { display: grid; gap: 10px; margin: 16px 0; }
.qx__draft i { display: block; width: var(--w); height: 10px; border-radius: 6px; background: linear-gradient(90deg, #EDE3E0, #F5EEEC); }
.qx__line { font-size: var(--fs-lead); line-height: 1.7; word-break: keep-all; }
.qx__hl { position: relative; padding: 1px 2px; color: var(--ink); font-weight: 700; background: linear-gradient(transparent 55%, #FFE27A 55%) no-repeat 0 0 / 100% 100%; }
.qx__qs { position: relative; display: grid; gap: 10px; margin-top: 8px; padding-left: 30px; }
.qx__qs::before { content: ""; position: absolute; left: 10px; top: -8px; bottom: 18px; width: 0; border-left: 2.5px dashed #F0B400; transform-origin: 50% 0; }
.qx__qs li { position: relative; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(29, 78, 216, .18); background: #F4F7FF; font-size: clamp(14px, calc(var(--u) * 1), 16.5px); font-weight: 600; line-height: 1.5; color: #1D3FA8; word-break: keep-all; }
.qx__qs li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 14px; height: 0; border-top: 2.5px dashed #F0B400; }
.qx__qs li::after { content: ""; position: absolute; left: -26px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #F0B400; }
html.js .qx.is-ready .qx__hl { background-size: 0 100%; transition: background-size .9s var(--ease) .2s; }
html.js .qx.is-ready .qx__qs::before { transform: scaleY(0); transition: transform 1s var(--ease) .9s; }
html.js .qx.is-ready .qx__qs li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 260ms + 1.2s); }
html.js .qx.is-in .qx__hl { background-size: 100% 100%; }
html.js .qx.is-in .qx__qs::before { transform: none; }
html.js .qx.is-in .qx__qs li { opacity: 1; transform: none; }

/* ── 교과세특 예시 */
.sx__text { font-size: clamp(15.5px, calc(var(--u) * 1.18), 20px); line-height: 2.05; color: var(--ink); word-break: keep-all; }
.sx__s { --c: #999; padding: 2px 0; background-image: linear-gradient(var(--c), var(--c)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; transition: background-size .5s var(--ease), opacity .4s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sx__s--unit { --c: #D0021B; --bg: rgba(208, 2, 27, .12); }
.sx__s--inq { --c: #1D4ED8; --bg: rgba(29, 78, 216, .12); }
.sx__s--out { --c: #C77700; --bg: rgba(240, 160, 0, .18); }
.sx__s--grow { --c: #2F8F5B; --bg: rgba(47, 143, 91, .14); }
html.js .sx.is-ready .sx__s { background-size: 0 2px; transition-delay: calc(var(--i) * 350ms + .2s); }
html.js .sx.is-in .sx__s { background-size: 100% 2px; }
.sx[data-on] .sx__s { opacity: .32; }
.sx[data-on="unit"] .sx__s--unit, .sx[data-on="inq"] .sx__s--inq, .sx[data-on="out"] .sx__s--out, .sx[data-on="grow"] .sx__s--grow { opacity: 1; background-image: linear-gradient(var(--bg), var(--bg)); background-size: 100% 100%; transition-delay: 0s; }
.sx__keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, calc(var(--u) * 2.4), 34px); }
.sx__key { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0 1.1em; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #fff; font: inherit; font-size: clamp(14px, calc(var(--u) * .98), 16.5px); font-weight: 700; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.sx__key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.sx__key--unit { --k: #FF7A84; }
.sx__key--inq { --k: #7C9CFF; }
.sx__key--out { --k: #F3B03C; }
.sx__key--grow { --k: #5CC48C; }
.sx__key:hover { border-color: rgba(255, 255, 255, .4); }
.sx__key[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.sx__key:focus-visible { outline: 2px solid var(--red-on-noir); outline-offset: 2px; }

/* ── 생기부 기반 예상 질문 */
.qd__list { display: grid; }
.qd__i { padding: 16px 0; border-bottom: 1px solid rgba(23, 21, 26, .08); }
.qd__i:last-child { border-bottom: 0; padding-bottom: 0; }
.qd__q { display: flex; gap: .5em; font-size: var(--fs-md); font-weight: 800; line-height: 1.5; color: var(--ink); word-break: keep-all; }
.qd__q b { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qd__meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qd__cat { padding: .3em .8em; border-radius: var(--r-pill); background: #F6EEEB; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.qd__btn { display: inline-flex; align-items: center; gap: .5em; min-height: 36px; padding: 0 .9em; border-radius: var(--r-pill); border: 1px solid rgba(23, 21, 26, .16); background: #fff; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.qd__btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.qd__btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.qd__btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.qd__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.qd__a { margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--red); }
.qd__a p { font-size: var(--fs-md); line-height: 1.75; color: var(--ink-2); word-break: keep-all; }
.qd__a .qd__memo { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
html.js .qd__a:not([hidden]) { animation: exIn .45s var(--ease) both; }
@media (max-width: 767px), (pointer: coarse) { .qd__btn { min-height: 44px; } }

/* ── 정시 분석 자료 */
.cm__rows { display: grid; gap: 22px; margin-top: 26px; }
.cm__row { display: grid; grid-template-columns: 7.6em minmax(0, 1fr) 5.6em; align-items: center; gap: 14px; }
.cm__dept { font-size: clamp(14px, calc(var(--u) * 1), 16.5px); font-weight: 700; color: var(--ink); white-space: nowrap; }
.cm__track { position: relative; height: 30px; border-radius: 8px; background: repeating-linear-gradient(90deg, #F3EAE7 0 calc(25% - 1px), #E6DAD6 calc(25% - 1px) 25%); }
.cm__cut { position: absolute; left: var(--at); top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.cm__cut em { position: absolute; left: 50%; top: -19px; transform: translateX(-50%); font-style: normal; font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm__me { position: absolute; left: var(--at); top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(208, 2, 27, .18); }
.cm__v { justify-self: end; padding: .35em .75em; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.cm__v--risk { background: #FDE8EA; color: #B0001A; }
.cm__v--mid { background: #FFF1DC; color: #9A5B00; }
.cm__v--safe { background: #E3F4EA; color: #1F6E43; }
html.js .cm.is-ready .cm__me { left: 0; opacity: 0; transition: left 1.2s var(--ease), opacity .4s var(--ease); transition-delay: calc(var(--i) * 140ms + .3s); }
html.js .cm.is-ready .cm__v { opacity: 0; transform: scale(.9); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 140ms + 1.2s); }
html.js .cm.is-in .cm__me { left: var(--at); opacity: 1; }
html.js .cm.is-in .cm__v { opacity: 1; transform: none; }
.cm__legend { display: flex; gap: 18px; margin-top: 18px; font-size: 12.5px; color: var(--ink-3); }
.cm__lg::before { content: ""; display: inline-block; margin-right: 6px; vertical-align: middle; }
.cm__lg--cut::before { width: 2px; height: 14px; background: var(--ink); }
.cm__lg--me::before { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.cm__comment { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #F4F7FF; font-size: clamp(14px, calc(var(--u) * 1), 16.5px); line-height: 1.7; color: #1D3FA8; word-break: keep-all; }
.cm__comment b { margin-right: .6em; color: var(--ink); }
@media (max-width: 459px) { .cm__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 22px; } .cm__track { grid-column: 1 / -1; grid-row: 2; } }

/* ── 기준 카드 : 태그 · 바꾸는 것(취소선 → 굵게) */
.scope--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scope__tag { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 800; color: var(--red-on-noir); }
.scope__swap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: clamp(14px, calc(var(--u) * 1), 16.5px); }
.scope__swap s { color: var(--on-noir-2); text-decoration-color: var(--red-on-noir); text-decoration-thickness: 2px; }
.scope__swap b { color: #fff; }
.scope__swap b::before { content: "\2192"; margin-right: 8px; color: var(--red-on-noir); font-weight: 400; }
.scope--four .scope__col:first-child { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.scope--four .scope__col + .scope__col .scope__l li::before { background: var(--red-on-noir); }
@media (max-width: 1199px) { .scope--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .scope--four { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  html.js .exs__p.is-on, html.js .qd__a:not([hidden]) { animation: none; }
  .qx__hl, .qx__qs::before, .qx__qs li, .sx__s, .cm__me, .cm__v { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4차 (2026-09-14) : 04 받는 자료 = 미리보기 카드(.dsh)
   카드 위쪽 타일 안에 자료 모양을 줄여 그린 문서(.pv)가 비스듬히 올라와 있고, 아래는 자료 이름과 담기는 내용.
   화면에 들어오면 카드가 차례로 서고, 문서 속 막대 · 줄이 채워진다(한 번). 손을 얹으면 문서가 똑바로 들린다.
   ══════════════════════════════════════════════════════════════════════════ */
.dsh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, calc(var(--u) * 1.6), 26px); }
.dcard { display: flex; flex-direction: column; border-radius: var(--r-lg); background: #fff; box-shadow: 0 1px 2px rgba(60, 20, 20, .05), 0 24px 44px -30px rgba(60, 20, 20, .35); overflow: hidden; }
.dcard__pv {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #FFFFFF 0%, #F7ECE9 55%, #F0DFDB 100%);
}
.dcard__pv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(transparent, rgba(240, 223, 219, .9)); pointer-events: none; }
.pv {
  position: absolute; left: 50%; top: 14%; width: 70%; min-height: 96%;
  padding: 9% 9% 0; border-radius: 8px 8px 0 0; background: #fff;
  box-shadow: 0 1px 2px rgba(60, 20, 20, .08), 0 18px 34px -16px rgba(80, 30, 30, .35);
  transform: translateX(-50%) rotate(-2.5deg); transform-origin: 50% 100%;
  transition: transform .6s var(--ease), top .6s var(--ease);
}
@media (hover: hover) { .dcard:hover .pv { top: 9%; transform: translateX(-50%) rotate(0deg); } }
.pv__title { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 8%; margin-bottom: 7%; border-bottom: 1px solid #F0E6E3; }
.pv__title b { display: block; width: 46%; height: 7px; border-radius: 4px; background: var(--ink); }
.pv__title span { width: 16%; height: 7px; border-radius: 4px; background: #F5C3C9; }
.pv__ln { display: block; width: var(--w, 80%); height: 5px; margin-bottom: 7px; border-radius: 3px; background: #EAE0DC; transform-origin: 0 50%; }
.pv__ln--dark { background: #BDB2B6; height: 6px; }
.pv__ln--hl { background: #FFE27A; height: 7px; }
.pv__ln--blue { background: #CFDBFF; }
.pv__ln--red { background: #F5C3C9; }
.pv__ln--del { position: relative; background: #F7D2D6; }
.pv__ln--del::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: var(--red); }
.pv__ln--ins { background: #CFDBFF; }
.pv__ln--wavy { background: radial-gradient(circle at 3px 2px, #F0A13A 1.3px, transparent 1.6px) 0 100% / 6px 4px repeat-x, #EAE0DC; background-size: 6px 4px, auto; height: 8px; background-origin: border-box; }
.pv__rl { display: flex; gap: 4px; }
.pv__rl .pv__ln { margin-bottom: 7px; }

/* 막대 : 진단지 · 분석 결과 */
.pv__bars { display: flex; align-items: flex-end; gap: 6%; height: 72px; padding-bottom: 6px; border-bottom: 1px solid #F0E6E3; }
.pv__bars i { flex: 1; height: var(--v); border-radius: 3px 3px 0 0; background: linear-gradient(#EF5A67, var(--red)); transform-origin: 50% 100%; }
.pv__bars i:nth-child(3n + 2) { background: #E2D6D2; }
.pv__row2 { display: flex; gap: 6px; margin-top: 10px; }
.pv__box { flex: 1; height: 26px; border-radius: 5px; background: #F6EEEB; }
.pv__box--red { background: #FDE8EA; }
/* 질문 붙이기 : 자기소개서 첨삭 */
.pv__mark { margin: 8px 0 4px; }
.pv__asks { position: relative; display: grid; gap: 5px; margin-top: 8px; padding-left: 14px; }
.pv__asks::before { content: ""; position: absolute; left: 4px; top: -6px; bottom: 8px; border-left: 1.5px dashed #F0B400; }
.pv__asks li { padding: 5px 6px 1px; border-radius: 5px; background: #F4F7FF; border: 1px solid #DCE4FF; }
.pv__asks .pv__ln { margin-bottom: 4px; }
/* 번호 질문 : 예상 질문지 */
.pv__q { display: grid; grid-template-columns: 16px 1fr; gap: 6px; padding: 5px 0 3px; border-bottom: 1px solid #F4ECEA; }
.pv__q b { font-size: 8px; font-weight: 800; color: var(--ink-3); line-height: 6px; }
/* 체크 목록 : 문제집 */
.pv__chk { display: grid; gap: 7px; }
.pv__chk li { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 7px; }
.pv__chk span { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid #D5C9CD; }
.pv__chk li:nth-child(-n + 3) span { border-color: var(--red); background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.pv__chk .pv__ln { margin: 0; }
/* 표 : 분석 보고서 · 대학 목록 */
.pv__tbl { display: grid; gap: 0; border: 1px solid #F0E6E3; border-radius: 5px; overflow: hidden; }
.pv__th, .pv__tr { display: grid; grid-template-columns: 1.4fr 1fr 22px; align-items: center; gap: 6px; padding: 6px; }
.pv__th { background: #F6EEEB; }
.pv__th i { height: 5px; border-radius: 3px; background: #CFC4C8; }
.pv__tr { border-top: 1px solid #F4ECEA; }
.pv__tr i { height: 5px; border-radius: 3px; background: #EAE0DC; width: var(--w, 70%); transform-origin: 0 50%; }
.pv__chip { display: block; height: 8px; border-radius: 4px; }
.pv__chip--up { background: #F29AA3; }
.pv__chip--mid { background: #F6C774; }
.pv__chip--safe { background: #8ACFA6; }
/* 요약본 */
.pv__h { margin-bottom: 4px; }
.pv__key { margin: 6px 0 10px; padding: 7px 7px 1px; border-left: 3px solid var(--red); border-radius: 0 5px 5px 0; background: #FFF4F3; }
.pv__tags { display: flex; gap: 4px; margin-top: 6px; }
.pv__tags i { width: 26%; height: 9px; border-radius: 5px; background: #F6EEEB; }
/* 달력 : 월간 보고서 */
.pv__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 10px; }
.pv__cal i { aspect-ratio: 1; border-radius: 3px; background: #F6EEEB; }
.pv__cal i.on { background: var(--red); }
.pv__cal i.end { background: var(--ink); }
/* 영상 : 녹화 피드백 */
.pv__vid { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; background: linear-gradient(160deg, #3A3540, #1E1B22); }
.pv__play { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.pv__play::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 8px solid var(--red); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pv__rec { position: absolute; left: 6px; top: 5px; font-size: 7px; font-weight: 800; letter-spacing: .06em; color: #FF7A84; }
.pv__tl { position: relative; height: 4px; margin: 9px 0 10px; border-radius: 2px; background: #EAE0DC; }
.pv__tl i { position: absolute; left: var(--at); top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #F0B400; border: 2px solid #fff; }
/* 점수 트랙 : 정시 분석 */
.pv__score { display: grid; gap: 10px; margin-bottom: 10px; }
.pv__score p { position: relative; height: 12px; border-radius: 4px; background: #F3EAE7; }
.pv__cut { position: absolute; left: var(--at); top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.pv__me { position: absolute; left: var(--at); top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--red); }
.pv__cmt { display: block; padding: 6px 6px 0; border-radius: 5px; background: #F4F7FF; }
.pv__cmt .pv__ln { background: #CFDBFF; margin-bottom: 5px; }
/* 세 칸 : 가나다군 */
.pv__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pv__cols p { display: grid; gap: 5px; padding: 6px; border-radius: 5px; background: #F7EEEB; }
.pv__cols b { height: 6px; width: 60%; border-radius: 3px; background: var(--ink); }
.pv__cols .pv__chip { height: 14px; border-radius: 4px; }

/* 카드 아래 : 자료 이름 · 담기는 내용 */
.dcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, calc(var(--u) * 2), 30px); }
.dcard__kind { align-self: flex-start; padding: .3em .75em; border-radius: var(--r-pill); background: #FBEFEC; font-size: var(--fs-2xs); font-weight: 700; color: var(--red); }
.ps .dcard__t { margin-top: .6em; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.006em; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.dcard__l { display: grid; margin-top: 14px; border-top: 1px solid rgba(23, 21, 26, .08); }
.dcard__l li { position: relative; padding: 9px 0 9px 1em; border-bottom: 1px solid rgba(23, 21, 26, .06); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.dcard__l li:last-child { border-bottom: 0; padding-bottom: 0; }
.dcard__l li::before { content: ""; position: absolute; left: 0; top: calc(9px + .62em); width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

/* 등장 : 카드가 차례로 서고, 미리보기 안이 채워진다 */
html.js .dsh.is-ready .dcard { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * 110ms); }
html.js .dsh.is-ready .pv { top: 34%; transition: transform .6s var(--ease), top 1.1s var(--ease) calc(var(--i) * 110ms + 250ms); }
html.js .dsh.is-ready .pv__ln, html.js .dsh.is-ready .pv__tr i { transform: scaleX(0); transition: transform .8s var(--ease) calc(var(--i) * 110ms + 700ms); }
html.js .dsh.is-ready .pv__bars i { transform: scaleY(0); transition: transform .8s var(--ease) calc(var(--i) * 110ms + 700ms); }
html.js .dsh.is-in .dcard { opacity: 1; transform: none; }
html.js .dsh.is-in .pv { top: 14%; }
html.js .dsh.is-in .pv__ln, html.js .dsh.is-in .pv__tr i, html.js .dsh.is-in .pv__bars i { transform: none; }
@media (hover: hover) { html.js .dsh.is-in .dcard:hover .pv { top: 9%; transition-delay: 0s; } }

@media (max-width: 1199px) { .dsh { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dcard__pv { aspect-ratio: 16 / 10; } .pv { width: 52%; } }
@media (max-width: 599px) {
  .dsh { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--col) * -1); padding: 4px var(--col) 16px; }
  .dsh::-webkit-scrollbar { display: none; }
  .dcard { flex: 0 0 80%; scroll-snap-align: center; }
  .dcard__pv { aspect-ratio: 5 / 4; }
  .pv { width: 66%; }
}
@media (prefers-reduced-motion: reduce) { .pv, .dcard, .pv__ln, .pv__bars i, .pv__tr i { transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   5차 (2026-09-14) : 상세 면 색 재배치 · 학년 축 두 줄 · 캠퍼스 전면 개편
   상세 : [다크] 히어로 · 01 구성 → [밝음] 02 진행 과정 ~ 06 다음 과정 → [다크] 07 상담. 전환은 두 번.
          03 수업 자료는 밝은 면 안에 어두운 무대 한 장(.exstage)으로 담아 자료의 흰 종이가 돋보이게 한다.
   ══════════════════════════════════════════════════════════════════════════ */
/* 학년 축 : 학기 표시는 학년 아래 둘째 줄에 작게. 칸마다 윗선이 같은 높이에서 시작한다 */
.prail--8 li { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; white-space: nowrap; }
.prail--8 li small { display: block; margin: 0; font-size: max(11px, .74em); font-weight: 600; letter-spacing: 0; opacity: .8; }
@media (max-width: 899px) { .prail--8 li small { display: block; margin: 0; } }

/* 03 수업 자료 : 밝은 면 + 어두운 무대 */
.ps-ex::before { background: none; }
.exstage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(22px, calc(var(--u) * 3.6), 68px);
  border-radius: var(--r-xl); background: #17161A; color: var(--on-noir-2);
  box-shadow: 0 40px 80px -50px rgba(40, 10, 10, .55);
}
.exstage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46% 50% at 88% 8%, rgba(208, 2, 27, .22), rgba(208, 2, 27, 0) 72%), radial-gradient(40% 40% at 0% 100%, rgba(255, 122, 132, .07), rgba(255, 122, 132, 0) 72%); }
.exstage .dx__t, .exstage .ses__pt { color: var(--ink); }
.sx__hint { margin-top: clamp(18px, calc(var(--u) * 2), 30px); font-size: var(--fs-xs); color: var(--on-noir-2); }
.sx__hint + .sx__keys { margin-top: 10px; }
@media (max-width: 599px) { .exstage { margin-inline: calc(var(--col) * -.5); padding: 20px 16px; border-radius: 18px; } }

/* 05 기준 : 밝은 면 카드 */
.ps-rule[data-tone="light"]::before { background: none; }
.ps-rule[data-tone="light"] .scope__col { background: #fff; border-color: rgba(23, 21, 26, .07); box-shadow: 0 1px 2px rgba(60, 20, 20, .04), 0 22px 40px -32px rgba(60, 20, 20, .32); }
.ps-rule[data-tone="light"] .scope__col:first-child { background: #fff; box-shadow: inset 0 3px 0 var(--red), 0 1px 2px rgba(60, 20, 20, .04), 0 22px 40px -32px rgba(60, 20, 20, .32); border-color: rgba(23, 21, 26, .07); }
.ps-rule[data-tone="light"] .scope--four .scope__col:first-child { box-shadow: 0 1px 2px rgba(60, 20, 20, .04), 0 22px 40px -32px rgba(60, 20, 20, .32); }
.ps-rule[data-tone="light"] .scope__tag { color: var(--red); }
.ps-rule[data-tone="light"] .scope__h { color: var(--ink); }
.ps-rule[data-tone="light"] .scope__l li { color: var(--ink-2); border-top-color: rgba(23, 21, 26, .08); }
.ps-rule[data-tone="light"] .scope__l li::before { background: var(--red); }
.ps-rule[data-tone="light"] .scope__col + .scope__col .scope__l li::before { background: #B9B0B4; }
.ps-rule[data-tone="light"] .scope--four .scope__col .scope__l li::before { background: var(--red); }
.ps-rule[data-tone="light"] .scope__swap s { color: var(--ink-3); text-decoration-color: var(--red); }
.ps-rule[data-tone="light"] .scope__swap b { color: var(--ink); }
.ps-rule[data-tone="light"] .scope__swap b::before { color: var(--red); }
.ps-rule[data-tone="light"] .scope__note { color: var(--ink-3); }
.ps-rule[data-tone="light"] .sec-p { color: var(--ink-2); }
/* 밝은 면이 이어지는 구간은 면마다 바탕을 한 단계씩 달리해 경계를 준다 */
.ps-out { background: #F8ECE8; }
.ps-rule[data-tone="light"] { background: var(--paper); }

/* ══════════════════════════ 학원소개 05 캠퍼스 (.cmp)
   왼쪽 : 본원 카드 + 지역 노선도(전체 · 서울 · 경기 성남 · 세종 · 대전, 캠퍼스 수). 데스크톱에서 화면에 붙는다.
   오른쪽 : 지역별 묶음 목록. 지역을 고르면 나머지 묶음이 접히고, 고른 지역의 줄이 차례로 선다. */
.cmp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, calc(var(--u) * 4.4), 88px); align-items: start; }
.cmp__side { position: sticky; top: calc(var(--head-off, 110px) + 24px); display: grid; gap: clamp(14px, calc(var(--u) * 1.6), 24px); }
.cmp-hq { position: relative; overflow: hidden; padding: clamp(22px, calc(var(--u) * 2.8), 44px); border-radius: var(--r-xl); background: #17161A; color: var(--on-noir-2); }
.cmp-hq::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 100% 0%, rgba(208, 2, 27, .35), rgba(208, 2, 27, 0) 70%); }
.cmp-hq > * { position: relative; }
.cmp-hq__tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--red-on-noir); }
.cmp-hq__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red-on-noir); box-shadow: 0 0 0 4px rgba(255, 122, 132, .2); }
.ps .cmp-hq__name { margin-top: 10px; font-size: var(--fs-4xl); font-weight: 900; letter-spacing: -.008em; line-height: 1.1; color: #fff; }
.cmp-hq__addr { margin-top: 8px; font-size: var(--fs-md); font-weight: 600; color: #E7E2E8; word-break: keep-all; }
.cmp-hq__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(18px, calc(var(--u) * 2), 30px); }
.cmp-hq__map { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-size: clamp(14px, calc(var(--u) * .98), 16.5px); font-weight: 700; color: #fff; }
.cmp-hq__map .go { background: rgba(255, 255, 255, .12); color: #fff; }
.cmp-hq__map:hover .go { background: var(--red); transform: translateX(3px); }
.cmp-hq__info { display: grid; margin: clamp(18px, calc(var(--u) * 2.2), 32px) 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.cmp-hq__info > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cmp-hq__info dt { font-size: 13px; font-weight: 700; color: var(--on-noir-2); }
.cmp-hq__info dd { margin: 0; font-size: clamp(14px, calc(var(--u) * 1), 16px); font-weight: 700; color: #fff; word-break: keep-all; }
.cmp-hq__info dd small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--on-noir-2); }
.cmp-hq__info a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; }
.cmp-hq__sns { display: flex; flex-wrap: wrap; gap: 6px 14px; }

.cmp-nav { padding: clamp(18px, calc(var(--u) * 2.2), 32px); border-radius: var(--r-xl); background: #fff; box-shadow: 0 1px 2px rgba(60, 20, 20, .04), 0 24px 44px -34px rgba(60, 20, 20, .35); }
.cmp-nav__all { display: flex; align-items: baseline; gap: .5em; width: 100%; min-height: 48px; padding: 0 0 14px; border: 0; border-bottom: 1px solid rgba(23, 21, 26, .08); background: none; font: inherit; color: var(--ink-3); cursor: pointer; text-align: left; }
.cmp-nav__all span { font-size: var(--fs-md); font-weight: 700; }
.cmp-nav__all b { margin-left: auto; font-size: var(--fs-4xl); font-weight: 900; letter-spacing: -.008em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-nav__all em { font-style: normal; font-size: clamp(14px, calc(var(--u) * 1), 16px); font-weight: 700; color: var(--ink-3); }
.cmp-nav__all[aria-pressed="true"] span { color: var(--red); }
.cmp-nav__line { position: relative; display: grid; margin-top: 8px; }
.cmp-nav__line::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 26px; width: 2px; background: rgba(23, 21, 26, .1); }
.cmp-nav__line::after { content: ""; position: absolute; left: 11px; top: 26px; width: 2px; height: calc(var(--fill, 0) * (100% - 52px)); background: var(--red); transition: height .7s var(--ease); }
.cmp-nav__b { position: relative; z-index: 1; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 12px 0 0; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.cmp-nav__b i { justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #CFC4C8; transition: border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.cmp-nav__b span { font-size: clamp(15.5px, calc(var(--u) * 1.1), 18.5px); font-weight: 700; }
.cmp-nav__b span small { margin-left: .5em; font-size: .78em; font-weight: 500; color: var(--ink-3); }
.cmp-nav__b b { font-size: var(--fs-md); font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cmp-nav__b:hover { background: #FBF3F1; color: var(--ink); }
.cmp-nav__b:hover i { border-color: var(--red); }
.cmp-nav__b[aria-pressed="true"] { color: var(--ink); }
.cmp-nav__b[aria-pressed="true"] i { border-color: var(--red); background: var(--red); transform: scale(1.15); box-shadow: 0 0 0 5px rgba(208, 2, 27, .15); }
.cmp-nav__b[aria-pressed="true"] b { color: var(--red); }
.cmp-nav__all:focus-visible, .cmp-nav__b:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.cmp__list { display: grid; gap: clamp(10px, calc(var(--u) * 1.2), 18px); }
.cmp-g { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease), opacity .45s var(--ease), margin .6s var(--ease); }
.cmp-g__in { min-height: 0; overflow: hidden; }
.cmp-g.is-off { grid-template-rows: 0fr; opacity: 0; margin-top: calc(clamp(10px, calc(var(--u) * 1.2), 18px) * -1); }
.cmp-g__h { display: flex; align-items: baseline; gap: .6em; padding: 6px 2px 10px; font-size: clamp(14px, calc(var(--u) * 1), 16.5px); font-weight: 800; color: var(--ink); }
.cmp-g__h span { font-weight: 600; color: var(--ink-3); }
.cmp-g__l { display: grid; border-radius: var(--r-lg); background: #fff; box-shadow: 0 1px 2px rgba(60, 20, 20, .04), 0 22px 40px -34px rgba(60, 20, 20, .32); }
.cmp-row { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto auto; align-items: center; gap: 6px 18px; padding: clamp(16px, calc(var(--u) * 1.7), 24px) clamp(16px, calc(var(--u) * 2), 30px); }
.cmp-row + .cmp-row { border-top: 1px solid rgba(23, 21, 26, .07); }
.cmp-row::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); transform: scaleY(0); transition: transform .4s var(--ease); }
@media (hover: hover) { .cmp-row:hover::before { transform: none; } .cmp-row:hover .cmp-row__name { color: var(--red); } }
.cmp-row__no { font-size: 13px; font-weight: 800; color: #C2B8BC; font-variant-numeric: tabular-nums; }
.ps .cmp-row__name { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.002em; color: var(--ink); transition: color .25s var(--ease); }
.cmp-row__name em { margin-left: .5em; padding: .2em .6em; border-radius: var(--r-pill); background: #FDE8EA; font-style: normal; font-size: var(--fs-2xs); font-weight: 700; color: var(--red); vertical-align: 2px; white-space: nowrap; }
.cmp-row__addr { grid-column: 2; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); word-break: keep-all; }
.cmp-row__main { grid-column: 2; }
.cmp-row__tel { grid-column: 3; grid-row: 1; font-size: clamp(14px, calc(var(--u) * 1), 16px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-row__map { grid-column: 4; grid-row: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F6EEEB; color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease); }
.cmp-row__map svg { width: 18px; height: 18px; }
.cmp-row__map:hover, .cmp-row__map:focus-visible { background: var(--red); color: #fff; }
.cmp-row.is-hq { background: linear-gradient(90deg, #FFF6F5, #fff 60%); border-radius: var(--r-lg) var(--r-lg) 0 0; }
/* 등장 · 거르기 모션 : 줄이 차례로 선다 */
html.js .cmp.is-ready .cmp-row { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--k, 0) * 55ms); }
html.js .cmp.is-ready.is-in .cmp-g:not(.is-off) .cmp-row { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .cmp__side { position: static; }
  .cmp-nav { padding: 12px; }
  .cmp-nav__all { display: none; }
  .cmp-nav__line { display: flex; gap: 6px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .cmp-nav__line::before, .cmp-nav__line::after { display: none; }
  .cmp-nav__line li { flex: none; }
  .cmp-nav__b { grid-template-columns: auto auto; gap: 8px; width: auto; padding: 0 16px; border: 1px solid rgba(23, 21, 26, .1); border-radius: var(--r-pill); }
  .cmp-nav__b i { display: none; }
  .cmp-nav__b span small { display: none; }
  .cmp-nav__b[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .cmp-nav__b[aria-pressed="true"] b { color: #FF9AA2; }
  .cmp-nav__line li:first-child .cmp-nav__b { font-weight: 700; }
}
@media (max-width: 599px) {
  .cmp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cmp-row__no { display: none; }
  .cmp-row__main, .cmp-row__addr { grid-column: 1; }
  .cmp-row__tel { grid-column: 1; grid-row: auto; }
  .cmp-row__map { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .cmp-g, .cmp-row, .cmp-nav__line::after, .cmp-nav__b i { transition: none !important; } }

@media (min-width: 1024px) { .cmp-nav__m { display: none; } }

/* 캠퍼스 보정 : 노선도가 위, 본원 카드가 아래. 왼쪽 열은 화면이 충분히 높을 때만 따라온다. 접힌 묶음은 틈을 남기지 않는다 */
.cmp__side { position: static; }
@media (min-width: 1024px) and (min-height: 980px) { .cmp__side { position: sticky; } }
.cmp__list { gap: 0; }
.cmp-g__in { padding-bottom: clamp(10px, calc(var(--u) * 1.2), 18px); }
.cmp-g.is-off { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   6차 (2026-09-14) : 학원소개 캠퍼스 = 본원 띠(.hqbar) + 지역 색인 · 목록(.cdir)
   카드를 쌓지 않는다. 굵은 선 두 줄과 큰 글자, 가는 선으로 나눈 줄로만 정리한다.
   ══════════════════════════════════════════════════════════════════════════ */
.hqbar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 20px clamp(24px, calc(var(--u) * 4), 72px);
  padding: clamp(24px, calc(var(--u) * 3), 44px) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid rgba(23, 21, 26, .14);
}
.hqbar__tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--red); }
.hqbar__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(208, 2, 27, .14); animation: hqPulse 2.4s var(--ease) infinite; }
@keyframes hqPulse { 50% { box-shadow: 0 0 0 7px rgba(208, 2, 27, 0); } }
.ps .hqbar__name { margin-top: 6px; font-size: clamp(34px, calc(var(--u) * 3.8), 64px); font-weight: 900; letter-spacing: -.012em; line-height: 1.05; color: var(--ink); }
.hqbar__addr { font-size: var(--fs-lead); font-weight: 700; color: var(--ink); word-break: keep-all; }
.hqbar__sub { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-3); word-break: keep-all; }
.hqbar__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 20px; }
.hqbar__map, .cdir__map { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-size: clamp(14px, calc(var(--u) * .98), 16px); font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23, 21, 26, .25); text-underline-offset: 5px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.hqbar__map i, .cdir__map i { font-style: normal; transition: transform .3s var(--ease); }
.hqbar__map:hover, .cdir__map:hover { color: var(--red); text-decoration-color: var(--red); }
.hqbar__map:hover i, .cdir__map:hover i { transform: translate(2px, -2px); }
.hqbar__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px clamp(20px, calc(var(--u) * 3), 48px); margin: 0; padding-top: 18px; border-top: 1px dashed rgba(23, 21, 26, .14); }
.hqbar__meta div { display: flex; gap: .8em; align-items: baseline; }
.hqbar__meta dt { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.hqbar__meta dd { margin: 0; display: flex; gap: 14px; font-size: clamp(14px, calc(var(--u) * .98), 16px); font-weight: 700; color: var(--ink); }
.hqbar__meta a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23, 21, 26, .25); text-underline-offset: 4px; }
@media (max-width: 1023px) { .hqbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hqbar__cta { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 599px) { .hqbar { grid-template-columns: minmax(0, 1fr); } .hqbar__meta { flex-direction: column; } }

.cdir { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, calc(var(--u) * 5), 96px); margin-top: clamp(40px, calc(var(--u) * 5), 88px); align-items: start; }
.cdir__side { position: relative; }
@media (min-width: 1024px) { .cdir__side { position: sticky; top: calc(var(--head-off, 110px) + 32px); } }
.cdir__k, .cdir__cols { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.cdir__idx { position: relative; margin-top: 12px; border-top: 1px solid rgba(23, 21, 26, .14); }
.cdir__idx li { border-bottom: 1px solid rgba(23, 21, 26, .1); }
.cdir__b { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: clamp(12px, calc(var(--u) * 1.4), 20px) 4px clamp(12px, calc(var(--u) * 1.4), 20px) 22px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: rgba(23, 21, 26, .38); transition: color .35s var(--ease), padding .45s var(--ease); }
.cdir__bn { font-size: clamp(24px, calc(var(--u) * 2.4), 40px); font-weight: 800; letter-spacing: -.012em; line-height: 1.1; }
.cdir__bc { font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.cdir__b:hover { color: var(--ink); }
.cdir__b[aria-pressed="true"] { color: var(--ink); padding-left: 30px; }
.cdir__b[aria-pressed="true"] .cdir__bc { color: var(--red); }
.cdir__b:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.cdir__bar { position: absolute; left: 0; top: 0; width: 4px; height: var(--h, 0); border-radius: 0 2px 2px 0; background: var(--red); transform: translateY(var(--y, 0)); transition: transform .55s var(--ease), height .55s var(--ease); pointer-events: none; }

.cdir__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.cdir__now { display: flex; align-items: baseline; gap: .5em; }
.cdir__nowname { font-size: clamp(22px, calc(var(--u) * 2), 34px); font-weight: 900; letter-spacing: -.008em; color: var(--ink); }
.cdir__nowc { font-size: var(--fs-md); font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.cdir__cols { display: grid; grid-template-columns: 9em 4.2em; gap: 18px; text-align: right; }
.cdir__cols span:first-child { display: none; }
.cdir__row { display: grid; grid-template-columns: 6.4em minmax(0, 1fr) 9em 4.2em; align-items: center; gap: 4px 18px; padding: clamp(16px, calc(var(--u) * 1.8), 26px) 0; border-bottom: 1px solid rgba(23, 21, 26, .1); transition: background .25s var(--ease); }
.cdir__row[hidden] { display: none; }
@media (hover: hover) { .cdir__row:hover { background: linear-gradient(90deg, rgba(208, 2, 27, .05), rgba(208, 2, 27, 0) 70%); } .cdir__row:hover .cdir__name { color: var(--red); } }
.cdir__reg { font-size: 13px; font-weight: 700; color: var(--ink-3); padding-left: 4px; }
.ps .cdir__name { font-size: clamp(18px, calc(var(--u) * 1.4), 23px); font-weight: 800; letter-spacing: -.004em; color: var(--ink); transition: color .25s var(--ease); }
.cdir__name em { margin-left: .5em; padding: .15em .55em; border-radius: var(--r-pill); background: var(--red); font-style: normal; font-size: var(--fs-2xs); font-weight: 700; color: #fff; vertical-align: 3px; }
.cdir__addr { margin-top: 3px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); word-break: keep-all; }
.cdir__tel { justify-self: end; font-size: clamp(14.5px, calc(var(--u) * 1.02), 16.5px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdir__map { justify-self: end; }
/* 지역 전환 : 목록이 잠깐 빠졌다가, 새 줄이 차례로 들어온다 */
.cdir__list { transition: opacity .22s var(--ease), transform .22s var(--ease); }
.cdir.is-leaving .cdir__list { opacity: 0; transform: translateY(6px); }
html.js .cdir.is-enter .cdir__row:not([hidden]) { animation: cdirIn .6s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes cdirIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .cdir { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cdir__k, .cdir__bar { display: none; }
  .cdir__idx { display: flex; gap: 6px; margin: 0; border: 0; overflow-x: auto; scrollbar-width: none; }
  .cdir__idx::-webkit-scrollbar { display: none; }
  .cdir__idx li { flex: none; border: 0; }
  .cdir__b, .cdir__b[aria-pressed="true"] { align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(23, 21, 26, .14); border-radius: var(--r-pill); color: var(--ink-2); }
  .cdir__bn { font-size: 15px; font-weight: 700; }
  .cdir__bc { font-size: 14px; }
  .cdir__b[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .cdir__b[aria-pressed="true"] .cdir__bc { color: #FF9AA2; }
}
@media (max-width: 767px) {
  .cdir__cols { display: none; }
  .cdir__row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .cdir__reg { grid-column: 1; padding: 0; font-size: var(--fs-2xs); }
  .cdir__main { grid-column: 1; }
  .cdir__tel { grid-column: 1; justify-self: start; }
  .cdir__map { grid-column: 2; grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) { .cdir__bar, .cdir__list, .cdir__b { transition: none !important; } .cdir__row { animation: none !important; } .hqbar__tag::before { animation: none; } }



/* ══════════════════════════════════════════════════════════════════════════
   7차 (2026-09-14) : 수업 자료 무대를 밝은 판으로, 받는 자료 타일 색 조정 (프로그램 상세 네 쪽 공통)
   무대 : 따뜻한 회분홍 판 + 옅은 점 격자. 흰 종이 자료가 떠 보이고, 탭 · 옆 설명 · 모듈 안 요소는 잉크색으로 다시 칠한다.
   ══════════════════════════════════════════════════════════════════════════ */
.exstage {
  --stage: #F1E5E1;
  background-color: var(--stage);
  background-image: radial-gradient(rgba(23, 21, 26, .07) 1px, transparent 1.2px);
  background-size: 18px 18px;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06);
}
.exstage::before { background: radial-gradient(50% 60% at 100% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); }
/* 탭 */
.exstage .exs__tabs { background: rgba(255, 255, 255, .7); border-color: rgba(23, 21, 26, .08); box-shadow: 0 8px 20px -14px rgba(60, 20, 20, .3); }
.exstage .exs__tab { color: var(--ink-3); }
.exstage .exs__tab:hover { color: var(--ink); }
.exstage .exs__tab.is-on { background: var(--ink); color: #fff; }
.exstage .exs__tab b { color: var(--red); }
.exstage .exs__tab.is-on b { color: #FF9AA2; }
.exstage .exs__tab:focus-visible { outline-color: var(--red); }
.exstage .exs__note { color: var(--ink-3); }
/* 옆 설명 */
.exstage .ex__h { color: var(--ink); }
.exstage .ex__d { color: var(--ink-2); }
.exstage .ex__facts { border-top-color: rgba(23, 21, 26, .14); }
.exstage .ex__facts li { border-bottom-color: rgba(23, 21, 26, .1); color: var(--ink-3); }
.exstage .ex__facts b { color: var(--ink); }
/* 종이 모서리 접힘 : 판 색에 맞춘다 */
.exstage .qx__paper::after, .exstage .sx__paper::after, .exstage .qd__paper::after, .exstage .cm__paper::after, .exstage .rl__paper::after { background: linear-gradient(225deg, var(--stage) 50%, #EADBD6 50%); }
.exstage .qx__paper, .exstage .sx__paper, .exstage .qd__paper, .exstage .cm__paper, .exstage .rl__paper, .exstage .dx__card, .exstage .ans__q, .exstage .gun__board {
  box-shadow: 0 1px 2px rgba(60, 20, 20, .06), 0 30px 50px -30px rgba(80, 30, 30, .35);
}
/* 첨삭 3파일 · 한 달 주기 */
.exstage .rl__tabs { background: rgba(255, 255, 255, .7); border-color: rgba(23, 21, 26, .08); }
.exstage .rl__tab { color: var(--ink-3); }
.exstage .rl__tab.is-on { background: var(--ink); color: #fff; }
.exstage .rl__tab b { color: var(--red); }
.exstage .rl__tab.is-on b { color: #FF9AA2; }
.exstage .rl__legend { color: var(--ink-3); }
.exstage .rl__lg--del::before { background: var(--red); }
.exstage .rl__lg--ins::before { background: #3B63E0; }
.exstage .cycle { border-top-color: rgba(23, 21, 26, .12); }
.exstage .cycle__k { color: var(--red); }
.exstage .cycle__bar::before { background: rgba(23, 21, 26, .14); }
.exstage .cycle__bar::after { background: var(--red); }
.exstage .cycle__bar li::before { background: var(--stage); border-color: var(--red); }
.exstage .cycle__bar b { color: var(--ink); }
.exstage .cycle__bar span, .exstage .cycle__note { color: var(--ink-3); }
/* 세특 예시 */
.exstage .sx__hint { color: var(--ink-3); }
.exstage .sx__key { border-color: rgba(23, 21, 26, .16); background: rgba(255, 255, 255, .6); color: var(--ink); }
.exstage .sx__key:hover { border-color: rgba(23, 21, 26, .35); }
.exstage .sx__key[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.exstage .sx__key--unit { --k: var(--red); }
.exstage .sx__key--inq { --k: #3B63E0; }
.exstage .sx__key--out { --k: #E39A12; }
.exstage .sx__key--grow { --k: #2F8F5B; }
/* 답변 틀 */
.exstage .ans__tail { border-color: rgba(208, 2, 27, .35); background: rgba(255, 255, 255, .5); color: var(--ink); }
.exstage .ans__tail .ans__qk { color: var(--red); }
.exstage .ans__s { background: rgba(255, 255, 255, .6); border-color: rgba(23, 21, 26, .08); }
.exstage .ans__k { color: var(--red); }
.exstage .ans__t { color: var(--ink); }
.exstage .ans__s::after { background: var(--red); }
html.js .exstage .ans.is-ready .ans__s.is-on { background: #fff; border-color: rgba(208, 2, 27, .25); box-shadow: 0 16px 30px -22px rgba(80, 30, 30, .35); }
.exstage .ans__replay { border-color: rgba(23, 21, 26, .25); color: var(--ink); }
.exstage .ans__replay:hover { background: #fff; }
/* 가나다군 */
.exstage .gun__switch { background: rgba(255, 255, 255, .7); border-color: rgba(23, 21, 26, .08); }
.exstage .gun__b { color: var(--ink-3); }
.exstage .gun__b[aria-pressed="true"] { background: var(--ink); color: #fff; }
.exstage .gun__b b { color: var(--red); }
.exstage .gun__b[aria-pressed="true"] b { color: #FF9AA2; }
.exstage .gun__cap { color: var(--ink); }
.exstage .gun__note { color: var(--ink-3); }
@media (max-width: 599px) { .exstage { background-size: 14px 14px; } }

/* 받는 자료 : 문서 뒤 타일을 한 단계 진한 웜톤으로. 흰 문서 테두리가 또렷하게 보인다 */
.dcard__pv {
  background-color: #E8D6D0;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(rgba(23, 21, 26, .06) 1px, transparent 1.2px);
  background-size: auto, 16px 16px;
}
.dcard__pv::after { background: linear-gradient(rgba(232, 214, 208, 0), rgba(232, 214, 208, .95)); }
.pv { box-shadow: 0 0 0 1px rgba(23, 21, 26, .05), 0 20px 36px -18px rgba(80, 30, 30, .45); }

/* ══════════════════════════════════════════════════════════════════════════
   22차 (2026-09-14) : 프로그램 상세 히어로 대표 아이콘 4차(.hart > .hi) — Higgsfield 3D 아이콘 한 장
   이전 카드 구성보다 작게(최대 360px). 붉은 빛 한 겹 + 바닥 그림자 + 아이콘. 1024px 이상에서만 보이며 글 흐름에 영향 없음.
   ══════════════════════════════════════════════════════════════════════════ */
.ps-hero__top { position: relative; }
.hart { display: none; }
@media (min-width: 1024px) {
  .ps-hero__top { --art: clamp(200px, min(21vw, calc(100svh - 520px)), 310px); padding-right: calc(var(--art) + 40px); }
  .hart { display: block; position: absolute; right: clamp(0px, calc(var(--u) * 2), 40px); bottom: -10px; width: var(--art); height: var(--art); }
}
.hart { mix-blend-mode: screen; }
.hi { position: absolute; inset: 0; perspective: 1000px; }
.hi__glow { position: absolute; left: 14%; top: 12%; width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(closest-side, rgba(208, 2, 27, .22), rgba(208, 2, 27, 0)); filter: blur(8px); animation: hiGlow 7s ease-in-out infinite alternate; }
@keyframes hiGlow { from { opacity: .7; } to { opacity: 1; } }
.hi__float { position: absolute; inset: 2%; animation: hiFloat 4.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.hi__img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes hiFloat { from { transform: translateY(6px); } to { transform: translateY(-8px); } }
html.js .hart.is-ready .hi { opacity: 0; transform: translateY(26px) scale(.92); }
html.js .hart.is-in .hi { opacity: 1; transform: none; transition: opacity .9s var(--ease) .25s, transform 1.2s cubic-bezier(.2, .8, .2, 1) .25s; }
.hart.is-off *, .hart.is-off { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .hart *, .hart { animation: none !important; transition: none !important; } .hi__img { transform: none; } }


/* ══════════════════════════════════════════════════════════════════════════
   11차 (2026-09-14) : 합격 실적 재구성
   후기(다크) : 대표 리뷰 한 편을 가로 전체로(왼쪽 글 · 오른쪽 출처와 리뷰 항목) → 합격 소식 메시지 카드 3열.
               카드가 들어오면 입력 중 점이 잠깐 보이고 말풍선이 뜬다(한 번, 카드마다 차례로).
   합격 사례(밝음) : 카드 격자 대신 표 한 장. 대학 · 학과 · 결과 · 학년도/전형 · 프로그램. 폰에서는 줄마다 두 단.
   ══════════════════════════════════════════════════════════════════════════ */

/* 결과 표시 */
.rbadge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .75em; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #F1E8E5; color: var(--ink-2); }
.rbadge--first { background: var(--red); color: #fff; }
.rbadge--add { background: #FCE7C8; color: #8A4B00; }
.rbadge--jeong { background: var(--ink); color: #fff; }

/* 대표 리뷰 */

/* 메시지 카드 */

/* 합격 사례 표 */
.rt { border-radius: var(--r-lg); background: #fff; box-shadow: 0 1px 2px rgba(60, 20, 20, .04), 0 24px 44px -34px rgba(60, 20, 20, .4); overflow: hidden; }
.rt__head, .rt__row { display: grid; grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.2fr) 104px minmax(0, 1.35fr) 136px; align-items: center; gap: 16px; padding: 0 clamp(18px, calc(var(--u) * 2.2), 32px); }
.rt__head { min-height: 48px; background: #F6EEEB; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.rt__row { min-height: 72px; border-top: 1px solid rgba(23, 21, 26, .07); transition: background .2s var(--ease); }
.rt__row[hidden] { display: none; }
@media (hover: hover) { .rt__row:hover { background: #FCF8F7; } }
.rt__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F7F2F1; overflow: hidden; }
.rt__mark:has(img) { background: var(--uc); }
.rt__mark img { width: auto; height: calc(62% * var(--k, 1)); }
.rt__dept:empty { display: none; }
@media (min-width: 768px) { .rt__dept:empty { display: block; } }
.rt__mark i { font-style: normal; font-size: 17px; font-weight: 900; color: var(--uc, var(--ink)); }
.rt__u { font-size: clamp(15.5px, calc(var(--u) * 1.1), 18px); font-weight: 800; letter-spacing: -.004em; color: var(--ink); }
.rt__c { font-size: clamp(14px, calc(var(--u) * .98), 15.5px); color: var(--ink-2); word-break: keep-all; }
.rt__type { color: var(--ink-3); }
.rt__prog { font-weight: 700; color: var(--red); }
html.js .rt.is-ready .rt__row:not([hidden]) { opacity: 0; transform: translateY(10px); }
html.js .rt.is-in .rt__row:not([hidden]) { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease), background .2s var(--ease); transition-delay: calc(var(--k, 0) * 35ms); }

@media (max-width: 1023px) {
  .rt__head, .rt__row { grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr) 96px minmax(0, 1.2fr); }
  .rt__head span:last-child, .rt__prog { display: none; }
}
@media (max-width: 767px) {
  .rt__head { display: none; }
  .rt__row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "m u r" "m d d" "m t t"; gap: 2px 12px; align-items: start; padding-block: 16px; }
  .rt__mark { grid-area: m; }
  .rt__u { grid-area: u; align-self: center; }
  .rt__res { grid-area: r; }
  .rt__dept { grid-area: d; }
  .rt__type { grid-area: t; font-size: var(--fs-xs); }
  .rt__type::after { content: " · " attr(data-p); }
  .rt__prog { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rt__row { transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   12차 (2026-09-14) : 수업 자료 판 버튼 · 배경 정리 (프로그램 상세 네 쪽 공통)
   큰 탭 · 가나다 전환 = 밝은 세그먼트(고른 칸만 흰 바탕 + 그림자), 검정 칸 없음.
   첨삭 1 · 2 · 3차 = 단계 표시(번호 알약 + 이음선)로 한 단계 아래 위계.
   판 배경 = 점무늬 없는 따뜻한 단색 + 모서리 빛 한 겹.
   ══════════════════════════════════════════════════════════════════════════ */
.exstage { --stage: #F4ECE9; background-image: none; background-color: var(--stage); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .05); }
.exstage::before { background: radial-gradient(60% 70% at 0% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), radial-gradient(45% 55% at 100% 100%, rgba(208, 2, 27, .05), rgba(208, 2, 27, 0) 72%); }
.exstage .exs__tabs, .exstage .gun__switch { background: #E8DCD8; border: 0; box-shadow: inset 0 1px 2px rgba(60, 20, 20, .08); }
.exstage .exs__tab, .exstage .gun__b { color: var(--ink-3); }
.exstage .exs__tab:hover, .exstage .gun__b:hover { color: var(--ink); }
.exstage .exs__tab.is-on, .exstage .gun__b[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(60, 20, 20, .12), 0 8px 16px -10px rgba(60, 20, 20, .4); }
.exstage .exs__tab b, .exstage .gun__b b, .exstage .exs__tab.is-on b, .exstage .gun__b[aria-pressed="true"] b { color: var(--red); }
/* 첨삭 단계 */
.exstage .rl__tabs { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.exstage .rl__tab { gap: .55em; min-height: 44px; padding: 0 .9em 0 0; border-radius: 0; background: none; color: var(--ink-3); box-shadow: none; }
.exstage .rl__tab + .rl__tab::before { content: ""; width: clamp(14px, calc(var(--u) * 1.6), 26px); height: 1.5px; margin-right: .1em; background: rgba(23, 21, 26, .2); }
.exstage .rl__tab b { display: inline-grid; place-items: center; min-width: 36px; height: 26px; padding: 0 .5em; border-radius: 13px; border: 1.5px solid rgba(23, 21, 26, .18); background: #fff; font-size: 12px; color: var(--ink-3); transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.exstage .rl__tab:hover { color: var(--ink); }
.exstage .rl__tab.is-on { background: none; color: var(--ink); }
.exstage .rl__tab.is-on b { background: var(--red); border-color: var(--red); color: #fff; }
/* 세특 항목 버튼 : 고르면 흰 바탕 + 항목 색 테두리 */
.exstage .sx__key[aria-pressed="true"] { background: #fff; border-color: var(--k); color: var(--ink); box-shadow: inset 0 0 0 1px var(--k); }
.rt__mark:has(i) { background: var(--uc); }
.rt__mark:has(i) i { color: #fff; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   16차 (2026-09-14) : 학원소개 캠퍼스 3차 = 제목 줄 · 넓은 약도(본원 카드 얹음) · 지역별 목록(.cg)
   약도 : 블록 바탕 + 건물 조각 + 공원 + 길(테두리 · 면) + 3호선 · 대치역 + 입체 본원 건물 · 핀 · 이름표.
          들어오면 본원에서 가까운 건물부터 퍼져 나가듯 서고, 길이 그어지고, 건물이 솟은 뒤 핀이 내려앉는다(한 번).
          포인터를 올리면 지도가 포인터 반대쪽으로 아주 조금 밀려 살짝 둘러보는 느낌을 준다.
   목록 : 지역 이름 열 + 흰 판 한 장에 줄(이름 · 등록번호 / 주소 / 전화 / 지도). 버튼은 테두리만, 줄에 올리면 붉게.
   ══════════════════════════════════════════════════════════════════════════ */
.cl2__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(24px, calc(var(--u) * 4), 80px); align-items: end; padding-bottom: clamp(22px, calc(var(--u) * 2.4), 36px); }
.cl2__side .sec-p { margin-top: 0; }
.cl2__sum { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.cl2__sum li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.cl2__sum b { font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; }

/* 약도 */

.ps .cmap__h { margin-top: 14px; font-size: clamp(26px, calc(var(--u) * 2.4), 38px); font-weight: 900; letter-spacing: -.012em; color: var(--ink); }


/* 지역별 목록 */
.cg-wrap { display: grid; gap: clamp(28px, calc(var(--u) * 3), 48px); margin-top: clamp(48px, calc(var(--u) * 5.6), 96px); }
.cg { display: grid; grid-template-columns: clamp(140px, calc(var(--u) * 12), 210px) minmax(0, 1fr); gap: 14px clamp(20px, calc(var(--u) * 2.6), 44px); align-items: start; }
.ps .cg__h { display: grid; gap: 2px; padding-top: 20px; font-size: clamp(22px, calc(var(--u) * 1.8), 30px); font-weight: 900; letter-spacing: -.008em; color: var(--ink); }
.cg__h b { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--red); }
.cg__list { border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 24px 50px -44px rgba(60, 20, 20, .45); overflow: hidden; }
.cr { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 4fr) minmax(0, 1.6fr) auto; align-items: center; gap: 10px clamp(16px, calc(var(--u) * 2.2), 36px); min-height: 84px; padding: 16px clamp(18px, calc(var(--u) * 2.4), 34px); transition: background .25s var(--ease); }
.cr + .cr { border-top: 1px solid rgba(23, 21, 26, .07); }
.cr::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); transform: scaleY(0); transition: transform .3s var(--ease); }
@media (hover: hover) { .cr:hover { background: #FCF8F7; } .cr:hover::before { transform: scaleY(1); } .cr:hover .cr__map { background: var(--red); color: #fff; box-shadow: none; } }
.cr__name { display: grid; gap: 3px; min-width: 0; }
.ps .cr__h { display: flex; align-items: center; gap: 8px; font-size: clamp(17px, calc(var(--u) * 1.25), 20px); font-weight: 800; letter-spacing: -.004em; color: var(--ink); }
.cr__badge { padding: .2em .6em; border-radius: var(--r-pill); background: var(--red); font-size: 12px; font-weight: 700; color: #fff; }
.cr__no { font-size: 12.5px; color: var(--ink-3); }
.cr__adr { font-size: clamp(14px, calc(var(--u) * 1), 15.5px); line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.cr__tel { font-size: clamp(14.5px, calc(var(--u) * 1.02), 16px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr__tel:hover { color: var(--red); }
.cr__map { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px 0 13px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .14); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.cr__map svg { width: 16px; height: 16px; }
.cr__map:focus-visible { background: var(--red); color: #fff; box-shadow: none; }
html.js .cg-wrap.is-ready .cg { opacity: 0; transform: translateY(18px); }
html.js .cg-wrap.is-in .cg { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--k) * 110ms); }

@media (max-width: 1023px) {
  .cl2__head { grid-template-columns: minmax(0, 1fr); }
  .cg { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ps .cg__h { display: flex; align-items: baseline; gap: 8px; padding-top: 0; }
  .cr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n m" "a a" "t t"; gap: 4px 12px; }
  .cr__name { grid-area: n; }
  .cr__map { grid-area: m; }
  .cr__adr { grid-area: a; }
  .cr__tel { grid-area: t; }
}
@media (prefers-reduced-motion: reduce) { .cg { transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   17차 (2026-09-14) : 합격 실적 2차 = 제목 줄 아래 카카오톡 PC 창(.ktw : 왼쪽 채팅 목록 · 오른쪽 대화방)
   목록 줄 = 기본 프로필 · 대학 · 결과 · 마지막 학생 메시지 미리보기 · 날짜. 재생 중인 줄은 아래 노란 막대가 찬다.
   대화방은 화면에 들어오면 실제처럼 재생(program.js [data-kt]). 동작 줄이기면 멈춘 채 전체.
   수업 후기(밝음) : 큰 인용 한 문장 + 나머지 글 + 고른 항목. 출처 확인 전이라 네이버 표기 없음.
   ══════════════════════════════════════════════════════════════════════════ */
.rs-hero { min-height: auto; justify-content: flex-start; }
.rs-hero::before { background: radial-gradient(50% 60% at 70% 70%, rgba(208, 2, 27, .24), rgba(208, 2, 27, 0) 72%), radial-gradient(40% 40% at 5% 10%, rgba(255, 122, 132, .07), rgba(255, 122, 132, 0) 74%); }
.rs-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, calc(var(--u) * 4), 80px); align-items: end; margin-top: clamp(28px, calc(var(--u) * 3.4), 60px); }
.rs-hero__head .ps-hero__lede { margin: 0 0 .4em; max-width: 30em; }



.km-date { display: flex; justify-content: center; margin: 14px 0 10px; }
.km-date span { padding: 5px 14px; border-radius: 999px; background: rgba(0, 0, 0, .1); font-size: 12px; color: #2E3440; }
.km { display: flex; align-items: flex-start; gap: 9px; max-width: 100%; }
.km--out { justify-content: flex-end; }
.km--cont { padding-left: 49px; }
.km__av { flex: none; width: 40px; height: 40px; border-radius: 15px; background: #9FB3DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='18' r='7.5' fill='%23fff'/%3E%3Cpath d='M9 38c2-7.5 7.5-11 14-11s12 3.5 14 11' fill='%23fff'/%3E%3C/svg%3E") center / cover; }
.km__col { display: grid; justify-items: start; gap: 5px; min-width: 0; max-width: min(78%, 460px); }
.km__who { width: 58px; height: 11px; margin: 3px 0 0; border-radius: 6px; background: rgba(46, 52, 64, .22); filter: blur(2.5px); }
.km__row { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.km--out .km__row { max-width: min(78%, 460px); }
.km__b { position: relative; padding: 9px 13px; border-radius: 15px; background: #fff; font-size: 14.5px; line-height: 1.5; letter-spacing: -.01em; color: #1E2228; word-break: keep-all; overflow-wrap: anywhere; }
.km--in:not(.km--cont) .km__b::before { content: ""; position: absolute; left: -6px; top: 7px; border-top: 7px solid transparent; border-right: 9px solid #fff; border-bottom: 5px solid transparent; }
.km--out .km__b { background: #FEE500; }
.km--out:not(.km--out + .km--out) .km__b::after { content: ""; position: absolute; right: -6px; top: 7px; border-top: 7px solid transparent; border-left: 9px solid #FEE500; border-bottom: 5px solid transparent; }
.km__b--emoji { font-size: 22px; padding: 5px 10px; }
.km__t { flex: none; font-size: 11px; color: #56606C; white-space: nowrap; }
.km__re { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 700; color: #E0245E; }
.km__doc { display: grid; justify-items: center; gap: 8px; width: 180px; padding: 20px 16px 16px; border-radius: 14px; background: #fff; }
.km__doc b { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: #1E2228; }
.km__doc i { display: block; width: 100%; height: 9px; border-radius: 5px; background: #D5DAE2; filter: blur(2px); }
.km__doc i:nth-of-type(2) { width: 70%; }
.km__doc span { margin-top: 6px; font-size: 11px; letter-spacing: .12em; color: #6B7280; }
.km--typing .km__b { display: inline-flex; gap: 4px; padding: 13px 14px; }
.km--typing .km__b i { width: 6px; height: 6px; border-radius: 50%; background: #9AA3AE; animation: rvDot 1s ease-in-out infinite; }
.km--typing .km__b i:nth-child(2) { animation-delay: .15s; }
.km--typing .km__b i:nth-child(3) { animation-delay: .3s; }
@keyframes rvDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes kmIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* 수업 후기 */
.ps.nrv-sec { padding-bottom: clamp(16px, calc(var(--u) * 2), 40px); }
/* 수강 후기 → 합격 사례 (2026-10-16) : 두 면이 같은 바탕이라 윗여백(챕터 기본 156px)이 그대로 빈 띠로 보였다.
   합격 사례 윗여백을 줄이고, 그 자리에 본문 폭 가는 선 하나를 그어 '여기서 다음 장'을 선으로 알린다.
   레일로 #cases 에 뛰었을 때 챕터 번호가 헤더 · 레일에 가리지 않게, 줄인 만큼 scroll-margin-top 으로 돌려준다 */
.ps.nrv-sec + .ps.pcs-sec {
  --pcs-pt: clamp(20px, calc(var(--u) * 1.9), 32px);
  --pcs-gap: clamp(36px, calc(var(--u) * 3.2), 52px);
  padding-top: var(--pcs-pt);
  scroll-margin-top: max(0px, calc(var(--top-h) + 20px - var(--pcs-pt) - var(--pcs-gap)));
}
.ps.nrv-sec + .ps.pcs-sec .pcs__head { padding-top: var(--pcs-gap); border-top: 1px solid rgba(23, 21, 26, .12); }
@media (max-width: 1023px) { .ps.nrv-sec + .ps.pcs-sec { --pcs-pt: 18px; --pcs-gap: 34px; } }
@media (max-width: 599px) { .ps.nrv-sec + .ps.pcs-sec { --pcs-pt: 14px; --pcs-gap: 28px; } }
@media (min-width: 1024px) and (min-height: 560px) {
  .ps.nrv-sec + .ps.pcs-sec { scroll-margin-top: max(0px, calc(var(--head-off) + 28px - var(--pcs-pt) - var(--pcs-gap))); }
}
.nrv { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, calc(var(--u) * 4), 80px); align-items: start; }
.nrv__card { position: relative; margin: 0; padding: clamp(28px, calc(var(--u) * 3.6), 56px); border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06), 0 30px 60px -44px rgba(60, 20, 20, .45); overflow: hidden; }
.nrv__card::before { content: "\201C"; position: absolute; right: clamp(20px, calc(var(--u) * 2.6), 44px); top: -.12em; font-size: clamp(120px, calc(var(--u) * 13), 210px); font-weight: 900; line-height: 1; color: rgba(208, 2, 27, .08); pointer-events: none; }
.nrv__q { position: relative; margin: 0; display: grid; gap: 1.1em; }
.nrv__q p { font-size: clamp(15.5px, calc(var(--u) * 1.1), 18px); line-height: 1.85; color: var(--ink-2); word-break: keep-all; }
.nrv__q .nrv__lead { font-size: var(--fs-2xl); line-height: 1.55; font-weight: 700; letter-spacing: -.008em; color: var(--ink); }
.nrv__cap { display: grid; gap: 16px; margin-top: clamp(22px, calc(var(--u) * 2.6), 36px); padding-top: 20px; border-top: 1px solid rgba(23, 21, 26, .08); }
.nrv__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; color: var(--ink-3); }
.nrv__who b { font-size: 16px; font-weight: 800; color: var(--ink); }
.nrv__keys { display: flex; flex-wrap: wrap; gap: 6px; }
.nrv__keys li { padding: 8px 13px; border-radius: var(--r-pill); background: #F6EEEB; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

@media (max-width: 1023px) {
  .rs-hero__head { grid-template-columns: minmax(0, 1fr); }
  .nrv { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .km--typing .km__b i { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   19차 (2026-09-14) : 캠퍼스 약도 4차(.cmap2) — 카카오맵 캡처의 위치 관계를 따른 선 지도
   왼쪽 넓은 칸 = 약도(흰 바탕 · 가는 회색 길 · 2호선 초록 선과 역 · 녹지 · 주변 학교 점 표시 · 붉은 핀 + 테두리 이름표)
   오른쪽 칸 = 본원 정보. 들어오면 길 → 2호선 → 역 · 표시 → 핀 순서로 그려진다(한 번). 포인터를 올리면 지도가 조금 밀린다.
   ══════════════════════════════════════════════════════════════════════════ */
.cmap2 { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 14px; }
.cmap2__map { position: relative; margin: 0; min-height: 460px; border-radius: 24px; overflow: hidden; background: #FBFAF9; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08); }
.cmap2__svg { position: absolute; inset: -2%; width: 104%; height: 104%; font-family: inherit; transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px)); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.c2-green { fill: #E6F0DE; }
.c2-water { fill: none; stroke: #D6E7EF; stroke-width: 34; stroke-linecap: round; }
.c2-r { fill: none; stroke: #E4E1DF; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.c2-r--m { stroke: #D9D4D1; stroke-width: 15; }
.c2-hw { fill: none; stroke: #F2C9A0; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.c2-l2 { fill: none; stroke: #3CB44A; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.c2-names text { font-size: 13px; font-weight: 700; fill: #9C9499; letter-spacing: .04em; }
.c2-lm circle { fill: #fff; stroke: #A9A1A6; stroke-width: 2; }
.c2-lm text { font-size: 13.5px; font-weight: 600; fill: #6F676C; paint-order: stroke; stroke: #FBFAF9; stroke-width: 4px; stroke-linejoin: round; }
.c2-lm .c2-park { font-size: 14px; font-weight: 700; fill: #6E9A5E; stroke: #E6F0DE; }
.c2-st circle { fill: #3CB44A; stroke: #fff; stroke-width: 3; }
.c2-st__n { font-size: 15px; font-weight: 900; fill: #fff; }
.c2-st__pill { fill: #fff; stroke: #3CB44A; stroke-width: 2; }
.c2-st__t { font-size: 14px; font-weight: 800; fill: #1F6B2A; }
.c2-pin__ring { fill: rgba(208, 2, 27, .14); transform-box: fill-box; transform-origin: 50% 50%; animation: c2Ring 2.4s ease-out infinite; }
@keyframes c2Ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.c2-pin__tag rect { fill: #fff; stroke: #D0021B; stroke-width: 1.5; }
.c2-pin__t1 { font-size: 15px; font-weight: 800; fill: var(--ink); }
.c2-pin__t2 { font-size: 12.5px; fill: #6F676C; }
.cmap2__note { position: absolute; left: 14px; bottom: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06); font-size: 12px; font-weight: 600; color: var(--ink-3); }

.cmap2__info { display: flex; flex-direction: column; padding: clamp(24px, calc(var(--u) * 2.6), 38px); border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08); }
.cmap2__info .cmap__badge { align-self: flex-start; padding: .32em .8em; border-radius: var(--r-pill); background: var(--red); font-size: 12.5px; font-weight: 700; color: #fff; }
.ps .cmap2__info .cmap__h { margin-top: 14px; font-size: clamp(26px, calc(var(--u) * 2.4), 36px); font-weight: 900; letter-spacing: -.012em; color: var(--ink); }
.cmap2__info .cmap__adr { margin-top: 6px; font-size: var(--fs-md); font-weight: 600; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.cmap2__info .cmap__dl { display: grid; gap: 10px; margin: auto 0 0; padding-top: 22px; }
.cmap2__info .cmap__dl > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: baseline; padding-top: 10px; border-top: 1px solid rgba(23, 21, 26, .08); }
.cmap2__info .cmap__dl dt { font-size: var(--fs-2xs); font-weight: 800; color: var(--red); }
.cmap2__info .cmap__dl dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); word-break: keep-all; }
.cmap2__info .cmap__dl a:hover { color: var(--red); }
.cmap2__info .cmap__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cmap2__info .cmap__go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .16); font-size: 15px; font-weight: 700; color: var(--ink); transition: box-shadow .25s var(--ease); }
.cmap2__info .cmap__go i { font-style: normal; transition: transform .3s var(--ease); }
.cmap2__info .cmap__go:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cmap2__info .cmap__go:hover i { transform: translate(2px, -2px); }

html.js .cmap2.is-ready .c2-r, html.js .cmap2.is-ready .c2-hw, html.js .cmap2.is-ready .c2-l2 { stroke-dashoffset: 1; }
html.js .cmap2.is-in .c2-r, html.js .cmap2.is-in .c2-hw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.65, 0, .35, 1) .1s; }
html.js .cmap2.is-in .c2-l2 { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) .7s; }
html.js .cmap2.is-ready .c2-green, html.js .cmap2.is-ready .c2-water, html.js .cmap2.is-ready .c2-names, html.js .cmap2.is-ready .c2-lm, html.js .cmap2.is-ready .c2-st { opacity: 0; }
html.js .cmap2.is-in .c2-green, html.js .cmap2.is-in .c2-water { opacity: 1; transition: opacity .8s var(--ease); }
html.js .cmap2.is-in .c2-names, html.js .cmap2.is-in .c2-lm, html.js .cmap2.is-in .c2-st { opacity: 1; transition: opacity .6s var(--ease) 1.5s; }
html.js .cmap2.is-ready .c2-pin__m, html.js .cmap2.is-ready .c2-pin__tag { opacity: 0; }
html.js .cmap2.is-ready .c2-pin__m { translate: 0 -40px; }
html.js .cmap2.is-in .c2-pin__m { opacity: 1; translate: 0 0; transition: opacity .3s var(--ease) 1.8s, translate .7s cubic-bezier(.2, .9, .3, 1) 1.8s; }
html.js .cmap2.is-in .c2-pin__tag { opacity: 1; transition: opacity .6s var(--ease) 2.3s; }
html.js .cmap2.is-ready .cmap2__info { opacity: 0; translate: 0 16px; }
html.js .cmap2.is-in .cmap2__info { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease) .3s, translate .9s cubic-bezier(.2, .8, .2, 1) .3s; }

@media (max-width: 1023px) {
  .cmap2 { grid-template-columns: minmax(0, 1fr); }
  .cmap2__map { min-height: 0; aspect-ratio: 16 / 11; }
  .cmap2__svg { transform: none; }
}
@media (max-width: 599px) { .cmap2__map { aspect-ratio: 1 / 1; } .c2-pin__tag { transform: translate(-107px, 24px) scale(1.25); transform-box: view-box; } }
@media (prefers-reduced-motion: reduce) { .cmap2 *, .cmap2 { animation: none !important; transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   21차 (2026-09-14) : 합격 실적 카카오톡 카드 차분하게(.ktc) + 전체 대화 창(.ktd)
   카드 6장 같은 높이 3열. 카드엔 학생 합격 메시지 한 개 + 선생님 답장 한 개만. 파란 배경 · 입력 중 점 · 동시 재생은 뺐다.
   '대화 전체 보기' → dialog 로 카카오톡 원문 대화(말풍선이 차례로 한 번). 카드는 화면에 들어올 때 한 번 조용히 올라온다.
   ══════════════════════════════════════════════════════════════════════════ */

.ktd { width: min(460px, calc(100vw - 32px)); max-height: min(760px, calc(100svh - 48px)); padding: 0; border: 0; border-radius: 24px; background: #B2C7DA; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); overflow: hidden; }
.ktd[open] { display: flex; flex-direction: column; animation: ktdIn .45s cubic-bezier(.2, .8, .2, 1); }
.ktd::backdrop { background: rgba(10, 9, 12, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes ktdIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.ktd__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 18px; background: #fff; }
.ktd__av { flex: none; width: 38px; height: 38px; border-radius: 14px; background: #B8C7E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='18' r='7.5' fill='%23fff'/%3E%3Cpath d='M9 38c2-7.5 7.5-11 14-11s12 3.5 14 11' fill='%23fff'/%3E%3C/svg%3E") center / cover; }
.ktd__t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.ktd__t b { font-size: 16px; font-weight: 800; color: #191919; }
.ktd__t span { font-size: 12px; color: #8E8E8E; }
.ktd__x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F2F2F2; font-size: 22px; line-height: 1; color: #333; cursor: pointer; }
.ktd__x:hover { background: #E6E6E6; }
.ktd__body { flex: 1; overflow-y: auto; padding: 8px 16px 20px; overscroll-behavior: contain; }
.ktd .kt__thread { display: flex; flex-direction: column; gap: 6px; }
.ktd .kt__thread > li { animation: kmIn .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--m, 0) * 110ms + 150ms); }
.ktd__foot { padding: 10px 16px; background: rgba(255, 255, 255, .55); font-size: 11.5px; color: #4F5B69; text-align: center; }
@media (max-width: 1023px) { .ktc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ktc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ktd[open], .ktd .kt__thread > li { animation: none; } }

/* 본원 정보 칸 정리 (2026-09-14) : 이름 · 주소 · 등록번호를 위에, 연락처는 옅은 상자 한 칸, 버튼은 아래에 같은 너비 두 개 */
.cmap2__info .cmap__reg { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.cmap2__info .cmap__dl { margin-top: auto; padding: 6px 18px; border-radius: 16px; background: #F8F4F3; gap: 0; }
.cmap2__info .cmap__dl > div { padding: 12px 0; border-top: 1px solid rgba(23, 21, 26, .07); }
.cmap2__info .cmap__dl > div:first-child { border-top: 0; }
.cmap2__info .cmap__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.cmap2__info .cmap__cta > a { justify-content: center; min-height: 50px; padding: 0 12px; white-space: nowrap; }

/* 23차 : 카카오톡 카드 디테일 — 머리(말풍선 표시 · 대학 · 날짜 · 결과) / 옅은 카톡색 대화 판(프로필 · 가린 이름 · 꼬리 달린 말풍선 · 보낸 시간) / 전체 보기 버튼(메시지 수 · 화살표 원) */
.ktc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.4), 20px); margin-top: clamp(32px, calc(var(--u) * 3.6), 64px); }
.ktc { position: relative; display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -40px rgba(0, 0, 0, .9); transition: box-shadow .35s var(--ease), translate .35s var(--ease), background .35s var(--ease); }
.ktc::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(254, 229, 0, 0), rgba(254, 229, 0, .55), rgba(254, 229, 0, 0)); opacity: .5; transition: opacity .35s var(--ease); }
@media (hover: hover) { .ktc:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 70px -40px rgba(0, 0, 0, .95); } .ktc:hover::before { opacity: 1; } .ktc:hover .ktc__arr { background: #FEE500; color: #191919; } }
.ktc__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px; }
.ktc__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: #FEE500; color: #3A1D1D; }
.ktc__ic svg { width: 20px; height: 20px; }
.ktc__t { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ktc__t b { font-size: clamp(15.5px, calc(var(--u) * 1.1), 18px); font-weight: 800; letter-spacing: -.002em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktc__t time { font-size: var(--fs-2xs); color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.ktc .rbadge { flex: none; }
.ktc .rbadge--pass { background: rgba(255, 255, 255, .12); color: #fff; }
.ktc .rbadge--jeong { background: #fff; color: var(--ink); }
.ktc__pair { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 14px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(178, 199, 218, .2), rgba(178, 199, 218, .12)); box-shadow: inset 0 0 0 1px rgba(178, 199, 218, .12); }
.ktc__msg { display: flex; gap: 8px; min-width: 0; }
.ktc__msg--out { justify-content: flex-end; }
.ktc__av { flex: none; width: 34px; height: 34px; border-radius: 13px; background: #9FB3DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='18' r='7.5' fill='%23fff'/%3E%3Cpath d='M9 38c2-7.5 7.5-11 14-11s12 3.5 14 11' fill='%23fff'/%3E%3C/svg%3E") center / cover; }
.ktc__col { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.ktc__name { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.ktc__name i { width: 40px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .28); filter: blur(2px); }
.ktc__row { display: flex; align-items: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
.ktc__msg--out .ktc__row { max-width: 88%; }
.ktc__row time { flex: none; font-size: 12px; color: rgba(255, 255, 255, .45); white-space: nowrap; }
.ktc__b { position: relative; padding: 9px 12px; border-radius: 15px; background: #fff; font-size: 14px; line-height: 1.5; letter-spacing: -.01em; color: #1E2228; word-break: keep-all; overflow-wrap: anywhere; }
.ktc__msg--in .ktc__b::before { content: ""; position: absolute; left: -6px; top: 7px; border-top: 6px solid transparent; border-right: 8px solid #fff; border-bottom: 5px solid transparent; }
.ktc__msg--out .ktc__b { background: #FEE500; }
.ktc__msg--out .ktc__b::after { content: ""; position: absolute; right: -6px; top: 7px; border-top: 6px solid transparent; border-left: 8px solid #FEE500; border-bottom: 5px solid transparent; }
.ktc__more { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 8px; padding: 0 8px 0 14px; border: 0; border-radius: 16px; background: none; font: inherit; color: #fff; cursor: pointer; text-align: left; transition: background .25s var(--ease); }
.ktc__more:hover { background: rgba(255, 255, 255, .05); }
.ktc__mt { font-size: 14.5px; font-weight: 700; }
.ktc__cnt { margin-right: auto; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.ktc__arr { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background .25s var(--ease), color .25s var(--ease); }
.ktc__arr::before { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; margin-left: -3px; }
.ktc__more:focus-visible { outline: 2px solid #FEE500; outline-offset: 2px; }
html.js .ktc-grid.is-ready .ktc { opacity: 0; translate: 0 22px; }
html.js .ktc-grid.is-in .ktc { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease), translate .9s var(--ease), box-shadow .35s var(--ease); transition-delay: calc(var(--k) * 90ms), calc(var(--k) * 90ms), 0s; }
html.js .ktc-grid.is-in .ktc:hover { transition-delay: 0s; }
@media (max-width: 1023px) { .ktc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ktc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════════════════════════════════════════════════
   24차 (2026-09-14) : 합격 실적 · 2026학년도 합격 후기(.pcs) — 공지사항 원문을 줄여 옮긴 카드
   위 : 제목 · 설명 / 오른쪽에 공지에 올라온 합격 학교 전체 이름표. 아래 : 전체 · 대학 · 고입 거르기 + 카드 3열.
   카드 = 대학/고입 · 선생님 기록/학생 후기 · 학교 · 부제 · 수치 칸 · 본문(학생 후기는 인용) · 공지 원문 링크.
   들어오면 카드가 차례로 올라오고, 거르기를 바꾸면 남은 카드가 다시 차례로 뜬다.
   ══════════════════════════════════════════════════════════════════════════ */
.pcs__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, calc(var(--u) * 4), 80px); align-items: end; margin-bottom: clamp(24px, calc(var(--u) * 2.8), 44px); }
.pcs__title .sec-p { max-width: 30em; }
.pcs__all { padding: clamp(18px, calc(var(--u) * 2), 28px); border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07); }
.pcs__allh { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pcs__allh b { font-size: 1.3em; font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; }
.pcs__names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pcs__names li { padding: 6px 11px; border-radius: var(--r-pill); background: #F6EEEB; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pcs__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; min-height: 36px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23, 21, 26, .25); text-underline-offset: 4px; }
.pcs__more i { font-style: normal; }
.pcs__more:hover { color: var(--red); }
.pcs__chips { margin-bottom: clamp(16px, calc(var(--u) * 1.8), 24px); }

.pcs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.4), 20px); }
.pc { position: relative; display: flex; flex-direction: column; padding: clamp(22px, calc(var(--u) * 2.4), 32px); border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 20px 40px -34px rgba(60, 20, 20, .4); transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.pc[hidden] { display: none; }
@media (hover: hover) { .pc:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .12), 0 30px 50px -34px rgba(60, 20, 20, .5); } .pc:hover .pc__src i { transform: translate(2px, -2px); } }
.pc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc__type { padding: .3em .75em; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 800; }
.pc__type--univ { background: var(--red); color: #fff; }
.pc__type--high { background: var(--ink); color: #fff; }
.pc__who { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); }
.ps .pc__h { margin-top: 16px; font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.pc__sub { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.pc__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 16px 0 0; }
.pc__facts > div { padding: 9px 12px; border-radius: 12px; background: #F8F4F3; }
.pc__facts > div:only-child { grid-column: 1 / -1; }
.pc__facts dt { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.pc__facts dd { margin: 1px 0 0; font-size: 15px; font-weight: 800; letter-spacing: 0em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc__d { flex: 1; margin-top: 16px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.pc__q { position: relative; flex: 1; margin: 16px 0 0; padding: 16px 16px 16px 18px; border-radius: 4px 16px 16px 16px; background: #FFF6D6; }
.pc__q::before { content: "\201C"; position: absolute; right: 12px; top: -10px; font-size: 64px; font-weight: 900; line-height: 1; color: rgba(208, 2, 27, .14); }
.pc__q p { position: relative; font-size: 14.5px; line-height: 1.7; font-weight: 600; color: #3A2E12; word-break: keep-all; }
.pc__src { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 18px; padding-top: 14px; min-height: 30px; border-top: 1px solid rgba(23, 21, 26, .07); width: 100%; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.pc__src i { font-style: normal; transition: transform .3s var(--ease); }
.pc__src:hover { color: var(--red); }
html.js .pcs__grid.is-ready .pc { opacity: 0; translate: 0 20px; }
html.js .pcs__grid.is-in .pc { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease), translate .8s var(--ease), box-shadow .35s var(--ease); transition-delay: calc(var(--k, 0) * 70ms), calc(var(--k, 0) * 70ms), 0s; }
html.js .pcs__grid.is-in .pc:hover { transition-delay: 0s; }
html.js .pcs__grid.is-swap .pc:not([hidden]) { animation: pcIn .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 55ms); }
@keyframes pcIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) { .pcs__head { grid-template-columns: minmax(0, 1fr); } .pcs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pcs__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pc { transition: none !important; animation: none !important; } }

/* 히어로 아이콘 : 오른쪽 아래 대각선만 은은하게 옅어지게(투명도 그라데이션). 디테일은 그대로 두고 빛이 한쪽으로 빠지는 느낌만 준다 */
.hi__img { -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 52%, rgba(0, 0, 0, .78) 72%, rgba(0, 0, 0, .42) 100%); mask-image: linear-gradient(135deg, #000 0%, #000 52%, rgba(0, 0, 0, .78) 72%, rgba(0, 0, 0, .42) 100%); }

/* 27차 : 히어로 아이콘 뒤 보조 요소(.hi__bp) — 유리 원판 · 눈금 · 궤도 · 빛점 · 기호 선
   아이콘보다 조금 크게 가운데 두고(원판 지름 ≈ 아이콘 폭), 기호 선은 원판 밖 왼쪽 위로만 드러난다. .hart 의 screen 합성으로 밝은 선 · 면만 남는다. */
.hi__bp { position: absolute; left: -14%; top: -12%; width: 128%; height: 128%; overflow: visible; pointer-events: none; }
.hi__bp .bp-grid circle { fill: #fff; stroke: none; opacity: .16; }
.hi__bp .bp-ticks line { stroke: #fff; stroke-width: 1.3; opacity: .38; }
.hi__bp .bp-orbit { stroke: #fff; stroke-width: 1; opacity: .24; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hi__bp .bp-sat { transform-box: view-box; transform-origin: 200px 200px; animation: bpOrbit 40s linear infinite; }
.hi__bp .bp-sat__glow { fill: #FF3B52; opacity: .4; stroke: none; }
.hi__bp .bp-sat__dot { fill: #FF8593; stroke: none; }
.hi__bp .bp-glyph { stroke: #fff; stroke-width: 1.4; opacity: .38; transform-box: view-box; transform-origin: 200px 200px; transform: translate(-40px, -34px) scale(1.42); }
.hi__bp .bp-glyph .bp-acc { stroke: #FF5A6E; opacity: .9; }
.hi__bp .bp-glyph path, .hi__bp .bp-glyph circle { stroke-dasharray: 900; stroke-dashoffset: 0; }
.hi__bp .bp-disc { transform-box: view-box; transform-origin: 200px 200px; }
@keyframes bpOrbit { to { transform: rotate(360deg); } }
html.js .hart.is-ready .hi__bp .bp-disc { opacity: 0; transform: scale(.9); }
html.js .hart.is-in .hi__bp .bp-disc { opacity: 1; transform: none; transition: opacity .9s var(--ease) .15s, transform 1.2s cubic-bezier(.2, .8, .2, 1) .15s; }
html.js .hart.is-ready .hi__bp .bp-orbit { stroke-dashoffset: 1; }
html.js .hart.is-in .hi__bp .bp-orbit { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.65, 0, .35, 1) .3s; }
html.js .hart.is-ready .hi__bp .bp-glyph path, html.js .hart.is-ready .hi__bp .bp-glyph circle { stroke-dashoffset: 900; }
html.js .hart.is-in .hi__bp .bp-glyph path, html.js .hart.is-in .hi__bp .bp-glyph circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.65, 0, .35, 1) .6s; }
html.js .hart.is-ready .hi__bp .bp-ticks, html.js .hart.is-ready .hi__bp .bp-sat, html.js .hart.is-ready .hi__bp .bp-grid { opacity: 0; }
html.js .hart.is-in .hi__bp .bp-ticks, html.js .hart.is-in .hi__bp .bp-sat, html.js .hart.is-in .hi__bp .bp-grid { opacity: 1; transition: opacity .8s var(--ease) 1s; }
@media (prefers-reduced-motion: reduce) { .hi__bp * { animation: none !important; transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   26차 (2026-09-14) : 입시연구소 — 리포트 목록 카드(.rc) + 리포트 페이지(.rp-*) · genreport.py
   목록 : 대학 색 표지(엠블럼 · 대학명 · 분류) + 게시월 · 읽는 시간 · 제목 · 원문 질문. 거르기 : 대학별 / 대학군 / 제도 · 수능.
   리포트 : 대학 색 표지(큰 엠블럼 워터마크) → 왼쪽 차례(데스크톱 고정) + 오른쪽 본문(최대 760px).
            본문 = 핵심 수치 칸 · 도입 문단 · 번호 섹션 · 비교 표 · ①②③ 변수 카드 · 목록 · 분석 노트 · 출처 · 이전/다음.
   ══════════════════════════════════════════════════════════════════════════ */
/* 목록 카드 */
.rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, calc(var(--u) * 1.6), 24px); }
.rc[hidden] { display: none; }
.rc__a { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 20px 40px -34px rgba(60, 20, 20, .45); transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
@media (hover: hover) { .rc__a:hover { translate: 0 -5px; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .1), 0 34px 60px -38px rgba(60, 20, 20, .55); } .rc__a:hover .rc__embs { transform: scale(1.06) rotate(-3deg); } .rc__a:hover .rc__go i { transform: translateX(4px); } }
.rc__cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--uc) 70%, #fff) 0%, var(--uc) 55%, color-mix(in srgb, var(--uc) 70%, #000) 100%); color: #fff; }
.rc__cover::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px); pointer-events: none; }
.rc__embs { position: absolute; right: -6%; top: 50%; translate: 0 -50%; display: flex; gap: 6%; width: 58%; height: 86%; align-items: center; justify-content: flex-end; opacity: .9; transition: transform .6s var(--ease); }
.rc__embs .rc__emb { width: auto; max-width: 100%; height: 100%; object-fit: contain; opacity: .22; }
.rc__embs--1 .rc__emb { height: 118%; }
.rc__embs--3, .rc__embs--4 { right: 6%; width: 70%; height: 38%; gap: 8%; }
.rc__embs--3 .rc__emb, .rc__embs--4 .rc__emb { opacity: .5; }
.rc__word { position: absolute; right: 4%; bottom: -8%; font-size: var(--fs-6xl); font-weight: 900; letter-spacing: -.012em; line-height: 1; color: rgba(255, 255, 255, .1); white-space: nowrap; }
.rc__kind { position: absolute; left: 20px; top: 18px; padding: .3em .75em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: var(--fs-2xs); font-weight: 700; }
.rc__name { position: absolute; left: 20px; bottom: 16px; font-size: clamp(26px, calc(var(--u) * 2.4), 38px); font-weight: 900; letter-spacing: -.008em; line-height: 1.05; }
.rc__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.rc__meta { display: flex; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rc__meta span::before { content: "·"; margin-right: 10px; }
.rc__t { margin-top: 8px; font-size: clamp(16.5px, calc(var(--u) * 1.2), 19px); font-weight: 800; letter-spacing: -.004em; line-height: 1.4; color: var(--ink); word-break: keep-all; }
.rc__hook { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-3); word-break: keep-all; }
.rc__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--uc); }
.rc__go i { width: 16px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease); }
.rc__go i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; }
html.js .rc-grid.is-ready .rc { opacity: 0; translate: 0 18px; }
html.js .rc-grid.is-in .rc { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease), translate .8s var(--ease); transition-delay: calc(min(var(--k), 8) * 55ms); }
html.js .rc-grid.is-swap .rc:not([hidden]) { animation: pcIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--k), 8) * 45ms); }

/* 리포트 표지 */
.rp-hero { position: relative; overflow: hidden; min-height: min(78svh, 680px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--head-off, 110px) + 24px); padding-bottom: clamp(36px, calc(var(--u) * 4), 72px); background: radial-gradient(80% 90% at 90% 10%, color-mix(in srgb, var(--uc) 80%, #fff 8%) 0%, var(--uc) 45%, color-mix(in srgb, var(--uc) 55%, #000) 100%) !important; }
.rp-hero::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 18px); }
.rp-hero__art { position: absolute; right: -4%; top: 50%; translate: 0 -46%; display: flex; gap: 4vw; align-items: center; height: 88%; pointer-events: none; }
.rp-hero__emb { height: 100%; width: auto; opacity: .12; }
.rp-hero__art:has(.rp-hero__emb + .rp-hero__emb) { height: 40%; right: 4%; }
.rp-hero__art:has(.rp-hero__emb + .rp-hero__emb) .rp-hero__emb { opacity: .13; }
.rp-var .rp-list li { box-shadow: none; background: #F8F4F3; }
.rp-hero__word { font-size: clamp(120px, 18vw, 300px); font-weight: 900; letter-spacing: -.016em; color: rgba(255, 255, 255, .08); white-space: nowrap; }
.rp-hero .crumb { position: absolute; top: calc(var(--head-off, 110px) + 12px); }
.rp-hero__body { position: relative; max-width: 900px; }
.rp-hero__kind { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .75); }
.rp-hero__kind span { padding: .3em .8em; border-radius: var(--r-pill); background: #fff; color: var(--uc); }
.rp-hero__h { margin-top: 16px; font-size: clamp(34px, calc(var(--u) * 4.6), 76px); font-weight: 900; letter-spacing: -.008em; line-height: 1.1; color: #fff; word-break: keep-all; }
.rp-hero__hook { margin-top: 14px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.006em; color: rgba(255, 255, 255, .82); word-break: keep-all; }
.rp-hero__meta { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: clamp(22px, calc(var(--u) * 2.6), 40px) 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); }
.rp-hero__meta dt { font-size: var(--fs-2xs); font-weight: 700; color: rgba(255, 255, 255, .55); }
.rp-hero__meta dd { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: #fff; }
.rp-hero__meta a { display: inline-flex; gap: 6px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.rp-hero__meta a i { font-style: normal; }

/* 본문 */
.rp-body { background: #FBF7F6 !important; }
.rp-grid { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: center; gap: clamp(28px, calc(var(--u) * 5), 90px); }
.rp-toc { position: sticky; top: calc(var(--head-off, 110px) + 24px); align-self: start; }
.rp-toc__h { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; color: var(--ink-3); }
.rp-toc ol { display: grid; gap: 2px; margin-top: 12px; border-left: 2px solid rgba(23, 21, 26, .08); counter-reset: toc; }
.rp-toc li { counter-increment: toc; }
.rp-toc a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink-3); transition: color .2s var(--ease), border-color .2s var(--ease); word-break: keep-all; }
.rp-toc a::before { content: counter(toc, decimal-leading-zero) "  "; font-size: 11.5px; font-weight: 800; color: rgba(23, 21, 26, .3); }
.rp-toc a:hover, .rp-toc a.is-on { color: var(--ink); border-left-color: var(--uc); }
.rp-toc a.is-on::before { color: var(--uc); }
.rp-article { min-width: 0; font-size: 16.5px; line-height: 1.85; color: var(--ink-2); word-break: keep-all; }
.rp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 36px; }
.rp-figs li { display: grid; gap: 4px; padding: 18px 18px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06); border-top: 3px solid var(--uc); }
.rp-figs b { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.008em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; word-break: keep-all; }
.rp-figs span { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
.rp-lead { margin-bottom: 18px; font-size: clamp(18.5px, calc(var(--u) * 1.45), 22px); font-weight: 600; line-height: 1.7; letter-spacing: -.006em; color: var(--ink); }
.rp-lead:first-of-type { padding-left: 18px; border-left: 3px solid var(--uc); }
.rp-sec { margin-top: clamp(44px, calc(var(--u) * 5), 72px); scroll-margin-top: calc(var(--head-off, 110px) + 24px); }
.rp-sec__h { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid rgba(23, 21, 26, .1); font-size: clamp(22px, calc(var(--u) * 1.9), 30px); font-weight: 900; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.rp-sec__n { flex: none; font-size: .62em; font-weight: 800; letter-spacing: 0; color: var(--uc); font-variant-numeric: tabular-nums; }
.rp-p { margin-top: 12px; }
.rp-p strong, .rp-var__p strong, .rp-list strong, .rp-lead strong, .rp-note strong { font-weight: 800; color: var(--ink); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--uc) 16%, transparent) 62%); }
.rp-key { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06); font-weight: 700; color: var(--ink); }
.rp-key strong { background: none; }
.rp-table { margin-top: 18px; overflow-x: auto; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08); }
.rp-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
.rp-table thead th { padding: 12px 16px; background: var(--uc); font-size: 13px; font-weight: 800; color: #fff; text-align: left; white-space: nowrap; }
.rp-table tbody th { padding: 14px 16px; width: 1%; min-width: 110px; font-weight: 800; color: var(--ink); text-align: left; vertical-align: top; background: #FBF8F7; word-break: keep-all; }
.rp-table td { padding: 14px 16px; vertical-align: top; color: var(--ink-2); word-break: keep-all; }
.rp-table tbody tr + tr > * { border-top: 1px solid rgba(23, 21, 26, .07); }
.rp-table td strong { font-weight: 800; color: var(--ink); background: none; }
.rp-vars { display: grid; gap: 12px; margin-top: 16px; }
.rp-var { position: relative; padding: 22px 24px 20px 70px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06), 0 16px 34px -30px rgba(60, 20, 20, .4); }
.rp-var__n { position: absolute; left: 22px; top: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--uc); font-size: 16px; font-weight: 800; color: #fff; }
.rp-var__h { font-size: 18px; font-weight: 800; letter-spacing: -.004em; line-height: 1.45; color: var(--ink); }
.rp-var__p { margin-top: 8px; font-size: 15.5px; line-height: 1.8; }
.rp-list { display: grid; gap: 10px; margin-top: 16px; }
.rp-list li { position: relative; padding: 14px 16px 14px 44px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06); font-size: 15.5px; line-height: 1.75; }
.rp-list li::before { content: ""; position: absolute; left: 16px; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--uc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.rp-list__k { display: block; font-weight: 800; color: var(--ink); }
.rp-note { margin-top: 16px; padding: 16px 20px; border-radius: 14px; background: color-mix(in srgb, var(--uc) 7%, #fff); box-shadow: inset 3px 0 0 var(--uc); }
.rp-note--warn { background: #FFF6E6; box-shadow: inset 3px 0 0 #E39A12; }
.rp-note__k { font-size: 12.5px; font-weight: 800; color: var(--uc); }
.rp-note--warn .rp-note__k { color: #B26A00; }
.rp-note p { margin-top: 4px; font-size: 15px; line-height: 1.75; color: var(--ink); }
.rp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 56px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07); }
.rp-foot__src { flex: 1 1 320px; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }
.rp-foot__orig { display: inline-flex; gap: 6px; min-height: 40px; align-items: center; padding: 0 16px; border-radius: var(--r-pill); background: var(--ink); font-size: 13.5px; font-weight: 700; color: #fff; }
.rp-foot__orig i { font-style: normal; }
.rp-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.rp-pn__a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07); transition: box-shadow .25s var(--ease); }
.rp-pn__a--next { text-align: right; grid-column: 2; }
.rp-pn__a span { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); }
.rp-pn__a b { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; word-break: keep-all; }
.rp-pn__a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (max-width: 1023px) {
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-toc { display: none; }
}
@media (max-width: 639px) {
  .rc-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-article { font-size: var(--fs-md); }
  .rp-var { padding: 18px 18px 16px 60px; }
  .rp-var__n { left: 16px; }
  .rp-table table { font-size: var(--fs-sm); }
  .rp-pn { grid-template-columns: minmax(0, 1fr); }
  .rp-pn__a--next { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .rc, .rc__a, .rc__embs { transition: none !important; animation: none !important; } }

/* 약도 보강(2026-09-14) : 방위 · 지도 크게 보기(오른쪽 위) · 카카오맵 길찾기 줄 */
.c2-north circle { fill: #fff; stroke: rgba(23, 21, 26, .12); }
.c2-north path { fill: var(--red); }
.c2-north text { font-size: 11px; font-weight: 800; fill: #8A8189; }
html.js .cmap2.is-ready .c2-north { opacity: 0; }
html.js .cmap2.is-in .c2-north { opacity: 1; transition: opacity .6s var(--ease) 1.5s; }
.cmap2__open { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); box-shadow: 0 8px 20px -12px rgba(60, 20, 20, .4), inset 0 0 0 1px rgba(23, 21, 26, .08); font-size: 13px; font-weight: 700; color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease); }
.cmap2__open i { font-style: normal; }
.cmap2__open:hover { background: var(--ink); color: #fff; }
.cmap2__info .cmap__route { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 8px; border-radius: var(--r-pill); background: #FEE500; font-size: 14px; font-weight: 800; color: #191919; transition: filter .2s var(--ease); }
.cmap2__info .cmap__route i { font-style: normal; }
.cmap2__info .cmap__route:hover { filter: brightness(.95); }
@media (max-width: 599px) { .cmap2__note { display: none; } }

/* 아이콘 층도 screen 으로 합성 : 검은 바탕 네모가 뒤의 원판 · 기호 선을 가리지 않게 */
.hi__float { mix-blend-mode: screen; }
/* 원판 밖으로 조각나 보이던 기호 선은 뺀다(원판 · 눈금 · 궤도만 남김) */
.hi__bp .bp-glyph { display: none; }

/* 2026-09-16 모션 덜어내기 : 계속 반복되던 장식 움직임을 멈춘다(아이콘 위아래 떠 있기 · 지도 위치 표시는 유지) */
.hi__bp .bp-sat { animation: none; }
.hi__glow { animation: none; opacity: 1; }
.hqbar__tag::before { animation: none; }

/* ── 고입 최종 상담 리포트 : 고교 유형 비교 면 (2026-09-16 프로그램 개편)
   기준 네 줄 × 학교 유형 세 칸, 점 세 개로 학생에게 맞는 정도. 맨 아래 추천 · 대안. 화면에 들어오면 줄마다 점이 차례로 찬다(한 번) */
.hr { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(22px, calc(var(--u) * 4.4), 80px); align-items: center; }
@media (max-width: 1023px) { .hr { grid-template-columns: minmax(0, 1fr); } }
.hr__paper {
  position: relative; padding: clamp(26px, calc(var(--u) * 3), 52px);
  background: #FFFDFC; color: var(--ink); border-radius: 6px var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow: 0 1px 2px rgba(60, 20, 20, .06), 0 30px 50px -30px rgba(80, 30, 30, .35);
}
.hr__paper::after { content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: linear-gradient(225deg, var(--stage, #17161A) 50%, #EADBD6 50%); border-radius: 0 0 0 6px; }
.hr__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 0 28px 14px 0; margin-bottom: 8px; border-bottom: 1px dashed rgba(23, 21, 26, .2); }
.hr__doc { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.hr__who { font-size: var(--fs-xs); font-weight: 700; color: var(--red); }
.hr__table { display: grid; }
.hr__tr { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .62fr)); align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(23, 21, 26, .08); }
.hr__tr--h { padding: 10px 0 8px; border-bottom-color: rgba(23, 21, 26, .16); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.hr__th { justify-self: center; padding: .28em .7em; border-radius: var(--r-pill); background: #F3ECE9; color: var(--ink-2); }
.hr__th--auto { background: var(--ink); color: #fff; }
.hr__k { display: grid; gap: 3px; font-size: var(--fs-sm); font-weight: 800; color: var(--ink); line-height: 1.35; }
.hr__k small { font-size: var(--fs-2xs); font-weight: 500; color: var(--ink-3); line-height: 1.45; }
.hr__dots { justify-self: center; display: flex; gap: 5px; }
.hr__dots i { width: 11px; height: 11px; border-radius: 50%; background: #EDE3E0; transition: background .45s var(--ease), transform .45s var(--ease); }
.hr__dots i.on { background: var(--red); }
.hr__tr .hr__dots:nth-child(3) i.on { background: var(--ink); }
.hr__rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #FDF1F0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.55; word-break: keep-all; }
.hr__rec b { padding: .2em .6em; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: var(--fs-2xs); }
.hr__alt { flex-basis: 100%; font-weight: 500; color: var(--ink-3); }
html.js .hr.is-ready .hr__dots i.on { background: #EDE3E0; transform: scale(.6); }
html.js .hr.is-in .hr__dots i.on { background: var(--red); transform: none; transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
html.js .hr.is-in .hr__tr .hr__dots:nth-child(3) i.on { background: var(--ink); }
.hr__tr { --i: 0; }
@media (max-width: 599px) {
  .hr__tr { grid-template-columns: minmax(0, 1fr) repeat(3, 46px); gap: 6px; }
  .hr__dots { gap: 3px; }
  .hr__dots i { width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) { .hr__dots i { transition: none; } }
.hr__th { white-space: nowrap; }
.hr__k, .hr__k small { word-break: keep-all; }
@media (max-width: 599px) {
  .hr__paper { padding: 22px 16px; }
  .hr__tr { grid-template-columns: minmax(0, 1fr) repeat(3, 52px); gap: 4px; }
  .hr__th { padding: .24em .45em; font-size: 11.5px; font-size: max(12px, .9em); }
}

/* ── 학원소개 03 ENSM : 한 판 네 칸 (2026-09-16 2차)
   떠 있는 카드 네 장이 흔한 카드 묶음처럼 보여, 한 장의 판을 가는 선으로 네 칸 나눈다.
   칸 머리 큰 글자 E · N · S · M 이 같은 기준선에 서서 가로로 이어 읽힌다. 제목 · 설명 · 방식 줄은 subgrid 로 칸끼리 높이를 맞춘다.
   데스크톱 4칸 · 태블릿 2×2 · 폰 1칸(글자는 제목 왼쪽). 호버 효과 없음. */
.ensm {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto);
  margin-top: clamp(28px, calc(var(--u) * 3.6), 56px);
  border-radius: clamp(20px, calc(var(--u) * 2), 30px); background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08), 0 30px 60px -44px rgba(80, 30, 30, .35);
}
.ensm__card {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; min-width: 0;
  padding: clamp(24px, calc(var(--u) * 2.6), 42px) clamp(20px, calc(var(--u) * 2.2), 36px) clamp(24px, calc(var(--u) * 2.4), 38px);
}
.ensm__card + .ensm__card { box-shadow: inset 1px 0 0 rgba(23, 21, 26, .08); }
.ensm__top { display: flex; flex-direction: column; gap: 12px; padding-bottom: clamp(16px, calc(var(--u) * 1.6), 24px); margin-bottom: clamp(18px, calc(var(--u) * 2), 30px); border-bottom: 1.5px solid var(--ink); }
.ensm__l { font-size: clamp(64px, calc(var(--u) * 8.2), 150px); font-weight: 900; line-height: .78; color: var(--red); letter-spacing: -.01em; }
.ensm__en { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.ensm__t { font-size: var(--fs-xl); font-weight: 800; line-height: 1.32; color: var(--ink); word-break: keep-all; }
.ensm__d { margin-top: 10px; font-size: var(--fs-md); line-height: 1.7; color: var(--ink-2); word-break: keep-all; text-wrap: pretty; }
.ensm__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; align-self: start; margin: clamp(18px, calc(var(--u) * 2), 28px) 0 0; padding-top: 14px; border-top: 1px solid rgba(23, 21, 26, .1); }
.ensm__meta dt { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.ensm__meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ensm__meta dd span { position: relative; padding-left: 11px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }
.ensm__meta dd span::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
@media (max-width: 1199px) {
  .ensm { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); }
  .ensm__card + .ensm__card { box-shadow: none; }
  .ensm__card:nth-child(even) { box-shadow: inset 1px 0 0 rgba(23, 21, 26, .08); }
  .ensm__card:nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(23, 21, 26, .08); }
  .ensm__card:nth-child(4) { box-shadow: inset 1px 1px 0 rgba(23, 21, 26, .08); }
}
@media (max-width: 599px) {
  .ensm { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ensm__card { display: flex; flex-direction: column; grid-row: auto; }
  .ensm__card:nth-child(n) { box-shadow: none; }
  .ensm__card + .ensm__card { box-shadow: inset 0 1px 0 rgba(23, 21, 26, .08); }
  .ensm__top { flex-direction: row; align-items: flex-end; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
  .ensm__l { font-size: 64px; }
  .ensm__en { padding-bottom: 4px; }
  .ensm__meta { align-self: stretch; }
}

/* 학원소개 약도 등장 간소화 (2026-09-16) : 선 그리기 · 이름 · 핀 낙하 · 정보 카드 올라오기가 2.5초에 걸쳐 차례로 나와 산만했다.
   약도 판 전체가 한 번 옅게 나타나고, 핀만 조금 뒤 나타난다. 포인터를 따라 약도가 움직이던 효과도 없앴다(program.js). */
html.js .cmap2.is-ready .c2-r, html.js .cmap2.is-ready .c2-hw, html.js .cmap2.is-ready .c2-l2 { stroke-dashoffset: 0; transition: none; }
html.js .cmap2.is-ready .c2-green, html.js .cmap2.is-ready .c2-water, html.js .cmap2.is-ready .c2-names, html.js .cmap2.is-ready .c2-lm,
html.js .cmap2.is-ready .c2-st, html.js .cmap2.is-ready .c2-north, html.js .cmap2.is-ready .c2-pin__tag { opacity: 1; transition: none; }
html.js .cmap2.is-ready .c2-pin__m { translate: 0 0; transition: none; }
html.js .cmap2.is-ready .cmap2__info { opacity: 1; translate: 0 0; transition: none; }
.cmap2__svg { transform: none; transition: none; }
html.js .cmap2.is-ready .cmap2__map { opacity: 0; }
html.js .cmap2.is-in .cmap2__map { opacity: 1; transition: opacity .8s var(--ease); }
html.js .cmap2.is-ready .c2-pin__m, html.js .cmap2.is-ready .c2-pin { opacity: 0; }
html.js .cmap2.is-in .c2-pin__m, html.js .cmap2.is-in .c2-pin { opacity: 1; transition: opacity .5s var(--ease) .45s; }
.c2-pin__ring { animation: none; transform: scale(1.2); }  /* 계속 번지던 파동도 멈춘 원으로 */

/* ==========================================================================
   합격 실적 개편 (2026-09-16 2차)
   - 합격 현황 : 왼쪽에 올해 숫자 한 장(.stats__lead), 오른쪽에 연도별 쌓은 막대(.chart).
     2026-10-15 1안 확정 : 이 판이 표지라 먹색에서도 같은 무게로 보이게 색만 갈아 끼운다.
   - 수강 후기(.nrv__deck) : 후기 여러 건을 옆으로 넘긴다(common.js DP.stepper)
   - 합격 사례 끝 상담 유도(.rcta)
   ========================================================================== */
.stats {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.55fr);
  gap: clamp(14px, calc(var(--u) * 1.6), 26px);
  margin-top: clamp(28px, calc(var(--u) * 3.2), 52px);
}
.stats__lead, .chart {
  margin: 0; padding: clamp(22px, calc(var(--u) * 2.6), 38px) clamp(20px, calc(var(--u) * 2.4), 34px);
  border-radius: var(--r-lg); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 22px 46px -38px rgba(60, 20, 20, .45);
}
.stats__lead { display: flex; flex-direction: column; }
.stats__k { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.stats__v {
  display: flex; align-items: baseline; gap: .12em; margin-top: 2px;
  font-size: clamp(54px, calc(var(--u) * 6.4), 104px); font-weight: 900; line-height: .95;
  letter-spacing: -.02em; color: var(--red); font-variant-numeric: tabular-nums;
}
.stats__v i { font-style: normal; font-size: .26em; font-weight: 800; color: var(--ink-2); letter-spacing: 0; }

/* 올해 합격자를 고입 · 대입으로 가른 띠 */
.stats__split { display: grid; gap: 10px; margin-top: clamp(18px, calc(var(--u) * 2), 30px); }
.stats__s { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
.stats__s > span { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); }
.stats__s > b { font-size: var(--fs-md); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats__s > i { grid-column: 1 / -1; height: 8px; margin-top: 6px; border-radius: 999px; background: rgba(23, 21, 26, .08); }
.stats__s > i::before {
  content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit;
  background: rgba(23, 21, 26, .3); transform-origin: 0 50%; transition: scale 1s cubic-bezier(.2, .8, .2, 1) .1s;
}
.stats__s--univ > i::before { background: var(--red); }
html.js .stats:not(.is-in) .stats__s > i::before { scale: 0 1; }

.stats__more { margin: auto 0 0; padding-top: clamp(18px, calc(var(--u) * 2), 28px); }
.stats__more > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(23, 21, 26, .09); }
.stats__more dt { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); }
.stats__more dd { margin: 0; font-size: var(--fs-lg); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 연도별 (2026-09-17 다시 그림)
   예전에는 기둥 높이를 칸 높이의 %로 잡았는데, 같은 칸 안에 합계 글자 · 연도 글자가 함께 들어 있어
   실제 수치와 기둥 높이가 비례하지 않았다. 이제 눈금(0 · 50 · 100 · 150)을 두고
   기둥 높이 = 합계 ÷ 150, 두 조각 높이 = 각 인원 ÷ 합계 로 계산한다(모두 CSS calc, 숫자는 HTML 한 곳).
   등장 : 기둥이 바닥에서 위로 드러나고(clip-path), 드러난 뒤에 숫자가 뜬다. 모양이 찌그러지지 않는다. */
.chart { display: flex; flex-direction: column; }
.chart__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.chart__cap b { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.chart__leg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); }
.chart__dot { width: 10px; height: 10px; border-radius: 3px; }
.chart__dot--high { background: rgba(23, 21, 26, .26); }
.chart__dot--univ { background: var(--red); margin-left: 10px; }

.chart__plot {
  --ph: clamp(200px, 30vh, 290px); --ax: 34px;
  position: relative; height: var(--ph);
  margin: clamp(34px, calc(var(--u) * 3.4), 50px) 0 38px;
}
.chart__axis { position: absolute; inset: 0; }
.chart__axis span {
  position: absolute; left: 0; right: 0; bottom: calc(var(--v) / var(--max) * 100%);
  display: flex; align-items: center; gap: 8px; height: 0;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.chart__axis span::after { content: ""; flex: 1; border-top: 1px dashed rgba(23, 21, 26, .12); }
.chart__axis span:first-child::after { border-top: 1px solid rgba(23, 21, 26, .28); }
.chart__cols {
  position: absolute; top: 0; bottom: 0; left: var(--ax); right: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, calc(var(--u) * 1), 18px);
}
.chart__col { position: relative; }
.chart__bar {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: min(62%, 76px); height: calc(var(--t) / var(--max) * 100%);
}
.chart__fill {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 10px 10px 2px 2px; overflow: hidden;
  clip-path: inset(0 0 0 0 round 10px 10px 2px 2px);
}
.chart__seg { display: grid; place-items: center; min-height: 0; flex: 0 0 calc(var(--v) / var(--t) * 100%); }
.chart__seg + .chart__seg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.chart__seg b { font-size: 12.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.chart__seg--high { background: rgba(23, 21, 26, .26); }
.chart__seg--high b { color: rgba(23, 21, 26, .8); }
.chart__seg--univ { background: var(--red); }
.chart__tot {
  position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: 7px;
  white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.chart__tot b { font-size: 16px; font-weight: 900; color: var(--ink); }
.chart__tot i { font-style: normal; margin-left: 1px; }
.chart__y {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px;
  text-align: center; white-space: nowrap;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.chart__col--now .chart__tot b { color: var(--red); font-size: 19px; }
.chart__col--now .chart__y { color: var(--ink); font-weight: 800; }
.chart__col--now .chart__seg--high { background: rgba(23, 21, 26, .4); }
.chart__col--now .chart__seg--high b { color: #fff; }
.chart__note { margin-top: clamp(4px, calc(var(--u) * .6), 10px); font-size: var(--fs-2xs); color: var(--ink-3); }

/* 등장 */
html.js .chart:not(.is-in) .chart__fill { clip-path: inset(100% 0 0 0 round 10px 10px 2px 2px); }
html.js .chart .chart__fill { transition: clip-path 1.05s cubic-bezier(.22, 1, .36, 1) calc(.15s + var(--k) * 110ms); }
html.js .chart:not(.is-in) .chart__tot, html.js .chart:not(.is-in) .chart__seg b { opacity: 0; translate: -50% 8px; }
html.js .chart:not(.is-in) .chart__seg b { translate: 0 6px; }
html.js .chart .chart__tot { transition: opacity .45s var(--ease) calc(.75s + var(--k) * 110ms), translate .55s cubic-bezier(.22, 1, .36, 1) calc(.75s + var(--k) * 110ms); }
html.js .chart .chart__seg b { transition: opacity .4s var(--ease) calc(.85s + var(--k) * 110ms), translate .5s cubic-bezier(.22, 1, .36, 1) calc(.85s + var(--k) * 110ms); }
@media (prefers-reduced-motion: reduce) {
  html.js .chart .chart__fill { clip-path: none; transition: none; }
  html.js .chart .chart__tot, html.js .chart .chart__seg b { opacity: 1; transition: none; }
  html.js .chart .chart__tot { translate: -50% 0; }
  html.js .chart .chart__seg b { translate: none; }
}

@media (max-width: 1023px) { .stats { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .stats__v { font-size: clamp(48px, 15vw, 64px); }
  .chart__plot { --ax: 28px; --ph: 210px; }
  .chart__cols { gap: 6px; }
  .chart__bar { width: 78%; }
  .chart__seg b { font-size: 11px; }
  .chart__tot { font-size: 11px; }
  .chart__tot b { font-size: 13px; }
  .chart__col--now .chart__tot b { font-size: 15px; }
  .chart__y { font-size: 11px; }
}

/* 1안 : 합격 현황이 표지가 된다(먹색)
   강조색은 분홍(--red-on-noir)이 아니라 메인 레드. 면(막대 · 띠 · 점)은 --red 그대로,
   먹색 위 글자는 같은 레드 계열에서 한 단계 밝은 --red-hi 로 읽힘을 확보한다. */
.stats-sec.rs-hero { color: var(--on-noir); }
.stats-sec.rs-hero .sec-p { color: var(--on-noir-2); }
.stats-sec.rs-hero .sec-h em { color: var(--red-hi); }
.stats-sec.rs-hero .stats__lead, .stats-sec.rs-hero .chart { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.stats-sec.rs-hero .stats__k, .stats-sec.rs-hero .stats__s > span, .stats-sec.rs-hero .stats__more dt,
.stats-sec.rs-hero .chart__leg, .stats-sec.rs-hero .chart__y, .stats-sec.rs-hero .chart__tot, .stats-sec.rs-hero .chart__note,
.stats-sec.rs-hero .chart__axis span { color: var(--on-noir-2); }
.stats-sec.rs-hero .stats__v { color: var(--red-hi); }
.stats-sec.rs-hero .stats__v i, .stats-sec.rs-hero .stats__s b span, .stats-sec.rs-hero .stats__more dd,
.stats-sec.rs-hero .chart__cap b, .stats-sec.rs-hero .chart__tot b, .stats-sec.rs-hero .chart__col--now .chart__y { color: #fff; }
.stats-sec.rs-hero .stats__s--univ b span, .stats-sec.rs-hero .chart__col--now .chart__tot b { color: var(--red-hi); }
.stats-sec.rs-hero .stats__s b i, .stats-sec.rs-hero .stats__more dd i { color: var(--on-noir-2); }
.stats-sec.rs-hero .stats__s > i { background: rgba(255, 255, 255, .12); }
.stats-sec.rs-hero .stats__s > i::before, .stats-sec.rs-hero .chart__dot--high, .stats-sec.rs-hero .chart__seg--high { background: rgba(255, 255, 255, .28); }
.stats-sec.rs-hero .chart__col--now .chart__seg--high { background: rgba(255, 255, 255, .42); }
.stats-sec.rs-hero .chart__seg--high b { color: #fff; }
.stats-sec.rs-hero .stats__s--univ > i::before, .stats-sec.rs-hero .chart__dot--univ, .stats-sec.rs-hero .chart__seg--univ { background: var(--red); }
.stats-sec.rs-hero .chart__seg + .chart__seg { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35); }
.stats-sec.rs-hero .stats__more > div { border-top-color: rgba(255, 255, 255, .14); }
.stats-sec.rs-hero .chart__axis span::after { border-top-color: rgba(255, 255, 255, .12); }
.stats-sec.rs-hero .chart__axis span:first-child::after { border-top-color: rgba(255, 255, 255, .34); }

/* 숫자를 강조하고 단위(명 · 개교)는 작게 */
.stats__s > b { font-weight: 600; }
.stats__s > b span { font-size: 1.5em; font-weight: 900; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats__s > b i { font-style: normal; margin-left: 2px; font-size: .88em; font-weight: 600; color: var(--ink-3); }
.stats__s--univ > b span { color: var(--red); }
.stats__more dd span { font-weight: 900; }
.stats__more dd i { font-style: normal; margin-left: 2px; font-size: .72em; font-weight: 600; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  html.js .stats .stats__s > i::before { scale: none; transition: none; }
}

/* 수강 후기 : 한 번에 한 건씩, 좌우로 넘긴다 */
.nrv__deck { min-width: 0; }
.nrv__view { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nrv__view::-webkit-scrollbar { display: none; }
.nrv__list { display: flex; gap: 14px; }
.nrv__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.nrv__item .nrv__card { height: 100%; }
.nrv__head > .stp { margin-top: clamp(18px, calc(var(--u) * 2), 30px); }

/* 합격 사례 끝 : 상담 유도 */
.rcta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, calc(var(--u) * 2.4), 44px);
  margin-top: clamp(36px, calc(var(--u) * 4.4), 76px); padding: clamp(26px, calc(var(--u) * 3.2), 52px) clamp(24px, calc(var(--u) * 3), 56px);
  border-radius: var(--r-xl); background: #17161A; color: var(--on-noir);
}
.rcta__h { font-size: clamp(22px, calc(var(--u) * 2.4), 40px); font-weight: 900; letter-spacing: -.004em; line-height: 1.24; color: #fff; word-break: keep-all; }
.rcta__p { margin-top: 10px; font-size: var(--fs-md); line-height: 1.7; color: var(--on-noir-2); word-break: keep-all; }
.rcta__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 899px) { .rcta { grid-template-columns: minmax(0, 1fr); } .rcta__cta .btn { flex: 1 1 auto; justify-content: center; } }

/* 후기 원문만 있는 카드(요약 대기) */
.pc--brief .pc__facts { margin-top: auto; }

/* 고입 리포트(2026-09-16) : 원문이 아직 없는 제목 카드. 링크가 아니라 판이므로 뜨지도 눌리지도 않는다 */
.rc--soon .rc__a { cursor: default; }
@media (min-width: 600px) { .rc--soon .rc__cover { aspect-ratio: 16 / 7; } }
.rc--soon .rc__name { font-size: clamp(22px, calc(var(--u) * 2), 32px); }
.rc__soon {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px;
  font-size: 13px; font-weight: 700; color: var(--ink-3);
}
.rc__soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--uc); opacity: .55; }
.rc--soon .rc__t { margin-top: 0; }
.rc-note { margin-top: clamp(16px, calc(var(--u) * 1.8), 26px); font-size: var(--fs-2xs); color: var(--ink-3); word-break: keep-all; }

/* 고입 리포트 표지 : 오른쪽이 비어 허전해 갈래 아이콘을 넣는다(대입 리포트의 대학 엠블럼 자리) */
.rc--soon .rc__embs { right: 5%; width: auto; height: 62%; opacity: 1; }
.rc--soon .rc__emb { width: auto; height: 100%; opacity: .26; }
@media (hover: hover) { .rc--soon .rc__a:hover .rc__embs { transform: none; } }
@media (max-width: 599px) { .rc--soon .rc__embs { right: 6%; height: 46%; } }

/* 리포트 소개 위 여백이 넓어 보여 한 단계 줄인다 */
.rc-sec[data-chapter] { padding-top: max(clamp(48px, calc(var(--u) * 5), 92px), calc(var(--head-off) + 4px)); }
.rc-sec .ps__head { margin-bottom: clamp(26px, calc(var(--u) * 2.9), 48px); }


/* ==========================================================================
   입시연구소 표지 그림 (2026-09-16 · 4차) — 3D 아이콘 한 장
   앞선 세 안(원판 · 궤도 / 문서 + 꺾은선 / 아이소메트릭 막대)은 상세 페이지와 계열이 겹치거나
   납작해 보였다. 상세 페이지와 같은 만듦새(간유리 + 붉은 유광, 검은 바탕)로 맞추되
   물건만 바꾼다 : 막대그래프를 들여다보는 돋보기 — 분석하는 곳이라는 뜻.
   ========================================================================== */
.hart--insight .hi__float { inset: 4%; }
.hart--insight .hi__glow { left: 10%; top: 12%; width: 74%; height: 74%; }

/* 고입 · 대입 두 리포트 구간 (2026-09-16)
   바탕이 같아 어디서 갈리는지 보이지 않았고, 사이가 240px 이나 비어 있었다.
   아래 구간에 종이색을 한 겹 더 깔고 윗선을 그어 면이 바뀐 것을 보이게 하고, 사이는 좁힌다. */
.rc-sec { padding-bottom: clamp(38px, calc(var(--u) * 4), 72px); }
.rc-sec + .rc-sec { border-top: 1px solid rgba(23, 21, 26, .12); }
.rc-sec + .rc-sec::before { background: rgba(255, 255, 255, .62); }
/* 구간 머리 : 번호 · 이름 · 설명 왼쪽에 붉은 기둥을 세워 어디서 새 구간이 시작되는지 보이게 한다 */
.rc-sec .ps__head { position: relative; padding-left: clamp(14px, calc(var(--u) * 1.6), 26px); }
.rc-sec .ps__head::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .6em; width: 3px; border-radius: 2px; background: var(--red);
}

/* ── 합격 실적 숫자 : 메인 레드 그라데이션 (2026-09-17)
   먹색(1안)에서 숫자만 밝은 레드(--red-hi)라 막대(--red)와 따로 놀았다.
   숫자 글자를 위 밝은 레드 → 아래 메인 레드(--red) 그라데이션으로 칠해 막대와 같은 색 계열로 묶는다. */
.stats__v > span, .stats__s--univ > b span, .chart__col--now .chart__tot b {
  background: linear-gradient(180deg, #F0263B 0%, var(--red) 62%, #B30017 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.stats-sec.rs-hero .stats__v > span, .stats-sec.rs-hero .stats__s--univ > b span, .stats-sec.rs-hero .chart__col--now .chart__tot b {
  background-image: linear-gradient(180deg, #FF5A69 0%, #F0263B 38%, var(--red) 100%);
  color: transparent;
}
.stats__v > span { padding-right: .04em; }

/* ── 고입 · 대입 줄 정렬 : 항목 이름은 왼쪽, 숫자는 막대 오른쪽 끝에. 두 글자를 줄 가운데로 맞춘다 */
.stats__split { gap: clamp(14px, calc(var(--u) * 1.4), 20px); }
.stats__s { grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 8px; }
.stats__s > span { font-size: var(--fs-sm); line-height: 1; }
.stats__s > b { justify-self: end; display: inline-flex; align-items: baseline; line-height: 1; }
.stats__s > b span { line-height: 1; }
.stats__s > b i { margin-left: 3px; }
.stats__s > i { margin-top: 0; }

/* ── 수강 후기 카드 다듬기 (2026-09-17)
   - 따옴표 : 글꼴의 “ 를 크게 키워 오른쪽 위에 걸쳤더니 기울어진 막대 두 개처럼 잘려 보였다.
     직접 그린 따옴표 아이콘(둥근 머리 + 꼬리)을 붉은 원 안에 넣어 왼쪽 위, 제목 바로 위에 둔다.
   - 제목(한 줄 요약) : 줄 길이를 고르게(balance) · 너무 길게 뻗지 않게 폭 제한.
   - 본문 : 'pretty' 가 마지막 줄을 늘리려고 앞줄을 일찍 끊어 줄 끝이 들쭉날쭉했다. 보통 줄바꿈으로. */
.nrv__card::before {
  content: ""; position: static; display: block;
  width: clamp(40px, calc(var(--u) * 3.4), 50px); height: clamp(40px, calc(var(--u) * 3.4), 50px);
  margin-bottom: clamp(16px, calc(var(--u) * 1.8), 24px);
  border-radius: 50%; font-size: 0; line-height: 0; color: transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23fff' d='M11 40a10 10 0 0 1-10-10c0-13 7-24 18-29l3 5c-6 4-9 8-10 14a10 10 0 0 1-1 20zm25 0a10 10 0 0 1-10-10c0-13 7-24 18-29l3 5c-6 4-9 8-10 14a10 10 0 0 1-1 20z'/%3E%3C/svg%3E") center / 46% auto no-repeat,
    linear-gradient(150deg, #F0263B 0%, var(--red) 60%, #B30017 100%);
  box-shadow: 0 10px 22px -12px rgba(208, 2, 27, .7);
}
.nrv__q .nrv__lead { max-width: 30em; text-wrap: balance; }
.nrv__q p:not(.nrv__lead) { text-wrap: pretty; }
@media (max-width: 599px) {
  .nrv__q .nrv__lead { text-wrap: pretty; }
}

/* ── 합격 사례 끝 상담 유도 다듬기 2차 (2026-09-17)
   1차(먹색 + 호 무늬 + 붉은 빛 + 상담 순서)는 높이만 커지고 예스러웠다.
   메인 레드 한 장의 평평한 판으로 바꾼다. 장식은 로고 심볼의 둥근 모서리를 딴 옅은 면 하나.
   버튼은 가로로 나란히(전화 = 흰 버튼, 카카오 = 노랑). */
.rcta {
  position: relative; isolation: isolate; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(26px, calc(var(--u) * 3), 44px) clamp(24px, calc(var(--u) * 3.6), 60px);
  border-radius: 20px;
  background: linear-gradient(115deg, #E3122C 0%, var(--red) 48%, #B10016 100%);
  box-shadow: 0 30px 60px -40px rgba(176, 0, 22, .75);
}
.rcta::after {
  content: ""; position: absolute; z-index: -1; right: 0; top: 0;
  width: clamp(180px, 30%, 380px); height: 100%;
  border-bottom-left-radius: 999px 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  pointer-events: none;
}
.rcta__h { font-size: clamp(22px, calc(var(--u) * 2.3), 36px); color: #fff; }
.rcta__p { margin-top: 8px; color: rgba(255, 255, 255, .82); }
.rcta__cta { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
.rcta__cta .btn { justify-content: center; }
.rcta__cta .btn:not(.btn--kakao) { background: #fff; color: var(--red); box-shadow: 0 10px 24px -14px rgba(60, 0, 8, .6); }
.rcta__cta .btn:not(.btn--kakao) .btn__ic { fill: currentColor; }
.rcta__cta .btn--kakao { box-shadow: 0 10px 24px -14px rgba(60, 0, 8, .6); }
@media (max-width: 899px) {
  .rcta { grid-template-columns: minmax(0, 1fr); }
  .rcta::after { width: 42%; height: 70%; }
  .rcta__cta { flex-wrap: wrap; }
  .rcta__cta .btn { flex: 1 1 150px; }
}
/* 3차 : 레드 판은 눈이 피로하다 → 먹색 판. 버튼은 한 단계 작게, 전화는 다시 메인 레드 */
.rcta {
  background: linear-gradient(115deg, #232026 0%, #19171C 55%, #121114 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -42px rgba(20, 10, 14, .8);
}
.rcta::after { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); }
.rcta__p { color: var(--on-noir-2); }
.rcta__cta .btn { padding: .95em 1.8em; font-size: var(--fs-md); }
.rcta__cta .btn:not(.btn--kakao) { background: var(--red); color: #fff; box-shadow: 0 10px 24px -14px rgba(208, 2, 27, .8); }
.rcta__cta .btn--kakao { box-shadow: none; }
/* 4차 : 오른쪽 곡선 장식 삭제 */
.rcta::after { content: none; display: none; }

/* ── 수강 후기 따옴표 2차 : 원 배지 대신, 예전 자리(오른쪽 위)에 크게 · 옅게 깔리는 배경 요소로.
   글꼴 글자 대신 직접 그린 따옴표라 잘리거나 기울어 보이지 않는다. */
.nrv__card::before {
  position: absolute; z-index: 0;
  right: clamp(22px, calc(var(--u) * 3), 48px); top: clamp(20px, calc(var(--u) * 2.6), 40px);
  width: clamp(110px, calc(var(--u) * 12), 190px); height: auto; aspect-ratio: 48 / 40;
  margin: 0; border-radius: 0; box-shadow: none; opacity: .08;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23D0021B' d='M11 40a10 10 0 0 1-10-10c0-13 7-24 18-29l3 5c-6 4-9 8-10 14a10 10 0 0 1-1 20zm25 0a10 10 0 0 1-10-10c0-13 7-24 18-29l3 5c-6 4-9 8-10 14a10 10 0 0 1-1 20z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.nrv__q, .nrv__cap { position: relative; z-index: 1; }
@media (max-width: 599px) {
  .nrv__card::before { width: 96px; right: 18px; top: 16px; }
}

/* ── 합격 후기 카드(.pc) 말풍선 따옴표 : 수강 후기와 같은 직접 그린 따옴표로 통일 (2026-09-17)
   글꼴 “ 가 말풍선 위로 삐져나가 잘린 막대처럼 보였다. 말풍선 안쪽 오른쪽 위에 옅게 깐다. */
.pc__q { overflow: hidden; }
.pc__q::before {
  content: ""; right: 14px; top: 12px; z-index: 0;
  width: 46px; aspect-ratio: 48 / 40; height: auto; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23D0021B' d='M11 40a10 10 0 0 1-10-10c0-13 7-24 18-29l3 5c-6 4-9 8-10 14a10 10 0 0 1-1 20zm25 0a10 10 0 0 1-10-10c0-13 7-24 18-29l3 5c-6 4-9 8-10 14a10 10 0 0 1-1 20z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .12; pointer-events: none;
}
.pc__q p { z-index: 1; }
/* 말풍선은 낮아서 오른쪽 위에 두면 첫 줄 끝 글자와 겹친다. 보통 짧게 끝나는 마지막 줄 쪽(오른쪽 아래)으로 */
.pc__q::before { top: auto; bottom: 12px; right: 14px; width: 52px; }

/* ── 합격 후기 카드 구성 통일 (2026-09-17)
   모든 카드 = 유형 · 제목 · 부제 · 정보 두 칸 · 본문 상자 · 원문 링크.
   학생 후기 = 노란 말풍선(따옴표), 선생님 기록 = 옅은 회색 상자. 두 상자는 같은 모양 · 같은 여백으로 남은 높이를 채운다. */
.pc__facts dd { white-space: normal; word-break: keep-all; line-height: 1.35; }
.pc__note { position: relative; flex: 1; margin: 12px 0 0; padding: 16px 16px 16px 18px; border-radius: 4px 16px 16px 16px; background: #F6F2F1; }
.pc__note .pc__d { flex: none; margin: 0; font-size: 14.5px; line-height: 1.7; font-weight: 500; color: var(--ink-2); }
.pc__q { margin-top: 12px; }
.pc__facts { margin-top: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   합격 현황 3차 (2026-09-17)
   - 올해 합격자 128명을 칸 128개(16 × 8)로 직접 보여 준다. 고입 46칸(회색) → 대입 82칸(레드).
     채움 막대(트랙) 두 줄은 없앴다 — 같은 정보를 규모로 한 번에 읽는다.
   - 리드 판 위 : 항목 이름 + 증가 칩. 숫자 아래 : 도트 그리드 → 고입 · 대입 두 칸 → 보조 수치 두 칸.
   - 그래프 : 제목 아래 요약 한 줄, 올해 기둥 뒤에 옅은 띠, 대입 조각은 레드 그라데이션.
   - 등장은 한 번 : 칸이 차례로 켜지고(0.8초), 기둥이 자란다.
   ══════════════════════════════════════════════════════════════════════════ */
.stats { gap: clamp(14px, calc(var(--u) * 1.6), 24px); }
@media (min-width: 1024px) { .stats { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 1023px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.stats__lead, .chart { border-radius: 20px; padding: clamp(24px, calc(var(--u) * 2.8), 40px); }

.stats__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.stats__k { font-size: var(--fs-sm); font-weight: 700; }
.stats__delta {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: rgba(23, 21, 26, .05);
}
.stats__delta b { font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.stats__v { margin-top: clamp(10px, calc(var(--u) * 1.2), 18px); font-size: clamp(64px, calc(var(--u) * 7.4), 120px); letter-spacing: -.035em; line-height: .9; }
.stats__v i { margin-left: .08em; font-size: .22em; }

/* 도트 그리드 */
.waffle {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(3px, calc(var(--u) * .36), 5px);
  margin-top: clamp(20px, calc(var(--u) * 2.4), 32px);
}
.waffle i { aspect-ratio: 1; border-radius: 3px; background: rgba(23, 21, 26, .16); }
.waffle i.u { background: linear-gradient(160deg, #EE2A3E, var(--red) 70%); }
html.js .stats .waffle i { transition: opacity .35s var(--ease), scale .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.25s + var(--i) * 6ms); }
html.js .stats:not(.is-in) .waffle i { opacity: 0; scale: .4; }

/* 고입 · 대입 : 표식 + 이름, 숫자는 크게 */
.stats__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: clamp(14px, calc(var(--u) * 1.6), 20px); }
.stats__s { display: block; padding: 2px 0 0; }
.stats__s + .stats__s { padding-left: clamp(14px, calc(var(--u) * 1.6), 24px); border-left: 1px solid rgba(23, 21, 26, .09); }
.stats__s > span { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); line-height: 1.2; }
.stats__s > span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: rgba(23, 21, 26, .16); }
.stats__s--univ > span::before { background: var(--red); }
.stats__s > b { display: flex; justify-self: start; margin-top: 6px; font-size: clamp(22px, calc(var(--u) * 2), 30px); }
.stats__s > b span { font-size: 1em; }
.stats__s > b i { font-size: .5em; }

.stats__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; padding-top: clamp(18px, calc(var(--u) * 2.2), 28px); }
.stats__more > div { display: block; padding: 14px 0 0; border-top: 1px solid rgba(23, 21, 26, .09); }
.stats__more > div + div { padding-left: clamp(14px, calc(var(--u) * 1.6), 24px); }
.stats__more dd { margin-top: 4px; font-size: clamp(18px, calc(var(--u) * 1.6), 24px); }

/* 그래프 */
.chart__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.chart__cap b { grid-column: 1; font-size: var(--fs-xl); letter-spacing: -.01em; }
.chart__sum { grid-column: 1; grid-row: 2; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.chart__leg { grid-column: 2; grid-row: 1 / 3; align-self: start; padding: 6px 12px; border-radius: 999px; background: rgba(23, 21, 26, .05); }
.chart__dot { border-radius: 3px; }
.chart__seg--univ, .chart__dot--univ { background: linear-gradient(180deg, #EE2A3E, var(--red) 60%, #B80018); }
.chart__fill { border-radius: 8px 8px 3px 3px; clip-path: inset(0 0 0 0 round 8px 8px 3px 3px); }
html.js .chart:not(.is-in) .chart__fill { clip-path: inset(100% 0 0 0 round 8px 8px 3px 3px); }
.chart__bar { width: min(56%, 64px); }
.chart__col--now::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: -8px; bottom: -40px; z-index: -1;
  border-radius: 14px; background: rgba(208, 2, 27, .06);
}
.chart__cols { z-index: 0; }
.chart__note { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  html.js .stats .waffle i { opacity: 1; scale: none; transition: none; }
  html.js .chart .chart__fill { clip-path: none; }
}
@media (max-width: 599px) {
  .stats__v { font-size: clamp(60px, 18vw, 80px); }
  .chart__cap { grid-template-columns: minmax(0, 1fr); }
  .chart__leg { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 6px; }
}

/* 먹색(1안) */
.stats-sec.rs-hero .stats__lead, .stats-sec.rs-hero .chart { background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.stats-sec.rs-hero .stats__delta { color: var(--on-noir-2); background: rgba(255, 255, 255, .07); }
.stats-sec.rs-hero .stats__delta b { color: #FF5A69; }
.stats-sec.rs-hero .waffle i { background: rgba(255, 255, 255, .2); }
.stats-sec.rs-hero .waffle i.u { background: linear-gradient(160deg, #F0263B, var(--red) 70%); }
.stats-sec.rs-hero .stats__s > span::before, .stats-sec.rs-hero .chart__dot--high { background: rgba(255, 255, 255, .28); }
.stats-sec.rs-hero .stats__s--univ > span::before { background: var(--red); }
.stats-sec.rs-hero .stats__s + .stats__s, .stats-sec.rs-hero .stats__more > div { border-color: rgba(255, 255, 255, .12); }
.stats-sec.rs-hero .chart__sum { color: var(--on-noir-2); }
.stats-sec.rs-hero .chart__leg { background: rgba(255, 255, 255, .07); }
.stats-sec.rs-hero .chart__seg--univ, .stats-sec.rs-hero .chart__dot--univ { background: linear-gradient(180deg, #F0263B, var(--red) 60%, #B10016); }
.stats-sec.rs-hero .chart__col--now::before { background: rgba(255, 255, 255, .05); }
.stats__v { gap: 0; }
.stats__v > span { padding-right: 0; }
.stats__v i { margin-left: .14em; }
/* 그래프 칸이 리드 판 높이만큼 늘어나게 : 막대 영역이 남는 높이를 채운다 */
.chart { display: flex; flex-direction: column; }
.chart__plot { flex: 1 1 auto; height: auto; min-height: var(--ph); }
@media (max-width: 1023px) { .chart__plot { flex: none; height: var(--ph); } }

/* ══════════════════════════════════════════════════════════════════════════
   합격 현황 4차 (2026-09-17)
   고입 · 대입은 서로 다른 결과라 한 덩어리(도트 · 누적 막대)로 합치지 않는다.
   - 리드 판 : 합계 128 아래에 고입 · 대입 카드 두 장. 카드마다 5년 추이 선(스파크라인) + 2022년 대비 증가.
   - 그래프 : 해마다 고입 · 대입 막대를 나란히(묶음 막대). 눈금 0 · 25 · 50 · 75 · 100, 값은 막대 위.
   ══════════════════════════════════════════════════════════════════════════ */
.stats__split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: clamp(20px, calc(var(--u) * 2.4), 30px); }
.stats__s, .stats__s + .stats__s {
  display: flex; flex-direction: column; padding: clamp(14px, calc(var(--u) * 1.6), 20px);
  border: 0; border-radius: 14px; background: rgba(23, 21, 26, .04); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06);
}
.stats__s > span { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.stats__s > span::before { display: none; }
.stats__s > b { margin-top: 4px; font-size: clamp(28px, calc(var(--u) * 2.6), 40px); letter-spacing: -.02em; }
.stats__s > b i { font-size: .42em; }
.stats__s > em { margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.stats__s > em b { font-weight: 800; color: var(--ink); }
.stats__s--univ > em b { color: var(--red); }

.spark { display: block; width: 100%; height: clamp(36px, calc(var(--u) * 3.6), 48px); margin: 10px 0 8px; overflow: visible; }
.spark__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark__dot { stroke-width: 2.5; }
.spark--high .spark__line { stroke: rgba(23, 21, 26, .55); }
.spark--high .spark__dot { fill: #fff; stroke: rgba(23, 21, 26, .7); }
.spark--high .spark__area { fill: rgba(23, 21, 26, .05); }
.spark--univ .spark__line { stroke: var(--red); }
.spark--univ .spark__dot { fill: #fff; stroke: var(--red); }
.spark--univ .spark__area { fill: rgba(208, 2, 27, .08); }
html.js .stats .spark__line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1) .35s; }
html.js .stats:not(.is-in) .spark__line { stroke-dashoffset: 1; }
html.js .stats .spark__dot, html.js .stats .spark__area { transition: opacity .5s var(--ease) 1.1s; }
html.js .stats:not(.is-in) .spark__dot, html.js .stats:not(.is-in) .spark__area { opacity: 0; }

/* 묶음 막대 */
.chart__plot--pair { --ax: 36px; margin-bottom: 40px; }
.chart__plot--pair .chart__cols { gap: 0; }
.chart__pair {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, calc(var(--u) * .6), 8px);
}
.chart__b {
  position: relative; width: min(30%, 34px); height: calc(var(--v) / var(--max) * 100%);
  border-radius: 7px 7px 2px 2px;
}
.chart__b--high { background: rgba(23, 21, 26, .2); }
.chart__b--univ { background: linear-gradient(180deg, #EE2A3E, var(--red) 55%, #B80018); }
.chart__b b {
  position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: 6px;
  font-size: clamp(12px, calc(var(--u) * 1), 14px); font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chart__b--univ b { color: var(--ink); }
.chart__col--now .chart__b--univ b { color: var(--red); font-size: clamp(14px, calc(var(--u) * 1.2), 17px); }
.chart__col--now .chart__b--high { background: rgba(23, 21, 26, .34); }
.chart__col--now::before { top: -14px; bottom: -40px; left: 8%; right: 8%; }
.chart__plot--pair .chart__y { margin-top: 12px; }

html.js .chart .chart__b { transition: clip-path 1s cubic-bezier(.22, 1, .36, 1) calc(.15s + var(--k) * 90ms); clip-path: inset(0 0 0 0 round 7px 7px 2px 2px); }
html.js .chart .chart__b--univ { transition-delay: calc(.23s + var(--k) * 90ms); }
html.js .chart:not(.is-in) .chart__b { clip-path: inset(100% 0 0 0 round 7px 7px 2px 2px); }
html.js .chart .chart__b b { transition: opacity .4s var(--ease) calc(.8s + var(--k) * 90ms); }
html.js .chart:not(.is-in) .chart__b b { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .stats .spark__line { stroke-dashoffset: 0; transition: none; }
  html.js .stats .spark__dot, html.js .stats .spark__area { opacity: 1; transition: none; }
  html.js .chart .chart__b { clip-path: none; transition: none; }
  html.js .chart .chart__b b { opacity: 1; transition: none; }
}
@media (max-width: 599px) {
  .chart__plot--pair { --ax: 26px; }
  .chart__pair { gap: 3px; }
  .chart__b { width: 36%; }
  .chart__b b { font-size: 11px; margin-bottom: 4px; }
  .chart__col--now .chart__b--univ b { font-size: 12.5px; }
}

/* 먹색(1안) */
.stats-sec.rs-hero .stats__s, .stats-sec.rs-hero .stats__s + .stats__s { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.stats-sec.rs-hero .stats__s > em { color: var(--on-noir-2); }
.stats-sec.rs-hero .stats__s > em b { color: #fff; }
.stats-sec.rs-hero .stats__s--univ > em b { color: #FF5A69; }
.stats-sec.rs-hero .spark--high .spark__line { stroke: rgba(255, 255, 255, .6); }
.stats-sec.rs-hero .spark--high .spark__dot { fill: #1E1B21; stroke: #fff; }
.stats-sec.rs-hero .spark--high .spark__area { fill: rgba(255, 255, 255, .05); }
.stats-sec.rs-hero .spark--univ .spark__line { stroke: #F0263B; }
.stats-sec.rs-hero .spark--univ .spark__dot { fill: #1E1B21; stroke: #F0263B; }
.stats-sec.rs-hero .spark--univ .spark__area { fill: rgba(240, 38, 59, .12); }
.stats-sec.rs-hero .chart__b--high { background: rgba(255, 255, 255, .26); }
.stats-sec.rs-hero .chart__col--now .chart__b--high { background: rgba(255, 255, 255, .42); }
.stats-sec.rs-hero .chart__b--univ { background: linear-gradient(180deg, #F0263B, var(--red) 55%, #B10016); }
.stats-sec.rs-hero .chart__b b { color: var(--on-noir-2); }
.stats-sec.rs-hero .chart__b--univ b { color: #fff; }
.stats-sec.rs-hero .chart__col--now .chart__b--univ b { color: #FF5A69; }
/* 막대 색 · 등장 마스크는 ::before 에만 → 막대 위 값 글자가 잘리지 않는다 */
.chart__b, .chart__col--now .chart__b--high, .stats-sec.rs-hero .chart__b--high, .stats-sec.rs-hero .chart__b--univ, .stats-sec.rs-hero .chart__col--now .chart__b--high { background: none; }
.chart__b::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(23, 21, 26, .2); }
.chart__b--univ::before { background: linear-gradient(180deg, #EE2A3E, var(--red) 55%, #B80018); }
.chart__col--now .chart__b--high::before { background: rgba(23, 21, 26, .34); }
.stats-sec.rs-hero .chart__b--high::before { background: rgba(255, 255, 255, .26); }
.stats-sec.rs-hero .chart__col--now .chart__b--high::before { background: rgba(255, 255, 255, .42); }
.stats-sec.rs-hero .chart__b--univ::before { background: linear-gradient(180deg, #F0263B, var(--red) 55%, #B10016); }
html.js .chart .chart__b, html.js .chart:not(.is-in) .chart__b { clip-path: none; transition: none; }
html.js .chart .chart__b::before { clip-path: inset(0 0 0 0 round 7px 7px 2px 2px); transition: clip-path 1s cubic-bezier(.22, 1, .36, 1) calc(.15s + var(--k) * 90ms); }
html.js .chart .chart__b--univ::before { transition-delay: calc(.23s + var(--k) * 90ms); }
html.js .chart:not(.is-in) .chart__b::before { clip-path: inset(100% 0 0 0 round 7px 7px 2px 2px); }
@media (prefers-reduced-motion: reduce) { html.js .chart .chart__b::before { clip-path: none; transition: none; } }
/* 고입 · 대입 카드 : 왼쪽 정렬 */
.stats__s, .stats__s + .stats__s { align-items: stretch; text-align: left; }
.stats__s > b { justify-content: flex-start; }
.stats__s > em { white-space: nowrap; }
@media (max-width: 599px) {
  .stats__s, .stats__s + .stats__s { padding: 14px 12px; }
  .stats__s > em { font-size: 12px; letter-spacing: -.02em; }
}

/* 합격 현황 : 설명 글과 데이터 판 사이가 1안에서 약 100px(머리 아래 여백 + 판 위 여백이 겹치지 않고 더해짐)이었다. 한 곳에서만 준다 */
.stats-sec .ps__head { margin-bottom: 0; }
.stats-sec .stats { margin-top: clamp(26px, calc(var(--u) * 2.6), 40px); }

/* ══════════════════════════════════════════════════════════════════════════
   수강 후기 카드 3차 (2026-09-18)
   - 카드들이 가장 긴 후기 높이에 맞춰 늘어나는데, 글쓴이 줄이 본문 바로 아래 붙어 짧은 후기는 아래가 비었다.
     → 카드를 세로 흐름으로, 글쓴이 · 항목은 늘 카드 바닥에.
   - 글쓴이 : 학사모 표식(레드 원) + 이름 위 · 프로그램 · 시기 아래 두 줄.
   - 고른 항목 : 해시태그(#) 칩, 옅은 테두리. 메인 페이지 필 버튼과 같은 말투.
   - 제목 왼쪽에 붉은 세로 선 : 한 줄 요약이 본문과 확실히 나뉜다.
   ══════════════════════════════════════════════════════════════════════════ */
.nrv__card { display: flex; flex-direction: column; }
.nrv__q { gap: clamp(16px, calc(var(--u) * 1.8), 24px); }
.nrv__q .nrv__lead {
  position: relative; padding-left: clamp(16px, calc(var(--u) * 1.6), 22px);
  font-size: clamp(19px, calc(var(--u) * 1.75), 26px); line-height: 1.55; letter-spacing: -.012em;
}
.nrv__q .nrv__lead::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em; width: 3px; border-radius: 2px; background: var(--red);
}
.nrv__q p:not(.nrv__lead) { padding-left: clamp(16px, calc(var(--u) * 1.6), 22px); font-size: clamp(15px, calc(var(--u) * 1.05), 17px); line-height: 1.8; color: #4A454D; }

.nrv__cap { margin-top: auto; padding-top: clamp(20px, calc(var(--u) * 2.2), 28px); border-top: 0; gap: 14px; position: relative; }
.nrv__card > .nrv__q { margin-bottom: clamp(24px, calc(var(--u) * 2.8), 40px); }
.nrv__cap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(23, 21, 26, .08); }

.nrv__who {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
}
.nrv__who::before {
  content: ""; grid-row: span 2; width: 42px; height: 42px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 4 1.5 9 12 14l8.5-4.05V15H22V9L12 4zm-6.5 8.2v3.3C5.5 17.4 8.4 19 12 19s6.5-1.6 6.5-3.5v-3.3L12 15.3l-6.5-3.1z'/%3E%3C/svg%3E") center / 22px no-repeat,
    linear-gradient(150deg, #F0263B, var(--red) 60%, #B30017);
  box-shadow: 0 8px 18px -10px rgba(208, 2, 27, .7);
}
.nrv__who b { align-self: end; font-size: 16px; line-height: 1.3; }

.nrv__keys { gap: 6px; }
.nrv__keys li {
  padding: 7px 12px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .12);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.nrv__keys li::before { content: "#"; margin-right: 2px; font-weight: 800; color: var(--red); }
@media (max-width: 599px) {
  .nrv__q .nrv__lead, .nrv__q p:not(.nrv__lead) { padding-left: 14px; }
  .nrv__keys li { padding: 6px 10px; font-size: 12.5px; }
  .nrv__who::before { width: 38px; height: 38px; background-size: 20px, auto; }
}
.nrv__q p:not(.nrv__lead) { font-size: clamp(15.5px, calc(var(--u) * 1.12), 17px); max-width: 40em; }


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT 대치 개편 (2026-09-19)
   - 컨설팅 철학 : 여섯 기준 목록 아래 맺음 한 줄(.hl-sum)
   - 입시 전문가 : 분야별 컨설턴트 네 칸(.xp) + 사진 · 약력 자리(.xpp, 임시 틀)
   - 캠퍼스 : 지역별 개수 칩 대신 대치학원 공식 홈페이지로 가는 버튼(.cl2__cta)
   ══════════════════════════════════════════════════════════════════════════ */
.hl-sum {
  margin-top: clamp(20px, calc(var(--u) * 2.2), 32px); padding-top: clamp(18px, calc(var(--u) * 2), 26px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: clamp(15px, calc(var(--u) * 1.1), 18px); font-weight: 700; line-height: 1.6;
  color: var(--on-noir-2); word-break: keep-all; text-align: center;
}
.hl-sum b { font-weight: 800; color: #fff; }

.xp {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, calc(var(--u) * 1.2), 18px);
  margin: clamp(26px, calc(var(--u) * 3), 48px) 0 0; padding: 0; list-style: none;
}
.xp__c {
  padding: clamp(18px, calc(var(--u) * 2), 28px);
  border-radius: 16px; background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.xp__t { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.004em; color: #fff; word-break: keep-all; }
.xp__d { margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.55; color: var(--on-noir-2); word-break: keep-all; }

.xpp { margin-top: clamp(28px, calc(var(--u) * 3.2), 52px); padding-top: clamp(24px, calc(var(--u) * 2.6), 40px); border-top: 1px solid rgba(255, 255, 255, .12); }
.xpp__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.xpp__h { font-size: var(--fs-xl); font-weight: 800; color: #fff; }
.xpp__note { font-size: var(--fs-2xs); font-weight: 600; color: var(--on-noir-2); }
.xpp__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, calc(var(--u) * 1.2), 18px); margin: clamp(16px, calc(var(--u) * 1.8), 26px) 0 0; padding: 0; list-style: none;
}
.xpp__card {
  display: grid; grid-template-columns: clamp(76px, calc(var(--u) * 8), 104px) minmax(0, 1fr);
  gap: clamp(14px, calc(var(--u) * 1.6), 22px); align-items: start;
  padding: clamp(16px, calc(var(--u) * 1.8), 24px);
  border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.xpp__ph {
  display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 12px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px dashed rgba(255, 255, 255, .18);
  border: 1px dashed rgba(255, 255, 255, .22);
}
.xpp__ph span { font-size: var(--fs-2xs); font-weight: 700; color: rgba(255, 255, 255, .45); }
.xpp__r { font-size: var(--fs-2xs); font-weight: 800; color: var(--red-on-noir); }
.xpp__n { margin-top: 4px; font-size: var(--fs-lg); font-weight: 800; color: #fff; }
.xpp__cv { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.xpp__cv li {
  position: relative; padding-left: 12px;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--on-noir-2); word-break: keep-all;
}
.xpp__cv li::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .35); }

.cl2__cta { margin-top: 18px; }
.btn--line {
  gap: 8px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .22);
}
.btn--line::after { content: none; }
.btn--line i { font-style: normal; }
.btn--line:hover, .btn--line:focus-visible { background: rgba(23, 21, 26, .05); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .4); }

@media (max-width: 1023px) {
  .xp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xpp__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .xp { grid-template-columns: minmax(0, 1fr); }
  .hl-sum { text-align: left; }
}
/* 원형 도식 가운데 문구가 '입시 성공'(4자)에서 '학생별 입시 전략'(8자)으로 길어졌다. 고리에 닿지 않게 한 단계 작게 (2026-09-19) */
.ab-team .rg-core__b { font-size: 36px; }
.ab-team .rg-en { font-size: 11.5px; }
@media (max-width: 1023px) { .ab-team .rg-core__b { font-size: 42px; } }
/* 좌 · 우 조각 이름이 '학습 수준' · '전형'으로 바뀌며 고리 밖으로 조금 넘쳤다. 한 단계 줄인다 */
.ab-team .rg-ko { font-size: 21px; }
@media (max-width: 599px) { .ab-team .rg-ko { font-size: 23px; } }


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT 대치 2차 (2026-09-19)
   - 대제목 : About 만 필기체(Yellowtail)로 작게, 한글은 그대로.
   - 첫 화면 네 칸 : '2011년' 만 크던 것을 다른 칸과 같은 크기로(위 · 아래 줄이 어긋나던 것).
   - 인사말 : 문단 · 줄 사이를 한 단계 좁게.
   - 원형 도식 : 좌 · 우 조각은 글자를 더 줄여 고리 안에 들어오게.
   - 관리 시스템 : 영문(PLAN · MANAGE …)을 크게, 번호는 작게.
   - 컨설턴트 소개 : 여섯 칸, 사진 자리 · 이름 · 약력을 또렷하게.
   ══════════════════════════════════════════════════════════════════════════ */
.ab-hero__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .12em; }
.ab-hero__en {
  font-family: var(--f-s); font-weight: 400; font-size: .56em; line-height: 1;
  letter-spacing: 0; color: var(--red-on-noir); transform: rotate(-4deg); transform-origin: 50% 80%;
}

.ab-stat dd { font-size: clamp(18px, calc(var(--u) * 1.5), 26px); line-height: 1.3; word-break: keep-all; }
.ab-stat > div { display: flex; flex-direction: column; }
.ab-stat small { margin-top: auto; padding-top: 6px; }

.ab-hello__text { margin-top: clamp(20px, calc(var(--u) * 2.2), 34px); gap: 1em; }
.ab-hello__text p { line-height: 1.72; }

/* 좌 · 우 조각은 고리 폭(90)이 좁다 */
.ab-team .rg-seg[style*="--k: 2"] .rg-ko, .ab-team .rg-seg[style*="--k: 5"] .rg-ko { font-size: 19px; }
.ab-team .rg-en { font-size: 11px; letter-spacing: 0; }

/* 관리 시스템 : 영문이 제목, 번호는 작은 표식 */
.ab-ensm .ensm__top { flex-direction: column-reverse; gap: 6px; }
.ab-ensm .ensm__l {
  font-size: clamp(13px, calc(var(--u) * 1), 15px); font-weight: 800; line-height: 1;
  letter-spacing: .02em; color: var(--red); font-variant-numeric: tabular-nums;
}
.ab-ensm .ensm__en {
  font-size: clamp(26px, calc(var(--u) * 2.6), 44px); font-weight: 900; line-height: 1.05;
  letter-spacing: -.01em; color: var(--ink);
}

/* 컨설턴트 소개 : 여섯 칸 */
.xpp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, calc(var(--u) * 1.3), 20px); }
.xpp__card {
  grid-template-columns: clamp(72px, calc(var(--u) * 7.4), 96px) minmax(0, 1fr);
  background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.xpp__ph {
  border: 0; border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 8px, rgba(255, 255, 255, .02) 8px 16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.xpp__r {
  display: inline-flex; padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: #FF6B78;
  background: rgba(208, 2, 27, .16); box-shadow: inset 0 0 0 1px rgba(240, 38, 59, .26);
}
.xpp__n { margin-top: 8px; font-size: var(--fs-md); }
.xpp__cv { margin-top: 10px; gap: 5px; }
@media (max-width: 1023px) {
  .xpp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .xpp__list { grid-template-columns: minmax(0, 1fr); }
  .ab-hero__en { font-size: .6em; }
}
.ab-hero__h { gap: .2em; }   /* 필기체 About 끝 획이 '대' 에 닿지 않게 */
/* 관리 시스템 : 영문은 강조 레드, 번호는 본문 글자색 (2026-09-19) */
.ab-ensm .ensm__en { color: var(--red); }
.ab-ensm .ensm__l { color: var(--ink-3); }


/* ── 입시 전문가 카드 : 글 왼쪽 · 아이콘 오른쪽 (2026-09-19, 아이콘은 Higgsfield 제작) */
.xp__c { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.xp__i { flex: none; width: clamp(46px, calc(var(--u) * 5), 64px); }
.xp__i img { display: block; width: 100%; height: auto; }

/* ── 캠퍼스 : 대치학원 공식 홈페이지 버튼 */
.cl2__cta { margin-top: 20px; }
.cl2__site {
  display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  max-width: 100%; padding: 12px 16px 12px 14px; border-radius: 16px; text-decoration: none;
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .1), 0 14px 30px -24px rgba(60, 20, 20, .5);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.cl2__site-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(208, 2, 27, .08); color: var(--red);
}
.cl2__site-ic svg { width: 22px; height: 22px; }
.cl2__site-t { display: grid; gap: 2px; min-width: 0; }
.cl2__site-t b { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.004em; }
.cl2__site-t small { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); word-break: keep-all; }
.cl2__site-go {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
}
.cl2__site-go svg { width: 16px; height: 16px; }
.cl2__site:hover, .cl2__site:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .18), 0 18px 34px -22px rgba(60, 20, 20, .6); }
@media (max-width: 599px) {
  .cl2__site { width: 100%; padding: 12px; gap: 10px; }
  .cl2__site-ic { width: 36px; height: 36px; }
}
/* 아이콘이 들어오며 글 칸이 좁아져 제목이 끊겼다. 여백 · 아이콘을 줄여 제목 한 줄, 설명 두 줄 안에 (2026-09-19) */
.xp__c { padding: clamp(16px, calc(var(--u) * 1.7), 22px) clamp(16px, calc(var(--u) * 1.7), 22px); gap: 12px; align-items: center; }
.xp__i { width: clamp(44px, calc(var(--u) * 4.4), 54px); }
.xp__t { font-size: clamp(15.5px, calc(var(--u) * 1.18), 18px); line-height: 1.35; }
.xp__d { margin-top: 6px; font-size: clamp(12.5px, calc(var(--u) * .95), 14px); line-height: 1.5; }
/* 새 아이콘은 먹색이라 어두운 카드에 묻힌다. 프로그램 카드처럼 옅은 타일 위에 올린다 (2026-09-19) */
.xp__i {
  display: grid; place-items: center; box-sizing: border-box;
  width: clamp(52px, calc(var(--u) * 5.2), 62px); height: clamp(52px, calc(var(--u) * 5.2), 62px);
  padding: 8px; border-radius: 16px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* 아이콘을 상세페이지와 같은 유리 질감 SVG 로 교체 : 타일 배경 없이 아이콘만 (2026-09-19) */
.xp__i { background: none; box-shadow: none; padding: 0; border-radius: 0; width: clamp(52px, calc(var(--u) * 5.4), 66px); height: auto; }
.xp__i { width: clamp(46px, calc(var(--u) * 4.6), 56px); }   /* 제목이 한 줄에 들어오게 */


/* ══════════════════════════════════════════════════════════════════════════
   컨설턴트 소개 2차 (2026-09-19) : 사진이 위에 오는 인물 카드
   사진 자리는 유리 질감 실루엣(섹션 아이콘과 같은 결) + '사진 준비 중' 표시.
   아래로 담당 분야 · 이름 · 전문 영역 · 약력 순. 카드 위에는 붉은 실선 한 줄.
   ══════════════════════════════════════════════════════════════════════════ */
.xpp__card {
  display: block; position: relative; overflow: hidden; padding: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.xpp__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(208, 2, 27, 0) 72%);
}
@media (hover: hover) {
  .xpp__card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 26px 44px -30px rgba(0, 0, 0, .9); }
}
.xpp__ph {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border: 0; border-radius: 0;
  background:
    radial-gradient(70% 90% at 50% 18%, rgba(208, 2, 27, .28), rgba(208, 2, 27, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.xpp__silh { width: 46%; height: auto; fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .34); stroke-width: 2.4; }
.xpp__wait {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .62);
  background: rgba(23, 21, 26, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.xpp__b { padding: clamp(16px, calc(var(--u) * 1.8), 22px); }
.xpp__r {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: #FF6B78;
  background: rgba(208, 2, 27, .16); box-shadow: inset 0 0 0 1px rgba(240, 38, 59, .26);
}
.xpp__n { margin-top: 10px; font-size: var(--fs-lg); font-weight: 800; color: #fff; }
.xpp__f { margin-top: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--on-noir-2); word-break: keep-all; }
.xpp__cv { margin-top: 14px; padding-top: 12px; gap: 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
.xpp__cv li { font-size: 12.5px; color: rgba(255, 255, 255, .48); }
.xpp__cv li::before { background: rgba(255, 255, 255, .28); }
@media (max-width: 599px) {
  .xpp__card { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
  .xpp__ph { aspect-ratio: 3 / 4; }
  .xpp__silh { width: 56%; }
  .xpp__wait { display: none; }
}
/* 사진 자리 높이 : PC 는 조금 낮게, 폰은 카드 높이만큼 채운다 (2026-09-19) */
.xpp__ph { aspect-ratio: 5 / 4; }
.xpp__silh { width: 42%; }
@media (max-width: 599px) {
  .xpp__ph { aspect-ratio: auto; height: 100%; min-height: 150px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   컨설팅 철학 맺음 줄 · 컨설턴트 카드 정리 (2026-09-19)
   - 맺음 한 줄 : 왼쪽 설명 칸 안에 있어 도식과 따로 놀았다 → 두 칸(설명 · 도식) 아래 전체 폭 가운데로.
   - 컨설턴트 카드 : 세로로 길어 자리만 많이 차지했다 → 사진 왼쪽 · 정보 오른쪽의 낮은 가로 카드로.
   ══════════════════════════════════════════════════════════════════════════ */
.ab-team .hl-sum {
  display: flex; justify-content: center;
  margin-top: clamp(26px, calc(var(--u) * 3), 46px); padding-top: 0; border-top: 0;
}
.ab-team .hl-sum span {
  position: relative; padding: 12px 22px 12px 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-size: clamp(14px, calc(var(--u) * 1.05), 17px); font-weight: 700; color: var(--on-noir-2); word-break: keep-all;
}
.ab-team .hl-sum span::before {
  content: ""; position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(208, 2, 27, .22);
}
.ab-team .hl-sum b { color: #fff; }

.xpp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, calc(var(--u) * 1.2), 16px); }
.xpp__card { display: grid; grid-template-columns: clamp(78px, calc(var(--u) * 8), 96px) minmax(0, 1fr); border-radius: 16px; }
.xpp__ph { aspect-ratio: auto; height: 100%; min-height: 118px; }
.xpp__silh { width: 52%; }
.xpp__wait { display: none; }
.xpp__b { padding: clamp(12px, calc(var(--u) * 1.4), 18px); }
.xpp__r { padding: 3px 9px; font-size: 11px; }
.xpp__n { margin-top: 7px; font-size: var(--fs-md); }
.xpp__f { margin-top: 3px; font-size: 12px; }
.xpp__cv { margin-top: 10px; padding-top: 9px; gap: 4px; }
.xpp__cv li { font-size: 12px; }
@media (max-width: 1023px) { .xpp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .xpp__list { grid-template-columns: minmax(0, 1fr); }
  .xpp__card { grid-template-columns: 92px minmax(0, 1fr); }
  .xpp__ph { min-height: 124px; }
  .ab-team .hl-sum span { font-size: 13.5px; padding: 10px 16px 10px 24px; }
}

/* ── 컨설턴트 사진 자리 : 인물 사진 표준 비율 3:4 로 고정 (2026-09-19)
   나중에 .xpp__ph 안에 <img> 를 넣으면 잘림 없이 칸을 채운다(object-fit: cover). 실루엣은 사진이 없을 때만 보인다. */
.xpp__card { grid-template-columns: clamp(96px, calc(var(--u) * 10), 124px) minmax(0, 1fr); align-items: stretch; }
.xpp__ph { aspect-ratio: 3 / 4; height: auto; min-height: 0; overflow: hidden; }
.xpp__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.xpp__ph:has(img) { background: #211E24; }
.xpp__ph:has(img) .xpp__silh, .xpp__ph:has(img) .xpp__wait { display: none; }
.xpp__silh { width: 48%; }
.xpp__b { align-self: center; }
@media (max-width: 599px) {
  .xpp__card { grid-template-columns: 104px minmax(0, 1fr); }
  .xpp__ph { aspect-ratio: 3 / 4; }
}

/* 입시연구소 · 고입 리포트 (2026-09-21) : 종이색(붉은 기)이 비치던 바탕을 은은한 회색으로 */
.ps-hero + .rc-sec::before { background: linear-gradient(180deg, #F2F1F3 0%, #EEEDF0 100%); }
.ps-hero + .rc-sec + .rc-sec { border-top-color: rgba(23, 21, 26, .08); }

/* ==========================================================================
   합격 현황 v5 (2026-09-21) : 고입 · 대입을 맞대는 막대 대신 각자의 추세 판
   - 왼쪽 : 올해 합계 128명 + 뒤에 은은한 합계 추세(.trend--bg)
   - 오른쪽 : 고입 판 · 대입 판을 위아래로. 판마다 자기 눈금(견주지 않는다)
   - 곡선은 program.js 가 data-trend 로 그린다. 등장 : 곡선 → 점 · 숫자 → 끝점 말풍선 · 파동
   ========================================================================== */
.stats--v5 { align-items: stretch; }
.stats--v5 .stats__lead { position: relative; overflow: hidden; isolation: isolate; }
.stats--v5 .stats__lead > :not(.trend) { position: relative; z-index: 1; }
.stats__from { margin-top: 12px; max-width: 22em; font-size: var(--fs-2xs); font-weight: 600; line-height: 1.55; color: var(--ink-3); }
.stats--v5 .stats__more { margin-top: auto; padding-top: clamp(90px, 13vh, 150px); }

.stats__tracks { display: grid; gap: clamp(12px, calc(var(--u) * 1.4), 20px); min-width: 0; }
.stats__tracks .chart__note { margin-top: 0; }

.trk {
  --tc: var(--red); --tb: #fff; --tl: rgba(23, 21, 26, .08); --tt: var(--ink-3);
  position: relative; margin: 0;
  display: grid; grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr); align-items: center;
  gap: clamp(16px, calc(var(--u) * 2.4), 40px);
  padding: clamp(20px, calc(var(--u) * 2.2), 32px) clamp(20px, calc(var(--u) * 2.6), 38px) clamp(16px, calc(var(--u) * 1.6), 24px);
  border-radius: var(--r-lg); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 22px 46px -38px rgba(60, 20, 20, .45);
}
.trk__info { display: flex; flex-direction: column; gap: 10px; }
.trk__k { display: flex; flex-direction: column; gap: 5px; }
.trk__k b { font-size: var(--fs-md); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.trk__k span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.trk__v {
  display: flex; align-items: baseline; gap: .1em;
  font-size: clamp(44px, calc(var(--u) * 4.6), 68px); font-weight: 900; line-height: .95; letter-spacing: -.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.trk__v i { font-style: normal; font-size: .3em; font-weight: 700; color: var(--ink-3); letter-spacing: 0; }
.trk__d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trk__up { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.trk__up b { font-weight: 800; color: var(--red); }
.trk__x {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: var(--red); background: rgba(215, 16, 42, .08); font-variant-numeric: tabular-nums;
}
.trk__x::before { content: ""; width: 0; height: 0; border: 4.5px solid transparent; border-bottom: 6px solid currentColor; border-top: 0; }

/* 추세 그림 */
.trend { position: relative; height: clamp(128px, 16vh, 168px); margin: 34px 4px 30px; }
.trend__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.trend__grid i { display: block; height: 0; border-top: 1px dashed var(--tl); }
.trend__grid i:last-child { border-top-style: solid; border-top-color: rgba(23, 21, 26, .16); }
.trend__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 12px rgba(215, 16, 42, .18)); }
.trend__s1 { stop-color: var(--tc); stop-opacity: .26; }
.trend__s2 { stop-color: var(--tc); stop-opacity: 0; }
.trend__line { fill: none; stroke: var(--tc); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.trend__pt {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--tb); box-shadow: inset 0 0 0 2.5px var(--tc);
}
.trend__pt > b {
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  font-size: 12.5px; font-weight: 700; color: var(--tt); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trend__pt.is-now { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--tc); box-shadow: 0 0 0 3px var(--tb), 0 0 0 4.5px var(--tc); }
.trend__pt.is-now::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--tc); opacity: 0; pointer-events: none;
}
.trend__pt > b.trend__bub {
  left: auto; right: -12px; bottom: calc(100% + 14px); transform: none;
  display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 11px 7px; border-radius: 10px;
  font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .86); background: var(--tc);
  box-shadow: 0 10px 20px -10px rgba(215, 16, 42, .7);
}
.trend__bub em { font-style: normal; font-size: 15px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.trend__bub::after { content: ""; position: absolute; right: 14px; top: 100%; border: 6px solid transparent; border-top-color: var(--tc); border-bottom: 0; }
.trend__guide {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); bottom: 0; width: 0;
  border-left: 1.5px dashed var(--tc); opacity: .45; transform-origin: 50% 100%;
}
.trend__yrs { position: absolute; left: 0; right: 0; top: calc(100% + 11px); height: 16px; margin: 0; padding: 0; list-style: none; }
.trend__yrs li {
  position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: var(--tt); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trend__yrs li.is-now { font-weight: 800; color: var(--ink); }

/* 왼쪽 판 뒤 합계 추세 : 글자와 다투지 않게 옅게 */
.trend--bg { --tc: var(--red); --tb: #fff; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; margin: 0; z-index: 0; pointer-events: none; }
.trend--bg .trend__grid { display: none; }
.trend--bg .trend__svg { filter: none; }
.trend--bg .trend__line { stroke-width: 2px; opacity: .5; }
.trend--bg .trend__s1 { stop-opacity: .14; }
.trend--bg .trend__pt.is-now { width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: .85; }

/* 등장 : is-go(시작) → 점마다 is-on(곡선 끝이 지나갈 때, program.js) → is-in(곡선 완료) */
.trend.is-ready .trend__svg { clip-path: inset(-30% 100% -30% 0); }
.trend.is-in .trend__svg { clip-path: inset(-30% -2% -30% 0); }
.trend.is-ready .trend__grid i { transform: scaleX(0); transform-origin: 0 50%; }
.trend.is-go .trend__grid i { transform: none; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.trend.is-go .trend__grid i:nth-child(2) { transition-delay: .07s; }
.trend.is-go .trend__grid i:nth-child(3) { transition-delay: .14s; }
.trend.is-ready .trend__yrs li { opacity: 0; translate: 0 6px; }
.trend.is-go .trend__yrs li { opacity: 1; translate: none; transition: opacity .5s ease calc(var(--x) * .006s), translate .6s cubic-bezier(.22, 1, .36, 1) calc(var(--x) * .006s); }
.trend.is-ready .trend__pt:not(.is-on) { opacity: 0; scale: .2; }
.trend.is-ready .trend__pt.is-on { opacity: 1; scale: 1; transition: opacity .2s ease, scale .55s cubic-bezier(.34, 1.8, .64, 1); }
.trend.is-ready .trend__pt:not(.is-on) > b:not(.trend__bub) { opacity: 0; translate: 0 8px; }
.trend.is-ready .trend__pt.is-on > b:not(.trend__bub) { opacity: 1; translate: none; transition: opacity .35s ease .08s, translate .5s cubic-bezier(.22, 1, .36, 1) .08s; }
.trend.is-ready:not(.is-in) .trend__bub { opacity: 0; translate: 0 10px; scale: .85; }
.trend__bub { transform-origin: 85% 100%; }
.trend.is-ready.is-in .trend__bub { opacity: 1; translate: none; scale: 1; transition: opacity .3s ease .1s, translate .6s cubic-bezier(.34, 1.56, .64, 1) .1s, scale .6s cubic-bezier(.34, 1.56, .64, 1) .1s; }
.trend.is-ready:not(.is-in) .trend__guide { transform: scaleY(0); }
.trend.is-ready.is-in .trend__guide { transform: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.trend.is-ready.is-in .trend__pt.is-now::after { animation: trendPulse 1.8s cubic-bezier(.2, .7, .3, 1) .2s 3 both; }
@keyframes trendPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .trend .trend__pt.is-now::after { animation: none !important; } }

@media (max-width: 1023px) {
  .stats--v5 .stats__more { padding-top: clamp(70px, 14vw, 110px); }
}
@media (max-width: 599px) {
  .trk { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .trk__info { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 14px; }
  .trk__k { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 8px; }
  .trk__v { font-size: 46px; }
  .trend { margin: 44px 2px 30px; height: 132px; }
  .trend__pt > b { font-size: 12px; }
}

/* 1안 : 먹색 표지 */
.stats-sec.rs-hero .trk { --tc: var(--red-hi); --tb: #2A2629; --tl: rgba(255, 255, 255, .1); --tt: var(--on-noir-2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.stats-sec.rs-hero .trk__k b, .stats-sec.rs-hero .trk__v, .stats-sec.rs-hero .trend__yrs li.is-now { color: #fff; }
.stats-sec.rs-hero .trk__k span, .stats-sec.rs-hero .trk__up, .stats-sec.rs-hero .trk__v i, .stats-sec.rs-hero .stats__from { color: var(--on-noir-2); }
.stats-sec.rs-hero .trk__up b, .stats-sec.rs-hero .trk__x { color: var(--red-hi); }
.stats-sec.rs-hero .trk__x { background: rgba(255, 70, 90, .14); }
.stats-sec.rs-hero .trend__grid i:last-child { border-top-color: rgba(255, 255, 255, .24); }
.stats-sec.rs-hero .trend__svg { filter: drop-shadow(0 8px 14px rgba(255, 40, 70, .28)); }
.stats-sec.rs-hero .trend__bub { color: rgba(255, 255, 255, .9); box-shadow: 0 10px 22px -10px rgba(255, 40, 70, .6); }
.stats-sec.rs-hero .trend--bg { --tc: var(--red-hi); --tb: #241F23; }
.stats-sec.rs-hero .trend--bg .trend__s1 { stop-opacity: .2; }
.stats-sec.rs-hero .trend--bg .trend__svg { filter: none; }

/* 합격 현황 v6 (2026-09-21) : 왼쪽 판 다시 잡음
   - 높이 : 안내 문구(.stats__note)를 격자 밖으로 뺐다. 왼쪽 판 = 오른쪽 두 판의 합
   - 128명을 점 128개로(한 명 = 점 하나). 2022년 인원은 옅게, 늘어난 인원은 레드 */
.stats--v5 .stats__tracks { grid-template-rows: 1fr 1fr; }
.stats__note { margin-top: clamp(12px, calc(var(--u) * 1.4), 18px); }
.stats-sec.rs-hero .stats__note { color: var(--on-noir-2); }

.stats--v5 .stats__lead { gap: 0; }
.stats--v5 .stats__v { margin-top: clamp(6px, calc(var(--u) * 1), 14px); }

.pdots {
  --dc: rgba(23, 21, 26, .13); --dn: var(--red);
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(5px, calc(var(--u) * .7), 9px);
  margin-top: clamp(20px, calc(var(--u) * 2.6), 34px);
}
.pdots i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--dc); }
.pdots i.is-new { background: var(--dn); box-shadow: 0 3px 8px -3px rgba(215, 16, 42, .55); }
.pdots.is-ready i { opacity: 0; scale: .2; }
.pdots.is-in i { opacity: 1; scale: 1; transition: opacity .25s ease calc(var(--i) * 8ms), scale .45s cubic-bezier(.34, 1.7, .64, 1) calc(var(--i) * 8ms); }
.pdots.is-in i.is-new { transition-delay: calc(.25s + var(--i) * 8ms); }

.pdots__leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.pdots__leg li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.pdots__leg li i { width: 9px; height: 9px; border-radius: 50%; background: rgba(23, 21, 26, .18); }
.pdots__leg li.is-new i { background: var(--red); }
.pdots__leg b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pdots__leg li.is-new b { color: var(--red); }

.stats--v5 .stats__more {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: auto; padding-top: clamp(20px, calc(var(--u) * 2.4), 32px);
}
.stats--v5 .stats__more > div {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
  padding: 16px 0 0; border-top: 1px solid rgba(23, 21, 26, .1);
}
.stats--v5 .stats__more > div + div { padding-left: clamp(14px, calc(var(--u) * 2), 26px); border-left: 1px solid rgba(23, 21, 26, .1); }
.stats--v5 .stats__more dd { font-size: clamp(26px, calc(var(--u) * 2.8), 36px); line-height: 1; letter-spacing: -.01em; }
.stats--v5 .stats__more dd i { font-size: .5em; }

@media (max-width: 599px) {
  .pdots { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
  .stats--v5 .stats__more dd { font-size: 26px; }
}

/* 1안 : 먹색 */
.stats-sec.rs-hero .pdots { --dc: rgba(255, 255, 255, .15); --dn: var(--red-hi); }
.stats-sec.rs-hero .pdots i.is-new { box-shadow: 0 0 10px -2px rgba(255, 50, 75, .55); }
.stats-sec.rs-hero .pdots__leg li { color: var(--on-noir-2); }
.stats-sec.rs-hero .pdots__leg li i { background: rgba(255, 255, 255, .22); }
.stats-sec.rs-hero .pdots__leg li.is-new i { background: var(--red-hi); }
.stats-sec.rs-hero .pdots__leg b { color: #fff; }
.stats-sec.rs-hero .pdots__leg li.is-new b { color: var(--red-hi); }
.stats-sec.rs-hero .stats--v5 .stats__more > div { border-color: rgba(255, 255, 255, .14); }

/* 합격 현황 v7 (2026-09-21) : 왼쪽 판을 대표 판(레드 면)으로
   흰 판 세 장이 같은 무게로 놓여 중심이 없었다. 합계 판을 레드로 세우고 오른쪽 두 판이 그 내역이 되게 한다.
   안 : 합계 128명 → 구성 한 줄(고입 · 대입) → 연도별 합계 막대(한 흐름, 견주는 그림 아님) → 학교 수 · 누적 */
.stats--v5 .stats__lead--feat, .stats-sec.rs-hero .stats--v5 .stats__lead--feat {
  --fw: rgba(255, 255, 255, .78);
  color: #fff;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(255, 120, 130, .38), rgba(255, 120, 130, 0) 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(90, 0, 14, .45), rgba(90, 0, 14, 0) 70%),
    linear-gradient(160deg, #E4152F 0%, #C80B25 52%, #A1061C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 34px 60px -34px rgba(185, 8, 32, .6);
}
.stats-sec.rs-hero .stats--v5 .stats__lead--feat { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 34px 70px -30px rgba(255, 30, 60, .38); }
/* 오른쪽 위 옅은 결 : 면이 평평해 보이지 않게 */
.stats__lead--feat::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, 0) 55%); mask-image: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, 0) 55%);
}
.stats__lead--feat .stats__k, .stats-sec.rs-hero .stats__lead--feat .stats__k { color: var(--fw); }
.stats__lead--feat .stats__delta, .stats-sec.rs-hero .stats__lead--feat .stats__delta { color: var(--fw); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.stats__lead--feat .stats__delta b, .stats-sec.rs-hero .stats__lead--feat .stats__delta b { color: #fff; }
.stats__lead--feat .stats__v > span, .stats-sec.rs-hero .stats__lead--feat .stats__v > span {
  background: none; -webkit-text-fill-color: #fff; color: #fff; text-shadow: 0 10px 30px rgba(120, 0, 16, .35);
}
.stats__lead--feat .stats__v i, .stats-sec.rs-hero .stats__lead--feat .stats__v i { color: var(--fw); }

.stats__mix { display: flex; align-items: center; gap: 0; margin-top: 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--fw); }
.stats__mix span + span::before { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 12px; vertical-align: -.08em; background: rgba(255, 255, 255, .35); }
.stats__mix b { margin-left: 4px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* 연도별 합계 막대 */
.tbars { margin: auto 0 0; padding-top: clamp(22px, calc(var(--u) * 2.6), 36px); }
.tbars__cap { font-size: 12.5px; font-weight: 700; color: var(--fw); }
.tbars__plot { margin-top: 30px; }
.tbars__list {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, calc(var(--u) * 1.1), 16px); align-items: end;
  height: clamp(120px, 17vh, 176px); margin: 0 0 30px; padding: 0; list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
}
.tbars__list li { position: relative; height: var(--h); }
.tbars__list i { display: block; height: 100%; border-radius: 8px 8px 2px 2px; background: rgba(255, 255, 255, .2); transform-origin: 50% 100%; }
.tbars__list b {
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  font-size: 13px; font-weight: 800; color: var(--fw); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tbars__list span {
  position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums;
}
.tbars__list li.is-now i { background: #fff; box-shadow: 0 12px 24px -10px rgba(90, 0, 14, .55); }
.tbars__list li.is-now b { font-size: 16px; font-weight: 900; color: #fff; }
.tbars__list li.is-now span { font-weight: 800; color: #fff; }

.tbars__plot.is-ready i { transform: scaleY(0); }
.tbars__plot.is-in i { transform: none; transition: transform .95s cubic-bezier(.22, 1, .36, 1) calc(.1s + var(--k) * 110ms); }
.tbars__plot.is-ready b { opacity: 0; translate: 0 6px; }
.tbars__plot.is-in b { opacity: 1; translate: none; transition: opacity .4s ease calc(.6s + var(--k) * 110ms), translate .5s cubic-bezier(.22, 1, .36, 1) calc(.6s + var(--k) * 110ms); }

/* 학교 수 · 누적 */
.stats--v5 .stats__lead--feat .stats__more { margin-top: 0; padding-top: 0; }
.stats--v5 .stats__lead--feat .stats__more > div, .stats-sec.rs-hero .stats--v5 .stats__lead--feat .stats__more > div { border-color: rgba(255, 255, 255, .24); }
.stats__lead--feat .stats__more dt, .stats-sec.rs-hero .stats__lead--feat .stats__more dt { color: var(--fw); }
.stats__lead--feat .stats__more dd, .stats__lead--feat .stats__more dd span, .stats-sec.rs-hero .stats__lead--feat .stats__more dd { color: #fff; }
.stats__lead--feat .stats__more dd i, .stats-sec.rs-hero .stats__lead--feat .stats__more dd i { color: var(--fw); }

@media (max-width: 599px) {
  .tbars__list { height: 130px; }
  .tbars__list b { font-size: 12px; }
  .tbars__list li.is-now b { font-size: 14px; }
}

/* 합격 현황 v7.1 (2026-09-21) : 대표 판 바탕을 레드 면 → 깊은 먹색(붉은 기)으로. 전면 레드는 눈이 아팠다.
   레드는 포인트로만 : 오른쪽 위 번짐 · 2026 막대 · +59명 */
.stats--v5 .stats__lead--feat, .stats-sec.rs-hero .stats--v5 .stats__lead--feat {
  --fw: rgba(255, 255, 255, .66);
  background:
    radial-gradient(85% 55% at 100% 0%, rgba(230, 30, 55, .34), rgba(230, 30, 55, 0) 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(230, 30, 55, .12), rgba(230, 30, 55, 0) 70%),
    linear-gradient(165deg, #2B1D21 0%, #1E1619 48%, #151114 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1), 0 34px 60px -34px rgba(30, 10, 14, .6);
}
.stats-sec.rs-hero .stats--v5 .stats__lead--feat {
  background:
    radial-gradient(85% 55% at 100% 0%, rgba(240, 40, 65, .4), rgba(240, 40, 65, 0) 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(240, 40, 65, .14), rgba(240, 40, 65, 0) 70%),
    linear-gradient(165deg, #3A2127 0%, #2A181D 50%, #1E1316 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 34px 70px -30px rgba(255, 30, 60, .22);
}
.stats__lead--feat::after { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 11px); }
.stats__lead--feat .stats__v > span, .stats-sec.rs-hero .stats__lead--feat .stats__v > span { text-shadow: none; }
.stats__lead--feat .stats__delta, .stats-sec.rs-hero .stats__lead--feat .stats__delta { background: rgba(240, 40, 65, .14); box-shadow: inset 0 0 0 1px rgba(240, 40, 65, .3); }
.stats__lead--feat .stats__delta b, .stats-sec.rs-hero .stats__lead--feat .stats__delta b { color: #FF5A69; }
.stats__mix span + span::before { background: rgba(255, 255, 255, .22); }
.tbars__list { border-bottom-color: rgba(255, 255, 255, .18); }
.tbars__list i { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.tbars__list li.is-now i { background: linear-gradient(180deg, #FF4A5C 0%, #E3152F 55%, #B80C24 100%); box-shadow: 0 12px 26px -10px rgba(230, 20, 45, .65), inset 0 1px 0 rgba(255, 255, 255, .3); }
.tbars__list li.is-now b { color: #FF5A69; }
.tbars__list span { color: rgba(255, 255, 255, .5); }
.stats--v5 .stats__lead--feat .stats__more > div, .stats-sec.rs-hero .stats--v5 .stats__lead--feat .stats__more > div { border-color: rgba(255, 255, 255, .12); }

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-23 : 고입 컨설팅 상세를 다섯 면으로 줄이면서 생긴 것들
   - 한 면 안에 덩어리가 둘일 때 쓰는 작은 머리(.ps__sub)
     01 프로그램 안내 = 하는 일 네 가지 + 판단 기준, 03 자료 안내 = 자료 탭 + 받는 자료 카드
   - 받는 자료 카드의 '예시 보기'(.dcard__go)와 자료 예시 창(.dvw)
   ══════════════════════════════════════════════════════════════════════════ */

.ps__sub { max-width: 46em; margin-top: clamp(56px, calc(var(--u) * 6), 104px); }
.ps .ps__subh { font-size: clamp(21px, calc(var(--u) * 1.85), 32px); font-weight: 800; letter-spacing: -.006em; line-height: 1.32; color: #fff; word-break: keep-all; }
.ps__subp { margin-top: 10px; font-size: var(--fs-md); line-height: 1.7; color: var(--on-noir-2); word-break: keep-all; }
.ps .ps__sub--light .ps__subh { color: var(--ink); }
.ps__sub--light .ps__subp { color: var(--ink-2); }
.ps__sub + .scope, .ps__sub + .dsh { margin-top: clamp(20px, calc(var(--u) * 2.2), 36px); }

/* 받는 자료 카드 : 카드 어디를 눌러도 예시 창이 열린다(단추의 넓힌 누름판) */
.dcard { position: relative; }
.dcard__go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 16px 0 0;
  border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--red); cursor: pointer;
}
.dcard__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.dcard__go i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FBEFEC; transition: background .25s var(--ease), color .25s var(--ease); }
.dcard__go i::before { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; margin-left: -2px; }
.dcard__go:focus-visible { outline: none; }
.dcard:has(.dcard__go:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
@media (hover: hover) { .dcard:hover .dcard__go i { background: var(--red); color: #fff; } }

/* 자료 예시 창 : 왼쪽에 자료 그림, 오른쪽에 담기는 내용 · 안내 · 자료 탭으로 가는 단추 */
.dvw { width: min(960px, calc(100vw - 32px)); max-height: min(860px, calc(100svh - 48px)); padding: 0; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 60px 120px -40px rgba(30, 10, 10, .7); overflow: hidden; }
.dvw[open] { display: flex; flex-direction: column; animation: dvwIn .4s cubic-bezier(.2, .8, .2, 1); }
.dvw::backdrop { background: rgba(10, 9, 12, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes dvwIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.dvw__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px 26px; border-bottom: 1px solid rgba(23, 21, 26, .08); }
.dvw__ttl { flex: 1; min-width: 0; }
.dvw__kind { display: inline-block; padding: .3em .75em; border-radius: var(--r-pill); background: #FBEFEC; font-size: var(--fs-2xs); font-weight: 700; color: var(--red); }
.dvw__t { margin-top: 8px; font-size: clamp(19px, calc(var(--u) * 1.6), 26px); font-weight: 800; letter-spacing: -.006em; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.dvw__x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F4EFEE; font-size: 22px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.dvw__x:hover { background: #EBE3E1; }
.dvw__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 30px); flex: 1; overflow-y: auto; padding: 22px 26px 26px; overscroll-behavior: contain; }
.dvw__fig { position: relative; aspect-ratio: 4 / 3; margin: 0; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, #fff 0%, #F7ECE9 55%, #F0DFDB 100%); }
.dvw__fig .pv { top: 7%; width: 76%; transform: translateX(-50%); transition: none; }
.dvw__side { display: flex; flex-direction: column; }
.dvw__l { display: grid; border-top: 1px solid rgba(23, 21, 26, .08); }
.dvw__l li { position: relative; padding: 11px 0 11px 1em; border-bottom: 1px solid rgba(23, 21, 26, .06); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.dvw__l li::before { content: ""; position: absolute; left: 0; top: calc(11px + .62em); width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.dvw__note { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #F8F4F3; font-size: max(12px, var(--fs-2xs)); line-height: 1.6; color: var(--ink-3); word-break: keep-all; }
.dvw__go { margin-top: 16px; min-height: 48px; padding: 0 18px; border: 1px solid rgba(23, 21, 26, .14); border-radius: 999px; background: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); cursor: pointer; }
.dvw__go:hover { background: #F8F4F3; }
.dvw__go:focus-visible, .dvw__x:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 767px) {
  .dvw__body { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 22px; }
  .dvw__head { padding: 16px 16px 14px 20px; }
  .dvw__fig { aspect-ratio: 5 / 4; }
}
@media (prefers-reduced-motion: reduce) { .dvw[open] { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-23 (2차) : 고입 컨설팅 손보기
   - 줄을 직접 끊는 제목 · 문단(.is-stack)
   - 판단 기준 카드 세 장을 같은 모양으로(.scope--even) + 카드 자체 손질
   - 자료 예시 창을 A4 비율 빈 칸으로
   - 05 상담 준비 버튼 폭 맞추기 (04 다음 단계는 아래 3차 규칙에서 다시 짰다)
   ══════════════════════════════════════════════════════════════════════════ */

/* 줄마다 .l 로 묶어 그 자리에서 끊는다. 화면이 좁아지면 그 줄 안에서만 다시 흐른다 */
.is-stack .l { display: block; }

/* ── 판단 기준 카드 : 첫 장만 붉던 것을 없애고 세 장을 같은 모양으로.
   어두운 면 위에서 옅은 유리판 + 위쪽 붉은 실선 + 모서리 붉은 빛 한 겹 */
.ps .scope--even .scope__col {
  position: relative; overflow: hidden; border: 0;
  padding: clamp(26px, calc(var(--u) * 2.6), 42px) clamp(22px, calc(var(--u) * 2.3), 36px) clamp(24px, calc(var(--u) * 2.2), 34px);
  border-radius: 22px;
  background:
    radial-gradient(70% 56% at 0% 0%, rgba(255, 122, 132, .12), rgba(255, 122, 132, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -44px rgba(0, 0, 0, .9);
}
.ps .scope--even .scope__col::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--red-on-noir), rgba(255, 122, 132, 0) 88%);
}
.ps .scope--even .scope__tag {
  display: inline-flex; align-items: center; margin-bottom: 12px; padding: 5px 12px;
  border-radius: 999px; background: rgba(255, 122, 132, .12); box-shadow: inset 0 0 0 1px rgba(255, 122, 132, .24);
  font-size: max(12px, var(--fs-2xs)); font-weight: 700; letter-spacing: .01em; color: var(--red-on-noir);
}
.ps .scope--even .scope__h { font-size: clamp(20px, calc(var(--u) * 1.65), 27px); }
.ps .scope--even .scope__l { margin-top: clamp(16px, calc(var(--u) * 1.5), 24px); }
.ps .scope--even .scope__l li { padding: 13px 0 13px 1.7em; border-top-color: rgba(255, 255, 255, .12); }
.ps .scope--even .scope__l li:last-child { padding-bottom: 0; }
/* 세 장 모두 같은 표시 : 첫 장만 다르게 주던 규칙을 덮는다 */
.ps .scope--even .scope__col:first-child,
.ps .scope--even .scope__col + .scope__col { background:
    radial-gradient(70% 56% at 0% 0%, rgba(255, 122, 132, .12), rgba(255, 122, 132, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)); border-color: transparent; }
.ps .scope--even .scope__l li::before,
.ps .scope--even .scope__col + .scope__col .scope__l li::before {
  top: calc(13px + .46em); width: 7px; height: 7px; border-radius: 2px; background: var(--red-on-noir);
}

/* ── 자료 예시 창 : 실제 자료가 A4 라서 그 비율의 빈 칸을 둔다(이미지는 뒤에 넣는다) */
.dvw { width: min(900px, calc(100vw - 32px)); }
.dvw__body { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); align-items: start; }
.dvw__fig {
  position: relative; display: grid; place-items: center; aspect-ratio: 210 / 297;
  width: 100%; max-width: min(100%, calc((100svh - 300px) * .707)); margin: 0 auto;
  border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .12), 0 18px 36px -24px rgba(80, 30, 30, .4);
  overflow: hidden;
}
.dvw__img { width: 100%; height: 100%; object-fit: contain; }
.dvw__ph { display: grid; gap: 6px; padding: 20px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3); }
.dvw__ph::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(23, 21, 26, .16); border-radius: 6px; }
.dvw__ph small { font-size: max(12px, var(--fs-2xs)); font-weight: 500; color: var(--ink-3); opacity: .75; }
@media (max-width: 767px) {
  .dvw__body { grid-template-columns: minmax(0, 1fr); }
  .dvw__fig { max-width: min(100%, 300px); }
}

/* ── 05 상담 준비 : 글 칸 너비를 잡고 버튼 두 개를 같은 폭으로 */
@media (min-width: 900px) {
  .ps-contact .book__head .sec-p { max-width: 34em; }
  .ps-contact .book__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: clamp(360px, 30vw, 440px); }
  .ps-contact .book__cta .btn { width: 100%; justify-content: center; padding-inline: 16px; }
}

/* 예시 이미지가 없을 때는 칸만 보이게 (base.css 의 img { display:block } 이 [hidden] 을 덮는다) */
.dvw__img[hidden] { display: none; }
/* 줄을 직접 끊는 제목은 한 줄이 잘리지 않게 머리 칸을 조금 넓게 */
.ps__head:has(.sec-h.is-stack), .ps__head:has(.sec-p.is-stack) { max-width: min(100%, 58em); }

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-23 (4차) : 04 다음 단계 — 배치(왼쪽 글 · 오른쪽 카드)는 그대로 두고 항목별 모양만 손봤다
   · 두 칸 높이를 맞춰 학년 축과 아래 안내가 같은 바닥선에 오게
   · 카드 : 흰 판 · 위쪽 붉은 실선 · 학년을 알약 표시로 · 아래 구분선 위 '보기' 줄(화살표는 오른쪽 끝)
   · 학년 축 : 지금 구간(중2 · 중3)에 옅은 붉은 띠와 두꺼운 밑줄
   · 아래 안내 : 옅은 판 안에 문장 + 링크 한 줄
   ══════════════════════════════════════════════════════════════════════════ */

.next--v2 { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
.next--v2 > div { display: flex; flex-direction: column; }
.next--v2 .next__p { margin-bottom: clamp(26px, calc(var(--u) * 3), 50px); max-width: 26em; }
.next--v2 .prail { margin-top: auto; }
.next--v2 .next__card { flex: 1; margin-bottom: clamp(14px, calc(var(--u) * 1.6), 24px); }
.next--v2 .next__note { margin-top: auto; }

/* 학년 축 : 지금 구간을 띠로 묶어 한눈에 */
.next--v2 .prail li { padding-bottom: 12px; }
.next--v2 .prail li::before { height: 3px; border-radius: 0 0 3px 3px; }
.next--v2 .prail li.on::before { height: 4px; }
.next--v2 .prail li.on::after {
  content: ""; position: absolute; left: 0; right: 3px; top: 0; bottom: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(215, 16, 42, .07), rgba(215, 16, 42, 0) 78%);
}

/* 카드 : 유리판 대신 또렷한 흰 판 + 위쪽 붉은 실선 */
.next--v2 .next__card {
  position: relative; overflow: hidden; gap: 0;
  border: 0; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 2px 4px rgba(60, 20, 20, .04), 0 30px 56px -34px rgba(60, 20, 20, .4);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.next--v2 .next__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), rgba(215, 16, 42, 0) 92%);
}
.next--v2 .next__grade {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #FBEFEC;
  font-size: max(12px, var(--fs-2xs)); font-weight: 700; color: var(--red);
}
.next--v2 .next__t { margin-top: 14px; font-size: clamp(24px, calc(var(--u) * 2.4), 40px); }
.next--v2 .next__d { margin-top: 10px; }
.next--v2 .next__go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: clamp(16px, calc(var(--u) * 1.8), 26px);
  border-top: 1px solid rgba(23, 21, 26, .08);
}
@media (hover: hover) { .next--v2 .next__card:hover { box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 2px 4px rgba(60, 20, 20, .04), 0 40px 70px -34px rgba(60, 20, 20, .5); } }

/* 아래 안내 : 옅은 판 한 칸 */
.next--v2 .next__note {
  padding: clamp(16px, calc(var(--u) * 1.8), 24px) clamp(18px, calc(var(--u) * 2), 28px);
  border-radius: var(--r-lg); background: #FAF4F3;
}
.next--v2 .next__also { margin-top: 0; color: var(--ink-2); }
.next__nlink { display: inline-flex; align-items: center; gap: .6em; min-height: 40px; margin-top: 6px; font-size: clamp(14px, calc(var(--u) * .95), 16px); font-weight: 700; color: var(--ink); }
.next__nlink .go { background: rgba(23, 21, 26, .06); }
@media (hover: hover) { .next__nlink:hover .go { background: var(--red); color: #fff; transform: translateX(3px); } }

@media (max-width: 899px) {
  .next--v2 { grid-template-columns: minmax(0, 1fr); }
  .next--v2 .next__card { flex: none; }
  .next--v2 .prail { margin-top: clamp(22px, calc(var(--u) * 2.4), 34px); }
  .next--v2 .next__note { margin-top: clamp(12px, calc(var(--u) * 1.4), 20px); }
}

/* 04 는 내용이 짧은 면이라 위아래 여백을 조금 줄인다 (위쪽은 고정된 챕터 띠에 가리지 않는 선까지) */
.ps-next:has(.next--v2) {
  padding-top: max(clamp(60px, calc(var(--u) * 6.6), 112px), calc(var(--head-off) + 16px));
  padding-bottom: clamp(60px, calc(var(--u) * 6.6), 112px);
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-23 : 고입 자소서 · 면접 컨설팅 개편
   · 제목이 너무 크고 넓어서 글자 크기 · 자간 · 가운뎃점 둘레를 줄였다
   · 01 프로그램 안내 = 자기소개서(4회) · 면접(8회) 두 덩어리(.duo)
   · 05 아래 연결 링크 두 개(.lnk), 06 상담 준비 준비물 네 칸
   ══════════════════════════════════════════════════════════════════════════ */

.ps-hero__h--tight { font-size: max(30px, calc(var(--fs-6xl) * .86)); letter-spacing: -.03em; }
.ps-hero__h--tight .hdot { margin-inline: -.18em; }

/* ── 01 : 자기소개서(4회) · 면접(8회) 두 판. 회차 수가 달라 좌우로 놓으면 높이가 크게 벌어져 위아래 전체 폭으로 쌓는다 */
.duo { display: grid; gap: clamp(14px, calc(var(--u) * 1.6), 26px); }
.duo__c {
  position: relative; overflow: hidden;
  padding: clamp(24px, calc(var(--u) * 2.6), 42px) clamp(22px, calc(var(--u) * 2.3), 40px) clamp(24px, calc(var(--u) * 2.4), 38px);
  border-radius: 22px;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(255, 122, 132, .12), rgba(255, 122, 132, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -44px rgba(0, 0, 0, .9);
}
.duo__c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--red-on-noir), rgba(255, 122, 132, 0) 88%); }
.duo__hd { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(18px, calc(var(--u) * 2.4), 56px); align-items: center; }
.duo__k {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: clamp(22px, calc(var(--u) * 2), 34px); font-weight: 800; letter-spacing: -.008em; color: #fff;
}
.duo__k b { padding: 5px 12px; border-radius: 999px; background: rgba(255, 122, 132, .12); box-shadow: inset 0 0 0 1px rgba(255, 122, 132, .24); font-size: max(12px, var(--fs-2xs)); font-weight: 700; color: var(--red-on-noir); white-space: nowrap; }
.duo__d { font-size: var(--fs-md); line-height: 1.7; color: var(--on-noir-2); word-break: keep-all; }
.duo__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(14px, calc(var(--u) * 1.6), 28px); margin-top: clamp(22px, calc(var(--u) * 2.4), 38px); }
.duo__steps li { display: grid; align-content: start; gap: 6px; padding-top: 13px; border-top: 2px solid rgba(255, 122, 132, .38); }
.duo__steps b { font-size: max(12px, var(--fs-2xs)); font-weight: 800; color: var(--red-on-noir); font-variant-numeric: tabular-nums; }
.duo__steps span { font-size: var(--fs-sm); line-height: 1.5; color: var(--on-noir); word-break: keep-all; }
.duo__more { display: flex; flex-wrap: wrap; gap: clamp(12px, calc(var(--u) * 1.4), 20px); margin-top: clamp(20px, calc(var(--u) * 2.2), 32px); }
.duo__more li {
  flex: 1 1 260px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  column-gap: 11px; row-gap: 9px;
  padding: 18px 16px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.duo__mi { grid-area: 1 / 1; display: grid; place-items: center; }
.duo__mi img { width: 34px; height: 34px; }
.duo__mt { grid-area: 1 / 2; align-self: center; font-size: clamp(15.5px, calc(var(--u) * 1.15), 18px); font-weight: 800; color: #fff; }
.duo__md, .duo__mg { grid-column: 1 / -1; }
.duo__md { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-noir-2); word-break: keep-all; }
.duo__md.is-stack { max-width: none; }
.duo__mg {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .11);
}
.duo__mg span {
  padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, .07);
  font-size: max(12px, var(--fs-2xs)); font-weight: 700; letter-spacing: .01em; color: rgba(255, 255, 255, .5);
}
.duo__mg em { font-style: normal; font-size: clamp(14px, calc(var(--u) * 1.02), 16px); font-weight: 800; color: var(--red-on-noir); word-break: keep-all; }
@media (max-width: 899px) { .duo__hd { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ── 05 아래 : 면접 수업만 따로 신청할 수 있다는 안내를 눈에 띄게 */
.scope__note--hi {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 16px; border-radius: 999px;
  background: rgba(215, 16, 42, .1); box-shadow: inset 0 0 0 1px rgba(215, 16, 42, .28);
}
.scope__note--hi::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.ps .scope__note--hi b { font-weight: 700; color: var(--ink); }
.ps[data-tone="dark"] .scope__note--hi { background: rgba(255, 122, 132, .12); box-shadow: inset 0 0 0 1px rgba(255, 122, 132, .3); }
.ps[data-tone="dark"] .scope__note--hi::before { background: var(--red-on-noir); }
.ps[data-tone="dark"] .scope__note--hi b { color: #fff; }

/* ── 05 와 06 사이 : 이어지는 컨설팅 링크 두 개 (차례 번호 없는 띠) */
.ps-link { padding-block: clamp(14px, calc(var(--u) * 1.6), 26px) clamp(40px, calc(var(--u) * 4.4), 76px); }
.ps-rule:has(+ .ps-link) { padding-bottom: clamp(20px, calc(var(--u) * 2.2), 38px); }
.ps-link::before { background: none; }
.lnk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, calc(var(--u) * 1.6), 24px); }
.lnk__i {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(22px, calc(var(--u) * 2.4), 34px) clamp(22px, calc(var(--u) * 2.4), 34px) clamp(20px, calc(var(--u) * 2.2), 28px);
  border-radius: 20px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 2px 4px rgba(60, 20, 20, .04), 0 24px 44px -34px rgba(60, 20, 20, .36);
}
.lnk__i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--red), rgba(215, 16, 42, .12)); }
.lnk__p { margin-bottom: clamp(18px, calc(var(--u) * 2), 28px); font-size: var(--fs-md); font-weight: 600; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.lnk__a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  margin-top: auto; margin-bottom: 0; padding: 0 8px 0 20px;
  border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .16);
  font-size: clamp(14px, calc(var(--u) * .98), 16.5px); font-weight: 700; color: var(--ink);
  transition: background .28s var(--ease), box-shadow .28s var(--ease), color .28s var(--ease);
}
.lnk__a .go { background: rgba(23, 21, 26, .07); }
@media (hover: hover) {
  .lnk__a:hover { background: #FBEFEC; box-shadow: inset 0 0 0 1.5px rgba(215, 16, 42, .32); color: var(--red); }
  .lnk__a:hover .go { background: var(--red); color: #fff; transform: translateX(3px); }
}
.lnk__a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 767px) { .lnk { grid-template-columns: minmax(0, 1fr); } }

/* ── 06 상담 준비 : 준비 자료가 네 개인 페이지 */
@media (min-width: 900px) {
  .ps-contact .book__steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 줄을 직접 끊는 문단은 40em 제한을 풀어 준다 (줄마다 .l 로 이미 길이를 정해 두었다) */
.sec-p.is-stack, .ps-hero__lede.is-stack { max-width: min(100%, 54em); }

/* ══ 2026-10-08 : 고입 리포트 카드(링크) · 리포트 출처 목록 ══ */
@media (min-width: 600px) { .rc--hs .rc__cover { aspect-ratio: 16 / 7; } }
.rc--hs .rc__name { font-size: clamp(22px, calc(var(--u) * 2), 32px); }
.rc--hs .rc__embs { right: 5%; width: auto; height: 62%; opacity: 1; }
.rc--hs .rc__emb { width: auto; height: 100%; opacity: .26; }
@media (max-width: 599px) { .rc--hs .rc__embs { right: 6%; height: 46%; } }
.rp-srcs { display: grid; gap: 8px; margin-top: 16px; padding-left: 1.4em; list-style: decimal; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.rp-srcs a { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(23, 21, 26, .25); text-underline-offset: 3px; word-break: keep-all; overflow-wrap: anywhere; }
.rp-srcs a i { margin-left: 4px; font-style: normal; }
@media (hover: hover) { .rp-srcs a:hover { color: var(--uc); text-decoration-color: currentColor; } }

/* ══ 2026-10-08 : 합격 실적 카톡 카드 — 예시(샘플) 대화 표시 ══ */
.ktc__ex { justify-self: start; margin-top: 5px; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid rgba(254, 229, 0, .55); font-size: 11px; font-weight: 700; line-height: 1.5; color: #FEE500; }
.km-date--ex span { background: rgba(254, 229, 0, .22); color: #4A3B00; font-weight: 700; }
.ktc-note { margin-top: 18px; font-size: var(--fs-2xs); line-height: 1.6; color: rgba(255, 255, 255, .55); word-break: keep-all; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-13 : 대입 면접 컨설팅 개편 (일곱 면 → 여섯 면)
   · 03 수업 한눈에 보기 : 면접 유형 네 탭. 02~04 탭은 단계 재생 모듈(.ans--wk)
   · 04 자료 안내 : 자료 여섯 장(.dsh--6)
   · 05 면접 유형별 대비 : 유형 카드 네 장 2×2(.ivt)
   · 설명에 섞여 있던 조건 · 예외 문장은 본문에서 빼고 안내 띠(.ps-note)로 따로 둔다
   · 05 아래 : 대입 컨설팅으로 가는 띠 하나(.lnk--solo)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 안내 띠 : "모두에게 같은 자료를 주는 것은 아니다" 같은 조건 · 예외 한 줄.
   설명 문단 안에 섞으면 프로그램 소개처럼 읽혀서, 본문에서 빼고 작은 띠로 구분한다 */
.ps-note {
  max-width: 58em; margin-top: clamp(22px, calc(var(--u) * 2.4), 40px);
  padding: 13px 18px 13px 15px; border-radius: 12px;
  background: rgba(23, 21, 26, .04); box-shadow: inset 2px 0 0 var(--red);
  font-size: clamp(13.5px, calc(var(--u) * .96), 15.5px); line-height: 1.66;
  color: var(--ink-2); word-break: keep-all;
}
.ps-note b { margin-right: 11px; font-size: max(12px, var(--fs-2xs)); font-weight: 800; letter-spacing: .02em; color: var(--red); }
.ps[data-tone="dark"] .ps-note { background: rgba(255, 255, 255, .05); box-shadow: inset 2px 0 0 var(--red-on-noir); color: var(--on-noir-2); }
.ps[data-tone="dark"] .ps-note b { color: var(--red-on-noir); }
.ps-steps .ps-note, .ps-out .ps-note { margin-top: clamp(26px, calc(var(--u) * 2.8), 46px); }
@media (max-width: 599px) { .ps-note { padding: 12px 14px 12px 13px; } .ps-note b { margin-right: 8px; } }

/* ── 01 결과물 칸 : 네 장 중 둘만 두 줄이 되어 칸 높이가 들쭉날쭉했다.
   여러 칸으로 설 때는 두 줄 높이를 미리 잡아 네 장을 같은 크기로 둔다(em 기준이라 글자 크기를 따라간다) */
.ps-what .work__get { display: grid; align-content: start; gap: 3px; padding: .8em 1em .9em; line-height: 1.45; }
.ps-what .work__get span { font-size: max(12px, .8em); }
.ps-what .work__get b { display: block; text-wrap: balance; }

/* ── 02 진행 과정 : 이름 칸이 3.4em 이라 '진행 · 분석' 이 꽉 차 값과 붙어 보였다 */
:root .ps-steps .track__meta > div { grid-template-columns: 5.6em minmax(0, 1fr); column-gap: 16px; }
@media (max-width: 599px) { :root .ps-steps .track__meta > div { grid-template-columns: 5.2em minmax(0, 1fr); column-gap: 12px; } }

/* ── 03 : 단계 재생 모듈을 '수업 흐름'으로 쓰는 판. 단계 이름이 길어 왼쪽 라벨 칸을 넓힌다 */
@media (min-width: 1024px) { .ans--wk { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); } }
.ans--wk .ans__tail .ans__qt { font-size: var(--fs-md); font-weight: 600; line-height: 1.65; }
.ans--wk .ans__qt { font-size: var(--fs-xl); font-weight: 800; line-height: 1.45; }
.ans--wk .ans__s { grid-template-columns: 9.6em minmax(0, 1fr); align-items: start; }
.ans--wk .ans__k { line-height: 1.55; padding-top: .06em; }
.ans--wk .ans__t { font-size: clamp(15px, calc(var(--u) * 1.08), 18px); font-weight: 500; line-height: 1.6; }
@media (max-width: 599px) { .ans--wk .ans__s { grid-template-columns: minmax(0, 1fr); } }


/* ── 03 탭 01 : 자료 종이와 옆 설명을 가운데 맞춤으로 두니 설명이 106px 내려와 있었다.
   종이 윗선과 설명 제목 윗선을 맞춘다(.qd 는 이 페이지에서만 쓴다) */
.qd { align-items: start; }
.qd__side { padding-top: 2px; }

/* 번호 + 질문을 flex 로 두면 text-wrap 이 통하지 않는다(flex 컨테이너) → 블록 + 번호에 오른쪽 여백 */
.qd__q { display: block; }
.qd__q b { margin-right: .5em; }

/* ── 04 : 자료가 여섯 장이면 네 칸 한 줄보다 세 칸 두 줄이 읽기 좋다 */
@media (min-width: 1200px) { .dsh--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 05 면접 유형 카드 네 장 (2026-10-13 3차)
   먹색 이름띠는 이 면만 색이 튀어 걷어냈다. 바탕은 다른 면과 같은 흰 종이로 두고
   붉은색은 윗선 · 번호 · 레일에만 쓴다.
   정렬 : 카드 안을 [표시 게터 | 글] 두 칸으로 못 박아, 번호 · 레일 동그라미는 게터 왼쪽에,
   제목 · 설명 · 레일 글은 모두 같은 세로선에서 시작한다. */
.ivt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, calc(var(--u) * 1.5), 26px); }
.ivt__c {
  --ivt-gut: clamp(27px, calc(var(--u) * 2.4), 34px);   /* 표시 게터 */
  --ivt-pad: clamp(20px, calc(var(--u) * 2.1), 34px);   /* 카드 안쪽 여백 */
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(60, 20, 20, .05), 0 26px 46px -34px rgba(60, 20, 20, .4);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ivt__c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red), rgba(215, 16, 42, .14) 92%); }
@media (hover: hover) {
  .ivt__c:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(60, 20, 20, .05), 0 34px 56px -32px rgba(60, 20, 20, .46); }
}
@media (prefers-reduced-motion: reduce) { .ivt__c { transition: none; } }

/* 이름 줄 : 번호는 게터, 이름은 글 칸. 아래 가는 선은 카드 폭 전체로 긋는다 */
.ivt__hd {
  display: grid; grid-template-columns: var(--ivt-gut) minmax(0, 1fr); align-items: baseline;
  padding: clamp(19px, calc(var(--u) * 1.9), 28px) var(--ivt-pad) clamp(15px, calc(var(--u) * 1.55), 22px);
  border-bottom: 1px solid rgba(23, 21, 26, .1);
}
.ivt__n { padding-right: 8px; font-size: max(12px, clamp(12px, calc(var(--u) * .95), 15px)); font-weight: 800; letter-spacing: .07em; color: var(--red); font-variant-numeric: tabular-nums; }
.ps .ivt__t { font-size: clamp(19px, calc(var(--u) * 1.6), 26px); font-weight: 800; letter-spacing: -.008em; line-height: 1.3; color: var(--ink); word-break: keep-all; }

/* 몸통 */
.ivt__bd { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, calc(var(--u) * 1.9), 28px) var(--ivt-pad) clamp(20px, calc(var(--u) * 2.1), 30px); }
.ivt__d { margin-left: var(--ivt-gut); font-size: var(--fs-md); line-height: 1.72; color: var(--ink-2); word-break: keep-all; }
.ivt__d .cl { display: inline; }

/* 준비 흐름 : 게터 안의 번호 레일 */
.ivt__kw { margin-top: auto; padding-top: clamp(18px, calc(var(--u) * 1.9), 28px); }
.ivt__kl { margin-left: var(--ivt-gut); font-size: max(12px, var(--fs-2xs)); font-weight: 800; letter-spacing: .04em; color: var(--red); }
.ivt__k { counter-reset: ivtk; display: grid; margin-top: 11px; }
.ivt__k li {
  position: relative; display: grid; grid-template-columns: var(--ivt-gut) minmax(0, 1fr);
  align-items: start; padding: 7px 0;
  font-size: clamp(14px, calc(var(--u) * .98), 16px); font-weight: 700; line-height: 1.5;
  color: var(--ink); word-break: keep-all; text-wrap: balance;
}
.ivt__k li::before {
  counter-increment: ivtk; content: counter(ivtk);
  z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px rgba(215, 16, 42, .38);
  font-size: 12px; font-weight: 800; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums;
}
.ivt__k li::after { content: ""; position: absolute; left: 10.5px; top: 28px; bottom: -6px; width: 1px; background: rgba(215, 16, 42, .22); }
.ivt__k li:last-child { padding-bottom: 0; }
.ivt__k li:last-child::after { display: none; }
/* 768~1023 : 두 칸이라 글 칸이 261px 까지 좁아졌다. 안쪽 여백과 게터를 줄여 글에 폭을 돌려준다 */
@media (max-width: 1023px) { .ivt__c { --ivt-pad: clamp(18px, calc(var(--u) * 1.8), 26px); --ivt-gut: 30px; } }
@media (max-width: 767px) { .ivt { grid-template-columns: minmax(0, 1fr); } .ivt__c { --ivt-pad: clamp(20px, calc(var(--u) * 2.1), 30px); --ivt-gut: 30px; } }

/* 어두운 면에서 쓸 때 */
.ps[data-tone="dark"] .ivt__c { background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -44px rgba(0, 0, 0, .9); }
.ps[data-tone="dark"] .ivt__c::before { background: linear-gradient(90deg, var(--red-on-noir), rgba(255, 122, 132, 0) 88%); }
.ps[data-tone="dark"] .ivt__hd { border-bottom-color: rgba(255, 255, 255, .14); }
.ps[data-tone="dark"] .ivt__n, .ps[data-tone="dark"] .ivt__kl { color: var(--red-on-noir); }
.ps[data-tone="dark"] .ivt__t, .ps[data-tone="dark"] .ps .ivt__t { color: #fff; }
.ps[data-tone="dark"] .ivt__d { color: var(--on-noir-2); }
.ps[data-tone="dark"] .ivt__k li { color: #fff; }
.ps[data-tone="dark"] .ivt__k li::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 122, 132, .45); color: var(--red-on-noir); }
.ps[data-tone="dark"] .ivt__k li::after { background: rgba(255, 122, 132, .3); }

/* ── 05 아래 : 연결 띠가 하나일 때는 한 줄 전체를 쓰고 글과 버튼을 좌우로 둔다 */
.lnk--solo { grid-template-columns: minmax(0, 1fr); }
.lnk__i--row { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(18px, calc(var(--u) * 2.4), 48px); flex-wrap: wrap; }
.lnk__tx { min-width: 0; flex: 1 1 320px; }
.lnk__h { font-size: clamp(19px, calc(var(--u) * 1.55), 27px); font-weight: 800; letter-spacing: -.006em; line-height: 1.35; color: var(--ink); word-break: keep-all; }
.lnk__i--row .lnk__p { margin: 10px 0 0; }
.lnk__i--row .lnk__a { margin-top: 0; flex: none; }
@media (max-width: 599px) { .lnk__i--row { flex-direction: column; align-items: flex-start; gap: 0; } .lnk__i--row .lnk__tx { flex: 0 0 auto; } .lnk__i--row .lnk__a { margin-top: clamp(18px, calc(var(--u) * 2), 28px); } }

/* ══ 줄바꿈 정책 (2026-10-13) ══
   머리글 · 소개글은 넓은 화면에서만 문장 단위로 끊는다. 1023 이하에서는 한 문장이 한 줄에
   안 들어와 '보여드립니다.' 같은 반 줄짜리가 계속 생기므로 보통 글처럼 흐르게 한다.
   카드 · 단계 안의 본문은 칸이 좁아 문장 · 구절 묶음이 모두 역효과라 어느 화면에서나 푼다. */
.work__d .sn, .work__d .cl,
.track__d .sn, .track__d .cl,
.ivt__d .sn, .ivt__d .cl,
.ex__d .sn, .ex__d .cl,
.ans__t .sn, .ans__t .cl,
.lnk__p .sn, .lnk__p .cl, .lnk__h .sn, .lnk__h .cl,
.dcard__l .sn, .dcard__l .cl,
.book__steps .sn, .book__steps .cl,
.qd__q .sn, .qd__q .cl, .qd__a .sn, .qd__a .cl,
.ps-note .sn, .ps-note .cl,
.book__prep .sn, .book__prep .cl,
.work__get .sn, .work__get .cl { display: inline; max-width: none; }
/* 한 덩어리 안에서는 줄 길이를 고르게 나눈다. pretty 는 한 낱말짜리 꼬리만 막아서
   '반복 훈련합니다.' 처럼 반 줄로 끝나는 문단을 못 고친다 → balance */
.work__d, .track__d, .ivt__d, .ex__d, .ex__h, .ans__t, .ans__qt,
.lnk__p, .lnk__h, .ps-note, .book__prep, .book__steps b, .book__steps span,
.qd__q, .qd__a p, .qd__memo, .qd__doc, .dcard__t, .dcard__l li,
.duo__md, .duo__d, .duo__mt, .scope__note, .scope__d, .scope__h,
.ex__facts li, .work__t, .work__get b, .track__t, .ivt__t, .dvw__note { text-wrap: balance; }
.scope__note .sn, .scope__note .cl { display: inline; max-width: none; }
/* 한 문장이 두 줄 넘게 흐를 때는 줄 길이를 고르게 나눈다(짧은 꼬리 줄 방지) */
.ps-hero__lede, .ps-hero__lede .sn, .ps-hero__lede .l,
.sec-p, .sec-p .sn, .sec-p .l, .scope__note { max-width: 100%; text-wrap: balance; }
/* 소개글은 문장마다 줄을 바꾸되(집 규칙), 문장 덩어리 안의 줄 길이는 고르게 나눈다.
   한 덩어리가 6줄을 넘으면 브라우저가 balance 를 포기하므로 문장 단위로 쪼개 두는 편이 낫다. */
@media (max-width: 1199px) {
  .ps-hero__lede .sn, .ps-hero__lede .cl { display: inline; max-width: none; }
  .ps .ps-hero__lede.is-stack .l { display: inline; }
  .ps .ps-hero__lede { text-wrap: balance; }
}
/* rwd.css 가 폰에서 소개글 줄(.l)을 인라인으로 풀어 한 덩어리 7줄이 되면서 balance 가 꺼졌다.
   줄은 다시 문장 단위로 두고, 문장 안에서만 고르게 나눈다 */
@media (max-width: 599px) {
  body[data-program="interview"] .ps-hero__lede.is-stack .l { display: block; }
  .ps .ps-hero__lede.is-stack .l + .l::before { content: none; }
}
@media (max-width: 1199px) {
  /* 좁아지면 한 문장도 두 줄을 넘기므로, 직접 끊어 둔 줄(.l)까지 풀고 문단 전체에서 고르게 나눈다 */
  .ps .sec-p .sn, .ps .sec-p .cl, .ps .sec-p.is-stack .l,
  .duo__md.is-stack .l, .duo__d .sn, .duo__d .cl { display: inline; max-width: none; }
  .ps .sec-p, .duo__md, .duo__d { text-wrap: balance; }
}
/* 상담 준비 네 칸 : 1024~1199 에서 한 칸이 185px 라 이름이 두 줄로 쪼개졌다 → 2×2 로 */
@media (min-width: 600px) and (max-width: 1199px) { .ps-contact .book__steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(22px, calc(var(--u) * 2.4), 38px); } }
/* 상담 준비 네 칸 : 이름 · 설명이 좁은 칸에서 반 줄로 끊기지 않게 */
.sec-h .l, .next__h .l, .sec-h, .next__h { text-wrap: balance; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-15 : 합격 사례 — 담당 선생님 기록 (기록부)
   그림자 없는 종이 한 장에 표처럼 줄을 맞춘 문서다.
   PC = 학교 · 학과 | 주요 사항 | 기록 | 원문 네 칸 / 태블릿 = 두 칸 + 기록 전체 폭 / 폰 = 한 칸.
   ══════════════════════════════════════════════════════════════════════════ */
.recs {
  margin-top: clamp(14px, calc(var(--u) * 1.4), 22px);
  padding: clamp(26px, calc(var(--u) * 2.8), 46px) clamp(20px, calc(var(--u) * 2.8), 46px) clamp(18px, calc(var(--u) * 2), 30px);
  border-radius: 22px; background: #FFFDFC;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .09);
}
.recs__head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; gap: 10px clamp(24px, calc(var(--u) * 3.4), 64px); }
.ps .recs__t { font-size: clamp(22px, calc(var(--u) * 1.8), 30px); font-weight: 900; letter-spacing: -.016em; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.recs__d { max-width: 44em; font-size: clamp(14px, calc(var(--u) * .98), 15.5px); line-height: 1.7; color: var(--ink-3); word-break: keep-all; text-wrap: balance; }
.recs__d .cl { display: inline; }
.recs__d .sn { max-width: 100%; text-wrap: balance; }

/* 표 머리 + 줄 : 같은 네 칸 */
.recs__cols, .rec {
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(150px, .85fr) minmax(0, 2.3fr) 64px;
  column-gap: clamp(18px, calc(var(--u) * 2.2), 36px);
}
.recs__cols {
  margin-top: clamp(22px, calc(var(--u) * 2.4), 34px); padding: 0 0 11px;
  border-bottom: 2px solid var(--ink);
  font-size: max(12px, var(--fs-2xs)); font-weight: 700; letter-spacing: .02em; color: var(--ink-3);
}
.recs__cols span:last-child { text-align: right; }
.recs__list { display: grid; }
.rec {
  position: relative; align-items: start;
  padding: clamp(18px, calc(var(--u) * 1.8), 24px) 0;
  border-bottom: 1px solid rgba(23, 21, 26, .1);
}
.rec::before { content: ""; position: absolute; inset: 0 calc(clamp(10px, calc(var(--u) * 1), 16px) * -1); z-index: 0; border-radius: 10px; background: #FBF5F2; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
@media (hover: hover) { .rec:hover::before { opacity: 1; } }
.rec > * { position: relative; z-index: 1; min-width: 0; }
.rec.is-more { display: none; }
/* 거르기(전체 · 고입 · 대입)가 붙이는 hidden : 위의 display: grid 가 덮어써 숨지 않던 것을 고쳤다(2026-10-21) */
.rec[hidden] { display: none; }

/* 1칸 : 구분 · 학교 · 학과 */
.rec__type { display: inline-flex; align-items: center; gap: 6px; font-size: max(12px, var(--fs-2xs)); font-weight: 800; color: var(--ink-2); }
.rec__type::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); }
.rec__type--univ { color: var(--red); }
.rec__type--univ::before { background: var(--red); }
.ps .rec__h { margin-top: 6px; font-size: clamp(17px, calc(var(--u) * 1.3), 20px); font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.rec__sub { margin-top: 3px; font-size: clamp(13px, calc(var(--u) * .92), 14.5px); line-height: 1.5; color: var(--ink-3); word-break: keep-all; }
/* 2칸 : 주요 사항 두 줄 */
/* 이름 | 값 두 칸으로 맞춰 한 줄씩 (이름 길이가 달라도 값의 시작선이 맞는다) */
.rec__facts { display: grid; grid-template-columns: 4.9em minmax(0, 1fr); align-items: baseline; gap: 7px 12px; padding-top: 2px; }
.rec__facts > div { display: contents; }
.rec__facts dt { font-size: max(12px, var(--fs-2xs)); color: var(--ink-3); }
.rec__facts dd { margin: 0; font-size: clamp(14px, calc(var(--u) * .98), 15.5px); font-weight: 700; line-height: 1.4; color: var(--ink); word-break: keep-all; }
/* 3칸 : 기록 본문 */
.rec__by { font-size: max(12px, var(--fs-2xs)); font-weight: 700; color: var(--ink-3); }
.rec--voice .rec__by { color: var(--red); }
.rec__d, .rec__q p { margin-top: 5px; font-size: clamp(14.5px, calc(var(--u) * 1.02), 16px); line-height: 1.72; color: var(--ink-2); word-break: keep-all; text-wrap: balance; }
.rec__q { margin: 0; }
.rec__q p { font-weight: 600; color: var(--ink); }
/* 4칸 : 원문 */
.rec__src {
  justify-self: end; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-top: -9px;
  font-size: clamp(13.5px, calc(var(--u) * .94), 14.5px); font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(23, 21, 26, .25); text-underline-offset: 4px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.rec__src i { font-style: normal; font-size: .9em; }
@media (hover: hover) { .rec__src:hover { color: var(--red); text-decoration-color: currentColor; } }
.rec__src:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* 더 보기 */
.recs__more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px;
  margin-top: clamp(16px, calc(var(--u) * 1.6), 22px); padding: 0 12px 0 20px;
  border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .16); background: transparent;
  font: inherit; font-size: clamp(14px, calc(var(--u) * .98), 15px); font-weight: 700; color: var(--ink); cursor: pointer;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.recs__more i { width: 8px; height: 8px; margin: -3px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); }
.recs__more[aria-expanded="true"] i { margin-top: 4px; transform: rotate(-135deg); }
@media (hover: hover) { .recs__more:hover { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .3); } }
.recs__more:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.recs__more[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rec::before, .rec__src, .recs__more, .recs__more i { transition: none; } }

/* 태블릿 : 학교 | 주요 사항 두 칸, 기록은 아래 전체 폭, 원문은 기록 끝에 */
@media (max-width: 1023px) {
  .recs__head { grid-template-columns: minmax(0, 1fr); }
  .recs__cols { display: none; }
  .recs__list { margin-top: clamp(16px, calc(var(--u) * 1.6), 22px); border-top: 2px solid var(--ink); }
  .rec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "who facts" "body body" "src src"; row-gap: 12px; }
  .rec__who { grid-area: who; } .rec__facts { grid-area: facts; } .rec__body { grid-area: body; }
  .rec__src { grid-area: src; justify-self: start; margin-top: -6px; }
}
/* 폰 : 한 칸으로 쌓고, 주요 사항은 한 줄에 나란히 */
@media (max-width: 599px) {
  .recs { margin-inline: calc(var(--col) * -.5); border-radius: 18px; }
  .ps .recs__t { white-space: normal; }
  .rec { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "facts" "body" "src"; row-gap: 10px; }
  .rec__facts { display: flex; flex-wrap: wrap; gap: 6px; }
  .rec__facts > div { display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #F6EFEC; }
  .recs__more { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-20 : 관리자 콘텐츠(DB)로 그리는 홈페이지 부분
   리포트 블록 9종 가운데 예전 리포트에 없던 단계 흐름(steps) · 일정(timeline), 섹션 제목 없는 리포트,
   합격 후기 학년도 탭 · NEW, 빈 목록 안내. 모양은 관리자 미리보기(css/adm/reportForm.css)를 사이트 색으로 옮겼다.
   ══════════════════════════════════════════════════════════════════════════ */
/* 리포트 : 섹션 제목이 없으면 차례 없이 본문만 */
.rp-grid--solo { grid-template-columns: minmax(0, 760px); }
/* 수치 카드(stats) 단위 */
.rp-figs b small { margin-left: 2px; font-size: .5em; font-weight: 800; letter-spacing: 0; color: var(--ink-3); }
/* 단계 흐름(steps) : 번호와 화살표로 이은 단계, 폰에서는 위아래로 */
.rp-steps { display: flex; margin-top: 18px; counter-reset: rps; }
.rp-steps li { position: relative; flex: 1 1 0; min-width: 0; padding: 16px 20px 16px 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08); }
.rp-steps li:first-child { border-radius: 16px 0 0 16px; }
.rp-steps li:last-child { border-radius: 0 16px 16px 0; }
.rp-steps li:only-child { border-radius: 16px; }
.rp-steps li + li { margin-left: -1px; }
.rp-steps li::before { counter-increment: rps; content: counter(rps); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--uc); font-size: 12.5px; font-weight: 800; color: #fff; }
.rp-steps li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; z-index: 1; width: 16px; height: 16px; margin-top: -8px; background: #fff; box-shadow: 1px -1px 0 rgba(23, 21, 26, .14); transform: rotate(45deg); }
.rp-steps__t { display: block; margin-top: 8px; font-size: 15.5px; font-weight: 800; line-height: 1.45; color: var(--ink); word-break: keep-all; }
.rp-steps__d { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); word-break: keep-all; }
/* 일정(timeline) : 세로선을 따라 날짜순 */
.rp-tl { position: relative; display: grid; gap: 14px; margin-top: 18px; padding-left: 26px; }
.rp-tl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; border-left: 2px solid rgba(23, 21, 26, .12); }
.rp-tl li { position: relative; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.rp-tl li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3.5px var(--uc); }
.rp-tl__d { display: block; font-size: 13.5px; font-weight: 800; color: var(--uc); font-variant-numeric: tabular-nums; }
.rp-tl__t { display: block; word-break: keep-all; }
@media (max-width: 639px) {
  .rp-steps { flex-direction: column; }
  .rp-steps li, .rp-steps li:first-child, .rp-steps li:last-child { border-radius: 0; }
  .rp-steps li:first-child { border-radius: 16px 16px 0 0; }
  .rp-steps li:last-child { border-radius: 0 0 16px 16px; }
  .rp-steps li:only-child { border-radius: 16px; }
  .rp-steps li + li { margin: -1px 0 0; }
  .rp-steps li:not(:last-child)::after { right: auto; left: 31px; top: auto; bottom: -9px; margin-top: 0; box-shadow: 1px 1px 0 rgba(23, 21, 26, .14); }
}
/* 입시연구소 목록 : 게시 중인 리포트가 없을 때 */
.rc-empty { padding: clamp(28px, calc(var(--u) * 3), 48px) 0; font-size: var(--fs-md); color: var(--ink-3); text-align: center; word-break: keep-all; }

/* 합격 후기 : 학년도 탭(js/program.js data-ytabs) · NEW(게시일부터 30일) · 원문 없는 줄 · 빈 학년도 */
.pcs__years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pcs__year { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .14); font: inherit; font-size: 15px; font-weight: 800; color: var(--ink-2); cursor: pointer; }
.pcs__year b { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.pcs__year.is-on { background: var(--ink); box-shadow: none; color: #fff; }
.pcs__year.is-on b { color: rgba(255, 255, 255, .7); }
.pcs__year:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
html.js .pcy:not(.is-on) { display: none; }
.rec__new { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; background: var(--red); font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .04em; line-height: 1.5; color: #fff; vertical-align: 2px; }
.rec__src--none { min-height: 0; margin: 0; }
.recs__empty { margin-top: clamp(16px, calc(var(--u) * 1.6), 22px); padding: 28px 0; border-top: 2px solid var(--ink); font-size: 15px; color: var(--ink-3); text-align: center; word-break: keep-all; }
@media (max-width: 1023px) { .rec__src--none { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-22 : 대입 컨설팅 상세 개편 (요청서 2026.10.21 보완본)
   · 히어로 : 강조 문구(.ps-hero__key) + 수시 · 정시 설명 두 문단(.ps-hero__desc), 스펙 값은 두 줄
   · 01 : 카드 위 수시 · 정시 꼬리표(.work__k), 결과물 칸 없음
   · 02 : 수시 · 정시 탭(.stab). 단계 번호를 크게 쓰지 않고 선 위의 점으로 순서만 보인다
   · 03 : 자료 다섯 장(.dsh--5) + 한 줄 설명(.dcard__d) + 예시 창의 PDF 뷰어(.dvw__pdf)
   · 04 : 기준 세 칸의 한 문장(.scope__d) + 수시 6장 외 추가 지원 띠(.xtra)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 히어로 */
.ps-hero__key {
  margin-top: clamp(16px, calc(var(--u) * 1.6), 28px);
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.012em; line-height: 1.4;
  color: #fff; word-break: keep-all;
}
.ps-hero__key .l:last-child { color: var(--red-on-noir); }
.ps-hero__desc { display: grid; gap: clamp(8px, calc(var(--u) * .8), 14px); margin-top: clamp(12px, calc(var(--u) * 1.2), 20px); max-width: min(100%, 50em); }
.ps-hero__desc .ps-hero__lede { margin-top: 0; max-width: none; font-size: var(--fs-md); line-height: 1.66; color: #D9D3DB; }
.spec dd .l { display: block; }
@media (max-width: 599px) { .ps-hero__key { font-size: clamp(17px, 4.9vw, 21px); } }   /* 폰 : 두 구절이 각각 한 줄에 들도록 */

/* ── 01 꼬리표 : 수시는 붉은색, 정시는 흰색 */
.work__k { display: flex; align-items: center; gap: .5em; margin-bottom: .55em; font-size: max(12px, var(--fs-2xs)); font-weight: 800; letter-spacing: 0; color: var(--on-noir-2); font-variant-numeric: tabular-nums; }
.work__k b { padding: .22em .7em; border-radius: var(--r-pill); background: rgba(255, 122, 132, .14); box-shadow: inset 0 0 0 1px rgba(255, 122, 132, .32); font-weight: 800; color: var(--red-on-noir); }
.work__k--b b { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; }
.works--tag .work__d { margin-bottom: 0; }

/* ── 02 수시 · 정시 탭 */
.stab__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: clamp(22px, calc(var(--u) * 2.6), 44px); }
.stab__tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08), 0 14px 30px -22px rgba(60, 20, 20, .4); }
.stab__tab {
  min-height: 50px; padding: 0 clamp(20px, calc(var(--u) * 2), 32px); border: 0; border-radius: var(--r-pill);
  background: transparent; font: inherit; font-size: var(--fs-md); font-weight: 800; color: var(--ink-3); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.stab__tab:hover { color: var(--ink); }
.stab__tab.is-on { background: var(--ink); color: #fff; }
.stab__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.stab__p { display: none; }
.stab__p.is-on { display: block; }
.stab__sum { margin-bottom: clamp(26px, calc(var(--u) * 3), 50px); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.006em; color: var(--ink); word-break: keep-all; }
.stab__sum i { position: relative; display: inline-block; vertical-align: middle; width: 28px; height: 1.5px; margin: -.1em 8px 0 12px; background: var(--red); }
.stab__sum i::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1.5px solid var(--red); border-right: 1.5px solid var(--red); transform: rotate(45deg); }
.stab__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(30px, calc(var(--u) * 3.4), 56px); }
.stab__step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px clamp(18px, calc(var(--u) * 2.6), 44px) 0 0; border-top: 1.5px solid var(--line-l); }
.stab__step::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px var(--paper); }
.ps .stab__t { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.008em; line-height: 1.32; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.stab__d { max-width: 26em; font-size: clamp(14.5px, calc(var(--u) * 1.02), 17px); line-height: 1.68; color: var(--ink-2); word-break: keep-all; text-wrap: pretty; }
/* 탭을 바꾸면 단계가 왼쪽부터 차례로 선다(한 번) */
html.js .stab__p.is-on .stab__step { animation: stabIn .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes stabIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .stab__p.is-on .stab__step { animation: none; } .stab__tab { transition: none; } }
@media (min-width: 600px) and (max-width: 1023px) { .stab__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .stab__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .stab__tab { padding-inline: 10px; }
  .stab__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .stab__step { padding: 0 0 26px 28px; border-top: 0; border-left: 1.5px solid var(--line-l); }
  .stab__step:last-child { padding-bottom: 4px; border-left-color: transparent; }
  .stab__step::before { left: -7px; top: 6px; }
}

/* ── 03 자료 다섯 장 : 넓은 화면은 위 세 장 · 아래 두 장(여섯 칸 격자), 중간 폭은 두 칸 + 마지막 한 장 전체 폭 */
@media (min-width: 1200px) {
  .dsh--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dsh--5 .dcard { grid-column: span 2; }
  .dsh--5 .dcard:nth-child(n + 4) { grid-column: span 3; }
  .dsh--5 .dcard:nth-child(n + 4) .dcard__pv { aspect-ratio: 16 / 8; }
}
@media (min-width: 600px) and (max-width: 1199px) { .dsh--5 .dcard:last-child { grid-column: 1 / -1; } .dsh--5 .dcard:last-child .dcard__pv { aspect-ratio: 16 / 6; } }
.dcard__d { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(23, 21, 26, .08); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); word-break: keep-all; text-wrap: pretty; }
.dvw__pdf { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.dvw__pdf[hidden], .dvw__open[hidden], .dvw__d[hidden], .dvw__l[hidden] { display: none; }
.dvw__d { font-size: var(--fs-md); font-weight: 600; line-height: 1.66; color: var(--ink); word-break: keep-all; }
.dvw__open { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .16); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.dvw__open:hover { background: #FBEFEC; color: var(--red); }
.dvw__open:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── 04 기준 세 칸 + 추가 지원 띠 */
.scope__d { margin-top: clamp(12px, calc(var(--u) * 1.2), 18px); padding-top: clamp(12px, calc(var(--u) * 1.2), 18px); border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-md); line-height: 1.66; color: var(--on-noir); word-break: keep-all; text-wrap: pretty; }
.ps-rule[data-tone="light"] .scope__d { color: var(--ink-2); border-top-color: rgba(23, 21, 26, .08); }
.xtra {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px clamp(28px, calc(var(--u) * 4), 72px); align-items: center;
  margin-top: clamp(14px, calc(var(--u) * 1.5), 26px); padding: clamp(26px, calc(var(--u) * 3), 48px) clamp(24px, calc(var(--u) * 3.2), 52px);
  border-radius: var(--r-lg); background: #1B191E; color: #fff;
}
.xtra::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(closest-side, rgba(240, 48, 64, .22), rgba(240, 48, 64, 0)); pointer-events: none; }
.xtra > * { position: relative; }
.xtra__tag { display: inline-block; padding: .3em .8em; border-radius: var(--r-pill); background: rgba(255, 122, 132, .14); box-shadow: inset 0 0 0 1px rgba(255, 122, 132, .32); font-size: max(12px, var(--fs-2xs)); font-weight: 800; color: var(--red-on-noir); }
.ps .xtra__h { margin-top: 12px; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: #fff; word-break: keep-all; }
.xtra__d { font-size: var(--fs-md); font-weight: 600; line-height: 1.7; color: #fff; word-break: keep-all; text-wrap: pretty; }
.xtra__s { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-sm); line-height: 1.6; color: var(--on-noir-2); word-break: keep-all; }
@media (max-width: 899px) { .xtra { grid-template-columns: minmax(0, 1fr); } }

/* ── 면접 연계 띠 : 글이 길어 글 칸을 넓게, 버튼은 오른쪽 끝 */
.lnk__i--wide .lnk__tx { flex: 1 1 520px; }
.lnk__i--wide .lnk__p { max-width: 52em; }
.lnk__p.is-stack .l { display: block; }
@media (max-width: 1199px) { .lnk__p.is-stack .l { display: inline; } }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-22 2차 : 대입 컨설팅 상세 정리
   · 수시는 빨강, 정시는 파랑으로 나눈다(합격 실적 페이지 '정시 합격' 꼬리표와 같은 파랑 #35508F, 어두운 면은 밝힌 #9DB4E8)
   · 히어로 요약 : 수시 · 정시 칸은 '분석 방법(옅게) → 결과(굵게)' 두 줄, 칸 너비를 글 양에 맞춘다
   · 01 아이콘 : 그림 안 여백(아이콘 폭의 약 12%)만큼만 왼쪽으로 빼서 그림 왼쪽 끝을 제목 · 설명 글의 시작선에 맞춘다
   · 02 진행 과정 : 세로 타임라인 판(.tl, 3차 — 화살표 띠는 반려). 번호 대신 단계 성격(상담 · 분석 · 비교 · 설계 · 확정), 마지막 단계만 진한 색
   · 03 자료 안내 : 다섯 장 + 여섯째 칸(.dnote) — 모두 같은 폭(세 칸씩 두 줄)
   · 04 기준 카드 : 첫 장만 붉은 윗선이던 것을 없애고 세 장을 똑같이, 제목 줄 높이를 맞춰 구분선이 한 줄에 놓인다
   ══════════════════════════════════════════════════════════════════════════ */
:root { --jeong: #35508F; --jeong-on-noir: #9DB4E8; }

/* ── 히어로 요약 */
@media (min-width: 768px) {
  .spec--cs { grid-template-columns: minmax(0, .62fr) minmax(0, 1.18fr) minmax(0, 1.18fr) minmax(0, 1fr); }
}
.spec--cs dt { display: flex; align-items: center; gap: 7px; }
.spec--cs .is-su dt { color: var(--red-on-noir); }
.spec--cs .is-jeong dt { color: var(--jeong-on-noir); }
.spec--cs .is-su dt::before, .spec--cs .is-jeong dt::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.spec--cs dd { display: grid; gap: 3px; }
.spec--cs .spec__m { font-size: var(--fs-sm); font-weight: 600; color: var(--on-noir-2); }
.spec--cs .spec__m + .l { display: flex; align-items: baseline; gap: 7px; }
.spec--cs .spec__m + .l::before { content: "→"; flex: none; font-weight: 700; }
.spec--cs .is-su .spec__m + .l::before { color: var(--red-on-noir); }
.spec--cs .is-jeong .spec__m + .l::before { color: var(--jeong-on-noir); }

/* ── 01 아이콘 줄 맞춤 · 정시 꼬리표 파랑 */
.ps-what .works--tag .work__icw { --icw: clamp(64px, calc(var(--u) * 5.6), 88px); width: var(--icw); margin-left: calc(var(--icw) * -.12); }
@media (max-width: 599px) { .ps-what .works--tag .work__icw { --icw: 44px; margin: 0 0 0 calc(var(--icw) * -.12); } }
.work__k--b b { background: rgba(157, 180, 232, .14); box-shadow: inset 0 0 0 1px rgba(157, 180, 232, .4); color: var(--jeong-on-noir); }

/* ── 02 진행 과정 */
.stab__tab#cs-t1.is-on { background: var(--jeong); }
.stab__sum { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(18px, calc(var(--u) * 2), 30px); font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.stab__sum::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 2px; background: var(--red); }
.stab__p--jeong .stab__sum::before { background: var(--jeong); }

/* ── 03 자료 안내 : 여섯 칸 같은 폭 */
.dnote { display: none; }
@media (min-width: 600px) {
  .dsh--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsh--5 .dcard, .dsh--5 .dcard:nth-child(n + 4), .dsh--5 .dcard:last-child { grid-column: auto; }
  .dsh--5 .dcard:nth-child(n + 4) .dcard__pv, .dsh--5 .dcard:last-child .dcard__pv { aspect-ratio: 5 / 4; }
  .dnote {
    display: flex; flex-direction: column; justify-content: center; gap: 12px;
    padding: clamp(24px, calc(var(--u) * 2.6), 40px);
    border-radius: var(--r-lg); background: rgba(255, 255, 255, .45);
    box-shadow: inset 0 0 0 1.5px rgba(208, 2, 27, .14);
  }
  .dnote__h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
  .dnote__h::before { content: "i"; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red); font-size: 13px; font-weight: 800; font-style: italic; color: #fff; }
  .dnote__d { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2); word-break: keep-all; text-wrap: pretty; }
  .ps-note--docs { display: none; }
}
@media (min-width: 1200px) { .dsh--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dcard__kind--jeong { background: #EDF1F9; color: var(--jeong); }

/* ── 04 기준 카드 통일 */
.ps-rule[data-tone="light"] .scope--crit .scope__col,
.ps-rule[data-tone="light"] .scope--crit .scope__col:first-child {
  background: #fff; border-color: rgba(23, 21, 26, .07);
  box-shadow: 0 1px 2px rgba(60, 20, 20, .04), 0 22px 40px -32px rgba(60, 20, 20, .32);
}
.ps-rule .scope--crit .scope__tag { display: inline-flex; align-self: start; justify-self: start; margin-bottom: 14px; padding: .28em .75em; border-radius: var(--r-pill); background: #FBEFEC; font-size: max(12px, var(--fs-2xs)); }
@media (min-width: 900px) {
  .scope--crit { grid-template-rows: auto auto 1fr; }
  .scope--crit .scope__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .scope--crit .scope__h { align-self: start; }
}

/* ── 04 추가 지원 강조 띠 : 왼쪽 제목 묶음 | 세로선 | 오른쪽 설명, 두 묶음을 세로 가운데에 맞춘다 */
.xtra { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: 0; }
.xtra__hd { padding-right: clamp(24px, calc(var(--u) * 3.4), 60px); }
.ps .xtra__h { margin-top: 14px; }
.xtra__bd { padding-left: clamp(24px, calc(var(--u) * 3.4), 60px); border-left: 1px solid rgba(255, 255, 255, .14); }
.xtra__d { max-width: 34em; }
.xtra__s { margin-top: 12px; padding-top: 0; border-top: 0; }
@media (max-width: 899px) {
  .xtra { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .xtra__hd { padding-right: 0; }
  .xtra__bd { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* ── 자료 예시 창 : PDF 는 창을 넓혀 문서를 폭에 맞춰 보여 주고(스크롤로 읽기), 설명 · 링크는 아래 한 줄 */
.dvw.is-pdf { width: min(1180px, calc(100vw - 32px)); height: calc(100svh - 48px); max-height: none; }
.dvw.is-pdf .dvw__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.dvw.is-pdf .dvw__fig { aspect-ratio: auto; width: 100%; max-width: none; height: 100%; min-height: 0; background: #525659; }
.dvw.is-pdf .dvw__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dvw.is-pdf .dvw__open { margin-top: 0; }
.dvw.is-pdf .dvw__note { margin-top: 0; flex: 1 1 320px; }
.dvw.is-pdf .dvw__d { flex: 1 1 100%; }
.stab__tab#cs-t0.is-on { background: var(--red); }
html.js .dsh.is-ready .dnote { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease) .55s, transform .9s var(--ease) .55s; }
html.js .dsh.is-in .dnote { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .dsh.is-ready .dnote { opacity: 1; transform: none; transition: none; } }
.dvw__ph[hidden] { display: none; }   /* .dvw__ph { display:grid } 가 hidden 을 덮어 PDF 위에 빈 칸 안내가 겹쳐 보였다 */


/* ══ 02 진행 과정 (2026-10-22 4차) : 세로 타임라인 판 — 줄 맞춤 정리
   한 줄 = [선 · 점] [성격 꼬리표] [단계 이름] [설명]. 칸 너비를 고정해 꼬리표 길이가 달라도 단계 이름 · 설명의 시작선이 같다.
   점 · 꼬리표 · 이름 · 설명 첫 줄은 모두 같은 높이의 줄(--lh 26px)의 가운데에 놓인다.
   줄 구분선은 선 · 점 칸을 지나지 않고 꼬리표 칸부터. 마지막 단계(결과)는 판 안쪽 폭 그대로 옅은 띠 + 채운 점 + 결과 자료 링크.
   번호는 쓰지 않는다(요청서 : 항목 수가 원서 지원 횟수로 읽히지 않게). 수시 빨강 · 정시 파랑(--ac) ══ */
.ps-steps .stab__p.is-on {
  --ac: var(--red); --ac-soft: #FBEFEC; --ac-line: #EFC2C6;
  --px: clamp(22px, calc(var(--u) * 3), 52px);
  padding: clamp(24px, calc(var(--u) * 2.4), 36px) var(--px) var(--px);
  border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 1px 2px rgba(60, 20, 20, .05), 0 30px 60px -44px rgba(60, 20, 20, .45);
}
.ps-steps .stab__p--jeong.is-on { --ac: var(--jeong); --ac-soft: #EEF2FA; --ac-line: #C3D0EC; }

/* 판 머리 : 제목 | 흐름 지도 */
.ps-steps .stab__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); font-size: inherit; }
.ps-steps .stab__sum::before { content: none; }
.ps-steps .stab__sum-t { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; color: var(--ink); }
.ps-steps .stab__sum-t::before { content: ""; flex: none; width: 4px; height: 1.05em; border-radius: 2px; background: var(--ac); }
.ps-steps .tl__map { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ps-steps .tl__map li { display: flex; align-items: center; gap: 8px; font-size: max(12px, var(--fs-2xs)); font-weight: 700; line-height: 1; color: var(--ink-3); }
.ps-steps .tl__map li + li::before { content: ""; width: 14px; height: 1.5px; border-radius: 1px; background: var(--ac-line); }
.ps-steps .tl__map li span { display: inline-flex; align-items: center; height: 24px; }
.ps-steps .tl__map li:last-child span { padding: 0 10px; border-radius: var(--r-pill); background: var(--ac); color: #fff; }

/* 목록 */
.ps-steps .tl { --rail: 24px; --node: 14px; --lh: 26px; --gap: clamp(14px, calc(var(--u) * 1.6), 24px); --phw: 88px; --tw: clamp(210px, 22vw, 300px); --pad: clamp(18px, calc(var(--u) * 1.8), 24px);
  display: block; margin: 0; padding: 0; list-style: none; }
.ps-steps .tl .stab__step {
  position: relative; display: grid; align-items: start;
  grid-template-columns: var(--rail) var(--phw) var(--tw) minmax(0, 1fr); column-gap: var(--gap); row-gap: 0;
  padding: var(--pad) 0; border: 0; border-radius: 0; background: none;
}
/* 구분선 : 꼬리표 칸부터 */
.ps-steps .tl .stab__step + .stab__step {
  background: linear-gradient(rgba(23, 21, 26, .08), rgba(23, 21, 26, .08)) no-repeat right top / calc(100% - var(--rail) - var(--gap)) 1px;
}
/* 이어진 선 : 첫 점 위 · 마지막 점 아래로 나가지 않는다 */
.ps-steps .tl .stab__step::before {
  content: ""; position: absolute; left: calc(var(--rail) / 2 - 1px); top: 0; bottom: 0;
  width: 2px; height: auto; border-radius: 0; background: var(--ac-line); box-shadow: none; transform: none;
}
.ps-steps .tl .stab__step:first-child::before { top: calc(var(--pad) + var(--lh) / 2); }
.ps-steps .tl .stab__step:last-child::before { bottom: auto; height: calc(var(--pad) + var(--lh) / 2); }
.ps-steps .tl .stab__step:only-child::before { content: none; }
/* 점 */
.ps-steps .tl .stab__step::after {
  content: ""; position: absolute; left: calc(var(--rail) / 2 - var(--node) / 2); top: calc(var(--pad) + var(--lh) / 2 - var(--node) / 2);
  width: var(--node); height: var(--node); box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--ac);
}
/* 칸 */
.ps-steps .tl .tl__hd { display: contents; }
.ps-steps .tl .tl__ph {
  grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; height: var(--lh); padding: 0 10px;
  border-radius: var(--r-pill); background: var(--ac-soft); font-size: max(12px, var(--fs-2xs)); font-weight: 800; line-height: 1; white-space: nowrap; color: var(--ac);
}
.ps-steps .tl .stab__t { grid-column: 3; grid-row: 1; margin: 0; font-size: clamp(17px, calc(var(--u) * 1.25), 20px); font-weight: 800; letter-spacing: -.01em; line-height: var(--lh); color: var(--ink); text-wrap: balance; }
.ps-steps .tl .stab__d { grid-column: 4; grid-row: 1; align-self: start; max-width: 38em; margin: 0; padding: 0;
  font-size: clamp(14.5px, calc(var(--u) * 1.02), 16px); line-height: 1.66; color: var(--ink-2); text-wrap: pretty; }
/* 설명 첫 줄을 이름 줄 가운데에 : (줄 높이 26 − 설명 한 줄 높이) / 2 */
.ps-steps .tl .stab__d { margin-top: calc((var(--lh) - 1.66em) / 2); }
/* 마지막 단계(결과) */
.ps-steps .tl .stab__step:last-child { padding-right: var(--gap); border-radius: 14px; background: var(--ac-soft); }
.ps-steps .tl .stab__step:last-child + * { margin: 0; }
.ps-steps .tl .stab__step:last-child::after { background: var(--ac); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--ac-line); }
.ps-steps .tl .stab__step:last-child .tl__ph { background: var(--ac); color: #fff; }
.ps-steps .tl .tl__out {
  grid-column: 4; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px; min-height: 40px; padding: 0 16px 0 6px; border-radius: var(--r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--ac-line); font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}
.ps-steps .tl .tl__out > span:first-child { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--ac-soft); font-size: max(12px, var(--fs-2xs)); font-weight: 800; color: var(--ac); }
.ps-steps .tl .tl__out::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .5; }
.ps-steps .tl .tl__out:hover { box-shadow: inset 0 0 0 1.5px var(--ac); }
.ps-steps .tl .tl__out:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
/* 줄에 올리면 옅은 바탕 (글자색은 그대로) */
@media (hover: hover) and (min-width: 900px) {
  .ps-steps .tl .stab__step:not(:last-child):hover { background-color: #FCF9F8; }
}

/* 태블릿 : [선 · 점] [꼬리표] [이름] / 설명은 이름 아래 */
@media (min-width: 600px) and (max-width: 899px) {
  .ps-steps .tl { --tw: 1fr; }
  .ps-steps .tl .stab__step { grid-template-columns: var(--rail) var(--phw) minmax(0, 1fr); row-gap: 6px; }
  .ps-steps .tl .stab__d { grid-column: 3; grid-row: 2; margin-top: 0; }
  .ps-steps .tl .tl__out { grid-column: 3; grid-row: 3; margin-top: 8px; }
}
/* 폰 : [선 · 점] [꼬리표 / 이름 / 설명] */
@media (max-width: 599px) {
  .ps-steps .stab__p.is-on { --px: 16px; padding-top: 20px; }
  .ps-steps .tl__map { display: none; }
  .ps-steps .tl { --rail: 20px; --node: 12px; --lh: 24px; --gap: 12px; --pad: 16px; }
  .ps-steps .tl .stab__step { grid-template-columns: var(--rail) minmax(0, 1fr); row-gap: 6px; }
  .ps-steps .tl .tl__ph { grid-column: 2; grid-row: 1; }
  .ps-steps .tl .stab__t { grid-column: 2; grid-row: 2; font-size: clamp(16px, 4.4vw, 17.5px); line-height: 1.4; }
  .ps-steps .tl .stab__d { grid-column: 2; grid-row: 3; margin-top: 0; font-size: var(--fs-sm); }
  .ps-steps .tl .tl__out { grid-column: 2; grid-row: 4; margin-top: 6px; }
  .ps-steps .tl .stab__step:last-child { margin-inline: -6px; padding-inline: 6px; }
  .ps-steps .tl .stab__step:last-child::before { left: calc(6px + var(--rail) / 2 - 1px); }
  .ps-steps .tl .stab__step:last-child::after { left: calc(6px + var(--rail) / 2 - var(--node) / 2); }
}
/* 4차 다듬기 : 모든 줄에 같은 안쪽 여백(--in) → 마지막 띠 안에서도 선 · 점이 띠 가장자리에 붙지 않는다 */
.ps-steps .tl { --in: 14px; }
.ps-steps .tl .stab__step { padding-inline: var(--in); }
.ps-steps .tl .stab__step + .stab__step { background-size: calc(100% - var(--in) - var(--rail) - var(--gap)) 1px; }
.ps-steps .tl .stab__step::before { left: calc(var(--in) + var(--rail) / 2 - 1px); }
.ps-steps .tl .stab__step::after { left: calc(var(--in) + var(--rail) / 2 - var(--node) / 2); }
.ps-steps .tl .stab__step:last-child { padding-right: calc(var(--in) + var(--gap)); }
.ps-steps .tl .tl__out b { font-weight: 700; }
@media (max-width: 599px) {
  .ps-steps .tl { --in: 8px; }
  .ps-steps .tl .stab__step:last-child { margin-inline: 0; padding-inline: var(--in); }
  .ps-steps .tl .stab__step:last-child::before { left: calc(var(--in) + var(--rail) / 2 - 1px); }
  .ps-steps .tl .stab__step:last-child::after { left: calc(var(--in) + var(--rail) / 2 - var(--node) / 2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-22 : 합격 후기 — 카톡 원본 카드 (퍼블리싱 대치플랜_1022 results.html '합격 후기' 카드 그대로)
   관리자 합격 후기(caseManage)에서 올릴 곳을 '카톡 원본'으로 등록한 글이 학년도마다 위쪽 카드로 나온다(results.jsp).
   카드 안에 [글 | 캡처]를 나란히 : 합격 표시 · 카톡 받은 날 · 학교 + 학과 · 학생이 보낸 말(굵게 보일 말) · '내용 원문 보기' | 캡처(위쪽만, 캡처 원문 · 예시 대화 표시).
   1200 이상 = 2칸 / 600~1199 = 같은 카드 한 칸 / 폰 = 가로 넘김 카드. 캡처를 누르면 .ktvd 창에 전체(js/program.js).
   캡처가 없는 글은 글만 한 칸(.ktv--noshot). 담당 선생님 기록은 아래 '담당 선생님 기록' 목록 그대로.
   ══════════════════════════════════════════════════════════════════════════ */
.ktv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, calc(var(--u) * 1.5), 22px); margin-bottom: clamp(30px, calc(var(--u) * 3.4), 56px); }
.ktv {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(176px, 21vw, 200px);
  gap: clamp(18px, calc(var(--u) * 1.6), 24px); align-items: stretch;
  padding: clamp(20px, calc(var(--u) * 1.8), 26px);
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(60, 20, 20, .05), 0 24px 44px -34px rgba(60, 20, 20, .42);
}
.ktv__tx { position: relative; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1200px) {
  .ktv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ktv { grid-template-columns: minmax(0, 1fr) 180px; }
}
.ktv__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
/* 학교 · 학과 : 이 줄이 첫눈에 읽혀야 한다. 학교는 먹색 굵게, 학과는 같은 크기 붉은색 */
.ps .ktv__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px .42em;
  margin-top: clamp(10px, calc(var(--u) * 1), 14px);
  font-size: clamp(21px, calc(var(--u) * 1.6), 25px); font-weight: 900; letter-spacing: -.016em; line-height: 1.26;
  color: var(--ink); word-break: keep-all;
}
.ktv__h b { font-weight: 900; }
.ktv__h span { font-weight: 800; color: var(--red); }
.ktv__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: max(12px, var(--fs-2xs)); font-weight: 800; }
.ktv__badge--first { background: #FBEFEC; color: var(--red); }
.ktv__badge--add { background: #F2EFEA; color: var(--ink-2); }
.ktv__badge--jeong { background: #EDF1F8; color: #35508F; }
.ktv__dt { font-size: max(12px, var(--fs-2xs)); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ktv__q { margin: clamp(12px, calc(var(--u) * 1.2), 16px) 0 16px; padding-left: clamp(14px, calc(var(--u) * 1.2), 18px); border-left: 3px solid #EADFDB; }
.ktv__q p { font-size: clamp(15.5px, calc(var(--u) * 1.08), 17px); font-weight: 600; letter-spacing: -.008em; line-height: 1.62; color: var(--ink-2); word-break: keep-all; text-wrap: balance; }
.ktv__q b { font-weight: 800; color: var(--ink); background: linear-gradient(transparent 60%, #FFDDE1 60%); }
.ktv__src {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  align-self: flex-start; margin-top: auto; padding: 0 8px 0 16px;
  border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 26, .16); background: transparent;
  font: inherit; font-size: clamp(13.5px, calc(var(--u) * .96), 15px); font-weight: 700; color: var(--ink); cursor: pointer;
  transition: background .28s var(--ease), box-shadow .28s var(--ease), color .28s var(--ease);
}
.ktv__src i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(23, 21, 26, .07); font-style: normal; font-size: 13px; transition: background .28s var(--ease), color .28s var(--ease); }
@media (hover: hover) {
  .ktv__src:hover { background: #FBEFEC; box-shadow: inset 0 0 0 1.5px rgba(215, 16, 42, .32); color: var(--red); }
  .ktv__src:hover i { background: var(--red); color: #fff; }
}
.ktv__src:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* 캡처 : 위쪽만 보이게 잘라 두고, 누르면 전체 */
.ktv__shot {
  position: relative; display: block; width: 100%; height: 100%; min-height: 214px; padding: 0; border: 0; overflow: hidden;
  border-radius: 12px; background: #B2C7DA; cursor: zoom-in;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ktv__shot img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.ktv__shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(rgba(178, 199, 218, 0), rgba(178, 199, 218, .96)); pointer-events: none; }
@media (hover: hover) { .ktv__shot:hover { box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08), 0 18px 34px -24px rgba(60, 20, 20, .45); } .ktv__shot:hover img { transform: translateY(-6px); } }
.ktv__shot img { transition: transform .5s var(--ease); }
.ktv__tag { position: absolute; z-index: 1; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(23, 21, 26, .62); font-size: 12px; font-weight: 700; color: #fff; }
.ktv__tag--real { background: rgba(215, 16, 42, .9); }
@media (prefers-reduced-motion: reduce) { .ktv__shot, .ktv__shot img, .ktv__src, .ktv__src i { transition: none; } }
/* 거르기(고입 · 대입)는 카드에 hidden 을 붙인다 : 위 display 가 hidden 을 덮지 않게 (.rec[hidden] 과 같다) */
.ktv[hidden] { display: none; }
/* 캡처가 없는 글 : 글만 한 칸 */
.ktv--noshot { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .ktv--noshot { grid-template-columns: minmax(0, 1fr); } }

/* 폰 : 아래 사례 카드와 같은 가로 넘김. 캡처는 카드 아래쪽에 띠로 */
@media (max-width: 599px) {
  .ktv-list {
    display: flex; gap: 12px; margin-inline: calc(var(--col) * -1); margin-bottom: clamp(22px, 6vw, 30px);
    padding: 4px var(--col) 14px; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--col); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ktv-list::-webkit-scrollbar { display: none; }
  .ktv {
    flex: none; width: 84vw; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 16px;
    padding: 20px 18px 18px;
  }
  .ktv__tx { flex: 1; }
  .ps .ktv__h { font-size: clamp(22px, 6.2vw, 25px); }
  .ktv__q p { font-size: clamp(16px, 4.4vw, 17.5px); }
  .ktv__shot { flex: none; height: auto; min-height: 0; aspect-ratio: 36 / 22; }
  .ktv[hidden] { display: none; }
}

/* 고입만 골라 카톡 원본이 하나도 안 남으면 묶음째 접는다(빈 줄 · 여백이 남지 않게) */
.pcs-sec .ktv-list:not(:has(.ktv:not([hidden]))) { display: none; }

/* 캡처 전체 보기 창 */
.ktvd { width: min(430px, calc(100vw - 28px)); max-height: calc(100svh - 52px); padding: 0; border: 0; border-radius: 20px; background: #B2C7DA; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); overflow: hidden; }
.ktvd[open] { display: flex; flex-direction: column; animation: ktdIn .45s cubic-bezier(.2, .8, .2, 1); }
.ktvd::backdrop { background: rgba(10, 9, 12, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ktvd__head { display: flex; align-items: center; gap: 10px; padding: 13px 12px 13px 18px; background: #fff; }
.ktvd__t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ktvd__t b { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.ktvd__t span { font-size: 12.5px; color: var(--ink-3); }
.ktvd__x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F2EFEA; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.ktvd__x:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ktvd__body { overflow: auto; -webkit-overflow-scrolling: touch; }
.ktvd__body img { display: block; width: 100%; height: auto; }
.ktvd__foot { padding: 10px 18px 13px; background: #fff; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .ktvd[open] { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-26 : 학생부 종합 컨설팅 개편 (일곱 면 → 여섯 면, 학원 수정 요청)
   · 히어로 : 제목 바로 아래 부제 두 줄(.ps-hero__sub, 둘째 줄 강조색) · 요약 네 칸 너비를 글 양에 맞춤(.spec--lr)
   · 02 진행 과정 : 단계 트랙 아래 '과제 접수 및 소통 안내' 상자(.anote)
   · 03 실제 관리 사례 : 예시 창 위 단계 버튼(.dvw__steps — 주제 선정 → 진행 과정 → 최종 검토 자료)
   · 04 학년별 · 과목별 관리 : 학년 카드 세 장(.scope--crit) + 꼬리표 없는 강조 띠(.xtra) + 선택과목 안내(.ps-note)
   · 05 대입 컨설팅 연계 : 이름 · 설명 · 버튼만 있는 카드 두 장(.lnk--pair). 화살표 · 학년 축 같은 '이어지는 과정' 표시는 두지 않는다
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 히어로 */
.ps-hero__sub {
  margin-top: clamp(12px, calc(var(--u) * 1.2), 22px);
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.012em; line-height: 1.38;
  color: #fff; word-break: keep-all;
}
.ps-hero__sub .l { display: block; }
.ps-hero__sub em { font-style: normal; color: var(--red-on-noir); }
.ps-hero__sub + .ps-hero__lede { margin-top: clamp(12px, calc(var(--u) * 1.1), 20px); }
@media (min-width: 768px) {
  .spec--lr { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
}

/* ── 02 아래 : 과제 접수 및 소통 안내 */
.anote {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 16px clamp(24px, calc(var(--u) * 3), 56px);
  margin-top: clamp(26px, calc(var(--u) * 2.8), 46px);
  padding: clamp(22px, calc(var(--u) * 2.4), 34px) clamp(22px, calc(var(--u) * 2.6), 40px);
  border-radius: 20px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 1px 2px rgba(60, 20, 20, .04), 0 22px 40px -32px rgba(60, 20, 20, .32);
}
.ps .anote__h { display: flex; align-items: center; gap: 10px; align-self: start; font-size: var(--fs-lg); font-weight: 800; line-height: 1.4; color: var(--ink); word-break: keep-all; }
.anote__h::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 2px; background: var(--red); }
.anote__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(20px, calc(var(--u) * 2.4), 40px); }
.anote__l li { position: relative; padding-left: 1em; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); word-break: keep-all; text-wrap: pretty; }
.anote__l li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
@media (max-width: 1023px) { .anote { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .anote__l { grid-template-columns: minmax(0, 1fr); } }

/* ── 03 예시 창 단계 버튼 */
.dvw__steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; }
.dvw__steps[hidden] { display: none; }
.dvw__st {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 7px; border: 0; border-radius: 999px;
  background: #F4EFEE; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.dvw__st b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.dvw__st + .dvw__st::before { content: ""; position: absolute; left: -22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B9B0B4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h9M8 3.5 11.5 7 8 10.5'/%3E%3C/svg%3E"); }
.dvw__st.is-on { background: var(--ink); color: #fff; }
.dvw__st.is-on b { background: var(--red); color: #fff; }
@media (hover: hover) { .dvw__st:not(.is-on):hover { background: #EBE3E1; } }
.dvw__st:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* 폰 : 세 단계를 같은 폭 세 칸으로(줄바꿈되면 화살표가 줄 머리에 떨어진다) */
@media (max-width: 599px) {
  .dvw__steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
  .dvw__steps[hidden] { display: none; }
  .dvw__st { flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px; border-radius: 14px; font-size: 13px; line-height: 1.3; text-align: center; word-break: keep-all; }
  .dvw__st b { width: 22px; height: 22px; }
  .dvw__st + .dvw__st::before { content: none; }
}

/* ── 04 : 꼬리표 없는 강조 띠 · 아래 안내 */
.xtra__hd > .xtra__h:first-child { margin-top: 0; }
.ps-rule .ps-note, .ps-next .ps-note { margin-top: clamp(18px, calc(var(--u) * 2), 30px); }

/* ── 05 : 연계 카드 두 장 */
.lnk--pair .lnk__h + .lnk__p { margin-top: 10px; }

/* ══ 2026-10-26 2차 : 학생부 종합 컨설팅 01 · 02 다듬기 ══
   · 01 카드 : 아이콘마다 그림 실제 영역(96칸 기준 왼쪽 여백 --l · 아래 여백 --b)만큼 당겨, 그림 왼끝이 글 시작선에, 그림 아랫변이 한 줄에 놓인다.
     제목은 넓은 화면(네 칸)에서 뜻 단위 두 줄로 맞추고, 설명은 문장마다 줄을 나눠 칸 폭을 채운다(balance 대신 pretty)
   · 02 : '과제 접수 및 소통 안내'까지 들어가면 한 화면보다 길어진다 → 높이를 한 화면에 묶지 않고 위에서부터 쌓는다.
     위 여백은 다른 챕터와 같은 값(헤더 + 챕터 레일 아래), 아래가 잘리지 않는다 */
.ps-what .works--lr .work__icw {
  --icw: clamp(64px, calc(var(--u) * 5.6), 88px);
  width: var(--icw); align-self: flex-start;
  margin: 0 0 calc(var(--icw) * var(--b, .1) * -1) calc(var(--icw) * var(--l, .1) * -1);
}
@media (min-width: 1200px) { .ps-what .works--lr .work__icw { align-self: end; } }   /* 네 칸(subgrid) : 그림 아랫변을 한 줄에 */
.ps-what .works--lr .work__t { margin-top: clamp(16px, calc(var(--u) * 1.5), 24px); }
.ps-what .works--lr .work__t .l { display: inline; }
@media (min-width: 1200px) { .ps-what .works--lr .work__t .l { display: block; } }
.ps-what .works--lr .work__d, .track--lr .track__d { text-wrap: pretty; max-width: none; }
.ps-what .works--lr .work__d .l + .l { margin-top: .15em; }
@media (max-width: 599px) { .ps-what .works--lr .work__icw { --icw: 52px; } }

.ps-steps--note.has-pin-track { height: auto; min-height: 100svh; justify-content: flex-start; padding-bottom: clamp(64px, calc(var(--u) * 6), 110px); }

/* ══ 2026-10-26 3차 : 학생부 종합 컨설팅 02 · 04 · 05 다듬기 ══
   · 02 : 단계 제목 글자 상한을 낮춰(칸 폭은 1680 이상에서 370px 에 멈춘다) 08 '학기별 기록 검토·다음 학기 설계'까지 모든 폭에서 한 줄.
          설명은 한 덩어리 말(제출 조건 · 과제 형식 · 다음 학기 …)이 줄 끝에서 갈라지지 않게 묶었다(HTML .nw)
   · 04 강조 띠(.xtra--sel) : 아래 줄에 '선택과목'을 같은 두 열(제목 열 | 설명 열)로 넣어, 반쯤에서 끝나던 안내 띠를 없앴다
   · 04 → 05 : 같은 밝은 면이 이어져 250px 이 비어 보인다 → 04 아래 여백만 줄인다(05 위 여백은 챕터 레일 아래 자리라 둔다)
   · 04 학년 판 · 05 연계 카드 · 신청 안내는 5차(아래)에서 다시 짰다 */

/* ── 02 */
.ps-steps .track--lr .track__t { font-size: clamp(19px, calc(var(--u) * 1.5), 22px); }

/* ── 04 강조 띠 + 선택과목 줄 */
.ps-rule .gcs + .xtra { margin-top: clamp(14px, calc(var(--u) * 1.6), 24px); }
.xtra__ft {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline;
  margin-top: clamp(22px, calc(var(--u) * 2.4), 34px); padding-top: clamp(18px, calc(var(--u) * 2), 26px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.xtra__fk { display: flex; align-items: center; gap: 9px; padding-right: clamp(24px, calc(var(--u) * 3.4), 60px); font-size: var(--fs-md); font-weight: 800; color: var(--red-on-noir); }
.xtra__fk::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xtra__fd { padding-left: clamp(24px, calc(var(--u) * 3.4), 60px); font-size: var(--fs-sm); line-height: 1.7; color: var(--on-noir); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 899px) {
  .xtra__ft { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .xtra__fk { padding-right: 0; }
  .xtra__fd { padding-left: 0; }
}
@media (max-width: 599px) { .xtra--sel .xtra__d .l, .xtra--sel .xtra__fd .l { display: inline; } .xtra--sel .xtra__d, .xtra--sel .xtra__fd { text-wrap: balance; } }

/* ── 04 → 05 */
#p-rule:has(+ #p-next) { padding-bottom: clamp(24px, calc(var(--u) * 2.4), 40px); }

/* 04 강조 띠 : 1199 이하에서는 제목 열이 좁아 '필요한 과목만 / 선택할 수 있습니다.'가 세 줄이 된다 → 위아래로 쌓는다 */
@media (max-width: 1199px) {
  .xtra--sel { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .xtra--sel .xtra__hd { padding-right: 0; }
  .xtra--sel .xtra__bd { padding-left: 0; border-left: 0; }
  .xtra--sel .xtra__ft { grid-template-columns: minmax(0, 1fr); row-gap: 8px; margin-top: 8px; }
  .xtra--sel .xtra__fk { padding-right: 0; }
  .xtra--sel .xtra__fd { padding-left: 0; }
}

/* ── 신청 안내 */
.pgo__note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 16px;
  margin-top: clamp(16px, calc(var(--u) * 1.8), 26px); padding: clamp(18px, calc(var(--u) * 2), 24px) clamp(20px, calc(var(--u) * 2.4), 30px);
  border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .08);
}
.pgo__ni {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #FBEFEC; box-shadow: inset 0 0 0 1px rgba(208, 2, 27, .18);
  font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 700; font-style: italic; line-height: 1; color: var(--red);
}
.pgo__nh { font-size: clamp(15px, calc(var(--u) * 1.04), 17px); font-weight: 800; line-height: 30px; color: var(--ink); }
.pgo__nd { margin-top: 2px; font-size: clamp(14px, calc(var(--u) * .98), 15.5px); line-height: 1.7; color: var(--ink-2); word-break: keep-all; text-wrap: pretty; }
@media (min-width: 1024px) {
  .pgo__note { grid-template-columns: auto minmax(0, 10em) minmax(0, 1fr); align-items: center; }
  .pgo__nb { display: contents; }
  .pgo__nh { line-height: 1.4; }
  .pgo__nd { margin-top: 0; padding-left: clamp(18px, calc(var(--u) * 2.2), 32px); border-left: 1px solid rgba(23, 21, 26, .1); }
}

/* ══ 2026-10-26 7차 : 학생부 종합 컨설팅 04 학년 카드 · 05 연계 카드 (어두운 면 없이) ══
   두 카드를 한 틀로 맞춘다 : 흰 카드 + 옅은 분홍 머리 + 머리 윗변 빨간 선 3px(포인트) + 흰 몸통.
   · 04 학년 카드(.gc) : 머리 = 빨간 학년(크게) · 제목 두 줄, 몸통 = 설명. 세 장 머리 높이를 맞추고(subgrid), 넓은 화면은 카드 사이 다음 학년 화살표.
          600~1099 는 한 줄에 한 장(머리 왼쪽 | 설명 오른쪽), 폰은 위아래
   · 05 연계 카드(.lkc) : 머리 = 대상 꼬리표 · 큰 이름, 몸통 = 설명 + 바닥 빨간 버튼 줄. 카드 전체가 눌린다 */
:root { --card-hd: #FDF1EE; }

/* ── 04 학년 카드 */
.gcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: clamp(16px, calc(var(--u) * 1.8), 28px); margin: 0; padding: 0; list-style: none; }
.gc {
  position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0;
  border-radius: var(--r-lg); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .06), 0 1px 2px rgba(60, 20, 20, .04), 0 22px 40px -32px rgba(60, 20, 20, .32);
}
.gc__hd {
  padding: clamp(24px, calc(var(--u) * 2.6), 36px) clamp(22px, calc(var(--u) * 2.4), 34px) clamp(20px, calc(var(--u) * 2.2), 28px);
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--card-hd);
  box-shadow: inset 0 3px 0 var(--red), inset 0 -1px 0 rgba(208, 2, 27, .1);
}
.ps .gc__k { font-size: clamp(30px, calc(var(--u) * 2.6), 40px); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--red); }
.ps .gc__h { margin-top: clamp(12px, calc(var(--u) * 1.2), 16px); font-size: clamp(19px, calc(var(--u) * 1.55), 24px); font-weight: 800; letter-spacing: -.012em; line-height: 1.34; color: var(--ink); word-break: keep-all; }
.gc__h .l { display: block; }
.gc__d {
  padding: clamp(22px, calc(var(--u) * 2.4), 30px) clamp(22px, calc(var(--u) * 2.4), 34px) clamp(24px, calc(var(--u) * 2.6), 34px);
  font-size: clamp(15px, calc(var(--u) * 1.04), 17px); line-height: 1.72; color: var(--ink-2); word-break: keep-all; text-wrap: balance;
}
.gc__d .l + .l { margin-top: .45em; }
@media (min-width: 1100px) {
  .gc + .gc::before {   /* 다음 학년 화살표 : 카드 사이 틈 가운데, 학년 글자 높이 */
    content: ""; position: absolute; z-index: 2; top: clamp(30px, calc(var(--u) * 2.9), 44px);
    left: calc(clamp(16px, calc(var(--u) * 1.8), 28px) / -2 - 16px); width: 32px; height: 32px; border-radius: 50%;
    background: #fff no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23D0021B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h9M7.5 3.5 11 7l-3.5 3.5'/%3E%3C/svg%3E");
    box-shadow: 0 0 0 1px rgba(208, 2, 27, .16), 0 8px 18px -8px rgba(60, 20, 20, .4);
  }
}
@media (max-width: 1099px) {
  .gcs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .gc { grid-row: auto; grid-template-rows: none; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .gc { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); }
  .gc__hd { border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: inset 3px 0 0 var(--red), inset -1px 0 0 rgba(208, 2, 27, .1); }
  .gc__d { align-self: center; }
}

/* ── 05 연계 카드 */
.lkcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, calc(var(--u) * 1.6), 24px); margin: 0; padding: 0; list-style: none; }
.lkc {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .07), 0 2px 4px rgba(60, 20, 20, .04), 0 24px 44px -34px rgba(60, 20, 20, .36);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lkc__hd {
  padding: clamp(24px, calc(var(--u) * 2.6), 36px) clamp(24px, calc(var(--u) * 2.8), 40px) clamp(20px, calc(var(--u) * 2.2), 28px);
  border-radius: 22px 22px 0 0; background: var(--card-hd);
  box-shadow: inset 0 3px 0 var(--red), inset 0 -1px 0 rgba(208, 2, 27, .1);
}
.lkc__k { display: inline-flex; align-items: center; gap: 8px; padding: .32em .8em; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px rgba(208, 2, 27, .18); font-size: max(12px, var(--fs-2xs)); font-weight: 700; color: var(--red); }
.lkc__k span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-3); }
.lkc__k span::after { content: ""; width: 1px; height: 10px; background: rgba(23, 21, 26, .18); }
.ps .lkc__t { margin-top: clamp(12px, calc(var(--u) * 1.2), 16px); font-size: clamp(25px, calc(var(--u) * 2.2), 34px); font-weight: 800; letter-spacing: -.018em; line-height: 1.2; color: var(--ink); }
.lkc__d {
  margin: 0; padding: clamp(20px, calc(var(--u) * 2.2), 28px) clamp(24px, calc(var(--u) * 2.8), 40px) clamp(24px, calc(var(--u) * 2.6), 32px);
  max-width: 36em; font-size: var(--fs-md); line-height: 1.7; color: var(--ink-2); word-break: keep-all; text-wrap: pretty;
}
.lkc__a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; margin: auto clamp(16px, calc(var(--u) * 1.8), 24px) clamp(16px, calc(var(--u) * 1.8), 24px); padding: 0 9px 0 20px; border-radius: 14px;
  background: var(--red); font-size: clamp(14.5px, calc(var(--u) * 1.02), 16.5px); font-weight: 700; color: #fff;
  box-shadow: 0 12px 24px -16px rgba(208, 2, 27, .8);
  transition: background .25s var(--ease);
}
.lkc__a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }   /* 카드 전체가 눌린다 */
.lkc__a .go { background: #fff; color: var(--red); transition: transform .25s var(--ease); }
@media (hover: hover) {
  .lkc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(208, 2, 27, .2), 0 2px 4px rgba(60, 20, 20, .05), 0 32px 52px -34px rgba(60, 20, 20, .5); }
  .lkc:hover .lkc__a { background: #B30017; }
  .lkc:hover .lkc__a .go { transform: translateX(3px); }
}
.lkc__a:focus-visible { outline: none; }
.lkc__a:focus-visible::after { outline: 2px solid var(--red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lkc, .lkc__a, .lkc__a .go { transition: none; } .lkc:hover { transform: none; } }
@media (max-width: 899px) { .lkcs { grid-template-columns: minmax(0, 1fr); } }

/* ══ 2026-10-26 8차 : 카드 머리가 페이지 바탕(#FBF1EE)과 같은 색이라 경계가 안 보인다 → 복숭아 → 산호 그라데이션 + 왼쪽 위 흰 빛.
   학년 카드는 고1 → 고3 으로 한 단계씩 짙어진다. 연계 카드 버튼은 카드 폭을 채우지 않고 글 길이만큼(알약) */
.gc__hd, .lkc__hd {
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, var(--hd-a, #FFE9E3) 0%, var(--hd-b, #FFD3C9) 100%);
  box-shadow: inset 0 3px 0 var(--red);
}
.gc:nth-child(2) { --hd-a: #FFE1D9; --hd-b: #FFC4B7; }
.gc:nth-child(3) { --hd-a: #FFD8CE; --hd-b: #FDB2A2; }
@media (min-width: 600px) and (max-width: 1099px) { .gc__hd { box-shadow: inset 3px 0 0 var(--red); } }
.lkc__k { box-shadow: inset 0 0 0 1px rgba(208, 2, 27, .14), 0 4px 10px -6px rgba(160, 20, 30, .35); }

.lkc__a {
  align-self: flex-start; justify-content: flex-start; gap: 14px;
  min-height: 50px; margin: auto 0 clamp(24px, calc(var(--u) * 2.6), 34px) clamp(24px, calc(var(--u) * 2.8), 40px);
  padding: 0 8px 0 22px; border-radius: var(--r-pill);
}
.lkc__d { padding-bottom: clamp(20px, calc(var(--u) * 2.2), 26px); }

/* ══ 2026-10-26 9차 : 윗변 빨간 선이 낡아 보인다 → 뺀다. 연계 카드는 학년 카드와 다른 틀로
   · 학년 카드 : 그라데이션 머리만으로 포인트, 머리 윗변엔 흰 빛 1px
   · 연계 카드(.lkc) : 머리 · 몸통 나누지 않은 흰 카드 한 장. 산호 → 투명으로 사라지는 그라데이션 테두리 + 오른쪽 위 모서리 산호빛 번짐 */
.gc__hd { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); }
@media (min-width: 600px) and (max-width: 1099px) { .gc__hd { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .85); } }

.lkc {
  border: 1.5px solid transparent;
  background:
    radial-gradient(48% 70% at 100% 0%, rgba(255, 168, 150, .38), rgba(255, 168, 150, 0) 72%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, rgba(240, 90, 80, .55) 0%, rgba(255, 190, 175, .4) 32%, rgba(23, 21, 26, .07) 62%, rgba(23, 21, 26, .07) 100%) border-box;
  box-shadow: 0 2px 4px rgba(60, 20, 20, .04), 0 24px 44px -34px rgba(60, 20, 20, .36);
}
.lkc__hd { padding-bottom: 0; border-radius: 0; background: none; box-shadow: none; }
.lkc__d { padding-top: clamp(12px, calc(var(--u) * 1.3), 16px); }
.lkc__k { background: #FFF1EE; box-shadow: inset 0 0 0 1px rgba(208, 2, 27, .12); }
@media (hover: hover) {
  .lkc:hover { box-shadow: 0 2px 4px rgba(60, 20, 20, .05), 0 32px 52px -34px rgba(60, 20, 20, .5); }
}

/* ══ 2026-10-26 10차 : 학년 카드 — 카드 사이 화살표 삭제, 머리 오른쪽 반투명 흰 학년 숫자(면 글자, 머리 아래 경계에서 잘림),
   제목 한 단계 크게, 몸통 문장마다 짧은 빨간 표시 + 글자 굵기 500 */
.gc + .gc::before { content: none; }
.gc__hd { position: relative; overflow: hidden; isolation: isolate; }
.gc__no {
  position: absolute; z-index: -1; right: clamp(14px, calc(var(--u) * 1.6), 26px); bottom: clamp(-30px, calc(var(--u) * -2.2), -18px);
  font-size: clamp(110px, calc(var(--u) * 9.6), 156px); font-weight: 900; letter-spacing: -.06em; line-height: 1;
  color: rgba(255, 255, 255, .62); pointer-events: none; user-select: none;
}
.ps .gc__h { font-size: clamp(20px, calc(var(--u) * 1.7), 26px); }
.gc__d { font-weight: 500; color: #46424A; }
.gc__d .l { position: relative; padding-left: 16px; }
.gc__d .l::before { content: ""; position: absolute; left: 0; top: .82em; width: 7px; height: 2px; border-radius: 1px; background: var(--red); }
.gc__d .l + .l { margin-top: .6em; }
@media (min-width: 600px) and (max-width: 1099px) { .gc__no { font-size: 110px; bottom: -22px; } }
@media (max-width: 599px) { .gc__no { font-size: 104px; bottom: -20px; } }
/* 제목이 커져 768 전후 머리 칸(15em)에서 '구체화하는 / 시기'로 갈라진다 → 머리 칸을 넓히고 제목 한 줄은 끊지 않는다 */
.gc__h .l { white-space: nowrap; }
@media (min-width: 600px) and (max-width: 1099px) { .gc { grid-template-columns: minmax(0, 17.5em) minmax(0, 1fr); } }