:root {
  color-scheme: light;
  --ink:#0f172a; --muted:#64748b; --line:#e5e9f0; --line-strong:#cbd5e1;
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-bg:#eef4ff;
  --bg:#eef1f6; --panel:#ffffff;
  --ok:#15803d; --ok-bg:#e7f7ed; --warn:#b45309; --warn-bg:#fff5e4; --bad:#dc2626; --bad-bg:#fdecea;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.06);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.55; }
a { color:var(--blue-d); }
header { background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); padding:11px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:0; z-index:10; box-shadow:var(--shadow-sm); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand-mark { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; display:grid; place-items:center; font-weight:800; font-size:19px; box-shadow:0 4px 12px rgba(37,99,235,.35); }
.brand-text { display:flex; flex-direction:column; line-height:1.2; font-weight:800; font-size:16px; }
.brand-text small { font-weight:600; font-size:11.5px; color:var(--muted); }
.brand:hover .brand-text { color:var(--blue-d); }
nav { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
nav a { color:var(--muted); border-color:transparent; background:transparent; }
nav a:hover { color:var(--blue-d); background:var(--blue-bg); }
/* ハンバーガーメニュー（狭い画面のみ表示。JS不要のcheckbox-hackで開閉する）。 */
.nav-toggle-cb { display:none; }
.nav-toggle-btn { display:none; }
nav a, .button, button { border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); text-decoration:none; padding:8px 13px; border-radius:9px; font-weight:600; cursor:pointer; font-size:14px; transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform .04s; display:inline-flex; align-items:center; gap:6px; line-height:1.2; }
.button:hover, button:hover { background:#f8fafc; border-color:var(--muted); }
.button:active, button:active { transform:translateY(1px); }
.primary, button.primary { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 2px 6px rgba(37,99,235,.3); }
.primary:hover, button.primary:hover { background:var(--blue-d); border-color:var(--blue-d); }
.danger, button.danger { color:var(--bad); border-color:#f0c4c0; background:var(--panel); }
.danger:hover, button.danger:hover { background:var(--bad-bg); border-color:var(--bad); }
main { max-width:1200px; margin:0 auto; padding:26px 24px 48px; }
h1 { font-size:25px; margin:0 0 18px; letter-spacing:-.02em; font-weight:800; }
h2 { font-size:18px; margin:30px 0 12px; letter-spacing:-.01em; font-weight:800; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
h2 a { font-weight:600; }
.grid { display:grid; gap:16px; }
.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.metric { font-size:30px; font-weight:800; margin-top:6px; letter-spacing:-.02em; }
.muted { color:var(--muted); }
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
th, td { border-bottom:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top; font-size:14px; }
th { background:#f7f9fc; font-size:12px; font-weight:700; color:#475569; letter-spacing:.01em; }
tbody tr:hover td { background:#f8fbff; }
tr:last-child td { border-bottom:none; }
td form { display:inline-flex; }
input, select, textarea { width:100%; border:1px solid var(--line-strong); border-radius:9px; padding:10px 12px; font:inherit; background:#fff; transition:border-color .12s, box-shadow .12s; }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background:#f1f5f9; color:#64748b; border-color:#cbd5e1; cursor:not-allowed; opacity:1; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg); }
input[type="checkbox"] { width:auto; }
textarea { min-height:90px; resize:vertical; }
label { display:grid; gap:6px; font-weight:700; font-size:13px; color:#334155; }
form .row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:2px; }
form .row3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:2px; }
form.card label { margin-bottom:10px; }
form.card .row label, form.card .row3 label { margin-bottom:0; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.pill { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; background:var(--blue-bg); color:var(--blue-d); font-size:12px; font-weight:700; }
.ok { color:var(--ok); font-weight:700; } .warn { color:var(--warn); font-weight:700; } .bad { color:var(--bad); font-weight:700; }
.calendar { display:grid; grid-template-columns:90px repeat(7,minmax(120px,1fr)); border:1px solid var(--line); background:var(--panel); overflow:auto; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.calendar > div { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px; min-height:58px; }
.calendar > div:nth-child(8n) { border-right:none; }
.cal-head { background:#f7f9fc; font-weight:800; position:sticky; top:61px; z-index:1; }
.cal-time { color:var(--muted); font-size:12px; background:#fafbfe; }
.event { display:block; margin:4px 0; padding:6px 8px; border-radius:7px; background:var(--blue-bg); color:#163b6f; font-size:12px; font-weight:600; text-decoration:none; }
.event.manual { background:#eafaf0; color:#135b37; }
.event.cancelled, .event.canceled, .event.declined, .event.no_show { background:#f3f4f6; color:#697386; text-decoration:line-through; }
.notice { padding:13px 15px; border:1px solid #ffd9a0; background:var(--warn-bg); border-radius:var(--radius-sm); margin:14px 0; }
.notice strong { color:var(--warn); }
.tabs { display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.tabs a { border:1px solid var(--line-strong); background:var(--panel); padding:8px 16px; border-radius:999px; text-decoration:none; font-weight:700; font-size:14px; color:var(--muted); transition:all .12s; }
.tabs a:hover { color:var(--blue-d); border-color:#bcd3ff; }
.tabs a.active { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.3); }
.day-nav { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 14px; }
.day-nav .date-label { font-size:18px; font-weight:800; margin-right:4px; }
.day-nav form { display:flex; gap:6px; align-items:center; }
.day-nav input[type="date"] { width:auto; padding:7px 10px; }
/* 日別/週間ナビの即時フィードバック（実機FB「翌日ボタンの反応がわるい」対策）:
   押下中(:active)は色でも押した感を出し、クリック確定後(.busy: 共通JSが付与)は
   遷移完了まで「…」付きで薄く表示して二重クリックも防ぐ。 */
.day-nav a.button:active { background:var(--blue-bg); border-color:var(--blue); color:var(--blue-d); }
.day-nav a.button.busy { opacity:.55; pointer-events:none; }
.day-nav a.button.busy::after { content:"…"; }
.tl-wrap { overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.tl { border-collapse:separate; border-spacing:0; width:100%; }
.tl th, .tl td { border-bottom:1px solid var(--line); border-right:1px solid #eef1f6; padding:3px 4px; font-size:12px; height:46px; min-width:74px; vertical-align:top; }
.tl thead th { background:#f7f9fc; font-size:11px; color:#475569; height:auto; padding:7px 4px; text-align:center; position:sticky; top:0; z-index:2; }
.tl tr:last-child td, .tl tr:last-child th { border-bottom:none; }
.tl .tl-head { position:sticky; left:0; background:#fafbfe; min-width:118px; font-weight:700; font-size:13px; text-align:left; z-index:1; padding:8px; }
.tl .tl-head small { display:block; color:var(--muted); font-weight:600; font-size:11px; }
.tl-block { border-radius:7px; padding:4px 8px; font-size:12px; font-weight:700; color:#163b6f; background:#dbeafe; border:1px solid #bfdbfe; display:block; margin:1px 0; overflow:hidden; text-decoration:none; cursor:pointer; transition:box-shadow .1s; }
.tl-block:hover { box-shadow:0 0 0 2px var(--blue) inset; }
.tl-occ td { text-align:center; font-size:12px; font-weight:700; }
.tl-block small { display:block; font-weight:600; opacity:.75; font-size:11px; }
.tl-block.st-seated { background:#dcfce7; border-color:#86efac; color:#14532d; }
.tl-block.st-completed { background:#f1f5f9; border-color:#e2e8f0; color:#64748b; }
.statbar { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 18px; min-width:128px; box-shadow:var(--shadow-sm); }
.stat b { display:block; font-size:22px; }
.stat span { font-size:12px; color:var(--muted); }
.stat.ok-b { border-color:#9ae6b4; background:var(--ok-bg); }
.stat.warn-b { border-color:#ffd58a; background:var(--warn-bg); }
.seat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.seat-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); }
.seat-card.paused { opacity:.6; background:#f8fafc; }
.seat-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.seat-name { font-size:17px; font-weight:800; }
.seat-cap { background:var(--blue-bg); color:var(--blue-d); font-weight:800; border-radius:999px; padding:3px 12px; font-size:13px; white-space:nowrap; }
.seat-meta { color:var(--muted); font-size:12.5px; margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.seat-tag { background:#f1f5f9; border-radius:6px; padding:1px 8px; }
.seat-card details { margin-top:10px; border-top:1px dashed var(--line); padding-top:10px; }
.seat-card summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--blue); list-style:none; }
.seat-card summary::-webkit-details-marker { display:none; }
.check-chips { display:flex; gap:8px; flex-wrap:wrap; }
.check-chips label { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; }
.check-chips label:has(input:checked) { background:var(--blue-bg); border-color:var(--blue); color:var(--blue-d); }
@media (max-width: 760px) {
  header { padding:10px 16px; flex-wrap:wrap; }
  main { padding:18px 14px 40px; }
  .two,.three,form .row,form .row3 { grid-template-columns:1fr; }
  nav a, .button, button { padding:7px 10px; font-size:13px; }
  .seat-grid { grid-template-columns:1fr; }
  /* ナビが横に収まらないため、ハンバーガーボタンで開閉する縦積みメニューにする。 */
  .nav-toggle-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border-radius:9px; font-size:18px; line-height:1; }
  nav { flex-basis:100%; display:none; flex-direction:column; align-items:stretch; gap:6px; padding-top:12px; order:3; }
  nav a, nav form, nav button { width:100%; justify-content:flex-start; }
  nav form button { width:100%; justify-content:center; }
  .nav-toggle-cb:checked ~ nav { display:flex; }
}
/* テーブルの横スクロール（モバイルで10列超の予約表を崩さない） */
.tbl-scroll { overflow-x:auto; }
/* 単体トグル（チェックボックス1つ+説明文）。既定の label は display:grid のため、
   <label><input>テキスト</label> の順で書くとチェックボックスと文言が別行に割れる。
   このクラスは inline-flex で同じ行に並べ、周囲を色付きカードで囲んで他の項目と区別する。 */
.toggle-card { background:var(--blue-bg); border:1px solid #bcd9ff; border-radius:var(--radius-sm); padding:14px 16px; margin:14px 0 18px; }
.toggle-card .toggle-row { display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; margin:0; }
.toggle-card input[type="checkbox"] { width:19px; height:19px; margin:0; flex-shrink:0; accent-color:var(--blue); cursor:pointer; }
.toggle-card p { margin:8px 0 0; }
/* ===== 店舗設定ページ（目的別セクションカード + 固定保存バー） ===== */
.page-lead { margin:-8px 0 18px; font-size:13.5px; }
.settings-form { display:grid; gap:16px; }
.settings-form .section-card { margin:0; }
.section-card label { margin-bottom:12px; }
.section-card .row label, .section-card .row3 label,
.section-card .check-chips label, .section-card .toggle-card label { margin-bottom:0; }
.section-head { display:flex; align-items:center; gap:12px; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.section-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; flex-shrink:0; }
.section-icon.tone-blue { background:var(--blue-bg); }
.section-icon.tone-green { background:var(--ok-bg); }
.section-icon.tone-amber { background:var(--warn-bg); }
.section-icon.tone-violet { background:#f1edff; }
.section-icon.tone-slate { background:#f1f5f9; }
.section-icon.tone-pink { background:#fdf2f8; }
.section-title { display:grid; gap:1px; }
.section-title b { font-size:16px; letter-spacing:-.01em; }
.section-title small { color:var(--muted); font-size:12.5px; font-weight:600; line-height:1.5; }
/* 入力欄直下の補足説明。inline style の負マージン乱用を置き換える共通クラス。 */
.hint { color:var(--muted); font-size:12.5px; margin:-4px 0 16px; line-height:1.65; }
.section-card .hint:last-child { margin-bottom:0; }
/* 総席数の要約表示（読み取り専用の数値を入力欄と混ざらない見た目で示す） */
.seat-summary { display:flex; align-items:center; gap:16px; background:#f8fafc; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:16px; }
.seat-summary b { font-size:26px; letter-spacing:-.02em; color:var(--blue-d); white-space:nowrap; }
.seat-summary span { font-size:12.5px; font-weight:700; color:#334155; line-height:1.55; }
.seat-summary .muted { font-weight:600; }
/* 画面下に追従する保存バー。長いフォームでも保存ボタンを探さなくて済むように。 */
.save-bar { position:sticky; bottom:12px; z-index:5; display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow); }
.save-bar .muted { font-size:12.5px; }
/* エラー通知（警告と区別する赤系。role="alert" と併用） */
.notice-error { padding:13px 15px; border:1px solid #f0c4c0; background:var(--bad-bg); border-radius:var(--radius-sm); margin:14px 0; color:var(--bad); font-weight:600; }
/* 成功通知（保存しました等のフラッシュ表示） */
.notice-ok { padding:13px 15px; border:1px solid #9ae6b4; background:var(--ok-bg); border-radius:var(--radius-sm); margin:14px 0; color:var(--ok); font-weight:600; }