/* ============================================================
 * バス座席表メーカー スタイル
 * 添乗員が現場で使う前提。文字は大きめ、押しやすいボタン。
 * ============================================================ */

:root {
  --fg: #1d2429;
  --fg-muted: #5a666f;
  --bg: #f4f6f8;
  --card: #ffffff;
  --line: #d3dae0;
  --accent: #1c5f4a;
  --accent-dark: #134335;
  --warn: #8a5a00;
  --warn-bg: #fff5e0;
  --error: #b3261e;
  --error-bg: #fdecea;
  --pass-line: #1e6b3a;
  --radius: 10px;

  /* 座席マスの大きさ（中身によらず固定） */
  --seat-w: 4.6rem;
  --seat-h: 3.4rem;
  --aisle-w: 2.2rem;

  /* グループのマーカー色（手書きの蛍光ペン運用の再現。6色） */
  --c0-bg: #fff2b8; --c0-line: #c79a00; --c0-stripe: #ffdf6e;
  --c1-bg: #d9ecff; --c1-line: #2f6fb0; --c1-stripe: #a9d2f7;
  --c2-bg: #ffe0e6; --c2-line: #c04a63; --c2-stripe: #ffbccb;
  --c3-bg: #ddf5dd; --c3-line: #3d8b3d; --c3-stripe: #b0e6b0;
  --c4-bg: #ece0ff; --c4-line: #7a53b8; --c4-stripe: #d2bcfa;
  --c5-bg: #ffe6cc; --c5-line: #c1701a; --c5-stripe: #ffc994;
  --c6-bg: #d5f2ee; --c6-line: #1a7f72; --c6-stripe: #a3e3d9;
  --c7-bg: #ecdfd2; --c7-line: #8a5a3b; --c7-stripe: #d8bfa5;
  --c8-bg: #e8efc4; --c8-line: #6b7a1f; --c8-stripe: #d2e08c;
  --c9-bg: #f7dcf2; --c9-line: #a13a92; --c9-stripe: #eebbe3;
}

* { box-sizing: border-box; }
html { font-size: 17px; }

body {
  margin: 0;
  padding: 0 0 5rem;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.75;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--accent); color: #fff; padding: 1.1rem 0; }
.header-inner {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.site-header h1 { margin: 0; font-size: 1.55rem; letter-spacing: .02em; }
.tagline { margin: .2rem 0 0; font-size: .95rem; opacity: .9; }
.site-nav a {
  color: #fff; background: rgba(255,255,255,.16);
  padding: .55rem 1.1rem; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: .98rem;
  border: 1px solid rgba(255,255,255,.4); margin-left: .4rem;
}
.site-nav a:hover { background: rgba(255,255,255,.3); }

.notice-bar { margin-top: 1rem; }
.notice-bar p {
  margin: 0; background: #e4f1ec; border: 1px solid #b6d7cb;
  border-left: 6px solid var(--accent);
  padding: .85rem 1.1rem; border-radius: var(--radius); font-size: .97rem;
}

/* ---------- レイアウト ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem; align-items: start; margin-top: 1.25rem;
}
@media (max-width: 1040px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.3rem; margin-bottom: 1.2rem;
}
.card > h2 {
  margin: 0 0 .8rem; font-size: 1.18rem;
  border-bottom: 2px solid var(--accent); padding-bottom: .4rem;
}
.card > h3 { font-size: 1.03rem; margin: 1.3rem 0 .5rem; }

/* ---------- フォーム ---------- */
label { font-weight: 700; font-size: .95rem; }
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: inherit; max-width: 100%;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: 2px solid var(--accent); }

.field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem 1rem;
}
.field { display: flex; flex-direction: column; gap: .25rem; }
.field .help { font-weight: 400; }

.help { font-size: .88rem; color: var(--fg-muted); }
/* 同じ名字のお客様がいるときの案内。下のお名前の欄のすぐ上に出す */
.help.is-warn {
  color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--warn); border-radius: 8px;
  padding: .5rem .7rem; margin: 0;
}
.help.is-warn p { margin: 0; }
/* 同じ名字の相手の組へ飛ぶボタン */
.same-surname-links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem; margin-top: .5rem !important;
}
/* マニュアルの「理想のかたち」の小さな座席図。
   文字（■）で描くとフォント差で崩れるため、四角そのものを並べる */
