/* ========== bookly-grid.v2.css (bigger fonts + fixed button height + modal) ========== */
/* === FPS PATCH: coupon applies to course only note === */
.fps-coupon__note{margin-top:4px;font-size:12px;}

#bookly-grid, #bookly-grid * { box-sizing: border-box; }
#bookly-grid { --gap: 10px; --gap-sm: 8px; --radius: 12px; --shadow: 0 2px 10px rgba(0,0,0,.06); --bw: 1px; --muted:#6b7280; --fg:#111827; --bg:#fff; --line:#e5e7eb; --accent:#111827; color: var(--fg); }

.bk-toolbar { display:grid; grid-template-rows:auto auto auto; gap:var(--gap-sm); padding:12px 16px 2px 16px; background:var(--bg); border:var(--bw) solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:2px; }
.bk-row1, .bk-row2 { display:grid; grid-template-columns:1fr; gap:10px; }
.bk-group { display:grid; grid-template-columns:max-content 1fr; align-items:center; gap:0px; }
.bk-label { font-size:22px; color:var(--muted); white-space:nowrap; }

.bk-row3{ display:flex; justify-content:center; gap:8px; }
.bk-navbtn{ padding:6px 6px; border:1px solid var(--line); border-radius:12px; background:#f9fafb; cursor:pointer; font-size:18px; }
.bk-navbtn:hover{ background:#f3f4f6; }

/* photo cards */
.bk-seg.photo-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bk-card{ position:relative; display:block; width:100%; aspect-ratio:3/2; border-radius:16px; overflow:hidden; border:1px solid rgba(15,23,42,.08); background:#eee center/cover no-repeat; box-shadow:0 8px 26px rgba(2,6,23,.08); transition:transform .22s ease, box-shadow .28s ease, filter .28s ease; cursor:pointer; text-align:left; }
.bk-card::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.38) 100%); opacity:.85; transition: opacity .25s ease; }
.bk-card:hover{ transform: translateY(-3px); box-shadow:0 14px 40px rgba(2,6,23,.16); filter:saturate(1.04) contrast(1.02); }
.bk-card:hover::before{ opacity:.75; }
.bk-card[aria-pressed="true"]{ box-shadow:0 18px 48px rgba(2,6,23,.22); outline:2px solid #111827; outline-offset:2px; }
/* 既定（未対応ブラウザ向け） */
.bk-card-cap{
  position:absolute; left:12px; right:12px; bottom:10px; color:#fff; z-index:1;
  white-space: normal; overflow: visible;
}

/* WebKit/Blink のみ2行クランプ */
@supports (-webkit-line-clamp: 2) {
  .bk-card-cap{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }
}

.bk-card-title{ font-weight:700; font-size: clamp(16px, 3.6vw, 20px); text-shadow:0 2px 10px rgba(0,0,0,.35); line-height:1.25; }
.bk-card-sub{ font-size: clamp(12px, 2.8vw, 14px); opacity:.9; line-height:1.25; }

/* CSS変数でも背景OK */
.bk-card[data-key="M"]{ background-image: var(--img-m); }
.bk-card[data-key="Z"]{ background-image: var(--img-z); }
.bk-card[data-key="S"]{ background-image: var(--img-s); }

/* コースボタン：等幅3列・高さ一定・文字縮小 */
.bk-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.bk-row2 .bk-seg{ justify-content:center; }
.bk-segbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer;
  font-size: clamp(14px, 3.2vw, 18px); line-height:1.2; font-weight:700;
  white-space:nowrap; min-height:44px;
}
.bk-segbtn[aria-pressed="true"]{ background:var(--accent); color:#fff; border-color:var(--accent); }
.bk-segbtn:active{ transform: translateY(1px); }

@media (max-width:560px){
  .bk-row2 .bk-seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
  .bk-row2 .bk-segbtn{ width:100%; padding:10px 8px; font-size:clamp(11px, 3.4vw, 16px); min-height:44px; }
}

/* 現在の棟/コース（大きめ） */
.bk-current{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 4px 4px; }
.bk-pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; font-size: clamp(14px, 3.6vw, 18px); font-weight:700; }
.bk-pill > span{ color:#64748b; font-size:.9em; background:#fff; padding:2px 6px; border-radius:999px; border:1px solid #e2e8f0; }

/* グリッド */
.bk-grid{ border-radius:var(--radius); overflow:hidden; }
.bk-monthbar{ text-align:center; font-weight:700; margin-bottom:4px; font-size:20px;}

.bk-head{ display:grid; grid-template-columns: var(--time-col, 64px) repeat(7, minmax(0,1fr)); background:#f9fafb; border-bottom:1px solid var(--line); }
.bk-head-cell{ padding:10px 6px; text-align:center; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.bk-head-cell:first-child{ border-left:none; text-align:left; font-weight:700; }
.bk-date-only{ font-weight:800; font-size: clamp(16px, 3.2vw, 20px); color:#111111;}
.bk-dow{ font-size: clamp(14px, 3vw, 18px); color:var(--muted); color:#111111;}
.bk-weekend .bk-date-only, .bk-weekend .bk-dow{ color:#b91c1c; }
.bk-saturday .bk-date-only, .bk-saturday .bk-dow{ color:#1d4ed8; }

.bk-row{ display:grid; grid-template-columns: var(--time-col, 64px) repeat(7, minmax(0,1fr)); border-top:1px solid var(--line); }
.bk-time{ padding:8px 6px; font-size: clamp(14px, 3vw, 18px); color:var(--muted); white-space:nowrap; }
.bk-cell{ border-left:1px solid var(--line); min-height:32px; position:relative; }
.bk-cell button{ width:100%; height:100%; display:block; background:#fff; border:0; cursor:pointer; font-size:16px; line-height:1.1; padding:6px; border-radius:10px; }
.bk-cell button:hover{ background:#eef2ff; box-shadow:0 10px 24px rgba(2,6,23,.08); }
.bk-disabled{ background:#f3f4f6; }
.bk-disabled button{ display:none; }

/* はみ出し抑制 */
#bookly-grid{ overflow-x:hidden; margin-left:auto; margin-right:auto; }
.bk-grid{ width:100%; overflow-x:hidden; }

/* ----- Blocksy調 モーダル ----- */
#fps-modal .fps-modal-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.35); backdrop-filter: blur(3px); z-index:9998;
}

#fps-modal .fps-modal-header{ font-weight:800; font-size:20px; margin-bottom:8px; }
#fps-modal .fps-modal-body{ display:grid; gap:6px; font-size:16px; }
#fps-modal .fps-modal-body .row span{ margin-right:6px; }
#fps-modal .fps-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
#fps-modal .btn-cancel, #fps-modal .btn-ok{
  padding:10px 14px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-weight:700;
}
#fps-modal .btn-ok{ background:#111827; color:#fff; border-color:#111827; }
#fps-modal .btn-ok:hover{ filter:brightness(1.05); }

/* === Staff cards: コンパクトで以前の見た目へ寄せる ===================== */

/* 3枚が常に同じ高さになるように。幅に応じて 120–160px の範囲で可変 */
#bookly-grid .bk-seg.photo-cards > .bk-card{
  aspect-ratio: auto !important;        /* 以前の比率固定を解除 */
  height: clamp(120px, 24vw, 160px);     /* ← コンパクト化の肝 */
  border-radius: 12px;                   /* 角丸を少しだけ小さく */
  box-shadow: 0 6px 18px rgba(2,6,23,.10);
  background-position: center;
  background-size: cover;
}

/* オーバーレイは少し薄く（写真を見せる） */
#bookly-grid .bk-card::before{
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 100%) !important;
  opacity: .82 !important;
}

/* 選択時の黒いアウトラインを強調（前のUIの雰囲気） */
/*#bookly-grid .bk-card[aria-pressed="true"]{
  outline: 3px solid #0f172a !important;
  outline-offset: 0;
  box-shadow: 0 12px 30px rgba(2,6,23,.18);
}*/

/* タイトル/サブのサイズを少し控えめにして詰める */
#bookly-grid .bk-card-title{ font-size: clamp(15px, 3.2vw, 18px); }
#bookly-grid .bk-card-sub  { font-size: clamp(12px, 2.8vw, 13px); }

/* 余白を少しタイトに（上のパネルが間延びしないように） */
#bookly-grid .bk-row1 { margin-bottom: 8px; }
#bookly-grid .bk-group > .bk-seg.photo-cards{ gap: 10px; }

#bookly-grid{
  --img-m: url("/wp-content/uploads/photos/meisou.webp");
  --img-z: url("/wp-content/uploads/photos/zazen.webp");
  --img-s: url("/wp-content/uploads/photos/suiran.webp");
}


/* モーダル土台：デフォルトは非表示。open時だけ表示 */
#fps-modal[hidden] { display: none !important; }
#fps-modal:not(.is-open) { display: none; }
#fps-modal.is-open { display: block; }


/* ==== Confirm モーダル：常に画面内＆やや上寄せ ==== */
#fps-modal .fps-modal{
  position: fixed !important;
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 8vh)) !important;

  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(92vw, 560px) !important;   /* 余裕を少しだけ増やす */
  max-width: 520px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  overscroll-behavior: contain;         /* スクロール暴発抑止 */
  max-height: calc(100svh - max(32px, 8vh + env(safe-area-inset-top, 0px)) - 16px) !important;
  height: fit-content !important;
  display: flex; flex-direction: column; overflow: hidden;
}
#fps-modal .fps-modal-header,
#fps-modal .fps-modal-actions{
  position: sticky; background: #fff; z-index: 1;
  flex-shrink: 0;
}
#fps-modal .fps-modal-header{ top: 0; }
#fps-modal .fps-modal-actions{ bottom: 0; }
#fps-modal .fps-modal-body{ overflow: auto; flex: 0 1 auto; min-height: 0; }

