/* WAV MP3 변환기 '대역 창' — 2026-10-20. 방향 두 칸 + 파일 추가 → 스펙트럼 무대(평균 세기 면, 빠지는 대역 빗금, '비어 있음' 점선, 듣는 동안 실시간 선) + 듣기 막대
   → 설정 띠 → 결과 칸(큰 크기 | 크기 비교 막대 | 바꾸기·저장) → 파일 목록(2개 이상). 작업면 폭(container wx) 700px 이하 결과 두 열, 560px 이하 설정 한 열·선택지 3칸 두 줄, 480px 이하 결과 한 열.
   accent는 빠지는 대역·실시간 선·결과 크기 막대에만. */
.wx-work{position:relative;display:grid;gap:14px;padding:16px 18px 14px;container:wx / inline-size}
.wx-work [hidden]{display:none !important}
.wx-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 방향 두 칸 + 파일 추가 */
.wx-head{display:flex;align-items:stretch;gap:10px}
.wx-dir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;flex:1 1 auto;min-width:0}
.wx-dir button{height:auto;min-height:50px;display:grid;align-content:center;gap:2px;padding:6px 14px;text-align:left;cursor:pointer}
.wx-dir b{font-size:14.5px;font-weight:750;color:var(--ink);white-space:nowrap}
.wx-dir small{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:600;color:var(--muted);min-width:0}
.wx-dir em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:700}
.wx-dir button[aria-pressed="true"] b,.wx-dir button[aria-pressed="true"] small{color:var(--on-fill)}
.wx-dir button:disabled{cursor:default}
.wx-add{height:auto;min-height:50px;padding:0 18px;cursor:pointer;white-space:nowrap}
.wx-add .i{width:16px;height:16px}
.wx-input:focus-visible + .wx-add{outline:2px solid var(--accent);outline-offset:2px}

