/* ==== AI 성우 들어 보기 — /announcementsystem (views/include/announce_voices.ejs · announce-voices.js) ====
   ① 언어 고르기 → ② 목소리 타일(스튜디오 방송하기 화면처럼 여성 분홍·남성 파랑, 왼쪽 재생 동그라미) → 들려 드리는 안내 문장.
   이 파일을 고치면 preview_broadcast.ejs 의 ?v= 를 올린다(정적 파일 1년 캐시). */

.bav-player {
  position: relative;
  padding: clamp(16px, 2.4vw, 26px);
  border: 1px solid var(--line-neutral-subtle);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px -26px rgba(24, 20, 54, .22);
}

/* ---------- ① 언어 · ② 안내 ---------- */
.bav-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-bottom: 18px;
}
.bav-step { display: inline-flex; align-items: center; gap: 8px; }
.bav-step.is-2 { flex-basis: 100%; margin-top: 4px; } /* 목소리 칸 바로 위 줄 — 무엇을 누를지 붙어 있게 */
.bav-step-arrow { width: 16px; height: 16px; color: var(--w-blue-50); }
.bav-step-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--w-blue-50);
  color: #fff;
  font: 800 12px/1 var(--font-sans);
}
.bav-step-t { color: var(--fg-primary); font: 700 14.5px/1.3 var(--font-sans); letter-spacing: -.01em; }
.bav-langs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--w-cool-96);
}
.bav-lang {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--fg-neutral-subtle);
  font: 700 14px/1 var(--font-sans);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.bav-lang:hover { color: var(--fg-primary); }
.bav-lang[aria-checked="true"] {
  background: var(--w-blue-50);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 55, 255, .28);
}
.bav-lang:focus-visible { outline: 3px solid rgba(79, 55, 255, .3); outline-offset: 2px; }

/* ---------- 목소리 타일 ---------- */
.bav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.bav-first { position: relative; display: grid; }
.bav-voice {
  --c: var(--w-blue-50);
  --c-soft: rgba(79, 55, 255, .2);
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  min-width: 0;
  min-height: 66px;
  padding: 11px 14px 11px 11px;
  border: 1.5px solid;
  border-radius: 16px;
  text-align: left;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.bav-voice.is-female { --c: #e23a62; --c-soft: rgba(226, 58, 98, .22); background: #fff4f6; border-color: #ffd6df; }
.bav-voice.is-male { --c: #2f68f5; --c-soft: rgba(47, 104, 245, .22); background: #f2f7ff; border-color: #d2e2ff; }
.bav-voice:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--c-soft); border-color: var(--c); }
.bav-voice:focus-visible { outline: 3px solid var(--c-soft); outline-offset: 2px; }
.bav-voice.is-playing { border-color: var(--c); box-shadow: 0 0 0 3px var(--c-soft); }
.bav-voice.is-female.is-playing { background: #ffe9ee; }
.bav-voice.is-male.is-playing { background: #e7f0ff; }

.bav-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--c);
  box-shadow: inset 0 0 0 2px var(--c);
  transition: background .2s ease, color .2s ease;
}
.bav-ic-play { width: 18px; height: 18px; margin-left: 2px; }
.bav-eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.bav-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; }
.bav-eq i:nth-child(1) { transform: scaleY(.45); }
.bav-eq i:nth-child(2) { transform: scaleY(.9); }
.bav-eq i:nth-child(3) { transform: scaleY(.6); }
.bav-voice.is-playing .bav-play { background: var(--c); color: #fff; box-shadow: none; }
.bav-voice.is-playing .bav-ic-play { display: none; }
.bav-voice.is-playing .bav-eq { display: inline-flex; }
.bav-voice.is-playing .bav-eq i { animation: bavEq .8s ease-in-out infinite alternate; }
.bav-voice.is-playing .bav-eq i:nth-child(2) { animation-delay: -.3s; }
.bav-voice.is-playing .bav-eq i:nth-child(3) { animation-delay: -.55s; }
@keyframes bavEq { 0% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
/* 불러오는 중 — 재생 동그라미 테두리가 돈다 */
.bav-voice.is-loading .bav-play::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2.5px solid transparent;
  border-top-color: var(--c);
  border-radius: 50%;
  animation: bavSpin .8s linear infinite;
}
@keyframes bavSpin { to { transform: rotate(360deg); } }

.bav-txt { min-width: 0; }
.bav-name { display: block; color: var(--fg-primary); font: 800 16px/1.2 var(--font-sans); letter-spacing: -.02em; }
/* 고른 샘플 언어의 이름만 보인다 — 스크립트 없이도 처음 언어(data-lang)의 이름이 바로 나온다 */
.bav-name > [data-n] { display: none; }
.bav-player[data-lang="ko"] .bav-name > [data-n="ko"],
.bav-player[data-lang="en"] .bav-name > [data-n="en"],
.bav-player[data-lang="zh"] .bav-name > [data-n="zh"],
.bav-player[data-lang="ja"] .bav-name > [data-n="ja"] { display: inline; }
.bav-sr {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bav-char {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--fg-neutral-muted);
  font: 600 13px/1.25 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 얼마나 들었는지 — 타일 아래 가는 막대 */
.bav-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.bav-prog i { display: block; width: 100%; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: left center; }

/* 처음 한 번만: 첫 타일 재생 단추가 3번 맥동 — 한 번 들으면 사라진다 */
.bav-first .bav-play::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--c-soft);
  animation: bavPulse 1.6s ease-out 3 .8s;
}
@keyframes bavPulse {
  0% { box-shadow: 0 0 0 0 var(--c); opacity: .9; }
  100% { box-shadow: 0 0 0 14px var(--c); opacity: 0; }
}
.bav-player.is-used .bav-first .bav-play::before { display: none; }

