/* ── AI 영어 회화(/practice) — x-widget.practice.page (SONUB-SSOT.md 23절 "AI 영어 회화") ─── */
.practice {
	max-inline-size: 60rem;
	display: grid;
	gap: var(--sonub-space-4);
	align-content: start;
}
.practice h2 {
	margin: 0;
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
	line-height: 1.4;
}
.practice h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: calc(1.05rem * var(--wa-font-size-scale, 1));
}
.practice h3 > i { color: var(--sonub-accent-ink); }
.practice [x-cloak] { display: none !important; }

/* ── 손님 ─── */
.practice-guest {
	display: grid;
	justify-items: start;
	gap: var(--sonub-space-3);
	padding: var(--sonub-space-6);
}
.practice-guest p { margin: 0; color: var(--sonub-muted); line-height: 1.7; }
.practice-points {
	display: grid;
	gap: var(--sonub-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.practice-points li { display: flex; align-items: baseline; gap: 0.6rem; line-height: 1.6; }
.practice-points i { color: var(--sonub-accent-ink); inline-size: 1.25em; text-align: center; }

/* ── 오늘 남은 시간 ─── */
.practice-clock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	padding: var(--sonub-space-3) var(--sonub-space-4);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	font-size: var(--wa-font-size-s);
}
.practice-clock > i { color: var(--sonub-accent-ink); }
.practice-clock strong {
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
	font-variant-numeric: tabular-nums;
	color: var(--sonub-accent-ink);
}
.practice-clock[data-low='true'] strong,
.practice-clock[data-low='true'] > i { color: var(--sonub-warning); }
.practice-clock-total { color: var(--sonub-muted); }
.practice-clock-bar {
	flex: 1 1 8rem;
	block-size: 0.5rem;
	border-radius: 999px;
	background: var(--sonub-accent-soft);
	overflow: hidden;
}
.practice-clock-bar i {
	display: block;
	inline-size: var(--pct, 100%);
	block-size: 100%;
	border-radius: inherit;
	background: var(--sonub-accent);
	transition: inline-size var(--sonub-motion-slow);
}
.practice-clock[data-low='true'] .practice-clock-bar i { background: var(--sonub-warning); }
.practice-clock small { flex-basis: 100%; color: var(--sonub-muted); }

/* ── 하루 한도 ─── */
.practice-limit {
	display: grid;
	justify-items: start;
	gap: var(--sonub-space-3);
	padding: var(--sonub-space-6);
	border-color: color-mix(in srgb, var(--sonub-warning) 45%, var(--sonub-border));
	background: var(--sonub-warning-soft);
}
.practice-limit p { margin: 0; line-height: 1.7; }

/* ── ① 모드 고르기 ─── */
.practice-pick { display: grid; gap: var(--sonub-space-4); }
.practice-modes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: var(--sonub-space-3);
}
.practice-mode {
	display: grid;
	justify-items: start;
	align-content: start;
	gap: 0.4rem;
	padding: var(--sonub-space-4);
	border: 2px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	/* Web Awesome native.css 가 button 에 주는 한 줄 높이를 푼다 — 아이콘·이름·설명 세 줄 카드 */
	block-size: auto;
	white-space: normal;
	justify-content: stretch;
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color var(--sonub-motion), box-shadow var(--sonub-motion), transform var(--sonub-motion-fast);
}
.practice-mode:hover { border-color: color-mix(in srgb, var(--sonub-accent) 45%, var(--sonub-border)); box-shadow: var(--sonub-shadow-hover); }
.practice-mode[aria-pressed='true'] {
	border-color: var(--sonub-accent);
	background: var(--sonub-accent-soft);
}
.practice-mode strong { font-size: calc(1.05rem * var(--wa-font-size-scale, 1)); }
.practice-mode span { color: var(--sonub-muted); font-size: var(--wa-font-size-s); line-height: 1.6; }

.practice-scenarios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sonub-space-2);
}
.practice-scenarios p { flex-basis: 100%; margin: 0; font-weight: 650; }
.practice-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-block-size: 2.5rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--sonub-border);
	border-radius: 999px;
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	font: inherit;
	font-size: var(--wa-font-size-s);
	cursor: pointer;
	transition: background-color var(--sonub-motion), border-color var(--sonub-motion);
}
.practice-chip:hover { border-color: var(--sonub-accent); }
.practice-chip[aria-pressed='true'] { background: var(--sonub-accent); border-color: transparent; color: var(--sonub-on-accent); }

.practice-context {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.6rem;
	margin: 0;
	padding: var(--sonub-space-3) var(--sonub-space-4);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-info-soft);
	line-height: 1.6;
}
.practice-context > i { color: var(--sonub-info); }
.practice-subjects { color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
.practice-context blockquote {
	flex-basis: 100%;
	margin: 0;
	padding-inline-start: var(--sonub-space-3);
	border-inline-start: 3px solid var(--sonub-info);
	color: var(--sonub-ink);
	white-space: pre-line;
}
.practice-start { justify-self: start; min-inline-size: 12rem; }

/* ── ② 대화 ─── */
.practice-talk {
	display: grid;
	gap: var(--sonub-space-3);
	padding: var(--sonub-space-4);
}
.practice-talk-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sonub-space-2);
}
.practice-talk-head h2 { flex: 1 1 auto; }
.practice-voice {
	display: inline-grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border: 1px solid var(--sonub-border);
	border-radius: 999px;
	background: var(--sonub-surface);
	color: var(--sonub-accent-ink);
	cursor: pointer;
}
.practice-voice[aria-pressed='false'] { color: var(--sonub-muted); }

