/*
 * 出演者ページ（2026-09-29 boone 指示 v13）。
 *
 * **このファイルは出演者ページでしか読み込まない**（functions.php で切り分け）。
 * さらに指定はすべて .mtr-perf / .mtr-card--perf の中に閉じてあるので、
 * ほかの一覧・トップ・作品詳細のカードの見た目は変わらない。
 *
 * 色は catalog.css の変数をそのまま使う（新しい色は増やさない）。
 * 操作の強さ： FANZAで見る（金・主） ＞ 作品情報を見る（枠・補助） ＞ あとで見る（細い枠）
 */

/* ------------------------------------------------------------ 冒頭 */

/* 名前・掲載数・一覧への案内。画面の上を大きく占有しない */
.mtr-perf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0 0 10px;
	padding: 0 0 8px;
}
.mtr-perf .mtr-head__title { margin: 0; }
.mtr-perf__count {
	margin: 0;
	font-size: .8125rem;
	color: var(--mtr-sub);
}
.mtr-perf__count strong { font-size: .9375rem; color: var(--mtr-ink); }
.mtr-perf__kind {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 7px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	font-size: .6875rem;
	color: var(--mtr-sub);
}
.mtr-perf__jump { margin: 0; font-size: .75rem; }
.mtr-perf__jump a { color: var(--mtr-link); }

/* 冒頭の抜粋（発売済みの新しい作品／これから発売） */
.mtr-perf__sec { margin: 0 0 16px; }
.mtr-perf__h2 {
	margin: 0 0 8px;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--mtr-line);
	font-size: .9375rem;
	font-weight: 700;
	color: var(--mtr-ink);
}

/* ------------------------------------------------------ この出演者から探す */

.mtr-perf__search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mtr-perf__slabel {
	flex: 0 0 auto;
	font-size: .75rem;
	color: var(--mtr-sub);
}

/* ------------------------------------------------------------ 絞り込み */

.mtr-perf__filters { display: grid; gap: 12px; }
.mtr-perf__facet { margin: 0; }
.mtr-perf__flabel {
	margin: 0 0 6px;
	padding: 0 0 4px;
	border-bottom: 1px solid var(--mtr-line);
	font-size: .75rem;
	font-weight: 700;
	color: var(--mtr-ink);
}
.mtr-perf__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mtr-perf__opt {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 3px 9px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-bg);
	font-size: .75rem;
	line-height: 1.3;
	color: var(--mtr-ink);
	text-decoration: none;
}
.mtr-perf__opt:hover, .mtr-perf__opt:focus { border-color: var(--mtr-gold-dark); }
.mtr-perf__opt.is-on {
	border-color: var(--mtr-gold-dark);
	background: var(--mtr-gold-hi);
	font-weight: 700;
}
.mtr-perf__n { font-size: .6875rem; color: var(--mtr-sub); }
.mtr-perf__opt.is-on .mtr-perf__n { color: var(--mtr-ink); }

.mtr-perf__more { margin: 6px 0 0; }
.mtr-perf__more > summary {
	cursor: pointer;
	font-size: .75rem;
	color: var(--mtr-link);
}
.mtr-perf__more[open] > summary { margin-bottom: 6px; }

/* 選択中の条件と件数 */
.mtr-perf__bar .mtr-picked__count strong { font-size: 1rem; }

/* 条件に合うものが無いとき */
.mtr-perf__none {
	margin: 16px 0;
	padding: 18px;
	border: 1px dashed var(--mtr-line);
	border-radius: 8px;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--mtr-sub);
}
.mtr-perf__none p { margin: 0 0 10px; }
.mtr-perf__none p:last-child { margin-bottom: 0; }
.mtr-perf__none .mtr-go { display: inline-flex; min-height: 40px; padding: 6px 14px; font-size: .8125rem; }

/* ------------------------------------------------------ カードの操作の順番 */

/*
 * 画像の大きさと列数は共通のまま。ボタンは画像の下に縦に積む（画像に重ねない）。
 */
.mtr-card--perf .mtr-card__buy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 5px 0 0;
	padding: 5px 6px;
	border-radius: 6px;
	font-size: .8125rem;      /* 13px。文字は小さくしない */
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;  /* 狭い列でも文字を欠けさせない */
}
.mtr-card--perf .mtr-card__buynote {
	font-size: .625rem;
	font-weight: 400;
	opacity: .85;
}

/* 補助。金色にはしない（主ボタンと強さを変える） */
.mtr-card--perf .mtr-card__info--sub {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	margin: 4px 0 0;
	padding: 4px 6px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-bg);
	font-size: .75rem;
	line-height: 1.3;
	color: var(--mtr-link);
	text-align: center;
	text-decoration: none;
}
.mtr-card--perf .mtr-card__info--sub:hover,
.mtr-card--perf .mtr-card__info--sub:focus {
	border-color: var(--mtr-gold-dark);
	color: var(--mtr-link-hover);
}

/* いちばん弱い操作 */
.mtr-card--perf .mtr-card__save { margin-top: 4px; }

/* 公式リンクが無い作品。偽のリンクは出さず、状態だけ書く */
.mtr-card--perf .mtr-card__nolink {
	margin: 5px 0 0;
	padding: 5px 6px;
	border: 1px dashed var(--mtr-line);
	border-radius: 6px;
	font-size: .6875rem;
	line-height: 1.3;
	color: var(--mtr-sub);
	text-align: center;
}

/* ------------------------------------------------------------ 幅ごと */

/* スマホ。冒頭を詰めて、すぐ作品に届くようにする */
@media screen and (max-width: 599px) {
	.mtr-perf__head { gap: 4px 10px; margin-bottom: 8px; }
	.mtr-perf .mtr-head__title { font-size: 1.25rem; }
	.mtr-perf__search { gap: 6px; }
	.mtr-perf__slabel { flex: 1 1 100%; }
	.mtr-card--perf .mtr-card__buy { min-height: 44px; }      /* 指で押せる高さ */
	.mtr-card--perf .mtr-card__info--sub { min-height: 36px; }
}

@media (pointer: coarse) {
	.mtr-perf__opt { min-height: 38px; }
	.mtr-card--perf .mtr-card__buy { min-height: 44px; }
	.mtr-card--perf .mtr-card__info--sub { min-height: 36px; }
}

/* iPad縦・横でも、絞り込みの語が詰まりすぎないようにする */
@media screen and (min-width: 600px) {
	.mtr-perf__filters { gap: 14px; }
}