/* 컴퓨터 화면 전체 110% (K 요청 2026-11-12 "브라우저 확대 110%가 딱 보기 좋다") — 휴대폰·태블릿은 그대로 */
@media (min-width:1100px){ html{zoom:1.1} }

/* 다크 모드 (K 요청 2026-11-12) — 모든 페이지 공통. 메인 색은 노랑, 악보 상자(.sheet)는 흰 종이 그대로 */
html[data-theme="dark"]{
  --bg:#16181D; --ink:#ECEEF2; --muted:#A2A9B5; --line:#323843; --tile:#1F232A;
  --accent:#F2C230; --accent-soft:rgba(242,194,48,.14); --accent-shadow:rgba(242,194,48,.28); --accent-glow:rgba(242,194,48,.18);
  --hard:#FF7A50; --hard-soft:rgba(255,122,80,.35); --hard-bg:rgba(255,122,80,.14); --star:#F2C230; --star-off:#3A404B;
  color-scheme:dark;
}
/* 카드 오른쪽 위 회색 기호 · 흐린 키 버튼 */
html[data-theme="dark"] .stage .sym, html[data-theme="dark"] .stage .pic{color:#5E6672}
html[data-theme="dark"] .stage[aria-pressed="true"] .sym, html[data-theme="dark"] .stage[aria-pressed="true"] .pic{color:var(--accent)}
html[data-theme="dark"] .setbox.off #keys button, html[data-theme="dark"] .setbox.off #keys button .ks{color:#565D69}

/* 메뉴에서 지금 페이지는 노랑, 스위치 동그라미는 밝게 (꺼져 있어도 보이게) */
html[data-theme="dark"] .nav a[aria-current="page"]{background:var(--accent);color:#16181D}
html[data-theme="dark"] .check input::after, html[data-theme="dark"] .sw input::after{background:#E4E7EC}
html[data-theme="dark"] .check input:checked::after, html[data-theme="dark"] .sw input:checked::after{background:#16181D}

/* 악보 상자 = 흰 종이 (오선 · 답 칸 · 버튼까지). 강조색은 흰 바탕에서 잘 보이는 진한 노랑 */
html[data-theme="dark"] .sheet{
  --bg:#FFFFFF; --ink:#18202E; --muted:#5B6372; --line:#DCE1E8; --tile:#F3F5F8;
  --accent:#A87A00; --accent-soft:#FFF4D4; --accent-shadow:rgba(168,122,0,.28); --accent-glow:rgba(168,122,0,.16);
  --hard:#E8461F; --hard-soft:#FFD2C6; --hard-bg:#FFF1EC; --star:#FFB400; --star-off:#DDE2EA;
  color-scheme:light; color:var(--ink); background:var(--bg); border-color:transparent;
}
html[data-theme="dark"] .hard .sheet{--accent:#E8461F; --accent-soft:#FFF1EC; --accent-shadow:rgba(232,70,31,.28); --accent-glow:rgba(232,70,31,.16)}

/* 라이트 · 다크 버튼 (맨 위 메뉴 오른쪽) */
.theme-btn{order:3;flex:none;width:46px;height:46px;margin-left:10px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.theme-btn svg{width:22px;height:22px;fill:currentColor}
html[data-theme="dark"] .theme-btn{color:var(--accent)}
@media (max-width:720px){ .band .nav{order:4} .theme-btn{order:2;width:44px;height:44px} }   /* 휴대폰: 로고 줄 오른쪽 */

/* 다크: 악보 상자 안 큰 버튼(정답 듣기 등)은 밝은 노랑 + 어두운 글자 (K 2026-11-12 "색 이상해") */
html[data-theme="dark"] .sheet .btn.primary{background:#F2C230;border-color:#F2C230;color:#16181D;box-shadow:0 8px 18px rgba(242,194,48,.30)}
html[data-theme="dark"] .hard .sheet .btn.primary{background:#E8461F;border-color:#E8461F;color:#FFFFFF;box-shadow:0 8px 18px rgba(232,70,31,.28)}
/* 다크: 로고도 노랑 */
html[data-theme="dark"] .logo img{content:url("logo-dark.png")}

/* 맨 아래 꼬리말: 운영자 · 문의 · 개인정보처리방침 (K 요청 2026-11-12, 애드센스 준비) — 모든 페이지 공통 */
.site-foot{border-top:1px solid var(--line)}
.site-foot .in{max-width:1080px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.site-foot a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.site-foot a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 마스터 볼륨 (K 요청 2026-11-13): 맨 위 메뉴 아래 오른쪽, 즉흥연주 · 화성학 · 메트로놈 밑 */
.navcol{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0}
.vol-row{display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:0 6px 0 4px;max-width:100%}
.vol-btn{flex:none;width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.vol-btn svg{width:22px;height:22px;fill:currentColor}
.vol-row input{flex:1;min-width:0;accent-color:var(--accent);height:24px;margin:0}
.vol-num{flex:none;font-size:16px;min-width:2em;margin-left:-4px;text-align:left;color:var(--muted)}   /* 숫자를 막대 쪽에 붙임 (K 요청 2026-11-13) */
/* 레벨업 소리 ON/OFF (K 요청 2026-11-13) — 볼륨 숫자 오른쪽 */
.lvsnd-btn{flex:none;margin-left:12px;position:relative;height:36px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer}
.lvsnd-btn b{margin-left:6px;color:var(--muted)}
.lvsnd-btn[aria-pressed="true"] b{color:var(--accent)}
@media (max-width:720px){ .navcol{order:4;width:100%} .navcol .nav{order:0} .vol-row{width:100%!important} }   /* 휴대폰: 볼륨 줄은 한 줄 꽉 차게 (레벨업 소리 버튼 때문에) */

/* 단계 카드 레벨 (K 요청 2026-11-13): 경험치 막대 아래 "LV 7" */
.stage .lvl{display:flex;align-items:baseline;gap:4px;margin-top:6px;font-weight:800;font-size:20px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stage .lvl small{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.stage .lvl .mx{font-size:12px;font-weight:800;color:#fff;background:var(--accent);border-radius:6px;padding:3px 6px;margin-left:4px;letter-spacing:.03em}
html[data-theme="dark"] .stage .lvl .mx{color:#16181D}
@media (max-width:720px){ .stage .lvl{justify-content:center;font-size:17px;margin-top:4px} .stage .lvl small{font-size:12px} }
.stage .lvl{flex-wrap:wrap;row-gap:4px} .stage .lvl .tot{margin-left:auto;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
@media (max-width:720px){ .stage .lvl{flex-wrap:wrap;row-gap:4px} .stage .lvl .tot{margin-left:0;flex-basis:100%;text-align:center;font-size:13px} }

/* 한 마디 세고 시작 큰 숫자 (K 요청 2026-11-13): 오선 아래 빈칸 가운데 */
.countbig{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans KR',system-ui,sans-serif;font-weight:700;line-height:1;color:var(--accent);pointer-events:none;font-variant-numeric:tabular-nums}
.countbig.pop{animation:gmcount .18s ease-out}
@keyframes gmcount{from{transform:scale(1.25);opacity:.4}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){ .countbig.pop{animation:none} }