/* =====================================================
rakushift — やさしいシフト作成 デザインシステム
方針: 白基調・ティールブランド・大きな操作ターゲット・
カードレイアウト・パレットで「選んで塗る」操作
===================================================== */
/* [2026-09-08 羽田野さん決定] 本文書体を Noto Sans JP（400/700）へ戻し、製品側の assets/fonts/ に同梱した実ファイルを読む
（D-24: 同梱した実ファイルと汎用名だけを指定・実行時の外部読み込みなし）。?v=740〜761 は LP 同梱の BIZ UDPGothic を
参照していたが、BIZ UDPGothic は既定の行間が文字の1.02倍で、行間未指定の箇所（ラジオの行・ラベルの折り返し・表のセル）が
詰まった（Noto Sans JP の既定は1.42倍）。行間は書体の既定に任せず body の line-height: 1.45 で数値固定する
（Safari は同じ書体でも既定の行間を別の値で計算するため）。docs/rakushift-guide.html も同じ書体。LP（lp/）は BIZ UDPGothic のまま。 */
@import url("../assets/fonts/fonts.css");
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: "Noto Sans JP", sans-serif;
line-height: 1.45;
font-size: 15px; color: var(--ink); background: var(--bg);
-webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: default; } /* 押せない状態にpointerを見せない（D-20。.btn:disabledのnot-allowedが優先される） */
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:root {
/* 地色・ネイティブ部品（ラジオ/チェック/セレクト/スクロールバー）をOSダークモードに引きずられず常にライトで描画する [D-19]。
これがないと dark 環境でラジオON色が濃い緑・枠線が黒く見える（トグルは自作divのため影響を受けず不一致になっていた） */
color-scheme: light;
--bg: #f4f6f8;
--surface: #ffffff;
--ink: #4c4c4c; /* 本文ダークグレー（ロゴ準拠） */
--ink-soft: #6b6b6b;
--ink-faint: #9a9a9a;
--brand: #67b371; /* ブランドグリーン（主ボタン・アクティブ） */
--brand-strong: #4f9a5b; /* 緑の濃トーン */
--brand-soft: #e8f4ea; /* 緑の淡トーン（背景） */
--brand-ring: #bfe0c5; /* 緑の淡トーン（フォーカスリング） */
--accent: #ee9444; /* オレンジ（差し色・使いすぎない） */
--accent-soft: #fdeedd; /* 暖色淡トーン */
--danger: #d83a3a;
--danger-soft: #fdecec;
--info: #2563eb;
--info-soft: #e8effd;
--ok: #1a8b46;
--ok-soft: #e7f6ec;
/* 違反グループ「設定元」バッジ用の淡色トーン4組（D-05: 真緑・純黒・派手な紫〜青グラデーションは使わない）[はた指示 2026-07-29] */
--teal: #0f7d7a; --teal-soft: #e1f2f1;
--tan: #92672e; --tan-soft: #f5ecda;
--plum: #a1447a; --plum-soft: #f8e8f0;
--slate: #4d5f8a; --slate-soft: #e8ecf6;
/* オンコール対応者のマスに出す青枠 [はた指示 2026-08-07 オンコール対応]。
選択枠の --info（#2563eb・鮮やかな青）とは別色にして取り違えを防ぐ。D-05（落ち着いた色）に合わせた濃い青。 */
--oncall: #1f5f8b;
--line: #e2e8ee;
--line-soft: #edf1f5;
--zebra: #eef3f0; /* シフト表の行ストライプ（視認性を少し上げた） */
--shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
--shadow-lg: 0 8px 30px rgba(16,24,40,.16);
--r-card: 16px; --r-ui: 10px; --r-pill: 999px;
/* シフト記号の文字色（チップ廃止・文字色のみ）: 休み=赤字／出勤=黒字 [はた 2026-07-03] */
--sym-work-tx: #1f2933; /* 出勤系（早/日/遅/夜/明/半/その他） */
--sym-rest-tx: #c0392b; /* 休み系（法定休日/有休/固定休/代休） */
--sym-off2-tx: #9c5b2f; /* 法定外休日: 休み系の同系色だが法定休日（赤字）と判別できる落ち着いた茶系 [休日再編 段階A・はた 2026-07-16] */
--sym-nightoff-tx: #5b6f8a; /* 夜勤明け休日: 法定休日に近い落ち着いた青灰（画面/Excel/印刷で同じ色・羽田野さん承認 §7-4 案A 2026-08-18） */
}
/* ---------- アプリ全体レイアウト（トップナビ型） ---------- */
#app { min-height: 100vh; display: flex; flex-direction: column; }
.topnav {
background: var(--surface); border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 6px; padding: 0 18px;
min-height: 72px; position: sticky; top: 0; z-index: 60;
}
.topnav.mode-admin { box-shadow: inset 0 3px 0 #4338ca; }
.brand2 { display: flex; align-items: center; gap: 9px; margin-right: 16px; cursor: pointer; flex-shrink: 0; }
.brand2 .brand-logo { height: 22px; width: auto; display: block; } /* 横組みロゴ（余白トリム済み）。README の最小幅140pxを満たす高さ [あつらえシフト新ロゴ 2026-09-11] */
.brand2 .nm { font-size: 18px; font-weight: 800; letter-spacing: .2px; }
.brand2 .nm small { display: block; font-size: 10px; font-weight: 600; color: var(--ink-faint); letter-spacing: .4px; }
.brand2:hover { opacity: .8; } /* ロゴはクリックでシフト一覧へ＝押せる要素はホバーで変化（D-20 横展開 2026-08-01） */
.nav-tabs { display: flex; gap: 2px; height: 100%; }
.nav-tab {
display: flex; align-items: center; gap: 7px; padding: 4px 16px 10px; height: 100%;
border: none; background: none; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.nav-tab:hover { background: var(--line-soft); color: var(--ink); }
.nav-tab.active { color: var(--brand-strong); border-bottom-color: var(--brand); background: var(--brand-soft); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fac-pill {
display: flex; align-items: center; gap: 6px; background: var(--line-soft); border-radius: var(--r-pill);
padding: 6px 14px; font-size: 12.5px; color: var(--ink-soft); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 複数事業所に所属している人の事業所切替ボタン（クリックでメニュー） */
.fac-pill-btn { cursor: pointer; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; }
.fac-pill-btn:hover { background: var(--line-soft); }
.fac-pill-btn .fp-name { overflow: hidden; text-overflow: ellipsis; }
.user-chip {
display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface);
border-radius: var(--r-pill); padding: 5px 12px 5px 6px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.user-chip:hover { background: var(--line-soft); }
.user-chip .avatar {
width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.user-chip .uc-name { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.user-chip .uc-name small { font-size: 10px; font-weight: 600; color: var(--ink-faint); }
.mode-badge { background: #eef2ff; color: #4338ca; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); }
.main2 { flex: 1; }
/* max-widthのmin(…,100%): 親がブロックのうちは無害な保険。親（.main2・.sysadmin-shell）を縦flexに変えると
margin:0 auto で幅がfit-content算出になり、中身のmin-contentが画面幅を超えるとページごと横にはみ出す
（#app直下のui-wish/ui-hearingで実際に起きた機構＝D-09）。min()はその再発を構造ごと封じる [はた指示 2026-08-03] */
.page2 { max-width: min(1320px, 100%); margin: 0 auto; padding: 28px 26px 90px; }
.page2.wide { max-width: min(1560px, 100%); }
/* ページ見出し行 */
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 800; letter-spacing: .2px; }
.page-head .sub { color: var(--ink-faint); font-size: 13px; }
.page-head .sp { flex: 1; }
.sec-h { font-size: 16px; font-weight: 800; color: var(--ink); margin: 24px 0 12px; display: flex; align-items: center; gap: 8px; } /* card-hの16pxと揃える（D-46）[はた指摘 2026-08-16] */
.sec-h .hint { font-weight: 500; }
/* タブ本体（card2）の先頭に来るセクション見出しは上marginを消し、card-h始まりのタブとタイトル開始位置を揃える（D-61）[はた指摘 2026-08-16] */
.card2 > .sec-h:first-child { margin-top: 0; }
/* ---------- カード ---------- */
.card2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 22px 24px; }
.card2 + .card2 { margin-top: 18px; }
/* flex-wrap: 見出し行のボタンが増えてもカードの外へはみ出さない（ウィザード③は4ボタン・D-09）[はた指示 2026-07-29 希望コメント／2026-08-03 提出状況ボタン撤去で5→4] */
.card2 .card-h { font-size: 16px; font-weight: 800; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-grid { display: grid; gap: 18px; }
.card-grid.cols3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* ---------- ボタン ---------- */
.btn { border: 1px solid transparent; border-radius: var(--r-ui); padding: 9px 18px; font-size: 14px; font-weight: 700; transition: filter .12s, background .12s; display: inline-flex; align-items: center; gap: 7px; justify-content: center; }
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none !important; }
.btn:active:not(:disabled) { box-shadow: inset 0 3px 7px rgba(0,0,0,.32), inset 0 1px 3px rgba(0,0,0,.18); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); filter: none; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #d9822b; filter: none; }
/* システム管理ページ（PORTAMENT・事業所用とは別系統） */
.sys-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 22px; background: #2b3a44; color: #fff; }
.sys-topbar .sys-brand { font-size: 17px; font-weight: 800; white-space: nowrap; }
.sys-topbar .sys-brand span { font-weight: 700; opacity: .85; font-size: 14px; margin-left: 4px; white-space: nowrap; }
.sys-topbar .sys-sub { font-size: 12px; opacity: .7; white-space: nowrap; }
.sys-topbar .sys-who { font-size: 13px; font-weight: 700; white-space: nowrap; }
/* 「PORTAMENT管理者」とログアウトの対（D-27）＝1つの入れ物にして折り返しでも分かれないようにする */
.sys-topbar .sys-right { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
/* 狭幅ではロゴ帯の補足を落として1行に収める（画面タイトルで分かる＝D-10）[はた指示 スマホ崩れ修正] */
@media (max-width: 600px) {
.sys-topbar .sys-sub { display: none; }
}
.sys-topbar .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.sys-topbar .btn-ghost:hover { background: rgba(255,255,255,.12); }
/* 選択チップ（chk-chip＝記号組み合わせ設定などの複数選択部品）。pp-sym は旧・連携管理ページの名残（未使用） */
.pp-sym { display: inline-block; border: 1.5px solid var(--line); background: var(--surface); border-radius: 7px; padding: 2px 8px; font-size: 12px; font-weight: 800; margin: 0 3px 3px 0; white-space: nowrap; }
.chk-chip { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.chk-chip input { accent-color: var(--brand); width: 15px; height: 15px; }
.chk-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.chk-chip:hover { border-color: var(--brand); } /* 押せるチップはホバーで変化（選択済みは枠が既にブランド色＝変化なしでよい・D-20） */
span.chk-chip { cursor: default; } /* 選択済み表示用のspanチップは本体を押せない（押せるのは中の×だけ・D-20） */
.chk-chip [data-del]:hover { filter: brightness(.6); } /* ×（外す）ボタンのホバー。色はインライン指定のためfilterで示す */
.btn-ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--line-soft); filter: none; }
.btn-soft { background: var(--brand-soft); color: var(--brand-strong); }
.btn-soft:hover { background: #d9ecdd; filter: none; } /* 淡緑地はbrightness(1.05)では変化が見えないため明示（D-20） */
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-ghost { background: var(--surface); color: var(--danger); border-color: #f3c2c2; }
.btn-danger-ghost:hover { background: var(--danger-soft); filter: none; } /* 白地はbrightness(1.05)では変化が見えないため明示（D-20） */
.btn-lg { padding: 13px 28px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn-block { width: 100%; }
/* 「ルールを追加」種類カタログのカード（全カード緑塗り・間隔過密の解消 [はた指摘 2026-07-28]。押せる要素＝ホバーで変化・D-20） */
.rule-cat-list { display: flex; flex-direction: column; gap: 10px; }
.rule-cat-btn { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.rule-cat-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.rule-cat-btn .rc-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.rule-cat-btn .rc-desc { font-size: 12.5px; font-weight: 400; color: var(--ink); line-height: 1.6; }
/* ---------- ピル・バッジ ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 3px 11px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-ng { background: var(--danger-soft); color: var(--danger); }
.pill-warn { background: var(--accent-soft); color: #b45309; }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-gray { background: var(--line-soft); color: var(--ink-soft); }
.pill-brand { background: var(--brand-soft); color: var(--brand-strong); }
/* ---------- ヒント・空状態 ---------- */
/* [全体レビュー 2026-09-03 B10-css-index-lp-entry-9] D-08絶対禁止（薄い灰色＋小さい字）のうち色の側を是正。
薄灰(#9a9a9a・コントラスト約2.7:1)から本文色へ＝製品全体の.hint使用箇所(js/*.js 約250箇所)に一括で効く。
サイズ(12.5px)は羽田野さん判断のため維持。 */
.hint { font-size: 12.5px; color: var(--ink); line-height: 1.7; }
.hint b { color: var(--ink-soft); }
.callout { background: var(--brand-soft); border: 1px solid #cdeae2; color: var(--brand-strong); border-radius: var(--r-ui); padding: 10px 14px; font-size: 13px; line-height: 1.8; }
.callout.warn { background: var(--accent-soft); border-color: #f3dfb1; color: #92580a; }
/* [全体レビュー 2026-09-03 CSSLP-1] 他クラスタからのapp.cssスタイル要望＝各画面のインラインstyleをクラスへ
（ui-config.js・ui-grid.js 側は担当外のため編集していない。インラインは各担当クラスタが外す）。 */
.s-err-row td { padding: 0 0 8px; } /* CONFIG-1要望: 勤務記号タブの空・重複の警告行 */
.rf-mx-warn { margin-top: 6px; } /* CONFIG-1要望: 適用日の週・曜日未選択の警告 */
.aj-err { margin-top: 6px; } /* CONFIG-2要望: 勤務時間調整の名称・記号コードの入力警告 */
.pre-join-note { font-size: 15px; color: var(--ink); } /* CHECK-2要望: 在籍開始日・終了日の注記（本文サイズ・本文色＝D-08） */
.scell-time { min-width: 76px; white-space: nowrap; } /* CHECK-2要望:「時間で表示」のマス */
.empty {
text-align: center; padding: 44px 20px; color: var(--ink-faint);
}
.empty .em-tx { font-size: 14px; line-height: 1.9; margin-bottom: 14px; }
/* ---------- テーブル（罫線レス・行区切り） ---------- */
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); }
.tbl th { text-align: left; font-size: 12.5px; color: var(--ink-faint); font-weight: 700; padding: 11px 16px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.tbl td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: #f7faf9; }
.tbl .num { text-align: right; }
/* 密な表（需給検算のプール別表など）: 余白・文字を詰め、セル内で折り返さない（横に長い分は tbl-wrap-x のスクロールで見る）[はた指摘 2026-07-17] */
.tbl.tbl-dense th { padding: 7px 10px; font-size: 11.5px; }
.tbl.tbl-dense td { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
/* 常勤換算ビューの統合表（合計行・常勤換算列を強調）[はた 2026-06-22] */
.fte-table .fte-val { font-weight: 800; color: var(--brand-strong); white-space: nowrap; }
.fte-table tr.fte-total > td { border-top: 2px solid var(--line); font-weight: 800; background: #fafcfb; }
/* 全テーブル共通: 見出し行を色付け＋スクロール時に固定（ナビ72pxの直下に吸着） */
.tbl thead th { background: var(--brand-soft); color: var(--ink); position: sticky; top: 72px; z-index: 5; }
/* 独自スクロール枠（判定・集計など max-height + overflow:auto）の中の表は枠の先頭に吸着 */
.tbl.tbl-inbox thead th { top: 0; }
/* 横スクロール枠（overflow-x:auto）で囲んだ表は、枠自体がスティッキーの基準枠に
なるため top:72px だと見出しが本文の上に重なって表示されてしまう。
この種の枠（高さ可変・縦スクロールはページ側）では見出しを枠の先頭(top:0)に
吸着させて重なりを防ぐ。事業所設定の各タブの表で使用。 */
.tbl-wrap-x { overflow-x: auto; }
.tbl-wrap-x > .tbl thead th { top: 0; }
/* ---------- フォーム ---------- */
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fld label { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
/* month は date と並べて置かれる（システム管理の請求書出力＝発行日と請求月）。ここから漏れると
その欄だけブラウザ標準の見た目になり、隣の欄と揃わない（D-24／D-21）[はた指示 2026-08-08 請求月の入力欄] */
.fld input[type=text], .fld input[type=number], .fld input[type=date], .fld input[type=month], .fld input[type=time], .fld input[type=email], .fld input[type=tel], .fld input[type=password], .fld select, .fld textarea {
border: 1.5px solid #d6dde3; border-radius: var(--r-ui); padding: 9px 11px; background: var(--surface); min-height: 40px;
}
.fld textarea { min-height: 60px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.req { background: var(--danger); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: var(--r-pill); margin-left: 6px; font-weight: 700; }
.req-star { color: var(--danger); font-weight: 800; margin-left: 2px; }
/* 勤務時間の調整・メモ（シフト表マスの右クリック）の項目カード。入力の見た目は .fld と同一テイストに統一 [はた 2026-07-05] */
.ad-row { border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--line-soft); padding: 10px 12px 12px; margin: 0 0 10px; }
.ad-flds { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ad-fld { display: flex; flex-direction: column; gap: 6px; }
.ad-fld > span:first-child { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.ad-row select, .ad-row input[type=time], .ad-row input[type=text] {
border: 1.5px solid #d6dde3; border-radius: var(--r-ui); padding: 9px 11px; background: var(--surface); min-height: 40px;
}
.ad-row select:focus, .ad-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.ad-hm { display: flex; align-items: center; gap: 5px; }
.ad-hm b { font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-weight: 600; }
.ad-row .ad-del { margin-bottom: 2px; white-space: nowrap; }
.ad-row .ad-memo { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; }
.chk-line { display: flex; align-items: center; gap: 7px; font-size: 14px; margin: 4px 0; cursor: pointer; }
.chk-inline { display: inline-flex; align-items: center; gap: 5px; margin: 2px 12px 2px 0; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
/* チェックボックス・ラジオボタンは全画面共通で大きめ＋ブランド色に統一（小さくて押しにくい [はた 2026-07-11]）。
ラップ有無・画面によらず必ず効かせるため要素単位で指定（flex内で潰れないよう flex-shrink:0） */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; vertical-align: middle; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: default; }
/* ラジオ・チェックはネイティブ描画だと輪・枠が濃く出るため自前描画に統一（トグルONと同じ緑・薄い輪 [はた 2026-07-15]） */
input[type="radio"] { appearance: none; -webkit-appearance: none; border: 1.5px solid #cfd9e0; border-radius: 50%; background: #fff; }
input[type="radio"]:checked { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 42%, transparent 46%); }
input[type="radio"]:hover:not(:disabled), input[type="checkbox"]:hover:not(:disabled) { border-color: var(--brand); }
/* ラベル全体が押せる行（.chk-line/.chk-inline/.chk-chip/インライン指定のlabel）では、ラベルのどこに載せても中のチェック・ラジオが同じホバー表示になる（D-20 横展開 2026-08-01） */
label:hover input[type="checkbox"]:not(:disabled), label:hover input[type="radio"]:not(:disabled) { border-color: var(--brand); }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; border: 1.5px solid #cfd9e0; border-radius: 5px; background: #fff; }
input[type="checkbox"]:checked { border-color: var(--brand); background: var(--brand) url('data:image/svg+xml;utf8,') center/78% no-repeat; }
input[type="radio"]:disabled, input[type="checkbox"]:disabled { border-color: #e2e8ee; background-color: #f4f7f9; }
.grp-box { border: 1px solid var(--line); border-radius: var(--r-ui); padding: 16px 18px; margin: 16px 0; background: #fcfdfd; }
.grp-box > legend { font-size: 13px; font-weight: 800; color: var(--ink-soft); padding: 0 7px; }
/* シフトルール「禁止の並び」の編集画面（指定の方法＝並び／回数）[?v=781 js/ui-config.js fnBlockHtml ほか]。
1ブロック＝grp-box。見出し（◯日目／条件◯）の下に1文字下げて縦に積む（D-65・D-67）。 */
.fld.rf-fnmode-box { margin-top: 8px; }
.rf-fn-seq > .fld { margin: 8px 0 6px; }
.rf-fn-seq > .hint { margin-top: 6px; }
.rf-fn-cnt > .fld { margin-top: 8px; }
.rf-fn-list { margin-left: 1em; }
.grp-box.rf-fn-block { margin: 10px 0 0; }
.rf-fn-block > .fld { margin: 0; }
.rf-fn-body { margin-left: 1em; display: flex; flex-direction: column; gap: 8px; }
.rf-fn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-fn-codes { margin-top: 8px; }
.chk-inline.rf-fn-n { margin: 0; }
/* ルール編集の数値・時刻の欄（旧 NUM_STYLE のインライン指定をクラスへ・?v=782）。.fld input[type=…] の余白・角丸と
.fld input:focus の枠色に同じ詳細度で勝つよう、それらより後ろに置く。幅は桁数に合わせる（D-14）＝既定 84px・
2桁の欄（rf-fn-num）56px・優先度の欄（rf-pu）74px・入れ物いっぱい（rf-num-full）100% */
input.rf-num, .fld input.rf-num { width: 84px; padding: 6px 8px; border: 1.5px solid #d6dde3; border-radius: 7px; font-size: 13px; }
.fld input.rf-num.rf-fn-num { width: 56px; }
.fld input.rf-num.rf-pu { width: 74px; }
.fld input.rf-num.rf-num-full { width: 100%; }
.rf-fn-del { margin-left: auto; }
.rf-fn-add { margin-top: 10px; }
/* 条件ブロックの間の「かつ」。左端はブロックの見出し（枠線1px＋内余白18px）にそろえる */
.rf-fn-and { padding-left: 19px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.rf-fn-wish { position: relative; display: inline-block; align-self: flex-start; }
/* 押せない欄・ボタンの理由は包む要素の吹き出し（D-52）。被せ物で欄の上でも吹き出しと not-allowed を出す */
.rf-fn-tip { position: relative; display: inline-flex; }
.rf-fn-cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: not-allowed; }
.rf-fn-locked { opacity: .55; cursor: not-allowed; }
.rf-fn-off { opacity: .4; pointer-events: none; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .sp { flex: 1; }
/* トグルスイッチ */
.toggle { position: relative; width: 40px; height: 22px; background: #c3ccd4; border-radius: 999px; cursor: pointer; transition: background .15s; flex-shrink: 0; border: none; }
.toggle.on { background: var(--brand); }
.toggle::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 17px; height: 17px; background: #fff; border-radius: 50%; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.toggle.on::after { left: 20px; }
.toggle:hover { background: #b1bcc6; } /* トグルもホバーで変化（OFF=灰を一段濃く・D-20） */
.toggle.on:hover { background: var(--brand-strong); } /* ON中は同系の濃緑（D-05） */
.toggle:disabled { pointer-events: none; opacity: .55; cursor: default; } /* 押せないトグルはホバー演出も出さない（D-20）。理由は隣の？で出す（D-52）[公開2 2026-08-19 公平の統合] */
.toggle-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); margin: 5px 0; }
/* ---------- セグメントコントロール（ビュー切替） ---------- */
.seg { display: inline-flex; background: var(--line-soft); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { border: none; background: none; padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--ink-soft); border-radius: 8px; }
.seg button:not(.active):hover { background: rgba(255,255,255,.7); color: var(--ink); } /* 押せるタブはホバーで変化 [D-20]。選択中は対象外 */
.seg button.active { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow); }
/* タブ名が長く2行になる場面（職員編集のタブ）用: 改行位置は呼び出し側が「\n」で指定し、行間・上下余白を詰めて
タブの縦幅を短くする（文字サイズは縮めない・D-08）[はた指示 2026-08-05 職員編集タブの2行崩れ] */
.seg-compact button { line-height: 1.3; padding-top: 5px; padding-bottom: 5px; }
/* ビュー切替タブの行。右端に付随情報（オンコール凡例など）を置けるよう flex化。
タブ(.seg)自体はスマホ幅で自分の中だけ横スクロールするため min-width:0 で縮める余地を作る。
入りきらなければ折り返す（D-09）＝折り返した凡例も margin-left:auto で行の右端に寄る。
[はた指示 2026-08-08 オンコールの青枠と凡例] */
.view-tabrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 12px; }
.view-tabrow .seg { min-width: 0; }
.view-tabrow .onc-legend-slot { margin-left: auto; }
/* ---------- ステッパー（ウィザード） ---------- */
.stepper { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin: 6px 0 22px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; position: relative; }
.step .dot {
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 16px; background: var(--surface); border: 2px solid var(--line); color: var(--ink-faint); z-index: 1;
}
.step .slb { font-size: 14px; color: var(--ink-faint); font-weight: 600; text-align: center; }
.step:not(:first-child)::before { content: ""; position: absolute; top: 22px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.step.done .dot { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.step.done:not(:first-child)::before, .step.now:not(:first-child)::before { background: var(--brand); }
.step.now .dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-ring); }
.step.now .slb { color: var(--brand-strong); font-weight: 800; }
/* 完了済みステップはクリックで戻れる（ui-wizard が onStep を渡したときのみ付与） */
.step.clickable { cursor: pointer; }
.step.clickable:hover .dot { border-color: var(--brand-strong); background: var(--brand-soft); }
.step.clickable:hover .slb { color: var(--brand-strong); }
.wiz-foot { display: flex; gap: 12px; justify-content: center; align-items: center; margin: 26px 0 10px; }
/* 手順①の月カード: 固定幅・固定高で整列（右の余白を詰める／縦幅を統一） */
.per-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.per-card { width: 156px; min-height: 100px; text-align: left; border: 2px solid var(--line); border-radius: var(--r-ui); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.per-card.sel { border-color: var(--brand); background: var(--brand-soft); }
.per-card:not(.sel):hover { border-color: var(--brand-ring); } /* 押せる月カードはホバーで変化（選択中は対象外・D-20） */
/* ウィザード見出し: タイトルとステッパーを同じ行に。ラベル↔本体の間隔を広げる */
.wiz-head { margin-bottom: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.wiz-head h1 { justify-self: start; }
.wiz-head .stepper { margin: 0; }
/* パレット右上の操作ツール（元に戻す/履歴/やり直す）。押下のへこみ効果は付けない */
.pl-head-tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.btn.hist-tool:active { box-shadow: none; }
/* ③タイトル行の右端にCSVダウンロード */
.card-h .csv-dl { margin-left: auto; }
/* ---------- モーダル / ドロワー ---------- */
/* 重なりの順（下から）: メニュー1000 ＜ ドロワー1090 ＜ ポップ（職員1100・日別配置の帯編集1150）
＜ モーダル1180 ＜ 処理中1200 ＜ トースト1300 ＜ ヒント1350/1400。
モーダルは必ずポップより上に出す。1100のままだと日別配置の帯編集ポップ（1150）に隠れ、
職員ポップ（1100）とは同着でDOMの順まかせになる＝削除の確認がポップの裏に出る
[はた指示 2026-08-08 削除の確認モーダル] */
#modal-layer:not(:empty) { position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 1180; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--surface); border-radius: 16px; min-width: 440px; max-width: 780px; max-height: 88vh; min-height: 160px; display: flex; flex-direction: column; overflow: hidden; resize: both; direction: rtl; box-shadow: var(--shadow-lg); } /* 本文（.modal-b）だけスクロールする構造に再編＝フッターは常時表示。direction:rtlはresizeのつまみをChromiumで左下に出すためだけの指定＝直下の子（.modal > *）でltrへ戻す。中身のスクロールバーはltr側の.modal-bに出るので右のまま [はた指示 2026-08-12 つまみ左下] */
.modal > * { direction: ltr; } /* 親のdirection:rtl（グリップ位置のためだけ）を戻す。対象は.modal-h/-b/-f [はた指示 2026-08-12 つまみ左下] */
/* つまみを掴んだモーダル・浮動パネルはサイズ上限を画面いっぱいまで解放する（付与は ui-core.js の pointerdown・
既定の見た目は不変＝広げようとした人だけ上限が外れる）[はた指摘 2026-08-16 下にも広げたい] */
.modal.user-sized { max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); }
.float-panel.user-sized { max-height: calc(100vh - 120px); }
.modal-h { display: flex; align-items: center; padding: 18px 24px 10px; font-size: 17px; font-weight: 800; }
.modal-x { margin-left: auto; background: var(--line-soft); border: none; font-size: 14px; color: var(--ink-soft); cursor: pointer; width: 30px; height: 30px; border-radius: 50%; }
.modal-x:hover { background: var(--line); color: var(--ink); } /* 閉じるボタンもホバーで変化（D-20） */
.modal-b { padding: 8px 26px 20px; flex: 1 1 auto; overflow: auto; } /* 本文だけスクロール＝フッター（.modal-f）は常時表示 [はた指示 2026-08-12 つまみ左下] */
.modal-f { display: flex; justify-content: flex-end; gap: 10px; padding: 6px 24px 22px; }
/* 動かせるモーダル（UI.modal / UI.confirm の opts.movable）: 背後のシフト表を見ながら決められるように、
暗幕を透明にして見出しバーをつかんで移動できるようにする。暗幕の要素自体は残す＝背後のクリックは
従来どおり遮断され、閉じる経路（✕・キャンセル・実行）も変わらない [はた指示 2026-08-10 動くモーダル] */
#modal-layer.movable:not(:empty) { background: transparent; }
.modal-movable { border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(16,24,40,.28); } /* 透明な暗幕でも背景に溶けない濃さ */
.modal-movable > .modal-h { cursor: move; user-select: none; touch-action: none; } /* ドラッグ中に文字が選択されない・スクロールに横取りされない */
.modal-movable > .modal-h .modal-x { cursor: pointer; } /* ✕のカーソルは従来どおり */
/* 「自動作成で守りきれなかった条件」モーダル: 条件ごとの折りたたみカード＋内訳グリッド [はた 2026-07-02] */
.viol-sec { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13.5px; color: var(--ink); margin: 0 0 10px; }
.viol-grp { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--surface); overflow: hidden; }
.viol-grp summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; user-select: none; }
.viol-grp summary::-webkit-details-marker { display: none; }
.viol-grp summary::after { content: "▾"; margin-left: auto; color: var(--ink-faint); transition: transform .15s; }
.viol-grp[open] summary::after { transform: rotate(180deg); }
.viol-grp summary:hover { background: var(--line-soft); }
.viol-name { min-width: 0; }
.viol-badge { flex: 0 0 auto; min-width: 44px; text-align: center; font-size: 12px; font-weight: 800; border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.viol-badge.hard { background: var(--danger-soft); color: var(--danger); }
.viol-badge.soft { background: var(--accent-soft); color: #b45309; }
/* 違反グループ見出しの「設定元」バッジ（D-27＝ラベル直後に配置。押せないためホバー演出なし＝D-20） */
.viol-src-badge { flex: 0 0 auto; font-size: 12px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.viol-src-badge.rule { background: var(--info-soft); color: var(--info); }
.viol-src-badge.staff { background: var(--teal-soft); color: var(--teal); }
.viol-src-badge.basic { background: var(--tan-soft); color: var(--tan); }
.viol-src-badge.manual { background: var(--line-soft); color: var(--ink-soft); }
.viol-src-badge.wish { background: var(--plum-soft); color: var(--plum); }
.viol-src-badge.link { background: var(--slate-soft); color: var(--slate); }
.viol-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; padding: 2px 14px 12px; max-height: 250px; overflow: auto; }
.viol-item { background: var(--bg); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.viol-item b { color: var(--ink); font-weight: 800; margin-right: 1px; }
/* 「なぜ？」ボタン付きの内訳行は、1行でも複数行でもボタンを枠の右下に揃える（テキストは .viol-item-txt で包む）[はた 2026-07-13] */
.viol-item:has(.viol-item-txt) { display: flex; gap: 6px; }
.viol-item-txt { flex: 1 1 auto; min-width: 0; }
/* クリックで該当箇所へ移動できる内訳行（場所を特定できる行のみ）[はた 2026-07-07] */
.viol-item-hl { cursor: pointer; }
.viol-item-hl:hover { background: #fef9e7; box-shadow: inset 0 0 0 1px #eab308; }
.viol-item.hl-on { background: #fef3c7; box-shadow: inset 0 0 0 2px #eab308; color: var(--ink); }
/* 優先度の調整パネル: ドラッグで並べ替えるリスト（項目行つきの表形式）[はた 2026-07-03／順序主導 2026-07-20／
個別設定一覧と同じ列様式へ 2026-08-11] */
.prio-list { display: flex; flex-direction: column; gap: 5px; }
/* 5列: ☰ / 優先区分 / 優先順位 / 条件 / 今回の違反（個別設定一覧の .rlp-* と同じ列構成）[はた指示 2026-08-11] */
.prio-head, .prio-item { display: grid; grid-template-columns: 24px 56px 44px minmax(0, 3fr) minmax(96px, 1fr); align-items: center; column-gap: 10px; }
.prio-head { font-size: 11px; font-weight: 800; color: var(--ink-faint); padding: 0 11px 2px; }
.prio-head span:nth-child(5) { text-align: center; }
.prio-item { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 700; user-select: none; cursor: grab; }
.prio-item.dragging { opacity: .45; border-style: dashed; border-color: var(--brand); cursor: grabbing; }
.prio-no { display: inline-flex; justify-content: center; background: var(--brand-soft); color: var(--brand-strong); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 800; padding: 2px 6px; white-space: nowrap; }
/* 条件名は1行固定＝省略（…）＋ title で全文（D-14／B-2）。公平3項目だけは「揃える単位」セレクトを添えるため折り返し可 */
.prio-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prio-name-fair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; white-space: normal; overflow: visible; }
.prio-band { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.prio-cnt { text-align: center; }
.prio-none { color: var(--ink-faint); }
/* 公平3項目の「揃える単位」セレクト（ブランド体裁・D-24／中身なり幅・D-14／nowrap） */
.prio-fair-wrap { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prio-sel { padding: 4px 8px; border: 1.5px solid var(--line); border-radius: 7px; font-size: 12.5px; font-weight: 600; background: var(--surface); color: inherit; max-width: 100%; cursor: pointer; white-space: nowrap; }
.prio-sel:hover { border-color: var(--brand-ring); }
/* 「考慮しない」置き場（重み0）＝グレー・破線・帯表示なし・☰で任意へ戻す */
.prio-off-list { display: flex; flex-direction: column; gap: 5px; }
.prio-off { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--ink-faint); user-select: none; cursor: grab; }
.prio-off .prio-name { flex: 1 1 auto; min-width: 0; }
.prio-off.dragging { opacity: .45; border-color: var(--brand); cursor: grabbing; }
/* 「今回の違反」バッジにカーソルを当てると出る内訳（遵守できなかった条件パネルと同じ見た目） */
.prio-tip { position: fixed; z-index: 1350; max-width: min(430px, 92vw); max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,35,52,.22); padding: 10px 12px; pointer-events: none; }
.prio-tip .prio-tip-h { font-weight: 800; font-size: 12.5px; margin: 8px 0 6px; }
.prio-tip .prio-tip-h:first-child { margin-top: 0; }
/* 区分の境目（優先区分の帯が変わる位置）の仕切り＝行の枠の強調ではなく、行間に置く独立した薄いグレーの線。
優先度パネルと個別設定一覧で共有する1クラス（複製しない・T-32）。挿入は refreshBands（ui-check.js）／
refreshPrio（ui-config.js）[はた指示 2026-08-16 優先区分の一貫化／はた指摘 2026-08-17 境目は薄い線で] */
.band-sep-line { border-top: 1px solid var(--line); margin: 8px 2px; } /* [はた指摘 2026-08-17 区分の線の上下に余白] */
/* シフトルール＞個別設定の統合一覧（旧「優先度」タブを吸収）[はた指示 2026-08-05 個別設定と優先度の統合]。
プラン画面の優先度パネル（.prio-*）と共用せず新設する（あちらの見た目を変えないため）。
5列: ☰ / 優先区分 / 優先順位 / ルール / 条件 [はた指摘 2026-08-17 対象月の列を削除]。
1ブロック＝1つの条件（＝並べ替えの単位）で、同じ条件に複数のルールがぶら下がるときはブロックの中に行が並ぶ。 */
.rlp-list { display: flex; flex-direction: column; gap: 6px; }
.rlp-head, .rlp-item { display: grid; grid-template-columns: 24px 56px 44px minmax(0, 1.2fr) minmax(0, 2.4fr); align-items: center; column-gap: 18px; }
.rlp-head { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); padding: 0 13px 4px; }
.rlp-head span, .prio-head span { white-space: nowrap; } /* 44px列の「優先順位」が1文字ずつ折れないように（はみ出しは列間の余白へ）[はた指摘 2026-08-17] */
.rlp-block { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rlp-block.dragging { opacity: .45; border-style: dashed; border-color: var(--brand); }
.rlp-block-off { border-style: dashed; } /* 「考慮しない」置き場＝破線で区別（重み0） */
.rlp-item { padding: 9px 12px; font-size: 13px; }
.rlp-item + .rlp-item { border-top: 1px solid var(--line-soft); }
/* 押せる行だけホバーで変化させる（行単位・D-47／D-20）。中身の端ギリギリにしない余白は padding で確保（D-51） */
.rlp-item.rlp-clickable { cursor: pointer; }
.rlp-item.rlp-clickable:hover { background: #f7faf9; }
.rlp-item .drag-h, .prio-item .drag-h, .prio-off .drag-h, .seq-item .drag-h { color: var(--ink-faint); font-size: 15px; text-align: center; cursor: grab; user-select: none; border-radius: 6px; }
.rlp-item .drag-h:active, .prio-item .drag-h:active, .prio-off .drag-h:active, .seq-item .drag-h:active { cursor: grabbing; }
.rlp-item .drag-h:hover, .prio-item .drag-h:hover, .prio-off .drag-h:hover, .seq-item .drag-h:hover { background: var(--line-soft); } /* つかめるハンドルはホバーで変化（D-20）。優先度パネル（.prio-*）・職員設定の勤務の並び（.seq-item）とも共有＝複製を作らない（T-32） */
.rlp-no { display: inline-flex; justify-content: center; background: var(--brand-soft); color: var(--brand-strong); border-radius: var(--r-pill); font-size: 12px; font-weight: 800; padding: 2px 0; }
.rlp-no:empty { display: none; } /* 順位を持たない行（考慮しない）はチップを出さない */
/* ルール名・条件・優先度は1行固定＝省略（…）＋ title で全文（D-14／D-22） */
.rlp-rule, .rlp-cond, .rlp-prio { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlp-rule { font-weight: 700; color: var(--ink); }
.rlp-cond { color: var(--ink); }
.rlp-prio { color: var(--ink-soft); font-weight: 700; }
.rlp-dash { color: var(--ink-faint); }
.rlp-item-plain { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.6fr); } /* 条件の一覧を読めないときの退避表示＝ルール/条件の2列 */
/* 「いまは効いていない条件」の1件（ルール由来の項目は押せる＝編集を開ける） */
.rlp-inact { padding: 8px 10px; border-radius: 9px; margin: 0 0 6px; }
.rlp-inact.rlp-clickable { cursor: pointer; }
.rlp-inact.rlp-clickable:hover { background: #f7faf9; }
.rlp-inact-name { font-weight: 700; color: var(--ink); font-size: 13px; }
.rlp-inact-cond { margin: 2px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink); }
/* 「遵守できなかった条件」バナー（押せるボタン風）[はた 2026-07-03] */
.viol-warn-btn { display: block; width: 100%; text-align: left; margin-bottom: 12px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #f0c9a8; background: #fff7ed; color: #9a3412; font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow); cursor: pointer; }
.viol-warn-btn:hover { border-color: var(--accent); background: #fff1e0; }
.viol-warn-btn:active { box-shadow: inset 0 3px 7px rgba(0,0,0,.18), inset 0 1px 3px rgba(0,0,0,.10); }
/* 動かせるパネル（背面のシフト表はそのまま操作できる）[はた 2026-07-03] */
.float-panel { position: fixed; top: 96px; right: 24px; width: min(560px, 92vw); max-width: calc(100vw - 28px); min-width: 320px; max-height: min(74vh, 760px); min-height: 240px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); resize: both; overflow: hidden; direction: rtl; z-index: 1050; } /* max-width: right:24px固定のまま各パネルのインライン幅（94vw等）が視口を割らないための天井。resize/overflow:hiddenでサイズ変更可に＝中身のスクロールは.float-panel-b側が持つ。direction:rtlはresizeのつまみをChromiumで左下に出すためだけの指定＝右端寄せのパネルは左下をつかんで左へ広げる形が自然。文字組み・レイアウトは直下の子（.float-panel > *）でltrへ戻す [はた指示 2026-08-12 つまみ左下] */
.float-panel > * { direction: ltr; } /* 親のdirection:rtl（グリップ位置のためだけ）を戻す。対象は.float-panel-h/-b/-f [はた指示 2026-08-12 つまみ左下] */
.float-panel-h { display: flex; align-items: center; gap: 4px; padding: 14px 18px 8px; font-size: 15.5px; font-weight: 800; cursor: move; user-select: none; }
.float-panel-h .modal-x { margin-left: auto; cursor: pointer; }
.float-panel-b { padding: 4px 18px 12px; overflow: auto; flex: 1 1 auto; } /* 縦に広げたとき本文が伸びてフッターが下に付く [はた指示 2026-08-12 モーダルのサイズ変更] */
.float-panel-f { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 18px 16px; border-top: 1px solid var(--line-soft); }
/* パネル内の条件行（行クリック=ハイライト／「内訳」ボタン=展開） */
.viol-grp2 { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface); overflow: hidden; }
/* 公平系の「どれだけの差が残ったか」サマリ（条件カードの「内訳」の中に表示）[はた 2026-07-05] */
.viol-stat { font-size: 12px; color: var(--ink-soft); background: var(--line-soft); border-radius: 8px; padding: 6px 10px; margin: 0 10px 8px; }
/* 公平系の※注記＝タイトル行の直下に全幅（グリッド2列を横断）・灰色ブロックに入れない [はた指摘 2026-07-24] */
.viol-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; margin: 0 10px 2px; }
/* カード（サマリ・内訳）が1枚だけの内訳リストは全幅で出す（2列の1枠に押し込むと読みにくい。
付与は ui-check.js 側＝カード数を数えて .viol-one）[はた指摘 2026-08-16 1カードは横断表示] */
.viol-list.viol-one > .viol-stat, .viol-list.viol-one > .viol-item { grid-column: 1 / -1; }
/* [対応 2026-07-28] 許容済み項目の案内文＝本当に必要な補足は本文色・読めるサイズの一文で書く（薄灰極小は禁止・D-08） */
.viol-tolerated-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink); line-height: 1.7; margin: 4px 10px 2px; }
/* 不足の「なぜ？」＝同種の理由を見出し＋囲みでまとめ、囲み内に該当職員を全員列挙する [はた 2026-07-20] */
.viol-why-box { background: var(--line-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 4px 0 2px 14px; }
.viol-why-box-li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; letter-spacing: .01em; }
.viol-why-box-li + .viol-why-box-li { margin-top: 3px; }
/* 「なぜ？」パネルを 概要／詳細／提案 の3パートで構成する小見出しと提案本文 [はた 2026-07-20 タスク12] */
.viol-why-head { font-weight: 800; font-size: 12.5px; color: var(--ink); letter-spacing: .03em; margin: 13px 0 5px; }
.viol-why-sug { font-size: 12.5px; color: var(--ink); line-height: 1.75; letter-spacing: .01em; }
/* 需給検算の内訳を「元値／減算分」の囲みでグルーピングする（.viol-why-box と様式を揃える）[はた 2026-07-20 タスク13] */
.sd-brk { margin: 8px 12px 0; }
.sd-brk-box { background: var(--line-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.sd-brk-box + .sd-brk-box { margin-top: 8px; }
.sd-brk-cap { font-weight: 800; font-size: 12px; color: var(--ink); letter-spacing: .03em; margin: 0 0 5px; }
.sd-brk-li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; letter-spacing: .01em; }
.sd-brk-li + .sd-brk-li { margin-top: 3px; }
.sd-brk-note { font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; margin-top: 6px; }
.viol-head2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 9px 12px; font-weight: 700; font-size: 13px; cursor: pointer; user-select: none; }
.viol-head2:hover { background: var(--line-soft); }
/* ハイライトできる該当箇所が無い条件＝クリックできない見た目にする */
.viol-head2.no-hl { cursor: default; }
.viol-head2.no-hl:hover { background: none; }
/* 内訳が無い条件の見出し（開閉なし・ウィザードのモーダル用） */
.viol-grp .viol-flat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 700; font-size: 13.5px; }
.viol-head2 .viol-name { min-width: 0; }
.viol-hl-tag { display: none; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #92580a; background: #fef3c7; border-radius: var(--r-pill); padding: 2px 8px; }
.viol-grp2.hl-on { border-color: #eab308; box-shadow: 0 0 0 2px rgba(234,179,8,.25); }
.viol-grp2.hl-on .viol-hl-tag { display: inline-block; }
.viol-exp { margin-left: auto; flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; font-size: 11.5px; padding: 3px 8px; color: var(--ink-soft); white-space: nowrap; }
.viol-exp:hover { border-color: var(--brand); color: var(--brand-strong); }
.viol-grp2 .viol-list { padding: 2px 12px 10px; }
/* 帳票出力モーダル: グループ見出し＋「名称の行／説明の行」の2行カード型。
旧・4列の表形式は説明が横に長く読みにくかったため変更 [はた 2026-07-10] */
.rpt-grp { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); margin: 16px 2px 6px; }
.rpt-grp:first-child { margin-top: 0; }
.rpt-row { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px 10px; margin-bottom: 8px; cursor: pointer; background: var(--surface); }
.rpt-row:hover { background: var(--line-soft); }
/* ボタンが2つ並ぶ行（その他シフト表）は、スマホ幅で入りきらないぶんを名称の下へ回す（D-09） */
.rpt-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rpt-row-head .sp { flex: 1; }
/* 伸ばさない＝種別チップが名称のすぐ右に付く（D-27）。折り返しは min-width を下回ったときだけ */
.rpt-name { font-weight: 800; font-size: 13px; flex: 0 1 auto; min-width: 8em; }
.rpt-kind { display: inline-block; font-size: 11px; font-weight: 800; border-radius: var(--r-pill); padding: 2px 10px; white-space: nowrap; }
.rpt-xlsx { color: #166534; background: #dcfce7; }
.rpt-print { color: #1e40af; background: #dbeafe; }
.rpt-csv { color: #475569; background: #e2e8f0; }
.rpt-link { color: #6b21a8; background: #f3e8ff; }
.rpt-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.75; margin-top: 5px; }
/* 選択式の行（勤怠連携CSVの形式選択など）: 選んでいる行を枠色と背景で明示 [はた 2026-07-11] */
.rpt-row:has(input[type="radio"]:checked) { border-color: var(--brand); background: var(--brand-soft); }
.rpt-dl, .rpt-edit { padding: 6px 12px; font-size: 12px; white-space: nowrap; }
/* 非活性のボタンはホバーを拾えないので、理由の吹き出しはこのが受ける（D-52）。
非活性のボタンはクリックも拾わせない＝ボタンの上を押しても行クリック（＝出力）へ抜けない */
.rpt-edit-w { display: inline-flex; }
.rpt-edit:disabled { pointer-events: none; }
/* 個別対応の帳票への入口（テキストリンク）[はた指示 2026-09-18 その他シフト表] */
.rpt-more { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--brand); cursor: pointer; margin: 2px 2px 4px; }
.rpt-more:hover { color: var(--brand-strong); text-decoration: underline; }
/* 「職員」ヘッダーの絞り込み（旧「表示する職員のグループ」チェック行の置き換え）[はた 2026-07-05] */
th.rowhead .stf-btn { display: block; margin: 3px auto 0; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
th.rowhead .stf-btn:hover { border-color: var(--brand); color: var(--brand-strong); }
th.rowhead .stf-btn.on { border-color: var(--brand); color: var(--brand-strong); background: #e8f3ec; }
.stf-pop { position: fixed; z-index: 1100; width: min(480px, 92vw); max-height: min(70vh, 620px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 14px; }
.stf-sec { margin-bottom: 10px; }
.stf-h { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); margin-bottom: 5px; }
.stf-q { width: 100%; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 9px; font-size: 13px; }
.stf-q:focus { border-color: var(--brand); outline: none; }
.stf-checks { display: flex; flex-wrap: wrap; align-items: center; }
.stf-checks.stf-scroll { max-height: 150px; overflow: auto; align-content: flex-start; }
.stf-h { display: flex; align-items: center; gap: 8px; }
.stf-only { border: 1px solid var(--brand); background: var(--surface); border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; padding: 2px 9px; color: var(--brand-strong); white-space: nowrap; cursor: pointer; }
.stf-only:hover { background: #e8f3ec; }
.stf-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
/* 条件クリックのハイライト（黄色の半透明オーバーレイ＝縞・週末色など下地を保つ）。
[全体レビュー 2026-09-03 B03-ui-grid-plans-search-5] box-shadow はホバー中の行/列クロスヘア
（row-hi/col-hi・884行）と同じプロパティを取り合い、詳細度で後者が勝って黄色が消えていた（D-58）。
--cell-hl 変数スロット（scell の background-image 合成・821-822行）へ移し、別プロパティで共存させる。 */
td.scell.cell-hl { --cell-hl: linear-gradient(rgba(255, 196, 0, .30), rgba(255, 196, 0, .30)); }
#drawer-layer:not(:empty) { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1090; }
.drawer {
position: absolute; top: 0; right: 0; bottom: 0; width: 620px; max-width: 94vw; background: var(--surface);
box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
/* 入場アニメは .anim（表示中のみJSが付与）に分離。静止位置をアニメ完了に依存させない
（描画の止まったレンダラーでは from フレームで凍結し、右40pxが画面外に切れるため） */
.drawer.anim { animation: slidein .18s ease; }
@keyframes slidein { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-h { display: flex; align-items: center; padding: 18px 22px 12px; font-size: 17px; font-weight: 800; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.drawer-b { flex: 1; overflow-y: auto; padding: 16px 22px; }
.drawer-f { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 22px; border-top: 1px solid var(--line); flex-shrink: 0; background: #fbfcfd; }
/* ---------- トースト（上部中央） ---------- */
#toast-layer { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 1300; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #243240; color: #fff; padding: 11px 22px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; gap: 8px; align-items: center; }
.toast.anim { animation: tdrop .22s; }
.toast.err { background: var(--danger); }
@keyframes tdrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* ---------- コンテキストメニュー ---------- */
#ctx-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.ctxmenu { position: absolute; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 11px; min-width: 185px; padding: 5px; pointer-events: auto; font-size: 13.5px; }
.ctxmenu .ci { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; position: relative; white-space: nowrap; border-radius: 7px; }
.ctxmenu .ci:hover { background: var(--brand-soft); }
.ctxmenu .ci.disabled { color: #b9c2cb; cursor: default; }
.ctxmenu .ci.disabled:hover { background: none; }
.ctxmenu .sep { height: 1px; background: var(--line); margin: 5px 4px; }
.ctxmenu .arrow { margin-left: auto; font-size: 10px; color: var(--ink-faint); padding-left: 18px; }
.ctxmenu .ci .submenu { display: none; position: absolute; left: 100%; top: -6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 11px; min-width: 96px; padding: 5px; }
/* 画面の右端で右に収まらない時は左側に開く（ui-core.js ctxMenu が実寸を測って付与） */
.ctxmenu .ci .submenu.flip-left { left: auto; right: 100%; }
.ctxmenu .ci:hover > .submenu { display: block; }
/* ---------- ツールチップ ---------- */
/* white-space:pre-line は data-tip 内の改行文字(\n)だけ改行として表示し、それ以外の連続空白は
通常どおり詰める。既存の data-tip はすべて1行文のため表示に影響しない（発行モーダルの締切
ツールチップを2行表示にするための追記・[はた指示 2026-08-04]）。 */
.tip { position: fixed; background: #243240; color: #fff; font-size: 13.5px; padding: 10px 14px; border-radius: 9px; z-index: 1400; max-width: 380px; line-height: 1.75; box-shadow: 0 6px 22px rgba(0,0,0,.24); pointer-events: none; white-space: pre-line; }
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--line); color: var(--ink-soft); font-size: 10.5px; font-weight: 700; cursor: help; margin-left: 5px; vertical-align: middle; }
.qmark:hover { background: var(--brand); color: #fff; }
/* 色付きボタンの中に入れた？は、ホバー時にボタン地色と同化しないよう白へ反転（D-20の視認確保）
[はた指示 2026-08-05 確定ボタンの名称・？内蔵] */
.btn .qmark:hover { background: #fff; color: var(--brand-strong); }
/* ---------- 処理中 ---------- */
.busy-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.94); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 1200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.spinner { width: 44px; height: 44px; border: 4.5px solid var(--brand-ring); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.busy-text { color: var(--ink); font-size: 15px; font-weight: 800; }
/* ---------- 固定 保存ボタン（チャットボタンの左横に常駐） ----------
チャットFAB(right:20px・幅52px → 右端20〜72px)の左に12pxの余白で並べる。
高さ52pxでFABと縦位置を合わせ、オレンジ差し色で緑のチャットと区別する。 */
.save-fab { position: fixed; right: 84px; bottom: 20px; height: 52px; padding: 0 20px; border-radius: 17px; border: none; background: var(--accent); color: #fff; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: .3px; box-shadow: var(--shadow-lg); cursor: pointer; z-index: 951; transition: background .12s, filter .12s; }
.save-fab:hover { filter: brightness(1.05); }
.save-fab svg { width: 20px; height: 20px; }
/* ---------- チャットサポート ---------- */
.chat-fab { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 17px; border: none; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 950; }
.chat-fab:hover { background: var(--brand-strong); }
.chat-panel { position: fixed; right: 20px; bottom: 82px; width: 300px; height: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 950; display: flex; flex-direction: column; overflow: hidden; }
.chat-h { background: var(--brand); color: #fff; padding: 12px 15px; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; flex-shrink: 0; }
.chat-x { margin-left: auto; background: none; border: none; color: #fff; font-size: 14px; cursor: pointer; }
.chat-x:hover { opacity: .75; }
.chat-body { flex: 1; overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.chat-msg { max-width: 85%; padding: 8px 11px; border-radius: 11px; font-size: 13px; line-height: 1.6; }
.chat-msg.bot { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.chat-msg.user { background: var(--brand); color: #fff; align-self: flex-end; }
.chat-input { display: flex; gap: 6px; padding: 9px; border-top: 1px solid var(--line); flex-shrink: 0; }
.chat-input input { flex: 1; border: 1.5px solid #d6dde3; border-radius: 8px; padding: 7px 9px; font-size: 13px; }
/* =====================================================
シフトグリッド（パレットで塗る・v2独自）
===================================================== */
/* パレットは「希望群」と「記号群」を独立した行ブロック(.pl-row)に縦分割する。
各行内だけで折り返すので両群は混在しない。行頭の種別ラベル(.pl-row-label)は
一度廃止したが、上下段の区別が付かないとの指摘で復活 [UI-020 2026-07-08]。 */
/* パレットは sticky にしない（表と一緒にスクロールする）。sticky にすると、ページを
スクロールしたとき表の項目行(thead は scroller 内で sticky)がパレットの下へ潜り込むため。
＝v118「画面固定は全廃」と同方針。ウィザードもシフト確認画面も「パレット＋表」を一緒に動かす。 */
.palette { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; box-shadow: var(--shadow); position: static; }
.palette .pl-lb { font-size: 12px; font-weight: 800; color: var(--ink-faint); margin-right: 2px; }
/* 行頭の種別ラベル（希望/記号）。チップの1行目と高さが揃うよう上に少し余白 [UI-020 2026-07-08] */
.pl-row-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--ink-faint); padding-top: 6px; min-width: 2.2em; }
/* パレット操作バー（常に見える）とたためる本体。.palette が縦並びなので縦に積まれる。 */
.pl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 6px; }
.pl-body { display: block; position: relative; }
/* 群の行ブロック。行内で折り返す（.pl-chips が wrap）。希望行は右に消去/トグル区画。 */
.pl-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; }
.pl-row-wish { padding-top: 1px; }
/* 群を一目で分けるための薄い区切り線＋わずかな背景差（記号行を少し沈める） */
.pl-row-sym { border-top: 1px solid var(--line-soft); background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent); border-radius: 0 0 8px 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.pl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pl-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding-left: 8px; border-left: 1px solid var(--line-soft); }
/* 「表示する職員」行〜ツールバー〜希望/記号パレットを一体でスクロール固定する帯。
この帯ごと sticky にするので、内側のパレット単体の sticky は JS 側で解除する。 */
.grid-tools-sticky { background: var(--bg); padding: 8px 10px 4px; }
.grid-tools-sticky > .palette { box-shadow: var(--shadow); }
.pl-chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; transition: transform .05s, box-shadow .05s; }
.pl-chip:hover { border-color: var(--brand); }
.pl-chip:active { box-shadow: inset 0 3px 7px rgba(0,0,0,.32), inset 0 1px 3px rgba(0,0,0,.18); }
.pl-chip.armed { border-color: var(--brand); box-shadow: inset 0 3px 7px rgba(0,0,0,.32), inset 0 1px 3px rgba(0,0,0,.18), 0 0 0 3px var(--brand-ring); }
.pl-chip .sw { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.pl-div { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
/* 色付きチップ: 幅を2種に統一（3文字以上=5文字ぶん / 1〜2文字=2文字ぶん）。中央寄せ・折り返さない＝整列 */
.pl-chip.pl-w5, .pl-chip.pl-w2 { justify-content: center; padding-left: 2px; padding-right: 2px; white-space: nowrap; gap: 0; }
.pl-chip.pl-w5 { width: 6em; }
.pl-chip.pl-w2 { width: 3.2em; }
/* 消去ボタンは他チップと別仕様: 正方形・大型・画像のみを中央寄せで位置を明確に */
.pl-chip.pl-erase { position: absolute; right: 6px; bottom: 10px; top: auto; z-index: 2; justify-content: center; align-items: center; gap: 0; width: 52px; height: 52px; padding: 0; border-radius: 10px; border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--surface); line-height: 1; flex: 0 0 auto; }
.pl-chip.pl-erase .er-img { width: 38px; height: 38px; object-fit: contain; display: block; }
.pl-chip.pl-erase:hover { border-color: var(--ink-soft); background: var(--bg); }
.pl-chip.pl-erase.armed { border-style: solid; border-color: var(--brand); box-shadow: inset 0 3px 7px rgba(0,0,0,.32), inset 0 1px 3px rgba(0,0,0,.18), 0 0 0 3px var(--brand-ring); }
/* 消しゴムはパレット枠(.palette)基準で右下に絶対配置。記号行の右側に余白を空けてチップとの重なりを防ぐ */
.pl-row-sym { padding-right: 72px; }
/* メモセル（クリックでポップアップ編集） */
.memo-cell-btn { min-height: 22px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; padding: 2px 5px; border-radius: 4px; color: var(--ink); }
.memo-cell-btn:hover { background: var(--brand-soft); }
.memo-cell-btn:empty::before { content: "＋"; color: var(--ink-faint, #b8b8b8); }
.memo-cell-btn.has-memo { font-weight: 600; }
/* セル選択時のアクションバー */
.cellbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: #243240; color: #fff; border-radius: 12px; padding: 8px 14px; margin-bottom: 10px; font-size: 13px; box-shadow: var(--shadow-lg); }
.cellbar .cb-n { font-weight: 800; background: rgba(255,255,255,.14); border-radius: var(--r-pill); padding: 3px 11px; }
.cellbar button { background: rgba(255,255,255,.1); color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.cellbar button:hover { background: rgba(255,255,255,.22); }
.cellbar button:disabled { opacity: .35; cursor: not-allowed; }
.cellbar .cb-x { margin-left: auto; background: none; }
/* グリッド本体（※フォント・マス寸法は据え置き＝表の大きさ／スクロール量を変えない） */
.grid-scroller { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); max-height: 760px; box-shadow: var(--shadow); }
.sgrid { border-collapse: separate; border-spacing: 0; font-size: 12px; }
/* opts.hideHead（比較画面の下段）: 項目行(thead)は列幅を決めるため作られたまま置くが、visibility:collapse で
見た目・高さだけ消す（display:none だと列幅の共有元が無くなり上段の表と列幅がズレるため使わない）。
[はた指示 2026-08-10 比較の1画面化] */
.sgrid.nohead thead { visibility: collapse; }
/* 地色は background-color で指定する（background の一括指定だと、マスの印を描いている背景画像＝
丸印・先行配置の斜線ごと消える。この行はセレクタが .scell より強いため特に効く）[はた指示 2026-08-08 赤枠と丸印の取り合い] */
.sgrid th, .sgrid td { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 0; background-color: var(--surface); }
.sgrid thead th { position: sticky; top: 0; z-index: 5; background: var(--brand-soft); box-shadow: inset 0 -1.5px 0 var(--line); } /* 項目行(職員・日付の見出し行)に色をつけ本文と区別[はた 2026-06-22] */
.sgrid thead .rowhead { background: var(--brand-soft); }
.sgrid .colhead { min-width: 40px; width: 40px; text-align: center; padding: 3px 0 2px; line-height: 1.2; }
.sgrid .colhead .dw { font-size: 10px; color: var(--ink-faint); font-weight: 700; }
.sgrid .colhead .dw.wd-hol { font-size: 8px; white-space: nowrap; letter-spacing: -0.3px; } /* 祝日の「月・祝」を他の曜日セルと同じ幅に収める（列幅は変えない）[はた指示 2026-08-11] */
.sgrid .colhead .dd { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
/* 委員会の開催日の印。シフトルール「委員会の開催日に◯◯」が効く日を示す読み取り専用の印（押せない＝ホバー演出なし・D-20）[はた 2026-07-18] */
.sgrid .colhead .hd-cmt { display: inline-block; margin-top: 2px; padding: 0 5px; font-size: 11px; font-weight: 800; line-height: 1.5; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong); white-space: nowrap; }
.sgrid .colhead.sat .dd, .sgrid .colhead.sat .dw { color: var(--info); }
.sgrid .colhead.sun .dd, .sgrid .colhead.sun .dw { color: var(--danger); }
.sgrid .week-sep { border-right: 2.5px double #b9c4cd !important; }
/* 週末の列を色分け（土＝薄い青／日＝薄い赤）。状態色(選択/違反/希望)が優先されるよう、.scellの状態指定より前に置く。 */
/* 土日祝の列背景の定義元。report.js の各人2行版Excel（scellBgArgb）がプローブ要素でこの色を実行時に読む
＝色を変えればExcel側も自動追随（クラス構造を変えるときは report.js 側も確認・T-32）[はた指示 2026-08-03] */
.sgrid .colhead.sat, .scell.sat, .sgrid td.agg-cell.sat, .sgrid .memo-cell.sat { background-color: #e9f1fb; }
.sgrid .colhead.sun, .scell.sun, .sgrid td.agg-cell.sun, .sgrid .memo-cell.sun { background-color: #fcebee; }
/* 週末の列色は行ストライプ(zebra・薄い灰色)より優先。詳細度を上げてゼブラ(.sgrid tbody tr.zebra>td)に勝たせる。
※選択/希望/違反などの状態色(.sgrid tbody tr.srow>td.scell.xxx)は従来どおり上位を維持。 */
.sgrid tbody tr > td.scell.sat { background-color: #e9f1fb; }
.sgrid tbody tr > td.scell.sun { background-color: #fcebee; }
/* 祝日の列（?v=407）: 日曜と同じ薄い赤。土曜と重なる日も祝日色を優先（.satより後に置いて勝たせる）。 */
.sgrid .colhead.hol .dd, .sgrid .colhead.hol .dw { color: var(--danger); }
.sgrid .colhead.hol, .scell.hol, .sgrid td.agg-cell.hol, .sgrid .memo-cell.hol { background-color: #fcebee; }
.sgrid tbody tr > td.scell.hol { background-color: #fcebee; }
/* ===== PDF出力（印刷）：横型・シフト表だけ・色は保持。印刷ダイアログから「PDFに保存」 ===== */
#print-root { display: none; }
@media print {
@page { size: A4 landscape; margin: 8mm; }
body.printing > *:not(#print-root) { display: none !important; }
#print-root { display: block !important; }
#print-root, #print-root * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
#print-root .print-title { font-size: 13px; font-weight: 800; margin: 0 0 6px; color: #1a2733; }
#print-root table { width: 100% !important; border-collapse: collapse !important; font-size: 8.5px; }
#print-root thead { display: table-header-group; } /* 各ページにヘッダー（日付・曜日）を繰り返す */
#print-root tr { page-break-inside: avoid; }
#print-root th, #print-root td { border: .5px solid #b9c4cd !important; padding: 1px 2px !important; text-align: center; vertical-align: middle; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; box-shadow: none !important; outline: none !important; } /* オンコール青枠(outline)も従来のbox-shadow系装飾と同じく非表示 [はた指示 2026-08-08] */
#print-root .rowhead { text-align: left; white-space: nowrap; }
#print-root .mark { display: inline-block !important; min-width: 0 !important; height: auto !important; padding: 0 1px !important; font-size: 8.5px !important; border-radius: 3px !important; }
/* マスの装飾(違反の赤リング・選択枠)はPDFで位置がページ全体に崩れ「シフトを囲む赤枠」等になるため非表示。違反などの色は背景色で残す[はた 2026-06-22] */
#print-root .scell::before, #print-root .scell::after { display: none !important; }
}
.sgrid .chk-col { position: sticky; left: 0; z-index: 4; background: var(--surface); width: 30px; min-width: 30px; max-width: 30px; text-align: center; vertical-align: middle; }
.sgrid thead .chk-col { z-index: 6; }
.sgrid .chk-col { display: none; } /* チェックボックス列は使わないので非表示 */
.sgrid .rowhead { position: sticky; left: 0; z-index: 4; background: var(--surface); min-width: 140px; max-width: 180px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgrid thead .rowhead { z-index: 6; }
.sgrid .rowhead .ru { display: block; font-size: 10px; color: var(--ink-faint); font-weight: 600; }
.leader-star { color: var(--accent); margin-right: 2px; }
/* セルと記号チップ */
.scell { min-width: 40px; height: 28px; text-align: center; vertical-align: middle; cursor: pointer; position: relative; user-select: none; }
/* 塗り/消去モード中（チップ選択=armed）はカーソルを作業画面(.main2)全体でハケ/消しゴムに。
記号・希望チップ選択中=ハケ、消去ボタン選択中=消しゴム。文字入力欄のみ通常カーソル。 */
.main2:has(.pl-chip.armed:not(.pl-erase)),
.main2:has(.pl-chip.armed:not(.pl-erase)) * { cursor: url("../assets/brush.png?v=97") 4 28, cell; }
.main2:has(.pl-chip.pl-erase.armed),
.main2:has(.pl-chip.pl-erase.armed) * { cursor: url("../assets/eraser-cur.png?v=97") 5 16, default; }
.main2:has(.pl-chip.armed:not(.pl-erase)) input, .main2:has(.pl-chip.armed:not(.pl-erase)) textarea, .main2:has(.pl-chip.armed:not(.pl-erase)) select,
.main2:has(.pl-chip.pl-erase.armed) input, .main2:has(.pl-chip.pl-erase.armed) textarea, .main2:has(.pl-chip.pl-erase.armed) select { cursor: auto; }
/* [全体レビュー 2026-09-03 CHECK-2要望] スマホで記号チップを選んで横なぞり塗りをするとき、縦スクロールは
許可しつつブラウザの既定タッチスクロールに勝たせ、なぞり塗り操作を優先する（D-09）。 */
.main2:has(.pl-chip.armed) .sgrid .scell { touch-action: pan-y; }
/* 記号は「文字だけ」で表示（四角いチップ・枠は廃止 [はた 2026-07-03]）。
マスの色は 行の縞(zebra)・土日の青/赤・状態色(違反/選択/希望など) のみ。 */
.scell .mark { display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; font-weight: 800; font-size: 13px; background: none; border: none; }
/* 勤務記号は白背景なので薄い枠線でマスを縁取り（週末色・ゼブラ上でも視認できるように） */
/* 記号の色は文字色のみ（背景・枠なし）。休み=赤字／出勤=黒字 [はた 2026-07-03]
※パレットのボタンは .pl-chip 側の枠・白背景がそのまま生きる（ここでは文字色だけ乗る） */
.sym-early, .sym-day, .sym-late, .sym-night, .sym-dawn, .sym-half, .sym-extra, .sym-other { color: var(--sym-work-tx); }
.sym-off, .sym-paid { color: var(--sym-rest-tx); }
.sym-off2 { color: var(--sym-off2-tx); } /* 法定外休日 [休日再編 段階A・はた 2026-07-16] */
.sym-nightoff { color: var(--sym-nightoff-tx); } /* 夜勤明け休日 [夜勤明け休日導入・はた 2026-08-18] */
/* 希望セル: ティール破線（入力中・自動生成で叶った場合とも） */
.scell.cell-wish { background-color: var(--brand-soft); }
.scell.cell-wish .mark { outline: 1.8px dashed var(--brand); outline-offset: 1px; }
/* 希望（未確定）の文字はティール＝確定記号（休み=赤字/出勤=黒字）と文字色でも区別 [UI-020 2026-07-08] */
.scell .mark.mark-wish { color: var(--brand-strong); }
.scell sub.rank { font-size: 8.5px; vertical-align: sub; margin-left: 1px; color: var(--brand-strong); }
/* 記号を複数選んだ希望の「+2」（代表記号の右）。優先度の添字（sub.rank）と同じ大きさ・同じ色にそろえる
[① 希望マスの複数記号 2026-08-26 design worknotes-20260826-wish3 §1] */
.scell .mark .wmore { font-size: 8.5px; margin-left: 1px; color: var(--brand-strong); }
/* 違反: 赤リング */
.scell.violation { background-color: var(--danger-soft); }
.scell.violation::after { content: ""; position: absolute; inset: 2px; border: 1.8px solid var(--danger); border-radius: 8px; pointer-events: none; }
/* オンコール対応者のマス [はた指示 2026-08-08 オンコールの青枠と凡例]。青枠はマスのいちばん外側に置く。
box-shadow ではなく outline で描く＝行/列ハイライト(row-hi/col-hi)・検索や条件クリックの強調(cell-hl)・
右クリック対象(ctx-target)・入れ替え待ち(swap-src)はどれも box-shadow で色を重ねており、
box-shadow は1プロパティにつき1宣言しか勝てないため、同じ box-shadow で青枠を描くと
ハイライトが乗るたびに青枠が消えていた（羽田野さん指摘）。outline は別プロパティなので、
これらのどれと組み合わさっても青枠だけは独立して残る。outline-offset:-2px でマスの内側ぎりぎりに
寄せ、旧 box-shadow 版と同じ位置・太さの見た目にする。
違反の赤枠(::afterの実線)・選択枠(::beforeの実線)はもともと別プロパティなので影響なし（この2つは
ハイライトが乗っても消えない前例として今回の描き方の根拠にした）。
印刷では出さない（#print-root の outline:none !important が効く。box-shadow系の装飾と同じ理由・D-21）。
Excel の各人2行版には別途、罫線として青枠を出す。
凡例（.onc-legend-sw）のアイコンも同じ宣言を共有し、見本と実物の描き方を食い違わせない（D-53・T-32）。 */
.scell.oncall, .onc-legend-sw { outline: 2px solid var(--oncall); outline-offset: -2px; }
/* 右クリック対象（緑）・入れ替え元（橙）は操作中だけ出る一時的な印で、マスの外周0〜2pxを使う。
青枠（outline）は影より後に描かれるため同じ帯だと緑・橙を完全に覆い隠す＝いまどのマスを操作して
いるかが見えなくなる。青枠だけ内側へずらして両方見えるようにする [はた指示 2026-08-08 オンコールの青枠と凡例] */
.sgrid td.scell.oncall.ctx-target, .sgrid td.scell.oncall.swap-src { outline-offset: -4px; }
/* オンコール担当の凡例（アイコン＋短い文言）。ビュー切替タブ行の右端に置く（js-grid-head内→.view-tabrowへ移設）。
.onc-legend-slot はビュー切替タブ行(ui-check.js)側が置く「差し込み先の空き場所」（margin-left:autoで右端に寄せる役）。
.onc-legend はその中へ Grid 側(ui-grid.js)が入れる「アイコン＋文言」本体。役割が違うのでクラスを分けている
（同じクラスを入れ子にすると二重のflex行になるため・T-32）。 */
.onc-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); white-space: nowrap; }
.onc-legend-sw { display: inline-block; width: 26px; height: 18px; border-radius: 6px; flex: none; }
/* シフト表の比較の凡例（色見本＋「＝あとに作られた側で変わったマス」）。onc-legend/-swと同じ作り。
色見本(.cmp-legend-sw)の背景色は .cell-diff と1つの宣言で共有する（下の状態色ブロック側・D-53）
[はた指示 2026-08-10 シフト表の比較] */
.cmp-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); white-space: nowrap; }
.cmp-legend-sw { display: inline-block; width: 26px; height: 18px; border-radius: 6px; flex: none; }
/* 比較画面: 1枚のカードに2段（上=古い方／下=新しい方）を並べ、間は境界線のみで隙間を空けない
（.card2 自体の外側パディングは残すため、カード全体としての余白は保たれる）。
各段は左に固定幅の情報欄（プラン名・作成日時・種別ピル）＋右に表という横並び。
[はた指示 2026-08-10 比較の1画面化] */
.cmp-row { display: flex; align-items: flex-start; gap: 18px; }
/* 表と表の間は境界線のみ・隙間ゼロ（中身が線に接地してよい仕様のため padding/margin は入れない） */
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
/* min-width:0が無いとflexアイテムの既定(auto)が効き、折り返せない長いトークン（プラン名の日時記号列等）の
ぶんだけ200pxを超えて広がる＝上下の表で情報欄の幅が食い違い左端・右端がズレる。0にして200pxへ強制する
（中身側は overflow-wrap:anywhere で折り返す＝ui-compare.js）[はた指摘 2026-08-10 検収・左右ズレ] */
.cmp-info { flex: 0 0 200px; width: 200px; min-width: 0; }
.cmp-board { flex: 1 1 auto; min-width: 0; }
/* 表の縦幅はブラウザ標準のresize（右下の掴み）で調整できるようにする＝独自ドラッグ実装はしない。
min-height 72px は項目行(.sgrid .colheadの実高 約34px＝padding3px+2px・.dw10px・.dd13px・line-height1.2)
＋データ行1行分(.scell{height:28px})＋行境界線ぶんの目安（縮めても見出し+1行は残る下限）。
[はた指示 2026-08-10 縦幅リサイズ] */
.cmp-board .grid-scroller { resize: vertical; min-height: 72px; }
/* 選択 */
.scell.selected { background-color: var(--info-soft); }
.scell.selected::before { content: ""; position: absolute; inset: 1px; border: 2px solid var(--info); border-radius: 8px; pointer-events: none; }
/* 塗りプレビュー */
.scell.paint-prev { background-color: var(--brand-ring); }
/* メモ（右上アンバー点）／勤務時間の調整（右上の赤い点）。両方あるときは赤点の左にアンバー点を並べる [?v=302]
[はた指示 2026-08-08 赤枠と丸印の取り合い] もとは ::after で描いていたが、必須違反の赤枠（.scell.violation::after）
も同じ ::after を使うため、同じマスに違反と丸印が両方付くと**赤枠が丸印に置き換わって消えていた**
（メモや調整を入れたマスでは必須違反が見えない＝違反の見落とし）。印ごとに専用の描き方を持たせる（T-48）＝
丸印は背景の重ね描き（背景画像は何枚でも重ねられる）にし、::after は赤枠専用にした。
マスの背景に描くものは「丸印3つ（メモ／調整／手動確定）＋先行配置の斜線」の4層。値は変数で持ち、background-image
の宣言はこの1本だけにする（層ごとに全組み合わせを書き並べない・T-32）。重ね順は先に書いたものが上＝丸印が斜線の上。
※ マスの地色を塗る指定は background の一括指定だと背景画像ごと消えるため、すべて background-color に直してある。 */
.scell { --cell-dot-a: none; --cell-dot-b: none; --cell-dot-c: none; --cell-stripes: none; --cell-hl: none;
background-image: var(--cell-dot-a), var(--cell-dot-b), var(--cell-dot-c), var(--cell-stripes), var(--cell-hl); }
.scell.has-note { --cell-dot-a: radial-gradient(circle 3.5px at calc(100% - 6.5px) 6.5px, var(--accent) 99%, transparent 100%); }
.scell.has-adj { --cell-dot-a: radial-gradient(circle 3.5px at calc(100% - 6.5px) 6.5px, var(--danger) 99%, transparent 100%); }
.scell.has-note.has-adj { --cell-dot-b: radial-gradient(circle 3.5px at calc(100% - 16.5px) 6.5px, var(--accent) 99%, transparent 100%); }
/* 手動確定マーカー: 左下の赤い点（常時表示・カーソルを当てなくても分かるように）。既存の丸印2つ（メモ／調整）は
右上、先行配置の斜線は全面＝場所も背景画像の変数スロット（--cell-dot-c）も独立しており取り合わない（D-58）。
ホバー演出は付けない（押せない印・D-20）[はた指示 2026-08-11] */
.scell.is-mn { --cell-dot-c: radial-gradient(circle 3px at 6px calc(100% - 6px), var(--danger) 99%, transparent 100%); }
/* ヘルプ・応援マーカー: 左上の小さな「応」（この日は応援先ユニット分として勤務）[2026-07-02] */
.scell.is-help { position: relative; }
.scell.is-help::before { content: "応"; position: absolute; top: 1px; left: 2px; font-size: 8px; line-height: 1; font-weight: 800; color: #7c5cb8; background: #f1ecfa; border-radius: 4px; padding: 1px 2px; pointer-events: none; }
/* 在籍開始日より前のマス（自動作成はシフトを入れない）＝グレーの斜線 [はた 2026-07-04 B-10] */
.scell.pre-join, .sgrid tbody tr.srow > td.scell.pre-join { --cell-stripes: repeating-linear-gradient(-45deg, #f3f5f7 0 5px, #e7ebef 5px 10px); }
.scell:hover { background-color: #f2f7f5; }
/* 集計行 */
.sgrid .agg-head { background: #f7f9fa; color: var(--ink-soft); font-weight: 800; padding: 3px 10px; font-size: 11.5px; } /* 集計の開閉は「簡易集計を表示」ボタン側＝この見出しは押せない（pointer除去・D-20） */
.sgrid .agg-label { position: sticky; left: 0; background: #fbfcfd; color: var(--brand-strong); padding: 2px 10px; font-size: 11.5px; font-weight: 800; white-space: nowrap; z-index: 4; }
.sgrid .agg-cell { text-align: center; font-size: 11.5px; padding: 2px 0; min-width: 40px; background: #fbfcfd; font-weight: 700; color: var(--ink-soft); }
.sgrid .agg-cell.agg-short { color: var(--danger); }
/* 不足▲・超過●の印は数値の手前に置く（数値の後ろだと桁と混ざって読みにくい）[はた指摘 2026-07-17] */
.sgrid .agg-cell.agg-short::before { content: "▲"; font-size: 8px; margin-right: 1px; }
.sgrid .agg-cell.agg-over { color: #b45309; }
.sgrid .agg-cell.agg-over::before { content: "●"; font-size: 7px; margin-right: 1px; }
/* 「集計に表示」ONの職員グループの日別出勤人数行（必要人数集計と区別する薄い色＋見出し色） */
.sgrid td.agg-group { background: #eef5f1; }
.sgrid .agg-label.agg-group { color: var(--brand-strong); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
/* 介護ユニットごとの日別出勤人数行（職員グループ集計と区別する薄い青系） */
.sgrid td.agg-careunit { background: #eef1fa; }
.sgrid .agg-label.agg-careunit { color: var(--info); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.sgrid .memo-cell input { width: 100%; border: none; font-size: 10.5px; padding: 3px 4px; background: #fffdf3; }
.sgrid .stat-col { min-width: 46px; font-size: 11px; text-align: center; background: #f7f9fa; padding: 3px 4px; white-space: nowrap; color: var(--ink-soft); }
.sgrid thead .stat-col { background: #f0f3f5; color: var(--ink-soft); font-weight: 700; }
.rowhead.hl { background: var(--accent-soft); }
/* シフト表: 職員行を1行おきにごく薄く色分け（担当者の行を目で追いやすく）[はたの指示 2026-06-13] */
.sgrid tbody tr.zebra > td { background: var(--zebra); }
.sgrid tbody tr.zebra > .chk-col,
.sgrid tbody tr.zebra > .rowhead,
.sgrid tbody tr.zebra > .stat-col { background: var(--zebra); }
/* 状態色（希望・違反・選択・塗りプレビュー・ホバー）は縞より優先して見せる */
.sgrid tbody tr.srow > td.scell.cell-wish { background-color: var(--brand-soft); }
.sgrid tbody tr.srow > td.scell.violation { background-color: var(--danger-soft); }
.sgrid tbody tr.srow > td.scell.selected { background-color: var(--info-soft); }
.sgrid tbody tr.srow > td.scell.paint-prev { background-color: var(--brand-ring); }
.sgrid tbody tr.srow > td.scell:hover { background-color: #eef4f2; }
/* [全体レビュー 2026-09-03 B03-ui-grid-plans-search-13] 押せない行（閲覧のみ・編集不可＝ui-grid.js が tr.srow.row-ro を付ける）はホバーで光らせない（D-20・D-47） */
.sgrid tbody tr.srow.row-ro > td.scell:hover { background-color: transparent; cursor: default; }
/* シフト表の比較（opts.diffPlan）で「あとに作られた側で変わったマス」に付く黄色。土日祝色(.sat/.sun/.hol・
673〜682行)に勝つよう同じ詳細度昇格パターンで、それらの定義より後・この状態色ブロックの最後（cell-wish等
よりも後）に置き、他の状態色より優先して見せる（この画面の主目的が差分表示のため）。彩度の高い真っ黄色は
避けた落ち着いた黄色（D-05）。実装は background-color のみ＝outline/::before/::after/background-image を
使う青枠・違反枠・選択枠・丸印・先行配置の斜線とすべて共存する（D-58）。凡例の色見本(.cmp-legend-sw)と
同じ宣言を共有し、見本と実物の色を食い違わせない（.onc-legend-swと.scell.oncallの流儀と同じ・D-53）
[はた指示 2026-08-10 シフト表の比較]。 */
.sgrid tbody tr.srow > td.scell.cell-diff, .cmp-legend-sw { background-color: #f5e6a8; }
/* 右クリック/クリックでメニューを開いている対象マスを緑枠で明示 */
.sgrid td.scell.ctx-target { box-shadow: inset 0 0 0 2px #16a34a; position: relative; z-index: 2; }
/* 入れ替え待ちの元マス（メニュー「入れ替え」→相手マスのクリックで交換）[UI-005 2026-07-07] */
.sgrid td.scell.swap-src { box-shadow: inset 0 0 0 2px #d97706; position: relative; z-index: 2; animation: swap-blink 1s ease-in-out infinite alternate; }
@keyframes swap-blink { from { background: #fef3c7; } to { background: #fde68a; } }
/* 行・列のクロスヘア強調（ホバー中の職員行と日付列）。box-shadow inset の半透明オーバーレイで、
下地の色（週末/縞/状態色）を保ったままうっすら重ねる＝背景の優先順位に干渉しない[はた 2026-06-22] */
.sgrid tbody tr.row-hi > td, .sgrid tbody td.scell.col-hi { box-shadow: inset 0 0 0 999px rgba(37, 99, 165, .13); } /* 交互行の縞と見分けやすいよう濃く [UI-019 2026-07-08] */
.sgrid tbody tr.row-hi > .rowhead { box-shadow: inset 0 0 0 999px rgba(37, 99, 165, .20); }
.sgrid thead th.colhead.col-hi { box-shadow: inset 0 -1.5px 0 var(--line), inset 0 0 0 999px rgba(37, 99, 165, .26); }
/* ユニットごとの見出し行（職員をユニットで区切って探しやすく）[はた 2026-06-22] */
/* ユニット見出し行は縦スクロールで項目行の直下に固定（各ユニットtbodyが範囲＝次のユニットで入れ替わる）。
sticky は td でなく tr に効かせる（Chromeのテーブルでtd stickyが効かないため）。top はJSで項目行の実高に合わせる[はた 2026-06-22] */
.sgrid tr.unit-row { position: sticky; top: 34px; z-index: 5; }
.sgrid tr.unit-row > td { background: var(--brand-soft); border-top: 2px solid var(--brand); border-bottom: 1px solid var(--line); padding: 0; }
.sgrid .unit-row-label { position: sticky; left: 0; display: inline-block; padding: 4px 12px; font-size: 12.5px; font-weight: 800; color: var(--brand-strong); }
.judge-acc { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 10px; }
.judge-acc summary { padding: 11px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; background: #fbfcfd; list-style: none; }
.judge-acc summary::-webkit-details-marker { display: none; }
.judge-acc summary::before { content: "▸ "; color: var(--ink-faint); }
.judge-acc[open] summary::before { content: "▾ "; }
.judge-acc summary:hover { background: var(--line-soft); } /* 開閉できる見出しはホバーで変化（.viol-grp summaryと同仕様・D-21） */
.kijun-calc { font-weight: 800; }
.kijun-calc.ng-val { color: var(--danger); }
/* 算定結果・取得加算の機能カテゴリ小見出し行 */
.kijun-grp td { background: var(--line-soft); font-weight: 800; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-soft); padding-top: 7px; padding-bottom: 7px; }
/* 取得加算ページの2階層区分：サービスの大見出し（機能カテゴリ .kijun-grp より一段上） */
.kijun-svc td { background: var(--surface); color: var(--brand); font-weight: 800; font-size: 13.5px; letter-spacing: .02em; padding-top: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); }
/* ---------- ホームのヒーロー（落ち着いた単色カード・グラデ廃止） ---------- */
.hero { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-card); padding: 26px 30px; box-shadow: var(--shadow); }
.hero h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; color: var(--ink); }
.hero p { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.hero .btn { background: var(--brand); color: #fff; }
.hero .btn:hover { background: var(--brand-strong); filter: none; }
.stat-card { display: flex; flex-direction: column; gap: 4px; }
.stat-card .sc-v { font-size: 27px; font-weight: 800; color: var(--ink); }
.stat-card .sc-l { font-size: 12.5px; color: var(--ink-faint); font-weight: 700; }
.flow3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.flow3 .f-step { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.flow3 .f-no { color: var(--brand-strong); font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.flow3 .f-t { font-weight: 800; font-size: 14.5px; margin-bottom: 4px; }
/* シフト編集: タイトル行に併記する作成者・作成日時（控えめなメタ表示） */
.head-meta { display: flex; align-items: center; gap: 2px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.head-meta .hm-it { white-space: nowrap; }
.head-meta .hm-lb { font-weight: 700; }
/* シフト編集のメモ欄（.memo-line）は「メモ」ボタン＋モーダルへ置き換えたため撤去 [はた指示 2026-08-05 日別シフト表の画面内統合] */
/* ---------- ログイン画面（デモ用ゲート） ---------- */
.login-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(160deg, var(--brand-soft, #e7f4f0) 0%, #f6f8f9 62%); }
.login-card { width: 100%; max-width: 420px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 34px 32px 26px; }
.login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.login-brand .login-logo { height: 32px; width: auto; display: block; }
.login-h { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.login-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-fld { display: flex; flex-direction: column; gap: 6px; }
.login-fld .lf-lb { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.login-fld input { width: 100%; border: 1px solid var(--line); border-radius: var(--r-ui); padding: 11px 13px; font-size: 14px; background: var(--surface); color: var(--ink); }
.login-fld input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.login-err { display: none; background: #fdecea; color: #b4291a; border: 1px solid #f3c9c3; border-radius: var(--r-ui); padding: 9px 12px; font-size: 12.5px; line-height: 1.6; }
.login-go { width: 100%; margin-top: 4px; }
.login-demo { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.login-demo summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--brand-strong, var(--brand)); }
.login-demo summary:hover { text-decoration: underline; } /* リンク風の開閉見出し＝a:hoverと同じ下線（D-20） */
.login-demo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.login-demo-item { text-align: left; border: 1px solid var(--line); border-radius: var(--r-ui); padding: 9px 12px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.login-demo-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.login-demo-item .ld-nm { font-size: 13px; font-weight: 700; color: var(--ink); }
.login-demo-item .ld-meta { font-size: 11.5px; color: var(--ink-faint); }
.login-note { margin-top: 16px; font-size: 11px; color: var(--ink-faint); line-height: 1.6; text-align: center; }
/* もう一方の入口への控えめなリンク（利用者ログイン ↔ システム管理コンソール） */
.login-crosslink { display: block; width: 100%; margin-top: 14px; padding: 9px 8px 0; background: none; border: none; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: center; }
.login-crosslink:hover { color: var(--brand-strong); text-decoration: underline; }
/* システム管理コンソールのログイン（利用者ログインと見た目で区別＝濃色） */
.login-console { background: linear-gradient(160deg, #2b3a44 0%, #3a4c57 60%, #46606d 100%); }
.login-console .login-card { border-top: 4px solid #2b3a44; }
.login-console .login-go { background: #2b3a44; }
.login-console .login-go:hover { background: #1f2b33; filter: none; }
.login-console-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 22px; }
.login-console-badge { display: inline-flex; align-items: center; gap: 8px; background: #2b3a44; color: #fff; padding: 10px 18px; border-radius: 11px; font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.login-console-sub { font-size: 12px; color: var(--ink-faint); font-weight: 700; }
/* ---------- 行のドラッグ&ドロップ並べ替え ---------- */
.tbl td.drag-h { cursor: grab; user-select: none; font-size: 15px; }
.tbl td.drag-h:active { cursor: grabbing; }
.tbl td.drag-h:hover { background: var(--line-soft); } /* つかめるハンドルはホバーで変化（☰の色はインライン指定のため背景で示す・D-20） */
/* ドラッグ中の行を浮き上がらせる（影＋ブランド色＋枠でドロップ位置を分かりやすく） */
.tbl tr.dragging td { background: var(--brand-soft); box-shadow: 0 10px 22px -6px rgba(16,18,22,.40); border-top: 1px solid var(--brand); border-bottom: 1px solid var(--brand); }
.tbl tr.dragging td:first-child { border-left: 1px solid var(--brand); }
.tbl tr.dragging td:last-child { border-right: 1px solid var(--brand); }
/* 並べ替えの「すべり」演出（案A・2026-08-17 羽田野さん承認・全ての行移動ページ共通）。
FLIP（UI.withSlide）が transform を当てた直後にこのクラスを足して 0 へ遷移させる。
離した瞬間の「納まった」合図は .dnd-settled（背景が一瞬色づいて消える）。 */
.dnd-anim { transition: transform .18s ease; }
.dnd-settled { animation: dndSettle .45s ease; }
@keyframes dndSettle { 0% { background: var(--brand-soft); } 100% { background: var(--surface); } }
@media (prefers-reduced-motion: reduce) {
.dnd-anim { transition: none; }
.dnd-settled { animation: none; }
}
/* ボタン文字は折り返さない（「削除」等が改行しないように） */
.btn { white-space: nowrap; }
/* 職員テーブル: 見出し（項目）に色＋薄いグレーの列区切りで列の境目を分かりやすく */
.tbl.staff-tbl thead th { background: var(--brand-soft); color: var(--ink); border-right: 1px solid var(--line); }
.tbl.staff-tbl thead th:last-child { border-right: none; }
.tbl.staff-tbl tbody td { border-right: 1px solid #eef1f3; }
.tbl.staff-tbl tbody td:last-child { border-right: none; }
@media (max-width: 520px) {
.login-card { padding: 26px 20px 22px; }
}
/* ---------- 印刷 ---------- */
@media print {
.topnav, .palette, .cellbar, .save-fab, .chat-fab, .chat-panel, .toolbar, .wiz-foot { display: none !important; }
.grid-scroller { max-height: none; box-shadow: none; }
body { background: #fff; }
}
/* 固定休（土日）・代休も「休み」として目立たせる（公休より少しやわらかい赤系で区別）[はた 2026-06-23] */
/* ---------- モバイル対応は本ファイル末尾の統合ブロックに集約（2026-06-14 レスポンシブ修正） ---------- */
/* ---------- 2026-06-12 議事録反映 ---------- */
/* 職員一覧: 列ヘッダーを固定（職員が多くても見出しが消えない）[D1] */
.tbl-sticky thead th { position: sticky; top: 72px; background: var(--brand-soft); z-index: 5; box-shadow: inset 0 -1.5px 0 var(--line); }
/* モーダル（.modal が縦スクロール枠）・ドロワー（.drawer-b）内の表は、見出しを枠の先頭(top:0)に吸着させる。
ページ用の top:72px（ナビ直下）のままだと枠の72px下に吸着し、上の隙間に本文の行が透けて見える（希望休提出状況で発覚）[はた指摘 2026-07-21] */
.modal .tbl thead th, .drawer-b .tbl thead th, .modal .tbl-sticky thead th, .drawer-b .tbl-sticky thead th { top: 0; }
/* システム管理配下はナビが非sticky（.sys-topbar・スクロールで流れる）＝見出しはビューポート先頭(top:0)に吸着させる。
全表共通の top:72px のままだと見出しがビューポート上端から72px下に吸着し、上の帯(0〜72px)に本文の行が透けて見える（祝日の管理で発覚）[はた指摘 2026-07-21] */
.sysadmin-shell .tbl thead th, .sysadmin-shell .tbl-sticky thead th { top: 0; }
/* 職員一覧: できる勤務を「全区分・同じ大きさのマス」で表示。
入れる=白／入れない=グレー [D2 → はたの指示 2026-06-13 で色付き廃止・白に変更] */
.canline { display: flex; gap: 4px; flex-wrap: wrap; max-width: 660px; max-height: 58px; overflow-y: auto; align-content: flex-start; }
/* 幅は最低34pxで中身に合わせて広がる（4文字以上の記号が「B1早…」と切れないように）[はた 2026-07-13] */
.mini-sym { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 6px; white-space: nowrap; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 700; }
.mini-sym.is-ng { background: #d8dde4; color: #fdfefe; border-color: #ccd4db; }
/* 職員一覧の勤務可能シフトはクリックで切替できる（カーソルとホバーで明示） */
.staff-tbl .mini-sym { cursor: pointer; }
.staff-tbl .mini-sym:hover { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-ring); }
/* ---------- JSがインラインstyleで押せる化した要素への共通ホバー（D-20 横展開監査 2026-08-01） ----------
style.cursor / cssText 由来は「cursor: pointer」（空白あり）、innerHTML文字列由来は「cursor:pointer」（空白なし）で
style属性に残るため両方を拾う。JS側を変えずにCSSだけでホバー変化を機構として保証する。 */
button[style*="cursor:pointer"]:hover, button[style*="cursor: pointer"]:hover,
div[style*="cursor:pointer"]:hover, div[style*="cursor: pointer"]:hover,
span[style*="cursor:pointer"]:hover, span[style*="cursor: pointer"]:hover,
label[style*="cursor:pointer"]:hover, label[style*="cursor: pointer"]:hover,
summary[style*="cursor:pointer"]:hover, summary[style*="cursor: pointer"]:hover { filter: brightness(.95); }
summary[style*="cursor:pointer"]:hover, summary[style*="cursor: pointer"]:hover { text-decoration: underline; } /* リンク風の開閉見出し（請求内訳など）は下線も付ける */
.tbl tr[style*="cursor:pointer"]:hover td, .tbl tr[style*="cursor: pointer"]:hover td { background: #f7faf9; } /* 行クリックで編集を開く一覧（職員一覧）＝tr.clickableと同じ見え方（D-21） */
.plan-name:hover { color: var(--brand-strong); } /* シフト名はクリックで名前変更（cursorはインライン指定・色はCSSで変えられる） */
/* =====================================================
モバイル対応（統合 / 2026-06-14 レスポンシブ修正・?v=6）
方針: PC(>=761px)は一切変更しない。すべて @media 内の追加・上書きのみ。
配置: 全基底規則の後（末尾）に置き、カスケード順でも確実に上書き。
注: .card2:has(> table.tbl) は :has() 対応ブラウザ前提
（Chrome105+ / Safari15.4+ / Firefox121+。本デモはモダンブラウザ前提）。
===================================================== */
@media (max-width: 760px) {
.topnav { padding: 0 8px; gap: 2px; }
.brand2 { margin-right: 6px; }
.brand2 .brand-logo { height: 30px; } /* 760px以下はシンボルのみ（ui-core.js の picture）＝最小幅を下回る横組みを出さない */
.brand2 .nm { display: none; }
.fac-pill { display: none; }
/* タブ・氏名は折り返さず1行のまま、ナビ全体（.topnav）を横スクロール容器にする（狭幅で1文字ずつ縦に折れてヘッダーが
崩れるのを防ぐのに加え、タブ列（.nav-tabs）だけを内側でスクロールさせる旧方式は隣のユーザーチップ（.nav-right）に
押されて極端に狭い帯へ圧縮され、タブがほぼ見えない状態でカード外へはみ出して押せなくなっていた＝実測 375px幅で
「事業所設定」「ユーザー・契約」タブが画面外（375pxを超える位置）に出て操作不能。ナビ全体を1本の横スクロール帯にし、
ブランド・タブ・ユーザーチップとも自然な幅のまま横スクロールで到達できるようにする [はた指示 2026-07-29 スマホ幅修正] */
.topnav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.nav-tabs, .nav-right { flex-shrink: 0; }
.nav-tab { padding: 4px 11px 10px; white-space: nowrap; }
.user-chip { white-space: nowrap; }
.page2 { padding: 14px 10px 70px; }
.stepper .step { width: 64px; }
.stepper .slb { display: none; }
/* 横長の一覧テーブルはカード内で横スクロール（シフト一覧/職員/システム設定者/提出状況/グループ等） */
.card2:has(> table.tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card2:has(> table.tbl) > table.tbl { min-width: max-content; }
/* 横スクロール枠と競合する固定ヘッダ吸着をモバイルで解除（.card2前置で順序非依存に上書き） */
.card2 .tbl thead th { position: static; top: auto; box-shadow: none; }
/* tbl-sticky（ページ直下72pxに吸着する見出し）を持つ表を .tbl-wrap-x-sticky で包んだ場合の狭幅専用スクロール化。
共有クラス .tbl-wrap-x はどの幅でも常時 overflow-x:auto（結果としてoverflow-yもauto化しsticky基準がページで
なく枠自身に変わる）なので流用せず、デスクトップでは無指定＝従来どおり overflow可視＋ページに吸着したまま、
狭幅だけこの専用クラスでスクロール化＋sticky解除（解除は上の .card2 .tbl thead th で共通に効く）する
[はた指示 2026-07-29 スマホ幅修正・シフト一覧] */
.tbl-wrap-x-sticky { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap-x-sticky > .tbl { min-width: max-content; }
/* ツールバー子要素を縮小可能に（横溢れ防止） */
.toolbar select, .toolbar input, .toolbar button { min-width: 0; max-width: 100%; }
/* 比較画面: 狭幅では情報欄（プラン名・作成日時・種別ピル）を表の左でなく上に折り返す（D-09）
[はた指示 2026-08-10 比較の1画面化] */
/* flex-direction:column では align-items が交差軸＝幅の揃え方の意味になり、flex-start（初期値）だと
stretchせず中身の最大幅（表の全幅）まで.cmp-boardが広がってoverflow:autoの枠として機能しなくなる。
stretchで幅を親(.cmp-row=カード幅)に揃える [はた指摘 2026-08-10 検収差し戻し・スマホ幅はみ出し] */
.cmp-row { flex-direction: column; align-items: stretch; }
.cmp-info { width: 100%; flex: none; }
}
@media (max-width: 520px) {
/* トップナビをさらに圧縮（5タブ＋ユーザーチップを1行に収める） */
.topnav { padding: 0 4px; gap: 0; }
.nav-tab { padding: 4px 8px 10px; font-size: 13px; }
.nav-right { gap: 6px; }
.brand2 .brand-logo { height: 26px; }
.user-chip { padding: 4px 8px 4px 4px; font-size: 12px; gap: 6px; }
.user-chip .avatar { width: 24px; height: 24px; font-size: 10px; }
.user-chip .uc-name small { display: none; } /* 狭幅では権限表記を隠してナビを圧迫しない */
/* ページ見出しは縦積み＋操作ボタン全幅 */
.page-head { flex-direction: column; align-items: stretch; gap: 10px; }
.page-head .sp { display: none; }
.page-head .btn { width: 100%; }
/* plan編集のシフト名入力（inline固定幅）を全幅化して狭幅でも溢れないように */
.page-head input { width: 100%; max-width: 100%; min-width: 0; }
/* 余白増の反動を抑える: 狭幅ではカード余白を詰める／新規作成ボタンは全幅／メモは全幅 */
.card2 { padding: 16px 16px; }
.home-head .btn { width: 100%; }
/* 狭幅ではタイトルとステッパーを縦積み（ステッパーは行内中央のまま） */
.wiz-head { grid-template-columns: 1fr; }
/* ステッパー圧縮（狭幅でも従来同等〜やや拡大。デスクトップ拡大に合わせ連結線位置も調整） */
.stepper { gap: 2px; }
.stepper .step { width: 56px; gap: 4px; }
.stepper .step .dot { width: 34px; height: 34px; font-size: 13px; }
.stepper .step:not(:first-child)::before { top: 17px; }
/* ウィザード下部の操作ボタン: 3つ横一列は375px幅に収まらない（実測409px）。
末尾の主ボタン（次へ/シフトを作成/作成完了）を全幅の下段にし、残りは上段で等分 [はた 2026-07-16] */
.wiz-foot { flex-wrap: wrap; gap: 10px; }
.wiz-foot .btn { flex: 1 1 auto; min-width: 0; }
.wiz-foot > .btn:last-child { flex-basis: 100%; }
/* チャットパネルは下部の操作ボタン帯に重ねない（開いたまま「次へ」等を押せる位置・高さ）[はた 2026-07-16] */
.chat-panel { bottom: 140px; height: min(380px, calc(100vh - 220px)); }
/* セグメント（ビュー切替など）は溢れたら横スクロール */
.seg { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seg button { white-space: nowrap; }
/* 優先度の調整パネル: 5列固定は375pxで条件名が数pxに潰れて縦折れするため、
スマホ幅は「☰｜優先区分｜優先順位｜条件」＋（違反があるときだけ）件数の2段組みに
[はた指示 2026-07-19／順序主導 2026-07-20／個別設定一覧と同じ列様式へ 2026-08-11] */
.prio-head { display: none; }
.prio-item { grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "hd band no name" "cnt cnt cnt cnt"; row-gap: 2px; }
.prio-item .drag-h { grid-area: hd; }
.prio-item .prio-no { grid-area: no; }
.prio-item .prio-name { grid-area: name; }
.prio-item .prio-band { grid-area: band; }
.prio-item .prio-cnt { grid-area: cnt; text-align: left; font-size: 12px; }
.prio-item .prio-cnt .prio-none { display: none; } /* 違反なしの「—」行は出さない＝行が縮んで1段のまま */
/* 個別設定の統合一覧: 5列固定は375px幅で条件名が潰れるため、
1段目「☰｜番号｜ルール名」／2段目「条件」／3段目「優先区分」の3段組みに（D-09）[はた指示 2026-08-05 個別設定と優先度の統合] */
.rlp-head { display: none; }
.rlp-item { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "hd no rule" "cond cond cond" "prio prio prio"; column-gap: 10px; row-gap: 4px; }
.rlp-item .drag-h { grid-area: hd; }
.rlp-item .rlp-no { grid-area: no; padding: 2px 7px; }
.rlp-item .rlp-rule { grid-area: rule; }
.rlp-item .rlp-cond { grid-area: cond; }
.rlp-item .rlp-prio { grid-area: prio; }
.rlp-item-plain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rule" "cond"; }
/* テーブルセルを少し詰める */
.card2 .tbl th, .card2 .tbl td { padding: 9px; }
/* できる勤務マス: 入れ子の縦スクロールを解除して自然に折返し（タッチのジェスチャ競合回避） */
.canline { max-height: none; overflow-y: visible; }
/* モーダル/ドロワー全幅 */
.modal { min-width: 0; width: 100%; max-height: 90vh; }
.modal-b { padding: 8px 16px 16px; }
.modal-f { padding: 6px 16px 18px; flex-wrap: wrap; } /* ボタン3つの行が375px幅で左へはみ出すのを防ぐ（各ボタンはnowrapのまま行を折る・D-09/D-14）[2026-07-29] */
.drawer { width: 100vw; max-width: 100vw; }
.drawer-b { padding: 14px; }
.drawer-f { padding: 12px 14px; }
/* フォーム: 固定幅フィールド容器を全幅化（min-width指定のflex-growフィールドは除外） */
.modal .fld, .drawer .fld, .card2 .fld { min-width: 0; }
.modal .fld[style*="width:"]:not([style*="min-width:"]),
.drawer .fld[style*="width:"]:not([style*="min-width:"]),
.card2 .fld[style*="width:"]:not([style*="min-width:"]) { width: 100% !important; }
/* fld 直下の単一入力のみ全幅（郵便/電話などの分割入力＝入れ子divは触らない） */
.modal .fld > input:not(.rf-num), .modal .fld > select, .modal .fld > textarea,
.drawer .fld > input:not(.rf-num), .drawer .fld > select, .drawer .fld > textarea,
.card2 .fld > input:not(.rf-num), .card2 .fld > select, .card2 .fld > textarea { width: 100%; }
/* 郵便番号・電話など gap:6px の分割入力行は折返し可に（小型inputはそのまま維持） */
.modal div[style*="gap:6px"], .drawer div[style*="gap:6px"], .card2 div[style*="gap:6px"] { flex-wrap: wrap; }
/* 横並びフォーム行（gap:10〜24px）を1列化。分割入力(gap:6/8px)は対象外 */
.modal div[style*="display:flex"][style*="gap:10px"],
.modal div[style*="display:flex"][style*="gap:14px"],
.modal div[style*="display:flex"][style*="gap:18px"],
.modal div[style*="display:flex"][style*="gap:20px"],
.modal div[style*="display:flex"][style*="gap:24px"],
.drawer div[style*="display:flex"][style*="gap:10px"],
.drawer div[style*="display:flex"][style*="gap:14px"],
.drawer div[style*="display:flex"][style*="gap:18px"],
.drawer div[style*="display:flex"][style*="gap:20px"],
.drawer div[style*="display:flex"][style*="gap:24px"],
.card2 div[style*="display:flex"][style*="gap:14px"],
.card2 div[style*="display:flex"][style*="gap:18px"],
.card2 div[style*="display:flex"][style*="gap:20px"],
.card2 div[style*="display:flex"][style*="gap:24px"] {
flex-direction: column; gap: 8px; align-items: stretch !important;
}
/* チェック/ラジオ群を縦積み（長文ラベルの溢れ防止） */
#st-roles, #st-quals, #st-training, #st-can, #st-help-units, #st-help-kbns { flex-direction: column; gap: 6px; }
.chk-inline { white-space: normal; }
/* ウィザード期間/作り方カードは1列 */
.card-grid.cols3 { grid-template-columns: 1fr; }
/* plan編集 パレット: 群ごとの行は折返さず横スクロール（希望群/記号群は縦分割のまま） */
.pl-chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.pl-chips > * { flex-shrink: 0; }
.pl-chip { white-space: nowrap; }
.pl-row { flex-wrap: wrap; }
/* セル選択バーを圧縮 */
.cellbar { padding: 7px 10px; gap: 6px; }
.cellbar button { padding: 5px 10px; font-size: 11.5px; }
}
/* 画面左下の版数表示（お問い合わせ時の版の特定に使う）[UI-001 2026-07-07] */
#app-ver { position: fixed; left: 8px; bottom: 6px; z-index: 40; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); pointer-events: none; user-select: none; }
@media print { #app-ver { display: none !important; } }
/* =====================================================
初期設定 一括投入（js/ui-setup-pack.js）
既存クラスは変更せず、この画面専用のクラスだけを足す
===================================================== */
.pk-h { word-break: auto-phrase; } /* 見出しは文節の切れ目で折る（D-16） */
.pk-seg { margin: 0 0 16px; }
.pk-lead { font-size: 14px; color: var(--ink); line-height: 1.85; margin: 0 0 14px; }
.pk-file { font-size: 14px; color: var(--ink); }
.pk-kv { display: flex; flex-wrap: wrap; gap: 8px 34px; font-size: 14px; line-height: 1.9; }
.pk-kv > div { display: flex; gap: 10px; min-width: 0; } /* ラベルと値は隣どうしに置く（D-27） */
.pk-kv > div > span:first-child { color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.callout.err { background: var(--danger-soft); border-color: #f0bfbf; color: #96261f; }
.pk-note-h { font-size: 14px; font-weight: 800; }
.pk-list { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.9; }
.pk-list li + li { margin-top: 6px; }
.pk-state { font-size: 13.5px; padding: 4px 12px; } /* 状態の文字を小さくしない（D-08）。折り返しは .pill の nowrap のまま（D-14） */
.tbl th.pk-wrap, .tbl td.pk-wrap { white-space: normal; min-width: 300px; }
.pk-acts { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pk-mt { margin-top: 16px; }
.pk-txt {
width: 100%; min-height: 240px; margin-top: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.85;
border: 1.5px solid var(--line); border-radius: var(--r-ui); background: var(--surface); resize: vertical;
}
.pk-txt:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
@media (max-width: 760px) {
.tbl th.pk-wrap, .tbl td.pk-wrap { min-width: 220px; }
.pk-txt { min-height: 300px; }
}
/* 充足状況タブ「この設定でシフトが組めるか（検算）」（js/ui-setup-pack.js） */
.pk-fe-sec + .pk-fe-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pk-fe-h { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
/* 状態のチップと結論の文は隣どうしに置く（D-27・両端に振り分けない） */
.pk-fe-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pk-fe-top > .pill { align-self: center; }
.pk-fe-lead { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.85; min-width: 0; }
/* 対処・数値・注記はどれも本文色・本文の大きさで書く（薄い灰色の小さい字にしない・D-08） */
.pk-fe-line, .pk-fe-note { font-size: 14px; color: var(--ink); line-height: 1.85; margin: 10px 0 0; }
.pk-fe-sub { font-size: 14px; font-weight: 700; color: var(--ink); margin: 16px 0 0; }
.pk-fe-sec .pk-list { margin-top: 8px; }
.pk-fe-sec .tbl-wrap-x { margin-top: 12px; }
.pk-fe-sec .tbl th, .pk-fe-sec .tbl td { white-space: nowrap; } /* データ表のセルは折り返さない（D-22・はみ出す分は横スクロール） */
.pk-fe-sec .tbl th.pk-wrap, .pk-fe-sec .tbl td.pk-wrap { white-space: normal; }
.pk-short { color: var(--danger); font-weight: 700; white-space: nowrap; }
/* ---------- 日別シフト表（route "daily"） [はた指示 2026-08-04 日次配置表／2026-08-04 日別シフト表・再編] ---------- */
/* 盤面は縦横とも1つのスクロール枠にまとめる。時刻の行（目盛り）は枠の中で上に、職員名の列は左に貼り付ける
＝下・横どちらへスクロールしても見出しが消えず、目盛りと帯がズレない。背景色を必ず敷いて中身を透けさせない（D-22）。 */
/* 月別シフト表の画面内に埋め込まれて上部が高くなったため、高さは画面基準の 60vh（最低320px）にする
[はた指示 2026-08-05 日別シフト表の画面内統合] */
.daily-grid-scroller { overflow: auto; max-height: max(320px, 60vh); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.daily-grid-inner { width: max-content; }
.daily-ruler { display: flex; border-bottom: 1.5px solid var(--line); background: var(--brand-soft); position: sticky; top: 0; z-index: 3; }
/* 左上の角（目盛り行×職員名列）。.daily-row-label より後ろに書かれた指定に負けないよう2階層で指定する */
.daily-ruler .daily-ruler-corner { position: sticky; left: 0; z-index: 4; background: var(--brand-soft); }
.daily-ruler-track { position: relative; height: 32px; flex: 0 0 auto; }
.daily-ruler-label { position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding-left: 4px; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; } /* 軸ラベルを小さく薄くしない（D-08） */
.daily-ruler-viol { position: absolute; inset: 0; pointer-events: none; }
.daily-ruler-underline { position: absolute; bottom: 0; height: 4px; background: var(--danger); border-radius: 2px; }
.daily-rows { display: flex; flex-direction: column; }
.daily-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.daily-row:last-child { border-bottom: none; }
.daily-row-label { flex: 0 0 190px; width: 190px; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: sticky; left: 0; z-index: 2; background: var(--surface); }
.daily-row-name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-row-role { display: inline-block; margin-left: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); } /* 職種＝実データを薄灰・極小にしない（D-46） */
.daily-row-break { font-size: 13px; color: var(--ink); }
.daily-track { position: relative; flex: 0 0 auto; min-height: 47px; }
.daily-track-bg { position: absolute; top: 6px; bottom: 6px; background: var(--line-soft); border-radius: 6px; }
/* 帯の文字色はJS側が色の明るさから決める（明るい色=濃い文字・暗い色=白文字）。CSSの#ffは暗い色向けの既定値。
明るい帯でも輪郭が出るよう薄い縁取り（inset）を足す [はた指示 2026-08-05 記号色の明色化] */
.daily-band { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(16,24,40,.18), inset 0 0 0 1px rgba(16,24,40,.10); overflow: hidden; }
/* 押せる行（編集権限のある行）だけにホバー・ポインタを付ける（D-20） */
/* touch-action: pan-y ＝ 縦のスクロールは残したまま、横方向のドラッグ（塗り・伸縮）だけを画面側で受け取る */
.daily-band--edit { cursor: pointer; touch-action: pan-y; }
.daily-band--edit:hover { filter: brightness(1.08); }
/* 帯の両端のつまみ（ドラッグで開始・終了を伸縮）。当たり判定は10px確保する */
.daily-band-handle { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; touch-action: none; }
.daily-band-handle--st { left: 0; border-radius: 6px 0 0 6px; }
.daily-band-handle--en { right: 0; border-radius: 0 6px 6px 0; }
.daily-band--edit:hover .daily-band-handle { background: rgba(255,255,255,.34); }
/* ドラッグ中に塗られる範囲のプレビュー */
.daily-drag-preview { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; background: var(--brand); opacity: .5; outline: 2px solid var(--brand-strong); pointer-events: none; }
.daily-cell { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; }
.daily-cell--edit { cursor: pointer; touch-action: pan-y; }
.daily-cell--edit:hover { background: var(--brand-soft); }
.daily-viol-overlay { position: absolute; inset: 0; pointer-events: none; }
.daily-viol-mark { position: absolute; top: 2px; bottom: 2px; border: 2px solid var(--danger); border-radius: 8px; background: rgba(216,58,58,.08); }
.daily-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.daily-pal-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
.daily-pal-chip:hover { border-color: var(--brand); }
/* 選択中はシフト表（月別）のパレット .pl-chip.armed と同じ「へこみ」表現に統一（D-21）
[はた指示 2026-08-05 盤面操作の見直し] */
.daily-pal-chip.armed { border-color: var(--brand); box-shadow: inset 0 3px 7px rgba(0,0,0,.32), inset 0 1px 3px rgba(0,0,0,.18), 0 0 0 3px var(--brand-ring); }
.daily-pal-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(16,24,40,.14); }
/* 業務を選択中は、シフト表（月別）と同じ筆カーソルにする（.pl-chip.armed の規則と同型・T-32）。
入力部品の上ではカーソルを戻す。 */
.main2:has(.daily-pal-chip.armed),
.main2:has(.daily-pal-chip.armed) * { cursor: url("../assets/brush.png?v=97") 4 28, cell; }
.main2:has(.daily-pal-chip.armed) input, .main2:has(.daily-pal-chip.armed) textarea, .main2:has(.daily-pal-chip.armed) select { cursor: auto; }
/* 「✕ 消す」チップは廃止（削除は帯クリックで開く編集ポップの「削除」ボタン）＝.daily-pal-erase の定義も撤去した [はた指示 2026-08-04 日別シフト表・再編／2026-08-05 盤面操作の見直し] */
.daily-editpop { position: fixed; z-index: 1150; width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 14px; }
.daily-swatchrow { display: flex; flex-wrap: wrap; gap: 8px; }
/* 業務記号の編集: 「利用可能な職員の制御」の選択肢と「備考」がくっついて見えるため、備考の上に間隔を確保する
（制御がオフでトグル行の直下に来るときも同じ間隔・D-51）[はた指示 2026-08-07 備考の上の余白] */
#dt-note-fld { margin-top: 20px; }
/* 明るい色でも白地で輪郭が出るよう薄い縁取り（選択中は従来どおり濃い枠が上書き）[はた指示 2026-08-05 記号色の明色化] */
.daily-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(16,24,40,.12); cursor: pointer; padding: 0; }
.daily-swatch:hover { filter: brightness(1.08); }
.daily-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-soft); }
.daily-slot-row select { padding: 6px 8px; border: 1.5px solid #d6dde3; border-radius: 7px; font-size: 13px; }
@media (max-width: 640px) {
.daily-row-label { flex-basis: 120px; width: 120px; padding: 8px; }
.daily-row-name { font-size: 13px; }
.daily-row-role { display: block; margin-left: 0; }
.daily-row-break { font-size: 12px; }
.daily-pal-chip { font-size: 12.5px; padding: 6px 10px; }
.daily-editpop { width: 210px; }
}
/* [全体レビュー 2026-09-03 B01-ui-check-head-8] 「考慮しない」節は空でも枠を残す（項目が消えると節ごと消えたように見えるため） */
.prio-off-list:empty { min-height: 44px; border: 1px dashed var(--line); border-radius: 10px; }
/* 月中での修正の進捗モーダル（ai-review.js openRepairProgress）[全体レビュー 2026-09-03 A17-perf-9・D-34]
.repair-prog はネイティブの