/* 공통 로딩 표시 (2026-11-09 사용자 결정: ① 원형 링 + ② 늘었다 줄어드는 호 + ⑤ 퍼지는 원 + 이미지 스켈레톤)
   배경 투명, 색은 currentColor(놓인 곳의 글자색), 견본 https://claude.ai/artifact/Jy2VsUbsQnyB5XWh5vz2vK */

/* 크기 토큰: 버튼 안·기본·큰 영역 */
:root { --loading-size-small: 18px; --loading-size: 36px; --loading-size-large: 48px; }

/* ① 원형 링: 버튼 처리 중·작은 비동기 영역 (사용: <span class="loading-ring" role="status" aria-label="불러오는 중"></span>) */
.loading-ring { display: inline-block; width: var(--loading-size); height: var(--loading-size); border-radius: 50%;
  border: 3.5px solid currentColor; border-right-color: transparent; animation: loading-spin .8s linear infinite; }
.loading-ring.is-small { width: var(--loading-size-small); height: var(--loading-size-small); border-width: 2.5px; }

/* ② 늘었다 줄어드는 호: 본문·통계·차트 영역 (사용: <svg class="loading-arc" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"/></svg>) */
.loading-arc { width: var(--loading-size-large); height: var(--loading-size-large); animation: loading-spin 1.6s linear infinite; }
.loading-arc circle { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; animation: loading-arc 1.4s ease-in-out infinite; }

/* ⑤ 퍼지는 원: RFID·QR 스캔, 결제 단말기 응답 대기 (사용: <span class="loading-pulse"><i></i><i></i></span>) */
.loading-pulse { position: relative; display: inline-block; width: var(--loading-size-large); height: var(--loading-size-large); }
.loading-pulse i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid currentColor; opacity: 0; animation: loading-pulse 1.6s ease-out infinite; }
.loading-pulse i:nth-child(2) { animation-delay: .8s; }

/* 이미지·목록 자리 스켈레톤: 크기를 미리 잡아 화면 밀림 방지 (색은 프로젝트 토큰으로 덮어씀) */
.loading-skeleton { --skeleton-base: #e8ebf2; --skeleton-shine: #f5f6fa;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-shine) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%; border-radius: 8px; animation: loading-shine 1.3s linear infinite; }

/* 처리 중인 버튼: 그 버튼만 잠금 */
[aria-busy="true"] { cursor: progress; }

@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-arc { 0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 80 150; stroke-dashoffset: -30; } 100% { stroke-dasharray: 80 150; stroke-dashoffset: -112; } }
@keyframes loading-pulse { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes loading-shine { to { background-position: -200% 0; } }

/* 움직임 줄이기 설정: 멈추지 않고 느리게 */
@media (prefers-reduced-motion: reduce) { .loading-ring, .loading-arc, .loading-arc circle, .loading-pulse i, .loading-skeleton { animation-duration: 2.4s; } }