/* ========================================
   Hirolia - 客側画面CSS
   スマホ最適化デザイン
======================================== */

/* ========== オフラインインジケーター ========== */
.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4);
}

.offline-indicator.hidden {
    display: none;
}

.offline-indicator .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ========== レイアウト ========== */
body.customer {
    position: fixed;
    width: 100%;
    height: 100vh;        /* フォールバック1: 旧ブラウザ */
    height: 100dvh;       /* フォールバック2: dvh対応ブラウザ（Safari 15.4+, Chrome 108+） */
    height: var(--app-height, 100dvh); /* ベスト: JSがwindow.innerHeightを反映 */
    overflow: hidden;
    background-color: var(--bg-secondary);
    -webkit-tap-highlight-color: transparent;
}

/* モーダル表示時に背景のスクロールを完全に無効化 */
body.customer.modal-open {
    overflow: hidden;
}

body.customer.modal-open .main-content {
    overflow: hidden;
    touch-action: none;
}

body.customer .main-content {
    position: absolute;
    top: var(--header-h, 8vh);    /* JSがヘッダー実寸をセット。フォールバックは8vh */
    bottom: var(--footer-h, 10vh); /* JSがフッター実寸をセット。フォールバックは10vh */
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    padding: 0;
    padding-top: 60px; /* ナンおかわりボタンの高さ分の余白 */
    padding-bottom: 80px; /* 最下部の商品までスクロールできるように余白を追加 */
}

.customer-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-header);
    height: 8vh; /* %ベースに変更 */
    min-height: 56px; /* 最小の高さを確保 */
    max-height: 70px; /* 最大の高さを制限 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.customer-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
}

/* 店舗アイコン（プレースホルダー） */
.store-icon-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%; /* 丸く */
    background: linear-gradient(135deg, var(--color-primary) 0%, #D35400 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: default; /* クリックできないことを示す */
    user-select: none;
}

.store-icon-placeholder .material-symbols-outlined {
    font-size: 26px;
    color: var(--text-white);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    pointer-events: none;
}

/* 卓番号 */
.table-number-display {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 3px 6px;
    background-color: rgba(230, 126, 34, 0.08);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-primary);
    white-space: nowrap;
    user-select: none;
    cursor: default; /* クリックできないことを示す */
}

/* ページタイトル（中央） */
.customer-header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.5px;
    user-select: none; /* 選択できないように */
    cursor: default;
    /* 左右要素との重なりを防ぐ（左: icon+卓番~110px、右: ボタン2つ~100px） */
    max-width: clamp(120px, calc(100% - 220px), 280px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.customer-header-actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-shrink: 0;
}

