.loading-bar-overlay {
    position: fixed !important;   /* 화면 전체 기준 고정 */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.55);
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important;    /* 최상단 고정 */
}

/* 팝업 박스 */
.loading-popup {
    width: 600px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    font-size: 15px;
    margin: 0 !important;         /* 중앙에서 밀리는 문제 방지 */
    position: relative;           /* 부모 영향 안받게 고정 */
}

/* 팝업 헤더 */
.loading-popup-header {
    background: var(--color-primary);
    padding: 12px 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

/* 팝업 내용 */
.loading-popup-body {
    padding: 40px 20px;
    text-align: center;
}

/* 문구 */
.loading-text {
    margin-top: 15px;
    font-size: 16px;
    color: #444;
}

/* 도넛 로더 */
.loader {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.loader svg {
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: donut-rotate 1.6s linear infinite;
}

.loader circle.track {
    fill: none;
    stroke: rgba(255, 153, 0, 0.2);
    stroke-width: 10px;
}

.loader circle.arc {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 10px;
    stroke-linecap: round;
    stroke-dasharray: 0 314;
    stroke-dashoffset: 0;
    animation: donut-fill-unfill 1.6s ease-in-out infinite;
}

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

@keyframes donut-fill-unfill {
    0%   { stroke-dasharray: 0 314; }
    50%  { stroke-dasharray: 314 0; }
    100% { stroke-dasharray: 0 314; }
}