#fps-modal .fps-modal-backdrop{ inset: 0 !important; }

/* ==== 棟カード：キャプションを省略せずに表示（折返しOK） ==== */
#bookly-grid .bk-card .bk-card-cap{
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.35;
}

/* タイトル/サブのサイズを微調整（スマホでも収まりやすく） */
#bookly-grid .bk-card-title{
  font-size: clamp(15px, 3.1vw, 18px) !important;
  margin: 0 0 2px;
}
#bookly-grid .bk-card-sub{
  font-size: clamp(12px, 2.8vw, 14px) !important;
}

/* 文字が増えても切れにくいように、スマホ時はカードを少しだけ背を高く */
@media (max-width: 480px){
  #bookly-grid .bk-seg.photo-cards > .bk-card{
    height: clamp(140px, 30vw, 180px) !important;
  }
}

/* 2行: 1行目=ラベル, 2行目=単価と数量 */
#fps-modal .fps-opt--qty{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "unit  qty";
  gap: 6px 12px;
  padding:10px 12px;
  border:1px solid var(--ct-border-color,#e5e7eb);
  border-radius:10px;
  align-items:center;
  background:#fff;
}
#fps-modal .fps-opt__label{ grid-area: label; font-weight:700; line-height:1.2; }
#fps-modal .fps-opt__unit{  grid-area: unit; font-size:12px; opacity:.75; }
#fps-modal .fps-opt__qty{
  grid-area: qty; justify-self:end;
  min-width:72px; padding:6px 8px;
  border:1px solid var(--ct-border-color,#e5e7eb); border-radius:8px; background:#fff;
}

