Update app.py

app.py

@@ -792,7 +792,21 @@ EDITOR_HTML = """
         
         /* ========== 파일 입력 숨기기 ========== */
         #fileInput {
-            display: none;
+            display: none !important;
+        }
+        
+        /* ========== 디버그 메시지 ========== */
+        .debug-msg {
+            position: fixed;
+            bottom: 10px;
+            left: 10px;
+            background: #000;
+            color: #0f0;
+            padding: 5px 10px;
+            font-size: 11px;
+            border-radius: 4px;
+            z-index: 9999;
+            font-family: monospace;
         }
     </style>
 </head>
@@ -816,13 +830,13 @@ EDITOR_HTML = """
                     </svg>
                     실행취소
                 </button>
-                <label class="btn btn-primary" for="fileInput" style="cursor:pointer">
+                <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()" title="파일 추가">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
                     </svg>
                     파일 추가
-                </label>
-                <input type="file" id="fileInput" multiple accept="video/*,image/*,audio/*">
+                </button>
+                <input type="file" id="fileInput" multiple accept="video/*,image/*,audio/*" onchange="handleFileUpload(this)">
                 <button class="btn btn-success" onclick="exportVideo()" id="exportBtn">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
@@ -838,12 +852,12 @@ EDITOR_HTML = """
             <div class="media-library">
                 <div class="library-header">📁 미디어</div>
                 <div class="library-content">
-                    <label class="upload-zone" for="fileInput">
+                    <div class="upload-zone" onclick="document.getElementById('fileInput').click()">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
                         </svg>
                         <p>클릭 또는 드래그<br>영상/이미지/오디오</p>
-                    </label>
+                    </div>
                     <div class="media-grid" id="mediaGrid"></div>
                 </div>
             </div>
@@ -951,7 +965,7 @@ EDITOR_HTML = """
                     </svg>
                 </div>
             </div>
-            <div class="timeline-container" id="timelineContainer">
+            <div class="timeline-container" id="timelineContainer" onclick="onTimelineClick(event)">
                 <div class="timeline-ruler" id="timelineRuler"></div>
                 <div class="timeline-tracks" id="timelineTracks">
                     <div class="timeline-track" data-track="0">
