html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
}

.site-loader {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.15rem;
  padding: 2rem;
  background: radial-gradient(circle at center, rgb(8 9 12 / 42%), rgb(5 5 6 / 78%));
  color: var(--vellum);
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.site-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader-mark {
  position: relative;
  width: 4.7rem;
  height: 4.7rem;
  border: 1px solid color-mix(in srgb, var(--brass) 68%, transparent);
  transform: rotate(45deg);
  box-shadow: 0 0 32px color-mix(in srgb, var(--brass) 22%, transparent), inset 0 0 24px #0008;
  animation: loader-orbit 3.6s linear infinite;
}

.site-loader-mark::before,
.site-loader-mark::after {
  content: "";
  position: absolute;
  inset: 0.63rem;
  border: 1px solid color-mix(in srgb, var(--brass-bright) 56%, transparent);
}

.site-loader-mark::after { inset: 1.38rem; background: var(--brass-bright); box-shadow: 0 0 17px var(--brass); }
.site-loader-mark i { position: absolute; width: 0.38rem; height: 0.38rem; background: var(--brass-bright); box-shadow: 0 0 12px var(--brass-bright); }
.site-loader-mark i:nth-child(1) { top: -0.2rem; left: -0.2rem; }
.site-loader-mark i:nth-child(2) { top: -0.2rem; right: -0.2rem; }
.site-loader-mark i:nth-child(3) { right: -0.2rem; bottom: -0.2rem; }
.site-loader-mark i:nth-child(4) { bottom: -0.2rem; left: -0.2rem; }

.site-loader-copy { display: grid; gap: 0.36rem; text-align: center; }
.site-loader-copy span { color: var(--brass); font-family: Cinzel, serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; }
.site-loader-copy strong { font-family: "Noto Serif KR", serif; font-size: clamp(1rem, 2.8vw, 1.25rem); font-weight: 600; }
.site-loader-progress { width: min(16rem, 62vw); height: 3px; overflow: hidden; background: rgb(232 220 198 / 20%); }
.site-loader-progress i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-bright), #fff0be); box-shadow: 0 0 12px var(--brass-bright); transition: width 0.24s ease; }
.site-loader-count { min-width: 3rem; color: var(--ash); font-family: Cinzel, sans-serif; font-size: 0.68rem; letter-spacing: 0.11em; text-align: center; }

@keyframes loader-orbit { to { transform: rotate(405deg); } }

@media (prefers-reduced-motion: reduce) { .site-loader-mark { animation: none; } .site-loader, .site-loader-progress i { transition-duration: 0.01ms; } }