/* 메가프로듀싱 디자인 토큰 — 모든 앱 화면이 공유하는 단 하나의 출처.
 *
 * 왜 파일로 뺐나: 화면마다 :root 를 따로 들고 있었고, dashboard 와 admin 은 같은 값을
 * 복사해 두고 login/onboarding 은 아예 없었다. 한쪽만 고치면 셋이 조용히 어긋난다.
 *
 * ★ Pretendard 를 실제로 받는다. 그동안 화면들이 font-family 에 'Pretendard' 라고
 *   적어만 두고 어디서도 로드하지 않아, 전부 맑은 고딕으로 떨어지고 있었다 —
 *   화면이 밋밋했던 가장 큰 이유다(랜딩만 제대로 받고 있었다).
 *   dynamic-subset 이라 한글도 필요한 글자만 내려온다(전체 폰트 대비 수십분의 일).
 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* ── 타이포 ────────────────────────────────────────────────────────
   * 크기를 7단계로 고정한다. 예전엔 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 /
   * 13.5 / 14 / 15 / 16 / 16.5 / 17 … 22가지가 섞여 있었다. 0.5px 차이는
   * 눈에 안 보이면서 화면마다 미묘하게 어긋난 인상만 남긴다.
   */
  --ff: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
        system-ui, "Segoe UI", sans-serif;
  --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-2xs: 11px;   /* 대문자 소캡션, 배지 */
  --fs-xs:  12px;   /* 보조 설명, 표 캡션 */
  --fs-sm:  13px;   /* 표 본문, 부가 정보 */
  --fs-md:  14px;   /* 기본 본문·버튼·입력 */
  --fs-lg:  16px;   /* 카드 제목 */
  --fs-xl:  20px;   /* 화면 제목 */
  --fs-2xl: 28px;   /* 지표 숫자 */
  --fs-3xl: 38px;   /* 큰 지표 */

  /* 굵기 — 700을 남발하면 화면이 소리를 지른다. 위계는 굵기보다 색으로 만든다. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --lh-tight: 1.25;   /* 제목·숫자 */
  --lh-snug:  1.45;   /* UI 라벨 */
  --lh-base:  1.6;    /* 본문 */

  /* 큰 글자는 자간을 좁혀야 덩어리로 읽힌다. 작은 글자는 반대로 살짝 넓힌다. */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-wide:  0.06em;

  /* ── 색 ────────────────────────────────────────────────────────────
   * 중성색에 파란기를 아주 살짝 넣는다(순회색은 화면에서 탁해 보인다).
   */
  --bg:        #f7f8fa;
  --bg-elev:   #f1f3f7;
  --surface:   #ffffff;
  --surface-2: #f3f5f9;

  --line:   #e8eaf0;   /* 기본 경계 — 옅게. 진한 선은 화면을 촘촘해 보이게 한다 */
  --line-2: #dcdfe8;   /* 강조 경계 */

  --ink:   #14171f;    /* 본문 */
  --sub:   #5a6272;    /* 보조 */
  --faint: #9aa1b1;    /* 흐림 */

  --brand:     #6d5cff;
  --brand-2:   #5847e8;
  --brand-ink: #5b4ce0;   /* 흰 배경 위 텍스트용(대비 확보) */
  --brand-bg:  #f0eeff;   /* 아주 옅은 브랜드 배경 */

  --ok:   #0e9f6e;
  --warn: #b7791f;
  --err:  #e0524d;
  --info: #2f6fed;

  /* ── 형태 ──────────────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* 그림자는 두 겹. 가까운 한 겹으로 윤곽을, 먼 한 겹으로 깊이를 만든다.
     한 겹만 쓰면 카드가 종이가 아니라 스티커처럼 보인다. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow:    0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px -18px rgba(16, 24, 40, .22);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 24px 48px -24px rgba(16, 24, 40, .28);

  --nav-w: 250px;

  /* ── 별칭 ──────────────────────────────────────────────────────────
   * 화면들이 이미 쓰고 있던 이름들. 전수 조사해 보니 --text / --soft / --bg-2 /
   * --ink-2 는 **어디에도 정의돼 있지 않았다** — 값이 없으니 그 자리가 조용히
   * 투명하거나 상속된 색으로 떨어졌다(경계선 없는 회색 상자 같은 것들). 이름을
   * 일일이 고치는 대신 여기서 이어 준다: 쓰는 곳이 많고, 뜻은 같다.
   */
  --text:   var(--ink);
  --ink-2:  var(--sub);
  --card:   var(--surface);
  --bg-2:   var(--bg-elev);
  --brand2: var(--brand-2);
  --soft:   var(--surface-2);   /* 옅은 채움(진행바 트랙, 안내 상자) */
}

:root[data-theme="dark"] {
  --bg:        #0e1016;
  --bg-elev:   #141822;
  --surface:   #161a24;
  --surface-2: #1d2230;

  --line:   #262c3a;
  --line-2: #333a4b;

  --ink:   #e9ecf3;
  --sub:   #9aa3b5;
  --faint: #6b7385;

  --brand-ink: #a99bff;
  --brand-bg:  #1e1b3a;

  --ok:   #34d399;
  --warn: #fbbf24;
  --err:  #f87171;
  --info: #60a5fa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -18px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -24px rgba(0, 0, 0, .8);
}

/* ── 기본 ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-snug);
  /* 안 켜면 Pretendard 가 윈도우 크롬에서 두껍고 뭉개져 보인다. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 숫자를 표·지표에서 세로로 맞춘다. 이게 없으면 금액이 한 줄씩 흔들려
   '대충 만든 화면' 인상을 준다 — 대시보드는 숫자가 주인공이라 특히 중요하다. */
table, .stat, .kpi, .num, tbody td { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }

/* 키보드 사용자에게만 초점 링을 보인다(마우스 클릭 때 테두리가 번쩍이지 않게). */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--brand); color: #fff; }

/* 스크롤바 — 기본 윈도우 스크롤바가 화면 인상을 크게 깎는다. */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--radius-pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }

/* 애니메이션을 끈 사용자에게는 전부 끈다(접근성 + 멀미 방지). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}