:root {
    --primary: rgb(33, 204, 249); 
    --heart: #ff4d6d;
    --text: #1d1d1f;
    --glass-bg: rgba(255, 255, 255, 0.65); 
    --glass-border: rgba(255, 255, 255, 0.4);
    --popup-glass: rgba(255, 255, 255, 0.95);
}


/* [iOS 스타일] 인플레이스 가사 뷰 (앨범 섹션 내부) */
.album-section { 
    position: relative; width: 100%; aspect-ratio: 1; 
    max-height: 38vh; border-radius: 20px; overflow: hidden; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); align-self: center; 
    cursor: pointer;
}
.album-art { width: 100%; height: 100%; object-fit: cover; transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1); }

.lyrics-view {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(25px) saturate(1.8); -webkit-backdrop-filter: blur(25px) saturate(1.8);
    opacity: 0; pointer-events: none; transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex; flex-direction: column;
}

/* 가사 모드 활성화 시 */
.album-section.show-lyrics .lyrics-view { opacity: 1; pointer-events: auto; }
.album-section.show-lyrics .album-art { transform: scale(1.1); filter: grayscale(0.5); }

.lyrics-container { 
    flex: 1; overflow-y: auto; padding: 40px 20px; 
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.lyrics-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.lyric-line {
    font-size: 1.5rem; font-weight: 800; color: rgba(255, 255, 255, 0.3);
    margin-bottom: 25px; transition: all 0.4s ease; 
    text-align: center; line-height: 1.3; letter-spacing: -1px;
    cursor: pointer;
}
.lyric-line.active { 
    color: #fff; transform: scale(1.1); filter: blur(0); opacity: 1;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
}
.lyric-line:hover { color: rgba(255,255,255,0.85); }
.lyric-line.no-data { margin-top: 100px; font-size: 1rem; opacity: 0.5; }

.lyrics-hint {
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.5); color: #fff; padding: 6px 12px; border-radius: 12px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; z-index: 20;
    opacity: 0.8; pointer-events: none; transition: 0.3s;
}
.album-section.show-lyrics .lyrics-hint { opacity: 0; transform: translate(-50%, 20px); }

.fa-solid, .fas, .fa-regular, .far { font-family: 'Font Awesome 6 Free' !important; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    background: #000; font-family: -apple-system, system-ui, sans-serif;
    height: 100dvh; overflow: hidden; color: var(--text);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

#bg-image { 
    position: fixed; inset: 0; z-index: -2; opacity: 0.6; 
    filter: blur(50px) saturate(1.2); 
    background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
    transition: 1s; transform: scale(1.1); 
}
.glass-background { position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

.app-container { position: relative; width: 100%; max-width: 480px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }

/* [수정 2] 사운드바 동작 시: 제목을 위로 완전히(-120%) 날려버려서 깔끔하게 함 */
.top-nav { height: 60px; position: relative; margin-top: 10px; padding: 0 5%; flex-shrink: 0; overflow: hidden; }

.nav-normal-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: space-between; align-items: center; padding: 0 5%;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s;
}

.nav-volume-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; gap: 15px; padding: 0 5%; color: #fff;
    transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.top-nav.mode-volume .nav-normal-layer { transform: translateY(-120%); opacity: 0; }
.top-nav.mode-volume .nav-volume-layer { transform: translateY(0); }

/* [수정 3] 반응형: 화면 좁을 때(380px이하) 제목이 찌그러지지 않고 위로 사라짐 */
.nav-side { display: flex; align-items: center; gap: 8px; flex: 1; }
.nav-title { 
    flex: 2; text-align: center; min-width: 0; 
    transition: transform 0.3s ease, opacity 0.3s ease; 
}
@media (max-width: 380px) {
    .nav-title { transform: translateY(-50px); opacity: 0; pointer-events: none; }
}

