/* 온라인 메트로놈 전용 CSS (2026-10-23). 작업면 '박 바퀴 연습대'.
   무대(.mno-stage)는 부품을 격자에 바로 놓는다: 툴 폭(mno 컨테이너) 620px 이상 = [박 바퀴(5줄 차지) | 빠르기 · 빠르기말 지도 · 시작/탭 · 박자 · 세분] + [강세 묶음 | 소리·음량],
   620~759px = [바퀴 | 시작·빠르기·지도·박자] + [세분 | 강세 묶음] + 소리, 620px 미만 한 열(시작 단추가 바퀴 바로 아래).
   아래 카드 둘(점점 빠르게 | 소리 빼기)은 560px 이상 나란히, subgrid 로 줄(제목·설명·입력·그림·요약)을 맞춘다. 단추·입력 높이는 모두 --v2-ctl(42px).
   accent 는 박 바퀴 한 곳(진행 호·지금 박·세분 눈금·계단 점). 움직임(R45): 진행 호와 점이 박에 맞춰 돌고 첫 박에 바퀴가 잠깐 물듦, reduced-motion 이면 박마다 끊어 옮김.
   전체 화면(R46): 무대만(컨테이너 질의는 원래 폭 기준이라 전체 화면 배치는 따로 적음). */
.mno{container:mno / inline-size}
.mno [hidden]{display:none !important}
.mno-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"dial" "tr" "bpm" "map" "meter" "sub" "grp" "snd" "foot" "msg";gap:14px;padding:18px;background:var(--card)}
.mno-stage:focus{outline:0}
.mno-dialw{grid-area:dial;align-self:center;min-width:0}
.mno-grp{grid-area:grp}.mno-bpmg{grid-area:bpm}.mno-map{grid-area:map}.mno-tr{grid-area:tr}.mno-meter{grid-area:meter}.mno-sub{grid-area:sub}.mno-snd{grid-area:snd}.mno-foot{grid-area:foot}.mno-msg{grid-area:msg}
.mno-grp,.mno-bpmg,.mno-map,.mno-meter,.mno-sub,.mno-snd{display:flex;flex-direction:column;gap:6px;min-width:0}
@container mno (min-width:620px){
  .mno-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;grid-template-areas:"dial tr" "dial bpm" "dial map" "dial meter" "sub grp" "snd snd" "foot foot" "msg msg"}
}
@container mno (min-width:760px){
  .mno-stage{grid-template-areas:"dial tr" "dial bpm" "dial map" "dial meter" "dial sub" "grp snd" "foot foot" "msg msg"}
}

