body {
    font-family: 'Jua', cursive;
    background-color: #F7F2E0;
}

h4 {
    max-width: 250px !important;
    font-family: 'Jua', cursive;
    /* 원하는 글꼴로 변경 가능 */
    font-weight: bold;
    text-align: left;
    font-size: 26px;
    color: #585858;

    padding-bottom: 0px; /* 하단 패딩을 0으로 설정 */
    margin-bottom: 4px; /* 하단 마진을 줄여 간격 조정 */
}

table {
    max-width: 250px !important;
}

td img {
    opacity: 0.7;
    /* 이미지를 약간 투명하게 만듭니다. */
}

td img:hover {
    opacity: 1.2;
    /* 이미지를 약간 투명하게 만듭니다. */
    border: 1px solid blue;
    /* 파란색 border 추가 */
    cursor: pointer;
    /* 마우스 커서를 포인터로 변경하여 클릭 가능함을 나타냅니다. */
}

.playing-info {
    font-family: 'Jua', cursive;
    color: #F2F2F2;
    background-color: gray;
    max-width: 250px !important;
    border: 1px solid #bbb;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 수평으로 채널 정보를 확장 */
    padding: 5px 10px; /* padding을 줄여 여백을 최소화 */
    font-size: 12px;
    height: auto;
}

.playing-logo {
    margin-right: 5px;
}

.playing-status {
    font-family: 'Jua', cursive;
    margin-left: 0; /* 왼쪽 정렬로 변경 */
    color: #F2F2F2;
    font-size: 12px;
}

#qualitySelect {
    background-color: gray;
    color: #F2F2F2;
    font-family: 'Jua', cursive;
    font-size: 12px;
    border: none;
    padding: 0;
    height: auto;
    width: auto;
    appearance: none;
    margin-left: auto; /* 드롭다운 메뉴를 오른쪽으로 고정 */
}

#qualitySelect option {
    background-color: gray;
    color: #F2F2F2;
    font-size: 12px;
}

/* 오디오 요소의 높이를 상태바 높이와 동일하게 설정 */
.audio-player {
    height: 30px; /* 상태바 높이와 일치 */
    max-width: 250px !important;
    /*margin-left: 10px; /* 상태바와의 간격 조정 */
}

.bi-arrow-clockwise {
    cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */
    transition: transform 0.2s; /* 클릭 시 회전 애니메이션 추가 */
}
.bi-arrow-clockwise:hover {
    transform: rotate(90deg); /* 호버 시 회전 효과 */
}