*{
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
}

.music-card{
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    position: fixed;

    /* Refactoring: 기존 배경과 그라데이션 테두리를 결합 (background-clip 트릭 사용) */
    background-image: linear-gradient(145deg, #2b2826, #1c1a19),
        linear-gradient(125deg, #ffb330, #fffcce);
    background-origin: border-box;
    background-clip: padding-box, border-box;

    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 140, 0, 0.1);
    color: white;
    overflow: hidden;
    /* Refactoring: 투명 테두리로 영역 확보 */
    border: 2px solid transparent;
}

/* 상단 신청자 정보 */
.requester-info{
    font-size: 14px;
    color: #b0a8a0;
    margin-bottom: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge{
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: #ffeb6b;
    font-weight: bold;
}

.song-container{
    width: 100%;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
}

.song-container.mask{
    /* 양옆 페이드 아웃 효과 (부드럽게 사라짐) */
    mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.song-inner{
    display: flex;
    width: fit-content; /* 내용물만큼만 너비 차지 */
}

/* 텍스트 스타일 */
.track-text{
    white-space: nowrap;
    font-size: 28px;
    font-weight: 800;
    color: #fffef8;
    padding-right: 60px; /* 반복될 때 텍스트 사이 간격 */
}

/* 애니메이션 클래스 (JS가 붙여줌) */
.song-inner.animate{
    animation: scroll-left linear infinite;
    animation-duration: var(--duration, 10s); /* duration: js logic */
}

/* 애니메이션 키프레임 */
@keyframes scroll-left{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}

/* 하단 구분선 및 다음곡 */
.track-progress-bar{
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 14px;
    border-radius: 2px;
    overflow: hidden;
}

#progress-fill {
    width: 0;
    height: 100%;
    background-color: #ffeb6b; /* Theme highlight color */
    transition: width 0.2s linear;
}

.next-song-info{
    font-size: 15px;
    color: #cccccc;
    display: flex;
    justify-content: space-between;
}

.next-song-info *{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.next-label{
    flex: 1;
    color: #8d8580;
    font-weight: 500;
}

.queue-item{
    display: none;
    font-weight: 600;
    text-align: right;
}
/* '첫 번째' 아이템(다음 곡) 하나만 보여줌 */
.queue-item:first-child{
    display: block;
}

.queue-container{
    flex: 4;
}

.skip-button{
    opacity: 0;
    color: #ffeb6b;
    margin-left: auto;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s linear;
}
.skip-button:hover{
    opacity: 1;
}

@media (min-width: 600px) {
    /* 다음곡/대기열 섹션 스타일 */
    .next-song-info {
        background: rgba(0, 0, 0, 0.2); /* 영역 구분을 위한 배경 (선택) */
        padding: 15px;
        border-radius: 12px;
        margin-top: 10px;
        flex-direction: column;
    }

    .next-label {
        font-weight: bold;
        margin-bottom: 10px;
    }

    /* 스크롤 영역 핵심 스타일 */
    .queue-container {
        max-height: 150px; /* 이 높이를 넘어가면 스크롤 발생 */
        overflow-y: auto;  /* 세로 스크롤 활성화 */
        display: flex;
        flex-direction: column;
        counter-reset: queue-counter;
    }

    /* 개별 곡 아이템 스타일 */
    .queue-item {
        display: block; /* 다시 보이게 설정 */
        padding: 4px 0;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 구분선 */
    }
    /* 각 아이템 앞에 번호표 붙이기 */
    .queue-item::before {
        /* 카운터 증가 */
        counter-increment: queue-counter;

        /* 화면에 출력: 숫자 + 점 + 공백 */
        content: counter(queue-counter) ". ";

        /* 번호 스타일링 (선택사항) */
        font-weight: bold;
        color: rgba(255, 255, 255, 0.7); /* 제목보다 살짝 흐리게 */
        margin-right: 4px;
    }

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

    /* 커스텀 스크롤바 디자인 (Webkit 브라우저용) */
    .queue-container::-webkit-scrollbar {
        width: 6px;
    }
    .queue-container::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }
    .queue-container::-webkit-scrollbar-track {
        background-color: transparent;
    }
}