/**
 * Popular Ranking System Styles
 * 適用範囲: .popular-ranking 配下のみ (他の CSS と衝突回避)
 * 想定: PC/SP 共通のダークデザイン
 */

.popular-ranking {
	--bg:    #000;
	--text:  #fff;
	--link:  #ffa500;
	--border:#ddd;
	--muted: #bbb;

	max-width:  690px;
	margin:     0 auto;
	padding:    16px;
	box-sizing: border-box;
	background: transparent;
}

/* 見出し */
.popular-ranking .page-title {
	font-size:      20px;
	line-height:    1.35;
	margin:         4px 0 12px;
	letter-spacing: .2px;
	text-align:     center;
}

/* 期間タブ */
.popular-ranking .tabs {
	position: sticky; top: 0; z-index: 10;
	display:  flex;
	gap:      8px;
	padding:  8px 0 12px;
}
.popular-ranking .tabs a {
	display:        inline-flex;
	align-items:    center;
	justify-content:center;
	min-width:      64px;
	height:         36px;
	padding:        0 12px;
	border:         1px solid var(--border);
	border-radius:  10px;
	font-size:      14px;
	font-weight:    600;
	color:          var(--link);
	transition:     transform .06s ease;
	-webkit-tap-highlight-color: transparent;
}
.popular-ranking .tabs a:active { transform: scale(0.98); }
.popular-ranking .tabs a.active {
	background:   var(--link);
	color:        #000 !important;
	border-color: var(--link);
	text-decoration: none;
}

/* ランキングテーブル */
.popular-ranking .rank-table {
	width:           100%;
	border-collapse: collapse;
	margin:          0;
	border-top:      1px solid var(--border);
}
.popular-ranking .rank-table tr {
	background:    #111;
	border:        1px solid #fff;
	border-radius: 4px;
	margin:        10px;
	padding:       10px;
}
.popular-ranking .rank-table td {
	padding:        12px 6px !important;
	vertical-align: middle;
}
.popular-ranking .rank-table tr:last-child td { padding-bottom: 16px; }

/* 行レイアウト: 番号 / サムネ / タイトル */
.popular-ranking .row {
	display:               grid;
	grid-template-columns: 40px 96px 1fr;
	gap:                   10px;
	align-items:           center;
}
@media (max-width: 420px) {
	.popular-ranking .row { grid-template-columns: 36px 84px 1fr; }
}

.popular-ranking .rank-number {
	text-align:  center;
	font-weight: 800;
	font-size:   16px;
	color:       var(--muted);
}

.popular-ranking .thumb {
	width:         96px;
	height:        96px;
	border-radius: 10px;
	overflow:      hidden;
	border:        1px solid var(--border);
	background:    #111;
}
@media (max-width: 420px) {
	.popular-ranking .thumb { width: 84px; height: 84px; }
}
.popular-ranking .thumb img {
	width:      100% !important;
	height:     100% !important;
	object-fit: cover;
}

.popular-ranking .title {
	font-size:   16px;
	line-height: 1.45;
	color:       var(--text);
}
.popular-ranking .title a { color: var(--link); }

.popular-ranking .note {
	font-size: 12px;
	color:     var(--muted);
	margin:    12px 2px 0;
}

@media (prefers-reduced-motion: no-preference) {
	.popular-ranking .thumb img { transition: transform .15s ease; }
	.popular-ranking .row:hover .thumb img { transform: scale(1.02); }
}