/*
 * 이야기 상세·캐릭터 상세 — 브리프 §6.4·§6.5.
 *
 * 본문 폭을 좁게 잡는다. 이야기 상세는 감상 전에 읽는 안내라 한 줄이 길면
 * 눈이 줄을 놓친다.
 */

.aibaro-main--narrow {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-8) var(--space-4);
}

.aibaro-story__world,
.aibaro-character__world {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-sm);
}

.aibaro-story__title,
.aibaro-character__name {
	margin: 0 0 var(--space-4);
}

/* 긴장 안내는 색만으로 알리지 않는다 — 아이콘과 굵은 글자를 함께 쓴다. */
.aibaro-story__tension {
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	color: var(--color-coral-deep);
	background: var(--color-coral-soft);
	border-radius: var(--radius-md);
}

.aibaro-story__meta {
	display: grid;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	background: var(--bg-subtle);
	border-radius: var(--radius-md);
}

.aibaro-story__meta > div {
	display: flex;
	gap: var(--space-4);
}

.aibaro-story__meta dt {
	flex: 0 0 7rem;
	font-weight: 700;
	color: var(--text-secondary);
}

.aibaro-story__meta dd {
	margin: 0;
}

.aibaro-story__heading {
	margin-top: var(--space-6);
}

.aibaro-story__characters,
.aibaro-character__relations,
.aibaro-character__stories {
	margin: 0 0 var(--space-5);
	padding-left: var(--space-5);
}

.aibaro-story__role,
.aibaro-character__relation-type {
	margin-left: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.aibaro-story__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin: var(--space-6) 0 0;
}

.aibaro-story__favorite {
	min-height: var(--touch-min);
	padding: 0 var(--space-4);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.aibaro-story__preview-note {
	margin: var(--space-4) 0 0;
	color: var(--text-muted);
}

.aibaro-character__badges {
	display: flex;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}

.aibaro-character__figure img {
	max-width: 320px;
	height: auto;
	border-radius: var(--radius-lg);
}

/* 대표 이미지 — 제목과 안내 사이. 본문 폭에 맞춘다. */
.aibaro-story__cover {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 var(--space-5);
	border-radius: var(--radius-lg);
}