/* detail:selection */
::selection { background: #332D7B; color: #FFFFFF; }

/* detail:focus-ring */
:focus-visible { outline: 2px solid #332D7B; outline-offset: 2px; }

/* detail:scrollbar */
::-webkit-scrollbar { width: 8; }
::-webkit-scrollbar-track { background: #FFFFFF; }
::-webkit-scrollbar-thumb { background: #6B6980; border-radius: 2; }

/* detail:spinner */
.ds-spinner { width: 24px; height: 24px; border: 3px solid #F7F7FB; border-top-color: #332D7B; border-radius: 50%; animation: ds-spin .8s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* detail:skeleton */
.ds-skeleton { background: linear-gradient(90deg, #F7F7FB 25%, #FFFFFF 50%, #F7F7FB 75%); background-size: 200% 100%; animation: ds-skeleton 1.5s ease infinite; border-radius: 2; }
@keyframes ds-skeleton { to { background-position: -200% 0; } }

/* detail:fade-in */
.ds-fade-in { animation: ds-fade-in .3s ease both; }
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* detail:press */
.ds-press { transition: transform .1s ease; }
.ds-press:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .ds-spinner, .ds-skeleton, .ds-fade-in { animation: none; }
  .ds-press { transition: none; }
}

/* logo motion preset: fade (detail-pack 정본) */
.logo-fade { animation: logo-fade 0.8s ease-in-out both; }
@keyframes logo-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .logo-fade { animation: none; }
}