/* 1022 새 편집기 [목소리] — 로컬 우선 + ElevenLabs 서랍(목소리 칸 안에서만 · 오른쪽 → 왼쪽 · 300ms) · 기존 토큰(청록 · 아이보리 · 흰 칸 · 둥근 모서리)만 씀 */
.ev2vd { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; }
.ev2vd-top { display: flex; flex-direction: column; gap: 6px; }
.ev2vd-status, .ev2vd-cur { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ev2vd-cur { color: var(--ink-2); }
.ev2vd-cur b { color: var(--ink); }
.ev2vd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; flex: none; }
.ev2vd.off .ev2vd-dot { background: var(--warn-ink); }
.ev2vd-prov { display: flex; flex-wrap: wrap; gap: 6px; }
.ev2vd-prov .btn { flex: 1 1 140px; min-height: 44px; white-space: normal; line-height: 1.25; }
.ev2vd-prov .btn.on { background: var(--teal); border-color: var(--teal); color: var(--surface); }   /* 지금 쓰는 엔진 */
.ev2vd-alert { padding: 10px 12px; font-size: 14px; border-radius: var(--radius-m); }
.ev2vd-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; }
.ev2vd-fb select { font: inherit; font-weight: 400; min-height: 40px; max-width: 100%; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 8px; }
/* 무대 = 로컬 목록 + 오른쪽 진입 칸 · 서랍은 이 안에서만 덮음(편집기 · 타임라인은 안 움직임) */
.ev2vd-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-m); min-height: 360px; }
.ev2vd-base { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 24%, 220px); gap: 10px; align-items: start; }
.ev2vd-local { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ev2vd-cap { font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ev2vd-rail { position: sticky; top: 8px; align-self: start; min-height: 200px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg); display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 12px 8px; text-align: center; min-width: 0; }
.ev2vd-rail b { font-size: 14px; word-break: keep-all; overflow-wrap: normal; }
.ev2vd-rail p { margin: 0; font-size: 12.5px; }
.ev2vd-rail .btn { min-height: 44px; padding: 0 6px; white-space: normal; line-height: 1.25; }
.ev2vd-pay { align-self: center; font-size: 12px; font-weight: 700; color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--radius-pill); padding: 2px 10px; }
.ev2vd-drawer { position: absolute; inset: 0; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m) 0 0 var(--radius-m); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto;
  transform: translateX(103%); visibility: hidden; transition: transform 300ms ease, visibility 0s linear 300ms; box-shadow: -8px 0 24px rgba(28, 25, 23, .08); }
.ev2vd-drawer.open { transform: translateX(0); visibility: visible; transition: transform 300ms ease, visibility 0s linear 0s; }
.ev2vd-stage.open { min-height: 520px; }
.ev2vd-dh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev2vd-dh b { font-size: 16px; }
.ev2vd-dh b:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.ev2vd-fee { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ev2vd-fee small { display: block; font-size: 12.5px; margin-top: 3px; }
.ev2vd .vrows.compact .vr.on { background: var(--teal-light); }
.ev2vd .vrows.compact .vbtns .btn { min-height: 40px; }
.ev2vd .btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* 좁은 칸 · 폰: 오른쪽 진입 칸을 접고(위 버튼이 같은 일) 서랍은 칸 전체 폭 */
@container (max-width: 330px) {
  .ev2vd-base { grid-template-columns: minmax(0, 1fr); }
  .ev2vd-rail { display: none; }
  .ev2vd-drawer { border-radius: var(--radius-m); padding: 10px; }
}
@media (max-width: 560px) {
  .ev2vd-base { grid-template-columns: minmax(0, 1fr); }
  .ev2vd-rail { display: none; }
  .ev2vd-drawer { border-radius: var(--radius-m); padding: 10px; }
  .ev2vd .vrows.compact .vr { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 8px 6px; }
  .ev2vd .vrows.compact .vbtns .btn { min-width: 60px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .ev2vd-drawer, .ev2vd-drawer.open { transition: none; } }
.ev2vd .vrows.compact .vline b { white-space: nowrap; }