/* ============================================================
   Standard Tools for Vocal — 웹 v01 (for Drum 웹 v18 틀 + 아이폰·아이패드 앱 ver02 화면)
   크기는 app.js의 배치 계산(layoutApp)이 넣는 비율 단위를 쓴다 — 앱 ScreenScale과 같은 식.
     --u  : 화면 비율(휴대폰 세로 ≈ 1px, 큰 화면 최대 2.0~2.4px)
     --cu : 머리줄·탭 바용(최대 1.3px)
   배치 방식은 <html data-mode="single|wide|compact"> (가로·높이 500 이하 = compact, 가로·폭 760 이상 = wide)
   색은 랩 토큰만 쓴다(LAB-REFERENCE 2절). 새 색 없음
   ============================================================ */
:root{
  --bg-void:#0B0B0A;
  --bg-surface:#131211;
  --bg-sheet:#100F0E;
  --text-primary:#F2EFE9;
  --text-muted:#A79F91;
  --text-faint:#6E685C;
  --accent-blue:#2E8EFF;
  --hairline:rgba(242,239,233,0.14);
  --good:#4CD98A;
  --bad:#E0637A;
  --u:1px; --cu:1px;
  --pad:20px; --maxw:100vw; --tab-h:49px;
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05)),rgba(26,25,23,.55);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  height:100%;
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:'Jost',sans-serif;
  overscroll-behavior:none;
  overflow:hidden;
}
:lang(ko){ word-break:keep-all; }
body{ overflow-wrap:break-word; display:flex; flex-direction:column; }
button{ font-family:inherit;touch-action:manipulation;color:inherit;background:none;border:none;cursor:pointer; }
button:disabled{ cursor:default; }
[hidden]{ display:none !important; }
body{ -webkit-user-select:none;user-select:none;-webkit-touch-callout:none; }

/* ---------------- 머리줄 (for Drum v18과 같음) ---------------- */
.topnav{
  flex:none;position:relative;z-index:120;
  display:flex;align-items:center;gap:calc(6 * var(--cu));
  width:100%;max-width:var(--maxw);margin:0 auto;
  height:calc(44 * var(--cu) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  padding-left:max(calc(18 * var(--cu)), env(safe-area-inset-left));
  padding-right:max(calc(4 * var(--cu)), env(safe-area-inset-right));
}
html[data-mode="compact"] .topnav{ height:calc(36 * var(--cu) + env(safe-area-inset-top)); }
.brand{ display:flex;align-items:center;gap:calc(9 * var(--cu));text-decoration:none;flex:0 1 auto;min-width:0; }
.brand img{ width:calc(22 * var(--cu));height:calc(22 * var(--cu));flex:none; }
.brand-name{ font-size:calc(12 * var(--cu));font-weight:500;letter-spacing:calc(3.4 * var(--cu));color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:clip; }
.brand-sub{ font-size:calc(9.5 * var(--cu));font-weight:400;letter-spacing:calc(1.2 * var(--cu));color:var(--text-muted);margin-left:calc(7 * var(--cu));text-transform:lowercase; }
@media (max-width:360px){ html[data-mode="single"] .brand-sub{ display:none; } }
.nav-right{ margin-left:auto;display:flex;align-items:center;flex:none; }
.nav-btn{ width:calc(38 * var(--cu));height:calc(38 * var(--cu));display:grid;place-items:center;color:var(--text-muted);border-radius:50%; }
.nav-btn svg{ width:calc(18 * var(--cu));height:calc(18 * var(--cu)); }
.nav-btn:hover{ color:var(--text-primary); }
.nav-install.hidden{ display:none !important; }
.flag-icon{ width:calc(20 * var(--cu));height:calc(15 * var(--cu));object-fit:cover;border-radius:2px;display:block; }
.lang-select{ position:relative; }
.lang-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  background:#1C1B19;border:1px solid var(--hairline);border-radius:12px;
  min-width:150px;padding:6px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;z-index:250;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.lang-dropdown.open{ opacity:1;visibility:visible;transform:translateY(0); }
.lang-dropdown button{ display:flex;align-items:center;gap:9px;border-radius:8px;padding:10px 10px;font-size:13px;color:var(--text-muted);text-align:left; }
.lang-dropdown button .flag-icon{ width:20px;height:15px;flex-shrink:0; }
.lang-dropdown button:hover{ background:rgba(242,239,233,.06);color:var(--text-primary); }
.lang-dropdown button.active{ color:var(--accent-blue); }

/* ---------------- 탭 바: 화면 아래 떠 있는 유리 알약 (for Drum v18과 같음) ---------------- */
.tabbar{
  position:fixed;z-index:110;left:50%;transform:translateX(-50%);
  bottom:calc(3 * var(--cu) + env(safe-area-inset-bottom));
  width:min(calc(100vw - 32 * var(--cu) - env(safe-area-inset-left) - env(safe-area-inset-right)), var(--tab-maxw, calc(520 * var(--cu))));
  height:calc(43 * var(--cu));
  display:flex;align-items:center;gap:calc(2 * var(--cu));padding:0 calc(3 * var(--cu));
  border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:var(--glass-shadow);
}
.tab{
  flex:1;min-width:0;height:calc(37 * var(--cu));border-radius:999px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--cu));
  color:var(--text-muted);transition:color .25s, background .25s;
}
.tab-ic{ width:calc(20 * var(--cu));height:calc(20 * var(--cu));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.tab-tx{ font-size:calc(8.5 * var(--cu));font-weight:500;letter-spacing:calc(1 * var(--cu));white-space:nowrap; }
.tab.active{ color:var(--accent-blue);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12); }
html[data-mode="compact"] .tabbar{
  position:static;transform:none;width:auto;flex:0 1 calc(420 * var(--cu));min-width:0;margin:0 auto;
  height:calc(28 * var(--cu));padding:calc(2 * var(--cu));gap:calc(2 * var(--cu));border-radius:calc(9 * var(--cu));
  background:rgba(242,239,233,.07);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-mode="compact"] .tab{ height:100%;border-radius:calc(7 * var(--cu));flex-direction:row;color:var(--text-muted); }
html[data-mode="compact"] .tab-ic{ display:none; }
html[data-mode="compact"] .tab-tx{ font-size:calc(9 * var(--cu));letter-spacing:calc(.8 * var(--cu)); }
html[data-mode="compact"] .tab.active{ color:var(--text-primary);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10));box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.4); }
@media (max-width:700px){ html[data-mode="compact"] .brand-name{ display:none; } }

/* ---------------- 앱 영역: 머리줄 아래 남는 높이 전부. 넘칠 때만 이 안에서 스크롤 ---------------- */
.app{
  flex:1 1 auto;min-height:0;width:100%;max-width:var(--maxw);margin:0 auto;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
html[data-mode="compact"] .app{ padding-bottom:env(safe-area-inset-bottom); }
.screen{ display:none;flex:1 0 auto;flex-direction:column;padding:0 var(--pad);min-height:100%; }
.screen.active{ display:flex; }
.view{ display:flex;flex-direction:column;flex:1 0 auto;width:100%; }
.pane{ display:contents; }
.flex-gap{ flex:1 1 auto; }
.hair{ height:1px;background:var(--hairline);flex:none; }

/* 두 칸(가로 wide · compact) — 칸마다 따로 스크롤 */
html[data-mode="wide"] .screen.active, html[data-mode="compact"] .screen.active{ min-height:0;height:100%; }
html[data-mode="wide"] .app, html[data-mode="compact"] .app{ overflow-y:hidden; }
html[data-mode="wide"] .view, html[data-mode="compact"] .view{ flex-direction:row;gap:calc(28 * var(--u));height:100%;min-height:0;flex:1 1 auto; }
html[data-mode="wide"] .pane, html[data-mode="compact"] .pane{
  display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:calc(8 * var(--u)) 0;
}

/* ---------------- 공통 부품 ---------------- */
.sec-label{ display:block;font-size:calc(11 * var(--u));letter-spacing:calc(2.2 * var(--u));color:var(--text-muted);white-space:nowrap; }
.serif-title{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(34 * var(--u));line-height:1.15;color:var(--text-primary); }
.serif-title.sm{ font-size:calc(30 * var(--u));text-align:center; }
.serif-title.big{ font-size:calc(48 * var(--u));text-align:center; }
.note-tx{ font-size:calc(11.5 * var(--u));line-height:1.55;color:var(--text-faint);text-align:center; }
.note-tx.left{ text-align:left; }
.row{ display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--u));width:100%; }
.stepper{
  width:calc(44 * var(--u));height:calc(44 * var(--u));flex:none;border-radius:50%;
  border:1px solid var(--hairline);font-size:calc(20 * var(--u));line-height:1;color:var(--text-primary);
  display:grid;place-items:center;
}
.stepper:active{ background:var(--hairline); }
.stepper.bare{ border-color:transparent; }
.mini-chip{ flex:none;height:calc(32 * var(--u));padding:0 calc(12 * var(--u));border-radius:999px;border:1px solid var(--hairline);font-size:calc(11 * var(--u));color:var(--text-muted);white-space:nowrap; }
.mini-chip:active{ background:rgba(242,239,233,.08); }
.text-btn{ display:block;margin:0 auto;height:calc(36 * var(--u));padding:0 calc(10 * var(--u));font-size:calc(12 * var(--u));color:var(--text-muted); }
.text-btn.small{ margin:0;height:calc(32 * var(--u));font-size:calc(11.5 * var(--u));color:var(--text-faint); }
.text-btn:active{ opacity:.6; }

