/* 멜로디 연습(4단계) — 색은 전부 앱 토큰(라이트·다크 공통). 좌우 여백 12px · 누르는 칸은 모두 40px 이상.
   바는 악보 영역 «아래에 붙는 한 덩어리»(흐름 안)라 악보를 덮지 않는다 — 열려 있는 동안 하단 메뉴(#mobileNav)는 걷는다. */

/* ── 악보 위 층: 원본 이미지 위에 따로 얹는 SVG(자연 픽셀 viewBox). 평소엔 클릭을 통과시키고 마디 칸만 받는다 ── */
#practiceLayer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none}
#practiceLayer.show{display:block}
#practiceLayer .pr-hit{fill:transparent;pointer-events:all;cursor:pointer;-webkit-tap-highlight-color:transparent}
#practiceLayer .pr-tint{fill:transparent;pointer-events:none;transition:fill .12s}
#practiceLayer .pr-tint.in{fill:rgba(var(--accc),.10)}
#practiceLayer .pr-tint.sel{fill:rgba(var(--accc),.20)}
#practiceLayer .pr-tint.cur{fill:rgba(var(--accc),.30)}
#practiceLayer .pr-pill-g{pointer-events:none}
#practiceLayer .pr-pill{fill:var(--sur);stroke:var(--brd2);stroke-width:1px;vector-effect:non-scaling-stroke;opacity:.92}
#practiceLayer .pr-pill.sel{fill:var(--acc);stroke:var(--acc);opacity:1}
#practiceLayer .pr-num{fill:var(--tx);font-weight:700;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums;font-family:inherit;pointer-events:none}
#practiceLayer .pr-num.sel{fill:var(--on-fill)}
/* 진행선 — 늘 붉은색 2px(악보 종이가 라이트·다크 모두 흰색이라 테마와 무관하게 보인다) */
#practiceLayer .pr-line{stroke:#e0301e;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;pointer-events:none;opacity:0}
#practiceLayer .pr-line.on{opacity:1}

/* ── 연습 중에는 하단 메뉴 대신 이 바가 그 자리를 쓴다 ── */
body.pr-open{--navh:0px}
body.pr-open #mobileNav{display:none !important}

/* ── 바: 시안 4차 04·05 — 흰 악보 아래 «투명 유리 한 줄» + 청록 잉크. 칸이 모자란 폰에서만 두 줄로 접힌다 ── */
.pr-bar{flex:none;position:relative;z-index:35;display:flex;flex-direction:column;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--glass,rgba(255,255,255,.62));-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  color:var(--tx);border-top:1px solid var(--glass-edge,var(--brd2));
  box-shadow:inset 0 1px 0 var(--glass-hi,rgba(255,255,255,.9)),0 -8px 24px rgba(11,99,119,.07)}
body.pr-open #pageIndicator{display:none !important}
.pr-bar button{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pr-bar button:focus-visible{outline:2px solid var(--ink2,var(--acc2));outline-offset:2px}
.pr-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:6px;row-gap:4px;min-height:44px;width:100%;max-width:980px;margin:0 auto}
.pr-row.pr-one{flex-wrap:nowrap}
.pr-msg{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--tx2)}

/* 재생 — 청록 잉크로 그린 원 */
.pr-play{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink,var(--acc));background:transparent;color:var(--ink,var(--acc));display:grid;place-items:center;cursor:pointer}
.pr-play.on{background:var(--ink,var(--acc));color:#fff}
.pr-play:active{transform:scale(.94)}
/* ‹ 12 / 32 › */
.pr-nav{flex:none;display:flex;align-items:center}
.pr-nav button,.pr-step button{width:34px;height:40px;border:0;background:transparent;color:var(--ink,var(--acc));font-size:20px;font-weight:500;line-height:1;cursor:pointer;border-radius:8px;user-select:none;-webkit-user-select:none}
.pr-nav button:disabled,.pr-step button:disabled{opacity:.3;cursor:not-allowed}
.pr-nav button:active:not(:disabled),.pr-step button:active:not(:disabled){background:var(--ink-wash,rgba(11,99,119,.08))}
.pr-lab{min-width:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;text-align:center}
.pr-lab b{font-size:15px;font-weight:700;color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-lab small{font-size:10.5px;font-weight:500;color:var(--ink,var(--tx2));white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
/* ♩=72 − + */
.pr-step{flex:none;display:inline-flex;align-items:center;border:1px solid var(--glass-edge,var(--brd));border-radius:10px;height:36px;padding:0 2px}
.pr-step button{height:34px;width:30px;font-size:18px}
.pr-step output{min-width:52px;text-align:center;font-size:13.5px;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 박자 세기 · 반복 · 첫 음 — 잉크 글리프 + 작은 라벨 (켜짐 = 밝은 잉크 + 밑줄, 색 덩어리 금지) */
.pr-tool{flex:none;min-width:48px;height:44px;padding:0 4px;border:0;background:transparent;color:var(--ink,var(--acc));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;border-radius:8px;position:relative}
.pr-tool .g{font-size:13px;font-weight:700;letter-spacing:.5px;line-height:18px;white-space:nowrap}
.pr-tool small{font-size:10px;font-weight:500;white-space:nowrap}
.pr-tool:active{background:var(--ink-wash,rgba(11,99,119,.08))}
.pr-tool[aria-pressed="true"]{color:var(--ink2,var(--acc2))}
.pr-tool[aria-pressed="true"]::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:1.5px;border-radius:1px;background:currentColor}
.pr-bar .au-hp{flex:none}
.pr-x{flex:none;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink,var(--tx));font-size:18px;line-height:1;cursor:pointer}
.pr-x:active{background:var(--ink-wash,rgba(11,99,119,.08))}
@media(hover:hover){.pr-nav button:hover:not(:disabled),.pr-step button:hover:not(:disabled),.pr-tool:hover,.pr-x:hover{background:var(--ink-wash,rgba(11,99,119,.08))}}
/* 진행 중인 마디 띠 — 시안처럼 옅은 청록 */
/* 넓은 화면(PC·패드) — 바 안쪽을 가운데 모아 두 줄이 길게 늘어지지 않게 */
@media(min-width:681px){ .pr-bar{padding-left:16px;padding-right:16px} .pr-row{column-gap:10px} }
@media print{ .pr-bar,#practiceLayer{display:none !important} }