/* 사이트 site.css 교체본 (2026-10-10) — 시안: 보면대 화면 시안.dc.html
   [기능] 표시 규칙은 동작에 필요하니 의미를 유지할 것.
   기존 마크업 그대로 적용됨. 커스텀 재생기·악보 접기·연주 모드는 시안의 마크업 추가가 필요. */
/* 글꼴은 사이트 안에서 (fetch_fonts.py). 구글에서 바로 불러오면 방문자 IP가 구글로 간다 (2026-11-10 점검 6번) */
@import url("fonts/fonts.css");

/* 숨김(hidden)은 무조건 안 보이게: .card { display: grid }처럼 display를 정한 규칙이 hidden을 이겨서
   검색 결과가 '1곡'인데 카드가 전부 보였다 (2026-10-25 사용자 '터키' 검색) */
[hidden] { display: none !important; }

:root {
  /* 2026-11-04 숲 테마 A안 '숲 기관형' (주소 scoreforest.com): 흰 바탕 + 짙은 숲 초록. 시안 design_in/forest_mock */
  --ink: #17221B; --ink-2: #33433A; --muted: #4F5E55;
  --line: #C2D1C4; --line-2: #D7E2D8; --line-btn: #9FB5A4;   /* 2026-11-08 사용자: 선이 전체적으로 연하다 → 진하게 */
  --bg: #F5F8F4; --paper: #FFFFFF;
  --accent: #1F6B45; --accent-dk: #154F33; --accent-tint: #E2F0E6;
  --play: #1F6B45;
  --ad-a: #ECEBE6; --ad-b: #E3E1DB;
  --r: 10px; --pad: 16px;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 "IBM Plex Sans KR", system-ui, "Malgun Gothic", sans-serif; color: var(--ink); background: var(--bg); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
button { font: inherit; cursor: pointer; color: inherit; }
h1 { margin: 0; font-size: clamp(24px, 4vw, 38px); line-height: 1.3; letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap, .page, .more-songs { max-width: 1320px; margin: 0 auto; padding: 32px 40px; }
.site-top .in, .site-foot .in { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.wrap, .page, .panel { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }

/* 상단바·바닥글 */
.site-top { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-top .in { min-height: 64px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; flex: none; }   /* 'Score Forest'가 휴대폰에서 두 줄로 꺾였다 (점검 10번) */
.brand-ico { flex: none; color: var(--accent); }   /* 로고: 깃발이 잎사귀인 8분음표 (2026-11-04 숲 테마, favicon.svg와 같은 모양) */
.brand small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.site-top nav { margin-left: auto; display: flex; gap: 28px; align-self: stretch; }
.site-top nav a { display: flex; align-items: center; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.site-top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-color: var(--accent); }
.site-foot { margin-top: 48px; background: var(--paper); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-foot .in { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-block: 28px 36px; }
.site-foot a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }   /* 누르기 쉬운 높이 (점검 15번, 전에는 22px) */
.site-foot a[href*="privacy"] { font-weight: 600; }
.site-foot .copy { flex-basis: 100%; }

/* 머리말 */
.hero { display: grid; gap: 12px; padding: 32px 0 16px; }
.hero h1 { font-size: clamp(26px, 4.4vw, 44px); }
.hero p, .lede { margin: 0; font-size: 17px; color: var(--muted); max-width: 60ch; }
.eyebrow { font: 500 14px var(--mono); color: var(--accent); }
.wrap > header { display: grid; gap: 8px; }

/* 선택 버튼 묶음: 악기, 난이도, 듣기, 분류 */
.picker { display: grid; gap: 10px; }
.picker .name { font-size: 14px; font-weight: 600; color: var(--muted); }
.seg, .listen, .chips, .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .listen button { min-height: 52px; padding: 10px 14px; border: 1px solid var(--line-btn); border-radius: 8px; background: var(--paper); text-align: left; font-weight: 500; }
.seg button small, .listen button small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.listen button { display: flex; align-items: center; gap: 10px; }
.listen .icon { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12px; }
.listen small { font-family: var(--mono); }
.chips button { height: 40px; padding: 0 18px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); }
/* [기능] 선택 상태 */
[aria-pressed="true"] { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-tint) !important; font-weight: 600; }
.seg [aria-pressed="true"] small { color: var(--accent); }
.chips [aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg); box-shadow: none; }

/* 표시 옵션 칩 */
.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); font-size: 14px; cursor: pointer; }
.opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); font-weight: 500; }
.opt[hidden] { display: none; }

