/* 피아노 연습 — 소재: 흑건(주 단추)·상아 건반(보조)·금색 페달(둥근 단추)·오선지 종이(창·목록). design.md 참고 */
.piano { --ebony: #17161b; --ebony2: #2a2930; --ivory: #f4f5f7; --ivory2: #e9ebef; --ivory3: #d9dde3;
  --gold: #c8a04c; --gold2: #f1dc93; --gold3: #8a6a22; --felt: #c8323a; --paper: #ffffff; --pline: #d5d9df;
  --serif: var(--font); }   /* 우아한 세리프는 긴 곡 이름에서 흉해서 뺌(사장님 10/7 "글씨는 왜이러며") */
.piano .top h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; }
.piano.sheetapp .top h1 { font-size: clamp(26px, 6.5vw, 40px); line-height: 1.15; word-break: keep-all; }
.piano .top h1::before { background: var(--ebony); }
.piano .promise li { color: var(--ebony); border-color: var(--ivory3); background: var(--ivory); }

/* 사이트 공통 style.css 와 겹치는 이름 되돌리기(.btn 폭 100%·알약·font-weight 400, .stars 숨김, .card 폭) — 사이트에 올린 뒤 폰에서 단추가 세로로 늘어졌다(10/7) */
.piano .btn, .piano .sbar .btn, .piano .acts .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: none; border-radius: 10px; font-weight: 800; text-decoration: none; }
.piano .btn.wide { width: 100%; }
.piano a.songcard, .piano a.songcard:hover { text-decoration: none; color: var(--ebony); }
.piano .btn:hover { transform: none; }
.piano .btn:active { transform: translateY(3px) scale(.97); }
.piano .ebony:active { transform: translateY(4px); }
.piano .stars { display: block; }
.piano .card { max-width: min(92vw, 440px); }
.piano b, .piano h1, .piano h2 { font-weight: 800; }
.piano .card b { font-weight: 800; }

/* ---------- 단추: 흑건 / 상아 */
.piano .btn, .piano .mode, .piano .stagebtn, .piano .songcard, .piano .lvcard {
  cursor: pointer; border: 0; border-radius: 10px; font-weight: 800; line-height: 1.15;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, filter .15s; -webkit-tap-highlight-color: transparent; }
