/**
 * css/pages/single-gallery.css
 * ============================================================
 * A LEGEND 2：GALLERY Single
 * ============================================================
 *
 * 役割：
 * - gallery詳細ページ固有の画像一覧とLightbox導線を装飾します。
 *
 * 今回の改修：
 * - GALLERY詳細のeyebrow色は既存どおり --aleg2-color-secondary を維持します。
 * - 画像一覧カードの角丸を --aleg2-radius-media へ接続します。
 * - 画像一覧カードの影を --aleg2-shadow-card へ接続します。
 * - Lightbox hover overlay の固定黒 rgba(0,0,0,0.42) を
 *   --aleg2-overlay-strong へ置換します。
 * - hover時の画像拡大率を --aleg2-card-image-hover-zoom へ接続します。
 * - キーボード操作用の focus-visible を追加します。
 * - prefers-reduced-motion 時は画像hover拡大を抑制します。
 * - 既存セレクタ・既存HTML構造・グリッド列数・レスポンシブ挙動は維持します。
 *
 * 今回の追加改修：
 * - template-parts/single/gallery-media.php が出力する
 *   画像・動画混在メディア表示を装飾します。
 * - 旧A LEGEND互換メタ _gal_media の並び順で出力される画像・動画を、
 *   GALLERY詳細ページ専用のグリッドとして表示します。
 * - 動画 attachment / 旧 _gal_video_urls の video 表示に対応します。
 * - 既存の .aleg2-single-gallery-images 系はフォールバック・旧構造用として維持します。
 * - 新しい .aleg2-single-gallery__media 系は、他投稿タイプへ影響しないよう
 *   .aleg2-single--gallery 配下を中心に限定します。
 *
 * 今回の追加改修（Gallery Split Viewer 寸法モデル再定義）：
 * - PC同期中のGallery詳細を、画像の自然高さへ依存しない viewport 単位スライドモデルへ統一します。
 * - 各 media item を固定窓と同じ高さに揃え、trackHeight は JS が viewportHeight × mediaCount を基準に算出します。
 * - 画像・動画は標準 cover で固定窓を埋め、2枚目以降の used height が 1500px などへ暴れて
 *   黒い余白と右テキスト固定解除タイミングのズレを生む問題を根本から防ぎます。
 * - contain 表示へ拡張できるよう data-aleg2-gallery-fit と CSS変数の受け口は残します。
 * - SP / reduced layout では sticky / transform / 固定heightを解除し、通常の縦積み表示へ戻します。
 */

/* ------------------------------------------------------------
 * Single header eyebrow
 * ------------------------------------------------------------
 *
 * GALLERY詳細ページの小見出し色です。
 *
 * GALLERYはビジュアル系コンテンツとして、secondary色を使い、
 * BLOG / NEWS / APPLICATION と印象を分けます。
 */
.aleg2-single--gallery .aleg2-single-header__eyebrow {
	color: var(--aleg2-color-secondary);
}

/* ------------------------------------------------------------
 * Gallery images grid
 * ------------------------------------------------------------
 *
 * GALLERY詳細ページ内の画像一覧です。
 *
 * 既存構造：
 * - PC：3カラム
 * - tablet：2カラム
 * - SP：1カラム
 *
 * 幅は --aleg2-container-lg を使い、本文より少し広めに画像を見せます。
 */
.aleg2-single-gallery-images {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--aleg2-space-4);
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin: 0 auto var(--aleg2-space-10);
}

/* ------------------------------------------------------------
 * Gallery image item
 * ------------------------------------------------------------
 *
 * 画像1件分のリンクカードです。
 *
 * Lightbox導線になる想定のため、hover / focus時に
 * overlayとfocus ringで操作対象であることを示します。
 */
.aleg2-single-gallery-images__item {
	position: relative;
	display: block;
	overflow: hidden;
	color: var(--aleg2-color-text);
	text-decoration: none;
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-media);
	box-shadow: var(--aleg2-shadow-card);
	isolation: isolate;
	transition:
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * Lightbox用hover overlay。
 *
 * 旧コードでは rgba(0,0,0,0.42) の固定黒でした。
 * 今回は --aleg2-overlay-strong を使い、
 * デザインプリセットや背景設定に馴染むoverlayへ接続します。
 */
