/* mobile.html 専用（来場者スマホの事前予約・マイページ）
 * 2026-10-25 公式アプリ（app/app.css）のデザインに合わせて刷新。
 *   地色・文字色・朱・カード・丸みの強い帯のボタン・一覧の行は app.css の値をそのまま使う。
 *   画面の組み立て（HTML の id・JS が描く部品のクラス名）は変えていない。見た目だけを差し替えている。
 * 従来は mobile.html の <style> に書いていたものを、このファイルへ移した。 */

/* ───────── 色・寸法（app.css と同じ値） ─────────
 * mobile.js が style 属性で var(--red) などを使っているため、共通 CSS の変数名のまま
 * .m-app の中だけ値を差し替える。受付PC・管理画面には影響しない */
.m-app{
  /* 2026-10-26 配色を見直し（案B）。地色・罫線を暖色のベージュから中立の淡いグレーへ戻した。
   *   「画面が暖色で見にくい」というご指摘による。朱はロゴの色のまま */
  --shu:#C03200; --shu-hi:#D9541F; --shu-deep:#9A2800; --shu-tint:#F9ECE7;
  --accent:#E9A23B; --ink:#333333; --ink-60:#6B6B6B; --ink-38:#A3A3A3;
  --ground:#F6F7F8; --box:#F1F2F4; --rule:#E7E9EC; --field:#D6D9DE;
  --night:#34406B; --night-tint:#E8EAF2;
  --shadow:0 1px 4px rgba(20,30,40,.07); --r:14px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  /* 共通 CSS の変数（style 属性から参照される） */
  --red:var(--shu); --gold:var(--shu); --gold-bg:var(--shu-tint);
  --text:var(--ink); --text-sub:var(--ink-60); --text-dim:var(--ink-60);
  --bg:var(--ground); --bg-card:#FFFFFF; --border:var(--rule);
}
body{background:#F6F7F8;color:#333333;font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6;}
.m-app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--ground);display:flex;flex-direction:column;color:var(--ink);}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ───────── ヘッダー（アプリと同じく白地・ロゴを中央） ───────── */
.m-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px;
  padding:calc(var(--safe-t) + 4px) 8px 4px;background:#fff;position:sticky;top:0;z-index:10;}
.m-header .t{grid-column:2;display:flex;align-items:center;}
.m-header .t img{display:block;height:28px;width:auto;}
.m-back{grid-column:1;justify-self:start;width:44px;height:44px;border:0;background:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--shu);cursor:pointer;padding:0;}
.m-back:active{background:var(--shu-tint);}
/* ログイン状態。ログイン中だけ出す。押すとマイページへ移る */
.m-me{grid-column:3;justify-self:end;border:0;background:var(--shu-tint);color:var(--shu-deep);border-radius:18px;
  min-height:36px;padding:4px 12px 4px 9px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;gap:5px;max-width:100%;white-space:nowrap;}
.m-me:active{filter:brightness(.95);}
.m-me .nm{overflow:hidden;text-overflow:ellipsis;}

/* ───────── 本文 ───────── */
.m-body{flex:1;padding:16px 16px calc(24px + var(--safe-b));}
.m-view{display:none;}
.m-view.active{display:block;}
.m-h{font-size:18px;font-weight:700;line-height:1.45;margin:2px 0 6px;letter-spacing:.02em;}
.m-sub{font-size:13px;color:var(--ink-60);margin-bottom:16px;line-height:1.7;}
.m-sub a{color:var(--shu);font-weight:700;}

/* カード（アプリの .block） */
.m-card,.m-block{background:#fff;border:0;border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:14px;}
.m-bh{font-size:15px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:7px;line-height:1.4;}
.m-bh .hi{width:24px;height:24px;border-radius:50%;background:var(--shu-tint);color:var(--shu);display:inline-flex;align-items:center;justify-content:center;flex:none;}

/* 一覧の行（アプリの「メニュー・設定」の行。トップ画面の予約メニューに使う） */
.m-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:13px 0;border:0;border-bottom:1px solid var(--rule);
  background:none;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer;text-decoration:none;}
.m-row:last-child{border-bottom:0;}
.m-row:active{opacity:.7;}
.m-row .ci{width:44px;height:44px;border-radius:50%;background:var(--shu-tint);display:flex;align-items:center;justify-content:center;flex:none;}
.m-row .bd{flex:1;min-width:0;}
.m-row .bd b{display:block;font-size:15px;font-weight:700;line-height:1.45;}
.m-row .bd span{display:block;font-size:12px;color:var(--ink-60);margin-top:2px;line-height:1.55;}
.m-row .chev{color:var(--shu);flex:none;display:flex;}
.m-row.plain{min-height:52px;}