/* 유리 세그먼트(앱 GlassSegmented) */
.seg{ display:flex;gap:calc(2 * var(--u));padding:calc(2 * var(--u));border-radius:999px;background:rgba(242,239,233,.07);height:calc(32 * var(--u));width:calc(150 * var(--u));flex:none; }
.seg-btn{ flex:1 1 0;min-width:0;border-radius:999px;font-size:calc(11 * var(--u));font-weight:500;letter-spacing:calc(1.2 * var(--u));color:var(--text-muted);white-space:nowrap;transition:color .2s, background .2s; }
.seg-btn.selected{ color:var(--text-primary);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10));box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.4); }
.seg.seg-lg{ width:100%;height:calc(40 * var(--u)); }
.seg.seg-lg .seg-btn{ font-size:calc(12 * var(--u)); }

/* 유리 버튼(앱 GlassCapsuleButton) */
.glass-btn{
  flex:1 1 0;min-width:0;height:calc(48 * var(--u));border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));padding:0 calc(14 * var(--u));
  background:var(--glass-bg);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  font-size:calc(11.5 * var(--u));font-weight:500;letter-spacing:calc(1.6 * var(--u));color:var(--text-primary);white-space:nowrap;overflow:hidden;
  font-variant-numeric:tabular-nums;transition:transform .12s, opacity .2s;
}
.glass-btn.big{ height:calc(56 * var(--u));font-size:calc(12 * var(--u)); }
.glass-btn.narrow{ flex:0 1 calc(130 * var(--u));max-width:34%; }
.glass-btn.tint{ background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--accent-blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px rgba(46,142,255,.28); }
.glass-btn.danger{ color:var(--bad); }
.glass-btn:active:not(:disabled){ transform:scale(.97); }
.glass-btn:disabled{ opacity:.38; }
.gb-ic{ width:calc(15 * var(--u));height:calc(15 * var(--u));flex:none; }
.btn-row{ display:flex;gap:calc(10 * var(--u));width:100%; }
.fit-t{ white-space:nowrap;flex:none; }

/* 마이크 권한 */
.mic-prompt{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(22 * var(--u));text-align:center;padding-bottom:10vh; }
.mic-ring{ width:calc(76 * var(--u));height:calc(76 * var(--u));border-radius:50%;box-shadow:inset 0 0 0 1px var(--hairline);display:grid;place-items:center;color:var(--accent-blue); }
.mic-ring svg{ width:calc(32 * var(--u));height:calc(32 * var(--u)); }
.mic-hint{ color:var(--text-primary);font-size:calc(15 * var(--u));line-height:1.65;max-width:calc(300 * var(--u)); }
.permission-btn{ height:calc(52 * var(--u));padding:0 calc(28 * var(--u));border-radius:calc(14 * var(--u));background:rgba(46,142,255,.10);box-shadow:inset 0 0 0 1px var(--accent-blue);color:var(--accent-blue);font-size:calc(15 * var(--u)); }
.mic-denied{ font-size:calc(12.5 * var(--u));line-height:1.6;color:var(--bad);text-align:center;max-width:calc(320 * var(--u));margin:calc(8 * var(--u)) auto 0; }

/* ============================================================
   PITCH — 세로: 음 이름 · 센트 막대 · 음정 그래프(남는 높이) · 수치 · 목표음 · A4 · 녹음 · 안내
   ============================================================ */
#screenPitch .reading{ order:1;margin-top:calc(4 * var(--u)); }
#screenPitch .gauge{ order:2;margin-top:calc(8 * var(--u)); }
#screenPitch .graph-wrap{ order:3;margin-top:calc(12 * var(--u)); }
#screenPitch .stats-row{ order:4;margin-top:calc(6 * var(--u)); }
#screenPitch .p-hair1{ order:5;margin-top:calc(10 * var(--u)); }
#screenPitch .target-row{ order:6; } #screenPitch .fixed-row{ order:7; } #screenPitch .p-hair2{ order:8; }
#screenPitch .a4-row{ order:9; } #screenPitch .rec-row{ order:10;margin-top:calc(8 * var(--u));margin-bottom:calc(12 * var(--u)); }
#screenPitch .p-note{ order:11;min-height:calc(36 * var(--u)); }
html.p-tight .p-note{ display:none; }

