@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

        

        :root { 

            --primary-pink: #db2777; 

            --bg-dark: #0a0a0a;

            --surface-dark: #171717;

            --border-dark: #262626;

        }

        

        body { 

            font-family: 'Noto Sans KR', sans-serif; 

            background-color: var(--bg-dark); 

            color: #efefef;

            scroll-behavior: smooth; 

            -webkit-tap-highlight-color: transparent; 

        }



        .live-indicator { animation: pulse 2s infinite; }

        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }



        .glass-header { 

            background: rgba(10, 10, 10, 0.85); 

            backdrop-filter: blur(16px); 

            border-bottom: 1px solid var(--border-dark); 

        }

        

        #mobile-menu-drawer { 

            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 

            background-color: var(--surface-dark);

            border-left: 1px solid var(--border-dark);

        }

        #mobile-menu-drawer.active { transform: translateX(0); }



        .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }

        .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



        .scrollbar-hide::-webkit-scrollbar { display: none; }

        .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

        .modal-backdrop { background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); }



        /* Toggle Switch */

        .switch { position: relative; display: inline-block; width: 40px; height: 20px; }

        .switch input { opacity: 0; width: 0; height: 0; }

        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 20px; }

        .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: #999; transition: .4s; border-radius: 50%; }

        input:checked + .slider { background-color: var(--primary-pink); }

        input:checked + .slider:before { transform: translateX(20px); background-color: white; }



        /* Edit Mode Highlight */

        .edit-active { border: 2px solid var(--primary-pink) !important; background-color: #2d161d !important; }



        /* Viewer Count Pulse */

        .viewer-dot { width: 6px; height: 6px; background-color: #10b981; border-radius: 50%; display: inline-block; margin-right: 6px; box-shadow: 0 0 10px #10b981; }

        

        /* Dark Card Style */

        .dark-card {

            background: var(--surface-dark);

            border: 1px solid var(--border-dark);

            transition: all 0.3s ease;

        }

        .dark-card:hover {

            border-color: #404040;

            transform: translateY(-2px);

        }



        /* Custom Scrollbar for desktop */

        @media (min-width: 768px) {

            ::-webkit-scrollbar { width: 6px; }

            ::-webkit-scrollbar-track { background: var(--bg-dark); }

            ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }

            ::-webkit-scrollbar-thumb:hover { background: #444; }

        }