/* Toss-inspired design tokens — Pretendard + clean blue */

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

:root {
  /* Surfaces */
  --bg-canvas: #F2F4F6;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-muted: #F9FAFB;
  --bg-inset: #F7F8FA;

  /* Foreground */
  --fg-strong: #191F28;
  --fg-default: #333D4B;
  --fg-muted: #6B7684;
  --fg-subtle: #8B95A1;
  --fg-disabled: #B0B8C1;
  --fg-inverse: #FFFFFF;

  /* Lines */
  --line: #E5E8EB;
  --line-strong: #D1D6DB;
  --line-subtle: #EEF0F2;

  /* Brand (Toss-like blue) */
  --brand-50: #EBF4FF;
  --brand-100: #D6E6FF;
  --brand-200: #ADCCFF;
  --brand-500: #3182F6;
  --brand-600: #1B64DA;
  --brand-700: #1957C2;

  /* Semantic */
  --success: #15803D;
  --success-bg: #E6F4EA;
  --warning: #A16207;
  --warning-bg: #FEF3C7;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --info: #1B64DA;
  --info-bg: #EBF4FF;
  --neutral-bg: #F1F3F5;
  --neutral-fg: #4E5968;

  /* Accent (occasional secondary highlight) */
  --accent-purple: #7B61FF;
  --accent-purple-bg: #F1ECFF;
  --accent-mint: #00B894;
  --accent-mint-bg: #DDF7F0;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(17,24,39,0.04);
  --shadow-card-hover: 0 2px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(17,24,39,0.08);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.06), 0 24px 48px rgba(17,24,39,0.10);
  --shadow-pop: 0 8px 16px rgba(17,24,39,0.10), 0 24px 60px rgba(17,24,39,0.14);

  /* Motion */
  --ease-toss: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 360ms;

  /* Type */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --font-num: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
}

/* Resets / base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 1, 'ss03' 1;
}
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Number-tabular helper */
.num { font-variant-numeric: tabular-nums; }

/* Korean wrap helpers */
.kr-heading { word-break: keep-all; text-wrap: pretty; }

/* Scrollbar (subtle) */
.toss-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.toss-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.toss-scroll::-webkit-scrollbar-track { background: transparent; }

/* Spin */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #EEF0F2 0px, #F5F6F8 40px, #EEF0F2 80px);
  background-size: 600px;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* Slide up animation for bottom sheets */
@keyframes sheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }