/* 보면대 site.css 교체본 (2026-10-10) — 시안: 보면대 화면 시안.dc.html
   [기능] 표시 규칙은 동작에 필요하니 의미를 유지할 것.
   기존 마크업 그대로 적용됨. 커스텀 재생기·악보 접기·연주 모드는 시안의 마크업 추가가 필요. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap");

:root {
  --ink: #16181D; --ink-2: #3A3E45; --muted: #50555E;
  --line: #D9D7D0; --line-2: #E6E4DE; --line-btn: #CFCCC4;
  --bg: #F6F5F1; --paper: #FFFFFF;
  --accent: #1F4A8E; --accent-dk: #163866; --accent-tint: #EAF0F8;
  --play: #C8401C;
  --ad-a: #ECEBE6; --ad-b: #E3E1DB;
  --r: 10px; --pad: 16px;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ECEDEF; --ink-2: #C9CCD2; --muted: #A9ADB5;
    --line: #2E3238; --line-2: #262A2F; --line-btn: #3A3E45;
    --bg: #15171B; --paper: #1D2025;
    --accent: #7FA3DB; --accent-dk: #5D82BD; --accent-tint: #1F2A3C;
    --ad-a: #23262B; --ad-b: #1E2125;
  }
}
* { 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; }
.brand::before { content: ""; width: 28px; height: 28px; border-radius: 4px; flex: none;
  background: var(--accent) repeating-linear-gradient(transparent 0 4px, #fff 4px 5.5px) 6px 4px / 16px 20px no-repeat; }
.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; }
.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); }
@media (prefers-color-scheme: dark) { #pdf, .dl .primary { color: #10131A; } }

/* [기능] 악보 종이: 다크 모드에서도 흰 바탕 유지 (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; }
  .workspace > .controls { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
  .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%; }
  .sheet { padding: 10px 6px; margin-inline: -8px; }
  .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); }
@media (prefers-color-scheme: dark) {
  .pl-play::before { border-left-color: #10131A; }
  .pl-play.playing::before { background: linear-gradient(90deg, #10131A 0 5px, transparent 5px 9px, #10131A 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-slow { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); 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; }

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

/* 왼쪽 묶음 도구: 악보 따라가기(켬/끔), 맨 위로, 맨 아래로 */
.nav-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-tools button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-btn); border-radius: 999px; background: var(--paper); font-size: 14px; }
#follow-toggle::before { content: "○ "; color: var(--muted); }
#follow-toggle[aria-pressed="true"]::before { content: "● "; color: var(--accent); }
/* PC: 왼쪽 묶음이 화면보다 길어도 도구 줄은 늘 보이게 묶음 아래쪽에 붙인다 */
@media (min-width: 1024px) {
  .workspace > .controls .nav-tools { position: sticky; bottom: 0; z-index: 1; padding: 10px 0 2px; background: var(--bg); box-shadow: 0 -8px 8px -8px rgba(0,0,0,.25); }
}

/* 연속 듣기 (/listen/) */
.listen .lp { position: sticky; top: 0; z-index: 2; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.listen .lp-now { display: flex; flex-direction: column; gap: 2px; min-height: 52px; }
.listen .lp-now b { font-size: 19px; line-height: 1.35; }
.listen .lp-now span { color: var(--muted); }
.listen #lp-seek { width: 100%; margin: 12px 0 2px; accent-color: var(--play); }
.listen .lp-time { display: flex; justify-content: space-between; font: 500 13px var(--mono); color: var(--muted); }
.listen .lp-btns { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.listen .lp-btns button { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line-btn); background: var(--paper); font-size: 22px; }
.listen .lp-btns .main { width: 76px; height: 76px; background: var(--play); border-color: var(--play); color: #fff; font-size: 28px; }
.listen .lp-list { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: t; }
.listen .lp-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-2); counter-increment: t; }
.listen .lp-list li 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; }
.listen .lp-list li button b::before { content: counter(t) ". "; color: var(--muted); font-weight: 500; }
.listen .lp-list li button span { color: var(--muted); font-size: 14px; }
.listen .lp-list li.on { background: var(--accent-tint); }
.listen .lp-list li.on b { color: var(--accent); }
.listen .lp-list li a { padding: 12px; font-size: 14px; }