/*
 * 읽기 창(SONUB-SSOT.md 11절 "읽기 창") — 바탕 화면의 큰 창(partials/peek · public/js/peek.js)과 창 안 문서(?embed=1 의 body.peek-embed).
 * 넓은 화면은 끝 쪽(inline-end)에서 너비 clamp(50vw, 64rem, 88vw) — 조금 넓은 화면은 88%, 아주 넓은 화면은 50% 까지 줄어 읽기 좋은 너비(64rem)를 지키고
 * 바탕 화면도 넉넉히 보인다(2026-11-05 사용자 지시), 좁은 화면(48rem 미만)은 아래에서 올라오는 시트(placement 는 peek.js 가 연다).
 * 색은 토큰만, 방향은 논리 속성만(RTL 에서는 wa-drawer 가 끝 쪽을 왼쪽으로 바꾼다).
 */

/* ── 바탕 화면의 창 ── */
.peek {
	--size: clamp(50vw, 64rem, 88vw);
	--spacing: var(--wa-space-m);
}
.peek[placement='bottom'] {
	--size: 94dvh;
}
.peek::part(dialog) {
	background: var(--wa-color-surface-default);
	box-shadow: var(--sonub-shadow-overlay);
	translate: 0 var(--peek-drag, 0px);
}
.peek[placement='end']::part(dialog) {
	border-start-start-radius: var(--sonub-radius-panel);
	border-end-start-radius: var(--sonub-radius-panel);
}
.peek[placement='bottom']::part(dialog) {
	border-start-start-radius: var(--sonub-radius-panel);
	border-start-end-radius: var(--sonub-radius-panel);
}
.peek::part(header) {
	position: relative;
	padding-block: var(--wa-space-s);
	border-block-end: 1px solid var(--sonub-border);
}
/* 긴 제목은 줄여 말줄임 — 단추(← · 전체 화면 · 새 탭 · ✕)가 좁은 화면에서도 밀려나지 않게 */
.peek::part(title) {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
}
.peek::part(header-actions) {
	flex: none;
}
.peek::part(body) {
	display: flex;
	padding: 0;
	overflow: hidden;
}

.peek-head {
	display: flex;
	align-items: center;
	min-inline-size: 0;
}
.peek-title {
	overflow: hidden;
	font-size: var(--wa-font-size-m);
	font-weight: var(--wa-font-weight-semibold);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 휴대폰 시트 — 머리를 아래로 끌면 닫힌다(손잡이는 바탕 쪽 머리에 둔다 — iframe 안의 터치는 바탕이 받지 못한다) */
.peek-grip {
	display: none;
}
.peek[placement='bottom'] .peek-head {
	touch-action: none;
	cursor: grab;
}
.peek[placement='bottom'] .peek-grip {
	position: absolute;
	inset-block-start: var(--wa-space-2xs);
	inset-inline-start: 50%;
	display: block;
	inline-size: 2.5rem;
	block-size: 0.25rem;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-neutral-border-loud);
	translate: -50% 0;
}
.peek[data-dragging]::part(dialog) {
	transition: none;
}

.peek-body {
	position: relative;
	flex: 1;
	min-block-size: 0;
}
.peek-frame {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	background: var(--wa-color-surface-default);
	opacity: 1;
	transition: opacity var(--sonub-motion-fast, 160ms) ease;
}
.peek-body[data-loading] .peek-frame {
	opacity: 0;
}
.peek-loading {
	position: absolute;
	inset-block-start: 40%;
	inset-inline-start: 50%;
	font-size: calc(2rem * var(--wa-font-size-scale, 1));
	translate: -50% 0;
}
.peek-body:not([data-loading]) .peek-loading {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.peek {
		--show-duration: 0s;
		--hide-duration: 0s;
	}
	.peek-frame {
		transition: none;
	}
}

/* ── 창 안 문서(?embed=1) — 탑바가 없으니 고정 머리 높이는 0, 본문은 창 너비를 다 쓴다 ── */
.peek-embed {
	--bar-height: 0px;
	--sonub-header-height: 0px;
	background: var(--wa-color-surface-default);
}
.peek-embed main.content {
	max-inline-size: none;
	padding: clamp(1rem, 2.4vw, 2.25rem);
}