/* ============================================
   Modern Overlay Spinner
   ============================================ */

/* Overlay - 전체 화면 덮기 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* 기본 숨김 (JS에서 display로 제어) */
.loading-overlay[style*="display: none"],
.loading-overlay[style*="display:none"] {
    display: none !important;
}

/* 스피너 컨테이너 */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Ring Gradient 스피너 - Apple 스타일 */
.spinner-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.9) 270deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 5px));
    animation: spin 1s linear infinite;
}

/* 로딩 텍스트 (선택사항) */
.loading-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   크기 변형
   ============================================ */

/* 작은 스피너 */
.spinner-circle.small {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

/* 큰 스피너 */
.spinner-circle.large {
    width: 64px;
    height: 64px;
    border-width: 5px;
}

/* ============================================
   색상 변형
   ============================================ */

/* 브랜드 컬러 (주황) */
.spinner-circle.brand {
    border-color: rgba(255, 136, 0, 0.3);
    border-top-color: #ff8800;
}

/* 흰색 배경용 (회색) */
.spinner-circle.gray {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #666;
}

/* ============================================
   인라인 스피너 (Overlay 없이 단독 사용)
   ============================================ */

.spinner-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Legacy 호환 (기존 ispinner)
   ============================================ */
.ispinner {
  position: relative;
  width: 35px;
  height: 35px;
}

.ispinner .ispinner-blade {
    position: absolute;
    top: 11.5px;
    left: 15px;
    width: 5px;
    height: 12px;
    background-color: #8e8e93;
    border-radius: 2.5px;
    animation: iSpinnerBlade 1s linear infinite;
    will-change: opacity;
}

.ispinner .ispinner-blade:nth-child(1) {
    transform: rotate(45deg) translateY(-11.5px);
    animation-delay: -1.625s;
}
.ispinner .ispinner-blade:nth-child(2) {
    transform: rotate(90deg) translateY(-11.5px);
    animation-delay: -1.5s;
}
.ispinner .ispinner-blade:nth-child(3) {
    transform: rotate(135deg) translateY(-11.5px);
    animation-delay: -1.375s;
}
.ispinner .ispinner-blade:nth-child(4) {
    transform: rotate(180deg) translateY(-11.5px);
    animation-delay: -1.25s;
}
.ispinner .ispinner-blade:nth-child(5) {
    transform: rotate(225deg) translateY(-11.5px);
    animation-delay: -1.125s;
}
.ispinner .ispinner-blade:nth-child(6) {
    transform: rotate(270deg) translateY(-11.5px);
    animation-delay: -1s;
}
.ispinner .ispinner-blade:nth-child(7) {
    transform: rotate(315deg) translateY(-11.5px);
    animation-delay: -0.875s;
}
.ispinner .ispinner-blade:nth-child(8) {
    transform: rotate(360deg) translateY(-11.5px);
    animation-delay: -0.75s;
}

@keyframes iSpinnerBlade {
    0% { opacity: 0.85; }
    50% { opacity: 0.25; }
    100% { opacity: 0.25; }
}