/*
 * 인공지능 해부학(/ai/internals) — 이전 사이트 routes/ai/internals/+page.svelte 의 스코프 CSS 를 옮겼다.
 * 도표 컴포넌트(<x-diagram.*>)의 디자인은 public/css/content.css 에 있고, 여기에는 이 화면만의 그림
 * (구역 범례·한 번/매번 두 줄·두 갈래 분기도·비유의 한계·파라미터 상자·용량 막대·누적 막대·픽셀 하트·열 묶음·서버 안 포함 관계)만 둔다.
 * 선택자는 모두 .ai-int 아래로 좁힌다. 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

.ai-int [hidden] {
	display: none !important;
}

.ai-int {
	display: grid;
	gap: clamp(2rem, 4.5vw, 3rem);
}

.ai-int :is(p, h2, h3, h4, li, summary, figcaption) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 중국어·일본어는 어절 단위 줄바꿈이 없어 keep-all 이면 한 덩어리로 넘친다. */
:lang(ja) .ai-int :is(p, h2, h3, h4, li, summary, figcaption),
:lang(zh) .ai-int :is(p, h2, h3, h4, li, summary, figcaption) {
	word-break: normal;
}

/* ── 머리 ─────────────────────────────────────── */
.ai-int .pes-page-header {
	gap: 0.7rem;
	margin: 0;
}

.ai-int .pes-page-header .pes-lead {
	font-size: 0.9rem;
}

/* ── 심플 / 고급 탭 ───────────────────────────── */
/* 위 메뉴(.topbar, 높이 --bar-height) 바로 아래에 붙어 있는다. */
.ai-int .level-bar {
	position: sticky;
	inset-block-start: var(--bar-height, 0px);
	z-index: 2;
	display: grid;
	gap: 0.4rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--wa-color-surface-border);
	background: var(--pes-canvas, var(--wa-color-surface-default));
}

.ai-int .level-tabs {
	flex-wrap: wrap;
}

.ai-int .level-tabs button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 999px;
	background: transparent;
	color: var(--wa-color-text-quiet);
	font: inherit;
	font-size: 0.92rem;
	font-weight: var(--wa-font-weight-semibold);
	cursor: pointer;
}

.ai-int .level-tabs button:hover {
	border-color: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-quiet);
}

.ai-int .level-tabs button[aria-selected='true'] {
	border-color: transparent;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
}

.ai-int .level-tabs button:focus-visible {
	outline: 2px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
}

.ai-int .level-hint {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
}

.ai-int .panel {
	display: grid;
	gap: clamp(2rem, 4.5vw, 3rem);
}

/* Web Awesome 기본 스타일은 뒤에 형제가 있는 details 에 아래 여백을 준다 — 이 화면은 grid gap 이 간격을 맡는다. */
.ai-int :is(.dg-more, .adv-group) {
	margin: 0;
}

/* ── 절 ───────────────────────────────────────── */
.ai-int .block {
	display: grid;
	gap: 0.9rem;
	min-inline-size: 0;
	scroll-margin-block-start: 10rem;
}

.ai-int .block > h2 {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.3;
}

.ai-int .block h3 {
	margin: 0.5rem 0 0;
	font-size: 1.05rem;
	line-height: 1.35;
}

.ai-int :is(.desc, .fine) {
	margin: 0;
	color: var(--wa-color-text-quiet);
	line-height: 1.7;
}

.ai-int .fine {
	font-size: 0.82rem;
}

.ai-int :is(.legend, .seg-legend) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-int :is(.legend, .seg-legend) li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wa-color-text-quiet);
	font-size: 0.82rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .swatch {
	inline-size: 0.8rem;
	block-size: 0.8rem;
	border: 1px solid var(--dg-border);
	border-radius: 0.2rem;
	background: var(--dg-fill);
}

.ai-int :is(.same, .callout) {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	padding: 0.6rem 0.9rem;
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-m);
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: 0.9rem;
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.6;
}

.ai-int :is(.same, .callout) > i {
	flex: none;
	color: var(--dg-fill);
}

/* ── 3번 구역 안: 한 번 / 매번 ─────────────────── */
.ai-int .lanes {
	display: grid;
	gap: 0.8rem;
}

.ai-int .lane {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0.8rem;
	padding: 0.8rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}

.ai-int .lane-when {
	justify-self: start;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-bold);
}