/* ---------- 박 바퀴 ---------- */
.mno-dial{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1;container:mnod / inline-size;--sz3:max(30px,12.5cqw);--sz2:max(27px,10.5cqw);--sz1:max(24px,9cqw)}
@container mno (min-width:620px){ .mno-dial{max-width:460px} }
.mno-dial::before{content:"";position:absolute;inset:16%;border-radius:50%;background:var(--accent-wash);opacity:0;pointer-events:none}
.mno-dial.is-acc::before{animation:mno-acc .38s ease-out}
@keyframes mno-acc{0%{opacity:1}100%{opacity:0}}
.mno-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mno-trk{fill:none;stroke:var(--soft);stroke-width:2.4}
.mno-dial.is-rest .mno-trk{stroke-dasharray:3 4}
.mno-arc{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:527.79;stroke-dashoffset:527.79}
.mno-ticks line{stroke:var(--line);stroke-width:1.5;stroke-linecap:round}
.mno-ticks line.is-on{stroke:var(--accent);stroke-width:2.4}
.mno-com circle{fill:var(--accent)}
.mno-work:not(.is-on) .mno-com,.mno-work:not(.is-on) .mno-arc{opacity:0}
.mno-dots{position:absolute;inset:0}
.mno-dot{position:absolute;display:grid;place-items:center;width:var(--sz1);height:var(--sz1);padding:0;transform:translate(-50%,-50%);border:1.5px solid var(--line);border-radius:50%;background:var(--paper);color:var(--muted);font-family:var(--sans);font-size:max(10.5px,3.3cqw);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.mno-dot[data-l="3"]{width:var(--sz3);height:var(--sz3);background:var(--ink);border-color:var(--ink);color:var(--paper);font-size:max(11.5px,3.9cqw)}
.mno-dot[data-l="2"]{width:var(--sz2);height:var(--sz2);background:color-mix(in srgb, var(--ink) 45%, var(--paper));border-color:color-mix(in srgb, var(--ink) 45%, var(--paper));color:var(--paper)}
.mno-dot[data-l="0"]{border-style:dashed;background:transparent;color:color-mix(in srgb, var(--muted) 70%, transparent)}
.mno-dot:hover{border-color:var(--ink)}
.mno-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mno-dot.is-now{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.mno-dot.is-now[data-l="0"]{background:var(--accent-wash);color:var(--accent)}
.mno-dial.is-rest .mno-dot.is-now{background:transparent;border-color:var(--accent);color:var(--accent)}
.mno-dot.is-hit{animation:mno-hit .17s ease-out}
@keyframes mno-hit{0%{transform:translate(-50%,-50%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(1)}}
.mno-core{position:absolute;inset:23%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1cqw;text-align:center;pointer-events:none}
.mno-big{font-family:var(--sans);font-size:21cqw;font-weight:800;line-height:.92;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.mno-u{font-family:var(--mono);font-size:max(10px,3.3cqw);font-weight:700;letter-spacing:.14em;color:var(--muted)}
.mno-eq{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .7em;margin-top:.6cqw;font-family:var(--sans);font-size:max(11.5px,4cqw);font-weight:700;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.mno-eq > span{white-space:nowrap}
.mno-eqb{color:var(--muted);font-weight:600}
.mno-nt{display:inline-block;width:.62em;height:.95em;margin-right:.1em;vertical-align:-.14em}
.mno-gap{font-family:var(--sans);font-size:max(11px,3.5cqw);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.mno-rest{min-height:1.25em;font-family:var(--sans);font-size:max(11px,3.6cqw);font-weight:700;color:var(--accent)}

/* ---------- 조작 ---------- */
.mno-chips{display:flex}
.mno-chips button,.mno-sndseg button{height:var(--v2-ctl,42px)}
.mno-chips button{font-variant-numeric:tabular-nums}
.mno-custom{display:inline-flex;align-items:center;height:var(--v2-ctl,42px);padding:0 4px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.mno-hint,.mno-cd{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.mno-err{margin:0;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--accent)}
.mno-err:empty{display:none}
.mno-bpmrow{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:6px}
.mno-bpmrow.is-invalid .v2-input{border-color:var(--accent)}
.mno-sq{justify-content:center;width:42px;padding:0}
.mno-sq .i{width:16px;height:16px}
.mno-maphd{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.mno-term{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.mno-bands{position:relative;height:calc(var(--rows,3) * 16px - 2px);margin:2px 8px 0}
.mno-band{position:absolute;top:calc(var(--r) * 16px);height:14px;overflow:hidden;font-style:normal;font-size:10px;line-height:14px;border-radius:1px;background:color-mix(in srgb, var(--line) 32%, var(--paper));cursor:pointer;transition:background .12s}
.mno-band:hover{background:color-mix(in srgb, var(--line) 55%, var(--paper))}
.mno-band span{display:inline-block;max-width:none;padding:0 3px;font-family:var(--sans);font-size:10px;font-weight:600;line-height:14px;color:var(--muted);white-space:nowrap}
.mno-band.is-on{background:var(--fill)}
.mno-band.is-on span{color:var(--on-fill)}
.mno-range{display:block;width:100%;height:24px;margin:0;accent-color:var(--ink);cursor:pointer}
.mno-scale{position:relative;height:13px;margin:-2px 8px 0;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.mno-scale span{position:absolute;top:0;transform:translateX(-50%)}
.mno-scale span:first-child{transform:none}
.mno-tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 42px;gap:6px}
.mno-play,.mno-tap{justify-content:center;min-width:0;font-size:14px}
.mno-pi{display:inline-grid;place-items:center;width:16px;height:16px}
.mno-pi .i{width:16px;height:16px}
.mno-pi i{display:none;width:11px;height:11px;border-radius:1px;background:currentColor}
.mno-work.is-on .mno-pi .i{display:none}
.mno-work.is-on .mno-pi i{display:block}
.mno-tap .i{width:17px;height:17px}
.mno-tap small{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mno-tap small:empty{display:none}
.mno-tap.is-hit{animation:mno-tap .2s ease-out}
@keyframes mno-tap{0%{background:color-mix(in srgb, var(--accent) 22%, var(--btn))}}
.mno-mrow{display:flex;flex-wrap:wrap;gap:6px}
.mno-nstep{display:inline-grid;grid-template-columns:38px minmax(52px,auto) 38px;height:var(--v2-ctl,42px);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.mno-nstep button{display:grid;place-items:center;padding:0;border:0;background:var(--btn);color:var(--ink);cursor:pointer}
.mno-nstep button:hover{background:var(--btn-hover)}
.mno-nstep button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mno-nstep .i{width:14px;height:14px}
.mno-nstep output{display:grid;place-items:center;padding:0 6px;font-family:var(--sans);font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mno-dseg{flex-wrap:nowrap}
.mno-dseg button,.mno-subseg button{display:inline-flex;align-items:center;justify-content:center;gap:2px;height:var(--v2-ctl,42px);padding:0 9px}
.mno-dseg .mno-nt{width:10px;height:16px;margin:0;vertical-align:0}
.mno-dseg button span{font-variant-numeric:tabular-nums}
.mno-subseg{flex-wrap:nowrap}
.mno-subseg button{min-width:44px;padding:0 8px}
.mno-bm{display:block;height:21px;width:auto}
.mno-srow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.mno-vol{display:flex;align-items:center;gap:8px;flex:1 1 150px;min-width:140px}
.mno-vol .mno-vr{min-width:0;flex:1 1 0;width:100%}
.mno-vr{flex:1 1 auto;width:auto}
.mno-vol output{min-width:3.2em;text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted)}
.mno-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding-top:12px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.mno-stat b{margin-left:3px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mno-fhint{display:none}
.mno-reset{margin-left:auto;min-height:28px;padding:0 2px;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mno-reset:hover{color:var(--ink)}
.mno-msg:empty{display:none}
.mno-msg{margin:-6px 0 0}

/* ---------- 연습 카드 ---------- */
.mno-cards{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;row-gap:0;border-top:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.mno-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:9px;align-content:start;min-width:0;padding:16px 18px}
.mno-card > *{min-width:0}
.mno-card > .v2-switch{justify-self:start}
.mno-card + .mno-card{border-top:1px solid var(--soft)}
@container mno (min-width:560px){
  .mno-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mno-card + .mno-card{border-top:0;border-left:1px solid var(--soft)}
}
.mno-pt span{font-size:13.5px;font-weight:700}
.mno-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mno-fields--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mno-fields .v2-input input{padding:0 8px}
.mno-fields .v2-input b{min-width:0;padding:0 7px}
.mno-stair{display:block;width:100%;height:64px;overflow:visible}
.mno-stair-a{fill:color-mix(in srgb, var(--ink) 7%, transparent)}
.mno-stair-l{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.mno-stair-p{fill:var(--accent);stroke:var(--card);stroke-width:2}
.mno-bars{display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,1fr));gap:3px;min-height:40px}
.mno-bars i{display:grid;place-items:center;border-radius:2px;background:color-mix(in srgb, var(--ink) 62%, var(--paper));font-family:var(--sans);font-size:11px;font-style:normal;font-weight:700;color:var(--paper);font-variant-numeric:tabular-nums}
.mno-bars i.is-rest{color:var(--muted)}
.mno-bars i.is-rest{background:transparent;border:1.5px dashed var(--line)}
.mno-bars i.is-now{outline:2px solid var(--accent);outline-offset:1px}
.mno-sum{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.mno-card.is-off .mno-stair,.mno-card.is-off .mno-bars,.mno-card.is-off .mno-sum{opacity:.45}

/* ---------- 전체 화면(R46) ---------- */
html.mno-noscroll{overflow:hidden}
.mno-stage.is-full{position:fixed;inset:0;z-index:2147483000;overflow:auto}
.mno-stage:fullscreen{overflow:auto}
.mno-stage:fullscreen,.mno-stage.is-full{grid-template-columns:minmax(0,min(62vh,52vw)) minmax(280px,400px);grid-template-areas:"dial tr" "dial bpm" "dial map" "dial meter" "dial sub" "grp snd" "foot foot" "msg msg";justify-content:center;align-content:center;column-gap:44px;padding:20px 28px;background:var(--card)}
.mno-stage:fullscreen .mno-dial,.mno-stage.is-full .mno-dial{max-width:none}
.mno-stage:fullscreen .mno-fhint,.mno-stage.is-full .mno-fhint{display:inline}
@media (max-aspect-ratio:1/1){
  .mno-stage:fullscreen,.mno-stage.is-full{grid-template-columns:minmax(0,min(92vw,52vh));grid-template-areas:"dial" "tr" "bpm" "foot" "msg";align-content:start}
  .mno-stage:fullscreen :is(.mno-grp,.mno-map,.mno-meter,.mno-sub,.mno-snd),.mno-stage.is-full :is(.mno-grp,.mno-map,.mno-meter,.mno-sub,.mno-snd){display:none}
}
@media (prefers-reduced-motion:reduce){
  .mno-com{display:none}
  .mno-dot,.mno-band{transition:none}
}