/* ── Chordify-style light theme ───────────────────────────────────────────
   배경: 밝은 회색 / 카드: 흰색 / 포인트: 초록 (#3eb24d) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #3eb24d;
  --green-dark: #2e8a3c;
  --green-tint: #e9f7eb;
  --bg: #eef0f5;
  --card: #ffffff;
  --border: #dde2e9;
  --text: #2b2b2b;
  --text-sub: #7a8088;
  --red: #d64545;
  /* 파스텔 팔레트 — 카드·버튼 구분용 */
  --p-green:  #e2f4e6;  --p-green-bd:  #a9dcb4;  --p-green-tx:  #1f7a30;
  --p-blue:   #e4eefb;  --p-blue-bd:   #aecdf0;  --p-blue-tx:   #1f5fa8;
  --p-yellow: #fdf4dc;  --p-yellow-bd: #ecd9a0;  --p-yellow-tx: #8a6d1a;
  --p-pink:   #fce9ec;  --p-pink-bd:   #f0bcc6;  --p-pink-tx:   #b03a52;
  --p-purple: #efeafa;  --p-purple-bd: #cfc0ee;  --p-purple-tx: #6b46b8;
  --shadow: 0 2px 10px rgba(50, 60, 90, 0.08);
}

html { height: 100%; }

body {
  font-family: 'Segoe UI', 'Malgun Gothic', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  padding-bottom: 40px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
#topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  padding: 12px 24px;
}

.logo {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.logo span { color: var(--green); }

#url-form {
  flex: 1;
  display: flex;
  gap: 8px;
  max-width: 640px;
}

#url-input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

#url-input:focus { border-color: var(--green); background: #fff; }
#url-input::placeholder { color: #9aa0a8; }

#extract-btn {
  padding: 10px 22px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

#extract-btn:hover { background: var(--green-dark); }
#extract-btn:disabled { background: #b9dec0; cursor: not-allowed; }

#file-btn {
  padding: 10px 18px;
  background: #fff;
  color: var(--green);
  border: 1.5px solid var(--green);
  border-radius: 24px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

#file-btn:hover { background: var(--green-tint); }

/* ── Main ────────────────────────────────────────────────────────────────── */
main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px;
}

/* ── Welcome ─────────────────────────────────────────────────────────────── */
.welcome-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 56px 24px;
  text-align: center;
  margin-top: 32px;
}

.welcome-icon { font-size: 3rem; margin-bottom: 12px; }
.welcome-card h2 { font-size: 1.4rem; margin-bottom: 10px; }
.welcome-card p { color: var(--text-sub); line-height: 1.6; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
#loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 72px 0;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#loading-msg { color: var(--text); font-size: 1.05rem; font-weight: 600; }
.loading-sub { color: var(--text-sub); font-size: 0.85rem; }

/* ── Error ───────────────────────────────────────────────────────────────── */
.error-box {
  background: #fdf0f0;
  border: 1.5px solid var(--red);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-top: 32px;
}

.error-icon { font-size: 1.8rem; }
#error-msg { color: var(--red); font-size: 0.95rem; }

#error-reset-btn {
  padding: 8px 22px;
  background: #fff;
  border: 1.5px solid var(--red);
  color: var(--red);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}

#error-reset-btn:hover { background: #fbe4e4; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
#toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

#song-title {
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tool-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tool-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--p-green);
  border: 1.5px solid var(--p-green-bd);
  border-radius: 10px;
  padding: 7px 16px;
  min-width: 64px;
}

.tool-chip.tempo-chip {
  background: var(--p-yellow);
  border-color: var(--p-yellow-bd);
}

.tool-chip.tempo-chip .chip-value { color: var(--p-yellow-tx); }

.tool-chip.transpose-chip {
  background: var(--p-purple);
  border-color: var(--p-purple-bd);
}

.tool-chip.transpose-chip .chip-label { color: var(--p-purple-tx); }

.chip-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #4a5058;
  letter-spacing: 0.5px;
}

.chip-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--green);
}

#pitch-state { color: var(--green); font-weight: 700; }

/* ── Transpose control ───────────────────────────────────────────────────── */
#transpose-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}

#transpose-ctrl button {
  width: 26px;
  height: 26px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#transpose-ctrl button:hover { border-color: var(--green); color: var(--green); }
#transpose-ctrl button:disabled { opacity: 0.35; cursor: not-allowed; }

#transpose-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--green);
  min-width: 30px;
  text-align: center;
}

.ghost-btn {
  padding: 9px 18px;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text-sub);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: filter 0.15s, transform 0.05s;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(50, 60, 90, 0.1);
}

.ghost-btn:hover { filter: brightness(0.96); }
.ghost-btn:active { transform: translateY(1px); }

