:root {
  /* 레이아웃 구조 - clamp(min @768px, preferred vw, max @1920px) */
  --container-max-width: 1920px;
  --header-height: clamp(40px, 5.21vw, 100px);
  --slide-height: 1080px;

  /* 그리드/플렉스 간격 - 스케일링 적용 */
  --spacing-xs: clamp(3px, 0.42vw, 8px);
  --spacing-sm: clamp(6px, 0.83vw, 16px);
  --spacing-md: clamp(10px, 1.25vw, 24px);
  --spacing-lg: clamp(13px, 1.67vw, 32px);
  --spacing-xl: clamp(19px, 2.5vw, 48px);
  --spacing-2xl: clamp(26px, 3.33vw, 64px);

  /* 인디케이터 - 스케일링 적용 */
  --indicator-size: clamp(5px, 0.63vw, 12px);
  --indicator-gap: clamp(8px, 1.04vw, 20px);

  /* 반응형 브레이크포인트 */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1920px;

  /* 색상 (디자인 완성 후 수정 - 플레이스홀더) */
  --color-bg-main: #d9d9d9; /* 플레이스홀더 - 배경 이미지 적용 전까지 */
  --color-bg-doctors: #e6e6e6; /* 플레이스홀더 - 배경 이미지 적용 전까지 */
  --color-bg-users: #bababa; /* 플레이스홀더 - 배경 이미지 적용 전까지 */
  --color-text-primary: #000000; /* 플레이스홀더 */
  --color-text-secondary: #3a3a3a; /* 플레이스홀더 */
  --color-border: #e0e0e0; /* 플레이스홀더 */
  --color-indicator-active: #000000; /* 플레이스홀더 */
  --color-indicator-inactive: #6b7280; /* 플레이스홀더 */

  /* 배경 이미지 (디자인 완성 후 적용) */
  --bg-image-main: url('../images/main-bg.webp'); /* 슬라이드 1 배경 이미지 */
  --bg-image-doctors: url('../images/doctors-bg.webp'); /* 슬라이드 2 배경 이미지 */
  --bg-image-users: url('../images/users-bg.webp'); /* 슬라이드 3 배경 이미지 */
  --bg-size: cover; /* 배경 이미지 크기 */
  --bg-position: center; /* 배경 이미지 위치 */

  /* 폰트 - 스케일링 적용 (최소값은 가독성 고려) */
  --font-pretendard: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;
  --font-size-base: clamp(12px, 0.83vw, 16px);
  --font-size-title: clamp(26px, 3.33vw, 64px);
  --font-size-subtitle: clamp(16px, 1.88vw, 36px);
  --font-size-body: clamp(14px, 1.25vw, 24px);
}