.reading{ height:calc(128 * var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none; }
.reading-note{ display:flex;align-items:flex-start;gap:calc(4 * var(--u));height:calc(104 * var(--u)); }
.rn-name{ font-family:'Fraunces',serif;font-size:calc(100 * var(--u));line-height:1;color:var(--text-faint); }
.rn-oct{ font-family:'Fraunces',serif;font-size:calc(26 * var(--u));color:var(--text-muted);margin-top:calc(12 * var(--u)); }
.reading-sub{ height:calc(20 * var(--u));display:flex;align-items:center;gap:calc(8 * var(--u)); }
.rs-play{ font-size:calc(11 * var(--u));font-weight:500;letter-spacing:calc(2.4 * var(--u));color:var(--accent-blue); }
.rs-cents{ font-size:calc(15 * var(--u));font-weight:500;font-variant-numeric:tabular-nums; }
.rs-state{ font-size:calc(11 * var(--u));letter-spacing:calc(2 * var(--u));color:var(--text-muted); }
.c-good{ color:var(--good) !important; } .c-bad{ color:var(--bad) !important; } .c-text{ color:var(--text-primary) !important; } .c-muted{ color:var(--text-muted) !important; }

.gauge{ height:calc(60 * var(--u));width:100%;flex:none; }
.gauge-track{ position:relative;height:calc(44 * var(--u)); }
.gauge-band{ position:absolute;left:40%;width:20%;top:calc(8 * var(--u));height:calc(28 * var(--u));background:rgba(76,217,138,.10); }
.gauge-line{ position:absolute;left:0;right:0;top:calc(22 * var(--u));height:1px;background:var(--hairline); }
.gauge-ticks{ position:absolute;inset:0;background:
  linear-gradient(var(--hairline),var(--hairline)) 0 calc(15 * var(--u)) / 1px calc(14 * var(--u)) no-repeat,
  linear-gradient(rgba(242,239,233,.35),rgba(242,239,233,.35)) 50% calc(15 * var(--u)) / 1px calc(14 * var(--u)) no-repeat,
  linear-gradient(var(--hairline),var(--hairline)) 100% calc(15 * var(--u)) / 1px calc(14 * var(--u)) no-repeat,
  repeating-linear-gradient(90deg,var(--hairline) 0 1px,transparent 1px 10%) 0 calc(18 * var(--u)) / 100% calc(8 * var(--u)) no-repeat; }
.gauge-needle{ position:absolute;top:calc(4 * var(--u));left:50%;width:calc(3 * var(--u));height:calc(36 * var(--u));margin-left:calc(-1.5 * var(--u));border-radius:calc(1.5 * var(--u));background:var(--accent-blue);opacity:0;transition:left .12s ease-out; }
.gauge-labels{ display:flex;justify-content:space-between;font-size:calc(10 * var(--u));color:var(--text-faint);margin-top:calc(4 * var(--u)); }

.graph-wrap{ position:relative;flex:1 1 auto;min-height:calc(120 * var(--u));max-height:calc(380 * var(--u));width:100%;touch-action:none;cursor:pointer; }
.graph-wrap canvas, .board-wrap canvas{ position:absolute;inset:0;width:100%;height:100%;display:block; }
.paused-tag{ position:absolute;top:calc(6 * var(--u));right:calc(6 * var(--u));height:calc(22 * var(--u));padding:0 calc(8 * var(--u));border-radius:999px;background:rgba(11,11,10,.75);display:flex;align-items:center;gap:calc(6 * var(--u));pointer-events:none; }
.paused-tag b{ font-size:calc(10 * var(--u));font-weight:500;letter-spacing:calc(1.8 * var(--u));color:var(--accent-blue); }
.paused-tag span{ font-size:calc(10 * var(--u));font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums; }

.stats-row{ display:flex;align-items:center;gap:calc(14 * var(--u));height:calc(24 * var(--u));width:100%;flex:none; }
.stat{ display:flex;align-items:baseline;gap:calc(5 * var(--u));white-space:nowrap;min-width:0; }
.stat small, .level small{ font-size:calc(9.5 * var(--u));font-weight:500;letter-spacing:calc(1.6 * var(--u));color:var(--text-faint); }
.stat b{ font-size:calc(12 * var(--u));font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-primary); }
.stat b.none{ color:var(--text-faint); }
.level{ display:flex;align-items:flex-end;gap:calc(2 * var(--u)); }
.level small{ margin-right:calc(3 * var(--u)); }
.level i{ display:block;width:calc(3 * var(--u));border-radius:calc(1 * var(--u));background:var(--hairline); }
.level i:nth-of-type(1){ height:calc(5 * var(--u)); } .level i:nth-of-type(2){ height:calc(7.2 * var(--u)); } .level i:nth-of-type(3){ height:calc(9.4 * var(--u)); }
.level i:nth-of-type(4){ height:calc(11.6 * var(--u)); } .level i:nth-of-type(5){ height:calc(13.8 * var(--u)); }
.level i.on{ background:rgba(46,142,255,.85); }
/* v02: 이 줄이 칸보다 좁으면(큰 가로 화면 두 칸 등) 이 줄 글자·간격만 칸 폭에 맞춰 줄인다 — 가장 긴 값(VIBRATO 8.8Hz · 188¢)이 312u, 칸 폭이 316u 이상이면 그대로(휴대폰 세로 350u) */
@supports (width:1cqw){
  .stats-row{ container-type:inline-size;gap:0; }
  .stats-row > *{ --su:min(var(--u), calc(100cqw / 316)); }
  .stats-row > * + *{ margin-left:calc(14 * var(--su)); }
  .stats-row .stat{ gap:calc(5 * var(--su)); }
  .stats-row .stat small, .stats-row .level small{ font-size:calc(9.5 * var(--su));letter-spacing:calc(1.6 * var(--su)); }
  .stats-row .stat b{ font-size:calc(12 * var(--su)); }
}

.target-row{ height:calc(54 * var(--u));flex:none; }
.fixed-row{ height:calc(48 * var(--u));justify-content:center;gap:calc(14 * var(--u));flex:none; }
.fixed-note{ display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));min-width:calc(96 * var(--u));min-height:calc(44 * var(--u));touch-action:none; }
.fixed-note span{ font-family:'Fraunces',serif;font-size:calc(26 * var(--u));color:var(--text-primary);font-variant-numeric:tabular-nums; }
.fixed-note svg{ width:calc(14 * var(--u));height:calc(14 * var(--u));color:var(--text-muted); }
.fixed-note.dragging span{ color:var(--accent-blue); }
/* v02: DRONE(고른 음을 계속 울림) — FIXED 줄 오른쪽 */
.fixed-row .drone-chip{ margin-left:auto; }
.fixed-row .stepper:first-child{ margin-left:auto; }
.drone-chip{ flex:none;display:inline-flex;align-items:center;gap:calc(4 * var(--u));height:calc(32 * var(--u));padding:0 calc(10 * var(--u));border-radius:calc(10 * var(--u));border:1px solid var(--hairline);font-family:'Jost',sans-serif;font-weight:500;font-size:calc(10.5 * var(--u));letter-spacing:.11em;color:var(--text-muted);white-space:nowrap; }
.drone-chip svg{ width:calc(11 * var(--u));height:calc(11 * var(--u)); }
.drone-chip.on{ color:var(--accent-blue);border-color:var(--accent-blue);background:rgba(46,142,255,.10); }
@media (hover:hover) and (pointer:fine){ .fixed-note{ cursor:ns-resize; } }
.a4-row{ height:calc(50 * var(--u));flex:none; }
.a4-ctl{ display:flex;align-items:center;gap:calc(10 * var(--u)); }
.a4-val{ display:flex;align-items:baseline;gap:calc(3 * var(--u)); }
.a4-val b{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(20 * var(--u));font-variant-numeric:tabular-nums; }
.a4-val b.changed{ color:var(--accent-blue); }
.a4-val small{ font-size:calc(12 * var(--u));color:var(--text-muted); }
.rec-row{ display:flex;gap:calc(10 * var(--u));width:100%;flex:none; }
.rec-dot{ width:calc(10 * var(--u));height:calc(10 * var(--u));border-radius:50%;background:var(--bad);flex:none; }
.rec-dot.stop{ border-radius:calc(2 * var(--u)); }

/* PITCH 두 칸: 왼쪽 음 이름·막대·목표음·A4·녹음 / 오른쪽 그래프가 칸 높이를 채움 */
html[data-mode="wide"] #screenPitch .graph-wrap, html[data-mode="compact"] #screenPitch .graph-wrap{ max-height:none;margin-top:0; }
html[data-mode="wide"] #screenPitch .pane-a > :first-child, html[data-mode="compact"] #screenPitch .pane-a > :first-child{ margin-top:auto; }
html[data-mode="wide"] #screenPitch .pane-a > :last-child, html[data-mode="compact"] #screenPitch .pane-a > :last-child{ margin-bottom:auto; }
html[data-mode="compact"] #screenPitch .p-note{ display:none; }
html[data-mode="compact"] .reading{ height:calc(92 * var(--u)); }
html[data-mode="compact"] .reading-note{ height:calc(68 * var(--u)); }
html[data-mode="compact"] .rn-name{ font-size:calc(60 * var(--u)); }
html[data-mode="compact"] .rn-oct{ font-size:calc(20 * var(--u));margin-top:calc(8 * var(--u)); }
html[data-mode="wide"] #screenPitch .gauge, html[data-mode="compact"] #screenPitch .gauge{ margin-top:calc(6 * var(--u)); }
html[data-mode="wide"] #screenPitch .p-hair1, html[data-mode="compact"] #screenPitch .p-hair1{ margin-top:calc(8 * var(--u)); }
html[data-mode="wide"] #screenPitch .rec-row, html[data-mode="compact"] #screenPitch .rec-row{ margin-bottom:calc(8 * var(--u)); }

/* ============================================================
   GAME — 시작 화면
   ============================================================ */
