/*
 * GPT 상세(/glossary/gpt) — 인포그래픽. SSOT 23절 "용어집" GPT 상세 · 11절 "디자인".
 * 읽는 순서: 제목 → 대표 그림 → 이름 풀이 → 네 뜻(줄기 + 가지) → LLM 포함 관계 → 학습과 추론 → 네 단계 + 이름 정리 → 네 방법(줄기 + 그림 가지) → 걸어온 길 → 주의할 점 → 출처.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 색: 항목마다 한 색(--item) — 줄의 가장자리와 선·점이 같은 색이다. 선은 public/js/ig-lines.js 가 svg 로 그린다.
 */
.gpt-page {
	--gpt-body: calc(1rem * var(--wa-font-size-scale, 1));
	--gpt-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--gpt-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	display: grid;
	container: gpt-page / inline-size;
	max-inline-size: 70rem;
	padding-block: 1rem 3rem;
	gap: clamp(2.75rem, 5vw, 3.75rem);
	color: var(--sonub-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.gpt-page :is(h2, h3, p, ul, ol, li, dl, dd, figure, pre) { margin: 0; }
.gpt-page :is(section, div, li, a) { min-inline-size: 0; }
.gpt-page :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.gpt-page h2 { font-size: var(--gpt-h2); }
.gpt-page :is(a, button, pre):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.gpt-block { display: grid; gap: 1.1rem; }
.gpt-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--gpt-body); line-height: 1.75; }
/* 확인한 날 — 페이지 제목 카드 맨 아래 단추 줄 끝의 조용한 글(단추가 아니다) */
.gpt-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--gpt-note); color: var(--sonub-muted); }
.gpt-subtitle { font-size: var(--gpt-body); }

/* 1. 대표 그림 · 비유 · 이름 풀이 */
.gpt-hero { overflow: hidden; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-s); }
/* 그림 아래쪽의 음악 비유까지 보여야 하므로 자르지 않는다(3:2) */
.gpt-hero img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; }
.gpt-easy, .gpt-summary { display: flex; gap: 0.6rem; align-items: baseline; max-inline-size: var(--sonub-reading-width); padding: 0.85rem 1rem; 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(--gpt-body); line-height: 1.7; }
.gpt-easy > i, .gpt-summary > i { color: var(--sonub-accent); }
.gpt-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gpt-names > li { display: grid; gap: 0.35rem; align-content: start; }
.gpt-letter { color: var(--sonub-accent); font-size: calc(2.2rem * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1; }
.gpt-names h3 { font-size: var(--gpt-body); line-height: 1.45; }
.gpt-names p { color: var(--sonub-muted); font-size: var(--gpt-note); line-height: 1.7; }

/* 2·6. 줄기와 가지 — 출발점 하나에서 줄기가 내려가 항목마다 가지가 들어간다 */
.gpt-page [data-item='design'], .gpt-page [data-item='chatgpt'], .gpt-page :is(.ig-line, .ig-node):is(.is-design, .is-chatgpt) { --item: var(--wa-color-green-50); }
.gpt-page [data-item='model'], .gpt-page [data-item='api'], .gpt-page :is(.ig-line, .ig-node):is(.is-model, .is-api) { --item: var(--wa-color-blue-50); }
.gpt-page [data-item='runner'], .gpt-page [data-item='local'], .gpt-page :is(.ig-line, .ig-node):is(.is-runner, .is-local) { --item: var(--wa-color-orange-50); }
.gpt-page [data-item='app'], .gpt-page [data-item='build'], .gpt-page :is(.ig-line, .ig-node):is(.is-app, .is-build) { --item: var(--wa-color-purple-50); }
.gpt-page .ig-line { fill: none; stroke: var(--item); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gpt-page .ig-line.is-trunk { stroke: var(--sonub-muted); }
.gpt-page .ig-node { r: 8px; fill: var(--item); stroke: var(--sonub-surface); stroke-width: 3; }
.gpt-fork { --fork-gutter: 3.5rem; position: relative; display: grid; gap: 1.25rem; }
.gpt-fork > .ig-svg { --webmovie-delay: 700ms; }
.gpt-origin { justify-self: start; display: inline-grid; place-items: center; min-inline-size: 2.6rem; block-size: 2.6rem; margin-inline-start: calc(var(--fork-gutter) / 2 - 1.3rem); padding-inline: 0.45rem; border-radius: 999px; background: var(--sonub-accent); color: var(--wa-color-brand-on-loud); font-size: var(--gpt-note); font-weight: 800; }
.gpt-rows { display: grid; gap: 1rem; padding-inline-start: var(--fork-gutter); }
.gpt-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: 'pic head' 'pic facts'; gap: 0.7rem 1.25rem; align-items: start; padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-inline-start: 4px solid var(--item); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.gpt-row > .sonub-icon-tile { grid-area: pic; justify-self: center; }
.gpt-pic { grid-area: pic; inline-size: 100%; block-size: auto; border-radius: var(--wa-border-radius-m); }
.gpt-row-head { grid-area: head; display: grid; gap: 0.25rem; }
.gpt-row-head h3 { font-size: var(--gpt-body); line-height: 1.45; }
.gpt-row-head p { color: var(--sonub-muted); font-size: var(--gpt-body); line-height: 1.65; }
.gpt-facts { grid-area: facts; display: grid; gap: 0.3rem; }
.gpt-facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; font-size: var(--gpt-note); line-height: 1.6; }
.gpt-facts dt { color: var(--sonub-muted); }
.gpt-facts dd { font-weight: 600; }
.gpt-use { grid-template-areas: 'pic head' 'pic facts' 'pic code' 'pic actions'; }
.gpt-code { grid-area: code; display: grid; gap: 0.35rem; }
.gpt-code figcaption { color: var(--sonub-muted); font-size: var(--gpt-note); }
.gpt-code pre { overflow-x: auto; padding: 0.8rem 1rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); font-size: var(--gpt-note); line-height: 1.6; text-align: start; }
.gpt-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gpt-actions .sonub-button { display: inline-flex; gap: 0.45rem; align-items: center; }
.gpt-summary { margin-block-start: 0.5rem; }