/* ヘッダーアクションボタン（呼出・言語共通スタイル） */
.header-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.header-action-btn .material-symbols-outlined {
    font-size: 22px;
    color: var(--text-secondary);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.header-action-btn:hover {
    background-color: rgba(230, 126, 34, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-action-btn:hover .material-symbols-outlined {
    color: var(--color-primary);
}

.header-action-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 言語セレクター */
.language-selector {
    position: relative;
    display: inline-block;
    z-index: 10002;
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-xs);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 130px;
    z-index: 100000; /* モーダル（10000）、ヘッダー（1000）、カテゴリタブ（100）より確実に高く */
}

.language-option {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.language-option:hover {
    background-color: var(--bg-secondary);
}

.language-option.active {
    color: var(--color-primary);
    font-weight: 600;
    background-color: rgba(230, 126, 34, 0.1);
}

.language-option:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.language-option:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* フッタータブバー */
.customer-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-around;
    padding: var(--spacing-sm) 0;
    z-index: var(--z-footer);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    padding-bottom: env(safe-area-inset-bottom);
    height: 10vh; /* %ベースに変更 */
    min-height: 65px; /* 最小の高さを確保 */
    max-height: 80px; /* 最大の高さを制限 */
}

.footer-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%; /* フッターの高さに合わせる */
    padding: 6px 4px;
    color: var(--text-secondary);
    position: relative;
    transition: all var(--transition-fast);
    background-color: transparent;
    border: none;
    cursor: pointer; /* クリッカブルであることを明示 */
}

.footer-tab:hover:not(.active) {
    background-color: rgba(230, 126, 34, 0.05);
    color: var(--color-primary);
}

.footer-tab.active {
    color: var(--color-primary);
    background: linear-gradient(to top, rgba(230, 126, 34, 0.08), transparent);
    cursor: default; /* アクティブな状態では通常のカーソル */
}

.footer-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.footer-tab:active:not(.active) {
    background-color: var(--bg-secondary);
    transform: scale(0.98);
}

.footer-tab-icon {
    font-size: 26px;
    margin-bottom: 2px;
    transition: transform var(--transition-fast);
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.footer-tab.active .footer-tab-icon {
    transform: scale(1.1);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.footer-tab-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.footer-tab.active .footer-tab-label {
    font-weight: 700;
}

.footer-tab-badge {
    position: absolute;
    top: 6%;
    right: 8%;
    background-color: var(--color-danger);
    color: var(--text-white);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    z-index: 10;
}

.footer-history-total {
    font-size: clamp(12px, 3vw, 15px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    white-space: nowrap;
}

.footer-tab.active .footer-history-total {
    color: var(--color-primary);
}

/* カートタブ（価格表示用） */
.footer-tab-cart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.footer-tab-icon-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
}

.footer-cart-total {
    font-size: clamp(12px, 3vw, 15px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    white-space: nowrap;
}

.footer-tab.active .footer-cart-total {
    color: var(--color-primary);
}

/* 初期設定画面 */
.setup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;        /* フォールバック1 */
    height: 100dvh;       /* フォールバック2 */
    height: var(--app-height, 100dvh); /* ベスト */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: linear-gradient(135deg, #E67E22 0%, #D35400 100%);
}

.setup-card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xxl) var(--spacing-xl);
    box-shadow: var(--shadow-xl);
}

.setup-logo {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

.setup-logo-text {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #E67E22, #D35400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--spacing-sm);
}

/* メニューラッパー：フルハイトのFlexコンテナ */
.menu-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* スクロール可能エリア */
.menu-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* スワイプコンテナ */
.menu-swipe-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    touch-action: pan-y pinch-zoom;
}

.menu-swipe-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.menu-swipe-track.swiping {
    transition: none;
}

.menu-swipe-panel {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.menu-swipe-panel .menu-grid {
    min-height: auto;
    padding-bottom: 80px;
}

/* カテゴリタブ */
.menu-categories {
    display: flex;
    gap: var(--spacing-sm);
    padding: 8px var(--spacing-md);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: var(--bg-primary);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 998;
    border-bottom: 2px solid var(--border-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-height: 48px;
    flex-shrink: 0; /* スクロール領域から除外 */
    scroll-snap-type: x proximity; /* スクロールスナップを有効化 */
}

.menu-categories::-webkit-scrollbar {
    display: none;
}

.category-btn {
    flex-shrink: 0;
    padding: 8px var(--spacing-lg);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-radius: 20px;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--border-light);
    min-height: 40px;
    cursor: pointer; /* クリッカブルであることを明示 */
    scroll-snap-align: center; /* スクロール時に中央に配置 */
    position: relative;
}

.category-btn:hover:not(.active) {
    background-color: rgba(230, 126, 34, 0.05);
    border-color: var(--color-primary);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.category-btn.active {
    color: var(--text-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
    cursor: default; /* アクティブな状態では通常のカーソル */
    transform: scale(1.05);
}

.category-btn.active::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: linear-gradient(45deg, rgba(230, 126, 34, 0.3), rgba(230, 126, 34, 0.1));
    z-index: -1;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.1);
    }
}

/* メニュー一覧（ここをグリッド形式に変更） */
.menu-grid {
    display: grid;
    /* 1fr から 2列に変更 */
    grid-template-columns: repeat(2, 1fr);
    /* 間隔を調整 */
    gap: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    /* 最下部までスクロールできるように下部のパディングを追加 */
    padding-bottom: 120px;
    /* Chromeでのスクロール問題に対応 */
    min-height: calc(100vh - 8vh - 10vh - 52px); /* ヘッダー - フッター - カテゴリタブの高さを引く */
}

.menu-card {
    position: relative;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-fast);
    display: flex;
    /* 縦積みに変更 */
    flex-direction: column;
    cursor: pointer; /* クリッカブルであることを明示 */
    border: 1px solid transparent;
    /* height: 100% を削除して、コンテンツに応じた高さにする */
}

.menu-card:hover:not(.sold-out) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.menu-card:active:not(.sold-out) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.menu-card-image {
    /* 幅をいっぱいに、高さを固定 */
    width: 100%;
    height: 110px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
}

.menu-card.no-image {
    justify-content: center;
    min-height: 80px;
}

.menu-card.no-image .menu-card-content {
    padding: 12px 10px;
}

/* ランクバッジがある場合は左揃え、ない場合は中央揃え */
.menu-card.no-image .menu-card-content:has(.menu-rank-badge--inline) {
    align-items: flex-start;
}
.menu-card.no-image .menu-card-content:not(:has(.menu-rank-badge--inline)) {
    justify-content: center;
}

.menu-card-content {
    /* パディングを調整 */
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.menu-card-name {
    /* フォントサイズを少し調整 */
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-card-description {
    /* グリッド表示では説明文を隠す（スペース確保のため） */
    display: none;
}

.menu-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.menu-card-price {
    font-size: 16px; /* 少し小さく調整 */
    font-weight: 800;
    color: var(--color-primary);
}

.menu-card-badge {
    /* バッジを画像の上に配置 */
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-secondary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-card.sold-out {
    cursor: not-allowed;
    position: relative;
    border-color: var(--border-light) !important;
}

.menu-card.sold-out:hover {
    transform: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.menu-card.sold-out .menu-card-image {
    filter: grayscale(100%);
    opacity: 0.5;
}

.menu-card.sold-out .menu-card-name {
    opacity: 0.5;
}

.sold-out-badge {
    display: inline-block;
    background-color: var(--color-danger);
    color: var(--text-white);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* ===== セット内カテゴリー: 折りたたみボタン ===== */
.set-cat-collapsible-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary, #f5f5f5);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    margin-bottom: 4px;
}

/* TOP3プレビューエリア（トグル展開前から常時表示） */
.set-items-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}

/* プレビューエリアの直後にある「すべて見る」ボタン */
.set-items-preview + .set-cat-collapsible-btn {
    margin-top: 4px;
}

.set-cat-collapsible-btn:active {
    opacity: 0.8;
}

.set-cat-arrow {
    margin-left: auto;
    font-size: 11px;
    flex-shrink: 0;
}

/* 折りたたみ状態（デフォルトで閉じている） */
.set-cat-collapsed {
    display: none;
}

/* ===== セット内ランキング区切り線 ===== */
.set-item-rank-separator {
    margin: 6px 0;
    border: none;
    border-top: 1px dashed #ccc;
}

/* ===== セット内クラウンアイコン ===== */
/* ===== メインメニューカード ランクバッジ ===== */
.menu-rank-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px 3px 4px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    box-shadow: 0 1px 5px rgba(0,0,0,0.28);
    pointer-events: none;
    white-space: nowrap;
}
.menu-rank-badge .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
    line-height: 1;
}
/* 画像なしカード用: absoluteではなくインライン */
.menu-rank-badge--inline {
    position: static;
    align-self: flex-start;
    margin-bottom: 5px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.08);
}
.menu-rank-badge.rank-1 { background: #F4B300; }
.menu-rank-badge.rank-2 { background: #9E9E9E; }
.menu-rank-badge.rank-3 { background: #8D6E63; }

/* ===== 食べ放題対象バッジ ===== */
.menu-buffet-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 3px 7px;
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 5px rgba(156,39,176,0.4);
    pointer-events: none;
    white-space: nowrap;
}
.menu-buffet-tag i {
    color: white;
    font-size: 9px;
}
.menu-buffet-tag span {
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ===== セットアイテム用ランクバッジ ===== */
.set-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px 6px 2px 3px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    margin-right: 4px;
    white-space: nowrap;
}
.set-rank-badge .material-symbols-outlined {
    font-size: 13px;
    font-variation-settings: 'FILL' 1;
    line-height: 1;
}
.set-rank-badge.rank-1 { background: #F4B300; }
.set-rank-badge.rank-2 { background: #9E9E9E; }
.set-rank-badge.rank-3 { background: #8D6E63; }

.set-item-option.has-crown,
.set-item.has-crown {
    background: linear-gradient(90deg, #fffde7 0%, transparent 60%);
}

/* セット内品切れ商品 */
.set-item-option.sold-out {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.set-item-option.sold-out .set-item-name {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.3);
}

.set-item-option.sold-out .sold-out-badge {
    opacity: 1;
}


/* 折りたたみセクション */
.collapsible-category {
    width: 100%;
}

.collapsible-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary, #f5f5f5);
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.collapsible-arrow {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 9999px;
}

.collapsible-content.collapsed {
    max-height: 0;
}

/* 固定セットアイテム（1つしかないカテゴリ） */
.set-item-fixed {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px;
    background: #f8f8f8;
    border-radius: var(--radius-md);
    border: 1px dashed #ccc;
}

.set-item-fixed img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.set-item-fixed .set-item-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.set-item-fixed.sold-out {
    opacity: 0.5;
}

.set-item-fixed.sold-out .set-item-name {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.3);
}

/* カート */
.cart-container {
    padding: var(--spacing-sm) var(--spacing-md);
}

.cart-empty {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    position: sticky;
    bottom: var(--spacing-sm);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.cart-total-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
}

/* レスポンシブ: タブレット以上 */
@media (min-width: 768px) {
    body.customer {
        max-width: 500px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .customer-header {
        max-width: 500px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        height: 8vh;
        min-height: 60px;
        max-height: 70px;
    }

    .customer-footer {
        height: 10vh;
        min-height: 70px;
        max-height: 80px;
    }

    /* PCでも2列のままにする（grid-template-columns: 1fr を上書きしない） */
    .menu-grid {
        /* タブレット以上でも2列を維持したい場合はここをコメントアウトまたは repeat(2, 1fr) に */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   レスポンシブ追加ブレイクポイント
   ============================================================ */

/* ── 360px以下: iPhone 12 mini / 旧Android / 小型Androidなど ── */
@media (max-width: 360px) {
    /* メニューグリッドを1列に */
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 6px 12px;
    }
    .menu-card-image {
        height: 140px; /* 1列になるので横幅が広い分、高さを増やす */
    }
    .menu-card-name {
        font-size: 13px;
    }
    .menu-card-price {
        font-size: 14px;
    }

    /* ヘッダー */
    .customer-header-title {
        font-size: 16px;
    }
    .table-number-display {
        font-size: 11px;
        padding: 2px 4px;
    }

    /* カテゴリタブ */
    .category-btn {
        font-size: 13px;
        padding: 6px 12px;
        min-height: 36px;
    }

    /* フッタータブ */
    .footer-tab-label {
        font-size: 10px;
    }
    .footer-tab-icon {
        font-size: 22px;
    }
    .footer-cart-total {
        font-size: clamp(10px, 2.5vw, 13px);
    }

    /* セットアップ画面 */
    .setup-card {
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

/* ── 390px以下: iPhone SE(3rd)/13/14・小さめAndroid ─────── */
@media (max-width: 390px) {
    /* 商品詳細モーダルをボトムシート形式に変更（画面全体で表示） */
    .detail-modal-content:not(.fullscreen) {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        max-height: 92vh;
        max-height: 92dvh;
    }

    /* 数量セレクター */
    .quantity-controls {
        gap: var(--spacing-md);
    }
    .quantity-value {
        font-size: 20px;
        min-width: 40px;
    }
}

/* ── 横向き (landscape): 画面高さが500px以下の場合 ─────── */
@media (max-height: 500px) and (orientation: landscape) {
    /* ヘッダー・フッターを薄くしてコンテンツ領域を最大化 */
    .customer-header {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    .customer-footer {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }
    body.customer .main-content {
        top: 48px !important;
        bottom: 52px !important;
    }

    /* 横向きでは3列グリッドに */
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 4px 12px;
        gap: 8px;
    }
    .menu-card-image {
        height: 80px;
    }
    .menu-card-content {
        padding: 6px;
    }
    .menu-card-name {
        font-size: 12px;
    }
    .menu-card-price {
        font-size: 13px;
    }

    /* フッタータブのパディング削減 */
    .footer-tab {
        padding: 4px 2px;
    }
    .footer-tab-icon {
        font-size: 20px;
        margin-bottom: 0;
    }
    .footer-tab-label {
        font-size: 10px;
    }
}

/* ========== 商品詳細ポップアップモーダル ========== */
.detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* ヘッダー(100)とフッター(100)より高く */
    /* 背景スクロール防止は body.modal-open .main-content { touch-action: none } で対応 */
}

.detail-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
    /* タッチイベントをキャプチャして背景のスクロールを防ぐ */
    touch-action: none;
}

.detail-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 600px;
    /* ヘッダーとフッターを%で避けるため高さを調整 */
    max-height: 85vh; /* 画面の85%を使用 */
    background-color: var(--bg-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 2;
    /* モーダル内のスクロールを有効化 */
    touch-action: auto;
}

/* 全画面モーダル */
.detail-modal.fullscreen {
    background-color: var(--bg-primary);
}

.detail-modal-content.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
}

.detail-modal.fullscreen .detail-scroll {
    padding: var(--spacing-lg);
    padding-bottom: 100px; /* フッターボタンの高さ分 */
}

.detail-modal-header {
    /* ヘッダーを固定して閉じるボタンを常に表示 */
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-md);
    background: linear-gradient(to bottom, var(--bg-primary) 80%, transparent);
    pointer-events: none;
}

.detail-modal-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-round);
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--text-white);
    font-size: 24px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    margin-left: auto; /* 右側に明示的に配置 */
}

.detail-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.detail-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--spacing-lg) var(--spacing-xl);
    /* ヘッダーと被らないように上部のパディングを削除 */
    /* スクロール領域を確保 */
    min-height: 0;
    /* モーダル内のスクロールを有効化 */
    touch-action: pan-y;
}

.detail-content {
    padding: var(--spacing-md) 0 0;
}

.detail-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.detail-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.detail-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-light);
}

