/* ============================================================
   共通スタイル（公開ページ・管理画面のどちらでも使います）
   ============================================================ */

:root{
  /* 色 */
  --bg:#FAF7F2;
  --bg-soft:#F3EDE4;
  --surface:#FFFFFF;
  --ink:#211C17;
  --ink-2:#544A40;
  --ink-3:#7A6E63;
  --line:#E3D9CB;
  --line-strong:#CFC1AE;
  --gold:#9A6F32;
  --gold-deep:#7A5623;
  --gold-soft:#F4EADC;
  --go:#0B6B4B;
  --go-deep:#075039;
  --danger:#A32C1C;
  --danger-soft:#FBEDEA;
  --focus:#1C5FA8;

  /* 予約状況の色（文字も必ず併記します） */
  --st-open-bg:#E9F4EE;   --st-open-fg:#0B6B4B;   --st-open-bd:#B7DCC7;
  --st-few-bg:#FDF0DF;    --st-few-fg:#8A5A05;    --st-few-bd:#EFD3A6;
  --st-sold-bg:#FBEAE7;   --st-sold-fg:#A32C1C;   --st-sold-bd:#F0C5BD;
  --st-free-bg:#E8F1FA;   --st-free-fg:#1C5FA8;   --st-free-bd:#BCD5EE;
  --st-tbd-bg:#F1EDE7;    --st-tbd-fg:#63594E;    --st-tbd-bd:#DACFBF;
  --st-closed-bg:#EDEAE6; --st-closed-fg:#6B635A; --st-closed-bd:#D5CCC1;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(33,28,23,.05), 0 8px 24px rgba(33,28,23,.06);
  --shadow-lift:0 2px 6px rgba(33,28,23,.08), 0 16px 40px rgba(33,28,23,.10);
  --tap:44px;
  --maxw:760px;
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--gold-deep); }

button,input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:6px;
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:11px 18px;
  border-radius:var(--radius-sm); border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--ink);
  font-weight:700; font-size:15px; line-height:1.4;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:hover{ background:var(--bg-soft); }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; }

.btn-primary{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }

.btn-go{ background:var(--go); border-color:var(--go); color:#fff; }
.btn-go:hover{ background:var(--go-deep); border-color:var(--go-deep); }

.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover{ filter:brightness(.92); }

.btn-quiet{ background:transparent; border-color:transparent; color:var(--ink-2); font-weight:600; }
.btn-quiet:hover{ background:var(--bg-soft); }

.btn-lg{ min-height:54px; font-size:17px; padding:14px 22px; }
.btn-sm{ min-height:40px; font-size:14px; padding:8px 14px; }
.btn-block{ width:100%; }


/* ---------- しぼり込みチップ（公開・管理 共通） ---------- */
.chips{
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{ height:4px; }
.chips::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
.chip{
  flex:none; min-height:40px; padding:8px 15px;
  border-radius:999px; border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--ink-2);
  font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.chip:hover{ background:var(--bg-soft); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- 予約状況バッジ ---------- */
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 11px; border-radius:999px;
  font-size:13px; font-weight:700; line-height:1.6;
  border:1.5px solid transparent; white-space:nowrap;
}
.status::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.status.open  { background:var(--st-open-bg);   color:var(--st-open-fg);   border-color:var(--st-open-bd); }
.status.few   { background:var(--st-few-bg);    color:var(--st-few-fg);    border-color:var(--st-few-bd); }
.status.sold  { background:var(--st-sold-bg);   color:var(--st-sold-fg);   border-color:var(--st-sold-bd); }
.status.free  { background:var(--st-free-bg);   color:var(--st-free-fg);   border-color:var(--st-free-bd); }
.status.tbd   { background:var(--st-tbd-bg);    color:var(--st-tbd-fg);    border-color:var(--st-tbd-bd); }
.status.closed{ background:var(--st-closed-bg); color:var(--st-closed-fg); border-color:var(--st-closed-bd); }

/* ---------- お知らせ（トースト） ---------- */
.toast-area{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:120; width:min(560px, calc(100vw - 24px));
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:var(--ink); color:#fff;
  border-radius:12px; padding:13px 16px;
  box-shadow:var(--shadow-lift);
  display:flex; align-items:center; gap:12px;
  font-size:15px; font-weight:600;
  animation:toast-in .2s ease-out;
}
.toast.ok{ background:#12503B; }
.toast.err{ background:#7E2618; }
.toast .toast-action{
  margin-left:auto; background:rgba(255,255,255,.16); color:#fff;
  border:1.5px solid rgba(255,255,255,.5); border-radius:8px;
  padding:7px 12px; font-weight:700; cursor:pointer; min-height:38px; white-space:nowrap;
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ---------- モーダル ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:150;
  background:rgba(33,28,23,.5);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
}
.modal{
  background:var(--surface); width:100%; max-width:520px;
  border-radius:18px 18px 0 0; padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lift);
  max-height:92vh; overflow:auto;
  animation:sheet-in .18s ease-out;
}
@keyframes sheet-in{ from{ transform:translateY(18px); opacity:.6;} to{ transform:none; opacity:1;} }
.modal h2{ margin:0 0 10px; font-size:19px; font-family:var(--font-sans); }
.modal p{ margin:0 0 18px; color:var(--ink-2); font-size:15px; }
.modal-actions{ display:flex; flex-direction:column; gap:10px; }
@media (min-width:560px){
  .modal-backdrop{ align-items:center; padding:20px; }
  .modal{ border-radius:18px; }
  .modal-actions{ flex-direction:row-reverse; }
  .modal-actions .btn{ flex:1; }
}

/* ---------- 読み込み中 ---------- */
.spinner{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:2.5px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.loading-block{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:48px 16px; color:var(--ink-3); font-weight:600;
}

/* ---------- エラー表示 ---------- */
.error-block{
  background:var(--danger-soft); border:1.5px solid #EFC9C1;
  color:#7E2618; border-radius:var(--radius);
  padding:18px; margin:16px 0; text-align:center;
}
.error-block p{ margin:0 0 14px; font-weight:600; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}