/* ==========================================================================
   기찬수학 고교정보 AI — 디자인 시스템 v2 (docs/화면설계_v2.md §1)
   라이트 테마 하나. 빌드 도구 없음. 이 파일 맨 위 블록이 공용 계약이다.

   ── 토큰 (:root) ─────────────────────────────────────────────────────────
   색   --blue --blue-dark --blue-soft --red --red-soft --ink --ink-2 --ink-3
        --paper --surface --line --line-2 --good --gold (+ --good-soft, --blue-tint)
        * --red 는 한 화면 1~2곳만. --gold 는 딥블루 바탕 위에만(흰 바탕 글자 금지).
        * 작은 글자에는 --ink-2 이상. --ink-3 은 큰 글자·아이콘에만.
   글꼴 --font-display(Do Hyeon, 400 하나 — h1·히어로·큰 숫자만) --font-body(Pretendard)
   모양 --radius-card(20) --radius-input(12) --radius-tile(16) --shadow-card --shadow-lift
   움직임 --ease (cubic-bezier(.2,.8,.2,1)) --dur(240ms)
   폭   --w-text(680) --w-wide(1120) --gutter(20 → 32) --header-h(60)

   ── 공용 클래스 ──────────────────────────────────────────────────────────
   레이아웃  .wrap(본문 680) .wrap-wide(1120) .stack(세로, --gap) .row(가로·줄바꿈)
             .grid .grid-2 .grid-3(휴대폰 1열 → 2·3열) .section(섹션 간격) .page-head
   글자      .h-display(도현 큰 제목) .h-hero .eyebrow .lead .muted .small .num(도현 숫자)
   버튼      .btn(=기본 주색) .btn-primary .btn-ghost .btn-soft .btn-white(딥블루 위)
             .btn-lg .btn-sm .btn-block .btn-icon(정사각) .link(글자 버튼)
   선택      .chip — aria-pressed="true" 이면 선택됨. .chip-sm. 묶음은 .chips
             .seg — 안의 button/a 중 aria-pressed="true"|aria-selected="true"|aria-current 가 선택
   표시      .badge (+ -line -mute -red -good -solid -gold) .icon .icon-box
   면        .card(흰 카드 20px) a.card/.card-link(누르는 카드) .tile(.tile-label .tile-value .tile-unit)
             .notice(+ -warn -good) .empty .divider
   입력      .field(.field-label .field-hint) .input(input·select·textarea) .check(체크·라디오)
   시트      .sheet + .sheet-backdrop — 둘 다 .is-open 을 붙이면 열림(휴대폰: 아래에서, 데스크톱: 가운데)
             안쪽 .sheet-head .sheet-body .sheet-foot. 열려 있는 동안 <html> 에 .is-locked
   알림      .toast — .is-show 를 붙이면 나타남(aria-live 영역에 두기)
   불러오기  .skeleton(.skeleton-line)
   기타      .visually-hidden .action-bar(휴대폰 하단 고정 행동 바, safe-area) .progress(> i 폭 %)
             .reveal / .reveal-stagger(자식 차례로) — 들어올 때 살짝 떠오름
   아이콘    /static/img/icons.svg 스프라이트: <svg class="icon"><use href="/static/img/icons.svg#i-이름"/></svg>
             (선 2px, currentColor). 이름 목록은 icons.svg 맨 위 주석.
   움직임은 prefers-reduced-motion 이면 모두 꺼진다.
   ========================================================================== */

:root {
  color-scheme: only light;   /* 'only' — 크롬·웹뷰 자동 어둡게(웹사이트 어둡게)에서 빠진다(base.html meta와 같게) */
  --blue: #131D88;
  --blue-dark: #0F1669;
  --blue-soft: #ECEDF5;
  --blue-tint: #F4F5FA;
  --red: #D10525;
  --red-soft: #FBEBEE;
  --ink: #232323;
  --ink-2: #55565F;
  --ink-3: #70737C;
  --paper: #F7F7F4;
  --surface: #FFFFFF;
  --line: rgba(35, 35, 35, .08);
  --line-2: rgba(35, 35, 35, .16);
  --good: #1B7340;   /* 옅은 초록 면(--good-soft) 위 작은 배지 글자도 AA(5.2:1) — #1E7F45는 4.4:1 */
  --good-soft: #E8F3EC;
  --gold: #F0B429;

  --font-display: "Do Hyeon", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  --radius-card: 20px;
  --radius-input: 12px;
  --radius-tile: 16px;
  --shadow-card: 0 1px 2px rgba(19, 29, 136, .04), 0 12px 32px rgba(19, 29, 136, .06);
  --shadow-lift: 0 2px 4px rgba(19, 29, 136, .05), 0 20px 44px rgba(19, 29, 136, .11);
  --ring: 0 0 0 4px rgba(19, 29, 136, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 240ms;

  --w-text: 680px;
  --w-wide: 1120px;
  --gutter: 20px;
  --header-h: 60px;
  --section: 40px;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 64px; --section: 64px; }
}

/* ── 기본 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
/* 끈끈한 칩 줄(.cat-nav, 약 56px)이 있는 화면: 초점·건너뛰기로 옮겨 간 곳이 칩 줄 밑에 가리지 않게 그만큼 더 비운다 */
html:has(.cat-nav) { scroll-padding-top: calc(var(--header-h) + 76px); }
html.is-locked { overflow: hidden; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 400 16px/1.65 var(--font-body); letter-spacing: -.01em;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent;
}
body > main { width: 100%; flex: 1 0 auto; }   /* 짧은 화면에서도 푸터가 바닥에 */
img, svg { display: block; max-width: 100%; }
/* 원장 픽셀 그림(_card.html wonjang): 한 칸 = 1px 원본을 정수배로만 키운다(1배 112px · 2배 224px) — 가장 가까운 칸 색으로 그려 흐려지지 않게 */
.px-art { display: block; flex: none; width: auto; height: 112px; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; }
.mascot-pic { display: contents; }   /* 마스코트 <picture>(WebP → PNG): 안쪽 <img>가 바로 놓인 것처럼 */
img { height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
p { margin: 0 0 12px; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
h1, .h-display {
  font-family: var(--font-display); font-weight: 400; font-synthesis: none;
  font-size: clamp(32px, 8.4vw, 46px); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 12px;
}
h2 { font-size: 21px; line-height: 1.38; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 18px; line-height: 1.45; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 768px) { h2 { font-size: 24px; } h3 { font-size: 19px; } }
.h-hero { font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-size: clamp(38px, 10.6vw, 68px); line-height: 1.14; letter-spacing: -.015em; }
.num { font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; color: var(--blue); }
.lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 38em; text-wrap: pretty; }
@media (min-width: 768px) { .lead { font-size: 18px; } }
.muted { color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.55; }
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: rgba(19, 29, 136, .16); }

/* 포커스: 키보드로 움직일 때만 링 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .chip:focus-visible, .seg > :focus-visible { outline-offset: 3px; border-radius: 999px; }
a.card:focus-visible, .card-link:focus-visible { outline-offset: 4px; border-radius: var(--radius-card); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; transition: top .2s var(--ease); }
.skip-link:focus { top: 10px; }

/* ── 레이아웃 ──────────────────────────────────────────────────────────── */
.wrap {
  width: 100%; max-width: calc(var(--w-text) + var(--gutter) * 2); margin: 0 auto;
  padding: 28px max(var(--gutter), env(safe-area-inset-right)) 72px max(var(--gutter), env(safe-area-inset-left));
  flex: 1 0 auto;
}
.wrap-wide { max-width: calc(var(--w-wide) + var(--gutter) * 2); }
@media (min-width: 768px) { .wrap { padding-top: 48px; padding-bottom: 96px; } }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.row-tight { --gap: 6px; }
.grid { display: grid; gap: var(--gap, 16px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section { margin-top: var(--section); }
.section-sm { margin-top: 32px; }
@media (min-width: 768px) { .section-sm { margin-top: 44px; } }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head h2 { margin: 0; }
.section-head p:not(.eyebrow) { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }   /* 눈썹 글(.eyebrow — /schools '비교')은 사이트 공통 모양 그대로 */
.page-head { margin: 0 0 32px; }
.page-head .lead { margin-top: 4px; }
.page-head-actions { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 768px) { .page-head { margin-bottom: 44px; } }
/* 원장 설명회 머리(cards.html px_head): 글 오른쪽에 말하는 원장 그림과 이름 — 휴대폰 1배, 넓은 화면 2배 */
.page-head-px { display: flex; align-items: flex-end; gap: 16px; }
.page-head-px .page-head-text { flex: 1 1 auto; min-width: 0; }
.page-head-fig { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.page-head-fig figcaption { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* 넓은 화면 2배: 그림이 글보다 높다 — 글은 다른 화면과 같은 자리(위 맞춤)에 두고, 그림은 위(뒤로 가기 줄 오른쪽 빈자리)로
   올려 머리가 덜 길어지게 */
@media (min-width: 768px) { .page-head-px { align-items: flex-start; gap: 32px; } .page-head-fig { margin-top: -60px; } .page-head-fig .px-art { height: 224px; } }
.divider { height: 1px; border: 0; background: var(--line); margin: 24px 0; }

/* ── 상단 바 ───────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);   /* 채도 올림 없이 — 딥블루 카드 위에서 보라빛이 돌지 않게 */
  border-bottom: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top { background: rgba(255, 255, 255, .97); } }
.top-in {
  max-width: calc(var(--w-wide) + var(--gutter) * 2); height: var(--header-h); margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--ink); text-decoration: none; flex: none; }   /* 누르는 높이 44px(겉모습은 그대로) */
.brand img { height: 28px; width: auto; }
/* 로고 그림이 없는 학원(base.html — ACADEMY_NAME만 바꾼 배포): 학원 이름을 글자 로고로. 서비스명(도현)과 굵기로 구분 */
.brand-academy { font-size: 16px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: nowrap; padding-right: 10px; border-right: 1px solid var(--line-2); }
.brand-name { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); padding-top: 2px; }
.top-nav { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: auto; }
.top-nav form { margin: 0; }
/* 주요 메뉴: 넓은 화면은 글자 링크, 좁은 화면은 메뉴 버튼 → 시트 */
.top-menu { display: none; }
.top-menu-btn {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; transition: background-color .2s;
}
.top-menu-btn .icon { width: 24px; height: 24px; }
@media (hover: hover) { .top-menu-btn:hover { background: rgba(35, 35, 35, .05); } }
@media (min-width: 900px) {
  .top-menu { display: flex; align-items: center; gap: 2px; margin-left: 28px; min-width: 0; }
  .top-menu-btn { display: none; }
}
.top-menu-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: 999px;
  transition: color .2s;
}
.top-menu-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--blue); transform: scaleX(0); transition: transform .24s var(--ease); }
@media (hover: hover) { .top-menu-link:hover { color: var(--ink); } }
.top-menu-link[aria-current="page"] { color: var(--blue); }
.top-menu-link[aria-current="page"]::after { transform: none; }
/* '지망 전략'(재원생 핵심 메뉴)은 색 대신 작은 점으로 표시 — 파란 글자는 '지금 보는 화면'에만 */
.top-menu-link.is-key::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--blue); }
.top-menu-link.is-key::after { left: 25px; }
/* 900~1023: 메뉴와 이름·로그아웃이 붙지 않게 조금 좁힌다 */
@media (min-width: 900px) and (max-width: 1023px) {
  .top-menu { margin-left: 16px; }
  .top-menu-link { padding: 0 9px; }
  .top-menu-link::after { left: 9px; right: 9px; }
  .top-menu-link.is-key::after { left: 22px; }
}
/* 작은 알약(.btn-sm — 헤더 로그인·학교 홈페이지·비교 그래프·상담 버튼 등): 보이는 크기는 38px, 누르는 영역은 44px.
   (.btn-sm 정의는 아래 버튼 절) */
