/* Hoppin シフト ── 店長・社員がシフトを組む画面
   育成アプリはオレンジ、Hoppin シフトは藍。同じ一家だが、開いた瞬間にどちらか分かるようにする。
   店長は事務所のPCでも使うので、幅を活かして一覧を詰めて出す。 */
/* ---------- 文章と改行（Hoppin設計 §12-6・hoppin.css §6.5 と同じ約束・2026-10-30 小泉「改行位置なども見づらくならないように」） ----------
   文節で折る（Chrome/Edge の auto-phrase）・行頭に「。、」「っ」「ー」を出さない（line-break:strict）・見出しは行の長さを揃える・本文はみなしご1文字を残さない。
   ⚠️ iOS Safari は auto-phrase 未対応＝数字＋単位・日付・「」の中の短い語は <span class="h-nb">、スマホだけ改行したい所は <br class="h-br-sp"> で守る。
   ⚠️ overflow-wrap:anywhere は body に掛けない（表の名前の列が字の途中で折れるため）。長いID・URLは .h-code に付ける。 */
html:lang(ja) body{line-break:strict;hanging-punctuation:allow-end;text-spacing-trim:trim-start}
p,li,.note,.helpmsg,.helpoffered{text-wrap:pretty}
h1,h2,h3,.h-balance{text-wrap:balance}
@supports (word-break:auto-phrase){html:lang(ja) :is(p,li,.note,.helpmsg,.helpoffered,h1,h2,h3,.h-phrase){word-break:auto-phrase}}
.h-nb{white-space:nowrap}
.h-unit{font-size:.78em;margin-left:.08em;font-weight:800}
.h-1l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-2l{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}
.h-code{overflow-wrap:anywhere;word-break:break-all;font-feature-settings:"tnum" 1}
.h-br-sp{display:none}@media(max-width:420px){.h-br-sp{display:inline}}

:root{--onTheme:#fff;--bg:#faf6e9;--card:#fffdf7;--ink:#20372a;--sub:#526858;--sep:#dbe7d6;--theme:#246b49;--theme2:#39805a;--themeSoft:#e2efdc;--edge:#174c36;--good:#246b49;--warn:#9b6b1c;--danger:#a63d39;--r:18px;font-family:"Zen Kaku Gothic New",-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;color:var(--ink);background:var(--bg)}
/* ⚠️ ライト／ダークは <html data-theme="light|dark"> で切り替える（2026-09-08 小泉）。
   端末の設定に従う（自動）／ライト固定／ダーク固定 の3択。決めるのは app.js の applyTheme。
   index.html の先頭で先に付けるので、読み込み直後に白く光らない。
   CSSは @media (prefers-color-scheme) を見ない＝JSが解決した1つの値だけを見る。 */
:root{ color-scheme:light }
:root[data-theme="dark"]{ color-scheme:dark }
:root[data-theme="dark"]{
    --bg:#10151b; --card:#181f27; --ink:#e3e9f0; --sub:#95a1ad; --sep:#2a333e;
    --accent:#7ea8d8; --accentSoft:#1b2733;
    --request:#a7d8f5; --requestSoft:#111a22;
    --ok:#7fb08c; --okSoft:#1a2a20; --ei:#d3a35f; --eiSoft:#2a2419; --ng:#8f9aa6; --ngSoft:#1e242b;
    --danger:#e07a7a;
    --bandQuiet:#78aee0; --bandStandard:var(--ink); --bandBusy:#ef8a8a;
    /* 暗いところでは、色そのものを明るく・塗りを濃くしないと沈む */
    --kit:#ff9a44; --kitInk:#ffc79a; --kitSoft:rgba(255,138,40,.22); --kitGlow:rgba(255,138,40,.40);
    --hal:#2fe0a6; --halInk:#9df0d0; --halSoft:rgba(47,224,166,.20); --halGlow:rgba(47,224,166,.36);
    --hcBg:#222b36;
    --band:#8fc1ea; --bandSoft:#17293a;
}
/* ⚠️ ホーム画面から開くと（manifest の standalone ＋ viewport-fit=cover）、
   iOSのステータスバー（時刻・電波・電池）とホームバーが**画面の中に重なる**（2026-09-15 小泉のスマホで実物を確認）。
   env() のぶんだけ内側へ寄せる。PC・ブラウザのタブでは env() が 0 ＝ 何も変わらない。
   ⚠️ env() は直接書かず、この変数ごしに使う（検証ページで値を差し替えて見られるようにするため）。 */
:root{ --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
       --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px) }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.7}
/* ⚠️ Hoppin シフトは事務所のPCで使う（2026-09-06 小泉）。幅の上限を外して画面いっぱいに使う。
   半月＝最大16列。1列84px＋名前150px＝約1500pxで、横スクロールなしに収まる。 */
#app{max-width:none;margin:0;padding:0 0 calc(32px + var(--sab))}

.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px calc(20px + var(--sar)) 10px calc(20px + var(--sal));padding-top:calc(10px + var(--sat));background:var(--card);border-bottom:1px solid var(--sep);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-size:20px;font-weight:800;letter-spacing:.02em;color:var(--accent)}
.brand span{font-size:11px;margin-left:7px;color:var(--sub);font-weight:600;letter-spacing:.14em}
.brand.big{font-size:30px}
.hdr-right{display:flex;gap:8px;align-items:center}
select,input{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--sep);border-radius:8px;padding:7px 9px}
button{font:inherit;cursor:pointer;border-radius:9px;border:1px solid var(--sep);background:var(--card);color:var(--ink);padding:8px 13px;font-weight:600}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--onTheme)}
button.ghost{background:transparent;color:var(--sub)}
button:disabled{opacity:.5;cursor:default}

.tabs{display:flex;gap:6px;padding:8px 20px 0;flex-wrap:wrap}
.tabs button{border:0;background:transparent;color:var(--sub);padding:9px 14px;border-bottom:2px solid transparent;border-radius:0}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}

.cycbar{display:flex;align-items:center;gap:10px;padding:10px 20px;flex-wrap:wrap}
.cycbar label{color:var(--sub);font-size:12px;font-weight:700}
.pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--sep);color:var(--sub)}
.pill.collecting{color:var(--ei);border-color:var(--ei);background:var(--eiSoft)}
.pill.building{color:var(--accent);border-color:var(--accent);background:var(--accentSoft)}
.pill.published{color:var(--ok);border-color:var(--ok);background:var(--okSoft)}

.panel{background:var(--card);border:1px solid var(--sep);border-radius:12px;margin:12px 20px;padding:14px 18px}
.panel h2{margin:0 0 4px;font-size:15px;font-weight:800;display:flex;align-items:baseline;gap:10px}
.count{font-size:12px;font-weight:700;color:var(--accent)}
.note{margin:6px 0 0;font-size:12px;color:var(--sub);line-height:1.75}
.note.ng{color:var(--danger)}
.empty{margin:12px 20px;padding:28px;background:var(--card);border:1px solid var(--sep);border-radius:12px;text-align:center;color:var(--sub)}
.empty.small{margin:8px 0;padding:16px}
.loading{padding:40px;text-align:center;color:var(--sub)}
.actions{margin:12px 20px 28px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

.formrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.formrow label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub);font-weight:700}

/* 提出のようす */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{display:inline-flex;flex-direction:column;padding:5px 11px;border-radius:9px;border:1px solid var(--sep);font-size:13px;font-weight:700;line-height:1.35}
.chip b{font-size:10px;font-weight:700;color:var(--sub)}
.chip.done{background:var(--okSoft);border-color:var(--ok)} .chip.done b{color:var(--ok)}
.chip.part{background:var(--eiSoft);border-color:var(--ei)} .chip.part b{color:var(--ei)}
.chip.none{background:var(--ngSoft)}

/* 日×人の一覧 */
.panel.wide{padding:14px 0 8px}
.panel.wide h2,.panel.wide>.note{padding:0 20px}
/* ⚠️ 表だけを自前でスクロールさせる。ページごと流すと、見出し行と名前の列が
   画面の外へ出て「誰の・いつの」が分からなくなる。 */
.scrollx{overflow:auto;margin-top:10px;max-height:72vh;max-height:72dvh;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.matrix{border-collapse:collapse;font-size:12px;min-width:100%}
.matrix th,.matrix td{border:1px solid var(--sep);padding:5px 7px;text-align:center;white-space:nowrap}
.matrix th{background:var(--bg);font-weight:700;position:sticky;top:0;z-index:1}
.matrix .stick{position:sticky;left:0;background:var(--card);font-weight:800;text-align:left;z-index:2}
.matrix .stick span{color:var(--sub);font-weight:600;margin-left:4px;font-size:11px}
.matrix .stick.sat{color:#2f6f9e} .matrix .stick.sun{color:var(--danger)}
.cell.un{color:var(--sub);opacity:.5}
.cell.ok{background:var(--okSoft);color:var(--ok);font-weight:700}
.cell.ei{background:var(--eiSoft);color:var(--ei);font-weight:700}
.cell.ng{background:var(--ngSoft);color:var(--ng)}
.cell.asgd{background:var(--accentSoft);color:var(--accent);font-weight:700}
.cell i{font-style:normal;font-size:10px;margin-left:3px;opacity:.75}

/* 組む */
.daypick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.dbtn{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:7px 4px;line-height:1.25}
.dbtn b{font-size:16px;font-weight:800}
.dbtn span{font-size:10px;color:var(--sub);font-weight:700}
.dbtn i{font-style:normal;font-size:10px;color:var(--sub)}
.dbtn.on{background:var(--accent);border-color:var(--accent);color:var(--onTheme)}
.dbtn.on span,.dbtn.on i{color:var(--onTheme);opacity:.85}
.dbtn.sat b{color:#2f6f9e} .dbtn.sun b{color:var(--danger)}
.dbtn.on.sat b,.dbtn.on.sun b{color:var(--onTheme)}

.cands{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cand{display:flex;align-items:center;gap:12px;border:1px solid var(--sep);border-radius:10px;padding:8px 10px}
.cand.ok{background:var(--okSoft);border-color:var(--ok)}
.cand.ei{background:var(--eiSoft);border-color:var(--ei)}
.cand b{display:block;font-size:14px}
.cand span{font-size:11px;color:var(--sub)}
.cand i{display:block;font-style:normal;font-size:11px;color:var(--sub)}

.asg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--sep);padding:10px 0}
.asg-name{font-weight:800;min-width:6.5em}
.asg-f{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub)}
.asg-f input[type=time]{padding:5px 6px}
.asg-f input[type=number]{width:62px;padding:5px 6px}
.asg-f.slot select{border-color:var(--accent);color:var(--accent);font-weight:700}
.asg-reason{flex:1;min-width:220px;padding:6px 9px}
.del{border-color:transparent;color:var(--sub);padding:5px 10px;font-size:16px;line-height:1}
.del:hover{color:var(--danger)}

/* ログイン */
.login{max-width:340px;margin:60px auto;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--sep);border-radius:14px;padding:28px 24px}
.login .sub{margin:0 0 6px;font-size:13px;color:var(--sub)}
.login input{padding:11px 12px}
.err{color:var(--danger);font-size:12px;min-height:1.2em}

.toast{position:fixed;left:50%;bottom:calc(26px + var(--sab));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.22s;z-index:130}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  .panel{margin:10px;padding:14px}
  .asg-reason{min-width:100%}
}

/* 半月のきまり（毎月5日まで＝当月16〜末／毎月20日まで＝翌月1〜15）を押すだけで埋める。
   期間と締切を毎回手で入れると、月をまたぐたびに1日ずれる */
