/*
 * 「チェックした作品」の共通部分（全ページで読み込む）。
 * 2026-09-28 boone 指示 第10項。色は catalog.css の変数をそのまま使う。
 * パネルと保存一覧の体裁は、作品詳細以外でも使うのでここに置く。
 */

/* ------------------------------------------- 全ページ共通の入口 */

/*
 * PC・iPadはヘッダーの右、スマホはヘッダーのすぐ下。
 * 本文・画像・PR表示に重ならない場所に置き、パネルより前には出さない。
 * 絵記号だけにせず、必ず文字を出す。
 */
/*
 * ヘッダーの**ロゴと同じ行**の右側に置く（v10）。
 * JSが #header_top の中へ移し、ここで絶対配置にする。
 * 高さを持たないので、ヘッダーは元の高さのまま。ロゴや本文を押し下げない。
 *
 * v11：中央から**6px下げる**。ヘッダーの高さは増やさないので、
 * ボタンの高さを少し詰めて、下に余白が残るようにしている。
 */
#header_top { position: relative; }

.mtr-check {
	position: absolute;
	top: 50%;
	right: 56px;                 /* RSSの左に置く（RSSは右端に残す） */
	transform: translateY(calc(-50% + 6px));
	z-index: 20;
	line-height: 1;
}

/*
 * 淡い金色で塗る。動きは付けない（点滅・アニメーションなし）。
 * 文字・しおり・件数は1つのリンクの中に入っている。
 */
