/* ============================================================
 * rinka-stories.css — りんかストーリー（/stories/）の章カード（2026-09-26・追加のみ）
 * ・読み込みは inc/fansite.php（ストーリーページだけ・rinka-world-2026.css のあと）。
 * ・解放の判定・保存（rinka_story_progress）は rinka-stories.js のまま。ここは見た目だけ。
 * ・🔒📖✨🔽⭐ などの絵文字は JS から外し、しるしはここで共通アイコン（assets/img/ui/*.webp）を出す。
 * ========================================================== */

#rinka-stories-app {
	--st-ink: #4a3540;
	--st-ink-soft: #6a5260;
	--st-rose: #b03a6e;
	--st-card: #fff;
	--st-line: #f1dbe6;
}

/* ---------- 進みぐあい ---------- */
#rinka-stories-app .rinka-fs-stories__status {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 4px 12px;
	padding: 14px 18px;
	border-radius: 22px;
	background: linear-gradient(135deg, #fff 0%, #fff4f9 100%);
	box-shadow: 0 0 0 1px var(--st-line), 0 12px 26px -18px rgba(184, 58, 114, .45);
	text-align: left;
}
#rinka-stories-app .rinka-fs-stories__status::before {
	content: '';
	grid-row: 1 / span 2;
	width: 46px; height: 46px;
	background: url("../img/ui/story.webp") center / contain no-repeat;
	filter: drop-shadow(0 3px 4px rgba(150, 60, 110, .22));
}
#rinka-stories-app .rinka-fs-stories__status-label { color: var(--st-ink); font-weight: 900; font-size: .98rem; }
#rinka-stories-app .rinka-fs-stories__bar { margin-top: 2px; height: 12px; background: #f6e4ee; box-shadow: inset 0 1px 2px rgba(150, 60, 110, .12); }
#rinka-stories-app .rinka-fs-stories__bar-fill { background: linear-gradient(90deg, #ff8fbf, #c9a2ff); border-radius: 999px; }

/* ---------- 飛ぶボタン・ページ送り ---------- */
#rinka-stories-app .rinka-fs-stories__jump {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	background: linear-gradient(120deg, #ff8fbf 0%, #e0588f 60%, #b77bff 100%);
}
#rinka-stories-app .rinka-fs-stories__jump::before {
	content: '';
	width: 28px; height: 28px;
	background: url("../img/ui/sparkle.webp") center / contain no-repeat;
}
#rinka-stories-app .rinka-fs-stories__jump::after {
	content: '';
	width: 9px; height: 9px;
	margin-left: 2px;
	border-top: 2.5px solid #fff;
	border-right: 2.5px solid #fff;
	transform: rotate(45deg);
}
#rinka-stories-app .rinka-fs-stories__pager-btn,
#rinka-stories-app .rinka-fs-stories__pager-num { min-height: 44px; min-width: 44px; border-radius: 14px; }

/* ---------- 章カード ---------- */
#rinka-stories-app .rinka-fs-stories__list { gap: 16px; }
#rinka-stories-app .rinka-fs-story {
	position: relative;
	padding: 16px 16px 16px;
	border: 0;
	border-radius: 24px;
	background: var(--st-card);
	box-shadow: 0 0 0 1px var(--st-line), 0 14px 30px -20px rgba(184, 58, 114, .5);
	overflow: hidden;
}
#rinka-stories-app .rinka-fs-story.is-unlocked::before {
	/* 解放ずみ＝上にピンク〜ラベンダーのリボン */
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 4px;
	background: linear-gradient(90deg, #ff8fbf, #c9a2ff 60%, #8fd6ff);
}
#rinka-stories-app .rinka-fs-story.is-read { box-shadow: 0 0 0 1.5px #f3b6d0, 0 14px 30px -20px rgba(184, 58, 114, .5); }

/* 章番号：丸いチップ */
#rinka-stories-app .rinka-fs-story__no {
	gap: 8px;
	margin: 0 0 6px;
	font-size: .74rem;
	letter-spacing: .06em;
	color: var(--st-rose);
}
#rinka-stories-app .rinka-fs-story__rarity {
	gap: 4px;
	padding: 2px 10px 2px 4px;
	font-size: .7rem;
	line-height: 1.55;
}
#rinka-stories-app .rinka-fs-story__rarity::before {
	content: '';
	width: 18px; height: 18px;
	background: url("../img/ui/sparkle.webp") center / contain no-repeat;
}
#rinka-stories-app .rinka-fs-story__rarity--ssr::before { background-image: url("../img/ui/crown.webp"); }
#rinka-stories-app .rinka-fs-story__title { color: var(--st-ink); font-size: 1.12rem; line-height: 1.45; margin: 0 0 6px; }
#rinka-stories-app .rinka-fs-story__summary { color: var(--st-ink-soft); font-size: .86rem; }
#rinka-stories-app .rinka-fs-story__body { color: var(--st-ink); }

