/* ヘッダーのスタイルは common.css で統一管理 */

#mainHeader .nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#mainHeader .nav-pills .nav-item {
    display: inline-block !important;
    margin-right: 0.5rem !important;
    float: left !important;
}

#mainHeader .nav-pills .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
    display: inline-block !important;
}

#mainHeader .nav-pills .nav-link small {
    font-size: 0.7rem;
}

#mainHeader .d-flex.align-items-center:last-child {
    gap: 0.5rem;
}

#mainHeader .header-nav-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem; /* 0.4rem → 0.35rem */
    font-weight: 600;
    min-width: 150px; /* 170px → 150px */
    padding: 0.35rem 1rem; /* 0.45rem 1.2rem → 0.35rem 1rem */
    border-radius: 999px;
    border: 2px solid #0d6efd;
    color: #0d6efd !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
    font-size: 0.85rem; /* 少し小さく */
}

#mainHeader .header-nav-btn i {
    font-size: 0.9rem; /* 1rem → 0.9rem */
}

#mainHeader .header-nav-btn:hover,
#mainHeader .header-nav-btn:focus {
    color: #0a58ca !important;
    border-color: #0a58ca !important;
    background-color: rgba(13, 110, 253, 0.08) !important;
    box-shadow: none !important;
}

#mainHeader .header-nav-btn.active {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
}

#mainHeader .header-nav-btn.active:hover,
#mainHeader .header-nav-btn.active:focus {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
    color: #ffffff !important;
}

#mainHeader .header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#mainHeader .header-title:hover {
    color: #0a58ca;
    opacity: 0.85;
}

#mainHeader .header-title .header-title-icon {
    width: 1.3rem;
    height: 1.3rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

#mainHeader .header-title .header-title-text {
    color: inherit;
    font-weight: 600;
}

.data-status-tabs .data-status-tab {
    border-radius: 999px;
    border-width: 2px;
    color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    padding: 0.45rem 1.2rem;
    transition: all 0.2s ease-in-out;
    box-shadow: none !important;
    text-decoration: none !important;
}

.data-status-tabs .data-status-tab i {
    font-size: 1rem;
}

.data-status-tabs .btn-check:checked + .data-status-tab,
.data-status-tabs .btn-check:active + .data-status-tab,
.data-status-tabs .data-status-tab:active {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
    box-shadow: none !important;
}

.data-status-tabs .btn-check + .data-status-tab:hover,
.data-status-tabs .btn-check + .data-status-tab:focus {
    color: #0a58ca !important;
    border-color: #0a58ca !important;
    background-color: rgba(13, 110, 253, 0.08) !important;
    box-shadow: none !important;
}

/* ヘッダーは常に表示 */

/* 全体のフォントサイズを小さく */
body {
    font-size: 0.85rem;
}

/* カテゴリカードの高さを制限（デスクトップのみ） */
@media (min-width: 992px) {
    .category-card {
        max-height: 400px;
        overflow: hidden;
    }
}

/* Podcast結果内のカテゴリカードは高さ制限を無効化（デスクトップのみ） */
@media (min-width: 992px) {
    #podcastResults .category-card,
    #trends .card.h-100 .card-body #podcastResults .category-card {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Hacker News結果内のカテゴリカードは高さ制限を無効化 */
#hackernewsResults .category-card,
#trends .card.h-100 .card-body #hackernewsResults .category-card {
    max-height: none !important;
    overflow: visible !important;
}

/* 楽天商品名の表示改善 */
#rakutenTrendsTableBody td:nth-child(2) {
    max-width: 200px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
}

#rakutenTrendsTableBody td:nth-child(2) strong {
    display: block;
    margin-bottom: 0.25rem;
}

#rakutenTrendsTableBody td:nth-child(2) a {
    color: #dc3545;
    text-decoration: none;
    font-weight: bold;
}

#rakutenTrendsTableBody td:nth-child(2) a:hover {
    text-decoration: underline;
}

/* トレンドカードの高さとレイアウトを調整 */
#trends .card.h-100 {
    display: flex;
    flex-direction: column;
}

#trends .card.h-100 .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* デスクトップでrowとcol-md-6が高さを充分に使う設定 */
@media (min-width: 992px) {
    #trends .row {
        display: flex !important;
        align-items: stretch !important;
    }
    
    #trends .row .col-md-6 {
        display: flex !important;
        flex-direction: column !important;
    }
    
    #trends .row .col-md-6 .card.h-100 {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* 全ての結果セクションをflexレイアウトで統一（デスクトップのみ） */
@media (min-width: 992px) {
    #trends .card.h-100 .card-body > div[id$="Results"] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

/* Podcastトレンドのcard-bodyを確実に高さいっぱいに */
/* 3行目も他の行と同じflexレイアウトを使用 */
/* Podcastトレンドのコンテンツエリアを高さいっぱいに広げる（デスクトップのみ - 992px以上） */
@media (min-width: 992px) {
    #trends .card.h-100 .card-body #podcastResults {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
        position: relative !important;
    }
}

/* .trend-table-containerのスタイル（デスクトップのみ） */
@media (min-width: 992px) {
    .trend-table-container {
        max-height: 300px;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }
    
    /* Zennの.trend-table-containerはmax-heightを無効化して高さを充分に使う */
    #trends .card.h-100 .card-body #zennResults .trend-table-container,
    #zennResults .trend-table-container {
        max-height: none !important;
    }
    
    /* Noteの.trend-table-containerはHatenaと同じスタイル（スクロールバー表示） */
    #trends .card.h-100 .card-body #noteResults .trend-table-container,
    #noteResults .trend-table-container {
        max-height: 400px !important;
        overflow-y: auto !important;
    }

    /* 全部入り（All）タブ: カード内テーブルを高さ固定・スクロール可能に（他タブと同じ） */
    #pane-all .card.h-100 .card-body .table-responsive {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* 全部入り（All）タブのみ: ヘッダー・テーブル行を1行に収める（カテゴリータブには影響しない） */
#pane-all .card-header {
    flex-wrap: nowrap;
    white-space: nowrap;
}
/* カテゴリ選択ありのヘッダーは折り返し許可（ドロップダウン収納） */
#pane-all .card-header:has(.all-category-select) {
    flex-wrap: wrap;
}
#pane-all .all-category-select {
    flex-shrink: 0;
}
#pane-all .card-header h3,
#pane-all .card-header .h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
#pane-all .card-header .all-more-link {
    flex-shrink: 0;
}
#pane-all .card-body .table-responsive table th,
#pane-all .card-body .table-responsive table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 全部入り: Safari対応 - td直接のoverflowが効かないため、ラッパーdivで適用 */
#pane-all .card-body .table-responsive td .all-td-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* 全部入り: タイトル下のサブテキストを非表示（1行表示にするため） */
#pane-all .card-body .table-responsive td br,
#pane-all .card-body .table-responsive td small.text-muted,
#pane-all .card-body .table-responsive td div.text-muted,
#pane-all .card-body .table-responsive td span.text-muted {
    display: none !important;
}
/* 全部入り: 行全体がリンクなので「記事を読む」ボタンは不要（Note: btn-outline-secondary, ニュース: btn-outline-info 含む） */
#pane-all .card-body .table-responsive td .btn-outline-warning,
#pane-all .card-body .table-responsive td .btn-outline-secondary,
#pane-all .card-body .table-responsive td .btn-outline-info {
    display: none !important;
}
/* 全部入り: 映画ポスター・本の表紙・アプリアイコンは不要（1行表示のため） */
#pane-all .card-body .table-responsive td img {
    display: none !important;
}
/* 全部入り: 映画の「Amazonで見る」ボタンはアフィリエイトのため表示（1行内に） */
#pane-all [data-all-card="movie"] .table-responsive td:nth-child(2) {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
#pane-all [data-all-card="movie"] .table-responsive td:nth-child(2) .all-td-inner {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
}
#pane-all [data-all-card="movie"] .table-responsive td:nth-child(2) strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#pane-all [data-all-card="movie"] .table-responsive td:nth-child(2) .btn-warning {
    flex-shrink: 0;
    margin-top: 0 !important;
    font-size: 0.7rem !important;
    padding: 0.15rem 0.35rem !important;
}
/* 全部入り: G検索ボタンは不要（行にリンク付きのため） */
#pane-all [data-all-card="google"] .table-responsive th:last-child,
#pane-all [data-all-card="google"] .table-responsive td:last-child {
    display: none !important;
}

