/**
 * 画像 lightbox — 構造層
 *
 * D3 仕分け (2026-07-14 Phase 3-8): 残置 = 全画面固定オーバーレイ / 中央寄せ /
 * 表示切替 (opacity・visibility の base → .is-open チェーン) / サイズ制約 /
 * 閉じるボタンの配置・サイズ・UA リセット。
 * 意匠 (オーバーレイ色・角丸・影・タイポ・padding・hover・transition) は
 * テーマ側 css/seijuji.css Part AA が持つ (仕分け表: designs/theme.md)。
 *
 * ⚠️ opacity / visibility は base (0 / hidden) と .is-open (1 / visible) の
 * 上書きチェーンなので必ず両方ここに置く (ファイル間で割ると head 出力順で
 * 勝敗が変わる。GOTCHAS「テーマ CSS と block CSS の head 出力順」派生パターン)。
 */

/* 全画面オーバーレイ — JS が body 直下に生成する */
.seijuji-common-lightbox {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999; /* サイトの固定ヘッダより前面 */
	opacity: 0;
	visibility: hidden;
}
.seijuji-common-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

/* 画像 + 閉じるボタンのラッパ */
.seijuji-common-lightbox__inner {
	position: relative;
	max-width: 92vw;
	max-height: 88vh;
}

/* 拡大画像 — viewport に収める */
.seijuji-common-lightbox__img {
	display: block;
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
}

/* 閉じる ✕ ボタン — 画像右上 */
.seijuji-common-lightbox__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 40px;
	height: 40px;
	padding: 0; /* UA リセット */
	border: none; /* UA リセット */
	cursor: pointer;
}

/* SP — 閉じるボタンが画面外に出ないよう内側に寄せる */
@media (max-width: 600px) {
	.seijuji-common-lightbox__close {
		top: 6px;
		right: 6px;
		width: 36px;
		height: 36px;
	}
}