/* AI 활용(/ai-use) — 위젯 x-widget.aiuse.*. SSOT 23절 "AI 활용". 탭바 모양은 공용 .sonub-tabs(content.css). */
.aiuse { display: grid; gap: var(--wa-space-xl); }
.aiuse :is(h2, h3) { margin: 0; }
.aiuse p { margin: 0; }

/* 탭 — 탭바 아래 본문 */
.aiuse-tabs { display: grid; gap: var(--wa-space-xl); min-inline-size: 0; }
.aiuse-tabs .sonub-tab { display: inline-flex; align-items: center; gap: 0.45rem; }
.aiuse-panel[hidden] { display: none; }
.aiuse-panel:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 3px; }
.aiuse-tab { display: grid; gap: var(--wa-space-2xl); min-inline-size: 0; }

/* 탭 본문 머리 */
.aiuse-intro { display: grid; gap: var(--wa-space-xs); }
.aiuse-intro h2 { font-size: calc(1.45rem * var(--wa-font-size-scale, 1)); }

/* 한 줄 요약 — 브랜드 옅은 바탕에 굵은 문장 */
.aiuse-core {
	display: grid;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-l) var(--wa-space-xl);
	border-inline-start: 4px solid var(--sonub-accent);
	border-radius: var(--sonub-radius-card);
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 8%, var(--wa-color-surface-raised));
}
.aiuse-core-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--sonub-accent-ink);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
}
.aiuse-core p {
	color: var(--sonub-ink);
	font-size: calc(1.08rem * var(--wa-font-size-scale, 1));
	font-weight: 600;
	line-height: 1.7;
}

.aiuse-section { display: grid; gap: var(--wa-space-m); min-inline-size: 0; }
.aiuse-section-intro { color: var(--sonub-muted); }

/* 카드 묶음 — grid: 아이콘이 위에 있는 카드 격자, list: 아이콘이 옆에 있는 번호 붙은 두 줄 목록 */
.aiuse-cards {
	display: grid;
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: aiuse-card;
}
.aiuse-cards[data-layout='grid'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.aiuse-cards[data-layout='grid'][data-count='6'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } /* 여섯 장은 3×2 로 */
.aiuse-cards[data-layout='list'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.aiuse-cards > li.aiuse-card {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-m);
	margin: 0;
	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);
	box-shadow: var(--sonub-shadow-card);
	counter-increment: aiuse-card;
	min-inline-size: 0;
}
.aiuse-cards[data-layout='grid'] > li.aiuse-card { flex-direction: column; padding: var(--wa-space-l); }
.aiuse-card > div { display: grid; gap: var(--wa-space-2xs); min-inline-size: 0; }
.aiuse-card h3 { font-size: calc(1rem * var(--wa-font-size-scale, 1)); }
.aiuse-card p { color: var(--sonub-muted); font-size: calc(0.92rem * var(--wa-font-size-scale, 1)); }
.aiuse-cards[data-layout='list'] .aiuse-card h3::before {
	content: counter(aiuse-card) '. ';
	color: var(--sonub-accent-ink);
}

/* 핵심 질문 */
.aiuse-question {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-m);
	padding: var(--wa-space-l) var(--wa-space-xl);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-warning-soft);
}
.aiuse-question > div { display: grid; gap: var(--wa-space-xs); min-inline-size: 0; }
.aiuse-question h2 { font-size: calc(1.15rem * var(--wa-font-size-scale, 1)); }

/* 숫자로 보는 지금 */
.aiuse-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aiuse-stats > li {
	display: grid;
	align-content: start;
	gap: var(--wa-space-xs);
	margin: 0;
	padding: var(--wa-space-l);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-info-soft);
}
.aiuse-stats strong {
	color: var(--sonub-info);
	font-size: calc(1.6rem * var(--wa-font-size-scale, 1));
	font-weight: 800;
	line-height: 1.2;
}
.aiuse-stats span { color: var(--sonub-ink); font-size: calc(0.9rem * var(--wa-font-size-scale, 1)); line-height: 1.6; }

/* 점검 목록 — 사람이 할 일·꼭 지킬 것 */
.aiuse-checklist ul { display: grid; gap: var(--wa-space-s); margin: 0; padding: 0; list-style: none; }
.aiuse-checklist li {
	display: flex;
	align-items: baseline;
	gap: var(--wa-space-s);
	margin: 0;
	padding: var(--wa-space-s) var(--wa-space-m);
	border-radius: var(--sonub-radius-sm);
	background: var(--sonub-subtle);
}
.aiuse-checklist li > i { flex: none; color: var(--sonub-accent-ink); }

/* 더 배우기 링크 */
.aiuse-links { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); margin: 0; padding: 0; list-style: none; }
.aiuse-links li { margin: 0; }
.aiuse-links .sonub-button { gap: 0.45rem; }

/* 참고 자료 */
.aiuse-sources { gap: var(--wa-space-s); }
.aiuse-sources h3 { color: var(--sonub-muted); font-size: calc(0.9rem * var(--wa-font-size-scale, 1)); }
.aiuse-sources ul { display: grid; gap: var(--wa-space-2xs); margin: 0; padding: 0; list-style: none; }
.aiuse-sources li { margin: 0; font-size: calc(0.85rem * var(--wa-font-size-scale, 1)); }
.aiuse-sources a { display: inline-flex; align-items: baseline; gap: 0.35rem; color: var(--sonub-accent-ink); }
.aiuse-sources a > i { font-size: 0.75em; }

@media (max-width: 599px) {
	.aiuse-core,
	.aiuse-question { padding: var(--wa-space-m); }
}