/* 스펙트럼 무대 */
.wx-stage{display:grid;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.wx-sthead{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:6px 14px;padding:11px 10px 8px 14px}
.wx-fname{margin:0;display:grid;gap:2px;min-width:0}
.wx-sthead .wx-leg{grid-column:2;grid-row:1;justify-content:flex-end}
.wx-sthead .wx-del{grid-column:3;grid-row:1}
.wx-fname b{display:flex;align-items:baseline;gap:8px;min-width:0;font-family:var(--sans);font-size:14.5px;font-weight:750;color:var(--ink)}
.wx-fname b > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-tag{flex:none;font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent)}
.wx-fname > span{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.wx-leg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wx-leg li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.wx-leg li::before{content:"";flex:none;width:14px;height:9px;border-radius:1px}
.wx-leg-a::before{background:color-mix(in srgb,var(--fill) 26%,transparent);box-shadow:inset 0 2px 0 var(--fill)}
.wx-leg-c::before{border-left:2px solid var(--accent);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 34%,transparent) 0 2px,transparent 2px 4px)}
.wx-leg li.wx-leg-l::before{height:2px;background:var(--accent)}
.wx-work:not(.is-play) .wx-leg-l{opacity:.55}
.wx-plot{position:relative;height:214px;margin:0 14px}
.wx-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.wx-area{fill:color-mix(in srgb,var(--fill) 20%,transparent)}
.wx-edge{fill:none;stroke:var(--fill);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wx-live{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wx-grid{position:absolute;inset:0;pointer-events:none}
.wx-grid i,.wx-cut,.wx-ceil,.wx-cb i,.wx-ra,.wx-rb{font-style:normal}
.wx-del{align-self:center}
.wx-grid i{position:absolute;left:0;right:0;border-top:1px dashed var(--soft)}
.wx-grid i span,.wx-grid b{position:absolute;left:0;top:2px;font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:1;color:var(--muted)}
.wx-grid b{top:0;font-weight:700}
.wx-cut{position:absolute;top:0;bottom:0;right:0;border-left:2px solid var(--accent);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,transparent) 0 5px,transparent 5px 11px);transition:left .42s cubic-bezier(.2,.7,.2,1)}
.wx-ceil{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--ink);transition:left .42s cubic-bezier(.2,.7,.2,1)}
.wx-lab{position:absolute;left:0;max-width:calc(100% - 4px);padding:3px 8px;border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;transition:left .42s cubic-bezier(.2,.7,.2,1)}
.wx-lab.is-wrap{white-space:normal}
.wx-plot.is-snap .wx-lab{transition:none}
.wx-lab--cut{top:8px;border:1px solid var(--accent)}
.wx-lab--ceil{bottom:8px;padding:2px 6px;font-size:11px;font-weight:650;box-shadow:0 0 0 1px var(--soft)}
.wx-empty{position:absolute;inset:6px 0;display:grid;place-content:center;justify-items:center;gap:12px;padding:12px;text-align:center;border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--paper)}
.wx-empty p{margin:0;display:grid;gap:4px}
.wx-empty b{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--ink)}
.wx-empty span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.wx-msg{position:absolute;inset:0;display:grid;place-content:center;margin:0;padding:12px;text-align:center;font-family:var(--sans);font-size:13px;color:var(--muted);background:color-mix(in srgb,var(--paper) 88%,transparent)}
.wx-axis{position:relative;height:22px;margin:0 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.wx-axis span{position:absolute;top:5px;transform:translateX(-50%);white-space:nowrap}
.wx-axis span:first-child{transform:none}
.wx-axis span.is-end{transform:translateX(-100%)}
.wx-player{display:flex;align-items:center;gap:10px;padding:9px 14px 10px;border-top:1px solid var(--soft);background:var(--card)}
.wx-play{min-width:86px;justify-content:center}
.wx-ip-pause{display:none}
.wx-work.is-play .wx-ip-play{display:none}
.wx-work.is-play .wx-ip-pause{display:inline}
.wx-src{flex:none}
.wx-src button:disabled{opacity:.45;cursor:not-allowed}
.wx-seek{flex:1 1 auto;min-width:60px;height:20px;margin:0;accent-color:var(--fill);cursor:pointer}
.wx-seek:disabled{cursor:default;opacity:.5}
.wx-time{flex:none;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}

/* 설정 띠 */
.wx-set{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 18px}
.wx-f{display:grid;gap:6px;min-width:0}
.wx-f--k{flex:1 1 360px}
.wx-f--c{flex:0 1 auto}
.wx-f--r{flex:1 1 100%}
#wxSetM .wx-f--b,#wxSetM .wx-f--c{flex:1 1 0}
.wx-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.wx-opts button{height:auto;min-height:44px;display:grid;align-content:center;justify-items:center;gap:1px;padding:4px 9px;line-height:1.25;cursor:pointer}
.wx-opts b{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.wx-opts small{font-family:var(--sans);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.wx-opts small:empty{display:none}
.wx-opts button[aria-pressed="true"] b,.wx-opts button[aria-pressed="true"] small{color:var(--on-fill)}
.wx-opts button:disabled{opacity:.5;cursor:not-allowed}
.wx-f--c .wx-opts button,.wx-f--b .wx-opts button{padding:4px 13px}

/* 결과 칸 */
.wx-res{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr) minmax(156px,auto);align-items:center;gap:14px 22px;padding:14px 16px;border-radius:var(--radius)}
.wx-rbig{display:grid;gap:3px;min-width:0}
.wx-big{margin:0;font-family:var(--sans);font-size:38px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.wx-sub{margin:0;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.wx-cmp{display:grid;gap:7px;min-width:0}
.wx-cr{margin:0;display:grid;grid-template-columns:34px minmax(0,1fr) max-content;align-items:center;gap:8px}
.wx-cl{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted)}
.wx-cb{position:relative;height:14px;border-radius:2px;background:color-mix(in srgb,var(--soft) 55%,transparent)}
.wx-cb i{position:absolute;left:0;top:0;bottom:0;max-width:100%;border-radius:2px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.wx-cr--a i{background:color-mix(in srgb,var(--fill) 34%,transparent)}
.wx-cr--b i:first-child{z-index:1;background:var(--accent)}
.wx-cbp{box-sizing:border-box;border:1.5px dashed var(--accent);background:transparent}
.wx-cv{min-width:66px;text-align:right;font-family:var(--sans);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.wx-ratio{margin:0;padding-left:42px;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.wx-ratio:empty{display:none}
.wx-acts{display:grid;gap:6px}
.wx-acts .v2-btn{justify-content:center;white-space:nowrap}
.wx-work.is-reduce .wx-cut,.wx-work.is-reduce .wx-ceil,.wx-work.is-reduce .wx-lab,.wx-work.is-reduce .wx-cb i{transition:none}

/* 파일 목록: 줄 높이 고정, 6줄 넘으면 스크롤(걸친 줄 없게 6 × 52 + 5 × 4) */
.wx-list{display:grid;gap:6px}
.wx-lhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wx-lhead .v2-label{font-variant-numeric:tabular-nums}
.wx-rows{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:52px;gap:4px;max-height:332px;overflow:auto;overscroll-behavior:contain}
.wx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,120px) max-content 40px max-content 30px;align-items:center;gap:10px;padding-right:6px;border:1px solid var(--soft);border-radius:var(--radius);background:linear-gradient(90deg,var(--wx-pf,var(--paper)) calc(var(--p,0) * 100%),var(--paper) 0)}
.wx-row.is-run{--wx-pf:color-mix(in srgb,var(--accent) 12%,var(--paper))}
.wx-row.is-done{--wx-pf:color-mix(in srgb,var(--fill) 6%,var(--paper))}
.wx-row[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wx-rsel{display:grid;align-content:center;gap:2px;height:100%;min-width:0;padding:0 12px;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit}
.wx-rsel:focus-visible,.wx-rdel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wx-rn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.wx-rspec{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.wx-rsz{display:block}
.wx-rbar{position:relative;display:block;height:16px}
.wx-ra,.wx-rb{position:absolute;left:0;height:6px;max-width:100%;border-radius:1px}
.wx-ra{top:1px;background:color-mix(in srgb,var(--fill) 34%,transparent)}
.wx-rb{bottom:1px;background:var(--accent)}
.wx-rv{font-family:var(--sans);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:right}
.wx-rst{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;white-space:nowrap}
.wx-row.is-done .wx-rst{color:var(--ink)}
.wx-row.is-err .wx-rst,.wx-row.is-err .wx-rspec{color:var(--accent)}
.wx-rsave{height:30px}
.wx-rdel{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer}
.wx-rdel:hover{background:var(--btn);color:var(--ink)}
.wx-rdel:disabled{opacity:.4;cursor:not-allowed}
.wx-rdel .i{width:15px;height:15px}

/* 끌어 놓기 */
.wx-dropover{position:absolute;inset:0;z-index:5;display:none;place-items:center;border:2px dashed var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--paper) 86%,transparent);pointer-events:none;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink)}
.wx-work.is-drag .wx-dropover{display:grid}
.wx-status{margin:0}
.wx-noscript{margin:0;font-family:var(--sans);font-size:13px;color:var(--muted)}

@container wx (max-width:700px){
  .wx-sthead .wx-leg{grid-column:1 / -1;grid-row:2;justify-content:flex-start}
  .wx-res{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .wx-acts{grid-column:1 / -1;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .wx-row{grid-template-columns:minmax(0,1fr) max-content max-content 30px}
  .wx-rsz,.wx-rst{display:none}
}
@container wx (max-width:560px){
  .wx-head{flex-wrap:wrap}
  .wx-add{width:100%;min-height:42px;justify-content:center}
  .wx-f{flex:1 1 100%}
  .wx-kbps,.wx-rates{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .wx-plot{height:172px}
  .wx-leg{display:none}
  .wx-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play src src" "seek seek time";row-gap:8px}
  .wx-play{grid-area:play}
  .wx-src{grid-area:src;justify-self:start}
  .wx-seek{grid-area:seek;width:100%}
  .wx-time{grid-area:time}
}
@container wx (max-width:480px){
  .wx-res{grid-template-columns:minmax(0,1fr)}
  .wx-big{font-size:32px}
  .wx-dir button{padding:6px 10px}
  .wx-dir small{font-size:11px}
  .wx-row{grid-template-columns:minmax(0,1fr) max-content 30px}
  .wx-rv{display:none}
}