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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 루트 변수 설정 */
:root {
  /* 색상 변수 */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #333333;
  --background-color: #ffffff;
  --border-color: #dddddd;

  /* 폰트 크기 */
  --font-xs: 0.75rem; /* 12px */
  --font-sm: 0.875rem; /* 14px */
  --font-base: 1rem; /* 16px */
  --font-lg: 1.125rem; /* 18px */
  --font-xl: 1.25rem; /* 20px */
  --font-2xl: 1.5rem; /* 24px */

  /* 여백 */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */

  /* 반응형 breakpoint */
  --mobile: 768px;
  --tablet: 1024px;
  --desktop: 1280px;
}

/* 기본 폰트 및 색상 설정 */
html {
  font-size: 16px;
  line-height: 1.5;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    Roboto, sans-serif;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 컨테이너 */
.main-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* 스크롤바 커스텀 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: darken(var(--secondary-color), 10%);
}