/* ===========================================================
   만두야 (min.func.co.kr) — 디자인 토큰 v1.0
   확정일 2026-08-03

   시안 5종에서 실제 사용된 색 77종을 대조하여 정리한 확정 토큰.
   중립색 파생값 22종 → 9단계 스케일로 통합.

   규칙
   - 이 파일에 없는 색상값을 컴포넌트에 직접 쓰지 않는다
   - 새 색이 필요하면 이 파일에 토큰을 추가하고 그 토큰을 참조한다
   - 하드코딩된 hex가 코드에 등장하면 리뷰에서 반환
   =========================================================== */

:root {
  /* ---------- 중립 스케일 (웜 그레이) ---------- */
  --n-0:    #FFFFFF;   /* 카드 배경 */
  --n-25:   #FDFBF7;   /* 페이지 배경 */
  --n-50:   #F7F2E9;   /* 서브 배경, 입력 필드 */
  --n-100:  #EFE9DD;   /* hover 배경 */
  --n-200:  #E8E0D2;   /* 카드 테두리 */
  --n-300:  #DCD2C2;   /* 구획 테두리, 강조 테두리 */
  --n-400:  #BCB1A3;   /* 비활성 아이콘, 플레이스홀더 */
  --n-500:  #8A7E72;   /* 캡션 */
  --n-600:  #6E6357;   /* 보조 강조 */
  --n-700:  #4A4038;   /* 본문 보조 */
  --n-900:  #2A2320;   /* 본문 */

  /* ---------- 브랜드 ---------- */
  --coral-50:   #FBEDE7;   /* 선택 상태 배경 */
  --coral-100:  #F0C7B5;
  --coral-500:  #E8734A;   /* 기본 액센트, 주 버튼 */
  --coral-600:  #C95A34;   /* hover */
  --coral-700:  #B15328;   /* active */

  --teal-50:    #E8F2F0;
  --teal-500:   #6FA8A0;
  --teal-600:   #558C84;

  --amber-50:   #FCF3E0;
  --amber-500:  #E8A020;
  --amber-600:  #C8871A;

  /* ---------- 의미 토큰 (컴포넌트는 이것만 참조) ---------- */
  --bg-page:        var(--n-25);
  --bg-surface:     var(--n-0);
  --bg-sub:         var(--n-50);
  --bg-hover:       var(--n-100);
  --bg-selected:    var(--coral-50);
  --bg-canvas:      var(--n-50);

  --border:         var(--n-200);
  --border-strong:  var(--n-300);
  --border-accent:  var(--coral-500);

  --text-primary:   var(--n-900);
  --text-secondary: var(--n-700);
  --text-caption:   var(--n-500);
  --text-disabled:  var(--n-400);
  --text-accent:    var(--coral-500);
  --text-on-accent: #FFF8EF;

  --icon-default:   var(--n-600);
  --icon-muted:     var(--n-400);
  --icon-accent:    var(--coral-500);

  /* ---------- 만두 캐릭터 (테마 불변) ---------- */
  --mandu-body:    #F7E7CE;
  --mandu-stroke:  #A87C4F;
  --mandu-pleat:   #D9BC93;
  --mandu-cheek:   #F4A896;
  --mandu-eye:     #3D2B1F;
  --mandu-mouth:   #C1544A;
  --mandu-card:    #FFF8EF;   /* 캐릭터 시트 배경 */

  /* ---------- 과목 8색 ---------- */
  --sub-kor-bg: #FBE9E4;  --sub-kor-fg: #993C1D;
  --sub-mat-bg: #E6F1FB;  --sub-mat-fg: #185FA5;
  --sub-eng-bg: #EAF3DE;  --sub-eng-fg: #3B6D11;
  --sub-sci-bg: #E1F5EE;  --sub-sci-fg: #0F6E56;
  --sub-soc-bg: #FAEEDA;  --sub-soc-fg: #854F0B;
  --sub-his-bg: #F1EFE8;  --sub-his-fg: #5F5E5A;
  --sub-tec-bg: #EEEDFE;  --sub-tec-fg: #534AB7;
  --sub-jpn-bg: #FBEAF0;  --sub-jpn-fg: #993556;

  /* ---------- 타이포그래피 ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --fs-title:   26px;   --lh-title:   1.3;   /* 모바일 22px */
  --fs-title-m: 22px;
  --fs-section: 17px;   --lh-section: 1.4;
  --fs-body:    15px;   --lh-body:    1.7;
  --fs-sub:     13px;   --lh-sub:     1.5;
  --fs-caption: 12px;   --lh-caption: 1.4;

  --fw-normal: 400;
  --fw-medium: 500;
  /* 700 사용 금지 — 위계는 크기·색 대비로만 */

  --ls-title: -0.015em;

  /* ---------- 형태 ---------- */
  --r-card:   12px;
  --r-button: 10px;
  --r-pill:   20px;
  --r-input:  10px;
  --r-bar:    4px;    /* 진행바, 슬라이더 트랙 */
  --r-thin:   2px;

  --bw: 0.5px;        /* 전역 테두리 두께 */

  /* ---------- 간격 ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- 터치 타깃 ---------- */
  --touch-min: 44px;   /* 모바일 최소 */
  --touch-form: 48px;  /* 입력·주 버튼 */

  /* ---------- 모션 ---------- */
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  200ms;   /* 상한. 로딩 애니메이션만 예외 */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 그림자 (절제) ---------- */
  --shadow-card: 0 1px 2px rgba(42, 35, 32, 0.04);
  --shadow-pop:  0 4px 16px rgba(42, 35, 32, 0.10);

  /* ---------- 레이어 ---------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-sheet: 20;
  --z-modal: 30;
  --z-toast: 40;
}

/* ===========================================================
   다크 모드
   캔버스 에디터는 이 모드를 기본값으로 사용한다
   =========================================================== */
[data-theme="dark"] {
  --n-0:    #262220;   /* 카드 */
  --n-25:   #1C1917;   /* 페이지 배경 */
  --n-50:   #2E2725;   /* 서브 배경, 레이어 행 */
  --n-100:  #332B27;   /* hover, 선택 */
  --n-200:  #3A3330;   /* 테두리 */
  --n-300:  #4A423D;   /* 강조 테두리 */
  --n-400:  #6E655D;   /* 비활성 아이콘 — 텍스트에 사용 금지 */
  --n-500:  #A89D91;   /* 캡션 (다크 최소 대비 하한) */
  --n-600:  #C9C1B6;
  --n-700:  #C9C1B6;   /* 본문 보조 */
  --n-900:  #F5F0E8;   /* 본문 */

  --coral-50:  #332B27;
  --coral-500: #F08A63;
  --coral-600: #F7A583;
  --coral-700: #E8734A;

  --teal-500:  #7FBAB2;
  --amber-500: #F0B040;

  --bg-canvas: #141210;   /* 캔버스 뒷면. 가장 어두운 단계 */

  --shadow-card: none;
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* -----------------------------------------------------------
   다크 모드 대비 규칙 (필수 준수)
   - 12px 보조 텍스트는 --n-500(#A89D91) 이상만 사용
   - --n-400(#6E655D)은 아이콘 전용. 텍스트에 쓰면 4.5:1 미달
   - 과목 8색은 라이트 기준 배색이므로 다크에서는
     배경 opacity 0.18 + 텍스트를 밝은 파생값으로 대체
   ----------------------------------------------------------- */

/* ===========================================================
   기본 리셋 및 타이포 적용
   =========================================================== */
html {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-title);
}
h1 { font-size: var(--fs-title);   line-height: var(--lh-title); }
h2 { font-size: var(--fs-section); line-height: var(--lh-section); }

p { text-wrap: pretty; }

a {
  color: var(--coral-500);
  text-decoration: none;
}
a:hover { color: var(--coral-600); }

@media (max-width: 767px) {
  h1 { font-size: var(--fs-title-m); }
}

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

/* ===========================================================
   폰트 — 자체 호스팅 필수
   시안은 jsdelivr CDN을 참조했으나 운영에서는 다음 이유로 금지:
   1) 외부 CDN 장애 시 사이트 전체 렌더 지연
   2) 한글 가변 폰트 용량으로 FOUT 발생
   /public/fonts/ 에 배치하고 font-display: swap + preload 적용
   =========================================================== */
@font-face {
  font-family: "Pretendard Variable";
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-display: swap;
}