/* CSS 스타일은 기존과 동일하게 유지됩니다. */
    :root { --w-bg: #ffffff; --w-accent: #000000; --w-border: #f1f5f9; --w-text: #000000; --w-sub: #64748b; }
    .wpop-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4); z-index: 9999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px); font-family: 'Pretendard', sans-serif; }
    .wpop-window { width: 95%; max-width: 1000px; background: var(--w-bg); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1); border: 1px solid var(--w-border); transition: all 0.5s ease; }
    .is-full-page { width: 100% !important; max-width: 100% !important; height: 100% !important; border-radius: 0 !important; border: none !important; }
    .is-full-page .wpop-video-area { aspect-ratio: auto !important; height: 100vh !important; }
    .wpop-video-area { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #fff; overflow: hidden; }
    .video-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; }
    #ytPlayer { width: 100%; height: 100%; transform: scale(1.15); } 
    .loop-mask { position: absolute; inset: 0; background: white; opacity: 0; pointer-events: none; transition: opacity 0.1s; z-index: 1; }
    .video-click-shield { position: absolute; inset: 0; z-index: 2; background: transparent; cursor: default; }
    .wpop-sidebar-overlay { position: absolute; top: 30px; left: 30px; width: 220px; background: transparent; z-index: 10; }
    .sidebar-title { font-size: 11px; font-weight: 900; color: var(--w-accent); letter-spacing: 3px; margin-bottom: 20px; }
    .wpop-menu { list-style: none; padding: 0; margin: 0; }
    .wpop-menu li { padding: 8px 0; color: var(--w-text); font-size: 14px; cursor: pointer; transition: 0.2s; font-weight: 500; display: flex; align-items: center; gap: 10px; }
    .wpop-menu li::before { content: ''; width: 12px; height: 1px; background: #000; transition: 0.3s; }
    .wpop-menu li:hover { opacity: 0.6; padding-left: 5px; }
    .wpop-menu li.active { font-weight: 900; }
    .wpop-menu li.active::before { width: 24px; background: var(--w-accent); }
    .vpop-logo-cosmos { position: absolute; bottom: 25px; left: 30px; z-index: 10; font-size: 28px; font-weight: 900; color: #000; letter-spacing: 8px; text-transform: uppercase; text-shadow: 0 0 15px rgba(255,255,255,0.8), 0 0 5px rgba(0,0,0,0.1); opacity: 0.8; animation: cosmos-pulse 4s infinite ease-in-out; }
    @keyframes cosmos-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); letter-spacing: 8px; } 50% { opacity: 0.9; transform: scale(1.02); letter-spacing: 10px; } }
    .custom-audio-control { position: absolute; bottom: 20px; right: 20px; z-index: 10; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); padding: 8px 15px; border-radius: 30px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
    .custom-audio-control button { background: none; border: none; cursor: pointer; font-size: 16px; color: #000; padding: 0; }
    .custom-audio-control input[type="range"] { width: 80px; accent-color: #000; cursor: pointer; height: 3px; }
    .custom-audio-control span { font-size: 10px; font-weight: 800; color: #000; min-width: 30px; }
    .wpop-footer { padding: 15px 30px; background: #fff; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--w-border); }
    .footer-copyright { font-size: 11px; color: #94a3b8; letter-spacing: 1px; }
    .footer-btns { display: flex; gap: 20px; }
    .footer-btns button { background: transparent; border: none; color: #64748b; font-size: 12px; cursor: pointer; font-weight: 600; }
    .footer-btns .btn-close { color: #000; text-decoration: underline; text-underline-offset: 4px; }
    @media (max-width: 768px) { .wpop-sidebar-overlay { top: 15px; left: 15px; } .vpop-logo-cosmos { font-size: 18px; left: 20px; bottom: 50px; } .custom-audio-control { padding: 5px 10px; bottom: 10px; right: 10px; } }