/* ── 予約ナビ（前日/今日/翌日） ───────────────────────── */
.psj-nav{
  margin:8px 0 6px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.psj-btn{
  padding:6px 12px;
  border-radius:8px;
  border:1px solid #333;
  background:#fff;
  color:#333;
  cursor:pointer;
}
.psj-btn.primary{
  background:#333;
  color:#fff;
}

/* ── 凡例 ─────────────────────────────────────────── */
.psj-legend{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
}
.psj-legend .box{
  display:inline-block;
  width:22px; height:14px;
  border:1px solid #bbb;
  vertical-align:middle;
}
.psj-legend .box.free   { background:#fff; }
.psj-legend .box.booked { background:#f7b6b6; }
.psj-legend .box.closed { background:#d7d7d7; }

/*（任意）スマホで折り返しやすく */
@media (max-width: 480px){
  .psj-legend{ margin-left:0; }
}

/* ─ 表（A〜D × 3時間ブロック）──────────────────── */
.psj-matrix-wrap{margin:16px 0 8px}
.psj-matrix{width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px}
.psj-matrix th,.psj-matrix td{border:1px solid #e5e5e5; text-align:center; padding:10px 4px}
.psj-matrix thead th{background:#fafafa; font-weight:700}
.psj-matrix .room{font-weight:700; background:#fcfcfc; width:100px}
.psj-matrix .slot{cursor:default}
.psj-matrix .slot .mark{font-size:18px; line-height:1}
.psj-matrix .slot.is-free{cursor:pointer}
.psj-matrix .slot.is-free .mark{color:#14a514}   /* ◎の色 */
.psj-matrix .slot.is-busy .mark{color:#bbb}      /* ×の色 */
.psj-matrix .slot.is-closed{color:#aaa}          /* 終了 */
.psj-hint{font-size:12px; color:#666; margin:6px 0 0}

/* ——— コントロール —— */
.psj{margin:8px 0 24px}
.psj-controls{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.psj-btn{padding:6px 10px;border:1px solid #ccc;background:#fff;border-radius:6px;cursor:pointer}
.psj-date{height:34px;padding:4px 8px;border:1px solid #ccc;border-radius:6px}

/* ——— 表組 —— */
.psj-grid-wrap{overflow-x:auto;border:1px solid #e3e3e3;border-radius:8px}
.psj-caption{padding:10px 12px;font-weight:600;border-bottom:1px solid #eee}
.psj-table{min-width:1080px}
.psj-timehead,.psj-row{
  display:grid;grid-template-columns:160px repeat(30, 1fr); /* 9:00→24:00=15h × 30分 = 30列 */
  gap:2px
}
.psj-timehead span,.psj-cell{font-size:12px;line-height:30px;text-align:center}
.psj-timehead{position:sticky;top:0;background:#fafafa;z-index:1;border-bottom:1px solid #eee}
.psj-room{background:#f7f7f7;padding:0 8px;display:flex;align-items:center;font-weight:600;position:sticky;left:0;z-index:1}
.psj-row>.psj-room{background:#fff;border-right:1px solid #eee}
.psj-cell{background:#f7f7f7;color:#222}
.psj-cell.free{background:#fff;cursor:pointer}
.psj-cell.free:hover{background:#eaf8f0}
.psj-cell.booked{background:#ffe3e3;color:#aa5555}
.psj-cell.closed{background:#ececec;color:#888}
.psj-mark{font-size:14px}

/* ——— 凡例 —— */
.psj-legend{display:flex;gap:14px;margin:8px 12px 12px;font-size:12px;color:#555}
.psj-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.psj-dot.free{background:#80d4a4}
.psj-dot.booked{background:#ee9b9b}
.psj-dot.closed{background:#bbb}

/* ——— Amelia 標準フォームは隠す（表だけにしたい場合）—— */
/* 必要ならコメントアウト ↓ */
.amelia-app-booking .am-step-booking, amelia-app-booking{display:block}

/* 続行ボタンを隠す */
.am-step-booking .am-button-wrapper .el-button#am-continue-button {
  display: none !important;
}

/* もしカタログなど別フォームにも続行がある場合の予防 */
.am-step-booking .am-continue-button {
  display: none !important;
}