#rakutenResults .trend-table-container {
    max-height: 500px;
    overflow-y: auto;
}

/* Podcastトレンドのcard-bodyが正しく広がるように（デスクトップのみ） */
@media (min-width: 992px) {
    #trends .row .col-md-6:has(#podcastResults) .card.h-100 .card-body #podcastResults {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #trends .card.h-100 .card-body #podcastResults > .alert {
        flex: 0 0 0 !important;
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
    }

    #trends .card.h-100 .card-body #podcastResults > .card {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow: visible !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #podcastResults > .card.category-card {
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
        height: 100% !important;
    }

    #trends .card.h-100 .card-body #podcastResults > .card > .card-body {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
    }

    /* 後方互換性のため元のセレクタも保持（デスクトップのみ） */
    #podcastResults {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
    }

    #podcastResults .card {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: none !important;
        overflow: visible;
        height: 100% !important;
    }

    #podcastResults .card.category-card {
        max-height: none !important;
        overflow: visible;
        margin-bottom: 0 !important;
        height: 100% !important;
    }

    #podcastResults .card .card-body {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
    }

    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow-y: auto !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
    }

    /* Podcastの.trend-table-containerもSpotifyと同じように、デスクトップ用の詳細なルールを削除 */
    /* モバイル表示で問題が起きないようにするため */
}

/* Hacker Newsトレンドのコンテンツエリアを高さいっぱいに広げる（デスクトップのみ - 992px以上） */
@media (min-width: 992px) {
    #trends .card.h-100 .card-body #hackernewsResults {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
    position: relative !important;
}

#trends .card.h-100 .card-body #hackernewsResults > .alert {
    flex: 0 0 0 !important;
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
}

#trends .card.h-100 .card-body #hackernewsResults > .card {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    overflow: visible !important;
    align-self: stretch !important;
}

#trends .card.h-100 .card-body #hackernewsResults > .card.category-card {
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}

#trends .card.h-100 .card-body #hackernewsResults > .card > .card-body {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
}

#trends .card.h-100 .card-body #hackernewsResults > .card > .card-body > .trend-table-container {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    overflow-y: auto !important;
    align-self: stretch !important;
}

#trends .card.h-100 .card-body #hackernewsResults > .card > .card-body > .trend-table-container > .table-responsive {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
}

#hackernewsResults {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

#hackernewsResults .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none !important;
    height: 100%;
    overflow: visible;
}

#hackernewsResults .card.category-card {
    max-height: none !important;
    overflow: visible;
    margin-bottom: 0 !important;
    height: 100%;
}

#hackernewsResults .card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

#hackernewsResults .trend-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none !important;
    height: 100%;
    overflow-y: auto;
}

    #hackernewsResults .trend-table-container .table-responsive {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    #hackernewsResults {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    #hackernewsResults .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none !important;
        height: 100%;
        overflow: visible;
    }

    #hackernewsResults .card.category-card {
        max-height: none !important;
        overflow: visible;
        margin-bottom: 0 !important;
        height: 100%;
    }

    #hackernewsResults .card .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    #hackernewsResults .trend-table-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none !important;
        height: 100%;
        overflow-y: auto;
    }

    #hackernewsResults .trend-table-container .table-responsive {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }
}

/* Qiitaトレンドのコンテンツエリアを高さいっぱいに広げる（デスクトップのみ - 992px以上） */
@media (min-width: 992px) {
    #trends .card.h-100 .card-body #qiitaResults {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
        position: relative !important;
    }

    #trends .card.h-100 .card-body #qiitaResults > .alert {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
    }

    #trends .card.h-100 .card-body #qiitaResults > .card {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow: visible !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #qiitaResults > .card.category-card {
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
        height: 100% !important;
    }

    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow-y: auto !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
    }

    #qiitaResults {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    #qiitaResults .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none !important;
        height: 100%;
        overflow: visible;
    }

    #qiitaResults .card.category-card {
        max-height: none !important;
        overflow: visible;
        margin-bottom: 0 !important;
        height: 100%;
    }

    #qiitaResults .card .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    /* QiitaとPodcastの.trend-table-containerはSpotifyと同じように、デスクトップ用の詳細なルールを削除 */
    /* モバイル表示で問題が起きないようにするため */
}

/* ZennとNoteのカード内の高さを充分に使うスタイル */
/* デスクトップのみ（992px以上） */
/* ZennはQiitaに合わせる、NoteはHatenaに合わせる */
@media (min-width: 992px) {
    /* Zenn結果セクション - Qiitaと同じスタイル */
    #trends .card.h-100 .card-body #zennResults {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
        position: relative !important;
    }

    #trends .card.h-100 .card-body #zennResults > .alert {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
    }

    #trends .card.h-100 .card-body #zennResults > .card {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow: visible !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #zennResults > .card.category-card {
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
        height: 100% !important;
    }

    #trends .card.h-100 .card-body #zennResults > .card > .card-body {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #zennResults > .card > .card-body > .trend-table-container {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow-y: auto !important;
        align-self: stretch !important;
    }

    #trends .card.h-100 .card-body #zennResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
    }

    #zennResults {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    #zennResults .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none !important;
        height: 100%;
        overflow: visible;
    }

    #zennResults .card.category-card {
        max-height: none !important;
        overflow: visible;
        margin-bottom: 0 !important;
        height: 100%;
    }

    #zennResults .card .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    /* Note結果セクション - Hatenaと同じスタイル（汎用的なルールに依存） */
    #trends .card.h-100 .card-body #noteResults > .alert {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
    }
}

/* .trend-table-containerと.loadingのスタイル（デスクトップのみ） */
@media (min-width: 992px) {
    #trends .card.h-100 .trend-table-container,
    #trends .card.h-100 .loading {
        flex: 1;
    }
}

/* テーブルのフォントサイズを小さく */
.trend-table {
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* テーブルヘッダーのフォントサイズ */
.trend-table thead th {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
}

/* テーブルセルのパディングを小さく */
.trend-table tbody td {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* カードヘッダーのフォントサイズ */
.card-header h5 {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ステータスメッセージのフォントサイズ */
.status-message {
    font-size: 0.7rem;
}

/* バッジのサイズを小さく */
.badge {
    font-size: 0.6rem;
}

/* Bootstrapタブの表示制御
 * 非アクティブは非表示、active.show の両方があるときのみ表示（切り替え時の重複防止） */
.tab-content > .tab-pane {
    display: none !important;
}
.tab-content > .tab-pane.active.show {
    display: block !important;
}

/* トレンドカテゴリタブ: #trends内の強力な表示ルールを上書きし、非アクティブなペイン内の子孫も非表示 */
#trends #trendCategoryTabContent > .tab-pane:not(.active.show),
#trends #trendCategoryTabContent > .tab-pane:not(.active.show) * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
#trends #trendCategoryTabContent > .tab-pane.active.show {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

/* トレンド一覧の表示制御 */
#trends {
    display: block !important;
}

#trends.show,
#trends.active {
    display: block !important;
}

/* データ鮮度情報タブがアクティブな時はトレンド一覧を非表示 */
body.data-status-active #trends {
    display: none !important;
    visibility: hidden !important;
}

/* サブスクリプションタブがアクティブな時はトレンド一覧を非表示 */
body.subscription-active #trends {
    display: none !important;
    visibility: hidden !important;
}

/* データ鮮度情報の強制表示 */
#data-status {
    display: none;
}

#data-status.show,
#data-status.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* より強力な非表示制御 - データ鮮度情報は除外 */
.hide-all-trends #trends,
.hide-all-trends #trends *,
.hide-all-trends .card,
.hide-all-trends .row,
.hide-all-trends .col-md-6 {
    display: none !important;
    visibility: hidden !important;
}

/* データ鮮度情報は常に表示可能にする */
#data-status,
#data-status *,
#data-status .card,
#data-status .row,
#data-status .col-12 {
    display: block !important;
    visibility: visible !important;
}

/* タブナビゲーションは常に表示 */
#mainTabs,
#mainTabs *,
.nav-tabs,
.nav-tabs * {
    display: block !important;
    visibility: visible !important;
}

