/* 오디오·MP3 자르기 '편집 테이블' — 2026-10-23. 할 일 두 칸 + 파일 열기 → 전폭 파형(구간·페이드 모양·재생 선) + 눈금 + 듣기 줄
   → 경계 돋보기 두 칸 → 설정 띠(길이 | 페이드 인 | 페이드 아웃 / 형식 | 음질, 지우기는 페이드 대신 이음매) → 결과 칸(길이·크기 | 결과 띠 | 자르기·내려받기).
   작업면 폭(container acu) 700px 이하 결과 두 열, 600px 이하 돋보기 한 열·설정 두 열, 480px 이하 결과 한 열. accent는 구간 경계·지울 구간·이음매에만. */
.acu-work{position:relative;display:grid;gap:14px;padding:16px 18px 14px;container:acu / inline-size}
.acu-work [hidden]{display:none !important}
.acu-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* 할 일 두 칸 + 파일 열기 */
.acu-head{display:flex;align-items:stretch;gap:10px}
.acu-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;flex:1 1 auto;min-width:0}
.acu-mode button{height:auto;min-height:50px;display:grid;align-content:center;gap:2px;padding:6px 14px;text-align:left;cursor:pointer}
.acu-mode b{font-size:14.5px;font-weight:750;color:var(--ink)}
.acu-mode small{font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.35}
.acu-mode button[aria-pressed="true"] b,.acu-mode button[aria-pressed="true"] small{color:var(--on-fill)}
.acu-open{height:auto;min-height:50px;padding:0 18px;cursor:pointer;white-space:nowrap}
.acu-open .i{width:16px;height:16px}
.acu-input:focus-visible + .acu-open{outline:2px solid var(--accent);outline-offset:2px}

