/* 디자인 토큰 — 시안에서 확정된 값. 여기 없는 색·간격을 페이지에 직접 쓰지 않는다. */

:root {
  /* 브랜드 — 로고에서 뽑은 실색 (src/assets/logo/weu.svg)
     시안 #46B6D0 은 흰 배경 대비 2.37:1 이라 글자로 쓰지 않는다.
     마크·채움·다크면 전용이고, 텍스트에는 --cyan-ink 를 쓴다. */
  --navy:        #0F1E6C;   /* 로고 워드마크 · 버튼 · 14.76:1 */
  --navy-hv:     #0b1652;
  --cyan:        #46B6D0;   /* 로고 마크 · 채움 — 텍스트 금지 */
  --cyan-lt:     #5fc4dc;   /* 다크면 위 시안 (7.32:1) */
  --cyan-ink:    #1A7387;   /* 시안 계열 텍스트 (5.46:1) */
  --cyan-50:     #eaf6fa;
  --cyan-100:    #cfe9f1;

  /* 이전 이름 — 점진 교체용 별칭 */
  --blue:        var(--cyan-ink);
  --blue-btn:    var(--navy);
  --blue-btn-hv: var(--navy-hv);
  --blue-dark:   var(--navy);
  --blue-50:     var(--cyan-50);
  --blue-100:    var(--cyan-100);

  /* 회색 10단 */
  --g50:  #f9fafb;
  --g100: #f2f4f6;
  --g200: #e5e8eb;
  --g300: #d1d6db;
  --g400: #b0b8c1;
  --g500: #8b95a1;
  --g600: #6b7684;
  --g700: #4e5968;
  --g800: #333d4b;
  --g900: #191f28;

  /* 판정색 — 문제 쪽에만 쓴다. 통과는 잉크로 둔다(초록 없음) */
  --miss:    #c0392f;
  --miss-bg: #fdf1ef;
  --warn:    #8a5a12;
  --warn-bg: #fff8ec;

  /* 네이버 — 네이버 화면을 재현할 때만. 우리 브랜드와 섞지 않는다 */
  --naver:    #03c75a;
  --naver-bg: #eaf7ef;

  /* 면 */
  --paper: #ffffff;
  --field: var(--g50);
  --line:  var(--g200);
  --hair:  var(--g100);

  /* 글자 */
  --ink:     var(--g900);
  --ink-2:   var(--g800);
  --ink-3:   var(--g700);
  --muted:   #646d79;   /* 5.24:1 on #fff · 4.76:1 on --g100 — 어느 면에서도 본문 기준을 넘긴다 */
  /* 아래 둘은 텍스트 금지. 최선의 배경(#fff)에서도 3.04·2.01 이라 어디에 올려도 미달이다.
     테두리·구분선·아이콘 채움에만 쓴다. 글자에 필요하면 --muted 를 쓴다. (--cyan 과 같은 규칙) */
  --muted-2: var(--g500);
  --faint:   var(--g400);

  /* 서체 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 모서리 */
  --r-sm:   6px;
  --r:      14px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* 그림자 */
  --shadow-card:  0 2px 8px rgba(2, 32, 71, .05), 0 12px 32px rgba(2, 32, 71, .08);
  --shadow-float: 0 24px 64px rgba(2, 32, 71, .16), 0 4px 16px rgba(2, 32, 71, .08);

  /* 레이아웃 */
  --maxw:   1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --ease:   cubic-bezier(.2, .8, .2, 1);
}

/* 모션을 줄여 달라는 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}