Update p1/index.html

p1/index.html

@@ -116,13 +116,13 @@ h1 {
     display: flex;
     flex-direction: column;
     width: 100%;
-    max-width: 1000px;
-    background-color: rgba(17, 34, 64, 0.3);
+    max-width: 1200px;
+    background-color: rgba(17, 34, 64, 0.17);
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
-    backdrop-filter: blur(1.7px);
-    border: 1px solid rgba(100, 255, 218, 0.1);
+    backdrop-filter: blur(1.6px);
+    border: 1.5px solid rgba(100, 255, 218, 0.2);
 }
 
 .viewing-box {
@@ -545,17 +545,19 @@ select {
 
 /* 全画面時の操作パネル */
 .viewing-box:-webkit-full-screen .video-controls,
-.viewing-box:fullscreen .video-controls {
-    position: relative;
-    bottom: auto;
-    left: auto;
-    right: auto;
+.viewing-box:fullscreen .video-controls,
+.viewing-box:-moz-full-screen .video-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
     width: 100%;
     border-radius: 0;
     background-color: rgba(0, 0, 0, 0.9);
     padding: 15px 20px;
     z-index: 1000;
     flex-shrink: 0;
+    pointer-events: auto;
 }
 
 /* 全画面時のパネル内要素 */
@@ -1152,10 +1154,6 @@ canvas {
     height: 28px;
     padding: 0 4px;
     font-size: 11px;
-    position: relative;
-    z-index: 100000;
-    transform: translateZ(0);
-    isolation: isolate;
 }
 
 .pane-controls button svg {
@@ -1471,7 +1469,7 @@ canvas {
     padding: 8px 16px;
     border-radius: 5px;
     cursor: pointer;
-    z-index: 10001;
+    z-index: 1000001;
     font-size: 12px;
     font-weight: bold;
     transition: all 0.3s;
@@ -1822,7 +1820,7 @@ canvas {
     <h1 id="title-name">文化発表会動画プレイヤー</h1>
 
     <div class="details-container">
-        <details id="usageDetails">
+        <details id="usageDetails" style="max-width:1000px;">
             <summary style="font-size: 25px">使い方</summary>
             <h3>プレイヤーの使い方</h3>
             <p>「▶」や「⏸」ボタンで再生や一時停止ができます。「↺」で再生開始秒数から再生できます。音量スライダーで音量を変更できます。スライダーで再生速度も変更できます。「⇲」で、動画を小さく表示し、他のタブに移動しながら見れるようにします。「⛶」で動画を全画面で表示できます。</p>
@@ -1864,7 +1862,6 @@ canvas {
                 <button id="sw-register-btn">Service Worker を登録</button>
                 <button id="sw-delete-btn" disabled>Service Worker とデータを削除</button>
                 <div id="sw-status"></div>
-                </div>
             </div>
         </details><br><br>
         <div class="mode-tabs-container">
@@ -2012,6 +2009,7 @@ canvas {
                 audio: 'f/a.mp3',
                 mp4: ['f/a.mp4'],
                 vrma: ['idle.vrma'],
+                startTime: 105,
                 timeMarkers: [{
                         time: 0,
                         label: '0'
@@ -2717,84 +2715,98 @@ class PanZoomManager {
         this.zoomSensitivity = 0.005;
         this.init();
     }
-    init() {
-        this.container.style.overflow = 'hidden';
-        this.container.style.position = 'relative';
+init() {
+    this.container.style.overflow = 'hidden';
+    this.container.style.position = 'relative';
+    this.container.style.cursor = 'grab';
+    this.resetBtn = document.createElement('div');
+    this.resetBtn.className = 'pane-zoom-reset';
+    this.resetBtn.innerHTML = '⛶';
+    this.resetBtn.onclick = () => this.cycleFitMode();
+    this.container.appendChild(this.resetBtn);
+
+    // ガード関数: pane-controls 以下の要素なら true
+    const isPaneControls = (target) => target.closest('.pane-controls') !== null;
+
+    this.container.addEventListener('wheel', (e) => {
+        if (isPaneControls(e.target)) return;  // ← 追加
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? 1 - (this.zoomSensitivity * Math.min(Math.abs(e.deltaY), 30)) : 1 + (this.zoomSensitivity * Math.min(Math.abs(e.deltaY), 30));
+        const newScale = Math.min(Math.max(this.scale * delta, 0.5), 5);
+        if (newScale === this.scale) return;
+        const rect = this.content.getBoundingClientRect();
+        const mouseX = (e.clientX - rect.left) / this.scale;
+        const mouseY = (e.clientY - rect.top) / this.scale;
+        this.scale = newScale;
+        this.fitMode = 'none';
+        const newRect = this.content.getBoundingClientRect();
+        const newMouseX = (e.clientX - newRect.left) / this.scale;
+        const newMouseY = (e.clientY - newRect.top) / this.scale;
+        this.translateX += (newMouseX - mouseX) * this.scale;
+        this.translateY += (newMouseY - mouseY) * this.scale;
+        this.applyTransform();
+    });
+
+    this.container.addEventListener('mousedown', (e) => {
+        if (isPaneControls(e.target)) return;  // ← 追加
+        if (e.button !== 0) return;
+        e.preventDefault();
+        this.isPanning = true;
+        this.panStart = { x: e.clientX, y: e.clientY };
+        this.container.style.cursor = 'grabbing';
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (!this.isPanning) return;
+        const dx = e.clientX - this.panStart.x;
+        const dy = e.clientY - this.panStart.y;
+        this.translateX += dx;
+        this.translateY += dy;
+        this.panStart = { x: e.clientX, y: e.clientY };
+        this.applyTransform();
+    });
+
+    document.addEventListener('mouseup', () => {
+        this.isPanning = false;
         this.container.style.cursor = 'grab';
-        this.resetBtn = document.createElement('div');
-        this.resetBtn.className = 'pane-zoom-reset';
-        this.resetBtn.innerHTML = '⛶';
-        this.resetBtn.onclick = () => this.cycleFitMode();
-        this.container.appendChild(this.resetBtn);
-        this.container.addEventListener('wheel', (e) => {
-            e.preventDefault();
-            const delta = e.deltaY > 0 ? 1 - (this.zoomSensitivity * Math.min(Math.abs(e.deltaY), 30)) : 1 + (this.zoomSensitivity * Math.min(Math.abs(e.deltaY), 30));
-            const newScale = Math.min(Math.max(this.scale * delta, 0.5), 5);
-            if (newScale === this.scale) return;
-            const rect = this.content.getBoundingClientRect();
-            const mouseX = (e.clientX - rect.left) / this.scale;
-            const mouseY = (e.clientY - rect.top) / this.scale;
-            this.scale = newScale;
-            this.fitMode = 'none';
-            const newRect = this.content.getBoundingClientRect();
-            const newMouseX = (e.clientX - newRect.left) / this.scale;
-            const newMouseY = (e.clientY - newRect.top) / this.scale;
-            this.translateX += (newMouseX - mouseX) * this.scale;
-            this.translateY += (newMouseY - mouseY) * this.scale;
-            this.applyTransform();
-        });
-        this.container.addEventListener('mousedown', (e) => {
-            if (e.button !== 0) return;
-            e.preventDefault();
+    });
+
+    this.container.addEventListener('touchstart', (e) => {
+        if (isPaneControls(e.target)) return;  // ← 追加
+        if (e.touches.length === 1) {
             this.isPanning = true;
-            this.panStart = { x: e.clientX, y: e.clientY };
-            this.container.style.cursor = 'grabbing';
-        });
-        document.addEventListener('mousemove', (e) => {
-            if (!this.isPanning) return;
-            const dx = e.clientX - this.panStart.x;
-            const dy = e.clientY - this.panStart.y;
+            this.panStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+        } else if (e.touches.length === 2) {
+            this.isPanning = false;
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            this.touchStartDistance = Math.hypot(dx, dy);
+            this.touchStartScale = this.scale;
+        }
+    });
+
+    this.container.addEventListener('touchmove', (e) => {
+        if (isPaneControls(e.target)) return;  // ← 追加
+        e.preventDefault();
+        if (e.touches.length === 1 && this.isPanning) {
+            const dx = e.touches[0].clientX - this.panStart.x;
+            const dy = e.touches[0].clientY - this.panStart.y;
             this.translateX += dx;
             this.translateY += dy;
-            this.panStart = { x: e.clientX, y: e.clientY };
+            this.panStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
             this.applyTransform();
-        });
-        document.addEventListener('mouseup', () => {
-            this.isPanning = false;
-            this.container.style.cursor = 'grab';
-        });
-        this.container.addEventListener('touchstart', (e) => {
-            if (e.touches.length === 1) {
-                this.isPanning = true;
-                this.panStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-            } else if (e.touches.length === 2) {
-                this.isPanning = false;
-                const dx = e.touches[0].clientX - e.touches[1].clientX;
-                const dy = e.touches[0].clientY - e.touches[1].clientY;
-                this.touchStartDistance = Math.hypot(dx, dy);
-                this.touchStartScale = this.scale;
-            }
-        });
-        this.container.addEventListener('touchmove', (e) => {
-            e.preventDefault();
-            if (e.touches.length === 1 && this.isPanning) {
-                const dx = e.touches[0].clientX - this.panStart.x;
-                const dy = e.touches[0].clientY - this.panStart.y;
-                this.translateX += dx;
-                this.translateY += dy;
-                this.panStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-                this.applyTransform();
-            } else if (e.touches.length === 2) {
-                const dx = e.touches[0].clientX - e.touches[1].clientX;
-                const dy = e.touches[0].clientY - e.touches[1].clientY;
-                const distance = Math.hypot(dx, dy);
-                const scaleDelta = distance / this.touchStartDistance;
-                const newScale = Math.min(Math.max(this.touchStartScale * scaleDelta, 0.5), 5);
-                this.setScale(newScale);
-            }
-        });
-        this.container.addEventListener('touchend', () => { this.isPanning = false; });
-    }
+        } else if (e.touches.length === 2) {
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            const distance = Math.hypot(dx, dy);
+            const scaleDelta = distance / this.touchStartDistance;
+            const newScale = Math.min(Math.max(this.touchStartScale * scaleDelta, 0.5), 5);
+            this.setScale(newScale);
+        }
+    });
+
+    this.container.addEventListener('touchend', () => { this.isPanning = false; });
+}
     zoom(delta, centerX, centerY) {
         const newScale = Math.min(Math.max(this.scale * delta, 0.5), 5);
         if (newScale === this.scale) return;
@@ -3734,90 +3746,144 @@ function restoreModeState(mode) {
             }
         }
 
-        function switchMode(newMode) {
-            if (newMode === currentMode) return;
-            saveCurrentModeState();
-            currentMode = newMode;
-            AUDIO_SRC = MODE_DEFINITIONS[currentMode].audio;
-            VIDEO_SOURCES = [...MODE_DEFINITIONS[currentMode].mp4];
-            VRMA_ANIMATIONS = [...MODE_DEFINITIONS[currentMode].vrma];
-            document.querySelectorAll('.mode-tab').forEach(tab => {
-                tab.classList.toggle('active', tab.dataset.mode === currentMode);
-            });
-            updateTimeMarkers();
-            showLoadingOverlay();
-            if (bgmAudioElement) { bgmAudioElement.pause();
-                bgmAudioElement.src = ''; }
-            const hasSaved = restoreModeState(currentMode);
-            if (!hasSaved) {
-                globalTimeline.startTime = 0;
-                globalTimeline.endTime = 0;
-                globalTimeline.currentTime = 0;
-                globalTimeline.loopEnabled = false;
-                globalTimeline.loopInterval = 0;
-                globalTimeline.isPlaying = false;
-                globalTimeline.hasEnded = false;
-                document.getElementById('start-time').value = 0;
-                document.getElementById('end-time').value = 0;
-                document.getElementById('loop').checked = false;
-                document.getElementById('loop-interval').value = 0;
-            }
-            if (window.markerManager) {
-                if (hasSaved && modeStateStore[currentMode]?.timeline) {
-                    const savedTimeline = modeStateStore[currentMode].timeline;
-                    if (savedTimeline.startTime > 0) window.markerManager.setStartMarker(savedTimeline.startTime);
-                    else window.markerManager.setStartMarker(0);
-                    if (savedTimeline.endTime > 0 && savedTimeline.endTime < globalTimeline.duration) window.markerManager.setEndMarker(savedTimeline.endTime);
-                    else window.markerManager.setEndMarker(globalTimeline.duration);
-                } else {
-                    window.markerManager.setStartMarker(0);
-                    window.markerManager.setEndMarker(globalTimeline.duration);
-                }
-            }
-            if (hasSaved && modeStateStore[currentMode].panes) {
-                const savedPanes = modeStateStore[currentMode].panes;
-                const paneMap = new Map();
-                panes.forEach(p => p.cleanup());
-                panes = [];
-                savedPanes.forEach(pData => {
-                    const container = document.createElement('div');
-                    container.className = 'split-pane';
-                    const pane = new Pane(container, pData.id, pData.type);
-                    pane.videoSrc = pData.videoSrc;
-                    pane.vrmSrc = pData.vrmSrc;
-                    pane.vrmaSrc = pData.vrmaSrc;
-                    pane.volume = pData.volume;
-                    pane.isFlipped = pData.isFlipped;
-                    pane.isMotionFlipped = pData.isMotionFlipped;
-                    pane.modelBaseScaleX = pData.modelBaseScaleX;
-                    pane.updateContent();
-                    pane.applyFlipStates();
-                    pane.setVolume(pane.volume);
-                    panes.push(pane);
-                    paneMap.set(pane.id, pane);
-                });
-                window.splitTree.deserialize(savedPanes[0].splitInfo, paneMap);
-                if (!window.splitTree.root && panes.length > 0) window.splitTree.setRootPane(panes[0]);
-            } else {
-                panes.forEach(p => p.cleanup());
-                panes = [];
-                const splitContainer = document.getElementById('split-container');
-                window.splitTree = new SplitTreeManager(splitContainer);
-                const defaultPaneContainer = document.createElement('div');
-                defaultPaneContainer.className = 'split-pane';
-                const pane = new Pane(defaultPaneContainer, 'pane-main', 'video');
-                pane.videoSrc = VIDEO_SOURCES[0] || 'm.mp4';
-                pane.vrmaSrc = VRMA_ANIMATIONS[0] || 'idle.vrma';
-                pane.updateContent();
-                panes.push(pane);
-                window.splitTree.setRootPane(pane);
-            }
-            panes.forEach(p => p.setGlobalVolumeFactor(globalVolumeFactor));
-            loadBGMAudio();
-            window.seekMedia(globalTimeline.startTime);
-            updateProgressBar();
-            updateTimeDisplay();
+function switchMode(newMode) {
+    if (newMode === currentMode) return;
+    saveCurrentModeState();
+    currentMode = newMode;
+    AUDIO_SRC = MODE_DEFINITIONS[currentMode].audio;
+    VIDEO_SOURCES = [...MODE_DEFINITIONS[currentMode].mp4];
+    VRMA_ANIMATIONS = [...MODE_DEFINITIONS[currentMode].vrma];
+    
+    document.querySelectorAll('.mode-tab').forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.mode === currentMode);
+    });
+    
+    updateTimeMarkers();
+    showLoadingOverlay();
+    
+    if (bgmAudioElement) { 
+        bgmAudioElement.pause();
+        bgmAudioElement.src = ''; 
+    }
+    
+    const hasSaved = restoreModeState(currentMode);
+    if (!hasSaved) {
+        const modeDef = MODE_DEFINITIONS[currentMode];
+        const defStartTime = modeDef.startTime !== undefined ? modeDef.startTime : 0;
+        const defEndTime = modeDef.endTime !== undefined && modeDef.endTime !== null ? modeDef.endTime : 0;
+        
+        globalTimeline.startTime = defStartTime;
+        globalTimeline.endTime = defEndTime;
+        globalTimeline.currentTime = defStartTime;
+        globalTimeline.loopEnabled = false;
+        globalTimeline.loopInterval = 0;
+        globalTimeline.isPlaying = false;
+        globalTimeline.hasEnded = false;
+        document.getElementById('start-time').value = 0;
+        document.getElementById('end-time').value = 0;
+        document.getElementById('loop').checked = false;
+        document.getElementById('loop-interval').value = 0;
+    }
+    
+    if (window.markerManager) {
+        if (hasSaved && modeStateStore[currentMode]?.timeline) {
+            const savedTimeline = modeStateStore[currentMode].timeline;
+            if (savedTimeline.startTime > 0) window.markerManager.setStartMarker(savedTimeline.startTime);
+            else window.markerManager.setStartMarker(0);
+            if (savedTimeline.endTime > 0 && savedTimeline.endTime < globalTimeline.duration) window.markerManager.setEndMarker(savedTimeline.endTime);
+            else window.markerManager.setEndMarker(globalTimeline.duration);
+        } else {
+            window.markerManager.setStartMarker(0);
+            window.markerManager.setEndMarker(globalTimeline.duration);
         }
+    }
+    
+    if (hasSaved && modeStateStore[currentMode].panes) {
+        const savedPanes = modeStateStore[currentMode].panes;
+        const paneMap = new Map();
+        // 既存のパネルをクリーンアップ
+        panes.forEach(p => p.cleanup());
+        panes = [];
+        savedPanes.forEach(pData => {
+            const container = document.createElement('div');
+            container.className = 'split-pane';
+            const pane = new Pane(container, pData.id, pData.type);
+            pane.videoSrc = pData.videoSrc;
+            pane.vrmSrc = pData.vrmSrc;
+            pane.vrmaSrc = pData.vrmaSrc;
+            pane.volume = pData.volume;
+            pane.isFlipped = pData.isFlipped;
+            pane.isMotionFlipped = pData.isMotionFlipped;
+            pane.modelBaseScaleX = pData.modelBaseScaleX;
+            pane.updateContent();
+            pane.applyFlipStates();
+            pane.setVolume(pane.volume);
+            panes.push(pane);
+            paneMap.set(pane.id, pane);
+        });
+        if (savedPanes[0]?.splitInfo) window.splitTree.deserialize(savedPanes[0].splitInfo, paneMap);
+        if (!window.splitTree.root && panes.length > 0) window.splitTree.setRootPane(panes[0]);
+    } else {
+        // 既存のパネルをクリーンアップ
+        panes.forEach(p => p.cleanup());
+        panes = [];
+        const splitContainer = document.getElementById('split-container');
+        if (window.splitTree) {
+            // 既存の splitTree をクリア
+            splitContainer.innerHTML = '';
+        }
+        window.splitTree = new SplitTreeManager(splitContainer);
+        const defaultPaneContainer = document.createElement('div');
+        defaultPaneContainer.className = 'split-pane';
+        const pane = new Pane(defaultPaneContainer, 'pane-main', 'video');
+        pane.videoSrc = VIDEO_SOURCES[0] || 'm.mp4';
+        pane.vrmaSrc = VRMA_ANIMATIONS[0] || 'idle.vrma';
+        pane.updateContent();
+        panes.push(pane);
+        window.splitTree.setRootPane(pane);
+    }
+    
+    panes.forEach(p => p.setGlobalVolumeFactor(globalVolumeFactor));
+    
+    // 重要: コントロールを再有効化
+    setTimeout(() => {
+        enableAllControls();
+    }, 100);
+    
+    loadBGMAudio();
+    window.seekMedia(globalTimeline.startTime);
+    updateProgressBar();
+    updateTimeDisplay();
+}
+function enableAllControls() {
+    const controlIds = [
+        'play-pause-btn', 'reset-btn', 'volume-btn', 'volume-slider', 
+        'fullscreen-btn', 'start-time', 'end-time', 'reset-end-time', 
+        'loop', 'loop-interval', 'global-volume', 'set-start-time', 
+        'set-end-time', 'playback-speed', 'apply-time-btn', 'pip-btn', 
+        'speed-btn'
+    ];
+    
+    controlIds.forEach(id => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.disabled = false;
+        }
+    });
+    
+    // パネル内のドロップダウンも再有効化
+    panes.forEach(pane => {
+        const typeSelect = pane.container.querySelector('.pane-type-select');
+        const sourceSelect = pane.container.querySelector('.pane-source-select');
+        const vrmSelect = pane.container.querySelector('.pane-vrm-select');
+        
+        if (typeSelect) typeSelect.disabled = false;
+        if (sourceSelect) sourceSelect.disabled = false;
+        if (vrmSelect) vrmSelect.disabled = false;
+    });
+}
+
+
 
         // ===== ローディングオーバーレイ =====
         function showLoadingOverlay() {
@@ -3834,10 +3900,12 @@ function restoreModeState(mode) {
                 isLoadingComplete = true;
                 overlay.style.transition = 'opacity 1s ease-out';
                 overlay.style.opacity = '0';
-                setTimeout(() => { overlay.style.display = 'none'; }, 1000);
+                setTimeout(() => { 
+                    overlay.style.display = 'none';
+                    enableAllControls();  // ローディング完了時にコントロールを有効化
+                }, 1000);
             }
         }
-
         function loadBGMAudio() {
             if (bgmAudioElement) { bgmAudioElement.pause();
                 bgmAudioElement.src = '';
@@ -3878,15 +3946,21 @@ function restoreModeState(mode) {
                             window.markerManager.setEndMarker(globalTimeline.endTime);
                         }
                     } else {
-                        globalTimeline.endTime = globalTimeline.duration;
-                        globalTimeline.startTime = 0;
+                        // MODE_DEFINITIONSからデフォルト値を取得
+                        const modeDef = MODE_DEFINITIONS[currentMode];
+                        const defStartTime = modeDef.startTime !== undefined ? modeDef.startTime : 0;
+                        const defEndTime = (modeDef.endTime !== undefined && modeDef.endTime !== null) ? modeDef.endTime : globalTimeline.duration;
+                        
+                        globalTimeline.startTime = defStartTime;
+                        globalTimeline.endTime = defEndTime;
+                        
                         if (!isNaN(globalTimeline.duration) && isFinite(globalTimeline.duration)) {
-                            document.getElementById('end-time').value = globalTimeline.duration;
-                            document.getElementById('start-time').value = 0;
+                            document.getElementById('end-time').value = globalTimeline.endTime;
+                            document.getElementById('start-time').value = globalTimeline.startTime;
                         }
                         if (window.markerManager) {
-                            window.markerManager.setStartMarker(0);
-                            window.markerManager.setEndMarker(globalTimeline.duration);
+                            window.markerManager.setStartMarker(globalTimeline.startTime);
+                            window.markerManager.setEndMarker(globalTimeline.endTime);
                         }
                     }
                     updateTimeDisplay();
@@ -4115,7 +4189,7 @@ function applyTimeSettings() {
             initAutoHideControls();
             document.getElementById('speed-btn').addEventListener('click', createSpeedPopup);
             setTimeout(() => {
-                document.querySelectorAll('#play-pause-btn, #reset-btn, #volume-btn, #volume-slider, #fullscreen-btn, #start-time, #end-time, #reset-end-time, #loop, #loop-interval, #global-volume, #set-start-time, #set-end-time, #playback-speed, #apply-time-btn, #pip-btn, #speed-btn').forEach(el => { if (el) el.disabled = false; });
+                enableAllControls();
             }, 1000);
 
             document.querySelectorAll('.mode-tab').forEach(tab => {
@@ -4301,7 +4375,6 @@ function applyTimeSettings() {
             volumeSlider.addEventListener('input', updateVolumeIcon);
             window.addEventListener('beforeunload', () => { saveGlobalState(); });
             setInterval(saveGlobalState, 5000);
-            initSelectHack();
         }
 
         window.addEventListener('load', () => {
@@ -4314,64 +4387,7 @@ function applyTimeSettings() {
             if (loadingOverlay) { loadingOverlay.style.display = 'flex';
                 loadingOverlay.style.opacity = '1'; }
         });
-function applySelectHack() {
-    document.querySelectorAll('.pane-controls select').forEach(original => {
-        if (original.hasAttribute('data-hacked')) return;
-
-        const rect = original.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0) return; // 非表示の要素はスキップ
-
-        const clone = original.cloneNode(true);
-        clone.style.position = 'fixed';
-        clone.style.top = rect.top + 'px';
-        clone.style.left = rect.left + 'px';
-        clone.style.width = rect.width + 'px';
-        clone.style.height = rect.height + 'px';
-        clone.style.zIndex = '1000000';
-        clone.style.backgroundColor = '#112240';
-        clone.style.border = '1px solid #64ffda';
-        clone.style.margin = '0';
-        clone.style.padding = '0';
-        clone.style.boxSizing = 'border-box';
-        clone.style.fontSize = window.getComputedStyle(original).fontSize;
-        clone.style.fontFamily = window.getComputedStyle(original).fontFamily;
-
-        // 元のセレクトを透明化
-        original.style.opacity = '0';
-        original.style.pointerEvents = 'none';
-        original.setAttribute('data-hacked', 'true');
-
-        document.body.appendChild(clone);
-
-        // 値の同期
-        clone.addEventListener('change', () => {
-            original.value = clone.value;
-            original.dispatchEvent(new Event('change', { bubbles: true }));
-        });
 
-        // 位置更新（スクロール・リサイズ・親要素の変更に対応）
-        const updatePos = () => {
-            const newRect = original.getBoundingClientRect();
-            clone.style.top = newRect.top + 'px';
-            clone.style.left = newRect.left + 'px';
-            clone.style.width = newRect.width + 'px';
-        };
-        window.addEventListener('scroll', updatePos, { passive: true });
-        window.addEventListener('resize', updatePos);
-        const observer = new ResizeObserver(updatePos);
-        if (original.parentElement) observer.observe(original.parentElement);
-        
-        // 全画面表示などでビューポートが変わったときにも対応
-        document.addEventListener('fullscreenchange', updatePos);
-    });
-}
-
-// 初期ロード時と動的なパネル追加に対応
-function initSelectHack() {
-    applySelectHack();
-    const observer = new MutationObserver(() => applySelectHack());
-    observer.observe(document.body, { childList: true, subtree: true });
-}
 /*
 // マーカーの状態を確認
 console.log('マーカーマネージャー:', window.markerManager);