/* 🎨 메인 테마 - 기본 스타일 */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html, body {
    position: fixed;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    background: #000;  /* 기본값 먼저 */
    background: var(--primary-bg);  /* 변수로 덮어쓰기 */
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow: hidden;
    overflow-x: hidden;
    margin: 0;
}

.app-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--primary-bg);
}

.tab-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    flex: 1;
    display: none;            
    -webkit-overflow-scrolling: touch;
    background: var(--primary-bg);
}

.tab-content.active {
    display: block;
}

/* 회전시 레이아웃 재조정 - 라인 60 이후 추가 */
@media screen and (orientation: portrait) {
    html, body, .app-container, .tab-content {
        width: 100vw !important;
        height: 100vh !important;
    }
}

@media screen and (orientation: landscape) {
    html, body, .app-container, .tab-content {
        width: 100vw !important;
        height: 100vh !important;
    }
}

/* Music Container */
.music-container {
    max-width: 100%;
    padding: 0px 0px 0px 0px;
    text-align: center;
    background: var(--primary-bg);  /* #000 → CSS 변수로! */
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.music-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #f5f5f5;
    letter-spacing: 1px;
}

.music-card {
    background: var(--remote-hardware, linear-gradient(145deg, var(--secondary-bg), var(--primary-bg)));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    flex: none;
    height: 620px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 5px;
}

.song-info {
    margin-bottom: 25px;
}

.song-title {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff;
    line-height: 1.3;
}

.artist-name {
    font-size: 16px;
    color: #999;
    margin-bottom: 12px;
}