.half{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.halfbtn{flex:1 1 190px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;text-align:left;line-height:1.45}
.halfbtn b{font-size:13px}
.halfbtn span{font-size:12px;color:var(--sub);font-weight:600}
.halfbtn i{font-style:normal;font-size:11px;color:var(--sub)}
.halfbtn u{text-decoration:none;font-size:11px;color:var(--ok);font-weight:700}
.halfbtn.made{opacity:.55;cursor:default}
.halfbtn:not(.made):hover{border-color:var(--accent);color:var(--accent)}

/* 祝日。⚠️ 計算せず Supabase の holiday 表から出す。組むときに平日と同じ見え方だと人を張り忘れる */
.matrix .stick i.hol{display:block;font-style:normal;font-size:10px;color:var(--danger);font-weight:700;margin-top:1px}
.dbtn.sun span{color:var(--danger)}
.holtag{font-size:11px;font-weight:700;color:var(--danger);border:1px solid var(--danger);border-radius:6px;padding:1px 7px}

/* ===== シフト表（日 × 人のグリッド）=====
   外部シフトのシフト表と同じ形。1日ずつ開く形だと、週の並びも人の偏りも見えない。
   1つのマスに 確定（上）と希望（下）を重ねる＝希望と違う置き方をした所が目で分かる。 */
.grid{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%}
.grid th,.grid td{border-right:1px solid var(--sep);border-bottom:1px solid var(--sep);padding:4px 6px;text-align:center;white-space:nowrap}
.grid thead th{position:sticky;top:0;z-index:3;background:var(--bg);font-weight:700;padding:6px}
.grid thead th i{display:block;font-style:normal;font-size:9px;color:var(--danger);font-weight:700}
.grid thead th.sat{color:#2f6f9e} .grid thead th.sun{color:var(--danger)}
.grid .stick{position:sticky;left:0;background:var(--card);z-index:2;text-align:left;min-width:132px}
.grid thead .stick{z-index:4;background:var(--bg)}
.grid .sumrow th,.grid .sumrow td{background:var(--surface-2,var(--bg));font-weight:700;color:var(--sub)}
.grid .sumrow td i{color:var(--sep);font-style:normal}
.grid .grouprow th{background:var(--accentSoft);color:var(--accent);font-weight:800;font-size:11px;letter-spacing:.06em}
.grid .grouprow td{background:var(--accentSoft)}
.grid .grouphd{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* 屋根の形の矢印（2026-09-06 小泉）。文字ではなく線で描く＝どの環境でも同じ形 */
.chv{position:relative;width:20px;height:18px;padding:0;border:1px solid var(--sep);border-radius:5px;
  background:var(--card);cursor:pointer;flex:0 0 auto}
.chv::before{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-left:1.8px solid currentColor;border-top:1.8px solid currentColor;color:var(--accent)}
.chv.up::before{transform:translate(-50%,-30%) rotate(45deg)}
.chv.down::before{transform:translate(-50%,-70%) rotate(225deg)}
.chv:hover{border-color:var(--accent)}
.chv:disabled{opacity:.3;cursor:default}
.grid .grouprow .chv{border-color:var(--accent)}
/* 社員の行の並び替え。名前の左に小さく縦に2つ */
.nameth{position:relative}
.ord{position:absolute;left:2px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}
.ord .chv{width:15px;height:13px}
.ord .chv::before{width:5px;height:5px;border-width:1.6px}
/* ⚠️ `tr:has(.ord)` は表全体の style 再計算を誘う。行数×日数が多いので、印を付ける側（app.js）で
   `.hasord` を出して素直に当てる（2026-09-19） */
.grid .nameth.hasord .nm,.grid .nameth.hasord .sub{padding-left:19px}
.nameth .nm{font-size:13px;font-weight:700;line-height:1.3}
/* ⚠️ 1日ずつと同じ並び＝時間が左・ランクが右端（2026-09-08 小泉「半月の方も1日づつのレイアウトと合わせて」） */
.nameth .sub{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:1px}
.nameth .tt{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.rk{font-size:10px;font-weight:800;border-radius:4px;padding:0 5px;border:1px solid currentColor}
.rk.rD{color:#8e959c} .rk.rC{color:#2f6f9e} .rk.rB{color:#3d6b4d} .rk.rA{color:#a9701f} .rk.rS{color:#a9512a}
/* マス。上＝確定、下＝希望 */
.cell{cursor:pointer;min-width:96px;height:46px;vertical-align:middle}
.cell:hover{background:var(--accentSoft)}
.cell .asgbox{display:block;border:1px solid var(--sub);border-radius:5px;padding:2px 4px;
  color:var(--sub);font-weight:700;background:transparent}
.cell .asgbox.p-kitchen{border-color:var(--kit);color:var(--kitInk);background:var(--kitSoft);
  box-shadow:inset 0 0 0 1px var(--kitGlow)}
.cell .asgbox.p-hall{border-color:var(--hal);color:var(--halInk);background:var(--halSoft);
  box-shadow:inset 0 0 0 1px var(--halGlow)}
.cell .asgbox .ik{font-style:normal;font-size:9px;font-weight:800;margin-left:3px;
  padding:0 3px;border-radius:3px;background:var(--ei);color:var(--onTheme);vertical-align:1px}
.cell .asgbox.s-chosei{opacity:.72}
.cell .req{display:block;font-size:10px;color:var(--sub);margin-top:1px;min-height:34px}
.cell .req-time{display:block;min-height:12px;font-weight:400}
/* ⚠️ `-webkit-box`＋`line-clamp` は**マスの数だけ**並ぶ。実機（Fold）で文字が出ないことがあったため、
   高さで切る素直な書き方に変えた（2行ぶん＝line-height 10px × 2）。見え方は同じ（2026-09-19） */
.cell .req-note{display:block;min-height:20px;max-height:20px;max-width:100%;overflow:hidden;white-space:normal;overflow-wrap:anywhere;line-height:10px;font-weight:400}
.cell .addhint{display:block;color:var(--sep);font-size:14px;font-weight:700}
.cell:hover .addhint{color:var(--accent)}
.cell.ng{background:var(--ngSoft)}
.cell.ng .addhint{opacity:.25}
/* 1マスの編集 */
/* ⚠️ z-index はシフトのチャット（90）・全画面（70）・全画面ボタン（80）より上（2026-09-10 小泉「チャットの『点検する』を押しても動かない」＝点検の画面がチャットの裏に開いていた） */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:120;align-items:center;justify-content:center;
  padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal))}
.modal.open{display:flex}
.modal .box{background:var(--card);border-radius:14px;padding:20px;width:100%;max-width:520px;max-height:100%;overflow-y:auto}
.mh{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mreq{margin-top:6px;font-size:12px;color:var(--sub)}
.mreq i{font-style:normal}
.mrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.mrow label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--sub);font-weight:700}
.mrow label span{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:400}
.mrow input[type=number]{width:64px}
.mreason{width:100%;margin-top:12px;padding:9px 10px}
.mbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.mbtns .danger{border-color:var(--danger);color:var(--danger);margin-right:auto}

/* 希望の一覧のマス（組む画面と同じ表を使うので、色だけ足す） */
.cell.rq{font-weight:700}
.cell.rq.ok{background:var(--okSoft);color:var(--ok)}
.cell.rq.ei{background:var(--eiSoft);color:var(--ei)}
.cell.rq.ng{background:var(--ngSoft);color:var(--ng);font-weight:600}
.cell.rq i{font-style:normal;font-size:10px;margin-left:3px;opacity:.75}
.nameth .tt.ok{color:var(--ok);font-weight:700}

/* お試しの希望（管理者だけ）。本番の操作と見た目で分ける＝枠を点線にして「実験」に見せる */
.demorow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--sep)}
.demorow .note{margin:0;flex:1 1 260px}