/* ── 여덟 단계 레일 패널 안: 반복 표시 · 두 갈래로 가는 링크 ── */
.ai-int :is(.loop-tag, .jump) {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.7rem 0 0;
	padding: 0.25rem 0.7rem;
	border: 1px dashed var(--dg-border);
	border-radius: 999px;
	color: var(--dg-ink);
	font-size: 0.82rem;
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.5;
	text-decoration: none;
}

.ai-int .jump:hover {
	border-style: solid;
}

/* ── 두 갈래 분기도 ───────────────────────────── */
.ai-int .fork {
	display: grid;
	justify-items: center;
	container-type: inline-size;
}

.ai-int .fork-root {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--dg-fill);
	border-radius: 999px;
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .fork-root > i {
	color: var(--dg-fill);
}

.ai-int .fork-n {
	display: grid;
	place-items: center;
	inline-size: 1.4rem;
	block-size: 1.4rem;
	border-radius: 50%;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: 0.75rem;
	font-weight: var(--wa-font-weight-bold);
}

.ai-int .fork-lines {
	inline-size: 100%;
	block-size: 2.2rem;
	fill: none;
	stroke: var(--wa-color-warning-fill-loud);
	stroke-width: 2;
	opacity: 0.6;
}

/* 선 굵기는 늘어난 그림 폭과 관계없이 2px 로 둔다(vector-effect 는 상속되지 않아 path 에 준다). */
.ai-int .fork-lines path {
	vector-effect: non-scaling-stroke;
}

.ai-int .branches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
	inline-size: 100%;
}

.ai-int .branch {
	display: grid;
	align-content: start;
	gap: 0.7rem;
	min-inline-size: 0;
	padding: 1rem;
	border: 1px solid var(--dg-border);
	border-block-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}

.ai-int .branch h3 {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}

.ai-int .branch h3 > i {
	color: var(--dg-fill);
}

.ai-int .ask-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wa-color-brand-on-quiet);
	font-size: 0.88rem;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}

.ai-int .ask-link:hover {
	text-decoration: underline;
}

@container (max-width: 40rem) {
	.ai-int .branches {
		grid-template-columns: 1fr;
	}

	.ai-int .fork-lines {
		display: none;
	}

	.ai-int .fork-root {
		margin-block-end: 0.8rem;
	}
}

/* ── 비유의 한계 ──────────────────────────────── */
.ai-int .limits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-int .limits li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.8rem 1rem;
	border-inline-start: 3px solid var(--wa-color-brand-fill-loud);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
}

.ai-int .limits li > i {
	flex: none;
	margin-block-start: 0.3rem;
	color: var(--wa-color-brand-fill-loud);
}

.ai-int .limits p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.65;
}

/* ── 두 가지만 더 ─────────────────────────────── */
.ai-int .note-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0.7rem;
}

.ai-int .note {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
}

.ai-int .note > i {
	flex: none;
	color: var(--dg-fill);
	font-size: 1.2rem;
}

.ai-int .note h3 {
	margin: 0;
	font-size: 0.98rem;
}

/* 표 안의 ✔·✘ 낭독 글자(.pes-sr, position: absolute)가 가로 스크롤 상자 밖으로 새어 좁은 화면의 페이지를 넓히지 않게
   스크롤 상자를 그 기준 상자로 삼는다. (공용 .dg-table-wrap 에 두는 것이 맞다 — 최종 보고에 적었다) */
.ai-int .dg-table-wrap {
	position: relative;
}

.ai-int .adult {
	display: grid;
	gap: 0.5rem;
}

/* ── 고급: 파라미터 ───────────────────────────── */
.ai-int .param-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 0.9rem;
	align-items: start;
}

.ai-int .param-fig {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.ai-int .param-fig figcaption {
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .param-examples {
	display: grid;
	gap: 0.7rem;
}

.ai-int .math-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wa-color-brand-border-normal);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	line-height: 1.55;
}

.ai-int .math-box code {
	font-size: 1rem;
	font-weight: var(--wa-font-weight-bold);
}

.ai-int .math-box > span:last-child {
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
}

.ai-int .math-box.formula {
	justify-content: center;
	text-align: center;
}

.ai-int .math-box.formula code {
	overflow-wrap: anywhere;
}

/* 숫자 목록·행렬·수식은 언어와 관계없이 왼쪽→오른쪽으로 읽는다(ar·ur 에서 숫자 순서가 뒤집히지 않게). */
.ai-int .math {
	direction: ltr;
	unicode-bidi: isolate;
}