.song-counter {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.music-play-button {
    background: linear-gradient(145deg, #fff, #f0f0f0);
    color: #000;
    border: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    transition: all 0.3s ease;
    font-size: 24px;
    box-shadow: 0 6px 20px rgba(255,255,255,0.1);
    min-height: 44px;
    min-width: 44px;
}

.music-play-button:active {
    transform: scale(0.95);
    box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}

.music-play-button.playing {
    background: linear-gradient(145deg, #888, #666);
    color: #fff;
}

.music-play-button:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
}

.youtube-player {
    margin-top: 5px;
    border-radius: 12px;
    overflow: hidden;
    display: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.youtube-player iframe {
    width: 100%;
    height: 180px;
    border: none;
    object-fit: contain;
}

/* ✅ 통합된 add-song-section 스타일 */
.add-song-section {
    background: linear-gradient(145deg, #0f0f0f, #050505);
    border: 1px solid #222;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ✅ 기본 닫힌 상태 */
.add-content {
    max-height: 0;
    opacity: 0;
    padding: 0 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* 🔥 열린 상태 - 스크롤 가능하게 수정 */
.add-song-section.expanded .add-content {
    max-height: calc(100vh - 200px);  /* 🔥 화면 높이에서 여유분 제외 */
    opacity: 1;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 🔥 스크롤바 숨기기 (기존 스타일 적용) */
.add-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.add-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ✅ 토글 헤더 */
.add-toggle-header {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.add-toggle-header:active {
    background: rgba(255,255,255,0.05);
}

.add-title {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.add-icon {
    font-size: 20px;
    color: #888;
    transition: transform 0.3s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-song-section.expanded .add-icon {
    transform: rotate(45deg);
    color: #fff;
}

.add-song-section.expanded .add-toggle-header {
    border-bottom-color: #333;
}

        /* 섹션 간격 조정 */
        .tab-section {
            margin-bottom: 32px;
        }

        .section-title {
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .section-description {
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .input-group {
            margin-bottom: 16px;
        }

        .input-label {
            display: block;
            font-size: 13px;
            color: #999;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .input-field {
            width: 100%;
            background: #000;
            border: 1px solid #333;
            color: #fff;
            padding: 14px 16px;
            border-radius: 12px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .input-field:focus {
            outline: none;
            border-color: #666;
            background: #111;
        }

        .input-field::placeholder {
            color: #555;
        }

        .add-btn {
            background: linear-gradient(145deg, #333, #222);
            color: #fff;
            border: none;
            padding: 14px 20px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            font-weight: 600;
            width: 100%;
            min-height: 44px;
        }

        .add-btn:active {
            background: linear-gradient(145deg, #444, #333);
            transform: scale(0.98);
        }

        .genre-filter-section {
            margin-bottom: 20px;
        }

        .genre-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 15px;
        }

        .genre-btn {
            background: rgba(255,255,255,0.05);
            border: 1px solid #333;
            color: #777;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 12px;
            font-weight: 500;
            min-height: 36px;
            display: flex;
            align-items: center;
        }

        .genre-btn:active {
            transform: scale(0.95);
        }

        .genre-btn.selected {
            background: rgba(255,255,255,0.15);
            color: #fff;
            border-color: #555;
        }

        .playlist-section {
            margin-bottom: 10px;
        }

        .playlist-info {
            background: rgba(255,255,255,0.05);
            border: 1px solid #222;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 15px;
        }

        .playlist-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: #777;
            font-weight: 500;
        }

        .song-list {
            background: linear-gradient(145deg, #0f0f0f, #050505);
            border: 1px solid #222;
            border-radius: 16px;
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden; /* 🔥 가로 스크롤 차단 */
            -webkit-overflow-scrolling: touch;
            pointer-events: auto;
            
            /* 🚫 스크롤바 숨기기 */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }


        .song-item {
            max-width: calc(100vw - 40px);
            width: 100%;
            overflow: hidden;
            padding: 16px 20px;
            border-bottom: 1px solid #111;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background 0.3s ease;
            min-height: 60px;
            /* 클릭 영역 보호 */
            position: relative;
            z-index: 1;
        }

        .song-item:active {
            background: rgba(255,255,255,0.1);
        }

        .song-item.current {
            background: rgba(255,255,255,0.1);
            border-left: 4px solid #fff;
        }

        .song-item:last-child {
            border-bottom: none;
        }

        .song-item-info {
            flex: 1;
            text-align: left;
            min-width: 0;
            max-width: calc(100% - 120px); /* 🔥 버튼 공간 더 확보 */
            overflow: hidden; /* 🔥 추가 */
        }

        .song-item-title {
            font-size: 14px;
            color: #fff;
            margin-bottom: 4px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px; /* 고정 최대폭 설정 */
            width: 100%;
        }

        .song-item-artist {
            font-size: 12px;
            color: #777;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .song-item-genre {
            font-size: 10px;
            color: #555;
            background: rgba(255,255,255,0.05);
            padding: 2px 6px;
            border-radius: 8px;
            margin-top: 2px;
            display: inline-block;
        }

        .delete-btn {
            background: transparent;
            border: 1px solid #444;
            color: #999;
            padding: 6px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
        }

        .delete-btn:active {
            background: rgba(255,255,255,0.1);
            border-color: #666;
        }

        .empty-playlist {
            padding: 40px 20px;
            text-align: center;
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }

        .auto-play-info {
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid rgba(0, 255, 0, 0.3);
            color: #4CAF50;
            padding: 10px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 12px;
            display: none;
        }

        .song-list::-webkit-scrollbar {
            display: none;
        }

        .song-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .song-list::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 2px;
        }



        /* Mobile optimizations */
        @media (max-width: 480px) {

            
            .play-btn {
                width: 70px;
                height: 70px;
            }


            
            .song-item-title {
                font-size: 13px;
                max-width: 150px;
            }
            
            .song-tooltip {
                max-width: calc(100vw - 10px);
                font-size: 11px;
            }
            

        }
        .edit-btn {
            background: transparent;
            border: 1px solid #444;
            color: #999;
            padding: 6px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
        }

        .edit-btn:active {
            background: rgba(255,255,255,0.1);
            border-color: #666;
        }

      
        /* 🆕 미니 컨트롤 스타일 추가 */
        .mini-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
            padding: 0 20px;
        }

        .track-dots {
            display: flex;
            gap: 6px;
            max-width: 200px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 5px 0;
        }

        .track-dots::-webkit-scrollbar {
            display: none;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .dot:hover {
            background: #666;
            transform: scale(1.2);
        }

        .dot.active {
            background: #fff;
            box-shadow: 0 0 8px rgba(255,255,255,0.4);
            transform: scale(1.3);
        }

        .mode-indicator {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            border: 1px solid #555; /* #333 → #555로 */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px; /* 12px → 14px */
            transition: all 0.3s ease;
            flex-shrink: 0;
            color: #ccc; /* 아이콘 색상 추가 */
        }

        .mode-indicator.random {
            background: rgba(255,255,255,0.15); /* 더 밝게 */
            border-color: #777;
            color: #fff;
        }

        .mode-indicator.random {
            background: rgba(255,255,255,0.12);
            border-color: #555;
        }


        /*
    ✅ Apple 리모컨, 주파수, 볼륨 슬라이더를 가로로 배치
        */
        .apple-remote-container {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 15px;
            width: 100%;          
            margin-top: 40px ;
           
        }

        .apple-remote {
            width: 200px;
            height: 200px;
            position: relative;
            border-radius: 50%;
            background-color: var(--remote-hardware, var(--secondary-bg)); /* 🔥 수정! */
            border: 1px solid var(--border-color);
            touch-action: manipulation;
            transition: all 0.3s ease;
        } 

        /*
    ✅ 리모컨 버튼 크기 조정
        */
        .remote-btn {
            width: 27px;
            height: 17px;
            background-color: transparent; /* 🔥 배경 완전 투명 */
            border: none; /* 🔥 테두리 완전 제거 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ccc;
            font-size: 1.2em;
            cursor: pointer;
            box-shadow: none; /* 🔥 그림자도 제거 */
            position: absolute;
            z-index: 15;
            border-radius: 0; /* 🔥 둥근 모서리도 제거 */
            outline: none; /* 🔥 포커스 아웃라인도 제거 */
          
        }

        .remote-btn:active {
            /* transform: scale(0.95); */ /* 주석처리 */
            background: rgba(255,255,255,0.2); /* 색상 변화만 */
        }

        .remote-btn:focus {
            outline: none; /* 🔥 포커스시 테두리 제거 */
        }

        /*
            ✅ 상단/하단/좌우 버튼 위치를 리모컨 크기에 맞춰 재조정
        */
        .remote-top { top: 30px; left: 50%; transform: translateX(-50%); }
        .remote-bottom { bottom: 30px; left: 50%; transform: translateX(-50%); }
        .remote-left { left: 30px; top: 50%; transform: translateY(-50%); }
        .remote-right { right: 30px; top: 50%; transform: translateY(-50%); }

        /* ✅ 수정 후: 테마 색상 반영 */
        .remote-btn-center {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--accent-color), var(--secondary-accent));
            color: var(--primary-bg);
            border: 2px solid var(--border-color);
            font-size: 16px;
            font-weight: bold;
            box-shadow: 
                0 3px 8px rgba(0,0,0,0.2),
                inset 0 1px 2px rgba(255,255,255,0.1);
            position:relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
           
        }
        

        .remote-btn-center:hover {
            border-color: var(--accent-color);
            background: linear-gradient(145deg, var(--secondary-accent), var(--accent-color));
            transform: translate(-50%, -50%) scale(1.05);
        }

        .remote-btn-center:active {
            background: linear-gradient(145deg, var(--secondary-accent), var(--border-color));
            transform: translate(-50%, -50%) scale(0.95);
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        .remote-btn-center.playing {
            background: linear-gradient(145deg, var(--accent-color), var(--secondary-accent));
            border-color: var(--accent-color);
            box-shadow: 0 0 15px var(--accent-color);
            animation: playingGlow 2s infinite;
        }


        /* 🎵 실시간 이퀄라이저 - 리모콘 아래 배치 */
        .equalizer-container {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 3px;            /* 4px → 3px (막대 많아져서 간격 줄임) */
            height: 90px;
            margin-top: 20px;
            margin-bottom: 30px;
            opacity: 0.8;
        }

        .equalizer-bar {
            width: 5px;          /* 6px → 5px (막대 많아져서 폭 줄임) */
            background: rgba(255,255,255,0.3);
            border-radius: 3px 3px 0 0;
            transition: height 0.1s ease;
            min-height: 8px;
            height: 8px;
        }

        /* 마이크 비활성화 상태 */
        .equalizer-container.inactive {
            opacity: 0.3;
        }

        .equalizer-container.inactive .equalizer-bar {
            background: rgba(255,255,255,0.1);
            height: 8px !important;
        }
        @keyframes playingGlow {
            0%, 100% { 
                box-shadow: 0 0 15px var(--accent-color);
            }
            50% { 
                box-shadow: 0 0 25px var(--accent-color);
            }
        }

        /* Track dots container */
        .track-dots-container {
            display: flex;
            justify-content: center;
            margin: 5px 0;
        }

        .track-dots {
            display: flex;
            gap: 6px;
            max-width: 200px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 5px 0;
        }

        .track-dots::-webkit-scrollbar {
            display: none;
        }

        /* 한줄 정보 스타일 */
        .song-info-compact {
            margin: -5px 0;
            text-align: center;
        }



        /* YouTube 영상 항상 보이게 */
        .youtube-player {
            margin-bottom: 20px !important;
            display: block !important;
        }

        /* 스피커 우퍼 원 (중간 레이어) */
        .speaker-cone {
            width: 155px;
            height: 155px;
            border-radius: 50%;
            background: linear-gradient(145deg, 
                var(--border-color) 0%, 
                var(--remote-hardware, var(--secondary-bg)) 50%, /* 🔥 수정! */
                var(--primary-bg) 100%) !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 
                inset 0 4px 8px rgba(255,255,255,0.05),
                inset 0 -4px 8px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
        }   

        .dial-ring {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            background: 
        /* 🔊 스피커 콘 스타일 방사형 그라데이션 */
        radial-gradient(circle at center,
            transparent 75px,                    /* 안쪽 투명 */
            var(--secondary-bg) 76px,           /* 콘 시작 */
            var(--secondary-bg) 55px,           /* 밝은 부분 */
            var(--secondary-bg) 85px,           /* 어두운 부분 */
            var(--remote-hardware) 50px,         /* 다시 밝은 부분 */
            var(--secondary-bg) 95px,           /* 가장자리 어둡게 */
            transparent 96px                 /* 바깥쪽 투명 */
        );
          box-shadow: 
                 🎯 스피커 콘 깊이감 
                inset 0 0 10px rgba(121, 115, 115, 0.3),
                0 0 0 1px rgba(204, 198, 198, 0.1),
                0 0 0 2px rgba(167, 164, 164, 0.2);             /* 바깥 그림자 */
            transition: all 0.3s ease;
        }
        .manage-btn {
            background: rgba(255,255,255,0.08);
            border: 1px solid #444;
            color: #ccc;
            padding: 12px 24px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .manage-btn:hover {
            background: rgba(255,255,255,0.12);
            border-color: #666;
        }

        /* 다이얼 터치 영역 (투명) */
        .dial-touch-area {
            width: 180px;        /* 200px → 180px */
            height: 180px;       /* 200px → 180px */
            border-radius: 50%;
            position: absolute;
            top: 50%;           /* ✅ 중앙 정렬 방식 변경 */
            left: 50%;          /* ✅ 중앙 정렬 방식 변경 */
            transform: translate(-50%, -50%);  /* ✅ 추가 */
            z-index: 1;
            cursor: pointer;
            border: 25px solid transparent;
            background: transparent;
            box-sizing: border-box;
            touch-action: manipulation;
            -webkit-touch-callout: none;
        }

        /* 말풍선 팝업 */
        .song-tooltip {
            position: fixed;
            background: rgba(0,0,0,0.9);
            color: #fff;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            pointer-events: none;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap;
            max-width: calc(100vw - 20px); /* 🔥 추가 */
            overflow: hidden; /* 🔥 추가 */
            text-overflow: ellipsis; /* 🔥 추가 */
        }

        .song-tooltip.show {
            opacity: 1;
        }

        /* 가로 화면 대응 */
        @media (orientation: landscape) {
            .music-container {
                height: auto; /* 100vh 제한 해제 */
                min-height: 100vh; /* 최소 높이만 유지 */
                overflow-y: auto; /* 세로 스크롤 허용 */
                width: 100%;
                max-width: 100vw;
                overflow-x: hidden;
            }

            
            .apple-remote-container {
                max-width: 100vw;
                overflow: hidden;
            }
            
            .youtube-player iframe {
                height: 70vh;
                width: 100%;
                border: none;
                object-fit: contain;
                max-width: 100vw;
            }
            
            .song-info-compact {
                margin: 10px 0;
            }
        }

        /* 📱 모바일에서 완전한 스크롤 차단 */
        @media (max-width: 768px) {
            html {
                overflow: hidden;
                touch-action: manipulation;
            }
            
            body {
                overflow: hidden;
                position: fixed;
                width: 100%;
                height: 100%;
            }
            
            /* 리모콘 터치 영역 더 크게 */
            .dial-touch-area {
                width: 200px;       /* 220px → 200px */
                height: 200px;      /* 220px → 200px */
                margin: 0;          /* -10px → 0 제거 */
            }
        }

        /* 검색 오버레이 스타일 */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 2000;
    transform: translateY(-100vh);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
}

.search-overlay.active {
    transform: translateY(0);
}

.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #111;
    border-bottom: 1px solid #333;
}

.search-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.close-search-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid #555;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.close-search-btn:hover {
    background: rgba(255,255,255,0.2);
}

.search-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-iframe {
    flex: 1;
    border: none;
    width: 100%;
    background: #fff;
}

.url-input-section {
    background: #111;
    padding: 20px;
    border-top: 1px solid #333;
}

.url-input-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.url-input {
    flex: 1;
    background: #000;
    border: 1px solid #333;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
}

.url-input:focus {
    outline: none;
    border-color: #666;
}

.add-url-btn {
    background: #c41e3a;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.add-url-btn:active {
    transform: scale(0.95);
}



.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.search-header h3 {
    color: #fff;
    margin: 0;
}

.search-header button {
    background: none;
    border: none;
    color: #999;
    font-size: 20px;
    cursor: pointer;
}

.url-input-section {
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 12px;
    margin-top: 15px;
}

.input-group label {
    color: #999;
    font-size: 13px;
    display: block;
    margin-bottom: 8px;
}

/* 🎯 @KALPHI 버튼 스타일 */
.kalphi-button, .remote-bottom-text {
   position: fixed;
   bottom: 30px;
   right: 70px;
   background: transparent;  /* 배경 투명 */
   color: var(--accent-color);  /* 테마색 글씨 */
   padding: 8px 12px;
   border: none;  /* 테두리 완전 제거 */
   font-size: 12px;
   font-weight: 700;
   text-shadow: 
       0 1px 2px rgba(0,0,0,0.5),         /* 아래쪽 그림자 */
       inset 0 1px 1px rgba(0,0,0,0.3);   /* 각인 효과 */
   transition: all 0.2s ease;
   z-index: 100;
   cursor: pointer;
}

.kalphi-button:hover, .remote-bottom-text:hover {
   color: var(--secondary-accent);  /* 호버시 다른 테마색 */
   transform: scale(1.05);
}

.kalphi-button:active, .remote-bottom-text:active {
   text-shadow: 
       inset 0 2px 3px rgba(0,0,0,0.5);  /* 더 깊게 각인된 느낌 */
   transform: scale(0.95);
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .remote-bottom-text {
        bottom: 20px;
        right: 20px;
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* 🌈 색상 테마 팔레트 */
:root {
   --primary-bg: #000;
   --secondary-bg: #111;
   --accent-color: #fff;
   --secondary-accent: #ccc;
   --border-color: #333;
   --text-color: #fff;
}

/* 🥛 우유빛 아이보리 테마 */
.theme-milk-ivory {
   --primary-bg: #1a1917;        /* 진한 크림 블랙 */
   --secondary-bg: #252420;      /* 어두운 아이보리 */
   --accent-color: #f5f5dc;      /* 베이지 화이트 */
   --secondary-accent: #e6e6dc;  /* 연한 아이보리 */
   --border-color: #3d3c37;      /* 크림 그레이 */
   --text-color: #f0f0e8;        /* 우유빛 화이트 */
   --remote-hardware: #e6e6dc;   /* 아이보리 리모콘 */
}

/* 💛 진노랑 테마 */
.theme-deep-yellow {
   --primary-bg: #1a1500;
   --secondary-bg: #2d2700;
   --accent-color: #ffd700;
   --secondary-accent: #ffa000;
   --border-color: #4d4d00;
   --text-color: #fff3cd;
   --remote-hardware: #ffa000; /* 노란색 리모콘 */
}

/* 🍷 와인 테마 */
.theme-wine {
   --primary-bg: #1a0508;
   --secondary-bg: #2d0a10;
   --accent-color: #8b0000;
   --secondary-accent: #dc143c;
   --border-color: #971818;
   --text-color: #f8d7da;
   --remote-hardware: #dc143c; /* 와인색 리모콘 */
}

/* 🔘 스테인레스 스틸 테마 */
.theme-steel {
   --primary-bg: #0f0f0f;
   --secondary-bg: #1e1e1e;
   --accent-color: #c0c0c0;
   --secondary-accent: #808080;
   --border-color: #555555;
   --text-color: #e8e8e8;
   --remote-hardware: #3a3a3a; /* 스틸 그레이 리모콘 */
}

/* 💙 다크블루 테마 */
.theme-dark-blue {
   --primary-bg: #041225;
   --secondary-bg: #081e3d;
   --accent-color: #1976d2;
   --secondary-accent: #0d47a1;
   --border-color: #1c5aa5;
   --text-color: #bbdefb;
   --remote-hardware: #0d47a1; /* 다크블루 리모콘 */
}

/* 🌳 나무느낌 테마 */
.theme-wood {
   --primary-bg: #1a0f0a;
   --secondary-bg: #2d1b10;
   --accent-color: #d2691e;
   --secondary-accent: #8b4513;
   --border-color: #4a3428;
   --text-color: #ddbea9;
   --remote-hardware: #8b4513; /* 우드 브라운 리모콘 */
}

/* 🟢 네온 그린 테마 */
.theme-neon-green {
   --primary-bg: #0a1a0a;
   --secondary-bg: #0f2a0f;
   --accent-color: #00ff00;
   --secondary-accent: #32cd32;
   --border-color: #239b23;
   --text-color: #ccffcc;
   --remote-hardware: #32cd32; /* 네온그린 리모콘 */
}

/* 🟣 사이버 퍼플 테마 */
.theme-cyber-purple {
   --primary-bg: #1a0a1a;
   --secondary-bg: #2a0f2a;
   --accent-color: #8a2be2;
   --secondary-accent: #9932cc;
   --border-color: #5a2d5a;
   --text-color: #e6ccff;
   --remote-hardware: #9932cc; /* 사이버 퍼플 리모콘 */
}

/* 🧡 선셋 오렌지 테마 */
.theme-sunset-orange {
   --primary-bg: #1a0f05;
   --secondary-bg: #2a1a0a;
   --accent-color: #ff6347;
   --secondary-accent: #ff4500;
   --border-color: #c5351c;
   --text-color: #ffddcc;
   --remote-hardware: #ff4500; /* 오렌지 리모콘 */
}

/* 🩵 아이스 블루 테마 */
.theme-ice-blue {
   --primary-bg: #051a1a;
   --secondary-bg: #0a2a2a;
   --accent-color: #00ced1;
   --secondary-accent: #20b2aa;
   --border-color: hsl(180, 70%, 34%);
   --text-color: #ccffff;
   --remote-hardware: #20b2aa; /* 아이스블루 리모콘 */
}

/* 🌹 로즈골드 테마 */
.theme-rose-gold {
   --primary-bg: #1a1010;
   --secondary-bg: #2a1a1a;
   --accent-color: #e8b4b8;
   --secondary-accent: #d4a5a9;
   --border-color: #4a3535;
   --text-color: #f5e6e8;
   --remote-hardware: #d4a5a9; /* 로즈골드 리모콘 */
}

/* ⚫ 매트 블랙 테마 */
.theme-matte-black {
   --primary-bg: #0a0a0a;
   --secondary-bg: #151515;
   --accent-color: #404040;
   --secondary-accent: #606060;
   --border-color: #252525;
   --text-color: #d0d0d0;
   --remote-hardware: #606060; /* 매트블랙 리모콘 */
}



/* 모든 요소에 CSS 변수 적용 */
body {
    background: var(--primary-bg);
    color: var(--text-color);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



.remote-btn-center {
    background: linear-gradient(145deg, var(--secondary-accent), var(--accent-color));
    border: 2px solid var(--border-color);
    color: var(--text-color);
}

.remote-btn {
    color: var(--accent-color);
}





/* 🎨 온보딩 모달 스타일 */
.color-onboarding-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.onboarding-content {
    background: var(--secondary-bg);
    border-radius: 24px;
    padding: 30px 20px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-color);
}

.onboarding-header h2 {
    color: var(--text-color);
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700;
}

.onboarding-header p {
    color: var(--secondary-accent);
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.4;
}

/* 데모 리모콘 */
.demo-remote {
    width: 120px;
    height: 120px;
    position: relative;
    border-radius: 50%;
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    margin: 20px auto;
    transition: all 0.3s ease;
}

.demo-dial-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-bg);
    box-shadow: 
        inset 0 2px 4px rgba(255,255,255,0.1),
        inset 0 -2px 4px rgba(0,0,0,0.5);
}

.demo-speaker-cone {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--border-color), var(--primary-bg));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.demo-dial-touch {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
}

.demo-btn-center {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-color), var(--secondary-accent));
    color: var(--primary-bg);
    border: none;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.demo-btn-center:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.demo-btn-center:active {
    transform: translate(-50%, -50%) scale(0.95);
}

.color-info {
    margin: 25px 0;
}

.current-theme-name {
    color: var(--accent-color);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.color-instruction {
    color: var(--secondary-accent);
    font-size: 12px;
}

.onboarding-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
}

.confirm-color-btn {
    background: var(--accent-color);
    color: var(--primary-bg);
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirm-color-btn:active {
    transform: scale(0.95);
}

.skip-btn {
    background: transparent;
    color: var(--secondary-accent);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.skip-btn:hover {
    background: var(--border-color);
}

/* 🎨 테마 버튼 호버 효과 */
.theme-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.theme-btn:active {
    transform: scale(0.95);
}

.theme-btn.active {
    box-shadow: 0 0 0 3px var(--accent-color) !important;
    transform: scale(1.02);
}

/* 토스트 메시지 스타일 */
.toast-message {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    white-space: nowrap;
    max-width: calc(100vw - 40px);
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 🎨 색상 선택 모드 스타일 */
.color-selection-active {
    box-shadow: 0 0 20px var(--accent-color) !important;
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.remote-btn-center.color-selection-mode {
    background: linear-gradient(145deg, var(--accent-color), var(--secondary-accent)) !important;
    box-shadow: 0 0 15px var(--accent-color) !important;
    animation: colorPulse 2s infinite;
}

@keyframes colorPulse {
    0%, 100% { 
        box-shadow: 0 0 15px var(--accent-color);
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 25px var(--accent-color);
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* 🌈 색상 선택 가이드 모달 */
.color-selection-guide {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    max-width: 320px;
    width: calc(100vw - 40px);
}

.color-selection-guide.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.guide-content {
    text-align: center;
}

.guide-title {
    color: var(--accent-color);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.guide-instruction {
    color: var(--secondary-accent);
    font-size: 12px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.current-color-info {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
}

.current-color-info span {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
}

.guide-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirm-btn {
    background: var(--accent-color);
    color: var(--primary-bg);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-btn:active {
    transform: scale(0.95);
}

.cancel-btn {
    background: transparent;
    color: var(--secondary-accent);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn:hover {
    background: var(--border-color);
}

/* 📱 모바일 최적화 */
@media (max-width: 480px) {
    .color-selection-guide {
        bottom: 100px;
        padding: 15px;
    }
    
    .guide-title {
        font-size: 14px;
    }
    
    .guide-instruction {
        font-size: 11px;
    }
}

/* 🔥 인기 검색어 버튼 스타일 */
.popular-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid #333;
    color: #ccc;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
}

.popular-btn:active {
    background: rgba(255,255,255,0.15);
    border-color: #555;
    color: #fff;
}


        .search-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #333;
        }

        .search-header h3 {
            color: #fff;
            margin: 0;
        }

        .search-header button {
            background: none;
            border: none;
            color: #999;
            font-size: 20px;
            cursor: pointer;
        }

        .url-input-section {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 12px;
            margin-top: 15px;
        }

        .input-group label {
            color: #999;
            font-size: 13px;
            display: block;
            margin-bottom: 8px;
        }

        /* 우측 벽 파란 띠 */
        .right-edge-trigger {
            position: fixed;
            top: 50%;
            right: 0;
            width: 4px;        /* 1mm 정도 */
            height: 100px;     /* 10mm 정도 */
            background: var(--accent-color);  /* 🎨 테마 색상으로! */
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 100;
            border-radius: 2px 0 0 2px;
        }
        .right-edge-trigger:hover {
            opacity: 1;
            width: 6px;  /* 호버시 더 굵게 */
        }

        /* 폴더 메뉴 슬라이드 */
        .folder-menu {
            position: fixed;
            top: 20%;
            right: -250px;     /* 초기에는 숨김 */
            width: 220px;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 12px;
            padding: 15px;
            transition: right 0.3s ease;
            z-index: 200;
        }

        .folder-menu.open {
            right: 15px;       /* 열릴 때 위치 */
        }

        /* 폴더 아이템들 */
        .folder-item {
            background: rgba(255, 255, 255, 0.1);
            margin: 8px 0;
            padding: 12px;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            transition: background 0.2s;
        }

        .folder-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* 순차/랜덤 선택 UI */
        .playback-options {
            display: flex;
            gap: 10px;
            margin: 10px 0;
            justify-content: center;
        }

        .option-btn {
            background: rgba(0, 123, 255, 0.2);
            border: 1px solid rgba(0, 123, 255, 0.5);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .option-btn.selected {
            background: rgba(0, 123, 255, 0.8);
            border-color: rgba(0, 123, 255, 1);
        }

        /* 📁 폴더 관리 모달 스타일 */
        .folder-management-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2000;
            display: none;
        }

        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
        }

        .modal-content {
            position: relative;
            background: #111;
            margin: 40px auto;
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            border-radius: 20px;
            overflow: hidden;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid #333;
        }

        .modal-title {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .modal-close {
            background: none;
            border: none;
            color: #999;
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
        }

        /* 폴더 목록 */
        .folder-list {
            max-height: 400px;
            overflow-y: auto;
            padding: 16px 24px;
        }

        .folder-item {
            display: flex;
            align-items: center;
            background: rgba(255,255,255,0.05);
            border: 1px solid #333;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            transition: all 0.2s ease;
        }

        .folder-item:hover {
            background: rgba(255,255,255,0.1);
            border-color: #555;
        }

        .folder-grip {
            color: #666;
            font-size: 16px;
            cursor: grab;
            margin-right: 12px;
            user-select: none;
        }

        .folder-info {
            flex: 1;
        }

        .folder-name {
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .folder-meta {
            color: #888;
            font-size: 12px;
        }

        .folder-actions {
            display: flex;
            gap: 8px;
        }

        .folder-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid #444;
            border-radius: 6px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .folder-btn:hover {
            background: rgba(255,255,255,0.2);
            border-color: #666;
        }

        .folder-btn.delete:hover {
            background: rgba(255,0,0,0.2);
            border-color: #ff4444;
            color: #ff4444;
        }

        /* 새 폴더 만들기 */
        .create-folder-section {
            padding: 16px 24px;
            border-top: 1px solid #333;
        }

        .create-folder-btn {
            width: 100%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: none;
            border-radius: 12px;
            padding: 16px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .create-folder-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }

        .create-icon {
            font-size: 16px;
        }

        .create-text {
            font-size: 15px;
        }

        /* 모바일 반응형 */
        @media (max-width: 480px) {
            .modal-content {
                margin: 20px auto;
                width: 95%;
                max-height: 85vh;
            }
            
            .folder-actions {
                gap: 4px;
            }
            
            .folder-btn {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }
        }

       /* ➕ 새 폴더 만들기 모달 */
.create-folder-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: none;
    background: rgba(0,0,0,0.8);
}

.create-folder-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-folder-modal .modal-content {
    background: #111;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.create-folder-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}


        /* 아이콘 피커 */
        .icon-picker {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
            margin-top: 8px;
        }

        .icon-option {
            width: 44px;
            height: 44px;
            background: rgba(255,255,255,0.05);
            border: 2px solid #333;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .icon-option:hover {
            background: rgba(255,255,255,0.1);
            border-color: #555;
        }

        .icon-option.active {
            background: var(--accent-color);
            border-color: var(--accent-color);
            box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
        }

        /* 입력 필드 */
        .input-wrapper {
            position: relative;
        }

        .form-input, .form-textarea {
            width: 100%;
            background: rgba(255,255,255,0.05);
            border: 1px solid #333;
            border-radius: 8px;
            padding: 12px 16px;
            color: #fff;
            font-size: 15px;
            transition: all 0.2s ease;
        }

        .form-input:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--accent-color);
            background: rgba(255,255,255,0.08);
        }

        .form-textarea {
            resize: none;
            height: 80px;
        }

        .char-count {
            position: absolute;
            right: 8px;
            bottom: 8px;
            font-size: 11px;
            color: #666;
        }

        /* 공개 설정 */
        .privacy-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .privacy-option {
            background: rgba(255,255,255,0.05);
            border: 1px solid #333;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .privacy-option:hover {
            background: rgba(255,255,255,0.08);
        }

        .privacy-option input[type="radio"] {
            display: none;
        }

        .privacy-option input[type="radio"]:checked + .privacy-icon {
            transform: scale(1.2);
        }

        .privacy-option:has(input:checked) {
            border-color: var(--accent-color);
            background: rgba(var(--accent-color-rgb), 0.1);
        }

        .privacy-icon {
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .privacy-text {
            flex: 1;
        }

        .privacy-title {
            color: #fff;
            font-weight: 600;
            font-size: 14px;
        }

        .privacy-desc {
            color: #999;
            font-size: 12px;
            margin-top: 2px;
        }

        /* 버튼 */
        .form-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 32px;
        }

        .btn {
            padding: 12px 20px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }

        .btn-primary {
            background: var(--accent-color);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
        }

        .btn-secondary {
            background: rgba(255,255,255,0.1);
            color: #ccc;
            border: 1px solid #444;
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,0.15);
        }

        /* 📝 곡 관리 모달 */
        .song-management-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3000;
            display: none;
        }

        .song-management-modal.active {
            display: block;
        }

        .header-info {
            flex: 1;
        }

        .folder-stats {
            color: #999;
            font-size: 13px;
            margin-top: 4px;
        }

        .song-list {
            max-height: 400px;
            overflow-y: auto;
            padding: 16px 24px;
        }

        .song-item {
            display: flex;
            align-items: center;
            background: rgba(255,255,255,0.03);
            border: 1px solid #333;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 8px;
            transition: all 0.2s ease;
        }

        .song-item:hover {
            background: rgba(255,255,255,0.06);
        }

        .song-info {
            display: flex;
            align-items: center;
            flex: 1;
            gap: 12px;
        }

        .song-thumbnail {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            overflow: hidden;
            background: #333;
        }

        .song-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .song-details {
            flex: 1;
            min-width: 0;
        }

        .song-title {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .song-artist {
            color: #999;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .song-actions {
            display: flex;
            gap: 6px;
        }

        .song-btn {
            width: 32px;
            height: 32px;
            background: rgba(255,255,255,0.08);
            border: 1px solid #444;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
        }

        .song-btn:hover {
            background: rgba(255,255,255,0.15);
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }

        .empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }

        .empty-title {
            font-size: 18px;
            font-weight: 600;
            color: #999;
            margin-bottom: 8px;
        }

        .empty-desc {
            font-size: 14px;
            line-height: 1.4;
        }

        /* 🎵 곡 선택 모달 스타일 */
        .song-selection-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 4000;
            display: block;
        }

        .selection-header {
            padding: 16px 24px;
            border-bottom: 1px solid #333;
            background: rgba(255,255,255,0.02);
        }

        .selection-header p {
            color: #ccc;
            font-size: 14px;
            margin: 0 0 8px 0;
        }

        .selection-count {
            color: var(--accent-color);
            font-size: 12px;
            font-weight: 600;
        }

        .song-selection-list {
            max-height: 400px;
            overflow-y: auto;
            padding: 8px;
        }

        .song-selection-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            margin-bottom: 4px;
            background: rgba(255,255,255,0.03);
            border: 1px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .song-selection-item:hover {
            background: rgba(255,255,255,0.08);
            border-color: #444;
        }

        .song-selection-item:has(input:checked) {
            background: rgba(var(--accent-color-rgb), 0.1);
            border-color: var(--accent-color);
        }

        .song-checkbox {
            margin-right: 12px;
            accent-color: var(--accent-color);
        }

        .song-selection-info {
            flex: 1;
        }

        .song-selection-title {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 2px;
        }

        .song-selection-artist {
            color: #999;
            font-size: 12px;
        }

        .song-selection-icon {
            font-size: 16px;
            opacity: 0.6;
        }

        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #333;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        .btn.enabled {
            background: var(--accent-color) !important;
            transform: scale(1.02);
        }

        /* 모바일 반응형 */
        @media (max-width: 480px) {
            .song-selection-list {
                max-height: 300px;
            }
            
            .song-selection-item {
                padding: 10px 12px;
            }
        }

        .song-icon {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background: rgba(255,255,255,0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #666;
        }

        /* 🎯 드래그 앤 드롭 관련 스타일 */
        .song-item {
            transition: all 0.2s ease;
            user-select: none;
        }

        .song-item[draggable="true"] {
            cursor: grab;
        }

        .song-item[draggable="true"]:active {
            cursor: grabbing;
        }

        .song-item.drag-over {
            background: rgba(255,255,255,0.15) !important;
            border-color: var(--accent-color) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .song-item:hover {
            background: rgba(255,255,255,0.08);
            transform: translateY(-1px);
        }

        /* 드래그 중인 아이템 스타일 */
        .song-item[style*="opacity: 0.5"] {
            background: rgba(255,255,255,0.02) !important;
            border-style: dashed !important;
        }

        /* 🎯 개선된 드래그 앤 드롭 스타일 */
        .song-grip {
            color: #666;
            font-size: 16px;
            margin-right: 12px;
            user-select: none;
            cursor: grab;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s ease;
            touch-action: none; /* 모바일 터치 최적화 */
        }

        .song-grip:hover {
            color: #999;
            background: rgba(255,255,255,0.1);
        }

        .song-grip:active {
            cursor: grabbing;
            background: rgba(255,255,255,0.2);
            transform: scale(1.1);
        }

        .song-item {
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            user-select: none;
        }

        .song-item.drag-over {
            background: rgba(var(--accent-color-rgb), 0.15) !important;
            border-color: var(--accent-color) !important;
            transform: translateY(-2px) scale(1.01);
            box-shadow: 0 8px 25px rgba(var(--accent-color-rgb), 0.3);
        }

        /* 드래그 중인 아이템 스타일 */
        .song-item[style*="opacity: 0.5"] {
            background: rgba(255,255,255,0.02) !important;
            border: 2px dashed var(--accent-color) !important;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        /* 📱 모바일 터치 최적화 */
        @media (max-width: 768px) {
            .song-grip {
                padding: 8px;
                font-size: 18px;
                margin-right: 8px;
            }
            
            .song-item {
                margin-bottom: 8px;
                padding: 16px 12px;
            }
            
            .song-item.drag-over {
                transform: translateY(-3px) scale(1.02);
                box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.4);
            }
        }

        /* 터치 디바이스에서 더 큰 터치 영역 */
        @media (pointer: coarse) {
            .song-grip {
                padding: 12px 8px;
                margin: -4px 8px -4px 0;
                min-width: 32px;
                text-align: center;
            }
        }

        .song-item.dragging {
            z-index: 1000;
            pointer-events: none;
            box-shadow: 0 8px 25px rgba(0,0,0,0.4);
            border: 2px dashed var(--accent-color);
        }

        .song-grip {
            cursor: grab;
            user-select: none;
            touch-action: none;
            padding: 8px 4px;
        }

        .song-grip:active {
            cursor: grabbing;
        }

        /* 📤 Import/Export 모달 스타일 */
        .import-export-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3000;
            display: none;
        }

        .modal-content.medium {
            max-width: 500px;
            max-height: 85vh;
            overflow-y: auto; /* 스크롤 가능하게 */
        }

        /* 탭 네비게이션 */
        .tab-navigation {
            display: flex;
            border-bottom: 1px solid #333;
        }

        .tab-btn {
            flex: 1;
            background: rgba(255,255,255,0.05);
            border: none;
            padding: 16px;
            color: #999;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s ease;
        }

        .tab-btn.active {
            background: rgba(255,255,255,0.1);
            color: #fff;
            border-bottom: 2px solid var(--accent-color);
        }

        .tab-content {
            display: none;
            padding: 24px;
            min-height: 200px; /* 최소 높이 설정 */
            position: relative; /* z-index 적용을 위해 */
        }

        .tab-content.active {
            display: block;
            z-index: 1; /* 다른 탭보다 위에 표시 */
        }

        /* 백업 옵션 */
        .backup-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 20px 0;
        }

        .backup-option {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid #333;
            border-radius: 8px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .backup-option:hover {
            background: rgba(255,255,255,0.08);
        }

        .backup-option input[type="checkbox"] {
            accent-color: var(--accent-color);
        }

        .option-icon {
            font-size: 20px;
        }

        .option-info {
            flex: 1;
        }

        .option-name {
            color: #fff;
            font-weight: 500;
            margin-bottom: 2px;
        }

        .option-desc {
            color: #999;
            font-size: 12px;
        }

        /* 내보내기 버튼들 */
        .export-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 24px;
        }

        .export-btn {
            background: rgba(255,255,255,0.05);
            border: 1px solid #444;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .export-btn:hover {
            background: rgba(255,255,255,0.1);
            transform: translateY(-1px);
        }

        .btn-text {
            flex: 1;
            text-align: left;
        }

        .btn-title {
            color: #fff;
            font-weight: 600;
            display: block;
            margin-bottom: 4px;
        }

        .btn-desc {
            color: #999;
            font-size: 12px;
            display: block;
        }

        /* 파일 드롭존 */
        .file-drop-zone {
            border: 2px dashed #555;
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            background: rgba(255,255,255,0.02);
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 20px 0;
        }

        .file-drop-zone:hover,
        .file-drop-zone.drag-over {
            border-color: var(--accent-color);
            background: rgba(var(--accent-color-rgb), 0.1);
        }

        .drop-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }

        .drop-title {
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .drop-subtitle {
            color: #999;
            font-size: 14px;
            margin-bottom: 12px;
        }

        .drop-formats {
            color: #666;
            font-size: 12px;
        }

        /* URL 가져오기 */
        .url-import-section {
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid #333;
        }

        .url-input-group {
            display: flex;
            gap: 12px;
            margin: 16px 0;
        }

        .url-input {
            flex: 1;
            background: rgba(255,255,255,0.05);
            border: 1px solid #333;
            border-radius: 8px;
            padding: 12px 16px;
            color: #fff;
        }

        .url-import-btn {
            background: var(--accent-color);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .url-examples {
            background: rgba(255,255,255,0.02);
            border-radius: 8px;
            padding: 16px;
            margin-top: 16px;
        }

        .example-title {
            color: #fff;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .example-item {
            color: #999;
            font-size: 13px;
            margin-bottom: 4px;
        }

        /* Import/Export 전용 스타일로 변경 */
        .import-export-modal .section-title {
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .import-export-modal .section-description {
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.4;
        }

        /* URL 섹션을 탭 외부로 이동하거나 구분 */
        .url-import-section {
            margin-top: 32px;
            padding: 24px;
            background: rgba(255,255,255,0.02);
            border-radius: 12px;
            border: 1px solid #333;
        }



        /* 🔴 빨간줄 - 관리자 큐레이션 */
        .red-edge {
            position: fixed;
            top: 70%;  /* 파란줄 아래 70px */
            right: 0;
            width: 4px;
            height: 120px;
            background: linear-gradient(180deg, #dc2626, #b91c1c);
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 100;
            border-radius: 2px 0 0 2px;
            box-shadow: -2px 0 8px rgba(220, 38, 38, 0.3);
            transition: all 0.3s ease;
        }

        .red-edge:hover {
            width: 6px;
            background: linear-gradient(180deg, #ef4444, #dc2626);
            box-shadow: -3px 0 12px rgba(220, 38, 38, 0.5);
        }

        /* 🔥 큐레이션 메뉴 */
        .curation-menu {
            position: fixed;
            top: 10%;                    /* 더 위에서 시작 */
            right: -280px;
            width: 250px;
            max-height: 80vh;           /* 🎯 최대 높이 80% 제한 */
            background: linear-gradient(145deg, rgba(139, 0, 0, 0.95), rgba(185, 28, 28, 0.9));
            border-radius: 12px;
            padding: 0;                 /* 패딩 제거하고 내부에서 처리 */
            transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 200;
            border: 1px solid #dc2626;
            box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            display: flex;              /* 플렉스로 변경 */
            flex-direction: column;     /* 세로 방향 */
            overflow: hidden;           /* 메뉴 자체는 오버플로우 숨김 */
        }

        /* 큐레이션 헤더 - 고정 */
        .curation-header {
            flex-shrink: 0;             /* 헤더는 줄어들지 않음 */
            padding: 15px 15px 12px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 0;
        }

        /* 큐레이션 리스트 - 스크롤 가능 */
        .curation-list {
            flex: 1;                    /* 남은 공간 모두 사용 */
            overflow-y: auto;           /* 세로 스크롤 허용 */
            overflow-x: hidden;
            padding: 8px 15px 15px 15px;
            -webkit-overflow-scrolling: touch;  /* iOS 부드러운 스크롤 */
        }

        .curation-menu.open {
            right: 15px;
        }

        /* 큐레이션 헤더 */
        .curation-header {
            flex-shrink: 0;             /* 헤더 고정 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 15px 12px 15px;  /* 패딩 명시 */
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 0;           /* 마진 제거 */
        }

        .curation-header h3 {
            color: white;
            font-size: 14px;
            font-weight: 600;
            margin: 0;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        .admin-badge {
            background: linear-gradient(45deg, #ff4444, #ff6b6b);
            color: white;
            padding: 3px 8px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* 큐레이션 아이템들 */
        .curation-item {
            background: rgba(255, 255, 255, 0.1);
            margin: 8px 0;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 3px solid #ff4444;
            backdrop-filter: blur(5px);
        }

        .curation-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(-3px);
            box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
        }

        .curation-item:active {
            transform: translateX(-1px) scale(0.98);
        }

        .curation-title {
            color: white;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 4px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .curation-meta {
            color: rgba(255, 255, 255, 0.7);
            font-size: 11px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .curation-count {
            background: rgba(255, 255, 255, 0.2);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }

        /* 큐레이션 재생 중 표시 */
        .curation-item.playing {
            background: rgba(255, 68, 68, 0.3);
            border-left-color: #fbbf24;
            animation: curationPulse 2s infinite;
        }

        #curation-list {
            flex: 1;                    /* 남은 공간 모두 사용 */
            overflow-y: auto;           /* 세로 스크롤 허용 */
            overflow-x: hidden;
            padding: 8px 15px 15px 15px;
            -webkit-overflow-scrolling: touch;  /* iOS 부드러운 스크롤 */
        }

        /* 스크롤바 스타일링 */
        #curation-list::-webkit-scrollbar {
            width: 4px;
        }

        #curation-list::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
        }

        #curation-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }

        #curation-list::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        @keyframes curationPulse {
            0%, 100% { 
                box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
            }
            50% { 
                box-shadow: 0 4px 20px rgba(255, 68, 68, 0.6);
            }
        }

        /* 모바일에서는 스크롤바 숨기기 */
        @media (max-width: 768px) {
            .curation-menu {
                top: 15%;               /* 모바일에서 위치 조정 */
                max-height: 70vh;       /* 모바일에서 높이 줄임 */
            }
            
            #curation-list::-webkit-scrollbar {
                display: none;
            }
            
            #curation-list {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
        }

        /* 곡 추가 버튼 */
        .add-to-my-folder-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: rgba(34, 197, 94, 0.8);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .curation-item:hover .add-to-my-folder-btn {
            opacity: 1;
            transform: scale(1.1);
        }

        .add-to-my-folder-btn:hover {
            background: #22c55e;
            transform: scale(1.2);
        }

        .add-to-my-folder-btn:active {
            transform: scale(0.9);
        }

/* 모바일 최적화 */
@media (max-width: 768px) {
    .red-edge {
        top: 70%;
        height: 100px;
    }
    
    .curation-menu {
        width: 220px;
        right: -240px;
        top: 25%;
    }
    
    .curation-menu.open {
        right: 10px;
    }
    
    .add-to-my-folder-btn {
        opacity: 1; /* 모바일에서는 항상 표시 */
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
}

/* 관리자 큐레이션 표시 (리모컨 하단) */
.admin-curation-indicator {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(220, 38, 38, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid #dc2626;
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.4);
}

.admin-curation-indicator.show {
    opacity: 1;
    bottom: -35px;
}

/* 대시보드 알림 스타일 */
.notification-curation {
    border-left: 4px solid #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.notification-curation .notif-emoji {
    color: #dc2626;
}

/* 곡 정보 라인에 관리자 표시 */
.song-line.admin-curated {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

.song-line.admin-curated::before {
    content: "🔥 ";
    color: #dc2626;
}

/* 애니메이션 효과 */
@keyframes redGlow {
    0%, 100% { 
        box-shadow: -2px 0 8px rgba(220, 38, 38, 0.3);
    }
    50% { 
        box-shadow: -2px 0 15px rgba(220, 38, 38, 0.6);
    }
}

.red-edge.has-new-content {
    animation: redGlow 3s infinite;
}

/* 큐레이션 드롭다운 효과 */
.curation-item {
    transform: translateY(-10px);
    opacity: 0;
    animation: slideInFromTop 0.4s ease forwards;
}

.curation-item:nth-child(1) { animation-delay: 0.1s; }
.curation-item:nth-child(2) { animation-delay: 0.2s; }
.curation-item:nth-child(3) { animation-delay: 0.3s; }
.curation-item:nth-child(4) { animation-delay: 0.4s; }
.curation-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInFromTop {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 🎵 Add Music 모달 - 위치 재조정 */
.search-modal {
    position: fixed;
    top: 20px;              /* ⭐ 80px → 20px로 변경 */
    left: 0;
    width: 100%;
    height: calc(100vh - 20px);  /* ⭐ 높이도 조정 */
    background: rgba(0,0,0,0.95);
    z-index: 2000;
    display: none;
    padding: 10px;
    box-sizing: border-box;
}

.search-content {
    background: #111;
    border-radius: 20px;
    width: calc(100vw - 20px);
    height: calc(100vh - 40px);  /* ⭐ 높이 조정 */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #333;
}

/* 📱 모바일에서 더 위로 */
@media (max-width: 768px) {
    .search-modal {
        top: 10px;           /* ⭐ 모바일에서는 거의 최상단 */
        height: calc(100vh - 10px);
        padding: 5px;
    }
    
    .search-content {
        height: calc(100vh - 20px);
        width: calc(100vw - 10px);
        border-radius: 16px;
    }
    
    /* 검색 결과 영역 높이 확보 */
    .results-section-scrollable {
        flex: 1;
        min-height: 250px;   /* ⭐ 최소 높이 보장 */
        max-height: none;    /* 제한 해제 */
        overflow-y: auto;
    }
}

/* 🖥️ 데스크톱에서는 적당히 */
@media (min-width: 1024px) {
    .search-modal {
        top: 40px;
        height: calc(100vh - 40px);
    }
    
    .search-content {
        max-width: 500px;
        height: calc(100vh - 60px);
    }
}

/* ✅ 하나로 통합된 URL 입력 */
.url-input-container {
    display: flex;
    background: rgba(255,255,255,0.05);
    border: 1px solid #444;
    border-radius: 12px;
    margin: 20px;
    overflow: hidden;
}

.url-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 18px 20px;
    color: #fff;
    font-size: 16px;
    outline: none;
}

.url-submit-btn {
    background: #4fc3f7;
    border: none;
    padding: 18px 24px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

/* ✅ 하나로 통합된 검색 */
.search-container {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid #444;
    border-radius: 12px;
    margin: 0 20px 20px 20px;
    padding: 4px 16px;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 16px 12px;
    color: #fff;
    font-size: 16px;
    outline: none;
}

/* ✅ 모바일 최적화 */
@media (max-width: 768px) {
    .search-content {
        width: calc(100vw - 10px);
        height: calc(100vh - 10px);
        border-radius: 16px;
    }
}



.search-header-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: #fff;
}

.close-btn-new {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
}

/* 검색 결과 스크롤 영역 */
.results-section-scrollable {
    flex: 1;
    overflow-y: auto;
    max-height: 300px; /* 적당한 높이 제한 */
    margin-top: 15px;
}

.search-results-scrollable {
    overflow-y: auto;
    max-height: 100%;
}

/* 스크롤바 스타일 (선택사항) */
.results-section-scrollable::-webkit-scrollbar {
    width: 6px;
}

.results-section-scrollable::-webkit-scrollbar-track {
    background: #111;
}

.results-section-scrollable::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

.results-section-scrollable::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* 모바일 스크롤 활성화 */
.results-section-scrollable {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
    margin-top: 15px;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    overscroll-behavior: contain; /* 스크롤 경계 처리 */
}

.search-results-scrollable {
    overflow-y: auto;
    max-height: 100%;
    -webkit-overflow-scrolling: touch; /* iOS 필수 */
}

/* 모바일 전용 스크롤 설정 */
@media (max-width: 768px) {
    .results-section-scrollable {
        max-height: 250px; /* 모바일에서 높이 조정 */
        overflow-y: scroll; /* auto 대신 scroll 명시 */
        -webkit-overflow-scrolling: touch;
    }
    
    /* 터치 영역 확보 */
    .search-results-scrollable .result-item {
        min-height: 60px; /* 터치하기 좋은 높이 */
        padding: 15px 12px; /* 패딩 증가 */
    }
}

/* 스크롤바 숨기기 (모바일에서 보기 좋게) */
.results-section-scrollable::-webkit-scrollbar {
    display: none;
}

.results-section-scrollable {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

/* 이메일 수집 모달 */
.email-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modalFadeIn 0.3s ease;
}

.email-modal-content {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 20px;
    padding: 40px 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    border: 1px solid #333;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.email-modal-header {
    margin-bottom: 30px;
}

.music-note-icon {
    font-size: 48px;
    margin-bottom: 20px;
    animation: musicFloat 2s ease-in-out infinite;
}

@keyframes musicFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.email-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.email-modal-subtitle {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
}

.email-benefits {
    margin-bottom: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.benefit-icon {
    font-size: 18px;
    margin-right: 12px;
    width: 24px;
}

.benefit-text {
    font-size: 14px;
    color: #ccc;
    font-weight: 500;
}

.email-input-section {
    margin-bottom: 25px;
}

.email-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #333;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.email-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.email-input::placeholder {
    color: #666;
}

.email-modal-actions {
    margin-bottom: 20px;
}

.start-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 12px;
}

.start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.skip-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.skip-btn:hover {
    color: #999;
}

.email-modal-footer {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

@keyframes modalFadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .email-modal-content {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .email-modal-title {
        font-size: 20px;
    }
    
    .email-input {
        font-size: 16px; /* iOS 줌 방지 */
    }
}


/* 🎯 폴더 아코디언 스타일 */
.folder-accordion {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--card-bg);
    overflow: hidden;
}

.folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.folder-header:hover {
    background: var(--hover-bg);
}

.folder-main-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-count {
    color: #666;
    font-size: 14px;
}

.privacy-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.privacy-badge.public {
    background: #e8f5e8;
    color: #2e7d32;
}

.privacy-badge.private {
    background: #fff3e0;
    color: #f57c00;
}

.expand-arrow {
    transition: transform 0.2s ease;
}

/* 🎯 아코디언 폴더 전용 스타일 */
.folder-accordion {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--card-bg);
    overflow: hidden;
}

.accordion-folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.accordion-folder-header:hover {
    background: var(--hover-bg);
}

.accordion-main-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accordion-folder-count {
    color: #666;
    font-size: 14px;
}

.accordion-privacy-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.accordion-privacy-badge.public {
    background: #e8f5e8;
    color: #2e7d32;
}

.accordion-privacy-badge.private {
    background: #fff3e0;
    color: #f57c00;
}

.accordion-expand-arrow {
    transition: transform 0.2s ease;
}

.folder-accordion.expanded .accordion-expand-arrow {
    transform: rotate(180deg);
}

.accordion-folder-content {
    border-top: 1px solid var(--border-color);
    padding: 16px;
}

.accordion-folder-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.accordion-title-edit-section {
    display: flex;
    gap: 8px;
}

.accordion-folder-title-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);     /* ✅ 카드 배경색 사용 */
    color: var(--text-primary);    /* ✅ 텍스트 색상 명시 */
    font-size: 14px;
    transition: all 0.2s ease;
}

.accordion-folder-title-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-primary);  /* ✅ 포커스시 더 밝은 배경 */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.accordion-folder-title-input::placeholder {
    color: var(--text-secondary);  /* ✅ 플레이스홀더 색상 */
}

.accordion-save-btn {
    padding: 8px 12px;
    background: var(--accent-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.accordion-privacy-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.accordion-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.accordion-song-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.accordion-song-item:hover {
    background: var(--hover-bg);
}

.accordion-song-info {
    flex: 1;
}

.accordion-song-title {
    font-weight: 500;
}

.accordion-song-artist {
    color: #666;
    font-size: 14px;
}

.accordion-empty-songs {
    text-align: center;
    padding: 20px;
    color: #666;
}

.accordion-add-song-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 12px;
}

/* 🎵 빠른 곡 추가 모달 */
.song-selection-list {
    max-height: 400px;
    overflow-y: auto;
    margin: 16px 0;
}

.song-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.song-select-item:hover {
    background: var(--hover-bg);
}

.song-select-info {
    flex: 1;
}

.song-select-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.song-select-artist {
    color: #666;
    font-size: 14px;
}

.quick-song-checkbox {
    width: 18px;
    height: 18px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.cancel-btn, .confirm-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.cancel-btn {
    background: #666;
    color: white;
}

.confirm-btn {
    background: var(--accent-color);
    color: white;
}

/* 🔐 Auth 모달 스타일 */
.auth-tabs {
    display: flex;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-tab.active {
    background: #667eea;
    color: white;
    border-radius: 8px 0 0 8px;
}

.auth-tab:not(.active) {
    background: #333;
    color: #999;
    border-radius: 0 8px 8px 0;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #333;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.auth-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.auth-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.auth-frame {
    border: 2px solid #667eea;
    border-radius: 16px;
    padding: 8px;
    background: linear-gradient(145deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.auth-inner {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 🎵 KALPHI 길게 누르기 전용 스타일 */
.kalphi-remote-play-btn {
    /* 텍스트 선택 방지 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* 터치 기본 동작 차단 */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* 길게 누르는 중 애니메이션 */
.kalphi-long-pressing {
    animation: kalphiLongPressRing 0.8s linear;
}

/* 링 확산 애니메이션 */
@keyframes kalphiLongPressRing {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
    100% { box-shadow: 0 0 0 15px rgba(255,255,255,0); }
}

/* 재생 모드 선택 모달 */
.kalphi-playback-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kalphi-mode-selector {
    background: #111;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #333;
}

.kalphi-mode-options {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.kalphi-mode-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid #555;
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}

.kalphi-mode-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: #777;
}

.kalphi-mode-btn.active {
    background: #007AFF;
    border-color: #007AFF;
}


.remote-btn-center span {
    pointer-events: auto;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* 중앙 정렬 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* KALPHI 메인 메뉴 스타일 */
.kalphi-menu-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kalphi-menu-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #333;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.kalphi-menu-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: #555;
    transform: translateY(-1px);
}

.kalphi-menu-btn:active {
    transform: translateY(0);
    background: rgba(255,255,255,0.15);
}

.menu-icon {
    font-size: 20px;
    margin-right: 15px;
    min-width: 24px;
}

.menu-text {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
}

.menu-arrow {
    font-size: 18px;
    color: #666;
    margin-left: 10px;
}

/* 플레이리스트 관리 스타일 */
.kalphi-action-btn {
    padding: 8px 12px;
    border: 1px solid #444;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.kalphi-action-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: #666;
}

.kalphi-action-btn.primary {
    background: #007AFF;
    border-color: #007AFF;
}

.kalphi-action-btn.danger {
    background: rgba(255,59,48,0.2);
    border-color: #ff3b30;
    color: #ff6b6b;
}

.kalphi-song-item {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #222;
    transition: background 0.2s ease;
}

.kalphi-song-item:hover {
    background: rgba(255,255,255,0.03);
}

.kalphi-song-checkbox {
    margin-right: 15px;
    cursor: pointer;
}

.kalphi-song-info {
    flex: 1;
    min-width: 0;
}

.song-title {
    color: white;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-artist {
    color: #888;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kalphi-song-actions {
    display: flex;
    gap: 8px;
}

.kalphi-mini-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #444;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: white;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kalphi-mini-btn:hover {
    background: rgba(255,255,255,0.1);
}

.kalphi-mini-btn.danger {
    color: #ff6b6b;
    border-color: #ff3b30;
}

/* 폴더용 곡 선택 스타일 */
.kalphi-song-item.disabled {
    opacity: 0.5;
    background: rgba(255,255,255,0.02);
}

.kalphi-song-item.disabled .kalphi-song-checkbox {
    cursor: not-allowed;
}

.already-added {
    color: #888;
    font-size: 11px;
    margin-top: 2px;
    font-style: italic;
}

.red-edge.highlight-welcome {
    animation: welcomePulse 1s infinite;
    width: 8px !important;
}

@keyframes welcomePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 🗂️ 간단한 폴더 관리 스타일 */
.simple-folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.simple-folder-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: #555;
    transform: translateY(-1px);
}

.folder-info {
    flex: 1;
}

.folder-name {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

.folder-meta {
    color: #888;
    font-size: 12px;
}

.folder-actions {
    display: flex;
    gap: 8px;
}

.folder-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid #444;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.folder-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: #666;
    transform: scale(1.1);
}

.folder-btn.delete:hover {
    background: rgba(255,0,0,0.2);
    border-color: #ff4444;
}

/* 슬라이드 아웃 애니메이션 */
@keyframes slideOutLeft {
    from { 
        opacity: 1; 
        transform: translateX(0); 
    }
    to { 
        opacity: 0; 
        transform: translateX(-100%); 
    }
}

/* 🎵 Add Music 모달 내부 여백 개선 */

/* URL 입력 섹션 여백 */
.url-input-section {
    margin: 0 20px 15px 20px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid #333;
}

/* 검색 섹션 여백 */
.search-section {
    margin: 0 20px 15px 20px;
}

/* 검색 결과 영역 여백 및 스타일링 */
.results-section-scrollable {
    flex: 1;
    margin: 10px 20px 20px 20px;  /* 좌우 20px 여백 */
    padding: 15px;                /* 내부 여백 */
    border: 1px solid #333;
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 200px;
}

/* 구분선도 여백 맞추기 */
.search-modal .search-content > div[style*="text-align: center"] {
    margin: 20px 20px !important;
    color: #666;
    font-size: 12px;
}

/* 📱 모바일에서 여백 조정 */
@media (max-width: 768px) {
    .url-input-section,
    .search-section {
        margin: 0 15px 15px 15px;
    }
    
    .results-section-scrollable {
        margin: 10px 15px 15px 15px;
        padding: 12px;
    }
    
    .search-modal .search-content > div[style*="text-align: center"] {
        margin: 15px 15px !important;
    }
}

/* 검색 결과 내부 요소들 스타일링 */
.search-results-scrollable {
    overflow-y: auto;
    max-height: 100%;
}

.empty-state {
    text-align: center;
    color: #888;
    padding: 40px 20px;
}

/* 스크롤바 스타일링 */
.results-section-scrollable::-webkit-scrollbar {
    width: 6px;
}

.results-section-scrollable::-webkit-scrollbar-track {
    background: #111;
    border-radius: 3px;
}

.results-section-scrollable::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

.results-section-scrollable::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* 🔔 대시보드 알림 스타일 개선 */
.notification-feed {
    margin-bottom: 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid #333;
    overflow: hidden;
}

.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid #333;
}

.notification-count {
    background: #ff4444;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

.notification-items {
    max-height: 200px;
    overflow-y: auto;
}

.notification-card {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid #222;
    transition: background 0.2s ease;
}

.notification-card:last-child {
    border-bottom: none;
}

.notification-card:hover {
    background: rgba(255,255,255,0.05);
}

.notif-left {
    margin-right: 12px;
}

.notif-emoji {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.notif-right {
    flex: 1;
}

.notif-title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.notif-subtitle {
    color: #888;
    font-size: 12px;
    margin-bottom: 4px;
}

.notif-time {
    color: #666;
    font-size: 11px;
}

/* 관리자 큐레이션 알림 특별 스타일 */
.notification-curation {
    border-left: 4px solid #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

.notification-curation .notif-emoji {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

.add-song-section {
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.add-song-area {
    padding: 15px;
    border-top: 1px solid #333;
}

.search-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

#songSearchInput {
    flex: 1;
    padding: 10px;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

.search-btn {
    padding: 10px 15px;
    background: #333;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
}

.search-results {
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #222;
    border-radius: 8px;
    margin-bottom: 8px;
}

.result-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
}

.result-info {
    flex: 1;
}

.result-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.result-artist {
    font-size: 12px;
    color: #999;
}

.add-result-btn {
    padding: 6px 12px;
    background: #007AFF;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}


/* 🎵 곡 정보 라인 - 메인 스타일 (4526줄 위치) */
.song-line {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 40px);
    width: 100%;
    text-align: center;
}

.song-title-part {
    font-weight: 600;
}

.song-artist-part {
    font-weight: 400;
    color: #ccc;
}

/* 모바일 조정 */
@media (max-width: 480px) {
    .song-line {
        font-size: 14px;
        max-width: calc(100vw - 30px);
    }
}

/* 가로모드 조정 */
@media (orientation: landscape) {
    .song-line {
        max-width: calc(100vw - 60px);
    }
}

/* 댓글 알림 버튼 */
.comment-notification-btn {
    background: rgba(33, 150, 243, 0.2);
    border: 1px solid #2196f3;
    color: #2196f3;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.comment-notification-btn:hover {
    background: rgba(33, 150, 243, 0.3);
    transform: scale(1.05);
}

.comment-notification-btn .comment-count {
    background: #2196f3;
    color: white;
    padding: 2px 5px;
    border-radius: 8px;
    margin-left: 3px;
    font-size: 10px;
}

/* 깜빡임 애니메이션 */
.comment-notification-btn.new-comments {
    animation: commentGlow 2s infinite;
}

@keyframes commentGlow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
    }
    50% { 
        box-shadow: 0 0 15px rgba(33, 150, 243, 0.8);
    }
}

/* 댓글 알림 배지 */
.comment-notification-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 150, 243, 0.9);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
    z-index: 100;
}

.comment-notification-badge .notification-count {
    background: #fff;
    color: #2196f3;
    padding: 2px 6px;
    border-radius: 10px;
    margin-right: 5px;
    font-weight: 700;
}

.pulse-animation {
    animation: commentPulse 2s infinite;
}

@keyframes commentPulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translateX(-50%) scale(1.05);
        opacity: 0.9;
    }
}

/* 모바일에서 댓글 버튼 크기 조정 */
@media (max-width: 768px) {
    .comment-notification-btn {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .comment-notification-btn .comment-count {
        padding: 1px 4px;
        font-size: 9px;
    }
    
    /* 곡 제목이 너무 길면 줄임 */
    .song-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.folder-limit-notice {
    background: rgba(66, 133, 244, 0.1);
    border: 1px solid rgba(66, 133, 244, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    color: #64b5f6;
    font-size: 14px;
}

.folder-limit-notice p {
    margin: 5px 0 0 0;
    color: #888;
    font-size: 12px;
}

.main-folder-btn.active {
    background: rgba(255,215,0,0.2) !important;
    color: #ffd700 !important;
    border-color: #ffd700 !important;
}

.folder-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.folder-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.folder-btn {
    padding: 6px 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: #999;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.daily-pick-section {
    background: linear-gradient(135deg, #1a0000, #330000);
    border: 2px solid #ff3333;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.daily-pick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.daily-pick-header h3 {
    color: #ff3333;
    font-size: 14px;
    margin: 0;
}

.pick-date {
    color: #ff9999;
    font-size: 12px;
}

.daily-pick-card {
    cursor: pointer;
    margin-bottom: 12px;
}

.pick-room-title {
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}

.pick-room-description {
    color: #ccc;
    font-size: 11px;
    margin-bottom: 6px;
}

.pick-curator-note {
    color: #ff9999;
    font-size: 10px;
    font-style: italic;
}

.daily-pick-actions {
    display: flex;
    gap: 6px;
}

.pick-play-btn, .pick-visit-btn {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}

.pick-play-btn {
    background: #ff3333;
    color: white;
}

.pick-visit-btn {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.curation-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 20px 0;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.toast-details {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-top: 5px;
    white-space: pre-line;
}

#emailModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#emailModal .modal-content {
    background: var(--card-bg);
    padding: 24px;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

#emailModal .auth-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

#emailModal .primary-btn,
#emailModal .secondary-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

#emailModal .primary-btn {
    background: #667eea;
    color: white;
}

#emailModal .secondary-btn {
    background: #333;
    color: white;
}

#remotePlayIcon {
    width: 20px;
    height: 20px;
    color: inherit;  /* 부모 색상 상속 */
    transition: all 0.3s ease;
}

/* 🎵 기본 이퀄라이저 애니메이션 */
.equalizer-bar {
    animation: pulse-wave 2s ease-in-out infinite;
}

.equalizer-bar:nth-child(1) { animation-delay: 0s; }
.equalizer-bar:nth-child(2) { animation-delay: 0.1s; }
.equalizer-bar:nth-child(3) { animation-delay: 0.2s; }
.equalizer-bar:nth-child(4) { animation-delay: 0.3s; }
.equalizer-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes pulse-wave {
    0%, 100% { height: 20%; }
    50% { height: 80%; }
}

/* 🎬 전체화면 모드 스타일 */
.youtube-player:fullscreen {
    background: #000;
}

.youtube-player:fullscreen #player {
    width: 100% !important;
    height: 100% !important;
}

.youtube-player:fullscreen iframe {
    width: 100% !important;
    height: 100% !important;
}

/* Safari 지원 */
.youtube-player:-webkit-full-screen {
    background: #000;
}

.youtube-player:-webkit-full-screen #player {
    width: 100% !important;
    height: 100% !important;
}

/* 전체화면 버튼 호버 효과 */
#fullscreenBtn:hover {
    background: rgba(0,0,0,0.9) !important;
    transform: scale(1.05);
}

#fullscreenBtn:active {
    transform: scale(0.95);
}