.mtr-check__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;            /* 6px下げてもヘッダーの下に余白が残る高さ */
	padding: 4px 11px;
	border: 1px solid var(--mtr-gold-dark, #8A6526);
	border-radius: 999px;
	background: var(--mtr-gold-hi, #E8CC8A);
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: var(--mtr-ink, #342B20);
}
/* 押せることが分かるよう、触れたときだけ淡い地色に入れ替える */
.mtr-check__btn:hover,
.mtr-check__btn:focus { background: var(--mtr-panel, #FFFDF8); }

/* しおり */
.mtr-check__mark {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--mtr-gold-dark, #8A6526);
}

/* 件数は小さなバッジ。0件でも同じ大きさで収まる */
.mtr-check__n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--mtr-gold-dark, #8A6526);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.mtr-check__short { display: none; }

/* 狭い画面では短い言い方にし、RSSが出ないぶん右端へ寄せる */
@media screen and (max-width: 767px) {
	.mtr-check { right: 12px; }
	.mtr-check__btn { min-height: 26px; padding: 4px 9px; font-size: 12px; gap: 5px; }
	.mtr-check__mark { width: 16px; height: 16px; }
	.mtr-check__n { min-width: 18px; height: 17px; font-size: 11px; }
	.mtr-check__long { display: none; }
	.mtr-check__short { display: inline; }
}

/* さらに狭いときは文字を少し詰める（文字は消さない） */
@media screen and (max-width: 359px) {
	.mtr-check__btn { font-size: 11px; padding: 3px 8px; }
}

/* パネルを開いている間は、入口を前に出さない（パネルの背景として扱う） */
body.mtr-panel-open .mtr-check { z-index: 1; }

/* ------------------------------------------------ 保存・履歴の入口 */

.mtr-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: .75rem;
	color: var(--mtr-sub);
}
.mtr-tools__btn {
	min-height: 36px;
	padding: 4px 12px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-panel);
	font-size: .75rem;
	color: var(--mtr-ink);
	cursor: pointer;
}
.mtr-tools__btn:hover, .mtr-tools__btn:focus { border-color: var(--mtr-gold-dark); }

/* -------------------------------------------------- ページ内のパネル */

.mtr-panel { position: fixed; inset: 0; z-index: 9999; }
.mtr-panel__back { position: absolute; inset: 0; background: rgba(52, 43, 32, .45); }

.mtr-panel__box {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	max-height: 88vh;
	overflow-y: auto;
	padding: 14px 16px 22px;
	border-radius: 14px 14px 0 0;
	background: var(--mtr-bg);
	box-shadow: 0 -6px 24px rgba(52, 43, 32, .22);
}

/* PC・iPadは読みやすい幅の横パネル */
@media screen and (min-width: 768px) {
	.mtr-panel__box {
		left: auto; top: 0; bottom: 0;
		width: min(460px, 92vw);
		max-height: none;
		border-radius: 0;
		padding: 18px 20px 26px;
		box-shadow: -6px 0 24px rgba(52, 43, 32, .22);
	}
}

.mtr-panel__x {
	float: right;
	min-height: 40px;
	padding: 5px 14px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-panel);
	font-size: .8125rem;
	color: var(--mtr-ink);
	cursor: pointer;
}
.mtr-panel__load { margin: 12px 0; font-size: .8125rem; color: var(--mtr-sub); }
body.mtr-panel-open { overflow: hidden; }

/*
 * パネルの本文は 14px・行間1.5 を出発点にする。
 * 読みにくさを、文字を小さくして解決しない（v9・shoheiレビュー）。
 */
.mtr-panel__box { font-size: 14px; line-height: 1.6; }

/* 長い内容でも「閉じる」に届くよう、上に貼り付けておく */
.mtr-panel__x { position: sticky; top: 0; z-index: 2; }

.mtr-dp__head { clear: both; padding-top: 6px; }
.mtr-dp__title { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; color: var(--mtr-ink); }

/* 画像の横は短い情報だけ。出演者・ジャンルは下の全幅へ置く */
.mtr-dp__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
.mtr-dp__visual img { display: block; width: 100%; height: auto; border-radius: 3px; }
.mtr-dp__pending {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 147 / 200; border: 1px dashed var(--mtr-line); border-radius: 3px;
	font-size: .8125rem; color: var(--mtr-sub);
}
.mtr-dp__facts { margin: 0; font-size: 13px; line-height: 1.5; }
.mtr-dp__row {
	display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 0 10px;
	padding: 5px 0; border-bottom: 1px solid var(--mtr-line);
}
.mtr-dp__row > dt { margin: 0; color: var(--mtr-sub); }
.mtr-dp__row > dd { margin: 0; color: var(--mtr-ink); overflow-wrap: anywhere; }

/* 全幅の欄（出演者・ジャンル） */
.mtr-dp__wide { margin: 14px 0 0; }
.mtr-dp__wide-h {
	margin: 0 0 6px; padding: 0 0 5px; border-bottom: 1px solid var(--mtr-line);
	font-size: 13px; color: var(--mtr-sub);
}
.mtr-dp__count { margin-left: 8px; font-weight: 400; }
.mtr-dp__none { margin: 0; font-size: 14px; }
.mtr-dp__tags {
	display: flex; flex-wrap: wrap; gap: 6px 12px;
	margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6;
}
.mtr-dp__tags > li { margin: 0; color: var(--mtr-ink); }
.mtr-dp__more { margin: 6px 0 0; font-size: 13px; color: var(--mtr-sub); }
.mtr-dp__more > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.mtr-dp__more > summary:hover { color: var(--mtr-accent); }
.mtr-dp__more .mtr-dp__tags { margin-top: 5px; }

.mtr-dp__cmp {
	margin: 16px 0 0; padding: 11px 13px; border: 1px solid var(--mtr-line);
	border-radius: 8px; background: var(--mtr-soft); font-size: 13px; line-height: 1.6;
}
.mtr-dp__cmp-note { margin: 0 0 8px; color: var(--mtr-sub); }
.mtr-dp__cmp-h { margin: 8px 0 3px; font-weight: 700; color: var(--mtr-ink); }
.mtr-dp__cmp ul { margin: 0; padding-left: 1.2em; }
.mtr-dp__cmp li { margin: 3px 0; }

/* 一覧から開いたときの「戻る」 */
.mtr-panel__back-to { margin: 0 0 10px; }
.mtr-panel__back-to > button {
	min-height: 40px; padding: 5px 14px; border: 1px solid var(--mtr-line);
	border-radius: 999px; background: var(--mtr-panel); font-size: 13px;
	color: var(--mtr-link); cursor: pointer;
}
.mtr-panel__msg { margin: 10px 0 0; min-height: 1.4em; font-size: 13px; color: var(--mtr-gold-dark); }

.mtr-dp__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.mtr-dp__go {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
	border: 1px solid var(--mtr-gold-dark); border-radius: 999px;
	font-size: .8125rem; text-decoration: none; color: var(--mtr-ink);
}
.mtr-dp__buy {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 44px; padding: 6px 20px; border-radius: 999px;
	background: linear-gradient(180deg, var(--mtr-gold-hi), var(--mtr-gold) 55%, var(--mtr-gold-hi));
	border: 1px solid var(--mtr-gold-dark);
	font-size: .8125rem; font-weight: 700; text-decoration: none; color: var(--mtr-ink);
}
.mtr-dp__buy > span { font-size: .625rem; font-weight: 400; }
.mtr-dp__pr { margin: 8px 0 0; font-size: .6875rem; color: var(--mtr-sub); }
.mtr-dp__pr > b {
	display: inline-block; margin-right: 5px; padding: 1px 6px; border-radius: 3px;
	background: var(--mtr-gold-dark); color: #fff; font-size: .625rem;
}

/* ---------------------------------------------- 保存した作品の一覧 */

.mtr-saved__list { margin: 10px 0 0; padding: 0; list-style: none; }
.mtr-saved__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mtr-line); }
.mtr-saved__thumb { display: block; line-height: 0; }
.mtr-saved__thumb img { width: 100%; height: auto; border-radius: 3px; }
.mtr-saved__thumb--pending { aspect-ratio: 147 / 200; border: 1px dashed var(--mtr-line); border-radius: 3px; }
.mtr-saved__body { min-width: 0; }
.mtr-saved__title { display: block; font-size: 14px; line-height: 1.5; color: var(--mtr-ink); }
.mtr-saved__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
/* v12：見た目は共通の .mtr-go（catalog.css）。ここは大きさだけ */
.mtr-saved__look { min-height: 34px; padding: 4px 11px; font-size: 13px; }