/* 버튼별 파스텔 색 구분 */
#save-btn  { background: var(--p-green);  border-color: var(--p-green-bd);  color: var(--p-green-tx); }
#sheet-btn { background: var(--p-blue);   border-color: var(--p-blue-bd);   color: var(--p-blue-tx); }
#reset-btn { background: var(--p-pink);   border-color: var(--p-pink-bd);   color: var(--p-pink-tx); }

/* ── Result top layout: 좌(악보) / 우(영상) ─────────────────────────────── */
#result-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

#left-col {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#yt-wrap {
  width: 400px;
  flex-shrink: 0;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: sticky;
  top: 76px;
}

#yt-wrap iframe {
  width: 100%;
  height: 100%;
  pointer-events: none; /* 재생 제어는 하단 재생바로만 */
  display: block;
}

/* ── 마디(소절) 횡스크롤 악보 ────────────────────────────────────────────── */
#bar-strip-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  min-width: 0;
  max-width: 100%;
  box-shadow: var(--shadow);
}

#bar-strip {
  position: relative;  /* offsetLeft 기준점 — 자동 스크롤 계산에 필요 */
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 6px;
}

.measure {
  display: flex;
  flex-direction: column;
  flex: 0 0 25%;       /* 화면에 정확히 4마디 */
  min-width: 0;
  height: 92px;
  border-left: 2px solid #c8cdd3;   /* 마디선 */
}

.measure-beats {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* 마디 가사 줄 — 클릭하면 직접 입력 */
.measure-lyr {
  height: 22px;
  font-size: 0.74rem;
  color: #5a6068;
  text-align: center;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  border-top: 1px dashed #e4e7ec;
  padding: 0 3px;
}

.measure-lyr:hover { background: var(--p-yellow); }

/* 빈 가사 줄 안내 — 클릭해서 입력할 수 있음을 표시 */
.measure-lyr:empty::before {
  content: '✎ 가사';
  color: #c6cbd2;
  font-size: 0.7rem;
}

.lyr-edit {
  width: 100%;
  height: 20px;
  border: 1px solid var(--p-yellow-bd);
  border-radius: 4px;
  font-size: 0.74rem;
  text-align: center;
  outline: none;
  background: #fffdf4;
}

.measure:last-child { border-right: 2px solid #c8cdd3; }

.measure.current { background: var(--green-tint); border-left-color: var(--green); }

.beat {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.beat:hover { background: rgba(62, 178, 77, 0.08); }

/* 현재 박자: Chordify처럼 검정 셀로 강조 */
.beat.active {
  background: #2b2b2b;
  border-radius: 6px;
}

.beat.active .beat-chord { color: #fff; }
.beat.active .beat-rest  { color: #999; }

.beat-chord {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.beat-rest { color: #b9bec6; font-size: 1rem; }

/* 비트 점 (박자 표시) */
.beat::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4d8dd;
}

.beat.active::after { background: var(--green); }

/* ── 현재/다음 코드 다이어그램 패널 ──────────────────────────────────────── */
#diagram-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 위 4마디와 같은 폭으로 정렬 */
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  background: var(--p-blue);
  border: 1.5px solid var(--p-blue-bd);
  border-radius: 14px;
  padding: 16px;
  min-height: 220px;
  box-shadow: var(--shadow);
}

.dia-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 12px 8px 10px;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 12px;
  min-width: 0;
  box-shadow: 0 1px 4px rgba(50, 60, 90, 0.08);
  transition: border-color 0.15s, background 0.15s;
}

.dia-card .dia-tag {
  font-size: 0.72rem;
  color: var(--text-sub);
  letter-spacing: 0.5px;
}

.dia-card svg { width: 118px; height: 144px; }

.dia-card .dia-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.dia-card.current {
  border-color: var(--green);
  background: var(--green-tint);
}

.dia-card.current .dia-name { color: var(--green-dark); }
.dia-card.current .dia-tag { color: var(--green-dark); }

.dia-empty {
  color: var(--text-sub);
  font-size: 0.9rem;
  align-self: center;
  margin: 0 auto;
}

/* ── 가사 입력 박스 ──────────────────────────────────────────────────────── */
#lyrics-box {
  background: var(--p-yellow);
  border: 1.5px solid var(--p-yellow-bd);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

#lyrics-box summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--p-yellow-tx);
  user-select: none;
}

#lyrics-box summary:hover { color: var(--text); }

.lyrics-help {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #6a6048;
}

/* 가사 검색 */
#lyrics-search-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#lyrics-search-q {
  flex: 1;
  padding: 8px 14px;
  border: 1.5px solid var(--p-yellow-bd);
  border-radius: 18px;
  font-size: 0.88rem;
  outline: none;
  background: #fff;
}

#lyrics-search-q:focus { border-color: var(--green); }

#lyrics-search-btn {
  background: var(--p-purple);
  border-color: var(--p-purple-bd);
  color: var(--p-purple-tx);
  white-space: nowrap;
}

#lyrics-search-results { margin-top: 8px; }

.ls-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ls-item:hover { border-color: var(--green); }

.ls-track { font-weight: 800; font-size: 0.9rem; }
.ls-artist { color: var(--text-sub); font-size: 0.84rem; }

.ls-badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--p-green);
  border: 1px solid var(--p-green-bd);
  color: var(--p-green-tx);
  border-radius: 10px;
  padding: 2px 9px;
}

