/* ===== ギャラリーモーダル ===== */
.gallery-modal {
	position: fixed;
	inset: 0;
	z-index: 500;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: rgba(0, 0, 0, 0.9);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.gallery-modal[open] {
	display: flex;
}

.gallery-modal::backdrop {
	background: rgba(0, 0, 0, 0.9);
}

.gallery-modal__close {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	font-size: 32px;
	color: #FFFFFF;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: background var(--transition-base);
}

.gallery-modal__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.gallery-modal__image-wrap {
	width: 100%;
	max-width: 900px;
	padding-inline: 60px;
}

.gallery-modal__image {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
}

.gallery-modal__prev,
.gallery-modal__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 40px;
	color: #FFFFFF;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: background var(--transition-base);
}

.gallery-modal__prev { left: var(--space-md); }
.gallery-modal__next { right: var(--space-md); }

.gallery-modal__prev:hover,
.gallery-modal__next:hover {
	background: rgba(255, 255, 255, 0.25);
}

.gallery-modal__counter {
	position: absolute;
	bottom: var(--space-md);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--font-size-sm);
}