.piano .btn:hover, .piano .mode:hover, .piano .stagebtn:hover, .piano .songcard:hover, .piano .lvcard:hover { filter: brightness(1.05); }
.piano .btn { padding: 13px 22px; font-size: 19px; min-width: 120px; }
.piano .btn.small { padding: 8px 14px; font-size: 15px; min-width: 0; }
.piano .btn.wide { width: 100%; }
.piano a.songcard, .piano a.songcard:hover { text-decoration: none; color: var(--ebony); }
.piano .ebony { color: var(--ivory); background: linear-gradient(180deg, #4a4952 0%, #212026 16%, #141318 100%);
  box-shadow: 0 5px 0 #000, inset 0 2px 0 rgba(255,255,255,.26), inset 0 -4px 0 rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06); }
.piano .ebony:active { transform: translateY(4px); box-shadow: 0 1px 0 #000, inset 0 2px 0 rgba(255,255,255,.26), inset 0 -4px 0 rgba(0,0,0,.55); transition-duration: .04s; }
.piano .ivory { color: var(--ebony); background: linear-gradient(180deg, #ffffff 0%, #f4f5f7 55%, #eceef2 100%);
  box-shadow: 0 4px 0 #c3c8d0, inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20,25,35,.10); }
.piano .ivory:active { transform: translateY(3px); box-shadow: 0 1px 0 #c3c8d0, inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20,25,35,.10); transition-duration: .04s; }
.piano .ghost { background: transparent; border: 1px solid var(--ivory3); color: var(--muted); border-radius: 10px; padding: 10px 16px; cursor: pointer; }
.piano .ghost.wide { width: 100%; margin-top: 18px; }

/* 금색 페달(둥근 단추) */
.piano .pedal { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; position: relative; flex: none; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fbeaa8 0%, #d9b45e 35%, #a6812d 75%, #6f5218 100%);
  box-shadow: 0 4px 0 #4e3a10, inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.25); }
.piano .pedal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, transparent 38%, rgba(255,255,255,.35) 46%, transparent 54%); }
.piano .pedal svg { width: 24px; height: 24px; position: absolute; left: 10px; top: 10px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.piano .pedal:active, .piano .pedal.down { transform: translateY(3px); box-shadow: 0 1px 0 #4e3a10, inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.25); }
.piano .pedal.off { opacity: .6; }
.piano .pedal.off::after { content: ''; position: absolute; left: 24%; right: 24%; top: 50%; height: 2px; margin-top: -1px; background: #fff; border-radius: 1px; transform: rotate(-40deg); }
.piano .pedal.txt { font: 800 14px/1 var(--font); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }

/* ---------- 오선지 종이(창·목록) */
.piano .paper { background: var(--paper); border-radius: 14px; padding: 22px 18px 18px; margin-top: 18px; position: relative;
  box-shadow: 0 1px 0 #fff inset, 0 10px 30px rgba(20,25,40,.08), 0 0 0 1px #e6e8ec; overflow: hidden; }
.piano .paper::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 29px; opacity: .9; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 6px, var(--pline) 6px 7px); }
.piano .lhead { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 14px; }
/* 접히는 소제목(사장님 10/7 "목록 좌르륵 뜨는거 접어줘 소제목 터치하면 펼쳐지게") */
.piano .paper.fold { padding-bottom: 12px; }
.piano .paper.fold .lhead { width: 100%; background: none; border: 0; padding: 0; margin: 8px 0 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.piano .paper.fold .lhead::after { content: '▾'; font-size: 20px; color: var(--gold3); margin-left: 2px; transition: transform .2s; }
.piano .paper.fold:not(.open) .lhead::after { transform: rotate(-90deg); }
.piano .paper.fold .fbody { display: none; margin-top: 14px; }
.piano .paper.fold.open .fbody { display: block; }
.piano .lhead b { font-family: var(--font); font-weight: 800; font-size: 24px; }
.piano .prog { color: var(--muted); font-size: 15px; font-weight: 700; margin-left: auto; }

/* 홈 네 칸 */
.piano .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.piano .mode { display: grid; justify-items: start; gap: 4px; padding: 20px 20px 18px; text-align: left; }
.piano .mode b { font-family: var(--font); font-weight: 800; font-size: 25px; line-height: 1.1; }
.piano .mode i { font-style: normal; font-size: 14px; font-weight: 700; opacity: .7; }
.piano .mode.ebony i { opacity: .75; }
.piano a.mode.wide { display: grid; width: 100%; margin-top: 18px; text-decoration: none; color: var(--ebony); box-sizing: border-box; }   /* 피아노 악보 칸(사장님 10/7 "버튼 더 크게") */

/* 곡 카드 */
.piano .songgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.piano .songcard { display: grid; gap: 4px; padding: 12px 12px 10px; text-align: left; position: relative; min-height: 86px; }
.piano .songcard .n { font-size: 13px; color: var(--muted); font-weight: 800; }
.piano .songcard .t { font-size: 17px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.piano .songcard .st { font-size: 13px; letter-spacing: 1px; color: var(--gold3); }
.piano .songcard .st i { font-style: normal; color: #cdd1d8; }
.piano .songcard.lock { opacity: .55; }
.piano .songcard.lock::after { content: ''; position: absolute; right: 10px; top: 10px; width: 14px; height: 18px; border-radius: 3px; background: #8a8f98;
  box-shadow: 0 -7px 0 -2px transparent; }
.piano .songcard.lock::before { content: ''; position: absolute; right: 12px; top: 3px; width: 6px; height: 10px; border: 2px solid #8a8f98; border-bottom: 0; border-radius: 6px 6px 0 0; }
.piano .songcard.done .t::after { content: ' ✔'; color: var(--felt); }

/* 단계 카드(계이름·악보) */
.piano .lvgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.piano .lvcard { display: grid; gap: 3px; padding: 11px 10px 9px; text-align: left; min-height: 74px; position: relative; }
.piano .lvcard .n { font-size: 13px; color: var(--muted); font-weight: 800; }
.piano .lvcard .t { font-size: 15px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.piano .lvcard .st { font-size: 13px; letter-spacing: 1px; color: var(--gold3); }
.piano .lvcard .st i { font-style: normal; color: #cdd1d8; }
.piano .lvcard.lock { opacity: .55; }

/* 곡 하나 화면 */
.piano .kbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.piano .kbar b { font-family: var(--font); font-weight: 800; font-size: clamp(20px, 4.5vw, 28px); line-height: 1.15; }
.piano .lv { color: var(--muted); font-weight: 800; font-size: 14px; }
.piano .stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.piano .stagebtn { display: grid; gap: 4px; padding: 16px 16px 14px; text-align: left; }
.piano .stagebtn .n { font-size: 13px; opacity: .65; }
.piano .stagebtn .t { font-size: 20px; }
.piano .stagebtn .st { font-size: 15px; letter-spacing: 2px; color: var(--gold2); }
.piano .stagebtn .st i { font-style: normal; color: #4a4952; }   /* 빈 별: 흑건 위 짙은 회색 */
.piano .stagebtn.ivory .st i { color: #cdd1d8; }   /* 빈 별: 흰 건반 위 옅은 회색(누런빛 빼기) */
.piano .stagebtn.ivory .st { color: var(--gold3); }
.piano .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* ---------- 연주 화면 */
.piano #stage { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr auto; background: #0f0e12; color: var(--ivory);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.piano .sbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(180deg, #2a2930, #1b1a20); border-bottom: 1px solid #000; min-height: 56px; flex-wrap: nowrap; }
.piano .sbar b { font-family: var(--font); font-weight: 800; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.piano .sprog { flex: 1 1 60px; height: 8px; border-radius: 4px; background: #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); overflow: hidden; min-width: 40px; }
.piano .sprog span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold3), var(--gold2)); transition: width .15s; }
.piano .sinfo { font-weight: 800; font-size: 16px; white-space: nowrap; color: var(--gold2); min-width: 2em; text-align: right; }
.piano .stools { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.piano .stools .btn.small { padding: 7px 10px; font-size: 14px; }
.piano .stools .pedal { width: 40px; height: 40px; }
.piano .stools .pedal svg { width: 22px; height: 22px; left: 9px; top: 9px; }
.piano .stools .num { font-weight: 800; font-size: 15px; min-width: 2.2em; text-align: center; color: var(--ivory); }
.piano .sview { position: relative; overflow: hidden; background: linear-gradient(180deg, #17161b 0%, #1d1c23 100%); }
.piano .sview.paperbg { background: var(--paper); color: var(--ebony); }
.piano #fall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.piano #staffBox { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; }
.piano #staffBox svg { width: min(100%, 560px); height: auto; max-height: 100%; }
.piano #earBox { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; }
.piano .earq { font-family: var(--serif); font-size: clamp(28px, 6vw, 54px); color: var(--ivory); text-align: center; line-height: 1.1; }
.piano .earq b { display: block; font-weight: 700; font-size: clamp(64px, 14vh, 120px); line-height: 1; }
.piano .earq small { display: block; font-family: var(--font); font-size: 16px; color: var(--gold2); margin-top: 10px; }
.piano #judge { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; font-family: var(--serif); font-size: clamp(64px, 13vw, 150px); line-height: 1; color: #3fe07a; -webkit-text-stroke: 3px #0f3a1f; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.45); opacity: 0; z-index: 3; }
.piano #judge.pop { animation: pjudge .75s ease-out; }
.piano #judge.bad { color: #ff5a4e; -webkit-text-stroke: 3px #4a0f0a; }
@keyframes pjudge { 0% { opacity: 0; transform: translateY(16px) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1.12); } 30% { transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.piano #count { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(60px, 16vh, 140px); color: var(--gold2); text-shadow: 0 3px 0 rgba(0,0,0,.6); pointer-events: none; }

/* 건반 */
.piano .kbwrap { overflow: hidden; background: #0a0a0c; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 3px solid #3a2a0a; box-shadow: inset 0 6px 10px rgba(0,0,0,.8); }
.piano .kb { position: relative; will-change: transform; height: clamp(120px, 30vh, 230px); touch-action: none; user-select: none; -webkit-user-select: none; }
.piano .wk, .piano .bk { position: absolute; top: 0; box-sizing: border-box; cursor: pointer; }
.piano .wk { height: 100%; background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 78%, #e3e6eb 100%); border: 1px solid #6f747d; border-top: 0; border-radius: 0 0 6px 6px;
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.07), inset -2px 0 0 rgba(0,0,0,.05); transition: background .06s, transform .05s; }
.piano .wk.on { background: linear-gradient(180deg, #fff2c2, #f3d98a 80%, #d9bd66); transform: translateY(2px); box-shadow: inset 0 -5px 0 rgba(0,0,0,.08); }
.piano .bk { height: 62%; z-index: 2; background: linear-gradient(180deg, #4d4c55 0%, #1d1c22 10%, #0f0e12 100%); border-radius: 0 0 5px 5px;
  box-shadow: 0 4px 0 #000, inset 0 -9px 0 rgba(255,255,255,.08), inset 2px 0 0 rgba(255,255,255,.08), inset -2px 0 0 rgba(0,0,0,.6); transition: background .06s, transform .05s; }
.piano .bk.on { background: linear-gradient(180deg, #8a7430, #4a3c12 60%, #2a2208); transform: translateY(3px); box-shadow: 0 1px 0 #000, inset 0 -6px 0 rgba(255,255,255,.08); }
.piano .wk.hint { background: linear-gradient(180deg, #fff6d6, #ffe3a0 80%, #e8c76e); box-shadow: inset 0 0 0 3px var(--gold), inset 0 -7px 0 rgba(0,0,0,.07); }
.piano .bk.hint { background: linear-gradient(180deg, #a68a3a, #6b5618 70%, #4a3b10); box-shadow: 0 4px 0 #000, inset 0 0 0 3px var(--gold2); }
.piano .wk.hintL { background: linear-gradient(180deg, #e7f1ff, #bcd6fb 80%, #9bbfe9); box-shadow: inset 0 0 0 3px #4d8fe0, inset 0 -7px 0 rgba(0,0,0,.07); }
.piano .bk.hintL { background: linear-gradient(180deg, #3e6fae, #24466f 70%, #182f4a); box-shadow: 0 4px 0 #000, inset 0 0 0 3px #86b6f3; }
.piano .wk.bad { background: linear-gradient(180deg, #ffd9d9, #f3a3a3 80%, #d97b7b); }
.piano .bk.bad { background: linear-gradient(180deg, #8a3030, #4a1212 60%, #2a0808); }
.piano .wk .lb { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-weight: 800; font-size: clamp(10px, 1.6vw, 15px); color: #4d525b; pointer-events: none; }
.piano .wk .kk { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 11px; color: #9ea3ac; pointer-events: none; font-weight: 700; }
.piano .bk .lb { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-weight: 800; font-size: clamp(9px, 1.3vw, 12px); color: #c4c8cf; pointer-events: none; }
.piano .bk .kk { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: 10px; color: #858a93; pointer-events: none; font-weight: 700; }
.piano .kb.nolabel .lb { display: none; }
.piano .kb.tiny .bk .lb, .piano .kb.tiny .kk { display: none; }
.piano .kb.tiny .wk .lb { font-size: 9px; bottom: 4px; letter-spacing: -.04em; }
.piano .kb.narrow .bk .lb { font-size: 9px; }
.piano #tRot { display: none; }
@media (orientation: portrait) and (max-width: 600px) { .piano #tRot.show { display: inline-block; } }
.piano .kb.nokey .kk { display: none; }

/* 결과·엔딩 */
.piano #result, .piano #ending { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,10,14,.55); z-index: 5; padding: 16px; }
.piano .card { width: min(92vw, 440px); text-align: center; display: grid; justify-items: center; gap: 6px; padding: 30px 20px 22px; color: var(--ebony); animation: pcard .2s ease-out; }
@keyframes pcard { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.piano .stars { font-size: 54px; line-height: 1; color: var(--gold); letter-spacing: 6px; }
.piano .stars i { font-style: normal; color: #d9dce2; }
.piano .card b { font-family: var(--serif); font-size: 34px; }
.piano .card span { color: var(--muted); font-weight: 700; font-size: 16px; }
.piano .card.end i { font-style: normal; font-family: var(--serif); font-size: 18px; color: var(--felt); letter-spacing: .2em; }
.piano .card.end b { font-size: 30px; }

/* 폰 세로 */
@media (max-width: 520px) {
  .piano .modes { grid-template-columns: 1fr; }
  .piano .mode { padding: 16px 18px 14px; }
  .piano .mode b { font-size: 24px; }
  .piano .songgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piano .lvgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .piano .lvcard { padding: 10px 8px 8px; }
  .piano .lvcard .t { font-size: 14px; }
  .piano .songcard { padding: 10px 10px 8px; }
  .piano .songcard .t { font-size: 16px; }
  .piano .stages { grid-template-columns: 1fr; }
  .piano .sbar b { display: none; }
  .piano .sbar { gap: 8px; padding: 6px 8px; flex-wrap: wrap; }
  .piano .stools { display: contents; }
  .piano .stools .btn.small { padding: 6px 9px; font-size: 13px; }
  .piano .sbar .btn.small { padding: 6px 10px; font-size: 14px; }
  .piano .wk .kk, .piano .bk .kk { display: none; }
  .piano .kb { height: clamp(140px, 30vh, 200px); }
}
/* 폰 가로: 높이가 낮다 — 상단바 얇게, 건반은 화면의 40% */
@media (max-height: 480px) {
  .piano .sbar { min-height: 44px; padding: 4px 8px; }
  .piano .sbar b { font-size: 16px; }
  .piano .sbar .btn.small { padding: 5px 10px; font-size: 13px; }
  .piano .pedal, .piano .stools .pedal { width: 36px; height: 36px; }
  .piano .pedal svg, .piano .stools .pedal svg { width: 20px; height: 20px; left: 8px; top: 8px; }
  .piano .kb { height: 40vh; }
  .piano .kbwrap { padding: 4px 6px 6px; }
  .piano .wk .lb { bottom: 4px; font-size: 11px; }
  .piano .wk .kk { bottom: 18px; font-size: 10px; }
  .piano .card { padding: 14px 16px 12px; gap: 2px; }
  .piano .stars { font-size: 38px; }
  .piano .card b { font-size: 24px; }
  .piano .card .acts { margin-top: 8px; }
  .piano .card .btn { padding: 8px 16px; font-size: 16px; min-width: 96px; }
  .piano #judge { top: 24%; font-size: clamp(48px, 20vh, 96px); }
}

/* ---------- 피아노 악보 페이지 */
.piano .paper.score { padding: 14px 10px 10px; }
.piano .paper.score::before { display: none; }
.piano .paper.score svg { width: 100%; height: auto; display: block; }
.piano .kbar .spacer { flex: 1; }
.piano .acts a.btn { text-decoration: none; display: inline-block; }
@media print {
  .piano .top, .piano .kbar, .piano .acts, .piano #shHome { display: none !important; }
  .piano .paper.score { box-shadow: none; background: #fff; padding: 0; margin: 0; }
  body { background: #fff; }
}

/* 10/7 사장님 "누리끼리한 저 색말고": 크림·누런 색을 전부 맑은 흰색·옅은 회색으로(흰 건반처럼). 금색은 페달·별에만 */
/* ===================== 10/7 홈 새 디자인(사장님 "디자인 좀 세련되게 바꿔보자")
   흑단 래커 피아노 뚜껑 머리판 + 빨간 펠트 줄 + 건반 띠, 금색 선 아이콘 네 칸, 목록 셋을 오선지 한 장에, 악보 칸 오른쪽에 악보 그림 */
.piano .top.hero { position: relative; margin: 6px 0 20px; border-radius: 22px; overflow: hidden; color: var(--ivory);
  background: radial-gradient(120% 100% at 88% -10%, rgba(255,255,255,.10), transparent 55%), linear-gradient(180deg, #2b2a31 0%, #17161b 62%, #0e0d11 100%);
  box-shadow: 0 22px 44px -18px rgba(10,12,20,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.piano:has(#pHome[hidden]) .top.hero { display: none; }
.piano:has(#shHome[hidden]) .top.hero { display: none; }   /* 악보 앱(로컬)도 곡을 열면 머리판을 접는다 */
/* 곡별 악보 페이지: 곡 이름 h1 이 든 작은 머리판(검색용 제목이라 숨기지 않는다) */
.piano .top.hero.mini { margin-bottom: 16px; }
.piano .top.hero.mini .hero-in { padding: 24px 26px 20px; }
.piano .top.hero.mini h1 { font-size: clamp(26px, 5.4vw, 42px); line-height: 1.15; margin: 0; word-break: keep-all; }
.piano .top.hero.mini h1::before { margin-bottom: 14px; width: 40px; height: 4px; }
.piano .top.hero.mini .hero-keys { height: 52px; background-size: auto 78px; background-position: left bottom; }   /* 띠가 낮아도 건반은 큰 머리판과 같은 크기, 아래쪽만 보이게(촘촘해 보였다) */   /* 큰 머리판은 홈에서만(곡 단계 화면에선 위를 다 먹었다) */
.piano .hero-in { position: relative; padding: 36px 34px 30px; }
.piano .hero-in::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.07) 52%, transparent 60%); }   /* 래커 반사 */
.piano .top.hero h1 { color: #ffffff; font-size: clamp(46px, 9.5vw, 80px); line-height: 1; margin: 0 0 20px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.piano .top.hero h1::before { background: var(--felt); width: 48px; height: 5px; margin-bottom: 20px; box-shadow: 0 0 12px rgba(200,50,58,.45); }
.piano .top.hero .promise { margin: 0; gap: 8px; }
.piano .top.hero .promise li { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.32); color: #fff; font-weight: 700; }
.piano .hero-keys { position: relative; height: 78px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='100' viewBox='0 0 168 100'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfe2e7'/%3E%3Cstop offset='.12' stop-color='%23ffffff'/%3E%3Cstop offset='.9' stop-color='%23f5f6f8'/%3E%3Cstop offset='1' stop-color='%23e1e4e9'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23060507'/%3E%3Cstop offset='.8' stop-color='%2325242b'/%3E%3Cstop offset='.93' stop-color='%233b3a42'/%3E%3Cstop offset='1' stop-color='%23141318'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='168' height='100' fill='%23a7acb5'/%3E%3Crect x='0' y='0' width='23' height='100' rx='2.5' fill='url%28%23w%29'/%3E%3Crect x='24' y='0' width='23' height='100' rx='2.5' fill='url%28%23w%29'/%3E%3Crect x='48' y='0' width='23' height='100' rx='2.5' fill='url%28%23w%29'/%3E%3Crect x='72' y='0' width='23' height='100' rx='2.5' fill='url%28%23w%29'/%3E%3Crect x='96' y='0' width='23' height='100' rx='2.5' fill='url%28%23w%29'/%3E%3Crect x='120' y='0' width='23' height='100' rx='2.5' fill='url%28%23w%29'/%3E%3Crect x='144' y='0' width='23' height='100' rx='2.5' fill='url%28%23w%29'/%3E%3Crect x='15' y='0' width='14' height='60' rx='2' fill='url%28%23b%29'/%3E%3Crect x='18' y='2' width='2.4' height='50' rx='1.2' fill='%23fff' opacity='.13'/%3E%3Crect x='42' y='0' width='14' height='60' rx='2' fill='url%28%23b%29'/%3E%3Crect x='45' y='2' width='2.4' height='50' rx='1.2' fill='%23fff' opacity='.13'/%3E%3Crect x='86.5' y='0' width='14' height='60' rx='2' fill='url%28%23b%29'/%3E%3Crect x='89.5' y='2' width='2.4' height='50' rx='1.2' fill='%23fff' opacity='.13'/%3E%3Crect x='112' y='0' width='14' height='60' rx='2' fill='url%28%23b%29'/%3E%3Crect x='115' y='2' width='2.4' height='50' rx='1.2' fill='%23fff' opacity='.13'/%3E%3Crect x='138' y='0' width='14' height='60' rx='2' fill='url%28%23b%29'/%3E%3Crect x='141' y='2' width='2.4' height='50' rx='1.2' fill='%23fff' opacity='.13'/%3E%3C/svg%3E") repeat-x left top / auto 100%; }
.piano .hero-keys::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 1;
  background: linear-gradient(180deg, #e04a4f, var(--felt) 60%, #7d1a20); box-shadow: 0 3px 6px rgba(0,0,0,.45); }   /* 해머 펠트 줄 */
.piano .hero-keys::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(180deg, transparent, rgba(20,15,5,.18)); }

/* 네 칸 */
.piano .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.piano .mode { align-content: start; gap: 6px; min-height: 158px; padding: 20px 18px 18px; border-radius: 16px; }
.piano .mode .ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; margin-bottom: 12px; border: 1.5px solid; }
.piano .mode .ic svg { width: 28px; height: 28px; }
.piano .mode.ebony .ic { color: #fff; border-color: rgba(255,255,255,.38); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02)); }
.piano .mode.ivory .ic { color: var(--ebony); border-color: #dcdfe5; background: radial-gradient(circle at 35% 30%, #ffffff, #f1f3f6); }
.piano .mode b { font-size: 24px; }
.piano .mode i { font-size: 15px; line-height: 1.4; word-break: keep-all; }

/* 목록 셋: 오선지 종이 한 장 */
.piano .lists { position: relative; margin-top: 20px; padding-top: 22px; background: var(--paper); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 0 #fff inset, 0 14px 34px -14px rgba(20,25,40,.20), 0 0 0 1px #e6e8ec; }
.piano .lists::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; opacity: .9;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, var(--pline) 4px 5px); }
.piano .lists .paper.fold { margin: 0; padding: 0 22px; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.piano .lists .paper.fold::before { display: none; }
.piano .lists .paper.fold + .paper.fold { border-top: 1px solid #eceef1; }
.piano .lists .paper.fold .lhead { margin: 0; padding: 18px 0; align-items: center; }
.piano .lists .lhead b { font-size: 22px; }
.piano .lists .prog { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: #f1f2f5; color: #5d626b; font-size: 14px; }
.piano .lists .paper.fold .lhead::after { content: ''; width: 9px; height: 9px; margin: 0 4px 0 6px; border-right: 2.5px solid #8a8f98; border-bottom: 2.5px solid #8a8f98;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s; font-size: 0; }
.piano .lists .paper.fold:not(.open) .lhead::after { transform: rotate(-45deg); }
.piano .lists .paper.fold.open .fbody { margin: 0 0 20px; }

/* 피아노 악보 칸 */
.piano a.mode.wide#pSheetLink { grid-template-columns: 1fr auto; grid-template-areas: 'b art' 'i art'; align-items: center; min-height: 0; padding: 22px 24px; margin-top: 20px; border-radius: 16px; }
.piano #pSheetLink b { grid-area: b; } .piano #pSheetLink i { grid-area: i; }
.piano #pSheetLink .staffart { grid-area: art; width: 160px; }
.piano #pSheetLink .staffart svg { display: block; width: 100%; height: auto; overflow: visible; }

/* 진도 지우기: 작은 글자 */
.piano #pReset { display: block; width: auto; margin: 26px auto 6px; border: 0; background: none; padding: 6px 10px; font-size: 14px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .piano .modes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .piano .mode { min-height: 132px; padding: 16px 14px 14px; }
  .piano .mode .ic { width: 42px; height: 42px; margin-bottom: 8px; } .piano .mode .ic svg { width: 24px; height: 24px; }
  .piano .mode b { font-size: 21px; } .piano .mode i { font-size: 13.5px; }
  .piano .hero-in { padding: 26px 22px 22px; } .piano .hero-keys { height: 60px; }
  .piano .lists .paper.fold { padding: 0 16px; } .piano .lists .lhead b { font-size: 20px; }
  .piano #pSheetLink .staffart { width: 108px; } .piano a.mode.wide#pSheetLink { padding: 18px 16px; }
}
@media (max-width: 520px) {   /* 폰: 사이트 바깥 상자(.pm-panel 14px)와 안쪽(.pm-page 16px) 여백이 겹쳐 칸이 좁았다 */
  .piano.pm-panel { padding-left: 8px; padding-right: 8px; } .piano .pm-page { padding-left: 2px; padding-right: 2px; }
  .piano #pSheetLink .staffart { width: 82px; }
}