/* ==============================
   LOADING SCREEN (공용)
============================== */

.loading-screen{
  position: fixed;
  inset: 0;
  z-index: 9999;
  max-width: 480px;
  margin: 0 auto;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loading-screen::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/wood.jpg") center center / cover no-repeat;
  filter: grayscale(1) brightness(0.04) contrast(1.1);
  z-index: 0;
}

.loading-grain{
  position: absolute;
  inset: 0;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.loading-scanlines{
  position: absolute;
  inset: 0;
  z-index: 6;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0.35) 0px,
    rgba(0,0,0,0.35) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.loading-on-air{
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Cormorant SC', serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold);
}
.loading-on-air .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px 2px rgba(255,59,78,0.9);
  animation: loading-blink 1.6s infinite ease-in-out;
}
@keyframes loading-blink{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.25; }
}

.loading-center{
  position: relative;
  z-index: 10;
  text-align: center;
}

.loading-emblem{
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 8px rgba(240,200,105,0.5);
  animation: loading-flicker 2.4s infinite;
}
.loading-emblem::before,
.loading-emblem::after{
  content: "";
  position: absolute;
  top: -30px;
  width: 11px;
  height: 32px;
  border: 1.5px solid var(--gold);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 6px rgba(240,200,105,0.4);
  background: transparent;
}
.loading-emblem::before{ left: 10px; transform: rotate(-12deg); transform-origin: bottom center; }
.loading-emblem::after{ right: 10px; transform: rotate(12deg); transform-origin: bottom center; }

.loading-bowtie {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: 14px;
  height: 9px;
  background: var(--gold);
  clip-path: polygon(0 0, 7px 4.5px, 0 9px, 14px 9px, 7px 4.5px, 14px 0);
  box-shadow: 0 0 5px rgba(240,200,105,0.5);
  z-index: 2;
}
.loading-bowtie::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 5px;
  background: var(--gold);
  border-radius: 1px;
}

.loading-rule{
  width: 120px;
  height: 1px;
  background: var(--gold-dim);
  margin: 10px auto;
  opacity: 0.6;
}

.loading-title{
  font-family: 'Cormorant SC', serif;
  font-size: 22px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 6px var(--gold), 0 0 14px rgba(240,200,105,0.5);
  line-height: 1.5;
  animation: loading-flicker 2.4s infinite;
}

.loading-subtitle{
  margin-top: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold-dim);
  line-height: 1.6;
  text-transform: uppercase;
}

.loading-bottom{
  position: absolute;
  bottom: 40px;
  left: 0; right: 0;
  z-index: 10;
  text-align: center;
  font-family: 'Cormorant SC', serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold);
}
.loading-bottom .ld-dot{
  opacity: 0;
  animation: ld-dot-blink 1.2s infinite;
}
.loading-bottom .ld-dot:nth-child(1){ animation-delay: 0s; }
.loading-bottom .ld-dot:nth-child(2){ animation-delay: 0.3s; }
.loading-bottom .ld-dot:nth-child(3){ animation-delay: 0.6s; }
@keyframes ld-dot-blink{
  0%,100%{ opacity: 0; }
  50%{ opacity: 1; }
}

@keyframes loading-flicker{
  0%,19%,21%,23%,80%,100%{ opacity: 1; }
  20%,22%{ opacity: 0.5; }
}

.loading-screen.done{
  animation: loading-fade-out 0.8s ease-out forwards;
  pointer-events: none;
}
@keyframes loading-fade-out{
  to{ opacity: 0; visibility: hidden; }
}