/* ==========================================================================
   Design System - Spacing
   간격 관련 변수들
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     Base Spacing Scale - 기본 간격 스케일
     --------------------------------------------------------------------------- */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* ---------------------------------------------------------------------------
     Semantic Spacing - 의미 있는 간격
     --------------------------------------------------------------------------- */
  /* Title + Subtitle 간격 */
  --spacing-title-subtitle: 0px;

  /* 리스트 아이템 간격 */
  --spacing-list-sm: 8px;
  --spacing-list-md: 12px;
  --spacing-list-lg: 16px;

  /* 섹션 패딩/간격 */
  --spacing-section: 16px;
  --spacing-section-gap: 24px;

  /* 카드 내부 간격 */
  --spacing-card-content: 6px;
  --spacing-card-padding: 16px;

  /* 플래너 카드 간격 */
  --spacing-planner-card-gap: 24px;     /* 아이콘-콘텐츠 간격 */
  --spacing-planner-time-box: 60px;     /* schedule 시간 박스 너비 */

  /* 메뉴 아이템 인덴트 */
  --spacing-menu-indent: 8px;

  /* 레이아웃 높이 */
  --header-height: 60px;
  --tab-header-height: 72px;  /* 탭 헤더: 16px padding + 40px inner + 16px padding */
  --modal-offset-top: var(--header-height);

  /* 페이지 하단 여백 (탭바 공간) */
  --spacing-page-bottom: 100px;

  /* 인풋/버튼 패딩 */
  --spacing-input-x: 16px;
  --spacing-input-y: 12px;
  --spacing-btn-x: 16px;
  --spacing-btn-y: 12px;

  /* ---------------------------------------------------------------------------
     Border Radius - 모서리 둥글기
     --------------------------------------------------------------------------- */
  --radius-sm: 6px;       /* 작은 요소 */
  --radius-base: 8px;     /* 일반 버튼, 인풋 */
  --radius-lg: 15px;      /* 카드, 컨테이너, 필터, 모달 */
  --radius-xl: 30px;      /* 헤더 듀얼 버튼 그룹 (pill 형태) */
  --radius-full: 9999px;  /* 원형/pill 형태 */

  /* ---------------------------------------------------------------------------
     Sizing - 크기
     --------------------------------------------------------------------------- */
  /* Avatar/Profile */
  --avatar-size-xs: 20px;   /* 아주 작은 아바타 */
  --avatar-size-sm: 24px;   /* 작은 프로필 (리스트, 스택) */
  --avatar-size-base: 32px; /* 모달 프로필 */
  --avatar-size-stack: 36px; /* 스택 아바타 (클러스터) */
  --avatar-size-md: 40px;   /* 기본 프로필 */
  --avatar-size-lg: 56px;   /* 큰 프로필 */
  --avatar-size-xl: 80px;   /* 프로필 페이지 */

  /* Button */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-icon-size: 40px;        /* 헤더 아이콘 버튼 */
  --btn-icon-group-width: 96px; /* 아이콘 2개 그룹 버튼 */

  /* Icon */
  --icon-size-xs: 14px;           /* 작은 닫기 버튼, 배지 아이콘 */
  --icon-size-sm: 16px;
  --icon-size-compact: 18px;      /* 컴팩트 아이콘 (설정, 헤더 등) */
  --icon-size-md: 20px;
  --icon-size: 20px;              /* 기본 아이콘 크기 (레거시 호환) */
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;           /* 중대형 아이콘 (프로필, 온보딩) */
  --icon-size-2xl: 48px;          /* 대형 디스플레이 아이콘 */
  --icon-size-3xl: 64px;          /* 초대형 디스플레이 아이콘 (빈 상태, 알림) */

  /* Opacity */
  --opacity-pressed: 0.7;          /* :active 눌림 피드백 */
  --opacity-dimmed: 0.6;           /* 보조 텍스트, placeholder */
  --opacity-disabled: 0.5;         /* disabled 상태 */
  --opacity-hint: 0.4;             /* 비활성 탭, 힌트 */

  /* Toggle Switch */
  --toggle-width: 48px;
  --toggle-height: 28px;
  --toggle-thumb-size: 24px;
  --toggle-thumb-offset: 20px;

  /* Drag Handle */
  --drag-handle-width: 36px;
  --drag-handle-height: 4px;

  /* Input/Textarea Height */
  --input-height: 48px;           /* 기본 입력 필드 높이 */
  --input-height-sm: 40px;        /* 작은 입력 필드 높이 */
  --textarea-height-sm: 64px;     /* 작은 텍스트에어리어 높이 */
  --textarea-height-md: 80px;     /* 중간 텍스트에어리어 높이 */
  --textarea-height-lg: 150px;    /* 큰 텍스트에어리어 높이 */

  /* Thumbnail */
  --thumbnail-size: 80px;

  /* ---------------------------------------------------------------------------
     Shadow - 그림자
     --------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-soft-warm: 0 0 10px rgba(239, 228, 211, 0.25);
  --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 -4px 20px rgba(0, 0, 0, 0.15);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-glass: 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-glass-elevated: 0 6px 30px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* ---------------------------------------------------------------------------
     Z-Index - 레이어 순서
     --------------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 100;

  /* ---------------------------------------------------------------------------
     Transition Timing - 전환 시간
     --------------------------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.3s ease;
  --modal-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}