/* ===== PC最適化（2026-09-06 小泉指示。スマホ最適化は最後にやる） ===== */
.cell{min-width:84px}
.grid .stick{min-width:150px}
.grid th,.grid td{padding:3px 5px}
.grid thead th{padding:5px 4px;font-size:11.5px}
.nameth .nm{font-size:12.5px}
/* 回収をはじめる：候補ボタンと入力を横に並べる（PCは縦に流さない） */
@media (min-width:1000px){
  .half{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .halfbtn{flex:none}
  .formrow{align-items:flex-end;gap:14px;padding-top:12px;margin-top:12px;border-top:1px dashed var(--sep)}
  .chips{gap:6px}
  .modal .box{max-width:600px}
}
/* 画面が広いほど列を太らせる＝スカスカにも詰まりすぎにもしない */
@media (min-width:1600px){ .cell{min-width:96px} .grid .stick{min-width:170px} }
@media (min-width:1900px){ .cell{min-width:108px} }

/* 半月＝最大16列を横スクロールなしで置きたい。文字を1段落として詰める。
   ⚠️ 名前とランクは詰めない（誰の行かが読めなくなる）。詰めるのは時刻だけ。 */
.cell .asgbox{font-size:11px;padding:1px 3px;letter-spacing:-.2px}
.cell .req{font-size:9.5px;letter-spacing:-.2px}
.grid th,.grid td{padding:3px 4px}

/* ===== 2画面に整理（2026-09-06 小泉）。期間を選ぶ → 状況を見る → 組む → 配信 ===== */
.pickhd{width:100%;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 20px 0;
  border:0;border-radius:0;background:transparent;text-align:left;font-size:12px;color:var(--sub);font-weight:700}
.picklabel,.pickchev{flex:none}
.picksummary{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pickchev{margin-left:auto;color:var(--accent)}
.periodcards{display:grid;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows .2s ease}
.periodcardsin{min-height:0;overflow:hidden}
.periodpick.folded .pickhd{padding-bottom:8px}
.periodpick.folded .picksummary{display:block;flex:1}
.periodpick.folded .periodcards{grid-template-rows:0fr}
.picker{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 4px}
@media (prefers-reduced-motion:reduce){.periodcards{transition:none}}
.pcard{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:132px;padding:8px 12px;text-align:left;line-height:1.4}
.pcard .pd{font-size:13px;font-weight:800}
.pcard .ps{font-size:11px;font-weight:700;color:var(--sub)}
.pcard .pl{font-size:10px;color:var(--sub)}
.pcard.on{border-width:2px;border-color:var(--accent);background:var(--accentSoft)}
.pcard.on .ps{color:var(--accent)}
.pcard.collecting .ps{color:var(--ei)}
.pcard.building .ps{color:var(--accent)}
.pcard.published .ps{color:var(--ok)}
.pcard.over .ps{color:var(--danger)}
.pcard.new{border-style:dashed;color:var(--sub)}
.pcard.new .pd{font-weight:600}

/* 操作バー。状態と行き先を1行にまとめる＝メニューを増やさない */
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 20px 0;padding:10px 14px;background:var(--card);border:1px solid var(--sep);border-radius:10px}
.barsp{font-size:13px;font-weight:700}
.baract{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.baract .demo{opacity:.75;font-size:12px}
.warn{margin:10px 20px 0;padding:10px 14px;border:1px solid var(--ei);background:var(--eiSoft);color:var(--ei);border-radius:10px;font-size:12.5px}
.warn a{color:var(--accent);text-decoration:underline;cursor:pointer;font-weight:700}
.scrollx{margin:10px 20px 0;border:1px solid var(--sep);border-radius:10px;background:var(--card)}
.foot{margin:8px 20px 28px;font-size:11.5px;color:var(--sub)}
.lg{display:inline-block;font-size:10px;font-weight:700;border-radius:4px;padding:0 5px;margin:0 3px;border:1px dashed currentColor}
.lg.s-senryoku{color:var(--ok)} .lg.s-ikusei{color:var(--ei)} .lg.s-chosei{color:var(--sub)}
.lg.p-kitchen{color:var(--kitInk);border-color:var(--kit);background:var(--kitSoft);border-style:solid}
.lg.p-hall{color:var(--halInk);border-color:var(--hal);background:var(--halSoft);border-style:solid}
.foot .ik{font-style:normal;font-size:9px;font-weight:800;padding:0 3px;border-radius:3px;
  background:var(--ei);color:var(--onTheme);margin:0 2px}
/* 自動の下書きは点線を強めて「まだ人が見ていない」ことを出す */
.asgbox.draft{border-style:dotted;opacity:.9}
.sumrow b.short{color:var(--danger)} .sumrow b.okv{color:var(--ok)}
/* 設定 */
.setlist{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.setlist td{padding:4px 6px;border-bottom:1px solid var(--sep)}
.setlist input[type=text],.setlist td>input:not([type]){width:140px}
.setlist input[type=number]{width:96px}
.setrow{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px}
.setrow input{width:80px}
.mseg{display:flex;gap:8px;margin:14px 0 4px}
.mseg button{flex:1;padding:11px;font-weight:700}
.mseg button.on{background:var(--ok);border-color:var(--ok);color:var(--onTheme)}
.mseg button:last-child.on{background:var(--sub);border-color:var(--sub)}
.mseg button.on.ng{background:var(--ng);border-color:var(--ng)}
.mpats{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.mpats button{flex:1 1 120px;font-size:12px;line-height:1.3;padding:7px 6px}
.mpats button span{display:block;font-size:10px;color:var(--sub);font-weight:600}

/* 名前の列。左端に張り付くと読みにくいので余白を入れる（2026-09-06 小泉指摘） */
.grid .stick{padding-left:12px;padding-right:10px}
.grid thead .stick{padding-left:12px}
.nameth .nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nameth .sub{margin-top:2px}
/* ヘルプ */
.helprow th.stick{background:var(--eiSoft)}
.fromtag{font-size:9.5px;font-weight:700;color:var(--ei);border:1px solid var(--ei);border-radius:4px;padding:0 4px}
.cell.away{background:var(--ngSoft)}
.awaybox{display:block;font-size:10.5px;font-weight:700;color:var(--sub)}

/* 他店舗への応援依頼。通知はシフト画面の最上部だけに出し、外部通知は使わない */
.helpalert{width:calc(100% - 40px);margin:10px 20px 0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 14px;text-align:left;border-color:var(--ei);background:var(--eiSoft);color:var(--ei)}
.helpalert span{font-weight:700}.helpalert b{font-size:16px;margin:0 3px}.helpalert i{font-style:normal;font-size:11px;white-space:nowrap}
.helpalert.reply{border-color:var(--accent);background:var(--accentSoft);color:var(--accent)}
.helpalert.error{border:1px solid var(--danger);background:var(--ngSoft);color:var(--danger);border-radius:9px;font-size:12px}
.helppanel{margin:10px 20px 14px;padding:14px 16px;background:var(--card);border:1px solid var(--ei);border-radius:12px}
.helppanelhd{display:flex;align-items:center;justify-content:space-between;gap:10px}.helppanelhd h2{font-size:16px;margin:0}
.helppanel h3{font-size:12px;color:var(--sub);margin:14px 0 6px}
.helpreq{border:1px solid var(--sep);border-radius:10px;padding:10px 12px;margin-top:7px}
.helpreq.mine{border-left:4px solid var(--accent)}
.helpreqhd{display:flex;align-items:center;gap:7px 14px;flex-wrap:wrap;font-size:12px}.helpreqhd b{font-size:13px;color:var(--accent)}
.helpmsg{white-space:pre-wrap;overflow-wrap:anywhere}.helpreq>.helpmsg,.helpreqsummary .helpmsg{margin:6px 0 9px;font-size:13px}
.helpoffered{font-size:11.5px;color:var(--sub);margin:5px 0 8px}
.helpoffer{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:7px 0;border-top:1px dashed var(--sep);font-size:12px}
.helpoffer .helpmsg{flex:1 1 240px;margin:0;color:var(--sub)}
.helpreq>.danger{color:var(--danger);border-color:transparent;margin-top:6px;padding-left:0}
.helpreqedit{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.helpreqline{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:8px 12px;align-items:end;
  border:1px solid var(--sep);border-radius:10px;padding:10px;opacity:.6}
.helpreqline.on{opacity:1;border-color:var(--accent);background:var(--accentSoft)}
.helpreqline label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--sub);font-weight:700}
.helpreqline label span{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:400}
.helpreqline .helpcheck{flex-direction:row;align-items:center;align-self:center;color:var(--ink);font-size:12px}
.helpreqline input[type=number]{width:60px}.helpreqline .clock{width:72px;padding-left:6px;padding-right:6px}
.helpmessage{grid-column:1/-1;display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--sub);font-weight:700}
.helpmessage textarea{width:100%;resize:vertical;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--sep);border-radius:8px;padding:8px 9px;line-height:1.5}
.helpmessage.offer{margin-top:12px}.helpreqsummary{margin-top:9px;padding:9px 11px;border-radius:9px;background:var(--accentSoft)}

@media (max-width:720px){
  .helpalert{width:calc(100% - 20px);margin-left:10px;margin-right:10px}
  .helppanel{margin-left:10px;margin-right:10px}.helpreqline{grid-template-columns:1fr}
  .helpreqline .helpmessage{grid-column:1}.helpoffer{align-items:flex-start}
}

/* もう一方の区分で入っている日。空けたまま、そこに居ることだけ小さく出す */
.cell.other{background:var(--bg)}
.otherbox{display:block;font-size:10px;font-weight:800;color:var(--sub);opacity:.6}

/* 出勤希望。確定バッジは触らず、マスの地色と希望時刻だけを強める */
.cell.req-ok,.cell.req-ok:hover{background:var(--requestSoft)}
.cell.req-ok .req{color:var(--request)}
.cell.req-ok .req-time{font-weight:800}

/* 集計行：想定売上とモデル帯 */
.sumrow .fc{color:var(--sub)}
.sumrow .bd{font-size:10px;font-weight:700;color:var(--accent)}
.setlist thead th{font-size:11px;color:var(--sub);text-align:left;padding:4px 6px;border-bottom:1px solid var(--sep)}
.scorecell{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}

.pcard.past{border-style:dotted;color:var(--sub)}
.pcard.past .ps{color:var(--sub)}
.pcard.past.on{border-style:solid;border-width:2px;border-color:var(--sub);background:var(--ngSoft)}
.bandname{font-weight:800;white-space:nowrap}

/* 設定の表は2つとも同じ列幅にそろえる（2026-09-06 小泉指摘）。
   width:100% のままだと入力欄が画面幅いっぱいに伸びて、上下の表で列がずれる。
   ⚠️ table-layout:fixed ＋ colgroup で、どちらの表も同じ位置に来るようにする。 */
.setlist{width:auto;max-width:960px;table-layout:fixed}
.setlist .c1{width:140px} .setlist .c2{width:300px} .setlist .c3{width:130px}
.setlist .c4{width:150px} .setlist .c5{width:110px} .setlist .c6{width:50px}
.setlist td,.setlist th{overflow:hidden}
.setlist td.nowrap{white-space:nowrap}
.setlist input[type=text],.setlist td>input:not([type]){width:100%}
.setlist input[type=number]{width:92px}
.setlist td.nowrap input[type=number]{width:78px}
.setlist input[type=time]{width:96px}
.setlist select{width:100%}

/* 過去はふだんたたむ（2026-09-06 小泉）。開く釦は先頭に置く */
.pcard.fold{border-style:dashed;color:var(--sub);min-width:96px}
.pcard.fold .pd{font-size:12px;font-weight:700;color:var(--accent)}

/* 外部シフトから取り込んだ確定シフト。Hoppin シフトで組んだものと見た目で分ける */
.asgbox.imported{border-style:solid;border-color:var(--sub);color:var(--sub);background:var(--ngSoft)}
.lg.imported{color:var(--sub);border-style:solid}

/* ランクの内訳。小さい欄を横に5つ並べる */
.rankmix{white-space:nowrap}
.rankmix label{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:800;
  border:1px solid currentColor;border-radius:5px;padding:1px 3px;margin-right:3px}
.rankmix label input{width:38px;padding:2px 3px;font-size:12px;border:0;background:transparent;color:var(--ink);font-weight:600}
.mixsum{display:inline-block;margin-left:6px;font-size:11px;color:var(--sub)}
.mixsum b{color:var(--accent);font-size:13px}
.mixsum.warnv{color:var(--danger)}
.sumrow .tgt{font-size:10px;color:var(--sub)}
.setlist .c5{width:340px}

/* ===== モデルシフト（2026-09-06）＝横軸に時間帯、縦軸にホール・キッチンの枠 ===== */
.band{border:1px solid var(--sep);border-radius:10px;padding:12px 14px;margin:12px 0;background:var(--card)}
.bandhd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.bandhd h3.bandname{margin:0;font-size:15px;font-weight:800;min-width:88px}
.bandhd h3.bandname-0{color:var(--bandQuiet)}
.bandhd h3.bandname-1{color:var(--bandStandard)}
.bandhd h3.bandname-2{color:var(--bandBusy)}
.bandbud{font-size:12px;color:var(--sub);white-space:nowrap}
.bandbud input{width:104px}
.bandsum{font-size:11px;color:var(--sub);margin-left:auto;white-space:nowrap}
.bandsum b{color:var(--ink);font-size:13px}
.bandsum b.warnv{color:var(--danger)}

.gauge{border-top:1px solid var(--sep);padding-top:8px}
.grow,.gaxis{display:flex;align-items:center;gap:8px;margin:3px 0}
.glabel{flex:0 0 82px;font-size:11px;font-weight:700;color:var(--sub);text-align:right}
.glabel.kitchen{color:var(--kitInk)} .glabel.hall{color:var(--halInk)}
.gtrack{position:relative;flex:1 1 auto;min-width:220px;height:22px;border-radius:5px;--hw:8.33%;
  background:var(--bg);
  background-image:repeating-linear-gradient(90deg,var(--sep) 0,var(--sep) 1px,transparent 1px,var(--hw))}
.gtrack.plain{background:none;background-image:none}
.gaxis .gtrack{height:14px}
.gt{position:absolute;top:0;font-size:10px;color:var(--sub);transform:translateX(-50%)}
.gbar{position:absolute;top:2px;height:18px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:700;color:#fff;overflow:hidden;white-space:nowrap;
  cursor:grab;user-select:none}
.gbar.dragging{cursor:grabbing;touch-action:none}
.gbar span{pointer-events:none;overflow:hidden;text-overflow:clip}
.ghandle{position:absolute;top:0;bottom:0;width:8px;z-index:1;cursor:ew-resize}
.ghandle.start{left:0}.ghandle.end{right:0}
.gbar.kitchen{background:var(--kit)} .gbar.hall{background:var(--hal)}
/* ⚠️ 幅を固定し、中身が長くても伸びない（min-width:0）。伸びるとバーの帯だけ縮んで目盛りとずれる（2026-09-10 小泉「タイムバーと時間の数値の列位置がずれている」） */
.gset{flex:0 0 340px;min-width:0;font-size:11px;color:var(--sub);white-space:normal;line-height:1.9}
.gset select{font-size:11px;padding:1px 2px}
.gset input[type=number]{width:52px;font-size:11px}
.gwork{display:inline-block;min-width:42px;margin-left:6px;text-align:right;
  font-size:11px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.gempty{font-size:11px;color:var(--sub);padding:3px 0 3px 90px}
.gaddone{padding-left:90px;height:24px;display:flex;align-items:center}
.gaddone button{width:25px;height:21px;padding:0;border-radius:6px;font-size:15px;line-height:1}
.gneedrow{margin:2px 0}
.gneedrow:first-of-type{margin-top:8px;padding-top:8px;border-top:1px dashed var(--sep)}
.gneedrow .gtrack{height:18px}
.gn{position:absolute;top:0;height:18px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#2a3742;border-right:1px solid var(--card);border-radius:2px}
.gn.n0{background:transparent}
.gn.n1{background:#dfe8f0} .gn.n2{background:#c4d6e6} .gn.n3{background:#a5c1d9}
.gn.n4{background:#83aacd} .gn.n5{background:#6193c1;color:#10151b}

.mixrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;
  border-top:1px solid var(--sep);padding-top:8px}
.mixttl{font-size:11px;color:var(--sub);font-weight:700;flex:0 0 82px;text-align:right}
.mixrow label.rk{display:inline-flex;align-items:center;gap:3px;padding:2px 5px}
.mixrow label.rk input{width:44px;font-size:12px}
.mixhint{font-size:11px;color:var(--sub);margin-left:6px}

/* デモの数字（パイロット用）。本物のぴかいちの予算と見分けがつくように */
.demo{position:relative}
.sumrow .demo::after{content:'デモ';font-size:8px;font-weight:800;color:var(--ei);
  background:var(--eiSoft);border-radius:3px;padding:0 3px;margin-left:3px;vertical-align:1px}
.mpatshd{font-size:11px;color:var(--sub);font-weight:700;margin-top:10px}
.mpatshd .demo::after{content:'デモの予算';font-size:9px;font-weight:800;color:var(--ei);
  background:var(--eiSoft);border-radius:3px;padding:0 4px;margin-left:6px}

/* 月の人件費の帯（軸①②）。⚠️ 1行におさめる。但し書きは畳んでおく（2026-09-06 小泉） */
.pabar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 20px 2px;
  padding:5px 12px;border-radius:8px;background:var(--card);border:1px solid var(--sep);
  font-size:12px;color:var(--sub);line-height:1.4}
.pabar .pacell{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.pabar .pak{font-weight:800;color:var(--ink)}
.pabar .pav{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.pabar .pares{font-weight:800;color:var(--ok)}
.pabar .pasep{font-size:10px;opacity:.75}
.pabar.over{border-color:var(--danger)}
.pabar.over .pacell:first-child .pav,.pabar.over .pacell:first-child .pares{color:var(--danger)}
.pabar .pacell.ng .pav,.pabar .pacell.ng .pares{color:var(--danger)}
.pabar .pawish{font-size:10px;font-weight:800;color:var(--request);
  background:var(--requestSoft);border-radius:4px;padding:1px 6px;white-space:nowrap}
.pabar .panote{margin-left:auto}
.pabar .panote>summary{cursor:pointer;font-size:10px;color:var(--sub);list-style:none;
  border:1px solid var(--sep);border-radius:5px;padding:1px 8px;white-space:nowrap}
.pabar .panote>summary::-webkit-details-marker{display:none}
.pabar .panote>summary::after{content:' ▾'}
.pabar .panote[open]>summary::after{content:' ▴'}
.pabar .panote>div{position:absolute;right:20px;z-index:5;margin-top:5px;max-width:520px;
  padding:9px 12px;border-radius:8px;background:var(--card);border:1px solid var(--sep);
  box-shadow:0 6px 20px rgba(0,0,0,.12);font-size:11px;line-height:1.7;text-align:left;white-space:normal}
.sumrow .pa{font-variant-numeric:tabular-nums}

/* ===== 1日ずつ（2日を縦に表示） ===== */
.viewtoggle{display:flex;justify-content:center;margin:10px 20px 0}
.viewtoggle button{min-width:132px;border-radius:0}
.viewtoggle button:first-child{border-radius:8px 0 0 8px}
.viewtoggle button:last-child{border-radius:0 8px 8px 0;margin-left:-1px}
.viewtoggle button.on{position:relative;background:var(--accent);border-color:var(--accent);color:var(--onTheme)}
.daynav{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 20px}
.daynav button{width:42px;padding:6px}
.daynav span{min-width:110px;text-align:center;font-size:13px;font-weight:800}
/* ⚠️ 2日分は左右に並べる（縦割り・2026-09-06 小泉）。狭いときだけ上下に折り返す */
.daysplit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 20px 18px}
@media (max-width:1100px){ .daysplit{grid-template-columns:1fr} }
.daycard{padding:10px 12px;background:var(--card);border:1px solid var(--sep);border-radius:12px;min-width:0;overflow-x:auto;
  display:flex;flex-direction:column}
/* 「この日のシフトの理由」は左右で同じ位置に固定する（2026-09-09 小泉「左右でずれないように」）＝
   カードは同じ高さ（grid の stretch）、理由の段はいちばん下に寄せ、箱の高さも固定。長い文は箱の中でスクロール */
.daycard .daysection.daynote{margin-top:auto}
.daycard .dayreason{height:16em;overflow:auto;margin-bottom:6px}
.daycard .daysection.daynote textarea{height:2.2em;resize:none}
.daycard .daysection.daynote textarea:focus{height:5em}
.daycard.sat{border-top:4px solid #2f6f9e}.daycard.sun{border-top:4px solid var(--danger)}
.dayhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dayhead h2{display:inline-block;margin:0;font-size:21px;line-height:1.15}
.daycard.sat .dayhead h2{color:#2f6f9e}.daycard.sun .dayhead h2{color:var(--danger)}
.dayholiday{display:inline-block;margin-left:9px;color:var(--danger);font-size:12px;font-weight:800}
.daychecks{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:700}
.daychecks label{display:flex;align-items:center;gap:5px;white-space:nowrap}
.dayfacts{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;padding:4px 8px;background:var(--bg);border-radius:6px;font-size:11px;color:var(--sub)}
.dayfacts b{margin-left:4px;color:var(--ink)}
.daysection{margin-top:8px;padding-top:6px;border-top:1px solid var(--sep)}
.daysection h3{margin:0 0 3px;font-size:12px;color:var(--accent)}
.dayaxis,.dayneed,.daystaffrow{display:grid;grid-template-columns:150px minmax(180px,1fr);column-gap:8px;align-items:center}
.dayaxis{height:14px}.dayaxis .gtrack{height:12px}
.dayneed{margin-bottom:3px;padding:2px 0;background:var(--accentSoft);border-radius:5px}
.dayneed>span{padding-left:10px;font-size:11px;font-weight:800;color:var(--accent)}
.dayneed .gtrack{height:15px}
/* ⚠️ 1人ぶんの縦幅を広げる（2026-09-07 小泉）。前は詰まりすぎて持ち場が読めなかった */
.daystaffrow{min-height:0;padding:8px 0;border-top:1px dashed var(--sep)}
.daystaff{min-width:0;padding-left:10px}
.daystaffname{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;line-height:1.3}
.daystaffmeta{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10.5px;color:var(--sub);line-height:1.3}
.daynote{margin-top:0;font-size:10px;line-height:1.3;color:var(--ei);white-space:normal;overflow-wrap:anywhere}
.daytrack{height:42px;overflow:visible}
/* ⚠️ 1日ずつも**半月の表と同じ見た目**にする（2026-09-07 小泉）。
   べた塗りに白文字だと、半月の表と行き来したときに別のものに見えていた。 */
.dayasg{position:absolute;top:2px;height:30px;min-width:2px;padding:0 6px;border:1px solid var(--hal);
  border-radius:7px;background:var(--halSoft);color:var(--halInk);font-size:11px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:clip;z-index:2;
  box-shadow:inset 0 0 0 1px var(--halGlow)}
.dayasg.kitchen{border-color:var(--kit);background:var(--kitSoft);color:var(--kitInk);
  box-shadow:inset 0 0 0 1px var(--kitGlow)}
.dayasg.imported{border-color:var(--sub);background:var(--ngSoft);color:var(--sub);box-shadow:none}
.dayasg.draft{border-style:dashed}
.dayasg:hover{filter:brightness(.93)}
.dayreq{position:absolute;top:35px;height:4px;border-radius:2px;background:var(--request);opacity:.5;z-index:1}
.dayreq.untimed{background:repeating-linear-gradient(90deg,var(--request) 0,var(--request) 7px,transparent 7px,transparent 11px)}
.dayadd{position:absolute;inset:2px auto auto 0;width:30px;height:30px;padding:0;border-style:dashed;color:var(--sub);font-size:16px;line-height:1}
.dayadd:hover{color:var(--accent);border-color:var(--accent)}
.dayempty{padding:4px 8px;font-size:10px;color:var(--sub)}
@media (max-width:700px){
  .daysplit{margin-left:10px;margin-right:10px;gap:10px}
  .daycard{padding:10px}
  .dayhead,.dayfacts{min-width:0}
  .dayaxis,.dayneed,.daystaffrow{min-width:0;grid-template-columns:112px minmax(220px,1fr)}
}
/* まだ確定していない＝本人の希望のまま数えている分 */
.sumrow .wsh{margin-left:4px;font-size:9px;font-weight:800;color:var(--request);
  background:var(--requestSoft);border-radius:3px;padding:0 3px}
/* 深夜（22時〜翌5時）の時間。1.25倍で計算している分 */
.nite{display:inline-block;margin-left:4px;font-size:9px;font-style:normal;font-weight:800;
  color:var(--ei);background:var(--eiSoft);border-radius:3px;padding:0 3px}
.dayfacts .wsh,.dayfacts .nite{font-style:normal}

/* 残業の見込み（月176時間超）。後半を組むときに効く */
.otbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 20px 2px;padding:7px 12px;
  border-radius:8px;background:var(--eiSoft);border:1px solid var(--ei);font-size:12px;color:var(--ei)}
.otbar .otttl{font-weight:800;white-space:nowrap}
.otbar .otone{display:inline-flex;align-items:baseline;gap:5px;padding:1px 8px;border-radius:6px;
  background:var(--card);border:1px solid var(--ei);white-space:nowrap}
.otbar .otone b{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.otbar .otone i{font-style:normal;font-size:11px;color:var(--ei);font-weight:700}
.otbar .otnote{margin-left:auto;font-size:10px;opacity:.85;text-align:right}

/* 合計の必要人数（ポジションごととは別に、その時間に店に何人いるか） */
.dayneed.daytotal{margin-top:5px;background:var(--accentSoft);border:1px solid var(--accent)}
.dayneed.daytotal>span:first-child{color:var(--accent);font-weight:800}
.daytotalsum{padding:2px 0 0 158px;font-size:10px;color:var(--accent);white-space:nowrap}
.daytotalsum b{font-size:12px}

/* ⚠️ 同じ人がキッチンにもホールにも並ぶ（行は「人×ポジション」）。
   どちらの区分を見ているか、名前の列と見出しの色で分かるようにする（2026-09-06 小泉）。
   ⚠️ シフトの時間の色は 戦力／育成／調整 を表しているので触らない。 */
/* ⚠️ 行・見出しの地色は変えない（2026-09-06 小泉）。色分けはシフトの時間のバッジだけ */

/* ⚠️ キッチン／ホールの色は :root のトークンで両方まかなう。ここでの上書きは消した */
/* 社員の時間を「この人の既定」にして他の日にも反映する */
.mall{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:8px 10px;
  border:1px solid var(--accent);border-radius:8px;background:var(--accentSoft);
  font-size:12px;font-weight:700;color:var(--accent);cursor:pointer}
.mall input{margin-top:2px}
.mallnote{margin-top:5px;font-size:11px}
/* 名前の下の総労働時間。希望のまま数えている分があるときは印を付ける */
.nameth .tt.iswish{color:var(--request)}
.nameth .adopt{font-size:10px;font-weight:800;color:var(--request);white-space:nowrap;margin-left:auto}  /* 希望→下書きの採用率（2026-09-10）*/
.nameth .tt i{font-style:normal;font-size:8px;font-weight:800;margin-left:3px;padding:0 2px;
  border-radius:3px;background:var(--requestSoft);color:var(--request)}
/* シフト確定の前の点検 */
.rv{margin-top:10px;display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow:auto}
.rvi{padding:8px 11px;border-radius:8px;border:1px solid var(--sep);background:var(--bg)}
.rvi b{display:block;font-size:13px;color:var(--ink)}
.rvi span{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;font-size:11.5px;color:var(--sub);line-height:1.6}
.rvc{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:12px;
  border:1px solid var(--sep);background:var(--card);font-style:normal;font-size:11px;white-space:nowrap}
.rvc b{font-size:11.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.rvi.ng .rvc{border-color:var(--danger)} .rvi.ng .rvc b{color:var(--danger)}
.rvi.warn .rvc{border-color:var(--ei)} .rvi.warn .rvc b{color:var(--ei)}
.rvi span u{flex-basis:100%;text-decoration:none;font-size:10.5px;opacity:.85;margin-top:2px}
.rvi.ng{border-color:var(--danger);background:transparent} .rvi.ng b{color:var(--danger)}
.rvi.warn{border-color:var(--ei)} .rvi.warn b{color:var(--ei)}
.rvi.info{border-style:dashed}
.note.ok{color:var(--ok);font-weight:700}
/* 理由のタグ。押した内容は数えて学習に使う */
.rtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rtag{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:14px;
  border:1px solid var(--sep);background:var(--card);color:var(--sub);cursor:pointer}
.rtag:hover{border-color:var(--accent);color:var(--accent)}
.rtag.on{background:var(--accent);border-color:var(--accent);color:var(--onTheme)}
/* シフト確定は「出す」ボタン。自動生成（青）と色を分ける */
/* シフト確定は明るい緑（2026-09-10 小泉「もう少し明るい色に」）。シフトの入り口はその左（青） */
.bar .fix{background:#1e8449;border-color:#1e8449;color:#fff;font-weight:800}
.bar .fix:hover{background:#1e9250}
.bar .chatgo{background:var(--accent);border-color:var(--accent);color:var(--onTheme);font-weight:800}
.bar .chatgo:hover{opacity:.92}
.bar .fix:hover{filter:brightness(1.06)}
/* 点検の枠は、人件費の帯・警告と同じ幅で見せる（左右20pxの余白に合わせる） */
.modal .box.wide{max-width:none;width:calc(100vw - 40px)}
@media (min-width:1600px){ .modal .box.wide{max-width:1400px} }
.box.wide .rv{max-height:56vh}
.box.wide .rvi{padding:9px 13px}
/* 育成シフトにかかっている人件費（＋1人ぶんの上乗せ） */
.pabar .pacell.ik .pak{color:var(--ei)}
.pabar .pacell.ik .pav{color:var(--ei)}

/* 店ごとの細かいポジション（持ち場） */
.posgrp{margin-top:10px}
.posgrp h3{margin:0 0 5px;font-size:12px}
.posgrp h3.kitchen{color:var(--kitInk)} .posgrp h3.hall{color:var(--halInk)}
.poslist{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
.posrow{display:inline-flex;align-items:center;gap:3px;padding:2px 4px 2px 8px;
  border:1px solid var(--sep);border-radius:16px;background:var(--card)}
.posrow input{width:110px;border:0;background:transparent;font-size:12px;font-weight:700;padding:2px 0}
.poslist .none{font-size:11px;color:var(--sub)}
.cell .asgbox .dp{display:block;font-style:normal;font-size:9px;font-weight:700;opacity:.85;line-height:1.2}

/* ログインのキャッチコピー */
.login .catch{margin:12px 0 2px;font-size:17px;font-weight:800;color:var(--accent);line-height:1.5}
.login .catch b{color:var(--ink)}
.login .catch2{margin:0 0 14px;font-size:12.5px;color:var(--sub);line-height:1.7}

/* 左上のホーム（メニューへ戻る） */
.homebtn{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 6px;border:1px solid transparent;
  border-radius:9px;background:transparent;cursor:pointer}
.homebtn:hover{border-color:var(--sep);background:var(--card)}
.homebtn .hb{position:relative;width:16px;height:12px;flex:0 0 auto}
.homebtn .hb::before,.homebtn .hb::after{content:'';position:absolute;left:0;right:0;height:2px;
  border-radius:2px;background:var(--accent)}
.homebtn .hb::before{top:0;box-shadow:0 5px 0 var(--accent)}
.homebtn .hb::after{bottom:0}

/* メニュー1枚 */
.menu{padding:26px 20px 40px;max-width:1000px;margin:0 auto}
.menuhd{margin:0 0 14px;font-size:13px;font-weight:800;color:var(--sub)}
.menugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:16px 18px;border:1px solid var(--sep);border-radius:12px;background:var(--card);
  text-align:left;cursor:pointer}
.mcard:hover{border-color:var(--accent)}
.mcard .mi{font-size:22px;line-height:1.2}
.mcard .mn{font-size:15px;font-weight:800;color:var(--ink)}
.mcard .ms{font-size:11.5px;color:var(--sub);line-height:1.6}
.mcard.soon{opacity:.45;cursor:default;background:var(--bg)}
.mcard.soon:hover{border-color:var(--sep)}
a.mcard{text-decoration:none;color:var(--ink);font:inherit}   /* 外のページへの入口（オーナーだけ）もカードで出す */
.mcard .mtag{position:absolute;top:12px;right:12px;font-size:9.5px;font-weight:800;
  color:var(--sub);border:1px solid var(--sep);border-radius:4px;padding:1px 5px}
.menu .note{margin-top:16px}

/* できる持ち場（◎○×） */
.skill{width:100%;border-collapse:collapse;font-size:12px}
.skill th,.skill td{border-bottom:1px solid var(--sep);padding:4px 6px;text-align:center}
.skill thead th{font-size:10.5px;color:var(--sub);white-space:nowrap;padding:6px}
.skill thead th.kitchen{color:var(--kitInk)} .skill thead th.hall{color:var(--halInk)}
.skill th.stick{position:sticky;left:0;background:var(--card);text-align:left;font-weight:700;
  min-width:120px;z-index:2}
.skill tbody tr:hover th.stick,.skill tbody tr:hover td{background:var(--bg)}
.sk{width:30px;height:26px;padding:0;border:1px solid var(--sep);border-radius:6px;
  background:var(--card);font-size:14px;font-weight:800;color:var(--sub);cursor:pointer}
.sk.lv1{border-color:var(--accent);color:var(--accent)}
.sk.lv2{background:var(--accent);border-color:var(--accent);color:var(--onTheme)}
.sk:hover{border-color:var(--accent)}

/* 埋められなかった枠・時間。日ごとにまとめて、列を揃える */
.holes{margin-top:12px;max-height:56vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.hday{border:1px solid var(--sep);border-radius:9px}
.hday .hd{border-radius:8px 8px 0 0}
.hday .htbl tr:last-child td:first-child{border-radius:0 0 0 8px}
.hday .htbl tr:last-child td:last-child{border-radius:0 0 8px 0}
.hday .hd{display:flex;align-items:baseline;gap:6px;padding:6px 12px;background:var(--bg);
  font-size:13px;font-weight:800;color:var(--ink)}
.hday .hd span{font-size:11px;font-weight:700;color:var(--sub)}
.hday .hd i{font-style:normal;font-size:10px;font-weight:800;color:var(--danger)}
.hday .hd b{margin-left:auto;font-size:11px;color:var(--ei)}
.htbl{width:100%;border-collapse:collapse}
.htbl td{padding:5px 12px;border-top:1px solid var(--sep);font-size:12px;vertical-align:baseline}
.htbl .hp{width:74px;font-weight:800;white-space:nowrap}
.htbl .hp.kitchen{color:var(--kitInk)} .htbl .hp.hall{color:var(--halInk)}
.htbl .ht{width:112px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.htbl .hw{color:var(--sub)}

/* ===== シフト表の全画面（2026-09-07 小泉）＝最終確認は画面いっぱいで見る =====
   ⚠️ 右下のボタンは position:fixed。表を下までスクロールしても入口と出口が消えない。 */
.fsbtn{
  position:fixed; right:20px; bottom:calc(70px + var(--sab)); z-index:80;
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 15px; border:1px solid var(--sep); border-radius:24px;
  background:var(--card); color:var(--ink); font:inherit; font-size:12.5px; font-weight:700;
  box-shadow:0 3px 14px rgba(0,0,0,.18); cursor:pointer;
}
.fsbtn:hover{border-color:var(--accent); color:var(--accent)}
.fshdr{display:inline-flex;align-items:center;gap:5px}
.fshdr .fsic{width:10px;height:10px}
.fsbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fsbtn.on{background:var(--accent); color:var(--onTheme); border-color:var(--accent)}
.fsbtn.on:hover{opacity:.9; color:var(--onTheme)}
.fsic{width:13px; height:13px; border:2px solid currentColor; border-radius:2px; display:block}
.fsx{font-size:15px; line-height:1; display:block}
/* 表そのものを画面いっぱいに。⚠️ 中で縦にも横にもスクロールできるようにする */
.scrollx.full{
  position:fixed; inset:0; z-index:70; margin:0; border:0; border-radius:0;
  max-height:none; height:100vh; height:100dvh; overflow:auto; background:var(--card);
  padding-bottom:76px;                      /* ⚠️ 最後の行が ✖ ボタンに隠れないように */
}
/* 全画面では数字の段（総労働時間・人時売上高・P/A人件費・モデル・キッチン・ホール）を隠す（2026-09-08 小泉） */
.scrollx.full .sumrow.fshide{display:none}

/* ===== 1日ずつ：不足の点滅・応援の跡・休憩の帯（2026-09-07 小泉）===== */
/* ⚠️ **不足している時間帯を赤い蛍光でゆっくり点灯**（小泉指定）。
   目で追わなくても「ここが足りない」が見つかるように。 */
/* ⚠️ **点滅は「透明度」だけを動かす**（2026-09-19）。
   background や box-shadow を動かすと、ブラウザは**毎コマ塗り直す**。横に長い表の中でそれをやると、
   Galaxy Z Fold の実機で**マスの文字だけが消え、スクロールして戻すと出る**ことがあった（小泉報告）。
   透明度だけなら塗り直しが要らない（合成だけで済む）。見え方は同じに合わせてある。 */
@keyframes shortfade{ 0%,100%{ opacity:.32 } 50%{ opacity:1 } }
.gn.short{ color:#7a1414; font-weight:800; background:transparent; isolation:isolate }
.gn.short::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:2px; pointer-events:none;
  background:rgba(255,45,45,.62); box-shadow:inset 0 0 0 1px rgba(255,45,45,.85), 0 0 10px rgba(255,60,60,.55);
  animation:shortfade 2.6s ease-in-out infinite }
:root[data-theme="dark"] .gn.short{ color:#ffd9d9 }
/* ⚠️ 動くものが苦手な人のために、設定で止まるようにする */
@media (prefers-reduced-motion:reduce){
  .gn.short::before{ animation:none; opacity:.68 }
  .chatstage .partnerfigure,.chatstage .partnerbody,.chatstage .partnerface,.chatstage .pblink,.chatstage .pmouthh,.chatstage .pmouth{animation:none!important;transition:none!important;transform:none!important}
  .chatstage .pvideo{transition:none!important}
  .chatstage .chatbg{transition:none!important}
  .chatstage .pblink,.chatstage .pmouthh,.chatstage .pmouth{opacity:0!important}
}

/* ===== 営業時間（2026-09-07 小泉）===== */
.bizlist{display:flex;flex-direction:column;gap:5px;margin:10px 0 4px}
.bizrow{display:flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid var(--sep);
  border-radius:8px;background:var(--card);font-size:12.5px;flex-wrap:wrap}
.bizrow.sp{border-color:var(--ei);background:var(--eiSoft)}
.bizrow.off{opacity:.6}
.bizrow .bizk{font-weight:800;min-width:56px;color:var(--ink)}
.bizrow input[type=time]{border:1px solid var(--sep);border-radius:6px;padding:3px 6px;
  font:inherit;font-size:12.5px;background:var(--card);color:var(--ink)}
.bizrow .bizsep{color:var(--sub)}
.bizrow .bizoff{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--sub);margin-left:auto}
.bizover{font-style:normal;font-size:10px;font-weight:700;color:var(--request);
  background:var(--requestSoft);border-radius:4px;padding:1px 5px}

/* ===== 半月の表：不足の日を光らせる（2026-09-07 小泉）=====
   ⚠️ 横に長い表なので、数字を赤くしただけでは目が滑る。**列の頭**で見つけられるようにする。 */

/* ⚠️ **固定ヘッダーの塗りを半透明にしない。**下の行が透けて文字が重なって読めなくなった。
   不透明な背景は残したまま、点滅は重ねの層（::before）でやる。 */
/* ⚠️ position:relative にすると .grid thead th の sticky が外れ、縦に送ると下の行が透けた（2026-09-08 小泉報告）。
   sticky も「配置された要素」なので ::before の absolute の基準になる＝relative は要らない */
.grid thead th.shortday{ position:sticky; color:var(--danger) }
.grid thead th.shortday::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(255,45,45,.34); box-shadow:inset 0 -2px 0 rgba(255,45,45,.95), 0 0 9px rgba(255,60,60,.42);
  animation:shortfade 2.6s ease-in-out infinite }
.grid thead th.shortday::after{ content:'不足'; position:relative; z-index:1;
  display:block; font-size:9px; font-weight:800; letter-spacing:.04em }
.sumrow b.short.pulse{ position:relative; isolation:isolate; border-radius:4px; padding:0 4px }
.sumrow b.short.pulse::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:4px; pointer-events:none;
  background:rgba(255,45,45,.40); box-shadow:0 0 8px rgba(255,60,60,.45);
  animation:shortfade 2.6s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){
  .grid thead th.shortday::before{ animation:none; opacity:.65 }
  .sumrow b.short.pulse::before{ animation:none; opacity:.5 }
  .helpcell.need::before{ animation:none; opacity:.65 }
}
/* ⚠️ **スマホでは点滅させない**（2026-09-19 小泉報告）。
   Chrome Android は縦に送っている間、固定ヘッダーの中で色が動くと塗り直しが追いつかず、
   **前の絵が残る**。半月の表では、下の行（売上予算・モデル）の文字が固定ヘッダーに重なって見えた。
   色は残して動きだけ止める＝不足はちゃんと赤いまま、表が読める。
   （PC・タブレットのポインタがある環境では今までどおり点滅する） */
@media (hover:none){
  .grid thead th.shortday::before{ animation:none; opacity:.8 }
  .sumrow b.short.pulse::before{ animation:none; opacity:.62 }
  .helpcell.need::before{ animation:none; opacity:.8 }
  .gn.short::before{ animation:none; opacity:.8 }
}

/* ===== 半月の表：一番下の「応援」の行（2026-09-07 小泉）=====
   足りない日をここで見つけて、そのまま頼みに行ける。応援が入ったらここに出る。 */
.grid tr.helphd th{background:var(--requestSoft);color:var(--request)}
.grid tr.helprow th.stick{font-size:11px;font-weight:800;color:var(--request)}
/* ⚠️ **応援のマスは折り返す**（2026-09-11 小泉「マスの幅が崩れてる」）。
   `.grid td` は white-space:nowrap なので、2人以上来る日は名札が横一列に伸びて
   **その日の列だけ広がっていた**（表の幅は内容の最大幅で決まるため。1人の日の約1.9倍）。
   ギグの行（.gigcell）は先に normal にしてあった。応援の行が取り残されていた。 */
.grid td.helpcell{vertical-align:middle;white-space:normal}
.helpcell.need{cursor:pointer;position:relative;isolation:isolate}
.helpcell.need::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(255,45,45,.34); box-shadow:inset 0 -2px 0 rgba(255,45,45,.95), 0 0 9px rgba(255,60,60,.42);
  animation:shortfade 2.6s ease-in-out infinite }
.helpcell.asked,.helpcell.came{cursor:pointer}
.helpneed{display:inline-flex;flex-direction:column;line-height:1.1;font-size:13px;font-weight:800;color:var(--danger)}
.helpneed i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em}
.helpasked{display:inline-flex;flex-direction:column;line-height:1.15;font-size:10.5px;font-weight:800;
  color:var(--request);background:var(--requestSoft);border:1px solid var(--request);border-radius:5px;padding:2px 5px}
.helpasked i{font-style:normal;font-size:11px}
/* ⚠️ **来ている人は縦に積む**（2026-09-11 小泉「マスの幅が崩れてる」）。
   inline-flex のまま横に並べると、2人来た日は名札2つぶんの幅が「その列の最大幅」になり、
   表が広い画面に伸びるときに**その日の列だけ1.9倍**に広がっていた。
   `display:flex`（ブロック）にすると最大幅が名札1つぶんで頭打ちになり、どの列も同じ幅になる。 */
.helpcame{display:flex;flex-direction:column;line-height:1.15;font-size:10.5px;font-weight:800;
  color:var(--halInk);background:var(--halSoft);border:1px solid var(--hal);border-radius:5px;padding:2px 5px;margin:1px}
.helpcell .helpcame+.helpcame{margin-top:2px}
.helpcame i{font-style:normal;font-size:9px;font-weight:700;opacity:.9}
@media (prefers-reduced-motion:reduce){
  .helpcell.need{animation:none;background:rgba(226,58,58,.18)}
}

/* 応援で来ている人の中身（2026-09-07 小泉） */
.hday{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.hdayone{border:1px solid var(--hal);background:var(--halSoft);border-radius:9px;padding:8px 11px}
.hdayname{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--ink)}
.hdaymeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:3px;font-size:11.5px;color:var(--sub)}
.hdaymeta b{color:var(--ink);font-size:13px}
.hdaystore{font-weight:800;color:var(--halInk)}
.hdayreason{margin-top:4px;font-size:11px;color:var(--sub);white-space:pre-wrap}

/* ===== 1日ずつ：名前・ランク・時間の場所を固定する（2026-09-07 小泉）=====
   ⚠️ 同じ枠に流し込んでいたので、文字数で折り返してランクが2行になっていた。 */
.dayaxis,.dayneed,.daystaffrow{grid-template-columns:186px minmax(180px,1fr)}
.daystaff{display:grid;grid-template-columns:1fr 40px;grid-template-areas:"name name" "meta rank" "note note";
  column-gap:6px;row-gap:1px;align-items:center;padding-right:8px}
.daystaffname{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.daystaffrk{grid-area:rank;justify-self:end;min-height:1px}
.daystaffrk .rk{white-space:nowrap}
.daystaffmeta{grid-area:meta;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.daynote{grid-area:note}
/* ⚠️ 狭い幅で 620px の下限を付けると横スクロールになり、名前の欄が画面の外へ出る（2026-09-08 小泉報告・折りたたみ端末）。
   下限をやめ、名前の欄を細くして画面に収める。名前は1行で省略 */
@media (max-width:900px){
  .dayaxis,.dayneed,.daystaffrow{min-width:0;grid-template-columns:118px minmax(220px,1fr)}
  .daystaffname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .daystaffmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
}
/* 途中でポジションが変わるとき、2本のバーの角を内側だけ落とす */
.dayasg.seg1{border-top-right-radius:2px;border-bottom-right-radius:2px}
.dayasg.seg2{border-top-left-radius:2px;border-bottom-left-radius:2px}
.asgbox.split .dp{letter-spacing:-.02em}
.msplit{border-left:2px solid var(--accent);padding-left:9px}
.msplitnote{margin-top:2px}

/* ===== 1日ずつ：バーを直接つかんで時間を変える（2026-09-07 小泉）===== */
.dayasg.drag{cursor:grab}
.dayasg.dragging{cursor:grabbing;z-index:6;filter:brightness(1.06);
  box-shadow:0 3px 12px rgba(0,0,0,.28), inset 0 0 0 1px currentColor}
/* ⚠️ つまみは**広く・いつも見える**ようにする（2026-09-07 小泉「掴んでも反映されない」）。
   11pxでは外しやすく、ホバーまで見えないと掴めることに気づけなかった。 */
.dhandle{position:absolute;top:0;bottom:0;width:18px;z-index:5;cursor:ew-resize;
  display:flex;align-items:center;justify-content:center}
.dhandle.start{left:0}.dhandle.end{right:0}
.dhandle::after{content:'';width:3px;height:14px;border-radius:2px;
  background:currentColor;opacity:.42;transition:opacity .12s,height .12s}
.dayasg:hover .dhandle::after,.dayasg.dragging .dhandle::after{opacity:.9;height:18px}
/* ⚠️ ラベルがつまみの上に乗らないように、左右にどける */
.dayasg .dayasgt{padding-left:12px;padding-right:12px}

/* ===== ギグワーカーの緊急用応援枠（2026-09-07 小泉）===== */
.grid tr.gigrow th.stick{font-size:11px;font-weight:800;color:var(--ei)}
/* ⚠️ ここも `.grid td`（詳しさ 0,1,1）より弱い `.gigcell`（0,1,0）だったので
   nowrap が勝ったまま効いていなかった（2026-09-11）。td を付けて勝たせる。 */
.grid td.gigcell{vertical-align:middle;white-space:normal}
.gigcell.gap .gigadd{border-color:var(--danger);color:var(--danger)}
.gigbox{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;
  color:var(--ei);background:var(--eiSoft);border:1px solid var(--ei);border-radius:5px;
  padding:1px 5px;margin:1px;cursor:pointer;white-space:nowrap}
.gigbox:hover{filter:brightness(.96)}
.gigbox.g-kitchen{color:var(--kitInk);border-color:var(--kit);background:var(--kitSoft)}
.gigbox.g-hall{color:var(--halInk);border-color:var(--hal);background:var(--halSoft)}
.gigbox.plan{border-style:dashed}
.gigbox .gp{font-style:normal;font-size:9px;opacity:.85}
.gigadd{display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;
  padding:0;margin:1px;border:1px dashed var(--sep);border-radius:5px;background:transparent;
  color:var(--sub);font-size:13px;line-height:1;cursor:pointer}
.gigadd:hover{border-color:var(--ei);color:var(--ei)}
.mbtns .danger{color:var(--danger);border-color:var(--danger)}

/* 枠の「途中で変わる」／営業時間のコピー（2026-09-07 小泉） */
.gsw{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:10.5px;color:var(--sub)}
.gset input[type=time]{font-size:11px;padding:1px 3px;border:1px solid var(--sep);border-radius:5px;
  background:var(--card);color:var(--ink);margin:0 2px}
.bizcopy{border:1px solid var(--sep);background:var(--card);color:var(--sub);border-radius:6px;
  font:inherit;font-size:10.5px;font-weight:700;padding:2px 8px;cursor:pointer}
.bizcopy:hover{border-color:var(--accent);color:var(--accent)}
.bizpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:10px 0 4px}
.bizpick label{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--sep);
  border-radius:8px;background:var(--card);font-size:12.5px;cursor:pointer}
.bizpick label b{font-weight:800;min-width:44px}
.bizpick label i{font-style:normal;font-size:11px;color:var(--sub);margin-left:auto}

/* ライト／ダークの切り替え（ヘッダー右）。押すたびに 自動→ライト→ダーク→自動 */
.themebtn{ display:inline-flex; align-items:center; gap:5px; padding:7px 10px; font-size:12px; white-space:nowrap }
.themebtn .themeic{ flex:none }

/* できる持ち場：店ごとのまとまり（自店→他店・2026-09-08 小泉） */
.skill thead th.grp{font-size:10.5px;font-weight:800;color:var(--sub);border-bottom:0;border-left:2px solid var(--sep);text-align:left;padding:4px 8px 0}
.skill thead th.grp.mine{color:var(--accent)}
.skill td.other{background:var(--surface-2,var(--bg))}
/* 応援の依頼：同じ日にもう1件／別の日を足す（2026-09-08 小泉） */
.helpreqline .helpcheck{flex-wrap:wrap;gap:4px 6px}
.helppos{font-size:12px;padding:3px 6px;margin-left:2px}
.helpmore{font-size:11px;padding:3px 8px;margin-left:2px;white-space:nowrap}
.helpdel{font-size:12px;padding:3px 8px;margin-left:4px;color:var(--danger)}
.helpaddnew{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--sep)}
/* 営業時間：保存ボタン（都度保存をやめた・2026-09-08 小泉） */
.bizsave{display:flex;align-items:center;gap:10px;margin-top:6px}
.bizsave .note{margin:0}

/* 年間予定と天気（2026-09-08 小泉） */
.grid thead th em.wx{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:var(--sub);line-height:1.2;margin-top:1px}
.grid thead th em.wx span{margin-left:2px;font-variant-numeric:tabular-nums}
.grid .evrow th,.grid .evrow td{background:var(--requestSoft);color:var(--request);font-weight:600;white-space:normal;vertical-align:top;padding:3px 4px}

/* ===== シフトメモ（2026-09-11 小泉「各マスに表示されるようにしたい」）=====
   ⚠️ 上段に1行足す形はやめ、**マスの中**に出す。調整の理由（reason）とは別もの。
   ⚠️ **幅を必ず頭打ちにする。**表の列幅は中身の最大幅で決まるので、長い文を素で入れると
   その日の列だけ広がる（応援の名札で起きた不具合と同じ理屈）。
   `width:0` で幅の計算に効かせず、`min-width:100%` でマスいっぱいに広げる。 */
/* ⚠️ ここも `-webkit-box` をやめ、高さで切る（2行＝9.5px × 1.25 × 2）。req-note と同じ理由（2026-09-19） */
.cell .cmemo{display:block;max-height:24px;overflow:hidden;
  width:0;min-width:100%;max-width:100%;box-sizing:border-box;margin-top:2px;padding:1px 3px;
  border-radius:4px;background:var(--eiSoft);color:var(--ei);font-size:9.5px;line-height:1.25;
  font-weight:700;text-align:left;overflow-wrap:anywhere}
/* モーダルの中のシフトメモ。調整のメモ（.mreason）と見た目で分ける */
.cmemobox{margin-top:14px;padding:10px 12px;border:1px solid var(--ei);border-radius:10px;background:var(--eiSoft)}
.cmemobox label{display:block;font-size:11.5px;font-weight:800;color:var(--ei);letter-spacing:.04em;margin-bottom:5px}
.cmemobox input{width:100%;padding:8px 10px;border:1px solid var(--sep);border-radius:8px;
  background:var(--card);color:var(--ink);font:inherit;font-size:13px;box-sizing:border-box}
.cmemobox .note{margin:6px 0 0}
/* シフトの詳細：応援に回す／所属店に戻す（2026-09-14） */
.mhelpmove{margin-top:14px;padding:10px 12px;border:1px solid var(--sep);border-radius:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.mhelpmove label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:800;flex:1 1 220px}
.mhelpmove select{padding:7px 8px;border:1px solid var(--sep);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:13px}
.mhelpmove .note{flex-basis:100%;margin:2px 0 0}
.mhelpmove.away{margin:8px 0 0;align-items:center;font-size:13px}

.grid .evrow th.stick{color:var(--request)}
/* 手書きの予定（2026-09-14） */
.grid .memorow th,.grid .memorow td{background:var(--eiSoft);color:var(--ei)}
.grid .memorow th.stick{color:var(--ei)}
.grid .memorow td.dmemo{cursor:text;min-width:0}
.grid .memorow td.dmemo .addhint{opacity:.35}
.dmemo-in{width:100%;min-width:90px;box-sizing:border-box;font:inherit;font-size:11px;padding:2px 4px;border:1px solid var(--ei);border-radius:4px;background:var(--card);color:var(--ink)}
/* 手書きの予定を窓で出す（2026-09-25 重松「全文表示できるように」）。⚠️ 16px＝iOSで触っても画面が拡大しない */
.dmemo-ta{width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.5;padding:8px 10px;border:1px solid var(--ei);border-radius:8px;background:var(--card);color:var(--ink);resize:vertical}
.dmemo-day{cursor:text}
/* ===== 時間帯の空き（本数は足りるが、ある時間帯だけ人がいない）＝セルに小さな⚠️だけ（2026-09-08 小泉）=====
   青の点灯・下線はやめた（「あまり表示されても目障り。最小限に」）。中身はツールチップ、押すとその日の1日ずつへ */
/* ⚠️ は数字の右に**浮かせる**＝数字の縦位置をずらさない（2026-09-08 小泉「数字の縦位置を⚠️がつくことでずらさないで」） */
.grid .sumrow.hc td{ position:relative }
.grid .sumrow.hc td .bandmark{ font-style:normal; font-size:9px; cursor:pointer; opacity:.85; line-height:1;
  position:absolute; right:3px; top:50%; transform:translateY(-50%) }
.grid .sumrow.hc td .bandmark:hover{ opacity:1 }

/* 1日ずつ：応援と Timee／タレントプールの段（2026-09-08 小泉） */
.dayhelpline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;padding:2px 0 2px 10px}
.dayhelpnone{color:var(--sub)}
.dayhelpline .helpneed{color:var(--danger);font-weight:800}
.dayhelpline .helpasked{color:var(--request);font-weight:800}
.dayhelpline .helpcame{color:var(--ok);font-weight:800}
.dayhelpline button.sm{padding:4px 9px;font-size:11.5px}
.daystaffrow.gig .daystaffname .gigadd{margin-left:6px;padding:0 7px;font-size:12px;line-height:1.5;border-radius:6px}
.dayasg.gig{border-style:dashed;cursor:pointer}
.dayasg.gig.plan{opacity:.75}

/* 自動生成の自己点検で直したこと（2026-09-08 小泉） */
.fixes{margin:6px 0 14px;display:flex;flex-direction:column;gap:6px}
.fixday{font-size:12px}
.fixday b{display:block;margin-bottom:2px}
.fixline{padding-left:10px;color:var(--sub)}

/* 自店のスタッフへの追加シフトの依頼（2026-09-08 小泉） */
.extralist{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.extraline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border:1px solid var(--request);border-radius:8px;background:var(--requestSoft);font-size:12px}
.extraline .extrares{color:var(--request);font-weight:700}
.extraline button.sm{padding:3px 8px;font-size:11px}
.extrastat{font-size:12px;font-weight:800;color:var(--request)}
/* 日付のマス＝押すとその日の1日ずつへ（2026-09-08 小泉） */
.grid thead th.dayjump{cursor:pointer}
.grid thead th.dayjump:hover{color:var(--accent)}
.helpreqline.change{border-left:3px solid var(--request)}
.helpreqline .chgwho{font-size:12px;font-weight:700;color:var(--request)}
.dayneed .shortmin{cursor:pointer}
.dayneed .shortmin.prep{margin-left:4px}

.msep .msrc{margin-left:5px;font-style:normal;font-size:10px;padding:0 5px;border-radius:8px;background:var(--accentSoft);color:var(--accent);font-weight:800}

/* ===== スマホ最適化（2026-09-15 小泉指示）=====
   「PC最適化（2026-09-06）」の続き。⚠️ **ホーム画面から開いた iPhone が主**（ブラウザのタブではない）。
   小泉のスマホの実物（数値タブ）で出ていた5つを直す。
   ① ステータスバーの時刻が「Hoppin シフト」に重なる  → セーフエリア（上の :root の --sat）
   ② 「ログアウト」が1文字ずつ縦に折れる        → 右側のかたまりを丸ごと2段目へ落とす
   ③ 入力欄に触ると画面が勝手に拡大する         → iOSは16px未満の入力欄で拡大する。スマホだけ16px
   ④ 右下の小さなチャット窓が「保存」を隠す      → スマホでは顔だけの丸にする（名前は出さない）
   ⑤ 表の下が切れる                            → 100vh ではなく 100dvh（上の各所）
   ⚠️ シフト表（日×人のマス）の詰め方はここには入れていない。実物の画面を見てから。 */
@media (max-width:640px){
  /* ⚠️ 見出しは**1段**に収める（2026-09-15 小泉「ログアウトボタンの影響で縦に広すぎる」）。
     縦に伸びていたのは、右のかたまり（店＋操作）が1行に入らず2段目に落ちていたため。
     ☰（メニューへ戻る）・店の名前・操作は残し、**落とすのは「Hoppin シフト シフト」の字だけ**。
     ⚠️ 縮んでよいのは店の選択だけ（min-width:0）。ボタンを縮めると文字が1文字ずつ縦に折れる。 */
  .hdr{flex-wrap:nowrap;gap:6px;padding:5px calc(10px + var(--sar)) 5px calc(10px + var(--sal));padding-top:calc(5px + var(--sat))}
  .homebtn{flex:0 0 auto;padding:4px 4px 4px 2px;gap:0}
  .hdr .brand{display:none}   /* ヘッダーだけ。ログインの .brand.big は隠さない（2026-10-30・スマホでロゴが消えていた） */
  .hdr-right{flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
  .hdr-right select{flex:1 1 auto;min-width:0;padding:6px 8px}
  .hdr-right button{flex:0 0 auto;white-space:nowrap;padding:7px 9px;font-size:13px}
  .themebtn span{display:none}   /* ◑ の印だけにする（「自動」の字は落とす） */
  /* ⚠️ レーザーポインタは会議でPCの画面を映すための道具＝指で触る端末では意味がない。
     隠したぶんを店の名前に回す（「001 チュウノジョウ」が切れていた） */
  .laserbtn{display:none}

  .tabs{padding:4px 10px 0;gap:2px}
  .tabs button{padding:9px 11px;font-size:13.5px}

  /* ③ iOSは font-size が16px未満の入力欄に触れると画面を拡大し、戻してくれない。
     ⚠️ select は外す（拡大しないうえ、大きくすると店の名前を出す幅が足りなくなる） */
  input,textarea{font-size:16px}
  .chatin textarea{font-size:16px}
  .mrow input[type=number],.asg-f input[type=number]{width:78px}
  .fintable .finratecell{width:74px}

  /* 数値タブ：サブタブを小さく、月の送りと「シフトに聞く」を同じ段に置く（1段ぶん詰める） */
  .finhead{margin:8px 10px 0;gap:8px}
  .finsubs{width:100%;gap:5px}
  .finsubs button{padding:6px 10px;font-size:12.5px}
  .finmonth{width:auto;flex:1 1 auto;justify-content:flex-start;gap:2px}
  .finmonth b{min-width:0;flex:1 1 auto;font-size:15px}
  .finmonth button{padding:7px 13px}
  .finhead .finchatgo{padding:8px 11px;font-size:13px}

  /* 大きな数字は1枚ずつ縦に。横に2枚だと金額が切れる */
  .finbig{gap:10px}
  .finbig>div{flex:1 1 100%;padding:11px 13px}
  .finbig b{font-size:26px}
  .finbar>div{width:100%}
  /* ⚠️ ボタンは左から並べる。右端に置くと、右下に浮いているチャットの丸が「保存」に重なる */
  .finbar>div:last-child{justify-content:flex-start}

  /* 表：日付の列（左に貼り付く列）が画面の半分を食っていた。見出しと入力欄はそのまま */
  .fintablewrap{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  .fintable th,.fintable td{padding:7px 8px}
  .fintable .finstick{min-width:104px}
  .fintable.budget col.bdc-day{width:110px}
  .fintable.pl col.plc-name{width:150px}

  /* モーダル＝画面いっぱいに近づける。ボタンは指で押せる高さに */
  .modal .box{padding:16px 14px}
  .mbtns button{padding:10px 14px}

  /* ④ 右下の窓は顔だけの丸。⚠️ 名前を出すと、その下にある「保存」を隠す */
  .chatmini{right:10px;bottom:calc(10px + var(--sab));max-width:none;padding:3px;gap:0}
  .chatmini-t,.chatmini-open{display:none}
  .chatmini-face,.chatmini-ic{width:42px;height:42px}
  .chatbtn{right:12px;bottom:calc(12px + var(--sab));padding:9px 14px;font-size:12px}
  .fsbtn{right:12px;bottom:calc(64px + var(--sab))}
}

/* ===== スマホ最適化（つづき）＝シフトの画面と、共通の余白（2026-09-15）=====
   ⚠️ **PCの見え方は変えない**（小泉 2026-09-15「パソコン画面の見え方は変えずに」）。
   したがって全部 `max-width:640px` の中だけで完結させる。 */
@media (max-width:640px){
  /* 左右20pxの余白は、390pxの画面では40px＝1割を捨てている。10pxに詰めて表に回す */
  .panel,.empty,.actions,.warn,.bar,.foot,.helppanel,.otbar,.pabar,.viewtoggle,.daynav,.daysplit,
  .scrollx:not(.full){margin-left:10px;margin-right:10px}
  .helpalert{margin-left:10px;margin-right:10px;width:calc(100% - 20px)}
  .cycbar,.pickhd,.picker,.periodpick{padding-left:10px;padding-right:10px}
  .panel.wide h2,.panel.wide>.note{padding-left:12px;padding-right:12px}
  .panel{padding:14px 12px}

  /* シフト表（日×人）：名前の列とマスを詰める。150+84 だと1画面に1日半しか出ない */
  .grid .stick{min-width:116px}
  .cell{min-width:78px}
  .grid th,.grid td{padding:3px 4px}
  .nameth .nm{font-size:12px}
  .grid .nameth.hasord .nm,.grid .nameth.hasord .sub{padding-left:17px}
  /* ⚠️ 名前の列の幅を決めているのは「時間＋採用率＋ランク」を1行に並べている段（実測163px）。
     折り返しを許すと116pxまで縮み、出る日数が 2.6日 → 3.5日 になる。
     ⚠️ 縦は伸びない（マスの高さのほうが高い）。時間が左・ランクが右端の関係も保つ。 */
  .nameth .sub{flex-wrap:wrap;row-gap:0}

  /* 「半月の表／1日ずつ」は横いっぱいに割る＝指で押せる大きさに */
  .viewtoggle button{min-width:0;flex:1 1 0;padding:10px 6px}
  .daynav button{width:46px;padding:8px}

  /* 浮いているボタンは小さく（表の上に乗る面積を減らす） */
  .fsbtn{padding:8px 12px;font-size:12px}

  /* 週報：答えの欄は字の大きさを個別に決めているので、上の `input,textarea` では負ける。
     ⚠️ アプリの中でいちばん文字を打つ場所なので、ここは確実に16pxにする（触ると拡大して戻らない） */
  .wkq-item textarea,.wkbody,.wkl textarea,.daysection.daynote textarea,.partner-maker textarea{font-size:16px}
  /* 「今月のテーマ」の欄は1行ぜんぶ使う（インラインの flex:1 には min-width で勝てる） */
  .finbar>.wkl{min-width:100%}
  .wksec,.wkfacts{max-width:none}
  /* モデルシフトの設定の欄＝幅340px固定。390pxの画面でははみ出す */
  .gset{flex:1 1 100%}

  /* 1日ずつ：横に並べる余裕は無いので、確実に1枚ずつ縦に */
  .daysplit{grid-template-columns:1fr;gap:10px}
  .daycard{padding:10px 8px}
  .daycard .dayreason{height:11em}
}

/* ===== 1日のうちに店をまたぐ（2026-09-16 小泉「昼間12:00〜16:00までネコシャク／17:00〜23:00まで足るを知る」）=====
   ⚠️ 「応援に回す」＝1日まるごと動かす、とは別もの。こちらは**同じ日に2つの店**に立つ。
   行き先の店のシフト表に入るので、この店の人件費・必要人数には入らない＝**居ない時間**として見せる。 */
.cell .xstag{display:block;font-size:9px;line-height:1.4;font-weight:800;color:var(--request);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 応援先で時間を変えられた行（2026-09-29） */
.cell .xstag.moved{color:var(--warn,#a9761a)}
.mxstore{margin-top:14px;padding:10px 12px;border:1px solid var(--request);border-radius:10px;background:var(--requestSoft)}
.mxstore .xshd{display:block;font-size:13px;margin-bottom:6px;color:var(--request)}
.mxstore .note{margin-top:6px}
.xsrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;padding:4px 0}
.xsrow b{font-weight:800}
.xsrow span{font-variant-numeric:tabular-nums;color:var(--sub);font-weight:700}
.xsrow button.sm{padding:3px 9px;font-size:11px}
.xsadd{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.xsadd label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--sub);font-weight:700}
.xsadd label span{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:400}
.xsadd input[type=number]{width:64px}
/* 1日ずつ：他店の時間は点線のグレー（押せない） */
.dayasg.xstore{border-style:dashed;border-color:var(--sub);background:var(--ngSoft);color:var(--sub);
  box-shadow:none;cursor:default;opacity:.85}

/* ===== 日の列を等幅に（2026-09-18 小泉「微妙にマスの幅が違う」）。colgroup は app.js の eqCols() ===== */
.grid.eq{--stickw:150px;--cellw:84px;table-layout:fixed;width:100%;
  min-width:calc(var(--stickw) + var(--ncol, 15) * var(--cellw))}
.grid.eq col.stickc{width:var(--stickw)}
.grid.eq .cell{min-width:0}
.grid.eq td.cell > *{max-width:100%;box-sizing:border-box}
.grid.eq .cell .asgbox,.grid.eq .gigbox{overflow:hidden;text-overflow:ellipsis}
@media (min-width:1600px){ .grid.eq{--stickw:170px;--cellw:96px} }
@media (min-width:1900px){ .grid.eq{--cellw:108px} }

/* 予定の全文（2026-09-18 小泉）。マスを押すと出る */
.grid .evrow td.evcell{cursor:pointer}
.grid .evrow td.evcell:hover{filter:brightness(.96)}
.evfull{display:flex;flex-direction:column;gap:8px}
.evfullone{padding:10px 12px;border:1px solid var(--sep);border-radius:10px;background:var(--requestSoft)}
.evfullttl{font-size:14px;font-weight:800;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.evfullgrp{display:inline-block;margin-right:6px;padding:0 6px;border-radius:4px;font-size:11px;background:var(--card);color:var(--request);border:1px solid currentColor;vertical-align:1px}
.evfullmeta{margin-top:3px;font-size:12px;color:var(--sub)}
/* 名前の列は幅が固定（.grid.eq）なので、長い名前は折り返す（2026-09-18 小泉「名前がはみ出てる」） */
.grid.eq th.stick{white-space:normal;overflow-wrap:anywhere}

/* 全店の余剰（2026-09-18 小泉）。＋＝余剰（緑）／−＝不足（赤） */
.grid tr.surplushd th{background:var(--okSoft,#e8f5ee);color:var(--ok,#2e7d4f)}
.grid tr.surplushd td{background:var(--okSoft,#e8f5ee)}
.grid tr.surplusrow th.stick{font-size:11px;font-weight:800;color:var(--ok,#2e7d4f)}
.grid td.surpcell{white-space:normal;vertical-align:middle;line-height:1.2}
.grid td.surpcell b{display:block;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.grid td.surpcell i{display:block;font-style:normal;font-size:9.5px;color:var(--sub)}
.grid td.surpcell.plus b{color:var(--ok,#2e7d4f)}
.grid td.surpcell.minus b{color:var(--danger)}
.grid td.surpcell.even b{color:var(--sub)}
.grid td.surpcell .surpzero{color:var(--sep);font-size:11px}
.surph{margin:14px 0 6px;font-size:13px;font-weight:800}
.surph span{margin-left:6px;font-size:11px;font-weight:600;color:var(--sub)}
.surplist{display:flex;flex-direction:column;gap:6px}
.surpstore{padding:8px 10px;border:1px solid var(--sep);border-radius:10px}
.surpsn{display:flex;justify-content:space-between;font-weight:800;font-size:13px;margin-bottom:4px}
.surpone{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;padding:2px 0}
.surpone i{font-style:normal;color:var(--sub);font-size:11.5px;font-variant-numeric:tabular-nums}
.surpone .rk{margin-left:6px}

/* 他店のシフトを見るだけのとき（2026-09-18）。どの店を見ているか・押しても保存されないことを出しっぱなしにする */
.viewonlybar{position:sticky;top:0;z-index:60;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 20px 0;padding:8px 12px;
  border:1px solid var(--ei);border-radius:10px;background:var(--eiSoft);color:var(--ink);font-size:13px}
.viewonlybar span{color:var(--sub);font-size:12px}
.viewonlybar button{margin-left:auto;padding:4px 10px;font-size:12px}

/* 名前の列：出勤日数（確定だけ）をランクの上に小さく（2026-09-18） */
.nameth .rkcol{display:inline-flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.1;margin-left:auto}
.nameth .wdays{font-size:9.5px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.nameth .adopt + .rkcol{margin-left:0}

/* まだ下書きが無い期間（2026-09-18）。自動生成へ誘導する帯と、ボタンの呼吸 */
.buildfirstbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0;padding:10px 14px;border:2px solid var(--accent);border-radius:12px;background:var(--accentSoft);color:var(--ink);font-size:13.5px}
.buildfirstbar span{color:var(--sub);font-size:12px;flex:1 1 320px}
.buildfirstbar button{margin-left:auto}
button.buildfirst{animation:buildpulse 1.6s ease-in-out infinite}
@keyframes buildpulse{0%,100%{box-shadow:0 0 0 0 rgba(31,74,122,.45)}50%{box-shadow:0 0 0 6px rgba(31,74,122,0)}}
@media (prefers-reduced-motion:reduce){button.buildfirst{animation:none}}
.bar button.fix[disabled]{opacity:.45;cursor:not-allowed}
.nameth .wdays.bonus{color:var(--ok);font-weight:800}

/* 週報：報告の押し忘れを防ぐ帯とポップアップ（2026-09-20 小泉「最後にここを押して報告して下さい とポップアップか何かで目立つように」）
   ⚠️ 「提出」＝数字と文章を残すだけ／「提出して報告する」＝Slackへ届く。分かれているのを気づかせるための赤。 */
.wkcta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 0;padding:14px 16px;
  border:2px solid var(--danger);border-radius:12px;background:var(--card)}
.wkcta .wkcta-t{flex:1;min-width:210px}
.wkcta b{display:block;font-size:15px;font-weight:800;color:var(--danger);letter-spacing:.01em}
.wkcta span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--sub)}
.wkcta button{font-size:15px;padding:12px 20px}
.wkcta:not(.done) button{animation:wkctapulse 2s ease-in-out infinite}
@keyframes wkctapulse{0%,100%{box-shadow:0 0 0 0 rgba(178,59,59,.42)}50%{box-shadow:0 0 0 9px rgba(178,59,59,0)}}
.wkcta.done{border-color:var(--ok)}
.wkcta.done b{color:var(--ok)}
.wkcta.done b::before{content:"✅ "}
@media (prefers-reduced-motion:reduce){ .wkcta button{animation:none} }
.wkctam .box h2{margin:0 0 8px;font-size:17px}
/* Hoppin visual tokens */
:root{--accent:var(--theme);--accentSoft:var(--themeSoft);--r:18px}
:root[data-theme="dark"]{--onTheme:#10151b;--bg:#18271d;--card:#26392b;--sep:#405747;--ink:#f2f5eb;--sub:#c6d4c2;--accent:#9ad5ad;--accentSoft:#344d39;--theme:#9ad5ad;--themeSoft:#344d39;--edge:#173e2d;--r:18px}
body{font-family:"Zen Kaku Gothic New",-apple-system,"Hiragino Sans",sans-serif}
button.primary{box-shadow:0 4px 0 var(--edge);border-radius:var(--r)}button.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.matrix td,.matrix th{font-size:12px}
.hoppin-logo{width:120px;height:42px;object-fit:contain;vertical-align:middle}
.brand.big .hoppin-logo{width:180px;height:65px}
.shortage-items{display:grid;gap:8px}.shortage-item{display:grid;grid-template-columns:110px 100px 130px 1fr;gap:12px;align-items:center;border-left:4px solid var(--danger);padding:10px;background:var(--card);border-radius:8px;font-size:13px}
@media(max-width:640px){.shortage-item{grid-template-columns:1fr 1fr}.shortage-item span:last-child{grid-column:1/-1}}

/* 「シフト」のワードマーク（案D＝ロゴの弟分・Codex 2026-10-30・小泉「テイストはロゴに寄せて」）。SVG 60×26 を幅で拡縮 */
.brand .shift-mark,.shift-mark{display:inline-flex;align-items:center;flex:0 0 auto;width:60px;max-width:60px;line-height:0;vertical-align:middle;--mark-edge:#fffdf4;--mark-shadow:#155c35}
.brand .shift-mark{margin-left:6px}.shift-mark.is-nav{width:60px}.shift-mark.is-hdr{width:48px}.shift-mark.is-login{width:60px}
.shift-mark svg{display:block;width:100%;height:auto;overflow:visible}
.shift-mark .mark-letters{font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:17px;font-weight:800;letter-spacing:0;stroke:var(--mark-edge);stroke-width:2.8px;stroke-linejoin:round;paint-order:stroke fill;filter:drop-shadow(0 1px 0 var(--mark-shadow))}
.shift-mark .mark-spark{fill:none;stroke:#ffcf54;stroke-width:2.4px;stroke-linecap:round}
[data-theme="dark"] .shift-mark{--mark-edge:#e8f4df}
[data-theme="dark"] .shift-mark .mark-letters{filter:none}