/* ============================================================================
   ok-page-loader — 페이지 전환 로딩 오버레이 (임직원·학부모·인증 화면 공용)
   ----------------------------------------------------------------------------
   원래 parent-ui/components.css 안에 있었으나, 임직원 화면(style.css)과
   인증 화면(find-id·비밀번호 재설정 = style.css 단독)에도 같은 로더를 쓰게 되면서
   두 디자인 시스템 어디에도 속하지 않는 «공용 단일 정본» 으로 떼어냈다.
   ★로더 규칙은 이 파일에만 있어야 한다. components.css 로 되돌리면
     style.css 만 읽는 화면에서 로더가 스타일 없이 뜬다.

   토큰(--radius-full·--color-glow)은 style.css 와 parent-ui/tokens.css 양쪽에
   같은 값으로 정의돼 있지만, 어느 쪽도 없는 화면에서 링이 깨지지 않도록
   var() 폴백을 함께 적는다.
   ============================================================================ */

/* ── 타입 셀렉터 = «하이드레이션 전» 안전값 ────────────────────────────────
   커스텀 요소는 ok-page-loader.js 가 실행돼 connectedCallback() 이 돌아야
   .ok-page-loader 클래스가 붙는다. 그 전까지 이 요소는 클래스가 없는
   position:fixed; inset:0 상자 — 즉 «보이지 않는 전체 화면 클릭 차단막» 이다.
   모듈 로드가 느리거나 실패하면 사용자는 아무것도 못 누르면서 이유도 알 수 없다.
   그래서 숨김·클릭통과를 클래스가 아니라 타입 셀렉터에 둔다.
   특이성: ok-page-loader(0,0,1) < .ok-page-loader.is-active(0,2,0) 이므로
   활성화는 정상적으로 이긴다. */
ok-page-loader {
  position: fixed;
  inset: 0;
  /* z-index 9450 — 실측 좌표에서 고른 값이다.
       임직원 모달 200 · 레벨업 축하 9400  → 이보다 위 (전환 중엔 로더가 최상단)
       확인창(okDialog) 9500 · 토스트 9999 → 이보다 아래 (질문·알림을 가리면 안 된다)
       스킵 링크 10000 은 키보드 접근성용이라 항상 위에 둔다. */
  z-index: 9450;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ok-page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 27, 51, 0.35);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ok-page-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ok-page-loader__spinner {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ok-page-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full, 999px);
  border: 4px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--color-glow, #4fa3ff);
  animation: ok-page-loader-spin 0.7s linear infinite;
}

.ok-page-loader__logo {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(79, 163, 255, 0.5));
}

@keyframes ok-page-loader-spin {
  to { transform: rotate(360deg); }
}

/* 회전을 원치 않는 사용자에게는 멈춘 링만 보여준다(오버레이 자체는 유지 —
   전환 중임을 알리는 역할이 사라지면 안 된다). */
@media (prefers-reduced-motion: reduce) {
  .ok-page-loader__ring { animation: none; }
}