feat(editor): timeline scrubber with draggable trim handles

영상편집기에 lossless-cut 류 트림 타임라인 추가. 숫자 입력만 있던 기존 UI 를
시각적 재생바 + 좌/우 드래그 핸들 + 플레이헤드로 교체.

- 좌/우 파란 핸들을 끌어 in/out 점 설정 (pointer events 기반, 터치 지원)
- 흰색 플레이헤드가 영상 재생 위치 따라감
- 타임라인 빈 공간 클릭 → 그 지점으로 시킹
- "[ 시작점" / "끝점 ]" 버튼으로 현재 시점 마크
- "선택 재생" 으로 선택구간만 미리보기, "초기화" 로 전체 선택 복원
- 기존 숫자 입력은 보조 입력으로 유지하고 상태와 양방향 동기화

저장 페이로드는 그대로 (startSec/endSec). 서버측 ffmpeg 트림 로직 변경 없음.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

views/op/editor.ejs

@@ -36,18 +36,29 @@
       <div id="videoPanel" class="videoPanel" <% if (!video) { %>hidden<% } %>>
         <video id="editVideo" controls preload="metadata"
           <% if (video) { %>src="/api/video/<%= video.id %>/file?edited=0"<% } %>></video>
-        <div class="trimControls">
-          <label>
-            <span>시작(초)</span>
-            <input type="number" id="startSec" step="0.1" min="0" value="<%= video && video.trim ? video.trim.startSec : 0 %>" />
-            <button type="button" class="secondaryButton" data-set-current="start">현재 시점</button>
-          </label>
-          <label>
-            <span>종료(초, 비우면 끝까지)</span>
-            <input type="number" id="endSec" step="0.1" min="0" value="<%= video && video.trim && video.trim.endSec != null ? video.trim.endSec : '' %>" />
-            <button type="button" class="secondaryButton" data-set-current="end">현재 시점</button>
-          </label>
-          <p class="muted">저장하면 ffmpeg 가 원본을 보존한 채 편집본을 만듭니다.</p>
+
+        <div class="trimTimeline">
+          <div class="trimTimelineHeader">
+            <span class="timeReadout" id="timeReadout">00:00.0 / 00:00.0</span>
+            <div class="trimTimelineActions">
+              <button type="button" data-mark="start" title="현재 시점을 시작점으로">[&nbsp;시작점</button>
+              <button type="button" data-mark="end" title="현재 시점을 끝점으로">끝점&nbsp;]</button>
+              <button type="button" data-action="playSelection" title="선택 구간만 재생">▶ 선택 재생</button>
+              <button type="button" data-action="reset" title="자르기 초기화">초기화</button>
+            </div>
+          </div>
+          <div class="trimBar" id="trimBar">
+            <div class="trimRangeFill" id="trimRangeFill"></div>
+            <div class="trimHandle trimHandleStart" id="trimHandleStart" data-handle="start" title="시작 핸들"></div>
+            <div class="trimHandle trimHandleEnd" id="trimHandleEnd" data-handle="end" title="끝 핸들"></div>
+            <div class="trimPlayhead" id="trimPlayhead"></div>
+          </div>
+          <div class="trimNumericRow">
+            <label>시작(초) <input type="number" id="startSec" step="0.1" min="0" value="<%= video && video.trim ? video.trim.startSec : 0 %>" /></label>
+            <span class="trimDuration" id="trimDuration">선택: 0.0초</span>
+            <label>끝(초, 비우면 끝까지) <input type="number" id="endSec" step="0.1" min="0" value="<%= video && video.trim && video.trim.endSec != null ? video.trim.endSec : '' %>" /></label>
+          </div>
+          <p class="muted">재생바의 양쪽 파란 핸들을 끌어 구간을 정합니다. 타임라인을 클릭하면 그 지점으로 이동. 저장하면 ffmpeg 가 원본을 보존한 채 편집본을 만듭니다.</p>
         </div>
       </div>
     </section>