@charset "utf-8";
/* 대치플랜 · base : 토큰 · 리셋 · 공통 재질 · 활자
   --u = min(1vw, 1.78vh) 가 크기의 기준이다. 새 토큰은 이 파일에만 둔다. */

/* ============================================================================
   대치에듀 학생부 종합 올케어 컨설팅 - 풀페이지 랜딩

   레이아웃 원칙
   - 모든 페이지는 정확히 한 화면(100svh)을 차지하고 넘치지 않는다.
   - 그래서 크기는 px 이 아니라 --u 로 잡는다.
     --u = min(1vw, 1.78vh) : 가로와 세로 중 좁은 쪽을 따라간다.
     넓고 낮은 창에서도, 좁고 긴 폰에서도 내용이 화면 안에 들어온다.

   활자
   - 기본 Pretendard. 강조는 Pretendard 900 + 타이트한 자간.
   - 영문 필기체는 Yellowtail (표지의 All Care).

   TODO(콘텐츠 확보): 상담 전화번호·영업시간 / 사업자 정보
   ========================================================================== */
:root {
  /* 스케일 기준 */
  --u: min(1vw, 1.78vh);

  /* 지면 */
  --paper:   #FBF1EE;
  --card:    #FFFFFF;
  --card-2:  #FFF7F5;
  --line:    #F0DFDA;

  /* 잉크 */
  --ink:     #17151A;
  --ink-2:   #55505A;
  --ink-3:   #5E5966;

  /* 다크 */
  --noir:    #131215;
  --noir-2:  #1C1A1E;
  --noir-3:  #262329;
  --on-noir:   #F6F4F5;
  --on-noir-2: #A9A3AC;

  /* 신호 */
  --red:      #D0021B;
  --red-hi:   #F03040;
  --red-deep: #8E0012;
  --coral:    #FF8A6E;
  --red-on-noir: #FF7A84;   /* 어두운 지면 위 본문 강조 (AA 통과용) */

  /* 깊이 */
  --e1: 0 1px 2px rgba(60, 20, 20, .04), 0 6px 16px -8px rgba(60, 20, 20, .10);
  --e2: 0 2px 4px rgba(60, 20, 20, .05), 0 18px 40px -16px rgba(60, 20, 20, .16);
  --e3: 0 4px 8px rgba(60, 20, 20, .06), 0 40px 80px -30px rgba(60, 20, 20, .26);
  --e-red: 0 8px 20px -10px rgba(74, 12, 20, .45), 0 2px 5px rgba(74, 12, 20, .18);

  /* 형태 */
  --r-xl: calc(var(--u) * 2.6);
  --r-lg: calc(var(--u) * 1.6);
  --r-md: calc(var(--u) * 1.0);
  --r-pill: 999px;

  /* 정렬 기준선. 시안에서 잰 값이다.
     --gut : 카드가 화면 가장자리에서 떨어지는 거리 (3.5%)
     --col : 글이 시작하는 세로선. 헤더 로고도 여기에 선다 (9.4%)
     둘이 따로 놀아서 헤더와 본문 여백이 어긋나 보였다. 이제 한 값에서 나온다. */
  --gut: max(16px, 3.5vw);
  --col: max(20px, 9.4vw);
  --pad: var(--gut);
  --maxw: none;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.62, .04, .24, 1);

  --f: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
       system-ui, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --f-s: "Yellowtail", cursive;
}

/* ------------------------------------------------- 유리 표면 (공통 재질)
   페이지마다 카드 재질이 제각각이면 한 사이트로 안 읽힌다.
   밝은 지면과 어두운 지면에 각각 한 벌씩만 두고 전부 여기서 가져다 쓴다. */
.glass {
  background:
    linear-gradient(152deg, rgba(255, 255, 255, .86) 0%, rgba(255, 252, 251, .66) 52%, rgba(255, 244, 240, .58) 100%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(84, 34, 30, .06),
    0 10px 24px -14px rgba(84, 34, 30, .26);
}

.glass-d {
  background:
    linear-gradient(152deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .035) 55%, rgba(255, 255, 255, .02) 100%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 10px 22px -12px rgba(0, 0, 0, .85);
}

/* ------------------------------------------------------------------ 리셋 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--f);
  font-size: clamp(14.5px, calc(var(--u) * 0.92), 17px);
  line-height: 1.72;
  letter-spacing: 0;   /* 2026-09-16 : 음수 자간이 px 로 굳어 작은 굵은 라벨까지 좁게 물려 내려갔다. 굵은 제목 자간은 responsive.css 끝 */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }

ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { color: var(--ink); word-break: keep-all; }

