/* 전역 로딩 오버레이 스타일 */
.global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* 하드웨어 가속 활성화 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: opacity, visibility;
}

.global-overlay.show {
    opacity: 1;
    visibility: visible;
}

.overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.overlay-content {
    position: relative;
    z-index: 1;
}

.loading-container {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 200px;
}

.logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.logo-wrapper {
    position: relative;
    z-index: 2;
}

.loading-logo {
    width: 48px;
    height: 48px;
    animation: logoSpin 0.8s linear infinite;
    transform-origin: center;
    /* 하드웨어 가속 및 브라우저 호환성 개선 */
    -webkit-animation: logoSpin 0.8s linear infinite;
    -moz-animation: logoSpin 0.8s linear infinite;
    -o-animation: logoSpin 0.8s linear infinite;
    will-change: transform;
}

.progress-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.progress-svg {
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: #f3f4f6;
    stroke-width: 2;
}

.progress-circle {
    fill: none;
    stroke: #FF3F0B;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    animation: progressAnimation 2s ease-in-out infinite;
    /* 브라우저 호환성 개선 */
    -webkit-animation: progressAnimation 2s ease-in-out infinite;
    -moz-animation: progressAnimation 2s ease-in-out infinite;
    -o-animation: progressAnimation 2s ease-in-out infinite;
}

.loading-message {
    margin-top: 1rem;
}

.loading-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
    font-family: 'Noto Sans KR', sans-serif;
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.dot {
    width: 4px;
    height: 4px;
    background: #FF3F0B;
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite both;
    /* 브라우저 호환성 개선 */
    -webkit-animation: dotPulse 1.4s ease-in-out infinite both;
    -moz-animation: dotPulse 1.4s ease-in-out infinite both;
    -o-animation: dotPulse 1.4s ease-in-out infinite both;
    will-change: transform, opacity;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

.error-container {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 200px;
}

.error-icon {
    margin-bottom: 1rem;
}

.error-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 1rem 0;
    font-family: 'Noto Sans KR', sans-serif;
}

.retry-btn {
    background: #FF3F0B;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Noto Sans KR', sans-serif;
}

.retry-btn:hover {
    background: #e5370a;
}

/* 애니메이션 정의 - 브라우저 호환성 개선 */
@keyframes logoSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes logoSpin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes logoSpin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

@keyframes progressAnimation {
    0% { stroke-dashoffset: 176; }
    50% { stroke-dashoffset: 44; }
    100% { stroke-dashoffset: 176; }
}

@-webkit-keyframes progressAnimation {
    0% { stroke-dashoffset: 176; }
    50% { stroke-dashoffset: 44; }
    100% { stroke-dashoffset: 176; }
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes dotPulse {
    0%, 80%, 100% {
        -webkit-transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

/* 모바일 최적화 */
/* @media (max-width: 768px) {
    .loading-container,
    .error-container {
        margin: 1rem;
        padding: 1.5rem;
        min-width: auto;
        max-width: calc(100vw - 2rem);
    }
    
    .loading-logo {
        width: 40px;
        height: 40px;
    }
    
    .progress-svg {
        width: 56px;
        height: 56px;
    }
    
    .progress-circle-bg,
    .progress-circle {
        r: 24;
        cx: 28;
        cy: 28;
    }
} */

/* 접근성 개선 */
/* @media (prefers-reduced-motion: reduce) {
    .loading-logo {
        animation: none;
    }
    
    .progress-circle {
        animation: none;
        stroke-dashoffset: 88;
    }
    
    .dot {
        animation: none;
        opacity: 0.7;
    }
} */

/* 중복 클릭 방지 스타일 */
.link-disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

body.loading-active {
    overflow: hidden;
}