/*
  予約アプリ（/_yoyaku/）共通CSS。
  出典: prototypes/assets/tenant-site.css を手動同期したもの（管理コンソールの
  assets/admin-custom.css が prototypes/assets/admin.css を手動同期しているのと同じ方針）。
  差分: 末尾に .banner-error / .banner-success / .field-error（予約フォームのエラー表示、
  各ページで共通に使う。ハリボテには無かったためcoderが追加）を足した。
  Tailwind CSS（CLIビルド。../assets/tailwind.css）と併用する前提。
  参照: .claude/skills/ui-style-guide/UIUX_STANDARD.md（配色・余白・タイポの基本方針）
*/

:root {
  --ink: #1c1917;
  --ink-soft: #57534e;
  --paper: #ffffff;
  --cream: #f7f4f1;
  --line: #e7e2da;
  --accent: #7c4a25;       /* 温かみのあるブラウン。白地に対し十分なコントラスト比を確保 */
  --accent-dark: #5f3a1d;
  --accent-tint: #efe2d3;
  --danger: #b3261e;
  --success: #2f6d4f;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", "Inter", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 写真プレースホルダ（外部URLを叩かない） ---------- */
.photo-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #ddd5c9 0%, #f1ece4 55%, #cabfae 100%);
  color: #6b5f52;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  overflow: hidden;
}
.photo-placeholder span {
  background: rgba(255, 255, 255, 0.72);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

/* ---------- ボタン ---------- */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  transition: background 0.15s ease;
  border: 1px solid var(--accent);
}
.btn-accent:hover { background: var(--accent-dark); }
.btn-accent:focus-visible { outline: 3px solid var(--accent-tint); outline-offset: 2px; }
.btn-accent[disabled] { background: #b9ac9b; border-color: #b9ac9b; cursor: not-allowed; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--ink); }
.btn-outline[disabled] { color: #b9ac9b; border-color: var(--line); cursor: not-allowed; }

.btn-text {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---------- ヘッダー・常設予約導線 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
}

/* ---------- カード ---------- */
.card-plain {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
}

/* ---------- 予約ステップ表示 ---------- */
.step-track {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.step-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.step-pill .num {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--ink-soft);
  background: #fff;
  flex-shrink: 0;
}
.step-pill.is-done .num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.step-pill.is-current .num {
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 700;
}
.step-pill.is-current { color: var(--ink); font-weight: 700; }
.step-line {
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 0.75rem;
}

/* ---------- バッジ（空き状況） ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.badge-open { background: #e6f0ea; color: var(--success); }
.badge-full { background: #f7e6e4; color: var(--danger); }
.badge-closed { background: #ece8e2; color: var(--ink-soft); }

/* ---------- 日付タブ ---------- */
.date-tab {
  flex: 0 0 auto;
  width: 4.2rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.5rem 0.25rem;
  text-align: center;
  background: #fff;
  color: var(--ink);
}
.date-tab .dow { font-size: 0.7rem; color: var(--ink-soft); }
.date-tab .day { font-size: 1.15rem; font-weight: 700; }
.date-tab .tag { font-size: 0.65rem; margin-top: 0.15rem; }
.date-tab.is-selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.date-tab[disabled] {
  color: #b9ac9b;
  background: var(--cream);
  cursor: not-allowed;
}

/* ---------- 15分スロットグリッド ---------- */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .slot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.slot-btn {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.55rem 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: #fff;
  color: var(--ink);
  text-align: center;
}
.slot-btn:hover { border-color: var(--accent); }
.slot-btn.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.slot-btn[disabled] {
  background: var(--cream);
  color: #b9ac9b;
  text-decoration: line-through;
  border-color: var(--line);
  cursor: not-allowed;
}

/* フォーカス可視化（キーボード操作対応） */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label:focus-within {
  outline: 3px solid var(--accent-tint);
  outline-offset: 2px;
}

input[type="text"], input[type="tel"], input[type="email"], textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }

.form-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.required-mark {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
}
.optional-mark {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--cream);
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
}

/* ---------- エラー・成功バナー、フィールドエラー（coder追加分） ---------- */
/* admin/index.html のバナー配色（#FEF2F2 / #FECACA / #991B1B、#ECFDF5 / #A7F3D0 / #065F46）と
   意図的に揃えている（管理系・予約系で同じ意味のフィードバックが別配色にならないようにする）。 */
.banner-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.banner-success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.field-error {
  color: var(--danger);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* 文字色ユーティリティ（coder追加分）。CSPのstyle-srcが'self'のみで'unsafe-inline'を
   含まない（infra/cdk/lib/delivery-stack.ts bookingCsp、DL-0217）ため、
   style="color:...'"のようなインライン属性は使わずクラスで表現する。 */
.text-color-success { color: var(--success); }
.text-color-ink-soft { color: var(--ink-soft); }
.text-color-danger { color: var(--danger); }

/* キャンセル（破壊的操作）用のボタン配色（coder追加分。理由は上記と同じ）。 */
.btn-danger-outline { color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover { border-color: var(--danger); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #9a2019; border-color: #9a2019; }

/* ---------- ローディング・非表示ステップの共通処理 ---------- */
[hidden] { display: none !important; }