:root { --bg:#0b0c10; --panel:#151821; --panel-light:#1b2030; --text:#e9eef7; --sub:#9aa4b2; --brand:#7aa2ff; --accent:#b388ff; --radius:14px; --header-h: 50px; } * { box-sizing:border-box; -webkit-tap-highlight-color: transparent; } html, body { height:100%; overflow:hidden; } body{ margin:0; background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; } .screen { display: flex; flex: 1; overflow-y: auto; overflow-x: hidden; flex-direction: column; height: 100%; } header{ flex: 0 0 var(--header-h); z-index:50; background: rgba(11,12,16,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #1b1f2a; display:flex; align-items:center; justify-content: space-between; padding:0 16px; position: relative !important; z-index: 3000 !important; pointer-events: auto !important; } .brand { font-weight:800; font-size:18px; letter-spacing:-0.5px; color:#fff; } .brand span { color:var(--brand); } .header-right { display:flex; gap:12px; } .header-btn { background:none; border:none; color:var(--sub); padding:8px; font-size:22px; cursor:pointer; } #topInputSection { width:100%; background:var(--panel); border-bottom:1px solid #242a3a; padding: 12px; transition: all 0.3s ease; overflow:hidden; flex-shrink: 0; } #topInputSection.collapsed { padding:0; height:0; border:none; } .input-row { display:flex; gap:8px; width:100%; max-width:1100px; margin:0 auto; } input[type="text"] { flex:1; background:#0f1320; border:1px solid #2a334d; color:#fff; padding:10px 12px; border-radius:10px; font-size:14px; outline:none; } /* --- 무대 공통 --- */ .stage-wrap { width:100%; max-width:1100px; margin:0 auto; padding:10px 12px 0; flex-shrink: 0; } .stage { width:100%; aspect-ratio: 16/9; background:#000; border-radius:12px; overflow:hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.4); /* IMPORTANT: allow absolutely-positioned gesture layers to stay inside the stage */ position: relative; touch-action: none; transition: aspect-ratio 0.3s ease; } .stage.vertical-mode { aspect-ratio: 9/16; } /* --- [오버레이 모드 전용] --- */ #stageOverlay { position: relative; display: block; } #stageOverlay .layer { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity: 0; transition: opacity 0.25s ease; } #stageOverlay.ready .layer { opacity: 1; } /* [수정] 내 모습(userWrap)을 유튜브 위로 올림 */ #ytWrap { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index: 1; /* 뒤쪽 */ transform-origin: center center; will-change: transform; } #userWrap { z-index: 2; /* 앞쪽 (오버레이) */ } /* 오버레이 내부 비디오들 */ #ytWrap iframe, #ytWrap video, #userWrap video { width:100%; height:100%; border:0; background:transparent; display:block; } #stageOverlay .overlay video { opacity:var(--overlay, .6); object-fit: contain; } /* --- [스플릿 모드 전용] --- */ #stageSplit { display: grid; grid-template-columns: var(--split-val, 50%) 14px 1fr; gap: 0; user-select: none; } .cell { position:relative; background:#000; overflow:hidden; width:100%; height:100%; } .inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; } /* [수정] 스플릿 모드에서도 줌이 되도록 transform:none 제거 */ .inner iframe, .inner video, .inner .innerYT { width:100% !important; height:100% !important; object-fit: contain !important; } /* --- 미러링 공통 클래스 --- */ .mirror-cam { transform: scaleX(-1) !important; } #stageSplit .innerYT { width:100%; height:100%; display:block; } /* --- 제스처 존 --- IMPORTANT: - Default: do NOT intercept clicks (keeps links/buttons in the page clickable) - Enable only when body has .stage-active (JS toggles) */ .gesture-zone { position:absolute; inset:0; z-index: 100; pointer-events: none; touch-action: none; } .stage-active .gesture-zone { pointer-events: auto !important; } .gesture-zone.disabled { pointer-events: none !important; } /* 스플릿 제스처 존 (왼쪽만 덮기) */ #gestureZoneSplit { width: var(--split-val, 50%) !important; right: auto !important; left: 0 !important; z-index: 500 !important; } /* 리사이저 */ .resizer { background: #2a334d; cursor: col-resize; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2000 !important; transition: background 0.2s; } .resizer:hover, .resizer.active { background: var(--brand); } .handle-icon { color: #fff; font-size: 10px; pointer-events: none; } /* 탭 피드백 */ .tap-feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); font-size: 32px; color: rgba(255,255,255,0.9); font-weight: 700; background: rgba(0,0,0,0.6); padding: 16px 24px; border-radius: 50px; opacity: 0; pointer-events: none; z-index: 200; white-space: nowrap; } .tap-feedback.animate { animation: popFade 0.5s ease-out forwards; } @keyframes popFade { 0%{ opacity:0; transform:translate(-50%,-50%) scale(0.5); } 20%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.2); } } /* --- 컨트롤 패널 --- */ .main-controls { width:100%; max-width:1100px; margin:0 auto; padding:10px 12px; flex-shrink: 0; position: relative !important; z-index: 3000 !important; pointer-events: auto !important; } .progress-bar-area { display:flex; align-items:center; gap:8px; margin-bottom:12px; width:100%; } .time-badge { font-variant-numeric: tabular-nums; font-size:11px; color:var(--sub); min-width:42px; text-align:center; } input[type=range] { flex:1; height:4px; appearance:none; background:#2a334d; border-radius:4px; outline:none; cursor:pointer;} input[type=range]::-webkit-slider-thumb { appearance:none; width:16px; height:16px; border-radius:50%; background:var(--brand); border:2px solid #0b0c10; margin-top:-6px;} input[type=range]::-webkit-slider-runnable-track { height: 4px; background: #2a334d; } .marker-track { position:relative; width:100%; height:0; } .marker { position:absolute; top:-12px; width:2px; height:8px; background:var(--accent); } .action-deck { display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; background: var(--panel-light); padding:10px; border-radius:16px; align-items:center; justify-items:center; margin-bottom: 8px; } .act-btn { width:100%; height:44px; border-radius:12px; border:none; background:#262c40; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; } .act-btn.primary { background:var(--brand); color:var(--bg); font-size:20px; box-shadow: 0 4px 12px rgba(122,162,255,0.3); } .toggle-row { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:8px; margin-bottom: 12px; } .toggle-btn { background: transparent; border: 1px solid #242a3a; color: var(--sub); border-radius: 8px; font-size: 11px; height: 32px; font-weight: 600; } .toggle-btn.active { background: var(--brand); color: #000; border-color: var(--brand); } .toggle-btn.mirror-on { background: var(--accent); color: #fff; border-color: var(--accent); } .sub-deck { display:flex; flex-direction:column; gap:12px; background:var(--panel); padding:12px; border-radius:14px; overflow:visible; } .slider-row { display:flex; gap:12px; } .slider-col { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; } .slider-label { font-size:11px; color:var(--sub); display:flex; justify-content:space-between; } .speed-presets { display: flex; gap: 4px; margin-bottom: 6px; overflow-x: auto; padding-bottom: 2px; } .speed-btn { flex: 0 0 auto; background: #262c40; border: 1px solid #3b4d7a; color: #ccc; font-size: 10px; padding: 4px 6px; border-radius: 6px; min-width: 32px; text-align: center; cursor: pointer; } .speed-btn.active { background: var(--brand); color: #000; border-color: var(--brand); font-weight: bold; } .tempo-block { border-top:1px solid #242a3a; padding-top:12px; } .tempo-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .tempo-label { font-size:12px; font-weight:700; color:var(--sub); } .bpm-value { font-size:13px; font-weight:800; color:var(--brand); } #beatVisual { height:6px; background:#1b2030; margin-top:10px; border-radius:3px; transition:background 0.05s; } .ad-section { width: 100%; max-width: 960px; margin: 10px auto; padding: 0 12px; display: flex; justify-content: center; flex-shrink: 0; } .content-section { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 12px 100px; } .info-card { background: #151821; border-radius: 14px; padding: 20px; margin-bottom: 16px; border: 1px solid #242a3a; } .info-title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 12px; display:flex; align-items:center; gap:6px;} .info-text { font-size: 14px; color: #c8d7ff; line-height: 1.6; margin-bottom: 10px; } details { margin-bottom: 8px; background: #1b2030; border-radius: 8px; overflow: hidden; } summary { padding: 12px; cursor: pointer; font-size: 14px; font-weight: 600; color: #ddd; list-style: none; display: flex; justify-content: space-between; align-items: center; } summary::-webkit-details-marker { display: none; } summary::after { content: '+'; font-size: 18px; color: var(--sub); } details[open] summary::after { content: '-'; } .details-content { padding: 12px; border-top: 1px solid #242a3a; font-size: 13px; color: #9aa4b2; line-height: 1.5; } /* --- 사이드바 및 오버레이 --- */ .sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999; opacity:0; pointer-events:none; transition:opacity 0.3s; } .sidebar-overlay.active { opacity:1; pointer-events:auto; } .sidebar { position:fixed !important; top:0; right:0; bottom:0; width:180px; z-index:4000 !important; background: rgba(21, 12, 16, 0.95); backdrop-filter: blur(12px); border-left: 1px solid rgba(255,255,255,0.1); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 12px; display:flex; flex-direction:column; gap:12px; overflow-y: auto; } .sidebar.open { transform: translateX(0); } .sidebar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; } .sidebar-title { font-size:14px; font-weight:700; color:var(--text); } .btn-close { background:none; border:none; color:var(--sub); font-size:20px; padding:4px; } .tool-card { background:#151821; border:1px solid #242a3a; padding:10px; border-radius:10px; display:flex; flex-direction:column; gap:8px; } .tool-label { font-size:12px; color:var(--sub); font-weight:700; } .btn-sm { font-size:11px; padding:8px; border-radius:6px; background:#262c40; border:none; color:#ddd; width:100%; font-weight:600; } .btn-brand-sm { background:var(--brand); color:#000; } .help-modal { display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); } .help-modal.open { display:flex; } .help-content { background:#1b2030; border:1px solid #2a334d; width:100%; max-width:320px; border-radius:16px; padding:20px; box-shadow:0 10px 40px rgba(0,0,0,0.5); } .help-title { font-size:16px; font-weight:800; color:#fff; margin-bottom:12px; } .help-item { margin-bottom:12px; font-size:13px; color:#c8d7ff; line-height:1.5; } .help-item strong { color:var(--brand); display:block; margin-bottom:2px; } .help-btn-close { width:100%; padding:12px; background:var(--brand); color:#000; font-weight:bold; border-radius:10px; border:none; margin-top:8px; } /* --- 전체화면 및 버튼 --- */ .stage-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; position: relative; z-index: 2002; padding: 4px 8px; pointer-events: auto !important; } #mainStageWrap:fullscreen, #mainStageWrap:-webkit-full-screen { width: 100vw !important; height: 100vh !important; background: #000; display: flex; flex-direction: column; padding: 0 !important; margin: 0 !important; max-width: none !important; justify-content: stretch; } #mainStageWrap:fullscreen .stage, #mainStageWrap:-webkit-full-screen .stage { flex: 1; width: 100% !important; height: auto !important; aspect-ratio: unset !important; border-radius: 0; margin: 0; } #mainStageWrap:fullscreen #stageSplit { grid-template-columns: var(--split-val, 50%) 14px 1fr; } #mainStageWrap:fullscreen .stage-toolbar, #mainStageWrap:-webkit-full-screen .stage-toolbar { padding: 15px 20px; background: #151821; position: relative; z-index: 2147483647; flex-shrink: 0; border-top: 1px solid #333; width: 100%; justify-content: center; } /* --- Patch: Progress bar 2안 (stage 폭=재생바 폭, 시간은 양끝) --- */ #progressBarArea{ width:100%; margin-left:auto; margin-right:auto; } #progressBarArea .time-badge{ min-width:32px; } #progressShell{ width:100%; } /* ========================= FIX: YouTube frame fit (NO CROP, contain only) Overlay / Split / Fullscreen unified ========================= */ /* Overlay */ #ytWrap { position:absolute; inset:0; width:100%; height:100%; } #ytWrap .innerYT { position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform-origin:center center; will-change:transform; } #ytWrap iframe { width:100%; height:100%; object-fit:contain; } /* Split */ #stageSplit .inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } #stageSplit .inner .innerYT { position:absolute; inset:0; width:100%; height:100%; transform-origin:center center; } #stageSplit iframe { width:100%; height:100%; object-fit:contain; } /* =============================== TOUCH FIX – UI Click Enable =============================== */ /* gesture layers should NOT block UI */ #gestureZone, #gestureZoneSplit { pointer-events: none; } /* stage layers only receive touch when explicitly enabled */ .stage-active #gestureZone, .stage-active #gestureZoneSplit { pointer-events: auto; } /* ensure header & controls always clickable */ header, .controls, button, input, a { pointer-events: auto !important; } /* ========================= FIX: Split Fullscreen (fill height) ========================= */ #mainStageWrap:fullscreen #stageSplit, #mainStageWrap:-webkit-full-screen #stageSplit{ height: 100% !important; align-content: stretch !important; } #mainStageWrap:fullscreen .stage, #mainStageWrap:-webkit-full-screen .stage{ height: 100% !important; aspect-ratio: unset !important; } #mainStageWrap:fullscreen #stageSplit .cell, #mainStageWrap:-webkit-full-screen #stageSplit .cell, #mainStageWrap:fullscreen #stageSplit .inner, #mainStageWrap:-webkit-full-screen #stageSplit .inner{ height: 100% !important; } #mainStageWrap:fullscreen #stageSplit .inner video, #mainStageWrap:-webkit-full-screen #stageSplit .inner video{ object-fit: cover !important; /* fill the cell */ } /* ===== Split + Zoom UI (v3.1) ===== */ .zoom-badge{ position:absolute; top:10px; left:10px; z-index:1200; padding:6px 10px; font-size:12px; line-height:1; border-radius:999px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color:#fff; opacity:0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease; pointer-events:none; } .zoom-badge.show{ opacity:1; transform: translateY(0); } .stage.split .cell{ position:relative; } .split-label{ position:absolute; top:8px; padding:5px 9px; font-size:12px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.10); color:#fff; opacity:.85; pointer-events:none; z-index:950; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .split-label.left{ left:8px; } .split-label.right{ right:8px; } /* ========================= Camera Zoom (CAMERA ZOOM) - Uses CSS var --camZoom on the