/*
 * ファンズナビ 一覧・案内ページ（担当E）
 * ranking / zero-plan / sale / price / genre / genres / page
 * 色は base.css の変数だけを使う（代わりの値つき）。
 */

/* ページの外枠と見出し */
.fn-page {
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px var(--fn-gap, 16px) 48px;
	color: var(--fn-text, #f2f2f4);
}
.fn-page-head {
	margin: 8px 0 20px;
}
.fn-page-title {
	margin: 0 0 8px;
	font-size: 1.5rem;
	line-height: 1.35;
	font-weight: 700;
}
.fn-page-lead {
	margin: 0;
	color: var(--fn-muted, #9a9aa3);
	font-size: 0.95rem;
	line-height: 1.7;
}

/* 切り替えボタン（期間・価格・ジャンル） */
.fn-rank-terms,
.fn-rank-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.fn-rank-term,
.fn-rank-genre {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--fn-border, #2a2a30);
	border-radius: 999px;
	background: var(--fn-surface, #16161a);
	color: var(--fn-text, #f2f2f4);
	font-size: 0.9rem;
	text-decoration: none;
}
.fn-rank-genre {
	padding: 6px 12px;
	font-size: 0.85rem;
}
.fn-rank-term.is-current,
.fn-rank-genre.is-current {
	background: var(--fn-accent, #ff4d7d);
	border-color: var(--fn-accent, #ff4d7d);
	color: var(--fn-accent-text, #ffffff);
	font-weight: 700;
}

.fn-rank-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 12px;
	color: var(--fn-muted, #9a9aa3);
	font-size: 0.85rem;
}

/* ランキングの行 */
.fn-rank-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--fn-gap, 16px);
}
.fn-rank-item {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 10px;
}
.fn-rank-no {
	flex: 0 0 auto;
	min-width: 2em;
	padding-top: 4px;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
	color: var(--fn-muted, #9a9aa3);
}
.fn-rank-body {
	flex: 1 1 auto;
	min-width: 0;
}
/* 上位3位は少し大きく・1行を広く */
.fn-rank-item--top {
	grid-column: span 1;
}
.fn-rank-item--top .fn-rank-no {
	font-size: 1.8rem;
	color: var(--fn-accent, #ff4d7d);
}
.fn-rank-item--top .fn-rank-body {
	font-size: 1.05rem;
}
@media (min-width: 720px) {
	.fn-rank-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.fn-rank-item--1 {
		grid-column: span 2;
	}
	.fn-rank-item--2,
	.fn-rank-item--3 {
		grid-column: span 1;
	}
}

/* 同じ段のカードの高さをそろえる（台帳にいない人のアイコン無しカードも同じ大きさ） */
.fn-rank-list {
	align-items: stretch;
}
.fn-rank-body {
	display: flex;
	flex-direction: column;
}
.fn-rank-body > .fn-ccard {
	flex: 1 1 auto;
	height: auto;
}

/* カードの並び */
.fn-list-grid,
.fn-list-clips,
.fn-list-pairs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fn-gap, 16px);
}
.fn-list-grid {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.fn-list-clips {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.fn-list-pairs {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.fn-list-cell {
	min-width: 0;
}
.fn-list-pair {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* ページ送り・末尾のボタン */
.fn-list-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
}
.fn-list-pager-no {
	color: var(--fn-muted, #9a9aa3);
	font-size: 0.85rem;
}
.fn-list-pager-btn,
.fn-list-more-btn,
.fn-list-sale-link {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--fn-border, #2a2a30);
	border-radius: 999px;
	background: var(--fn-surface, #16161a);
	color: var(--fn-text, #f2f2f4);
	font-size: 0.9rem;
	text-decoration: none;
}
.fn-list-more {
	display: flex;
	justify-content: center;
	margin: 32px 0 0;
}

/* セール */
.fn-list-sale {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fn-list-sale-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--fn-border, #2a2a30);
	border-radius: var(--fn-radius, 12px);
	background: var(--fn-surface, #16161a);
}
@media (min-width: 720px) {
	.fn-list-sale-item {
		grid-template-columns: 220px minmax(0, 1fr) auto;
		align-items: center;
	}
}
.fn-list-sale-who {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.fn-list-sale-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.fn-list-sale-name {
	font-weight: 700;
	overflow-wrap: anywhere;
}
.fn-list-sale-plan {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	min-width: 0;
}
.fn-list-sale-plan-name {
	width: 100%;
	overflow-wrap: anywhere;
}
.fn-list-sale-list {
	color: var(--fn-muted, #9a9aa3);
}
.fn-list-sale-arrow {
	color: var(--fn-muted, #9a9aa3);
	margin: 0 4px;
}
.fn-list-sale-now {
	color: var(--fn-accent, #ff4d7d);
	font-size: 1.15rem;
}
.fn-list-sale-ends {
	color: var(--fn-muted, #9a9aa3);
	font-size: 0.85rem;
}
.fn-list-sale-link {
	justify-self: start;
	white-space: nowrap;
}

/* ジャンル一覧 */
.fn-list-genres {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.fn-list-genre {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--fn-border, #2a2a30);
	border-radius: 999px;
	background: var(--fn-surface, #16161a);
	color: var(--fn-text, #f2f2f4);
	text-decoration: none;
}
.fn-list-genre-name {
	font-weight: 700;
}
.fn-list-genre-count {
	color: var(--fn-muted, #9a9aa3);
	font-size: 0.8rem;
}

/* 案内ページ（入り方・運営者情報・お問い合わせ・規約） */
.fn-page-doc {
	max-width: 720px;
	line-height: 1.8;
}
.fn-page-doc a {
	color: var(--fn-accent, #ff4d7d);
}
.fn-page-h2,
.fn-page-step-title {
	margin: 28px 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
}
.fn-page-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fn-step;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fn-page-step {
	counter-increment: fn-step;
	padding: 16px 18px;
	border: 1px solid var(--fn-border, #2a2a30);
	border-radius: var(--fn-radius, 12px);
	background: var(--fn-surface, #16161a);
}
.fn-page-step-title {
	margin-top: 0;
}
.fn-page-step-title::before {
	content: counter(fn-step) ". ";
	color: var(--fn-accent, #ff4d7d);
}
.fn-page-step p {
	margin: 0;
}
.fn-page-note {
	margin: 16px 0 0;
	color: var(--fn-muted, #9a9aa3);
	font-size: 0.9rem;
}
.fn-page-table {
	display: grid;
	grid-template-columns: 6em minmax(0, 1fr);
	gap: 10px 16px;
	margin: 0;
}
.fn-page-table dt {
	color: var(--fn-muted, #9a9aa3);
}
.fn-page-table dd {
	margin: 0;
}
.fn-page-list,
.fn-page-terms {
	margin: 0;
	padding-left: 1.2em;
}
.fn-page-terms {
	list-style: none;
	padding-left: 0;
}
.fn-page-list li + li {
	margin-top: 6px;
}

/* スマホは2列にする（1列だと30位まで縦に長くなりすぎる・2026-11-04 統括） */
@media (max-width: 719px) {
	.fn-rank-list,
	.fn-list-pairs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.fn-rank-item {
		flex-direction: column;
		gap: 4px;
	}
	.fn-rank-no,
	.fn-rank-item--top .fn-rank-no {
		min-width: 0;
		padding-top: 0;
		text-align: left;
		font-size: 1.1rem;
	}
}

/* 使い方ガイド（2026-11-05 erotolk から移した4本） */
.fn-page-h3 {
	margin: 20px 0 6px;
	font-size: 1rem;
	font-weight: 700;
}
.fn-page-tablewrap {
	margin: 12px 0 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.fn-page-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	line-height: 1.6;
}
.fn-page-grid th,
.fn-page-grid td {
	padding: 8px 10px;
	border: 1px solid var(--fn-border, #2a2a30);
	text-align: left;
	vertical-align: top;
}
.fn-page-grid thead th {
	background: var(--fn-surface, #16161a);
	font-weight: 700;
}
@media (max-width: 719px) {
	.fn-page-grid {
		font-size: 0.85rem;
	}
	.fn-page-grid th,
	.fn-page-grid td {
		padding: 6px 7px;
	}
}
.fn-page-doc .fn-list-more {
	margin: 20px 0;
}