/* ── Caraoke — Tesla 스크린 대응 다크 UI ─────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  background: #0d0f14; color: #e8e8e8;
  display: flex; flex-direction: column; overflow: hidden;
}
button { font: inherit; cursor: pointer; }
input { font: inherit; }

/* ── 상단 바 ─────────────────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: #14171f; border-bottom: 1px solid #232838;
  flex: 0 0 auto;
}
#topbar .logo { font-size: 22px; font-weight: 800; color: #2d7dff; margin-right: 12px; }
.navbtn {
  background: none; border: 1px solid transparent; color: #aab2c5;
  font-size: 18px; padding: 10px 18px; border-radius: 10px;
}
.navbtn.active { background: #1d2333; color: #fff; border-color: #2d7dff; }
#topbar .spacer { flex: 1; }
#btn-signout { background: none; border: none; color: #667; font-size: 16px; padding: 10px; }

/* ── 뷰 공통 ─────────────────────────────────────────────────────────────── */
.view { display: none; flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.view.active { display: block; }
#view-player.active { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.empty { color: #667; text-align: center; padding: 40px; font-size: 20px; }

/* ── 검색 ────────────────────────────────────────────────────────────────── */
#search-bar { display: flex; gap: 10px; margin-bottom: 8px; }
#search-input {
  flex: 1; font-size: 22px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid #2a3145; background: #171b26; color: #fff; outline: none;
}
#search-input:focus { border-color: #2d7dff; }
#btn-search {
  font-size: 20px; padding: 14px 28px; border-radius: 12px;
  border: none; background: #2d7dff; color: #fff; font-weight: 700;
}
#search-hint { color: #667; font-size: 15px; margin-bottom: 14px; }