p, li, dd, dt { word-break: keep-all; }

::selection { background: var(--red); color: #fff; }

:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.script { font-family: var(--f-s); font-weight: 400; color: var(--red); letter-spacing: 0; }

@media (max-width: 899px) {
  /* 좁은 화면에서 9.4% 기준선을 그대로 쓰면 글 폭이 너무 줄어든다.
     헤더와 본문이 같은 선에 선다는 규칙은 그대로 두고 값만 좁힌다. */
  :root { --col: max(18px, 5.2vw); }
}

/* --------------------------------------------------------- 모션 축소 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
}

/* --------------------------------------------------- 좁은 화면 보정 */
@media (max-width: 899px) {
  :root { --u: min(1.9vw, 1.15vh); }
}

@media (max-width: 599px) {
  :root { --u: min(2.9vw, 1.05vh); }
}

@media (max-width: 599px) and (max-height: 800px) {
  :root { --u: min(2.9vw, 0.99vh); }
}

/* 아주 짧은 화면(360x640 등). 여기서는 여백을 마지막까지 깎는다. */
@media (max-width: 599px) and (max-height: 690px) {
  :root { --u: min(2.9vw, 0.93vh); }
}

/* ══════════════════════════════════════════════════ 2026-09-11 · 6차 ══════════ */
/* 스크롤 : CSS 의 부드러운 스크롤은 ScrollTrigger 가 위치를 잴 때의 순간 이동까지 늘여 측정을 망가뜨린다.
   끄고, 사람이 누른 이동만 JS 에서 부드럽게 한다. */
html { scroll-behavior: auto; }

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

   A. 데스크톱 · 노트북 · 태블릿 가로 (폭 600+ · 높이 560+)
      한 화면 한 장면. 크기는 --u = min(1vw, 1.78vh) 로 폭과 높이 중 좁은 쪽을 따른다.
   B. 태블릿 세로 (폭 600~899 · 높이 760+)
      한 화면 한 장면은 지키되, 세로가 넉넉하니 폭 기준으로 키워 빈 화면을 채운다. 인물 사진을 되살린다.
   C. 폰 세로 (폭 599 이하)
      읽히는 것이 먼저다. 높이에 맞춰 글자를 줄이지 않는다(폭 기준 --u).
      긴 페이지는 제 높이만큼 늘어나고, 02 는 겹쳐 쌓이는 카드(sticky), 05 는 스크롤 위치로 켜지는 목록.
   D. 낮은 가로 화면 (높이 559 이하 · 폰 가로 등)
      한 화면에 담을 수 없으니 모든 페이지가 제 높이로 흐른다. 핀 장면은 쓰지 않는다(JS 와 같은 기준).
   ══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────── C. 폰 세로 ───────── */
@media (max-width: 599px) {
  :root { --u: min(2.9vw, 12.4px); }
}

/* ─────────────────────────────────────────────── D. 낮은 가로 화면 ─── */
@media (min-width: 600px) and (max-height: 559px) {
  :root { --u: min(1.05vw, 11px); }
}

/* ─────────────────────────────────────────────── B. 태블릿 세로 ────── */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 760px) {
  :root { --u: min(2.05vw, 1.42vh); }
}

/* 세로로 긴 큰 태블릿(1024x1366 등) : 폭 기준으로 조금 키운다 */
@media (min-width: 900px) and (orientation: portrait) and (min-height: 1000px) {
  :root { --u: min(1.28vw, 1.4vh); }
}

/* 세로로 긴 큰 태블릿(1024x1366 등) : 두 칸 표지는 인물이 제목을 덮는다. 태블릿 세로 배치를 쓴다 */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: portrait) and (min-height: 1000px) {
  :root { --u: min(1.12vw, 1.1vh); }
}

/* ══════════════════════════════════════════════════ 시안1 가로 챕터 : 토큰 ══════════
   --top-h   : 헤더 높이(components.css .top 과 같은 식)
   --rail-h  : 헤더 아래 챕터 레일 높이(데스크톱 1024+ 에서만 보인다)
   --head-off: 화면에 붙는 챕터(핀)의 내용이 시작하는 선 */
