/* ============================================================
   satb.css — SATB 파트 클릭 연습 페이지 전용 스타일
   styles.css(v1) 토큰/기본요소 재사용 + 연속 악보/존 오버레이/파트배지/구간반복
   딥 네이비 다크 + 골드(베이스) / 시안·블루(합창)
   ============================================================ */

/* ── 헤더 우측(파트배지·구간반복·나가기) ── */
.satb-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  order: 0;
}
.part-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
  font-size: var(--size-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
/* 자기 파트(--part, 파트 무관 골드) / 합창 = 블루(시안) */
.part-badge--part,
.part-badge--bass {
  background: var(--gold-subtle);
  border-color: var(--gold-border);
  color: var(--gold);
}
.part-badge--choir {
  background: var(--cyan-glow);
  border-color: rgba(56, 189, 248, .40);
  color: var(--cyan);
}
.repeat-btn,
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--size-sm);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.repeat-btn:hover,
.nav-link:hover { border-color: var(--border-hover); color: var(--text-primary); }
.repeat-btn:active,
.nav-link:active { transform: translateY(1px); }
.repeat-btn:focus-visible,
.nav-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* 구간반복 활성(선택모드 또는 반복중) */
.repeat-btn.is-on {
  background: var(--gold-subtle);
  border-color: var(--gold-border);
  color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.repeat-btn.is-picking {
  background: var(--cyan-glow);
  border-color: rgba(56, 189, 248, .40);
  color: var(--cyan);
}

/* ── 연속 악보 스크롤 영역 ── */
.score-scroll {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.score-pages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 900px;
  margin-inline: auto;
}

/* 한 페이지(악보 이미지 + 존 오버레이) */
.satb-page {
  position: relative;
  display: block;
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  line-height: 0;               /* 이미지 하단 여백 제거 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.satb-page__img {
  display: block;
  width: 100%;
  height: auto;
}
/* 현재 재생 페이지 하이라이트 */
.satb-page.is-current {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow), 0 6px 28px rgba(232, 185, 100, .28);
}
/* 구간반복 범위 표시(좌측 컬러바 + 옅은 배경) */
.satb-page.is-in-range { border-color: rgba(232, 185, 100, .35); }
.satb-page.is-in-range::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--gold);
  z-index: 5;
}
.satb-page.is-range-a::after,
.satb-page.is-range-b::after {
  position: absolute;
  left: 8px; top: 6px;
  z-index: 6;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: var(--size-xs);
  font-weight: 800;
  line-height: 1.4;
  background: var(--gold);
  color: var(--text-inverse);
}
.satb-page.is-range-a::after { content: "A"; }
.satb-page.is-range-b::after { content: "B"; left: auto; right: 8px; }