.g-title{ order:1;display:flex;flex-direction:column;gap:calc(4 * var(--u));margin-top:calc(8 * var(--u)); }
.g-desc{ font-size:calc(13 * var(--u));line-height:1.5;color:var(--text-muted); }
.g-desc.center{ text-align:center; }
.range-line{ order:2;display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(6 * var(--u)) 0;margin-top:calc(10 * var(--u)); }
.rl-text{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(4 * var(--u)); }
.rl-value{ font-family:'Fraunces',serif;font-size:calc(22 * var(--u));white-space:nowrap; }
.rl-none{ font-size:calc(12.5 * var(--u));line-height:1.45;color:var(--text-muted); }
.rl-ctl{ display:flex;align-items:center;gap:calc(2 * var(--u));flex:none; }
#gMenu .stage-list{ order:3;margin-top:calc(10 * var(--u)); }
#gMenu .g-levels{ order:4;margin-top:calc(14 * var(--u)); }
#gMenu .g-gap{ order:5;min-height:calc(12 * var(--u)); }
#gMenu .g-note{ order:6; }
#gMenu .g-start{ order:7;margin-top:calc(10 * var(--u));margin-bottom:calc(14 * var(--u));flex:none; }
#gMenu .mic-denied{ order:8; }
.g-note{ display:flex;align-items:baseline;justify-content:center;gap:calc(6 * var(--u)); }
.g-note svg{ width:calc(12 * var(--u));height:calc(12 * var(--u));flex:none;transform:translateY(calc(1.5 * var(--u))); }
.stage-list{ display:flex;flex-direction:column;width:100%; }
.stage-list .sec-label{ margin-bottom:calc(4 * var(--u)); }
.stage-row{ position:relative;display:flex;align-items:center;gap:calc(12 * var(--u));height:calc(46 * var(--u));padding:0 calc(10 * var(--u));border-top:1px solid var(--hairline);text-align:left;width:100%; }
.stage-row:last-child{ border-bottom:1px solid var(--hairline); }
.stage-row:active{ background:rgba(242,239,233,.05); }
.stage-row.on::before{ content:'';position:absolute;left:0;top:50%;width:calc(2 * var(--u));height:calc(26 * var(--u));margin-top:calc(-13 * var(--u));background:var(--accent-blue); }
.st-no{ font-family:'Fraunces',serif;font-size:calc(15 * var(--u));color:var(--text-faint);font-variant-numeric:tabular-nums; }
.st-tx{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(2 * var(--u)); }
.st-tx b{ font-size:calc(13 * var(--u));font-weight:500;letter-spacing:calc(1.4 * var(--u));color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.st-tx small{ font-size:calc(11.5 * var(--u));color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.stage-row.on .st-no, .stage-row.on .st-tx b{ color:var(--accent-blue); }
.st-best{ font-size:calc(11 * var(--u));font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums; }
.st-ok{ font-size:calc(12 * var(--u));font-weight:600;color:var(--good);visibility:hidden; }
.stage-row.cleared .st-ok{ visibility:visible; }
/* 두 칸: 왼쪽 제목·음역·난이도·시작 / 오른쪽 단계 목록 */
html[data-mode="wide"] #gMenu .pane-a > :first-child, html[data-mode="compact"] #gMenu .pane-a > :first-child{ margin-top:auto; }
html[data-mode="wide"] #gMenu .g-gap, html[data-mode="compact"] #gMenu .g-gap{ display:none; }
html[data-mode="wide"] #gMenu .g-note, html[data-mode="compact"] #gMenu .g-note{ margin-top:calc(12 * var(--u)); }
html[data-mode="wide"] #gMenu .g-start, html[data-mode="compact"] #gMenu .g-start{ margin-bottom:auto; }
html[data-mode="wide"] #gMenu .stage-list, html[data-mode="compact"] #gMenu .stage-list{ margin:auto 0;margin-top:auto; }
html[data-mode="compact"] .g-desc{ font-size:calc(12 * var(--u)); }
html[data-mode="compact"] .serif-title{ font-size:calc(28 * var(--u)); }
html[data-mode="compact"] .stage-row{ height:calc(40 * var(--u)); }

/* GAME — 음역 맞추기 */
#gCal .cal-meter{ order:2;margin-top:calc(22 * var(--u)); }
#gCal .cal-status{ order:3;margin-top:calc(14 * var(--u)); }
#gCal .cal-head{ order:1;margin-top:calc(10 * var(--u)); }
#gCal .cal-b > .flex-gap{ order:4;min-height:calc(14 * var(--u)); }
#gCal .cal-note{ order:5; }
#gCal .cal-btns{ order:6;margin-top:calc(14 * var(--u));margin-bottom:calc(14 * var(--u)); }
.cal-head{ display:flex;flex-direction:column;gap:calc(8 * var(--u)); }
.cal-head-row{ display:flex;align-items:center;justify-content:space-between; }
.x-btn{ width:calc(40 * var(--u));height:calc(40 * var(--u));font-size:calc(14 * var(--u));color:var(--text-muted); }
.cal-meter{ position:relative;align-self:center;width:calc(190 * var(--u));height:calc(190 * var(--u));flex:none; }
.cal-meter svg{ width:100%;height:100%;transform:rotate(-90deg); }
.cm-bg{ fill:none;stroke:var(--hairline);stroke-width:1.1; }
.cm-fg{ fill:none;stroke:var(--accent-blue);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .1s linear; }
.cal-meter.done .cm-fg{ stroke:var(--good); }
.cm-center{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--u)); }
.cm-center b{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(52 * var(--u));color:var(--text-primary); }
.cm-center b.none{ color:var(--text-faint); }
.cm-center small{ font-size:calc(12 * var(--u));color:var(--text-muted);font-variant-numeric:tabular-nums; }
.cal-status{ text-align:center;font-size:calc(12 * var(--u));font-weight:500;letter-spacing:calc(2 * var(--u));color:var(--accent-blue); }
.cal-status.done{ color:var(--good); }
html[data-mode="wide"] #gCal .pane, html[data-mode="compact"] #gCal .pane{ justify-content:center; }
html[data-mode="wide"] #gCal .cal-meter, html[data-mode="compact"] #gCal .cal-meter{ margin-top:0; }
html[data-mode="compact"] .cal-meter{ width:calc(150 * var(--u));height:calc(150 * var(--u)); }
html[data-mode="wide"] #gCal .cal-b > .flex-gap, html[data-mode="compact"] #gCal .cal-b > .flex-gap{ display:none; }
html[data-mode="wide"] #gCal .cal-note, html[data-mode="compact"] #gCal .cal-note{ margin-top:calc(12 * var(--u)); }
html[data-mode="wide"] #gCal .cal-btns, html[data-mode="compact"] #gCal .cal-btns{ margin-bottom:0; }

/* GAME — 듣기·부르기 */
.top-row{ display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--u));width:100%;flex:none; }
.prog{ font-size:calc(12 * var(--u));color:var(--text-muted);font-variant-numeric:tabular-nums; }
#gPlay .play-top-s{ order:1;margin-top:calc(8 * var(--u)); }
#gPlay .board-wrap{ order:2;margin-top:calc(10 * var(--u)); }
#gPlay .status{ order:3;margin-top:calc(12 * var(--u)); }
#gPlay .play-btns{ order:4;margin-top:calc(12 * var(--u));margin-bottom:calc(14 * var(--u)); }
.play-top-w, .play-gap-w{ display:none !important; }
.board-wrap{ position:relative;flex:1 1 auto;min-height:calc(160 * var(--u));width:100%;overflow:hidden; }
.status{ display:flex;flex-direction:column;gap:calc(10 * var(--u));width:100%;flex:none; }
.st-line{ display:flex;align-items:center;gap:calc(8 * var(--u));min-height:calc(24 * var(--u)); }
.phase{ font-size:calc(13 * var(--u));font-weight:500;letter-spacing:calc(3 * var(--u));color:var(--text-muted); }
.phase.sing{ color:var(--accent-blue); }
.mic-off{ display:flex;align-items:center;gap:calc(4 * var(--u));height:calc(22 * var(--u));padding:0 calc(8 * var(--u));border-radius:999px;box-shadow:inset 0 0 0 1px var(--hairline);font-size:calc(10.5 * var(--u));color:var(--text-faint);white-space:nowrap; }
.mic-off svg{ width:calc(9 * var(--u));height:calc(9 * var(--u)); }
.target-name{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(22 * var(--u)); }
.sung{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(20 * var(--u));font-variant-numeric:tabular-nums;color:var(--text-primary); }
.sung.none{ color:var(--text-faint); }
.hold{ font-size:calc(12 * var(--u));color:var(--text-muted);font-variant-numeric:tabular-nums; }
.hold.on{ color:var(--good); }
.sing-block{ display:flex;flex-direction:column;gap:calc(10 * var(--u)); }
.tol-bar{ position:relative;height:calc(16 * var(--u)); }
.tb-track{ position:absolute;left:0;right:0;top:calc(3 * var(--u));height:calc(10 * var(--u));border-radius:999px;background:var(--bg-surface); }
.tb-band{ position:absolute;top:calc(3 * var(--u));height:calc(10 * var(--u));border-radius:999px;background:rgba(76,217,138,.28); }
.tb-mid{ position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(242,239,233,.35); }
.tb-dot{ position:absolute;top:calc(2 * var(--u));width:calc(12 * var(--u));height:calc(12 * var(--u));margin-left:calc(-6 * var(--u));border-radius:50%;background:var(--bad);display:none; }
.tb-dot.in{ background:var(--good); }
.tol-labels{ display:flex;justify-content:space-between;font-size:calc(10.5 * var(--u));color:var(--text-faint);font-variant-numeric:tabular-nums; }
.hint-tx{ font-size:calc(12 * var(--u));line-height:1.6;color:var(--text-muted);text-align:center;min-height:calc(58 * var(--u));display:flex;align-items:center;justify-content:center; }
/* 두 칸: 왼쪽 게임판 / 오른쪽 상태·버튼 */
html[data-mode="wide"] #gPlay .play-top-s, html[data-mode="compact"] #gPlay .play-top-s{ display:none; }
html[data-mode="wide"] #gPlay .play-top-w, html[data-mode="compact"] #gPlay .play-top-w{ display:flex !important; }
html[data-mode="wide"] #gPlay .play-gap-w, html[data-mode="compact"] #gPlay .play-gap-w{ display:block !important;min-height:calc(8 * var(--u)); }
html[data-mode="wide"] #gPlay .board-wrap, html[data-mode="compact"] #gPlay .board-wrap{ margin-top:0;min-height:0; }
html[data-mode="wide"] #gPlay .status, html[data-mode="compact"] #gPlay .status{ margin-top:0; }
html[data-mode="wide"] #gPlay .play-btns, html[data-mode="compact"] #gPlay .play-btns{ margin:0; }
html[data-mode="compact"] .hint-tx{ min-height:calc(40 * var(--u)); }

