/* =========================================
   1. デザイン変数・基本設定
   ========================================= */
:root {
    --primary: #2c3e50;
    --accent: #27ae60;
    --accent-blue: #2980b9;
    --accent-orange: #e67e22;
    --accent-red: #e74c3c;
    --accent-yellow: #f1c40f;
    --bg-light: #f4f7f6;
    --text-muted: #7f8c8d;
    /* 馬番エリア（ダークモード） */
    --bg-dark-slot: #1a1a1a;
    --bg-card: #2c2c2e;
    --text-card: #efeff4;
    --border-card: #3a3a3c;
}

/* =========================================
   Header Design
   ========================================= */
.app-header {
    background: linear-gradient(135deg, var(--primary) 0%, #1a252f 100%);
    color: white;
    padding: 12px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: relative;
    z-index: 110;
}

.header-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content h1 {
    margin: 0;
    font-size: 1.1rem; /* 少し大きく */
    font-weight: 900;  /* 極太にしてインパクトを出す */
    letter-spacing: -0.5px;
}

.header-content h1 a {
    text-decoration: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    /* 文字に微妙な立体感（ドロップシャドウ）をつける */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.header-content h1 a:hover {
    color: var(--accent-yellow);
    transform: translateY(-1px);
}

/* ヘッダー内の右側要素をまとめるコンテナ */
.header-controls {
    display: flex;
    align-items: center; /* 垂直方向の中央 */
    gap: 15px;           /* ボタン類の間隔 */
}

/* 読み上げボタンとクレジットを縦に並べるグループ */
.voice-control-group {
    display: flex;
    flex-direction: column; /* 👈 これでボタンとクレジットを縦に積む */
    align-items: center;    /* 中央寄せ */
    gap: 2px;               /* ボタンと文字の隙間を微調整 */
}

/* クレジットの文字スタイル */
.voice-credit {
    font-size: 0.6rem; 
    line-height: 1;         /* 行間を詰めてコンパクトに */
    color: rgba(255, 255, 255, 0.5); 
    font-family: sans-serif;
    letter-spacing: 0.3px;
    white-space: nowrap;    /* 改行させない */
}

/* ボタンがONの時のクレジット色変化（隣接セレクタ） */
.voice-toggle-btn.on + .voice-credit {
    color: #a6d300; 
    font-weight: bold;
    opacity: 1;
}

/* 読み上げボタンの基本スタイル */
.voice-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

/* OFFの状態（初期状態） */
.voice-toggle-btn.off {
    opacity: 0.6;
    filter: grayscale(0.5); /* 👈 ちょっと色味を抑える */
}

/* ONの状態：ずんだもんカラー（黄緑）にする */
.voice-toggle-btn.on {
    background: #a6d300;
    color: #1a252f;
    border-color: #fff;
    box-shadow: 0 0 10px rgba(166, 211, 0, 0.6);
    animation: pulse-green 2s infinite; /* 👈 呼吸するように光らせる */
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(166, 211, 0, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(166, 211, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(166, 211, 0, 0); }
}

.voice-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.voice-toggle-btn.on:hover {
    background: #b8e600;
}

/* アイコンの微調整 */
.voice-toggle-btn .icon {
    font-size: 0.9rem;
}

/* ONの時のアイコンアニメーション */
.voice-toggle-btn.on .icon {
    display: inline-block;
    animation: ring-bell 0.5s ease infinite;
}

@keyframes ring-bell {
    0% { transform: rotate(0); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0); }
}


/* =========================================
   整理後の全体レイアウト微調整
   ========================================= */
body { 
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    margin: 0; 
    background: var(--bg-light); 
    color: #333; 
}

/* ヘッダーがある分、タブの固定位置を調整（必要に応じて） */
.ticket-tabs {
    top: 0; /* ヘッダーをスクロールアウトさせる場合は0、残す場合はヘッダー高さを指定 */
}

body { font-family: sans-serif; margin: 0; background: var(--bg-light); color: #333; line-height: 1.6; }
.bet-app-container { max-width: 600px; margin: 0 auto; padding-bottom: 180px; }

/* =========================================
   2. ヘッダー・タブ・トグル
   ========================================= */
.ticket-tabs { 
    display: flex; overflow-x: auto; background: var(--primary); 
    padding: 5px; gap: 5px; position: sticky; top: 0; z-index: 100; 
}
.tab-btn { 
    white-space: nowrap; padding: 10px 15px; border: none; background: #34495e; 
    color: #bdc3c7; border-radius: 4px; cursor: pointer; transition: 0.2s; 
}
.tab-btn.active { background: var(--accent); color: white; font-weight: bold; }

.ticket-section { display: none; padding: 15px; }
.ticket-section.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.type-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; min-height: 50px; }
.type-header h2 { margin: 0; font-size: 1.2rem; color: var(--primary); border-left: 4px solid var(--accent); padding-left: 10px; }

/* トグルスイッチ */
.toggle-switch { 
    position: relative; display: flex; width: 180px; height: 40px; 
    background: #dee2e6; border-radius: 20px; padding: 2px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
}
.toggle-switch input { display: none; }
.toggle-switch label { flex: 1; z-index: 2; line-height: 40px; text-align: center; cursor: pointer; font-weight: bold; color: #495057; font-size: 0.85rem; }
.switch-selection { 
    position: absolute; top: 2px; left: 2px; width: calc(50% - 2px); height: calc(100% - 4px); 
    background: var(--accent); border-radius: 18px; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1; 
}
#fuku:checked ~ .switch-selection { transform: translateX(100%); background: var(--accent-blue); }
#wide:checked ~ .switch-selection { transform: translateX(100%); background: var(--accent-orange); }


/* =========================================
   追加：メニューエリアのスタイル（幅調整版）
   ========================================= */
.race-menu-nav {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    padding: 10px 15px; /* コンテナのパディングと合わせる */
    margin-bottom: 5px;
}

.menu-tabs {
    display: grid;
    /* 4列で、各列の幅を均等にする */
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}

.menu-tab-btn {
    /*flex: 1;          2つのボタンを均等幅にする（お好みで） */
    width: 100%;
    min-width: 80px;
    padding: 10px 5px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.menu-tab-btn:hover {
    background-color: #f1f3f5;
    border-color: #bbb;
}

/* アクティブ（選択中）の状態：既存の --accent (緑) に合わせる場合 */
.menu-tab-btn.active {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.2);
}

/* 無効なタブ：薄くして、マウスポインタを「禁止」にするのだ */
.tab-btn.tab-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    filter: grayscale(1);
}

/* ホバー時のエフェクトも無効化するのだ */
.tab-btn.tab-disabled:hover {
    background: inherit !important;
    color: inherit !important;
}
/* =========================================
   3. 馬券構成（方式・詳細オプション）
   ========================================= */
.method-group { 
    background: white; padding: 15px; border-radius: 8px; margin-bottom: 15px; 
    display: flex; flex-wrap: wrap; gap: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

/* 詳細オプションエリア（3連単流し等） */
.sub-options { 
    display: block !important; background: #eef7ff; border-left: 5px solid var(--accent-blue);
    padding: 15px; border-radius: 8px; margin-bottom: 15px; 
}

.nagashi-pattern-selector { width: 100%; }

.option-title { 
    font-size: 0.9rem; font-weight: bold; color: var(--primary); 
    margin: 15px 0 8px 0; display: block; padding-bottom: 4px;
    border-bottom: 1px solid rgba(41, 128, 185, 0.2);
}

/* パターンボタン・グリッド */
.button-group { 
    display: grid !important; grid-template-columns: repeat(3, 1fr); 
    gap: 8px; width: 100%; margin-bottom: 12px; box-sizing: border-box;
}

.pattern-btn {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #ddd; min-height: 44px;
    padding: 4px; text-align: center; border-radius: 6px; font-size: 0.85rem;
    cursor: pointer; transition: 0.2s; color: #333;
}
.pattern-btn:has(input:checked) { 
    background: var(--accent-blue); color: #fff; border-color: #2980b9; font-weight: bold; 
}
.pattern-btn input { display: none; }

/* マルチ選択 */
.multi-select { 
    width: 100%; padding-top: 15px; border-top: 1px dashed #ccc; 
    margin-top: 15px; display: block; 
}
.multi-btn-label {
    display: flex; align-items: center; justify-content: center;
    background: #f8f9fa; border: 2px solid var(--accent-red);
    color: var(--accent-red); padding: 12px; border-radius: 8px;
    font-weight: bold; cursor: pointer; transition: 0.2s;
}
.multi-btn-label:has(input:checked) { background: var(--accent-red); color: #fff; }
.multi-btn-label input { display: none; }

/* =========================================
   4. モダン出馬表（白ベース・高視認性デザイン）
   ========================================= */
.slot { 
    background: #ffffff;           /* 白背景に変更 */
    padding: 15px; 
    border-radius: 12px; 
    margin-bottom: 15px; 
    border: 1px solid #e0e0e0;     /* 薄いグレーの線 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 軽い影で浮かす */
    transition: 0.3s ease;
}

/* マルチON時の強調：白背景に映える赤い太枠 */
.ticket-section:has(#multi-check:checked) .slot {
    background-color: #fff5f5;      /* ほんのり赤みのある背景 */
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
}

.slot-label { 
    font-size: 0.85rem; 
    font-weight: bold; 
    color: var(--primary);         /* 文字色を濃くして視認性UP */
    margin-bottom: 12px; 
    padding-left: 4px; 
}

.horse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* 馬番ボタン：白背景に合わせたカードスタイル */
.horse-grid button {
    display: flex; 
    align-items: center; 
    padding: 0 10px; 
    height: 52px;
    background: #ffffff;           /* ボタンも白 */
    color: #333;                  /* 文字は濃いグレー */
    border: 1px solid #dcdcdc;
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    text-align: left;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.horse-grid button:hover {
    background: #f9f9f9;
    border-color: #bbb;
}

.horse-grid button:active { transform: scale(0.97); }

/* 選択時の状態：アクセントカラーを黄色から「緑」または「青」へ（白背景に映える色） */
.horse-grid button.selected { 
    background: #eafff2;           /* 薄い緑の背景 */
    border-color: var(--accent);   /* 鮮やかな緑の枠 */
    border-width: 2px;
    color: var(--accent);
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.2); 
}

.horse-grid button.disabled-bracket { 
    opacity: 0.3; 
    background-color: #eee; 
    border-style: dashed;
}

/* 馬番・枠番（白背景でも見やすいよう影を微調整） */
.horse-num-box {
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 32px; 
    height: 32px; 
    font-size: 1.1rem; 
    font-weight: 800;
    border-radius: 5px; 
    margin-right: 12px; 
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 番号をくっきりさせる */
}

/* 枠番色設定（変更なし） */
.waku-1 { background-color: #ffffff; color: #000; border: 1px solid #ccc; } /* 白枠は境界線を追加 */
.waku-2 { background-color: #000000; color: #fff; }
.waku-3 { background-color: #ff3b30; color: #fff; }
.waku-4 { background-color: #007aff; color: #fff; }
.waku-5 { background-color: #ffcc00; color: #fff; }
.waku-6 { background-color: #34c759; color: #fff; }
.waku-7 { background-color: #ff9500; color: #fff; }
.waku-8 { background-color: #ff2d55; color: #fff; }

.horse-name-text { font-size: 0.95rem; font-weight: 600; }

/* 枠連セクション全体の調整 */
#section-wakuren .horse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列に固定 */
    gap: 10px;
    max-width: 500px; /* 横幅を少し広げて「2頭」が横に並ぶスペースを確保 */
    margin: 20px auto; /* 中央寄せ */
}

/* ボタン内のテキストが折り返さないように強制する */
#section-wakuren .horse-name-text {
    white-space: nowrap; /* 改行を禁止するのだ！ */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* 枠連ボタンの最小幅を少し持たせる */
#section-wakuren .horse-grid button {
    min-width: 80px; 
    padding: 10px 5px;
}
/* =========================================
   5. フッター
   ========================================= */
.bet-footer {
    position: fixed;
    bottom: 0;
    /* --- ここから修正 --- */
    left: 50%;                 /* 一旦画面の真ん中に持っていく */
    transform: translateX(-50%); /* 自分の幅の半分だけ左に戻す（これで中央揃え） */
    width: 100%;               /* 基本は100% */
    max-width: 600px;          /* 親の .bet-app-container と同じ値に制限！ */
    /* -------------------- */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;    /* パディングが幅を突き破らないように */
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.footer-top, 
.footer-actions {
    background: var(--primary); /* 濃紺で統一 */
    padding: 8px 15px;
    display: flex;
    align-items: center;
}

.footer-top {
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 下段：左側に並べる */
.footer-actions {
    background: var(--primary); /* 上段と同じ濃紺 */
    padding: 10px 15px 12px;    /* 下側に少し余裕を持たせる */
    display: flex;
    justify-content: flex-end;  /* 👈 ここを右寄せに変更！ */
    gap: 12px;                  /* ボタン間の余白 */
}

.price-input-container {
    display: flex;
    align-items: center;
    background: #34495e;
    padding: 2px 8px;
    border-radius: 4px;
}

.unit-setting {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unit-label {
    color: rgba(255,255,255,0.5);
    font-weight: bold;
}

.total-summary {
    font-size: 1rem;
    color: white;
}

#unit-price-input {
    width: 45px;
    border: none;
    background: transparent;
    color: var(--accent-yellow);
    font-size: 1.1rem;
    font-weight: bold;
    text-align: right;
    outline: none;
}

.fixed-zeros-label { color: var(--accent-yellow); font-weight: bold; font-size: 1.2rem; }

#total-count {
    color: var(--accent);
    font-size: 1.4rem;
    margin-right: 2px;
    margin-left: 20px;
}

.footer-actions button {
    flex: initial;              /* 幅を自動に */
    padding: 0 20px;
    height: 44px;               /* 押しやすい高さ */
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
}

.footer-actions button:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.primary-btn {
    background: var(--accent);
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.secondary-btn {
    background: var(--accent-red);
    color: white;
    border: none;
}

.hidden { display: none !important; }


/* =========================================
   6. 買い目確認モーダル (Modal Design)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 背景を暗くして集中させるのだ */
    backdrop-filter: blur(4px);    /* 背景をぼかすとオシャレ度UPなのだ */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity 0.3s ease;
}

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ヘッダー */
.modal-header {
    background: var(--primary);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 { margin: 0; font-size: 1.1rem; }

.close-x {
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
}

/* ボディ */
.modal-body {
    padding: 20px;
    overflow-y: auto; /* 買い目が多いときはここがスクロールするのだ */
    background: var(--bg-light);
}

.modal-race-info {
    margin-bottom: 15px;
    text-align: center;
}

#modal-race-name {
    display: block;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary);
}

#modal-ticket-type-label {
    display: inline-block;
    background: var(--accent-blue);
    color: white;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-top: 5px;
}

.modal-stats {
    background: white;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.modal-stats strong {
    font-size: 1.3rem;
    color: var(--accent-red);
}

/* 買い目リストのグリッド */
.ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.ticket-badge {
    background: white;
    border: 1px solid #dcdcdc;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* フッター */
.modal-footer {
    padding: 15px 20px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
}

.modal-footer .secondary-btn {
    width: 100%;
    max-width: 200px;
    padding: 12px;
    background: var(--primary);
    border-radius: 25px; /* 丸みのあるボタンでモダンに */
}

/* 非表示設定 */
.hidden { display: none !important; }

.app-credits {
    padding: 20px 15px 60px; /* 固定フッターに隠れないよう下の余白を多めに */
    text-align: center;
    color: #555;              /* 文字色を少し濃くして読みやすく */
    font-size: 0.8rem;
    border-top: 1px solid #ddd;
    background-color: #f8f9fa;
    line-height: 1.6;
}

.app-credits strong {
    color: var(--accent-red); /* 「注意」を赤くして目立たせる */
}

.license-note {
    margin-top: 10px;
    font-size: 0.75rem;
    color: #777;
    text-align: left;         /* 長文の免責は左寄せにすると読みやすい */
    display: inline-block;    /* 中央寄せの中の左寄せを実現 */
    max-width: 500px;
}

.footer-mid {
    background: #fffef0; 
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.ticket-preview-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 65px;
}

.ticket-preview-area::-webkit-scrollbar { display: none; } /* Chrome/Safari用 */

.preview-slot {
    display: grid;
    gap: 2px;
    align-items: center;
    justify-items: center;
    min-height: 58px;
}

.preview-hidden {
    display: none !important;
}

.preview-sep {
    color: #ccc;
    font-size: 1.4rem;
    margin: 0 10px;
}

.amount-display {
    font-size: 0.95rem;
    color: #fff;
}

#total-money {
    font-size: 1.6rem;
    color: var(--accent-yellow); /* 合計金額は一番目立つ色に！ */
    margin: 0 4px;
}

/* プレビュー内の小さな馬番バッジ（前回のCSSを再利用） */
.s-num {
    background: #333;
    color: white;
    font-size: 0.75rem; /* 数字がはっきり読めるサイズ */
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.preview-empty {
    color: #999;
    font-size: 0.8rem;
}

/* マルチの時のセパレーター演出 */
.is-multi .preview-sep {
    color: #e67e22; /* オレンジ色で強調 */
    font-size: 1.4rem;
}

/* 「軸」のデザイン：流しで1頭の時だけ発動 */
.preview-slot.is-anchor {
    grid-template-columns: 1fr;
    width: 34px;
    border: 1px dashed #ccc; /* 軸馬を囲む点線枠 */
    border-radius: 4px;
    background: #fff;
}
.preview-slot.is-anchor .s-num {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
    background: #e67e22; /* 軸はオレンジで目立たせる！ */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 通常の複数表示（単勝1頭の時もこちらが適用される） */
.preview-slot.is-multiple {
    grid-template-rows: repeat(3, 18px);
    grid-auto-flow: column;
    grid-auto-columns: 18px;
    /* 単勝1頭などの時は、軸デザインにならず普通のサイズで表示される */
}

/* 通常時（単勝やフォーメーション）で1頭の時、寂しくないように中央寄せ */
.preview-slot.is-multiple:has(.s-num:nth-child(1):last-child) {
    grid-template-columns: 1fr;
    width: 24px;
}

/* 1頭の時：スロットの中央に配置し、少し視認性を上げる */
.preview-slot.is-single {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
}
.preview-slot.is-single .s-num {
    width: 20px;
    height: 20px;
    font-size: 0.85rem;
    font-weight: bold;
}

/* 複数表示（is-multi）の共通設定 */
.preview-slot.is-multi {
    display: grid;
    grid-template-rows: repeat(3, 18px); /* 3段固定 */
    grid-auto-flow: row;                /* 横に向かって埋める */
    gap: 2px;
    padding: 2px;
}

/* 9頭まで：3列 */
.preview-slot.grid-3x3 {
    grid-template-columns: repeat(3, 18px);
    width: 58px; /* (18*3) + gap */
}

/* 12頭まで：4列 */
.preview-slot.grid-4x3 {
    grid-template-columns: repeat(4, 18px);
    width: 78px;
}

/* 18頭まで（最大）：6列 */
.preview-slot.grid-6x3 {
    grid-template-columns: repeat(6, 18px);
    width: 118px;
}

/* ボックス時は常に最大幅（6列）でOK */
.mode-box .preview-slot {
    grid-template-columns: repeat(6, 18px);
    grid-template-rows: repeat(3, 18px);
    width: auto;
}

.preview-slot.is-multi .s-num {
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
}

/* ボックス時：広めのグリッド（6×3列固定） */
.mode-box .preview-slot {
    display: grid;
    grid-template-columns: repeat(6, 18px);
    grid-template-rows: repeat(3, 18px);
    grid-auto-flow: row; /* ボックスは左から右へ */
    width: auto;
}