.mini-bus { display: inline-flex; flex-direction: column; gap: 3px; vertical-align: middle; }
.mini-row { display: flex; gap: 3px; }
.mini-seat {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--card);
}
.mini-seat.is-on { border-color: var(--accent); background: var(--accent); }
.mini-aisle { width: 9px; }

/* 飛んだ先を、少しのあいだ光らせて分かるようにする */
.group-item.is-highlight {
  outline: 3px solid var(--warn); outline-offset: 2px;
  transition: outline-color .4s;
}

.btn {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: .55rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--fg);
}
.btn:hover { background: #eef2f4; }
.btn-primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-mini { padding: .25rem .6rem; font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
/* 削除は、押し間違えないよう控えめな見た目に（文字で「削除」と明示） */
.btn-delete { color: var(--error); border-color: #e0bdb9; background: #fff; }
.btn-delete:hover { background: var(--error-bg); }
.inline-btn { display: inline-block; text-decoration: none; }

.toggle-line {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .5rem 0; font-weight: 700;
}
.toggle-line input { margin-top: .45rem; }

/* ---------- グループ一覧 ---------- */
.group-list { list-style: none; margin: 0; padding: 0; }
.group-item {
  border: 1px solid var(--line); border-left: 8px solid var(--line);
  border-radius: 8px; padding: .7rem .85rem; margin-bottom: .7rem; background: #fcfdfd;
}
.group-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.group-no { font-weight: 700; font-size: 1.02rem; }
.group-head .spacer { flex: 1; }
.group-body { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; align-items: flex-end; }
.group-body .field { min-width: 7rem; }
.members { display: flex; flex-wrap: wrap; gap: .35rem; }
.member-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem;
  background: #fff; font-size: .86rem;
}
.member-chip select { border: none; padding: .1rem; font-size: .86rem; }

.color-0 { border-left-color: var(--c0-line); }
.color-1 { border-left-color: var(--c1-line); }
.color-2 { border-left-color: var(--c2-line); }
.color-3 { border-left-color: var(--c3-line); }
.color-4 { border-left-color: var(--c4-line); }
.color-5 { border-left-color: var(--c5-line); }
.color-6 { border-left-color: var(--c6-line); }
.color-7 { border-left-color: var(--c7-line); }
.color-8 { border-left-color: var(--c8-line); }
.color-9 { border-left-color: var(--c9-line); }

/* ---------- 注意メッセージ ---------- */
.callout {
  border: 1px solid var(--line); border-left: 6px solid var(--accent);
  background: #eef4f2; padding: .75rem 1rem; border-radius: var(--radius); margin: .8rem 0;
}
.callout-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.callout-error { border-left-color: var(--error); background: var(--error-bg); }
.msg-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.msg-list li {
  padding: .5rem .8rem; border-radius: 8px; margin-bottom: .4rem; font-size: .95rem;
  background: var(--warn-bg); border: 1px solid #e5cf9a;
}
.msg-list li.is-error { background: var(--error-bg); border-color: #eec2be; }

/* ---------- 座席表 ---------- */
.sheet {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem;
  overflow-x: auto; /* 画面が狭いときは座席表だけ横スクロール（マスは縮めない） */
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--fg); padding-bottom: .4rem;
}
.sheet-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.sheet-meta { font-size: .95rem; color: var(--fg-muted); }

.front-mark {
  text-align: center; font-weight: 700; letter-spacing: .3em;
  background: #eceff1; border: 1px solid var(--line); border-radius: 6px;
  padding: .2rem; margin: .8rem 0 .5rem; font-size: .9rem;
}
.rear-mark {
  text-align: center; font-size: .85rem; color: var(--fg-muted); margin-top: .4rem;
}

/* 5本の縦すじ（左2席・通路・右2席）のマス目。最後部列の中央席は通路のすじを使います。
   マスの大きさは中身に関係なく固定です（名前が長くても座席表が伸び縮みしません） */
.bus {
  display: grid;
  grid-template-columns: var(--seat-w) var(--seat-w) var(--aisle-w) var(--seat-w) var(--seat-w);
  grid-auto-rows: var(--seat-h);
  gap: .34rem;
  justify-content: center;
  align-content: start;
}
.row-no {
  position: absolute; left: .18rem; top: .05rem; font-size: .62rem; color: #8a969e;
}

.seat {
  position: relative; border: 1px solid var(--line); border-radius: 5px;
  background: #fff; padding: .8rem .2rem .2rem;
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  text-align: center; font-size: .78rem; line-height: 1.2;
  cursor: pointer; overflow: hidden;
}
.seat:hover { outline: 2px solid var(--accent); z-index: 4; }
.seat.is-crew {
  background: #e3e7ea; color: #6b767d; cursor: default; border-style: dashed;
}
.seat.is-crew:hover { outline: none; }
.seat.is-empty { color: #aab4ba; }
.seat.is-selected { outline: 3px solid var(--error); z-index: 4; }
.seat .seat-label { font-weight: 700; display: block; }
/* 男女の印は席の右下すみに固定。ブロックのラベル（中央）と重ならないようにする */
.seat .seat-mark {
  position: absolute; right: .18rem; bottom: .06rem;
  font-size: .78rem; font-weight: 700; line-height: 1.1;
  padding: 0 .16rem; border-radius: 3px;
  background: rgba(255, 255, 255, .75);
}
.seat.is-empty .seat-mark { background: none; color: #aab4ba; font-weight: 400; }
.seat.is-crew .seat-mark { display: none; }

.seat.g0 { background-color: var(--c0-bg); border-color: var(--c0-line); --stripe: var(--c0-stripe); }
.seat.g1 { background-color: var(--c1-bg); border-color: var(--c1-line); --stripe: var(--c1-stripe); }
.seat.g2 { background-color: var(--c2-bg); border-color: var(--c2-line); --stripe: var(--c2-stripe); }
.seat.g3 { background-color: var(--c3-bg); border-color: var(--c3-line); --stripe: var(--c3-stripe); }
.seat.g4 { background-color: var(--c4-bg); border-color: var(--c4-line); --stripe: var(--c4-stripe); }
.seat.g5 { background-color: var(--c5-bg); border-color: var(--c5-line); --stripe: var(--c5-stripe); }
.seat.g6 { background-color: var(--c6-bg); border-color: var(--c6-line); --stripe: var(--c6-stripe); }
.seat.g7 { background-color: var(--c7-bg); border-color: var(--c7-line); --stripe: var(--c7-stripe); }
.seat.g8 { background-color: var(--c8-bg); border-color: var(--c8-line); --stripe: var(--c8-stripe); }
.seat.g9 { background-color: var(--c9-bg); border-color: var(--c9-line); --stripe: var(--c9-stripe); }

/* 前席オプション（有料）のグループは斜めストライプ。色はそのままなので組の見分けは変わりません */
.seat.is-front-opt,
.legend .is-front-opt {
  background-image: repeating-linear-gradient(
    45deg,
    var(--stripe) 0, var(--stripe) 4px,
    rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 9px
  );
}

/* グループを囲む枠。形の外周を「辺の線」でなぞるので、四角でもL字でも囲めます */
.blk {
  position: relative; pointer-events: none; z-index: 3;
  margin: -.19rem; border: 0 solid var(--line); border-radius: 2px;
}
.blk.bt { border-top-width: 3px; }
.blk.br { border-right-width: 3px; }
.blk.bb { border-bottom-width: 3px; }
.blk.bl { border-left-width: 3px; }

.blk.c0 { border-color: var(--c0-line); }
.blk.c1 { border-color: var(--c1-line); }
.blk.c2 { border-color: var(--c2-line); }
.blk.c3 { border-color: var(--c3-line); }
.blk.c4 { border-color: var(--c4-line); }
.blk.c5 { border-color: var(--c5-line); }
.blk.c6 { border-color: var(--c6-line); }
.blk.c7 { border-color: var(--c7-line); }
.blk.c8 { border-color: var(--c8-line); }
.blk.c9 { border-color: var(--c9-line); }

/* 席が2か所以上に分かれてしまったグループ（いちばん重い問題）は赤い太枠で強調 */
.blk.is-split { border-color: var(--error) !important; z-index: 6; }
.blk.is-split.bt { border-top-width: 5px; }
.blk.is-split.br { border-right-width: 5px; }
.blk.is-split.bb { border-bottom-width: 5px; }
.blk.is-split.bl { border-left-width: 5px; }
.blk-label-wrap.is-split { z-index: 7; }
.block-label.is-split {
  background: var(--error-bg); color: var(--error);
  box-shadow: 0 0 0 2px var(--error); white-space: normal;
}
.block-split-mark { display: block; font-size: .68rem; line-height: 1.2; font-weight: 700; }

/* ラベルは中央だが、席の右下すみ（男女の印）の帯を避けて少し上に寄せる */
.blk-label-wrap {
  position: relative; pointer-events: none; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 1.15rem;
  min-width: 0; overflow: hidden; /* 長い名前でもマスを押し広げない */
}
.block-label {
  background: rgba(255, 255, 255, .72);
  border-radius: 6px; padding: 0 .3rem;
  font-weight: 700; font-size: .86rem; line-height: 1.25;
  text-align: center; max-width: 98%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.block-name { display: inline; }
.block-count { display: inline; margin-left: .15rem; font-size: .95rem; }

/* 1席ぶんしか幅がないブロック（おひとり様など）は、文字が欠けないように整える。
   ① 縮小 → ② 1名なら人数表記を省く → ③ 折り返し → ④ それでも入らなければ末尾を省略 */
.blk-label-wrap.is-narrow { padding-bottom: 1rem; }
.block-label.is-narrow {
  font-size: .66rem; line-height: 1.12; padding: 0 .1rem;
  white-space: normal; word-break: break-all; max-width: 100%;
  overflow: visible; text-overflow: clip;
}
.block-label.is-narrow.is-long { font-size: .58rem; } /* 長い名字・フルネーム用 */
.block-label.is-narrow .block-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; word-break: break-all;
}
.block-label.is-narrow.has-count .block-name { -webkit-line-clamp: 2; }
.block-label.is-narrow .block-count { display: block; margin-left: 0; font-size: .68rem; }

.blk-free {
  position: relative; pointer-events: none; z-index: 3;
  margin: -.19rem; border: 3px dashed #7b878e; border-radius: 9px; color: #4e585e;
  display: flex; align-items: center; justify-content: center;
}
.blk-free .block-label { font-size: 1rem; letter-spacing: .2em; }

/* 別グループの男女がとなり合っている席（分割の赤とは別に、オレンジで知らせる） */
.seat.is-mixed {
  box-shadow: inset 0 0 0 3px var(--warn);
  border-color: var(--warn);
  border-style: dashed;
}
.seat .seat-warn {
  position: absolute; left: .1rem; bottom: .06rem;
  font-size: .6rem; font-weight: 700; line-height: 1.1;
  padding: 0 .16rem; border-radius: 3px;
  background: var(--warn); color: #fff;
}

.mode-row { margin: 0 0 .3rem; }

/* 手で直したあとの見直し（その日の座席表のすぐ下に出します。印刷には出しません） */
.manual-check {
  margin: -.6rem 0 1.2rem; padding: .7rem .9rem;
  border: 1px solid #e5cf9a; border-left: 6px solid var(--warn);
  border-radius: var(--radius); background: var(--warn-bg);
}
.manual-check-head { margin: 0; font-weight: 700; font-size: .95rem; }
.manual-check .msg-list { margin-top: .45rem; }

/* 問題がなかったときは緑の枠 */
.manual-check.is-ok {
  border-color: #b9ddc7; border-left-color: var(--pass-line); background: #eef7f1;
}
.manual-check.is-ok .manual-check-head { color: var(--pass-line); }
.manual-check .msg-list li.is-preexisting {
  background: #f1f4f6; border-color: var(--line); color: var(--fg-muted);
}
.flash {
  margin: .6rem 0 0; padding: .5rem .8rem; border-radius: 8px;
  background: #eef4f2; border: 1px solid var(--accent); font-size: .93rem;
}

.legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; font-size: .8rem; }
.legend span {
  border: 1px solid var(--line); border-radius: 6px; padding: .1rem .5rem;
}
.legend .lg0 { background-color: var(--c0-bg); border-color: var(--c0-line); --stripe: var(--c0-stripe); }
.legend .lg1 { background-color: var(--c1-bg); border-color: var(--c1-line); --stripe: var(--c1-stripe); }
.legend .lg2 { background-color: var(--c2-bg); border-color: var(--c2-line); --stripe: var(--c2-stripe); }
.legend .lg3 { background-color: var(--c3-bg); border-color: var(--c3-line); --stripe: var(--c3-stripe); }
.legend .lg4 { background-color: var(--c4-bg); border-color: var(--c4-line); --stripe: var(--c4-stripe); }
.legend .lg5 { background-color: var(--c5-bg); border-color: var(--c5-line); --stripe: var(--c5-stripe); }
.legend .lg6 { background-color: var(--c6-bg); border-color: var(--c6-line); --stripe: var(--c6-stripe); }
.legend .lg7 { background-color: var(--c7-bg); border-color: var(--c7-line); --stripe: var(--c7-stripe); }
.legend .lg8 { background-color: var(--c8-bg); border-color: var(--c8-line); --stripe: var(--c8-stripe); }
.legend .lg9 { background-color: var(--c9-bg); border-color: var(--c9-line); --stripe: var(--c9-stripe); }
.legend .lg-plain { background-color: #fff; --stripe: #c9d2d8; font-weight: 700; }

.swap-hint {
  font-size: .9rem; background: #eef4f2; border: 1px dashed var(--accent);
  border-radius: 8px; padding: .5rem .8rem; margin: .6rem 0;
}

/* ---------- マニュアル ---------- */
.manual { margin-top: 1.25rem; }
.manual h2 { font-size: 1.25rem; }
.manual .toc ol { margin: 0; padding-left: 1.4rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; }
.panel h3 { margin-top: 0; }
.panel-ok { background: #eef7f1; border-color: #b9ddc7; }
.panel-ng { background: #fbf0ee; border-color: #e8c6c0; }
.manual-table { width: 100%; border-collapse: collapse; margin: .7rem 0; font-size: .93rem; }
.manual-table th, .manual-table td {
  border: 1px solid var(--line); padding: .5rem .65rem; text-align: left; vertical-align: top;
}
.manual-table th { background: #eef2f4; }
.def dt { font-weight: 700; margin-top: .8rem; }
.def dd { margin: .15rem 0 0 1.2rem; }
.steps > li { margin-bottom: 1.2rem; }
.steps h3 { margin: .2rem 0 .3rem; }
.howto { border: 1px solid var(--line); border-radius: 8px; padding: .3rem 1rem 1rem; background: #fbfcfd; }
.howto h4 { margin-bottom: .3rem; }

code, .code {
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: .92em; background: #eef2f4; padding: .1em .35em; border-radius: 4px;
}
kbd {
  font-family: inherit; font-size: .85em; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: .05em .4em; background: #fff;
}

.prompt-block { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: .8rem 0; }
.prompt-head {
  display: flex; justify-content: space-between; align-items: center;
  background: #eef2f4; padding: .45rem .8rem; gap: .8rem;
}
.prompt-title { font-weight: 700; font-size: .95rem; }
pre.code {
  margin: 0; padding: .9rem 1rem; background: #fbfcfd; white-space: pre-wrap;
  word-break: break-word; font-size: .88rem; line-height: 1.6; border-radius: 0;
}

/* ---------- フッター ---------- */
.site-footer { margin-top: 2rem; border-top: 1px solid var(--line); padding: 1.2rem 0; background: #fff; }
.site-footer .disclaimer { margin: 0 0 .4rem; font-weight: 700; }
.footer-meta { margin: 0; font-size: .9rem; color: var(--fg-muted); }