/* 요청 중 표시(#__loading) — 웹·모바일 같은 모양. 화면을 뿌옇게 덮고 가운데 원형 스피너.
   마크업은 <div id="__loading" style="display:none;" role="status" aria-label="불러오는 중"><div class="loading-spinner"></div></div>
   (웹 navigation.jsp · 모바일 navigation*.jsp). 뜨고 사라지는 페이드는 showRequestLoading · hideRequestLoading
   (웹 head.jsp · 모바일 include.jsp)이 axios 요청 수를 세어 한다 */
#__loading {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: var(--color-bg-loading-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-loading-track);
    border-top-color: var(--color-loading-spinner);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* 오래 걸리는 작업 표시 — 번역(#__loading-lang) · 음성 변환(#__loading-audio). 1분 넘게 걸릴 수 있어 스피너 아래에 안내 문구를 둔다.
   모양은 #__loading 과 같고, 화면이 직접 show() · hide() 한다(모바일 navigation*.jsp · m/login/join.jsp)
   <div id="__loading-lang" class="loading-task" style="display:none;" role="status"><div class="loading-spinner"></div><span class="loading-text">문구</span></div> */
.loading-task {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000; /* 같이 뜨는 요청 중 표시(#__loading)보다 위 */
    background-color: var(--color-bg-loading-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.loading-task .loading-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-default);
}
/* 작업 표시가 떠 있는 동안 요청 중 스피너는 숨긴다 — 번역·음성 요청도 axios 를 타서 두 스피너가 겹쳐 보였다 */
body:has(.loading-task:not([style*="none"])) #__loading {
    visibility: hidden;
}