/* 전체 보기 */
.bav-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 66px;
  padding: 10px 14px;
  border: 1.5px dashed var(--line-neutral-strong);
  border-radius: 16px;
  background: #fff;
  color: var(--fg-primary);
  transition: border-color .2s ease, background .2s ease;
}
.bav-more:hover { border-color: var(--w-blue-50); background: var(--bg-accent-subtle); }
.bav-more:focus-visible { outline: 3px solid rgba(79, 55, 255, .3); outline-offset: 2px; }
.bav-more-n { color: var(--w-blue-50); font: 800 18px/1 var(--font-sans); }
.bav-more-t { font: 700 14.5px/1.2 var(--font-sans); white-space: nowrap; }
.bav-more-ic { width: 18px; height: 18px; color: var(--fg-neutral-muted); transition: transform .25s ease; }
.bav-more[aria-expanded="true"] .bav-more-ic { transform: rotate(180deg); }

.bav-all {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin-top: 14px;
  padding: 18px;
  border-radius: 18px;
  background: var(--w-cool-98);
}
.bav-all[hidden] { display: none; }
.bav-group h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--fg-neutral-subtle);
  font: 800 13px/1.2 var(--font-sans);
}
.bav-dot { width: 8px; height: 8px; border-radius: 50%; }
.bav-group.is-female .bav-dot { background: #e23a62; }
.bav-group.is-male .bav-dot { background: #2f68f5; }
.bav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bav-voice.is-compact { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; min-height: 54px; padding: 8px 10px 8px 8px; border-radius: 13px; }
.bav-voice.is-compact .bav-play { width: 34px; height: 34px; }
.bav-voice.is-compact .bav-ic-play { width: 15px; height: 15px; }
.bav-voice.is-compact .bav-name { font-size: 14.5px; }
.bav-voice.is-compact .bav-char { font-size: 12px; }
.bav-all-note { grid-column: 1 / -1; color: var(--fg-neutral-muted); font: 500 13px/1.5 var(--font-sans); }

/* 들려 드리는 안내 문장 */
.bav-now {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--w-cool-98);
  transition: border-color .2s ease, background .2s ease;
}
.bav-now.is-on { border-color: rgba(79, 55, 255, .28); background: var(--bg-accent-subtle); }
.bav-now-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--w-blue-50); }
.bav-now-ic svg { width: 18px; height: 18px; }
.bav-now-body { min-width: 0; }
.bav-now-label { display: block; color: var(--fg-neutral-muted); font: 700 12.5px/1.3 var(--font-sans); }
.bav-now-label [data-bav-now-who] { color: var(--w-blue-50); }
.bav-now-label [hidden] { display: none; }
.bav-line { display: block; margin-top: 4px; color: var(--fg-primary); font: 600 15.5px/1.6 var(--font-sans); quotes: "\201C" "\201D"; }
.bav-line[hidden] { display: none; }
.bav-line:lang(ko) { word-break: keep-all; }
.bav-line:lang(ja) { quotes: "\300C" "\300D"; } /* 일본어는 「」 */

/* 40개국 언어 · 일부 */
.bav-langchips { margin-top: 32px; }
.bav-langchips h6 {
  margin-bottom: 14px;
  color: var(--fg-neutral-muted);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .bav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bav-controls { gap: 10px; }
  .bav-langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .bav-lang { padding: 0 6px; font-size: 13.5px; }
  .bav-more { gap: 6px; padding: 10px; }
  .bav-more-ic { display: none; }
  .bav-grid { gap: 10px; }
  .bav-voice { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; min-height: 60px; padding: 9px 10px 9px 9px; }
  .bav-play { width: 38px; height: 38px; }
  .bav-name { font-size: 15px; }
  .bav-all { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .bav-line { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .bav-voice, .bav-lang, .bav-play, .bav-more-ic, .bav-now { transition: none; }
  .bav-voice:hover { transform: none; }
  .bav-voice.is-playing .bav-eq i { animation: none; }
  .bav-first .bav-play::before { animation: none; }
  .bav-voice.is-loading .bav-play::after { animation-duration: 2s; }
}