/* AI 디자인 스튜디오 — 디자인 시스템 (단일 원본)
 *
 * 허브 · 강의 · 포털 · 교안이 전부 이 파일을 읽습니다.
 * 색이나 타이포를 바꿀 일이 생기면 여기 한 곳만 고치세요.
 *
 * 각 페이지는 자기가 쓰던 변수명을 그대로 두고 여기 값을 가리키게만 해뒀습니다.
 *   예) 강의 페이지의 --text  →  var(--ds-ink)
 * 규칙이 하나 있습니다. 네온(--ds-neon)은 '면'에만 씁니다.
 * 흰 배경 위 초록 '글자'는 반드시 --ds-brand 입니다. 네온을 글자로 쓰면 안 읽힙니다.
 */

:root{
  /* ── 중립색 — 따뜻한 종이. 순백은 쓰지 않습니다 ─────────────────── */
  --ds-bg:#F1EFE9;          /* 페이지 바닥 */
  --ds-surface:#FCFBF7;     /* 카드·패널 */
  --ds-surface-2:#F2EFE7;   /* 살짝 눌린 면 */
  --ds-surface-3:#E9E5DA;   /* 더 눌린 면 · 진행바 트랙 */
  --ds-ink:#22221F;         /* 본문 */
  --ds-ink-strong:#191918;  /* 제목 · 어두운 면 */
  --ds-muted:#66665F;       /* 보조 텍스트 (바닥 위 5.0:1) */
  --ds-soft:#6B6B64;        /* 더 옅은 보조 */
  --ds-line:#E4DFD4;
  --ds-line-strong:#D5CFC0;

  /* ── 브랜드 — 터미널 인광 그린 ──────────────────────────────────── */
  --ds-neon:#00FF41;        /* 면 전용. 위에 얹는 글자는 --ds-ink-strong (12.9:1) */
  --ds-brand:#088127;       /* 밝은 배경 위 글자·링크 (5.0:1) */
  --ds-brand-strong:#055119;/* 더 눌러야 할 때 (9.6:1) */
  --ds-brand-soft:#EBFCEF;  /* 옅은 배경 */
  --ds-brand-line:#BFE9C7;  /* 옅은 테두리 */
  --ds-on-dark:#47FA75;     /* 어두운 면 위 글자 (12.1:1) */

  /* ── 보조색 — 의미가 있을 때만 ──────────────────────────────────── */
  --ds-amber:#E89324; --ds-amber-soft:#FBEFD9; --ds-amber-line:#EFD9AC;
  --ds-mint:#12936B;  --ds-mint-soft:#E2F4ED;  --ds-mint-line:#BEE6D6;
  --ds-teal:#0E8C9B;  --ds-teal-soft:#DEF1F4;  --ds-teal-line:#B6E0E6;
  --ds-red:#9B3D2A;   --ds-red-soft:#FAEDE9;

  /* ── 어두운 면 (포털 사이드바 · 로그인 좌측) ────────────────────── */
  --ds-dark:#191918; --ds-dark-2:#262624; --ds-dark-3:#2E2E2A;
  --ds-on-dark-text:#B8B8B3; --ds-on-dark-dim:#96968F;

  /* ── 타이포 ─────────────────────────────────────────────────────
     한글이 주 언어라 Pretendard 하나로 통일했습니다. DM Sans 를 앞에 두면
     라틴만 다른 얼굴로 나와서 화면마다 인상이 어긋납니다. */
  --ds-font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ds-mono:'Space Mono','Pretendard Variable','Pretendard',ui-monospace,Menlo,monospace;

  /* 행간 — 한글은 라틴보다 넉넉해야 읽힙니다. 크기가 클수록 좁게. */
  --ds-lh-display:1.18;  /* 40px+ */
  --ds-lh-title:1.34;    /* 18~33px */
  --ds-lh-body:1.75;     /* 본문 문단 */
  --ds-lh-ui:1.55;       /* 라벨·표·메뉴 */
  --ds-lh-flat:1;        /* 알약·뱃지 — 높이는 padding 으로만 */

  /* 자간 — 한글 본문에 음수 자간은 금물. 큰 제목에만 살짝, 모노 대문자는 넓게. */
  --ds-ls-display:-.03em;
  --ds-ls-title:-.02em;
  --ds-ls-body:0;
  --ds-ls-mono:.06em;

  /* ── 모서리 · 그림자 · 간격 ─────────────────────────────────────── */
  --ds-r-sm:10px; --ds-r-md:14px; --ds-r-lg:18px; --ds-r-xl:22px; --ds-r-pill:999px;
  --ds-sh-sm:0 1px 2px rgba(25,25,24,.05),0 1px 3px rgba(25,25,24,.05);
  --ds-sh-md:0 6px 20px rgba(25,25,24,.08);
  --ds-sh-lg:0 18px 50px rgba(25,25,24,.10);
  --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px;
  --ds-s5:24px; --ds-s6:32px; --ds-s7:48px; --ds-s8:64px;
}