/* ============================================================
   Social Radar — v8 앱 셸 확장 (v8.css 정본 위에 얹는 앱 전용 계층)
   ------------------------------------------------------------
   v8.css(와이어 정본)는 수정하지 않는다 — 앱 런타임에만 필요한
   로딩/토스트/프로그레스/모바일 드로어를 여기서 확장한다.
   페이지 한정 스타일은 페이지별 파일 (v8-login.css 등).
   ============================================================ */

/* ---- Alpine x-cloak (평가 전 깜빡임 방지) ---- */
[x-cloak] { display: none !important; }

/* ---- Livewire navigate 진행바 (topbar 상단 1선) ---- */
#nav-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  pointer-events: none;
}
#nav-progress .bar {
  height: 100%; width: 0; background: var(--brand);
  transition: width .25s ease, opacity .25s ease; opacity: 0;
}
#nav-progress.loading .bar { width: 70%; opacity: 1; transition: width 6s cubic-bezier(.1,.6,.2,1), opacity .1s; }
#nav-progress.done .bar { width: 100%; opacity: 0; }

/* ---- 스피너 (버튼/인라인 공용) ---- */
.sr-spin {
  display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: sr-rotate .7s linear infinite;
}
.sr-spin.lg { width: 20px; height: 20px; border-width: 2.5px; }
@keyframes sr-rotate { to { transform: rotate(360deg); } }

/* ---- 스켈레톤 (목록/카드 최초 로드) ---- */
.sr-skel {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-hover) 25%, var(--border-soft) 50%, var(--surface-hover) 75%);
  background-size: 200% 100%;
  animation: sr-shimmer 1.4s ease infinite;
}
@keyframes sr-shimmer { to { background-position: -200% 0; } }

/* ---- 재조회 디밍 (wire:loading 델리게이트) ----
   목록 재조회는 콘텐츠를 유지한 채 살짝 가라앉힌다 (레이아웃 점프 방지). */
.sr-dim { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* ---- 토스트 (하단 중앙 단일 채널) ---- */
.sr-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  z-index: 160; pointer-events: none;
  background: var(--ink); color: #fff;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
  padding: 10px 16px; border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
  max-width: min(92vw, 480px); text-align: center;
}
.sr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .sr-spin, .sr-skel { animation-duration: 1.5s; }
  #nav-progress .bar { transition: none; }
  .sr-toast { transition: none; }
}

/* ---- 모바일 사이드바 드로어 (≤1024px) ---- */
@media (max-width: 1024px) {
  .sidebar.is-open {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 150;
    box-shadow: var(--shadow-pop);
  }
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 140;
    background: rgba(11, 18, 32, .35);
  }
}

/* ---- 알림 배너 (로그인 안내 등 공용) ---- */
.sr-notice {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--fs-sm); line-height: 1.55;
  padding: 11px 14px; border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--warn-text);
  border: 1px solid rgba(217, 126, 26, .22);
}
.sr-notice svg, .sr-notice i { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.sr-notice.is-info { background: var(--brand-soft); color: var(--brand-deep); border-color: rgba(79, 70, 229, .2); }
.sr-notice.is-good { background: var(--good-soft); color: var(--good-text); border-color: rgba(31, 157, 85, .22); }
.sr-notice.is-bad  { background: var(--bad-soft);  color: var(--bad-text);  border-color: rgba(221, 68, 68, .22); }