:root {
  --toss-bg: #f8fafc;
  --toss-surface: #ffffff;
  --toss-text: #0f172a;
  --toss-text-secondary: #334155;
  --toss-text-tertiary: #64748b;
  --toss-border: #e3e8ef;
  --toss-blue: #6158d8;
  --toss-blue-light: #eceaff;
  --toss-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  --toss-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.07);
  --toss-radius: 18px;
  --toss-radius-small: 14px;
  --ui-blue-hover: #554ec7;
  --ui-blue-active: #4b44b5;
  --ui-ease: 160ms ease;
  --ui-focus-ring: 0 0 0 3px rgba(97, 88, 216, 0.18);

  /* Sync Bootstrap primary utilities (e.g. text-primary, spinner, btn-primary). */
  --bs-primary: #6158d8;
  --bs-primary-rgb: 97, 88, 216;
  --bs-link-color: #5c53c8;
  --bs-link-hover-color: #4b44b5;
}

body {
  font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  background: #ffffff;
}

.app-header {
  background: #ffffff;
}

.toss-card,
.ui-card {
  box-shadow: var(--toss-shadow);
  border: 1px solid var(--toss-border);
}

.toss-card:hover,
.ui-card:hover {
  box-shadow: var(--toss-shadow-hover);
  border-color: var(--toss-border);
}

.btn,
.input,
.textarea,
.icon-btn,
.toss-card,
.ui-card {
  transition: all var(--ui-ease);
}

.btn-primary {
  background: var(--toss-blue);
  box-shadow: 0 12px 28px rgba(97, 88, 216, 0.22);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--ui-blue-hover);
  color: #ffffff;
}

.btn-primary:active {
  background: var(--ui-blue-active);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(97, 88, 216, 0.18);
}

.btn-ghost:hover {
  background: #eef2f7;
}

.input:focus,
.textarea:focus,
select.input:focus {
  box-shadow: var(--ui-focus-ring);
}

.bottom-nav {
  background: #ffffff;
  backdrop-filter: none;
}

.bottom-nav .nav-item:hover .nav-icon,
.bottom-nav .nav-item:hover .nav-label {
  color: var(--toss-blue);
}