@charset "UTF-8";

/*위젯 랭크*/
#rank-widget {

}
.ranking-list {
	list-style: none;
	margin: 0;
	padding: 1rem 1.5rem;
	background: var(--colorwhite);
	border-radius: 0 0 var(--radius) var(--radius);
}
.ranking-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.25rem 0;
	border-radius: var(--radius);
	transition: .2s;
	position: relative;
}
.ranking-list li:hover{
	background: #f8fafc;
}
.rank-1 { background: linear-gradient( 90deg, rgba(255,215,0,.12), transparent);}
.rank-2 { background: linear-gradient( 90deg, rgba(203,213,225,.20), transparent);}
.rank-3 { background: linear-gradient( 90deg, rgba(251,146,60,.15), transparent);}

.rank-1::before, .rank-2::before, .rank-3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 4px;
	border-radius: 50px;
}
.rank-1::before { background: #facc15;}
.rank-2::before { background: #cbd5e1;}
.rank-3::before { background: #fb923c;}
.rank-ranking {
	width: 28px;
	text-align: center;
	font-weight: 500;
}
.rank-name {
	flex: 1;
	font-size: 13px;
}
.rank-name .sv_wrap {
	font-weight: 600;
	color: var(--colorbasic);
}
.rank-score {
	color: var(--bg-in-color);
	font-weight: 800;
	font-size: 10px;
}