/**
 * pm-base.css
 * ------------------------------------------------------------
 * どのテーマでも常に読み込まれる土台。
 * レイヤー順は pm-reset → pm-base → pm-protect（protect-*.cssが担当）。
 * 仕様：レイヤー外(テーマ側)の !important は、レイヤー内の !important より
 *       常に優先度が低い。この性質を前提に、詳細度の殴り合いをしない設計にしている。
 */

@layer pm-reset, pm-base;

:root {
	/* サイト側の管理画面から上書きする想定のデザイントークン。
	   テーマの配色・横幅を自動取得しない（＝テーマを切り替えても表示は変わらない）。 */
	--pm-accent-color: #2271b1;
	--pm-text-color: #333333;
	--pm-font-size: 16px;
	--pm-gap: 24px;
	--pm-side-width: 300px;
}

@layer pm-reset {
	/* v0.11.26修正：img/video/iframe/svg をリセット対象から除外。
	   .pm-layout * の all:revert が img にもかかっており、WordPressコアが
	   img[sizes^="auto"] に付与する contain-intrinsic-size（遅延読み込み画像の
	   レイアウトシフト防止用プレースホルダー）まで打ち消してしまい、
	   実ブラウザ上で画像がプレースホルダーサイズ（例：3000×1500px）のまま
	   表示され、width指定（インラインstyle）が効かなくなる不具合があった。
	   これらのタグは元々テーマの余白崩し対策（list-style/border等のリセット）が
	   不要なため、除外しても他の動作に影響しない。 */
	:where(.pm-container, .pm-layout, .pm-layout *):not(img, video, iframe, svg) {
		all: revert;
		box-sizing: border-box;
	}
}

