/* =========================================================
   LIGHTBOX（背景70%・ぼかし完全なし・PC/スマホ統一版）
   - 背景の暗さ：70%（PC・スマホ共通）
   - 背景ぼかし：完全になし
   - 青い選択/ドラッグ防止
   - ズームUI完全非表示
   ========================================================= */

/* ---------------------------------------------------------
   0) 基本設定：選択・ドラッグ防止
   --------------------------------------------------------- */
#lightbox,
#lb,
.lightbox,
.lb,
#lightbox-overlay,
#lb-overlay,
.lightbox-overlay,
.lb-overlay,
#lightbox-backdrop,
#lb-backdrop,
.lightbox-backdrop,
.lb-backdrop,
#x-lightbox,
#lightbox *,
#lb *,
.lightbox *,
.lb *,
#lightbox-overlay *,
#lb-overlay *,
.lightbox-overlay *,
.lb-overlay *,
#lightbox-backdrop *,
#lb-backdrop *,
.lightbox-backdrop *,
.lb-backdrop *,
#x-lightbox * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ---------------------------------------------------------
   1) 既存WP系ライトボックスの背景は透明のまま
   --------------------------------------------------------- */
#lightbox,
#lb,
.lightbox,
.lb,
#lightbox-overlay,
#lb-overlay,
.lightbox-overlay,
.lb-overlay,
#lightbox-backdrop,
#lb-backdrop,
.lightbox-backdrop,
.lb-backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------------------------------------------------------
   2) ★重要★ 自作ライトボックス#x-lightboxの背景設定
   --------------------------------------------------------- */
#x-lightbox {
  /* 背景色：黒の70%不透明 */
  background-color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  
  /* ★背景ぼかしを完全に削除★ */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  
  /* なめらかな表示アニメーション */
  transition: background 0.3s ease !important;
}

/* ---------------------------------------------------------
   3) 拡大画像の設定（PC用）
   --------------------------------------------------------- */
#x-lightbox img {
  max-width: 80vw !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  
  /* 暗い背景に映える影 */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* ---------------------------------------------------------
   4) 既存ライトボックス互換設定
   --------------------------------------------------------- */
#lightbox img,
#lb img,
.lightbox img,
.lb img,
#lightbox-overlay img,
#lb-overlay img,
.lightbox-overlay img,
.lb-overlay img,
#lightbox-backdrop img,
#lb-backdrop img,
.lightbox-backdrop img,
.lb-backdrop img {
  max-width: 72vw !important;
  max-height: 72vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}

/* ---------------------------------------------------------
   5) WPのズームUI完全非表示
   --------------------------------------------------------- */
.wp-block-image__button,
.wp-block-image .wp-element-button,
.wp-block-image .wp-block-image__link,
.wp-block-image .components-button,
.wp-block-image .components-icon-button,
.wp-block-image .wp-block-image__caption,
.wp-block-image .wp-block-image__overlay,
.wp-block-image .wp-block-image__zoom,
.wp-block-image .wp-block-image__zoom-button,
.wp-block-image .wp-block-image__lightbox,
.wp-block-image .wp-block-image__lightbox-button,
.wp-block-image [class*="zoom"],
.wp-block-image [class*="lightbox"],
.wp-block-image [class*="modal"],
.wp-block-image button,
.wp-block-image a[aria-label*="拡大"],
.wp-block-image a[aria-label*="Zoom"],
.wp-block-image a[aria-label*="zoom"],
.wp-block-image a[aria-label*="拡大表示"],
.wp-block-image a[title*="拡大"],
.wp-block-image a[title*="Zoom"],
.wp-block-image a[title*="zoom"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.wp-block-image::before,
.wp-block-image::after,
.wp-block-image figure::before,
.wp-block-image figure::after,
.wp-block-image a::before,
.wp-block-image a::after,
figure.wp-block-image::before,
figure.wp-block-image::after,
figure.wp-block-image a::before,
figure.wp-block-image a::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   6) カーソル設定
   --------------------------------------------------------- */
.x-loop-wrap img,
.x-loop-wrap a,
.x-loop-wrap figure {
  cursor: default !important;
}

/* ---------------------------------------------------------
   7) ★スマホ対応★（ぼかし完全削除・70%背景統一）
   --------------------------------------------------------- */
@media (max-width: 1023px) {
  /* スマホでも背景色70%を強制適用 */
  #x-lightbox {
    background-color: rgba(0, 0, 0, 0.7) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    
    /* ★重要：スマホでもぼかしを完全に無効化★ */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* スマホでは画像をより大きく表示 */
  #x-lightbox img {
    max-width: 95vw !important;
    max-height: 85vh !important;
  }
}