/* 作品名も作品情報ページへのリンク */
.mtr-saved__name { color: inherit; text-decoration: none; }
.mtr-saved__name:hover, .mtr-saved__name:focus { color: var(--mtr-link-hover); text-decoration: underline; }
.mtr-saved__more-wrap { margin: 12px 0 0; text-align: center; }
.mtr-saved__more-wrap > button {
	min-height: 40px; padding: 6px 20px; border: 1px solid var(--mtr-gold-dark);
	border-radius: 999px; background: var(--mtr-bg); font-size: 13px; color: var(--mtr-ink); cursor: pointer;
}
.mtr-line__none { margin: 0; font-size: .8125rem; color: var(--mtr-sub); }
.mtr-saved__x, .mtr-saved__all {
	min-height: 34px; padding: 3px 11px; border: 1px solid var(--mtr-line); border-radius: 999px;
	background: var(--mtr-bg); font-size: .75rem; color: var(--mtr-link); cursor: pointer;
}
.mtr-saved__empty, .mtr-saved__help { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--mtr-sub); }
.mtr-saved__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.mtr-saved__stop { font-size: .75rem; color: var(--mtr-sub); }


/* --------------------------------------- 保存（チェック）ボタン・共通 */

/*
 * v10：作品詳細だけで読み込む discover.css に置いていたため、
 * /saved/ やそこで開くパネルでCSSが当たらず、
 * 「✓ チェック済み」と「あとで見る」が同時に見えていた。**ここ1か所**に置く。
 */
.mtr-save {
	min-height: 34px;
	padding: 3px 10px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-bg);
	font-size: .75rem;
	color: var(--mtr-sub);
	cursor: pointer;
}
.mtr-save.is-on { border-color: var(--mtr-gold-dark); background: var(--mtr-gold-hi); color: var(--mtr-ink); font-weight: 700; }
.mtr-save .mtr-save__on { display: none; }
.mtr-save.is-on .mtr-save__on { display: inline; }
.mtr-save.is-on .mtr-save__off { display: none; }
.mtr-save--wide { min-height: 44px; padding: 8px 20px; font-size: .8125rem; }

