@import "video-js.css";
      /* --- Floating Player Main --- */
        #floating-player-container {
            position: fixed;
            top: 80px; 
            left: 20px;
            z-index: 9999;
            background: #000;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            width: 480px; 
            height: 310px; /* 초기 기본 높이 설정 (16:9 기준, 높이가 접히는 문제 해결) */
            min-width: 250px;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }

        #floating-player-container.is-hidden {
            display: none !important;
        }

        .player-header {
            background: rgba(30, 30, 30, 0.9);
            color: white;
            padding: 8px 12px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #333;
            cursor: move;
            height: 40px; 
            box-sizing: border-box;
        }

        .player-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-grow: 1;
            margin-right: 10px;
            font-weight: 500;
        }

        .player-controls-header {
            display: flex;
            gap: 8px;
        }

        .header-btn {
            background: none;
            border: none;
            color: #aaa;
            cursor: pointer;
            padding: 4px;
            font-size: 16px;
            transition: color 0.2s;
        }
        .header-btn:hover { color: white; }

        /* 비디오 영역 (Video.js 래퍼) */
        #video-wrapper {
            position: relative;
            width: 100%;
            flex: 1 1 auto;
            background: #000;
        }

        /* Video.js가 부모를 꽉 채우도록 설정 */
        #video-wrapper .video-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 드래그 중 최소화 컨트롤 내부 클릭/이벤트 인터셉트 방지 */
        #floating-player-container.is-dragging #minimal-controls {
            pointer-events: none !important;
        }

        /* --- Audio Mode --- */
        #floating-player-container[data-mode="audio"] {
            width: 350px !important;
            height: 70px !important; /* Header(40px) + Controller(30px) */
        }
        
        #floating-player-container[data-mode="audio"] #video-wrapper {
            height: 30px !important;
            flex: none;
        }

        #floating-player-container[data-mode="audio"] .video-js {
            height: 30px !important;
            min-height: 30px !important;
        }

        /* 오디오 모드 시 불필요한 Video.js 요소 숨김 및 컨트롤바 강제 노출 */
        #floating-player-container[data-mode="audio"] .vjs-tech,
        #floating-player-container[data-mode="audio"] .vjs-poster,
        #floating-player-container[data-mode="audio"] .vjs-big-play-button {
            display: none !important;
        }
        #floating-player-container[data-mode="audio"] .vjs-control-bar {
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important;
            height: 30px !important;
            bottom: 0;
            padding-right: 0 !important; /* 오디오 모드에서는 패딩 원복 */
        }

        /* 비디오 컨트롤바 우측 여백 (리사이즈 핸들과 겹침 방지 - 약간만 띄움) */
        #video-wrapper .vjs-control-bar {
            padding-right: 8px !important; 
        }

        /* --- Minimal Mode --- */
        #floating-player-container.minimal-mode {
            width: 200px !important;
            height: 60px !important;
            border-radius: 30px;
            flex-direction: row;
            align-items: center;
            padding: 0 15px;
            background: rgba(20, 20, 20, 0.95);
            border: 1px solid #444;
            cursor: move;
        }
        #floating-player-container.minimal-mode .player-header,
        #floating-player-container.minimal-mode #video-wrapper,
        #floating-player-container.minimal-mode .resize-handle {
            display: none !important;
        }

        #minimal-controls {
            display: none;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            color: white;
            height: 100%;
        }
        #floating-player-container.minimal-mode #minimal-controls {
            display: flex !important;
        }

        .min-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            transition: background 0.2s;
        }
        .min-btn:hover { background: rgba(255,255,255,0.1); }
        .min-restore-btn { font-size: 16px; color: #aaa; }
        .min-restore-btn:hover { color: white; }
        .min-status {
            font-size: 12px;
            flex-grow: 1;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 10px;
            color: #ddd;
        }

        /* 리사이즈 핸들 */
        .resize-handle {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 16px;
            height: 16px;
            cursor: se-resize;
            z-index: 100;
        }
        .resize-handle::after {
            content: '';
            position: absolute;
            right: 3px;
            bottom: 3px;
            width: 8px;
            height: 8px;
            border-right: 2px solid rgba(255,255,255,0.7);
            border-bottom: 2px solid rgba(255,255,255,0.7);
        }
        #floating-player-container[data-mode="audio"] .resize-handle {
            display: none !important;
        }