/* =============================================================
   会員アプリ（member.html）の予約の画面：日時を選ぶカレンダーを見やすくする（2026-10-04・見た目だけ）
   ★予約の決まり（空き・締切・1日1枠・先の予約・臨時の休止の×・その場での更新）・押したあとの流れ・サーバーとのやりとりは変えない。
   ★member.html は読み込みの2行だけ（このファイルと assets/gb-book-cal.js）。
     行に直接書かれた大きさ（renderBkGrid が書く style）は、ここで !important で上書きする。
   ★○ と × のマスの形・色・押したときの動きは変えない（.slot-o / .slot-x には触れない）。
   ★ジム・パーソナル・日時の変更は同じカレンダー（#bk-grid）なので、全部に効く。
   ============================================================= */

/* ── 進み具合の線（種類 → 日時 → 確認 → 完了）。押せる操作ではない ── */
#gbbc-steps{display:flex;align-items:flex-start;justify-content:center;padding:10px 14px 2px;flex-shrink:0}
.gbbc-step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:44px}
.gbbc-dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.16);background:var(--dark3);color:var(--tx3);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.gbbc-lbl{font-size:11px;font-weight:700;color:var(--tx3);white-space:nowrap}
.gbbc-line{flex:1 1 auto;min-width:14px;max-width:52px;height:2px;margin-top:11px;background:rgba(255,255,255,.12)}
.gbbc-step.done .gbbc-dot{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.10);color:var(--green)}
.gbbc-step.done .gbbc-lbl{color:var(--tx2)}
.gbbc-line.done{background:rgba(34,197,94,.5)}
.gbbc-step.cur .gbbc-dot{border-color:var(--green);background:var(--green);color:#0b0b0b}
.gbbc-step.cur .gbbc-lbl{color:var(--green)}
/* 完了の知らせ（#booking-done-modal）の中に出すとき */
#booking-done-modal .gbbc-steps-in{display:flex;align-items:flex-start;justify-content:center;margin:0 0 14px}

/* ── 期間の帯（カレンダーのすぐ上。‹ › は帯の左右の端・押せる範囲 44×44） ── */
#gbbc-band{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:6px 10px 8px;padding:3px;border:1px solid var(--bdr);border-radius:14px;background:var(--dark2);flex-shrink:0}
#gbbc-band #bk-grid-month{flex:1 1 auto;min-width:0;text-align:center;font-size:17px!important;font-weight:900!important;color:var(--tx);letter-spacing:.2px;white-space:nowrap}
#gbbc-band #bk-prev,#gbbc-band #bk-next{width:44px!important;height:44px!important;flex-shrink:0;border-radius:11px;font-size:15px!important}

/* ── 曜日・日付・時刻を一回り大きく（幅 360 で7日が収まる大きさ） ── */
#bk-grid .grid-hdr{height:50px}
#bk-grid-scroll .cal-tcol>div:first-child{height:50px!important}   /* 時刻の列の上の角（見出しと同じ高さ） */
#bk-grid .grid-hdr>div:first-child{font-size:14px!important;line-height:1.15}
#bk-grid .grid-hdr>div:last-child{font-size:18px!important;line-height:1.1}
#bk-tlabels>div{font-size:13px!important;letter-spacing:-.3px}
/* 時刻の列：3時間ごとの太い時刻（例 00:00）が入る幅に（44px → 50px）。7日の列はそのぶん少し細くなる（幅360で 1日 約44px） */
#bk-grid-scroll .cal-tcol{width:50px}
/* 土曜は青・日曜は赤（祝日の情報は今の画面に無いので、祝日は色を変えない） */
#bk-grid .grid-hdr>.gbbc-sat{color:#60a5fa!important}
#bk-grid .grid-hdr>.gbbc-sun{color:#f87171!important}

/* ── 3時間ごとの区切り（0・3・6・9・12・15・18・21時） ── */
#bk-tlabels>div.gbbc-h3{font-size:15px!important;font-weight:900!important;color:var(--green)!important}
#bk-tlabels>div.gbbc-h3b,#bk-grid .grid-cell.gbbc-h3b{border-top:2px solid rgba(34,197,94,.42)!important}

/* ── 〔2026-10-04 2回目〕日時の画面だけ、カレンダーを下のタブのすぐ上まで伸ばす ──
   下の余白を「下のタブの実際の高さ」（gb-book-cal.js が測って --gbbc-nav-h に入れる）にする。測れないときは今までの 80px。
   空の案内の行（この週に○が無いときだけ文が入る）は、空のあいだは場所を取らない。 */
#scr-booking.gbbc-s2{padding-bottom:var(--gbbc-nav-h,80px)!important}
#scr-booking.gbbc-s2 #bk-week-hint:empty{display:none}

/* 幅 359px 以下（小さな画面）は、今までどおり少し小さく */
@media(max-width:359px){
  #bk-grid .grid-hdr>div:first-child{font-size:12px!important}
  #bk-grid .grid-hdr>div:last-child{font-size:15px!important}
  #bk-tlabels>div{font-size:11px!important}
  #bk-tlabels>div.gbbc-h3{font-size:13px!important}
  #gbbc-band #bk-grid-month{font-size:15px!important}
}

/* =============================================================
   〔2026-10-06〕見学の申し込みのページ（index.html の #scr-tour）：会員アプリと同じ見た目（並べ替えと印は assets/gb-book-cal.js）
   ★会員アプリの上の行（#bk-* / #scr-booking）には1つも触れていない。ここは見学のページの部品（#tour-* / #scr-tour）だけ。
   ★色は見学のページの色（:root の --green・--dark2・--bdr・--tx。会員アプリと同じ値）。今の段階の色は、ブランドの橙から会員アプリと同じ緑に。
   ============================================================= */
/* 進み具合：もとの線（橙）は隠し、会員アプリと同じ線（#gbbc-steps・上の共通の見た目）を出す */
#scr-tour #tour-steps{display:none}
#scr-tour #gbbc-steps{padding:0 0 16px}   /* もとの線（.stbar）の下の余白 24px に近く */
/* 期間の帯（‹ › は帯の左右の端・押せる範囲 44×44・戻れないときは薄く） */
#scr-tour #gbbc-band{margin:6px 18px 8px}
#gbbc-band #tour-week-lbl{flex:1 1 auto;min-width:0;text-align:center;font-size:17px!important;font-weight:900!important;color:var(--tx);letter-spacing:.2px;white-space:nowrap}
#gbbc-band #tour-prev,#gbbc-band #tour-next{width:44px!important;height:44px!important;flex-shrink:0;border-radius:11px;font-size:15px!important}
#gbbc-band #tour-prev.gbbc-off{opacity:.35;cursor:not-allowed}
/* 曜日・日付・時刻を一回り大きく（幅 360 で7日が収まる大きさ） */
#tour-grid .grid-hdr{height:50px}
#tour-grid-scroll .cal-tcol>div:first-child{height:50px!important}
#tour-grid .grid-hdr>div:first-child{font-size:14px!important;line-height:1.15}
#tour-grid .grid-hdr>div:last-child{font-size:18px!important;line-height:1.1}
#tour-tlabels>div{font-size:13px!important;letter-spacing:-.3px}
#tour-grid-scroll .cal-tcol{width:50px}
/* 土曜は青・日曜は赤（もとは土日とも青。祝日の情報は今の画面に無いので、祝日は色を変えない） */
#tour-grid .grid-hdr>.gbbc-sat{color:#60a5fa!important}
#tour-grid .grid-hdr>.gbbc-sun{color:#f87171!important}
/* 3時間ごとの区切り（0・3・6・9・12・15・18・21時） */
#tour-tlabels>div.gbbc-h3{font-size:15px!important;font-weight:900!important;color:var(--green)!important}
#tour-tlabels>div.gbbc-h3b,#tour-grid .grid-cell.gbbc-h3b{border-top:2px solid rgba(34,197,94,.42)!important}
@media(max-width:359px){
  #tour-grid .grid-hdr>div:first-child{font-size:12px!important}
  #tour-grid .grid-hdr>div:last-child{font-size:15px!important}
  #tour-tlabels>div{font-size:11px!important}
  #tour-tlabels>div.gbbc-h3{font-size:13px!important}
  #gbbc-band #tour-week-lbl{font-size:15px!important}
}