/* 指で押す機器では高さを確保する（詳細ページ専用CSSに頼らない） */
@media (pointer: coarse) {
	.mtr-save,
	.mtr-saved__x,
	.mtr-saved__look { min-height: 40px; }
}
@media screen and (max-width: 767px) {
	.mtr-save { min-height: 40px; }
}

/* ------------------------------------------- 専用一覧 /saved/ */

.mtr-saved-page .mtr-head__note { margin: 6px 0 0; font-size: 13px; color: var(--mtr-sub); }
.mtr-savedp__pr { margin: 0 0 12px; font-size: 12px; color: var(--mtr-sub); }
.mtr-savedp__pr > b {
	display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 3px;
	background: var(--mtr-gold-dark); color: #fff; font-size: 11px;
}

.mtr-savedp__state,
.mtr-savedp__err { margin: 12px 0; font-size: 14px; line-height: 1.6; color: var(--mtr-sub); }
.mtr-savedp__err { color: var(--mtr-gold-dark); }

/*
 * カードは幅150px前後で、画面が広いほど横に増える。
 * **画像は拡大しない。** 枠は140x200で、元画像がそれより小さければ小さいまま中央に置く。
 * 少ない件数でもカードが伸びないよう、列幅は固定にして左から詰める。
 */
.mtr-savedp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 150px);
	justify-content: start;
	gap: 18px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media screen and (min-width: 600px) {
	.mtr-savedp__grid { grid-template-columns: repeat(auto-fill, 160px); gap: 20px 16px; }
}

/* 一覧ページのカード */
.mtr-savedp__grid .mtr-saved__item {
	display: flex;
	flex-direction: column;
	padding: 0;
	border-bottom: 0;
}

/*
 * 画像の枠。中身が無くても、読み込めなくても**同じ大きさ**なので行の高さが変わらない。
 * 画像は切り抜かず、縦横比のまま中央に置く（文字は重ねない）。
 */
.mtr-savedp__grid .mtr-saved__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	border-radius: 3px;
	background: var(--mtr-soft);
	overflow: hidden;
}
.mtr-savedp__grid .mtr-saved__thumb img {
	/* width を指定しない＝元の大きさより大きくならない */
	width: auto;
	height: auto;
	max-width: 140px;
	max-height: 200px;
	border-radius: 3px;
}
.mtr-savedp__grid .mtr-saved__thumb--pending {
	border: 1px dashed var(--mtr-line);
	font-size: 12px;
	color: var(--mtr-sub);
	text-align: center;
	padding: 4px;
}

.mtr-savedp__grid .mtr-saved__body { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 7px; }
.mtr-savedp__grid .mtr-saved__title {
	/* 2行までで止める。長い作品名でボタンの位置がずれない。全文はパネルと詳細ページで読める */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
	min-height: 2.9em;
}
/*
 * 出演者は**必ず1行**。大人数の作品で行が高くなり、同じ行のカードまで
 * 引き伸ばされるのを防ぐ（全員はパネルと詳細ページで読める）。
 */
.mtr-savedp__grid .mtr-saved__cast {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 1.4em;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mtr-sub);
}
.mtr-savedp__grid .mtr-saved__date { display: block; margin-top: 2px; font-size: 12px; color: var(--mtr-sub); }

