/* ============================================================================
   ロンド・クローフ 管理アプリ 共通スタイル
   2026-08-28 南指示により index.html の <style> から切り出し。★中身は1行も変えていない。

   ここが「値を書いてよい唯一の場所」です（UI規約v2 の①土台と②部品の層）。
   画面（index.html）には style="..." を書かないこと。

   ★キャッシュ対策：index.html の <link> の ?v= を APP_VERSION と同じ値に保つこと。
     ずれると、現場のブラウザが古いCSSを使い続けます。
   ============================================================================ */
  /* ★決定7（役割で持つ色）2026-09-04 南決定「どちらかに寄せていい」＝**多数派に寄せた**。
       それまで同じ役割に2つの値が混在していて、同じ意味の表示が画面ごとに違う色だった。
         注意 … 濃い山吹（2箇所）と 煉瓦茶（16箇所）→ **煉瓦茶を採用**（--warn を新設）
         危険 … 純赤（14箇所）と 煉瓦赤（16箇所）→ **煉瓦赤を採用**（--danger の値を差し替え）
       ★--danger の値が変わるので、これまで --danger だった箇所（CSS8・ログインのエラー文など）は
         純赤から少し落ち着いた煉瓦色になります。**意図した変更です。**
       ★この欄に色の16進値を書かないこと。値は下の :root にしか置かない
         （2026-09-04：説明のつもりで書いた16進値を、一括置換が拾って壊した）。
       ★:root を2つ作らないこと。uicheck は最初の :root しか読まないので、
         別ブロックに変数を書くと「未定義のCSS変数」で必ず NG になります。 */
  :root{--sales:#1f6fb0;--recv:#0f8a86;--purch:#c07d1e;--pay:var(--danger);--viewer:#525659;--bar:#e4e8e6;--on-bar:#cfe9e0;--warn-line:#ffe082;--danger-line:#e0b4b4;--line:#b5c4bc;--on-accent:#fff;--ro:#f4f6ee;--warn-bg:#fff8e1;--danger-bg:#fff5f5;--green:#0b6b53;--green-bar:#095a45;--bg:#f4f6f8;--surface:#fff;--alt:#f0f4f7;--border:#d6e2d6;--border2:#e2e8ee;--text:#1f2421;--muted:#5b6660;--light:#9aa39c;--hover:#eef7f3;--danger:#b0492e;--warn:#a5641e;--ok:#3b6d11;--lblw:80px}
  /* ══ ①土台：項目名の枠幅（2026-08-28 南決定）════════════════════════════
       ★幅の値はここにしか書きません。画面（index.html）にも、他のルールにも書かない。
       ★決め方＝実在する項目名82種類を、南の実機のブラウザで実際に描いて測った結果。
         推測値は1つも入っていません。測定＝mock_項目名の枠幅_実測版_2026-08-28_v2.html

       既定 80px ── 普段の画面77種のうち最長は「現在のコード」で 78px（実測）。
                    余裕は2pxしかありません。別のPCや表示スケールが違う環境では
                    足りなくなる可能性があります（★要注意）。
       例外は2つだけ。窓の外側に .lblw-wm / .lblw-pwd を付けると、
       その窓の中の項目名・表・グリッドがまとめて追従します（1箇所直せば済む形）。
       ★既定値 --lblw:80px は上の :root に入れてあります。
         ここに2つめの :root を作らないこと。uicheck.js（66行）は最初の :root しか
         読まないので、別ブロックにすると「未定義の変数」で NG になります。 */
  .lblw-wm {--lblw: 96px}  /* マニフェストの子ダイアログ「取扱品目・備考」＝96px（実測） */
  .lblw-pwd{--lblw:142px}  /* パスワード変更窓「新しいパスワード（確認）」＝142px（実測） */

  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  /* ══ 書体を固定する（南指示 2026-09-09）══════════════════════════════════
     旧＝font-family:system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif
     ★何が悪かったか＝先頭の system-ui は書体名ではなく「OSのUI書体」を指すキーワードで、
       Windows では Segoe UI に解決される。Segoe UI は漢字・かなを持たないので、
       ひとつの表の中で「半角数字＝Segoe UI／全角＝Yu Gothic UI」と2書体が混ざり、
       しかも数字1文字の幅（＝1ch）が機械側で決まっていた。
       この表の幅は全部「文字数」で決めている（決定11・ch単位）ので、
       1ch が固定されないと**数えた文字数と実際の幅が合わない。**
       実害＝分類コードの列（7桁固定・見出し10ch）が切れた・見出しが2行に折り返した。
     ★新＝等幅（fixed-pitch）だけを並べる。並びのどれに当たっても
       「全角1文字＝1em＝半角2文字」が厳密に成り立つので、ch で数えた幅がそのまま出る。
         BIZ UDGothic … Windows 10 1809 以降に同梱。読みやすさを目的に作られた等幅
         MS Gothic    … 日本語 Windows に必ずある等幅（BIZ が無い機械の受け皿）
         monospace    … 最後の受け皿
       ★プロポーショナル書体（Yu Gothic UI・MS UI Gothic・Meiryo）は入れない。
         半角が 0.5em ちょうどでないため、入れた時点で幅が合わなくなる。
     ★2026-09-25 決定29 v2（南「BIZ UDゴシック　これを全体でつかう」）＝書体は BIZ UDゴシック1つ。
       MS Gothic をやめた。BIZ UDゴシックが入っていない端末（iPad・Android・古いPC）へは
       /fonts/v1.05/biz-udgothic.css（index.html の先頭で読み込み）が同じ字を配るので、受け皿が要らない。
       残る monospace は、フォントも読み込めなかったときだけの最後の保険。
       帳票ひな形・タブレット・スマホ点検・PDF も同じ1本（fontcheck.js がデプロイ前に止める）。
     ★ボタン・入力欄・選択欄・複数行の入力欄は、ブラウザが既定で別の字体を当てる。
       下の button,input,select,textarea で本文の字体を受け継がせる（2026-09-25 棚卸し §3 で発覚）。
     ★12px のとき 1ch＝6.0px・全角＝12.0px に固定される（要実機確認）。 */
  body{font-family:"BIZ UDGothic",monospace;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;display:flex;flex-direction:column;overflow:hidden}
  /* ══ ①土台：文字の太さ（決定3・2026-08-28 南決定／2026-09-04 適用）════════
       **太さは 400（ふつう）と 700（太字）の2つだけです。**
       `500` `600` `800` `bold` `normal` は廃止しました。この5つを書かないこと。
       2026-09-04 に57箇所（CSS 31・画面JS 26）を機械置換ずみ＝
         500 / 600 / 800 / bold → 700 ／ normal → 400。
       ★このとき「いま太字のものは太字のまま」に寄せています（南決定＝今回は値の統一だけ）。
         決定3の後半「太字にするのは項目名だけ。それ以外はすべてふつう」は**まだ未適用**です。
         適用するとダイアログの見出し・主要ボタン・合計行・選択中の表示・バッジが
         すべて400になり、見た目が大きく変わるため、別の回に実機で確認しながら行います。
         → 引き継ぎサマリの未決に「決定3の後半が未適用」として残してあります。
       ★uicheck が 400/700 以外の出現を NG にします（増やせません）。 */
  b{font-weight:700}
  button,input,select,textarea{font-family:inherit}
  /* ★2026-09-11 決定25を適用＝ボタンに色は使わない。主たる動作は太字で示す。
       旧＝緑のベタ塗り（border/background とも --green・文字は --on-accent）。
       クラスを付け忘れたボタンが緑になっていた。白地＋灰の枠が既定。 */
  button{padding:6px 11px;font-size:13px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text);cursor:pointer}
  button.sec{background:var(--surface);color:var(--text);border-color:var(--line)}
  button.sec:hover{background:var(--hover)}
  input,select{padding:5px 8px;font-size:13px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text)}
  input:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px rgba(11,107,83,.14)}
  .hidden{display:none!important}
  .err{color:var(--danger)}.msg{font-size:12px;color:var(--muted);margin-top:4px}
  /* ══ ログイン画面（南要望 2026-08-22：欄とボタンを大きく・IDを記憶）══════════
       入力欄 44px／文字15px、ボタン 48px／文字15px。毎日打つ画面なので余裕を持たせる。
       ★<form> でくくってあるのは意味があります。ブラウザのパスワード保存は
         username/password の組が form の中にあるときに提案されるため。
         パスワードは**アプリ側では一切保存しません**（保存するならブラウザ／OSの金庫に任せる）。 */
  .login{max-width:420px;margin:10vh auto;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:32px 34px;
         box-shadow:0 4px 20px rgba(0,0,0,.06)}
  .login h1{font-size:20px;margin:0 0 22px;color:var(--green)}
  .login .lg-l{display:block;font-size:12px;color:var(--muted);margin:0 0 4px;font-weight:700}
  .login input[type=email],.login input[type=password]{width:100%;height:44px;font-size:15px;padding:0 12px;margin-bottom:16px}
  .login .lg-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);
                 margin:0 0 20px;cursor:pointer;user-select:none}
  .login .lg-chk input{width:17px;height:17px;margin:0;cursor:pointer}
  .login .lg-btns{display:flex;flex-direction:column;gap:10px}
  .login button{width:100%;height:48px;font-size:15px;font-weight:700;border-radius:8px}
  .login button.lg-sec{background:var(--surface);color:var(--text);border:1px solid var(--line);font-weight:400}
  .login button.lg-sec:hover{background:var(--hover)}
  .login #loginMsg{font-size:13px;margin-top:14px;color:var(--danger);min-height:18px}
  /* シェル */
  /* ══ アプリバー（2026-08-21 南確定）══════════════════════════════════════
       旧＝タイトルバー43px ＋ メニューバー41px ＋ ステータスバー26px の3本＝110px。
       新＝アプリバー1本 41px。**69px を作業領域に返す**。
       ・アプリ名は「基幹システム」（社名は消す＝毎回読む情報ではない・南判断）
       ・並び＝ 名前 ／ メニュー ／［最大化中の窓名＋窓ボタン］／ 通知・利用者・全画面・ログアウト
       ・★ログアウトは最右端のアイコンにする。旧は窓の × の真上にあり、閉じるつもりで押すと落ちた
       ・★⛶（ブラウザ全画面）と ❐（窓の最大化）は**置く場所で意味を分ける**。
         文字を読まずに位置で判断できるようにするのが狙い（見た目が似ていて紛らわしかった）
       ・ステータスバーは廃止。中身が「■準備中／■将来」の凡例だけで、
         メニューの灰色表示と重複していた（26px の価値なし） */
  .app-bar{display:flex;align-items:stretch;background:var(--green-bar);color:var(--on-accent);flex:0 0 auto;
           position:relative;z-index:5000;padding:0 10px 0 0;min-width:0}
  .ab-brand{display:flex;align-items:center;font-size:12px;font-weight:700;opacity:.92;white-space:nowrap;
            padding:0 12px;border-right:1px solid rgba(255,255,255,.18);margin-right:4px;flex:0 0 auto}
  .ab-brand i{font-style:normal;font-size:10px;opacity:.6;margin-left:6px}
  .ab-right{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;
            padding-left:10px;flex:0 0 auto}
  .ab-who{opacity:.85;margin-right:2px}
  .ab-icon{width:25px;height:25px;padding:0;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);
           color:var(--on-accent);border-radius:4px;cursor:pointer;font-size:13px;line-height:1;display:inline-flex;
           align-items:center;justify-content:center;flex:0 0 auto}
  .ab-icon:hover{background:rgba(255,255,255,.26)}
  .ab-icon.dg:hover{background:var(--danger);border-color:var(--danger)}
  .ab-bell{position:relative;display:inline-flex}
  .ab-n{position:absolute;top:-4px;right:-5px;background:var(--danger);color:var(--on-accent);border-radius:9px;min-width:15px;
        height:15px;font-size:9px;line-height:15px;text-align:center;padding:0 4px;pointer-events:none}
  .ab-n:empty{display:none}
  .ab-menu{position:absolute;top:100%;right:8px;min-width:210px;background:var(--surface);border:1px solid var(--border);
           box-shadow:0 6px 16px rgba(0,0,0,.16);border-radius:0 0 4px 4px;z-index:5200;display:none}
  .ab-menu.open{display:block}
  .ab-menu .di{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer;
               border-bottom:1px solid var(--border2);color:var(--text);font-size:13px}
  .ab-menu .di:last-child{border-bottom:none}
  .ab-menu .di:hover{background:var(--hover)}
  .ab-menu .em{color:var(--muted);font-size:12px;cursor:default;padding:10px 12px}
  .menu-bar{display:flex;background:transparent;flex-wrap:wrap;position:static;flex:0 1 auto;min-width:0}
  .menu-item{position:relative;padding:8px 12px;font-size:13px;color:var(--on-bar);cursor:pointer;user-select:none;white-space:nowrap;border-bottom:3px solid transparent}
  .menu-item:hover{color:var(--on-accent);background:rgba(255,255,255,.08)}
  .menu-item.open{color:var(--on-accent);background:rgba(255,255,255,.12);border-bottom-color:var(--on-accent);font-weight:700}
  .menu-item .chev{font-size:9px;opacity:.6;margin-left:3px}
  .dropdown{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--surface);border:1px solid var(--border);border-top:none;box-shadow:0 6px 16px rgba(0,0,0,.16);z-index:5001}
  .menu-item.open .dropdown{display:block}
  .di{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border2);color:var(--text);position:relative}
  .di:last-child{border-bottom:none}.di:hover:not(.dis){background:var(--hover)}.di.dis{color:var(--light);cursor:not-allowed}
  .di .submenu{display:none;position:absolute;left:100%;top:-1px;min-width:180px;background:var(--surface);border:1px solid var(--border);box-shadow:0 6px 16px rgba(0,0,0,.16);z-index:5002}
  .di.has-sub:hover>.submenu{display:block}
  .sub-ar{opacity:.6;font-size:9px;margin-left:8px}
  /* メニュー項目の件数バッジ（承認待ちなど）。0件のときはDOMごと消す */
  .nbadge{margin-left:8px;background:var(--danger);color:var(--on-accent);border-radius:9px;min-width:18px;height:18px;padding:0 4px;
          font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
  .gedit{border-collapse:separate;border-spacing:0;font-size:12px;table-layout:fixed}
  .gedit th{text-align:center;position:sticky;top:0;background:var(--a-th,var(--alt));padding:4px 8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:10;box-shadow:inset -1px 0 0 var(--border),inset 0 -1px 0 var(--border)}
  .gedit td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gedit tbody tr:hover{background:var(--hover)}
  #sxRows tr:focus{background:var(--a-face,var(--hover));outline:2px solid var(--green);outline-offset:-2px}   /* 伝票検索：フォーカス行の強調（↑↓移動・Enter選択） */
  /* 左固定列（コード/名称/フリガナ）＝横スクロールで固定。td.fzは不透明背景・z-indexで下の列を隠す。角(th.fz)は最前面 */
  .gedit th.fz,.gedit td.fz{position:sticky;box-sizing:border-box}
  .gedit td.fz{z-index:4;background:var(--surface)}
  .gedit th.fz{z-index:14}
  .gedit td.ro.fz{background:var(--ro)}
  .gedit tbody tr:hover td.fz{background:var(--hover)}
  .gedit tbody tr:hover td.ro.fz{background:var(--hover)}
  .gedit .fz0{left:0}
  .gedit .fz1{left:var(--l1,100px)}
  .gedit .fz2{left:var(--l2,280px)}
  /* 販売レポート */
  .rcond{display:flex;align-items:flex-end;gap:8px 14px;flex-wrap:wrap;padding:8px 12px;background:var(--alt);border-bottom:1px solid var(--border2)}
  .rcond .fld{display:flex;flex-direction:column;gap:3px}.rcond .fld label{font-size:11px;color:var(--muted)}
  .rcond .fld .row{display:flex;align-items:center;gap:5px}
  /* 条件欄のチェックボックス＝ラベルと横並び。2026-09-10 追加。
     それまで 08_report.js が同じ内容をインラインstyleで書いていたので、そちらもこの class に寄せた
     （新規クラスの前に grep で確認：styles.css に .chk は無し／js の cb-chk は別物） */
  .rcond .chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap}
  .rcond .chk input{height:auto}
  /* ルートマスタ編集フォーム＝3行構成（1:ボタン／2:取引先情報整列／3:登録商品）。基底.rcondは他窓と共用のためモディファイアで限定 */
  .rcond-rm{flex-direction:column;align-items:stretch;gap:7px}
  .rcond-rm .rc-row{display:flex;align-items:flex-end;gap:8px 14px;flex-wrap:wrap}
  .rcond-rm .rc-btns{gap:8px}
  .rcond-rm input,.rcond-rm select{height:30px;box-sizing:border-box}
  .rcond-rm .re-dchk input{height:auto}
  .rcond-rm .rm-custname{background:var(--alt);color:var(--text)}
  .rcond-rm .rc-prods .rm-prods{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
  .rcond-rm .rc-prods .tag{background:var(--alt);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:12px;white-space:nowrap}
  .rgrid{border-collapse:collapse;width:100%;font-size:12px}
  /* ★text-align は1回だけ書くこと。以前は center と left が同じルールに2つあり、
       後ろの left が勝って**レポートの見出しだけ左寄せ**になっていた（南報告 2026-08-26）。
       見出しは全表センター（UI規約§6）。 */
  .rgrid th{text-align:center;position:sticky;top:0;background:var(--a-th,var(--alt));padding:4px 8px;font-weight:700;white-space:nowrap;z-index:20;box-shadow:inset -1px 0 0 var(--border),inset 0 -1px 0 var(--border)}
  .rgrid td{border:1px solid var(--border);padding:4px 8px;white-space:nowrap}
  .rgrid td.n{text-align:right;font-variant-numeric:tabular-nums}
  .rgrid th.n{font-variant-numeric:tabular-nums}
  .rgrid tbody tr:nth-child(even){background:var(--alt)}.rgrid tbody tr:hover{background:var(--hover)}
  .rgrid tfoot td{border-top:2px solid var(--border);background:var(--alt);font-weight:700;position:sticky;bottom:0;z-index:19}
  /* ★品目ごとの小計行（2026-09-07 南要望）。合計（tfoot）と同じ地・同じ太さで、
       上の罫線だけ細くして「合計ではない」ことを出す。sticky にはしない（行の途中に何本も出るため）。
     ★grep 済み＝.rsub は styles.css に無かった。先例なしとして新設（決定15）。 */
  .rgrid tr.rsub td{border-top:2px solid var(--border);background:var(--alt);font-weight:700}
  /* 分析表の順序1（グループ）見出し行。2026-09-11 新設。色は使わず地色だけで段差を出す。 */
  .rgrid tr.rgrp td{border-top:2px solid var(--border);background:var(--bar);font-weight:700}
  .rgrid .pos{color:var(--ok)}.rgrid .neg{color:var(--danger)}
  .funcpop{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:0 8px 18px rgba(0,0,0,.18);z-index:6000;padding:6px;min-width:170px}
  .funcpop label{display:flex;gap:8px;align-items:center;padding:4px 8px;font-size:12px;cursor:pointer;border-radius:4px}
  .funcpop label:hover{background:var(--hover)}
  /* ルート編集：曜日タブ＋ドラッグ */
  .re-tab{padding:4px 12px;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer;font-size:13px}
  .re-tab.on{background:var(--green);color:var(--on-accent);border-color:var(--green)}
  .re-tab .cnt{font-size:10px;opacity:.85;margin-left:4px}
  .re-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border2);border-radius:4px;background:var(--surface);margin-bottom:6px;cursor:grab}
  .re-item.over{border-color:var(--green);box-shadow:0 0 0 2px rgba(11,107,83,.15)}
  .re-item.drag{opacity:.4}
  .re-ord{width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
  .re-grip{color:var(--light);font-size:15px}
  .re-dchk{display:flex;gap:8px;flex-wrap:wrap}
  /* ══ ルートマスタ（2026-09-02 作り直し・曜日別の回収品目）════════════════════
       南の指摘＝①一覧で商品の中身が見えない ②商品の追加が分かりにくい ③全体的に操作が分かりにくい。
       正本のモック＝Webapp/mock_ルートマスタ_曜日別品目_2026-09-02_v2.html（v1は破棄）。
       組み方＝左（上:回収先の一覧／下:選んだ先の曜日別品目）｜右（編集）。
         ・左下＝**見るため**（全曜日を一望）。行を押すと右のタブが切り替わる
         ・右の曜日タブ＝**直すため**。タブのチェックが「その日に回収する」の指定
       ★旧UIの「回収曜日チェック9個（.re-dchk）」はこの画面では使わない。曜日タブに一本化した
         （.re-dchk はルート編集側で使うので消していない）。
       ★grep 済み＝.rm2-* はいずれも styles.css に存在しなかった。色は :root と窓の
         --a-* だけを使い、直値は置いていない。 */
  /* ★2026-09-04 南報告「下段に表記もないのとスクロールもありません」の修正。
       旧＝.rm2-split に行の指定が無く、暗黙の行が grid-auto-rows:auto だった。
       auto の行は**中身の高さ**で決まる。左列の一覧は57件＝約1,500px あるので
       行がその高さまで伸び、
         ①下段（曜日別の回収品目）が窓の外へ押し出されて見えない
         ②.rm2-sc が高さで縛られないため overflow:auto が働かず**スクロールが出ない**
       の2つが同時に起きていた（.win-body が overflow:hidden なので、はみ出しは切られる）。
       新＝行を minmax(0,1fr) で明示する。窓の高さが行の高さになり、中身は縮む側に回る。
       ★grid-template-rows を消さないこと。消すと同じ症状に戻る。
       ★min-height:0 は「grid項目の最小サイズは中身の最小サイズ」という既定を外すため。
         入れ子の grid/flex を縮ませるにはこれが要る（.rm2-pane には既に入っている）。 */
  .rm2-split{flex:1;min-height:0;display:grid;
             grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr)}
  .rm2-left{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 186px;
            border-right:2px solid var(--a-bd,var(--border))}
  .rm2-pane{min-height:0;display:flex;flex-direction:column}
  .rm2-pane+.rm2-pane{border-top:2px solid var(--a-bd,var(--border))}
  .rm2-ph{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:11px;
          color:var(--muted);background:var(--alt);border-bottom:1px solid var(--border2);white-space:nowrap}
  .rm2-ph b{color:var(--text);font-size:12px}
  .rm2-ph .sp{margin-left:auto;overflow:hidden;text-overflow:ellipsis}
  .rm2-sc{flex:1;min-height:0;overflow:auto}
  .rm2-sc table.grid{table-layout:fixed;width:100%}
  .rm2-sc tbody tr{cursor:pointer}
  .rm2-sc tbody tr.sel td{background:var(--a-face,var(--hover))}
  .rm2-sc tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--green)}
  /* 一覧の回収曜日＝小さな四角。○×より曜日が読めるので取り違えにくい */
  .rm2-dchips{display:inline-flex;gap:2px}
  .rm2-d{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
         border-radius:4px;font-size:10px;color:var(--light);background:var(--alt);border:1px solid var(--border2)}
  .rm2-d.on{background:var(--green);color:var(--on-accent);border-color:var(--green);font-weight:700}
  /* ══ 回収曜日ヘッダーの曜日ボタン（2026-09-04 南決定・案A）════════════════════
       産廃ルートは81件あり、目的の回収先までスクロールが要る（南報告）。
       実際の作業は「木曜のルート」という単位なので、見出しから曜日で絞れるようにした。
       押した曜日＝その曜日に回収する先だけ＋**その曜日の巡回順で並べ替え**。
     ★grep 済み＝.rm2-dh / .rm2-dhb / .rm2-dpick / .rm2-fbar は styles.css・画面ともに0件。
       似た役割の既存クラスは .rm2-d（一覧の四角・押せない）／.rm2-dtab（右の曜日タブ・
       大きさも役割も別）で、どちらも流用すると片方を直したときに もう片方が崩れる。
     ★色は :root と窓の --a-* だけ。直値は白（#fff）のみで、これは .rm2-d.on ほか
       既存の塗りつぶしと同じ書き方にそろえている。 */
  .rm2-dh{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
  .rm2-dhb{display:inline-flex;gap:2px}
  .rm2-dhb>span{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;
                padding:0 4px;border-radius:4px;font-size:10px;font-weight:700;cursor:pointer;user-select:none;
                color:var(--muted);background:var(--surface);border:1px solid var(--border2)}
  .rm2-dhb>span:hover{background:var(--hover);border-color:var(--green);color:var(--green)}
  .rm2-dhb>span.on{background:var(--a-deep,var(--green));border-color:var(--a-deep,var(--green));color:var(--on-accent)}
  .rm2-dhb>span.all{min-width:24px}
  /* その曜日に回収先が1件も無い＝押しても何も起きないので、押せないと分かる見た目にする */
  .rm2-dhb>span.off{opacity:.35;cursor:default}
  .rm2-dhb>span.off:hover{background:var(--surface);border-color:var(--border2);color:var(--muted)}
  /* 絞り込み中の曜日は、文字のかわりにその日の巡回順を出す（順路の確認がこの列だけで済む） */
  .rm2-d.pick{background:var(--a-deep,var(--green));border-color:var(--a-deep,var(--green));color:var(--on-accent);
              font-weight:700;width:auto;min-width:22px;padding:0 4px;font-variant-numeric:tabular-nums}
  /* 絞り込み中であることを一覧の上に常時出す（見出しのボタンだけだと見落とす） */
  .rm2-fbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:11px;
            background:var(--a-lbl);color:var(--a-lblt);border-bottom:1px solid var(--a-bd)}
  .rm2-fbar b{font-weight:700}
  .rm2-fbar button{margin-left:auto}
  /* 曜日で品目が違う先の印。一覧から品目の列を外したので、これが見分けになる */
  .rm2-vary{display:inline-block;margin-left:6px;background:var(--a-lbl);color:var(--a-lblt);
            border:1px solid var(--a-bd);border-radius:4px;padding:0 4px;font-size:10px;font-weight:700}
  /* 左下の曜日ラベル */
  .rm2-dl{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:20px;
          border-radius:4px;background:var(--green);color:var(--on-accent);font-weight:700;font-size:11px;padding:0 6px}
  .rm2-items{white-space:normal;line-height:1.6}
  .rm2-chip{display:inline-flex;align-items:center;gap:5px;background:var(--alt);border:1px solid var(--border2);
            border-radius:4px;padding:2px 8px;font-size:11px;margin:1px 4px 1px 0}
  .rm2-chip .cc{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}
  .rm2-none{color:var(--danger);font-size:11px}
  /* 右ペイン */
  .rm2-right{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--a-face,var(--alt))}
  .rm2-rh{flex:0 0 auto;padding:8px 12px;background:var(--a-lbl);color:var(--a-lblt);font-weight:700;
          font-size:12px;border-bottom:1px solid var(--a-bd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rm2-rh .sub{font-weight:400;font-size:11px;margin-left:6px;opacity:.8}
  .rm2-rb{flex:1;min-height:0;overflow:auto;padding:10px 12px}
  .rm2-rf{flex:0 0 auto;padding:8px 12px;border-top:1px solid var(--a-bd);display:flex;gap:8px;align-items:center}
  .rm2-rf .dg{margin-left:auto;background:var(--surface);color:var(--danger);border-color:var(--danger-line)}
  .rm2-sect{margin-top:13px;border-top:2px solid var(--a-bd);padding-top:8px}
  .rm2-sect h4{margin:0 0 7px;font-size:12px;color:var(--a-lblt)}
  .rm2-sect h4 span{font-weight:400;color:var(--muted);font-size:11px;margin-left:6px}
  /* 曜日タブ＝「その日に回収する」の指定も兼ねる。.re-tab（丸いピル）とは別物なので分けた */
  .rm2-dtabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
  .rm2-dtab{min-width:43px;padding:4px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);
            color:var(--muted);font-size:12px;cursor:pointer;text-align:center;line-height:1.25}
  .rm2-dtab .n{display:block;font-size:10px;color:var(--light);margin-top:1px}
  .rm2-dtab.has{border-color:var(--green);color:var(--green);background:var(--hover)}
  .rm2-dtab.has .n{color:var(--green);font-weight:700}
  .rm2-dtab.on{background:var(--green);border-color:var(--green);color:var(--on-accent);font-weight:700}
  .rm2-dtab.on .n{color:var(--on-accent);opacity:.85}
  .rm2-dpane{background:var(--surface);border:1px solid var(--a-bd);border-radius:4px;padding:10px}
  .rm2-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
  .rm2-sw{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--text)}
  .rm2-sw input{height:auto;width:16px;margin:0}
  .rm2-padd{display:flex;gap:6px;align-items:center;margin-bottom:8px}
  .rm2-padd .pk-wrap{flex:1;min-width:0}
  .rm2-padd input{width:100%}
  .rm2-tags{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
  .rm2-tag{display:inline-flex;align-items:center;gap:6px;background:var(--alt);border:1px solid var(--border2);
           border-radius:4px;padding:4px 8px;font-size:12px}
  .rm2-tag .tc{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}
  .rm2-tag .x{color:var(--danger);cursor:pointer;font-weight:700}
  .rm2-off{opacity:.45;pointer-events:none}
  .rm2-hint{font-size:11px;color:var(--muted)}
  .re-dchk label{display:flex;flex-direction:column;align-items:center;font-size:11px;gap:2px;cursor:pointer}
  /* ★.ed-in＝商品価格表の税込単価（2026-09-07）。見た目・当たり判定は .ed と同じで、
       送るフィールドだけが違う（price_excl / price_incl）。ここを .ed と別に書いているのは、
       画面側が closest('td.ed') と closest('td.ed-in') でハンドラを分けているため。
     ★grep 済み＝.ed-in は styles.css に無かった。先例なしとして新設（決定15）。 */
  .gedit td.ed,.gedit td.ed-in{cursor:pointer}
  /* 入出金明細＝列幅を固定（行追加で幅が動かない）。colgroupで各列幅を確定 */
  table.cash-grid{table-layout:fixed}
  /* 伝票窓内の読み取り表（過去明細/過去入出金/テスト一覧）も列幅固定＝データ読込で幅が動かない。参照モーダル等(.sl-scroll外)は対象外 */
  .sl-scroll table.grid{table-layout:fixed;width:100%}
  /* ルートマスタ一覧：colgroupで列幅を確定し、はみ出しは省略記号で切る（相手先名が種別へ重なる体裁くずれの根治） */
  .rm-tbl td,.rm-tbl th{overflow:hidden;text-overflow:ellipsis}
  .rm-tbl td.num,.rm-tbl th.num{text-align:center}
  .rm-tbl td.act{overflow:visible;white-space:nowrap}
  .gedit td.ed:hover,.gedit td.ed-in:hover{background:var(--hover);outline:1px solid var(--green);outline-offset:-1px}
  .gedit td.ro{background:var(--ro);color:var(--muted)}
  .gedit td.num{text-align:right;font-variant-numeric:tabular-nums}
  /* インライン編集で生成する input/select はセル幅に収める（列を押し広げない）。価格表・一覧グリッド共通。
     ※以前は同じセレクタが2か所にあり、後の宣言が前を上書きしていた（font-size:12px は font:inherit に潰されていた）。
       2026-08-18 に1つへ統合。合成後のプロパティは統合前の**実効値と同じ**。 */
  .gedit td input,.gedit td select{width:100%;box-sizing:border-box;min-width:0;background:var(--surface);border:1px solid var(--green);padding:2px 4px;font:inherit}
  .di .b1{font-size:11px;color:var(--ok);background:var(--hover);border-radius:4px;padding:2px 6px;margin-left:10px}.di .b0{font-size:11px;color:var(--light);margin-left:10px}
  #desktop{flex:1;position:relative;overflow:hidden;background:var(--bg)}
  .desk-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--light);font-size:13px;pointer-events:none}
  /* .status-bar は廃止（2026-08-21）＝凡例だけで26px使っていた。復活させないこと */
  /* ウィンドウ */
  .win{position:absolute;background:var(--surface);border:1px solid var(--a-bd,var(--border));border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.22);min-width:320px;min-height:180px;display:flex;flex-direction:column;overflow:hidden}
  /* ★最大化中は枠・角丸・影を消してアプリバーへ密着させる（南指摘 2026-08-21）。
       旧＝最大化しても border 1px・角丸6px・box-shadow が残り、アプリバー（濃緑）と
       窓のタイトルバー（緑）のあいだに灰色の線と角の隙間が見えていた。色が違うので余計に目立つ。
       box-sizing:border-box なので border を0にしても外形サイズは変わらない。 */
  .win[data-max]{border-width:0;border-radius:0;box-shadow:none}
  /* ★全画面共通のグレー。系統色では塗らない（上の§参照） */
  .win-tb{background:var(--bar);color:var(--text);border-bottom:1px solid var(--border);padding:6px 10px;display:flex;align-items:center;cursor:move;user-select:none;flex:0 0 auto}
  /* ══ 画面の識別配色（南確定 2026-08-22・案1）══════════════════════════════════
       ★旧＝窓のタイトルバーとツールバーを系統色で塗っていた。アプリバー（濃緑）→タイトルバー（青）
         →ツールバー（濃青）と**彩度の高い帯が3段**重なり、色相も飛ぶので境目が目立つ（南指摘）。
       ★新＝弥生と同じ考え方。**タイトルバーとツールバーは全画面共通のグレー**。
         識別は「項目名の背景・表ヘッダ・窓枠」という中身の色で行う。濃い帯はアプリバーの1本だけ。
       ★2026-09-07：4系統の「主要ボタンの色」は :root の --sales / --recv / --purch / --pay
         に移しました。取引区分の色は窓の飾りだけでなく**データの区分**にも使うため
         （進捗確認が仕入=橙・売上=青で集計を出す）。同じ値が2箇所にある状態を消しています。
       ★残る5列（項目名の地・文字・表ヘッダ・窓枠・面）は、その系統色から派生した淡い影で、
         窓の見た目だけに使います。1回しか使わない変数を :root に20個増やすより、
         **この表で4系統を横に並べて見えるほうが直しやすい**ので、ここに置いたままにしています。
       ★色は1系統6つ。ここが正本＝淡い側を変えたいときはこの表だけ直す。
         --a-deep 主要ボタンと強調の線 ／ --a-lbl 項目名の背景 ／ --a-lblt 項目名の文字
         --a-th 表ヘッダの背景 ／ --a-bd 窓枠
       ★売上=青／入金=青緑（寒色ペア）、仕入=橙／出金=赤茶（暖色ペア）。ペア間は寒暖で対比。
         台帳・レポート等は既定の緑（変数を持たない＝フォールバック値）。
       ★★系統色は**4つだけ**です（決定8・2026-09-04 南決定）。ここに5つ目を足さないこと。 */
  .win-acc-sales{--a-deep:var(--sales);--a-lbl:#dceaf6;--a-lblt:#10456f;--a-th:#e6eff8;--a-bd:#7ba6cd;--a-face:#f1f7fc}
  .win-acc-recv {--a-deep:var(--recv);--a-lbl:#d7eeed;--a-lblt:#0a5b58;--a-th:#e3f2f1;--a-bd:#6fb3b0;--a-face:#f0f9f8}
  .win-acc-purch{--a-deep:var(--purch);--a-lbl:#f7e9d2;--a-lblt:#7a4f0f;--a-th:#faf1e2;--a-bd:#d3ac6e;--a-face:#fdf7ec}
  .win-acc-pay  {--a-deep:var(--pay);--a-lbl:#f6ded8;--a-lblt:#7a2f1c;--a-th:#faebe6;--a-bd:#cf9384;--a-face:#fdf2ef}
  /* ══ .win-acc-wm（マニフェストの茶）は 2026-09-04 に削除しました ══════════
       経緯＝2026-08-22c に南が廃止を確定（マニフェストは全部 accent:'sales'＝青）。
             2026-08-26 に票・交付入力・返送処理・データ点検の5窓を入替。
             以後、定義だけが残り**使用箇所は0件**のまま2週間放置されていた。
       削除の理由＝使っていない定義が残ると「茶の窓を作ってよい」と読めてしまう。
                   決定8（系統色は4つ）を機械的に守れる状態にするため定義ごと消す。
       ★復活させないこと。茶に戻すのは決定8と 2026-08-22c の両方の取り消しになる。
       ★削除前の確認（2026-09-04 grep）＝`win-acc-wm` は styles.css の1行のみ。
         `accent:'wm'` は 01_base.js:25 の変更履歴コメント1件だけ。
         間接指定（cfg.accent / CFG.accent / o.accent）の元も全部たどって
         sales / purch / pay のいずれかに解決することを確認済み。 */
  .win-ttl{font-size:13px;font-weight:700}
  /* ══ タイトルバーに置く操作ボタン（南確定 2026-08-22c・案A）══════════════
       ★配置はアプリの基準と同一＝**左寄せ・Fキー順**（F2→F4→F5→F8→F9）。
         右端は窓の操作（−□×）だけ。「閉じる」ボタンは置かない（全窓撤去）。
       ★見た目は .sl-bar button と同じ。ツールバーのボタンは1つの見た目で統一する
         （UI規約§5）。pri は塗りつぶさず、白地＋系統色の文字と枠＋太字。
       ★ここを押したときに窓がドラッグされないよう、makeWin 側で .win-tools を
         pointerdown / dblclick の対象から外している。 */
  .win-tools{display:inline-flex;align-items:center;gap:6px;margin-left:14px}
  /* ★タイトルバーに入力欄を置いたとき（ひな形リストの検索・2026-09-09）。
       .win-tb は cursor:move ／ user-select:none なので、そのままだと欄の中で
       カーソルが「移動」になり、文字をなぞって選べない。欄だけ元に戻す。 */
  .win-tools input{cursor:text;user-select:text}
  .win-tools button{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;
                    padding:4px 8px;font-size:12px;min-width:96px;cursor:pointer;
                    display:inline-flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap}
  .win-tools button.pri{background:var(--surface);color:var(--text);border-color:var(--line);font-weight:700}
  /* 取り返しのつかない操作（過去データの一括置換など）だけに使う。色は --danger（2026-08-31） */
  .win-tools button.dg{color:var(--danger);border-color:var(--danger);font-weight:700}
  .win-tools button:hover{background:var(--hover)} .win-tools button.pri:hover{background:var(--hover)}
  .win-tools button.dg:hover{background:var(--danger-bg)}
  .win-tools .fk{opacity:1;color:var(--light);font-size:10px;margin-left:2px}
  .win-x,.win-min,.win-max{background:var(--border);color:var(--text);border:none;border-radius:4px;width:22px;height:22px;cursor:pointer;font-size:14px;line-height:1;margin-left:6px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .win-min{font-size:17px;margin-left:auto}
  .win-max{font-size:12px}
  .win-meta{font-size:12px;font-weight:400;color:var(--muted);margin-left:14px;white-space:nowrap}
  #windock{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px;z-index:99999;align-items:flex-end;pointer-events:none}
  .wchip{pointer-events:auto;max-width:210px;display:flex;align-items:center;background:var(--green);color:var(--on-accent);border:1px solid rgba(0,0,0,.18);border-radius:4px;height:28px;padding:0 10px;font-size:12px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
  .wchip:hover{filter:brightness(.9)}
  .wchip .wc-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .led{width:100%;border-collapse:collapse}
  .led th{position:sticky;top:0;background:var(--a-deep,var(--green));color:var(--on-accent);font-weight:700;font-size:12px;padding:6px 8px;text-align:center;z-index:1}
  .led td{border:1px solid var(--border2);padding:0}
  .led input{width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;padding:4px 8px;font:inherit;font-size:13px}
  .led input:focus{outline:none;border-color:var(--green);background:var(--surface)}
  .led .rc{display:block;padding:4px 8px;font-size:13px;color:var(--muted)}
  .led tr.sel>td{background:var(--a-face,var(--hover))}
  .led tr.newr>td{background:var(--warn-bg)}
  .pform{padding:6px 10px;font-size:13px}
  .pform h4{display:none}
  .pform .two{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
  .ltbl{border-collapse:collapse;width:100%;font-size:13px}
  /* ══ ②部品：項目名（表側）＝ 2026-08-28 南決定 A-3 ══════════════════
       .flbl と同じ値にしてあります。片方だけ直さないこと。
       ★表のセル（th）なので、行の高さは中の入力欄に引っぱられて伸びます。
         div側は28px固定。1px単位で同一にはなりませんが、画面では見分けがつきません。
       ★旧＝太さ600・余白 1px 7px・幅118px直書き・枠の色を直値で指定。 */
  .ltbl th.lbl{background:var(--a-lbl,var(--alt));color:var(--a-lblt,var(--green));font-weight:700;text-align:center;padding:0 8px;white-space:nowrap;border:1px solid var(--a-bd,var(--border));width:var(--lblw);font-size:12px;vertical-align:middle;line-height:1.25;height:28px;overflow:hidden}
  .ltbl td.val{border:1px solid var(--border);padding:0}
  .ltbl td.pin{border:1px solid var(--border);padding:2px 8px;text-align:right;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .ltbl td.val input,.ltbl td.val textarea,.ltbl td.val select{width:100%;box-sizing:border-box;border:none;background:transparent;padding:2px 6px;font:inherit;font-size:13px;line-height:1.3;resize:vertical}
  .pform .two>div{flex:1 1 540px;min-width:0}
  .pform .two .ltbl{max-width:none;table-layout:fixed;width:100%}
  .pform .two>div>.ltbl{margin:0 0 6px}
  .pform .ltbl col.lc{width:var(--lblw)}
  /* ★旧＝.pform .two .ltbl th.lbl{font-size:11px}。
       11px は「補足」の大きさです（決定1の3段＝地の文13／表と項目名12／補足11）。
       項目名を11pxにすると台帳の2列表示だけ字が小さく、決定1に反するので削除しました。 */
  .ltbl td.val select{cursor:pointer}
  .ltbl td.val input:focus,.ltbl td.val textarea:focus,.ltbl td.val select:focus{outline:2px solid var(--green);outline-offset:-2px}
  .pform .fg{display:grid;grid-template-columns:110px 1fr;gap:4px 8px;align-items:center;margin-bottom:3px}
  .pform .fg>label{color:var(--muted);font-size:12px}
  .pform input,.pform textarea{width:100%;box-sizing:border-box;border:1px solid var(--border2);border-radius:4px;padding:4px 6px;font:inherit;font-size:13px}
  .pform input:focus,.pform textarea:focus{outline:none;border-color:var(--green)}
  .pform input[readonly]{background:var(--ro);color:var(--muted)}
  /* ★票の明細で、代表行（1行目）以外の数量・商品コード（2026-09-09 南決定）。
       混合物は按分しないので、数量を持つのは1行目だけ。2行目以降は触らせない。
       見た目は .pform input[readonly] と同じ（地＝--ro／文字＝--muted）。 */
  .ws-ltbl input[readonly]{background:var(--ro);color:var(--muted)}
  /* マニフェスト票の運搬業者（当社）＝読取専用だが、他の欄と同じ枠を出す（南 2026-09-10）。
     見た目は .pform input[readonly] と同じ（地＝--ro／文字＝--muted）。
     ★新規クラスの前に grep で確認：styles.css に .ws-carrier は無し。 */
  /* ★幅＝当社名が見切れないように（南報告 2026-09-10「自社名が見切れています」）。
     処分業者の select が min-width:210px なので、それより少し広くとる。 */
  .ws-carrier[readonly]{background:var(--ro);color:var(--muted);min-width:238px}
  /* ★未入力の日付欄＝背景に色を敷く（南 2026-09-10。枠線の色は却下）。
     入力されると JS が class を外し、通常の地に戻る。
     色は既存の --warn-bg（#fff8e1）を使う＝新しい色は増やさない（決定28）。
     ★新規クラスの前に grep で確認：styles.css・js とも .wm-need は他に無し。 */
  input.wm-need{background:var(--warn-bg)}
  .ptbl{border-collapse:collapse;width:100%}
  .ptbl th,.ptbl td{border:1px solid var(--border2);padding:2px 4px;font-size:12px}
  .ptbl th{background:var(--a-th,var(--alt));text-align:center;font-weight:700}
  .ptbl td.num input{text-align:right;font-variant-numeric:tabular-nums}
  .ptbl .pin{color:var(--muted);text-align:right;padding-right:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .win-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  /* 窓の中身の骨格。2026-08-28＝同じ4宣言を47箇所に直書きしていたのをクラス1本に。 */
  .wcol{display:flex;flex-direction:column;height:100%;min-height:0}
  /* 補足文字。2026-08-28＝87箇所の直書き（11px/12px・muted/#888/light の混在）を2本に統一。
     南決定「補足文字は11pxへ統一」（UI規約 未実装分）をここで実施。 */
  .sub{font-size:11px;color:var(--muted)}
  .sub-l{font-size:11px;color:var(--light)}
  /* ══ ②部品：中身が無いときの案内（2026-09-07 新設）════════════════════════
       南指摘＝「色の記述が様々なところで記述されているなら、CSSで統一すべき。
       そうじゃないとどれが正しい色なのかが明確にならず、いつまでたっても統一されない」。
       旧＝「データがありません」の1行を、画面ごとに style="color:…;padding:…" で書いていた（18箇所）。
         色は muted と light、余白は 8px / 10px / 12px 8px、寄せは有ったり無かったりで4通り。
       ★grep 済み＝styles.css に .empty は存在しなかった（同等クラスなし）。
       ★表の空行（td colspan）にも、一覧の空表示（div）にも同じものを使う。 */
  .empty{padding:10px;color:var(--muted);text-align:center}
  /* ══ 役割の色を文字に付けるクラス（2026-09-04・決定7）══════════════════
       画面から色を書かないための受け皿。`style="color:…"` の代わりにこれを付ける。
     ★★置き場所がここなのは理由があります。`.warn` は `class="sub warn"` の形で
       使われており（9箇所）、`.sub` と**同じ詳細度(0,1,0)**なので、
       CSSの**後に書いてあるほうが勝ちます**。`.sub`(403行) より前に移すと、
       文字が warn 色にならず muted のままになります。**上へ動かさないこと。**
     ★`.err`(48行) は既にあり、`.sub` と組み合わせて使っている箇所が
       **0件**であることを確認済み（2026-09-04 grep）。だから .err はそのままでよい。
       もし今後 `class="sub err"` を書きたくなったら、`.err` は `.sub` より前なので
       効きません。そのときは .err をここへ移すのではなく、理由を書いて相談すること。 */
  .warn{color:var(--warn)}
  .b{font-weight:700}
  /* ★z-index は sticky なテーブル見出し（.gedit th=10 / th.fz=14）より上にすること。
       2 のままだと、右端に固定列/固定見出しがある窓（台帳・明細表・締め窓など）で
       東/西のつまみが見出しに覆われて掴めない＝「一部の窓だけリサイズできない」の原因。 */
  .win-rz{position:absolute;z-index:30}
  /* 最大化中はリサイズできない（startResize が早期 return する）。つまみが残っていると
     カーソルだけ変わって反応しない＝壊れて見えるので、出さない。 */
  .win[data-max] .win-rz{display:none}
  .win-rz-n{top:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}.win-rz-s{bottom:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}
  .win-rz-e{right:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}.win-rz-w{left:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
  .win-rz-ne{top:-3px;right:-3px;width:12px;height:12px;cursor:nesw-resize}.win-rz-nw{top:-3px;left:-3px;width:12px;height:12px;cursor:nwse-resize}
  .win-rz-se{bottom:-3px;right:-3px;width:12px;height:12px;cursor:nwse-resize}.win-rz-sw{bottom:-3px;left:-3px;width:12px;height:12px;cursor:nesw-resize}
  .win-tb,.win-rz{touch-action:none}  /* タッチでドラッグ/リサイズを奪われない（スクロール/ズーム抑止） */
  /* 汎用テーブル（固定ヘッダー） */
  .scroll{flex:1;min-height:0;overflow:auto}
  table.grid{width:100%;border-collapse:collapse;font-size:12px}
  table.grid th{background:var(--a-th,var(--alt));position:sticky;top:0;z-index:5;padding:4px 8px;text-align:center;font-weight:700;box-shadow:inset 0 -1px 0 var(--border)}
  /* ══ 並び替えの見出し（ひな形リスト・南 2026-09-09）═══════════════════════
       ▲▼を両方出し、効いている方だけ黒（.on）。効いていない方はグレー。
       ★色は増やしていない＝--text（黒）と --light（グレー）の2つだけ。決定18の色数に触らない。
       ★▲▼は縦に積む。見出しに足す幅は あき4＋字8 ＝ **12px** なので、
         いちばん狭い並び替え列（商品コード 110px）でも折り返さない。 */
  table.grid th.tl-sh{cursor:pointer;user-select:none}
  table.grid th.tl-sh .tl-ar{display:inline-flex;flex-direction:column;justify-content:center;
        margin-left:4px;vertical-align:middle;font-size:11px;line-height:9px;color:var(--light)}
  table.grid th.tl-sh .tl-ar .on{color:var(--text)}
  /* ★見出しの「行」にも同じ地色を敷く（南報告 2026-08-26＝セル間に白い縦線が見える）。
       原因＝列幅に小数が混じると（colgroup に width:auto の列があると必ず起きる）、
       セルの境界が小数位置になり、そこだけセルの背景が届かず**下地の白が1px見える**。
       全部の境界ではなく丸めが効いた位置にだけ出るので「特定の2箇所だけ白い」に見える。
       行に同じ色を敷いておけば、継ぎ目に見えるのも同じ色になり線が消える。
       ★色を変えるときは th と揃えること。片方だけ変えると線が復活する。 */
  table.grid thead tr,.gedit thead tr,table.sl-grid thead tr{background:var(--a-th,var(--alt))}
  .rgrid thead tr{background:var(--a-th,var(--alt))}
  /* ★overflow:hidden は必須（UI規約§6・南報告 2026-08-26＝スポット依頼一覧で文字が重なった）。
       table-layout:fixed の表は列幅が固定されるが、はみ出した文字は**隣の列の上に描かれる**。
       nowrap だけだと折り返しもしないので、長い取引先名がそのまま隣へ流れる。
       …（省略）を出すために text-overflow:ellipsis も一緒に付ける。
     ★以前は .tp-listwrap（ひな形一覧）にだけ付けていた。同じ事故が他の表でも起きるので全表へ広げる。 */
  table.grid td{border-bottom:1px solid var(--border);padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* ★見出しは中央、データだけ右寄せ（南指示 2026-08-22・全画面共通） */
  table.grid td.num{text-align:right;font-variant-numeric:tabular-nums}
  /* ══ 明細セルの寄せ（南確定 2026-08-26・全窓共通）══════════════════════════
       金額・単価＝右 ／ 名称・摘要＝左 ／ それ以外（日付・番号・コード・単位・数量）＝中央。
       印は alignGrid() が**列見出しの文字から**自動で付ける（ta-r / ta-l / ta-c）。
       ★ここは既存の `table.grid td.num` より**後ろ**に置くこと。詳細度が同じ(0,2,2)なので、
         前に置くと num が勝って数量が右寄せのまま残る。 */
  /* ══ 決定6（等幅）2026-09-04 適用 ═══════════════════════════════════════
       南決定＝金額・数量・コード・交付番号・日付のすべてを桁の揃う表示にする。
       ★★2026-09-09 決定29で上書き。旧＝「書体を変えるのは交付番号だけ（input.fmt-mno）」。
         これは body がプロポーショナルだった頃の書き方で、**もう当てはまらない。**
         2026-09-09 に body 自体を等幅（"BIZ UDGothic","MS Gothic",monospace）へ固定したため、
         交付番号だけ別書体にする理由が消え、その指定は削除した。
         **いまの規約＝書体はアプリ全体で1つ、かつ等幅のみ。例外は交付番号も含めて認めない。**
       残る `font-variant-numeric:tabular-nums` は書体ではなく「数字の字幅をそろえる指示」なので、
       決定29とはぶつからない。そのまま使う。

     ★ここに書くのが効きます。`alignGrid()` が**列見出しの文字から**自動で ta-r / ta-c を
       付けており、その割り当てが決定6の対象とそのまま一致しているためです。
         ta-r（右）＝金額・単価          → 決定6の「金額」
         ta-c（中央）＝日付・番号・コード・単位・数量 → 決定6の「日付・コード・数量」
         ta-l（左）＝名称・摘要          → 数字ではないので**付けない**
       列を1つ足すたびに指定を書き足す必要がありません。
     ★font-variant-numeric は**継承する**ので、セルの中の input にもそのまま効きます。 */
  table.grid td.ta-r,.gedit td.ta-r,table.sl-grid td.ta-r,.rgrid td.ta-r,.rm-tbl td.ta-r{text-align:right;font-variant-numeric:tabular-nums}
  table.grid td.ta-l,.gedit td.ta-l,table.sl-grid td.ta-l,.rgrid td.ta-l,.rm-tbl td.ta-l{text-align:left}
  table.grid td.ta-c,.gedit td.ta-c,table.sl-grid td.ta-c,.rgrid td.ta-c,.rm-tbl td.ta-c{text-align:center;font-variant-numeric:tabular-nums}
  table.rgrid tbody tr.ckon td{background:var(--hover)}   /* 突合チェック済みの行（レポート明細表・画面のみ） */
  table.grid tbody tr.click{cursor:pointer}table.grid tbody tr.click:hover{background:var(--hover)}
  /* ══ 選択中の行（2026-08-31 新設）══════════════════════════════════════════
       ★同等のルールが無いことを grep で確認して足しました。
         既存は .led tr.sel（台帳の編集表）・.gedit tr.sel（グリッド）・
         .tp-listwrap tr.sel（ひな形設定の④）の3本で、いずれも骨格が別なので
         素の table.grid には**当たっていませんでした**。
       ★そのため産廃分類台帳・廃棄物種類マスタは class="sel" を出しているのに
         選択中の行に色が付いていません（既存の不具合）。ここで一緒に直ります。
       ★色は窓の系統色から。直値は書かない。値は .tp-listwrap tr.sel と同じにすること
         （ひな形設定の④とひな形リストで、選択中の見え方をそろえるため）。 */
  table.grid tbody tr.sel td{background:var(--a-face,var(--hover))}
  /* 伝票フォーム */
  /* ★全画面共通の明るいグレー（南確定 2026-08-22・案1）。系統色では塗らない */
  .sl-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--alt);border-bottom:1px solid var(--border);flex-wrap:wrap;color:var(--text)}
  /* ツールバーのボタン＝横幅をそろえる（ラベル長の違いで凸凹に見えるのを防ぐ・2026-08-18）。
     min-width で短いラベルを揃え、長いラベルは自然に伸びる。中央寄せでFキー表示も含めて均等に見せる。 */
  /* ★地が明るくなったので、枠なしの半透明白では見えない。白地＋枠に変更 */
  .sl-bar button{background:var(--surface);color:var(--text);border:1px solid var(--line);padding:4px 8px;font-size:12px;
                 min-width:96px;display:inline-flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap}
  .sl-bar button.narrow{min-width:0}   /* 幅をそろえたくない小ボタン（▾メニュー等）に付ける */
  .sl-bar button.pri{background:var(--surface);color:var(--text);border-color:var(--line);font-weight:700}
  .sl-bar button:hover{background:var(--hover)} .sl-bar button.pri:hover{background:var(--hover)}
  .win-min:hover,.win-max:hover{background:var(--line)} .win-x:hover{background:var(--danger);color:var(--on-accent)}
  .menu-item .di:hover:not(.dis){background:var(--hover)}
  .sl-bar .fk{opacity:1;color:var(--light);font-size:10px;margin-left:2px}
  /* ★ツールバーに直接置く文字（件数・状態メッセージ等）。旧は各画面が color:#fff を
       インラインで書いていたが、地が明るくなると読めないので撤去し、ここで一括指定する */
  .sl-bar>span,.sl-bar .msg{color:var(--text);font-size:12px}
  .sl-bar .sp{margin-left:auto}
  /* 日付ピッカー（テキスト欄＝YYYY/MM/DD直接入力＋📅でカレンダー） */
  .dpk{position:relative;display:inline-flex;align-items:center;gap:2px}
  /* ★幅28px固定。📅の描画幅は環境（絵文字フォント）で変わるので、成り行きにすると
       「カレンダー込み140px」がそろわない。110+2+28=140 */
  /* ★📅ボタンは28px固定。**セレクタを `button.cal-btn` にすること**（不具合 2026-08-26）。
       `.sl-bar button{min-width:96px}`（ツールバーのボタン幅そろえ）が📅にも当たり、
       min-width は width より優先されるので **📅が96pxに膨らんでいた**。
       結果 .dpk が 110+2+96=208px になり、範囲欄310pxから溢れていた。
       .cal-btn(0,1,0) では .sl-bar button(0,1,1) に負けるので、button.cal-btn(0,1,1) で並べて後勝ちにする。
       ★ツールバーの中にある日付欄（受渡確認票・計量待ち・進捗確認ほか）だけで起きていた。
         伝票（.sl-head の中）は .sl-bar の外なので28pxのままで、正常に見えていた。 */
  button.cal-btn,.sl-bar button.cal-btn,.win-tools button.cal-btn{min-width:0}
  .cal-btn{width:28px;height:30px;box-sizing:border-box;padding:0;flex:0 0 28px;
           display:inline-flex;align-items:center;justify-content:center;
           border:1px solid var(--border2);background:var(--hover);color:var(--green);cursor:pointer;border-radius:4px;font-size:13px;line-height:1;user-select:none}
  .cal-btn:hover{background:var(--hover)}
  .cal-native{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;margin:0}
  /* ★iPad・iPhone だけ（南決定 2026-09-17）。印 .dpk-ios は attachDatePicker が Apple のタッチ端末のときだけ付ける。
       パソコンには付かないので、上の .cal-native（1px・押せない）のまま変わらない。
       見えない日付欄を📅（.cal-btn 28×30）の真上に同じ大きさで重ね、指が直接それを押す＝iPad の標準カレンダーが開く。
     ★grep 済み＝.dpk-ios は styles.css・js とも0件だった。先例なしとして新設（決定15）。
     ★文字の大きさは指定しない（13/12/11 の3段の外になるため）。iPad で押したときに画面が拡大されるかは実機で確認する。
     ★表の中は📅を出していない（table.grid .dpk>.cal-btn{display:none}）。重ねた欄だけ残ると
       日付欄の右端を押したときに横取りするので、表の中では重ねない。 */
  .dpk-ios>.cal-native{width:28px;height:30px;pointer-events:auto;z-index:1;-webkit-appearance:none;appearance:none}
  table.grid .dpk-ios>.cal-native{display:none}
  /* 取引先などの「コード欄＋名称（読取表示）」分離用。名称は入力欄の隣に読取で表示 */
  .frm .pk-cell{display:flex;align-items:center;gap:4px;min-width:0}
  .frm .pk-cell>.pk-wrap{flex:0 0 calc(12ch + 16px)}
  .ro-name{display:inline-block;flex:1 1 auto;min-width:0;max-width:260px;padding:2px 4px;color:var(--text);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
  .sl-body{flex:1;min-height:0;overflow:hidden;padding:8px 10px;display:flex;flex-direction:column}
  .sl-body>.sl-banner,.sl-body>.frm{flex:0 0 auto}
  .sl-scroll{flex:1;min-height:0;overflow:auto;min-width:0}
  .sl-banner{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:4px;padding:6px 10px;margin-bottom:8px;font-size:11px;color:var(--warn)}
  /* ══ 伝票ヘッダ（南確定 2026-08-22・案C＋dの整列）══════════════════════════
       ★枠の地を系統色（--a-face）にする。項目名に色を置くのではなく**面ひとつ**で色を出す。
         白い入力欄が地から浮くので、どこに打つのかが分かりやすくなる。
       ★項目名の列幅は --lblw（既定80px）。値は①土台にだけ書いてあります。
         ここに数字を書き戻さないこと。書くと窓ごとの例外（.lblw-wm／.lblw-pwd）が効かなくなります。
       ★2026-08-28：均等割付（text-align-last:justify）は廃止し、中央揃えに統一しました。
         項目名の見た目は .flbl（②部品）が持ちます。
       ★★入力欄の列は 1fr（＝残りを半分ずつ）。minmax(0,max-content) に戻さないこと。
         max-content は「中に入っている物の幅」で列を決めるため、取引先が未入力のとき
         名前の欄が幅0になり、名前が入った瞬間に列が広がって、
         伝票番号と摘要が右へ動きます（2026-08-28 南報告）。
         1fr なら中身に関係なく列幅が一定で、欄の位置が動きません。 */
  /* ★2026-08-31：伝票ヘッダ .sl-head を廃止し、骨格 .frm に寄せました（骨格の1本化）。
       列の作りは .frm.c4 と**完全に同じ**だったので、残るのは見た目の箱だけ。
       使い方＝class="frm c4 card"。★.sl-head のルールをここに戻さないこと。 */
  .frm.card{background:var(--a-face,var(--bg));border:1px solid var(--a-bd,var(--border2));
            border-radius:4px;margin-bottom:8px}
  /* ★2026-08-28：伝票だけが持っていた項目名 .sl-head .hl は廃止しました。
       同じ役割の部品が3つに割れていた原因なので、伝票も .flbl を使います
       （index.html 側の class="hl" 17箇所を class="flbl" に置換済み）。
       .hl のルールをここに戻さないこと。戻すと詳細度(0,2,0)で .flbl(0,1,0)に勝ち、
       伝票だけまた見た目が分かれます。 */
  /* ★2026-08-31：.sl-head → .frm へ。骨格の中の参照欄はこれ1本で位置が決まるので、
       画面側の style="position:relative" は要らなくなる（12箇所を削除）。 */
  .frm .pk-wrap{display:block}
  /* ★項目ごとの欄の幅（2026-08-28 南決定）。幅は実データの最大（半角換算）。
     値はここにだけ書く。画面には書かない。ch＝半角1文字なので文字の大きさに追従する。
     ＋16px は入力欄の左右の余白。正本＝Webapp/項目ごとの欄の幅_規定表_2026-08-28_v2.md */
  /* ★2026-09-17 修正：ここだけ欄が2行に折り返していた（南報告）。理由は2つ。
     ①この欄は入力欄ではなく読み取り専用の .ro（枠線1px×左右＝2px）。box-sizing:border-box なので
       上の「＋16px＝左右の余白」だけでは枠線2pxぶん中身が狭い。→ ＋18px にする。
     ②中に出る文言「（採番）」は全角4文字。全角1文字＝約2.2ch（2026-09-15 実機）なので 8.8ch 要る。
       採番後の伝票番号は8桁＝8ch。広いほうの 8.8ch に余裕1ch を足して 10ch。 */
  .fw-slipno {width:calc(10ch + 18px)}   /* 伝票番号  実測8（4,641件すべて8桁）／「（採番）」全角4＝8.8。+1 */
  .fw-staff  {width:calc(12ch + 16px)}   /* 担当者名  実測12 */
  .fw-note   {width:calc(24ch + 16px)}   /* 摘要     実測24 */
  .fw-subject{width:calc(24ch + 16px)}   /* 件名     実測24 */
  select.fw-kubun{width:calc( 6ch + 40px)} /* 区分（売上/仕入）＋選択の▼ */
  select.fw-route{width:calc( 8ch + 40px)} /* ルート表示名 実測8＋▼ */
  /* 請求書発行の宛名書式（2026-09-07）。一番長い選択肢「合算先宛＋現場/納入先」＝23＋余裕1。
     ★grep 済み＝.fw-adrfmt は styles.css に無かった。先例なしとして新設（決定15）。 */
  select.fw-adrfmt{width:calc(24ch + 40px)}
  /* 読み取り専用欄は白地に。地が色付きになったので、入力欄と同じ白で「欄」だと分かるようにする */
  .frm .ro{background:var(--surface);border:1px solid var(--a-bd,var(--border2));border-radius:4px;padding:4px 8px;color:var(--muted);font-size:12px;min-height:28px;opacity:.8}
  table.sl-grid{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
  table.sl-grid th{background:var(--a-th,var(--alt));border:1px solid var(--border);padding:4px;font-weight:700;font-size:12px;text-align:center}
  /* 明細ヘッダー固定＝行を増やしても隠れず、古い行が上へ流れる。2段ヘッダーなので
     2段目の top は実測値を fixHead() が入れる（下の 22px は初期値／幅で折り返すと変わるため）。
     border-collapse 下では sticky 時に罫線が消えることがあるので box-shadow で下線を補う。 */
  table.sl-grid thead th{position:sticky;z-index:12;box-shadow:inset 0 -1px 0 var(--border)}
  table.sl-grid thead tr:first-child th{top:0}
  table.sl-grid thead tr+tr th{top:22px}
  table.sl-grid td{border:1px solid var(--border);padding:0;height:28px;vertical-align:middle;position:relative}
  table.sl-grid td.lbl{background:var(--a-lbl,var(--alt));text-align:center;font-size:12px;color:var(--muted)}
  table.sl-grid td.cost{background:var(--ro)}
  table.sl-grid td.qcell,table.sl-grid td.acell,table.sl-grid td.remcell{vertical-align:bottom}
  table.sl-grid td.acell{padding:0 6px 2px}
  table.sl-grid td.no{text-align:center;color:var(--light);background:var(--ro)}
  table.sl-grid td input{border:1px solid transparent;background:transparent;height:26px;width:100%;padding:0 6px;font-size:13px;box-sizing:border-box}
  table.sl-grid td input:focus{border-color:var(--green);background:var(--surface);outline:none}
  table.sl-grid td.num input,table.sl-grid td.num{text-align:right;font-variant-numeric:tabular-nums}
  /* 一括起票の一覧（2026-08-31）。列幅は colgroup にクラスを付けてここで決める
       （画面側に style="width:…" を書かないため）。
     ★同等のクラスが無いことを確認して新設（grep: .cb-tbl / .cb-st は 0件）。 */
  .cb-tbl{table-layout:fixed;width:100%}
  .cb-tbl col.cb-chk {width:34px}
  .cb-tbl col.cb-st  {width:80px}
  .cb-tbl col.cb-code{width:118px}
  .cb-tbl col.cb-date{width:92px}
  /* ★請求書番号は invoice_no VARCHAR(12)。78pxだと省略されるため広げた（南 2026-08-31） */
  .cb-tbl col.cb-no  {width:124px}
  .cb-tbl col.cb-amt {width:106px}
  /* 行ごとの入金日。カレンダーボタン込みの幅（欄108＋ボタン28＋すき間） */
  .cb-tbl col.cb-dcol{width:150px}
  .cb-tbl col.cb-kb  {width:124px}   /* 区分（回収方法／支払方法） */
  .cb-tbl td input.cb-i{width:100%;text-align:right;font-variant-numeric:tabular-nums}
  .cb-tbl tr.cb-done{color:var(--light)}          /* 起票済み＝薄く */
  .cb-tbl tr.cb-manual td.cb-stcell{color:var(--danger);font-weight:700}  /* 個別入力あり＝目立たせる */
  /* ★決定11の適用・先行1画面（2026-09-07・0.4.38）＝廃棄物種類マスタ／産廃分類台帳の列幅。
       幅は px ではなく ch（半角1文字ぶん）で持つ。決定1で文字の大きさが変わっても、
       文字数はそのままで幅だけ追従する。＋16px は td の左右の余白（padding:4px 8px）で、
       table-layout:fixed の col は border-box なので余白を足さないと文字が入らない。
       ★値の根拠＝作業データ/studio_results_20260828_1302.csv（2026-08-28 実測・121列）。
         可変長は「平均表示幅＋2」（決定11-1）、固定長は＋0。表の列は ellipsis で切る（決定11-2）。
       ★決定11-3（2026-09-07 南決定）＝見出しが入る幅を下限にする。
         実データより見出しのほうが広い列があり（例：コードは実データ3文字・見出し「コード」6文字ぶん）、
         データだけで決めると見出しが2行に折り返して行の高さが揃わなくなる。
       ★grep 済み＝.ww-w-* は styles.css に1つも無かった。先例なしとして新設する（決定15）。
         書き方は .cb-tbl col.cb-*（2026-08-31）に合わせた＝画面側に style="width:…" を書かない。
       ★まだ画面ごとのクラス。2〜3画面ぶん溜まったら共通の役割クラスへまとめる（決定シート§5の3）。 */
     ★★全角1文字＝2ch は、2026-09-09 に書体を等幅へ固定した（40行）ので**厳密になった。**
       それ以前は「ch＝書体の0の幅」が機械任せで、全角がその2倍とは限らなかった。
       そのため「全角の見出し・全角の固定文言で決まる列」に余裕を1文字ぶん足してある。
       ★この余裕はそのまま残している。詰め直すかは実機で見てから別に決める。 */
  .ww-tbl col.ww-w-name {width:calc(17ch + 16px)}  /* 種類の名称 平均13.8＋2＝16／見出し「種類（法定20種）」16。＋1 */
  .ww-tbl col.ww-w-own  {width:calc(20ch + 16px)}  /* 独自名称 平均9.8＋2＝12、＋「混合物」バッジ8。見出しは8で余裕あり */
  .ww-tbl col.ww-w-code {width:calc(11ch + 16px)}  /* 分類コード 7桁固定＝半角7。見出し「分類コード」全角5＝10ch。決定11-3で見出しが下限＝10＋1 */
  .ww-tbl col.ww-w-pcode{width:calc( 9ch + 16px)}  /* 親コード 7桁／見出し「親コード」8。＋1 */
  .ww-tbl col.ww-w-dcode{width:calc( 7ch + 16px)}  /* 細分類コード 実測3桁固定／見出し「コード」6。＋1 */
  .ww-tbl col.ww-w-jwnet{width:calc( 8ch + 16px)}  /* JWNET jwnet_code VARCHAR(7)＝半角7／見出し5。7＋1 */
  .ww-tbl col.ww-w-paper{width:calc( 5ch + 16px)}  /* 用紙 paper_code VARCHAR(4)／見出し「用紙」4。＋1 */
  .ww-tbl col.ww-w-level{width:calc( 7ch + 16px)}  /* 階層「大分類」等＝全角3文字で固定／見出し4。6＋1 */
  .ww-tbl col.ww-w-qty  {width:calc(13ch + 16px)}  /* 数量の記載「★法定で必須」＝12／見出し10。＋1 */
  .ww-tbl col.ww-w-flag {width:calc( 5ch + 16px)}  /* ✓ だけの列／見出し「独自」「有効」4。＋1 */

  /* ── 廃棄物種類マスタ 一覧（2026-09-08 統合・階層を列で分ける）──────────────
       ★確定モック＝mock/mock_UI_廃棄物種類マスタ_階層列分け_v3.html。
       ★1行＝1コード。名称はその階層の欄にだけ入る（JWNETの分類表と同じ並べ方）。
       ★この画面だけ縦罫線を残す。列の位置で階層を表すため。南了承済み＝作法から外れる。
       ★横罫線は「上」だけで表す。上下の両方に持たせると、隣り合う線がぶつかって
         片方だけ消せない。
       ★幅は実測（2026-09-08・wm_waste_code の name の最大文字数）から。
         大分類16／中分類29／小分類15／独自名称12文字。全角1文字＝2ch。
         中分類だけ1行に入らないので、階層の4列は折り返す（td.ww-h）。
       ★分類コードの列は既存の .ww-w-code をそのまま使う（grep＝この一覧の1箇所だけで使用）。
         2026-09-09 に 7ch→11ch。7ch では見出し「分類コード」が2行に折り返し、
         値もちょうど7chで ellipsis に食われて「06000…」と切れていた。
       ★横罫線の指定は table.grid td（styles.css 487行）の border-bottom に負けていた。
         .ww-tbl td は詳細度(0,1,1)、table.grid td は(0,1,2)。
         そのため border-bottom:0 が効かず、全行に下線が出て td.e の「上罫線を引かない」が
         打ち消されていた。2026-09-09 に td 側の指定を table.grid.ww-tbl(0,2,2) へ上げて解決。
         ★!important は使わない（styles.css 全体で1個のまま）。 */
  .ww-tbl col.ww-h1{width:calc(33ch + 16px)}  /* 大分類 実測16文字＝32＋1 */
  .ww-tbl col.ww-h2{width:calc(31ch + 16px)}  /* 中分類 実測29文字。2行に折り返す＝15文字ぶん30＋1 */
  .ww-tbl col.ww-h3{width:calc(31ch + 16px)}  /* 小分類 実測15文字＝30＋1 */
  .ww-tbl col.ww-h4{width:calc(25ch + 16px)}  /* 独自名称 実測12文字＝24＋1／見出し「独自名称（細分類）」18 */
  /* ★table-layout:fixed を .ww-tbl 自身に持たせる（2026-09-09）。
       一覧は .tp-listwrap table.grid で既に fixed だが、参照の窓（.scroll の中）は fixed でない。
       fixed でないと col の幅が目安にしかならず、コードの列がまた縮んで切れる。 */
  .ww-tbl{border-bottom:1px solid var(--border);table-layout:fixed}
  table.grid.ww-tbl td{border-left:1px solid var(--border);border-top:1px solid var(--border);border-bottom:0}
  .ww-tbl th{border-left:1px solid var(--border)}
  .ww-tbl td:last-child,.ww-tbl th:last-child{border-right:1px solid var(--border)}
  .ww-tbl td.ww-h{white-space:normal;word-break:break-word;vertical-align:top}
  table.grid.ww-tbl td.e{border-top:0}                              /* その行で使わない上位階層の欄 */
  table.grid.ww-tbl tr.lv1 td{border-top:1px solid var(--border)}   /* 大分類の行だけ全部の欄を閉じる */

  /* 前回締めの照合行（入出金伝票・2026-08-31 南要望）。明細の下・合計の上に置く。
       回収予定額／締め後の入金／残／差額 を並べる。左寄せ＝合計（右寄せ）と見分けるため。
       金額の桁が変わっても左の項目が動かないよう、.sl-foot と同じ 10ch を確保する。
     ★同等のクラスが無いことを確認して新設（grep: .sl-close / .hit / .ok は 0件）。 */
  .sl-close{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px;margin-top:8px}
  .sl-close b{display:inline-block;min-width:10ch;text-align:right;font-variant-numeric:tabular-nums}
  .sl-close .hit{color:var(--ok)}   /* 差額0＝請求額とぴたり合った */
  .sl-foot{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;font-size:13px;margin-top:8px}
  /* ★2026-08-28 南指示：金額の桁が増えるたびに左の項目が動いていた。
       右寄せ（justify-content:flex-end）なので、合計は右端で止まるが
       税抜・消費税・原価・粗利は打つたびに左へ寄る。
       **99,999,999 まで入る幅をあらかじめ確保**して、数字が変わっても位置を動かさない。
       10ch＝「99,999,999」の10文字ぶん（カンマは数字より細いので余る側に倒してある）。
       tabular-nums＝数字の字幅をそろえる指定。1と8で幅が変わるのを止める。
       ★率（粗利率）は「100.0%」の6文字で足りるので別扱い。 */
  .sl-foot b{display:inline-block;min-width:10ch;text-align:right;font-variant-numeric:tabular-nums}
  .sl-foot b.t-gpr{min-width:6ch}
  /* ══ 受渡確認票：実際に誰へ送ったか（To/CC/BCC）2026-08-31 新設 ═══════════
       一覧の下に置く。「BCCに誰が入ったか」を後から確認できないと、処分場の
       送信先の切り分けができない（2026-08-18 の要件）。
     ★同等のクラスが無いことを grep で確認して新設（styles.css の .mh-* は0件）。
     ★この地は一覧と区別するためのもの。色は変数から取り、直値は書かない。 */
  .mh-addr{flex:0 0 auto;border-top:1px solid var(--border2);background:var(--alt);
           padding:6px 10px;font-size:11px;color:var(--muted);max-height:96px;overflow:auto}
  .mh-addr b{color:var(--text)}
  .sl-hist{margin-top:10px;border:1px solid var(--border2);border-radius:4px;overflow:hidden}
  .sl-hist-hd{background:var(--alt);padding:4px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);font-size:12px}
  /* ピッカー */
  /* ★2026-08-31：候補の吹き出し（.pk-list）を出す入れ物は、常に位置の基準になる。
       画面ごとに style="position:relative" を書いていた（13箇所）ので1本にまとめた。
       ★画面側に position を書き戻さないこと。 */
  .pk-wrap{position:relative}

  .pk-list{position:absolute;left:0;top:100%;z-index:6000;min-width:260px;max-height:200px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.16);display:none}
  .pk-item{padding:6px 10px;cursor:pointer;white-space:nowrap;font-size:13px;border-bottom:1px solid var(--border2)}.pk-item.on,.pk-item:hover{background:var(--hover)}
  .pk-code{color:var(--green);font-weight:700}.pk-k{color:var(--light);font-size:11px;margin-left:6px}
  /* 参照モーダル */
  .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding:40px 12px}
  .modal{background:var(--surface);border-radius:4px;width:520px;max-width:96%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.3)}
  .modal .mhd{background:var(--green);color:var(--on-accent);padding:8px 12px;font-weight:700;display:flex;align-items:center}
  .modal .mhd .x{margin-left:auto;cursor:pointer;background:rgba(255,255,255,.22);color:var(--on-accent);border:none;border-radius:4px;width:22px;height:22px;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .modal .mhd .x:hover{background:var(--danger)}
  .modal .mbody{padding:10px 12px;display:flex;flex-direction:column;min-height:0}
  /* 画面中央に出る共通ダイアログ（ブラウザ標準 alert/confirm/prompt の置換）。z-indexは参照モーダル(9000)より上 */
  .ui-dlg-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9500;display:flex;align-items:center;justify-content:center;padding:12px}
  .ui-dlg{background:var(--surface);border-radius:4px;width:420px;max-width:94%;box-shadow:0 14px 44px rgba(0,0,0,.32);overflow:hidden;display:flex;flex-direction:column}
  .ui-dlg .ud-hd{background:var(--green);color:var(--on-accent);padding:8px 12px;font-weight:700;font-size:13px}
  .ui-dlg .ud-bd{padding:12px 12px 4px;font-size:13px;line-height:1.55;word-break:break-word}
  .ui-dlg .ud-bd input{width:100%;height:32px;box-sizing:border-box;margin-top:10px;padding:0 8px;border:1px solid var(--border2);border-radius:4px;font-size:13px}
  .ui-dlg .ud-ft{display:flex;justify-content:center;gap:12px;padding:12px 12px}
  .ui-dlg .ud-ft button{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:4px;font-size:13px;cursor:pointer}
  .ui-dlg .ud-ok{background:var(--surface);color:var(--text);font-weight:700}
  .ui-dlg .ud-ok:hover{background:var(--hover)}
  .ui-dlg .ud-cancel{background:var(--surface);color:var(--text)}
  .ui-dlg .ud-cancel:hover{background:var(--hover)}
  /* 条件モーダル（弥生型・タブ集計/絞込/期間）。参照モーダル(9000)より下＝モーダル内から参照を開ける */
  .cmodal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:8800;display:flex;align-items:center;justify-content:center;padding:12px}
  .cmodal{background:var(--surface);border-radius:4px;width:600px;max-width:96%;max-height:86vh;box-shadow:0 14px 44px rgba(0,0,0,.32);display:flex;flex-direction:column;overflow:hidden}
  .cmodal .cm-hd{background:var(--a-deep,var(--green));color:var(--on-accent);padding:8px 12px;font-weight:700;font-size:13px;display:flex;align-items:center}
  .cmodal .cm-hd .cm-x{margin-left:auto;background:rgba(255,255,255,.22);color:var(--on-accent);border:none;border-radius:4px;width:22px;height:22px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
  .cmodal .cm-hd .cm-x:hover{background:var(--danger)}
  .cmodal .cm-tabs{display:flex;gap:2px;padding:6px 8px 0;background:var(--alt);border-bottom:1px solid var(--border2)}
  .cmodal .cm-tab{background:var(--alt);border:1px solid var(--border2);border-bottom:none;border-radius:4px 4px 0 0;padding:4px 12px;font-size:12px;cursor:pointer}
  .cmodal .cm-tab.on{background:var(--surface);font-weight:700;color:var(--green)}
  .cmodal .cm-body{padding:12px;overflow:auto;min-height:90px}
  .cmodal .cm-pane{display:flex;flex-direction:column;gap:12px}
  .cmodal .cm-pane.hidden{display:none}
  .cmodal .cm-pane .fld{display:flex;flex-direction:column;gap:3px}
  .cmodal .cm-pane .fld label{font-size:11px;color:var(--muted)}
  .cmodal .cm-pane .fld .row{display:flex;align-items:center;gap:5px}
  .cmodal .cm-ft{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border2)}
  .cmodal .cm-ft button{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:4px;font-size:13px;cursor:pointer}
  .cmodal .cm-ok{background:var(--surface);color:var(--text);font-weight:700}
  .cmodal .cm-cancel{background:var(--surface);color:var(--text)}
  /* 「範囲」などの短い添え字が縦に割れるのを防ぐ（順序1/順序2の行） */
  .cmodal .cm-pane .row .sub{white-space:nowrap}
  /* ══ 参照ボタン（全画面で統一）2026-08-18 南指示 ═══════════════════════
     入力欄の右に置く「台帳を開く」ボタンは、窓を問わず必ず .refbtn を使う。
     以前は 条件モーダル＝緑の「参照」／残高表・コード変更＝灰色の「…」 と2種類あった。 */
  .refbtn{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;height:30px;padding:0 12px;
          font-size:12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
  .refbtn:hover{background:var(--hover)}
  .refbtn .fk{opacity:.75;font-size:10px}
  /* ══ 入力欄の統一書式（目的別）2026-08-18 南指示 ═══════════════════════
     幅と揃えは用途で決める。個別の style="width:…" や size= は使わず、このクラスを付けること。
     .f-code＝コード／.f-name＝名称・コード名称の複合検索／.f-date＝日付／.f-num＝金額・数量 */
  .fmt-code,.fmt-name,.fmt-date,.fmt-num,.fmt-search{height:30px;box-sizing:border-box}
  .fmt-code{width:120px;font-variant-numeric:tabular-nums}   /* コード（得意先/商品/分類など。10〜11桁） */
  /* 短いコード欄。2026-08-28 南指定＝60px。締グループ(2桁)・許可自治体(4桁)。
     コード欄が120pxの1種類しかなく、桁の短いものが各画面で幅を直書きして逃げていたのを解消。 */
  .fmt-code-s{width:60px;font-variant-numeric:tabular-nums}
  .fmt-name{width:160px}                      /* 名称・「コード/名称」の複合検索 */
  /* ── 日付欄の寸法（南確定 2026-08-21）★数値をここ以外に書かない ──────────────
       入力欄 110px ／ カレンダー込み 140px ／ 範囲指定 310px
         140 = 110(欄) + 2(.dpk の gap) + 28(.cal-btn)
         310 = 140 + 30(「〜」) + 140
       ★セレクタが input.fmt-date なのは意図的。`.fmt-date`(詳細度0,1,0) は
         `.sl-head input`(0,1,1) に負けて効かない。だから今まで全画面が
         インラインで width を書いていた（1,073箇所の出発点）。
       ★.cal-btn の幅を固定するのは、📅の描画幅が環境で変わるため。 */
  input.fmt-date{width:110px;text-align:center;font-variant-numeric:tabular-nums}   /* 日付 YYYY/MM/DD・センター表示 */
  /* ── 桁数が法令で決まっている欄（南提案 2026-08-21）─────────────────────
       「11桁と規定があるから、11桁に合致するよう入力欄を飾り付ければ桁数の間違いが減る」
       等幅フォント＋ch単位なので、フォントが変わっても11桁ちょうどになる。
       ch＝その等幅フォントの1文字ぶんの幅。11ch + 16(padding) + 2(border) = 欄の幅。
       ★maxlength で12桁目を打てなくし、inputmode=numeric でタブレットに数字キーを出す。 */
  /* ★マス目つき（南指示 2026-08-22「マニフェスト原本にあったような枠線」）。
       紙の管理票は番号がマス目に印字されている。同じ見た目にすれば、数えなくても桁の
       過不足が分かる。等幅フォント＋ch単位なので、フォントが変わってもマスがずれない。
       仕切り線は 1ch ごとに10本＝11マス。text-align:left ＝ 文字とマスを合わせるため。
       ★状態色は background-color で指定する。background で書くと背景画像（マス目）が消える。 */
  /* ★マスの幅を全部そろえる（南指摘 2026-08-22「先頭と最後尾だけ枠が大きい」）。
       原因＝入力欄の左右に padding 8px があり、その分が1マス目と11マス目に足されていた
       （中のマス 1ch≒8.4px に対して端だけ約16px）。横 padding を 0 にして、
       内容の幅をちょうど 11ch にすると、マスの境界（1ch刻みの線10本）と
       枠線そのものが11等分の仕切りになる。box-sizing:border-box なので +2px は枠線ぶん。 */
  /* ★2026-09-09＝別書体の指定をやめた（南＝アプリ全体で書体を統一）。body の
       "BIZ UDGothic" は等幅なので、11桁のマス目は崩れない。大きさ14pxはそのまま。 */
  input.fmt-mno{font-size:14px;
                width:calc(11ch + 2px);padding:4px 0;text-align:left;letter-spacing:0;
                background-color:var(--surface);
                background-image:repeating-linear-gradient(to right,
                  transparent 0,transparent calc(1ch - 1px),
                  var(--border) calc(1ch - 1px),var(--border) 1ch);
                background-size:calc(10ch) 100%;background-position:0 0;background-repeat:no-repeat}
  /* ★プレースホルダは出さない。日本語の「11桁」がマス目と重なって、どちらも読めなくなる
       （南指摘 2026-08-22）。マス目そのものが「ここに数字を11個入れる」を示している。
       文言が要る欄（返送処理）は、隣の桁数カウンタに出す。 */
  input.fmt-mno::placeholder{color:transparent}
  input.fmt-mno.ng{background-color:var(--warn-bg)}
  input.fmt-mno.ok{background-color:var(--hover)}
  /* ★大きいマス目（南指示 2026-09-04「交付入力（一括）の欄が狭い。タブレットの
       イメージだと入力しやすい」）。タブレットは1マス38px×高さ52px・文字24px。
       管理アプリは表の中に11桁が並ぶので同じ大きさにはできないが、既定の14pxでは
       約94px（11ch）しかなく打ちづらい。
     ★変えるのは font-size ひとつだけ。上の幅もマス目も ch（＝その等幅フォントの
       1文字ぶん）で組んであるので、文字を大きくすれば幅・マス目・仕切り線が
       すべて同じ比率で追従する。width を別に書かないこと（書くとマスがずれる）。
       20px → 1ch≒12px ＝ 11ch≒132px。 */
  /* ★2026-09-09 南要望＝1マスを倍に。マス目は 1ch 刻みなので、字の大きさがそのまま
       マスの幅になる。20px（1マス10px）→ 40px（1マス20px）。欄の幅は 11ch+2 ＝ 442px。
       使っているのは交付入力（一括）の交付番号だけ（grep：mno-lg は js で1箇所）。 */
  input.fmt-mno.mno-lg{font-size:40px}
  .mno-cnt{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .mno-cnt.ok{color:var(--green)}
  .mno-cnt.ng{color:var(--warn)}
  .date-range{display:inline-flex;align-items:center;width:310px}
  .date-range>.dpk{flex:0 0 140px}
  .date-range>.tilde{flex:0 0 30px;text-align:center;color:var(--muted)}
  /* ★表の中は📅を出さない（南指摘 2026-08-21「このカレンダーはやりすぎです」）。
       データ点検は日付を何十件も打ち込む画面で、行×列ぶん📅が並ぶと本文が読めない。
       表の中はキーボード入力のみ・幅110px。1枚ずつ直したいときは行をダブルクリックして
       票を開けば、そちらには📅が出る。条件欄と単票は従来どおり140px。 */
  table.grid .dpk>.cal-btn{display:none}
  table.grid .dpk{gap:0}
  .fmt-num{width:100px;text-align:right;font-variant-numeric:tabular-nums}      /* 金額・数量 */
  /* ★選択欄（select）は右寄せにしない（南指示 2026-08-31）。
       fmt-num は「金額・数量」＝数字を右にそろえるための書式で、
       選択欄に付くと「大分類」などの語が右端に寄って読みづらい。
       幅だけ借りて寄せは中央に戻す。※現在この形は 階層（.ww-f-level）の1箇所だけ。 */
  select.fmt-num{text-align:center}
  .fmt-search{width:260px}                    /* コード/名称/カナの横断検索欄 */
  /* ※ .f-code / .f-name は分類台帳・商品台帳が**JSの目印**として先に使っている別物。
       見た目の指定をそこへ足すと台帳の行高が変わるため、書式用は fmt- を接頭辞にしている。 */
  .condsum{padding:4px 12px;font-size:11px;color:var(--muted);background:var(--alt);border-bottom:1px solid var(--border2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
  .condsum:hover{background:var(--hover)}
  /* ══ 条件欄の緑ラベル（2026-08-18）════════════════════════════════════
     締め窓・明細書窓が同じ内容を **インライン文字列 LBL** として重複定義していたものを
     クラスに寄せた。新しい窓は必ず .flbl を使うこと（インラインで書き足さない）。 */
  /* ★背景と文字色は窓の系統色から。持たない窓は既定の緑（フォールバック値） */
  /* ══ ②部品：項目名（div側）＝ 2026-08-28 南決定 A-3 ══════════════════
       項目名の部品は2本だけです。ここ（div側）と .ltbl th.lbl（表側）。
       ★見た目の値はこの2本で完全に同じにしてあります。片方だけ直さないこと。
         12px／太さ700／高さ28px／中央揃え／地色つき／角丸4px／余白 0 8px
       ★旧＝均等割付（text-align-last:justify・太さ600・高さ30px・角丸3px）。
         「摘　　　要」と散らす形は 2026-08-28 に廃止しました（3種類に割れた原因）。
       ★幅はここでは決めません。骨格（.sl-head／.cond2／.ltbl）が --lblw で決めます。 */
  .flbl{background:var(--a-lbl,var(--alt));color:var(--a-lblt,var(--green));font-weight:700;font-size:12px;
        padding:0 8px;border:1px solid var(--a-bd,var(--border));border-radius:4px;
        white-space:nowrap;height:28px;line-height:26px;display:block;box-sizing:border-box;
        text-align:center;overflow:hidden}
  /* ══ 条件欄＝2列グリッド（左＝ラベル固定／右＝入力）═════════════════════
     行ごとに flex を並べるとラベル幅がまちまちで縦がそろわない。grid にすると
     ラベル右端と入力左端が全行で一致する。.cellで「〜」の位置も行間でそろう。 */
  /* ★2026-08-31：条件欄 .cond2 を廃止し、骨格 .frm に寄せました（骨格の1本化）。
       列の作りは .frm と同じ（1fr → minmax(0,1fr) にした分だけ、はみ出しに強くなる）。
       残るのは「帯」の見た目だけ。使い方＝class="frm band"（3列なら "frm c6 band"）。
       ★.cond2 のルールをここに戻さないこと。>.fs と .f は .frm 側に同じものがある。 */
  .frm.band{gap:6px 10px;border-bottom:1px solid var(--border2);
            font-size:12px;background:var(--alt);flex:0 0 auto}
  .frm.band>.flbl{justify-self:stretch}
  .frm .cell{display:inline-flex;align-items:center;gap:5px;width:210px}
  .frm .tilde{color:var(--muted)}
  .gedit tr.sel td{background:var(--a-face,var(--hover))}
  .gedit tr.dim td{background:var(--ro);color:var(--light);text-decoration:line-through}
  .gedit .num.mi{color:var(--danger)}   /* マイナス金額（繰越が負＝過入金など） */
  /* ══ 紙マニフェスト：廃棄物名のトグルボタン（2026-08-21）════════════════
     原本（COVEX直行用）の「種類」欄は 左＝普通産廃20種／右＝特別管理産業廃棄物。
     当社は特管の取扱いが無いので右側が空く。そこに廃棄物名（商品名）のボタンを並べる。
     ★押し込み状態は「枠が濃い＋背景が沈む＋1px下がる＋✓」で表す（色だけに頼らない）。 */
  /* ★2026-08-21 修正：color を書き忘れていた。素の button{} が color:#fff なので、
     background:var(--surface) と重なって**白地に白文字＝枠しか見えない**状態だった。
     背景を白にするボタンは、必ず color も指定すること（button.sec がそうしている）。 */
  .wtg{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:4px 10px;font-size:12px;
       cursor:pointer;white-space:nowrap;position:relative;top:0;left:0;box-shadow:1px 1px 0 var(--border);
       width:calc(30ch + 20px);text-align:left;display:flex;align-items:center}
  .wtg>.nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .wtg:hover{border-color:var(--line);background:var(--hover)}
  /* ★2026-08-22c：選択中は塗りつぶす（南がモックv5の見た目を採用）。
       色が系統色に追従するよう var(--a-deep) を使う。旧は #14522f 直書きで、
       窓の系統色が青になっても緑のままだった。✓ は残す（色だけに頼らない）。 */
  /* ★2026-09-09＝選択中を系統色で塗るのをやめた（決定25＝ボタンに色は使わない・太字で示す）。
       地は全画面共通のハイライト1色（決定20）。✓ と枠の濃さを残す＝色だけに頼らない。
     ★旧＝2026-08-22c の塗りつぶし（モックv5）。決定25 が新しいので上書きした。 */
  .wtg.on{background:var(--hover);border-color:var(--muted);color:var(--text);
          font-weight:700;box-shadow:none;top:0;left:0;padding:4px 10px}
  /* ★2026-09-09 南指示＝✓ は出さない。選んでいることはハイライトで分かる。
       色だけに頼る形にはなっていない＝地・枠の濃さ・太字の3つで示している。 */
  /* ══ ひな形設定（2026-08-22c 全面作り直し）══════════════════════════════
       正本＝ 変更設計メモ_2026-08-22c ／ モック＝ mock_UI_ひな形設定_v6.html
       ★旧 .wkinds（2列）は使わなくなったので置き換えた。 */
  .tp-band{border-bottom:1px solid var(--border2);flex:0 0 auto}
  .tp-band>.tp-bh{background:var(--a-face,var(--bg));border-bottom:1px solid var(--border2);
                  padding:2px 12px;font-size:11px;font-weight:700;color:var(--a-lblt,var(--muted))}
  .tp-row{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}
  /* ══ ③骨格：項目名と入力欄を並べる土台（2026-08-28 南決定 B-2）══════════
       窓の中の「項目名＋欄」はこの1本で並べます。画面が選ぶのは**列数だけ**。
         .frm      ＝2列（項目名｜欄）　　　… 1行に1組
         .frm.c4   ＝4列（項目名｜欄｜項目名｜欄）… 1行に2組
       ★項目名の列幅は --lblw。画面にもここにも数字を書きません（①土台にだけある）。
       ★欄の列は minmax(0,1fr)。max-content にすると、中に入った値の長さで列幅が変わり、
         右側の項目が動きます（伝票ヘッダで起きた不具合と同じ原因）。
       ★これを使うと、項目名の右端と欄の左端が**画面をまたいで**そろいます。
         横並び（.tp-row / .sl-bar）は1行に流し込むだけなので、そろいません。

       ★2026-09-04：試作は終わりました。**骨格はこの .frm 1本です**（画面で31箇所）。
         ここに書いてあった「.sl-head と .cond2 を後で寄せる」は**完了済み**で、
         その2つはもう定義も使用も0件です（2026-09-04 に grep で確認）。
         次に窓を作る人は、項目名と欄を並べるなら必ず .frm を使うこと。
         素の flex 行を手で組むと、項目名の右端が他の画面とそろいません。
       ★並べ方（回り込み）を決めてよいのはこのブロックだけです。画面に
         style="display:flex" や style="gap:…" を書かないこと。
         uicheck の [B] flow が件数を凍結していて、増やすと NG になります。 */
  .frm{display:grid;grid-template-columns:var(--lblw) minmax(0,1fr);gap:5px 10px;
       align-items:center;padding:8px 10px}
  .frm.c4{grid-template-columns:repeat(2, var(--lblw) minmax(0,1fr))}
  .frm.c6{grid-template-columns:repeat(3, var(--lblw) minmax(0,1fr))}
  /* 欄がわ。1つの項目に部品が複数あるとき（参照ボタン＋コード＋名称＋✕ など）の入れ物。
     .cond2 が持っていたものと同じ値。骨格を1本にしたら .cond2 側は消す。 */
  .frm>.fs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
  /* ★交付担当者の一覧（排出事業場の編集・2026-09-09）。.fs は flex-wrap なので、
       幅100%にすると入力欄の下の行へ回る。★同等のクラスが無いことを確認して新設
       （grep：sf- は styles.css・js とも0件。st- は請求明細書が使用中なので避けた）。 */
  .sf-tbl{width:100%;table-layout:fixed;margin-top:2px}
  /* ★項目名を上に詰める。既定（.frm の align-items:center）だと、下の表まで含めた
       高さの真ん中に「交付担当者」が来て、氏名の欄と段が合わない（南 2026-09-09）。 */
  .flbl.sf-lbl{align-self:start}
  /* ★モーダルの決定ボタン。ここに規則が無かったため、素の button{}（緑の塗りつぶし）が
       そのまま出ていた＝決定25（ボタンに色は使わない。主たる動作は太字で示す）に反する。
       .win-tools / .sl-bar の pri と同じ「白地＋枠と文字が系統色＋太字」にそろえる。
       --a-deep は .ov に写した窓の色（decision 28・ovFloat が付ける）。 */
  .ovf button.pri{background:var(--surface);color:var(--text);border-color:var(--line);font-weight:700}
  .ovf button.pri:hover{background:var(--hover)}
  /* ★2026-09-02：`.frm` の外でも使えるようにセレクタを広げた（新規クラスは作っていない）。
       締め画面の条件バーは `.frm` ではなく素の flex 行で、そこに項目を1つ足すと
       項目名と入力欄が2段に折り返してしまうため。
     ★grep 済み＝`class="f"` は 06_close.js の5箇所だけで、すべて `.frm` の中。
       広げても既存の見た目は変わらない。同等の既存クラスは無い
       （`.cl-fl` はチェックボックス用で height:30px と `.cl-fl input{height:auto}` を持つ）。 */
  .frm .f,.f{display:inline-flex;align-items:center;gap:5px}
  /* ★1行を丸ごと使う項目。中身が長くて1列に収まらないものだけに付ける。
       項目名の幅は --lblw で固定するので、**左端は他の行とそろったまま**。
       これを使わず無理に列へ押し込むと、名称の欄が縮んで読めなくなる。 */
  /* ★すき間は 10px。骨格の列のすき間（gap:5px 10px の10px）と同じ値にすること。
       6px にすると、項目名のあとが 4px 手前から始まり、この行だけ左にずれます
       （2026-08-31 南報告「4行目のみずれています」の原因）。 */
  .frm>.wide{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
  .frm>.wide>.flbl{flex:0 0 var(--lblw)}
  /* 項目の対ではない帯（法定チェック・種類の一覧など）は横いっぱいに置く */
  /* コードは中央寄せ（南のルール 2026-09-09）。表側は td.ta-c、入力欄は下。
     ★.fmt-code は全画面共通で 52箇所（実測 2026-09-09・grep）あるため、
       いまは廃棄物種類マスタの編集フォームだけに効かせている。全体へ広げるかは南に確認。
     ★日付は input.fmt-date が既に中央（797行）＝同じ考え方。 */
  .ww-form input.fmt-code{text-align:center}
  .frm>.ww-legal,.frm>.ww-kindbox{grid-column:1/-1}
  /* ★2026-09-09 南指示＝①と③の項目が窓幅いっぱいに広がって離れるのをやめ、左へ寄せる。
       骨格 .frm の欄の列は minmax(0,1fr)＝残りを全部使う作りなので、1920の窓では
       1組あたり900px以上になり、排出事業者と事業場が画面の端と端に離れていた。
     ★max-content にはしない。中に入った値の長さで列幅が変わり、**右側の項目が動く**
       （styles.css 938行の警告＝伝票ヘッダで実際に起きた不具合と同じ原因）。
       固定値にすれば、何を選んでも項目の位置は動かない。
     ★値の根拠（決定11＝実データの最大で決める）
         ①420px … 排出事業者＝コード欄120 ＋ あき6 ＋ 名称280（実測最長
                   「株式会社 商店設計プランニングインセンティブ」21文字＝252px）＝406
         ③330px … 運搬先の選択欄320（同・21文字）が最大。処分業者240・備考280・処分方法150 も入る
       ★どちらも「この窓だけ」。ほかの画面の .frm は今までどおり残りを全部使う。 */
  .tp-band>.frm.c4{grid-template-columns:repeat(2, var(--lblw) 420px)}
  .tp-band>.frm.c6{grid-template-columns:repeat(3, var(--lblw) 330px)}
  /* ★得意先リスト・仕入先リストの上段（南 2026-09-21 決定＝項目を左に詰める）。考え方は上の .tp-band と同じ。
       骨格 .frm.c6 の欄の列は minmax(0,1fr) なので、1920の窓では 順序・絞込・表示 が画面の端と端に離れていた。
     ★max-content にはしない（値の長さで列幅が変わり右の項目が動く＝938行の警告）。固定値にする。
     ★値の根拠＝欄の中身を styles.css のまま描いて測った幅（2026-09-21・Claude の作業環境のブラウザ）＋余裕。
         順序 223px（選択欄「得意先分類1」＋昇順＋降順）→ 240px
         絞込 150px（入力欄の幅そのもの）→ 160px
         表示 103px（選択欄「弥生準拠列」）→ 120px
       ★南の実機（Windows の書体）では未測定。欠けたらこの3つの値だけ直す。
     ★同等のクラスは無い（grep：lgd は styles.css・js とも0件だった）。 */
  .lgd>.frm.band.lgd-rng{grid-template-columns:var(--lblw) 240px var(--lblw) 160px var(--lblw) 120px}
  /* ★一覧のセルを直す入力欄（案A・南 2026-09-21 決定）。セルの中に差し込まず、表の上に重ねる。
       表の中に欄があると1文字ごとに表全体を組み直して入力がもたつく（300行×76列の再現で
       1文字65〜81ms → 重ねる形で32ms。2026-09-21 実測）。
       見た目は `.gedit td input` と同じ値にしてある。片方だけ直さないこと。
       位置と大きさは JS がセルに合わせて入れる（left/top/width/height）。
       z-index は左固定の列（td.fz=4）より上、見出し（th=10）より下。
     ★同等のクラスは無い（grep：gedit-ov は0件だった）。 */
  .lgd>.scroll{position:relative}
  .gedit-ov{position:absolute;z-index:6;box-sizing:border-box;min-width:0;margin:0;background:var(--surface);border:1px solid var(--green);padding:2px 4px;font:inherit;font-size:12px}
  /* ★弥生会計への仕訳出力の「仕訳科目設定」（2026-09-21・南承認モック v3）。
       .cmodal は幅600px固定で、得意先別（コード・得意先名・科目・補助科目）が収まらないので、この窓だけ広げる。
       表の列幅は ch ではなく固定値（入力欄が中に入るため）。値＝科目・補助は弥生会計の上限24文字（全角）が見える幅。
     ★同等のクラスは無い（grep：yk- は styles.css・js とも0件だった）。 */
  .cmodal.yk-acct{width:900px}
  .yk-acct .cm-pane>.c-muted{font-size:12px}
  .yk-w-lbl{width:120px} .yk-w-cd{width:60px} .yk-w-nm{width:170px} .yk-w-pc{width:130px} .yk-w-pn{width:250px}
  .yk-w-ac{width:190px} .yk-w-sb{width:230px} .yk-w-tx{width:190px}
  .yk-tbl td.yk-in{padding:2px}
  .yk-tbl td.yk-in input,.yk-tbl td.yk-in select{width:100%;box-sizing:border-box;height:26px;border:1px solid var(--border2);border-radius:4px;padding:0 6px;font:inherit;background:var(--surface)}
  .yk-acct .cm-ft .yk-amsg{margin-right:auto;font-size:12px}
  /* ★見出し固定＋本体スクロール（2026-09-21 南指摘「表がくずれている」で追加）。
       .cmodal .cm-body は padding:12px＋overflow:auto なので、表を直に置くと、
       スクロールした行が上の余白（12px）に回り込み、固定した見出しの上に見えていた。
       レシピ＝各階層に min-height:0、スクロールは既存の .scroll（div）だけにさせる。
       cm-body 自身はスクロールさせない。説明の行とチェック欄は .scroll の外＝動かない。 */
  .yk-acct .cm-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .yk-acct .cm-pane{flex:1;min-height:0}
  /* ★仕訳の一覧の列幅（2026-09-21）。決定11（幅は実データで決める）に合わせ、1920 の窓で
       固定列の合計 1,540px＋摘要（残り）に収まる値。科目名・税区分は弥生会計の名前の長さ、
       補助科目は略称（最長 全角13文字前後）が入る幅。はみ出す文字は rgrid--fixed が … で切る。
     ★同等のクラスは無い（grep：yk-c- は styles.css・js とも0件だった）。 */
  .yk-c-kind{width:120px} .yk-c-date{width:100px} .yk-c-no{width:70px} .yk-c-acc{width:120px} .yk-c-sub{width:210px}
  .yk-c-tax{width:160px} .yk-c-amt{width:110px} .yk-c-tamt{width:80px}
  /* ★見出しと合計行を止めたまま、裏の明細が透けないようにする（2026-09-21 南指摘）。
       .rgrid は border-collapse:collapse。collapse の表では、枠線が表の持ち物になり、
       止めたセル（sticky）と一緒に動かない。合計行の上の線が消え、止めた行の縁から裏の行がのぞいていた。
       レシピ（reference_scroll_pattern）どおり、.gedit と同じ separate＋box-shadow の線にする。この表だけ。 */
  .yk-grid{border-collapse:separate;border-spacing:0}
  .yk-grid th{box-shadow:inset -1px 0 0 var(--border),inset 0 -1px 0 var(--border)}
  .yk-grid td{border:0;box-shadow:inset -1px 0 0 var(--border),inset 0 -1px 0 var(--border)}
  .yk-grid tfoot td{border-top:0;bottom:-1px;padding-bottom:6px;box-shadow:inset -1px 0 0 var(--border),inset 0 2px 0 var(--border)}   /* bottom:-1px＝窓の拡大率で小数の位置になったとき、止めた行の下に1px のすき間ができて裏の行が見えるのを防ぐ */
  /* 下のメッセージ行は縮ませない（縮むと文字が表の領域に食い込む）。長いときは中でスクロール */
  /*   ★表の下端から数px、止めた合計行の下に裏の行がにじみ出る（Chrome の描画・2026-09-21 実測 3倍拡大で確認）。
         メッセージ行を不透明にして表の下に重ね、にじみを隠す。余白は外側（margin）ではなく内側（padding）で取る。 */
  .yk-msg{flex:0 0 auto;max-height:54px;overflow:auto;font-size:12px;position:relative;z-index:1;background:var(--surface);margin-top:0;padding-top:4px}
  .tp-hint{font-size:11px;color:var(--muted)}
  /* 参照ボタン。.sl-bar の外なので幅そろえ（min-width:96px）は効かせない */
  .tp-row button.narrow{min-width:0;background:var(--surface);color:var(--text);border:1px solid var(--line);
       border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
  .tp-row button.narrow:hover{background:var(--hover)}
  /* ② 左＝廃棄物名（選ぶ）／右＝種類（自動でチェックされる）。南 2026-08-22c で左右を入替 */
  /* ★2026-09-09 南決定＝左を「1fr（残り全部）」から「max-content（中身ぶん）」へ。
       旧は左が余りを全部取り、4列の右側に何も無い場所（実測122px）ができていた。
       その余りを種類側へ渡し、種類の名称を全文で出せるようにする。 */
  .tp-wm2{display:grid;grid-template-columns:max-content 1fr;gap:0}
  .tp-wm2>div{padding:4px 12px 8px;min-width:0}
  .tp-wm2>.tp-wr{border-left:1px solid var(--border2);background:var(--alt)}
  .tp-wm2 h5{margin:0 0 4px;font-size:11px;font-weight:700;color:var(--muted)}
  /* ★スクロールさせない（南 2026-08-22c）。廃棄物名は全部ひと目で見えるのが要。
       旧は max-height:132px でスクロールさせていたが、実データ18名称・5グループでは
       確実に溢れる（1グループ＝見出し16px＋ボタン26px、横幅が足りないと群が折り返す）。
       → 上限を外し、内容ぶんの高さを取る。減るぶんは④のひな形一覧が吸収する。
       ★④が消えないよう .tp-listwrap に min-height を置いてある。
       ★名称が大幅に増えて①〜③で画面が埋まるようなら、そのとき上限を戻すか
         グループを畳む作りにする。現状18件では問題にならない。 */
  /* ── 廃棄物名（2026-09-09 南決定・モック v7）───────────────────────────
       1マス＝大分類のトグル ＋ 配下を開く ▼。4列に並べる。
       ★書体を等幅に固定した（40行）ので 12px＝1ch 6.0px／全角 12.0px で数えられる。
         トグル ＝ 名称30ch（実測15文字「ガラス・コンクリート・陶磁器くず」）＋余白20px ＝ 200px
         1マス   ＝ 200 ＋ あき4 ＋ ▼26 ＝ 230px　／　4列＋列間12px ＝ 956px
       ★大分類にコードは併記しない（南＝実務でマニフェストのコードは把握していない）。
         外した7桁ぶんが名称に回るので、幅を変えずに15文字が全文で入る。
       ★grep 済み＝.tp-wsel / .tp-wcell / .wdn は styles.css に無かった。先例なしとして新設。
         折り畳みは廃棄物種類マスタの .ww-more をそのまま使う（新設していない）。 */
  .tp-toggles{display:block}
  .tp-wsel{display:grid;grid-template-columns:repeat(4,max-content);gap:3px 12px}
  .tp-wcell{display:flex;align-items:center;gap:4px}
  .wdn{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;
       width:26px;height:26px;font-size:11px;cursor:pointer;padding:0;flex:0 0 26px;
       display:inline-flex;align-items:center;justify-content:center}
  .wdn:hover{background:var(--hover)}
  .wdn.on{background:var(--hover);border-color:var(--muted);font-weight:700}
  /* 配下の候補。共通の .pk-list（751行）を使い、幅だけ1マスに合わせる。
     13px なので コード7ch(45.5) ＋ あき6 ＋ 名称24ch(156・12文字) ＋ 余白20 ＝ 227.5px。
     あふれた名称は省略記号。全文は title（マウスオーバー）。 */
  .tp-wcell>.pk-list{min-width:0;width:calc(31ch + 26px)}
  .tp-wcell .pk-list.open{display:block}
  .tp-wcell .pk-item{display:flex;align-items:center;gap:6px}
  .tp-wcell .pk-item>.cd{color:var(--light);flex:0 0 7ch}
  .tp-wcell .pk-item>.nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .tp-wcell .pk-item>.nm.d1{padding-left:12px}   /* 小分類の字下げ。1文字ぶん（決定10の刻み） */
  .ww-more>.tp-wsel,.ww-more>.tp-kinds{margin-top:4px}
  /* ★2026-09-09 南指示＝選んだものを出す行なので、文字色は本文と同じ黒にする（灰色をやめた） */
  .tp-auto{margin-top:4px;font-size:11px;color:var(--text)}
  /* ★種類は3列（南 2026-09-09 決定）。2026-08-22c の「2列→4列」をここで上書きした。
       4列だと1列210pxで名称が13文字までしか入らず、15文字の
       「ガラス・コンクリート・陶磁器くず」が省略される。3列なら1列286px＝19文字まで入る。
     ★常時表示13件が5行、折り畳みの19件が7行になる（4列のときより2行ぶん縦に伸びる）。 */
  .tp-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px;font-size:12px}
  .tp-kinds label{display:flex;gap:4px;align-items:center;white-space:nowrap;line-height:22px;min-width:0}
  .tp-kinds .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .tp-kinds label.auto{font-weight:700;color:var(--a-deep,var(--green))}
  .tp-kinds .cd{font-size:11px;color:var(--light);margin-right:2px}   /* ★2026-09-09 別書体の指定を削除 */
  .tp-kinds input{height:auto}
  /* ④ ひな形一覧 */
  /* min-height＝②が伸びても一覧が消えないための床（約4行ぶん） */
  .tp-listwrap{flex:1;min-height:120px;overflow:auto;border-top:2px solid var(--a-bd,var(--border))}
  .tp-listwrap table.grid{table-layout:fixed}
  .tp-listwrap table.grid td{overflow:hidden;text-overflow:ellipsis}   /* ★UI規約§6：無いと隣の列に文字が重なる */
  .tp-listwrap tr:hover td{background:var(--hover);cursor:pointer}
  .tp-listwrap tr.sel td{background:var(--a-face,var(--hover))}
  /* 事業者共通ひな形の行。事業場名が無いので、地を敷いて一目で分かるようにする */
  .tp-listwrap td.tp-allsite{color:var(--a-lblt);background:var(--a-face);font-weight:700}
  .tp-tag{display:inline-flex;gap:4px;align-items:center;background:var(--alt);border:1px solid var(--border2);
          border-radius:4px;padding:2px 8px;font-size:11px;margin-right:4px}
  .tp-tag a{text-decoration:none;color:var(--muted)}
  /* ══ 産廃分類台帳／廃棄物種類マスタ のタブ（2026-08-22c）══
       .wm-ctab と同じ考え方。ただし色は系統色に追従させる（旧は var(--green) 直書きで、
       窓の系統色が変わっても緑のままだった）。 */
  .cl-tab,.ww-tab{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;
                  padding:4px 12px;font-size:12px;cursor:pointer}
  .cl-tab:hover,.ww-tab:hover{background:var(--hover)}
  .cl-tab.on,.ww-tab.on{background:var(--a-deep,var(--green));color:var(--on-accent);
                        border-color:var(--a-deep,var(--green));font-weight:700}
  /* チェックボックスを .flbl の隣に置くための器（高さをそろえる） */
  .cl-fl{display:inline-flex;align-items:center;height:30px;padding:0 6px}
  .cl-fl input{height:auto}
  /* ★2026-09-02 追加：表の行の中に置くチェックボックス（回収実績表の商品選択）。
       共通の `input{padding:4px 8px}` が効いて縦に伸びるので、ここだけ高さを戻す。
     ★grep 済み＝同等のクラスは無い。styles.css の `height:auto` は4か所あるが
       いずれも器に紐づいていて表のセルには使えない：
         .cl-fl input      … 器が height:30px を持つので行が 36px になる
         .tp-kinds input   … ひな形設定の「種類」欄の中だけ
         .ww-kinds input   … 廃棄物種類マスタの中だけ
         .rcond-rm .re-dchk input … 残高一覧の条件欄の中だけ
     ★これまでは画面JSに style="height:auto" を直書きしていた（08_report.js の突合チェック等）。
       新しく足すぶんは直書きしない（uicheck [B] がインラインの増加を NG にする）。 */
  .ckbox{height:auto;margin:0;vertical-align:middle}
  /* ★2026-09-02 追加：印刷プレビューの iframe。
       値は 05_statement.js が直書きしていた style からそのまま持ってきた
       （flex:1 / min-height:0 / border:none / width:100%）。
     ★background は入れていない＝地の色 #e9e9e9 は tpl 側の body が塗る。
       styles.css の :root に灰色のトークンが無いため、ここで近い色を作らない（トークン不足）。
     ★grep 済み＝styles.css に .pr-if も iframe の規則も無かった。
       既存3か所の直書きはそのまま残る（同じ値なので見た目は変わらない）。 */
  .pr-if{flex:1;min-height:0;border:none;width:100%}
  /* 無効（active_flag=0）の行は薄く見せる。台帳なので消さずに残すのが基本 */
  .cl-off td{color:var(--light)}
  /* 一覧の列幅。入力欄の .fmt-* と同じ考え方で、種別で決める（直書きしない） */
  col.clw-code{width:110px} col.clw-num{width:80px} col.clw-flag{width:54px}
  col.clw-text{width:200px} col.clw-long{width:300px}
  /* ★2026-08-31 追加 clw-mid（150px）。110（コード）と 200（テキスト）の間が無く、
       ひな形リストに「得意先」列を足したときに合計が画面幅を超えて
       右端の「処分方法」が画面外へ出た（南報告）。既存5種に同等のものが無いことを
       grep で確認したうえで1本だけ足している。幅の種類をむやみに増やさないこと。 */
  col.clw-mid{width:150px}

  /* ★2026-09-15 追加（南決定）。決定11（幅は ch）を車両管理の表へ当てる。
     ・table-layout:fixed は .rgrid 共通に入れない。08_report.js の4本は列を実行時に
       組み立てて表示/非表示を切り替えるので、共通に入れると列が均等割りになる。
       幅を決めた表だけが rgrid--fixed を名乗る（決定15の先例なし申告）。
     ・+16px は td{padding:4px 8px} ぶん。col は border-box なので足さないと N 文字が入らない。
     ・★全角1文字は 2ch ではなく約2.2ch（2026-09-15 実機で日付・程度・内訳・部位が切れた）。
       全角ぶんは 1.1 倍で取る。半角だけの列も「/」「,」が「0」より広いので +2 見る。
     ・表ごとに一番長い自由文の列だけ幅を指定しない＝余りを取るので表全体の幅が動かない。 */
  .rgrid--fixed{table-layout:fixed}
  .rgrid--fixed th,.rgrid--fixed td{overflow:hidden;text-overflow:ellipsis}
  col.vh-w-veh  {width:calc( 5ch + 16px)}  /* 車両番号 実測4(全件固定)・見出し4。全角見出しで+1 */
  col.vh-w-kind {width:calc(10ch + 16px)}  /* 点検種別 日常/週次/月次=4・見出し「点検種別」8。+1（2026-09-16 表記統一で見出しが伸びた） */
  col.vh-w-date {width:calc(12ch + 16px)}  /* 日付 YYYY/MM/DD=10 固定 */
  col.vh-w-date2{width:calc(17ch + 16px)}  /* 日付・見出しが長い ダッシュボード「日常点検の実施日」=16。+1（2026-09-16） */
  col.vh-w-stat {width:calc( 8ch + 16px)}  /* 確認・故障の状態 実測6(3文字)。+1 */
  col.vh-w-vstat{width:calc(10ch + 16px)}  /* 車両の状態 「使用停止」=8。実データは全件4だが入り得る(南 2026-09-15) */
  col.vh-w-cnt  {width:calc( 8ch + 16px)}  /* 件数 見出し6(3文字)が下限。中身は1〜3桁 */
  col.vh-w-cntl {width:calc(10ch + 16px)}  /* 件数(見出しが4文字) 実施回数・異常あり=8。+1 */
  col.vh-w-type {width:calc(12ch + 16px)}  /* 車種 実測 最大10・平均8.7 → 平均+2 */
  col.vh-w-name {width:calc(14ch + 16px)}  /* 実施者(最大12)・実施先 */
  col.vh-w-part {width:calc(25ch + 16px)}  /* 部位 実測 最大22(全角11文字)。カルテは見るだけで行を開けないので切らない */
  col.vh-w-conf {width:calc(12ch + 16px)}  /* 確認者 実測 最大10 */
  col.vh-w-item {width:calc(18ch + 16px)}  /* 点検項目 平均15.4+2。最大48は「…」で切る */
  col.vh-w-judge{width:calc( 9ch + 16px)}  /* 判定 実測 最大8 */
  col.vh-w-sev  {width:calc(16ch + 16px)}  /* 程度 固定文言「走行に支障なし」=12。+1 */
  col.vh-w-sym  {width:calc(32ch + 16px)}  /* 症状(故障) 平均28.3+2。最大62は「…」 */
  col.vh-w-sym2 {width:calc(22ch + 16px)}  /* 症状(点検明細) ★実データ0件のため仮置き。運用開始後に測り直す */
  col.vh-w-fstat{width:calc(21ch + 16px)}  /* 故障の状態 「未対応（故障ID 29）」=19 */
  col.vh-w-money{width:calc(11ch + 16px)}  /* 金額 7桁+カンマ=9(南 2026-09-15)。+1 */
  col.vh-w-rec  {width:calc(13ch + 16px)}  /* 記録簿番号 ★実データ0件のため見出し基準 */
  col.vh-w-due  {width:calc(28ch + 16px)}  /* 次回の期日 ★合成文・データ0件のため仮置き */
  col.vh-w-cost {width:calc(19ch + 16px)}  /* 費用の内訳 「定期点検・車検」=16 */
  col.vh-w-act  {width:calc(15ch + 16px)}  /* 故障の経過の種類 「程度の付け替え」=14。+1（2026-09-16 故障の詳細） */
  col.vh-w-trans{width:calc(31ch + 16px)}  /* 状態・程度の移り変わり 「その場で直せる → 次の整備でよい」=31（2026-09-16 故障の詳細） */
  col.vh-w-skind{width:calc(19ch + 16px)}  /* 期日種別 固定文言「定期点検（6か月）」=18。+1（2026-09-16 カルテへ移設） */
  /* ══ 学校依頼管理（2026-09-17・南決定＝学校依頼用に新設）══════════════════════
       正本＝mock/mock_学校依頼管理_画面_2026-09-17_v4.html（南承認 2026-09-17）
     ★grep 済み＝.sr-* は styles.css・js とも0件だった。先例なしとして新設（決定15）。
     ★列幅の書き方は車両管理の vh-w-* と同じ。全角1文字＝約2.2ch（2026-09-15 実機）で取る。
       値の根拠＝2026-09-16 の取り込み元（作業状況確認書.xlsx）と事業場台帳133校の実測。
     ★表ごとに一番右の自由文の列は幅を指定しない（余りを取る）。 */
  col.sr-w-no    {width:calc( 8ch + 16px)}  /* 依頼順 3桁・見出し「依頼順」全角3＝6.6。+1 */
  col.sr-w-date  {width:calc(12ch + 16px)}  /* 日付 YYYY/MM/DD=10 固定 */
  col.sr-w-area  {width:calc(12ch + 16px)}  /* 区域 「中央区西区」全角5＝11。+1 */
  col.sr-w-cnt   {width:calc( 6ch + 16px)}  /* 件数・回数 見出し全角2＝4.4。中身は1〜3桁 */
  col.sr-w-cntl  {width:calc(12ch + 16px)}  /* 件数（見出しが全角4〜5）「予定日未定」＝11。+1 */
  col.sr-w-heavy {width:calc( 8ch + 16px)}  /* 重量物 見出し全角3＝6.6。+1 */
  col.sr-w-wish  {width:calc(17ch + 16px)}  /* 相手の希望 実測 最長「8/19以降 8/19~21」＝約16。+1 */
  col.sr-w-stat  {width:calc(12ch + 16px)}  /* 状態 「予定日未定」全角5＝11。+1 */
  col.sr-w-next  {width:calc(23ch + 16px)}  /* 次の予定日 「2026/09/25（あと9日）」＝22。+1 */
  col.sr-w-cust  {width:calc(14ch + 16px)}  /* 得意先コード 実測12桁・見出し全角6＝13.2。+1 */
  col.sr-w-school{width:calc(27ch + 16px)}  /* 学校 133校中132校が12文字以下（平均9.8）。12×2.2＝26.4。+1
                                               21文字の「札幌市立幌北小学校・北辰中学校ひまわり分校」だけ「…」で切れる（南了承 2026-09-17） */
  col.sr-w-chk   {width:calc( 2ch + 16px)}  /* 選ぶチェック */
  col.sr-w-add   {width:calc(20ch + 16px)}  /* 追加依頼 「2026/09/14（2件）」＝半角10＋全角4（×2.2）＝18.8。+1（2026-09-17 南了承） */
  /* 回収日程＝左右2列（南 2026-09-17「決まっている日程を参考に日程調整を行う」）。
     ★作りはルートマスタの .rm2-split／.rm2-pane／.rm2-ph と同じ。流用しないのは、片方を直すともう片方が崩れるため。
     ★grid-template-rows を minmax(0,1fr) で明示する。消すと行が中身の高さまで伸び、スクロールが出ない
       （.rm2-split で 2026-09-04 に起きた不具合と同じ）。 */
  .sr-2col{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .sr-pane{min-width:0;min-height:0;display:flex;flex-direction:column}
  .sr-pane+.sr-pane{border-left:2px solid var(--a-bd,var(--border))}
  .sr-ph{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:11px;
         color:var(--muted);background:var(--alt);border-bottom:1px solid var(--border2);white-space:nowrap}
  .sr-ph b{color:var(--text);font-size:12px}
  /* ══ 廃棄物種類マスタ：法定の数量記載フラグと「票でチェックする種類」（2026-08-22c）══ */
  .ww-legal{flex:1 0 100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
            background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:4px;padding:2px 10px;font-size:11px;color:var(--warn)}
  .ww-legal .cl-fl{height:24px;font-size:12px;color:var(--text);gap:4px}
  /* ★フォームを2段に分ける器（南 2026-08-22c）。1つの行に全部入れると折り返しが
       成り行きになり、幅によって3段になったり項目の頭がそろわない。 */
  /* ★.ww-line は 2026-08-31 に廃止（骨格 .frm へ置換）。使っている画面は0件。
       同じものを足し直さないこと。1行に何組でも流し込む形なので、幅しだいで
       折り返し位置が変わり、項目の頭がそろわなくなる。 */
  .ww-kindbox{flex:1 0 100%;border:1px solid var(--border2);border-radius:4px;background:var(--alt);padding:4px 10px 6px}
  .ww-kindbox .ww-kh{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:2px}
  /* 代表の種類の案内。選んだ代表は下の一覧から外れるので、ここで何が代表かを示す */
  .ww-kindbox .ww-kh2{font-size:11px;color:var(--text);margin-bottom:3px}
  /* 種類は4列。ひな形設定の .tp-kinds と同じ形にそろえる */
  /* ★2026-08-31 南指示：若い番号順に**4行**で並べ、右へ列を伸ばす。
       旧＝4「列」を作って左→右→次の行に流していたため、31項目で8行ぶんの高さを使い、
       下のひな形一覧が数行しか見えなかった。
       grid-auto-flow:column ＝上→下→次の列。列の数は中身に応じて自動で増える。
       ★ repeat(4,…) を grid-template-columns に戻さないこと。高さが倍になる。 */
  .ww-kinds{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);
            grid-auto-columns:max-content;gap:0 16px;font-size:12px;overflow-x:auto}
  .ww-kinds label{display:flex;gap:4px;align-items:center;white-space:nowrap;line-height:22px}
  .ww-kinds label.kp{font-weight:700;color:var(--a-deep,var(--green))}   /* 代表の種類 */
  .ww-kinds .cd{font-size:11px;color:var(--light);margin-right:2px}   /* ★2026-09-09 別書体の指定を削除 */
  .ww-kinds input{height:auto}
  /* 使用頻度の少ない種類をしまう折り畳み（2026-09-08 南決定）。
     ★常時表示＝マニフェストが起票された実績のある大分類。実績が無いものをここへ入れる。
       実績は起票で付く＝マスタに登録しただけでは上がらない（南 2026-09-08 明示）。
     ★閉じているときに中のチェックは見えない。南了承済み＝保存前は見えないのが当然で、
       保存後は実績が付いて常時表示へ上がるため。
     ★grep 済み＝details / summary を使った先例は styles.css に1件も無かった。
       先例なしとして新設する（決定15）。 */
  .ww-more{margin-top:4px;border-top:1px solid var(--border2);padding-top:4px}
  .ww-more>summary{font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;
                   list-style:none;display:flex;align-items:center;gap:4px}
  .ww-more>summary::-webkit-details-marker{display:none}
  /* ★大きさは書かない。summary の11pxを継ぐ（決定1＝13/12/11 の3段） */
  .ww-more>summary::before{content:"▶";color:var(--light)}
  .ww-more[open]>summary::before{content:"▼"}
  .ww-more>.ww-kinds{margin-top:3px}
  .wm-2col{display:flex;gap:0;align-items:stretch;flex:1;min-height:0}
  .wm-2col>.wl{width:330px;border-right:1px solid var(--border2);overflow:auto;padding:8px 10px}
  .wm-2col>.wr{flex:1;overflow:auto;padding:8px 10px;min-width:0}
  .wm-2col h5{margin:0 0 6px;font-size:12px;padding-bottom:4px;border-bottom:1px solid var(--border2);color:var(--green)}
  /* ★オーバーレイ .ov / .ovbox（2026-08-21 追加）
     これまで tablet.html にしか定義が無く、index.html 側では**無スタイルのまま**
     描画されていた。そのため子の追加・編集ダイアログや明細ダイアログが
     画面の左下に流れ落ちていた。既存の .ui-dlg と同じ見た目にそろえる。
     ★見出しをつかんで動かせる（フローティング）。修正しながら裏の表を見たいため。 */
  .ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9400;display:none;
      align-items:center;justify-content:center;padding:12px}
  .ov.open{display:flex}
  .ovbox{background:var(--surface);border-radius:4px;max-width:96vw;max-height:92vh;
         box-shadow:0 14px 44px rgba(0,0,0,.32);overflow:hidden;display:flex;flex-direction:column;
         position:relative}
  /* ★2026-09-09 決定28＝モーダルは、開いた窓と同じ色にする。
       --a-deep は .win-acc-* が持つ濃い色。.ov に窓と同じ win-acc-* を付けると
       ここで受け取れる（付け忘れたときだけ緑に落ちる）。付けるのは ovFloat(ov,win)。 */
  .ovh{background:var(--a-deep,var(--green));color:var(--on-accent);padding:8px 12px;font-weight:700;font-size:13px;
       cursor:move;user-select:none;flex:0 0 auto}
  .ovh::after{content:"⋮⋮";float:right;opacity:.5;letter-spacing:-2px}
  .ovb{padding:12px 12px;font-size:13px;overflow:auto;flex:1;min-height:0}
  .ovb .grid{width:100%}
  .ovf{display:flex;justify-content:flex-end;gap:10px;padding:10px 12px;
       border-top:1px solid var(--border2);background:var(--alt);flex:0 0 auto}
  .ovf button{height:32px;padding:0 12px;border-radius:4px;font-size:13px;cursor:pointer}
  /* 子タブ（積替保管場所／収集運搬業許可 の切替）。選択中を押し込み表示にする
     ★2026-08-21 修正：var(--accent) / var(--head) は**このアプリに存在しない変数**だった。
       未定義だとフォールバック値が使われ、既存の配色から浮く。使うのは :root の8行目にある
       --green / --border / --hover などだけにすること。 */
  /* ★2026-09-09＝窓の系統色に追従させた。旧は var(--green) の直書きで、窓が青なのに
       タブの選択中だけ緑のままだった（南 2026-09-09 指摘）。
       ★.cl-tab / .ww-tab は 2026-08-22c に同じ直しが入っており、.wm-ctab だけ
         取り残されていた（上の1099行のコメントが「.wm-ctab と同じ考え方」と書いたまま
         こちらを直していなかった）。2本の見た目はこれで一致する。 */
  .wm-ctab.on{background:var(--a-deep,var(--green));color:var(--on-accent);
              border-color:var(--a-deep,var(--green));font-weight:700}
  /* 台帳の左一覧。選択中の行を目立たせる */
  .wm-ltbl tr.on td{background:var(--hover);font-weight:700}
  .wm-ltbl tr:hover td{background:var(--hover)}
  /* データ点検＝左右とも縦フル。h5を固定して中身だけスクロールさせる（reference_scroll_pattern） */
  .wm-2col.ck>.wl,.wm-2col.ck>.wr{display:flex;flex-direction:column;overflow:hidden}
  .wm-2col.ck .scroll{flex:1;min-height:0;overflow:auto}
  /* ★背景は指定しない。table.grid th（#e7ecdc）をそのまま使う。ここで上書きすると
     この窓の表ヘッダだけ色が違って見える（2026-08-21 に発生）。z-index だけ上げる。 */
  .wm-2col.ck .grid th{z-index:10}
  .wm-2col.ck .grid td{padding:2px 4px}
  .wm-2col.ck .grid input,.wm-2col.ck .grid select{font-size:12px;padding:2px 2px}
  .wm-req{border:1px solid var(--danger-line);background:var(--danger-bg);padding:4px 8px;font-size:12px;border-radius:4px;margin-top:6px}

  /* ══ ②部品：文字の色（2026-09-07 南指示）══════════════════════════════════
       南＝「色の記述が様々なところで記述されているなら、CSSで統一すべき。
       そうじゃないとどれが正しい色なのかが明確にならず、いつまでたっても統一されない」。
       画面が style="color:…" を書かずに済むようにするための受け皿。
     ★★ファイルの一番最後に置いてあるのは理由があります。
       .sub / .sub-l / .empty / .pk-code なども詳細度(0,1,0)で色を持っており、
       同じ詳細度どうしは**後に書いてあるほうが勝ちます**。
       class="sub c-light" のような組み合わせを効かせるため、ここより後ろに
       色を持つ (0,1,0) のルールを足さないこと。
     ★grep 済み＝.c-* はいずれも styles.css に存在しませんでした。
     ★値はここにも書きません。:root の変数を参照するだけです。 */
  .c-muted {color:var(--muted)}
  .c-light {color:var(--light)}
  .c-text  {color:var(--text)}
  .c-green {color:var(--green)}
  .c-ok    {color:var(--ok)}
  .c-warn  {color:var(--warn)}
  .c-danger{color:var(--danger)}
  .c-on    {color:var(--on-accent)}
  .c-accent{color:var(--a-deep,var(--green))}   /* 窓の系統色。持たない窓は緑 */
  .c-sales {color:var(--sales)}                 /* 売上（データの区分として使う） */
  .c-purch {color:var(--purch)}                 /* 仕入（同上） */