/* Shared by Astro navigation and the standalone React gallery bootstrap.
   The bars signal a pending operation; they never claim a percentage. */
.toris-loading {
  --loading-surface: var(--color-card, #ffffff);
  --loading-ground: var(--color-paper, #f4f5f7);
  --loading-ink: var(--color-ink, #18202b);
  --loading-muted: var(--color-muted, #58667a);
  --loading-accent: var(--color-brand, #145fd7);
  --loading-line: var(--color-line, #d6dce6);
  --loading-soft: var(--color-signal-soft, #dce8ff);
  box-sizing: border-box;
  color: var(--loading-ink);
  font-family: var(--font-sans, 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}
.toris-loading--compact { display: flex; min-width: 0; align-items: center; gap: 0.875rem; }
.toris-loading--panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; width: min(100%, 36rem); padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--loading-line); border-radius: 1.25rem; background: var(--loading-surface); }
.toris-loading__mark { display: flex; width: 2rem; height: 2rem; flex: 0 0 2rem; align-items: center; justify-content: center; gap: 0.2rem; overflow: hidden; border-radius: 0.5rem; color: var(--loading-accent); background: var(--loading-soft); }
.toris-loading__mark > span { width: 0.1875rem; height: 0.875rem; border-radius: 1px; background: currentColor; }
.toris-loading__mark > span:first-child { height: 0.5rem; }
.toris-loading__mark > span:last-child { height: 0.6875rem; }
.toris-loading__copy { min-width: 0; }
.toris-loading__label { margin: 0; font-size: 0.875rem; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.toris-loading__description { margin: 0.375rem 0 0; color: var(--loading-muted); font-size: 0.8125rem; line-height: 1.7; overflow-wrap: anywhere; }
.toris-loading__skeleton { display: grid; grid-column: 1 / -1; gap: 0.75rem; margin-top: 1rem; }
.toris-loading__skeleton-heading, .toris-loading__skeleton-line, .toris-loading__skeleton-grid > span { border-radius: 0.5rem; background: var(--loading-ground); }
.toris-loading__skeleton-heading { width: 56%; height: 1.5rem; }
.toris-loading__skeleton-line { width: 100%; height: 0.75rem; }
.toris-loading__skeleton-line--short { width: 72%; }
.toris-loading__skeleton-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.toris-loading__skeleton-grid > span { height: 5rem; border: 1px solid var(--loading-line); }
/* Layer 45: nonblocking status above header (40), below skip links (60)
   and native dialogs. No backdrop or focus capture. */
.navigation-loading { position: fixed; z-index: 45; inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto; display: flex; width: max-content; max-width: min(29rem, calc(100vw - 2rem)); align-items: center; gap: 0.75rem; padding: 0.75rem 0.625rem 0.75rem 0.875rem; border: 1px solid var(--color-control-line, #818fa2); border-radius: var(--radius-control, 0.625rem); color: var(--color-ink, #18202b); background: var(--color-card, #ffffff); box-shadow: 0 8px 24px -16px rgb(24 32 43 / 32%); }
.navigation-loading[hidden] { display: none !important; }
.navigation-loading > button { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; place-items: center; padding: 0; border: 0; border-radius: 0.5rem; color: inherit; background: transparent; cursor: pointer; }
.navigation-loading > button:hover { background: var(--color-paper-2, #e9edf3); }
.navigation-loading > button:focus-visible { outline: 2px solid var(--color-brand, #145fd7); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .toris-loading__mark > span { animation: toris-loading-arrive 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .toris-loading__mark > span:nth-child(2) { animation-delay: 70ms; }
  .toris-loading__mark > span:nth-child(3) { animation-delay: 140ms; }
  .navigation-loading[data-motion='subtle'] { animation: toris-navigation-arrive 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .navigation-loading[data-motion='instant'] .toris-loading__mark > span { animation: none; }
}
@keyframes toris-loading-arrive { from { transform: translateY(0.375rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toris-navigation-arrive { from { transform: translateY(0.25rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toris-loading *, .navigation-loading { animation: none !important; transition: none !important; } }
@media (max-width: 479px) { .navigation-loading { inset-inline: 1rem; width: auto; } .navigation-loading > .toris-loading { flex: 1 1 auto; } }