/*
 * 인공지능 팁(/ai/tips · /ai/tips/{슬러그}) — SSOT 23절 "인공지능 팁" · 11절 "디자인".
 * 목록(.ai-tips): 제목 카드 → 질문 줄(Q 표시 · 질문 · 화살표). 질문만 보이고 답은 팁 화면(읽기 창)에 있다.
 * 팁(.ai-tip): 제목 카드(질문 · 한 줄 답) → 질문 전체 → 절마다 도표 → 알아 둘 점 → 출처.
 * 글자 네 단계: h1(공용) · h2 1.5rem · 본문 1rem · 주석 0.9rem (모두 배율을 곱한다).
 * 읽기 쉽게(2026-11-11 사용자 지시): 본문 글은 먹색(흐린 색은 주석만) · 카드 안 글도 본문 크기 · 줄 높이 1.8 · 절 사이 넉넉한 간격과 구분선 · 긴 문단은 번호 목록과 두 줄 견주기로.
 */
.ai-tips, .ai-tip {
	--tip-body: calc(1rem * var(--wa-font-size-scale, 1));
	--tip-note: calc(0.9rem * var(--wa-font-size-scale, 1));
	--tip-h2: calc(1.5rem * var(--wa-font-size-scale, 1));
	display: grid;
	container: ai-tip / inline-size;
	max-inline-size: 70rem;
	padding-block: 1rem 3rem;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	color: var(--sonub-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}
:is(.ai-tips, .ai-tip) :is(h2, h3, p, ul, ol, li, figure) { margin: 0; }
:is(.ai-tips, .ai-tip) :is(section, div, li, a) { min-inline-size: 0; }
:is(.ai-tips, .ai-tip) :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
:is(.ai-tips, .ai-tip) h2 { font-size: var(--tip-h2); }
:is(.ai-tips, .ai-tip) a:focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.ai-tips-block, .ai-tip-block { display: grid; gap: 1.25rem; }
/* 팁의 절 — 절마다 위에 가는 선을 두어 어디서 새 이야기가 시작하는지 보인다 */
.ai-tip-block { padding-block-start: clamp(2rem, 4vw, 2.75rem); border-block-start: 1px solid var(--sonub-border); }
.ai-tip-block h2 { line-height: 1.4; }

/* Q 표시 — 목록의 줄 머리와 팁 화면의 질문 전체가 같은 표시를 쓴다 */
.ai-tips-mark { display: inline-grid; flex: none; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 999px; background: var(--sonub-accent); color: var(--wa-color-brand-on-loud); font-size: var(--tip-body); font-weight: 800; line-height: 1; }

/* 목록 — 질문 한 줄이 통째로 링크다(누르는 영역 2.5rem 이상) */
.ai-tips-list { display: grid; gap: 0.75rem; }
.ai-tips-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-block-size: 2.5rem; padding: 1rem 1.25rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); color: inherit; text-decoration: none; transition: border-color var(--wa-transition-fast, 160ms), box-shadow var(--wa-transition-fast, 160ms), transform var(--wa-transition-fast, 160ms); }
.ai-tips-item:hover { border-color: var(--sonub-accent); box-shadow: var(--wa-shadow-s); transform: translateY(-1px); }
.ai-tips-question { font-size: var(--tip-body); font-weight: 700; line-height: 1.55; }
.ai-tips-item > i { color: var(--sonub-muted); }
.ai-tips-item:hover > i { color: var(--sonub-accent); }

