/* ================= テーマ ================= */
:root {
    --bg: #0b1220;
    --panel: #111827;
    --border: #1f2937;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --accent: #36d6b5;
    --accent-soft: rgba(54,214,181,.28);
    --danger: #fda4af;
    --positive: #86efac;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;
}

/* ================= 見出し・コンテナ ================= */
h3 {
    /* ★ PC用：従来通り。Mobile側で上書きするので text-align は指定しない ★ */
    margin: 18px auto 10px;
    max-width: 1280px;
    padding: 0 12px;
    color: #cbd5e1;
    letter-spacing: .2px;
}

.container-1280,
.dashboard-1280 {
    max-width: 1280px;
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}
    /* ================= PC用：KPI帯の下にだけ余白をつける ================= */
    /* h3 のすぐ下にある KPI 帯と、次の .row(row-700) 群の間に 4px */
    .dashboard-1280 > #kpiBand {
        margin-bottom: 4px;
    }


/* ================= 行レイアウト ================= */
.row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.row-700 {
    grid-template-columns: 700px 1fr;
}

.row-half {
    grid-template-columns: 1fr 1fr;
}

.row-full {
    grid-template-columns: 1fr;
}

@media (max-width:1200px) {
    .row-700 {
        grid-template-columns: 1fr;
    }
}

@media (max-width:800px) {
    .row-half {
        grid-template-columns: 1fr;
    }
}

/* ================= カード共通 ================= */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    box-sizing: border-box;
}

.h-300 {
    height: 300px;
}

.h-340 {
    height: 340px;
}

.card canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

h4 {
    margin: 0 0 8px;
    color: #cbd5e1;
    letter-spacing: .2px;
}

/* ================= テーブル ================= */
.table-dark {
    width: 100%;
    border-collapse: collapse;
}

    .table-dark th,
    .table-dark td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .table-dark thead th {
        color: #a3b1c6;
        font-weight: 600;
    }

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.pos {
    color: var(--positive);
}

.neg {
    color: var(--danger);
}

/* ================= ヘッダー & SLOT TOP（機種版と同じ思想） ================= */

/* PC 時はロゴぶんだけ左に余白を作る（ロゴは absolute） */
body {
    padding-left: 2cm;
}

/* SLOT TOP を画面上部中央に固定 */
#slotTopBtn {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel);
    color: var(--accent);
    padding: 6px 18px;
    border-radius: 8px;
    font-weight: 700;
    border: 1px solid var(--accent-soft);
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,.55);
    text-decoration: none;
    white-space: nowrap;
}

/* ================= 検索・フィルタ（PC基準） ================= */
.search-container,
.filters-container {
    margin-bottom: 10px;
}

/* PC：横1行 */
.filters-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px 12px;
    white-space: nowrap;
}

.filter-pair {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
}

    .filter-pair label {
        display: inline-block;
        margin: 0 4px 0 0;
        font-size: 14px;
    }

    .filter-pair select {
        width: auto;
        box-sizing: border-box;
        font-size: 14px;
    }

/* ================= KPI帯（左右2カラム） ================= */
.kpi-card {
    padding: 10px 16px 4px; /* 上10px / 左右16px / 下8px にする */
}

#kpiBand.kpi-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start; /* PC 基本は start。高さ揃えは後ろの @media(min-width:801px) でやる */
    padding-bottom: 4px;
}

.kpi-left {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
}

.kpi-card .sb-title {
    margin-bottom: 8px;
}

.kpi-card .sb-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0; /* 行全体の上下パディングも少しだけ減らす */
}

    /* キーと値は折り返さない */
    .kpi-card .sb-row .k,
    .kpi-card .sb-row .v {
        white-space: nowrap;
    }

/* 最後の行は下のパディングを完全にゼロにする */
#kpiBand.kpi-band .kpi-card .sb-row:last-of-type {
    padding-bottom: 0 !important;
    margin-bottom: 4px; /* 念のため margin も殺しておく */
}

.sb-row .k {
    color: var(--muted);
}

.sb-row .v {
    color: var(--text);
}

.sb-row .sep {
    color: var(--muted);
    margin: 0 2px;
}

/* 右側：画像＋情報（PC版） */
#kpiBand.kpi-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;   /* 左右どちらも「中身の高さに合わせる」 */
    padding-bottom: 4px;
}

/* 右の２枚（画像カード＋OpenYear/StoreInfo）の間の余白を 4px に */
.side-col {
    display: grid;
    grid-template-rows: auto auto;
    gap: 4px;             /* ★ ここが 8px → 4px */
}

