/* spreadsheet.css - Excelライクなスプレッドシートスタイル */

/* ============================================================
   iOS auto-zoom prevention baseline
   iOSではfont-size 16px未満のinput/select/textareaにフォーカスすると
   ブラウザが自動ズームする。全入力要素のデフォルトを16pxに設定。
   個別クラスで16px以上の値に上書きは可能。
   ============================================================ */
input, select, textarea {
    font-size: 16px;
}

/* ============================================================
   Fix 2 (2026-07-23・視認性残件4種): モーダル内 input/textarea の placeholder 明示
   継承 (html.dark 時の body color: gray-100) だけに任せると薄くなりすぎるため、
   ページ全体 (このファイルは nutrition_sheet.html / nutrition_sheet_demo.html 専用) で明示。
   より具体的なセレクタ (例: .food-search-dropdown ... ::placeholder) は上書き可能。
   ============================================================ */
/* 入力欄自身の文字色を継承し opacity で弱める方式:
   白背景モーダル (文字 #1f2937) でもダーク入力欄 (文字 gray-100) でも、
   実効コントラストが自動的に 4.5:1 以上になる (固定色だと片方のテーマで必ず破綻する) */
input::placeholder,
textarea::placeholder {
    color: inherit;
    opacity: 0.72;
}

/* Prevent page-level scrolling; keep all scroll inside #spreadsheet-container */
body:has(#nutrition-sheet-app) {
    overflow: hidden;
}
body:has(#nutrition-sheet-app) footer {
    display: none;
}

/* 🔴🔴 **BIZ UDPゴシックは 400 と 700 の 2 太さしか配られていない** (2026-09-04 実測)。
   このページの CSS は 500 / 600 も使っているが、700 の実体があるので**偽の太字は作られない**
   (CSS の照合規則: 500 は 400 の面、600 は 700 の面が選ばれる)。
   念のため `font-synthesis-weight: none` で明示的に禁じる。
   ⚠️ 台帳 2026-09-01「配っていない太さを CSS が要求し、ブラウザが偽の太字を作っていた」と
   同じ轍を踏まないための備え。
   ⚖️ トップページは変えない (利用者決定 2026-09-04)。
   🔴 **書体そのものの指定は `templates/partials/biz_udp_gothic.html` が唯一の出どころ。**
   ここは献立シートの器だけに当てる控えの指定。
   固定 = tests/unit/test_biz_udp_gothic_is_loaded_where_asked.py */
/* === Container === */
#nutrition-sheet-app {
    padding: 0;
    margin-top: 0;
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8f9fa;
    font-family: 'BIZ UDPGothic', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-synthesis-weight: none;
}

/* === Ribbon Menu === */
#ribbon {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
    border-bottom: 1px solid #d1d5db;
    background: #fff;
    position: relative;
}

.ribbon-tab-bar {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    gap: 0;
    flex-shrink: 0;
}

.ribbon-tab-bar h2 {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    white-space: nowrap;
    margin-right: 8px;
}

.sheet-name-display {
    font-size: 13px;
    color: #6b7280;
    margin-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* C-9 (2026-08-16): 未保存バッジ。
   保存済みのときは HTML の hidden 属性で消えるため、通常の作業中は視界に入らない。
   タブバー = リボンを折りたたんでも残る行なので、未保存である限り常に目に入る。
   コントラスト実測: 文字 #92400e / 背景 #fef3c7 = 6.37, 枠 #b45309 / バー #f3f4f6 = 4.56 */
.unsaved-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #b45309;
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 8px;
    white-space: nowrap;
}

.unsaved-indicator[hidden] {
    display: none;
}

.unsaved-indicator i {
    font-size: 6px;
}

.ribbon-tabs {
    display: flex;
    align-items: stretch;
    flex: 1;
    gap: 0;
}

