/* トリガー装飾（JS が対応データを確認後に .is-active を付与）
   色・下線・?マークは設定によりインラインCSS変数で上書きされる */
.wpd-term.is-active:not(.wpd-term--block) {
	color: var(--wpd-accent, #1a8f82);
	cursor: pointer;
	border-bottom: 1px var(--wpd-underline, dashed) var(--wpd-accent, #1a8f82);
	padding-bottom: 1px;
	-webkit-tap-highlight-color: transparent;
}

.wpd-term.is-active:hover,
.wpd-term.is-active:focus-visible {
	background: color-mix(in srgb, var(--wpd-accent, #1a8f82) 12%, transparent);
	outline-offset: 2px;
}

/* ブロックトリガー（画像＋テキストの枠など）。文字装飾は付けず、?バッジで示す */
.wpd-term--block.is-active {
	position: relative;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.wpd-term--block.is-active::after {
	content: "?";
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wpd-accent, #1a8f82);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
}

/* ポップアップの器のみ（本文の見た目はサイトのCSSに委ねる） */
.tippy-box[data-theme~="wpd"] {
	background: #fff;
	color: inherit;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	max-width: min(420px, calc(100vw - 24px)) !important;

	/* Tippy 既定の縮小サイズを打ち消し、サイトの基準サイズを継承する */
	font-size: 1rem;
	line-height: inherit;
}

.tippy-box[data-theme~="wpd"] .tippy-content {
	padding: 0;
}

.tippy-box[data-theme~="wpd"] .tippy-arrow {
	color: #fff;
}

.wpd-popup {
	position: relative;
	padding: 12px 14px;
	max-height: min(60vh, 480px);
	overflow-y: auto;
	overflow-x: hidden; /* テーマ見出し等のはみ出しで横スクロールを出さない */
}

.wpd-popup > * {
	max-width: 100%;
}

.wpd-popup__close {
	position: absolute;
	top: 6px;
	right: 8px;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: #aaa;
	cursor: pointer;
	padding: 4px;
}

.wpd-popup__close:hover,
.wpd-popup__close:focus-visible {
	color: #555;
}

.wpd-popup__name {
	font-weight: 700;
	padding-right: 20px;
	margin-bottom: 8px;

	/* タイトル下線はトリガーと同じ設定色を引き継ぐ */
	border-bottom: 2px solid var(--wpd-accent, #1a8f82);
	padding-bottom: 5px;
}

/*
 * サイト全体の間隔設定を選んだ場合だけ、テーマ由来の直下マージンを揃える。
 * 入れ子のリスト・表・グループ内には干渉せず、ブロック個別のインライン指定は優先される。
 */
.tippy-box[data-theme~="wpd"] .wpd-popup__body--managed-spacing > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.tippy-box[data-theme~="wpd"] .wpd-popup__body--managed-spacing > * + * {
	margin-block-start: var(--wpd-content-gap, 12px);
}