/**
 * 水瀬いのり YouTubeコメントランキング
 * レスポンシブデザイン用スタイルシート
 */

/* スマートフォン向け (576px以下) */
@media (max-width: 576px) {
    /* ヘッダースタイル */
    header h1 {
        font-size: 1.5rem;
    }
    
    /* テーブルを調整 */
    .table th, .table td {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
    
    /* ランキングバッジを小さく */
    .table .badge {
        font-size: 0.75rem !important;
    }
    
    /* ユーザーアイコンのサイズ調整 */
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* コメント数バッジ */
    .badge.fs-6 {
        font-size: 0.75rem !important;
    }
    
    /* 詳細ボタン */
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* テキスト省略 */
    .truncate-text {
        max-width: 120px;
    }
    
    /* モーダルサイズ調整 */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    /* ページネーション */
    .pagination-info {
        font-size: 0.75rem;
    }
    
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* タブレット向け (576px〜767px) */
@media (min-width: 577px) and (max-width: 767px) {
    /* ヘッダースタイル */
    header h1 {
        font-size: 1.75rem;
    }
    
    /* テーブルを調整 */
    .table th, .table td {
        font-size: 0.9rem;
    }
    
    /* テキスト省略 */
    .truncate-text {
        max-width: 180px;
    }
}

/* 中サイズスクリーン (768px〜991px) */
@media (min-width: 768px) and (max-width: 991px) {
    /* テキスト省略 */
    .truncate-text {
        max-width: 200px;
    }
}

/* すべてのモバイルデバイス (991px以下) */
@media (max-width: 991px) {
    /* カードの内側余白を調整 */
    .card-body {
        padding: 1rem;
    }
    
    /* コメントカード */
    .comment-card .card-body {
        padding: 0.75rem;
    }
    
    /* ヘッダープロフィール画像の配置 */
    header .col-md-4 {
        text-align: left !important;
        margin-top: 0.5rem;
    }
    
    header .justify-content-end {
        justify-content: flex-start !important;
    }
}

/* 印刷用スタイル */
@media print {
    /* 印刷時に不要な要素を非表示 */
    header, footer, .search-section, .modal, .btn {
        display: none !important;
    }
    
    /* 印刷時のページ設定 */
    body {
        background-color: white;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    /* テーブルスタイル調整 */
    .table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .table th, .table td {
        border: 1px solid #ddd;
    }
}