body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: #f9f9f9;
}

.dashboard-container {
    max-width: 1600px;
    margin: auto;
    padding: 10px;
}

/* --- タブのスタイル --- */
.tab-buttons {
    display: flex;
    border-bottom: 2px solid #ccc;
    margin-bottom: 10px;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    transition: background-color 0.2s;
}

.tab-button:hover {
    background-color: #e9e9e9;
}

.tab-button.active {
    background-color: #fff;
    border-bottom: 2px solid #fff;
    position: relative;
    top: 2px;
    color: #000;
}

.tab-content {
    display: none;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

.tab-content.active {
    display: block;
}

/* --- フィルターと情報ボックスのスタイル --- */
#custom-filters {
    padding: 10px 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
}

.filter-group, .slider-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.slider {
    width: 150px;
}

.slider-input {
    width: 55px;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-family: monospace;
    font-size: 12px;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.checkbox-label {
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    margin: 0 5px 0 3px;
}

.slider[disabled] {
    background: #BDBDBD;
}

.slider[disabled] .noUi-connect {
    background: #999;
}

.slider[disabled] .noUi-handle {
    display: none;
}

.slider-input:disabled {
    background-color: #f0f0f0;
    color: #999;
}

#custom-filters label {
    font-weight: bold;
}

#custom-filters select, #custom-filters input {
    margin: 0;
}

.hovertext {
    display: none !important;
    visibility: hidden !important;
}

#info-box {
    position: fixed;
    top: 120px;
    right: 20px;
    width: 450px;
    max-height: 80vh;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    line-height: 1.5;
    z-index: 1000;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    gap: 20px;
    pointer-events: none;
}

.info-column {
    flex: 1;
    min-width: 0;
}

.boxplot-wrapper {
    position: relative;
    width: 100%;
    height: 20px;
    font-size: 10px;
    color: #888;
    margin: -5px 0 10px 0;
}

.boxplot-container {
    position: relative;
    width: 100%;
    height: 12px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}

.boxplot-label {
    position: absolute;
    top: 10px;
}

.boxplot-box {
    position: absolute;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.3);
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    box-sizing: border-box;
}

.boxplot-median {
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: #e6550d;
}

.boxplot-mean {
    position: absolute;
    height: 100%;
    width: 2px;
    background-color: #3182bd;
    transform: translateX(-1px);
}

.boxplot-whisker {
    position: absolute;
    height: 50%;
    top: 25%;
    background-color: #666;
}

/* --- 分析セクションの共通スタイル --- */
.analysis-section {
    padding: 20px;
    margin-top: 10px;
}

.analysis-section h3 {
    margin-top: 0;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}

.analysis-section h4 {
    margin-top: 20px;
    margin-bottom: 5px;
}

.analysis-section p {
    font-size: 13px;
    color: #666;
    margin-top: 0;
}

#spotlight-report ul, #criteria-explanation ul {
    list-style-type: none;
    padding-left: 0;
}

#spotlight-report li.spotlight-card {
    background-color: #f0f0f0;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-block;
    margin: 2px;
}

#criteria-explanation ul {
    padding-left: 20px;
    list-style-type: disc;
}

#spotlight-report li.spotlight-card:hover {
    background-color: #ddd;
}

#spotlight-report li.spotlight-card.top-adopted {
    background-color: #FFF3C4;
    border: 1px solid #FFD700;
}

/* --- 各タブの個別スタイル --- */
#exhibit-analysis-table, .sortable-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

#exhibit-analysis-table th, #exhibit-analysis-table td, .sortable-table th, .sortable-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#exhibit-analysis-table th, .sortable-table th {
    background-color: #f2f2f2;
}

.exhibit-bar-container {
    display: flex;
    align-items: center;
    height: 20px;
    background-color: #e9e9e9;
    border-radius: 3px;
    overflow: hidden;
}

.exhibit-bar {
    height: 100%;
    background-color: #4CAF50;
    text-align: right;
    padding-right: 5px;
    color: white;
    font-size: 11px;
    white-space: nowrap;
}

.filter-btn {
    margin-right: 5px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: #eee;
    cursor: pointer;
    border-radius: 4px;
}

.filter-btn.active {
    background: #333;
    color: white;
}

.exhibit-name-shining {
    background-color: #ffe8e8;
    padding: 2px 4px;
    border-radius: 3px;
}

.exhibit-name-rare {
    background-color: #fff3c4;
    padding: 2px 4px;
    border-radius: 3px;
}

