/* EcoQuest 스타일시트 - 조경비전 2050 공모전 버전 */
/* Design Direction: Organic Tech - 자연의 유기적 형태와 게임의 역동성 결합 */

/* ===== 폰트 임포트 ===== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;900&display=swap');

/* ===== CSS 변수 ===== */
:root {
  /* 메인 컬러 - 더 풍부한 자연 팔레트 */
  --primary: #00D9A5;
  --primary-dark: #00B386;
  --primary-light: #5DFFC2;
  --primary-glow: rgba(0, 217, 165, 0.5);
  --primary-subtle: rgba(0, 217, 165, 0.1);

  --secondary: #6366F1;
  --secondary-glow: rgba(99, 102, 241, 0.4);
  --accent: #FBBF24;
  --accent-glow: rgba(251, 191, 36, 0.5);
  --coral: #FF6B6B;
  --coral-glow: rgba(255, 107, 107, 0.4);

  /* 자연 색상 */
  --forest: #0A4D3C;
  --moss: #1B5E45;
  --leaf: #2DD4A0;
  --sunlight: #FFE566;
  --sky: #38BDF8;
  --earth: #92400E;

  /* 그라데이션 - 더 드라마틱한 효과 */
  --gradient-primary: linear-gradient(135deg, #00D9A5 0%, #00B386 50%, #008F6B 100%);
  --gradient-hero: linear-gradient(160deg, #0A4D3C 0%, #1B5E45 30%, #00D9A5 70%, #5DFFC2 100%);
  --gradient-hero-reverse: linear-gradient(340deg, #0A4D3C 0%, #1B5E45 30%, #00D9A5 70%, #5DFFC2 100%);
  --gradient-gold: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
  --gradient-danger: linear-gradient(135deg, #FF6B6B 0%, #EF4444 100%);
  --gradient-aurora: linear-gradient(135deg, #00D9A5 0%, #6366F1 50%, #EC4899 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(0, 217, 165, 0.3) 0px, transparent 50%),
                   radial-gradient(at 80% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
                   radial-gradient(at 0% 50%, rgba(251, 191, 36, 0.2) 0px, transparent 50%),
                   radial-gradient(at 80% 50%, rgba(0, 179, 134, 0.15) 0px, transparent 50%),
                   radial-gradient(at 0% 100%, rgba(0, 217, 165, 0.2) 0px, transparent 50%);

  /* 배경 - 깊이감 있는 다크 테마 */
  --bg-primary: #F0FDF9;
  --bg-secondary: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-dark: #0F1419;
  --bg-darker: #080B0E;
  --bg-glass: rgba(255, 255, 255, 0.08);
  --bg-glass-light: rgba(255, 255, 255, 0.12);

  /* 텍스트 */
  --text-primary: #0F1419;
  --text-secondary: #536471;
  --text-light: #8899A6;
  --text-white: #FFFFFF;
  --text-glow: rgba(255, 255, 255, 0.9);

  /* 희귀도 - 더 선명한 색상 */
  --rarity-common: #8899A6;
  --rarity-uncommon: #00D9A5;
  --rarity-rare: #6366F1;
  --rarity-legendary: #FBBF24;
  --rarity-mythic: linear-gradient(135deg, #FF6B6B, #FBBF24, #00D9A5, #6366F1);

  /* 그림자 - 더 부드럽고 깊은 효과 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 40px var(--primary-glow);
  --shadow-glow-intense: 0 0 60px var(--primary-glow), 0 0 100px rgba(0, 217, 165, 0.3);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 60px var(--primary-glow);

  /* 간격 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* 둥글기 - 더 유기적인 형태 */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;
  --radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;

  /* 레이아웃 */
  --nav-height: 80px;
  --status-bar-height: 44px;
  --header-height: 60px;

  /* 애니메이션 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ===== 리셋 ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* ===== 유틸리티 클래스 ===== */
.hidden {
  display: none !important;
}

body {
  font-family: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-darker);
  background-image: var(--gradient-mesh);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  letter-spacing: -0.01em;
}

/* 노이즈 텍스처 오버레이 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* ===== 인트로 화면 ===== */
.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow: hidden;
}

/* 인트로 배경 효과 */
.intro-screen::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(0, 217, 165, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.3) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(251, 191, 36, 0.2) 0%, transparent 60%);
  animation: introAurora 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes introAurora {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(5deg) scale(1.05); }
  66% { transform: rotate(-3deg) scale(0.98); }
}

.intro-screen::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, rgba(10, 77, 60, 0.8) 0%, transparent 100%);
  pointer-events: none;
}

.intro-content {
  text-align: center;
  position: relative;
  z-index: 10;
  padding: var(--spacing-xl);
}

.intro-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 로고 애니메이션 - 더 역동적 */
.intro-logo-container {
  position: relative;
  z-index: 10;
  margin-bottom: var(--spacing-xl);
  animation: logoContainerFloat 6s ease-in-out infinite;
}

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

.intro-logo {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--spacing-lg);
}

.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: logoPulse 3s var(--ease-out-expo) infinite;
  box-shadow:
    0 0 40px rgba(0, 217, 165, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
}

/* 외부 글로우 링 */
.logo-circle::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: 2px solid rgba(0, 217, 165, 0.3);
  border-radius: 50%;
  animation: ringExpand 3s var(--ease-out-expo) infinite;
}

@keyframes ringExpand {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

.logo-leaf {
  position: absolute;
  font-size: 44px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  animation: leafFloat 4s var(--ease-out-expo) infinite;
}

.leaf-1 { top: 5px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.leaf-2 { bottom: 15px; left: 5px; animation-delay: 0.7s; font-size: 36px; }
.leaf-3 { bottom: 15px; right: 5px; animation-delay: 1.4s; font-size: 36px; }

@keyframes logoPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes leafFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(3deg); }
  75% { transform: translateY(-5px) rotate(-2deg); }
}

.intro-title {
  font-family: 'Outfit', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: white;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--spacing-sm);
  letter-spacing: -0.03em;
  animation: titleFadeIn 1.2s var(--ease-out-expo);
}

.intro-subtitle {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  letter-spacing: 0.02em;
  animation: titleFadeIn 1.2s var(--ease-out-expo) 0.2s backwards;
}

@keyframes titleFadeIn {
  from { opacity: 0; transform: translateY(30px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* 서울 지도 애니메이션 */
.intro-map-animation {
  width: 200px;
  height: 150px;
  margin: var(--spacing-xl) auto;
  position: relative;
  z-index: 10;
}

.seoul-map-svg {
  width: 100%;
  height: 100%;
}

.seoul-outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawMap 3s ease-out forwards;
}

@keyframes drawMap {
  to { stroke-dashoffset: 0; }
}

.hotspot {
  fill: var(--accent);
  opacity: 0;
  animation: hotspotPulse 2s ease-in-out infinite;
}

.hotspot-1 { animation-delay: 1s; }
.hotspot-2 { animation-delay: 1.3s; }
.hotspot-3 { animation-delay: 1.6s; }
.hotspot-4 { animation-delay: 1.9s; }
.hotspot-5 { animation-delay: 2.2s; }

@keyframes hotspotPulse {
  0%, 100% { opacity: 0; r: 4; }
  50% { opacity: 1; r: 10; }
}

/* 공모전 배지 */
.contest-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  animation: badgeFadeIn 1s ease-out 0.5s backwards;
}

.badge-year {
  font-size: 32px;
  font-weight: 900;
  color: white;
}

.badge-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.badge-type {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 4px;
}

@keyframes badgeFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* 시작 버튼 - 프리미엄 스타일 */
.intro-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: white;
  color: var(--forest);
  border: none;
  padding: 16px 36px;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 15px 40px rgba(0, 0, 0, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.4s var(--ease-out-expo);
  animation: btnFadeIn 1s var(--ease-out-expo) 0.8s backwards;
  margin: 0 auto var(--spacing-md);
  position: relative;
  overflow: hidden;
}

.intro-start-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 217, 165, 0.2), transparent);
  transition: left 0.5s ease;
}

.intro-start-btn:hover::before {
  left: 100%;
}

