/* =================================================================
   sakura-player.css - sakura-player.js のプレイヤーUI
   =================================================================
   iframe(play.php / play_pico.php)からも読むので、
   mmlbbs6.css とは分けて小さく保つ。
   ================================================================= */
.sp-root {
	padding: 8px 10px 6px 10px;
	font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	color: #5a4a4a;
	box-sizing: border-box;
}
.sp-bar {
	display: flex;
	align-items: center;
	gap: 8px;
}
.sp-bar button {
	padding: 0.45em 1.1em;
	background-color: #AA6666;
	border: none;
	border-radius: 16px;
	color: #fff;
	font-size: 0.85em;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s;
}
.sp-bar button:hover:enabled {
	background-color: #c07878;
}
.sp-bar button:disabled {
	background-color: #ded2d2;
	cursor: default;
}
.sp-bar button.sp-stop {
	padding: 0.45em 0.9em;
	background-color: #fff;
	border: 1px solid #e8d4d4;
	color: #8a7070;
}
.sp-bar button.sp-stop:hover:enabled {
	background-color: #ffeef0;
	border-color: #e0b0b8;
	color: #a05060;
}
.sp-bar button.sp-stop:disabled {
	background-color: #fff;
	border-color: #f0e8e8;
	color: #d8cccc;
}
.sp-time {
	font-size: 0.78em;
	color: #a09090;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sp-vol {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75em;
	color: #b0a0a0;
}
.sp-vol input {
	width: 64px;
	accent-color: #AA6666;
}
.sp-seek {
	display: block;
	width: 100%;
	margin: 8px 0 4px 0;
	accent-color: #AA6666;
	box-sizing: border-box;
}
.sp-roll {
	display: block;
	width: 100%;
	height: 62px;
	background-color: #fffdfd;
	border: 1px solid #f4eaea;
	border-radius: 4px;
	box-sizing: border-box;
}
.sp-msg {
	min-height: 1.2em;
	padding-top: 3px;
	font-size: 0.7em;
	line-height: 1.2em;
	color: #b8a8a8;
	overflow: hidden;
}
.sp-msg.is-error {
	color: #c05060;
}