/* ============================================================
 * rinka-find.css — 「さがす・知る」ページの共通部品（2026-09-26）
 * できること / タグ / タイムライン / シリーズ / カード詳細 / お気に入り / けんさく / ガチャラインナップ
 * 読み込みは inc/fansite.php ⑧（この8ページだけ）。.rfd の中だけに効く。
 * 色はコレクション（rinka-collection.css の .rc-*）と同じパステル。
 * ========================================================== */

.rfd {
	--rfd-ink: #4a3540;
	--rfd-soft: #76606c;
	--rfd-rose: #e0588f;
	--rfd-rose-ink: #b83a72;
	--rfd-line: #f4d9e6;
	--rfd-lav: #c9a2ff;
	--rfd-card: #fff;
	--rfd-grad: linear-gradient(120deg, #ff8fbf, #c9a2ff 55%, #8fd6ff);
	--rfd-shadow: 0 10px 28px -14px rgba(184, 58, 114, .32);
	--rfd-tap: 44px;
	color: var(--rfd-ink);
}
.rfd *, .rfd *::before, .rfd *::after { box-sizing: border-box; }

/* アイコン（共通素材 96px webp） */
.rfd-ico { width: 28px; height: 28px; object-fit: contain; flex: none; display: inline-block; vertical-align: middle; }

/* 見出し（アイコン＋文字） */
.rfd-h {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; letter-spacing: .03em;
	color: var(--rfd-ink); line-height: 1.4;
}
.rfd-h .rfd-ico { width: 30px; height: 30px; }

/* 白い箱 */
.rfd-box {
	background: var(--rfd-card); border: 1px solid var(--rfd-line); border-radius: 22px;
	padding: 14px; box-shadow: var(--rfd-shadow);
}

/* 折りたたみ（くわしく） */
.rfd-more { border-radius: 16px; }
.rfd-more > summary {
	display: flex; align-items: center; gap: 8px; min-height: var(--rfd-tap);
	padding: 8px 14px; cursor: pointer; list-style: none; border-radius: 14px;
	font-weight: 800; font-size: .88rem; color: var(--rfd-rose-ink);
	-webkit-tap-highlight-color: transparent;
}
.rfd-more > summary::-webkit-details-marker { display: none; }
.rfd-more > summary::after {
	content: ''; width: 9px; height: 9px; margin-left: auto; flex: none;
	border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.rfd-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.rfd-more > summary:focus-visible { outline: 3px solid rgba(224, 88, 143, .55); outline-offset: 2px; }

/* もどるリンク（ページに1つ・押しやすい大きさ） */
.rfd-back { margin: 18px 0 8px; text-align: center; }
.rfd-back__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; min-width: 220px; padding: 10px 22px; border-radius: 999px;
	background: #fff; border: 1.5px solid #efc3d7; color: var(--rfd-rose-ink);
	font-weight: 800; font-size: .95rem; text-decoration: none;
	box-shadow: 0 6px 16px -10px rgba(184, 58, 114, .5);
}
.rfd-back__link:hover { background: #fff5f9; }
.rfd-back__link:focus-visible { outline: 3px solid rgba(224, 88, 143, .55); outline-offset: 3px; }
.rfd-back__arrow { font-size: 1.4rem; line-height: 1; margin-top: -2px; }

/* しぼりこみのチップ */
.rfd-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 0 12px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.rfd-chip {
	appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px;
	min-height: var(--rfd-tap); padding: 6px 14px 6px 8px; border-radius: 999px;
	border: 1px solid #efd3e1; background: #fff; color: var(--rfd-ink);
	font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.rfd-chip:not(:has(.rfd-ico)) { padding-left: 14px; }
.rfd-chip .rfd-ico { width: 26px; height: 26px; }
.rfd-chip b { font-size: .72rem; font-weight: 700; color: var(--rfd-soft); }
.rfd-chip.is-on, .rfd-chip[aria-pressed="true"] { background: var(--rfd-rose); border-color: var(--rfd-rose); color: #fff; }
.rfd-chip.is-on b, .rfd-chip[aria-pressed="true"] b { color: rgba(255, 255, 255, .85); }
.rfd-chip:focus-visible { outline: 3px solid rgba(224, 88, 143, .55); outline-offset: 2px; }

/* 絵のない時の見出し画像（アイコンをパステルの地に） */
.rfd-ph {
	position: relative; display: grid; place-items: center; width: 100%; height: 100%;
	background:
		radial-gradient(60% 60% at 30% 25%, rgba(255, 255, 255, .9), transparent 70%),
		linear-gradient(150deg, #ffe3ef, #efe4ff 60%, #e2f1ff);
}
.rfd-ph .rfd-ico { width: 44%; height: auto; max-width: 72px; aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(150, 60, 120, .18)); }

/* 空のとき */
.rfd-empty {
	display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
	padding: 22px 16px; border: 1px dashed #f0c6d9; border-radius: 22px; background: #fff;
	color: var(--rfd-soft); font-size: .9rem; line-height: 1.8;
}
.rfd-empty .rfd-ico { width: 56px; height: 56px; }
.rfd-empty p { margin: 0; }
.rfd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: var(--rfd-tap); padding: 8px 20px; border-radius: 999px; border: 0;
	background: var(--rfd-grad); color: #fff; font: inherit; font-weight: 800; font-size: .9rem;
	text-decoration: none; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(184, 58, 114, .7);
}
.rfd-btn .rfd-ico { width: 24px; height: 24px; }
.rfd-btn--ghost { background: #fff; color: var(--rfd-rose-ink); border: 1.5px solid #efc3d7; box-shadow: none; }
.rfd-btn:focus-visible { outline: 3px solid rgba(224, 88, 143, .55); outline-offset: 3px; }

/* rw26（デザイン刷新）の既定の影・動きがボタンに重なる所をおさえる */
body.rw26 .rfd .rfd-chip, body.rw26 .rfd .rfd-back__link { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.rfd *, .rfd *::before, .rfd *::after { transition: none !important; animation: none !important; }
}
.rfd [hidden] { display: none !important; }