/* =========================================================================
   메인(index) 전용 — 배경 리디자인
   기존 하드 그리드(격자) → 소프트 메시 글로우 + 느리게 흐르는 accent orb.
   다크/라이트 모두 가독성 확보. body.bg-mesh 에만 적용(다른 페이지 영향 없음).
   ========================================================================= */

body.bg-mesh::before {
  background:
    radial-gradient(60% 46% at 82% -6%, rgba(52,225,255,0.14), transparent 60%),
    radial-gradient(52% 40% at 10% 2%, rgba(0,51,120,0.34), transparent 62%),
    radial-gradient(70% 55% at 50% 100%, rgba(0,51,120,0.16), transparent 65%),
    linear-gradient(180deg, #070a12 0%, #0c1120 100%);
}
:root[data-theme="light"] body.bg-mesh::before {
  background:
    radial-gradient(60% 46% at 82% -6%, rgba(52,225,255,0.16), transparent 62%),
    radial-gradient(52% 40% at 8% 0%, rgba(0,51,120,0.09), transparent 62%),
    radial-gradient(70% 55% at 50% 100%, rgba(0,51,120,0.05), transparent 65%),
    linear-gradient(180deg, #eef3fb 0%, #f6f9fe 100%);
}

/* 우리 base.css 는 body::after 로 전역 도트 매트릭스를 깐다(원본에는 없는 레이어).
   메인은 소프트 메시만 쓰는 디자인이라 여기서만 도트를 걷어낸다 — 다른 페이지는 그대로. */
body.bg-mesh::after { display: none; }

/* drifting accent orbs — 느리고 은근하게, 시선을 빼앗지 않는다. reduced-motion 이면 정지. */
.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-orbs span {
  position: absolute; border-radius: 50%; filter: blur(70px);
  background: radial-gradient(circle, rgba(52,225,255,0.20), transparent 68%);
  animation: bgOrbDrift 26s ease-in-out infinite;
}
:root[data-theme="light"] .bg-orbs span { background: radial-gradient(circle, rgba(52,225,255,0.22), transparent 68%); opacity: 0.7; }
.bg-orbs span:nth-child(1) { width: 460px; height: 460px; top: -140px; right: 6%; }
.bg-orbs span:nth-child(2) { width: 360px; height: 360px; bottom: -120px; left: 4%; background: radial-gradient(circle, rgba(0,51,120,0.28), transparent 68%); animation-duration: 32s; animation-delay: -8s; }

@keyframes bgOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3%, 4%) scale(1.06); }
  66%      { transform: translate(-3%, -2%) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-orbs span { animation: none; }
}
@media (max-width: 640px) {
  .bg-orbs span:nth-child(2) { display: none; }
}