/* StayFlow — MinimaGuideと同じデザイントーン */
:root {
  --bg: #f9f7f4;
  --card: #ffffff;
  --primary: #2d2d2d;
  --accent: #c8a97e;
  --accent-dark: #a8895e;
  --muted: #888;
  --ok: #2e7d32;
  --warn-bg: #fff7e6;
  --warn-border: #e6c37a;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px;
}
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 480px; width: 100%; padding: 32px 24px; text-align: center;
}
.logo { font-size: 20px; font-weight: 700; letter-spacing: 0.15em; color: var(--primary); margin-bottom: 20px; }
.logo span { color: var(--accent); }
h1 { font-size: 18px; margin-bottom: 8px; color: var(--primary); }
h2 { font-size: 18px; margin-bottom: 8px; color: var(--primary); }
.muted { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.error-msg { color: #b3261e; font-size: 14px; padding: 16px 0; }
.ok-msg { color: var(--ok); font-weight: 600; margin-top: 12px; }

/* ステップバー */
.stepbar { display: flex; justify-content: space-between; margin-bottom: 20px; gap: 4px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.step .dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #eee; color: #999; font-size: 13px; font-weight: 600;
}
.step .lbl { font-size: 10px; color: var(--muted); }
.step.done .dot { background: var(--ok); color: #fff; }
.step.done .dot::before { content: '✓'; }
.step.done .dot { font-size: 0; } .step.done .dot::before { font-size: 14px; }
.step.active .dot { background: var(--accent); color: #fff; }
.step.active .lbl { color: var(--accent-dark); font-weight: 600; }

.booking-summary {
  background: #f5f5f5; border-radius: 8px; padding: 10px 12px; font-size: 13px;
  color: var(--primary); margin-bottom: 16px; line-height: 1.6;
}

/* 言語選択 */
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.lang-btn {
  border: 2px solid #e8e8e8; border-radius: 8px; padding: 14px 8px; background: none; cursor: pointer;
  font-size: 14px; color: var(--primary); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lang-btn .flag { font-size: 24px; }
.lang-btn:hover { border-color: var(--accent); background: #fdf8f2; }

/* ボタン */
.btn {
  border: 2px solid #e0e0e0; background: #fff; color: var(--primary);
  border-radius: 8px; padding: 12px 20px; font-size: 15px; cursor: pointer; margin-top: 8px;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger { background: #d33; border-color: #d33; color: #fff; }
.btn.big { font-size: 17px; padding: 16px 32px; width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* 音声プレイヤー */
.audio-player { background: #f5f5f5; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.audio-icon { font-size: 36px; margin-bottom: 10px; }
.progress-wrap { background: #ddd; border-radius: 4px; height: 6px; margin-bottom: 6px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); width: 0%; transition: width 0.5s linear; }
.time-display { font-size: 12px; margin-bottom: 8px; }
.consent-text {
  text-align: left; font-size: 13px; line-height: 1.8; background: #fdf8f2;
  border: 1px solid #f0e2cc; border-radius: 8px; padding: 14px; margin-bottom: 12px; white-space: pre-line;
}

/* フォーム */
.field { text-align: left; margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.field input[type="text"], .field input[type="tel"], .field textarea {
  width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px;
}
.field textarea { min-height: 64px; }
.guest-block { border: 1px solid #eee; border-radius: 10px; padding: 14px; margin: 14px 0; text-align: left; }
.guest-block h3 { font-size: 14px; color: var(--accent-dark); margin-bottom: 10px; }
.guest-block.saved { border-color: var(--ok); background: #f6fbf6; }
.radio-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.radio-row label { font-weight: normal; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.file-label {
  display: block; border: 2px dashed #ccc; border-radius: 8px; padding: 14px; text-align: center;
  font-size: 14px; color: var(--muted); cursor: pointer; margin-bottom: 10px;
}
.file-label.has-file { border-color: var(--ok); color: var(--ok); }
.file-label input { display: none; }

/* 録画 */
.video-wrap { position: relative; margin-bottom: 8px; }
.video-wrap video { width: 100%; border-radius: 10px; background: #111; aspect-ratio: 3/4; object-fit: cover; }
.rec-indicator {
  position: absolute; top: 10px; left: 10px; color: #fff; background: rgba(211,51,51,0.9);
  border-radius: 6px; padding: 4px 10px; font-size: 14px; font-weight: 700;
}

/* バナー・キー情報 */
.banner { border-radius: 8px; padding: 12px; font-size: 13px; margin-bottom: 12px; text-align: left; }
.banner.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: #7a5c00; }
.key-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.key-table td { padding: 10px 8px; border-bottom: 1px solid #eee; font-size: 14px; text-align: left; }
.key-table td:first-child { color: var(--muted); width: 42%; }
.key-table td:last-child { font-weight: 700; font-size: 16px; letter-spacing: 0.05em; }