/*
 * AI 코딩 도구 화면(/claude-code · /codex) — 단계 탭(기초 · 중급 · 고급 · 마스터)과 단계 본문(SSOT 11절 "에이전트 스킬 배포").
 * 기초는 위젯 x-widget.aitools.guide(소개·필요한 것·설치·첫 실행·기능·안전·더 배우기·공식 문서), 나머지 단계는 x-widget.aitools.level,
 * 탭바·이전·다음은 x-widget.aitools.levels 가 싣는다. 명령 상자는 x-widget.skills.command, 코드 칸은 .skills-code(skills.css).
 * 색은 --wa-*·--sonub-* 토큰, 방향은 논리 속성만.
 */

.aitools-page {
	container: aitools / inline-size;
	max-inline-size: 64rem;
	display: grid;
	gap: var(--wa-space-2xl);
}
/* Claude Code — 설명 옆에 실습 터미널(x-widget.lab.workspace)이 있어 두 열이 들어가게 본문 칸 폭을 다 쓴다(SSOT 23절 "클라우드 실습 터미널" · 11절 "본문 폭") */
.aitools-page.aitools-with-lab { max-inline-size: none; }
.aitools-guide {
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
}
.aitools-guide :is(h2, h3, p, ul, ol, dl, dd) {
	margin: 0;
}
.aitools-block {
	display: grid;
	align-content: start;
	gap: var(--wa-space-m);
	min-inline-size: 0;
	padding: var(--sonub-space-6);
	line-height: 1.8;
}
.aitools-block h2 {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-s);
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	line-height: 1.5;
}
.aitools-block h2 > .sonub-icon-tile,
.aitools-level-intro h2 > .sonub-icon-tile { flex: none; }
.aitools-block h2 > span:not(.sonub-icon-tile),
.aitools-level-intro h2 > span:not(.sonub-icon-tile) { min-inline-size: 0; }
.aitools-levels:lang(ko) :is(p, li) { word-break: keep-all; }
.aitools-levels :is(p, li, a, figcaption) { overflow-wrap: anywhere; }
.aitools-block h3 {
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
}
.aitools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--wa-space-l);
	align-items: stretch;
}
.aitools-list {
	display: grid;
	gap: var(--wa-space-xs);
	padding: 0;
	list-style: none;
}
.aitools-list li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}
.aitools-list li,
.aitools-steps li,
.aitools-links li { margin: 0; }
.aitools-list li > i {
	flex: none;
	color: var(--sonub-success);
}
.aitools-list.is-safe li > i {
	color: var(--sonub-warning);
}
.aitools-steps {
	display: grid;
	gap: var(--wa-space-s);
	padding-inline-start: var(--wa-space-l);
}
.aitools-commands {
	display: grid;
	gap: var(--wa-space-m);
}
.aitools-commands > div {
	display: grid;
	gap: var(--wa-space-2xs);
	min-inline-size: 0;
}
.aitools-commands dt {
	color: var(--sonub-muted);
	font-size: calc(0.88rem * var(--wa-font-size-scale, 1));
	font-weight: 600;
}
.aitools-verify {
	display: grid;
	gap: var(--wa-space-xs);
}
.aitools-links {
	display: grid;
	gap: var(--wa-space-2xs);
	padding: 0;
	list-style: none;
}
.aitools-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	min-block-size: 44px;
	padding-block: 0.3rem;
	color: var(--sonub-accent-ink);
	font-weight: 650;
	text-decoration: none;
}
.aitools-link:hover {
	text-decoration: underline;
}
.aitools-checked {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--sonub-muted);
	font-size: calc(0.86rem * var(--wa-font-size-scale, 1));
}


/* ── 단계 탭 — 네 칸을 같은 폭으로. 좁은 화면에서 이름이 길면(긴 언어) 탭바만 가로로 밀린다 ── */
.aitools-levels {
	container: aitools-levels / inline-size;
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
}
.aitools-levels > .sonub-tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(max-content, 1fr);
}
.aitools-levels > .sonub-tabs > .sonub-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-xs);
	min-block-size: 44px;
	font-size: calc(0.95rem * var(--wa-font-size-scale, 1));
}
.aitools-levels > .sonub-tabs > .sonub-tab i {
	font-size: 0.95em;
}
/* 단계 칸이 좁으면(휴대폰·/claude-code 의 설명 열) 네 칸을 2×2 로 — 한 줄이면 넷째 탭(마스터)이 잘려 있는 줄 몰랐다(2026-10-24 디자인 점검).
   26rem 이상이면 한국어 네 칸이 한 줄에 들어가고, 그보다 긴 언어는 전처럼 탭바만 가로로 밀린다 */
