/* =====================================================================
   Smartolic — 디자인 토큰 (md/design.md 가 단일 정의 소스)
   라이트가 기본, 다크는 같은 역할을 어둡게 재도출한 파생 테마.
   ===================================================================== */

/* ---------- 폰트: Pretendard Variable (9단계 굵기 100~900) ---------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root {
  /* 서체 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 굵기 9단계 */
  --w-thin:100; --w-extralight:200; --w-light:300; --w-regular:400; --w-medium:500;
  --w-semibold:600; --w-bold:700; --w-extrabold:800; --w-black:900;

  /* 자간 — 전역 기본값 */
  --tracking: -0.05em;

  /* 라운드 (design.md 스케일) */
  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:12px; --r-pill:9999px; --r-full:9999px;

  /* 간격 (4px 그리드) */
  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-xxl:48px;
}

/* ---------- 라이트 (기본) ---------- */
:root, [data-theme="light"] {
  /* 표면 — 흰 캔버스가 기준, 앱 바닥만 surface-soft */
  /* 네이티브 컨트롤(달력 아이콘·스크롤바·날짜 선택 팝업)을 라이트로 그리게 한다 */
  color-scheme: light;

  --bg-base:#F8FAFC;        /* 앱 바닥 */
  --bg-surface:#FFFFFF;     /* 카드 = 캔버스 */
  --bg-elevated:#F1F4F8;    /* hover / 안쪽 패널 */
  --bg-input:#FFFFFF;
  --border:#DDDDDD;         /* hairline */
  --border-strong:#9297A0;

  /* 텍스트 */
  --text-primary:#181D26;   /* ink */
  --text-secondary:#41454D; /* muted */
  --text-disabled:#9297A0;

  /* 브랜드 액션 — 니어블랙 CTA */
  --primary:#181D26;
  --primary-hover:#0D1218;
  --on-primary:#FFFFFF;

  /* 인터랙션(링크·포커스·강조) */
  --accent:#1B61C9;
  --accent-fill:#1B61C9;    /* 흰 글자를 얹는 솔리드 채움 */
  --accent-soft:rgba(27,97,201,.10);
  --focus:#458FFF;

  /* 상태 */
  --success:#006400;  --success-soft:rgba(0,100,0,.10);
  --warning:#A8761F;  --warning-soft:rgba(217,164,65,.16);
  --danger:#AA2D00;   --danger-soft:rgba(170,45,0,.10);   /* signature coral */
  --neutral:#41454D;

  /* 시그니처 (차트·강조 표면) */
  --sig-coral:#AA2D00; --sig-forest:#0A2E0E; --sig-cream:#F5E9D4;
  --sig-peach:#FCAB79; --sig-mint:#A8D8C4; --sig-yellow:#F4D35E; --sig-mustard:#D9A441;

  /* 필터 셀렉트 구분 틴트 */
  --tint-client:rgba(27,97,201,.08);   --rail-client:#1B61C9;
  --tint-campaign:rgba(10,46,14,.08);  --rail-campaign:#006400;
  --opt-client-bg:#FFFFFF;  --opt-client-fg:#181D26;
  --opt-campaign-bg:#FFFFFF; --opt-campaign-fg:#181D26;

  /* 그림자 — 최소한만 (color-block first) */
  --shadow-sm:0 1px 2px rgba(24,29,38,.06);
  --shadow-md:0 6px 20px rgba(24,29,38,.10);

  /* 차트 */
  --chart-1:#1B61C9; --chart-2:#AA2D00; --chart-3:#006400;
  --chart-4:#D9A441; --chart-5:#0A2E0E; --chart-6:#9297A0;
  --chart-grid:#DDDDDD; --chart-text:#41454D;
}

/* ---------- 다크 (파생) ---------- */
[data-theme="dark"] {
  /* 달력 아이콘·스크롤바·날짜 팝업이 자동으로 어두운 톤으로 반전된다 */
  color-scheme: dark;

  --bg-base:#181D26;        /* surface-dark */
  --bg-surface:#1D1F25;     /* surface-dark-elevated */
  --bg-elevated:#262A33;
  --bg-input:#14181F;
  --border:#333944;
  --border-strong:#5A6069;

  --text-primary:#F3F5F7;
  --text-secondary:#A6ACB8;
  --text-disabled:#6E747F;

  /* 어두운 표면 위에서는 흰 버튼이 primary (가이드의 button-secondary-on-dark 규칙) */
  --primary:#FFFFFF;
  --primary-hover:#E2E4E8;
  --on-primary:#181D26;

  --accent:#7FB0FF;
  --accent-fill:#2F6FD6;
  --accent-soft:rgba(127,176,255,.14);
  --focus:#458FFF;

  --success:#4FB865;  --success-soft:rgba(79,184,101,.14);
  --warning:#E0B45C;  --warning-soft:rgba(224,180,92,.14);
  --danger:#E5623A;   --danger-soft:rgba(229,98,58,.14);
  --neutral:#6E747F;

  --sig-coral:#E5623A; --sig-forest:#3E7A45; --sig-cream:#D9CDB6;
  --sig-peach:#FCAB79; --sig-mint:#A8D8C4; --sig-yellow:#F4D35E; --sig-mustard:#D9A441;

  --tint-client:rgba(127,176,255,.12);  --rail-client:#7FB0FF;
  --tint-campaign:rgba(79,184,101,.12); --rail-campaign:#4FB865;
  --opt-client-bg:#1E3350;  --opt-client-fg:#F3F5F7;
  --opt-campaign-bg:#1B3A24; --opt-campaign-fg:#F3F5F7;

  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 6px 20px rgba(0,0,0,.40);

  --chart-1:#7FB0FF; --chart-2:#E5623A; --chart-3:#4FB865;
  --chart-4:#E0B45C; --chart-5:#A8D8C4; --chart-6:#9297A0;
  --chart-grid:#333944; --chart-text:#A6ACB8;
}

/* ---------- 리셋 & 전역 타이포 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  letter-spacing: var(--tracking);   /* 전역 자간 -0.05em */
}
html, body { margin:0; padding:0; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--w-regular);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 폼 컨트롤은 폰트를 상속하지 않으므로 명시적으로 상속시킨다 */
input, button, select, textarea { font-family: inherit; letter-spacing: inherit; }

/* 숫자·코드는 자간을 풀어 가독성 확보 (design.md 예외 규정) */
.mono, code, kbd, pre, samp,
.num, .kpi-num, .deal-amount, [class*="tabular"] {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.mono, code, kbd, pre, samp { font-family: var(--font-mono); }

/* 표제는 굵기가 아니라 크기·대비로 강조한다 (design.md 원칙) */
h1, h2, h3, h4 { font-weight: var(--w-medium); margin:0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }