:root {
  --paper: #F2F1EC;
  --surface: #FFFFFF;
  --surface-2: #F8F7F4;
  --ink: #24222C;
  --ink-2: #5E5B69;
  --ink-3: #908D9B;
  --line: #DDDBD4;
  --accent: #33518F;
  --accent-ink: #FFFFFF;
  --accent-soft: #E7ECF7;
  /* トップバー（紺のアプリバー。カード内の操作ボタンと視覚的に区別する） */
  --topbar-bg: #2F3F68;
  --topbar-ink: #F5F7FC;
  --topbar-ink-2: #BAC5DE;
  --topbar-line: rgba(255,255,255,.30);
  --topbar-btn-bg: rgba(255,255,255,.10);
  --topbar-active-bg: #FFFFFF;
  --topbar-active-ink: #2F3F68;
  --topbar-mark: #93ACE0;
  /* ステータス */
  --s-wait-call: #A16207; --s-wait-call-bg: #FBF0DC;
  --s-wait-visit: #1D4ED8; --s-wait-visit-bg: #E4EBFB;
  --s-checked: #0F766E;  --s-checked-bg: #DCF2EF;
  --s-active: #7E3AA6;   --s-active-bg: #F1E6F7;
  --s-done: #6B6875;     --s-done-bg: #ECEBE7;
  --danger: #B3362B;
  --shadow: 0 1px 3px rgba(36,34,44,.08), 0 4px 16px rgba(36,34,44,.06);
  --drawer-shadow: -8px 0 32px rgba(36,34,44,.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1A22;
    --surface: #232130;
    --surface-2: #2A2838;
    --ink: #ECEAF2;
    --ink-2: #ABA8B8;
    --ink-3: #7A7788;
    --line: #3A3848;
    --accent: #8FA9E3;
    --accent-ink: #171826;
    --accent-soft: #2E3450;
    --topbar-bg: #131220;
    --topbar-ink: #ECEAF2;
    --topbar-ink-2: #9B98AA;
    --topbar-line: rgba(255,255,255,.18);
    --topbar-btn-bg: rgba(255,255,255,.07);
    --topbar-active-bg: #8FA9E3;
    --topbar-active-ink: #171826;
    --topbar-mark: #8FA9E3;
    --s-wait-call: #E0B25C; --s-wait-call-bg: #3A3222;
    --s-wait-visit: #8FB0F0; --s-wait-visit-bg: #263252;
    --s-checked: #5BC2B4;  --s-checked-bg: #1E3A38;
    --s-active: #C99AE0;   --s-active-bg: #3A2C48;
    --s-done: #8D8A9A;     --s-done-bg: #302E3C;
    --danger: #E07A6F;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --drawer-shadow: -8px 0 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"] {
  --paper: #F2F1EC; --surface: #FFFFFF; --surface-2: #F8F7F4;
  --ink: #24222C; --ink-2: #5E5B69; --ink-3: #908D9B; --line: #DDDBD4;
  --accent: #33518F; --accent-ink: #FFFFFF; --accent-soft: #E7ECF7;
  --topbar-bg: #2F3F68; --topbar-ink: #F5F7FC; --topbar-ink-2: #BAC5DE;
  --topbar-line: rgba(255,255,255,.30); --topbar-btn-bg: rgba(255,255,255,.10);
  --topbar-active-bg: #FFFFFF; --topbar-active-ink: #2F3F68; --topbar-mark: #93ACE0;
  --s-wait-call: #A16207; --s-wait-call-bg: #FBF0DC;
  --s-wait-visit: #1D4ED8; --s-wait-visit-bg: #E4EBFB;
  --s-checked: #0F766E; --s-checked-bg: #DCF2EF;
  --s-active: #7E3AA6; --s-active-bg: #F1E6F7;
  --s-done: #6B6875; --s-done-bg: #ECEBE7;
  --danger: #B3362B;
  --shadow: 0 1px 3px rgba(36,34,44,.08), 0 4px 16px rgba(36,34,44,.06);
  --drawer-shadow: -8px 0 32px rgba(36,34,44,.18);
}
:root[data-theme="dark"] {
  --paper: #1B1A22; --surface: #232130; --surface-2: #2A2838;
  --ink: #ECEAF2; --ink-2: #ABA8B8; --ink-3: #7A7788; --line: #3A3848;
  --accent: #8FA9E3; --accent-ink: #171826; --accent-soft: #2E3450;
  --topbar-bg: #131220; --topbar-ink: #ECEAF2; --topbar-ink-2: #9B98AA;
  --topbar-line: rgba(255,255,255,.18); --topbar-btn-bg: rgba(255,255,255,.07);
  --topbar-active-bg: #8FA9E3; --topbar-active-ink: #171826; --topbar-mark: #8FA9E3;
  --s-wait-call: #E0B25C; --s-wait-call-bg: #3A3222;
  --s-wait-visit: #8FB0F0; --s-wait-visit-bg: #263252;
  --s-checked: #5BC2B4; --s-checked-bg: #1E3A38;
  --s-active: #C99AE0; --s-active-bg: #3A2C48;
  --s-done: #8D8A9A; --s-done-bg: #302E3C;
  --danger: #E07A6F;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --drawer-shadow: -8px 0 32px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px; line-height: 1.55;
  overflow: hidden; /* ページ全体はスクロールさせない（各ビュー内部でスクロール） */
}
.num { font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* ── アプリシェル（幅いっぱい・高密度・ビューポート固定） ── */
.shell {
  max-width: none; margin: 0; padding: 0 16px 10px;
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
}
.topbar { flex: none; }

/* トップバー: 紺のアプリバー（全幅帯・常に1行）。カード内の操作ボタンと視覚的に区別する */
.topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  margin: 0 -16px 10px; padding: 9px 16px;
  background: var(--topbar-bg);
  color-scheme: dark; /* 帯は両テーマとも暗色。date入力のネイティブアイコンを白にする */
  overflow-x: auto; scrollbar-width: none; /* 収まらない極小幅でも横スクロールで全ボタンに届く */
}
.topbar::-webkit-scrollbar { display: none; }
.topbar > * { flex: none; }
.topbar .spacer { flex: 1 1 0; min-width: 6px; }
.brand { font-size: 16px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; color: var(--topbar-ink); }
.brand .mark { color: var(--topbar-mark); }

/* 最終同期時刻（ヘッダー常時表示・v4.32でボタン化=タップで進行状況の自動更新設定）と通信断バナー */
.sync-info { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
button.sync-info { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 11px; padding: 4px 2px; }

/* 進行状況の自動更新の設定ポップ（v4.32・☰ポップと同じfixed方式=topbarのクリップ回避） */
.auto-pop {
  position: fixed; z-index: 80;
  min-width: 240px; max-width: 320px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--drawer-shadow);
  color-scheme: light dark;
}
.auto-pop[hidden] { display: none; }
.auto-pop-head { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.auto-pop-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-pop-btns button {
  appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.auto-pop-btns button.sel { border-color: var(--accent); background: var(--accent); color: #fff; }
.auto-pop .hint { margin: 8px 0 0; font-size: 11px; }
.net-banner {
  flex: none;
  margin: 0 2px 8px; padding: 8px 12px;
  border: 1px solid var(--s-wait-call); border-radius: 8px;
  background: var(--s-wait-call-bg); color: var(--s-wait-call);
  font-weight: 700; font-size: 13px;
}

.store-select {
  font: inherit; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 8px; padding: 7px 10px; width: auto; min-width: 120px;
}
.store-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ネイティブのドロップダウン: 紺帯用の白文字がOSの明色ポップアップに乗って読めない事故を防ぐ（FB#7） */
.topbar select option { color: #17233a; background: #ffffff; }

.datenav { display: flex; align-items: center; gap: 5px; }
.datenav button {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--line);
  border-radius: 8px; padding: 6px 11px; font-weight: 600;
}
.datenav button:focus-visible, .datenav input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.datenav input[type="date"] {
  font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; width: auto;
}

nav.tabs {
  display: flex; gap: 2px; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 3px; background: var(--surface);
}
nav.tabs button {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink-2);
  padding: 6px 14px; border-radius: 7px; white-space: nowrap;
}
nav.tabs button[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
nav.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* タイムテーブルタブの未割当コーナーバッジ（v4.24→v4.25で2分割）。🔔の.notif-badgeと同じ様式:
   タブ右上に重なる丸バブル（レイアウトの場所を取らない）。flexラッパーで2個並べ、
   右端（コーナー=目立つ側）=女の子未定（店舗色・JSが設定）・左隣=時間未定（グレー）。
   片方が0件（hidden）ならもう片方が右端に詰まる。
   ⚠[hidden]ガード必須——クラスにdisplayを直書きするとhiddenが効かなくなる既知罠(CLAUDE.md参照) */
nav.tabs button[data-view="board"] { position: relative; }
.tab-badges { position: absolute; top: -4px; right: -4px; display: flex; gap: 2px; }
.tab-corner-badge {
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.tab-corner-badge.tcb-time { background: #64748b; color: #fff; }
.tab-corner-badge[hidden] { display: none; }

.btn-new {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: 9px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.btn-new:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-gear {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--line);
  border-radius: 8px; padding: 8px 10px; line-height: 1;
}
.btn-gear .ico {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn-gear:hover { color: var(--ink); border-color: var(--accent); }
.btn-gear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn-sub {
  appearance: none; font: inherit; cursor: pointer; font-weight: 600; font-size: 13px;
  background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--line);
  border-radius: 9px; padding: 7px 14px; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.btn-sub[hidden] { display: none; }
.btn-sub:hover { color: var(--ink); border-color: var(--accent); }
.btn-sub:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-sub[disabled] { opacity: .5; cursor: wait; }
.btn-sub.btn-strong { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }

/* ── トップバー内の操作類: 帯の上で見える配色に差し替え ── */
.topbar .store-select, .topbar .datenav button, .topbar .datenav input[type="date"],
.topbar .btn-sub, .topbar .btn-gear {
  background: var(--topbar-btn-bg); color: var(--topbar-ink); border-color: var(--topbar-line);
}
.topbar .btn-sub:hover, .topbar .btn-gear:hover, .topbar .datenav button:hover {
  color: var(--topbar-ink); border-color: var(--topbar-ink);
}
.topbar .sync-info { color: var(--topbar-ink-2); }
.topbar nav.tabs { background: var(--topbar-btn-bg); border-color: var(--topbar-line); }
.topbar nav.tabs button { color: var(--topbar-ink-2); }
.topbar nav.tabs button[aria-selected="true"] { color: var(--topbar-active-ink); background: var(--topbar-active-bg); }
.topbar .btn-new { background: var(--topbar-active-bg); color: var(--topbar-active-ink); }
.topbar button:focus-visible, .topbar select:focus-visible, .topbar input:focus-visible, .topbar a:focus-visible {
  outline: 2px solid var(--topbar-ink); outline-offset: 1px;
}

/* ── ヘッダー☰メニュー（FB#8: 設定・FB・使い方・連携ログを格納） ──
   topbarがoverflow-x:autoのため、ポップはposition:fixed（menu.jsがボタン位置からtop/rightを算出） */
.menu-wrap { position: relative; }
.menu-pop {
  position: fixed; z-index: 80;
  min-width: 216px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--drawer-shadow);
  display: flex; flex-direction: column; gap: 2px;
  color-scheme: light dark; /* 紺帯のdark指定を打ち消す（ポップは通常サーフェス） */
}
.menu-pop[hidden] { display: none; }
.menu-item {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-align: left; text-decoration: none;
  padding: 10px 12px; border-radius: 7px; white-space: nowrap; display: block;
}
.menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* リンクの開き方トグル（この端末だけの設定。押してもメニューは閉じない） */
.menu-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 6px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 2px;
  white-space: nowrap;
}

/* ── お知らせ（🔔・v3.28/WP1） ──
   ☰と同じposition:fixed+JS位置算出方式（notifications.jsがボタン位置からtop/rightを算出） */
.notif-wrap { position: relative; }
.notif-wrap .btn-gear { position: relative; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: #e5484d; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.notif-badge[hidden] { display: none; }
.notif-pop {
  position: fixed; z-index: 80;
  width: min(360px, 92vw); max-height: min(480px, 70vh);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--drawer-shadow);
  color-scheme: light dark;
}
.notif-pop[hidden] { display: none; }
.notif-head { font-size: 13px; font-weight: 700; color: var(--ink); padding: 2px 6px; display: flex; align-items: center; }
.notif-hide-toggle {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 400; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.notif-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.notif-row { display: flex; gap: 8px; padding: 8px 6px; border-radius: 8px; }
.notif-row.notif-clickable { cursor: pointer; }
.notif-row.notif-clickable:hover { background: var(--accent-soft); }
.notif-main { flex: 1; min-width: 0; }
.notif-row-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.notif-icon { font-size: 13px; }
.notif-chip {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); color: var(--c, var(--accent));
}
.notif-chip-none { background: var(--surface-2); color: var(--ink-2); }
.notif-chip-notice { /* --c未設定のまま=.notif-chip既定のaccent色。「不明」と区別する目印用クラス */ }
.notif-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.notif-time { margin-left: auto; font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.notif-body { font-size: 12px; color: var(--ink-2); white-space: pre-wrap; margin-top: 2px; }

/* ── スプシ連携ログ（☰メニュー内・FB#4） ── */
.slog-modal { width: min(460px, 94vw); }
.slog-hint { margin-top: 0; }
.slog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.slog-table th, .slog-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.slog-table th { color: var(--ink-2); font-size: 12px; }
.slog-toggle {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--accent); padding: 0;
}
.slog-detail td { background: var(--surface-2); font-size: 12px; }
.slog-store { padding: 2px 0; white-space: nowrap; }

/* ── ヘッダーは幅が狭くても1行のまま: 余白→ラベルの順で段階的に詰める（ボタンは消さない） ── */
@media (max-width: 1400px) {
  .topbar { gap: 7px; }
  .topbar nav.tabs button { padding: 6px 10px; }
  .topbar .btn-sub { padding: 7px 10px; }
  .topbar .btn-new { padding: 8px 12px; }
  .topbar .datenav button { padding: 6px 9px; }
}
@media (max-width: 1220px) {
  .topbar { gap: 6px; }
  /* sync-infoはv4.32でボタン化（自動更新設定の入口）したため狭幅でも隠さない。topbarはoverflow-x:autoで逃げる */
}
@media (max-width: 1040px) {
  .brand-label { display: none; }   /* help/roadmap/doc等の別ページ用（index.htmlはタイトル自体を持たない） */
  .topbar .store-select { min-width: 92px; padding: 7px 6px; }
  .topbar .datenav input[type="date"] { padding: 6px 4px; }
}
/* index.htmlのラベル省略（v4.53・本文標準化）: JSがtopbarの実測幅で足りない分だけ段階的に縮める。
   優先順位=新規受付→対面受付→受付リスト→タイムテーブル（adjustHeaderCompact@app.js）。
   .counter-suffix(「へ →」)は対面受付の短縮形に含めるため、幅だけで隠す1040pxルールは持たない */
.lbl-short { display: none; }
.topbar[data-compact~="new"] #btn-new .lbl-full { display: none; }
.topbar[data-compact~="new"] #btn-new .lbl-short { display: inline; }
.topbar[data-compact~="counter"] #btn-counter .lbl-full { display: none; }
.topbar[data-compact~="counter"] #btn-counter .lbl-short { display: inline; }
.topbar[data-compact~="list"] [data-view="list"] .lbl-full { display: none; }
.topbar[data-compact~="list"] [data-view="list"] .lbl-short { display: inline; }
.topbar[data-compact~="board"] [data-view="board"] .lbl-full { display: none; }
.topbar[data-compact~="board"] [data-view="board"] .lbl-short { display: inline; }

section.view { display: none; }
section.view.on { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px;
}
h2.section-title { font-size: 14.5px; font-weight: 700; margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; align-items: center; }
.filters .flabel2 { font-size: 12px; color: var(--ink-3); font-weight: 700; }

/* ── 共有パーツ ── */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 8px 14px; font-weight: 600;
}
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg button.sel { border-color: var(--accent); background: var(--accent-soft); }
.seg button .sub { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-3); }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chiprow button {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--ink); padding: 5px 13px; font-size: 13px;
}
.chiprow button.sel { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.chiprow button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chiprow button .sub { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); }

/* チップ群の色分け（FB#3: どれも同じ見た目で見辛い）
   オプション=紺（既定のaccent）／割引き=赤系／進行状況=選択中だけステータス色（--pc/--pbはJSが行ごとに設定） */
#f-disc button, #c-f-disc button { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
#f-disc button.sel, #c-f-disc button.sel {
  border-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
#f-disc button.sel .sub, #c-f-disc button.sel .sub { color: inherit; }
#f-opts button.sel .sub, #c-f-opts button.sel .sub { color: var(--accent); }
#f-status button.sel { border-color: var(--pc); background: var(--pb); color: var(--pc); }
/* 複数可OP: 個数バッジと「−」ミニボタン */
.chiprow button .op-count { margin-left: 4px; font-weight: 700; color: var(--accent); }
.chiprow button .op-minus {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; width: 26px; height: 26px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-2);
  font-weight: 700; line-height: 1; font-size: 15px;
  position: relative;
}
/* タップ判定は見た目より±9px広く（押し損ねが外側ボタンの「+1個」になる誤操作を防ぐ） */
.chiprow button .op-minus::after { content: ""; position: absolute; inset: -9px; border-radius: 999px; }

select, input[type="time"], input[type="text"], input[type="date"], input[type="number"], input[type="password"], input[type="color"] {
  font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px; width: 100%;
}
input[type="color"] { padding: 3px 4px; height: 36px; }
/* Safari(iPad含む)でtime inputが縦に膨らみ下の要素に被る対策（FB#3）: 高さを他の入力に合わせて固定 */
input[type="time"] { height: 40px; -webkit-appearance: none; appearance: none; }
select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.store-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.store-chip::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: none; }
.pill {
  appearance: none; font: inherit; cursor: pointer; border: none;
  display: inline-block; border-radius: 999px; padding: 3px 12px;
  font-size: 12px; font-weight: 700; color: var(--pc); background: var(--pb);
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill.static { cursor: default; }

/* ── タイムテーブル（sticky盤面） ── */
.card-board { padding: 12px 12px 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.legend .lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }
.legend .sw { width: 16px; height: 11px; border-radius: 3px; border: 1.5px solid var(--lc, var(--line)); background: var(--lb, transparent); }

.card-board {
  flex: 1; min-height: 0; margin-bottom: 0;
  display: flex; flex-direction: column;
}
.card-board .filters, .card-board .hint { flex: none; }
.unassigned-out { flex: none; }
.boardwrap {
  overflow: auto; flex: 1; min-height: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.board { min-width: 3050px; }
.b-header, .b-row { display: grid; grid-template-columns: 168px 1fr 200px; align-items: stretch; }
.b-header {
  color: var(--ink-3); font-size: 11px; letter-spacing: .05em;
  position: sticky; top: 0; z-index: 6; background: var(--surface);
  border-bottom: 1.5px solid var(--line);
}
.b-header > div { padding: 4px 8px; background: var(--surface); }
.b-header > div:first-child { position: sticky; left: 0; z-index: 7; }
.b-header > div:last-child { position: sticky; right: 0; z-index: 7; }
.hours { position: relative; display: grid; grid-template-columns: repeat(30, 1fr); }
.hours span { border-left: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; }
.hours span.half { border-left-color: color-mix(in srgb, var(--line) 55%, transparent); color: var(--ink-3); font-size: 10px; }
.b-row { border-top: 1px solid var(--line); background: var(--surface); }
.b-cast {
  padding: 8px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: none; appearance: none; width: 100%;
  position: sticky; left: 0; z-index: 4; box-shadow: 1px 0 0 var(--line);
}
button.b-cast { cursor: pointer; }
button.b-cast:hover { background: var(--surface-2); }
button.b-cast:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.b-cast .nm { font-weight: 700; font-size: 13.5px; }
.b-cast .rm { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.b-cast .interval { font-size: 10.5px; color: var(--ink-3); }
.b-cast .next { font-weight: 700; color: var(--accent); font-size: 12px; margin-top: 2px; }
.lane {
  position: relative; min-height: 96px; cursor: copy; overflow: hidden;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--line) 70%, transparent) 0 1px, transparent 1px calc(100% / 30));
}
.offh {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: var(--paper); opacity: .55;
}