.who { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; padding-right: 6px; }
.who b { color: var(--ink); font-weight: 600; }
.top-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; background: none; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; }
@media (hover: hover) { .top-link:hover { color: var(--ink); background: rgba(35, 35, 35, .05); } }
.page-auth .top-nav .btn { visibility: hidden; }
@media (max-width: 380px) { .brand-name { font-size: 17px; } .brand { gap: 8px; } .brand img { height: 26px; } .who { font-size: 13px; padding-right: 2px; } .top-link { padding: 0 8px; font-size: 13px; } .top-nav .btn-sm { padding: 0 12px; font-size: 13px; } }
@media (max-width: 359px) { .top-login-pre { display: none; } }
@media (max-width: 479px) { .top-login-more { display: none; } }   /* 다시 동의할 재원생(base.html): 휴대폰은 '이어서 쓰기'만 — 머리 바가 한 줄에 들게 */
@media (max-width: 339px) { .who { display: none; } }
/* 휴대폰: 로그아웃은 메뉴 시트 안에 */
@media (max-width: 479px) { .top-nav form { display: none; } }

/* 전체 메뉴 시트 */
.site-menu .sheet-head h2 { font-size: 20px; }
.site-menu .sheet-head { touch-action: none; }   /* 머리를 끌어내려 닫기(base.html) — 브라우저가 스크롤로 가로채지 않게 */
.menu-list { list-style: none; display: grid; gap: 2px; margin: 0 -8px; }
.menu-list a, .menu-soon {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: 14px;
  font-size: 16.5px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background-color .2s;
}
.menu-list .icon { width: 22px; height: 22px; color: var(--blue); }
.menu-list a > span { flex: 1; min-width: 0; }
@media (hover: hover) { .menu-list a:hover { background: var(--blue-tint); } }
.menu-list a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
.menu-list a.is-locked .icon:first-child { color: var(--ink-2); }
.menu-list .menu-lock { width: 16px; height: 16px; color: var(--ink-2); }
.menu-soon { color: var(--ink-2); }
.menu-soon .icon { color: var(--ink-3); }
.menu-soon > span:not(.badge) { flex: 1; }
.menu-group { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.menu-group .badge { height: 22px; font-size: 12px; }
.menu-login, .menu-logout { margin-top: 16px; }
.menu-logout { margin-bottom: 0; }

/* ── 푸터 ──────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); background: var(--paper); }
.foot-in {
  max-width: calc(var(--w-wide) + var(--gutter) * 2); margin: 0 auto;
  padding: 32px max(var(--gutter), env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  display: grid; gap: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: -10px 0 14px -10px; }
@media (max-width: 479px) { .foot-nav { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 0; } }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-radius: 999px; }
@media (hover: hover) { .foot-nav a:hover { color: var(--blue); } }
/* 상담 칸(base.html): 원장 그림이 왼쪽 단추를 가리킨다. 휴대폰 — 그림은 쌓인 단추 옆, 안내 글·상담 시간은 한 줄 전체.
   480px부터 — 그림이 안내 글·단추·상담 시간 세 줄 옆에 서서(글 폭만큼 뒤) 단추 위가 벌어지지 않는다 */
.foot-contact { display: grid; gap: 6px; }
.foot-contact.has-consult { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag tag" "btns px" "hours hours"; column-gap: 12px; }
.foot-tag { grid-area: tag; }
.foot-contact .foot-consult { grid-area: btns; align-self: end; }
.foot-contact .foot-hours { grid-area: hours; }
.foot-px { grid-area: px; align-self: end; }
@media (min-width: 480px) {
  .foot-contact.has-consult { grid-template-columns: minmax(0, max-content) auto; grid-template-areas: "tag px" "btns px" "hours px"; justify-content: start; column-gap: 20px; }
}
.foot-consult { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
@media (max-width: 479px) { .foot-consult .btn { flex: 1 1 100%; } }   /* 휴대폰: 카카오톡·전화 단추를 같은 폭으로 쌓는다(글 길이대로 들쭉날쭉하지 않게) */
.foot-hours { font-size: 13px; color: var(--ink-2); }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.foot-brand span { font-weight: 500; color: var(--ink-2); }
.foot p { margin: 0; }
/* 개인정보 처리방침 링크: 다른 바닥 글과 구분되게 굵게(개인정보 보호법 — 쉽게 알아볼 수 있게) */
.foot-legal { margin-top: 6px !important; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-weight: 700; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .foot-legal a:hover { color: var(--blue); text-decoration: underline; } }

/* ── 버튼 ──────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--blue); --btn-fg: #fff; --btn-bd: transparent; --btn-bg-hover: var(--blue-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 15.5px/1.2 var(--font-body); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .16s var(--ease), box-shadow var(--dur) var(--ease);
}
.btn .icon { width: 18px; height: 18px; }
@media (hover: hover) { .btn:hover { background: var(--btn-bg-hover); } }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; pointer-events: none; }
.btn-primary { --btn-bg: var(--blue); --btn-fg: #fff; --btn-bg-hover: var(--blue-dark); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--blue); --btn-bd: var(--line-2); --btn-bg-hover: var(--blue-soft); }
.btn-soft { --btn-bg: var(--blue-soft); --btn-fg: var(--blue); --btn-bg-hover: #E2E4F0; }
.btn-white { --btn-bg: #fff; --btn-fg: var(--blue); --btn-bg-hover: #EEF0FA; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16.5px; }
.btn-sm { position: relative; min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-sm::after { content: ""; position: absolute; inset: -3px 0; }   /* 누르는 영역 44px(보이는 크기 38px) */
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; }
.link {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: var(--blue); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .link:hover { text-decoration: underline; text-underline-offset: 4px; } }
.link .icon { width: 16px; height: 16px; }

/* ── 칩·세그먼트·배지 ──────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips[hidden] { display: none; }   /* display: flex가 [hidden]을 이기지 않게 — 스크립트가 없으면 거르기 칩 줄은 숨은 채로 */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: 500 15px/1.25 var(--font-body); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .16s var(--ease);
}
@media (hover: hover) { .chip:hover { border-color: var(--blue); color: var(--blue); } }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip .icon { width: 16px; height: 16px; }
.chip-sm { min-height: 34px; padding: 0 12px; font-size: 14px; }

.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(35, 35, 35, .06); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg > button, .seg > a {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 600 14.5px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > [aria-current] {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 29, 136, .08), 0 3px 10px rgba(19, 29, 136, .07);
}

.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue); font: 600 13px/1 var(--font-body); letter-spacing: -.01em; white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; }
.badge[hidden] { display: none; }
.badge-line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.badge-mute { background: rgba(35, 35, 35, .055); color: var(--ink-2); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-good { background: var(--good-soft); color: var(--good); }
.badge-solid { background: var(--blue); color: #fff; }
.badge-gold { background: var(--gold); color: var(--blue-dark); }   /* 딥블루 바탕 위에서만 */

/* ── 아이콘 ────────────────────────────────────────────────────────────── */
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-box { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.icon-box .icon { width: 22px; height: 22px; }

/* ── 카드·타일·안내 상자 ───────────────────────────────────────────────── */
.card { position: relative; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px; }
@media (max-width: 480px) { .card { padding: 20px; } }
:where(a.card) { display: block; }
a.card, .card-link { color: inherit; text-decoration: none; transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.card-link { display: block; }
@media (hover: hover) { a.card:hover, .card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } }
a.card:active, .card-link:active { transform: scale(.985); }

.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 16px; min-width: 0; }
.tile-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-2); line-height: 1.4; overflow-wrap: break-word; }
.tile-value { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-value.is-text { font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.4; letter-spacing: -.02em; }
.tile-unit { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-2); margin-left: 2px; white-space: nowrap; }
.tile-value:not(.is-text) { white-space: nowrap; }
@media (max-width: 359px) { .tiles.tiles-3 .tile-value { font-size: 22px; } }
.tile-note { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nowrap { white-space: nowrap; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-tile); background: var(--blue-soft); color: var(--ink); font-size: 15px; line-height: 1.6; }
.notice > .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }
.notice p { margin: 0; }
.notice-warn { background: var(--red-soft); }
.notice-warn > .icon { color: var(--red); }
.notice-good { background: var(--good-soft); }
.notice-good > .icon { color: var(--good); }
/* 동의 상자가 바뀐 재원생 안내(base.html — 본문 첫머리, 중립 파랑). 가운데 카드 화면(잠금·안내)에서는 카드 폭에 맞춘다 */
.reconsent-note { margin: 0 0 24px; }
.reconsent-note .link { display: inline; }
.center-page > .reconsent-note { width: 100%; max-width: 440px; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px; }
.empty img { width: 96px; height: auto; margin-bottom: 8px; }
.empty h2, .empty h3 { font-size: 19px; }
.empty p { margin: 0; color: var(--ink-2); max-width: 26em; }

