/* ========================================
   📱 スマホ表示強化版 - 完全修正版
   ======================================== */

@media (max-width: 768px) {
    /* メイングリッド：2カラム */
    .videos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0 0.25rem !important;
        width: 100% !important;
    }
    
    /* 🔥 カテゴリグリッド：2カラム、画面いっぱい */
    .category-section {
        margin: 0.5rem !important;
        padding: 0.75rem !important;
        border-radius: 12px !important;
        width: calc(100% - 1rem) !important;
        background: linear-gradient(135deg, 
            rgba(66, 134, 198, 0.05) 0%, 
            rgba(103, 100, 186, 0.05) 100%) !important;
        border-left: 5px solid var(--primary-color) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }
    
    .category-videos-grid,
    #categoryVideosGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .category-videos-grid .video-card {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* 動画カードを小さく調整 */
    .video-card {
        font-size: 0.75rem !important;
    }
    
    .video-title {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
    }
    
    .video-meta {
        font-size: 0.65rem !important;
    }

    /* セクションヘッダー */
    .category-videos-header h4,
    .section-title {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        color: var(--primary-color) !important;
    }
    
    /* カテゴリタブ */
    .category-tab {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
    }
    
    .category-tab.active {
        background: var(--primary-color) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(66, 134, 198, 0.3) !important;
    }

    /* HOT/NEW/TOPバッジ */
    .video-card.hot::before {
        content: '🔥 HOT';
        position: absolute;
        top: 6px;
        left: 6px;
        z-index: 10;
        background: linear-gradient(135deg, #ff3b30 0%, #ff6b6b 100%);
        color: white;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.65rem;
        font-weight: 900;
        box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
    }
    
    .video-card.new::before {
        content: '✨ NEW';
        position: absolute;
        top: 6px;
        left: 6px;
        z-index: 10;
        background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
        color: white;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.65rem;
        font-weight: 900;
        box-shadow: 0 2px 8px rgba(52, 199, 89, 0.4);
    }
}

/* ダークモード */
.dark-mode .category-section {
    background: linear-gradient(135deg, 
        rgba(66, 134, 198, 0.1) 0%, 
        rgba(103, 100, 186, 0.1) 100%) !important;
}