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

/* PR TIMES / GlobeNewswire は日本ページのみ非表示（USではGlobeNewswire表示） */
body#trends-jp #row-source-prtimes,
body#trends-jp #row-source-globenewswire,
body#trends-jp #source-prtimes,
body#trends-jp #source-globenewswire,
body#trends-jp [data-all-card="globenewswire"] {
    display: none !important;
}
/* 日本ページの All タブ: PR TIMES × はてブのみ表示（PR TIMES単体はコメントアウト済み） */
body#trends-jp #pane-all [data-all-card="prtimes_hatena"] {
    display: block !important;
}
body#trends-jp #pane-all [data-all-card="prtimes"] {
    display: none !important;
}

#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;
    }
    /* スクロールバーがカードの角丸からはみ出さないように .card-body でクリップ */
    #trends .card.category-card > .card-body,
    body#trends-us #trends .card.category-card > .card-body {
        overflow: hidden;
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
    }
}

/* 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) {
    min-width: 8rem;
    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,
    #trends .row .col-md-4,
    #trends .row .col-lg-4 {
        display: flex !important;
        flex-direction: column !important;
    }
    
    #trends .row .col-md-6 .card.h-100,
    #trends .row .col-md-4 .card.h-100,
    #trends .row .col-lg-4 .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;
        padding-bottom: 0.5rem; /* 最後の1行が切れない最小余白（スクロールバー下端と行の高さを揃える） */
    }
    
    /* 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;
        padding-bottom: 0.5rem; /* 最後の1行が切れない最小余白 */
    }

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

/* 全部入り（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;
}
/* ドロップダウンと更新時刻が重ならないよう右ブロックに余白（Twitch等） */
#pane-all .card-header:has(.all-category-select) > div.flex-shrink-0 {
    margin-left: 0.5rem;
}
#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-header .all-more-link,
.estat-goto-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#pane-all .card-header .all-more-link {
    padding: 0.38rem 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#pane-all .card-header .all-more-link::after,
.estat-goto-tab::after {
    content: "\2192";
    font-size: 0.72rem;
    line-height: 1;
}

#pane-all .card-header .all-more-link:hover,
#pane-all .card-header .all-more-link:focus {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}

.estat-goto-tab {
    padding: 0.42rem 0.84rem !important;
    border: 1px solid rgba(13, 110, 253, 0.18) !important;
    background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%) !important;
    color: #0d6efd !important;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.12);
}

.estat-goto-tab:hover,
.estat-goto-tab:focus {
    background: linear-gradient(135deg, #0d6efd 0%, #3d8bfd 100%) !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(13, 110, 253, 0.2);
}

#pane-all .card-header .all-more-link:active,
.estat-goto-tab:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
}

#pane-all .card-header .all-more-link:focus-visible,
.estat-goto-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18), 0 12px 24px rgba(15, 23, 42, 0.16);
}

@media (max-width: 575.98px) {
    #pane-all .card-header .all-more-link,
    .estat-goto-tab {
        padding: 0.34rem 0.72rem !important;
        font-size: 0.72rem !important;
    }
}

#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;
    padding-bottom: 0.5rem;
}

/* 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;
}

/* Noteの行高をはてな・Zennに揃える（コンパクト表示） */
#noteResults .trend-table tbody td {
    line-height: 1.25;
}

/* カードヘッダーのフォントサイズ */
.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 {
    table-layout: fixed;
    width: 100%;
}

#rakutenTrendsTable .badge {
    font-size: 0.55rem;
}

#rakutenTrendsTable tbody td {
    padding: 0.25rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1.25;
}

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

/* 商品名列に幅を確保 */
#rakutenTrendsTable th:nth-child(2),
#rakutenTrendsTable td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
    width: 42%;
    min-width: 8rem;
}

#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;
}

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

/* 狭いカードではショップ列を非表示（商品名の可読性優先） */
@media (max-width: 991.98px) {
    #rakutenTrendsTable th:nth-child(6),
    #rakutenTrendsTable td:nth-child(6) {
        display: none;
    }
}

/* カードのマージン調整 */
/* 重要: #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) {
    /* モバイル: タイトル下のグレーサブテキスト（説明文）を非表示にして行の高さを抑える */
    .trend-card td:has(strong) br,
    .trend-card td:has(strong) small.text-muted,
    .trend-card td:has(strong) div.text-muted {
        display: none !important;
    }

    /* モバイル表示で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: nowrap;
        gap: 0.35rem;
    }
    
    #mainHeader .btn {
        flex: 1 1 0;
        min-width: 0;
        font-size: 0.7rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* モバイルでのテーブル調整 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* モバイル: 全トレンドテーブルのヘッダー（黒背景）の高さを抑える */
    .table.trend-table thead tr,
    .trend-table thead tr {
        line-height: 1 !important;
    }
    .table.trend-table thead th,
    .trend-table thead th,
    .table.trend-table thead.table-dark th,
    .trend-table thead.table-dark th {
        padding: 0.1rem 0.3rem !important;
        font-size: 0.6rem !important;
        line-height: 1 !important;
        white-space: nowrap;
        vertical-align: middle !important;
    }
    
    /* モバイルでの楽天商品名カラム調整 */
    #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;
}

