/* 文字の大きさの基準（2026-09-22 利用者「全体的に文字サイズ基準小さくしてコンパクト化」）。
   本文 12px・入力 12.5px・ラベル 11px・小さい字 10px・いちばん小さくて 9px。一段下げたうえで、入力・表・箱・上の帯・左のメニュー・
   窓の余白も詰めた。新しく書くときもこの大きさに合わせる */
/* 自社マインド＋ 画面の土台。
   2026-09-13 に「案 2 白紙」へ切り替え。2026-09-18 に白とグレーを入れ替え、差し色を真鍮から薄い青へ
   （読む中身と左のメニューは白、枠は薄いグレー、選んでいる所は青。docs/CORE.md「画面の色」）。
   夜の商売なので、元の「管制卓」（濃紺）も残して切り替えられるようにしてある。
   色は全部この 2 か所の変数で決まるので、画面側のコードは触らなくてよい。 */

:root {
  color-scheme: light;
  --scheme: light;

  /* 2026-09-18 に白とグレーを入れ替えた（利用者「白とグレーの使い方は逆」）。
     読む中身（地・表の行・カード・引き出し）は白。見出しの帯・左の並び・下の帯はグレー */
  --bg: #ffffff;          /* 地（読む中身） */
  --panel: #ffffff;       /* カード・引き出し・上の帯（白の上は線で分ける） */
  --panel2: #f6f6f7;      /* うっすら塗る所（行のなぞり・入力欄） */
  /* 読むだけの中身の地（2026-09-27 利用者「住所電話番号の背景は 少し違う色 編集できない事の差別化 コース追加項目なども
     その背景」）。打てる欄は白。読むだけはその柱の地を少し沈めた色（桃・黄・青灰のどの柱の上でも白と見分けられる） */
  --ro-bg: rgba(16, 24, 40, .05);
  --panel3: #ececee;      /* 押されている所・棒の下地・切り替えの台 */
  --tbg-mix: 100%;        /* タスク表の出勤の帯にタスク背景色をどれだけ出すか（明るい画面はそのまま） */
  /* タスク（ヘブン）の表の地（ヘブンと同じモノクロ。出勤の外は灰・出勤の時間は白。hvfix-2026-10-02） */
  --hv-off: #d4d4d4;
  --hv-on: #f4f4f4;
  --rail: #f5f5f6;        /* 下の帯・ログインの地（薄いグレー。青みは付けない） */
  --rail-hover: #f1f1f3;
  --head: #f4f4f5;        /* 表の見出しの帯 */
  --line: #e1e1e4;
  --line2: #ececee;
  /* 伝票 1 枚の柱の地色（2026-09-25 利用者。本家の 桃／黄／薄灰 に寄せる）。2026-10-02 に一段濃く（利用者「全体的見ずらい
     文字サイズなどは変えずに　色合いや文字色でもうちょっとはっきりさせたい」。slipvis-2026-10-02）。白い入力欄が柱の地から浮いて
     見えるように。前は #fdf0f4・#fdfaea・#f1f4f7（キャストの個別設定の地 --paycustom は前のまま） */
  --slip-left: #fbe7ee;
  --slip-mid: #fdf6df;
  --slip-right: #e9eef4;
  /* 伝票の窓の線と字（同じ日）。箱の枠（-edge）・見出しの帯（-head）・読むだけの欄の地（-ro）は、柱ごとの色を濃くしたもの。
     項目名（-dim）・薄い字（-faint）・下線と細い枠（-line）は伝票の窓の中だけ一段濃い（.slipform の中で --dim などを置き換える）。
     -hint は検索付きプルダウンの「選ぶ」の案内の字（項目名より薄く、打った字と見分ける） */
  --slip-left-edge: #e2b3c4;
  --slip-mid-edge: #d8c78f;
  --slip-right-edge: #b9c8da;
  --slip-left-head: #f7d8e3;
  --slip-mid-head: #f6e8bd;
  --slip-right-head: #d8e2ee;
  --slip-left-ro: #f4d9e3;
  --slip-mid-ro: #f3ead2;
  --slip-right-ro: #dce4ee;
  /* 伝票の窓の変更履歴の箱は黄緑（logdetail-2026-10-03。利用者「色合いは黄緑」）。地・枠・見出しの帯 */
  --slip-log: #eef7dc;
  --slip-log-edge: #b2d27c;
  --slip-log-head: #dcefb6;
  --slip-dim: #36404d;
  --slip-faint: #5c6673;
  --slip-hint: #6b7480;
  --slip-line: #a3acb8;
  --slip-line2: #d0d5dc;
  --pet-bg: #fff4dc;       /* 自宅の札のペット有の帯（homelook-2026-10-24） */
  --pet-edge: #e7c27a;
  --pet-ink: #ffffff;      /* 琥珀の札の字 */
  --warn-bg: #fdecea;      /* 自宅の札の注意の帯 */
  /* キャストの報酬ランクが「個別設定」の表の地（2026-09-27 利用者「この背景を薄ピンクに」→「もっと薄いピンク」。伝票の桃の地と同じ） */
  --paycustom: #fdf0f4;
  /* タスク表のキャストのカードの 可〇（赤）・不可✖（青紫）（2026-09-29 利用者「〇は赤 ✖は青紫」） */
  --opt-ok: #d32f2f;
  --opt-ng: #4c3fd1;
  /* 受付台帳のキャスト名の地が店舗の色のときの字と縁取り（2026-09-27）。地は店ごとの色で画面の明暗に関係ないので、
     暗い画面でも同じ（暗い画面の側では置き換えない） */
  --tint-ink: #101828;
  --tint-ink-rev: #ffffff;
  --tint-halo: rgba(255, 255, 255, .75);
  --tint-halo-rev: rgba(0, 0, 0, .45);
  /* 受付台帳の帯の赤い字（本・OP有。2026-09-28 利用者「本 は赤文字 OP有 は コピーアイコンの左に 赤文字記載」）。帯の地は明暗に
     関わらず明るめ（状態の色・指名区分の色）なので、暗い画面でも同じ。暗い地（待機の青）だけ淡い赤 */
  --mark-red: #c62828;
  --mark-red-rev: #ffcdd2;
  /* キャンセル・チェンジの札の色（2026-10-02 利用者「キャンセルは 赤背景 チェンジは青背景 チップで表示 … 下ズレした時も キャンセルは赤文字
     チェンジは青文字で表示」）。キャンセルは上の赤。帯の地は明暗に関わらず明るめなので暗い画面でも同じ。暗い地（rev）の下の段の字だけ淡い青 */
  --mark-blue: #1565c0;
  --mark-blue-rev: #bbdefb;
  /* タスク表の名前の下の即ヒメ（2026-09-29）。ヘブンの即ヒメの画面の釦の色に寄せた 桃（即ヒメ）・緑（待機中）・橙（接客中）。
     白い字を載せる地なので、明るい画面でも暗い画面でも同じ */
  --soku-sk: #c2255c;
  --soku-wt: #2b7a4b;
  --soku-sv: #b8501b;
  /* 受付台帳の帯の字（2026-09-28 利用者 本家と見比べて「自社の方が文字が見えずらい」）。真っ黒。帯の地は明暗に関わらず明るめ
     なので、暗い画面でも同じ。書体は 13:06 に本家と同じ ＭＳ Ｐゴシックにしたあと、同じ日に 小杉丸ゴシック へ（利用者「フォントは
     はっきり見えるがもう少しマルっぽいのある？？」→ 書体くらべから「小杉丸ゴシック（Kosugi Maru）」）。画面で読むために作られた
     丸ゴシックで、線の太さがそろっていて小さい字でもつぶれにくい。太さは 1 種類だけ（本・OP有 の太字はブラウザが太らせる）。
     読み込めなかったときは ＭＳ Ｐゴシック */
  --board-font: "Kosugi Maru", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --board-ink: #000000;
  /* 伝票の帯の境界線（2026-09-28 利用者「伝票間の境界線は濃いめのグレー」→ 同じ日「もっと細く、もう少し薄く」で #666 の 1px から
     半透明の黒の 0.5px へ）。帯の地を少し暗くした色の線になる。帯の地は明暗に関わらず明るめなので、暗い画面でも同じ */
  --board-edge: rgba(0, 0, 0, .45);
  /* 受付台帳の時間の目盛りといまの線（2026-09-27 利用者「10分刻みのサブ線 １時間刻みの主線 現在時刻 は赤線」）。
     目盛りは下の色を少し暗くする半透明（2026-09-28 利用者「この背景線はグレー部分の上」。前の 10 分の線 #eef0f3 は出勤の帯の
     グレー #ececee とほぼ同じ色で、帯の上では消えていた）。白い所でもグレーの上でも見える */
  --grid-hour: rgba(16, 24, 40, .24);
  --grid-10: rgba(16, 24, 40, .09);
  --now-line: #e03131;
  /* タスク表の出勤の印（受け・確認・UP・完UP・家着）の赤（2026-09-28 夜 利用者「赤文字」）。行の地の上に出すので明暗で変える */
  --shift-mark: #d32f2f;
  /* 受付台帳の見出しの帯（キャスト・係数・備考・日記・出勤状況・時刻。2026-09-28 利用者「などのタイトルは濃い青の UIに合う背景で」）。
     青は主の色（--accent #2b6cb0）と同じ色味を濃くしたもの。字は白、区切りと 10 分の目盛りは白を薄く */
  --board-head: #1e4b7b;
  --board-head-ink: #ffffff;
  --board-head-line: rgba(255, 255, 255, .22);
  --board-head-tick: rgba(255, 255, 255, .45);
  /* 受付台帳の備考の丸（2026-09-27。本家の受付台帳の黄色い丸。意味はまだ無い） */
  --memo-dot: #f2c200;
  /* 左のメニュー（2026-09-18 に白へ）。選んでいる項目だけ差し色の薄い青 */
  --menu: #ffffff;
  --menu-hover: #f3f3f5;
  --menu-on: var(--accent-wash);

  /* 差し色（主）。2026-09-18 に真鍮から薄い青へ（利用者「茶色メインじゃなくて薄青メインがいい」）。
     選んでいる所・札・主な釦・強調の数字・注意書き。茶色（--amber）は写真指名と「仮」だけに残す */
  --accent: #2b6cb0;
  --accent-dim: #a9c7e6;
  --accent-wash: #eaf2fb;
  --accent-wash-2: rgba(43, 108, 176, .14);
  --accent-edge: rgba(43, 108, 176, .28);
  --text: #101828;
  --dim: #475261;
  --faint: #677280;

  --amber: #8a5a12;       /* 真鍮。管制卓の琥珀を白の上へ持ってきた色 */
  --amber-dim: #e0bd82;
  --vermil: #a8341f;
  --vermil-dim: #edb9ac;
  --jade: #1f6b4f;
  --jade-dim: #a8d5c2;
  --violet: #4f3fa8;
  --violet-dim: #c2b9ea;
  --steel: #33689f;
  --steel-dim: #b5cde6;
  /* マスタの棚の色の札で足した色（mastertag-2026-10-16）。桃・青緑・黄緑・茶・藍。白の上では濃く */
  --rose: #b23a74;
  --rose-dim: #e6b4cc;
  --teal: #0f7c86;
  --teal-dim: #a6d6db;
  --olive: #697716;
  --olive-dim: #cfd48f;
  --copper: #8f4a2a;
  --copper-dim: #e3b9a3;
  --indigo: #3a4aa6;
  --indigo-dim: #b6bde6;

  /* 時間軸のブロック（状態の無い帯だけ）。白の上では淡く塗る。左の色の縁は 2026-09-28 にやめた（利用者「この始まりの棒不要」） */
  --blk-fg: #101828;
  --sf1-bg: #f1f1f3;   /* フリー */
  --sf2-bg: #e3eefa;   /* 写真指名 */
  --sf3-bg: #f7e3de;

  --amber-wash: rgba(138, 90, 18, .07);
  --amber-wash-2: rgba(138, 90, 18, .18);
  /* 直したけれど、まだ登録していないもの（出勤の表）。蛍光ペンのような薄い黄色 */
  --edit-wash: #fff6cf;
  --edit-edge: #d9a514;
  --amber-edge: rgba(138, 90, 18, .28);
  --vermil-wash: rgba(168, 52, 31, .06);
  --shadow-sign: rgba(16, 24, 40, .16);
  --shadow-drawer: rgba(16, 24, 40, .13);
  --scrim: rgba(16, 24, 40, .38);

  /* 画面全体の字はタスク表の伝票の帯と同じ 小杉丸ゴシック（--board-font）にそろえる（2026-10-02 利用者「自社マインド＋全体のフォントは
     タスク表での伝票で表示されるフォントに統一しよう」。fontall-2026-10-02）。前は IBM Plex Sans JP と IBM Plex Mono。
     数字の桁をそろえる所（--mono）も同じ書体 ── 小杉丸ゴシックは半角の数字も英字も全部同じ幅（0.5 字）なので、等幅の書体を別に
     使わなくても縦の桁はそろう。太さは 1 種類なので、500 は普通の太さで出て、600・700 の太字はブラウザが太らせる（タスク表の帯と同じ）。
     2026-10-21：パスワード表示（--code）も含め、全画面をこの書体へ統一する。 */
  --sans: var(--board-font);
  --mono: var(--board-font);
  --code: var(--board-font);
}

/* 管制卓（夜用）。暗い事務所ではこちらのほうが目が楽 */
:root[data-theme="dark"] {
  color-scheme: var(--scheme);
  --scheme: dark;

  --bg: #101823;
  --panel: #16202c;
  --panel2: #1b2735;
  --ro-bg: rgba(255, 255, 255, .05);   /* 読むだけの中身の地（暗い画面では少し浮かせる） */
  --panel3: #212f3f;
  --tbg-mix: 30%;
  --hv-off: #0c131c;     /* タスク（ヘブン）の表の地（暗い画面では白く光らせない） */
  --hv-on: #1f2c3b;
  --rail: #0c131c;
  --rail-hover: #101923;
  --menu: #0c131c;
  --menu-hover: #101923;
  --menu-on: #16202c;
  --line: #26333f;
  --line2: #1c2734;
  /* 伝票の柱と線と字（暗い画面。slipvis-2026-10-02）。項目名と線は明るく、柱の地は少しだけ色を濃く */
  --slip-left: #22141b;
  --slip-mid: #201b11;
  --slip-right: #13202f;
  --slip-left-edge: #5a3445;
  --slip-mid-edge: #574a25;
  --slip-right-edge: #30496a;
  --slip-left-head: #2e1923;
  --slip-mid-head: #2b2414;
  --slip-right-head: #1a2c41;
  --slip-left-ro: #2c1b23;
  --slip-mid-ro: #2a2418;
  --slip-right-ro: #1b2a3c;
  --slip-log: #18230f;
  --slip-log-edge: #4b6a2b;
  --slip-log-head: #223217;
  --slip-dim: #a9b7c6;
  --slip-faint: #81909e;
  --slip-hint: #708090;
  --slip-line: #415163;
  --slip-line2: #2e3c4c;
  --pet-bg: #2e2312;
  --pet-edge: #6b4e1d;
  --pet-ink: #1b1206;
  --warn-bg: #3a1a16;
  --paycustom: #2b1a21;
  --opt-ok: #ff6b6b;
  --opt-ng: #9d93ff;
  --grid-hour: rgba(255, 255, 255, .16);
  --grid-10: rgba(255, 255, 255, .06);
  --now-line: #ff6b6b;
  --shift-mark: #ff7b7b;
  --board-head: #1c3c5e;
  --board-head-ink: #e6eef7;
  --board-head-line: rgba(255, 255, 255, .14);
  --board-head-tick: rgba(255, 255, 255, .32);
  --memo-dot: #e0b400;
  --text: #dde6ef;
  --dim: #8698ab;
  --faint: #5d6b79;

  --amber: #f0a03c;
  --amber-dim: #5a452a;
  --vermil: #e2674a;
  --vermil-dim: #55312a;
  --jade: #52bd9a;
  --jade-dim: #2b4f43;
  --violet: #9b8cf0;
  --violet-dim: #3f3a63;
  --steel: #7d9ab8;
  --steel-dim: #33475c;
  --rose: #ee8fc2;
  --rose-dim: #5a3048;
  --teal: #4fc3cf;
  --teal-dim: #234d52;
  --olive: #bcc95e;
  --olive-dim: #45491f;
  --copper: #dc956d;
  --copper-dim: #553527;
  --indigo: #8f9fff;
  --indigo-dim: #343b66;
  --head: #1b2735;
  --accent: #6cb0ea;
  --accent-dim: #2d4b68;
  --accent-wash: rgba(108, 176, 234, .08);
  --accent-wash-2: rgba(108, 176, 234, .18);
  --accent-edge: rgba(108, 176, 234, .26);

  /* 暗い上では逆に、濃く塗って黒い字を載せるほうが読める */
  --blk-fg: #101823;
  --sf1-bg: #8698ab;
  --sf2-bg: #7d9ab8;
  --sf3-bg: #e2674a;

  --amber-wash: rgba(240, 160, 60, .06);
  --amber-wash-2: rgba(240, 160, 60, .18);
  --edit-wash: rgba(240, 200, 60, .14);
  --edit-edge: #e3b341;
  --amber-edge: rgba(240, 160, 60, .22);
  --vermil-wash: rgba(226, 103, 74, .07);
  --shadow-sign: rgba(0, 0, 0, .4);
  --shadow-drawer: rgba(0, 0, 0, .35);
  --scrim: rgba(8, 12, 18, .55);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 12px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, pre, code, kbd, samp { font-family: var(--board-font); }
/* 金額のマイナスだけ、同じ書体のまま短く太くする。コピー時は通常の「−」を保つ。 */
.money-negative { white-space: nowrap; } .money-minus { display: inline-block; width: .65em; text-align: left; font-weight: 700; letter-spacing: 0; } .money-minus > span { display: inline-block; transform: scaleX(.65); transform-origin: left center; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── 全体の骨格 ───────────────────────────────────────────────── */
/* 左の欄の幅（railw-2026-10-09 利用者「メニューの幅が　メニューの中を開くときに変わるときがある　修正して」）。左の欄は縦にあふれると送り棒
   （15px）が出て中の幅が 175px → 160px に縮み、項目と便利ツールの丸の並びが変わっていた。送り棒の幅はいつも空けておき（.rail の
   scrollbar-gutter）、そのぶん 176px → 191px にして中の幅は前と同じ 175px のまま。見出しの「自社マインド＋」の幅・本文の真ん中へ寄せる帯も
   この値から */
:root { --rail-w: 191px; }
#app { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; }

.rail {
  background: var(--menu); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto;
  scrollbar-gutter: stable;
}
.brand { padding: 13px 14px 11px; font-size: 12px; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 7px; }
.brand i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
/* 全ページの見出し（2026-09-30 利用者「全ページ有効のヘッダーがほしい　タイトル　自社マインド＋　求人　ネット予約　出力モニター　の選択
   ログアウト　をヘッダーに表示する」）。左にタイトル（前は左メニューのいちばん上）、右に 求人・ネット予約（hlnotice.js）・出力モニター・
   ログアウト。左の欄と同じ地で、左の欄とつながった枠にする。通知の窓（.hn-panel）が本文の上に出るよう重なりは 50（確認の窓 55 の下） */
.apphead {
  grid-column: 1 / -1; position: relative; z-index: 50;
  display: flex; align-items: center; gap: 14px; min-height: 42px; padding: 4px 14px 4px 0;
  background: var(--menu); border-bottom: 1px solid var(--line);
}
.apphead .brand { width: var(--rail-w); flex: none; padding: 0 14px; }   /* 字の大きさは左メニューにあったときの 12px のまま */
.headtools { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.headtools > div:empty { display: none; }
.headscreen:empty { display: none; }
/* 通知の窓は見出しの右端いっぱいに寄せて開く（2026-09-30 利用者「ログアウトは一番右だが　ネット予約　通知窓は右に限界寄席」）。
   札の入れ物（.hn。hlnotice.css では position: relative）を位置の基準から外し、窓（right: 0 の絶対位置）の基準を見出しにする */
.apphead .hn { position: static; }
.apphead .hn-panel { right: 4px; top: calc(100% + 4px); }
/* 札の名前が長くなったので、見出しに入り切らない幅では右側（札とログアウト）を 2 段目へ折り返す（はみ出さない） */
.apphead { flex-wrap: wrap; row-gap: 4px; }
.headscreen { display: flex; align-items: center; gap: 8px; }
.headpick { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.headpick select { font-size: 11px; padding: 2px 4px; max-width: 220px; }
.headnote { font-size: 10.5px; color: var(--jade); white-space: nowrap; }
.headnote:empty { display: none; }
.headnote.bad { color: var(--vermil); }
.headout .btn { padding: 3px 12px; font-size: 11px; white-space: nowrap; }
/* 見出しの［マインド＋を反映］（mirrorpull-2026-10-05 利用者「ボタンの置き場所は　出力モニター横に目立つように」）：出力モニターのすぐ右。
   ［ヘブンネットへ反映］と同じ橙の地に白い太字（hvicon-2026-10-03 の色）。右に最後に反映した時刻と結果、失敗・断ったときは赤 */
.headpull { display: flex; align-items: center; gap: 8px; min-width: 0; }
.headpull:empty { display: none; }
.headpull .btn.pullbtn {
  padding: 4px 14px; font-size: 12px; font-weight: 700; white-space: nowrap;
  border-color: #f07800; background: linear-gradient(#ff9500, #ff8100); color: #fff;
}
.headpull .btn.pullbtn:hover:not(:disabled) { border-color: #e06c00; background: linear-gradient(#ff8a00, #f07300); color: #fff; }
.headpull .btn.pullbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.headpull .btn.pullbtn:disabled { opacity: .6; cursor: progress; }
.headpull .pullnote { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.headpull .pullnote.bad { color: var(--vermil); }
/* 見出しの 当日の本数（グループ・店舗別）と［ドライバー詳細］［出勤登録］（headcount-2026-10-03。利用者「このスペースに　当日の本数　グループ
   店舗別　求人通知横に　ドライバー詳細　出勤登録　ボタンを配置」）。本数は出力モニターと右の道具の間の空きいっぱいに広がり、中身は右寄せ
   （ボタンのすぐ左）。幅が足りなければ本数の中で折り返し、ボタン・通知・ログアウトは右に残す（本数の幅は 1 行の割り付けに数えない＝
   flex-basis 0。240px より狭くなるときだけ右の道具が 2 段目へ回り、そのときも右寄せ）。グループの合計は青の大きめの数、主店舗は名前の右に数。
   ボタンはログアウトと同じ形で通知の札の左 */
.headcount { flex: 1 1 0; min-width: 240px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
             gap: 3px 3px; font-size: 11px; color: var(--dim); }
.headcount:empty { display: none; }
/* 見やすく（2026-10-04 利用者「もっと見やすく」。hcbig-2026-10-04）。当日と日付は地なし（同じ日 利用者「日付は背景不要で行去ろえる」）、
   グループの合計は青い地に大きな青い数、店ごとに札（地は店舗の色＝タスク表のキャスト名の地と同じ。色の無い店は薄い灰。名前と数を離す・
   数は太く大きめ）。0 本の店は薄く、店なしは点線の枠。
   上下は帯の真ん中にそろえる（headmid-2026-10-19 利用者「UI　がずれてる」「上下　中央」）。前は .headcount を align-items: baseline に
   していたため、字の並びの組（当日・グループ・店の札）が行の上端に寄り、2 段の週間出勤予定の箱・通知の札より 4〜5px 上に出ていた。
   当日の札と店の札は中の字の高さが同じなので、真ん中にそろえても字の並びはそろったまま（グループの札は下の余白で合わせる）。
   暗い画面では店の色を下地に寄せる（明るい色が光らないように・字は画面の字の色のまま） */
.headcount .hclab { display: inline-flex; align-items: baseline; gap: 4px; padding-right: 2px; font-weight: 600; white-space: nowrap; }
.headcount .hclab b { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* 上 1px・下 3px（headmid-2026-10-19）：店の札（上下 2px＋枠 1px）と同じ高さにし、字の並びも店の札とそろえる。17px の数で字の上が
   高いぶん、下を足す（前は上下 1px で、札より下が 2px 短かった） */
.headcount .hcgroup {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 1px 8px 3px; border-radius: 4px; white-space: nowrap;
  background: var(--accent-wash); color: var(--text);
}
.headcount .hcgroup .hcname { font-size: 12px; font-weight: 700; }
.headcount .hcgroup .hcnum { margin-left: 3px; font-size: 17px; line-height: 1.1; font-weight: 700; color: var(--accent);
                             font-variant-numeric: tabular-nums; }
.headcount .hcgroup .hcunit { font-size: 11px; color: var(--dim); }
.headcount .hcchip {
  --hc-mix: 100%;
  display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; color: var(--text);
  background: color-mix(in srgb, var(--hc-bg, var(--panel2)) var(--hc-mix), var(--panel));
  border: 1px solid color-mix(in srgb, var(--hc-bg, var(--line)) 45%, var(--line));
}
:root[data-theme="dark"] .headcount .hcchip { --hc-mix: 22%; }
.headcount .hcchip .hcname { font-size: 12px; }
.headcount .hcchip .hcnum { font-size: 14px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.headcount .hcchip.zero { opacity: .5; }
.headcount .hcchip.hcloose { border-style: dashed; }
.headcount .hcsep { width: 1px; height: 16px; align-self: center; margin: 0 2px; background: var(--line); }
/* 1 週間の出勤の人数（headweek-2026-10-11 利用者「ヘッダー　当日　10/11　の左に　１週間分の　各日にちの出勤の人数を表示」）。当日の左に 7 日の
   小さな箱：上に 月/日 と曜日（土は青・日は赤）、下に人数。当日の日は青い枠と地、0 人の日は薄く。中が 2 段なので、箱の並びはほかの札の
   字の並び（ベースライン）ではなく上下の真ん中にそろえる。当日の札との間を少し空ける */
.headcount .hcweek { display: inline-flex; align-items: center; align-self: center; gap: 2px; margin-right: 8px; white-space: nowrap; }
/* 札「週間出勤予定」は 2 段（headweek3-2026-10-11）：下に小さく選んでいる店の名前か全店。横に並べると見出しが 2 段に折れるため。箱の側へ寄せる */
.headcount .hcweek .hcwlab { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.15; }
.headcount .hcweek .hcwlab small { font-size: 10px; font-weight: 600; color: var(--text); }
.headcount .hcday {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 36px; padding: 1px 3px 2px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--panel); line-height: 1.1;
}
.headcount .hcday.now { border-color: var(--accent); background: var(--accent-wash); }
.headcount .hcday.zero { opacity: .5; }
.headcount .hcday .hcdd { font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
.headcount .hcday .hcdd i { font-style: normal; margin-left: 1px; }
.headcount .hcday .hcdd i.sat { color: var(--steel); }
.headcount .hcday .hcdd i.sun { color: var(--vermil); }
.headcount .hcday .hcppl { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }   /* 店の札の数と同じ大きさ */
.headcount .hcday .hcppl small { margin-left: 1px; font-size: 9.5px; font-weight: 400; color: var(--dim); }
.rail nav { display: flex; flex-direction: column; }
/* 字は 13px・行は 28px（字 20px＋上下 4px）でそろえる（navtag-2026-10-07 利用者「文字サイズや間隔を整える」。前は 12px で行の高さは字なり） */
.rail nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 12px; color: var(--dim); font-size: 13px; line-height: 20px;
  border-left: 2px solid transparent;
}
.rail nav a:hover { color: var(--text); background: var(--menu-hover); }
.rail nav a.on { color: var(--text); background: var(--menu-on); border-left-color: var(--accent); font-weight: 500; }
.rail nav a .n { font-family: var(--mono); font-size: 10px; color: var(--faint); }
/* 左メニューのカタカナ（navLabel）。前の書体（IBM Plex Sans JP）では漢字より一回り小さく描かれたので 13px にしていた
   （2026-09-29 夜 利用者「タスク表が小さい 伝票一覧と同じ大きさに変更」）。2026-10-02 に書体を小杉丸ゴシックへそろえた
   （fontall-2026-10-02）。小杉丸ゴシックはカタカナも漢字と同じ大きさで描かれるので、ほかの字と同じ大きさに戻す（包みは残す） */
.rail nav a .kn { font-size: inherit; line-height: inherit; }
/* 店舗のページを開いている間の「店舗」の ▸／▾（押すと一覧を開け閉めする。2026-09-22） */
.rail nav a .n.navcaret { font-size: 12px; color: var(--dim); }
.rail nav a:hover .n.navcaret { color: var(--accent); }
.rail nav a.wip { color: var(--faint); }
/* 左メニューのいちばん上：「伝票発行」の釦（2026-09-27 利用者）。出力モニターは 2026-09-30 から全ページの見出しへ */
/* 下は 17px（navalign-2026-10-08 利用者「タスク表は　タスクの伽うsとと同行くらい」＝左メニューの「タスク表」の行をタスク表の「キャスト」の見出しの
   帯と同じ高さに。上の帯が 1 段の画面で 9px 足りなかった。前は 8px） */
.navslip { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px 17px; }
.navslip .btn { width: 100%; }
.railgroup { margin-top: 12px; padding: 5px 14px 3px; font-size: 10px; letter-spacing: .06em; color: var(--faint); }
/* 「便利ツール」「システム設定」のたたみ（navtools-2026-10-07 利用者「店舗一覧と同じしまい方」）。見出しの行は店舗一覧と同じ形（右に ▸／▾）で、
   上に少し間を空けてまとまりを分ける。中は店舗の一覧（.navtree）と同じく、字下げして左に細い線 */
/* たたむ見出しの上の間はやめ、ほかの行と同じ間隔に（navtag-2026-10-07 利用者「文字サイズや間隔を整える」。前は margin-top: 8px） */
.rail nav a.navfold { margin-top: 0; }
/* 行の左のまとまりの色の札（navtag-2026-10-07 利用者「左側にわかりやすいように　色付きのタグを付ける」）。札は細い縦の帯。色は data-tag ごと
   （業務 青・台帳 緑・会計関係 琥珀・便利ツール 紫・システム設定 灰）。札のぶん字を右へ寄せる。たたむ見出しの中の行も同じ */
.rail nav a[data-tag] { position: relative; padding-left: 26px; }
.rail nav a[data-tag]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 4px; height: 14px; margin-top: -7px; border-radius: 2px; background: var(--navtag); }
.rail nav a[data-tag="work"] { --navtag: var(--accent); }
.rail nav a[data-tag="ledger"] { --navtag: var(--jade); }
.rail nav a[data-tag="acct"] { --navtag: var(--amber); }
.rail nav a[data-tag="tools"] { --navtag: var(--violet); }
.rail nav a[data-tag="sys"] { --navtag: var(--faint); }
/* 左メニューの便利ツールはリモコンと同じ丸いアイコンと字（navtools3-2026-10-08 利用者「便利ツールはリモコンと同じ　表記の〇　アイコン文字で　メニュー左の
   システム設定したに並べる」）。白い丸・枠・影・アイコンの色（--tone）・字は remote.css の .rc-item に合わせ、左メニューの幅に 3 つずつ並ぶ大きさ（50px） */
/* 段ごとに真ん中へ（navalign-2026-10-08 利用者「便利ツールアイコンは　もうちょっと中央」。前は 3 列の格子で 2 段目が左寄せだった） */
/* メニューの最後の項目と線の間（margin-top）・線と丸の間（padding-top）は広めに（navgap-2026-10-09 利用者「メニュー　と　メニュー下の線　と
   便利ツール　の空白をもっと作る」。前は 4px と 10px） */
.navtools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; padding: 18px 0 10px; margin-top: 14px; border-top: 1px solid var(--line); }
.navtools .navtool { flex: none; }
.navtool {
  width: 50px; height: 50px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--text); cursor: pointer;
  display: grid; place-content: center; justify-items: center; gap: 1px; box-shadow: 0 2px 8px var(--shadow-sign, rgba(16, 24, 40, .16));
}
.navtool svg { width: 16px; height: 16px; color: var(--tone, var(--dim)); }
.navtool span { font-size: 9px; line-height: 1.15; color: var(--dim); text-align: center; white-space: nowrap; }
.navtool:hover { border-color: var(--accent-edge); }
.navtool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navfoldbox { display: flex; flex-direction: column; margin: 0 0 6px 14px; padding: 2px 0; border-left: 1px solid var(--line); }
/* 左のメニューの店舗の一覧（2026-09-22 利用者「左メニューの店舗が店舗を展開すればよい」） */
.navtree {
  display: flex; flex-direction: column; margin: 0 0 6px 14px; padding: 2px 0;
  border-left: 1px solid var(--line);
}
.rail nav .navtree a.navstore {
  justify-content: flex-start; gap: 2px; padding: 4px 8px 4px 2px; font-size: 11px;
  border-left: 2px solid transparent;
}
.rail nav .navtree a.navstore.on {
  color: var(--text); background: var(--menu-on); border-left-color: var(--accent); font-weight: 500;
}
.rail nav .navtree a.navstore.kid { padding-left: 16px; font-size: 10.5px; color: var(--faint); }
.rail nav .navtree a.navstore.kid.on { color: var(--text); }
.navtree a[hidden] { display: none !important; }
.navtree .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* キャストの下の主店舗の一覧を読み込んでいる間（2026-09-22） */
.navtree .navwait { padding: 4px 8px 4px 18px; font-size: 10.5px; color: var(--faint); }
/* キャストの下の主店舗の行：店の名前（その店のキャスト）と「出勤」（その店のキャストの出勤）（2026-09-22 利用者） */
/* 左の欄は --rail-w（中の幅は 175px）。店の名前が切れないよう、つまみ・▸ の空きは持たず、数と「出勤」は小さめに */
.navtree[data-pick] { margin-left: 10px; }
.navtree .navpick { display: flex; align-items: center; }
.rail nav .navtree .navpick > a.navstore { flex: 1; min-width: 0; padding: 4px 4px 4px 6px; }
.navtree .navpick .n { font-size: 9.5px; }
.navtree .navpick.mine > a.navstore { color: var(--text); }
/* キャストの下のグループと主店舗（2026-09-30 利用者「グループ　右下に主店舗　サブ店舗は表示しない」）。主店舗はグループの右下へ字下げ */
.rail nav .navtree .navpick.navgroup > a.navstore { font-weight: 500; }
.rail nav .navtree .navpick.navgstore > a.navstore { padding-left: 16px; }
/* キャストの一覧の帯：グループのプルダウンと店舗（いくつでも）。非掲載の行は薄く、源氏名の横に「非掲載」（2026-09-30 利用者） */
.masterbar .mcastpick { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.masterbar .mgroup { max-width: 190px; }
/* キャストの探す欄は源氏名と本名の 2 つ（2026-09-30 利用者「源氏名　本名　は別ボックス」）。並ぶので 1 つずつは短めに。
   検索の箱（castsearch-2026-10-05 利用者「源氏名 本名検索が 検索ボックスとわかりにくい」）：白い地に枠・頭に虫めがねと名札。
   中の欄は枠も地も持たず、箱を押せば打てる。打っている間は箱の枠が差し色 */
.masterbar .castsearch {
  flex: 0 1 220px; min-width: 170px; height: var(--barh); box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; cursor: text;
  color: var(--faint); background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
}
.masterbar .castsearch:focus-within { border-color: var(--accent-dim); }
/* 名札（源氏名・本名）は地のある札で、虫めがねも中に入れる（cstag-2026-10-05 利用者「アイコンと源氏名がずれてる 源氏名 本名部分は
   背景色がないとわかりづらい」）。字の行の高さを字の大きさちょうど（line-height 1）にして、字と虫めがねを同じ真ん中にそろえる。
   小杉丸ゴシックの字はそれでも半ピクセルほど上に描かれるので、虫めがねを 0.5px 上げる */
.masterbar .castsearch { padding-left: 3px; }
.masterbar .castsearch .csname {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; line-height: 1;
  font-size: 11.5px; font-weight: 600; color: var(--dim); background: var(--panel3); border-radius: 4px;
}
.masterbar .castsearch .csicon { flex: none; width: 14px; height: 14px; transform: translateY(-0.5px); }
.masterbar .castsearch > input.castq[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px;
}
.masterbar .castsearch > input.castq[type="search"]:focus { outline: none; background: transparent; }
/* キャスト一覧の［ヘブンネット表示・非表示を一括反映］（listbulk-2026-10-05）。「一覧｜所属」の行の右端。
   ［ヘブンネットへ反映］と同じ橙の地に白い太字 */
.pagetabs .pagetool { margin-left: auto; align-self: center; padding-bottom: 4px; }
.pagetabs .btn.hvicon {
  height: 28px; padding: 0 14px; font-size: 12px; font-weight: 700; white-space: nowrap;
  border-color: #f07800; background: linear-gradient(#ff9500, #ff8100); color: #fff;
}
.pagetabs .btn.hvicon:hover:not(:disabled) { border-color: #e06c00; background: linear-gradient(#ff8a00, #f07300); color: #fff; }
.pagetabs .btn.hvicon:disabled { opacity: .6; cursor: progress; }
/* 一括反映の結果の窓（fruit-2026-10-17）。釦の下・右寄せで重ねて出し、✕ で閉じるまで残る */
.pagetabs .pagetool { position: relative; }
.bulkwin {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 40; width: min(560px, 92vw); max-height: 70vh; overflow: auto;
  padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14); color: var(--text); font-size: 12px; line-height: 1.6; text-align: left; white-space: normal;
}
.bulkwin p { margin: 3px 0; }
.bulkwin .bwtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.bulkwin .bwclose { border: 0; background: none; color: var(--dim); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.bulkwin .bwclose:hover { color: var(--text); }
.bulkwin .bwhead { font-weight: 700; }
.bulkwin .bwstore { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line2); }
.bulkwin .bwsub { padding-left: 1em; }
.bulkwin .bwfaint { color: var(--dim); }
.bulkwin .bwid { margin: 0 2px 0 3px; color: var(--dim); font-size: 10.5px; }
.bulkwin .bwerr { color: var(--vermil); }

.masterbar .mstores { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grid tr.unlisted > td { opacity: .5; }
.grid .pill.unlisted { margin-left: 4px; }
/* ［出勤］は店名の字の高さにそろえる（castsearch-2026-10-05 利用者「帯に対して 下寄席だが 中央でないと 店舗名とあわない」）。
   箱は帯の真ん中にあるが、店名の字は書体の作りで帯の真ん中より 1px 上に描かれるので、［出勤］も 1px 上げる */
.rail nav .navtree a.navshift {
  flex: none; margin: 0 4px 0 2px; padding: 0 5px; font-size: 9.5px; line-height: 1.6;
  border: 1px solid var(--line); border-radius: 3px; color: var(--dim); background: var(--menu);
  position: relative; top: -1px;
}
.rail nav .navtree a.navshift:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--menu-hover); }
.rail nav .navtree a.navshift.on {
  color: var(--accent); border-color: var(--accent-dim); background: var(--accent-wash); font-weight: 500;
}
/* つまみはいつも薄く出しておく（指の端末でも並べ替えられるように） */
.navtree .grip {
  flex: none; width: 14px; padding: 0; border: 0; background: none; line-height: 1;
  font-size: 10px; color: var(--line); cursor: grab;
}
.navtree a.navstore:hover .grip, .navtree .grip:focus-visible { color: var(--faint); outline: none; }
.navtree .navfold {
  flex: none; width: 16px; padding: 0; border: 0; background: none; line-height: 1;
  font-size: 9.5px; color: var(--dim); cursor: pointer;
}
.navtree .navfold:hover { color: var(--accent); }
/* サブ店舗のある店の「展開」チップ（押すと中の店を開き「閉じる」に。もう一度押すと閉じる。2026-09-29 夜 利用者「ダミーに 展開 チップを
   表示して クリックで展開 再度クリックで閉じる」） */
.rail nav .navtree .navchip {
  flex: none; margin-left: 4px; padding: 0 6px; font: inherit; font-size: 9.5px; line-height: 15px; white-space: nowrap;
  color: var(--accent); background: var(--menu); border: 1px solid var(--accent-dim); border-radius: 8px; cursor: pointer;
}
.rail nav .navtree .navchip:hover { background: var(--accent-wash); }
.rail nav .navtree .navchip[aria-expanded="true"] { color: var(--dim); border-color: var(--line); }
.rail nav .navtree a.navadd {
  justify-content: flex-start; margin-top: 4px; padding: 5px 8px 5px 18px; font-size: 11px;
  color: var(--accent);
}
.rail nav .navtree a.navadd:hover { background: var(--accent-wash); }
/* 非表示の店舗（2026-09-22 利用者「非表示の場合は店舗一覧に表示しない。非表示を表示ボタンを作る」）。
   「非表示の店舗も表示」を押している間だけ、行ごと薄くして「非表示」の札を付けて出す（2026-09-29 夜 利用者「非表示は 薄めで表示」。
   前は名前の字だけ薄かった）。出している間も並べ替えられる */
.rail nav .navtree a.navstore.gone { opacity: .5; }
.navtree .navgone {
  flex: none; margin-left: 4px; padding: 0 5px; font-size: 9.5px; line-height: 15px;
  color: var(--faint); border: 1px solid var(--line); border-radius: 8px;
}
.navtree .navhidden {
  display: block; width: 100%; margin-top: 2px; padding: 4px 8px 4px 18px; text-align: left;
  font-size: 10.5px; color: var(--faint); background: none; border: 0; border-radius: 4px; cursor: pointer;
}
.navtree .navhidden:hover { color: var(--text); background: var(--panel2); }
.navtree .navhidden.on { color: var(--accent); }
/* 店舗ページの名前の横の「非表示」の札 */
.recordbar .hiddenmark {
  margin-left: 8px; padding: 1px 8px; font-size: 10px; color: var(--vermil);
  border: 1px solid var(--vermil-dim); border-radius: 10px;
}
.navtree a.navstore.dragging { opacity: .45; }
.navtree a.navstore.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.navtree a.navstore.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.railfoot { margin-top: auto; padding: 10px 14px; font-size: 9.5px; color: var(--faint); border-top: 1px solid var(--line2); }
.railfoot b { color: var(--jade); font-weight: 500; font-family: var(--mono); }
.railfoot.bad b { color: var(--vermil); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── 上の帯 ───────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
.seg { display: flex; gap: 2px; background: var(--panel3); padding: 2px; border-radius: 5px; }
.seg button { padding: 2px 9px; font-size: 11px; border-radius: 4px; color: var(--dim); white-space: nowrap; }
.seg button.on { background: var(--panel); color: var(--text); font-weight: 500;
                  box-shadow: 0 0 0 1px var(--line); }
/* タスク表の店の釦の「即ヒメ残 N」（2026-09-29）。2026-10-02 利用者「即ヒメをもっと見やすく」（sokubig-2026-10-02）：
   桃の地に白い字の丸い札にして、数は大きく太く。あと 0 人（もう登録できない）は灰の地（前は 0 人だけが桃の地で、残りのある店の方が
   目立たなかった）。古い・読めていないときは薄く */
.seg button .kleft {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px 1px 7px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; line-height: 16px; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--soku-sk); box-shadow: none; vertical-align: 1px;
}
.seg button .kleft .knum { font-size: 13.5px; font-weight: 800; line-height: 16px; }
/* 札の大きさは数字 1 桁で決まった形にする。出ない日は .blank の見えない札が同じ場所を取る（sokuslot-2026-11-03）。2 桁のときだけ字の分広がる */
.seg button .kleft .knum { min-width: .52em; text-align: center; }
.seg button .kleft.blank { visibility: hidden; }
.seg button .kleft.zero { background: #8a8f98; }
.seg button .kleft.stale { opacity: .45; }
select#storepick {
  font-size: 11px; max-width: 190px; color: var(--dim);
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px;
}
select#storepick:hover { color: var(--text); border-color: var(--faint); }
.datepick { display: flex; align-items: center; gap: 4px; }
.datepick button.step {
  width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 4px;
  color: var(--dim); font-family: var(--mono); line-height: 1;
}
.datepick button.step:hover { color: var(--text); border-color: var(--faint); }
.datepick input[type="date"], .datepick input[type="month"] {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
  color-scheme: var(--scheme);
}
.datepick .dow { font-size: 11px; color: var(--dim); min-width: 1.4em; }
.kpis { display: flex; gap: 16px; margin-left: auto; }
.viewrefresh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.viewrefresh .btn { min-width: 104px; white-space: nowrap; }
.viewrefreshnote { color: var(--dim); font-size: 11px; max-width: 32em; overflow-wrap: anywhere; }
.viewrefreshnote.bad { color: var(--vermil); }
/* ［最新情報］の釦（newsbtn-2026-10-25 #183 利用者「アイコンをUIに合うアイコンに変更」「ボタンの色をUIに合わせて変更」）。印は線の SVG（REFRESH_SVG）で
   字の高さの真ん中にそろえる。色は画面の決まりの青（--accent）の枠と字・淡い青の地（.btn.go と同じ組み合わせ）。暗い画面は変数が替わる。
   読み直している間（aria-busy）は印を回す（動きを減らす設定なら回さない）。キャスト一覧の［最新情報］も同じ釦 */
.btn.viewrefreshbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 92px; white-space: nowrap;
  border-color: var(--accent-dim); color: var(--accent); background: var(--accent-wash);
}
.btn.viewrefreshbtn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash-2); }
.btn.viewrefreshbtn .vricon { flex: none; }
.btn.viewrefreshbtn[aria-busy="true"] .vricon { animation: vrspin 1s linear infinite; }
@keyframes vrspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.viewrefreshbtn[aria-busy="true"] .vricon { animation: none; } }
/* 一言が空のときは場所を取らない（タスク表では一言だけが［ヘブン比較］の右に残るので、空でも帯の gap が 2 つ分空いていた） */
.viewrefreshnote:empty { display: none; }
.kpi { text-align: right; }
.kpi b { display: block; font-family: var(--mono); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 10px; letter-spacing: .02em; color: var(--dim); }
.kpi.amber b { color: var(--accent); }

.body { flex: 1; min-height: 0; overflow: auto; }
.pad { padding: 10px 14px 22px; }
/* 受付台帳は表の箱を本文の高さいっぱいに広げ、縦も表の中で流す（2026-09-28 利用者「横スライドは常にページ下に固定表示」）。
   横のスライドは表の箱の下の端＝いつも画面の下。見出しの帯は表の中で上に貼り付く */
.pad.boardpad { height: 100%; display: flex; flex-direction: column; padding-bottom: 8px; }
.pad.boardpad > .board { flex: 1 1 auto; min-height: 0; }
/* キャスト一覧（一覧・所属のタブ）も、タブ・帯・表の見出しの行を上に残し、表の行だけを送る（castfix-2026-10-11 利用者「キャスト一覧　部分は固定」）。
   本文の高さいっぱいの縦の箱にし、表の箱だけが上下・左右に送る（横のスライドはいつも画面の下）。見出しの行は表の箱の上に貼り付く
   （table.grid thead th の sticky）。題と件数の帯（#top）はもともと本文の外。高さの低い画面は今までどおり本文ごと送る（app.js の listScroller）*/
.pad.listpad { height: 100%; display: flex; flex-direction: column; padding-bottom: 8px; }
.pad.listpad > * { flex: none; }
.pad.listpad > .tablewrap { flex: 1 1 auto; min-height: 0; }
@media (max-height: 560px) {
  .pad.listpad { height: auto; display: block; }
  .pad.listpad > .tablewrap { overflow-y: visible; }
}

/* ── 表 ───────────────────────────────────────────────────────── */
.tablewrap { overflow: auto; }
/* 表は本文の幅に引き延ばさず、中身の幅まで左へ詰める（listpack-2026-10-12 利用者「もっと全体的に左に詰めたい」「キャスト一覧だけではなくて全ページ
   ひきのばすのではなくて」）。前は width 100% で、広い画面では列どうしが離れて 1 行を目で追いにくかった。着信履歴（.callgrid。コメントの欄が
   残りを取る）と、折り返す表（.sheetgrid。table-layout fixed）は幅いっぱいのまま */
table.grid { border-collapse: collapse; width: auto; }
table.grid.callgrid, table.grid.sheetgrid { width: 100%; }
table.grid thead th {
  position: sticky; top: 0; z-index: 2; background: var(--head); text-align: left;
  font-size: 10.5px; letter-spacing: .02em; color: var(--dim); font-weight: 500;
  padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.grid td { padding: 4px 8px; border-bottom: 1px solid var(--line2); vertical-align: middle;
                white-space: nowrap; }   /* 名前や日付を 2 行に割らない。表は横に送って読む */
table.grid tbody tr:hover td { background: var(--panel2); }
/* ページで開いた行から一覧へ戻ったときの印（2026-09-23 利用者 案B） */
table.grid tbody tr.on td { background: var(--accent-wash); }
/* キャスト一覧の写真と指名の率（2026-09-25 利用者） */
.castthumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--line); background: var(--panel2); display: block;
}
.noimg {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  font-size: 8px; letter-spacing: .02em; color: var(--faint); text-align: center;
  border: 1px dashed var(--line); border-radius: 4px; background: var(--panel2);
}
table.grid td .rate { white-space: nowrap; }
table.grid td .rate b { font-weight: 600; }
table.grid tbody tr.dead td { color: var(--faint); }
/* 台帳の一覧は見出しも中身も左寄せ（2026-09-25 利用者「項目も内容もずれが生じるから全て左寄せ」）。
   数字だけ右へ寄せると、見出しと中身が左右に離れて読みづらいため。数字の形（等幅・桁そろえ）はそのまま */
table.grid th.num, table.grid td.num { text-align: left; }
/* 中身が短い列（キャスト一覧の給料設定・カップ数。app.js の LIST_CENTER）は見出しも中身も中央（ctrcol-2026-10-17 利用者「給料設定のタイトルはが中央で
   内容が左だから おかしい カップ数も内容は 中央寄席」）。見出しが 4 文字で中身が 1〜3 文字だと、左寄せのままでは見出しだけ右へ広がって見えるため */
table.grid th.ctr, table.grid td.ctr { text-align: center; }
/* 台帳の一覧（キャスト・スタッフ・顧客・店舗など）は列の間を 10px（詰めても値がくっつかないように。listpack-2026-10-12）。表そのものの幅は上の
   table.grid の決まり（中身の幅まで）。削除の釦は最後の列のすぐ右に来る（表が本文より狭いあいだは右端に貼り付かない） */
.pad > .tablewrap > table.grid:not(.callgrid) th, .pad > .tablewrap > table.grid:not(.callgrid) td { padding-left: 10px; padding-right: 10px; }
/* キャスト一覧だけ行を低く（listpack-2026-10-12 利用者「E とこの詰める案で　行をつめるのはキャスト一覧だけ」）：写真を 32px、上下の余白 3px で
   行は 49 → 39px。ほかの一覧の行の高さは変えない */
.pad.listpad .castthumb, .pad.listpad .noimg { width: 32px; height: 32px; }
.pad.listpad table.grid td { padding-top: 3px; padding-bottom: 3px; }
.tm { font-family: var(--mono); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
.sub { color: var(--dim); font-size: 11px; }
.who { font-weight: 500; white-space: nowrap; }
.who.none { color: var(--faint); font-weight: 400; }
.clip { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.edge { border-left: 3px solid transparent; padding-left: 8px; }
td.edge.sf3 { border-left-color: var(--vermil); }
td.edge.sf2 { border-left-color: var(--steel); }
td.edge.sf1 { border-left-color: var(--line); }

.pill {
  display: inline-block; font-size: 9.5px; padding: 1px 6px; border-radius: 3px;
  white-space: nowrap; border: 1px solid var(--line); color: var(--dim);
}
.pill.sf3 { color: var(--vermil); border-color: var(--vermil-dim); }
.pill.sf2 { color: var(--steel); border-color: var(--steel-dim); }
.pill.sf1 { color: var(--dim); border-color: var(--line); }
.pill.card { color: var(--violet); border-color: var(--violet-dim); }
.pill.ok { color: var(--jade); border-color: var(--jade-dim); }
.pill.warn { color: var(--vermil); border-color: var(--vermil-dim); }
/* スタッフの免許証・任意保険：残り30日未満と期限切れを赤字と点滅する札で示す。 */
.staff-expiry { --expiry-red: #c62828; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
:root[data-theme="dark"] .staff-expiry { --expiry-red: #ff9a9a; }
.staff-expiry.is-urgent { color: var(--expiry-red); font-weight: 600; }
.staff-expiry.is-urgent .staff-expiry-chip {
  color: var(--expiry-red); border-color: currentColor;
  background: color-mix(in srgb, var(--expiry-red) 6%, var(--panel));
  animation: staff-expiry-pulse 1.6s ease-in-out infinite;
}
@keyframes staff-expiry-pulse {
  50% { background: color-mix(in srgb, var(--expiry-red) 22%, var(--panel));
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--expiry-red) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .staff-expiry.is-urgent .staff-expiry-chip { animation: none; }
}
/* まだできていないことの札（キャスト一覧の 連携未・OFF・未設定。alertchip-2026-10-12 利用者「行は大きくせずに　チップは大き目で目立つように」→「OFF も大きくしてから」）。
   赤い塗りに白い太字で 24px の高さ（一覧の行は写真の 40px で決まるので行は伸びない） */
.pill.alert {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--vermil); border-color: var(--vermil); border-radius: 4px; line-height: 1;
}
/* 着信履歴のサンプルの札（callsample-2026-10-11）。点線の枠で本物と見分ける */
.pill.sample { color: var(--dim); border-style: dashed; background: var(--panel2); }
/* 端末の画面の「未保存」の札（data-dirty）。替えていない行は隠す（.pill の display が [hidden] より強く、どの行にも出ていた。devowner-2026-10-11） */
.pill[data-dirty][hidden] { display: none; }
/* 端末の［削除］と、削除の下書きの「削除する」の札は薄い赤（devdel-2026-10-18 答え「薄い赤の釦＋説明 1 行」。伝票の窓の［顧客解除］と同じ色） */
.btn.devdel, .pill.devgone { color: #a8341f; background: #fbe1dc; border-color: #eaa99b; }
.btn.devdel:hover { background: #f7cec6; border-color: #a8341f; }
:root[data-theme="dark"] .btn.devdel, :root[data-theme="dark"] .pill.devgone { color: #f0a08c; background: rgba(226, 103, 74, .18); border-color: #7a3a2e; }
:root[data-theme="dark"] .btn.devdel:hover { background: rgba(226, 103, 74, .3); border-color: #e2674a; }
/* 受付台の表の本家の写しの行の印（見るだけ。2026-09-27） */
.pill.mind { color: var(--faint); border-color: var(--line); font-size: 9.5px; }
/* 伝票一覧の状態（伝票の状態の名前と色。タスク表の帯の地と同じ。2026-09-30 利用者） */
.pill.stat { color: var(--tint-ink); border-color: transparent; }
.pill.stat.rev { color: var(--tint-ink-rev); }

.nowbar {
  display: flex; align-items: center; gap: 8px; padding: 2px 10px;
  background: linear-gradient(90deg, var(--accent-wash-2), transparent);
  border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent-edge);
}
.nowbar b { font-family: var(--mono); font-size: 10px; color: var(--accent); font-weight: 500; }
.nowbar span { font-size: 10px; color: var(--accent); opacity: .8; }

/* ── 時間軸ボード ─────────────────────────────────────────────── */
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 9px; font-size: 10.5px; color: var(--dim); align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.board { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: auto; }
/* 格子の幅は中身（名前 128px＋時間）に合わせる（2026-09-27）。画面の幅止まりだと、はみ出した時間の側へ送ったときに
   左に貼り付く名前の欄が格子の箱と一緒に流れて切れた（貼り付けるのは格子の箱の中だけのため） */
/* 名前の欄は 136px（2026-09-27 右に 2×2 のアイコンを置いたぶん、いちばん長い名前「M　みどり （B）」が 6px 足りなかった。前は 128px）。
   その右に 備考 38px・日記 38px・出勤状況 76px（同じ日 利用者「キャストの横に このように 備考と出勤状況を配置」→「備考はもっと 狭く
   月/日 が入る幅」「出勤状況 ももうちょっと狭く 20:00〜30:00 が入る幅」「備考と出勤状況の間に 日記」。10px の字で「09/29」が 29px・
   「20:00〜30:00」が 67px）。
   2026-09-28 利用者「出勤状況 はもう少し幅を増やす 備考とキャストの間に 係数を表示」で、名前と備考の間に 係数 32px（「650」が 17px・
   見出し「係数」が 19px）、出勤状況は 76 → 96px。幅は --bw-* に 1 か所で持ち、貼り付く位置（left）はその足し算 */
/* タスク表の中の字は、伝票の帯と同じ 小杉丸ゴシック（--board-font）にそろえる（2026-09-29 利用者「タスク表内の文字は 西区菊井2丁目2-6
   プレサンス名古屋ルクソリア806 などの伝票と同じフォントに変更」。前は 名前・出勤状況・係数・備考・日記・見出しは画面の書体、時刻の見出しは等幅） */
.bgrid {
  /* 名前の欄は 150px（fontsize-2026-10-07 名前の字を 12px にしたら、いちばん長い「M　いおり （B）」「M　みどり （B）」が 4px 足りなかった。
     前は 144px（2026-09-29 字を小杉丸ゴシックにしたら「M　みどり （B）」が 5px 足りなかった。その前は 136px）） */
  --bw-name: 150px; --bw-coef: 32px; --bw-memo: 38px; --bw-diary: 38px; --bw-state: 96px;
  display: grid; width: max-content; font-family: var(--board-font);
  grid-template-columns: var(--bw-name) var(--bw-coef) var(--bw-memo) var(--bw-diary) var(--bw-state) max-content;
}
/* 係数・備考・日記・出勤状況も名前と同じく左に貼り付ける（横に送っても残る）。貼り付く位置は左の列の幅の合計 */
.bcorner.bck, .bcoef { left: var(--bw-name); }
.bcorner.bc2, .bmemo { left: calc(var(--bw-name) + var(--bw-coef)); }
.bcorner.bcd, .bdiary { left: calc(var(--bw-name) + var(--bw-coef) + var(--bw-memo)); }
.bcorner.bc3, .bstate { left: calc(var(--bw-name) + var(--bw-coef) + var(--bw-memo) + var(--bw-diary)); }
/* 見出しの 係数・備考・日記・出勤状況 は中央寄せ（2026-09-27 利用者）。細い列なので左右の余白と字の間を詰める */
.bcorner.bck, .bcorner.bc2, .bcorner.bcd, .bcorner.bc3 { padding: 5px 2px; text-align: center; letter-spacing: 0; }
/* 見出しの「係数」は押して並べ替える（2026-09-29 利用者「係数でソート」）。見出しの字のまま、押せると分かるよう下線。並べているあいだは ▼▲ */
.bcorner .bsort {
  font: inherit; color: inherit; letter-spacing: inherit; background: transparent; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.bcorner .bsort.on { text-decoration: none; font-weight: 700; }
.bcorner .bsort:focus-visible { outline: 2px solid var(--board-head-ink); outline-offset: 1px; }
.bcorner .bsortmark { margin-left: 1px; font-size: 8px; }
/* 見出しの「キャスト」の横の「並び解除」（2026-09-29 利用者「タイトルキャスト横に 並び解除 ボタンを作る」）。見出しの帯の上で読める白い枠。
   解除するものが無いときは薄く */
.bcorner .bunsort {
  margin-left: 8px; padding: 1px 6px; border: 1px solid var(--board-head-ink); border-radius: 3px; background: transparent;
  color: var(--board-head-ink); font: inherit; font-size: 9px; letter-spacing: 0; cursor: pointer; vertical-align: 1px;
}
.bcorner .bunsort:hover:not(:disabled) { background: color-mix(in srgb, var(--board-head-ink) 18%, transparent); }
.bcorner .bunsort:disabled { opacity: .35; cursor: default; }
.bcorner .bunsort:focus-visible { outline: 2px solid var(--board-head-ink); outline-offset: 1px; }
.bcoef, .bmemo, .bdiary, .bstate {
  position: sticky; z-index: 2; height: 48px; background: var(--panel);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
}
/* 係数は数だけ（2026-09-28）。桁をそろえて中央に */
/* 係数・備考・日記・出勤状況の字は伝票の帯の場所の行と同じ 12px（2026-09-29 利用者「文字の大きさを 伝票の場所記載の大きさと同じくらいに」。
   前は 係数・備考・出勤状況 10px・日記 9px） */
/* 係数の数は 10px で、下の前回出勤日・本数（12px）より小さい（coefsize-2026-10-06 利用者「係数の文字サイズと　前日本数　は逆の大きさ」。
   前は係数 12px・前回出勤日と本数 10px）。色は元の字の色（同じ日に紫にしたが 利用者「係数は紫辞める　元に戻す」） */
.bcoef { font-size: 10px; color: var(--text); font-variant-numeric: tabular-nums; }
/* 係数は押すと係数を直す小窓（2026-09-30 利用者「係数にリンクを付けて 窓で係数変更できるように」）。押せる係数は下線。係数の無い人は薄い「—」 */
.bcoef .bcoefl {
  font: inherit; color: inherit; background: transparent; border: 0; padding: 0 3px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.bcoef .bcoefl:hover { color: var(--accent); }
.bcoef .bcoefl.none { color: var(--faint); text-decoration: none; }
/* 初回オキニトーク未設定の係数。ホバー・係数なしの「—」も同じ赤（2026-10-22）。 */
.okini-unset, .bcoef .bcoefl.okini-unset { color: var(--shift-mark); }
.bcoef .bcoefl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
/* 係数の下に 前回出勤日 と その日の本数（2026-10-02 利用者「タスク　係数の下に前回出勤日　本数　を出力」。prevshift-2026-10-02）。
   2 行。字は 12px で、上の係数（10px）より大きい（coefsize-2026-10-06 利用者「係数の文字サイズと　前日本数　は逆の大きさ」。前は 10px） */
.bcoef .bprev, .bcoef .bprevn { font-size: 12px; line-height: 1.15; color: var(--dim); white-space: nowrap; letter-spacing: -.03em; }
.bmemo { gap: 2px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.bmemo .bdot { width: 9px; height: 9px; border-radius: 50%; background: var(--memo-dot); }
/* 備考の丸（2026-09-30）：乗せると備考のカード、押すと備考の小窓（書ける人）。その日の備考がある日は赤い丸（利用者「赤〇に変わる」）。
   乗せやすいよう、丸の行は欄の幅いっぱい */
.bmemo .bmemoh { display: flex; align-items: center; justify-content: center; width: 100%; height: 16px; }
.bmemo .bmemoh.kedit { cursor: pointer; }
.bmemo .bmemoh.kedit:hover .bdot, .bmemo .bmemoh:focus-visible .bdot { box-shadow: 0 0 0 2px var(--accent); }
.bmemo .bmemoh:focus-visible { outline: none; }
.bmemo .bdot.day { background: var(--mark-red); }
/* 次回出勤の日の予約（2026-09-30 利用者「次回出勤の日時の非の予約がある場合は　予有〇件　を赤文字表記」）。日付の下の 3 行目。
   欄が 38px と細いので、字を小さく詰める（「予有12件」まで収まる）。高さ 48px に 丸の行・日付・予有 の 3 段が入るよう、
   日付の行の行間を詰める（前は本文の 1.45 で 3 段がほぼ 48px ちょうどだった） */
.bmemo .bnext { line-height: 1.2; }
.bmemo .bnextrsv { font-size: 9.5px; line-height: 1.1; letter-spacing: -.04em; color: var(--mark-red); font-weight: 700; white-space: nowrap; }
.bstate { font-size: 12px; line-height: 1.3; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 日記は 件数・日付・時刻 の 3 行（今日の投稿は日付を出さず 2 行。2026-09-28 からヘブンの写メ日記）。行に収まるよう字を小さく詰める */
.bdiary { font-size: 12px; line-height: 1.15; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bdiary span:first-child { color: var(--text); }
/* 日記の日付は小さめ（2026-09-30 利用者「日記の日付は小さめにする」）。件数と時刻は 12px のまま */
.bdiary .bdd { font-size: 10px; }
/* 日記が 0 件の日は件数を赤（diaryzero-2026-10-06 利用者「タスク表　日記が０件の場合は赤」）。出勤状況の終了条件と同じ赤（暗い画面は淡い赤）。
   太字はやめた（fontsize-2026-10-07。小杉丸ゴシックは太さが 1 種類で、太字はブラウザが字を太らせて作るので、同じ 12px の「2件」より大きく見えた） */
.bdiary span.bzero { color: var(--shift-mark); }
/* 出勤状況の字の白い縁取りは 2026-09-29 にやめた（利用者「白枠 廃止」。同じ日に「12:00〜18:00 連絡無し は文字に境界線白で」で付けた）。
   代わりに字を 12px に */
.bstate.tinted { color: var(--tint-ink); }
/* 出勤状況のコメントのしるし（2026-09-28 夜 利用者「コメントがある場合は コメントアイコン」）。状態の字の右・字と同じ色 */
.bstate .bnote { display: inline-flex; margin-left: 3px; vertical-align: -1px; font-style: normal; color: var(--mark-red); }
/* 出勤状況は押すとその日の出勤を直せる（出勤を入れる札の人・自社のキャストにつながる行。2026-09-28 利用者「出勤状況は
   キャストの出勤情報と紐づく クリックで」） */
.bstate.sedit { cursor: pointer; }
.bstate.sedit:hover, .bstate.sedit:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }
.bstate.tinted.rev { color: var(--tint-ink-rev); }
/* 見出しの帯は濃い青・白い字（2026-09-28 利用者「などのタイトルは濃い青の UIに合う背景で」） */
.bhours { display: flex; position: sticky; top: 0; z-index: 3; background: var(--board-head); border-bottom: 1px solid var(--board-head); }
/* 時刻の見出しは中央寄せ（2026-09-27 利用者「は中央寄せ」。前は左寄せ） */
.bhours .h { flex: 0 0 auto; font-family: var(--board-font); font-size: 9.5px; font-weight: 500; color: var(--board-head-ink); padding: 5px 0 4px; text-align: center; border-left: 1px solid var(--board-head-line); }
/* 見出しの下の端に 10 分の目盛り（2026-09-27 利用者）。いまの線は見出しには通さない（2026-09-28 利用者「現時刻の赤線は
   伝票やタイトルの下」。前は見出しにも通していた） */
.bhours {
  background-image: repeating-linear-gradient(90deg, var(--board-head-tick) 0 1px, transparent 1px var(--hw10));
  background-size: 100% 5px; background-position: left bottom; background-repeat: no-repeat;
}
.bcorner {
  position: sticky; left: 0; top: 0; z-index: 4; background: var(--board-head);
  border-right: 1px solid var(--board-head-line); border-bottom: 1px solid var(--board-head);
  font-size: 9.5px; font-weight: 500; letter-spacing: .1em; color: var(--board-head-ink); padding: 5px 8px;
}
/* 名前の字は 12px（fontsize-2026-10-07 利用者「文字サイズ　に　違いを感じるけど　気のせい？」→ 答え「2段にそろえて」。タスク表の左の欄の字は
   本文 12px・添え 10px（係数・日記の日付・名前の下の即ヒメ）の 2 段。前は名前だけ 11px で、2026-09-29 に係数・備考・日記・出勤状況を
   12px にしたとき入っていなかった） */
.bname {
  position: sticky; left: 0; z-index: 2; background: var(--panel);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line2);
  padding: 0 8px; display: flex; align-items: center; gap: 6px;
  font-size: 12px; height: 48px; white-space: nowrap; overflow: hidden;
}
.bname b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
/* 押すとキャストの編集ページの窓（2026-09-29 利用者「タスクでキャスト名クリックで キャスト編集ページ窓」）。乗せたら下線 */
.bname .bcastlink { cursor: pointer; }
.bname .bcastlink:hover { text-decoration: underline; }
.bname .bcastlink:focus-visible { outline: 2px solid var(--board-head); outline-offset: 1px; border-radius: 2px; }
/* 名前に乗せたときのキャストのカード（2026-09-29 利用者「名前にマウスを当てたら 写真 18歳 156 E … 【可能オプション】」）。
   写真の右に 掲載年齢・身長・カップ と 自宅・外国人・喫煙、下に可能オプションを 2 列。〇（赤）と✖（青紫）は同じ大きさ。
   マウスの邪魔をしない（pointer-events: none） */
.castcard {
  position: fixed; z-index: 60; width: 312px; max-height: calc(100vh - 16px); overflow: hidden;
  padding: 10px 12px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2); font-size: 12px; line-height: 1.55; pointer-events: none;
}
.castcard[hidden] { display: none; }
.castcard .cctop { display: flex; gap: 12px; align-items: flex-start; }
.castcard .ccphoto { flex: none; width: 90px; height: 120px; object-fit: cover; border-radius: 4px; background: var(--panel2); }
.castcard .ccphoto.noimg { display: grid; place-items: center; font-size: 10px; letter-spacing: .06em; color: var(--faint); }
.castcard .ccmain { min-width: 0; display: grid; gap: 3px; }
.castcard .ccname { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.castcard .ccspec { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.castcard .ccprop { display: flex; gap: 8px; }
.castcard .ccprop span { flex: none; min-width: 3.4em; color: var(--dim); }
.castcard .ccprop b { font-weight: 500; }
.castcard .ccprop b.none { font-weight: 400; color: var(--faint); }
/* 自宅・外国人・喫煙・経験の備考（castnotes-2026-10-08）。言葉の下に、言葉の左端にそろえて（備考のある行だけ 2 列の升） */
/* 上下の空きは詰める（利用者「備考の間隔詰める」。行の gap: 8px が上下にも効いていた） */
.castcard .ccprop:has(.ccnote) { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); column-gap: 8px; row-gap: 0; }
.castcard .ccprop em.ccnote { grid-column: 2; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--dim); overflow-wrap: anywhere; }
.castcard .cchead { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; }
.castcard .ccopts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.castcard .ccopts li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.castcard .ccopts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.castcard .ccmark { flex: none; }
.castcard .ccmark.ok { color: var(--opt-ok); }
.castcard .ccmark.ng { color: var(--opt-ng); }
/* 帯に乗せたときの伝票のカード（2026-09-29 利用者のメモ「伝票にマウスを当てると キャスト 案内時間 送ドラ 迎ドラ 回収 釣り回収 顧客
   場所 ホテル代 案内金額 金額詳細情報 備考 ペースト用備考」）。見出し｜中身の 2 列。案内金額は伝票の窓と同じく現金は赤・カードは青。
   金額詳細情報は伝票の窓の内訳と同じ 4 列（種類｜名前｜額｜キャスト報酬）。備考は 8 行まで */
.castcard.slipcard {
  width: 360px; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
  --memo-red: #b91c1c; --memo-blue: #1d4ed8;
}
[data-theme="dark"] .castcard.slipcard { --memo-red: #fca5a5; --memo-blue: #93c5fd; }
/* 顧客の直下に台帳のメモ・備考。長い内容も改行を保ち、窓内で最後まで読める。 */
.slipcard .scguestnote, .slipcard .scmemobody { white-space: pre-wrap; overflow-wrap: anywhere; }
.slipcard .scmemo + .scmemo { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line2); }
.slipcard .scmemowhen { display: block; color: var(--dim); font-size: 10px; }
.slipcard .scmemobody { display: block; font-size: 13px; font-weight: 700; }
.slipcard .scmemobody.memo-red { color: var(--memo-red); }
.slipcard .scmemobody.memo-blue { color: var(--memo-blue); }
/* 伝票のカードの回収金額（slipcardover-2026-10-03。利用者「回収金額も表示」）。マイナスは赤 */
.slipcard .sccollect { font-variant-numeric: tabular-nums; }
.slipcard .sccollect.bad { color: var(--vermil); font-weight: 700; }
/* タスク表の 出勤状況・備考の丸・次回出勤、伝票の最終更新者 に乗せたときのカード（2026-09-30 利用者）。見出しと中身（改行はそのまま）。
   その日の備考の見出しは赤（丸と同じ）。次回の出勤予定・変更の記録は 日付・時刻（だれが）・中身 をそろえて並べ、多ければ 2 列（wide） */
.castcard.notecard { width: max-content; min-width: 140px; max-width: 320px; padding: 8px 10px 9px; }
.castcard.notecard.wide { max-width: 560px; }
.notecard .nchead { font-size: 11px; font-weight: 700; color: var(--dim); }
.notecard .ncbody { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.notecard .ncbody.none { color: var(--faint); }
.notecard .ncbody + .nchead { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); }
.notecard .ncnext, .notecard .nclog { margin-top: 3px; font-variant-numeric: tabular-nums; }
.notecard .ncnext.two { columns: 2; column-gap: 18px; }
.notecard .ncline { display: flex; gap: 8px; break-inside: avoid; white-space: nowrap; }
.notecard .ncnext .ncday { min-width: 5.6em; }
.notecard .nclog .ncday { min-width: 6.4em; color: var(--dim); }
.notecard .ncword { color: var(--dim); font-size: 11px; }
.notecard .ncwho { min-width: 4.5em; }
.notecard .ncwhat { white-space: normal; }
/* 備考の丸のカードの その日の出勤・待機（dayinfo-2026-10-02）。この日だけに直した欄は「この日」の札 */
.notecard .ncbody.ncwaits { white-space: normal; }
.notecard .ncwait { display: flex; gap: 8px; }
.notecard .ncwlab { flex: none; min-width: 2.4em; color: var(--dim); font-size: 11px; }
.notecard .ncwval { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notecard .ncwval.none { color: var(--faint); }
.notecard .ncdorm { display: block; font-size: 10px; color: var(--faint); }
.notecard .ncover {
  margin-left: 5px; padding: 0 4px; border-radius: 3px; background: var(--edit-wash); color: var(--amber);
  font-size: 9.5px; font-weight: 700; white-space: nowrap; vertical-align: .1em;
}
/* 項目名（タイトル）の列は薄黄色（cardtitle-2026-10-03。利用者「タイトル部分は薄黄色」）。伝票の窓のお客様の柱と同じ色（--slip-mid）。
   行の高さが違っても途切れない 1 本の帯にする（行のすき間を無くし、上下の余白は欄の中で取る） */
.slipcard .scgrid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; align-items: start; }
.slipcard .scgrid dt { align-self: stretch; padding: 2px 9px; background: var(--slip-mid); color: var(--dim); white-space: nowrap; }
.slipcard .scgrid dt:first-of-type { border-radius: 3px 3px 0 0; }
.slipcard .scgrid dt:last-of-type { border-radius: 0 0 3px 3px; }
.slipcard .scgrid dd { margin: 0; padding: 2px 0 2px 10px; min-width: 0; overflow-wrap: anywhere; }
.slipcard .none { color: var(--faint); }
.slipcard .scguide { font-weight: 700; font-variant-numeric: tabular-nums; }
.slipcard .scguide.cash { color: var(--vermil); }
.slipcard .scguide.card { color: var(--accent); }
.slipcard .mbreak {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 1px 6px; align-items: baseline;
  padding: 3px 5px; border-radius: 3px; background: var(--ro-bg); font-size: 11px; line-height: 1.4;
}
.slipcard .mbrow { display: contents; }
.slipcard .mbkind { font-size: 10px; color: var(--faint); white-space: nowrap; }
.slipcard .mbname { color: var(--dim); min-width: 0; overflow-wrap: anywhere; }
.slipcard .mbname.mbhot { color: var(--vermil); font-weight: 700; }
.slipcard .mbyen { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slipcard .mbyen.minus { color: var(--vermil); }
.slipcard .mbback { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--jade); }
.slipcard .scmind { display: block; margin-top: 2px; font-size: 11px; color: var(--dim); }
.slipcard .scnote { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
/* 名前の右に 2×2 の小さなアイコン 4 つ（2026-09-27 利用者「一旦 意味は持たせないが 右 に ２ ２ の４つのアイコンを配置」。
   前はその日の伝票の数）。まだ意味は無い。色は字と同じ（店の色の地でも読める） */
.bname .bicons {
  margin-left: auto; flex: none; display: grid; grid-template-columns: repeat(2, 11px); grid-auto-rows: 11px; gap: 3px;
}
.bname .bicons i { border: 1px solid currentColor; border-radius: 3px; opacity: .4; }
.bname.idle b { color: var(--faint); font-weight: 400; }
/* 名前と、その下の即ヒメ（2026-09-29 利用者「タスクのキャストの下に 即ヒメ 内容を表示する」）。名前の欄の中は縦に 2 段。
   即ヒメの出ない人は名前だけ（今までどおり真ん中） */
.bname .bnm { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; line-height: 1.2; }
.bname .bnm > b { overflow: hidden; text-overflow: ellipsis; }
/* 即ヒメの 1 行（standbyLook）。接客中＝橙・即ヒメ＝桃・待機中＝緑の地に白い字。未設定・時間外は淡い字だけ。
   古い（1 分ごとの監視が止まっている）ときは薄く。伝票を直せる人は押して即ヒメの小窓。
   字は添えの 10px（fontsize-2026-10-07。前は 9.5px。即ヒメの小窓の札 .dpick .know .bsoku は 10.5px のまま） */
.bsoku {
  display: inline-block; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  padding: 0 4px; border-radius: 3px; font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: #fff; text-shadow: none;
}
.bsoku.sk { background: var(--soku-sk); }
.bsoku.wt { background: var(--soku-wt); }
.bsoku.sv { background: var(--soku-sv); }
.bsoku.no, .bsoku.na { padding: 0; color: inherit; font-weight: 400; opacity: .6; }
.bsoku.stale { opacity: .45; }
.bsoku.kedit { cursor: pointer; }
.bsoku.kedit:hover, .bsoku.kedit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 1 人の行（名前・係数・備考・日記・出勤状況・時間の側）をまとめる入れ物。格子にはそのまま並ぶ（2026-09-28） */
.brow { display: contents; }
/* 帯を動かしているあいだだけ出す新しい「未定（フリー）」の行（2026-09-28 利用者「ドロップ＆ドラッグの時にも上部もっていったり
   伝票が被ろうとする場合は 出現させる」）。ふだんは隠す（.brow は display: contents なので、隠すのを書き直す）。出したときは
   淡い青の地と点線の枠で、放せる所だと分かるように。左に貼り付く欄は下を透かさないよう、地の色の上に重ねて塗る */
.brow[hidden] { display: none; }
.brow.bnew > * { background: linear-gradient(var(--accent-wash-2), var(--accent-wash-2)), var(--panel); }
.brow.bnew > .blane { outline: 1px dashed var(--accent); outline-offset: -2px; }
/* 名前の欄の左のつまみ（押したまま上下へ。2026-09-28 利用者「名前ボックスの左：でドロップ＆ドラッグで順番が変更できるように」） */
.bname .bgrip {
  flex: none; margin: 0 -2px 0 -5px; padding: 0 1px; border: 0; background: transparent; color: inherit;
  font-size: 12px; line-height: 1; opacity: .55; cursor: grab; touch-action: none;
}
.bname .bgrip:hover, .bname .bgrip:focus-visible { opacity: 1; }
/* 帰宅・当日休みの行はつまめない（2026-09-28 夜 利用者「この二つは 手動並び替えも不可」）。名前の位置をそろえるため同じ幅だけ空ける */
.bname .bgrip.pin { visibility: hidden; cursor: default; }
.brow.dragging > * { opacity: .45; }
.bdrop { position: fixed; z-index: 60; height: 2px; background: var(--accent); pointer-events: none; }
/* キャスト名の地が在籍店舗の色のとき（2026-09-27 利用者）。地は店ごとの色（style）。字は地の明るさで黒か白（rev）、
   薄い縁取りで読みやすく */
.bname.tinted { color: var(--tint-ink); --halo: var(--tint-halo); }
.bname.tinted.rev { color: var(--tint-ink-rev); --halo: var(--tint-halo-rev); }
.bname.tinted b, .bname.tinted.idle b { color: inherit; text-shadow: 0 0 3px var(--halo); }
/* タスク表の行の時間の所（帯の段）にマウスがある間は、その行の名前の欄を浮かせる（青い枠と影・太字。地と字の色はそのまま）。
   rowhover-2026-10-19 利用者「タスクにマウスがカーソルされているときは　その行がどのキャストなのか　わかるように」→ 名前の欄の地と字の入れ替え
   → rowhover2「伝票の上であろうがなかろうが」→ rowhover3 見本 10 案から青 → rowhover4-2026-10-19 見せ方の 6 案から「５にする　出勤時間の
   ボックス以降で時間部分のみのフォーカスでそうなるように」（名前・係数・備考・日記・出勤状況の欄に乗せても出さない）。
   つまんで動かしている間は、つまんだ帯（.moving）の行だけ（ほかの帯の上を通っても替えない）。CSS だけで描き直しはしない（帯が外れない）。
   未定の行・タスク（ヘブン）の帯も同じ。影は下の行と右の欄に掛かる（z-index 3。見出しの .bcorner の 4 より下）。
   影は弱め（rowhover5-2026-10-19 利用者「もう少しだけ影を抑える」→ 3 段階の見本から「2（弱く）」。前は 0 4px 14px・濃さ 38%） */
.bgrid:not(:has(.bblk.moving)) .brow:has(> .blane:hover) > .bname, .bgrid .brow:has(.bblk.moving) > .bname {
  z-index: 3; box-shadow: inset 0 0 0 2px #2b6cb0, 0 2px 7px rgba(0, 0, 0, .18);
}
.bgrid:not(:has(.bblk.moving)) .brow:has(> .blane:hover) > .bname b, .bgrid .brow:has(.bblk.moving) > .bname b { font-weight: 700; }
/* 行の高さは 36px（2026-09-27 利用者「キャストの上下をもう少し 大きく」。前は 30px）。z-index: 0 で行ごとに重なりの順を閉じる
   （いまの線や伝票の帯が、左に貼り付いた名前の欄の上へはみ出さない） */
/* 行の高さは 48px（2026-09-28 伝票の帯を本家と同じ 3 行にしたため。前は 36px） */
.blane { position: relative; z-index: 0; height: 48px; border-bottom: 1px solid var(--line2); }
/* 時間の目盛り（2026-09-27 利用者「10分刻みのサブ線 １時間刻みの主線」）。出勤の帯の上・伝票の帯の下に敷く。
   間隔は画面が --hw（1 時間）・--hw10（10 分）で渡す */
.blane::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-hour) 0 1px, transparent 1px var(--hw)),
    repeating-linear-gradient(90deg, var(--grid-10) 0 1px, transparent 1px var(--hw10));
}
/* 出勤の帯（グレー）と伝票の帯は行の上下いっぱい（2026-09-28 利用者「上下は枠いっぱいに伝票も背景グレーも表示されてよい」。
   前は上下に 3px の余白）。出勤の帯は角を丸めない（行どうしでつながって見えるように） */
.bshift { position: absolute; top: 0; bottom: 0; background: var(--panel3); }
/* 地の色はマスタのタスク背景色（出勤の状態ごと。2026-09-28 夜 利用者「タスク背景色 のマスタを作る」。色は --tbg で渡す）。
   暗い画面（管制卓）では明るい色が帯いっぱいに光らないよう、下地の色へ寄せる（--tbg-mix） */
/* タスク表のメモの帯（2026-10-02 利用者「メモでタスクを埋める … 時間:分〜時間:分 で表示内容は自由入力 削除ボタンも配置 長い文字の場合は点で
   終わらせて マウスあてたら表示」。見本は本家の受付台帳の「面接・体験」の帯＝薄茶の地に黒い字）。左上に開始・まん中に文（1 行・入らなければ
   「…」）・右下に終わり・右上に削除の［×］（伝票を直せる人だけ）。出勤の帯と目盛りの上・伝票の帯の下（重なれば伝票が上）。地は画面の明暗に
   関わらず同じ色。乗せると全文のカード */
.tmemo {
  position: absolute; top: 0; bottom: 0; z-index: 1; box-sizing: border-box; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 1px 4px;
  background: #c9a37f; color: #000; border-radius: 3px; box-shadow: inset 0 0 0 0.5px var(--board-edge);
  font-family: var(--board-font); font-size: 11px; line-height: 13px; white-space: nowrap;
}
.tmemo.tmedit { cursor: pointer; }
.tmemo .tmfrom { justify-self: start; }
.tmemo .tmtext { align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 12px; }
.tmemo .tmto { justify-self: end; }
.tmemo .tmdel {
  position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 2px;
  background: transparent; color: #4a3520; font: inherit; font-size: 11px; line-height: 14px; cursor: pointer; opacity: .7;
}
.tmemo .tmdel:hover { opacity: 1; background: rgba(255, 255, 255, .55); }
/* 伝票やほかのメモと被ったメモの帯（memoshift-2026-11-03 利用者「タスクメモも被った場合は他伝票同様に少しずれる形」。置き場所は boardMemoPlace）。
   上の段のメモは伝票の帯と同じ高さ。下の段のメモ（.tmlow。上下は style）は重複の帯と同じく 1 行分ずつ下にずれ、見えている下の 1 行に 開始〜終わりと文・右端に［×］ */
.brow.dup .tmemo { bottom: 16px; }
.tmemo.tmlow { display: flex; align-items: flex-end; padding: 0 4px 1px; }
.tmemo.tmlow.tmedit { padding-right: 16px; }
.tmemo .tmline { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 14px; }
.tmemo.tmlow .tmdel { top: auto; bottom: 1px; }
.bshift.tbg { background: color-mix(in srgb, var(--tbg) var(--tbg-mix), var(--panel3)); }
/* いまの線は赤・2px（2026-09-27 利用者「現在時刻 は赤線」）。位置は 2 分刻み（boardNowLeft）。
   重なりは伝票の帯（z-index 2）の下・出勤の帯と目盛りの上（2026-09-28 利用者「現時刻の赤線は 伝票やタイトルの下」。前は帯の上） */
.bnow { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--now-line); z-index: 1; pointer-events: none; }
/* 出勤の印（受け・確認・UP・完UP・家着）を縦書き（2026-09-28 利用者「UPを一文字として 縦書きで」）。1 字ずつ縦に積み、「UP」は
   1 字として横のまま。グレーの帯（出勤）か、それを越えて終わる伝票の帯の右端にぴったり・左寄せ・細字・赤（同じ夜 利用者「太文字なし
   赤文字 … その伝票のすぐ横 … 左寄でグレー部分のすぐ横」。前は次の 10 分の枠の中央・太字・画面の字の色）。
   帯の右端との間は少しだけ空ける（同じ夜 利用者「少しだけ余白を空ける」。前は 1px で帯に付いて見えた）。
   伝票の帯の下に敷き、押す・つまむの邪魔をしない */
.bmark {
  position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; padding-left: 4px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  font-family: var(--board-font); font-size: 12px; line-height: 13px; font-weight: 400; color: var(--shift-mark); white-space: nowrap;
}
.bmark span { display: block; }
/* 当日備考の札（2026-10-02 利用者「初期値は表示せずに　ここに縦で　開けるようなUIに仕様　マウスを当てると開けるように」「出勤情報の右に
   空白なしで　備考があるとわかる形」。daynote-2026-10-02）。置き場（.bdaynote）は幅 0・行の高さいっぱいで、時間軸の左端（左に貼り付いた 5 つの
   欄の幅の合計）に貼り付く。札は出勤状況の欄の右端にすき間なし・行の高さいっぱい・薄い赤の地に赤い縦書き・右に赤い縁。乗せると少し濃く、
   カードを開いているあいだは右の縁を消してカードとつなげる。字の赤は出勤の終了条件（UP など）の赤い字と同じ色（暗い画面では明るい赤）。
   帯（z-index 2）の上。押せるのは札だけ */
.bdaynote {
  position: sticky; left: calc(var(--bw-name) + var(--bw-coef) + var(--bw-memo) + var(--bw-diary) + var(--bw-state));
  z-index: 3; width: 0; height: 100%; pointer-events: none;
}
.bdaynote .bdntab {
  position: absolute; left: 0; top: 0; bottom: 1px; width: 14px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl;
  font-size: 9px; line-height: 1; letter-spacing: .06em; color: var(--shift-mark); white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--shift-mark) 13%, var(--panel));
  border-right: 1px solid color-mix(in srgb, var(--shift-mark) 55%, transparent); border-radius: 0 3px 3px 0;
  pointer-events: auto; cursor: pointer; user-select: none; outline: none;
}
.bdaynote .bdntab:hover, .bdaynote .bdntab.open { background: color-mix(in srgb, var(--shift-mark) 24%, var(--panel)); }
.bdaynote .bdntab.open { border-right-color: transparent; border-radius: 0; }
.bdaynote .bdntab:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
/* 札に乗せたときのカード（daynote-2026-10-02）。札のすぐ右に札から続く形。中身だけ（見出し・日付・✖ は出さない＝同じ日 利用者「当日備考　時間
   ✖　は不要」）。縦の幅はタスクの行（札）と同じで、上下は画面がそろえる（同じ日 利用者「１行であろうが２行であろうが幅をタスク行に
   合わせる」）。中身は真ん中に 2 行まで（赤い字・改行もそのまま・入らなければ「…」）。画面に固定して帯の上に重ねる */
.dncard {
  position: fixed; z-index: 65; max-width: 300px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center;
  background: var(--panel); color: var(--text); font-family: var(--board-font);
  border: 1px solid color-mix(in srgb, var(--shift-mark) 40%, var(--line)); border-left: 3px solid var(--shift-mark);
  border-radius: 0 8px 8px 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .08);
}
.dncard .dnbody {
  padding: 0 12px 0 9px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 16px; color: var(--shift-mark);
}
/* 帯の字は 小杉丸ゴシック（はじめは本家と同じ ＭＳ Ｐゴシック。--board-font）・真っ黒（2026-09-28 利用者 本家と見比べて
   「自社の方が文字が見えずらい」。前は IBM Plex Sans JP の
   10px で、時刻は等幅の太字。本家は 12px で、小さい字でも線がくっきり出る）。3 行とも 12px（3 行目のドライバー名も。同じ日
   利用者「ドライバー名 は 場所と同じ文字サイズ」。店の短い名前だけ本家と同じ 10px）。行の間隔は 13px（本家は 14.4px） */
.bblk {
  position: absolute; top: 0; bottom: 0; z-index: 2; border-radius: 3px; overflow: hidden;
  font-family: var(--board-font); font-size: 12px; line-height: 13px; padding: 1px 5px; white-space: nowrap;
  display: flex; flex-direction: column; justify-content: center;
  color: var(--board-ink); font-weight: 400; cursor: pointer;
  /* 境界線は内側に引く（帯の幅は変えない。重なったときは上の帯の縁が下の帯との境目になる）。0.5px は 1 画素＝1px の画面では
     薄い 1px、高精細な画面では細い線 */
  box-shadow: inset 0 0 0 0.5px var(--board-edge);
}
/* 指名区分で塗り分けていたのは状態が無かったころの代わり。2026-09-28 から帯の地は伝票の状態の色（.st）で、指名区分の色は
   状態の無い帯にだけ残る。指名区分は文字（本 / 写 / フ）で読む。色は状態に使い、識別には使わない */
/* 帯の左端の棒（3px の縁）は付けない（2026-09-28 利用者「この始まりの棒不要」。状態の色・指名区分の色・取消のどれも） */
.bblk.sf3 { background: var(--sf3-bg); }
.bblk.sf2 { background: var(--sf2-bg); }
.bblk.sf1 { background: var(--sf1-bg); }
/* 帯の地は伝票の状態の色（本家と同じ色。2026-09-28 利用者「その状態の色と伝票は同じ色の状態」）。地は画面の明暗に関わらず
   同じ色なので、字も明暗で変えず地の明るさで黒か白（rev）。「本」「OP有」の赤と店の短い名前の赤は、明るい地では濃く、暗い地では淡く */
.bblk.st { background: var(--sbg); color: var(--board-ink); }
.bblk.st.rev { color: var(--tint-ink-rev); }
.bblk.st.rev .bl1 .bop, .bblk.st.rev .bl1 .bhon { color: var(--mark-red-rev); text-shadow: 0 0 3px var(--tint-halo-rev); }
.bblk.st .bstore { color: #8b0000; }
/* 電話の箱から開いた伝票の札（callslips-2026-10-14）：8 秒だけ枠を点滅させて目立たせる */
/* 電話から開いた伝票の帯（focuskeep-2026-10-19）：2 回光ってから枠を残す・消すときはゆっくり */
.bblk.bfocus { outline: 3px solid var(--warn, #b36b00); outline-offset: 2px; z-index: 5; transition: outline-color 1.2s ease; }
.bblk.bfocus.bfocusblink { animation: bfocus .8s ease-in-out 2; }
.bblk.bfocus.bfocusout { outline-color: transparent; }
.bfocusmiss { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 5px 10px; border: 1px solid #f0b46a; border-radius: 8px;
  background: #fff4e5; color: #9a4b00; font-size: 12.5px; }
.bfocusmiss span { flex: 1; min-width: 0; }
:root[data-theme="dark"] .bfocusmiss { background: rgba(240, 180, 106, .12); border-color: #8a6230; color: #f0b46a; }
@keyframes bfocus { 50% { outline-color: transparent; } }
.bblk.st.rev .bstore { color: #ffd0d0; }
.bblk.dead { background: var(--panel3); color: var(--faint); text-decoration: line-through; }
/* キャンセル・チェンジの帯（2026-09-30 利用者「伝票は消さずにキャンセル チェンジで 薄い伝票としてタスクに表示する」）。薄く、ほかの帯の
   下に敷く（重なり・重複には数えない）。1 行目の指名の横に「キャンセル」「チェンジ」の枠 */
.bblk.bvoid { opacity: .42; z-index: 1; }
.bblk.bvoid:hover { opacity: .85; }
/* 札はキャンセル＝赤の地・チェンジ＝青の地に白い字（2026-10-02 利用者「キャンセルは 赤背景 チェンジは青背景 チップで表示」。前は字の色の枠） */
.bblk .bvoidtag { margin-left: 2px; padding: 0 4px; border-radius: 2px; font-size: 10px; line-height: 12px; color: #fff; background: var(--mark-red); }
.bblk .bvoidtag.change { background: var(--mark-blue); }
/* ヘブン側の変更の印（hvchanged-2026-10-12）：タスク表の帯は赤い札「ヘブン変更」・タスク（ヘブン）の帯は右端の丸を赤に・伝票の窓は赤い字 */
.bblk .bvoidtag.hvchg { background: var(--mark-red); }
/* 忠告のまま保存した伝票の帯（warnstop-2026-10-25）：内側に赤い枠を重ねて点滅（電話から開いた枠 .bfocus とヘブンのエラー .hvfacterror の outline とは
   ぶつけない）・1 行目に薄い字で中身（入らなければ…）。動きを減らす設定の画面では点滅させずに枠だけ */
.bblk.bwarn::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--mark-red); border-radius: inherit; pointer-events: none;
  animation: bwarnblink 1.2s ease-in-out infinite; }
@keyframes bwarnblink { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .bblk.bwarn::after { animation: none; } }
.bblk .bwarntext { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; opacity: .6; }
/* ヘブンへ送れなかった伝票（heavensend-2026-10-25 #185）：帯の赤い枠（点滅しない。忠告の点滅は ::after）と、2 行目（場所）の頭の赤字「ヘブン未送」と
   ［もう一度送る］（帯が 230px より狭ければ「未送」と［再送］）。場所の字のほうを詰める */
.bblk.bsenderr { container-type: inline-size; }
.bblk.bsenderr::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--mark-red); border-radius: inherit; pointer-events: none; z-index: 2; }
.bblk.bsenderr .bl2 { display: flex; align-items: center; gap: 3px; padding-left: 12px; }
.bblk.bsenderr .bl2 .bplace { flex: 1; min-width: 0; }
.bblk .bsendtext { flex: none; padding: 0 3px; font-size: 10px; font-weight: 700; line-height: 14px; color: #fff; background: var(--mark-red); border-radius: 3px; }
.bblk .bresend { flex: none; position: relative; z-index: 3; margin-left: 2px; padding: 0 4px; font: inherit; font-size: 10px; line-height: 13px; color: var(--mark-red);
  background: #fff; border: 1px solid var(--mark-red); border-radius: 3px; cursor: pointer; }
.bblk .bresend:disabled { opacity: .6; cursor: default; }
.bblk .bresendlong { display: none; }
@container (min-width: 230px) { .bblk .bresendlong { display: inline; } .bblk .bresend .bresendshort { display: none; } }
.bblk.hvb .hvplace .bsendtext, .bblk.hvb .hvplace .bresend { margin-right: 3px; vertical-align: 1px; }
.bblk.hvb .hvwarn { margin-left: 4px; font-size: 10px; opacity: .75; }
.bblk.hvb .hvstate.hvchg { background: var(--mark-red); margin-left: 2px; }
.hvhealth { margin: 0 0 10px; padding: 10px 14px; border: 1px solid #a5cbb6; border-radius: 6px; background: #f0faf4; color: #155a32; font-size: 12px; }
.hvhealth.bad { border: 2px solid #c22d32; background: #fff3f3; color: #8c171c; }
.hvhealth.pending { border-color: #c5cbd1; background: #f5f6f7; color: #4c5965; }
.bblk.hvb .hvstate.hvpending { background: #687c90; }
.bblk.hvb .hvstate.hvjob { background: #a26a12; margin-left: 2px; }   /* つまんだ時刻をヘブンへ送っている（hvslide-2026-10-25） */
.hvhealthhead { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.hvhealthhead b { font-size: 15px; }
.hvhealth p { margin: 5px 0 0; }
.hvhealth ul { margin: 8px 0 0; padding: 0; list-style: none; max-height: 200px; overflow: auto; }
.hvhealth li { display: flex; gap: 8px 12px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid #edc5c5; }
.hvhealth li strong { font-weight: 500; flex: 1 1 350px; }
.hvhealth li small { white-space: nowrap; }
.bblk.hvb.hvfacterror { outline: 2px solid #c22d32; outline-offset: 1px; }
.recordbar #hvchg { max-width: 460px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ほかの帯と時間が重なるキャンセル・チェンジの帯は、重複の帯と同じく下の段に 1 行（「キャンセル 3,000円 20:00 60分 …」。読めるよう少し
   濃く・字は地の色） */
.bblk.bvoid.bdup { opacity: .8; }
/* 下の段の 1 行はキャンセル＝赤字・チェンジ＝青字（2026-10-02 利用者「下ズレした時も キャンセルは赤文字 チェンジは青文字で表示」。前は地の字の色） */
.bblk .bduptext.bvoidtext { color: var(--mark-red); text-shadow: 0 0 3px var(--tint-halo); font-weight: 700; }
.bblk .bduptext.bvoidtext.change { color: var(--mark-blue); }
.bblk.st.rev .bduptext.bvoidtext { color: var(--mark-red-rev); text-shadow: 0 0 3px var(--tint-halo-rev); }
.bblk.st.rev .bduptext.bvoidtext.change { color: var(--mark-blue-rev); }
/* 他優先の帯（slipyield-2026-10-31 利用者「伝票の状態　に削除　できない　マスタで　他優先　この伝票は薄くなる　色はマスタで指定する」→
   「ヘブンネットとのつなぎも締めも他の伝票と分けない　この状態である場合に特殊なのは少し薄いだけ」→「キャンセルの帯のように下に敷く扱い　を採用　文字は　キャンセル連絡必要」）。
   地はマスタの色のまま少し薄く、キャンセル・チェンジの帯と同じくほかの帯の下に敷く（重なり・重複に数えない）。場所の行の頭に赤い札
   「他予約優先OK」（被っていない帯。okword-2026-10-31。1 行目は時刻で埋まるので。場所の字のほうを詰め、帯が狭ければ札も詰める）。
   重なれば下の段に赤い字の 1 行「キャンセル連絡必要 …」（.bvoidtext） */
.bblk.bother { opacity: .6; z-index: 1; }
.bblk.bother.bdup { opacity: .8; }
.bblk.bother .bl2 { display: flex; align-items: center; gap: 3px; }
.bblk.bother .bl2 .bplace { flex: 1 1 0; min-width: 0; }
.bblk .bvoidtag.otherfirst { flex: 0 1 auto; min-width: 0; margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
/* 伝票一覧・帯のカード・締めの見比べのキャンセル・チェンジの印（赤い点線の枠）。伝票一覧の行は薄く */
.pill.void { background: transparent; color: var(--vermil); border: 1px dashed var(--vermil); }
/* 帯のカードの印は帯の札と同じ色（2026-10-02） */
.pill.void.cancel { background: var(--mark-red); border: 1px solid var(--mark-red); color: #fff; }
.pill.void.change { background: var(--mark-blue); border: 1px solid var(--mark-blue); color: #fff; }
.slipgrid tr.voidrow td { opacity: .55; }
/* 伝票一覧の他優先の行は少し薄く（slipyield-2026-10-31） */
.slipgrid tr.otherrow td { opacity: .6; }
/* 帯をつまんで動かす（2026-09-28 利用者「伝票も左部分のみ有効なドロップ＆ドラッグができたい」）。伝票を直せる人・取消でない帯だけ。
   つまむ所は 2 行目（場所）の左の 12px（⠿）だけ。開始の時刻と送ドラは左に詰めたまま（同じ日 利用者「開始時間や送人の部分は
   左詰めのまま残せる？ 有効区間は場所の左側のみ」）。場所の行だけ、その分を空けて真ん中に寄せる。動かしているあいだ、元の帯は
   薄く、手元に影（開始と終わりの時刻を書き換えて出す）。動かせない行（自社のキャストにつながらない行）の上では影が灰色 */
.bblk .bl2 { position: relative; }
.bblk.dmove .bl2 { padding-left: 14px; }
.bblk .bgrab { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; cursor: grab; z-index: 1; }
.bblk .bgrab::before {
  content: "⠿"; position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
  font-size: 11px; line-height: 1; opacity: .4;
}
.bblk .bgrab:hover::before { opacity: .9; }
.bblk.moving { opacity: .35; }
.bblk.saving { opacity: .6; cursor: progress; }
/* 終了時刻の下・迎ドラの上に、左寄せで早出を表示する。 */
.bblk .bearly {
  position: absolute; right: 0; top: 0; width: 5ch; padding: 0; margin: 0; border: 0;
  border-radius: 0; background: transparent; color: var(--mark-red); font: inherit;
  line-height: inherit; font-weight: 700; text-align: left; cursor: pointer;
  text-shadow: 0 0 3px var(--tint-halo); min-height: 0;
}
.bblk .bearly:hover { text-decoration: underline; }
.bblk .bearly:disabled { opacity: 1; cursor: default; }
.bblk.st.rev .bearly { color: var(--mark-red-rev); text-shadow: 0 0 3px var(--tint-halo-rev); }
.bblk.has-early .bl2 { padding-right: calc(5ch + 4px); }
.bblk.has-early { min-width: 40px; }
.bblk .bplace { display: block; overflow: hidden; text-overflow: ellipsis; }
.bblk .bresize {
  position: absolute; right: 0; top: 0; bottom: 0; width: 5px; z-index: 4;
  cursor: ew-resize; touch-action: none; user-select: none;
}
.bblk .bresize:hover, .bblk.resizing .bresize { background: color-mix(in srgb, currentColor 25%, transparent); }
.bblk .bresize:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
.bblk.resizing { user-select: none; cursor: ew-resize; }
.bblk .bdupline .bearly { position: static; width: auto; margin-left: 4px; }
.bblk.bghost {
  position: fixed; bottom: auto; z-index: 95; pointer-events: none; opacity: .92;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 0.5px var(--board-edge);
}
.bblk.bghost.bad { opacity: .5; filter: grayscale(1); }
/* ヘブンの時刻を尋ねているあいだの影（動かした先に置いたまま。2026-09-30 利用者「変更後の位置で窓を出す」）。小窓（90）より下・幕（55）より上 */
.bblk.bghost.asking { z-index: 85; opacity: 1; }
/* 開始の時刻が重なった帯（2026-09-28 利用者「伝票の開始時間が被った場合 下の伝票を １行分右下に ずらして ドロップ＆ドラッグアイコン
   赤文字で 重複 開始時間 プレイ時間 指名 終了時間を表示」）。重複のある行は 1 行分（16px。app.js の BOARD_DUP）高くし、ふつうの帯は
   上の 47px のまま、重複の帯は 1 行分右下へずらす。重複の帯は下の段に見える 1 行に、つまみと赤い字だけ */
.brow.dup > * { height: 64px; }
.brow.dup .bblk { bottom: 16px; }
.brow.dup .bblk.bdup { top: 16px; bottom: 0; justify-content: flex-end; }
/* 下の段が 2 段以上の行（被ったメモの置き場所が足りないとき。memoshift-2026-11-03。--dupn は段の数）。伝票の帯の形は 1 段の行と同じで、その下にメモの段が増える */
.brow.dupn > * { height: calc(48px + var(--dupn) * 16px); }
.brow.dupn .bblk, .brow.dupn .tmemo { bottom: calc(var(--dupn) * 16px); }
.brow.dupn .bblk.bdup { bottom: calc((var(--dupn) - 1) * 16px); }
.bblk .bdupline { position: relative; padding-left: 14px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; }
.bblk .bduptext { color: var(--mark-red); font-size: 11px; font-weight: 700; text-shadow: 0 0 3px var(--tint-halo); }
.bblk.st.rev .bduptext { color: var(--mark-red-rev); text-shadow: 0 0 3px var(--tint-halo-rev); }
/* 時刻も本家と同じ書体・太さ（2026-09-28。前は等幅の太字） */
.bblk b { font-weight: 400; }
/* 帯の 3 行（2026-09-28 本家の受付台帳と同じ）。1 行目の終わりの時刻は右端、2・3 行目は長ければ切る。店の短い名前は赤。
   2 行目（場所）は中央寄せ。3 行目のドライバー名は場所と同じ 12px（2026-09-28 利用者「ドライバー名 は 場所と同じ文字サイズ」。
   前は 10px）、店の短い名前は本家と同じ 10px */
.bblk .bl1 { display: flex; gap: 4px; }
.bblk .bl1 .bend { margin-left: auto; }
.bblk .bl2, .bblk .bl3 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.bblk .bl2 { text-align: center; }
.bblk .bl3 .bstore { font-size: 10px; }
.bblk .bstore { color: var(--vermil); }
/* 3 行目は 左に送ドラと店の短い名前、右詰めに迎ドラ（2026-09-28 利用者「迎ドラ は右詰表記 送ドラの右に短い店舗名」）。
   帯が狭ければ、どちらも後ろを切る */
/* 字の大きさが違う（ドライバー名 12px・店の短い名前 10px）ので、字の下の線でそろえる */
/* 上下の真ん中でそろえる（2026-10-02 利用者「状態とドラ表示名は同じ大きさなのに 行がずれている」。名前の欄は長いと切る＝overflow hidden で、
   字の下の線でそろえると、その欄の下の線が欄の下の端になって名前だけ上がっていた。前は baseline） */
.bblk .bl3 { display: flex; gap: 4px; align-items: center; }
.bblk .bl3 .bstore { flex: none; }
/* 店の短い名前の横の「状態」（2026-09-28 利用者「店舗の横に 状態 を表示して変更できるように」）。字はドライバーの名前と同じ 12px
   （2026-09-30 利用者「状態の の文字の大きさは スタッフの大きさと一緒」。前は店の名前と同じ 10px）。押すと状態の小窓。乗せたときに点線 */
.bblk .bl3 .bstat { flex: none; font-size: 12px; cursor: pointer; opacity: .8; }
.bblk .bl3 .bstat:hover { opacity: 1; text-decoration: underline dotted; text-underline-offset: 2px; }
/* 「状態」の押せる所を、字の左右のすき間（3 行目の gap 4px）ちょうどと行の上下まで広げる（stathit-2026-10-20 #138 利用者「押せるが
   ピンポイントすぎる　伝票開いてしまう　もうちょっとだけ左右に余裕がほしい」。前は字の幅 24px だけで、すぐ横のすき間を押すと伝票の窓が
   開いた）。足した余白を同じだけの負の外側の余白で打ち消すので、字の位置・行の高さ・ほかの欄の位置は替わらない。すき間より広げない
   （送ドラ・迎ドラ・店の短い名前の押せる所は取らない）。position: relative は重なり順を乗せる前と後で同じにするため：「状態」は薄く
   （opacity .8）描くので、乗せて濃くなると重なり順が替わり、迎ドラとの境目の 1px で押し下げと離しの受け手が替わって伝票の窓が開いた
   （迎ドラが隣の狭い帯で確かめた）。行の外は 3 行目の overflow: hidden で切れる */
.bblk .bl3 .bstat { position: relative; padding: 2px 4px; margin: -2px -4px; }
.bblk .bl3 .bout { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bblk .bl3 .bin { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 1 行目：「本」と「OP有」は太字の赤（2026-09-28 利用者「本 は赤文字 OP有 は コピーアイコンの左に 赤文字記載」。OP有 は前は
   太字の青で 写 フ 本 の横）。帯の地は灰色（完了）や桃色（回収（未））もあるので、字の周りを白く薄くぼかして読めるように。
   字の形は帯のほかの字と同じ（ＭＳ Ｐゴシック）。終わりの時刻の左に詳細ペーストのコピー（同じ日「終了時刻の左側にペーストアイコン」）。
   取消の帯ではほかの字と同じ（灰色の打ち消し線） */
.bblk .bl1 .bop, .bblk .bl1 .bhon {
  color: var(--mark-red); font-weight: 700; text-shadow: 0 0 3px var(--tint-halo);
}
.bblk.dead .bl1 .bop, .bblk.dead .bl1 .bhon { color: inherit; text-shadow: none; }
.bblk .bl1 .bend { display: inline-flex; align-items: center; gap: 2px; }
.bblk .bpaste {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 13px; padding: 0;
  border: 0; border-radius: 3px; background: transparent; color: inherit; opacity: .65; cursor: pointer;
}
.bblk .bpaste svg { width: 11px; height: 11px; }
.bblk .bpaste:hover { opacity: 1; color: var(--accent); background: var(--accent-wash); }
.bblk .bpaste.done { opacity: 1; color: var(--jade); }
.bblk .bpaste.bad { opacity: 1; color: var(--vermil); }
/* ドライバーの欄は押すと付け替えられる（伝票を直せる人だけ。2026-09-28 利用者）。押せるのはドライバーの名前の所だけ
   （店の短い名前は含めない）。選ばれていなければ「-」（同じ日 利用者「ドライバーが選ばれてない場合は - を表示してそこから
   ドライバーを選択できるように」）。「-」は細いので、押しやすい幅を持たせて真ん中に置く
   空の印は vacant。empty にすると画面全体の空の案内（.empty の上下 40px の余白）を拾い、2 行目の場所が潰れる（2026-09-28） */
.bblk .bl3 .vacant { min-width: 14px; text-align: center; }
.bblk.dedit .bl3 [data-side]:hover { text-decoration: underline dotted; text-underline-offset: 2px; }
/* ドライバーを付け替える小窓（2026-09-28）。候補の一覧（.cbpop）と同じ見た目。外を押すと閉じる（透明の幕） */
.scrim.clear { background: transparent; }
.dpick {
  position: fixed; z-index: 90; width: 230px; max-height: 340px; display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22); padding: 6px; font-size: 12px;
}
.dpick .dhead { padding: 0 2px; font-size: 10.5px; color: var(--dim); }
/* ドライバーの小窓の見出しの行の［✕］（dpkeep-2026-10-16。選んでも閉じない・閉じるのは ✕・外を押す・Esc）と、保存した知らせの行 */
.dpick .dheadrow { display: flex; align-items: center; gap: 4px; }
.dpick .dheadrow .dhead { flex: 1; min-width: 0; }
.dpick .dheadrow .x { flex: none; padding: 0 4px; color: var(--dim); font-size: 14px; line-height: 1; }
.dpick .dheadrow .x:hover, .dpick .dheadrow .x:focus-visible { color: var(--text); }
.dpick .dmsg.dsaved { padding: 0 2px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpick .dsaved[hidden] { display: none; }
.dpick .dq { width: 100%; }
.dpick .drows { overflow-y: auto; min-height: 0; }
.dpick .drow {
  display: block; width: 100%; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent;
  color: var(--text); font: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.dpick .drow:hover, .dpick .drow:focus-visible { background: var(--steel); color: #fff; }
.dpick .drow.now { color: var(--steel); font-weight: 600; }
.dpick .drow.now:hover { color: #fff; }
.dpick .dsep { padding: 5px 8px 2px; font-size: 9.5px; color: var(--faint); }
.dpick .dmsg { padding: 4px 6px; font-size: 11px; color: var(--vermil); }
.dpick .dmsg.ok { color: var(--jade); }
/* 即ヒメの小窓（2026-09-29）。いまの状態（名前の下と同じ札）・即ヒメ・待機中・接客中の行（左に見出し、右に釦）・終わりの時刻・
   即ヒメのコメント・あと何人。押せない釦は薄い */
.dpick.kpick { width: 292px; max-height: none; gap: 6px; }
.dpick .know { display: flex; align-items: center; gap: 6px; }
.dpick .know .bsoku { font-size: 10.5px; line-height: 16px; }
.dpick .know .bsoku.no, .dpick .know .bsoku.na { opacity: .75; }
.dpick .kread { font-size: 10px; color: var(--faint); }
.dpick .krow { display: flex; align-items: center; gap: 6px; font-size: 11px; min-height: 22px; }
.dpick .krow > .klab { flex: none; width: 42px; color: var(--dim); }
.dpick .krow > .kval { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpick .krow .btn { flex: none; }
.dpick .krow .btn:disabled { opacity: .4; cursor: default; }
.dpick .krow.kend select { font: inherit; font-size: 11px; }
/* 即ヒメの行の下の一言（ヘブンの自動登録が待機中の人を順に即ヒメへ載せる。2026-09-29）。見出しの幅だけ字下げ */
.dpick .khint { margin: -4px 0 0 48px; font-size: 10px; line-height: 1.3; color: var(--faint); }
/* 終わりの行の釦（時刻を直す・接客中を外す）は 1 つの入れ物で右に寄せ、幅が足りないときは入れ物ごと時刻の下の行へ回す（sokuwrap-2026-10-25）。
   足りるとき（接客中でない＝釦 1 つ・箱が広いとき）は今までどおり時刻の右に 1 行 */
.dpick .krow.kend { flex-wrap: wrap; row-gap: 4px; }
.dpick .krow.kend .kendbtns { flex: none; display: flex; gap: 6px; margin-left: auto; }
.dpick .kcomment {
  padding: 3px 5px; border-radius: 3px; background: var(--ro-bg); font-size: 10.5px; color: var(--dim); overflow-wrap: anywhere;
}
/* ドライバーの小窓のタブ（送ドラ・迎ドラ・回収・釣り回収。2026-09-28 利用者「探すボックスの下にタブと作って … タブ切り替え」） */
.dpick .dtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.dpick .dtab {
  flex: 1; padding: 3px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--dim); font-size: 11px; cursor: pointer; white-space: nowrap;
}
.dpick .dtab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* タブの下に、そのタブのいまの人（2026-09-28 夜 利用者「送ドラ 回収 それぞれの下に現在値を表示」）。長い名前は … で切る */
.dpick .dtab { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.dpick .dtab .dtabnow {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 400; color: var(--text);
}
.dpick .dtab .dtabnow.none { color: var(--faint); }
/* 状態の小窓の部屋番号（ホテルの伝票だけ。2026-09-28 利用者「部屋番号を表示 変更もできるように」。10/22 に外し 10/28 に戻した） */
.dpick .droom { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.dpick .droom .droomin { flex: 1; min-width: 0; }
/* 出勤を直す小窓（受付台帳の出勤状況を押したとき。2026-09-28）。出勤・退勤はプルダウン、状態と印は押して選ぶ釦の列 */
.dpick.shpick { width: 316px; max-height: none; gap: 6px; }
/* 係数を直す小窓（タスク表の係数を押したとき。2026-09-30） */
.dpick.cfpick { width: 228px; max-height: none; gap: 6px; }
.dpick .cfrow { display: flex; align-items: center; gap: 6px; }
.dpick .cfin { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 3px 6px; font-variant-numeric: tabular-nums; }
/* 備考の小窓（タスク表の備考の丸を押したとき。2026-09-30）。上にその日の備考、下に出勤の備考。書けない欄は読むだけ（薄い地） */
.dpick.mmpick { width: 388px; max-height: calc(100vh - 16px); overflow-y: auto; gap: 6px; }
.dpick .mmday, .dpick .mmmemo { flex: 1; min-width: 0; font: inherit; font-size: 12px; line-height: 1.45; resize: vertical; }
/* 書く欄は中身の行数まで伸ばす（memofit-2026-10-06 利用者「全部表示されるように伸ばす」）。短くても今の行数（当日備考 2・出勤の備考 4。
   1 行＝12px × 1.45 に、枠と内側の余白 6px）。小窓が画面より高くなれば小窓の中でスクロール */
.dpick .mmday { field-sizing: content; min-height: calc(2.9em + 6px); }
.dpick .mmmemo { field-sizing: content; min-height: calc(5.8em + 6px); }
.dpick .mmday[readonly], .dpick .mmmemo[readonly] { background: var(--panel2); color: var(--dim); }
.dpick .mmhint { margin: -3px 0 0 52px; font-size: 10px; color: var(--faint); }
/* 備考の小窓の その日の出勤・待機（dayinfo-2026-10-02）。待機場所▾と詳細・迎え場所と時刻（時▾:分▾）・送り場所・備考・寮費残り。
   この日だけに直してある欄は黄色の地（出勤の表の直したマスと同じ色）で、下に「いつも：…［戻す］」 */
.dpick .mmsec { padding: 0 2px; font-size: 10.5px; font-weight: 700; color: var(--dim); }
.dpick .mmsep { border-top: 1px solid var(--line); margin-top: 1px; }
.dpick .dshrow.mmline { align-items: center; }
.dpick .dshrow.mmline.mmtop { align-items: flex-start; }
.dpick .dshrow.mmline > .dshlab { padding-top: 0; }
.dpick .dshrow.mmline.mmtop > .dshlab { padding-top: 3px; }
.dpick .mmin { flex: 1; min-width: 0; font: inherit; font-size: 12px; }
.dpick .mmin[hidden] { display: none; }
/* 待機場所は選んだ名前の長さまで伸ばす（memofit-2026-10-06 利用者「全部表示されるように伸ばす」。前は 8.5em の決め打ちで
   「スカイステー」と切れていた）。短くても 8.5em、詳細の欄が出たときは欄の残りを分ける */
.dpick .mmplace { flex: 0 1 auto; width: auto; field-sizing: content; min-width: 8.5em; font: inherit; font-size: 12px; }
.dpick .mmwhen { flex: none; display: flex; align-items: center; gap: 2px; }
.dpick .mmclock { font: inherit; font-size: 11.5px; }
.dpick .mmcolon { color: var(--dim); }
.dpick .mmnote { flex: 1; min-width: 0; font: inherit; font-size: 12px; line-height: 1.45; resize: vertical;
  field-sizing: content; min-height: calc(2.9em + 6px); }      /* 出勤・待機の備考も中身の行数まで（memofit-2026-10-06。短くても 2 行） */
.dpick .mmin[readonly], .dpick .mmnote[readonly] { background: var(--panel2); color: var(--dim); }
.dpick .mmover .mmin, .dpick .mmover .mmplace, .dpick .mmover textarea { background: var(--edit-wash); }
.dpick .mmbase { display: flex; align-items: center; gap: 6px; margin: -3px 0 0 52px; font-size: 10px; color: var(--dim); }
.dpick .mmbasev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpick .mmback {
  flex: none; padding: 0 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 10px; line-height: 16px; cursor: pointer;
}
.dpick .mmback:hover { border-color: var(--accent); color: var(--accent); }
.dpick .dshrow.mmdorm { align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
.dpick .mmdorm > b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dpick .mmdorm .mmhow { font-size: 10px; color: var(--faint); }
.dpick .dshrow { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; }
.dpick .dshrow > .dshlab { flex: none; width: 46px; padding-top: 3px; color: var(--dim); }
.dpick .dshtime { font: inherit; font-size: 11px; }
.dpick .dseg { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.dpick .dsegb {
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 11px; cursor: pointer;
}
.dpick .dsegb.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* 出勤の小窓の背景色（タスク背景色）の釦はその色の地。選んだものは地の色のまま枠で見せる（2026-09-28 夜）。
   色（出勤の色）はプルダウンの列で、選ぶと次の欄が出る。欄の地は選んだ色 */
.dpick .dsegb.hexed { background: var(--cbhex); border-color: var(--line); color: var(--tint-ink); }
.dpick .dsegb.hexed.rev { color: var(--tint-ink-rev); }
.dpick .dsegb.hexed.on { background: var(--cbhex); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.dpick .dshcolors { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.dpick .dshcolor { font: inherit; font-size: 11px; max-width: 78px; }
.dpick .dshcolor.hexed { background: var(--cbhex); color: var(--tint-ink); }
.dpick .dshcolor.hexed.rev { color: var(--tint-ink-rev); }
.dpick .dshnote { flex: 1; min-width: 0; font: inherit; font-size: 11px; resize: vertical; }
.dpick .dshfoot { display: flex; align-items: center; gap: 6px; }
.dpick .dshhint { flex: 1; min-width: 0; font-size: 10px; line-height: 1.3; color: var(--faint); }
/* 案内の文が長くても「保存」は縮めない（案内の方を折り返す） */
.dpick .dshfoot .btn { flex: none; }
/* メモの帯の小窓（2026-10-02）。時刻は 時・分 のプルダウン、内容は自由（改行も可） */
.dpick.tmpick { width: 340px; }
.dpick.tmpick:has(.tmheaven) { width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.tmheaven { border-top: 1px solid var(--line); margin: 6px 0; padding-top: 6px; }
.tmpick .btn.hvicon { border-color: #f07800; background: linear-gradient(#ff9500, #ff8100); color: #fff; font-weight: 700; }
.tmpick .btn.hvicon:disabled { opacity: .45; cursor: default; }
.hfc { min-width: 0; white-space: normal; font-size: 12px; line-height: 1.5; }
.hfstore { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.hfstore[hidden] { display: none; }
.hfstore select { max-width: 100%; min-width: 0; }
.hfselectbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hfselected { display: contents; }
.hfadd { position: relative; margin-top: 4px; }
.hfstart { position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hfstart select { font: inherit; font-variant-numeric: tabular-nums; }
.hfadd:has(.hfstart) > .hfdropdown > summary { margin-left: 104px; }
.hfchip { display: inline-flex; align-items: center; max-width: 100%; gap: 2px; padding: 2px 7px; border-radius: 14px; background: #e4eef9; color: #245884; }
.hfchip > span { overflow-wrap: anywhere; }
.hfchip button { border: 0; background: transparent; color: inherit; font: inherit; padding: 0 3px; cursor: pointer; min-width: 22px; min-height: 22px; }
.hfchip button:disabled { opacity: .4; cursor: default; }
.hfchip.missing { background: #fce5e2; color: var(--vermil); }
.hfdropdown { position: relative; min-width: 75px; }
.hfdropdown[open] { flex: 1 0 100%; }
.hfdropdown summary { cursor: pointer; display: inline-block; padding: 3px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper, #fff); }
.hfdropdown summary::marker { content: ""; }
.hfmenu { border: 1px solid var(--line); padding: 6px; margin-top: 4px; border-radius: 6px; background: var(--paper, #fff); }
.hfoptions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; }
.hfoption { border: 1px solid #cad6e0; border-radius: 4px; background: var(--paper, #fff); color: var(--text); font: inherit; padding: 4px 8px; cursor: pointer; text-align: left; white-space: normal; }
.hmmemo { flex: none; border: 1px solid #c7d3dd; border-radius: 13px; color: #657789; background: #fff; padding: 3px 9px; font: inherit; font-size: 11px; cursor: pointer; }
.hmmemo.on { color: #245884; background: #e4eef9; border-color: #81a9ce; }
.hmmemo:disabled { cursor: default; }
.hfoption:disabled { opacity: .5; cursor: default; }
.hfoption:focus-visible, .hfchip button:focus-visible, .hfdropdown summary:focus-visible { outline: 2px solid #2d689a; outline-offset: 2px; }
.hftotal { color: var(--dim); margin: 5px 0; font-size: 11px; white-space: normal; }
.hftotal.bad, .hfresult.bad { color: var(--vermil); }
.hfresult { overflow-wrap: anywhere; font-size: 11px; }
.hfactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.hfempty { color: var(--dim); font-size: 11px; }
/* メモの「ヘブン反映済みコース」と「追加コース」の見出し・反映済みの並び（memoflex-2026-10-24 #154） */
.hfhead { font-size: 11px; font-weight: 600; color: var(--dim); margin: 4px 0 2px; }
.hfdone { margin-bottom: 6px; }
.hfdone[hidden] { display: none; }
/* メモの開始が登録済みコースと食い違っているときの字（memotime-2026-10-26 #192）：［ヘブンネットへ反映］でずらす */
.hftime { margin: 0 0 6px; padding: 3px 7px; border-radius: 4px; background: #fff4dc; color: var(--text); font-size: 11px; overflow-wrap: anywhere; }
.hftime[hidden] { display: none; }
.hfdoneitem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 7px; margin-top: 2px; border-radius: 4px;
  background: #eef3ea; color: var(--text); font-variant-numeric: tabular-nums; }
.hfdoneitem.bad { background: #fce5e2; }
.hfdonestate { color: var(--dim); font-size: 11px; }
.hfdoneerr { flex: 1 0 100%; color: var(--vermil); font-size: 11px; }
.recordbar .hvctl:has(.hvfill) { flex-wrap: wrap; white-space: normal; min-width: 0; max-width: 100%; }
.recordbar .hvfill { flex: 1 0 100%; max-width: min(720px, 100%); }
.recordbar .hvfill .hfmenu { max-width: 680px; }
@media (max-width: 600px) { .hfchip { font-size: 11px; } .hfoption { max-width: 100%; } }
.dpick .tmwhen { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
.dpick .tmclock { font: inherit; font-size: 11px; }
.dpick .tmwave { margin: 0 3px; color: var(--dim); }
.dpick .tmbody { flex: 1; min-width: 0; font: inherit; font-size: 12px; resize: vertical; }
/* 状態の小窓（2026-09-28）。行は状態の色の地（伝票の窓のプルダウンと同じ）。今の状態は太字、指している行は字の色で縁取り */
.dpick .drow.hexed { background: var(--cbhex); color: var(--tint-ink); margin-top: 2px; }
.dpick .drow.hexed.rev { color: var(--tint-ink-rev); }
.dpick .drow.hexed:hover, .dpick .drow.hexed:focus-visible { background: var(--cbhex); box-shadow: inset 0 0 0 2px currentColor; }
.dpick .drow.hexed.now { font-weight: 700; }
/* プレイ中に変えたときの開始時刻の選択（2026-10-22）。
   受付台帳の状態の小窓では一覧の代わりに、伝票の窓ではキャストと状態の行のすぐ下に出す（確認の窓は出さない） */
.dpick .dask { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px 4px; }
.dpick .daskq { margin: 0; font-size: 12px; font-weight: 600; color: var(--text); }
.dpick .daskrow { display: flex; gap: 6px; justify-content: flex-end; }
/* 時・分は伝票と同じ1分単位のプルダウン。 */
.playclock, .playclock .wclock { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.playclock select { width: 48px; font: inherit; font-variant-numeric: tabular-nums; }
.playactions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* つないだ伝票をつまんで時刻を動かしたときの問い（2026-09-30 利用者）。今のヘブンの時刻と替えた先 */
.dpick .dasksub { margin: 0; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
/* 状態の小窓のいちばん下の［削除］（2026-10-02）。状態の並びとは線で分ける */
/* 真ん中に寄せる（同じ日 利用者「削除ボタンは この伝票を削除する で中央寄席」。前は右寄せ） */
.dpick .ddel { display: flex; justify-content: center; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.dpick .ddelask .daskrow { flex-wrap: wrap; }
/* 問いを出している間は［削除］を、削除の問いの間は部屋の欄も隠す（どちらも display: flex なので hidden だけでは消えない） */
.dpick .ddel[hidden], .dpick .droom[hidden] { display: none; }
.dpick.hvmove { width: 250px; }
.playask {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 3px; padding: 3px 6px; font-size: 11px; color: var(--text);
  background: var(--accent-wash); border: 1px solid var(--accent-edge); border-radius: 4px;
}
.playask .playactions { margin-left: auto; }
.bdivider { grid-column: 1 / -1; position: sticky; left: 0; padding: 5px 10px; font-size: 10px; color: var(--dim); background: var(--panel2); border-bottom: 1px solid var(--line2); }

/* ── 面（カードや箱） ─────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.box > h3 {
  margin: 0; padding: 6px 10px; font-size: 10px; letter-spacing: .1em; color: var(--dim);
  font-weight: 400; border-bottom: 1px solid var(--line2);
}
.box .inner { padding: 8px 10px; }
.rowline { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.rowline .lbl { color: var(--dim); font-size: 11px; }
.rowline .val { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rowline .val.big { font-size: 14px; font-weight: 500; }
.bar { height: 5px; background: var(--panel3); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.bar > i { display: block; height: 100%; background: var(--accent); }

.section { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

/* ── 入力 ─────────────────────────────────────────────────────── */
/* 日付・時刻・月の欄も同じ枠（2026-09-27 利用者「カレンダー系の枠がUIと合っていない」。前はここに入っておらず、
   ブラウザの黒い枠のままだった）。日付・月は押すと画面の小窓（.pickpop）。時刻は 時・分 のプルダウン（.wclock） */
input[type="text"], input[type="search"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="month"], select, textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px;
}
input::placeholder { color: var(--faint); }
/* 欄の右の印（カレンダー・時計）は薄く。押すとブラウザの選び口ではなく画面の小窓 */
/* 印と打つ欄のブラウザの余白は外す（外さないと、ほかの欄より 2px 高くなる） */
input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; margin: 0 0 0 3px; padding: 0; width: 1em; height: 1em; }
input::-webkit-datetime-edit, input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input:hover::-webkit-calendar-picker-indicator, input.picking::-webkit-calendar-picker-indicator { opacity: .9; }
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
/* 釦は 17:39 の「今風のまま案」の前の見た目に戻した（btnrevert-2026-10-03 利用者「今風のまま案　で直した　ボタンを全部　元に戻す」） */
.btn { border: 1px solid var(--line); border-radius: 4px; padding: 3px 10px; color: var(--dim); font-size: 11px; }
.btn:hover { color: var(--text); border-color: var(--faint); }
.btn.go { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-wash); }

label.field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--dim); margin-bottom: 7px; }
/* 「要」の印は見出しの横に小さく（縦に並ぶ欄では幅いっぱいに伸びてしまうため。2026-09-21） */
label.field .req { align-self: flex-start; }
label.field input { font-size: 12.5px; padding: 4px 7px; }
label.check {
  display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; cursor: pointer;
  font-size: 11.5px; color: var(--text); line-height: 1.45;
}
label.check input { margin-top: 2px; flex: none; }
label.check .sub { font-size: 10.5px; }
label.check input:disabled + span { color: var(--faint); }

.minibar {
  display: inline-block; width: 34px; height: 4px; margin-left: 6px; vertical-align: 2px;
  background: var(--panel3); border-radius: 2px; overflow: hidden;
}
.minibar > i { display: block; height: 100%; }
.drawer.wide { width: min(780px, 96vw); }
/* 面接シートの読み込みの窓（castdocread-2026-10-07）。自信の無い欄（要確認）は琥珀の地。参考は見出しと中身の 2 列 */
.sheetgrid th, .sheetgrid td { vertical-align: top; }
/* 面接シートの窓は横に流さない（sheetchip-2026-10-08 利用者「横スクロールが起きないように」）。表の基本は折り返さず横に送る決まりだが、
   窓の表は折り返し、幅は窓に合わせる。オプションは札を並べて押して付け替える（足す札は緑の枠・外す札は打ち消し線） */
.sheetgrid { table-layout: fixed; }
.sheetgrid thead th:first-child { width: 10em; }
.sheetgrid thead th:last-child { width: 6.5em; }
table.grid.sheetgrid td, table.grid.sheetgrid tbody th { white-space: normal; overflow-wrap: anywhere; }   /* table.grid td の nowrap より強く */
.sheetrefs dd { min-width: 0; overflow-wrap: anywhere; }
.sheetopts .chip.add { border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); }
.sheetopts .chip.del { color: var(--vermil); border-color: var(--vermil); text-decoration: line-through; }
.sheetoptdiff { margin-top: 5px; font-size: 11.5px; color: var(--dim); }
.sheetgrid tr.unsure td.sread { background: color-mix(in srgb, var(--amber) 16%, transparent); }
.sheetgrid .sneed { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.sheetrefs { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 6px 0 12px; font-size: 12px; }
.sheetrefs dt { color: var(--dim); }
.sheetrefs dd { margin: 0; }
.sheetacts { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
/* チェックの入った行の「いまの値」は置き換わるので線を引く・見出しの「すべて」・押せなかったときの知らせ・入れた欄の色（sheetfix-2026-10-07） */
.sheetgrid tr.take td.snow.has { text-decoration: line-through; color: var(--faint); }
.sheetall { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sheetwarn { margin-left: 6px; font-size: 12px; color: var(--dim); }
.sheetwarn.bad { color: var(--vermil); font-weight: 600; }
.sheetfilled { background-color: color-mix(in srgb, var(--amber) 16%, var(--panel)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 60%, transparent); }
.chipset.sheetfilled { border-radius: 8px; }
/* 面接シートの読み込みが、ほかの画面にいる間に終わったときの知らせ（右下。リモコンの丸い釦の上。sheetlive-2026-10-07） */
.sheettoast {
  position: fixed; right: 24px; bottom: 96px; z-index: 70; max-width: min(460px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; font-size: 12px;
  background: var(--panel); border: 1px solid var(--amber); border-radius: 6px; box-shadow: 0 8px 28px var(--shadow-drawer);
}
.sheettoast .x { color: var(--faint); padding: 0 4px; }
.sheettoast .x:hover { color: var(--text); }
.filerow .docread { margin-left: 6px; }

/* 書く欄の字と余白は入力の欄（label.field input）と同じ（proflines-2026-10-08 利用者「入力の　型　…　がバラバラ　他部分に合わせる」。前は 12px で、
   1 行の欄は入力の欄より 3px 低かった）。1 行の欄（住所・備考）は右下の伸ばす印を出さない（中身が収まらなければ fitTextareas が伸ばす） */
label.field textarea { font: inherit; font-size: 12.5px; padding: 4px 7px; resize: vertical; }
label.field textarea[rows="1"] { resize: none; }
label.field select { font-size: 12px; padding: 3px 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.storechip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 10px;
  font-size: 11.5px; color: var(--text); background: var(--panel2);
}
.storechip:hover { border-color: var(--accent-dim); color: var(--accent); }
.storechip .n {
  font-family: var(--mono); font-size: 9.5px; color: var(--dim);
  background: var(--bg); border-radius: 3px; padding: 0 5px;
}
.treemain {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line2);
}
.treemain:last-child { border-bottom: none; }
.treemain > .storechip { border-color: var(--accent-dim); }
.treesubs { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; padding-left: 14px;
            border-left: 1px solid var(--line); align-items: center; }
.treesubs .storechip { font-size: 10.5px; padding: 2px 8px; background: var(--panel); }

/* ── 台帳（core をそのまま直す画面） ───────────────────────────── */
.storechip.on {
  border-color: var(--accent); color: var(--accent); background: var(--panel3);
}
.storechip.on .n { color: var(--accent); }
.masterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.masterbar input[type="search"] {
  flex: 1 1 220px; min-width: 160px;
  font: inherit; font-size: 12px; padding: 4px 8px;
  color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 5px;
}
.masterbar input[type="search"]:focus {
  outline: none; border-color: var(--accent-dim); background: var(--panel3);
}
.masterbar label.check { padding: 0; white-space: nowrap; }
/* 帯の部品は高さをそろえる（2026-09-30 利用者「行を揃えて」）：追加の釦・プルダウン・探す欄・入り切りの札を 30px に。
   追加の釦はいちばん左に少し大きめ（同日「キャスト追加は一番左 グループの左少し大きめ」） */
.masterbar { --barh: 30px; }
.masterbar input[type="search"], .masterbar .combo > .cbin { height: var(--barh); }
.masterbar label.check.chipcheck > span { height: var(--barh); padding: 0 12px; border-radius: 15px; font-size: 11.5px; }
.masterbar .btn.madd { height: var(--barh); padding: 0 16px; font-size: 12.5px; font-weight: 600; border-radius: 5px; }
/* 必須の印は赤い *（paycol-2026-10-17 利用者「要　のチップ　は赤文字　*」。前は枠つきの小さな「要」の札） */
.req { font-size: 12px; font-weight: 700; color: var(--vermil); margin-left: 3px; vertical-align: 0; }
th.sortable {
  cursor: pointer; user-select: none; white-space: nowrap;
}
th.sortable:hover { color: var(--accent); }
th.sorted { color: var(--accent); }
th.sortable .ar { font-size: 9px; margin-left: 4px; vertical-align: 1px; }
.more {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 12px 0 4px;
}
.multi {
  display: flex; flex-wrap: wrap; gap: 2px 16px;
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px;
  background: var(--panel2);
}
.multi label.check { padding: 2px 0; }
/* 電話番号と媒体は囲いを出さない（2026-09-21 利用者「グレー背景不要」）。
   印を付けて選ぶ形（役割・できること）の囲いはそのまま */
.multi.textlist, .multi.chipset, .multi.picklist { border: 0; background: none; padding: 0; }
.ngrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--line2);
}
.ngrow:last-child { border-bottom: none; }
.ngrow .ngwhen { margin-left: auto; font-family: var(--mono); font-size: 10px; }
/* 根拠（備考の NG から登録したとき。memong-2026-10-26）は行の下に 1 段で */
.ngrow .ngbasis { flex: 1 1 100%; font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; }
/* スタッフのページの「ログイン」の箱（2026-09-30 利用者「スタッフ一覧とログインする人はスタッフ一覧に統合する」）。
   口の状態・見せる画面・操作 の 3 行 */
.stafflogin { display: flex; flex-direction: column; gap: 8px; }
.stafflogin .slrow, .stafflogin .slperms, .stafflogin .slacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stafflogin .sllogin b { font-family: var(--mono); }
.stafflogin .slnone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--dim); }
.grid .pill.login { margin-left: 4px; }
/* 一覧の年齢の升「1991/06/20 35歳」（2026-09-30）。折り返さず、数字の幅をそろえる */
.grid .birthage { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 写真と面接書類（2026-09-24 利用者）。写真は縮めて並べ、書類は 1 行ずつ（種類の札つき） */
.filepanel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.filegrid { display: flex; flex-wrap: wrap; gap: 8px; }
.filecard { width: 96px; display: flex; flex-direction: column; gap: 2px; }
.filecard img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--line); background: var(--panel2);
}
.filecard .nm { font-size: 9.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filecard .btn.tiny { padding: 1px 6px; font-size: 10px; }
.filerow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 0;
           border-bottom: 1px solid var(--line2); }
.filerow:last-child { border-bottom: none; }
.filerow .nm { font-size: 11.5px; color: var(--accent); }
.filerow .when { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.filekinds { display: flex; flex-wrap: wrap; gap: 4px; }
/* 種類をまだ選んでいない書類は、その場で分かるように（2026-09-24） */
.filerow .needkind { color: var(--vermil); font-size: 10.5px; }
.filekinds .chip { font-size: 10px; padding: 1px 6px; }
/* 面接書類の備考（docmaster-2026-10-08）。行の下に 1 行で */
.filerow .docnote { flex: 1 1 100%; font-size: 11.5px; }
.filerow input.docnote { padding: 3px 8px; }
.fileadd { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-wrap: wrap; }
.filedrophint { font-size: 10.5px; color: var(--faint); }
/* ドラッグして落とせる所（2026-09-24 利用者「画面でドラッグで保存できるように」） */
.filepanel { border-radius: 6px; transition: outline-color .12s, background .12s; }
.filepanel.dragging {
  outline: 2px dashed var(--accent); outline-offset: 4px; background: var(--accent-wash);
}
.fileadd .filemsg { font-size: 10.5px; }

/* NG の塊（顧客・スタッフ・キャストのページで同じ形。2026-09-24 利用者） */
.ngpanel { grid-column: 1 / -1; }
.ngpanel .nghits { display: flex; flex-wrap: wrap; gap: 6px; }
.ngadd { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ngadd input[type="search"] {
  font: inherit; font-size: 12px; padding: 4px 8px; color: var(--text);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
}
#nghits { display: flex; flex-wrap: wrap; gap: 6px; }
td .pill + .pill { margin-left: 3px; }

/* ── 状態 ─────────────────────────────────────────────────────── */
.empty { padding: 40px 16px; text-align: center; color: var(--faint); }
.empty b { display: block; color: var(--dim); font-weight: 500; margin-bottom: 4px; }
.loading { padding: 30px; text-align: center; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.err {
  margin: 14px 16px; padding: 10px 13px; border: 1px solid var(--vermil-dim);
  border-left: 3px solid var(--vermil); border-radius: 0 4px 4px 0;
  background: var(--vermil-wash); color: var(--text); font-size: 11.5px;
}
.notice {
  margin: 0 0 12px; padding: 9px 13px; border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0;
  background: var(--accent-wash); color: var(--dim); font-size: 11.5px;
}
.notice b { color: var(--text); font-weight: 500; }
.notice.warn { border-color: var(--amber-dim); border-left-color: var(--amber); background: var(--amber-wash); }
/* 日々の締め（2026-09-29 利用者「日々の締め … １ページで集約できるよね？？」）。額は右寄せ・マイナスは赤。清算人のプルダウンは表の中で小さく */
/* 見出しの行の左に日付の切り替え（closedate-2026-10-03） */
.closepage .closehead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; color: var(--dim); }
.closepage .closehead b { color: var(--text); font-weight: 600; }
.closepage .closewide { margin-top: 12px; }
.closepage .closegrid th.yen, .closepage .closegrid td.yen { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.closepage .closegrid tfoot td { border-top: 2px solid var(--line); font-weight: 600; }
/* ドライバー個人締めの見出しと事務所の行は青（タスク表の見出しと同じ色・白い字。2026-09-29 利用者「スタッフ … 持ち帰るはず　が青背景であって
   事務所も青背景」）。事務所の行のマイナスは濃い青の上でも読める赤 */
.closepage .drivergrid thead th { background: var(--board-head); color: var(--board-head-ink); border-bottom-color: var(--board-head-line); }
.closepage .drivergrid tr.office > td { background: var(--board-head); color: var(--board-head-ink); }
.closepage .drivergrid tr.office .closetoggle, .closepage .drivergrid tr.office .closetoggle .tw,
.closepage .drivergrid tr.office .csub { color: var(--board-head-ink); }
.closepage .drivergrid tr.office .cy.minus { color: var(--mark-red-rev); }
/* 事務所の横の「事務所金 ○○円」（どの計算にも入れない。2026-09-29 利用者「事務所の横に　事務所金○○円と表示して他の計算とは関与させない」） */
.closepage .drivergrid tr.office .fundtag { margin-left: 12px; font-size: 11px; color: var(--board-head-ink); opacity: .85; white-space: nowrap; }
.closepage .cy.minus { color: var(--vermil); }
.closepage .cy.strong { font-weight: 700; }
.closepage .crate { margin-left: 4px; font-size: 10px; color: var(--faint); }
.closepage .none { color: var(--faint); }
.closepage .rowline .val.bad { color: var(--vermil); }
/* 日報の全体・店舗集計（2026-10-21）。金額と確認内容を全体の箱に集める。 */
.closepage .closeoverview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.closepage .closeoverview > .box { min-width: 0; }
.closepage .reportwhole > .inner { padding: 12px; }
.closepage .reportcash { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; width: 100%; max-width: 300px; box-sizing: border-box; align-self: stretch; padding: 8px 10px; border: 1px solid var(--accent-edge); border-radius: 6px; background: var(--accent-wash); }
.closepage .reportcashlabel { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.closepage .reportcashlabel > span { font-size: 10px; padding: 0 5px; border: 1px solid var(--accent-edge); border-radius: 4px; color: var(--accent); }
.closepage .reportcash > strong { display: block; align-self: center; padding: 0; font-size: 36px; line-height: 1; text-align: left; white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.closepage .reportcash:has(.xfund) > strong { font-size: 30px; }
.closepage .reportcash > strong small { margin-left: 4px; font-size: 12px; font-weight: 500; }
.closepage .reportcash .reportunset { font-family: var(--sans); font-size: 18px; color: var(--dim); }
.closepage .reportcash .closefund { grid-column: 1 / -1; margin: 0; padding-top: 4px; border-top: 1px solid var(--accent-edge); color: var(--dim); }
.closepage .reportcash .closefund .fundyen { font-size: 12px; font-weight: 500; }
.closepage .reportmoney, .closepage .reportpapergrid { display: grid; grid-template-columns: minmax(240px, 260px) minmax(0, 1fr); gap: 12px; }
.closepage .reportpapergrid { margin-top: 12px; align-items: start; }
.closepage .reportsums { margin: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.closepage .reportsums .rowline { padding: 4px 0; gap: 8px; }
.closepage .reportsums .rowline .lbl, .closepage .reportspeciallabel { font-size: 12px; }
.closepage .reportsums .reportdetail { display: inline; margin: 0 0 0 6px; }
.closepage .reportdetail { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; line-height: 1.5; color: var(--dim); white-space: normal; overflow-wrap: anywhere; }
.closepage .reportexpected { border-top: 1px solid var(--line); margin-top: 3px; }
.closepage .reportexpected .lbl, .closepage .reportspeciallabel { color: var(--text); font-weight: 600; }
.closepage .reportexpected .val.big, .closepage .reportspecialsummary { font-size: 18px; }
.closepage .reportreceipts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.closepage .reportreceipts > div { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); }
.closepage .reportreceipts > div > span { font-size: 12px; font-weight: 600; }
.closepage .reportreceipts strong { font-size: 26px; line-height: 1.2; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.closepage .reportreceipts strong small { font-size: 11px; margin-left: 5px; font-weight: 400; }
.closepage .reportreceipts > div > small { font-size: 10px; color: var(--dim); }
.closepage .reportspecial { margin-top: 0; min-width: 0; }
.closepage .reportspecial h4 { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 2px 8px; margin: 0; font: inherit; }
.closepage .reportspeciallabel { white-space: nowrap; }
.closepage .reportspecialsummary { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.closepage .reportspecialcount { font-weight: 700; }
.closepage .reportspecialcount small { margin-left: 5px; font-size: 11px; font-weight: 400; }
.closepage .reportspecial p { margin: 3px 0 6px; font-size: 10px; color: var(--dim); }
.closepage .reportspeciallist { border: 1px solid var(--line); border-radius: 4px; }
.closepage .reportspecial .grid th, .closepage .reportspecial .grid td { padding: 6px 4px; font-size: 11px; }
.closepage .reportspecial .grid { width: 100%; }
.closepage .reportspecial .grid th { position: static; background: var(--panel2); }
.closepage .reportspecial .grid td { white-space: normal; overflow-wrap: anywhere; }
.closepage .reportspecial .grid td:nth-child(2) { white-space: nowrap; overflow-wrap: normal; }
.closepage .reportspecial .grid td.yen { white-space: nowrap; }
.closepage .reportspecial .grid th:first-child { width: 20%; }
.closepage .reportspecial .grid th:nth-child(2) { width: 18%; }
.closepage .reportspecial .grid th.yen { width: 1%; }
.closepage .reportcheck { display: flex; align-items: end; flex-wrap: wrap; gap: 7px 14px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.closepage .reportcheckfields { display: flex; flex: 1 1 520px; align-items: end; flex-wrap: wrap; gap: 7px; }
.closepage .reportcheckfields > label { display: grid; gap: 4px; min-width: 0; font-size: 11px; color: var(--dim); }
.closepage .reportcheckfields input, .closepage .reportcheckfields select { min-height: 30px; font-size: 12px; padding: 4px 6px; }
.closepage .reportchecker { flex: 0 1 220px; }
.closepage .reportchecker .closepick { width: 100%; min-width: 100px; }
.closepage .reportcheck .savestate { display: block; min-height: 15px; margin-top: 5px; font-size: 10px; }
.closepage .reportstores > h3 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.closepage .reportlegend { display: inline-flex; gap: 10px; font-size: 10px; font-weight: 400; }
.closepage .reportstores > .inner { overflow-x: auto; padding: 8px; }
.closepage .reportstores .grid { width: 100%; }
.closepage .reportstores .grid th, .closepage .reportstores .grid td { padding: 4px 7px; font-size: 12px; line-height: 1.4; }
.closepage .reportstores .grid th { white-space: nowrap; }
.closepage .reportstores .reportstore { white-space: nowrap; font-weight: 600; }
.closepage .reportstores .reportprofit { background: var(--accent-wash); }
.closepage .daychange { display: inline; margin-left: 5px; font-size: 10px; font-weight: 400; white-space: nowrap; }
.closepage .reportstoretoggle { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.closepage .reportstoretoggle .tw { display: inline-block; width: 10px; color: var(--dim); font-size: 10px; }
.closepage .reportstoretoggle[aria-expanded="true"] .tw { transform: rotate(90deg); }
.closepage .reportstoretoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.closepage .reportmain:has(.reportstoretoggle) { cursor: pointer; }
.closepage .reportmain:has(.reportstoretoggle):hover > td { background: var(--panel2); }
.closepage .reportsub > td { background: var(--panel2); }
.closepage .reportsub .reportstore { padding-left: 20px; font-weight: 400; color: var(--dim); }
.closepage .reportsub .kidmark { margin-right: 7px; color: var(--faint); }
.closepage .reportstores .up { color: var(--mark-red); }
.closepage .reportstores .down { color: var(--mark-blue); }
.closepage .daychange.neutral { color: var(--faint); }
:root[data-theme="dark"] .closepage .reportstores .up { color: var(--mark-red-rev); }
:root[data-theme="dark"] .closepage .reportstores .down { color: var(--mark-blue-rev); }
.closepage .reportformula { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin: 0; padding: 4px 14px 12px; font-size: 11px; color: var(--dim); }
@media (max-width: 1100px) { .closepage .closeoverview { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .closepage .reportmoney, .closepage .reportpapergrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .closepage .reportcash { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 10px; padding-top: 6px; padding-bottom: 6px; }
  .closepage .reportcashlabel { grid-column: 1; grid-row: 1; align-self: center; }
  .closepage .reportcash > strong { grid-column: 1 / -1; grid-row: 2; }
  .closepage .reportcash .closefund { grid-column: 2; grid-row: 1; justify-content: end; border-top-color: transparent; }
  .closepage .reportcash:has(.xfund) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
  .closepage .reportcash:has(.xfund) .closefund { grid-column: 1; grid-row: 3; justify-content: start; border-top-color: var(--accent-edge); }
  .closepage .reportcash:has(.xfund) > strong { font-size: 28px; }
}
.closepage .closepick { min-width: 110px; font-size: 12px; padding: 1px 4px; }
.closepage .closeadd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.closepage .closeadd input, .closepage .closeadd select { font-size: 12px; padding: 3px 6px; }
/* スタッフごとの締めとキャストの清算は幅 2 分の 1 で横に並べる（2026-09-29 利用者「幅２分の１でOK」）。狭い画面では縦に積む。
   半分の幅がドライバー個人締めの表の縮めた幅（下の drvfit。名前の長い日でも 803px＋箱の余白）に足りなければ縦に積む（drvfit-2026-10-30。
   前は 460px で、1280〜1880px の画面では表がはみ出していた）。横に並ぶのは 1920px の画面（拡大 100%）から */
.closepage .closehalf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(820px, 100%), 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
/* 左の列はドライバー個人締めと、その下に同じ幅の見比べ（closedate-2026-10-03）。見比べの表は入りきらなければ箱の中で横に送る */
.closepage .closecol { min-width: 0; }
.closepage .closecol > .closecmp > .inner { overflow-x: auto; }
.closepage .closegrid.tight th, .closepage .closegrid.tight td { padding: 3px 6px; font-size: 12px; }
.closepage .closegrid.tight th { white-space: nowrap; }
/* ドライバー個人締めの表が箱に入りきらないとき（drvfit-2026-10-30 利用者「日報報告　において　21インチ画面などで見ると　ドライバー個人締めが
   はみ出して見れなくなる　修正」）。前は 1920px の画面でも表（974px）が箱（845px）からはみ出し、所持総額・回収完了が右のキャストの清算の箱の
   下に隠れた。入りきるときは今のまま 1 行で、入りきらないときだけ名前の欄の「清算人 ○○（印刷 HH:MM）」を 2 行目へ、見出しの
   「キャスト支払い」「先渡し回収」を 2 行に折り返す（名前・釦・札の中では折り返さない。見出しは <wbr> の所だけ）。それでも半分の幅に
   入らない幅（1920px の 125%・150% など）は、上の .closehalf で上下に並べる */
.closepage .drivergrid > tbody > tr > td:first-child { white-space: normal; }
.closepage .drivergrid > tbody > tr > td:first-child > :not(.kmemo) { white-space: nowrap; }
.closepage .drivergrid.tight thead th { white-space: normal; word-break: keep-all; }
.closepage .csub { display: block; font-size: 10px; color: var(--faint); font-weight: 400; white-space: nowrap; }
/* キャストの清算は 1 行ずつ（2026-09-29 利用者「2行にしない」）。欄が多いので、入りきらなければ箱の中で横に送る */
.closepage .castinner { overflow-x: auto; }
.closepage .castgrid td.csettle .closepick { min-width: 110px; }
.closepage .castgrid .csettled { font-size: 12px; }
/* 回の札（渡し終えた回は時刻・まだ渡していない 2 回目からは「2回目」）と、まだ数えていない伝票（あと予約○）（2026-09-29） */
.closepage .castgrid .cround { margin-left: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.closepage .castgrid .cround.next { padding: 0 5px; border-radius: 4px; background: var(--accent-wash); color: var(--accent); }
.closepage .castgrid .cpend { margin-left: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; }
/* スタッフの名前を押すと経費の欄（2026-09-29 利用者「スタッフ事に展開して 経費入力可能に」） */
.closepage .closetoggle { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit;
  color: inherit; cursor: pointer; text-align: left; }
/* 行のどこを押しても開け閉め（closeui-2026-10-03 利用者「個人にリンクは付けずに　行クリックで展開」）。名前に下線を出さない。
   行に指の形と薄い地（事務所の青い行・回収完了／支払完了の灰色の行は地を替えない） */
.closepage tr.closeopen { cursor: pointer; }
.closepage tr.closeopen:not(.office):not(.done):hover > td { background: var(--panel2); }
.closepage .closetoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
.closepage .closetoggle .tw { display: inline-block; width: 10px; font-size: 10px; color: var(--faint); transition: transform .15s; }
.closepage .closetoggle[aria-expanded="true"] .tw { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .closepage .closetoggle .tw { transition: none; } }
/* 名前を押したときの子の行（2026-09-29 利用者「２枚目表記で　経費を表示　経費の金額の列は合わせる」）。マスタの子の行と同じ └ */
.closepage tr.closekid > td { background: var(--panel2); font-size: 12px; padding-top: 3px; padding-bottom: 3px; }
.closepage tr.closekid > td.kname { padding-left: 14px; color: var(--dim); }
.closepage tr.closekid .kidmark { margin: 0 6px 0 0; }
.closepage tr.closekid .kmemo { margin-left: 8px; font-size: 11px; color: var(--faint); }
.closepage tr.closekid .kwho { margin-left: 8px; font-size: 11px; color: var(--dim); }
.closepage .closeadd .xamount { width: 84px; text-align: right; }
.closepage .closeadd .xsign:disabled { opacity: 1; color: var(--text); background: var(--panel2); }
.closepage .closeadd .xmemo { flex: 1 1 120px; min-width: 100px; }
.closepage .closeadd .xhint { flex-basis: 100%; font-size: 11px; color: var(--dim); }
.closepage .closeadd .xhint:empty { display: none; }
.closepage tr.closekid .xauto { margin-left: 6px; font-size: 10px; color: var(--faint); white-space: nowrap; }
/* 本家の現金表から写した経費（mindmoney-2026-10-06） */
.closepage tr.closekid .xauto.xmind { padding: 0 5px; border: 1px solid var(--tone-dim); border-radius: 8px; color: var(--dim); }
/* 表の下の経費の欄（2026-09-29 利用者「経費追加は　下のでドライバーを選んで行う」） */
.closepage .closeadd .xwho { max-width: 180px; }
.closepage .closeaddnone { margin: 0 0 10px; font-size: 12px; }
/* 事務所金の欄（2026-09-29 利用者「経費入力上部に　事務所金入力ボックスを作る」） */
.closepage .closefund { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; }
.closepage .closefund .lbl { font-weight: 600; }
.closepage .closefund .xfund { width: 120px; text-align: right; font-size: 12px; padding: 3px 6px; }
.closepage .closefund .fundnote { font-size: 11px; color: var(--faint); }
.closepage .closefund .fundyen { font-size: 14px; font-variant-numeric: tabular-nums; }
/* 回収完了（2026-09-29 利用者「回収完了　ボタンを持ち帰るはず　の横に作る　クリックされた場合は　背景グレーで下に落ちる」） */
.closepage .closegrid th.closedone, .closepage .closegrid td.closedone { width: 1%; white-space: nowrap; text-align: right; }
.closepage .xdone { font-size: 11px; padding: 2px 8px; }
.closepage tr.done > td { background: var(--panel3); }
/* 回収完了のあとに変わった人（donechg-2026-10-04 利用者「完了したドライバーが他のドライバーの変更によって変更が起こった場合は赤背景で
   変更内容部分を表示する」→ donechg2-2026-10-04「その人全体を赤くして」）。完了の行の灰色の代わりに行全体を赤い地、変わった欄の下に小さく
   完了したときの数 */
.closepage tr.done.chg > td { background: color-mix(in srgb, var(--mark-red) 26%, var(--panel)); }
/* その下の行に赤い字で、だれの締め作業によって締め金額がいくら過剰・不足になったか（donechg3-2026-10-04）。地は上の行と同じ赤 */
.closepage tr.closewhy > td { padding-top: 0; color: var(--mark-red); font-size: 12px; font-weight: 700; text-align: left; white-space: normal; }
:root[data-theme="dark"] .closepage tr.closewhy > td { color: var(--mark-red-rev); }
.closepage .xdonemark { font-size: 11px; color: var(--dim); }
.closepage .closecmp { margin-top: 12px; }
.closepage .closecmp > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; }
.closepage .closecmp h4 { margin: 12px 0 4px; font-size: 12px; color: var(--dim); font-weight: 600; }
/* 見比べの場所（ホテル名・自宅：住所。closeplace-2026-10-03）。長ければ … で切る（乗せると全部） */
/* 中の span で切る（closecheck-2026-10-03。td の max-width は表の幅の決め方によって効かないことがある） */
/* 場所の名前は 14em で … で切る（表の幅を今とほぼ同じに）。提携ありは場所の次の欄（closetie-2026-10-03 利用者「ホテル代の前に欄を作って
   提携あり　の表記は揃えよう」） */
.closepage .closecmp td.cplace > .cpn { display: block; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closepage .closecmp td.ctie { white-space: nowrap; }
.closepage .closecmp .cptie { color: var(--jade); font-weight: 700; font-size: 11px; white-space: nowrap; }
.closepage .closecmp a.cmpslip { color: var(--accent); text-decoration: none; }
.closepage .closecmp a.cmpslip:hover { text-decoration: underline; }
/* ［詳細確認］（closecheck-2026-10-03）：名前の横の小さな釦。絞っている人は押した形。見比べの上の一言と太字の名前 */
.closepage .drivergrid .closeordergrip { display: inline-block; width: 14px; margin-right: 3px; color: var(--dim); cursor: grab; touch-action: none; user-select: none; vertical-align: baseline; }
.closepage .drivergrid .closeordergrip:active { cursor: grabbing; }
.closepage .drivergrid tr.drop-before > td { box-shadow: inset 0 2px 0 var(--accent); }
.closepage .drivergrid tr.drop-after > td { box-shadow: inset 0 -2px 0 var(--accent); }
.closepage .drivergrid tr.dragging { opacity: .55; }
.closepage #closeorder:not(:empty) { margin: 0 0 6px; }
.closepage .drivergrid .xcheck { margin-left: 8px; padding: 0 6px; font-size: 10.5px; line-height: 17px; }
.closepage .drivergrid .xcheck.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.closepage .closecmp .cmpwho { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: 12px; color: var(--dim); }
.closepage .closecmp .cmpwho b { color: var(--text); font-weight: 700; }
/* 絞った人の名前は太字の青（closelink-2026-10-03 利用者「詳細確認表示された際は　名前は　太文字　青文字」） */
.closepage .closecmp b.cmpme { color: var(--accent); font-weight: 700; }
/* 本家の伝票を自社の伝票の窓で見るときの知らせ（2026-09-28）。上の帯と中身のあいだ */
.notice.mindslip { margin: 6px 0 10px; line-height: 1.6; }
/* 本家のままではコースが合わない訳（coursefit-2026-10-18）と、保存で断るときの訳つきの字（長いときは 2 行まで・残りは乗せると出る） */
.notice .mcwhy { color: var(--vermil); }
.savestate.coursewhy { flex: 0 1 auto; min-width: 0; max-width: 520px; line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 本家の伝票を自社の伝票にすると金額が変わる知らせ（opfit-2026-10-18）。本家の伝票の窓の行と、本家から作った伝票の窓の頭の帯 */
.notice .mgline { margin-top: 3px; color: var(--vermil); }
.notice .mgline b, .notice.mindgap b { color: var(--vermil); font-weight: 600; }
.notice.mindgap { margin: 6px 0 10px; line-height: 1.6; color: var(--vermil); }
.notice.mindgap .mghint { color: var(--dim); font-size: 11px; }
.notice.mindgap.mgsame { display: none; }
.notice .mgline.mgsame { color: var(--jade); }
.notice .mgline.mgsame b { color: var(--jade); }
.mgnow, .mgdiff, .mgsum { font-variant-numeric: tabular-nums; }
/* 押す前の小窓（ほかの小窓 #overlay と電話の箱の上に重ねる） */
.mgwrap { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.mgwrap .mgscrim { position: absolute; inset: 0; background: var(--scrim); }
.mgwrap .mgask {
  position: relative; width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 16px 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--vermil); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22); font-size: 12px; display: flex; flex-direction: column; gap: 8px;
}
.mgwrap .mghead { font-size: 12.5px; font-weight: 600; color: var(--vermil); }
.mgwrap p { margin: 0; line-height: 1.6; }
.mgwrap .mgsum { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mgwrap .mgdrop { color: var(--text); }
.mgwrap .mgnote { color: var(--dim); font-size: 11px; }
.mgwrap .mgbtns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px; }
/* 備考の NG から NG キャストの登録を促す小窓（memong-2026-10-26）。行ごとに候補と根拠を並べるので広く・長ければ中で送る */
.mnwrap { padding-top: 8vh; }
.mnwrap .mgask { width: min(620px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto; }
.mnwrap .mgnote.warn { color: var(--amber); }
.mnwrap .mnitem { border-top: 1px solid var(--line2); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mnwrap .mnline { font-weight: 600; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mnwrap .mnmeta { color: var(--dim); font-size: 11px; }
.mnwrap .mncand { display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px; border: 1px solid var(--line2); border-radius: 5px; cursor: pointer; }
.mnwrap .mncand input { margin-top: 2px; flex: none; width: 15px; height: 15px; }
.mnwrap .mncand.on { border-color: var(--vermil); background: color-mix(in srgb, var(--vermil) 7%, transparent); }
.mnwrap .mnbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mnwrap .mnname { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mnwrap .mnev { color: var(--dim); font-size: 11px; overflow-wrap: anywhere; }
.mnwrap .mnwhy { color: var(--jade); font-size: 11px; font-weight: 600; }
/* ［ヘブンネット伝票読み込み］で開いた伝票の上の知らせ（2026-09-29）。つなげられなかったものは赤い字 */
.notice.heavenread { margin: 6px 0 10px; line-height: 1.6; }
.notice.heavenread .hrmiss { margin-top: 3px; font-size: 11px; color: var(--vermil); }
/* 見るだけの本家の伝票（中身は inert）では、札の ×（解除）とホテル追加の釦を出さない（押せないので） */
#rform[inert] .mclear, #rform[inert] .ptadd { display: none; }

.foot {
  padding: 6px 16px; background: var(--rail); border-top: 1px solid var(--line);
  font-size: 10px; color: var(--faint); display: flex; gap: 16px; flex-wrap: wrap; flex: none;
}
/* 下の帯は中身が無ければ出さない（受付台帳は説明を出さない。2026-09-28 利用者「は不要」）。知らせが入れば出る */
.foot:empty { display: none; }
.foot kbd { font-family: var(--mono); font-size: 9.5px; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--dim); }

/* ── ログイン ─────────────────────────────────────────────────── */
.signin {
  position: fixed; inset: 0; z-index: 80; background: var(--rail);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.signbox {
  width: 100%; max-width: 330px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 14px 40px var(--shadow-sign);
}
.signbrand {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 4px;
}
.signbrand i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.signbox label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); }
.signbox input { font-size: 12.5px; padding: 7px 9px; }
/* ブラウザの自動入力が白く塗るのを抑える（内側の影で地色を作る） */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--bg) inset;
  caret-color: var(--text);
}
.signgo { padding: 8px 12px; font-size: 12px; text-align: center; }
.signmsg { font-size: 11px; color: var(--dim); min-height: 1.3em; }
.signmsg.bad { color: var(--vermil); }
.signcode {
  display: flex; flex-direction: column; gap: 5px; padding: 11px 13px;
  border: 1px solid var(--accent-dim); border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0; background: var(--accent-wash);
  font-size: 11px; color: var(--dim);
}
.signcode b {
  font-family: var(--mono); font-size: 21px; font-weight: 600; color: var(--accent);
  letter-spacing: .1em;
}
.signfoot { font-size: 10px; color: var(--faint); border-top: 1px solid var(--line2); padding-top: 10px; }
/* 承認待ちの画面の訳（LINE の中・同じブラウザで前にも承認）と、端末のページの「同じブラウザの前の端末」（#172 devagain） */
.signhint { font-size: 11px; line-height: 1.55; color: var(--vermil); }
.devagain { margin-top: 3px; font-size: 10.5px; color: var(--vermil); white-space: nowrap; }

.whoami {
  margin-top: auto; padding: 10px 14px 8px; font-size: 10px; color: var(--dim);
  border-top: 1px solid var(--line2);
}
.whoami b { color: var(--text); font-weight: 500; font-size: 11px; }
.whoami span { color: var(--faint); }
.whoami .btn { margin-top: 6px; padding: 2px 9px; font-size: 10px; }
.whoami .lamp { margin-top: 6px; padding: 2px 9px; font-size: 10px; }
.whoami + .railfoot { margin-top: 0; }

/* ── 伝票の中身（引き出し） ───────────────────────────────────── */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  background: var(--panel); border-left: 1px solid var(--line); z-index: 60;
  display: flex; flex-direction: column; box-shadow: -12px 0 30px var(--shadow-drawer);
}
.drawer header { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.drawer header b { font-size: 13.5px; font-family: var(--mono); }
.drawer header .x { margin-left: auto; color: var(--dim); font-size: 15px; line-height: 1; }
.drawer .inner { padding: 10px 12px 20px; overflow: auto; }
/* キャストの詳細は 2026-09-23 からページ（一覧の表へ戻る形。利用者「案B（表へ戻る）」）。
   中身は店舗ページと同じ箱（基本／在籍・報酬／連絡先／プロフィール／メモ／オプション）で、保存と削除と目次は上の帯 */
.drawer .menubox { scroll-margin-top: 8px; }
.fieldhint { font-size: 10px; color: var(--faint); }
/* 掲載状況の欄の一言（非掲載で保存すると姫デコID・簡単ログインURL が消える・掲載中に戻すときは入れ直す。unlistclear-2026-10-19） */
.fieldhint.unlistnote { font-size: 11px; color: var(--vermil); line-height: 1.45; margin-top: 3px; }
/* ✓ が付くまで書けない欄（下待ち合わせの備考。2026-09-25 利用者） */
.field.off { opacity: .55; }
.hide { display: none !important; }

/* 伝票を出すモニターの釦と、その指定をやめる ✕（2026-09-25 利用者） */
.screenpick { display: inline-flex; align-items: center; gap: 2px; }
.screenpick .x {
  border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 4px; font-size: 12px;
}
.screenpick .x:hover { color: var(--vermil); }

/* 一覧の絞り込み（2026-09-25 利用者）。探す欄の隣に並べる */
.masterbar .mfilter { max-width: 190px; }
.masterbar.hasfilter input[type="search"] { flex: 0 1 260px; }

/* NG の理由は一覧のその場で直す（2026-09-25 利用者「アラート記載ではなく 編集も可能な形」） */
.ngrow .ngreason { flex: 1 1 140px; min-width: 100px; }
/* 理由は中身に合わせて伸びる書く欄（ngreason-2026-10-18）。つまんで伸ばす印は出さない・読むだけの理由も切らずに折り返す */
.ngrow textarea.ngreason { resize: none; line-height: 1.4; }
.ngrow > .ngsaid { flex: 1 1 140px; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ngrow .ngreason.kept { border-color: var(--jade); }
.ngpick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ngpick .ngwhy { flex: 1 1 160px; min-width: 120px; }

/* 書く欄は中身に合わせて伸びる（2026-09-25 利用者）。伸ばすので中のスクロールは出さない */
textarea { overflow-y: hidden; resize: vertical; }

/* 名前と電話の列は詰まりやすいので、最低の幅を決める
   （2026-09-25 利用者「電話 顧客 の幅はもっと余裕を」。顧客の一覧で名前が 114px しかなかった） */
table.grid th[data-by="name"], table.grid th[data-by="stage_name"],
table.grid th[data-by="display_name"] { min-width: 150px; }
table.grid th[data-by="tel"], table.grid th[data-by="mobile"],
table.grid th[data-by="tels"] { min-width: 165px; }

/* 伝票 1 枚の並び（2026-09-25 利用者「伝票イメージ 色分けや配置や文字サイズも参考に配置してみて」
   →「全然なってない。一旦 元画サンプル中心に UI 組んじゃおう。伝票はできるだけ内容詰めて、
   見やすさは保ちつつ、全項目を詰めるイメージ」）。

   本家の伝票画面と同じ作りにする ── **3 本の柱**（左＝桃・中＝黄・右＝薄灰）で、
   欄は **ラベルが左・入力が右の 1 行**。縦に詰めて、1 画面に全部入れる。
   字は台帳のほかの画面より一段小さい（本家も小さい）。 */
.slipform {
  /* 3 本の柱は同じ幅（slipeven-2026-10-13 利用者「伝票の広さを均等に」）。前は 左 290〜310px・中 残り全部・右 250〜310px で、
     別ウィンドウ（1180px）では 310／520／310 だった。いまは 3 等分（1180px で 380px ずつ）。
     左の柱の「作成者 … 最終更新者 …」は 310px で 1 行に収まるので、別ウィンドウの幅なら足りる（狭い画面では名前の末尾が「…」） */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 字は一回り小さく（2026-09-26 利用者「全体的に 文字サイズはもう一回り小さく」「作成者…よりもう少し大き目くらい」）。
     入力は 10.5px・項目名は 10px（作成者の行は 10px・その見出しは 9.5px） */
  gap: 6px; align-items: start; font-size: 10.5px;
  /* 項目名の幅。いちばん長い項目名がちょうど収まる幅にして、入力ボックスを左へ詰める
     （2026-09-26 利用者「入力ボックスはもっと左に詰める」）。7 文字の項目がある箱だけ広げる（下）。
     前は 4 文字（送ドラ・釣り回収・キャスト）の 46px。「釣り回収」が「先渡し回収」（5 文字・48px）になって「先渡し…」と切れていたので
     50px（label50-2026-10-18 利用者「伝票の　先渡し…が　はフル表記」）。左の柱の箱はみな同じ幅（欄の左端をそろえる） */
  --slip-label: 50px;
}
/* 伝票・場所・担当・備考 の箱は見出しを出さない（2026-09-26 利用者「伝票 場所 担当 備考 の大枠項目不要
   ボックス分けはそのまま」）。箱の枠と地色は残す */
#sbox-head > h3, #sbox-place > h3, #sbox-staff > h3, #sbox-note > h3, #sbox-money > h3 { display: none; }

/* 案内金額・回収金額（2026-09-26 利用者「備考ボックスの上に 案内金額 回収金額を表示」）。
   打つ欄ではないので白地にせず、額は少し大きく太く。回収金額＝案内金額 − ホテル代 */
.slipmoney { padding: 1px 0 3px; }
/* 上の段は 1 本の横並び（案内金額・チップ・額 … 右端に回収金額）。文字とチップは上下のまん中でそろえる
   （2026-09-27 利用者「この欄の文字やチップ 上下バランスを整える」） */
/* 大きさの違う字を 1 行に並べるので、まん中ではなく字の下の線（ベースライン）でそろえる（同じ夕 利用者「案内金額部分も
   文字もズレてる」。まん中でそろえると 12px と 16px で下の線が 1px ずれて見えた） */
.slipmoney .mtop { display: flex; align-items: baseline; gap: 6px; min-width: 0; min-height: 18px; }
/* 項目名は太字で、前の数字の色（地の字の色）。数字は赤（2026-09-27 利用者「数字は赤 案内金額 回収金額 は太文字 今の金額の色」）。
   回収金額がマイナス（ホテル代の打ち間違いなど）のときは、赤の上に薄い赤の地 */
.slipmoney .mlab { font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap; line-height: 1.2; }
.slipmoney .mval { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--vermil); line-height: 1.2; }
.slipmoney .mval.bad { background: var(--vermil-wash); border-radius: 3px; padding: 0 3px; }
/* 回収金額は右寄せで、太字なし・小さめ（同じ日 利用者「回収金額〇円は右寄せ 太字なし 小さめ」）。夜からはキャスト報酬の段（.msub）の右端 */
.slipmoney .mcollect { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.slipmoney .mcollect .mlab { font-size: 9.5px; font-weight: 400; }
.slipmoney .mcollect .mval { font-size: 10.5px; font-weight: 400; }
/* 案内金額の段は大きく、チップはやめて「現金」「カード」を文字で。現金は緑・カードは青で、額も同じ色
   （2026-09-27 夕 利用者「案内金額 カード 40,700円 はもっと大きく チップはやめる 案内金額 現金 もしくは カード
   現金は緑 カードは青 金額の色も 現金 カードで変わる」。その前の赤いチップはこれでやめた）。回収金額は右端で小さく赤のまま */
.slipmoney .mtop { min-height: 24px; }
.slipmoney .mtop > .mlab { font-size: 12px; }
/* 額のすぐ後ろに同じ大きさ・同じ色で（現金）（カード）。現金は赤・カードは青（同じ夕 利用者「金額横に同じ大きさで（現金）
   （カード）で表示 カードは青 現金は赤」。その前は 現金 緑 だった） */
.slipmoney .mguidebox { display: inline-flex; align-items: baseline; white-space: nowrap; }
.slipmoney .mguide, .slipmoney .mpaykind { font-size: 16px; font-weight: 700; line-height: 1.2; }
.slipmoney[data-pay="cash"] .mpaykind, .slipmoney[data-pay="cash"] .mguide { color: var(--vermil); }
.slipmoney[data-pay="card"] .mpaykind, .slipmoney[data-pay="card"] .mguide { color: var(--accent); }
/* 案内金額の内訳（割引 → イベント → コース → 追加項目 → 交通費 → オプション。マイナスは赤）。
   種類｜名前｜額｜（キャスト報酬）の 4 列（2026-09-27 利用者「金額の右にキャスト報酬を()で表示」）。
   内訳は読むだけなので、地は読むだけの色の 1 枚（同じ日「コース追加項目なども その背景」） */
.slipmoney .mbreak {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 1px 6px; align-items: baseline;
  margin-top: 4px; padding: 3px 5px; border-radius: 3px; background: var(--ro-bg); font-size: 10px; line-height: 1.35;
}
.slipmoney .mbreak:empty { display: none; }
.slipmoney .mbrow { display: contents; }
.slipmoney .mbkind { font-size: 9.5px; color: var(--faint); white-space: nowrap; }
.slipmoney .mbname { color: var(--dim); min-width: 0; overflow-wrap: anywhere; }
/* オプションの中身（コスプレも）は太字の赤。見出しの「オプション」と額はほかと同じ
   （2026-09-27 利用者「オプション はタイトル 内容 は太文字赤 金額はそのまま」） */
.slipmoney .mbname.mbhot { color: var(--vermil); font-weight: 700; }
.slipmoney .mbyen { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.slipmoney .mbyen.minus { color: var(--vermil); }
/* 金額の右の（キャスト報酬）は緑。ランク別でランクが決まらない行は（—）を薄く */
.slipmoney .mbback { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--jade); }
.slipmoney .mbback.unknown { color: var(--faint); cursor: help; }
/* 案内金額のすぐ下の段：左にキャスト報酬の合計（2026-09-27 利用者「案内金額下に キャスト報酬を表示」）、右端に回収金額
   （同じ日の夜「回収金額 -4,500円 は キャスト報酬の行 キャスト報酬は太文字なし」）。どちらも太字なしで、
   項目名は 9.5px・額は 10.5px にそろえ、字の下の線でそろえる。報酬が無いときも回収金額は右端 */
.slipmoney .msub { display: flex; align-items: baseline; gap: 2px 8px; margin-top: 3px; min-width: 0; }
.slipmoney .mreward { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; min-width: 0; font-size: 10.5px; }
.slipmoney .mreward:empty { display: none; }
.slipmoney .mrlab { font-size: 9.5px; font-weight: 400; color: var(--text); }
.slipmoney .mrval { font-weight: 400; color: var(--jade); font-variant-numeric: tabular-nums; }
.slipmoney .mrnote { font-size: 9.5px; color: var(--faint); }
/* 「ペースト用備考」は 7 文字（ポイントの箱は 2026-09-26 にやめた） */
#sbox-note { --slip-label: 76px; }
/* 備考・ペースト用備考は送ドラなどと同じ文字サイズ（2026-10-21 利用者）。見出し10px、入力11px */
#sbox-note .field > .fieldname { font-size: 10px; }
#sbox-note textarea { font-size: 11px; line-height: 1.35; }
.slipcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slipform .box { margin: 0; border-radius: 5px; }
.slipform .box > h3 {
  font-size: 10.5px; padding: 3px 8px; margin: 0;
  border-bottom: 1px solid var(--line2); background: transparent;
}
.slipform .inner { padding: 5px 8px 7px; }

/* 欄は 1 行（ラベル左・入力右）。本家と同じ詰め方 */
.slipform .recordgrid { grid-template-columns: 1fr; gap: 2px; }
.slipform .field {
  display: grid; grid-template-columns: var(--slip-label) minmax(0, 1fr); align-items: center; gap: 6px; margin: 0;
}
.slipform .field > .fieldname {
  /* 項目名は左寄せ（2026-09-26 利用者「項目を全て 左寄せ」） */
  font-size: 10px; line-height: 1.25; text-align: left; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 枠のある入力は幅も高さも食う。下線だけにして詰める（2026-09-25 利用者
   「ボックス入力が幅をとるなら ボックス入力はやめよう」）。打つ所は触ると分かるように色を変える */
.slipform input, .slipform select, .slipform textarea {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  /* 打てる所・選べる所は白（2026-09-26 利用者「プルダウンも変更できる項目はボックス内は白」）。
     地色の付いた柱の上でも、どこに入れるのかがすぐ分かる */
  background: var(--panel); font-size: 10.5px; padding: 1px 3px;
}
.slipform input, .slipform select { height: 20px; }
/* 伝票の欄の字と余白（2026-09-26 利用者「全体的に 文字サイズはもう一回り小さく」「作成者…よりもう少し大き目くらい」）。
   ほかの台帳の欄の決まり（label.field input：12.5px・余白 4px 7px）の方が詳細度で勝っていて、上の伝票の決まりが
   効いていなかった（入力は 12.5px のままだった）。label.field まで書いて伝票の決まりを通す。
   字は 11px（作成者の行は 10px）。プルダウンの右の余白（▾ の場所）は残す */
.slipform label.field input, .slipform label.field select, .slipform label.field textarea {
  font-size: 11px; padding-top: 1px; padding-bottom: 1px; padding-left: 3px;
}
.slipform label.field input:not(.cbin), .slipform label.field textarea { padding-right: 3px; }
/* 入力欄は欄の幅まで縮める。数を打つ欄はブラウザが最初から約 137px の幅を持たせるので、横に並べた狭い欄
   （釣り回収の横の「釣り」）ではみ出し、見出しの列が 0 に押しつぶされていた（2026-09-26） */
.slipform label.field input, .slipform label.field select, .slipform label.field textarea { min-width: 0; }
.slipform textarea { padding: 2px 3px; }
.slipform input:hover, .slipform select:hover, .slipform textarea:hover {
  border-bottom-color: var(--dim);
}
.slipform input:focus, .slipform select:focus, .slipform textarea:focus {
  outline: none; background: var(--panel); border-bottom-color: var(--accent);
}
.slipform .field { min-height: 21px; }

/* 作成者・更新者（読むだけ・横並び。2026-09-26 利用者「一番上」「横並び」） */
/* いつも 1 行（折り返さない）。4〜5 文字の名前までは全部出る幅にしてあり、それより長い名前だけ末尾が「…」になる
   （マウスを乗せると全部出る）。左の柱を 310px に細くした（2026-09-26）ときに 2 行へ折り返したので直した */
.slipwho { display: flex; gap: 8px; flex-wrap: nowrap; font-size: 10px; padding-bottom: 2px; min-width: 0; }
.slipwho .wpair { display: inline-flex; align-items: baseline; gap: 3px; min-width: 0; white-space: nowrap; }
.slipwho .wlab { color: var(--faint); font-size: 9.5px; flex: none; }
.slipwho .wwho { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 名前は切らない（slipwho-2026-10-19 利用者「最終更新者　最終更新 名前 時間　名前隠れないように」）。入らないときは時刻だけその組の次の行へ
   （最終更新者は右の列の頭にそろえたまま）。上の「…」の決まりはここで外す */
.slipform .slipwho .wpair { flex-wrap: wrap; row-gap: 0; }
.slipform .slipwho .wwho { flex: none; overflow: visible; text-overflow: clip; }
.slipwho .wval { color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
/* 最終更新者は下の欄の右の列（媒体・状態）の頭にそろえる（2026-09-30 利用者「最終更新で 行がづれてるから整える」。前は作成者のすぐ後ろに
   続けたので、作成者の名前の長さで位置が動き、右の列とずれていた）。幅の決め方は下の 2 つ並びの欄（.fieldline）と同じ。
   最終更新者に乗せると変更の記録（見出しに点線） */
.slipform .slipwho .wpair:first-child { flex: 1 1 58%; }
.slipform .slipwho .wpair + .wpair { flex: 1 1 42%; }
.slipwho .wpair.haslog { cursor: help; }
.slipwho .wpair.haslog .wlab { text-decoration: underline dotted; text-underline-offset: 2px; }

/* 横に並べる欄の組（2026-09-26 利用者「店舗 状態の順で横並び」）。
   1 つ目は上の欄と項目名の幅を揃え、2 つ目は項目名を詰める */
.fieldline { display: flex; gap: 8px; min-width: 0; }
.fieldline > .field { min-width: 0; }
.slipform .fieldline > .field:first-child { flex: 1 1 58%; }
.slipform .fieldline > .field + .field { flex: 1 1 42%; grid-template-columns: auto minmax(0, 1fr); }

/* 日時は「日付」と「時刻」を横に並べる（2026-09-26 利用者） */
.whenpair { display: flex; gap: 4px; min-width: 0; }
.whenpair .wdate { flex: 1 1 auto; min-width: 0; }
/* 時刻は 時・分 の 2 つのプルダウン（2026-09-27 利用者「時間はプルダウンに変更」）。数字 2 桁と ▾ が入る幅で、日付の欄が残りを使う */
/* プルダウンはほかと同じ検索付き（.combo・一覧は .cbpop）。包まれると入力欄の既定の幅（約 150px）になるので詰める */
.whenpair .wclock { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.whenpair .wclock .combo { width: 48px; flex: none; }
.slipform .whenpair .wclock .combo { width: 38px; }
/* 伝票の日時の行（whenblue-2026-10-19 利用者「日時をもっと大きくする　時間と分はやはり別々の枠でプルダウン」「もっとわかりやすい　UIにできる？？」
   「文字感　はいい感じもうちょっと目出させれる？？　1行で問題ないが　枠に囲って　青背景で目立つように」「深夜説明は不要」）：行ごと青い地の枠で囲い、
   日付・時・分はそれぞれ白い箱（15px の太字）。時と分は別々の ▾ のプルダウンで、後ろに「時」「分」。曜日は出さない（whenrow-2026-10-20
   台帳 #134 利用者「日時　曜日不要　できるだけ１行で」）。1 行に入る幅（左の柱 320px まで 15px のまま。細いときは下の @container で詰める）。日付の欄のカレンダーの印は出さない（押すと画面の日付の小窓が開く）。10/18 の slipwhen（下線 1 本の箱）はやめた */
.slipform label.field:has(.whenpair[data-biz]) {
  --when-bg: #e3eeff; --when-edge: #5b8fdc; --when-box: #8fb3e8; --when-ink: #1d4ea3;
  background: var(--when-bg); border: 1.5px solid var(--when-edge); border-radius: 6px; padding: 5px 6px; margin: 2px 0 4px;
  grid-template-columns: 46px minmax(0, 1fr);
}
:root[data-theme="dark"] .slipform label.field:has(.whenpair[data-biz]) { --when-bg: rgba(108, 176, 234, .14); --when-edge: #4a7fb8; --when-box: #3d6a99; --when-ink: #9cc8f0; }
.slipform label.field:has(.whenpair[data-biz]) > .fieldname { color: var(--when-ink); font-weight: 700; font-size: 12px; }
.slipform .whenpair[data-biz] { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 3px; container: whenrow / inline-size; }
.slipform .whenpair[data-biz] .wdate, .slipform .whenpair[data-biz] .wclock .combo > .cbin {
  font-size: 15px; font-weight: 600; height: 28px; border: 1px solid var(--when-box); border-radius: 4px; background-color: var(--panel);
}
.slipform .whenpair[data-biz] .wdate { flex: none; field-sizing: content; padding: 0 5px; }
.slipform .whenpair[data-biz] .wdate::-webkit-calendar-picker-indicator { display: none; }
.slipform .whenpair[data-biz] .wdate:hover, .slipform .whenpair[data-biz] .wclock .combo > .cbin:hover { border-color: var(--dim); }
.slipform .whenpair[data-biz] .wdate:focus, .slipform .whenpair[data-biz] .wclock .combo > .cbin:focus { border-color: var(--accent); }
.slipform .whenpair[data-biz] .wclock { gap: 0; }
.slipform .whenpair[data-biz] .wclock .combo { width: 42px; }
.slipform .whenpair[data-biz] .wclock .combo > .cbin {
  text-align: center; padding-left: 2px; padding-right: 13px; background-position: right 7px center, right 3px center;
}
.slipform .whenpair[data-biz] .wunit { font-size: 12px; margin: 0 3px 0 2px; color: var(--when-ink); }
/* 入らない幅になったときだけ字と枠を 1 段ずつ詰める（whenrow-2026-10-20。白い別々の枠・太字・「時」「分」は保つ。伝票の窓の柱は 3 等分なので
   窓が細いと左の柱も細くなる。#101 の参考URL の柱を開いたときも）。それでも入らないときだけ折れる */
@container whenrow (max-width: 232px) {
  .slipform .whenpair[data-biz] .wdate, .slipform .whenpair[data-biz] .wclock .combo > .cbin { font-size: 13.5px; height: 26px; }
  .slipform .whenpair[data-biz] .wdate { padding: 0 3px; }
  .slipform .whenpair[data-biz] .wclock .combo { width: 36px; }
  .slipform .whenpair[data-biz] .wclock .combo > .cbin { padding-right: 11px; background-position: right 6px center, right 2px center; }
  .slipform .whenpair[data-biz] .wunit { font-size: 11px; margin: 0 2px 0 1px; }
}
@container whenrow (max-width: 200px) {
  .slipform .whenpair[data-biz] .wdate, .slipform .whenpair[data-biz] .wclock .combo > .cbin { font-size: 12px; height: 24px; }
  .slipform .whenpair[data-biz] .wdate { padding: 0 2px; }
  .slipform .whenpair[data-biz] .wclock .combo { width: 32px; }
  .slipform .whenpair[data-biz] .wclock .combo > .cbin { padding-left: 1px; padding-right: 10px; }
  .slipform .whenpair[data-biz] .wunit { font-size: 10.5px; margin: 0 1px; }
}
@container whenrow (max-width: 170px) {
  .slipform .whenpair[data-biz] .wdate, .slipform .whenpair[data-biz] .wclock .combo > .cbin { font-size: 11px; height: 22px; }
  .slipform .whenpair[data-biz] .wdate { padding: 0 1px; }
  .slipform .whenpair[data-biz] .wclock .combo { width: 28px; }
  .slipform .whenpair[data-biz] .wclock .combo > .cbin { padding-right: 9px; background-position: right 5px center, right 1px center; }
  .slipform .whenpair[data-biz] .wunit { font-size: 10px; margin: 0; }
}
.whenpair .wclock .cbin { font-variant-numeric: tabular-nums; }
.whenpair .wcolon { color: var(--faint); padding: 0 1px; }

/* 選んだホテルの中身（2026-09-26 利用者「ホテルが選ばれたら 住所 電話番号 … 入り方 入り方の備考 を表示」）。
   読むだけなので白地にしない。項目名の幅は上の欄と揃える（長い「入り方の備考」は 2 行に折り返す） */
.venueinfo {
  display: grid; grid-template-columns: var(--slip-label) minmax(0, 1fr); gap: 1px 6px;
  align-items: center;
  padding: 1px 0 3px; font-size: 10px; line-height: 1.3;
}
.venueinfo:empty { display: none; }
.venueinfo .vrow { display: contents; }
.venueinfo .vlab { color: var(--faint); font-size: 9.5px; }
.venueinfo .vval { min-width: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.venueinfo .vnone { color: var(--faint); }
.venueinfo .vtie { color: var(--jade); font-weight: 600; }
.venueinfo .vrate { color: var(--dim); margin-left: 6px; font-variant-numeric: tabular-nums; }
.venueinfo .bad { color: var(--vermil); }

/* 場所の箱の「ホテル」「自宅」のタブ（2026-09-26 利用者）。自宅のあいだはホテルの欄を隠す。
   タブは箱の上辺に載せる（利用者「ホテルと自宅タブを左に寄せて 自宅より右部分は背景なしの白」＋参考の絵）。
   箱そのものは地も枠も持たず、桃の地と枠は中身（.inner）に付ける。タブは中身の左端にそろえ、タブより右は塗らない。
   選んだタブは中身と同じ地の色で、中身の上の線を消してつながる（利用者「タブ行は タブが背景じゃないとおかしい」）。
   選んでいないタブは薄いグレー（2026-09-26 利用者「選ばれてないタブ背景は 薄グレー」） */
#sbox-place.box { background: transparent; border: 0; border-radius: 0; }
#sbox-place > .inner { background: var(--slip-left); border: 1px solid var(--line); border-radius: 0 5px 5px 5px; }
.placetabs { display: flex; gap: 2px; }
.placetabs .ptab {
  font: inherit; font-size: 10.5px; padding: 2px 16px 3px; margin-bottom: -1px; cursor: pointer;
  position: relative;             /* 中身の上の線より手前に描く（選んだタブが線を消す） */
  border: 1px solid var(--line); border-radius: 4px 4px 0 0;
  color: var(--dim); background: var(--panel2);   /* #ececee は濃いと言われ、いちばん薄いグレーへ（同日） */
}
.placetabs .ptab:hover { color: var(--text); }
.placetabs .ptab[aria-selected="true"] {
  color: var(--text); font-weight: 600; background: var(--slip-left); border-bottom-color: var(--slip-left);
}
#sbox-place.home .hotelpart { display: none; }
/* ホテル追加（2026-09-27 利用者「ホテル 自宅 タブ の行の右寄せでホテル追加 ボタンを作成 ボタンを押したら タブ追加されて …」）。
   タブの行の右端に釦（タブの下の線にはかけない）。押すと「ホテル追加」のタブが増え、そのあいだ中身はホテル追加の箱だけ
   （ホテルの欄も自宅の中身も隠す）。項目名の列は「入り方の備考」（6 文字）が 1 行に収まる幅 */
.placetabs .ptadd { margin: 0 0 3px auto; align-self: flex-end; font-size: 10px; padding: 1px 10px 2px; }
#sbox-place:not(.adding) .addbox { display: none; }
#sbox-place.adding .hotelpart, #sbox-place.adding .homebox { display: none; }
.addbox { --slip-label: 58px; }
.addbox .addform { margin-top: 4px; padding-top: 5px; border-top: 1px dashed var(--line); align-items: center; gap: 2px 6px; }
.addbox .addform .vlab { white-space: nowrap; }
.addbox .gin { width: 100%; box-sizing: border-box; padding: 1px 5px; }
.addbox .addform .combo { width: 100%; }
.addbox .addknown { margin-left: 6px; font-size: 9px; font-weight: 600; color: var(--amber); }
.addfoot { display: flex; align-items: center; gap: 6px; padding: 6px 0 3px; }
.addmsg { font-size: 10px; color: var(--dim); }
.addmsg.bad { color: var(--vermil); }
#sbox-place:not(.home) .homebox { display: none; }
.homenote { font-size: 10px; color: var(--dim); padding: 2px 0 4px; }
.homenote.bad { color: var(--vermil); }
/* 読むだけの中身に地の色（2026-09-26 利用者「住所 電話番号 入り方 の内容にも背景を付ける」） */
/* 読むだけなので、打てる欄の白ではなく --ro-bg（2026-09-27 利用者「編集できない事の差別化」） */
.venueinfo .vval.vbox { display: flex; align-items: center; min-height: 20px; box-sizing: border-box; background: var(--ro-bg); border-bottom: 1px solid var(--line); padding: 1px 3px; }
.venueinfo .vval.vbox > .gline { width: 100%; align-items: center; }
.venueinfo .vval.vbox > .gline > span:first-child { display: inline-flex; align-items: center; min-width: 0; }
.venueinfo .vval .btn.mini { font-size: 9.5px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
/* 住所・距離検索（業務管理ツールと同じ決まり） */
.routeask { display: flex; gap: 4px; padding-bottom: 4px; }
.routeask[hidden] { display: none; }    /* 店舗が選ばれていないあいだは「店舗を選択してください。」だけ */
.routeask .routeq { flex: 1 1 auto; min-width: 0; }
/* 検索の釦を欄と同じ高さにそろえる（btnfix-2026-10-03 利用者「検索ボタンがずれている」）。前は flex の stretch のまま、釦（24px）が
   欄（伝票の窓の 1 行の欄 20px）より高く下へはみ出していた。お客様の［検索］（.gask .btn）と同じ形 */
.routeask { align-items: center; }
.routeask .btn { flex: none; height: 20px; padding: 0 10px; font-size: 10px; line-height: 18px; }
.routeinfo .rhw { margin-left: 6px; font-size: 9.5px; color: var(--dim); }
.routeinfo .rhw.on { color: var(--amber); font-weight: 600; }
.routeinfo .rcount { font-weight: 600; margin-right: 6px; }
.routeinfo .rpicks { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.routeinfo .rpick {
  font: inherit; font-size: 10px; text-align: left; cursor: pointer; padding: 2px 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
}
.routeinfo .rpick.on { border-color: var(--steel); color: var(--steel); }
.routeinfo .rpick .n { display: block; color: var(--faint); font-size: 9px; }
.routeattr { display: flex; gap: 8px; font-size: 9px; color: var(--faint); }
.routeattr .rasked { min-width: 0; overflow-wrap: anywhere; }
.routeattr .rfrom { margin-left: auto; white-space: nowrap; }
/* 住所・［登録］・コピーのアイコン（2026-09-26 利用者「登録ボタンと作って」「コピーはアイコンで」）。
   「グーグル用」（5 文字）が折れないよう、住所まわりの項目名は折り返さない */
/* 最速の上の「表示住所から車で」（項目名の列もまたいで 1 行）。右端に Google Maps の帰属表示（規約で必須） */
.venueinfo .rfromline {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px;
  font-size: 9.5px; color: var(--dim); padding-top: 3px;
}
.venueinfo .rfromline .gattr { color: var(--faint); font-size: 9px; white-space: nowrap; }
/* 経路が出ていないとき（店舗が選ばれていない・顧客ページ）の Google Maps の帰属表示。いちばん下の行の右 */
.venueinfo .gattrline { grid-column: 1 / -1; text-align: right; font-size: 9px; color: var(--faint); padding-top: 2px; }
.guesthome .venueinfo .rfromline { font-size: 10.5px; }
/* 自宅タブ（2026-09-26 利用者「住所マンション名部屋番 ペット有無 で表示すればよい」）。
   項目名の列は「マンション名」（6 文字）が 1 行に収まる幅。［登録］した結果の知らせは緑 */
.homebox { --slip-label: 58px; }
.homemsg { font-size: 10px; color: var(--jade); }
.homemsg:empty { display: none; }
.homemsg.bad { color: var(--vermil); }
.routeinfo .vlab { white-space: nowrap; }
.venueinfo .hpet { color: var(--amber); font-weight: 600; }
/* 伝票の窓の自宅・ホテルのタブの中身（homelook-2026-10-24 #159 利用者「文字を　備考の文字サイズと同じ大きさに　背景てきに見ずらい　もっと見やすい背景に　ペット有の場合はもっとわかりやすく　見やすいUIを考えて」→ 答え「案C（白い札＋上に琥珀の帯）で。ホテルのタブも同じ見た目にそろえて」）。
   字は伝票の備考（#sbox-note textarea 11px・項目名 10px）と同じ。読むだけの中身は枠のない白い札にする（打てる欄は枠のある箱なので見分けがつく。
   9/27「編集できない事の差別化」）。前は桃色の列の上に桃色の地（--slip-left-ro）で読みにくかった。
   ペット有は札のいちばん上の琥珀の帯（petBandHtml）、手動登録の注意は札の下の淡い赤の帯（.warnband）。行の高さは 22px まで */
.slipform .homesaved > .venueinfo, .slipform .venueinfo.hotelpart {
  background: var(--panel); border: 1px solid var(--slip-left-edge); border-radius: 4px;
  padding: 2px 6px; gap: 0 8px; font-size: 11px; line-height: 1.35;
}
.slipform .homesaved > .venueinfo .vlab, .slipform .venueinfo.hotelpart .vlab { font-size: 10px; }
.slipform .homesaved > .venueinfo .vval.vbox, .slipform .venueinfo.hotelpart .vval.vbox {
  min-height: 22px; background: transparent; border-bottom: 1px solid var(--line2); padding: 2px 0;
}
.slipform .homesaved > .venueinfo .vrow:last-child > .vval.vbox, .slipform .venueinfo.hotelpart .vrow:last-child > .vval.vbox { border-bottom: 0; }
.venueinfo .petband {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 3px 0 2px; padding: 3px 6px;
  background: var(--pet-bg); border: 1px solid var(--pet-edge); border-radius: 3px; font-size: 11px;
}
.venueinfo .petband .petpill { flex: none; background: var(--amber); color: var(--pet-ink); font-weight: 700; border-radius: 3px; padding: 0 6px; line-height: 18px; }
.venueinfo .petband .petkind { min-width: 0; font-weight: 700; color: var(--amber); overflow-wrap: anywhere; }
.venueinfo .warnband {
  grid-column: 1 / -1; margin-top: 3px; padding: 4px 6px; border-radius: 3px;
  background: var(--warn-bg); color: var(--vermil); font-weight: 600; font-size: 11px;
}
.slipform .homesaved > .venueinfo .warnband { margin: 3px -6px -2px; border-radius: 0 0 3px 3px; }
/* ［編集］を押すまで住所・距離検索は出さない（登録がある人） */
.homebox .routebox { margin-top: 4px; }
.homebox .routebox[hidden] { display: none; }
.copyicon {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: 0 0 18px; align-self: center; line-height: 1;
  width: 18px; height: 16px; margin-left: 4px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: var(--faint); cursor: pointer;
}
.copyicon:hover { color: var(--accent); background: var(--accent-wash); }
.copyicon:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 1px; }
.copyicon.done { color: var(--jade); }
.copyicon.bad { color: var(--vermil); }
/* 検索のあと［登録］の前に直す欄（2026-09-26 利用者「検索後に 部屋番やペットも編集させよう」）。
   マンション名・部屋番号・ペット（有のときだけ内容）。項目名の列は上の結果とそろえる */
.routereg { margin-top: 3px; padding: 4px 0 2px; border-top: 1px dashed var(--line); }
.routereg .venueinfo { align-items: center; gap: 2px 6px; padding: 0; }
.routereg .venueinfo .vlab { white-space: nowrap; }
.routereg .gin { width: 100%; box-sizing: border-box; padding: 1px 5px; }
.routereg .rpet { display: flex; align-items: center; gap: 4px; }
.routereg .rpet > .combo, .routereg .rpet > select { flex: 0 0 64px; }
.routereg .rpet > .gin { flex: 1 1 auto; min-width: 0; }
.routereg .rpet > [hidden] { display: none; }
/* 建物の名前では見つからず住所で探したときの一言（nosimilar-2026-10-20） */
.routeinfo .rbyaddr { font-size: 10px; color: var(--faint); }
/* 手動登録（manualhome-2026-10-24）：促しの一言・注意と［再検索］。欄は［登録］と同じ */
.routemanual .homenote { margin-bottom: 3px; }
.routemanual .rmanualwarn { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 10.5px; color: var(--vermil); }
.routemanual .rmanualwarn .btn { flex: none; padding: 1px 12px; font-size: 10.5px; }
.guestinfo .rmanualwarn { font-size: 10.5px; color: var(--vermil); }
.routereg .regbtns {
  display: flex; align-items: center; gap: 8px; padding-top: 4px; padding-left: calc(var(--slip-label) + 6px);
}
.routereg .btn { padding: 1px 16px; font-size: 10.5px; }
.routereg .regnote { font-size: 10px; color: var(--jade); }
.routereg .regnote.bad { color: var(--vermil); }
/* 検索のあとも住所・住所備考をその場で直す（routeedit-2026-10-20）。住所の欄は結果の箱の中・住所備考は複数行 */
.routeout .routeinfo .gin { width: 100%; box-sizing: border-box; padding: 1px 5px; }
.routereg textarea.gin { height: auto; padding: 3px 5px; line-height: 1.4; resize: vertical; white-space: pre-wrap; }
/* 顧客ページの住所（伝票の外なので、項目名の幅はここで決める） */
.guesthome { --slip-label: 64px; }
.guesthome .venueinfo { font-size: 11.5px; }
.guesthome .venueinfo .vlab { font-size: 10.5px; white-space: nowrap; }
.guesthome .routeattr { font-size: 10px; }
/* 検索付きプルダウンの見出し（選べない小さな字。エリアの都道府県など） */
.cbpop .cbhead { padding: 4px 8px 1px; font-size: 9.5px; color: var(--faint); cursor: default; }

/* 店舗の参考URL（2026-09-26 利用者「店舗の下に小さく 参考URL という名前でURLリンク」）。入力の列に揃える。
   リンクと分かるように青に下線（同じ日「参考URLは アンダーラインを付けて 文字色を青に変えて リンクとわかるように」）。
   横に店舗エリアの名前を文字で（リンクにしない。同じ日「参考URL横にエリアをリンクなしで表示」）。
   字は 12.5px（入力欄の 11px より一回り大きく）・「エリア：安城」の形でエリアの名前は太字（slipdetail-2026-10-19 利用者「参考URL　エリア　は
   もっと大きく表示　　エリア：安城　のように表示」→ 答え「12.5px」。前は 9.5px） */
.slipref {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px;
  padding-left: calc(var(--slip-label) + 6px); margin: 1px 0 2px; line-height: 1.3;
}
.slipref:empty { display: none; }
.slipref a { font-size: 12.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.slipref a:hover { text-decoration-thickness: 2px; }
.slipref .sliparea { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.slipref .sliparea b { font-weight: 700; }
/* 参考URL のポップアップが止められたときの知らせ（refpop-2026-10-19。伝票の窓の参考URL の行・店舗ページの参考URL の欄の下） */
.refblock { font-size: 11px; color: var(--vermil); overflow-wrap: anywhere; }
/* 伝票の窓の参考URL の柱（refslide-2026-10-19 利用者「伝票を広げて　料金コースの横に　参考URLをスマホサイズで開く」→ 答え
   「コース・オプション　の右」）。押したときだけ 4 本目の柱（400px）に、ページをスマホの幅（390px）で出す。狭い画面（1 本の柱）では下に並ぶ */
@media (min-width: 881px) {
  .slipform.withref { grid-template-columns: repeat(3, minmax(0, 1fr)) 400px; }
}
.refpanel {
  position: sticky; top: 4px; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel); overflow: hidden;
}
.refpanel .refhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 3px 6px; border-bottom: 1px solid var(--line); font-size: 11px; }
.refpanel .refhead b { font-size: 11.5px; }
.refpanel .refhost { flex: 1 1 auto; min-width: 0; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refpanel .refhead .refblock { flex-basis: 100%; }
.refpanel .refframe { width: 390px; max-width: 100%; height: calc(100vh - 140px); min-height: 420px; border: 0; align-self: center; background: #fff; }
/* 高さは伝票の窓の中身の枠（#body）に収まるまで（上の帯と柱の見出しの分を引く）。収まらないと窓の中身ごと縦に送られて上の帯が隠れた（見本で確かめた） */
/* 伝票の店舗詳細（2026-09-26 利用者）。店舗に「店舗詳細表示」の ✓ があるときだけ、キャストの行の下に「店舗詳細」の名前で出す
   （slipdetail-2026-10-19。前は店舗の行の下に、店舗の設定の「表示内容」を名前にしていた） */
.slipform .slipdetail[hidden] { display: none; }
.slipform .slipdetail > .fieldname { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }

/* 場所の絞り込み（エリア・種類を横に。選んだ内容は伝票に残らない） */
.venuepick { display: flex; gap: 8px; }
.venuepick .field { flex: 1 1 0; min-width: 0; margin: 0; }
/* 「エリア」は下の「場所」「部屋」と縦に揃える。「種類」は詰めて右に並べる */
.venuepick .field:first-child { grid-template-columns: var(--slip-label) 1fr; }
.venuepick .field + .field { flex: 1 1 0; grid-template-columns: auto 1fr; }

/* ── 検索付きプルダウン（2026-09-26 利用者「システム内プルダウンは全て 検索付きプルダウン」）──
   もとの select は残したまま隠す（値の読み書きは今までのまま）。人が触るのは上に重ねた欄 */
.combo { position: relative; display: block; min-width: 0; }
.combo > select {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.combo > .cbin {
  width: 100%; min-width: 0; cursor: pointer;
  /* 選べる欄だと分かる小さな ▾（select の矢印の代わり）。背景の色はその画面のものを残す */
  background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%),
                    linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position: right 8px center, right 4px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 15px;
}
.combo.open > .cbin { cursor: text; }
.combo > .cbin::placeholder { color: var(--dim); opacity: 1; }
.cbin.cbempty { color: var(--faint); }

/* 候補の一覧は画面の上に貼り付ける（箱の外へはみ出しても切れない） */
.cbpop {
  position: fixed; z-index: 90; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22); padding: 3px; font-size: 12px;
}
.cbpop .cbrow { padding: 4px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.cbpop .cbrow.now { color: var(--steel); }
.cbpop .cbrow.on { background: var(--steel); color: #fff; }
/* 色のある選択肢（伝票の状態。本家と同じ色。2026-09-28 利用者「状態の背景は本家と同じに」「伝票作成の文字の背景も同じ色に変更」）。
   一覧の行・選んだあとの欄・一覧の札。字は地の明るさで黒か白（rev）。指している行は地の色のまま字の色で縁取り、選んでいる行は太字。
   欄は ▾ の絵（background-image）を残すため、地は background-color だけ塗る */
.cbpop .cbrow.hexed { background: var(--cbhex); color: var(--tint-ink); }
.cbpop .cbrow.hexed + .cbrow.hexed { margin-top: 2px; }
.cbpop .cbrow.hexed.rev { color: var(--tint-ink-rev); }
.cbpop .cbrow.hexed.now { font-weight: 700; }
.cbpop .cbrow.hexed.on { background: var(--cbhex); box-shadow: inset 0 0 0 2px currentColor; }
.combo > .cbin.hexed { background-color: var(--cbhex); color: var(--tint-ink); font-weight: 600; }
.combo > .cbin.hexed.rev { color: var(--tint-ink-rev); }
.pill.hexed { background: var(--cbhex); color: var(--tint-ink); border-color: transparent; }
.pill.hexed.rev { color: var(--tint-ink-rev); }
.cbpop .cbnone { padding: 5px 8px; color: var(--faint); }
/* いつも出す選択肢（伝票のホテルの「自由入力」）は一覧のいちばん上。打って絞っても出す。下のホテルとは細い線で分ける
   （2026-09-27 利用者「自由入力を一番上に表示」） */
.cbpop .cbpins { margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }

/* 日付・月の小窓（2026-09-27 利用者「カレンダー系の枠がUIと合っていない」）。枠は候補の一覧（.cbpop）と同じ。
   ブラウザの選び口（大きな字と濃い青）の代わりに、画面の字の大きさと青。選んだものは青地・今日は青い枠・日曜は赤・土曜は青 */
input.picking { border-color: var(--accent); }
.pickpop {
  position: fixed; z-index: 95; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  padding: 6px; font-family: var(--sans); font-size: 11px; line-height: 1.3;
  font-variant-numeric: tabular-nums; user-select: none;
}
.pickpop button { font: inherit; color: inherit; padding: 0; }
.pickpop .pkhead { display: flex; align-items: center; gap: 1px; margin-bottom: 4px; }
.pickpop .pkhead b { flex: 1; text-align: center; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.pickpop .pkstep { width: 22px; height: 20px; border-radius: 4px; color: var(--dim); }
.pickpop .pkstep:hover { background: var(--accent-wash); color: var(--accent); }
/* 見出しの年月・年は押せる（月を選ぶ・年を選ぶ画面へ。pickym-2026-10-08）。いま見ている月・年は薄い枠 */
.pickpop .pkym { flex: 1; height: 20px; border-radius: 4px; text-align: center; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.pickpop .pkym:hover { background: var(--accent-wash); color: var(--accent); }
.pickpop .pkcell.cur { box-shadow: inset 0 0 0 1px var(--line); }
.pickpop .pkweek, .pickpop .pkdays { display: grid; grid-template-columns: repeat(7, 24px); gap: 1px; }
.pickpop .pkweek span { text-align: center; font-size: 9.5px; color: var(--faint); padding-bottom: 2px; }
.pickpop .pkmonths { display: grid; grid-template-columns: repeat(4, 40px); gap: 2px; }
.pickpop .pkcell { height: 20px; border-radius: 4px; text-align: center; }
.pickpop .pkmonths .pkcell { height: 24px; }
.pickpop .pkweek .sun, .pickpop .pkcell.sun { color: var(--vermil); }
.pickpop .pkweek .sat, .pickpop .pkcell.sat { color: var(--steel); }
.pickpop .pkcell.out { opacity: .4; }
.pickpop .pkcell.today { box-shadow: inset 0 0 0 1px var(--accent); }
.pickpop .pkcell:hover { background: var(--accent-wash); color: var(--accent); opacity: 1; }
.pickpop .pkcell.on { background: var(--accent); color: var(--bg); font-weight: 600; opacity: 1; }
.pickpop .pkfoot {
  display: flex; justify-content: space-between; margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line2);
}
.pickpop .pkfbtn { padding: 1px 7px; border-radius: 4px; color: var(--accent); font-size: 10.5px; }
.pickpop .pkfbtn:hover { background: var(--accent-wash); }
.pickpop .pkfbtn.pkclear { color: var(--dim); }
.pickpop .pkfbtn.pkclear:hover { color: var(--vermil); background: var(--vermil-wash); }
/* 長い字を書く欄（備考など）は、ラベルを上にして横いっぱい */
.slipform .field:has(textarea) { grid-template-columns: 1fr; gap: 1px; }
.slipform .field:has(textarea) > .fieldname { text-align: left; }
.slipform .check { display: flex; align-items: center; gap: 5px; padding: 1px 0; }

/* 金額は目立たせる（本家も赤字） */
#sbox-money > h3 { color: var(--vermil); }

/* 柱ごとの地色（本家の 桃／黄／薄灰 に寄せる） */
#sbox-head, #sbox-place, #sbox-staff, #sbox-money, #sbox-note { background: var(--slip-left); }
/* 顧客情報と履歴の箱は、ふだんはコース・オプションと同じ色合い（guestpal-2026-10-08 利用者「通常は　コース・オプション　部分と同じ色合い　履歴も合わせる」）：
   地・枠・見出しの帯・読むだけの欄は右の柱（青灰）の色。お客様のランクに色があれば 2 つの箱ともその色（rankbox）。前は中の柱の黄 */
#sbox-guest, #sbox-history { background: var(--slip-right); --slip-edge: var(--slip-right-edge); --slip-head: var(--slip-right-head); --ro-bg: var(--slip-right-ro); }
/* 変更履歴の箱（sliplogbox-2026-10-03）。作成のあとの記録があるときだけ（.haslog）出す。左の柱の備考の下で、地は黄緑（logdetail-2026-10-03。
   利用者「色合いは黄緑　変更内容をもっと細かく端的に表示　位置変更　備考の下にボックス配置」。前は真ん中の柱のお客様の左で、お客様と履歴の
   箱を細くしていた）。枠・見出しの帯も黄緑（柱の色の変数をこの箱だけ置き換える） */
#sbox-log { --slip-edge: var(--slip-log-edge); --slip-head: var(--slip-log-head); background: var(--slip-log); }
.slipform:not(.haslog) #sbox-log { display: none; }
.sliplog { display: flex; flex-direction: column; }
.sliplog .lgitem { padding: 3px 0 4px; border-bottom: 1px dashed var(--line); }
.sliplog .lgitem:last-child { border-bottom: 0; }
.sliplog .lghead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sliplog .lgwho { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.sliplog .lgat { flex: none; font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
.sliplog .lgwhat { font-size: 10.5px; color: var(--text); overflow-wrap: anywhere; }
.sliplog .lgwhat + .lgwhat { margin-top: 1px; }
/* 変更前と変更後（logfull-2026-10-07 利用者「伝票の変更履歴の表示はもっと細かく　変更前と変更後　で変わったもの全て　を表示」）。1 つを
   「欄　前 → 後」。前は薄い字、後は濃い字。長い文は 前・後 を 2 行（改行もそのまま） */
.sliplog .lgchg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; font-size: 10.5px; color: var(--text); overflow-wrap: anywhere; }
.sliplog .lgchg + .lgchg, .sliplog .lgwhat + .lgchg, .sliplog .lgchg + .lgwhat { margin-top: 2px; }
.sliplog .lgw { flex: none; font-weight: 600; color: var(--dim); }
.sliplog .lga { color: var(--dim); }
.sliplog .lgb { font-weight: 600; }
.sliplog .lgto { flex: none; color: var(--faint); }
.sliplog .lgchg.long { display: block; }
.sliplog .lgchg.long .lgab { display: flex; align-items: baseline; gap: 4px; }
.sliplog .lgchg.long .lgk { flex: none; font-size: 9.5px; color: var(--faint); }
.sliplog .lgchg.long .lga, .sliplog .lgchg.long .lgb { min-width: 0; white-space: pre-wrap; }
.sliplog .lgmore { padding-top: 3px; font-size: 10px; color: var(--faint); }
#sbox-nom, #sbox-point, #sbox-menu { background: var(--slip-right); }
/* ポイントの箱（hvpoint-2026-10-03。利用者「コースオプション下にポイント　ボックスを作る … ヘブンの顧客名　保有ポイント　ヘブンの　利用
   ポイント　　付与予定ポイント　　を表示」）。1 行に 項目名・中身（欄と pt）・釦。手で決めた付与予定の数は赤字（ヘブンと同じ）。
   箱の下に ヘブンの一言（※予約完了時自動付与されます など）・注意（赤）・送った結果 */
#sbox-hvpoint { background: var(--slip-right); }
/* 押せないとき（ヘブンに顧客情報がありません など）は箱ごと薄く（ptfade-2026-10-03。利用者「ヘブンに顧客情報がありません　の場合
   全体的に薄く」） */
/* 一言（「ヘブンに顧客情報がありません」など .ptwarn）は薄くしない（ptfade2-2026-10-03。利用者「ヘブンに顧客情報がありません　は薄くしない」。
   前は箱ごと opacity .5 で一言も薄かった）。箱の地と枠は淡く混ぜ、見出しと一言以外の行を薄くする */
#sbox-hvpoint.ptoff { background: color-mix(in srgb, var(--slip-right) 45%, var(--panel));
                      border-color: color-mix(in srgb, var(--slip-edge) 45%, var(--panel)); }
#sbox-hvpoint.ptoff > h3 { opacity: .5; }
#sbox-hvpoint.ptoff .slippoint > :not(.ptwarn) { opacity: .45; }
.slippoint { display: grid; gap: 3px; }
.slippoint .ptrow { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 21px; }
.slippoint .ptlab { font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap; }
.slippoint .ptval { font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.slippoint .ptin { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.slippoint .ptin input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.slippoint .ptin input.manual { color: var(--vermil); }
.slippoint .ptin i { font-style: normal; font-size: 10px; color: var(--dim); }
.slippoint .btn { padding: 1px 10px; font-size: 11px; min-width: 52px; }
.slippoint .ptreload { padding: 0 4px; font-size: 10px; color: var(--accent); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.slippoint .ptreload:hover { text-decoration: underline; }
.slippoint .pthelp { font-size: 10px; color: var(--dim); }
.slippoint .ptwarn { font-size: 10.5px; font-weight: 600; color: var(--vermil); }
/* ポイント対象外会員（ヘブンの予約にポイントの欄が無い）は赤でなく灰色（ptoffmember-2026-10-28 伝票 787 利用者「グレーアウトして … ポイント対象外会員
   とのみ記載」）。コース・オプションの箱の「ポイント利用」の段も灰色 */
.slippoint .ptwarn.ptgrey { color: var(--faint); }
#sbox-hvpoint.ptoff .slippoint > .ptwarn.ptgrey { opacity: .6; }
.slipmenu .mpointg.mpointoff { opacity: .5; }
.slipmenu .mpointg.mpointoff .mpointnote { color: var(--faint); }
.slippoint .ptmsg { font-size: 10.5px; color: var(--dim); }
.slippoint .ptmsg.good { color: var(--jade); }
.slippoint .ptmsg.bad { color: var(--vermil); }
/* 付与の行の［書換］は［取消］の左（ptrewrite-2026-10-18。［取消］の置き場は上の［登録］とそろったまま）。結果は見出しと段ごとの 1 行を枠で囲む */
.slippoint .ptbtns { display: inline-flex; align-items: center; gap: 4px; }
/* 「ヘブンと違う」は付与予定ポイントのすぐ下の赤い帯（ptalert-2026-10-18 利用者「ヘブンと違う　赤文字はポイントの下でもっと目立つように」） */
.slippoint .ptalert { padding: 4px 8px; border: 1px solid var(--vermil); border-radius: 4px; background: color-mix(in srgb, var(--vermil) 12%, transparent);
                      color: var(--vermil); font-size: 12px; font-weight: 700; }
.slippoint .ptalert[hidden] { display: none; }
.slippoint .ptalert span { white-space: nowrap; }
.slippoint .ptmsg.ptresult { display: grid; gap: 1px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 4px; }
.slippoint .ptmsg.ptresult.wait { color: var(--amber); }
.slippoint .ptmsg.ptresult .ptstep { color: var(--text); }
.slippoint .pthelp:empty, .slippoint .ptwarn:empty, .slippoint .ptmsg:empty { display: none; }
/* 保存のあとのヘブンへの自動登録の控え（ptuse-2026-10-24）・読み込みでない伝票は箱ごと出さない */
.slippoint .ptauto { font-size: 10.5px; color: var(--dim); }
.slippoint .ptauto:empty { display: none; }
/* 顧客希望のポイント（pointwish-2026-10-25 #178）。利用ポイントの値の真下（名札の幅 92px＋間 6px）。
   青の太字（ptblue-2026-10-25 利用者「顧客希望 10,000pt（反映はされません。）　は青太文字　表記」。前は琥珀） */
.slippoint .ptwish { padding-left: 98px; margin-top: -2px; font-size: 11px; font-weight: 700; color: var(--accent); }
.slippoint .ptwish[hidden] { display: none; }
#sbox-hvpoint[hidden] { display: none; }
/* 自社の付与予定（pointplan-2026-10-03）：計算の式・手入力、ヘブンの付与予定と差、一致（緑）か書き換えが要る（赤）か、次にすること */
.slippoint .ptplan { display: grid; gap: 1px; padding-left: 98px; font-size: 10.5px; color: var(--dim); }
.slippoint .ptplan:empty { display: none; }
.slippoint .ptplan .ptcalc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--text); }
.slippoint .ptplan .ptcalc.dim { color: var(--dim); }
.slippoint .ptplan .ptcalc b { color: var(--vermil); font-weight: 700; }
.slippoint .ptplan .ptheaven { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.slippoint .ptplan .ptok { color: var(--jade); font-weight: 700; }
.slippoint .ptplan .ptng { color: var(--vermil); font-weight: 700; }
.slippoint .ptplan .ptstale { color: var(--amber); font-weight: 600; }
.slippoint .ptplan .ptnext { color: var(--dim); }

/* 伝票の窓をはっきり見せる（2026-10-02 利用者「全体的見ずらい　文字サイズなどは変えずに　色合いや文字色でもうちょっとはっきりさせたい」。
   slipvis-2026-10-02）。字の大きさ・太さ・並びは変えず、色だけを変える。
   ・窓の中だけ、項目名（--dim）・薄い字（--faint）・下線と細い枠（--line・--line2）を一段濃くする。変数を置き換えるだけなので
     決まりの強さと順は変わらない（NG の赤枠・赤いタブ・選んだ札の青などは今までどおり勝つ）
   ・箱の枠・見出しの帯（お客様・履歴・コース・オプション）・読むだけの欄の地・札と履歴の枠は、その柱の色（桃・黄・青灰）を濃くした色
   ・薄い字だった項目名（作成者・最終更新者・住所・電話番号・履歴のコース／場所／店舗詳細・金額の内訳の種類・コースの見出し）は
     ほかの項目名と同じ濃さに
   ・押せる釦と札は白地にして柱の地から浮かせる（選んだ札・押した釦の色はそのまま） */
.slipform { --dim: var(--slip-dim); --faint: var(--slip-faint); --line: var(--slip-line); --line2: var(--slip-line2); }
.slipform > .slipcol:nth-child(1) { --slip-edge: var(--slip-left-edge); --slip-head: var(--slip-left-head); --ro-bg: var(--slip-left-ro); }
.slipform > .slipcol:nth-child(2) { --slip-edge: var(--slip-mid-edge); --slip-head: var(--slip-mid-head); --ro-bg: var(--slip-mid-ro); }
.slipform > .slipcol:nth-child(3) { --slip-edge: var(--slip-right-edge); --slip-head: var(--slip-right-head); --ro-bg: var(--slip-right-ro); }
/* 上の帯（保存・詳細ペースト・伝票コピー・ヘブンネットへ反映・リセット）の釦の字と枠も同じ濃さ */
.pad:has(.slipform) .recordbar { --dim: var(--slip-dim); --line: var(--slip-line); }
.slipform .box, #sbox-place > .inner { border-color: var(--slip-edge); }
.slipform .box > h3 { color: var(--text); background: var(--slip-head); border-bottom-color: var(--slip-edge); border-radius: 4px 4px 0 0; }
/* お客様のランクに色があれば、顧客情報と履歴の箱ごとその色（guestbg-2026-10-08 利用者「背景事変える」・guestpal-2026-10-08「履歴も合わせる」）：
   帯はその色（字は地の明るさで白か黒＝伝票の状態と同じ決め方）、箱の地と枠はその色を薄く、読むだけの欄の地は少し濃く。印は wireSlipGuest の show。
   ふだんの帯はコース・オプションと同じ（13:36〜17:52 の灰色に白い字＝guesthead はやめた） */
.slipform #sbox-guest.rankbox, .slipform #sbox-history.rankbox {
  background: color-mix(in srgb, var(--rankhex) 14%, var(--panel)); border-color: color-mix(in srgb, var(--rankhex) 60%, var(--panel));
  --ro-bg: color-mix(in srgb, var(--rankhex) 24%, var(--panel));
}
.slipform #sbox-guest.rankbox > h3, .slipform #sbox-history.rankbox > h3 { background: var(--rankhex); border-bottom-color: var(--rankhex); color: var(--tint-ink); }
.slipform #sbox-guest.rankbox.rankdark > h3, .slipform #sbox-history.rankbox.rankdark > h3 { color: var(--tint-ink-rev); }
.slipform .placetabs .ptab { border-color: var(--slip-edge); }
.slipform .placetabs .ptab[aria-selected="true"] { border-bottom-color: var(--slip-left); }
.slipform .slipwho .wlab, .slipform .venueinfo .vlab, .slipform .sliphistory .hlab,
.slipform .slipmoney .mbkind, .slipform .slipmenu .mhead { color: var(--dim); }
.slipform .combo > .cbin::placeholder { color: var(--slip-hint); }
.slipform .sliphistory .hrow { border-color: var(--slip-edge); }
.slipform .slipmenu .mitem, .slipform .slippay .mpay, .slipform .slipmenu .mvoidb, .slipform .slipmenu .mfsb {
  background: var(--panel); border-color: var(--slip-edge);
}
.slipform .btn:not(.go):not(.bad), .pad:has(.slipform) .recordbar .btn:not(.go):not(.bad) { background: var(--panel); }

/* お客様の履歴（2026-09-26 利用者「履歴も表示 履歴に出すもの キャスト名（指名） 選択されたコース 場所 店舗詳細」）。
   1 回の伝票を 1 枚の札に（地は読むだけの色）。1 行目は 日付・時刻・店舗、2 行目にキャスト名を太字で（同じ日「履歴には店舗も表示
   日付 店舗 ２行目太文字でキャスト名」）、下に コース・場所・店舗詳細 */
.sliphistory { display: flex; flex-direction: column; gap: 4px; font-size: 10px; line-height: 1.35; }
.sliphistory .hcount { font-size: 9.5px; color: var(--faint); }
/* 履歴のカードも読むだけなので、白ではなく読むだけの地（2026-09-27 利用者「履歴の背景も変更」） */
.sliphistory .hrow { background: var(--ro-bg); border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; }
.sliphistory .hhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sliphistory .hwhen { color: var(--dim); font-variant-numeric: tabular-nums; }
.sliphistory .hstore { color: var(--text); }
.sliphistory .hcast { color: var(--text); font-size: 11px; display: flex; align-items: baseline; gap: 0 2px; flex-wrap: wrap; }
/* 名前（指名）の右に案内金額（histall-2026-10-19） */
.sliphistory .hyen { margin-left: auto; padding-left: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 案内金額の後ろの（現金）（カード）（histpay-2026-10-26 #200）。現金は黒・カードは青（金額も同じ色。histblack-2026-10-26 利用者「顧客情報　現金は　黒
   カードは　青色」。前は現金も赤だった。伝票の窓の金額の箱は現金は赤のまま） */
.sliphistory .hyen.cash { color: var(--text); }
.sliphistory .hyen.card { color: var(--accent); }
.sliphistory .hlist { display: flex; flex-direction: column; gap: 4px; }
/* 履歴の箱は真ん中の柱の残りいっぱい（右のコース・オプションとポイントの箱の下の端まで）にのばし、中でスクロールして全部を見る
   （histall-2026-10-19 利用者「顧客履歴は　ポイントの欄と同じ高さくらいでその中でスクロール」）。中身の高さは柱の高さに数えない（contain: size） */
.slipform > .slipcol:nth-child(2) { align-self: stretch; }
/* 少なければ箱も中身の高さまで（histfit-2026-10-19 利用者「顧客の履歴は少なければボックスも短く」）。--hist-fit は app.js の wireSlipHistory が
   描いたあとに測る中身の高さ（見出しと余白を含む）。多いときは上限が柱の残りより大きいので今までどおり。下の 240px は中身がそれより多いときだけ */
.slipform #sbox-history { flex: 1 1 auto; display: flex; flex-direction: column; min-height: min(240px, var(--hist-fit, 240px));
  max-height: var(--hist-fit, none); }
.slipform #sbox-history > .inner { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
/* 送り棒の有無で幅と折り返しを変えない。高さを中身に合わせる処理と往復して履歴が揺れるのを防ぐ。 */
.slipform #sbox-history .sliphistory { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; contain: size; padding-right: 2px; }
@media (max-width: 880px) {
  /* 1 列のとき（窓が 880px 以下）は柱を伸ばさないので、箱は中身の高さ（多ければ 60vh で止めて中でスクロール）。前は箱が 240px のまま
     中身が下へはみ出していた（histfit-2026-10-19） */
  .slipform #sbox-history, .slipform #sbox-history > .inner { flex: none; }
  .slipform #sbox-history .sliphistory { flex: none; contain: none; max-height: 60vh; }
}
.sliphistory .hcast b { font-weight: 700; }
/* 店舗詳細表示 ✓ の店舗の伝票は、1 行目の店舗の代わりにキャスト名の下の行へ店舗詳細（slipdetail-2026-10-19） */
.sliphistory .hdetail { color: var(--text); font-size: 10.5px; overflow-wrap: anywhere; }
.sliphistory .hnom { color: var(--dim); font-size: 10px; }
.sliphistory .hnom.hmain { color: var(--vermil); }   /* 本指名は赤（2026-09-27 利用者「履歴の本指名 は 本指名 を赤文字」） */
.sliphistory .hfuture {
  font-size: 9px; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 3px; padding: 0 4px;
}
/* キャンセル・チェンジの伝票（2026-10-02 利用者「顧客にチェンジ履歴も残る」）。帯の札と同じ色 */
.sliphistory .hvoid { font-size: 9px; color: #fff; background: var(--mark-red); border-radius: 3px; padding: 0 4px; }
.sliphistory .hvoid.change { background: var(--mark-blue); }
.sliphistory .hline { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px; overflow-wrap: anywhere; }
.sliphistory .hlab { color: var(--faint); font-size: 9.5px; }
.sliphistory .hmore { align-self: flex-start; padding: 1px 10px; font-size: 10px; }
.sliphistory .hnote { font-size: 9px; color: var(--faint); }

/* お客様の箱（2026-09-26 利用者「顧客情報は 電話番号検索で検索を押す」「アラートやポップアップでなく 画面操作」）。
   項目名の幅は「NGキャスト」（6 文字）が 1 行に収まるところまで広げる */
#sbox-guest { --slip-label: 56px; }
.slipguest .gask {
  display: grid; grid-template-columns: var(--slip-label) minmax(0, 1fr) auto; gap: 6px; align-items: center;
  padding-bottom: 4px;
}
.slipguest .gline {
  display: grid; grid-template-columns: var(--slip-label) minmax(0, 1fr); gap: 6px; align-items: center;
  margin-bottom: 3px;
}
.slipguest .glab { font-size: 10px; color: var(--dim); white-space: nowrap; }
.slipguest .btn { padding: 1px 12px; font-size: 10.5px; white-space: nowrap; }
.slipguest .gquestion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 0; font-size: 10.5px;
}
.slipguest .gbtns { display: flex; gap: 4px; }
/* 伝票のヘブン内容（2026-09-30 利用者「備考に入れず ペースト用備考の下に固定値でヘブン内容と表示する」）。書き換えられない控えの文 */
.heavennote { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); }
.heavennote .hnhead { padding: 3px 8px; font-size: 11px; color: var(--dim); border-bottom: 1px solid var(--line); }
.heavennote .hnbody { padding: 5px 8px; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.slipguest .gtools { display: flex; justify-content: flex-end; padding-top: 2px; }
.slipguest .gtools .btn { padding: 0 8px; font-size: 9.5px; }
.guestinfo .gmemo { display: flex; align-items: flex-start; gap: 4px; }
.guestinfo .gmemo .gbody { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* お客様の箱でそのまま直す（2026-09-26 利用者「名前 編集ボタンで編集 … 編集ボタンで編集の場合は保存ボタンで保存」）。
   ［編集］［追加］［削除］は小さく右に、入力は箱いっぱい。直した結果は［外す］の左に小さく */
.guestinfo .gline { display: flex; align-items: flex-start; gap: 6px; }
.guestinfo .gline > :first-child { flex: 1 1 auto; min-width: 0; }
/* 住所備考を書く欄（homesplit-2026-10-20）：欄が残りの幅いっぱい・右に［保存］［やめる］ */
/* 住所備考（homenote2-2026-10-20）：改行のまま・長い行は折り返す */
.guestinfo .hnote { white-space: pre-wrap; overflow-wrap: anywhere; }
/* ［編集］のあいだの欄（homesplit-2026-10-20）：欄は行の幅いっぱい・下の行に一言と［保存］［やめる］ */
.guestinfo .hedit { width: 100%; height: 22px; font-size: 11px; padding: 0 6px; box-sizing: border-box; }
/* ホテルの［編集］（hoteledit-2026-10-20）：自宅の［編集］と同じ欄と釦の並び。住所の行の右に［編集］ */
.hotelpart .hedit { width: 100%; height: 22px; font-size: 11px; padding: 0 6px; box-sizing: border-box; }
.hotelpart textarea.hedit { height: auto; padding: 3px 6px; line-height: 1.4; resize: vertical; white-space: pre-wrap; }
.hotelpart .gline { display: flex; align-items: center; gap: 4px; }
.hotelpart .gline > :first-child { flex: 1 1 auto; min-width: 0; }
.hotelpart .heditbtns .hedithint { font-size: 9.5px; color: var(--faint); line-height: 1.3; }
.hotelpart .heditbtns .hedithint.bad { color: var(--vermil); }
.hotelpart .heditbtns .btn { flex: none; }
.hotelpart .vval.vhasedit { display: flex; align-items: center; gap: 6px; }
.hotelpart .vval.vhasedit .vedit { margin-left: auto; flex: none; }
.guestinfo textarea.hedit { height: auto; padding: 3px 6px; line-height: 1.4; resize: vertical; white-space: pre-wrap; }
.guestinfo .heditbtns { align-items: center; gap: 4px; }
/* ［編集］のペット（routeedit-2026-10-20）。有無と、有のときだけ内容 */
.guestinfo .rpet { display: flex; align-items: center; gap: 4px; }
.guestinfo .rpet > .combo, .guestinfo .rpet > select { flex: 0 0 64px; }
.guestinfo .rpet > .hedit { flex: 1 1 auto; min-width: 0; }
.guestinfo .rpet > [hidden] { display: none; }
.guestinfo .heditbtns .btn { flex: none; }
.guestinfo .gtels { display: flex; flex-direction: column; }
/* 電話番号：代表の行の右にいつも［追加］、足した番号の行の右に［削除］。足せないときは打つ欄の下に赤で（2026-09-26） */
.guestinfo .gtels > .gline { margin-bottom: 1px; }
.guestinfo .gtelmsg { display: block; margin-top: 2px; font-size: 10px; color: var(--vermil); }
.guestinfo .gtelmsg:empty { display: none; }
.guestinfo .gedit { display: flex; align-items: flex-start; gap: 4px; margin-top: 2px; }
.guestinfo .gedit > .gin, .guestinfo .gedit > select, .guestinfo .gedit > .combo { flex: 1 1 auto; min-width: 0; }
.guestinfo textarea.gin { resize: vertical; min-height: 20px; }
.guestinfo .gbtn { flex: none; padding: 0 7px; font-size: 9.5px; line-height: 16px; }
.guestinfo .grank, .guestinfo .vval > .combo { width: 100%; }
.slipguest .gsaved { margin-right: auto; font-size: 10px; color: var(--jade); }
.slipguest .gsaved.bad { color: var(--vermil); }
.guestinfo .gwhen { color: var(--faint); margin-right: 6px; font-variant-numeric: tabular-nums; }
.guestinfo .gng { color: var(--vermil); font-weight: 600; }
/* NG キャストの理由（ngwhy-2026-10-17）。名前の後ろに（ ）で、太字にしない */
.guestinfo .gngwhy { font-weight: 400; }
/* NG キャストは 1 人 1 行。理由は切らずに、その行の中で折り返す（ngcol-2026-10-18） */
.guestinfo .gng > .gngone { display: block; white-space: normal; overflow-wrap: anywhere; }
/* NG キャストの名前の横の札「掲載中」「非掲載」（ngpill-2026-10-20）。伝票の窓は赤い太字の名前のすぐ右に、字は太くしない */
.guestinfo .gngone .nglisted { margin: 0 2px 0 4px; padding: 0 4px; font-size: 9px; line-height: 13px; font-weight: 400; vertical-align: 1px; }
.ngrow .nglisted { margin-left: -4px; }
/* NG キャストを足す行（ngwhy198-2026-10-26 #198）：キャストを選ぶ（上）・理由（下・必須）と［追加］（理由の右）。入っている理由は名前の行の鉛筆で直す */
.slipguest .guestinfo .gngadd { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; min-width: 0; }
.slipguest .guestinfo .gngadd > select, .slipguest .guestinfo .gngadd > .combo { margin-right: calc(var(--gbtn) + 6px); }
.slipguest .guestinfo .gngaddline { display: grid; grid-template-columns: minmax(0, 1fr) var(--gbtn); gap: 6px; align-items: start; }
.slipguest .guestinfo .gngaddline > textarea.gin, .guestinfo .gngedit > textarea.gin { width: 100%; min-width: 0; box-sizing: border-box; }
.guestinfo .gngone .gngicon { vertical-align: -5px; margin-left: 2px; }
.guestinfo .gngedit { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 4px; color: var(--text); font-weight: 400; }
.guestinfo .gngedittools { display: flex; gap: 6px; }
.guestinfo .gngedittools .btn { width: auto; height: 20px; padding: 0 7px; font-size: 10px; line-height: 18px; }
.slipguest .gpicks { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.slipguest .gpick {
  font: inherit; font-size: 10.5px; text-align: left; cursor: pointer; padding: 2px 6px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
}
.slipguest .gpick:hover { border-color: var(--steel); }
.slipguest .gpick .n { display: block; color: var(--faint); font-size: 9.5px; }

/* お客様の箱の行ぞろえ（2026-09-27 利用者「名前 電話番号も 空白がずれている ボタンのせい？ 調整して」）。
   どの行も［項目名｜欄（白）｜ボタン（幅 --gbtn）］。白いのは欄だけで、ボタンは欄の外の右の列にそろえる。
   前は検索の行だけ欄とボタンが別で、名前・電話番号は白い帯（.vbox）の中に文字とボタンが入り、ボタンの幅も
   検索 47・編集／追加 35・外す 37px とまちまちだったので、白の左右の端とボタンの位置が行ごとにずれていた。
   ボタンの無い行（ランク・読むだけの人）も同じ幅を空けて、欄の右端をそろえる。自宅タブ（同じ .guestinfo）は変えない */
#sbox-guest { --gbtn: 40px; }
.slipguest .gask { grid-template-columns: var(--slip-label) minmax(0, 1fr) var(--gbtn); }
.slipguest .gask .btn, .slipguest .guestinfo .gbtn, .slipguest .gtools .btn {
  flex: none; width: var(--gbtn); height: 20px; padding: 0; font-size: 10px; line-height: 18px; text-align: center;
}
/* ［お客様を外す］は字に合わせた幅（btnfix-2026-10-03。40px の決まりのままだと字がはみ出す）。
   ［顧客解除］はもう少し大きく薄い赤、左に［会員詳細を開く］（guestclear2・guestopen-2026-10-17 利用者「顧客解除をもう少し大きく薄赤
   会員詳細を開く　ボタンも　会員解除の左に配置」）。2 つとも 24px の高さ・11.5px の字 */
.slipguest .gtools { align-items: center; gap: 6px; }
.slipguest .gtools .btn { width: auto; height: 24px; padding: 0 12px; font-size: 11.5px; line-height: 22px; }
.slipform .slipguest .gtools .btn.gclear { color: #a8341f; background: #fbe1dc; border-color: #eaa99b; }
.slipform .slipguest .gtools .btn.gclear:hover { background: #f7cec6; border-color: #a8341f; }
:root[data-theme="dark"] .slipform .slipguest .gtools .btn.gclear { color: #f0a08c; background: rgba(226, 103, 74, .18); border-color: #7a3a2e; }
:root[data-theme="dark"] .slipform .slipguest .gtools .btn.gclear:hover { background: rgba(226, 103, 74, .3); border-color: #e2674a; }
.slipguest .gask .glab, .slipguest .guestinfo .vlab { font-size: 10px; color: var(--dim); line-height: 20px; }
.slipguest .guestinfo { row-gap: 3px; }
.slipguest .guestinfo .vval.vbox { background: none; border-bottom: 0; padding: 0; }
.slipguest .guestinfo .gline {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--gbtn); gap: 6px; align-items: start; margin: 0;
}
/* 読むだけの中身（名前・電話番号・メモ・備考・NG キャストの名前）は、打つ欄と同じ下線・高さ 20px で、地は読むだけの色
   （2026-09-27 利用者「編集できない事の差別化」。直すのは右のボタンから） */
.slipguest .guestinfo .gline > span:first-child, .slipguest .guestinfo .gmemo > .gtext, .slipguest .guestinfo .gng {
  display: block; min-height: 20px; padding: 1px 3px 0; line-height: 18px;
  background: var(--ro-bg); border-bottom: 1px solid var(--line);
}
.slipguest .guestinfo .gmemo .gbody { white-space: pre-wrap; }
.slipguest .guestinfo .gmemo { display: block; min-width: 0; margin: 0; }
.slipguest .guestinfo .gmemohead { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; min-height: 20px; }
.slipguest .guestinfo .gmemohead .gwhen { margin-right: 0; }
.slipguest .guestinfo .gmemotools { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.slipguest .guestinfo .gmemoicon {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--dim); cursor: pointer;
  font-size: 11px; line-height: 1;
}
.slipguest .guestinfo .gmemoicon svg { width: 12px; height: 12px; }
.slipguest .guestinfo .gmemoicon:hover { color: var(--text); background: var(--panel3); }
.slipguest .guestinfo .gmemoicon.gmemodrop:hover { color: var(--vermil); }
.slipguest .guestinfo .gmemoicon:focus-visible { outline: 2px solid var(--steel); outline-offset: 1px; }
.slipguest .guestinfo .gmemoicon:disabled { opacity: .4; cursor: default; }
.slipguest .guestinfo .gmemo .gbody { display: block; }
.slipguest .guestinfo .gmemoedit { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-bottom: 4px; }
.slipguest .guestinfo .gmemoedit > textarea.gin { width: 100%; min-width: 0; box-sizing: border-box; }
.slipguest .guestinfo .gmemoedittools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.slipguest .guestinfo .gmemoedittools .btn { width: auto; height: 20px; padding: 0 7px; font-size: 10px; line-height: 18px; }
.slipguest .guestinfo .gng { margin-right: calc(var(--gbtn) + 6px); }
.slipguest .guestinfo .gtels { gap: 2px; }
.slipguest .guestinfo .gedit { gap: 6px; margin-top: 0; }
.slipguest .guestinfo .vval.vbox { display: block; }
.slipguest .guestinfo .gmemoadd {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--gbtn); align-items: start; width: 100%; min-width: 0;
}
.slipguest .guestinfo .gmemoadd > textarea.gin { width: 100%; min-width: 0; box-sizing: border-box; }
.slipguest .guestinfo .vlab:has(.gmemocolors) { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.gmemocolors { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.slipguest .guestinfo .gmemocolors .gmemocolorchip {
  min-width: 0; min-height: 20px; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--text); font-size: 10px; line-height: 18px; font-weight: 400; cursor: pointer;
  text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.slipguest .guestinfo .gmemocolors .gmemocolorchip[data-gmemo-color="red"] { color: var(--memo-red); }
.slipguest .guestinfo .gmemocolors .gmemocolorchip[data-gmemo-color="blue"] { color: var(--memo-blue); }
.slipguest .guestinfo .gmemocolors .gmemocolorchip:hover { background: none; text-decoration-thickness: 2px; }
.gmemocolors .gmemocolorchip:focus-visible { outline: 2px solid var(--steel); outline-offset: 1px; }
.slipguest .guestinfo .vrow:has(.gng, [data-gval="ng-cast"]) > .vlab { align-self: start; }
.slipguest .guestinfo .vval > * + .gedit, .slipguest .guestinfo .gmemo + .gmemo { margin-top: 2px; }
.slipguest .guestinfo .grank, .slipguest .guestinfo .vval > .combo { width: calc(100% - var(--gbtn) - 6px); }
/* メモと備考は項目名で 1 行使い、中身はその下で左端から（2026-09-27 利用者「メモと備考は タイトルに1行使う また折り返して
   ボックスを長くする」）。右端とボタンの列はほかの行と同じ */
.slipguest .guestinfo .vwide > .vlab, .slipguest .guestinfo .vwide > .vval { grid-column: 1 / -1; }
.slipguest .guestinfo .vwide > .vlab { line-height: 16px; margin-bottom: -2px; }
.slipguest .gtools { padding-top: 4px; }

/* 店舗のコース・オプション（2026-09-25 利用者「その店舗のコースなど 店舗で決められた
   コースや追加要項などを表示」）。本家と同じく押して選ぶ札。選んだものは濃く出る */
.slipmenu { display: flex; flex-direction: column; gap: 6px; }
.slipmenu .mgroup { display: flex; flex-direction: column; gap: 3px; }
.slipmenu .mhead { font-size: 9.5px; color: var(--faint); }
.slipmenu .mitems { display: flex; flex-wrap: wrap; gap: 3px; }
/* 札の字は枠の上下のまん中に（2026-09-27 利用者「チップ内の枠内の文字の上下配置 … ズレてる」）。前の書体（IBM Plex Sans JP）は字の形が
   行のまん中より 1px 上に寄るので、上の余白を 1px 多くしていた。2026-10-02 から書体は小杉丸ゴシック（fontall-2026-10-02）で、字はほぼ
   まん中（0.5px 下）に来るので上下を同じに。余白の合計（札の高さ）は前のまま。税・キャンセル／チェンジ・付け先の釦・コスプレの種類・
   場所のタブ・ホテル追加も同じ考えで直した（合計が奇数のときは 1px 多い方を下に） */
.slipmenu .mitem {
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel2);
  font: inherit; font-size: 10px; padding: 2px 6px 2px; cursor: pointer; line-height: 1.3;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.slipmenu .mitem:hover { border-color: var(--accent-dim); }
/* 選んだ札は画面の青（2026-09-26 利用者「茶色は嫌だ もっと合う色に変更」。右の柱の青みの地に合わせる）。
   字は地の色 ── 明るい画面では白、暗い画面（青が明るい水色になる）では濃い字で読める */
.slipmenu .mitem.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.slipmenu .mnone { font-size: 9.5px; color: var(--faint); }
/* 税・カード（2026-09-26 利用者「指名の上 に 税無し 税込み カード カード（税込み）の重複禁止でボタン配置」）。
   4 つのうち 1 つだけ。押したものは札と同じ画面の青。狭いときは 2 段に折り返す */
.slippay { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
.slippay .mpay {
  flex: 1 1 auto; font: inherit; font-size: 10.5px; line-height: 1.3; padding: 3px 6px 3px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); color: var(--text);
}
.slippay .mpay:hover { border-color: var(--accent-dim); }
.slippay .mpay:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-dim); }
.slippay .mpay[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
/* いちばん上の段は 指名 と、その横に 割引（同じ日「割引 は指名の横」）。下の 3 列と同じ割り付けで、
   指名は 1〜2 列目、割引は 3 列目の上（指名の札が無い店でも割引は 3 列目に置く） */
.slipmenu .mtop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-items: start; }
.slipmenu .mtop > .mgroup { grid-column: 1 / 3; }
.slipmenu .mtop > .mcutg { grid-column: 3; }
/* キャンセル・チェンジ（2026-09-30 利用者）：割引の下の段（3 列いっぱい）。押した方は赤で濃く、金額の欄が出る。選んでいるあいだ、コース・
   オプションと割引は薄く（案内金額に入らない。札は残る）。ヘブンとつないだ伝票をキャンセルにするときは赤い字の添え書き */
.slipmenu .mtop > .mvoidg { grid-column: 1 / -1; }
/* ポイント利用（ptuse-2026-10-24）：割引の下（3 列目）で、キャンセル・チェンジ（1〜2 列目）と同じ行（利用者「ポイント利用の配置は割引のした　チェンジ・
   キャンセルの同列　…　ズレる場合は　チェンジキャンセルが下の行にづれればよい」）。キャンセル・チェンジの金額・チェンジ先が入り切らなければ、その中で下の行へ
   折り返す。読み込みの伝票だけ（出さないときはキャンセル・チェンジが 3 列いっぱい）。上限を超えた額は赤い枠 */
.slipmenu .mtop > .mpointg { grid-column: 3; }
.slipmenu .mtop:has(> .mpointg:not([hidden])) > .mvoidg { grid-column: 1 / 3; }
.slipmenu .mpointg[hidden] { display: none; }
.slipmenu .mpointuse { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.slipmenu .mpointuse .combo { flex: 1 1 6em; min-width: 0; }
.slipmenu .mpointuse select { min-width: 0; width: 100%; font: inherit; font-size: 11px; padding: 1px 4px; text-align: right; }
.slipmenu .mpointuse select.mbad, .slipmenu .mpointuse .combo.mbad { box-shadow: 0 0 0 2px var(--vermil); }
.slipmenu .mpointnote { font-size: 10px; line-height: 1.3; color: var(--dim); }
.slipmenu .mvoid { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.slipmenu .mvoidb {
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); color: var(--text);
  font: inherit; font-size: 10px; padding: 2px 8px 2px; cursor: pointer; line-height: 1.3;
}
.slipmenu .mvoidb:hover { border-color: var(--vermil); }
.slipmenu .mvoidb.on { background: var(--vermil); border-color: var(--vermil); color: #fff; font-weight: 600; }
.slipmenu .mvoidb[data-void="change"].on { background: var(--mark-blue); border-color: var(--mark-blue); }
.slipmenu .mvoidyen { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; font-size: 10px; }
.slipmenu .mvoidyen[hidden] { display: none; }
.slipmenu .mvoidyen input { width: 7em; text-align: right; font: inherit; font-size: 11px; padding: 2px 4px; }
.slipmenu .mvoidnote { font-size: 10px; line-height: 1.35; color: var(--vermil); }
.slipmenu.mvoided .mcols, .slipmenu.mvoided .mcutg { opacity: .45; }
/* チェンジ（2026-10-02 利用者「チェンジクリックで 金額入力ボックスとキャストプルダウンを出す このキャストプルダウンは 伝票のキャストプルダウンと
   同じルール キャストNGや自宅NGも表記 未定もOK」）。金額の欄の右にチェンジ先のプルダウン。選んだ人が顧客の NG・自宅 NG／要相談なら赤枠と、下に
   赤字（伝票のキャストと同じ文）。チェンジを選んでも伝票は薄くしない。保存で足した「チェンジ料」の行は下に札の形（［×］で外せる）。
   チェンジで残した伝票（控え）は札も額も直せない（青の札と額だけ） */
.slipmenu .mvoidto { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-size: 10px; }
.slipmenu .mvoidto[hidden] { display: none; }
.slipmenu .mvoidto .combo { width: 12em; }
.slipmenu .mvoidto .combo > .cbin { font-size: 11px; }
.slipmenu .mvoidto.slipng .combo > .cbin { border-bottom-color: var(--mark-red); box-shadow: inset 0 0 0 1.5px var(--mark-red); }
.slipmenu .mvoidng { color: var(--mark-red); font-weight: 700; font-size: 10.5px; line-height: 1.35; }
.slipmenu .mvoidng > span { display: block; }
.slipmenu .mvoidng[hidden] { display: none; }
.slipmenu .mitem.mfee { cursor: default; align-items: center; }
.slipmenu .mitem.mfee .mfeex {
  padding: 0 2px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 9px; line-height: 1; cursor: pointer; opacity: .75;
}
.slipmenu .mitem.mfee .mfeex:hover { opacity: 1; }
.slipmenu .mvoidlock {
  border: 1px solid var(--mark-blue); border-radius: 4px; background: var(--mark-blue); color: #fff;
  font-size: 10px; font-weight: 600; padding: 2px 8px 2px; line-height: 1.3;
}
.slipmenu .mvoidnote.info { color: var(--dim); }
.slipmenu.mvoided .mvoidfees { opacity: .45; }
/* チェンジの控え（27 回目）は mvoided でなく mkept：コース・オプション・割引は同じく薄く、タオルの欄は出す。チェンジ料の付け先の
   ［この伝票］［相手の伝票］は押した方だけ青（利用者「チェンジ料金は　この伝票　相手の伝票　の選択肢で相手伝票と連動するように」）。
   チェンジ後の伝票では控えごとに 1 行（チェンジ料の札か、相手に付けているときは打ち消しの字） */
.slipmenu.mkept .mcols, .slipmenu.mkept .mcutg, .slipmenu.mkept .mvoidfees { opacity: .45; }
.slipmenu .mpairs { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.slipmenu .mpair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.slipmenu .mfeeside { display: inline-flex; gap: 2px; margin-left: 4px; }
.slipmenu .mfsb {
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); color: var(--text);
  font: inherit; font-size: 10px; padding: 1px 6px 2px; cursor: pointer; line-height: 1.3;
}
.slipmenu .mfsb:hover { border-color: var(--mark-blue); }
.slipmenu .mfsb.on { background: var(--mark-blue); border-color: var(--mark-blue); color: #fff; font-weight: 600; cursor: default; }
.slipmenu .mfeeoff { font-size: 10px; color: var(--faint); text-decoration: line-through; }
.slipmenu .mfeeother { font-size: 10px; color: var(--dim); }
/* 料金の付け先と、組の段・控えのチェンジ料の額の欄（changepay-2026-11-08） */
.slipmenu .mpairlab { font-size: 10px; color: var(--dim); }
.slipmenu .mpair .mvoidyen { margin-left: 0; }
.slipmenu .mfeerow { display: inline-flex; align-items: center; }
.slipmenu .mfeerow[hidden] { display: none; }
.slipmoney .mbfareoff .mbname { color: var(--dim); }
/* 指名の段の下に 3 列（2026-09-26 利用者「コース 追加項目 イベント の３列」）。右の柱のまま、札は列の幅いっぱいに縦に積み、
   長い名前は札の中で折り返す。3 列目は上から イベント・交通費・オプション（同じ日「イベントの下に交通費」） */
.slipmenu .mcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-items: start; }
.slipmenu .mcols .mitems { flex-direction: column; flex-wrap: nowrap; }
/* 縦に積んだ札どうしのすき間は 1px（2026-10-02 利用者「コース以降のボタン間の空白が広くて気になる」。slipgap-2026-10-02）。
   前は .slipmenu .mitems の 3px（コスプレの種類は 2px）。札を白地にして柱の地を濃くした（slipvis）ら、すき間が札の間の帯に見えた。
   ホテル込みの下だけ少し離す（.mhotelin の margin-bottom）のと、上の段（税・指名・キャンセル／チェンジ）の札はそのまま */
.slipmenu .mcols .mitems, .slipmenu .mcols .mcostypes { gap: 1px; }
.slipmenu .mcols .mitem {
  display: block; width: 100%; text-align: left; padding: 2px 4px 2px;
  white-space: normal; overflow-wrap: anywhere;
}
/* コース・追加項目は数える札（2026-09-26 利用者「重複選択可能 ×5 で表現 9まで可能 ×ボタンで解除を小さく表示」）。
   札を押すと 1 つ増え、2 つ以上で名前の後ろに「×5」。選んでいるときだけ右に小さな×（解除） */
.slipmenu .mcols .mitem.mcount { display: flex; align-items: flex-start; padding: 0; }
.slipmenu .mitem.mcount .mpick {
  flex: 1 1 auto; min-width: 0; padding: 2px 4px 2px; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; white-space: normal; overflow-wrap: anywhere;
}
.slipmenu .mitem.mcount .mx { font-weight: 700; margin-left: 3px; white-space: nowrap; }
.slipmenu .mitem.mcount .mclear {
  display: none; flex: none; align-self: stretch; padding: 0 4px; border: 0; border-left: 1px solid transparent;
  background: transparent; color: inherit; font: inherit; font-size: 9px; line-height: 1; cursor: pointer; opacity: .75;
}
.slipmenu .mitem.mcount.on .mclear { display: block; border-left-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.slipmenu .mitem.mcount .mclear:hover { opacity: 1; }
.slipmenu .mthird { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* コスプレ（2026-09-27 利用者「伝票でコスプレは一番上に出ないといけない コスプレが選ばれたら コスプレの種類を展開」）。
   オプションのいちばん上。押すと下に種類が広がる（1 つだけ選べる）。広がることが分かるよう、名前の後ろに ▸／▾ */
.slipmenu .mcos { display: flex; flex-direction: column; gap: 3px; }
.slipmenu .mcoshead[aria-expanded]::after { content: " ▸"; opacity: .7; }
.slipmenu .mcoshead[aria-expanded="true"]::after { content: " ▾"; }
.slipmenu .mcostypes {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 3px 5px; padding-left: 5px;
  border-left: 2px solid var(--accent);
}
.slipmenu .mcostypes[hidden] { display: none; }
.slipmenu .mcostypes .mitem { font-size: 9.5px; padding: 1px 4px 1px; }
/* 畳んだとき、選んでいない種類は閉じる（札の display: block より強く。2026-09-27 利用者「選ばれてないものは閉じる」） */
.slipmenu .mcostypes .mitem[hidden] { display: none; }
/* オプションのセットの札（optset-2026-10-31）。名前の前に小さな「セット」の印。選ぶと下に中身の一行と、伝票で選ぶコスプレの種類（1 つ） */
.slipmenu .mset { display: flex; flex-direction: column; gap: 2px; }
.slipmenu .msetmk {
  display: inline-block; margin-right: 3px; padding: 0 3px; border: 1px solid currentColor; border-radius: 3px;
  font-size: 8.5px; line-height: 12px; vertical-align: 1px; opacity: .8;
}
.slipmenu .msetbody { display: flex; flex-direction: column; gap: 2px; margin: 0 0 3px 5px; padding-left: 5px; border-left: 2px solid var(--jade); }
.slipmenu .msetbody[hidden] { display: none; }
.slipmenu .msettext { font-size: 9.5px; color: var(--dim); overflow-wrap: anywhere; }
.slipmenu .msetcos {
  align-self: flex-start; padding: 1px 6px; border: 1px solid var(--line2); border-radius: 4px; background: var(--panel);
  color: inherit; font: inherit; font-size: 9.5px; text-align: left; cursor: pointer;
}
.slipmenu .msetcos.on { color: #fff; background: var(--jade); border-color: var(--jade); }
.slipmenu .mitem.msetneed { box-shadow: 0 0 0 2px var(--vermil); }
.slipmenu .mspecial { flex: none; width: 100%; min-width: 0; max-width: 100%; }
.slipmenu .mspecialhead { align-self: flex-start; }
.slipmenu .mspecialhead::after { content: " ▸"; opacity: .7; }
.slipmenu .mspecialhead[aria-expanded="true"]::after { content: " ▾"; }
.slipmenu .mspecialfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; margin: 0 0 3px 5px; padding: 3px 0 3px 6px; border-left: 2px solid var(--accent); max-width: 290px; }
.slipmenu .mspecialfields label { display: grid; gap: 2px; min-width: 0; color: var(--dim); font-size: 10px; }
.slipmenu .mspecialfields input { box-sizing: border-box; min-width: 0; width: 100%; font-size: 11px; padding: 3px 5px; }
.slipmenu .mspecial-content, .slipmenu .mspecial-actions { grid-column: 1 / -1; }
.slipmenu .mspecial-actions { text-align: right; }
.slipmenu .mspecial-actions .btn { padding: 2px 8px; font-size: 10px; }
.slipmenu .mspecial-summary { margin-left: 7px; font-size: 10px; color: var(--dim); overflow-wrap: anywhere; }
.slipmenu .mspecial-error { color: var(--vermil); font-size: 10px; }
.slipmenu .mspecialfields[hidden], .slipmenu .mspecial-summary[hidden], .slipmenu .mspecial-error[hidden] { display: none; }
@media (max-width: 700px) { .slipmenu .mspecialfields { grid-template-columns: minmax(0, 1fr); } }
/* いまの媒体・指名で選べないコース（2026-09-27 利用者「ヘブン限定」「フリー 写指 本指 もつなげる」）。
   選べない札は薄く、押しても増えない。選んだあとで合わなくなった札は外さず赤い枠（保存で断る） */
.slipmenu .mitem.mno:not(.on) { opacity: .38; }
.slipmenu .mitem.mno:not(.on) .mpick { cursor: not-allowed; }
.slipmenu .mitem.mbad { box-shadow: 0 0 0 2px var(--vermil); }
/* キャストのオプションに無いオプションの札も押せない形（optfit-2026-10-07。薄くするのは上の .mno と同じ） */
.slipmenu button.mitem.mno:not(.on) { cursor: not-allowed; }
/* 追加項目のいちばん上の「ホテル込み」は数えない札（付ける／外すだけ。2026-09-27 利用者）。下の数える札と少し離す */
.slipmenu .mitem.mhotelin { margin-bottom: 2px; }
/* ホテル代は「ホテル込み」を選んでいるときだけ使える（同じ日「ホテル込みが選ばれてない場合は ホテル代 部分は無効状態に」） */
label.field.hoteloff .fieldname { color: var(--faint); }
label.field.hoteloff input:disabled { background: var(--panel2); color: var(--faint); opacity: .6; cursor: not-allowed; }
/* キャストの寮（2026-10-02 利用者「キャスト　ページ　連絡先に　入寮中　寮住所　期間（無制限あり）　１日入力ボックス　円　で記載できるよに」）。
   入寮中でないときは寮の欄を隠す（label.field・.fieldline の display が [hidden] より強いので書く）。1日の欄は数と「円」を横に。
   無制限のときの終わりの欄は止めて薄く */
#cbox-contact label.field.withunit { display: grid; grid-template-columns: minmax(0, 9em) auto; column-gap: 4px; align-items: center; }
#cbox-contact label.field.withunit > .fieldname { grid-column: 1 / -1; }
/* 隠す決まりは横に並べる決まりより後ろ・強く（同じ強さだと後ろの display: grid が勝って 1日 が出たままだった） */
#cbox-contact label.field[hidden], #cbox-contact label.field.withunit[hidden], #cbox-contact .fieldline[hidden] { display: none; }
/* キャストの出勤・待機（2026-10-02）：待機場所と詳細を 1 行に。詳細は入力欄のある場所のときだけ（wireCastWait。隠すときは待機場所が行いっぱい） */
/* 待機場所と詳細の行は箱の横幅いっぱい。待機場所は決まった幅（選んだ場所の名前や、詳細の欄が出る・隠れるで変わらない）、詳細は残りの
   幅いっぱい（2026-10-02 利用者「プルダウン内容によって　幅は変わらず　入力ボックスはもっと長く」。前は 2 列の格子の 1 列ぶんに 2 つ） */
#cbox-wait .fieldline { grid-column: 1 / -1; display: grid; grid-template-columns: 12em minmax(0, 1fr); column-gap: 8px; }
#cbox-wait label.field[hidden] { display: none; }
/* 迎え場所・送り場所は 1 つの行で、中身に合わせて伸ばし打った中身を全部見せる（いちばん短くて 16em・長くて箱の幅。入り切らなければ送り場所が次の行へ）
   （pickfit-2026-10-08 利用者「迎え場所、送り場所は行変わらない程度で入力内容は全表記されるように」。前は格子の 1 升＝220px ほどで長い住所が切れた） */
#cbox-wait .fieldline:has([data-f="pickup_place"]) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
#cbox-wait .fieldline:has([data-f="pickup_place"]) > label.field { flex: 0 1 auto; min-width: 16em; max-width: 100%; }
#cbox-wait [data-f="pickup_place"], #cbox-wait [data-f="dropoff_place"] { field-sizing: content; max-width: 100%; }
#cbox-contact .funit { color: var(--dim); font-size: 12px; white-space: nowrap; }
/* 寮の段（2026-10-02 利用者「入寮のUI目めちゃくちゃ」）：入寮中の札は 1 行に置いて寮の欄の頭に、期間の行（始め・〜・無制限）は箱の横幅いっぱいに
   渡らせる（広い画面では箱の中が 2 列の格子で、渡らせないと 1 列ぶんに 3 つが押し込まれ「無制限」が縦に折れた） */
#cbox-contact .recordgrid > label.check.chipcheck:has([data-f="dorm"]) { grid-column: 1 / -1; justify-self: start; }
#cbox-contact .fieldline:has([data-f="dorm_from"]) {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 11em) auto; column-gap: 8px; align-items: end;
}
/* 上の display: grid は、入寮中でないときに隠す決まり（.fieldline[hidden]）と強さが同じで後ろにあるので、隠す決まりもここに書く */
#cbox-contact .fieldline:has([data-f="dorm_from"])[hidden] { display: none; }
/* 無制限も札（2026-10-02 利用者「無制限もチップ方式」）。期間の日付の欄（28px）の上下の真ん中にそろえる */
#cbox-contact .fieldline > label.check.chipcheck:has([data-f="dorm_unlimited"]) { align-self: end; margin-bottom: 1px; }
/* 入寮中・無制限の札は主在籍の札と同じ小ささ（同じ日 利用者「入寮中もコンパクトに」。前は共通の札の 36px） */
#cbox-contact label.check.chipcheck:has([data-f="dorm"]) > span,
#cbox-contact label.check.chipcheck:has([data-f="dorm_unlimited"]) > span { height: 26px; padding: 0 9px; border-radius: 13px; font-size: 11.5px; }
#cbox-contact input[data-f="dorm_until"]:disabled { background: var(--panel2); color: var(--faint); opacity: .6; cursor: not-allowed; }
/* 期間の「〜」は 2 つの日付の間（dormtilde-2026-10-08 利用者「〜は　期間〜期間　で間に入るように」。前は後ろの日付の見出しで上に出ていた）。
   後ろの日付の欄は、見出し（〜）を日付の左に並べる */
#cbox-contact .fieldline:has([data-f="dorm_from"]) { grid-template-columns: minmax(0, 11em) minmax(0, 12.5em) auto; }
#cbox-contact label.field:has([data-f="dorm_until"]) { flex-direction: row; align-items: center; gap: 6px; }
#cbox-contact label.field:has([data-f="dorm_until"]) > .fieldname { flex: none; font-size: 12.5px; color: var(--text); }
#cbox-contact label.field:has([data-f="dorm_until"]) > input { flex: 1 1 auto; min-width: 0; }
.slipmenu .mcut { display: flex; align-items: baseline; gap: 3px; font-size: 10px; color: var(--dim); }
.slipmenu .mcut input { flex: 1 1 auto; min-width: 0; width: 100%; text-align: right; padding: 1px 4px; font-size: 10.5px; }
.slipmenu .mfare, .slipmenu .mthird .combo { width: 100%; min-width: 0; font-size: 10px; }
/* ［交通費を調べる］と一言（areafare-2026-10-19 #117）。交通費のプルダウンのすぐ下 */
.slipmenu .mfareask { width: 100%; margin-top: 3px; padding: 2px 4px; font-size: 10px; }
.slipmenu .mfareask[hidden], .slipmenu .mfarenote[hidden] { display: none; }
.slipmenu .mfarenote { display: block; margin-top: 2px; font-size: 9.5px; line-height: 1.3; color: var(--dim); }
.slipmenu .mfarenote.bad { color: var(--vermil); }
/* コース・オプションの箱は札の数だけ伸びる。箱の中のスクロールはやめた（menugrow-2026-10-03。利用者「この中に　スクロールは不要
   長さの分だけ伸びる」）。前は 640px で切って箱の中だけで送っていた（札が 70 を超える店のため）。伝票の窓は窓ごと縦に送る */
/* 伝票の窓では、プルダウンの候補も一回り小さく */
html.slipwin .cbpop { font-size: 11px; }

/* 伝票のページは目次を出さない（本家にも無い。縦を使いたくない） */
.pad:has(.slipform) .recnav { display: none; }

/* 別ウィンドウは 1180px で開くので、そこまでは 3 本のまま */
@media (max-width: 880px) {
  .slipform { grid-template-columns: 1fr; }
}

/* 伝票の別ウィンドウ（2026-09-25 利用者「伝票はいつも別ウィンドウ」）。
   左のメニューと上の見出しを隠して、伝票だけを出す */
html.slipwin .rail, html.slipwin .foot, html.slipwin .apphead { display: none; }
html.slipwin #app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
html.slipwin .main { padding-left: 0; }
html.slipwin .pad { padding-top: 4px; }
/* キャストの編集の窓（タスク表の名前から開く。2026-09-29）では一覧へ戻らない（閉じればタスク表に戻る） */
html.slipwin #rback { display: none; }
/* 伝票の窓の字を 1 割大きく（slipzoom199-2026-10-26 台帳 #199 利用者「伝票の顧客情報のメモは既にでかいから　他の文字をすべて10％大きく表示
   タスクの伝票をフォーカスで表示した内容の文字の大きさは変えない」→ 答え「伝票の窓全体」）。中身（.main）を zoom で 1.1 倍（欄・釦も一緒に）。
   伝票のあるときだけ（同じ slipwin のキャストの編集の窓は替えない）。メモの本文と書く欄は今の 13px のまま（zoom の中なので 13px ÷ 1.1）。
   本体に置く小窓（日付の暦・確かめの小窓・吹き出し）は位置を欄から計るので zoom を掛けない。選び口の一覧（#cbpop）は字だけ 1 割（11px → 12.1px） */
html.slipwin .main:has(.slipform) { zoom: 1.1; }
html.slipwin .main:has(.slipform) .slipguest .guestinfo .gmemo .gbody,
html.slipwin .main:has(.slipform) .slipguest .guestinfo .gmemoadd > textarea.gin,
html.slipwin .main:has(.slipform) .slipguest .guestinfo .gmemoedit > textarea.gin { font-size: calc(13px / 1.1); }
html.slipwin:has(.slipform) .cbpop { font-size: 12.1px; }
/* 伝票の上の帯（2026-09-27 利用者「保存は左 … 余白は詰める」）。左に 保存・詳細ペースト・伝票コピー、右に リセット・削除 */
.pad:has(.slipform) .recordbar { gap: 6px; margin-bottom: 6px; padding: 3px 0; }

/* 顧客の書き足していくメモ（2026-09-25 利用者） */
/* 顧客ページの「ほかの電話」（足した番号の一覧・✕・［追加］。2026-09-26 利用者「番号は常に追加ボタンで追加できない
   といけない」）。見た目は上の欄（label.field）とそろえる */
.telpanel { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--dim); }
.telpanel .tellist { display: flex; flex-direction: column; gap: 2px; color: var(--text); font-size: 12.5px; }
.telpanel .telrow { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.telpanel .telrow .x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 3px; }
.telpanel .telrow .x:hover { color: var(--vermil); }
.telpanel .teladd { display: flex; gap: 6px; }
.telpanel .teladd .telnew { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 4px 7px; }
/* ［追加］は縮めず折らない（guesttel-2026-10-09 利用者「顧客一覧　番号追加のUI　おかしい」。欄が場所を取り、釦が押し縮められて
   「追／加」の 2 行・行の高さ 40px になっていた）。欄は残りの幅、釦は欄と同じ高さ */
.telpanel .teladd .btn { flex: none; white-space: nowrap; }
.telpanel .telmsg { font-size: 10.5px; color: var(--jade); }
.telpanel .telmsg.bad { color: var(--vermil); }
.telpanel .telmsg:empty { display: none; }
/* 欄のすぐ下に積む塊（顧客の電話の下のほかの電話。gtidy-2026-10-08 利用者「番号は縦に増えて　電話の下に増えていくように」）。
   電話 → 足した番号を 1 行ずつ（✕ つき）→ 足す欄と［追加］ */
.fieldstack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fieldstack > .telpanel .tellist:empty { display: none; }
/* 顧客のページのヘブン会員の箱（guestmember-2026-10-12）：電話の箱と同じ見た目。候補が無いあいだは場所を取らない */
.memberpanel .membercands:empty { display: none; }
.memberpanel .memberrow { flex-wrap: wrap; row-gap: 2px; }
.memberpanel .memberrow .btn.mini { margin-left: 4px; }
.fieldstack > .telpanel .telrow { min-height: 22px; padding-left: 8px; }
.fieldstack > .telpanel .teladd { gap: 4px; }
.fieldstack > .telpanel .teladd .btn { padding: 3px 10px; font-size: 11px; }
/* 顧客の外国人の札と内容の欄は並べて 1 行に（gtidy-2026-10-08 利用者「外国人備考が離れる」。前は別々の升で、札のあとに大きな空き） */
#gbox-basic .fieldline:has([data-f="foreigner"]) { grid-column: 1 / -1; align-items: flex-end; }
#gbox-basic .fieldline:has([data-f="foreigner"]) > label.field { flex: 0 1 26em; }
#gbox-basic .fieldline > label.check.chipcheck:has([data-f="foreigner"]) { flex: none; margin-bottom: 2px; }
.memopanel { display: flex; flex-direction: column; gap: 6px; }
.memoadd { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.memoadd .memobody { width: 100%; min-width: 0; box-sizing: border-box; }
.memotools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.memocolor { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; color: var(--dim); }
.memocolor select { width: auto; max-width: 11em; min-width: 0; padding: 2px 4px; font: inherit; }
.memolist { display: flex; flex-direction: column; gap: 4px; }
.memorow {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
  border-top: 1px dashed var(--line); padding-top: 6px; min-width: 0;
}
.memorow .memowhen { font-size: 10px; color: var(--faint); overflow-wrap: anywhere; }
.memorow .memotext { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 伝票と顧客情報のメモ本文・入力欄を同じ大きさで読みやすく（2026-10-23）。 */
.slipguest .guestinfo .gmemo .gbody,
.slipguest .guestinfo .gmemoadd > textarea.gin,
.slipguest .guestinfo .gmemoedit > textarea.gin,
.memopanel .memorow .memotext,
.memopanel .memoedit .memoeditbody,
.memopanel .memoadd .memobody {
  font-size: 13px; font-weight: 700; line-height: 1.5;
}
.memoedit { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.memoedit .memoeditbody { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; }
.memoedittools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.memoactions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.memoactions .x { margin-left: auto; }
.memopin { display: inline-block; border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; font-size: 10px; color: var(--accent); }
.memopanel, .slipguest { --memo-red: #b91c1c; --memo-blue: #1d4ed8; }
[data-theme="dark"] .memopanel, [data-theme="dark"] .slipguest { --memo-red: #fca5a5; --memo-blue: #93c5fd; }
.guestinfo .gbody.memo-red, .memorow .memotext.memo-red, textarea.memo-red { color: var(--memo-red); }
.guestinfo .gbody.memo-blue, .memorow .memotext.memo-blue, textarea.memo-blue { color: var(--memo-blue); }
.memorow .x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 3px; }
.memorow .x:hover { color: var(--vermil); }

/* 場所（ホテル等）の提携と料金（2026-09-25 利用者）。窓の中で 1 つの塊に見せる */
.tieup {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.tiebody { display: flex; flex-direction: column; gap: 7px; padding-left: 20px; }
.tierow, .tieline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tieup b { font-weight: 400; color: var(--faint); font-size: 10px; }
/* 見出しは行いっぱいに置いて、中身を次の行へ送る（窓は狭いので、横に並べると折り返して読みにくい） */
.tiename { font-size: 11px; color: var(--faint); width: 100%; }
.tieline .dowchips { width: 100%; }
.minif { display: flex; align-items: center; gap: 4px; }
.minif > span { font-size: 11px; color: var(--faint); }
.minif input[type="number"] { width: 68px; text-align: right; }
.tietime { width: 52px; text-align: right; }
.tiewhen { margin-left: 6px; opacity: .8; }
.tieextra { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tieline { border-top: 1px dashed var(--line); padding-top: 5px; }
/* 場所（ホテル等）の主店舗ごとの交通費（vfare-2026-10-19）。提携の塊と同じ枠。店舗の名前とプルダウンを 1 行ずつ */
.vfare {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px 10px; margin: 4px 0 7px;
  display: flex; flex-direction: column; gap: 6px;
}
.vfarehead { display: flex; flex-direction: column; gap: 1px; }
.vfarenote { font-size: 10px; color: var(--faint); }
/* 提携ありのあいだ（tieupfare-2026-10-20 #122）：一言は赤・行は薄く */
.vfaretienote { font-size: 10px; color: var(--vermil); }
.vfaretienote[hidden] { display: none; }
.vfare.vfaretie .vfarerows { opacity: .45; }
.vfarerows { display: flex; flex-direction: column; gap: 5px; }
.vfarerow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.vfarename { flex: 0 0 auto; width: 150px; color: var(--dim); }
.vfarerow select, .vfarerow .combo { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.tieline .dowchips { display: flex; gap: 2px; }
.tieline .dowchips .chip { padding: 1px 5px; min-width: 20px; }
.tieline .tieyen { width: 64px; text-align: right; }
.tieline .x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 3px; }
.tieline .x:hover { color: var(--vermil); }
/* キャストの在籍：店を選ぶ行（いくつでも）。列は 店舗・姫デコID（連携用）・報酬ランク・主在籍（チェック）・外す
   （2026-09-22 利用者。姫デコID は 2026-09-28 利用者「在籍の店舗と報酬ランク の間に 表示」） */
.affil {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(6.5em, .8fr) minmax(0, 1fr) 5em 22px;
  gap: 6px 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.affil .affrow, .affil .affhead { display: contents; }
.affil .affhead span { font-size: 10px; color: var(--faint); }
.affil .affhead span:nth-child(4) { text-align: center; }
.affil input[data-a="heaven"] { font-size: 12px; padding: 3px 6px; min-width: 0; font-variant-numeric: tabular-nums; }
/* ダミーの在籍の姫デコID は要らないので止めて薄く（dummyhime-2026-10-17。ホテルの欄・寮の終わりの欄と同じ止め方） */
.affil input[data-a="heaven"]:disabled { background: var(--panel2); color: var(--faint); opacity: .6; cursor: not-allowed; }
.affil select { font-size: 12px; padding: 3px 6px; min-width: 0; }
/* 主在籍は札（2026-10-02 利用者「入寮　主在籍　は　　チップ方式」）。行の高さに合わせて小さめ。中身のチェックボックスは隠す（chipcheck） */
.affil label.affmain { justify-self: center; }
.affil label.check.chipcheck.affmain > span { height: 26px; padding: 0 9px; border-radius: 13px; font-size: 11.5px; }
.affil label.check.chipcheck.affmain > input:disabled + span { opacity: .45; cursor: default; }
.affil .x { color: var(--dim); padding: 0; }
.affil .x:hover { color: var(--vermil); }
.affil .fieldhint { grid-column: 1 / -1; }
/* 必須 3 つ（castmust-2026-10-17）：在籍の店舗・姫デコID（連携用）が空のときの赤い字は、その在籍の行の下に箱の列いっぱい。見出しの「要」は欄の印と同じ */
.affil .fielderr { grid-column: 1 / -1; margin: -2px 0 2px; }
.affil .affhead .req { font-size: 11px; color: var(--vermil); }
/* 報酬ランクの「個別設定」（2026-09-27 利用者）。その在籍の行のすぐ下に 基準報酬ランク と コース・指名の 料金・バック の表 */
/* 枠の地は薄ピンク（2026-09-27 利用者「この背景を薄ピンクに」。報酬ランクのプルダウンには色を付けない＝「色変化なし」）。
   上の行は「個別設定適応キャスト」と右端の［開く］／［閉じる］。開いた中に 基準報酬ランク と コースの表 */
.affil .affcustom {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: -2px;
  padding: 6px 8px; border: 1px solid var(--vermil-dim); border-radius: 4px; background: var(--paycustom);
}
.affil .affhead2 { display: flex; align-items: center; gap: 8px; }
.affil .affnote { font-size: 11px; font-weight: 600; color: var(--vermil); }
.affil .affclose { margin-left: auto; flex: none; font-size: 10.5px; padding: 2px 10px; }
.affil .affbody { display: flex; flex-direction: column; gap: 6px; }
.affil .affcustom.shut .affbody { display: none; }
/* 札「報酬ランクの変更」の無い人の在籍の報酬ランク・個別設定は見るだけ（permsimple-2026-10-10）。止めた欄は読める濃さのまま地だけ替える */
.affil .combo .cbin:disabled, .affil .affcustom input[data-c][readonly] { background: var(--panel2); color: var(--dim); cursor: default; }
.affil .affbase { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dim); }
.affil .affbase > .combo, .affil .affbase > select { flex: 1 1 auto; min-width: 0; max-width: 60%; }
.affil .affcourses { max-height: 360px; overflow-y: auto; }
/* 指名（フリー・写指・本指）の表はコースの表の下、スクロールの外（shimei-2026-10-31）。店の料金表に指名の行が無ければ出さない */
.affil .affnoms:empty { display: none; }
.affil .afftable { width: 100%; border-collapse: collapse; font-size: 11px; }
.affil .afftable th { font-size: 10px; font-weight: 400; color: var(--faint); text-align: left; padding: 1px 4px; }
.affil .afftable th:nth-child(n+2) { width: 6.5em; text-align: right; }
.affil .afftable td { padding: 1px 4px; }
.affil .afftable td:first-child { overflow-wrap: anywhere; }
/* 欄は共通の入力欄の枠（type="text"。2026-09-27 利用者「料金 バックの枠 は 他の枠に合わせたUI」）。表の中なので詰める */
.affil .afftable input {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 2px 6px; font-size: 12px;
  text-align: right; font-variant-numeric: tabular-nums;
}
/* 基準（店の料金・基準の報酬ランクのバック）と違う額は赤い枠（同じ夜「変更されてるものは 赤枠でわかるように」） */
.affil .afftable input.changed { border-color: var(--vermil); box-shadow: inset 0 0 0 1px var(--vermil); }
/* 厚生費計算①・②（本家と同じ文の形。2026-09-22 利用者「厚生費はこのルール」） */
/* 見出し「厚生費計算」の下に ①・② を 1 行ずつ（同日「これコンパクトにして 1 行ごとにしてほしい」）。
   字と欄を小さくし、狭くて入らないときだけ言葉の切れ目で次の行へ回す */
.welfare {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.welfare .wlabel { font-size: 11px; color: var(--dim); }
.welfare .wline {
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 3px;
  white-space: nowrap; font-size: 11px; color: var(--text);
}
.welfare .wmark { flex: none; width: 1.3em; color: var(--dim); }
.welfare .wnum {
  flex: none; width: 3.5em; height: 20px; margin: 0 1px; padding: 0 3px;
  text-align: right; font-size: 11px; font-variant-numeric: tabular-nums;
}
.welfare .wnum.s { width: 2.1em; }
.welfare .wnote { color: var(--vermil); font-size: 10px; }
.welfare .wwarn { color: var(--vermil); font-size: 10.5px; }

.welfare.clash .wnum { border-color: var(--vermil); }
/* 「源氏名（かな）」の形の欄と、生年月日の横の年齢（2026-09-22 利用者） */
.pairfield { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dim); }
.pairline { display: flex; align-items: center; gap: 2px; }
.pairline input { flex: 1 1 0; min-width: 0; font-size: 12.5px; padding: 4px 7px; }
.pairparen { color: var(--faint); font-size: 12.5px; }
/* 年齢は生年月日の欄の中、日付のすぐ後ろ（2026-09-30 利用者「このボックスの中に　で表示する」）。位置の左は wireAgeChip が日付の字の幅を
   測って決める。押しても欄に届く（日付の選び口はそのまま） */
.ageline { position: relative; display: flex; align-items: center; }
.ageline input { flex: 1 1 auto; min-width: 0; }
.agechip { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
           font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
/* スタッフの基本のロックの理由：左にロックの釦（2026-09-30 利用者「ロックする　ボタンをロック理由の左側に配置」）。見出しを押して釦が
   押されないよう、この欄だけラベルでなく div（wireStaffLock）。見た目はほかの欄（label.field）とそろえる */
.lockfield { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--dim); }
.lockline { display: flex; align-items: center; gap: 8px; }
.lockline input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 4px 7px; }
.lockline .btn { flex: none; }
/* ドライバー詳細（2026-09-30 利用者「ドライバー詳細　の画面を作る … 当日出勤　休み　を切り替える」）と、送ドラ・迎ドラ・回収・釣り回収の
   選択肢の「当日出勤」の札 */
.drivergrid td.dname { font-weight: 600; }
.drivergrid tr.rest td.dname { color: var(--dim); font-weight: 400; }
/* 本日出勤・出勤中・退勤・休み のプルダウン（2026-10-01 利用者「本日出勤　出勤中　退勤　休み　のプルダウンに変更」。前は 2 つの釦）と
   出勤時間（30 分刻み）。ほかのページと同じ検索付きプルダウン（同じ日 利用者「他ページのプルダウンに合わせる」）。状態の地の色は選択肢の
   data-hex（伝票の状態と同じ塗り）。ここでは幅だけ決める */
.drivergrid .combo:has(> select.dstate) { width: 96px; }
.drivergrid .combo:has(> select.dclock) { width: 76px; }
.drivergrid .combo:has(> select.dclock) > .cbin { font-variant-numeric: tabular-nums; }
/* タオル枚数の欄の 新・済（同じ日 利用者「タオルは　新　済　両方記載」）。打つ欄は置かない（同じ日 利用者「タオルの枚数はここで変更しない
   ドライバー次第」） */
.drivergrid .dtowel { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.drivergrid .dtowel b { color: var(--text); font-weight: 600; }
.drivergrid .dtowel b.minus { color: var(--vermil); }
/* ドライバー詳細の 出勤時間（30 分刻みの 1 つのプルダウン。2026-10-01 利用者「30分刻みで１つプルダウンに統一」。前は時・分の 2 つ）・
   所持バッグ・タオル枚数（2026-10-01） */
/* 前の日に入れた時刻を出しているだけの出勤時間は薄く（変えるとその日の時刻。2026-10-01） */
.drivergrid td.carried .cbin { color: var(--dim); }
/* ドライバー本人のページ（スマホ専用。2026-10-01 利用者「ドライバーページはスマホ専用　アイフォンも＆ロイドも崩れないように」）。
   左のメニュー・見出し・リモコンを出さず 1 列。ページ全体を流す（本文の中で流すと、iPhone で上下のバーが出入りしたときに崩れる）。
   字は大きめ・釦は押しやすい大きさ（高さ 44px）・日付の欄の字は 16px（iPhone で押したときに画面が拡大されない）。長い名前は折り返す */
html.drivemode, html.drivemode body { height: auto; min-height: 100%; }
html.drivemode { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.drivemode body { font-size: 15px; line-height: 1.5; }
html.drivemode #app { display: block; height: auto; }
html.drivemode .rail, html.drivemode #apphead, html.drivemode #top, html.drivemode #foot, html.drivemode .rc-layer { display: none !important; }
html.drivemode .main { display: block; min-height: 0; }
html.drivemode .body { overflow: visible; min-height: 0; }
.drv { max-width: 560px; margin: 0 auto; padding: 12px 12px 40px; display: flex; flex-direction: column; gap: 12px; }
.drv * { min-width: 0; }
.drvhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drvhead > b { font-size: 18px; }
.drvtools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.drvbtn { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
          color: var(--text); font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
          flex: none; white-space: nowrap; }
.drvday { display: flex; align-items: center; gap: 6px; }
.drvday input[type="date"] { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line);
                             border-radius: 10px; background: var(--panel); color: var(--text); }
.drvdow { flex: none; font-size: 15px; color: var(--dim); }
.drvstep { flex: none; font-size: 20px; padding: 0; }
/* 幅の狭いスマホ（320〜359px）：日付の行の釦と隙間を詰め、日付の欄に「2026/10/01」が収まるようにする */
@media (max-width: 359px) {
  .drvday { gap: 4px; }
  .drvday .drvbtn { min-width: 38px; padding: 0 8px; }
  .drvday input[type="date"] { padding: 6px 4px; }
}
.drvcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.drvname { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.drvduty { font-size: 13.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--panel3); color: var(--dim); }
.drvduty.on { background: var(--dutyhex, var(--jade)); color: #fff; }
.drvsaved.bad { color: var(--vermil); }
/* ドライバー詳細のページの退勤の確かめ（deskleave-2026-10-04）：所持バッグのある人を退勤にするとき、その人の行の下に注意書きと［確認した］［やめる］ */
.drivergrid tr.dleaverow > td { background: var(--amber-wash); border-left: 3px solid var(--amber); }
.dleave { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dleavemsg { flex: 1 1 280px; }
.dleavemsg b { color: var(--amber); }
.dleave .dleaveok { border-color: var(--amber); color: var(--amber); font-weight: 700; }
.driver-return-question { margin: 4px 0; }
.driver-return-list { margin: 4px 0 8px; padding-left: 1.5em; }
.drvlabel { font-size: 13.5px; font-weight: 600; color: var(--dim); margin: 0; }
.drvtotal { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.drvparts { display: grid; gap: 4px; margin: 10px 0 0; }
.drvparts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.drvparts dt { color: var(--dim); }
.drvparts dd { margin: 0; font-variant-numeric: tabular-nums; }
.drvdone { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--jade); }
.drvnone { color: var(--dim); font-size: 15px; }
.drvjobs { display: flex; flex-direction: column; gap: 10px; }
/* ドライバーページの しまえる箱（drivefold-2026-10-03。利用者「ドライバー　ページ　バック　タオル　　送迎・回収　を内容はしまえるように」）。
   見出しの行がそのまま釦（押しやすい高さ 44px）。右に要点と ▾／▸。しまうと中身を隠す。送迎・回収は札を並べる箱なので枠なしのまま */
.drvfoldbar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: -8px 0; padding: 0; border: 0;
              background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.drvfoldbar .drvfoldsum { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
                          overflow-wrap: anywhere; text-align: right; }
.drvfoldbar .drvfoldsum:empty { display: none; }
.drvfoldbar .drvlabel + .drvfoldsum:empty + .drvcaret { margin-left: auto; }
.drvfoldbar .drvcaret { flex: none; width: 28px; text-align: center; font-size: 16px; color: var(--dim); }
.drvfold.drvcard > .drvfoldbody { margin-top: 10px; }
.drvfoldbody[hidden] { display: none; }
/* 送迎・回収の見出しも所持バッグ・タオルと同じ札の見た目（地・枠・角・高さ。drivefold2-2026-10-03。利用者「送迎回収も同じような見た目」）。
   伝票の札は見出しの下に並ぶ */
.drvfold.drvjobs > .drvfoldbar { box-sizing: border-box; min-height: 58px; margin: 0; padding: 6px 14px; background: var(--panel);
                                 border: 1px solid var(--line); border-radius: 14px; }
.drvfold.drvjobs > .drvfoldbody:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
/* 完了の伝票のたたみ（drvdone-2026-10-10 利用者「完了伝票は閉じて　表示できるように」）：終わっていない伝票の下の 1 行（押しやすい高さ 44px）。
   押すと完了の伝票をひらく。点線の枠で、伝票の札と見分ける */
.drvdonebar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; box-sizing: border-box; margin: 0; padding: 6px 14px;
              border: 1px dashed var(--line); border-radius: 12px; background: var(--panel2); color: var(--dim);
              font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.drvdonebar .drvcaret { margin-left: auto; flex: none; width: 28px; text-align: center; font-size: 16px; color: var(--dim); }
.drvdonelist { display: flex; flex-direction: column; gap: 10px; }
.drvdonelist[hidden] { display: none; }
/* 所持総額の総額は見出しの右に大きめの太字（しまっても残る。drivefold3-2026-10-03。利用者「所持総額　も総額を残して　しまえる」）。内訳はその下 */
.drvfold.drvmoney .drvfoldbar .drvfoldsum { font-size: 22px; font-weight: 700; }
/* マイナスの額は赤い字（drvminus-2026-10-07 利用者「マイナス表記の　文字に違和感を感じる　マイナス金額は赤表示」。印「−」は付けない）。
   色は日報報告・委託費明細・伝票のカード・リモコンのマイナスと同じ */
.drv .drvminus, .drvfoldbar .drvfoldsum.drvminus { color: var(--vermil); }
.drvfold.drvmoney .drvfoldbody > .drvparts:first-child { margin-top: 0; }
.drvjob { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--jobhex, var(--line)); border-radius: 12px; padding: 12px; }
.drvjob.void { opacity: .55; }
/* ドライバーページの他優先の件は少し薄く（slipyield-2026-10-31。キャスト検索の件は行ごと） */
.drvjob.otherfirst, .drvcastslip.otherfirst > summary { opacity: .6; }
.drvjobtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drvtime { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.drvroles { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.drvroles i { font-style: normal; font-size: 13.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--accent-wash);
              color: var(--accent); }
.drvcast { margin-top: 6px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
/* キャスト名・店舗・回収の決まりの札を 1 行に（drvcast-2026-10-03。札は右に寄せ、入らなければ次の行の右）。店舗詳細は店舗の下 */
.drvjob .drvcast { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.drvjob .drvcast .drvstore { margin-left: 0; }
.drvjob .drvcast .drvcollect { margin: 0 0 0 auto; }
.drvdetail { margin-top: 2px; font-size: 14px; color: var(--dim); overflow-wrap: anywhere; }
/* キャスト検索の箱（drvcast-2026-10-03）。欄の字は 16px（iPhone で押したときに拡大されない）。当てはまる人ごとに線で区切る */
.drvcastq { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; padding: 6px 10px; border: 1px solid var(--line);
            border-radius: 10px; background: var(--panel); color: var(--text); }
.drvcasthits { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.drvcasthit { border-top: 1px solid var(--line2); padding-top: 8px; }
.drvcasthit:first-child { border-top: 0; padding-top: 0; }
.drvcastname { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.drvcasthint { font-size: 14px; }
.drvcastslips { display: grid; gap: 6px; margin-top: 10px; }
.drvcastslipshead { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--dim); }
.drvcastslip { min-width: 0; border: 1px solid var(--line); border-left: 6px solid var(--jobhex, var(--line)); border-radius: 10px; overflow: hidden; }
.drvcastslip > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) 12px; align-items: center; gap: 8px;
  box-sizing: border-box; min-height: 44px; padding: 8px; list-style: none; cursor: pointer; }
.drvcastslip > summary::-webkit-details-marker { display: none; }
.drvcastslip > summary::after { content: "▸"; color: var(--dim); text-align: center; }
.drvcastslip[open] > summary::after { content: "▾"; }
.drvcastslip > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 9px; }
.drvcasttime { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drvcastplace { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.drvcastslip > .drvjob { margin: 0; padding: 8px 10px 12px; border: 0; border-top: 1px solid var(--line2); border-radius: 0; }
.drvcastslip .drvbit { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .drvcastslip .drvyen { grid-template-columns: minmax(0, 1fr); }
}
.drvstore { margin-left: 8px; font-size: 13.5px; font-weight: 400; color: var(--dim); }
.drvplace { margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; }
/* 送迎・回収の 1 件の 待機・迎え・送り・場所・道具の行と、回収の決まりの札・金額の 4 つ（drvjob-2026-10-03）。項目名は左の決まった幅、
   中身は折り返す。金額は 2 列（スマホの 320px でも 1 行に収まる字）。タオル回収必須は赤い字 */
.drvrows { margin: 6px 0 0; display: grid; gap: 3px; }
/* 項目名の列は 4 字（「顧客番号」13.5px×4＝54px）が 1 行に入る幅（drvtel-2026-10-20。前は 3.2em＝2 字用で、4 字は 2 行に折れた）。
   どの行も同じ幅なので、中身の頭はそろう */
.drvrows > div { display: grid; grid-template-columns: 3.7em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.drvrows dt { font-size: 13.5px; color: var(--dim); }
.drvrows dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.drvrows .drvnote { white-space: pre-line; }       /* 住所備考は改行のまま（homenote2-2026-10-20） */
.drvcollect { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.drvmode { display: inline-block; font-size: 13.5px; font-weight: 700; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); }
.drvmode.first { border-color: var(--amber-dim); color: var(--amber); background: var(--amber-wash); }
.drvmode.cast { border-color: var(--jade-dim); color: var(--jade); background: color-mix(in srgb, var(--jade) 8%, transparent); }
.drvyen { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.drvyen > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--line2); padding-bottom: 2px; }
.drvyen dt { font-size: 13.5px; color: var(--dim); white-space: nowrap; }
.drvyen dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 先渡しの［変更］［保存］（drvadv-2026-10-07 利用者「ドライバーページで先渡し　金額の変更はできる。　変更ボタンクリックで　変更　保存ボタンで
   保存」）。［変更］は先渡しの額の右の小さな釦（地図の印と同じ 28px の高さ・同じ色）。狭いスマホで収まらなければ、額と釦は次の行の右へ
   折り返す。押すと金額の箱の下に欄（16px：iPhone で押したときに画面が拡大されない）と［保存］［やめる］ */
.drvyen > .drvadvcell { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.drvyen > .drvadvcell dd { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.drvadvbtn { flex: none; min-height: 28px; padding: 0 9px; border: 1px solid var(--accent-edge); border-radius: 6px; background: var(--accent-wash);
             color: var(--accent); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.drvadvbtn.on { border-color: var(--accent); background: var(--accent); color: var(--panel); }
.drvadvbox { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--accent-edge); border-left: 4px solid var(--accent); border-radius: 8px;
             background: var(--panel2); display: grid; gap: 8px; }
.drvadvline { display: flex; align-items: center; gap: 8px; margin: 0; }
.drvadvlabel { flex: none; font-size: 13.5px; color: var(--dim); }
.drvadvline input { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; font-size: 16px; padding: 6px 10px; border: 1px solid var(--line);
                    border-radius: 10px; background: var(--panel); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.drvadvunit { flex: none; font-size: 15px; }
.drvadvbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.drvadvbtns .drvadvsave { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); font-weight: 700; }
.drvadvsaid { font-size: 14px; color: var(--dim); }
.drvadvsaid:empty { display: none; }
.drvadvsaid.bad { color: var(--vermil); }
.drvadvdone { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--jade); }
.drvmode.paycard { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-wash); }
.drvnil { color: var(--faint); font-weight: 400; }
.drvjob .drvtowelneed { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--mark-red, var(--vermil)); }
.drvstatus { margin-top: 4px; font-size: 14px; color: var(--dim); }
/* 内勤とドライバーの切り替え（見出しの出力モニターの左・ドライバーページの上。2026-10-01） */
.headmode { display: flex; align-items: center; }
.headmode:empty { display: none; }
.drvhead .drvswitch { order: 3; flex: 1 1 100%; }
.drvhead .drvswitch button { flex: 1 1 0; min-height: 44px; padding: 0 12px; font-size: 15px; }
/* ドライバーページのタオル（2026-10-01 利用者「ドライバー画面　のタオルは　新タオル　済タオル　の個数を表記　事務所から　数字　追加
   ボタン」）。数は大きく 2 つ並べ、枚数の欄と［追加］は 1 行（字は 16px：iPhone で押したときに画面が拡大されない） */
.drvtowelnums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.drvtowelnums > div { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
                      background: var(--panel2); }
.drvtowelnums span { font-size: 13.5px; color: var(--dim); }
.drvtowelnums b { margin-left: auto; font-size: 22px; font-variant-numeric: tabular-nums; }
.drvtowelnums small { font-size: 12px; color: var(--dim); }
.drvline input { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line);
                 border-radius: 10px; background: var(--panel); color: var(--text); font-variant-numeric: tabular-nums; }
.drvline input:disabled { background: var(--panel2); color: var(--faint); }
/* 送迎の札：迎えの横の赤字（行き先がビジネスホテルか自宅）と、伝票のタオル枚数 */
.drvtowelneed { font-size: 13.5px; font-weight: 700; color: var(--mark-red); }
.drvtowelcount { margin-top: 4px; font-size: 14px; color: var(--text); }
/* 伝票の窓のタオル（2026-10-01 利用者「送ドラ右に　タオル１　を表示して　タオル不要　タオル追加　ボタンを作る」「迎えドラの横に
   タオル回収必須　が　赤文字表示」）。送ドラ・迎ドラの行は釣り回収の行と同じ 2 つ組（.fieldline）で入力の幅をそろえる（同じ日 利用者
   「釣り回収の入力と同じ幅に」）。枚数と釦・赤字は 2 つ目の組。出さないときは隠す（.slipform .field の display: grid が [hidden] より
   強いので、隠す決まりを書く）。「タオル 1枚［＋］［－］」は 1 行（同じ日 利用者「タオル １枚　＋ボタン　－ボタン　で１行に収めよう」。
   伝票の窓の幅 1180 では 2 つ目の組が 119px。釦は小さな四角にして収める） */
.slipform .sliptowelset { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.slipform .sliptowelset[hidden], .slipform .sliptowelcell[hidden] { display: none; }
.sliptowelnum { font-size: 10.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sliptowelbtns { display: inline-flex; gap: 2px; }
.slipform .sliptowelbtn { width: 18px; height: 18px; min-height: 0; padding: 0; font-size: 11px; line-height: 1;
                          display: inline-flex; align-items: center; justify-content: center; }
.sliptowel { color: var(--mark-red); font-weight: 700; font-size: 10.5px; white-space: nowrap; }
/* 伝票の窓の NG（2026-10-01 利用者「NGキャストで登録されえている場合は　選択はできるが　プルダウンを赤枠にして　下に赤文字で
   NGキャストです。　と表記」「自宅✖キャストの場合は自宅の背景が赤になり　キャスト名下に顧客ルールと同じでプルダウン赤枠で自宅NGと表示」
   「要相談　も　✖と一緒で　要相談　の文字を出す」。赤字の文は「顧客がNGキャストです。」「自宅NGキャストです。」「自宅要相談です。」）。
   赤枠は内側の影で描く（枠の線を足すと高さが変わり、隣の状態の欄とずれる）。赤字はキャストの行のすぐ下、プルダウンの左端にそろえる
   （項目名の列の幅＋欄のすき間 6px）。ドライバーのプルダウンも同じ赤枠（.slipng） */
.slipform .field.slipng .combo > .cbin, .slipform .field.slipng select {
  border-bottom-color: var(--mark-red); box-shadow: inset 0 0 0 1.5px var(--mark-red);
}
/* ホテルを替えてホテル代が替わったとき、欄を少し光らせる（slipfix-2026-10-03） */
@keyframes hotelswap { from { background-color: var(--amber-wash); box-shadow: 0 0 0 2px var(--amber); } }
.slipform input.hotelswap { animation: hotelswap 1.6s ease-out; }
.slipngsay { padding-left: calc(var(--slip-label) + 6px); color: var(--mark-red); font-weight: 700; font-size: 10.5px; line-height: 1.35; }
.slipngsay > span { display: block; }
.slipngsay[hidden] { display: none; }
.placetabs .ptab.ptabng, .placetabs .ptab.ptabng:hover, .placetabs .ptab.ptabng[aria-selected="true"] {
  background: var(--mark-red); border-color: var(--mark-red); color: #fff;
}
/* NG のドライバー（同じ日 利用者「キャストが決まっている場合は　ドライバープルダウン　に表示名　NG　と記載」「マッチした場合は　ドライバーの
   プルダウン　赤　表示名横にNGが赤文字」）。一覧の行は名前の横に赤字の「NG」（色を付けた行の地は濃いので淡い赤）。選んでいれば、
   名前のすぐ右に重ねる赤字の「NG」（位置は wireSlipNg が字の幅を測って決める。開いて打っているあいだは隠す） */
.cbpop .cbrow .cbng { margin-left: 6px; color: var(--mark-red); font-weight: 700; }
.cbpop .cbrow.on .cbng { color: var(--mark-red-rev); }
.combo > .cbngmark { position: absolute; top: 50%; transform: translateY(-50%); color: var(--mark-red); font-weight: 700;
                     font-size: 10.5px; line-height: 1; white-space: nowrap; pointer-events: none; }
.combo > .cbngmark[hidden], .combo.open > .cbngmark { display: none; }
.drvhint { margin-top: 8px; font-size: 13.5px; color: var(--dim); }
.drvsaved { margin-top: 6px; min-height: 1.2em; font-size: 13.5px; color: var(--jade); }
/* ドライバーページのバッグ（2026-10-01 利用者「バック所持バックの番号　事務所　１～40選択　追加ボタン　返却ボタン　キャスト選択　渡したボタン　回収」）。
   所持の番号は押して選べる札・プルダウンはスマホの選ぶ窓のまま（字は 16px）・選ぶ欄と釦 2 つは 1 行 */
.drvheld { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 札の大きさはそろえる（2026-10-01 利用者「チップの大きさに違いを感じる」）。幅と高さを決め、長い名前は … で切る */
.drvbag { width: 76px; height: 44px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
          color: var(--text); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
          display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.drvbag.on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
/* 回収したキャストの名前は小さく番号の下に（2026-10-01 利用者「名前は小さく　番号の下に表示」） */
.drvbagfrom { align-self: stretch; font-size: 11px; font-weight: 400; text-align: center; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.drvact { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.drvacthead { font-size: 13.5px; font-weight: 600; color: var(--dim); }
/* 選ぶ欄と釦 2 つを 1 行に（2026-10-01 利用者「スマホでも１行にできる？？」）。釦は幅をそろえ、残りを選ぶ欄に */
.drvline { display: flex; gap: 6px; align-items: stretch; }
.drvline select { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line);
                  border-radius: 10px; background: var(--panel); color: var(--text); }
.drvline .drvbtn { flex: none; width: 60px; min-width: 0; padding: 0 4px; font-weight: 600; }
.drvline .drvbtn:disabled { background: var(--panel2); color: var(--faint); }
#drvbaghint:empty { display: none; }
/* 所持の札の［返却］と事務所の札の［追加する］（2026-10-02 利用者「プルダウンではなく　事務所の持つバックのをチップ選択して
   追加するボタンで追加」「返却も　同様所持バックから選んで返却」）。札はいくつでも選べる。釦は見出しの右（事務所の札は 40 個まで並ぶ） */
.drvbaghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drvbaghead .drvbtn { flex: none; min-width: 104px; font-weight: 600; }
.drvbaghead .drvbtn:disabled { background: var(--panel2); color: var(--faint); }
.drvact .drvheld { margin-top: 0; }
/* ドライバー詳細の所持バッグ（番号の札。今日だけ） */
/* 札の大きさはそろえる（2026-10-01 利用者「チップの大きさに違いを感じる」）。名前のある札も無い札も同じ幅・高さ。長い名前は … で切る */
.drivergrid td.dbags i { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 5em; height: 2.6em;
                         margin: 1px 2px; padding: 0 4px; border-radius: 999px; font-style: normal; text-align: center;
                         background: var(--panel3); font-variant-numeric: tabular-nums; vertical-align: top; line-height: 1.15; }
/* 回収したキャストの名前は小さく番号の下に（2026-10-01 利用者「名前は小さく　番号の下に表示」） */
.drivergrid td.dbags i small { align-self: stretch; font-size: 10.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis;
                               white-space: nowrap; }
/* スタッフのページのログインの箱：ドライバーページだけの口（2026-10-01） */
.slnote { margin-top: 6px; font-size: 11.5px; color: var(--vermil); }
/* ドライバーだけの口の一言は知らせ（赤でなく薄い字。logintidy-2026-10-07） */
.slnote.sldrv { color: var(--dim); }
.dutychip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 10px; line-height: 15px;
            background: var(--jade); color: var(--panel); white-space: nowrap; vertical-align: 1px; }
/* 「ヘブンから読み込み」はプロフィールの箱の見出しの横（2026-09-28 利用者）。知らせは見出しのすぐ下 */
.menubox > h3.menutitle .heavenload {
  align-self: center; flex: none; font-size: 11px; font-weight: 500; letter-spacing: 0; padding: 2px 10px; white-space: nowrap;
}
.heavenmsg { font-size: 11px; line-height: 1.45; padding: 0 10px 6px; }
.heavenmsg:empty { display: none; }
/* キャストの基本：生年月日・年齢の右に 姫デコID（連携用）（2026-09-27 利用者）。2 列の格子にして、右の欄を上の行の
   かなの欄と左右そろえる（.pairline の「（」「）」は 12.5px・間は 2px。列の間＝2px＋（＋2px、右の余白＝2px＋）） */
#cbox-basic .fieldline {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: calc(12.5px + 4px); padding-right: calc(12.5px + 2px);
}
/* キャストの在籍・報酬：係数の横に 入店経路 と 入店経路の備考（2026-09-27 利用者）。係数は数だけなので狭く、残りを半分ずつ。
   箱の横幅いっぱいに渡らせる（広い画面では箱の中が 2 列の格子で、渡らせないと 1 列ぶんに 3 つが押し込まれ経路の名前が切れた） */
#cbox-store .fieldline {
  grid-column: 1 / -1; display: grid; grid-template-columns: 7em minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px;
}
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 55; }

@media (max-width: 760px) {
  /* 上のメニューの帯は中身の高さだけ。行の高さを決めないと、残りの高さを本文と山分けして
     帯が 270px も伸びていた（2026-09-18 スマホの幅で実測） */
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  /* 全ページの見出し（2026-09-30）は細い幅では折り返す。タイトルは出したまま（左メニューのタイトルは隠していた） */
  .apphead { flex-wrap: wrap; gap: 8px; padding: 4px 8px; }
  .apphead .brand { display: flex; width: auto; padding: 0 4px; }
  .headtools { flex-wrap: wrap; gap: 8px; }
  /* 入っている人の欄は横 1 行に。細い幅で縦に積むと、メニューの帯ごと 270px に伸びていた */
  .rail { align-items: center; }
  .whoami { flex: none; display: flex; align-items: center; gap: 6px; white-space: nowrap;
            margin-top: 0; padding: 6px 12px; border-top: none; }
  .whoami br { display: none; }
  .whoami .btn, .whoami .lamp { margin-top: 0; }
  /* 下の帯の説明は最初の 2 つだけ（直し方と並べ方）。全部出すと 4 行で本文を狭める */
  .foot span:nth-child(n+3) { display: none; }
  .rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .rail nav { flex-direction: row; }
  .rail nav a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 11px;
                flex: none; white-space: nowrap; }   /* 縮むと 1 文字ずつ縦に割れる */
  table.grid th, table.grid td { white-space: nowrap; }   /* 表は横に送って読む */
  .rail nav a.on { border-left: none; border-bottom-color: var(--accent); }
  .rail nav a .n, .railgroup, .railfoot, .brand { display: none; }
  /* 左メニューの上の 伝票発行 も横 1 行に（縦に積むと 1 文字ずつ割れた。2026-09-27。出力モニターは 2026-09-30 から見出し） */
  .navslip { flex-direction: row; align-items: center; flex: none; padding: 4px 8px; }
  .navslip .btn { width: auto; white-space: nowrap; }
  .kpis { width: 100%; margin-left: 0; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── 登録ページの札・マスタの 1 ページ（2026-09-18） ──────────────── */
.pagetabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.pagetabs a {
  padding: 6px 12px; font-size: 11.5px; color: var(--dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pagetabs a:hover { color: var(--text); }
.pagetabs a.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.shelfwrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.shelves {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 0 8px;
  position: sticky; top: 0;
}
/* 棚ごとの色の札（mastertag-2026-10-16 利用者「もっとタグ色分けてマスタ一覧を見やすく」）。棚（div.shelf[data-tag]）の色 --shelftag を、
   見出し（〇〇で選ぶ）の丸と字、一覧の行の左の細い縦の帯（左メニューの色の札 .rail nav a[data-tag]::before と同じ 4×14px）に付ける。
   札のぶん行の字を右へ寄せる。棚の間は細い線で区切る。前は見出しが薄い灰の字だけで、どこで棚が替わるか分かりにくかった */
.shelves .shelf { display: flex; flex-direction: column; }
.shelves .shelf + .shelf { margin-top: 4px; border-top: 1px solid var(--line2); }
.shelftitle {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px 3px; font-size: 10px; letter-spacing: .06em;
  font-weight: 600; color: var(--shelftag, var(--faint));
}
.shelftitle::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--shelftag, var(--faint)); }
.shelves a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative;
  padding: 5px 12px 5px 26px; font-size: 11.5px; color: var(--dim); border-left: 2px solid transparent;
}
.shelves a::before { content: ""; position: absolute; left: 12px; top: 50%; width: 4px; height: 14px; margin-top: -7px; border-radius: 2px; background: var(--shelftag, var(--faint)); }
/* 棚の色：店舗 青・スタッフ 緑・キャスト 桃・商品 琥珀・顧客 紫・出勤 青緑・電話 朱・メール 青灰・伝票 黄緑・報酬 茶・締め 藍・そのほか 灰 */
.shelf[data-tag="store"] { --shelftag: var(--accent); }
.shelf[data-tag="staff"] { --shelftag: var(--jade); }
.shelf[data-tag="cast"] { --shelftag: var(--rose); }
.shelf[data-tag="product"] { --shelftag: var(--amber); }
.shelf[data-tag="guest"] { --shelftag: var(--violet); }
.shelf[data-tag="shift"] { --shelftag: var(--teal); }
.shelf[data-tag="phone"] { --shelftag: var(--vermil); }
.shelf[data-tag="mail"] { --shelftag: var(--steel); }
.shelf[data-tag="slip"] { --shelftag: var(--olive); }
.shelf[data-tag="pay"] { --shelftag: var(--copper); }
.shelf[data-tag="close"] { --shelftag: var(--indigo); }
.shelf[data-tag="other"] { --shelftag: var(--faint); }
.shelves a:hover { color: var(--text); background: var(--panel2); }
.shelves a.on { color: var(--text); background: var(--menu-on); border-left-color: var(--accent); font-weight: 500; }
.shelves a .n { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.shelfhead { margin: 2px 0 10px; font-size: 13.5px; font-weight: 500; }
/* マスタも表の行だけを送り、見出しと横送りを手元に残す（ui-review-2026-10-21）。棚は独立して送る。 */
.pad.masterpad { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.masterpad > .shelfwrap { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.masterpad .shelves { position: static; min-height: 0; overflow-y: auto; }
.masterpad .shelfbody { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.masterpad .shelfbody > * { flex: none; }
.masterpad .shelfbody > .tablewrap { flex: 1 1 auto; min-height: 96px; }
i.tmp {
  font-style: normal; font-size: 9px; color: var(--amber); border: 1px solid var(--amber-dim);
  border-radius: 3px; padding: 0 3px; margin-left: 3px; vertical-align: 1px;
}
.btn.tiny { padding: 1px 8px; font-size: 10px; }
td.act { white-space: nowrap; text-align: right; }
@media (max-width: 760px) {
  .shelfwrap { grid-template-columns: 1fr; }
  .shelves { position: static; }
}

/* 小さなマスタの「色」。画面の色の名前で持ち、白い画面・夜の画面それぞれの色で出る */
.pill.tone-steel { color: var(--steel); border-color: var(--steel-dim); }
.pill.tone-amber { color: var(--amber); border-color: var(--amber-dim); }
.pill.tone-jade { color: var(--jade); border-color: var(--jade-dim); }
.pill.tone-vermil { color: var(--vermil); border-color: var(--vermil-dim); }
.pill.tone-violet { color: var(--violet); border-color: var(--violet-dim); }
.notice.help { color: var(--dim); }

/* 登録のページの上の帯。何のページかを左に出す */
.pagetitle { font-size: 14px; font-weight: 600; letter-spacing: .02em; }

/* 一覧の端の「編集」。横に長い一覧でも、いつも右端に見えるように貼り付ける */
table.grid td.act, table.grid th.act {
  position: sticky; right: 0; background: var(--panel);
  box-shadow: -1px 0 0 var(--line2);
}
table.grid th.act { background: var(--head); z-index: 3; }

/* ── 出勤（キャスト × 7 日） ─────────────────────────────────────── */
.shiftbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.shiftbar select, .shiftbar input[type="search"] {
  font: inherit; font-size: 12px; padding: 5px 8px; color: var(--text);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
}
.shiftbar input[type="search"] { flex: 0 1 220px; }
.shiftbar select { max-width: 240px; }
/* 日幅は 208px のまま。コピー選択の縦の自動送りもこの箱を使う。 */
.pad.shiftpad { height: 100%; display: flex; flex-direction: column; }
.shiftpad > * { flex: none; }
.shiftpad > .tablewrap { flex: 1 1 auto; min-height: 96px; }
.shiftgrid th.today { color: var(--accent); }
.shiftgrid th.shwho, .shiftgrid td.shwho {
  position: sticky; left: 0; z-index: 1; background: var(--panel); min-width: 128px;
  box-shadow: 1px 0 0 var(--line2);
}
.shiftgrid th.shwho { z-index: 3; background: var(--head); }
.shiftgrid td.shwho b { display: block; font-weight: 500; }
.shiftgrid td.shwho .sub { font-size: 10px; }
.shiftgrid td.shcell {
  min-width: 208px; white-space: normal; vertical-align: top; cursor: pointer; padding: 4px 6px 5px;
  /* 208px：2 段目（終了条件・☐体験 ☐二日目・↺ コピー ×）が 1 行に入り、1 段目の時刻と 4 字の状態の札も折れない幅（shiftui2-2026-10-16） */
  border-left: 1px solid var(--line2);   /* 日の列の境（shiftui-2026-10-16。列をたどりやすく） */
}
/* 表は中身の幅（マス 208px × 日数）。31 日は画面に入らない分を横スクロールで見る（shiftui2-2026-10-16 利用者「詰めずに表示が壊れない日数分のみ
   出して 横スクロールでよい」。v1 は 7 日・14 日だけ幅いっぱいに等分し、8 日以上は dense で詰めていた） */
/* マスの左右の余白は 6px（一覧の表の 10px より詰める。.pad > .tablewrap > table.grid の決まりより強く） */
.pad > .tablewrap > table.grid.shiftgrid td.shcell { padding-left: 6px; padding-right: 6px; }
.shiftgrid td.shcell:hover { background: var(--panel2); }
.shiftgrid td.shcell.today { background: var(--accent-wash); }
.shiftgrid td.shcell.off { background: var(--vermil-wash); }
/* 時刻は地の無い太い字（shiftui-2026-10-16。前は灰色の箱）。入れる札の人の .pick.time と同じ見え方 */
.shtime {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text); margin: 0 4px 0 0;
}
/* 状態の札は丸い色の札で 1 段目の右端（shiftui-2026-10-16）。色の無い状態は灰の地 */
.shcell .pill { font-size: 10px; padding: 0 7px; line-height: 17px; border-radius: 9px; border-color: transparent; margin-left: auto; }
.shcell .pill:not(.hexed) { background: var(--panel3); color: var(--dim); }
.shmark {
  display: inline-block; font-size: 9.5px; color: var(--accent); border: 1px solid var(--accent-dim);
  border-radius: 3px; padding: 0 4px;
}
/* コメントは改行をそのまま見せ、長ければ折り返す（9/18 利用者「改行で行は伸びる。改行が無くても折り返し」） */
.shnote {
  display: block; font-size: 10px; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px;
}
.shnote.none { color: var(--faint); }
.shplus { color: var(--faint); font-size: 12px; }
.fieldrow { display: flex; gap: 8px; }
.fieldrow label.field { flex: 1; min-width: 0; }

/* 出勤の色の見本 */
.swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px;
  margin-right: 6px; box-shadow: inset 0 0 0 1px var(--line);
}

/* ── 並べ替え（2026-09-18）。数字は打たず、左のつまみを押したまま上下へ ───────────
   動かせるのは同じまとまりの中だけ。落とす先は青い線で見せる */
table.grid th.grip, table.grid td.grip { width: 26px; padding: 0 0 0 6px; }
/* まとめて削除のチェック（2026-09-21） */
table.grid th.pick, table.grid td.pick { width: 30px; padding: 0 0 0 10px; }
table.grid td.pick input, table.grid th.pick input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
button.grip {
  width: 22px; height: 24px; border-radius: 4px; color: var(--faint);
  font-size: 12.5px; line-height: 24px; text-align: center; cursor: grab;
  touch-action: none;   /* 指で押したまま動かしても画面が送られないように */
}
button.grip:hover { color: var(--accent); background: var(--accent-wash); }
body.reordering, body.reordering * { cursor: grabbing !important; user-select: none; }
table.grid tbody tr.dragging td { background: var(--accent-wash); color: var(--dim); }
table.grid tbody tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
table.grid tbody tr.drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }
/* 置いた行を一瞬だけ塗って、どこへ行ったかを見せる */
table.grid tbody tr.moved td { animation: moved .9s ease-out; }
@keyframes moved { from { background: var(--accent-wash-2); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { table.grid tbody tr.moved td { animation: none; } }
/* 子のまとまり（主店舗の下のサブ店舗・都道府県の下の市区町村）は字下げ */
.kidmark { color: var(--faint); margin: 0 6px 0 4px; }
.savestate { font-size: 11px; color: var(--jade); }
.savestate.bad { color: var(--vermil); }
/* ヘブンとつないだ伝票の品・金額の差（hvguard-2026-10-18）。長いときは 2 行まで・残りは乗せると出る */
.savestate.slipgap { flex: 0 1 auto; min-width: 0; max-width: 520px; line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ページ送り（顧客）。上と下に同じものを出す */
.pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  padding: 8px 0;
}
.pager .btn[disabled], .pager .btn[disabled]:hover { opacity: .4; cursor: default; color: var(--dim); border-color: var(--line); }
.pager .pageno { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); margin: 0 6px; }
.pager .pageno input { width: 72px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pager .sub { margin-left: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── 出勤を 31 日まで・縦横で（2026-09-18）。本家の月間出勤管理の代わり ───────────── */
.shiftbar .seg { flex: none; }
.shiftgrid th.sat { color: var(--steel); }
.shiftgrid th.sun { color: var(--vermil); }
.shnotemark { color: var(--faint); font-size: 10px; margin-left: 2px; cursor: help; }
/* 名前を押すとその人だけ */
.shiftgrid td.shwho, .shiftgrid th.shwho-h { cursor: pointer; }
.shiftgrid td.shwho:hover b, .shiftgrid th.shwho-h:hover { color: var(--accent); }
.shiftgrid th.shwho-h { min-width: 128px; }
.shiftgrid th.shwho-h.dead { color: var(--faint); }
/* 縦のときの日付の列（左に貼り付け） */
.shiftgrid th.shday {
  position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; white-space: nowrap;
  font-weight: 500; box-shadow: 1px 0 0 var(--line2); padding: 6px 10px;
}
.shiftgrid thead th.shday { z-index: 3; background: var(--head); }
.shiftgrid tbody th.shday.today { color: var(--accent); }
/* 縦で 1 人だけ（本家の月間と同じく、欄ごとの列で 1 か月） */
.shiftgrid tr.shrow { cursor: pointer; }
.shiftgrid tr.shrow:hover td, .shiftgrid tr.shrow:hover th { background: var(--panel2); }
.shiftgrid tr.shrow.off td { background: var(--vermil-wash); }
.shiftgrid tr.shrow.today td { background: var(--accent-wash); }
.shiftgrid td.shtext { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 12ch; max-width: 26ch; font-size: 11px; }
.shonly {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; font-size: 11.5px;
  border: 1px solid var(--accent-dim); background: var(--accent-wash); border-radius: 4px;
}
.shonly .x { color: var(--dim); padding: 0 6px; }
.shonly .x:hover { color: var(--text); }
/* 写す（本家の月間の「コピー」）。写す元は点線、選んだマスは差し色で塗る */
/* 画面の下に浮かせる帯（写す先を選ぶ・保存）。表の上に置くと、選ぶたびに帯の高さが変わって表がずれ、
   なぞっている指の下のマスが入れ替わっていた。本文の幅の真ん中へ（左のメニューの幅 --rail-w の半分だけ右へ寄せる） */
.floatbar {
  position: fixed; left: calc(50% + var(--rail-w) / 2); bottom: 46px; transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: min(980px, calc(100vw - var(--rail-w) - 32px));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--accent-dim); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; background: var(--panel);
  box-shadow: 0 8px 28px var(--shadow-drawer);
}
.floatbar .lead { background: var(--accent-wash); padding: 2px 8px; border-radius: 4px; }
.floatbar .lead .sub { margin-left: 6px; }
.floatbar .grow { flex: 1; }
.floatbar .warn { color: var(--amber); font-size: 11px; }
.floatbar .warn:empty { display: none; }
/* 直したものがあるときは、本文の下を帯の分だけあける（いちばん下の行が帯に隠れない） */
.pad.floating { padding-bottom: 140px; }
@media (max-width: 760px) {
  .floatbar { left: 50%; bottom: 12px; max-width: calc(100vw - 24px); }
}
/* 断られた欄の下に出す赤い字（電話の重なりなど。2026-09-21 利用者） */
.fielderr { font-size: 10.5px; color: var(--vermil); margin: 2px 0 0; }

/* 左の並びのつまみ（2026-09-21 利用者「主店舗の並び替えをドラッグで」）。
   サブ店舗の行は同じ幅だけ空ける（名前の頭をそろえるため） */
.recordrow .grip {
  flex: none; width: 18px; text-align: center; color: var(--faint);
  font-size: 11px; line-height: 1; background: none; border: 0; cursor: grab;
}
.recordrow button.grip:hover { color: var(--text); }
.recordrow button.grip:active { cursor: grabbing; }
.recordrow.dragging { opacity: .5; }
.recordrow.moved { background: var(--accent-wash); }
.recordrow.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.recordrow.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
body.reordering .recordrow { cursor: grabbing; }

/* ── 店舗ページの組み直し（2026-09-22 利用者「見づらい。配置や色分けで見やすく」） ──
   店舗情報／料金表 の 2 群・種類ごとの色・給料ランクはコースの中の札・小さい表は 2 列・目次 */
[data-tone="steel"]  { --tone: var(--steel);  --tone-dim: var(--steel-dim); }
[data-tone="amber"]  { --tone: var(--amber);  --tone-dim: var(--amber-dim); }
[data-tone="jade"]   { --tone: var(--jade);   --tone-dim: var(--jade-dim); }
[data-tone="violet"] { --tone: var(--violet); --tone-dim: var(--violet-dim); }
[data-tone="vermil"] { --tone: var(--vermil); --tone-dim: var(--vermil-dim); }
[data-tone="slate"]  { --tone: var(--faint);  --tone-dim: var(--line); }

/* 群の見出し（店舗情報・料金表） */
.recgroup {
  display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--line); scroll-margin-top: 110px;
}
#rform > .recgroup:first-child { margin-top: 2px; }
.recgroup b { font-size: 13.5px; color: var(--text); letter-spacing: .02em; }
.recgroup span { font-size: 11px; color: var(--faint); }

/* 目次（上の帯の 2 行目） */
.recnav { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.recnav button {
  font-size: 11px; padding: 2px 9px; border-radius: 12px; cursor: pointer; user-select: none;
  border: 1px solid var(--line); color: var(--dim); background: var(--panel);
}
.recnav button::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tone, var(--dim)); margin-right: 6px; vertical-align: 1px;
}
.recnav button:hover { color: var(--text); border-color: var(--tone, var(--faint)); }

/* 料金表の箱：上に色の線、見出しは色つき＋件数＋右に 1 行の説明 */
.menubox { border-top: 3px solid var(--tone); scroll-margin-top: 110px; }
.menubox > h3.menutitle {
  display: flex; align-items: baseline; gap: 8px; font-size: 12px; letter-spacing: .02em;
  color: var(--tone); font-weight: 600; padding: 6px 10px;
}
.mtcount {
  font-size: 10px; font-weight: 500; color: var(--tone); border: 1px solid var(--tone-dim);
  border-radius: 9px; padding: 0 7px; font-variant-numeric: tabular-nums;
}
/* 箱の見出しの名前は折り返さない（狭い箱では右の説明のほうを折り返す） */
.menubox > h3.menutitle .mtname { flex: none; white-space: nowrap; }
.mtnote { text-align: right; margin-left: auto; font-size: 10.5px; color: var(--faint); font-weight: 400; letter-spacing: 0; }

/* 給料ランクの札（コースの箱の中） */
.rankbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px;
  margin-bottom: 10px; border-radius: 6px; background: var(--panel2);
}
.rblabel { font-size: 11px; font-weight: 600; color: var(--dim); }
/* ダミーの下の店：ダミーの給料ランクを見るだけ（dummyshare-2026-10-05） */
.rbnote { font-size: 11px; color: var(--dim); }
.menu.ranks[data-shared] .menurow { padding: 0 8px; }
.menu.ranks[data-shared] .mtext { pointer-events: none; }
.menu.ranks { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; }
.menu.ranks .menurow {
  display: inline-flex; align-items: center; gap: 0; padding: 0 2px 0 4px;
  border: 1px solid var(--tone-dim); border-radius: 14px; background: var(--panel);
}
/* 札の左のつまみ。いちばん後ろの「＋ 追加」には出さない */
.menu.ranks .rgrip {
  flex: none; width: 14px; padding: 0; border: 0; background: none; line-height: 1;
  font-size: 10px; color: var(--faint); cursor: grab;
}
.menu.ranks .rgrip:hover, .menu.ranks .rgrip:focus-visible { color: var(--tone); outline: none; }
.menu.ranks .menurow:last-child .rgrip { visibility: hidden; }
.menu.ranks .menurow.dragging { opacity: .45; }
.menu.ranks .menurow.drop-l { box-shadow: -3px 0 0 var(--tone); }
.menu.ranks .menurow.drop-r { box-shadow: 3px 0 0 var(--tone); }
body.reordering .menu.ranks .menurow { cursor: grabbing; }
.menu.ranks .menurow:last-child { border-style: dashed; }
.menu.ranks .menurow:last-child .mdel { visibility: hidden; }   /* 足すための空の札に ✕ は要らない */
.menu.ranks input { width: 6.5em; border: 0; background: transparent; padding: 4px 2px; font-size: 12px; }
.menu.ranks input:focus { outline: none; }
/* 札の中の入力欄には、入力中の枠も影も付けない（付くのは札の外側だけ。2026-09-22 崩れの修正） */
.menubox .menu.ranks input, .menubox .menu.ranks input:focus {
  border: 0; box-shadow: none; outline: none; background: transparent;
}
.menu.ranks .menurow:focus-within { box-shadow: 0 0 0 2px var(--tone-dim); }
.menu.ranks .mdel { width: 20px; height: 22px; }

/* コースの「バック（給料ランク別）」の帯と列の見出し */
.menuhead.super span.backband {
  text-align: center; font-size: 10px; color: var(--tone); letter-spacing: .06em;
  border-bottom: 1px solid var(--tone-dim); padding-bottom: 2px;
}
.menuhead .numhead { text-align: right; padding-right: 8px; }
.menuhead .rankhead { color: var(--tone); font-weight: 500; }
/* コースのバックの枠（2026-09-22 利用者「横を超えたら 8-8 の下から折り返す」）。
   列の幅は決め打ちの 84px で、入るだけ並べる。見出しも同じ決まりなので縦に揃う */
.menu .backs {
  display: grid; grid-template-columns: repeat(auto-fill, 84px); gap: 4px 8px;
  align-items: center; min-width: 0;
}
.menu .menuhead .backs .rankhead { padding-right: 8px; }
.menu[data-kind="course"] { max-width: none; }
/* コースの行（2026-09-22 利用者）。行を subgrid にして外の列にそろえたまま、行の中に段を組む。
   ・バックが 1 行に入るとき：1 段目 名前・分・値段・バック、2 段目 指名の札・10分サービス・コメント
     （2 段目は名前の列からバックの列の右端まで ── 長いコメントはバックの下まで伸びる）
   ・バックが折り返すとき：右はバックで埋まるので、名前の段と札とコメントの段を左に積む。
     バックは右で 8-8 の下から折り返す（各欄の真上にランク名）
   （利用者「1行にまとめていい。収まらないなら折り返し」「コメントはバック部分に入っても、長ければ長くなればよい」
     「コメントは伸びるが、初期値は値段までの幅でよい」）。
   置き場所は列の名前（grip / name / backs / del / end。menuWidths が付ける）で指す */
.menu[data-kind="course"] { align-items: start; }
.menu[data-kind="course"] > .menurow {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 6px; align-items: start;
}
/* コースを 1 つずつ区切る（2026-09-22 利用者「バック部分なのかコース料金なのか見づらい」）。
   行の上に線（いちばん下の空行は点線）、バックは色の付いた枠の中、コースの料金（値段）は太字 */
.menu[data-kind="course"] > .menurow { padding: 6px 0; border-top: 1px solid var(--line); }
.menu[data-kind="course"] > .menurow:last-of-type { border-top-style: dashed; }
.menu[data-kind="course"] > .menurow > .backs {
  padding: 0 8px; border: 1px solid var(--tone-dim); border-radius: 6px;
  background: var(--panel2); background: color-mix(in srgb, var(--tone) 7%, var(--panel));
}
.menu.wrapped > .menurow > .backs { padding: 6px 8px 8px; }
/* 見出しのランク名も、枠の中の欄と同じだけ内側へ（枠 1px ＋ 余白 8px） */
.menu[data-kind="course"] > .menuhead .backs { padding: 0 9px; }
.menu[data-kind="course"] .mleft input[data-m="price"] { font-weight: 700; }
.menu[data-kind="course"] .mleft input[data-m="price"]::placeholder { font-weight: 400; }
/* バックだけを写す（2026-09-22 利用者「コースのバック部分のみコピーして、違うコースに適応させたい」）。
   ふだんは「バックをコピー」、写している間は ほかの行に「ここに貼る」・写し元に「コピー中・やめる」 */
.menu .bkclip { margin-left: auto; margin-top: 3px; display: flex; gap: 4px; }
.menu .bkc {
  font-size: 10.5px; line-height: 16px; padding: 2px 10px; border-radius: 10px; white-space: nowrap;
  color: var(--tone); background: var(--panel); border: 1px dashed var(--tone-dim);
}
.menu .bkc:hover, .menu .bkc:focus-visible { border-style: solid; border-color: var(--tone); outline: none; }
.menu .bkc[data-bk="paste"], .menu .bkc[data-bk="cancel"] { display: none; }
.menu.clipping .bkc[data-bk="copy"] { display: none; }
.menu.clipping > .menurow:not(.clipsrc) .bkc[data-bk="paste"] {
  display: inline-block; color: var(--panel); background: var(--tone); border: 1px solid var(--tone);
}
.menu.clipping > .menurow.clipsrc .bkc[data-bk="cancel"] { display: inline-block; border-style: solid; }
.menu.clipping > .menurow.clipsrc > .backs { box-shadow: 0 0 0 2px var(--tone); }
.menu[data-kind="course"] > .menurow.pasted > .backs { box-shadow: 0 0 0 3px var(--tone-dim); }
.menu[data-kind="course"] { --lift: 0px; }
.menu[data-kind="course"] > .menurow > .mgrip {
  grid-row: 1; grid-column: grip / name; margin-top: calc(var(--lift) + 9px);
}
.menu[data-kind="course"] > .menurow > .backs { grid-row: 1; grid-column: backs / del; }
.menu[data-kind="course"] > .menurow > .mdel {
  grid-row: 1; grid-column: del / end; margin-top: calc(var(--lift) + 2px);
}
/* 包みはほどき、名前の段は 1 段目、札とコメントの段はいちばん下に名前の列からバックの右端まで
   （バックが折り返す店では、バックの枠の下。2026-09-22 利用者「ヘブン限定のせいで折り返されるようになった。
   初期値はある程度の長さで、コースボックスで改行されればよい」── 名前の幅に押し込めると札とコメントが 1 行に入らない） */
.menu[data-kind="course"] > .menurow > .mleft { display: contents; }
.menu[data-kind="course"] > .menurow > .mleft > .mline {
  grid-row: 1; grid-column: name / backs; margin-top: var(--lift);
}
.menu[data-kind="course"] > .menurow > .mleft > .mextra { grid-row: 2; grid-column: name / del; }
/* バックが折り返す店は、名前の段をバックの 1 段目の欄（枠 1px ＋ 余白 6px ＋ ランク名 15px の下）と高さをそろえる */
.menu.wrapped { --lift: 22px; }
/* 並べ替えの印は行の外側に（行の中の段に付けると、行の真ん中に線が出る） */
.menu[data-kind="course"] > .menurow.drop-top { box-shadow: 0 -3px 0 var(--tone); }
.menu[data-kind="course"] > .menurow.drop-bottom { box-shadow: 0 3px 0 var(--tone); }
.menu[data-kind="course"] > .menurow.drop-top > *,
.menu[data-kind="course"] > .menurow.drop-bottom > * { box-shadow: none; }
/* 名前・分・値段の段（中の列は 1fr と 84px で、見出しの列とぴったり重なる） */
.menu .mline { display: grid; column-gap: 8px; align-items: center; min-width: 0; }
.menu .mextra { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px 8px; min-width: 0; }
.menu .mextra .mnoms, .menu .mextra .mflags { margin-top: 3px; }   /* コメント欄（28px）の真ん中にそろえる */
/* 使える指名の札（2026-09-22 利用者「媒体の形式で ありなし。初期値は全部なし」）。小さく */
.menu .mnoms { display: flex; flex-wrap: wrap; gap: 4px; }
.menu .chip.mnom { font-size: 10.5px; line-height: 16px; padding: 2px 10px; border-radius: 10px; }
/* 黄色はコース選択時の指名。青（使える指名）は同じ行に複数置ける。 */
.menu .chip.mnom.on { color: var(--steel); background: var(--accent-wash); border-color: var(--steel-dim); }
.menu .chip.mnom.on:hover { border-color: var(--steel); }
.menu .chip.mnom.on.default { color: #604600; background: #ffe58a; border-color: #c49a16; font-weight: 600; }
.menu .chip.mnom.on.default:hover { border-color: #846400; }
/* イベントの使える指名の札（evnom-2026-10-24 #156）。名前・値段・メモの下の段（つまみの右から ✕ の左まで） */
.menu .menurow > .mevnoms { grid-column: 1 / -1; margin: -2px 30px 4px 26px; }
.menu .menurow.drop-top > .mevnoms { box-shadow: none; }
/* コースの「10分サービス」とコメント（2026-09-22 利用者「コースにコメント追加・10分サービス適応ボタン」）。
   指名の札の下に。ボタンは指名の札と同じ形で、押すと琥珀。コメントは改行できて中身に合わせて伸びる */
.menu .mflags { display: flex; flex-wrap: wrap; gap: 4px; }
.menu .chip.mserv { font-size: 10.5px; line-height: 16px; padding: 2px 10px; border-radius: 10px; }
.menu .chip.mserv.on { color: var(--amber); background: var(--amber-wash); border-color: var(--amber-dim); }
.menu .chip.mserv.on:hover { border-color: var(--amber); }
/* ヘブン限定（2026-09-22 利用者「10分サービス横に ヘブン限定 ボタンを作る」）。同じ形で、押すと赤 */
.menu .chip.mheaven { font-size: 10.5px; line-height: 16px; padding: 2px 10px; border-radius: 10px; }
.menu .chip.mheaven.on { color: var(--vermil); background: var(--vermil-wash); border-color: var(--vermil-dim); }
.menu .chip.mheaven.on:hover { border-color: var(--vermil); }
/* ポイント利用可（ptuse-2026-10-24 #150）。同じ形で、押すと緑 */
.menu .chip.mpoint { font-size: 10.5px; line-height: 16px; padding: 2px 10px; border-radius: 10px; }
.menu .chip.mpoint.on { color: var(--jade); background: color-mix(in srgb, var(--jade) 10%, transparent); border-color: var(--jade); }
.menu .chip.mpoint.on:hover { border-color: var(--jade); }
/* イベントの履歴の表示（evhist-2026-10-31）。指名の札の右に。同じ形で、押すと紫 */
.menu .menurow > .mevnoms { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.menu .chip.mhist { font-size: 10.5px; line-height: 16px; padding: 2px 10px; border-radius: 10px; }
.menu .chip.mhist.on { color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, transparent); border-color: var(--violet); }
.menu .chip.mhist.on:hover { border-color: var(--violet); }
.menu .mcomment {
  width: 100%; min-width: 0; font: inherit; font-size: 11.5px; line-height: 18px; padding: 4px 7px;
  resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere;
  field-sizing: content; min-height: 28px;
}
/* コメントの幅（2026-09-22 利用者「初期値はある程度の長さで、コースボックスで改行されればよい」。
   同じ日の「初期値は値段までの幅」は取り消し）。いつも札の右に置き、次の行へは回さない。
   初めは 240px（札の右の残りがそれより狭ければ残りいっぱい）。打つと中身に合わせて右へ伸び、
   コースの箱の右端（札の右から --note-left を引いた残り）まで来たら中で改行して下へ伸びる。--note-left は fitNotes が測る */
.menu .mextra .mcomment {
  flex: 0 1 auto; width: auto;
  min-width: min(240px, calc(100% - var(--note-left, 0px)));
  max-width: calc(100% - var(--note-left, 0px));
}
.menubox .menu textarea:focus { border-color: var(--tone); box-shadow: 0 0 0 2px var(--tone-dim); outline: none; }
/* バックの欄（ランク名＋入力欄）。ランク名は折り返したときだけ、各欄の真上に出す
   （2026-09-22 利用者「これは見づらい。折り返されたら項目もその入力の上に」） */
.menu .backs .bk, .menu .rankbacks .bk { display: flex; flex-direction: column; min-width: 0; }
.menu .backs .bkname { display: none; }
/* 名前・分・値段の欄（名札はふだん隠す。下の「入力中の見出し」で浮かせる） */
.menu .mline .mcell { position: relative; display: flex; min-width: 0; }
.menu .mline .mcell > input { width: 100%; min-width: 0; }
.menu .mline .mcname { display: none; }
/* 入力中の見出し（2026-09-22 利用者「コース料金の追加中だけヘッダーみたいになる？」「バックを入力中は、入力ボックスの
   上に 7-7 8-7 8-8 9-8 9-9 10-9 のランク名出現」）。名前・分・値段・バックの欄を打っている行だけ、各欄の上に
   欄の名前とランク名を浮かせる（見出しが画面の外でも分かるように。行の高さは変えない）。
   バックが折り返す店のランク名はいつも欄の上に出ているので、浮かせるのは名前・分・値段だけ */
.menu[data-kind="course"] > .menurow:has(.mline input:focus, .backs input:focus) .mcname,
.menu[data-kind="course"]:not(.wrapped) > .menurow:has(.mline input:focus, .backs input:focus) .backs .bkname {
  display: block; position: absolute; bottom: calc(100% + 3px); z-index: 3; pointer-events: none;
  margin: 0; padding: 0 6px; border-radius: 3px; white-space: nowrap;
  font-size: 9.5px; line-height: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--panel); background: var(--tone);
}
.menu[data-kind="course"] > .menurow .mcname { left: 0; }
.menu[data-kind="course"] > .menurow .mcname.num { left: auto; right: 0; }
.menu[data-kind="course"]:not(.wrapped) > .menurow .backs .bk { position: relative; }
.menu[data-kind="course"]:not(.wrapped) > .menurow .backs .bkname { right: 0; }
.menu.wrapped { row-gap: 4px; }            /* コースの間は行の線と余白で区切る */
.menu.wrapped .backs { row-gap: 6px; }
.menu.wrapped .backs .bkname, .menu .rankbacks .bkname {
  display: block; font-size: 9.5px; line-height: 13px; margin-bottom: 2px; padding-right: 8px;
  text-align: right; color: var(--tone); font-weight: 500; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 見出しの行のランク名は、各欄の真上に出すので畳む（帯「バック（給料ランク別）」は残す） */
.menu.wrapped .menuhead .backs > * { display: none; }
/* 空の欄の薄い字（ランク名）も、真上に同じ名前があるので出さない */
.menu.wrapped .backs input::placeholder, .menu .rankbacks input::placeholder { color: transparent; }
/* コース以外のバック：「固定」か「ランク別」をプルダウンで選ぶ（2026-09-22 利用者「コース以外は給料ランクを
   全部乗せるのではなく、プルダウン選択された場合のみ固定じゃないバックを記載できるように」）。
   ランク別を選んだ行だけ、行の下にランクごとの欄が出る（各欄の真上にランク名） */
/* 固定のときは、額の欄の左端に小さな ▾（押すと 固定／ランク別 を選べる）。表の幅は今までどおり */
.menu .mback { position: relative; min-width: 0; }
.menu .mback input { width: 100%; padding-left: 25px; }
.menu .mback .bmode {
  position: absolute; left: 1px; top: 1px; bottom: 1px; width: 20px; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none; border: 0; border-right: 1px solid var(--line);
  border-radius: 3px 0 0 3px; color: transparent; cursor: pointer;
  background: var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E") center / 8px 5px no-repeat;
}
.menu .mback .bmode:hover { background-color: var(--line); }
.menu .mback .bmode option { color: var(--text); background: var(--panel); font-weight: 400; }
/* ランク別の行は、額の欄の代わりにプルダウンそのものを出す（下にランクごとの欄） */
.menu .menurow.byrank .mback input { display: none; }
.menu .menurow.byrank .mback .bmode {
  position: static; width: 100%; padding: 5px 18px 5px 8px; font-size: 11.5px; line-height: 18px;
  color: var(--tone); font-weight: 600; text-align: left;
  border: 1px solid var(--tone-dim); border-radius: 4px; background-color: var(--panel);
  background-position: right 7px center;
}
.menu .rankbacks { display: none; }
.menu .menurow.byrank > .rankbacks {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px;
  margin: 0 30px 6px 26px; padding: 6px 10px 10px; border-radius: 6px;
  background: var(--panel2); border: 1px solid var(--line2);
}
.menu[data-kind="nomination"] .menurow.byrank > .rankbacks { margin-left: 0; }
.menu .rankbacks .rbcap { flex-basis: 100%; font-size: 10px; color: var(--tone); letter-spacing: .04em; }
.menu .rankbacks .bk { width: 84px; }
.menu .rankbacks input { background: var(--panel); }
.menuhint { grid-column: 1 / -1; font-size: 10.5px; color: var(--faint); padding: 4px 0 0; }
/* オプションのセット（optset-2026-10-31）。オプションの箱の中、ふつうのオプションの下の「セット」の表。中身は名前・値段・バックの下の段 */
.menubox .setslot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--tone-dim); }
.menubox .sethead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 4px; color: var(--tone); }
.menubox .sethead b { font-size: 12px; }
.menubox .sethead span { font-size: 10.5px; color: var(--faint); }
.menu .menurow > .msetitems { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -2px 30px 6px 26px; }
.menu .menurow.drop-top > .msetitems { box-shadow: none; }
.menu .msetcap { font-size: 10px; color: var(--tone); margin-right: 2px; }
.menu .chip.msetitem { font-size: 10.5px; line-height: 16px; padding: 2px 10px; border-radius: 10px; }
.menu .chip.msetitem.on { color: var(--jade); background: color-mix(in srgb, var(--jade) 10%, transparent); border-color: var(--jade); }
.menu .chip.msetitem.on:hover { border-color: var(--jade); }
.menu .chip.msetitem.gone { border-style: dashed; color: var(--vermil); border-color: var(--vermil); }
.menu .msetcos { font-size: 10.5px; padding: 1px 4px; max-width: 240px; }
.menu .msetnone { font-size: 10.5px; color: var(--faint); }
.menu .msetref { margin-left: auto; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
/* 行のつまみ（2026-09-22 利用者「順番変更できるように」）。いちばん下の空行には出さない */
.menu .mgrip {
  padding: 0; border: 0; background: none; line-height: 1; font-size: 11px;
  color: var(--faint); cursor: grab; justify-self: center;
}
.menu .mgrip:hover, .menu .mgrip:focus-visible { color: var(--tone); outline: none; }
/* いちばん下の空行はつまめない。オプションは空行が無い（札で選んだ行だけ）ので、いちばん下もつまめる（2026-09-22 夜） */
.menu:not([data-kind="option"]) > .menurow:last-of-type .mgrip { visibility: hidden; }
.menu .menurow.dragging > * { opacity: .45; }
.menu .menurow.drop-top > * { box-shadow: 0 -3px 0 var(--tone); }
.menu .menurow.drop-bottom > * { box-shadow: 0 3px 0 var(--tone); }

/* オプションの頭の「コスプレ」（固定）と、その下のコスプレごとの行 */
.cosplaysubs { display: contents; }
.cosplaysubs.folded { display: none; }     /* 種類を閉じたとき（2026-09-22 利用者） */
.menu .headrow .mfold {
  width: 22px; height: 22px; margin-right: 4px; padding: 0; border: 1px solid var(--tone-dim);
  border-radius: 4px; background: var(--panel); line-height: 1; font-size: 12px;
  color: var(--tone); cursor: pointer;
}
.menu .headrow .mfold:hover { background: var(--panel2); }
.menu .headrow .mkinds {
  margin-left: 8px; font-style: normal; font-size: 10px; color: var(--faint); font-weight: 400;
}
.menu .headrow .mfixed, .menu .menurow.pinned .mfixed { font-weight: 600; display: flex; align-items: center; }
/* 追加項目のいちばん上の「ホテル込み」（2026-09-27 利用者「削除禁止」）も、コスプレと同じ「固定」の札 */
.menu .headrow .mfixed small, .menu .menurow.pinned .mfixed small {
  margin-left: 6px; font-size: 9.5px; font-weight: 500; color: var(--tone);
  border: 1px solid var(--tone-dim); border-radius: 8px; padding: 0 6px;
}
.menu .msub { font-size: 11.5px; color: var(--dim); padding-left: 10px; white-space: nowrap;
              display: flex; align-items: center; gap: 8px; min-width: 0; }
.menu .msubname { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* コスプレの在庫（名前の横に小さく。2026-09-22 利用者） */
.menu .mstock {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10px; color: var(--faint);
}
.menu .mstock input { width: 3.6em; padding: 3px 6px; font-size: 11.5px; background: var(--panel); }
.menu .subrow input { background: var(--panel2); }
.menu .subhint { padding: 0 0 4px 10px; }
/* オプションを 1 つも選んでいないときの案内（選べば消える。2026-09-22 夜） */
.menu .opthint[hidden] { display: none; }

/* 書きかけの行で、埋まっていない欄（2026-09-22 利用者「名前だけで値段が空はエラー」） */
.menubox .menu input.bad, .menubox .menu select.bad {
  border-color: var(--vermil); box-shadow: 0 0 0 2px var(--vermil-dim); background: var(--panel);
}
.menubox .menu input:focus, .menubox .menu select:focus {
  border-color: var(--tone); box-shadow: 0 0 0 2px var(--tone-dim); outline: none;
}

/* 店舗情報の箱の見出しも少し濃く（群の見出しの下で読めるように） */
.recordbox > h3 { font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: .04em; }

/* 店舗の設定の中のコース・オプション・指名・イベント（2026-09-21 利用者）。
   表のまま直す。いちばん下の空行に書けば次の行が出る */
.menunote { font-size: 10.5px; color: var(--dim); margin: 0 0 8px; }
.menu { display: grid; gap: 4px 8px; align-items: center; max-width: 720px; }
.menuhead, .menurow { display: contents; }
.menuhead span {
  font-size: 10px; letter-spacing: .06em; color: var(--dim); padding: 0 0 2px;
}
.menu input { font-size: 12px; padding: 3px 6px; min-width: 0; }
/* 料金表の「交通費」の上の交通費基準地と表示住所（2026-09-26 利用者）。座標は数字なので等幅の字で */
.originfield { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.originfield .oline { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.originfield .oname { font-size: 11px; color: var(--dim); white-space: nowrap; }
.originfield input { min-width: 0; font-size: 12px; padding: 3px 6px; }
.originfield input[data-f="transport_origin"] { font-family: var(--mono); }
.originfield .ohint { font-size: 10px; color: var(--faint); line-height: 1.4; }
.menu input.mnum { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* 引く額（イベントの値段）は赤字（2026-09-22 利用者） */
.menu input.mnum.minus { color: var(--vermil); font-weight: 600; }
.menu input.mnum.minus::placeholder { color: var(--vermil-dim); font-weight: 400; }
.menu select { font-size: 12px; padding: 4px 6px; min-width: 0; }
/* 中身が決まっている行の名前（指名のフリー・写指・本指。2026-09-21 利用者） */
.menu .mfixed { font-size: 12px; color: var(--text); padding: 5px 2px; }
/* 給料ランクの列の見出し（コースのバック。2026-09-21 利用者） */
.menuhead .rankhead { color: var(--accent); text-align: right; }
.mdel {
  width: 24px; height: 26px; border: 1px solid transparent; border-radius: 4px;
  color: var(--faint); font-size: 11px; line-height: 1;
}
.mdel:hover { color: var(--vermil); border-color: var(--vermil-dim); }

/* 電話の画面（2026-09-21）。鳴っている帯・表のまま直す一覧 */
.callbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.callbar .check.inline { padding: 0; font-size: 11.5px; }
/* 電話番号検索の欄と、一覧の下の［さらに表示］（calllist-2026-10-11 利用者「日ごとにしない　200件表示　さらに表示　展開して　電話番号検索　を作成」） */
.callbar .calltel { width: 200px; font-variant-numeric: tabular-nums; }
.callmore { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 4px; }
.callmore .sub { font-size: 11.5px; }
.ringing {
  border: 1px solid var(--accent-dim); background: var(--accent-wash);
  border-radius: 6px; padding: 6px 12px; margin-bottom: 10px;
}
.ringrow { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ringrow + .ringrow { border-top: 1px solid var(--line2); }
.ringnow { font-weight: 600; color: var(--accent); white-space: nowrap; }
.ringwho { flex: 1; min-width: 0; }
.ringtime { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--dim); }
/* ［対応する］（dialpad1-2026-10-13）：キューで待っている電話を、この端末の Dialpad アカウントへ回す。押せないときは訳を title に */
.ringrow .take { padding: 3px 14px; white-space: nowrap; }
.ringrow .take[disabled] { opacity: .5; cursor: not-allowed; }
.ringrow .taking { color: var(--accent); white-space: nowrap; }
.ringnow.wait { color: var(--warn, #b36b00); }

/* 電話の箱（dialpad3-2026-10-13 利用者「必要情報はマインド＋のこっちの画面で操作して 切る、保留、転送だけだければいい クロームヘッダーは不要」）。
   右下に固定。ふだんは 1 行（たたみ）。電話が来ると広がる。Dialpad の画面（iframe）は［Dialpad］で出し入れ。しまっている間は画面の外に置き、
   声だけ出す（display:none にすると止まるおそれがあるので外へ）。便利ツールの常に手前の窓（.rc-layer z-index 75・丸 2030）より上 */
/* 置き場所は左下（左メニューの右隣）。右下は Dialpad のアプリの着信の知らせと重なる（dialpad20-2026-10-13 利用者「別場所に変更」） */
.phonebox { position: fixed; left: calc(var(--rail-w, 191px) + 14px); bottom: 14px; z-index: 2040; width: 372px; max-width: calc(100vw - 28px); box-sizing: border-box;
  background: var(--card, #fff); color: var(--ink, #223); border: 1px solid var(--line, #cfd6e0); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(20, 30, 50, .18); font-size: 12.5px; }
.phonebox.pb-live { border-color: var(--accent); box-shadow: 0 10px 32px rgba(20, 30, 50, .28); }
.pb-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line2, #e3e8ef); cursor: default; }
.phonebox.pb-fold .pb-head { border-bottom: 0; }
.pb-dot { width: 9px; height: 9px; border-radius: 50%; background: #b9c2cf; flex: none; }
.pb-dot.on { background: #2e9e5b; }
.pb-dot.ring { background: var(--warn, #b36b00); animation: pbpulse 1s ease-in-out infinite; }
@keyframes pbpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pb-seat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.pb-head .btn.tiny { padding: 2px 8px; }
.pb-calls { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; max-height: 46vh; overflow: auto; }
.phonebox.pb-fold .pb-calls, .phonebox.pb-fold .pb-frame { display: none; }
/* 隠した箱（pbhide-2026-10-16）：見えず押せないだけ（display: none だと箱の中の CTI の声が止まるおそれ）。✕ は ▾ の右 */
.phonebox.pb-hidden { visibility: hidden; pointer-events: none; }
.pb-head .btn.tiny.pb-x { padding: 2px 7px; color: var(--dim); }
.pb-empty { color: var(--dim); padding: 2px 0 4px; }
.pb-call { border: 1px solid var(--line2, #e3e8ef); border-radius: 10px; padding: 7px 9px; }
.pb-call.wait { border-color: var(--warn, #b36b00); background: #fff8ec; }
.pb-call.talk { border-color: #2e9e5b; background: #f1faf4; }
.pb-call.hold { border-color: #6b7fd7; background: #f2f4fd; }
.pb-state { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pb-state .pb-clock { font-family: var(--mono); font-weight: 400; color: var(--dim); font-variant-numeric: tabular-nums; }
.pb-who { margin-top: 3px; font-size: 14px; font-weight: 600; }
.pb-who .pb-tel { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pb-sub { color: var(--dim); margin-top: 1px; }
.pb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pb-acts .btn { padding: 3px 12px; }
.pb-acts .btn.danger { border-color: #b3261e; color: #b3261e; }
.pb-acts .btn.danger:hover { background: #fdecea; }
.pb-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pb-pick select { max-width: 220px; }
.pb-note { margin-top: 4px; color: #b3261e; }
/* 自動で開けなかった伝票（phonepopup-2026-10-19）：頭の下・たたんでも見える・電話が終わっても残る */
.pb-blocked { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line2, #e3e8ef); background: #fff4e5; }
.pb-blocked:empty { display: none; }
.pb-block { border: 1px solid #f0b46a; border-radius: 8px; padding: 6px 8px; background: #fff; }
.pb-blockhead { display: flex; align-items: center; gap: 6px; color: #9a4b00; }
.pb-blockhead b { flex: 1; min-width: 0; }
.pb-blockhead .btn.tiny.pb-x { padding: 1px 6px; color: var(--dim); }
.pb-blockwho { margin-top: 2px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pb-blockact { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.pb-blockact .btn { padding: 3px 14px; }
.pb-blockwhat { color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-blockhelp { font-size: 11px; color: #9a4b00; line-height: 1.45; }
:root[data-theme="dark"] .pb-blocked { background: rgba(240, 180, 106, .12); }
:root[data-theme="dark"] .pb-block { background: var(--card, #1f2530); border-color: #8a6230; }
:root[data-theme="dark"] .pb-blockhead, :root[data-theme="dark"] .pb-blockhelp { color: #f0b46a; }
/* 着信のお客様の伝票（callslips-2026-10-14）：案内時間・店舗・キャスト・場所・状態の 1 行と備考、右に［開く］ */
.pb-slips { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pb-slip { border: 1px solid var(--line2, #e3e8ef); border-radius: 8px; padding: 4px 8px; background: #fff; font-size: 12px; }
.pb-sliprow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.pb-sliptime { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pb-sliprow .btn.tiny { margin-left: auto; padding: 2px 10px; }
.pb-slipnote { color: var(--dim); margin-top: 2px; white-space: pre-wrap; word-break: break-all; }
/* 店舗詳細表示 ✓ の店舗の伝票は、店舗名の代わりに行の下へ店舗詳細（slipdetail-2026-10-19） */
.pb-slipdetail { margin-top: 2px; overflow-wrap: anywhere; }
.pb-call.other { padding: 3px 9px; color: var(--dim); font-size: 11.5px; background: transparent; border-style: dashed; }
.pb-call.other .pb-who { display: inline; font-size: 11.5px; font-weight: 400; margin: 0; }
.pb-frame { border-top: 1px solid var(--line2, #e3e8ef); }
.pb-frame iframe { display: block; width: 100%; height: 520px; border: 0; background: #fff; }
.pb-ctinote { padding: 5px 10px; font-size: 11.5px; color: var(--dim); border-top: 1px solid var(--line2, #e3e8ef); }
.phonebox:not(.pb-open) .pb-frame { position: fixed; left: -2400px; top: 0; width: 400px; height: 520px; border: 0; }

.warnchip {
  font-size: 10.5px; padding: 1px 8px; border-radius: 10px; background: none;
  color: var(--vermil); border: 1px solid var(--vermil-dim); cursor: pointer;
}
.btn.tiny { font-size: 10.5px; padding: 2px 8px; }
.callgrid td { vertical-align: top; }
.callgrid tr.openrow td:first-child { box-shadow: inset 3px 0 var(--amber); }
.callgrid .outsel { font-size: 11.5px; padding: 3px 6px; max-width: 150px; }
/* 欄は中身のいちばん長い項目に合わせて左へ詰め、余りは全部コメントへ（callfit-2026-10-11 利用者「もっと　欄を左に詰める
   表示される一番長い項目に合わせ　コメントが長くなるように」）。width: 1% の欄は中身の幅まで縮み（td は折り返さない）、
   幅を決めない最後の欄（コメント）が残りを全部取る */
.callgrid th, .callgrid td { width: 1%; }
.callgrid th:last-child, .callgrid td:last-child { width: auto; }
/* 対応の欄は選べる区分のいちばん長い名前の幅（--outw は wireCalls が欄の字で測って入れる。測れないときは 140px）。
   前は td に min-width 140px（callslip-2026-10-11。td.pick で幅 30px になり区分の字が見えなかった直し） */
.callgrid td.outcell .combo { width: var(--outw, 140px); }
.callgrid .cnote { min-width: 140px; }
.callgrid .cnote { width: 100%; font-size: 11.5px; padding: 4px 6px; }
/* 録音の再生の釦（callrec-2026-10-11）・つないだ伝票（callslip-2026-10-11）・録音の小窓 */
.callgrid .recbtn { border: 0; background: none; padding: 0 2px; margin-left: 4px; color: var(--accent); cursor: pointer;
  vertical-align: -3px; line-height: 1; }
.callgrid .recbtn.none { color: var(--faint); }
.callgrid .recbtn:hover { color: var(--text); }
.callgrid .callslip { border: 0; background: none; padding: 0; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.callgrid .callslip .csday { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.callgrid .callslip:hover .csday { text-decoration: underline; }
.callgrid .callslip .csvoid { margin-left: 4px; color: var(--vermil); font-size: 10.5px; font-weight: 600; }
.callgrid .callslip .cscast { display: block; font-size: 11px; color: var(--dim); }
.dpick.recpick { width: 320px; gap: 6px; }
.dpick.recpick audio { width: 100%; }
/* 録音の小窓の速さの釦・起こした文字・行の［文字］の釦（calltext-2026-10-31）。文字は長いので小窓の中で縦に送る */
.dpick.recpick, .dpick.txtpick { max-height: min(80vh, 640px); }
.dpick.txtpick { width: 420px; gap: 6px; }
.dpick .ctextarea { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.dpick .ctext {
  min-height: 0; max-height: 46vh; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel2); color: var(--text); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
.dpick .ctextgo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.callgrid .txtbtn { border: 0; background: none; padding: 0 2px; margin-left: 2px; color: var(--accent); cursor: pointer;
  vertical-align: -3px; line-height: 1; }
.callgrid .txtbtn.busy { color: var(--faint); }
.callgrid .txtbtn:hover { color: var(--text); }
.saved { outline: 2px solid var(--jade-dim); }

/* 並べた入力欄（電話など。2026-09-21 利用者「番号追加したら自動で次の電話 2 の入力ボックス」） */
/* 2026-09-21 利用者「入力ボックスは横に増えて折り返す」。電話番号は 11 桁ぶんあれば足りる */
.textlist { display: flex; flex-wrap: wrap; gap: 6px; }
.textlist input { width: 10.5em; }
/* 選んで足していくプルダウン（店舗の都道府県。2026-09-26 利用者「追加したら都道府県２。３を出現」）。
   電話番号の欄と同じく、横に増えて折り返す */
.picklist { display: flex; flex-wrap: wrap; gap: 6px; }
.picklist .combo { width: 10.5em; }

/* 複数選ぶ欄の札（2026-09-21 利用者「背景の色変更で複数選べるように」）。
   選んだものは差し色で塗る。押すたびに入り切り */
.chipset { display: flex; flex-wrap: wrap; gap: 4px; }
/* 札の並びのまとまりの見出し（権限ランクの札。permrank-2026-10-07）。1 行を取り、札はその下に並ぶ */
.chipset .chipgrp { flex-basis: 100%; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--dim); }
.chipset .chipgrp:first-child { margin-top: 0; }
/* まとまりのある札の並び（権限ランクの札）は小さい札（permcompact-2026-10-07 利用者「チップをもっとコンパクト」）。キャストのオプション・
   スタッフの役割の札と同じ大きさ。ほかの画面の札（36px）はそのまま */
.chipset.grouped { gap: 4px; }
.chipset.grouped .chip { font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 10px; }
.chipset.grouped .chipgrp { margin-top: 3px; font-size: 10.5px; }
/* スタッフのページの「ログイン」の権限ランク（permrank-2026-10-07）。［ログインを作る］でランクを選んだら個別の札は薄く */
.stafflogin .slrank { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.stafflogin .slrank select { min-width: 160px; }
#achecks.ranked { opacity: .45; }
/* 札はどの画面も小さい札（chipsmall-2026-10-08 利用者「全ページ確認して　チップはコンパクトに」）。前は隣の入力欄と高さを合わせた 36px
   （2026-09-21）で、言われた所（店舗のコスプレ・オプション、キャストのオプション、スタッフの役割、権限ランク など）だけ個別に小さくしていた。
   残っていた 36px（店舗と受信電話番号の媒体・経費の種類の出金／入金と対象 など）も、その大きさにそろえる */
.chip {
  font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  color: var(--dim); background: var(--panel2); border: 1px solid var(--line);
}
.chip:hover { color: var(--text); border-color: var(--faint); }
.chip.on { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-dim); font-weight: 500; }
.chip.on:hover { border-color: var(--accent); }
/* 押せない札（permself-2026-10-07 マスタの権限ランクの札で、持っていない権限と自分のランク）。入っているかどうかの色はそのまま薄く */
.chipset .chip[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.chipset .chipnote { flex-basis: 100%; margin-top: 2px; font-size: 11px; }
/* 入り切りの札（2026-09-30 利用者「非掲載キャストも表示 使ってない行も出す はチップ選択」「店舗も ボックスではなく クリック ON OFF の
   チップ」「店舗情報 店舗詳細表示 も同じく」）。中身はチェックボックスのまま（値の読み書き・change・Tab と空白の操作もそのまま）で、
   見た目だけ札にする。入っているあいだは差し色 */
label.check.chipcheck { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 0; white-space: nowrap; }
label.check.chipcheck > input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* 入り切りの札も小さく（chipsmall-2026-10-08。前は 36px。在籍の主在籍・入寮中・外国人・道具・回収必須などで個別に 26px にしていた大きさ） */
label.check.chipcheck > span {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; user-select: none;
  font-size: 11.5px; line-height: 1; color: var(--dim); background: var(--panel2); border: 1px solid var(--line);
}
label.check.chipcheck:hover > span { color: var(--text); border-color: var(--faint); }
label.check.chipcheck > input:checked + span {
  color: var(--accent); background: var(--accent-wash); border-color: var(--accent-dim); font-weight: 500;
}
label.check.chipcheck:hover > input:checked + span { border-color: var(--accent); }
label.check.chipcheck > input:focus-visible + span { outline: 2px solid var(--accent-dim); outline-offset: 1px; }
/* 外国人のチップは小さく（chipsmall-2026-10-02。利用者「チップはもっとコンパクト」）。共通のチップは 36px で、伝票の窓の
   「お客様」の箱では大きすぎた。お客様の箱の中は 22px、顧客のページは入寮中の札などと同じ 26px */
.guestinfo .gforeign label.check.chipcheck > span { height: 22px; padding: 0 10px; border-radius: 11px; font-size: 11.5px; }
/* チップの横に内容の欄と［保存］（chipinline-2026-10-03。利用者「チップ横に入力を表示」）。前は欄がチップの下の行に回っていた */
.guestinfo .gforeign { display: flex; align-items: center; gap: 6px; }
.guestinfo .gforeign > label.check.chipcheck { flex: none; }
.guestinfo .gforeign > .gedit { flex: 1 1 auto; min-width: 0; margin-top: 0; align-items: center; }
#gbox-basic label.check.chipcheck:has([data-f="foreigner"]) > span { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 11.5px; }
/* オプションのマスタの道具の札も小さく（toolchip-2026-10-03 利用者「チップをコンパクトにする」）。入寮中・外国人の札と同じ 26px。
   下の欄（メモ）との間はほかの欄（label.field）と同じ 7px */
label.check.chipcheck:has([data-f="tool"]) { margin-bottom: 7px; }
label.check.chipcheck:has([data-f="tool"]) > span { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 11.5px; }
/* 回収必須の札も同じ大きさで、道具の右に並べる（mustcol-2026-10-03） */
label.check.chipcheck:has([data-f="tool"]) + label.check.chipcheck:has([data-f="must_collect"]) { margin-left: 6px; }
label.check.chipcheck:has([data-f="must_collect"]) { margin-bottom: 7px; }
label.check.chipcheck:has([data-f="must_collect"]) > span { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 11.5px; }
/* 伝票の金額の内訳の回収必須の札（赤い地に白い字。伝票の窓とタスク表のカード。mustcol-2026-10-03） */
.mbmust { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 9.5px; font-weight: 700; line-height: 15px;
          color: #fff; background: var(--vermil); vertical-align: 1px; white-space: nowrap; }
/* ドライバーページの回収物（迎ドラの件のタオルと回収必須のオプション。赤い札と名前）と、OP の行の道具の札（mustcol-2026-10-03）。
   品は 1 つずつ塊（.drvbit）で、・のところで折り返す（札の横に入りきらない長さでも、札だけの行にならない） */
.drvjob .drvgather { overflow-wrap: anywhere; line-height: 1.7; }
.drvgather .drvmustchip { margin-right: 8px; vertical-align: 1px; line-height: 1.4; }
.drvbit { display: inline-block; max-width: 100%; }
.drvmustchip { display: inline-block; font-size: 13.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; color: #fff;
               background: var(--vermil); }
.drvtoolchip { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
               line-height: 20px; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-dim); vertical-align: 2px; }

/* 項目の多い台帳のページ（2026-09-21）。左に並び（切り替え用）、右に中身。
   一覧へ戻らずに次の店へ移れる（利用者「保存後の内容をみてからすぐに店舗を変えれる」） */
.recordwrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.recordwrap.solo { grid-template-columns: minmax(0, 1fr); }   /* 店舗：一覧は左のメニューに出す */
.recordside {
  position: sticky; top: 0; max-height: calc(100vh - 120px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.recordfind { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line2); }
.recordfind input { flex: 1; min-width: 0; font: inherit; font-size: 11.5px; padding: 4px 8px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.recordfind .btn { white-space: nowrap; padding: 4px 8px; font-size: 11px; }
.recordrows { overflow: auto; flex: 1; }
.recordrow {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11.5px;
  color: var(--dim); border-left: 2px solid transparent;
}
.recordrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recordrow .sub { font-size: 9.5px; }
.recordrow:hover { background: var(--panel2); color: var(--text); }
.recordrow.on { background: var(--accent-wash); border-left-color: var(--accent); color: var(--text); font-weight: 500; }
/* サブ店舗（掲載枠）は親の下に、右へ寄せて少し小さく（2026-09-21 利用者）。
   つまみのぶんの空きは行そのものが持っているので、字下げは少しでよい */
.recordrow.kid { padding-left: 16px; font-size: 10.5px; color: var(--faint); }
.recordrow.kid .kidmark { margin: 0 2px 0 0; font-size: 9.5px; }
.recordrow.kid:hover, .recordrow.kid.on { color: var(--text); }
.recordall { display: block; padding: 8px 10px; font-size: 10.5px; border-top: 1px solid var(--line2); }
.recordall:hover { color: var(--accent); }
@media (max-width: 860px) {
  .recordwrap { grid-template-columns: 1fr; }
  .recordside { position: static; max-height: 240px; }
}
/* 上の帯に 名前・保存・削除、下に束ごとの箱 */
.recordbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  position: sticky; top: 0; z-index: 20; padding: 6px 0; background: var(--bg);
}
.recordbar .recordname { font-size: 13.5px; }
.recordbar .grow { flex: 1; }
.recordbox { margin-bottom: 10px; }
.recordgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
/* メモ・住所・札のような長い欄は、箱の中で横いっぱい（2026-09-23 キャストのページ化で全ページへ） */
.recordgrid > label.field:has(textarea, .multi) { grid-column: 1 / -1; }
.recordgrid .field { margin: 0; }
/* 店舗のヘブンネットのパスワード（2026-09-22）。伏せ字は CSS で（password の欄にするとブラウザが自社マインド＋の
   ログインとして覚えたり入れたりする）。CSS が効かないブラウザは JS が password の欄にする。
   見せているときは字の形が紛れない等幅（l と 1、O と 0） */
.pwfield { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dim); }
/* キャストの お任せMITENE の箱（castflags-2026-10-11）。稼働ステータス・初回オキニトークを横に 2 つ、内容は箱いっぱい、下に同期の状態 */
.mitene { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.mitene .miterow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mitene label.field textarea { min-height: 64px; }
.mitene .mitesync { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--dim); }
.mitene .mitesync .bad { color: var(--vermil); }
/* 店舗ページの お任せMITENE の API の ON・OFF の下の一行（meltonly-2026-10-29） */
.miteapi-state { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--dim); }
.pwline { display: flex; gap: 6px; align-items: stretch; }
.pwline input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 4px 7px; }
.pwline .btn { flex: none; }

/* 店舗の基本（2026-09-26 利用者「名前だけこの長さで 他項目は都道府県の大きさ ヘブンネットID
   ヘブンネットのパスワード も1行目に入る」）。欄は横に詰めて並べる。幅は名前だけ長く（それまでの長さ）、
   ほかは都道府県のプルダウンと同じ 10.5em。都道府県は選ぶたびに増えていくので、最後の行に回す */
#stbox-basic .recordgrid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
#stbox-basic .recordgrid > .field { flex: 0 0 10.5em; min-width: 0; }
/* 店名は、収まらないときは欄が伸びる（2026-09-26 利用者「店名は 収まらないときは入力ボックスが伸びるように」）。
   いちばん短くてもそれまでの長さ（18.5em）、いちばん長くて箱の幅まで。伸びたぶん、同じ行のうしろの欄は次の行へ回る */
#stbox-basic .recordgrid > .field:first-child { flex: 0 1 auto; min-width: 18.5em; max-width: 100%; }
#stbox-basic .recordgrid > .field:first-child input[data-grow] { field-sizing: content; }
#stbox-basic .recordgrid > .field:has(.picklist) { order: 2; flex: 1 1 100%; }
#stbox-basic .recordgrid > .pwfield { flex-basis: auto; }
#stbox-basic .pwline { display: grid; grid-template-columns: 10.5em auto; }
#stbox-basic .pwline input { width: 100%; }
/* 店舗の色（2026-09-27 利用者「店舗情報 名前の横に 色を選択できるように」）。名前のすぐ横。見本の四角の幅だけ取る */
#stbox-basic .recordgrid > .field:has(.colorpick) { flex: 0 0 auto; }

/* 色の欄（2026-09-27 店舗の色）。見本の四角を押すとブラウザの色の選び口。✕ で色なし（斜線の四角と「色なし」） */
.colorpick { display: flex; align-items: center; gap: 6px; }
.colorpick input[type="color"] {
  flex: none; width: 48px; height: 28px; padding: 2px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); cursor: pointer;
}
.colorpick input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.colorpick input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.colorpick input[type="color"]::-moz-color-swatch { border: 0; border-radius: 2px; }
.colorpick.none input[type="color"]::-webkit-color-swatch {
  background: repeating-linear-gradient(135deg, var(--bg) 0 5px, var(--line) 5px 6px) !important;
}
.colorpick.none input[type="color"]::-moz-color-swatch {
  background: repeating-linear-gradient(135deg, var(--bg) 0 5px, var(--line) 5px 6px) !important;
}
.colorpick .colornone { font-size: 11px; color: var(--faint); white-space: nowrap; }
.colorpick .x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 3px; }
.colorpick .x:hover { color: var(--vermil); }

/* 参考URL（2026-09-26 利用者「都道府県横の上行に参考URLを追加」）。欄は都道府県と同じ幅で、横に「開く」。
   1 行目の最後に置く（1 行目に収まらない幅の画面では、都道府県のすぐ上の行へ回る） */
.urlfield { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dim); }
.urlline { display: flex; gap: 6px; align-items: stretch; }
.urlline input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 4px 7px; }
.urlline .btn { flex: none; }
#stbox-basic .recordgrid > .urlfield { flex-basis: auto; order: 1; }
#stbox-basic .urlline { display: grid; grid-template-columns: 10.5em auto; }
#stbox-basic .urlline input { width: 100%; }
/* 店舗詳細表示の ✓ と表示内容（2026-09-26 利用者）。参考URL のすぐ後ろ。
   2 つは 1 つの組（.detailpair。wireStoreDetail が包む。detailpair-2026-10-05 利用者「記入名が 全部見える大きさに入力ボックスは長くなる
   幅が足りなければ ボタンごと ２行目 都道府県の前に」）。組は中身の幅で、行に入り切らなければ組ごと次の行へ回る（都道府県はいつも最後の行）。
   表示内容の欄は、いちばん短くてもほかの欄と同じ 10.5em、書いた名前の長さまで伸び（field-sizing。効かないブラウザは wireGrowInputs）、
   いちばん長くて箱の幅まで */
#stbox-basic .recordgrid > .detailpair { order: 1; flex: 0 1 auto; display: flex; align-items: flex-start; gap: 8px 12px; min-width: 0; max-width: 100%; }
/* 店舗詳細表示の次の連動チップも同じ組へ。狭い画面では組の中で折り返す。 */
#stbox-basic .recordgrid > .detailpair { flex-wrap: wrap; }
/* 操作は既存のタオル2列（28pxずつ）の中へ。全返却も新・済それぞれ。 */
.dtowel-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 61px; max-width: 100%; padding: 0; cursor: auto; font-size: 11.5px; }
.dtowel-column { display: grid; gap: 2px; min-width: 0; text-align: center; font-size: inherit; }
.dtowel-count { display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 20px; white-space: nowrap; }
.dtowel-count > span { color: var(--dim); font-size: inherit; }
.dtowel-column b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }
.dtowel-column b.minus { color: var(--vermil); }
.dtowel-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.dtowel-controls button.btn, .dtowel-controls button.rc-att-btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 0; min-height: 0; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--dim); line-height: 1; box-shadow: none; }
.dtowel-controls button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-wash); }
.dtowel-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dtowel-controls button:disabled { color: var(--faint); opacity: .4; cursor: default; }
.dtowel-controls button.dtowel-return { width: 100%; }
.dtowel-controls svg { display: block; flex: none; width: 10px; height: 10px; pointer-events: none; }
.dtowel-controls .dtowel-return svg { width: 12px; height: 12px; }
.driver-towel-cell { width: 61px; }
.driver-towel-cell > .dtowel-controls { margin-left: auto; }
.dtowel-numbers { display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.dtowel-numbers b { margin-left: 3px; }
.close-towels { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; color: var(--dim); white-space: nowrap; }
.close-towels b { color: var(--text); }
.close-towel-return { flex: none; padding: 2px 6px; font-size: 11px; line-height: 1.5; }
.closepage .drivergrid .close-towel-cell { width: 1%; text-align: center; white-space: nowrap; }
.closepage .drivergrid .close-towel-cell .close-towels { margin-left: 0; }
/* 店舗詳細表示は入り切りの札（2026-09-30 利用者「店舗情報 店舗詳細表示 も同じく」）。札は隣の欄（28px）と同じ高さで、欄の上の端に
   そろえる（見出し 16px＋間 2px の下。下の端でそろえると、参考URL の欄が 1px 高いぶん下がる） */
#stbox-basic .detailpair > label.check.chipcheck { flex: none; margin-top: 18px; padding-bottom: 0; }
#stbox-basic .detailpair > label.check.chipcheck > span { height: 28px; padding: 0 12px; border-radius: 14px; }
#stbox-basic .detailpair > label.field { flex: 0 1 auto; min-width: 10.5em; max-width: 100%; }
#stbox-basic .detailpair > label.field input[data-grow] { field-sizing: content; min-width: 10.5em; max-width: 100%; }
/* 店舗エリア（マスタから選ぶプルダウン。2026-09-26 利用者）。参考URL のすぐ後ろ */
#stbox-basic .recordgrid > label.field:has([data-f="store_area_id"]) { order: 1; }

/* 店舗のコスプレ・オプションの札は小さく（2026-09-26 利用者「コスプレ オプションはもっとコンパクトに」）。
   ここの札は横に入力欄が並ばないので、入力欄の高さ（36px）に揃えなくてよい。ほかの画面の札はそのまま。
   キャストのページのオプションも同じ（2026-09-27 利用者「キャスト詳細のオプションもコンパクト化」） */
#stbox-cosplay .chipset, #stbox-option .chipset, #cbox-option .chipset { gap: 4px; }
#stbox-cosplay .chip, #stbox-option .chip, #cbox-option .chip {
  font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 10px;
}
/* キャストのオプションは主在籍の店舗で選んでいるものだけ（optshop-2026-10-18・castOptionScope）。選んでいないのに付いているものは点線の薄い札
   （押せば外れる）、それ以外は出さない */
#cbox-option .chip[hidden] { display: none; }
#cbox-option .chip.offshop { border-style: dashed; opacity: .6; }
#cbox-option .chip.offshop:hover { opacity: 1; }
/* スタッフのページの役割も同じ小さい札（2026-09-30 利用者「役割はコンパクトに」）。上の行はほかの画面の確かめが見ているので別に書く */
#sbox-role .chipset { gap: 4px; }
#sbox-role .chip { font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 10px; }
.secretinput:not(.shown) { -webkit-text-security: disc; }
.secretinput.shown { font-family: var(--code); }   /* 字の見分けが大事なので等幅のまま（fontall-2026-10-02） */
.pwstate { margin-left: 8px; font-size: 10px; color: var(--jade); }
.pwstate.bad, .pwfield .bad { color: var(--vermil); }
/* 見出しが箱の名前と同じで省いたとき（媒体・電話番号。2026-09-21 利用者「下の媒体いらない」） */
.recordbare .field { margin: 0; }

/* 箱の並び。ふつうは横いっぱい、印の付いた束だけ半分の幅で隣どうしに
   （2026-09-21 利用者「電話番号は 2 分の 1 横幅、媒体も。電話番号・媒体は同じ行」） */
/* 横は 1 本か 1 対 1。半分の箱が続くときは左右の柱に振り分けて、それぞれ上から積む
   （隣の箱の高さには合わせない。2026-09-21 利用者） */
.halfcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
            align-items: start; }
.halfcol { display: flex; flex-direction: column; }
@media (max-width: 760px) {
  .halfcols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .recordgrid { grid-template-columns: 1fr; }
}
/* 画面が新しくなったときの知らせ（2026-09-21）。上の真ん中に出し、押すまで読み直さない */
.newver {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; font-size: 11.5px;
  background: var(--panel); border: 1px solid var(--accent-dim); border-radius: 6px;
  box-shadow: 0 8px 28px var(--shadow-drawer);
}
.newver .x { color: var(--faint); padding: 0 4px; }
/* ログイン切れの帯（pollfix-2026-11-02）。スマホの幅でも画面に入る */
.newver.authlost { width: max-content; max-width: calc(100vw - 24px); background: var(--warn-bg); color: var(--vermil); border-color: var(--vermil); font-weight: 600; }
.newver.authlost .btn { flex: none; white-space: nowrap; }
/* 伝票の窓：直しかけの間にほかの人がこの伝票を保存した（realtime-2026-10-29）。上の真ん中に出し、押すまで読み直さない */
.livebar {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 71;
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; font-size: 12px; max-width: calc(100vw - 24px);
  background: var(--panel); border: 2px solid var(--amber); border-radius: 6px; box-shadow: 0 8px 28px var(--shadow-drawer);
}
.livebar .x { color: var(--faint); padding: 0 4px; }
.livebar .x:hover { color: var(--text); }
/* スタッフ権限の確認中の帯（viewas-2026-10-06）と、選ぶ小窓の一覧 */
.viewasbar {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 72;
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; font-size: 12px; max-width: calc(100vw - 24px);
  background: var(--panel); border: 2px solid var(--vermil); border-radius: 6px; box-shadow: 0 8px 28px var(--shadow-drawer);
}
.opslogbar { position: fixed; top: 44px; left: 50%; transform: translateX(-50%); z-index: 72; padding: 4px 12px; font-size: 12px; max-width: calc(100vw - 24px); color: #fff; background: var(--vermil); border-radius: 6px; }
.viewaslist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.viewaslist .viewaspick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; height: auto; padding: 6px 10px; }
/* 名前で絞る（viewasfind-2026-10-19）。絞って外した人は hidden（display: flex より強く隠す） */
.drawer .viewasfind { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; }
.viewaslist .viewaspick[hidden] { display: none; }
.newver .x:hover { color: var(--text); }
.shtoast {
  position: fixed; left: calc(50% + var(--rail-w) / 2); bottom: 110px; transform: translateX(-50%); z-index: 31;
  padding: 6px 12px; border-radius: 4px; background: var(--text); color: var(--bg); font-size: 11px;
}
.shiftgrid.copying [data-date] { cursor: copy; }
.shiftgrid.copying input, .shiftgrid.copying textarea, .shiftgrid.copying select, .shiftgrid.copying button { pointer-events: none; }
.shiftgrid td.shcell.copysrc, .shiftgrid tr.shrow.copysrc > * { outline: 2px dashed var(--accent); outline-offset: -3px; }
.shiftgrid td.shcell.picked, .shiftgrid tr.shrow.picked > * { background: var(--accent-wash-2); }
.shiftgrid td.shcell.picked { box-shadow: inset 0 0 0 2px var(--accent); }
body.picking, body.picking * { user-select: none; }
.btn[disabled], .btn[disabled]:hover { opacity: .45; cursor: default; color: var(--dim); border-color: var(--line); }

/* ── 出勤をページの上で入れる（2026-09-18）。マスには、はじめから選び口が並ぶ ─────────────── */
.shiftgrid td.shcell { vertical-align: top; }
.shline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 17px; }
.shline + .shline, .shline + .shnote-in { margin-top: 2px; }
/* 選び口は文字のまま（箱も枠も ▾ も持たない。利用者「ボックスも枠もいらず、クリックすればその文字の大きさのまま」）。
   押せると分かるように、乗せたときだけ薄く色を敷く */
.shiftgrid .pick {
  display: inline-block; padding: 0 3px; margin: 0 -1px; line-height: 1.6;
  font: inherit; font-size: 12px; color: var(--text); background: none; border: none; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
}
.shiftgrid .pick.time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.shiftgrid .pick.empty { color: var(--faint); }
.shiftgrid .pick:hover, .shiftgrid .pick.open { background: var(--accent-wash); color: var(--accent); }
.shiftgrid .pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.shiftgrid .tilde { color: var(--faint); font-size: 10px; }
/* ── 出勤情報のマスを 3 段に（shiftui-2026-10-16 利用者「全体的に見ずらい もっと見やすいUIを考えて」） ───────────
   1 段目 出勤〜退勤（太い字）＋右寄せの状態の色の札／2 段目 終了条件・体験・二日目の札＋右端の ↺ コピー ×／3 段目 コメント。
   2 段目はいつも全部出す（shiftui2-2026-10-16。乗せたときだけ出す v1 はやめた）。マスは 208px で詰めない。
   前は 出勤〜退勤／状態 終了条件／体験 二日目／コメント／コピー × の 5 段で、状態に色が無く、どのマスにも同じ字が並んでいた */
.shiftgrid .pick.time { font-weight: 600; }
.shline.shmain .pick.time { padding: 0 2px; }
.shline.shmain .pick.state, .shline.shmain .pill { margin-left: auto; }
.shiftgrid .pick.state { border-radius: 9px; padding: 0 6px; font-size: 10px; line-height: 17px; margin: 0; }
.shiftgrid .pick.state.hexed { background: var(--cbhex); color: var(--tint-ink); }
.shiftgrid .pick.state.hexed.rev { color: var(--tint-ink-rev); }
.shiftgrid .pick.state.hexed:hover, .shiftgrid .pick.state.hexed.open {
  background: var(--cbhex); color: var(--tint-ink); box-shadow: 0 0 0 2px var(--accent-dim);
}
.shiftgrid .pick.state.hexed.rev:hover, .shiftgrid .pick.state.hexed.rev.open { color: var(--tint-ink-rev); }
.shiftgrid .pick.state.empty { border: 1px dashed var(--line); line-height: 15px; }
.shiftgrid .pick.mark { font-size: 10px; line-height: 15px; padding: 0 5px; margin: 0; border-radius: 3px; }
.shiftgrid .pick.mark:not(.empty) { color: var(--accent); border: 1px solid var(--accent-dim); }
.shiftgrid .pick.mark.empty { border: 1px dashed var(--line); color: var(--faint); }
/* 色（colors-2026-10-19 利用者「色 2・色 3 は無限に増やせる 最初は１のみ １が入力されたら２がでてくる 空白OK」）。付いている色は色の地の札、
   いちばん後ろの空の「色N」は終了条件の空と同じ点線の札。見るだけの札の人は .pill.color（状態の札と違って右へ寄せない） */
.shline.shcolors { gap: 3px; }
.shiftgrid .pick.color { font-size: 10px; line-height: 15px; padding: 0 5px; margin: 0; border-radius: 3px; border: 1px solid transparent; }
.shiftgrid .pick.color.hexed { background: var(--cbhex); color: var(--tint-ink); }
.shiftgrid .pick.color.hexed.rev { color: var(--tint-ink-rev); }
.shiftgrid .pick.color.hexed:hover, .shiftgrid .pick.color.hexed.open {
  background: var(--cbhex); color: var(--tint-ink); box-shadow: 0 0 0 2px var(--accent-dim);
}
.shiftgrid .pick.color.hexed.rev:hover, .shiftgrid .pick.color.hexed.rev.open { color: var(--tint-ink-rev); }
.shiftgrid .pick.color.empty { border: 1px dashed var(--line); color: var(--faint); }
.shiftgrid .pill.color { margin-left: 0; font-size: 10px; line-height: 15px; padding: 0 5px; border-radius: 3px; }
.shiftgrid td.shcolorcell { min-width: 9em; }
.shpop .shsw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px var(--line); }
/* ☐体験 ☐二日目 はチェックの四角と字のまま、入っているものだけ緑の太字（shiftui2-2026-10-16 利用者「体験、二日目 が壊れている」。
   v1 の「外れている札はマスに乗せたときだけ重ねて出す」は、狭いマスでコメントや隣のマスに被って壊れて見えたのでやめた） */
.shcell .shcheck { font-size: 10px; gap: 3px; }
.shcell .shcheck.on { color: var(--jade); font-weight: 500; }
.shline.shsub { gap: 3px; }
.shline.shsub .shtool { margin-left: auto; gap: 0; }
/* 直したマスの ↺ は 1 段目の時刻の右（shiftui2-2026-10-16。2 段目に置くと直した拍子に折れてマスが伸びる）。状態の札だけを右へ寄せる */
.shline.shmain .shtool { margin-left: 0; margin-right: 2px; }
.shline.shsub .shtool button { padding: 0 2px; }
.shline.shsub .shnotemark { margin-left: 2px; }
.shcell:hover .shtool button { color: var(--dim); }
/* 選択肢（押した文字のすぐ下に出る。字の大きさと字体は押した文字と同じ） */
.shpop {
  position: fixed; z-index: 45; overflow: auto; min-width: 4em; padding: 3px 0;
  background: var(--panel); border-radius: 6px;
  box-shadow: 0 6px 24px var(--shadow-drawer), 0 0 0 1px var(--line);
}
.shpop .opt { padding: 1px 12px 1px 9px; cursor: pointer; white-space: nowrap; line-height: 1.7; }
.shpop .opt:hover, .shpop .opt.active { background: var(--accent-wash); color: var(--accent); }
.shpop .opt.on { font-weight: 600; }
.shpop .opt.none { color: var(--faint); }
.shcheck { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; color: var(--dim); cursor: pointer; }
.shcheck input { width: 13px; height: 13px; margin: 0; }
.shtool { margin-left: auto; display: inline-flex; gap: 1px; }
.shtool button { font-size: 10px; color: var(--faint); padding: 0 4px; border-radius: 3px; line-height: 1.6; }
.shtool button:hover { color: var(--text); background: var(--panel3); }
/* 表のマスの下は、コメント（無ければ「コメントなし」）をマスの幅いっぱいに、その下の 1 行に「コピー ×」。どちらも常に出す
   （9/18 利用者「コメント・コピー・× も表示」「コピー × はコメントの下で 1 行使えばよい」）。
   コメント欄の字頭はほかの行とそろえる（左へ 1px 出して、内側の余白を 2px に）。
   contain: inline-size は、長いコメントがその日の列だけを広げないため（列の幅はそろえたまま、中で折り返す） */
.shiftgrid td.shcell { position: relative; }
.shiftgrid td.shcell > .shnote-in { margin: 3px 0 0 -1px; width: calc(100% + 1px); padding: 1px 2px; contain: inline-size; }
/* 直したマスの「↺」（読み込んだときの中身へ）は右上に重ねる。出た拍子にマスの大きさが変わらないように */
.shundo {
  position: absolute; top: 3px; right: 3px; font-size: 10px; line-height: 1.6; padding: 0 5px;
  color: var(--dim); background: var(--panel); border-radius: 3px; box-shadow: 0 0 0 1px var(--line2);
}
.shundo:hover { color: var(--text); background: var(--panel3); }
.shtool .ghost { visibility: hidden; }
/* 空いている日の「＋」は真ん中に（shiftui-2026-10-16。前は左上）。乗せると点線の枠 */
.shadd {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; padding: 0;
  color: var(--faint); font-size: 14px; border: 1px dashed transparent; border-radius: 4px;
}
.shadd:hover, .shadd:focus-visible { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-dim); }
/* コメント欄（複数行）。改行できて、長ければ折り返し、中身の行数だけ伸びる */
.shnote-in {
  display: block; width: 100%; min-width: 0; font: inherit; font-size: 10.5px; line-height: 1.5; padding: 1px 5px;
  color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 3px;
  resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere;
  field-sizing: content; min-height: calc(1.5em + 4px);
}
/* コメントが無ければ「コメントなし」と薄く出す（9/18 利用者）。管理コメントの見本は、行に乗せたときと打っているときだけ */
.shnote-in::placeholder { color: transparent; }
.shnote-in[data-k="note"]::placeholder, .shnote-in:focus::placeholder { color: var(--faint); }
.shnote-in:hover { border-color: var(--line); }
.shnote-in:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.shflag {
  display: inline-block; font-size: 9.5px; padding: 0 4px; margin-right: 3px;
  color: var(--jade); border: 1px solid var(--jade-dim); border-radius: 3px;
}
/* 1 人・縦（全部の欄がはじめから直せる。選び口は表のマスと同じ文字のまま） */
.shiftgrid.editable td.shcopy { padding: 4px 2px; }
.shiftgrid.editable td.shcopy .shtool { margin-left: 0; }
.shiftgrid.editable td.shtext .shnote-in { min-width: 9em; }
.shiftgrid.editable tr.shrow:hover .shnote-in::placeholder { color: var(--faint); }
.shiftgrid.editable td { padding: 4px 6px; }
/* 右上の「登録（N 件）」「取り消す」 */
.topacts { display: flex; align-items: center; gap: 8px; margin-left: 18px; }
.topacts .btn { padding: 5px 14px; font-size: 11.5px; }
.topacts .btn.go:disabled { opacity: .45; }
.btn.bad { border-color: var(--vermil-dim); color: var(--vermil); background: var(--vermil-wash); }
.shiftgrid td.shflagcell { text-align: center; }
.sherr { display: block; font-size: 10px; color: var(--vermil); white-space: normal; }
.sherr:empty { display: none; }
/* 直したマス・行（まだ登録していない）。蛍光ペンのような薄い黄色に、左に黄色の線 */
.shiftgrid td.shcell.dirty, .shiftgrid tr.shrow.dirty > td, .shiftgrid tr.shrow.dirty > th {
  background: var(--edit-wash);
}
.shiftgrid td.shcell.dirty { box-shadow: inset 3px 0 0 var(--edit-edge); }
.shiftgrid tr.shrow.dirty > th.shday { box-shadow: inset 3px 0 0 var(--edit-edge), 1px 0 0 var(--line2); }
.shiftgrid td.shcell.bad, .shiftgrid tr.shrow.bad > td { background: var(--vermil-wash); }
.shiftgrid td.shcell.bad { box-shadow: inset 0 0 0 2px var(--vermil); }
.shtime.bad { background: var(--vermil-wash); color: var(--vermil); }
.shgone { font-size: 10.5px; color: var(--vermil); text-decoration: line-through; }
.shiftgrid td.shmeta { white-space: nowrap; }
.shiftgrid td.shmeta .btn { margin-right: 6px; }

/* 変更の確認（中央に出す） */
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60;
  width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 20px 60px var(--shadow-drawer);
}
.modal header {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line2);
}
.modal header b { font-size: 13.5px; font-weight: 600; }
.modal header .x { margin-left: auto; color: var(--dim); }
.modalbody { overflow: auto; padding: 12px 18px; }
.modal footer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px 14px; border-top: 1px solid var(--line2);
}
.chgcast + .chgcast { margin-top: 14px; }
.chgcast h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; }
table.changes { border-collapse: collapse; width: 100%; font-size: 11.5px; }
table.changes th, table.changes td { padding: 5px 8px; border-bottom: 1px solid var(--line2); vertical-align: top; }
table.changes th { width: 7.5em; white-space: nowrap; text-align: left; font-weight: 500; color: var(--dim); }
table.changes td.was { color: var(--faint); width: 40%; }
table.changes td.arrow { width: 1.5em; color: var(--faint); text-align: center; }
table.changes td.now span, table.changes td.now b { margin-right: 4px; }
table.changes b.chg { color: var(--accent); font-weight: 600; background: var(--accent-wash); padding: 0 3px; border-radius: 3px; }
table.changes td.sherr { width: auto; }
table.changes td.drop { width: 2em; text-align: right; }
table.changes td.drop .x { color: var(--faint); padding: 0 4px; }
table.changes td.drop .x:hover { color: var(--vermil); }
table.changes b.chg.off { color: var(--vermil); background: var(--vermil-wash); }
table.changes .ml, ul.conflicts .ml { white-space: pre-wrap; overflow-wrap: anywhere; }
ul.conflicts { margin: 8px 0 10px; padding-left: 18px; }
ul.conflicts li { margin: 3px 0; }

/* 受信電話番号（2026-09-22 利用者「電話番号に店舗、媒体が紐づけばいい。プルダウンで店舗、媒体複数選択できる一覧」）。
   行の［編集］を押した行だけ直せる（1 行だけ）。媒体はいくつでも選べるプルダウン（押すと下にチェックの一覧）。
   読む行も編集中の行も同じ欄を同じ大きさで置き、読む行は見た目だけ文字にする（phonesame-2026-10-13 利用者
   「編集前と編集クリック後で幅サイズなどは変わらないように」）。幅や余白を読む行・編集中で分けて書かないこと */
.phonegrid { width: auto; }
table.grid.phonegrid th, table.grid.phonegrid td { padding-left: 6px; padding-right: 6px; }
.phonegrid td { vertical-align: middle; }
.phonegrid input.pnum { width: 10em; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.phonegrid input.pmemo { width: 13em; }
.phonegrid input.pname { width: 22em; }
/* Dialpad の状態（読むだけ）と変更の履歴の小窓（phonemaster-2026-10-14） */
.phonegrid td.pdp { color: var(--dim); font-size: 11.5px; white-space: nowrap; max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
/* 許可書の「履歴あり」（phonelicense-2026-10-14）：欄の右に小さな釦。読む行でも押せる */
.phonegrid .plhist { margin-left: 4px; padding: 1px 6px; font-size: 11px; border: 1px solid var(--line2, #e3e8ef); border-radius: 10px; background: #fff;
  color: var(--accent); cursor: pointer; white-space: nowrap; }
.phonegrid tr.phoneread .plhist { pointer-events: auto; }
.phonelog { width: 440px; max-width: calc(100vw - 16px); }
.phonelog .plbody { max-height: 50vh; overflow: auto; font-size: 12px; }
.phonelog .plrow { padding: 3px 0; border-bottom: 1px solid var(--line2, #e3e8ef); }
.phonelog .plat { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--dim); }
/* メモは中身の長さに合わせる（13em〜30em）。読む行も編集中も同じ欄・同じ字なので［編集］では動かない */
@supports (field-sizing: content) {
  .phonegrid input.pmemo { width: auto; field-sizing: content; min-width: 13em; max-width: 30em; }
  /* 店名も中身の長さに合わせる（14em〜40em。長い店名は title で全部見える。phonename-2026-10-14） */
  .phonegrid input.pname { width: auto; field-sizing: content; min-width: 14em; max-width: 40em; }
}
/* 欄は項目の長さに合わせる（phonewide-2026-10-13 利用者「入力ボックス 項目の長さに合わせて 長くする」
   「店名が全部表示されない」）。店舗の名前は最長 13 文字（名古屋＿マンゾクネット＿D（サブ））で、途中で切れていた。
   矢印はブラウザの物をやめて自前の絵にし、右の余白（22px）を読む行でも取っておく（読む行は絵を消すだけ） */
.phonegrid select { max-width: none; width: max-content; appearance: none; -webkit-appearance: none; padding-right: 22px; }
.phonegrid tr.phoneediting select {
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E") right 8px center / 8px 5px no-repeat;
}
/* 読む行（phoneread）は、同じ欄の枠・地・矢印を消して文字に見せるだけ（phonetext-2026-10-13 利用者
   「編集が押されてない場合は 入力ボックスの形にしない」）。空の店舗・媒体は薄い字 */
.phonegrid tr.phoneread input, .phonegrid tr.phoneread select, .phonegrid tr.phoneread .mpickbtn {
  border-color: transparent; background-color: transparent; background-image: none;
  color: var(--text); opacity: 1; cursor: default;
}
.phonegrid tr.phoneread input { -webkit-text-fill-color: var(--text); }
.phonegrid tr.phoneread input:focus { outline: none; box-shadow: none; }
.phonegrid tr.phoneread input::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.phonegrid tr.phoneread select:has(option[value=""]:checked) { color: var(--faint); }
/* 色のある選択肢（契約の色。phonecolor-2026-10-16）：読む行は上で字を --text に決めている（-webkit-text-fill-color）ので、色のある欄だけは地に合う字
   （--tint-ink／rev）に戻す。暗い画面では --text が明るく、明るい地に明るい字になって読めなかった */
.phonegrid tr.phoneread .combo > .cbin.hexed { -webkit-text-fill-color: var(--tint-ink); }
.phonegrid tr.phoneread .combo > .cbin.hexed.rev { -webkit-text-fill-color: var(--tint-ink-rev); }
/* 色のある欄では、検索付きプルダウンの下に隠した select を読む行でも隠したまま（phonecolor-2026-10-16）。上の読む行の決まり（opacity: 1）が
   .combo > select の opacity: 0 に勝ち、隠した select の字（--text）が欄の字に重なる。暗い画面では明るい字が色のある欄の黒い字に重なって薄く読めなかった。
   ほかの欄は今の見え方（重なって少し太く見える）を変えないよう、色のある欄だけ（:has） */
.phonegrid tr.phoneread .combo:has(> .cbin.hexed) > select { opacity: 0; }
/* 契約のチップは中央ぞろえ（phonechip-2026-10-16 利用者「契約中 解約済み 解約予定 のチップは中央ぞろえ」）。読む行は ▾ が無いので左右の余白をそろえて
   真ん中に（右の 15px は ▾ の場所）。［編集］中は右に ▾ があるので、字の箱（▾ の手前まで）の真ん中 */
.phonegrid .combo:has(> select[data-p="contract"]) > .cbin { text-align: center; }
.phonegrid tr.phoneread .combo:has(> select[data-p="contract"]) > .cbin { padding-left: 4px; padding-right: 4px; }
/* 上の帯（phonebar-2026-10-13 利用者「番号を足すボタンは 青ボタンで 上部に 新規番号追加　番号検索 店舗検索 媒体検索」） */
.phonebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 10px 2px; }
.phonebar label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.phonebar .btn.go { padding: 5px 14px; font-size: 11.5px; }
.phonebar .psearch { width: 10em; }
.phonehit { font-size: 11px; color: var(--dim); }
/* 行の 3 つの釦（phoneedit-2026-10-13 利用者「欄事に 編集 保存 削除 ボタンで 編集で編集できるように」） */
.phonegrid td.act { white-space: nowrap; text-align: right; }
.phonegrid td.act .btn + .btn { margin-left: 4px; }
.phonegrid tr.phoneediting > td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* ［＋ 新規番号追加］で増えた空の行：保存するまでは薄い色。番号の欄の置き字は青 */
.phonegrid tr.phonenew input.pnum::placeholder { color: var(--accent); }
.phonegrid tr.saving td { opacity: .55; }
.phonegrid tr.saved td { background: color-mix(in srgb, var(--jade) 10%, transparent); }
/* 1 行に収める（phonefit-2026-10-14 利用者「回線 種類 オフィス は電話番号の前 媒体や店名を短く表示されても大丈夫だから 1 行で表示されるように
   許可書などが後ろでスクロールが動いて文字おかしくなる」）：欄は決め打ちの幅（中身に合わせて伸ばさない。はみ出す字は…）・字は 12px・余白を詰める。
   上の決まり（field-sizing で伸ばす・max-content）より後ろに置いて上書き */
.phonegrid { font-size: 12px; white-space: nowrap; }
table.grid.phonegrid th, table.grid.phonegrid td { padding-left: 4px; padding-right: 4px; }
.phonegrid input, .phonegrid select, .phonegrid .mpickbtn { font-size: 12px; }
.phonegrid input.pnum { width: 8.5em; }
.phonegrid input.pname { width: 10em; min-width: 0; max-width: 10em; field-sizing: fixed; text-overflow: ellipsis; }
.phonegrid input.pmemo { width: 8em; min-width: 0; max-width: 8em; field-sizing: fixed; text-overflow: ellipsis; }
.phonegrid select { width: auto; max-width: 9em; text-overflow: ellipsis; }
.phonegrid select[data-p="line_id"], .phonegrid select[data-p="kind_id"], .phonegrid select[data-p="use_for"] { max-width: 6.5em; }
.phonegrid select[data-p="office"] { max-width: 7.5em; }
.phonegrid select[data-p="license_id"] { max-width: 8em; }
.phonegrid .mpick { max-width: 8em; }
.phonegrid .mpickbtn { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phonegrid td.pdp { max-width: 8em; font-size: 11px; }
.phonegrid td.act .btn { padding: 2px 6px; }
.phonegrid td.act .btn + .btn { margin-left: 2px; }
/* 許可書の「履歴あり」は選び口と同じ行（phonefit2-2026-10-14 利用者「履歴ありも一行を使わないように」）。欄は折り返さず、釦は横並び・小さく */
.phonegrid td.plic { white-space: nowrap; }
.phonegrid td.plic select { display: inline-block; vertical-align: middle; max-width: 7em; }
.phonegrid td.plic .plhist { display: inline-block; vertical-align: middle; margin-left: 3px; padding: 0 5px; line-height: 16px; font-size: 10.5px; }
/* 選び口は select を包む部品（.combo。enhanceSelects）で、中の入力欄 .cbin が幅 100%・包みが block なので、列の幅が入力欄の既定（約 150px）になり
   列が広がっていた（10/14 実測：回線・種類・オフィス・店舗・使い道・許可書が 170px）。列ごとに包みの幅を決め打ちにして左に詰める
   （phonefit2-2026-10-14 利用者「もっと左詰めで できるだけ店舗名も隠さない 幅を超えて２行になるくらいなら長いものは被るイメージ」）。
   許可書の包みは inline-block にして「履歴あり」を同じ行に。長い字は … で切る（乗せると全部） */
.phonegrid .combo { width: 8em; }
.phonegrid .combo > .cbin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phonegrid .combo:has(> select[data-p="line_id"]) { width: 8em; }
.phonegrid .combo:has(> select[data-p="kind_id"]) { width: 6em; }
.phonegrid .combo:has(> select[data-p="office"]) { width: 8.5em; }
.phonegrid .combo:has(> select[data-p="store_id"]) { width: 16em; }
.phonegrid .combo:has(> select[data-p="use_for"]) { width: 8.5em; }
.phonegrid .combo:has(> select[data-p="license_id"]) { display: inline-block; vertical-align: middle; width: 10em; }
.phonegrid input.pname { width: 16em; max-width: 16em; }
.phonegrid .mpick, .phonegrid .mpickbtn { max-width: 9em; }
/* ウィンドウの幅まで伸ばす（phonefit3-2026-10-14 利用者「ウィンドウ幅まで伸ばす 優先順 左詰め 2行にしない 内容全表示」）：表は幅 100%・列は決め打ち
   （table-layout fixed。短い列は中身がちょうど入る px、余りは 店名・店舗 が分け合う＝全文が見える）。欄は列いっぱい。狭い窓では 1794px より縮めず横に送る
   （2 行にしない）。table.grid { width: auto } より強く書く（table.grid.phonegrid）。上の列ごとの包みの幅は、ここで列いっぱいに替わる */
table.grid.phonegrid { width: 100%; min-width: 1794px; table-layout: fixed; }
/* 余りの幅は店名だけに（phonesort-2026-10-14 利用者「長さが必要なのは 店舗じゃなくて 店名」。前は店名と店舗が余りを分け合い、
   長い店名「名古屋＿ぴゅあらば＿B　Chocolatier～ショコラティエ～」が切れていた）。店舗は決め打ち 190px＝「名古屋＿マンゾクネット＿D」（13 文字）が
   包み（.combo）の余白 25px と一緒に入る幅。（サブ）の付く長い名前は … で切れる（末尾の A〜D は見える）。短い列は、本物の包みで測った
   「最長の名札＋包みの余白 24px＋セルの余白 20px」に 2px 足した幅（回線 ダイヤルパッド 128・種類 ガラケー 92・オフィス 名古屋 第1支部 128・
   使い道 受付（お客様）128・許可書 株式会社HLナレッジ 152＋履歴あり 54）。Dialpad とメモは読むだけ・長い文は … で切れ、乗せると全部見える。表 1794px のとき店名は 162px
   （契約の列 94px＝「解約予定」48＋包み 24＋セル 20＋2 を足し、その分だけ表の最小幅も 1700→1794px に広げて店名の幅を保った。phonecontract-2026-10-16） */
.phonegrid thead th:nth-child(1) { width: 130px; }   /* 回線（ダイヤルパッド） */
.phonegrid thead th:nth-child(2) { width: 96px; }    /* 種類（ガラケー） */
.phonegrid thead th:nth-child(3) { width: 130px; }   /* オフィス（名古屋 第1支部） */
.phonegrid thead th:nth-child(4) { width: 116px; }   /* 電話番号（11 桁の 050-1706-2027 が入る幅。前の 110px は 4px 足りず末尾が切れていた） */
.phonegrid thead th:nth-child(5) { width: 94px; }    /* 契約（解約予定。phonecontract-2026-10-16）。6 番目の店名は決め打ちにしない＝余りの幅 */
.phonegrid thead th:nth-child(7) { width: 190px; }   /* 店舗 */
.phonegrid thead th:nth-child(8) { width: 150px; }   /* 媒体（複数は …） */
.phonegrid thead th:nth-child(9) { width: 130px; }   /* 使い道（受付（お客様）） */
.phonegrid thead th:nth-child(10) { width: 210px; }  /* 許可書＋履歴あり */
.phonegrid thead th:nth-child(11) { width: 110px; }  /* Dialpad */
.phonegrid thead th:nth-child(12) { width: 110px; }  /* メモ */
.phonegrid thead th:nth-child(13) { width: 166px; }  /* 釦 4 つ */
.phonegrid td { overflow: hidden; }
.phonegrid .combo, .phonegrid .combo:has(> select[data-p]) { width: 100%; }
.phonegrid .combo:has(> select[data-p="license_id"]) { width: calc(100% - 54px); }
.phonegrid input.pnum, .phonegrid input.pname, .phonegrid input.pmemo { width: 100%; max-width: none; }
.phonegrid .mpick, .phonegrid .mpickbtn { width: 100%; max-width: 100%; }
.phonegrid td.pdp { max-width: none; }
.phonemsg { margin: 8px 2px 0; font-size: 11.5px; min-height: 1.5em; }
.mpick { position: relative; display: inline-block; }
/* 媒体の欄も選んだ中身の長さに合わせる（phonewide-2026-10-13。マスタ次第で増え、いくつでも選べる） */
.mpickbtn {
  width: max-content; min-width: 11em; padding: 4px 26px 4px 8px; font-size: 12px; text-align: left;
  color: var(--text); border: 1px solid var(--line); border-radius: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E") right 9px center / 8px 5px no-repeat;
}
.mpickbtn:hover:not(:disabled) { border-color: var(--faint); }
.mpickbtn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.mpicktext.none { color: var(--faint); }
/* 媒体の一覧は画面に重ねて出す（place は app.js の placeMediaPop）。表の箱の中に置いていたときは、
   下の方の行で一覧が切れていた（phonepop-2026-10-13 利用者「プルダウンが表示しきらない」） */
.mpick .mpickpop {
  display: none; position: fixed; z-index: 95; max-height: min(60vh, 420px); overflow-y: auto;
  padding: 5px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow-drawer);
}
.mpick.open .mpickpop { display: block; }
.mpick .mpickpop label {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12px;
  white-space: nowrap; border-radius: 4px; cursor: pointer;
}
.mpick .mpickpop label:hover { background: var(--panel2); }

/* 削除の確認の窓の「消せないもの」（2026-09-22 利用者「紐づきを壊して NULL にするような削除を禁止」） */
ul.conflicts.blocked li { color: var(--dim); }
ul.conflicts.blocked li b { color: var(--text); }

/* ── ヘブンの受付台帳（ネット予約。2026-09-29 利用者「書き込みも読み込みもできるように」）──────────────────── */
/* ［ヘブンネット伝票読み込み］の一覧の小窓（店ごとに その日のヘブンの予約。押すとその中身で新しい伝票の窓） */
.dpick.hrpick { width: 432px; max-height: min(70vh, 560px); }
.dpick .hrbody { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.dpick .hrstore { padding: 6px 4px 2px; font-size: 10.5px; font-weight: 600; color: var(--dim); border-bottom: 1px solid var(--line2); }
.dpick .hrnone { padding: 4px 6px; font-size: 11px; color: var(--faint); }
.dpick .hrrow {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center;
  width: 100%; padding: 5px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--text);
  font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
}
.dpick .hrrow:hover, .dpick .hrrow:focus-visible { background: var(--accent-wash); outline: none; }
.dpick .hrrow:disabled { opacity: .5; cursor: default; }
.dpick .hrrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpick .hrtime { font-variant-numeric: tabular-nums; }
.dpick .hrcast.nolink { color: var(--faint); }
.dpick .hrmark { font-size: 10px; color: var(--accent); }
.dpick .hrrow.done .hrmark { color: var(--jade); }
/* 2 つの読み込みの連動（hvsync-2026-10-18 利用者「この二つの読み込みは連動すべき」）：行の通知の札（新着・読み込み中・対応済み・破棄・店で入れた）、
   見出しの新着の数、タスク表の［ヘブンネット伝票読み込み］の右の数 */
.dpick .hrtag { display: inline-block; margin-right: 4px; padding: 0 5px; border: 1px solid var(--line2); border-radius: 8px; color: var(--dim);
  font-size: 10px; line-height: 15px; vertical-align: 1px; }
.dpick .hrtag.is-new { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.dpick .hrtag.is-reading { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); font-weight: 600; }
/* 読み込んだ・伝票は未保存（readdone-2026-10-19）：対応済みだが入れ忘れに気づけるよう読み込み中と同じ強さ */
.dpick .hrtag.is-read { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.dpick .hrtag.is-shop { color: var(--faint); }
.dpick .hrcount { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--accent); }
#heavenread .hrbadge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 600; line-height: 16px; }
#heavenread .hrbadge.is-reading { background: var(--accent-wash); color: var(--accent); }
/* ネット予約通知から開いた読み込みの窓（2026-10-02）：上に通知の予約の中身、開始かキャストの合う行に左の印 */
.dpick .hrwanthead { padding: 3px 6px; border-radius: 4px; background: var(--accent-wash); color: var(--text); font-size: 11px; line-height: 1.5; }
.dpick .hrrow.hrwant { box-shadow: inset 3px 0 0 var(--accent); }
/* 読み込んだ伝票を保存せずに閉じたときの問い（2026-10-02）。画面の上の中ほど */
.dpick.hrdrop { width: min(360px, calc(100vw - 16px)); left: 50%; top: 22%; transform: translateX(-50%); }
/* 読み込みの重なりの確かめ（2026-09-30 利用者「同じ伝票が存在します。…同一伝票として登録してよろしいですか？」）。一覧の上に出す */
.dpick .hrsame { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 11px;
  border: 1px solid var(--vermil); border-radius: 6px; background: var(--accent-wash); }
.dpick .hrsamehead { font-weight: 600; color: var(--vermil); }
.dpick .hrsamesub { display: block; font-size: 10px; color: var(--faint); }
.dpick .hrsameq { font-weight: 600; }
.dpick .hrsamebtns { display: flex; flex-wrap: wrap; gap: 6px; }
/* 伝票の窓の保存の段の中ほど：ヘブンネットへの反映（2026-09-29 夜 利用者「保存と同じ行の 伝票の中央に ヘブン関係のボタンや時刻 内容表示」）。
   ［時刻▼］［ヘブンネットへ反映］／［時刻▼］ヘブン反映済み 18:30［確定］［時間変更を反映する］。状態は 確かめた＝緑・合わせ中＝点線・だめ＝赤 */
.recordbar .hvctl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.recordbar .hvctl[hidden], .recordbar .hvctl [hidden] { display: none; }
.recordbar .hvtime { font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
.pad:has(.slipform) .recordbar .hvctl {
  order: 10; flex: 1 0 100%; box-sizing: border-box; min-width: 0;
  padding: 5px 8px; gap: 8px; border: 1px solid #efc794; border-radius: 5px; background: #fff8ee;
}
/* 連携の札は大きく（hvlabel-2026-10-25 #174 利用者「ヘブン連携済み　未連携は　はもう少し大きくして」・答え「案 A」）：白地の丸い札・連携済みは緑・未反映は赤 */
.recordbar .hvlabel { font-size: 14px; font-weight: 700; line-height: 1.5; padding: 0 10px; border: 1.5px solid currentColor; border-radius: 999px;
  background: #fff; color: #d32f2f; white-space: nowrap; }
.recordbar .hvlabel.linked { color: #008000; }
.recordbar .hvstart { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; white-space: nowrap; }
.recordbar #hvdrop { margin-left: auto; }
.recordbar .hvfill { order: 20; }
.recordbar .hvowned { position: relative; font-size: 11px; color: var(--jade); }
.recordbar .hvowned summary { cursor: pointer; white-space: nowrap; }
.recordbar .hvowned ul { position: absolute; z-index: 2; top: 100%; left: 0; min-width: 230px;
  margin: 4px 0; padding: 8px 12px 8px 25px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 3px 12px #0002; white-space: nowrap; }
/* 札の横の「14:00から60分＋90分」（コースの時間だけ。hvlabel-2026-10-25）：札と同じ大きさの字 */
.recordbar .hvdone { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* 赤字（heavencourse-2026-10-25 #176）：ヘブン側で直接変えられた違い・ヘブンのコースに当たらない項目 */
.recordbar .hverr { font-size: 12px; font-weight: 700; color: var(--vermil); white-space: nowrap; }
/* 伝票の窓の訳の赤字と［もう一度送る］（heavensend-2026-10-25 #185）：箱の中の 1 行を使い、長い訳は折り返す。釦は訳の字の続き */
.recordbar #hvsenderr { flex: 1 1 100%; order: 15; white-space: normal; line-height: 1.6; }
.recordbar .hvresend { margin-left: 4px; padding: 1px 8px; font-size: 11px; color: var(--vermil); border-color: var(--vermil-dim); vertical-align: 1px; }
/* ［ヘブンネットへ反映］はヘブンのアイコンの色（hvicon-2026-10-03。利用者「ヘブンネットに反映ボタンはこのアイコンのようなボタン」「文字は
   ヘブンネットへ反映　Hは不要」）：橙の地（見本のアイコンの #ff8100〜#ff9500）に白い太字。大きさはほかの釦と同じ。字の釦の白地
   （.pad:has(.slipform) .recordbar .btn:not(.go):not(.bad)）に負けない強さで書く */
.recordbar .btn.hvicon, .pad:has(.slipform) .recordbar .btn.hvicon:not(.go):not(.bad) {
  border-color: #f07800; background: linear-gradient(#ff9500, #ff8100); color: #fff; font-weight: 700;
}
.recordbar .btn.hvicon:hover, .pad:has(.slipform) .recordbar .btn.hvicon:not(.go):not(.bad):hover {
  border-color: #e06c00; background: linear-gradient(#ff8a00, #f07300); color: #fff;
}
.recordbar .btn.hvicon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.recordbar .btn.hvicon:disabled { opacity: .45; cursor: default; }
.recordbar .hvstate { font-size: 10px; line-height: 1.5; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); }
.recordbar .hvstate.ok { color: var(--jade); border-color: var(--jade-dim); }
.recordbar .hvstate.wait { color: var(--faint); border-style: dashed; }
.recordbar .hvstate.bad { color: var(--vermil); border-color: var(--vermil); }
/* ［ヘブン予約のみ削除］を押したときの帯の中の確かめ（hvdrop-2026-10-19）：文（赤）と［やめる］［ヘブン予約のみ削除］。文は折り返してよい */
.recordbar .hvctl:has(.hvdropask:not([hidden])) { white-space: normal; flex-wrap: wrap; }
.recordbar .hvdropask { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.recordbar .hvdropq { font-size: 11px; color: var(--vermil); }
/* 店舗のページの「ヘブンのコース・オプション」（2026-09-29 利用者「ヘブンネットに存在するコースやオプションに対して こちらは どの組み合わせ
   になるのかを指定する形に」）。行ごとに ヘブンの名前と分・値段 ／ 自社の組み合わせの札 ／ ＋ 足す。決めていない行は赤、候補は点線（押すと決まる） */
.hmapbox .hmbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.hmapbox .hmnote { color: var(--dim); }
.hmapbox .hmhead { margin: 10px 0 2px; padding-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--dim);
  border-bottom: 1px solid var(--line); }
.hmapbox .hmrow {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) 200px; gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 12px;
}
.hmapbox .hmtitle { display: flex; flex-direction: column; min-width: 0; }
.hmapbox .hmtitlerow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hmapbox .hmtitlerow b { min-width: 0; }
.hmapbox .hmtitle b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hmapbox .hmtitle small { font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.hmapbox .hmrow.unset .hmtitle b { color: var(--vermil); }
.hmapbox .hmset { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.hmapbox .hmchip {
  display: inline-flex; align-items: center; gap: 1px; padding: 1px 3px 1px 9px; font-size: 11px; line-height: 18px;
  border: 1px solid var(--tone-dim); border-radius: 10px; background: var(--panel);
}
.hmapbox .hmchip.sug { border-style: dashed; color: var(--dim); cursor: pointer; }
.hmapbox .hmchip.sug:hover { border-color: var(--tone); color: var(--text); }
.hmapbox .hmdel { border: 0; padding: 0 4px; background: transparent; color: var(--faint); font-size: 12px; line-height: 1; cursor: pointer; }
.hmapbox .hmdel:hover { color: var(--vermil); }
.hmapbox .hmnone { font-size: 11px; font-weight: 600; color: var(--vermil); }
.hmapbox .hmadd { font: inherit; font-size: 11px; max-width: 100%; }
.hmapbox .menutitle .hmunset { color: var(--vermil); border-color: var(--vermil-dim); background: var(--vermil-wash); }
/* 上の帯：［一覧｜タスク］と［ヘブンネット伝票読み込み］の入れ物（折り返しても隣どうし。2026-09-29）*/
.modepart { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* タスク表の電話番号検索（2026-10-01）。［ヘブンネット伝票読み込み］の右の欄と、探した伝票の小窓（日時・キャスト・電話番号・場所・店舗。
   押すと伝票を開く）。今日と先の予約は日時を濃く、キャンセル・チェンジは薄く */
.telfind { display: flex; align-items: center; gap: 4px; }
.telfind input {
  width: 150px; font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
}
.dpick.telpick { width: min(600px, calc(100vw - 16px)); max-height: 440px; }
.dpick .telhead, .dpick .telrow {
  display: grid; grid-template-columns: 142px minmax(0, 1fr) 108px minmax(0, 1.4fr) minmax(0, .9fr); gap: 8px; align-items: baseline;
}
.dpick .telhead { padding: 2px 8px 0; font-size: 9.5px; color: var(--faint); }
.dpick .telrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpick .telrow .tday, .dpick .telrow .ttel { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dpick .telrow .tstore { font-size: 10.5px; color: var(--dim); }
.dpick .telrow.today .tday, .dpick .telrow.future .tday { color: var(--accent); font-weight: 600; }
.dpick .telrow:hover .tday, .dpick .telrow:hover .tstore,
.dpick .telrow:focus-visible .tday, .dpick .telrow:focus-visible .tstore { color: inherit; }
.dpick .telrow.voided { opacity: .6; }
.dpick .telrow .tvoid { margin-right: 4px; color: var(--vermil); font-weight: 600; }
/* タスク表の［削除伝票表示］の小窓（slipdel-2026-10-11）。開始・キャスト・顧客の電話番号・分・料金・［復活］。戻した行は薄く・
   キャンセル・チェンジの伝票は印。ヘブンの予約の一言は 2 行目 */
.dpick.gonepick { width: min(600px, calc(100vw - 16px)); max-height: 440px; }
.dpick .gonehead, .dpick .gonerow {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 118px 48px 80px 92px; gap: 8px; align-items: center;
}
.dpick .gonehead { padding: 2px 8px 0; font-size: 9.5px; color: var(--faint); }
.dpick .gonehead .r { text-align: right; }
.dpick .gonerow { padding: 3px 8px; border-radius: 4px; }
.dpick .gonerow:hover { background: var(--panel2); }
.dpick .gonerow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpick .gonerow .gstart, .dpick .gonerow .gtel, .dpick .gonerow .gmin, .dpick .gonerow .gyen {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.dpick .gonerow .gmin, .dpick .gonerow .gyen, .dpick .gonerow .gact { text-align: right; }
.dpick .gonerow .gnote { grid-column: 2 / -1; font-size: 10px; color: var(--dim); white-space: normal; }
.dpick .gonerow.voided .gcast, .dpick .gonerow.voided .gyen { opacity: .7; }
.dpick .gonerow .tvoid { margin-right: 4px; color: var(--vermil); font-weight: 600; }
.dpick .gonerow.restored { opacity: .45; }
.dpick .dnone { padding: 4px 6px; font-size: 11px; color: var(--dim); }

/* タスク（ヘブン）の帯（2026-10-02 hvpill-2026-10-02 利用者 ヘブンの受付台帳の絵つき「このモノクロ仕様 状態も ヘブンの状態色で」）。ヘブンと同じ丸い帯で、
   地はヘブンの状態の色（--hvbg）・字は白。左の丸に 開始／∨／終わり、まん中に「お客様 様」と場所、右の丸に状態。つまみは左の丸の上 */
/* 縁（--hvedge）と丸の濃い色（--hvdark）もヘブンの受付台帳と同じ（hvfree-2026-10-02） */
.bblk.hvb { background: var(--hvbg); color: #fff; border-radius: 999px; padding: 3px; top: 4px; bottom: 4px; box-shadow: inset 0 0 0 1px var(--hvedge, transparent); cursor: default; }
/* 帯のどこを持っても動かせる（hvwhole-2026-10-02） */
.bblk.hvb.dmove { cursor: grab; }
.bblk.hvb .hvrow { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.bblk.hvb .hvtime { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--hvdark, rgba(0, 0, 0, .14)); font-size: 10px; line-height: 10px; letter-spacing: .3px; }
.bblk.hvb .hvtime b { font-weight: 400; }
.bblk.hvb .hvsep { width: 5px; height: 5px; margin: 0 0 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.bblk.hvb .hvbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bblk.hvb .hvguest, .bblk.hvb .hvplace { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bblk.hvb .hvguest { font-size: 12px; line-height: 13px; }
.bblk.hvb .hvplace { font-size: 10px; line-height: 11px; }
.bblk.hvb .hvstate { flex: none; display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 3px;
  border-radius: 999px; background: var(--hvdark, rgba(0, 0, 0, .14)); font-size: 10px; line-height: 10px; }
.bblk.hvb .bgrab { left: 0; width: 36px; border-radius: 50%; }
.bblk.hvb .bgrab::before { display: none; }
.bblk.hvb .bdupline { color: #fff; }
.bblk.hvb .bduptext { color: #fff; text-shadow: none; }
/* 表の地もヘブンと同じモノクロ：出勤の外は灰・出勤の時間は白（出勤の状態のタスク背景色は使わない） */
.bgrid.hvgrid .blane { background: var(--hv-off); }
.bgrid.hvgrid .bshift, .bgrid.hvgrid .bshift.tbg { background: var(--hv-on); }
.brow.dup .bblk.hvb { bottom: 20px; }
.brow.dup .bblk.hvb.bdup { top: 16px; bottom: 0; border-radius: 8px; padding: 0 4px; }
.brow.dupn .bblk.hvb { bottom: calc(var(--dupn) * 16px + 4px); }
/* ［ヘブン比較］（hvcompare-2026-10-25 #175 利用者「タスク（ヘブン）タブを削除して　［ヘブン比較］」→ 同じ日「背景が見えるくらいでもっと　被せてよい
   元々のタスク（ヘブン）のＵＩでそのまま伝票に被せる　少し薄目で　マインド＋側の伝票が見える感じ」。はじめの「案 2 下に細い帯」はやめた）。
   ヘブンの帯はタスク（ヘブン）の帯（.bblk.hvb）のまま、伝票の帯の上（z-index 3）に薄く（.72）重ねる。行の高さは変えない。伝票の帯・メモの帯は
   押しても何もしない（ヘブンの帯だけ動かせる）。開始が伝票と 10 分以上ずれていれば赤い枠。薄くするのは表の中だけ（つまんだ影 .bghost は濃いまま） */
.bgrid.bcmp .bblk:not(.hvcmp), .bgrid.bcmp .tmemo { pointer-events: none; }
.bgrid.bcmp .bblk.hvcmp { z-index: 3; opacity: .72; }
.bgrid.bcmp .bblk.hvcmp:hover { opacity: .9; }
.bblk.hvcmp.far { box-shadow: 0 0 0 2px #d32f2f, inset 0 0 0 1px var(--hvedge, transparent); }
/* ［ヘブン比較］の釦は入っている間だけ橙（字は「ヘブン比較 ✖」） */
.btn.hvcmpbtn.on { border-color: #fe8332; background: #fe8332; color: #fff; font-weight: 600; }
/* 姫デコの箱（himedeco-2026-10-02）。在籍・報酬の行の下。行ごとに 店・姫デコID・様子・釦、下に ID・パスワード・簡単ログインURL */
.hime { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px 0 4px; }
.hime .himehead { font-size: 12px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.hime .himehead .fieldhint { font-weight: 400; }
.hime .himerow { display: grid; gap: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.hime .himeline { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; }
.hime .himestore { min-width: 0; }
.hime .himemain { margin-left: 4px; font-size: 10px; padding: 0 5px; border-radius: 8px; border: 1px solid var(--line); color: var(--dim); }
.hime .himeid { font-variant-numeric: tabular-nums; color: var(--dim); }
.hime .himestate { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); }
.hime .himestate.s-registered { color: var(--jade); border-color: var(--jade); }
.hime .himestate.s-unregistered { color: var(--vermil); border-color: var(--vermil); }
.hime .himestate.s-pending { color: var(--vermil); border-style: dashed; border-color: var(--vermil); }
.hime .himebtns { margin-left: auto; display: flex; gap: 6px; }
.hime .himebtns .btn { font-size: 11.5px; padding: 3px 9px; }
.hime .himereg { color: var(--vermil); }
.hime .himecred, .hime .himeeasy { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; }
.hime .himelab { font-size: 10px; color: var(--faint); }
.hime .himeval { font-size: 12px; padding: 2px 6px; width: 12em; min-width: 0; }
.hime .himemsg { font-size: 11px; line-height: 1.45; }
.hime .himemsg:empty { display: none; }

/* 委託費明細（castbill-2026-10-04 利用者「キャストに送信する　委託費明細ページを作る　４つの右上にアイコンを入れて　クリックでそのページを窓表示
   日報のキャスト　の左にもアイコンを作る」）。タスク表の 4 つの四角の右上（.bbill。ほかの 3 つより濃く・字の色のまま＝店の色の地でも読める）、
   日報報告のキャストの名前の左（.cbill）、押して出る窓（.billmodal。スマホの幅でも読める 460px まで） */
.bname .bicons .bbill {
  width: 11px; height: 11px; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; place-items: center; line-height: 0; border-radius: 2px;
}
.bname .bicons .bbill svg { width: 11px; height: 11px; display: block; }
.bname .bicons .bbill:hover { opacity: .7; }
.bname .bicons .bbill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.closepage .cbill {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; padding: 0; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--dim); cursor: pointer;
}
.closepage .cbill svg { width: 12px; height: 12px; display: block; }
.closepage .cbill:hover { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-wash); }
.closepage .cbill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.modal.billmodal { width: min(460px, calc(100vw - 32px)); }
/* 会員統合の右の窓（guestmerge2-2026-10-24 #144）：電話番号で探す → 候補に［メインにする］［サブに足す］→ メイン会員・サブ会員の札 →
   まとめたあと。札は上から 名前（ランク）・電話・最終来店・数・NG・住所・備考の行 */
.masterbar .gmopenbtn { white-space: nowrap; }
.gmdrawer .gmhow { line-height: 1.6; margin-bottom: 8px; }
/* 画面の下に浮く電話の箱（事務所の PC）に［統合する］が隠れないよう、いちばん下まで送っても箱の上に来るすき間 */
.gmdrawer .inner { padding-bottom: 96px; }
.gmdrawer .gmfind { display: flex; gap: 6px; align-items: center; }
.gmdrawer .gmfind input { width: 260px; }
.gmdrawer .gmcands { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 4px; }
.gmdrawer .gmcand { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 6px; border-bottom: 1px solid var(--line2); }
.gmdrawer .gmcand > span:first-child { flex: 1 1 auto; min-width: 0; }
.gmdrawer h4.gmhead { margin: 14px 0 6px; font-size: 12px; font-weight: 600; }
.gmdrawer h4.gmhead .sub { margin-left: 6px; font-weight: 400; }
.gmdrawer .gmslot { display: flex; flex-direction: column; gap: 8px; }
.gmdrawer .gmempty { padding: 6px 2px; }
.gmdrawer .gmcard { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; background: var(--panel); }
.gmdrawer .gmcard.main { border-color: var(--accent); border-left-width: 3px; }
.gmdrawer .gmcard.sub { border-left: 3px solid var(--amber-dim); }
.gmdrawer .gmcard.after { background: var(--accent-wash); border-color: var(--accent-dim); }
.gmdrawer .gmtitle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.gmdrawer .gmtools { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.gmdrawer .gmtools .x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 3px; font-size: 13px; }
.gmdrawer .gmtools .x:hover { color: var(--vermil); }
.gmdrawer .gmrow { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px; font-size: 11.5px; padding: 1px 0; }
.gmdrawer .gmlabel { color: var(--dim); }
.gmdrawer .gmnote { margin-top: 6px; }
.gmdrawer .gmbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.gmmemo { white-space: pre-wrap; }
.gmnotice a { color: var(--accent); }
.billsheet { font-size: 12.5px; }
.billsheet .billhead { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0 0 10px; }
.billsheet .billhead > div { display: flex; gap: 10px; align-items: baseline; }
.billsheet .billhead dt { width: 6.5em; flex: none; color: var(--dim); font-size: 11.5px; }
.billsheet .billhead dd { margin: 0; font-weight: 600; }
.billsheet .billgrid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.billsheet .billgrid th, .billsheet .billgrid td { padding: 4px 6px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: top; }
.billsheet .billgrid thead th { color: var(--dim); font-weight: 500; font-size: 11px; background: var(--head); }
.billsheet .billgrid .yen { text-align: right; white-space: nowrap; width: 7em; }
.billsheet .billgrid tr.bslip th { padding-top: 8px; background: var(--panel2); font-weight: 600; }
.billsheet .billgrid .bno { display: inline-block; min-width: 3.4em; color: var(--dim); }
.billsheet .billgrid .bstore { margin-left: 8px; font-weight: 400; color: var(--dim); }
.billsheet .billgrid .bk { display: inline-block; min-width: 5.2em; margin-right: 6px; color: var(--faint); font-size: 11px; }
.billsheet .billgrid tr.bsub td { color: var(--dim); }
.billsheet .billgrid tfoot td { font-weight: 500; }
.billsheet .billgrid tfoot tr:first-child td { border-top: 2px solid var(--line); }
.billsheet .billgrid tr.bnet td { background: var(--panel2); }
.billsheet .billgrid tr.bfinal td { font-size: 14px; border-top: 2px solid var(--text); border-bottom: 0; }
.billsheet .cy.minus { color: var(--vermil); }
.billsheet .cy.strong { font-weight: 700; }
.billsheet .billnone { padding: 12px 0; color: var(--dim); }
/* 委託費明細の［画像をコピー］（billcopy-2026-10-04）。閉じるは右へ。知らせは緑の字（作れなかったときは赤） */
.billmodal footer #wclose { margin-left: auto; }
.billmodal .billnote { color: var(--jade); }
.billmodal .billnote.bad { color: var(--vermil); }
/* 委託費明細の清算済みの回（billpaid-2026-10-04）。最終合計の下に薄い字で（合計には入れない） */
.billsheet .billgrid tr.bpaid td { padding-top: 3px; border-bottom: 0; color: var(--dim); font-size: 12px; font-weight: 400; }
.billsheet .billgrid tr.bpaid .cy { color: var(--dim); }
/* 寮費（dormbill-2026-10-04）。日報報告のキャストの清算の札（押すと上の経費入力へ）と、委託費明細の窓の経費入力 */
.closepage .cdorm {
  display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--amber-edge); border-radius: 10px;
  background: var(--amber-wash); color: var(--amber); font: inherit; font-size: 11px; line-height: 18px; white-space: nowrap;
}
.closepage button.cdorm { cursor: pointer; }
.closepage button.cdorm:hover { background: var(--amber-wash-2); }
.closepage .cdorm.off { border-color: var(--line); background: none; color: var(--faint); }
.billmodal .billadd { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line2); }
.billmodal .billaddhead { margin-bottom: 6px; font-size: 11.5px; color: var(--dim); }
.billmodal .billfields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.billmodal .billfields select { max-width: 9em; }
.billmodal .billfields .billamount { width: 6.5em; }
.billmodal .billfields #billadd { order: 4; }
.billmodal .billfields .billmemo { order: 5; flex: 1 1 100%; min-width: 0; }      /* 内容は下の段いっぱい（狭い窓で切れない） */
.billmodal .billaddmsg { margin-top: 4px; min-height: 1em; }
.billmodal .billaddmsg.bad { color: var(--vermil); }
/* 委託費明細の寮費残り（billtidy-2026-10-04 利用者「緑でわかりやすいように　この配置だと　計算にかかわりがあるみたいな見た目」）。表の外の緑の箱。
   経費の行の ✕（同じ日「追加後は削除も行える」） */
.billsheet .billdorm {
  display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding: 8px 12px;
  border: 1px solid var(--jade-dim); border-radius: 6px; background: rgba(31, 107, 79, .07); color: var(--jade);
}
.billsheet .billdorm .bdlabel { font-weight: 600; }
.billsheet .billdorm .bdyen { font-size: 15px; font-variant-numeric: tabular-nums; }
.billsheet .billdorm .bdday { margin-left: auto; font-size: 11.5px; }
.billsheet .billgrid .billdrop { margin-left: 6px; padding: 0 4px; font-size: 11px; line-height: 1; color: var(--faint); vertical-align: baseline; }
.billsheet .billgrid .billdrop:hover { color: var(--vermil); }
/* 委託費明細の最終合計・領収書記載金額・清算済み・寮費残りの札（billfinal-2026-10-04 利用者「最終合計　を今の寮費の背景みたいにして　その小さめで
   領収書記載金額」「背景チップも　寮費残り 15,000円　部分のみでOK」）。最終合計は表の外の緑の箱、寮費残りは文字の所だけの札 */
.billsheet .billfinal {
  display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding: 9px 12px;
  border: 1px solid var(--jade-dim); border-radius: 6px; background: rgba(31, 107, 79, .07); color: var(--jade); font-weight: 700;
}
.billsheet .billfinal span { font-size: 14px; }
.billsheet .billfinal b { font-size: 18px; font-variant-numeric: tabular-nums; }
.billsheet .billreceipt { margin: 4px 2px 0; font-size: 11.5px; color: var(--dim); text-align: right; }
.billsheet .billreceipt b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.billsheet div.bpaid { display: flex; justify-content: space-between; margin: 6px 2px 0; font-size: 12px; color: var(--dim); }
.billsheet div.bpaid .cy { color: var(--dim); }
.billsheet .billdorm { display: block; margin-top: 12px; padding: 0; border: 0; background: none; }
.billsheet .billdorm .bdchip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 10px;
  border: 1px solid var(--jade-dim); border-radius: 6px; background: rgba(31, 107, 79, .07); color: var(--jade);
}
/* 寮費残りは赤系（dormred-2026-10-04 利用者「寮費残り　は赤系に仕様」）。委託費明細の札と、日報報告のキャストの清算の札（未設定の薄い札はそのまま） */
.billsheet .billdorm .bdchip { border-color: var(--vermil-dim); background: var(--vermil-wash); color: var(--vermil); }
.closepage .cdorm { border-color: var(--vermil-dim); background: var(--vermil-wash); color: var(--vermil); }
.closepage button.cdorm:hover { background: rgba(168, 52, 31, .12); }

/* 締め（closelock-2026-10-06）：日報報告の頭の［締め作業完了］・締め済みの印・［締め直し］と、締めたあとに変わったこと */
.closepage .closehead .closestate { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.closepage .closehead .closedmark { padding: 2px 10px; border: 1px solid var(--jade); border-radius: 12px; color: var(--jade); font-weight: 600; }
.closepage .closedrift ul { margin: 6px 0 0; padding-left: 18px; max-height: 240px; overflow: auto; }
.closepage .closedrift li { margin: 2px 0; }

/* キャストの清算を名前で絞る欄（closefind-2026-10-06）。［追加］の横 */
.closepage .closeadd .xcastfind { width: 11em; margin-left: 8px; }
.closepage .closeadd.castfindonly { justify-content: flex-start; }

/* 委託費明細の窓の清算人（billsettle-2026-10-06） */
.billmodal .billhead .billsettle dd { display: inline-flex; align-items: center; gap: 8px; }
.billmodal .billhead .billsettle .combo { min-width: 12em; }
.billmodal .billsettlemsg.bad { color: var(--vermil); }
/* 委託費明細の窓の［清算完了］（清算人の選び口の右・狭い窓では折り返す）と、最後の清算済みの行の［戻す］（billdone-2026-10-18） */
.billmodal .billhead .billsettle dd { flex-wrap: wrap; }
.billmodal .billhead .billsettle .billdone { flex: none; }
.billsheet div.bpaid .billundo { align-self: center; margin: 0 auto 0 8px; padding: 0 8px; font-size: 10.5px; line-height: 1.6; }
/* 委託費明細の回の札（窓の上・選んでいる札は青）と、清算のあとに変わった知らせ（赤。窓・日報報告の札と表の上・タスク表のアイコンの点。
   roundbill-2026-10-18） */
.billmodal .billparts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.billmodal .billparts .billpart {
  padding: 2px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--dim); font-size: 11.5px; cursor: pointer;
}
.billmodal .billparts .billpart:hover { color: var(--text); border-color: var(--faint); }
.billmodal .billparts .billpart.on { border-color: var(--accent-dim); background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.billmodal .billparts .billpart.drift { border-color: var(--vermil-dim); color: var(--vermil); }
.billmodal .billparts .billpart.drift::after { content: "!"; margin-left: 4px; font-weight: 700; }
.billsheet .billdrift, .closepage .closecastdrift {
  margin: 0 0 10px; padding: 6px 10px; border: 1px solid var(--vermil-dim); border-radius: 6px; background: var(--vermil-wash);
  color: var(--vermil); font-size: 12px; line-height: 1.6;
}
/* 委託費明細の まだの分：清算済みの回の伝票は薄く・バックの前に「清算済み」・うち清算済み の行も薄く（openless-2026-10-18）。
   領収書記載金額が最終合計と違うときは、最終合計と同じ大きさのピンクの箱（receiptbig-2026-10-18） */
.billsheet .billgrid tbody.bsettled td, .billsheet .billgrid tbody.bsettled th, .billsheet .billgrid tbody.bsettled .bk { color: var(--faint); }
.billsheet .billgrid tbody.bsettled tr.bslip th { background: none; font-weight: 500; }
.billsheet .billgrid .bsettledtag {
  display: inline-block; margin-right: 8px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 10.5px; font-weight: 400;
  color: var(--faint); vertical-align: 1px;
}
.billsheet .billgrid tfoot tr.bsettledrow td { color: var(--vermil); font-weight: 400; }
/* ［清算済み］の札は赤（行は薄い字でも札は目立つように）・「N本目」の行の時刻の欄をそろえる（billalign-2026-10-18） */
.billsheet .billgrid .bsettledtag { border-color: var(--vermil-dim); background: var(--vermil-wash); color: var(--vermil); font-weight: 600; }
.billsheet .billgrid .btime { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.billsheet .billgrid .btime .bt1, .billsheet .billgrid .btime .bt2 { display: inline-block; min-width: 3.3em; text-align: right; }
.billsheet .billgrid .btime .btsep { display: inline-block; width: 1em; text-align: center; }
.billsheet .billgrid .bmin { display: inline-block; min-width: 4.8em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.billsheet .billgrid tfoot tr.bsettledrow .cy.minus { color: var(--vermil); }
.billsheet .billgrid tfoot tr.bopenback td { font-weight: 700; }
.billsheet .billfinal.billreceiptbig { margin-top: 8px; border-color: var(--vermil-dim); background: var(--vermil-wash); color: var(--vermil); }
/* 委託費明細の 清算に入っていない伝票（予約などのまま。薄く・点線の枠。waitlate-2026-10-18） */
.billmodal .billwait { margin-top: 12px; padding: 6px 8px 2px; border: 1px dashed var(--vermil-dim); border-radius: 6px; opacity: .8; }
.billmodal .billwait .billwaithead { margin-bottom: 4px; font-size: 11.5px; color: var(--vermil); }
.billmodal .billwait .billgrid td, .billmodal .billwait .billgrid th { color: var(--dim); }
.closepage .cdrift {
  display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--vermil-dim); border-radius: 4px; background: var(--vermil-wash);
  color: var(--vermil); font-size: 10.5px; font-weight: 600; vertical-align: middle; cursor: help;
}
.bname .bicons .bbill.drift { position: relative; color: var(--vermil); }
.bname .bicons .bbill.drift::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: #d23a1f; box-shadow: 0 0 0 1px #fff;
}

/* 伝票の窓の自宅の備考（homenote-2026-10-06）。NG の赤字の欄に並べるが、赤にしない */
.slipngsay > .sliphomenote, .slipmenu .mvoidng > .sliphomenote { color: var(--text); font-weight: 400; }
/* キャストのページの 経験・自宅・外国人・喫煙 は、選ぶ欄の右に備考の欄を並べた 1 行（castnotes-2026-10-08）。備考は選んでいるあいだだけ */
/* プロフィールの箱は行を決め、ほかの箱と同じく同じ幅の列にそろえる（proflines-2026-10-08 利用者「詰めすぎ　経験までで　一行　体系　見た目　２行目
   自宅　外国人　喫煙　で１行づつ」「入力の　型　プルダウンUI　がバラバラ　他部分に合わせる」。profline〈利用者「経験　カップ数横で1行になるように」〉で
   中身の長さに合わせて横に詰めたら、広い箱では体型〜外国人まで 1 行に入り、欄の幅もばらばらだった）。列は 6（箱が狭いと 3・2。箱の幅で決める）。
   1 行目 掲載状況・入店日・掲載年齢・身長・カップ数・経験、経験の備考は選んでいるあいだだけそのすぐ下の 1 行、次の行 体型・見た目、
   そのあと 自宅・外国人・喫煙 が 1 行ずつ（2 列目から右は備考）、最後に簡単ログイン URL。選ぶ欄と備考の組（fieldline）はそのまま列に入れる */
#cbox-profile { container-type: inline-size; }
#cbox-profile .recordgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 8px 12px; }
#cbox-profile .recordgrid > .fieldline { display: contents; }
#cbox-profile .recordgrid label.field:has([data-f="experience_note"]) { grid-column: 1 / -1; }
#cbox-profile .recordgrid label.field:has([data-f="body_type"]), #cbox-profile .recordgrid label.field:has([data-f="home"]),
#cbox-profile .recordgrid label.field:has([data-f="foreigner"]), #cbox-profile .recordgrid label.field:has([data-f="smoke"]) { grid-column-start: 1; }
#cbox-profile .recordgrid label.field:has([data-f="home_note"]), #cbox-profile .recordgrid label.field:has([data-f="foreigner_note"]),
#cbox-profile .recordgrid label.field:has([data-f="smoke_note"]) { grid-column: 2 / -1; }
#cbox-profile .recordgrid label.field:has([data-f="mypage_url"]), #cbox-profile .recordgrid > .urlfield { grid-column: 1 / span 3; }
@container (max-width: 780px) {
  #cbox-profile .recordgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #cbox-profile .recordgrid label.field:has([data-f="mypage_url"]), #cbox-profile .recordgrid > .urlfield { grid-column: 1 / -1; }
}
/* スマホの幅は 2 列。備考は選ぶ欄の下の 1 行 */
@container (max-width: 420px) {
  #cbox-profile .recordgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cbox-profile .recordgrid label.field:has([data-f="home_note"]), #cbox-profile .recordgrid label.field:has([data-f="foreigner_note"]),
  #cbox-profile .recordgrid label.field:has([data-f="smoke_note"]) { grid-column: 1 / -1; }
}

/* ドライバー個人締めの └ のキャストを押したときの、そのキャストの経費（kidspent-2026-10-06）。一段深い └ */
.closepage tr.closekid2 > td.kname { padding-left: 34px; }

/* 伝票の窓の「本家でも直されています」（mindsync-2026-10-06） */
.notice.mindclash { margin: 6px 0 10px; line-height: 1.6; }

/* 日報報告の「本家で直された伝票」（mindsync2-2026-10-06） */
.closepage .mindsyncbox .mshead { font-size: 12px; font-weight: 700; margin: 2px 0 4px; }
.closepage .mindsyncbox .mshead.warn { color: var(--vermil); margin-top: 8px; }
.closepage .mindsyncbox .mslist { margin: 0 0 4px; padding-left: 18px; font-size: 12px; line-height: 1.7; }
.closepage .mindsyncbox .msno, .closepage .mindsyncbox .msat { margin-left: 6px; font-size: 11px; color: var(--faint); }

/* 日報報告の見比べの回収のしかた（cmpcollect-2026-10-06）。「キャスト回収」を 1 行に */
.closepage .closecmp td.cmode { white-space: nowrap; }

/* 伝票を選んで支払完了（paysplit-2026-10-06） */
.closepage .xsplit { margin-left: 6px; }
.drawer.paysplit .pslist { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.drawer.paysplit .psrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.drawer.paysplit .psrow .sub { margin-left: auto; }
.drawer.paysplit .psnum { margin: 8px 0 10px; font-size: 12.5px; }
.drawer.paysplit .psbar { display: flex; align-items: center; gap: 8px; }

/* ［締め作業完了］の前に済ませること（closeready-2026-10-06）。押せないボタンの左に赤い字で */
.closepage .closehead .finishwait { max-width: 560px; font-size: 12px; line-height: 1.5; color: var(--vermil); }

/* タスク表のキャストの欄の左上・左下：予約確認の文のコピー（rsvcheck-2026-10-06）。委託費明細（.bbill）と同じ大きさ・字の色のまま
   （店の色の地でも読める）。コピーできたら緑の ✓、予約が無ければ薄く、できなければ赤 */
.bname .bicons .brsv {
  width: 11px; height: 11px; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; place-items: center; line-height: 0; border-radius: 2px;
}
.bname .bicons .brsv svg { width: 11px; height: 11px; display: block; }
.bname .bicons .brsv:hover { opacity: .7; }
.bname .bicons .brsv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bname .bicons .brsv.done { color: var(--jade); }
.bname .bicons .brsv.bad { color: var(--mark-red); }
.bname .bicons .brsv.none { opacity: .3; }

/* タスク表の予約確認のアイコンは、コピーするものが無い向きは初めから薄く（rsvdim-2026-10-06）。空の四角と同じくらい */
.bname .bicons .brsv.empty { opacity: .3; }

/* 乗せたときの説明の札（uitip-2026-10-06 利用者「他のページも含めて　マウスフォーカスの文字や枠をもっとUIに合うように」）。ブラウザの黒枠の
   札の代わり。地・枠・角丸・影は画面のカードと同じ、書体は受け継ぐ（名前で書かない）、字は 12px。改行はそのまま。押せない（下の物に触る） */
.uitip {
  position: fixed; z-index: 2147483000; left: 0; top: 0; max-width: min(360px, calc(100vw - 16px));
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .16); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
  white-space: pre-line; overflow-wrap: anywhere; text-align: left; pointer-events: none;
}
.uitip[hidden] { display: none; }

/* ドライバーページの場所の行の Googleマップの印（drvmap-2026-10-06）。文の右に、指で押しやすい 28px の四角（スマホのページ） */
/* 文と印は 1 つの並び（drvalign-2026-10-07 利用者「ボタンと文字がづれている」。前は印を vertical-align: -7px で文字の行に置いていて、
   四角が文字より下に出ていた）。上下の真ん中でそろえ、文字が折れたら印は文字のかたまりの真ん中 */
/* 印は住所の最後の字のすぐ後ろに小さく（drvpin-2026-10-20 利用者「マップのアイコンはもっと小さく　住所の最後文字の次に　UI　がずれないように」）。
   文の行の中に置き、行の高さ（16px の字で約 23px）より小さい 20px の四角なので行の間は広がらない。上下は字の真ん中（vertical-align: -1px。見本で字の箱と印の真ん中の差 0.5px・行の高さは印の無い行と同じ 23px）。
   最後の 1 字と印は折り返さない塊（.drvglue）。押せる所は見えない余白（::after）で36×26px ほど（印の四角の左右 8px・上下は行の間ちょうどの 3px まで。隣の行の電話番号などにかからない）。上の 28px の四角を横に並べる形はやめた */
.drvrows .drvpl { display: block; min-width: 0; }
.drvrows .drvglue { white-space: nowrap; }
.drvrows .drvmap {
  position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 5px; vertical-align: -1px;
  border: 1px solid var(--accent-edge); border-radius: 5px; background: var(--accent-wash); color: var(--accent);
}
.drvrows .drvmap::after { content: ""; position: absolute; inset: -4px -9px; }
.drvrows .drvmap svg { display: block; width: 13px; height: 13px; }
.drvrows .drvmap:active { background: var(--accent); color: #fff; }
/* お客様の電話番号（drvtel-2026-10-20 利用者「押すとかける」）：押せると分かる色と下線。番号の途中で折り返さない */
.drvrows .drvtel { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
                   text-decoration: underline; text-underline-offset: 3px; }
.drvrows .drvtel:active { opacity: .6; }

/* キャスト一覧の源氏名の横の次回出勤（castnext-2026-10-09 利用者「源氏名横に　次回出勤あり　なし　ありの場合は日付記載」）・
   掲載年齢に添える実年齢（castage-2026-10-09 利用者「掲載年齢（実年齢〇〇歳）」） */
.nextshift {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px; font-size: 10px; line-height: 16px; white-space: nowrap;
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-dim); vertical-align: 1px;
}
.nextshift.none { background: transparent; color: var(--faint); border-color: var(--line); }
/* 本日出勤の札（castoday-2026-10-12 →「薄赤のような見た目に」）：同じ大きさで薄い赤（左メニューのヘブンの札と同じ色合い） */
.nextshift.today { background: var(--vermil-wash); color: var(--vermil); border-color: var(--vermil-dim); font-weight: 600; }
.realage { margin-left: 2px; font-size: 11px; color: var(--dim); white-space: nowrap; }
/* キャストのページの過去の接客記録（casthist-2026-10-09）。月の行を押すと日ごとが下に開く。当日欠勤は朱 */
/* 列の幅は決めて並べる（casthist2-2026-10-09 利用者「UIががたがたにならないように」）。casthist3 で 8 列：月 12%・合計 8.5%・出勤 9%・
   バック総額と店舗利益 16.5%、残りの 3 列（本指名・写真指名・フリー）は等分（12.5%）。箱が狭い画面では箱の中だけ横に送れる（表は 600px より縮めない） */
.casthist { overflow-x: auto; }
.casthist .chtable { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.casthist .chtable { min-width: 600px; }
.casthist .chtable th:nth-child(1) { width: 12%; }
.casthist .chtable th:nth-child(5) { width: 8.5%; }
.casthist .chtable th:nth-child(6) { width: 9%; }
.casthist .chtable th:nth-child(7), .casthist .chtable th:nth-child(8) { width: 16.5%; }
.casthist .chtable th {
  padding: 3px 6px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 500; color: var(--dim); text-align: right; white-space: nowrap;
}
.casthist .chtable th:first-child { text-align: left; }
.casthist .chtable td { padding: 3px 4px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.casthist .chtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 本数と率は決まった幅の箱（率の無い升も空の箱）。月・日・全期間の行で数字の位置がそろう（casthist2） */
.casthist .chn { display: inline-block; min-width: 3em; text-align: right; }
.casthist .chrate { display: inline-block; width: 3.2em; text-align: right; font-size: 10px; color: var(--dim); }
.casthist .chmonth { cursor: pointer; }
.casthist .chmonth:hover, .casthist .chmonth.open { background: var(--panel2); }
.casthist .chmonth.open td { font-weight: 600; }
.casthist .chmonth:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.casthist .chcaret { display: inline-block; width: 12px; color: var(--dim); }
.casthist .chday td { font-size: 11px; color: var(--text); }
.casthist .chday td:first-child { padding-left: 20px; }
/* 全期間の行は表のいちばん上（casthist3）。下に太い線 */
.casthist .chtotal td { padding-top: 5px; padding-bottom: 5px; border-bottom: 2px solid var(--line); font-weight: 600; background: var(--panel2); }
.casthist .chstate.off { color: var(--faint); }
.casthist .bad, .casthist .chday td.bad { color: var(--vermil); }
.casthist .chmore { margin-top: 6px; }

/* 常に手前の窓（ontop-2026-10-09。中身は便利ツールだけ＝同じ日 伝票・キャストの窓は今までの別ウィンドウへ戻した）。Chrome のピクチャー・イン・
   ピクチャーの窓の中（app.js の ownTop が作る）。1 つずつ：上に札の列（1 段・はみ出たら横に送る）、下に前の札の道具（隠す札は visibility）。
   並べる（ontopcols-2026-10-09 利用者「もっと複数にも並べれるよね？？」）：道具ごとに 1 列、列の見出しは札（列と同じ所・幅。left と width は
   ownTop が % で入れる）、列の境目（.otbar）をつまんで幅を分け直す。札の色の印は道具の色 */
body.otbody { margin: 0; overflow: hidden; }
/* 札は窓の幅に合わせて縮む（240px まで・64px より細くしない）。入り切らないときは横に送る（送り棒は出さない。ホイールで送れる）。
   右の端は［並べる］の釦（絵と字）のぶん空ける */
.ottabs {
  position: fixed; inset: 0 0 auto 0; height: 32px; box-sizing: border-box; display: flex; align-items: flex-end; gap: 3px;
  padding: 4px 104px 0 6px; background: var(--rail); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.ottabs::-webkit-scrollbar { display: none; }
.ottab {
  --ottone: var(--accent);
  flex: 0 1 240px; min-width: 64px; display: flex; align-items: center; height: 27px; box-sizing: border-box;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--panel3); color: var(--dim);
}
.ottab:hover { color: var(--text); }
.ottab.on { height: 28px; margin-bottom: -1px; background: var(--panel); color: var(--text); box-shadow: inset 0 2px 0 var(--ottone); }
.ottab .otname {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px 0 10px; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; text-align: left;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ottab .otname::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ottone); vertical-align: 1px;
}
.ottab .otx, .ottab .otmove {
  flex: none; width: 22px; height: 22px; margin-right: 3px; padding: 0; border: 0; border-radius: 4px; background: none;
  color: var(--faint); font-size: 12px; line-height: 22px; cursor: pointer;
}
.ottab .otx:hover { background: var(--panel2); color: var(--vermil); }
.ottab .otmove { margin-right: 0; }
.ottab .otmove[hidden] { display: none; }
.ottab .otmove:hover { background: var(--panel2); color: var(--accent); }
/* 並べているとき：札は列の見出し（列の上に同じ幅で置く。角は丸めず、列の境目と同じ線で区切る） */
body.otcols .ottabs { display: block; padding: 0; overflow: hidden; }
body.otcols .ottab {
  position: absolute; bottom: 0; max-width: none; min-width: 0; border-width: 0 0 0 1px; border-radius: 0;
}
body.otcols .ottab.otfirst { border-left: 0; }
.otcolsbtn {
  position: fixed; top: 4px; right: 6px; z-index: 4; height: 24px; padding: 0 8px; display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--dim); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
}
.otcolsbtn svg { flex: none; }
.otcolsbtn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-edge); }
.otcolsbtn.on { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-edge); }
.otcolsbtn:disabled { opacity: .45; cursor: default; }
.otpanes { position: fixed; inset: 32px 0 0 0; background: var(--bg); }
.otpane { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-sizing: border-box; margin: 0; border: 0; display: block; background: var(--bg); }
.otpane:not(.on) { visibility: hidden; }
body.otcols .otpane { border-left: 1px solid var(--line); }
body.otcols .otpane.otfirst { border-left: 0; }
.otnode { overflow: auto; background: var(--panel); }
.otempty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
/* 列の境目：つまんで隣との幅を分け直す。つまんでいる間は道具の中身に押す操作を渡さない */
.otbar { position: fixed; top: 32px; bottom: 0; z-index: 3; width: 9px; margin-left: -4px; cursor: col-resize; touch-action: none; }
.otbar:hover, body.otdrag .otbar { background: linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 6px, transparent 6px); }
body.otdrag { cursor: col-resize; user-select: none; }
body.otdrag .otpane { pointer-events: none; }

/* ── メール（mailbox-2026-10-14 利用者「内容は全て マインド＋のページで確認できたい」）：左に一覧・右に開いた 1 通。見るだけ ── */
.pad.mailpad > .mailsplit { flex: 1 1 auto; min-height: 0; }
.mailsplit { display: flex; gap: 12px; min-height: 0; }
/* 一覧は 3 分の 1 くらい・本文は右の 1 通で開いたときだけ・日時は切らない（mailfit-2026-10-14 利用者「本文は開いたときのみ 3分の１くらい 日時は伏せない」） */
.maillist { flex: 0 0 33%; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.maillist > .tablewrap { flex: 1 1 auto; min-height: 0; }
.maillist > .callmore { flex: none; }
table.grid.mailgrid { width: 100%; table-layout: fixed; }
/* 入れ替え中に前の JS が組み合わせられても、旧 4 列の日時・受信箱・差出人の幅は保つ。新しい 1 セルの行には適用しない。 */
.mailgrid td.tm { width: 88px; white-space: nowrap; text-overflow: clip; font-variant-numeric: tabular-nums; }
.mailgrid td.mbox { width: 11em; }
.mailgrid td.mfrom { width: 13em; }
.mailgrid td.tm, .mailgrid td.mbox, .mailgrid td.mfrom, .mailgrid td.msubj { overflow: hidden; text-overflow: ellipsis; }
.mailgrid td.msubj b { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.mailgrid td.msubj .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailgrid tr.unread td.msubj b { font-weight: 700; }
.mailgrid caption { text-align: left; color: var(--dim); font-size: 10.5px; padding: 0 0 6px; }
.mailgrid td.mailitem { white-space: normal; padding: 8px 10px; overflow-wrap: anywhere; }
.mailopen { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left;
  font: inherit; font-size: 12.5px; line-height: 1.5; font-weight: 500; white-space: normal; overflow-wrap: anywhere; user-select: text; cursor: pointer; }
.mailrowmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; color: var(--dim); font-size: 11px; }
.mailrowmeta > span { min-width: 0; overflow-wrap: anywhere; }
.mailrowmeta .tm { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mailunread { display: none; color: var(--accent); }
.mailgrid tr.unread .mailunread { display: inline; }
.mailgrid tr.unread .mailopen { font-weight: 700; }
.mailgrid tr.unread td:first-child { border-left: 3px solid var(--accent); padding-left: 5px; }
.mailgrid tbody tr { cursor: pointer; }
.mailread { flex: 1 1 auto; min-width: 0; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; background: var(--panel); }
.mailsubj { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.mailmeta { display: grid; gap: 2px; font-size: 12px; margin-bottom: 10px; }
.mailmeta .k { display: inline-block; width: 4em; color: var(--dim); }
.mailtools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mailtext { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 12.5px; line-height: 1.6; margin: 0; }   /* 13px は左メニューだけ（文字の大きさの基準の確かめ） */
.mailhtml { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
@media (max-width: 900px) {
  .mailsplit { flex-direction: column; }
  .maillist { flex: none; max-height: 50vh; }
}

/* スマホ幅はドライバー画面への切り替えを優先する。内勤用のメニュー・本文は作り替えない（2026-10-21 利用者）。 */
@media (max-width: 760px) {
  .headmode:not(:empty) { order: -1; flex: 1 0 100%; }
  .headmode > .seg { display: flex; width: 100%; }
  .headmode .seg button, .drvhead .drvswitch button { flex: 1 1 0; min-height: 52px; padding: 8px 12px; font-size: 17px; }
  .navtools, .rc-layer { display: none !important; }
}

/* 受信電話番号の上の帯の「ホテル発信元」（会社で 1 本。hoteldial-2026-10-15）：番号＋店名が読める幅 */
.phonebar .phonehotel select, .phonebar .phonehotel .combo { width: 24em; }
/* ホテル発信元は少し目立たせる（phonehide-2026-10-16 利用者「ホテル発信元 は目立つように少し」）：薄い青の地と枠・名札は青の太字。選び口は白いまま */
.phonebar .phonehotel { padding: 3px 4px 3px 10px; border: 1px solid var(--accent-edge); border-radius: 6px; background: var(--accent-wash);
  color: var(--accent); font-weight: 600; font-size: 11.5px; }
/* 解約済みを表示（phonehide-2026-10-16）：ほかの絞り込みと同じ字。押せる所は名札ごと */
.phonebar .pcancelled { cursor: pointer; }
.phonebar .pcancelled input { margin: 0; cursor: pointer; }
/* 伝票の窓の場所のホテルの電話番号の右の［かける］と一言（hoteldial-2026-10-15）。釦は小さく、一言は緑（失敗は赤）。空なら出さない */
/* 電話番号のリンク（telcall-2026-10-17 利用者「ホテルも顧客も　かけるボタンを無くして　番号にリンク　クリックでかける」）。
   伝票の窓のホテルと顧客情報の番号。押すと確かめてからかける。かけている間（disabled）は薄く */
.tellink {
  padding: 0; margin: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.tellink:hover { text-decoration-thickness: 2px; }
.tellink:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 1px; border-radius: 2px; }
.tellink:disabled { color: var(--faint); cursor: progress; text-decoration: none; }
.venueinfo .vdialnote { margin-left: 8px; font-size: 11px; color: var(--jade); }
.venueinfo .vdialnote.bad { color: var(--vermil); }
.venueinfo .vdialnote:empty { display: none; }

/* 2026-10-21: 操作を表示領域内へ。文字サイズ・履歴の行数は維持する。 */
.devicegrid td.devactions, .devicegrid th.devactions {
  position: sticky; right: 0; min-width: 220px; width: 220px; max-width: 220px;
  white-space: normal; background: var(--panel); box-shadow: -3px 0 5px var(--shadow-sign); z-index: 2;
}
.devicegrid th.devactions { background: var(--head); z-index: 4; }
.devicegrid .devactions .btn { margin: 2px 0; }
.grid.callgrid { table-layout: fixed; width: 100%; min-width: 1050px; }
.grid.callgrid th, .grid.callgrid td { width: auto; min-width: 0; }
.callgrid .callcell { max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.callgrid .callcell > .sub { display: inline; margin-left: 6px; }
.callgrid td.outcell .combo { width: 100%; min-width: 0; max-width: 100%; }
.callgrid .cnote { min-width: 0; }
.grid th .sorthead { font: inherit; color: inherit; border: 0; background: none; padding: 0;
  text-align: inherit; cursor: pointer; }
.grid th .sorthead:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.apphead .hn-panel { position: fixed; right: 8px; max-width: calc(100vw - 24px); }

/* 残件再照合 2026-10-21：分類検索・名前から詳細・現在区分。密度と入力欄の寸法は維持。 */
.authlog-time { white-space: nowrap; }
.rowname { font: inherit; color: var(--accent); text-align: inherit; padding: 0; margin: 0; border: 0;
  background: transparent; cursor: pointer; user-select: text; text-decoration: underline; text-underline-offset: 3px; }
.rowname:focus-visible, .recnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recnav button { font-family: inherit; }
.recnav button[aria-current="location"] { color: var(--text); border-color: var(--tone, var(--accent));
  background: var(--panel2); font-weight: 600; }
.shelffilter { position: sticky; top: 0; z-index: 1; flex: none; padding: 6px 8px 8px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.shelffilter label { display: block; font-size: 10px; color: var(--dim); margin-bottom: 4px; }
.shelffilter > div { display: flex; gap: 4px; }
.shelffilter input { width: 100%; min-width: 0; font-size: 11px; }
.shelffilter button { flex: none; }
.shelves .shelf[hidden], .shelves a[hidden], .shelves .shelfempty[hidden] { display: none; }
.shelfempty { padding: 10px; color: var(--dim); font-size: 11px; }

/* 顧客のギフト履歴。顧客メモの上で、直近の利用と更新操作を縦に並べる。 */
.giftpanel { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; }
/* イベントの履歴（evhist-2026-10-31）：履歴ごとに 1 行（.giftline）を縦に積む */
.giftcurrent { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.giftline { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
.giftevname { font-weight: 600; }
.giftplanned { color: var(--violet); font-weight: 600; }
.giftslip { font-size: 10.5px; line-height: 15px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); }
/* 旧マインドの伝票から足した行（giftpast-2026-11-01）。札「旧」は琥珀 */
.giftslip.giftold { color: var(--amber); border-color: var(--amber-dim); }
.giftrecord { display: flex; flex: 1; flex-wrap: wrap; gap: 2px 7px; min-width: 0; align-items: baseline; }
.giftrecord time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.giftname { overflow-wrap: anywhere; min-width: 0; }
.gifttools { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gifttools > select, .gifttools > .combo { flex: 1 1 0; width: 0; min-width: 0; max-width: 100%; }
.gifttools > .btn, .giftline > .giftundo, .gifttools > .giftevwrap { flex: none; }
.gifttools > .giftevwrap[hidden] { display: none; }
.gifttools .giftevent { max-width: 10em; }
/* 会員詳細の利用日（giftslip-2026-10-24）。キャストの選び口が狭くならないよう、入らなければ次の行へ */
.gifttools:has(> .giftday) { flex-wrap: wrap; }
.gifttools > .giftday { flex: none; width: 9.5em; max-width: 100%; }
.giftpanel .giftmsg:empty { display: none; }
.giftpanel .giftretry { align-self: flex-start; }
.giftpanel .giftretry[hidden] { display: none; }

/* ドライバー個人締めの「清算人 ○○（印刷 HH:MM）」＝最後に［印刷］を押した人（drvsettler-2026-10-25） */
.closepage .xprinted { margin-left: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; vertical-align: middle; }

/* 伝票に持った値（heldslip-2026-10-27）：窓の頭の注意と［反映］・忠告・料金表に無い品・店舗とキャストの保存の一覧 */
.heldgap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 差の無い伝票は隠す（hidden）。上の display: flex が [hidden] より強く、どの伝票にも空の帯と［反映］が出ていた（heldhide-2026-10-27） */
.heldgap[hidden] { display: none; }
/* 赤い背景で目立たせる（heldred-2026-10-27 利用者「背景赤で目立つように」）。字は白・［反映］は白い地のまま */
.notice.warn.heldgap { background: var(--vermil); border-color: var(--vermil); border-left-color: var(--vermil); color: #fff; font-weight: 600; }
.notice.warn.heldgap b { color: #fff; font-weight: 700; }
.notice.warn.heldgap .btn { background: #fff; color: var(--vermil); border-color: #fff; font-weight: 700; }
.heldgap > span { flex: 1 1 auto; min-width: 0; }
.heldwarn { color: var(--vermil); }
.slipmenu .mgone { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.slipmenu .mgonehead { font-size: 11px; color: var(--vermil); }
.slipmenu .mgoneitem { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--vermil); border-radius: 4px;
  padding: 1px 6px; font-size: 12px; }
.slipmenu .mgonex { border: 0; background: none; cursor: pointer; color: var(--vermil); padding: 0 2px; }
.mgwrap .hlask { width: min(880px, calc(100vw - 32px)); max-height: 82vh; display: flex; flex-direction: column; }
.hlask .hllist { overflow-y: auto; flex: 1 1 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0; }
.hlask .hldayhead { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; background: var(--panel, #fff); padding: 4px 0; }
.hlask .hlrow { display: grid; grid-template-columns: 48px 140px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 0;
  border-bottom: 1px dotted var(--line); font-size: 12px; }
.hlask .hlwho small { display: block; color: var(--dim); }
.hlask .hlmark { color: var(--vermil); font-weight: 600; }
.hlask .hlchips { display: inline-flex; gap: 4px; }
.hlask .hlchip { border: 1px solid var(--line); background: var(--panel, #fff); color: var(--text); border-radius: 12px; padding: 1px 8px;
  font-size: 12px; cursor: pointer; }
.hlask .hlchip.on[data-hlv="1"] { background: var(--board-head, #2f6db5); color: #fff; border-color: transparent; }
.hlask .hlchip.on[data-hlv="0"] { background: var(--dim); color: #fff; border-color: transparent; }
.hlask .hlsum { margin: 4px 0; font-size: 12px; }
/* 伝票の保存の持ち寄りの小窓（slipmerge-2026-11-09）：まとまりごとに、ほかの所の直し・この窓の直し・どちらにするかの選び */
.smwrap .smask { width: min(560px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto; }
.smwrap .smitem { display: flex; flex-direction: column; gap: 3px; padding-top: 7px; border-top: 1px solid var(--line); }
.smwrap .smlabel { font-weight: 600; color: var(--text); }
.smwrap .smline { font-size: 11.5px; color: var(--text); overflow-wrap: anywhere; }
.smwrap .smline b { display: inline-block; min-width: 4.6em; margin-right: 6px; font-weight: 600; color: var(--dim); }
.smwrap .smpick { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.smwrap .smpick label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.smwrap .mgbtns { flex-wrap: wrap; }