/* ===== CSS Variables (ported from index.css) ===== */
:root {
  font-size: 15.2px;

  --background: 220 10% 35%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 222 80% 22%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 222 75% 38%;
  --secondary: 220 15% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 222 80% 22%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 38%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;
  --info: 217 91% 60%;
  --info-foreground: 0 0% 100%;
  --price: 351 83% 51%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 222 80% 22%;
  --radius: 0.375rem;
  --gradient-hero: linear-gradient(135deg, hsl(222 80% 22%) 0%, hsl(222 75% 38%) 100%);
  --shadow-card: 0 1px 3px 0 hsl(220 13% 50% / 0.08), 0 1px 2px -1px hsl(220 13% 50% / 0.05);
  --shadow-elevated: 0 10px 30px -10px hsl(222 80% 22% / 0.18);
}

/* ===== Base Reset ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 30px;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  line-height: 1.5;
}

/* ===== Custom Animations ===== */
@keyframes cta-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(var(--primary) / 0.0), 0 0 0 0 hsl(var(--primary) / 0.0);
  }
  50% {
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.35), 0 0 16px 2px hsl(var(--primary) / 0.45);
  }
}

@keyframes cta-glow-amber {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(38 92% 50% / 0), 0 0 0 0 hsl(38 92% 50% / 0);
  }
  50% {
    box-shadow: 0 0 0 4px hsl(38 92% 50% / 0.35), 0 0 16px 2px hsl(38 92% 50% / 0.5);
  }
}

@keyframes cta-glow-soft {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(var(--primary) / 0), 0 0 0 0 hsl(var(--primary) / 0);
  }
  50% {
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.18), 0 0 10px 1px hsl(var(--primary) / 0.22);
  }
}

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

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes plane-fly {
  0% { transform: translate(0, 0) scale(0.9); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(360px, -520px) scale(0.5); opacity: 0; }
}

@keyframes address-blink {
  0%, 100% { filter: brightness(1); text-shadow: none; }
  50% { filter: brightness(0.6) contrast(1.3) saturate(1.4); text-shadow: 0 0 1px currentColor; }
}

@keyframes row-flash {
  0%, 100% { background-color: hsl(38 100% 95%); }
  25%, 75% { background-color: hsl(38 100% 75%); }
  50% { background-color: hsl(38 100% 95%); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-from-top-2 {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-from-bottom-2 {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-from-bottom-3 {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes zoom-in-95 {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes slide-in-from-bottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ===== Animation Utility Classes ===== */
.animate-cta-glow { animation: cta-glow 1.6s ease-in-out infinite; }
.animate-cta-glow-amber { animation: cta-glow-amber 1.6s ease-in-out infinite; }
.animate-cta-glow-soft { animation: cta-glow-soft 1.8s ease-in-out infinite; }
.animate-bounce-soft { animation: click-hint-bounce 1.2s ease-in-out infinite; }
.animate-float-soft { animation: float-soft 3s ease-in-out infinite; }
.animate-plane-fly { animation: plane-fly 1.4s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
.animate-address-blink { animation: address-blink 0.9s ease-in-out infinite; }
.animate-row-flash { animation: row-flash 0.55s ease-in-out 2; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-fade-in { animation: fade-in 0.3s ease-out; }

/* ===== Slide-in animations ===== */
.anim-fade-in { animation: fade-in 0.3s ease-out; }
.anim-slide-top { animation: slide-in-from-top-2 0.3s ease-out; }
.anim-slide-bottom { animation: slide-in-from-bottom-2 0.3s ease-out; }
.anim-slide-bottom-3 { animation: slide-in-from-bottom-3 0.4s ease-out; }
.anim-zoom { animation: zoom-in-95 0.5s ease-out; }
.anim-slide-up { animation: slide-in-from-bottom 0.3s ease-out; }

/* ===== Lucide icon sizing helper ===== */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ===== Tailwind config extension (passed via script tag) ===== */
/* Shadow-card utility */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }

/* Text color utilities using CSS vars */
.text-price { color: hsl(var(--price)); }
.text-success { color: hsl(var(--success)); }
.text-warning { color: hsl(var(--warning)); }
.text-info { color: hsl(var(--info)); }
.text-destructive { color: hsl(var(--destructive)); }

.bg-success\/5 { background-color: hsl(var(--success) / 0.05); }
.bg-success\/10 { background-color: hsl(var(--success) / 0.1); }
.bg-success\/15 { background-color: hsl(var(--success) / 0.15); }
.bg-info\/5 { background-color: hsl(var(--info) / 0.05); }
.bg-info\/15 { background-color: hsl(var(--info) / 0.15); }
.bg-warning\/5 { background-color: hsl(var(--warning) / 0.05); }
.bg-warning\/15 { background-color: hsl(var(--warning) / 0.15); }

.border-success\/30 { border-color: hsl(var(--success) / 0.3); }
.border-success\/60 { border-color: hsl(var(--success) / 0.6); }
.border-info\/30 { border-color: hsl(var(--info) / 0.3); }
.border-warning\/30 { border-color: hsl(var(--warning) / 0.3); }

/* ===== Panel ring glow ===== */
.panel-active-nodepeak {
  border-color: rgb(168 85 247);
  box-shadow: 0 10px 30px -10px hsl(var(--primary) / 0.4);
  transform: scale(1.01);
  z-index: 10;
}
.panel-active-shop {
  border-color: rgb(245 158 11);
  box-shadow: 0 10px 30px -10px hsl(var(--primary) / 0.4);
  transform: scale(1.01);
  z-index: 10;
}
.panel-active-neopec {
  border-color: rgb(6 182 212);
  box-shadow: 0 10px 30px -10px hsl(var(--primary) / 0.4);
  transform: scale(1.01);
  z-index: 10;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(220 13% 75%); border-radius: 3px; }