/**
 * B-pop フロント: ポップアップ/バナーのスタイル（brief §5-4）。
 *
 * - 位置9種（top/middle/bottom × left/center/right）。AC-22
 * - 幅は CSS カスタムプロパティ --bpop-width（JS が設定。既定 320px）。AC-23
 * - はみ出し防止（max-width）・縦横比維持。E-9, P-4
 * - フェードは opacity トランジションのみ（演出はこの1種のみ）
 */

.bpop {
	position: fixed;
	z-index: 99999;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.bpop.bpop-visible {
	opacity: 1;
}

.bpop[hidden] {
	display: none;
}

/* 位置9種（中央系は transform で補正）。 */

.bpop-pos-top-left {
	top: 10px;
	left: 10px;
}

.bpop-pos-top-center {
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.bpop-pos-top-right {
	top: 10px;
	right: 10px;
}

.bpop-pos-middle-left {
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}

.bpop-pos-middle-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.bpop-pos-middle-right {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.bpop-pos-bottom-left {
	bottom: 10px;
	left: 10px;
}

.bpop-pos-bottom-center {
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.bpop-pos-bottom-right {
	bottom: 10px;
	right: 10px;
}

/* 画像: 指定幅・はみ出し禁止（縦横とも）・縦横比維持。 */

/*
 * 縦は閉じるボタン（コンテナ上端 top: 4px）と位置オフセット（10px）の余白を
 * 確保するため max-height で制限する。明示 width と max-height が同時に効く
 * 縦長画像では object-fit: contain が縦横比を維持する（歪み禁止・I-1 対応）。
 */

.bpop img {
	display: block;
	width: var(--bpop-width, 320px);
	max-width: calc(100vw - 20px);
	height: auto;
	max-height: calc(100vh - 40px);
	object-fit: contain;
	border: 0;
}

.bpop .bpop-body a {
	display: block;
	line-height: 0;
}

/*
 * 閉じるボタン: 最小タップ領域 32x32px・コントラスト確保（白 on 黒系 ≒ 15:1）。
 * 画像の右上に重ねて配置（画面外にはみ出さない）。
 */

.bpop-close {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

.bpop-close:hover,
.bpop-close:focus {
	background: #000;
}

.bpop-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}