.ribbon-tab {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ribbon-tab:hover {
    background: #e5e7eb;
}

.ribbon-tab.active {
    color: #1f2937;
    font-weight: 600;
    background: #fff;
    border-bottom-color: #16a34a;
}

.ribbon-toggle-btn {
    margin-left: auto;
    padding: 4px 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 12px;
    transition: color 0.15s;
}

.ribbon-toggle-btn:hover {
    color: #1f2937;
}

.ribbon-toggle-btn i {
    transition: transform 0.2s ease;
}

.ribbon.collapsed .ribbon-toggle-btn i {
    transform: rotate(180deg);
}

/* === Ribbon Panel === */
.ribbon-panel {
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    max-height: 120px;
    opacity: 1;
    transition: max-height 0.2s ease, opacity 0.15s ease;
}

.ribbon.collapsed .ribbon-panel {
    max-height: 0;
    opacity: 0;
    border-bottom: none;
}

.ribbon.collapsed .ribbon-panel.ribbon-panel-peek {
    max-height: 120px;
    opacity: 1;
    border-bottom: 1px solid #d1d5db;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 25;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #fff;
}

.ribbon-panel-content {
    display: none;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 6px 12px;
    /* Bug-M3: 1024px 等の狭いビューポートで右側のボタンが画面外に出るため、
       水平スクロールを許可する。max-height 120px の縦方向クリップは親の
       .ribbon-panel (overflow: hidden) で維持されるため、ここでは overflow-y
       を hidden にしてスクロールバーが縦に出ないようにしている */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.ribbon-panel-content.active {
    display: flex;
}


/* === Ribbon Groups === */
/* 🔴 2026-09-04: ボタン群は必ず上端から積む (利用者報告「上端が揃わない・2 行だと真ん中に余白」)。
   グループ自体はパネルの高さまで伸びる (区切り線を全高にするため) が、
   中の行は `justify-content: flex-start` で上へ寄せる。
   実測 (dev · Playwright) では、この指定が無いと 1 段のグループの行が 98px まで伸び、
   `align-items: center` でボタンが縦中央へ落ちていた。固定は
   tests/unit/test_ribbon_group_top_alignment.py。 */
.ribbon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    flex-shrink: 0;
}

/* 🔴 `flex: 1` にすると行がグループの高さまで伸びる。行は中身ぶんの高さに留める。 */
.ribbon-group-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.ribbon-group-label {
    font-size: 11.5px;
    color: #4b5563;
    margin-top: 2px;
    text-align: center;
    white-space: nowrap;
}

.ribbon-group-separator {
    width: 1px;
    background: #d1d5db;
    margin: 4px 0;
    align-self: stretch;
}

.ribbon-inline-label {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    margin-right: 4px;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.toolbar-btn:active {
    background: #e5e7eb;
}

.toolbar-btn.primary {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

.toolbar-btn.primary:hover {
    background: #15803d;
}

/* C-9: 未保存の間だけ「献立シート保存」を強調する (押す先を示す)。
   コントラスト実測: 文字 #92400e / 背景 #fffbeb = 6.84, 枠 #b45309 / 背景 #fffbeb = 4.84 */
.toolbar-btn.has-unsaved {
    background: #fffbeb;
    color: #92400e;
    border-color: #b45309;
    font-weight: 600;
}

.toolbar-btn.has-unsaved:hover {
    background: #fef3c7;
    border-color: #92400e;
}

.toolbar-btn.danger {
    /* 2026-08-27: 上の .rg-row 側と揃える (薄い赤の下地に乗るため red-700 が要る)。 */
    color: #b91c1c;
    border-color: #fca5a5;
}

.toolbar-btn.danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* === Ribbon Group Pastel Colors === */
/* ホームタブ */
.rg-file .toolbar-btn:not(.primary):not(.danger)        { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.rg-file .toolbar-btn:not(.primary):not(.danger):hover   { background: #bfdbfe; border-color: #60a5fa; }
/* ⚖️ 2026-09-04 利用者決定: 「対象（食種）設定」の色を「新規作成」と同じにする。
   `#btn-new-sheet` は既定の `.toolbar-btn` なので、ここの上書きを外すだけで揃う。 */
/* 🔴 献立カレンダーの専用色 (ティール) は 2026-08-17 に撤去した (ユーザー指示)。
   中段へ移した結果、隣の [食数集計] [横展開比較] と色が揃わず 1 つだけ浮いていた。
   指定を消すと上の `.rg-file .toolbar-btn:not(.primary):not(.danger)` に落ちて同じ色になる。 */
.rg-row .toolbar-btn:not(.danger)                        { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.rg-row .toolbar-btn:not(.danger):hover                  { background: #fde68a; border-color: #f59e0b; }
/* 2026-08-27: #dc2626 on #fee2e2 = 3.95:1 で AA を割っていた。red-700 で 5.30:1。 */
.rg-row .toolbar-btn.danger                              { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.rg-row .toolbar-btn.danger:hover                        { background: #fecaca; border-color: #f87171; }
/* === リボン UI 2 段組グループ: 列単位で上下段の幅を揃える (subgrid) === */
/* :has() で .ribbon-group-buttons が 2 つ以上ある場合のみ適用 (デモ版の 1 段組は除外) */
.rg-file:has(> .ribbon-group-buttons + .ribbon-group-buttons),
.rg-row:has(> .ribbon-group-buttons + .ribbon-group-buttons),
.rg-menu-management:has(> .ribbon-group-buttons + .ribbon-group-buttons) {
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 4px;
    row-gap: 4px;
    /* 🔴 2026-09-04: `align-content` を書かないと既定 (normal = stretch) で行トラックが
       グループの高さまで引き伸ばされ、`align-items: center` と合わさって
       「1 行目が下がり、間に中途半端な余白が出る」形になる。
       実測 (dev) では空き 38px が 上 8 / 中 21 / 下 9 に配られていた。 */
    align-content: start;
}
.rg-file:has(> .ribbon-group-buttons + .ribbon-group-buttons) > .ribbon-group-buttons,
.rg-row:has(> .ribbon-group-buttons + .ribbon-group-buttons) > .ribbon-group-buttons,
.rg-menu-management:has(> .ribbon-group-buttons + .ribbon-group-buttons) > .ribbon-group-buttons {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    flex: initial;
}
.rg-calc .toolbar-btn                                    { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.rg-calc .toolbar-btn:hover                              { background: #a7f3d0; border-color: #34d399; }
.rg-menu-management .toolbar-btn                         { background: #e0f2fe; border-color: #7dd3fc; color: #0c4a6e; }
.rg-menu-management .toolbar-btn:hover                   { background: #bae6fd; border-color: #38bdf8; }
/* AIタブ */
.rg-ai .toolbar-btn                                      { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.rg-ai .toolbar-btn:hover                                { background: #ffedd5; border-color: #fb923c; }
.dark .rg-ai .toolbar-btn                                { background: #431407; border-color: #c2410c; color: #fed7aa; }
.dark .rg-ai .toolbar-btn:hover                          { background: #7c2d12; border-color: #ea580c; }

/* レシピタブ */
.rg-recipe-manage .toolbar-btn                           { background: #ecfccb; border-color: #bef264; color: #365314; }
.rg-recipe-manage .toolbar-btn:hover                     { background: #d9f99d; border-color: #a3e635; }
.rg-recipe-search .toolbar-btn                           { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.rg-recipe-search .toolbar-btn:hover                     { background: #ddd6fe; border-color: #a78bfa; }
.rg-recipe .toolbar-btn                                  { background: #fce7f3; border-color: #f9a8d4; color: #9d174d; }
.rg-recipe .toolbar-btn:hover                            { background: #fbcfe8; border-color: #f472b6; }
.rg-meal-category .toolbar-btn                           { background: #ffedd5; border-color: #fdba74; color: #9a3412; }
.rg-meal-category .toolbar-btn:hover                     { background: #fed7aa; border-color: #fb923c; }

/* 分析タブ */
.rg-nutrition-ratio .toolbar-btn                         { background: #ccfbf1; border-color: #5eead4; color: #115e59; }
.rg-nutrition-ratio .toolbar-btn:hover                   { background: #99f6e4; border-color: #2dd4bf; }
.rg-chart .toolbar-btn                                   { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; }
.rg-chart .toolbar-btn:hover                             { background: #c7d2fe; border-color: #818cf8; }
.rg-irodori .toolbar-btn                                 { background: #fae8ff; border-color: #e879f9; color: #86198f; }
.rg-irodori .toolbar-btn:hover                           { background: #f5d0fe; border-color: #d946ef; }
.rg-summary .toolbar-btn                                 { background: #cffafe; border-color: #67e8f9; color: #155e75; }
.rg-summary .toolbar-btn:hover                           { background: #a5f3fc; border-color: #22d3ee; }

/* 出力タブ */
.rg-export .toolbar-btn                                  { background: #dcfce7; border-color: #86efac; color: #166534; }
.rg-export .toolbar-btn:hover                            { background: #bbf7d0; border-color: #4ade80; }
.rg-report .toolbar-btn                                  { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.rg-report .toolbar-btn:hover                            { background: #ffedd5; border-color: #fb923c; }
.rg-menu-listing .toolbar-btn                            { background: #f0fdf4; border-color: #86efac; color: #166534; }
.rg-menu-listing .toolbar-btn:hover                      { background: #dcfce7; border-color: #4ade80; }

/* 表示タブ */
.rg-profile .toolbar-btn, .rg-profile .toolbar-select    { background: #f0f9ff; border-color: #7dd3fc; color: #0c4a6e; }
.rg-profile .toolbar-btn:hover                           { background: #e0f2fe; border-color: #38bdf8; }
.rg-column .toolbar-btn                                  { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.rg-column .toolbar-btn:hover                            { background: #d1fae5; border-color: #34d399; }
.rg-food-table .toolbar-btn                              { background: #fef9c3; border-color: #fde047; color: #854d0e; }
.rg-food-table .toolbar-btn:hover                        { background: #fef08a; border-color: #facc15; }
.rg-compare .toolbar-btn                                 { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; }
.rg-compare .toolbar-btn:hover                           { background: #c7d2fe; border-color: #818cf8; }
.rg-google .toolbar-btn                                  { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.rg-google .toolbar-btn:hover                            { background: #fee2e2; border-color: #f87171; }
.rg-user-food .toolbar-btn                               { background: #f0fdf4; border-color: #86efac; color: #166534; }
.rg-user-food .toolbar-btn:hover                         { background: #dcfce7; border-color: #4ade80; }

.toolbar-select {
    padding: 4px 8px;
    font-size: 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

/* === Spreadsheet Container === */
#spreadsheet-container {
    flex: 1;
    overflow: auto;
    position: relative;
    min-width: 0;
    width: 100%;
}

/* === Table === */
#nutrition-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 13px;
    font-family: 'BIZ UDPGothic', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-synthesis-weight: none;
}

/* === Header === */
#nutrition-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

#nutrition-table thead th {
    background: #f0f0f0;
    border: 1px solid #c0c0c0;
    padding: 4px 6px;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: #333;
    user-select: none;
    position: relative;
    min-width: 60px;
}

/* Column header for nutrient columns */
#nutrition-table thead th.nutrient-col {
    min-width: 70px;
    max-width: 100px;
}

/* Unit row */
#nutrition-table thead tr.unit-row th {
    background: #e8e8e8;
    font-weight: 400;
    font-size: 11px;
    color: #666;
    padding: 2px 6px;
}

/* Reference row */
#nutrition-table thead tr.reference-row th {
    background: #fff9e6;
    font-weight: 400;
    font-size: 11px;
    color: #92400e;
    padding: 2px 6px;
}

/* === Cells === */
#nutrition-table tbody td {
    border: 1px solid #d1d5db;
    padding: 2px 4px;
    height: 26px;
    vertical-align: middle;
    background: #fff;
    color: #1f2937;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Row number column */
#nutrition-table tbody td.row-num {
    background: #f0f0f0;
    color: #6b7280;
    text-align: center;
    font-size: 11px;
    width: 30px;
    min-width: 30px;
    cursor: default;
    user-select: none;
}

/* Editable cells */
#nutrition-table tbody td.editable {
    cursor: cell;
}

#nutrition-table tbody td.editable:hover {
    background: #f0f8ff;
}

/* Active/Selected cell */
#nutrition-table tbody td.active {
    outline: 2px solid #2563eb;
    outline-offset: -1px;
    z-index: 2;
}

/* Multi-row selection */
#nutrition-table tbody tr.row-selected {
    background: #dbeafe !important;
}
#nutrition-table tbody tr.row-selected td {
    background: inherit;
    user-select: none;
    -webkit-user-select: none;
}

/* Editing cell */
#nutrition-table tbody td.editing {
    padding: 0;
    overflow: visible;
}

#nutrition-table tbody td.editing input,
#nutrition-table tbody td.editing select {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 2px 4px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}

/* Numeric cells */
#nutrition-table tbody td.numeric {
    text-align: right;
    padding-right: 6px;
    font-variant-numeric: tabular-nums;
}

/* Food name column */
#nutrition-table tbody td.food-name {
    min-width: 180px;
    max-width: 250px;
}

/* Weight column */
#nutrition-table tbody td.weight-col {
    min-width: 60px;
    width: 70px;
}

/* Meal type column */
#nutrition-table tbody td.meal-type {
    min-width: 70px;
    width: 80px;
    position: relative;
}

#nutrition-table tbody td.meal-type .meal-type-label {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#nutrition-table tbody td.meal-type .meal-type-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* 🔴 2026-08-27: ライトで #94a3b8 on #ffffff = 2.56:1 だった (33 箇所)。
       ダークは背景が #1f2937 なので #94a3b8 のままで 5.72:1 通っている。
       一律に暗くするとダークが壊れるので、対で持つ (下の .dark 規則)。 */
    color: #64748b;
    cursor: pointer;
    border-radius: 2px;
    line-height: 1;
    padding: 4px 6px;
    font-size: 10px;
}

#nutrition-table tbody td.meal-type .meal-type-toggle:hover {
    color: #3b82f6;
    background: #eff6ff;
}

/* ダークは背景が暗いので、ライト用に暗くした色をそのまま使うと読めない。 */
.dark #nutrition-table tbody td.meal-type .meal-type-toggle {
    color: #94a3b8;
}

/* Recipe name column */
#nutrition-table tbody td.recipe-name {
    min-width: 120px;
    max-width: 180px;
}

/* === Aggregation Rows === */
/* Recipe subtotal - light blue */
#nutrition-table tbody tr.subtotal-recipe td {
    background-color: #cce5ff;
    font-weight: 600;
    border-color: #b3d4fc;
}

/* Meal category total - light orange */
#nutrition-table tbody tr.subtotal-meal td {
    background-color: #ffe6cc;
    font-weight: 600;
    border-color: #ffd4a8;
}

/* Grand total - light purple */
#nutrition-table tbody tr.subtotal-grand td {
    background-color: #ffccff;
    font-weight: 700;
    border-color: #e6b3e6;
}

/* PFC ratio row */
#nutrition-table tbody tr.pfc-row td {
    background-color: #e6ffe6;
    font-weight: 600;
    font-size: 12px;
    border-color: #b3e6b3;
}

/* Satisfaction rate row */
#nutrition-table tbody tr.satisfaction-row td {
    background-color: #f0f4ff;
    font-weight: 600;
    font-size: 12px;
    border-color: #c7d2fe;
}

/* === Food Search Dropdown === */
.food-search-dropdown {
    position: absolute;
    z-index: 100;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    max-height: 60vh;
    overflow-y: auto;
    min-width: min(350px, 90vw);
}

.food-search-dropdown .search-input-wrapper {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.food-search-dropdown .search-input-wrapper input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
}

.food-search-dropdown .search-input-wrapper input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.food-search-dropdown .search-input-wrapper input::placeholder {
    font-size: 11px;
}

.food-search-item {
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}

.food-search-item:hover,
.food-search-item.highlighted {
    background: #eff6ff;
}

.food-search-item .food-group-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.food-search-item .food-number {
    color: #6b7280;
    font-size: 11px;
    flex-shrink: 0;
    width: 50px;
}

.food-search-item .food-name-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.food-search-no-results {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

/* API エラー時の表示 (0件ヒットと混同させないため色/太さで区別する) */
.food-search-error {
    padding: 16px;
    text-align: center;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
}

/* === Meal Type Dropdown === */
.meal-type-dropdown {
    position: absolute;
    z-index: 100;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 120px;
}

.meal-type-dropdown .dropdown-item {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}

.meal-type-dropdown .dropdown-item:hover {
    background: #eff6ff;
}

.meal-type-dropdown .dropdown-item-disabled {
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.meal-type-dropdown .dropdown-item-disabled:hover {
    background: transparent;
}

.meal-type-dropdown .dropdown-item-clear {
    color: #6b7280;
    font-style: italic;
    border-bottom: 1px solid #e5e7eb;
}

/* === Tooltip (standard amount) === */
.cell-tooltip {
    position: absolute;
    z-index: 200;
    background: #1f2937;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* B.2: 料理名競合ツールチップ (複数行対応のサイズ可変版) */
.cell-conflict-tooltip {
    white-space: normal;
    max-width: 420px;
    min-width: 260px;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
}
.cell-conflict-tooltip .cct-header {
    font-weight: 600;
    margin-bottom: 6px;
    color: #fde68a;
}
.cell-conflict-tooltip .cct-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.cell-conflict-tooltip .cct-item {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: #e5e7eb;
}
.cell-conflict-tooltip .cct-more {
    color: #9ca3af;
    font-size: 11px;
}
.cell-conflict-tooltip .cct-hint {
    font-size: 11px;
    color: #93c5fd;
    padding-top: 4px;
    border-top: 1px solid #374151;
}

/* B.2: 料理名セルの競合ハイライト
 *
 * 🔴🔴 **2026-09-04 (利用者報告「料理名セルがコントラスト不足で判読できません」)。**
 * 薄黄の背景だけを敷いて**文字色を宣言していなかった**ので、ダークでは
 * body から継いだ明るい文字が薄黄の上に乗って読めなかった。
 * **ダーク 1〜4 巡と同じ型**だが、検出器①は「器らしいセレクタ」
 * (`modal|overlay|-panel|dialog|dropdown`) だけを見ていたので**セルは対象外**だった
 * — これが 5 巡目の穴。検出器の範囲を全セレクタへ広げた。
 *
 * 🔴 **背景と文字色は同じ規則に置く。** `#78350f` は `#fef3c7` の上で 8.8:1。
 * `!important` は背景側が既に使っているので、文字色も同じ強さにしないと
 * ダークの `.dark td` 系に負ける。
 */
td.has-dish-conflict {
    background-color: #fef3c7 !important;   /* 薄黄: 注意喚起用 */
    color: #78350f !important;
    position: relative;
}
td.has-dish-conflict.editable:hover {
    background-color: #fde68a !important;
}
/* 料理名の文字そのものも器の色を継ぐ (span に別の色が当たっていても打ち消す)。 */
td.has-dish-conflict .recipe-name-text {
    color: #78350f;
}
.dish-conflict-badge {
    display: inline-block;
    margin-left: 4px;
    color: #b45309;
    font-size: 11px;
    cursor: help;
}

/* ⚖️ **2026-09-04 利用者決定: 同名の料理はセルで「中身のヒント」を出して見分ける。**
   🔴 名前の**下**に小さく置く。横に並べると 120〜180px の列で名前を押し出す
   (`#nutrition-table tbody td.recipe-name` の幅)。
   🔴 色は CSS に書く (JS のインラインへ戻さない)。 */
.recipe-name-dup-hint {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    color: #6b7280;          /* 白地に 4.83:1 */
    white-space: normal;
    word-break: break-word;
}
/* 🔴 競合セル (薄黄の背景) の中でも読める色にする。背景を敷いた器は文字色を持つこと。 */
td.has-dish-conflict .recipe-name-dup-hint {
    color: #78350f;
}

/* Phase 2 (Round 15 合意): 料理名セル右端スロット */
.recipe-name-text {
    /* 中央スロット: 通常色を継承する */
}
.recipe-name-right-slots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
.slot-icon {
    font-size: 11px;
    cursor: help;
    line-height: 1;
}
.slot-icon-info { color: #6b7280; }

/* Phase 2.4: 色凡例モーダル */
.color-legend-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: legend-fade 0.15s ease-out;
}
@keyframes legend-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* 🔴 2026-09-04: 明るい面なので文字色も同じ規則に置く (ダーク未修正の既知 27 件から外した)。
   ⚖️ 利用者報告「凡例モーダルの内容が分かりにくい」の回で一緒に直した。 */
.color-legend-modal {
    background: #fff;
    color: #1f2937;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    max-width: 720px;
    width: calc(100% - 48px);
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.color-legend-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.color-legend-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
.color-legend-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
}
.color-legend-close:hover { color: #111827; }
.color-legend-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    font-size: 13px;
}
.color-legend-modal-body section {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}
.color-legend-modal-body section:last-child { border-bottom: none; }
.color-legend-modal-body h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.legend-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 12px;
}
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ===================================================================
   凡例の作り直し (2026-09-04 · ⚖️ 利用者報告)

   「内容が分かりにくい。どのセルの右端アイコンなのか分からない。
     DB という表現は理解できない。南京錠をどう外すかの説明が必要」

   🔴 **実装と突き合わせて 4 つの食い違いが見つかった** — ①黄と赤の意味が
   入れ替わっていた ②印が出る列 (料理名) を書いていなかった ③🔒 が付く条件を
   実装より広く書いていた (実際は使用重量の確定だけ) ④🔒 を外す経路は存在しない。

   🔴 **凡例は本物のクラスでセルを再現する。** 色をここに書くと、実装の色を
   変えたときに凡例だけ古い色で残る。突き合わせは
   `tests/unit/test_cell_legend_matches_the_screen.py`。
   =================================================================== */
.legend-lead {
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: #f9fafb;
    border-left: 3px solid #6b7280;
    border-radius: 0 4px 4px 0;
    color: #1f2937;
}

/* 料理名セルの再現。実際のセル (`td`) と同じ並びにする。 */
.legend-cell-demo {
    display: inline-block;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.legend-cell-demo-head {
    padding: 4px 10px;
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    font-size: 11.5px;
    font-weight: 600;
    color: #374151;
    text-align: center;
}
.legend-cell-demo-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    min-width: 200px;
    color: #1f2937;
}

.legend-note {
    margin: 6px 0 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #374151;
}
.legend-note-warn {
    padding: 8px 10px;
    background: #fef3c7;
    border-left: 3px solid #b45309;
    border-radius: 0 4px 4px 0;
    color: #78350f;
}
.legend-steps {
    margin: 6px 0 0 0;
    padding-left: 22px;
    font-size: 12px;
    line-height: 1.8;
    color: #374151;
}

/* 🔴 器を白で固定しているので、ダークでも濃い文字にする
   (`.dark` の既定は明るい面向けでないため、そのままだと白地に白文字になる)。 */
.dark .color-legend-modal,
.dark .color-legend-modal-body,
.dark .legend-lead,
.dark .legend-note,
.dark .legend-steps,
.dark .legend-cell-demo-cell {
    color: #1f2937;
}
.dark .legend-note-warn {
    color: #78350f;
}
.legend-autumn-summary {
    background: #fff7ed;
    border-left: 4px solid #f97316;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin-top: 8px;
}
.legend-autumn-summary h4 { color: #9a3412; }
.legend-autumn-summary p {
    margin: 4px 0;
    color: #7c2d12;
    font-size: 12px;
    line-height: 1.5;
}

/* モーダル共通のフェードイン (横展開比較 / AI 代替提案 ほか 3 箇所が使う)。
   元は Phase 4b の再同期モーダル用だったが、そのモーダルは 2026-08-17 に撤去した
   (常食の変更は自動反映せず案内するだけ · spec §5)。名前は参照側を壊さないため据え置き。 */
@keyframes sync-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Phase 5c-2: 展開食 AI 代替提案モーダル */
.variant-ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    animation: sync-modal-fade 0.15s ease-out;
}
.variant-ai-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    max-width: 900px;
    width: calc(100% - 48px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.variant-ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #fdf4ff, #fff7ed);
}
.variant-ai-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #7c2d12;
    display: flex;
    align-items: center;
    gap: 8px;
}
.variant-ai-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
}
.variant-ai-body {
    padding: 18px 22px;
    overflow-y: auto;
    font-size: 13px;
    flex: 1;
}
.variant-ai-section {
    margin-bottom: 14px;
}
.variant-ai-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 13px;
}
.variant-ai-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #1e40af;
}
.variant-ai-warning {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #991b1b;
}
.variant-ai-meta {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 10px;
    text-align: right;
}
.variant-ai-select {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

/* 🔴 2026-08-18: AI 展開食提案 Step 2 の制約入力 (除去アレルゲン / 栄養素の上限 / タグ)。
   食種に持たせていた制約を実行時の入力へ移したことに伴う追加。
   正典: docs/superpowers/specs/2026-08-18-recipe-variant-removal-design.md §8 */
.variant-ai-constraint-group {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.variant-ai-constraint-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.variant-ai-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.variant-ai-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #374151;
    /* iOS の自動ズーム対策で最低 16px を要求される input は checkbox 以外。
       ここは checkbox なので 13px でよい (feedback_ios_input_zoom)。 */
}
.variant-ai-number-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.variant-ai-number-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #374151;
}
.variant-ai-number-field input {
    width: 84px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 6px;
    /* 🔴 iOS が 16px 未満の input で自動ズームするため 16px を切らない */
    font-size: 16px;
    /* 🔴 背景と文字色は必ず両方書く。ライトで color を省くと body の継承
       (html.dark 用の gray-100) を拾って**白背景に白文字**になる。
       実測 1.10:1 で読めなかった (2026-08-19 · 実画面で発見)。
       同じ注意はこのファイルの `.recipe-*` 系にも書いてある。 */
    background: #ffffff;
    color: #111827;
}
.variant-ai-text-input {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    /* 🔴 同上 (font-size 16px / 背景と文字色を両方明示) */
    font-size: 16px;
    background: #ffffff;
    color: #111827;
}

.dark .variant-ai-constraint-group {
    background: #1f2937;
    border-color: #374151;
}
.dark .variant-ai-constraint-label,
.dark .variant-ai-checkbox,
.dark .variant-ai-number-field {
    color: #e5e7eb;
}
.dark .variant-ai-number-field input,
.dark .variant-ai-text-input {
    background: #111827;
    border-color: #4b5563;
    color: #f3f4f6;
}
.variant-ai-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #d1d5db;
    background: white;
    font-weight: 500;
}
.variant-ai-btn-primary {
    background: #f97316;
    color: white;
    border-color: #f97316;
}
.variant-ai-btn-primary:hover:not(:disabled) { background: #ea580c; }
.variant-ai-btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }

.variant-ai-bulk-list {
    margin: 8px 0;
    padding-left: 20px;
    font-size: 12px;
    color: #6b7280;
    max-height: 180px;
    overflow-y: auto;
}
.variant-ai-loading {
    text-align: center;
    padding: 40px 20px;
}
.variant-ai-spinner {
    font-size: 32px;
    color: #f97316;
    margin-bottom: 14px;
}

.variant-ai-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.variant-ai-card {
    background: white;
    border: 1.5px solid #fdba74;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.variant-ai-card-header {
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 6px;
}
.variant-ai-card-title {
    font-weight: 600;
    font-size: 13px;
    color: #7c2d12;
}
.variant-ai-card-rationale {
    background: #fff7ed;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: #9a3412;
    line-height: 1.4;
}
.variant-ai-card-foods {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    font-size: 11px;
    color: #374151;
}

.variant-ai-plan-section {
    margin-bottom: 14px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.variant-ai-plan-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #374151;
}

/* 一括登録 (2026-08-31): 候補の選択と、まとめて登録するボタン群。
   🔴 既存クラスを流用せず専用に足す。共有クラスは別の場所の前提ごと
   引き継いでしまう (docs/incidents/README.md の st-cell の件)。 */
.variant-ai-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.variant-ai-card-title {
    flex: 1;
    min-width: 0;
}
.variant-ai-card-pick {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #ea580c;
}
.variant-ai-plan-title {
    display: flex;
    align-items: center;
    gap: 6px;
}
.variant-ai-plan-include {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #ea580c;
}
.variant-ai-card-steps-label {
    font-size: 11px;
    font-weight: 600;
    color: #7c2d12;
}
.variant-ai-card-steps {
    list-style: decimal;
    padding-left: 18px;
    margin: 0;
    font-size: 11px;
    color: #374151;
    line-height: 1.5;
}
.variant-ai-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* Phase 6b: 月一括展開モーダル */
.variant-bulk-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
    animation: sync-modal-fade 0.15s ease-out;
}
.variant-bulk-modal {
    background: white;
    /* Fix 1 (2026-07-23): 白背景固定コンテナに明示 color (html.dark 時の body gray-100 継承による白on白防止) */
    color: #1f2937;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    max-width: 840px;
    width: calc(100% - 48px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.variant-bulk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
}
.variant-bulk-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
}
.variant-bulk-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
}
.variant-bulk-body {
    padding: 18px 22px;
    overflow-y: auto;
    font-size: 13px;
    flex: 1;
}
.variant-bulk-section { margin-bottom: 14px; }
.variant-bulk-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 13px;
}
.variant-bulk-sublabel {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin: 10px 0 4px;
    font-weight: 500;
}
.variant-bulk-sublabel.success { color: #059669; }
.variant-bulk-sublabel.failure { color: #dc2626; }
.variant-bulk-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #1e40af;
}
.variant-bulk-warning {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #991b1b;
}
.variant-bulk-select,
.variant-bulk-input,
.variant-bulk-filter {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    margin-bottom: 10px;
}
.variant-bulk-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.variant-bulk-select-all {
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}
.variant-bulk-count {
    font-size: 11px;
    color: #6b7280;
    margin-left: 4px;
}
.variant-bulk-filter {
    width: auto;
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}
.variant-bulk-table-wrap {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 12px;
}
.variant-bulk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.variant-bulk-table th {
    position: sticky;
    top: 0;
    background: #f9fafb;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
}
.variant-bulk-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #f3f4f6;
}
.variant-bulk-table tr:hover { background: #f9fafb; }
.variant-bulk-date,
.variant-bulk-cat {
    color: #6b7280;
    font-size: 11px;
}
.variant-bulk-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #d1d5db;
    background: white;
    font-weight: 500;
}
.variant-bulk-btn-primary {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
.variant-bulk-btn-primary:hover:not(:disabled) { background: #2563eb; }
.variant-bulk-btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }
.variant-bulk-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.variant-bulk-loading {
    text-align: center;
    padding: 40px 20px;
}
.variant-bulk-spinner {
    font-size: 32px;
    color: #3b82f6;
    margin-bottom: 14px;
}
.variant-bulk-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.variant-bulk-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
}
.variant-bulk-summary-item.success { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.variant-bulk-summary-item.failure { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.variant-bulk-summary-count {
    font-weight: 700;
    font-size: 14px;
}
.variant-bulk-result-list {
    list-style: none;
    padding: 0;
    margin: 4px 0;
    font-size: 12px;
}
.variant-bulk-result-list li {
    padding: 6px 10px;
    border-bottom: 1px solid #f3f4f6;
    background: #f0fdf4;
    border-radius: 4px;
    margin-bottom: 3px;
}
.variant-bulk-result-list.failure li {
    background: #fef2f2;
    color: #991b1b;
}
.variant-bulk-result-sub {
    font-size: 10px;
    color: #6b7280;
    margin-top: 2px;
}

/* Phase 7b: 食数集計マトリクスモーダル */
.headcount-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2300;
    animation: sync-modal-fade 0.15s ease-out;
}
.headcount-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    max-width: 95vw;
    max-height: 92vh;
    width: 1100px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.headcount-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #ecfdf5, #f0f9ff);
}
.headcount-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 8px;
}
.headcount-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
}
.headcount-body {
    padding: 16px 20px;
    overflow: auto;
    font-size: 13px;
    flex: 1;
}
.headcount-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.headcount-nav-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    text-align: center;
}
.headcount-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #d1d5db;
    background: white;
}
.headcount-btn:hover { background: #f9fafb; }
.headcount-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #1e40af;
}
.headcount-warning {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #991b1b;
}
.headcount-matrix-wrap {
    overflow: auto;
    max-height: 60vh;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 12px;
    background: white;
}
.headcount-matrix {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}
.headcount-matrix th,
.headcount-matrix td {
    border: 1px solid #e5e7eb;
    padding: 4px 6px;
    text-align: center;
    min-width: 36px;
}
.headcount-th-corner,
.headcount-td-cat {
    position: sticky;
    left: 0;
    background: #f9fafb;
    z-index: 2;
    font-weight: 600;
    text-align: left;
    min-width: 120px;
}
.headcount-matrix thead th {
    position: sticky;
    top: 0;
    background: #f9fafb;
    z-index: 3;
    font-weight: 600;
    color: #374151;
}
.headcount-th-corner {
    z-index: 4;
}
.headcount-th-date.sunday { background: #fee2e2; color: #991b1b; }
.headcount-th-date.saturday { background: #dbeafe; color: #1e40af; }
.headcount-day { font-weight: 600; font-size: 12px; }
.headcount-wday { font-size: 10px; color: #6b7280; }
.headcount-cat-default {
    font-size: 10px;
    color: #9ca3af;
    font-weight: normal;
    margin-top: 2px;
}
.headcount-td-cell {
    cursor: pointer;
    transition: background 0.1s;
}
.headcount-td-cell:hover { background: #eff6ff; outline: 2px solid #3b82f6; outline-offset: -2px; }
.headcount-td-cell.default-value { color: #9ca3af; font-style: italic; }
.headcount-td-cell.editing { background: white; padding: 2px; }
.headcount-td-cell.saving { background: #fef3c7; color: #92400e; font-size: 10px; }
.headcount-cell-input {
    width: 100%;
    border: 2px solid #3b82f6;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    text-align: center;
}
.headcount-th-total,
.headcount-td-cat-total {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
}
.headcount-total-row {
    background: #f9fafb;
    font-weight: 600;
}
.headcount-total-row .headcount-td-daily-total {
    background: #f9fafb;
    font-weight: 600;
}
.headcount-td-grand {
    background: #1e40af;
    color: white;
    font-weight: 700;
}
.headcount-summary-meta {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    font-size: 12px;
    color: #065f46;
    text-align: center;
}

.cell-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 12px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1f2937;
}

/* === Header Tooltip === */
.header-tooltip {
    position: fixed;
    z-index: 500;
    background: #f9fafb;
    color: #374151;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
}

.dark .header-tooltip {
    background: #374151;
    color: #f9fafb;
    border-color: #6b7280;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* === Empty State === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d5db;
}

.empty-state p {
    font-size: 14px;
    margin: 4px 0;
}

/* === Nutrient Profile Modal === */

/* 🔴 2026-09-04: 明るい面なので文字色も同じ規則に置く。
   これが無いと、ダークで body から継いだ near-white が白地に乗る (4 巡目と同じ型)。 */
.modal-content {
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
}

/* === Save Sheet Modal === */
.save-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.save-modal-label {
    min-width: 110px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    flex-shrink: 0;
}

.save-modal-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
}

.save-modal-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.save-modal-date-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #374151;
}

.save-modal-select {
    padding: 5px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    min-width: 60px;
    outline: none;
}

.save-modal-select:focus {
    border-color: #3b82f6;
}

/* 🔴 .save-modal-combine (「テキストと日付を組み合わせる」) と .save-modal-example
   (その例示) は 2026-08-17 に撤去した (2026-08-16 spec §1 規則 9)。
   シート名は「日付 + 食種名」だけで決まるので、組み合わせる相手 (自由テキスト) が無い。 */

.save-modal-preview {
    font-size: 14px;
    font-weight: 600;
    color: #1d4ed8;
    padding: 4px 0;
}

/* 保存モーダルの入力案内 (2026-08-16 テーマ B)。
   入力の不備は alert ではなくここに常時表示する。
   🔴 色は必ずライト/ダークの両方を定義する (片方だけだと読めなくなる)。 */
.save-modal-guidance-row {
    align-items: flex-start;
}

.save-modal-guidance {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    background: #fef3c7;
    color: #78350f;
    font-size: 12px;
    line-height: 1.6;
}

.save-modal-guidance.is-highlighted {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

/* ダーク側の実測 (2026-08-16): 文字 #fde68a on #573b0a = 8.29 /
   案内背景 #573b0a vs モーダル背景 #1f2937 = 1.42 (ライト側 1.11 より分離が強い) */
.dark .save-modal-guidance {
    border-color: #b45309;
    border-left-color: #fbbf24;
    background: #573b0a;
    color: #fde68a;
}

.dark .save-modal-guidance.is-highlighted {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45);
}

/* 保存モーダルのダークモード可読性 (2026-08-16 テーマ C 追加分)。
   .save-modal-label / -date-wrap はライトの #374151 を固定で持っており、
   ダークのモーダル背景 (.dark .modal-content = #1f2937) に対して
   コントラスト比 1.42 しか出ていなかった (ほぼ読めない)。
   .save-modal-preview の #1d4ed8 も同背景で 2.19。
   実測 (WCAG 相対輝度): #e5e7eb on #1f2937 = 11.86 / #93c5fd on #1f2937 = 8.14 */
.dark .save-modal-label,
.dark .save-modal-date-wrap {
    color: #e5e7eb;
}

.dark .save-modal-preview {
    color: #93c5fd;
}

/* 🔴 入力欄をダーク化する既存ルールのセレクタは `.dark .modal-container ...` だが、
   保存モーダルのルート要素は `.modal-content` なので**当たっていなかった**。
   かといって `.dark .modal-content input` と広げてもいけない — 同じ .modal-content を
   使う対象（食種）モーダルの入力欄は inline style で background:#fff を持ち、
   inline が stylesheet に勝つため文字色だけ明色になって白 on 白になる。
   保存モーダル固有のクラス (.save-modal-input / .save-modal-select) まで含めて絞る。
   memo の textarea も .save-modal-input を持つのでここで一緒に当たる。
   実測: #e5e7eb on #111827 = 14.33 */
.dark .modal-content .save-modal-input,
.dark .modal-content .save-modal-select {
    background-color: #111827;
    color: #e5e7eb;
    border-color: #4b5563;
}

/* === 保存モーダルの「対象（食種）」行 (2026-08-16 C-3) ===
   保存の直前に対象（食種）を確認・変更できるようにした行。選択 UI 自体は
   ツールバーと同じ食種モーダルを開き直すので、ここにあるのは
   「今の選択 (チップ)」と「選び直すボタン」だけ。

   🔴 色はライト / ダークの両方を定義する (片方だけだと必ず読めなくなる)。
   実測 (WCAG 相対輝度 · モーダル背景は .modal-content = #fff / .dark = #1f2937):
     ライト  未設定文言 #6b7280 on #ffffff = 4.83 / ボタン #1d4ed8 on #eff6ff = 6.16
             (ボタン hover #1d4ed8 on #dbeafe = 5.49)
     ダーク  未設定文言 #9ca3af on #1f2937 = 5.78 / ボタン #bfdbfe on #1e3a8a = 7.29
             (ボタン hover #bfdbfe on #1e40af = 6.14)
   🔴 チップは 2026-08-17 に CSS へ移した (.sheet-target-chip · 下)。
   1 シート = 1 食種 (spec §1 規則 2) になり、複数並んだときに見分けるための
   7 色パレットが不要になったため。JS で色を直書きするとダークで必ず破綻する。 */
.save-modal-target-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* 上書き / 名前を付けて保存の選択モーダル (幅 400px) は縦積みにする */
.save-modal-target-row-compact {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.save-modal-target-body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.save-modal-target-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.save-modal-target-empty {
    font-size: 12px;
    color: #6b7280;
}

.save-modal-target-btn {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}

.save-modal-target-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.dark .save-modal-target-empty {
    color: #9ca3af;
}

.dark .save-modal-target-btn {
    background: #1e3a8a;
    border-color: #3b82f6;
    color: #bfdbfe;
}

.dark .save-modal-target-btn:hover {
    background: #1e40af;
    border-color: #60a5fa;
}

/* === 対象（食種）のチップ (2026-08-17 · spec §1 規則 2) ===
   1 枚のシートは 1 つの食種だけを持つので、チップは常に 1 個。
   以前は JS が 7 色のパレットから背景・文字色を直書きしていた
   (複数並んだときに見分けるため)。単一になって色分けの意味が消えたので、
   CSS へ移してダークモードを効かせられるようにした。

   実測 (WCAG 相対輝度 · 2026-08-17):
     ライト  #1e40af on #dbeafe = 7.15
     ダーク  #bfdbfe on #1e3a8a = 7.29 */
.sheet-target-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.dark .sheet-target-chip {
    background: #1e3a8a;
    color: #bfdbfe;
}

/* === 対象（食種）モーダルの「紐づけない」行 (2026-08-17 · spec §1 規則 11) ===
   radio は「どれも選ばない」状態を利用者が作れない (一度選ぶと解除できない) ので、
   **「紐づけない」も 1 つの選択肢として明示する**のが唯一の外し方。
   個人・個人事業主・養成校では食種が任意なので、この行が無いと
   一度付けた食種を二度と外せなくなる。

   🔴 この行だけダークを定義しないのは意図的。対象（食種）モーダルは
   popup 自身が inline style で `background:#fdf2f8` を持つ**ライト固定の画面**で
   (他の行も inline のパステル背景)、ここだけダーク化すると浮く。
   実測 (ライト · 2026-08-17): 文言 #9d174d on #ffffff = 7.88 */
.serving-category-none-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: #ffffff;
    border: 1.5px dashed #f9a8d4;
}

.serving-category-none-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #9d174d;
    flex: 1;
}

/* === 保存モーダル「このシートの立ち位置」(2026-08-17 · spec §1 規則 11) ===
   4 状態 (常食 / 展開食 / 未紐づけ / 紐づけない選択) を必ず明示するブロック。
   「どれでもない」を空白で表すと、利用者は自分がどの状態にいるのか分からない。

   🔴 色はライト / ダークの両方を定義する (片方だけだと必ず読めなくなる)。
   実測 (WCAG 相対輝度 · モーダル背景は .modal-content = #ffffff / .dark = #1f2937):

     状態         ライト (文字 on 背景)         ダーク (文字 on 背景)
     常食         #14532d on #dcfce7 = 8.30    #bbf7d0 on #14532d = 7.52
     展開食       #7c2d12 on #ffedd5 = 8.18    #fed7aa on #7c2d12 = 6.92
     未紐づけ     #713f12 on #fef3c7 = 7.79    #fde68a on #573b0a = 8.29
     紐づけない   #334155 on #f1f5f9 = 9.45    #cbd5e1 on #334155 = 6.97
     エラー文言   #991b1b on #ffffff = 8.31    #fca5a5 on #1f2937 = 7.73

   紐づけ直しのボタンは既存の .save-modal-target-btn を使う
   (ライト #1d4ed8 on #eff6ff = 6.16 / ダーク #bfdbfe on #1e3a8a = 7.29)。 */
/* 🔴 `min-width: 0` が両方に要る (2026-08-17 · F-17)。
   `.save-modal-row` は flex コンテナで、その子は既定が `min-width: auto` = **中身より
   小さくなれない**。紐づけ直しの行 (プルダウン + ボタン) がモーダル幅を超えると、
   縮む代わりに**モーダルごと横に伸びて横スクロールバーが出る**。
   プルダウン単体には既に `min-width: 0` があったが、**祖先に無いと効かない**。 */
.save-modal-role-row {
    align-items: flex-start;
    min-width: 0;
}

.save-modal-role {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    border-left: 3px solid #64748b;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    line-height: 1.6;
}

.save-modal-role-title {
    font-size: 13px;
    font-weight: 700;
}

.save-modal-role-base {
    font-weight: 600;
    word-break: break-all;
}

.save-modal-role-relink {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* 🔴 ラベルは 1 行を占有させる (2026-08-17 · F-7)。
   「元のメイン献立」+ プルダウン + ボタンを 1 行に詰めると、モーダル幅 (520px) で
   ちょうど収まらず、**ボタンだけが縮んで「このメイン献立に紐…」で切れて**いた。 */
.save-modal-role-relink-label {
    flex: 0 0 100%;
    font-size: 12px;
    font-weight: 600;
}

/* ボタンは縮ませない。縮むと文言が読めなくなる (F-7)。
   プルダウン側が `flex: 1 1 180px` + `min-width: 0` なので、狭いときは
   プルダウンが縮み、それでも足りなければ折り返す。 */
.save-modal-role-relink .save-modal-target-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 候補のシート名は長くなりうる。モーダル (520px) をはみ出させない
   (flex item の自動最小サイズ対策は C-8 と同じ min-width: 0)。 */
.save-modal-role-select {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 100%;
}

.save-modal-role-error {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #991b1b;
}

/* 状態ごとの色 (ライト)。`.save-modal-role` と同じ詳細度以上にするため
   クラスを 2 つ重ねる (単独の .save-modal-role-base では負ける)。 */
.save-modal-role.save-modal-role-base {
    border-color: #86efac;
    border-left-color: #16a34a;
    background: #dcfce7;
    color: #14532d;
}

.save-modal-role.save-modal-role-expansion {
    border-color: #fdba74;
    border-left-color: #ea580c;
    background: #ffedd5;
    color: #7c2d12;
}

.save-modal-role.save-modal-role-unlinked {
    border-color: #fcd34d;
    border-left-color: #f59e0b;
    background: #fef3c7;
    color: #713f12;
}

.save-modal-role.save-modal-role-unassigned {
    border-color: #cbd5e1;
    border-left-color: #64748b;
    background: #f1f5f9;
    color: #334155;
}

/* 状態ごとの色 (ダーク) */
.dark .save-modal-role.save-modal-role-base {
    border-color: #166534;
    border-left-color: #4ade80;
    background: #14532d;
    color: #bbf7d0;
}

.dark .save-modal-role.save-modal-role-expansion {
    border-color: #9a3412;
    border-left-color: #fb923c;
    background: #7c2d12;
    color: #fed7aa;
}

.dark .save-modal-role.save-modal-role-unlinked {
    border-color: #b45309;
    border-left-color: #fbbf24;
    background: #573b0a;
    color: #fde68a;
}

.dark .save-modal-role.save-modal-role-unassigned {
    border-color: #475569;
    border-left-color: #94a3b8;
    background: #334155;
    color: #cbd5e1;
}

.dark .save-modal-role-error {
    color: #fca5a5;
}

/* === 対象（食種）モーダル: 食種名 / 人数 / 表示順の行 (2026-08-16 C-8) ===
   「表示順」の入力欄がモーダルの右外へはみ出していた。

   原因は flex item の自動最小サイズ (min-width: auto)。食種名の
   <input type="text"> は size 属性の既定 (20 文字) 由来の intrinsic width を持ち、
   flex:2 (flex-basis:0) を指定しても**その幅より下には縮まない**。
   その結果、行の min-content 幅が 448px で固定される。

   実測 (chrome-headless-shell 1208 · 2026-08-16):
     行の min-content 幅                                 448px
     モーダル内側の幅 (max-width:480px · content-box)     480px
     - モーダル自身の縦スクロールバー                     -19px
     - 一覧 (list) の縦スクロールバー ※編集行のみ         -15px
     - 行 (row) の左右 padding ※編集行のみ               -20px
     => 実際に使える幅は約 422px しかなく、
        新規追加行が 25.9px · 編集行が 26.9px 右へはみ出す。
   食種が数件しか無くスクロールバーが出ない間は再現しない (これで見落とされていた)。
   修正後はどちらも 0px。767px 以下は .mobile-only-notice でこの画面自体が出ないため、
   検証は 768px 以上で行う。

   行の display / gap / align-items は JS の inline style で決まるため、
   ここでは inline に無いプロパティだけを補う。 */
.serving-category-field-row {
    flex-wrap: wrap;
}

/* 本体の修正: 食種名の入力欄を縮められるようにする。 */
.serving-category-field-row > input[type="text"] {
    min-width: 0;
}

/* 人数 / 表示順の数値入力は width が content-box で効いており、
   padding + border の分 (11px) だけ宣言値より太っていた。 */
.serving-category-field-row input[type="number"] {
    box-sizing: border-box;
}

/* === Column Settings Modal === */
.nutrient-group {
    margin-bottom: 8px;
}

.nutrient-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    user-select: none;
}

.nutrient-group-header:hover {
    background: #e5e7eb;
}

.group-toggle {
    font-size: 10px;
    color: #6b7280;
}

.nutrient-checkbox-list {
    padding: 4px 0 4px 16px;
}

.nutrient-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    color: #1f2937;
}

.nutrient-checkbox-item:hover {
    background: #eff6ff;
}

.nutrient-checkbox-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.selected-columns-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-column-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 12px;
    color: #1f2937;
}

.selected-column-item:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.selected-column-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.column-bulk-btn {
    padding: 2px 8px;
    font-size: 11px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.column-bulk-btn:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.column-drag-handle {
    cursor: grab;
    color: #9ca3af;
    font-size: 14px;
    padding: 0 4px;
    flex-shrink: 0;
    user-select: none;
}

.column-drag-handle:active {
    cursor: grabbing;
}

.selected-column-item.dragging {
    opacity: 0.4;
}

.selected-column-item.drag-over-top {
    border-top: 2px solid #6366f1;
}

.selected-column-item.drag-over-bottom {
    border-bottom: 2px solid #6366f1;
}

/* Dark mode - Column Settings */
.dark .nutrient-group-header {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.dark .nutrient-group-header:hover {
    background: #4b5563;
}

.dark .nutrient-checkbox-item {
    color: #e5e7eb;
}

.dark .nutrient-checkbox-item:hover {
    background: #374151;
}

.dark .selected-column-item {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

.dark .selected-column-item:hover {
    background: #374151;
    border-color: #6366f1;
}

.dark .column-bulk-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark .column-bulk-btn:hover {
    background: #4b5563;
    color: #e5e7eb;
}

.dark .column-drag-handle {
    color: #6b7280;
}

.dark .modal-content {
    background: #1f2937;
    color: #e5e7eb;
}

.dark .modal-header {
    border-color: #374151;
}

.dark .modal-header h3 {
    color: #e5e7eb;
}

.dark .modal-close {
    color: #9ca3af;
}

.dark .modal-footer {
    border-color: #374151;
}

.dark .modal-container {
    background: #1f2937;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.dark .modal-container .modal-body {
    color: #e5e7eb;
}
.dark .modal-container .modal-header {
    background: #111827;
    border-color: #374151;
}
/* ダークモーダル内の入力欄: UA デフォルトの白背景のまま明色文字を継承すると
   白on白 (実測1.16) になるため、フィールドをダーク配色に正規化する */
.dark .modal-container input:not([type="checkbox"]):not([type="radio"]),
.dark .modal-container textarea,
.dark .modal-container select {
    background-color: #111827;
    color: #e5e7eb;
    border-color: #4b5563;
}

/* === PFC Popup === */
.pfc-popup-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    max-width: 420px;
    width: 90%;
    overflow: hidden;
}

.pfc-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.pfc-popup-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.pfc-popup-body {
    padding: 20px;
}

.pfc-bar-container {
    display: flex;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}

.pfc-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    font-weight: 700;
    font-size: 13px;
    min-width: 24px;
}

.pfc-bar-p { background: #FBCFE8; }
.pfc-bar-f { background: #FCD34D; }
.pfc-bar-c { background: #BFDBFE; }

.pfc-values {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.pfc-value-item {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.pfc-value-item.pfc-p { border-left: 3px solid #FBCFE8; }
.pfc-value-item.pfc-f { border-left: 3px solid #FCD34D; }
.pfc-value-item.pfc-c { border-left: 3px solid #BFDBFE; }

.pfc-value-label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
}

.pfc-value-num {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
}

.pfc-ratio-summary {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    padding: 8px;
    background: #f3f4f6;
    border-radius: 6px;
}

/* PFC popup dark mode */
.dark .pfc-popup-content {
    background: #1f2937;
}

.dark .pfc-popup-header {
    border-color: #374151;
}

.dark .pfc-popup-header h3 {
    color: #e5e7eb;
}

.dark .pfc-value-item {
    background: #111827;
    border-color: #374151;
}

.dark .pfc-value-num {
    color: #e5e7eb;
}

.dark .pfc-ratio-summary {
    background: #111827;
    color: #e5e7eb;
}

/* === Scrollbar Styling === */
#spreadsheet-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#spreadsheet-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#spreadsheet-container::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 5px;
}

#spreadsheet-container::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* === Loading Indicator === */
.sheet-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
}

.sheet-loading .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === Dark mode support === */
.dark #nutrition-sheet-app {
    background: #111827;
}

.dark #ribbon {
    background: #111827;
    border-color: #374151;
}

.dark .ribbon-tab-bar {
    background: #1f2937;
    border-color: #374151;
}

.dark .ribbon-tab-bar h2 {
    color: #f3f4f6;
}

.dark .sheet-name-display {
    color: #9ca3af;
}

/* C-9: ダークテーマの未保存バッジ。
   コントラスト実測: 文字 #fde68a / 背景 #78350f = 7.28 */
.dark .unsaved-indicator {
    color: #fde68a;
    background: #78350f;
    border-color: #f59e0b;
}

.dark .ribbon-tab {
    color: #d1d5db;
}

.dark .ribbon-tab:hover {
    background: #374151;
}

.dark .ribbon-tab.active {
    background: #111827;
    color: #f3f4f6;
    border-bottom-color: #22c55e;
}

.dark .ribbon-toggle-btn {
    color: #9ca3af;
}

.dark .ribbon-toggle-btn:hover {
    color: #e5e7eb;
}

.dark .ribbon-panel {
    background: #1f2937;
    border-color: #374151;
}

.dark .ribbon.collapsed .ribbon-panel.ribbon-panel-peek {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark .ribbon-group-label {
    color: #9ca3af;
}

.dark .ribbon-group-separator {
    background: #374151;
}

.dark .ribbon-inline-label {
    color: #9ca3af;
}

.dark .toolbar-btn {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

.dark .toolbar-btn:hover {
    background: #4b5563;
}

/* C-9: ダークテーマの保存ボタン強調。
   コントラスト実測: 文字 #fde68a / 背景 #78350f = 7.28, 枠 #f59e0b / 背景 #78350f = 4.22 */
.dark .toolbar-btn.has-unsaved {
    background: #78350f;
    color: #fde68a;
    border-color: #f59e0b;
}

.dark .toolbar-btn.has-unsaved:hover {
    background: #92400e;
    border-color: #fbbf24;
}

.dark .toolbar-btn.primary {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

/* Dark mode: pastel colors with lower brightness */
.dark .rg-file .toolbar-btn:not(.primary):not(.danger)      { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
.dark .rg-file .toolbar-btn:not(.primary):not(.danger):hover { background: #1e40af; border-color: #3b82f6; }
.dark .rg-row .toolbar-btn:not(.danger)                      { background: #451a03; border-color: #b45309; color: #fcd34d; }
.dark .rg-row .toolbar-btn:not(.danger):hover                { background: #78350f; border-color: #d97706; }
.dark .rg-row .toolbar-btn.danger                            { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
.dark .rg-row .toolbar-btn.danger:hover                      { background: #7f1d1d; border-color: #dc2626; }
.dark .rg-calc .toolbar-btn                                  { background: #064e3b; border-color: #059669; color: #6ee7b7; }
.dark .rg-calc .toolbar-btn:hover                            { background: #065f46; border-color: #10b981; }
.dark .rg-recipe-search .toolbar-btn                         { background: #2e1065; border-color: #7c3aed; color: #c4b5fd; }
.dark .rg-recipe-search .toolbar-btn:hover                   { background: #3b0764; border-color: #8b5cf6; }
.dark .rg-recipe .toolbar-btn                                { background: #500724; border-color: #be185d; color: #f9a8d4; }
.dark .rg-recipe .toolbar-btn:hover                          { background: #831843; border-color: #db2777; }
.dark .rg-meal-category .toolbar-btn                         { background: #431407; border-color: #c2410c; color: #fdba74; }
.dark .rg-meal-category .toolbar-btn:hover                   { background: #7c2d12; border-color: #ea580c; }
.dark .rg-nutrition-ratio .toolbar-btn                       { background: #042f2e; border-color: #0d9488; color: #5eead4; }
.dark .rg-nutrition-ratio .toolbar-btn:hover                 { background: #115e59; border-color: #14b8a6; }
.dark .rg-chart .toolbar-btn                                 { background: #1e1b4b; border-color: #4f46e5; color: #a5b4fc; }
.dark .rg-chart .toolbar-btn:hover                           { background: #312e81; border-color: #6366f1; }
.dark .rg-irodori .toolbar-btn                               { background: #4a044e; border-color: #a21caf; color: #e879f9; }
.dark .rg-irodori .toolbar-btn:hover                         { background: #701a75; border-color: #c026d3; }
.dark .rg-summary .toolbar-btn                               { background: #083344; border-color: #0891b2; color: #67e8f9; }
.dark .rg-summary .toolbar-btn:hover                         { background: #155e75; border-color: #06b6d4; }
.dark .rg-export .toolbar-btn                                { background: #052e16; border-color: #16a34a; color: #86efac; }
.dark .rg-export .toolbar-btn:hover                          { background: #166534; border-color: #22c55e; }
.dark .rg-report .toolbar-btn                                { background: #431407; border-color: #c2410c; color: #fdba74; }
.dark .rg-report .toolbar-btn:hover                          { background: #7c2d12; border-color: #ea580c; }
.dark .rg-menu-listing .toolbar-btn                          { background: #052e16; border-color: #16a34a; color: #86efac; }
.dark .rg-menu-listing .toolbar-btn:hover                    { background: #166534; border-color: #22c55e; }
.dark .rg-profile .toolbar-btn, .dark .rg-profile .toolbar-select { background: #0c4a6e; border-color: #0284c7; color: #7dd3fc; }
.dark .rg-profile .toolbar-btn:hover                         { background: #075985; border-color: #0ea5e9; }
.dark .rg-column .toolbar-btn                                { background: #064e3b; border-color: #059669; color: #6ee7b7; }
.dark .rg-column .toolbar-btn:hover                          { background: #065f46; border-color: #10b981; }
.dark .rg-food-table .toolbar-btn                            { background: #422006; border-color: #ca8a04; color: #fde047; }
.dark .rg-food-table .toolbar-btn:hover                      { background: #713f12; border-color: #eab308; }
.dark .rg-compare .toolbar-btn                               { background: #1e1b4b; border-color: #4f46e5; color: #a5b4fc; }
.dark .rg-compare .toolbar-btn:hover                         { background: #312e81; border-color: #6366f1; }
.dark .rg-google .toolbar-btn                                { background: #450a0a; border-color: #b91c1c; color: #fca5a5; }
.dark .rg-google .toolbar-btn:hover                          { background: #7f1d1d; border-color: #dc2626; }
.dark .rg-user-food .toolbar-btn                             { background: #052e16; border-color: #16a34a; color: #86efac; }
.dark .rg-user-food .toolbar-btn:hover                       { background: #166534; border-color: #22c55e; }

.dark #nutrition-table thead th {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.dark #nutrition-table thead tr.unit-row th {
    background: #1f2937;
    color: #9ca3af;
}

.dark #nutrition-table thead tr.reference-row th {
    background: #422006;
    color: #fbbf24;
}

.dark #nutrition-table tbody td {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.dark #nutrition-table tbody td.row-num {
    background: #374151;
    color: #9ca3af;
}

.dark #nutrition-table tbody td.editable:hover {
    background: #1e3a5f;
}

.dark #nutrition-table tbody tr.subtotal-recipe td {
    background-color: #1e3a5f;
    border-color: #2563eb;
}

.dark #nutrition-table tbody tr.subtotal-meal td {
    background-color: #451a03;
    border-color: #92400e;
}

.dark #nutrition-table tbody tr.subtotal-grand td {
    background-color: #4a1d6a;
    border-color: #7c3aed;
}

.dark #nutrition-table tbody tr.satisfaction-row td {
    background-color: #1e1b4b;
    border-color: #4338ca;
}

.dark #nutrition-table tbody tr.pfc-row td {
    background-color: #052e16;
    border-color: #166534;
}

/* Dark mode - Mobile Notice */
.dark .mobile-notice-content {
    background: #1f2937;
}

.dark .mobile-notice-content h3 {
    color: #e5e7eb;
}

.dark .mobile-notice-content p {
    color: #9ca3af;
}

.dark .mobile-notice-content i {
    color: #9ca3af;
}

.dark .food-search-dropdown {
    background: #1f2937;
    border-color: #4b5563;
}

.dark .food-search-dropdown .search-input-wrapper {
    background: #1f2937;
    border-color: #374151;
}

.dark .food-search-dropdown .search-input-wrapper input {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

.dark .food-search-item {
    border-color: #374151;
    color: #e5e7eb;
}

.dark .food-search-item:hover,
.dark .food-search-item.highlighted {
    background: #374151;
}

.dark .food-search-error {
    color: #f87171;
}

/* === Mobile Notice Overlay === */
.mobile-only-notice {
    display: none;
}

/* === Responsive: Tablet (max-width: 1024px) === */
@media (max-width: 1024px) {
    .ribbon-tab-bar h2 {
        display: none;
    }

    .sheet-name-display {
        display: none;
    }

    .ribbon-tab {
        padding: 8px 12px;
        font-size: 14px;
    }

    .toolbar-btn {
        padding: 8px 12px;
        font-size: 14px;
    }

    .toolbar-select {
        padding: 8px 10px;
        font-size: 16px;
    }

    .ribbon.collapsed .ribbon-panel.ribbon-panel-peek {
        position: absolute;
        top: 100%;
    }

    /* 既存のテーブルセル/モーダルルールは維持 */
    #nutrition-table tbody td {
        height: 36px;
        padding: 4px 6px;
    }

    #nutrition-table tbody td.meal-type .meal-type-toggle {
        transform: translateY(-50%) scale(1.0);
        opacity: 0.6;
    }

    .modal-content {
        max-height: calc(100vh - 40px);
    }

    .modal-body {
        -webkit-overflow-scrolling: touch;
    }
}

/* === Responsive: Smartphone (max-width: 767px) === */
@media (max-width: 767px) {
    #nutrition-sheet-app {
        width: 0;
        max-width: 0;
        overflow: hidden;
    }
    .mobile-only-notice {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(0,0,0,0.5);
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .mobile-notice-content {
        background: #fff;
        border-radius: 12px;
        padding: 32px 24px;
        text-align: center;
        max-width: 360px;
        width: 100%;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }

    .mobile-notice-content i {
        font-size: 48px;
        color: #6b7280;
        margin-bottom: 16px;
        display: block;
    }

    .mobile-notice-content h3 {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 12px;
    }

    .mobile-notice-content p {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 8px;
        line-height: 1.5;
    }

    .mobile-notice-content .toolbar-btn {
        margin-top: 16px;
        padding: 10px 24px;
        font-size: 15px;
    }

    /* ツールバータイトル省略 */
    .ribbon-tab-bar h2 {
        font-size: 14px;
    }
}

/* === Touch device: hover alternatives === */
@media (hover: none) {
    #nutrition-table tbody td.meal-type .meal-type-toggle {
        opacity: 0.6;
        transform: translateY(-50%) scale(1.0);
    }

    #nutrition-table tbody td.editable {
        background: #fafbff;
    }

    .dark #nutrition-table tbody td.editable {
        background: #1a2332;
    }

    /* 食品検索の項目タッチターゲット拡大 */
    .food-search-item {
        padding: 10px 12px;
    }

    .meal-type-dropdown .dropdown-item {
        padding: 10px 14px;
    }
}

/* === 100dvh fix === */
@supports (height: 100dvh) {
    #nutrition-sheet-app {
        height: calc(100dvh - 64px);
    }
    @media (max-width: 1024px) {
        .modal-content {
            max-height: calc(100dvh - 40px);
        }
    }
}

/* === Print styles === */
@media print {
    #ribbon { display: none; }
    #nutrition-sheet-app {
        height: auto;
        overflow: visible;
    }
    #spreadsheet-container {
        overflow: visible;
    }
    #nutrition-table thead {
        position: static;
    }
    #nutrition-table tbody td,
    #nutrition-table thead th {
        border: 1px solid #000;
    }
}

/* ============================================================
   Meal Category Set Selector & Manager
   ============================================================ */

/* Toolbar selector */
#meal-category-set-selector {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.meal-set-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meal-set-caret {
    font-size: 0.7em;
    opacity: 0.6;
}

/* Set dropdown */
.meal-set-dropdown {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}
.meal-set-dropdown .dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
}
.meal-set-dropdown .dropdown-item:hover {
    background: #f3f4f6;
}
.meal-set-dropdown .dropdown-item-active {
    background: #e0f2fe;
    font-weight: 600;
}
.meal-set-dropdown .dropdown-item-action {
    color: #6b7280;
}
.meal-set-dropdown .dropdown-separator {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

/* Modal */
.meal-category-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    width: 680px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0 4px;
    line-height: 1;
}
.modal-close-btn:hover {
    color: #111;
}

/* Modal container (AI support etc.) */
/* 🔴 2026-09-04: 明るい面なので文字色も同じ規則に置く (上の `.modal-content` と同じ理由)。 */
.modal-container {
    background: #fff;
    color: #1f2937;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    width: 680px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-container .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    color: #1f2937;
}
.modal-container .modal-header {
    background: #f9fafb;
}
.modal-container .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* AI result markdown styles */
#ai-result-content h2 { font-size: 1.15rem; font-weight: 700; margin: 20px 0 8px; }
#ai-result-content h3 { font-size: 1.05rem; font-weight: 600; margin: 16px 0 6px; }
#ai-result-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 16px 0; }
#ai-result-content ul, #ai-result-content ol { padding-left: 1.5em; margin: 6px 0; }
#ai-result-content li { margin-bottom: 2px; }
#ai-result-content strong { font-weight: 600; }
#ai-result-content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
#ai-result-content th, #ai-result-content td { border: 1px solid #d1d5db; padding: 6px 10px; text-align: left; }
#ai-result-content th { background: #f3f4f6; font-weight: 600; }
#ai-result-content p { margin: 6px 0; }

/* Content layout */
.meal-category-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 350px;
}

/* Left panel */
.meal-category-left {
    width: 200px;
    min-width: 180px;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    padding: 12px;
    background: #f9fafb;
}

.meal-cat-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.meal-cat-set-item {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.meal-cat-set-item:hover {
    background: #e5e7eb;
}
.meal-cat-set-item.active {
    background: #dbeafe;
    font-weight: 600;
}
.meal-cat-active-marker {
    color: #2563eb;
    font-size: 0.7em;
}
.meal-cat-badge {
    font-size: 0.7rem;
    background: #e5e7eb;
    padding: 1px 6px;
    border-radius: 4px;
    color: #6b7280;
    margin-left: auto;
}

.meal-cat-add-set-btn {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 12px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: center;
}
.meal-cat-add-set-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Right panel */
.meal-category-right {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.meal-cat-hint {
    color: #9ca3af;
    text-align: center;
    margin-top: 60px;
}

.meal-cat-field-group {
    margin-bottom: 16px;
}
.meal-cat-field-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.meal-cat-name-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}
.meal-cat-name-input:disabled {
    background: #f3f4f6;
    color: #9ca3af;
}

.meal-cat-notice {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #92400e;
    margin-bottom: 16px;
}

/* Category rows */
.meal-cat-list {
    margin-bottom: 8px;
}
.meal-cat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
}
.meal-cat-move {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.meal-cat-move-btn {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 0.6rem;
    padding: 1px 5px;
    cursor: pointer;
    color: #6b7280;
    line-height: 1;
}
.meal-cat-move-btn:hover:not(:disabled) {
    background: #e5e7eb;
}
.meal-cat-move-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.meal-cat-label-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
}
.meal-cat-label-input:disabled {
    background: #f3f4f6;
    color: #6b7280;
}
.meal-cat-del-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #ef4444;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    opacity: 0.6;
}
.meal-cat-del-btn:hover {
    opacity: 1;
}

.meal-cat-add-btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.meal-cat-add-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.meal-cat-btn-group {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

/* Toast notification container (I-4 vertical stack · 2026-06-21) */
#toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20000;
    display: flex;
    flex-direction: column-reverse;  /* 新 toast を上に表示 (column-reverse + flex-end 効果) */
    gap: 8px;
    pointer-events: none;  /* container 自体は click 透過 · 子 toast で pointer-events:auto */
    max-width: 90vw;
}

/* Toast notification */
.toast-notification {
    background: #1f2937;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto;  /* container 透過のため個別に enable */
}
.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* ⚖️ **2026-09-04 利用者決定: トーストは自動で消さない。**
   1 つずつ ✕ を押すのは面倒なので、2 件以上たまったらまとめて閉じられるようにする。
   🔴 container は `column-reverse` なので、DOM の先頭 = 視覚的には一番下。 */
.toast-close-all {
    align-self: center;
    pointer-events: auto;    /* container は click 透過なので個別に enable */
    background: #374151;
    color: #e5e7eb;          /* 8.33:1 */
    border: 1px solid #4b5563;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.78rem;
    cursor: pointer;
}
.toast-close-all:hover {
    background: #4b5563;
}

/* ============================================================
   Recipe Save / Metadata / Cooking Modals
   ============================================================ */

/* Status dot (recipe_name cell) */
.recipe-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
/* 信号機準拠: 完了=緑 / 注意=オレンジ / 要対応=赤 (2026-06-10 #6 修正) */
.recipe-status-dot.saved { background: #22c55e; }       /* 完全保存 */
.recipe-status-dot.no-metadata { background: #f59e0b; } /* 保存済み・メタ未設定 (注意) */
.recipe-status-dot.unsaved { background: #ef4444; }     /* 未保存 (要対応) */

/* Recipe modal overlay */
.recipe-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Recipe modal */
.recipe-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 92%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.recipe-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.recipe-modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}
.recipe-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0 4px;
    line-height: 1;
}
.recipe-modal-close:hover { color: #111; }

.recipe-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.recipe-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
}

/* Recipe list items */
.recipe-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
    border: 1px solid transparent;
    margin-bottom: 4px;
}
.recipe-list-item:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
}
.recipe-list-item-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* ⚖️ 2026-09-04: 一覧は「出現ごと」に出るので、同名の行には中身を添えて見分ける。 */
.recipe-list-item-hint {
    font-size: 0.78rem;
    font-weight: 400;
    color: #6b7280;          /* 白地に 4.83:1 */
}
.recipe-status-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.recipe-status-badge.saved {
    background: #dcfce7;
    color: #166534;
}
.recipe-status-badge.modified {
    background: #fef3c7;
    color: #92400e;
}
.recipe-status-badge.unsaved {
    background: #fee2e2;
    color: #991b1b;
}

/* Metadata form */
.metadata-form-group {
    margin-bottom: 14px;
}
.metadata-form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
/* 🔴 ふりがな入力 (`.metadata-input`) は**クラス名だけ付いていて CSS が
   どこにも無かった** (2026-09-04 実測: 白背景に白文字で **1.24:1**)。
   すぐ隣の `.metadata-select` には定義があり、**片方だけ書き忘れた**形。
   同じ器の規則をここで共有し、二度と片方だけにならないようにする。
   🔴 **色は CSS に書く** — JS のインラインへ戻さない
   (memory feedback_theme_colours_belong_in_css_not_inline)。 */
.metadata-select,
.metadata-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
    /* 🔴 背景を敷いたら文字色も宣言する (ダーク 1〜5 巡と同じ型の欠陥を防ぐ) */
    color: #111827;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}
.metadata-input {
    cursor: text;
}
.metadata-input::placeholder {
    color: #6b7280;   /* 白地に 4.83:1 */
}
.metadata-select:focus,
.metadata-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.metadata-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.metadata-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #e0e7ff;
    border-radius: 16px;
    font-size: 0.85rem;
    color: #3730a3;
}
.metadata-chip-remove {
    cursor: pointer;
    margin-left: 4px;
    color: #6366f1;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}
.metadata-chip-remove:hover {
    color: #ef4444;
}
.metadata-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 10px;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 16px;
    font-size: 0.82rem;
    color: #6b7280;
    cursor: pointer;
}
.metadata-add-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.metadata-link-btn {
    display: inline-block;
    padding: 6px 0;
    font-size: 0.85rem;
    color: #3b82f6;
    cursor: pointer;
    background: none;
    border: none;
}
.metadata-link-btn:hover {
    text-decoration: underline;
}

/* Cooking modal tabs */
.cooking-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 12px;
}
.cooking-tab {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.cooking-tab:hover {
    color: #374151;
}
.cooking-tab.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
    font-weight: 600;
}

/* 前日チェックボックス */
.food-prep-prev-day {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

/* 3タブ対応 - モバイルでの余白調整 */
@media (max-width: 600px) {
    .cooking-tab {
        padding: 8px 8px;
        font-size: 0.8rem;
    }
}

/* Cooking steps */
.cooking-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 4px;
    border: 1px dashed transparent;
    border-radius: 6px;
    margin-bottom: 4px;
    transition: border-color 0.15s, background 0.15s;
}
.cooking-step.drag-over {
    border-color: #3b82f6;
    background: #f0f4ff;
}
.cooking-step .drag-handle {
    cursor: grab;
    color: #9ca3af;
    font-size: 1.2em;
    padding: 4px 2px;
    user-select: none;
    flex-shrink: 0;
}
.cooking-step .drag-handle:active { cursor: grabbing; }
.cooking-step-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    min-width: 24px;
    text-align: right;
    flex-shrink: 0;
    padding-top: 6px;
}
.cooking-step textarea {
    flex: 1;
    resize: vertical;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    min-height: 36px;
    font-family: inherit;
    box-sizing: border-box;
}
.cooking-step textarea:focus {
    border-color: #3b82f6;
    outline: none;
}
.cooking-step-delete {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 4px;
    opacity: 0.6;
    flex-shrink: 0;
}
.cooking-step-delete:hover { opacity: 1; }

/* Food processing table */
.food-processing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.food-processing-table th {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
}
.food-processing-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.food-processing-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}
.food-processing-input:focus {
    border-color: #3b82f6;
    outline: none;
}
.food-processing-select {
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    background: #fff;
    cursor: pointer;
    min-width: 80px;
}

/* Food group management */
.food-group-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.food-group-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}
.food-group-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.food-group-item input[type="text"] {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
}
.food-group-color-input {
    width: 40px;
    height: 30px;
    border: none;
    cursor: pointer;
    background: transparent;
    padding: 0;
}
.food-group-del-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.6;
}
.food-group-del-btn:hover { opacity: 1; }

/* Missing metadata modal */
.missing-metadata-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.missing-metadata-item:last-child { border-bottom: none; }
.missing-metadata-name {
    font-weight: 500;
    color: #1f2937;
}
.missing-metadata-actions {
    display: flex;
    gap: 6px;
}
.missing-metadata-actions button {
    padding: 3px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    color: #374151;
}
.missing-metadata-actions button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Options editor sub-modal */
.options-editor-category {
    margin-bottom: 16px;
}
.options-editor-category-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.options-editor-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.options-editor-item input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
}
.options-editor-item input:disabled {
    background: #f3f4f6;
    color: #9ca3af;
}
.options-editor-item .system-badge {
    font-size: 0.7rem;
    color: #9ca3af;
    white-space: nowrap;
}
.options-editor-delete {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.5;
}
.options-editor-delete:hover { opacity: 1; }
.options-editor-delete:disabled {
    color: #d1d5db;
    cursor: default;
    opacity: 0.3;
}

/* Dark mode for recipe modals */
.dark .recipe-modal {
    background: #1f2937;
}
.dark .recipe-modal-header {
    border-color: #374151;
}
.dark .recipe-modal-header h3 { color: #e5e7eb; }
.dark .recipe-modal-close { color: #9ca3af; }
.dark .recipe-modal-body { color: #e5e7eb; }
.dark .recipe-modal-footer { border-color: #374151; }
.dark .recipe-list-item:hover { background: #374151; }
/* Fix 3 (2026-07-23): 「未設定の料理があります」モーダルの料理名が dark モーダル背景 (#1f2937) と
   同色でハードコードされ同化していたため明示上書き */
.dark .missing-metadata-name { color: #e5e7eb; }

/* 🔴 同名の料理を見分けるための添え書き (食事区分 / 食品名) — 2026-09-04。
   ⚖️ 利用者指摘:「フロントエンド側で見えないものはユーザーには分かりません」。
   薄い色にしすぎない (白地に 4.83:1 の `#6b7280` を下限にする)。 */
.missing-metadata-hint {
    margin-left: 6px;
    font-size: 12px;
    color: #6b7280;
}
.dark .missing-metadata-hint { color: #d1d5db; }
.dark .recipe-list-item-name { color: #e5e7eb; }
/* ⚖️ 2026-09-04: 同名を見分けるヒント。ダークでも読める明るさにする。 */
.dark .recipe-list-item-hint { color: #cbd5e1; }
.dark .recipe-name-dup-hint { color: #cbd5e1; }
.dark .metadata-form-group label { color: #d1d5db; }
.dark .metadata-select,
.dark .metadata-input {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
.dark .metadata-input::placeholder { color: #cbd5e1; }
.dark .metadata-chip { background: #312e81; color: #c7d2fe; }
.dark .cooking-tab { color: #9ca3af; }
.dark .cooking-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
.dark .food-prep-prev-day { accent-color: #60a5fa; }
.dark .cooking-step textarea {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
.dark .food-processing-input {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
.dark .food-processing-select {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

/* ============================================================
   シート読込モーダル
   ============================================================ */
.sheet-load-dialog {
    max-width: 640px;
    width: 92%;
}

.sheet-load-toolbar {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    flex-wrap: wrap;
    align-items: center;
}

.sheet-load-search {
    flex: 1;
    min-width: 150px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

.sheet-load-select {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

.sheet-load-sort-group {
    display: flex;
    gap: 2px;
}

.sheet-load-sort-btn {
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.sheet-load-sort-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.sheet-load-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 20px;
}

.sheet-load-empty {
    padding: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

.sheet-load-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.sheet-load-card:hover {
    background: #f1f5f9;
}

.sheet-load-card-info {
    flex: 1;
    min-width: 0;
}

.sheet-load-card-name {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.sheet-load-card-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
}

.sheet-load-chip {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
}

.sheet-load-card-date {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}
.sheet-load-card-memo {
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sheet-load-preview-memo {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    white-space: pre-wrap;
    word-break: break-word;
}
.sheet-load-preview {
    margin-top: 6px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 12px;
}
.sheet-load-preview-meal {
    display: flex;
    gap: 8px;
    padding: 2px 0;
    line-height: 1.5;
}
.sheet-load-preview-label {
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    min-width: 50px;
}
.sheet-load-preview-dishes {
    color: #64748b;
}
.sheet-load-preview-empty {
    color: #94a3b8;
    font-style: italic;
}

.sheet-load-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sheet-load-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

.sheet-load-btn-load { background: #2563eb; }
.sheet-load-btn-load:hover { background: #1d4ed8; }
.sheet-load-btn-dup { background: #8b5cf6; }
.sheet-load-btn-dup:hover { background: #7c3aed; }
.sheet-load-btn-del { background: #ef4444; }
.sheet-load-btn-del:hover { background: #dc2626; }
.sheet-load-btn-cancel { background: #6b7280; }
.sheet-load-btn-cancel:hover { background: #4b5563; }

/* Inline rename input */
/* 🔴 .sheet-load-rename-input は 2026-08-17 に撤去した (F-16 · 名前変更ごと削除)。
   ライト / ダークの両方を同時に消すこと — 片方だけ残すと死蔵に気づけない。 */

/* Inline delete confirm */
.sheet-load-delete-confirm {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #991b1b;
}

.sheet-load-delete-confirm button {
    padding: 3px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
}

/* Inline duplicate input */
.sheet-load-dup-input {
    font-size: 14px;
    padding: 2px 6px;
    border: 2px solid #8b5cf6;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

.sheet-load-dup-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* Dark mode for sheet load modal */
.dark .sheet-load-dialog {
    background: #1f2937;
}

.dark .sheet-load-search {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

.dark .sheet-load-select {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

.dark .sheet-load-sort-btn {
    background: #374151;
    color: #9ca3af;
    border-color: #4b5563;
}

.dark .sheet-load-sort-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.dark .sheet-load-card {
    border-color: #374151;
}

.dark .sheet-load-card:hover {
    background: #374151;
}

.dark .sheet-load-card-name {
    color: #e5e7eb;
}

.dark .sheet-load-chip {
    background: #312e81;
    color: #c7d2fe;
}

.dark .sheet-load-preview {
    background: #1e293b;
    border-color: #334155;
}
.dark .sheet-load-preview-label {
    color: #94a3b8;
}
.dark .sheet-load-preview-dishes {
    color: #cbd5e1;
}
.dark .sheet-load-preview-empty {
    color: #6b7280;
}
.dark .sheet-load-card-memo {
    color: #9ca3af;
}
.dark .sheet-load-preview-memo {
    color: #cbd5e1;
    border-top-color: #334155;
}
.dark .sheet-load-card-date {
    color: #6b7280;
}

.dark .sheet-load-empty {
    color: #6b7280;
}

.dark .sheet-load-dup-input {
    background: #374151;
    color: #e5e7eb;
    border-color: #a78bfa;
}

.dark .sheet-load-delete-confirm {
    background: #451a1a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* Responsive for sheet load modal */
@media (max-width: 520px) {
    .sheet-load-toolbar {
        padding: 0 12px 8px;
    }
    .sheet-load-search {
        min-width: 100%;
    }
    .sheet-load-list {
        padding: 0 12px;
    }
    .sheet-load-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .sheet-load-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .sheet-load-btn-text {
        display: none;
    }
    .sheet-load-sort-btn .sheet-load-sort-label {
        display: none;
    }
}

/* ============================================================
   料理検索モーダル
   ============================================================ */
/* 🔴 `overflow: hidden` を外さない (2026-09-01)。
   `.recipe-modal` の `hidden` を `visible` で上書きしていたため、
   **`max-height: 85vh` が効かず、12 件以上でモーダルの外へ一覧が描かれていた**
   (スクロールバーも出ないので下の料理に到達できない · 利用者が発見)。
   絞り込みはネイティブの `<select>` で、ドロップダウンはブラウザが
   モーダルの overflow と無関係に描くので `visible` は要らない。 */
.recipe-search-modal {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}
/* タブのパネル (個人レシピ / 組織ライブラリ)。🔴 **ここで flex を切らない。**
   素の `display:block` だとモーダルの `max-height` が `.recipe-search-body` まで
   伝わらず、一覧が内容ぶんに伸びてモーダルの外へ描かれる (スクロールも出ない)。
   `min-height: 0` が要るのは、flex の既定 `min-height:auto` が縮小を止めるため。
   表示の切り替えは JS の `style.display = '' / 'none'` なので、
   隠すときはインラインの `none` が勝つ。 */
.recipe-search-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* 挿入先の選択 (⚖️ 2026-09-04: 料理検索（栄養素）と同じ作法に揃えた)。
   🔴 色はここに書く — JS に書くとインラインが `.dark` に勝ってテーマを切り替えられない。 */
.recipe-search-insert-target {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 0 16px;
}
.recipe-search-insert-target label {
    flex: 0 0 auto;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}
.recipe-search-insert-target select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    background: #fff;
    color: #1f2937;
}
.dark .recipe-search-insert-target label {
    color: #d1d5db;
}

.recipe-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}
.recipe-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 8px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    max-height: 30vh;
    overflow-y: auto;
}
.recipe-search-filter-item {
    display: flex;
    align-items: center;
}
/* 🔴 タブと絞り込みの見出しは **CSS で塗る** (2026-09-03)。
   JS の `style.cssText` に色を書くとインラインが `.dark` より強く、
   ダークで #6b7280 / #2563eb がモーダルの #1f2937 に乗って 3.0:1 前後になる
   (実測 2026-09-03 · 11 要素が AA 未達)。クラスにすれば下の `.dark` が効く。 */
.recipe-search-tabbar {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 16px;
}
.recipe-search-tab {
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #4b5563;
    margin-bottom: -2px;
}
.recipe-search-tab.active {
    color: #1d4ed8;
    font-weight: 600;
    border-bottom-color: #1d4ed8;
}
/* 🔴 `.recipe-search-filter-label` は `recipe-shared-modals.css` へ移した
   (料理作成ページの読み込みモーダルでも同じ見出しを使うため · 2026-09-03)。 */
.recipe-search-filter-select {
    font-size: 16px;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
}

/* 全件表示とページ送り (2026-08-31)。
   🔴 dark 側もここで必ず書く。片方だけだと判読不能になる。 */
.recipe-search-show-all {
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    white-space: nowrap;
}
.recipe-search-show-all:hover {
    background: #dbeafe;
}
.recipe-search-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid #e5e7eb;
}
.recipe-search-pager button {
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #111827;
    cursor: pointer;
}
.recipe-search-pager button:disabled {
    opacity: 0.45;
    cursor: default;
}
.recipe-search-pager-info {
    font-size: 12px;
    color: #6b7280;
}
.recipe-search-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.recipe-search-results {
    flex: 1;
    overflow-y: auto;
    border-right: 1px solid #e5e7eb;
}
.recipe-search-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.recipe-search-item:hover {
    background: #eff6ff;
}
.recipe-search-item.selected {
    background: #dbeafe;
}
.recipe-search-item-meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
}
.recipe-search-preview {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}
.recipe-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.recipe-preview-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
}
.recipe-preview-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* 料理名セル内検索ボタン */
.recipe-cell-search-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
    flex-shrink: 0;
}
.recipe-cell-search-btn:hover {
    color: #2563eb;
}

/* ダークモード */
.dark .recipe-search-input {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
.dark .recipe-search-filter-select {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
.dark .recipe-search-filters {
    border-bottom-color: #4b5563;
}
.dark .recipe-search-tabbar {
    border-bottom-color: #4b5563;
}
.dark .recipe-search-tab {
    color: #d1d5db;
}
.dark .recipe-search-tab.active {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}
.dark .recipe-search-show-all {
    border-color: #3b82f6;
    background: #1e3a5f;
    color: #bfdbfe;
}
.dark .recipe-search-show-all:hover {
    background: #1e40af;
}
.dark .recipe-search-pager {
    border-top-color: #4b5563;
}
.dark .recipe-search-pager button {
    border-color: #4b5563;
    background: #374151;
    color: #e5e7eb;
}
.dark .recipe-search-pager-info {
    color: #9ca3af;
}
.dark .recipe-search-results {
    border-right-color: #4b5563;
}
.dark .recipe-search-item {
    border-bottom-color: #374151;
}
.dark .recipe-search-item:hover {
    background: #1e3a5f;
}
.dark .recipe-search-item.selected {
    background: #1e3a5f;
}
.dark .recipe-search-item-meta {
    color: #9ca3af;
}
.dark .recipe-preview-table th {
    border-bottom-color: #4b5563;
    color: #9ca3af;
}
.dark .recipe-preview-table td {
    border-bottom-color: #4b5563;
}
.dark .recipe-cell-search-btn {
    color: #9ca3af;
}
.dark .recipe-cell-search-btn:hover {
    color: #60a5fa;
}

/* === DRI Settings === */
.dri-label-clickable {
    cursor: pointer;
    text-decoration: underline;
    color: #2563eb;
    font-weight: 400;
    font-size: 13px;
}
.dri-label-clickable:hover {
    color: #1d4ed8;
}

/* 🔴 2026-08-27: ダークでは基準行の背景が #422006 (茶) になるため、
   ライト用の #2563eb では 2.82:1 しか出ない。ライトは #fff9e6 上で 4.91:1 で通っている。 */
.dark .dri-label-clickable {
    color: #93c5fd;
}

.dark .dri-label-clickable:hover {
    color: #bfdbfe;
}

#nutrition-table thead tr.dri-add-row th {
    text-align: left;
    padding: 4px 6px;
    background: #dbeafe;
    border-bottom: 2px solid #93c5fd;
    border-top: 1px solid #93c5fd;
}
.dri-add-btn {
    cursor: pointer;
    /* 2026-08-27: #2563eb on #dbeafe = 4.24:1 で AA をわずかに割っていた。
       背景が両テーマ共通なので色は 1 つで足りる (5.49:1)。 */
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 400;
    padding: 2px 12px;
    border: 1px dashed #60a5fa;
    border-radius: 4px;
    display: inline-block;
    position: sticky;
    left: 10px;
}
.dri-add-btn:hover {
    /* 通常時を #1d4ed8 に下げたので、hover はさらに濃くして区別を残す (7.29:1)。 */
    color: #1e3a8a;
    background: #bfdbfe;
    border-color: #3b82f6;
}

#nutrition-table thead tr.satisfaction-header-row th {
    font-weight: bold;
    font-size: 12px;
    background: #fefce8;
    /* 🔴 2026-08-27: color が無く、ダークでは .dark #nutrition-table thead th の
       color: #e5e7eb が残って **薄い黄色に薄い灰色** (1.20:1) になっていた。
       このファイルは 1110 行目で同じ型を警告しているのに踏んでいた。
       背景が両テーマで #fefce8 固定なので、色も 1 つで足りる (14.19:1)。 */
    color: #1f2937;
    border-bottom: 2px solid #9ca3af;
}

/* === DRI Settings Modal === */
.dri-settings-modal {
    background: white;
    /* 🔴 器に文字色を置く (2026-09-03)。背景だけ white にすると、ダークの
       body から継いだ near-white がそのまま乗り、白地に白文字になる。
       実測: ダークで 79 要素が AA 未達 (比 1.1:1) で、
       「常食E2200kcal」「腎E2000kcal」というカスタム基準名が読めなかった。
       会場では端末ごとに 1 回この画面で基準を選ぶので、名前が見えないと選べない。
       個々の子要素に色を足すのではなく**器に 1 行**置く (子が増えても守られる)。 */
    color: #1f2937;
    border-radius: 8px;
    padding: 20px;
    min-width: 400px;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.dri-settings-modal h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #1f2937;
}
.dri-settings-modal .form-group {
    margin-bottom: 12px;
}
.dri-settings-modal label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #374151;
}
.dri-settings-modal select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
}
.dri-settings-modal .radio-group {
    display: flex;
    gap: 16px;
}
.dri-settings-modal .radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: normal;
    cursor: pointer;
}
.dri-settings-modal .btn-group {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}
.dri-settings-modal .btn {
    padding: 6px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.dri-settings-modal .btn-primary {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}
.dri-settings-modal .btn-danger {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}
.dri-settings-modal .btn:hover {
    opacity: 0.9;
}

/* DRI Modal Tabs */
.dri-modal-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 16px;
}
.dri-modal-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.dri-modal-tab:hover {
    color: #374151;
}
.dri-modal-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

/* Custom DRI List */
.custom-dri-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}
.custom-dri-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 6px;
}
.custom-dri-item:hover {
    background: #f9fafb;
}
.custom-dri-item-name {
    font-weight: 600;
    font-size: 13px;
}
.custom-dri-item-desc {
    font-size: 11px;
    color: #6b7280;
}
.custom-dri-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Custom DRI Create Form */
.custom-dri-create-form {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    background: #f9fafb;
}

/* Custom DRI Edit Table */
.custom-dri-edit-wrapper {
    max-height: 350px;
    overflow-y: auto;
    margin: 8px 0;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}
.custom-dri-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.custom-dri-edit-table th {
    background: #f3f4f6;
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid #d1d5db;
    position: sticky;
    top: 0;
    z-index: 1;
}
.custom-dri-edit-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #e5e7eb;
}
.custom-dri-edit-table input {
    width: 80px;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    text-align: right;
    font-size: 16px;
}
.custom-dri-edit-table input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* レスポンシブ: 小画面では上下分割 */
@media (max-width: 768px) {
    .recipe-search-body {
        flex-direction: column;
    }
    .recipe-search-results {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        max-height: 40%;
    }
    .dark .recipe-search-results {
        border-bottom-color: #4b5563;
    }
}

/* ============================================================
   Satisfaction Chart Modal (充足率チャート)
   ============================================================ */
.chart-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 90vw;
    max-width: 900px;
    min-width: 320px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 24px;
    position: relative;
}

.chart-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.chart-box {
    flex: 1;
    min-width: 350px;
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e5e7eb;
}

.chart-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.chart-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.chart-tab:hover {
    background: #e5e7eb;
    color: #374151;
}
.chart-tab-active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.chart-tab-active:hover {
    background: #1d4ed8;
    color: #fff;
}

@media (max-width: 768px) {
    .chart-modal {
        width: 96vw;
        padding: 14px 12px;
    }
    .chart-container {
        flex-direction: column;
    }
    .chart-box {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
}

/* ============================================================
   Advanced Food Search & Food Usage History
   ============================================================ */

/* Search input wrapper with buttons */
.food-search-dropdown .search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.food-search-dropdown .search-input-wrapper input {
    flex: 1;
    min-width: 0;
}

/* Small icon buttons in search wrapper */
.search-history-btn,
.search-advanced-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}
.search-history-btn:hover,
.search-advanced-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* Recording indicator - red dot */
.search-history-btn.recording-indicator {
    position: relative;
}
.search-history-btn.recording-indicator::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 1px solid #fff;
}

/* Advanced search modal */
.advanced-search-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    max-width: 550px;
    width: 92%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Filter layout */
.adv-search-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.adv-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.adv-search-row label {
    flex-shrink: 0;
    width: 60px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-align: right;
}

/* Select elements - 16px minimum for iOS */
.adv-search-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    background: #fff;
    color: #1f2937;
    box-sizing: border-box;
    min-width: 0;
}
.adv-search-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
    outline: none;
}

/* Sort radio buttons */
.adv-search-sort {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 70px;
    font-size: 13px;
    color: #374151;
}
.adv-search-sort label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.adv-search-sort input[type="radio"] {
    margin: 0;
}

/* Action buttons */
.adv-search-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.adv-search-btn-primary {
    padding: 6px 20px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.adv-search-btn-primary:hover {
    background: #1d4ed8;
}

.adv-search-btn-secondary {
    padding: 6px 16px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.adv-search-btn-secondary:hover {
    background: #e5e7eb;
}

/* Result count */
.adv-search-result-count {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

/* Results container (scrollable) */
.adv-search-results {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

/* Nutrient value badge in results */
.nutrient-value-badge {
    flex-shrink: 0;
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    padding: 1px 6px;
    background: #eff6ff;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: auto;
}

/* Usage count badge in history results */
.usage-count-badge {
    flex-shrink: 0;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    padding: 1px 6px;
    background: #f3f4f6;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: auto;
}

/* History panel header */
.history-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

/* Preset dropdown in history */
.preset-select {
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    background: #fff;
    color: #1f2937;
    max-width: 140px;
    min-width: 0;
}

/* History action buttons container */
.history-action-btns {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* ============================================================
   Dark mode: Advanced Search & History
   ============================================================ */
.dark .search-history-btn,
.dark .search-advanced-btn {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}
.dark .search-history-btn:hover,
.dark .search-advanced-btn:hover {
    background: #4b5563;
}

.dark .advanced-search-modal {
    background: #1f2937;
}

.dark .adv-search-row label {
    color: #d1d5db;
}

.dark .adv-search-select {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
.dark .adv-search-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96,165,250,0.2);
}

.dark .adv-search-sort {
    color: #d1d5db;
}

.dark .adv-search-btn-primary {
    background: #3b82f6;
}
.dark .adv-search-btn-primary:hover {
    background: #2563eb;
}

.dark .adv-search-btn-secondary {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}
.dark .adv-search-btn-secondary:hover {
    background: #4b5563;
}

.dark .adv-search-result-count {
    color: #9ca3af;
}

.dark .adv-search-results {
    border-color: #374151;
}

.dark .nutrient-value-badge {
    background: #1e3a5f;
    color: #93c5fd;
}

.dark .usage-count-badge {
    background: #374151;
    color: #9ca3af;
}

.dark .history-panel-header {
    border-color: #374151;
}

.dark .preset-select {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

.dark .search-history-btn.recording-indicator::after {
    border-color: #1f2937;
}

/* === カスタム成分表モーダル === */
.food-table-settings-modal {
    max-width: 480px;
}

.food-table-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}

.food-table-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.food-table-radio-item:hover {
    background-color: #f0f4ff;
}

.food-table-radio-item input[type="radio"] {
    margin: 0;
    accent-color: #16a34a;
}

.food-table-radio-item label {
    cursor: pointer;
    font-size: 14px;
    flex: 1;
}

.food-table-radio-item .entry-count {
    color: #6b7280;
    font-size: 12px;
}

.food-table-actions {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #e5e7eb;
}

.food-table-actions button {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.food-table-actions button:hover {
    background: #f3f4f6;
}

.food-table-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.food-table-actions button.danger {
    color: #dc2626;
    border-color: #fecaca;
}

.food-table-actions button.danger:hover:not(:disabled) {
    background: #fef2f2;
}

/* === 成分表エディタモーダル === */
.food-table-editor-modal {
    max-width: 900px;
    height: 80vh;
}

.food-table-editor-body {
    display: flex;
    gap: 16px;
    flex: 1;
    overflow: hidden;
    padding: 16px;
}

/* 🔴🔴 **`min-width: 0` を落とすと、食品群を選んだ瞬間に左右が崩れる** (2026-09-04)。
   ⚖️ 利用者が実機で発見:「成分表編集モーダルで食品群ドロップダウンを選ぶと
   レイアウトが崩れる」。

   flex の子は既定が `min-width: auto` なので、**中身の最小幅より縮まない**。
   食品群を選ぶと検索結果に成分表の正式名 (「17001＜調味料類＞　ウスターソース類
   　ウスターソース追加」など) が 148 件並び、左パネルがその幅まで広がる。

   実測 (dev · 幅 1440 · 2026-09-04):
       選ぶ前   左 404.3 / 右 387.1
       選んだ後 左 811.5 / 右 183.2   ← 右が潰れる
       この規則を入れたあと 左 434.6 / 右 417.4
   固定 = tests/unit/test_food_table_editor_panels_do_not_collapse.py */
.food-table-editor-search {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    padding-right: 16px;
}

.food-table-editor-selected {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.food-table-editor-search input {
    font-size: 16px;  /* iOS auto-zoom prevention */
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-bottom: 8px;
    /* 幅は器に従わせる。既定のままだと select が中身の幅を主張して器を押し広げる */
    width: 100%;
    box-sizing: border-box;
}

.food-table-editor-search select {
    font-size: 16px;  /* iOS auto-zoom prevention */
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.food-table-search-results,
.food-table-selected-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.food-table-food-item {
    display: flex;
    align-items: center;
    /* 行自身も縮めるようにする (パネルの min-width: 0 と対) */
    min-width: 0;
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
    font-size: 13px;
}

.food-table-food-item:hover {
    background-color: #f9fafb;
}

.food-table-food-item .food-num {
    color: #6b7280;
    font-size: 12px;
    min-width: 60px;
    font-variant-numeric: tabular-nums;
}

.food-table-food-item .food-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右パネル（選択済み）では食品名を折り返し表示 */
.food-table-editor-selected .food-table-food-item .food-name {
    white-space: normal;
    word-break: break-all;
    line-height: 1.4;
}

.food-table-food-item .btn-add-food,
.food-table-food-item .btn-remove-food {
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: all 0.15s;
}

.food-table-food-item .btn-add-food {
    color: #16a34a;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.food-table-food-item .btn-add-food:hover {
    background: #dcfce7;
}

.food-table-food-item .btn-add-food.added {
    color: #9ca3af;
    border-color: #e5e7eb;
    background: #f9fafb;
    cursor: default;
}

.food-table-food-item .btn-remove-food {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.food-table-food-item .btn-remove-food:hover {
    background: #fee2e2;
}

/* F-9関連: 教員カスタム食品配信 (自作食品バッジ・同期ボタン・要同期インジケータ) */
.food-table-food-item .food-source-badge {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    white-space: nowrap;
    flex-shrink: 0;
}

.food-table-food-item .food-sync-indicator {
    flex-shrink: 0;
    font-size: 12px;
    cursor: default;
}

.food-table-food-item .btn-sync-food {
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: all 0.15s;
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.food-table-food-item .btn-sync-food:hover {
    background: #dbeafe;
}

.food-table-food-item .btn-sync-food:disabled {
    color: #9ca3af;
    border-color: #e5e7eb;
    background: #f9fafb;
    cursor: default;
}

.food-table-selected-header {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.food-table-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    /* 🔴 実測 2026-09-05: `#9ca3af` は白地に **2.54:1** で AA 未達だった (両テーマ)。
       同じ器の `.entry-count` が使う `#6b7280` (4.83) に揃える。 */
    color: #6b7280;
    font-size: 14px;
}

/* ---------------------------------------------------------------------
   成分表モーダル 5 つ (設定 / 新規作成 / 編集 / 名前変更 / 配信元の複製) の共有パーツ。
   🔴 **色は CSS に置く。JS の `style.cssText` に書かない** — インラインは `.dark` より
   強く、テーマを切り替えられなくなる (2026-08-19 以降 4 巡した型 · docs/incidents)。
   実測 2026-09-05 (ダーク · 白で固定した器の上):
     ・説明 / 配信元 / ヒント  `#9ca3af` = **2.54:1** → `#6b7280` (4.83)
     ・適用 / 作成 / 保存 / 複製する  白 on `#16a34a` = **3.30:1** → `#15803d` (5.02)
   ⚖️ 緑を 1 段濃くするのは**既に 2 回同じ結論**を出している
   (`spreadsheet-mobile.css` の `--mobile-primary` 2026-08-27 /
    `recipe-shared-modals.css` の競合モーダル 2026-09-03)。
   --------------------------------------------------------------------- */
.food-table-modal-hint {
    font-size: 11px;
    color: #6b7280;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.food-table-modal-note {
    font-size: 12px;
    color: #6b7280;
}

.food-table-modal-primary-btn {
    padding: 8px 24px;
    border-radius: 6px;
    border: none;
    background: #15803d;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

/* Active state for 成分表 button */
#btn-food-table-settings.active {
    background: #dcfce7;
    color: #16a34a;
    border-color: #bbf7d0;
}

/* Responsive: tablet */
@media (max-width: 1024px) {
    .food-table-editor-modal {
        max-width: 95vw;
    }
}

/* ============================================================
   Recipe Detail View (1画面表示)
   ============================================================ */

.recipe-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: #f8fafc;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.recipe-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #1e293b;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.recipe-detail-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.recipe-detail-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.recipe-detail-content {
    padding: 16px 24px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.recipe-detail-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.recipe-detail-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
}

.recipe-detail-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.recipe-detail-section-title::before {
    content: '▶ ';
    font-size: 11px;
    color: #94a3b8;
}

.recipe-detail-section[open] > .recipe-detail-section-title::before {
    content: '▼ ';
}

.recipe-detail-section-body {
    padding: 0 16px 12px;
}

.recipe-detail-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}

.recipe-detail-meta-row:last-child {
    border-bottom: none;
}

.recipe-detail-meta-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    min-width: 100px;
    flex-shrink: 0;
}

.recipe-detail-meta-value {
    font-size: 13px;
    color: #1e293b;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.recipe-detail-chip {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.recipe-detail-comment-text {
    font-size: 14px;
    color: #334155;
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Foods Table */
.recipe-detail-foods-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.recipe-detail-foods-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.recipe-detail-foods-table th,
.recipe-detail-foods-table td {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    text-align: left;
}

.recipe-detail-foods-table th {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
    position: sticky;
    top: 0;
    z-index: 2;
}

.recipe-detail-foods-table .sticky-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    min-width: 120px;
}

.recipe-detail-foods-table th.sticky-col {
    z-index: 3;
    background: #f1f5f9;
}

.recipe-detail-foods-table .sticky-col-2 {
    position: sticky;
    left: 120px;
    background: #fff;
    z-index: 1;
}

.recipe-detail-foods-table th.sticky-col-2 {
    z-index: 3;
    background: #f1f5f9;
}

.recipe-detail-subtotal .sticky-col-2 {
    background: #fefce8;
}

.recipe-detail-foods-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.recipe-detail-subtotal td {
    font-weight: 700;
    background: #fefce8;
    border-top: 2px solid #1e293b;
}

/* Cooking instructions */
.recipe-detail-cooking-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin: 12px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}

.recipe-detail-cooking-subtitle:first-child {
    margin-top: 0;
}

.recipe-detail-cooking-list {
    margin: 4px 0 8px;
    padding-left: 20px;
    font-size: 13px;
    color: #334155;
    line-height: 1.7;
}

.recipe-detail-cooking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 8px;
    table-layout: auto;
}

.recipe-detail-cooking-table th,
.recipe-detail-cooking-table td {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

.recipe-detail-cooking-table th {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.recipe-detail-cooking-table td:first-child {
    width: 1%;
    white-space: nowrap;
    font-weight: 500;
}

/* Desktop: show table, hide cards */
.recipe-detail-cooking-desktop { display: block; }
.recipe-detail-cooking-mobile { display: none; }

/* Card style (used on mobile) */
.recipe-detail-cooking-card {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 6px;
}

.recipe-detail-cooking-card-name {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}

.recipe-detail-cooking-card-content {
    font-size: 13px;
    color: #475569;
    margin-top: 2px;
}

.recipe-detail-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 6px;
}

.recipe-detail-food-group {
    border-left: 4px solid #FFF3CD;
    padding: 6px 0 6px 12px;
    margin: 8px 0;
}

.recipe-detail-food-group-label {
    font-weight: 600;
    font-size: 13px;
    color: #475569;
    margin-bottom: 4px;
}

/* ============================================================
   Compare Panel - Split View
   ============================================================ */

/* Workspace: wraps main spreadsheet + compare panel */
#sheet-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

/* Default: single sheet fills workspace */
#sheet-workspace #spreadsheet-container {
    flex: 1;
    min-width: 0;
}

/* Horizontal split (side by side) */
#sheet-workspace.split-horizontal {
    flex-direction: row;
}

#sheet-workspace.split-horizontal #spreadsheet-container {
    flex: 1;
    min-width: 0;
    border-right: 3px solid #e5e7eb;
}

#sheet-workspace.split-horizontal #compare-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Vertical split (stacked) */
#sheet-workspace.split-vertical {
    flex-direction: column;
}

#sheet-workspace.split-vertical #spreadsheet-container {
    flex: 1;
    min-height: 0;
    border-bottom: 3px solid #e5e7eb;
}

#sheet-workspace.split-vertical #compare-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Custom Food Table Lockdown: 学生向け同期通知バナー
   ============================================================ */
#recent-sync-banner-container {
    /* #sheet-workspace (display:flex) の外、通常のブロック要素として配置する
       (2026-07-05 実機検証で発見: #sheet-workspace 内の flex item として
       width:100% + flex-wrap:wrap を試みたが、兄弟要素 #spreadsheet-container が
       flex-basis:0 のため折返し判定が効かず、幅0に潰れる不具合があった)。
       ブロック要素なので特別な指定は不要。 */
}
#recent-sync-banner-container:empty {
    display: none;
}
.recent-sync-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 8px 12px 0;
    font-size: 12px;
    color: #1e40af;
}
.recent-sync-banner summary {
    cursor: pointer;
    font-weight: 600;
}
.recent-sync-banner[open] summary {
    margin-bottom: 6px;
}
.recent-sync-banner ul {
    margin: 4px 0 0;
    padding-left: 18px;
}
.recent-sync-banner li {
    margin-bottom: 2px;
}

/* Compare Panel Header */
.compare-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #f0f4ff;
    border-bottom: 1px solid #c7d2fe;
    flex-shrink: 0;
    min-height: 32px;
}

.compare-sheet-name {
    font-weight: 600;
    font-size: 13px;
    color: #1e40af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.compare-panel-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.compare-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #4b5563;
    font-size: 13px;
    line-height: 1;
}

.compare-btn:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #1e40af;
}

.compare-btn.active {
    background: #c7d2fe;
    border-color: #818cf8;
    color: #1e3a8a;
}

/* Compare Table Container */
.compare-table-container {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* Compare Table - reuse main table styling */
.compare-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 13px;
    font-family: 'BIZ UDPGothic', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-synthesis-weight: none;
}

.compare-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.compare-table thead th {
    background: #f0f0f0;
    border: 1px solid #c0c0c0;
    padding: 4px 6px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    color: #333;
    user-select: none;
    min-width: 60px;
}

.compare-table thead th.nutrient-col {
    min-width: 70px;
    max-width: 100px;
}

.compare-table thead tr.unit-row th {
    background: #e8e8e8;
    font-weight: 400;
    font-size: 11px;
    color: #666;
    padding: 2px 6px;
}

.compare-table tbody td {
    border: 1px solid #d1d5db;
    padding: 2px 4px;
    height: 26px;
    vertical-align: middle;
    background: #fff;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-table tbody td.numeric {
    text-align: right;
    padding-right: 6px;
    font-variant-numeric: tabular-nums;
}

.compare-table tbody td.food-name {
    min-width: 180px;
    max-width: 250px;
}

.compare-table tbody td.weight-col {
    min-width: 60px;
    width: 70px;
}

.compare-table tbody td.meal-type {
    min-width: 70px;
    width: 80px;
}

.compare-table tbody td.recipe-name {
    min-width: 120px;
    max-width: 180px;
}

/* Aggregation rows in compare table */
.compare-table tbody tr.subtotal-recipe td {
    background-color: #cce5ff;
    font-weight: 600;
    border-color: #b3d4fc;
}

.compare-table tbody tr.subtotal-meal td {
    background-color: #ffe6cc;
    font-weight: 600;
    border-color: #ffd4a8;
}

.compare-table tbody tr.subtotal-grand td {
    background-color: #ffccff;
    font-weight: 700;
    border-color: #e6b3e6;
}

/* Sheet picker modal */
.compare-sheet-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-sheet-picker {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: min(400px, 90vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.compare-sheet-picker-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 15px;
    color: #1f2937;
}

.compare-sheet-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.compare-sheet-picker-item {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compare-sheet-picker-item:hover {
    background: #eff6ff;
}

.compare-sheet-picker-item-name {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

.compare-sheet-picker-item-date {
    font-size: 11px;
    color: #9ca3af;
}

.compare-sheet-picker-empty {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

.compare-sheet-picker-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
}

.compare-sheet-picker-cancel {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
}

.compare-sheet-picker-cancel:hover {
    background: #e5e7eb;
}

/* ============================================================
   Feature: Desktop-only cursor mode
   ============================================================ */
.desktop-only {
    display: none !important;
}
@media (min-width: 768px) {
    .desktop-only {
        display: flex !important;
    }
}
.cursor-mode-radio input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: #2563eb;
}

/* ============================================================
   Feature: Nutrition Search Modal
   ============================================================ */
.nutrition-search-modal .criteria-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.nutrition-search-modal .criteria-row select {
    font-size: 16px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    flex: 1 1 auto;
    min-width: 120px;
}
.nutrition-search-modal .criteria-row input {
    font-size: 16px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}
.nutrition-search-modal .criteria-row input[type="number"] {
    width: 80px;
    flex-shrink: 0;
}
.nutrition-search-modal .search-results {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 12px;
}
.nutrition-search-modal .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    gap: 8px;
}
.nutrition-search-modal .result-item:hover {
    background: #f3f4f6;
}
/* 2026-06-10 #24 拡張: 選択された result-item のハイライト (preview 表示中) */
.nutrition-search-modal .result-item.selected {
    background: #dbeafe;
    border-left: 3px solid #2563eb;
    padding-left: 9px;
}
.nutrition-search-modal .result-nutrients {
    font-size: 12px;
    color: #6b7280;
}
/* モバイル対応 */
@media (max-width: 600px) {
    .nutrition-search-modal .criteria-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .nutrition-search-modal .criteria-row select {
        width: 100%;
    }
    .nutrition-search-modal .criteria-row .nutr-range-wrap {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .nutrition-search-modal .criteria-row input[type="number"] {
        flex: 1;
        width: auto;
    }
    .nutrition-search-modal .result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .nutrition-search-modal .result-item button {
        align-self: flex-end;
    }
}

/* ============================================================
   Feature: Food Group Summary Popup
   ============================================================ */
.food-group-popup table {
    width: 100%;
    border-collapse: collapse;
}
.food-group-popup th,
.food-group-popup td {
    padding: 6px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: right;
}
.food-group-popup th:first-child,
.food-group-popup td:first-child {
    text-align: left;
}
.food-group-popup tr:last-child {
    font-weight: bold;
    border-top: 2px solid #374151;
}

/* ============================================================
   Feature: Plating Image Modal
   ============================================================ */
.plating-modal .meal-section {
    margin-bottom: 24px;
}
.plating-modal .meal-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    padding: 4px 12px;
    background: #374151;
    color: white;
    border-radius: 4px;
}
.plating-modal .table-container {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    padding: 24px;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
}
.plating-modal .dish-item {
    position: relative;
    text-align: center;
    width: 140px;
}
.plating-modal .dish-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
    position: relative;
    z-index: 1;
}
.plating-modal .color-spheres {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    width: 90px;
    z-index: 2;
    pointer-events: auto;
}
.plating-modal .color-sphere {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
}
.plating-modal .dish-label {
    font-size: 14px;
    margin-top: 4px;
    color: #374151;
    text-shadow: 0 0 4px rgba(255,255,255,0.8);
}

/* ============================================================
   Feature: Google Keyword Settings Modal
   ============================================================ */
.google-keyword-modal .food-list {
    max-height: 400px;
    overflow-y: auto;
}
.google-keyword-modal .food-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
}
.google-keyword-modal .food-item:hover {
    background: #f9fafb;
}
.google-keyword-modal .keyword-input {
    font-size: 16px; /* iOS */
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    min-width: 150px;
}
.google-keyword-modal .save-btn {
    padding: 4px 12px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.google-keyword-modal .save-btn:hover {
    background: #1d4ed8;
}

/* ============================================================
   Feature: Google icon in food search results
   ============================================================ */
.food-search-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #4285f4;
    border: none;
    cursor: pointer;
    font-size: 12px;
    margin-left: 4px;
    flex-shrink: 0;
}
.food-search-google-btn:hover {
    background: #e5e7eb;
}

/* ============================================================
   Feature: User food badge in search results
   ============================================================ */
.user-food-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 4px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 3px;
    margin-left: 4px;
    font-weight: 600;
    vertical-align: middle;
}

.distributed-food-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 4px;
    background: #d1fae5;
    color: #047857;
    border-radius: 3px;
    margin-left: 4px;
    font-weight: 600;
}

/* ============================================================
   Calendar overlay (opened from nutrition sheet toolbar)
   ============================================================ */
.calendar-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.calendar-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1e293b;
    color: #fff;
    flex-shrink: 0;
}

.calendar-overlay-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.calendar-overlay-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    transition: color 0.15s;
}

.calendar-overlay-close:hover {
    color: #fff;
}

.calendar-overlay-iframe {
    flex: 1;
    border: none;
    width: 100%;
    background: #fff;
}

/* ============================================
   Dish Summary Panel (料理一覧パネル)
   ============================================ */
.dish-summary-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 230px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -2px 0 8px rgba(0,0,0,0.06);
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dish-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    flex-shrink: 0;
}
.dish-summary-header i { margin-right: 6px; color: #6366f1; }
.dish-summary-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 4px;
}
.dish-summary-close:hover { background: #f1f5f9; color: #475569; }
.dish-summary-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.dish-summary-meal {
    margin-bottom: 4px;
}
.dish-summary-meal-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    padding: 6px 14px 2px;
    letter-spacing: 0.5px;
}
.dish-summary-recipe {
    padding: 5px 14px 5px 24px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 0;
    transition: background 0.1s;
}
.dish-summary-recipe:hover { background: #f1f5f9; }
.dish-summary-recipe.active { background: #eef2ff; color: #4338ca; font-weight: 600; }
.dish-summary-recipe::before {
    content: '\251C';
    color: #cbd5e1;
    font-family: monospace;
    font-size: 12px;
}
.dish-summary-recipe:last-child::before { content: '\2514'; }
.dish-summary-food-count {
    font-size: 10px;
    color: #94a3b8;
    margin-left: auto;
}
.dish-summary-empty {
    padding: 20px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

/* ============================================
   Right-Click Context Menu
   ============================================ */
.spreadsheet-context-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px 0;
    min-width: 190px;
    z-index: 10000;
    font-family: inherit;
}
.ctx-item {
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    transition: background 0.1s;
    white-space: nowrap;
}
.ctx-item:first-child { border-radius: 6px 6px 0 0; }
.ctx-item:last-child { border-radius: 0 0 6px 6px; }
.ctx-item:hover { background: #f1f5f9; }
.ctx-item.danger { color: #dc2626; }
.ctx-item.danger:hover { background: #fef2f2; }
.ctx-item .ctx-icon { width: 16px; text-align: center; font-size: 12px; color: #94a3b8; flex-shrink: 0; }
.ctx-item.danger .ctx-icon { color: #f87171; }
.ctx-item .ctx-shortcut { margin-left: auto; font-size: 11px; color: #94a3b8; padding-left: 16px; }
.ctx-separator { height: 1px; background: #e2e8f0; margin: 3px 0; }

/* ============================================================
   AIサポートモーダル — Autumnリデザイン 2026-04-06
   スコープ: #ai-support-modal 内のみに適用
   ============================================================ */
#ai-support-modal {
  --ai-p:    #f97316;
  --ai-pd:   #ea580c;
  --ai-p50:  #fff7ed;
  --ai-p100: #ffedd5;
  --ai-p200: #fed7aa;
  --ai-p700: #c2410c;
  --ai-g50:  #f9fafb;
  --ai-g100: #f3f4f6;
  --ai-g200: #e5e7eb;
  --ai-g400: #9ca3af;
  --ai-g500: #6b7280;
  --ai-g700: #374151;
  --ai-g900: #111827;
  /* フォント可読性改善: システムフォント優先（Windows: Meiryo/Yu Gothic UI、Mac: 系統フォント） */
  font-family: 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'メイリオ', 'Hiragino Sans', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── モーダルコンテナ ── */
#ai-support-modal .modal-container {
  max-width: 800px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
#ai-support-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ai-g200);
  background: white;
}
#ai-support-modal .modal-body { padding: 20px; color: var(--ai-g700); }
#ai-support-modal .modal-footer {
  padding: 12px 20px;
  background: var(--ai-g50);
  border-top: 1px solid var(--ai-g200);
}

/* ── ヘッダー内部 ── */
.ai-mh-left { display: flex; align-items: center; gap: 10px; }
.ai-mh-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--ai-p50); border: 1px solid var(--ai-p200);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.ai-mh-title { font-size: 15px; font-weight: 700; color: var(--ai-g900); }
.ai-mh-sub   { font-size: 12px; color: var(--ai-g400); margin-top: 1px; }
.ai-mh-close {
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 6px;
  color: var(--ai-g400); font-size: 16px; line-height: 1;
}
.ai-mh-close:hover { background: var(--ai-g100); }

/* ── 保存済み設定バー ── */
.ai-saved-bar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 16px; padding: 9px 12px;
  background: var(--ai-g50); border: 1px solid var(--ai-g200); border-radius: 8px;
}
.ai-saved-bar > label { font-size: 12px; color: var(--ai-g500); white-space: nowrap; }
.ai-saved-bar select {
  flex: 1; padding: 5px 8px; border: 1px solid var(--ai-g200);
  border-radius: 6px; font-size: 13px; color: var(--ai-g700); background: white;
}

/* ── セクション ── */
.ai-sec { margin-bottom: 20px; }
.ai-sec-label {
  font-size: 12px; font-weight: 700; color: var(--ai-g700);
  margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.ai-sec-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ai-p100); color: var(--ai-p700);
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* ── 提案タイプ: 隠しラジオ + ピルラベル ── */
.ai-type-pill-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-type-pill-label { cursor: pointer; }
.ai-type-pill-label input[type="radio"] { display: none; }
.ai-type-pill {
  display: block; padding: 5px 13px; border-radius: 20px;
  border: 1.5px solid var(--ai-g200); background: white;
  color: var(--ai-g500); font-size: 12px; transition: all .15s; white-space: nowrap;
}
.ai-type-pill-label input[type="radio"]:checked ~ .ai-type-pill {
  background: var(--ai-p50); border-color: var(--ai-p200);
  color: var(--ai-p700); font-weight: 600;
}
.ai-type-pill-label input[type="radio"]:checked ~ .ai-type-pill::before {
  content: "● "; font-size: 12px;
}

/* ── セグメントコントロール（薄オレンジ）── */
.ai-seg {
  display: inline-flex; border: 1.5px solid var(--ai-p200);
  border-radius: 8px; overflow: hidden; background: var(--ai-g50);
}
.ai-seg > label { cursor: pointer; }
.ai-seg input[type="radio"] { display: none; }
.ai-seg-btn {
  display: block; padding: 6px 16px; font-size: 12px;
  color: var(--ai-g500); transition: all .15s; white-space: nowrap;
  border-right: 1px solid var(--ai-p200);
}
.ai-seg > label:last-child .ai-seg-btn { border-right: none; }
.ai-seg input[type="radio"]:checked ~ .ai-seg-btn {
  background: var(--ai-p50); color: var(--ai-p700); font-weight: 600;
}

/* ── チェックボックス: ピル型タグ ── */
.ai-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-pill-label { display: inline-flex; cursor: pointer; }
.ai-pill-label input[type="checkbox"] { display: none; }
.ai-pill-tag {
  padding: 4px 11px; border-radius: 20px; border: 1.5px solid var(--ai-g200);
  background: white; color: var(--ai-g500); font-size: 12px;
  transition: all .15s; display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.ai-pill-label input[type="checkbox"]:checked ~ .ai-pill-tag {
  background: var(--ai-p50); border-color: var(--ai-p200);
  color: var(--ai-p700); font-weight: 600;
}
.ai-pill-label input[type="checkbox"]:checked ~ .ai-pill-tag::before {
  content: "✓"; font-size: 12px; font-weight: 700;
}

/* ── サブラベル（制約カテゴリ区切り）── */
.ai-sub-lbl {
  font-size: 12px; font-weight: 700; color: var(--ai-g400);
  margin: 10px 0 6px; display: flex; align-items: center; gap: 6px;
}
.ai-sub-lbl:first-child { margin-top: 4px; }
.ai-sub-lbl::after { content: ''; flex: 1; height: 1px; background: var(--ai-g200); }

/* ── オプション枠（いろどり・スチコン）── */
.ai-opt-box {
  padding: 10px 14px; background: var(--ai-p50);
  border: 1px solid var(--ai-p200); border-radius: 8px; margin-top: 8px;
}
.ai-opt-box-lbl { font-size: 12px; font-weight: 600; color: var(--ai-p700); margin-bottom: 8px; }
.ai-steam-box {
  margin-top: 8px; padding: 10px 12px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
}

/* ── 動的生成行（栄養素調整・削減）── */
.ai-nutrient-row,
.ai-reduction-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px;
  padding: 8px 10px; background: var(--ai-g50);
  border: 1px solid var(--ai-g200); border-radius: 8px;
}
.ai-nutrient-row select,
.ai-reduction-row select {
  padding: 4px 8px; border: 1px solid var(--ai-g200);
  border-radius: 6px; font-size: 16px; color: var(--ai-g700);
  min-width: 0;
}
.ai-nutrient-row input[type="number"],
.ai-reduction-row input[type="number"] {
  padding: 4px 8px; border: 1px solid var(--ai-g200);
  border-radius: 6px; font-size: 16px; color: var(--ai-g700);
  min-width: 0; width: 80px;
}

/* ── 小ボタン ── */
.ai-btn-sm {
  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--ai-g200); background: white;
  color: var(--ai-g700); cursor: pointer;
}
.ai-btn-sm:hover { background: var(--ai-g100); }

/* ── 設定保存バー ── */
.ai-save-bar {
  display: flex; gap: 8px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--ai-g200);
}
.ai-save-input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--ai-g200);
  border-radius: 6px; font-size: 13px; color: var(--ai-g700);
}
.ai-save-input:focus {
  outline: none; border-color: var(--ai-p);
  box-shadow: 0 0 0 3px var(--ai-p100);
}

/* ── フッターボタン ── */
.ai-btn-cancel {
  padding: 7px 16px; border-radius: 8px; border: 1px solid var(--ai-g200);
  background: white; color: var(--ai-g700); font-size: 13px; font-weight: 500; cursor: pointer;
}
.ai-btn-primary {
  padding: 7px 20px; border-radius: 8px; border: none;
  background: var(--ai-p); color: white;
  font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.ai-btn-primary:hover { background: var(--ai-pd); }

/* ── 食品置換セレクト ── */
.ai-subst-select {
  width: 100%; margin-top: 4px; padding: 6px 8px;
  border: 1px solid var(--ai-g200); border-radius: 6px;
  font-size: 16px; color: var(--ai-g700);
}

/* ── ダークモード ── */
.dark #ai-support-modal .modal-container { background: #1e1e2e; }
.dark #ai-support-modal .modal-header { background: #1e1e2e; border-color: #374151; }
.dark .ai-mh-title { color: #f3f4f6; }
.dark .ai-saved-bar { background: #111827; border-color: #374151; }
.dark .ai-saved-bar select { background: #1f2937; color: #e5e7eb; border-color: #374151; }
.dark .ai-sec-label { color: #e5e7eb; }
.dark .ai-type-pill { background: #1f2937; border-color: #374151; color: #9ca3af; }
.dark .ai-type-pill-label input:checked ~ .ai-type-pill { background: #431407; border-color: #c2410c; color: #fed7aa; }
.dark .ai-seg { border-color: #c2410c; background: #111827; }
.dark .ai-seg-btn { color: #9ca3af; border-right-color: #374151; }
.dark .ai-seg input:checked ~ .ai-seg-btn { background: #431407; color: #fed7aa; }
.dark .ai-pill-tag { background: #1f2937; border-color: #374151; color: #9ca3af; }
.dark .ai-pill-label input:checked ~ .ai-pill-tag { background: #431407; border-color: #c2410c; color: #fed7aa; }
.dark .ai-opt-box { background: #431407; border-color: #c2410c; }
.dark .ai-opt-box-lbl { color: #fed7aa; }
.dark .ai-nutrient-row,
.dark .ai-reduction-row { background: #111827; border-color: #374151; }
.dark .ai-nutrient-row select,
.dark .ai-reduction-row select { background: #1f2937; color: #e5e7eb; border-color: #374151; }
.dark .ai-save-input { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.dark #ai-support-modal .modal-footer { background: #111827; border-color: #374151; }
.dark .ai-btn-cancel { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.dark .ai-subst-select { background: #1f2937; color: #e5e7eb; border-color: #374151; }
.dark .ai-btn-sm { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.dark .ai-btn-sm:hover { background: #374151; }
.dark .ai-btn-primary { background: #ea580c; }
.dark .ai-steam-box { background: #1e3a5f; border-color: #1d4ed8; }

/* AI回答モーダル: フッターボタン */
#ai-result-modal .modal-footer button {
    padding: 7px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
#ai-result-modal .modal-footer button:hover {
    background: #f3f4f6;
}
#ai-result-modal .modal-footer .btn-primary {
    background: #f97316;
    color: #fff;
    border-color: #f97316;
}
#ai-result-modal .modal-footer .btn-primary:hover {
    background: #ea580c;
}
.dark #ai-result-modal .modal-footer button {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}
.dark #ai-result-modal .modal-footer button:hover {
    background: #4b5563;
}
.dark #ai-result-modal .modal-footer .btn-primary {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
}

/* AI回答モーダル: タブUI */
.ai-result-tabs { display: flex; border-bottom: 1px solid #e5e7eb; padding: 0 16px; }
.ai-result-tab {
    padding: 8px 16px; border: none; background: none; color: #6b7280;
    font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ai-result-tab.active { color: #f97316; border-bottom-color: #f97316; font-weight: 600; }
.ai-result-tab:hover { color: #ea580c; }

/* AI回答モーダル: 履歴アイテム */
.ai-history-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-bottom: 1px solid #f3f4f6; cursor: pointer; border-radius: 6px;
}
.ai-history-item:hover { background: #fff7ed; }
.ai-history-type { font-size: 14px; font-weight: 500; color: #333; }
.ai-history-date { font-size: 12px; color: #9ca3af; }

/* ダークモード: タブUI・履歴 */
.dark .ai-result-tabs { border-color: #374151; }
.dark .ai-result-tab { color: #9ca3af; }
.dark .ai-result-tab.active { color: #f97316; border-bottom-color: #f97316; }
.dark .ai-history-item { border-color: #374151; }
.dark .ai-history-item:hover { background: #1c1917; }
.dark .ai-history-type { color: #e5e7eb; }
.dark .ai-history-date { color: #6b7280; }

/* ===== Phase 10: 横展開ビュー (Side-by-Side Comparison Modal) ===== */
.sbs-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.55); display: flex;
    align-items: center; justify-content: center;
}
.sbs-modal {
    background: #fff; border-radius: 12px;
    width: 1100px; max-width: 95vw;
    min-width: 1100px;
    max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: width 0.2s ease;
}
.sbs-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #ecfdf5, #f0f9ff);
    border-bottom: 1px solid #d1d5db;
}
.sbs-header h3 {
    margin: 0; font-size: 18px; color: #065f46;
    display: flex; align-items: center; gap: 8px;
}
.sbs-close {
    background: transparent; border: none; font-size: 28px;
    color: #374151; cursor: pointer; padding: 0 8px;
    line-height: 1;
}
.sbs-close:hover { color: #dc2626; }
.sbs-body {
    padding: 16px 20px; overflow: auto; flex: 1;
}

/* 情報バー */
.sbs-info {
    background: #eff6ff; padding: 8px 12px; margin-bottom: 12px;
    border-radius: 6px; color: #1e40af; font-size: 13px;
}
.sbs-warning {
    background: #fef3c7; padding: 10px 12px; margin-bottom: 12px;
    border-radius: 6px; color: #92400e; font-size: 13px;
    border-left: 3px solid #f59e0b;
}
.sbs-empty {
    background: #f3f4f6; padding: 20px; margin: 20px 0;
    border-radius: 6px; color: #6b7280; text-align: center;
}
.sbs-loading {
    text-align: center; padding: 40px; color: #6b7280;
}

/* 操作行 */
.sbs-ops-row, .sbs-bulk-row, .sbs-date-row {
    display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
    flex-wrap: wrap;
}
.sbs-date-input {
    padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 16px;
}
.sbs-date-hint {
    color: #6b7280; font-size: 12px;
}
.sbs-counter {
    color: #4b5563; font-size: 13px; margin-left: auto; font-weight: 500;
}
.sbs-counter-nutrient {
    text-align: right; margin-bottom: 8px;
}

/* ボタン */
.sbs-btn {
    padding: 8px 14px; border-radius: 6px; border: 1px solid #d1d5db;
    background: #fff; cursor: pointer; font-size: 14px;
    color: #1f2937; /* 背景固定要素は文字色明示 (継承依存でダーク時に白on白化していた) */
    transition: background 0.15s;
}
.sbs-btn:hover:not(:disabled) { background: #f9fafb; }
.sbs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sbs-btn-primary {
    background: #f97316; color: #fff; border-color: #f97316;
}
.sbs-btn-primary:hover:not(:disabled) { background: #ea580c; }
.sbs-btn-secondary {
    background: #f9fafb;
}

.sbs-nutrient-group-title {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 4px;
}

/* 食種リスト / 栄養素リスト (チェックボックス) */
.sbs-category-list, .sbs-nutrient-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px; margin: 12px 0 16px 0;
    max-height: 48vh; overflow-y: auto;
    padding: 8px;
    border: 1px solid #e5e7eb; border-radius: 6px;
    background: #fafafa;
}
.sbs-cat-label, .sbs-nutrient-label {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: 4px; cursor: pointer;
    background: #fff; border: 1px solid #e5e7eb;
    font-size: 13px;
}
.sbs-cat-label:hover, .sbs-nutrient-label:hover {
    background: #eff6ff; border-color: #3b82f6;
}
.sbs-cat-name.sbs-cat-main { font-weight: 600; color: #065f46; }
.sbs-nutrient-name { color: #1f2937; }

/* 充足率グラフの凡例 (2026-09-01 実機フィードバック)。
   🔴 **色は JS が帯から差す。** ここに色を書くと規則が 2 か所になる。 */
.satisfaction-legend {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 8px; font-size: 12px; color: #374151;
}
.satisfaction-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.satisfaction-legend-swatch {
    width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none;
}
.dark .satisfaction-legend { color: #e5e7eb; }

.sbs-footer {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb;
}
/* 🔴 栄養素の選択は一覧が 100 項目を超えるので、操作ボタンを**一覧より上**へ置く
   (2026-09-01 ユーザー指示)。スクロールしても消えないよう貼り付ける。
   `top: 0` はモーダル本体 (`.sbs-modal-body`) のスクロールに対して効く。
   🔴 背景を必ず塗ること。透明だと下の一覧が透けて字が重なる。 */
.sbs-actions-top {
    position: sticky; top: 0; z-index: 4;
    margin-top: 8px; margin-bottom: 8px;
    padding-bottom: 12px;
    border-top: 0; border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

/* マトリクス */
.sbs-matrix-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 60vh;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-bottom: 12px;
}
.sbs-matrix {
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
    font-size: 13px;
}
.sbs-matrix thead th {
    position: sticky; top: 0; background: #f3f4f6;
    border-bottom: 2px solid #d1d5db; z-index: 3;
    padding: 8px;
}
.sbs-th-meta {
    position: sticky; left: 0; z-index: 4 !important;
    width: 300px; min-width: 300px;
    text-align: left;
}
.sbs-th-cat {
    width: 150px; min-width: 150px;
    text-align: center;
    border-left: 1px solid #e5e7eb;
}
.sbs-th-cat-main {
    background: #ecfdf5 !important;
}
.sbs-th-cat-name { font-weight: 600; color: #1f2937; }
/* 🔴 2026-08-19: #10b981 + 白文字は 2.54:1 しか無かった (両テーマ)。
   emerald-700 まで落として 5.6:1 にする。 */
.sbs-th-cat-tag {
    display: inline-block; background: #047857; color: #fff;
    font-size: 10px; padding: 2px 6px; border-radius: 10px;
    margin-top: 3px;
}
/* 🔴 2026-08-19: #6b7280 は 4.39:1 で AA 割れ。gray-600 へ。 */
.sbs-th-cat-hc { color: #4b5563; font-size: 11px; margin-top: 2px; }

.sbs-matrix tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    border-left: 1px solid #f3f4f6;
    vertical-align: top;
}
.sbs-td-meta {
    position: sticky; left: 0; background: #fff;
    z-index: 2;
    width: 300px; min-width: 300px;
}

/* 食事区分ヘッダ行 */
.sbs-meal-type-row .sbs-meal-type-cell {
    background: #fef3c7; font-weight: 700; color: #92400e;
    padding: 8px 12px;
}

/* 料理行 */
.sbs-recipe-row .sbs-td-recipe {
    font-weight: 600; color: #1f2937;
    background: #f9fafb;
    padding: 8px;
}
.sbs-recipe-name { padding-right: 4px; }
.sbs-flag-wrap { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.sbs-flag {
    display: inline-block; padding: 2px 6px; border-radius: 10px;
    font-size: 10px; font-weight: 600;
}
/* 🔴 2026-08-19: sbs-flag-auto (「自動」) と sbs-flag-unresolved (「未展開」) は
   削除した。描画をやめて当てる要素が無くなったため。
   手動編集タグ (.sbs-flag-manual) は健在。 */
.sbs-flag-manual { background: #fef3c7; color: #92400e; }
.sbs-td-recipe-cell { background: #f9fafb; text-align: center; }
.sbs-cell-absent { color: #d1d5db; text-align: center; }

/* 食品行 */
/* 🔴 2026-08-19: `display: flex` を外した (利用者報告)。
   `<td>` を flex にするとテーブルの列レイアウトから外れ、セルが**内容の幅**に縮む。
   実測: 列幅 415px に対して食品名セルだけ 300px で、右に 115px の隙間ができていた。
   共通食材の行は背景が同色なので見えないが、「一部食種のみ」(黄) /
   「単一食種のみ」(ピンク) の行では**隙間だけ白く残り、空の列があるように見える**。
   中身は span 2 種 (食品名 + アレルゲンバッジ) なので、inline のまま自然に折り返す。
   バッジ側が margin-left を持っているので gap の代わりも要らない。 */
.sbs-food-row .sbs-td-food {
    padding-left: 24px; color: #374151;
}
.sbs-td-food-cell { text-align: right; font-variant-numeric: tabular-nums; }
.sbs-weight { color: #1f2937; }

.sbs-food-status-common .sbs-td-food-cell,
.sbs-food-status-common .sbs-td-food { background: #ffffff; }
.sbs-food-status-partial .sbs-td-food-cell,
.sbs-food-status-partial .sbs-td-food { background: #fef9c3; }
.sbs-food-status-exclusive .sbs-td-food-cell,
.sbs-food-status-exclusive .sbs-td-food { background: #fce7f3; }

/* アレルゲン表示 */
.sbs-allergen-badge {
    display: inline-block; padding: 1px 6px; margin-left: 3px;
    border-radius: 8px; background: #f3e8ff;
    color: #6b21a8; font-size: 10px; font-weight: 500;
}
/* 🔴 2026-08-19: .sbs-allergen-warn / -warning / -danger は削除した (spec §10-2)。
   食種別残留アレルゲンの ⚠ を描画しなくなり、当てる要素が無くなったため。
   食材バッジ (.sbs-allergen-badge) は健在。 */

/* 栄養素合計行 */
.sbs-nutrient-sep-row .sbs-nutrient-sep-cell {
    background: #e0f2fe; font-weight: 700; color: #075985;
    padding: 8px 12px; border-top: 2px solid #0284c7;
}
.sbs-nutrient-row .sbs-td-nutrient {
    font-weight: 500; background: #fafafa; color: #1f2937;
}
.sbs-td-nutrient-cell {
    text-align: right; background: #fafafa;
    font-variant-numeric: tabular-nums;
}
.sbs-nutrient-value { font-weight: 600; }
.sbs-delta { font-size: 12px; margin-left: 4px; }
.sbs-delta-pos { color: #dc2626; }
/* 🔴 2026-08-19: #059669 はライトで 3.61:1 だった。 */
.sbs-delta-neg { color: #047857; }

/* 凡例 */
.sbs-legend {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 8px 12px; background: #f9fafb;
    border: 1px solid #e5e7eb; border-radius: 6px;
    font-size: 12px; color: #4b5563;
    margin-top: 8px;
}
.sbs-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.sbs-legend-swatch {
    display: inline-block; width: 14px; height: 14px; border-radius: 3px;
    border: 1px solid #d1d5db;
}
.sbs-legend-swatch.sbs-food-status-common { background: #ffffff; }
.sbs-legend-swatch.sbs-food-status-partial { background: #fef9c3; }
.sbs-legend-swatch.sbs-food-status-exclusive { background: #fce7f3; }

/* iOS font-size 16px 遵守 */
.sbs-modal input[type="date"],
.sbs-modal input[type="number"],
.sbs-modal input[type="text"] {
    font-size: 16px;
}

/* ダークモード */
.dark .sbs-modal { background: #1c1917; color: #e5e7eb; }
.dark .sbs-header { background: linear-gradient(135deg, #064e3b, #1e3a8a); border-color: #374151; }
.dark .sbs-header h3 { color: #6ee7b7; }
.dark .sbs-info { background: #1e3a8a; color: #dbeafe; }
.dark .sbs-empty, .dark .sbs-loading { background: #27272a; color: #9ca3af; }
.dark .sbs-matrix thead th { background: #1f2937; }
.dark .sbs-td-meta, .dark .sbs-td-recipe, .dark .sbs-td-recipe-cell { background: #1f2937; color: #e5e7eb; }
.dark .sbs-category-list, .dark .sbs-nutrient-list { background: #1c1917; border-color: #374151; }
.dark .sbs-nutrient-group-title { color: #e5e7eb; border-color: #4b5563; }
.dark .sbs-cat-label, .dark .sbs-nutrient-label { background: #27272a; border-color: #374151; color: #e5e7eb; }
/* pre-existing dark 欠落の系統修正 (2026-07-24 実測 1.01:1→10.5:1):
   .sbs-nutrient-name / .sbs-cat-name.sbs-cat-main はライト用固定色のみで
   .dark 上書きが無く、ダークテーマで濃色on濃色になっていた */
.dark .sbs-nutrient-name { color: #e5e7eb; }
.dark .sbs-cat-name.sbs-cat-main { color: #6ee7b7; }
.dark .sbs-cat-label:hover, .dark .sbs-nutrient-label:hover { background: #1e3a8a; border-color: #3b82f6; }
.dark .sbs-food-status-common .sbs-td-food,
.dark .sbs-food-status-common .sbs-td-food-cell { background: #1c1917; }
.dark .sbs-td-nutrient, .dark .sbs-td-nutrient-cell { background: #18181b; color: #e5e7eb; }
.dark .sbs-legend { background: #27272a; border-color: #374151; color: #d1d5db; }
/* pre-existing dark 欠落の系統修正 第2弾 (2026-07-24 ユーザー報告: 戻るボタン白on白):
   ボタン/×/カウンタ/日付入力(UA白背景)/ヒントに .dark 上書きが無かった。
   .dark .sbs-btn は詳細度で .sbs-btn-primary を上回るため primary の再宣言も必須 */
.dark .sbs-actions-top { background: #1f2937; border-bottom-color: #4b5563; }
.dark .sbs-btn { background: #27272a; border-color: #4b5563; color: #e5e7eb; }
.dark .sbs-btn:hover:not(:disabled) { background: #3f3f46; }
.dark .sbs-btn-secondary { background: #27272a; }
.dark .sbs-btn-primary { background: #f97316; border-color: #f97316; color: #fff; }
.dark .sbs-btn-primary:hover:not(:disabled) { background: #ea580c; }
.dark .sbs-close { color: #d1d5db; }
.dark .sbs-close:hover { color: #ef4444; }
.dark .sbs-counter { color: #9ca3af; }
.dark .sbs-date-hint { color: #9ca3af; }
.dark .sbs-date-input { background: #27272a; border-color: #4b5563; color: #e5e7eb; }

/* 🔴 2026-08-19: ダークで読めなかった箇所を埋める (利用者報告)。
   実画面で測った値 (修正前 → 修正後の目標は 4.5:1 以上):

     .sbs-th-cat-name                 1.00  ← 食種名が**完全に不可視** (#1f2937 on #1f2937)
     .sbs-weight                      1.19  ← 重量が読めない
     .sbs-food-status-partial/-exclusive     ← 背景だけライトのまま残り、
                                              白い文字が乗って消える (common のみ上書きがあった)
     .sbs-th-cat-hc                   3.04
     .sbs-delta-pos / -neg            3.40 / 4.70

   🔴 `.sbs-th-cat-main` の背景も同時に暗くすること。
   これだけ `!important` でライト緑 (#ecfdf5) のまま残るため、
   文字を白くすると**メイン食種の列だけが逆に読めなくなる**。 */
.dark .sbs-th-cat-main { background: #064e3b !important; }
.dark .sbs-th-cat-name { color: #e5e7eb; }
.dark .sbs-th-cat-hc { color: #d1d5db; }
.dark .sbs-weight { color: #e5e7eb; }
.dark .sbs-delta-pos { color: #f87171; }
.dark .sbs-delta-neg { color: #34d399; }
.dark .sbs-food-status-partial .sbs-td-food,
.dark .sbs-food-status-partial .sbs-td-food-cell { background: #422006; }
.dark .sbs-food-status-exclusive .sbs-td-food,
.dark .sbs-food-status-exclusive .sbs-td-food-cell { background: #4a044e; }
/* 凡例の色見本も揃える (揃えないと凡例が別の色を説明する) */
.dark .sbs-legend-swatch.sbs-food-status-common { background: #1c1917; }
.dark .sbs-legend-swatch.sbs-food-status-partial { background: #422006; }
.dark .sbs-legend-swatch.sbs-food-status-exclusive { background: #4a044e; }

/* ============================================
   Alma AI Pro スタイル（PR-C-5）
   autumn テーマ統一: #f97316 / #ea580c / #c2410c / #fff7ed / #fed7aa
   ============================================ */

/* Pro バッジ（リボン/ボタン内・小） */
.pro-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f97316;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    vertical-align: middle;
}

/* Pro バッジ（モーダルヘッダ用・大） */
.pro-badge-lg {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    background: #f97316;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    vertical-align: middle;
}

/* Pro バッジ（送信ボタン上の白背景バッジ） */
.pro-badge-inverse {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fff;
    color: #f97316;
    border: 1px solid #f97316;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    vertical-align: middle;
}

/* Pro リボンボタン（契約者向け） */
.ai-pro-tab-btn {
    border-color: #f97316;
}
.ai-pro-tab-btn:hover {
    background: #ffedd5;
    border-color: #ea580c;
}

/* 購入案内ボタン（Pro 未契約時） */
.ai-pro-promo-btn {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}
.ai-pro-promo-btn:hover {
    background: #ffedd5;
    border-color: #fb923c;
    color: #7c2d12;
}

/* 残回数バナー */
.ai-pro-banner {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #9a3412;
    margin-bottom: 12px;
}

/* 「追加購入」リンク（バナー内） */
.ai-pro-banner-link {
    color: #ea580c;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}
.ai-pro-banner-link:hover {
    color: #c2410c;
}

/* Pro 送信ボタン */
.ai-btn-pro {
    padding: 10px 24px;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, box-shadow 0.15s;
}
.ai-btn-pro:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
}
.ai-btn-pro:active {
    background: linear-gradient(135deg, #c2410c, #9a3412);
}
.ai-btn-pro:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    box-shadow: none;
}

/* ribbon-group: Pro 契約者向け（autumn アクセント） */
.rg-ai-pro .toolbar-btn {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}
.rg-ai-pro .toolbar-btn:hover {
    background: #ffedd5;
    border-color: #fb923c;
}

/* ribbon-group: 購入案内（非契約者向け） */
.rg-ai-pro-promo .toolbar-btn {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}
.rg-ai-pro-promo .toolbar-btn:hover {
    background: #ffedd5;
    border-color: #fb923c;
}

/* ── ダークモード（Pro） ── */
.dark .pro-badge { background: #ea580c; color: #fff; }
.dark .pro-badge-lg { background: #ea580c; color: #fff; }
.dark .pro-badge-inverse { background: #1f2937; color: #fed7aa; border-color: #ea580c; }
.dark .ai-pro-tab-btn { border-color: #ea580c; }
.dark .ai-pro-tab-btn:hover { background: #7c2d12; border-color: #c2410c; }
.dark .ai-pro-promo-btn { background: #431407; border-color: #c2410c; color: #fed7aa; }
.dark .ai-pro-promo-btn:hover { background: #7c2d12; border-color: #ea580c; color: #ffedd5; }
.dark .ai-pro-banner { background: #431407; border-color: #c2410c; color: #fed7aa; }
.dark .ai-pro-banner-link { color: #fb923c; }
.dark .ai-pro-banner-link:hover { color: #fdba74; }
.dark .ai-btn-pro { background: linear-gradient(135deg, #ea580c, #c2410c); }
.dark .ai-btn-pro:hover { background: linear-gradient(135deg, #c2410c, #9a3412); }
.dark .ai-btn-pro:disabled { background: #374151; color: #9ca3af; }
.dark .rg-ai-pro .toolbar-btn { background: #431407; border-color: #c2410c; color: #fed7aa; }
.dark .rg-ai-pro .toolbar-btn:hover { background: #7c2d12; border-color: #ea580c; }
.dark .rg-ai-pro-promo .toolbar-btn { background: #431407; border-color: #c2410c; color: #fed7aa; }
.dark .rg-ai-pro-promo .toolbar-btn:hover { background: #7c2d12; border-color: #ea580c; }

/* Phase 2 feature 3: 使用済食品 ★ marker */
.food-used-marker {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: #000;
    font-weight: bold;
}

/* ===================================================================
   献立一覧出力モーダルの器 (2026-09-03)

   🔴 **明るい背景を敷いたら文字色も置く。** JS 側は `background:#fff` だけを
   インラインで書いており、ダークでは body から継いだ near-white がそのまま乗って
   **160 要素が AA 未達 (最悪 1.10:1 · rgb(243,244,246) on #fff)** になっていた。
   「出力期間」「料理名表記」「栄養素選択」のラベルが**まったく見えない**状態で、
   会場で献立表を出せない (⚖️ 利用者指示 2026-09-03 で修正)。

   器に `color` を 1 行置けば子要素は全部それを継ぐ。子ごとに足すと、
   チェックボックスのラベルが増えたときに漏れる (#864 の基準モーダルと同じ結論)。
   固定 = tests/unit/test_modal_text_colour_on_light_background.py
   =================================================================== */
.menu-listing-modal {
    background: #fff;
    color: #1f2937;
    border-radius: 12px;
    padding: 24px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* 🔴 `<select>` はプラットフォームの既定色を使うため、器の `color` を継がない。 */
.menu-listing-modal select,
.menu-listing-modal input {
    color: #1f2937;
    background: #fff;
}

/* ===================================================================
   JS が組み立てる献立シートのモーダルの面 (2026-09-04 · 4 巡目)

   ⚖️ 利用者報告:「料理検索（栄養素）のモーダルがダークモード時に全く文字が読めません」。
   実測 (dev の実画面): **66 要素中 61 要素が AA 未達 · 最悪 1.10:1**。
   器は `modal.style.cssText = 'background:white;…'` と **JS のインライン**で背景だけを持ち、
   文字色は body から継いだ near-white (#f3f4f6) が乗っていた。

   🔴 **同じ形が `spreadsheet.js` に 15 件**あった — 料理削除の選択 / 料理のクリア /
   上下移動 / 料理の移動 / **対象（食種）設定** / 成分表の設定・作成・複製・改名・編集 /
   **料理検索（栄養素）** / 食品群集計 / 盛り付け / Google キーワード設定 / デモカレンダー。
   **どれも会場で押せるボタンから開く。**

   🔴 **1〜3 巡目の検査はどれも掛からなかった。** ① は CSS とテンプレートの `<style>` を
   読むが器は JS にある · ② は `data-*-modal-root` を持つ器だけを見る · ③ は共有モジュール
   3 本だけを見る。**4 巡目の穴**として ④ を足した
   (`tests/unit/test_modal_text_colour_on_light_background.py`)。

   🔴 **背景と文字色は同じ規則に置く。** 片方だけ CSS へ移すと白地に白文字へ戻る。
   🔴 **`.modal-content` / `.modal-container` より後ろに置く** — 詳細度が同じ (0,1,0) なので、
   前に置くと背景だけ古い規則に負ける。
   =================================================================== */
[data-sheet-modal-root] {
    background: #fff;
    color: #1f2937;
}

/* 対象（食種）設定だけは暖色の面 (元の見た目をそのまま保つ)。 */
[data-sheet-modal-root][data-sheet-modal="target-selection"] {
    background: #fff7ed;
}

/* 🔴 **ダークでも明るい面のままにする。**
   `.dark .modal-content { background:#1f2937; color:#e5e7eb; }` は詳細度 (0,2,0) で
   `[data-sheet-modal-root]` (0,1,0) に勝つため、**文字色だけダーク用の明るいグレーが残り、
   明るい面に乗って読めなくなる** (2026-09-04 に実測 · 対象（食種）設定で `#e5e7eb`)。
   ⚖️ 15 件はいずれも**元からインラインで明るい面**を指定していたものなので、
   両テーマで明るい面に固定する (`.menu-listing-modal` と同じ既定 · #866/#867 で承認済み)。
   🔴 **背景と文字色は必ず同じ規則に置く** — 片方だけ打ち消すと白地に白文字へ戻る。 */
.dark [data-sheet-modal-root] {
    background: #fff;
    color: #1f2937;
}
.dark [data-sheet-modal-root][data-sheet-modal="target-selection"] {
    background: #fff7ed;
}

/* 🔴 `<select>` `<option>` `<input>` `<textarea>` はプラットフォームの既定色を使い、
   器の `color` を継がない。ここを省くと器だけ直って中身が読めないまま残る
   (`.menu-listing-modal` で同じ結論に至っている)。 */
[data-sheet-modal-root] select,
[data-sheet-modal-root] option,
[data-sheet-modal-root] input,
[data-sheet-modal-root] textarea {
    background: #fff;
    color: #1f2937;
}

/* 料理検索（栄養素）の条件行を消す「×」。
   🔴 実測 2026-09-04: インラインの `#ef4444` は白地に **3.76:1** で AA 未達だった。
   `.rg-row .toolbar-btn.danger` が 2026-08-27 に同じ理由で `#b91c1c` (5.30:1) へ
   落としているので、そこに揃える (赤の濃さを 2 通り持たない)。 */
.nutr-criteria-remove {
    color: #b91c1c;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
}
.nutr-criteria-remove:hover {
    color: #7f1d1d;
}

/* 🔴 **器が白いままのモーダルの中では `.dark` の明るいグレーを打ち消す。**
   `.dark .recipe-search-empty` は「暗い面の上の薄い文字」向けの `#d1d5db` だが、
   この器はダークでも白なので **1.41:1** になる (2026-09-04 実測)。
   `recipe-shared-modals.css` の `.dark [data-loader-modal-root] .recipe-search-filter-label`
   と同じ形。器を白で固定したら、中の `.dark` 規則も一緒に見直す。 */
.dark [data-sheet-modal-root] .recipe-search-empty {
    color: #6b7280;
}

/* 🔴 **見出しと「×」も同じ形だった** (2026-09-05 · ⚖️ 利用者「ダークで『成分表を新規作成』の
   タイトルが判読できない」)。`.dark .modal-header h3` は詳細度 (0,2,1) で
   `[data-sheet-modal-root]` (0,1,0) に勝つため、**器は白のまま文字だけ `#e5e7eb`** になり
   実測 **1.24:1** だった。`.modal-header` を使う成分表モーダルは 5 つあり、
   利用者が気づいたのは 1 つだけ (新規作成 / 設定 / 編集 / 名前変更 / 配信元の複製)。
   🔴 **器を白で固定したら、その器の中で使う共有クラスの `.dark` 規則も一緒に打ち消す。**
   `.recipe-search-empty` (上) と同じ結論。 */
.dark [data-sheet-modal-root] .modal-header h3 {
    color: #1f2937;
}
.dark [data-sheet-modal-root] .modal-header {
    border-color: #e5e7eb;
}
.dark [data-sheet-modal-root] .modal-close,
.dark [data-sheet-modal-root] .modal-close-btn {
    color: #6b7280;
}

/* 対象（食種）設定モーダルの単位 (「人」)。
   🔴 実測 2026-09-04: `#6b7280` は**白地なら 4.83 で通るが、この器の暖色 `#fff7ed` の上では
   4.22 で AA 未達**だった (両テーマで同じ)。器の色を変えたら、その上の薄い文字も測り直す。
   `#4b5563` は `#fff7ed` の上で 6.5 出る。 */
.target-modal-unit {
    font-size: 0.78rem;
    color: #4b5563;
}

/* 料理検索モーダルの空状態 (「検索中...」「該当する料理がありません」
   「料理を選択するとプレビューが表示されます」) — 2026-09-03。

   🔴 **同じ 1 行が JS に 7 か所**あり、どれも `color:#9ca3af` をインラインで
   持っていた。ライトでは白地に 2.54:1 で AA 未達、ダークではインラインが
   `.dark` より強いので直しようが無かった。**器を 1 つのクラスにまとめる。** */
.recipe-search-empty {
    padding: 20px;
    text-align: center;
    color: #6b7280;
}
.dark .recipe-search-empty {
    color: #d1d5db;
}