#bookly-grid .bk-holiday { color: #ef4444; } /* 日祝は赤系表示 */

/* coupon in modal */
/* ===== Coupon row: 横1行キープ ===== */
#fps-modal .fps-coupon{ margin: 8px 0 2px; }
#fps-modal .fps-coupon__label{ font-weight:700; display:block; margin-bottom:4px; }
#fps-modal .fps-coupon__row{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px;
}
#fps-modal .fps-coupon__input{
  flex:1 1 auto; min-width:0; padding:8px 10px;
  border:1px solid #e5e7eb; border-radius:10px;
}
#fps-modal .fps-coupon__apply{
  padding:8px 14px; border-radius:999px;
  border:1px solid #0f172a22; background:#fff; font-weight:700; white-space:nowrap;
}
#fps-modal .fps-coupon__msg{ font-size:12px; margin-top:4px; }


/* ===== Modal option rows (2行構成) ===== */
#fps-modal .fps-options__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
@media (max-width: 640px){
  #fps-modal .fps-options__grid{ grid-template-columns: 1fr; }
}

/* ====== モバイル最適化：モーダル＆オプションをコンパクトに ====== */
@media (max-width: 640px){
  /* モーダル箱をさらに詰める（上余白/高さ/内側パディング） */
  #fps-modal .fps-modal{
    top: max(8px, 6vh) !important;
    width: min(96vw, 560px) !important;
    max-height: calc(100svh - max(16px, 6vh) - 8px) !important;
  }
  #fps-modal .fps-modal-header{ padding: 10px 12px !important; font-size: 16px !important; }
  #fps-modal .fps-modal-actions{ padding: 10px 12px !important; }
  #fps-modal .fps-modal-body{ padding: 10px 12px !important; gap: 8px !important; font-size: 15px !important; }

  /* オプション：2行構成のまま縦を圧縮 */
  #fps-modal .fps-options__grid{ gap: 8px !important; }
  #fps-modal .fps-opt--qty{
    padding: 8px 10px !important;
    gap: 4px 8px !important;
    border-radius: 8px !important;
  }
  #fps-modal .fps-opt__label{ font-size: 14px !important; line-height: 1.15 !important; }
  #fps-modal .fps-opt__unit{  font-size: 11px !important; opacity: .75 !important; }
  #fps-modal .fps-opt__qty{
    min-width: 60px !important;
    height: 34px !important;
    padding: 4px 6px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  /* クーポン行：横1行のままコンパクトに */
  #fps-modal .fps-coupon__row{ gap: 8px !important; }
  #fps-modal .fps-coupon__input{ padding: 7px 9px !important; }
  #fps-modal .fps-coupon__apply{ padding: 7px 12px !important; }
  #fps-modal .fps-coupon__msg{ font-size: 11px !important; }
}

/* さらに小さい端末向けの微調整（任意） */
@media (max-width: 380px){
  #fps-modal .fps-modal-body{ font-size: 14px !important; gap: 6px !important; }
  #fps-modal .fps-opt--qty{ padding: 6px 8px !important; }
  #fps-modal .fps-opt__label{ font-size: 13px !important; }
  #fps-modal .fps-opt__qty{
    min-width: 56px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}

/* ===== PC: 「コース：」とボタンを横並びでくっつける ===== */
#bookly-grid .bk-row2 .bk-group{
  display: flex;               /* 横並びに */
  align-items: center;         /* ベースライン揃え */
  gap: 8px;                    /* ラベルと最初のボタンの間隔（狭め） */
  flex-wrap: nowrap;           /* 折り返さない（PCのみ） */
}
#bookly-grid .bk-row2 .bk-label{
  margin: 0;                   /* 余白をリセット */
  padding: 0;
  white-space: nowrap;         /* 「コース：」が途中で折り返されないように */
}
#bookly-grid .bk-row2 .bk-seg{
  margin: 0;
  display: flex;
  gap: 8px;                    /* ボタン同士の間隔 */
  flex-wrap: wrap;             /* 画面幅が狭いPCでも必要なら折り返し可 */
}

/* ===== SP: 幅が狭い時はラベルを上、ボタンを下（従来どおり見やすく） ===== */
@media (max-width: 640px){
  #bookly-grid .bk-row2 .bk-group{
    flex-wrap: wrap;           /* ラベルとボタンを縦に */
    gap: 6px 8px;
  }
  #bookly-grid .bk-row2 .bk-label{
    width: 100%;
    margin-bottom: 2px;
  }
}