@@ -1019,287 +1033,222 @@ EDITOR_HTML = """
             <button class="btn btn-secondary" onclick="cancelExport()" id="cancelExportBtn">취소</button>
         </div>
     </div>
+    
+    <!-- 디버그 메시지 -->
+    <div class="debug-msg" id="debugMsg">Ready</div>
 
     <script>
         // ========================================
-        // 상태 관리 변수
+        // 전역 상태 변수
         // ========================================
-        let mediaLibrary = [];          // 업로드된 미디어 목록
-        let timelineClips = [];         // 타임라인 클립 목록
-        let selectedClipId = null;      // 선택된 클립 ID
-        let isPlaying = false;          // 재생 상태
-        let isMuted = false;            // 음소거 상태
-        let currentTime = 0;            // 현재 재생 시간
-        let totalDuration = 0;          // 전체 길이
-        let zoom = 1;                   // 타임라인 줌 레벨
-        let pixelsPerSecond = 80;       // 초당 픽셀
-        let undoStack = [];             // 실행취소 스택
-        let animationId = null;         // 애니메이션 프레임 ID
-        let trimData = null;            // 트림 작업 데이터
+        var mediaLibrary = [];
+        var timelineClips = [];
+        var selectedClipId = null;
+        var isPlaying = false;
+        var isMuted = false;
+        var currentTime = 0;
+        var totalDuration = 0;
+        var zoom = 1;
+        var pixelsPerSecond = 80;
+        var undoStack = [];
+        var animationId = null;
+        var trimData = null;
         
         // ========================================
-        // 초기화
+        // 디버그 함수
         // ========================================
-        document.addEventListener('DOMContentLoaded', function() {
-            // 파일 입력 이벤트 리스너
-            const fileInput = document.getElementById('fileInput');
-            fileInput.addEventListener('change', handleFileUpload);
-            
-            // 드래그앤드롭 전역 설정
-            document.addEventListener('dragover', function(e) {
-                e.preventDefault();
-            });
-            
-            document.addEventListener('drop', function(e) {
-                e.preventDefault();
-                if (e.target.closest('.upload-zone') || e.target.closest('.library-content')) {
-                    handleFileDrop(e);
-                }
-            });
-            
-            // 초기 타임라인 렌더링
-            renderTimeline();
-            
-            console.log('🎬 Simple Video Editor 초기화 완료');
-        });
+        function debug(msg) {
+            console.log('[VideoEditor]', msg);
+            var el = document.getElementById('debugMsg');
+            if (el) {
+                el.textContent = msg;
+                el.style.display = 'block';
+                setTimeout(function() { el.style.display = 'none'; }, 3000);
+            }
+        }
         
         // ========================================
         // 유틸리티 함수
         // ========================================
-        
-        /**
-         * 고유 ID 생성
-         */
         function generateId() {
             return Date.now().toString(36) + Math.random().toString(36).substr(2);
         }
         
-        /**
-         * 시간 포맷팅 (초 -> mm:ss.ms)
-         */
         function formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            const ms = Math.floor((seconds % 1) * 100);
-            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`;
+            var mins = Math.floor(seconds / 60);
+            var secs = Math.floor(seconds % 60);
+            var ms = Math.floor((seconds % 1) * 100);
+            return (mins < 10 ? '0' : '') + mins + ':' + (secs < 10 ? '0' : '') + secs + '.' + (ms < 10 ? '0' : '') + ms;
         }
         
-        /**
-         * 현재 상태 저장 (실행취소용)
-         */
         function saveState() {
             undoStack.push(JSON.stringify(timelineClips));
-            if (undoStack.length > 50) {
-                undoStack.shift();
-            }
+            if (undoStack.length > 50) undoStack.shift();
         }
         
-        /**
-         * 실행취소
-         */
         function undoAction() {
             if (undoStack.length > 0) {
                 timelineClips = JSON.parse(undoStack.pop());
                 renderTimeline();
                 updateDuration();
+                debug('실행취소');
             }
         }
         
         // ========================================
-        // 파일 업로드 처리
+        // 파일 업로드 - 핵심 수정!
         // ========================================
+        function handleFileUpload(input) {
+            debug('파일 업로드 시작!');
+            
+            var files = input.files;
+            if (!files || files.length === 0) {
+                debug('파일 없음');
+                return;
+            }
+            
+            debug('파일 ' + files.length + '개 처리 중...');
+            
+            for (var i = 0; i < files.length; i++) {
+                processFile(files[i]);
+            }
+            
+            // 입력 리셋
+            input.value = '';
+        }
         
-        /**
-         * 파일 입력 핸들러
-         */
-        function handleFileUpload(event) {
-            const files = event.target.files;
-            if (!files || files.length === 0) return;
-            
-            processFiles(Array.from(files));
-            event.target.value = ''; // 리셋
-        }
-        
-        /**
-         * 파일 드롭 핸들러
-         */
-        function handleFileDrop(event) {
-            const files = event.dataTransfer.files;
-            if (!files || files.length === 0) return;
-            
-            processFiles(Array.from(files));
-        }
-        
-        /**
-         * 파일 처리
-         */
-        function processFiles(files) {
-            console.log('📁 파일 처리 시작:', files.length, '개');
-            
-            files.forEach(file => {
-                // 파일 타입 확인
-                let type = null;
-                if (file.type.startsWith('video')) {
-                    type = 'video';
-                } else if (file.type.startsWith('image')) {
-                    type = 'image';
-                } else if (file.type.startsWith('audio')) {
-                    type = 'audio';
-                }
-                
-                if (!type) {
-                    console.log('⚠️ 지원하지 않는 파일 형식:', file.type);
-                    return;
-                }
-                
-                // Blob URL 생성
-                const url = URL.createObjectURL(file);
-                console.log('✅ ���일 추가:', file.name, type);
-                
-                // 미디어 객체 생성
-                const media = {
-                    id: generateId(),
-                    name: file.name,
-                    type: type,
-                    url: url,
-                    file: file,
-                    duration: type === 'image' ? 5 : 0,  // 이미지는 기본 5초
-                    thumbnail: type === 'image' ? url : null
-                };
-                
-                // 라이브러리에 추가
-                mediaLibrary.push(media);
-                renderMediaLibrary();
-                
-                // 비디오/오디오 메타데이터 로드
-                if (type === 'video' || type === 'audio') {
-                    loadMediaMetadata(media, type);
-                }
-            });
+        function processFile(file) {
+            var type = null;
+            if (file.type.indexOf('video') === 0) {
+                type = 'video';
+            } else if (file.type.indexOf('image') === 0) {
+                type = 'image';
+            } else if (file.type.indexOf('audio') === 0) {
+                type = 'audio';
+            }
+            
+            if (!type) {
+                debug('지원 안 함: ' + file.type);
+                return;
+            }
+            
+            var url = URL.createObjectURL(file);
+            debug('추가: ' + file.name + ' (' + type + ')');
+            
+            var media = {
+                id: generateId(),
+                name: file.name,
+                type: type,
+                url: url,
+                file: file,
+                duration: (type === 'image') ? 5 : 0,
+                thumbnail: (type === 'image') ? url : null
+            };
+            
+            mediaLibrary.push(media);
+            renderMediaLibrary();
+            
+            // 비디오/오디오 메타데이터 로드
+            if (type === 'video' || type === 'audio') {
+                loadMetadata(media);
+            }
         }
         
-        /**
-         * 미디어 메타데이터 로드
-         */
-        function loadMediaMetadata(media, type) {
-            const el = document.createElement(type);
+        function loadMetadata(media) {
+            var el = document.createElement(media.type);
             el.src = media.url;
             el.preload = 'metadata';
             
             el.onloadedmetadata = function() {
                 media.duration = el.duration;
-                console.log('📊 메타데이터 로드:', media.name, formatTime(el.duration));
+                debug('길이: ' + formatTime(el.duration));
                 renderMediaLibrary();
                 
-                // 비디오 썸네일 생성
-                if (type === 'video') {
+                if (media.type === 'video') {
                     el.currentTime = Math.min(1, el.duration / 2);
                 }
             };
             
             el.onseeked = function() {
-                if (type === 'video') {
-                    generateVideoThumbnail(el, media);
+                if (media.type === 'video') {
+                    try {
+                        var canvas = document.createElement('canvas');
+                        canvas.width = 160;
+                        canvas.height = 90;
+                        canvas.getContext('2d').drawImage(el, 0, 0, 160, 90);
+                        media.thumbnail = canvas.toDataURL();
+                        renderMediaLibrary();
+                    } catch(e) {
+                        debug('썸네일 실패');
+                    }
                 }
             };
-            
-            el.onerror = function(e) {
-                console.error('❌ 미디어 로드 오류:', media.name, e);
-            };
-        }
-        
-        /**
-         * 비디오 썸네일 생성
-         */
-        function generateVideoThumbnail(videoEl, media) {
-            try {
-                const canvas = document.createElement('canvas');
-                canvas.width = 160;
-                canvas.height = 90;
-                const ctx = canvas.getContext('2d');
-                ctx.drawImage(videoEl, 0, 0, 160, 90);
-                media.thumbnail = canvas.toDataURL();
-                renderMediaLibrary();
-            } catch(e) {
-                console.log('⚠️ 썸네일 생성 실패:', e);
-            }
         }
         
         // ========================================
         // 미디어 라이브러리 렌더링
         // ========================================
         function renderMediaLibrary() {
-            const grid = document.getElementById('mediaGrid');
+            var grid = document.getElementById('mediaGrid');
+            if (!grid) return;
+            
             grid.innerHTML = '';
             
-            // 타입별 아이콘
-            const typeIcons = {
+            var icons = {
                 video: '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>',
                 image: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
                 audio: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>'
             };
             
-            mediaLibrary.forEach(media => {
-                const item = document.createElement('div');
+            for (var i = 0; i < mediaLibrary.length; i++) {
+                var media = mediaLibrary[i];
+                var item = document.createElement('div');
                 item.className = 'media-item';
                 item.draggable = true;
-                item.dataset.mediaId = media.id;
-                
-                // 드래그 이벤트
-                item.ondragstart = function(e) {
-                    e.dataTransfer.setData('mediaId', media.id);
-                    item.style.opacity = '0.5';
-                };
+                item.setAttribute('data-media-id', media.id);
                 
-                item.ondragend = function() {
-                    item.style.opacity = '1';
-                };
+                // 클로저로 media 캡처
+                (function(m) {
+                    item.ondragstart = function(e) {
+                        e.dataTransfer.setData('mediaId', m.id);
+                        this.style.opacity = '0.5';
+                    };
+                    item.ondragend = function() {
+                        this.style.opacity = '1';
+                    };
+                    item.ondblclick = function() {
+                        addToTimeline(m);
+                    };
+                })(media);
                 
-                // 더블클릭으로 타임라인에 추가
-                item.ondblclick = function() {
-                    addToTimeline(media);
-                };
-                
-                // 썸네일 HTML
-                let thumbnailHtml = '';
+                var thumbHtml = '';
                 if (media.thumbnail) {
-                    thumbnailHtml = `<img src="${media.thumbnail}" alt="${media.name}">`;
+                    thumbHtml = '<img src="' + media.thumbnail + '" alt="' + media.name + '">';
                 } else {
-                    thumbnailHtml = `
-                        <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#e5e7eb;color:#9ca3af">
-                            ${typeIcons[media.type]}
-                        </div>
-                    `;
+                    thumbHtml = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#e5e7eb;color:#9ca3af">' + icons[media.type] + '</div>';
                 }
                 
-                item.innerHTML = `
-                    ${thumbnailHtml}
-                    <div class="media-item-type">${typeIcons[media.type]}</div>
-                    ${media.duration > 0 ? `<div class="media-item-duration">${formatTime(media.duration)}</div>` : ''}
-                    <div class="media-item-overlay">
-                        <span class="media-item-name">${media.name}</span>
-                    </div>
-                `;
+                item.innerHTML = thumbHtml +
+                    '<div class="media-item-type">' + icons[media.type] + '</div>' +
+                    (media.duration > 0 ? '<div class="media-item-duration">' + formatTime(media.duration) + '</div>' : '') +
+                    '<div class="media-item-overlay"><span class="media-item-name">' + media.name + '</span></div>';
                 
                 grid.appendChild(item);
-            });
+            }
+            
+            debug('미디어 ' + mediaLibrary.length + '개');
         }
         
         // ========================================
         // 타임라인 관리
         // ========================================
-        
-        /**
-         * 미디어를 타임라인에 추가
-         */
-        function addToTimeline(media, startTime = null) {
+        function addToTimeline(media, startTime) {
             saveState();
             
-            // 오디오는 트랙 1, 나머지는 트랙 0
-            const track = media.type === 'audio' ? 1 : 0;
-            const start = startTime !== null ? startTime : getTrackEndTime(track);
+            var track = (media.type === 'audio') ? 1 : 0;
+            var start = (startTime !== undefined) ? startTime : getTrackEndTime(track);
             
-            const clip = {
+            var clip = {
                 id: generateId(),
                 mediaId: media.id,
                 name: media.name,
@@ -1315,104 +1264,91 @@ EDITOR_HTML = """
             };
             
             timelineClips.push(clip);