/* ブロック: 進行状況で見た目を変える */
.blk {
  position: absolute; top: 6px; height: 80px; border-radius: 7px;
  overflow: hidden; cursor: pointer; text-align: left; font-family: inherit;
  padding: 5px 8px; font-size: 11.5px; line-height: 1.35;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 1px;
  border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 16%, var(--surface));
  color: var(--ink);
}
.blk:hover { filter: brightness(1.05); }
.blk { touch-action: none; }
.blk.dragging { opacity: .4; }
/* 長押しドラッグ時にテキスト選択・iOSコールアウトが出ないように */
.board, .blk, .ublk, .lane, .b-cast, .b-sum {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ublk { touch-action: none; }
.drag-ghost {
  position: fixed; z-index: 70; pointer-events: none;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lane.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* 配置モード/ドラッグ中/ドロワー編集中: その受付の女の子のレーンを強調
  （時間未定の時間指定で行を探しやすく・v4.29〜30）。
   backgroundショートハンドでなくbackground-color=レーンの目盛りグラデは維持 */
.lane.lane-own { background-color: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
/* 時間帯ハイライト（v4.32）: 女の子未定+時間ありの受付を配置/ドラッグ/編集中、
   その時間帯を全レーンに縦帯で示す（レーン強調の代わり）。z-indexなし=DOM順でブロックの後ろ */
.lane .time-own {
  position: absolute; top: 0; bottom: 0;
  background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent);
  pointer-events: none;
}
.b-header .hours .num.own { color: var(--accent); font-weight: 800; }
/* 現在時刻ライン（v4.30）: 今日を表示中のとき全レーンに赤の縦ライン+ヘッダー時ラベル強調。
   位置・表示はJS(updateNowLine)。⚠[hidden]ガード必須（CLAUDE.md壊しやすいポイント）。
   v4.31: z-indexを付けない=DOM順（now-lineはレーン先頭に挿入）で受付ブロックの後ろに描画
  （線がブロックに被って見えづらい・ユーザー指示） */
.lane .now-line {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: #ef4444; pointer-events: none;
}
.lane .now-line[hidden] { display: none; }
.b-header .hours .num.now { color: #ef4444; font-weight: 800; }
/* ドラッグ中のドロップ位置プレビュー（実寸・時刻表示・重なり/時間外は赤） */
.drop-preview {
  position: absolute; top: 6px; height: 80px; border-radius: 7px; pointer-events: none; z-index: 5;
  border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.drop-preview.bad {
  border-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.blk:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.blk .l1 { font-weight: 700; overflow: hidden; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.blk .l2 { font-size: 11.5px; font-weight: 700; overflow: hidden; white-space: nowrap; }
.blk .l3 { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk .l4 { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-checked); font-weight: 700; }
.blk .bst {
  font-size: 9px; font-weight: 700; padding: 0 6px; border-radius: 999px;
  color: var(--pc); background: var(--pb); flex: none;
}
.blk .nomc { font-weight: 700; }
.blk .nom-main { color: var(--s-active); }
.blk .nom-net { color: var(--s-wait-visit); }
.blk .nom-free { color: inherit; font-weight: 500; opacity: .85; }
/* ベタ塗り(案内中)・グレー(終了)でも指名/OPの色分けが判るように */
.blk.st-p3 .nom-main { color: #F2CFFF; }
.blk.st-p3 .nom-net { color: #CDE4FF; }
.blk.st-p3 .l4 { color: #ABF3C6; }
.blk.st-p4 .nom-main { color: color-mix(in srgb, var(--s-active) 70%, var(--s-done)); }
.blk.st-p4 .nom-net { color: color-mix(in srgb, var(--s-wait-visit) 70%, var(--s-done)); }
.blk.st-p4 .l4 { color: color-mix(in srgb, var(--s-checked) 70%, var(--s-done)); }
.blk.st-p0 { border-style: dashed; background: var(--surface); }                                   /* 確電待ち */
.blk.st-p1 { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }                       /* 来店待ち */
.blk.st-p2 { background: color-mix(in srgb, var(--c) 34%, var(--surface)); }                       /* 受付済み */
.blk.st-p3 { background: var(--c); color: #fff; }                                                  /* 案内中 */
.blk.st-p3 .t { opacity: .92; }
.blk.st-p4 { background: var(--s-done-bg); color: var(--s-done); border-color: var(--line); }      /* 終了 */

/* 重なり(INT込み)・出勤時間外の受付ブロックはアンバーの警告枠 */
.blk.warn {
  border-color: var(--s-wait-call);
  box-shadow: 0 0 0 1.5px var(--s-wait-call);
}

.iband {
  /* タップで直前ブロックの移動を開始できる（pointer-events有効） */
  position: absolute; top: 6px; height: 80px; cursor: pointer;
  background: repeating-linear-gradient(45deg, var(--ink-3) 0 6px, transparent 6px 12px);
  opacity: .2; border-radius: 4px;
}

/* 配置モード（クリック移動: ✥・INT帯・ドロワーの「タイムテーブルで指定」から開始） */
.pick-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 7px 12px;
  border: 1.5px dashed var(--accent); border-radius: 8px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px;
}
.pick-bar[hidden] { display: none; }
.pick-bar .btn-sub { margin-left: auto; }
.boardwrap.picking .lane { cursor: crosshair; }

/* ブロックの移動ツール（長押しドラッグの代替。ホバーで表示・タッチ端末では常時薄く表示） */
.blk .blk-move {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px;
  text-align: center; border-radius: 5px; font-size: 13px; z-index: 2; cursor: pointer;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
  opacity: 0; transition: opacity .12s ease;
}
.blk:hover .blk-move, .blk:focus-visible .blk-move { opacity: 1; }
@media (hover: none) { .blk .blk-move { opacity: .65; } }

/* 予約経路バッジ（左下・頭文字1文字。タップ/ホバーで正式名称。FB由来の要望・2026-07-14） */
.blk .blk-route {
  position: absolute; bottom: 3px; left: 3px; width: 21px; height: 21px; line-height: 21px;
  text-align: center; border-radius: 50%; font-size: 12.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent); z-index: 2;
}
/* 案内中(st-p3)はキャスト色のベタ塗り背景でコントラストが失われるため専用配色 */
.blk.st-p3 .blk-route { background: #fff; color: #17233a; }

/* 案内番号バッジ（FB#30・発行済みの時だけNo.の隣に「案n」） */
.blk .blk-guide {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; flex: none;
  background: var(--accent-soft); color: var(--accent);
}
.blk.st-p3 .blk-guide { background: #fff; color: #17233a; }

/* 忍者（無料受付）の表示 */
.blk .nomc.nom-ninja { color: #8B5CF6; }
.blk.st-p3 .nomc.nom-ninja { color: #DDD6FE; }
.b-sum {
  padding: 5px 8px; font-size: 10.5px; color: var(--ink-2);
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  position: sticky; right: 0; z-index: 4; background: var(--surface);
  box-shadow: -1px 0 0 var(--line); line-height: 1.32;
}
.b-sum b { color: var(--ink); }
.b-sum .cs-row { display: grid; grid-template-columns: 1fr 26px 62px; gap: 0 6px; align-items: baseline; }
.b-sum .cs-row .amt { text-align: right; }
.b-sum .cs-row.total { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 2px; font-weight: 700; color: var(--ink); }
/* 成績欄の内訳展開（全体タップで1つのパネルにまとめて開く。個別行クリックは廃止=使いづらいとの
   指摘、コース料/指名料/オプションの3区分で左に縦並び表示・FB#28由来・2026-07-14） */
.b-sum.cs-clickable { cursor: pointer; }
.b-sum.cs-clickable:hover { background: var(--surface-2); }
.cs-detail-panel {
  display: none;
  position: absolute; top: 0; right: 100%; margin-right: 4px; z-index: 6;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 8px 10px; min-width: 150px;
}
.b-sum.cs-open .cs-detail-panel { display: flex; flex-direction: column; gap: 6px; }
/* 画面下にはみ出す時はセル下端基準で上方向に開く（開いた瞬間にJSが判定して付与） */
.cs-detail-panel.cs-up { top: auto; bottom: 0; }
.cs-detail-group { display: flex; flex-direction: column; gap: 1px; }
.cs-detail-head { font-weight: 700; color: var(--ink); font-size: 10.5px; }
.cs-detail-row { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; }
.cs-detail-row .num { color: var(--ink); }
.b-sum .next { font-weight: 700; color: var(--accent); font-size: 12px; }
.unassigned-out {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px; margin-top: 6px; border-radius: 8px; min-height: 40px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.unassigned-out.droppable { outline: 2px dashed var(--accent); background: var(--accent-soft); }
/* 未割当のグループ（女の子未定/時間未定・v4.29でコンパクト表示に復帰）。表示は受付の状態からの
   自動振り分け・0件グループは非表示・2つ目のグループは縦線で区切る。
   ドロップ/タップはトレイ全体が単一の「未割当に戻す」（時間だけ外す・女の子は消さない=確認なし） */
.unassigned-out .ugroup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.unassigned-out .ugroup + .ugroup { margin-left: 8px; padding-left: 14px; border-left: 1.5px solid var(--line); }
.unassigned-out .ulabel { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-right: 4px; }
.unassigned { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 8px; border-top: 1px solid var(--line); }
.unassigned .ulabel { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-right: 4px; }
.ublk {
  appearance: none; font: inherit; cursor: pointer;
  border: 1.5px dashed var(--ink-3); background: var(--surface-2); color: var(--ink);
  border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.ublk:hover { border-color: var(--accent); }
.ublk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── 受付リスト（ヘッダー・合計行を固定し中身だけスクロール） ── */
#view-list .card {
  flex: 1; min-height: 0; margin-bottom: 0;
  display: flex; flex-direction: column;
}
#view-list .filters, #view-list .hint { flex: none; }
.tablewrap { overflow: auto; flex: 1; min-height: 0; }
/* 削除済み(v4.51.4)は通常受付と性質が違うため通常テーブルのスクロールに混ぜず、
   下に独立した領域を設ける（flex:none=通常テーブルのスクロールでは動かない・多い時はここだけ自前でスクロール） */
.deleted-tablewrap { flex: none; max-height: 240px; margin-top: 10px; border-top: 2px solid var(--line); padding-top: 8px; }
/* sticky行のセル境界線を保つためseparate（collapseだと枠線が置き去りになる） */
table.list { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 880px; }
table.list thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); }
table.list th.c-no { width: 44px; }
table.list th.c-cast { min-width: 110px; }
table.list th.c-min { width: 60px; }
table.list th.c-op { width: 70px; }
table.list th.c-yen { width: 88px; }
table.list th.c-note { min-width: 120px; }
table.list td.num.yen { text-align: right; }
table.list th {
  text-align: left; font-size: 11px; letter-spacing: .08em; color: var(--ink-3);
  border-bottom: 1.5px solid var(--line); padding: 7px 10px; white-space: nowrap;
}
table.list th.sortable { cursor: pointer; user-select: none; }
table.list th.sortable:hover { color: var(--ink); }
table.list th.sortable .arrow { display: inline-block; width: 1em; color: var(--accent); font-size: 10px; }
table.list tr.trow-total td {
  font-weight: 700; border-top: 2px solid var(--line); background: var(--surface-2);
  border-bottom: none; cursor: default;
  position: sticky; bottom: 0; z-index: 2;
}
table.list td { border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr.pre td { background: color-mix(in srgb, var(--s-wait-call-bg) 45%, transparent); }
table.list tbody tr:hover td { background: var(--surface-2); }
.opts-cell { font-size: 12px; color: var(--ink-2); }
/* 受付リストの「バック」列ヘッダータップで合計1列⇄指名/ギャラ2列表示に切替（FB#21続報） */
table.list th.back-th { cursor: pointer; }
table.list th.back-th:hover { color: var(--accent); }
.site-chip {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 0 7px;
  border-radius: 5px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
}
.hint { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

/* ── 日報（タイルまで固定・キャスト別以降だけスクロール） ── */
#view-daily .filters, #view-daily .tiles { flex: none; }
/* ── 集計（月次・年次・v3.29） ── */
#view-summary .filters, #view-summary .tiles { flex: none; }
#view-summary input[type="month"], #view-summary input[type="number"] {
  font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; width: auto;
}
table.list.no-click tbody tr { cursor: default; }
table.list.no-click tbody tr:hover td { background: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow); }
.tile .k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.tile .v { font-size: 25px; font-weight: 700; margin-top: 2px; }
.tile .s { font-size: 12px; color: var(--ink-2); }
/* 内訳つきタイル（キャストバック計・ルーム料計）: タップで開閉・既定は閉じる。
   PCはマウスがある環境(hover:hover)でのみホバーでも一時表示する（v3.65） */
.tile.expandable { cursor: pointer; }
.tile.expandable .s::after { content: " ▾"; font-size: 9px; opacity: .55; }
.tile-detail { display: none; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 12px; }
.tile.expandable.open .tile-detail { display: block; }
@media (hover: hover) {
  .tile.expandable:hover .tile-detail { display: block; }
}
.tile-detail-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-weight: 600; color: var(--ink-2); }
.tile-detail-row span:first-child { color: var(--ink-3); font-weight: 500; }
.bars { display: grid; gap: 9px; margin-top: 8px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 10px; }
.bar-row .lbl { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 18px; position: relative; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: var(--c); min-width: 2px; }
.bar-row .val { text-align: right; font-weight: 600; font-size: 13px; }
.bar-row .val small { display: block; font-weight: 600; font-size: 10.5px; color: var(--ink-3); }
/* 調整額（±α）エディタ。項目=adjust_itemsマスタ・✓した項目の合計がα（入力のたび自動保存・v3.77）。
   カード/詳細表/上がりの3ビュー共通ヘッダーとしてdata-mode非依存で常時表示（下記1230行台参照） */
#view-daily .adj-card { flex: none; padding: 10px 16px; margin-bottom: 14px; }
.adj-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adj-row .flabel2 { font-size: 12px; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.adj-toggle {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px;
  width: 26px; height: 26px; line-height: 1; font-size: 13px; color: var(--ink-2); cursor: pointer; flex: none;
}
.adj-total { font-weight: 700; font-size: 15px; min-width: 90px; }
.adj-hint { font-size: 12px; color: var(--ink-3); }
.adj-groups { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; }
.adj-groups[hidden] { display: none; }
.adj-group { flex: 1 1 280px; min-width: 240px; }
.adj-group-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.adj-items { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.adj-item { display: flex; align-items: center; gap: 7px; cursor: pointer; opacity: .55; }
.adj-item.on { opacity: 1; }
.adj-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.adj-item .ai-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.adj-item .ai-amt { width: 110px; text-align: right; padding: 5px 8px; }
.daily-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
  flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-bottom: 4px;
}
@media (max-width: 820px) { .daily-grid { grid-template-columns: 1fr; } }
.statuslist { display: grid; gap: 8px; margin-top: 8px; }
.statuslist .srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.statuslist .srow .n { font-weight: 700; }

/* ── 編集ドロワー ── */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 18, 28, .35);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40;
}
.overlay.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw);
  background: var(--surface); box-shadow: var(--drawer-shadow); z-index: 41;
  transform: translateX(105%); transition: transform .22s ease;
  display: flex; flex-direction: column;
  overflow-x: hidden; max-width: 100vw;
}
.drawer.on { transform: translateX(0); }
.drawer:not(.on) { pointer-events: none; }   /* スライドアウト中に下の盤面へのタップを吸わない */
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; } .overlay { transition: none; }
}
.d-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px;
  border-bottom: 1px solid var(--line); flex: none;
}
.d-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.d-head .no { color: var(--ink-3); font-size: 13px; font-weight: 600; }
/* 編集ドロワーの未確定バッジ（v4.31）: 女の子未定/時間未定を⇅並びの横に表示（編集時のみ・新規は非表示） */
.d-head .d-unset {
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: #92400e; background: #fef3c7; border: 1.5px solid #f59e0b;
  border-radius: 999px; padding: 3px 10px;
}
.d-head .d-unset[hidden] { display: none; }
.d-close {
  appearance: none; font: inherit; cursor: pointer; margin-left: auto;
  background: none; border: none; color: var(--ink-3); font-size: 20px; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
}
.d-close:hover { color: var(--ink); background: var(--surface-2); }
.d-close:focus-visible { outline: 2px solid var(--accent); }
.d-body { overflow-y: auto; overflow-x: hidden; padding: 14px 20px; flex: 1; max-width: 100%; }
/* サイズカスタム(v4.5): 幅を縮めたブロックが横に並べるようflex-wrap。幅はdrawer.jsがインラインで指定 */
#d-body { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; column-gap: 12px; }
#d-body > [data-fld] { width: 100%; min-width: 0; }
#d-body > .row2 { margin-bottom: 0; }   /* 内側.fieldのmargin-bottomが行間を作るため二重にしない */
.field { margin-bottom: 14px; min-width: 0; }
.field label.flabel {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: 6px;
}
/* ラベル行の右側にボタンを置く行（タイムテーブルで指定・忍者トグル） */
.flabel-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.flabel-row label.flabel { margin-bottom: 0; }
.ninja-toggle {
  appearance: none; font: inherit; cursor: pointer; font-size: 11px; font-weight: 700;
  padding: 2px 14px; border-radius: 999px; border: 1.5px dashed var(--ink-3);
  background: transparent; color: var(--ink-3);
}
.ninja-toggle.sel { border-style: solid; border-color: #8B5CF6; background: #8B5CF6; color: #fff; }

/* 一部現金/一部カード（v4.52・v4.52.1でポップアップ方式に変更・v4.52.2で置き場所を統合・FB#43）。
   トリガーは独立行を持たず、現金/カードと同じchiprow(#f-payment)の3つ目のチップ。
   .chiprow buttonのpill形状を踏襲しつつ点線borderで「選択肢ではなく設定」であることを区別
   （案内番号ポップアップ[#guide-pop]と同じposition:fixedパターンで開く） */
/* .chiprow button（詳細度0,1,1）より優先させるためbutton.を付ける（.pay-split-chip単体だと負けてborderが実線に戻る） */
.chiprow button.pay-split-chip {
  border: 1.5px dashed var(--line); color: var(--ink-3);
}
/* activeの色は現金/カードのsel(--accent)と揃えると「カードボタンが2つある」ように紛らわしいため、
   進行状況の受付済み(--s-checked)と同じteal系にして「確定した追加設定」であることを分離 */
.chiprow button.pay-split-chip.active {
  border-style: solid; border-color: var(--s-checked); background: var(--s-checked-bg); color: var(--s-checked);
}
/* IDでなくクラス指定（v4.52.3・counter.jsの#c-pay-split-popと共有するため。id固定だと#c-pay-split-popに
   このCSSが当たらずwidth:280pxが効かない=全幅ポップアップになるバグを本番前のスクショで発見） */
.pay-split-pop:not([hidden]) {
  position: fixed; z-index: 60; width: 280px; max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.pay-split-tabs { display: flex; gap: 6px; }
.pay-split-tabs button {
  appearance: none; font: inherit; cursor: pointer; font-size: 12px;
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--ink-2); padding: 5px 10px; flex: 1;
}
.pay-split-tabs button.sel { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; color: var(--ink); }
.pay-split-list { display: flex; flex-direction: column; gap: 8px; }
.pay-split-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.pay-split-item input[type="checkbox"] { width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.pay-split-amount-row { display: flex; flex-direction: column; gap: 6px; }
.pay-split-amount-label { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.pay-split-amount { width: 100%; }
.pay-split-note {
  font-size: 13px; font-weight: 700; color: var(--ink); padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.pay-split-pop-actions { display: flex; justify-content: space-between; align-items: center; }
.pay-split-close {
  appearance: none; font: inherit; cursor: pointer; font-size: 12px;
  background: none; border: none; color: var(--ink-3); text-decoration: underline;
  padding: 0;
}
.pay-split-done {
  appearance: none; font: inherit; cursor: pointer; font-size: 12.5px; font-weight: 700;
  background: var(--accent); border: none; border-radius: 8px; color: #fff; padding: 6px 16px;
}
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.row2 > .field { min-width: 0; }

/* スタート時間ピッカー（時→分の2タップ） */
.tp-val { color: var(--accent); font-size: 15px; font-weight: 700; margin-left: 8px; letter-spacing: .02em; }
/* スタート時間の補助チップ（今/最速/空き/次案内・v4.32）。タップでその時刻が入る。
   v4.32.1: labelの外の.tp-label-rowへ移設（タブレットのlabelクリック転送で「今」が誤発火するため）。
   space-betweenだと右端へ飛ぶのでラベル直後に寄せる。
   v4.32.2: ラベルは折り返さない（「未定」が縦に割れていた・スクショ指摘）+
   最速の名前一覧はピルに入れず下の折り返しテキスト行（.tp-names）へ */
.tp-label-row { justify-content: flex-start; align-items: flex-start; }
.tp-label-row label.flabel { flex: none; white-space: nowrap; }
.tp-assist { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tp-assist .tp-names { flex-basis: 100%; font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.tp-assist .tp-chip {
  appearance: none; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  padding: 3px 8px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.tp-assist .tp-chip:hover { background: var(--accent); color: #fff; }
.tpick { display: grid; gap: 6px; }
.tp-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: start; }
.tp-cap { font-size: 11px; font-weight: 700; color: var(--ink-3); padding-top: 10px; text-align: center; }
.tp-grid { display: grid; gap: 4px; }
/* ボタンサイズを保ったまま枠幅に応じて折り返す（サイズカスタム対応・全幅時は従来の8列/6列相当） */
.tp-hours { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.tp-mins { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.tp-grid button {
  appearance: none; font: inherit; cursor: pointer; font-weight: 600; font-size: 12.5px;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 7px; padding: 7px 0; min-width: 0;
  font-variant-numeric: tabular-nums;
}
.tp-grid button.sel { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tp-grid button.tp-clear { color: var(--ink-3); }
.tp-grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tp-mins button:disabled { opacity: .3; cursor: default; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.course-grid button {
  appearance: none; font: inherit; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-weight: 600; min-width: 0;
}
.course-grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.course-grid button.sel { border-color: var(--accent); background: var(--accent-soft); }
.course-grid button .sub { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-3); }
.d-foot {
  flex: none; border-top: 1px solid var(--line); padding: 12px 20px;
  background: var(--surface);
}
.d-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.d-total .yen { font-size: 24px; font-weight: 700; }
.d-total .breakdown { font-size: 11.5px; color: var(--ink-3); }
/* 一部現金/カードの内訳は合計金額(.yen)の真下に直付け(v4.52.5)。text-align:rightの独立行だと
   左側に大きな空白ができ他の行と不揃いに見えたため、.yenと同じ右カラムに縦積みして詰めた */
.d-total-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#d-payment-split { font-size: 11.5px; color: var(--ink-3); }
.d-back-room { font-size: 11.5px; color: var(--ink-3); margin: -6px 0 10px; }
.d-actions { display: flex; gap: 10px; }
.btn-save {
  appearance: none; font: inherit; cursor: pointer; flex: 1;
  padding: 11px; border-radius: 10px; border: none;
  background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700;
}
.btn-save:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-delete {
  appearance: none; font: inherit; cursor: pointer;
  padding: 11px 16px; border-radius: 10px; background: none;
  border: 1.5px solid var(--danger); color: var(--danger); font-weight: 700;
}
.btn-delete:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.btn-delete.confirm { background: var(--danger); color: #fff; }

/* ── 対面受付の入力中ライブ表示（v3.35・画面左下。v3.36でタップ→詳細ドロワー） ── */
.live-drafts {
  position: fixed; left: 14px; bottom: 14px; z-index: 39;   /* ドロワー(41)・モーダル(60台)より下=開いている操作を邪魔しない */
  display: flex; flex-direction: column; gap: 8px; max-width: min(340px, 80vw);
  pointer-events: none;   /* コンテナは透過（カード自体はタップ可） */
}
/* 表示位置4隅（v3.37・⚡同期ステータスで選択。上側のtopはJSがヘッダー実高さから設定） */
.live-drafts.pos-bl { left: 14px; right: auto; }
.live-drafts.pos-br { right: 14px; left: auto; }
.live-drafts.pos-tl { left: 14px; right: auto; }
.live-drafts.pos-tr { right: 14px; left: auto; }
.live-drafts[hidden] { display: none; }
.live-draft-card {
  background: var(--surface); border: 1.5px solid var(--accent); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); font-size: 13px;
  pointer-events: auto; cursor: pointer; text-align: left;
}
.live-draft-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .26); }
.live-draft-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live-draft-card .ld-head { font-weight: 700; color: var(--accent); font-size: 12px; display: flex; align-items: center; }
.live-draft-card .ld-head .ld-mode { color: var(--muted); font-weight: 600; margin-left: 4px; }
.live-draft-card .ld-head .ld-chev { margin-left: auto; color: var(--muted); font-size: 15px; }
.live-draft-card .ld-body { font-weight: 700; margin-top: 3px; }
.live-draft-card .ld-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.live-draft-card .ld-total { font-weight: 800; margin-top: 3px; }
/* 更新が届いた瞬間のパルス（枠が一瞬強調される） */
@keyframes ld-pulse { 0% { border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .35); } 100% { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); } }
.live-draft-card.ld-pulse { animation: ld-pulse .8s ease-out; }

/* ── 入力中ライブ詳細ドロワー（v3.36・閲覧専用） ── */
.drawer.live-view { width: min(420px, 100vw); z-index: 56; }
#lv-overlay.on { z-index: 55; }
.lv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 8px;
  border-left: 3px solid transparent;
}
.lv-row .lv-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); flex: none; }
.lv-row .lv-val { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.lv-row-total .lv-val { font-weight: 800; font-size: 17px; }
/* 操作中の欄=スプシの編集セルハイライト相当（対面側で開いている入力欄に追従） */
.lv-row.lv-focus { border-left-color: #F59E0B; background: rgba(245, 158, 11, .10); }
.lv-focus-chip {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #F59E0B; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em;
}
/* 値が変わった行のフラッシュ */
@keyframes lv-flash { 0% { background: rgba(245, 158, 11, .35); } 100% { background: transparent; } }
.lv-row.lv-flash { animation: lv-flash 1s ease-out; }
.lv-row.lv-focus.lv-flash { animation: none; }   /* 操作中の欄は常時ハイライト優先 */
.lv-ended {
  padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; font-weight: 700; font-size: 13px;
  background: var(--surface-2); color: var(--ink-3); border: 1px dashed var(--line);
}
.lv-hint { flex: none; margin: 0; padding: 10px 20px 14px; }
.sync-state { margin-bottom: 12px; }
.sync-state-row { padding: 3px 0; font-size: 14px; }
.sync-pos { margin: 4px 0 14px; }
.sync-pos-label { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.sync-pos-btns { display: flex; gap: 8px; }
.pos-btn {
  appearance: none; font: inherit; cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.pos-btn.sel { border-color: var(--accent); background: var(--accent); color: #fff; }
.sync-gas-head { margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); }

/* 他端末が編集中の受付（v3.37・リスト行/盤面ブロックの🖊表示） */
tr.remote-edit { background: rgba(245, 158, 11, .10); }
tr.remote-edit .no-wrap::after { content: "🖊"; margin-left: 3px; font-size: 11px; }
.blk.remote-edit { outline: 2px dashed #F59E0B; outline-offset: 1px; }
.blk.remote-edit::after {
  content: "🖊"; position: absolute; top: 1px; right: 3px; font-size: 11px;
}

/* 受付リストの未割当バッジ（FB#15・女の子/時間未定のNoを点線で囲む・Noの後ろにアイコン） */
.no-wrap { display: inline-flex; align-items: center; gap: 2px; line-height: normal; }
.no-wrap.unassigned {
  padding: 0 6px; border-radius: 5px;
  outline: 1.5px dashed var(--accent); outline-offset: 2px;
  background: var(--accent-soft);
}
.no-wrap .no-ico { font-size: 10px; line-height: 1; }
.reserve-card.locked { opacity: .75; }
.rc-lock {
  font-size: 11px; font-weight: 700; color: #B45309;
  background: rgba(245, 158, 11, .18); border-radius: 999px; padding: 1px 8px;
}

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--paper); border-radius: 10px;
  padding: 12px 22px; font-weight: 600; opacity: 0; transition: all .25s ease;
  pointer-events: none; z-index: 100; max-width: 90vw;   /* 全モーダルより手前（設定⚙の下に隠れるFB対応） */
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .25s ease; transform: translateX(-50%); } }

/* ── パスワードオーバーレイ ── */
.pw-overlay {
  position: fixed; inset: 0; z-index: 60; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.pw-overlay[hidden] { display: none; }
.pw-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 28px; width: min(320px, 90vw);
}
.pw-box h2 { margin: 0 0 16px; font-size: 16px; }
.pw-box .field { margin-bottom: 14px; }
.pw-error { color: var(--danger); font-size: 12.5px; margin: 0 0 10px; }

/* ── 店舗選択（トップページ・v4.55） ── */
.store-picker-box { position: relative; width: min(420px, 92vw); text-align: center; }
.store-picker-box h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.store-picker-title { font-size: 22px; font-weight: 800; letter-spacing: 2px; margin: 2px 0 6px; }
.store-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-picker-card {
  font: inherit; padding: 24px 10px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 15px;
  cursor: pointer;
}
.store-picker-card:hover, .store-picker-card:focus-visible {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent); outline: none;
}

/* ── マスタ管理モーダル ── */
.master-modal {
  position: fixed; top: 4vh; left: 50%; transform: translateX(-50%);
  width: min(960px, 94vw); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: 12px; box-shadow: var(--drawer-shadow);
  z-index: 61; display: none; flex-direction: column;
}
.master-modal.on { display: flex; }
.master-modal .m-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-bottom: 1px solid var(--line); flex: none; position: sticky; top: 0;
  background: var(--surface); z-index: 1;
}
.master-modal .m-head h3 { margin: 0; font-size: 16px; }
.master-modal .m-body { padding: 14px 22px 22px; overflow-y: auto; }

/* セクション = 1枚のカード。既定は全部閉じ・開くのは1つだけ */
.master-modal .m-section {
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
  background: var(--surface); overflow: hidden;
}
.master-modal .m-sec-head {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
  margin: 0; padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.master-modal .m-sec-head:hover { color: var(--accent); }
.master-modal .m-section:not(.closed) > .m-sec-head {
  background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--ink);
}
.master-modal .m-arrow { width: 12px; flex: none; color: var(--ink-3); font-size: 11px; }
.master-modal .m-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; background: var(--surface);
}
.master-modal .m-section.closed > *:not(.m-sec-head) { display: none; }
/* セクションの中身の余白（見出し直下と左右） */
.master-modal .m-section > :not(.m-sec-head) { margin-left: 14px; margin-right: 14px; }
.master-modal .m-section > .m-sec-head + * { margin-top: 12px; }
.master-modal .m-section > :last-child:not(.m-sec-head) { margin-bottom: 14px; }
.m-ro { font-size: 13px; color: var(--ink-3); padding-left: 8px; }

/* 行テーブル: 入力は触るまで静かに（ホバーで枠・フォーカスで強調） */
table.mtable { border-collapse: collapse; width: calc(100% - 28px); margin-bottom: 4px; }
table.mtable th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
  padding: 4px 12px; white-space: nowrap;
}
table.mtable th.c-num { text-align: right; width: 110px; }
table.mtable td.c-num { width: 110px; }
table.mtable th.c-color, table.mtable td.c-color { width: 74px; }
table.mtable th.c-tgl, table.mtable td.c-tgl { width: 100px; text-align: center; }

/* トグルスイッチ（マスタの1/0フラグ用。checked=1として保存） */
input.m-toggle {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 23px; border-radius: 999px;
  background: var(--line); border: none; position: relative;
  cursor: pointer; transition: background .15s ease; margin: 0; padding: 0;
  vertical-align: middle; flex: none;
}
input.m-toggle::after {
  content: ""; position: absolute; top: 2.5px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .15s ease;
}
input.m-toggle:checked { background: var(--accent); }
input.m-toggle:checked::after { left: 21px; }
input.m-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.m-toggle-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* ── フィードバック（☰メニュー→フィードバックでモーダル。テキスト+画像で改善案/エラーを記録） ── */
.fb-modal { z-index: 63; }
.fb-modal textarea {
  font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px;
  width: 100%; resize: vertical; min-height: 84px;
}
.fb-modal textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-send-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 4px 0 6px; }
.fb-send-note { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.fb-list-title { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; margin: 14px 0 8px; border-top: 1px solid var(--line); padding-top: 12px; }

/* 今後の実装予定（既定折りたたみ） */
.fb-roadmap { margin: 12px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.fb-roadmap-toggle {
  appearance: none; background: none; border: none; cursor: pointer; padding: 2px 0;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em;
}
.fb-roadmap-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-rm-item { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; margin-top: 8px; background: var(--surface-2); }
.fb-rm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-rm-title { font-size: 13px; font-weight: 700; }
.fb-rm-cost {
  font-size: 11px; font-weight: 700; white-space: nowrap; margin-left: auto;
  border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px;
}
.fb-rm-cost.low { color: var(--s-checked); }
.fb-rm-cost.mid { color: var(--s-wait-call); }
.fb-rm-cost.high { color: var(--danger); }
.fb-rm-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fb-thumb { position: relative; }
.fb-thumb img {
  width: 96px; height: 72px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--line); cursor: zoom-in; display: block;
}
/* 画像以外の添付（v3.95）: サムネと同サイズのタイルに📄+形式+ファイル名。クリックで保存 */
.fb-file {
  width: 96px; height: 72px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--surface-2); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; padding: 4px 6px;
}
.fb-file-icon { font-size: 19px; line-height: 1.2; }
.fb-file-ext { font-size: 10px; font-weight: 700; color: var(--ink-2); letter-spacing: .5px; }
.fb-file-name {
  font-size: 10px; color: var(--ink-2); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-thumb-x {
  position: absolute; top: -7px; right: -7px; width: 21px; height: 21px;
  border-radius: 50%; border: none; background: var(--ink); color: var(--paper);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.fb-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fb-item { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; }
.fb-item.done { opacity: .85; background: var(--surface-2); }
.fb-cat { font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; }
.fb-cat.bug { color: var(--danger); }
.fb-cat.idea { color: var(--s-wait-visit); }
.fb-cat.feature { color: var(--s-active); }
.fb-reply {
  margin-top: 8px; padding: 8px 10px;
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  background: var(--accent-soft);
}
.fb-reply-label { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
.fb-reply-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.fb-item-head { display: flex; align-items: center; gap: 10px; }
.fb-item-head .fb-meta { font-size: 11.5px; color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-status { font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; color: var(--ink-3); }
.fb-status.done { color: var(--s-checked); }
.fb-status.working { color: var(--s-wait-call); }
.fb-item.working {
  border-color: color-mix(in srgb, var(--s-wait-call) 45%, var(--line));
  background: color-mix(in srgb, var(--s-wait-call-bg) 35%, transparent);
}
.fb-item-head .fb-edit, .fb-item-head .fb-x { flex: none; }
.fb-x.confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
.pay-card { font-size: 12px; font-weight: 700; color: var(--s-checked); white-space: nowrap; }
/* 一部現金/カードのセルは横並びだと列が広がり他列を圧迫するため縦積み2行+縮小(v4.52.2) */
.pay-split-cell { display: flex; flex-direction: column; line-height: 1.3; gap: 0; }
.pay-split-cell .pay-card, .pay-split-cell .opts-cell { font-size: 11px; }
.fb-body { font-size: 13px; margin-top: 7px; white-space: pre-wrap; word-break: break-word; }
.fb-light {
  position: fixed; inset: 0; z-index: 90; background: rgba(15, 13, 22, .8);
  display: none; align-items: center; justify-content: center; cursor: zoom-out;
}
.fb-light.on { display: flex; }
.fb-light img { max-width: 94vw; max-height: 92vh; border-radius: 8px; box-shadow: var(--drawer-shadow); }

/* コメント（v3.33・fb-itemの末尾に差し込み） */
.fb-comments { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.fb-comment-toggle {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 2px 0;
}
.fb-comment-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-comment-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.fb-comment-row { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface-2); }
.fb-comment-head { display: flex; align-items: baseline; gap: 8px; }
.fb-comment-author { font-size: 12px; font-weight: 700; }
.fb-comment-time { font-size: 10.5px; color: var(--ink-3); }
.fb-comment-body { font-size: 12.5px; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.fb-comment-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.fb-comment-note { font-size: 11.5px; font-weight: 600; color: var(--accent); }
.fb-comment-name-input, .fb-comment-body-input {
  font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 7px; padding: 6px 10px;
}
.fb-comment-body-input { resize: vertical; min-height: 46px; }
.fb-comment-send { align-self: flex-end; }
table.mtable td {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  padding: 3px 4px; vertical-align: middle;
}
table.mtable tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
table.mtable td input {
  padding: 6px 8px; border-color: transparent; background: transparent; border-radius: 6px;
}
table.mtable td input:hover { border-color: var(--line); }
table.mtable td input:focus { border-color: var(--accent); background: var(--surface); }
table.mtable td input[type="number"] { text-align: right; }
table.mtable td input[type="color"] { width: 42px; height: 28px; padding: 2px; }
table.mtable td select {
  padding: 6px 8px; border-color: transparent; background: transparent; border-radius: 6px;
}
table.mtable td select:hover { border-color: var(--line); }
table.mtable td select:focus { border-color: var(--accent); background: var(--surface); }
/* display:flexにするとtable-cellでなくなり行の罫線がズレるので通常セルのまま右寄せ */
table.mtable td.m-actions { white-space: nowrap; text-align: right; }
table.mtable td.m-actions .m-btn { margin-left: 4px; }
/* 保存は編集した行にだけ出す（visibilityで列幅は固定） */
table.mtable .m-save { visibility: hidden; }
table.mtable tr.dirty .m-save { visibility: visible; }
td.m-handle-cell { width: 28px; }
.m-handle {
  cursor: grab; color: var(--ink-3); font-size: 15px; padding: 2px 6px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  display: inline-block;
}
.m-handle:hover { color: var(--ink); }
tr.m-dragging { opacity: .55; background: var(--accent-soft); }
.m-btn {
  appearance: none; font: inherit; cursor: pointer; border: 1.5px solid var(--line);
  background: var(--surface-2); color: var(--ink); border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600;
}
.m-btn:hover { border-color: var(--accent); }
.m-btn.m-danger { border-color: var(--danger); color: var(--danger); }
.m-btn.m-primary { border-color: var(--accent); background: var(--accent-soft); }
/* 行の削除ボタン: 普段は控えめな×・1回目のタップで「削除する」に変わり2回目で実行 */
.m-btn.m-x { border-color: transparent; background: transparent; color: var(--danger); opacity: .5; padding: 4px 9px; font-size: 14px; line-height: 1.2; }
.m-btn.m-x:hover { opacity: 1; border-color: var(--danger); }
.m-btn.m-x.confirm { opacity: 1; background: var(--danger); color: #fff; border-color: var(--danger); font-size: 12px; font-weight: 700; }

/* 「＋ 〜を追加」: 押すまで入力フォームは畳んでおく */
.m-add-toggle {
  appearance: none; font: inherit; cursor: pointer; width: 100%;
  border: 1.5px dashed var(--line); background: transparent; color: var(--ink-3);
  border-radius: 8px; padding: 8px; font-size: 12px; font-weight: 700;
}
.m-add-toggle:hover, .m-add-toggle.open { color: var(--accent); border-color: var(--accent); }
.m-addform { display: grid; gap: 8px; margin-top: 10px; align-items: center; }
.m-addform[hidden] { display: none; }

/* コース設定内: バック/ルーム料の一括再計算（FB#16） */
.m-recalc { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.m-recalc-desc { font-size: 12px; color: var(--ink-3); margin: 0 0 8px; }
.m-recalc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-recalc-row input[type="date"] { font: inherit; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.m-recalc-result { margin-top: 10px; font-size: 12.5px; line-height: 1.6; }
.m-recalc-result[hidden] { display: none; }

/* ドロワーのロングコース欄（デフォルト折りたたみ・最安組み合わせを自動計算） */
.long-toggle {
  appearance: none; font: inherit; cursor: pointer; width: 100%; margin-top: 8px;
  border: 1.5px dashed var(--line); background: transparent; color: var(--ink-3);
  border-radius: 8px; padding: 7px; font-size: 12px; font-weight: 700; text-align: left; padding-left: 12px;
}
.long-toggle:hover { color: var(--accent); border-color: var(--accent); }
#f-long { margin-top: 8px; }
.combo-note { margin-top: 6px; font-size: 11.5px; color: var(--accent); font-weight: 600; }

/* マスタ管理内の店舗タブ（旧storebarスタイルを流用） */
.storebar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.storebar button {
  appearance: none; font: inherit; cursor: pointer; font-weight: 700;
  background: var(--surface); color: var(--ink-2);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.storebar button::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.storebar button.sel {
  color: var(--ink); border-color: var(--c);
  box-shadow: inset 0 -3px 0 var(--c); background: var(--surface);
}
.storebar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── 列の並び替えリスト（リスト表示・CSV出力で共用） ── */
.ordlist { display: grid; gap: 6px; }
.ord-row {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px;
  background: var(--surface-2); font-size: 13px; font-weight: 600; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ord-row .m-handle { padding: 0 4px; }
.ord-row .tgl { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--accent); }
.ord-row.off { opacity: .45; }
.ord-row.off .tgl { color: var(--ink-3); }
.ord-row.m-dragging { opacity: .55; background: var(--accent-soft); }
.ord-row.ds-vis-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; flex: none; }

/* ── シフト編集/追加ポップアップ ── */
.shift-modal {
  position: fixed; top: 10vh; left: 50%; transform: translateX(-50%);
  width: min(420px, 94vw); max-height: 84vh; overflow-y: auto;
  background: var(--surface); border-radius: 12px; box-shadow: var(--drawer-shadow);
  z-index: 62; display: none; flex-direction: column;
}
.shift-modal.on { display: flex; }
.shift-modal .m-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); flex: none;
}
.shift-modal .m-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.shift-modal .m-body { padding: 16px 20px; }
.sh-error { color: var(--danger); font-size: 12.5px; margin: 0 0 4px; }
.sh-cast-info { color: var(--ink-2); font-size: 11.5px; margin: 4px 0 0; }
.sh-cast-info-special { color: var(--accent); font-weight: 700; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.check-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }

/* ── 状態バッジ（部屋名の横にインライン表示・セル高さを変えない） ── */
.absent-mark, .closed-mark, .stray-mark, .line-mark {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.5;
  border: 1.5px solid currentColor; border-radius: 5px; padding: 0 6px;
  margin-left: 5px; vertical-align: 1px;
}
.absent-mark { color: var(--danger); }
.closed-mark { color: var(--s-done); background: var(--s-done-bg); }
.stray-mark { color: var(--s-wait-call); margin-left: 0; }
/* まっとる店のひよこ系統バッジ（casts.line='hiyoko'） */
.line-mark { color: var(--s-active); background: var(--s-active-bg); }

/* ── 部屋引継ぎ（同じ部屋を複数キャストで使う）: 部屋名を組ごとの同色+極太に（シャドウ等の飾りなし） ── */
.b-cast .rm .hv-room {
  color: var(--hc);
  font-weight: 800;
}
.b-cast .rm .hv-mark { color: var(--danger); font-weight: 700; margin-left: 3px; }

/* ── 休み: 斜線グレー ── */
.b-row.row-absent .lane {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink-3) 16%, transparent) 0 8px, transparent 8px 16px);
  cursor: default;
}
/* ── 受付終了: 薄いグレー掛け（既存の受付はそのまま見える） ── */
.b-row.row-closed .lane {
  background:
    linear-gradient(color-mix(in srgb, var(--ink-3) 10%, transparent), color-mix(in srgb, var(--ink-3) 10%, transparent)),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--line) 70%, transparent) 0 1px, transparent 1px calc(100% / 30));
}
/* ── シフト外: 琥珀の斜線 ── */
.b-row.row-stray .lane {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--s-wait-call) 13%, transparent) 0 8px, transparent 8px 16px);
}

/* タイムテーブルの並び替えコントロール */
.board-sort {
  width: auto; font-weight: 600; font-size: 13px;
  padding: 7px 10px; background: var(--surface);
}
#board-closed-last.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* ══ 日報詳細表（Excel風シート・v3.56）／上がり（v3.76） ══ */
/* カード⇄詳細表⇄上がりの切り替え（data-mode未設定=JS失敗時はカードのみ表示の安全側）。
   調整額(.adj-card)はv3.77で3ビュー共通ヘッダーになったためこの制御の対象外(常時表示) */
#view-daily[data-mode="sheet"] #tiles,
#view-daily[data-mode="sheet"] .daily-grid,
#view-daily[data-mode="agari"] #tiles,
#view-daily[data-mode="agari"] .daily-grid,
#view-daily[data-mode="metrics"] #tiles,
#view-daily[data-mode="metrics"] .daily-grid { display: none; }
#view-daily:not([data-mode="sheet"]) #daily-sheet-wrap { display: none; }
#view-daily:not([data-mode="agari"]) #daily-agari-wrap { display: none; }
#view-daily:not([data-mode="metrics"]) #daily-metrics-wrap { display: none; }

/* ══ 日報「指標」（指標カタログ・v4.9） ══ */
#daily-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.mt-tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.mt-tile .k { font-size: 12px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mt-tile .k .spacer { flex: 1; }
.mt-tile .v { font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
.mt-tile .s { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.mt-tile.mt-broken .v { font-size: 14px; color: var(--danger, #d33); }
.mt-icon-btn { border: none; background: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.mt-icon-btn:hover { background: var(--surface-2); }
.btn-sub#mt-zero.mt-on { background: var(--accent); color: #fff; border-color: var(--accent); } /* 0️⃣ON=0を空欄表示中（v4.23.1） */
/* 定義エディタ（管理者向けの簡素なフォーム・第1弾） */
#mt-editor { border: 1px solid var(--accent); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--surface); }
#mt-editor .mt-ed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
#mt-editor .mt-ed-row > .flabel2 { min-width: 76px; }
#mt-editor select, #mt-editor input[type="text"], #mt-editor input[type="number"] { width: auto; max-width: 100%; }
#mt-editor .mt-flt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
#mt-editor .mt-preview { font-size: 12px; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }
#mt-editor .mt-preview b { font-size: 15px; }
#mt-editor .mt-bcol-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
/* 表（長方形ブロック・v4.11）: 詳細表と同じtable.dsスタイルで描く。幅いっぱい+横スクロール */
.mt-tile.mt-block { grid-column: 1 / -1; }
.mt-tile .mt-tbl { margin: 6px 0 4px; overflow-x: auto; }
.mt-tile .mt-tbl table.ds td, .mt-tile .mt-tbl table.ds th { padding: 2px 8px; }
.mt-tile .mt-tbl td.num { text-align: right; }
.mt-cell-broken { color: var(--ink-3); }
.mt-cell-v { text-align: right; }
/* 表の自由配置（v4.13・詳細表の配置と同じ操作感）。#daily-metricsは常にrelative=offset計測の基準 */
#daily-metrics { position: relative; }
#daily-metrics.mt-canvas { display: block; transform-origin: 0 0; }   /* 縮小表示（v4.36・狭い画面でPCの配置をそのまま縮めて収める）の基点 */
#daily-metrics.mt-canvas .mt-tile.mt-block { position: absolute; width: max-content; max-width: 100%; }
#daily-metrics.mt-editing .mt-tile.mt-block { cursor: move; touch-action: none;
  outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--surface); }
#daily-metrics.mt-editing .mt-tile.mt-block .mt-icon-btn { pointer-events: none; opacity: .35; }
#daily-metrics .mt-tile.mt-dragging { opacity: .85; z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
/* タップ接続（v4.14.3）: 選択中の表のハイライト（点線=編集モードより強い実線） */
#daily-metrics.mt-editing .mt-tile.mt-block.mt-connect-src { outline: 3px solid var(--accent); outline-offset: 2px; }
/* クロームレス表示（v5）: 表タイルは枠・余白なしで表本体だけ。名前+ⓘ✎🙈🗑は
   ホバー（PC）またはタイルタップ（タブレット=.mt-pill-on）で右上に浮かぶピルに出す */
.mt-tile.mt-block { border: none; border-radius: 0; padding: 0; background: none; position: relative; }
.mt-tile.mt-block .mt-tbl { margin: 0; }
/* ピルは表の中でなく「表の右上角の上」（表の外）に浮かべる（ユーザー要望 2026-07-17）。
   bottom=タイル上端ぴったり（隙間0）にしてホバーがピルまで途切れず届くようにする。
   最上段の表のピルがツールバー（＋表を追加等）に被らないよう、ビュー全体に上マージンで居場所を取る */
#daily-metrics { margin-top: 28px; }
.mt-pill { position: absolute; top: 0; right: 0; transform: translateY(-100%); display: none;
  align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); z-index: 4; }
/* ピルが上の表に重なった時に下敷きにならないよう、ホバー中のタイルを前面へ */
.mt-tile.mt-block:hover, .mt-tile.mt-block.mt-pill-on { z-index: 6; }
.mt-pill .mt-pill-name { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-right: 2px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-tile.mt-block:hover .mt-pill, .mt-tile.mt-block.mt-pill-on .mt-pill { display: flex; }
#daily-metrics.mt-editing .mt-pill { display: none; }
/* 定義文ポップ（ⓘ）。displayはhidden属性に任せる（クラスでdisplay指定するとhiddenが負ける罠） */
.mt-tile.mt-block .mt-defpop { position: absolute; top: 28px; right: 2px; max-width: min(420px, 96%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); z-index: 4; }
/* タブ管理（⚙）・ベース指標モーダル（v4.13） */
#daily-mode #daily-tabs-edit { padding: 6px 9px; }
.dt-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.mtb-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed var(--line); }
.mtb-row .mtb-name { font-weight: 600; min-width: 140px; }
.mtb-row .mtb-val { min-width: 90px; text-align: right; }
.mtb-row .mtb-def { flex: 1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mtb-modal, #dt-modal, #tpl-modal { width: min(860px, 94vw); }
.mtb-sec { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
/* 手入力の表（空の表・v5）のセル */
table.ds input.mt-min { width: 76px; }
/* 行・列の個別表示/非表示（👁・v4.34）: 通常は消す（DOMには残す=合計のDOM集計を狂わせない）。
   👁編集中（.mt-rc-on）は薄く見せて見出し（data-rck）タップで切替。非表示中の見出しは打ち消し線 */
table.ds .mt-hidecell { display: none; }
.mt-tile.mt-rc-on table.ds .mt-hidecell { display: table-cell; opacity: .4; }
.mt-tile.mt-rc-on table.ds [data-rck] { cursor: pointer; outline: 1px dashed var(--accent); outline-offset: -2px; }
.mt-tile.mt-rc-on table.ds [data-rck].mt-hidecell { text-decoration: line-through; }
.mt-tile.mt-block.mt-rc-on .mt-pill { display: flex; }   /* 編集中はピル（✅保存）を出しっぱなしに */
.mt-icon-btn.mt-on { background: var(--accent); }

.ds-wrap { overflow-x: auto; }
.ds-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ds-blocks { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; position: relative; }
.ds-block { max-width: 100%; overflow-x: auto; }
/* 自由配置（「配置」ボタンで保存した端末のみ・座標と高さはdaily-sheet.jsが指定） */
.ds-blocks.ds-canvas { display: block; }
.ds-blocks.ds-canvas .ds-block { position: absolute; }
#daily-sheet.ds-editing .ds-block { cursor: move; touch-action: none; outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 4px; background: var(--surface); }
#daily-sheet.ds-editing .ds-block input { pointer-events: none; }
.ds-block.ds-dragging { opacity: .85; z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
table.ds { border-collapse: collapse; font-size: 12px; }
table.ds th, table.ds td { border: 1px solid var(--line); padding: 1px 4px; text-align: center; height: 24px; }
table.ds th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); white-space: nowrap; padding: 3px 6px; }
table.ds td.lbl { background: var(--surface-2); text-align: left; white-space: nowrap; color: var(--ink-2); padding: 1px 6px; }
table.ds td.lbl.ds-both { background: #fde68a; color: #92400e; font-weight: 700; } /* 早遅両方出勤（FB#40） */
table.ds th.ds-both { background: #fde68a; color: #92400e; font-weight: 700; } /* 同・日報表の列見出し（分割=列の向き・v4.34） */
table.ds td.in { padding: 0; }
table.ds td.unit { border-left: none; color: var(--ink-3); font-size: 11px; }
table.ds input { border: none; background: transparent; color: var(--ink); font: inherit; padding: 3px 4px; }
table.ds input:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 2px; }
table.ds input.ds-num { width: 48px; text-align: center; }
/* カンマ区切りで7桁(1,234,567)まで見切れないよう本数系より広め */
table.ds input.ds-money { text-align: right; width: 78px; }
table.ds td.sum { background: var(--s-wait-call-bg); color: var(--s-wait-call); font-weight: 600; text-align: center; min-width: 48px; padding: 1px 6px; }
table.ds td.sum.ds-money { text-align: right; }
.ds-ref { margin: 6px 0 0; }
/* 受付ドロワーの項目並び替え（FB#34・v4.4） */
.d-body [data-fld] { position: relative; }
.drawer.d-reordering .d-body [data-fld] { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 6px; }
.fld-mv { position: absolute; top: -4px; right: 0; display: flex; gap: 4px; z-index: 2; }
.fld-mv .btn-sub { padding: 1px 8px; font-size: 12px; background: var(--surface); }
/* 幅変更ハンドル(v4.5): 編集モード中だけ右端に出る縦グリップ */
.fld-rz {
  position: absolute; top: 20px; bottom: 0; right: -6px; width: 14px;
  cursor: ew-resize; touch-action: none; z-index: 3;
}
.fld-rz::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 5px; height: 28px; border-radius: 3px; background: var(--accent); opacity: .75;
}
.fld-rz:hover::after { opacity: 1; }
/* 表示・配置テンプレート（v4.7・表示設定モーダル内） */
.ds-preset-row { display: flex; align-items: center; gap: 8px; }
.ds-preset-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ds-preset-store { font-size: 11px; font-weight: 700; white-space: nowrap; }
.ds-preset-store:not(:empty)::before { content: "■ "; }
.ds-preset-del { color: var(--s-wait-call, #c0392b); }
.ds-preset-empty { color: var(--ink-3); font-size: 12.5px; padding: 6px 2px; }
.ds-preset-new { display: flex; gap: 8px; margin-top: 8px; }
.ds-preset-new input { flex: 1; min-width: 0; }

/* 案内番号のポップアップ選択（v4.5続報）: 見た目は対面受付の.c-guide-gridと揃える */
#guide-pop:not([hidden]) {
  position: fixed; z-index: 60; width: 330px; max-height: 260px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
#guide-pop button {
  min-width: 46px; height: 42px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
}
#guide-pop button.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#guide-pop button.reused { border-style: dashed; opacity: .62; }
#guide-pop button.reused.sel { opacity: 1; }
#guide-pop button:disabled { opacity: .3; cursor: not-allowed; }

/* ドラッグ中は現在の幅%をブロック左上に表示 */
.d-reordering [data-fld][data-rz-pct]::before {
  content: attr(data-rz-pct); position: absolute; top: -4px; left: 0; z-index: 3;
  font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent);
  padding: 1px 7px; border-radius: 6px;
}
/* 表編集（v4.0）: 表示設定の「表」ボタンと行・列の編集リスト */
.ds-vis-row { display: flex; align-items: center; gap: 8px; }
.ds-vis-row .ds-tbl-btn { margin-left: auto; padding: 3px 10px; font-size: 12px; }
.ds-tbl-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.ds-tbl-row .mv { padding: 2px 9px; font-size: 12px; }
.ds-tbl-row .ds-tbl-lbl { min-width: 90px; font-size: 13px; }
.ds-tbl-row .ds-tbl-name { flex: 1; min-width: 80px; font: inherit; font-size: 13px; padding: 4px 6px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* ラインの分離設定（v4.49・設定⚙のサービスラインセクション） */
.m-linesplit { margin: 6px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.m-ls-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.m-ls-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.m-ls-item { display: inline-flex; align-items: center; gap: 4px; margin-right: 16px; font-size: 13px; cursor: pointer; }

/* マスタのラインごとのグループ見出し（v4.49.3・コース等をライン別に並べる） */
.m-linegroup {
  margin: 14px 0 4px; padding: 4px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff; display: inline-block;
}
.m-linegroup.shared { background: var(--muted); }

/* 💻端末（v4.50） */
.dev-me { display: flex; gap: 10px; align-items: flex-end; margin: 10px 0 14px; }
.dev-me label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; flex: 1; }
.dev-me input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
.dev-id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
tr.dev-current td { font-weight: 700; }

/* 変更履歴（v4.51・受付ドロワー） */
.btn-hist { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); font-weight: 600; cursor: pointer; }
.d-history { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); max-height: 260px; overflow-y: auto; }
.hist-note { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.hist-item { padding: 7px 0; border-top: 1px solid var(--line); }
.hist-item:first-of-type { border-top: none; }
.hist-head { font-size: 12px; margin-bottom: 3px; }
.hist-at { color: var(--muted); }
.hist-dev { color: var(--muted); }
/* 🔁自動: 進行状況の自動更新による変更（端末名は発火役に過ぎない・v4.54） */
.hist-auto { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 0 5px; }
.hist-chg { font-size: 12px; padding-left: 10px; }
.hist-f { display: inline-block; min-width: 5.5em; color: var(--muted); }
.hist-b { text-decoration: line-through; opacity: .7; }
.hist-a { font-weight: 700; }

/* 削除済みの受付（v4.51.1・受付リストの下に続けて並べる） */
tr.row-delsep td { padding: 10px 8px 4px; font-size: 12px; font-weight: 700; color: var(--muted); border-top: 2px solid var(--line); }
tr.row-deleted { opacity: .55; }
tr.row-deleted td { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent); }
tr.row-deleted:hover { opacity: .8; }

/* 削除済み受付の閲覧専用ドロワー（v4.51.1） */
.d-deleted-note { margin: 8px 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--fg); }
/* 閲覧専用でも**中身をスクロールして見られる**ようにする。
   本体にpointer-events:noneを掛けるとスクロールまで殺してしまうので、操作要素だけ無効化する */
#drawer.readonly #d-body { opacity: .75; }
#drawer.readonly #d-body input,
#drawer.readonly #d-body select,
#drawer.readonly #d-body textarea,
#drawer.readonly #d-body button { pointer-events: none; }

/* ライブ表示に削除済みが混ざった時の明示（v4.51.3） */
.ld-deleted { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--muted) 30%, transparent); color: var(--fg); }
.live-draft-card.ld-is-deleted { opacity: .7; }