.ai-int .matrix {
	position: relative;
	display: inline-grid;
	grid-template-columns: repeat(3, auto);
	gap: 0.3rem 1rem;
	padding: 0.25rem 0.9rem;
	font-family: var(--wa-font-family-code);
	font-variant-numeric: tabular-nums;
}

.ai-int .matrix::before,
.ai-int .matrix::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inline-size: 0.45rem;
	border-block: 2px solid var(--wa-color-brand-fill-loud);
}

.ai-int .matrix::before {
	inset-inline-start: 0;
	border-inline-start: 2px solid var(--wa-color-brand-fill-loud);
}

.ai-int .matrix::after {
	inset-inline-end: 0;
	border-inline-end: 2px solid var(--wa-color-brand-fill-loud);
}

/* 파라미터 ⊃ 가중치·편향·임베딩·정규화 계수 — 큰 상자가 네 종류를 품는다. */
.ai-int .venn {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0.8rem 1rem 1rem;
	border: 2px dashed var(--dg-border);
	border-radius: 1.2rem;
	background: var(--dg-soft);
}

.ai-int .venn figcaption {
	color: var(--dg-ink);
	font-size: 0.9rem;
	font-weight: var(--wa-font-weight-bold);
}

.ai-int .venn ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-int .venn li {
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--dg-border);
	border-radius: 999px;
	background: var(--wa-color-surface-default);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .venn li.strong {
	border-color: var(--dg-fill);
	background: var(--dg-fill);
	color: var(--dg-on-fill);
}

/* 막대의 이름·수치(4-bit, 32 bit · 4 B, ≈ 16 GB)는 첫 글자로 방향을 정한다 — ar·ur 에서 숫자와 단위 순서가 뒤집히지 않게.
   (공용 막대 그래프 .dg-bar-label · .dg-bar-value 에 두는 것이 맞다 — 최종 보고에 적었다) */
.ai-int :is(.dg-bar-label, .dg-bar-value) {
	unicode-bidi: plaintext;
}

/* ── 용량 막대 세 장 ──────────────────────────── */
.ai-int .capacity {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 0.7rem;
}

.ai-int .capacity-card {
	min-inline-size: 0;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}

.ai-int .capacity-card .dg-bars figcaption {
	margin-block-end: 0.5rem;
	font-weight: var(--wa-font-weight-bold);
}

/* ── 실행 메모리 누적 막대 ────────────────────── */
.ai-int .stack-bar {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}

.ai-int .stack-bar figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .segments {
	display: flex;
	gap: 3px;
	block-size: 1.8rem;
	overflow: hidden;
	border-radius: 0.6rem;
}

/* 칸 길이는 몫(--share)을 flex-grow 로 받는다. */
.ai-int .seg {
	flex: var(--share, 1) 1 0;
	min-inline-size: 0.6rem;
	background: var(--dg-fill);
}

.ai-int .seg[data-dg-tone='warning'] {
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 6px,
		color-mix(in srgb, var(--wa-color-surface-default) 35%, transparent) 6px 9px
	);
	background-color: var(--dg-fill);
}

.ai-int .grows {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--dg-ink);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .grows > i {
	color: var(--dg-fill);
}

/* ── 픽셀 비유 ────────────────────────────────── */
.ai-int .pixels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}

.ai-int .pixel-grid {
	display: grid;
	grid-template-columns: repeat(12, 0.9rem);
	gap: 2px;
	flex: none;
}

.ai-int .pixel-grid span {
	aspect-ratio: 1;
	border-radius: 2px;
	background: var(--wa-color-surface-border);
}

.ai-int .pixel-grid span.on {
	background: var(--wa-color-danger-fill-loud);
}

.ai-int .pixels figcaption {
	flex: 1 1 14rem;
	color: var(--wa-color-text-normal);
	font-size: 0.95rem;
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.6;
}

.ai-int .callout.closing {
	font-size: 0.95rem;
}

/* ── 고급: 열 묶음 개요 ───────────────────────── */
.ai-int .pipeline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-int .pipeline a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding-block: 0.25rem;
	padding-inline: 0.3rem 0.7rem;
	border: 1px solid var(--dg-border);
	border-radius: 999px;
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: 0.8rem;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}

.ai-int .pipeline a:hover {
	border-color: var(--dg-fill);
}

.ai-int .pipeline a > i {
	color: var(--dg-fill);
}

.ai-int .pipe-n {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	border-radius: 50%;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: 0.7rem;
	font-weight: var(--wa-font-weight-bold);
}

/* ── 고급: 열 묶음 · 마흔 단계 ────────────────── */
.ai-int .adv-groups {
	display: grid;
	gap: 0.5rem;
}