@container aitools-levels (max-width: 26rem) {
	.aitools-levels > .sonub-tabs {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* 긴 낱말(독일어 Fortgeschritten)은 하이픈을 넣어 끊는다 — 하이픈 없이 끊기면 다른 낱말처럼 읽힌다 */
	.aitools-levels > .sonub-tabs > .sonub-tab { padding-inline: var(--wa-space-xs); white-space: normal; text-align: center; overflow-wrap: normal; hyphens: auto; }
}
.aitools-panel {
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
}
.aitools-panel[hidden] {
	display: none;
}
.aitools-panel:focus-visible {
	outline: 2px solid var(--sonub-accent);
	outline-offset: 4px;
}
/* 단계 머리 — 이 단계에서 무엇을 배우는지 */
.aitools-level-intro {
	display: grid;
	gap: var(--wa-space-s);
	padding: var(--sonub-space-6);
	border-color: color-mix(in srgb, var(--sonub-accent) 30%, var(--sonub-border));
	background: var(--sonub-accent-soft);
	line-height: 1.8;
}
.aitools-level-intro h2 {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-s);
	margin: 0;
	font-size: calc(1.35rem * var(--wa-font-size-scale, 1));
	font-weight: 750;
	line-height: 1.45;
}
.aitools-level-intro p {
	margin: 0;
}

/* ── 단계 본문의 단락 — 목록 줄의 글은 아이콘 옆에 한 덩어리로, 코드 칸에는 파일 이름표 ── */
.aitools-list li > span {
	min-inline-size: 0;
}
.aitools-guide .rich-list {
	margin: 0;
	padding-inline-start: var(--wa-space-l);
}
.aitools-code {
	display: grid;
	gap: var(--wa-space-2xs);
	margin: 0;
	min-inline-size: 0;
}
.aitools-code figcaption {
	max-inline-size: 100%;
	justify-self: start;
	padding: 0.1rem 0.6rem;
	border-radius: var(--sonub-radius-sm);
	background: var(--sonub-subtle);
	color: var(--sonub-muted);
	font-family: var(--wa-font-family-code);
	font-size: calc(0.78rem * var(--wa-font-size-scale, 1));
	font-weight: 600;
}
.aitools-guide .skills-code { max-block-size: min(60vh, 32rem); }
.aitools-guide .skills-code:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 3px; }
.aitools-try {
	display: grid;
	gap: var(--wa-space-2xs);
	min-inline-size: 0;
}
.aitools-tip {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: var(--wa-space-s) var(--wa-space-m);
	border-inline-start: 3px solid var(--sonub-warning);
	border-radius: var(--sonub-radius-sm);
	background: var(--sonub-subtle);
}
.aitools-tip > i {
	flex: none;
	color: var(--sonub-warning);
}

/* ── 반드시 해야 할 단락(Claude Code 의 브라우저 연결) — 경고색 테두리로 다른 단락보다 눈에 띄게 ── */
.aitools-block.is-must {
	border: 2px solid var(--sonub-warning);
	border-inline-start-width: 6px;
}

/* ── 이전·다음 단계 — 다음은 늘 끝 칸(첫 단계에서 "이전"이 없어도 오른쪽, ar·ur 은 왼쪽) ── */
.aitools-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.aitools-pager a {
	display: grid;
	min-inline-size: 0;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-m) var(--wa-space-l);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--sonub-motion);
}
.aitools-pager a:hover {
	border-color: color-mix(in srgb, var(--sonub-accent) 55%, transparent);
}
.aitools-pager small {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	color: var(--sonub-muted);
	font-size: var(--wa-font-size-xs);
}
.aitools-pager strong {
	color: var(--sonub-accent-ink);
	font-weight: 650;
}
.aitools-pager-next {
	grid-column: 2;
	justify-items: end;
	text-align: end;
}

@container aitools (max-width: 36rem) {
	.sonub-page .aitools-levels :is(.aitools-block, .aitools-level-intro) {
		padding: var(--wa-space-m);
	}
	.aitools-pager a {
		padding: var(--wa-space-s) var(--wa-space-m);
	}
}