.ls-msg { font-size: 0.84rem; color: var(--text-sub); padding: 6px 2px; }
.ls-msg.ok { color: var(--p-green-tx); font-weight: 700; }

/* 저장된 곡 목록 */
#library-section { margin-top: 20px; }

#library-section h3 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--text);
}

#library-section h3 small { color: var(--text-sub); font-weight: 400; font-size: 1.6rem; }

.lib-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 44px 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}

.lib-card:hover { border-color: var(--green); }

.lib-title { font-weight: 800; font-size: 0.95rem; }
.lib-meta { font-size: 0.78rem; color: var(--text-sub); }

.lib-del {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--p-pink-bd);
  background: var(--p-pink);
  color: var(--p-pink-tx);
  font-size: 0.8rem;
  cursor: pointer;
}

#lyrics-input {
  width: 100%;
  background: #fff;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  outline: none;
}

#lyrics-input:focus { border-color: var(--green); }

/* ── 재생 컨트롤 카드 (마디 악보 위) ─────────────────────────────────────── */
#player-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--p-green);
  border: 1.5px solid var(--p-green-bd);
  border-radius: 14px;
  padding: 10px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 64px;
  z-index: 10;
}

#now-playing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
}

#now-chord {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1.1;
}

#audio-player {
  flex: 1;
  height: 42px;
  outline: none;
}

#sync-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 90px;
}

.sync-btns {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sync-btns button {
  width: 24px;
  height: 24px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}

.sync-btns button:hover { border-color: var(--green); color: var(--green); }

#sync-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green);
  min-width: 34px;
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #result-top { flex-direction: column-reverse; }
  #yt-wrap { width: 100%; position: static; }
}

@media (max-width: 640px) {
  #topbar { flex-wrap: wrap; padding: 10px 14px; }
  #url-form { min-width: 100%; }
  .measure { flex-basis: 50%; }              /* 좁은 화면은 2마디씩 */
  #diagram-panel { grid-template-columns: repeat(2, 1fr); }
  .dia-card svg { width: 90px; height: 110px; }
}

/* ── 모바일 세로(portrait) — 좁은 화면 최적화 ──────────────────────────── */
@media (max-width: 480px) {
  main { padding: 8px 10px; }

  .logo { font-size: 0.88rem; }
  #url-input { font-size: 0.87rem; padding: 8px 12px; }
  #extract-btn, #file-btn { padding: 8px 12px; font-size: 0.84rem; }

  #toolbar { padding: 8px 12px; gap: 8px; margin-bottom: 10px; }
  #song-title { font-size: 0.9rem; min-width: 0; }
  .ghost-btn { padding: 6px 11px; font-size: 0.76rem; }
  .tool-chip { padding: 5px 10px; min-width: 52px; }
  .chip-value { font-size: 0.95rem; }

  /* 재생 카드: 오디오바가 좁아서 두 번째 줄로 내림 */
  #player-card { flex-wrap: wrap; gap: 8px; padding: 8px 12px; margin-bottom: 10px; }
  #now-playing { min-width: 58px; }
  #now-chord { font-size: 1.1rem; }
  #audio-player { flex: 0 0 100%; height: 36px; order: 3; }
  #sync-ctrl { min-width: 78px; }

  .beat-chord { font-size: 0.95rem; }
  .measure { height: 82px; }
}

