/**************************************************************
	배경음악 플레이어 스타일
***************************************************************/

/* 싱글 페이지에서 숨김 */
html.single .bgm-player {display:none !important;}

/* 플레이어 컨테이너 */
.bgm-player {
	padding:0;
}

/* 컨트롤 영역 */
.bgm-controls {
	display:flex;
	flex-direction:column;
	gap:8px;
}

/* 재생/정지 버튼 */
.bgm-btn {
	background:none;
	border:none;
	cursor:pointer;
	padding:0;
	color:#CEAD6C;
	text-align:left;
	display:block;
	height:20px;
	line-height:20px;
	transition:color 0.3s;
}
.bgm-btn:hover {
	color:#d4b876;
}

/* 버튼 아이콘 */
.bgm-btn .icon-play {
	font-size:14px;
	display:inline-block;
	vertical-align:middle;
}
.bgm-btn .icon-pause {
	font-size:20px;
	display:inline-block;
	vertical-align:middle;
	transform:translate(-4px, -2px);
}
.bgm-btn.playing .icon-pause {display:inline-block;}
.bgm-btn.playing .icon-play {display:none;}
.bgm-btn.paused .icon-play {display:inline-block;}
.bgm-btn.paused .icon-pause {display:none;}

/* 볼륨 컨트롤 래퍼 */
.volume-control {
	display:block;
	width:80px;
}

/* 볼륨 슬라이더 */
.volume-slider {
	width:100%;
	height:3px;
	-webkit-appearance:none;
	appearance:none;
	background:rgba(206,173,108,0.3);
	border-radius:2px;
	outline:none;
	cursor:pointer;
}
.volume-slider::-webkit-slider-thumb {
	-webkit-appearance:none;
	width:12px;
	height:12px;
	background:#CEAD6C;
	border-radius:50%;
	cursor:pointer;
	transition:all 0.2s;
}
.volume-slider::-webkit-slider-thumb:hover {
	transform:scale(1.2);
	background:#d4b876;
}
.volume-slider::-moz-range-thumb {
	width:12px;
	height:12px;
	background:#CEAD6C;
	border-radius:50%;
	cursor:pointer;
	border:none;
	transition:all 0.2s;
}
.volume-slider::-moz-range-thumb:hover {
	transform:scale(1.2);
	background:#d4b876;
}