/*
 * 인공지능의 실체(/ai/truth) — 이전 사이트 routes/ai/truth/+page.svelte 의 스코프 CSS 를 옮겼다.
 * 선택자는 .ai-truth 아래로 좁히고 class 는 ai-truth- 접두어를 붙인다(app.css 의 .chip·.notice 같은 전역 이름과 겹치지 않게).
 * 도표(<x-diagram.*>)의 모양은 공용 content.css 가 맡는다. 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

/* ── 페이지 틀 ─────────────────────────────────── */
.ai-truth {
	display: grid;
	gap: clamp(2.25rem, 5vw, 3.25rem);
	max-inline-size: var(--pes-reading-width, 54rem);
}
.ai-truth .ai-truth-hero {
	gap: 0.6rem;
	margin: 0;
}
.ai-truth .ai-truth-hero p {
	margin: 0;
}
.ai-truth .ai-truth-lead {
	max-inline-size: none;
	color: var(--wa-color-brand-on-quiet);
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: var(--wa-font-weight-bold);
	line-height: 1.45;
}

.ai-truth-block {
	display: grid;
	gap: 0.9rem;
	min-inline-size: 0;
}
.ai-truth-block > h2 {
	margin: 0;
	font-size: clamp(1.2rem, 2.6vw, 1.5rem);
	line-height: 1.35;
}

/* ── 1. 빈칸 ─────────────────────────────────────── */
.ai-truth-big {
	margin: 0;
	padding: 1rem 1.2rem;
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: clamp(1.3rem, 3.2vw, 1.8rem);
	font-weight: var(--wa-font-weight-bold);
	line-height: 1.4;
}
.ai-truth-hint {
	margin: 0;
	color: var(--wa-color-text-quiet);
}

/* 답 보기 — 누르기 전에는 답을 감춘다. Web Awesome 기본 <details> 모양(양끝 정렬·열림 여백)을 덮는다. */
.ai-truth-reveal,
.ai-truth-reveal[open] {
	padding: 0;
	border: 1px dashed var(--wa-color-brand-border-normal);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}
.ai-truth-reveal summary,
.ai-truth-reveal[open] summary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	margin-inline: 0;
	padding: 0.7rem 1rem;
	color: var(--wa-color-brand-on-quiet);
	font-weight: var(--wa-font-weight-semibold);
	list-style: none;
	cursor: pointer;
}
.ai-truth-reveal summary::-webkit-details-marker {
	display: none;
}
.ai-truth-reveal summary::after {
	flex: none;
	margin-inline-start: auto;
}
.ai-truth-reveal summary:focus-visible {
	outline: 2px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
}
.ai-truth-reveal-body {
	display: grid;
	gap: 0.8rem;
	padding: 0 1rem 1rem;
}
.ai-truth-reveal-body p {
	margin: 0;
	line-height: 1.75;
}

/* ── 2. 조각 이어 붙이기 계단 — 줄마다 조금씩 들어가며 길어진다 ── */
.ai-truth-stair {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-truth-stair li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-inline-start: calc(var(--i, 0) * 1.25rem);
}
.ai-truth-stair-n {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
	font-size: 0.75rem;
	font-weight: var(--wa-font-weight-bold);
}

/* ── 4. 자연스러움 ≠ 사실 ───────────────────────── */
.ai-truth-versus,
.ai-truth-before-after {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 0.8rem;
}
.ai-truth-sentence {
	display: grid;
	align-content: start;
	gap: 0.7rem;
	margin: 0;
	padding: 1rem 1.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-truth blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	color: var(--wa-color-text-normal);
	font-size: 1.1rem;
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.5;
}
.ai-truth-checks {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-truth-checks li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9rem;
}
.ai-truth-mark {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	border-radius: 50%;
	font-size: 0.72rem;
}
.ai-truth-mark.yes {
	background: var(--wa-color-success-fill-quiet);
	color: var(--wa-color-success-fill-loud);
}
.ai-truth-mark.no {
	background: var(--wa-color-danger-fill-quiet);
	color: var(--wa-color-danger-fill-loud);
}
.ai-truth-neq {
	align-self: center;
	color: var(--wa-color-text-quiet);
	font-size: 2rem;
	font-weight: var(--wa-font-weight-bold);
}