/* ── 곡 행 ───────────────────────────────────────────────────────────────── */
.song-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; background: #14171f;
}
.song-row .thumb { width: 96px; height: 54px; border-radius: 8px; object-fit: cover; background: #1d2333; flex: 0 0 auto; }
.song-row .meta { flex: 1; min-width: 0; }
.song-row .title { font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-row .sub { font-size: 15px; color: #8892a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-row .actions { display: flex; gap: 8px; flex: 0 0 auto; }
.btn {
  font-size: 20px; min-width: 52px; min-height: 48px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid #2a3145; background: #1d2333; color: #e8e8e8;
}
.btn:active { background: #2d7dff; }
.btn.active { background: #2d7dff; border-color: #2d7dff; color: #fff; }

/* ── 큐 ──────────────────────────────────────────────────────────────────── */
#queue-current { font-size: 20px; font-weight: 700; color: #2d7dff; padding: 8px 4px 16px; }

/* ── 플레이리스트 ────────────────────────────────────────────────────────── */
#playlist-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
#pl-name { font-size: 22px; font-weight: 700; flex: 1; }

/* ── 플레이어 ────────────────────────────────────────────────────────────── */
#player-stage { position: relative; flex: 1 1 auto; background: #000; overflow: hidden; }
#yt-player-frame, #player-stage iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

#lyrics-lines-overlay {
  position: absolute; left: 0; right: 0; bottom: 4%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; pointer-events: auto; padding: 0 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.9);
}

/* lyric 모드: 영상은 계속 재생하되 시각적으로 최소화, 가사를 화면 중앙에 */
#view-player.mode-lyric #player-stage iframe,
#view-player.mode-lyric #yt-player-frame { opacity: 0.12; }
#view-player.mode-lyric #lyrics-lines-overlay { top: 0; bottom: 0; justify-content: center; }

/* karaoke 모드: 풀스크린(상단바 숨김) + 컨트롤 3초 후 자동 숨김 */
body.karaoke #topbar { display: none; }
#view-player.mode-karaoke.controls-hidden #player-controls { display: none; }

#player-controls {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: #14171f; border-top: 1px solid #232838;
}
#player-song-title {
  width: 100%; font-size: 17px; color: #8892a8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#offset-stepper { display: flex; align-items: center; gap: 6px; margin-left: auto; }
#offset-label { min-width: 64px; text-align: center; font-size: 18px; color: #aab2c5; }

/* ── 카라오케 라인 ───────────────────────────────────────────────────────── */
.karaoke-line {
  font-size: 42px; color: #e8e8e8; opacity: 0.55;
  transform: scale(0.92); cursor: pointer; border-radius: 10px; padding: 2px 14px;
  transition: color .35s ease, opacity .35s ease, transform .35s ease, font-size .35s ease, background-color .2s ease;
}
.karaoke-line.tapped  { background-color: rgba(45,125,255,0.25); }   /* 탭 피드백 */
.karaoke-line.current { font-size: 68px; font-weight: 800; opacity: 1; transform: scale(1.05); color: #2d7dff; }
.karaoke-line.placeholder { opacity: 0.4; cursor: default; }

/* 단어 스윕: 파란 그라디언트 + 회색 그라디언트 2겹을 글자모양으로 클립.
   background-size 첫 겹 폭(0→100%)을 JS가 매 프레임 갱신 → 왼→오 채움 */
.karaoke-line.current.sweep-words .sweep-word {
  display: inline;
  background-image: linear-gradient(#4A9EFF, #4A9EFF),
                    linear-gradient(#e8e8e8, #e8e8e8);
  background-size: 0% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text, text; background-clip: text, text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ── 모달 ────────────────────────────────────────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.65); align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-card {
  background: #14171f; border: 1px solid #2a3145; border-radius: 16px;
  width: min(720px, 92vw); max-height: 82vh; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #232838;
}
.modal-head .title { flex: 1; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-body { overflow-y: auto; padding: 10px; }

.lyrics-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 10px; cursor: pointer;
}
.lyrics-row:hover, .lyrics-row:active { background: #1d2333; }
.lyrics-row .meta { flex: 1; min-width: 0; }
.lyrics-row .title { font-size: 17px; font-weight: 600; }
.lyrics-row .sub { font-size: 14px; color: #667; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { flex: 0 0 auto; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.badge-word { background: rgba(255,196,0,0.15); color: #ffc400; }
.badge-line { background: rgba(45,125,255,0.15); color: #6ea8ff; }

/* ── 토스트 ──────────────────────────────────────────────────────────────── */
#toast-box {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none;
}
.toast {
  background: #1d2333; border: 1px solid #2a3145; color: #e8e8e8;
  padding: 12px 22px; border-radius: 12px; font-size: 17px;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
  max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-color: #b33; color: #ff9a9a; }

/* ── QR 게스트 초대 모달 ─────────────────────────────────────────────────── */
.qr-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; text-align: center; }
#qr-box { background: #fff; padding: 14px; border-radius: 12px; line-height: 0; }
#qr-box table { border-collapse: collapse; }
#qr-desc { color: #8892a8; font-size: 16px; }
#qr-expiry-row { font-size: 17px; color: #aab2c5; }
#qr-countdown { font-size: 20px; font-weight: 800; color: #2d7dff; }
#qr-url { font-size: 13px; color: #556; word-break: break-all; }

/* ── 게스트 페이지 ───────────────────────────────────────────────────────── */
body.guest { display: block; overflow-y: auto; padding: 14px; }
#guest-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
#guest-head .logo { font-size: 22px; font-weight: 800; color: #2d7dff; }
#guest-head .spacer { flex: 1; }
#guest-expiry { font-size: 18px; font-weight: 700; color: #aab2c5; }
#guest-error { color: #ff9a9a; font-size: 19px; text-align: center; padding: 60px 20px; }
.guest-h2 { font-size: 18px; color: #8892a8; margin: 22px 4px 10px; }
body.guest #queue-current { font-size: 17px; font-weight: 700; color: #2d7dff; padding: 4px 4px 10px; }

/* ── 로그인 ──────────────────────────────────────────────────────────────── */
#login-card {
  margin: auto; width: min(440px, 92vw); background: #14171f;
  border: 1px solid #2a3145; border-radius: 18px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
#login-card h1 { color: #2d7dff; font-size: 30px; text-align: center; margin-bottom: 8px; }
#login-card input {
  font-size: 19px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid #2a3145; background: #171b26; color: #fff; outline: none;
}
#login-card input:focus { border-color: #2d7dff; }
#login-card button {
  font-size: 19px; padding: 14px; border-radius: 12px; border: none;
  background: #2d7dff; color: #fff; font-weight: 700;
}
#login-card button.secondary { background: #1d2333; color: #aab2c5; border: 1px solid #2a3145; }
#login-error { color: #ff9a9a; font-size: 15px; min-height: 20px; text-align: center; }