/* Balance Stretch Mongolia 予約システム  スタイル */
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#22282f; --muted:#6b7580;
  --brand:#2f7d6e; --brand-dark:#25655a; --brand-soft:#e7f2ef;
  --line:#e4e8ec; --danger:#c0392b; --ok:#2f7d6e;
  --radius:14px; --shadow:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans","Noto Sans Mongolian",
    "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.6; -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px; margin:0 auto; padding:16px 16px 48px}
a{color:var(--brand-dark)}
.header{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:700; font-size:1.15rem; color:var(--brand-dark); text-decoration:none}
.langswitch a{
  display:inline-block; font-size:.82rem; padding:4px 10px; border:1px solid var(--line);
  border-radius:999px; text-decoration:none; color:var(--muted); background:#fff; margin-left:6px;
}
.langswitch a.on{background:var(--brand); color:#fff; border-color:var(--brand)}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; margin-bottom:16px}
h1{font-size:1.25rem; margin:.2em 0 .6em}
h2{font-size:1.05rem; margin:.2em 0 .8em}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ステップ表示 */
.steps{display:flex; gap:6px; margin:6px 0 18px; flex-wrap:wrap}
.steps li{list-style:none; font-size:.76rem; color:var(--muted);
  padding:4px 10px; border-radius:999px; background:#eef1f4}
.steps li.on{background:var(--brand); color:#fff}
.steps li.done{background:var(--brand-soft); color:var(--brand-dark)}

/* 選択肢リスト */
.options{display:flex; flex-direction:column; gap:10px}
.option{display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; background:#fff; border:1.5px solid var(--line);
  border-radius:12px; padding:14px 16px; cursor:pointer; font-size:1rem; color:var(--ink)}
.option:hover{border-color:var(--brand)}
.option .meta{color:var(--muted); font-size:.85rem}
.option .price{color:var(--brand-dark); font-weight:600; font-size:.9rem}

/* 時間ボタン */
.times{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:10px}
.timebtn{border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:12px 0;
  font-size:1rem; cursor:pointer; color:var(--ink)}
.timebtn:hover{border-color:var(--brand); background:var(--brand-soft)}

/* 日付ピッカー */
.dates{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; margin-bottom:8px}
.datebtn{border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:8px 0;
  text-align:center; cursor:pointer; font-size:.8rem; color:var(--ink)}
.datebtn.on{background:var(--brand); color:#fff; border-color:var(--brand)}
.datebtn .d{font-size:1.1rem; font-weight:700; display:block}
.datebtn.sun{color:var(--danger)} .datebtn.sat{color:#2b6cb0}
.datebtn.on.sun,.datebtn.on.sat{color:#fff}

/* フォーム */
label.field{display:block; margin-bottom:14px}
label.field .lab{display:block; font-size:.9rem; margin-bottom:4px; font-weight:600}
label.field .req{color:var(--danger); font-size:.75rem; margin-left:6px}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-size:1rem; background:#fff; color:var(--ink); font-family:inherit}
textarea{min-height:80px; resize:vertical}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--brand)}

/* ボタン */
.btn{display:inline-block; border:none; border-radius:10px; padding:14px 20px; font-size:1rem;
  font-weight:600; cursor:pointer; text-decoration:none; text-align:center}
.btn-primary{background:var(--brand); color:#fff; width:100%}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff; color:var(--muted); border:1.5px solid var(--line)}
.btn-danger{background:#fff; color:var(--danger); border:1.5px solid var(--danger); width:100%}
.btn-row{display:flex; gap:10px; margin-top:16px}
.btn-row .btn-ghost{flex:0 0 auto}
.btn-row .btn-primary{flex:1}

/* 確認テーブル */
.summary{width:100%; border-collapse:collapse; margin:8px 0 4px}
.summary th{text-align:left; color:var(--muted); font-weight:600; font-size:.85rem;
  padding:8px 8px 8px 0; white-space:nowrap; vertical-align:top; width:34%}
.summary td{padding:8px 0; border-bottom:1px solid var(--line)}

/* お知らせ */
.notice{background:var(--brand-soft); color:var(--brand-dark); border-radius:10px;
  padding:12px 14px; font-size:.9rem; margin:12px 0}
.error{background:#fdecea; color:var(--danger); border-radius:10px; padding:12px 14px;
  font-size:.9rem; margin:12px 0}
.badge{display:inline-block; font-size:.78rem; padding:2px 10px; border-radius:999px}
.badge.booked{background:var(--brand-soft); color:var(--brand-dark)}
.badge.cancelled{background:#f1f1f1; color:var(--muted)}
.center{text-align:center}
.big-code{font-size:1.5rem; font-weight:700; letter-spacing:2px; color:var(--brand-dark);
  background:var(--brand-soft); border-radius:10px; padding:12px; text-align:center; margin:10px 0}
.footer{text-align:center; color:var(--muted); font-size:.8rem; padding:24px 0}
.spin{color:var(--muted); padding:16px; text-align:center}