/* ═══════════════════════════════════════════════════════════════════════════
   첫 화면 로더 — 브랜드 로고 + 금색 진행 바.
   index.html 이 <script type="module"> 을 받아오기 전에 이미 보이는 유일한 화면이라
   폰트·번들 같은 외부 자원에 기대지 않는다(로고 한 장만 public/ 에서 곧장 받는다).
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(680px 460px at 50% 38%, rgba(255, 192, 0, 13%), transparent 66%),
    radial-gradient(520px 380px at 18% 82%, rgba(233, 11, 34, 10%), transparent 62%),
    var(--initial-loader-bg, #08080a);
  block-size: 100%;
  gap: 30px;
  inline-size: 100%;
}

/* ── 로고 ── */
.loading-logo {
  display: block;
  animation: logoBreathe 2.6s ease-in-out infinite;

  /* 금박 아래로 은은한 발광 — 검은 화면에서 로고가 떠 있는 것처럼 보인다 */
  filter: drop-shadow(0 6px 26px rgba(255, 192, 0, 26%));
  inline-size: 280px;

  /* 비율 고정. width/height 속성이 있어도 CSS 로 폭을 바꾸면 높이가 따라와야 한다. */
  block-size: auto;
  max-inline-size: 72vw;
}

/* ── 진행 바 ── */
/* 실제 진행률을 알 수 없으므로(번들을 받는 중이다) 좌우로 훑는 부정형 바다.
   막대가 '차오르는' 모양을 흉내 내면 언제 끝나는지 거짓말을 하게 된다. */
.loading-bar {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 100px;
  background: rgba(255, 255, 255, 8%);
  block-size: 3px;
  inline-size: 200px;
  max-inline-size: 60vw;
}

.loading-bar i {
  position: absolute;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--initial-loader-color, #ffc000), transparent);
  inset-block: 0;
  inline-size: 45%;
  animation: barSweep 1.15s ease-in-out infinite;
}

@keyframes barSweep {
  0% { inset-inline-start: -45%; }

  100% { inset-inline-start: 100%; }
}

@keyframes logoBreathe {
  0%,
  100% {
    opacity: 0.86;
    transform: translateY(0) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.012);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-logo { animation: none; }

  .loading-bar i {
    animation: none;
    inline-size: 100%;
    inset-inline-start: 0;
    opacity: 0.6;
  }
}