.practice-log {
	display: flex;
	flex-direction: column;
	gap: var(--sonub-space-3);
	max-block-size: min(60vh, 34rem);
	min-block-size: 12rem;
	margin: 0;
	padding: var(--sonub-space-3);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-canvas);
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.practice-msg {
	position: relative;
	display: grid;
	gap: 0.2rem;
	max-inline-size: min(85%, 36rem);
	padding: 0.65rem 0.95rem;
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	border: 1px solid var(--sonub-border);
	align-self: flex-start;
}
.practice-msg[data-role='user'] {
	align-self: flex-end;
	background: var(--sonub-accent);
	border-color: transparent;
	color: var(--sonub-on-accent);
}
.practice-msg p { margin: 0; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.practice-who { font-size: calc(0.78rem * var(--wa-font-size-scale, 1)); font-weight: 700; opacity: 0.8; }
.practice-replay {
	justify-self: end;
	padding: 0.15rem 0.4rem;
	border: 0;
	border-radius: var(--sonub-radius-sm);
	background: transparent;
	color: var(--sonub-accent-ink);
	cursor: pointer;
}
.practice-replay:hover { background: var(--sonub-accent-soft); }
.practice-typing { display: inline-flex; gap: 0.3rem; padding-block: 0.4rem; }
.practice-typing i {
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: var(--sonub-muted);
	animation: practice-dot 1.2s infinite ease-in-out;
}
.practice-typing i:nth-child(2) { animation-delay: 0.15s; }
.practice-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes practice-dot {
	0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

.practice-status { margin: 0; color: var(--sonub-accent-ink); font-weight: 650; font-size: var(--wa-font-size-s); }
.practice-status i { margin-inline-end: 0.4rem; }
.practice-partial { margin: 0; color: var(--sonub-muted); font-style: italic; }
.practice-error { margin: 0; color: var(--sonub-danger); font-size: var(--wa-font-size-s); }

.practice-input {
	display: flex;
	align-items: flex-end;
	gap: var(--sonub-space-2);
}
.practice-input textarea {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 2.85rem;
	max-block-size: 8rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	font: inherit;
	resize: vertical;
	field-sizing: content;
}
.practice-input textarea:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 1px; }
.practice-mic {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-block-size: 2.85rem;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--sonub-accent);
	color: var(--sonub-on-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.practice-mic[aria-pressed='true'] { background: var(--sonub-danger); }
.practice-mic:disabled { opacity: 0.5; cursor: not-allowed; }
.practice-send { min-inline-size: 2.85rem; padding-inline: 0.8rem; }
.practice-note { color: var(--sonub-muted); line-height: 1.6; }

/* ── ③ 리포트 ─── */
.practice-report { display: grid; gap: var(--sonub-space-4); }
.practice-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sonub-space-3);
	margin: 0;
}
.practice-stats > div {
	display: grid;
	gap: 0.2rem;
	padding: var(--sonub-space-4);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	text-align: center;
}
.practice-stats dt { display: flex; justify-content: center; align-items: center; gap: 0.4rem; color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
.practice-stats dd {
	margin: 0;
	font-size: calc(1.6rem * var(--wa-font-size-scale, 1));
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	color: var(--sonub-accent-ink);
}
.practice-report-body { display: grid; gap: var(--sonub-space-3); }
.practice-report-body > .sonub-card { display: grid; gap: var(--sonub-space-3); padding: var(--sonub-space-4); }
.practice-report-body p { margin: 0; line-height: 1.7; }
.practice-fixes { display: grid; gap: var(--sonub-space-3); margin: 0; padding: 0; list-style: none; }
.practice-fixes li {
	display: grid;
	gap: 0.25rem;
	padding-block-end: var(--sonub-space-3);
	border-block-end: 1px dashed var(--sonub-border);
}
.practice-fixes li:last-child { border-block-end: 0; padding-block-end: 0; }
.practice-fixes del { color: var(--sonub-danger); text-decoration-thickness: 1px; }
.practice-fixes ins { color: var(--sonub-success); text-decoration: none; font-weight: 650; }
.practice-fixes p i { margin-inline-end: 0.4rem; color: var(--sonub-muted); }
.practice-fixes small { color: var(--sonub-muted); line-height: 1.6; }
:dir(rtl) .practice-fixes p i { transform: scaleX(-1); }
.practice-tag {
	justify-self: start;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font-size: calc(0.78rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
}
.practice-review-added { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
.practice-words { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.practice-words li { line-height: 1.6; }
.practice-words strong { color: var(--sonub-accent-ink); margin-inline-end: 0.4rem; }
.practice-report-actions { display: flex; flex-wrap: wrap; gap: var(--sonub-space-2); }

/* ── 좁은 화면 ─── */
@media (max-width: 40rem) {
	.practice-stats { grid-template-columns: 1fr; }
	.practice-stats > div { display: flex; justify-content: space-between; align-items: center; text-align: start; }
	.practice-mic span { display: none; }
	.practice-mic { padding-inline: 0.9rem; }
	.practice-msg { max-inline-size: 92%; }
	.practice-talk-head .practice-end { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.practice-typing i { animation: none; }
	.practice-clock-bar i { transition: none; }
}