/* ============================================================
   Web注文システム — 静岡牛乳 Design System 適用版
   トークン出典: .claude/design_system/shizuoka-milk-ds.css
   セレクタ名は変更しない（JSが参照するclassを維持）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
/* base — 1b ネイビーバンド */
--blue-900:#16385F;--blue-700:#1F4E86;--blue-600:#2D6CB5;--blue-500:#3B7EC9;--blue-100:#E8EEF6;--blue-50:#F2F6FA;
--ink-1:#1B2634;--ink-2:#38506E;--ink-3:#5A6675;--ink-4:#8A94A0;
--white:#FFFFFF;--paper:#FAFBFC;
--line-1:#D3DCE8;--line-2:#E4E9EF;
--green-bg:#DFF2EE;--green-text:#0E6E5C;--green-600:#17917C;
--amber-bg:#FBE9D4;--amber-text:#A05A14;--amber-600:#D07A2E;
--red-bg:#F9DEE4;--red-text:#AD2B4E;--red-600:#C22B54;
/* semantic */
--brand:var(--blue-900);--action:var(--blue-600);--action-hover:var(--blue-700);
--text-body:var(--ink-1);--text-sub:var(--ink-3);--text-faint:var(--ink-4);--text-onbrand:#FFFFFF;--text-heading:var(--blue-900);
--surface-page:var(--paper);--surface-card:var(--white);--surface-band:var(--blue-900);--surface-tint:var(--blue-100);--surface-row-alt:var(--blue-50);
--border-strong:var(--line-1);--border-soft:var(--line-2);
--status-ok-bg:var(--green-bg);--status-ok-text:var(--green-text);
--status-warn-bg:var(--amber-bg);--status-warn-text:var(--amber-text);
--status-error-bg:var(--red-bg);--status-error-text:var(--red-text);
--focus-ring:0 0 0 3px rgba(45,108,181,.35);
/* typography */
--font-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic UI',sans-serif;
/* spacing / radius / shadow */
--radius-sm:4px;--radius:6px;--radius-lg:8px;
--shadow-card:0 1px 3px rgba(22,56,95,.08),0 1px 2px rgba(22,56,95,.05);
--shadow-pop:0 4px 16px rgba(22,56,95,.16);
/* 業務区分色（DSに無い色はDSトーンに調整して維持） */
--locked-bg:#ECEFF2;          /* 締切ロック日: 薄灰 */
--locked-text:#8A94A0;
--holiday-bg:#FBF0F3;         /* 祝日: DS赤系の淡地 */
}

* { box-sizing: border-box; }
/* 地色は薄青(--blue-50)。白カード・白表との明暗差をつけて境界を見やすくする */
body { font-family: var(--font-sans); margin: 0; background: var(--blue-50); color: var(--text-body); font-size: 13px; line-height: 1.6; }
main { max-width: 1500px; margin: 0 auto; padding: 16px; }
a { color: var(--action); }
::selection { background: var(--blue-100); }

