/*
 * 카메라 & 마이크 테스트(x-widget.device.check) — 리엔의 한 문장 · 내 카메라 | 카메라 · 마이크.
 * SSOT 18절 "장치 점검". 단추처럼 생긴 것은 [마이크 테스트] 하나 — 리엔의 문장은 상자 없이 글만, 카메라·마이크와 내 카메라는 카드 한 장에 모은다.
 * 색은 토큰만. 움직임은 리엔이 말할 때의 물결과 마이크 막대뿐(수업 화면의 절제된 움직임 — SSOT 11절).
 */
.device-check { display: grid; gap: var(--wa-space-l); }
.device-check > * { inline-size: 100%; max-inline-size: 64rem; margin-inline: auto; }
.device-check p { margin-block: 0; }
/* 제목 카드는 작게 — 화면에서 가장 크게 읽힐 글은 리엔의 한 문장이다 */
.device-check .sonub-page-header { margin-block-end: 0; padding-block: var(--wa-space-m); }
.device-check .sonub-page-header h1 { font-size: var(--wa-font-size-xl); }

/* ── 리엔의 한 문장 — 상자 없이 글만(누르는 것으로 보이지 않게) ── */
.device-check .device-lyen {
	display: flex;
	align-items: center;
	gap: var(--wa-space-m);
	color: var(--sonub-ink);
	font-size: var(--wa-font-size-xl);
	font-weight: var(--wa-font-weight-bold);
	letter-spacing: -0.02em;
	line-height: 1.35;
	text-wrap: balance;
}
.device-lyen-face {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-size: calc(1.5rem * var(--wa-font-size-scale, 1));
	transition: background-color var(--sonub-motion), color var(--sonub-motion);
}
.device-lyen-face::after {
	content: '';
	position: absolute;
	inset: -0.2rem;
	border: 2px solid var(--wa-color-brand-fill-loud);
	border-radius: 50%;
	opacity: 0;
}
.device-lyen[data-voice='speaking'] .device-lyen-face::after { animation: device-wave 1.4s ease-out infinite; }
@keyframes device-wave {
	from { transform: scale(0.95); opacity: 0.7; }
	to { transform: scale(1.22); opacity: 0; }
}
/* 카메라·마이크가 모두 ✓ 면 리엔 얼굴도 초록 — "준비 끝" */
.device-check:has([data-state='ok'] ~ [data-state='ok']) .device-lyen-face {
	background: var(--wa-color-success-fill-loud);
	color: var(--wa-color-success-on-loud);
}

/* ── 카드 한 장: 카메라·마이크 | 내 카메라 — 넓은 화면은 단추 쪽을 앞에 둬 아래 끝의 사이트 안내 챗봇에 가리지 않게 ── */
.device-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	overflow: hidden;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--sonub-surface);
	box-shadow: var(--sonub-shadow-card);
}
.device-stage .device-checks { order: -1; }
/* 사이트 안내 챗봇(아래 끝에 떠 있다)에 마지막 줄이 가리지 않게 끝에 여백 */
body:has(.site-chat, .site-voice) .device-check { padding-block-end: 12rem; }
.device-preview {
	display: grid;
	place-items: center;
	min-block-size: 100%;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wa-color-surface-lowered);
}
/* 내 카메라는 거울처럼 — 화상 교실의 내 칸과 같다 */
.device-preview video { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scaleX(-1); }
.device-preview-off { color: var(--sonub-muted); font-size: calc(3rem * var(--wa-font-size-scale, 1)); }

