/* bgm-player-style.css */
:root{
    --bgm-main: #b30c0c;
    --bgm-mdark: #000000;
    --bgm-mdark2: rgba(0, 0, 0, .35);
    --bgm-bright: #afafaf;
    --bgm-font: #000000;
    --bgm-point: rgba(0, 0, 0, .35);
}
body { 
    -ms-overflow-style:none; 
    font-family:'Pretendard Variable'; 
    height:fit-content; 
}
::-webkit-scrollbar { 
    display:none; 
}
.bgm-wrapper { 
    position:fixed; 
    right:0; 
    top:0; 
    width:100%; 
    height:100%; 
    z-index:999; 
    transition:.5s; 
    visibility:visible; 
}
.bgm-player { 
    background:var(--bgm-main); 
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px;
}
.player-title { 
    margin:0 0 10px;
    font-size:16px; 
    color:var(--bgm-font); 
}
.control-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 5px;
}
.control-btn {
    background: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bgm-font);
    border: none;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.3s ease;
}
.control-btn:hover {
    color: var(--bgm-point);
}
.volume-control {
    display: flex;
    align-items: center;
    gap: 5px;
    scale: 0.8;
}
.volume-control > i {
    opacity: .65;
    font-size: 16px;
    color: var(--bgm-font);
}
.volume-slider {
    width: 80%;
    height: 5px;
    -webkit-appearance: none;
    background: var(--bgm-mdark2);
    outline: none;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 5px;
    background: var(--bgm-bright);
    cursor: pointer;
}
.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bgm-bright);
    cursor: pointer;
}
.minimize-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    color: var(--bgm-font);
    cursor: pointer;
    font-size: 10px;
}
.mini-player {
    position: fixed;
    top: 0px;
    right: 0px;
    background: var(--bgm-mdark);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    visibility: visible;
}
.mini-player > i {
    font-size: 14px;
    margin-right: -2px;
    margin-top: -1px;
    color: var(--bgm-main);
    transition: all 0.3s ease;
}
.current-song-title {
    color: var(--bgm-font);
    margin-bottom: 13px;
    text-align: center;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

#player {
    display: none;
}

/* 프로그레스바 스타일 */
.progress-container {
    margin-bottom: 8px;
    padding: 0 10px;
    position: relative;
    scale: 1.1;
}
.progress-bar {
    height: 5px;
    background: var(--bgm-mdark2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--bgm-mdark);
    width: 0;
    transition: width 0.1s;
}
.progress-thumb {
    width: 5px;
    height: 5px;
    background: var(--bgm-bright);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: var(--bgm-font);
    margin-top: 3px;
}
.hidden{ 
    visibility:hidden; 
    pointer-events:none; 
    opacity:0; 
}

/* 커버이미지 추가 */
.current-song-cover {
    width: 60px;
    margin: 0 auto 10px auto;
}
.imgbox {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--bgm-mdark);
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--bgm-bright) center / cover no-repeat;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.imgbox.circle {
    border-radius: 50%;
}