/* バス座席表作成 — 画面スタイル
 *
 * CSP は style-src 'self' のためインラインスタイルを使えない。
 * グリッド座標やグループ配色は、あらかじめ定義したクラス（gr-N, gc-N, g-c0..9）で表現する。
 *
 * デザイン方針（ユーザビリティ重視の全面刷新）:
 *   - すべての入力欄（text/number/date/select/textarea/checkbox/radio）は、白一色に埋もれない
 *     よう青みのある地色を敷き、はっきり見える枠線とフォーカスリングを付ける。
 *   - チェックボックス付きラベルはカード状の背景・枠線で囲み、クリック領域を視覚的に示す。
 *   - 見出し・パネル・トグル状態などに青／緑の2系統のアクセントカラーを積極的に使い、
 *     「白すぎて入力箇所が分からない」を無くすことを最優先にする。
 */

:root {
  --bg: #dfe6f2;
  --surface: #ffffff;
  --surface-alt: #eaf1fb;
  --surface-sunken: #dbe6f4;
  --surface-tint: #f3f7fd;

  --border: #a9b7cc;
  --border-strong: #5c7189;
  --border-input: #4d6b93;

  --text: #12192a;
  --muted: #4c5768;

  --accent: #1f5fa9;
  --accent-hover: #14406f;
  --accent-soft: #d8e7fa;
  --accent-soft-strong: #bfd9f5;
  --accent-ring: rgba(31, 95, 169, .32);

  --accent2: #0d7a6c;
  --accent2-hover: #095e53;
  --accent2-soft: #d8f0ea;

  --danger: #b3261e;
  --danger-soft: #fbdedb;
  --danger-border: #d99a95;

  --warn: #8a5a00;
  --warn-soft: #ffe9b3;
  --warn-border: #e0a800;

  --ok: #1c6b38;
  --ok-soft: #cdefd9;
  --ok-border: #2e7d46;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .12);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.35; color: var(--text); }
h2 {
  font-size: 1.2rem;
  margin: 0 0 .7rem;
  font-weight: 700;
  color: var(--accent-hover);
}
h3 {
  font-size: 1rem;
  margin: 1.7rem 0 .7rem;
  font-weight: 700;
  padding: .3rem .1rem .3rem .6rem;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------- appbar */

.appbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.2rem;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.appbar__title { font-size: 1.15rem; margin: 0; font-weight: 700; }
.appbar__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.badge {
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid var(--accent);
  white-space: nowrap;
}

.privacy {
  margin: 0;
  padding: .65rem 1.2rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text);
}

/* ---------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .8rem 1.2rem 0;
}

.tab {
  border: 2px solid var(--border);
  border-bottom: none;
  background: var(--surface-sunken);
  color: var(--muted);
  padding: .55rem 1.1rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.tab:hover { background: var(--surface-alt); color: var(--text); }

.tab--active {
  background: var(--surface);
  color: var(--accent-hover);
  border-color: var(--accent);
  border-top-width: 3px;
  border-bottom: 2px solid var(--surface);
  margin-bottom: -2px;
  margin-top: -1px;
  position: relative;
}

/* ---------------------------------------------------------------- panel */

.panel {
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-top: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  margin: 0 1.2rem 1.5rem;
  padding: 1.3rem;
  box-shadow: var(--shadow-sm);
}

.hint { color: var(--muted); font-size: .85rem; margin: .2rem 0 .9rem; }
.warn {
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-left-width: 4px;
  padding: .6rem .8rem;
  font-size: .85rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem 1.1rem;
}

.grid-form label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
}

/* チェックボックス付きラベルはカード状に囲み、クリック領域を明示する。 */
.grid-form label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font-weight: 500;
  padding: .6rem .8rem;
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
}

.grid-form label.checkbox:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------- form controls */

