/*
 * 가중치·파라미터 상세(/glossary/weights-and-parameters) — 인포그래픽. SSOT 23절 "용어집" 가중치·파라미터 상세 · 11절 "디자인".
 * 읽는 순서: 제목 → 대표 그림 → 두 영어 낱말 → 파라미터 상자 → 가중치 계산 → 학습 → 3B·7B → 크기 → 공개 방식 세 단계(줄기 + 그림 가지) → 직접 돌려 보기 → 헷갈리는 것 → 출처.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 색: 항목마다 한 색(--item) — 줄의 가장자리와 선·점이 같은 색이다. 선은 public/js/ig-lines.js 가 svg 로 그린다.
 */
.wp-page {
	--wp-body: calc(1rem * var(--wa-font-size-scale, 1));
	--wp-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--wp-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	display: grid;
	container: wp-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;
}
.wp-page :is(h2, h3, p, ul, ol, li, dl, dd, figure, pre) { margin: 0; }
.wp-page :is(section, div, li, a) { min-inline-size: 0; }
.wp-page :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.wp-page h2 { font-size: var(--wp-h2); }
.wp-page :is(a, button, pre):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.wp-block { display: grid; gap: 1.1rem; }
.wp-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--wp-body); line-height: 1.75; }
.wp-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--wp-note); color: var(--sonub-muted); }
.wp-subtitle { margin-block-start: 0.75rem !important; font-size: var(--wp-body); }
.wp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wp-actions .sonub-button { display: inline-flex; gap: 0.45rem; align-items: center; }
.wp-pic { inline-size: 100%; block-size: auto; border-radius: var(--wa-border-radius-m); }
.wp-callout { 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(--wp-body); font-weight: 600; line-height: 1.65; }
.wp-callout > i { color: var(--sonub-accent); }
.wp-callout.is-warning { background: color-mix(in srgb, var(--wa-color-warning-fill-loud) 12%, var(--wa-color-surface-raised)); }
.wp-callout.is-warning > i { color: var(--wa-color-warning-on-quiet); }

/* 1. 대표 그림 · 두 낱말 */
.wp-hero { overflow: hidden; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-s); }
.wp-hero img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; }
.wp-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.wp-names > li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.wp-name-body { display: grid; gap: 0.4rem; }
.wp-word { color: var(--sonub-accent); font-size: calc(1.9rem * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1.1; text-align: start; }
.wp-name-body h3 { font-size: var(--wp-body); line-height: 1.45; }
.wp-name-body p { font-size: var(--wp-note); line-height: 1.7; }
.wp-say { color: var(--sonub-muted); }
.wp-like { display: flex; gap: 0.45rem; align-items: baseline; font-weight: 600; }
.wp-like > i { color: var(--sonub-accent); }

/* 2. 파라미터 상자 — 바깥 상자가 네 종류를 품는다, 가중치가 가장 크다 */
.wp-family { display: grid; gap: 0.75rem; padding: 1.1rem 1.25rem; border: 2px solid var(--sonub-accent); border-radius: var(--wa-border-radius-l); }
.wp-family figcaption { color: var(--sonub-accent); font-size: var(--wp-body); font-weight: 800; }
.wp-family ul { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.75rem; }
.wp-family li { display: block; padding: 0.8rem 0.9rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); font-size: var(--wp-note); line-height: 1.6; }
.wp-family li.is-main { background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 14%, var(--wa-color-surface-raised)); }
.wp-family b { font-size: var(--wp-body); }
.wp-kind-word { display: block; color: var(--sonub-muted); }
.wp-family p { margin-block-start: 0.35rem; }

/* 3. 식 — 글자마다 이름. 식은 언어와 상관없이 왼쪽에서 오른쪽으로 */
.wp-page [data-token='y'] { --item: var(--wa-color-purple-50); }
.wp-page [data-token='w'] { --item: var(--wa-color-orange-50); }
.wp-page [data-token='x'] { --item: var(--wa-color-blue-50); }
.wp-page [data-token='b'] { --item: var(--wa-color-green-50); }
.wp-formula { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-subtle); }
.wp-token { display: grid; justify-items: center; gap: 0.2rem; min-inline-size: 4.5rem; padding: 0.55rem 0.8rem; border: 2px solid var(--item); border-radius: var(--wa-border-radius-m); background: var(--wa-color-surface-raised); }
.wp-token b { color: var(--item); font-size: calc(2rem * var(--wa-font-size-scale, 1)); font-style: italic; line-height: 1.1; }
.wp-token small { font-size: var(--wp-note); }
.wp-joint { color: var(--sonub-muted); font-size: calc(1.6rem * var(--wa-font-size-scale, 1)); font-weight: 700; }
.wp-cases { display: grid; gap: 0.4rem; }
.wp-cases > li { 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(--wp-note); line-height: 1.6; }
.wp-cases code { font-size: var(--wp-body); text-align: start; }
.wp-cases code b { color: var(--sonub-accent); }