/* 店舗画像の高さだけ下げる（左の①＋②の合計高さに近づける） */
.store-panel .img-wrap {
    height: 215px;        /* ★ 好みで 210〜230 の間で微調整してOK */
    max-height: 215px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#storeImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}



#storeImage {
    width: 100%;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}

#storeImageCaption:empty {
    display: none;
}

.card.info-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.info-card .lbl {
    color: var(--muted);
}

.info-card .gap {
    width: 10px;
    display: inline-block;
}

@media (max-width:800px) {

    /* 機種版と同じ：ロゴぶんの左余白を消す＆横スクロール防止 */
    body {
        padding-left: 0;
    }

    html, body {
        overflow-x: hidden;
    }

    /* SLOT TOP を少し小さく */
    #slotTopBtn {
        font-size: 13px;
        padding: 3px 14px;
        top: 6px;
    }

    /* ★ Mobile版：タイトル中央 ＋ 下に少し多めの余白 ★ */
    h3 {
        margin-top: 48px !important; /* ロゴからの距離（好みで40〜48の間で微調整OK） */
        margin-bottom: 12px !important; /* ← ここを増やしてカードとの間を広げる */
        max-width: 100%;
        text-align: center !important;
        padding: 0 8px;
        line-height: 1.35;
        font-size: 17px;
    }

    /* KPIカード文字詰め */
    .kpi-card {
        font-size: 12px;
        line-height: 1.25;
        padding: 8px 10px;
        margin-bottom: 8px;
    }

        .kpi-card .sb-title {
            font-size: 13px;
            margin-bottom: 4px;
            font-weight: 600;
        }

        .kpi-card .sb-row {
            margin-bottom: 2px;
            flex-wrap: wrap; /* モバイルでは折り返しOK */
            padding: 2px 0; /* 行間を少しだけ詰める（PCとは別管理） */
        }

        /* モバイルでも最後の行の下だけは余白ゼロにしておく */
        .kpi-card .sb-row:last-of-type {
            padding-bottom: 0;
        }

        .kpi-card .k,
        .kpi-card .v {
            font-size: 12px;
        }

        /* 区切りの「｜」は非表示 */
        .kpi-card .sep {
            display: none;
        }

    /* イベント指標テーブルの文字を少し小さく */
    .table-dark th,
    .table-dark td {
        font-size: 11px;
        padding: 2px 3px;
        line-height: 1.1;
        white-space: normal;
    }

        .table-dark th:first-child,
        .table-dark td:first-child {
            width: 2.6em;
            text-align: center;
        }

        .table-dark th:nth-child(2),
        .table-dark td:nth-child(2) {
            white-space: normal;
            text-align: left;
        }

        .table-dark th:nth-child(n+3),
        .table-dark td:nth-child(n+3) {
            text-align: right;
        }

    /* 機種 Best10 / Worst10 の二重枠解消＆フォント縮小 */
    #modelBestTableArea,
    #modelWorstTableArea {
        padding: 6px 6px;
    }

        #modelBestTableArea .card,
        #modelWorstTableArea .card {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            margin: 0;
        }

        #modelBestTableArea h4,
        #modelWorstTableArea h4 {
            font-size: 12px;
            margin: 0 0 4px 0;
        }

        #modelBestTableArea table,
        #modelBestTableArea th,
        #modelBestTableArea td,
        #modelWorstTableArea table,
        #modelWorstTableArea th,
        #modelWorstTableArea td {
            font-size: 11px;
            line-height: 1.1;
            padding: 2px 2px;
            white-space: normal;
        }

            #modelBestTableArea th:first-child,
            #modelBestTableArea td:first-child,
            #modelWorstTableArea th:first-child,
            #modelWorstTableArea td:first-child {
                width: 2.2em;
                text-align: center;
            }

            #modelBestTableArea th:nth-child(2),
            #modelBestTableArea td:nth-child(2),
            #modelWorstTableArea th:nth-child(2),
            #modelWorstTableArea td:nth-child(2) {
                text-align: left;
                white-space: normal;
            }

            #modelBestTableArea th:nth-child(n+3),
            #modelBestTableArea td:nth-child(n+3),
            #modelWorstTableArea th:nth-child(n+3),
            #modelWorstTableArea td:nth-child(n+3) {
                text-align: right;
            }
    /* 1行目：平均G数／平均差枚は改行させない */
    .kpi-card-sel .sb-row:nth-of-type(1) {
        display: flex;
        flex-wrap: nowrap;
    }

    /* 2行目：取得日数＋平均収益(1日) までは同じ行でOK、合計収益だけ次の行頭へ */
    .kpi-card-sel .sb-row:nth-of-type(2) {
        display: flex;
        flex-wrap: wrap;
    }

        .kpi-card-sel .sb-row:nth-of-type(2) .k-total {
            flex-basis: 100%; /* ここから新しい行として扱う */
            margin-top: 2px; /* 上の行との間にちょっと余白 */
        }

    /* キーと値のペアは途中で折り返さない */
    .kpi-card-sel .sb-row .k,
    .kpi-card-sel .sb-row .v {
        white-space: nowrap;
    }

}




