:root {
	--bsm-panel-size: 480px;
	--bsm-overlay-opacity: 0.5;
	--bsm-duration: 320ms;
	--bsm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bsm-bg: #ffffff;
	--bsm-text: #1f1f1f;
	--bsm-muted: #6b6b6b;
	--bsm-border: #ececec;
	--bsm-close-bg: rgba(255, 255, 255, 0.9);
}

.bsm-root {
	position: fixed;
	inset: 0;
	/* Spectra / UAGB / 各種ギャラリーの lightbox (z-index: 約 999900〜9999999) より
	   必ず上に表示されるよう、万が一のため10^8 桁までブースト。
	   これまで 99999 だったため、Spectraギャラリーlightboxが上に被さって
	   閉じるボタンもモーダル全体もクリック不能になる現象が発生していた。 */
	z-index: 99999999;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--bsm-duration) var(--bsm-ease), visibility 0s linear var(--bsm-duration);
	color: var(--bsm-text);
}

.bsm-root.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--bsm-duration) var(--bsm-ease), visibility 0s;
}

.bsm-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background var(--bsm-duration) var(--bsm-ease);
	cursor: pointer;
}

.bsm-root.is-open .bsm-overlay {
	background: rgba(0, 0, 0, var(--bsm-overlay-opacity));
}

.bsm-panel {
	position: absolute;
	background: var(--bsm-bg);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	will-change: transform;
	display: flex;
	flex-direction: column;
	transition: transform var(--bsm-duration) var(--bsm-ease);
	overflow: hidden;
	/* 子孫の overflow:auto が正しく働くために min-height:0 必須
	   （flex-item はデフォルト min-height:auto でコンテンツ最小高さまで潰れない） */
	min-height: 0;
	/* ★注意：.bsm-panel は position: absolute（L46）のまま維持すること！
	   position: absolute な要素はそれ自体が子孫の containing block（配置基準ボックス）
	   を形成するため、閉じるボタン .bsm-close の position: absolute 基準としても既に機能する。
	   過去にここへ position: relative を重ねて書いてしまった事により、L82の bottom:0 が
	   「親下端固定」ではなく「static位置からの相対オフセット」と誤解釈されて、
	   direction=bottom 時にパネル上端が画面トップに張り付き 80vh 等の高さ設定が
	   全て無意味になる致命的不具合（v0.1.0〜v0.2.7 継続）を引き起こしていた。 */
}

.bsm-root.direction-right .bsm-panel {
	top: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	width: var(--bsm-panel-size);
	max-width: 100vw;
	transform: translate3d(100%, 0, 0);
	border-left: 1px solid var(--bsm-border);
	border-radius: 0;
}

.bsm-root.direction-right.is-open .bsm-panel {
	transform: translate3d(0, 0, 0);
}

.bsm-root.direction-bottom .bsm-panel {
	bottom: 0;
	left: 0;
	right: 0;
	/* ★ v0.2.6 高さ計算式一本化（これまで複数の height が重なってユーザー設定 80vh 等を無視して
	   画面いっぱいに 92vh 固定で突っ張っていた不具合を根絶。
	   論理：ユーザー指定の高さ(var)と、安全上限 92dvh の小さい方を自動選択。
	   → ユーザーが 80vh 指定時: min(80vh, 92dvh) = 80vh（設定通りピッタリ表示、下が空かない）
	   → ユーザーが 500px 指定時: デスクトップで 500px、スマホ縦画面(70vh以下)で 92dvh に自動縮小  */
	height: min(var(--bsm-panel-size), 92dvh);
	/* 古い dvh 未対応ブラウザ向けに vh 版を先に書き、dvh 対応ブラウザは上の min(dvh) で上書き */
	height: min(var(--bsm-panel-size), 92vh);
	height: min(var(--bsm-panel-size), 92dvh);
	/* 更に絶対的な保険：100dvh を越えるような極端な値（例: 120vh）が入っても絶対に画面内に収める */
	max-height: 100vh;
	max-height: 100dvh;
	transform: translate3d(0, 100%, 0);
	border-top: 1px solid var(--bsm-border);
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}

.bsm-root.direction-bottom.is-open .bsm-panel {
	transform: translate3d(0, 0, 0);
}

@media (max-width: 640px) {
	.bsm-root.direction-right .bsm-panel {
		width: 100vw;
	}
	.bsm-root.direction-bottom .bsm-panel {
		/* モバイルでもユーザー設定を尊重しつつ、アドレスバー被り防止のための 92dvh 上限を維持。
		   旧 v0.2.5 までの「height:92dvh 固定」はユーザーの 80vh 設定を完全に無視するので削除。 */
		height: min(var(--bsm-panel-size), 92vh);
		height: min(var(--bsm-panel-size), 92dvh);
		max-height: 92vh;
		max-height: 92dvh;
	}
}

.bsm-panel-inner {
	position: relative;
	flex: 1 1 auto;
	/* 重要：flex-item → overflow:auto のチェーンを成立させるため min-height:0 必須 */
	min-height: 0;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	/* モバイルで縦スクロールだけは許可（html.bsm-lock の touch-action:none が親伝播して内部まで禁止されるのを打ち消す） */
	touch-action: pan-y;
}

