:root {
  --radius: 0.5rem;
  --j-space-1: 4px;
  --j-space-2: 8px;
  --j-space-3: 12px;
  --j-space-4: 16px;
  --j-control-h: 28px;
  /* J-Component 밀도 토큰 override (기본값: packages/themes.css 참조) */
  /* --j-ctl-h-sm: 1.75rem; */  /* 28px - 변경 시 주석 해제 */
  /* --j-ctl-h-md: 2.25rem; */  /* 36px */
  /* --j-ctl-h-lg: 2.5rem;  */  /* 40px */
  --j-grid-header-h: 26px;
  --j-grid-filter-h: 22px;
  --j-grid-row-h: 24px;
  --j-grid-footer-h: 24px;
}

.dark {
  /* 다크 모드 변수는 각 테마에서 정의됨 */
}

/* ── 반응형 토큰 오버라이드 ─────────────────────────────── */
/* 모바일 (<768px): 터치 타겟 증가, 폰트 스케일링 */
@media (max-width: 767px) {
  :root {
    --j-grid-row-h: 36px;
    --j-grid-header-h: 32px;
    --j-grid-footer-h: 28px;
    --j-control-h: 36px;
  }
  body {
    font-size: 14px;
  }
}

/* 태블릿 (768px ~ 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --j-grid-row-h: 28px;
    --j-grid-header-h: 28px;
  }
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family:
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans KR",
    sans-serif;
  font-size: 13px;
  line-height: 1.4;
}