/* データ鮮度情報のレイアウト修正 */
#dataFreshnessContent {
    padding: 20px !important;
}

/* データ鮮度情報タブのカードヘッダーの重なり問題を修正 */
#data-status .card {
    position: relative;
    z-index: 1;
}

#data-status .card-header {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    min-height: auto;
}

/* データ鮮度情報タブのカードヘッダーの高さを調整 */
#data-status .card-header h5 {
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.2;
}

#data-status .card-header .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* タブナビゲーションのz-indexを調整 */
.nav-tabs {
    position: relative;
    z-index: 10;
}

.nav-tabs .nav-item {
    position: relative;
    z-index: 11;
}

/* データ鮮度情報タブのコンテナの位置調整 */
#data-status {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 0;
}

/* データ鮮度情報タブの上部マージンを削除 */
#data-status .px-3 {
    padding-top: 0 !important;
}

/* データ鮮度情報のカードグリッドの上部マージンを削除 */
#dataFreshnessContent .row {
    margin-top: 0 !important;
}

/* データ鮮度情報タブのカードにマージンを追加 */
#data-status .card {
    margin-top: 0;
}

/* データ鮮度情報タブのコンテナマージンをトレンド一覧に合わせる */
#data-status {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#data-status .px-3 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* データ鮮度情報タブの最初の行のマージンを調整 */
#data-status .row:first-child {
    margin-top: 0 !important;
}

#dataFreshnessContent .table-responsive {
    margin-top: 20px !important;
}

#dataFreshnessContent .table {
    margin-bottom: 0 !important;
}

#dataFreshnessContent .text-center {
    margin-bottom: 30px !important;
}

/* データ鮮度情報のカードグリッドを強制的に並列表示 */
#dataFreshnessContent .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

#dataFreshnessContent .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0.75rem !important;
    display: block !important;
    float: left !important;
}

#dataFreshnessContent .card {
    height: 100% !important;
    margin-bottom: 1rem !important;
}

/* データ鮮度情報のカード内レイアウト */
#dataFreshnessContent .card-body {
    padding: 1rem !important;
}

#dataFreshnessContent .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

#dataFreshnessContent .fs-4 {
    font-size: 1.5rem !important;
}

#dataFreshnessContent .fw-bold {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

#dataFreshnessContent .text-muted {
    font-size: 0.75rem !important;
    margin-bottom: 0.25rem !important;
}

/* タブのスタイル - 強力な横並び設定 */
.nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-tabs .nav-item {
    flex: 1 !important;
    display: inline-block !important;
    width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-tabs .nav-link {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    float: none !important;
}

.nav-tabs .nav-link.active {
    font-weight: bold;
}

/* Bootstrapのデフォルトスタイルを上書き - より強力な設定 */
ul.nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

ul.nav-tabs li.nav-item {
    display: inline-block !important;
    width: 50% !important;
    float: left !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
}

ul.nav-tabs li.nav-item button.nav-link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    background: transparent !important;
    color: #495057 !important;
    text-decoration: none !important;
}

ul.nav-tabs li.nav-item button.nav-link:hover {
    background-color: #e9ecef !important;
    border-color: transparent !important;
}

ul.nav-tabs li.nav-item button.nav-link.active {
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
    color: #495057 !important;
    font-weight: bold !important;
}

.loading {
    min-height: 200px;
}
.trend-table {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-purple {
    background-color: #6f42c1 !important;
}
.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}
.btn-purple:hover {
    background-color: #5a32a3;
    border-color: #5a32a3;
    color: white;
}
.text-purple {
    color: #6f42c1 !important;
}

/* すべてのローディング表示を確実に非表示 */
.loading,
#googleLoading,
#youtubeLoading,
#hatenaTrendsLoading,
#podcastLoading,
#rakutenLoading,
#twitchTrendsLoading,
#nhkLoading,
#qiitaLoading {
    display: none !important;
    visibility: hidden !important;
}

/* データ鮮度情報タブがアクティブな時にトレンド一覧を非表示 */
body.data-status-active #trends,
body.data-status-active #trends .row,
body.data-status-active #trends .col-md-6,
body.data-status-active #trends .card {
    display: none !important;
    visibility: hidden !important;
}

/* サブスクリプションタブがアクティブな時にトレンド一覧を非表示 */
body.subscription-active #trends,
body.subscription-active #trends .row,
body.subscription-active #trends .col-md-6,
body.subscription-active #trends .card {
    display: none !important;
    visibility: hidden !important;
}

/* より強力な非表示制御 - データ鮮度情報とサブスクリプションタブ用 */
body.data-status-active .row:nth-child(2),
body.data-status-active .row:nth-child(3),
body.data-status-active .row:nth-child(4),
body.subscription-active .row:nth-child(2),
body.subscription-active .row:nth-child(3),
body.subscription-active .row:nth-child(4) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 楽天とTwitchトレンドを確実に非表示 */
body.data-status-active #trends .row:last-child,
body.subscription-active #trends .row:last-child,
body.data-status-active .row:has(.card:has(.fas.fa-shopping-cart)),
body.data-status-active .row:has(.card:has(.fab.fa-twitch)),
body.subscription-active .row:has(.card:has(.fas.fa-shopping-cart)),
body.subscription-active .row:has(.card:has(.fab.fa-twitch)) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 楽天とTwitchのカードを直接指定して非表示 */
body.data-status-active .card:has(.fas.fa-shopping-cart),
body.data-status-active .card:has(.fab.fa-twitch),
body.subscription-active .card:has(.fas.fa-shopping-cart),
body.subscription-active .card:has(.fab.fa-twitch) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* データ鮮度情報タブのコンテンツは表示を維持 - より具体的なルール */
body.data-status-active #data-status {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.data-status-active #data-status .card {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
}

/* データ鮮度情報タブのopacityを強制的に1に設定 */
#data-status {
    opacity: 1 !important;
}

#data-status.show,
#data-status.active {
    opacity: 1 !important;
}

/* トレンド一覧タブではデータ鮮度情報を非表示 */
#trends #data-status,
#trends .data-freshness-content,
#trends #dataFreshnessContent {
    display: none !important;
    visibility: hidden !important;
}

/* トレンド一覧タブがアクティブな時にデータ鮮度情報タブを非表示 */
body:not(.data-status-active) #data-status {
    display: none !important;
    visibility: hidden !important;
}

/* データ鮮度情報タブがアクティブな時のみ表示 */
body.data-status-active #data-status {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* データ鮮度情報タブの内容を強制表示 - より具体的なルール */
body.data-status-active #data-status .row,
body.data-status-active #data-status .col-md-6,
body.data-status-active #data-status .card,
body.data-status-active #data-status .card-body,
body.data-status-active #data-status .card-title,
body.data-status-active #data-status .fw-bold,
body.data-status-active #data-status .text-muted,
body.data-status-active #data-status .badge {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* インライン要素は適切な表示を維持 */
body.data-status-active #data-status .d-flex,
body.data-status-active #data-status .text-center,
body.data-status-active #data-status .row.text-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* インライン要素のテキスト - より具体的なルール */
body.data-status-active #data-status small.text-muted {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.data-status-active #data-status span.badge {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.data-status-active #data-status div.fw-bold {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.data-status-active #data-status div:has(span.badge) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* データ鮮度情報のテキスト表示エリア */
body.data-status-active #data-status .row.text-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.data-status-active #data-status .row.text-center .col-4 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.data-status-active #data-status .row {
    display: flex !important;
}

body.data-status-active #data-status .col-md-6 {
    display: block !important;
}

body.data-status-active #data-status .card {
    display: block !important;
}

body.data-status-active #data-status .card-body {
    display: block !important;
}

/* データ鮮度情報タブを確実に表示 */
#data-status.show,
#data-status.active,
body.data-status-active #data-status {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 500px !important;
    overflow: visible !important;
}

/* データ鮮度情報のテキスト内容を強制表示 */
body.data-status-active #data-status {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

body.data-status-active #data-status * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* データ鮮度情報のテキスト要素を強制表示 */
body.data-status-active #data-status .fw-bold,
body.data-status-active #data-status .text-muted,
body.data-status-active #data-status .badge,
body.data-status-active #data-status small,
body.data-status-active #data-status span,
body.data-status-active #data-status div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.data-status-active #data-status .text-muted {
    display: inline !important;
    color: #6c757d !important;
    font-size: 12px !important;
}

