/* Hallmark · genre: modern-minimal (utilitarian) · macrostructure: Timetable (app) · design-system: design.md · designed-as-app
 * theme: custom · vibe: "砂浜の紙・海の青緑・船の時刻表" · paper oklch(96.2% 0.01 85) · accent oklch(49% 0.065 200)
 * display + body: BIZ UDPGothic · figures: BIZ UDGothic
 * REDUX 受付（試作）。色と字は :root の変数だけで決める。決まりは design.md（店員画面とお客さん画面の 2 層）
 * 字の色は屋内で 7:1 以上（日差しで 2〜3:1 に縮むため）。部品の枠は 3:1 以上。node test/design.check.mjs が確かめる */
:root {
  --bg: oklch(96.2% 0.010 85);
  --surface: oklch(99.4% 0.004 85);
  --ink: oklch(29% 0.020 190);
  --muted: oklch(42% 0.016 185);
  --line: oklch(88.5% 0.014 85);       /* 区切り線（飾り。薄いままでよい） */
  --line-2: oklch(80% 0.014 85);
  --control: oklch(56% 0.014 200);     /* 入力欄・副ボタン・選択肢・チップの枠（3:1 以上） */
  --disabled-bg: oklch(91% 0.006 85);  /* 押せない物。薄くせず、不透明な色で */
  --disabled-ink: oklch(46% 0.012 185);
  --accent: oklch(41.5% 0.065 200);
  --accent-ink: oklch(99% 0.004 85);
  --accent-soft: oklch(94% 0.022 200);
  /* お店向けの案内（shops.html）の数字の帯だけ。深い海の地に明るい字（7:1 以上、test/design.check.mjs）。決定ログ 2026-11-01 shop-lp-look */
  --deep-bg: oklch(30% 0.055 210);
  --deep-ink: oklch(99% 0.004 85);
  --deep-num: oklch(90% 0.035 195);
  --deep-line: oklch(45% 0.050 205);
  --you-bg: oklch(41.5% 0.065 200);
  --you-ink: oklch(99% 0.004 85);
  --warn: oklch(43% 0.110 55);
  --warn-bg: oklch(95.5% 0.028 70);
  --warn-line: oklch(83% 0.070 70);
  --ok: oklch(41.5% 0.075 155);
  --ok-bg: oklch(95% 0.022 155);
  --info: oklch(42% 0.060 245);
  --info-bg: oklch(95.5% 0.012 245);
  /* 見本の帯（js/demo-band.js）。字と地を入れ替えた帯にして、ほかのどの部品とも見間違えないようにする。7:1 以上（test/design.check.mjs） */
  --demo-bg: oklch(29% 0.020 190);
  --demo-ink: oklch(96.2% 0.010 85);
  --qr-bg: oklch(100% 0 0); /* QR は白地でないと読めない。暗い画面設定でも白のまま */
  /* 条例の名簿は紙の色のまま（暗い画面設定でも白地に黒。印刷と同じ見た目） */
  --paper-bg: oklch(100% 0 0);
  --paper-ink: oklch(18% 0 0);
  --paper-rule: oklch(45% 0 0);
  --paper-head: oklch(93% 0 0);
  --paper-faint: oklch(55% 0 0);   /* 空の欄の「—」。紙だが画面にも出すので 4.5:1 */

  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-figure: "BIZ UDGothic", "BIZ UDPGothic", ui-monospace, "Menlo", monospace;
  --radius: 6px;
  --logo-mark: url("../assets/logo-mark.png");
  --inset: 0px;                        /* 面の内側の余白。面を積まない形なので 0（design.md の形） */
  --dur: 160ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
/* 暗い画面設定に合わせるのはお客さん画面だけ。店員画面（お店・予約と名簿）は浜と船で使うので明るいまま（js/app.js が data-layer を付ける） */
@media (prefers-color-scheme: dark) {
  :root:not([data-layer="staff"]) {
    --logo-mark: url("../assets/logo-mark-light.png");
    --bg: oklch(21% 0.006 200); --surface: oklch(25% 0.008 200); --ink: oklch(93% 0.008 85); --muted: oklch(73% 0.010 150);
    --line: oklch(34% 0.010 200); --line-2: oklch(42% 0.010 200);
    --control: oklch(55% 0.012 200); --disabled-bg: oklch(32% 0.008 200); --disabled-ink: oklch(72% 0.010 150);
    --accent: oklch(75% 0.050 190); --accent-ink: oklch(21% 0.020 190); --accent-soft: oklch(30% 0.020 200);
    --you-bg: oklch(50% 0.050 190); --you-ink: oklch(99% 0 0);
    --demo-bg: oklch(93% 0.008 85); --demo-ink: oklch(21% 0.006 200);
    --warn: oklch(83% 0.080 70); --warn-bg: oklch(29% 0.030 70); --warn-line: oklch(48% 0.060 70);
    --ok: oklch(83% 0.060 155); --ok-bg: oklch(28% 0.025 155); --info: oklch(81% 0.040 245); --info-bg: oklch(27% 0.020 245);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* scroll-padding: 上の帯と下の操作の帯の下にフォーカスが隠れないように（2.4.11）。値は帯の高さ */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 96px; scroll-padding-bottom: 120px; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 16px/1.7 var(--font-body); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- 上の帯: 名前の行と、字のタブの行 ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 8px 16px 0; background: var(--bg); border-bottom: 2px solid var(--ink);
}
/* タブの行が無い帯（お客さんの画面・案内のページ）は、名前が下の線に付かないよう下にも余白を取る */
.bar:not(:has(.tabs)) { padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
/* 案内役の絵は全身のまま小さく（丸く切らない）。店員の画面には出さない（REDUX の文字だけ） */
/* REDUX のロゴの印（コンパスと波。reduxdive.com のロゴ logo-redux.png の左側を切り出した物）。お客さんの画面も店員の画面も同じ物を出す。
   暗い画面設定のお客さんの画面だけ、コンパスの線が白い版に替える（変数 --logo-mark）。案内役の絵はここに出さない（決定ログ 2026-10-29 header-logo） */
.brand__logo { display: block; width: 32px; height: 32px; flex: none; background: var(--logo-mark) center / contain no-repeat; }
.brand__name { letter-spacing: 0.04em; white-space: nowrap; }
.brand__name small { font-weight: 400; color: var(--muted); margin-left: 6px; letter-spacing: 0; font-size: 14px; }
.bar__end { grid-row: 1; grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 12px; }
.lang { border: 0; background: none; padding: 4px 0; cursor: pointer; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
/* デモの画面の切り替え。点線の小さい札 1 つ。開くと 4 つの画面のタブとデモの注意が出る（design.md の形） */
.demo-switch { border: 1px dashed var(--line-2); background: none; border-radius: var(--radius); padding: 2px 8px; min-height: 32px; cursor: pointer; font-size: 14px; color: var(--muted); white-space: nowrap; }
.demo-switch[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
html[data-layer="guest"] .bar:not(.is-open) .tabs { display: none; }
html[data-layer="guest"] .bar:not(.is-open) { padding-bottom: 8px; }
html[data-layer="staff"] .bar:not(.is-open) #tab-guest, html[data-layer="staff"] .bar:not(.is-open) #tab-pass { display: none; }
.tabs { grid-column: 1 / -1; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin-top: 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; border-bottom: 3px solid transparent; background: none; padding: 6px 0 9px; cursor: pointer; font-size: 14px; color: var(--muted); white-space: nowrap; transition: color var(--dur) var(--ease-out); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
@media (min-width: 900px) {
  .bar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 28px; padding-top: 0; }
  .tabs { grid-column: 2; grid-row: 1; margin-top: 0; padding-top: 12px; }
  .bar__end { grid-column: 3; }
}
.demo-note { display: none; max-width: 1040px; margin: 12px auto 0; padding: 0 16px; font-size: 14px; color: var(--muted); }
.bar.is-open ~ .demo-note, html[data-ai="real"][data-layer="staff"] .demo-note { display: block; }

/* ---------- 並べ方 ---------- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 12px 16px 48px; }
/* お客さんの画面は 1 本の流れ（ツアー → よく聞かれること → 入力）。大きな画面でも左に寄せた 1 列 */
.view--guest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
.view--guest > *, .card { min-width: 0; }
.view--guest[hidden], .view[hidden] { display: none; }
.card { margin-bottom: 28px; }   /* 白い面は使わない。紙の上に直接並べ、区切りは罫線と余白（design.md の形） */
.view--guest .card { margin-bottom: 0; }
.h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.4; font-weight: 700; }
.h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.lead { margin: 0 0 14px; color: var(--muted); }
.note { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }

/* ---------- ボタンと入力 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; transition: background-color var(--dur) var(--ease-out); }
.btn:hover { background: color-mix(in oklch, var(--accent) 88%, var(--ink)); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--control); }
.btn--ghost:hover { background: var(--bg); }
.btn--big { width: 100%; min-height: 48px; font-size: 16px; margin-top: 8px; }
.btn--small { min-height: 44px; padding: 0 12px; font-size: 14px; }
/* 押せない物は薄くしない（日差しで消える）。不透明な灰の面と字にして、押せない理由は近くの文で言う */
.btn:disabled, .btn:disabled:hover { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-ink); cursor: default; }
.btn[aria-pressed="true"] { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px; }
.linkbtn { border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-align: left; }
.linkbtn--muted { color: var(--muted); font-weight: 400; }
.linkbtn:disabled { color: var(--disabled-ink); text-decoration: none; cursor: default; }
.input { width: 100%; min-height: 48px; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--control); background: var(--surface); }
.view--desk .input { min-height: 56px; }   /* 店員画面の入力欄は 56px（揺れる船の上で押しやすく） */
.input--short { max-width: 140px; }
.input:disabled { background: var(--disabled-bg); color: var(--disabled-ink); border-color: var(--line-2); }

/* ---------- チャット ---------- */
.chat__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.chat__log { display: flex; flex-direction: column; gap: 8px; max-height: 360px; min-height: 140px; overflow-y: auto; padding: 4px 2px 8px; }
.msg { margin: 0; max-width: 90%; padding: 8px 12px; border-radius: 12px; word-break: break-word; }
.msg--you { align-self: flex-end; background: var(--you-bg); color: var(--you-ink); border-top-right-radius: 3px; }
.answer { align-self: flex-start; max-width: 94%; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); }
.answer__tag { display: block; font-size: 14px; font-weight: 700; color: var(--ok); }
.answer__text { margin: 4px 0 0; }
.chat__log .btn { align-self: flex-start; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; scrollbar-width: thin; }
.chip { flex: none; border: 1px solid var(--control); background: var(--surface); padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font-size: 14px; white-space: nowrap; }
.chip:hover { border-color: var(--accent); }
.chip--ghost { border-style: dashed; color: var(--muted); }
.chat__form { display: flex; gap: 8px; }
.chat__form .input { flex: 1; min-width: 0; }
.chat__form .btn { flex: none; }
.answer__wrong { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.answer__wrong:disabled { color: var(--disabled-ink); text-decoration: none; cursor: default; }
.maybe { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- よく聞かれること（design.md の部品） ---------- */
.page__h1 { margin: 18px 0 0; font-size: 26px; line-height: 1.3; font-weight: 700; }
.guest-sec { margin-top: 28px; }
.guest-sec > .h2 { margin-bottom: 8px; }
.faq { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__more { margin-top: 16px; }
.faq__more summary { min-height: 48px; display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.faq__more .faq { border-top: 0; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.faq__q::after { content: "＋"; color: var(--muted); font-weight: 400; flex: none; }
.faq__q[aria-expanded="true"]::after { content: "－"; }
.faq__a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 0 10px; }
.faq__a p { margin: 0; }
.faq__a small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
/* 案内役の大きさ（決定ログ 2026-10-29 chara-size）。表情が見分けられる大きさにし、幅 320px でも文字の列を細くしすぎないよう画面の幅で縮める。
   絵は 256px なので、2 倍の画面でも 112px までは粗くならない */
:root { --chara-hello: clamp(88px, 28vw, 112px); --chara-face: clamp(48px, 16vw, 60px); }
/* 見出しの横の案内役（あいさつ）は全身のまま大きめに、下の線に立たせる */
.faq__head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
/* 横が狭いので、見出しは語の途中で折らない（読点などで折り、行の長さをそろえる。auto-phrase が効かない所は keep-all） */
.faq__head .h2 { margin: 0 0 6px; text-wrap: balance; word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; }
.faq__chara { flex: none; width: var(--chara-hello); height: auto; }
.faq__mark { width: 30px; height: auto; }
/* やりとりの答えの横は表情が分かる大きさ。質問の一覧を開いた中の答えは小さいまま */
.faq__log .faq__a { grid-template-columns: var(--chara-face) minmax(0, 1fr); gap: 10px; }
.faq__log .faq__mark { width: var(--chara-face); }
/* 元の絵（assets/chara.png）は左を向いているので、左右を返して文字の方を向かせる（決定ログ 2026-10-29 chara-facing）。
   場面ごとの表情の 5 枚（assets/chara-*.png）は、もとから右を向いているので返さない（決定ログ 2026-10-29 chara-faces） */
.faq__chara[src$="/chara.png"], .faq__mark[src$="/chara.png"], .gsteps__chara[src$="/chara.png"] { transform: scaleX(-1); }
/* 表情が替わる瞬間だけ、軽いフェード（R.setFace）。「動きを減らす」設定では切り替えだけ */
.face-in { animation: face-in 0.2s ease-out; }
@keyframes face-in { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .face-in { animation: none; } }
.faq__ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.faq__ask .btn { min-width: 72px; }
.faq__log { display: grid; gap: 4px; margin-top: 10px; }
.faq__asked { margin: 6px 0 0; font-weight: 700; }
.faq__note { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
/* AI がいま何をしているかの行（js/guest-steps.js）。進み中は ● が点滅、終われば ✓。design.md の「動き」の例外 */
.gsteps { display: grid; grid-template-columns: var(--chara-face) minmax(0, 1fr); gap: 10px; align-items: start; margin: 10px 0 6px; }
.gsteps__chara { width: var(--chara-face); height: auto; }
.gsteps__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.gsteps__list li { position: relative; padding-left: 24px; line-height: 1.6; color: var(--muted); animation: step-in 0.25s ease-out; }
.gsteps__list li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; }
.gsteps__doing { color: var(--ink) !important; font-weight: 700; }
.gsteps__doing::before { content: "●"; color: var(--accent); animation: step-blink 0.9s ease-in-out infinite; }
.gsteps__done::before { content: "✓"; color: var(--ok); font-weight: 700; }
.gsteps__done.gsteps__field { color: var(--ink); }
.gsteps__note { color: var(--accent) !important; font-weight: 700; }
.gsteps__note::before { content: "→"; color: var(--accent); }
.faq__log .faq__a { animation: step-in 0.3s ease-out; }
/* AI が入れた欄を一瞬光らせる */
.is-glow { animation: step-glow 1.2s ease-out; border-radius: 6px; }
@keyframes step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes step-blink { 50% { opacity: 0.25; } }
@keyframes step-glow { 0% { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .gsteps__list li, .gsteps__doing::before, .faq__log .faq__a, .is-glow { animation: none; } }
.faq__orig summary { margin-top: 4px; min-height: 44px; display: flex; align-items: center; color: var(--accent); font-size: 14px; cursor: pointer; }
.faq__orig p { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.faq__maybe { display: grid; justify-items: start; gap: 2px; margin: 0 0 6px 38px; }

/* ---------- 予約前の確認（お客さま） ---------- */
/* まとめて書けば入る（AI）。入れた欄の見出しの後ろに印（字の色の 1 行。箱にしない） */
.bulk { margin: 4px 0 24px; }
.bulk__text { width: 100%; min-height: 112px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.bulk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.bulk__go { border-radius: 999px; padding: 0 22px; }
.ai-mark { margin-left: 8px; color: var(--accent); font-size: 14px; font-weight: 700; }
.ai-revert { margin-left: 8px; font-size: 14px; }
.form { display: grid; gap: 14px; }
.card.form { margin-top: 16px; }
.group { border: 0; padding: 0; margin: 0; min-width: 0; }
.label { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; }
.label--small { font-size: 14px; }
.row { display: grid; gap: 12px; }
@media (min-width: 560px) { .row { grid-template-columns: 1fr 1fr; } }
.row--3 { gap: 8px; grid-template-columns: 1fr; }
/* 生年月日の 3 つの欄（R.dateParts）。年は 4 桁が入る幅、月と日は 2 桁 */
.dateparts { display: flex; gap: 8px; align-items: end; }
.dateparts__part { display: block; min-width: 0; }
.dateparts__part--year { flex: 0 1 112px; }
.dateparts__part--small { flex: 0 1 72px; }
@media (min-width: 560px) { .row--3 { grid-template-columns: 2fr 1fr 2fr; } }
.field { display: block; min-width: 0; }
/* 選択肢（design.md の部品）。1 つ選ぶ物が 3 つまで = つながった切り替え。それ以外 = 罫線で区切った丸 / 四角の行。1 つずつ箱で囲まない */
.choices { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.choices--col { grid-template-columns: minmax(0, 1fr); }
.choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.choice:has(input:checked) { font-weight: 700; }
.choice:has(input:disabled) { color: var(--disabled-ink); cursor: default; }
.choices:has(> .choice > input[type="radio"]):not(:has(> .choice:nth-child(4))):not(.choices--rows) {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--control); border-radius: var(--radius); overflow: hidden;
}
.choices:has(> .choice > input[type="radio"]):not(:has(> .choice:nth-child(4))):not(.choices--rows) > .choice {
  position: relative; justify-content: center; text-align: center; padding: 8px 10px; border-bottom: 0; line-height: 1.4; background: var(--surface);
}
.choices:has(> .choice > input[type="radio"]):not(:has(> .choice:nth-child(4))):not(.choices--rows) > .choice + .choice { border-left: 1px solid var(--control); }
.choices:has(> .choice > input[type="radio"]):not(:has(> .choice:nth-child(4))):not(.choices--rows) > .choice > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices:has(> .choice > input[type="radio"]):not(:has(> .choice:nth-child(4))):not(.choices--rows) > .choice:has(input:checked) { background: var(--ink); color: var(--surface); }
.choices:has(> .choice > input[type="radio"]):not(:has(> .choice:nth-child(4))):not(.choices--rows) > .choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.choices:has(> .choice > input[type="radio"]):not(:has(> .choice:nth-child(4))):not(.choices--rows) > .choice:has(input:disabled) { background: var(--disabled-bg); color: var(--disabled-ink); }
/* このツアーのこと: 色を付けない罫線の表。時間と料金は数字の書体で */
.facts { margin: 12px 0 0; border-top: 1px solid var(--line-2); }
.facts__row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts__k { font-size: 14px; color: var(--muted); padding-top: 2px; }
.facts__v { margin: 0; }
.facts__fig { font-family: var(--font-figure); font-weight: 700; }
.facts__price { font-family: var(--font-figure); font-weight: 700; font-size: 22px; }
.consent { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 10px; cursor: pointer; }
.consent input { margin-top: 6px; flex: none; }
.hq { padding: 8px 0; border-top: 1px solid var(--line); }
.hq__q { margin: 0 0 6px; }
.errors { margin: 0; color: var(--warn); font-weight: 700; min-height: 1em; }
.errors:empty { display: none; }
.done__list { padding-left: 1.2em; }
.done__list li { margin-bottom: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

/* ---------- 受付の一覧（お店） ---------- */
/* 受付の数: 箱の 3 つ並びにしない。題の下の 1 行（design.md の部品） */
.counts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 16px; }
.count { display: inline-flex; align-items: baseline; gap: 6px; }
.count__n { font-family: var(--font-figure); font-size: 22px; font-weight: 700; line-height: 1.2; }
.count__l { font-size: 14px; color: var(--muted); }
.count--warn .count__n { color: var(--warn); }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.flag { padding: 0; font-size: 14px; font-weight: 700; margin: 0 0 8px; }   /* 知らせは色の付いた字の 1 行。箱にしない */
.flags .flag { margin: 0; }
.flag--warn { color: var(--warn); }
.flag--ok { color: var(--ok); }
.flag--info { color: var(--info); }
.qlist { margin: 0; padding-left: 1.2em; }
.qlist li { margin-bottom: 6px; }
.qlist__meta { display: block; font-size: 14px; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table th { white-space: nowrap; color: var(--muted); font-weight: 700; }
.table td:last-child { white-space: nowrap; }
.reset { text-align: left; }

/* ---------- パスポート ---------- */
.view--pass { max-width: 720px; margin: 0 auto; }
.view--desk { max-width: 760px; margin: 0 auto; }
.wrap--narrow { max-width: 640px; }
/* 実在のお店の試し版（trial.html。決定ログ 2026-10-29 trial-shops）。上の帯は消せず、お店の公式ページではないと言う（見本の帯と同じ色） */
.trial-band { margin: 0; padding: 10px 16px 8px; background: var(--demo-bg); color: var(--demo-ink); font-weight: 700; font-size: 14px; line-height: 1.5; text-align: center; }
.trial-asof { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.trial-tour { margin-top: 18px; }
.trial-tour__name { margin: 0; font-size: 16px; font-weight: 700; }
.plist { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 8px 0 12px; }
.plist dt { color: var(--muted); font-size: 14px; }
.plist dd { margin: 0; word-break: break-word; }
@media (max-width: 420px) {
  .plist { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plist dd { margin-bottom: 8px; }
}
.cert { display: grid; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 560px) { .cert { grid-template-columns: 1fr 1fr; } .cert .btn { justify-self: start; } }
.flash { margin: 0 0 12px; color: var(--ok); font-weight: 700; }   /* 保存した知らせは色の付いた字の 1 行（箱にしない） */
.passbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.passbar--col { flex-direction: column; align-items: flex-start; margin-top: 12px; }
.qr { margin-top: 12px; }
.qr:empty { display: none; }
.qr__img { width: min(260px, 100%); margin: 0 auto 8px; padding: 0; background: var(--qr-bg); border-radius: var(--radius); }
.qr__img svg { display: block; width: 100%; height: auto; }
.qr__url { font-size: 14px; word-break: break-all; color: var(--muted); }
.qr .actions { justify-content: center; }
.card--cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cta__text { margin: 0; font-weight: 700; }

/* 読み上げ機能だけに渡す文字（画面には出さない） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 予約と名簿（お店）: 時刻表 ---------- */
.page__title { margin: 4px 0 0; font-size: 26px; line-height: 1.3; font-weight: 700; }
.page__sub { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.days { display: flex; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid var(--line-2); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.day { flex: none; min-width: 56px; border: 0; border-bottom: 3px solid transparent; background: none; padding: 6px 8px 9px 0; text-align: left; cursor: pointer; color: var(--ink); }
.day small { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; }
.day b { font-family: var(--font-figure); font-size: 18px; }
.day[aria-pressed="true"] { border-bottom-color: var(--accent); }
.day:focus-visible { outline-offset: -3px; } /* 横に送る並びは上下を切るので、枠を内側に描く */
.day[aria-pressed="true"] b { color: var(--accent); }
.trip { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 20px 0 12px; border-bottom: 1px solid var(--line-2); }
.trip__time { font-family: var(--font-figure); font-size: 26px; font-weight: 700; line-height: 1; padding-top: 2px; }
.trip__time small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--muted); }
.trip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.trip__title { margin: 0; font-size: 16px; font-weight: 700; }
.trip__count { font-family: var(--font-figure); font-size: 14px; color: var(--muted); white-space: nowrap; }
.trip__count b { font-size: 20px; color: var(--ink); }
.bks { list-style: none; margin: 8px 0 0; padding: 0; }
.bk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.bk__name { font-weight: 700; overflow-wrap: anywhere; }
.nw { white-space: nowrap; }
.fig { font-family: var(--font-figure); font-variant-numeric: tabular-nums; }
.bk__note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; }
.bk > .linkbtn { grid-column: 1 / -1; justify-self: start; }
.bk__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 20px; }   /* 予約の行の「直す・別の便へ・取り消す」 */
.fls { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.fl--warn { color: var(--warn); font-weight: 700; }
.fl--warn::before { content: "! "; }
.fl--ok { color: var(--ok); }
.fl--ok::before { content: "✓ "; }
.fl--info { color: var(--muted); }
.fl--info::before { content: "・"; }
.trip__time--date { font-size: 22px; }
.trip--past .trip__time { color: var(--muted); }

/* ---------- お客さんに聞く（お店のリンクの画面・お客さんの画面） ---------- */
.url { margin: 0 var(--inset) 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-figure); font-size: 14px; overflow-wrap: anywhere; }
.sheet__note { margin: 0; padding: 0 var(--inset) 12px; font-size: 14px; color: var(--muted); }
.ptabs { display: flex; gap: 16px; margin: 16px 0 0; border-bottom: 1px solid var(--line-2); overflow-x: auto; overflow-y: hidden; }
.ptab { flex: none; border: 0; border-bottom: 3px solid transparent; background: none; padding: 6px 0 9px; cursor: pointer; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ptab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ptab:focus-visible { outline-offset: -3px; }
.known summary { cursor: pointer; padding: 10px var(--inset); font-weight: 700; font-size: 15px; }
.known[open] summary { border-bottom: 1px solid var(--line); }
.ask__form { margin-top: 16px; }
.pick { display: grid; grid-template-columns: 24px 88px minmax(0, 1fr); gap: 8px; padding: 10px var(--inset); border-top: 1px solid var(--line); align-items: start; cursor: pointer; }
.pick:first-child { border-top: 0; }
.pick input { margin-top: 5px; }
.today { margin-top: 16px; }
.big { display: block; width: 100%; text-align: left; padding: 14px 16px; margin-top: 10px; border: 1px solid var(--control); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 700; cursor: pointer; }
.big small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
/* ---------- 今日の名簿・条例の名簿・カレンダー・記録 ---------- */
/* 便の画面の見出し（design.md の形）: 左に便の時刻を大きく、右に日付・ツアー・人数。下に字の色の 2px の線 */
.tripnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.tripnav .linkbtn { padding: 6px 0; }
.mast { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: end; padding: 6px 0 12px; border-bottom: 2px solid var(--ink); }
.mast__t { grid-row: span 2; font-family: var(--font-figure); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.02em; }
.mast__d { font-family: var(--font-figure); font-weight: 700; font-size: 20px; line-height: 1.2; }
.mast__w { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.mast__w b, .pickrow__v .fig { font-family: var(--font-figure); }
.tripfacts { border-bottom: 1px solid var(--line-2); }
.tripfacts > .pickrow:first-child { border-top: 0; }
.pickrow.pickrow--act { grid-template-columns: 88px minmax(0, 1fr) auto; min-height: 56px; }
.pickrow__v { font-weight: 700; }
.morelinks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 20px 0 0; }
.known summary { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-2); padding-left: 0; padding-right: 0; }
.trip__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; }
.pickrow { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px var(--inset); border-top: 1px solid var(--line); }
.sheet__title + .pickrow { border-top: 0; }
.bks--sheet { margin: 0; padding: 0 var(--inset); }
.bks--sheet .bk:first-child { border-top: 0; }
.ics { margin: 0 var(--inset) 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.sheet__title + .ics { margin-top: 10px; }
.logrow { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 9px var(--inset); border-top: 1px solid var(--line); font-size: 14px; }
.sheet__title + .logrow { border-top: 0; }
.logrow time { font-family: var(--font-figure); color: var(--muted); font-size: 14px; }
.logrow small { display: block; color: var(--muted); font-size: 14px; }
/* 条例の名簿。画面では横に送れる紙、印刷では A4 横 */
.paper { margin-top: 16px; padding: 16px; background: var(--paper-bg); color: var(--paper-ink); border: 1px solid var(--line-2); border-radius: var(--radius); }
.paper__title { margin: 0; font-size: 20px; }
.paper__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 6px 0 10px; font-size: 12px; }
.paper__meta b { font-family: var(--font-figure); }
.paper__warn { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.paper__wrap { overflow-x: auto; }
.paper__table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; font-size: 11px; line-height: 1.4; }
.paper__table th, .paper__table td { border: 1px solid var(--paper-rule); padding: 4px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.paper__table th { background: var(--paper-head); font-weight: 700; }
.paper__none { color: var(--paper-faint); }
.paper__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 10px 0 0; font-size: 11px; }
@page { size: A4 landscape; margin: 10mm; }
/* 印刷: 名簿の紙を出している間（body.print-roster）は、紙以外を消す。紙は普通の流れに置き、ページをまたげるようにする
   （absolute や visibility で隠すと、2 枚目以降が欠けたり白紙が付いたりするブラウザがある） */
@media print {
  html, body { background: var(--paper-bg); }
  body.print-roster > :not(main), body.print-roster main > :not(#view-booking), body.print-roster #booking > :not(.paper) { display: none !important; }
  body.print-roster .wrap { max-width: none; margin: 0; padding: 0; }
  body.print-roster .view--desk { max-width: none; }
  .paper { margin: 0; padding: 0; border: 0; border-radius: 0; }
  .paper__wrap { overflow: visible; }
  .paper__table { min-width: 0; font-size: 9.5px; line-height: 1.3; }
  .paper__table th, .paper__table td { padding: 3px; }
  .paper__table thead { display: table-header-group; }
  .paper__table tr { break-inside: avoid; }
}
.big[aria-pressed="true"] { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.timetable { margin-bottom: 24px; }
.bk__meta { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.st { font-family: var(--font-figure); font-size: 14px; font-weight: 700; white-space: nowrap; }
.st--wait { color: var(--info); }
.st--ok { color: var(--ok); }
.st--check { color: var(--warn); }
.empty { padding: 24px 0; color: var(--muted); border-bottom: 1px solid var(--line-2); }

/* 下に固定する操作の帯（左が主、右が副） */
.dock { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px -16px 0;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line-2); }
/* 幅 320px では長い名前（「この文面を AI で読む」など）が半分の幅に入らない。はみ出させず、ボタンの中で 2 行に折る（56px に 2 行が入る） */
.dock .btn { min-height: 56px; width: 100%; padding: 4px 10px; line-height: 1.25; text-wrap: balance; word-break: auto-phrase; }   /* auto-phrase: 日本語を文節で折る（「確かめ済 / みにする」にしない） */
.dock--one { grid-template-columns: minmax(0, 1fr); }
/* 一番下の「データの扱いと外部送信について」へのリンク（data.html。決定ログ 2026-10-29 web-analytics）。印刷には出さない */
.foot { margin-top: 40px; padding-top: 16px; padding-bottom: 32px; border-top: 1px solid var(--line); }
@media print { .foot { display: none; } }
.dock .errors { grid-column: 1 / -1; font-size: 14px; }

/* 定義の並び（読み取り・確かめる） */
.sheet { margin-top: 28px; }
.sheet__title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; padding: 0 var(--inset) 6px; border-bottom: 1px solid var(--line-2); font-size: 15px; font-weight: 700; }
.sheet__title small { font-weight: 400; font-size: 14px; color: var(--muted); }
.rd { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px var(--inset); border-top: 1px solid var(--line); }
/* AI の読み取り（見本 / 本物）。予約の一覧の題の下、Worker 版だけ */
.ai { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; margin: 10px 0 4px; padding: 10px var(--inset); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ai .rd__k { padding-top: 0; }
.ai__v small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); word-break: auto-phrase; }
.ai__v .fig { font-family: var(--font-figure); font-weight: 700; color: var(--ink); }
.ai__v .nw { white-space: nowrap; }
.ai .linkbtn { padding: 0; font-size: 14px; }
.ai--on .ai__v b { color: var(--accent); }
.sheet__title + .rd, .rd:first-child { border-top: 0; }
.rd__k { font-size: 14px; color: var(--muted); padding-top: 3px; word-break: auto-phrase; }   /* 長い項目名は文節で折る（「最後に / 潜った日」） */
.rd__v { font-weight: 700; overflow-wrap: anywhere; }
.rd__sub { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.rd__v .url { margin: 8px 0 0; font-weight: 400; }   /* 写せなかったリンクを、右の列の中に出す */
.rd--unsure .rd__v, .rd--unsure .rd__sub { color: var(--warn); }
.band { margin: 16px 0; padding: 10px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.band__title { margin: 0 0 4px; font-weight: 700; }
.band__text { margin: 0; font-size: 14px; }
.band--warn { border-color: var(--warn-line); }
.band--warn .band__title { color: var(--warn); }
/* 確かめる画面（v12）: 1 項目 = 名前と印・入力欄・理由か前の値。罫線で区切り、箱にしない */
.cf { display: grid; gap: 6px; padding: 12px var(--inset); border-top: 1px solid var(--line); }
.sheet__title + .cf { border-top: 0; }
.cf__head { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.cf__mark { font-weight: 700; white-space: nowrap; }
.cf__mark--check { color: var(--warn); }
.cf__mark--fixed { color: var(--accent); }
.cf__why { margin: 0; font-size: 14px; color: var(--warn); }
.cf__was { margin: 0; font-size: 14px; color: var(--muted); }
.cf__was .linkbtn { padding: 0; }
.cf__more { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; margin-top: 12px; padding: 6px var(--inset);
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; color: var(--accent); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; }
.cf__locked { margin: 0; min-height: 48px; display: flex; align-items: center; padding: 8px 12px; border-radius: var(--radius); background: var(--disabled-bg); color: var(--disabled-ink); font-size: 15px; }
.cf__count { margin: 0; text-align: center; }
.dock .cf__count { grid-column: 1 / -1; }   /* 下の帯では 2 つのボタンの上に 1 行で */
.samples { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mail__text { min-height: 9em; line-height: 1.5; resize: vertical; }
.mail__out { margin-top: 12px; }
.mail__shown { margin: 8px 0 0; padding: 10px 12px; max-height: 16em; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.phone__pick { margin: 12px 0; }
.picker { display: grid; gap: 12px; margin-top: 16px; }
.photo__canvas { display: block; width: 100%; max-width: 420px; height: auto; margin: 8px auto; border-radius: var(--radius); border: 1px solid var(--control); touch-action: none; cursor: crosshair; }
.photo__sent { display: block; width: 100%; max-width: 320px; height: auto; margin: 8px auto 0; border-radius: var(--radius); border: 1px solid var(--line); }
.check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-weight: 700; }
.check input { width: 22px; height: 22px; flex: none; }
.who { margin: 16px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; }
.checks { list-style: none; margin: 0; padding: 0 var(--inset); }
.checks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }

/* 乗り合い（P5）: 他のお店役の帯・人数の合計・1 行で足す・お店ごとの見出し・札の番号の行 */
.roleflag { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.roleflag .linkbtn { padding: 0; }
.sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px var(--inset); font-size: 15px; }
.sum b { font-family: var(--font-figure); text-align: right; }
.sum .sum__all { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }
.addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px var(--inset); border-top: 1px solid var(--line); }
.agree { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 10px var(--inset); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; }
.shophead { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 10px var(--inset) 6px; font-weight: 700; font-size: 15px; }
.shophead span:last-child { font-family: var(--font-figure); font-weight: 400; color: var(--muted); font-size: 14px; white-space: nowrap; }
.tagrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px var(--inset); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.tagrow small { font-size: 14px; color: var(--muted); white-space: nowrap; }
.tagrow .st { font-size: 14px; }
.paper__shop td { background: var(--paper-head); font-weight: 700; }
/* 合同名簿（5 項目。健康の 2 欄は載せない）の列。短い種類は細く、緊急時の連絡先は広く */
.paper__table th.paper__col--kind { width: 6%; }
.paper__table th.paper__col--shop { width: 12%; }
.paper__table th.paper__col--emergency { width: 22%; }
/* 血中酸素（県警の体調チェック表）: 年齢の印・高リスクの数・1 人ずつの欄・手当ての案内。お客さんの症状の案内 */
.age { display: inline-block; margin-left: 8px; color: var(--info); font-family: var(--font-figure); font-size: 14px; font-weight: 700; white-space: nowrap; }   /* 箱で囲まない（design.md の部品） */
.sum .sum__hi { color: var(--warn); font-weight: 700; }
.sp { padding: 10px var(--inset) 12px; border-top: 1px solid var(--line); }
.sp:first-child { border-top: 0; }
.sp__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; overflow-wrap: anywhere; }
.sp__name { min-width: 0; }
.sp__grid { display: grid; grid-template-columns: 56px repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; max-width: 420px; margin-top: 8px; }
.sp__h { font-size: 14px; color: var(--muted); text-align: center; }
.sp__n { font-size: 14px; color: var(--muted); }
.sp__in { min-width: 0; text-align: center; font-family: var(--font-figure); font-size: 18px; }
.sp__in--hi { border-color: var(--warn); outline: 2px solid var(--warn); outline-offset: -3px; color: var(--warn); font-weight: 700; }
.sp__why { margin: 8px 0 0; font-size: 14px; color: var(--warn); font-weight: 700; }
.sp__in[aria-invalid="true"] { border-color: var(--warn); outline: 2px dashed var(--warn); outline-offset: -3px; }
.sp__bad { margin: 8px 0 0; font-size: 14px; color: var(--warn); font-weight: 700; }
.sp__note { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.act { margin: 16px 0 0; padding: 12px 14px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius); font-size: 15px; }
.act p { margin: 0 0 6px; }
.act ul { margin: 0; padding-left: 20px; }
.act__title { color: var(--warn); font-weight: 700; }
.act--plain { margin: 0; border: 0; border-radius: 0 0 var(--radius) var(--radius); }
/* 便の中止（design.md の例外: 見落とすとお客さんが港に来てしまうので、注意の帯を使う） */
.act__done { color: var(--ok); font-weight: 700; }
.act .reset { margin: 6px 0 0; }
.act .linkbtn { color: var(--warn); }
.mast--off .mast__t { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--muted); }
.trip__time--off { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.trip__time--off small { display: inline-block; width: 100%; color: var(--warn); font-weight: 700; }   /* inline-block には親の取り消し線が付かない */
.btn--warn { background: var(--warn); border-color: var(--warn); color: var(--accent-ink); }
.btn--warn:hover { background: color-mix(in oklch, var(--warn) 88%, var(--ink)); }
.linkbtn--warn { color: var(--warn); }
.cancel__msg { margin: 0; padding: 10px var(--inset); font-size: 15px; }
.sym { margin-top: 16px; padding: 14px 16px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius); }
.sym__title { margin: 0 0 6px; font-size: 16px; }
.sym__list { margin: 0; padding-left: 20px; font-weight: 700; }
.sym__note { margin: 8px 0 0; font-size: 14px; }   /* 地が --warn-bg なので字は --ink（--muted は測った組に無い） */
.sym__more { margin-top: 10px; font-size: 14px; }
.sym__more summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.sym__ln { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--warn-line); }
.sym__ln p { margin: 0; }
.sym__lang { font-size: 14px; }
.sym__words { font-weight: 700; }
/* 乗り合い: 写真で名前を渡す・船の上で店ごとに戻った（決定ログ photo-shopcheck） */
.subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); font-size: 15px; font-weight: 700; }
.subhead span { font-family: var(--font-figure); color: var(--muted); font-weight: 400; }
.sumline { margin: 10px 0 0; font-size: 15px; }
.rowedit { grid-column: 1 / -1; display: grid; gap: 4px; margin: 8px 0 4px; padding: 8px 0 0; border-top: 1px dashed var(--line-2); }
.bk > .btn--small { align-self: center; }
.backs .bk { min-height: 56px; align-items: center; }
.backs .st { font-size: 15px; }

/* 書類の自動化（js/auto-flow.js）: 1 件の予約の流れ。予定は薄い字、送った連絡の文面は開いて読む */
.bk--next .bk__name { color: var(--muted); font-weight: 400; }
.mailbody { grid-column: 1 / -1; font-size: 14px; }
.mailbody summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mailbody__subject { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.mailbody__text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 書類の自動化（お店全体、画面 10）: 送れたか分からない連絡は、行の下に確かめてから選ぶ 2 つのボタン（囲まない） */
.bk__ask { grid-column: 1 / -1; display: grid; gap: 8px; margin: 6px 0 4px; }
.bk__ask p { margin: 0; font-size: 15px; }
.sumline--board { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.sumline--board > * { white-space: nowrap; }

/* 店頭の QR・QR を見せる・SMS / LINE で送る（js/walkin-staff.js・js/booking.js。決定ログ 2026-10-28 walkin-qr） */
.sendrow { display: grid; gap: 8px; padding: 0 var(--inset) 12px; }
a.btn { text-decoration: none; }
.perlink + .perlink { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }   /* 1 人ずつのリンク（js/person-links.js） */
.qr--big .qr__img { width: min(420px, 100%); }
.poster { margin: 24px 0 0; padding: 20px 16px; border: 1px solid var(--line-2); background: var(--paper-bg); color: var(--paper-ink); text-align: center; }
.poster__shop { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.poster__title { margin: 8px 0 0; font-size: 22px; }
.poster__lead { margin: 8px 0 0; font-size: 16px; }
.poster__qr { margin: 16px auto; width: min(320px, 100%); }
.poster__qr .qr__img { width: 100%; margin: 0; }
.poster__note { margin: 0; font-size: 14px; }
/* 印刷: 店頭の貼り紙（body.print-poster）だけを A5 の縦で出す。名簿の紙（body.print-roster）と同じ作り */
@page poster { size: A5 portrait; margin: 8mm; }
@media print {
  body.print-poster > :not(main), body.print-poster main > :not(#view-booking), body.print-poster #booking > :not(.poster) { display: none !important; }
  body.print-poster .wrap { max-width: none; margin: 0; padding: 0; }
  body.print-poster .view--desk { max-width: none; }
  .poster { page: poster; margin: 0; padding: 0; border: 0; }
  .poster__shop { font-size: 20px; }
  .poster__title { font-size: 36px; }
  .poster__lead { font-size: 22px; }
  .poster__qr { width: 100mm; margin: 12mm auto; }
  .poster__note { font-size: 16px; }
}

/* 未確認の印（js/day-roster.js・決定ログ 2026-10-28 unconfirmed-marks）。色だけにせず、字（▲未確認）と太い破線の枠で示す。白黒の印刷・写真でも分かる */
.unconf { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.paper__unconf { display: inline-block; margin-left: 4px; padding: 0 3px; border: 1px solid var(--paper-ink); font-size: 0.9em; font-weight: 700; white-space: nowrap; }
.paper__table td.paper__cell--unconf { border: 2px dashed var(--paper-ink); }
.paper__legend { margin: 8px 0 0; font-size: 11px; font-weight: 700; }
@media print { .paper__legend { font-size: 9.5px; } }

/* ---------- 見本の帯（GitHub Pages の見本の画面だけ。js/demo-band.js、design.md の「見本と本物」）----------
   画面の一番上に貼り付いて、消せない。字と地を入れ替え、下に二重線を引く（色だけで区別しない）。
   上の帯（.bar）はその下に貼り付く（帯の高さは --band-h に JS が入れる）。印刷では背景が抜けることがあるので、地を使わず枠と字で出す */
.demo-band { position: sticky; top: 0; z-index: 11; margin: 0; padding: 10px 16px 8px; background: var(--demo-bg); color: var(--demo-ink);
  border-bottom: 7px double var(--demo-ink); font-size: 16px; font-weight: 700; line-height: 1.5; text-align: center; }
.bar { top: var(--band-h, 0px); }
html { scroll-padding-top: calc(96px + var(--band-h, 0px)); }
.demo-note:empty { display: none !important; }
@media print {
  .demo-band { position: static; background: none; color: var(--paper-ink); border: 3px double var(--paper-ink); padding: 6px 10px; margin: 0 0 8px; }
  body.print-roster > .demo-band, body.print-poster > .demo-band { display: block !important; }
}

/* 幅 420px より狭いと、上の帯の店名（#brandSub）が「画面の切り替え」「デモの画面」と詰まって重なる（390px のスマホで重なった。外部レビュー 2026-11-04）。
   店名は画面の見出しにも出ているので、狭い時は上の帯から省く */
@media (max-width: 420px) { #brandSub { display: none; } }

/* ---------- 乗船者名簿とダイビング計画（js/boat-manifest.js。国交省のダイビング船の安全対策ガイドライン）---------- */
.mf__counts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mf__warn, .mf__miss { color: var(--warn); font-weight: 700; }
.mf__src { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.mf__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mf__time { max-width: 160px; }
.mf__tanks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mf__tank { display: flex; align-items: center; gap: 6px; }
.mf__tank .input { width: 88px; }
.mf__sex { width: auto; }
.mf__person { align-items: center; }
.paper__table--plan { min-width: 0; margin-bottom: 10px; }
.paper__table--plan th { width: 16%; }
.paper__table--manifest { min-width: 640px; }
.paper__table--manifest .mf__col--n { width: 5%; }
.paper__table--manifest .mf__col--name { width: 19%; }
.paper__table--manifest .mf__col--sex, .paper__table--manifest .mf__col--age { width: 7%; }
.paper__table--manifest .mf__col--address { width: 29%; }
.paper__table--manifest .mf__col--emergency { width: 33%; }
.paper__sign { display: flex; gap: 24px; margin: 12px 0 0; font-size: 12px; }
.paper__sign span { flex: 1; padding-bottom: 16px; border-bottom: 1px solid var(--paper-rule); }
@media print { .paper__table--manifest { min-width: 0; } }

/* ---------- お店向けの試用の案内（shops.html。決定ログ 2026-10-31 shop-lp）----------
   本物の画面を順に見せる 1 枚。白い面を積まず、区切りは罫線と余白。端末の枠は描かず、画面の絵に細い線だけ */
body.lp { overflow-x: clip; }
html:has(body.lp) { overflow-x: clip; scroll-padding-bottom: 80px; }
.lp h1, .lp h2, .lp p, .lp summary, .lp dd { word-break: auto-phrase; }   /* 日本語を文節で折る */
.lp-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.lp-hero { display: grid; gap: 40px; padding: 40px 0 64px; align-items: center; }
.lp-h1 { margin: 0; font-size: 30px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.lp-lede { margin: 16px 0 0; color: var(--muted); max-width: 30em; }
.lp-terms { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.lp-terms b, .lp-fig { font-family: var(--font-figure); color: var(--ink); }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--accent);
  color: var(--accent-ink); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background var(--dur) var(--ease-out); }
.lp-btn:hover { background: color-mix(in oklch, var(--accent) 86%, var(--ink)); }
.lp-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.lp-btn--ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.lp-btn--ghost:hover { background: var(--accent-soft); }
.lp-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
/* 上の帯: ページの中へのリンクと申し込み（幅 900 から。狭い時は申し込みだけ） */
.lp-nav { display: none; }
.lp-nav a { color: var(--ink); text-decoration: none; font-size: 15px; }
.lp-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-kicker { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--accent); }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.lp-send { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.lp-send a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
/* 申し込みのフォーム（スクリプトなし）。送ったあとの文は、Worker が戻す #sent・#apply-error のときだけ出す（:target） */
.lp-apply { display: grid; gap: 12px; margin-top: 24px; max-width: 30em; }
.lp-apply .lp-ctas { margin-top: 4px; }
.lp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-note { display: none; margin: 0; padding: 12px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-weight: 700; }
.lp-note:target { display: block; }
.lp-note--ng { border-color: var(--warn-line); color: var(--warn); }
.lp-addr { font-family: var(--font-figure); color: var(--ink); user-select: all; }
/* 一番上の絵: 紙の申込書（見本）を傾けて重ね、予約メールの札と、今日の名簿の画面を並べる。動かさない */
.lp-scene { margin: 0; width: 100%; max-width: 520px; justify-self: center; }
.lp-scene__art { position: relative; aspect-ratio: 1.15; }
.lp-paper { position: absolute; width: 31%; height: auto; border: 1px solid var(--line-2); background: var(--surface); }
.lp-paper--1 { left: 0; top: 9%; rotate: -7deg; }
.lp-paper--2 { left: 13%; top: 24%; rotate: 5deg; }
.lp-paper--3 { left: 3%; top: 40%; rotate: -2deg; }
.lp-mail { position: absolute; left: 9%; top: 0; width: 38%; margin: 0; padding: 6px 10px; rotate: 3deg; background: var(--surface); border: 1px solid var(--line-2);
  font-size: 14px; line-height: 1.45; }
.lp-mail b { display: block; }
.lp-arrow { position: absolute; left: 43%; top: 44%; width: 12%; margin: 0; z-index: 1; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--accent); }
.lp-arrow span { display: block; font-size: 32px; line-height: 1; }
.lp-scene__screen { position: absolute; right: 0; top: 0; width: 45%; height: 100%; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--surface); }
.lp-scene__screen img { display: block; width: 100%; height: auto; }
.lp-scene figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* 数字の帯: ページに 1 本だけの深い海の帯。上の絵と下の困りごとの区切り */
.lp-stats { background: var(--deep-bg); color: var(--deep-ink); }
.lp-stats__in { display: grid; padding-top: 8px; padding-bottom: 8px; }
.lp-stat { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px 0; }
.lp-stat + .lp-stat { border-top: 1px solid var(--deep-line); }
.lp-stat p { margin: 0; }
.lp-stat__n { grid-row: span 2; font-family: var(--font-figure); font-size: 44px; line-height: 1; font-weight: 700; color: var(--deep-num); }
.lp-stat__n small { margin-left: 4px; font-family: var(--font-body); font-size: 16px; color: var(--deep-ink); }
.lp-stat__h { font-weight: 700; }
.lp-stat__sub { font-size: 14px; color: var(--deep-num); }
/* 困りごと 3 つ: 罫線と余白だけ（箱にしない） */
.lp-pains { padding: 56px 0 24px; }
.lp-pains ol { list-style: none; margin: 16px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.lp-pains li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.lp-pains .lp-h3 { margin: 0 0 4px; }
.lp-pains p { margin: 0; color: var(--muted); }
.lp-pains .lp-fix { margin-top: 8px; color: var(--accent); font-weight: 700; }
@media (max-width: 479px) {
  .lp .brand__name small { display: none; }
  .lp-ctas .lp-btn { flex: 1 1 100%; }
  .lp-mail { left: 3%; width: 46%; padding: 4px 8px; }
}
@media (min-width: 900px) {
  .lp-bar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 28px; }
  .lp-nav { display: flex; gap: 24px; grid-column: 2; grid-row: 1; justify-self: end; }
}
.lp-shot { margin: 0; justify-self: center; width: min(100%, 340px); }
.lp-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); }
.lp-shot figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.lp-tour { border-top: 2px solid var(--ink); }
.lp-step { display: grid; gap: 24px; padding: 64px 0; border-bottom: 1px solid var(--line); align-items: center; }
.lp-step p { margin: 8px 0 0; max-width: 28em; }
.lp-h2 { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 700; }
.lp-n { font-family: var(--font-figure); color: var(--accent); margin-right: 8px; }
.lp-h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.lp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; justify-self: center; width: min(100%, 560px); }
.lp-pair .lp-shot { width: 100%; }
.lp-cm { padding: 64px 0; border-bottom: 1px solid var(--line); }
.lp-cm video { display: block; width: 100%; max-width: 720px; height: auto; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ink); }
.lp-facts { padding: 64px 0 24px; }
.lp-facts dl { margin: 0; border-top: 2px solid var(--ink); }
.lp-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.lp-row dt { color: var(--muted); }
.lp-row dd { margin: 0; }
.lp-faq { padding: 40px 0 64px; }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq details:first-of-type { border-top: 2px solid var(--ink); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; min-height: 48px; font-weight: 700; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "＋"; color: var(--accent); flex: none; }
.lp-faq details[open] summary::after { content: "－"; }
.lp-faq details p { margin: 0 0 16px; }
/* 下の帯: 3 段目から本文の終わりまで、画面の下に付いてくる（JS なし。.lp-later の中だけで止まる） */
.lp-dock { position: sticky; bottom: 0; z-index: 1; background: var(--bg); border-top: 2px solid var(--ink); padding: 8px 0; }
.lp-dock .lp-wrap { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.lp-dock span { font-size: 14px; color: var(--muted); min-width: 0; }
.lp-dock .lp-btn { margin-left: auto; padding: 0 22px; }
.lp .foot { display: grid; gap: 4px; justify-items: start; }
@media (min-width: 768px) {
  .lp-h1 { font-size: 42px; }
}
@media (min-width: 900px) {
  .lp-stats__in { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 36px; padding-bottom: 36px; }
  .lp-stat { display: block; padding: 0 32px; }
  .lp-stat:first-child { padding-left: 0; }
  .lp-stat + .lp-stat { border-top: 0; border-left: 1px solid var(--deep-line); }
  .lp-stat__n { font-size: 64px; }
  .lp-stat__n small { margin-left: 6px; font-size: 20px; }
  .lp-stat .lp-stat__h { margin-top: 14px; font-size: 18px; }
  .lp-stat__sub { font-size: 15px; }
  .lp-pains ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .lp-pains li { border-bottom: 0; }
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); padding-top: 64px; }
  .lp-scene { max-width: none; }
  .lp-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .lp-step:nth-child(even) > .lp-shot, .lp-step:nth-child(even) > .lp-pair { order: -1; }
}
@media (max-width: 359px) { .lp-dock span { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-btn { transition: none; } }