/* 画像拡大ユーティリティの調整CSS（docs/utility-classes.md §F・lightbox.js とセット）。
 *
 * medium-zoom（.zoom）のオーバーレイ／拡大画像のデフォルト z-index は 100/101 で、
 * サイトの固定ヘッダー（.site-header＝sticky・z-index:100）やメニュー drawer（最大 z-index:200）
 * より下に潜ってしまう。拡大時はそれらより前面に出したいので引き上げる。
 *
 * GLightbox（.lightbox）は自前で z-index:999999 を持つため調整不要。
 */
.medium-zoom-overlay { z-index: 9000; }
.medium-zoom-image--opened { z-index: 9001; }

/* 拡大時の背景はサイト最暗色（--col-z）を 80% 不透明に（20%透けて奥行きが出る）。
   medium-zoom は overlay に inline style で背景（既定 #fff）を入れるため !important で上書きする。
   color-mix 非対応ブラウザ用に、先に不透明の単色をフォールバックで置く。 */
.medium-zoom-overlay {
  background: var(--col-z, #1a1a1a) !important;
  background: color-mix(in srgb, var(--col-z, #1a1a1a) 80%, transparent) !important;
}