:root {
  --color-primary:        #6366f1;
  --color-primary-soft:   #eef2ff;
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-soft:   #f1f5f9;
  --color-text:           #1e293b;
  --color-muted:          #475569;
  --color-faint:          #94a3b8;
  --color-hairline:       #e2e8f0;
  --color-hairline-soft:  #f1f5f9;
  --color-pos:            #dc2626;
  --color-pos-bg:         #fee2e2;
  --color-pos-tick:       #fef2f2;
  --color-neg:            #2563eb;
  --color-neg-bg:         #dbeafe;
  --color-neg-tick:       #eff6ff;
  --color-neutral:        #64748b;
  --color-cash:           #10b981;
  --color-warn:           #f59e0b;
  --color-warn-bg:        #fef3c7;  /* 주의성 배지 배경 (pos-bg/neg-bg 와 같은 역할) */
  --color-warn-text:      #92400e;  /* warn-bg 위에 얹는 텍스트 — 작은 글씨 명암비 확보용 */

  /* 차트 계열색 — 부호(pos/neg)가 아니라 '누가'를 구분해야 하는 다계열 라인차트 전용.
     투자자 수급처럼 개인·외국인·기관을 한 차트에 겹칠 때만 쓴다.
     고정 순서로 배정하고 순환시키지 않는다. 색맹 안전성·명암비 검증 통과 조합. */
  --chart-1:              #d97706;  /* 개인 */
  --chart-2:              #6366f1;  /* 외국인 (primary 와 동일) */
  --chart-3:              #0d9488;  /* 기관 */
  --chart-ref:            #64748b;  /* 지수·주가 등 참조선 (점선, 보조축) */

  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  24px;
  --spacing-2xl: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

  --font-text: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* 수치 폰트: Inter (sales-pipeline 프로젝트와 동일). tabular 로 자리수 정렬 보완 */
  --font-num:  'Inter', 'Pretendard', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-family: var(--font-num); }
.pos { color: var(--color-pos); }
.neg { color: var(--color-neg); }
.muted { color: var(--color-faint); }
.sub { color: var(--color-muted); font-size: 12px; }

.hidden { display: none !important; }