/* Codex 학습 그림·단락 이동 노선. SSOT 11·23절. 기존 위젯·명령·공통 단계 탭을 재사용한다. */
.aitools-illustrated .aitools-header {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--wa-space-m) var(--wa-space-l);
	align-items: center;
}
.aitools-illustrated .aitools-header > :not(.aitools-hero-picture) { grid-column: 1; }
.aitools-illustrated .aitools-header .sonub-heading-row { min-inline-size: 0; }
.aitools-illustrated .aitools-header h1 { text-wrap: balance; }
.aitools-illustrated:lang(ko) :is(p, h1, h2, li) { word-break: keep-all; overflow-wrap: anywhere; }
.aitools-illustrated .aitools-header .sonub-lead { line-height: 1.8; }
.aitools-illustrated :is(.aitools-hero-picture, .aitools-lesson-picture) {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--sonub-radius-card);
}
.aitools-illustrated .aitools-hero-picture { grid-column: 2; grid-row: 1 / 4; }
.aitools-illustrated .aitools-lesson { --lesson-color: var(--sonub-success); display: grid; gap: var(--wa-space-l); }
.aitools-illustrated [data-lesson='intermediate'] { --lesson-color: var(--sonub-info); }
.aitools-illustrated [data-lesson='advanced'] { --lesson-color: var(--sonub-accent); }
.aitools-illustrated [data-lesson='master'] { --lesson-color: var(--sonub-warning); }
.aitools-illustrated .aitools-level-intro {
	grid-template-columns: minmax(0, 1fr) 10rem;
	column-gap: var(--wa-space-l);
	border-inline-start: 4px solid var(--lesson-color);
	background: var(--sonub-surface);
}
.aitools-illustrated .aitools-level-intro :is(h2, p) { grid-column: 1; }
.aitools-illustrated .aitools-lesson-picture { grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* 줄기 하나와 짧은 가지. 목차 이름은 팝업 없이 읽고, 항목 전체를 눌러 원문으로 이동한다. */
.aitools-illustrated .aitools-outline { isolation: isolate; min-inline-size: 0; }
.aitools-illustrated .aitools-outline-legend {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	margin: 0 0 var(--wa-space-m);
	color: var(--sonub-muted);
	font-size: calc(0.86rem * var(--wa-font-size-scale, 1));
}
.aitools-illustrated .aitools-outline-legend > span { inline-size: 1.75rem; border-block-start: 3px solid var(--lesson-color); }
.aitools-illustrated .aitools-outline-items {
	display: grid;
	gap: var(--wa-space-s);
	margin: 0;
	padding: 0;
	padding-inline-start: 3.5rem;
	list-style: none;
}
.aitools-illustrated .aitools-outline-items li { min-inline-size: 0; margin: 0; }
.aitools-illustrated .aitools-outline-items a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-m);
	min-block-size: 44px;
	padding: 0.6rem 1rem;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-sm);
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	text-decoration: none;
	line-height: 1.55;
}
.aitools-illustrated .aitools-outline-items a > span { min-inline-size: 0; overflow-wrap: anywhere; }
.aitools-illustrated .aitools-outline-items a > i { flex: none; color: var(--lesson-color); }
.aitools-illustrated .aitools-outline-items a:hover { background: var(--sonub-subtle); }
.aitools-illustrated .aitools-outline-items a:hover > span { text-decoration: underline; }
.aitools-illustrated .aitools-outline-items a:focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: -3px; }
.aitools-illustrated .aitools-outline .ig-line { fill: none; stroke: var(--lesson-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.aitools-illustrated .aitools-outline .ig-node { r: 6px; fill: var(--lesson-color); stroke: var(--sonub-surface); stroke-width: 3; }

/* 설명은 넓게, 기능·주의 사항은 한 항목씩. 긴 코드만 그 상자 안에서 스크롤한다. */
.aitools-illustrated .aitools-guide { gap: var(--wa-space-xl); }
.aitools-illustrated .aitools-block { gap: var(--wa-space-l); line-height: 1.85; }
.aitools-illustrated .aitools-block > :is(p, .rich-text, ul, ol) { max-inline-size: 68ch; }
.aitools-illustrated:lang(ko) .aitools-block > p { text-wrap: balance; }
.aitools-illustrated .aitools-block h2 { padding-block-end: var(--wa-space-s); border-block-end: 1px solid var(--sonub-border); }
.aitools-illustrated .aitools-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-xl); }
.aitools-illustrated .aitools-list { gap: var(--wa-space-s); }
.aitools-illustrated .aitools-list li { padding-block: var(--wa-space-2xs); }
.aitools-illustrated .aitools-steps { counter-reset: lesson-step; padding: 0; list-style: none; gap: var(--wa-space-m); }
.aitools-illustrated .aitools-steps > li {
	counter-increment: lesson-step;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	align-items: start;
	gap: var(--wa-space-m);
}
.aitools-illustrated .aitools-steps > li::before {
	content: counter(lesson-step);
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 1px solid var(--sonub-border);
	border-radius: 50%;
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
}
.aitools-illustrated .aitools-commands { gap: var(--wa-space-l); }
.aitools-illustrated .aitools-commands > div { gap: var(--wa-space-s); }
.aitools-illustrated .aitools-commands dt { color: var(--sonub-ink); }
.aitools-illustrated .aitools-code { gap: var(--wa-space-s); }
.aitools-illustrated .aitools-code figcaption { color: var(--sonub-ink); font-size: calc(0.86rem * var(--wa-font-size-scale, 1)); }
.aitools-illustrated .aitools-guide bdi[dir='ltr'] { display: inline-block; max-inline-size: 100%; vertical-align: baseline; }
.aitools-illustrated .aitools-checked { line-height: 1.7; }

@container aitools (max-width: 42rem) {
	.aitools-illustrated .aitools-header { grid-template-columns: minmax(0, 1fr); }
	.aitools-illustrated .aitools-hero-picture { grid-column: 1; grid-row: auto; max-block-size: 17rem; object-fit: contain; }
	.aitools-illustrated .aitools-level-intro { grid-template-columns: minmax(0, 1fr); }
	.aitools-illustrated .aitools-lesson-picture { grid-column: 1; grid-row: auto; max-block-size: 12rem; object-fit: contain; }
}
@container aitools (max-width: 26rem) {
	.aitools-illustrated .aitools-outline-items { padding-inline-start: 3rem; }
	.aitools-illustrated .aitools-outline-items a { padding-inline: var(--wa-space-s); }
	.aitools-illustrated .aitools-steps > li { gap: var(--wa-space-s); }
}