.exhibit-name-uncommon {
    background-color: #e8f4ff;
    padding: 2px 4px;
    border-radius: 3px;
}

.route-analysis-wrapper {
    display: flex;
    gap: 20px;
}

.route-acts-container {
    flex: 1;
    display: block;
    max-height: 80vh;
    overflow-y: auto;
    padding-right: 15px;
}

.route-details-panel {
    flex: 3;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 5px;
    background-color: #fdfdfd;
    min-height: 500px;
}

.route-act-column {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #ddd;
}

.route-act-column:last-child {
    border-bottom: none;
}

.route-level-node p {
    margin: 0 0 5px 0;
    font-size: 13px;
}

.node-choice-bar {
    display: flex;
    height: 25px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.node-choice-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: bold;
    transition: filter 0.2s;
    padding: 0 5px;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}

.node-choice-segment:hover {
    filter: brightness(1.1);
}

.node-details {
    display: none;
}

.node-details.active {
    display: block;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.details-grid h5, .route-details-panel h5 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
}

.details-grid ol, .route-details-panel ol {
    padding-left: 20px;
    margin: 0;
    font-size: 13px;
}

#exhibit-analysis-table a, .details-grid a, #info-box a {
    color: #000000;
    text-decoration: none;
}

#exhibit-analysis-table a:hover, .details-grid a:hover, #info-box a:hover {
    text-decoration: underline;
}

.enemy-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
    table-layout: fixed;
}

.enemy-stats-table th, .enemy-stats-table td {
    border: 1px solid #ddd;
    padding: 4px 6px;
    text-align: center;
    word-wrap: break-word;
    vertical-align: top;
}

.enemy-stats-table th {
    background-color: #f8f8f8;
    font-weight: bold;
}

.enemy-stats-table td:first-child, .enemy-stats-table th:first-child {
    text-align: left;
    font-weight: bold;
    background-color: #f8f8f8;
    width: 80px;
}

.inline-boxplot {
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 4px;
}

.inline-boxplot-chart {
    position: relative;
    height: 15px;
}

.inline-boxplot-whisker {
    position: absolute;
    height: 1px;
    top: 50%;
    background-color: #666;
}

.inline-boxplot-box {
    position: absolute;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.3);
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    box-sizing: border-box;
}

.inline-boxplot-median {
    position: absolute;
    height: 100%;
    width: 2px;
    background-color: #e6550d;
    transform: translateX(-1px);
}

.inline-boxplot-mean {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    background-color: #3182bd;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.inline-boxplot-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #888;
    padding: 0 1px;
}

#enemy-analysis-table-wrapper {
    max-height: 80vh;
    overflow-y: auto;
}

.sortable-table th {
    cursor: pointer;
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sortable-table th:hover {
    background-color: #e8e8e8;
}

.sortable-table th.sorted-asc::after {
    content: ' ▲';
}

.sortable-table th.sorted-desc::after {
    content: ' ▼';
}

.sortable-table tr.elite-enemy {
    background-color: #f2e8ff;
}

.sortable-table tr.boss-enemy {
    background-color: #ffe8e8;
}

.sortable-table tr.elite-enemy td:nth-child(2), .sortable-table tr.boss-enemy td:nth-child(2) {
    font-weight: bold;
}

@media (max-width: 768px) {
    #custom-filters {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
    }

    .filter-group, .slider-filter-group {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        gap: 10px;
    }

    .filter-group:last-child, .slider-filter-group:last-child {
        border-bottom: none;
    }

    .slider-container {
        width: 100%;
    }

    .slider {
        width: 100%;
        height: 12px;
    }

    .noUi-handle {
        width: 28px !important;
        height: 28px !important;
        right: -14px !important;
        top: -8px !important;
        border-radius: 50%;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    }

    #info-box {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 45vh;
        border-radius: 15px 15px 0 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.3s ease-in-out;
        pointer-events: auto;
    }

    #info-box.visible {
        transform: translateY(0);
    }

    .route-analysis-wrapper {
        flex-direction: column;
    }
}

/* style.css の末尾に追加 */

/* --- グローバルヘッダー --- */
#global-header {
    max-width: 1600px;
    margin: 10px auto 0 auto;
    padding: 0 10px;
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: center;
}

.character-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.character-switcher label {
    font-weight: bold;
    font-size: 14px;
}

.character-switcher select {
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    background-color: #fff;
}

/* style.css の末尾に追加 */

/* --- 敵戦闘分析タブのテーブル列幅調整 --- */
.sortable-table th.col-act,
.sortable-table td:nth-child(1) {
    width: 5%;
}