/* 팁 — 제목 카드 단추 줄 끝의 확인한 날(단추가 아니다) */
.ai-tip-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--tip-note); color: var(--sonub-muted); }
/* 질문 전체 — 묻는 사람의 말 */
.ai-tip-question { display: flex; gap: 1rem; align-items: flex-start; max-inline-size: var(--sonub-reading-width); padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-inline-start: 4px solid var(--sonub-accent); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); font-size: var(--tip-body); font-weight: 600; line-height: 1.8; }
.ai-tip-question > span:last-child { align-self: center; }
.ai-tip-text { max-inline-size: var(--sonub-reading-width); font-size: var(--tip-body); line-height: 1.8; }
.ai-tip-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--tip-note); line-height: 1.75; }
/* 그 절의 답 한 문장 — 초록 표시와 굵은 글 */
.ai-tip-answer { display: flex; gap: 0.7rem; align-items: baseline; max-inline-size: var(--sonub-reading-width); padding: 1rem 1.15rem; border-inline-start: 4px solid var(--wa-color-success-fill-loud); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); font-weight: 700; line-height: 1.7; }
.ai-tip-answer > i { color: var(--wa-color-success-fill-loud); }
/* 3. 어림 비율 막대 — 같은 부분(초록)과 다른 부분(주황) */
.ai-tip-ratio { display: grid; gap: 0.6rem; max-inline-size: var(--sonub-reading-width); padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.ai-tip-ratio figcaption { font-size: var(--tip-body); font-weight: 700; }
.ai-tip-ratio-bar { display: grid; grid-template-columns: var(--pct) minmax(0, 1fr); gap: 3px; block-size: 1.4rem; overflow: hidden; border-radius: 999px; }
.ai-tip-ratio-bar > .is-same { background: var(--wa-color-success-fill-loud); }
.ai-tip-ratio-bar > .is-diff { background: var(--wa-color-warning-fill-loud); }
.ai-tip-ratio-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: var(--tip-body); font-weight: 700; }
.ai-tip-ratio-legend > span { display: inline-flex; gap: 0.45rem; align-items: center; }
.ai-tip-ratio-legend > span::before { content: ''; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 999px; background: var(--wa-color-success-fill-loud); }
.ai-tip-ratio-legend > .is-diff::before { background: var(--wa-color-warning-fill-loud); }
/* 비율의 근거 — 부분마다 이름 · 점수 · 무게만큼 긴 막대(같은 만큼 초록) · 까닭 */
.ai-tip-ratio-lead { font-size: var(--tip-body); line-height: 1.8; }
.ai-tip-ratio-parts { display: grid; gap: 0.6rem; }
.ai-tip-ratio-parts > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; align-items: center; padding: 0.8rem 1rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); }
.ai-tip-ratio-parts > li > i { color: var(--sonub-accent); }
.ai-tip-ratio-parts h3 { font-size: var(--tip-body); line-height: 1.45; }
.ai-tip-ratio-score { font-size: var(--tip-note); font-weight: 700; white-space: nowrap; }
.ai-tip-ratio-parts > .is-same .ai-tip-ratio-score { color: var(--wa-color-success-on-quiet); }
.ai-tip-ratio-parts > :is(.is-half, .is-diff) .ai-tip-ratio-score { color: var(--wa-color-warning-on-quiet); }
.ai-tip-ratio-meter { grid-column: 1 / -1; display: block; inline-size: calc(var(--pct) * 4); max-inline-size: 100%; block-size: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--wa-color-warning-fill-loud); }
.ai-tip-ratio-meter > span { display: block; inline-size: var(--same); block-size: 100%; background: var(--wa-color-success-fill-loud); }
.ai-tip-ratio-parts p { grid-column: 1 / -1; font-size: var(--tip-body); line-height: 1.7; }
.ai-tip-ratio-note { color: var(--sonub-muted); font-size: var(--tip-note); line-height: 1.6; }
.ai-tip-easy { display: flex; gap: 0.6rem; align-items: baseline; max-inline-size: var(--sonub-reading-width); padding: 1rem 1.15rem; border-radius: var(--wa-border-radius-l); background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 8%, var(--wa-color-surface-raised)); font-size: var(--tip-body); line-height: 1.8; }
.ai-tip-easy > i { color: var(--sonub-accent); }

