/**
 * css/components/adult-gate.css
 * ============================================================
 * A LEGEND 2：Adult Gate
 * ============================================================
 *
 * 役割：
 * - Adult Gate表示の共通UIを装飾します。
 * - PHP側の inc/security/adult-gate/render.php と template-parts/components/adult-gate.php を想定します。
 *
 * 今回の改修：
 * - Adult Gateを「記事背面 + 全画面オーバーレイ」方式へ対応します。
 * - 既存の .aleg2-adult-gate をカード型UIとしても使えるように維持しつつ、
 *   .aleg2-adult-gate--overlay が付いた場合は fixed overlay として表示します。
 * - 中央パネル、背景backdrop、CREATIVE HUB見出し、日本語/英語メッセージ、
 *   ENTER / confirm.png / LEAVE の横並び表示、下部注意文を追加します。
 * - 外枠背景の固定白半透明グラデーションを --aleg2-glass-bg / --aleg2-glass-bg-strong へ置換します。
 * - 背景装飾の固定黄・赤グローを --aleg2-color-warning / --aleg2-color-danger 系へ置換します。
 * - ボタン文字色の固定 #061018 を --aleg2-color-on-primary へ置換します。
 * - 「戻る」ボタン背景の固定白半透明を --aleg2-glass-bg へ置換します。
 * - 角丸を design.radius.panel / button 由来の --aleg2-radius-panel / --aleg2-radius-button へ接続します。
 * - 影を design.shadow.panel / soft / glow 系へ接続します。
 * - design.buttons.hover_lift / hover_amount が有効な場合だけ、ボタンを少し持ち上げます。
 * - キーボード操作用の focus-visible を追加します。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 */

/* ------------------------------------------------------------
 * Adult Gate locked body
 * ------------------------------------------------------------
 *
 * overlay表示中のbody制御です。
 *
 * 目的：
 * - 背面記事のスクロールを止めます。
 * - モバイルで背面コンテンツが読める状態になるのを避けます。
 */
body.aleg2-adult-gate-locked {
	overflow: hidden;
}

/* ------------------------------------------------------------
 * Adult Gate wrapper
 * ------------------------------------------------------------
 *
 * 年齢確認UI全体の外枠です。
 *
 * 通常状態：
 * - 従来どおり、本文内のカード型Adult Gateとして成立します。
 *
 * overlay状態：
 * - .aleg2-adult-gate--overlay が付くと fixed の全画面オーバーレイになります。
 *
 * 注意：
 * - 幅は --aleg2-container-sm を使い、本文幅と揃えます。
 * - 左右余白は --aleg2-container-padding を使い、design.layout.page_side に追従します。
 * - 背景は固定rgbaではなくglass tokenへ寄せ、ライト/ダーク両方に対応します。
 */
.aleg2-adult-gate {
	position: relative;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	padding: clamp(28px, 5vw, 56px);
	margin: var(--aleg2-space-10) auto;
	overflow: hidden;
	color: var(--aleg2-color-text);
	text-align: center;
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-glass-bg)
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
	box-shadow: var(--aleg2-shadow-panel);
	backdrop-filter: var(--aleg2-backdrop-glass);

	/**
	 * Adult Gate専用CSS変数のフォールバックです。
	 *
	 * PHP側の settings.php / template-parts/adult-gate.php から
	 * style属性で上書きできるようにします。
	 */
	--aleg2-adult-gate-blur: 10px;
	--aleg2-adult-gate-overlay-opacity: 0.92;
	--aleg2-adult-gate-panel-max-width: 760px;
	--aleg2-adult-gate-panel-border-opacity: 0.24;
}

/**
 * overlay mode。
 *
 * 記事本体を背面に残し、画面全体をAdult Gateでロックします。
 *
 * 注意：
 * - template-parts/adult-gate.php のルートに
 *   .aleg2-adult-gate--overlay が付く想定です。
 * - z-indexはDesign Tokenを参照し、通常UIより上、Loaderより下に固定します。
 *   個別CSSで巨大な固定値を直書きすると、Loaderや今後追加される
 *   overlay系UIとの前後関係が破綻するため、ここでは専用トークンに集約します。
 */
.aleg2-adult-gate--overlay {
	position: fixed;
	inset: 0;
	z-index: var(--aleg2-z-adult-gate, 999990);
	display: grid;
	width: 100%;
	min-width: 0;
	min-height: 100dvh;
	padding: clamp(20px, 4vw, 56px);
	margin: 0;
	overflow: auto;
	place-items: center;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}

