/* ━━ VMS Video Player — 독립 모달 플레이어 ━━ */

/* Modal backdrop */
.vp-modal{position:fixed;z-index:800;background:rgba(15,17,23,.75);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}
.vp-modal.maximized{inset:0}
.vp-modal:not(.maximized){border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);overflow:hidden}

/* Draggable title bar */
.vp-titlebar{display:flex;align-items:center;height:32px;background:#1a1d27;padding:0 8px;cursor:move;user-select:none;gap:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.vp-titlebar .vp-title{flex:1;font-size:.72rem;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:system-ui,sans-serif}
.vp-titlebar .vp-title b{color:rgba(255,255,255,.9);font-weight:600}
.vp-wbtn{width:28px;height:22px;border:none;background:none;color:rgba(255,255,255,.5);font-size:.85rem;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center}
.vp-wbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.vp-wbtn.close:hover{background:#c94444;color:#fff}

/* Main layout */
.vp-body{display:flex;flex-direction:column;background:#000}
.vp-screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0a0a0a}
.vp-video,.vp-canvas{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0}
.vp-canvas{display:none}

/* OSD overlay */
.vp-osd{position:absolute;top:0;left:0;right:0;padding:8px 12px;display:flex;justify-content:space-between;pointer-events:none;opacity:0;transition:opacity .2s}
.vp-screen:hover .vp-osd{opacity:1}
.vp-osd-left,.vp-osd-right{display:flex;gap:8px;align-items:center}
.vp-tag{background:rgba(0,0,0,.65);color:rgba(255,255,255,.85);font-size:.65rem;padding:2px 6px;border-radius:3px;font-family:'SF Mono',Consolas,monospace;backdrop-filter:blur(4px)}
.vp-tag.codec{color:#5995DD}
.vp-tag.live{background:rgba(201,68,68,.7);color:#fff}
.vp-tag.rec{background:rgba(44,94,158,.7);color:#fff}

/* Loading/Error overlays */
.vp-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:2}
.vp-overlay.show{display:flex}
.vp-spinner{width:28px;height:28px;border:2.5px solid rgba(255,255,255,.15);border-top-color:#5995DD;border-radius:50%;animation:vp-spin .7s linear infinite}
@keyframes vp-spin{to{transform:rotate(360deg)}}
.vp-status{color:rgba(255,255,255,.7);font-size:.78rem;margin-top:8px;font-family:system-ui,sans-serif}
.vp-error-msg{color:#f87171;font-size:.82rem;text-align:center;max-width:80%;font-family:system-ui,sans-serif}

/* ━━ Index Track — NLE 스타일 인덱스 컨트롤 ━━ */
.vp-index-track{position:relative;background:#12141a;cursor:crosshair;user-select:none;border-top:1px solid rgba(255,255,255,.06)}

/* 시간 눈금 */
.vp-index-ticks{position:relative;height:16px;overflow:hidden}
.vp-tick{position:absolute;top:0;width:1px;height:100%;background:rgba(255,255,255,.12)}
.vp-tick.major{background:rgba(255,255,255,.25)}
.vp-tick span{position:absolute;top:1px;left:3px;font-size:.55rem;color:rgba(255,255,255,.35);font-family:'SF Mono',Consolas,monospace;white-space:nowrap}
.vp-tick.major span{color:rgba(255,255,255,.55)}

/* 필름스트립 */
.vp-index-filmstrip{display:flex;height:40px;overflow:hidden;position:relative}
.vp-filmstrip-img{height:100%;object-fit:cover;opacity:.6;transition:opacity .15s;border-right:1px solid rgba(0,0,0,.5)}
.vp-index-track:hover .vp-filmstrip-img{opacity:.85}

/* 시크바 (필름스트립 위 오버레이) */
.vp-index-seekbar{position:relative;height:6px;background:rgba(255,255,255,.08)}
.vp-index-seekbar .vp-seekbar-bg{width:100%;height:100%;position:relative}
.vp-index-seekbar .vp-seekbar-buffered{position:absolute;height:100%;background:rgba(255,255,255,.08)}
.vp-index-seekbar .vp-seekbar-fill{position:absolute;height:100%;background:#5995DD;z-index:1}

/* 플레이헤드 — 빨간 세로선 */
.vp-index-playhead{position:absolute;top:-56px;bottom:0;width:2px;background:#e53e3e;z-index:4;transform:translateX(-50%);pointer-events:none}
.vp-index-playhead::before{content:'';position:absolute;top:0;left:-4px;width:10px;height:10px;background:#e53e3e;clip-path:polygon(50% 100%,0 0,100% 0);}

/* Controls bar */
.vp-controls{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#1a1d27}
.vp-btn{background:none;border:none;color:rgba(255,255,255,.7);font-size:.9rem;cursor:pointer;padding:4px;border-radius:3px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.vp-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.vp-btn svg{width:16px;height:16px;fill:currentColor}

/* Seek preview thumbnail */
.vp-seek-preview{position:absolute;bottom:66px;transform:translateX(-50%);background:#1a1d27;border:1px solid rgba(255,255,255,.15);border-radius:4px;overflow:hidden;pointer-events:none;z-index:5;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.vp-seek-preview-img{display:block;width:160px;height:90px;object-fit:cover;background:#000}
.vp-seek-preview-time{display:block;text-align:center;font-size:.65rem;color:rgba(255,255,255,.8);padding:2px 0;background:rgba(0,0,0,.6);font-family:'SF Mono',Consolas,monospace}

.vp-time{color:rgba(255,255,255,.55);font-size:.68rem;font-family:'SF Mono',Consolas,monospace;min-width:80px;text-align:center}
.vp-frametime{color:rgba(89,149,221,.7);font-size:.6rem;font-family:'SF Mono',Consolas,monospace;min-width:50px}
.vp-speed{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);border:none;border-radius:3px;font-size:.68rem;padding:2px 4px;cursor:pointer;font-family:system-ui,sans-serif}
.vp-speed:hover{background:rgba(255,255,255,.15);color:#fff}
.vp-vol{width:50px;height:3px;background:rgba(255,255,255,.15);border-radius:2px;cursor:pointer;position:relative}
.vp-vol-fill{height:100%;background:rgba(255,255,255,.5);border-radius:2px}

/* Info panel (bottom) */
.vp-infopanel{display:flex;gap:16px;padding:6px 12px;background:#12141a;font-size:.68rem;color:rgba(255,255,255,.4);font-family:system-ui,sans-serif;flex-wrap:wrap}
.vp-infopanel .vp-info-item{display:flex;gap:4px}
.vp-infopanel .vp-info-item span:first-child{color:rgba(255,255,255,.25)}
.vp-infopanel .vp-info-item span:last-child{color:rgba(255,255,255,.6)}

/* Resize handle */
.vp-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:3}
.vp-resize::after{content:'';position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-right:2px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.2)}