/* GAME — 결과 */
#gResult .res-head{ order:1;margin-top:calc(10 * var(--u)); }
#gResult .res-stats{ order:2;margin-top:calc(14 * var(--u)); }
#gResult .tendency{ order:3;margin-top:calc(14 * var(--u)); }
#gResult .bars{ order:4;margin-top:calc(14 * var(--u)); }
#gResult .res-b > .flex-gap{ order:5;min-height:calc(14 * var(--u)); }
#gResult .res-btns{ order:6; }
#gResult .text-btn{ order:7;margin-top:calc(10 * var(--u)); }
#gResult .res-foot{ order:8;margin:calc(6 * var(--u)) 0 calc(12 * var(--u)); }
.res-head{ display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u)); }
.serif-title.big.clear{ color:var(--good); }
.res-stats{ display:flex;align-items:center;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:calc(6 * var(--u)) 0;width:100%; }
.rs{ flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--u));padding:calc(8 * var(--u)) 0; }
.rs + .rs{ border-left:1px solid var(--hairline); }
.rs b{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(22 * var(--u));font-variant-numeric:tabular-nums;white-space:nowrap; }
.rs b.hl{ color:var(--accent-blue); }
.rs small{ font-size:calc(10.5 * var(--u));color:var(--text-muted);white-space:nowrap; }
.tendency{ display:flex;flex-direction:column;gap:calc(6 * var(--u));width:100%; }
.td-track{ position:relative;height:calc(30 * var(--u)); }
.td-band{ position:absolute;top:0;bottom:0;background:rgba(76,217,138,.12); }
.td-mid{ position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(242,239,233,.3); }
.td-avg{ position:absolute;top:0;bottom:0;width:calc(2 * var(--u));margin-left:calc(-1 * var(--u));background:var(--accent-blue); }
.td-pt{ position:absolute;width:calc(7 * var(--u));height:calc(7 * var(--u));margin:calc(-3.5 * var(--u)) 0 0 calc(-3.5 * var(--u));border-radius:50%;background:rgba(242,239,233,.7); }
.td-pt.in{ background:var(--accent-blue); }
.bars{ display:flex;flex-direction:column;gap:calc(8 * var(--u));width:100%; }
.bars-row{ display:flex;align-items:flex-end;gap:calc(6 * var(--u));height:calc(108 * var(--u)); }
.bars-row.many{ gap:calc(3 * var(--u)); }
.bar{ flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--u)); }
.bar-box{ position:relative;width:100%;height:calc(90 * var(--u));display:flex;align-items:flex-end;justify-content:center; }
.bar-fill{ width:100%;border-radius:calc(2 * var(--u));background:rgba(46,142,255,.8); }
.bar-fill.retry{ background:var(--bad); }
.bar-x{ font-size:calc(14 * var(--u));color:var(--bad); }
.bar small{ font-size:calc(10 * var(--u));color:var(--text-faint);white-space:nowrap; }
.bars-row.many .bar small{ font-size:calc(8.5 * var(--u)); }
.res-foot{ text-align:center;font-size:calc(10 * var(--u));font-weight:500;letter-spacing:calc(2.6 * var(--u));color:var(--text-faint); }
.res-foot span{ font-size:calc(9 * var(--u));font-weight:400;letter-spacing:calc(1 * var(--u));margin-left:calc(5 * var(--u)); }
html[data-mode="wide"] #gResult .pane > :first-child, html[data-mode="compact"] #gResult .pane > :first-child{ margin-top:auto; }
html[data-mode="wide"] #gResult .pane > :last-child, html[data-mode="compact"] #gResult .pane > :last-child{ margin-bottom:auto; }
html[data-mode="wide"] #gResult .res-b > .flex-gap, html[data-mode="compact"] #gResult .res-b > .flex-gap{ display:none; }
html[data-mode="wide"] #gResult .res-btns, html[data-mode="compact"] #gResult .res-btns{ margin-top:calc(14 * var(--u)); }
html[data-mode="compact"] .serif-title.big{ font-size:calc(36 * var(--u)); }
html[data-mode="compact"] .bars-row{ height:calc(78 * var(--u)); }
html[data-mode="compact"] .bar-box{ height:calc(60 * var(--u)); }
html[data-mode="compact"] #gResult .res-foot{ display:none; }

/* ============================================================
   RANGE — 세로: LOW·HIGH · 음역 · 건반 · 지금 음 · 기록 · 안내 · 재기 버튼
   ============================================================ */
