.skeleton-wrapper {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;

    .skeleton {
        background: var(--background-color-gray);

        border-radius: 8px;
        position: relative;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.2) 20%,
                    rgba(255, 255, 255, 0.5) 60%,
                    rgba(255, 255, 255, 0) 100%);
            transform: translateX(-100%);
            animation: shimmer 1.5s infinite;
        }
    }

    .skeleton-header {
        margin-bottom: 20px;

        .skeleton-title {
            width: 100%;
            height: 25px;
            margin-bottom: 12px;
        }

        .skeleton-subtitle {
            width: 100%;
            height: 4px;
        }
    }

    .skeleton-content {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .skeleton-card {
            width: 100%;
            height: 15px;
        }
    }
}

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