/* 背景スクロール抑止（既存のまま） */
body.wpg-fixed { overflow: hidden; }

/* モーダル本体（既存のまま） */
.wpg-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.wpg-modal.is-open { display: block; }
.wpg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.9); }

/* ==== ここからレイアウトを“グリッド”にして収まるようにする ==== */
.wpg-dialog {
  position: absolute; inset: 0;
  display: grid;
  /* 左にPrev、中央に画像、右にNext */
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  /* 上段に画像、下段にキャプション（自動高さ） */
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 24px;
  align-items: center;
}

/* ナビゲーションボタン */
.wpg-btn {
  border: 0; background: rgba(255,255,255,.1); color:#fff;
  width:44px; height:44px; border-radius: 9999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:28px; line-height:1; cursor:pointer;
}
.wpg-btn:hover { background: rgba(255,255,255,.2); }

.wpg-close { position:absolute; top: 16px; right: 16px; font-size: 28px; }
.wpg-prev  { grid-column: 1; grid-row: 1 / span 2; justify-self:center; }
.wpg-next  { grid-column: 3; grid-row: 1 / span 2; justify-self:center; }

/* 画像＋キャプションの器をグリッドで分ける */
.wpg-stage {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto; /* 上:画像(縮む/伸びる), 下:キャプション */
  min-width: 0; min-height: 0; /* オーバーフロー防止の定石 */
  width: 100%;
  height: calc(100vh - 48px); /* 上下パディング分を引いた可視高 */
}

/* 画像は“常に内接（contain）”させる */
.wpg-stage img {
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* ここがポイント：縦横比を保って内接 */
  display: block;
  transition: opacity .2s ease;
  justify-self: center;
  align-self: center;
}

/* キャプションは画像の下の行に置く */
.wpg-caption {
  grid-row: 2;
  text-align: center; color: #fff; font-size: 14px; margin-top: 8px;
  min-height: 1em;
  /* キャプションがとても長い場合はスクロールさせる（任意） */
  max-height: 20vh; overflow: auto;
}

/* ページ数表示（既存のまま） */
.wpg-counter { position: absolute; bottom: 16px; right: 24px; color:#fff; font-size: 12px; opacity:.8; }

@media (max-width: 768px) {
  .wpg-dialog {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px; padding: 16px;
  }
  .wpg-btn { width:40px; height:40px; font-size:24px; }
  .wpg-stage { height: calc(100vh - 32px); } /* モバイルは余白を少なく */
}


/* 初期は透明（is-openでblockになった直後の描画を滑らかに） */
.wpg-backdrop,
.wpg-dialog {
  opacity: 0;
  transform: scale(.98);
  will-change: opacity, transform;
}

/* 変化のトランジション */
.wpg-modal.is-open .wpg-backdrop,
.wpg-modal.is-open .wpg-dialog {
  transition: opacity .3s ease, transform .3s ease;
}

/* フェードイン（open後にJSで .is-enter を付与） */
.wpg-modal.is-open.is-enter .wpg-backdrop,
.wpg-modal.is-open.is-enter .wpg-dialog {
  opacity: 1;
  transform: scale(1);
}

/* フェードアウト（close時に .is-leave を付与） */
.wpg-modal.is-open.is-leave .wpg-backdrop,
.wpg-modal.is-open.is-leave .wpg-dialog {
  opacity: 0;
  transform: scale(.985);
}

/* モーション控えめ環境配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  .wpg-modal.is-open .wpg-backdrop,
  .wpg-modal.is-open .wpg-dialog {
    transition: none;
  }
  .wpg-backdrop, .wpg-dialog {
    transform: none;
  }
}