@charset "utf-8";
/* 대치플랜 · responsive : 반응형 디자인 시스템 v1 (2026-09-15)
   기준 문서 : 반응형_기준.md  ·  토큰 : base.css 끝(--fs-* · --sp-* · --fit · --tap)
   모든 페이지에서 가장 마지막에 읽는다. 화면 단계별 배치 규칙은 여기에만 추가한다.

   단계 : T1 ≤374 · T2 375–599 · T3 600–1023 · T4 1024–1439 · T5 1440–1919 · T6 1920+
   높이 : --fit(1024+ 에서 높이 < 760 → .9, < 660 → .82) · 입력 : (pointer: coarse) 터치 44px */

/* ═════════════════════════ 1. 읽기 바닥값 (T1~T3) ═════════════════════════
   실측(2026-09-15) : 폰 · 태블릿에서 20자 넘는 설명 문단이 13~14px 로 남아 있던 곳.
   본문 성격은 --fs-md(폰 15 · 태블릿 16), 보조 문단은 --fs-sm(폰 13.5 · 태블릿 14.5). */
@media (max-width: 1023px) {
  .track__d, .hl__d, .ab-subj__d, .cr__adr, .cm__comment, .qx__q, .qx__qs li, .ex__facts li,
  .next__also, .work__d, .pc__d, .scope__note { font-size: var(--fs-md); line-height: var(--lh-body); }
  .foot__copy, .foot__info, .ab-course__note, .ab-subj__tags, .sx__hint, .qd__memo, .rp-foot__src, .cmap2__note { font-size: var(--fs-sm); }
  .track__meta dd { font-size: var(--fs-sm); }
}

/* ═════════════════════════ 2. 터치 영역 44px (굵은 포인터 · 폭 767 이하) ═════════════════════════
   글자 크기는 그대로 두고 누르는 높이만 넓힌다. 실측으로 44px 미만이던 것들. */
@media (max-width: 767px), (pointer: coarse) {
  .pcs__more, .cmap2__open, .pc__src, .cr__tel, .faq__tel, .faq__rel a, .jp a, .pstack__go, .pex__go, .pex__ask, .row, .rp-toc a {
    min-height: var(--tap);
  }
  .pcs__more, .cmap2__open, .pc__src, .cr__tel, .faq__tel, .faq__rel a, .pex__go, .pex__ask { display: inline-flex; align-items: center; }
}

/* ═════════════════════════ 3. 표지(메인 01) ═════════════════════════ */
/* T3 태블릿 세로 : 한 화면 고정 칸 안에서 글 묶음이 제 높이보다 작은 칸에 들어가 알약 버튼이 대표원장 이름을 덮었다.
   표지만 제 높이로 흐르게 하고 글 → (이력 | 인물) → 대학 로고 순서로 쌓는다. */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 700px) {
  #s1.hero { height: auto; min-height: 100svh; }
  #s1 .hero__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--sp-5); row-gap: var(--sp-6);
    padding: var(--sp-8) var(--sp-7) 0;
    min-height: calc(100svh - 96px);
  }
  #s1 .hero__lede { grid-column: 1 / -1; grid-row: 1; align-self: start; padding-top: 0; }
  #s1 .hero__h { font-size: clamp(34px, 5.3vw, 50px); white-space: normal; }
  #s1 .hero__sub { font-size: var(--fs-lead); }
  #s1 .pills { margin-top: var(--sp-4); }
  #s1 .pill { font-size: var(--fs-sm); }
  #s1 .hero__who { grid-column: 1; grid-row: 2; align-self: end; max-width: none; padding: 0 0 var(--sp-5); gap: var(--sp-3); }
  #s1 .hero__role { font-size: var(--fs-xs); }
  #s1 .hero__name { font-size: var(--fs-2xl); }
  #s1 .hero__list li { font-size: var(--fs-xs); line-height: 1.5; }
  #s1 .hero__photo {
    display: block; position: relative; right: auto; bottom: auto;
    grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-self: center;
    width: 100%; height: auto; max-height: 56svh; object-fit: contain; object-position: bottom center;
  }
  #s1 .marquee { grid-column: 1; grid-row: 3; width: 100%; }
}

/* ═════════════════════════ 4. 단계 트랙 (진행 순서) ═════════════════════════
   T3 : 세로 한 줄로 길게 늘어져 태블릿 폭의 오른쪽 절반이 비었다. 두 줄로 나눠 읽는 거리를 줄인다. */
@media (min-width: 700px) and (max-width: 1023px) {
  .track:not(.is-pinned) .track__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
}