body.data-status-active #data-status .badge {
    display: inline-block !important;
    color: #fff !important;
}

body.data-status-active #data-status .fw-bold {
    display: block !important;
    font-weight: bold !important;
    color: #000 !important;
    font-size: 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* データ鮮度情報の全てのテキスト要素を強制表示 - より強力な設定 */
#data-status .fw-bold,
#data-status .text-muted,
#data-status .badge,
#data-status small,
#data-status span,
#data-status div,
#data-status * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    position: static !important;
    z-index: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

#data-status .text-muted {
    display: inline !important;
    color: #6c757d !important;
    font-size: 12px !important;
}

#data-status .badge {
    display: inline-block !important;
    color: #fff !important;
    font-size: 12px !important;
    background-color: #28a745 !important;
    padding: 0.25em 0.4em !important;
    border-radius: 0.25rem !important;
}

/* データ鮮度情報タブがアクティブな時の強制表示 */
body.data-status-active #data-status * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    position: static !important;
    z-index: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

body.data-status-active #data-status .text-muted {
    display: inline !important;
    color: #6c757d !important;
    font-size: 12px !important;
}

body.data-status-active #data-status .badge {
    display: inline-block !important;
    color: #fff !important;
    font-size: 12px !important;
    background-color: #28a745 !important;
    padding: 0.25em 0.4em !important;
    border-radius: 0.25rem !important;
}

body.data-status-active #data-status .text-muted {
    display: inline !important;
    color: #6c757d !important;
}

body.data-status-active #data-status .badge {
    display: inline-block !important;
    padding: 0.25em 0.4em !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: 0.25rem !important;
}

body.data-status-active #data-status small {
    display: inline !important;
    font-size: 0.875em !important;
}

body.data-status-active #data-status span {
    display: inline !important;
}

body.data-status-active #data-status .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

body.data-status-active #data-status .col-md-6 {
    display: block !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

body.data-status-active #data-status .card {
    display: block !important;
    position: relative !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    background-color: #fff !important;
    background-clip: border-box !important;
    border: 1px solid rgba(0,0,0,.125) !important;
    border-radius: 0.25rem !important;
}

body.data-status-active #data-status .card-body {
    display: block !important;
    flex: 1 1 auto !important;
    padding: 1rem !important;
    min-height: 200px !important;
}

/* データ鮮度情報のカードグリッドを確実に表示 */
body.data-status-active #data-status .row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    min-height: 400px !important;
}

body.data-status-active #data-status .col-md-6 {
    display: block !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-height: 200px !important;
}

body.data-status-active #data-status .card.h-100 {
    display: block !important;
    height: 100% !important;
    min-height: 200px !important;
}

/* データ鮮度情報タブ内の主要要素を表示 */
#data-status.show .row,
#data-status.show .col-md-6,
#data-status.show .card,
#data-status.show .card-body,
#data-status.active .row,
#data-status.active .col-md-6,
#data-status.active .card,
#data-status.active .card-body,
body.data-status-active #data-status .row,
body.data-status-active #data-status .col-md-6,
body.data-status-active #data-status .card,
body.data-status-active #data-status .card-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* データ鮮度情報タブ内の特定要素 */
#data-status.show .row,
#data-status.active .row,
body.data-status-active #data-status .row {
    display: flex !important;
}

#data-status.show .col-md-6,
#data-status.active .col-md-6,
body.data-status-active #data-status .col-md-6 {
    display: block !important;
}

#data-status.show .card,
#data-status.active .card,
body.data-status-active #data-status .card {
    display: block !important;
}

#data-status.show .card-body,
#data-status.active .card-body,
body.data-status-active #data-status .card-body {
    display: block !important;
}

/* トレンド一覧タブ内のデータ鮮度情報のカードグリッドを非表示（データ鮮度情報タブのもののみ） */
#data-status .row.g-3 {
    display: flex !important;
    visibility: visible !important;
}

/* トレンド一覧タブでは通常のトレンドカードを表示 */
#trends .row:not(.g-3) {
    display: flex !important;
    visibility: visible !important;
}

#trends .col-md-6:not(:has(.card:has(.fab.fa-google))):not(:has(.card:has(.fab.fa-youtube))):not(:has(.card:has(.fab.fa-spotify))):not(:has(.card:has(.fas.fa-newspaper))):not(:has(.card:has(.fas.fa-podcast))):not(:has(.card:has(.fas.fa-shopping-cart))):not(:has(.card:has(.fas.fa-bookmark))):not(:has(.card:has(.fab.fa-twitch))) {
    display: block !important;
    visibility: visible !important;
}

/* データ鮮度情報のコンテンツを確実に表示 */
#dataFreshnessContent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#dataFreshnessContent .row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#dataFreshnessContent .card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* サブスクリプションタブのマージン調整 */
#subscription .px-3 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#subscription .card {
    margin-top: 0 !important;
}

#subscription .card-header {
    margin-bottom: 0 !important;
    padding: 0.75rem 1.25rem !important;
}

/* サブスクリプションタブのコンテナマージンをトレンド一覧に合わせる */
#subscription {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#subscription .px-3 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* サブスクリプションタブの最初の行のマージンを調整 */
#subscription .row:first-child {
    margin-top: 0 !important;
}

/* 1行目のカテゴリのマージン調整 */
/* 重要: #trends内の要素には影響しないようにする */
/* #data-status, #subscription内の要素にのみ適用 */
#data-status .row:first-of-type,
#subscription .row:first-of-type {
    margin-top: 1.5rem;
}

/* Rakuten table - compact row layout */
#rakutenTrendsTable .badge {
    font-size: 0.55rem;
}

#rakutenTrendsTable tbody td {
    padding: 0.2rem 0.4rem;
    font-size: 0.68rem;
    line-height: 1.2;
}

#rakutenTrendsTable img {
    max-width: 36px;
    max-height: 36px;
}

/* Limit product title to 2 lines - 商品名列のみ折り返し可能に */
#rakutenTrendsTable td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
    max-width: 300px; /* 適切な最大幅を設定 */
}

#rakutenTrendsTable td:nth-child(2) strong,
#rakutenTrendsTable td:nth-child(2) a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Tighten columns; allow wrapping only for title column */
/* 商品名列以外の列は折り返し禁止 */
#rakutenTrendsTable th:not(:nth-child(2)),
#rakutenTrendsTable td:not(:nth-child(2)) {
    white-space: nowrap;
}

/* カードのマージン調整 */
/* 重要: #trends内のカードには影響しないようにする */
/* #data-status, #subscription内のカードにのみ適用 */
#data-status .card,
#subscription .card {
    margin-bottom: 1.5rem;
}

/* カードヘッダーのパディング調整 */
.card-header {
    padding: 1rem 1.25rem;
}

/* トレンド一覧タブのマージン設定を他のタブにも適用 */
#trends .row:first-child,
#data-status .row:first-child,
#subscription .row:first-child {
    margin-top: 0 !important;
}

