/* 전체 로딩 컨테이너 */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* GPU 가속 최적화 */
  will-change: opacity;
  transform: translateZ(0);
}

/* 방사형 프로그레스 로더 컨테이너 */
.radial-progress-loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 방사형 스피너 컨테이너 */
.radial-spinner {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  justify-content: center;
}

/* 개별 스피너 막대 */
.spinner-bar {
  position: absolute;
  width: 2px;
  height: 10px;
  background: #00b1ff;
  border-radius: 2px;
  transform-origin: 50% 20px;
  transform: rotate(var(--rotation));
  animation: fadeInOut 1.2s ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0.2;
}

/* 스피너 막대 애니메이션 */
@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

/* 페이드아웃 애니메이션 */
.loading-container.fade-out {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* 다크모드 지원 */
@media (prefers-color-scheme: dark) {
  .loading-container {
    background: #1a1a1a;
  }
  .spinner-bar {
    background: #00b1ff;
  }
}

/* 접근성: 애니메이션 감소 요청 지원 */
@media (prefers-reduced-motion: reduce) {
  .spinner-bar {
    animation: none;
    opacity: 0.6;
  }

  .loading-container.fade-out {
    transition: none;
  }
}