/*
 * DN Core 試聴プレーヤー — フロントの見た目（楽ダイのプレーヤーを土台に）
 *  ・すべて .dn-audio に前置。色は --dn-* で受け、既定値は暗い地でも明るい地でも成立する
 *  ・サイトごとに変えるときは追加CSSで  body .dn-audio { --dn-audio-accent:#E8A33D; }  のように書く
 */
.dn-audio {
	--dn-audio-accent: #F0632A;
	--dn-audio-accent2: #E8A33D;
	--dn-audio-card: rgba(127, 127, 127, .08);
	--dn-audio-border: rgba(127, 127, 127, .28);
	--dn-audio-text: inherit;
	--dn-audio-muted: rgba(127, 127, 127, .95);
	--dn-audio-bar: rgba(127, 127, 127, .25);
	--dn-audio-radius: 16px;
	max-width: 640px;
	margin: 1.5em auto;
	color: var(--dn-audio-text);
}
.dn-audio__heading { margin: 0 0 .4em; font-size: 1.15em; font-weight: 700; }
.dn-audio__lead { margin: 0 0 1em; font-size: .92em; color: var(--dn-audio-muted); }
.dn-audio__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dn-audio__track {
	display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 18px;
	background: var(--dn-audio-card); border: 1px solid var(--dn-audio-border); border-radius: var(--dn-audio-radius);
	transition: border-color .2s;
}
.dn-audio__track:hover { border-color: var(--dn-audio-accent2); }
.dn-audio__track.is-playing { border-color: var(--dn-audio-accent); background: linear-gradient(135deg, rgba(240, 99, 42, .08), rgba(232, 163, 61, .10)); }
.dn-audio__btn {
	width: 46px; height: 46px; flex: 0 0 46px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
	background: linear-gradient(135deg, var(--dn-audio-accent), var(--dn-audio-accent2));
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.dn-audio__btn:focus-visible { outline: 2px solid var(--dn-audio-accent2); outline-offset: 2px; }
.dn-audio__ico { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.is-playing .dn-audio__ico { width: 12px; height: 14px; border: 0; margin-left: 0; background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px); }
.dn-audio__info { flex: 1; min-width: 0; }
.dn-audio__title { font-weight: 700; font-size: .98em; line-height: 1.3; }
.dn-audio__sub { font-size: .78em; color: var(--dn-audio-muted); margin-top: 2px; }
.dn-audio__bar { height: 3px; border-radius: 2px; background: var(--dn-audio-bar); margin-top: 8px; overflow: hidden; }
.dn-audio__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dn-audio-accent), var(--dn-audio-accent2)); transition: width .25s linear; }
.dn-audio__eq { display: none; gap: 3px; align-items: flex-end; height: 22px; flex: 0 0 auto; }
.is-playing .dn-audio__eq { display: flex; }
.dn-audio__eq span { width: 4px; border-radius: 2px; background: linear-gradient(to top, var(--dn-audio-accent), var(--dn-audio-accent2)); animation: dnAudioEq .9s ease-in-out infinite; }
.dn-audio__eq span:nth-child(2) { animation-delay: .2s; }
.dn-audio__eq span:nth-child(3) { animation-delay: .1s; }
.dn-audio__eq span:nth-child(4) { animation-delay: .3s; }
@keyframes dnAudioEq { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.dn-audio__note { margin: .8em 0 0; font-size: .78em; color: var(--dn-audio-muted); text-align: right; }
.dn-audio__empty { padding: 1em; border: 1px dashed var(--dn-audio-border); border-radius: 8px; font-size: .9em; }
@media (prefers-reduced-motion: reduce) { .dn-audio__eq span { animation: none; height: 14px; } }