/* Udemy Letter — 디자인 토큰 (독자 화면 · 어드민 · 대시보드 공통)
   규칙: 색·간격·반경·그림자·글꼴은 여기 변수만 사용. 다크 모드는 같은 이름의 값만 바뀜. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* 바탕 · 면 */
  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --bg-muted: #f0f0f3;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  /* 글자 */
  --ink: #16161d;
  --ink-2: #44444f;
  --ink-3: #6b6b78;      /* 흰 바탕 대비 5.2:1 */
  --ink-inverse: #ffffff;
  /* 브랜드 */
  --brand: #5624d0;      /* Udemy purple — 면·버튼 (대비 7.9:1) */
  --brand-hover: #401b9c;
  --brand-soft: #f1ecff;
  --brand-line: #d9ccff;
  --on-brand: #ffffff;   /* 브랜드 면 위 글자 */
  /* 선 */
  --line: #e6e6ec;
  --line-strong: #d1d1da;
  /* 상태 (의미 전용, 차트 시리즈 색으로 쓰지 않음) */
  --good: #0b7550;  --good-bg: #e6f6ef;
  --warn: #8a5300;  --warn-bg: #fdf3e1;
  --danger: #b02e2e; --danger-bg: #fdecec;
  /* 모양 */
  --r-sm: 8px; --r: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(22,22,29,.06), 0 1px 1px rgba(22,22,29,.04);
  --shadow-2: 0 6px 20px -6px rgba(22,22,29,.14), 0 2px 6px rgba(22,22,29,.06);
  --shadow-3: 0 24px 60px -18px rgba(22,22,29,.28);
  /* 간격 (4px 단위) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* 글꼴 */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 36px; --t-4xl: 48px;
  --measure: 680px;      /* 본문 한 줄 폭 */
  --wide: 1080px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111116; --bg-subtle: #17171e; --bg-muted: #1f1f28; --surface: #17171e; --surface-raised: #1f1f28;
    --ink: #f2f2f6; --ink-2: #c9c9d3; --ink-3: #9a9aa8;
    --brand: #a689ff; --brand-hover: #bba5ff; --on-brand: #111116; --brand-soft: #241d3d; --brand-line: #3c3166;
    --line: #2a2a35; --line-strong: #3a3a47;
    --good: #4fd1a1; --good-bg: #12302a; --warn: #f0b45a; --warn-bg: #33270f; --danger: #ff8080; --danger-bg: #3a1a1a;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 24px -8px rgba(0,0,0,.6); --shadow-3: 0 24px 60px -18px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111116; --bg-subtle: #17171e; --bg-muted: #1f1f28; --surface: #17171e; --surface-raised: #1f1f28;
  --ink: #f2f2f6; --ink-2: #c9c9d3; --ink-3: #9a9aa8;
  --brand: #a689ff; --brand-hover: #bba5ff; --on-brand: #111116; --brand-soft: #241d3d; --brand-line: #3c3166;
  --line: #2a2a35; --line-strong: #3a3a47;
  --good: #4fd1a1; --good-bg: #12302a; --warn: #f0b45a; --warn-bg: #33270f; --danger: #ff8080; --danger-bg: #3a1a1a;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 24px -8px rgba(0,0,0,.6); --shadow-3: 0 24px 60px -18px rgba(0,0,0,.7);
  color-scheme: dark;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}