/* ── 모바일 가로(landscape) — 낮은 화면 높이 최적화 ─────────────────────── */
@media (max-height: 520px) and (orientation: landscape) {
  #topbar { position: static; padding: 6px 14px; gap: 10px; }
  #topbar .logo { font-size: 0.95rem; }
  #url-input { padding: 7px 14px; font-size: 0.85rem; }
  #extract-btn, #file-btn { padding: 7px 14px; font-size: 0.85rem; }

  main { padding: 8px 10px; }

  #toolbar { padding: 7px 12px; margin-bottom: 8px; gap: 8px; }
  #song-title { font-size: 0.92rem; min-width: 120px; }
  .tool-chip { padding: 3px 10px; min-width: 50px; }
  .chip-value { font-size: 0.88rem; }
  .chip-label { font-size: 0.62rem; }
  .ghost-btn { padding: 6px 12px; font-size: 0.78rem; }

  #player-card { padding: 5px 12px; margin-bottom: 8px; gap: 10px; }
  #now-playing { min-width: 60px; }
  #now-chord { font-size: 1.05rem; }
  #audio-player { height: 34px; }
  #sync-ctrl { min-width: 70px; }

  /* 마디 악보가 주인공 — 영상은 아래로 (스크롤하면 보임) */
  #result-top { flex-direction: column; }
  #yt-wrap { width: 100%; max-width: 420px; margin: 0 auto; position: static; }

  .measure { flex-basis: 25%; height: 76px; }   /* 가로폭이 넓으니 4마디 유지 */
  .beat-chord { font-size: 0.98rem; }
  .measure-lyr { height: 18px; line-height: 18px; font-size: 0.68rem; }

  #diagram-panel {
    grid-template-columns: repeat(4, 1fr);
    min-height: 0;
    padding: 10px;
    gap: 8px;
  }
  .dia-card { padding: 6px 4px 6px; }
  .dia-card svg { width: 64px; height: 78px; }
  .dia-card .dia-name { font-size: 0.92rem; }
  .dia-card .dia-tag { font-size: 0.62rem; }

  body { padding-bottom: 16px; }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── View Toggle ─────────────────────────────────────────────────────────── */
#view-toggle { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.view-btn { padding: 4px 14px; border-radius: 16px; border: 1.5px solid var(--border); background: #fff; color: var(--text-sub); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.view-btn.active { background: var(--green-tint); border-color: var(--green); color: var(--green-dark); }
.view-btn:hover:not(.active) { border-color: var(--green); color: var(--green); }
.loop-clear-btn { border-color: #e53935 !important; color: #e53935 !important; }
.loop-clear-btn:hover { background: #FFEBEE !important; }
#loop-indicator { font-size: 0.8rem; font-weight: 700; color: #1565C0; padding: 3px 10px; background: #E3F2FD; border-radius: 12px; white-space: nowrap; }

/* ── 악보(Score) 뷰 ─────────────────────────────────────────────────────── */
#bar-strip.score-mode { display: block; overflow-x: hidden; }
.score-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); padding: 4px 0; }
.score-row:last-child { border-bottom: none; }
.score-clef { font-size: 2.8rem; line-height: 1; padding: 22px 4px 0; color: #444; min-width: 32px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; }
.score-measure { flex: 1; min-width: 0; border-left: 2px solid #999; display: flex; flex-direction: column; transition: background 0.1s; scroll-margin-top: 210px; }
.score-measure:last-child { border-right: 2px solid #999; }
.score-measure.current { background: var(--green-tint); }
.score-measure.loop-a { border-left: 3px solid #2196F3 !important; }
.score-measure.loop-b { border-right: 3px solid #9C27B0 !important; }
.score-measure.loop-a, .score-measure.loop-b, .score-measure.loop-range { background: rgba(33,150,243,0.07); }
.score-measure.loop-a.current, .score-measure.loop-b.current, .score-measure.loop-range.current { background: linear-gradient(var(--green-tint), rgba(33,150,243,0.07)); }
.score-chord-row { display: flex; height: 24px; align-items: flex-end; padding-bottom: 2px; cursor: pointer; }
.score-chord-row:hover { background: rgba(33,150,243,0.1); border-radius: 3px; }
.score-chord-cell { flex: 1; text-align: left; padding: 0 3px; font-size: 0.88rem; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; height: 22px; line-height: 22px; }
.score-staff { position: relative; height: 52px; background-image: linear-gradient(#bfc4cb 1px, transparent 1px), linear-gradient(#bfc4cb 1px, transparent 1px), linear-gradient(#bfc4cb 1px, transparent 1px), linear-gradient(#bfc4cb 1px, transparent 1px), linear-gradient(#bfc4cb 1px, transparent 1px); background-size: 100% 1px; background-position: 0 6px, 0 16px, 0 26px, 0 36px, 0 46px; background-repeat: no-repeat; display: flex; align-items: center; }
.score-beat { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-style: italic; color: #666; cursor: pointer; height: 100%; transition: color 0.1s; }
.score-beat:hover { color: var(--green); }
.score-beat.active { color: var(--green); font-weight: 900; font-style: normal; }
.score-beat-empty { opacity: 0; cursor: default; pointer-events: none; }
.score-lyr { height: 20px; font-size: 0.74rem; color: #5a6068; text-align: center; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; border-top: 1px dashed #e4e7ec; }
@media (max-width: 480px) { .score-clef { font-size: 2rem; min-width: 22px; padding-top: 16px; } .score-chord-cell { font-size: 0.78rem; } .score-beat { font-size: 1.2rem; } }