/* リノベーション個別ページ専用のスタイル（C5 / C6 の機能CSS）。
   ⛔ rem を font-size に使わない。common.css:3-4 が `html { font-size: 62.5% }` を
      置いているので 1rem = 10px であり、rem で書くと意図の 1/10 の大きさになる
      （実測 2026-09-06: 概要カードのラベルが 0.84rem = 8.4px で読めなかった）。px で書く。
   ⛔ 全セレクタを body.single-renovation でスコープすること。
      テーマには .chumon-guide-entry が全 p に波及する既存バグが実在する。
   ⛔ アーカイブ一覧（archive-renovation.php）と工務店LP のリノベカードの
      スタイルはこのファイルではなく子テーマの style.css 側にある
      （.renovation-archive-list ...）。C11 の裁定 A で、このファイルは
      single 専用と決めた。enqueue の述語も is_singular('renovation') のみ。
   ⛔ セクションの視覚仕上げとレスポンシブは renovation-sections.css。
      1 ファイルが 400 行を超えたので責務で分けた（C11 ブリーフの分割規定）。 */

body.single-renovation .renovation-fv-frame {
  width: 100%;
}

/* ⛔ FV が Before/After のときに枠が二重にならないようにする。
   .youtube-price-wrapper（style.css:333）が padding 30px + 1px の枠を持ち、
   その中の .ba-slider-wrapper（before-after-slider.css:4）も同じ枠を持つため、
   動画のときは 1 本・Before/After のときだけ 2 本になっていた。
   ⛔ スコープを .youtube-price-wrapper の中に限ること。繰り下げセクション
   （#renovation_fv_fallback）と 360度ビュー（#vr_ricoh）では
   .ba-slider-wrapper の枠が唯一の枠なので、そちらは残す。 */
body.single-renovation .youtube-price-wrapper .ba-slider-wrapper {
  /* ⛔ padding だけ !important が要る。style.css:340-343 の
     `@media (max-width:767px) .ba-slider-wrapper { padding: 10px !important }`
     は詳細度に関係なく勝つので、767px 以下で内側の余白だけが戻る
     （実測 600px 幅: border 0 / padding 10px）。border 側に !important は無い。 */
  padding: 0 !important;
  border: 0;
  border-radius: 0;
}

/* 価格の黒帯（.standard-price / .price-1 / .price-2）は親テーマ post.css:1016- の
   既存デザインをそのまま使う（モデルハウスと同じ見た目にする裁定 2026-09-06）。
   ここで必要なのはモーダルのトリガーだけ — VR は span なので post.css の
   `.price-2 span` が下線を付けるが、こちらは button なので当たらない。 */
body.single-renovation .price-note-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  /* 黒帯の中では白、991px 以下で .price-2 が #333 になる箇所ではその色を継ぐ */
  color: inherit;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

body.single-renovation .modal-overlay {
  position: fixed;
  inset: 0;
  /* サイト chrome より前面に出す。ヘッダー 10000 / ドロワー 10001 /
     スマートフォンの固定下部ナビ 20000（g-style.css）より上でなければ、
     モーダル表示中も背景のナビがクリックできてしまう。
     ⚠ この値だけでは足りない — overlay は body 直下へ移してからでないと
     ヘッダーを越えられないため、renovation-modal.js が初期化時に移動させる。 */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 32, 58, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.single-renovation .modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.single-renovation .modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 84vh;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(18, 32, 58, 0.28);
}

body.single-renovation .modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  border-bottom: 1px solid #dedede;
}

body.single-renovation .modal-header h3 {
  margin: 0;
  color: #1c2b4a;
  font-size: 18px;
  font-weight: 700;
}

body.single-renovation .modal-body {
  padding: 24px 26px 30px;
  overflow-y: auto;
}

body.single-renovation .modal-close {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: #646464;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   Before / After 図面の拡大表示（ライトボックス）
   .modal-overlay の位置・重なり・開閉はそのまま使い、中身の枠だけ別に持つ。
   ========================================================================== */

body.single-renovation .renovation-ba-plan-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

body.single-renovation .renovation-plan-lightbox-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(1100px, 92vw);
  max-height: 90vh;
}

body.single-renovation .renovation-plan-lightbox-label {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

body.single-renovation .renovation-plan-lightbox-image {
  display: block;
  max-width: 100%;
  /* ラベルと余白の分を引く。引かないと縦長の図面で画像が card からはみ出す */
  max-height: calc(90vh - 60px);
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}

body.single-renovation .renovation-plan-lightbox-nav,
body.single-renovation .renovation-plan-lightbox-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1c2b4a;
  line-height: 1;
  cursor: pointer;
}

body.single-renovation .renovation-plan-lightbox-nav {
  top: 50%;
  width: 48px;
  height: 48px;
  font-size: 30px;
  transform: translateY(-50%);
}

body.single-renovation .renovation-plan-lightbox-prev {
  left: -22px;
}

body.single-renovation .renovation-plan-lightbox-next {
  right: -22px;
}

body.single-renovation .renovation-plan-lightbox-close {
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  font-size: 22px;
}

/* 矢印を画像の外へ出すと画面幅ぎりぎりで切れるので、狭い画面では内側へ入れる */
@media (max-width: 767px) {
  body.single-renovation .renovation-plan-lightbox-prev {
    left: 6px;
  }

  body.single-renovation .renovation-plan-lightbox-next {
    right: 6px;
  }

  body.single-renovation .renovation-plan-lightbox-close {
    top: 0;
    right: 0;
  }
}

body.single-renovation .renovation-radar-slot {
  width: 100%;
  /* 2 カラム 1:1 の列幅（container 1200 − gap 48 ÷ 2 = 576px）いっぱいまで
     チャートを広げる（ユーザー指示 2026-09-19「もっと大きく」）。576px で頭打ちに
     するため、列幅より少し小さい 560px を上限にする。 */
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 460 / 440;
  /* aspect-ratio を持つボックスの min-height は auto だと「内容の min-content 高さ」になる。
     下の max-height が守られている限りこの指定は縛らないが、★D がその契約を破ったときに効く:
     min-height: auto のままだと slot 自身が子の高さまで伸びて縦横比が壊れる（実測: 2000px の子で
     460x380 → 460x2000 / 比 1.21 → 0.23）。0 に固定しておけば slot は 460:440 を保ち、
     契約違反は「はみ出し」として見える。⚠ はみ出しを overflow: hidden で隠さないこと。 */
  min-height: 0;
  display: flex;
  /* ⛔ center にしない。概要カードと上端で揃えたいので、slot の中でも上寄せにする
     （2 カラムの縦位置ずれが目に付く、というユーザー指摘 2026-09-06）。 */
  align-items: flex-start;
  justify-content: center;
}

body.single-renovation .renovation-radar-slot > * {
  max-width: 100%;
  max-height: 100%;
}