/* =================================================================
   Loading Spinner — 공통 비동기 로딩 인디케이터
   Webzine SaaS AI WebService

   - 전역 오버레이(.app-loader): 화면 전체를 덮는 블로킹 로더
   - 영역 로더(.app-loader--scoped): 특정 컨테이너 내부 부분 로딩
   - 디자인 토큰(app.css)을 단일 소스로 상속 (라이트/다크 자동 대응)
   - prefers-reduced-motion: 회전 대신 페이드 펄스로 폴백
   JS 제어: public/js/loading-spinner.js (window.AppLoader)
   ================================================================= */

:root {
  --app-loader-size: 52px;
  --app-loader-stroke: 4px;
  /* 회사사용자/관리자 전역 로더는 공통 미디어 모달(z-1800)보다 위에 표시 */
  --app-loader-z: 2000;
  --app-loader-backdrop: rgba(15, 23, 42, 0.24);
  --app-loader-panel-bg: rgba(255, 255, 255, 0.86);
}

[data-theme="dark"] {
  --app-loader-backdrop: rgba(2, 6, 23, 0.74);
  --app-loader-panel-bg: rgba(15, 23, 42, 0.86);
}

/* ── 전역 오버레이 ───────────────────────────────────────────── */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: var(--app-loader-z);
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--app-loader-backdrop);
  -webkit-backdrop-filter: blur(1.5px) saturate(105%);
          backdrop-filter: blur(1.5px) saturate(105%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.app-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* 로딩 중 하위 UI 상호작용 차단 */
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* 떠 있는 카드형 패널 (스피너 + 라벨을 담는 그릇) */
.app-loader__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 30px;
  background: var(--app-loader-panel-bg);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.app-loader.is-active .app-loader__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 라벨이 없을 때는 패널을 군더더기 없이 스피너만 떠 있게 처리 */
.app-loader--bare .app-loader__panel {
  padding: 22px;
  gap: 0;
}

.app-loader__label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary, #475569);
  text-align: center;
}

.app-loader--bare .app-loader__label {
  display: none;
}

/* ── 스피너 비주얼 (트랙 링 + 회전 호의 이중 레이어) ────────────── */
.app-loader__spinner {
  position: relative;
  width: var(--app-loader-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent; /* 푸른색 원형 동그라미 제거 */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary, #4f46e5) 28%, transparent));
  transform-origin: 50% 50%;
  will-change: transform;
  
  /* 브랜드 이니셜 Z 로고 중앙 정렬 및 폰트 스타일 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  font-family: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-primary, #4f46e5);
  user-select: none;
}

/* 트랙(연한 배경 링) — 회전 호 뒤에 깔려 대비를 만든다 */
.app-loader__spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--app-loader-stroke) solid
    color-mix(in srgb, var(--color-border, #e2e8f0) 65%, transparent);
}

/* 회전 호 — conic-gradient로 실제 진행 호가 움직이도록 표현 */
.app-loader__spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 42deg,
      color-mix(in srgb, var(--color-primary, #4f46e5) 30%, transparent) 72deg,
      var(--color-primary, #4f46e5) 132deg,
      color-mix(in srgb, var(--color-primary, #4f46e5) 72%, #06b6d4) 190deg,
      transparent 248deg 360deg
    );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--app-loader-stroke) - 1px),
    #000 calc(100% - var(--app-loader-stroke)),
    #000 calc(100% - 1px),
    transparent 100%
  );
          mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--app-loader-stroke) - 1px),
    #000 calc(100% - var(--app-loader-stroke)),
    #000 calc(100% - 1px),
    transparent 100%
  );
  
  /* 실제 스피너만 팽글팽글 돌리도록 지정 */
  animation: app-loader-spin 0.82s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

@keyframes app-loader-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── 영역(스코프) 로더 — 컨테이너 내부 부분 로딩 ────────────────── */
.app-loader--scoped {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--app-loader-backdrop);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.app-loader--scoped.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.app-loader--scoped .app-loader__spinner {
  --app-loader-size: 36px;
  --app-loader-stroke: 3px;
  filter: none;
  font-size: 13px;
}

/* ── 버튼/요소 인라인 스피너 (선택적 유틸리티) ─────────────────── */
.app-spinner-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: app-loader-spin 0.7s linear infinite;
}

/* ── 접근성: 모션 최소화 환경 — 트랜지션만 최소화 ──────────── */
@media (prefers-reduced-motion: reduce) {
  .app-loader,
  .app-loader__panel,
  .app-loader--scoped {
    transition: opacity 0.15s linear;
  }
}