.intro-start-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 20px 50px rgba(0, 217, 165, 0.25);
}

.intro-start-btn:active {
  transform: translateY(-2px) scale(1.01);
}

.btn-arrow {
  transition: transform 0.4s var(--ease-out-back);
  font-size: 20px;
}

.intro-start-btn:hover .btn-arrow {
  transform: translateX(6px);
}

@keyframes btnFadeIn {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 가이드 투어 버튼 - 글래스 스타일 */
.guide-tour-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s var(--ease-out-expo);
  animation: btnFadeIn 1s var(--ease-out-expo) 1s backwards;
  margin: 0 auto;
}

.guide-tour-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ===== 온보딩 화면 ===== */
.onboarding-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-darker);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-container {
  width: 100%;
  max-width: 430px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.onboarding-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-xl);
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.5s ease;
}

.onboarding-slide.active {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

.slide-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.slide-content {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

.slide-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: white;
  line-height: 1.4;
  margin-bottom: var(--spacing-md);
}

.slide-content p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.highlight-red { color: #EF4444; }
.highlight-green { color: var(--primary); }
.highlight-gold { color: var(--accent); }

/* 온보딩 애니메이션 */
.crisis-animation {
  position: relative;
  width: 200px;
  height: 200px;
}

.city-silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, #374151 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
}

.pollution-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
  animation: pollutionPulse 3s ease-in-out infinite;
}

@keyframes pollutionPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.species-fading {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.fading-species {
  font-size: 40px;
  animation: speciesFade 3s ease-in-out infinite;
}

.fading-species:nth-child(1) { animation-delay: 0s; }
.fading-species:nth-child(2) { animation-delay: 0.5s; }
.fading-species:nth-child(3) { animation-delay: 1s; }

@keyframes speciesFade {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.3; transform: translateY(-10px); }
}

.solution-animation {
  position: relative;
  width: 200px;
  height: 200px;
}

.phone-mockup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 120px;
  background: linear-gradient(135deg, #1F2937, #374151);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.phone-screen {
  font-size: 40px;
}

.data-streams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.stream {
  position: absolute;
  font-size: 24px;
  animation: streamFlow 2s ease-in-out infinite;
}

.stream-1 { top: 20%; left: 10%; animation-delay: 0s; }
.stream-2 { top: 40%; right: 10%; animation-delay: 0.5s; }
.stream-3 { bottom: 20%; left: 20%; animation-delay: 1s; }

@keyframes streamFlow {
  0% { opacity: 0; transform: translateY(20px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

.cloud-icon {
  position: absolute;
  top: 10%;
  right: 20%;
  font-size: 40px;
  animation: cloudFloat 3s ease-in-out infinite;
}

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

.hero-animation {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-avatar {
  font-size: 80px;
  position: relative;
  z-index: 2;
  animation: heroFloat 2s ease-in-out infinite;
}

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

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.achievement-badges {
  position: absolute;
  width: 100%;
  height: 100%;
}

.badge-float {
  position: absolute;
  font-size: 30px;
  animation: badgeOrbit 4s linear infinite;
}

.badge-float:nth-child(1) { animation-delay: 0s; }
.badge-float:nth-child(2) { animation-delay: 1.3s; }
.badge-float:nth-child(3) { animation-delay: 2.6s; }

@keyframes badgeOrbit {
  0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* 온보딩 진행 표시 */
.onboarding-progress {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.progress-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.progress-dot.active {
  width: 30px;
  border-radius: 5px;
  background: var(--primary);
}

/* 온보딩 네비게이션 */
.onboarding-nav {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-xl);
}

.skip-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
}

.next-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--primary);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.next-btn:hover {
  background: var(--primary-dark);
  transform: translateX(3px);
}

/* ===== 온보딩 슬라이드 배경 그래디언트 ===== */
.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.slide-bg-crisis {
  background: linear-gradient(180deg, #1a0a0a 0%, #2d1111 30%, #1F2937 70%, #111827 100%);
}

.slide-bg-solution {
  background: linear-gradient(180deg, #0a1a2e 0%, #0d2847 30%, #064E3B 70%, #0a2a1f 100%);
}

.slide-bg-hero {
  background: linear-gradient(180deg, #1a1505 0%, #2d2208 30%, #064E3B 70%, #0a2a1f 100%);
}

.slide-visual {
  position: relative;
  z-index: 1;
}

.slide-content {
  position: relative;
  z-index: 1;
}

/* 온보딩 SVG 일러스트 스타일 */
.crisis-city-svg {
  width: 240px;
  height: 200px;
  filter: drop-shadow(0 4px 20px rgba(239, 68, 68, 0.2));
}

.solution-phone-svg {
  width: 240px;
  height: 240px;
  filter: drop-shadow(0 4px 20px rgba(0, 217, 165, 0.2));
  animation: phonePulse 3s ease-in-out infinite;
}

@keyframes phonePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.hero-avatar-svg {
  width: 120px;
  height: 120px;
  animation: heroFloat 2s ease-in-out infinite;
}

/* 위기 슬라이드 - 새 사라짐 애니메이션 */
.fading-bird {
  animation: birdFade 3s ease-in-out infinite;
}
.fading-bird-1 { animation-delay: 0s; }
.fading-bird-2 { animation-delay: 0.7s; }
.fading-bird-3 { animation-delay: 1.4s; }

@keyframes birdFade {
  0%, 100% { opacity: 0.6; transform: translateY(0) translateX(0); }
  50% { opacity: 0.15; transform: translateY(-8px) translateX(5px); }
}

/* 솔루션 슬라이드 - 데이터 라인 애니메이션 */
.data-line {
  animation: dataLinePulse 2s ease-in-out infinite;
}
.data-line-1 { animation-delay: 0s; }
.data-line-2 { animation-delay: 0.4s; }
.data-line-3 { animation-delay: 0.8s; }
.data-line-4 { animation-delay: 1.2s; }

@keyframes dataLinePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.ai-brain-icon {
  animation: brainPulse 2s ease-in-out infinite;
}

@keyframes brainPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* 온보딩 슬라이드 전환 개선 */
.onboarding-slide {
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out-expo);
}

.onboarding-slide.slide-out-left {
  display: flex;
  opacity: 0;
  transform: translateX(-80px);
}

.onboarding-slide.slide-in-right {
  display: flex;
  opacity: 0;
  transform: translateX(80px);
}

/* ===== 카드 등장 stagger 애니메이션 ===== */
@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.screen.active .screen-body > .profile-card,
.screen.active .screen-body > .impact-summary-card,
.screen.active .screen-body > .section {
  animation: cardSlideUp 0.4s var(--ease-out-expo) both;
}

.screen.active .screen-body > .profile-card { animation-delay: 0.05s; }
.screen.active .screen-body > .impact-summary-card { animation-delay: 0.1s; }
.screen.active .screen-body > .section:nth-of-type(1) { animation-delay: 0.15s; }
.screen.active .screen-body > .section:nth-of-type(2) { animation-delay: 0.2s; }
.screen.active .screen-body > .section:nth-of-type(3) { animation-delay: 0.25s; }
.screen.active .screen-body > .section:nth-of-type(4) { animation-delay: 0.3s; }

/* ===== 하단 네비 활성 인디케이터 ===== */
.nav-item {
  position: relative;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
  transition: all 0.3s var(--ease-out-expo);
}

.nav-item .nav-icon svg,
.nav-item .nav-icon-large svg {
  transition: transform 0.2s ease;
}

.nav-item.active .nav-icon svg {
  transform: scale(1.1);
}

/* ===== 생물다양성 뱃지 색상 코딩 ===== */
.biodiversity-badge.S,
.biodiversity-badge[data-level="S"] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(217, 119, 6, 0.2));
  color: #D97706;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.biodiversity-badge.A,
.biodiversity-badge[data-level="A"] {
  background: rgba(148, 163, 184, 0.2);
  color: #94A3B8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.biodiversity-badge.B,
.biodiversity-badge[data-level="B"] {
  background: rgba(180, 130, 90, 0.2);
  color: #B4825A;
  border: 1px solid rgba(180, 130, 90, 0.3);
}

.biodiversity-badge.C,
.biodiversity-badge[data-level="C"] {
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ===== 메인 앱 컨테이너 ===== */
.app-container {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  max-height: 932px;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 25px 50px -12px rgba(0, 0, 0, 0.4),
    0 0 100px rgba(0, 217, 165, 0.1);
  z-index: 1;
}

@media (min-width: 431px) {
  .app-container {
    border-radius: 44px;
    height: 90vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* 상태바 - 그라데이션 */
.status-bar {
  height: var(--status-bar-height);
  background: var(--gradient-primary);
  color: var(--text-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-lg);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.status-icons {
  display: flex;
  gap: var(--spacing-sm);
}

/* 메인 컨텐츠 */
.main-content {
  height: calc(100% - var(--status-bar-height) - var(--nav-height));
  overflow: hidden;
  position: relative;
}

/* 화면 */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.screen.active {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

/* 화면 헤더 */
.screen-header {
  height: var(--header-height);
  background: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-md);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.screen-header.transparent {
  background: transparent;
  border-bottom: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: white;
}

.screen-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-header.transparent h1 {
  color: white;
}

.home-header {
  background: linear-gradient(135deg, #0A4D3C 0%, #10B981 60%, #00D9A5 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(10, 77, 60, 0.3);
}

.home-header h1 {
  color: white;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.app-logo {
  font-size: 22px;
  font-weight: 900;
}

.contest-mini-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* 화면 바디 */
.screen-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  padding-bottom: var(--spacing-xl);
}

/* ===== 버튼 스타일 ===== */
.btn-icon {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--bg-primary);
}

/* ===== 프로필 카드 (히어로) ===== */
.profile-card.hero-card {
  background: linear-gradient(160deg, #042f22 0%, #0A4D3C 25%, #0d6b4f 50%, #10B981 85%, #34d399 100%);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  color: var(--text-white);
  margin-bottom: var(--spacing-lg);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 217, 165, 0.25),
    0 20px 60px rgba(10, 77, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(93, 255, 194, 0.2);
}

/* 글로우 오버레이 */
.profile-card.hero-card::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(0, 217, 165, 0.15) 0%, transparent 60%);
  animation: heroCardGlow 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroCardGlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10%, 10%); }
}

.hero-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}

.profile-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  position: relative;
}

.avatar-large.animated-avatar {
  width: 76px;
  height: 76px;
  position: relative;
  filter: drop-shadow(0 0 12px rgba(93, 255, 194, 0.5));
}

.avatar-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  z-index: 2;
}

.avatar-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: ringRotate 10s linear infinite;
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.avatar-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  animation: particlePulse 2s ease-in-out infinite;
}

@keyframes particlePulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

.profile-details h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.level-badge.animated-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

.level-icon {
  animation: starPulse 1s ease-in-out infinite;
}

@keyframes starPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.xp-bar-container {
  margin-bottom: var(--spacing-md);
  position: relative;
}

.xp-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--spacing-xs);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.xp-progress {
  height: 100%;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  position: relative;
  transition: width 0.5s ease;
}

.xp-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}

.xp-text {
  font-size: 12px;
  opacity: 0.9;
}

.token-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 18px;
  font-weight: 700;
  position: relative;
  background: rgba(255, 215, 0, 0.12);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.token-coin {
  position: relative;
  font-size: 24px;
}

.coin-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%);
  animation: coinShine 3s infinite;
}