.aleg2-single-gallery-images__item::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	content: "+";
	color: var(--aleg2-color-on-inverse);
	font-family: var(--aleg2-font-latin);
	font-size: 2rem;
	font-weight: 300;
	background: var(--aleg2-overlay-strong);
	opacity: 0;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * hover状態。
 *
 * 既存のoverlay表示は維持しつつ、枠線と影も少し強調します。
 */
.aleg2-single-gallery-images__item:hover {
	color: var(--aleg2-color-text);
	text-decoration: none;
	border-color: var(--aleg2-color-secondary);
	box-shadow: var(--aleg2-shadow-panel);
}

.aleg2-single-gallery-images__item:hover::after {
	opacity: 1;
}

/**
 * hover liftが有効な場合だけ、画像カードを少し持ち上げます。
 */
body.aleg2-buttons-hover-lift .aleg2-single-gallery-images__item:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/**
 * キーボード操作時のフォーカス表示。
 *
 * Lightboxをキーボードで開く場合にも現在位置が分かるようにします。
 */
.aleg2-single-gallery-images__item:focus-visible {
	outline: none;
	border-color: var(--aleg2-color-secondary);
	box-shadow:
		var(--aleg2-shadow-card),
		var(--aleg2-focus-ring);
}

.aleg2-single-gallery-images__item:focus-visible::after {
	opacity: 1;
}

/* ------------------------------------------------------------
 * Gallery image
 * ------------------------------------------------------------
 *
 * 画像本体です。
 *
 * 既存の 4:5 比率・cover表示は維持します。
 */
.aleg2-single-gallery-images__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--aleg2-duration-slow) var(--aleg2-ease-emphasized);
}

/**
 * hover時の画像拡大。
 *
 * 旧コードでは scale(1.06) 固定でした。
 * 今回は content.card.image_hover_zoom 由来の
 * --aleg2-card-image-hover-zoom へ接続します。
 */
.aleg2-single-gallery-images__item:hover .aleg2-single-gallery-images__image,
.aleg2-single-gallery-images__item:focus-visible .aleg2-single-gallery-images__image {
	transform: scale(var(--aleg2-card-image-hover-zoom));
}

/* ------------------------------------------------------------
 * Gallery media block
 * ------------------------------------------------------------
 *
 * 新しいGALLERY専用メディア表示です。
 *
 * template-parts/single/gallery-media.php が出力します。
 * _gal_media の画像・動画混在順をそのまま表示するため、
 * 画像だけの旧 .aleg2-single-gallery-images とは別の構造にしています。
 */
.aleg2-single--gallery .aleg2-single-gallery__media {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin: 0 auto var(--aleg2-space-10);
}

/**
 * メディア一覧。
 *
 * 画像と動画が混在しても均一な見た目になるように、
 * 既存のGALLERY画像一覧と同じ3カラムを基本にします。
 */
.aleg2-single--gallery .aleg2-single-gallery__media-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--aleg2-space-4);
	margin: 0;
	padding: 0;
}

/**
 * メディア1件分。
 *
 * figure要素として出力されるため、ブラウザ既定のmarginを消します。
 */
.aleg2-single--gallery .aleg2-single-gallery__media-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--aleg2-color-text);
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-media);
	box-shadow: var(--aleg2-shadow-card);
	isolation: isolate;
	transition:
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-single--gallery .aleg2-single-gallery__media-item:hover {
	border-color: var(--aleg2-color-secondary);
	box-shadow: var(--aleg2-shadow-panel);
}

body.aleg2-buttons-hover-lift .aleg2-single--gallery .aleg2-single-gallery__media-item:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/* ------------------------------------------------------------
 * Gallery media image / video
 * ------------------------------------------------------------
 *
 * 画像・動画本体です。
 *
 * 旧GALLERY画像一覧の 4:5 比率を踏襲しつつ、
 * videoも同じ枠に収めて、混在時のグリッド崩れを防ぎます。
 */
.aleg2-single--gallery .aleg2-single-gallery__image,
.aleg2-single--gallery .aleg2-single-gallery__video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--aleg2-color-surface-2);
}

.aleg2-single--gallery .aleg2-single-gallery__image {
	transition: transform var(--aleg2-duration-slow) var(--aleg2-ease-emphasized);
}

.aleg2-single--gallery .aleg2-single-gallery__media-item:hover .aleg2-single-gallery__image {
	transform: scale(var(--aleg2-card-image-hover-zoom));
}

/**
 * video表示の補助。
 *
 * 動画はcontrolsの高さやブラウザUIによって見え方が変わるため、
 * 背景色を敷いて余白が出ても不自然になりにくくします。
 */
