/* =========================================================
   차세대 대학 챗봇형 홈페이지 — Design Tokens
   브랜드: 화이트라벨 기본 테마 = 네이비. 학교별 교색으로 교체
   교체 시 --brand-* 4개만 바꾸면 전체 반영됨
   ========================================================= */
/* 폰트: 설치형(내부망) 배포 시 Pretendard woff2를 /fonts 에 동봉하고 @font-face로 로드. 외부 CDN 금지. */

:root {
  /* ---- Brand (교체 지점) ---- */
  --brand: #1e3a6e;          /* 네이비 · 흰 배경 대비 11.1:1 */
  --brand-strong: #142a52;   /* hover/pressed · 14.2:1 */
  --brand-subtle: #eef2f8;   /* 선택·강조 배경 (텍스트 배경 아님 X) */
  --brand-line: #b9c6dc;     /* 브랜드 보더 */

  /* ---- Neutral (모노톤) ---- */
  --ink-900: #111418;        /* 본문 제목 · 18.4:1 */
  --ink-700: #3a4048;        /* 본문 · 10.6:1 */
  --ink-500: #5f6670;        /* 보조 텍스트 · 5.8:1 (최소 사용 단계) */
  --ink-400: #8a9099;        /* 비활성 전용 (텍스트 대비 기준 예외) */
  --line: #dfe2e6;
  --line-strong: #8e949c;    /* 컨트롤·카드 보더 · 3.1:1 (비텍스트 대비) */
  --surface: #ffffff;
  --surface-sunken: #f5f6f7;
  --surface-inverse: #111418;

  /* ---- Status (색 + 아이콘 + 텍스트 병기 필수) ---- */
  --positive: #0a7a3e;       --positive-bg: #e9f5ee;   /* 해당 가능 · 5.4:1 */
  --caution: #8a5300;        --caution-bg: #fdf3e1;    /* 확인 필요 · 6.3:1 */
  --negative: #b42318;       --negative-bg: #fbeceb;   /* 해당 없음/오류 · 6.4:1 */

  --focus: #1e3a6e;          /* 테마 교체 시 --brand와 함께 교체 */
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ---- Type ---- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --num: tabular-nums;       /* font-variant-numeric */

  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-label: 13px;    --lh-label: 18px;
  --fs-body-sm: 14px;  --lh-body-sm: 22px;
  --fs-body: 16px;     --lh-body: 26px;
  --fs-title-sm: 18px; --lh-title-sm: 26px;
  --fs-title: 20px;    --lh-title: 28px;
  --fs-heading: 26px;  --lh-heading: 34px;
  --fs-heading-lg: 34px; --lh-heading-lg: 44px;
  --fs-num-lg: 40px;   /* 카드 내 숫자 */
  --fs-num-xl: 64px;   /* D-day 강조 */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-tight: -0.02em;

  /* ---- Space (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --touch-min: 44px;

  /* ---- Radius (절제) ---- */
  --radius-xs: 2px;  /* 배지 */
  --radius-sm: 4px;  /* 칩·버튼·입력 */
  --radius-md: 6px;  /* 카드·메인 입력창 */

  /* ---- Elevation (오버레이에만) ---- */
  --shadow-overlay: 0 6px 24px rgba(17, 20, 24, 0.14);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }

/* ---- Focus (KWCAG 2.1.2 — outline 제거 금지) ---- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---- Motion keyframes ---- */
@keyframes stream-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes skeleton-pulse { 0% { background-color: #eceef0; } 50% { background-color: #f5f6f7; } 100% { background-color: #eceef0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}