/* ── 입력 ──────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 8px; }
.field-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field-hint { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.input {
  display: block; width: 100%; min-height: 52px; padding: 13px 16px; margin: 0;
  font: 400 17px/1.45 var(--font-body); color: var(--ink); letter-spacing: -.01em;
  background: var(--surface); border: 1px solid rgba(35, 35, 35, .55); border-radius: var(--radius-input);   /* 경계 대비 3:1 이상(WCAG 1.4.11) */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover { border-color: rgba(35, 35, 35, .65); }
.input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--ring); }   /* 투명 윤곽선 — 강제 색 모드에서는 보이는 초점 표시가 된다 */
textarea.input { min-height: 120px; resize: vertical; line-height: 1.6; }
select.input {
  padding-right: 44px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355565F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 20px no-repeat;
}
.field.is-error .input, .input[aria-invalid="true"] { border-color: var(--red); }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); cursor: pointer; }
.check input {
  -webkit-appearance: none; appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid rgba(35, 35, 35, .55); border-radius: 7px; background: var(--surface) center / 14px no-repeat; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked {
  background-color: var(--blue); border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 4px, transparent 4.5px); background-size: auto; }
.check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── 시트(아래에서 올라오는 판) ─────────────────────────────────────────── */
.sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15, 22, 105, .30); opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); }
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-height: 90vh; max-height: 90dvh;
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(19, 29, 136, .16);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(104%); visibility: hidden;
  transition: transform .34s var(--ease), visibility 0s linear .34s;
}
.sheet.is-open { transform: none; visibility: visible; transition: transform .34s var(--ease); }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(35, 35, 35, .16); margin: 10px auto 0; flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 6px; flex: none; }
.sheet-head h2, .sheet-head h3 { font-size: 20px; }
.sheet-body { overflow: auto; overscroll-behavior: contain; padding: 8px 20px 24px; -webkit-overflow-scrolling: touch; }
.sheet-foot { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
@media (min-width: 768px) {
  .sheet {
    left: 50%; right: auto; top: 50%; bottom: auto; width: min(600px, calc(100vw - 48px)); max-height: min(86vh, 860px);
    border-radius: 24px; padding-bottom: 0; box-shadow: 0 30px 80px rgba(19, 29, 136, .22);
    transform: translate(-50%, -46%) scale(.98); opacity: 0;
    transition: transform .3s var(--ease), opacity .24s var(--ease), visibility 0s linear .3s;
  }
  .sheet.is-open { transform: translate(-50%, -50%); opacity: 1; transition: transform .3s var(--ease), opacity .24s var(--ease); }
  .sheet::before { display: none; }
  .sheet-head { padding: 22px 24px 8px; }
  .sheet-body { padding: 8px 24px 28px; }
  .sheet-foot { padding: 14px 24px 18px; }
  .sheet-wide { width: min(980px, calc(100vw - 48px)); }
}

/* ── 토스트·스켈레톤·진행 막대·하단 행동 바 ─────────────────────────────── */
.toast {
  position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px;
  background: rgba(35, 35, 35, .94); color: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none;
  transform: translate(-50%, 16px); transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.skeleton {
  display: block; min-height: 14px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(35, 35, 35, .06) 25%, rgba(35, 35, 35, .11) 37%, rgba(35, 35, 35, .06) 63%) 0 0 / 400% 100%;
  animation: kc-shimmer 1.4s ease infinite;
}
.skeleton-line { height: 14px; margin: 10px 0; }
.skeleton-line:last-child { width: 62%; }
.progress { height: 4px; border-radius: 2px; background: rgba(35, 35, 35, .08); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .45s var(--ease); }
.action-bar {
  position: sticky; bottom: 0; z-index: 40; margin: 24px calc(var(--gutter) * -1) 0;
  padding: 12px max(var(--gutter), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: rgba(247, 247, 244, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); display: flex; gap: 8px;
}
@media (min-width: 768px) { .action-bar { position: static; margin: 32px 0 0; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── 표 ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--surface); }
.table-wrap:focus-visible { outline-offset: 2px; border-radius: var(--radius-tile); }   /* 가로로 밀리는 넓은 표(admin.html tabindex=0) */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--blue-tint); padding: 10px 14px; white-space: nowrap; }
.table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: normal; }
.table-wide { min-width: 640px; }
.table td.empty-cell { color: var(--ink-2); text-align: center; padding: 24px; }

/* ── 움직임 ────────────────────────────────────────────────────────────── */
@keyframes kc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes kc-pop { 0% { opacity: 0; transform: translateY(8px) scale(.98); } 100% { opacity: 1; transform: none; } }
.reveal { animation: kc-rise .5s var(--ease) backwards; }
.reveal-stagger > * { animation: kc-rise .5s var(--ease) backwards; }
.reveal-stagger > :nth-child(2) { animation-delay: 50ms; }
.reveal-stagger > :nth-child(3) { animation-delay: 100ms; }
.reveal-stagger > :nth-child(4) { animation-delay: 150ms; }
.reveal-stagger > :nth-child(5) { animation-delay: 200ms; }
.reveal-stagger > :nth-child(6) { animation-delay: 250ms; }
.reveal-stagger > :nth-child(n+7) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  /* 전환은 0초(.01ms가 아니라) — 길이가 0이면 전환이 아예 시작되지 않아, 시트를 열 때 visibility가 바로 바뀌고
     열자마자 옮기는 초점(.focus())이 안쪽 단추에 닿는다. 애니메이션은 끝 상태가 남도록 .01ms로 둔다 */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   화면별 — 홈 · 학교 · 카드 · 묻기 · 로그인 · 잠금 · 관리자
   (지망 전략 화면의 스타일은 strategy.html 이 따로 불러온다)
   ========================================================================== */

/* ── 홈 ────────────────────────────────────────────────────────────────── */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 12px 0 8px; }
.hero-copy { position: relative; z-index: 1; max-width: 640px; }
.hero .eyebrow { margin-bottom: 16px; }
.hero h1 { margin: 0 0 16px; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero .lead { max-width: 30em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* 재원생 홈: 히어로 버튼 없이 바로 딥블루 '지망 전략' 카드 — 휴대폰 첫 화면(390×664)에 카드 제목·상태·'이어서 하기'까지 */
@media (max-width: 767px) { .hero + .section-feature { margin-top: 24px; } }
@media (max-width: 479px) { .hero-cta { display: grid; grid-template-columns: minmax(0, 1fr); } .hero-cta .btn { width: 100%; } }
/* 휴대폰: 마스코트를 오른쪽 위에 작게 띄운다 — 76px이면 360~767px 폭에서 첫 줄 '분당 고등학교,'(한 덩어리, nowrap)가 옆에 다 들어간다 */
@media (max-width: 859px) {
  .hero { display: block; }
  .hero-art { float: right; width: 76px; margin: -4px -2px 8px 8px; pointer-events: none; user-select: none; }
}
/* 아주 좁은 화면(320~359): 마스코트를 눈썹 글 옆 위로 올려 큰 제목이 한 줄을 다 쓰게 */
@media (max-width: 359px) {
  .hero-art { position: absolute; float: none; right: -2px; top: -6px; width: 44px; margin: 0; }
  .hero .eyebrow { padding-right: 52px; }
}
@media (min-width: 640px) and (max-width: 859px) { .hero-art { width: 132px; margin-right: 8px; } }
.hero-art .hero-mascot { width: 100%; }
.hero-float { display: none; }
@media (min-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding: 40px 0 24px; }
  .hero-copy { order: 0; }
  .hero-art {
    order: 1; position: relative; right: auto; top: auto; width: 340px; height: 340px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F4F5FB 46%, var(--blue-soft) 100%);
    box-shadow: inset 0 0 0 1px rgba(19, 29, 136, .05);
  }
  .hero-art .hero-mascot { width: 160px; }
  .hero-float {
    position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 12px;
    border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-card);
    font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
  }
  .hero-float .icon { width: 16px; height: 16px; color: var(--blue); }
  /* 원 안쪽으로 — 오른쪽 칩이 1120 칸 밖(여백)으로 나가지 않게. 왼쪽은 글과 원 사이 틈(56px) 안에서만 */
  .hero-float.f1 { left: -12px; top: 64px; }
  .hero-float.f2 { right: 0; bottom: 58px; }
}