/* ===== 見積の内訳表示（4-B） ===== */
.fps-breakdown {
  margin-top: 0;           /* 余計な隙間を作らない */
  border-top: none;        /* 上の線は .fps-quote-box 側で一元管理 */
}
.fps-line { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; }
.fps-line.fps-discount { color:#d32f2f; }
.fps-line.fps-total { font-weight:700; font-size:16px; border-top:1px solid rgba(0,0,0,.12); margin-top:6px; padding-top:8px; }
.fps-msg { margin-top:6px; font-size:12px; opacity:.9; }
.fps-msg.error { color:#d32f2f; }

.fps-taxnote {
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
  text-align: right; /* 左寄せがよければ left に変更 */
}

/* 金額と内訳の境目の横線 */
/* ★ dashed にして以前の見た目に近づける（solid のままでもOK） */
.fps-quote-box.fps-quote--ready {
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  margin-top: 8px;
  padding-top: 8px;
}

/* =========================================
   サウナサイト用 ダークテーマ + ボタン色 #86866C
   ========================================= */

/* ベースカラー（文字色・背景色など） */
#bookly-grid{
  --fg: #f9fafb;
  --bg: #000000;
  --muted: #9ca3af;
  --line: #27272a;
  --accent: #86866C;
  color: var(--fg);
}

/* ツールバーとグリッド枠 */
#bookly-grid .bk-toolbar{
  background: #000000;
  border-color: #27272a;
  box-shadow: none;
}

/* カレンダーヘッダー */
#bookly-grid .bk-head{
  background: #FFFFFF;
}

/* 行・時間列・セルの罫線 */
#bookly-grid .bk-row{
  border-top-color: #27272a;
}
#bookly-grid .bk-time{
  border-right-color: #27272a;
}
#bookly-grid .bk-cell{
  border-left-color: #27272a;
}

/* ○ボタン */
#bookly-grid .bk-cell button{
  background: #111827;
  color: #f9fafb;
}
#bookly-grid .bk-cell button:hover{
  background: #1f2937;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* ×セル */
#bookly-grid .bk-disabled{
  background: #111827;
}

/* 現在の棟／コースピル */
#bookly-grid .bk-pill{
  background: #111827;
  border-color: #27272a;
}
#bookly-grid .bk-pill > span{
  background: #000000;
  border-color: #27272a;
}

/* 週ナビボタン（＜前の週／今日／次の週＞） */
#bookly-grid .bk-navbtn{
  background: #86866C;
  border-color: #86866C;
  color: #f9fafb;
}
#bookly-grid .bk-navbtn:hover{
  background: #9b9b7a;
}

/* コース選択ボタン */
#bookly-grid .bk-segbtn{
  background: transparent;
  border-color: #86866C;
  color: #f9fafb;
}
#bookly-grid .bk-segbtn[aria-pressed="true"]{
  background: #86866C;
  border-color: #86866C;
  color: #ffffff;
}

/* 棟カード：枠線だけサイトトーンに寄せる */
#bookly-grid .bk-card{
  border-color: #27272a;
}

/* ===== モーダルをダークに ===== */

#fps-modal .fps-modal-header,
#fps-modal .fps-modal-actions{
  padding:14px 16px;
  background: #c9c9c2;
  border-color: #27272a;
}
#fps-modal .fps-modal-backdrop{
  background: rgba(0,0,0,0.65);
}

/* モーダルのボタン類 */
#fps-modal .btn-ok,
#fps-modal .fps-coupon__apply{
  background: #86866C;
  border-color: #86866C;
}
#fps-modal .btn-ok:hover,
#fps-modal .fps-coupon__apply:hover{
  filter: brightness(1.05);
  background: #111827;
  color: #f9fafb;
}

#fps-modal .btn-cancel{
  background: transparent;
  border-color: #4b5563;
}
#fps-modal .btn-cancel:hover{
  background: #111827;
  color: #f9fafb;
}

/* オプションカードと入力欄 */
#fps-modal .fps-opt--qty{
  background: #c9c9c2;
  border-color: #27272a;
}
#fps-modal .fps-opt__qty,
#fps-modal .fps-coupon__input{
  background: #f9fafb;
  color: #111111;
  border-color: #4b5563;
}
#fps-modal .fps-coupon__input::placeholder{
  color: #6b7280;
}
#fps-modal .fps-coupon__msg{
  color: #b00020;
}

/* 内訳テキスト */
.fps-msg{
  color: #e5e7eb;
}
.fps-msg.error{
  color: #f97373;
}

/* =========================================
   1) グリッド内側を少し明るいダークグレーに
   ========================================= */

/* 基調カラー（ツールバーなどに効く） */
#bookly-grid{
  --bg:#050816;        /* 真っ黒より一段明るいネイビー系 */
  --fg:#f9fafb;
  --muted:#9ca3af;
  --line:#1f2937;
}

/* 時間枠ボタンの背景 */
#bookly-grid .bk-cell button{
  background:#111827;          /* さらに少し明るいグレー */
  color:#f9fafb;
}

/* ×セルも同じトーンに */
#bookly-grid .bk-disabled{
  background:#111827;
}

/* =========================================
   2) モーダル：黒背景＋内側は少し明るいグレー
   ========================================= */

/* 内訳境界線とテキスト色もダーク用に微調整 */
#fps-modal .fps-quote-box.fps-quote--ready{
  border-top-color:#1f2937 !important;
}

/* =========================================
   1) グリッド部分を段階的に明るく
   ========================================= */

/* 棟カード・コースボタン・グリッド共通のベース色 */
#bookly-grid{
  --bg: #111827;      /* 棟カードやツールバーの枠内の色 */
  --fg: #f9fafb;
  --muted: #d1d5db;
  --line: #1f2937;
}

/* 棟カードまわり（ツールバー全体）を少し明るくする */
#bookly-grid .bk-toolbar{
  background: #111827;
  border-color: #1f2937;
}

/* 時刻セルの中（○ボタン）の色をさらに一段明るく */
#bookly-grid .bk-cell button{
  background: #1f2937;
  color: #f9fafb;
}

/* ×のセルも真っ黒ではなく、少し明るいグレーに */
#bookly-grid .bk-disabled{
  background: #1b2535;
}

