/* 
 * Loading Placeholders (Skeleton UI)
 * Used to show ghost elements while data is being fetched on mobile.
 */

/* 1. Base Placeholder Style with Shimmer Animation */
.placeholder-shimmer {
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.placeholder-shimmer::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.03) 20%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer-animation 2s infinite;
}

@keyframes shimmer-animation {
    100% { transform: translateX(100%); }
}

/* 2. Visibility Control: Show only on Mobile (< 1024px) */
.mobile-only-placeholder {
    display: block;
}

@media (min-width: 1024px) {
    .mobile-only-placeholder {
        display: none !important;
    }
}

/* 3. Page Specific Ratios to match real cards */

/* Explore Page Video Cards (Thumbnail 9:16 + Info Section) */
.explore-card-placeholder {
    aspect-ratio: 9/19; /* 제목 영역 높이를 포함하여 보정 */
    width: 100%;
}

/* Collections Workspace Cards (Thumbnail 3:4 + Info Section) */
.collection-card-placeholder {
    aspect-ratio: 3/5.2; /* 하단 제목 및 태그 영역 높이를 포함하여 보정 */
    width: 100%;
}