.menu-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 980px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-card { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 20px; }
@media (min-width: 980px) {
  .menu-grid-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .menu-grid-bento > * { grid-column: span 2; }
  .menu-grid-bento > :nth-child(-n+2) { grid-column: span 3; }
  .menu-grid-bento.is-even > * { grid-column: span 3; }
  .menu-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.menu-card .menu-text { flex: 1; min-width: 0; }
.menu-card h3 { font-size: 17.5px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.menu-card p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.menu-card.is-soon { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.menu-card.is-soon .icon-box { background: rgba(35, 35, 35, .05); color: var(--ink-2); }
.menu-card.is-soon h3 { color: var(--ink-2); }
.menu-card.is-soon h3 .badge { font-size: 12.5px; height: 24px; }
.menu-card .go { flex: none; width: 20px; height: 20px; color: var(--ink-3); transition: transform .28s var(--ease), color .28s var(--ease); }
@media (hover: hover) { .menu-card:hover .go { transform: translateX(3px); color: var(--blue); } }
@media (min-width: 640px) {
  .menu-card { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; padding: 24px; }
  .menu-card .go { position: absolute; right: 22px; top: 26px; }
}
.menu-card.is-locked .icon-box { background: rgba(35, 35, 35, .05); color: var(--ink-2); }
.go-lock { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(35, 35, 35, .05); color: var(--ink-2); }
.go-lock .icon { width: 15px; height: 15px; }
@media (min-width: 640px) { .go-lock { position: absolute; right: 18px; top: 22px; } }
.menu-grid-after { margin-top: 12px; }
@media (min-width: 640px) { .menu-grid-after { margin-top: 16px; } }
/* 재원생 홈: 지망 전략 카드 밑에는 바로 쓸 수 있는 카드만(index.html member_ready). 한 장이면 칸을 다 쓰는 가로 한 줄
   (아이콘 · 글 · 화살표), 두 장이면 반씩 — 빈 칸이 남지 않게 */
@media (min-width: 640px) {
  .menu-grid-after.is-n1 { grid-template-columns: minmax(0, 1fr); }
  .menu-grid-after.is-n1 .menu-card { flex-direction: row; align-items: center; gap: 20px; padding: 22px 28px; }
  .menu-grid-after.is-n1 .menu-card .go { position: static; margin-left: auto; }
  .menu-grid-after.is-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 준비 중인 메뉴(재원생 홈 맨 뒤): 카드 틀 없는 한 줄 목록 — 아이콘·이름·배지만, 누르는 곳이 아니다 */
.section-soon { margin-top: 36px; }
@media (min-width: 768px) { .section-soon { margin-top: 44px; } }
.section-soon .list-label { margin-bottom: 10px; }
.soon-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.soon-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.soon-list .icon { width: 20px; height: 20px; color: var(--ink-3); }
.soon-list .badge { height: 24px; padding: 0 9px; font-size: 12.5px; }

.feature {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; isolation: isolate;
  padding: 28px 24px; border-radius: var(--radius-card); background: var(--blue); color: #fff; text-decoration: none;
  box-shadow: 0 2px 4px rgba(19, 29, 136, .10), 0 18px 40px rgba(19, 29, 136, .22);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.feature::after {
  content: ""; position: absolute; right: -80px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
@media (hover: hover) { .feature:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(19, 29, 136, .12), 0 26px 52px rgba(19, 29, 136, .28); } }
.feature:active { transform: scale(.99); }
.feature h3 { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; }
.feature p { margin: 0; color: rgba(255, 255, 255, .84); font-size: 15.5px; line-height: 1.6; max-width: 30em; }
.feature .feature-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; font-size: 15px; color: #fff; }
.feature .feature-go .icon { width: 18px; height: 18px; transition: transform .28s var(--ease); }
@media (hover: hover) { .feature:hover .feature-go .icon { transform: translateX(3px); } }
.feature .icon-box { background: rgba(255, 255, 255, .12); color: #fff; }
.feature-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.feature-top { display: flex; align-items: center; gap: 12px; }
.feature .badge-gold .icon { width: 13px; height: 13px; }
.feature .feature-state { background: rgba(255, 255, 255, .14); color: #fff; }   /* 저장한 지망안 · 10.22 저장 */
.feature-preview { display: none; }
/* 저장한 지망안 위 3곳 한 줄(index.html — 980px 미만): 흰 10% 면, 1위 숫자만 금색(딥블루 위 하이라이트). 넘치면 말줄임.
   넓은 화면은 오른쪽 5줄 목록(.feature-preview)이 같은 일을 하니 감춘다 */
.feature-top3 {
  align-self: flex-start; max-width: 100%; padding: 10px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ft-item + .ft-item::before { content: "·"; margin: 0 9px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.ft-n { margin-right: 6px; font-family: var(--font-display); font-weight: 400; font-size: 16px; color: rgba(255, 255, 255, .78); }
.ft-item:first-child .ft-n { color: var(--gold); }
@media (min-width: 980px) { .feature-top3 { display: none; } }
@media (min-width: 768px) { .feature { padding: 40px 44px; } .feature h3 { font-size: 38px; } }
@media (min-width: 980px) {
  .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 48px; }
  .feature-preview { position: relative; z-index: 1; display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
  .fp-row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
  .fp-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-family: var(--font-display); font-size: 14px; }
  .fp-row:first-child .fp-n { background: var(--gold); color: var(--blue-dark); }
  .fp-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: rgba(255, 255, 255, .92); white-space: nowrap; }
  .fp-why { margin-left: auto; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .8); white-space: nowrap; }   /* 딥블루 위 4.5:1 이상 */
  /* 아래 순위는 줄 바탕만 옅게 — 글자는 흐리지 않는다(예시여도 읽히는 글자는 AA) */
  .fp-row:nth-child(n+4) { background: rgba(255, 255, 255, .04); }
  .fp-row:nth-child(n+4) .fp-n { background: rgba(255, 255, 255, .1); }
}

/* 게스트 홈 '재원생 전용' 묶음: 옅은 면 하나에 납작한 줄(그림자 카드를 테두리 상자 안에 겹치지 않는다) */
.member-panel { border-radius: calc(var(--radius-card) + 8px); background: var(--blue-tint); padding: 20px; }
.member-panel .menu-card { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) { .member-panel a.menu-card:hover { transform: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); } }
@media (min-width: 768px) { .member-panel { padding: 28px; } }
.member-panel .menu-grid { margin-top: 12px; }
.member-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 4px 4px 16px; }
.member-cta p { margin: 0; color: var(--ink-2); font-size: 15px; }

.trust { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); padding: 28px 24px; border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 32px; } }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item .icon { width: 22px; height: 22px; color: var(--blue); margin-top: 2px; }
.trust-item b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.trust-item span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ── 학교 목록·상세 ────────────────────────────────────────────────────── */
.school-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .school-grid { gap: 14px; } }
@media (min-width: 980px) { .school-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1120px) { .school-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.school-card[hidden] { display: none; }
.school-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; border-radius: 18px; }
@media (min-width: 640px) { .school-card { gap: 14px; padding: 20px 20px 18px; border-radius: var(--radius-card); } }
@media (max-width: 639px) { .school-card h3 { font-size: 17px; } .school-card .go { width: 18px; height: 18px; } .school-card .badge { height: 24px; padding: 0 8px; font-size: 12.5px; } }
.school-card .school-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.school-card h3 { font-size: 19px; }
.school-card .go { width: 20px; height: 20px; color: var(--ink-3); transition: transform .28s var(--ease), color .28s var(--ease); }
@media (hover: hover) { .school-card:hover .go { transform: translateX(3px); color: var(--blue); } }
.school-tags { min-height: 24px; }
.school-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
/* 이름은 위, 값은 아래에 맞춘다 — 좁은 화면에서 '고1 수학 수행'이 두 줄이 되어도 두 칸 이름이 같은 줄에서 시작하고 숫자 줄도 맞게 */
.school-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0; }
/* 휴대폰 두 칸 카드: 전교생 칸은 숫자 폭만큼, 남는 폭은 '고1 수학 수행'에 — 이름이 두 줄로 갈려 두 칸 이름 높이가 어긋나지 않게(360px~) */
@media (max-width: 639px) { .school-stats { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; } }
.school-stat-label { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.school-stat-value { font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; line-height: 1.2; }
.school-stat-value b { font-size: 21px; color: var(--ink); margin-right: 1px; }
/* 값이 없는 칸: 큰 숫자 자리에 '–' 대신 작은 본문 글자(일부러 비운 칸으로 읽히게). 작은 글자라 --ink-2 */
.stat-none { display: inline-block; font: 600 14px/1.8 var(--font-body); letter-spacing: -.01em; color: var(--ink-2); white-space: nowrap; }   /* 줄 높이 25px = 옆 칸 큰 숫자(21px × 1.2) — 위 이름표 높이가 맞게 */
.tile-value .stat-none { font-size: 15px; line-height: 33px; }   /* 타일 큰 숫자(30px × 1.1) 높이에 맞춤 */
.school-note { margin-top: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.list-head { display: grid; gap: 4px; margin-bottom: 14px; }
.list-head .list-label { margin: 0; }
.filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter); }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips .chip { flex: none; position: relative; }
.filter-chips .chip::after { content: ""; position: absolute; inset: -5px 0; }
/* 고른 칩: 지망 전략의 고르기(strategy.css)와 같은 결 — 옅은 파랑 면 + 2px 딥블루 테두리 + 체크.
   꽉 찬 딥블루는 주 버튼·순위 배지·지금 보는 구역 칩(.cat-nav [aria-current])에만 */
