/* Echo Voice：記事先頭のプレイヤー。「明るい作業台」系、ピル型バッジで統一。クラスは ecvo- 始まり。 */
.ecvo {
	--ecvo-accent: #5b7fa6;
	--ecvo-accent-soft: #eef3f9;
	--ecvo-ink: #2c3440;
	box-sizing: border-box;
	margin: 0 0 1.6em;
	padding: 14px 16px 12px;
	border: 1px solid #d9e0e8;
	border-left: 4px solid var(--ecvo-accent);
	border-radius: 12px;
	background: var(--ecvo-accent-soft);
	color: var(--ecvo-ink);
	animation: ecvo-in 0.4s ease-out both;
}
.ecvo--mrchildren { --ecvo-accent: #c4821a; --ecvo-accent-soft: #fdf5e6; }
.ecvo--raspi { --ecvo-accent: #1f8a8a; --ecvo-accent-soft: #e9f6f5; }

.ecvo *, .ecvo *::before, .ecvo *::after { box-sizing: border-box; }

.ecvo__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 10px;
}
.ecvo__badge,
.ecvo__dur {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.04em;
}
.ecvo__badge { background: var(--ecvo-accent); color: #fff; }
.ecvo__dur { background: #fff; color: var(--ecvo-accent); border: 1px solid var(--ecvo-accent); }
.ecvo__title { font-size: 15px; font-weight: 700; }

.ecvo__body { display: flex; align-items: center; gap: 10px; }
.ecvo__audio { flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; }
.ecvo__rate {
	flex: 0 0 auto;
	min-width: 52px;
	padding: 4px 10px;
	border: 1px solid var(--ecvo-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--ecvo-accent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
}
.ecvo__rate[hidden] { display: none; }
.ecvo__rate:focus-visible { outline: 2px solid var(--ecvo-accent); outline-offset: 2px; }

/* テーマの #postContent p に負けないよう、注記は p ではなく div にしている */
.ecvo .ecvo__note { margin: 8px 0 0; padding: 0; font-size: 12px; line-height: 1.6; color: #5a6573; }
.ecvo .ecvo__note--sub { margin-top: 2px; }

@keyframes ecvo-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ecvo { animation: none; }
}
@media (max-width: 480px) {
	.ecvo { padding: 12px 12px 10px; }
}