/* 온라인 녹음기(online-voice-recorder) — 녹음 데스크. 작업면 컨테이너 ovrw: 위[데스크 | 파일로 저장 · 입력] → 녹음 목록 카드 → 상태 줄.
   데스크의 파형 칸이 남는 높이를 채운다(오른쪽 두 칸보다 짧아지지 않게). 강조색은 녹음 중 표시(점·시계·지금 선)와 남길 구간 손잡이에만 쓴다.
   파형 위치는 --a·--b(남길 구간 양 끝)·--x(재생 위치)·--now(실시간 끝) 비율. 680 이하: 한 열(데스크 → 저장 → 입력) / 400 이하: 여백·시계 줄임. */
.ovr{container:ovrw / inline-size;--ovr-tone:color-mix(in srgb, var(--wash) 70%, var(--paper));--ovr-ink:var(--ink);--ovr-mid:var(--soft)}
.ovr [hidden]{display:none !important}
.ovr p{margin:0}

/* ---------- 위: 데스크 | 저장 · 입력 ---------- */
.ovr-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"deck save" "deck in"}
.ovr-deck{grid-area:deck;display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 16px 14px;background:var(--ovr-tone)}
.ovr-save{grid-area:save;display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 16px 14px;border-left:1px solid var(--soft)}
.ovr-in{grid-area:in;display:flex;flex-direction:column;gap:9px;min-width:0;padding:12px 16px 14px;border-left:1px solid var(--soft);border-top:1px solid var(--soft)}
.ovr-cap{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted)}