.filter-chips .chip[aria-pressed="true"] { background: var(--blue-soft); border-color: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); font-weight: 600; }
.filter-chips .chip-check { width: 0; height: 15px; margin-left: -6px; opacity: 0; stroke-width: 2.4; transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease), margin var(--dur) var(--ease); }
.filter-chips .chip[aria-pressed="true"] > .chip-check { width: 15px; margin-left: 0; opacity: 1; }
/* 휴대폰: 칩이 넘친 쪽 끝을 흐리게(schools.html 스크립트가 .has-prev·.has-more — 끝까지 밀면 뗀다). 키보드 초점이 줄 안이면 뗀다 */
@media (max-width: 767px) {
  .filter-chips { --fl: 0px; --fr: 0px; }
  .filter-chips.has-prev { --fl: 36px; }
  .filter-chips.has-more { --fr: 36px; }
  .filter-chips.has-prev, .filter-chips.has-more {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  }
  .filter-chips:has(:focus-visible) { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 768px) { .filter-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 6px 0; } }
.filter-empty { margin: 16px 0 0; color: var(--ink-2); font-size: 15px; }
.school-src { border-top: 0; padding-top: 0; margin-top: 14px; }
.list-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.list-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.compare-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .compare-grid { display: block; columns: 2; column-gap: 16px; } .compare-grid > * { break-inside: avoid; margin-bottom: 16px; } }

.school-hero { display: grid; gap: 14px; margin-bottom: 28px; }
/* 학교 상세: 휴대폰·태블릿은 한 줄(제목 → 기본 정보 → 자료 분류). 1024~는 1120 칸에 두 단 — 왼쪽 680 읽는 칸(제목·자료),
   오른쪽 360 기본 정보(따라오는 칸: school.html 스크립트가 --rail-top — 다 들어가면 칩 줄 아래에 붙고, 길면 끝까지 읽힌 뒤 아래에) */
@media (min-width: 1024px) {
  .wrap-school { max-width: calc(var(--w-wide) + var(--gutter) * 2); }
  .school-layout { display: grid; grid-template-columns: minmax(0, 680px) 360px; grid-template-rows: auto 1fr; grid-template-areas: "hero rail" "main rail"; justify-content: space-between; column-gap: 48px; align-items: start; }
  .school-layout > .school-hero { grid-area: hero; }
  .school-layout > .school-main { grid-area: main; min-width: 0; }
  .school-layout > .school-rail { grid-area: rail; align-self: stretch; }   /* 두 줄을 걸친 칸이 길어도 제목 줄(auto)은 늘지 않게 — 남는 높이는 1fr 줄로 */
  .school-rail .facts-card { position: sticky; top: var(--rail-top, calc(var(--header-h) + 24px)); }
  .school-rail .facts-card .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .school-rail .facts-card .tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .school-rail .facts-card .tile { padding: 14px; }
  .school-rail .facts-card .tiles-3 .tile { padding: 14px 12px; }
  .school-rail .facts-card .tile-value { font-size: 28px; }
  .school-rail .facts-card .tiles-3 .tile-value { font-size: 24px; }
  .school-rail .facts-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; font-size: 14.5px; }
  .school-rail .facts-list dt { font-size: 13.5px; }
  /* 칩 줄은 왼쪽 칸 안에서만 바탕을 깐다(화면 끝까지 늘이면 오른쪽 기본 정보 위를 덮는다) */
  .school-main .cat-nav { border-image: none; background: rgba(247, 247, 244, .94); box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
}
.school-hero h1 { margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: -8px 0 12px -4px; padding-right: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.back-link .icon { width: 18px; height: 18px; }
@media (hover: hover) { .back-link:hover { color: var(--blue); } }
.facts-card { padding: 22px; }
.facts-title { font-size: 17px; margin: 0 0 14px; }
.tile-caption { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.facts-card .tile { background: var(--blue-tint); border-color: transparent; }
.facts-card .rcard-src { margin-top: 16px; }
.facts-card .tiles { margin-top: 4px; }
.facts-card .tile-caption + .tiles { margin-top: 18px; }   /* 학교 사실 타일 → 학급 수 타일 */
.facts-list { display: grid; gap: 0; margin: 18px 0 0; }
.facts-list > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.facts-list dt { color: var(--ink-2); font-weight: 500; }
.facts-list dd { margin: 0; color: var(--ink); overflow-wrap: break-word; }
@media (min-width: 768px) { .facts-list > div { grid-template-columns: 176px minmax(0, 1fr); } }
@media (max-width: 420px) { .facts-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts-list dt { font-size: 13.5px; } .facts-card .tile { padding: 14px 12px; } .facts-card .tile-value { font-size: 26px; } }
.facts-notes { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--blue-tint); font-size: 14.5px; line-height: 1.6; }
.facts-notes p { margin: 0; }
.facts-notes p + p { margin-top: 8px; }
.facts-notes small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }
/* 끈끈한 칩 줄(_card.html cat_nav): 바깥 .cat-nav가 붙어 있는 바(바탕·아래 선), 안쪽 .cat-track이 가로로 밀리는 칩 줄.
   휴대폰은 화면 끝까지(가장자리까지 밀어 넘김). 넓은 화면은 칩을 본문 680 칸에 두고 바탕·아래 선만 화면 끝까지 —
   border-image 바깥 칸(outset)은 그리기만 하고 가로 스크롤을 만들지 않는다.
   칩이 넘친 쪽 끝을 흐리게(.has-prev·.has-more — base.html 스크립트가 끝에 닿으면 뗀다). 키보드 초점이 줄 안에
   있으면 흐림을 뗀다(가장자리 칩의 초점 링이 흐림 밑에 묻히지 않게). 마우스(정밀 포인터)에는 좌우 단추 */
.cat-nav { position: sticky; top: var(--header-h); z-index: 20; margin: 28px calc(var(--gutter) * -1) 4px; background: rgba(247, 247, 244, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.cat-track { --fl: 0px; --fr: 0px; display: flex; gap: 8px; padding: 10px var(--gutter); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.cat-track::-webkit-scrollbar { display: none; }
.cat-nav.has-prev .cat-track { --fl: 40px; }
.cat-nav.has-more .cat-track { --fr: 40px; }
.cat-nav.has-prev .cat-track, .cat-nav.has-more .cat-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.cat-nav:has(:focus-visible) .cat-track { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 768px) {
  .cat-nav {
    margin-inline: 0; background: none;
    border-image: linear-gradient(rgba(247, 247, 244, .94) calc(100% - 1px), rgba(35, 35, 35, .08) 0) fill 0 / 0 / 0 100vmax;
  }
  .cat-track { padding-inline: 0; }
}
.cat-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cat-nav.has-prev .cat-arrow.is-prev, .cat-nav.has-more .cat-arrow.is-next {
    position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; padding: 0;
    border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease);
  }
  .cat-arrow.is-prev { left: max(4px, calc(var(--gutter) - 16px)); }
  .cat-arrow.is-next { right: max(4px, calc(var(--gutter) - 16px)); }
  .cat-arrow:hover { border-color: var(--blue); color: var(--blue); }
  .cat-arrow .icon { width: 16px; height: 16px; }
}
/* 768~859: 680 칸 안쪽 끝(-4px) — 단추 둘레를 칩 줄 바탕색(8px)으로 감싸 밑 칩이 단추 옆에서 잘려 보이지 않게 */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .cat-arrow.is-prev { left: -4px; }
  .cat-arrow.is-next { right: -4px; }
  .cat-arrow { box-shadow: 0 0 0 8px rgba(247, 247, 244, .94); }
}
/* 860~: 단추를 칸 밖 여백으로(끝 칩 위에 얹히지 않게). 학교 상세 1024~는 두 단이라(왼쪽은 화면 끝 32px, 오른쪽은 기본 정보
   칸과의 틈 48px) 밖으로 뺄 자리가 모자라 — 칸 안쪽 + 바탕색 테두리 그대로 */