/* =========================================
   2) モーダル：オプション数量の文字色を白に
   ========================================= */

/* 数量セレクト本体 */
#fps-modal select.fps-opt__qty,
#fps-modal .fps-opt__qty{
  background: #020617 !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}

/* =========================================
   グリッド：ベージュ系のダークトーンに統一
   ========================================= */

/* 棟カード・コースボタン・グリッド共通のベース色（あたたかいベージュ系） */
#bookly-grid{
  --bg: #18160f;      /* ページ真っ黒より一段明るい“黒ベージュ” */
  --fg: #f9fafb;
  --muted: #e5e7eb;
  --line: #2b271d;
}

/* 棟カード＆コースボタンが乗る大きな枠 */
#bookly-grid .bk-toolbar{
  background: #18160f;
  border-color: #2b271d;
}

/* 各時間セルのボタンはさらに一段明るくして視認性アップ */
#bookly-grid .bk-cell button{
  background: #221f17;
  color: #f9fafb;
}

/* ×セルも真っ黒ではなく、少し明るいベージュ系に */
#bookly-grid .bk-disabled{
  background: #201d16;
}

/* =========================================
   モーダル：黒ベース＋内側をベージュ系に
   ========================================= */

/* 内訳ブロックの境界線と文字色 */
#fps-modal .fps-quote-box.fps-quote--ready{
  border-top-color: #363124 !important;
}

/* =========================================
   グリッド：ベージュ系をもう一段明るく
   ========================================= */

/* ベース色を少し明るめの“黒ベージュ”に */
#bookly-grid{
  --bg: #262016;   /* さっきより一段明るい */
  --fg: #f9fafb;
  --muted: #e5e7eb;
  --line: #3a3223;
}

/* 棟カード～コースボタンを含む上部の大きい枠 */
#bookly-grid .bk-toolbar{
  background: #262016;
  border-color: #3a3223;
}

/* 各時間セルの「○」ボタンをさらに一段明るく */
#bookly-grid .bk-cell button{
  background: #3a301d;   /* 周りより明るめのベージュ */
  color: #f9fafb;
}

/* ×セルも真っ黒ではなく、少し明るめに */
#bookly-grid .bk-disabled{
  background: #2f2819;
}

/* =========================================
   モーダル：同じベージュ系で少し明るく
   ========================================= */
#fps-modal .fps-modal{
  background: #e1e1e1 !important; 
  border: 1px solid #3a3223 !important;
}

/* 数量セレクト＆クーポン入力は黒寄りベージュ＋白文字（前回の修正を維持） */
#fps-modal select.fps-opt__qty,
#fps-modal .fps-opt__qty,
#fps-modal .fps-coupon__input{
  background: #f9fafb !important;
  color: #111111 !important;
  border-color: #4b4638 !important;
}

/* option 要素（ブラウザによって効かない場合もあるが保険） */
#fps-modal .fps-opt__qty option{
  background: #f9fafb;
  color: #111111;
}

/* =========================================
   棟カード：選択中の枠を太めの白系アウトラインに
   ========================================= */
#bookly-grid .bk-card[aria-pressed="true"]{
  outline: 3px solid rgba(249,250,251,0.95); /* 白っぽい枠 */
  outline-offset: 3px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);  /* ほんの少し強めの影で浮かせる */
}

/* ローディング中は、日時セルを少し暗くしてクリック不可っぽく見せる */
#bookly-grid.bk-loading .bk-cell button{
  opacity: 0.4;
  cursor: default;
}

/* =========================================
   モーダルの縦方向サイズ制限
   ========================================= */

/* モーダル本体：画面の 80% を上限にして伸びすぎを防ぐ */
#fps-modal .fps-modal{
  max-height: 80vh;
  height: auto;               /* 必要な分だけ伸びる */
  display: flex;
  flex-direction: column;     /* ヘッダー／本文／フッターを縦並びに */
}

/* 本文エリア：あふれた分は中でスクロール */
#fps-modal .fps-modal-body{
  flex: 1 1 auto;
  overflow-y: auto;
}

/* =========================================
   グリッド：予約不可マスに「×」を表示
   ========================================= */
#bookly-grid .bk-disabled{
  position: relative;
  text-align: center;
}

#bookly-grid .bk-disabled::before{
  content: '×';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 1000;
  color: #111827;
  pointer-events: none;  /* クリックさせない */
}

/* ご利用人数セレクトの文字色を白に */
#fps-details-modal select,
#fps-details-modal select option {
  color: #111827;
}

/* === FPS PATCH: summary rows spacing (confirm & details) === */
#fps-modal .fps-summary{display:grid;gap:2px;}
#fps-details-modal .fps-summary{display:grid;gap:2px;}
#fps-details-modal .fps-details-body .row{display:flex;gap:8px;align-items:center;}
#fps-details-modal .fps-details-body .row span{color:#9ca3af;margin-right:6px;}

/* =========================================================
   FPS UI Skin v2025-12-31-1 （見た目のみ／追記専用）
   追加場所：bookly-grid.v2.css の末尾
   目的：カード/ボタン/モーダル/オーバーレイの質感を統一
   ========================================================= */

/* 1) Design tokens（変数だけなので副作用がほぼ無い） */
:root{
  --fps-font: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",
              "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

  --fps-bg: #f6f7f8;
  --fps-surface: #ffffff;
  --fps-text: #111827;
  --fps-muted: #6b7280;
  --fps-border: rgba(17, 24, 39, 0.14);

  --fps-primary: #0f766e;
  --fps-primary-2: #115e59;

  --fps-radius: 16px;
  --fps-radius-sm: 12px;

  --fps-shadow: 0 14px 40px rgba(0,0,0,.10);
  --fps-shadow-sm: 0 6px 18px rgba(0,0,0,.10);

  --fps-ring: 0 0 0 3px rgba(15,118,110,.22);
}