.detail-modal-footer {
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-bottom: 0;
}

.detail-modal-footer .btn {
    font-size: 15px;
    font-weight: 700;
    padding: 12px 20px;
    box-shadow: 0 2px 6px rgba(230, 126, 34, 0.25);
    width: 100%;
    border-radius: 8px;
}

.detail-modal-footer .btn:active {
    box-shadow: 0 1px 2px rgba(230, 126, 34, 0.15);
}

/* フッター2ボタンレイアウト */
.detail-modal-footer .footer-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.detail-modal-footer .footer-buttons .btn {
    flex: 1;
}

.detail-modal-footer .footer-buttons .btn-secondary {
    background-color: #f5f5f5;
    color: var(--text-secondary);
    border: none;
    box-shadow: none;
    font-weight: 600;
}

.detail-modal-footer .footer-buttons .btn-secondary:hover {
    background-color: #eee;
}

/* オプショングループ */
.option-group {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #f9f9f9;
    border-radius: 10px;
    border: none;
    transition: all 0.2s ease;
}

.option-group.error,
.set-item-option-group.error {
    background-color: #fff8f8;
    border-left: 3px solid var(--color-danger);
}

.set-category-group.error {
    padding: 12px;
    background-color: #fff8f8;
    border-radius: 8px;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.set-category-group.error .set-category-title {
    color: var(--color-danger);
}

/* ========== スロットUI（V2セットメニューウィザード）========== */
.slot-pills-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin: 6px 0 10px;
    min-height: 34px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.slot-pills-row::-webkit-scrollbar { display: none; }
.slot-pill { flex-shrink: 0; }

.set-slot-progress-panel {
    position: sticky;
    top: 58px;
    z-index: 19;
    padding: 8px 0 10px;
    margin-bottom: 8px;
    background: var(--bg-primary, #fffdf8);
    border-bottom: 1px solid var(--border-color, var(--border-medium, #ced4da));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.set-slot-progress-panel .slot-pills-row {
    margin-bottom: 0;
}

.set-slot-progress-text {
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--primary-color, #e67e22);
    margin: 0 0 8px;
}

.set-slot-progress-panel.complete .set-slot-progress-text {
    color: var(--success-color, #2c8a3a);
}

.slot-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #ccc;
    background: #f5f5f5;
    color: #888;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
}

.slot-pill.active {
    border-color: var(--primary-color, #ff6b35);
    background: #fff5f0;
    color: var(--primary-color, #ff6b35);
}

.slot-pill.filled {
    border-color: #52c41a;
    background: #f6ffed;
    color: #389e0d;
}

.slot-pill.active.filled {
    border-color: var(--primary-color, #ff6b35);
    background: #fff5f0;
    color: var(--primary-color, #ff6b35);
}

/* 必須オプション（辛さなど）が未選択の枠。どの枠が未完了かを一目で分かるようにする。
   .filled / .active より後に置いて上書きする。 */
.slot-pill.slot-pill--missing,
.slot-pill.active.slot-pill--missing,
.slot-pill.filled.slot-pill--missing {
    border-color: var(--color-danger, #dc3545);
    background: #fff1f0;
    color: var(--color-danger, #dc3545);
}

.slot-pill-label {
    white-space: nowrap;
}

.slot-pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.slot-pill-clear:hover {
    background: rgba(0, 0, 0, 0.3);
}

.slot-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}

.slot-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #ddd;
    color: #666;
}

.slot-badge.active {
    background: var(--primary-color, #ff6b35);
    color: #fff;
}

.slot-options-header {
    font-size: 13px;
    font-weight: 600;
    color: #777;
    padding: 6px 0 4px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

.option-group-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: 0;
    border-bottom: none;
    flex-wrap: wrap;
}

.option-required {
    font-size: 12px;
    padding: 2px 8px;
    background-color: var(--color-danger);
    color: var(--text-white);
    border-radius: var(--radius-sm);
}

.option-selection-info {
    font-size: 12px;
    padding: 2px 8px;
    background-color: var(--color-primary);
    color: var(--text-white);
    border-radius: var(--radius-sm);
    margin-left: 6px;
}

.option-counter {
    font-size: 12px;
    padding: 2px 8px;
    background-color: #f0f0f0;
    color: #666;
    border-radius: var(--radius-sm);
    margin-left: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.option-counter.complete {
    background-color: var(--color-success);
    color: var(--text-white);
}

.option-error-message {
    font-size: 12px;
    padding: 4px 10px;
    background-color: var(--color-danger);
    color: var(--text-white);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-xs);
    display: none;
    animation: fadeIn 0.3s ease;
}

.option-group.error .option-error-message,
.set-item-option-group.error .option-error-message {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 辛さドロップダウン */
.spice-dropdown-group {
    padding: 8px 12px;
}

/* 複数選択時の全オプション（アイテム直下にインライン配置） */
.inline-item-options {
    margin-left: 36px;
    margin-bottom: 4px;
    background: #fafafa;
    border-left: 3px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
    padding: 8px 10px;
}

.inline-item-options .set-item-option-group {
    margin-bottom: 6px;
}

.inline-item-options .set-item-option-group:last-child {
    margin-bottom: 0;
}

.inline-item-options .spice-dropdown-group {
    background: #fef9f0;
    border-radius: 6px;
    padding: 6px 8px;
    border-left: 2px solid #e74c3c;
}

.inline-item-options .serving-timing-group {
    padding: 4px 0;
}

.inline-item-options .amount-option-group {
    padding: 4px 0;
}

.inline-item-options .option-group-header {
    font-size: 13px;
    padding: 4px 0;
}

.inline-item-options .option-list {
    gap: 4px;
}

/* 後方互換: 旧インライン辛さドロップダウン */
.inline-spice-dropdown {
    margin-left: 36px;
    margin-bottom: 4px;
    background: #fef9f0;
    border-left: 3px solid #e74c3c;
    border-radius: 0 8px 8px 0;
}

.spice-dropdown-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spice-dropdown-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.spice-dropdown-label i {
    color: #e74c3c;
}

.spice-level-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 2px solid #ddd;
    border-radius: var(--radius-md);
    background-color: #fff;
    color: var(--text-primary);
    appearance: auto;
    cursor: pointer;
    transition: border-color 0.2s ease;
    touch-action: manipulation;
}

.spice-level-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.spice-dropdown-group.error .spice-level-select {
    border-color: var(--color-danger);
}

/* 辛さチップ（V3ウィザード用のボタン式辛さ選択）
   プルダウンだと「何を選んだか」が選択後に分かりづらいためボタン化する。
   選択肢の並びは DB 順（甘口→激辛）をそのまま使う。 */
.spice-chip-group {
    padding: 8px 12px;
}

.spice-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spice-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* 指でタップしやすい最小サイズを確保する */
    min-height: 44px;
    padding: 8px 14px;
    border: 2px solid var(--border-color, var(--border-medium, #ced4da));
    border-radius: 999px;
    background: #fff;
    color: var(--text-primary, #333333);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    /* モバイルタップ最適化: 300msクリック遅延を排除 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

/* hover は PC（マウス）だけ。touch では :hover がタップ後に残留し選択済みに見えるため */
@media (hover: hover) and (pointer: fine) {
    .spice-chip:hover:not(.spice-chip--selected) {
        border-color: #e0a08f;
        background: #fff8f6;
    }
}

.spice-chip--selected {
    border-color: #e74c3c;
    background: #fdecea;
    color: #c0392b;
}

.spice-chip--selected::before {
    content: '✓';
    font-size: 13px;
    font-weight: 700;
}

.spice-chip-price {
    font-size: 12px;
    font-weight: 500;
}

.spice-chip-group.error .spice-chip {
    border-color: var(--color-danger, #dc3545);
}

.option-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background-color: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    /* モバイルタップ最適化: 300msクリック遅延を排除 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.option-item:hover {
    border-color: #ccc;
    background-color: #fafafa;
}

.option-item.selected {
    border-color: var(--color-primary);
    background-color: #f0f8f0;
}

.option-item-radio {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
}

.option-item-radio.checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.option-item-radio.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
}

/* チェックボックススタイル */
.option-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-right: var(--spacing-sm);
    border: 2px solid #ccc;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s;
    background-color: white;
}

.option-item.selected .option-checkbox {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.option-item.selected .option-checkbox::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.option-item-name {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.option-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

/* 数量選択 */
.quantity-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    border: 2px solid var(--border-light);
}

.quantity-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.quantity-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-round);
    background-color: var(--color-primary);
    color: var(--text-white);
    font-size: 22px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.quantity-btn:hover {
    background-color: var(--color-primary-dark);
    transform: scale(1.05);
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quantity-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 50px;
    text-align: center;
}

/* ========================================
   レシート画面 (receipt.html) 用スタイル
   スクロールなし・アコーディオンUI対応
======================================== */

/* 全体のレイアウト調整：画面内に収める */
.receipt-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
    max-width: 600px;
    margin: 0 auto;
}

/* 1. ステータス */
.receipt-status {
    text-align: center;
    padding: var(--spacing-md) 0;
}

.status-icon {
    font-size: 64px;
    color: var(--color-success);
    margin-bottom: var(--spacing-sm);
    font-variation-settings: 'FILL' 1;
}

.status-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.status-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.status-desc strong {
    color: var(--color-primary);
    font-size: 16px;
}

/* 2. メイン情報（金額・卓番） */
.receipt-main-info {
    background-color: var(--bg-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.table-info {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px dashed var(--border-medium);
}

.table-info .label {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
}

.table-info .number {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.total-info .label {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--spacing-xs);
}

.total-info .price {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

/* 3. アコーディオン明細 */
.receipt-details-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 高さ確保のための調整 */
    min-height: 0; 
}

.details-toggle-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.details-toggle-btn:hover {
    background-color: var(--border-light);
}

.details-toggle-btn .icon {
    transition: transform 0.3s ease;
}

/* 開いた時のスタイル */
.details-toggle-btn.active {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.details-toggle-btn.active .icon {
    transform: rotate(180deg);
}

.details-list-wrapper {
    max-height: 0;
    overflow-y: auto;
    background-color: var(--bg-secondary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: max-height 0.3s ease-out;
}

.details-list-wrapper.open {
    /* 画面内に収まる範囲でスクロールさせるため高さを指定 */
    flex: 1;
    max-height: 100%; 
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}

/* 明細アイテムの微調整 */
.receipt-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.receipt-item:last-child {
    border-bottom: none;
}

/* フッターメッセージ */
.receipt-footer-msg {
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: auto;
}

/* ========================================
   セッションエラー画面
======================================== */
.session-error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    padding: 40px 24px;
    background-color: var(--bg-secondary);
    text-align: center;
}

.session-error-icon {
    margin-bottom: 16px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.session-error-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.session-error-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.5;
}

.session-error-actions {
    width: 100%;
    max-width: 320px;
    margin-bottom: 20px;
}

.session-error-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #E67E22 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
    transition: all 0.2s ease;
}

.session-error-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4);
}

.session-error-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.session-error-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 10px;
    min-height: 20px;
}

.session-error-hint.success {
    color: #27ae60;
    font-weight: 600;
}

.session-error-hint.error {
    color: #e74c3c;
}

.session-error-divider {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin-bottom: 20px;
}

.session-error-divider::before,
.session-error-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-light, #e0e0e0);
}

.session-error-divider span {
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.session-error-qr-section {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-primary);
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 320px;
    width: 100%;
    margin-bottom: 24px;
}

.session-error-qr-section svg {
    flex-shrink: 0;
}

.session-error-qr-section p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.session-error-note {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 12px 16px;
    max-width: 320px;
    width: 100%;
}

.session-error-note p {
    margin: 0;
    color: #856404;
    font-size: 13px;
    line-height: 1.5;
}

/* ========================================
   会計済み画面（他のデバイスで会計完了時）
======================================== */
.payment-completed-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-xl);
    text-align: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.payment-completed-icon {
    margin-bottom: var(--spacing-xl);
    animation: checkmark-pop 0.6s ease-in-out;
}

@keyframes checkmark-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.payment-completed-title {
    font-size: 32px;
    font-weight: 700;
    color: #28a745;
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payment-completed-message {
    background-color: #ffffff;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    max-width: 450px;
}

.payment-completed-message p {
    margin: var(--spacing-md) 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
}

.payment-completed-info {
    background-color: #e8f5e9;
    border: 2px solid #28a745;
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    max-width: 450px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.payment-completed-info p {
    margin: var(--spacing-sm) 0;
    color: #1e7e34;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}

/* ========================================
   セッションステータスメッセージ（カート）
======================================== */
.session-status-message {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.session-status-message.ended {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.session-status-message.ended p {
    margin: var(--spacing-xs) 0;
    color: #721c24;
    font-size: 14px;
    line-height: 1.5;
}

.session-status-message.ended strong {
    color: #721c24;
    font-size: 16px;
}

.session-status-message.processing {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
}

.session-status-message.processing p {
    margin: var(--spacing-xs) 0;
    color: #856404;
    font-size: 14px;
    line-height: 1.5;
}

.session-status-message.processing strong {
    color: #856404;
    font-size: 16px;
}

/* ========================================
   セットメニュー内容表示（強化版UI）
======================================== */
.set-menu-contents {
    padding: 0;
    margin-bottom: var(--spacing-md);
    background: transparent;
}

.set-menu-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
}

.set-menu-title::before {
    content: '🍽️';
    font-size: 18px;
}

.set-categories-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.set-category-group {
    background: transparent;
    padding: 0;
}

.set-category-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(230, 126, 34, 0.2);
}

/* 選択UI（複数商品） */
.set-items-selector {
    display: flex;
    flex-direction: column;
    gap: 10px; /* アイテム間の隙間を作る */
}

.set-item-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-primary);
    border: 2px solid #eee; /* デフォルトの枠線 */
    border-radius: var(--radius-md); /* 角丸にする */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ホバー時の挙動 */
.set-item-option:hover {
    border-color: #ddd;
    background: #fafafa;
}

/* 選択時の強調スタイル */
.set-item-option.selected {
    background: rgba(230, 126, 34, 0.12);
    border-color: var(--color-primary);
    border-width: 3px;
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.25);
    transform: scale(1.02);
}

.set-item-option.selected .set-item-name {
    color: var(--color-primary);
    font-weight: 800;
}

.set-item-radio {
    width: 26px;
    height: 26px;
    border: 3px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
    background: #fff;
}

/* 選択時のラジオボタン */
.set-item-radio.checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.25);
}

.set-item-radio.checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: white;
}

/* 複数選択時のチェックボックススタイル */
.set-item-radio.checkbox-style {
    border-radius: 6px;
}

.set-item-radio.checkbox-style.checked {
    border-radius: 6px;
}

/* 選択数ラベル */
.selection-count-label {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

/* 選択カウンター */
.selection-counter {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    padding: 6px 12px;
    background: #f0f0f0;
    border-radius: 8px;
    margin-bottom: 10px;
    display: inline-block;
}

.selection-counter.complete {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
}

/* 複数選択時のオプションヘッダー */
.set-item-options-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    padding: 10px 12px;
    background: rgba(230, 126, 34, 0.08);
    border-radius: 8px;
    margin: 12px 0 8px 0;
    border-left: 3px solid var(--color-primary);
}

.set-item-option img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.set-item-option .set-item-name {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

/* 価格調整表示 */
.set-item-option .price-adjustment {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    margin-left: auto;
    padding: 2px 6px;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 4px;
}

/* 自動選択（1商品のみ）の表示もカード形式に統一 */
.set-item-auto-selected {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px;
    background: #f8f8f8;
    border-radius: var(--radius-md);
    border: 1px dashed #ccc;
}

.set-item-auto-selected img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.set-item-auto-selected span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* セット内商品のオプション（トッピングなど） */
.set-item-options-container {
    margin-left: 36px;
    padding: 0;
    background: #fdfdfd;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-primary);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, overflow 0s 0.3s;
}

/* コンテンツがあり展開状態の時 */
.set-item-options-container.visible {
    padding: 10px;
    opacity: 1;
    /* overflow と max-height はJS側で動的に制御（内部アコーディオン展開対応） */
}

/* 空コンテナはflexレイアウトから除外 */
.set-item-options-container:empty {
    display: none;
}

/* ========================================
   量変更オプション（折りたたみ式）
======================================== */
.amount-option-group {
    margin-top: 8px;
}

.amount-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.amount-toggle-btn:hover {
    background: linear-gradient(135deg, #e8e8e8 0%, #e0e0e0 100%);
    border-color: #ccc;
}

.amount-toggle-btn .toggle-icon {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.amount-options-content {
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 8px;
}

.amount-option-group.collapsed .amount-options-content {
    max-height: 0;
    margin-top: 0;
}

/* ========================================
   提供タイミング（すぐに提供ボタン）
======================================== */
.serving-timing-group {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.serving-timing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
    border: 2px solid #ff9800;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #ff9800;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.serving-timing-btn:hover {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.serving-timing-btn.selected {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #fff;
    border-color: #f57c00;
}

.serving-timing-note {
    font-size: 11px;
    color: #999;
    text-align: center;
}

/* ========================================
   提供メモ（デザート用）
======================================== */
.serving-note {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 2px solid #ff9800;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

.serving-note-icon {
    font-size: 20px;
    margin-right: var(--spacing-sm);
}

.serving-note-text {
    color: #e65100;
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}
/* ========================================
   セットメニュー商品選択
======================================== */
.set-menu-category {
    margin-bottom: var(--spacing-lg);
}

.set-category-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: #f5f5f5;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.set-category-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.set-selection-info {
    font-size: 12px;
    padding: 2px 8px;
    background-color: var(--color-primary);
    color: var(--text-white);
    border-radius: var(--radius-sm);
}

.set-counter {
    font-size: 12px;
    padding: 2px 8px;
    background-color: #e0e0e0;
    color: #666;
    border-radius: var(--radius-sm);
    font-weight: 600;
    margin-left: auto;
    transition: all 0.2s ease;
}

.set-counter.complete {
    background-color: var(--color-success);
    color: var(--text-white);
}

.set-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.set-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background-color: white;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.set-item:hover:not(.sold-out) {
    border-color: var(--color-primary);
    background-color: #fafafa;
}

.set-item.sold-out {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f5f5f5;
    pointer-events: none;
}

.set-item-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 12px;
}

.set-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.set-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.set-item-soldout {
    font-size: 11px;
    color: var(--color-danger);
    font-weight: 600;
}

.set-item-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.set-item-checkbox:disabled {
    cursor: not-allowed;
}

/* ========== スケルトンローディング ========== */
.skeleton-container {
    padding: var(--spacing-md);
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 8px;
}

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

/* メニューカード用スケルトン */
.skeleton-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.skeleton-image {
    width: 100%;
    height: 150px;
    margin-bottom: var(--spacing-md);
}

.skeleton-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.skeleton-title {
    height: 20px;
    width: 70%;
}

.skeleton-text {
    height: 14px;
    width: 100%;
}

.skeleton-price {
    height: 18px;
    width: 30%;
}

/* 注文アイテム用スケルトン */
.skeleton-order-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.skeleton-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-order-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.skeleton-title-sm {
    height: 16px;
    width: 60%;
}

.skeleton-text-sm {
    height: 12px;
    width: 40%;
}

.skeleton-badge {
    width: 60px;
    height: 24px;
    flex-shrink: 0;
}

/* リスト用スケルトン */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* テキストブロック用スケルトン */
.skeleton-text-block {
    padding: var(--spacing-sm) 0;
}

.skeleton-text-line {
    height: 14px;
    width: 100%;
    margin-bottom: var(--spacing-xs);
}

.skeleton-text-line.short {
    width: 60%;
}

/* 汎用ブロック */
.skeleton-block {
    height: 100px;
    width: 100%;
}

/* ===================================================================
   V3 セットメニューウィザード UI
   =================================================================== */

/* サマリー画面：カテゴリ選択ボタン一覧 */
.set-summary-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.set-summary-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    text-align: left;
}

.set-summary-btn:active {
    background: var(--bg-secondary);
}

.set-summary-btn.completed {
    border-color: #2e7d32;
    background: #f1f8f1;
}

.set-summary-icon {
    font-size: 18px;
    color: var(--text-secondary);
    min-width: 22px;
    text-align: center;
}

.set-summary-btn.completed .set-summary-icon {
    color: #2e7d32;
    font-weight: 700;
}

.set-summary-label-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.set-summary-label {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

.set-summary-btn.completed .set-summary-label {
    color: #1b5e20;
    font-weight: 600;
}

.set-summary-sublabel {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* 縦並びサブラベル（選択済みアイテム一覧） */
.set-summary-sublabel-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.sublabel-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.sublabel-name {
    color: var(--text-primary);
    font-weight: 500;
}

.sublabel-opt {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 1px 5px;
    border-radius: 3px;
}

.set-summary-optional {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.set-summary-arrow {
    font-size: 20px;
    color: var(--text-secondary);
    font-weight: 300;
}

/* カテゴリ選択画面ラッパー */
.set-category-screen {
    display: flex;
    flex-direction: column;
    /* 下パディングは付けない: フッター(.set-confirm-footer)が最後の子なので
       ここに padding-bottom を付けるとフッターの「下」に隙間ができて浮いて見える。
       最後のカードとフッターの間隔は .wizard-items-grid の padding-bottom で確保する。 */
}

/* 商品一覧の下に余白を足し、最後のカードとフッターの間に間隔を作る */
.set-category-screen .wizard-items-grid {
    padding-bottom: 12px;
}

/* ★重要（透け/浮き対策）:
   モーダルのスクロール領域(.detail-scroll)は、モーダル自身のヘッダー/フッター用に
   上下パディング（padding-top: lg / padding-bottom: 100px）を持つ。
   ウィザードのカテゴリ画面は sticky な自前ヘッダー(.set-category-header-bar)と
   フッター(.set-confirm-footer)を使うため、この上下パディングがあると
   - sticky ヘッダーがパディング分だけ下にずれ、上の帯にカードが透ける
   - sticky フッターがパディング分（約100px）上に浮き、下の隙間にカードが見える
   という不具合になる。カテゴリ画面表示中だけ上下パディングを 0 にして
   sticky ヘッダー/フッターを本来の上端/下端に貼り付かせる（横パディングは維持）。
   :has() は iOS Safari 15.4+ / 各モバイル最新ブラウザで対応。cart/menu/menu_detail 共通で効く。 */
.detail-modal.fullscreen .detail-scroll:has(.set-category-screen) {
    padding-top: 0;
    padding-bottom: 0;
}
/* .detail-content をスクロール領域いっぱいの flex 縦積みにして、
   .set-category-screen を高さいっぱいに広げる。これで:
   - 商品が少なくスクロール不要でも「決定」フッターが画面最下部に来る
   - 商品が多い時は sticky で下端に貼り付き、カードはフッターの裏に隠れる（透けない） */
.detail-content:has(.set-category-screen) {
    padding-top: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.detail-content:has(.set-category-screen) > .set-category-screen {
    flex: 1 0 auto;
}
/* フッターを縦積みの最下部へ押し下げる（内容が短い時の浮き防止） */
.set-category-screen > .set-confirm-footer {
    margin-top: auto;
}

/* カテゴリ選択画面の商品リスト */
.wizard-items-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ウィザード内アイテム行（リスト形式：カード風で「押せる」ことを明示）
   未選択・押下中・選択済み・売り切れの4状態を視覚的に区別する。
   注: --border-color / --card-bg 等は未定義の場合があるため必ず fallback を付ける。 */
.wizard-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    /* 未選択状態: 白背景 + 枠線 + 角丸 + 軽い影で「カード/ボタン」に見せる */
    background: var(--card-bg, var(--bg-primary, #ffffff));
    border: 1px solid var(--border-color, var(--border-medium, #ced4da));
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* スマホでタップ後に :hover が残らないよう二重発火/遅延を抑止 */
    touch-action: manipulation;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    /* 選択時にバッジ行が入っても行高が変わらないよう確保する */
    min-height: 72px;
}

/* hover は「マウスが乗せられるPC」だけで有効にする。
   touch デバイスでは :hover がタップ後に残留し「選択済み」に見えてしまうため、
   @media (hover: hover) and (pointer: fine) で PC 限定にする。 */
@media (hover: hover) and (pointer: fine) {
    .wizard-item-row:hover:not(.sold-out) {
        border-color: var(--accent-color, var(--color-primary, #e67e22));
        background: var(--hover-bg, rgba(230, 126, 34, 0.06));
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    }
}

/* 押下中（active）だけの軽いフィードバック。押下解除で必ず消えるため残留しない。
   選択済み（.selected）に見えないよう、枠色は変えず軽い沈み込みだけにする。 */
.wizard-item-row:active:not(.sold-out):not(.selected) {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12) inset;
}

/* 選択済み: 緑枠 + 淡い緑背景で確定を明示 */
.wizard-item-row.selected {
    background: #f1f8e9;
    border-color: var(--color-secondary, #2c5f2d);
    box-shadow: 0 1px 3px rgba(46, 125, 50, 0.18);
}

/* 売り切れ: 淡色・操作不可 */
.wizard-item-row.sold-out {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}

.wizard-item-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

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

.wizard-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.wizard-item-price {
    font-size: 12px;
    color: var(--text-secondary, #666666);
    /* 「+ ¥385」が縦に割れないようにする */
    white-space: nowrap;
}

.wizard-item-check {
    font-size: 22px;
    color: #2e7d32;
    flex-shrink: 0;
}

/* 同じ商品を複数の枠に入れたときの個数表示（✓ の代わりに「×2」）。
   カード1枚で2つ選ばれていることが見て分かるようにする。 */
.wizard-item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #2e7d32;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* グリッドカードでは ✓ と同じ位置（右上）に絶対配置して高さに影響させない */
.wizard-grid-card .wizard-item-count {
    position: absolute;
    top: 4px;
    right: 4px;
}

/* 選択済みスロットのオプション（辛さなど）をカード内に表示する。
   選択の有無でカード高さが変わらないよう、中身が空でも領域を確保する。 */
.wizard-card-badges {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* バッジ実高（14px + 縦padding 2px + border 2px = 18px）より大きく取り、
       選択の有無でカード高さが 1px も動かないようにする */
    min-height: 20px;
    max-width: 100%;
    overflow: hidden;
}

.wizard-item-badge {
    font-size: 11px;
    line-height: 14px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fff3e0;
    color: #c0392b;
    border: 1px solid #f0c9a8;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-item-badge--timing,
.wizard-item-badge--other,
.wizard-item-badge--more {
    background: #eef3f7;
    color: #37546b;
    border-color: #cfdce6;
}

/* リスト形式ではバッジを左寄せ（カードは中央寄せ） */
.wizard-item-info .wizard-card-badges {
    justify-content: flex-start;
    margin-top: 2px;
}

.wizard-sold-out-badge {
    font-size: 11px;
    color: #c62828;
    background: #fce4e4;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ウィザードアイテムブロック（リスト形式：選択商品直下にオプションを表示） */
.wizard-item-block { display: block; }
.wizard-item-options {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 0 0 8px 8px;
}

/* ウィザードグリッド形式（≥8品） */
.wizard-items-grid--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wizard-grid-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wizard-grid-option-row { grid-column: 1 / -1; }
.wizard-grid-option-row.hidden { display: none; }
.wizard-grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 14px 10px;
    /* 未選択状態: 白背景 + 枠線 + 角丸 + 軽い影で「押せるカード」に見せる。
       --border-color は未定義のことがあるため必ず fallback を付ける
       （fallback がないと border 全体が無効になりカードがただのテキストに見える）。 */
    background: var(--card-bg, var(--bg-primary, #ffffff));
    border: 2px solid var(--border-color, var(--border-medium, #ced4da));
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #333333);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* スマホでタップ後に :hover が残らないよう二重発火/遅延を抑止 */
    touch-action: manipulation;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    /* チェックマークを絶対配置するための基準 */
    position: relative;
    /* 選択時にバッジ行が入っても高さが変わらないよう、未選択時から高さを確保する */
    min-height: 76px;
    word-break: break-word;
}

/* チェックマークはフローから外して高さに影響させない（選択でカードが伸びるのを防ぐ） */
.wizard-grid-card .wizard-item-check {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 18px;
}

/* 商品名は最大2行。3行以上でカード高さが暴れるのを防ぐ */
.wizard-grid-card .wizard-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* hover は PC（マウス）だけで有効にする。
   touch デバイスでは :hover がタップ後に残留し「選択済み」に見えてしまうため。 */
@media (hover: hover) and (pointer: fine) {
    .wizard-grid-card:hover:not(.wizard-grid-card--sold-out) {
        border-color: var(--accent-color, var(--color-primary, #e67e22));
        background: var(--hover-bg, rgba(230, 126, 34, 0.06));
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    }
}
/* 押下中（active）だけの軽いフィードバック。押下解除で必ず消えるため残留しない。
   選択済み（--selected）に見えないよう、枠色・背景は変えず軽い沈み込みだけにする。 */
.wizard-grid-card:active:not(.wizard-grid-card--sold-out):not(.wizard-grid-card--selected) {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12) inset;
}
/* 選択済み: 緑枠 + 淡い緑背景 */
.wizard-grid-card--selected {
    border-color: var(--color-secondary, #2c5f2d);
    background: #f1f8e9;
    color: var(--color-secondary, #2c5f2d);
    font-weight: 700;
}
/* 売り切れ: 淡色・操作不可 */
.wizard-grid-card--sold-out {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}
.wizard-grid-card .wizard-item-price {
    white-space: nowrap;
}
.wizard-grid-card--empty {
    visibility: hidden;
    pointer-events: none;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* ウィザード内オプション表示 */
.wizard-options-panel {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
}

.wizard-options-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* 「決定」ボタンフッター（sticky） */
.set-confirm-footer {
    position: sticky;
    bottom: 0;
    /* iPhone Safari 下部バー/ホームインジケータに隠れないよう safe-area を加算 */
    padding: 12px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    /* 完全に不透明な背景（fallback 必須。背後のカードを透けさせない） */
    background: var(--bg-primary, #fffdf8);
    border-top: 1px solid var(--border-color, var(--border-medium, #ced4da));
    /* 上向きの影で上のカードと明確に分離 */
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.08);
    z-index: 20;
}

/* 決定できない理由をボタン直上に表示する */
.set-confirm-reason {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-danger, #dc3545);
    text-align: center;
    margin-bottom: 8px;
}

.set-confirm-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
    background: #e74c3c;
    color: #fff;
    border: none;
    cursor: pointer;
}

.set-confirm-btn:disabled {
    background: var(--text-disabled, #ccc);
    cursor: not-allowed;
    opacity: 0.7;
}

/* カテゴリ選択画面ヘッダーバー
   注: --bg-primary / --border-color は未定義の文脈があり、fallback が無いと
   background/border が無効化されて背後のカードが透けて見える。必ず fallback を付ける。 */
.set-category-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    /* 完全に不透明な背景（fallback 必須） */
    background: var(--bg-primary, #fffdf8);
    border-bottom: 1px solid var(--border-color, var(--border-medium, #ced4da));
    /* 下側に影を出してカードとの境界を明確化（透け防止の視覚的補強） */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.set-category-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-primary);
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

.set-category-back-btn:active {
    background: var(--bg-secondary);
}

.set-category-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

/* 在庫チェック中インジケーター */
.stock-check-indicator {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 4px 0;
}

/* カートに追加ボタン — 非活性 */
#add-to-cart-btn:disabled {
    background: var(--text-disabled, #ccc);
    cursor: not-allowed;
    opacity: 0.7;
}

/* モーダルフッターをウィザード中に隠す */
.detail-modal-footer.wizard-hidden {
    display: none;
}

/* ===== 統合カテゴリー（カテゴリーの中のカテゴリー） ===== */
/* 統合パネル: セクションブロックを縦に積む（各セクションが独立グリッド＝部分更新可能） */
.consolidated-panel {
    display: flex;
    flex-direction: column;
    gap: 0;                      /* セクション間の隙間はセクション側で最小限に管理 */
    padding-bottom: 120px;       /* スクロール余白は最下部に一度だけ付ける */
}
/* 各セクションのグリッドは通常タブの min-height / 大きな下パディングを引き継がない
   （引き継ぐとセクションごとに画面高さ分の余白ができて縦スクロールが増える） */
.consolidated-panel .menu-grid {
    min-height: 0;
    padding: 2px var(--spacing-md) 6px;
}
.consolidated-section:first-child .consolidated-section-head {
    margin-top: 2px;             /* 先頭セクションの上を詰める */
}
.consolidated-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 2px 4px;         /* 見出し上下を詰めてセクションを近づける */
}
.consolidated-section-bar {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--primary-color, #e0872a);
    flex: none;
}
.consolidated-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.consolidated-section-time {
    font-size: 11px;
    color: #e65100;
    background: #fff3e0;
    padding: 2px 8px;
    border-radius: 8px;
}
/* 「すべて表示 / 一部を隠す」トグル（行いっぱい） */
.section-toggle-btn {
    grid-column: 1 / -1;
    margin: 8px 0 4px;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color, #2f8f83);
    background: var(--primary-wash, #eef6f4);
    border: 1px dashed var(--primary-color, #2f8f83);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.section-toggle-btn:hover { filter: brightness(0.98); }
.section-toggle-btn:focus-visible { outline: 2px solid var(--primary-color, #2f8f83); outline-offset: 2px; }