/* Web Awesome 기본 스타일이 열린 details 에 주는 안쪽 여백은 쓰지 않는다 — 안쪽 목록이 여백을 갖는다. */
.ai-int .adv-group,
.ai-int .adv-group[open] {
	padding: 0;
}

.ai-int .adv-group[open] summary {
	margin-inline: 0;
}

.ai-int .adv-group {
	border: 1px solid var(--wa-color-surface-border);
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
	scroll-margin-block-start: 10rem;
}

.ai-int .adv-group summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.6rem;
	padding: 0.7rem 0.9rem;
	list-style: none;
	cursor: pointer;
}

.ai-int .adv-group summary::-webkit-details-marker {
	display: none;
}

.ai-int .adv-group summary:focus-visible {
	outline: 2px solid var(--dg-fill);
	outline-offset: 2px;
	border-radius: var(--wa-border-radius-l);
}

/* 펼침 화살표는 Web Awesome 기본 스타일의 summary::after 를 쓴다(아이콘을 따로 두면 두 개가 된다). */
.ai-int .adv-group summary::after {
	flex: none;
}

.ai-int .adv-icon {
	color: var(--dg-fill);
}

.ai-int .adv-group summary strong {
	flex: 1 1 10rem;
	font-size: 0.98rem;
}

.ai-int :is(.adv-zone, .adv-count) {
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
	font-size: 0.72rem;
	font-weight: var(--wa-font-weight-semibold);
	white-space: nowrap;
}

.ai-int .adv-steps {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0.2rem 1rem 1rem;
	list-style: none;
}

.ai-int .adv-step {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.ai-int .adv-n {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: 0.75rem;
	font-weight: var(--wa-font-weight-bold);
}

/* 번호가 없는 단계(런타임 묶음)의 자리 표시 */
.ai-int .adv-dot {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

.ai-int .adv-dot::before {
	content: '';
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: var(--dg-fill);
}

.ai-int .adv-text {
	min-inline-size: 0;
}

.ai-int .adv-text h4 {
	margin: 0 0 0.15rem;
	font-size: 0.95rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .adv-text p {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: 0.9rem;
	line-height: 1.65;
}

.ai-int .adv-loop {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.45rem 0.9rem;
	border: 1px dashed var(--wa-color-brand-border-normal);
	border-radius: var(--wa-border-radius-m);
	color: var(--wa-color-brand-on-quiet);
	font-size: 0.86rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .adv-group .adv-loop {
	margin: 0 1rem 1rem;
}

.ai-int .adv-loop > i {
	flex: none;
}

/* ── 서버 안의 포함 관계 (런타임 묶음) ────────── */
.ai-int .stack {
	margin: 0 1rem 1rem;
}

.ai-int .stack figcaption {
	margin-block-end: 0.9rem;
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .stack-outer {
	position: relative;
	padding: 1rem 0.8rem 0.8rem;
	border: 1px dashed var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
}

.ai-int .stack-label {
	position: absolute;
	inset-block-start: -0.7rem;
	inset-inline-start: 0.8rem;
	padding: 0 0.35rem;
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-quiet);
	font-size: 0.76rem;
	font-weight: var(--wa-font-weight-semibold);
}

.ai-int .stack-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 0.5rem;
}

.ai-int .stack-row + .stack-row {
	margin-block-start: 0.5rem;
}

.ai-int .stack-box {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-lowered);
	font-size: 0.86rem;
	line-height: 1.45;
}

.ai-int .stack-box.accent {
	border-color: var(--wa-color-brand-border-normal);
	background: var(--wa-color-brand-fill-quiet);
}

.ai-int .stack-box > i {
	flex: none;
	color: var(--wa-color-brand-fill-loud);
}

.ai-int .stack-note {
	margin: 0.7rem 0 0;
	color: var(--wa-color-text-quiet);
	font-size: 0.84rem;
	line-height: 1.6;
}

/* ── 이어서 읽기 ──────────────────────────────── */
.ai-int .next {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0.7rem;
}

.ai-int .next-card {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1rem;
	color: inherit;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}

.ai-int .next-card > i:first-child {
	color: var(--wa-color-brand-fill-loud);
}

.ai-int .next-card span {
	flex: 1;
}

.ai-int .go {
	color: var(--wa-color-text-quiet);
}

@media (max-width: 52rem) {
	.ai-int .param-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 40rem) {
	.ai-int .lane {
		grid-template-columns: 1fr;
	}
}