/*
 * 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 {
	max-inline-size: 64rem;
	display: grid;
	gap: var(--wa-space-2xl);
}
.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: center;
	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 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 > 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: 2.25rem;
	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 {
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
}
.aitools-tabbar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(max-content, 1fr);
	scroll-margin-block-start: calc(var(--bar-height, 5rem) + var(--wa-space-s));
}
.aitools-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-xs);
	font-size: calc(0.95rem * var(--wa-font-size-scale, 1));
}
.aitools-tab i {
	font-size: 0.95em;
}
.aitools-panel {
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
}
.aitools-panel[hidden] {
	display: none;
}
.aitools-panel:focus {
	outline: none;
}
/* 단계 머리 — 이 단계에서 무엇을 배우는지 */
.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: center;
	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 {
	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-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);
}

/* ── 이전·다음 단계 — 다음은 늘 끝 칸(첫 단계에서 "이전"이 없어도 오른쪽, ar·ur 은 왼쪽) ── */
.aitools-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.aitools-pager a {
	display: grid;
	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;
}

@media (max-width: 600px) {
	.aitools-block,
	.aitools-level-intro {
		padding: var(--wa-space-m);
	}
	.aitools-pager a {
		padding: var(--wa-space-s) var(--wa-space-m);
	}
}