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>

public/styles.css

@@ -219,18 +219,71 @@ body.siteBody.centerLayout { display: flex; align-items: center; justify-content
 .videoPanel video {
   width: 100%; max-height: 60vh; background: #000; border-radius: 10px;
 }
-.trimControls {
+.trimTimeline {
   background: var(--bg-card); border: 1px solid var(--border);
   border-radius: 10px; padding: 16px;
-  display: flex; flex-wrap: wrap; gap: 18px;
+  display: flex; flex-direction: column; gap: 14px;
 }
-.trimControls label {
-  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
-  color: var(--text-muted);
+.trimTimelineHeader {
+  display: flex; justify-content: space-between; align-items: center;
+  gap: 12px; flex-wrap: wrap;
 }
-.trimControls input {
-  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
-  color: var(--text); padding: 8px 10px; font-size: 14px; width: 180px;
+.timeReadout {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 14px; color: var(--text);
+}
+.trimTimelineActions { display: flex; gap: 6px; flex-wrap: wrap; }
+.trimTimelineActions button {
+  background: var(--bg); border: 1px solid var(--border); color: var(--text);
+  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
+}
+.trimTimelineActions button:hover { background: var(--bg-alt); border-color: var(--accent); }
+.trimBar {
+  position: relative; height: 44px; margin: 8px 14px;
+  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
+  user-select: none; touch-action: none; cursor: pointer;
+}
+.trimRangeFill {
+  position: absolute; top: 0; bottom: 0;
+  background: rgba(47, 129, 247, 0.22);
+  border-left: 2px solid var(--accent);
+  border-right: 2px solid var(--accent);
+  pointer-events: none;
+}
+.trimHandle {
+  position: absolute; top: -6px; bottom: -6px;
+  width: 14px; margin-left: -7px;
+  background: var(--accent); border-radius: 4px;
+  cursor: ew-resize;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+  z-index: 2;
+}
+.trimHandle:hover, .trimHandle.dragging { background: var(--accent-hover); }
+.trimHandle::before {
+  content: ''; width: 2px; height: 60%; background: rgba(255,255,255,0.85);
+  border-radius: 1px;
+}
+.trimPlayhead {
+  position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
+  background: #ffffff; pointer-events: none;
+  box-shadow: 0 0 4px rgba(255,255,255,0.45);
+  z-index: 1;
+}
+.trimNumericRow {
+  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
+}
+.trimNumericRow label {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 13px; color: var(--text-muted);
+}
+.trimNumericRow input {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
+  color: var(--text); padding: 6px 10px; font-size: 14px; width: 110px;
+}
+.trimDuration {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px; color: var(--text-muted);
 }
 .adminFolder { position: relative; }
 .adminVideo { position: relative; }