/* 入力欄はパネルの白地に埋もれないよう、常に青みの地色を敷く。 */
input[type="text"], input[type="date"], input[type="number"], select, textarea {
  font: inherit;
  color: var(--text);
  padding: .5rem .65rem;
  border: 2px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

input[type="text"]:hover, input[type="date"]:hover, input[type="number"]:hover,
select:hover, textarea:hover {
  border-color: var(--accent);
  background: var(--surface);
}

input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input[type="checkbox"], input[type="radio"] {
  width: 1.2em;
  height: 1.2em;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

textarea { resize: vertical; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .82rem; }
.input--narrow { width: 5.5rem; }

.summary {
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: .85rem;
}
.summary p { margin: .2rem 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  font-weight: 600;
  padding: .5rem 1.05rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.btn:hover { background: var(--surface-alt); border-color: var(--accent); }
.btn:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
.btn:active { box-shadow: none; transform: translateY(1px); }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--danger { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.btn--danger:hover { background: var(--danger); color: #fff; }
.btn--ghost { background: var(--accent-soft); border-color: var(--accent-soft-strong); color: var(--accent-hover); }
.btn--ghost:hover { background: var(--accent-soft-strong); }
.btn--small { padding: .3rem .65rem; font-size: .8rem; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; }
.card {
  border: 1.5px solid var(--accent2);
  border-top: 4px solid var(--accent2);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--accent2-soft);
}
.card h3 { margin-top: 0; border-left: none; background: transparent; padding: 0; color: var(--accent2-hover); }

/* ---------------------------------------------------------------- alerts */

.alert {
  margin: .7rem 0;
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left-width: 4px;
  font-size: .85rem;
  background: var(--surface-alt);
}
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert--ok { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.alert--warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.alert--error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.progress { font-size: .85rem; color: var(--muted); margin-top: .6rem; }
.progress span {
  display: inline-block;
  width: .9rem; height: .9rem;
  margin-right: .4rem;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 900ms linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; border: 2px solid var(--border-strong); border-radius: var(--radius-md); }

.data-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.data-table caption { padding: .9rem; color: var(--muted); text-align: left; }
.data-table th, .data-table td {
  border: 1px solid var(--border);
  padding: .35rem .5rem;
  text-align: left;
  vertical-align: middle;
}
.data-table thead th {
  background: var(--accent-soft-strong);
  color: var(--accent-hover);
  font-weight: 700;
  position: sticky;
  top: 0;
}
.data-table tbody tr:nth-child(even) { background: var(--surface-alt); }

.data-table td input[type="text"] {
  border: 1px solid transparent;
  padding: .3rem .35rem;
  background: transparent;
  box-shadow: none;
}
.data-table td input[type="text"]:hover { border-color: var(--border); }
.data-table td input[type="text"]:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.row--low-confidence td { background: var(--warn-soft); }
.row--skipped { opacity: .45; text-decoration: line-through; }

/* ---------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  margin: 1rem 0;
  padding: .8rem;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent-soft-strong);
  border-radius: var(--radius-md);
}

.toolbar__sep { width: 1px; align-self: stretch; background: var(--border-strong); }

.modes {
  border: 1.5px solid var(--accent-soft-strong);
  border-radius: var(--radius-md);
  padding: .3rem .7rem .5rem;
  margin: 0;
  background: var(--surface);
}
.modes legend { font-size: .75rem; font-weight: 700; color: var(--accent-hover); padding: 0 .3rem; }
.modes label { margin-right: .8rem; font-size: .85rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }

.role-picker { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.role-picker select { width: auto; }

.stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; }
.chip {
  background: var(--surface);
  border: 1.5px solid var(--accent2);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .8rem;
  color: var(--accent2-hover);
}
.chip strong { color: var(--text); }

/* ---------------------------------------------------------------- seat map */

.seatmap-wrap { overflow: auto; padding: .6rem 0; }

.seatmap {
  display: grid;
  grid-template-areas:
    ".    top    ."
    "left grid   right"
    ".    bottom .";
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .4rem;
  align-items: center;
  justify-items: center;
}

/* 「後方」の単体テキストラベルも、「前方」帯内の文字（.seatmap__label-text）と
 * 同じフォントサイズ・太さにする。 */
.seatmap__label { font-size: 1rem; color: var(--muted); white-space: nowrap; letter-spacing: .05em; font-weight: 800; }
.seatmap__label--top { grid-area: top; }
.seatmap__label--bottom { grid-area: bottom; }
.seatmap__label--left { grid-area: left; writing-mode: vertical-rl; }
.seatmap__label--right { grid-area: right; writing-mode: vertical-rl; }

/* 前方の帯（運転席・出入口マーカーを含む）は座席グリッドの幅／高さいっぱいに広げ、
 * 実際の座席の並びに合わせて両端にマーカーを寄せる。 */
.seatmap__label--top.seatmap__label--front,
.seatmap__label--bottom.seatmap__label--front {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.seatmap__label--left.seatmap__label--front,
.seatmap__label--right.seatmap__label--front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  writing-mode: horizontal-tb;
}

/* 横向き（landscape）は運転席・出入口の帯が縦長の狭い領域になるため、
 * マーカーの向きも縦積みにし、中の文字は縦書きにする
 * （left/right の前方帯は landscape 以外では発生しない）。 */
.seatmap__label--left.seatmap__label--front .seatmap__marker,
.seatmap__label--right.seatmap__label--front .seatmap__marker {
  flex-direction: column;
  padding: .5rem .4rem;
}
.seatmap__label--left.seatmap__label--front .seatmap__marker-text,
.seatmap__label--right.seatmap__label--front .seatmap__marker-text,
.seatmap__label--left.seatmap__label--front .seatmap__label-text,
.seatmap__label--right.seatmap__label--front .seatmap__label-text {
  writing-mode: vertical-rl;
}

.seatmap__label-text { font-size: 1rem; color: var(--muted); font-weight: 800; }

/* 運転席・出入口マーカー。色だけに頼らずアイコン＋太字で判別できるようにし、
 * できる限り大きく表示する。 */
.seatmap__marker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.3rem;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  border: 2px solid transparent;
}
.seatmap__marker--driver { background: var(--accent); }
.seatmap__marker--door { background: var(--accent2); }

.seatmap__marker-icon { width: 1.6em; height: 1.6em; flex: none; }
.seatmap__marker-text { line-height: 1; }

.seatmap__grid {
  grid-area: grid;
  display: grid;
  gap: 4px;
  width: 100%;
  background: var(--surface-sunken);
  border: 2px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px;
}

/* 通路（col 3）は狭くする。最後尾中央・補助席・ガイド席のみが入る。 */
.seatmap__grid--portrait { grid-template-columns: 1fr 1fr .6fr 1fr 1fr; }
.seatmap__grid--landscape { grid-template-rows: 1fr 1fr .6fr 1fr 1fr; }

/* 行数・列数は動的なので、あらかじめクラスを用意しておく（インラインスタイル禁止のため）。 */
.rows-1  { grid-template-rows: repeat(1,  minmax(64px, 1fr)); }
.rows-2  { grid-template-rows: repeat(2,  minmax(64px, 1fr)); }
.rows-3  { grid-template-rows: repeat(3,  minmax(64px, 1fr)); }
.rows-4  { grid-template-rows: repeat(4,  minmax(64px, 1fr)); }
.rows-5  { grid-template-rows: repeat(5,  minmax(64px, 1fr)); }
.rows-6  { grid-template-rows: repeat(6,  minmax(64px, 1fr)); }
.rows-7  { grid-template-rows: repeat(7,  minmax(64px, 1fr)); }
.rows-8  { grid-template-rows: repeat(8,  minmax(64px, 1fr)); }
.rows-9  { grid-template-rows: repeat(9,  minmax(64px, 1fr)); }
.rows-10 { grid-template-rows: repeat(10, minmax(64px, 1fr)); }
.rows-11 { grid-template-rows: repeat(11, minmax(64px, 1fr)); }
.rows-12 { grid-template-rows: repeat(12, minmax(64px, 1fr)); }
.rows-13 { grid-template-rows: repeat(13, minmax(64px, 1fr)); }
.rows-14 { grid-template-rows: repeat(14, minmax(64px, 1fr)); }
.rows-15 { grid-template-rows: repeat(15, minmax(64px, 1fr)); }
.rows-16 { grid-template-rows: repeat(16, minmax(64px, 1fr)); }
.rows-17 { grid-template-rows: repeat(17, minmax(64px, 1fr)); }
.rows-18 { grid-template-rows: repeat(18, minmax(64px, 1fr)); }
.rows-19 { grid-template-rows: repeat(19, minmax(64px, 1fr)); }
.rows-20 { grid-template-rows: repeat(20, minmax(64px, 1fr)); }
.rows-21 { grid-template-rows: repeat(21, minmax(64px, 1fr)); }

.cols-1  { grid-template-columns: repeat(1,  minmax(76px, 1fr)); }
.cols-2  { grid-template-columns: repeat(2,  minmax(76px, 1fr)); }
.cols-3  { grid-template-columns: repeat(3,  minmax(76px, 1fr)); }
.cols-4  { grid-template-columns: repeat(4,  minmax(76px, 1fr)); }
.cols-5  { grid-template-columns: repeat(5,  minmax(76px, 1fr)); }
.cols-6  { grid-template-columns: repeat(6,  minmax(76px, 1fr)); }
.cols-7  { grid-template-columns: repeat(7,  minmax(76px, 1fr)); }
.cols-8  { grid-template-columns: repeat(8,  minmax(76px, 1fr)); }
.cols-9  { grid-template-columns: repeat(9,  minmax(76px, 1fr)); }
.cols-10 { grid-template-columns: repeat(10, minmax(76px, 1fr)); }
.cols-11 { grid-template-columns: repeat(11, minmax(76px, 1fr)); }
.cols-12 { grid-template-columns: repeat(12, minmax(76px, 1fr)); }
.cols-13 { grid-template-columns: repeat(13, minmax(76px, 1fr)); }
.cols-14 { grid-template-columns: repeat(14, minmax(76px, 1fr)); }
.cols-15 { grid-template-columns: repeat(15, minmax(76px, 1fr)); }
.cols-16 { grid-template-columns: repeat(16, minmax(76px, 1fr)); }
.cols-17 { grid-template-columns: repeat(17, minmax(76px, 1fr)); }
.cols-18 { grid-template-columns: repeat(18, minmax(76px, 1fr)); }
.cols-19 { grid-template-columns: repeat(19, minmax(76px, 1fr)); }
.cols-20 { grid-template-columns: repeat(20, minmax(76px, 1fr)); }
.cols-21 { grid-template-columns: repeat(21, minmax(76px, 1fr)); }

.gr-1  { grid-row: 1; }  .gr-2  { grid-row: 2; }  .gr-3  { grid-row: 3; }
.gr-4  { grid-row: 4; }  .gr-5  { grid-row: 5; }  .gr-6  { grid-row: 6; }
.gr-7  { grid-row: 7; }  .gr-8  { grid-row: 8; }  .gr-9  { grid-row: 9; }
.gr-10 { grid-row: 10; } .gr-11 { grid-row: 11; } .gr-12 { grid-row: 12; }
.gr-13 { grid-row: 13; } .gr-14 { grid-row: 14; } .gr-15 { grid-row: 15; }
.gr-16 { grid-row: 16; } .gr-17 { grid-row: 17; } .gr-18 { grid-row: 18; }
.gr-19 { grid-row: 19; } .gr-20 { grid-row: 20; } .gr-21 { grid-row: 21; }

.gc-1  { grid-column: 1; }  .gc-2  { grid-column: 2; }  .gc-3  { grid-column: 3; }
.gc-4  { grid-column: 4; }  .gc-5  { grid-column: 5; }  .gc-6  { grid-column: 6; }
.gc-7  { grid-column: 7; }  .gc-8  { grid-column: 8; }  .gc-9  { grid-column: 9; }
.gc-10 { grid-column: 10; } .gc-11 { grid-column: 11; } .gc-12 { grid-column: 12; }
.gc-13 { grid-column: 13; } .gc-14 { grid-column: 14; } .gc-15 { grid-column: 15; }
.gc-16 { grid-column: 16; } .gc-17 { grid-column: 17; } .gc-18 { grid-column: 18; }
.gc-19 { grid-column: 19; } .gc-20 { grid-column: 20; } .gc-21 { grid-column: 21; }

/* 並び席2席を1つのセルとして結合するためのスパン指定。
 * .gr-N / .gc-N（grid-row/grid-column の shorthand）が grid-row-end/grid-column-end を
 * 暗黙に auto にしているため、後続のこのルールで span 2 を明示的に上書きする
 * （同じ詳細度の場合はソース順で後にある方が勝つ）。 */
.span-row-2 { grid-row-end: span 2; }
.span-col-2 { grid-column-end: span 2; }

/* ---------------------------------------------------------------- seat */

.seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 64px;
  padding: 6px 3px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .72rem;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

button.seat:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
button.seat:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 1px; }

.seat__no {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: .62rem;
  color: var(--muted);
  font-weight: 600;
}

/* 通路（ガイド席・補助席）の列番号は隅の小さな表記ではなく、極限まで大きく中央に出す。 */
.seat__no--aisle {
  position: static;
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent-hover);
  line-height: 1;
}

/* 通路に実座席が無い列に置く、列番号だけの専用マーカー。 */
.seatmap__rownum {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent-hover);
  background: var(--surface-alt);
  border: 1.5px dashed var(--border-strong);
  border-radius: 6px;
}

.seat__order {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: .66rem;
  color: var(--accent-hover);
  font-weight: 700;
}

/* ご年配の乗客にも読みやすいよう、氏名はできる限り大きく表示する。 */
.seat__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: .6rem;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
  word-break: break-word;
}

