@charset "UTF-8";

:root {
  --color-primary: #0369a1;        /* 딥 오션 블루 */
  --color-primary-dark: #075985;   /* 다크 오션 */
  --color-accent: #38bdf8;         /* 스카이 사이언 */
  --color-accent-glow: rgba(56, 189, 248, 0.4);
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  word-break: keep-all;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
              radial-gradient(circle at 15% 70%, rgba(56, 189, 248, 0.12) 0%, transparent 45%),
              linear-gradient(180deg, #09131f 0%, #0c1e33 25%, #081728 50%, #06111e 75%, #040a12 100%);
  background-attachment: fixed;
  color: #f1f5f9;
}

.glass-panel-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(3, 105, 161, 0.25) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-card:hover {
  transform: translateY(-8px) scale(1.01);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(3, 105, 161, 0.4) 100%);
  border-color: #38bdf8;
  box-shadow: 0 20px 45px rgba(56, 189, 248, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);
}

.text-glow-accent {
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.7), 0 0 28px rgba(56, 189, 248, 0.4);
}

@keyframes tickerLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerLoop 30s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 6px #38bdf8); }
  50% { transform: scale(1.15); opacity: 0.85; filter: drop-shadow(0 0 16px #38bdf8); }
}

.animate-pulse-glow {
  animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes floatingAnim {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatingAnim 4s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatingAnim 4s ease-in-out infinite 2s;
}

@keyframes shimmerPass {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-card {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255,255,255,0.02) 100%);
  background-size: 200% 100%;
  animation: shimmerPass 6s infinite;
}

@keyframes auraPulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.08); }
}

.odd-section-aura {
  animation: auraPulse 7s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

.chart-bar-fill {
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fixed-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(6, 17, 30, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 2px solid #38bdf8;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
  padding: 12px 16px;
  animation: slideUpFooter 0.5s ease-out;
}

@keyframes slideUpFooter {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #06111e;
}
::-webkit-scrollbar-thumb {
  background: #0369a1;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
}