/* =====================================================================
   Daol Onboarding Dashboard — Design Tokens & Component Utilities
   다올투자증권 AI 역량강화 교육 OT 자산 기반
   사용법: <link rel="stylesheet" href="tokens.css"> 또는 본 파일 복붙
   ===================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root {
  /* ---------- Brand: Primary (Daol Navy) ---------- */
  --daol-primary: #002060;
  --daol-primary-50: #E8EDF6;
  --daol-primary-100: #C7D3E9;
  --daol-primary-200: #94A8CF;
  --daol-primary-300: #6182B8;
  --daol-primary-400: #2F5C9F;
  --daol-primary-500: #0C3C84;
  --daol-primary-600: #002060;
  --daol-primary-700: #001B52;
  --daol-primary-800: #001543;
  --daol-primary-900: #000E2E;

  /* ---------- Accent: Teal ---------- */
  --daol-teal: #1CBABA;
  --daol-teal-50: #E4F8F8;
  --daol-teal-100: #BFEFEF;
  --daol-teal-200: #8AE2E2;
  --daol-teal-300: #55D5D5;
  --daol-teal-400: #1CBABA;
  --daol-teal-500: #159C9C;
  --daol-teal-600: #107C7C;
  --daol-teal-700: #0B5C5C;

  /* ---------- Accent: Mint ---------- */
  --daol-mint: #00E5B9;
  --daol-mint-50: #E0FBF5;
  --daol-mint-100: #B3F5E8;
  --daol-mint-200: #66ECD1;
  --daol-mint-300: #1FE6BE;
  --daol-mint-400: #00E5B9;
  --daol-mint-500: #00C29C;
  --daol-mint-600: #009A7C;

  /* ---------- Accent: Purple ---------- */
  --daol-purple: #5732ED;
  --daol-purple-50: #EEEAFD;
  --daol-purple-100: #D6CCFA;
  --daol-purple-200: #B4A2F5;
  --daol-purple-300: #9277F1;
  --daol-purple-400: #7050EF;
  --daol-purple-500: #5732ED;
  --daol-purple-600: #4322C9;
  --daol-purple-700: #341B9C;

  /* ---------- Accent: Blue ---------- */
  --daol-blue: #348AE1;
  --daol-blue-50: #E7F1FB;
  --daol-blue-100: #C2DDF5;
  --daol-blue-200: #8ABFEC;
  --daol-blue-300: #5BA4E6;
  --daol-blue-400: #348AE1;
  --daol-blue-500: #2470C2;
  --daol-blue-600: #1B569A;

  /* ---------- Semantic ---------- */
  --daol-success: #00C29C;
  --daol-success-bg: #E0FBF5;
  --daol-success-fg: #009A7C;
  --daol-warning: #F5A623;
  --daol-warning-bg: #FEF3DC;
  --daol-warning-fg: #B8760D;
  --daol-danger: #E5484D;
  --daol-danger-bg: #FCE9EA;
  --daol-danger-fg: #B5282D;
  --daol-info: #348AE1;
  --daol-info-bg: #E7F1FB;
  --daol-info-fg: #1B569A;

  /* ---------- Neutral scale ---------- */
  --daol-white: #FFFFFF;
  --daol-neutral-50: #F7F8FA;
  --daol-neutral-100: #EEF0F4;
  --daol-neutral-200: #E3E6EC;
  --daol-neutral-300: #D0D5DE;
  --daol-neutral-400: #A9B1C0;
  --daol-neutral-500: #7C8499;
  --daol-neutral-600: #5A6478;
  --daol-neutral-700: #44546A;
  --daol-neutral-800: #2E3645;
  --daol-neutral-900: #1A2030;

  /* ---------- Background / Surface / Border ---------- */
  --daol-bg-base: #FFFFFF;
  --daol-bg-page: #F5F7FB;
  --daol-bg-subtle: #F0F3FA;
  --daol-bg-lavender: #EEEAFD;
  --daol-bg-mint-tint: #E4F8F8;

  --daol-surface: #FFFFFF;
  --daol-surface-raised: #FFFFFF;
  --daol-surface-sunken: #F7F8FA;
  --daol-surface-inverse: #002060;

  --daol-border: #E3E6EC;
  --daol-border-strong: #D0D5DE;
  --daol-border-subtle: #EEF0F4;
  --daol-border-accent: #BFEFEF;

  /* ---------- Text ---------- */
  --daol-text-primary: #1A2030;
  --daol-text-secondary: #44546A;
  --daol-text-muted: #7C8499;
  --daol-text-on-primary: #FFFFFF;
  --daol-text-on-accent: #FFFFFF;
  --daol-text-link: #2470C2;

  /* ---------- Gradients ---------- */
  --daol-grad-brand: linear-gradient(135deg, #348AE1 0%, #22A9D3 45%, #00E5B9 100%);
  --daol-grad-teal-mint: linear-gradient(135deg, #1CBABA 0%, #00E5B9 100%);
  --daol-grad-purple-blue: linear-gradient(135deg, #5732ED 0%, #4B4EE9 40%, #3094E0 100%);
  --daol-grad-navy-deep: linear-gradient(135deg, #002060 0%, #0C3C84 100%);
  --daol-grad-hero-bg: linear-gradient(120deg, #FFFFFF 0%, #E9F7FB 38%, #EFEAFD 100%);

  /* ---------- Typography ---------- */
  --daol-font-base: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --daol-font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, 'Pretendard', monospace;

  --daol-fs-display: 44px;
  --daol-fs-h1: 32px;
  --daol-fs-h2: 24px;
  --daol-fs-h3: 19px;
  --daol-fs-body: 15px;
  --daol-fs-small: 13px;
  --daol-fs-caption: 11px;
  --daol-fs-stat: 36px;

  --daol-lh-tight: 1.15;
  --daol-lh-heading: 1.3;
  --daol-lh-body: 1.6;

  --daol-fw-regular: 400;
  --daol-fw-medium: 500;
  --daol-fw-semibold: 600;
  --daol-fw-bold: 700;
  --daol-fw-extrabold: 800;

  /* ---------- Spacing (4px base) ---------- */
  --daol-space-1: 4px;
  --daol-space-2: 8px;
  --daol-space-3: 12px;
  --daol-space-4: 16px;
  --daol-space-5: 20px;
  --daol-space-6: 24px;
  --daol-space-8: 32px;
  --daol-space-10: 40px;
  --daol-space-12: 48px;
  --daol-space-16: 64px;
  --daol-space-20: 80px;
  --daol-space-24: 96px;

  /* ---------- Radius ---------- */
  --daol-radius-sm: 6px;
  --daol-radius-md: 10px;
  --daol-radius-lg: 14px;
  --daol-radius-xl: 20px;
  --daol-radius-2xl: 28px;
  --daol-radius-pill: 999px;
  --daol-radius-card: 16px;

  /* ---------- Shadows ---------- */
  --daol-shadow-sm: 0 1px 2px rgba(16, 27, 51, 0.06), 0 1px 3px rgba(16, 27, 51, 0.04);
  --daol-shadow-md: 0 4px 12px rgba(16, 27, 51, 0.08), 0 2px 4px rgba(16, 27, 51, 0.04);
  --daol-shadow-lg: 0 12px 28px rgba(16, 27, 51, 0.12), 0 4px 8px rgba(16, 27, 51, 0.05);
  --daol-shadow-card: 0 2px 8px rgba(0, 32, 96, 0.06), 0 8px 24px rgba(0, 32, 96, 0.05);
  --daol-shadow-focus: 0 0 0 3px rgba(52, 138, 225, 0.35);
  --daol-shadow-accent-glow: 0 8px 24px rgba(28, 186, 186, 0.28);

  /* ---------- Chart palette ---------- */
  --daol-chart-1: #002060;
  --daol-chart-2: #1CBABA;
  --daol-chart-3: #5732ED;
  --daol-chart-4: #348AE1;
  --daol-chart-5: #00E5B9;
  --daol-chart-6: #F5A623;
  --daol-chart-grid: #EEF0F4;
  --daol-chart-axis: #A9B1C0;
  --daol-chart-axis-label: #7C8499;

  /* ---------- z-index ---------- */
  --daol-z-dropdown: 1000;
  --daol-z-sticky: 1100;
  --daol-z-overlay: 1200;
  --daol-z-modal: 1300;
  --daol-z-popover: 1400;
  --daol-z-toast: 1500;
  --daol-z-tooltip: 1600;
}

/* =====================================================================
   Base reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--daol-font-base);
  font-size: var(--daol-fs-body);
  line-height: var(--daol-lh-body);
  color: var(--daol-text-primary);
  background: var(--daol-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
a { color: var(--daol-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: none; box-shadow: var(--daol-shadow-focus); border-radius: var(--daol-radius-sm); }

/* tabular figures for KPI/number-heavy tables */
.daol-tnum, .stat-card__value, .stat-value { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Typography utilities
   ===================================================================== */
.daol-display { font-size: var(--daol-fs-display); line-height: var(--daol-lh-tight); font-weight: var(--daol-fw-extrabold); letter-spacing: -0.02em; color: var(--daol-primary); }
.daol-h1 { font-size: var(--daol-fs-h1); line-height: 1.2; font-weight: var(--daol-fw-bold); letter-spacing: -0.02em; color: var(--daol-primary); }
.daol-h2 { font-size: var(--daol-fs-h2); line-height: var(--daol-lh-heading); font-weight: var(--daol-fw-bold); letter-spacing: -0.01em; color: var(--daol-text-primary); }
.daol-h3 { font-size: var(--daol-fs-h3); line-height: 1.35; font-weight: var(--daol-fw-semibold); letter-spacing: -0.01em; color: var(--daol-text-primary); }
.daol-body { font-size: var(--daol-fs-body); line-height: var(--daol-lh-body); font-weight: var(--daol-fw-regular); color: var(--daol-text-secondary); }
.daol-small { font-size: var(--daol-fs-small); line-height: 1.5; color: var(--daol-text-secondary); }
.daol-caption { font-size: var(--daol-fs-caption); line-height: 1.4; font-weight: var(--daol-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--daol-text-muted); }
.daol-muted { color: var(--daol-text-muted); }

/* Gradient text (brand headline accent, like slide-03 purple headline) */
.gradient-text { background: var(--daol-grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.gradient-text--purple { background: var(--daol-grad-purple-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.gradient-text--teal { background: var(--daol-grad-teal-mint); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Section title with leading accent bar (corporate look) */
.section-title { display: flex; align-items: center; gap: var(--daol-space-3); font-size: var(--daol-fs-h2); font-weight: var(--daol-fw-bold); color: var(--daol-text-primary); letter-spacing: -0.01em; margin-bottom: var(--daol-space-4); }
.section-title::before { content: ""; width: 5px; height: 22px; border-radius: var(--daol-radius-pill); background: var(--daol-grad-teal-mint); flex: none; }
.section-title__sub { display: block; font-size: var(--daol-fs-small); font-weight: var(--daol-fw-regular); color: var(--daol-text-muted); margin-top: 2px; }

/* =====================================================================
   Card
   ===================================================================== */
.card {
  background: var(--daol-surface);
  border: 1px solid var(--daol-border);
  border-radius: var(--daol-radius-card);
  box-shadow: var(--daol-shadow-card);
  padding: var(--daol-space-6);
}
.card--flush { padding: 0; overflow: hidden; }
.card--accent { border-top: 3px solid transparent; border-image: var(--daol-grad-brand) 1; }
.card--inverse { background: var(--daol-grad-navy-deep); border: none; color: var(--daol-text-on-primary); }
.card--inverse .card__title, .card--inverse .daol-h3 { color: var(--daol-text-on-primary); }
.card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--daol-space-4); }
.card__title { font-size: var(--daol-fs-h3); font-weight: var(--daol-fw-semibold); color: var(--daol-text-primary); }

/* =====================================================================
   Stat / KPI card
   ===================================================================== */
.stat-card {
  position: relative;
  background: var(--daol-surface);
  border: 1px solid var(--daol-border);
  border-radius: var(--daol-radius-card);
  box-shadow: var(--daol-shadow-card);
  padding: var(--daol-space-5) var(--daol-space-6);
  overflow: hidden;
}
/* left accent rail; override --stat-accent per card */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--stat-accent, var(--daol-grad-teal-mint));
}
.stat-card__label { font-size: var(--daol-fs-small); font-weight: var(--daol-fw-medium); color: var(--daol-text-muted); margin-bottom: var(--daol-space-2); }
.stat-card__value { font-size: var(--daol-fs-stat); line-height: 1.1; font-weight: var(--daol-fw-extrabold); letter-spacing: -0.02em; color: var(--daol-primary); font-variant-numeric: tabular-nums; }
.stat-card__unit { font-size: 60%; font-weight: var(--daol-fw-bold); color: var(--daol-text-secondary); margin-left: 2px; }
.stat-card__meta { display: flex; align-items: center; gap: var(--daol-space-2); margin-top: var(--daol-space-2); font-size: var(--daol-fs-small); }
.stat-card__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--daol-fw-semibold); }
.stat-card__delta--up { color: var(--daol-success-fg); }
.stat-card__delta--down { color: var(--daol-danger-fg); }

/* accent presets */
.stat-card--navy   { --stat-accent: var(--daol-grad-navy-deep); }
.stat-card--teal   { --stat-accent: var(--daol-grad-teal-mint); }
.stat-card--purple { --stat-accent: var(--daol-grad-purple-blue); }
.stat-card--blue   { --stat-accent: var(--daol-grad-brand); }

/* =====================================================================
   Badge
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: var(--daol-fs-caption); font-weight: var(--daol-fw-semibold); letter-spacing: 0.02em;
  border-radius: var(--daol-radius-pill);
  line-height: 1.4;
  background: var(--daol-neutral-100); color: var(--daol-text-secondary);
}
.badge--success { background: var(--daol-success-bg); color: var(--daol-success-fg); }
.badge--warning { background: var(--daol-warning-bg); color: var(--daol-warning-fg); }
.badge--danger  { background: var(--daol-danger-bg); color: var(--daol-danger-fg); }
.badge--info    { background: var(--daol-info-bg); color: var(--daol-info-fg); }
.badge--navy    { background: var(--daol-primary-50); color: var(--daol-primary); }
.badge--purple  { background: var(--daol-purple-50); color: var(--daol-purple-600); }
.badge--teal    { background: var(--daol-teal-50); color: var(--daol-teal-600); }
.badge--solid   { background: var(--daol-primary); color: var(--daol-text-on-primary); }
.badge--gradient { background: var(--daol-grad-brand); color: var(--daol-text-on-accent); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =====================================================================
   Chip / Tag (filter / category, like slide-03 top-left chip)
   ===================================================================== */
.chip, .tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: var(--daol-fs-small); font-weight: var(--daol-fw-medium);
  border-radius: var(--daol-radius-pill);
  border: 1px solid var(--daol-border-strong);
  background: var(--daol-surface); color: var(--daol-text-secondary);
  cursor: default; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip--active, .tag--active { background: var(--daol-primary); border-color: var(--daol-primary); color: var(--daol-text-on-primary); }
.chip--accent { background: var(--daol-teal-50); border-color: var(--daol-teal-100); color: var(--daol-teal-700); }
button.chip, .chip[role="button"] { cursor: pointer; }
button.chip:hover { border-color: var(--daol-teal-300); }

/* =====================================================================
   Button
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  font-size: var(--daol-fs-body); font-weight: var(--daol-fw-semibold);
  border-radius: var(--daol-radius-md);
  border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--daol-primary); color: var(--daol-text-on-primary); }
.btn--primary:hover { background: var(--daol-primary-500); box-shadow: var(--daol-shadow-md); }
.btn--gradient { background: var(--daol-grad-brand); color: var(--daol-text-on-accent); }
.btn--gradient:hover { box-shadow: var(--daol-shadow-accent-glow); }
.btn--accent { background: var(--daol-teal); color: var(--daol-text-on-accent); }
.btn--accent:hover { background: var(--daol-teal-500); box-shadow: var(--daol-shadow-md); }
.btn--secondary { background: var(--daol-surface); color: var(--daol-primary); border-color: var(--daol-border-strong); }
.btn--secondary:hover { border-color: var(--daol-primary-300); background: var(--daol-primary-50); }
.btn--ghost { background: transparent; color: var(--daol-text-secondary); }
.btn--ghost:hover { background: var(--daol-neutral-100); }
.btn--sm { padding: 6px 12px; font-size: var(--daol-fs-small); }
.btn--lg { padding: 13px 24px; font-size: var(--daol-fs-h3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* =====================================================================
   Progress bar (onboarding completion)
   ===================================================================== */
.progress { height: 8px; width: 100%; background: var(--daol-neutral-100); border-radius: var(--daol-radius-pill); overflow: hidden; }
.progress__bar { height: 100%; border-radius: inherit; background: var(--daol-grad-teal-mint); transition: width .4s ease; }
.progress__bar--navy { background: var(--daol-grad-navy-deep); }
.progress__bar--purple { background: var(--daol-grad-purple-blue); }

/* =====================================================================
   Layout helpers
   ===================================================================== */
.daol-page { min-height: 100vh; background: var(--daol-bg-page); }
.daol-hero-bg { background: var(--daol-grad-hero-bg); }
.daol-container { max-width: 1280px; margin: 0 auto; padding: var(--daol-space-8) var(--daol-space-6); }
.daol-grid { display: grid; gap: var(--daol-space-5); }
.daol-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.daol-grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.daol-divider { height: 1px; background: var(--daol-border); border: none; margin: var(--daol-space-6) 0; }

/* swatch helper for chart legends */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }