:root {
  /* 아보행 라이트 테마 색상 */
  --background: #FAFAFA; /* lightBackground */
  --foreground: rgba(0, 0, 0, 0.87); /* lightOnSurface */
  --card: #FFFFFF; /* lightSurface */
  --card-foreground: rgba(0, 0, 0, 0.87); /* lightOnSurface */
  --popover: #FFFFFF;
  --popover-foreground: rgba(0, 0, 0, 0.87);
  
  /* 주요 브랜드 색상 - 사용자 지정 primary 색상 필요 시 추가 */
  --primary: #FF6B6B; /* 임시 primary - 실제 앱 색상으로 교체 필요 */
  --primary-foreground: #FFFFFF; /* lightOnPrimary */
  
  /* 보조 색상 - secondary 색상 (secondaryLighten 값 필요) */
  --secondary: #E8F5E8; /* 임시 secondary - 실제 secondaryLighten으로 교체 필요 */
  --secondary-foreground: rgba(0, 0, 0, 0.87); /* lightOnSecondary */
  
  /* 중성 색상 */
  --muted: #F5F5F5;
  --muted-foreground: rgba(0, 0, 0, 0.6);
  --accent: #E8F5E8; /* secondary와 동일 */
  --accent-foreground: rgba(0, 0, 0, 0.87);
  
  /* 시스템 색상 */
  --destructive: #F44336;
  --destructive-foreground: #FFFFFF;
  --border: rgba(0, 0, 0, 0.12);
  --input: rgba(0, 0, 0, 0.12);
  --ring: #FF6B6B; /* primary와 동일 */
  
  /* 차트 색상 */
  --chart-1: #FF6B6B;
  --chart-2: #4ECDC4;
  --chart-3: #45B7D1;
  --chart-4: #96CEB4;
  --chart-5: #FFEAA7;
  
  /* 사이드바 색상 */
  --sidebar: #FAFAFA;
  --sidebar-foreground: rgba(0, 0, 0, 0.87);
  --sidebar-primary: #FF6B6B;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E8F5E8;
  --sidebar-accent-foreground: rgba(0, 0, 0, 0.87);
  --sidebar-border: rgba(0, 0, 0, 0.12);
  --sidebar-ring: #FF6B6B;
  
  /* 타이포그래피 - GowunDodum 폰트 */
  --font-sans: 'GowunDodum', sans-serif;
  --font-serif: 'GowunDodum', serif;
  --font-mono: 'GowunDodum', monospace;
  
  /* 보더 반경 - 부드러운 곡선 */
  --radius: 1.25rem; /* 20px - 따뜻하고 친근한 느낌 */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  
  /* 그림자 - 부드럽고 따뜻한 그림자 */
  --shadow-2xs: 0 1px 3px 0px hsla(35, 30%, 50%, 0.08);
  --shadow-xs: 0 1px 3px 0px hsla(35, 30%, 50%, 0.08);
  --shadow-sm: 0 2px 6px 0px hsla(35, 30%, 50%, 0.12), 0 1px 2px -1px hsla(35, 30%, 50%, 0.06);
  --shadow: 0 4px 12px 0px hsla(35, 30%, 50%, 0.15), 0 2px 4px -1px hsla(35, 30%, 50%, 0.08);
  --shadow-md: 0 6px 16px 0px hsla(35, 30%, 50%, 0.18), 0 3px 6px -1px hsla(35, 30%, 50%, 0.10);
  --shadow-lg: 0 8px 24px 0px hsla(35, 30%, 50%, 0.20), 0 4px 8px -1px hsla(35, 30%, 50%, 0.12);
  --shadow-xl: 0 12px 32px 0px hsla(35, 30%, 50%, 0.25), 0 6px 12px -1px hsla(35, 30%, 50%, 0.15);
  --shadow-2xl: 0 16px 48px 0px hsla(35, 30%, 50%, 0.30);
  
  /* 기타 스타일링 */
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

/* 아보행 다크모드 테마 */
.dark {
  --background: #121212; /* darkBackground */
  --foreground: #FFFFFF; /* darkOnSurface */
  --card: #1E1E1E; /* darkSurface */
  --card-foreground: #FFFFFF; /* darkOnSurface */
  --popover: #1E1E1E;
  --popover-foreground: #FFFFFF;
  
  --primary: #FF8A8A; /* 다크모드용 더 밝은 primary */
  --primary-foreground: #000000; /* darkOnPrimary */
  
  --secondary: #2C3E2C; /* 임시 secondary - 실제 secondaryDarken으로 교체 필요 */
  --secondary-foreground: rgba(0, 0, 0, 0.87); /* darkOnSecondary */
  
  --muted: #2A2A2A;
  --muted-foreground: rgba(255, 255, 255, 0.7);
  --accent: #2C3E2C; /* secondary와 동일 */
  --accent-foreground: #FFFFFF;
  
  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #FF8A8A; /* primary와 동일 */
  
  /* 다크모드 그림자 업데이트 */
  --shadow-2xs: 0 1px 3px 0px hsla(0, 0%, 0%, 0.3);
  --shadow-xs: 0 1px 3px 0px hsla(0, 0%, 0%, 0.3);
  --shadow-sm: 0 2px 6px 0px hsla(0, 0%, 0%, 0.4), 0 1px 2px -1px hsla(0, 0%, 0%, 0.2);
  --shadow: 0 4px 12px 0px hsla(0, 0%, 0%, 0.5), 0 2px 4px -1px hsla(0, 0%, 0%, 0.3);
  --shadow-md: 0 6px 16px 0px hsla(0, 0%, 0%, 0.6), 0 3px 6px -1px hsla(0, 0%, 0%, 0.4);
  --shadow-lg: 0 8px 24px 0px hsla(0, 0%, 0%, 0.7), 0 4px 8px -1px hsla(0, 0%, 0%, 0.5);
  --shadow-xl: 0 12px 32px 0px hsla(0, 0%, 0%, 0.8), 0 6px 12px -1px hsla(0, 0%, 0%, 0.6);
  --shadow-2xl: 0 16px 48px 0px hsla(0, 0%, 0%, 0.9);
}

/* 모바일 최적화 스타일 */
@media (max-width: 768px) {
  :root {
    --radius: 1rem; /* 모바일에서는 약간 작은 반경 */
    --spacing: 0.5rem; /* 모바일에서 더 큰 여백 */
  }
}

/* 애니메이션을 위한 커스텀 속성 */
:root {
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

/* 풀스크린 Hero 섹션 */
.hero-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 스크롤 힌트 애니메이션 */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  animation: bounce-vertical 2s ease-in-out infinite;
}

@keyframes bounce-vertical {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 카드 등장 애니메이션 */
.card-animate {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: all var(--transition-slow) var(--ease-out-quart);
}

.card-animate.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 스태거 효과를 위한 지연 */
.card-animate:nth-child(1) { transition-delay: 0ms; }
.card-animate:nth-child(2) { transition-delay: 100ms; }
.card-animate:nth-child(3) { transition-delay: 200ms; }
.card-animate:nth-child(4) { transition-delay: 300ms; }
.card-animate:nth-child(5) { transition-delay: 400ms; }

/* Hero 섹션 요소들 등장 애니메이션 */
.hero-logo {
  animation: hero-fade-in-up 800ms var(--ease-out-quart) forwards;
  opacity: 0;
}

.hero-subtitle {
  animation: hero-fade-in-up 800ms var(--ease-out-quart) 200ms forwards;
  opacity: 0;
}

.hero-buttons {
  animation: hero-fade-in-up 800ms var(--ease-out-quart) 400ms forwards;
  opacity: 0;
}

@keyframes hero-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 버튼 호버 애니메이션 */
.app-download-btn {
  transition: all var(--transition-normal) var(--ease-in-out-quart);
  transform: scale(1);
}

.app-download-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.app-download-btn:active {
  transform: scale(0.95);
  transition-duration: 100ms;
}

/* 부드러운 스크롤 */
html {
  scroll-behavior: smooth;
}

/* 섹션 간격 */
.section {
  min-height: 100vh;
  padding: 2rem 1rem;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .section {
    padding: 1rem 0.75rem;
  }
  
  .hero-section {
    padding: 2rem 1rem;
  }
}