/* ============================================================
   v21 — Performance UX: Skeleton Loading + Instant Feedback
   ============================================================ */

/* ── Skeleton Loading Animation ── */
@keyframes skeleton-pulse {
  0%   { opacity: 0.15; }
  50%  { opacity: 0.25; }
  100% { opacity: 0.15; }
}

.skeleton-view {
  padding: 20px 16px;
  max-width: 800px;
}

.skeleton-bar {
  background: var(--c-text);
  border-radius: var(--r-2, 8px);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

/* ── Boot overlay 개선 — 더 빠른 페이드아웃 ── */
#boot-overlay {
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
#boot-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── 뷰 전환 시 즉시 피드백 ── */
#view-root {
  min-height: 60vh;
}

/* ── API 캐시 인디케이터 (stale 데이터 표시) ── */
.stale-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--c-text-mute);
  background: var(--c-surface-2);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}
.stale-indicator.show {
  opacity: 1;
}

/* ── 로딩 스피넄 개선 ── */
.view-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--c-text-mute);
  font-size: 13px;
  gap: 8px;
}
.view-loading-spinner i {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Optimistic update flash ── */
@keyframes optimistic-flash {
  0%   { background-color: rgba(136, 199, 20, 0.15); }
  100% { background-color: transparent; }
}
.optimistic-updated {
  animation: optimistic-flash 0.8s ease-out;
}

/* ── Content loading placeholder ── */
.content-placeholder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.content-placeholder .ph-line {
  height: 14px;
  background: var(--c-text);
  border-radius: 4px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.content-placeholder .ph-line:nth-child(2) { width: 85%; animation-delay: 0.1s; }
.content-placeholder .ph-line:nth-child(3) { width: 70%; animation-delay: 0.2s; }
.content-placeholder .ph-line:nth-child(4) { width: 90%; animation-delay: 0.3s; }