/* 페이지 좌상단 마디 뱃지 */
.satb-page__badge {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 6;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(11, 18, 32, .78);
  color: var(--gold-light);
  font-size: var(--size-xs);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ── 클릭 존(높이 분수 기반 absolute) ── */
.satb-zone {
  position: absolute;
  left: 0; right: 0;
  z-index: 3;
  cursor: pointer;
  border-radius: 2px;
  background: transparent;
  transition: background var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.satb-zone__label {
  position: absolute;
  top: 4px; right: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: var(--size-xs);
  font-weight: 800;
  line-height: 1.5;
  opacity: 0;
  transition: opacity var(--dur-fast);
  pointer-events: none;
}
/* 합창(SA) = 블루 계열 */
.satb-zone--sa { }
.satb-zone--sa .satb-zone__label { background: rgba(56, 189, 248, .92); color: #04121d; }
.satb-zone--sa:hover,
.satb-zone--sa.is-touch { background: rgba(56, 189, 248, .16); }
/* 베이스(TB) = 골드 계열 */
.satb-zone--tb .satb-zone__label { background: rgba(232, 185, 100, .95); color: var(--text-inverse); }
.satb-zone--tb:hover,
.satb-zone--tb.is-touch { background: rgba(232, 185, 100, .16); }
.satb-zone:hover .satb-zone__label,
.satb-zone.is-touch .satb-zone__label { opacity: 1; }

@media (hover: none) {
  /* 터치 기기: 존을 항상 옅게 표시해 어디가 합창/베이스인지 보이게 */
  .satb-zone--sa { background: rgba(56, 189, 248, .07); }
  .satb-zone--tb { background: rgba(232, 185, 100, .07); }
  .satb-zone__label { opacity: .85; }
}

/* ── ▶/⏸ 재생·일시정지 버튼(헤더) — 영상 화면이 없으므로 필수 컨트롤 ── */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 34px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  background: var(--gold-subtle);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  color: var(--gold);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.pp-btn:hover { border-color: var(--gold); }
.pp-btn:active { transform: translateY(1px); }
.pp-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pp-btn.is-playing {
  background: var(--cyan-glow);
  border-color: rgba(56, 189, 248, .40);
  color: var(--cyan);
}
.pp-btn:disabled { opacity: .45; cursor: default; }

/* ── now-playing / 구간반복 상태를 헤더 한 줄로 ── */
.satb-nowplaying {
  width: 100%;
  min-height: 0;
  font-size: var(--size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.satb-loop-status { width: 100%; }

/* ── 유튜브 플레이어: DOM 유지, 시각적으로 숨김(오디오 온리). display:none 금지 ── */
.yt-hidden {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.yt-hidden #yt-player,
.yt-hidden iframe { width: 2px; height: 2px; border: 0; }

/* ── 레이아웃: 앱셸(전 뷰포트 공통) — 헤더 고정, 악보만 내부 스크롤 ──
   영상 stage 제거로 악보가 전 화면 차지. 헤더는 스크롤 컨테이너 밖이라 항상 보임
   (폰에서 position:sticky 불안정 문제 회피 — v1 앱셸 패턴 계승). */
#app.satb {
  display: flex;
  flex-direction: column;
  /* styles.css 데스크탑 그리드(#app{align-items:start})가 새어 들어오면
     flex 자식이 shrink-to-fit(≈920px)으로 좁아짐 — stretch 명시로 차단 */
  align-items: stretch;
  height: 100dvh;
  overflow: hidden;
}
#app.satb .appbar { position: static; flex: 0 0 auto; }
#app.satb .appfoot { flex: 0 0 auto; }
#app.satb .score-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* 데스크탑: 악보를 가운데 정렬한 읽기 폭으로 */
@media (min-width: 1200px) {
  .score-pages { max-width: 880px; margin: 0 auto; }
}

/* 모바일/태블릿(≤1199): 악보 full-bleed 1열 + 헤더 2줄 압축
   (제목/키커/앨범 블록 숨김 — 곡탭이 제목 역할. 1줄=컨트롤+now-playing, 2줄=곡탭) */
@media (max-width: 1199px) {
  #app.satb .score-scroll { padding: var(--space-3) var(--space-4); }
  #app.satb .appbar { row-gap: var(--space-2); }
  #app.satb .appbar__title { display: none; }
  #app.satb .satb-head-right { width: auto; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; }
  #app.satb .satb-nowplaying { width: auto; flex: 1 1 0; min-width: 0; }
  #app.satb .song-tabs { width: 100%; justify-content: flex-start; }
  #app.satb .song-tab { padding: var(--space-2) var(--space-3); }
  #app.satb .song-tab__sub { display: none; } /* 앨범 서브 숨김 → 탭 1줄 높이 */
}

/* 아주 좁은 화면: 컨트롤 축약 */
@media (max-width: 479px) {
  #app.satb .appbar { padding: var(--space-3) var(--space-4); }
  .repeat-btn, .nav-link, .part-badge { font-size: var(--size-xs); padding: var(--space-1) var(--space-2); }
  .pp-btn { width: 36px; min-width: 36px; height: 32px; }
  /* 폰: now-playing은 글자 조각만 남아 지저분 — 현재 위치는 악보 하이라이트+마디 뱃지로 충분 */
  #app.satb .satb-nowplaying { display: none; }
}