/* web-top10 : grid of "<category> TOP10" cards.
   Card = tinted header (icon · title · chevron) + ranked list (rank badge · logo · name).
   --wtp-accent = the board's 강조 색상 (스킨설정, inline style), else the site primary.
   Rank colors (gold / silver / bronze, 1-3 name colors) are fixed: they mean "rank", not brand. */

.web-top10 {
	--wtp-line:#e5e7eb;
	--wtp-gold:#f5b301; --wtp-silver:#a7b1bd; --wtp-bronze:#d0864b;
	--wtp-top1:#e03131; --wtp-top2:#f08c00; --wtp-top3:#2f9e44;
}

.web-top10 .wtp-card {
	--wtp-accent:var(--web-primary);
	height:100%; display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--wtp-line); border-radius:12px; overflow:hidden;
	transition:box-shadow .15s ease, border-color .15s ease;
}
.web-top10 .wtp-card:hover { box-shadow:0 8px 20px rgba(0,0,0,.06); border-color:color-mix(in srgb, var(--wtp-accent) 35%, var(--wtp-line)); }

/* Header */
.web-top10 .wtp-head {
	display:flex; align-items:center; justify-content:space-between; gap:.5rem;
	padding:.75rem .9rem;
	background:color-mix(in srgb, var(--wtp-accent) 7%, #fff);
	border-bottom:1px solid color-mix(in srgb, var(--wtp-accent) 18%, var(--wtp-line));
}
.web-top10 .wtp-title {
	display:flex; align-items:center; gap:.5rem; min-width:0;
	color:color-mix(in srgb, var(--wtp-accent) 70%, #000); font-size:15px;
}
.web-top10 .wtp-title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.web-top10 .wtp-title:hover { text-decoration:none; color:var(--wtp-accent); }
.web-top10 .wtp-icon { flex:0 0 22px; width:22px; height:22px; object-fit:contain; }
.web-top10 .wtp-more { flex:0 0 auto; color:color-mix(in srgb, var(--wtp-accent) 60%, #868e96); font-size:12px; }
.web-top10 .wtp-more:hover { color:var(--wtp-accent); }

/* Ranked list */
.web-top10 .wtp-list { list-style:none; margin:0; padding:.3rem .45rem .45rem; }
.web-top10 .wtp-link {
	display:flex; align-items:center; gap:.55rem;
	padding:.42rem .45rem; border-radius:8px;
	color:#343a40; font-size:14px;
	transition:background-color .15s ease;
}
.web-top10 .wtp-link:hover { background:color-mix(in srgb, var(--wtp-accent) 8%, #fff); text-decoration:none; color:#212529; }

.web-top10 .wtp-rank {
	flex:0 0 20px; width:20px; height:20px;
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:50%; background:color-mix(in srgb, var(--wtp-accent) 14%, #fff);
	color:color-mix(in srgb, var(--wtp-accent) 80%, #000); font-size:11px; font-weight:800;
}
.web-top10 .is-top1 .wtp-rank { background:var(--wtp-gold); color:#fff; }
.web-top10 .is-top2 .wtp-rank { background:var(--wtp-silver); color:#fff; }
.web-top10 .is-top3 .wtp-rank { background:var(--wtp-bronze); color:#fff; }

.web-top10 .wtp-logo {
	flex:0 0 26px; width:26px; height:26px;
	display:flex; align-items:center; justify-content:center;
	border-radius:6px; overflow:hidden; background:#f1f3f5;
}
.web-top10 .wtp-logo img { width:100%; height:100%; object-fit:contain; }
.web-top10 .web-links-initial { color:#495057; font-size:12px; font-weight:800; }

.web-top10 .wtp-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.web-top10 .is-top1 .wtp-name,
.web-top10 .is-top2 .wtp-name,
.web-top10 .is-top3 .wtp-name { font-weight:800; font-size:15px; }
.web-top10 .is-top1 .wtp-name { color:var(--wtp-top1); }
.web-top10 .is-top2 .wtp-name { color:var(--wtp-top2); }
.web-top10 .is-top3 .wtp-name { color:var(--wtp-top3); }

.web-top10 .wtp-empty { margin:0; padding:1.5rem .75rem; color:#adb5bd; font-size:13px; text-align:center; }
.web-top10 .wtp-none { padding:1rem; border:1px dashed #ced4da; border-radius:12px; color:#868e96; font-size:13px; text-align:center; }

@media (max-width:575px) {
	.web-top10 .wtp-head { padding:.6rem .65rem; }
	.web-top10 .wtp-title { font-size:13px; gap:.35rem; }
	.web-top10 .wtp-icon { flex-basis:18px; width:18px; height:18px; }
	.web-top10 .wtp-list { padding:.2rem .25rem .3rem; }
	.web-top10 .wtp-link { gap:.4rem; padding:.38rem .3rem; font-size:13px; }
	.web-top10 .wtp-logo { flex-basis:22px; width:22px; height:22px; }
	.web-top10 .is-top1 .wtp-name, .web-top10 .is-top2 .wtp-name, .web-top10 .is-top3 .wtp-name { font-size:13px; }
}