.ai-truth-block > .ai-truth-sub {
	margin: 0.4rem 0 0;
	font-size: 1rem;
}
.ai-truth-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-truth-tiles li {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	padding: 0.9rem 0.6rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
	font-size: 0.88rem;
	font-weight: var(--wa-font-weight-semibold);
	text-align: center;
}
.ai-truth-tiles i {
	color: var(--dg-fill);
	font-size: 1.3rem;
}
.ai-truth-callout {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-m);
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-weight: var(--wa-font-weight-semibold);
}
.ai-truth-callout i {
	flex: none;
	color: var(--dg-fill);
}

/* ── 5. 힌트 전후 ───────────────────────────────── */
.ai-truth-ba {
	display: grid;
	align-content: start;
	gap: 0.6rem;
	margin: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
}
.ai-truth-ba figcaption,
.ai-truth-ba-result {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--dg-ink);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-bold);
}
.ai-truth-ba figcaption i,
.ai-truth-ba-result i {
	color: var(--dg-fill);
}
.ai-truth .ai-truth-ba blockquote {
	font-size: 0.98rem;
}
.ai-truth-ba-arrow {
	align-self: center;
	inline-size: 1.6rem;
	block-size: 0.9rem;
	background: var(--wa-color-text-quiet);
	opacity: 0.6;
	mask: var(--dg-arrow) center / contain no-repeat;
}
[dir='rtl'] .ai-truth-ba-arrow {
	transform: scaleX(-1);
}

.ai-truth-private {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
}
.ai-truth-private strong {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dg-ink);
}
.ai-truth-private ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-truth-private li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-block: 0.2rem;
	padding-inline: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--wa-color-surface-default);
	font-size: 0.88rem;
	font-weight: var(--wa-font-weight-semibold);
}

/* ── 기억할 세 가지 · 확인 문제 ─────────────────── */
.ai-truth-remember {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-truth-remember li {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: start;
	gap: 0.5rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}
.ai-truth-remember-n {
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: 0.75rem;
	font-weight: var(--wa-font-weight-bold);
}
.ai-truth-remember li > i {
	margin-block-start: 0.3rem;
	color: var(--dg-fill);
}
.ai-truth-remember p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
}

.ai-truth-quiz {
	display: grid;
	gap: 0.6rem;
	padding: 1.1rem 1.2rem;
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
}
.ai-truth-quiz h3 {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--dg-ink);
	font-size: 1.05rem;
}
.ai-truth-quiz > p {
	margin: 0;
	line-height: 1.7;
}

/* ── 더 알아보기 · 다음 화면 ─────────────────────── */
.ai-truth-sources {
	margin: 0;
	padding-inline-start: 1.1rem;
}
.ai-truth-next {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0.7rem;
}
.ai-truth-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-truth-next-card > i:first-child {
	color: var(--wa-color-brand-fill-loud);
}
.ai-truth-next-card span {
	flex: 1;
}
.ai-truth-next-card .ai-truth-go {
	color: var(--wa-color-text-quiet);
}

/* ── 좁은 화면 — 두 카드를 위아래로, 기호는 아래를 가리키게 ── */
@media (max-width: 40rem) {
	.ai-truth-versus,
	.ai-truth-before-after {
		grid-template-columns: minmax(0, 1fr);
	}
	.ai-truth-neq {
		justify-self: center;
		rotate: 90deg;
	}
	.ai-truth-ba-arrow {
		justify-self: center;
		rotate: 90deg;
	}
	[dir='rtl'] .ai-truth-ba-arrow {
		transform: none;
	}
}