/* 2席結合セルは面積が2倍あるため、さらに大きく表示できる。 */
.seat--pair .seat__body { font-size: 1.3rem; }

.seat__kana { font-weight: 400; font-size: .68rem; color: var(--muted); }

.seat--empty { background: var(--surface-alt); color: #9aa4b2; border-style: dashed; }
.seat--aux { border-style: dashed; background: #f5efe0; }
.seat--guide { border-style: dashed; background: #e2edf5; }
.seat--last-row { border-bottom-width: 3px; }
.seat--held { background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(15,23,42,.07) 4px, rgba(15,23,42,.07) 8px); }
.seat--grouped { border-width: 2.5px; }
.seat.is-selected { outline: 3px solid #d9720a; outline-offset: -1px; }

/* 並び席2席の結合表示。CSS Grid のセル結合（.span-col-2/.span-row-2）で
 * 実際に2席分の面積を持つ1つのセルとして描くため、氏名等のラベルは
 * 結合後のセル全体で自然にセンタリングされる。面積が2倍あるため
 * 文字サイズも通常の座席よりさらに大きくしている（.seat--pair .seat__body）。 */

.seat--role { background: var(--surface-sunken); color: #3d4656; font-weight: 700; border-style: dashed; }
.seat--role-conductor { background: #d7e6f7; color: var(--accent-hover); border-color: var(--accent); }
.seat--role-blocked { background: #dde1e6; color: #6b7480; }
.seat--role-health { background: #f6dcdc; color: #8c2f2f; }
.seat--role-free { background: #dcf0e0; color: #2f6a34; }
.seat--role-reserve { background: #f2e7c9; color: #7a6320; }
.seat--role-staff { background: #e2dbf2; color: #4b3d80; }

/* グループ配色（10色を申込順で循環） */
.g-c0 { background: #dfebfa; border-color: #6f9bd1; }
.g-c1 { background: #fbe3db; border-color: #d98865; }
.g-c2 { background: #dcf1e0; border-color: #6bab79; }
.g-c3 { background: #faedc9; border-color: #cba13f; }
.g-c4 { background: #e9e0f6; border-color: #9a80cf; }
.g-c5 { background: #d9f0f4; border-color: #5fa9b5; }
.g-c6 { background: #f8dfec; border-color: #cf7ba5; }
.g-c7 { background: #e8edd3; border-color: #91a15a; }
.g-c8 { background: #e2e5ee; border-color: #7f8ba3; }
.g-c9 { background: #f3e2d1; border-color: #c08b58; }

/* ---------------------------------------------------------------- 印刷プレビュー */

.print-sheet {
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10mm;
  margin-top: .6rem;
}

.print-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; border-bottom: 2px solid #333; padding-bottom: .3rem; margin-bottom: .6rem; }
.print-title { margin: 0; font-size: 1.05rem; }
.print-info { font-size: .8rem; color: #333; }
.print-legend { margin-top: .5rem; font-size: .72rem; color: #444; }
.print-map { max-width: 100%; }