.bsm-close {
	/* ★ v0.2.4 の position:sticky + float を全撤去。
	   Spectra/UAGB lightbox との競合や、overflow:hidden 親の中で sticky が
	   意図しない位置に飛び出して「クリックできない」というトラブルを根絶するため、
	   絶対配置基準 (.bsm-panel が position:relative) からの固定座標 top/right:12px に戻して安定化。 */
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 99;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--bsm-border);
	background: var(--bsm-close-bg);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--bsm-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 180ms ease, transform 120ms ease;
	/* モバイルでタップした時に青いハイライトが出ないように */
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	/* 閉じるボタンは絶対にクリック可能に（親孫で pointer-events:none を上書きされる事故防止） */
	pointer-events: auto !important;
	/* 長押しでボタン内の×文字が選択されるのを防止 */
	user-select: none;
	-webkit-user-select: none;
}
.bsm-close:hover {
	background: #f5f5f5;
	transform: scale(1.04);
}
.bsm-close:active {
	transform: scale(0.96);
}
/* 万が一 .bsm-panel 内のコンテンツ（Spectra 等）が閉じるボタンの上に重なってしまった
   場合でも、必ずボタンが一番上に出るように更に高い z-index を panel-is-open 時に上書き。 */
.bsm-root.is-open .bsm-close {
	z-index: 999999999 !important;
}

.bsm-root.hide-close .bsm-close {
	display: none;
}

.bsm-body,
.bsm-loading {
	flex: 1 1 auto;
	width: 100%;
	/* overflow-y: auto だと iOS/Safari で稀にスクロールがフリーズするため、scroll で強制 */
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* 重要：flex-item の min-height:auto がないと内部コンテンツが大きい時に
	   .bsm-body 自体が引き伸ばされ、親 .bsm-panel / .bsm-panel-inner からはみ出して
	   overflow:hidden のパネル本体がページ外に伸びてスクロール不能になる。 */
	min-height: 0;
	max-height: 100%;
	/* 親 body/root の touch-action:none を打ち消し、パネル内の縦スクロールを常に許可 */
	touch-action: pan-y;
	/* スクロールバーのカスタマイズ（細くて見やすく） */
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}
/* Firefox 以外 細いスクロールバー */
.bsm-body::-webkit-scrollbar,
.bsm-loading::-webkit-scrollbar { width: 6px; }
.bsm-body::-webkit-scrollbar-thumb,
.bsm-loading::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 999px;
}
.bsm-body::-webkit-scrollbar-thumb:hover,
.bsm-loading::-webkit-scrollbar-thumb:hover { background: #999; }

.bsm-body:empty {
	display: none;
}

.bsm-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 40px 20px;
	color: var(--bsm-muted);
}

.bsm-loading-text {
	margin: 0;
	font-size: 14px;
}

.bsm-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--bsm-border);
	border-top-color: var(--bsm-text);
	border-radius: 50%;
	animation: bsm-spin 800ms linear infinite;
}

@keyframes bsm-spin {
	to { transform: rotate(360deg); }
}

.bsm-article {
	padding: 28px 28px 60px;
	max-width: 780px;
	margin: 0 auto;
	line-height: 1.75;
	font-size: 15px;
}

.bsm-thumbnail {
	margin: -28px -28px 22px;
	line-height: 0;
}
.bsm-thumbnail img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.bsm-header {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bsm-border);
}
.bsm-title {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 700;
	word-break: break-word;
	padding-right: 56px;
}

.bsm-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	color: var(--bsm-muted);
	font-size: 13px;
}
.bsm-terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bsm-term {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--bsm-border);
	border-radius: 999px;
	font-size: 12px;
}

.bsm-content {
	color: var(--bsm-text);
}
.bsm-content > *:first-child { margin-top: 0; }
.bsm-content p { margin: 0 0 1.2em; }
.bsm-content h2,
.bsm-content h3,
.bsm-content h4 {
	margin: 1.8em 0 0.8em;
	line-height: 1.5;
	font-weight: 700;
}
.bsm-content img {
	max-width: 100%;
	height: auto;
}
.bsm-content a {
	color: inherit;
	text-decoration: underline;
}
.bsm-content blockquote {
	padding: 12px 16px;
	margin: 1.4em 0;
	border-left: 4px solid var(--bsm-border);
	background: #fafafa;
	color: #555;
}
.bsm-content ul,
.bsm-content ol {
	padding-left: 1.6em;
	margin: 1em 0;
}
.bsm-content pre {
	overflow-x: auto;
	padding: 12px 14px;
	background: #f7f7f7;
	border-radius: 6px;
	font-size: 13px;
}
.bsm-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
}
.bsm-content th,
.bsm-content td {
	padding: 8px 10px;
	border: 1px solid var(--bsm-border);
}
.bsm-content .alignleft { float: left; margin: 0 1.2em 1.2em 0; }
.bsm-content .alignright { float: right; margin: 0 0 1.2em 1.2em; }
.bsm-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.bsm-content .wp-caption { max-width: 100%; }

.bsm-page-links {
	clear: both;
	margin: 22px 0;
	padding: 10px 0;
	border-top: 1px dashed var(--bsm-border);
	border-bottom: 1px dashed var(--bsm-border);
	font-size: 14px;
}
.bsm-page-links a {
	display: inline-block;
	padding: 2px 10px;
	margin: 0 4px;
	border: 1px solid var(--bsm-border);
	border-radius: 4px;
	text-decoration: none;
}
.bsm-page-links span:not(.page-numbers) + a { border: 0; }

.bsm-footer {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--bsm-border);
	text-align: center;
}
.bsm-readmore {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--bsm-text);
	border-radius: 999px;
	color: var(--bsm-text);
	background: transparent;
	text-decoration: none;
	font-size: 14px;
	transition: background 180ms ease, color 180ms ease;
}
.bsm-readmore:hover {
	background: var(--bsm-text);
	color: #fff;
}

body.bsm-lock,
html.bsm-lock {
	overflow: hidden !important;
	touch-action: none;
}

.bsm-root.is-prevent-scroll .bsm-overlay,
.bsm-root.is-prevent-scroll .bsm-panel-inner {
	scroll-behavior: auto;
}