/* 2) ベース（既存クラスが無い場合は“効かないだけ”で安全） */
.fps-grid,
#fps-grid,
.fps-bookly-grid,
.fps-root{
  font-family: var(--fps-font);
  color: var(--fps-text);
}

/* 3) ボタンの統一（クリック領域・見た目） */
.fps-btn,
.fps-button,
button.fps-btn,
button.fps-button{
  border-radius: 999px;
  border: 1px solid var(--fps-border);
  background: var(--fps-surface);
  color: var(--fps-text);
  padding: 10px 14px;
  line-height: 1;
  box-shadow: none;
  transition: transform .06s ease, box-shadow .18s ease, border-color .18s ease;
}

.fps-btn:hover,
.fps-button:hover,
button.fps-btn:hover,
button.fps-button:hover{
  box-shadow: var(--fps-shadow-sm);
  border-color: rgba(15,118,110,.35);
}

.fps-btn:active,
.fps-button:active,
button.fps-btn:active,
button.fps-button:active{
  transform: translateY(1px);
}

.fps-btn--primary,
.fps-button--primary{
  background: var(--fps-primary);
  border-color: rgba(0,0,0,0);
  color: #fff;
}

.fps-btn--primary:hover,
.fps-button--primary:hover{
  background: var(--fps-primary-2);
}

/* 4) フォーカスリング（アクセシビリティ／壊れない） */
.fps-grid a:focus-visible,
.fps-grid button:focus-visible,
.fps-grid input:focus-visible,
.fps-grid select:focus-visible,
.fps-grid textarea:focus-visible,
#fps-grid a:focus-visible,
#fps-grid button:focus-visible,
#fps-grid input:focus-visible,
#fps-grid select:focus-visible,
#fps-grid textarea:focus-visible{
  outline: none;
  box-shadow: var(--fps-ring);
  border-radius: 10px;
}

/* 5) 入力欄（クーポン等） */
.fps-grid input[type="text"],
.fps-grid input[type="tel"],
.fps-grid input[type="email"],
.fps-grid input[type="number"],
.fps-grid textarea,
#fps-grid input[type="text"],
#fps-grid input[type="tel"],
#fps-grid input[type="email"],
#fps-grid input[type="number"],
#fps-grid textarea{
  border: 1px solid var(--fps-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--fps-surface);
  color: var(--fps-text);
}

.fps-grid input::placeholder,
.fps-grid textarea::placeholder{
  color: rgba(107,114,128,.9);
}

/* 6) カード（棟のカード等に“それっぽさ”を付与） */
.fps-card,
.fps-grid .fps-card,
#fps-grid .fps-card{
  background: var(--fps-surface);
  border: 1px solid var(--fps-border);
  border-radius: var(--fps-radius);
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .10s ease, border-color .18s ease;
}

.fps-card:hover,
.fps-grid .fps-card:hover,
#fps-grid .fps-card:hover{
  box-shadow: var(--fps-shadow-sm);
  border-color: rgba(15,118,110,.28);
  transform: translateY(-1px);
}

/* 7) モーダル（枠・影・角丸だけ。構造依存を避ける） */
.fps-modal,
.fps-dialog,
.fps-modal__panel,
.fps-modal__content{
  border-radius: var(--fps-radius);
}

.fps-modal__panel,
.fps-dialog__panel,
.fps-modal__content{
  background: var(--fps-surface);
  border: 1px solid var(--fps-border);
  box-shadow: var(--fps-shadow);
}

/* 8) 見積エリア（“表題っぽい金額”を消した方針と相性良い：見やすさUP） */
.fps-quote,
.fps-quote__box,
.fps-price-breakdown{
  background: rgba(17, 24, 39, 0.03);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--fps-radius-sm);
  padding: 12px 12px;
}

/* 9) クーポンのメッセージ（表示はOK方針なので見やすく） */
.fps-coupon__msg{
  margin-top: 8px;
  font-size: 14px;
  color: var(--fps-muted);
}

/* 10) オーバーレイ（更新中／予約手続き中：視認性UP） */
.fps-overlay,
.fps-loading-overlay{
  background: rgba(17,24,39,.35);
  backdrop-filter: blur(2px);
}

.fps-overlay .fps-overlay__panel,
.fps-loading-overlay .fps-overlay__panel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  box-shadow: var(--fps-shadow-sm);
  padding: 14px 18px;
}

/* 11) “文字が小さすぎる端末”対策：最小フォントを底上げ（崩れにくい範囲で） */
.fps-grid,
#fps-grid{
  font-size: 16px;
}

@media (max-width: 420px){
  .fps-grid,
  #fps-grid{
    font-size: 16px; /* clampは既存CSSと干渉しやすいので固定で安全寄り */
  }
}


/* ======================================================================
   FINAL OVERRIDES: Booking screen UI (light theme + layout)
   - page background: handled in style.css (light gray)
   - toolbar/grid: white
   - staff/course selection: clearer active state
   - nav buttons: inline
   - grid lines: thicker
   - ×/○: white cells, larger/bold text, hover accent for available
   ====================================================================== */
#bookly-grid{
  --accent:#86866C;
  --line-strong:#d1d5db;
  color:#111827;
}