/**
 * overlay modeでは、既存カード用の疑似背景装飾を無効化します。
 *
 * 暗転・ぼかしは .aleg2-adult-gate__backdrop 側が担当します。
 */
.aleg2-adult-gate--overlay::before {
	display: none;
}

/**
 * Adult Gate内の背景装飾。
 *
 * 旧コードでは rgba(255,207,90,0.22) / rgba(255,107,138,0.18) の固定色でした。
 * 今回は warning / danger 系のsemantic tokenを使い、警告UIとしての意味を保ったまま
 * プリセットや配色設定に馴染むようにします。
 */
.aleg2-adult-gate::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--aleg2-color-warning) 28%, transparent), transparent 34%),
		radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--aleg2-color-danger) 22%, transparent), transparent 34%);
}

/**
 * color-mix非対応ブラウザ向けの保険です。
 *
 * 先にsemantic tokenベースの背景を置き、対応ブラウザでは上の指定が有効になります。
 * 非対応環境でも固定色に戻さず、既存tokensのglowで最低限の装飾を維持します。
 */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
	.aleg2-adult-gate::before {
		background:
			radial-gradient(circle at 20% 0%, var(--aleg2-glow-accent), transparent 34%),
			radial-gradient(circle at 90% 100%, var(--aleg2-glow-secondary), transparent 34%);
	}
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かない設計です。
 * それに合わせてAdult Gate固有の装飾グローも控えめにします。
 */
body:not(.aleg2-bg-glow) .aleg2-adult-gate::before {
	opacity: 0.28;
	background:
		linear-gradient(
			145deg,
			var(--aleg2-color-surface-strong),
			transparent
		);
}

/**
 * overlay modeでは、body側のglow設定に関係なく疑似背景装飾を無効化します。
 */
body:not(.aleg2-bg-glow) .aleg2-adult-gate--overlay::before {
	display: none;
}

/**
 * Adult Gate直下の要素は装飾レイヤーより前面へ出します。
 *
 * 既存挙動を維持します。
 */
.aleg2-adult-gate > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------
 * Overlay backdrop
 * ------------------------------------------------------------
 *
 * overlay方式の暗転・ぼかしレイヤーです。
 *
 * 目的：
 * - 背面の記事を完全に操作不可にします。
 * - 警告表示中は背面の記事・画像を読ませない黒幕として機能させます。
 * - blurは補助効果とし、黒幕だけでも遮断性が残るようにします。
 */
.aleg2-adult-gate__backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: auto;
	background:
		linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88)),
		rgba(0, 0, 0, var(--aleg2-adult-gate-overlay-opacity));
	backdrop-filter: blur(var(--aleg2-adult-gate-blur));
}

/**
 * backdrop-filter非対応ブラウザ向け。
 *
 * blurが効かない環境では黒背景を少し濃くして、
 * 背面記事の情報漏れを抑えます。
 */
@supports not (backdrop-filter: blur(1px)) {
	.aleg2-adult-gate__backdrop {
		background: rgba(0, 0, 0, 0.96);
	}
}

/* ------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------
 *
 * Adult Gate中央パネルです。
 *
 * template-parts/components/adult-gate.php の <main> を想定します。
 * 通常カード型でもoverlay型でも成立するよう、幅・余白・枠線をここで管理します。
 */
.aleg2-adult-gate__panel {
	position: relative;
	z-index: 2;
	width: min(calc(100vw - 32px), var(--aleg2-adult-gate-panel-max-width));
	max-width: 100%;
	padding: clamp(28px, 5vw, 58px) clamp(20px, 4vw, 48px);
	color: #fff;
	text-align: center;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.05),
			rgba(255, 255, 255, 0.015)
		);
	border: 1px solid rgba(255, 255, 255, var(--aleg2-adult-gate-panel-border-opacity));
	border-radius: var(--aleg2-radius-panel);
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.46),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
}

/**
 * overlay以外の従来カード内で使われた場合は、
 * パネルの二重カード化を避けるため装飾を軽くします。
 */
.aleg2-adult-gate:not(.aleg2-adult-gate--overlay) .aleg2-adult-gate__panel {
	width: 100%;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
}

