/*
 * components.css
 * 再利用可能なUIコンポーネントのスタイル定義。
 * 新しい共通スタイルはここに追加する。
 * テンプレート内インラインスタイルの移行先。
 */

/* ── Glassmorphism ユーティリティ ───────────────────────────────── */

/* blur(10px) 標準カード */
.glass-blur-sm {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* blur(16px) フォーム・モーダル向け */
.glass-blur-md {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* blur(20px) ヒーロー・大型パネル向け */
.glass-blur-lg {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ── ユーザーアバター ─────────────────────────────────────────── */

.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-md {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── スケルトンローダー ───────────────────────────────────────── */

.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

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