/* 挿絵：角を大きく・ぜんぶ見るボタンを押しやすく */
#rinka-stories-app .rinka-fs-story__art { border-radius: 18px; border: 0; box-shadow: 0 10px 24px -12px rgba(120, 40, 90, .45); }
#rinka-stories-app .rinka-fs-story__art-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 18px;
	font-size: .84rem;
	background: rgba(74, 38, 70, .82);
}
#rinka-stories-app .rinka-fs-story__art-toggle::after {
	content: '';
	width: 8px; height: 8px;
	margin-top: -4px;
	border-right: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
#rinka-stories-app .rinka-fs-story__art.is-open .rinka-fs-story__art-toggle::after { transform: rotate(-135deg); margin-top: 4px; }

/* 読んだ・既読 */
#rinka-stories-app .rinka-fs-story .rinka-fs-btn[data-action="mark-read"] {
	min-height: 46px;
	margin-top: 12px;
	padding: 10px 22px 10px 14px;
	background: linear-gradient(135deg, #ff8fbf, #e0588f);
	box-shadow: 0 8px 18px -8px rgba(224, 88, 143, .7);
}
#rinka-stories-app .rinka-fs-story .rinka-fs-btn[data-action="mark-read"]::before {
	content: '';
	width: 24px; height: 24px;
	background: url("../img/ui/check.webp") center / contain no-repeat;
}
#rinka-stories-app .rinka-fs-story__read-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 4px 14px 4px 6px;
	border-radius: 999px;
	background: #eef8f2;
	color: #2f6b43;
	font-size: .82rem;
	font-weight: 800;
}
#rinka-stories-app .rinka-fs-story__read-badge::before {
	content: '';
	width: 22px; height: 22px;
	background: url("../img/ui/check.webp") center / contain no-repeat;
}

/* まだの章：すりガラス＋大きなかぎ */
#rinka-stories-app .rinka-fs-story.is-locked {
	padding-left: 84px;
	min-height: 112px;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .5) 14px 28px),
		linear-gradient(135deg, #fbf1f7 0%, #f5eefc 100%);
	box-shadow: 0 0 0 1px #eedcea, inset 0 1px 0 #fff;
}
#rinka-stories-app .rinka-fs-story.is-locked::after {
	content: '';
	position: absolute;
	left: 16px; top: 18px;
	width: 54px; height: 54px;
	border-radius: 18px;
	background: #fff url("../img/ui/lock.webp") center / 40px 40px no-repeat;
	box-shadow: 0 6px 14px -6px rgba(120, 60, 140, .45);
}
#rinka-stories-app .rinka-fs-story.is-locked .rinka-fs-story__title { color: #5a4552; }
#rinka-stories-app .rinka-fs-story.is-locked .rinka-fs-story__body.is-blurred { display: none; }
#rinka-stories-app .rinka-fs-story__lock {
	display: inline-flex;
	align-items: center;
	margin: 6px 0 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #f0c9da;
	color: var(--st-rose);
	font-size: .8rem;
	line-height: 1.5;
}

/* このさき… */
#rinka-stories-app .rinka-fs-stories__more {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	color: var(--st-ink-soft);
	border-radius: 20px;
	background: #fff;
	border: 1.5px dashed #f0c9da;
}
#rinka-stories-app .rinka-fs-stories__more::before {
	content: '';
	flex: none;
	width: 36px; height: 36px;
	background: url("../img/ui/story.webp") center / contain no-repeat;
}

@media (max-width: 400px) {
	#rinka-stories-app .rinka-fs-story { padding: 14px 14px; border-radius: 20px; }
	#rinka-stories-app .rinka-fs-story.is-locked { padding-left: 76px; }
	#rinka-stories-app .rinka-fs-story.is-locked::after { left: 12px; width: 50px; height: 50px; }
}

@media (prefers-color-scheme: dark) {
	#rinka-stories-app { --st-ink: #f3e6ee; --st-ink-soft: #d2bfcb; --st-rose: #ff9fc8; --st-card: #2b2330; --st-line: rgba(255, 255, 255, .12); }
	#rinka-stories-app .rinka-fs-stories__status { background: rgba(255, 255, 255, .05); }
	#rinka-stories-app .rinka-fs-story.is-locked { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
	#rinka-stories-app .rinka-fs-story.is-locked .rinka-fs-story__title { color: #e6d6df; }
	#rinka-stories-app .rinka-fs-story__lock,
	#rinka-stories-app .rinka-fs-stories__more { background: rgba(255, 255, 255, .06); }
}
@media (prefers-reduced-motion: reduce) {
	#rinka-stories-app .rinka-fs-story__art-toggle::after { transition: none; }
}