.tooltip {
	position: relative;
	cursor: pointer;
	--gap: 10px; /* 觸發元素與 tooltip 的間距 */
	--arrow: 8px; /* 箭頭邊長 */
	--bg: #333; /* tooltip 背景色 */
	--fg: #fff; /* 文字色 */
	z-index: 3001;
}

/* 右側的提示框 */
.tooltip::after {
	content: attr(data-tips);
	position: absolute;
	top: 50%;
	left: calc(100% + var(--gap));
	transform: translateY(-50%);
	background: var(--bg);
	color: var(--fg);
	font-size: 14px;
	padding: 0 5px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 2000;
}

/* 菱形箭頭（朝左，指向觸發元素） */
.tooltip::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(100% + var(--gap) - var(--arrow) / 2);
	width: var(--arrow);
	height: var(--arrow);
	background: var(--bg);
	transform: translateY(-50%) rotate(45deg);
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 9; /* 在提示框之下，銜接更自然 */
}

/* 顯示時淡入 */
.tooltip:hover::after,
.tooltip:hover::before {
	opacity: 1;
}

/* 無動效偏好支援 */
@media (prefers-reduced-motion: reduce) {
	.tooltip::after,
	.tooltip::before {
		transition: none;
	}
}