/* ═══════════════════════════════════════════════════════════════════════════
   첫 화면 로더 — 금테 원과 워드마크를 CSS 로만 그린다.
   index.html 이 <script type="module"> 을 받아오기 전에 이미 보이는 유일한 화면이라
   이미지·폰트 같은 외부 자원에 기대지 않는다.

   ★ 여기 있던 것은 CSS 로 그린 악어 얼굴이었다. NEXORA 로 통일하면서 지웠다 —
     이 브랜드에는 동물이 없다. 로고 이미지를 쓰고 싶어도 **여기서는 못 쓴다**:
     이 화면의 존재 이유가 '자산이 도착하기 전에 보이는 것' 이기 때문이다.
     그래서 글자와 원만으로 브랜드를 세운다.

   ★ 바탕은 검정 그대로다. 앱이 뜬 뒤의 로비와 같은 색이라 넘어갈 때 번쩍이지 않는다.
     (Vuetify 다크 테마의 background 와 같은 값이어야 한다 — initCore 가 그 값을 여기로 복사한다)
   ═══════════════════════════════════════════════════════════════════════════ */

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(560px 380px at 50% 42%, rgba(201, 162, 39, 10%), transparent 68%),
    var(--initial-loader-bg, #000);
  block-size: 100%;
  gap: 30px;
  inline-size: 100%;
}

/* ── 금테 원 ── */
.loading-ring {
  position: relative;
  block-size: 84px;
  inline-size: 84px;
}

/* 바깥 테 — 가만히 있는 금색 원 */
.loading-ring::before {
  position: absolute;
  border: 1px solid rgba(201, 162, 39, 26%);
  border-radius: 50%;
  content: '';
  inset: 0;
}

/* 도는 호(弧) — 두 변만 금색이라 회전이 보인다 */
.loading-ring::after {
  position: absolute;
  border: 2px solid transparent;
  border-block-start-color: var(--initial-loader-color, #c9a227);
  border-inline-end-color: var(--initial-loader-color, #c9a227);
  border-radius: 50%;
  animation: nxSpin 1.15s linear infinite;
  content: '';
  inset: -5px;
}

/* 가운데 모노그램 N — 세공된 로고의 대역이다(그림을 못 쓰는 화면이므로 세리프로 대신한다) */
.loading-ring span {
  position: absolute;
  display: grid;
  color: var(--initial-loader-color, #c9a227);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  font-weight: 700;
  inset: 0;
  place-items: center;
  text-shadow: 0 0 18px rgba(201, 162, 39, 45%);
}

/* ── 워드마크 ── */
.loading-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--initial-loader-color, #c9a227);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.42em;

  /* 자간을 크게 준 글자는 오른쪽에 그 폭만큼 빈자리가 남아 가운데가 왼쪽으로 밀려 보인다 */
  text-indent: 0.42em;
}

.loading-name span {
  display: block;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 55%), transparent);
  block-size: 1px;
  inline-size: 74px;
}

@keyframes nxSpin {
  to {
    transform: rotate(1turn);
  }
}

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