/* v5.86 — 로딩 스켈레톤. 팔레트(잉크 #2e2b26 / 페이퍼 #f6f5ef)를 섞은 톤만 쓴다 — 흰색·검정·그림자 없음.
   base = 페이퍼 94% + 잉크 6%, band = 페이퍼 89% + 잉크 11%. 미디어가 오면 .is-loaded가 붙어 부드럽게 나타난다. */
:root {
  --skeleton-base: #ebe9e3;
  --skeleton-band: #e1dfd8;
}

.theme-dark {
  --skeleton-base: rgba(246, 245, 239, 0.1);
  --skeleton-band: rgba(246, 245, 239, 0.18);
}

/* 브랜드 규정(그레이디언트 금지)에 따라 빛줄기 대신 두 톤 사이를 오가는 펄스 */
@keyframes skeleton-pulse {
  50% { background-color: var(--skeleton-band); }
}

@keyframes media-fade-in {
  from { opacity: 0; }
}

img.is-loading,
video.is-loading,
.client-marquee__card--skeleton {
  background-color: var(--skeleton-base);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}

img.is-loaded,
video.is-loaded {
  animation: media-fade-in 420ms ease-out;
}

/* 스켈레톤이 비친 채로 alt 글자가 보이지 않게 */
img.is-loading {
  color: transparent;
}

.client-marquee__card--skeleton {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  img.is-loading,
  video.is-loading,
  .client-marquee__card--skeleton {
    animation: none;
  }

  img.is-loaded,
  video.is-loaded {
    animation: none;
  }
}