@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* OKUNO予約システム スタイル
   公式サイト https://okuno.space/ のデザイン（モノトーン基調・余白広め・
   Noto Sans JP・白地に細いグレー罫線の表）に合わせています。
   空き状況カレンダーの色分け（緑=空き／黄=一部／赤=満室）は、予約ミス防止の
   機能的な意味を持つため、サイトのモノトーン基調の中でも意図的に残しています。 */

:root {
  --okuno-bg: #f7f7f7;
  --okuno-text: #000;
  --okuno-muted: #767676;
  --okuno-line: #ccc;
  --okuno-line-light: #e5e5e5;
  --okuno-head-bg: #eee;
}

* { box-sizing: border-box; }

body {
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Arial, sans-serif;
  background: var(--okuno-bg);
  color: var(--okuno-text);
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 96px;
}
/* 管理画面など、表形式のデータを一覧表示するページ用の広いコンテナ幅
   （通常の.containerはスマホでの予約フォーム向けに抑えているため、
   予約一覧のような列数の多い表がこれだと窮屈になり見づらくなるための対応） */
.container-wide { max-width: 1400px; }

/* ---------- ヘッダー ---------- */
header.site-header {
  background: #fff;
  color: var(--okuno-text);
  padding: 22px 24px;
  border-bottom: 1px solid var(--okuno-line-light);
}
header.site-header a {
  color: var(--okuno-text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
header.site-header nav a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--okuno-muted);
}
header.site-header nav a:hover { color: var(--okuno-text); }

/* ---------- 見出し ---------- */
h1, h2, h3 {
  color: var(--okuno-text);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
h1 {
  font-size: 22px;
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--okuno-line-light);
}
h2 { font-size: 17px; margin: 32px 0 14px; }
h3 { font-size: 15px; margin: 24px 0 10px; }

/* ---------- カード ---------- */
.card {
  background: #fff;
  border: 1px solid var(--okuno-line-light);
  padding: 32px 28px;
  margin-bottom: 24px;
}

/* ---------- フォーム ---------- */
label {
  display: block;
  margin: 20px 0 8px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
}
select, input[type=text], input[type=email], input[type=tel], input[type=date] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--okuno-line);
  border-radius: 0;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: var(--okuno-text);
}
select:focus, input:focus { outline: 1px solid var(--okuno-text); outline-offset: -1px; }
.radio-row { margin: 10px 0; }
.radio-row label { display: inline; margin: 0; font-weight: 400; font-size: 15px; letter-spacing: 0; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  background: var(--okuno-text);
  color: #fff;
  border: 1px solid var(--okuno-text);
  padding: 13px 32px;
  border-radius: 0;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.12em;
  cursor: pointer;
  text-decoration: none;
  margin-top: 24px;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.72; }
