/* ==============================================
   skeleton.css - Skeleton Loading Animation
   CP-3: 스켈레톤 UI (스피너 사용 금지)
   Shimmer gradient (left-to-right sweep)
   ============================================== */

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .skeleton-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

@media (min-width: 1200px) {
    .skeleton-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
    }
}

.skeleton-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.skeleton-image {
    aspect-ratio: 3 / 4;
    background: linear-gradient(
        90deg,
        hsl(var(--muted)) 25%,
        hsl(var(--muted-foreground) / 0.08) 50%,
        hsl(var(--muted)) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line {
    border-radius: var(--space-1);
    background: linear-gradient(
        90deg,
        hsl(var(--muted)) 25%,
        hsl(var(--muted-foreground) / 0.08) 50%,
        hsl(var(--muted)) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-shop {
    width: 40%;
    height: var(--space-3);
    margin: var(--space-3) var(--space-3) var(--space-15);
}

.skeleton-name {
    width: 80%;
    height: var(--space-35);
    margin: 0 var(--space-3) var(--space-15);
    animation-delay: 0.1s;
}

.skeleton-price {
    width: 50%;
    height: var(--space-4);
    margin: 0 var(--space-3) var(--space-3);
    animation-delay: 0.2s;
}