@media (hover: hover) and (pointer: fine) and (min-width: 860px) {
  .cat-arrow.is-prev { left: -44px; }
  .cat-arrow.is-next { right: -44px; }
  .cat-arrow { box-shadow: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .school-main .cat-arrow.is-prev { left: -4px; }
  .school-main .cat-arrow.is-next { right: -4px; }
  .school-main .cat-arrow { box-shadow: 0 0 0 8px rgba(247, 247, 244, .94); }
}
.cat-nav + .card-list { margin-top: 20px; }
.cat-nav .chip { flex: none; position: relative; }
.cat-nav .chip::after { content: ""; position: absolute; inset: -5px 0; }   /* 누르는 영역 44px */
.cat-nav .chip[aria-current="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.cat-nav .chip[aria-current="true"] .cat-count { color: rgba(255, 255, 255, .8); }
.page-head + .cat-nav { margin-top: -12px; }
/* 칩으로 건너뛴 자리: html:has(.cat-nav)의 scroll-padding(머리 바 + 칩 줄)만으로 — 따로 더하지 않는다 */
.cat-section, .card-list > .rcard[id^="s-"], .card-list > .list-group { scroll-margin-top: 0; }
/* 카드 목록 안 묶음 이름(다가오는 설명회 · 다녀와서 확인한 내용 · 지난 설명회 / 학교끼리 비교 · 학교별 자료) */
.card-list > .list-group { margin: 24px 0 -4px; font-size: 14.5px; font-weight: 700; }
.card-list > .list-group:first-child { margin-top: 0; }
.cat-section .section-head { margin-bottom: 14px; }
.cat-count { font-size: 14px; color: var(--ink-2); font-weight: 500; }

/* ── 읽는 카드(_card.html) ─────────────────────────────────────────────── */
.card-list { display: grid; gap: 16px; }
/* 학교마다 몇 장만 고른 묶음(설명회 '다녀와서 확인한 내용')의 학교 마지막 카드 밑 '○○고 학교 자료 전체 보기'(cards.html) */
.card-list > .school-more { display: flex; justify-content: flex-end; margin: -10px 0 0; }
.school-more .link { min-height: 44px; padding: 0 2px; font-size: 15px; }
.list-end { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 0; font-size: 14.5px; color: var(--ink-2); text-align: center; flex-wrap: wrap; }
.list-end .icon { width: 18px; height: 18px; color: var(--good); }
.rcard { padding: 24px; }
@media (min-width: 768px) { .rcard { padding: 28px 32px; } }
.rcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
/* 근거 번호(C1…)는 본문 글꼴 — 도현은 h1·히어로·큰 숫자에만 */
.rcard-n { font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--blue); color: #fff; }
.rcard h3, .rcard-title { font-size: 19px; line-height: 1.45; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
@media (min-width: 768px) { .rcard h3, .rcard-title { font-size: 20px; } }
.rcard-body { font-size: 16px; line-height: 1.7; color: var(--ink); }
.rcard-body p { margin: 0 0 12px; text-wrap: pretty; }
/* 목록 화면: 본문을 접어 두고 '더 보기'로 펼친다(cards.html 스크립트가 .is-clamped를 붙인다) */
.rcard.is-clamped .rcard-body { max-height: calc(1.7em * 4); overflow: hidden; -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
/* 문단 끝에서 깔끔하게 자른 경우(스크립트가 높이를 정함) — 흐림 없이. 다음 문단 머리말이 반쯤 비치지 않게 */
.rcard.is-clamped .rcard-body.is-cut { -webkit-mask-image: none; mask-image: none; }
.rcard.is-clamped .rcard-fig { display: none; }
.rcard-more {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 4px 0 -8px -2px; padding: 0 4px; border: 0; background: none;
  font: 600 15px/1.2 var(--font-body); color: var(--blue); cursor: pointer; border-radius: 8px;
}
.rcard-more[hidden] { display: none; }
.rcard-more .icon { width: 18px; height: 18px; transition: transform .24s var(--ease); }
.rcard-more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.rcard-more-note { font-weight: 500; color: var(--ink-2); }
@media (hover: hover) { .rcard-more:hover .rcard-more-label { text-decoration: underline; text-underline-offset: 4px; } }
/* 설명회 카드: 날짜 칸 + 제목 */
.ev-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ev-title { flex: 1; min-width: 0; }
.ev-title .rcard-meta { margin-bottom: 8px; }
.ev-title .rcard-title { margin: 0; }
.ev-date {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 76px; min-height: 76px; margin: 0; padding: 8px 4px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); text-align: center;
}
/* 'MM.DD'는 한 줄로만(본문의 overflow-wrap: anywhere가 '10.2'/'4'로 끊지 않게). 휴대폰 칸(76px)에 맞춰 24px */
.ev-md { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.ev-dt { font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.rcard-event.is-today .ev-date { background: var(--blue); color: #fff; }
.rcard-event.is-past .ev-date { background: rgba(35, 35, 35, .05); color: var(--ink-2); }
.rcard-event.is-past .ev-title .rcard-title { color: var(--ink-2); }
.rcard-event.is-past { box-shadow: inset 0 0 0 1px var(--line); background: rgba(255, 255, 255, .7); }
@media (min-width: 768px) { .ev-date { width: 84px; min-height: 84px; } .ev-md { font-size: 28px; } .ev-head { gap: 18px; } }
/* 지난 설명회(_card.html past_ev): 이미 열렸다는 중립 한 줄 + 행사 전 안내 본문은 접어 둔다('안내 내용 보기') */
.ev-past-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ev-past-note .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--ink-3); }
.ev-more { margin-top: 4px; }
.ev-more:not([open]) { margin-bottom: -8px; }   /* 접힌 채로는 출처 줄과의 틈을 '더 보기' 카드와 같게 */
.ev-more > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 0 -2px; padding: 0 4px; border-radius: 8px;
  font: 600 15px/1.2 var(--font-body); color: var(--blue); cursor: pointer; list-style: none;
}
.ev-more > summary::-webkit-details-marker { display: none; }
.ev-more > summary .icon { width: 18px; height: 18px; transition: transform .24s var(--ease); }
.ev-more[open] > summary .icon { transform: rotate(180deg); }
.ev-more .ev-more-label.is-open, .ev-more[open] .ev-more-label.is-closed { display: none; }
.ev-more[open] .ev-more-label.is-open { display: inline; }
@media (hover: hover) { .ev-more > summary:hover .ev-more-label { text-decoration: underline; text-underline-offset: 4px; } }
.ev-more > .rcard-body { margin-top: 6px; color: var(--ink-2); }   /* 지난 일의 안내 — 본문은 보조 글자색 */
.rcard-body p:last-child { margin-bottom: 0; }
.rcard-body .rlabel { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 700; color: var(--blue); letter-spacing: -.01em; }
.rcard-fig { margin: 18px 0 0; }
.rcard-fig img { width: 100%; height: auto; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border: 1px solid var(--line); }
/* width·height 속성(적재 때 읽은 원래 크기)이 있으면 그 비율로 자리를 잡는다 — 없을 때만 4:3 임시 자리 */
.rcard-fig img:not([width]) { aspect-ratio: auto 4 / 3; }
.rcard-zoom { position: relative; display: block; border-radius: 14px; color: var(--ink); text-decoration: none; cursor: zoom-in; }
.rcard-zoom:focus-visible { outline-offset: 3px; border-radius: 16px; }
/* 그림 밑 한 줄(_card.html .fig-bar): 왼쪽 설명(긴 것은 '그림 내용 글로 읽기'), 오른쪽 '크게 보기' 글 단추. 그림 위에는 아무것도
   얹지 않는다(기찬 인포그래픽 오른쪽 아래의 출처 줄·서명을 덮지 않게). 단추는 줄 오른쪽 위에 붙이고(absolute), 설명 첫 줄만
   단추 자리를 비킨다(.fig-cap::before) — 둘째 줄부터, 펼친 '글로 읽기' 글은 칸을 다 쓴다 */
.fig-bar { position: relative; min-height: 44px; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.fig-zoom {
  position: absolute; top: 0; right: -4px; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 4px;
  border-radius: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.fig-zoom .icon { width: 15px; height: 15px; color: var(--blue); }
@media (hover: hover) { .fig-zoom:hover { color: var(--blue); } }
.fig-cap { display: block; padding-top: 11px; }   /* 첫 줄 가운데가 단추(44px) 가운데와 맞게 */
.fig-cap::before { content: ""; float: right; width: 92px; height: 21px; }   /* 첫 줄(21.6px)만 단추 자리를 비킨다 */
.fig-bar > .fig-text > summary { max-width: calc(100% - 96px); }
/* (예전 표시) 그림 위 '크게 보기' 알약 — 지망 전략 '배정 구조' 그림(strategy.html)이 아직 쓴다. 오른쪽 아래 출처 줄·서명을
   덮지 않게 오른쪽 위(제목이 없는 자리)에 글자 없는 36px 원으로 — 글자는 투명하게 남겨 링크 이름('… 크게 보기 (새 창)')은 그대로 */
.rcard-zoom-pill {
  position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 12px; width: 36px; height: 36px; padding: 0 0 0 10px;
  overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(19, 29, 136, .08), 0 4px 14px rgba(19, 29, 136, .12);
  font-size: 13px; font-weight: 600; color: transparent; white-space: nowrap;
}
.rcard-zoom-pill .icon { flex: none; width: 16px; height: 16px; color: var(--blue); }
@media (hover: hover) { .rcard-zoom:hover .rcard-zoom-pill { box-shadow: inset 0 0 0 1.5px var(--blue), 0 4px 14px rgba(19, 29, 136, .12); } }
.fig-text summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; border-radius: 8px; }
.fig-text summary::-webkit-details-marker { display: none; }
.fig-text summary .icon { width: 16px; height: 16px; transition: transform .24s var(--ease); }
.fig-text[open] summary .icon { transform: rotate(180deg); }
@media (hover: hover) { .fig-text summary:hover { color: var(--blue); } }
.fig-text p { margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--blue-tint); color: var(--ink-2); }
.rcard-src { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.rcard-src .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
/* 출처 제목 링크: 밑줄 대신 굵기로 구분(누르거나 키보드로 오면 밑줄). 위아래 여백으로 누르는 높이를 넓힌다(줄 간격은 그대로).
   목록에서 접힌 카드는 출처 이름만 2줄까지 — 기준일·확인일(.src-date)은 자르지 않고 다음 줄에 다 보인다 */
.rcard-src a { color: var(--ink-2); font-weight: 600; text-decoration: none; padding-block: 6px; }
.rcard-src a:focus-visible { text-decoration: underline; }
@media (hover: hover) { .rcard-src a:hover { color: var(--blue); text-decoration: underline; } }
.rcard.is-clamped .rcard-src .src-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard.is-clamped .rcard-src .src-date { display: block; }
.rcard.is-clamped .rcard-src .src-date > .src-sep:first-child { display: none; }

/* ── AI에게 묻기 ───────────────────────────────────────────────────────── */
.ask-page { display: flex; flex-direction: column; }
.ask-intro { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
@media (min-width: 768px) { .ask-intro { margin-bottom: 32px; } }
.ask-limit { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.ask-limit .icon { width: 16px; height: 16px; color: var(--ink-3); }
.ask-limit > span { text-wrap: balance; }   /* 두 줄이 되면 '물어볼 수 있어요'만 홀로 남지 않게 */
.thread { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.bubble-q { align-self: flex-end; max-width: 86%; padding: 14px 18px; border-radius: 22px 22px 6px 22px; background: var(--blue); color: #fff; font-size: 16px; line-height: 1.6; white-space: pre-wrap; animation: kc-pop .4s var(--ease) backwards; }   /* 그림자 없음(그림자는 카드에만) — 지망 전략 대화 말풍선과 같은 결 */
.answer-card { padding: 22px; border-radius: 6px 22px 22px 22px; animation: kc-pop .45s var(--ease) .06s backwards; }
@media (min-width: 768px) { .answer-card { padding: 26px 28px; } }
.answer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.answer-head .ai-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.answer-head .ai-dot .icon { width: 17px; height: 17px; }
.answer-head h2 { font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; }
/* 답 제목(ask.html 스크립트가 초점을 주는 읽기 시작점 — tabindex=-1): 누르는 것이 아니라 고리를 두지 않는다(.consent-title과 같게).
   스크립트가 옮긴 초점은 크롬에서 :focus-visible로 잡혀 터치·마우스·새로고침에도 고리가 남는다 */
.answer-head h2:focus, .answer-head h2:focus-visible { outline: none; }
.answer-body p { margin: 0 0 10px; font-size: 16px; line-height: 1.75; }
.answer-body p:last-child { margin-bottom: 0; }
/* 거절·출력차단·한도: 오류가 아닌 정해진 안내 — 지망 전략 대화의 안내 말풍선(.sx-bubble.is-note)과 같은 중립 회색
   (회색 테두리 · 보조 글자색 제목 · i 아이콘). 크림슨은 진짜 오류에만 아낀다 */
.answer-card.is-warn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-card); }
.answer-card.is-warn .ai-dot { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.answer-card.is-warn .answer-head h2 { color: var(--ink-2); }
.answer-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.answer-foot .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
/* 답 카드 끝 '다른 질문하기'(ask.html) — 찾은 자료 아래의 묻기 칸으로 바로(초점까지) */
.answer-next { margin: 6px 0 -10px; }
.answer-next .link { min-height: 44px; font-size: 15px; }
.answer-next .link .icon { width: 16px; height: 16px; }
.sources { margin-top: 36px; }
.sources-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin: 0 0 12px; }
.sources-head h2 { font-size: 18px; }
.src-list { display: grid; gap: 8px; }
.src-item { border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: calc(var(--header-h) + 16px); transition: box-shadow .24s var(--ease); }
.src-item[open] { box-shadow: var(--shadow-card); }
.src-item summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; cursor: pointer; list-style: none; border-radius: 18px; }
.src-item summary::-webkit-details-marker { display: none; }
.src-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.src-title { font-size: 15.5px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: var(--ink); }
.src-meta { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.src-cited { color: var(--blue); font-weight: 700; }
.src-item:not(.is-cited) .rcard-n { background: var(--blue-soft); color: var(--blue); }   /* 답에 쓰지 않은 자료는 번호를 옅게 */
.src-chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .24s var(--ease); }
.src-item[open] .src-chev { transform: rotate(180deg); }
.src-item .rcard-n { flex: none; }
.src-body { padding: 4px 18px 18px; }
@media (min-width: 768px) { .src-body { padding: 4px 24px 22px 58px; } }
@media (hover: hover) { .src-item summary:hover .src-title { color: var(--blue); } }
.composer-wrap { margin-top: 24px; }
.sources ~ .composer-wrap { margin-top: 40px; }   /* 답 → 찾은 자료 → 새 질문: 자료 목록과 묻기 칸 사이를 섹션처럼 띄운다 */
.ask-intro + .composer-wrap, .ask-intro + .greet, .ask-intro + .thread, .greet + .composer-wrap { margin-top: 0; }
.greet { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; }
.greet .ai-dot { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--blue); color: #fff; }
.greet .ai-dot .icon { width: 18px; height: 18px; }
.greet p { margin: 0; padding: 12px 16px; border-radius: 6px 20px 20px 20px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 15.5px; line-height: 1.6; max-width: 34em; }
.composer-label { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.composer-label:has(+ .composer-hint) { margin-bottom: 2px; }
.composer-hint { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.answer-action { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
/* 상담 안내 답(ask.html): 단추·상담 시간 오른쪽에 생각하는 원장 그림. 넓은 화면 — 그림을 상담 칸 바닥에 붙여 위로 세우고
   (답 글·단추 줄 오른쪽을 비워 둔다) 단추 위가 그림 높이만큼 벌어지지 않게 */
.answer-consult { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.answer-consult-main { flex: 1 1 auto; min-width: 0; }
.answer-consult .answer-action { margin-top: 0; }
@media (min-width: 768px) {
  .answer-card.is-consult .answer-body { padding-right: 72px; }
  .answer-consult { position: relative; display: block; padding-right: 72px; }
  .answer-consult .answer-px { position: absolute; right: 0; bottom: 0; }
}
.answer-hours { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.answer-card.is-consult { box-shadow: inset 0 0 0 1px rgba(19, 29, 136, .12), var(--shadow-card); }
.answer-src-badge { margin-left: auto; text-decoration: none; }
.cite { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; margin: 0 2px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; text-decoration: none; vertical-align: 2px; }
.ask-limit b { color: var(--ink); font-weight: 700; }
.composer { position: relative; padding: 8px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); transition: box-shadow var(--dur) var(--ease); }
.composer:focus-within { box-shadow: 0 0 0 2px var(--blue), var(--shadow-card); }
.composer textarea { display: block; width: 100%; min-height: 96px; max-height: 40vh; padding: 12px 14px 4px; border: 0; background: transparent; resize: none; font: 400 17px/1.6 var(--font-body); color: var(--ink); outline: none; }
.composer textarea::placeholder { color: var(--ink-3); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 14px; }
.composer-count { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.composer .btn { min-height: 44px; }
/* 오늘 횟수를 다 쓴 때: 입력 칸을 납작하게(그림자 없이) — 안내는 위 .ask-limit */
.composer.is-off { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.composer textarea:disabled { cursor: not-allowed; color: var(--ink-2); }
.ask-limit.is-used-up { color: var(--ink); font-weight: 600; }
.ask-limit .link { font-size: 14px; }
.composer-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 4px 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.composer-note .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.composer-note .link { font-size: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.examples { margin-top: 16px; }
.examples-label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 10px; }
.examples .chips { gap: 8px; }
.examples .chip { white-space: normal; text-align: left; line-height: 1.4; padding: 9px 14px; min-height: 44px; }
.examples .chip .icon { display: none; }
@media (max-width: 639px) {
  .examples .chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .examples .chip { justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px 10px 14px; border-radius: 14px; font-size: 15.5px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
  .examples .chip > span { flex: 1; min-width: 0; }
  .examples .chip .icon { display: block; flex: none; width: 16px; height: 16px; color: var(--blue); }
}
@media (max-width: 639px) and (hover: hover) { .examples .chip:hover { border-color: rgba(19, 29, 136, .35); background: var(--blue-tint); color: var(--ink); } }
.pending { display: none; }
.is-sending .pending { display: flex; margin-bottom: 8px; }
.is-sending .greet, .is-sending .examples, .is-sending .ask-note { display: none; }
.ask-note { margin-top: 20px; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.ask-note .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }

/* ── 로그인·잠금·안내 ──────────────────────────────────────────────────── */
.center-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-h) - 220px); }
.auth-card { width: 100%; max-width: 440px; padding: 32px 24px; }
@media (min-width: 768px) { .auth-card { padding: 44px 40px; } }
.auth-card .auth-icon { margin-bottom: 20px; }
.auth-card h1 { font-size: 34px; margin-bottom: 8px; }
.auth-card .lead { font-size: 16px; text-wrap: balance; }
.auth-form { margin-top: 28px; display: grid; gap: 20px; }
.code-input { font-size: 22px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: center; min-height: 60px; font-variant-numeric: tabular-nums; }
.code-input::placeholder { letter-spacing: .08em; font-weight: 400; font-size: 17px; }
.auth-error { margin-top: 20px; }
.auth-help { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.consent-box { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--blue-tint); }
.consent-box .check { font-size: 15px; color: var(--ink); font-weight: 600; }
.consent-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.consent-title .badge { height: 22px; padding: 0 8px; font-size: 12px; }
.consent-title:focus, .consent-title:focus-visible { outline: none; }   /* 읽기 시작점(login.html 스크립트) — 누르는 것이 아니라 링을 두지 않는다 */
.consent-list { display: grid; gap: 6px; margin: 0; font-size: 14px; line-height: 1.55; }
.consent-list > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.consent-list dt { font-weight: 700; color: var(--ink-2); }
.consent-list dd { margin: 0; color: var(--ink); }
.consent-note { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.consent-note a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }

/* 개인정보 처리방침(privacy.html) — 읽는 문서: 680 칸, 조항 제목 h2, 항목은 표 */
.doc { font-size: 15.5px; line-height: 1.75; }
.doc > section { margin-top: 36px; }
.doc h2 { font-size: 19px; margin: 0 0 10px; }
.doc h3 { font-size: 15.5px; margin: 18px 0 0; }
.doc h3 + .table-wrap { margin-top: 8px; }
@media (min-width: 768px) { .doc h2 { font-size: 20px; } }
.doc p { margin: 0 0 10px; text-wrap: pretty; }
.doc ul { margin: 0 0 10px; padding-left: 1.2em; }
.doc li + li { margin-top: 4px; }
.doc li > ul { margin: 4px 0 0; }   /* 처리방침 2장 '그 전이라도' 아래 기간 목록 */
.doc .table-wrap { margin: 12px 0; }
.doc .table { font-size: 14.5px; }
/* 이름 칸 폭을 고정 — 표마다 값이 같은 자리에서 시작한다(표 사이에서 왼쪽 끝이 들쭉날쭉하지 않게) */
.doc .table { table-layout: fixed; }
.doc .table th[scope="row"] { width: 7.5em; background: none; color: var(--ink); font-size: 14px; font-weight: 700; white-space: normal; border-top: 1px solid var(--line); vertical-align: top; padding-top: 12px; }
@media (min-width: 768px) { .doc .table th[scope="row"] { width: 8.5em; } }
.doc .table tbody:first-child > tr:first-child > * { border-top: 0; }   /* 머리줄 없는 표: 맨 위 선 없이 */
/* 휴대폰(480 미만): 이름 칸(7.5em)을 옆에 세우면 내용 칸이 200px 남짓이라 '쓰는 곳'이 일곱 줄로 늘어진다 — 이름을 작은 라벨로
   위에 쌓고 내용은 칸을 다 쓴다(넓은 화면은 두 칸 그대로) */
@media (max-width: 479px) {
  .doc .table, .doc .table tbody, .doc .table tr { display: block; }
  .doc .table th[scope="row"], .doc .table td { display: block; width: auto; }
  .doc .table th[scope="row"] { padding: 12px 16px 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .doc .table td { padding: 2px 16px 12px; border-top: 0; }
}
.doc .table a { font-weight: 600; }
.doc .table td { text-wrap: pretty; }   /* 마지막 줄에 '글)' 같은 한 글자만 남지 않게 */
.doc-meta { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }

.state-card { width: 100%; max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 40px 24px 32px; }
@media (min-width: 768px) { .state-card { padding: 52px 48px 44px; } }
.state-card .state-icon { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 20px; }
.state-card .state-icon .icon { width: 28px; height: 28px; }
.state-card .state-mascot { width: 104px; margin-bottom: 16px; }
.state-card h1 { font-size: clamp(28px, 7vw, 36px); margin-bottom: 10px; }
.state-card .lead { font-size: 16.5px; margin: 0 auto; text-wrap: balance; }
.state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }

/* 지망 전략 미리보기(게스트) */
.preview-hero { position: relative; }
.preview-hero h1 { padding-right: 96px; }
.preview-hero .mascot { position: absolute; right: -6px; top: -4px; width: 104px; pointer-events: none; }
@media (min-width: 768px) { .preview-hero { padding-right: 176px; } .preview-hero h1 { padding-right: 0; } .preview-hero .mascot { width: 150px; right: 0; top: -8px; } }
.benefits { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 768px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.benefit { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
@media (min-width: 768px) { .benefit { flex-direction: column; padding: 24px; } }
.benefit h3, .benefit-title { font-size: 17px; line-height: 1.45; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.benefit p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.sample { margin-top: 28px; padding: 22px 22px 18px; }
.sample-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.sample-head b { font-size: 15px; }
.sample-list { list-style: none; display: grid; gap: 8px; }
.sample-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--blue-tint); font-size: 15px; }
/* 순위 원은 1~3위 모두 딥블루 — 지도·순위 범례(1~5위 딥블루, 6~10위 옅은 파랑)와 같게 */
.sample-list .rank { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-display); font-size: 16px; }
.sample-list .name { font-weight: 700; }
.sample-list .why { color: var(--ink-2); font-size: 14px; margin-left: auto; text-align: right; }
.sample-note { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); }
.cta-band { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
@media (min-width: 640px) { .cta-band { flex-direction: row; align-items: center; } }
.cta-band p { margin: 0; font-size: 14px; color: var(--ink-2); }
.page-head + .cta-band { margin-top: -8px; }   /* 리드 바로 밑(strategy_locked.html) — 휴대폰에서 혜택 카드보다 먼저 */
@media (min-width: 768px) { .page-head + .cta-band { margin-top: -16px; } }
/* 재원생이 아닌 학부모님: 상담 신청(바닥과 같은 단추) — 테두리만 있는 흰 면(홈 신뢰 줄과 같은 결), 그림자 없이 */
.guest-consult { margin-top: 40px; padding: 22px 20px; border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 768px) { .guest-consult { margin-top: 48px; padding: 28px 32px; } }
.guest-consult-title { margin: 0 0 4px; font-size: 17px; }
.guest-consult p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.guest-consult .guest-consult-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 479px) { .guest-consult-actions .btn { flex: 1 1 100%; } }
.guest-consult .guest-consult-hours { margin-top: 10px; font-size: 13px; }

/* ── 관리자 ────────────────────────────────────────────────────────────── */
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.admin-head h1 { margin: 0; }
.admin-section { margin-top: 20px; }
.tiles-4 { margin-bottom: 4px; }
@media (min-width: 980px) { .tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.admin-cols { display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .admin-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.admin-section .section-head h2 { font-size: 18px; }
.admin-section form { margin: 0; }
.admin-section > h2 { font-size: 18px; margin: 0 0 14px; }
.admin-meta { font-size: 13.5px; color: var(--ink-2); }
.admin-report h3 { font-size: 17px; margin: 0 0 6px; }
.admin-report ul { list-style: none; display: grid; gap: 8px; margin: 10px 0 0; }
.admin-report li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; }
.admin-report li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.admin-report h4 { margin: 18px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.err-text { color: var(--red); font-weight: 600; }
.ai-state .notice { margin-top: 12px; }
.report-note { margin: 0 0 16px; }   /* 새 리포트 만들기 실패 안내(admin.html ?error=…) — 리포트 칸 위, 중립 */
.notice-body { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }

/* ── 인쇄 ──────────────────────────────────────────────────────────────── */
@media print {
  .top, .foot, .skip-link, .action-bar, .toast, .sheet, .sheet-backdrop, .no-print,
  .cat-nav, .back-link, .filter-chips, .rcard-more, .rcard-zoom-pill, .fig-zoom, .page-head-actions, .list-end, .hero-cta, .feature-preview,
  .feature-top3, .reconsent-note, .school-more, .answer-next, .px-art, .page-head-fig { display: none !important; }
  .fig-bar { min-height: 0; }   /* '크게 보기'를 뺀 그림 밑 줄 — 설명이 없으면 빈칸이 남지 않게 */
  html, body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  .wrap { padding: 0; max-width: none; }
  .reveal, .reveal-stagger > * { animation: none !important; }
  /* 접힌 카드도 인쇄할 때는 모두 펼친다(그림 포함) */
  .rcard.is-clamped .rcard-body { max-height: none !important; -webkit-mask-image: none; mask-image: none; }
  .rcard.is-clamped .rcard-fig { display: block; }
  .rcard.is-clamped .rcard-src .src-name, .rcard.is-clamped .rcard-src .src-date, .rcard.is-clamped .rcard-src .src-sep { display: inline !important; }
  /* 화면에서만 쓰는 단추(학교 홈페이지·찾은 자료 바로 가기)는 빼고, 맨 위에 서비스 이름을 찍는다(지망 전략 PDF와 같은 결) */
  .school-hero .btn, .answer-src-badge { display: none !important; }
  /* AI에게 묻기: 빈 질문 칸·예시·인사말·기다림 표시는 종이에 쓸모가 없다(찾은 자료는 base.html이 인쇄 전에 펼친다) */
  .composer-wrap, .greet, .examples, .ask-note, .pending { display: none !important; }
  /* 접어 둔 내용(그림 내용 글로 읽기·지난 설명회 안내)은 base.html이 인쇄 전에 펼친다 — 종이에서 누를 수 없는 펼침 줄은 빼고 내용만 */
  .fig-text summary, .ev-more summary { display: none !important; }
  /* 스크립트가 옮긴 초점(읽기 시작점)·누른 단추의 고리가 종이에 찍히지 않게 */
  :focus, :focus-visible { outline: none !important; }
  .src-item { box-shadow: none !important; border: 1px solid #ddd; }
  /* 맨 위 서비스 이름 — 학원 이름은 base.html <main data-print-brand>(설정 ACADEMY_NAME)에서 */
  .wrap::before { content: attr(data-print-brand); display: block; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #ddd; font: 700 13px/1.4 var(--font-body); color: #131D88; }
  .rcard, .school-card, .src-item { break-inside: avoid; }
  /* 기본 정보 카드는 한 쪽보다 길 수 있다 — 통째로 다음 쪽으로 밀어 첫 쪽이 비지 않게, 덩어리(타일 줄·항목 줄·안내)만 지킨다 */
  .facts-card { break-inside: auto; }
  .facts-card .tiles, .facts-list > div, .facts-notes { break-inside: avoid; }
  /* 제목이 쪽 끝에 홀로 남고 내용은 다음 쪽으로 넘어가지 않게 */
  h2, .section-head, .list-group, .sources-head { break-after: avoid; page-break-after: avoid; }
}

/* 고대비(강제 색) 모드: 배경색이 지워져도 선택된 칩·탭이 구분되게 */
@media (forced-colors: active) {
  /* SVG 아이콘은 강제 색이 color를 바꾸지 않는다(크롬) — 검은 바탕에 딥블루로 남아 거의 안 보이므로 글자색으로 */
  .icon, svg[aria-hidden="true"] { color: CanvasText !important; }   /* .notice > .icon 같은 더 구체적인 색 지정보다 앞서게 */
  .chip[aria-pressed="true"], .chip[aria-checked="true"], .cat-nav .chip[aria-current="true"],
  .seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > [aria-current] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
  :is(.chip[aria-pressed="true"], .chip[aria-checked="true"], .cat-nav .chip[aria-current="true"], .seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > [aria-current]) .icon { color: HighlightText !important; }
  .top-menu-link[aria-current="page"]::after { background: Highlight; }
  .progress > i { forced-color-adjust: none; background: Highlight; }   /* 진행 막대(배경색)가 지워지지 않게 */
  .brand img { forced-color-adjust: none; background: #fff; border-radius: 4px; }   /* 진한 로고가 검은 바탕에 묻히지 않게 */
  /* 입력 칸 초점: 그림자·테두리 색이 지워져도 보이게(WCAG 2.4.7) */
  .input:focus, .composer:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
  .filter-chips .chip[aria-pressed="true"] > .chip-check { color: HighlightText !important; }
}