#trends .container-fluid,
#data-status .container-fluid,
#subscription .container-fluid {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* タブコンテンツの統一マージン設定 */
#mainTabContent > div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* レスポンシブデザイン - モバイル環境でのカード高さ調整（991px以下） */
@media (max-width: 991px) {
    /* モバイル表示でQiitaとPodcastをSpotifyと同じスタイルに */
    /* ChatGPTのアドバイスに基づく修正：高さ0、overflow問題を解決 */
    
    /* .category-cardをモバイル表示で確実に表示 */
    .category-card {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    /* 全解像度で適用される.trend-table-containerルールを上書き */
    #trends .card.h-100 .trend-table-container,
    #qiitaResults .trend-table-container,
    #podcastResults .trend-table-container {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* QiitaとPodcastの全ての要素を確実に表示 */
    #qiitaResults,
    #podcastResults {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        flex: none !important;
        overflow: visible !important;
        position: static !important;
    }
    
    /* QiitaとPodcast内のカード要素 */
    #qiitaResults > .card,
    #qiitaResults .card.category-card,
    #podcastResults > .card,
    #podcastResults .card.category-card {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        flex: none !important;
        overflow: visible !important;
    }
    
    /* QiitaとPodcast内のカードボディ */
    #qiitaResults .card .card-body,
    #podcastResults .card .card-body {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        flex: none !important;
        overflow: visible !important;
    }
    
    /* QiitaとPodcast内のテーブルコンテナ */
    #qiitaResults .trend-table-container,
    #podcastResults .trend-table-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        flex: none !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }
    
    /* QiitaとPodcast内のテーブルレスポンシブ */
    #qiitaResults .table-responsive,
    #podcastResults .table-responsive {
        display: block !important;
        height: auto !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* テーブル要素は正しく表示 */
    #qiitaResults table,
    #podcastResults table {
        display: table !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #qiitaResults tbody,
    #podcastResults tbody {
        display: table-row-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #qiitaResults tr,
    #podcastResults tr {
        display: table-row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #qiitaResults td,
    #podcastResults td {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 全てのセレクタパターンで上書き（重要度: 最高） */
    #qiitaResults,
    #podcastResults,
    #trends .card.h-100 .card-body #qiitaResults,
    #trends .card.h-100 .card-body #podcastResults,
    #trends .row .col-md-6 .card .card-body #qiitaResults,
    #trends .row .col-md-6 .card .card-body #podcastResults,
    article.col-12.col-md-6 .card .card-body #qiitaResults,
    article.col-12.col-md-6 .card .card-body #podcastResults {
        display: block !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 0 !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* カード要素 */
    #qiitaResults .card,
    #qiitaResults .card.category-card,
    #podcastResults .card,
    #podcastResults .card.category-card,
    #trends .card.h-100 .card-body #qiitaResults > .card,
    #trends .card.h-100 .card-body #qiitaResults > .card.category-card,
    #trends .card.h-100 .card-body #podcastResults > .card,
    #trends .card.h-100 .card-body #podcastResults > .card.category-card,
    #trends .row .col-md-6 .card .card-body #qiitaResults .card,
    #trends .row .col-md-6 .card .card-body #qiitaResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #podcastResults .card,
    #trends .row .col-md-6 .card .card-body #podcastResults .card.category-card {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* カードボディ */
    #qiitaResults .card .card-body,
    #podcastResults .card .card-body,
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #qiitaResults .card .card-body,
    #trends .row .col-md-6 .card .card-body #podcastResults .card .card-body {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* テーブルコンテナ */
    #qiitaResults .trend-table-container,
    #podcastResults .trend-table-container,
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #qiitaResults .trend-table-container,
    #trends .row .col-md-6 .card .card-body #podcastResults .trend-table-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* テーブルレスポンシブ */
    #qiitaResults .trend-table-container .table-responsive,
    #podcastResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #qiitaResults .trend-table-container .table-responsive,
    #trends .row .col-md-6 .card .card-body #podcastResults .trend-table-container .table-responsive {
        display: block !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* テーブル要素も確実に表示 */
    #qiitaResults table,
    #podcastResults table {
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    #qiitaResults tbody,
    #podcastResults tbody {
        display: table-row-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #qiitaResults tr,
    #podcastResults tr {
        display: table-row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #qiitaResults td,
    #podcastResults td {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* モバイルでは全ての行を同じスタイルに統一（Google TrendsとYouTubeと同じ） */
    #trends .row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        margin-bottom: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 1rem !important;
    }
    
    /* モバイルでは各列を全幅に（Google TrendsとYouTubeと同じパディング） */
    #trends .row .col-md-6,
    #trends .row article.col-md-6,
    #trends .row article.col-12.col-md-6 {
        display: flex !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* モバイルでは.h-100クラスを完全に無効化（重要！） */
    #trends .card.h-100,
    #trends .row .col-md-6 .card.h-100,
    #trends .row article.col-md-6 .card.h-100,
    #trends .row article.col-12.col-md-6 .card.h-100 {
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* モバイルではカードの高さを自動に戻す（Google TrendsとYouTubeと同じ） */
    #trends .row .col-md-6 .card,
    #trends .row article.col-md-6 .card,
    #trends .row article.col-12.col-md-6 .card {
        height: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* モバイルでは.card-body内の全ての要素の高さを自動に */
    #trends .card.h-100 .card-body,
    #trends .row .col-md-6 .card .card-body,
    #trends .row article.col-md-6 .card .card-body,
    #trends .row article.col-12.col-md-6 .card .card-body {
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
    }
    
    /* カードボディのパディングを統一 */
    #trends .row .col-md-6 .card .card-body,
    #trends .row article.col-md-6 .card .card-body,
    #trends .row article.col-12.col-md-6 .card .card-body,
    #trends .card.h-100 .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem !important;
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* .card-body内の全ての要素も高さを自動に */
    #trends .row .col-md-6 .card .card-body > *,
    #trends .row article.col-md-6 .card .card-body > *,
    #trends .row article.col-12.col-md-6 .card .card-body > *,
    #trends .card.h-100 .card-body > * {
        height: auto !important;
        min-height: 0 !important;
    }
    
    #trends .row .col-md-6 .card .card-body .trend-table-container,
    #trends .row .col-md-6 .card .card-body .loading,
    /* .trend-table-containerを確実に表示（最重要 - 全パターン） */
    .trend-table-container,
    #trends .row article.col-md-6 .card .card-body .trend-table-container,
    #trends .row article.col-12.col-md-6 .card .card-body .trend-table-container,
    #trends .card.h-100 .card-body .trend-table-container,
    #trends .row .col-md-6 .card .card-body .trend-table-container {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #trends .row article.col-md-6 .card .card-body .loading,
    #trends .row article.col-12.col-md-6 .card .card-body .loading,
    #trends .card.h-100 .card-body .loading {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* .table-responsiveも確実に表示（全パターン） */
    .table-responsive,
    .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body .trend-table-container .table-responsive,
    #trends .row .col-md-6 .card .card-body .trend-table-container .table-responsive {
        display: block !important;
        height: auto !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* モバイルでのヘッダー調整 */
    #mainHeader .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    #mainHeader .d-flex.align-items-center:last-child {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    #mainHeader .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        font-size: 0.7rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* モバイルでのテーブル調整 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* モバイルでの楽天商品名カラム調整 */
    #rakutenTrendsTable td:nth-child(2) {
        max-width: none !important;
        min-width: 200px;
    }
    
    #rakutenTrendsTable td:nth-child(2) strong,
    #rakutenTrendsTable td:nth-child(2) a {
        -webkit-line-clamp: 4 !important;
    }
    
    /* モバイルでのカードヘッダー調整 */
    .card-header h5 {
        font-size: 0.85rem;
    }
    
    /* モバイルでのコンテナ調整（Google TrendsとYouTubeと同じ） */
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box !important;
    }
    
    /* 全てのカードを同じ幅に統一 */
    #trends .row .col-md-6 .card {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* カードボディの幅も統一 */
    #trends .row .col-md-6 .card .card-body {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ネストされたカードも同じ幅に */
    #trends .row .col-md-6 .card .card-body .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* カード内のネストされたカードも同じパディング */
    #trends .row .col-md-6 .card .card-body .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    /* テーブルコンテナのパディング調整 */
    #trends .row .col-md-6 .card .card-body .trend-table-container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ネストされたカードのボディも統一 */
    #trends .row .col-md-6 .card .card-body .card .card-body {
        padding: 1rem !important;
    }
    
    /* 説明文やフォーム要素のマージン調整 */
    #trends .row .col-md-6 .card .card-body p.text-muted {
        margin-bottom: 1rem !important;
    }
    
    #trends .row .col-md-6 .card .card-body .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* モバイル表示で結果セクションを確実に表示（デスクトップ用の詳細なセレクタを上書き） */
    /* デスクトップ用と同じ詳細度のセレクタで上書きする - QiitaとPodcastを最優先で修正 */
    /* Qiita - デスクトップ用の詳細セレクタを完全に上書き */
    #trends .card.h-100 .card-body #qiitaResults {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        position: static !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card,
    #trends .card.h-100 .card-body #qiitaResults > .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        align-self: auto !important;
        margin-bottom: 0 !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
        width: 100% !important;
    }
    
    /* Podcast - デスクトップ用の詳細セレクタを完全に上書き */
    #trends .card.h-100 .card-body #podcastResults {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        position: static !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card,
    #trends .card.h-100 .card-body #podcastResults > .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        align-self: auto !important;
        margin-bottom: 0 !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
        width: 100% !important;
    }
    
    /* 他の結果セクションも同様に処理 */
    #trends .card.h-100 .card-body #podcastResults,
    #trends .card.h-100 .card-body #hackernewsResults,
    #trends .card.h-100 .card-body #hatenaResults,
    #trends .card.h-100 .card-body #noteResults,
    #trends .card.h-100 .card-body #rakutenResults,
    #trends .card.h-100 .card-body #twitchResults,
    #trends .card.h-100 .card-body #musicResults,
    #trends .card.h-100 .card-body #googleResults,
    #trends .card.h-100 .card-body #youtubeResults,
    #trends .row .col-md-6 .card .card-body #qiitaResults,
    #trends .row .col-md-6 .card .card-body #podcastResults,
    #trends .row .col-md-6 .card .card-body #hackernewsResults,
    #trends .row .col-md-6 .card .card-body #hatenaResults,
    #trends .row .col-md-6 .card .card-body #noteResults,
    #trends .row .col-md-6 .card .card-body #rakutenResults,
    #trends .row .col-md-6 .card .card-body #twitchResults,
    #trends .row .col-md-6 .card .card-body #musicResults,
    #trends .row .col-md-6 .card .card-body #googleResults,
    #trends .row .col-md-6 .card .card-body #youtubeResults {
        display: block !important;
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        position: static !important;
        align-self: auto !important;
    }
    
    /* 他の結果セクションのネストされたカードも同様に処理 */
    #trends .card.h-100 .card-body #podcastResults > .card,
    #trends .card.h-100 .card-body #podcastResults > .card.category-card,
    #trends .card.h-100 .card-body #hackernewsResults > .card,
    #trends .card.h-100 .card-body #hackernewsResults > .card.category-card,
    #trends .card.h-100 .card-body #hatenaResults > .card,
    #trends .card.h-100 .card-body #hatenaResults > .card.category-card,
    #trends .card.h-100 .card-body #noteResults > .card,
    #trends .card.h-100 .card-body #noteResults > .card.category-card,
    #trends .card.h-100 .card-body #rakutenResults > .card,
    #trends .card.h-100 .card-body #rakutenResults > .card.category-card,
    #trends .card.h-100 .card-body #musicResults > .card,
    #trends .card.h-100 .card-body #musicResults > .card.category-card,
    #trends .card.h-100 .card-body #googleResults > .card,
    #trends .card.h-100 .card-body #googleResults > .card.category-card,
    #trends .card.h-100 .card-body #youtubeResults > .card,
    #trends .card.h-100 .card-body #youtubeResults > .card.category-card,
    #trends .row .col-md-6 .card .card-body #qiitaResults .card,
    #trends .row .col-md-6 .card .card-body #qiitaResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #podcastResults .card,
    #trends .row .col-md-6 .card .card-body #podcastResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #hackernewsResults .card,
    #trends .row .col-md-6 .card .card-body #hackernewsResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #hatenaResults .card,
    #trends .row .col-md-6 .card .card-body #hatenaResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #noteResults .card,
    #trends .row .col-md-6 .card .card-body #noteResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #rakutenResults .card,
    #trends .row .col-md-6 .card .card-body #rakutenResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #musicResults .card,
    #trends .row .col-md-6 .card .card-body #musicResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #googleResults .card,
    #trends .row .col-md-6 .card .card-body #googleResults .card.category-card,
    #trends .row .col-md-6 .card .card-body #youtubeResults .card,
    #trends .row .col-md-6 .card .card-body #youtubeResults .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        align-self: auto !important;
        margin-bottom: 0 !important;
    }
    
    /* 他の結果セクションのカードボディも同様に処理 */
    /* QiitaとPodcastも他のカテゴリと同じスタイルに */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body,
    #trends .card.h-100 .card-body #hackernewsResults > .card > .card-body,
    #trends .card.h-100 .card-body #hatenaResults > .card > .card-body,
    #trends .card.h-100 .card-body #noteResults > .card > .card-body,
    #trends .card.h-100 .card-body #rakutenResults > .card > .card-body,
    #trends .card.h-100 .card-body #musicResults > .card > .card-body,
    #trends .card.h-100 .card-body #googleResults > .card > .card-body,
    #trends .card.h-100 .card-body #youtubeResults > .card > .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
    }
    
    /* 他の結果セクションのトレンドテーブルコンテナも同様に処理 */
    /* QiitaとPodcastも他のカテゴリと同じスタイルに */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #hackernewsResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #hatenaResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #noteResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #rakutenResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #musicResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #googleResults > .card > .card-body > .trend-table-container,
    #trends .card.h-100 .card-body #youtubeResults > .card > .card-body > .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        align-self: auto !important;
    }
    
    /* 他の結果セクションのテーブルレスポンシブも同様に処理 */
    /* QiitaとPodcastも他のカテゴリと同じスタイルに */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #hackernewsResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #hatenaResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #noteResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #rakutenResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #musicResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #googleResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .card.h-100 .card-body #youtubeResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
        width: 100% !important;
    }
    
    /* モバイル表示で結果セクション内のテーブルコンテナも確実に表示 */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #qiitaResults .trend-table-container,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #podcastResults .trend-table-container,
    #trends .card.h-100 .card-body #hackernewsResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #hackernewsResults .trend-table-container,
    #trends .card.h-100 .card-body #hatenaResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #hatenaResults .trend-table-container,
    #trends .card.h-100 .card-body #noteResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #noteResults .trend-table-container,
    #trends .card.h-100 .card-body #rakutenResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #rakutenResults .trend-table-container,
    #trends .card.h-100 .card-body #twitchResults > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #twitchResults .trend-table-container,
    #trends .card.h-100 .card-body #musicResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #musicResults .trend-table-container,
    #trends .card.h-100 .card-body #googleResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #googleResults .trend-table-container,
    #trends .card.h-100 .card-body #youtubeResults > .card > .card-body > .trend-table-container,
    #trends .row .col-md-6 .card .card-body #youtubeResults .trend-table-container {
        display: flex !important;
        flex-direction: column !important;
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        overflow-y: visible !important;
        align-self: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* モバイル表示でネストされたカードのボディも適切に表示 */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #qiitaResults .card .card-body,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #podcastResults .card .card-body,
    #trends .card.h-100 .card-body #hackernewsResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #hackernewsResults .card .card-body,
    #trends .card.h-100 .card-body #hatenaResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #hatenaResults .card .card-body,
    #trends .card.h-100 .card-body #noteResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #noteResults .card .card-body,
    #trends .card.h-100 .card-body #rakutenResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #rakutenResults .card .card-body,
    #trends .card.h-100 .card-body #musicResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #musicResults .card .card-body,
    #trends .card.h-100 .card-body #googleResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #googleResults .card .card-body,
    #trends .card.h-100 .card-body #youtubeResults > .card > .card-body,
    #trends .row .col-md-6 .card .card-body #youtubeResults .card .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
        padding: 1rem !important;
    }
    
    /* モバイル表示でテーブルレスポンシブコンテナも適切に表示 */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #qiitaResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #podcastResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #hackernewsResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #hackernewsResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #hatenaResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #hatenaResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #noteResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #noteResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #rakutenResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #rakutenResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #musicResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #musicResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #googleResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #googleResults .trend-table-container .table-responsive,
    #trends .card.h-100 .card-body #youtubeResults > .card > .card-body > .trend-table-container > .table-responsive,
    #trends .row .col-md-6 .card .card-body #youtubeResults .trend-table-container .table-responsive {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: auto !important;
    }
    
    /* モバイル表示でQiitaとPodcastをSpotifyと同じスタイルに（最優先） */
    /* Spotifyと同じように、height: autoで自然に表示されるようにする */
    #qiitaResults {
        display: block !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 0 !important;
        position: static !important;
    }
    
    #podcastResults {
        display: block !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 0 !important;
        position: static !important;
    }
    
    #hackernewsResults,
    #hatenaResults,
    #noteResults,
    #rakutenResults,
    #twitchResults,
    #musicResults,
    #googleResults,
    #youtubeResults {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        position: static !important;
    }
    
    /* モバイル表示で一般的なIDセレクタ内のカードも上書き - QiitaとPodcastを最優先 */
    #qiitaResults .card,
    #qiitaResults .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    #podcastResults .card,
    #podcastResults .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    #hackernewsResults .card,
    #hatenaResults .card,
    #noteResults .card,
    #rakutenResults .card,
    #musicResults .card,
    #googleResults .card,
    #youtubeResults .card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* モバイル表示で一般的なIDセレクタ内のカードボディも上書き */
    #qiitaResults .card .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    #podcastResults .card .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    #hackernewsResults .card .card-body,
    #hatenaResults .card .card-body,
    #noteResults .card .card-body,
    #rakutenResults .card .card-body,
    #musicResults .card .card-body,
    #googleResults .card .card-body,
    #youtubeResults .card .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    /* モバイル表示で一般的なIDセレクタ内のトレンドテーブルコンテナも上書き */
    #qiitaResults .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        overflow-y: visible !important;
    }
    
    #podcastResults .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        overflow-y: visible !important;
    }
    
    #hackernewsResults .trend-table-container,
    #hatenaResults .trend-table-container,
    #noteResults .trend-table-container,
    #rakutenResults .trend-table-container,
    #musicResults .trend-table-container,
    #googleResults .trend-table-container,
    #youtubeResults .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        overflow-y: visible !important;
    }
    
    /* モバイル表示で一般的なIDセレクタ内のテーブルレスポンシブも上書き */
    #qiitaResults .trend-table-container .table-responsive {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    #podcastResults .trend-table-container .table-responsive {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    #hackernewsResults .trend-table-container .table-responsive,
    #hatenaResults .trend-table-container .table-responsive,
    #noteResults .trend-table-container .table-responsive,
    #rakutenResults .trend-table-container .table-responsive,
    #musicResults .trend-table-container .table-responsive,
    #googleResults .trend-table-container .table-responsive,
    #youtubeResults .trend-table-container .table-responsive {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    /* モバイル表示でテーブル要素も確実に表示 */
    #qiitaResults table,
    #podcastResults table,
    #hackernewsResults table,
    #hatenaResults table,
    #noteResults table,
    #rakutenResults table,
    #musicResults table,
    #googleResults table,
    #youtubeResults table {
        display: table !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* モバイル表示でテーブルボディも確実に表示 */
    #qiitaResults tbody,
    #podcastResults tbody,
    #hackernewsResults tbody,
    #hatenaResults tbody,
    #noteResults tbody,
    #rakutenResults tbody,
    #musicResults tbody,
    #googleResults tbody,
    #youtubeResults tbody {
        display: table-row-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* モバイル表示でテーブル行も確実に表示 */
    #qiitaResults tr,
    #podcastResults tr,
    #hackernewsResults tr,
    #hatenaResults tr,
    #noteResults tr,
    #rakutenResults tr,
    #musicResults tr,
    #googleResults tr,
    #youtubeResults tr {
        display: table-row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* モバイル表示で全ての結果セクションとその子要素を強制的に表示 */
    #qiitaResults *,
    #podcastResults *,
    #hackernewsResults *,
    #hatenaResults *,
    #rakutenResults *,
    #musicResults *,
    #googleResults *,
    #youtubeResults * {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* モバイル表示で非表示にすべき要素のみ例外処理 */
    #qiitaResults .alert.status-message,
    #podcastResults .alert.status-message,
    #hackernewsResults .alert.status-message,
    #hatenaResults .alert.status-message,
    #rakutenResults .alert.status-message,
    #musicResults .alert.status-message,
    #googleResults .alert.status-message,
    #youtubeResults .alert.status-message,
    #qiitaResults .loading,
    #podcastResults .loading,
    #hackernewsResults .loading,
    #hatenaResults .loading,
    #rakutenResults .loading,
    #musicResults .loading,
    #googleResults .loading,
    #youtubeResults .loading {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
    
    /* モバイル表示で.category-cardクラスのmax-heightとoverflowを上書き */
    #qiitaResults .category-card,
    #podcastResults .category-card,
    #hackernewsResults .category-card,
    #hatenaResults .category-card,
    #rakutenResults .category-card,
    #musicResults .category-card,
    #googleResults .category-card,
    #youtubeResults .category-card {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    /* モバイル表示でQiitaのセクション全体を強制的に表示（最優先・直接セレクタ） */
    article.col-12.col-md-6 .card .card-body #qiitaResults,
    article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 200px !important;
        width: 100% !important;
        flex: none !important;
        position: static !important;
        align-self: auto !important;
    }
    
    article.col-12.col-md-6 .card .card-body #qiitaResults > .card,
    article.col-12.col-md-6 .card .card-body #qiitaResults > .card.category-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 150px !important;
        width: 100% !important;
        flex: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    article.col-12.col-md-6 .card .card-body #qiitaResults > .card > .card-body {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100px !important;
        width: 100% !important;
        flex: none !important;
    }
    
    article.col-12.col-md-6 .card .card-body #qiitaResults .trend-table-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 50px !important;
        width: 100% !important;
        flex: none !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    article.col-12.col-md-6 .card .card-body #qiitaResults .table-responsive {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
    }
    
    article.col-12.col-md-6 .card .card-body #qiitaResults table {
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    /* モバイル表示でQiitaとPodcastを強制的に表示 - 最終手段（最高優先度） */
    /* デスクトップ用の全てのセレクタを上書き */
    #trends article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults,
    #trends article.col-12.col-md-6 .card .card-body #qiitaResults,
    article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults,
    article.col-12.col-md-6 .card .card-body #qiitaResults {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 200px !important;
        width: 100% !important;
        flex: none !important;
        position: static !important;
        align-self: auto !important;
    }
    
    #trends article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults > .card,
    #trends article.col-12.col-md-6 .card .card-body #qiitaResults > .card,
    #trends article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults > .card.category-card,
    #trends article.col-12.col-md-6 .card .card-body #qiitaResults > .card.category-card,
    article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults > .card,
    article.col-12.col-md-6 .card .card-body #qiitaResults > .card,
    article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults > .card.category-card,
    article.col-12.col-md-6 .card .card-body #qiitaResults > .card.category-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 150px !important;
        width: 100% !important;
        flex: none !important;
        max-height: none !important;
        overflow: visible !important;
        align-self: auto !important;
        margin-bottom: 0 !important;
    }
    
    #trends article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults > .card > .card-body,
    #trends article.col-12.col-md-6 .card .card-body #qiitaResults > .card > .card-body,
    article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults > .card > .card-body,
    article.col-12.col-md-6 .card .card-body #qiitaResults > .card > .card-body {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100px !important;
        width: 100% !important;
        flex: none !important;
        align-self: auto !important;
    }
    
    #trends article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults .trend-table-container,
    #trends article.col-12.col-md-6 .card .card-body #qiitaResults .trend-table-container,
    article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults .trend-table-container,
    article.col-12.col-md-6 .card .card-body #qiitaResults .trend-table-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 50px !important;
        width: 100% !important;
        flex: none !important;
        max-height: none !important;
        overflow-y: visible !important;
        align-self: auto !important;
    }
    
    /* Podcastも同様に */
    #trends article.col-12.col-md-6 .card.h-100 .card-body #podcastResults,
    #trends article.col-12.col-md-6 .card .card-body #podcastResults,
    article.col-12.col-md-6 .card.h-100 .card-body #podcastResults,
    article.col-12.col-md-6 .card .card-body #podcastResults {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 200px !important;
        width: 100% !important;
        flex: none !important;
        position: static !important;
        align-self: auto !important;
    }
    
    #trends article.col-12.col-md-6 .card.h-100 .card-body #podcastResults > .card,
    #trends article.col-12.col-md-6 .card .card-body #podcastResults > .card,
    #trends article.col-12.col-md-6 .card.h-100 .card-body #podcastResults > .card.category-card,
    #trends article.col-12.col-md-6 .card .card-body #podcastResults > .card.category-card,
    article.col-12.col-md-6 .card.h-100 .card-body #podcastResults > .card,
    article.col-12.col-md-6 .card .card-body #podcastResults > .card,
    article.col-12.col-md-6 .card.h-100 .card-body #podcastResults > .card.category-card,
    article.col-12.col-md-6 .card .card-body #podcastResults > .card.category-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 150px !important;
        width: 100% !important;
        flex: none !important;
        max-height: none !important;
        overflow: visible !important;
        align-self: auto !important;
        margin-bottom: 0 !important;
    }
    
    #trends article.col-12.col-md-6 .card.h-100 .card-body #podcastResults > .card > .card-body,
    #trends article.col-12.col-md-6 .card .card-body #podcastResults > .card > .card-body,
    article.col-12.col-md-6 .card.h-100 .card-body #podcastResults > .card > .card-body,
    article.col-12.col-md-6 .card .card-body #podcastResults > .card > .card-body {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100px !important;
        width: 100% !important;
        flex: none !important;
        align-self: auto !important;
    }
    
    #trends article.col-12.col-md-6 .card.h-100 .card-body #podcastResults .trend-table-container,
    #trends article.col-12.col-md-6 .card .card-body #podcastResults .trend-table-container,
    article.col-12.col-md-6 .card.h-100 .card-body #podcastResults .trend-table-container,
    article.col-12.col-md-6 .card .card-body #podcastResults .trend-table-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 50px !important;
        width: 100% !important;
        flex: none !important;
        max-height: none !important;
        overflow-y: visible !important;
        align-self: auto !important;
    }
    
    /* モバイル表示でQiitaとPodcastを確実に表示（最終的なフォールバック） */
    /* 全ての詳細なセレクタを上書き */
    #trends article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults,
    #trends article.col-12.col-md-6 .card .card-body #qiitaResults,
    article.col-12.col-md-6 .card.h-100 .card-body #qiitaResults,
    article.col-12.col-md-6 .card .card-body #qiitaResults,
    #qiitaResults {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 200px !important;
        position: static !important;
    }
    
    #trends article.col-12.col-md-6 .card.h-100 .card-body #podcastResults,
    #trends article.col-12.col-md-6 .card .card-body #podcastResults,
    article.col-12.col-md-6 .card.h-100 .card-body #podcastResults,
    article.col-12.col-md-6 .card .card-body #podcastResults,
    #podcastResults {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
        min-height: 200px !important;
        position: static !important;
    }
    
    /* テーブルも確実に表示 */
    #qiitaResults table,
    #podcastResults table {
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    #qiitaResults tbody,
    #podcastResults tbody {
        display: table-row-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #qiitaResults tr,
    #podcastResults tr {
        display: table-row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #qiitaResults td,
    #podcastResults td {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 最終的なモバイル表示修正（最高優先度・ファイルの最後に配置） */
