/* 전역 배경 — assets/jinju_pharmacy_hero.html 기반 */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-bg__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, #1b4f72 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 15% 30%, #1a3a5c 0%, transparent 60%),
    linear-gradient(160deg, #0a1f33 0%, #0d2b45 40%, #102a42 70%, #081828 100%);
}

.site-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(46, 134, 193, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 134, 193, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: siteGridDrift 30s linear infinite;
}

@keyframes siteGridDrift {
  to {
    transform: translate(60px, 60px);
  }
}

.site-bg__molecules {
  position: absolute;
  inset: 0;
}

.site-bg__mol {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(46, 134, 193, 0.15);
  animation: siteMolPulse 6s ease-in-out infinite;
}

@keyframes siteMolPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.04);
  }
}

.site-bg__mol--1 {
  width: min(500px, 90vw);
  height: min(500px, 90vw);
  top: -100px;
  right: -100px;
}

.site-bg__mol--2 {
  width: 300px;
  height: 300px;
  bottom: 10%;
  right: 10%;
  animation-delay: 2s;
  animation-duration: 6s;
}

.site-bg__mol--3 {
  width: 200px;
  height: 200px;
  top: 35%;
  left: 20%;
  animation-delay: 4s;
  animation-duration: 7s;
}

.site-bg__mol--4 {
  width: min(900px, 140vw);
  height: min(900px, 140vw);
  top: 55%;
  left: 50%;
  margin-top: calc(min(900px, 140vw) / -2);
  margin-left: calc(min(900px, 140vw) / -2);
  border-color: rgba(46, 134, 193, 0.06);
  animation: siteMolFade 10s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes siteMolFade {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.25;
  }
}

.site-bg__flows {
  position: absolute;
  inset: 0;
}

.site-bg__flow {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79, 195, 193, 0.35) 40%,
    rgba(46, 134, 193, 0.5) 60%,
    transparent 100%
  );
  animation: siteFlowRight 8s ease-in-out infinite;
  opacity: 0;
}

@keyframes siteFlowRight {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.site-bg__flow--1 {
  top: 15%;
  animation-duration: 9s;
}

.site-bg__flow--2 {
  top: 45%;
  animation-delay: 3s;
  animation-duration: 11s;
}

.site-bg__flow--3 {
  top: 72%;
  animation-delay: 6s;
  animation-duration: 8s;
}

.site-bg__flow--4 {
  top: 88%;
  animation-delay: 2s;
  animation-duration: 10s;
}

.site-bg__particles {
  position: absolute;
  inset: 0;
}

.site-bg__particle {
  position: absolute;
  border-radius: 50%;
  animation: siteParticleFloat linear infinite;
  opacity: 0;
}

@keyframes siteParticleFloat {
  0% {
    transform: translateY(110vh) translateX(0);
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  95% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-10vh) translateX(var(--drift, 0px));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg__grid,
  .site-bg__mol,
  .site-bg__flow,
  .site-bg__particle {
    animation: none !important;
  }
}