:root{
  --bg:#ffffff; --ink:#0b1a33; --muted:#5f6b7a;
  --card:#ffffff; --line:#e4e8f0;
  --accent:#2f72ff; --ok:#138a45; --err:#c0392b;

  --avail:#138a45; --busy:#bc8b00; --full:#c0392b; --closed:#7a7a7a; --ended:#7a7a7a;

  --input-bg:#fff; --input-bd:#cdd6e3; --input-bd-focus:#2f72ff;
  --chip-bg:#f5f8ff; --chip-bd:#dbe6ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height:1.6;
}
.site-header{
  padding:18px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92);
  backdrop-filter: blur(6px); z-index:5;
}
.site-header h1{ margin:0 0 4px; font-size:20px; }
.lead{ margin:0; color:var(--muted); font-size:13px; }

.wrap{ max-width:1000px; margin:0 auto; padding:18px 16px; display:grid; gap:14px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }

.card h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.35rem;
  color: #1e293b;
  background: linear-gradient(to right, rgba(30, 58, 138, 0.08), transparent);
  border-left: 6px solid #2f72ff; /* var(--accent) でも可 */
  border-bottom: 1px solid #e2e8f0;
  padding: 0.8rem 1.2rem;
  border-radius: 4px 0 0 4px;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.muted{ color:var(--muted); font-size:13px; }

/* グリッド */
.grid-2 { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 12px; 
  align-items: end; /* ★左右でラベルの行数が違っても、入力枠の下端を揃えます */
}
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:840px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
}

/* 入力 */
.field { 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; /* ★ラベルの長さに左右されず、中身を下に寄せます */
  height: 100%; 
}

.field label { 
  display: block; 
  font-size: 13px; 
  color: var(--muted); 
  margin: 6px 0 6px; 
  line-height: 1.4; /* 行間を整えて視認性を向上 */
}
.note{ display:block; font-size:11px; color:#6b7da1; margin-top:4px; }

input, select, textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--input-bd);
  background:var(--input-bg);
  color:var(--ink);
  border-radius:12px;
  font-size:16px;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--input-bd-focus);
  box-shadow:0 0 0 3px rgba(47,114,255,.12);
}
input[type="date"], input[type="time"]{ padding-right:36px; }

/* ボタン */
.actions{ display:flex; gap:10px; align-items:center; }
.btn-primary{
  appearance:none; border:1px solid #1d54dd; border-radius:12px;
  padding:12px 18px; font-weight:700; font-size:15px;
  color:#fff; background:var(--accent); cursor:pointer;
}
.btn-ghost{
  appearance:none; border:1px solid var(--line); border-radius:10px; background:#fff; color:#1b2a44;
  padding:6px 10px; cursor:pointer;
}

/* =========================
   カレンダー基礎
========================= */