/**
 * overlay modeのPCパネル。
 *
 * 旧A LEGENDのAdult Gateは、縦に大きいモーダルではなく、
 * 横長で低めの警告パネルとして表示されていました。
 * A LEGEND 2でも、PCではその視認性を再現しつつ、
 * 文言が長くなった場合は高さ固定で溢れないようにします。
 *
 * 注意：
 * - overlay専用に閉じ、本文内カード型Adult Gateには影響させません。
 * - panel_max_width設定はCSS変数として維持し、固定値だけに依存しません。
 */
.aleg2-adult-gate--overlay .aleg2-adult-gate__panel {
	/*
	 * 旧A LEGENDのような横長で低めの警告パネルを標準にします。
	 * 既存DBに640pxなどの小さなpanel_max_widthが保存されていても、
	 * PCでは警告UIとして破綻しないよう720pxを表示下限として扱います。
	 * 管理者が720pxより大きい値を設定した場合は、その意図を尊重します。
	 */
	width: min(calc(100vw - 48px), var(--aleg2-adult-gate-panel-max-width));
	width: min(calc(100vw - 48px), max(720px, var(--aleg2-adult-gate-panel-max-width)));
	padding: clamp(22px, 2.4vw, 32px) clamp(40px, 5.4vw, 76px) clamp(18px, 2.2vw, 26px);
	background: rgba(0, 0, 0, 0.42);
	border-width: 2px;
	border-color: rgba(255, 255, 255, var(--aleg2-adult-gate-panel-border-opacity));
	border-color: rgba(255, 255, 255, max(0.28, var(--aleg2-adult-gate-panel-border-opacity)));
	border-radius: 10px;
	box-shadow:
		0 22px 72px rgba(0, 0, 0, 0.54),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
}

/* ------------------------------------------------------------
 * Brand
 * ------------------------------------------------------------
 *
 * 添付デザイン上部の CREATIVE HUB に相当します。
 */