@keyframes coinShine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* ===== 임팩트 카드 ===== */
.impact-summary-card {
  background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 50%, #d1fae5 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1.5px solid rgba(16, 185, 129, 0.2);
}

.impact-summary-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.impact-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.impact-icon {
  font-size: 24px;
}

.impact-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.impact-stats-mini {
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--spacing-md);
}

.impact-stat {
  text-align: center;
}

.impact-stat .stat-num {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--forest);
  letter-spacing: -0.02em;
}

.impact-stat .stat-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.impact-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
}

/* ===== 섹션 ===== */
.section {
  margin-bottom: var(--spacing-lg);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.section-header h3, .section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.section-header a {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

/* ===== 퀘스트 리스트 ===== */
.quest-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.quest-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
  border-left: 4px solid var(--primary);
}

.quest-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-left-color: var(--primary-dark);
}

.quest-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.quest-info {
  flex: 1;
  min-width: 0;
}

.quest-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.quest-progress-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.quest-progress-bar {
  height: 4px;
  background: var(--bg-primary);
  border-radius: var(--radius-full);
  margin-top: var(--spacing-xs);
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.quest-reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.quest-reward span {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* ===== 발견 미리보기 ===== */
.discovery-preview {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding-bottom: var(--spacing-sm);
  -webkit-overflow-scrolling: touch;
}

.discovery-preview::-webkit-scrollbar {
  display: none;
}

.discovery-item {
  flex-shrink: 0;
  width: 80px;
  text-align: center;
  cursor: pointer;
}

.discovery-image {
  width: 68px;
  height: 68px;
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf9 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin: 0 auto var(--spacing-xs);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(16, 185, 129, 0.1);
  transition: all 0.3s var(--ease-out-back);
}

.discovery-item:hover .discovery-image {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2), 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.discovery-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 공원 리스트 ===== */
.park-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.park-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.park-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
}

.park-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.park-info {
  flex: 1;
}

.park-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.park-area {
  font-size: 12px;
  color: var(--text-secondary);
}

.biodiversity-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.biodiversity-badge.very_high {
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
}

.biodiversity-badge.high {
  background: rgba(59, 130, 246, 0.15);
  color: var(--secondary);
}

.biodiversity-badge.medium {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent);
}

/* ===== Leaflet 지도 ===== */
.map-screen {
  padding: 0;
  position: relative;
  height: 100%;
}

.leaflet-map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map-legend {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  font-size: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 4px;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.biodiversity-high {
  background: var(--primary);
}

.legend-color.biodiversity-medium {
  background: var(--accent);
}

.ar-camera-btn.pulse-btn {
  position: absolute;
  bottom: var(--spacing-xl);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  z-index: 1000;
  transition: all 0.3s ease;
  overflow: hidden;
}

.btn-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  animation: btnGlow 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnGlow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ar-camera-btn:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 15px 40px var(--primary-glow);
}

.camera-icon {
  font-size: 24px;
}

/* ===== 지도 마커 스타일 ===== */
.custom-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--primary);
  transition: transform 0.2s ease;
}

.marker-icon:hover {
  transform: scale(1.15);
}

/* 마커 타입별 스타일 */
.marker-species .marker-icon {
  background: var(--bg-primary);
  border-color: var(--primary);
}

.marker-park .marker-icon {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-color: var(--primary-dark);
}

.marker-user .marker-icon {
  background: var(--gradient-primary);
  border-color: white;
  box-shadow: var(--shadow-lg), 0 0 20px var(--primary-glow);
  animation: userMarkerPulse 2s ease-in-out infinite;
}

@keyframes userMarkerPulse {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 20px var(--primary-glow); }
  50% { box-shadow: var(--shadow-lg), 0 0 35px var(--primary-glow); }
}

.marker-hotspot .marker-icon {
  background: var(--gradient-gold);
  border-color: white;
  animation: hotspotMarkerBounce 1s ease-in-out infinite;
}

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

/* 희귀도별 마커 */
.marker-common .marker-icon {
  border-color: var(--rarity-common);
}

.marker-uncommon .marker-icon {
  border-color: var(--rarity-uncommon);
}

.marker-rare .marker-icon {
  border-color: var(--rarity-rare);
  box-shadow: var(--shadow-md), 0 0 15px rgba(59, 130, 246, 0.4);
}

.marker-legendary .marker-icon {
  border-color: var(--rarity-legendary);
  box-shadow: var(--shadow-md), 0 0 20px var(--accent-glow);
  animation: legendaryMarkerGlow 2s ease-in-out infinite;
}

@keyframes legendaryMarkerGlow {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 20px var(--accent-glow); }
  50% { box-shadow: var(--shadow-md), 0 0 35px var(--accent-glow); }
}

/* 마커 핀 (드롭 효과) */
.marker-pin {
  position: relative;
}