/* ネイビーバンド（アプリヘッダ） */
.topbar { background: var(--surface-band); color: #fff; display: flex; align-items: center; gap: 24px; padding: 0 16px; min-height: 48px; }
.topbar .brand { color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
.topbar nav a { color: rgba(255,255,255,.92); font-weight: 500; margin-right: 16px; text-decoration: none; transition: color 120ms ease; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
footer { text-align: center; color: var(--text-faint); font-size: 12px; padding: 20px; }
h1 { font-size: 20px; font-weight: 700; color: var(--text-heading); } h1 .corp { font-size: 13px; color: var(--text-sub); font-weight: 400; }
h2 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-top: 28px; }
.memo-line { color: var(--text-sub); }

/* 園カード（白カード＋左に青のアクセントバー。区分バッジのみ区分ごとの色分け） */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.card { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--line-1); border-left: 6px solid var(--action); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 120ms ease; }
.card:hover { border-left-color: var(--blue-900); }
.card-head { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); transition: background-color 120ms ease, color 120ms ease; }
.card:hover .card-head { background: var(--blue-50); }
.card-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink-1); }
.card:hover .card-name { color: var(--blue-900); }
.card-go { flex: none; font-size: 12px; font-weight: 700; color: var(--action); white-space: nowrap; }
.card-body { padding: 12px 14px 14px; }
.card-corp { font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.card-badges:empty { display: none; }
.card-memo { font-size: 13px; color: var(--text-body); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.badge { display: inline-block; font-size: 12px; border-radius: var(--radius-sm); padding: 2px 9px; margin: 0 4px 4px 0; font-weight: 700; }
.badge-m { background: var(--blue-100); color: var(--blue-700); }
.badge-w { background: var(--status-ok-bg); color: var(--status-ok-text); }
.badge-s { background: var(--status-warn-bg); color: var(--status-warn-text); }
/* 区分バッジ: 白地＋区分色の枠線の丸pill（アウトライン）
   色は和のトーン: 園児=若竹 職員=藤 乳児=桜 以上児=藍 幼児=山吹 個人=鼠 */
.badge-cat.cat-enji    { --b: #2F7A6A; }
.badge-cat.cat-shokuin { --b: #6A5EA8; }
.badge-cat.cat-nyuji   { --b: #B4577A; }
.badge-cat.cat-ijoji   { --b: #20456E; }
.badge-cat.cat-yoji    { --b: #B07A16; }
.badge-cat.cat-kojin   { --b: #6B6B66; }
.badge-cat { --b: var(--ink-1); background: #fff; color: var(--b); border: 1.5px solid var(--b); border-radius: 99px; padding: 2px 12px; }
.hint { color: var(--text-sub); font-size: 13px; }

/* タブ（選択中=薄青地+濃紺） */
.tabs { margin: 14px 0; }
.tab { background: transparent; border: none; padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-sub); border-radius: var(--radius) var(--radius) 0 0; margin-right: 4px; transition: background-color 120ms ease, color 120ms ease; }
.tab:hover { background: var(--blue-50); }
.tab.active { background: var(--surface-tint); font-weight: 700; color: var(--text-heading); }
.pane { background: var(--surface-card); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px; }
.controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 0; }
.controls label { font-size: 13px; font-weight: 500; color: var(--text-sub); }
.chk { color: var(--text-sub); }

/* 受注グリッド（横罫基調・ヘッダ薄青） */
.table-wrap { overflow-x: auto; max-height: 60vh; overflow-y: auto; }
#grid { border-collapse: collapse; min-width: 480px; }
#grid th, #grid td { border: none; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); padding: 6px 10px; font-size: 13px; }
#grid thead th { background: var(--surface-tint); color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--line-1); position: sticky; top: 0; z-index: 1; }
#grid .datecell { white-space: nowrap; background: var(--blue-50); }
#grid tr.holiday td { background: var(--holiday-bg); }
.holtag { color: var(--red-text); font-size: 11px; }
#grid input.qty { width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid var(--line-1); border-radius: var(--radius-sm); padding: 2px 4px; }
.colh .cat { font-size: 11px; color: var(--status-ok-text); }
.colops { margin-top: 2px; }

/* ボタン（主=青 / 副=白地+枠+青文字） */
.btn { display: inline-block; background: #fff; border: 1px solid var(--line-1); border-radius: var(--radius); padding: 6px 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; color: var(--action); transition: background-color 120ms ease, color 120ms ease; }
.btn:hover { background: var(--blue-50); text-decoration: none; }
.btn-primary { background: var(--action); color: #fff; border-color: transparent; font-weight: 700; }
.btn-primary:hover { background: var(--action-hover); }
.btn-danger { background: var(--status-error-bg); color: var(--status-error-text); border-color: #EDC6D0; }
.btn-danger:hover { background: #F4D3DC; }
.mini { font-size: 11px; padding: 1px 6px; border: 1px solid var(--line-1); background: #fff; color: var(--action); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-sans); transition: background-color 120ms ease; }
.mini:hover { background: var(--blue-50); }

/* 一覧テーブル（横罫のみ・ヘッダ薄青） */
table.list { border-collapse: collapse; width: 100%; background: var(--surface-card); }
table.list th, table.list td { border: none; border-bottom: 1px solid var(--border-soft); padding: 6px 10px; font-size: 13px; }
table.list th { background: var(--surface-tint); color: var(--ink-2); font-weight: 500; text-align: left; border-bottom: 1px solid var(--line-1); }
table.list tbody tr:hover td { background: var(--blue-50); }
table.list .num { text-align: right; font-variant-numeric: tabular-nums; }
.pcode { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-sub); }
.row-cancel td { color: var(--text-faint); text-decoration: line-through; background: var(--paper); }
.row-cancel td .status, .row-cancel td .btn { text-decoration: none; }
.status { font-size: 12px; border-radius: var(--radius-sm); padding: 1px 8px; font-weight: 500; background: var(--status-ok-bg); color: var(--status-ok-text); }
.status.s-取消 { background: var(--status-error-bg); color: var(--status-error-text); }
.status.s-変更あり { background: var(--status-warn-bg); color: var(--status-warn-text); }
.flash { background: var(--status-ok-bg); border: none; color: var(--status-ok-text); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.logs { font-size: 13px; } .logtime { color: var(--text-faint); margin-right: 8px; }

table.spot { border-collapse: collapse; margin-bottom: 8px; }
table.spot th, table.spot td { border: none; border-bottom: 1px solid var(--border-soft); padding: 4px 6px; font-size: 13px; }
table.spot th { background: var(--surface-tint); color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--line-1); }
table.spot input[type="text"].s-prod { width: 22em; }

/* 月間カレンダー（横罫基調=横罫を濃く・縦罫は薄く、ヘッダ薄青） */
.calwrap { overflow-x: auto; }
table.cal { border-collapse: collapse; width: 100%; table-layout: fixed; min-width: 1000px; background: var(--surface-card); }
table.cal th, table.cal td { border: 1px solid var(--border-soft); border-bottom: 1px solid var(--line-1); padding: 4px 6px; font-size: 13px; vertical-align: top; }
table.cal th { background: var(--surface-tint); color: var(--ink-2); font-weight: 500; padding: 8px 6px; font-size: 13px; }
table.cal th.sun, table.cal td.sun .dnum { color: var(--red-600); }
table.cal th.sat, table.cal td.sat .dnum { color: var(--blue-600); }
table.cal td { height: 118px; background: var(--surface-card); }
table.cal td.out { background: var(--paper); }
table.cal td.locked { background: var(--locked-bg); }
table.cal td.locked .dnum { color: var(--locked-text); }
table.cal td.holiday { background: var(--holiday-bg); }
.dhead { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dnum { font-weight: 700; font-size: 15px; color: var(--ink-2); }
.lockwhy { font-size: 11px; color: var(--locked-text); margin-left: auto; }
.dnote { font-size: 11px; margin: 2px 0; white-space: nowrap; overflow: hidden; }
/* 納品日チップ(全ての入力可能日に表示。当日納品も同スタイル) */
.dchip { display: inline-block; font-size: 11px; font-weight: 500; background: var(--status-warn-bg); color: var(--status-warn-text); border-radius: var(--radius-sm); padding: 0 6px; line-height: 1.6; }
.cellrow { display: block; margin-top: 6px; padding: 3px 4px; background: var(--blue-50); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.cellname { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.cellctl { display: flex; align-items: center; gap: 3px; }
table.cal input.qty { width: 3em; flex: none; text-align: center; font-variant-numeric: tabular-nums; border: 1px solid var(--line-1); border-radius: var(--radius); padding: 4px 3px; font-size: 15px; }
/* 数値入力の小さな上下スピナーは非表示(−/＋ボタンと直接入力のみ) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qtyctl { display: inline-flex; align-items: center; gap: 2px; }
.qbtn { width: 30px; height: 30px; font-size: 18px; line-height: 1; border: 1px solid var(--line-1); background: #fff; border-radius: var(--radius); cursor: pointer; color: var(--action); font-weight: 700; flex: none; transition: background-color 120ms ease; }
.qbtn:hover { background: var(--blue-50); }
.qtyctl.big .qbtn { width: 40px; height: 40px; font-size: 22px; }
.qtyctl.big #stamp-qty { width: 4em; font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; padding: 6px; border: 1px solid var(--line-1); border-radius: var(--radius); }
/* 区分: 色ではなく名前の文字バッジで区別する（DSトーン） */
.catname { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid var(--ink-4); border-radius: var(--radius-sm); padding: 1px 6px; white-space: nowrap; }

/* 自動保存ステータス */
.save-status { font-size: 13px; min-width: 11em; }
.save-status.saving { color: var(--status-warn-text); }
.save-status.saved { color: var(--status-ok-text); font-weight: 700; }

/* 注文済み明細(カレンダー内・即保存) — 通常はコンパクト(短縮名＋数量)、タップで操作展開 */
.cellrow.ordered { background: var(--surface-card); border-color: var(--border-soft); cursor: pointer; }
.cellrow.ordered.open-edit { border-color: var(--action); background: var(--blue-50); }
.oqty-badge { flex: none; margin-left: auto; font-size: 15px; font-weight: 700; color: var(--blue-900); font-variant-numeric: tabular-nums; }
.oqty-badge small { font-size: 10px; font-weight: 400; color: var(--text-faint); margin-left: 1px; }
.otag { flex: none; font-size: 11px; color: var(--status-ok-text); background: #fff; border: 1px solid #C4E3DB; border-radius: var(--radius-sm); padding: 0 4px; white-space: nowrap; }
.oqty { font-size: 15px; font-weight: 700; color: var(--status-ok-text); padding: 0 8px; font-variant-numeric: tabular-nums; }

/* ドラッグ&ドロップ */
.cellrow[draggable] { cursor: grab; }
.cellrow[draggable]:active { cursor: grabbing; }
table.cal td.dragover { outline: 3px dashed var(--action); outline-offset: -3px; background: var(--blue-100); }

/* タップ時のフィードバックと注文内容サマリー */
table.cal td.flash { animation: cellflash .4s; }
@keyframes cellflash { 0% { background: var(--blue-100); } 100% { background: var(--surface-card); } }
#summary-box h2 { margin-top: 18px; }
.sumsub { font-size: 14px; font-weight: 700; color: var(--text-heading); margin: 16px 0 6px; }
.sumtable td.dlvdiff { color: var(--status-warn-text); font-weight: 700; }
.sumtable td.dlvsame { color: var(--text-sub); }
.sumtable { max-width: 720px; }
.sumtable td, .sumtable th { font-size: 13px; }
.sumtable .catdot { display: inline-block; vertical-align: middle; margin-right: 4px; }
/* 区分バッジ・園カードの区分ボタン */
.catbadge { display: inline-block; font-size: 13px; background: var(--blue-100); color: var(--blue-700); border: 1px solid var(--line-1); border-radius: var(--radius-sm); padding: 2px 10px; vertical-align: middle; margin: 0 6px; font-weight: 500; }
.catlink { display: inline-block; font-size: 13px; background: var(--blue-100); color: var(--blue-700); border: 1px solid var(--line-1); border-radius: var(--radius); padding: 4px 12px; margin: 2px 4px 2px 0; text-decoration: none; font-weight: 500; transition: background-color 120ms ease, color 120ms ease; }
.catlink:hover { background: var(--action); color: #fff; text-decoration: none; }

/* 月ナビ・配達曜日トグル */
.monthnav { gap: 10px; }
.month-title { font-size: 20px; font-weight: 700; color: var(--text-heading); border-radius: 99px; padding: 4px 20px; }
/* 月ごとの季節色(淡い地色+同系の濃い文字。1月=初春 2月=雪 3月=桃 4月=桜 5月=新緑
   6月=紫陽花 7月=海 8月=ひまわり 9月=お月見 10月=紅葉 11月=落ち葉 12月=もみの木) */
.month-title.m1  { background: #FDF3E7; color: #8A5A2B; }
.month-title.m2  { background: #E6F1FB; color: #0C447C; }
.month-title.m3  { background: #FDEFF4; color: #B04A72; }
.month-title.m4  { background: #FBE7EE; color: #993556; }
.month-title.m5  { background: #EAF3DE; color: #3B6D11; }
.month-title.m6  { background: #EEEDFE; color: #534AB7; }
.month-title.m7  { background: #E0F3F8; color: #0E6E86; }
.month-title.m8  { background: #FAEEDA; color: #A05A14; }
.month-title.m9  { background: #F4EFDF; color: #77613A; }
.month-title.m10 { background: #FAECE7; color: #993C1D; }
.month-title.m11 { background: #F1EFE8; color: #5F5E5A; }
.month-title.m12 { background: #E1F5EE; color: #085041; }
#month { padding: 6px 8px; border: 1px solid var(--line-1); border-radius: var(--radius); font-family: var(--font-sans); background: #fff; }
.wdchip { display: inline-block; border: 1px solid var(--line-1); background: #fff; border-radius: var(--radius); padding: 7px 12px; margin: 0 2px; font-size: 15px; cursor: pointer; color: var(--text-sub); user-select: none; transition: background-color 120ms ease, color 120ms ease; }
.wdchip:has(input:checked) { background: var(--surface-tint); color: var(--blue-900); border-color: var(--action); font-weight: 700; }
.wdchip input { display: none; }

/* 定番商品・数量のスタンプ入力パネル(スクロールしても追従) */
#stamp-panel { position: sticky; top: 0; z-index: 10; background: var(--surface-card); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 8px 10px; margin: 10px 0; box-shadow: var(--shadow-card); }
.stamp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.stamp-row[hidden] { display: none; }   /* hidden属性がdisplay:flexに負けないように */
.stamp-label { font-size: 12px; font-weight: 500; color: var(--text-sub); width: 2.5em; flex: none; }
.stamp-hint { margin-left: 8px; }

/* 1行ツールバー(区分▾・商品カテゴリ▾・商品▾・数量)。項目を切り替えても高さが変わらないようmin-heightで固定 */
.toolbar { gap: 8px; min-height: 44px; }
.tbtext { font-size: 14px; color: var(--ink-2); }
#stamp-unit { color: var(--blue-900); }
.ddbtn { font-size: 14px; font-weight: 700; padding: 9px 10px; border: 1px solid var(--line-1); background: #fff; color: var(--blue-900); border-radius: var(--radius); cursor: pointer; font-family: var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: background-color 120ms ease; }
.ddbtn:hover { background: var(--blue-50); }
/* 選択内容が変わっても横位置が動かないよう各ボタンの幅を固定 */
#cat-dd { width: 6.5em; flex: none; }
#tab-dd { width: 11em; flex: none; }
#prod-dd { width: 18em; flex: none; }
#search-area { flex: none; }
.ddmenu { position: fixed; z-index: 30; min-width: 180px; background: #fff; border: 1px solid var(--line-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; font-size: 13px; font-family: var(--font-sans); }
.ddmenu .cmi { padding: 10px 14px; cursor: pointer; color: var(--text-body); }
.ddmenu .cmi:hover { background: var(--blue-100); }
.ddmenu .cmi.sel { background: var(--surface-tint); color: var(--blue-900); font-weight: 700; }
.ddmenu .cmi + .cmi { border-top: 1px solid var(--line-2); }
#search-area[hidden] { display: none; }
#search-area { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; width: 18em; }   /* 幅=商品▾と同じ18em(14px基準) */

/* この日の商品をコピー(日付の横・押すとコピーモード開始) */
.dcopy { margin-left: auto; min-width: 0; flex-shrink: 1; font-size: 11px; padding: 2px 5px; border: 1px solid var(--line-1); background: #fff; color: var(--action); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-sans); white-space: nowrap; overflow: hidden; transition: background-color 120ms ease; }
.dcopy:hover { background: var(--blue-50); }
/* コピー中バナー(画面下中央のフローティングピル・薄オレンジ=DSの要確認アンバー) */
#copy-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; background: var(--amber-bg); border: 1px solid #EAC9A0; border-radius: 99px; padding: 6px 8px 6px 16px; font-size: 13px; color: var(--amber-text); box-shadow: var(--shadow-pop); white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; }
#copy-banner[hidden] { display: none; }
#copy-banner .btn { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: #fff; border: 1px solid #EAC9A0; color: var(--amber-text); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
#copy-banner .btn:hover { background: #FDF3E7; }
table.cal td.copysrc { outline: 2px solid var(--action); outline-offset: -2px; }

/* 商品検索の予測候補(入力欄の「上」に表示。下だとWindowsのIME変換候補窓と重なる) */
.searchwrap { position: relative; flex: none; width: 11.5em; }
#product-search { width: 100%; padding: 9px 8px; font-size: 13px; border: 1px solid var(--line-1); border-radius: var(--radius); font-family: var(--font-sans); }
#suggest { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--line-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); z-index: 20; overflow: hidden; }
.sitem { padding: 7px 10px; font-size: 13px; cursor: pointer; }
.sitem.sel, .sitem:hover { background: var(--blue-100); }
.sitem .pcode { float: right; }

/* カレンダーのマス内 商品行 */
table.cal td.open { cursor: pointer; }
table.cal td.open:hover { background: var(--blue-50); }
.cellrow .sname { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text-body); white-space: nowrap; overflow: hidden; }
.idel { flex: none; margin-left: auto; font-size: 13px; width: 22px; height: 22px; line-height: 1; padding: 0; border: 1px solid var(--line-1); background: #fff; border-radius: var(--radius-sm); cursor: pointer; color: var(--status-error-text); transition: background-color 120ms ease; }
.idel:hover { background: var(--status-error-bg); }

dialog { border: 1px solid var(--line-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); width: 520px; max-width: 95vw; font-family: var(--font-sans); }
dialog h3 { margin-top: 0; color: var(--text-heading); }
#product-results { max-height: 340px; overflow-y: auto; border: 1px solid var(--line-2); }
.pcount { font-size: 12px; color: var(--text-sub); padding: 4px 8px; background: var(--blue-50); position: sticky; top: 0; }
.presult { padding: 6px 8px; cursor: pointer; font-size: 14px; }
.presult:hover { background: var(--blue-100); }
.presult .pcode { float: right; }
.dialog-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* 商品一覧ダイアログ */
#products-dialog { width: 640px; }
.plist-wrap { max-height: 60vh; overflow-y: auto; border: 1px solid var(--line-2); }
.plist th { position: sticky; top: 0; }
.plist .prow { cursor: pointer; }
.plist .prow:hover td { background: var(--blue-50); }
.plist .prow.sel td { background: var(--blue-100); font-weight: 700; }
.scopetag { font-size: 11px; background: var(--status-warn-bg); color: var(--status-warn-text); border: none; border-radius: var(--radius-sm); padding: 1px 6px; }

#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 22px; border-radius: var(--radius-lg); font-size: 14px; z-index: 99; box-shadow: var(--shadow-pop); }
#toast.ok { background: var(--green-600); color: #fff; }
#toast.ng { background: var(--red-600); color: #fff; }

/* フォーカスリング */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--action); box-shadow: var(--focus-ring); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus-ring); }