/*
 * 이야기지도 — 브리프 §6.2.
 *
 * 히트영역은 투명하다. 지명 글자가 배경 이미지에 인쇄돼 있어, 그 위에 마커를
 * 얹으면 인쇄된 글자와 어긋나 보인다. 대신 hover·focus·선택 때만 원을 드러낸다.
 */

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

/* ── 서브네비 ────────────────────────────────────────────────────── */
.aibaro-subnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}

.aibaro-subnav__tabs {
	display: flex;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-subnav__tab {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	color: var(--text-secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

/* 현재 탭은 색만이 아니라 굵기·밑줄로도 표시한다(PRD §15.1). */
.aibaro-subnav__tab.is-active {
	font-weight: 700;
	color: var(--brand);
	border-bottom-color: var(--brand);
}

.aibaro-subnav__search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0 var(--space-2) 0 var(--space-4);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
}

.aibaro-subnav__search input {
	min-height: var(--touch-min);
	border: 0;
	background: transparent;
}

.aibaro-subnav__submit {
	min-width: var(--touch-min);
	min-height: var(--touch-min);
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* ── 탐색 영역 ───────────────────────────────────────────────────── */
.aibaro-explorer {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.aibaro-map {
	position: relative;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.aibaro-map__svg {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
	cursor: grab;
}

.aibaro-map__svg:active {
	cursor: grabbing;
}

.aibaro-map__hit {
	fill: transparent;
	stroke: transparent;
	stroke-width: 3;
	cursor: pointer;
}

.aibaro-map__hit:hover {
	fill: rgb(47 110 158 / 12%);
}

.aibaro-map__hit:focus-visible {
	outline: none;
	fill: rgb(47 110 158 / 12%);
	stroke: var(--brand);
}

.aibaro-map__hit.is-selected {
	fill: rgb(47 110 158 / 20%);
	stroke: var(--brand);
}

.aibaro-map__zoom {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-2);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
}

.aibaro-map__zoom-btn {
	min-width: var(--touch-min);
	min-height: var(--touch-min);
	font-size: var(--font-size-lg);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.aibaro-map__zoom-level {
	min-width: 4ch;
	font-size: var(--font-size-sm);
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--text-muted);
}

/* ── 지역 패널 ───────────────────────────────────────────────────── */
.aibaro-region-panel {
	padding: var(--space-5);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.aibaro-region-panel__prompt {
	margin: 0;
	color: var(--text-muted);
}

.aibaro-region-panel__name {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-xl);
}

.aibaro-region-panel__counts {
	margin: 0 0 var(--space-4);
	color: var(--text-secondary);
}

.aibaro-region-panel__pending {
	color: var(--text-muted);
}

/* ── 지역 목록 (지도 대체 수단) ──────────────────────────────────── */
.aibaro-region-list {
	display: none;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.aibaro-region-list__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	padding: 0 var(--space-4);
	color: var(--text-body);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	cursor: pointer;
}

.aibaro-region-list__item.is-selected {
	font-weight: 700;
	color: var(--cta-primary-fg);
	background: var(--cta-primary-bg);
	border-color: var(--cta-primary-bg);
}

@media (max-width: 900px) {
	.aibaro-explorer {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.aibaro-subnav {
		flex-direction: column;
		align-items: stretch;
	}

	/* 좁은 화면에서는 지도 대신 목록으로 고르는 편이 낫다(브리프 §6.2). */
	.aibaro-region-list {
		display: flex;
	}
}

/* ── 마을 브라우저 (브리프 §6.3) ─────────────────────────────────── */
.aibaro-browser {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--space-4) var(--space-8);
}

.aibaro-browser__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	justify-content: space-between;
	padding: var(--space-4) 0;
}

.aibaro-browser__sort,
.aibaro-browser__view {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.aibaro-browser__label {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.aibaro-browser__options {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	padding: 0 var(--space-4);
	color: var(--text-body);
	text-decoration: none;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
}

/* 선택 상태는 색만이 아니라 굵기로도 표시한다. */
.aibaro-chip.is-active {
	font-weight: 700;
	color: var(--cta-primary-fg);
	background: var(--cta-primary-bg);
	border-color: var(--cta-primary-bg);
}

.aibaro-browser__body {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--space-6);
}

.aibaro-browser__regions ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-browser__region {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--touch-min);
	padding: 0 var(--space-3);
	color: var(--text-body);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.aibaro-browser__region.is-active {
	font-weight: 700;
	color: var(--brand);
	background: var(--color-blue-soft);
}

.aibaro-browser__count {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.aibaro-browser__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibaro-table-scroll {
	overflow-x: auto;
}

.aibaro-table {
	width: 100%;
	border-collapse: collapse;
}

.aibaro-table th,
.aibaro-table td {
	padding: var(--space-3);
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.aibaro-pagination {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.aibaro-pagination__status {
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}

/* ── 캐릭터 도감 (브리프 §6.4) ───────────────────────────────────── */
.aibaro-character-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-5);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--space-4) var(--space-8);
	list-style: none;
}

.aibaro-character-card {
	text-align: center;
}

.aibaro-character-card__name {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-md);
}

.aibaro-character-card__figure {
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--bg-subtle);
	border-radius: var(--radius-md);
}

.aibaro-character-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aibaro-character-card__placeholder {
	font-size: var(--font-size-3xl);
}

.aibaro-character-card__story {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

@media (max-width: 900px) {
	.aibaro-browser__body {
		grid-template-columns: 1fr;
	}

	.aibaro-browser__regions ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}
}