/* 55CINE 로고 스피너: logo-spinner-bg.png(고정) + logo-spinner-ring.png(회전) */

.logo-spinner {
  --ti-logo-spinner-ring-left: 11.525%;
  --ti-logo-spinner-ring-top: 31.138%;
  --ti-logo-spinner-ring-width: 46.61%;
  --ti-logo-spinner-ring-height: 41.168%;
  position: relative;
  display: inline-block;
  width: 72px;
  aspect-ratio: 590 / 668;
  flex-shrink: 0;
  vertical-align: middle;
}

.logo-spinner__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.logo-spinner__ring {
  position: absolute;
  left: var(--ti-logo-spinner-ring-left);
  top: var(--ti-logo-spinner-ring-top);
  width: var(--ti-logo-spinner-ring-width);
  height: var(--ti-logo-spinner-ring-height);
  background: url("../images/logo-spinner-ring.png") center / contain no-repeat;
  transform-origin: center center;
  animation: ti-logo-spinner-rotate 1.1s linear infinite;
  pointer-events: none;
}

.logo-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ti .np-root:not(.np-list) .np-list-status.is-loading,
.ti .np-root:not(.np-list) .np-list-status.is-empty,
.ti .np-list .np-list-status.is-loading,
.ti .np-list .np-list-status.is-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 200px;
}

.ti .np-root:not(.np-list) .np-list-status__text,
.ti .np-list .np-list-status__text {
  margin: 0;
}

.ti .np-root:not(.np-list) .np-load-more,
.ti .np-list .np-load-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 16px 0 8px;
}

.ti .np-root:not(.np-list) .np-load-more[hidden],
.ti .np-list .np-load-more[hidden] {
  display: none !important;
}

@media (min-width: 900px) {
  .ti .np-root:not(.np-list) .np-load-more,
  .ti .np-list .np-load-more {
    display: none !important;
  }
}

@keyframes ti-logo-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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