:root{
	--bg: #f6f7fb;
	--card: #ffffff;
	--text: #2b2b2b;
	--muted: #9aa0a6;
	--accent: #ff7a3d;
	--accent2: #ffb86b;
	--line: #eef0f4;
}
*{box-sizing:border-box}
body{
	margin:0; background:var(--bg); color:var(--text);
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Pretendard,Apple SD Gothic Neo,Helvetica,Arial,"Noto Sans KR",sans-serif;
	display:flex; align-items:flex-start; justify-content:center; padding:24px;
}
.ranking{
	width:100%; max-width:100%;
	background:var(--card); border-radius:18px; overflow:hidden;
	box-shadow: 0 12px 30px rgba(0,0,0,.08);
}


.tabs{display:flex;gap:10px;align-items:center;margin:6px 2px 18px; justify-content:center;}
.tab{
	user-select:none;cursor:pointer;
	height: 50px;
	width: 46%;
	display:flex;align-items:center;gap:8px;
	justify-content: center;
	border-radius:12px;
	color:var(--muted);background:#f3f6fb;border:1px solid #f0f3f7;
	transition:.18s ease;
}
.tab:hover{filter:saturate(1.1)}
.tab.active{background:var(--blue-weak);color:#0b315a;border-color:#cfe7ff;box-shadow:0 6px 14px rgba(58,161,255,.18)}
.ico{width:18px;height:18px;color:currentColor;flex:0 0 18px}
.ico::before{
	content:"";display:block;width:100%;height:100%;background:currentColor;
	-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
}
.ico.user::before{-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.5 0-8 2.4-8 5v1h16v-1c0-2.6-3.5-5-8-5Z'/></svg>"); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.5 0-8 2.4-8 5v1h16v-1c0-2.6-3.5-5-8-5Z'/></svg>");}
.ico.cal::before{-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2Zm13 8H4v9h16v-9Z'/></svg>"); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2Zm13 8H4v9h16v-9Z'/></svg>");}
.tab .label{font-weight:700;font-size:14px;letter-spacing:.01em}




.level-badge{
	position:absolute; top:16px; right:16px;
	color:#fff; font-weight:700; font-size:14px; letter-spacing:.2em;
}

/* podium wrap */
.podium{
	position:relative;
	background:#fff; border-radius:16px 16px 0 0;
	margin-top:20px; padding:16px 12px 6px;
}
.podium-row{ display:flex; gap:5%; align-items:flex-end; justify-content:center; }
.podium-card{
	position:relative; width:100%; max-width:150px;
	background:#fff; border-radius:14px;
	padding:12px 8px 10px; text-align:center;
	box-shadow: 0 6px 16px rgb(0 0 0 / 43%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.podium-card.center{ max-width:160px; height:200px; background:gold;}
.podium-card:nth-child(1) {
	height:180px;
	background:silver;
	/* transform: translateY(-8px); */
}
.podium-card:nth-last-child(1) {
	height:160px;
	background:#c67c59;
	/* transform: translateY(10px); */
}
.avatar{
	width:64px; height:64px; border-radius:50%;
	margin:0 auto 8px; background:#ddd center/cover no-repeat;
	outline:5px solid #f2f4f8;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
	position:relative;
}
.podium-card.center .avatar{ width:76px; height:76px; }
.medal{
	position:absolute; right:-2px; bottom:-2px;
	width:22px; height:22px; border-radius:50%;
	background:linear-gradient(180deg,#ffd36b,#ffb23a);
	color:#7a4100; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;
	border:2px solid #fff;
}
.medal.m2{ background:linear-gradient(180deg,#e9eef4,#bcc6d2); color:#4b5563;}
.medal.m3{ background:linear-gradient(180deg,#ffd1b3,#ff9d6e); color:#6b3400;}

.name{ font-size:13px; font-weight:700; margin:4px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lv{ font-size:11px; color:var(--muted); }
.amount{ margin-top:6px; font-weight:800; font-size:14px; color: #ffffff;text-shadow: 1px 1px 1px black; }
.currency{ opacity:.9; margin-right:2px; }

/* list */
.list{
	padding:6px 12px 10px; background:#fff;
}
.row{
	display:grid; grid-template-columns:16px 45px 40px 1fr auto;
	align-items:center; gap:10px;
	padding:10px 4px; border-bottom:1px solid var(--line);
}
.row:last-child{ border-bottom:none; }
.rank-no{ font-weight:800; color:#b6bcc4; font-size:18px; text-align:center; }
.ava-sm{ width:36px; height:36px; border-radius:10px; background:#ddd center/cover no-repeat; outline:3px solid #f2f4f8; }
.who{ display:flex; flex-direction:column; min-width:0; }
.who .n{ font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.who .l{ font-size:11px; color:var(--muted); }
.val{ text-align:right; }
.val .amt{ font-size:12px; font-weight:800; display: flex; justify-content: center; align-items: center; }
.val .amt img{margin-left: 10px;}
.val .note{ font-size:11px; color:var(--muted); margin-top:2px; }

.index-ribbon{
	padding:12px; background:#fff; border-top:1px solid var(--line);
	color:#a7adb5; font-weight:800; letter-spacing:.02em;
	display:none;
}
#loading {
  position: fixed; inset: 0; /* background: rgba(0,0,0,.35); */
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
#loading.show { display: flex; }
.spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid #fff; border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

body.mobile,
body.left{
	padding:0px!important;

}
body.left{
	overflow-y: scroll;
}

body.left .tabs{
	gap:initial!important;
	margin:5px 0px!important;
	justify-content:space-evenly;
}
body.left .tab{
	height:35px!important;
}
body.left .podium{
	display:none!important;
}
body.left .row{
	gap:0px!important;
}
body.mobile .ranking,
body.left .ranking{
	border-radius:0px!important;
}
.ranking_img{
	width: 47px;
	position: absolute;
	left: -4px;
	top: 0px;
	z-index:1;
}
body.left .ranking_img{
	width: 36px !important;
	position: relative !important;
	left: 4px !important;
	top: -10px !important;
}
body.left .list .row[data-rank="1"] .ava-sm,
body.left .list .row[data-rank="2"] .ava-sm,
body.left .list .row[data-rank="3"] .ava-sm{
	width:40px;
	height:40px;
}
body.left .list .row[data-rank="1"] .who .n,
body.left .list .row[data-rank="2"] .who .n,
body.left .list .row[data-rank="3"] .who .n{
	padding-left:5px;
}

body.left .list .row .ava-sm{
	width:30px;
	height:30px;
}

body:not(.left) .list .row[data-rank="1"],
body:not(.left) .list .row[data-rank="2"],
body:not(.left) .list .row[data-rank="3"]{
	display:none;
}
body.left .title{
	height: 32px;
	line-height: 32px;
	font-size: 13px!important;
}
.title{
	width: 100%;
	height: 50px;
	line-height: 50px;
	background: #002260;
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-size: 16px;
}
.updown{
	font-size: 11px;
	font-weight: bold;
	text-align:center;
}
.updown.up b{
	color:green;
	background:url('/sports/images/odds_up.gif');
	background-repeat: no-repeat;
	background-position: 100%;
	padding-right: 12px;
}
.updown.down b{
	color:red;
	background:url('/sports/images/odds_down.gif');
	background-repeat: no-repeat;
	background-position: 100%;
	padding-right: 12px;
}