.calbar{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.month-label{ font-weight:700; }

/* 伝説（空車 / 満車等） */
.legend{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:3px 8px;
  border-radius:999px; border:1px solid var(--line);
  background:var(--chip-bg);
}
.badge.avail::before{ content:"●"; color:var(--avail); }
.badge.busy::before{ content:"●"; color:var(--busy); }
.badge.full::before{ content:"●"; color:var(--full); }
.badge.closed::before{ content:"●"; color:var(--closed); }
.badge.ended::before{ content:"●"; color:var(--ended); }

/* カレンダー本体 */
.calendar{
  position:relative;
  display:grid; grid-template-columns: repeat(7,1fr);
  gap:6px; border-top:1px solid var(--line); padding-top:10px;
  user-select:none;
}
.cal-head{ text-align:center; font-size:12px; color:var(--muted); }

/* =========================
   日付セルデザイン
========================= */
.day{
  border:1px solid var(--line); border-radius:12px;
  padding:6px 4px 28px; /* 下に帯のスペース確保 */
  min-height:70px;
  background:#fff; position:relative; cursor:pointer;
  display:flex; flex-direction:column;
}
.day *{ pointer-events:none; }
.day.disabled{ opacity:.5; cursor:not-allowed; }

/* 日付数字 */
.day .dnum{
  font-weight:700;
  font-size:18px;
  color:#0b1a33;
  margin-bottom:4px;
}

/* =========================
   下部フル幅・カラー帯
========================= */

.tag{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  text-align:center;
  padding:4px 0;
  font-size:14px;
  font-weight:700;
  color:#fff;
  border-radius:0;
}

/* 空車（緑） */
.tag.avail{ background:#28a745; }

/* 混雑（オレンジ） */
.tag.busy{ background:#ff9800; }

/* 満車（赤） */
.tag.full{ background:#e53935; }

/* 定休日（グレー） */
.tag.closed{ background:#607d8b; }

/* 受付終了（濃灰） */
.tag.ended{ background:#424242; }

/* =========================
   選択・範囲
========================= */
.day.selected{ outline:2px solid rgba(47,114,255,.5); outline-offset:2px; }
.day.in-range{ background:#f5f8ff; border-color:#dbe6ff; }

/* 出発/到着タグ */
.pick-tag{
  position:absolute; z-index:2;
  font-size:11px; line-height:1;
  padding:4px 6px; border:1px solid var(--line);
  background:#fff; border-radius:999px; color:#1b2a44;
}
.pick-tag.start{ top:6px; right:6px; }
.pick-tag.end  { bottom:30px; right:6px; }

/* =========================
   時間スロット
========================= */
.slot-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.slot{
  border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; background:#fff;
  cursor:pointer; font-size:14px;
}
.slot.busy{ border-color:#e5b100; background:#fff8d6; }
.slot.full{ opacity:.45; cursor:not-allowed; }
.slot.selected{ outline:2px solid rgba(47,114,255,.5); }
.slot .cap{ font-size:11px; color:var(--muted); display:block; margin-top:2px; }

/* =========================
   見積り
========================= */
.estimator-host{
  border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:#fff; min-height:80px;
}
.estimator-loading{ padding:16px; color:var(--muted); }

/* メッセージ */
#formMsg{ font-size:13px; }
.msg-ok{ color:var(--ok); }
.msg-err{ color:var(--err); }

/* =========================
   モーダル
========================= */
.overlay[hidden]{ display:none; }
.overlay{
  position:fixed; inset:0; background:rgba(9,15,30,.48);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:20;
  overflow:auto;
}
.modal{
  width:min(720px, 96vw); background:#fff; border-radius:16px; border:1px solid var(--line);
  padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  max-height:92vh; overflow:auto;
}

.modal h3{ margin:0 0 8px; font-size:18px; }

/* 確認画面 */
.confirm-body{
  border:1px solid var(--line); border-radius:12px;
  padding:12px; background:#fff; margin-bottom:12px;
}
.confirm-row{ display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed #e9edf5; }
.confirm-row:last-child{ border-bottom:none; }
.confirm-key{ width:160px; color:var(--muted); font-size:13px; }
.confirm-val{ flex:1; }

/* 予約番号 */
.confirm-id{
  font-weight:700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.5px;
}

/* 完了画面 */
.done-code{ font-size:16px; }

.site-footer{
  padding:24px 16px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:12px;
}

/* =========================
   スマホ最適化
========================= */
@media (max-width:480px){
  #calendar .day{
    min-height:78px;
    padding:6px 4px 32px;
  }
  #calendar .day .dnum{
    font-size:19px;
  }
  #calendar .tag{
    font-size:13.5px;
    padding:5px 0;
  }
}

.calendar-error {
  margin-top: 6px;
  padding: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #b00000;
  background: #ffe5e5;
  border: 1px solid #ffbcbc;
  border-radius: 8px;
}

#confirmOverlay[hidden],
#doneOverlay[hidden] {
    display: none !important;
    pointer-events: none !important;
}
#confirmOverlay,
#doneOverlay {
    pointer-events: none;
}
#confirmOverlay.show,
#doneOverlay.show {
    pointer-events: auto;
}

/* ▼ Safari／スマホでのオーバーレイ操作不能バグ対策 */
#confirmOverlay.show *,
#doneOverlay.show * {
    pointer-events: auto;
}