/* =========================================================
   기본 설정 & 모바일 First 스타일
   ========================================================= */
:root {
    --bg-dark: #121212;
    --bg-card: #181818;
    --primary: #1db954;
    --text-white: #ffffff;
    --text-gray: #b3b3b3;
    --nav-height: 60px;
    --player-height: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* [수정됨] html과 body에 높이 100%를 주어야 내부 스크롤이 작동합니다 */
html, body {
    width: 100%;
    height: 100%; 
    overflow: hidden; /* body 자체 스크롤 방지 */
}

/* style.css 맨 윗줄 수정 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    /* 기존 변수 유지... */
    --bg-dark: #121212;
    --bg-card: #181818;
    --primary: #1db954;
    --text-white: #ffffff;
    --text-gray: #b3b3b3;
    --nav-height: 60px;
    --player-height: 60px;
}

body { 
    font-family: 'Pretendard', sans-serif; 
    background-color: var(--bg-dark); 
    color: var(--text-white); 
    font-weight: 400; /* 기본 글씨는 '보통' 굵기 */
}


/* --- 레이아웃 구조 --- */
.container { 
    display: flex; 
    height: 100%; /* 부모(body)의 높이를 100% 채움 */
    flex-direction: column; 
}

.main-content { 
    flex: 1; 
    background: linear-gradient(to bottom, #2a2a2a, var(--bg-dark) 40%); 
    padding: 20px; 
    overflow-y: auto; /* 세로 스크롤 허용 */
    padding-bottom: 130px; 
    
    /* [추가] 모바일(iOS)에서 부드러운 스크롤 적용 */
    -webkit-overflow-scrolling: touch; 
}
.main-content::-webkit-scrollbar { display: none; }

.main-content::-webkit-scrollbar { display: none; }

.mobile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mobile-logo { font-weight: bolder; color: var(--primary); font-size: 20px; display: flex; gap: 8px; align-items: center; }

.view { animation: fadeIn 0.3s ease-out; }
.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


@font-face {
    font-family: 'LineSeed';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Th.woff2') format('woff2');
    font-weight: bolder;
    font-display: swap;
}


/* --- 가로 스크롤 섹션 --- */
.scroll-section { margin-bottom: 30px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-right: 10px; }
.section-header h2 { font-size: 20px; font-weight: bolder; margin: 0; }
.view-all-btn { color: var(--text-gray); font-size: 13px; font-weight: bolder; cursor: pointer; }

.scroll-row { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px; scroll-behavior: smooth; }
.scroll-row::-webkit-scrollbar { display: none; }

.scroll-card { min-width: 130px; width: 130px; display: flex; flex-direction: column; cursor: pointer; }
.scroll-card:active { opacity: 0.7; }

.artist-circle-img { width: 130px; height: 130px; border-radius: 50%; background-size: cover; background-position: center; margin-bottom: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.artist-circle-name { text-align: center; font-size: 13px; font-weight: bolder; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.album-square-img { width: 130px; height: 130px; border-radius: 8px; background-size: cover; background-position: center; margin-bottom: 8px; background-color: #333; }
.album-title-text { font-size: 14px; font-weight: bolder; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-artist-text { font-size: 12px; color: var(--text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 그리드 & 상세페이지 --- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.card { background-color: var(--bg-card); padding: 12px; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
.card:hover { background-color: #282828; }
.card-img { width: 100%; aspect-ratio: 1; background-color: #333; border-radius: 4px; margin-bottom: 10px; background-size: cover; background-position: center; }
.card-img.circle { border-radius: 50%; } 
.card-title { font-weight: bolder; font-size: 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { font-size: 12px; color: var(--text-gray); }

.header-section { text-align: center; margin-bottom: 20px; }
.header-img { width: 160px; height: 160px; background: #333; border-radius: 8px; margin: 0 auto 15px; background-size: cover; background-position: center; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.artist-img-detail { border-radius: 50%; }
.header-title { font-size: 24px; font-weight: bolder; margin-bottom: 5px; }

.track-row { display: flex; align-items: center; padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); border-radius: 4px; cursor: pointer; transition: 0.2s; }
.track-row:hover { background-color: rgba(255,255,255,0.1); }
.track-num { width: 25px; color: #777; font-size: 14px; text-align: center; }
.track-info { flex: 1; margin-left: 10px; }
.track-title { font-size: 15px; margin-bottom: 3px; }
.track-artist { font-size: 13px; color: #aaa; }
.add-btn { background: none; border: 1px solid #555; color: #aaa; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s; cursor: pointer; }
.add-btn:active, .add-btn:hover { background: var(--primary); color: #000; border-color: var(--primary); }

/* --- 앨범 액션 버튼 (모바일에서 텍스트 숨김) --- */
.album-actions { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin: 0 auto 25px; 
    padding: 0 10px; 
}
.action-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0; /* 모바일에서 텍스트와 아이콘 사이 간격 0 */
    padding: 12px; /* 패딩을 줄여서 버튼 크기 조정 */
    border-radius: 50%; /* 버튼을 원형으로 변경 */
    font-size: 14px; 
    font-weight: bolder; 
    cursor: pointer; 
    border: none; 
    transition: transform 0.1s, opacity 0.2s; 
    min-width: 48px; /* 버튼 최소 너비 설정 (원형 유지) */
    width: 48px; /* 버튼 크기 고정 */
    height: 48px; /* 버튼 크기 고정 */
    position: relative; /* 아이콘 위치 조정을 위해 */
}

/* 모든 액션 버튼 내부의 텍스트 숨기기 (모바일 뷰) */
.action-btn span {
    display: none;
}

/* 아이콘 위치 조정 */
.action-btn i {
    font-size: 20px;
    margin: 0;
}

/* Play/Shuffle/Info 버튼 개별 스타일 (크기 재정의) */
.play-btn { 
    background-color: var(--primary); 
    color: #fff; 
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3); 
}
.shuffle-btn { 
    background-color: #333; 
    color: #fff; 
    border: 1px solid #555; 
}

/* 추가된 정보 버튼 스타일 */
.info-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- 데스크탑 모드 (1024px 이상)에서 텍스트 다시 표시 --- */
@media (min-width: 1024px) {
    .action-btn {
        min-width: 120px; /* 원래 너비 복구 */
        width: auto; /* 고정 너비 해제 */
        height: auto; /* 고정 높이 해제 */
        border-radius: 30px; /* 타원형 복구 */
        padding: 12px 24px; /* 원래 패딩 복구 */
        gap: 8px; /* 아이콘과 텍스트 사이 간격 복구 */
    }
    .action-btn span {
        display: inline; /* 텍스트 표시 */
    }
    .info-btn {
        min-width: 120px !important; /* 데스크탑 최소 너비 유지 */
    }
}
/* --- 하단 네비게이션 & 미니 플레이어 (모바일) --- */
.bottom-nav { position: fixed; bottom: 0; width: 100%; height: var(--nav-height); background-color: #000; border-top: 1px solid #222; z-index: 90; display: flex; justify-content: space-around; align-items: center; }
.nav-item { display: flex; flex-direction: column; align-items: center; color: #777; font-size: 10px; gap: 5px; width: 33%; padding: 5px 0; cursor: pointer; }
.nav-item i { font-size: 20px; }
.nav-item.active { color: var(--text-white); }

.mini-player { position: fixed; bottom: var(--nav-height); width: 100%; height: var(--player-height); background-color: #222; border-bottom: 1px solid #333; z-index: 95; display: flex; align-items: center; padding: 0 15px; transition: bottom 0.3s; cursor: pointer; }
.mini-info { display: flex; align-items: center; flex: 1; overflow: hidden; }
.mini-img { width: 40px; height: 40px; border-radius: 4px; background: #333; margin-right: 10px; flex-shrink: 0; object-fit: cover; }
.mini-text { display: flex; flex-direction: column; overflow: hidden; }
.mini-title { font-size: 13px; font-weight: bolder; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-artist { font-size: 11px; color: #aaa; }
.mini-controls { display: flex; align-items: center; gap: 15px; font-size: 24px; margin-left: 10px; }
.mini-progress { position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background: transparent; cursor: pointer; z-index: 100; }
.mini-progress-bar { height: 100%; background: var(--primary); width: 0%; transition: width 0.1s linear; }

/* --- 전체 화면 플레이어 (공통) --- */
.full-player { 
    position: fixed; top: 100%; left: 0; width: 100%; height: 100%; 
    background: #121212; 
    z-index: 200; transition: top 0.3s cubic-bezier(0.2, 0, 0, 1); 
    display: flex; flex-direction: column; align-items: center; 
    padding: 40px 30px; overflow: hidden; 
}
.full-player.active { top: 0; }

.fp-bg { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    filter: blur(30px) brightness(0.4); 
    z-index: 0; transform: scale(1.1); transition: background-image 0.5s ease; 
}

/* UI 요소들이 배경 위로 오도록 설정 */
.fp-header, .fp-img-container, .fp-info, .fp-progress-box, .fp-controls, .fp-lyrics-view { 
    width: 100%; max-width: 350px; position: relative; z-index: 1; 
    font-size: 23px;
    font-family: Pretendard, sans-serif;
    
}

.fp-lyrics-view { flex: 1; overflow-y: auto; margin-bottom: 30px; padding: 10px 0; }
.fp-lyrics-view::-webkit-scrollbar { display: none; }
.lyrics-content { white-space: pre-wrap; font-size: 23px; font-weight: bolder; line-height: 1.6; color: #fff; white-space: pre-wrap; text-align: left; font-family: inherit; }

.fp-header { width: 100%; text-align: center; margin-bottom: 20px; display: flex; justify-content: center; }
.fp-close-btn { color: #fff; font-size: 20px; cursor: pointer; padding: 2px; }
.fp-img-container { aspect-ratio: 1; margin: 10px 0 30px; display: flex; justify-content: center; align-items: center; }
.fp-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.fp-info { margin-bottom: 30px; text-align: left; }
.fp-title { font-size: 20px; font-weight: bolder; margin-bottom: 2px; }
.fp-artist { font-size: 16px; color: #bbb; }

.fp-progress-box { margin-bottom: 40px; }
.fp-bar-bg { width: 100%; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; position: relative; cursor: pointer; padding: px 0; background-clip: content-box; }
.fp-bar-fill { height: 100%; background: var(--text-white); border-radius: 2px; width: 0%; position: relative; pointer-events: none; }
.fp-bar-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: #fff; border-radius: 50%; }
.fp-times { display: flex; justify-content: space-between; font-size: 12px; color: #aaa; margin-top: 8px; }

.fp-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.fp-btn { font-size: 22px; color: #ccc; cursor: pointer; transition: 0.2s; }
.fp-btn:hover { color: #fff; }
.fp-play { font-size: 47px; color: #fff; background: var(--primary); width: 75px; height: 75px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(29, 185, 84, 0.4); transition: 0.1s; cursor: pointer; }
.fp-play:active { transform: scale(0.95); }

/* --- 큐 모달 (재생목록) --- */
.queue-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 210; display: none; align-items: flex-end; }
.queue-modal.open { display: flex; }
.queue-box { width: 100%; height: 70%; background: #222; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 20px; display: flex; flex-direction: column; animation: slideUp 0.3s; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.queue-header { display: flex; justify-content: space-between; margin-bottom: 20px; font-weight: bolder; font-size: 18px; }
.queue-list { overflow-y: auto; flex: 1; }
.queue-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #333; cursor: pointer; }
.queue-item:hover { background-color: rgba(255,255,255,0.05); }
.queue-item.current { color: var(--primary); }

/* --- 데스크탑 전용 요소 (기본 숨김) --- */
.sidebar { display: none; }
.pc-controls { display: none; }
.pc-only { display: none !important; }

/* =========================================================
   Desktop Mode (PC 최적화) - 1024px 이상
   ========================================================= */
@media (min-width: 1024px) {
    
    /* 1. 레이아웃 재구조화 (좌우 배치) */
    .container {
        flex-direction: row; 
        height: calc(100vh - 90px); /* 하단 플레이어 바 제외 높이 */
    }

    /* 2. 사이드바 활성화 및 스타일링 */
    .sidebar {
        display: flex;
        flex-direction: column;
        width: 240px;
        background-color: #000;
        padding: 24px;
        flex-shrink: 0;
    }
    .sidebar-logo { font-size: 24px; font-weight: 800; color: var(--text-white); margin-bottom: 30px; display: flex; align-items: center; gap: 10px; cursor: default; }
    .sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
    .sidebar-item { display: flex; align-items: center; gap: 15px; padding: 10px 15px; color: var(--text-gray); font-weight: bolder; font-size: 15px; cursor: pointer; transition: 0.2s; border-radius: 4px; }
    .sidebar-item:hover, .sidebar-item.active { color: var(--text-white); background-color: #282828; }
    
    .sidebar-playlist { margin-top: 30px; border-top: 1px solid #282828; padding-top: 20px; flex: 1; overflow-y: auto; }
    .pl-header { font-size: 12px; color: var(--text-gray); font-weight: bolder; margin-bottom: 15px; letter-spacing: 1px; }
    .pl-item { color: var(--text-gray); font-size: 14px; margin-bottom: 12px; cursor: pointer; transition: 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pl-item:hover { color: var(--text-white); }

    /* 3. 메인 콘텐츠 확장 및 스크롤바 커스텀 */
    .main-content {
        flex: 1;
        padding: 30px 40px;
        padding-bottom: 40px;
        background: linear-gradient(to bottom, #202020, var(--bg-dark) 400px);
    }
    .main-content::-webkit-scrollbar { display: block; width: 12px; }
    .main-content::-webkit-scrollbar-thumb { background: #555; border-radius: 6px; border: 3px solid #121212; }
    .main-content::-webkit-scrollbar-track { background: #121212; }

    /* 모바일 요소 완전 숨김 */
    .mobile-header, .bottom-nav { display: none !important; }

    /* 4. 그리드 시스템 반응형 처리 */
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; }
    
    .scroll-row { gap: 24px; overflow-x: auto; padding-bottom: 15px; }
    .scroll-row::-webkit-scrollbar { display: block; height: 8px; }
    .scroll-row::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
    .scroll-row::-webkit-scrollbar-track { background: transparent; }
    
    .scroll-card { min-width: 160px; width: 160px; }
    .artist-circle-img, .album-square-img { width: 160px; height: 160px; }

    /* 5. 데스크탑 플레이어 바 스타일 */
    .mini-player {
        position: fixed; bottom: 0; left: 0; width: 100vw; height: 90px;
        background-color: #181818; border-top: 1px solid #282828;
        padding: 0 30px; justify-content: space-between;
        z-index: 300; cursor: default;
    }

    /* 좌측 정보 영역 */
    .mini-info { flex: 0 0 30%; max-width: 300px; }
    .mini-img { width: 56px; height: 56px; margin-right: 15px; }
    .mini-title { font-size: 14px; margin-bottom: 4px; }
    .mini-artist { font-size: 12px; }
    .mini-title:hover { text-decoration: underline; cursor: pointer; }

    /* 중앙 컨트롤 (PC 전용) */
    .pc-controls {
        display: flex; align-items: center; gap: 20px; flex: 1;
        justify-content: center; position: absolute; left: 50%; transform: translateX(-50%);
    }
    .pc-controls i { color: #b3b3b3; font-size: 20px; cursor: pointer; transition: 0.2s; }
    .pc-controls i:hover { color: #fff; }
    .pc-play-btn {
        width: 35px; height: 35px; background: #fff; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #000; font-size: 16px; transition: 0.2s; cursor: pointer;
    }
    .pc-play-btn:hover { transform: scale(1.05); }
    .pc-play-btn i { color: #000; margin-left: 2px; font-size: 16px; }

    /* 우측 컨트롤 */
    .mini-controls { margin-left: 0; gap: 20px; flex: 0 0 30%; justify-content: flex-end; }
    #mini-play-btn { display: none; }
    .pc-only { display: block !important; font-size: 18px; color: #b3b3b3; cursor: pointer; }
    .pc-only:hover { color: #fff; }

    /* 프로그레스 바 스타일 변경 */
    .mini-progress { top: 0; height: 4px; background: #333; transition: height 0.1s; }
    .mini-progress:hover { height: 6px; }
    .mini-progress:hover .mini-progress-bar { background: #1db954; }

    /* 6. 전체 화면 플레이어 -> 모달 팝업으로 변경 */
    .full-player {
        justify-content: center; background: rgba(0,0,0,0.8);
        backdrop-filter: blur(10px);
    }
    
    /* PC 모달창 배경 블러 활성화 (기존 display:none 제거 및 수정) */
    .fp-bg { 
        display: block !important;
        border-radius: 16px; /* 모달 둥근 모서리에 맞춤 */
        filter: blur(30px) brightness(0.4);
    } 
    
    .full-player.active {
        top: 50%; left: 50%; width: 800px; height: 600px;
        transform: translate(-50%, -50%);
        border-radius: 16px; 
        background: transparent; /* 배경을 투명하게 해서 fp-bg가 보이도록 함 */
        overflow: hidden; /* 블러 이미지가 둥근 모서리를 넘지 않도록 자름 */
        box-shadow: 0 20px 50px rgba(0,0,0,0.7);
        border: 1px solid #333; padding: 40px;
        display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
        align-items: center; animation: fadeInModal 0.3s ease-out;
    }
    @keyframes fadeInModal { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } }

    /* 모달 내부 레이아웃 */
    .fp-header { position: absolute; top: 20px; right: 20px; width: auto; justify-content: flex-end; }
    .fp-img-container { margin: 0; aspect-ratio: 1; max-width: 100%; height: auto; }
    
    /* 오른쪽 컨트롤 영역 */
    .fp-info, .fp-progress-box, .fp-controls { grid-column: 2; width: 100%; max-width: 100%; text-align: center; }
    .fp-info { text-align: left; margin-bottom: 20px; align-self: end; }
    .fp-title { font-size: 20px; }
    .fp-artist { font-size: 16px; }
    
    .fp-progress-box { align-self: center; margin-bottom: 20px; }
    .fp-controls { align-self: start; justify-content: center; gap: 30px; }

   /* [수정] PC 버전 가사 뷰 (절대 위치로 고정하여 밀림 방지) */
    .fp-lyrics-view { 
        position: absolute;      /* [핵심] 다른 요소를 밀어내지 않고 독립적으로 뜹니다 */
        top: 60px;               /* 상단 헤더(닫기 버튼 등) 공간 확보 */
        bottom: 150px;           /* [중요] 하단 컨트롤 패널이 가려지지 않게 공간 확보 */
        left: 0;
        width: 100%;             /* 전체 너비 사용 */
        height: auto;            /* top과 bottom에 맞춰 높이 자동 조절 */
        
        border: none !important;
        margin: 0 !important;    /* [핵심] 기존 margin-bottom 제거 */
        padding: 0 50px;         /* 좌우 여백 */
        background: transparent !important;
        z-index: 10;
        
        /* 스크롤바 숨김 처리 */
        scrollbar-width: none; 
        -ms-overflow-style: none;
        
        /* 내용 정렬 */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 가사 텍스트 스타일 */
    .lyrics-content { 
        font-size: 26px;
        text-align: center;
        text-shadow: 0 0 10px rgba(0,0,0,0.8);
        width: 100%;
        padding-bottom: 50px; /* 스크롤 끝부분 여유 공간 */
    }
}

/* =========================================================
   [추가] 보관함(라이브러리) & 플레이리스트 스타일
   ========================================================= */

/* 보관함 관련 스타일 */
.create-pl-btn {
    background-color: transparent;
    border: 1px solid var(--text-gray);
    color: var(--text-white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}
.create-pl-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pl-card-empty {
    border: 2px dashed #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    flex-direction: column;
    gap: 10px;
}

/* 곡 목록에 있는 담기 버튼 (앨범 상세 페이지) */
.pl-add-btn {
    background: none;
    border: none;
    color: #aaa;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px;
}
.pl-add-btn:hover { color: #fff; }

/* 플레이리스트 삭제 버튼 (트랙 리스트 내) */
.trash-btn {
    color: #ff5555;
    background: none;
    border: none;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
}

/* =========================================================
   [추가] 앨범 정보 버튼 및 모달 텍스트 스타일 (NEW)
   ========================================================= */
.info-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 20px !important;
}
.info-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #fff;
}

.album-info-text {
    font-size: 15px;
    line-height: 1.6;
    color: #ddd;
    white-space: pre-wrap;
    padding: 10px 5px;
}
/* --- [NEW] 로고 하단 뒤로가기 영역 스타일 --- */
.back-container {
    width: 100%;
    padding: 0 0 15px 5px; /* 하단 여백과 왼쪽 정렬 */
    display: flex;
    align-items: center;
    animation: fadeIn 0.3s ease-out;
}

.nav-back-btn {
    background: transparent;
    border: none;
    color: var(--text-gray); /* 은은한 회색 */
    font-size: 15px;
    font-weight: bolder;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 5px 10px 5px 0;
    transition: color 0.2s, transform 0.2s;
}

.nav-back-btn i {
    font-size: 14px;
}

.nav-back-btn:hover, .nav-back-btn:active {
    color: var(--text-white); /* 누르거나 올리면 흰색 */
    transform: translateX(-3px); /* 왼쪽으로 살짝 움직이는 효과 */
}

/* PC 화면에서도 자연스럽게 보이도록 위치 조정 */
@media (min-width: 1024px) {
    .back-container {
        padding-bottom: 20px;
    }
}
/* =========================================================
   [NEW] 타이틀 곡 배지 스타일
   ========================================================= */
.title-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: bolder;
    color: #000;
    background-color: var(--primary); /* 녹색 */
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    transform: translateY(-1px); /* 텍스트와 높이 맞춤 */
}
/* =========================================================
   [NEW] 재생 금지 곡 스타일
   ========================================================= */
.track-disabled {
    opacity: 0.5;                /* 전체적으로 흐리게 */
    pointer-events: none;        /* 클릭 방지 */
    cursor: default;
}
.track-disabled .track-title,
.track-disabled .track-artist,
.track-disabled .track-num {
    color: #555 !important;      /* 글자색 진한 회색 */
}
/* [NEW] 풀 플레이어가 열려있을 때(body에 fp-open 클래스 있음) 미니 플레이어 숨김 */
    body.fp-open .mini-player {
        display: none !important;
    }

} 
/* =========================================================
   [수정] 폰트 강조 (앨범 제목, 카테고리, 가사)
   ========================================================= */

/* 1. 카테고리 제목 (홈 화면: 최근 재생 목록, 인기 아티스트 등) */
.section-header h2 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700 !important;
    font-size: 22px; /* 크기도 살짝 키워 강조 */
    letter-spacing: -0.5px;
}

/* 2. PC 버전 페이지 제목 (홈, 검색, 보관함 텍스트) */
.pc-only {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
}

/* 3. 앨범/아티스트 상세 페이지의 큰 제목 */
.header-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700 !important;
    font-size: 26px; /* 더 크게 강조 */
    letter-spacing: -1px;
    margin-bottom: 8px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5); /* 입체감 추가 */
}

/* 4. 전체 화면 플레이어(Full Player)의 곡 제목 */
.fp-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700 !important;
    font-size: 20px;
    letter-spacing: -1px;
}

/* 5. 가사 (Lyrics) */
.lyrics-content {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700 !important;
    font-size: 24px; /* 가사 가독성을 위해 키움 */
    line-height: 1.8; /* 줄 간격 넓힘 */
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 배경이 밝아도 잘 보이게 그림자 */
}
/* =========================================================
   [NEW] 폰트 굵기 구분 (제목 Bold / 소제목 Regular)
   ========================================================= */

/* 1. [굵게 강조] 앨범 제목, 카테고리, 곡 제목, 가사 */
.section-header h2,       /* 메인 카테고리 제목 */
.header-title,            /* 상세 페이지 큰 제목 */
.fp-title,                /* 플레이어 곡 제목 */
.lyrics-content,          /* 가사 */
.album-title-text,        /* 스크롤 카드 제목 */
.card-title,              /* 그리드 카드 제목 */
.track-title,             /* 리스트 곡 제목 */
.mini-title,              /* 미니 플레이어 제목 */
.pc-only {                /* PC 페이지 타이틀 */
    font-weight: 700 !important; /* Bold */
    letter-spacing: -0.5px;
}

/* 2. [보통 굵기] 아티스트명, 앨범 타입, 설명 (소제목) */
.header-sub,              /* 상세 페이지 아티스트명 */
.album-artist-text,       /* 스크롤 카드 아티스트명 */
.card-sub,                /* 그리드 카드 서브 텍스트 */
.track-artist,            /* 리스트 아티스트명 */
.fp-artist,               /* 플레이어 아티스트명 */
.mini-artist,             /* 미니 플레이어 아티스트명 */
.track-num,               /* 트랙 번호 */
.album-info-text,         /* 앨범 소개글 */
.view-all-btn,            /* 전체보기 버튼 */
.nav-item,                /* 네비게이션 텍스트 */
.sidebar-item {           /* 사이드바 텍스트 */
    font-weight: 400 !important; /* Regular (Pretendard 기본) */
    opacity: 0.85; /* 약간 투명하게 해서 제목을 더 돋보이게 함 */
}

/* 가사는 굵게 유지하되 가독성을 위해 크기 조정 */
.lyrics-content {
    font-size: 24px;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    text-align: left;
}

/* [style.css] 맨 아래에 추가 */

/* --- 크레딧(제작자) 모달 스타일 --- */
.credit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 화면 크기에 맞춰 자동 줄바꿈 */
    gap: 20px;
    padding-bottom: 20px;
}

.credit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 10px;
    border-radius: 12px;
}

.credit-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #333;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
    border: 2px solid #333;
}

.credit-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-white);
}

.credit-role {
    font-size: 11px;
    color: var(--primary); /* 역할은 초록색으로 강조 */
    font-weight: 400;
}
/* =========================================================
   [추가] 모바일 세로 해상도별 플레이어 닫기 버튼 여백 (Safe Area)
   ========================================================= */

/* 1단계: 세로 740px 이상 (기본 모델 등) -> 30px */
@media (min-height: 740px) and (max-width: 1023px) {
    .fp-close-btn {
        padding-bottom: 25px;
    }
}

/* 2단계: 세로 820px 이상 (Ultra, Pro Max 등 대형 모델) -> 40px */
@media (min-height: 820px) and (max-width: 1023px) {
    .fp-close-btn {
        padding-bottom: 35px;
    }
}
/* =========================================================
   [추가] 가사 뷰 활성화 시 닫기 버튼 패딩 초기화
   ========================================================= */

/* .fp-player에 .lyrics-active 클래스가 붙으면, fp-close-btn의 패딩을 10px로 되돌립니다. */
.fp-player.lyrics-active .fp-close-btn {
    padding-bottom: 1px !important;
}