.ovr-bar1{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.ovr-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.ovr-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovr-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);opacity:.45}
.ovr[data-state="on"] .ovr-dot{background:var(--ink);opacity:1}
.ovr[data-state="rec"] .ovr-dot{background:var(--accent);opacity:1;animation:ovr-blink 1.2s ease-in-out infinite}
.ovr[data-state="pause"] .ovr-dot{background:var(--accent);opacity:.5}
.ovr[data-state="wait"] .ovr-dot{animation:ovr-blink 1s ease-in-out infinite}
.ovr[data-state="rec"] .ovr-chip,.ovr[data-state="on"] .ovr-chip{color:var(--ink)}
@keyframes ovr-blink{50%{opacity:.15}}
.ovr-meter{position:relative;flex:0 1 150px;min-width:64px;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.ovr-meter > i:first-child{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.ovr-pk{position:absolute;top:0;bottom:0;left:calc(var(--x, 0) * 100% - 2px);width:2px;background:var(--ink);opacity:.45}
.ovr-meter.is-clip{background:var(--accent-wash)}
.ovr-meter.is-clip > i:first-child,.ovr-meter.is-clip .ovr-pk{background:var(--accent);opacity:1}
.ovr[data-state="demo"] .ovr-meter,.ovr[data-state="off"] .ovr-meter,.ovr[data-state="wait"] .ovr-meter{visibility:hidden}

.ovr-clock{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;font-family:var(--sans);line-height:1}
.ovr-clock b{font-size:44px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.ovr-clock span{font-size:12.5px;font-weight:600;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.ovr[data-state="rec"] .ovr-clock b{color:var(--accent)}

/* 파형: 남는 높이를 채움, 손잡이·가림·재생 선은 리뷰 때만 */
.ovr-wave{position:relative;flex:1 1 auto;min-height:124px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden;touch-action:pan-y;cursor:pointer}
.ovr-wave canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.ovr-shade{position:absolute;top:0;bottom:0;background:var(--ovr-tone);opacity:.8;pointer-events:none}
.ovr-shade--l{left:0;width:calc(var(--a) * 100%)}
.ovr-shade--r{left:calc(var(--b) * 100%);right:0}
.ovr-ph{position:absolute;top:0;bottom:0;left:calc(var(--x) * 100%);width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.ovr-h{position:absolute;top:0;bottom:0;width:26px;margin-left:-13px;cursor:ew-resize;touch-action:none;outline:0}
.ovr-h--a{left:calc(var(--a) * 100%)}
.ovr-h--b{left:calc(var(--b) * 100%)}
.ovr-h::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--accent)}
.ovr-h::after{content:"";position:absolute;top:0;width:11px;height:18px;background:var(--accent)}
.ovr-h--a::before{left:13px}
.ovr-h--a::after{left:13px;border-radius:0 0 3px 0}
.ovr-h--b::before{left:11px}
.ovr-h--b::after{left:2px;border-radius:0 0 0 3px}
.ovr-h:focus-visible::after{outline:2px solid var(--ink);outline-offset:1px}
.ovr[data-live="1"] .ovr-h,.ovr[data-live="1"] .ovr-shade,.ovr[data-live="1"] .ovr-ph,.ovr:not([data-sel="1"]) .ovr-h,.ovr:not([data-sel="1"]) .ovr-shade,.ovr:not([data-sel="1"]) .ovr-ph{display:none}
.ovr[data-live="1"] .ovr-wave{cursor:default}
.ovr[data-state="rec"] .ovr-wave::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--now, 0) * 100%);width:2px;margin-left:-2px;background:var(--accent)}
.ovr-ruler{position:relative;height:13px;margin-top:-5px;font-family:var(--mono);font-size:10.5px;line-height:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ovr-ruler i{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(calc(var(--x) * -100%));font-style:normal;white-space:nowrap}
.ovr[data-live="1"] .ovr-ruler{visibility:hidden}

.ovr-tr{display:flex;flex-wrap:wrap;gap:8px}
.ovr-tr .v2-btn{justify-content:center;gap:8px;min-width:0;font-size:13.5px}
.ovr-tr .i{width:15px;height:15px}
.ovr-rec{flex:1.4 1 150px}
.ovr-pause,.ovr-play{flex:1 1 104px}
.ovr-ri{flex:none;width:12px;height:12px;border-radius:50%;background:var(--accent);transition:border-radius var(--ease)}
.ovr[data-state="rec"] .ovr-ri,.ovr[data-state="pause"] .ovr-ri{border-radius:2px}
.ovr-play .ovr-i2,.ovr[data-play="1"] .ovr-play .ovr-i1{display:none}
.ovr[data-play="1"] .ovr-play .ovr-i2{display:inline}
.ovr .v2-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.ovr-trim{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:30px}
.ovr-tv{flex:1 1 150px;min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums}
.ovr-tb{height:30px;padding:0 10px;font-size:12px}
.ovr-tb .i{width:13px;height:13px}

/* ---------- 저장 ---------- */
.ovr-name input{text-align:left;padding-right:2px}
.ovr-ext{display:flex;flex:none;align-items:center;padding:0 10px 0 0;font-family:var(--mono);font-size:13px;color:var(--muted)}
.ovr .v2-input select{flex:1 1 auto;width:100%;min-width:0;height:calc(var(--v2-ctl) - 2px);padding:0 6px 0 9px;border:0;background:none;outline:0;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-overflow:ellipsis}
.ovr .v2-input select option{background:var(--paper);color:var(--ink)}
.ovr-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ovr-wq{display:inline-flex;align-items:center;min-height:30px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted)}
.ovr[data-fmt="mp3"] .ovr-wq,.ovr[data-fmt="wav"] .ovr-kb{display:none}
.ovr-size{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:var(--radius);background:var(--ovr-tone)}
.ovr-size b{font-family:var(--sans);font-size:24px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.ovr-size span{font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.ovr-sv{position:relative;justify-content:center;gap:8px;width:100%;overflow:hidden;font-size:14px}
.ovr-sv > *{position:relative}
.ovr-sv.is-busy::before{content:"";position:absolute;inset:0;background:var(--fill-hover);transform:scaleX(var(--p, 0));transform-origin:left;transition:transform 120ms linear}
.ovr-sv.is-busy[aria-disabled="true"]{opacity:1;cursor:progress}
.ovr-fine{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ---------- 입력 ---------- */
.ovr-proc{align-items:flex-start}
.ovr-proc i{margin-top:1px}
.ovr-proc span{display:flex;flex-direction:column;gap:1px;line-height:1.35}
.ovr-dv{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ovr-dev{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.ovr-off{flex:none;height:30px;font-size:12px}
.ovr[data-mic="1"] .ovr-off{background:var(--paper)}

/* ---------- 녹음 목록 ---------- */
.ovr-lst{padding:12px 16px 14px;border-top:1px solid var(--soft)}
.ovr-lh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:8px;font-family:var(--sans);font-size:12.5px}
.ovr-lh b{font-weight:700;color:var(--ink)}
.ovr-lh span{color:var(--muted);font-variant-numeric:tabular-nums}
.ovr-list{display:grid;grid-template-columns:repeat(var(--cols, 1),minmax(0,1fr));gap:8px}
.ovr-tk{position:relative;min-width:0}
.ovr-tkb{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;width:100%;padding:8px 10px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;color:var(--ink);cursor:pointer;box-shadow:inset 3px 0 transparent;transition:border-color var(--ease),box-shadow var(--ease)}
.ovr-tkb:hover{border-color:var(--line)}
.ovr-tkb:disabled{cursor:default;opacity:.6}
.ovr-tkb b{order:1;padding-right:28px;font-family:var(--sans);font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovr-tkb span{order:2;font-family:var(--sans);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ovr-tkb em{font-style:normal}
.ovr-tkb em.is-un{color:var(--ink);font-weight:650}
.ovr-tkb svg{order:3;display:block;width:100%;height:26px;margin-top:3px;fill:var(--line)}
.ovr-tk.is-sel .ovr-tkb{border-color:var(--line);box-shadow:inset 3px 0 var(--ink)}
.ovr-tk.is-sel .ovr-tkb svg{fill:var(--ink)}
.ovr-tkx{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius);color:var(--muted);transition:background var(--ease),color var(--ease)}
.ovr-tkx:hover{background:var(--btn);color:var(--ink)}
.ovr-tkx svg{width:14px;height:14px}
.ovr-tk.is-del .ovr-tkx{background:var(--fill);color:var(--on-fill)}
.ovr-empty{grid-column:1 / -1;padding:6px 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.ovr-msg{min-height:2.6em;padding:10px 16px 12px;border-top:1px solid var(--soft);line-height:1.5}

@container ovrw (max-width: 680px){
  .ovr-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"deck" "save" "in"}
  .ovr-deck{border-bottom:1px solid var(--soft)}
  .ovr-save{border-left:0}
  .ovr-in{border-left:0;border-top:1px solid var(--soft)}
  .ovr-wave{flex:none;height:136px;min-height:0}
  .ovr-tv{flex-basis:100%}
  .ovr-tb{flex:1 1 0;justify-content:center;min-width:0}
}
@container ovrw (max-width: 400px){
  .ovr-deck,.ovr-save,.ovr-in,.ovr-lst,.ovr-msg{padding-left:12px;padding-right:12px}
  .ovr-clock b{font-size:36px}
  .ovr-wave{height:112px}
}
@media (prefers-reduced-motion: reduce){
  .ovr-dot{animation:none !important}
  .ovr-sv.is-busy::before,.ovr-ri,.ovr-tkb{transition:none}
}