-            console.log('🎬 클립 추가:', clip.name, '트랙:', track);
+            debug('클립 추가: ' + clip.name);
             
             renderTimeline();
             updateDuration();
         }
         
-        /**
-         * 트랙의 끝 시간 계산
-         */
         function getTrackEndTime(track) {
-            const trackClips = timelineClips.filter(c => c.track === track);
-            if (trackClips.length === 0) return 0;
-            return Math.max(...trackClips.map(c => c.startTime + (c.trimEnd - c.trimStart)));
+            var maxEnd = 0;
+            for (var i = 0; i < timelineClips.length; i++) {
+                var c = timelineClips[i];
+                if (c.track === track) {
+                    var end = c.startTime + (c.trimEnd - c.trimStart);
+                    if (end > maxEnd) maxEnd = end;
+                }
+            }
+            return maxEnd;
         }
         
-        /**
-         * 타임라인 렌더링
-         */
         function renderTimeline() {
-            // 모든 트랙 내용 초기화
-            const tracks = document.querySelectorAll('.track-content');
-            tracks.forEach(track => {
-                track.innerHTML = '';
-            });
-            
-            // 클립 렌더링
-            timelineClips.forEach(clip => {
-                const trackEl = document.querySelector(`.timeline-track[data-track="${clip.track}"] .track-content`);
-                if (!trackEl) return;
-                
-                const clipEl = document.createElement('div');
-                clipEl.className = `timeline-clip ${clip.type}${selectedClipId === clip.id ? ' selected' : ''}`;
-                clipEl.dataset.clipId = clip.id;
+            var tracks = document.querySelectorAll('.track-content');
+            for (var t = 0; t < tracks.length; t++) {
+                tracks[t].innerHTML = '';
+            }
+            
+            for (var i = 0; i < timelineClips.length; i++) {
+                var clip = timelineClips[i];
+                var trackEl = document.querySelector('.timeline-track[data-track="' + clip.track + '"] .track-content');
+                if (!trackEl) continue;
                 
-                // 클립 위치 및 크기 계산
-                const clipDuration = clip.trimEnd - clip.trimStart;
-                const left = 70 + (clip.startTime * pixelsPerSecond * zoom);
-                const width = Math.max(40, clipDuration * pixelsPerSecond * zoom);
+                var clipEl = document.createElement('div');
+                clipEl.className = 'timeline-clip ' + clip.type + (selectedClipId === clip.id ? ' selected' : '');
+                clipEl.setAttribute('data-clip-id', clip.id);
                 
-                clipEl.style.left = `${left}px`;
-                clipEl.style.width = `${width}px`;
+                var clipDuration = clip.trimEnd - clip.trimStart;
+                var left = 70 + (clip.startTime * pixelsPerSecond * zoom);
+                var width = Math.max(40, clipDuration * pixelsPerSecond * zoom);
                 
-                // 드래그 이벤트
+                clipEl.style.left = left + 'px';
+                clipEl.style.width = width + 'px';
                 clipEl.draggable = true;
                 
-                clipEl.onclick = function(e) {
-                    e.stopPropagation();
-                    selectClip(clip.id);
-                };
-                
-                clipEl.oncontextmenu = function(e) {
-                    e.preventDefault();
-                    selectClip(clip.id);
-                    showContextMenu(e.clientX, e.clientY);
-                };
-                
-                clipEl.ondragstart = function(e) {
-                    e.dataTransfer.setData('clipId', clip.id);
-                    e.dataTransfer.setData('offsetX', e.offsetX.toString());
-                };
+                // 클로저
+                (function(c) {
+                    clipEl.onclick = function(e) {
+                        e.stopPropagation();
+                        selectClip(c.id);
+                    };
+                    clipEl.oncontextmenu = function(e) {
+                        e.preventDefault();
+                        selectClip(c.id);
+                        showContextMenu(e.clientX, e.clientY);
+                    };
+                    clipEl.ondragstart = function(e) {
+                        e.dataTransfer.setData('clipId', c.id);
+                        e.dataTransfer.setData('offsetX', e.offsetX.toString());
+                    };
+                })(clip);
                 
-                // 클립 내용
-                let thumbnailHtml = '';
-                if (clip.thumbnail) {
-                    thumbnailHtml = `<img class="clip-thumbnail" src="${clip.thumbnail}">`;
-                }
+                var thumbHtml = clip.thumbnail ? '<img class="clip-thumbnail" src="' + clip.thumbnail + '">' : '';
                 
-                clipEl.innerHTML = `
-                    ${thumbnailHtml}
-                    <div class="clip-info">
-                        <div class="clip-name">${clip.name}</div>
-                        <div class="clip-duration">${formatTime(clipDuration)}</div>
-                    </div>
-                    <div class="clip-handles clip-handle-left" onmousedown="startTrim(event, '${clip.id}', 'left')"></div>
-                    <div class="clip-handles clip-handle-right" onmousedown="startTrim(event, '${clip.id}', 'right')"></div>
-                `;
+                clipEl.innerHTML = thumbHtml +
+                    '<div class="clip-info"><div class="clip-name">' + clip.name + '</div><div class="clip-duration">' + formatTime(clipDuration) + '</div></div>' +
+                    '<div class="clip-handles clip-handle-left" onmousedown="startTrim(event, \'' + clip.id + '\', \'left\')"></div>' +
+                    '<div class="clip-handles clip-handle-right" onmousedown="startTrim(event, \'' + clip.id + '\', \'right\')"></div>';
                 
                 trackEl.appendChild(clipEl);
-            });
+            }
             
             renderRuler();
         }
         
