/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.7);
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow-x: hidden;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  color: var(--color-text);
  line-height: 1;
}

/* 공통 변수 및 유틸리티 */

/* 글로벌 변수 정의 */
:root {
  /* 브레이크포인트 */
  --breakpoint-mobile: 767px;
  --breakpoint-laptop: 768px;
  --breakpoint-desktop: 1920px;

  /* 기본 크기 */
  --font-size-base: 0.5rem;     /* 8px */
  --spacing-base: 0.25rem;      /* 4px */

  /* 기본 폰트 굵기 */
  --font-weight-base: 400;     /* Regular */

  /* 기본 색상 */
  --color-text: #ffffff;      /* 흰색 */

  /* 폰트 크기 배율 */
  --scale-xs: 0.75;      /* x0.75 -> 6px */
  --scale-sm: 0.875;     /* x0.875 -> 7px */
  --scale-lg: 1.25;      /* x1.25 -> 10px */
  --scale-xl: 1.375;     /* x1.375 -> 11px */
  --scale-2xl: 1.5;      /* x1.5 -> 12px */
  --scale-3xl: 1.75;     /* x1.75 -> 14px */
  --scale-4xl: 2.25;        /* x2.0 -> 16px */
  --scale-5xl: 3;        /* x3.0 -> 24px */

  /* 간격 배율 */
  --space-1: calc(var(--spacing-base) * 1);     /* 4px */
  --space-2: calc(var(--spacing-base) * 2);     /* 8px */
  --space-3: calc(var(--spacing-base) * 3);     /* 12px */
  --space-4: calc(var(--spacing-base) * 4);     /* 16px */
  --space-5: calc(var(--spacing-base) * 5);     /* 20px */
  --space-6: calc(var(--spacing-base) * 6);     /* 24px */
  --space-8: calc(var(--spacing-base) * 8);     /* 32px */
  --space-10: calc(var(--spacing-base) * 10);   /* 40px */
  --space-12: calc(var(--spacing-base) * 12);   /* 48px */

  /* 실제 폰트 크기 계산 */
  --font-size-xs: calc(var(--font-size-base) * var(--scale-xs));     /* 6px */
  --font-size-sm: calc(var(--font-size-base) * var(--scale-sm));     /* 7px */
  --font-size-lg: calc(var(--font-size-base) * var(--scale-lg));     /* 10px */
  --font-size-xl: calc(var(--font-size-base) * var(--scale-xl));     /* 11px */
  --font-size-2xl: calc(var(--font-size-base) * var(--scale-2xl));   /* 12px */
  --font-size-3xl: calc(var(--font-size-base) * var(--scale-3xl));   /* 14px */
  --font-size-4xl: calc(var(--font-size-base) * var(--scale-4xl));   /* 16px */
  --font-size-5xl: calc(var(--font-size-base) * var(--scale-5xl));   /* 24px */

  /* 투명도 */
  --opacity-0: 0;      /* 완전 투명 */
  --opacity-25: 0.25;  /* 75% 투명 */
  --opacity-50: 0.5;   /* 반투명 */
  --opacity-75: 0.75;  /* 25% 투명 */
  --opacity-90: 0.9;   /* 10% 투명 */
  --opacity-100: 1;    /* 완전 불투명 */

  /* 폰트 크기 유틸리티 클래스 */
  --font-size-xs: calc(var(--font-size-base) * var(--scale-xs));     /* 6px */
  --font-size-sm: calc(var(--font-size-base) * var(--scale-sm));     /* 7px */
  --font-size-lg: calc(var(--font-size-base) * var(--scale-lg));     /* 10px */
  --font-size-xl: calc(var(--font-size-base) * var(--scale-xl));     /* 11px */
  --font-size-2xl: calc(var(--font-size-base) * var(--scale-2xl));   /* 12px */
  --font-size-3xl: calc(var(--font-size-base) * var(--scale-3xl));   /* 14px */
  --font-size-4xl: calc(var(--font-size-base) * var(--scale-4xl));   /* 16px */
  --font-size-5xl: calc(var(--font-size-base) * var(--scale-5xl));   /* 24px */

  /* 폰트 굵기 */
  --fw-100: 100;  /* Thin */
  --fw-200: 200;  /* Extra Light */
  --fw-300: 300;  /* Light */
  --fw-400: 400;  /* Regular */
  --fw-500: 500;  /* Medium */
  --fw-600: 600;  /* Semi Bold */
  --fw-700: 700;  /* Bold */
  --fw-800: 800;  /* Extra Bold */
  --fw-900: 900;  /* Black */
}