/* 3. LLM 포함 관계 — 왼쪽 도표 · 오른쪽 설명 */
.gpt-llm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: start; }
.gpt-llm-text { display: grid; gap: 0.75rem; }
.gpt-verdict { display: flex; gap: 0.55rem; align-items: baseline; font-size: var(--gpt-body); line-height: 1.65; }
.gpt-verdict.is-yes > i { color: var(--wa-color-success-fill-loud); }
.gpt-verdict.is-no > i { color: var(--wa-color-danger-fill-loud); }
/* 다른 회사 모델도 GPT 인가 — 기준·답·이유를 같은 세로줄에 맞춘다 */
.gpt-others { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.gpt-others > li { display: grid; grid-template-columns: 13rem 9rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.75rem 1rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); }
.gpt-others strong { font-size: var(--gpt-body); }
.gpt-others p { color: var(--sonub-muted); font-size: var(--gpt-note); line-height: 1.7; }
.gpt-others-verdict { display: inline-flex; gap: 0.4rem; align-items: baseline; font-size: var(--gpt-body); font-weight: 700; }
.gpt-others-verdict.is-no > i { color: var(--wa-color-danger-fill-loud); }
.gpt-others-verdict.is-yes > i { color: var(--wa-color-success-fill-loud); }
.gpt-others-verdict.is-partly > i { color: var(--wa-color-warning-fill-loud); }
.gpt-others-unsure { display: grid; gap: 0.4rem; margin-block: 0; max-inline-size: var(--sonub-reading-width); padding-inline-start: 1.25rem; font-size: var(--gpt-body); line-height: 1.7; }

/* 4. 학습과 추론 */
.gpt-answer { max-inline-size: var(--sonub-reading-width); font-size: var(--gpt-body); font-weight: 700; line-height: 1.7; }

/* 5. 자주 듣는 이름 — 이름 칸 폭이 모든 줄에서 같다 */
.gpt-runners { display: grid; gap: 0.4rem; }
.gpt-runners > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.55rem 0.85rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); font-size: var(--gpt-note); line-height: 1.6; }
.gpt-runners dt { font-weight: 700; }
.gpt-runners .is-format { outline: 1px dashed var(--sonub-muted); outline-offset: -1px; }

/* 7. 걸어온 길 — 세로 선 위의 날짜 점 */
.gpt-timeline { display: grid; gap: 1rem; padding-inline-start: 1.25rem !important; border-inline-start: 3px solid var(--sonub-accent); }
.gpt-timeline > li { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; font-size: var(--gpt-body); line-height: 1.65; }
.gpt-timeline > li::before { content: ''; position: absolute; inset-block-start: 0.5em; inset-inline-start: calc(-1.25rem - 3px / 2 - 0.4rem); inline-size: 0.8rem; block-size: 0.8rem; border-radius: 999px; background: var(--sonub-accent); box-shadow: 0 0 0 3px var(--sonub-surface); }
.gpt-timeline time { color: var(--sonub-muted); font-size: var(--gpt-note); font-variant-numeric: tabular-nums; }
.gpt-timeline .is-key { font-weight: 700; }
.gpt-timeline .is-key::before { background: var(--wa-color-warning-fill-loud); }
.gpt-model-names { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; vertical-align: baseline; }
.gpt-model-names code { padding: 0.05em 0.4em; border-radius: var(--sonub-radius-sm); background: var(--sonub-subtle); font-size: 0.9em; }

/* 8. 주의할 점 */
.gpt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gpt-cards > li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; }
.gpt-cards > li > .sonub-icon-tile { grid-row: 1 / 3; }
.gpt-cards h3 { font-size: var(--gpt-body); line-height: 1.45; }
.gpt-cards p { color: var(--sonub-muted); font-size: var(--gpt-note); line-height: 1.7; }

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

/* 좁은 본문 — 표가 넘치지 않게 한 줄로 쌓는다 */
@container gpt-page (max-width: 44rem) {
	.gpt-names, .gpt-cards, .gpt-llm { grid-template-columns: minmax(0, 1fr); }
	.gpt-fork { --fork-gutter: 2.75rem; }
	.gpt-row { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: 'pic head' 'facts facts'; gap: 0.7rem 0.75rem; padding: 0.9rem; }
	.gpt-use { grid-template-areas: 'pic head' 'facts facts' 'code code' 'actions actions'; }
	.gpt-facts > div, .gpt-runners > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
	.gpt-timeline > li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
	.gpt-others > li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}