/* ====================================================================
 * CK Simulator + Footer Bar - Stylesheet
 *
 * 配置先: candy-kobe/assets/css/simulator.css (Xserver上のテーマフォルダ配下)
 * 読み込み: functions.php から wp_enqueue_style で全ページ読み込み
 * 仕様: シミュレータ/DECISION.md を参照
 *
 * 設計方針 (CLAUDE.md 2.1節準拠):
 * - 基準幅 402px、すべてのpx値は402px基準絶対値で記述
 * - 縦方向のviewport依存余白 (シミュレータの上部20%) のみ vh 単位
 * - デザイン定数 (フッターバー容器66px、画面下からの余白0px、シミュレータ下端66px等) は固定px
 * - フッターバー/シミュレータシートは fixed要素のため、独立レイヤーで scale 適用
 *   (CLAUDE.md 2.1節「fixed 要素の例外」を踏襲)
 *
 * 既存 .cta-button 共通規格 (CLAUDE.md 3.5節) は変更せず、
 * 新規 .cta-button--simulator-book を追加修飾子として定義する。
 * ==================================================================== */


/* ============================================================
 * CSS変数 (--scale は既存 style.css に定義されている想定だが念のため再定義)
 * ============================================================ */

html {
  --scale: min(1, calc(100vw / 402px));
}


/* ============================================================
 * body スクロールロック (シート展開中)
 * ============================================================ */

body.ck-lock {
  overflow: hidden;
  touch-action: none;
}


/* ============================================================
 * フッターバー
 * ============================================================ */

#ck-fbar {
  position: fixed;
  bottom: 0; /* 画面下端ぴったり (2026-09-02 オーナー指示。旧: 55px の余白あり) */
  left: 50%;
  width: 402px;
  z-index: 9990;
  pointer-events: none;
  transform: translateX(-50%) translateY(110%) scale(var(--scale, 1));
  transform-origin: bottom center;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ck-fbar.is-visible {
  transform: translateX(-50%) translateY(0) scale(var(--scale, 1));
  pointer-events: auto;
}

#ck-fbar .ck-fbar-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
}

/* 容器ボタン共通 */
.ck-fbar-btn {
  position: relative;
  display: block;
  width: 132px;
  height: 66px;
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/fotter_button.png');
  background-size: 132px 66px;
  background-repeat: no-repeat;
  box-shadow: 4.5px 7.8px 6px 0 rgba(0, 0, 0, 0.32);
  border: 0;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  color: #394148;
  transition: opacity 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ck-fbar-btn:active {
  transform: translateY(1px);
  opacity: 0.95;
}

/* アイコン共通 */
.ck-fbar-icon {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* 左セクション (あんしん金額シミュレーション): pinアイコン左 + 2行テキスト右 */
.ck-fbar-icon--pin {
  left: 8px;
  bottom: 20px;
  height: 23px;
  width: auto; /* PNG縦横比維持 */
}

.ck-fbar-text--sim {
  position: absolute;
  left: 31px;
  bottom: 17px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 11px; /* 要件定義書では8px指定だったが、ワイヤーとの整合性で11pxに調整 (Phase 3 動作確認時) */
  line-height: 1.0;
  color: #394148;
  text-align: left;
  letter-spacing: 0;
}

/* 中セクション (予約する) / 右セクション (TEL): アイコン上 + テキスト下 */
.ck-fbar-icon--check,
.ck-fbar-icon--phone {
  left: 57px;
  bottom: 30px;
  width: 18px;
  height: 18px;
}

.ck-fbar-text--res,
.ck-fbar-text--tel {
  /* 容器中央に配置 (要件定義書の left:44px は「予約する」4文字を仮定した中央配置値で
     「TEL」3文字には適用できないため、text-align:center で容器中央配置に変更) */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 11.6px;
  line-height: 1.0;
  color: #394148;
  letter-spacing: 0;
  text-align: center;
}

/* シミュレータ展開中の状態 */
#ck-fbar.is-sheet-open .ck-fbar-btn--sim {
  outline: 1.5px solid #394148;
  outline-offset: -1.5px;
  background-color: #f0f1f5;
  background-blend-mode: multiply;
}

#ck-fbar.is-sheet-open .ck-fbar-btn--res {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}


/* ============================================================
 * シミュレータシート
 * ============================================================ */

#ck-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 100000;
  visibility: hidden;
  pointer-events: none;
}

#ck-sheet-wrap.is-open {
  visibility: visible;
  pointer-events: auto;
}

