/* Universe - 기본 스타일 */
@import url('variables.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: only light;
}

/* 강력한 다크모드 방지 - 모바일 브라우저 대응 */
html {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
}

body {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
}

/* 모든 요소에 대한 다크모드 방지 */
*, *::before, *::after {
  color-scheme: only light !important;
}

/* 입력 요소들의 다크모드 방지 */
input, textarea, select, button {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
}

/* 웹킷 기반 브라우저 (Safari, Chrome 모바일) 다크모드 방지 */
@supports (-webkit-appearance: none) {
  html, body {
    -webkit-color-scheme: only light !important;
  }
  
  *, *::before, *::after {
    -webkit-color-scheme: only light !important;
  }
  
  input, textarea, select, button {
    -webkit-appearance: none;
    -webkit-color-scheme: only light !important;
  }
}

/* 리셋 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 기본 폰트 및 배경 */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--primary-bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 자연스러운 우주 배경 애니메이션 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* Layer 1: Large bright stars */
    radial-gradient(2px 2px at 18% 32%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 82% 18%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2.2px 2.2px at 67% 78%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 72%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 52% 25%, rgba(255,255,255,0.8), transparent),
    
    /* Layer 2: Medium stars */
    radial-gradient(1px 1px at 42% 38%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 88% 58%, rgba(255,255,255,0.65), transparent),
    radial-gradient(0.8px 0.8px at 12% 88%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.1px 1.1px at 63% 12%, rgba(255,255,255,0.55), transparent),
    radial-gradient(0.9px 0.9px at 35% 65%, rgba(255,255,255,0.6), transparent),
    
    /* Layer 3: Small distant stars */
    radial-gradient(0.5px 0.5px at 33% 53%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.6px 0.6px at 77% 37%, rgba(255,255,255,0.35), transparent),
    radial-gradient(0.4px 0.4px at 22% 13%, rgba(255,255,255,0.45), transparent),
    radial-gradient(0.5px 0.5px at 92% 82%, rgba(255,255,255,0.3), transparent),
    radial-gradient(0.3px 0.3px at 55% 45%, rgba(255,255,255,0.35), transparent);
  
  background-size: 450px 380px, 320px 380px, 280px 340px;
  animation: 
    twinkle-primary 4.5s ease-in-out infinite,
    drift-stars 80s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* 추가 별들을 위한 두 번째 레이어 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* 더 많은 작은 별들과 은하수 효과 */
    radial-gradient(0.4px 0.4px at 38% 68%, rgba(255,255,255,0.25), transparent),
    radial-gradient(0.6px 0.6px at 73% 28%, rgba(255,255,255,0.3), transparent),
    radial-gradient(0.3px 0.3px at 18% 48%, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.5px 0.5px at 83% 73%, rgba(255,255,255,0.28), transparent),
    radial-gradient(0.4px 0.4px at 58% 83%, rgba(255,255,255,0.22), transparent),
    radial-gradient(0.6px 0.6px at 23% 18%, rgba(255,255,255,0.32), transparent),
    radial-gradient(0.3px 0.3px at 43% 43%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.4px 0.4px at 78% 53%, rgba(255,255,255,0.24), transparent),
    /* 은하수 희미한 효과 */
    linear-gradient(125deg, transparent 40%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 55%, transparent 60%);
  
  background-size: 280px 230px, 180px 220px, 350px 100%;
  animation: 
    twinkle-secondary 7s ease-in-out infinite 1.5s,
    drift-stars-reverse 100s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* 메인 별들의 반짝임 애니메이션 */
@keyframes twinkle-primary {
  0%, 100% { 
    opacity: 0.5; 
    transform: scale(1);
  }
  20% { 
    opacity: 0.8; 
    transform: scale(1.05);
  }
  40% { 
    opacity: 1; 
    transform: scale(1.15);
  }
  60% { 
    opacity: 0.9; 
    transform: scale(1.08);
  }
  80% { 
    opacity: 0.7; 
    transform: scale(0.98);
  }
}

/* 보조 별들의 반짝임 애니메이션 */
@keyframes twinkle-secondary {
  0%, 100% { 
    opacity: 0.2; 
  }
  30% { 
    opacity: 0.5; 
  }
  65% { 
    opacity: 0.8; 
  }
}

/* 별들의 자연스러운 움직임 */
@keyframes drift-stars {
  0% { 
    transform: translate(0, 0) rotate(0deg);
  }
  100% { 
    transform: translate(-20px, -20px) rotate(360deg);
  }
}

@keyframes drift-stars-reverse {
  0% { 
    transform: translate(0, 0) rotate(0deg);
  }
  100% { 
    transform: translate(15px, 10px) rotate(-360deg);
  }
}

/* 성능 최적화 */
body::before,
body::after {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 모션 민감도 대응 */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
  
  body::before {
    opacity: 0.4;
  }
  
  body::after {
    opacity: 0.2;
  }
}

/* 기본 요소 스타일링 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

h1 { font-size: var(--font-4xl); }
h2 { font-size: var(--font-3xl); }
h3 { font-size: var(--font-2xl); }
h4 { font-size: var(--font-xl); }
h5 { font-size: var(--font-lg); }
h6 { font-size: var(--font-md); }

p {
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--text-primary);
  text-shadow: var(--shadow-glow);
}

/* 컨테이너 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* 유틸리티 클래스 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hidden { display: none; }
.visible { display: block; }

.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }

/* 반응형 */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-sm);
  }
  
  h1 { font-size: var(--font-3xl); }
  h2 { font-size: var(--font-2xl); }
}