:root{
  --color-bg:#ffffff;
  --color-fg:#0b0b0b;
  --color-gray:#f8f9fa;
  --color-muted:#a0a0a0;
  --color-primary:#0b0b0b;
  --color-accent:#65A4C5;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
  --radius-2:8px;--radius-3:12px;
  --container:94vw;
  --blur-bg:rgba(255,255,255,0.2);
  --blur-fg:rgba(0,0,0,0.5);
  --blur-bg-dark:rgba(0,0,0,0.95);
  --gradient-bg:linear-gradient(135deg, #ffffff 0%, #c3c3c3 100%);

  /* 다크모드 전환 트랜지션 */
  --transition-duration: 0.3s;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);


  --header-height:7.5rem;
  --footer-height:14rem;
}

/* 전역 트랜지션 적용 */
* {
  transition: 
    background-color var(--transition-duration) var(--transition-timing),
    color var(--transition-duration) var(--transition-timing),
    border-color var(--transition-duration) var(--transition-timing),
    box-shadow var(--transition-duration) var(--transition-timing);
}

/* 이미지와 SVG는 트랜지션 제외 */
img, svg {
  transition: none;
}

/* 시스템 다크모드 지원 - 기본값 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b0b0b;
    --color-fg: #ffffff;
    --color-gray: #1d1d1d;
    --color-muted: #666666;
    --color-primary: #ffffff;
    --blur-bg:rgba(20,20,20,0.5);
  }
}

/* 사용자 토글 다크모드 지원 - 시스템 설정보다 우선 (더 높은 우선순위) */
html.dark-mode {
  --color-bg: #0b0b0b !important;
  --color-fg: #ffffff !important;
  --color-gray: #1d1d1d !important;
  --color-muted: #666666 !important;
  --color-primary: #ffffff !important;
  --blur-bg:rgba(20,20,20,0.5);
}

/* 사용자가 라이트모드로 설정한 경우 - 시스템 다크모드 무시 */
html:not(.dark-mode) {
  --color-bg: #ffffff !important;
  --color-fg: #0b0b0b !important;
  --color-gray: #f8f9fa !important;
  --color-muted: #a0a0a0 !important;
  --color-primary: #0b0b0b !important;
  --blur-bg:rgba(255, 255, 255, 0.2);