/* 악보 영역 */
.panel { align-content: start; }
.panel h2 { margin: 0; font-size: 26px; }
.desc, .hint { margin: 0; color: var(--muted); font-size: 15px; }
.hint { font-size: 13px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--muted); }
.meta b { color: var(--ink); font-weight: 600; }
audio { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
#pdf, .dl .primary { min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--r); background: var(--accent); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 2px 0 var(--accent-dk); }
#pdf::before { content: "↓ "; }
#pdf:hover { background: var(--accent-dk); }

/* [기능] 악보 종이: 다크 모드에서도 흰 바탕 유지 (abcjs가 검은 음표를 그린다). 안쪽 여백은 좁게 */
.sheet { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 16px 12px; overflow-x: auto; min-width: 0; }
.sheet svg { max-width: 100%; }
.sheet .abcjs-note, .sheet .abcjs-rest { cursor: pointer; }
.sheet .abcjs-note.playing, .sheet .abcjs-note.playing path { fill: var(--play); }   /* [기능] 재생 위치 */
.sheet .abcjs-lyric.playing { fill: var(--play); font-weight: 700; }

/* 곡 페이지 PC: 왼쪽 300px에 악기·난이도·듣기(.controls, 개발 측이 묶음), 오른쪽에 악보(.panel). 나머지는 전체 폭 */
@media (min-width: 1024px) {
  .wrap { row-gap: 28px; }
  /* 고르기 묶음과 악보는 .workspace 한 상자. 왼쪽 묶음은 이 상자 안에서만 따라온다 (아래 안내 영역을 덮지 않음) */
  .workspace { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  /* 고르기 묶음은 위에 그대로, 따라오는 건 재생 바(.floatbar)만 — 묶음을 열 높이만큼 늘려 그 안에서 .floatbar가 붙어 다닌다 (2026-10-25) */
  .workspace > .controls { align-self: stretch; }
  .seg { display: grid; grid-template-columns: 1fr; }
  #level { grid-template-columns: 1fr 1fr; }
  #inst button { display: flex; align-items: center; gap: 10px; }
  #inst button small { display: inline; }
  .listen { display: grid; grid-template-columns: 1fr; }
  .panel { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .panel > * { grid-column: 1 / -1; }
  .panel > #v-title, .panel > #v-desc, .panel > #v-meta { grid-column: 1; }
  .panel > .actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .pl-now { display: none !important; }
}

/* 카드: 곡 목록, 다른 악보, 곡 설명 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
/* 카드: 제목 · 작곡가 · 분류 태그만. 설명(p)과 악기·난이도·길이(.facts)는 숨김 (마크업·검색 data-*는 그대로) */
.card { display: grid; gap: 2px; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 22px; color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.card h2 { order: 1; margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.card .who { order: 2; font-size: 14px; color: var(--muted); }
.card p, .card .facts { display: none; }
.card .tags { order: 3; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.card .tags span { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-weight: 500; }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 2px solid var(--ink); }
.note { padding: 20px 24px 0 0; }
.note h3 { margin: 0 0 8px; font-size: 18px; }
.note p, .note ul { margin: 0; font-size: 15px; color: var(--ink-2); }
.note ul { padding-left: 18px; }
.more-songs h2 { font-size: 22px; margin: 0 0 16px; }
.more-songs .card { padding: 20px; }
.find { display: grid; gap: 16px; }
.find input { width: 100%; height: 60px; padding: 0 20px; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1.5px solid #8E8B83; border-radius: var(--r); }
.empty-msg { font-size: 16px; color: var(--muted); }

/* [기능] 광고 칸: 미리 높이를 잡아 광고가 늦게 떠도 화면이 밀리지 않게, "광고" 표시는 정책상 유지.
   본문(카드·버튼)과 모양이 겹치지 않도록 모서리 없음 + 빗금. 버튼과는 위아래 40px 이상 */
.ad { display: grid; gap: 6px; justify-items: center; margin-block: 40px; }
.ad::before { content: "광고"; font-size: 12px; letter-spacing: .04em; color: var(--muted); justify-self: start; }
.ad .slot { width: 100%; min-height: 100px; display: grid; place-items: center; }
.ad[data-size="rect"] .slot { max-width: 336px; min-height: 280px; }
.ad .placeholder { width: 100%; min-height: inherit; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--ad-a) 0 8px, var(--ad-b) 8px 16px); color: var(--muted); font: 500 12px var(--mono); text-align: center; }
.ad.empty { display: none; }
@media (min-width: 1024px) { .ad:not([data-size="rect"]) { width: 728px; max-width: 100%; justify-self: center; } }

/* 다운로드 창 */
dialog.dl { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.dl::backdrop { background: rgba(22,24,29,.55); }
.dl .body { padding: 28px 28px 24px; display: grid; gap: 14px; }
.dl h2 { margin: 0; font-size: 21px; }
.dl .sub { margin: -6px 0 0; color: var(--muted); font-size: 14px; }
.dl .bar { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.dl .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.dl .tip { margin: 0; font-size: 15px; line-height: 1.7; background: var(--bg); border-radius: var(--r); padding: 16px 18px; }
.dl .tip b { display: block; font-size: 13px; color: var(--accent); }
.dl .done { display: grid; gap: 14px; }
.dl .row { display: flex; flex-wrap: wrap; gap: 8px; }
.dl .row button { min-height: 48px; padding: 0 20px; border-radius: var(--r); border: 1.5px solid var(--ink); background: var(--paper); font-weight: 600; }
.dl .row .primary { font-size: 15px; min-height: 48px; box-shadow: none; }
.dl .more { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.dl .more span { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.dl .ad { margin: 0; padding: 20px 28px 24px; border-top: 1px solid var(--line); background: var(--bg); }   /* [기능] 광고는 버튼과 떨어진 맨 아래 */

.prose { max-width: 70ch; display: grid; gap: 4px; }
.prose h2 { font-size: 22px; margin: 28px 0 4px; }
.prose li { margin-bottom: 6px; }
.prose .note { border: 0; padding: 0; color: var(--muted); font-size: 14px; }

/* 휴대폰: 좌우 16px, 버튼 44px 이상 */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap, .page, .more-songs { padding: 20px 16px; }
  .site-top .in, .site-foot .in { padding-inline: 16px; }
  .brand small { display: none; }
  .site-top nav { gap: 16px; }
  #inst { display: grid; grid-template-columns: repeat(3, 1fr); }
  #level, .listen { display: grid; grid-template-columns: 1fr 1fr; }
  .seg button { min-height: 58px; padding: 8px; text-align: center; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .chips button { flex: none; }
  .card { padding: 16px 18px; border-radius: 14px; }
  .card h2 { font-size: 18px; }
  .card .who { font-size: 13px; }
  .card .tags { margin-top: 10px; }
  .card .tags span { font-size: 12px; padding: 2px 9px; }
  #pdf { width: 100%; }
  /* 폭도 같이 늘려야 좌우가 같다 — 전에는 폭이 그대로라 왼쪽 8px·오른쪽 24px로 쏠렸다 (2026-11-10 점검 4번) */
  .sheet { padding: 10px 6px; margin-inline: -8px; width: calc(100% + 16px) !important; max-width: none; }   /* abcjs가 칸에 width:100%를 바로 넣어 !important */
  .notes { grid-template-columns: 1fr; }
  .note { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ad { margin-block: 40px; }
  .dl .ad[data-size="rect"] .slot { min-height: 250px; max-width: 300px; }   /* 화면 높이 30% 규칙: 가능하면 site.js에서 휴대폰은 wide(100px)로 */
}

/* ---------- 개발 측 추가 (시안 반영): 고르기 묶음, 재생기, 악보 접기 ---------- */
.controls { display: grid; gap: 20px; align-content: start; }
.controls > .picker:nth-child(1) .name::before { content: "1  "; }
.controls > .picker:nth-child(2) .name::before { content: "2  "; }
.controls .picker .name::before { font: 500 13px var(--mono); color: var(--accent); white-space: pre; }

/* 재생기: 재생 버튼 · 위치 막대 · 0.75× (기본 #audio는 player.js가 숨김) */
.player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.pl-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); position: relative; }
.pl-play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; transform: translateX(2px); }
.pl-play.playing::before { width: 14px; height: 16px; border: 0; transform: none; background: linear-gradient(90deg, #fff 0 5px, transparent 5px 9px, #fff 9px); }
.pl-main { display: grid; gap: 4px; min-width: 0; }
.pl-main input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
.pl-time { display: flex; justify-content: space-between; font: 13px var(--mono); color: var(--muted); }
.pl-speed { min-height: 40px; padding: 0 8px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 13px var(--mono); }
.pl-now { margin: 0 0 4px; display: grid; gap: 2px; }
.pl-now[hidden] { display: none; }
.pl-label { font-size: 12px; color: var(--muted); }
#pl-lyric { font-size: 22px; word-spacing: .2em; color: var(--muted); white-space: nowrap; overflow: hidden; }
#pl-lyric b { color: var(--play); }

/* 「악보 보기」 버튼은 휴대폰·태블릿에서만. PC에서는 접힌 상태도 무시하고 늘 펼친다 */
.sheet-toggle { display: none; }
@media (max-width: 1023px) {
  .sheet-toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 56px; padding: 0 16px; border: 1px solid var(--line-btn); border-radius: var(--r); background: var(--paper); font-weight: 600; text-align: left; }
  .sheet-toggle small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: auto; }
  .sheet-toggle::after { content: "▾"; color: var(--muted); }
  .sheet-toggle[aria-expanded="true"]::after { content: "▴"; }
  .panel.folded > .opts, .panel.folded > .actions, .panel.folded > .hint, .panel.folded > .sheet { display: none; }
  /* 순서: 제목 → 고르기·재생기 → 악보 → 광고 (song_top은 버튼 묶음 아래로, 시안 3a) */
  .wrap > * { order: 3; }
  .wrap > .crumbs, .wrap > header, .wrap > .summary { order: 0; }
  .wrap > .workspace { order: 1; display: grid; gap: 20px; }
  .wrap > .ad[data-slot="song_mid"] { order: 4; }       /* 두 광고가 붙지 않게: 안내(.guide) 뒤로 */
  .wrap > .notes, .wrap > footer { order: 5; }
  .controls > .listen, .controls > .player { order: -1; }
}

/* ---------- 개발 측 추가: 검색용 블록 (경로, 한눈에 보기, 안내, 버전 표, 찾아보기) ---------- */
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
h1 small { font-size: .55em; color: var(--muted); font-weight: 500; }
.summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 14px; }
.summary div { display: flex; gap: 8px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 500; }
.guide { display: grid; gap: 12px; padding-top: 8px; border-top: 2px solid var(--ink); }
.guide h2 { font-size: 20px; margin: 16px 0 0; }
.guide p { margin: 0; }
.preview { margin: 0; display: grid; gap: 6px; }
.preview img { width: 100%; max-width: 420px; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.preview figcaption { color: var(--muted); font-size: 13px; }
.solfege-text { font-size: 17px; letter-spacing: .03em; }
.tips { margin: 0; padding-left: 20px; color: var(--ink-2); }
.tips li { margin-bottom: 6px; }
.versions { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 680px; font-size: 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.versions th, .versions td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.versions tr:last-child th, .versions tr:last-child td { border-bottom: 0; }
.versions thead th { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--bg); }
.versions small { display: block; color: var(--muted); font: 12px var(--mono); }
.versions b[aria-current] { color: var(--accent); }
.browse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.browse span { color: var(--muted); font-size: 13px; margin-left: 8px; }
.browse span:first-child { margin-left: 0; }
.browse a { padding: 6px 14px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; }
.browse a:hover { border-color: var(--accent); color: var(--accent); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; flex-basis: 100%; }
.page > h2 { font-size: 22px; margin: 16px 0 0; }

/* 카드: 악기별·모음 목록의 카드는 그 악보의 조성·음역·길이를 보여 준다 */
.card.v .facts { display: flex; flex-wrap: wrap; gap: 2px 12px; order: 3; margin-top: 8px; font: 13px var(--mono); color: var(--muted); }
.card h2 small { font-size: 14px; font-weight: 500; color: var(--accent); margin-left: 4px; }
.card.ask { border-style: dashed; background: transparent; }
.card.ask .who { color: var(--accent); font-weight: 600; }

/* 곡 페이지: 악보 아래 '다른 악보' 3곡 — 작은 네모에 악보 윗부분이 살짝 보이고 태그 (2026-10-25 사용자) */
.recs { display: grid; gap: 12px; }
.recs h2 { margin: 0; font-size: 18px; }
.rec-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 720px; }
.rec { display: grid; gap: 6px; align-content: start; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.rec:hover { border-color: var(--accent); }
.rec-thumb { display: block; height: 96px; overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid var(--line-2); }
.rec-thumb img { width: 100%; height: auto; display: block; }
.rec b { font-size: 15px; line-height: 1.3; }
.rec-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rec-tags span { font-size: 13px; padding: 2px 7px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); }
@media (max-width: 560px) { .rec-thumb { height: 72px; } .rec b { font-size: 14px; } }
.panel > #v-desc { display: none; }   /* 악기 설명 문장은 숨김: 핵심만 */

/* 상단바: 로고 · 검색 · 메뉴(햄버거) (2026-10-25: 곡 1000개·분류 200개를 생각한 구조) */
.top-tools { margin-left: auto; display: flex; gap: 4px; }
.site-top .in { gap: 8px; }
.top-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink); }
.top-btn:hover, .top-btn[aria-expanded="true"] { background: var(--accent-tint); color: var(--accent); }
.searchbar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 0; }
.searchbar .in { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.searchbar input { width: 100%; height: 48px; padding: 0 16px; border: 2px solid var(--accent); border-radius: 12px; font-size: 17px; background: var(--paper); color: var(--ink); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suggest a { height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; text-decoration: none; }
.suggest a.sg-facet { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.suggest a.sg-all { color: var(--muted); }
.suggest small { font: 500 12px var(--mono); opacity: .75; }
.suggest a:hover { border-color: var(--accent); }
/* 분류 전체 보기: 묶음마다 이름과 곡 수 */
.facet { display: grid; gap: 10px; }
.facet h2 { margin: 0; font-size: 18px; }
.facet-list { display: flex; flex-wrap: wrap; gap: 6px; }
.facet-list a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; }
.facet-list a:hover { border-color: var(--accent); color: var(--accent); }
.facet-list small { font: 500 12px var(--mono); color: var(--muted); }
/* 쪽 나누기 · 더 보기 · 첫 화면 링크 */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 24px 0; }
.pager a { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line-btn); border-radius: 10px; color: var(--ink); text-decoration: none; }
.pager a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.more-btn { display: block; margin: 20px auto; height: 44px; padding: 0 24px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); font-size: 15px; }
.more-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.more-links a { padding: 10px 16px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 600; }
.more-links a:hover { border-color: var(--accent); color: var(--accent); }
#search-results h2 small { font: 500 14px var(--mono); color: var(--muted); }

/* 로컬 빌드 표시 (배포용 --release 빌드에는 없음) */
.dev-build { background: #FFE08A; color: #16181D; font: 500 12px var(--mono); text-align: center; padding: 4px 8px; }

/* 따라다니는 바: 재생 바 + 악보 따라가기(켬/끔). PC는 오른쪽 열 안에서 위에 붙고, 휴대폰·태블릿은 화면 아래에 고정 */
.floatbar { display: grid; gap: 8px; z-index: 5; }
#follow-toggle { justify-self: start; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; white-space: nowrap; }
@media (min-width: 1024px) {
  .floatbar { position: sticky; top: 16px; padding-bottom: 4px; background: var(--bg); }
}
@media (max-width: 1023px) {
  /* 휴대폰: 한 줄에 다 넣으면 위치 막대가 찌그러진다 → 재생 버튼은 왼쪽에 크게, 위치 막대 한 줄, 빠르기·따라가기 한 줄 */
  .floatbar { position: fixed; left: 0; right: 0; bottom: 0; grid-template-columns: auto minmax(0, 1fr) auto;
              grid-template-areas: "play main main" "play speed follow"; column-gap: 12px; row-gap: 6px; align-items: center;
              padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line);
              box-shadow: 0 -6px 16px rgba(0,0,0,.10); }
  .floatbar .player { display: contents; }
  .floatbar .pl-play { grid-area: play; width: 48px; height: 48px; }
  .floatbar .pl-main { grid-area: main; }
  .floatbar .pl-speed { grid-area: speed; justify-self: start; min-height: 34px; }
  .floatbar #follow-toggle { grid-area: follow; min-height: 34px; padding: 0 10px; font-size: 13px; }
  .floatbar .pl-label { display: none; }
  .floatbar #pl-lyric { font-size: 17px; }
  body:has(.floatbar) { padding-bottom: 120px; }   /* 고정 바가 바닥글을 가리지 않게 */
}
#follow-toggle::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; border: 2px solid var(--muted); vertical-align: -1px; }
#follow-toggle[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }

/* 연속 듣기 (/listen/) */
/* 맨 위 메뉴 줄(.site-top, 61px)도 붙어 있어 top:0이면 곡 제목이 그 밑에 가려졌다 (2026-11-02 사용자: 스크롤하면 무슨 곡인지 안 보임) */
.playlist .lp { position: sticky; top: 61px; z-index: 30; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.playlist .lp-now { display: flex; flex-direction: column; gap: 2px; min-height: 52px; }
.playlist .lp-now b { font-size: 19px; line-height: 1.35; }
.playlist .lp-now span { color: var(--muted); }
.playlist #lp-seek { width: 100%; margin: 12px 0 2px; accent-color: var(--play); }
.playlist .lp-time { display: flex; justify-content: space-between; font: 500 13px var(--mono); color: var(--muted); }
.playlist .lp-btns { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.playlist .lp-btns button { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line-btn); background: var(--paper); font-size: 22px; }
.playlist .lp-btns .main { width: 76px; height: 76px; background: var(--play); border-color: var(--play); color: #fff; font-size: 28px; }
.playlist .lp-list { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: t; }
.playlist .lp-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-2); counter-increment: t; }
.playlist .lp-list li .lp-row > button { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; padding: 12px 4px; border: 0; background: none; min-width: 0; }
.playlist .lp-list li .lp-row > button b::before { content: counter(t) ". "; color: var(--muted); font-weight: 500; }
.playlist .lp-list li .lp-row > button span { color: var(--muted); font-size: 14px; }
.playlist .lp-list li.on { background: var(--accent-tint); }
.playlist .lp-list li.on b { color: var(--accent); }
.playlist .lp-list li a { padding: 12px; font-size: 14px; }
.playlist .lp-list li { flex-direction: column; align-items: stretch; gap: 0; }
.playlist .lp-row { display: flex; align-items: center; gap: 8px; }
.playlist .lp-fix { margin: -4px 4px 10px; font-size: 13px; color: var(--ink-2); }
.playlist .lp-badge { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #FFE08A; color: #16181D; font: 500 11px var(--mono); }
.playlist .lp-ats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.playlist .lp-at { padding: 2px 8px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); font: 500 12px var(--mono); }
.playlist .lp-more { font-size: 12px; color: var(--muted); align-self: center; }
.playlist .lp-sum { margin-top: 8px; font-size: 14px; }

/* 2026-10-21 재편: 아이콘은 SVG(아이폰 이모지 방지), 연속 듣기 버튼 정렬, 첫 화면 검색·테마 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg { display: block; }
.listen .icon svg { margin-left: 2px; }
.playlist .lp-btns { align-items: center; }
.playlist .lp-btns button { display: grid; place-items: center; padding: 0; line-height: 0; color: var(--ink); }
.playlist .lp-btns .main { color: #fff; }
.playlist .lp-btns .main svg { margin-left: 3px; }
.playlist .lp-btns .main[aria-label="일시정지"] svg { margin-left: 0; }
.playlist .lp-at { white-space: nowrap; flex: none; }
.playlist .lp-fix { overflow-wrap: normal; word-break: keep-all; }
.home .search-hero { padding: 28px 0 8px; gap: 12px; }
.home .find input { height: 64px; font-size: 18px; border-radius: 14px; }
/* 검색창 바로 아래 제안: 분류(칩) + 곡 이름(링크) */
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.suggest button, .suggest a { height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 999px; font-size: 14px; text-decoration: none; }
.suggest button { border: 1px solid var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.suggest button small { font: 500 12px var(--mono); opacity: .75; }
.suggest a { border: 1px solid var(--line-btn); background: var(--paper); color: var(--ink); }
.suggest a:hover, .suggest button:hover { border-color: var(--accent); }
.find-hint { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.find-hint button { height: 32px; padding: 0 12px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 14px; }
.find-hint button:hover { border-color: var(--accent); color: var(--accent); }
.home h2 { font-size: 20px; margin: 8px 0 12px; }
.home h2 small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.theme { display: grid; gap: 4px; align-content: start; min-height: 128px; padding: 18px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--theme, var(--accent)); }
.theme:hover { border-color: var(--theme, var(--accent)); color: var(--ink); }
.theme b { font-size: 20px; letter-spacing: -0.01em; }
.theme span { font-size: 14px; color: var(--ink-2); }
.theme small { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--muted); }
.t-christmas { --theme: #2E7D4F; } .t-kids { --theme: #E0A100; } .t-school { --theme: #8E2C48; }
.t-happy-birthday { --theme: #D2557A; } .t-classic { --theme: #6B4FA0; } .t-easy { --theme: #C8401C; } .t-folk { --theme: #1F6E8C; }
@media (max-width: 640px) {
  .theme-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .theme { min-height: 112px; padding: 14px; }
  .theme b { font-size: 17px; }
  .theme span { font-size: 13px; }
  .home .find input { height: 56px; font-size: 16px; }
  .site-top .brand small { display: none; }
}
.faq dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq dt { font-weight: 600; padding: 14px 0 4px; }
.faq dd { margin: 0; padding: 0 0 14px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }

/* 2026-10-22: 밝은 화면 + 그림 (사용자: "까맣다, 깃허브 같다") */
.site-top { background: #FFFFFF; border-bottom: 3px solid var(--accent); }
.home .search-hero { display: grid; gap: 14px; padding: 8px 0 8px; }
.hero-art { max-width: 460px; width: 100%; margin: 0 auto -8px; }
.hero-art svg { width: 100%; height: auto; }
@media (min-width: 900px) {
  .home .search-hero { grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "find art" "hint art"; align-items: center; column-gap: 40px; padding: 24px 0 16px; }
  .home .search-hero .find { grid-area: find; align-self: end; }
  .home .search-hero .find-hint { grid-area: hint; align-self: start; }
  .hero-art { grid-area: art; margin: 0; }
}
.home .find input { background: #FFFFFF; border: 2px solid #9DB8A4; box-shadow: 0 6px 20px rgba(31, 107, 69, .08); }
.home .find input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-tint); }
.theme { position: relative; overflow: hidden; border: 0; border-top: 0; background: var(--theme-bg, #F4EFE6); padding-right: 96px; }
.theme:hover { box-shadow: 0 0 0 2px var(--theme) inset; }
.theme-art { position: absolute; right: 8px; bottom: 8px; width: 84px; height: 84px; }
.theme-art svg { width: 100%; height: 100%; }
.theme b { color: #1E1B18; } .theme span { color: #4A4540; } .theme small { color: #6B645C; }
.t-christmas { --theme-bg: #E6F2EA; } .t-kids { --theme-bg: #FFF4D6; } .t-school { --theme-bg: #F7E3E6; }
.t-happy-birthday { --theme-bg: #FCE6EE; } .t-classic { --theme-bg: #ECE6F5; } .t-easy { --theme-bg: #FCE9DF; } .t-folk { --theme-bg: #E3F1F8; }
.card { overflow: hidden; }
.card .thumb { order: 0; display: block; margin: -22px -22px 14px; height: 132px; overflow: hidden; background: #FFFFFF; border-bottom: 1px solid var(--line-2); }
.card .thumb img { width: 100%; height: auto; display: block; transform: translateY(-4%); }
.card.ask .thumb { display: none; }
@media (max-width: 640px) {
  .theme { padding-right: 70px; }
  .theme-art { width: 62px; height: 62px; right: 6px; bottom: 6px; }
  .hero-art { max-width: 300px; }
  .card .thumb { height: 110px; }
}

/* 2026-10-22 곡 페이지: 다운로드·미리보기가 먼저, 악기·미리듣기는 옆(PC)·아래(휴대폰), 나머지는 아래로 */
.panel .desc, .panel .meta, .panel .hint, .sheet-toggle { display: none !important; }
/* 제목 아래 한 줄: 이 곡을 어디서 들어 봤는지 (2026-10-25 사용자). 전에는 이 자리 문장을 숨겼다 */
.wrap > header .lede { font-size: 15px; margin-top: 6px; }
.panel.folded .opts, .panel.folded .actions, .panel.folded .sheet { display: revert; }
.wrap > .summary { order: 6; font-size: 14px; opacity: .85; }
.actions.top { margin: 0 0 4px; }
#pdf { width: 100%; height: 56px; font-size: 18px; font-weight: 700; border: 0; border-radius: 12px; background: var(--play); color: #fff; box-shadow: 0 6px 16px rgba(31, 107, 69, .25); }
#pdf:hover { filter: brightness(1.05); }
.opt-box { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper); }
.opt-box summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.opt-box[open] summary { margin-bottom: 8px; }
.panel h2#v-title { font-size: 16px; color: var(--muted); font-weight: 500; }
@media (min-width: 1024px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .workspace > .panel { grid-column: 1; grid-row: 1; }
  .workspace > .controls { grid-column: 2; grid-row: 1; }
}
@media (max-width: 1023px) {
  .workspace > .panel { order: 0; }
  .workspace > .controls { order: 1; }
  .controls > .listen, .controls > .player { order: 0 !important; }
}
@media (min-width: 900px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } .theme { min-height: 140px; } }
.all-songs .chips { margin-bottom: 18px; }
.chips small { margin-left: 4px; font: 500 12px var(--mono); opacity: .7; }   /* 분류마다 지금 검색 결과 안의 곡 수 */
#cards .card .tags span { cursor: pointer; }                                    /* 첫 화면 카드 태그: 누르면 그 분류로 거름 */
#cards .card .tags span:hover { background: var(--accent); color: var(--on-accent, #fff); }
.card { padding: 18px 20px 20px; }
.card .thumb { margin: -18px -20px 12px; }
.card .tags { margin-top: 10px; }
.search-box { position: relative; }
.search-box input { padding-right: 60px !important; }
.search-ico { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--accent); }
.search-ico:hover { background: var(--accent-tint); color: var(--accent); }
.search-box input::-webkit-search-cancel-button { margin-right: 4px; }
.clear-q { margin-left: 12px; height: 32px; padding: 0 12px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 500; color: var(--ink-2); vertical-align: middle; }
@media (max-width: 640px) {
  .theme { padding: 14px 14px 52px; min-height: 0; }
  .theme-art { width: 44px; height: 44px; right: 10px; bottom: 10px; }
  .theme small { padding-top: 6px; }
}
.empty-msg { margin: 4px 0 8px; padding: 18px 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 16px; }
.empty-msg b { color: var(--accent); }

/* 연속 듣기: 지금 듣는 곡의 악보 (전수조사용) */
.lp-sheet { margin: 18px 0; background: #fff; border-radius: 12px; padding: 12px; }
.lp-sheet h2 { font-size: 1rem; margin: 0 0 8px; }
.lp-sheet svg { max-width: 100%; height: auto; }

/* 연속 듣기 악보: 진행 중인 마디 띠(노랑)·음표(주황), 누른 음(파랑)과 구분 */
#lp-abc .abcjs-note, #lp-abc .abcjs-rest { cursor: pointer; }
#lp-abc .abcjs-note.playing path, #lp-abc .abcjs-note.playing { fill: #1F6B45; }
#lp-abc .play-band, .sheet .play-band { fill: rgba(255, 190, 0, .28); pointer-events: none; }

/* 2026-10-25 분류 정리: 새 테마 색 */
.t-recital { --theme: #8E2C48; --theme-bg: #F7E3E6; } .t-events { --theme: #D2557A; --theme-bg: #FCE6EE; }
.t-piano { --theme: #C8401C; --theme-bg: #FCE9DF; }

.pager span { align-self: center; color: var(--muted); }

/* ---------- 유튜브식 레이아웃 (2026-10-25 사용자: 유튜브 UI를 참고, 회원 기능 없음) ---------- */
/* 상단바: 햄버거·로고 | 가운데 검색창 | (휴대폰) 검색 아이콘. 스크롤해도 위에 붙어 있음 */
.site-top { position: sticky; top: 0; z-index: 40; }
.site-top .in { max-width: none; padding: 0 16px; gap: 12px; min-height: 60px; }
.top-find { flex: 1; max-width: 640px; margin: 0 auto; position: relative; }
.top-find input { width: 100%; height: 40px; padding: 0 18px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 16px; }
.top-find input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.top-find .suggest { position: absolute; top: 46px; left: 0; right: 0; z-index: 45; display: grid; gap: 0; margin: 0; padding: 8px 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.top-find .suggest a { height: auto; justify-content: flex-start; padding: 8px 18px; border: 0; border-radius: 0; background: none; font-weight: 400; }
.top-find .suggest a.sg-facet { background: none; color: var(--accent); font-weight: 600; }
.top-find .suggest a:hover { background: var(--accent-tint); }
.top-tools { margin-left: 0; }
#top-search { display: none; }
@media (max-width: 719px) {
  .top-find { display: none; }
  #top-search { display: grid; }
  .top-tools { margin-left: auto; }
}
/* 왼쪽 사이드바: 서랍(기본) / 넓은 화면의 목록 페이지는 펼쳐 둠(.pinned) */
.side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 260px; overflow-y: auto; background: var(--paper); transform: translateX(-102%); transition: transform .18s ease; box-shadow: 8px 0 24px rgba(0, 0, 0, .15); }
html.side-open .side { transform: none; }
.side-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .35); }
.side-in { display: grid; gap: 2px; padding: 4px 12px 12px; }
.side-head { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; }
.side.pinned .side-head { display: none; }
/* 2026-11-08 사용자: 사이드 메뉴 글자가 작고 얇아 잘 안 보인다 → 16px·중간 굵기 */
.side .side-item { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.side .side-item:hover { background: var(--accent-tint); }
.side .side-item[aria-current="page"] { background: var(--accent-tint); font-weight: 700; }
.side hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.side h2 { margin: 6px 12px 4px; font-size: 14px; font-weight: 700; color: var(--muted); }
@media (min-width: 1200px) {
  .side.pinned { top: 60px; z-index: 30; width: 232px; transform: none; box-shadow: none; transition: none; background: var(--bg); border-right: 1px solid var(--line-2, var(--line)); }
  html.side-mini .side.pinned { transform: translateX(-102%); }
  html:not(.side-mini) body:has(.side.pinned) > main.page,
  html:not(.side-mini) body:has(.side.pinned) > .site-foot { margin-left: 232px; }
  body:has(.side.pinned) > main.page { max-width: none; padding: 24px 32px; }
}
/* 홈: 칩 줄 (가로로 넘김, 위에 붙음) */
.chip-row { position: sticky; top: 60px; z-index: 20; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: -8px -4px 4px; padding: 8px 4px 12px; background: var(--bg); }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row button { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--accent-tint); color: var(--ink); font-size: 14px; font-weight: 500; }
.chip-row button[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; box-shadow: none; }   /* 공통 [aria-pressed] 규칙(!important)을 이기게 */
#home-more { height: 1px; }
/* 곡 카드: 유튜브 썸네일처럼 16:9 악보 윗부분 + 제목 두 줄 + 작곡가·태그 */
.cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 16px; }
.card, .card.v { padding: 0; gap: 4px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.card:hover { box-shadow: none; }
.card .thumb { order: 0; margin: 0 0 6px; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: none; }
.card:hover .thumb { border-color: var(--accent); }
.card h2 { font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .who { font-size: 13px; }
.card .tags { margin-top: 2px; gap: 4px; }
.card .tags span { font-size: 12px; padding: 1px 8px; background: none; color: var(--muted); border: 1px solid var(--line); font-weight: 400; }
.card .tags span:hover { color: var(--accent); border-color: var(--accent); }

/* 홈 섹션: 유튜브식 줄(제목 + 가로로 넘기는 카드 + 모두 보기) (2026-10-25 사용자: 홈은 섹션으로, 요즘 인기는 직접 고름) */
.home { gap: 36px; }
.shelf, .home .themes { display: grid; gap: 12px; min-width: 0; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelf-head h2 { margin: 0; font-size: 20px; }
.shelf-more { font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.shelf-more:hover { color: var(--accent); }
.shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.shelf-row > .card { scroll-snap-align: start; }
/* 태그 페이지: 찾기 칸 + 정렬 */
.tag-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#tag-filter { flex: 1; min-width: 200px; max-width: 420px; height: 42px; padding: 0 16px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 16px; }
.tag-sort { display: flex; gap: 6px; }
.tag-sort button { height: 36px; padding: 0 14px; border: 1px solid var(--line-btn); border-radius: 8px; background: var(--paper); font-size: 14px; }
.tag-sort button[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg); box-shadow: none; }
#tag-page h2 { margin: 8px 0 0; font-size: 20px; }
#tag-page .facet h3 { margin: 12px 0 6px; font-size: 14px; color: var(--muted); }

/* 테마 패널: 작은 정사각형 (2026-10-25 사용자: 테마 칸이 너무 크고 직사각형 → 줄이고 홈 맨 위로). 넓은 화면은 한 줄에 8개 */
.theme-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.theme { aspect-ratio: 1 / 1; min-height: 0; padding: 12px; }
.theme b { font-size: 15px; line-height: 1.25; }
.theme small { font-size: 12px; padding-top: 2px; margin-top: 0; }
.theme-art { width: 46px; height: 46px; right: 10px; bottom: 10px; }

/* 테마 패널은 정사각형 그대로 크게 (2026-10-25 사용자: 지금은 너무 작다) */
.theme-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.theme { padding: 16px; }
.theme b { font-size: 18px; }
.theme small { font-size: 13px; }
.theme-art { width: 72px; height: 72px; right: 12px; bottom: 12px; }
@media (max-width: 560px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } .theme-art { width: 56px; height: 56px; } }
/* 섹션 안 가로 스크롤 없음 (2026-10-25 사용자): 카드는 줄바꿈, 넓은 화면 4개씩 두 줄(8곡), 휴대폰 4곡. 나머지는 '모두 보기' */
.shelf-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-columns: auto; overflow: visible; padding-bottom: 0; scroll-snap-type: none; }
/* 홈 테마는 한 줄(6개)만, 나머지는 '테마 전체' — 두 번째 줄에 2개만 남는 어색함 없게. 순서는 site_config.json THEMES 순 */
.home .theme-grid { grid-template-columns: repeat(6, 1fr); }
.home .theme-grid > .theme:nth-child(n+7) { display: none; }
@media (max-width: 1100px) { .home .theme-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .home .theme-grid { grid-template-columns: repeat(2, 1fr); } }

/* 섹션은 한 줄만 (2026-10-25 사용자: 가로 스크롤도, 두 줄도 아님). 폭에 들어가는 만큼만 보이고 나머지 줄은 높이 0으로 숨김 */
.shelf-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
@media (max-width: 560px) { .shelf-row { grid-template-columns: repeat(2, 1fr); } }

/* 악보 카드는 블록으로: 누르는 영역이 보이게 (2026-10-25 사용자: 클릭 영역을 구분 못 하겠다) */
.card, .card.v { padding: 10px 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.card .thumb { margin: 0 0 8px; border-radius: 10px; }
.card:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.card h2, .card .who, .card .tags { padding: 0 4px; }
/* 모두 보기·테마 전체: 버튼 모양 (2026-10-25 사용자: 가시성) */
.shelf-more { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.shelf-more::after { content: "›"; margin-left: 6px; font-size: 16px; }
.shelf-more:hover { border-color: var(--accent); color: var(--accent); }

/* 난이도 버튼: 초급 · 원곡 · 편곡 (편곡판이 없는 곡은 둘) */
#level { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* 글은 넘치면 말줄임표로 (2026-10-27 사용자: 2줄 이상 설명이 오지 않게, 사이트 전체) */
.card .who, .rec .who, .wrap > header .eyebrow, .crumbs, .side .side-item, .suggest a, .facet-list a, .menu-links a, .theme small,
.top-find .suggest a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card .tags, .rec-tags { flex-wrap: nowrap; overflow: hidden; }
.card .tags span, .rec-tags span { flex: none; white-space: nowrap; }
.card h2, .rec b, .theme b, .wrap > header .lede, #search-results h2, .shelf-head h2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.shelf-head h2 { -webkit-line-clamp: 1; }
.suggest a { display: block; }
.suggest a.sg-facet, .find .suggest a, .searchbar .suggest a { display: inline-flex; max-width: 100%; }

/* 아이콘 (2026-10-27): 사이드바·섹션 제목·목록 제목. 테마는 패널과 같은 그림을 작게 */
.ico { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--accent); }
.ico svg { width: 100%; height: 100%; }
.ico-art { width: 24px; height: 24px; }
.side .side-item { display: flex; align-items: center; gap: 12px; }
.side .side-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-head h2, #tag-page h2, .themes h2 { display: flex; align-items: center; gap: 8px; }
.page .hero h1 { display: flex; align-items: center; gap: 10px; }
.page .hero h1 .ico { width: 32px; height: 32px; }
.page .hero h1 .ico-art { width: 40px; height: 40px; }

/* 곡 페이지 (2026-10-27 사용자: 재생 말고 모든 고르기는 악보 위에, 유튜브 뮤직처럼)
   위 도구줄: 악기 칩 · 난이도(피아노만, 붙은 고르기) · 전체/하이라이트 · PDF / 아래 줄: 표시 옵션(접지 않음). 재생 바는 화면 아래 고정 */
.workspace.tb { display: block; }
.workspace.tb > .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.tb .controls > * { order: 0 !important; }
.tb .controls .picker { display: flex; align-items: center; }
.tb .controls .picker .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tb .controls .picker[hidden] { display: none; }
.tb #inst, .tb #level, .tb .listen { display: flex !important; flex-wrap: wrap; gap: 8px; }
.tb #inst button { min-height: 36px; height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent-tint); color: var(--ink); font-size: 15px; font-weight: 500; text-align: center; }
.tb #inst button:hover { background: var(--line); }
.tb #inst button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.inst-ico { flex: none; width: 18px; height: 18px; }
.tb #inst button[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; }
/* 난이도와 전체/하이라이트: 한 덩어리 고르기 (악기 칩과 모양을 달리해 '악기 안의 고르기'로 보이게) */
.tb #level, .tb .listen { gap: 0 !important; padding: 3px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); }
.tb #level button, .tb .listen button { min-height: 30px; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2, var(--ink)); font-size: 14px; font-weight: 500; text-align: center; box-shadow: none; }
.tb #level button[hidden] { display: none; }
.tb #level button[aria-pressed="true"], .tb .listen button[aria-pressed="true"] { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: none !important; }
.tb .listen .icon { display: none; }
.tb .listen button > span { display: inline; }
.tb .listen small { display: inline !important; margin-left: 6px; font-size: 12px; color: inherit; opacity: .75; }
.tb .controls > .actions.top { margin: 0 0 0 auto; }
.tb .controls > .actions.top #pdf { min-height: 40px; padding: 0 18px; }
.tb .controls > .opt-box { flex-basis: 100%; border: 0; padding: 0; background: none; }
.tb .opt-box .opts { gap: 8px; }
/* 피아노 반주 줄 (player.js, 반주 따로 파일이 있는 판만) */
/* 표시 옵션 줄과 같은 간격(8px)·높이, 고르기 덩어리는 전체/하이라이트와 같은 모양 */
.acc-box { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-box[hidden], #mr-dl[hidden] { display: none; }
.tb .controls > .acc-box { order: 9 !important; }   /* 표시 옵션 다음 줄 */
.acc-name { font-size: 14px; font-weight: 600; color: var(--ink-2, var(--ink)); margin-right: 4px; }
.acc-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); }
.acc-seg button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2, var(--ink)); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: none; }
.acc-seg button[aria-pressed="true"] { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: none !important; }
/* 반주 MR 다운로드: PDF 버튼 옆, 같은 크기의 테두리 버튼 */
#mr-dl { min-height: 56px; padding: 0 24px; border: 1.5px solid var(--accent); border-radius: var(--r); background: var(--paper); color: var(--accent); font-size: 17px; font-weight: 700; cursor: pointer; }
#mr-dl:hover { background: var(--accent-tint); }
.tb .controls > .actions.top { display: flex; gap: 8px; }
.tb .controls > .actions.top #pdf { width: auto; flex: 1 1 auto; }
.tb .controls > .actions.top #mr-dl { min-height: 40px; padding: 0 18px; font-size: 15px; }
.tb .panel > .actions.top, .tb .panel > #v-title { display: none; }
/* 재생 바: 모든 화면에서 아래에 고정 (유튜브 뮤직 아래 재생 바) */
@media (min-width: 1024px) {
  .tb .floatbar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; display: flex; align-items: center; gap: 16px;
                  padding: 10px max(24px, calc((100vw - 1240px) / 2)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
  .tb .floatbar .player { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; border-radius: 0; }
  .tb .floatbar .pl-main { flex: 1; }
  body:has(.tb .floatbar) { padding-bottom: 96px; }
}
/* 바닥글: 내용과 같은 왼쪽 선에 (2026-10-27 사용자: 하단 위치) */
@media (min-width: 1200px) {
  body:has(.side.pinned) > .site-foot .in { max-width: none; margin: 0; padding-inline: 32px; }
}

/* 휴대폰 곡 페이지 도구줄 (2026-10-27): 악보가 첫 화면에 보이게 줄 수를 줄인다
   악기 5개 한 줄 · 난이도와 전체/하이라이트 한 줄(길이 숨김) · 표시 옵션 작게 · PDF는 작은 단추로 옵션 줄 끝 */
@media (max-width: 700px) {
  .workspace.tb > .controls { gap: 8px; margin-bottom: 12px; padding-bottom: 12px; }
  .tb .controls > .picker:first-child { flex-basis: 100%; }
  .tb #inst { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .tb #inst button { height: 34px; min-height: 34px; padding: 0 2px; font-size: 14px; }
  .tb #inst .inst-ico { display: none; }   /* 휴대폰: 버튼 5개가 한 줄이라 그림을 넣을 자리가 없다 */
  .tb #level button, .tb .listen button { height: 34px; min-height: 34px; padding: 0 12px; font-size: 14px; }
  .tb .controls > .picker:nth-child(2) { order: 1 !important; }
  .tb .controls > .listen { order: 2 !important; }
  .tb .controls > .picker:first-child { order: 3 !important; }
  .tb .listen small { display: none !important; }
  .tb .controls > .opt-box { order: 5 !important; flex: 1 1 100%; min-width: 0; }
  .tb .controls > .acc-box { order: 5 !important; gap: 6px; }
  .acc-name { font-size: 13px; }
  .acc-seg button { min-height: 28px; padding: 0 10px; font-size: 13px; }
  .tb .acc-box .opt { min-height: 30px; padding: 0 10px 0 8px; font-size: 13px; }
  .tb .controls > .actions.top #mr-dl { flex: 1; min-height: 38px; font-size: 14px; padding: 0 8px; }
  .tb .opt-box .opts { gap: 6px; }
  .tb .opt-box .opt { min-height: 30px; padding: 0 10px 0 8px; font-size: 13px; }
  .tb .controls > .actions.top { order: 6 !important; flex-basis: 100%; margin: 0; }
  .tb .controls > .actions.top #pdf { width: 100%; min-height: 38px; font-size: 14px; }
}

/* 언어 고르기 (2026-10-29: 한국어·English·日本語) — 상단바 오른쪽, 작게 */
.lang-sel { height: 34px; padding: 0 6px; border: 1px solid var(--line-btn); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 13px; cursor: pointer; align-self: center; }
@media (max-width: 700px) { .lang-sel { max-width: 84px; font-size: 12px; } }
/* 일본어 페이지 글꼴: 한글 글꼴(IBM Plex Sans KR)에 가나가 없어 대체 글꼴로 넘어가며 글자 사이가 벌어졌다 → 일본어 시스템 글꼴 먼저 */
html[lang="ja"] { --body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif;
                  --display: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; }
html[lang="ja"] body { font-family: var(--body); }
/* 중국어(번체) 페이지 글꼴 */
html[lang="zh-Hant"] { --body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; --display: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
html[lang="zh-Hant"] body { font-family: var(--body); }
/* 바닥글 쿠키 설정 (유럽 동의 창이 켜졌을 때만 보임): 링크와 같은 모양 */
.site-foot .cookie-btn { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: none; cursor: pointer; }
.site-foot .cookie-btn:hover { text-decoration: underline; }
/* 언어 고르기 옆 표시 (2026-11-01 사용자: 언어 설정인 줄 알게 'Language'): 지구본 + 글자. 좁은 화면은 지구본만 */
.lang-box { display: inline-flex; align-items: center; gap: 6px; align-self: center; color: var(--ink-2, var(--ink)); font-size: 13px; cursor: pointer; }
.lang-box svg { flex: none; }
@media (max-width: 700px) { .lang-box .lang-word { display: none; } }

/* ---------- 하단 재생 바 (2026-11-01 사용자: 눈에 안 띔, 청색·검정 재생 버튼이 안 보임 → 어두운 바)
   2026-11-04 숲 테마: 어두운 초록 바는 "너무 진함" → 연한 초록 바 + 위쪽 초록 선 + 진한 초록 재생 버튼(시안 A1).
   빠르기는 '빠르기 [100%]', 악보 따라가기는 재생 중이면 점이 뛴다 */
.floatbar, .tb .floatbar { background: #E8F2EA !important; border-top: 3px solid var(--accent) !important; box-shadow: 0 -6px 18px rgba(31,107,69,.14) !important; color: var(--ink); }
.floatbar .pl-play { width: 52px; height: 52px; background: var(--accent); box-shadow: 0 4px 12px rgba(31,107,69,.35); }
.floatbar .pl-play:hover { background: #26804F; }
.floatbar .pl-play::before { border-left-color: #fff !important; }
.floatbar .pl-play.playing::before { background: linear-gradient(90deg, #fff 0 5px, transparent 5px 9px, #fff 9px) !important; }
.floatbar .pl-main input[type="range"] { accent-color: var(--accent); }
.floatbar .pl-time { color: var(--muted); }
.floatbar #pl-lyric, .floatbar .pl-now { color: var(--ink); }
.pl-speedw { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.pl-speed-name { font-size: 13px; color: var(--muted); white-space: nowrap; }
.floatbar .pl-speed { background: #FFFFFF; color: var(--ink); border: 1px solid #B9CDBE; min-height: 36px; padding: 0 10px; font: 500 14px var(--mono); }
.floatbar #follow-toggle { background: #FFFFFF; color: var(--ink); border: 1px solid #B9CDBE; }
.floatbar #follow-toggle::before { border-color: #6E8576; }
/* 켜졌을 때 점뿐 아니라 테두리에도 불 (2026-11-08 사용자: 켜졌는지 한눈에) */
.floatbar #follow-toggle[aria-pressed="true"] { border: 2px solid var(--accent) !important; box-shadow: 0 0 0 3px rgba(31,107,69,.22), 0 0 10px rgba(31,107,69,.35) !important; background: #D3E8D9 !important; color: var(--accent-dk) !important; font-weight: 600; }
.floatbar #follow-toggle[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }
/* 따라가는 중: 단추 테두리에서 물결이 퍼진다 (2026-11-09 사용자: 점의 퍼지는 효과를 테두리에) */
#follow-toggle { position: relative; }
#follow-toggle.following::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; animation: follow-ripple 1.4s ease-out infinite; }
@keyframes follow-ripple { 0% { box-shadow: 0 0 0 0 rgba(31,107,69,.6); } 80%, 100% { box-shadow: 0 0 0 12px rgba(31,107,69,0); } }
@keyframes follow-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,107,69,.75); } 80%, 100% { box-shadow: 0 0 0 9px rgba(31,107,69,0); } }
@media (prefers-reduced-motion: reduce) { #follow-toggle.following::after { animation: none; } }
@media (max-width: 1023px) {
  .floatbar .pl-speedw { grid-area: speed; justify-self: start; }
  .floatbar .pl-speed { min-height: 34px; }
}
/* 악기 칩(고르지 않은 것)은 강조색 대신 차분한 바탕 */
.tb #inst button { background: #EAF1EA; }
.tour li { margin: 10px 0; font-size: 17px; } .tour small { color: var(--muted); font-size: 14px; }

/* 난이도(초급·원곡·편곡)와 전체/하이라이트를 악기 위로, 더 크고 눈에 띄게 (2026-11-08 사용자) */
@media (min-width: 701px) {
  .tb .controls > .picker:nth-child(2) { order: 1 !important; }
  .tb .controls > .listen { order: 2 !important; }
  .tb .controls > .actions.top { order: 3 !important; }
  .tb .controls > .picker:first-child { order: 4 !important; flex-basis: 100%; }
  .tb .controls > .opt-box { order: 5 !important; }
  .tb #level button, .tb .listen button { min-height: 40px; height: 40px; padding: 0 20px; font-size: 16px; font-weight: 600; }
}
.tb #level, .tb .listen { gap: 10px !important; padding: 0; border: 0 !important; background: transparent !important; }   /* 2026-11-09 사용자: 묶음 테두리 빼고 단추 사이 띄우기 */
.tb #level button:not([aria-pressed="true"]), .tb .listen button:not([aria-pressed="true"]) { background: var(--accent-tint); color: var(--ink); }

/* 스크롤하면 위에 붙는 줄: 곡 제목 · 악기 · 판 + PDF 받기 (2026-11-08 사용자) */
.dl-sticky { position: fixed; top: 60px; left: 0; right: 0; z-index: 35; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .07); }
.dl-sticky[hidden] { display: none; }
.dl-in { max-width: 1240px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.dl-in b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.dl-in span { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.dl-in button { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.dl-in button:hover { background: var(--accent-dk); }
@media (max-width: 700px) { .dl-in { padding: 6px 12px; gap: 8px; } .dl-in b { font-size: 14px; } .dl-in span { font-size: 12px; } .dl-in button { height: 34px; padding: 0 12px; font-size: 13px; } }

/* 마우스를 올리면 누를 수 있는 것과 누르면 무엇이 되는지 보이게 (2026-11-08 사용자: 호버가 부실하다, 태그·난이도를 누를 때 동작을 예상할 수 있어야) */
a, button:not(:disabled), select, label.opt, .card .tags span { cursor: pointer; }
a, button, select, .opt, .card, .theme, .card .tags span, .facet-list a, .side-item { transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, transform .12s; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 곡 카드: 카드 전체가 떠오르고 제목이 초록으로 */
.card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 16px rgba(23, 34, 27, .10); }   /* 떠오르기(transform)는 뺌: 한 줄 묶음(overflow:hidden)에서 위 테두리가 잘렸다 (2026-11-09) */
.card:hover h2 { color: var(--accent); }
/* 카드 위 태그: 그 태그로 가는 단추처럼 칠해진다 (화살표는 2026-11-09 사용자 요청으로 뺌) */
.card .tags span:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* 태그 카드·태그 칩 */
.theme:hover { box-shadow: 0 10px 22px rgba(23, 34, 27, .14), 0 0 0 2px var(--theme, var(--accent)) inset; }
.facet-list a:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }

/* 곡 페이지 단추: 악기·난이도·전체/하이라이트·표시 옵션 */
.tb #inst button:not([aria-pressed="true"]):hover { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.tb #level button:not([aria-pressed="true"]):hover, .tb .listen button:not([aria-pressed="true"]):hover { background: var(--accent-tint); color: var(--accent); }
.opt:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.floatbar #follow-toggle:hover { border-color: var(--accent); color: var(--accent); }
.floatbar select:hover, .lang-sel:hover { border-color: var(--accent); }
#pdf:hover, .dl-in button:hover { box-shadow: 0 4px 12px rgba(31, 107, 69, .35); }

/* 왼쪽 메뉴·목록 '모두 보기' */
.side .side-item:hover { background: var(--accent-tint); color: var(--accent); }
.shelf-more:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .card:hover, .theme:hover, #pdf:hover { transform: none; } }

/* 곡 상세의 태그 (한 줄 소개 아래) */
.song-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.song-tags a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 14px; text-decoration: none; }
.song-tags a::before { content: "#"; margin-right: 2px; color: var(--accent); font-weight: 600; }
.song-tags a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.song-tags a:hover::before { color: #fff; }

/* 호버·포커스 테두리가 잘리지 않게 (2026-11-09 사용자: 100%에서 호버하면 테두리가 잘림): 넘침을 자르는 줄 묶음에 안쪽 여백을 주고 그만큼 바깥으로 */
.shelf-row { padding: 4px 6px 10px; margin: -4px -6px -10px; }
.chip-row { padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
/* 악보 아래로 내려간 꼬리·위 글자가 그림 틀에서 잘리지 않게 (나비야 피아노 맨 아래 줄) */
#sheet svg { overflow: visible; }
/* 연속 듣기 볼륨 시험 (2026-11-10, 로컬 전용 페이지) */
/* 재생하면 악보 따라가기가 화면을 내려 패널이 밀려났다 (2026-11-10 사용자) → 화면 오른쪽 아래에 고정 */
.lp-vol { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.lp-vol.closed > :not(h2) { display: none; }
.lp-vol h2 { cursor: pointer; user-select: none; }
.lp-vol h2 { font-size: 1rem; margin: 0 0 8px; }
.lp-vrow { display: grid; grid-template-columns: 6.5em 1fr 8.5em; align-items: center; gap: 10px; margin: 6px 0; font-size: .92rem; }
.lp-vrow input[type=range] { width: 100%; accent-color: var(--accent); }
.lp-vrow output { font-variant-numeric: tabular-nums; color: var(--muted, #666); }
.lp-vcheck { display: flex; gap: 8px; }
.lp-vsub { margin: 14px 0 6px; font-weight: 600; font-size: .92rem; }
.lp-vbtn { font: inherit; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-tint); color: inherit; cursor: pointer; }
.lp-vratio { margin: 6px 0; font-weight: 600; }
.lp-vacc { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 10px; margin: 6px 0; font-size: .92rem; }
.lp-vseg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lp-vseg button { font: inherit; padding: 6px 0; border-radius: 8px; border: 1px solid var(--line, #ccc); background: none; color: inherit; cursor: pointer; }
.lp-vseg button[aria-pressed=true] { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.lp-vdl { display: flex; gap: 16px; margin: 6px 0 0; }
@media (max-width: 560px) { .lp-vrow { grid-template-columns: 6em 1fr; } .lp-vrow output { grid-column: 2; } }

/* 카드 태그 키보드 포커스 (점검 15번) */
.card .tags span:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 휴대폰: 'Score Forest'를 한 줄로 두면 위쪽 막대가 19px 넘쳤다 → 로고를 조금 작게 (점검 10번) */
@media (max-width: 560px) { .brand { font-size: 17px; gap: 6px; } .brand-ico { width: 24px; height: 24px; } }