/*
 * 그림책 뷰어 — 브리프 §6.7.
 *
 * 캔버스 비율은 **첫 쪽 그림에서 서버가 정해 준다**(없으면 16:9). 어느 쪽이든
 * 그림이 늦게 와도 자리가 흔들리지 않는다(CLS 방지 — 브리프가 16:9로 고정한 뜻).
 * 넘김은 scroll-snap이 담당한다 — JS는 어느 쪽인지 알려 주기만 한다.
 */

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

/*
 * **무대에는 배경도 둥근 모서리도 두지 않는다.**
 *
 * 예전에는 검은 판 위에 그림을 얹고 모서리를 둥글렸다. 그림이 무대를 꼭 맞게
 * 채우지 못하는 순간마다 그 판이 검은 테로 드러나 그림책 감상을 방해했다.
 * 남는 자리는 페이지 바탕이 그대로 이어진다 — 테가 아니라 여백이 된다.
 */
.aibaro-viewer__stage {
	overflow: hidden;
}

.aibaro-viewer__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.aibaro-viewer__track::-webkit-scrollbar {
	display: none;
}

.aibaro-page {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	/*
	 * 그림 비율을 서버가 알려 주면 그것을 쓰고, 없으면 16:9로 둔다
	 * (브리프 §6.7). 어느 쪽이든 **그림이 오기 전에 자리가 정해진다.**
	 */
	aspect-ratio: var( --aibaro-stage-ratio, 16 / 9 );
	display: grid;
	grid-template-rows: 1fr auto;
}

.aibaro-page__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

/*
 * **`max-*`만 주면 그림이 상자를 채우지 않는다.**
 *
 * 그것은 위쪽 한계일 뿐이라, 원본이 상자보다 작으면 원본 크기 그대로 놓인다.
 * 918px 그림이 1068px 무대에 놓여 좌우로 75px씩 검은 테가 생겼고, 유아가
 * 보는 화면에서 그림이 그만큼 작아졌다.
 *
 * 폭·높이를 채우고 `contain`으로 비율을 지킨다. 남는 테는 그림과 무대의
 * 비율 차이만큼이고, `cover`로 없애지는 않는다 — 그림책은 잘리면 안 된다.
 */
.aibaro-page__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * 그림 아래 글칸은 밝은 바탕이다. 검은 바탕을 쓰면 그림 밑에 검은 띠가 생겨
 * 없앤 테가 다시 돌아온다. 그림 **위에** 글을 얹는 `full_bleed`에서만 어두운
 * 막을 깐다 — 거기서는 글이 읽히려면 필요하다.
 */
.aibaro-page__text {
	padding: var(--space-3) var(--space-5);
	color: var(--text-body);
	background: var(--bg-surface);
}

.aibaro-page__narration {
	margin: 0;
	font-size: var(--font-size-md);
}

.aibaro-page__caption {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

/* 레이아웃 4종 (브리프 §6.7) */
.aibaro-page--text_only .aibaro-page__figure {
	display: none;
}

.aibaro-page--text_only {
	grid-template-rows: 1fr;
	place-items: center;
}

.aibaro-page--image_left {
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.aibaro-page--full_bleed .aibaro-page__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aibaro-page--full_bleed .aibaro-page__text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	color: var(--color-white);
	background: rgb(0 0 0 / 55%);
}

.aibaro-page--full_bleed .aibaro-page__caption {
	color: var(--color-cream-2);
}

/* ── 컨트롤 바 ───────────────────────────────────────────────────── */
.aibaro-viewer__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.aibaro-viewer__btn {
	min-height: var(--touch-min);
	padding: 0 var(--space-5);
	font: inherit;
	color: var(--text-body);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
}

/* 소리 버튼은 그림 밖 조작줄에 하나 있다 — 글자와 아이콘이 나란히 선다. */
.aibaro-viewer__audio {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* 잠긴 것은 글자로도 알린다(버튼 문구가 바뀐다) — 흐림은 거들 뿐이다. */
.aibaro-viewer__audio:disabled {
	opacity: 0.55;
	cursor: default;
}

/* 뷰어 컨트롤은 포커스 테두리를 3px로 둔다 — 유아가 어디 있는지 놓치지 않게. */
.aibaro-viewer__btn:focus-visible,
.aibaro-viewer__dot:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
}

.aibaro-viewer__counter {
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}

/* ── dot 내비 ────────────────────────────────────────────────────── */
.aibaro-viewer__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.aibaro-viewer__dot {
	min-width: var(--touch-min);
	min-height: var(--touch-min);
	font: inherit;
	color: var(--text-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* 현재 쪽은 색이 아니라 굵기·밑줄로 알린다(PRD §15.1). */
.aibaro-viewer__dot[aria-current="true"] {
	font-weight: 700;
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ── 게이트 안내 ─────────────────────────────────────────────────── */
.aibaro-viewer__gate,
.aibaro-viewer__blocked {
	margin-top: var(--space-6);
	padding: var(--space-5);
	text-align: center;
	background: var(--bg-subtle);
	border-radius: var(--radius-lg);
}

/* ── 전체화면 ────────────────────────────────────────────────────── */
.aibaro-viewer:fullscreen,
.aibaro-viewer.is-pseudo-fullscreen {
	max-width: none;
	padding: var(--space-4);
	background: var(--bg-page);
}

/* iOS는 요소 전체화면을 지원하지 않아 화면을 덮는 방식으로 대체한다.
   어느 쪽이든 종료 버튼은 항상 보인다. */
.aibaro-viewer.is-pseudo-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow-y: auto;
}

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

/*
 * 자동 재생 옵트인 (PRD §9.2).
 *
 * 컨트롤 바의 다른 조작과 같은 44px 높이를 준다 — 유아와 함께 쓰는 화면에서
 * 작은 체크박스만 덩그러니 있으면 누르기 어렵다.
 */
.aibaro-viewer__autoplay {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	min-height: var(--touch-min);
	padding: 0 var(--space-3);
	font-size: var(--font-size-sm);
	cursor: pointer;
}

.aibaro-viewer__autoplay input {
	width: 20px;
	height: 20px;
}