/**
 * core/paragraph「吹き出し」（テーマ内のすべての吹き出しで共通）。
 *   is-style-bubble-left  … 吹き出しが左・はにわが右（しっぽは右向き）
 *   is-style-bubble-right … はにわが左・吹き出しが右（しっぽは左向き）
 * 見本 .bubble：白・枠 1.5px #555・角10・影 soft・14px/700。
 *
 * しっぽは clip-path の三角を2枚重ねる（CEO 2026-10-12）：
 *   ::before … 枠の色（#555）の三角。箱の枠の内側の線から外へ
 *   ::after  … 地の色（白）の三角。少し小さく、箱の内側に 1px 食い込ませて、しっぽの付け根の枠線を消す
 *   → しっぽの2辺にだけ枠線が続いて見える。border の三角・回転した四角は使わない。
 * 位置・大きさは変数で持つ（--bubble-tail-w：枠の三角の幅、--bubble-tail-h：その高さ）。
 */

p.is-style-bubble-left,
p.is-style-bubble-right {
	--bubble-border: #555;
	--bubble-bg: var(--wp--preset--color--base);
	--bubble-tail-w: 13.5px;
	--bubble-tail-h: 18px;
	position: relative;
	margin: 0;
	padding: 12px 16px;
	border: 1.5px solid var(--bubble-border);
	border-radius: 10px;
	background-color: var(--bubble-bg);
	/* 影はしっぽ（clip-path の三角）にも出したいので box-shadow でなく drop-shadow（shadow soft とほぼ同じ強さ・2026-10-13 CEO） */
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

p.is-style-bubble-left::before,
p.is-style-bubble-left::after,
p.is-style-bubble-right::before,
p.is-style-bubble-right::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* 枠の色の三角 */
p.is-style-bubble-left::before,
p.is-style-bubble-right::before {
	width: var(--bubble-tail-w);
	height: var(--bubble-tail-h);
	background-color: var(--bubble-border);
}

/* 地の色の三角（枠の三角より 2.5px 短く・比例して低く。付け根は箱の内側へ 1px） */
p.is-style-bubble-left::after,
p.is-style-bubble-right::after {
	width: calc(var(--bubble-tail-w) - 2px);
	height: calc(var(--bubble-tail-h) * (var(--bubble-tail-w) - 2px) / var(--bubble-tail-w) - 2px);
	background-color: var(--bubble-bg);
}

/* 右向き（吹き出しが左） */
p.is-style-bubble-left::before {
	right: calc(-1 * var(--bubble-tail-w));
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

p.is-style-bubble-left::after {
	right: calc(-1 * var(--bubble-tail-w) + 3px);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 左向き（吹き出しが右） */
p.is-style-bubble-right::before {
	left: calc(-1 * var(--bubble-tail-w));
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

p.is-style-bubble-right::after {
	left: calc(-1 * var(--bubble-tail-w) + 3px);
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* スマホ：FV は「はにわが左・吹き出しが右」に入れ替わるので、bubble-left のしっぽも左向きにする（見本 .guide-fv の SP） */
@media (width <= 640px) {
	p.is-style-bubble-left,
	p.is-style-bubble-right {
		padding: 10px 12px;
		font-size: 13px;
	}

	p.is-style-bubble-left::before {
		right: auto;
		left: calc(-1 * var(--bubble-tail-w));
		clip-path: polygon(100% 0, 0 50%, 100% 100%);
	}

	p.is-style-bubble-left::after {
		right: auto;
		left: calc(-1 * var(--bubble-tail-w) + 3px);
		clip-path: polygon(100% 0, 0 50%, 100% 100%);
	}

	/* 吹き出しとはにわを横に並べたグループ（吹き出しが先）は、スマホで並びを逆にする */
	.wp-block-group:has(> p.is-style-bubble-left) {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	/* はにわの画像（幅はブロック属性の style で持つため !important）：FV 150→90px（見本 .guide-fv .guide-img の SP） */
	.wp-block-group:has(> p.is-style-bubble-left) > .wp-block-image img {
		width: 90px !important;
	}
}