/* 5. 글자의 뜻 · 막대 · 이름 읽기 */
.wp-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.wp-units > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); }
.wp-units dt { color: var(--sonub-accent); font-size: calc(2rem * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1; }
.wp-units dd { display: grid; font-size: var(--wp-note); line-height: 1.5; }
.wp-units dd span { overflow-wrap: anywhere; color: var(--sonub-muted); font-variant-numeric: tabular-nums; text-align: start; }
/* 눈금이 하나라 작은 모델은 점으로 보인다 — 값이 있는 줄이 비어 보이지 않게 점 크기까지만 */
.wp-page .dg-bar-fill { min-inline-size: 0.5rem; }
.wp-page [data-part='name'] { --item: var(--sonub-muted); }
.wp-page [data-part='total'] { --item: var(--wa-color-purple-50); }
.wp-page [data-part='active'] { --item: var(--wa-color-green-50); }
.wp-model-name { display: grid; gap: 0.85rem; padding: 1.1rem 1.25rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-subtle); }
.wp-name-tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; font-size: calc(1.35rem * var(--wa-font-size-scale, 1)); font-weight: 800; }
.wp-name-tokens span { padding: 0.15rem 0.6rem; border-block-end: 4px solid var(--item); }
.wp-name-tokens span + span::before { content: '-'; margin-inline-end: 0.5rem; color: var(--sonub-muted); }
.wp-name-parts { display: grid; gap: 0.3rem; }
.wp-name-parts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; font-size: var(--wp-note); line-height: 1.6; }
.wp-name-parts dt { color: var(--item); font-weight: 800; text-align: start; }

/* 6. 크기 */
.wp-formula-line { max-inline-size: var(--sonub-reading-width); padding: 0.7rem 1rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); font-size: var(--wp-body); font-weight: 600; }

/* 7. 줄기와 가지 — 출발점 하나에서 줄기가 내려가 단계마다 가지가 들어간다 */
.wp-page [data-item='closed'], .wp-page :is(.ig-line, .ig-node).is-closed { --item: var(--wa-color-orange-50); }
.wp-page [data-item='weights'], .wp-page :is(.ig-line, .ig-node).is-weights { --item: var(--wa-color-blue-50); }
.wp-page [data-item='source'], .wp-page :is(.ig-line, .ig-node).is-source { --item: var(--wa-color-green-50); }
.wp-page .ig-line { fill: none; stroke: var(--item); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wp-page .ig-line.is-trunk { stroke: var(--sonub-muted); }
.wp-page .ig-node { r: 8px; fill: var(--item); stroke: var(--sonub-surface); stroke-width: 3; }
.wp-fork { --fork-gutter: 3.5rem; position: relative; display: grid; gap: 1.25rem; }
.wp-fork > .ig-svg { --webmovie-delay: 700ms; }
.wp-origin { justify-self: start; display: inline-grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; margin-inline-start: calc(var(--fork-gutter) / 2 - 1.3rem); border-radius: 50%; background: var(--sonub-accent); color: var(--wa-color-brand-on-loud); }
.wp-rows { display: grid; gap: 1rem; padding-inline-start: var(--fork-gutter) !important; }
.wp-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.1rem 1.25rem; border: 1px solid var(--wa-color-surface-border); border-inline-start: 5px solid var(--item); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); }
.wp-row-head { display: grid; gap: 0.45rem; }
.wp-row-head h3 { font-size: var(--wp-body); line-height: 1.45; }
.wp-row-head p:not(.wp-eg, .wp-actions) { color: var(--sonub-muted); font-size: var(--wp-body); line-height: 1.65; }
.wp-eg { font-size: var(--wp-note); line-height: 1.6; }
.wp-eg b { margin-inline-end: 0.4rem; color: var(--sonub-muted); font-weight: 600; }
.wp-licenses { display: grid; gap: 0.4rem; }
.wp-licenses > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.6rem 0.85rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); font-size: var(--wp-note); line-height: 1.6; }
.wp-licenses dt { font-weight: 700; text-align: start; }
.wp-eg-names { display: block; color: var(--sonub-muted); }
.wp-trend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.wp-trend p { font-size: var(--wp-body); line-height: 1.7; }
.wp-trend .sonub-button { display: inline-flex; gap: 0.45rem; align-items: center; }

/* 8. 명령 */
.wp-code { display: grid; gap: 0.35rem; }
.wp-code figcaption { color: var(--sonub-muted); font-size: var(--wp-note); }
.wp-code pre { overflow-x: auto; padding: 0.8rem 1rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); font-size: var(--wp-note); line-height: 1.6; text-align: start; }

/* 9. 헷갈리는 것 */
.wp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.wp-cards > li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; }
.wp-cards > li > .sonub-icon-tile { grid-row: 1 / 3; }
.wp-cards h3 { font-size: var(--wp-body); line-height: 1.45; }
.wp-cards p { color: var(--sonub-muted); font-size: var(--wp-note); line-height: 1.7; }

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

/* 좁은 본문 */
@container wp-page (max-width: 46rem) {
	.wp-names, .wp-units, .wp-cards { grid-template-columns: minmax(0, 1fr); }
	.wp-family ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-family li.is-main { grid-column: 1 / -1; }
	.wp-trend { grid-template-columns: auto minmax(0, 1fr); }
	.wp-trend .sonub-button { grid-column: 1 / -1; justify-self: start; }
}
@container wp-page (max-width: 30rem) {
	.wp-names > li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; }
	.wp-cases > li, .wp-name-parts > div, .wp-licenses > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
	.wp-fork { --fork-gutter: 2.5rem; }
	.wp-row { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem; }
	.wp-family { padding: 0.9rem; }
	.wp-family ul { grid-template-columns: minmax(0, 1fr); }
}