.aleg2-adult-gate__brand {
	margin: 0 0 clamp(22px, 4vw, 34px);
	color: #fff;
	font-family: var(--aleg2-font-heading);
	font-size: clamp(2rem, 1.2rem + 4vw, 4.4rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__brand {
	/*
	 * Adult Gateのブランドは通常見出しではなく、警告パネル上のロゴ的要素です。
	 * フォントファミリーはデザイン設定を使いつつ、行間・文字間・最大幅は
	 * overlay専用に固定気味へ寄せ、短い文言が不自然に縦割れしないようにします。
	 */
	max-width: min(100%, 18em);
	margin-inline: auto;
	margin-bottom: clamp(12px, 1.6vw, 18px);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(1.85rem, 1.28rem + 1.9vw, 3rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: clamp(0.08em, 0.5vw, 0.18em);
	text-wrap: balance;
}

/* ------------------------------------------------------------
 * Label
 * ------------------------------------------------------------
 *
 * 年齢確認の小さなラベルです。
 *
 * 注意喚起として accent / warning 系の色を使いたい場面ですが、
 * 既存コードの --aleg2-color-accent を維持しつつ、
 * フォントは英字装飾扱いとして latin token へ接続します。
 */
.aleg2-adult-gate__label {
	margin: 0 0 var(--aleg2-space-3);
	color: var(--aleg2-color-accent);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
 * Title
 * ------------------------------------------------------------
 *
 * Adult Gateの主見出しです。
 *
 * 見出しとして heading color / heading font に接続します。
 */
.aleg2-adult-gate__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
	font-weight: 900;
	line-height: var(--aleg2-line-height-heading);
	letter-spacing: var(--aleg2-letter-heading);
}

/**
 * overlay内で従来titleが使われた場合の色補正です。
 */
.aleg2-adult-gate--overlay .aleg2-adult-gate__title {
	color: #fff;
}

/* ------------------------------------------------------------
 * Text / Message
 * ------------------------------------------------------------
 *
 * 年齢確認の説明文です。
 *
 * 説明文として読みやすいよう、muted色とbody行高へ接続します。
 */
.aleg2-adult-gate__text {
	max-width: 640px;
	margin: var(--aleg2-space-5) auto 0;
	color: var(--aleg2-color-text-muted);
	line-height: var(--aleg2-line-height-body);
}

/**
 * 新しいAdult Gateメッセージ。
 *
 * 添付デザインに合わせ、中央揃え・白文字・少し広めの行間にします。
 */
.aleg2-adult-gate__message {
	max-width: 46em;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--aleg2-font-sans);
	font-size: clamp(0.92rem, 0.82rem + 0.45vw, 1.08rem);
	font-weight: 500;
	line-height: var(--aleg2-line-height-body);
	letter-spacing: var(--aleg2-letter-body, normal);
	text-wrap: pretty;
}

.aleg2-adult-gate__message + .aleg2-adult-gate__message {
	margin-top: clamp(10px, 2vw, 18px);
}

.aleg2-adult-gate__message--en {
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--aleg2-font-sans);
	font-size: clamp(0.82rem, 0.76rem + 0.32vw, 0.98rem);
	letter-spacing: var(--aleg2-letter-body, normal);
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__message {
	/*
	 * 警告文は保存値の改行を尊重しつつ、PCでは旧A LEGEND程度の
	 * コンパクトな行数で読めるように本文幅と行間を専用調整します。
	 */
	max-width: min(100%, 46em);
	font-family: var(--aleg2-font-sans);
	font-size: clamp(0.86rem, 0.8rem + 0.22vw, 1rem);
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: var(--aleg2-letter-body, normal);
	text-wrap: balance;
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__message + .aleg2-adult-gate__message {
	margin-top: clamp(6px, 0.9vw, 10px);
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__message--en {
	max-width: min(100%, 48em);
	font-size: clamp(0.8rem, 0.74rem + 0.18vw, 0.92rem);
	font-weight: 600;
	line-height: 1.58;
}

/**
 * overlay以外で使われた場合は、テーマ本文色へ寄せます。
 */
.aleg2-adult-gate:not(.aleg2-adult-gate--overlay) .aleg2-adult-gate__message {
	color: var(--aleg2-color-text-muted);
}

.aleg2-adult-gate:not(.aleg2-adult-gate--overlay) .aleg2-adult-gate__message--en {
	color: var(--aleg2-color-text-subtle, var(--aleg2-color-text-muted));
}

/**
 * 説明文内リンク。
 *
 * 拡張でリンクが入っても、テーマのlink tokenへ追従します。
 */
.aleg2-adult-gate__text a {
	color: var(--aleg2-color-link);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-adult-gate__text a:hover {
	color: var(--aleg2-color-link-hover);
}

/* ------------------------------------------------------------
 * Actions
 * ------------------------------------------------------------
 *
 * 年齢確認の操作ボタン群です。
 *
 * 既存のflex wrap / center配置を維持しつつ、
 * 新UIでは ENTER / confirm画像 / LEAVE を横並びにします。
 */
.aleg2-adult-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-3);
	justify-content: center;
	margin-top: var(--aleg2-space-8);
}

/**
 * overlay modeのアクション行。
 *
 * 添付画像のように、ENTER・画像・LEAVEを中央に並べます。
 */
.aleg2-adult-gate--overlay .aleg2-adult-gate__actions {
	/*
	 * PCでは旧A LEGEND風に、ENTER / confirm画像 / LEAVE を必ず横並びにします。
	 * flex任せにすると、設定値テキストやパネル幅によって縦積み化するため、
	 * overlay時だけ3カラムgridとして責務を固定します。
	 */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	justify-items: center;
	gap: clamp(24px, 4.2vw, 54px);
	width: min(100%, 620px);
	margin: clamp(18px, 2.5vw, 26px) auto 0;
}

/**
 * ENTERフォーム。
 *
 * form要素がflex itemとして余計な幅を持たないようにします。
 */
.aleg2-adult-gate__form {
	display: inline-flex;
	margin: 0;
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__form {
	justify-self: end;
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__button--leave {
	justify-self: start;
}

/* ------------------------------------------------------------
 * Confirm image
 * ------------------------------------------------------------
 *
 * 中央の /images/confirm.png 画像です。
 */
.aleg2-adult-gate__image {
	display: block;
	width: clamp(72px, 16vw, 132px);
	height: auto;
	max-width: 38vw;
	filter:
		drop-shadow(0 18px 38px rgba(0, 0, 0, 0.52))
		drop-shadow(0 0 18px rgba(255, 255, 255, 0.12));
	user-select: none;
}

.aleg2-adult-gate:not(.aleg2-adult-gate--overlay) .aleg2-adult-gate__image {
	margin-inline: auto;
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__image {
	width: clamp(54px, 5.6vw, 70px);
	max-width: 70px;
}

/* ------------------------------------------------------------
 * Button base
 * ------------------------------------------------------------
 *
 * Adult Gate専用ボタンです。
 *
 * 旧コード：
 * - color: #061018
 * - border-radius: var(--aleg2-radius-pill)
 * - hover時に常時 translateY(-2px)
 *
 * 改修後：
 * - color: var(--aleg2-color-on-primary)
 * - border-radius: var(--aleg2-radius-button)
 * - hover移動は body.aleg2-buttons-hover-lift がある場合のみ
 */
.aleg2-adult-gate__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.78em 1.25em;
	color: var(--aleg2-color-on-primary);
	font-family: var(--aleg2-font-heading);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-accent),
			var(--aleg2-color-primary)
		);
	border: 0;
	border-radius: var(--aleg2-radius-button);
	box-shadow: var(--aleg2-shadow-glow-primary);
	transition:
		color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard);
	appearance: none;
}

.aleg2-adult-gate__button:hover {
	color: var(--aleg2-color-on-primary);
	text-decoration: none;
	box-shadow: var(--aleg2-shadow-glow-secondary);
}

/**
 * overlay modeのボタン。
 *
 * 黒背景上で読みやすいアウトライン系のボタンにします。
 * overlay中は ENTER / LEAVE を同じトーンで扱い、
 * どちらか一方だけが塗りつぶしに見える状態を避けます。
 */
.aleg2-adult-gate--overlay .aleg2-adult-gate__button {
	min-width: clamp(118px, 14vw, 184px);
	max-width: 100%;
	min-height: 44px;
	padding: 0.58em 0.85em;
	color: #fff;
	font-family: var(--aleg2-font-heading);
	font-size: clamp(1.35rem, 1rem + 1vw, 2.05rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: clamp(0.08em, 0.45vw, 0.18em);
	text-align: center;
	text-transform: none;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: keep-all;
	background: transparent;
	border: 0;
	border-radius: var(--aleg2-radius-button);
	box-shadow: none;
	backdrop-filter: none;
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__button:hover {
	color: #fff;
	background: transparent;
	text-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
	box-shadow: none;
}

/**
 * ENTERボタン。
 *
 * overlay内では少し明るくして、主操作であることを示します。
 */
.aleg2-adult-gate__button--enter {
	color: var(--aleg2-color-on-primary);
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-accent),
			var(--aleg2-color-primary)
		);
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__button--enter {
	/*
	 * overlay中はLEAVEボタンと同じテキストボタンとして扱います。
	 * 見た目の文言は管理画面設定の enter_label に追従します。
	 */
	color: rgba(255, 255, 255, 0.95);
	background: transparent;
	box-shadow: none;
}

/**
 * hover liftが有効な場合だけ、Adult Gateボタンを少し持ち上げます。
 */
body.aleg2-buttons-hover-lift .aleg2-adult-gate__button:hover {
	transform: translate3d(0, calc(var(--aleg2-button-hover-amount) * -1), 0);
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-adult-gate__button:focus-visible {
	outline: none;
	box-shadow:
		var(--aleg2-shadow-glow-primary),
		var(--aleg2-focus-ring);
}

/* ------------------------------------------------------------
 * Leave button
 * ------------------------------------------------------------
 *
 * 離脱・戻る系のボタンです。
 *
 * 旧コードでは rgba(255,255,255,0.08) 固定でした。
 * 今回はglass tokenへ寄せます。
 */
.aleg2-adult-gate__button--leave {
	color: var(--aleg2-color-text);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	box-shadow: none;
	backdrop-filter: var(--aleg2-backdrop-glass);
}

.aleg2-adult-gate__button--leave:hover {
	color: var(--aleg2-color-heading);
	background: var(--aleg2-glass-bg-strong);
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-soft);
}

.aleg2-adult-gate__button--leave:focus-visible {
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

/**
 * overlay内のLEAVEボタン。
 *
 * 黒背景上では、通常カード用のtext tokenだと暗くなる可能性があるため白系へ補正します。
 */
.aleg2-adult-gate--overlay .aleg2-adult-gate__button--enter,
.aleg2-adult-gate--overlay .aleg2-adult-gate__button--leave {
	color: rgba(255, 255, 255, 0.95);
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__button--enter:hover,
.aleg2-adult-gate--overlay .aleg2-adult-gate__button--leave:hover {
	color: #fff;
	background: transparent;
	text-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
	box-shadow: none;
}

.aleg2-adult-gate__button-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------
 * Notice
 * ------------------------------------------------------------
 *
 * 中央パネル下部の補足文です。
 */
.aleg2-adult-gate__notice {
	margin: clamp(20px, 4vw, 34px) 0 0;
	color: rgba(255, 255, 255, 0.64);
	font-family: var(--aleg2-font-sans);
	font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
	line-height: var(--aleg2-line-height-body);
	letter-spacing: var(--aleg2-letter-body, normal);
}

.aleg2-adult-gate--overlay .aleg2-adult-gate__notice {
	max-width: min(100%, 48em);
	margin: clamp(10px, 1.6vw, 16px) auto 0;
	font-size: clamp(0.68rem, 0.64rem + 0.14vw, 0.76rem);
	font-weight: 600;
	line-height: 1.55;
}

.aleg2-adult-gate:not(.aleg2-adult-gate--overlay) .aleg2-adult-gate__notice {
	color: var(--aleg2-color-text-muted);
}

/* ------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------
 *
 * 動きを抑制する環境では、hover transformを無効化します。
 */
@media (prefers-reduced-motion: reduce) {
	.aleg2-adult-gate__button {
		transition: none;
	}

	body.aleg2-buttons-hover-lift .aleg2-adult-gate__button:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存のスマホ調整を維持しつつ、
 * overlay用の縦積みレイアウトを追加します。
 */
@media (max-width: 640px) {
	.aleg2-adult-gate {
		border-radius: var(--aleg2-radius-panel);
	}

	.aleg2-adult-gate--overlay {
		padding: 18px;
	}

	.aleg2-adult-gate__panel {
		padding: clamp(24px, 8vw, 40px) clamp(18px, 6vw, 28px);
	}

	.aleg2-adult-gate--overlay .aleg2-adult-gate__panel {
		/*
		 * スマホではPC用の720px下限を外し、画面幅に収めます。
		 * overlay自体はoverflow:autoのため、本文が長い場合も背面ではなく
		 * モーダル内で安全にスクロールできます。
		 */
		width: min(calc(100vw - 32px), var(--aleg2-adult-gate-panel-max-width));
		padding: clamp(24px, 8vw, 40px) clamp(18px, 6vw, 28px);
		border-radius: var(--aleg2-radius-panel);
	}

	.aleg2-adult-gate__brand {
		margin-bottom: 22px;
		font-size: clamp(2rem, 12vw, 3.2rem);
		letter-spacing: 0.08em;
	}

	.aleg2-adult-gate--overlay .aleg2-adult-gate__brand {
		margin-bottom: 18px;
		font-size: clamp(1.65rem, 9vw, 2.65rem);
		line-height: 1.12;
		letter-spacing: clamp(0.06em, 1vw, 0.12em);
	}

	.aleg2-adult-gate__message {
		font-size: 0.9rem;
		line-height: 1.75;
	}

	.aleg2-adult-gate--overlay .aleg2-adult-gate__message,
	.aleg2-adult-gate--overlay .aleg2-adult-gate__message--en {
		max-width: 100%;
		font-size: 0.86rem;
		font-weight: 600;
		line-height: 1.7;
		text-wrap: pretty;
	}

	.aleg2-adult-gate__actions {
		display: grid;
	}

	.aleg2-adult-gate--overlay .aleg2-adult-gate__actions {
		grid-template-columns: 1fr;
		gap: 16px;
		justify-items: center;
		width: 100%;
	}

	.aleg2-adult-gate__form {
		width: 100%;
	}

	.aleg2-adult-gate--overlay .aleg2-adult-gate__form {
		display: grid;
		justify-items: center;
	}

	.aleg2-adult-gate--overlay .aleg2-adult-gate__form,
	.aleg2-adult-gate--overlay .aleg2-adult-gate__button--leave {
		justify-self: center;
	}

	.aleg2-adult-gate__button {
		width: 100%;
	}

	.aleg2-adult-gate--overlay .aleg2-adult-gate__button {
		width: min(100%, 240px);
		font-size: clamp(1.25rem, 8vw, 1.9rem);
		letter-spacing: clamp(0.06em, 1vw, 0.14em);
	}

	.aleg2-adult-gate__image {
		width: clamp(78px, 28vw, 116px);
		max-width: 46vw;
	}
}