/* 331클래스 디자인 토큰. 문서: docs/design-system.md
   모든 화면(랜딩·운영 스튜디오·기존 도구·수강생 화면·사이트 편집기)은 이 파일의 변수만 사용합니다.
   컴포넌트 CSS에 hex 색상을 직접 쓰지 않습니다. 새 색이 필요하면 여기에 토큰을 먼저 추가합니다. */
:root {
  /* 1. 원시 팔레트 (참조 전용. 컴포넌트에서는 아래 의미 토큰을 사용) */
  --grey-50: #F9FAFB;
  --grey-100: #F2F4F6;
  --grey-200: #E5E8EB;
  --grey-300: #D1D6DB;
  --grey-400: #B0B8C1;
  --grey-500: #8B95A1;
  --grey-600: #6B7684;
  --grey-700: #4E5968;
  --grey-800: #333D4B;
  --grey-900: #191F28;
  --blue-50: #F2F7FF;
  --blue-100: #E8F3FF;
  --blue-200: #C9DDFB;
  --blue-300: #90C2FF;
  --blue-400: #64A8FF;
  --blue-500: #3182F6;
  --blue-600: #1B64DA;
  --blue-700: #1957C2;
  --blue-800: #1B4CA3;
  --red-50: #FFF1F0;
  --red-100: #FFE4E2;
  --red-500: #F04452;
  --red-600: #D22030;
  --red-700: #B42318;
  --green-50: #EAF8F0;
  --green-100: #D4F0E0;
  --green-500: #03B26C;
  --green-700: #0E8A55;
  --orange-50: #FFF8EA;
  --orange-100: #FFEFD1;
  --orange-500: #F58700;
  --orange-700: #8A5A0B;
  --white: #FFFFFF;

  /* 2. 의미 토큰: 배경·표면 */
  --color-bg: var(--white);
  --color-bg-subtle: #F7F8FA;
  --color-bg-muted: var(--grey-100);
  --color-surface: var(--white);
  --color-surface-tint: var(--blue-50);
  --color-surface-sunken: var(--grey-50);
  --color-overlay: rgba(25, 31, 40, 0.48);
  --color-surface-translucent: rgba(255, 255, 255, 0.92);

  /* 3. 의미 토큰: 선 */
  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);
  --color-border-subtle: var(--grey-100);
  --color-border-primary: var(--blue-200);

  /* 4. 의미 토큰: 글자 */
  --color-text: var(--grey-900);
  --color-text-secondary: var(--grey-700);
  --color-text-tertiary: var(--grey-600);
  --color-text-muted: var(--grey-500);
  --color-text-disabled: var(--grey-400);
  --color-text-inverse: var(--white);
  --color-link: var(--blue-600);
  --color-link-hover: var(--blue-500);

  /* 5. 의미 토큰: 브랜드·상태 */
  --color-primary: var(--blue-500);
  --color-primary-strong: var(--blue-600);
  --color-primary-pressed: var(--blue-700);
  --color-primary-tint: var(--blue-50);
  --color-primary-tint-strong: var(--blue-100);
  --color-on-primary: var(--white);
  --color-danger: var(--red-600);
  --color-danger-text: var(--red-700);
  --color-danger-tint: var(--red-50);
  --color-danger-border: var(--red-100);
  --color-warning-text: var(--orange-700);
  --color-warning-tint: var(--orange-50);
  --color-warning-border: var(--orange-100);
  --color-success: var(--green-500);
  --color-success-text: var(--green-700);
  --color-success-tint: var(--green-50);
  --color-success-border: var(--green-100);
  --color-focus: var(--blue-500);

  /* 6. 모양 */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(25, 31, 40, 0.04), 0 2px 8px rgba(25, 31, 40, 0.04);
  --shadow-md: 0 6px 24px rgba(25, 31, 40, 0.08);
  --shadow-lg: 0 24px 64px rgba(25, 31, 40, 0.16);
  --shadow-primary: 0 12px 40px rgba(27, 100, 218, 0.04);

  /* 7. 간격 (4px 기준) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* 8. 글꼴 */
  --font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 22px;
  --text-3xl: 26px;
  --text-4xl: 30px;
  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* 9. 크기·레이아웃 */
  --control-height: 48px;
  --control-height-sm: 40px;
  --control-height-xs: 34px;
  --content-width: 640px;
  --content-width-wide: 1200px;
  --sidebar-width: 248px;
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;

  /* 10. 움직임 */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* 공용 기본값: 모든 문서가 같은 글꼴·초점 표시·링크 색을 갖습니다. */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-synthesis: none;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
/* 화면 전환 시 스크립트가 초점을 옮기는 본문 영역은 외곽선을 그리지 않습니다. */
[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--blue-100); color: var(--color-text); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}