/* トップの予約メニュー（2026-10-26 案B）
 *   「以前の色つきのボタンのほうが分かりやすかった」というご指摘により、
 *   行の形（アイコン・名称・補足文・矢印）は残したまま、1行ずつ色で塗ったボタンにした。
 *   御開帳祈祷・大般若祈祷はロゴの朱、月下祈祷は夜の紺 */
.m-menu{margin-bottom:14px;}
.m-menu .m-row{min-height:64px;padding:12px 14px;margin-bottom:10px;border:0;border-radius:var(--r);
  background:var(--shu);color:#fff;box-shadow:var(--shadow);}
.m-menu .m-row.night{background:var(--night);}
.m-menu .m-row .ci{background:#fff;}
.m-menu .m-row .bd span,.m-menu .m-row .chev{color:rgba(255,255,255,.9);}
.m-menu .m-link{width:100%;justify-content:center;}
.m-row.plain .bd b{font-weight:400;}

/* ───────── ボタン（アプリと同じく丸みの強い帯） ───────── */
.m-btn{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;min-height:48px;padding:11px 16px;
  border-radius:24px;border:0;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:12px;line-height:1.45;}
/* 2026-10-26 グラデーションをやめ、ロゴの朱の単色にした（案B） */
.m-btn-primary{background:var(--shu);color:#fff;}
.m-btn-primary:active{opacity:.85;}
.m-btn-primary:disabled{opacity:.45;}
.m-btn-outline{background:#fff;color:var(--ink);border:1px solid var(--field);}
.m-btn-outline:active{background:var(--box);}
.m-link{color:var(--shu);text-decoration:none;background:none;border:none;font-size:15px;cursor:pointer;font-family:inherit;
  padding:8px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.m-block > .m-link{font-size:14px;}
.m-links{display:flex;flex-direction:column;align-items:center;margin-top:6px;}

/* 日・時間・種別の選択（白いカードを縦に並べる） */
.m-list-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:56px;padding:14px 16px;
  border-radius:12px;border:0;background:#fff;box-shadow:var(--shadow);font-size:16px;font-weight:700;color:var(--ink);
  cursor:pointer;margin-bottom:10px;font-family:inherit;text-align:left;}
.m-list-btn:active{background:var(--box);}
.m-list-btn.sel{outline:2px solid var(--shu);}
/* 満員の日・時間。2026-10-26 地色をグレーにしたところ、mobile.js の opacity:.4 では枠が地色に溶けて見えなくなったため、
 * 透明にせず、薄い灰色の面と枠線で「選べない」ことを示す */
.m-list-btn[disabled]{opacity:1 !important;background:#ECEEF1;box-shadow:inset 0 0 0 1px #DADDE2;color:#8E949C;cursor:default;}
.m-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:11px;white-space:nowrap;flex:none;}
.m-badge.is-low{background:#E6F2E8;color:#2F6E3A;}
.m-badge.is-mid{background:#FBF0D6;color:#8A5A00;}
.m-badge.is-high{background:var(--shu-tint);color:var(--shu-deep);}

/* ───────── 入力欄（アプリのフォームと同じ） ───────── */
.m-field{margin-bottom:14px;}
.m-field label{display:block;font-size:12px;font-weight:700;color:var(--ink-60);margin-bottom:4px;}
.m-field .req{color:var(--shu);font-size:11px;margin-left:4px;}
.m-field .opt{color:var(--ink-38);font-size:11px;margin-left:4px;}
.m-input{width:100%;padding:11px 12px;border:1px solid var(--field);border-radius:8px;font-size:16px;font-family:inherit;
  color:var(--ink);background:#fff;outline:none;}
.m-input:focus{border-color:var(--shu);}
.m-input::placeholder{color:#A9AEB5;}
.m-input.err{border-color:var(--shu-deep);background:#FFF6F3;}
.m-err{color:var(--shu-deep);font-size:13px;font-weight:700;min-height:18px;margin:4px 0;}
.m-ferr{color:var(--shu-deep);font-size:12px;line-height:1.5;margin-top:5px;min-height:0;}
.m-hint{color:var(--ink-60);font-size:11px;line-height:1.6;margin-top:4px;}

/* 人数の増減 */
.m-step-row{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:15px;}
.m-counter{display:flex;align-items:center;gap:12px;margin-left:auto;}
.m-counter button{width:40px;height:40px;border-radius:50%;border:1px solid var(--field);background:#fff;color:var(--shu);
  font-size:20px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;}
.m-counter button:active{background:var(--shu-tint);}
.m-counter button:disabled{opacity:.35;}
.m-counter .v{min-width:24px;text-align:center;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;}

/* 御祈祷者ごとの入力 */
.m-part{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:14px 16px 2px;margin-bottom:12px;}
.m-part-title{font-weight:700;font-size:14px;color:var(--shu);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.m-part-title::before{content:"";width:14px;height:2px;background:var(--accent);flex:none;}

/* 料金（アプリの小さな枠） */
.m-fee{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 16px 14px;margin-top:8px;}
.m-fee:empty{display:none;}
.m-fee-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;color:var(--ink-60);}
.m-fee-total{display:flex;justify-content:space-between;gap:10px;font-size:17px;font-weight:700;border-top:1px dashed #DDD6CE;margin-top:8px;padding-top:9px;}
.m-fee-total > :last-child{color:var(--shu);font-variant-numeric:tabular-nums;}

/* ログイン中のアカウント */
.m-account-box{display:block;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px;font-size:14px;line-height:1.8;}
.m-account-mail{font-size:12px;color:var(--ink-60);}

/* 確認画面の項目 */
.m-summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;}
.m-summary-row:last-child{border-bottom:0;}
.m-summary-row .k{color:var(--ink-60);flex:none;}
.m-summary-row .v{font-weight:700;text-align:right;min-width:0;}

/* ───────── 完了画面（アプリの受付票カード） ───────── */
.m-done-card{border-radius:12px;padding:16px 18px 18px;margin-bottom:14px;color:#fff;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#D44A1B 0%,#C03200 60%,#A92C00 100%);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 4px 12px rgba(192,50,0,.2);}
.m-done-card::after{content:"";position:absolute;right:-36px;top:-36px;width:160px;height:160px;border-radius:50%;border:22px solid rgba(255,255,255,.08);pointer-events:none;}
.m-done-card .cap{display:block;font-size:15px;font-weight:700;position:relative;}
.m-done-card .lb{display:block;font-size:11px;font-weight:700;opacity:.85;margin-top:12px;position:relative;}
.m-ticket-no{font-size:44px;line-height:1.15;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;position:relative;color:#fff;}
.m-done-note{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;font-size:13px;line-height:1.85;color:var(--ink);margin-top:14px;}
.m-mail-preview{background:var(--box);border-radius:10px;padding:14px;font-size:12px;white-space:pre-wrap;color:var(--ink-60);margin-top:12px;line-height:1.6;}
.m-mail-preview:empty{display:none;}

/* ───────── マイページ ───────── */
.m-status-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:11px;white-space:nowrap;}
.m-status-reserved{background:var(--box);color:var(--ink-60);}
.m-status-waiting{background:var(--shu-tint);color:var(--shu);}
.m-status-called{background:var(--shu);color:#fff;animation:mpulse 1.2s infinite;}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.6}}
.m-call-alert{background:linear-gradient(135deg,#454341 0%,#2B2B2B 100%);color:#fff;border-radius:12px;padding:16px;text-align:center;margin-bottom:14px;font-size:13px;font-weight:700;}
.m-call-alert .big{font-size:20px;font-weight:700;margin-top:4px;}
.m-logout{display:flex;align-items:center;justify-content:center;width:100%;margin:18px 0 4px;min-height:50px;border-radius:25px;border:0;
  background:#fff;font-size:16px;font-weight:700;color:var(--ink-60);font-family:inherit;cursor:pointer;}

/* 公式LINEへのご案内（予約完了画面・マイページ）。予約導線と競合しないよう、余白を空けて別ブロックに置く */
.m-line-box{margin:24px 0 8px;padding:16px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);}
.m-line-title{font-size:15px;font-weight:700;margin-bottom:8px;}
.m-line-lead{font-size:13px;line-height:1.85;color:var(--ink-60);margin-bottom:14px;}
.m-line-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:#06C755;color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:12px 16px;border-radius:24px;}
.m-line-btn:active{opacity:.85;}
.m-line-mark{background:#fff;color:#06C755;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.04em;}

/* ───────── フッター ───────── */
.m-footer{padding:6px 16px calc(20px + var(--safe-b));background:var(--ground);}
.m-footer .m-block{padding:4px 16px;margin-bottom:10px;}
.m-footer-sub{font-size:11px;color:var(--ink-38);text-align:center;margin-top:4px;}

@media (prefers-reduced-motion:reduce){.m-status-called{animation:none;}}

/* マイページの御膳（お斎）と代わりの品（2026-10-26 R32） */
.m-meal-box{padding:12px 0 4px;border-bottom:1px solid var(--rule);}
/* マイページの「ご予約の内容を変更する」と変更画面（2026-11-03） */
.m-edit-btn{margin-top:12px;}
.m-edit-note{margin:6px 0 0;font-size:12px;}
.m-edit-cancel{margin-top:10px;}
.m-meal-head{font-size:14px;color:var(--ink-60);margin-bottom:6px;}
.m-meal-person{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.m-meal-name{font-size:13px;font-weight:700;}
.m-meal-sel{width:100%;font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--field);border-radius:8px;background:#fff;color:inherit;}
.m-meal-note{margin:2px 0 8px;font-size:12px;}
.m-meal-save{margin:0 0 6px;}