/* 파형 무대 */
.acu-stage{display:grid;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.acu-sthead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:11px 8px 8px 14px}
.acu-fname{margin:0;display:grid;gap:2px;min-width:0}
.acu-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)}
.acu-fname b > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acu-tag{flex:none;font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent)}
.acu-fname > span{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.acu-x{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer}
.acu-x:hover{background:var(--btn);color:var(--ink)}
.acu-x .i{width:15px;height:15px}
.acu-ov{position:relative;height:152px;margin:0 14px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.acu-ov canvas,.acu-lpv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.acu-sel{position:absolute;top:0;bottom:0;pointer-events:none;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.acu-work[data-mode="delete"] .acu-sel{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent) 0 4px,transparent 4px 10px)}
.acu-h{position:absolute;top:0;bottom:0;width:26px;margin-left:-13px;cursor:ew-resize;outline:0;touch-action:none}
.acu-h i{position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--accent)}
.acu-h i::before{content:"";position:absolute;top:0;width:9px;height:20px;background:var(--accent)}
.acu-h--s i::before{left:0;border-radius:0 3px 3px 0}
.acu-h--e i::before{right:0;border-radius:3px 0 0 3px}
.acu-h:focus-visible i{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.acu-work:not(.has-src) .acu-sel,.acu-work:not(.has-src) .acu-h{display:none}
.acu-ph{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid var(--ink);pointer-events:none}
.acu-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)}
.acu-empty p{margin:0;display:grid;gap:4px}
.acu-empty b{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--ink)}
.acu-empty span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.acu-msg{position:absolute;inset:0;z-index:2;display:grid;place-content:center;margin:0;padding:12px;text-align:center;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--paper) 86%,transparent)}
.acu-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)}
.acu-axis span{position:absolute;top:5px;transform:translateX(-50%);white-space:nowrap}
.acu-axis span:first-child{transform:none}
.acu-axis span.is-end{transform:translateX(-100%)}
.acu-tp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:9px 14px 10px;border-top:1px solid var(--soft);background:var(--card)}
.acu-pb{min-width:104px;justify-content:center;white-space:nowrap}
.acu-pb.is-on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.acu-ip-stop,.acu-pb.is-on .acu-ip-play{display:none}
.acu-pb.is-on .acu-ip-stop{display:inline}
.acu-pos{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.acu-tpx{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.acu-work[data-mode="delete"] .acu-tpx{display:none}

/* 경계 돋보기 */
.acu-edit{min-width:0}
.acu-form{display:grid;gap:12px;margin:0}
.acu-lpw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.acu-lp{display:grid;gap:8px;align-content:start;min-width:0;padding:10px 12px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.acu-lph{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.acu-lph b{font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink);white-space:nowrap}
.acu-lv{font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:0}
.acu-lv[data-q="loud"]{color:var(--accent)}
.acu-lv[data-q="quiet"]{color:var(--ink)}
.acu-lpv{position:relative;height:78px;border-radius:var(--radius);background:var(--wash);overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.acu-lpl{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--accent);pointer-events:none}
.acu-lps{position:absolute;right:4px;bottom:3px;padding:0 4px;border-radius:2px;background:color-mix(in srgb,var(--wash) 85%,transparent);font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--muted);pointer-events:none}
.acu-lpf{display:block}
.acu-lpf > .v2-label{display:block;margin:0 0 5px}
.acu-nud{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:6px}
.acu-nud .v2-btn{justify-content:center;padding:0;font-size:17px;font-weight:600}
.acu-nud .v2-input input,.acu-f--len .v2-input input{text-align:center;font-family:var(--sans);letter-spacing:.01em}
.acu-lpf.is-invalid .v2-input{border-color:var(--accent)}
.acu-lpa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.acu-lpa .v2-btn{justify-content:center;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acu-hint{margin:-4px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}

/* 설정 띠 */
.acu-set{display:grid;grid-template-columns:minmax(132px,.75fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"len fi fo" "fmt q q";gap:12px 14px;align-items:start}
.acu-work[data-mode="delete"] .acu-set{grid-template-areas:"len xf xf" "fmt q q"}
.acu-work[data-mode="delete"] .acu-f--fi,.acu-work[data-mode="delete"] .acu-f--fo,.acu-work[data-mode="keep"] .acu-f--xf{display:none}
.acu-f{min-width:0}
.acu-f > .v2-label{display:block;margin:0 0 5px}
.acu-f--len{grid-area:len}.acu-f--fi{grid-area:fi}.acu-f--fo{grid-area:fo}.acu-f--xf{grid-area:xf}.acu-f--fmt{grid-area:fmt}.acu-f--q{grid-area:q}
.acu-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.acu-opts button{height:var(--v2-ctl);display:grid;align-content:center;justify-items:center;gap:1px;padding:0 5px;line-height:1.2;cursor:pointer;min-width:0}
.acu-opts b{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.acu-opts small{font-family:var(--sans);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.acu-opts small:empty{display:none}
.acu-opts button[aria-pressed="true"] b,.acu-opts button[aria-pressed="true"] small{color:var(--on-fill)}

/* 결과 칸 */
.acu-res{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr) minmax(150px,auto);grid-template-areas:"big tl acts";align-items:center;gap:12px 22px;padding:14px 16px;border-radius:var(--radius)}
.acu-rbig{grid-area:big;display:grid;gap:3px;min-width:0}
.acu-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}
.acu-big.is-empty{font-size:26px;color:var(--muted);opacity:.6}
.acu-sub{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.acu-sub.is-err{color:var(--accent);font-weight:600}
.acu-tl{grid-area:tl;display:grid;gap:7px;min-width:0}
.acu-tlb{position:relative;height:16px;border-radius:2px;background:color-mix(in srgb,var(--soft) 60%,transparent)}
.acu-tls{position:absolute;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--fill) 12%,transparent) 0,var(--fill) var(--fi,0%),var(--fill) var(--fo,100%),color-mix(in srgb,var(--fill) 12%,transparent) 100%)}
.acu-tlj{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--accent)}
.acu-tlt{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.acu-acts{grid-area:acts;display:grid;gap:6px}
.acu-acts .v2-btn{justify-content:center;white-space:nowrap}
.acu-prog{grid-column:1 / -1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--soft) 70%,transparent);overflow:hidden}
.acu-prog i{display:block;height:100%;width:0;background:var(--fill)}
.acu-out{grid-column:1 / -1;width:100%;height:40px}

.acu-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)}
.acu-work.is-drag .acu-dropover{display:grid}
.acu-status{margin:0}
.acu-status:empty{display:none}
.acu-noscript{margin:0;font-family:var(--sans);font-size:13px;color:var(--muted)}

@container acu (max-width:700px){
  .acu-res{grid-template-columns:minmax(0,1fr) minmax(150px,auto);grid-template-areas:"big acts" "tl tl"}
}
@container acu (max-width:600px){
  .acu-lpw{grid-template-columns:minmax(0,1fr)}
  .acu-set{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"len fmt" "fi fo" "q q"}
  .acu-work[data-mode="delete"] .acu-set{grid-template-areas:"len fmt" "xf xf" "q q"}
}
@container acu (max-width:440px){
  .acu-set{grid-template-areas:"len fmt" "fi fi" "fo fo" "q q"}
}
@container acu (max-width:480px){
  .acu-head{flex-wrap:wrap}
  .acu-open{width:100%;min-height:42px;justify-content:center}
  .acu-mode button{padding:6px 10px}
  .acu-ov{height:124px}
  .acu-res{grid-template-columns:minmax(0,1fr);grid-template-areas:"big" "tl" "acts"}
  .acu-big{font-size:32px}
  .acu-pb{min-width:0;flex:1 1 0}
  .acu-pos{flex:1 1 100%}
  .acu-tpx{margin-left:0;flex:1 1 100%}
  .acu-tpx .v2-btn{flex:1 1 0;justify-content:center}
}