/* =========================================
   site-bg.css  – 最終背景“だけ”を描画する受け皿
   - 前提：<style id="haiboku-bg-vars"> で --site-bg-final が出力済み
   - 読込順：dark-theme.css の“後”、かつ最後寄りで enqueue
   ========================================= */

/* 1) 最終背景を描画（後勝ち + !important で確実に） */
html,
body.has-site-bg {
  /* url(...) / linear-gradient(...) / #xxxxxx いずれも想定 */
  background: var(--site-bg-final, #000000) !important;
  /* iOSでの不一致回避（fixedは値に含める前提のためここでは指定しない） */
  background-attachment: initial !important;
}

/* 2) 主要ラッパを透過化（必要最小限） */
body.has-site-bg .site,
body.has-site-bg #page,
body.has-site-bg .site-header,
body.has-site-bg header.site-header,
body.has-site-bg .site-content,
body.has-site-bg .content-area,
body.has-site-bg main,
body.has-site-bg .wrap,
body.has-site-bg .container,
body.has-site-bg .page,
body.has-site-bg .entry-content,
body.has-site-bg footer,
body.has-site-bg .site-footer,
body.has-site-bg .header-and-banner-bg {
  background: transparent !important;
}

/* 3) よくある直指定の無効化（最小の上書きセット） */
body.has-site-bg .card,
body.has-site-bg .section,
body.has-site-bg .widget,
body.has-site-bg .news-section,
body.has-site-bg .pickup-heroine,
body.has-site-bg .cast-description,
body.has-site-bg .cast-video,
body.has-site-bg .cast-options,
body.has-site-bg .cast-comment,
body.has-site-bg .manager-comment {
  /* 各テンプレで background が直指定されている場合の保険 */
  background-color: transparent !important;
  background-image: none !important; /* 内側で画像を敷いていた場合を打ち消す */
}

/* 4) 背景画像を使うモード時の見栄え保険
   - --site-bg-final が url(...) の場合を想定
   - 子要素が100vh未満だと“途切れ”に見える対策（任意） */
@supports (min-height: 100dvh) {
  body.has-site-bg {
    min-height: 100dvh;
  }
}
@supports not (min-height: 100dvh) {
  body.has-site-bg {
    min-height: 100vh;
  }
}

/* 5) 予防的なスクロール挙動の安定化（任意） */
html, body.has-site-bg {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important; /* 画像/グラデ両対応 */
}

/* 6) デバッグ用（必要時だけコメントアウト解除して可視化）
body.has-site-bg::before {
  content: "DBG: " attr(data-bg-mode);
  position: fixed; inset: 8px auto auto 8px;
  padding: 4px 8px; font: 12px/1.4 monospace;
  color: #fff; background: rgba(0,0,0,.5); z-index: 99999;
}
*/
/* 画像モード時は background-image を個別に後勝ちさせる */
body.has-site-bg.site-bg-image {
  background-image: var(--site-bg-image) !important; /* url(...) だけ個別上書き */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* =========================
   Section gap – tighten
   ========================= */
:root {
  /* お好みで数字だけ触ればOK（px / rem どちらでも） */
  --section-gap-tight: 10px;   /* スマホ */
  --section-gap-tight-md: 16px;/* タブレット */
  --section-gap-tight-lg: 20px;/* PC */
}

/* 1) バナー直下の余白を詰める（margin/padding両対応で後勝ち） */
.header-and-banner-bg,
.top-banner,
.swiper,
.swiper-container,
.swiper-wrapper {
  margin-bottom: var(--section-gap-tight) !important;
  padding-bottom: 0 !important;
}

/* 2) コンテンツ側の“上マージン暴れ”を抑制 */
.site-content,
.content-area,
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Gutenberg 等の最初の要素の上マージンをリセット */
.entry-content > :first-child {
  margin-top: 0 !important;
}
.entry-content > :last-child {
  margin-bottom: 0; /* 末尾の余白ダブりも防止（任意） */
}

/* 4) ブロック全体の段落間隔を控えめに（Gutenbergの block-gap） */
body {
  --wp--style--block-gap: 0.75rem; /* 例: 12px */
}
.is-layout-flow > * + * {
  margin-block-start: var(--wp--style--block-gap);
}

/* 5) 画面幅に応じてわずかに広げる（読みやすさ確保） */
@media (min-width: 768px) {
  .header-and-banner-bg,
  .top-banner,
  .swiper,
  .swiper-container,
  .swiper-wrapper {
    margin-bottom: var(--section-gap-tight-md) !important;
  }
}
@media (min-width: 1024px) {
  .header-and-banner-bg,
  .top-banner,
  .swiper,
  .swiper-container,
  .swiper-wrapper {
    margin-bottom: var(--section-gap-tight-lg) !important;
  }
}

/* 6) 任意ユーティリティ（このクラスを付けた区間だけさらに詰める） */
.gap-tight {
  margin-bottom: calc(var(--section-gap-tight) / 2) !important;
  padding-bottom: 0 !important;
}
.gap-none {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}