/* moa 공통 디자인 토큰 · 컴포넌트
   - 값은 Tailwind 스케일(간격 4px 단위, gray/indigo/emerald/amber/rose 팔레트)을 그대로 옮김
   - 라이트/다크: prefers-color-scheme + [data-theme] 수동 전환
   - 숫자는 항상 tabular-nums, 보조 텍스트는 크기 대신 색(gray-500)으로 위계 */
:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;

  --bg: #f9fafb;          /* gray-50 */
  --surface: #ffffff;
  --surface-2: #f3f4f6;   /* gray-100 */
  --line: #e5e7eb;        /* gray-200 */
  --line-soft: #f1f2f4;
  --ink: #111827;         /* gray-900 */
  --ink-2: #374151;       /* gray-700 */
  --mute: #6b7280;        /* gray-500 */
  --faint: #9ca3af;       /* gray-400 */

  --accent: #4f46e5;      /* indigo-600 — 페이지별로 덮어씀 */
  --accent-soft: #eef2ff; /* indigo-50 */
  --accent-ink: #3730a3;  /* indigo-800 */

  --ok: #059669;   --ok-soft: #ecfdf5;    /* emerald */
  --warn: #d97706; --warn-soft: #fffbeb;  /* amber */
  --bad: #e11d48;  --bad-soft: #fff1f2;   /* rose */
  --info: #2563eb; --info-soft: #eff6ff;  /* blue */
  --off: #9ca3af;  --off-soft: #f3f4f6;

  /* 경쟁 강도 4단계 (순서형 → 한 계열의 명도 + 끝단만 강조) */
  --lv-low: #059669; --lv-low-soft: #ecfdf5;
  --lv-medium: #d97706; --lv-medium-soft: #fffbeb;
  --lv-high: #ea580c; --lv-high-soft: #fff7ed;
  --lv-extreme: #e11d48; --lv-extreme-soft: #fff1f2;

  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.05);
  --shadow: 0 1px 3px rgb(17 24 39 / 0.08), 0 1px 2px rgb(17 24 39 / 0.04);
  --shadow-lg: 0 10px 30px -8px rgb(17 24 39 / 0.18), 0 4px 10px -4px rgb(17 24 39 / 0.08);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12; --surface: #12151c; --surface-2: #1a1e27; --line: #262b36; --line-soft: #1c2029;
    --ink: #f3f4f6; --ink-2: #d1d5db; --mute: #9ca3af; --faint: #6b7280;
    --accent: #818cf8; --accent-soft: #1e1b4b; --accent-ink: #c7d2fe;
    --ok: #34d399; --ok-soft: #052e22; --warn: #fbbf24; --warn-soft: #2b1d05;
    --bad: #fb7185; --bad-soft: #3a0d19; --info: #60a5fa; --info-soft: #0b1e3d; --off: #6b7280; --off-soft: #1a1e27;
    --lv-low: #34d399; --lv-low-soft: #052e22; --lv-medium: #fbbf24; --lv-medium-soft: #2b1d05;
    --lv-high: #fb923c; --lv-high-soft: #331505; --lv-extreme: #fb7185; --lv-extreme-soft: #3a0d19;
    --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0d12; --surface: #12151c; --surface-2: #1a1e27; --line: #262b36; --line-soft: #1c2029;
  --ink: #f3f4f6; --ink-2: #d1d5db; --mute: #9ca3af; --faint: #6b7280;
  --accent: #818cf8; --accent-soft: #1e1b4b; --accent-ink: #c7d2fe;
  --ok: #34d399; --ok-soft: #052e22; --warn: #fbbf24; --warn-soft: #2b1d05;
  --bad: #fb7185; --bad-soft: #3a0d19; --info: #60a5fa; --info-soft: #0b1e3d; --off: #6b7280; --off-soft: #1a1e27;
  --lv-low: #34d399; --lv-low-soft: #052e22; --lv-medium: #fbbf24; --lv-medium-soft: #2b1d05;
  --lv-high: #fb923c; --lv-high-soft: #331505; --lv-extreme: #fb7185; --lv-extreme-soft: #3a0d19;
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.6 var(--font);
  font-feature-settings: "ss06"; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; }
.mute { color: var(--mute); } .faint { color: var(--faint); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 카드 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card .sub { color: var(--mute); font-size: 13px; }

/* 알약 */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 20px; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.bad { color: var(--bad); background: var(--bad-soft); }
.pill.info { color: var(--info); background: var(--info-soft); }
.pill.off { color: var(--mute); background: var(--off-soft); }
.pill.accent { color: var(--accent-ink); background: var(--accent-soft); }
.pill.outline { background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 500; font-size: 13px;
  transition: background-color .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.primary:hover { opacity: .9; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.icon { width: 34px; padding: 0; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: progress; }

/* 세그먼트 */
.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: var(--r); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--mute); transition: all .15s var(--ease); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* 표 */
.table-wrap { overflow-x: auto; }
table.t { border-collapse: collapse; width: 100%; font-size: 13px; }
table.t th { text-align: left; font-weight: 600; font-size: 12px; color: var(--mute); padding: 10px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); position: sticky; top: 0; z-index: 1; }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--surface-2); }
table.t td.num, table.t th.num { text-align: right; white-space: nowrap; }

/* KPI */
.kpi { padding: 16px 18px; }
.kpi .label { font-size: 12px; color: var(--mute); font-weight: 500; }
.kpi .value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 4px; }
.kpi .foot { font-size: 12px; color: var(--mute); margin-top: 2px; }

/* 배너 */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); font-size: 13px; }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.info { background: var(--info-soft); color: var(--info); }
.banner b { font-weight: 600; }

/* 스켈레톤 */
/* 빛줄기는 transform 으로만 움직여 매 프레임 다시 칠하지 않는다 (예전: background-position 애니메이션 = 매 프레임 repaint) */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
  animation: skel 1.2s infinite var(--ease); }
@keyframes skel { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } * { transition: none !important; } }

/* 빈 상태 */
.empty { padding: 40px 20px; text-align: center; color: var(--mute); font-size: 13px; }
.empty b { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 4px; }

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: var(--r); font-size: 13px;
  box-shadow: var(--shadow-lg); transition: all .2s var(--ease); z-index: 100; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }