/* === 다크모드 무력화 === */
*, *::before, *::after { color-scheme: light !important; }
html, body { color-scheme: light !important; }
@media (prefers-color-scheme: dark) {
  html, body { background: #f8fafc !important; color: #0f172a !important; }
}
html { background: #f8fafc !important; }
body {
  font-family: 'Pretendard Variable', 'Pretendard',
               -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  background: #f8fafc !important;
  color: #0f172a !important;
}

input, select, textarea, button { color-scheme: light !important; }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1;
}
select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.2em;
  padding-right: 2.5rem;
}
input::placeholder, textarea::placeholder { color: #94a3b8 !important; }
input[type="checkbox"] { accent-color: #2563eb !important; }

/* === Hero 배경 (애니메이션) === */
.hero-bg {
  background: linear-gradient(135deg, #0a0a1a 0%, #1e1b4b 25%, #312e81 50%, #4c1d95 75%, #581c87 100%);
  background-size: 300% 300%;
  animation: heroShift 20s ease infinite;
}
@keyframes heroShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-glow-1 {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 70%);
  animation: floatGlow1 14s ease-in-out infinite;
}
.hero-glow-2 {
  background: radial-gradient(circle, rgba(192, 38, 211, 0.4) 0%, transparent 70%);
  animation: floatGlow2 18s ease-in-out infinite;
}
@keyframes floatGlow1 {
  0%, 100% { transform: translate(-33%, -33%) scale(1); }
  50% { transform: translate(-20%, -20%) scale(1.2); }
}
@keyframes floatGlow2 {
  0%, 100% { transform: translate(33%, 33%) scale(1); }
  50% { transform: translate(20%, 25%) scale(1.15); }
}

.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 40px 40px;
}

.hero-logo {
  background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #a5b4fc 100%);
  color: #1e1b4b !important;
  box-shadow:
    0 12px 40px -8px rgba(99, 102, 241, 0.6),
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 4px 0 rgba(255,255,255,0.3) inset;
  letter-spacing: -0.04em;
  animation: logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.hero-accent {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 30%, #fbbf24 60%, #fcd34d 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.hero-kpi {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.hero-kpi:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.2);
}

.form-fade-in { animation: fadeInUp 0.6s ease-out; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.pulse-dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  50% { opacity: 0.8; transform: scale(1.1); box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

/* === 날씨 테마 === */
.weather-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.raindrop {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  animation: rainFall linear infinite;
}
@keyframes rainFall {
  0% { transform: translateY(-100vh); }
  100% { transform: translateY(100vh); }
}

.snowflake {
  position: absolute;
  color: white;
  opacity: 0.85;
  animation: snowDrift linear infinite;
  pointer-events: none;
}
@keyframes snowDrift {
  0% { transform: translateY(-10vh) translateX(0) rotate(0); }
  100% { transform: translateY(110vh) translateX(50px) rotate(360deg); }
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px white;
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.sun-ray {
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
  animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

.lightning-flash {
  position: absolute; inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  animation: lightning 8s infinite;
}
@keyframes lightning {
  0%, 95%, 98%, 100% { opacity: 0; }
  96%, 97% { opacity: 0.4; }
}

.fog-layer {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  backdrop-filter: blur(2px);
  animation: fogDrift 12s ease-in-out infinite;
}
@keyframes fogDrift {
  0%, 100% { transform: translateX(-20px); opacity: 0.4; }
  50% { transform: translateX(20px); opacity: 0.7; }
}

.weather-widget {
  position: absolute;
  top: 32px; right: 32px;
  z-index: 10;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 10px 14px;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeInUp 0.8s ease-out;
}

body.weather-rainy .hero-bg { background: linear-gradient(135deg, #0c1422 0%, #1e293b 30%, #312e81 70%, #1e1b4b 100%); }
body.weather-snowy .hero-bg { background: linear-gradient(135deg, #1e293b 0%, #334155 30%, #475569 70%, #1e293b 100%); }
body.weather-cloudy .hero-bg { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #44403c 70%, #292524 100%); }
body.weather-sunny .hero-bg { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #6d28d9 50%, #be185d 75%, #f59e0b 100%); }
body.weather-night .hero-bg { background: linear-gradient(135deg, #020617 0%, #0c0a3e 30%, #1e1b4b 70%, #0f0524 100%); }
body.weather-storm .hero-bg { background: linear-gradient(135deg, #020617 0%, #1e293b 50%, #312e81 100%); }
body.weather-fog .hero-bg { background: linear-gradient(135deg, #1e293b 0%, #475569 50%, #64748b 100%); }

/* 토스트 */
#toast-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex; flex-direction: column;
  gap: 8px; align-items: center;
  pointer-events: none;
}
.toast-item {
  background: #18181b; color: white;
  padding: 14px 22px; border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
  font-size: 14px; font-weight: 500;
  opacity: 0; transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: auto;
}
.toast-item.show { opacity: 1; transform: scale(1); }