/* mosaic-reset: uiverse 컴포넌트 공통 전제 (box-sizing + 기본 sans-serif) */
*, *::before, *::after { box-sizing: border-box; }
:where(body) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* 단독 동작용 무대 — 흰 페이지가 보이도록 어두운 배경 + 중앙 정렬 */
html, body { margin: 0; height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #212121;
}

/* ---- 컴포넌트 본체 (uiverse: grumpy-dolphin-30) ---- */
.loader {
  position: relative;
  width: 33px;
  height: 33px;
  perspective: 67px;
}

.loader div {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 50%;
  transform-origin: left;
  animation: loader 2s infinite;
}

.loader div:nth-child(1) { animation-delay: 0.15s; }
.loader div:nth-child(2) { animation-delay: 0.3s; }
.loader div:nth-child(3) { animation-delay: 0.45s; }
.loader div:nth-child(4) { animation-delay: 0.6s; }
.loader div:nth-child(5) { animation-delay: 0.75s; }

@keyframes loader {
  0% {
    transform: rotateY(0deg);
  }

  50%, 80% {
    transform: rotateY(-180deg);
  }

  90%, 100% {
    opacity: 0;
    transform: rotateY(-180deg);
  }
}