.sortable-table th.col-name,
.sortable-table td:nth-child(2) {
    width: 25%; /* 敵名の幅を狭くする */
}

.sortable-table th.col-encounters,
.sortable-table td:nth-child(3) {
    width: 8%;
}

.sortable-table th.col-stats,
.sortable-table td:nth-child(4),
.sortable-table td:nth-child(5),
.sortable-table td:nth-child(6) {
    width: 20%; /* 各統計情報の幅を広くする */
    vertical-align: top; /* 箱ひげ図のために上揃えに */
}

/* 箱ひげ図がセル内で正しく表示されるように調整 */
.sortable-table td .inline-boxplot {
    margin-top: 5px;
}


/* ルートイベント分析タブのテーブルのレイアウト */
#route-analysis-table-wrapper {
    max-height: 480px; /* PCでの高さ制限 */
    overflow-y: auto;  /* ★ 縦スクロールは、この外側の箱だけが担当する */
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

/* ★★★ このルールを追加してください ★★★ */
/* 内側の箱が、意図せずスクロールバーを持つことを防ぎます */
.route-acts-container {
    overflow: visible; /* はみ出した内容は親(wrapper)のスクロールに任せる、という設定 */
}


/* --- スマートフォン表示用のレイアウト調整 --- */
@media screen and (max-width: 768px) {

    /* スマートフォンでは高さをさらに低くする */
    #route-analysis-table-wrapper {
        max-height: 320px;
    }

    /* メインタイトルを調整 */
    #main-title {
        font-size: 1.1em;
        line-height: 1.4;
        word-break: break-word;
    }
}



/* Plotlyのモードバーを左上に配置するためのCSS */
.js-plotly-plot .modebar-container {
    /*
     * !important を使い、Plotlyが自動で設定する位置を上書きします
     */
    right: auto !important; /* デフォルトの右寄せを無効化 */
    left: 40px !important;  /* グラフの左端からの位置を調整 */
    top: 100px !important;   /* グラフの上端からの位置を調整 */
}


/* Plotlyのモードバーのボタンを大きくするCSS */
.js-plotly-plot .modebar-btn {
    width: 34px !important;  /* ボタンの幅を大きくする */
    height: 34px !important; /* ボタンの高さを大きくする */
    padding: 5px !important; /* アイコン周りの余白を調整 */
}

.js-plotly-plot .modebar-btn svg {
    width: 24px !important;  /* アイコン(SVG)の幅を大きくする */
    height: 24px !important; /* アイコン(SVG)の高さを大きくする */
}



/* --- モバイル用のタブ切り替えドロップダウン --- */

/* まずはドロップダウンを非表示に設定 */
#mobile-tab-selector {
    display: none; /* 初期状態では非表示 */
    width: 100%;
    padding: 12px;
    font-size: 16px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* 画面幅が768px以下の時（モバイル表示）のスタイル */
@media (max-width: 768px) {
    /* PC用のタブコンテナ(#tab-buttons)を非表示にする */
    #tab-buttons {
        display: none;
    }
    /* モバイル用のドロップダウン(#mobile-tab-selector)を表示する */
    #mobile-tab-selector {
        display: block;
    }
}

/* style.css の末尾をこのコードで置き換える */

/* --- モバイル用フィルター開閉機能のスタイル --- */

/* 開閉ボタンは、デフォルト(PC)では非表示 */
.filter-toggle-button {
    display: none;
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

/* フィルターコンテンツの基本スタイル (アニメーション用) */
.filter-content {
    max-height: 1000px; /* PCでは常に開いている状態（十分な高さを確保） */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}


/* --- 画面幅が768px以下の時（モバイル表示）のスタイル --- */
@media (max-width: 768px) {
    /* 開閉ボタンを表示する */
    .filter-toggle-button {
        display: block;
    }

    /* ★★★ ここが重要 ★★★ */
    /* モバイルの時だけ、.collapsedクラスが有効になるようにする */
    .filter-content.collapsed {
        max-height: 0;
        margin-bottom: 0 !important; /* 閉じたときに下の余白も消す */
    }

    /* モバイル用のフィルター間の余白を調整 */
    #custom-filters .filter-group,
    #custom-filters .slider-filter-group {
        margin-bottom: 15px;
    }
}


/* --- 情報ボックスのスタイル --- */

/* 1. 基本スタイル (PC & 共通) */
#info-box {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    line-height: 1.5;
    z-index: 1000;
    display: flex;
    gap: 20px;
    pointer-events: none; /* 初期状態ではクリックなどのイベントを受け付けない */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.info-column {
    flex: 1;
    min-width: 0;
}