#screenRange .lowhigh{ order:1;margin-top:calc(8 * var(--u)); }
#screenRange .span-tx{ order:2;margin-top:calc(10 * var(--u)); }
#screenRange .piano{ order:3;margin-top:calc(14 * var(--u)); }
#screenRange .live{ order:4;margin-top:calc(10 * var(--u)); }
#screenRange .history{ order:5;margin-top:calc(12 * var(--u)); }
#screenRange .pane-b > .flex-gap{ order:6;min-height:calc(12 * var(--u)); }
#screenRange .r-hint{ order:7; }
#screenRange .r-btns{ order:8;margin-top:calc(10 * var(--u));margin-bottom:calc(12 * var(--u)); }
#screenRange .mic-denied{ order:9; }
.lowhigh{ display:flex;align-items:center;width:100%; }
.lh{ flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(4 * var(--u)); }
.lh + .lh-sep + .lh{ padding-left:calc(16 * var(--u)); }
.lh-sep{ width:1px;height:calc(56 * var(--u));background:var(--hairline);flex:none; }
.lh-val{ display:flex;align-items:baseline;gap:calc(8 * var(--u));min-width:0; }
.lh-val b{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(44 * var(--u));line-height:1.1;white-space:nowrap; }
.lh-val b.none{ color:var(--text-faint); }
.lh-val small{ font-size:calc(12 * var(--u));color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums; }
/* v02: LOW | HIGH | HOLD 세 칸 — 값 아래에 작은 줄(Hz · 음·흔들림) */
#screenRange .lh-val{ flex-direction:column;align-items:flex-start;gap:calc(2 * var(--u)); }
#screenRange .lh-val b{ font-size:calc(34 * var(--u)); }
#screenRange .lh-val small{ font-size:calc(11 * var(--u)); }
#screenRange .lh + .lh-sep + .lh{ padding-left:calc(12 * var(--u)); }
#screenRange .lh-sep{ height:calc(52 * var(--u)); }
.seg.seg-sm{ width:calc(150 * var(--u));height:calc(28 * var(--u)); }
.seg.seg-sm .seg-btn{ font-size:calc(9.5 * var(--u));letter-spacing:calc(.9 * var(--u)); }
.hist-head .seg{ margin:0 auto 0 calc(8 * var(--u)); }
.live-sub{ font-size:calc(12 * var(--u));font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:center; }
.best-tag{ font-size:calc(10 * var(--u));font-weight:500;letter-spacing:.16em;color:var(--accent-blue); }
.live-row b.done{ color:var(--text-primary); }
#screenRange .r-btns > .glass-btn{ min-width:0;padding:0 calc(10 * var(--u)); }
/* v02: 줄이 칸보다 넓을 때만(가로 폭 430 이하 창의 두 칸 등) — 자리를 줄인다. 넉넉한 크기는 그대로 */
.fixed-row.cramped{ gap:calc(6 * var(--u)); }
.fixed-row.cramped .stepper{ width:calc(36 * var(--u)); }
.fixed-row.cramped2 .fixed-note{ min-width:0; }
.fixed-row.cramped2 .fixed-note svg, .fixed-row.cramped2 .dc-tx{ display:none; }
.fixed-row.cramped2 .drone-chip{ padding:0 calc(8 * var(--u)); }
.hist-head.cramped > .sec-label{ display:none; }
.hist-head.cramped .seg{ margin-left:0;flex:1 1 auto;width:auto;max-width:calc(150 * var(--u));min-width:calc(96 * var(--u)); }
.hist-head.cramped .text-btn{ margin-left:calc(6 * var(--u)); }
.lh.active .sec-label, .lh.active b{ color:var(--accent-blue); }
.span-tx{ font-size:calc(13 * var(--u));letter-spacing:calc(1 * var(--u));color:var(--text-muted);min-height:1.4em; }
.piano{ display:flex;flex-direction:column;gap:calc(6 * var(--u));width:100%; }
.piano canvas{ width:100%;height:calc(58 * var(--u));display:block; }
.piano-c{ display:flex;justify-content:space-between;font-size:calc(10 * var(--u));color:var(--text-faint); }
.legend{ display:flex;gap:calc(14 * var(--u));margin-top:calc(2 * var(--u)); }
.lg{ display:flex;align-items:center;gap:calc(6 * var(--u));font-size:calc(11 * var(--u));color:var(--text-muted); }
.lg-fill{ display:block;width:calc(14 * var(--u));height:calc(8 * var(--u));border-radius:calc(2 * var(--u));background:rgba(46,142,255,.75); }
.lg-dash{ display:block;width:calc(14 * var(--u));height:0;border-top:calc(1.5 * var(--u)) dashed rgba(242,239,233,.7); }
.live{ display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u)); }
.live-row{ display:flex;align-items:baseline;gap:calc(8 * var(--u)); }
.live-row b{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(28 * var(--u));color:var(--accent-blue); }
.live-row b.none{ color:var(--text-faint); }
.live-tx{ font-size:calc(12 * var(--u));color:var(--text-muted);text-align:center; }
.history{ display:flex;flex-direction:column;width:100%; }
.hist-head{ display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(4 * var(--u));min-height:calc(32 * var(--u)); }
.hist-none{ height:calc(40 * var(--u));display:flex;align-items:center;font-size:calc(13 * var(--u));color:var(--text-faint); }
.history canvas{ width:100%;height:calc(76 * var(--u));display:block;margin-bottom:calc(6 * var(--u)); }
.h-row{ display:flex;align-items:center;justify-content:space-between;height:calc(38 * var(--u));border-top:1px solid var(--hairline); }
.h-row span{ font-size:calc(13 * var(--u));color:var(--text-muted); }
.h-row b{ font-family:'Fraunces',serif;font-weight:400;font-size:calc(17 * var(--u)); }
.r-hint{ font-size:calc(12 * var(--u)); }
.glass-btn.on{ background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--accent-blue);color:#fff; }
html[data-mode="wide"] #screenRange .pane > :first-child, html[data-mode="compact"] #screenRange .pane > :first-child{ margin-top:auto; }
html[data-mode="wide"] #screenRange .pane > :last-child, html[data-mode="compact"] #screenRange .pane > :last-child{ margin-bottom:auto; }
html[data-mode="wide"] #screenRange .pane-b > .flex-gap, html[data-mode="compact"] #screenRange .pane-b > .flex-gap{ display:none; }
html[data-mode="wide"] #screenRange .r-hint, html[data-mode="compact"] #screenRange .r-hint{ margin-top:calc(10 * var(--u)); }
html[data-mode="wide"] #screenRange .r-btns, html[data-mode="compact"] #screenRange .r-btns{ margin-bottom:0; }
html[data-mode="compact"] .lh-val b{ font-size:calc(34 * var(--u)); }
html[data-mode="compact"] #screenRange .lh-val b{ font-size:calc(30 * var(--u)); }

/* ============================================================
   메뉴 패널(햄버거) — for Drum v18과 같음
   ============================================================ */
.nav-mobile-panel{
  display:flex;flex-direction:column;gap:22px;
  position:fixed;top:0;right:0;
  width:min(260px, 78vw);height:100vh;height:100dvh;
  background:var(--bg-surface);border-left:1px solid var(--hairline);
  z-index:300;padding:90px 28px calc(28px + env(safe-area-inset-bottom));
  padding-right:calc(28px + env(safe-area-inset-right));
  transform:translateX(100%);transition:transform .35s ease;pointer-events:none;
  overflow:hidden;
}
.nav-mobile-panel.open{ transform:translateX(0); pointer-events:auto; }
.nav-panel-list{ flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:22px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; }
.nav-panel-list > *{ flex-shrink:0; }
.nav-backdrop{ position:fixed;inset:0;z-index:290;background:rgba(11,11,10,0.55);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease; }
.nav-backdrop.open{ opacity:1;visibility:visible; }
@media (orientation:landscape) and (max-height:500px){
  .nav-mobile-panel{ width:min(300px, 52vw);padding-top:56px;padding-bottom:20px; }
  .nav-panel-list{ gap:14px; }
  .panel-link{ font-size:12px; }
  .nav-panel-tools{ gap:11px;padding-top:13px; }
  .nav-panel-close{ top:14px; }
}
.panel-link{ display:block;background:none;border:none;text-align:left;font-size:13px;letter-spacing:0.1em;color:var(--text-primary);cursor:pointer;text-decoration:none;padding:0; }
.nav-panel-tools{ display:flex;flex-direction:column;gap:16px;padding-top:20px;margin-top:-4px;border-top:1px solid var(--hairline); }
.nav-panel-tools-label{ font-size:9.5px;letter-spacing:0.24em;color:var(--text-faint); }
.nav-panel-tools .panel-link{ font-size:11.5px !important;color:var(--text-muted) !important; }
.nav-panel-close{ position:absolute;top:26px;right:26px;color:var(--text-faint);font-size:15px;padding:6px; }
.nav-panel-close:hover{ color:var(--accent-blue); }

/* ============================================================
   설치 안내 창 · 확인 창
   ============================================================ */
