/* web-slots : slot-game card grid for the home page.
   Ported from the Web-Basic-Slots skin's .ws-card, scoped under .web-slots.
   Title: provider in the dark foreground + "체험 플레이" as regular meta. */

/* --- Section header (provider + 체험 플레이 ... 전체보기) --- */
.web-slots .web-slots-head {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:1rem;
}
.web-slots .web-slots-title {
	margin:0;
	font-size:26px;   /* home section title (22px on phones, below) */
	line-height:1.2;
	color:var(--web-primary-foreground);
}
.web-slots .web-slots-prov {
	color:var(--web-primary-foreground);
	font-weight:800;
}
.web-slots .web-slots-sub {
	color:#8a9099;
	font-weight:500;
	font-size:15px;
}
.web-slots .web-slots-more {
	border:1px solid rgba(0,0,0,.2);
	color:#495057;
	background:transparent;
	border-radius:50rem;      /* rounded pill shortcut (shared style) */
	padding:.35rem 1.1rem;
	font-size:13px;
	white-space:nowrap;
	transition:border-color .15s ease, color .15s ease;
}
.web-slots .web-slots-more:hover { border-color:var(--web-primary-foreground); color:var(--web-primary-foreground); text-decoration:none; }

/* --- Card --- */
.web-slots .wsg-card { position:relative; }

.web-slots .wsg-thumb {
	position:relative;
	height:0;
	border-radius:1rem;
	overflow:hidden;
	background:var(--web-primary-foreground); /* shows behind transparent / undersized game images */
	margin-bottom:.6rem;
}
.web-slots .wsg-link {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	display:block;
}
.web-slots .wsg-img {
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	object-fit:cover;
	transition:transform .25s ease;
}
.web-slots .wsg-card:hover .wsg-img { transform:scale(1.06); }

/* Badge (top-left) */
.web-slots .wsg-badge {
	position:absolute; top:8px; left:8px; z-index:3;
	padding:.05rem .5rem;
	border-radius:5px;
	font-size:10px; font-weight:800; letter-spacing:.03em;
	box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.web-slots .wsg-badge-new { background:var(--web-primary); color:#000; }
.web-slots .wsg-badge-hot { background:#fa3e3e; color:#fff; }

/* Hover: green overlay + 무료체험 play button */
.web-slots .wsg-overlay {
	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 .wsg-card:hover .wsg-overlay { opacity:1; }
.web-slots .wsg-play {
	display:inline-flex; align-items:center;
	padding:.4rem .95rem;
	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,.35);
	transform:translateY(6px); transition:transform .18s ease;
}
.web-slots .wsg-play .fa { margin-right:.3rem; }
.web-slots .wsg-card:hover .wsg-play { transform:translateY(0); }

/* Title */
.web-slots .wsg-name {
	display:block;
	font-weight:700;
	font-size:14px;
	line-height:1.35;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.web-slots .wsg-name:hover { text-decoration:none; }

.web-slots .wsg-empty { color:#8a9099; }

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