/* 操作は小さくまとめる。どのカードも同じ高さになるようにする */
.mtr-savedp__grid .mtr-saved__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: auto;
	padding-top: 8px;
	font-size: 12px;
}
/* v12：小さなカードでは、主ボタンを1行使って先に見せ、解除は下に小さく置く */
.mtr-savedp__grid .mtr-saved__acts .mtr-saved__look {
	flex: 1 1 100%;
	min-height: 32px;
	padding: 4px 8px;
	font-size: 12px;
}
.mtr-savedp__grid .mtr-saved__acts .mtr-saved__x {
	min-height: 30px;
	padding: 3px 9px;
	font-size: 12px;
}
.mtr-savedp__grid .mtr-saved__acts > a { font-size: 12px; }
.mtr-savedp__grid .mtr-saved__mark {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	color: var(--mtr-gold-dark);
	font-weight: 700;
}

.mtr-savedp__empty { margin: 18px 0; font-size: 14px; line-height: 1.8; color: var(--mtr-sub); }
.mtr-savedp__find {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px;
	border: 1px solid var(--mtr-gold-dark); border-radius: 999px;
	font-size: 14px; text-decoration: none; color: var(--mtr-ink);
}
.mtr-savedp__more-wrap { margin: 16px 0 0; text-align: center; }
.mtr-savedp__more-wrap > button {
	min-height: 44px; padding: 8px 22px; border: 1px solid var(--mtr-gold-dark);
	border-radius: 999px; background: var(--mtr-bg); font-size: 14px; color: var(--mtr-ink); cursor: pointer;
}
.mtr-savedp__foot { margin: 20px 0 0; }
.mtr-saved__page { margin-left: 10px; font-size: 13px; }

/* ------------------------------------- 第9項：左の作品情報の追従 */

/*
 * 2列のときだけ、左の作品情報をスクロールに貼り付ける。
 * 付け外しはJSが判定する（左が画面に収まるときだけ is-stuck を付ける）。
 * sticky は .mtr-work__layout の中で止まるので、下の「発売日の前後」や
 * フッターには重ならない。
 */
@media screen and (min-width: 1024px) {
	/* 箱は枠の高さまで伸ばし、**中身の箱を貼り付ける**（確実に止まる形） */
	.mtr-work__main.is-stuck { align-self: stretch; }
	.mtr-work__main.is-stuck > .mtr-work__stick {
		position: sticky;
		top: var(--mtr-stick-top, 16px);
	}
}

/* ------------------------------------------ 作品カードのチェック（v11） */

/*
 * カードの下に置く。**画像には重ねない**ので、画像の大きさと列数は変わらない。
 * 未選択は控えめ（地色・細い線）、選択後は淡い金色（.is-on は共通の指定）。
 * 狭いカードでも文字が折り返して収まるようにする。
 */
.mtr-card__save {
	margin: 3px 0 0;
	padding: 0 2px;
	display: flex;
}

.mtr-card__save .mtr-save {
	flex: 1 1 auto;
	justify-content: center;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 6px;
	font-size: .6875rem;          /* 11px。狭い列でも文字が切れない */
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 指で押す機器と狭い画面では高さを確保する */
@media screen and (max-width: 767px) {
	.mtr-card__save .mtr-save { min-height: 36px; }
}
@media (pointer: coarse) {
	.mtr-card__save .mtr-save { min-height: 36px; }
}

/* 保存できなかったときの知らせ（押した場所に出す） */
.mtr-save__msg {
	display: block;
	width: 100%;
	margin: 3px 0 0;
	font-size: .6875rem;
	line-height: 1.4;
	color: var(--mtr-gold-dark, #8A6526);
	white-space: normal;
}
.mtr-card__save { flex-wrap: wrap; }


/* ------------------------------------------ /saved/ のしぼり込み（v12） */

/*
 * チェックした作品の中だけを探す・絞る・並べ替える操作欄。
 * 小さなカードの上に**コンパクトに**置く。金色の主ボタンとは強さを変える。
 */
.mtr-sf {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid var(--mtr-line);
	border-radius: 8px;
	background: var(--mtr-panel, #FBF7EF);
}
.mtr-sf__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.mtr-sf__line:last-of-type { margin-bottom: 0; }
.mtr-sf__lab {
	flex: 0 0 auto;
	min-width: 9.5em;
	font-size: 12px;
	color: var(--mtr-sub);
}
.mtr-sf__q {
	flex: 1 1 200px;
	min-width: 0;
	min-height: 38px;
	padding: 6px 10px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-field, #FFFDF8);
	font-size: 14px;            /* スマホで勝手に拡大されない大きさ */
	color: var(--mtr-ink);
}
.mtr-sf__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.mtr-sf__opt {
	min-height: 34px;
	padding: 4px 12px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-bg);
	font-size: 12px;
	color: var(--mtr-ink);
	cursor: pointer;
}
.mtr-sf__opt:hover, .mtr-sf__opt:focus { border-color: var(--mtr-gold-dark); }
.mtr-sf__opt.is-on {
	border-color: var(--mtr-gold-dark);
	background: var(--mtr-gold-hi);
	font-weight: 700;
}
.mtr-sf__sort {
	flex: 1 1 200px;
	min-width: 0;
	min-height: 38px;
	padding: 6px 8px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-field, #FFFDF8);
	font-size: 14px;
	color: var(--mtr-ink);
}
.mtr-sf__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--mtr-line);
}
.mtr-sf__count { font-size: 12px; color: var(--mtr-sub); }
.mtr-sf__clear {
	min-height: 32px;
	padding: 3px 11px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-bg);
	font-size: 12px;
	color: var(--mtr-link);
	cursor: pointer;
}
.mtr-sf__clear:hover, .mtr-sf__clear:focus { border-color: var(--mtr-gold-dark); color: var(--mtr-link-hover); }