.device-checks { display: grid; align-content: center; gap: var(--wa-space-l); padding: var(--wa-space-xl); min-inline-size: 0; }
/* 소리 막대는 [마이크] 이름 오른쪽 빈자리에 — 나타나도 칸과 단추가 움직이지 않는다 */
.device-checks section { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--wa-space-s) var(--wa-space-m); min-inline-size: 0; }
.device-checks section + section { padding-block-start: var(--wa-space-l); border-block-start: 1px solid var(--sonub-border); }
.device-checks h2 { display: flex; align-items: center; gap: var(--wa-space-s); margin: 0; font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-bold); letter-spacing: normal; line-height: 1.2; }
.device-checks .sonub-icon-tile { --tile-ink: var(--sonub-muted); --tile-bg: var(--wa-color-surface-lowered); transition: background-color var(--sonub-motion), color var(--sonub-motion); }
/* 상태 색 — 타일의 색만 */
.device-checks [data-state='ok'] .sonub-icon-tile { --tile-ink: var(--sonub-success); --tile-bg: var(--sonub-success-soft); }
.device-checks [data-state='bad'] .sonub-icon-tile { --tile-ink: var(--sonub-danger); --tile-bg: var(--sonub-danger-soft); }
.device-checks [data-state='quiet'] .sonub-icon-tile { --tile-ink: var(--sonub-warning); --tile-bg: var(--sonub-warning-soft); }
.device-checks [data-state='listen'] .sonub-icon-tile { --tile-ink: var(--sonub-accent-ink); --tile-bg: var(--sonub-accent-soft); }
/* 끝의 여백은 꺾쇠 자리 — 긴 장치 이름이 꺾쇠에 닿지 않고 말줄임으로 끝난다 */
.device-checks select { grid-row: 2; grid-column: 1 / -1; inline-size: 100%; padding-inline-end: 2.5rem; font-size: var(--wa-font-size-m); text-overflow: ellipsis; }

/* 마이크 소리 막대 — 말하면 초록이 찬다 */
.device-meter { grid-row: 1; grid-column: 2; inline-size: 100%; }
.device-meter-bar {
	position: relative;
	display: block;
	block-size: 0.75rem;
	overflow: hidden;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-surface-lowered);
}
.device-meter-bar::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--pct, 0%);
	border-radius: inherit;
	background: var(--wa-color-success-fill-loud);
	transition: inline-size 80ms linear;
}
.device-mic-button { grid-column: 1 / -1; inline-size: 100%; min-block-size: 3.25rem; margin-block-start: var(--wa-space-2xs); font-size: var(--wa-font-size-m); }

/* ── 켜지 못했을 때 — 글만 ── */
.device-problem {
	display: grid;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-m) var(--wa-space-l);
	border-radius: var(--sonub-radius-panel);
	background: var(--sonub-warning-soft);
	color: var(--sonub-ink);
	line-height: 1.6;
}
.device-problem-title { display: flex; align-items: center; gap: var(--wa-space-xs); color: var(--sonub-warning); font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-bold); }

/* 휴대폰 — [마이크 테스트]가 첫 화면 안에 들어오게 줄이고, 사이트 안내 챗봇은 머리만 둔다(누르면 펼친다) */
@media (max-width: 48rem) {
	.device-stage { grid-template-columns: minmax(0, 1fr); }
	.device-stage .device-checks { order: 0; }
	.device-preview { aspect-ratio: 16 / 10; }
	body:has(.device-check) .site-chat:not([data-open='true']) :is(.site-chat-log, .site-chat-form, .site-chat-note) { display: none; }
}
@media (max-width: 40rem) {
	.device-check { gap: var(--wa-space-m); }
	.device-check .sonub-page-header { padding-block: var(--wa-space-s); }
	.device-check .sonub-page-header h1 { font-size: var(--wa-font-size-l); }
	.device-check .device-lyen { gap: var(--wa-space-s); font-size: var(--wa-font-size-l); }
	.device-lyen-face { inline-size: 2.5rem; block-size: 2.5rem; font-size: calc(1.25rem * var(--wa-font-size-scale, 1)); }
	.device-preview { aspect-ratio: 16 / 9; }
	.device-checks { gap: var(--wa-space-s); padding: var(--wa-space-m); }
	/* 휴대폰 — 이름과 칸을 한 줄에, 소리 막대는 그 아래 */
	.device-checks section { gap: var(--wa-space-s); }
	.device-checks section + section { padding-block-start: var(--wa-space-s); }
	.device-checks .sonub-icon-tile { inline-size: 2.25rem; block-size: 2.25rem; }
	.device-checks h2 { gap: var(--wa-space-xs); font-size: var(--wa-font-size-m); }
	.device-checks select { grid-row: auto; grid-column: 2; }
	.device-meter { grid-row: auto; grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.device-lyen[data-voice='speaking'] .device-lyen-face::after { animation: none; opacity: 0.5; }
	.device-meter-bar::before { transition: none; }
	.device-lyen-face, .device-checks .sonub-icon-tile { transition: none; }
}