/* ===== 当日予約システム 共通スタイル（軽量・依存なし） ===== */
:root{
  --red:#E4322B; --ink:#1f2024; --sub:#6b6f76;
  --line:#e6e7ea; --card:#f4f4f5; --bg:#ffffff;
  --ok:#2FA36B; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",
    "Yu Gothic",Meiryo,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:480px; margin:0 auto; padding:20px 16px 40px}
.loading{padding:48px 0; text-align:center; color:var(--sub)}
.loading.light{color:#cfd2d6}

/* ---- 見出し ---- */
.eyebrow{color:var(--red); font-weight:700; font-size:13px; letter-spacing:.04em; margin:0 0 4px}
h1.title{font-size:22px; font-weight:800; margin:0 0 4px; line-height:1.3}
.muted{color:var(--sub); font-size:14px; line-height:1.6; margin:0 0 18px}

/* ---- 回の一覧（予約画面） ---- */
.slot-list{display:flex; flex-direction:column; gap:10px; margin:6px 0 20px}
.slot{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border:2px solid var(--line); border-radius:var(--radius);
  background:#fff; font-size:17px; cursor:pointer; user-select:none;
  transition:border-color .12s, background .12s;
}
.slot .t{font-weight:700}
.slot .r{font-size:14px; color:var(--red); font-weight:700}
.slot.selected{border-color:var(--red); background:#fdeceb}
.slot.disabled{background:var(--card); color:#a6aab0; cursor:not-allowed; border-color:var(--card)}
.slot.disabled .r{color:#a6aab0; font-weight:600}

/* ---- 人数ステッパー ---- */
.party{display:flex; align-items:center; gap:16px; margin:4px 0 18px}
.party .lbl{font-size:14px; color:var(--sub)}
.stepper{display:flex; align-items:center; gap:14px}
.stepper button{
  width:44px; height:44px; border-radius:50%; border:2px solid var(--line);
  background:#fff; font-size:22px; line-height:1; cursor:pointer; color:var(--ink);
}
.stepper button:disabled{opacity:.35; cursor:not-allowed}
.stepper .n{font-size:22px; font-weight:800; min-width:2.5em; text-align:center}

/* ---- ボタン ---- */
.btn{
  display:block; width:100%; padding:17px; border:0; border-radius:var(--radius);
  background:var(--red); color:#fff; font-size:17px; font-weight:800; cursor:pointer;
}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.ghost{background:#fff; color:var(--sub); border:2px solid var(--line); font-weight:700}
.linkbtn{display:block; width:100%; margin-top:14px; padding:12px; background:none;
  border:0; color:var(--sub); font-size:14px; text-decoration:underline; cursor:pointer}

/* ---- 整理券 ---- */
.ticket{border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.06)}
.ticket .band{
  /* 背景色はJSで「本日の色」に */
  color:#fff; padding:12px 16px; display:flex; justify-content:space-between;
  align-items:center; font-size:14px; font-weight:700;
}
.ticket .band .clock{font-variant-numeric:tabular-nums; letter-spacing:.02em}
.ticket .body{padding:26px 20px 24px; text-align:center}
.ticket .cap{color:var(--sub); font-size:14px; margin:0 0 2px}
.ticket .big{font-size:64px; font-weight:800; line-height:1; margin:2px 0 10px; font-variant-numeric:tabular-nums}
.ticket .meta{font-size:16px; margin:0 0 18px}
.ticket .meta b{font-weight:800}
.pill{
  display:inline-block; padding:12px 22px; border-radius:999px;
  background:#fdeceb; color:var(--red); font-weight:800; font-size:17px;
}
.pill.now{background:var(--red); color:#fff}
.ticket .note{color:var(--sub); font-size:13px; margin:16px 0 0}

/* ---- 受付終了・情報カード ---- */
.notice{
  text-align:center; padding:40px 20px; border-radius:var(--radius);
  background:var(--card); color:var(--ink);
}
.notice h2{font-size:20px; margin:0 0 8px}
.notice p{color:var(--sub); font-size:14px; margin:0}

/* ================= 管理画面 ================= */
.admin .cards{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0 18px}
.admin .card{background:var(--card); border-radius:14px; padding:14px}
.admin .card .k{font-size:12px; color:var(--sub); margin:0 0 4px}
.admin .card .v{font-size:26px; font-weight:800}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px}
.cell{
  border:1px solid var(--line); border-radius:10px; padding:8px 6px; text-align:center;
  cursor:pointer; background:#fff;
}
.cell .ct{font-weight:700; font-size:15px}
.cell .cn{font-size:12px; color:var(--sub)}
.cell.full{background:#fdeceb}
.cell.paused{background:#fff6e5; border-color:#f0d9a8}
.cell.past{opacity:.4}
.panel{border:2px solid var(--red); border-radius:14px; padding:16px; margin:14px 0}
.panel h3{margin:0 0 12px; font-size:17px}
.row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.row .btn{width:auto; flex:1; padding:12px; font-size:14px}
.field{display:flex; flex-direction:column; gap:4px; margin-bottom:10px}
.field label{font-size:13px; color:var(--sub)}
.field input{padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:16px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#1f2024; color:#fff; padding:12px 18px; border-radius:999px; font-size:14px;
  opacity:0; transition:opacity .2s; pointer-events:none; z-index:9}
.toast.show{opacity:1}
details.settings{margin-top:18px; border-top:1px solid var(--line); padding-top:14px}
details.settings summary{cursor:pointer; color:var(--sub); font-size:14px}

/* ================= サイネージ ================= */
.signage-body{background:#17181c}
.signage{min-height:100vh; display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center; padding:24px}
.signage .inner{max-width:900px; width:100%}
.signage .now-label{font-size:28px; color:#c9ccd2; margin:0 0 8px}
.signage .now-time{font-size:150px; font-weight:800; line-height:1; margin:0 0 40px;
  font-variant-numeric:tabular-nums}
.signage .next-label{font-size:26px; color:#c9ccd2; margin:0 0 6px}
.signage .next-time{font-size:96px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.signage .top{position:fixed; top:20px; left:0; right:0; display:flex;
  justify-content:space-between; padding:0 28px; font-size:20px; color:#c9ccd2}
.signage .top .clock{font-variant-numeric:tabular-nums}
.signage .closed{font-size:64px; font-weight:800}
.signage .closed small{display:block; font-size:26px; color:#c9ccd2; font-weight:600; margin-top:16px}

@media (max-width:380px){
  .ticket .big{font-size:54px}
}