/* 2. PCでの表示/非表示スタイル (デフォルト) */
#info-box {
    top: 120px;
    right: 20px;
    width: 450px;
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    transform: translateX(20px); /* 非表示状態 (右に隠れる) */
}
#info-box.visible {
    opacity: 1;
    transform: translateX(0); /* 表示状態 */
    pointer-events: auto; /* 表示されたらイベントを受け付ける */
}


/* 3. モバイル縦長表示のスタイル */
@media (max-width: 768px) and (orientation: portrait) {
    #info-box {
        /* 位置とサイズを再定義 */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 45vh;
        border-radius: 15px 15px 0 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        /* 非表示状態を再定義 */
        opacity: 1; /* 常に不透明 */
        transform: translateY(100%); /* 下に隠れる */
        transition: transform 0.3s ease-in-out;
        pointer-events: auto; /* 常に操作可能 */
    }

    #info-box.visible {
        /* 表示状態を再定義 */
        transform: translateY(0);
    }
}

/* 4. モバイル横長表示のスタイル */
@media (max-width: 992px) and (orientation: landscape) {
    #info-box {
        /* 位置とサイズを再定義 */
        top: 50%;
        right: 10px;
        left: auto;
        bottom: auto;
        width: 320px;
        max-width: 40vw;
        max-height: 90vh;
        overflow-y: auto;
        /* 非表示状態を再定義 */
        opacity: 0;
        transform: translateY(-50%) translateX(20px); /* 中央から右に隠れる */
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
    }

    #info-box.visible {
        /* 表示状態を再定義 */
        opacity: 1;
        transform: translateY(-50%) translateX(0); /* 中央に表示 */
        pointer-events: auto;
    }
}

/* 注目度フィルターのコンテナに上下の余白を追加して操作エリアを確保 */
#filter-group-attention .slider-container-single {
    /* 上下の余白を増やして、他の要素との間隔を確保 */
    padding: 18px 5px;
}

/* 注目度スライダーのバー自体を太くする */
#attention-score-slider.noUi-target {
    height: 10px; /* バーの太さ */
    border-radius: 5px; /* 角を丸くする */
}

/* 注目度スライダーのハンドル（つまみ）を大きくする */
#attention-score-slider .noUi-handle {
    width: 24px;  /* つまみの幅 */
    height: 24px; /* つまみの高さ */


    /* 位置調整（重要） */
    right: -12px; /* 幅の半分だけ外側にずらす */
    top: -7px;    /* (バーの高さ - つまみの高さ) / 2 */

    cursor: pointer; /* カーソルを指マークにする */
    box-shadow: 0 1px 4px rgba(0,0,0,0.3); /* 少し影をつけて立体感を出す */
}

/* (任意) ハンドルがフォーカスされた時の青い枠線を消す */
#attention-score-slider .noUi-handle:focus {
    outline: none;
}

/* 注目度フィルターのグループ全体を長くして、スライダーの長さを確保する */
#filter-group-attention {
    /* 他のフィルター項目よりも多くのスペースを占有させる */
    flex-grow: 1;

    /* 最低でもこの幅を確保する（お好みで調整してください） */
    min-width: 350px;
}
/* =================================== */
/* モバイル表示用のレイアウト調整 (768px以下) */
/* =================================== */
@media (max-width: 768px) {

    /* フィルター全体のコンテナ(#custom-filters)を縦並びにする */
    #custom-filters {
        flex-direction: column;   /* 縦並びにする */
        align-items: stretch;     /* 各項目を親の幅いっぱいに広げる */
        gap: 0;                   /* 項目間の隙間は一旦リセット */
    }

    /* 各フィルターグループのスタイル */
    .filter-group, .slider-filter-group {
        flex-direction: column;     /* ラベルと入力欄を縦に並べる */
        align-items: flex-start;    /* 左揃えにする */
        width: 100%;                /* 幅を100%に */
        padding-bottom: 20px;       /* 下に余白を追加 */
        margin-bottom: 20px;        /* 下にマージンを追加 */
        border-bottom: 1px solid #eee; /* 区切り線を追加 */
    }

    /* 最後の項目だけ区切り線を消す */
    .filter-group:last-child, .slider-filter-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* スライダーのコンテナの幅を100%に */
    .slider-container, .slider-container-single {
        width: 100%;
        padding-left: 10px;  /* 左右に少し余白を追加 */
        padding-right: 10px;
        box-sizing: border-box; /* paddingを含めて幅100%にする */
    }

    /* スライダー自体の幅も100%に */
    .slider {
        width: 100%;
    }

    /* PC用に設定した注目度フィルターの最低幅をリセット */
    #filter-group-attention {
        min-width: auto; /* 縦並びになるので最低幅は不要 */
    }
}