/* 노트북 (768px ~ 1919px) */
@media (min-width: 768px) and (max-width: 1919px) {
  :root {
    --font-size-base: 0.55rem;  /* 8.8px */
    --spacing-base: 0.275rem;   /* 4.4px */
  }
}

/* 데스크탑 (1920px 이상) */
@media (min-width: 1920px) {
  :root {
    --font-size-base: 0.65rem;   /* 11.2px */
    --spacing-base: 0.3rem;     /* 5.6px */
  }
}

/* 폰트 유틸리티 클래스 */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

/* 폰트 굵기 유틸리티 클래스 */
.fw-100 { font-weight: var(--fw-100); }  /* Thin */
.fw-200 { font-weight: var(--fw-200); }  /* Extra Light */
.fw-300 { font-weight: var(--fw-300); }  /* Light */
.fw-400 { font-weight: var(--fw-400); }  /* Regular */
.fw-500 { font-weight: var(--fw-500); }  /* Medium */
.fw-600 { font-weight: var(--fw-600); }  /* Semi Bold */
.fw-700 { font-weight: var(--fw-700); }  /* Bold */
.fw-800 { font-weight: var(--fw-800); }  /* Extra Bold */
.fw-900 { font-weight: var(--fw-900); }  /* Black */

/* 투명도 유틸리티 클래스 */
.opacity-0 { opacity: var(--opacity-0); }      /* 완전 투명 */
.opacity-25 { opacity: var(--opacity-25); }    /* 75% 투명 */
.opacity-50 { opacity: var(--opacity-50); }    /* 반투명 */
.opacity-75 { opacity: var(--opacity-75); }    /* 25% 투명 */
.opacity-90 { opacity: var(--opacity-90); }    /* 10% 투명 */
.opacity-100 { opacity: var(--opacity-100); }  /* 완전 불투명 */

/* hover 상태에서의 투명도 */
.hover\:opacity-0:hover { opacity: var(--opacity-0); }
.hover\:opacity-50:hover { opacity: var(--opacity-50); }
.hover\:opacity-100:hover { opacity: var(--opacity-100); }

/* 비활성화 상태에서의 투명도 */
.disabled\:opacity-50:disabled { opacity: var(--opacity-50); }

/* body 태그 기본 스타일 */
body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  color: var(--color-text);
}

/* Spacing 유틸리티 클래스 */
/* Margin */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }

/* Margin Top */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

/* Margin Bottom */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

/* Margin Left */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-8 { margin-left: var(--space-8); }
.ml-10 { margin-left: var(--space-10); }
.ml-12 { margin-left: var(--space-12); }

/* Margin Right */
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-8 { margin-right: var(--space-8); }
.mr-10 { margin-right: var(--space-10); }
.mr-12 { margin-right: var(--space-12); }

/* X축 Margin (좌우) */
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }

/* Y축 Margin (상하) */
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }

/* Auto Margin */
.m-auto { margin: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Padding */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

/* Padding Top */
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-12 { padding-top: var(--space-12); }

/* Padding Bottom */
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-12 { padding-bottom: var(--space-12); }

/* Padding Left */
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }
.pl-10 { padding-left: var(--space-10); }
.pl-12 { padding-left: var(--space-12); }

/* Padding Right */
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }
.pr-10 { padding-right: var(--space-10); }
.pr-12 { padding-right: var(--space-12); }

/* X축 Padding (좌우) */
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }

/* Y축 Padding (상하) */
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }