/* =========================================================
   参考コンテンツ（al_reference）モーダル CSS（aL固有）
   配置: assets/css/al/51-reference.css

   構成：
     1. トリガーボタン（.lr-button を継承。独自装飾はしない）
     2. モーダル（背景＋スクロール可能な本文パネル・初期は非表示）
     3. ヘッダー透け対策（会場風景モーダルと同じ仕組み・独立クラス）

   ・色はトークン参照に統一。
   ========================================================= */

/* =========================================================
   1. トリガー
   既定は .lr-button[data-variant="outline"] をそのまま使う
   （assets/css/core/30-button.css）。独自の追加装飾は今のところ不要。

   .lr-reference-trigger--text はボタン装飾なしの小さいテキストリンク版
   （購入ボタン等、既に強いCTAが並ぶ場所でボタンを二重に見せないため。
   例: single-al_artwork.php の送料無料しきい値の注記のすぐ隣）。
   ========================================================= */
.lr-reference-trigger--text {
	display: inline-block;
	margin-top: var(--lr-space-2xs);
	font-size: var(--lr-font-xs, 12px);
	color: var(--lr-muted);
	text-decoration: underline;
}
.lr-reference-trigger--text:hover {
	color: var(--lr-text);
}

/* =========================================================
   2. モーダル（背景＋本文パネル・初期は非表示）
   構成は会場風景モーダル（42-exhibition.css の
   .lr-exhibition-venue-photos-modal）と同じ型。画像1枚ではなく
   テキスト本文なので、パネルはスクロール可能な箱にする。
   ========================================================= */
.lr-reference-modal {
	position: fixed;
	inset: 0;
	z-index: 200;   /* サイトヘッダー(100)・目次(90)より前面 */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	padding: var(--lr-space-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--lr-ease), visibility var(--lr-ease);
}
.lr-reference-modal[data-open="true"] {
	opacity: 1;
	visibility: visible;
}
.lr-reference-modal__panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: var(--lr-radius);
	padding: var(--lr-space-lg) var(--lr-space-md);
}
.lr-reference-modal__title {
	margin: 0 0 var(--lr-space-md);
	padding-right: 44px; /* 右上の閉じるボタンと重ならないように */
	padding-left: var(--lr-space-sm);
	border-left: 6px solid var(--lr-accent); /* .lr-richtext h2 と同じ「看板」スタイルに揃える */
	font-size: var(--lr-font-lg);   /* モーダルなのでheadingよりワンサイズ小さく（h3相当） */
	font-weight: var(--lr-weight-bold);
	line-height: 1.4;
	color: var(--lr-text);
}
.lr-reference-modal__close {
	position: absolute;
	top: var(--lr-space-md);
	right: var(--lr-space-md);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lr-bg-subtle, #f2f0ef);
	color: var(--lr-text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.lr-reference-modal__close:hover {
	background: var(--lr-border);
}

/* =========================================================
   3. ヘッダー透け対策
   position:sticky のヘッダーが、モーダルの半透明背景の前面に透けて
   見えてしまうブラウザの描画上の癖への回避策（会場風景モーダルと同じ
   原因・同じ対策。venue-photos.js の al-venue-modal-open とは別の
   独立クラスにしている＝動いている既存モーダルには一切触れない）。
   ========================================================= */
body.al-reference-modal-open .lr-header {
	visibility: hidden;
}