@layer pm-base {
	.pm-container {
		display: block !important;
		width: 100% !important;
		list-style: none !important;
		container-type: inline-size;
		container-name: pm-layout;
	}

	/* v0.11.24追加：container-type:inline-sizeを指定した要素は、
	   widthを明示していないと、実ブラウザ上で親の幅に追従せず
	   縮んでしまうことがある（テーマを問わず起こりうるコア側の
	   バグ）。widthを明示することで解消する。 */

	/* v0.10.3追加：アーカイブページでの崩れ対策。
	   一部テーマ（Kadence等）は投稿ループ全体を独自のCSS Gridコンテナ
	   （例：<ul class="...grid-cols...">）で囲んだ上でテンプレートを描画する。
	   本プラグインはloop_start/loop_endでテーマ側の記事HTMLを丸ごと破棄し、
	   代わりに.pm-containerを1個だけ出力するため、テーマ側からは
	   「グリッドの中に要素が1個だけ入った」状態に見え、grid-template-columns
	   の分だけ余白（空の列）が残ってレイアウトが崩れる。
	   .pm-containerを直接の子に持つ親要素のdisplay/grid指定を打ち消し、
	   テーマ側のグリッド/フレックスを無効化する（single-level :has()。
	   特定テーマのクラス名には依存しない汎用的な対策のため、コアCSSに置く）。
	   body.archive に限定：is_archive()（category/tag/tax/post_type_archive等）の
	   時だけWordPressコアが付与するbodyクラスで、シングル記事側の.pm-containerの
	   使われ方（the_contentフィルタでの2カラム化）には影響させないため。 */
	body.archive ul:has(> .pm-container),
	body.archive ol:has(> .pm-container),
	body.archive div:has(> .pm-container) {
		display: block !important;
		grid-template-columns: none !important;
	}

	/* v0.11.20追加：単一記事ページでの崩れ対策。
	   一部のブロックテーマ（Unibiz等）は、単一記事テンプレートを
	   「本文カラム＋サイドバーカラム」の2カラム（wp:columns）で組んでおり、
	   本プラグインはthe_contentフィルタで本文カラムの中身だけを
	   .pm-container（本文＋自前サイドバナー）に置き換える設計のため、
	   そのままだと隣接するテーマ本来のサイドバーカラムがそのまま残り、
	   「自前のサイドバナー」と「テーマ本来のサイドバー」が並んで二重に
	   表示されてしまう。
	   .pm-containerを含むカラムの「兄弟カラム」（テーマ本来のサイドバー等）
	   を非表示にし、.pm-containerを含むカラム自身は残りの幅いっぱいまで
	   広げる。ブロック名の一般的な構造（wp-block-columns/wp-block-column）
	   とマーカー要素（.pm-container）の有無だけで判定しており、
	   テーマ名やテーマ固有のクラス名には依存しない（single-level :has()）。
	   アーカイブページ側はv0.11.19のrender_blockフィルターで
	   wp-block-columns自体を丸ごとpm-containerへ置き換え済みのため、
	   このセレクタが二重に作用することはない。

	   v0.11.21修正：PHP側（pm_lite_relocate_sidebar_into_template_part()）
	   で「隣接カラムのテーマ本来のサイドバー用template-partへ、サイドバナー
	   の複製（.pm-side--relocated）を差し込む」処理を追加した。再配置が
	   成功した場合は、そちらを正式なサイドバー表示として使いたいので、
	   このフォールバックCSS（非表示化＋本文カラム拡張）は「再配置が
	   起きていない場合」だけに限定する。再配置に失敗した場合（テーマに
	   該当するtemplate-partが無い等）は、従来通りこのフォールバックで
	   隣接カラムを非表示にし、本文カラムを広げる。 */
	.wp-block-columns:not(:has(.pm-side--relocated)):has(.pm-container) > .wp-block-column:not(:has(.pm-container)) {
		display: none !important;
	}

	.wp-block-columns:not(:has(.pm-side--relocated)):has(.pm-container) > .wp-block-column:has(.pm-container) {
		flex-grow: 1 !important;
	}

	/* v0.11.21追加：再配置（.pm-side--relocated）が成功した場合、
	   本文カラム内に埋め込まれたままの元のサイドバナー（.pm-side）は
	   二重表示になるため非表示にする。再配置に失敗した場合は
	   .pm-side--relocated自体が存在しないため、このルールは働かず、
	   本文カラム内のサイドバナーがそのまま表示され続ける
	   （＝フォールバックとして機能する）。 */
	.wp-block-columns:has(.pm-side--relocated) .pm-container .pm-side:not(.pm-side--relocated) {
		display: none !important;
	}

	/* v0.11.22追加：再配置されたサイドバー（.pm-side--relocated）を含む
	   カラムの幅は、テーマが元々そのカラムに割り当てていた幅（テーマに
	   よって異なる）ではなく、アーカイブページ側のサイドバー幅
	   （--pm-side-width。既定300px）に統一する。あわせて、隣の本文
	   カラムは残り幅いっぱいまで広げる。テーマ名やテーマ固有のクラス名
	   には依存せず、.pm-side--relocatedの有無だけで判定している
	   （single-level :has()）。 */
	.wp-block-column:has(> .pm-side--relocated) {
		flex: 0 0 var(--pm-side-width) !important;
		max-width: var(--pm-side-width);
	}

	.wp-block-columns:has(.pm-side--relocated) > .wp-block-column:not(:has(.pm-side--relocated)) {
		flex-grow: 1 !important;
	}

	.pm-layout {
		display: flex !important;
		flex-wrap: nowrap;
		gap: var(--pm-gap);
	}

	.pm-main {
		flex: 1 1 auto;
		min-width: 0;
	}

	.pm-side {
		flex: 0 0 var(--pm-side-width);
		min-width: 0;
	}

	/* サイドバナーが無い場合（.pm-side自体を出力しない設計）は本文を全幅に */
	.pm-layout--no-side .pm-main {
		flex: 1 1 100%;
	}

	/* v0.11.16で変更：サイドバーの「最近の投稿」「カテゴリー」「年別
	   アーカイブ」などのグループ単位のまとまりが分かりにくいとの
	   ご要望のため、グループ間の余白を16pxから32pxに拡大。
	   （このプラグインの設計方針上、Lightning固有のCSSにはせず、
	   pm-baseレイヤー内でテーマに依存しない共通の余白として指定する） */
	.pm-widget + .pm-widget {
		margin-top: 32px !important;
	}

	.pm-widget-title {
		font-size: 15px;
		margin: 0 0 10px;
	}

	/* v0.10.2で!important化：list-style/borderに!importantが無かったため、
	   pm-baseレイヤー内の通常宣言は「レイヤー未使用のテーマ側CSS」に詳細度に
	   関わらず負ける（@layerの仕様）。Kadenceでリストマーク・記事単位の
	   ボーダーが出てしまう不具合の直接原因だったため、他の箇所と同じく
	   pm-baseレイヤー内で!importantを使う方式に統一する。 */
	.pm-widget-list {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.pm-widget-list li {
		list-style: none !important;
		border: none !important;
		background: none !important;
		margin: 0 0 8px;
	}

	.pm-widget-list li:last-child {
		margin-bottom: 0;
	}

	/* 最近の投稿：カード／カード(枠線なし)／メディア 表示スタイル用。
	   protect-*.css の pm-protect レイヤーが .pm-side a に下線・色を
	   !important で強制しているテーマ(Cocoon等)でも、この見た目を保つため、
	   同じく pm-base レイヤー内で !important を使う。
	   （@layer の仕様上、important 同士の優先順位は pm-reset > pm-base > pm-protect
	   の順になるため、pm-base側のimportantがpm-protect側のimportantに勝つ）
	   v0.11.15で修正：margin に !important が付いていなかったため、
	   （1）同じpm-baseレイヤー内の .pm-widget-list li（margin:0 0 8px）の方が
	   詳細度で勝ってしまい常に上書きされていた、
	   （2）テーマ側のCSS（li要素のマージンをリセットするもの等）に
	   詳細度・!important の有無次第で上書きされたりされなかったりしていた、
	   の2点により「テーマによって効いたり効いていなかったり」する原因に
	   なっていた。!important を付けて詳細度・テーマ差に左右されないよう固定。 */
	.pm-recent-item {
		margin: 0 0 12px !important;
	}

	.pm-recent-item:last-child {
		margin-bottom: 0 !important;
	}

	.pm-recent-item-link {
		display: flex;
		align-items: center;
		gap: 10px;
		text-decoration: none !important;
	}

	/* v0.10.3追加：タイトルが2〜3行になった際、flexboxのデフォルト
	   flex-shrink:1によってサムネイル側が圧縮されてしまう不具合対策。
	   spanにも明示的にサイズとflex-shrink:0を指定し、常にimgと同じ
	   60x60を維持する（imgだけにwidth/heightを付けても、親spanが
	   flexアイテムとして縮む余地があると意味が無いため）。 */
	.pm-recent-thumb {
		flex-shrink: 0 !important;
		width: 60px !important;
		height: 60px !important;
	}

	.pm-recent-thumb img {
		width: 60px !important;
		height: 60px !important;
		object-fit: cover !important;
		border-radius: 4px;
		display: block !important;
	}

	.pm-recent-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.pm-recent-title {
		font-size: var(--pm-font-size) !important;
		color: var(--pm-text-color) !important;
		font-weight: 600;
		text-decoration: none !important;
	}

	.pm-recent-date {
		font-size: 12px;
		color: #888 !important;
	}

	.pm-recent-style-card .pm-recent-item-link {
		border: 1px solid #ddd;
		border-radius: 6px;
		padding: 10px;
	}

	.pm-recent-style-card-noborder .pm-recent-item-link {
		background: #f7f7f7;
		border-radius: 6px;
		padding: 10px;
	}

	.pm-recent-style-media .pm-recent-item-link {
		padding: 0;
	}

	/* v0.10.1追加：表示形式「日付/カテゴリー/タイトル」用。サムネイルを出さないため
	   pm-recent-body ではなく専用の pm-recent-meta を使う（既存のカード/メディア
	   スタイルの thumb 前提レイアウトを壊さないように分離） */
	.pm-recent-fields-date_category_title .pm-recent-item-link {
		display: flex;
		flex-direction: column;
		align-items: flex-start; /* v0.11.5で追加：基本ルールのalign-items:centerを
			引き継いで2行とも中央寄せになっていたのを左寄せに修正 */
		gap: 2px;
	}

	.pm-recent-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
		color: #888 !important;
	}

	.pm-recent-term {
		display: inline-block;
		padding: 1px 8px;
		border-radius: 3px;
		background: #f0f0f0;
		color: #666 !important;
	}

	/* v0.11.11追加：「カード（サムネイル/タイトル/日付/カテゴリー）」用。
	   pm-recent-body は flex-column のため、日付の下にバッジが来ると
	   詰まって見えるので少し余白を足す。日付/カテゴリー/タイトル
	   （サムネイルなし・pm-recent-meta を横並びで使う形式）には
	   影響しないよう、pm-recent-body 配下限定で指定する。 */
	.pm-recent-body .pm-recent-term {
		margin-top: 2px;
	}

	/* v0.10.1追加：もっと見るリンク（未設定時は要素自体が出力されないので影響なし） */
	.pm-widget-more-link {
		display: block;
		margin-top: 10px;
		font-size: 13px;
		color: var(--pm-text-color) !important;
		text-decoration: none !important;
		text-align: right;
	}

	/* 月別アーカイブ：プルダウン表示 */
	.pm-archive-dropdown {
		width: 100%;
		padding: 6px 8px;
		font-size: var(--pm-font-size);
	}

	/* ビューポートではなく .pm-container 自身の幅で1カラムに切り替える。
	   .pm-layout は .pm-container の子要素なので、ここで flex-direction を
	   変更しても自己参照制約に引っかからない（コンテナ自身は.pm-container）。 */
	@container pm-layout (max-width: 520px) {
		.pm-layout {
			flex-direction: column;
		}

		.pm-main,
		.pm-side {
			flex: 1 1 auto;
			width: 100%;
		}
	}

	/* ============================================================
	   アーカイブページ用グリッド（カード/カード(枠線なし)/メディア/1行テキスト）
	   テーマのテンプレートに依存せず、記事データから直接組み立てているため、
	   ここで見た目を完全にコントロールできる。
	   ============================================================ */
	.pm-archive-grid {
		display: grid;
		grid-template-columns: repeat( var( --pm-archive-columns, 3 ), 1fr );
		gap: 24px;
	}

	.pm-archive-card {
		display: block;
		color: inherit !important;
		text-decoration: none !important;
	}

	.pm-archive-card-thumb {
		display: block !important;
		aspect-ratio: 4 / 3 !important;
		overflow: hidden !important;
	}
	.pm-archive-card-thumb img {
		width: 100% !important;
		height: 100% !important;
		display: block !important;
		object-fit: cover !important;
	}

	.pm-archive-card-body {
		display: block;
		padding: 12px 0;
	}
	.pm-archive-card-title {
		display: block;
		font-size: var( --pm-font-size );
		font-weight: 700;
		margin-bottom: 6px;
	}
	.pm-archive-card-date {
		display: block;
		font-size: 12px;
		color: #888;
		margin-bottom: 6px;
	}
	.pm-archive-card-excerpt {
		display: block;
		font-size: 13px;
		color: var( --pm-text-color );
		line-height: 1.7;
	}
	.pm-archive-card-terms {
		display: block;
		margin-bottom: 6px;
	}
	.pm-archive-card-term {
		display: inline-block;
		padding: 2px 8px;
		border-radius: 3px;
		background: #f0f0f0;
		color: #666;
		font-size: 11px;
		margin: 0 4px 4px 0;
	}

	/* カード：枠線あり */
	.pm-archive-grid--card .pm-archive-card {
		border: 1px solid #ddd;
		border-radius: 6px;
		overflow: hidden;
		background: #fff;
	}
	.pm-archive-grid--card .pm-archive-card-body {
		/* テーマ側のレイヤー外CSS（例：a,li等へのpadding:0リセット）が
		   カスケードレイヤーの外側にあるため、layer内の無印padding指定は
		   詳細度に関わらず負けてしまう。!important で確実に効かせる。 */
		padding: 12px !important;
	}

	/* カード（枠線なし） */
	.pm-archive-grid--card-noborder .pm-archive-card {
		border: none;
		border-radius: 6px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.08 );
	}
	.pm-archive-grid--card-noborder .pm-archive-card-body {
		padding: 12px !important;
	}

	/* メディア：サムネイル(左)＋テキスト(右)の横並び */
	.pm-archive-grid--media {
		grid-template-columns: 1fr;
	}
	.pm-archive-grid--media .pm-archive-card {
		display: flex;
		gap: 14px;
		border-bottom: 1px solid #eee;
		padding: 14px 0;
	}
	.pm-archive-grid--media .pm-archive-card-thumb {
		flex: 0 0 110px;
	}
	.pm-archive-grid--media .pm-archive-card-thumb img {
		width: 110px !important;
		height: 110px !important;
		object-fit: cover !important;
		border-radius: 4px;
	}
	.pm-archive-grid--media .pm-archive-card-body {
		flex: 1;
		padding: 0;
	}

	/* 1行テキスト：日付・カテゴリーバッジ・タイトルを1行に並べる構成
	   （v0.11.6で全面刷新、v0.11.7で「詳細はこちら」ボタンを削除）。
	   このスタイルではPHP側で.pm-archive-card-thumb/.pm-archive-card-body
	   自体を出力していないため、以前あった「display:noneで隠す」方式の
	   ような、!important不足で他ルールに負ける類の不具合の心配が無い
	   （そもそも要素が無ければ隠す必要も無い）。 */
	.pm-archive-grid--text {
		grid-template-columns: 1fr;
	}
	.pm-archive-grid--text .pm-archive-card {
		display: flex !important;
		align-items: center !important;
		gap: 16px !important;
		border-bottom: 1px solid #eee !important;
		padding: 14px 0 !important;
	}
	.pm-archive-grid--text .pm-archive-card-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px;
		min-width: 0;
	}
	.pm-archive-grid--text .pm-archive-card-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.pm-archive-grid--text .pm-archive-card-date {
		display: inline-block !important;
		margin-bottom: 0 !important;
		white-space: nowrap;
	}
	.pm-archive-grid--text .pm-archive-card-term {
		display: inline-block;
		padding: 2px 10px;
		border-radius: 3px;
		background: #f0f0f0;
		color: #666 !important;
		font-size: 12px;
		white-space: nowrap;
	}
	.pm-archive-grid--text .pm-archive-card-title {
		display: inline !important;
		font-weight: 700;
		margin-bottom: 0 !important;
		text-decoration: underline !important;
	}

	/* ビューポートではなくコンテナ自身の幅で1カラム化 */
	@container pm-layout (max-width: 640px) {
		.pm-archive-grid {
			grid-template-columns: 1fr;
		}
		.pm-archive-grid--media .pm-archive-card {
			flex-direction: column;
		}
		.pm-archive-grid--media .pm-archive-card-thumb {
			flex: none;
		}
		.pm-archive-grid--media .pm-archive-card-thumb img {
			width: 100% !important;
			height: auto !important;
		}
	}
}

