/* 독립 실행용 디자인 토큰: claude.ai 대시보드가 제공하던 변수를 여기서 정의한다. */
:root {
  color-scheme: light;
  --font-anthropic-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-anthropic-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --color-bg: #faf9f6;
  --color-bg-subtle: #f2f0eb;
  --color-panel: #ffffff;
  --color-fg: #1f1e1c;
  --color-fg-muted: #6b6862;
  --color-border-line: #e3e0d9;
  --color-bad: #c2410c;
  --color-warn: #b45309;
  --color-ok: #15803d;
  --color-up: #15803d;
  --cds-text-secondary: var(--color-fg-muted);
  --cds-border: var(--color-border-line);
  --cds-surface-popover: #ffffff;
  --cds-shadow-popover: 0 6px 24px rgba(20, 18, 14, .14), 0 1px 3px rgba(20, 18, 14, .08);
  --cds-chart-1: #2f6fdb;
  --cds-chart-2: #e07a2e;
  --cds-chart-3: #2a9d8f;
  --cds-chart-4: #b45ea8;
  --cds-chart-5: #c9a227;
  --cds-chart-6: #5c7cfa;
  --cds-chart-7: #8a6d5a;
  --cds-chart-8: #4e9f3d;
  --cds-chart-muted: #b3afa6;
  --cds-chart-grid: #ebe8e1;
  --cds-chart-axis: #8c8880;
  --cds-chart-status-critical: #d14343;
  --cds-font-size-caption: 12px;
  --cds-font-size-body: 14px;
  --cds-font-size-title: 17px;
  --cds-font-size-heading: 22px;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 16px;
  --cds-gap-lg: 24px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 16px;
  --cds-pad-lg: 24px;
  --cds-radius: 10px;
  --cds-dur-slow: .3s;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: #1a1917;
    --color-bg-subtle: #22211e;
    --color-panel: #262522;
    --color-fg: #ecebe7;
    --color-fg-muted: #a6a39b;
    --color-border-line: #3a3834;
    --color-bad: #f2885a;
    --color-warn: #e8b04a;
    --color-ok: #5fcf85;
    --color-up: #5fcf85;
    --cds-surface-popover: #2e2d29;
    --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .5);
    --cds-chart-1: #6b9cf0;
    --cds-chart-2: #f0a062;
    --cds-chart-3: #4fc2b3;
    --cds-chart-4: #d58bcb;
    --cds-chart-5: #e2c35a;
    --cds-chart-6: #8ea4ff;
    --cds-chart-7: #b89a86;
    --cds-chart-8: #7cc46a;
    --cds-chart-muted: #6e6b64;
    --cds-chart-grid: #34322e;
    --cds-chart-axis: #8f8b83;
    --cds-chart-status-critical: #f07070;
  }
}
html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); -webkit-font-smoothing: antialiased; }
#dash-root { max-width: 1280px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.dash-skeleton { position: relative; min-height: 120px; border-radius: var(--cds-radius); background: linear-gradient(90deg, var(--color-bg-subtle) 0%, var(--color-panel) 50%, var(--color-bg-subtle) 100%); background-size: 200% 100%; animation: dash-sk 1.4s ease-in-out infinite; }
@keyframes dash-sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .dash-skeleton { animation: none; } }
.app-foot { max-width: 1280px; margin: 0 auto; padding: 8px 16px 32px; color: var(--color-fg-muted); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.app-foot a { color: inherit; }