/* ================= かなり小さい端末 (<=430) ================= */
@media (max-width:430px) {
    .table-dark th,
    .table-dark td {
        font-size: 10px;
        padding: 1px 2px;
        line-height: 1.05;
    }

        .table-dark th:first-child,
        .table-dark td:first-child {
            width: 2.2em;
            text-align: center;
        }

        .table-dark th:nth-child(2),
        .table-dark td:nth-child(2) {
            max-width: 6em;
            white-space: normal;
            text-align: left;
        }

        .table-dark th:nth-child(n+3),
        .table-dark td:nth-child(n+3) {
            text-align: right;
        }
}

/* ================= スマホレイアウト徹底 (<=600px) ================= */
@media (max-width:600px) {

    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .dashboard-1280,
    .container-1280 {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

        /* ダッシュボード直下の要素の外側余白は 4px 統一 */
        .dashboard-1280 > .filters-container,
        .dashboard-1280 > #kpiBand,
        .dashboard-1280 > .row,
        .dashboard-1280 > .row-700,
        .dashboard-1280 > .row-half,
        .dashboard-1280 > .row-full {
            margin: 4px 4px !important;
        }

    /* row は 1列 grid + gap=4px */
    .row,
    .row-700,
    .row-half,
    .row-full {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0 !important;
        gap: 4px !important;
        /* margin はここでは触らない */
    }

    /* すべてのカードは margin 0（外側余白は row 側で管理） */
    .dashboard-1280 .card {
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* KPI帯：縦並び + 各ブロック間 gap=4px */
    #kpiBand.kpi-band {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 4px 4px !important;
    }

    #kpiBand .kpi-left,
    #kpiBand .side-col {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* ★ KPI①↔KPI② を grid+gap=4px で並べる */
    #kpiBand .kpi-left {
        display: grid !important;
        grid-template-rows: auto auto;
        gap: 4px !important;
    }

    /* ★ 店舗画像 ↔ StoreInfo も grid+gap=4px */
    #kpiBand .side-col {
        display: grid !important;
        grid-template-rows: auto auto;
        gap: 4px !important;
    }

        /* KPI内カード & 右側カードの幅調整（余白は gap に任せる） */
        #kpiBand .kpi-left .card,
        #kpiBand .side-col .card,
        #storeRightPanel,
        #storeInfoCard {
            width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

    /* 800px側で付けた kpi-card の margin-bottom は無効化のままでOK */
    .kpi-card {
        margin-bottom: 0 !important;
    }

    /* フィルタカード */
    .filters-container {
        display: block;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 10px 12px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.45);
        white-space: normal;
    }

    .filter-pair {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin-bottom: 6px;
        justify-content: space-between;
    }

        .filter-pair:last-child {
            margin-bottom: 0;
        }

        .filter-pair label {
            flex: 0 0 70px;
            margin: 0;
            font-size: 14px;
            color: var(--muted);
            white-space: nowrap;
            text-align: left;
        }

        .filter-pair select {
            flex: 0 0 50%;
            max-width: 50%;
            margin-left: auto;
            font-size: 12px;
            padding: 4px 6px;
            border-radius: 8px;
            box-sizing: border-box;
        }

    /* Store Info カード：2行構成のまま */
    #storeInfoCard {
        white-space: normal !important;
        font-size: 12px;
    }

        #storeInfoCard .gap {
            display: block;
            height: 0;
        }

        #storeInfoCard .lbl:nth-of-type(2) {
            display: block;
            margin-top: 4px;
        }

}