/* ============================================================
   v0.12.0追加／v0.12.1でデザイン刷新：制限カテ（パスワード保護）関連のスタイル
   ============================================================
   パスワード入力フォーム（pm_lite_render_pass_gate_page）と、
   個別記事末尾の「« カテゴリー名 TOPへ戻る」ボタン
   （pm_lite_append_pass_cat_top_button）用。
   既存の.pm-container/.pm-layout--no-side/.pm-mainの上に乗るだけなので、
   新しいレイヤーや@containerの追加は不要。アイコンは全てインラインSVG／
   dashiconsのみを使用し、外部画像・絵文字（WordPress標準の絵文字変換で
   <img>化され、CDNが繋がらない環境だと404表示になる）は使わない。 */
@layer pm-base {
	.pm-lite-pass-cat-back {
		margin-top: 32px;
		text-align: center;
	}
	.pm-lite-pass-cat-back-link {
		display: inline-block;
		padding: 10px 20px;
		border: 1px solid var(--pm-accent-color);
		border-radius: 4px;
		color: var(--pm-accent-color) !important;
		text-decoration: none !important;
	}
	.pm-lite-pass-cat-back-link:hover {
		background: var(--pm-accent-color);
		color: #fff !important;
	}
}

/* ============================================================
   パスワード入力ページ（pass gate）
   @layerの外に置き、テーマCSSとの優先度競合を防ぐ。
   ============================================================ */
