/*
 * 店舗営業状況リアルタイム表示システム（1ファイル・ビルド不要。設計書 ADR-10）
 * 状況の色は設計書 06 2.1（白文字との明るさの比 4.5 以上。TC-260）
 *
 * 2026-10-12 見た目の作り直し（設計書 06 2.2・15 2章）：
 *  - 文字の大きさ・ボタンの高さ・色のコントラストの決まりはそのまま（店舗・公開：本文16／補助14／印12、ボタン48以上・リンク44以上。管理：14／13／12、操作36以上）
 *  - 状況の5色に「淡い地色」を足し、枠の色だけでなく面でも状況が分かるようにした（文字は白地か濃い色の上にだけ置く）
 *  - 面と影：細い縁＋二層の柔らかい影、角丸を2段（16／12）に統一。押せるものは押した感触（押下で少し縮む・影が変わる）
 *  - 文字：見出しの字間（palt）と太さを整え、時刻・数字は等幅（桁が揃う）
 *  - 管理画面：紺の表ヘッダーをやめ、薄い帯＋縞。札は淡い地色の形。入力欄とボタンの高さをそろえた
 *  - 動きは短く（150ms）、動きを減らす設定の端末では止める
 */
:root {
  --open: #1a7f45; --busy: #b35c00; --full: #c0392b; --closed: #5c6873; --temp: #6f3aa8;
  --open-soft: #e4f3ea; --busy-soft: #fcefe2; --full-soft: #fbe8e6; --closed-soft: #eceff3; --temp-soft: #f0e9f9;
  --ink: #1b2630; --sub: #55636f; --line: #dbe3ea; --line-2: #eef2f6; --bg: #f2f4f7; --card: #fff;
  /* 2026-10-16 御社の希望「ポータルサイト（旅好きっぷ HOKKAIDO）に合わせた青系」：ロゴの濃い青緑 #165a7a（白い文字との比 7.56）と、
     「HOKKAIDO」の紺を濃くした #25306b（同 12.25）。帯はロゴと同じく紺→青緑。黄色の差し色はポータルの黄色と同じ系統なので残す */
  --brand: #165a7a; --brand-dark: #25306b; --brand-soft: #e4eff2; --accent: #f2b705;
  --err: #b42318; --err-bg: #fdecea; --warn-bg: #fff4d6; --ok-bg: #e9f6ee;
  --radius: 16px; --radius-s: 12px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --shadow-2: 0 4px 14px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.05);
  --shadow-3: 0 14px 36px rgba(16,24,40,.2);
  --dur: 150ms;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }   /* 入力欄も本文と同じ書体（複数行の欄だけ等幅になっていた） */   /* 部品の display 指定より「隠す」を優先（隠したはずのボタンが出る事故を防ぐ） */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.6; font-feature-settings: "palt"; }