/* 1. 두 기준의 판정 — 기준 · 판정 · 까닭 */
.ai-tip-verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ai-tip-verdicts > li { display: grid; gap: 0.45rem; align-content: start; padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-block-start: 4px solid var(--tip-tone); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.ai-tip-verdicts > .is-same { --tip-tone: var(--wa-color-success-fill-loud); }
.ai-tip-verdicts > .is-different { --tip-tone: var(--wa-color-danger-fill-loud); }
.ai-tip-verdicts strong { color: var(--sonub-muted); font-size: var(--tip-note); }
.ai-tip-verdict { display: inline-flex; gap: 0.5rem; align-items: baseline; font-size: calc(1.25rem * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1.3; }
.ai-tip-verdict > i { color: var(--tip-tone); }
.ai-tip-verdicts p { font-size: var(--tip-body); line-height: 1.8; }

/* 2. 세 글자 */
.ai-tip-letters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ai-tip-letters > li { display: grid; gap: 0.35rem; align-content: start; }
.ai-tip-letter { color: var(--sonub-accent); font-size: calc(2.2rem * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1; }
.ai-tip-letters h3, .ai-tip-cards h3 { font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); line-height: 1.45; }
.ai-tip-letters p, .ai-tip-cards p { font-size: var(--tip-body); line-height: 1.8; }

/* 4·6. 카드 — 아이콘 타일 옆에 제목과 설명 */
.ai-tip-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ai-tip-cards > li { display: grid; gap: 0.5rem; align-content: start; }
/* 제품 둘을 나란히(밤새 일하는 인공지능) — 카드 끝에 원본 화면으로 가는 Reference */
.ai-tip-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-tip-cards.is-two > li { grid-template-rows: auto auto 1fr auto; }

/* 5. 두 회사의 차이 — 관점마다 한 줄(아이콘 · 관점 · 차이) */
.ai-tip-diffs { display: grid; gap: 0.6rem; }
.ai-tip-diffs > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1rem; align-items: center; padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.ai-tip-diffs h3 { font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); line-height: 1.45; }
.ai-tip-diffs > li > :is(p, dl) { grid-column: 1 / -1; margin: 0; font-size: var(--tip-body); line-height: 1.8; }
/* 회사마다 다른 관점 — Anthropic · OpenAI 를 나란히(좁으면 위아래) 견준다 */
.ai-tip-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ai-tip-versus > div { display: grid; gap: 0.3rem; align-content: start; padding: 0.8rem 1rem; border-radius: var(--wa-border-radius-m); border-block-start: 3px solid var(--tip-side); background: var(--sonub-subtle); }
.ai-tip-versus > .is-anthropic { --tip-side: var(--wa-color-orange-50); }
.ai-tip-versus > .is-openai { --tip-side: var(--wa-color-green-50); }
.ai-tip-versus dt { font-size: var(--tip-note); font-weight: 800; }
.ai-tip-versus dd { margin: 0; }

/* 7. 출처 */
.ai-tip-links { display: grid; gap: 0.4rem; }
.ai-tip-links a { display: inline-flex; gap: 0.5rem; align-items: baseline; font-size: var(--tip-note); }

/* 좁은 본문 — 한 줄로 쌓는다 */
@container ai-tip (max-width: 44rem) {
	.ai-tip-verdicts, .ai-tip-letters, .ai-tip-cards, .ai-tip-cards.is-two { grid-template-columns: minmax(0, 1fr); }
	.ai-tip-diffs > li { padding: 0.9rem; }
	.ai-tip-versus { grid-template-columns: minmax(0, 1fr); }
	.ai-tip-ratio-parts > li { grid-template-columns: auto minmax(0, 1fr); }
	.ai-tip-ratio-score { grid-column: 1 / -1; white-space: normal; }
	.ai-tips-item { gap: 0.75rem; padding: 0.9rem; }
	.ai-tip-question { gap: 0.75rem; padding: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ai-tips-item { transition: none; }
	.ai-tips-item:hover { transform: none; }
}