-        /**
-         * 타임라인 눈금자 렌더링
-         */
         function renderRuler() {
-            const ruler = document.getElementById('timelineRuler');
-            const width = Math.max(totalDuration * pixelsPerSecond * zoom + 300, 1000);
-            ruler.style.width = `${width}px`;
+            var ruler = document.getElementById('timelineRuler');
+            if (!ruler) return;
+            
+            var width = Math.max(totalDuration * pixelsPerSecond * zoom + 300, 1000);
+            ruler.style.width = width + 'px';
             
-            let html = '<svg width="100%" height="22" style="position:absolute;left:70px">';
-            const step = zoom < 0.7 ? 5 : zoom < 1.5 ? 2 : 1;
+            var html = '<svg width="100%" height="22" style="position:absolute;left:70px">';
+            var step = (zoom < 0.7) ? 5 : (zoom < 1.5) ? 2 : 1;
             
-            for (let i = 0; i <= Math.ceil(totalDuration) + 10; i += step) {
-                const x = i * pixelsPerSecond * zoom;
-                html += `<line x1="${x}" y1="17" x2="${x}" y2="22" stroke="#d1d5db" stroke-width="1"/>`;
-                html += `<text x="${x}" y="12" fill="#9ca3af" font-size="9" text-anchor="middle">${formatTime(i)}</text>`;
+            for (var i = 0; i <= Math.ceil(totalDuration) + 10; i += step) {
+                var x = i * pixelsPerSecond * zoom;
+                html += '<line x1="' + x + '" y1="17" x2="' + x + '" y2="22" stroke="#d1d5db" stroke-width="1"/>';
+                html += '<text x="' + x + '" y="12" fill="#9ca3af" font-size="9" text-anchor="middle">' + formatTime(i) + '</text>';
             }
             
             html += '</svg>';
@@ -1422,7 +1358,6 @@ EDITOR_HTML = """
         // ========================================
         // 드래그 앤 드롭
         // ========================================
-        
         function handleDragOver(event) {
             event.preventDefault();
             event.currentTarget.classList.add('drop-highlight');
@@ -1436,37 +1371,41 @@ EDITOR_HTML = """
             event.preventDefault();
             event.currentTarget.classList.remove('drop-highlight');
             
-            const rect = event.currentTarget.getBoundingClientRect();
-            const x = event.clientX - rect.left;
-            const time = Math.max(0, x / (pixelsPerSecond * zoom));
+            var rect = event.currentTarget.getBoundingClientRect();
+            var x = event.clientX - rect.left;
+            var time = Math.max(0, x / (pixelsPerSecond * zoom));
             
-            const mediaId = event.dataTransfer.getData('mediaId');
-            const clipId = event.dataTransfer.getData('clipId');
-            const offsetX = parseFloat(event.dataTransfer.getData('offsetX') || 0);
+            var mediaId = event.dataTransfer.getData('mediaId');
+            var clipId = event.dataTransfer.getData('clipId');
+            var offsetX = parseFloat(event.dataTransfer.getData('offsetX') || 0);
             
             if (mediaId) {
                 // 미디어 라이브러리에서 드롭
-                const media = mediaLibrary.find(m => m.id === mediaId);
+                var media = null;
+                for (var i = 0; i < mediaLibrary.length; i++) {
+                    if (mediaLibrary[i].id === mediaId) {
+                        media = mediaLibrary[i];
+                        break;
+                    }
+                }
                 if (media) {
-                    const targetTrack = media.type === 'audio' ? 1 : track;
+                    var targetTrack = (media.type === 'audio') ? 1 : track;
                     addToTimeline(media, time);
-                    
-                    // 드롭된 트랙이 다르면 수정
                     if (targetTrack !== track) {
-                        const lastClip = timelineClips[timelineClips.length - 1];
-                        lastClip.track = targetTrack;
+                        timelineClips[timelineClips.length - 1].track = targetTrack;
                         renderTimeline();
                     }
                 }
             } else if (clipId) {
-                // 타임라인 내 클립 이동
+                // 타임라인 내 이동
                 saveState();
-                const clip = timelineClips.find(c => c.id === clipId);
-                if (clip) {
-                    const adjustedTime = Math.max(0, time - (offsetX / (pixelsPerSecond * zoom)));
-                    clip.startTime = adjustedTime;
-                    // 오디오 클립은 오디오 트랙에만
-                    clip.track = clip.type === 'audio' ? 1 : track;
+                for (var i = 0; i < timelineClips.length; i++) {
+                    if (timelineClips[i].id === clipId) {
+                        var clip = timelineClips[i];
+                        clip.startTime = Math.max(0, time - (offsetX / (pixelsPerSecond * zoom)));
+                        clip.track = (clip.type === 'audio') ? 1 : track;
+                        break;
+                    }
                 }
                 renderTimeline();
                 updateDuration();
@@ -1476,7 +1415,6 @@ EDITOR_HTML = """
         // ========================================
         // 클립 선택 및 속성
         // ========================================
-        
         function selectClip(clipId) {
             selectedClipId = clipId;
             renderTimeline();
@@ -1484,145 +1422,161 @@ EDITOR_HTML = """
         }
         
         function renderProperties() {
-            const container = document.getElementById('propertiesContent');
-            const clip = timelineClips.find(c => c.id === selectedClipId);
+            var container = document.getElementById('propertiesContent');
+            if (!container) return;
+            
+            var clip = null;
+            for (var i = 0; i < timelineClips.length; i++) {
+                if (timelineClips[i].id === selectedClipId) {
+                    clip = timelineClips[i];
+                    break;
+                }
+            }
             
             if (!clip) {
                 container.innerHTML = '<div class="no-selection">클립을 선택하면<br>속성을 편집할 수 있습니다</div>';
                 return;
             }
             
-            const clipDuration = clip.trimEnd - clip.trimStart;
+            var clipDuration = clip.trimEnd - clip.trimStart;
+            
+            var html = '<div class="property-group">' +
+                '<div class="property-label">이름</div>' +
+                '<input type="text" class="property-input" value="' + clip.name + '" onchange="updateClipProperty(\'name\', this.value)">' +
+                '</div>' +
+                '<div class="property-group">' +
+                '<div class="property-label">시작 시간</div>' +
+                '<input type="number" class="property-input" value="' + clip.startTime.toFixed(2) + '" step="0.1" min="0" onchange="updateClipProperty(\'startTime\', parseFloat(this.value))">' +
+                '</div>' +
+                '<div class="property-group">' +
+                '<div class="property-row">' +
+                '<div><div class="property-label">트림 시작</div><input type="number" class="property-input" value="' + clip.trimStart.toFixed(2) + '" step="0.1" min="0" max="' + clip.duration + '" onchange="updateClipProperty(\'trimStart\', parseFloat(this.value))"></div>' +
+                '<div><div class="property-label">트림 끝</div><input type="number" class="property-input" value="' + clip.trimEnd.toFixed(2) + '" step="0.1" min="0" max="' + clip.duration + '" onchange="updateClipProperty(\'trimEnd\', parseFloat(this.value))"></div>' +
+                '</div></div>' +
+                '<div class="property-group"><div class="property-label">길이</div><div style="padding:6px 0;font-size:12px;color:#374151">' + formatTime(clipDuration) + '</div></div>';
+            
+            if (clip.type !== 'image') {
+                html += '<div class="property-group">' +
+                    '<div class="property-label">볼륨 (' + Math.round(clip.volume * 100) + '%)</div>' +
+                    '<input type="range" class="property-input" style="padding:0" min="0" max="1" step="0.05" value="' + clip.volume + '" oninput="updateClipProperty(\'volume\', parseFloat(this.value))">' +
+                    '</div>';
+            }
             
-            container.innerHTML = `
-                <div class="property-group">
-                    <div class="property-label">이름</div>
-                    <input type="text" class="property-input" value="${clip.name}" onchange="updateClipProperty('name', this.value)">
-                </div>
-                <div class="property-group">
-                    <div class="property-label">시작 시간</div>
-                    <input type="number" class="property-input" value="${clip.startTime.toFixed(2)}" step="0.1" min="0" onchange="updateClipProperty('startTime', parseFloat(this.value))">
-                </div>
-                <div class="property-group">
-                    <div class="property-row">
-                        <div>
-                            <div class="property-label">트림 시작</div>
-                            <input type="number" class="property-input" value="${clip.trimStart.toFixed(2)}" step="0.1" min="0" max="${clip.duration}" onchange="updateClipProperty('trimStart', parseFloat(this.value))">
-                        </div>
-                        <div>
-                            <div class="property-label">트림 끝</div>
-                            <input type="number" class="property-input" value="${clip.trimEnd.toFixed(2)}" step="0.1" min="0" max="${clip.duration}" onchange="updateClipProperty('trimEnd', parseFloat(this.value))">
-                        </div>
-                    </div>
-                </div>
-                <div class="property-group">
-                    <div class="property-label">길이</div>
-                    <div style="padding:6px 0;font-size:12px;color:#374151">${formatTime(clipDuration)}</div>
-                </div>
-                ${clip.type !== 'image' ? `
-                <div class="property-group">
-                    <div class="property-label">볼륨 (${Math.round(clip.volume * 100)}%)</div>
-                    <input type="range" class="property-input" style="padding:0" min="0" max="1" step="0.05" value="${clip.volume}" oninput="updateClipProperty('volume', parseFloat(this.value))">
-                </div>
-                ` : ''}
-            `;
+            container.innerHTML = html;
         }
         
         function updateClipProperty(prop, value) {
             saveState();
-            timelineClips = timelineClips.map(c => 
-                c.id === selectedClipId ? { ...c, [prop]: value } : c
-            );
+            for (var i = 0; i < timelineClips.length; i++) {
+                if (timelineClips[i].id === selectedClipId) {
+                    timelineClips[i][prop] = value;
+                    break;
+                }
+            }
             renderTimeline();
             updateDuration();
             renderProperties();
         }
         
         // ========================================
-        // 클립 편집 기능
+        // 클립 편집
         // ========================================
-        
-        /**
-         * 선택된 클립 자르기 (중간 지점에서)
-         */
         function splitSelectedClip() {
             if (!selectedClipId) return;
             
-            const clip = timelineClips.find(c => c.id === selectedClipId);
+            var clip = null;
+            var clipIndex = -1;
+            for (var i = 0; i < timelineClips.length; i++) {
+                if (timelineClips[i].id === selectedClipId) {
+                    clip = timelineClips[i];
+                    clipIndex = i;
+                    break;
+                }
+            }
             if (!clip) return;
             
             saveState();
             
-            const clipDuration = clip.trimEnd - clip.trimStart;
-            const splitPoint = clipDuration / 2;
+            var clipDuration = clip.trimEnd - clip.trimStart;
+            var splitPoint = clipDuration / 2;
             
-            // 첫 번째 클립 (앞부분)
-            const clip1 = { ...clip, trimEnd: clip.trimStart + splitPoint };
+            var clip1 = JSON.parse(JSON.stringify(clip));
+            clip1.trimEnd = clip.trimStart + splitPoint;
             
-            // 두 번째 클립 (뒷부분)
-            const clip2 = {
-                ...clip,
-                id: generateId(),
-                startTime: clip.startTime + splitPoint,
-                trimStart: clip.trimStart + splitPoint
-            };
+            var clip2 = JSON.parse(JSON.stringify(clip));
+            clip2.id = generateId();
+            clip2.startTime = clip.startTime + splitPoint;
+            clip2.trimStart = clip.trimStart + splitPoint;
             
-            timelineClips = timelineClips.map(c => c.id === clip.id ? clip1 : c);
+            timelineClips[clipIndex] = clip1;
             timelineClips.push(clip2);
             
             renderTimeline();
             hideContextMenu();
+            debug('클립 분할');
         }
         
-        /**
-         * 선택된 클립 복제
-         */
         function duplicateSelectedClip() {
             if (!selectedClipId) return;
             
-            const clip = timelineClips.find(c => c.id === selectedClipId);
+            var clip = null;
+            for (var i = 0; i < timelineClips.length; i++) {
+                if (timelineClips[i].id === selectedClipId) {
+                    clip = timelineClips[i];
+                    break;
+                }
+            }
             if (!clip) return;
             
             saveState();
             
-            const clipDuration = clip.trimEnd - clip.trimStart;
-            const newClip = {
-                ...clip,
-                id: generateId(),
-                startTime: clip.startTime + clipDuration
-            };
+            var clipDuration = clip.trimEnd - clip.trimStart;
+            var newClip = JSON.parse(JSON.stringify(clip));
+            newClip.id = generateId();
+            newClip.startTime = clip.startTime + clipDuration;
             
             timelineClips.push(newClip);
             renderTimeline();
             updateDuration();
             hideContextMenu();
+            debug('클립 복제');
         }
         
-        /**
-         * 선택된 클립 삭제
-         */
         function deleteSelectedClip() {
             if (!selectedClipId) return;
             
             saveState();
-            timelineClips = timelineClips.filter(c => c.id !== selectedClipId);
+            
+            var newClips = [];
+            for (var i = 0; i < timelineClips.length; i++) {
+                if (timelineClips[i].id !== selectedClipId) {
+                    newClips.push(timelineClips[i]);
+                }
+            }
+            timelineClips = newClips;
             selectedClipId = null;
             
             renderTimeline();
             renderProperties();
             updateDuration();
             hideContextMenu();
+            debug('클립 삭제');
         }
         
         // ========================================
         // 트림 핸들
         // ========================================
-        
         function startTrim(event, clipId, side) {
             event.stopPropagation();
             event.preventDefault();
             
-            const clip = timelineClips.find(c => c.id === clipId);
+            var clip = null;
+            for (var i = 0; i < timelineClips.length; i++) {
+                if (timelineClips[i].id === clipId) {
+                    clip = timelineClips[i];
+                    break;
+                }
+            }
             if (!clip) return;
             
             saveState();
@@ -1643,20 +1597,24 @@ EDITOR_HTML = """
         function handleTrim(event) {
             if (!trimData) return;
             
-            const clip = timelineClips.find(c => c.id === trimData.clipId);
+            var clip = null;
+            for (var i = 0; i < timelineClips.length; i++) {
+                if (timelineClips[i].id === trimData.clipId) {
+                    clip = timelineClips[i];
+                    break;
+                }
+            }
             if (!clip) return;
             
-            const deltaX = event.clientX - trimData.startX;
-            const deltaTime = deltaX / (pixelsPerSecond * zoom);
+            var deltaX = event.clientX - trimData.startX;
+            var deltaTime = deltaX / (pixelsPerSecond * zoom);
             
             if (trimData.side === 'left') {
-                // 왼쪽 핸들: 시작 지점 조정
-                const newTrimStart = Math.max(0, Math.min(clip.trimEnd - 0.1, trimData.originalTrimStart + deltaTime));
-                const trimDelta = newTrimStart - trimData.originalTrimStart;
+                var newTrimStart = Math.max(0, Math.min(clip.trimEnd - 0.1, trimData.originalTrimStart + deltaTime));
+                var trimDelta = newTrimStart - trimData.originalTrimStart;
                 clip.trimStart = newTrimStart;
                 clip.startTime = trimData.originalStartTime + trimDelta;
             } else {
-                // 오른쪽 핸들: 끝 지점 조정
                 clip.trimEnd = Math.max(clip.trimStart + 0.1, Math.min(clip.duration, trimData.originalTrimEnd + deltaTime));
             }
             
@@ -1673,19 +1631,20 @@ EDITOR_HTML = """
         // ========================================
         // 재생 컨트롤
         // ========================================
-        
         function updateDuration() {
-            if (timelineClips.length === 0) {
-                totalDuration = 0;
-            } else {
-                totalDuration = Math.max(...timelineClips.map(c => c.startTime + (c.trimEnd - c.trimStart)));
+            var maxEnd = 0;
+            for (var i = 0; i < timelineClips.length; i++) {
+                var c = timelineClips[i];
+                var end = c.startTime + (c.trimEnd - c.trimStart);
+                if (end > maxEnd) maxEnd = end;
             }
+            totalDuration = maxEnd;
             document.getElementById('durationDisplay').textContent = formatTime(totalDuration);
         }
         
         function togglePlay() {
             isPlaying = !isPlaying;
-            const icon = document.getElementById('playIcon');
+            var icon = document.getElementById('playIcon');
             
             if (isPlaying) {
                 icon.innerHTML = '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>';
@@ -1697,17 +1656,16 @@ EDITOR_HTML = """
         }
         
         function startPlayback() {
-            let lastTime = performance.now();
+            var lastTime = performance.now();
             
             function animate(now) {
                 if (!isPlaying) return;
                 
-                const delta = (now - lastTime) / 1000;
+                var delta = (now - lastTime) / 1000;
                 lastTime = now;
                 
                 currentTime += delta;
                 
-                // 끝에 도달하면 처음으로
                 if (currentTime >= totalDuration) {
                     currentTime = 0;
                     if (totalDuration === 0) {
@@ -1731,57 +1689,59 @@ EDITOR_HTML = """
                 cancelAnimationFrame(animationId);
                 animationId = null;
             }
-            
-            // 비디오 일시정지
-            const video = document.querySelector('#previewContainer video');
-            if (video && !video.paused) {
-                video.pause();
-            }
+            var video = document.querySelector('#previewContainer video');
+            if (video && !video.paused) video.pause();
         }
         
         function updatePlayhead() {
-            const playhead = document.getElementById('playhead');
-            const left = 70 + (currentTime * pixelsPerSecond * zoom);
-            playhead.style.left = `${left}px`;
+            var playhead = document.getElementById('playhead');
+            if (playhead) {
+                playhead.style.left = (70 + currentTime * pixelsPerSecond * zoom) + 'px';
+            }
             document.getElementById('currentTimeDisplay').textContent = formatTime(currentTime);
         }
         
         function updatePreview() {
-            const container = document.getElementById('previewContainer');
-            
-            // 현재 시간에 재생 중인 클립 찾기
-            const currentClips = timelineClips.filter(clip => {
-                const clipEnd = clip.startTime + (clip.trimEnd - clip.trimStart);
-                return currentTime >= clip.startTime && currentTime < clipEnd;
-            });
+            var container = document.getElementById('previewContainer');
+            if (!container) return;
+            
+            var currentClips = [];
+            for (var i = 0; i < timelineClips.length; i++) {
+                var c = timelineClips[i];
+                var clipEnd = c.startTime + (c.trimEnd - c.trimStart);
+                if (currentTime >= c.startTime && currentTime < clipEnd) {
+                    currentClips.push(c);
+                }
+            }
             
-            // 비디오/이미지 클립 찾기
-            const visualClip = currentClips.find(c => c.type === 'video' || c.type === 'image');
+            var visualClip = null;
+            for (var i = 0; i < currentClips.length; i++) {
+                if (currentClips[i].type === 'video' || currentClips[i].type === 'image') {
+                    visualClip = currentClips[i];
+                    break;
+                }
+            }
             
             if (visualClip) {
-                const clipTime = currentTime - visualClip.startTime + visualClip.trimStart;
+                var clipTime = currentTime - visualClip.startTime + visualClip.trimStart;
                 
                 if (visualClip.type === 'image') {
-                    // 이미지 표시
-                    if (!container.querySelector(`img[data-clip-id="${visualClip.id}"]`)) {
-                        container.innerHTML = `<img src="${visualClip.url}" data-clip-id="${visualClip.id}">`;
+                    if (!container.querySelector('img[data-clip-id="' + visualClip.id + '"]')) {
+                        container.innerHTML = '<img src="' + visualClip.url + '" data-clip-id="' + visualClip.id + '">';
                     }
                 } else if (visualClip.type === 'video') {
-                    // 비디오 표시
-                    let video = container.querySelector(`video[data-clip-id="${visualClip.id}"]`);
+                    var video = container.querySelector('video[data-clip-id="' + visualClip.id + '"]');
                     if (!video) {
-                        container.innerHTML = `<video src="${visualClip.url}" data-clip-id="${visualClip.id}" ${isMuted ? 'muted' : ''}></video>`;
+                        container.innerHTML = '<video src="' + visualClip.url + '" data-clip-id="' + visualClip.id + '"' + (isMuted ? ' muted' : '') + '></video>';
                         video = container.querySelector('video');
                     }
                     
-                    // 시간 동기화
                     if (Math.abs(video.currentTime - clipTime) > 0.2) {
                         video.currentTime = clipTime;
                     }
                     
-                    // 재생/일시정지
                     if (isPlaying && video.paused) {
-                        video.play().catch(() => {});
+                        video.play().catch(function(){});
                     } else if (!isPlaying && !video.paused) {
                         video.pause();
                     }
@@ -1789,60 +1749,35 @@ EDITOR_HTML = """
                     video.volume = isMuted ? 0 : visualClip.volume;
                     video.muted = isMuted;
                 }
-            } else if (!currentClips.some(c => c.type === 'video' || c.type === 'image')) {
-                // 시각적 클립이 없을 때
+            } else {
+                var hasAudio = false;
+                for (var i = 0; i < currentClips.length; i++) {
+                    if (currentClips[i].type === 'audio') hasAudio = true;
+                }
+                
                 if (!container.querySelector('.preview-placeholder')) {
-                    container.innerHTML = `
-                        <div class="preview-placeholder">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
-                                <rect x="2" y="2" width="20" height="20" rx="2"/>
-                                <polygon points="10 8 16 12 10 16 10 8"/>
-                            </svg>
-                            <p>${currentClips.length > 0 ? '🎵 오디오 재생 중' : '타임라인에 미디어를 추가하세요'}</p>
-                        </div>
-                    `;
+                    container.innerHTML = '<div class="preview-placeholder">' +
+                        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10 8 16 12 10 16 10 8"/></svg>' +
+                        '<p>' + (hasAudio ? '🎵 오디오 재생 중' : '타임라인에 미디어를 추가하세요') + '</p></div>';
                 }
             }
         }
         
-        function skipToStart() {
-            currentTime = 0;
-            updatePlayhead();
-            updatePreview();
-        }
-        
-        function skipToEnd() {
-            currentTime = totalDuration;
-            updatePlayhead();
-            updatePreview();
-        }
-        
-        function skipBackward() {
-            currentTime = Math.max(0, currentTime - 5);
-            updatePlayhead();
-            updatePreview();
-        }
-        
-        function skipForward() {
-            currentTime = Math.min(totalDuration, currentTime + 5);
-            updatePlayhead();
-            updatePreview();
-        }
+        function skipToStart() { currentTime = 0; updatePlayhead(); updatePreview(); }
+        function skipToEnd() { currentTime = totalDuration; updatePlayhead(); updatePreview(); }
+        function skipBackward() { currentTime = Math.max(0, currentTime - 5); updatePlayhead(); updatePreview(); }
+        function skipForward() { currentTime = Math.min(totalDuration, currentTime + 5); updatePlayhead(); updatePreview(); }
         
         function toggleMute() {
             isMuted = !isMuted;
-            const icon = document.getElementById('volumeIcon');
-            
+            var icon = document.getElementById('volumeIcon');
             if (isMuted) {
                 icon.innerHTML = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>';
             } else {
                 icon.innerHTML = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>';
             }
-            
-            const video = document.querySelector('#previewContainer video');
-            if (video) {
-                video.muted = isMuted;
-            }
+            var video = document.querySelector('#previewContainer video');
+            if (video) video.muted = isMuted;
         }
         
         function setZoom(value) {
@@ -1854,42 +1789,35 @@ EDITOR_HTML = """
         // ========================================
         // 컨텍스트 메뉴
         // ========================================
-        
         function showContextMenu(x, y) {
-            const menu = document.getElementById('contextMenu');
+            var menu = document.getElementById('contextMenu');
             menu.style.display = 'block';
-            menu.style.left = `${x}px`;
-            menu.style.top = `${y}px`;
+            menu.style.left = x + 'px';
+            menu.style.top = y + 'px';
         }
         
         function hideContextMenu() {
             document.getElementById('contextMenu').style.display = 'none';
         }
         
-        // 다른 곳 클릭시 컨텍스트 메뉴 닫기
-        document.addEventListener('click', function(e) {
-            if (!e.target.closest('.context-menu')) {
-                hideContextMenu();
-            }
-        });
-        
         // ========================================
-        // 타임라인 클릭으로 재생 위치 변경
+        // 타임라인 클릭
         // ========================================
-        document.getElementById('timelineContainer').addEventListener('click', function(e) {
+        function onTimelineClick(e) {
             if (e.target.closest('.timeline-clip')) return;
             
-            const rect = this.getBoundingClientRect();
-            const x = e.clientX - rect.left - 70 + this.scrollLeft;
+            var container = document.getElementById('timelineContainer');
+            var rect = container.getBoundingClientRect();
+            var x = e.clientX - rect.left - 70 + container.scrollLeft;
             currentTime = Math.max(0, Math.min(totalDuration, x / (pixelsPerSecond * zoom)));
             updatePlayhead();
             updatePreview();
-        });
+        }
         
         // ========================================
         // 내보내기
         // ========================================
-        async function exportVideo() {
+        function exportVideo() {
             if (timelineClips.length === 0) {
                 alert('타임라인에 클립을 추가해주세요.');
                 return;
@@ -1899,24 +1827,21 @@ EDITOR_HTML = """
             document.getElementById('exportProgress').style.width = '0%';
             document.getElementById('exportStatus').textContent = '영상을 처리하고 있습니다...';
             
-            // 진행률 시뮬레이션
-            for (let i = 0; i <= 100; i += 2) {
-                await new Promise(r => setTimeout(r, 50));
-                document.getElementById('exportProgress').style.width = `${i}%`;
+            var progress = 0;
+            var interval = setInterval(function() {
+                progress += 2;
+                document.getElementById('exportProgress').style.width = progress + '%';
                 
-                if (i === 30) {
-                    document.getElementById('exportStatus').textContent = '클립 병합 중...';
-                }
-                if (i === 60) {
-                    document.getElementById('exportStatus').textContent = '오디오 처리 중...';
-                }
-                if (i === 90) {
-                    document.getElementById('exportStatus').textContent = '최종 렌더링 중...';
+                if (progress === 30) document.getElementById('exportStatus').textContent = '클립 병합 중...';
+                if (progress === 60) document.getElementById('exportStatus').textContent = '오디오 처리 중...';
+                if (progress === 90) document.getElementById('exportStatus').textContent = '최종 렌더링 중...';
+                
+                if (progress >= 100) {
+                    clearInterval(interval);
+                    document.getElementById('exportStatus').textContent = '✅ 완료!';
+                    document.getElementById('cancelExportBtn').textContent = '닫기';
                 }
-            }
-            
-            document.getElementById('exportStatus').textContent = '✅ 완료!';
-            document.getElementById('cancelExportBtn').textContent = '닫기';
+            }, 50);
         }
         
         function cancelExport() {
@@ -1927,51 +1852,46 @@ EDITOR_HTML = """
         // ========================================
         // 키보드 단축키
         // ========================================
-        document.addEventListener('keydown', function(e) {
-            // 입력 필드에서는 단축키 비활성화
+        document.onkeydown = function(e) {
             if (e.target.tagName === 'INPUT') return;
             
-            switch(e.code) {
-                case 'Space':
-                    e.preventDefault();
-                    togglePlay();
-                    break;
-                    
-                case 'Delete':
-                case 'Backspace':
-                    e.preventDefault();
-                    if (selectedClipId) deleteSelectedClip();
-                    break;
-                    
-                case 'KeyD':
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        if (selectedClipId) duplicateSelectedClip();
-                    }
-                    break;
-                    
-                case 'KeyZ':
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        undoAction();
-                    }
-                    break;
-                    
-                case 'ArrowLeft':
-                    e.preventDefault();
-                    currentTime = Math.max(0, currentTime - (e.shiftKey ? 1 : 0.1));
-                    updatePlayhead();
-                    updatePreview();
-                    break;
-                    
-                case 'ArrowRight':
-                    e.preventDefault();
-                    currentTime = Math.min(totalDuration, currentTime + (e.shiftKey ? 1 : 0.1));
-                    updatePlayhead();
-                    updatePreview();
-                    break;
+            if (e.code === 'Space') {
+                e.preventDefault();
+                togglePlay();
+            } else if (e.code === 'Delete' || e.code === 'Backspace') {
+                e.preventDefault();
+                if (selectedClipId) deleteSelectedClip();
+            } else if (e.code === 'KeyD' && (e.ctrlKey || e.metaKey)) {
+                e.preventDefault();
+                if (selectedClipId) duplicateSelectedClip();
+            } else if (e.code === 'KeyZ' && (e.ctrlKey || e.metaKey)) {
+                e.preventDefault();
+                undoAction();
+            } else if (e.code === 'ArrowLeft') {
+                e.preventDefault();
+                currentTime = Math.max(0, currentTime - (e.shiftKey ? 1 : 0.1));
+                updatePlayhead();
+                updatePreview();
+            } else if (e.code === 'ArrowRight') {
+                e.preventDefault();
+                currentTime = Math.min(totalDuration, currentTime + (e.shiftKey ? 1 : 0.1));
+                updatePlayhead();
+                updatePreview();
+            }
+        };
+        
+        // 클릭으로 컨텍스트 메뉴 닫기
+        document.onclick = function(e) {
+            if (!e.target.closest('.context-menu')) {
+                hideContextMenu();
             }
-        });
+        };
+        
+        // ========================================
+        // 초기화 - 즉시 실행!
+        // ========================================
+        renderTimeline();
+        debug('에디터 준비 완료!');
     </script>
 </body>
 </html>
@@ -1980,10 +1900,8 @@ EDITOR_HTML = """
 
 def create_interface():
     """Gradio 인터페이스 생성"""
-    
     with gr.Blocks(title="Simple Video Editor") as demo:
         gr.HTML(EDITOR_HTML)
-    
     return demo