a { color: var(--brand); }
button { font: inherit; }
h1, h2, h3 { letter-spacing: .01em; }
.num, .cred .big, .p-tel, .tbl td, .a-tbl td, .kpi .n, .cal .d { font-variant-numeric: tabular-nums; }
.stage-banner { background: var(--accent); color: #3a2e00; text-align: center; font-weight: 700; padding: 6px 12px; font-size: 14px; }
.travel-banner { background: #e8dcff; color: #2c1a55; text-align: center; padding: 6px 12px; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ic { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -0.3em; }   /* 線画のアイコン（文字と必ず併記。色は文字と同じ） */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ───── 店舗の画面（スマホ） ───── */
.m-wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; padding-bottom: 120px; }
/* 日本語は文節で改行する（「お問い合わせPOP」／「の連絡先へ」のような切れ方を防ぐ。2026-10-16）。管理画面の表は列幅を測って決めたので入れない */
.m-wrap, .p-wrap, .e-wrap { word-break: auto-phrase; }
.m-top { background: var(--brand-dark) linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; padding: 16px 18px 14px; }
.m-top small { font-size: 14px; opacity: .85; display: block; letter-spacing: .04em; }
.m-top h1 { font-size: 20px; margin: 2px 0 0; font-weight: 700; line-height: 1.35; }
.m-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -10px 0 -4px -8px; padding: 0 8px; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 10px; }   /* どの画面からも同じ場所でホームへ戻れる */
.m-back:active { background: rgba(255,255,255,.14); }
.m-body { padding: 14px 14px 0; }
.card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-1); border: 1px solid var(--line-2); }
.lab { font-size: 13px; color: var(--sub); }
/* いまの表示（お客さまの画面と同じ）：上に薄い帯、状況の色は文字と左の縁で */
.pv { border: 1px solid var(--line); border-left: 6px solid var(--closed); border-radius: var(--radius); background: var(--card); padding: 0 0 12px; margin-bottom: 14px; box-shadow: var(--shadow-2); overflow: hidden; }
.pv > .lab:first-child { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--closed-soft); color: var(--ink); font-weight: 600; }
.pv .st { font-size: 26px; font-weight: 800; margin: 8px 14px 2px; line-height: 1.3; }
.pv .sub { font-size: 14px; margin: 0 14px; }
.pv > .lab:not(:first-child) { margin: 2px 14px 0; }
.pv .note { font-size: 13px; color: var(--ink); background: var(--bg); border-radius: 10px; padding: 8px 10px; margin: 8px 14px 0; }
.pv.s-open { border-left-color: var(--open); } .pv.s-open .st { color: var(--open); } .pv.s-open > .lab:first-child { background: var(--open-soft); }
.pv.s-busy { border-left-color: var(--busy); } .pv.s-busy .st { color: var(--busy); } .pv.s-busy > .lab:first-child { background: var(--busy-soft); }
.pv.s-full { border-left-color: var(--full); } .pv.s-full .st { color: var(--full); } .pv.s-full > .lab:first-child { background: var(--full-soft); }
.pv.s-closed { border-left-color: var(--closed); } .pv.s-closed .st { color: var(--closed); } .pv.s-closed > .lab:first-child { background: var(--closed-soft); }
.pv.s-temp_closed { border-left-color: var(--temp); } .pv.s-temp_closed .st { color: var(--temp); } .pv.s-temp_closed > .lab:first-child { background: var(--temp-soft); }
.unpub { background: var(--warn-bg); color: #5a3d00; border: 1px solid #f0c75e; border-radius: var(--radius-s); padding: 10px 12px; font-size: 16px; margin-bottom: 10px; }
.hd { font-size: 14px; font-weight: 700; color: var(--sub); margin: 4px 2px 8px; letter-spacing: .02em; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
/* 状況のボタン：色の面＋線画のアイコン＋ひとこと。押すと少し沈む */
.sbtn { border: 0; border-radius: var(--radius); min-height: 92px; padding: 10px 8px; color: #fff; font-size: 22px; font-weight: 800; line-height: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; touch-action: manipulation; box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.18); transition: transform var(--dur), box-shadow var(--dur), opacity var(--dur); }
.sbtn .ic { width: 28px; height: 28px; margin-bottom: 2px; opacity: .95; }
.sbtn small { font-size: 14px; font-weight: 500; opacity: .95; margin-top: 3px; }
.sbtn.b-open { background: var(--open); } .sbtn.b-busy { background: var(--busy); } .sbtn.b-full { background: var(--full); } .sbtn.b-closed { background: var(--closed); }
.sbtn:active:not([aria-disabled="true"]) { transform: scale(.97); box-shadow: none; }
.sbtn.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
.sbtn.on::after { content: "表示中"; position: absolute; top: 6px; right: 8px; font-size: 14px; background: rgba(255,255,255,.28); border-radius: 6px; padding: 0 6px; font-weight: 700; line-height: 1.5; }
.sbtn[aria-disabled="true"] { opacity: .35; box-shadow: none; }
.sbtn.busy-spin::before { content: ""; position: absolute; width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; top: 8px; left: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.wbtn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: var(--radius); border: 2px solid var(--temp); background: #fff; color: var(--temp); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); transition: transform var(--dur), background var(--dur); }
.wbtn.solid { background: var(--temp); color: #fff; }
.wbtn:active { transform: scale(.98); }
.wbtn[aria-disabled="true"] { opacity: .4; }
/* ホームの下の行き先（右端に矢印。営業を終えた日は「明日以降の休み」を強調） */
.lk { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 0 12px 0 14px; min-height: 54px; font-size: 16px; margin-top: 8px; color: var(--brand); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-1); transition: transform var(--dur); }
.lk > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.lk .ic { color: var(--brand); opacity: .9; }
.lk .chev { width: 20px; height: 20px; color: #9aa6b2; }
.lk:active { transform: scale(.99); }
.lk.emph { border: 2px solid var(--brand); background: var(--brand-soft); }
.lk .ext { font-size: 18px; color: #9aa6b2; padding-right: 2px; }   /* 別のタブで開く */
.out-btn { min-height: 44px; padding: 0 18px; border: 1px solid #c9d1d8; border-radius: 999px; background: transparent; color: var(--sub); font-size: 14px; cursor: pointer; }   /* ログアウトは控えめ（間違えて押さない） */
.foot { font-size: 13px; color: var(--sub); text-align: center; margin: 18px 8px; line-height: 1.8; }
.nb { white-space: nowrap; }   /* 「」の言葉と助詞を1行に（OfficeContact::noteHtml） */
.foot-note { text-align: center; line-height: 1.6; padding: 4px 6px; }   /* 電話番号の代わりの案内文（2026-10-16） */
.foot-link { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; min-height: 44px; }   /* 下の小さなリンクも指で押せる高さ（44px） */
a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }   /* 電話番号は押せる高さ */
.guide-msg { font-size: 14px; background: #fff; border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line-2); border-left: 4px solid var(--brand); box-shadow: var(--shadow-1); }
.undo-mini { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 4px auto 10px; font-size: 16px; color: var(--brand); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; width: 100%; min-height: 48px; cursor: pointer; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; min-height: 48px; border-radius: var(--radius-s); border: 2px solid #b9c4cd; background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background var(--dur), border-color var(--dur); }
.seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* お知らせ（下から出る帯）とエラーの帯 */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; width: calc(100% - 24px); max-width: 456px; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 13px 14px; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-3); z-index: 50; animation: rise var(--dur) ease-out; }
@keyframes rise { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast .t { flex: 1; font-size: 16px; line-height: 1.5; }
.toast .t b { font-size: 16px; display: block; }
.toast button { background: #fff; color: var(--ink); border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; min-height: 48px; cursor: pointer; white-space: nowrap; }
.errbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; width: calc(100% - 24px); max-width: 456px; background: #fff; color: var(--ink); border: 2px solid var(--err); border-radius: var(--radius); padding: 12px 44px 12px 14px; z-index: 60; box-shadow: var(--shadow-3); animation: rise var(--dur) ease-out; }
.errbar h3 { margin: 0 0 4px; font-size: 16px; color: var(--err); display: flex; align-items: center; gap: 6px; }
.errbar p { margin: 0 0 8px; font-size: 16px; }
.errbar .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.errbar .row button, .errbar .row a { background: var(--err); color: #fff; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; min-height: 48px; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.errbar .x { position: absolute; top: 2px; right: 2px; background: none; border: 0; font-size: 22px; color: var(--sub); width: 48px; height: 48px; cursor: pointer; border-radius: 50%; }
.errbar .meta { font-size: 14px; color: var(--sub); margin-top: 6px; }
.errbar .tel { font-size: 16px; margin-top: 4px; }

/* 確認（画面中央の枠）。店舗・管理で同じ部品（ui.js） */
.dlg-back { position: fixed; inset: 0; background: rgba(13,23,33,.55); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 18px; animation: fade var(--dur) ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.dlg { background: #fff; border-radius: 18px; padding: 22px 18px 18px; width: 100%; max-width: 420px; box-shadow: var(--shadow-3); }
.dlg h2 { font-size: 19px; line-height: 1.5; margin: 0 0 8px; }
.dlg p { font-size: 16px; color: var(--sub); margin: 0 0 16px; }
.dlg p b { color: var(--ink); }
.dlg .field { margin-bottom: 16px; }
.dlg .go { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 54px; border: 0; border-radius: 12px; font-size: 17px; font-weight: 700; color: #fff; background: var(--temp); cursor: pointer; box-shadow: var(--shadow-1); transition: transform var(--dur); }
.dlg .go.blue { background: var(--brand); }
.dlg .go.danger { background: var(--err); }
.dlg .go:active { transform: scale(.98); }
.dlg .go:disabled { opacity: .4; cursor: not-allowed; }
.dlg .cancel { display: block; width: 100%; text-align: center; background: none; border: 0; font-size: 16px; color: var(--sub); min-height: 48px; margin-top: 16px; cursor: pointer; }
.dlg .cancel:empty { display: none; }

/* フォーム */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 16px; color: var(--sub); margin-bottom: 4px; }
.inp { width: 100%; min-height: 50px; border: 2px solid #b9c4cd; border-radius: var(--radius-s); padding: 0 12px; font-size: 18px; background: #fff; color: var(--ink); transition: border-color var(--dur), box-shadow var(--dur); }
.inp:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.inp.is-err, select.is-err { border-color: var(--err); background: #fffafa; }
.ferr { color: var(--err); font-size: 16px; margin-top: 4px; }
.pbtn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border: 0; border-radius: var(--radius-s); background: var(--brand); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); transition: transform var(--dur), opacity var(--dur); }
.pbtn.ghost { background: #fff; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; }
.pbtn:active:not([disabled]) { transform: scale(.98); }
.pbtn[disabled] { opacity: .45; cursor: not-allowed; }
.slot { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 10px; background: #fff; box-shadow: var(--shadow-1); }
.slot .ttl { font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.slot.off { background: var(--bg); box-shadow: none; }
.tsel { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.tsel select { min-height: 48px; font-size: 18px; border: 2px solid #b9c4cd; border-radius: 10px; padding: 0 6px; background: #fff; font-variant-numeric: tabular-nums; }
.tsel select.is-err { border-color: var(--err); }
.tsel .sep { color: var(--sub); }
.tsel .next { font-size: 16px; color: var(--busy); font-weight: 700; }   /* 「翌」は要の表示なので本文の大きさ（14→16px。2026-10-12） */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }   /* 375px幅でも1つ44px以上（枠の余白も詰める：.card.days-card） */
.card.days-card { padding: 12px 10px; }
.days-now { margin-top: 8px; font-size: 14px; color: var(--sub); }
.days button { min-height: 48px; border-radius: 10px; border: 2px solid #b9c4cd; background: #fff; font-size: 17px; font-weight: 700; cursor: pointer; transition: background var(--dur); }
.days button[aria-pressed="true"] { background: var(--closed); border-color: var(--closed); color: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; }
.tbl th { font-size: 14px; color: var(--sub); font-weight: 600; border-bottom: 2px solid var(--line); padding: 6px; text-align: left; }
.tbl td { border-bottom: 1px solid var(--line-2); padding: 7px 6px; text-align: left; vertical-align: top; }
.tbl tr.chg td { background: var(--warn-bg); }
.tbl tr.chg td:first-child::before { content: "● "; color: var(--busy); }
.cal { background: #fff; border-radius: var(--radius); padding: 8px 6px 10px; border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.cal .mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 700; }
.cal .mh button { min-width: 48px; min-height: 48px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-size: 18px; cursor: pointer; }
.cal .mh button:disabled { opacity: .3; }
.cal .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }   /* 375px幅でも1日44px以上 */
.cal .wd { text-align: center; font-size: 14px; color: var(--sub); }
.cal .wd:first-child { color: var(--full); } .cal .wd:nth-child(7) { color: var(--brand); }
.cal .d { min-height: 50px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 16px; position: relative; cursor: pointer; transition: background var(--dur); }
.cal .d[disabled] { background: #f2f4f6; color: #7f8b96; cursor: default; border-color: var(--line-2); }
.cal .d.sel { background: var(--temp); color: #fff; border-color: var(--temp); }
.cal .d.has { border: 2px solid var(--temp); background: var(--temp-soft); }
.cal .d .mk { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 12px; font-weight: 700; line-height: 1; }   /* 印は読める大きさ（9px→12px） */
.cal .d .mk.w { color: var(--closed); } .cal .d .mk.h { color: var(--full); }
.cal .d.sel .mk { color: #fff; }
.legend { font-size: 14px; color: var(--sub); margin-top: 6px; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 2px; border: 1px solid var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .lg-d { position: relative; display: inline-block; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }   /* カレンダーの1日を小さくした見本 */
.legend .lg-d .mk { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; line-height: 1; }
.legend .lg-d .mk.w { color: var(--closed); } .legend .lg-d .mk.h { color: var(--full); }
.legend .lg-d.has { border: 2px solid var(--temp); background: var(--temp-soft); }
/* 店舗の画面の文字の大きさ（設計書15 2章 決まり9。2026-10-10 測ったら13〜15pxの文が多く、決まりと食い違っていた）
   読む文・押す文字＝16px以上／補助の文字（大きなボタンの中の説明・曜日の見出し・帯の小見出し・凡例・「表示中」の札）＝14px、カレンダーの印だけ12px */
.m-wrap .lab, .m-wrap .note, .m-wrap .pv .sub, .m-wrap .hd, .m-wrap .guide-msg, .m-wrap .lk, .m-wrap .foot,
.m-wrap .days-now, .m-wrap .m-back, .m-wrap .cal .d, .m-wrap li, .m-wrap .card { font-size: 16px; }
.m-wrap .legend, .m-wrap .cal .wd { font-size: 14px; }

.list .it { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 8px 12px; margin-bottom: 6px; min-height: 52px; box-shadow: var(--shadow-1); }
.list .it button { background: none; border: 1px solid var(--err); color: var(--err); border-radius: 10px; padding: 6px 12px; min-height: 48px; cursor: pointer; white-space: nowrap; }
.steps { counter-reset: s; padding: 0; list-style: none; margin: 0; }
.steps li { counter-increment: s; background: #fff; border-radius: var(--radius-s); padding: 12px 12px 12px 48px; margin-bottom: 8px; position: relative; font-size: 16px; display: flex; align-items: center; gap: 10px; min-height: 60px; border: 1px solid var(--line-2); }
.steps li::before { content: counter(s); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; text-align: center; line-height: 26px; font-weight: 700; }
.steps li .pic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }   /* 絵（押す所の形） */
.steps li .pic .ic { width: 26px; height: 26px; }
.card .ttl { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

/* ───── 公開ページ（観光客向けの案内カード） ───── */
.p-wrap { max-width: 560px; margin: 0 auto; background: #fff; min-height: 100vh; padding: 22px 18px 30px; }
.p-name { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.35; }
.p-name-en { font-size: 16px; color: var(--sub); margin: 2px 0 16px; }
.p-badge { border-radius: var(--radius); color: #fff; padding: 22px 16px 20px; text-align: center; margin-bottom: 12px; box-shadow: var(--shadow-2); position: relative; overflow: hidden; }
.p-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,0)); pointer-events: none; }
.p-badge .ja { font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: .02em; }
.p-badge .en { font-size: 18px; font-weight: 600; opacity: .95; margin-top: 2px; }
.p-badge.s-open { background: var(--open); } .p-badge.s-busy { background: var(--busy); } .p-badge.s-full { background: var(--full); }
.p-badge.s-closed { background: var(--closed); } .p-badge.s-temp_closed { background: var(--temp); }
.p-sub { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.p-sub-en { font-size: 16px; color: var(--sub); margin: 0 0 10px; }
.p-next { background: var(--bg); border-radius: var(--radius-s); padding: 10px 12px 10px 14px; margin-bottom: 14px; font-size: 16px; border-left: 4px solid var(--brand); display: flex; gap: 8px; align-items: flex-start; }
.p-next .ic { color: var(--brand); margin-top: 3px; }
.p-sec { border-top: 1px solid var(--line-2); padding: 12px 0; }
.p-sec h2 { font-size: 14px; color: var(--sub); font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; letter-spacing: .02em; }
.p-sec .v { font-size: 18px; font-weight: 700; }
.p-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-size: 20px; font-weight: 700; color: var(--brand); text-decoration: none; border: 2px solid var(--brand); border-radius: var(--radius-s); margin-top: 4px; }   /* 電話は「押せるボタン」の形 */
.p-tel:active { background: var(--brand-soft); }
.p-notice { font-size: 16px; color: var(--sub); background: var(--bg); border-radius: var(--radius-s); padding: 10px 12px; margin-top: 10px; }
.p-time { font-size: 14px; color: var(--sub); margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.p-time.stale { color: var(--err); font-weight: 700; }
/* 表示時刻の点：自動で取り直している間は「ドクン、ドクン」と脈打ち、波紋が広がる（いま動いている合図）。取り直せないときは赤で止まる */
.p-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--open); display: inline-block; animation: p-beat 1.6s ease-in-out infinite; }
.p-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--open); animation: p-ripple 1.6s ease-out infinite; }
@keyframes p-beat { 0%, 50%, 100% { transform: scale(1); } 12% { transform: scale(1.35); } 24% { transform: scale(1); } 36% { transform: scale(1.25); } }
@keyframes p-ripple { 0% { transform: scale(1); opacity: .55; } 60%, 100% { transform: scale(3.2); opacity: 0; } }
.p-time.stale .p-dot { background: var(--err); animation: none; }
.p-time.stale .p-dot::after { display: none; }
.p-foot { margin-top: 18px; font-size: 16px; text-align: center; color: var(--sub); }
.p-back { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 6px -4px; padding: 0 4px; font-size: 16px; font-weight: 600; color: var(--brand); text-decoration: none; }   /* 外部送信のページから、来たお店のページへ戻る */
.p-foot a + a { margin-left: 1em; }
.p-foot a { color: var(--sub); display: inline-flex; align-items: center; min-height: 44px; }
/* ブラウザの言語が日本語以外なら、英語を上に（状況の札だけでなく、補足文・次の営業・注意書きも） */
.bi { display: flex; flex-direction: column; }
.en-first .bi { flex-direction: column-reverse; }
.en-first .bi .p-sub { color: var(--sub); font-weight: 400; margin-bottom: 10px; }
.en-first .bi .p-sub-en { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
/* 文字の大きさの段（設計書06 2.2・15 2章 決まり9。2026-10-10 管理画面は12〜14pxの6段にばらけていた）
   店舗の画面・公開ページ：本文と押す文字16px以上／補助14px（カレンダーの印だけ12px）。管理画面：本文14px／補助13px／色つきの札12px */
.p-wrap .lab { font-size: 16px; }   /* 英語の行は観光客には本文 */
.p-wrap p.lab { font-size: 14px; }   /* 受付番号の行は補助 */

/* ───── エラー画面 ───── */
.e-wrap { max-width: 520px; margin: 40px auto; background: #fff; border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow-2); border-top: 6px solid var(--err); }
.e-wrap h1 { font-size: 20px; color: var(--err); margin: 0 0 8px; }
.e-wrap .meta { font-size: 14px; color: var(--sub); margin-top: 14px; }