:root {
  --top-h: clamp(56px, calc(var(--u) * 4.6), 82px);
  --rail-h: 46px;
  --head-off: calc(var(--top-h) + var(--rail-h));
  --line-l: rgba(23, 21, 26, .12);
  --line-d: rgba(255, 255, 255, .12);
}

/* ══════════════════════════════════════════════════ 반응형 디자인 시스템 v1 (2026-09-15) ══════════
   기준 문서 : 반응형_기준.md
   활자 토큰 = clamp(폰 · 태블릿에서 읽히는 최소, --u 비례(데스크톱 한 화면 장면 유지), 와이드 상한)
   - 폰 · 태블릿 : 최소값이 받쳐 준다(본문 15px, 라벨 12.5px, 12px 미만 없음).
   - 데스크톱 : 예전처럼 --u(폭 · 높이 중 좁은 쪽)에 비례한다. 1440×900 에서 예전 크기와 ±7% 안.
   - 3xl 이상 제목은 낮은 창에서 --fit 만큼 줄어든다.
   간격 토큰(--sp-*)은 폭 360→1440 사이 선형. */
:root {
  --fit: 1;
  --fs-2xs: clamp(12px, calc(var(--u) * 0.87), 14px);
  --fs-xs: clamp(12.5px, calc(var(--u) * 0.94), 15.5px);
  --fs-sm: clamp(13.5px, calc(var(--u) * 1), 17px);
  --fs-md: clamp(15px, calc(var(--u) * 1.11), 19px);
  --fs-lead: clamp(16px, calc(var(--u) * 1.22), 21px);
  --fs-lg: clamp(17px, calc(var(--u) * 1.35), 23.5px);
  --fs-xl: clamp(18.5px, calc(var(--u) * 1.53), 27px);
  --fs-2xl: clamp(21px, calc(var(--u) * 1.74), 31px);
  --fs-3xl: calc(clamp(24px, calc(var(--u) * 2.22), 40px) * var(--fit));
  --fs-4xl: calc(clamp(30px, calc(var(--u) * 3.2), 58px) * var(--fit));
  --fs-5xl: calc(clamp(36px, calc(var(--u) * 4.17), 76px) * var(--fit));
  --fs-6xl: calc(clamp(44px, calc(var(--u) * 7), 128px) * var(--fit));
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: clamp(10px, 8.667px + 0.3704vw, 14px);
  --sp-4: clamp(14px, 12px + 0.5556vw, 20px);
  --sp-5: clamp(18px, 14.667px + 0.9259vw, 28px);
  --sp-6: clamp(24px, 18.667px + 1.4815vw, 40px);
  --sp-7: clamp(32px, 24px + 2.2222vw, 56px);
  --sp-8: clamp(44px, 32px + 3.3333vw, 80px);
  --sp-9: clamp(56px, 34.667px + 5.9259vw, 120px);
  --lh-head: 1.26;
  --lh-body: 1.72;
  --lh-dense: 1.55;
  --measure: 38em;
  --tap: 44px;
}
@media (min-width: 1024px) and (max-height: 759px) { :root { --fit: .9; } }
@media (min-width: 1024px) and (max-height: 659px) { :root { --fit: .82; } }
/* T6 와이드(1921+) : 크기 기준(--u)은 1920×1080 값(19.2px)에서 멈추고, 장면은 1920 구성 그대로 가운데에 선다.
   예전에는 --u 는 계속 커지는데 글자는 px 상한에 막혀, 2560 화면에서 카드 · 여백만 커지고 글이 작게 떠 있었다.
   --gut(카드 가장자리) 1840px, --col(글 시작선)은 1920 에서의 간격(113px)을 유지한다. */
@media (min-width: 1921px) {
  :root {
    --u: min(1vw, 1.78vh, 19.2px);
    --gut: max(3.5vw, calc((100vw - 1840px) / 2));
    --col: max(9.4vw, calc((100vw - 1840px) / 2 + 113px));
  }
}

/* 굵은 글자 자간 (2026-09-15) : 본문의 -.012em 을 그대로 물려받은 굵은 낱말이 붙어 보였다.
   문단 안 <b> · <strong> 은 자간을 거의 0으로 푼다(선택자 우선순위 0 : 컴포넌트가 따로 정한 값이 이긴다).
   컴포넌트의 700 이상 굵기 규칙은 음수 자간을 .012em(큰 제목 -.03em 이하는 .01em) 풀었다. */
:where(p, li, dd, dt, span, a, td, th, figcaption) :where(b, strong) { letter-spacing: -.002em; }