/* ========== メイン・ヘッダー余白の短縮（タブ直下のトレンドが見やすいように） ========== */
.main-content-compact {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}
.page-header-compact {
    margin-bottom: 0.5rem;
}
.trend-tabs-compact {
    margin-bottom: 0.5rem;
}

/* ========== ヘッダー説明文（モダン：短縮表示 + ツールチップ） ========== */
.header-description-modern {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1.4;
}
.header-desc-short {
    font-size: 0.875rem;
    color: #6c757d;
}
.header-desc-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.header-desc-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.2em 0.5em;
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
    border-radius: 0.35rem;
}
.header-desc-info-btn {
    background: none;
    border: none;
    padding: 0;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease;
}
.header-desc-info-btn:hover {
    color: #0d6efd;
}
.header-desc-info-btn .fa-info-circle {
    font-size: 0.9rem;
}
/* ツールチップをやや広く（長文説明用） */
.header-desc-tooltip .tooltip-inner {
    max-width: 320px;
    text-align: left;
}

/* 旧スタイル（他ページで使用中の可能性があるため残す） */
.header-description-wrapper {
    position: relative;
}
.header-desc-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.header-desc-more {
    display: none;
    font-size: 0.75rem;
    color: #0d6efd;
    cursor: pointer;
    user-select: none;
}
.header-desc-less-text {
    display: none;
}
@media (max-width: 576px) {
    .header-description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .header-desc-more {
        display: inline-block;
        margin-top: 0.25rem;
    }
    .header-desc-toggle:checked ~ .header-description {
        -webkit-line-clamp: unset;
        max-height: none;
        overflow: visible;
    }
    .header-desc-toggle:checked ~ .header-desc-more .header-desc-more-text {
        display: none;
    }
    .header-desc-toggle:checked ~ .header-desc-more .header-desc-less-text {
        display: inline;
    }
}

/* 景気・行政データと官公需シグナルの間の縦の区切り線（並んでいる時のみ） */
@media (min-width: 768px) {
    .header-admin-col-right {
        border-left: 1px solid rgba(0, 0, 0, 0.15);
        padding-left: 0.75rem;
    }
}

/* ========== トレンドカテゴリタブ（2段固定: ヘッダー直下に張り付く） ========== */
.trend-tabs-wrapper {
    position: sticky;
    top: var(--header-height, 3.25rem);
    z-index: 999;
    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;
}

/* 全部入りタブ: 先頭3件は常時表示、続きをトグルで開閉 */
#pane-all .all-card-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
#pane-all .all-accordion-chevron {
    display: none !important;
}
#pane-all .all-accordion-trigger {
    cursor: default;
    pointer-events: none;
}
@media (min-width: 992px) {
#pane-all .all-more-tbody {
        display: table-row-group !important;
        height: auto !important;
        overflow: visible !important;
    }
    #pane-all .all-more-toggle {
        display: none !important;
    }
    /* PC: カテゴリタブは全件表示、続きを表示ボタンは非表示（タブレット・モバイル時は5行+アコーディオン） */
    .category-more-toggle {
        display: none !important;
    }
    #trends tbody tr.more-row,
    body#trends-us #trends tbody tr.more-row {
        display: table-row !important;
    }
}

/* モバイル: テーブルの横スクロールは維持（必要なため無効化しない） */

/* 続き行: 非表示/表示の切り替え */
.more-row {
    display: none;
}
.more-rows-open .more-row {
    display: table-row;
}

/* モバイル: 5行+アコーディオン - 強制表示ルール(#xxxResults tr)を上書きし、続き行を閉じた時は非表示に */
@media (max-width: 991.98px) {
    #trends tbody:not(.more-rows-open) tr.more-row,
    body#trends-us #trends tbody:not(.more-rows-open) tr.more-row {
        display: none !important;
        visibility: hidden !important;
    }
}

/* 分割箇所の線だけ消す */
.more-row-end td {
    border-bottom: none !important;
}
.more-row-start td {
    border-top: none !important;
}

