/* 썸네일 로딩 개선 CSS */

/* 스켈레톤 애니메이션 */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 썸네일 컨테이너 */
.thumbnail-wrapper {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e8e8e8 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: inherit;
}

/* 썸네일 이미지 기본 스타일 */
.thumbnail-img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 로딩 완료 시 */
.thumbnail-img.loaded {
  opacity: 1;
}

/* 로딩 완료 시 스켈레톤 제거 */
.thumbnail-wrapper.loaded {
  background: none;
  animation: none;
}

/* 원형 아바타용 */
.thumbnail-wrapper.avatar {
  border-radius: 50%;
  overflow: hidden;
}

/* 사각형 썸네일용 */
.thumbnail-wrapper.video {
  border-radius: 8px;
  overflow: hidden;
}