#bookly-grid .bk-wrap{
  background:transparent !important;
  color:#111827 !important;
}

/* Toolbar / grid panels (white) */
#bookly-grid .bk-toolbar{
  background:#ffffff !important;
  border:1px solid var(--line-strong) !important;
  color:#111827 !important;
}

#bookly-grid .bk-grid{
  background:#f9fafb !important;
  border:2px solid var(--line-strong) !important;
  color:#111827 !important;
  padding: 8px 8px;
}

/* Remove “選択中…” area */
#bookly-grid .bk-current{
  display:none !important;
}

/* Labels */
#bookly-grid .bk-label{
  color:#111827 !important;
  font-weight:800;
}

/* Staff (棟) cards: add label above photo cards */
#bookly-grid .bk-seg.photo-cards{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
}

#bookly-grid .bk-seg.photo-cards::before{
  content:"棟の選択";
  grid-column:1 / -1;
  font-size:22px;
  font-weight:800;
  color:#111827;
  margin:0 0 10px;
}

/* Active staff: black frame */
#bookly-grid .bk-seg.photo-cards .bk-card[aria-pressed="true"],
#bookly-grid .bk-seg.photo-cards .bk-card.is-active,
#bookly-grid .bk-seg.photo-cards .bk-segbtn[aria-pressed="true"],
#bookly-grid .bk-seg.photo-cards .bk-segbtn.is-active{
  outline:3px solid #111111 !important;
  outline-offset:2px !important;
}

/* Course buttons: bigger + clear selected state */
#bookly-grid .bk-row2 .bk-segbtn{
  font-size:22px !important;
  font-weight:800;
  min-height:72px !important;
  padding:16px 28px !important;
  color:#111111 !important;
}

#bookly-grid .bk-row2 .bk-segbtn[aria-pressed="true"],
#bookly-grid .bk-row2 .bk-segbtn.is-active{
  background:#86866C !important;
  border-color:#86866C !important;
  color:#FFFFFF !important;
}

/* Nav buttons: inline */
#bookly-grid .bk-row3{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:12px !important;
  justify-content:center !important;
}

#bookly-grid .bk-navbtn{
  width:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:6px 6px !important;
}

@media (max-width: 480px){
  #bookly-grid .bk-navbtn{ min-width: 30%; flex:1 1 auto; }
}

/* Grid lines thicker */
#bookly-grid .bk-head{
  border-bottom:2px solid var(--line-strong) !important;
}

#bookly-grid .bk-day{
  background:#ffffff !important;
  color:#111827 !important;
  border-right:2px solid var(--line-strong) !important;
}

#bookly-grid .bk-time{
  background:#ffffff !important;
  color:#111827 !important;
  font-weight:800;
}

#bookly-grid .bk-row{
  border-top:2px solid var(--line-strong) !important;
}

#bookly-grid .bk-cell{
  background:#ffffff !important;
}

/* Weekend coloring (keep red/blue) */
#bookly-grid .bk-day .sun,
#bookly-grid .bk-day.sun,
#bookly-grid .bk-day.is-sun,
#bookly-grid .bk-day[data-dow="0"]{
  color:#dc2626 !important;
}

#bookly-grid .bk-day .sat,
#bookly-grid .bk-day.sat,
#bookly-grid .bk-day.is-sat,
#bookly-grid .bk-day[data-dow="6"]{
  color:#2563eb !important;
}

/* ×/○ styles */
#bookly-grid .bk-cell button{
  background:#ffffff !important;
  color:#111827 !important;
  font-weight:1000 !important;
  font-size:24px !important;
}

#bookly-grid .bk-cell button[disabled]{
  opacity:1 !important;
}

/* Hover only for selectable (not disabled) */
#bookly-grid .bk-cell button:not([disabled]):hover{
  background:#86866C !important;
  color:#111827 !important;
}


/* =========================================================
 * Booking UI refinements (staff/course/date labels & spacing)
 * Updated: 2026-01-12
 * ======================================================= */
#bookly-grid .bk-seg.photo-cards::before{
  content: "棟を選択";
  margin: 0;              /* 上下余白 0 */
}

/* 「棟を選択」とカードの縦方向の隙間だけ消す（横の間隔は維持） */
#bookly-grid .bk-seg.photo-cards{
  row-gap: 0;
  column-gap: 16px;
}

/* Course: ラベル→ボタン（縦積み） */
#bookly-grid .bk-row2{
  display: block;
}
#bookly-grid .bk-row2 .bk-group{
  display: block !important;   /* 既存の flex 横並びを上書き */
}

/* Replace label text "コース：" -> "コースを選択" */
#bookly-grid .bk-row2 .bk-label{
  font-size: 0;                /* 元の文字を隠す */
  margin: 12px 0 0;            /* 上だけ 12px */
}
#bookly-grid .bk-row2 .bk-label::before{
  content: "コースを選択";
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #111;
}

/* 3 equal buttons across the full width */
#bookly-grid .bk-row2 .bk-seg{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#bookly-grid .bk-row2 .bk-segbtn{
  width: 100%;
  min-height: 72px;
  padding: 16px 18px;
  font-size: 22px;
  font-weight: 800;
  color: #111 !important;      /* 文字は黒 */
}
#bookly-grid .bk-row2 .bk-segbtn[aria-pressed="true"],
#bookly-grid .bk-row2 .bk-segbtn.is-active{
  background: #86866C !important;
  border-color: #86866C !important;
  color: #FFF !important;      /* 選択中は白 */
}