/* モバイル: タブを横スクロール・タップしやすく */
@media (max-width: 767.98px) {
    body#trends-jp,
    body#trends-us {
        overflow-x: hidden;
        max-width: 100%;
    }
    body#trends-jp main.main-content-compact,
    body#trends-us main.main-content-compact {
        max-width: 100%;
        overflow-x: hidden;
    }
    .page-header-compact,
    .dashboard-summary-grid,
    .dashboard-summary-panel {
        max-width: 100%;
        min-width: 0;
    }
    body#trends-jp section#trends,
    body#trends-us section#trends {
        max-width: 100%;
        min-width: 0;
    }
    .trend-tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .trend-tabs-wrapper::-webkit-scrollbar {
        height: 4px;
    }
    .trend-category-tabs {
        flex-wrap: nowrap;
        padding-bottom: 2px;
        width: max-content;
        box-sizing: border-box;
    }
    .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;
    }
}
@media (max-width: 575.98px) {
    .trend-category-tabs .nav-link {
        padding: 0.45rem 0.6rem;
        font-size: 0.8125rem;
    }
}

/* ========== USページ: トレンド本体を確実に表示（.tab-content 等の上書き） ========== */
body#trends-us main,
body#trends-us #mainContent,
body#trends-us section#trends {
    display: block !important;
    visibility: visible !important;
}
body#trends-us .tab-content#trendCategoryTabContent {
    display: block !important;
    visibility: visible !important;
}
/* アクティブなタブのペインのみ表示（日本ページと同様・そのタブのデータだけ表示） */
body#trends-us .tab-content#trendCategoryTabContent > .tab-pane.show.active,
body#trends-us .tab-content#trendCategoryTabContent > .tab-pane.active.show {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}
body#trends-us .tab-content#trendCategoryTabContent > .tab-pane.active.show #all-trends-container {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
}
body#trends-us #trends .row {
    align-items: stretch !important;
}
/* USページ: テーブル高さを抑えて広大な余白を防止（us-trends.css と重複するがフォールバック） */
body#trends-us #trends #pane-all .table-responsive,
body#trends-us #trends #pane-tech .trend-table-container,
body#trends-us #trends #pane-news .trend-table-container,
body#trends-us #trends #pane-search .trend-table-container,
body#trends-us #trends #pane-market .trend-table-container,
body#trends-us #trends #pane-entertainment .trend-table-container,
body#trends-us #trends #pane-govdata .trend-table-container,
body#trends-us #trends #pane-govdata #us-gov-body .card-body > .table-responsive {
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* JP: エンタメ・行政タブも同じテーブル高さ（e-Stat は .trend-table-container 外の .table-responsive のみの箇所あり） */
body#trends-jp #trends #pane-entertainment .trend-table-container,
body#trends-jp #trends #pane-admin .trend-table-container,
body#trends-jp #trends #pane-admin #estat-full-body .table-responsive {
    max-height: 400px !important;
    overflow-y: auto !important;
}


/* ========== All / ジャンルタブ: user layout (view-preferences.js) ========== */
#all-trends-container > [data-all-card] > .all-card-layout-controls,
#trendCategoryTabContent .tab-pane:not(#pane-all) article[id^="source-"] > .all-card-layout-controls,
#trendCategoryTabContent .tab-pane:not(#pane-all) div[id^="source-"] > .all-card-layout-controls {
    display: none;
}
.all-layout-edit-mode #all-trends-container > [data-all-card] > .all-card-layout-controls,
.genre-layout-edit-mode article[id^="source-"] > .all-card-layout-controls,
.genre-layout-edit-mode div[id^="source-"] > .all-card-layout-controls {
    display: flex !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.25rem 0.25rem 0 0;
}
.all-layout-edit-mode #all-trends-container > [data-all-card],
.genre-layout-edit-mode article[id^="source-"],
.genre-layout-edit-mode div[id^="source-"] {
    padding-top: 2.5rem;
}
#all-trends-container [data-all-card].all-card-col-user-hidden,
article[id^="source-"].all-card-col-user-hidden,
#trendCategoryTabContent .tab-pane:not(#pane-all) div[id^="source-"].all-card-col-user-hidden {
    display: none !important;
}
.all-layout-edit-mode #all-trends-container > [data-all-card].all-card-dragging,
.genre-layout-edit-mode article[id^="source-"].all-card-dragging,
.genre-layout-edit-mode div[id^="source-"].all-card-dragging {
    opacity: 0.65;
}
.all-layout-edit-mode #all-trends-container .all-card-drag-handle,
.genre-layout-edit-mode article[id^="source-"] .all-card-drag-handle,
.genre-layout-edit-mode div[id^="source-"] .all-card-drag-handle {
    touch-action: none;
    cursor: grab;
}
.all-layout-edit-mode #all-trends-container .all-card-drag-handle:active,
.genre-layout-edit-mode article[id^="source-"] .all-card-drag-handle:active,
.genre-layout-edit-mode div[id^="source-"] .all-card-drag-handle:active {
    cursor: grabbing;
}
.all-layout-hidden-strip:not(.d-none) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}