/* web-slots-rank : "인기 슬롯 TOP N" ranking — white cards (border +
   shadow), same language as web-ads / web-partners. Top N feature cards with a
   green 무료체험 hover overlay, then a 2-col ranked list. */

.web-slots-rank { background:transparent; border:0; padding:0; }

/* --- Header --- */
.web-slots-rank .wsr-head {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:1rem;
	flex-wrap:wrap;
	gap:.5rem;
}
.web-slots-rank .wsr-title {
	margin:0;
	font-size:26px;   /* home section title (22px on phones, below) */
	line-height:1.2;
	color:var(--web-primary-foreground);
	font-weight:800;
}
.web-slots-rank .wsr-top { color:var(--web-primary-hover); font-weight:800; margin-left:.15rem; }
.web-slots-rank .wsr-sub { margin-left:.5rem; color:#868e96; font-size:13px; font-weight:500; }
.web-slots-rank .wsr-more {
	border:1px solid rgba(0,0,0,.2);
	color:#495057;
	background:transparent;
	border-radius:50rem;      /* rounded pill, same as web-partners' shortcut */
	padding:.35rem 1.1rem;
	font-size:13px;
	white-space:nowrap;
	transition:border-color .15s ease, color .15s ease;
}
.web-slots-rank .wsr-more:hover { border-color:var(--web-primary-foreground); color:var(--web-primary-foreground); text-decoration:none; }

.web-slots-rank .wsr-empty { color:#868e96; text-align:center; padding:2.5rem 0; }

/* --- Feature cards (top N) --- */
.web-slots-rank .wsr-fcard {
	background:#fff; /* white card — stands out on the tinted page (--web-background) */
	border:1px solid #e5e7eb;
	border-radius:12px;
	overflow:hidden;          /* edge-to-edge banner */
	box-shadow:0 4px 14px rgba(0,0,0,.1);
	transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.web-slots-rank .wsr-fcard:hover {
	border-color:var(--web-primary);
	transform:translateY(-3px);
	box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.web-slots-rank .wsr-fcard.is-first { border-color:var(--web-primary); } /* highlight #1 */

.web-slots-rank .wsr-fthumb {
	position:relative;
	height:0;
	overflow:hidden;
	background:var(--web-primary-foreground); /* shows behind transparent / undersized game images */
}
.web-slots-rank .wsr-frank {
	position:absolute; top:8px; left:11px; z-index:3;
	font-style:italic; font-weight:800; font-size:26px; line-height:1;
	color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.web-slots-rank .wsr-flink { position:absolute; top:0; left:0; right:0; bottom:0; display:block; }
.web-slots-rank .wsr-fimg {
	position:absolute; top:0; left:0;
	width:100%; height:100%;
	object-fit:cover;
	transition:transform .25s ease;
}
.web-slots-rank .wsr-fcard:hover .wsr-fimg { transform:scale(1.05); }

/* Hover: green overlay + 무료체험 play button (like web-slots) */
.web-slots-rank .wsr-foverlay {
	position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;
	display:flex; align-items:center; justify-content:center;
	background:color-mix(in srgb, var(--web-primary) 55%, transparent);
	opacity:0; transition:opacity .18s ease;
}
.web-slots-rank .wsr-fcard:hover .wsr-foverlay { opacity:1; }
.web-slots-rank .wsr-fplay {
	display:inline-flex; align-items:center;
	padding:.4rem 1rem;
	border-radius:50rem;
	background:var(--web-primary-foreground); color:#fff;
	font-size:13px; font-weight:700; white-space:nowrap;
	box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.web-slots-rank .wsr-fplay .fa { margin-right:.35rem; }

.web-slots-rank .wsr-fbody { padding:.7rem .85rem .85rem; }
.web-slots-rank .wsr-fname {
	display:block;
	color:var(--web-primary-foreground); font-weight:700; font-size:15px; line-height:1.3;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.web-slots-rank .wsr-fcard:hover .wsr-fname { color:var(--web-primary-hover); text-decoration:none; }
.web-slots-rank .wsr-fmeta {
	display:flex; align-items:center; justify-content:space-between;
	margin-top:.3rem; gap:.5rem;
}
.web-slots-rank .wsr-fprov { color:#868e96; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.web-slots-rank .wsr-frtp  { color:#8a9099; font-size:12px; font-weight:700; white-space:nowrap; }

/* --- Ranked list (rest) --- */
.web-slots-rank .wsr-row {
	display:flex; align-items:center; gap:.7rem;
	background:#fff; /* white card — stands out on the tinted page (--web-background) */
	border:1px solid #e5e7eb;
	border-radius:12px;
	padding:.55rem .8rem;
	box-shadow:0 4px 14px rgba(0,0,0,.08);
	transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.web-slots-rank .wsr-row:hover {
	border-color:var(--web-primary);
	transform:translateY(-2px);
	box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.web-slots-rank .wsr-rank {
	flex:0 0 auto; width:1.5em; text-align:center;
	font-style:italic; font-weight:800; font-size:20px; color:#c8a24a; /* gold */
}
.web-slots-rank .wsr-rthumb {
	flex:0 0 auto; display:block;
	width:96px; height:54px; /* 16:9 */
	border-radius:8px; overflow:hidden; background:var(--web-primary-foreground);
}
.web-slots-rank .wsr-rthumb img { width:100%; height:100%; object-fit:cover; }
.web-slots-rank .wsr-rinfo { flex:1 1 auto; min-width:0; display:block; }
.web-slots-rank .wsr-rinfo:hover { text-decoration:none; }
.web-slots-rank .wsr-rname {
	display:block; color:var(--web-primary-foreground); font-weight:700; font-size:14px; line-height:1.3;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.web-slots-rank .wsr-row:hover .wsr-rname { color:var(--web-primary-hover); }
.web-slots-rank .wsr-rprov { display:block; color:#868e96; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.web-slots-rank .wsr-rrtp { flex:0 0 auto; color:#8a9099; font-size:12px; font-weight:700; white-space:nowrap; }
.web-slots-rank .wsr-rbtn {
	flex:0 0 auto;
	border:1px solid var(--web-primary); color:var(--web-primary-hover);
	background:transparent;
	border-radius:50rem;
	padding:.3rem .9rem;
	font-size:12px; font-weight:700; white-space:nowrap;
	transition:background .15s ease, color .15s ease;
}
.web-slots-rank .wsr-rbtn:hover { background:var(--web-primary); color:#fff; text-decoration:none; }

@media all and (max-width:575px) {
	.responsive .web-slots-rank .wsr-title { font-size:22px; }
}