.btn:disabled { background: #c8c8c8; border-color: #c8c8c8; cursor: not-allowed; opacity: 1; }
.btn.secondary {
  background: #fff;
  color: var(--okuno-text);
  border: 1px solid var(--okuno-line);
}
.btn.secondary:hover { background: #f2f2f2; opacity: 1; }
/* .btn.secondary は .btn:disabled より後に定義されるため、無効時の見た目を明示しておく
   （「−1時間」ボタンなど、押せない状態が一目で分かるようにするため） */
.btn.secondary:disabled { background: #f2f2f2; color: #b0b0b0; border-color: #e0e0e0; cursor: not-allowed; }
.btn.secondary:disabled:hover { background: #f2f2f2; }

/* ---------- 料金・通知ボックス ---------- */
.price-box {
  background: #fff;
  border: 1px solid var(--okuno-line);
  padding: 18px;
  font-size: 16px;
  margin: 18px 0;
}
/* 特に見落とされたくない注意書き（振込手数料のご負担など）。
   モノトーン基調のまま目立たせるため、太い黒枠で囲む。 */
.alert-strong {
  background: #fff;
  border: 2px solid var(--okuno-text);
  padding: 14px 16px;
  margin: 16px 0;
  font-weight: 500;
  font-size: 14px;
}

.error {
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f5c6c1;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14px;
}
.notice {
  color: #1d1d1d;
  background: #fff;
  border: 1px solid var(--okuno-text);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14px;
}

/* ---------- 表 ---------- */
table.simple {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: #fff;
  border: 1px solid var(--okuno-line);
}
table.simple th, table.simple td {
  border: 1px solid var(--okuno-line);
  padding: 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 400;
}
table.simple th {
  background: var(--okuno-head-bg);
  color: var(--okuno-text);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.04em;
}

footer {
  text-align: center;
  color: var(--okuno-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 32px 0;
}

/* ---------- 空き状況カレンダー ---------- */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }
.cal-header .cal-nav-btn {
  background: #fff; border: 1px solid var(--okuno-line); border-radius: 0;
  padding: 7px 16px; cursor: pointer; font-size: 13px; font-family: inherit;
  letter-spacing: 0.06em;
}
.cal-header .cal-nav-btn:hover { background: #f0f0f0; }
.cal-title { font-weight: 500; font-size: 15px; letter-spacing: 0.08em; }

table.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
table.cal-grid th { padding: 8px 2px; font-size: 11px; color: var(--okuno-muted); text-align: center; font-weight: 400; letter-spacing: 0.06em; }
table.cal-grid td { border: 1px solid var(--okuno-line-light); height: 54px; vertical-align: top; padding: 5px; font-size: 12px; cursor: pointer; }
table.cal-grid td.cal-empty { background: #fafafa; cursor: default; }
table.cal-grid td.cal-past { color: #ccc; cursor: default; }
table.cal-grid td .cal-daynum { font-weight: 500; }
table.cal-grid { user-select: none; } /* ドラッグ選択中に文字が選択されるのを防ぐ */

/* 空き状況の色分けは、予約の可否をひと目で判断するための機能的な表現として残している */
td.cal-available { background: #eef6e8; }
td.cal-partial { background: #fff6d9; }
td.cal-full { background: #fdecea; color: #b3261e; }
td.cal-selected { outline: 2px solid #000; outline-offset: -2px; }
td.cal-range-selected { outline: 2px solid #000; outline-offset: -2px; background: #e2e2e2 !important; }
/* カートに追加済みの日付。ドラッグ中のハイライトや空き状況の色とはっきり区別できる紫にしている */
td.cal-in-cart { background: #ede9fe !important; outline: 2px solid #6f2da8; outline-offset: -2px; }
td.cal-in-cart .cal-daynum::after { content: " ✓"; color: #6f2da8; }

.cal-legend { font-size: 11px; color: var(--okuno-muted); margin-top: 10px; letter-spacing: 0.04em; }
.cal-legend span { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: middle; border: 1px solid var(--okuno-line); }

/* ---------- 時間帯別（30分単位）の空き状況 ----------
   30分刻みにするとコマ数が倍になるため、1時間ごとの行に分けて表示する。
   左に時刻ラベル、右に「00分」「30分」の2枠を並べることで、
   横一列に並べるより目的の時間帯を探しやすくしている。 */
.cal-hourly-grid { margin-top: 10px; user-select: none; }
.cal-hour-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 4px; }
.cal-hour-label {
  flex: 0 0 52px; display: flex; align-items: center; justify-content: flex-end;
  font-size: 12px; color: var(--okuno-muted); letter-spacing: 0.04em;
}
.cal-hour-slots { display: flex; gap: 4px; flex: 1 1 auto; }
.cal-hourly-cell {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 2px;
  border-radius: 0; font-size: 11px; border: 1px solid var(--okuno-line-light);
  line-height: 1.5; display: flex; flex-direction: column; justify-content: center;
}
.cal-slot-time { font-size: 12px; }
.cal-slot-state { font-size: 10px; color: var(--okuno-muted); }
.cal-hourly-cell.cal-hour-available .cal-slot-state { color: #4a7a34; }
.cal-hourly-cell.cal-hour-booked .cal-slot-state,
.cal-hourly-cell.cal-hour-in-cart .cal-slot-state { color: inherit; }
.cal-hourly-cell.cal-hour-available { background: #eef6e8; cursor: pointer; }
.cal-hourly-cell.cal-hour-booked { background: #fdecea; color: #b3261e; cursor: not-allowed; }
.cal-hourly-cell.cal-hour-in-cart { background: #ede9fe; color: #6f2da8; outline: 2px solid #6f2da8; outline-offset: -2px; cursor: not-allowed; }
.cal-hourly-cell.cal-hour-range-selected { outline: 2px solid #000; outline-offset: -2px; background: #e2e2e2; font-weight: 500; }

/* ---------- 料金設定：ドラッグ＆ドロップでの並び替え ---------- */
table.sortable-rules tr[draggable="true"] { cursor: default; }
table.sortable-rules td.cal-drag-handle { cursor: grab; text-align: center; color: #aaa; font-size: 16px; user-select: none; }
table.sortable-rules tr.dragging { opacity: 0.4; }
table.sortable-rules tr.drag-over-top { box-shadow: inset 0 2px 0 #000; }
table.sortable-rules tr.drag-over-bottom { box-shadow: inset 0 -2px 0 #000; }

/* ---------- スマホ ---------- */
@media (max-width: 600px) {
  .container { padding: 28px 16px 64px; }
  .card { padding: 22px 18px; }
  h1 { font-size: 19px; }
  header.site-header { padding: 18px 16px; }
  header.site-header nav { float: none !important; display: block; margin-top: 10px; }
}