/* QiitaとPodcastを他のカテゴリ（Google、YouTube、Hatena、Musicなど）と同じスタイルに */
/* デスクトップ用の詳細なルール（@media min-width: 992px内）を完全に上書き */
@media (max-width: 991px) {
    /* 他のカテゴリと同じスタイル - デスクトップ用ルールを完全に上書き */
    /* デスクトップ用のルールと同じ詳細度のセレクタを使用して確実に上書き */
    /* height: 32px の問題を解決 - height: auto を強制 */
    #trends .card.h-100 .card-body #qiitaResults {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        position: static !important;
        align-self: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 親要素の.card-bodyも height: auto を強制 */
    #trends .card.h-100 .card-body {
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card,
    #trends .card.h-100 .card-body #qiitaResults > .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        align-self: auto !important;
        margin-bottom: 0 !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        align-self: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    /* Podcastも同様に */
    #trends .card.h-100 .card-body #podcastResults {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        position: static !important;
        align-self: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card,
    #trends .card.h-100 .card-body #podcastResults > .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        align-self: auto !important;
        margin-bottom: 0 !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
        align-self: auto !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        align-self: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    /* デスクトップ用の一般的なIDセレクタも上書き */
    #qiitaResults {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
    
    #qiitaResults .card,
    #qiitaResults .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    #qiitaResults .card .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    #qiitaResults .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }
    
    #qiitaResults .trend-table-container .table-responsive {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    #podcastResults {
        flex: none !important;
        display: block !important;
        flex-direction: initial !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
    
    /* .trend-table-container の高さが 0px になる問題を解決 */
    /* デスクトップ用のルール（580行目）と同じ詳細度のセレクタを使用して確実に上書き */
    /* デスクトップ用: #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container { flex: 1 1 0 !important; } */
    /* これがモバイル表示でも適用されているため、同じ詳細度で上書き */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 300px !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
        align-self: auto !important;
    }
    
    /* 決定的な違いを解決：デスクトップ用のルール（321行目）を上書き */
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container {
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
        align-self: auto !important;
    }
    
    /* .table-responsiveも同様に */
    #trends .card.h-100 .card-body #qiitaResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        align-self: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    #trends .card.h-100 .card-body #podcastResults > .card > .card-body > .trend-table-container > .table-responsive {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        align-self: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    /* その他のセレクタパターンも追加 */
    #qiitaResults .trend-table-container,
    #podcastResults .trend-table-container,
    #trends .row .col-md-6 .card .card-body #qiitaResults .trend-table-container,
    #trends .row .col-md-6 .card .card-body #podcastResults .trend-table-container,
    #qiitaResults > .card > .card-body > .trend-table-container,
    #podcastResults > .card > .card-body > .trend-table-container {
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 300px !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }
    
    /* .card の高さも auto にして、コンテンツに合わせる */
    #qiitaResults > .card,
    #qiitaResults .card,
    #qiitaResults .card.category-card,
    #podcastResults > .card,
    #podcastResults .card,
    #podcastResults .card.category-card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
    }
    
    /* .card-body も auto にする - これが重要！ */
    #qiitaResults .card .card-body,
    #podcastResults .card .card-body,
    #qiitaResults > .card > .card-body,
    #podcastResults > .card > .card-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
    }
    
    #podcastResults .card,
    #podcastResults .card.category-card {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    #podcastResults .card .card-body {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    
    #podcastResults .trend-table-container {
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow-y: visible !important;
        overflow-x: auto !important;
    }
    
    #podcastResults .trend-table-container .table-responsive {
        flex: none !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