.aleg2-single--gallery .aleg2-single-gallery__video {
	height: auto;
	min-height: 100%;
}

/* ------------------------------------------------------------
 * Gallery caption
 * ------------------------------------------------------------
 *
 * attachment title を figcaption として表示します。
 *
 * 将来的に素材ごとのキャプションを追加する場合も、
 * まずはこのクラスを拡張して扱えるようにします。
 */
.aleg2-single--gallery .aleg2-single-gallery__caption {
	padding: var(--aleg2-space-3);
	color: var(--aleg2-color-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.7;
	background: var(--aleg2-color-surface);
	border-top: 1px solid var(--aleg2-color-border);
}

/* ------------------------------------------------------------
 * Legacy video marker
 * ------------------------------------------------------------
 *
 * 旧 _gal_video_urls から出力された動画に付与される補助クラスです。
 * 見た目は通常動画と同じにし、必要になった場合だけここへ差分を追加します。
 */
.aleg2-single--gallery .aleg2-single-gallery__media-item--legacy-video {
	/* 旧URL動画も通常動画と同じカードとして扱います。 */
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存の 900px / 540px ルールは維持します。
 */
@media (max-width: 900px) {
	.aleg2-single-gallery-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aleg2-single--gallery .aleg2-single-gallery__media-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.aleg2-single-gallery-images {
		grid-template-columns: 1fr;
	}

	.aleg2-single--gallery .aleg2-single-gallery__media-list {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------
 * Reduced Motion
 * ------------------------------------------------------------
 *
 * OS側で「視差効果を減らす」が有効な場合は、
 * 画像hover拡大やカード移動を止めます。
 */
@media (prefers-reduced-motion: reduce) {
	.aleg2-single-gallery-images__item,
	.aleg2-single-gallery-images__image,
	.aleg2-single--gallery .aleg2-single-gallery__media-item,
	.aleg2-single--gallery .aleg2-single-gallery__image {
		transition: none;
	}

	.aleg2-single-gallery-images__item:hover,
	body.aleg2-buttons-hover-lift .aleg2-single-gallery-images__item:hover,
	.aleg2-single--gallery .aleg2-single-gallery__media-item:hover,
	body.aleg2-buttons-hover-lift .aleg2-single--gallery .aleg2-single-gallery__media-item:hover {
		transform: none;
	}

	.aleg2-single-gallery-images__item:hover .aleg2-single-gallery-images__image,
	.aleg2-single-gallery-images__item:focus-visible .aleg2-single-gallery-images__image,
	.aleg2-single--gallery .aleg2-single-gallery__media-item:hover .aleg2-single-gallery__image {
		transform: none;
	}
}

/* ------------------------------------------------------------
 * Gallery Single base reset
 * ------------------------------------------------------------
 *
 * A LEGEND 2 の single 共通土台は背景演出用に overflow:hidden を持ちます。
 * しかし Gallery 詳細の旧A LEGEND型 split scroll は position:sticky を
 * 祖先の overflow に阻害されやすいため、Gallery詳細だけ visible へ戻します。
 * BLOG / NEWS / APPLICATION / PAGE へ副作用を出さないよう、
 * .aleg2-single--gallery に限定します。
 */
.aleg2-single.aleg2-single--gallery {
	overflow: visible;
}

.aleg2-single.aleg2-single--gallery .aleg2-single__inner,
.aleg2-single.aleg2-single--gallery .aleg2-gallery-single {
	overflow: visible;
}

/* ------------------------------------------------------------
 * Gallery Split Viewer
 * ------------------------------------------------------------
 *
 * Gallery詳細のPC表示を、旧A LEGENDの実績ある分割スクロール方式へ戻します。
 *
 * 正規モデル：
 * - viewer / scene は、メディアtrackを最後まで流すためのスクロール距離を持ちます。
 * - media viewport は sticky + overflow:hidden の固定窓です。
 * - media track だけを JS が translate3d() で動かします。
 * - text panel も sticky で固定し、画像・動画が流れている間も本文情報を同じ位置に留めます。
 * - textScrollHeight は viewer の高さ計算へ混ぜません。
 * - 旧A LEGEND型の標準挙動として、PC同期中の本文は内部スクロールさせず、
 *   画像・動画trackが完走するまでテキストパネルを完全固定します。
 *
 * 旧 .aleg2-gallery-split / .aleg2-gallery-media-rail 系のclassは、
 * 既存テンプレート・検証HTML・後方互換のために残しています。
 */
.aleg2-gallery-single {
	--aleg2-gallery-sticky-top: calc(var(--aleg2-header-sticky-offset, var(--aleg2-header-height, 0px)) + var(--wp-admin--admin-bar--height, 0px));
	--aleg2-gallery-panel-padding: clamp(var(--aleg2-space-6), 5vw, var(--aleg2-space-12));
	/* 旧A LEGEND同様、split viewer内のメディアはカード間隔で縮めず面として縦積みします。 */
	--aleg2-gallery-media-gap: 0px;
	--aleg2-gallery-text-max: var(--aleg2-container-sm);
	/*
	 * CSSがGallery Viewerの初期表示を必ず成立させるための高さです。
	 *
	 * 重要：
	 * - JS補助変数を高さの主値にしません。
	 * - CSSカスタムプロパティは 0px が入るとfallbackされないため、
	 *   --aleg2-gallery-js-viewport-height をここへ混ぜると、
	 *   計測前にviewportを0pxへ潰す事故が起きます。
	 * - 旧A LEGEND同様、JSがなくても固定窓は画面高を持ちます。
	 */
	--aleg2-gallery-viewport-height: max(320px, calc(100svh - var(--aleg2-gallery-sticky-top)));
	/*
	 * Header-safe split scroll 用の基準値です。
	 *
	 * sticky の top だけでは初期フロー位置は下がらないため、
	 * PC同期中は scene 側にも同じ offset を正式なレイアウト領域として持たせます。
	 * 画像だけに margin を足すと trackHeight / sceneHeight / SHARE 接続がズレるため、
	 * CSS/JS が共有する変数として扱います。
	 */
	--aleg2-gallery-header-offset: var(--aleg2-gallery-sticky-top);
	--aleg2-gallery-initial-offset: 0px;
	--aleg2-gallery-content-height: var(--aleg2-gallery-viewport-height);
	--aleg2-gallery-min-scene-height: max(520px, var(--aleg2-gallery-viewport-height));
}

.aleg2-gallery-viewer,
.aleg2-gallery-split {
	position: relative;
	left: 50%;
	display: block;
	width: calc(100vw - var(--sbw, 0px));
	min-height: var(--aleg2-gallery-min-scene-height);
	margin-inline: calc((100vw - var(--sbw, 0px)) / -2);
	color: var(--aleg2-color-text);
	background: var(--aleg2-color-bg);
	isolation: isolate;
}

.aleg2-gallery-viewer[data-aleg2-gallery-fit="natural-ratio"],
.aleg2-gallery-split[data-aleg2-gallery-fit="natural-ratio"],
.aleg2-gallery-viewer[data-aleg2-gallery-fit="contain"],
.aleg2-gallery-split[data-aleg2-gallery-fit="contain"] {
	--aleg2-gallery-media-fit: contain;
}

.aleg2-gallery-viewer[data-aleg2-gallery-fit="cover"],
.aleg2-gallery-split[data-aleg2-gallery-fit="cover"] {
	--aleg2-gallery-media-fit: cover;
}

/**
 * 左右2カラムの器です。
 *
 * scene自体はstickyにしません。
 * sticky対象は media viewport と text panel に限定し、
 * JSが scene / media-panel に同じメディアtrack基準の高さを与えることで、
 * 画像側viewportとテキスト側panelのsticky文脈を揃えます。
 */
.aleg2-gallery-viewer__scene {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "text media";
	align-items: start;
	width: 100%;
	min-height: var(--aleg2-gallery-min-scene-height);
	background: var(--aleg2-color-bg);
}

.aleg2-gallery-viewer--img-left .aleg2-gallery-viewer__scene,
.aleg2-gallery-split--img-left .aleg2-gallery-viewer__scene {
	grid-template-areas: "media text";
}

.aleg2-gallery-viewer__media-panel,
.aleg2-gallery-viewer__text-panel,
.aleg2-gallery-split__panel {
	position: relative;
	min-width: 0;
	min-height: 0;
}

.aleg2-gallery-viewer__media-panel,
.aleg2-gallery-split__panel--media {
	grid-area: media;
	background: var(--aleg2-color-bg-soft, var(--aleg2-color-bg));
}

/**
 * メディアの固定窓です。
 *
 * 旧A LEGENDの .gal-images 相当です。
 * PC同期時はこの窓をstickyで固定し、内側のtrackだけをJSで動かします。
 */
.aleg2-gallery-viewer__viewport,
.aleg2-gallery-media-rail {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	overflow: visible;
	background: var(--aleg2-color-bg);
}

/**
 * JS transform対象です。
 *
 * 旧A LEGENDの .gal-images__inner 相当です。
 * transform:none!important は分割スクロール自体を殺すため禁止します。
 */
.aleg2-gallery-viewer__track,
.aleg2-gallery-media-rail__inner {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/**
 * テキスト側の固定パネルです。
 *
 * 旧A LEGENDの .gal-split__panel--text 相当です。
 * 今回は右テキストの中を main / footer へ分けるため、
 * panel自体は高さと背景だけを担当し、上下配置は .aleg2-gallery-text__inner に委譲します。
 */
.aleg2-gallery-viewer__text-panel,
.aleg2-gallery-split__panel--text {
	grid-area: text;
	display: flex;
	align-items: stretch;
	min-height: var(--aleg2-gallery-min-scene-height);
	background: var(--aleg2-glass-bg, var(--aleg2-color-surface));
	border-inline: 1px solid var(--aleg2-glass-border, var(--aleg2-color-border));
	box-shadow: var(--aleg2-shadow-panel);
	z-index: 2;
}

.aleg2-gallery-media-item {
	position: relative;
	display: block;
	width: 100%;
	/*
	 * 通常フローでは素材の自然寸法を受け止めます。
	 * PC同期中だけ後続の media query で画像比率連動のitem高へ切り替えます。
	 */
	height: auto;
	min-width: 0;
	min-height: 0;
	max-height: none;
	margin: 0;
	/*
	 * split viewer内のメディアは「カード」ではなく「鑑賞面」です。
	 * 枠・影・角丸で内側へ縮めると trackHeight が不足し、
	 * JSが static 判定になりやすいため旧A LEGEND同様に面表示へ寄せます。
	 */
	background: var(--aleg2-color-bg);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	isolation: isolate;
}

.aleg2-gallery-media-item + .aleg2-gallery-media-item {
	/*
	 * trackはgridではなく通常ブロック積みにするため、
	 * 画像・動画間の余白はgapではなくitem間marginで作ります。
	 * --aleg2-gallery-media-gap は既定0pxなので、旧A LEGEND同様に面でつなげます。
	 */
	margin-block-start: var(--aleg2-gallery-media-gap);
}

.aleg2-gallery-media-item:last-child {
	/*
	 * 最後のmedia itemの下余白は、分割スクロールの終端計算へ含めません。
	 * JS側も「最後の画像・動画の下端がviewport下端に揃う位置」を完走点にするため、
	 * ここで余白を明示的に0へ揃え、画像下の黒幕・余白が上がってくる事故を防ぎます。
	 */
	margin-block-end: 0;
}

.aleg2-gallery-media-item__link {
	position: relative;
	display: block;
	width: 100%;
	/*
	 * 通常フローでは画像の自然高さに追従します。
	 * PC同期中は media item と同じ高さへ切り替え、
	 * クリック領域を固定窓全体へ広げます。
	 */
	height: auto;
	min-height: 0;
	max-height: none;
	color: inherit;
	text-decoration: none;
}

.aleg2-gallery-media-item__link::after {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	content: "+";
	color: var(--aleg2-color-on-inverse, var(--aleg2-color-heading));
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-2xl);
	font-weight: 300;
	background: var(--aleg2-overlay-strong, rgba(0, 0, 0, 0.42));
	opacity: 0;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
	pointer-events: none;
}

.aleg2-gallery-media-item__link:hover::after,
.aleg2-gallery-media-item__link:focus-visible::after {
	opacity: 1;
}

.aleg2-gallery-media-item__link:focus-visible {
	outline: none;
	box-shadow: var(--aleg2-focus-ring);
}

.aleg2-gallery-media-item__image,
.aleg2-gallery-media-item__video {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	background: var(--aleg2-color-bg);
}

.aleg2-gallery-media-item__image {
	/*
	 * 通常フローでは画像を自然比率で表示します。
	 * PC同期中は後続の media query で width / height:100% とし、
	 * 画像比率連動itemの中で natural-ratio / contain / cover を切り替えます。
	 */
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
}

.aleg2-gallery-media-item__video {
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

.aleg2-gallery-media-item__caption {
	position: absolute;
	right: var(--aleg2-space-4);
	bottom: var(--aleg2-space-4);
	left: var(--aleg2-space-4);
	z-index: 2;
	padding: var(--aleg2-space-3) var(--aleg2-space-4);
	color: var(--aleg2-color-on-inverse, #fff);
	font-size: var(--aleg2-font-size-sm);
	line-height: var(--aleg2-line-height-body);
	background: color-mix(in srgb, var(--aleg2-color-bg-inverse, #000) 62%, transparent);
	border: 1px solid color-mix(in srgb, var(--aleg2-color-on-inverse, #fff) 18%, transparent);
	border-radius: var(--aleg2-radius-sm, 10px);
	backdrop-filter: blur(10px);
}

.aleg2-gallery-viewer__text-scroll,
.aleg2-gallery-text {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	min-height: var(--aleg2-gallery-min-scene-height);
	padding: var(--aleg2-gallery-panel-padding);
}

.aleg2-gallery-text__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: min(100%, var(--aleg2-gallery-text-max));
	min-height: 100%;
	max-height: 100%;
	margin-inline: auto;
	overflow: visible;
}

/**
 * Gallery詳細右テキストの上部エリアです。
 *
 * パンくず / タイトル / 日付 / カテゴリ / 本文をここへ集約し、
 * 下部アクション（タグ・X share）とはDOM上もCSS上も分離します。
 * これにより、将来PV・いいね・前後導線などをfooter側へ追加しても、
 * 本文の上付き配置を壊さずに拡張できます。
 */
.aleg2-gallery-text__main {
	display: grid;
	align-content: start;
	gap: 0;
	min-width: 0;
}

/**
 * Gallery詳細右テキストの下部エリアです。
 *
 * position:absolute で貼り付けると長文本文と重なるため、
 * flexコンテナ内の margin-top:auto で自然に下へ送ります。
 * タグなし / X share OFF の場合はPHP側でfooter自体を出さず、
 * 空の余白だけが残らないようにします。
 */
.aleg2-gallery-text__footer {
	display: grid;
	gap: var(--aleg2-space-4);
	min-width: 0;
	margin-block-start: auto;
	padding-block-start: var(--aleg2-space-6);
}

/**
 * Gallery詳細右テキストfooter内のタグ一覧です。
 *
 * 下部タグは、前回改修で .aleg2-single-meta の親文脈から分離しました。
 * そのため、共通メタ親が持つ font-family の継承が届かなくなります。
 *
 * 固定フォントを直書きせず、テーマ設定から生成される
 * --aleg2-font-latin へこのタグ一覧コンテナ単位で明示接続します。
 * タグ単体ではなく一覧コンテナに持たせることで、
 * 将来タグ内にアイコン・件数・補助テキストを追加しても
 * メタ情報としてのタイポグラフィを自然に継承できます。
 */
.aleg2-gallery-text__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	min-width: 0;
	font-family: var(--aleg2-font-latin);
}

.aleg2-gallery-text__share {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
}

/*
 * 共通 share 部品をGallery右パネル内へ移動した時の余白補正です。
 * 共通CSSを変更せず、Gallery専用スコープの中だけで自然に馴染ませます。
 */
.aleg2-gallery-text__share > .aleg2-single-share {
	width: 100%;
	margin: 0;
}

/**
 * PC時の完成仕様です。
 *
 * media viewport と text panel を個別にsticky固定します。
 * scene全体stickyは使いません。
 * media item の高さはJSが元画像・動画比率から算出した
 * --aleg2-gallery-item-height を使い、画像の縦横比を守ります。
 */
@media (min-width: 961px) {
	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-viewer__scene,
	.aleg2-gallery-viewer[data-aleg2-gallery-state="ready-static"][data-aleg2-gallery-sync="1"] .aleg2-gallery-viewer__scene {
		/*
		 * Gallery分割スクロール全体のスクロール領域です。
		 *
		 * 1枚目の初期表示も固定ヘッダー下から始めるため、
		 * PC同期中は scene の上部に header-safe offset を正式な余白として確保します。
		 * この offset はJSの sceneHeight / start / end 計算にも含めるため、
		 * 画像だけを下げる付け焼き刃の margin 補正とは違い、
		 * SHARE / Related への接続位置と同期します。
		 */
		box-sizing: border-box;
		padding-block-start: var(--aleg2-gallery-initial-offset, 0px);
		height: var(--aleg2-gallery-scene-height, var(--aleg2-gallery-viewer-height, auto));
		min-height: var(--aleg2-gallery-scene-height, var(--aleg2-gallery-viewer-height, var(--aleg2-gallery-min-scene-height)));
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-viewer__media-panel,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-split__panel--media {
		/*
		 * media viewport の sticky 親です。
		 *
		 * scene には初期表示用の header-safe offset が含まれるため、
		 * sticky の親になる mediaPanel には offset を除いた実スクロール領域
		 * （viewportHeight + track移動距離）を持たせます。
		 * ここを sceneHeight と同じにすると、offset 分だけ終端が伸びて
		 * 下部空白やsticky解除タイミングのズレが再発します。
		 */
		height: var(--aleg2-gallery-content-height, var(--aleg2-gallery-scene-height, var(--aleg2-gallery-viewer-height, auto)));
		min-height: var(--aleg2-gallery-content-height, var(--aleg2-gallery-scene-height, var(--aleg2-gallery-viewer-height, var(--aleg2-gallery-min-scene-height))));
		align-self: stretch;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-viewer__viewport,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-media-rail {
		position: sticky;
		top: var(--aleg2-gallery-sticky-top);
		display: block;
		height: var(--aleg2-gallery-viewport-height);
		min-height: 0;
		max-height: var(--aleg2-gallery-viewport-height);
		overflow: hidden;
		align-self: start;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-viewer__track,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-media-rail__inner {
		/*
		 * PC同期中はtrackを固定窓の通常フローから切り離します。
		 * transformで見た目だけ上へ動かした後に、track本来の高さが親へ残って
		 * 下の謎空間になることを防ぐためです。
		 * スクロール領域の高さはJSがsceneとmediaPanelへ同じ値で付与します。
		 */
		position: absolute;
		inset: 0 auto auto 0;
		width: 100%;
		height: var(--aleg2-gallery-track-height);
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-media-item,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-media-item {
		/*
		 * PC分割スクロールの正規寸法です。
		 * 画像のused heightをブラウザ任せにすると、2枚目以降だけ1500px化するような
		 * 異常値をtrackHeightへ混ぜてしまいます。
		 * そのため、JSが「左カラム幅 × 元画像比率」から算出した高さを
		 * --aleg2-gallery-item-height として各itemへ個別に渡します。
		 */
		height: var(--aleg2-gallery-item-height, auto) !important;
		min-height: var(--aleg2-gallery-item-height, 0);
		max-height: none;
		overflow: hidden;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-media-item__link,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-media-item__link {
		height: 100% !important;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-media-item__image,
	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-media-item__video,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-media-item__image,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-media-item__video {
		/*
		 * item枠自体が元画像・動画比率に合わせて作られるため、
		 * ここでcoverしません。containを標準にして、縦横比を壊さず表示します。
		 * 将来 data-aleg2-gallery-fit="cover" を設定化した場合のみ、下の専用ルールで上書きします。
		 */
		width: 100%;
		height: 100% !important;
		max-height: none;
		aspect-ratio: auto;
		object-fit: contain;
		object-position: center center;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-fit="cover"] .aleg2-gallery-media-item__image,
	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-fit="cover"] .aleg2-gallery-media-item__video,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-fit="cover"] .aleg2-gallery-media-item__image,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-fit="cover"] .aleg2-gallery-media-item__video {
		object-fit: cover;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-viewer__text-panel,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-split__panel--text {
		position: sticky;
		top: var(--aleg2-gallery-sticky-top);
		height: var(--aleg2-gallery-viewport-height);
		min-height: 0;
		max-height: var(--aleg2-gallery-viewport-height);
		align-self: start;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-viewer__text-scroll,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-text {
		height: 100%;
		min-height: 0;
		max-height: 100%;
		overflow: hidden;
	}

	.aleg2-gallery-viewer[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync="1"] .aleg2-gallery-text__inner,
	.aleg2-gallery-split[data-aleg2-gallery-state="active"][data-aleg2-gallery-sync-scroll="1"] .aleg2-gallery-text__inner {
		/*
		 * 旧A LEGEND型の分割スクロールでは、画像・動画trackが流れている間、
		 * テキスト側は完全固定します。
		 * 内部スクロールを許可するとホイール入力が本文側へ吸われ、
		 * 「画像完走前にテキストが動く」体感になるため標準では止めます。
		 * 長文対策が必要になった場合は、設定値で明示的に許可する拡張ポイントにします。
		 *
		 * footer の margin-top:auto をPC固定窓内で効かせるため、
		 * inner は高さ100%の縦flexコンテナとして固定します。
		 */
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
		scrollbar-gutter: auto;
	}
}

.aleg2-gallery-text__header {
	display: grid;
	gap: var(--aleg2-space-4);
	margin-block-end: var(--aleg2-space-6);
}

.aleg2-gallery-text__eyebrow {
	margin: 0;
	color: var(--aleg2-color-secondary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-sm);
	font-weight: var(--aleg2-font-weight-bold);
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

.aleg2-gallery-text__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(2.2rem, 5vw, 5.8rem);
	line-height: var(--aleg2-line-height-heading);
	letter-spacing: var(--aleg2-letter-spacing-heading);
}

.aleg2-gallery-text__meta {
	color: var(--aleg2-color-text-muted);
}

/*
 * Gallery専用に分離した上部メタ行です。
 *
 * 共通 single-meta.php を呼ばずに、日付 / gallery_type / 編集リンクだけを出すため、
 * 既存の .aleg2-single-meta 系の見た目を再利用しつつ、Gallery専用の微調整だけをここに閉じ込めます。
 */
.aleg2-gallery-text__meta-list {
	margin: 0;
}

.aleg2-gallery-text__content {
	color: var(--aleg2-color-text);
	line-height: var(--aleg2-line-height-body);
}

.aleg2-gallery-text__content > *:first-child {
	margin-block-start: 0;
}

.aleg2-gallery-text__content > *:last-child {
	margin-block-end: 0;
}

.aleg2-gallery-empty {
	display: grid;
	place-items: center;
	min-height: min(70svh, 680px);
	padding: var(--aleg2-space-8);
	text-align: center;
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
}

.aleg2-gallery-empty__label {
	margin: 0 0 var(--aleg2-space-2);
	color: var(--aleg2-color-secondary);
	font-family: var(--aleg2-font-latin);
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

.aleg2-gallery-empty__text {
	max-width: 36em;
	margin: 0;
	color: var(--aleg2-color-text-muted);
}

/* ------------------------------------------------------------
 * Gallery Split Viewer responsive fallback
 * ------------------------------------------------------------
 *
 * 960px以下、またはモーション低減環境では、sticky / transform / JS height を解除して通常の縦積みに戻します。
 */
@media (max-width: 960px) {
	.aleg2-gallery-viewer,
	.aleg2-gallery-split {
		left: auto;
		display: block;
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		margin-inline: 0;
	}

	.aleg2-gallery-viewer__scene {
		display: flex;
		flex-direction: column;
		height: auto !important;
		min-height: 0 !important;
	}

	.aleg2-gallery-viewer__text-panel,
	.aleg2-gallery-split__panel--text {
		order: -1;
		min-height: 0;
		border-inline: 0;
		box-shadow: none;
	}

	.aleg2-gallery-viewer__media-panel,
	.aleg2-gallery-split__panel--media,
	.aleg2-gallery-viewer__scene,
	.aleg2-gallery-viewer__viewport,
	.aleg2-gallery-media-rail,
	.aleg2-gallery-viewer__text-panel,
	.aleg2-gallery-split__panel--text,
	.aleg2-gallery-viewer__text-scroll,
	.aleg2-gallery-text {
		position: relative !important;
		top: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.aleg2-gallery-viewer__text-scroll,
	.aleg2-gallery-text {
		padding:
			calc(var(--wp-admin--admin-bar--height, 0px) + var(--aleg2-header-height, 80px) + clamp(24px, 4vw, 56px))
			var(--aleg2-gallery-panel-padding)
			var(--aleg2-gallery-panel-padding);
	}

	.aleg2-gallery-text__inner {
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: visible !important;
	}

	.aleg2-gallery-text__footer {
		margin-block-start: var(--aleg2-space-6);
	}

	.aleg2-gallery-viewer__track,
	.aleg2-gallery-media-rail__inner {
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		will-change: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aleg2-gallery-viewer__track,
	.aleg2-gallery-media-rail__inner {
		/*
		 * reduced-motion でも旧A LEGEND型の位置同期は維持します。
		 * JS側で慣性だけを止め、即時追従にするため、transform自体は殺しません。
		 */
		transition: none !important;
	}
}