/* ═════════════════════════ 5. 프로그램 페이지 '받는 것' 아이콘 ═════════════════════════
   T1~T2 : 아이콘을 왼쪽으로 -8% 끌어낸 여백이 카드 밖(화면 왼쪽 -6px)까지 나갔다. */
@media (max-width: 599px) {
  .work__icw, .ps-what .work__icw { margin-left: -4px; }
}

/* ═════════════════════════ 6. 메인 07 상담 (2026-09-15 문구 · 배치 개편) ═════════════════════════
   T4+ : 왼쪽 제목 · 한 문장 · 조건 세 칸 · 버튼 / 오른쪽 배출 숫자. 낮은 창(--fit)에서는 세로 간격을 줄인다.
   T3  : 한 단. 조건 세 칸은 그대로 가로, 숫자 두 개는 아래 가로 두 칸.
   T1~T2 : 조건은 줄마다 '이름 | 값' 두 칸 목록, 버튼은 폭 가득. 제목은 두 줄로 끊긴다. */
@media (min-width: 1024px) and (max-height: 759px) {
  .contact__main { gap: clamp(10px, calc(var(--u) * 1.1), 20px); }
  .cinfo__i { padding: var(--sp-3) var(--sp-4); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .contact__in { gap: var(--sp-7); }
  .contact__close { font-size: clamp(36px, 6vw, 52px); }
  .cinfo { width: 100%; }
  .nums { column-gap: var(--sp-6); }
  .num__n { font-size: clamp(56px, 9vw, 84px); }
}
@media (max-width: 599px) {
  .contact__close { font-size: clamp(30px, 8.6vw, 38px); }
  .contact__lead { padding-left: var(--sp-3); }
  .cinfo { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .cinfo__i { grid-template-columns: 6.2em minmax(0, 1fr); align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .cinfo__i + .cinfo__i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
  .contact__cta .btn { min-height: 52px; }
}

/* ═════════════════════════ 7. 메인 표지 대표원장 (2026-09-16) ═════════════════════════
   수상 이력 목록은 학원소개에 있으니 표지에서는 뺐다. 이름과 서명만 인물 옆 아래에 조용히 둔다.
   예전에는 이력 아홉 줄이 칸을 위로 밀어 올리고 글자도 커 보였다. */
#s1 .hero__who--sign { align-self: end; gap: clamp(8px, calc(var(--u) * .9), 16px); padding-bottom: clamp(40px, calc(var(--u) * 6.4), 110px); }
#s1 .hero__who--sign .hero__cred { gap: 4px; }
#s1 .hero__who--sign .hero__role { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
#s1 .hero__who--sign .hero__name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: 0; }
#s1 .hero__who--sign .hero__sign { width: clamp(96px, calc(var(--u) * 9), 150px); margin-top: 2px; opacity: .72; }
@media (max-width: 599px) {
  #s1 .hero__who--sign { padding-bottom: 0; }
  #s1 .hero__who--sign .hero__sign { width: 96px; }
}
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 700px) {
  #s1 .hero__who--sign { padding-bottom: var(--sp-6); }
}

/* 굵은 글씨 자간 (2026-09-16)
   Pretendard 굵은 한글은 기본 자간에서도 글자가 붙어 보인다. 크기 단계마다 양수 자간을 준다.
   각 파일에 흩어진 음수 자간보다 뒤에서 이기도록 :root 를 붙였다. 새 굵은 제목을 만들면 여기 단계에 넣는다. */
:root { --ls-display: .012em; --ls-h1: .022em; --ls-h2: .026em; --ls-h3: .02em; }
:where(h1, h2, h3, h4, b, strong, dt) { letter-spacing: .016em; }
:root .rch,
:root .num__v,
:root .rp-hero__word,
:root .ps-hero__h,
:root .rc__word { letter-spacing: var(--ls-display); }
:root .hero__mark,
:root .ch__i,
:root .lm,
:root .lm em,
:root .jpanel__g,
:root .track__n,
:root .peek__big,
:root .contact__close,
:root .contact__close em,
:root .rp-hero__h,
:root .l,
:root .l em { letter-spacing: var(--ls-h1); }
:root .menu__a,
:root .kc__pass,
:root .pex__name,
:root .track__t,
:root .row__t,
:root .row__thumb b,
:root .faq__aq,
:root .rp-sec__h,
:root .rp-figs b,
:root .work__t,
:root .ex__h,
:root .gun__h,
:root .dcard__t,
:root .scope__h,
:root .next__t,
:root .ans__qt,
:root .dx__t,
:root .dx__n,
:root .nrv__lead,
:root .pc__h,
:root .rc__name { letter-spacing: var(--ls-h2); }
:root .menu__pa b,
:root .kc__uname,
:root .kc__dept,
:root .l b,
:root .hero__name,
:root .jmini__g,
:root .jpanel__g small,
:root .pstack__ia b,
:root .cmp2__k,
:root .split__who,
:root .split__v,
:root .rsum__h b,
:root .rcase__h,
:root .cinfo__i b,
:root .cinfo__i dd,
:root .num__k b,
:root .faq__qt,
:root .rp-hero__hook,
:root .rp-var__h,
:root .book__steps b,
:root .rp-lead,
:root .ps-hero__grade,
:root .spec dd,
:root .cm__doc,
:root .ex__facts b,
:root .qx__doc,
:root .qx__hl,
:root .ans__t,
:root .hr__doc,
:root .qd__doc,
:root .qd__q,
:root .qd__q b,
:root .cycle__bar b,
:root .sx__doc,
:root .ktc__t b,
:root .nrv__who b,
:root .pcs__allh b,
:root .rc__t,
:root .rp-p strong { letter-spacing: var(--ls-h3); }
#s0 .kc__pass { letter-spacing: var(--ls-h2); }
#s0 .kc__uname, #s0 .kc__dept, #s0 .kc__room, :root .cmp2__k { letter-spacing: var(--ls-h3); }

/* 단계 트랙 줄 맞춤 · 방식 / 결과물 표 (2026-09-16)
   설명이 한 줄인 단계와 세 줄인 단계가 섞이면 방식 · 결과물 칸 높이가 제각각이었다.
   단계마다 번호 · 시점 · 제목 · 설명 · 방식표 다섯 줄을 subgrid 로 묶어, 옆 단계와 같은 높이에 놓는다.
   방식표는 알약 상자 두 개 대신 이름 | 값 두 줄 표. 값이 길어도 줄 안에서 넘어가고 옆 단계 표 위치는 그대로다. */
:root .track__list { grid-template-rows: repeat(5, auto); row-gap: 0; }
:root .track__step { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; align-content: start; }
:root .track__d { align-self: start; }
:root .track__meta {
  display: grid; grid-template-columns: 1fr; gap: 0; align-self: start;
  margin-top: 12px; border-top: 1.5px solid var(--ink);
}
:root .track__meta > div {
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: baseline; column-gap: 10px;
  padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line-l); border-radius: 0; background: none;
}
:root .track__meta dt { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
:root .track__meta dd { margin: 0; font-size: clamp(13.5px, calc(var(--u) * .92), 15.5px); font-weight: 700; line-height: 1.4; color: var(--ink); word-break: keep-all; }
:root .track.is-pinned .track__step:not(.is-on) .track__meta { border-top-color: rgba(23, 21, 26, .22); }
:root .track.is-pinned .track__meta { transition: border-color .5s var(--ease); }
:root [data-tone="dark"] .track__meta { border-top-color: rgba(255, 255, 255, .7); }
:root [data-tone="dark"] .track__meta > div { border-bottom-color: var(--line-d); }
@media (max-width: 1023.98px) {
  :root .track__step { row-gap: 6px; }
  :root .track__meta { margin-top: 8px; max-width: 30em; }
  :root .track__meta > div { padding: 9px 2px; }
}
:root .track.is-pinned .track__step.is-on .track__meta { border-top-color: var(--red); }
:root .track.is-pinned .track__step.is-done .track__meta { border-top-color: rgba(23, 21, 26, .55); }
@media (min-width: 1024px) and (max-height: 900px) { :root .track__meta > div { padding: 8px 2px; } :root .track__meta { margin-top: 8px; } }

/* 따라다니는 상담 버튼 위치 (2026-09-16)
   오른쪽 · 아래 간격을 본문 여백(--gut)의 배수로 잡았더니, 1840px 넘는 화면에서 --gut 이 (100vw - 1840px) / 2 로 커져
   2560 폭에서 바닥에서 150px, 오른쪽에서 290px 떠 있었다(화면 아래쪽이 아니라 중간 가까이 보임).
   PC · 태블릿은 화면 모서리 기준 간격에 상한을 둔다. 폰(767 이하) · 가로 폰(높이 500 이하) 규칙은 그대로. */
@media (min-width: 768px) and (min-height: 501px) {
  .dock { right: clamp(16px, 2.2vw, 44px); bottom: calc(clamp(14px, 2.4vh, 30px) + env(safe-area-inset-bottom, 0px)); }
}