/* ============================================================================
 * ⏳ 로딩 오버레이 — 2026-08-01 부터 사용하지 않습니다.
 * ----------------------------------------------------------------------------
 * 화면 전체를 덮는 층이라 페이지가 바뀔 때 이전 화면과 새 화면이 겹쳐 보이는
 * 잔상의 원인이 됐습니다. 34개 페이지가 각자 이 오버레이를 갖고 있고,
 * 그중 12곳은 자바스크립트로 직접 켜기 때문에, 여기서 한 번에 막습니다.
 *
 * 🥤 로그인 · 로그아웃 · 지원 진입 화면(연결 화면)은 별개 장치입니다.
 *    /css/connect-screen.css 가 담당하며 이 규칙과 무관합니다.
 *
 * 지금은 '페이지 이동'에서만 쓰지 않습니다.
 * 업로드 · 저장처럼 화면이 그대로인 작업에서는 그대로 씁니다.
 * (화면이 안 바뀌면 겹칠 화면도 없으므로 잔상이 생기지 않습니다)
 * ============================================================================ */
/* 로딩 오버레이 스타일 */
        #loadingOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* ⚠️ 예전에는 rgba(...,0.94) 였다. 반투명이라 페이지를 떠나는 동안
               이전 화면이 비쳐 보이고, 새 화면이 그려지면 두 화면이 겹쳐 보였다(잔상).
               완전히 불투명하게 덮어야 이전 화면이 새지 않는다. */
            background: #FFFFFF;
            z-index: 999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
        }

        .loader-logo {
            width: 80px;
            height: auto;
            margin-bottom: 20px;
            animation: bounce 1.5s infinite ease-in-out;
        }

        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid var(--border-color);
            border-top: 5px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        #loadingMessage {
            margin-top: 15px;
            font-weight: bold;
            color: var(--text-color);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }


/* --- 카카오 애드핏 광고 스타일 --- */
        #adfit-container {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
            width: 728px;
            height: 90px;
            text-align: center;
        }

/* 감춰져 있는 동안에는 안쪽 애니메이션을 멈춘다 —
   보이지도 않는 로고와 스피너가 계속 돌면 화면을 계속 다시 그리게 된다. */
#loadingOverlay:not([style*="flex"]) .loader-logo,
#loadingOverlay:not([style*="flex"]) .loader {
    animation: none !important;
}