/* ============================================
   スケルトンUI - データ読み込み中のプレースホルダー
   ============================================ */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

.skeleton-text {
    width: 60%;
    height: 1em;
    margin: 0.25em 0;
}

.skeleton-text-long {
    width: 90%;
}

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

.skeleton-badge {
    width: 3em;
    height: 1.5em;
    border-radius: 0.25rem;
}

.skeleton-row {
    animation: skeleton-fade-in 0.3s ease-in;
}

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

@keyframes skeleton-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* スケルトン行が残っている場合は表示 */
.trend-table tbody tr.skeleton-row {
    display: table-row;
}

/* データ行が来たらスケルトンを非表示にする（JSで削除するので通常は不要だが、念のため） */
.trend-table tbody:has(tr:not(.skeleton-row)) tr.skeleton-row {
    display: none;
}

/* ========== トレンドカテゴリタブ ========== */
.trend-tabs-wrapper {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.trend-category-tabs {
    border-bottom: 0;
    gap: 0;
}
.trend-category-tabs .nav-link {
    white-space: nowrap;
    padding: 0.6rem 1rem;
    font-weight: 500;
    color: #495057;
    border: 1px solid transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    margin-bottom: -1px;
    transition: color 0.15s, background-color 0.15s;
}
.trend-category-tabs .nav-link:hover {
    color: #0d6efd;
    border-color: rgba(0, 0, 0, 0.08);
    background-color: rgba(13, 110, 253, 0.06);
}
.trend-category-tabs .nav-link.active,
ul.trend-category-tabs li.nav-item button.nav-link.active {
    color: #0d6efd !important;
    background-color: #e9ecef !important;
    border-color: rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #0d6efd !important;
    margin-bottom: -2px;
}
.trend-category-tabs .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    flex-shrink: 0;
}
#trendCategoryTabContent .tab-pane {
    padding-top: 0.5rem;
}

/* モバイル: タブを横スクロール・タップしやすく */
@media (max-width: 767.98px) {
    .trend-tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .trend-tabs-wrapper::-webkit-scrollbar {
        height: 4px;
    }
    .trend-category-tabs {
        flex-wrap: nowrap;
        padding-bottom: 2px;
        min-width: min-content;
    }
    .trend-category-tabs .nav-link {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #mainContent .container-fluid,
    #mainContent main .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
@media (max-width: 575.98px) {
    .trend-category-tabs .nav-link {
        padding: 0.45rem 0.6rem;
        font-size: 0.8125rem;
    }
}