/* ── 인공지능 입문 위젯 — 다음 토큰 예측(x-widget.ai.next-token) · 흔한 오해(x-widget.ai.myths) · 분야 지도(x-widget.ai.field-map) ─── */

/* 다음 토큰 예측 한눈에 보기 */
.ai-nt {
	display: grid;
	gap: var(--sonub-space-4);
	max-inline-size: var(--sonub-reading-width);
}
.ai-nt .ai-nt-intro,
.ai-nt p {
	margin: 0;
	line-height: 1.85;
}
.ai-nt .sonub-figure { margin-block: 0; }
.ai-nt .ai-nt-example {
	display: grid;
	gap: var(--sonub-space-4);
	padding: var(--sonub-space-6);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	box-shadow: var(--sonub-shadow-card);
}
.ai-nt .ai-nt-example h3 {
	margin: 0;
	font-size: calc(1.15rem * var(--wa-font-size-scale, 1));
	line-height: 1.4;
}
.ai-nt .ai-nt-sentence {
	justify-self: start;
	padding: var(--sonub-space-2) var(--sonub-space-4);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
}
.ai-nt .ai-nt-ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--sonub-space-4);
}
.ai-nt .ai-nt-way {
	display: grid;
	gap: var(--sonub-space-2);
	padding: var(--sonub-space-4);
	border-inline-start: 4px solid var(--wa-color-brand-fill-loud);
	border-radius: var(--wa-border-radius-s);
	background: var(--wa-color-surface-raised);
}
.ai-nt .ai-nt-way h4 {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: 0;
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
}
.ai-nt .ai-nt-way h4 i { color: var(--wa-color-brand-fill-loud); }

/* 흔한 오해 — 오해(빨강) 아래 실제로는(초록) */
.ai-myths {
	display: grid;
	gap: var(--sonub-space-3);
	margin-block: var(--sonub-space-2);
}
.ai-myths h3 {
	margin: 0;
	font-size: calc(1.15rem * var(--wa-font-size-scale, 1));
}
.ai-myths ul {
	display: grid;
	gap: var(--sonub-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-myths li {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
}
.ai-myths li p {
	margin: 0;
	padding: var(--sonub-space-3) var(--sonub-space-4);
	background: var(--dg-soft);
	color: var(--wa-color-text-normal);
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
	line-height: 1.75;
}
.ai-myths .ai-myth { font-style: italic; }
.ai-myths li strong {
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-1);
	margin-inline-end: var(--sonub-space-2);
	color: var(--dg-ink);
}

/* 분야 지도 — 그림 옆에 네 칸(좁으면 아래로) */
.ai-map {
	display: grid;
	gap: var(--sonub-space-4);
}
.ai-map .ai-map-intro {
	margin: 0;
	max-inline-size: var(--sonub-reading-width);
	line-height: 1.85;
}
.ai-map .ai-map-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: start;
	gap: var(--sonub-space-6);
}
.ai-map .sonub-figure { margin: 0; }
.ai-map .ai-map-layers {
	display: grid;
	gap: var(--sonub-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-map .ai-map-layers li {
	padding: var(--sonub-space-3) var(--sonub-space-4);
	border-inline-start: 5px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-s);
	background: var(--dg-soft);
}
.ai-map .ai-map-layers h3 {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: 0 0 var(--sonub-space-1);
	font-size: calc(1.02rem * var(--wa-font-size-scale, 1));
}
.ai-map .ai-map-layers h3 i { color: var(--dg-fill); }
.ai-map .ai-map-layers p {
	margin: 0;
	line-height: 1.7;
}
.ai-map .ai-map-next {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-2);
	font-weight: 700;
}

/* 시험 준비하기 — 그림 옆에 단계별 챕터 목록, 아래에 요령 네 칸 */
.ai-exam-prep {
	display: grid;
	gap: var(--sonub-space-4);
}
.ai-exam-prep .ai-exam-prep-intro {
	margin: 0;
	max-inline-size: var(--sonub-reading-width);
	line-height: 1.85;
}
.ai-exam-prep .ai-exam-prep-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: start;
	gap: var(--sonub-space-6);
}
.ai-exam-prep .sonub-figure { margin: 0; }
.ai-exam-prep h3 {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: 0 0 var(--sonub-space-2);
	font-size: calc(1.02rem * var(--wa-font-size-scale, 1));
}
.ai-exam-prep .ai-exam-prep-map ol {
	display: grid;
	gap: var(--sonub-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-exam-prep .ai-exam-prep-map li,
.ai-exam-prep .ai-exam-prep-tips li { margin: 0; }
.ai-exam-prep .ai-exam-prep-map li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sonub-space-3);
	padding: var(--sonub-space-2) var(--sonub-space-3);
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-s);
	background: var(--dg-soft);
}
.ai-exam-prep .ai-exam-prep-level {
	color: var(--dg-ink);
	font-weight: 700;
	white-space: nowrap;
}
.ai-exam-prep .ai-exam-prep-map a,
.ai-exam-prep .ai-exam-prep-tips a {
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-1);
	font-weight: 700;
	white-space: nowrap;
}
.ai-exam-prep .ai-exam-prep-tips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--sonub-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-exam-prep .ai-exam-prep-tips li {
	display: grid;
	align-content: start;
	gap: var(--sonub-space-2);
	padding: var(--sonub-space-4);
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-s);
	background: var(--wa-color-surface-raised);
}
.ai-exam-prep .ai-exam-prep-tips h3 { margin: 0; }
.ai-exam-prep .ai-exam-prep-tips h3 i { color: var(--dg-fill); }
.ai-exam-prep .ai-exam-prep-tips p {
	margin: 0;
	line-height: 1.75;
}
/* 좁은 화면 — 단계 이름 아래로 "챕터 읽기" 를 내린다 */
@media (max-width: 30rem) {
	.ai-exam-prep .ai-exam-prep-map li { grid-template-columns: auto minmax(0, 1fr); }
	.ai-exam-prep .ai-exam-prep-map a { grid-column: 2; }
}

:is(.ai-nt, .ai-myths, .ai-map, .ai-exam-prep) :is(p, li, h3, h4) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
:is(:lang(ja), :lang(zh)) :is(.ai-nt, .ai-myths, .ai-map, .ai-exam-prep) :is(p, li, h3, h4) { word-break: normal; }