/* =================================== */
/* フィルターの横並び設定 */
/* =================================== */

/* レアリティとメダルを囲む新しいコンテナのスタイル */
.filter-row {
    display: flex;
    gap: 20px; /* PC表示でのフィルター間の隙間 */
    align-items: center;
}

/* PC表示では、中の要素がスペースを分け合うように */
.filter-row .filter-group {
    flex: 1;
}


/* --- モバイル表示用の調整 (768px以下) --- */
@media (max-width: 768px) {
    /* .filter-row 自体は、他のフィルターグループと同様に縦に並ぶ */
    .filter-row {
        /* 見た目を他のグループと合わせる */
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 15px;
        gap: 15px; /* モバイルでの隙間を調整 */
    }

    /* ★★★ ここが重要 ★★★ */
    /* .filter-row の中の .filter-group には、縦並びスタイルを適用せず、横並びを維持する */
    .filter-row .filter-group {
        flex-direction: row; /* 横並びを維持 */
        flex: 1;             /* スペースを分け合う */
        width: auto;         /* 幅は自動 */
        border-bottom: none; /* 個別の区切り線は不要 */
        padding-bottom: 0;   /* 個別のパディングも不要 */
        margin-bottom: 0;
        gap: 8px;            /* ラベルとセレクトの間の隙間 */
    }

    /* ラベルとセレクトボックスのレイアウトを微調整 */
    .filter-row .filter-group select {
        flex-grow: 1; /* 空きスペースを埋める */
    }
}



/* ルート分析の敵テーブル内にあるサンプルデッキのリンク */
.enemy-stats-table td a {
    display: inline-block;
    text-align: center;
    min-width: 20px;
    padding: 1px 4px;
    margin: 1px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    text-decoration: none;
    color: #337ab7;
    font-weight: bold;
    font-size: 11px;
    line-height: 1.5;
}

.enemy-stats-table td a:hover {
    background-color: #e9e9e9;
    border-color: #999;
}


.global-header-container {
    display: flex;
    justify-content: space-between; /* 左寄せと右寄せを両立 */
    align-items: center; /* 上下中央揃え */
    padding: 8px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 16px;
}

.header-left {
    display: flex;
    align-items: center; /* キャラ選択と更新日を中央揃え */
    gap: 20px; /* 要素間のスペース */
}

/* 最終更新日のテキストスタイル */
#last-update {
    font-size: 12px;
    color: #6c757d;
    margin: 0; /* 不要なマージンをリセット */
    white-space: nowrap; /* 折り返しを防ぐ */
}

/* 右側のコンテナ */
.header-right {
    /* 必要に応じてスタイルを追加 */
}

/* 既存の #global-header のマージンなどを調整 */
#global-header {
    margin-bottom: 0; /* 新しいコンテナに入ったので不要なマージンを削除 */
}

/* --- モバイル用ヘッダーのスタイル --- */

.mobile-header-top-row {
    display: flex;                 /* 中の要素を横並びにする */
    justify-content: space-between;  /* 両端に配置する */
    align-items: center;           /* 上下中央に揃える */
    gap: 10px;                     /* 要素間の最小の隙間 */
}


#mobile-header {
    display: none;
    padding: 10px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 16px;

    flex-direction: column;   /* 全体としては縦並び */
    align-items: stretch;     /* 幅をいっぱいまで広げる */
    gap: 12px;                /* 各行の間の隙間 */
}

/* キャラクター選択部分が利用可能な幅を埋めるようにする */
#global-header-mobile .character-switcher {
    flex-grow: 1;
}

/* 最終更新日のテキストが縮まないようにする */
#last-update-mobile {
    font-size: 11px;
    color: #6c757d;
    margin: 0;
    white-space: nowrap; /* 折り返しを防ぐ */
    flex-shrink: 0;    /* コンテナが狭くなってもテキストが縮まないようにする */
    text-align: right;
}

/* --- 画面サイズに応じた表示切り替え (メディアクエリ) --- */
@media (max-width: 768px) {
    /* PC用のヘッダーを非表示に */
    .global-header-container {
        display: none;
    }

    /* モバイル用のヘッダーを表示に */
    #mobile-header {
        display: flex;
    }
}