/* 条件に合うものが無いとき。チェックは外さない */
.mtr-savedp__none {
	margin: 16px 0;
	padding: 16px;
	border: 1px dashed var(--mtr-line);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--mtr-sub);
}
.mtr-savedp__none p { margin: 0 0 8px; }
.mtr-savedp__none p:last-child { margin-bottom: 0; }

/* 指で押す機器では、操作欄も高さを確保する（文字は小さくしない） */
@media (pointer: coarse) {
	.mtr-sf__opt, .mtr-sf__clear { min-height: 40px; }
	.mtr-sf__q, .mtr-sf__sort { min-height: 42px; }
}
/*
 * 狭い画面では操作欄を詰める。カードが画面から押し出されないようにする。
 * 探す欄だけ見出しを上に置き（文字が長いため）、区分と並べ替えは横に並べる。
 */
@media screen and (max-width: 767px) {
	.mtr-sf { padding: 8px 10px; }
	.mtr-sf__line { gap: 5px; margin-bottom: 7px; }
	.mtr-sf__lab { min-width: 4.8em; font-size: 11px; line-height: 1.2; }
	.mtr-sf__line:first-of-type .mtr-sf__lab { min-width: 100%; }
	.mtr-sf__opt { padding: 4px 10px; }
	.mtr-sf__foot { margin-top: 7px; padding-top: 7px; }
}

/* ===================================================================
 * チェックした作品をくらべる（2026-10-03 追加）
 * 広い画面は表、せまい画面は**項目ごとに各作品を縦に並べる**（横に流さない）。
 * =================================================================== */