.modal-overlay{ position:fixed;inset:0;z-index:500;background:rgba(6,6,6,0.88);display:none;align-items:center;justify-content:center;padding:24px; }
.modal-overlay.open{ display:flex; }
.modal-card{ position:relative;background:var(--bg-surface);border:1px solid var(--hairline);border-radius:20px;max-width:380px;width:100%;max-height:84vh;overflow-y:auto;padding:36px 26px 28px; }
.modal-close{ position:absolute;top:16px;right:16px;color:var(--text-faint);font-size:14px;padding:6px; }
.modal-close:hover{ color:var(--accent-blue); }
.modal-eyebrow{ font-size:10px;letter-spacing:0.2em;color:var(--accent-blue);margin-bottom:10px; }
.modal-title{ font-family:'Fraunces',serif;font-weight:500;font-size:22px;margin-bottom:12px; }
.modal-desc{ font-size:13px;color:var(--text-muted);line-height:1.8;margin-bottom:22px; }
.guide-block{ margin-bottom:20px; }
.guide-block h3{ font-size:12px;letter-spacing:0.06em;color:var(--text-primary);margin-bottom:10px; }
.guide-block ol{ padding-left:18px;display:flex;flex-direction:column;gap:8px; }
.guide-block li{ font-size:13px;color:var(--text-muted);line-height:1.7; }
.guide-block strong{ color:var(--text-primary);font-weight:500; }
.modal-note{ font-size:11px;color:var(--text-faint);text-align:center;margin-top:6px;margin-bottom:20px; }
.modal-confirm{ display:block;width:100%;background:var(--accent-blue);border:none;border-radius:12px;color:#fff;padding:14px 0;font-size:12px;letter-spacing:0.12em;font-weight:500;cursor:pointer; }
.confirm-card{ padding:28px 22px 22px; }
.confirm-card .modal-desc{ color:var(--text-primary);font-size:14px;text-align:center;margin-bottom:20px; }
.confirm-card .glass-btn{ --u:1px;height:46px;font-size:12px;letter-spacing:1px; }
@media (prefers-reduced-motion:reduce){ .gauge-needle, .cm-fg, .tab, .seg-btn{ transition:none; } }

/* ============================================================
   좁은 높이(html.tight): 처음 크기로 넘치면 먼저 줄 간격·큰 글자·그림 높이를 줄이고, 그래도 넘치면 비율(u)을 줄인다(최소 0.75)
   — 휴대폰 세로 작은 화면(사파리 주소·탭 바가 있는 아이폰 SE 등)과 휴대폰 가로(유효 높이 약 272px)
   ============================================================ */
html.tight #screenPitch .p-note{ display:none; }
html.tight .reading{ height:calc(98 * var(--u)); }
html.tight .reading-note{ height:calc(76 * var(--u)); }
html.tight .rn-name{ font-size:calc(72 * var(--u)); }
html.tight .rn-oct{ font-size:calc(20 * var(--u));margin-top:calc(8 * var(--u)); }
html.tight .gauge{ height:calc(46 * var(--u)); }
html.tight .gauge-labels{ display:none; }
html.tight .graph-wrap{ min-height:calc(80 * var(--u)); }
html.tight .target-row{ height:calc(44 * var(--u)); }
html.tight .fixed-row{ height:calc(42 * var(--u)); }
html.tight .a4-row{ height:calc(42 * var(--u)); }
html.tight .rec-row .glass-btn, html.tight .play-btns .glass-btn{ height:calc(42 * var(--u)); }
html.tight #screenPitch .rec-row{ margin-bottom:calc(8 * var(--u)); }
html.tight .serif-title{ font-size:calc(26 * var(--u)); }
html.tight .serif-title.big{ font-size:calc(34 * var(--u)); }
html.tight .g-title{ margin-top:calc(4 * var(--u)); }
html.tight .range-line{ margin-top:calc(4 * var(--u));padding:calc(2 * var(--u)) 0; }
html.tight .rl-value{ font-size:calc(19 * var(--u)); }
html.tight .stage-row{ height:calc(38 * var(--u)); }
html.tight #gMenu .stage-list{ margin-top:calc(6 * var(--u)); }
html.tight #gMenu .g-levels{ margin-top:calc(10 * var(--u));height:calc(34 * var(--u)); }
html.tight .glass-btn.big{ height:calc(46 * var(--u)); }
html.tight #gMenu .g-start{ margin-top:calc(8 * var(--u));margin-bottom:calc(10 * var(--u)); }
html.tight .cal-meter{ width:calc(130 * var(--u));height:calc(130 * var(--u)); }
html.tight .cm-center b{ font-size:calc(38 * var(--u)); }
html.tight #gCal .cal-meter{ margin-top:calc(12 * var(--u)); }
html.tight .cal-head{ gap:calc(4 * var(--u)); }
html.tight .serif-title.sm{ font-size:calc(24 * var(--u)); }
html.tight #gCal .cal-btns{ margin-top:calc(10 * var(--u));margin-bottom:calc(10 * var(--u)); }
html.tight .board-wrap{ min-height:calc(110 * var(--u)); }
html.tight .hint-tx{ min-height:calc(40 * var(--u)); }
html.tight #gResult .res-head{ gap:calc(4 * var(--u));margin-top:calc(4 * var(--u)); }
html.tight #gResult .res-stats, html.tight #gResult .tendency, html.tight #gResult .bars{ margin-top:calc(8 * var(--u)); }
html.tight .rs{ padding:calc(4 * var(--u)) 0; }
html.tight .rs b{ font-size:calc(19 * var(--u)); }
html.tight .td-track{ height:calc(22 * var(--u)); }
html.tight .bars-row{ height:calc(72 * var(--u)); }
html.tight .bar-box{ height:calc(56 * var(--u)); }
html.tight #gResult .res-foot{ display:none; }
html.tight #gResult .text-btn{ margin-top:calc(4 * var(--u)); }
html.tight .lh-val b{ font-size:calc(34 * var(--u)); }
html.tight #screenRange .lh-val b{ font-size:calc(30 * var(--u)); }
html.tight .lh-sep{ height:calc(44 * var(--u)); }
html.tight #screenRange .span-tx{ margin-top:calc(4 * var(--u)); }
html.tight #screenRange .piano{ margin-top:calc(8 * var(--u)); }
html.tight .piano canvas{ height:calc(44 * var(--u)); }
html.tight .history canvas{ height:calc(56 * var(--u)); }
html.tight .h-row{ height:calc(32 * var(--u)); }
html.tight #screenRange .history{ margin-top:calc(8 * var(--u)); }
html.tight #screenRange .r-btns{ margin-top:calc(8 * var(--u));margin-bottom:calc(8 * var(--u)); }
html.tight .live-row b{ font-size:calc(22 * var(--u)); }
/* 휴대폰 가로(compact) PITCH 왼쪽 칸: 한 화면에 들어가게 더 촘촘히 */
html[data-mode="compact"].tight .reading{ height:calc(72 * var(--u)); }
html[data-mode="compact"].tight .reading-note{ height:calc(52 * var(--u)); }
html[data-mode="compact"].tight .rn-name{ font-size:calc(46 * var(--u)); }
html[data-mode="compact"].tight .rn-oct{ font-size:calc(16 * var(--u));margin-top:calc(5 * var(--u)); }
html[data-mode="compact"].tight .gauge{ height:calc(40 * var(--u)); }
html[data-mode="compact"].tight .gauge-track{ height:calc(40 * var(--u)); }
html[data-mode="compact"].tight .target-row{ height:calc(38 * var(--u)); }
html[data-mode="compact"].tight .fixed-row{ height:calc(38 * var(--u)); }
html[data-mode="compact"].tight .a4-row{ height:calc(38 * var(--u)); }
html[data-mode="compact"].tight .rec-row .glass-btn{ height:calc(38 * var(--u)); }
html[data-mode="compact"].tight #screenPitch .p-hair1{ margin-top:calc(4 * var(--u)); }
html[data-mode="compact"].tight .cal-meter{ width:calc(110 * var(--u));height:calc(110 * var(--u)); }
html[data-mode="compact"].tight .cm-center b{ font-size:calc(32 * var(--u)); }
html[data-mode="compact"].tight .cal-note{ display:none; }
html[data-mode="compact"].tight #gMenu .g-note{ display:none; }
html[data-mode="compact"].tight .g-desc{ display:none; }
html[data-mode="compact"].tight #gResult .bars .note-tx{ display:none; }
/* 더 좁은 높이(html.tight2): tight로도 비율 0.75에서 넘칠 때(아이폰 SE 1세대 사파리 세로 320×454 등) */
html.tight2 .reading{ height:calc(80 * var(--u)); }
html.tight2 .reading-note{ height:calc(60 * var(--u)); }
html.tight2 .rn-name{ font-size:calc(56 * var(--u)); }
html.tight2 .gauge, html.tight2 .gauge-track{ height:calc(38 * var(--u)); }
html.tight2 .graph-wrap{ min-height:calc(56 * var(--u)); }
html.tight2 .target-row, html.tight2 .fixed-row, html.tight2 .a4-row{ height:calc(38 * var(--u)); }
html.tight2 #screenPitch .p-hair1{ margin-top:calc(4 * var(--u)); }
html.tight2 #screenPitch .graph-wrap{ margin-top:calc(6 * var(--u)); }
html.tight2 .g-desc{ display:none; }
html.tight2 #gMenu .g-note{ display:none; }
html.tight2 .stage-row{ height:calc(34 * var(--u)); }
html.tight2 .cal-note{ display:none; }
html.tight2 .cal-meter{ width:calc(100 * var(--u));height:calc(100 * var(--u)); }
html.tight2 .cm-center b{ font-size:calc(30 * var(--u)); }
html.tight2 .hint-tx{ min-height:0; }
html.tight2 .board-wrap{ min-height:calc(80 * var(--u)); }
html.tight2 #gResult .bars .note-tx{ display:none; }
html.tight2 .bars-row{ height:calc(56 * var(--u)); }
html.tight2 .bar-box{ height:calc(42 * var(--u)); }
html.tight2 .r-hint{ display:none; }
html.tight2 .lh-val b{ font-size:calc(28 * var(--u)); }
html.tight2 #screenRange .lh-val b{ font-size:calc(26 * var(--u)); }
html.tight2 .live-sub{ display:none; }
html.tight2 #screenRange .legend{ display:none; }
html.tight2 .lh-sep{ height:calc(36 * var(--u)); }
html.tight2 .piano canvas{ height:calc(36 * var(--u)); }
html.tight2 .history canvas{ height:calc(40 * var(--u)); }
html.tight2 .h-row{ height:calc(28 * var(--u)); }
html.tight2 .live-row b{ font-size:calc(19 * var(--u)); }
html.tight2 .live-tx{ display:none; }
/* 누르는 자리는 작아져도 30px 아래로는 줄이지 않는다 */
.glass-btn, .text-btn, .stepper, .mini-chip, .seg{ min-height:30px; }
.stepper{ min-width:30px; }
/* 버튼 두 개 줄: 칸이 아주 좁으면(가로 폭이 좁은 창) 한 줄에 다 넣지 않고 두 줄로 */
.btn-row{ flex-wrap:wrap; }
.btn-row > .glass-btn{ min-width:calc(110 * var(--u)); }

/* ---------------- v03 WARM UP (연구 순서 연습 루틴) ---------------- */
#wMenu .g-title{ order:1; }
#wMenu .w-row{ order:2;min-height:calc(44 * var(--u));border-bottom:1px solid var(--hairline);flex:none; }
#wMenu .w-row:first-of-type{ margin-top:calc(10 * var(--u)); }
#wMenu .stage-list{ order:3;margin-top:calc(14 * var(--u)); }
#wMenu .w-src{ order:4;margin-top:calc(8 * var(--u)); }
#wMenu .g-gap{ order:5;min-height:calc(12 * var(--u)); }
#wMenu .g-note{ order:6; }
#wMenu .g-start{ order:7;margin-top:calc(10 * var(--u));margin-bottom:calc(14 * var(--u));flex:none; }
#wMenu .mic-denied{ order:8; }
#wMenu .stage-row{ height:calc(42 * var(--u)); }
#wVoiceRow .seg{ flex:none; }
.w-key .a4-val b{ font-size:calc(20 * var(--u)); }
.w-pat{ font-variant-numeric:tabular-nums;letter-spacing:calc(0.5 * var(--u)); }
.w-src{ font-size:calc(10.5 * var(--u)); }
html[data-mode="wide"] #wMenu .pane-a > :first-child, html[data-mode="compact"] #wMenu .pane-a > :first-child{ margin-top:auto; }
html[data-mode="wide"] #wMenu .g-gap, html[data-mode="compact"] #wMenu .g-gap{ display:none; }
html[data-mode="wide"] #wMenu .g-note, html[data-mode="compact"] #wMenu .g-note{ margin-top:calc(12 * var(--u)); }
html[data-mode="wide"] #wMenu .g-start, html[data-mode="compact"] #wMenu .g-start{ margin-bottom:auto; }
html[data-mode="wide"] #wMenu .stage-list, html[data-mode="compact"] #wMenu .stage-list{ margin-top:auto; }
html[data-mode="wide"] #wMenu .w-src, html[data-mode="compact"] #wMenu .w-src{ margin-bottom:auto; }
html[data-mode="compact"] #wMenu .stage-row{ height:calc(36 * var(--u)); }
html[data-mode="compact"] #wMenu .w-row{ min-height:calc(38 * var(--u)); }

#wRun .play-top-s{ order:1;margin-top:calc(8 * var(--u)); }
#wRun .board-wrap{ order:2;margin-top:calc(10 * var(--u)); }
#wRun .status{ order:3;margin-top:calc(12 * var(--u)); }
#wRun .play-btns{ order:4;margin-top:calc(12 * var(--u));margin-bottom:calc(14 * var(--u)); }
.w-instr{ font-size:calc(12.5 * var(--u));line-height:1.55;color:var(--text-muted);min-height:calc(58 * var(--u)); }
#wRes{ text-align:right; }
html[data-mode="wide"] #wRun .play-top-s, html[data-mode="compact"] #wRun .play-top-s{ display:none; }
html[data-mode="wide"] #wRun .play-top-w, html[data-mode="compact"] #wRun .play-top-w{ display:flex !important; }
html[data-mode="wide"] #wRun .play-gap-w, html[data-mode="compact"] #wRun .play-gap-w{ display:block !important;min-height:calc(8 * var(--u)); }
html[data-mode="wide"] #wRun .board-wrap, html[data-mode="compact"] #wRun .board-wrap{ margin-top:0;min-height:0; }
html[data-mode="wide"] #wRun .status, html[data-mode="compact"] #wRun .status{ margin-top:0; }
html[data-mode="wide"] #wRun .play-btns, html[data-mode="compact"] #wRun .play-btns{ margin:0; }
html[data-mode="compact"] .w-instr{ min-height:0;font-size:calc(11.5 * var(--u)); }

#wDone .res-head{ order:1;margin-top:calc(10 * var(--u)); }
#wDone .w-sum{ order:2;margin-top:calc(14 * var(--u)); }
#wDone .res-b > .flex-gap{ order:3;min-height:calc(14 * var(--u)); }
#wDone .res-btns{ order:4; }
#wDone .text-btn{ order:5;margin:calc(10 * var(--u)) 0 calc(14 * var(--u)); }
.w-sum{ display:flex;flex-direction:column;width:100%; }
.w-sum-row{ display:flex;align-items:baseline;justify-content:space-between;gap:calc(10 * var(--u));padding:calc(9 * var(--u)) 0;border-top:1px solid var(--hairline); }
.w-sum-row:last-child{ border-bottom:1px solid var(--hairline); }
.w-sum-v{ font-size:calc(12.5 * var(--u));color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums; }
.w-sum-row.skip .w-sum-v{ color:var(--text-faint); }
html[data-mode="wide"] #wDone .pane > :first-child, html[data-mode="compact"] #wDone .pane > :first-child{ margin-top:auto; }
html[data-mode="wide"] #wDone .pane > :last-child, html[data-mode="compact"] #wDone .pane > :last-child{ margin-bottom:auto; }
html[data-mode="wide"] #wDone .res-b > .flex-gap, html[data-mode="compact"] #wDone .res-b > .flex-gap{ display:none; }
html[data-mode="wide"] #wDone .res-btns, html[data-mode="compact"] #wDone .res-btns{ margin-top:calc(14 * var(--u)); }

html.tight #wMenu .stage-row{ height:calc(36 * var(--u)); }
html.tight #wMenu .w-row{ min-height:calc(38 * var(--u)); }
html.tight #wMenu .stage-list{ margin-top:calc(8 * var(--u)); }
html.tight #wMenu .g-start{ margin-top:calc(8 * var(--u));margin-bottom:calc(10 * var(--u)); }
html.tight .w-instr{ min-height:calc(40 * var(--u)); }
html.tight2 #wMenu .stage-row small{ display:none; }
html.tight2 #wMenu .w-src{ display:none; }
html.tight2 #wMenu .g-desc{ display:none; }
html.tight2 .w-instr{ font-size:calc(11.5 * var(--u));min-height:0; }
html[data-mode="compact"] .w-sum-row{ padding:calc(5 * var(--u)) 0; }
html[data-mode="compact"] #wDone .res-head{ gap:calc(4 * var(--u)); }
html[data-mode="compact"] #wDone .serif-title.big{ font-size:calc(36 * var(--u)); }
html.tight2 #wMenu .stage-row{ height:calc(30 * var(--u)); }
html.tight2 .w-sum-row{ padding:calc(4 * var(--u)) 0; }
html[data-mode="compact"].tight #wMenu .g-note{ display:none; }
html[data-mode="compact"].tight #wMenu .g-desc{ display:none; }
/* v03: 한 줄 배치에서 넘칠 때만(html.w-scroll) START·안내를 설정 바로 아래로 — 루틴 목록은 그 아래로 스크롤 */
html.w-scroll #wMenu .g-note, html.w-scroll #wMenu .g-start, html.w-scroll #wMenu .mic-denied{ order:2; }
html.w-scroll #wMenu .g-gap{ display:none; }