.marker-pin::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--primary);
}

.marker-park.marker-pin::after {
  border-top-color: var(--primary-dark);
}

.marker-hotspot.marker-pin::after {
  border-top-color: var(--accent);
}

/* 마커 그림자 */
.marker-shadow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
}

/* 마커 펄스 링 */
.marker-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  animation: markerPulseRing 2s ease-out infinite;
  pointer-events: none;
}

@keyframes markerPulseRing {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 마커 클러스터 */
.marker-cluster {
  width: 50px;
  height: 50px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  border: 3px solid white;
}

.marker-cluster.large {
  width: 60px;
  height: 60px;
  font-size: 18px;
}

.marker-cluster.xlarge {
  width: 70px;
  height: 70px;
  font-size: 20px;
}

/* 마커 라벨 */
.marker-label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

/* 마커 배지 (새 발견 등) */
.marker-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: var(--gradient-danger);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  font-weight: 700;
  border: 2px solid white;
}

.marker-badge.new {
  background: var(--accent);
  animation: badgeBounce 0.5s ease infinite alternate;
}

@keyframes badgeBounce {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* Leaflet 팝업 커스텀 */
.leaflet-popup-content-wrapper {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0;
}

.leaflet-popup-content {
  margin: 0;
  padding: var(--spacing-md);
  font-family: 'Noto Sans KR', sans-serif;
}

.leaflet-popup-tip {
  background: var(--bg-secondary);
}

.leaflet-popup-close-button {
  color: var(--text-secondary) !important;
  font-size: 20px !important;
  padding: 8px !important;
}

.popup-content {
  text-align: center;
  min-width: 150px;
}

.popup-icon {
  font-size: 40px;
  margin-bottom: var(--spacing-sm);
}

.popup-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.popup-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.popup-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--bg-primary);
}

.popup-stat {
  text-align: center;
}

.popup-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.popup-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
}

.popup-btn {
  display: block;
  width: 100%;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.popup-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.park-info-card {
  position: absolute;
  bottom: 100px;
  left: var(--spacing-md);
  right: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 28px;
  height: 28px;
  background: var(--bg-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}

.park-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.park-info-header h3 {
  font-size: 18px;
  font-weight: 700;
}

.park-species-preview {
  display: flex;
  gap: var(--spacing-xs);
  margin: var(--spacing-md) 0;
  flex-wrap: wrap;
}

.species-mini {
  width: 40px;
  height: 40px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.park-stats {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.park-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 13px;
  color: var(--text-secondary);
}

.park-stat span:nth-child(2) {
  font-weight: 600;
  color: var(--text-primary);
}

/* ===== 발견 화면 ===== */
.discovery-screen {
  padding: 0;
  background: #000;
  position: relative;
  height: 100%;
}

.camera-view {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
}

#cameraFeed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cameraCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.scan-frame.animated-frame {
  width: 260px;
  height: 260px;
  position: relative;
}

.corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 4px solid var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; }
.corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 10px 0 0; }
.corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 10px; }
.corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 10px 0; }

.scan-line {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 3px;
  background: var(--primary);
  box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary-glow);
  animation: scan 2s ease-in-out infinite;
}

@keyframes scan {
  0%, 100% { top: 10%; }
  50% { top: 85%; }
}

.ai-status {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.ai-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.ai-pulse {
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  animation: aiPulse 1s ease-in-out infinite;
}

@keyframes aiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.ai-confidence {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.camera-hint {
  position: absolute;
  bottom: 140px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 14px;
  opacity: 0.8;
  z-index: 10;
}

.capture-btn {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.capture-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid white;
  border-radius: 50%;
  transition: all 0.2s;
}

.capture-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
}

.capture-btn:hover .capture-ring {
  transform: scale(1.1);
}

.capture-btn:hover .capture-center {
  transform: translate(-50%, -50%) scale(0.9);
}

.capture-btn:active .capture-center {
  transform: translate(-50%, -50%) scale(0.8);
  background: var(--primary);
}

/* 발견 결과 */
.discovery-result {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-hero);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: white;
  text-align: center;
  z-index: 20;
}

.celebration-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.result-animation {
  position: relative;
  margin-bottom: var(--spacing-lg);
  z-index: 2;
}

.result-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  animation: resultGlow 2s ease-in-out infinite;
}

@keyframes resultGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.species-image {
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  position: relative;
  z-index: 2;
  animation: speciesBounce 0.6s ease-out;
}

@keyframes speciesBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sparkle {
  position: absolute;
  font-size: 24px;
  animation: sparkleFloat 2s ease-in-out infinite;
}

.sparkle:nth-child(1) { top: 0; left: 50%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 50%; right: 0; animation-delay: 0.5s; }
.sparkle:nth-child(3) { bottom: 0; left: 50%; animation-delay: 1s; }
.sparkle:nth-child(4) { top: 50%; left: 0; animation-delay: 1.5s; }

@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-10px) scale(1.2); opacity: 0.5; }
}

.result-badge-container {
  margin-bottom: var(--spacing-md);
  z-index: 2;
}

.new-discovery-badge {
  background: var(--gradient-gold);
  color: white;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  animation: badgePop 0.5s ease-out 0.3s backwards;
}

@keyframes badgePop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.result-info {
  margin-bottom: var(--spacing-lg);
  z-index: 2;
}

.result-info h2 {
  font-size: 32px;
  font-weight: 700;
  margin: var(--spacing-sm) 0;
}

.scientific-name {
  font-size: 14px;
  font-style: italic;
  opacity: 0.8;
}

.ai-note {
  font-size: 12px;
  opacity: 0.7;
  margin-top: var(--spacing-sm);
}

.rarity-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rarity-badge.common { background: var(--rarity-common); color: white; }
.rarity-badge.uncommon { background: var(--rarity-uncommon); color: white; }
.rarity-badge.rare { background: var(--rarity-rare); color: white; }
.rarity-badge.legendary { background: var(--rarity-legendary); color: white; box-shadow: 0 0 20px var(--accent-glow); }

.reward-display.animated-rewards {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  z-index: 2;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  animation: rewardSlide 0.5s ease-out backwards;
}

.reward-item.xp-reward { animation-delay: 0.4s; }
.reward-item.token-reward { animation-delay: 0.6s; }

@keyframes rewardSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reward-icon {
  font-size: 24px;
}

.reward-value {
  font-size: 18px;
  font-weight: 700;
}

.result-actions {
  display: flex;
  gap: var(--spacing-md);
  z-index: 2;
}

.result-actions .btn-secondary {
  background: transparent;
  border-color: white;
  color: white;
}

.result-actions .btn-primary {
  background: white;
  color: var(--primary-dark);
  box-shadow: 0 4px 20px rgba(255,255,255,0.3);
}

/* ===== 도감 화면 ===== */
.category-filter {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  -webkit-overflow-scrolling: touch;
}

.category-filter::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  flex-shrink: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  background: var(--bg-primary);
}

.filter-btn.active {
  background: var(--gradient-primary);
  color: white;
}

