/* ===========================
   News Category Mobile Fix
   ニュースカテゴリーのモバイル表示修正
   =========================== */

/* モバイル時のnews-categoryの縦幅修正 */
@media (max-width: 768px) {
    .news-category {
        /* 縦幅を適切に設定 */
        line-height: 1.4;
        padding: 4px 12px;
        min-height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
        /* フォントサイズも調整 */
        font-size: 0.75rem;
        
        /* ボタンとしての見た目を強化 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
    }
    
    /* ニュースアイテム全体のレイアウト調整 */
    .news-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
    }
    
    /* カテゴリーとテキストの間隔調整 */
    .news-item > span:last-child {
        line-height: 1.5;
        margin-top: 4px;
    }
    
    /* ホバー/タップ効果 */
    .news-category:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
}

/* さらに小さい画面（480px以下）での調整 */
@media (max-width: 480px) {
    .news-category {
        /* より小さいサイズに調整 */
        font-size: 0.7rem;
        padding: 3px 10px;
        min-height: 22px;
        border-radius: 10px;
    }
    
    /* ニュースアイテムの余白を縮小 */
    .news-item {
        padding: 12px;
    }
    
    /* 月見出しとの間隔調整 */
    .news-month h4 {
        margin-bottom: 12px;
    }
}

/* 極小画面（360px以下）での追加調整 */
@media (max-width: 360px) {
    .news-category {
        font-size: 0.65rem;
        padding: 2px 8px;
        min-height: 20px;
        
        /* 文字が切れないように */
        letter-spacing: -0.02em;
    }
    
    /* ニュースアイテムをよりコンパクトに */
    .news-item {
        padding: 10px;
        gap: 6px;
    }
    
    .news-item > span:last-child {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}

/* アクセシビリティ: フォーカス状態 */
.news-category:focus-visible {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .news-category {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .news-category:active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
}