/* 박준T 수학 — 공용 디자인 토큰 (Vercel Geist 기반)
 *
 * 왜 이 파일이 생겼나
 *   페이지마다 각자 색과 글꼴을 만들어 썼다. 본문 폰트 4종, 강조색 5종,
 *   모서리 반경 20종. 같은 서비스인데 페이지를 옮기면 글꼴이 바뀌었다.
 *   값은 여기 한 곳에만 둔다. 페이지는 자기 이름을 여기에 연결만 한다.
 *
 * 한글에 대하여
 *   Geist 에는 한글이 없다. 그래서 라틴·숫자는 Geist, 한글은 Pretendard 로
 *   흘러가게 순서를 잡았다. 숫자가 Geist 로 잡히면 점수·포인트 표가 가지런해진다.
 *
 * 쓰는 법
 *   <link rel="stylesheet" href="/design.css"> 를 먼저 걸고,
 *   페이지의 :root 에서 자기 토큰을 여기 값에 연결한다.
 *     :root{ --ind:var(--g-blue); --bd:var(--g-line); --r:var(--g-r-md) }
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');
/* 한글은 '쓰는 글자 조각만' 받는 판(dynamic subset). 전체판은 굵기 하나에 약 780KB 라
   굵기 네댓 개를 쓰는 화면이 폰 데이터로 2~3MB 를 받고서야 글자가 제대로 떴다.
   글꼴 이름(Pretendard)과 모양은 같다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');

:root{
  /* ── 글꼴 ── 라틴·숫자는 Geist, 한글은 Pretendard 로 넘어간다 */
  --font-sans:'Geist','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',
              'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --font-mono:'Geist Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  /* ── 회색 ── Geist 의 무채색 계단. 밝은 쪽부터 */
  --g-bg:#ffffff;      /* 바탕 */
  --g-100:#fafafa;     /* 살짝 눌린 면 (표 머리, 입력칸 배경) */
  --g-200:#f2f2f2;     /* 눌린 면 */
  --g-300:#ebebeb;     /* 옅은 경계 */
  --g-line:#e5e5e5;    /* 기본 경계선 — 이 한 줄이 Geist 의 뼈대다 */
  --g-400:#d4d4d4;     /* 진한 경계 (입력칸 테두리) */
  --g-500:#8f8f8f;     /* 보조 글자 */
  --g-600:#666666;
  --g-700:#4d4d4d;
  --g-800:#333333;
  --g-900:#171717;     /* 본문 글자 · 기본 버튼 바탕 */

  /* ── 강조 ──
     선생님 도구는 파랑 하나. 학생·학부모가 보는 곳은 학원 색(남보라)을 쓴다.
     브랜드 색은 디자인 취향이 아니라 정체성이라 Geist 파랑으로 덮지 않는다. */
  --g-blue:#0070f3;
  --g-blue-d:#0761d1;
  --g-blue-l:#e8f2fe;
  --g-brand:#4f46e5;
  --g-brand-d:#4338ca;
  --g-brand-l:#eef0fe;

  /* ── 뜻이 있는 색 ── 상태를 말할 때만 */
  --g-green:#0f7b45;   --g-green-l:#e6f6ec;
  --g-amber:#a35200;   --g-amber-l:#fef5e7;
  --g-red:#c62b32;     --g-red-l:#fdeded;
  --g-purple:#6b46c1;  --g-purple-l:#f3eefc;

  /* ── 모서리 ── 네 단계뿐. 그 사이 값은 쓰지 않는다 */
  --g-r-sm:4px;
  --g-r-md:6px;
  --g-r-lg:8px;
  --g-r-xl:12px;
  --g-r-full:9999px;

  /* ── 간격 ── 4의 배수 */
  --g-sp-1:4px;  --g-sp-2:8px;  --g-sp-3:12px; --g-sp-4:16px;
  --g-sp-5:24px; --g-sp-6:32px; --g-sp-7:48px; --g-sp-8:64px;

  /* ── 그림자 ── Geist 는 그림자를 거의 안 쓴다. 경계선으로 층을 만든다 */
  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 2px 8px rgba(0,0,0,.06);
  --sh-lg:0 8px 30px rgba(0,0,0,.10);
}

/* 어두운 화면용 — 같은 이름, 값만 뒤집는다 */
.geist-dark{
  --g-bg:#000000;
  --g-100:#0a0a0a;
  --g-200:#141414;
  --g-300:#1f1f1f;
  --g-line:#2e2e2e;
  --g-400:#404040;
  --g-500:#8f8f8f;
  --g-600:#a1a1a1;
  --g-700:#b4b4b4;
  --g-800:#d4d4d4;
  --g-900:#ededed;
  --g-blue:#3291ff;
  --g-blue-d:#0070f3;
  --g-blue-l:#0d2847;
  --g-green:#50e3c2;   --g-green-l:#0b2c25;
  --g-amber:#f5a623;   --g-amber-l:#332107;
  --g-red:#ff6166;     --g-red-l:#3a1215;
  --g-purple:#a78bfa;  --g-purple-l:#241b3d;
  --g-brand:#8b83ff;   --g-brand-d:#6d63f5;  --g-brand-l:#1c1a3d;
}

/* 숫자가 흔들리지 않게. 점수·포인트·확률표에 쓴다 */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}