.sub-title { font-size: 0.7rem; font-weight: 700; color: rgba(255, 255, 255, 0.51); display: block; }
.main-title { font-size: 0.95rem; font-weight: 800; color: #fff; white-space: nowrap; }

.icon-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; }
.ml-8 { margin-left: 8px; }
.mr-8 { margin-right: 8px; }
.badge { position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: #ff3b30; border-radius: 50%; border: 1.5px solid #fff; display: none; }
#top-vol-slider { flex: 1; height: 4px; accent-color: #fff; cursor: pointer; border-radius: 2px; }
.vol-close-btn { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; margin-left: 5px; opacity: 0.7; }

/* [수정 1] 채팅창 하트: 회색(#bbb)으로 잘 보이게 설정 */
.msg-like-btn { 
    background: none; border: none; cursor: pointer; 
    color: #bbb; /* 여기가 핵심! 안 눌렀을 때도 보임 */
    display: flex; flex-direction: column; align-items: center; 
    transition: 0.2s; min-width: 30px; margin-left: 5px; 
}
.msg-like-btn.liked { color: var(--heart); }
.like-count { font-size: 0.7rem; font-weight: 700; color: #666; margin-top: 2px; }







/* [디자인 복구] 저작권 팝업: HTML 클래스명(copy-item)과 일치시킴 */
.popup-body { padding: 20px; color: var(--text); overflow-y: auto; flex: 1; }
.copyright-notice { margin-bottom: 20px; font-size: 0.85rem; line-height: 1.6; color: #444; }
.copy-list { display: flex; flex-direction: column; gap: 10px; }
.copy-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 12px 15px; background: rgba(255,255,255,0.5); 
    border-radius: 12px; border: 1px solid rgba(0,0,0,0.05); 
}
.copy-title { font-weight: 600; font-size: 0.85rem; color: #333; }
.copy-item a { color: var(--primary); text-decoration: none; font-size: 0.8rem; font-weight: 700; }
.copyright-footer { margin-top: 30px; font-size: 0.7rem; color: #888; text-align: center; padding-bottom: 20px; }







/* 나머지 원본 디자인 유지 (플레이리스트, 팝업, 컨트롤러 등) */
.player-body { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 8% 18%; }
.album-section { width: 100%; aspect-ratio: 1; max-height: 35vh; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.3); align-self: center; }
.album-art { width: 100%; height: 100%; object-fit: cover; }
.info-section { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 18px; background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); margin-top: 15px; }
.artist-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.text-group { flex: 1; min-width: 0; margin-right: 15px; }
.text-group h2 { font-size: 1.25rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-group p { font-size: 0.85rem; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heart-btn { background: none; border: none; font-size: 1.5rem; color: #fff; opacity: 0.7; cursor: pointer; transition: 0.2s; }
.heart-btn.active { opacity: 1; color: var(--heart); transform: scale(1.1); }
.playback-section { margin-top: 10px; }
input[type=range] { width: 100%; height: 4px; accent-color: var(--primary); cursor: pointer; border-radius: 2px; }
.time-row { display: flex; justify-content: space-between; font-size: 0.7rem; color: #fff; opacity: 0.7; margin-top: 5px; }
.control-section { display: flex; justify-content: space-between; align-items: center; }
.main-btn { background: none; border: none; color: #fff; cursor: pointer; }
.main-btn.play { width: 70px; height: 70px; border-radius: 50%; background: #fff; color: var(--primary); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; padding-left: 4px; }
.main-btn.side { font-size: 1.6rem; width: 45px; }
.opt-btn { background: none; border: none; font-size: 1.1rem; color: rgba(255,255,255,0.4); position: relative; width: 40px; cursor: pointer; }
.opt-btn.active { color: #fff; }
.repeat-dot { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: #fff; border-radius: 50%; display: none; }
.opt-btn.active .repeat-dot { display: block; }

/* [style.css 수정본] 팝업 버그 해결 */

/* ... (상단 기존 코드는 그대로 유지) ... */

/* 1. 팝업 공통 레이아웃 수정 */
.ios-popup { 
    position: fixed; inset: 0; z-index: 5000; 
    display: flex; align-items: center; justify-content: center; 
    background: rgba(0,0,0,0.5); /* 너무 진한 블러 대신 반투명 배경 */
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    visibility: hidden; opacity: 0; transition: 0.3s; 
    pointer-events: none; 
}
.ios-popup.active { visibility: visible; opacity: 1; pointer-events: auto; }

/* 2. 팝업 카드 디자인 (상단 잘림 해결) */
.popup-card.glass-card { 
    width: 90%; max-width: 380px; 
    height: 70vh; /* 높이 적절히 조절 */
    max-height: 600px; /* 너무 길어지지 않게 제한 */
    background: rgba(255, 255, 255, 0.95); 
    border-radius: 25px; 
    display: flex; flex-direction: column; overflow: hidden; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); 
    /* 화면 중앙 정렬 보정 */
    margin-bottom: env(safe-area-inset-bottom);
}

/* 3. 팝업 헤더 (채팅/저작권 공통) */
.popup-header { 
    padding: 18px 20px; 
    display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 1px solid rgba(0,0,0,0.08); 
    background: rgba(54, 177, 255, 0.9); /* 헤더 배경 확실하게 */
    flex-shrink: 0; 
}
.popup-header span { 
    font-weight: 800; font-size: 1.1rem; color: #ffffff; 
    letter-spacing: -0.5px;
}
.close-x { 
    background: rgba(0,0,0,0.05); border: none; 
    width: 32px; height: 32px; border-radius: 50%; 
    color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center; 
    font-size: 1.1rem; transition: background 0.2s;
}
.close-x:active { background: rgba(0,0,0,0.1); }

/* 4. 채팅창 내부 레이아웃 */
.chat-viewport { 
    flex: 1; overflow-y: auto; padding: 20px; 
    background: #f5f5f7; /* 채팅 배경색을 연한 회색으로 변경하여 가독성 확보 */
    display: flex; flex-direction: column; gap: 12px; 
}

/* 말풍선 스타일 */
.msg-row { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 8px; }
.message { 
    padding: 10px 14px; border-radius: 18px; font-size: 0.95rem; 
    max-width: 75%; line-height: 1.4; word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.message.me { 
    background: var(--primary); color: #fff; 
    border-bottom-right-radius: 4px; margin-left: auto; 
}
.message.other { 
    background: #fff; color: #333; 
    border-bottom-left-radius: 4px; border: 1px solid rgba(0,0,0,0.03);
}

/* 채팅 입력창 */
.chat-input-row { 
    padding: 12px 15px; border-top: 1px solid rgba(0,0,0,0.08); 
    display: flex; gap: 8px; align-items: center; 
    background: #fff; flex-shrink: 0; 
}
#chat-input { 
    flex: 1; border: 1px solid #ddd; border-radius: 20px; 
    padding: 10px 15px; font-size: 0.95rem; background: #f9f9f9; outline: none; 
}
#chat-input:focus { border-color: var(--primary); background: #fff; }
.send-btn { 
    width: 38px; height: 38px; border-radius: 50%; 
    background: var(--primary); color: #fff; border: none; 
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(33, 204, 249, 0.3);
}

/* 바텀시트 & 리스트 */
.bottom-sheet.glass-sheet { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 25%; height: 25px; background: var(--popup-glass); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); border-radius: 20px; z-index: 1000; transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); border: 1px solid var(--glass-border); overflow: hidden; }
.bottom-sheet.expanded { width: 100%; height: 85vh; bottom: 0; border-radius: 35px 35px 0 0; background: rgba(255,255,255,0.96); }
.sheet-top { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.drag-pill { width: 40px; height: 5px; background: rgba(0,0,0,0.1); border-radius: 3px; margin-bottom: 5px; }
.list-head { padding: 10px 25px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.05); }
.count-txt { font-weight: 800; color: var(--primary); }
.list-scroll-area { flex: 1; overflow-y: auto; padding: 15px 20px 80px; }
#song-list-ul li { display: flex; align-items: center; margin-bottom: 12px; border-radius: 18px; background: #fff; border: 1px solid rgba(0,0,0,0.04); transition: 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
#song-list-ul li.active { background: #f0fbff; border: 1.5px solid var(--primary); box-shadow: 0 5px 15px rgba(33, 204, 249, 0.1); }
.song-select-zone { flex: 1; display: flex; align-items: center; padding: 12px 15px; cursor: pointer; min-width: 0; }
.mini-art, .song-avatar { width: 52px; height: 52px; border-radius: 50%; margin-right: 15px; flex-shrink: 0; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background: #e9eef5; }
.song-avatar { border: 1px solid rgba(0,0,0,0.04); }
.song-info-texts { flex: 1; min-width: 0; }
.song-info-texts strong { font-size: 1.05rem; color: #1d1d1f; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.song-info-texts p { font-size: 0.82rem; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-meta-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.song-badge { font-size: 0.7rem; font-weight: 800; color: var(--primary); background: rgba(33, 204, 249, 0.12); padding: 4px 8px; border-radius: 999px; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.list-heart-btn { padding: 15px 22px; color: #ddd; font-size: 1.35rem; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
.list-heart-btn.active { color: var(--heart); }

/* 업로드 UI 스타일 */
.upload-body { padding: 25px; display: flex; flex-direction: column; gap: 20px; }
.upload-field { display: flex; flex-direction: column; gap: 8px; }
.upload-field label { font-size: 0.85rem; font-weight: 700; color: #666; }
.upload-field input[type="file"] { 
    padding: 12px; border: 1.5px dashed #ddd; border-radius: 12px; 
    font-size: 0.85rem; background: #fafafa; cursor: pointer; transition: 0.2s;
}
.upload-field input[type="file"]:hover { border-color: var(--primary); background: #f0fbff; }
.primary-btn { 
    margin-top: 10px; padding: 15px; border-radius: 15px; border: none;
    background: var(--primary); color: #fff; font-size: 1rem; font-weight: 800;
    cursor: pointer; box-shadow: 0 10px 20px rgba(33, 204, 249, 0.2); transition: 0.3s;
}
.primary-btn:active { transform: scale(0.98); opacity: 0.9; }
#upload-status { font-size: 0.85rem; text-align: center; color: #888; margin-top: 5px; min-height: 1.2rem; }