/* --- 背景：画面中央配置 --- */
.pm-lite-pass-gate-bg {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	padding: 48px 16px;
	background:
		radial-gradient(ellipse 120% 60% at 50% 0%, color-mix(in srgb, var(--pm-accent-color) 8%, transparent), transparent 70%),
		radial-gradient(ellipse 80% 50% at 80% 100%, color-mix(in srgb, var(--pm-accent-color) 5%, transparent), transparent);
}
/* --- カード外枠（位置・幅） --- */
.pm-lite-pass-gate {
	width: 100%;
	max-width: 440px;
}
/* --- カード本体 --- */
.pm-lite-pass-gate-card {
	position: relative;
	padding: 52px 48px 48px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 4px 12px rgba(0, 0, 0, 0.06),
		0 16px 40px rgba(0, 0, 0, 0.06);
	text-align: center;
	box-sizing: border-box;
}
/* --- 鍵アイコン（上部バッジ） --- */
.pm-lite-pass-gate-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 24px;
	border-radius: 14px;
	color: var(--pm-accent-color);
	background: linear-gradient(135deg, var(--pm-accent-color), color-mix(in srgb, var(--pm-accent-color) 75%, #000));
	box-shadow:
		0 4px 16px color-mix(in srgb, var(--pm-accent-color) 35%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* --- タイトル --- */
.pm-lite-pass-gate-title {
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
	color: var(--pm-text-color, #1a1a1a);
}
/* --- リード文 --- */
.pm-lite-pass-gate-lead {
	color: #888;
	font-size: 0.85em;
	line-height: 1.8;
	margin: 0 0 28px;
}
/* --- エラーメッセージ --- */
.pm-lite-pass-gate-error {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: #c0392b;
	background: #fef2f0;
	font-size: 0.84em;
	font-weight: 600;
	margin: 0 0 20px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid #fde0db;
}
/* --- フォーム --- */
.pm-lite-pass-gate-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
}
/* --- ラベル --- */
.pm-lite-pass-gate-label {
	display: block;
	font-size: 0.82em;
	font-weight: 600;
	color: #555;
	margin-bottom: -8px;
	letter-spacing: 0.03em;
}
/* --- 入力欄ラッパー --- */
.pm-lite-pass-gate-input-wrap {
	position: relative;
}
.pm-lite-pass-gate-input-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	color: #bbb;
	pointer-events: none;
	transition: color 0.15s ease;
}
.pm-lite-pass-gate-input-wrap:focus-within .pm-lite-pass-gate-input-icon {
	color: var(--pm-accent-color);
}
/* --- 入力欄 --- */
.pm-lite-pass-gate-input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 44px 14px 40px;
	font-size: 0.95em;
	border: 1.5px solid #e2e2e2;
	border-radius: 12px;
	background: #f8f9fa;
	color: #222;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pm-lite-pass-gate-input::placeholder {
	color: #b8b8b8;
}
.pm-lite-pass-gate-input:focus {
	outline: none;
	border-color: var(--pm-accent-color);
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-accent-color) 12%, transparent);
}
/* --- 表示/非表示トグル --- */
.pm-lite-pass-gate-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	background: transparent;
	color: #aaa;
	cursor: pointer;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}
.pm-lite-pass-gate-toggle:hover {
	color: var(--pm-accent-color);
	background: rgba(0, 0, 0, 0.04);
}
/* --- 送信ボタン --- */
.pm-lite-pass-gate-submit {
	width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
	padding: 14px 20px;
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	background: linear-gradient(135deg, var(--pm-accent-color), color-mix(in srgb, var(--pm-accent-color) 80%, #000));
	border: none;
	border-radius: 12px;
	cursor: pointer;
	box-shadow:
		0 2px 8px color-mix(in srgb, var(--pm-accent-color) 30%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.pm-lite-pass-gate-submit:hover {
	filter: brightness(1.06);
	box-shadow:
		0 4px 16px color-mix(in srgb, var(--pm-accent-color) 40%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pm-lite-pass-gate-submit:active {
	transform: translateY(1px);
	filter: brightness(0.95);
}
/* --- スマホ対応 --- */
@media (max-width: 480px) {
	.pm-lite-pass-gate-bg {
		padding: 32px 12px;
		min-height: 70vh;
	}
	.pm-lite-pass-gate-card {
		padding: 40px 32px 36px;
		border-radius: 16px;
	}
}