/**
 * スケルトンスクリーン
 * ローディング時に表示するプレースホルダー
 */

/* スケルトンアニメーション */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    animation: skeleton-loading 1.5s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e0e0e0 40px,
        #f0f0f0 80px
    );
    background-size: 200px 100%;
    border-radius: 4px;
}

/* スケルトンカード（スライダー用） */
.skeleton-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.skeleton-image {
    width: 100%;
    height: 180px;
    margin-bottom: 16px;
}

.skeleton-title {
    width: 80%;
    height: 24px;
    margin-bottom: 12px;
}

.skeleton-text {
    width: 100%;
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 75%;
}

/* スケルトンコンテナ（複数カード表示用） */
.skeleton-container {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    overflow: hidden;
}

/* サイドバー用スケルトン */
.skeleton-sidebar-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}

.skeleton-sidebar-item .skeleton-text {
    margin-bottom: 8px;
}

.skeleton-sidebar-item .skeleton-text:last-child {
    margin-bottom: 0;
}