#ck-sheet-cover {
  /* 「最上位レイヤー、URLは変わらない感」を実現するため、
   * 背景全体への暗いオーバーレイは使わず、シート自体の背景を半透明にする。
   * このカバーはクリック検出用の透明なヒットエリアのみ。 */
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

#ck-sheet {
  position: fixed;
  top: 20vh;
  bottom: 66px; /* フッターバー66px + 画面下余白0px。フッターバー上端と密着 */
  left: 50%;
  width: 362px; /* 402 - 20×2 (左右5%余白) */
  background: rgba(255, 255, 255, 0.9); /* 背景10%透過 (枠のみ) */
  color: #2a2a2a;
  border-radius: 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(100%) scale(var(--scale, 1));
  transform-origin: top center;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity   220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ck-sheet-wrap.is-open #ck-sheet {
  transform: translateX(-50%) translateY(0) scale(var(--scale, 1));
  opacity: 1;
}

#ck-sheet .ck-sheet-body {
  padding: 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}


/* ============================================================
 * 見出し (CLAUDE.md 3.2.3 LP共通規格に準拠)
 * .section-heading--lp は既存 style.css の定義に依存。
 * .section-heading-sub は既存 style.css に未定義のため、本ファイルで
 * 完全補完する (シミュレータシート内のスコープ限定)。
 * ============================================================ */

#ck-sheet .section-heading--lp {
  margin-top: 0;
}

/* 日本語サブ見出し: CLAUDE.md 3.2.3 LP規格を踏襲した完全定義 */
#ck-sheet .section-heading-sub {
  font-family: 'Yu Gothic', YuGothic, '游ゴシック', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 16.6px;
  color: #2a2a2a;
  text-align: center;
  line-height: 1;
  margin-top: 11px; /* LP英語見出しからの距離 (赤平行四辺形オーバーフロー6px + 視覚余白5px) */
}


/* ============================================================
 * 入力フォーム (4選択ボックス + チェックボックス)
 * ============================================================ */

.psim-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.psim-select {
  width: 320px;
  height: 40px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: #2a2a2a;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 32px 0 12px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%232a2a2a' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.psim-select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

/* チェックボックス: 「派遣エリアを選ぶ」容器の下方向7px */
.psim-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 320px;
  margin-top: 7px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #2a2a2a;
  cursor: pointer;
  user-select: none;
}

.psim-checkbox input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}


/* ============================================================
 * 計算結果出力
 * ============================================================ */

.psim-result {
  margin-top: 24px;
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
}

.psim-result:empty {
  margin-top: 0;
}

.psim-amount {
  font-family: 'BIZ UDPGothic', sans-serif;
  font-weight: 700;
  font-size: 21.3px;
  color: #39415a;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* 「+ 遠方交通費*」(loc5選択時のみ表示): 15px */
.psim-amount-suffix {
  font-size: 15px;
}

/* 「*」マーク: 赤 */
.psim-asterisk {
  color: #c1462e;
}

.psim-detail {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  padding: 0 12px;
  line-height: 1.5;
}

.psim-error {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #c1462e;
}


/* ============================================================
 * CTAボタン「このセラピストを指名する」(CLAUDE.md 3.5節 CTA共通規格を踏襲)
 *
 * 注意: 既存の .cta-button / .cta-button--online 等の値は変更せず、
 * 新規修飾子クラス .cta-button--simulator-book を追加する。
 * 共通規格の width:301px / height:53px / Noto Sans JP Bold 17.5px /
 * color:#fcfbff / letter-spacing:0.02em / background-size:301px 53px
 * は既存定義に準拠 (= ここでは画像URLのみ指定)。
 * ============================================================ */

.psim-cta {
  margin-top: 16px;
  text-align: center;
}

.psim-cta[hidden] {
  display: none;
}

.cta-button--simulator-book {
  /* 共通規格 (3.5節) 準拠: width 301 / height 53 / font 17.5 / color #fcfbff / letter-spacing 0.02em */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 301px;
  height: 53px;
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/button_online_booking.png');
  background-size: 301px 53px;
  background-repeat: no-repeat;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17.5px;
  color: #fcfbff;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin: 0 auto;
  box-sizing: border-box;
}


/* ============================================================
 * loc5「その他」選択時の注意書きテキスト
 * ============================================================ */

.psim-loc5-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: #c1462e;
  margin-top: 14px;
  text-align: left;
  padding: 0 12px;
}

.psim-loc5-note[hidden] {
  display: none;
}