.mtr-cmp {
	margin: 0 0 20px;
	padding: 14px 16px 12px;
	border: 1px solid var(--mtr-line, #E7DCC7);
	border-radius: 12px;
	background: var(--mtr-bg-soft, #F3EBDD);
}
.mtr-cmp__h { margin: 0 0 6px; font-size: 1.0625rem; line-height: 1.4; font-weight: 700; }
.mtr-cmp__lead { margin: 0 0 8px; font-size: .8125rem; line-height: 1.7; }
.mtr-cmp__state { margin: 0 0 10px; font-size: .8125rem; line-height: 1.6; color: var(--mtr-sub, #756B5B); }
.mtr-cmp__note { margin: 10px 0 0; font-size: .75rem; line-height: 1.7; color: var(--mtr-sub, #756B5B); }

/* カードに足す「くらべる」の選択 */
.mtr-cmp__pick {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 0 12px; margin: 6px 0 0;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .8125rem; font-weight: 600;
	cursor: pointer; box-sizing: border-box;
}
.mtr-cmp__cb { width: 18px; height: 18px; margin: 0; }

/* 広い画面：作品が列 */
.mtr-cmp__table {
	width: 100%; border-collapse: collapse; background: #fff;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
	overflow: hidden; font-size: .8125rem; line-height: 1.6;
}
.mtr-cmp__table th, .mtr-cmp__table td {
	padding: 8px 10px; border-top: 1px solid var(--mtr-line, #E7DCC7);
	text-align: left; vertical-align: top; box-sizing: border-box;
}
.mtr-cmp__table thead th { border-top: 0; background: var(--mtr-bg-soft, #F3EBDD); }
.mtr-cmp__table tbody th { width: 7em; white-space: nowrap; font-weight: 600; }
.mtr-cmp__title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.mtr-cmp__cid {
	display: block; margin-top: 3px; font-size: .6875rem; font-weight: 400;
	color: var(--mtr-sub, #756B5B); overflow-wrap: anywhere;
}
.mtr-cmp__cid a { color: inherit; }
/* 公式画像は**元の大きさを超えて引き伸ばさない** */
.mtr-cmp__img {
	display: block; width: auto; height: auto;
	max-width: 100%; max-height: 150px; margin: 0 0 6px;
	object-fit: contain;
}
.mtr-cmp__noimg {
	display: block; margin: 0 0 6px; font-size: .75rem;
	color: var(--mtr-sub, #756B5B);
}
.mtr-cmp__stack { display: none; }
.mtr-cmp__badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; margin-right: 6px;
	border-radius: 50%; background: #C9B189; color: #fff;
	font-size: .6875rem; font-weight: 700; flex: 0 0 auto;
}

@media (max-width: 767px) {
	.mtr-cmp__table { display: none; }
	.mtr-cmp__stack { display: block; }
	.mtr-cmp__heads { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
	/*
	 * 見出しは「番号・画像・文字」の3列。
	 * flex のままだと題名と品番が別々の列になり、**品番が縦に潰れる**。
	 * 文字は3列目にまとめ、残りの幅をすべて使わせる。
	 */
	.mtr-cmp__head {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: start; gap: 8px;
		padding: 8px 10px; background: #fff;
		border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
	}
	.mtr-cmp__head .mtr-cmp__badge { margin: 0; }
	.mtr-cmp__head .mtr-cmp__img { max-height: 72px; max-width: 54px; margin: 0; }
	.mtr-cmp__head .mtr-cmp__title { grid-column: 3; font-size: .8125rem; }
	.mtr-cmp__head .mtr-cmp__cid { grid-column: 3; }
	.mtr-cmp__row {
		margin: 0 0 10px; padding: 8px 10px; background: #fff;
		border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
	}
	.mtr-cmp__rowh {
		margin: 0 0 6px; font-size: .75rem; font-weight: 700;
		color: var(--mtr-sub, #756B5B);
	}
	.mtr-cmp__row dl { margin: 0; }
	.mtr-cmp__cell { display: flex; gap: 8px; padding: 3px 0; font-size: .8125rem; line-height: 1.6; }
	.mtr-cmp__cell dt { margin: 0; flex: 0 0 auto; }
	.mtr-cmp__cell dd { margin: 0; overflow-wrap: anywhere; }
}

/* 出演者が多いときの折りたたみ（2026-10-03 追加）。全員は開閉の中に残す */
.mtr-cmp__castHead { display: block; }
.mtr-cmp__castFold { margin-top: 2px; }
.mtr-cmp__castFold > summary {
	display: inline-block; min-height: 32px; padding: 6px 0;
	font-size: .75rem; color: var(--mtr-sub, #756B5B);
	cursor: pointer; list-style: none;
}
.mtr-cmp__castFold > summary::-webkit-details-marker { display: none; }
.mtr-cmp__castFold > summary::before { content: '▸ '; }
.mtr-cmp__castFold[open] > summary::before { content: '▾ '; }
.mtr-cmp__castAll { display: block; }