@media (max-width:800px) {

    /* そのほかの h3 や .kpi-card の指定は今のまま残してOK */

    /* ▼ StoreInfo を縦2行＆余計なスペースを消す ▼ */
    #storeInfoCard {
        display: block; /* カード自体は普通のブロックに */
        font-size: 11px; /* 少しだけ小さくして 1 行に収まりやすく */
        white-space: normal !important;
    }

        #storeInfoCard .info-row {
            display: block; /* 1 行ずつ縦に並べる */
            margin-bottom: 4px;
        }

            #storeInfoCard .info-row:last-child {
                margin-bottom: 0;
            }

        #storeInfoCard .lbl {
            display: inline; /* ラベルをインラインに戻す */
            margin-right: 4px; /* 「OpenYear:」と値の間は普通の1文字分だけ */
            color: var(--muted);
            /* flex は無効化されるので、flex-basis:80px の影響も消える */
        }

        #storeInfoCard span {
            white-space: normal !important;
            word-break: break-all; /* Store Info が長くても OK */
        }
}
/* ================= PC版：右側の高さ調整＆余白詰め ================= */
@media (min-width:801px) {

    /* 右カラムを縦積み */
    #kpiBand .side-col {
        display: flex;
        flex-direction: column;
        gap: 4px !important; /* ← 左（kpi-left と同じ gap に統一） */
    }

    /* ★ 高さ：ここを下げて左①②の合計高さに合わせる ★ */
    #storeRightPanel .img-wrap {
        height: 200px; /* ← 調整（足りなければ 180px / 170px と下げてOK） */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #storeImage {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* 下側カード（OpenYear/StoreInfo）は高さ変更なし */
    #storeInfoCard {
        margin-top: 0 !important; /* ← gap 4px に統一するので margin は消す */
    }
}
/* StoreInfo のテキストを完全中央揃え */
#storeInfoCard {
    text-align: center !important;
}

    #storeInfoCard .info-row {
        display: block !important; /* 横並びをやめて1ブロック扱いにする */
        width: 100% !important;
        text-align: center !important; /* この行自体を中央に */
    }

    #storeInfoCard span {
        text-align: center !important;
        display: inline-block;
    }
/* ===== 末尾ランキングカード ===== */

#machineNumRankingArea {
    padding: 16px 18px;
}

/************** 末尾ランキング：アイコン用オブジェ **************/
.tailrank-icon {
    width: 1.6em;
    height: 1.6em;
    border-radius: 999px;
    padding: 2px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: radial-gradient(circle at 30% 0, #f97316 0, #facc15 35%, #0f172a 100%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .7), 0 6px 14px rgba(0, 0, 0, .7);
}

.tailrank-icon-svg {
    width: 100%;
    height: 100%;
}

/* バッジ台座（四角） */
.tailrank-badge {
    fill: #020617;
}

/* 棒グラフ3本（真ん中が一番高い感じ） */
.tailrank-bar {
    fill: var(--accent);
}

.tailrank-bar-1 {
    opacity: 1;
}

.tailrank-bar-2 {
    opacity: .8;
}

.tailrank-bar-3 {
    opacity: .6;
}
/************** 末尾ランキング：アイコン用オブジェ **************/

/* 見出し行 */
.tailrank-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

    .tailrank-header .icon {
        font-size: 18px;
    }

    .tailrank-header .title {
        letter-spacing: 0.03em;
    }

/* テーブル周り */
.tailrank-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.tailrank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text);
}

    .tailrank-table thead th {
        padding: 6px 8px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.5);
        font-weight: 500;
        color: var(--muted);
        text-align: right;
        white-space: nowrap;
    }

    /* 1列目(順位)と2列目(末尾)だけ左寄せ */
    .tailrank-table th:first-child,
    .tailrank-table td:first-child,
    .tailrank-table th:nth-child(2),
    .tailrank-table td:nth-child(2) {
        text-align: left;
    }

    .tailrank-table tbody td {
        padding: 6px 8px;
        border-bottom: 1px solid rgba(30, 41, 59, 0.8);
        text-align: right;
        white-space: nowrap;
    }

    .tailrank-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* ホバー行 */
    .tailrank-table tbody tr:hover {
        background: rgba(15, 23, 42, 0.75);
    }

    /* プラス差枚 / マイナス差枚の色（後でJSで class 付ければOK） */
    .tailrank-table .pos {
        color: #4ade80; /* 緑 */
    }

    .tailrank-table .neg {
        color: #f87171; /* 赤 */
    }
/* =========================================
   PC版だけ：タイトルを1段下げて左端を揃える
   （モバイルには一切影響させない）
   ========================================= */
@media (min-width:801px) {

    /* SLOT TOP(固定)の高さぶん、ページ全体を下げる */
    body {
        padding-top: 56px; /* 48〜64で好み調整OK。まず56推奨 */
    }

    /* タイトル：SLOT TOPと同じ段に見えないようにし、左端も揃える */
    h3 {
        margin-top: 0; /* bodyで下げたのでここは0でOK */
        margin-bottom: 10px;
        max-width: 1280px;
        padding-left: 12px; /* dashboard-1280 と同じ */
        padding-right: 12px; /* dashboard-1280 と同じ */
        box-sizing: border-box;
    }

    /* 念のため：dashboard側もbox-sizing統一（既にあるけど保険） */
    .dashboard-1280 {
        box-sizing: border-box;
    }
}