/* ============================================================
   css/tts.css - 페이지 읽어주기
   하단 고정 광고(.footer-banner, z-index 999) 위에 뜨도록 배치
   ============================================================ */
.tts-ui { position: fixed; right: 16px; bottom: 140px; z-index: 1000; font-family: inherit; }

.tts-fab {
  display: flex; align-items: center; gap: 6px;
  background: #7c3aed; color: #fff; border: 0; border-radius: 40px;
  padding: 14px 22px; font-size: 21px; font-weight: bold; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.tts-fab:hover { background: #6d28d9; }
.tts-fab[hidden] { display: none; }

.tts-panel {
  width: 320px; max-width: calc(100vw - 32px);
  background: #fff; border: 2px solid #c4b5fd; border-radius: 16px;
  padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.tts-panel[hidden] { display: none; }
.tts-panel__title { font-size: 20px; font-weight: bold; color: #4c1d95; margin-bottom: 12px; }

.tts-row { display: flex; gap: 8px; margin-bottom: 10px; }
.tts-btn {
  flex: 1 1 0; min-height: 52px; padding: 8px 6px;
  font-size: 18px; font-weight: bold; color: #333;
  background: #f5f3ff; border: 2px solid #ddd6fe; border-radius: 10px; cursor: pointer;
}
.tts-btn:hover { border-color: #a78bfa; }
.tts-btn--main { flex: 1.4 1 0; background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tts-btn--main.is-playing { background: #ea580c; border-color: #ea580c; }
.tts-btn--rate { font-size: 17px; padding: 8px 2px; }
.tts-btn--rate.is-active { background: #4c1d95; border-color: #4c1d95; color: #fff; }
.tts-rate { gap: 6px; }

/* 목소리(성우) */
.tts-label { font-size: 15px; font-weight: bold; color: #6b7280; margin: 4px 0 4px 2px; }
.tts-voice { gap: 6px; }
.tts-btn--voice { font-size: 17px; padding: 8px 2px; }
.tts-btn--f { background: #fdf2f8; border-color: #fbcfe8; }
.tts-btn--m { background: #eff6ff; border-color: #bfdbfe; }
.tts-btn--f.is-active { background: #db2777; border-color: #db2777; color: #fff; }
.tts-btn--m.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

.tts-status { font-size: 16px; color: #555; min-height: 22px; line-height: 1.5; }
.tts-close {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  font-size: 17px; color: #666; background: #f3f4f6; border: 0; border-radius: 8px; cursor: pointer;
}

/* 지금 읽는 부분 */
.tts-reading {
  background: #fef08a !important; color: #111 !important;
  outline: 3px solid #facc15; outline-offset: 2px; border-radius: 4px;
}

@media (max-width: 768px) {
  .tts-ui { right: 12px; bottom: 130px; }
  .tts-fab { padding: 12px 18px; font-size: 19px; }
}