.collection-stats {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.species-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.species-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.species-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.species-card.undiscovered {
  opacity: 0.6;
}

.species-card.undiscovered .species-card-image {
  filter: grayscale(100%);
}

.species-card-image {
  width: 64px;
  height: 64px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto var(--spacing-sm);
}

.species-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.species-card-rarity {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.species-card-rarity.common { background: var(--rarity-common); }
.species-card-rarity.uncommon { background: var(--rarity-uncommon); }
.species-card-rarity.rare { background: var(--rarity-rare); }
.species-card-rarity.legendary { background: var(--rarity-legendary); box-shadow: 0 0 10px var(--accent-glow); }

/* ===== 퀘스트 화면 ===== */
.streak-badge.animated-streak {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: rgba(245, 158, 11, 0.15);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.fire-icon {
  animation: fireFlicker 0.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.quest-tabs, .ranking-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.tab-btn {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.tab-btn.active {
  background: var(--gradient-primary);
  color: white;
}

.quest-content {
  display: none;
}

.quest-content.active {
  display: block;
}

.quest-list-full {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.quest-item-full {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.quest-item-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.quest-item-icon {
  width: 52px;
  height: 52px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.quest-item-info {
  flex: 1;
}

.quest-item-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.quest-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.quest-item-rewards {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.quest-reward-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.quest-reward-item.xp { color: var(--accent); }
.quest-reward-item.token { color: var(--primary); }
.quest-reward-item.badge { color: var(--secondary); }

.quest-item-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.quest-progress-bar-full {
  flex: 1;
  height: 8px;
  background: var(--bg-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.quest-progress-fill-full {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.quest-progress-text-full {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 시즌 배너 */
.seasonal-banner {
  background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  text-align: center;
  border: 2px solid #F9A8D4;
  position: relative;
  overflow: hidden;
}

.seasonal-icon {
  font-size: 64px;
  margin-bottom: var(--spacing-md);
  display: block;
}

.seasonal-title {
  font-size: 24px;
  font-weight: 700;
  color: #BE185D;
  margin-bottom: var(--spacing-sm);
}

.seasonal-desc {
  font-size: 14px;
  color: #9D174D;
  margin-bottom: var(--spacing-lg);
}

.seasonal-rewards {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
}

.seasonal-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.seasonal-reward-icon {
  font-size: 28px;
}

.seasonal-reward-label {
  font-size: 12px;
  color: #9D174D;
}

/* ===== 리더보드 ===== */
.top-three {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
}

.top-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.top-player.second, .top-player.third {
  transform: translateY(20px);
}

.top-player .avatar {
  width: 60px;
  height: 60px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-md);
}

.top-player.first .avatar {
  width: 80px;
  height: 80px;
  font-size: 40px;
  border: 3px solid var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}

.top-player .rank-badge {
  font-size: 28px;
  margin-bottom: var(--spacing-xs);
}

.top-player .name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.top-player .xp {
  font-size: 12px;
  color: var(--text-secondary);
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.rank-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.rank-item.current-user {
  background: rgba(16, 185, 129, 0.1);
  border: 2px solid var(--primary);
}

.rank-number {
  width: 32px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
}

.rank-avatar {
  width: 44px;
  height: 44px;
  background: var(--bg-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.rank-info {
  flex: 1;
}

.rank-name {
  font-size: 14px;
  font-weight: 600;
}

.rank-stats {
  font-size: 12px;
  color: var(--text-secondary);
}

.rank-xp {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.my-rank-card {
  position: sticky;
  bottom: 0;
  background: var(--bg-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--spacing-md);
  margin: var(--spacing-md) calc(var(--spacing-md) * -1) 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

/* ===== 프로필 화면 ===== */
.profile-header-large {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

.avatar-xlarge {
  width: 100px;
  height: 100px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin: 0 auto var(--spacing-md);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  position: relative;
}

.avatar-xlarge .avatar-ring {
  border-width: 4px;
}

.profile-header-large h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.profile-level {
  display: flex;
  justify-content: center;
}

.assets-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

.asset-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.asset-icon {
  font-size: 28px;
}

.asset-info {
  display: flex;
  flex-direction: column;
}

.asset-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.asset-value {
  font-size: 20px;
  font-weight: 700;
}

.asset-divider {
  width: 1px;
  height: 40px;
  background: var(--bg-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.stat-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-icon {
  font-size: 28px;
  margin-bottom: var(--spacing-xs);
  display: block;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.badge-gallery, .nft-gallery {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-sm);
  -webkit-overflow-scrolling: touch;
}

.badge-gallery::-webkit-scrollbar, .nft-gallery::-webkit-scrollbar {
  display: none;
}

.badge-item, .nft-item {
  flex-shrink: 0;
  width: 100px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.badge-icon, .nft-icon {
  font-size: 40px;
  margin-bottom: var(--spacing-sm);
  display: block;
}

.badge-name, .nft-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.badge-date, .nft-rarity {
  font-size: 10px;
  color: var(--text-secondary);
}

.nft-item {
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}

.badge-count, .nft-count {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ===== 임팩트 대시보드 ===== */
.impact-hero-card {
  background: var(--gradient-hero);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  color: white;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

.impact-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.impact-hero-content {
  position: relative;
  z-index: 2;
}

.impact-avatar {
  font-size: 64px;
  margin-bottom: var(--spacing-md);
}

.impact-hero-content h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.impact-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.impact-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.metric-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: var(--shadow-md);
}

.metric-card.primary {
  background: var(--gradient-primary);
  color: white;
}

.metric-icon {
  font-size: 40px;
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
}

.metric-label {
  font-size: 14px;
  font-weight: 600;
}

.metric-sublabel {
  font-size: 12px;
  opacity: 0.7;
}

.contribution-timeline {
  position: relative;
  padding-left: var(--spacing-lg);
}

.contribution-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.timeline-dot {
  position: absolute;
  left: -22px;
  top: 4px;
  width: 14px;
  height: 14px;
  background: var(--primary);
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
}

.timeline-content {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.timeline-date {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
}

.timeline-content p {
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 4px;
}

.impact-badges {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.impact-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  opacity: 0.5;
  filter: grayscale(100%);
}

.impact-badge.earned {
  opacity: 1;
  filter: none;
  border: 2px solid var(--primary);
}

.impact-badge .badge-icon {
  font-size: 32px;
}

.impact-badge .badge-name {
  font-size: 12px;
  font-weight: 600;
}

/* ===== 하단 네비게이션 - 글래스모피즘 ===== */
.bottom-nav {
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
  position: relative;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.04);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-light);
  transition: all 0.3s var(--ease-out-expo);
  border-radius: var(--radius-md);
}

.nav-item:hover {
  color: var(--primary);
  background: var(--primary-subtle);
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active .nav-icon {
  transform: scale(1.1);
}

.nav-icon {
  font-size: 24px;
  transition: transform 0.3s var(--ease-out-back);
}

.nav-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav-center {
  transform: translateY(-18px);
}

.nav-icon-large {
  width: 66px;
  height: 66px;
  background: linear-gradient(145deg, #00D9A5 0%, #00B386 50%, #0A4D3C 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow:
    0 6px 16px rgba(0, 217, 165, 0.4),
    0 12px 32px rgba(0, 217, 165, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  border: 3.5px solid white;
}

.camera-pulse {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: cameraPulse 2.5s var(--ease-out-expo) infinite;
  z-index: -1;
}

@keyframes cameraPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.nav-center:hover .nav-icon-large {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 8px 20px rgba(0, 217, 165, 0.4),
    0 16px 40px rgba(0, 217, 165, 0.25);
}

.nav-center:active .nav-icon-large {
  transform: scale(1.02);
}

/* ===== 가이드 투어 ===== */
.guide-tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.guide-tour-overlay.active {
  opacity: 1;
}

.guide-spotlight {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  transition: all 0.5s ease;
  display: none;
  z-index: 9001;
}

.guide-tooltip {
  position: absolute;
  background: white;
  border-radius: 16px;
  padding: 20px;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 9002;
  transition: opacity 0.3s ease;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tooltip-step {
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 10px;
  border-radius: 12px;
}

.tooltip-close {
  width: 28px;
  height: 28px;
  background: var(--bg-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.tooltip-close:hover {
  background: #e5e7eb;
}

.guide-tooltip h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
  line-height: 1.3;
}

.guide-tooltip p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.tooltip-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.tooltip-prev, .tooltip-next {
  padding: 8px 20px;
  border: none;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tooltip-prev {
  background: var(--bg-primary);
  color: var(--text-secondary);
}

.tooltip-prev:hover {
  background: #e5e7eb;
}

.tooltip-next {
  background: var(--primary);
  color: white;
}

.tooltip-next:hover {
  background: #059669;
}

.guide-progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 9003;
}

.guide-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #059669, #047857);
  transition: width 0.5s ease;
  border-radius: 0 3px 3px 0;
}

/* 투어 최종 요약 */
.tour-final-summary {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9005;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tour-final-summary.visible {
  opacity: 1;
}

.tour-summary-card {
  background: white;
  border-radius: 24px;
  padding: 40px 32px;
  width: 340px;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.summary-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}

.summary-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 28px;
  font-weight: 500;
}

.summary-values {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-value-item {
  text-align: left;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  border-left: 4px solid var(--primary);
}

.summary-value-item .value-number {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.summary-value-item .value-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.summary-value-item .value-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 투어 종료 화면 */
.tour-end-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tour-end-screen.visible {
  opacity: 1;
}

.tour-end-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tour-end-card {
  position: relative;
  background: white;
  border-radius: 24px;
  padding: 48px 32px 36px;
  width: 340px;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.end-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.end-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 24px;
}

.end-message {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.end-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 28px;
}

.end-actions {
  display: flex;
  gap: 10px;
}

.end-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.end-btn-secondary {
  background: var(--bg-primary);
  color: var(--text-secondary);
}

.end-btn-secondary:hover {
  background: #e5e7eb;
}

.end-btn-primary {
  background: var(--primary);
  color: white;
}

.end-btn-primary:hover {
  background: #059669;
}

/* ===== 모달 ===== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  max-width: 90%;
  max-height: 80%;
  overflow-y: auto;
  z-index: 10001;
  animation: modalIn 0.3s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-primary);
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--primary);
  color: white;
}

.species-detail {
  text-align: center;
}

.species-image-large {
  width: 120px;
  height: 120px;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  margin: 0 auto var(--spacing-md);
}

.species-detail h2 {
  font-size: 24px;
  font-weight: 700;
  margin: var(--spacing-sm) 0;
}

.species-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  text-align: center;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.info-value {
  font-size: 14px;
  font-weight: 600;
}

.species-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left;
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
}

.discovery-info {
  margin-top: var(--spacing-md);
  font-size: 13px;
  color: var(--primary);
}

/* 토스트 */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-dark);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.4s var(--ease-out-expo);
  z-index: 20000;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-icon {
  width: 24px;
  height: 24px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* 레벨업 모달 */
.level-up-modal .modal-overlay {
  background: rgba(16, 185, 129, 0.9);
}

.level-up-content {
  position: relative;
  text-align: center;
  color: white;
  padding: var(--spacing-xl);
  z-index: 10001;
}

.confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.level-up-animation {
  margin-bottom: var(--spacing-lg);
}

.level-badge.xlarge {
  font-size: 56px;
  padding: var(--spacing-md) var(--spacing-xl);
  background: white;
  color: var(--primary);
  border-radius: var(--radius-xl);
  display: inline-block;
  font-weight: 900;
  box-shadow: var(--shadow-xl);
  animation: levelBadgePop 0.5s ease-out;
}

@keyframes levelBadgePop {
  0% { transform: scale(0) rotate(-10deg); }
  50% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.level-up-content h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.level-up-content p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: var(--spacing-lg);
}

.level-up-content .btn-primary {
  background: white;
  color: var(--primary);
}

/* ===== 푸터 ===== */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(10px);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  z-index: 500;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-contest {
  color: var(--accent);
  font-weight: 600;
}

.footer-divider {
  opacity: 0.3;
}

/* ===== 반응형 ===== */
@media (max-width: 375px) {
  :root {
    --spacing-md: 12px;
    --spacing-lg: 20px;
  }

  .species-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
  }

  .species-card-image {
    width: 54px;
    height: 54px;
    font-size: 28px;
  }

  .intro-title {
    font-size: 36px;
  }
}

/* ===== 발견 플로우 단계별 진행바 ===== */
.analysis-progress-bar {
  width: 80%;
  max-width: 280px;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.analysis-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 3px;
  width: 0%;
  box-shadow: 0 0 10px var(--primary-glow);
}

/* ===== 발견 추가 정보 ===== */
.discovery-extra-info {
  width: 100%;
  max-width: 320px;
  margin: 12px auto 0;
  padding: 0 16px;
}

.extra-info-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.extra-info-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.extra-info-label {
  display: block;
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.extra-info-value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.observation-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 217, 165, 0.08);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  border: 1px solid rgba(0, 217, 165, 0.15);
}

.tip-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.tip-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ===== 콤보 보너스 팝업 ===== */
.combo-popup {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  z-index: 10000;
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-xl);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo);
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.4);
}

.combo-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.combo-count {
  font-size: 20px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
}

.combo-text {
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}

/* ===== 퀘스트 상세 모달 ===== */
.quest-detail-modal-content {
  max-width: 360px;
  padding: 28px 24px !important;
}

.quest-detail-header {
  text-align: center;
  margin-bottom: 20px;
}

.quest-detail-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.quest-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.quest-detail-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.quest-detail-progress {
  margin-bottom: 20px;
}

.quest-detail-progress-bar {
  height: 10px;
  background: #E5E7EB;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.quest-detail-progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 5px;
  transition: width 0.6s ease;
}

.quest-detail-progress-text {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.quest-detail-rewards {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.quest-detail-rewards h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.quest-detail-reward-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quest-detail-reward-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.quest-claim-btn {
  width: 100%;
  font-size: 16px;
  padding: 14px;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 165, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(0, 217, 165, 0); }
}

/* ===== 퀘스트 탭 페이드 ===== */
.quest-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quest-content.active {
  display: block;
  opacity: 1;
}

/* ===== 시즌 배너 카드 개선 ===== */
.seasonal-banner-card {
  background: linear-gradient(135deg, #FDF2F8, #FCE7F3);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(236, 72, 153, 0.15);
}

.seasonal-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.seasonal-badge-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seasonal-event-badge {
  background: linear-gradient(135deg, #EC4899, #F472B6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.seasonal-days-left {
  background: #FEF3C7;
  color: #92400E;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.seasonal-ended {
  background: #E5E7EB;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.seasonal-participants {
  font-size: 12px;
  color: #9D174D;
  margin: 8px 0;
  font-weight: 500;
}

/* ===== 포디움 레이아웃 ===== */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px 0;
  margin-bottom: 16px;
}

.podium-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 110px;
}

.podium-crown {
  font-size: 24px;
  margin-bottom: 4px;
  animation: crown-bounce 2s ease-in-out infinite;
}

@keyframes crown-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.podium-avatar {
  font-size: 32px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  margin-bottom: 6px;
}

.podium-player.first .podium-avatar {
  font-size: 38px;
  width: 60px;
  height: 60px;
  border: 3px solid #FBBF24;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.podium-player.second .podium-avatar {
  border: 2px solid #94A3B8;
}

.podium-player.third .podium-avatar {
  border: 2px solid #D97706;
}

.podium-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-xp {
  font-size: 10px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.podium-bar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: #fff;
}

.podium-bar.bar-1 {
  height: 80px;
  background: linear-gradient(180deg, #FBBF24, #F59E0B);
  font-size: 24px;
}

.podium-bar.bar-2 {
  height: 60px;
  background: linear-gradient(180deg, #94A3B8, #64748B);
  font-size: 20px;
}

.podium-bar.bar-3 {
  height: 44px;
  background: linear-gradient(180deg, #D97706, #B45309);
  font-size: 18px;
}

.podium-rank {
  opacity: 0.9;
}

/* ===== 주간 변동 표시 ===== */
.rank-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.weekly-change {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  padding: 2px 6px;
  border-radius: 4px;
}

.weekly-change.up {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}

.weekly-change.down {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.1);
}

.weekly-change.same {
  color: #9CA3AF;
}

/* ===== 임팩트 차트 12개월 ===== */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
  padding: 0 4px;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  min-width: 16px;
  background: var(--gradient-primary);
  border-radius: 4px 4px 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.bar-value {
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  padding-top: 4px;
  white-space: nowrap;
}

.bar-label {
  font-size: 9px;
  color: var(--text-light);
  margin-top: 4px;
  white-space: nowrap;
}

/* ===== 기여도 타임라인 개선 ===== */
.contribution-timeline {
  position: relative;
  padding-left: 24px;
}

.contribution-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), rgba(0, 217, 165, 0.1));
  border-radius: 1px;
}

.timeline-item {
  position: relative;
  margin-bottom: 16px;
  padding-left: 16px;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 2px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: var(--bg-secondary);
  border: 2px solid var(--primary);
  border-radius: 50%;
  z-index: 1;
}

.timeline-content {
  background: var(--bg-card);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.timeline-date {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
}

.timeline-content p {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 4px;
  line-height: 1.4;
}

/* ===== 퀘스트 아이템 클릭 가능 ===== */
.quest-item-full {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quest-item-full:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.quest-item-full.completed {
  position: relative;
  opacity: 0.85;
}

.quest-item-full.completed::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

/* ===== SVG 아이콘 시스템 ===== */
.svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* 퀘스트 아이콘 SVG 크기 */
.quest-icon.svg-icon svg {
  width: 24px;
  height: 24px;
}

.quest-item-icon.svg-icon svg {
  width: 24px;
  height: 24px;
}

/* 도감 카드 SVG */
.species-card-image.svg-icon svg {
  width: 48px;
  height: 48px;
}

/* 발견 아이템 SVG */
.discovery-image.svg-icon svg {
  width: 48px;
  height: 48px;
}

/* 공원 미리보기 SVG */
.species-mini.svg-icon svg {
  width: 24px;
  height: 24px;
}

/* 시즌 퀘스트 SVG */
.seasonal-icon.svg-icon svg {
  width: 32px;
  height: 32px;
}

/* 미발견 종: 잠금 상태 SVG */
.species-card-image.svg-icon.locked {
  opacity: 0.3;
  filter: grayscale(1);
}

.species-card.undiscovered .species-card-image.svg-icon {
  opacity: 0.3;
  filter: grayscale(1);
}

/* 카테고리 아이콘 SVG */
.category-icon svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 380px) {
  .species-card-image.svg-icon svg {
    width: 40px;
    height: 40px;
  }
}

/* ===== 마이크로 인터랙션 ===== */

/* 버튼 리플 이펙트 */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 카드 터치 피드백 */
.profile-card,
.impact-summary-card,
.quest-item,
.quest-item-full,
.species-card,
.rank-item,
.park-item,
.metric-card,
.badge-item,
.nft-item,
.stat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.profile-card:active,
.impact-summary-card:active,
.quest-item:active,
.quest-item-full:active,
.species-card:active,
.rank-item:active,
.park-item:active,
.metric-card:active,
.badge-item:active,
.nft-item:active,
.stat-card:active {
  transform: scale(0.98);
  opacity: 0.85;
}

/* 탭 전환 슬라이딩 인디케이터 */
.quest-tabs,
.ranking-tabs {
  position: relative;
}

.tab-indicator {
  position: absolute;
  bottom: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  transition: transform 0.3s var(--ease-out-expo), width 0.3s var(--ease-out-expo);
  z-index: 0;
  pointer-events: none;
}

.quest-tabs .tab-btn,
.ranking-tabs .tab-btn {
  position: relative;
  z-index: 1;
}

/* 토스트 개선 - 아이콘+색상 구분 */

.toast.toast-success .toast-icon {
  background: #10B981;
}

.toast.toast-info .toast-icon {
  background: #3B82F6;
}

.toast.toast-reward .toast-icon {
  background: #F59E0B;
}

.toast.toast-error .toast-icon {
  background: #EF4444;
}

/* 현재 위치 마커 펄스 개선 */
.current-location-icon .location-dot {
  width: 14px;
  height: 14px;
  background: #3B82F6;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
  position: relative;
}

.current-location-icon .location-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 2px solid rgba(59, 130, 246, 0.4);
  border-radius: 50%;
  animation: locationPulse 2s ease-out infinite;
}

@keyframes locationPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Leaflet 공원 마커 아이콘 */
.park-marker-icon {
  background: none !important;
  border: none !important;
}

.park-marker-icon .marker-content {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.park-marker-icon .marker-content:hover {
  transform: scale(1.15);
}

/* Leaflet 팝업 개선 */
.park-popup {
  text-align: center;
  min-width: 160px;
}

.park-popup h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.park-popup .park-area {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.park-popup .park-biodiversity {
  margin-bottom: 8px;
}

.park-popup .park-species-preview {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
}

/* ===== GPU 가속 최적화 ===== */
.screen,
.onboarding-slide,
.toast,
.modal-content,
.nav-icon-large,
.scan-line,
.xp-shimmer,
.camera-pulse,
.combo-popup {
  will-change: transform, opacity;
}

.ripple {
  will-change: transform, opacity;
}

/* 애니메이션 종료 후 will-change 해제 (JS에서 제어) */
.no-will-change {
  will-change: auto;
}

/* 버튼 리플 이펙트 (CSS-only fallback) */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}
.btn-ripple:active::after {
  transform: scale(4);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

/* 카드 프레스 피드백 (범용 클래스) */
.card-press {
  transition: transform 0.15s ease;
}
.card-press:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

/* ===== 화면 전환 부드러운 transition ===== */
.screen {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ============================================= */
/* ===== 홈 화면 대대적 UI/UX 개선 v2 ===== */
/* ============================================= */

/* --- 헤더 개선: 더 깊고 고급스러운 그라데이션 --- */
.home-header {
  background: linear-gradient(135deg, #042f22 0%, #0A4D3C 40%, #0d6b4f 70%, #10B981 100%);
  box-shadow: 0 4px 24px rgba(4, 47, 34, 0.5), 0 1px 0 rgba(93, 255, 194, 0.15) inset;
  padding-top: 0;
  padding-bottom: 0;
}

.app-logo {
  font-size: 24px !important;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #5DFFC2, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contest-mini-badge {
  background: rgba(251, 191, 36, 0.25) !important;
  color: #FFE566 !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- 스크린 바디 배경: 미세한 텍스처 --- */
#screen-home .screen-body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 217, 165, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #f0fdf9 0%, #f8fffe 30%, #ffffff 100%);
}

/* --- 프로필 카드: 프리미엄 글래스모피즘 --- */
.profile-card.hero-card {
  background: linear-gradient(155deg, #031d16 0%, #063b2b 20%, #0A4D3C 40%, #0f7a5a 65%, #10B981 85%, #34d399 100%);
  border-radius: 28px;
  padding: 28px 24px 24px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 217, 165, 0.2),
    0 24px 48px rgba(10, 77, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(93, 255, 194, 0.25);
  position: relative;
}

.profile-card.hero-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(93, 255, 194, 0.2) 0%, transparent 70%);
  border-radius: 0 28px 0 0;
  pointer-events: none;
}

/* 아바타 강화 */
.avatar-large.animated-avatar {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 0 16px rgba(93, 255, 194, 0.6));
}

.avatar-ring {
  border: 3px solid rgba(93, 255, 194, 0.6) !important;
  box-shadow: 0 0 12px rgba(93, 255, 194, 0.3);
}

/* 프로필 텍스트 강화 */
.profile-details h2 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.level-badge.animated-level {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1)) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 14px;
  font-weight: 700;
}

/* XP 바 강화 */
.xp-bar {
  height: 14px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.xp-progress {
  background: linear-gradient(90deg, #FBBF24, #F59E0B, #FFD700);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

/* 토큰 강화 */
.token-display {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(251, 191, 36, 0.12));
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 2px 12px rgba(251, 191, 36, 0.15);
  font-size: 20px;
  font-weight: 800;
}

/* --- 임팩트 카드: 개별 스탯을 카드로 분리 --- */
.impact-summary-card {
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf9 50%, #ecfdf5 100%);
  border-radius: 22px;
  padding: 22px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 24px rgba(16, 185, 129, 0.1);
  border: 1.5px solid rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: hidden;
}

.impact-summary-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 217, 165, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.impact-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--forest);
  letter-spacing: -0.01em;
}

.impact-stat {
  background: linear-gradient(145deg, #f8fffe, #f0fdf9);
  border-radius: 16px;
  padding: 14px 10px;
  border: 1px solid rgba(16, 185, 129, 0.12);
  transition: all 0.3s ease;
  position: relative;
}

.impact-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

.impact-stat .stat-num {
  font-size: 30px;
  font-weight: 900;
  background: linear-gradient(135deg, #0A4D3C, #10B981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.impact-stat .stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

.impact-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white !important;
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0, 217, 165, 0.3);
  transition: all 0.3s ease;
}

.impact-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 217, 165, 0.4);
}

/* --- 섹션 헤더: 강조 라인 추가 --- */
.section-header {
  position: relative;
  padding-left: 14px;
}

.section-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  border-radius: 4px;
}

.section-header h3, .section-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--forest);
  letter-spacing: -0.02em;
}

.section-header a {
  background: var(--primary-subtle);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
}

.section-header a:hover {
  background: rgba(0, 217, 165, 0.2);
}

/* --- 퀘스트 아이템: 카드형 디자인 강화 --- */
.quest-item {
  background: linear-gradient(135deg, #ffffff 0%, #fafffe 100%);
  border-radius: 18px;
  padding: 18px;
  gap: 14px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04);
  border-left: 5px solid var(--primary);
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  border-right: 1px solid rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.quest-item:hover {
  transform: translateX(6px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 28px rgba(16, 185, 129, 0.12);
  border-left-color: var(--forest);
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf9 100%);
}

.quest-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
  border-radius: 16px;
  font-size: 26px;
  box-shadow:
    0 3px 10px rgba(16, 185, 129, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.03);
}

.quest-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--forest);
}

.quest-progress-bar {
  height: 6px;
  background: #e8f5f0;
  border-radius: 6px;
}

.quest-progress-fill {
  background: linear-gradient(90deg, #00D9A5, #10B981, #0A4D3C);
  box-shadow: 0 0 8px rgba(0, 217, 165, 0.3);
}

.quest-reward span {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(251, 191, 36, 0.25);
  font-weight: 700;
  font-size: 12px;
  color: #b45309;
}

/* --- 발견 아이템: 더 생동감 있는 카드 --- */
.discovery-item {
  width: 88px;
}

.discovery-image {
  width: 72px;
  height: 72px;
  background: linear-gradient(145deg, #ffffff, #ecfdf5);
  border-radius: 22px;
  font-size: 36px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 0 0 1.5px rgba(16, 185, 129, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.35s var(--ease-out-back);
}

.discovery-item:hover .discovery-image {
  transform: scale(1.15) translateY(-4px);
  box-shadow:
    0 8px 24px rgba(16, 185, 129, 0.25),
    0 0 0 2px rgba(16, 185, 129, 0.3);
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
}

.discovery-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--forest);
  margin-top: 2px;
}

/* --- 공원 아이템: 모던 카드 디자인 --- */
.park-item {
  background: linear-gradient(135deg, #ffffff, #fafffe);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 4px 14px rgba(0, 0, 0, 0.04);
  border: 1.5px solid rgba(16, 185, 129, 0.08);
}

.park-item:hover {
  transform: translateX(6px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 28px rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  background: linear-gradient(135deg, #ffffff, #f0fdf9);
}

.park-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
  border-radius: 16px;
  font-size: 26px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}

.park-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--forest);
}

/* --- 하단 네비게이션: 더 세련된 디자인 --- */
.bottom-nav {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(16, 185, 129, 0.1);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.06), 0 -8px 32px rgba(0, 0, 0, 0.03);
}

.nav-item.active {
  color: var(--forest);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 0 0 4px 4px;
}

.nav-item {
  position: relative;
}

/* 카메라 버튼 강화 */
.nav-icon-large {
  background: linear-gradient(145deg, #00D9A5 0%, #0A9D7A 50%, #0A4D3C 100%) !important;
  box-shadow:
    0 4px 12px rgba(0, 217, 165, 0.4),
    0 8px 24px rgba(0, 217, 165, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border: 2px solid rgba(93, 255, 194, 0.3);
}

/* --- 퀘스트 리스트 gap 개선 --- */
.quest-list {
  gap: 12px;
}

.park-list {
  gap: 12px;
}

/* --- 스크롤 영역 개선 --- */
.discovery-preview {
  gap: 12px;
  padding: 4px 0 12px;
}

/* --- 전체 섹션 간격 개선 --- */
#screen-home .screen-body > .section {
  margin-bottom: 28px;
}

/* --- 히어로 카드 하단 행 --- */
.hero-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.streak-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* --- 퀵 액션 바 --- */
.quick-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.quick-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 10px;
  background: white;
  border: 1.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.quick-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 217, 165, 0.15);
  border-color: rgba(0, 217, 165, 0.3);
}

.quick-action-btn:active {
  transform: scale(0.96);
}

.quick-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, #00D9A5, #0A4D3C);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 217, 165, 0.3);
}

.quick-action-icon.explore-icon {
  background: linear-gradient(145deg, #38BDF8, #1d4ed8);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.quick-action-icon.collection-icon {
  background: linear-gradient(145deg, #a78bfa, #6366F1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.quick-action-icon.ranking-icon {
  background: linear-gradient(145deg, #FBBF24, #D97706);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.quick-action-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* --- 주간 챌린지 배너 --- */
.weekly-challenge-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #0A4D3C 0%, #0f7a5a 50%, #10B981 100%);
  border-radius: 20px;
  margin-bottom: 22px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(10, 77, 60, 0.3);
  position: relative;
  overflow: hidden;
}

.weekly-challenge-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.weekly-challenge-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(10, 77, 60, 0.4);
}

.challenge-icon-wrap {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.challenge-info {
  flex: 1;
  min-width: 0;
}

.challenge-tag {
  font-size: 10px;
  font-weight: 800;
  color: #FBBF24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.challenge-title {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin: 3px 0 8px;
  line-height: 1.2;
}

.challenge-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.challenge-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FBBF24, #FFD700);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.challenge-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.challenge-reward-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(251, 191, 36, 0.2);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  flex-shrink: 0;
}

.challenge-reward-amount {
  font-size: 14px;
  font-weight: 800;
  color: #FBBF24;
}

/* --- 임팩트 스탯 아이콘 --- */
.stat-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}

/* ============================================= */
/* ===== 인트로 화면 전면 개편 ===== */
/* ============================================= */

/* 인트로 배경 - 더 깊고 선명한 그라데이션 */
.intro-screen {
  background: linear-gradient(160deg, #021a13 0%, #063b2b 25%, #0A4D3C 50%, #0f7a5a 80%, #10B981 100%);
}

.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px 32px;
  height: 100%;
  max-width: 400px;
}

/* 상단 공모전 배지 */
.intro-top-badge {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 20;
}

.intro-top-badge span {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 중앙 히어로 */
.intro-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
  z-index: 10;
}

.intro-app-icon {
  margin-bottom: 20px;
  filter: drop-shadow(0 8px 24px rgba(0, 217, 165, 0.4));
  animation: iconFloat 4s ease-in-out infinite;
}

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

.intro-app-icon svg {
  border-radius: 18px;
}

.intro-title {
  font-family: 'Outfit', sans-serif;
  font-size: 42px !important;
  font-weight: 900;
  color: white;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.intro-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01em;
}

/* 핵심 기능 3가지 */
.intro-features {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  z-index: 10;
}

.intro-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 90px;
  transition: all 0.3s ease;
}

.intro-feature:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, #00D9A5, #0A4D3C);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 217, 165, 0.35);
}

.feature-icon-blue {
  background: linear-gradient(145deg, #38BDF8, #1d4ed8);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
}

.feature-icon-gold {
  background: linear-gradient(145deg, #FBBF24, #D97706);
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);
}

.feature-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* 한줄 설명 */
.intro-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-bottom: 32px;
  z-index: 10;
}

/* 시작 버튼 개선 */
.intro-start-btn {
  width: 100%;
  max-width: 280px;
  padding: 16px 32px;
  font-size: 17px;
  font-weight: 800;
  border-radius: 16px;
  z-index: 10;
}

/* 가이드 투어 버튼 개선 */
.guide-tour-btn {
  margin-top: 14px;
  z-index: 10;
  opacity: 0.7;
  font-size: 13px;
}

/* 불필요한 요소 숨기기 (서울 지도, 기존 contest-badge, logo-container) */
.intro-map-animation,
.contest-badge,
.intro-logo-container,
.intro-subtitle {
  display: none !important;
}

/* 파티클 캔버스 투명도 낮추기 */
.intro-particles {
  opacity: 0.3;
}