/* =========================================================================
   scenes-misc.css — 上質な演出の共有レイヤー(D+E グループ 6ページ共用)
   対象: contact / book-short-consult / thanks / booking-return / company / privacy
   方針: 予約フォーム・決済シェル・ステータス確認の機能を一切阻害しない。
         装飾は擬似要素のみで完結させ、機能ノードには transform/opacity を載せない。
         reveal / split / scramble 本体は motion.js / motion.css / site.css が担う。
         本ファイルは motion.css の直後に読み込む。
   ========================================================================= */

/* --- リーガルページ: セクション見出しのゴールド下線(reveal に同期して描画)- */
.legal-page .legal-section h2 {
  position: relative;
  padding-bottom: 14px;
}

.legal-page .legal-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 820ms cubic-bezier(0.19, 0.9, 0.22, 1) 140ms;
}

.legal-page .legal-section.is-visible h2::after {
  transform: scaleX(1);
}

/* --- リーガルページ: 見出し(legal-hero h1)のゴールド下線(読み込み時に描画)- */
.legal-page .legal-hero h1 {
  position: relative;
  padding-bottom: 20px;
}

.legal-page .legal-hero h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform: scaleX(0);
  transform-origin: left center;
  animation: qqmisc-underline 900ms cubic-bezier(0.19, 0.9, 0.22, 1) 260ms both;
}

@keyframes qqmisc-underline {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* --- ステータスページ: 確認見出しのゴールド下線(status-panel の reveal に同期)- */
.status-panel h1 {
  position: relative;
  padding-bottom: 18px;
}

.status-panel h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 820ms cubic-bezier(0.19, 0.9, 0.22, 1) 200ms;
}

.status-panel.is-visible h1::after {
  transform: scaleX(1);
}

/* --- reduced-motion: 下線は最終状態で静止(描画アニメーションなし)---------- */
@media (prefers-reduced-motion: reduce) {
  .legal-page .legal-section h2::after,
  .legal-page .legal-hero h1::after,
  .status-panel h1::after {
    transform: scaleX(1);
    transition: none;
    animation: none;
  }
}

/* =========================================================================
   book-short-consult: 予約フォームのモーダル(時間枠選択後にフォームを表示)
   - .checkout-shell は STEP 03 に残るため、本モーダルはその祖先にならない。
   - transform は dialog ラッパのみに付与し、フォーム(.form-panel)自体には載せない。
   ========================================================================= */
.booking-form-hint {
  margin: 16px 0 20px;
  color: rgba(245, 239, 229, 0.62);
  font-size: 14px;
  line-height: 1.85;
  font-weight: 600;
}

body.booking-modal-open {
  overflow: hidden;
}

.booking-modal[hidden] {
  display: none;
}

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 3vw, 40px);
}

.booking-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 11, 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.booking-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(90vh, 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 22px;
  border: 1px solid rgba(245, 239, 229, 0.16);
  background: linear-gradient(180deg, rgba(30, 35, 37, 0.98), rgba(20, 24, 26, 0.985));
  box-shadow: 0 44px 130px rgba(0, 0, 0, 0.55);
  animation: booking-modal-in 260ms cubic-bezier(0.19, 0.9, 0.22, 1) both;
}

@keyframes booking-modal-in {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.booking-modal-dialog:focus {
  outline: none;
}

.booking-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.booking-modal-head h2 {
  margin: 6px 0 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--cream);
}

.booking-modal-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(245, 239, 229, 0.22);
  background: transparent;
  color: rgba(245, 239, 229, 0.86);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.booking-modal-close:hover {
  background: rgba(245, 239, 229, 0.1);
  border-color: rgba(245, 239, 229, 0.42);
}

@media (max-width: 640px) {
  .booking-modal {
    padding: 0;
  }

  .booking-modal-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-modal-dialog {
    animation: none;
  }
}

/* 時間枠選択後に現れる「この日時で入力に進む」CTA(パネル下)
   .button は display:inline-flex 等を持つため、hidden 属性を明示的に無効化する。 */
.booking-open-cta {
  width: 100%;
  margin-top: 20px;
}

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

/* モーダル内フォームは PC で2カラム化して縦長を緩和(.form-wide / .choice-field は全幅のまま)*/
@media (min-width: 700px) {
  .booking-modal-dialog .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   予約カレンダー: 空きなし枠(×)と 残n枠 バッジ(booking.js のレンダリングと対)
   ========================================================================= */

/* 時間枠: 空きなし(×)は無効化した淡いピル。「予約済み」表記は使わず × と aria で示す。 */
.slot-button.is-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
  border-color: rgba(17, 16, 14, 0.16);
  background: rgba(17, 16, 14, 0.045);
  color: rgba(17, 16, 14, 0.4);
  font-weight: 800;
  cursor: not-allowed;
}

.slot-button.is-full .slot-mark {
  font-size: 15px;
  line-height: 1;
  color: rgba(17, 16, 14, 0.5);
}

/* 日付セル: 数字の下に残枠バッジを出すため縦並びにし、既存のゴールドのドットは非表示 */
.cal-day {
  min-height: 54px;
}

button.cal-day.is-available {
  flex-direction: column;
  gap: 1px;
  padding: 5px 0;
}

button.cal-day.is-available::after {
  display: none;
}

.cal-remaining {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--gold-deep);
}

button.cal-day.is-selected .cal-remaining {
  color: rgba(0, 0, 0, 0.72);
}

/* 空きなしの営業日: ドット無し・薄い × マーク。クリック不可の span のまま。 */
.cal-day.is-full-day {
  flex-direction: column;
  gap: 1px;
  color: rgba(17, 16, 14, 0.32);
  cursor: not-allowed;
}

.cal-day.is-full-day .cal-full-mark {
  font-size: 10px;
  line-height: 1;
  color: rgba(17, 16, 14, 0.34);
}

@media (max-width: 560px) {
  .cal-day {
    min-height: 48px;
  }

  .cal-remaining {
    font-size: 8px;
  }
}