/* Date label above week navigation buttons */
#bookly-grid .bk-row3{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
#bookly-grid .bk-row3::before{
  content: "日時を選択";
  flex: 0 0 100%;
  margin: 12px 0 0;
  font-weight: 800;
  color: #111;
  text-align: left;
  font-size: 22px;
}

/* Remove extra top spacing above the toolbar itself */
#bookly-grid .bk-toolbar{
  margin-top: 0 !important;
}

/* ご利用人数・連絡事項・確認事項モーダル */

#fps-details-modal .fps-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(2,6,23,.35);
  backdrop-filter: blur(3px);
  z-index:9998;
}
#fps-details-modal .fps-details-box{
  position:fixed;
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 8vh));
  left:50%; transform:translateX(-50%);
  right: auto;
  bottom: auto;
  width: min(92vw, 560px);
  max-width: 520px;
  box-sizing: border-box;
  margin: 0;
  max-height: calc(100svh - max(32px, 8vh + env(safe-area-inset-top, 0px)) - 16px);
  height: fit-content;
  background:#ffffff;
  color:#111827;
  border-radius:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 18px 48px rgba(2,6,23,.20);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  overscroll-behavior: contain;
  z-index:9999;
}
#fps-details-modal .fps-details-header{
  background: #c9c9c2;
  padding:12px 16px;
  font-weight:800;
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
}
#fps-details-modal .fps-details-body{
  background:#e1e1e1;
  padding:12px 16px;
  font-size:14px;
  line-height:1.5;
  overflow-y:auto;
  display:grid;
  gap:10px;
  flex: 0 1 auto;
  min-height: 0;
}
#fps-details-modal .fps-summary{display:grid;gap:2px;}
#fps-details-modal .fps-details-body .row{display:flex;gap:8px;align-items:center;}
#fps-details-modal .fps-details-body .row span{color:#9ca3af;margin-right:6px;}
#fps-details-modal .fps-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:14px;
}
#fps-details-modal .fps-row span.label{
  color:#9ca3af;
  min-width:4em;
}
#fps-details-modal .fps-field{
  display:grid;
  gap:4px;
}
#fps-details-modal .fps-field label{
  font-weight:600;
  font-size:14px;
}
#fps-details-modal .fps-field .req{
  color:#b00020;
  font-size:11px;
  margin-left:4px;
}
#fps-details-modal select,
#fps-details-modal textarea{
  width:100%;
  border-radius:8px;
  border:1px solid #4b4638;
  color:#111827;
  background-color:#f9fafb;
  padding:8px 10px;
  font-size:14px;
}
#fps-details-modal textarea{
  resize:vertical;
  min-height:72px;
}
#fps-details-modal .fps-terms{
  border-radius:10px;
  border:1px solid #3a3223;
  padding:8px 10px;
  font-size:13px;
  background-color:#f9fafb;
}
#fps-details-modal .fps-terms-title{
  font-weight:700;
  margin-bottom:4px;
}
#fps-details-modal .fps-terms-text{
  max-height:160px;
  overflow-y:auto;
  margin-bottom:6px;
  padding-right:4px;
}
#fps-details-modal .fps-terms-text p{
  margin:0 0 4px;
}
#fps-details-modal .fps-terms-text ul{
  padding-left:1.2em;
  margin:0;
}
#fps-details-modal .fps-terms-text li{
  margin-bottom:2px;
}
#fps-details-modal .fps-terms-confirm{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:13px;
}
#fps-details-modal .fps-terms-confirm input{
  margin-top:2px;
}

#fps-details-modal .fps-terms-hint{
  font-size:12px;
  color:#9ca3af;
  margin:4px 0 6px;
}
#fps-details-modal .fps-terms-confirm input[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

#fps-details-modal .fps-error{
  margin-top:6px;
  color: #b00020;
  font-size:12px;
}
#fps-details-modal .fps-details-actions{
  padding:10px 16px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  background:#c9c9c2;
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-shrink: 0;
}
#fps-details-modal .btn-cancel,
#fps-details-modal .btn-ok{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #4b5563;
  background:transparent;
  cursor:pointer;
  font-weight:700;
}
#fps-details-modal .btn-ok{
  border-color:#86866C;
  background:#86866C;
  color:#111827;
}
#fps-details-modal .btn-ok[disabled]{
  opacity:.5;
  cursor:default;
}
#fps-details-modal .btn-cancel:hover{
  background:#111827;
  color: #f9fafb;
}
#fps-details-modal .btn-ok:not([disabled]):hover{
  filter:brightness(1.05);
  background: #111827;
  color: #f9fafb;
}
/* 2ndモーダル モバイル最適化 */
@media (max-width: 640px){
  #fps-details-modal .fps-details-box{
    top: max(8px, 6vh) !important;
    width: min(96vw, 560px) !important;
    max-height: calc(100svh - max(16px, 6vh) - 8px) !important;
  }
  #fps-details-modal .fps-details-header{
    padding: 10px 12px !important;
    font-size: 16px !important;
  }
  #fps-details-modal .fps-details-actions{
    padding: 10px 12px !important;
  }
  #fps-details-modal .fps-details-body{
    padding: 10px 12px !important;
    gap: 8px !important;
    font-size: 13px !important;
  }
  #fps-details-modal .fps-terms-text{
    max-height: 120px !important;
  }
  #fps-details-modal textarea{
    min-height: 56px !important;
  }
}
@media (max-width: 380px){
  #fps-details-modal .fps-details-body{
    font-size: 12px !important;
    gap: 6px !important;
  }
  #fps-details-modal .fps-terms-text{
    max-height: 100px !important;
  }
}