/*
 * 용어집 상세(/glossary/<이름>) — 모든 용어가 같은 모양. SSOT 23절 "용어집" · 11절 "디자인".
 * 읽는 순서: 머리 → 무엇인가(그림 + 설명) → 어떻게 돌아가나(순서도) → 이렇게 씁니다(출발점 → 줄기 → 가지) → 주의할 점 → 예 → 함께 볼 용어 → 원문과 공식 문서.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 색: 브랜드 하나(줄기·가지·점·코드) + 경고색 하나(주의할 점에만). 선은 public/js/ig-lines.js 가 svg 로 그린다(.ig-line).
 */
.glossary-detail {
	--gt-body: calc(1rem * var(--wa-font-size-scale, 1));
	--gt-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--gt-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	display: grid;
	container: glossary-detail / inline-size;
	max-inline-size: 64rem;
	padding-block: 1rem 3rem;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	color: var(--sonub-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.glossary-detail :is(h2, p, ul, ol, li, figure) { margin: 0; }
.glossary-detail :is(section, div, li, a) { min-inline-size: 0; }
.glossary-detail :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.glossary-detail h2 { font-size: var(--gt-h2); }
.glossary-detail :is(a, button):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.glossary-detail-block { display: grid; gap: 1.1rem; }
/* 분류 이름 — 페이지 제목 카드 맨 아래 단추 줄 끝의 조용한 글(단추가 아니다) */
.glossary-detail-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--gt-note); color: var(--sonub-muted); }

/* 글 속 코드 — 번역하지 않는 조각 */
.glossary-detail code { padding: 0.05em 0.35em; border-radius: var(--sonub-radius-sm); background: var(--sonub-subtle); color: var(--sonub-ink); font-size: 0.92em; overflow-wrap: anywhere; }
.glossary-detail .glossary-detail-code { display: inline-block; padding: 0.2rem 0.55rem; background: var(--sonub-accent-soft); color: var(--sonub-accent-ink); font-weight: 650; }

/* 1. 무엇인가 — 그림 옆에 설명, 좁으면 위아래 */
.glossary-detail-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem 2rem; align-items: start; }
.glossary-detail-hero img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-s); }
.glossary-detail-what { display: grid; gap: 1rem; }
.glossary-detail-what > p { font-size: var(--gt-body); line-height: 1.8; }
.glossary-detail-easy { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1.1rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-accent-soft); font-size: var(--gt-body); line-height: 1.7; }
.glossary-detail-easy > i { margin-block-start: 0.3em; color: var(--sonub-accent-ink); }
.glossary-detail-easy b { margin-inline-end: 0.35rem; color: var(--sonub-accent-ink); }

/* 3. 이렇게 씁니다 — 출발점(손 아이콘)에서 줄기가 시작 쪽 여백을 따라 내려가고, 쓰는 법마다 점에서 가지가 들어간다 */
.glossary-detail-fork { --fork-gutter: 3.25rem; display: grid; gap: 0.9rem; }
.glossary-detail-origin { display: inline-grid; place-items: center; justify-self: start; inline-size: 2.5rem; block-size: 2.5rem; margin-inline-start: calc(var(--fork-gutter) / 2 - 1.25rem); border-radius: 999px; background: var(--sonub-accent); color: var(--sonub-on-accent); box-shadow: 0 0 0 4px var(--sonub-surface); }
.glossary-detail-uses { display: grid; gap: 0.85rem; padding-inline-start: var(--fork-gutter); }
.glossary-detail-use { display: grid; gap: 0.45rem; padding: 0.9rem 1.1rem; 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); box-shadow: var(--wa-shadow-xs); }
.glossary-detail-use > .glossary-detail-use-head { font-weight: 650; line-height: 1.9; }
.glossary-detail-use-head > code { padding: 0.2rem 0.55rem; background: var(--sonub-accent-soft); color: var(--sonub-accent-ink); }
.glossary-detail-use > p { font-size: var(--gt-body); line-height: 1.7; }
.glossary-detail .ig-line { fill: none; stroke: var(--sonub-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.glossary-detail .ig-node { r: 7px; fill: var(--sonub-accent); stroke: var(--sonub-surface); stroke-width: 3; }

/* 4. 주의할 점 — 경고색은 여기에만 */
.glossary-detail-caution { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.2rem; border: 1px solid var(--sonub-warning); border-radius: var(--wa-border-radius-l); background: var(--sonub-warning-soft); font-size: var(--gt-body); line-height: 1.75; }
.glossary-detail-caution > i { margin-block-start: 0.3em; color: var(--sonub-warning); }

/* 5. 예 — 코드 한 줄 + 설명 */
.glossary-detail-examples { display: grid; gap: 0.6rem; }
.glossary-detail-examples > li { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; padding: 0.7rem 1rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-subtle); font-size: var(--gt-body); line-height: 1.65; }

/* 6. 함께 볼 용어 */
.glossary-detail-related { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.glossary-detail-related .sonub-button { gap: 0.4rem; min-block-size: 44px; }
.glossary-detail-chip { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 0.9rem; border: 1px dashed var(--sonub-border); border-radius: var(--sonub-radius-control); }

/* 7. 원문과 공식 문서 — 원문(용어 자리)을 맨 위에 진하게 */
.glossary-detail-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--gt-note); line-height: 1.7; }
.glossary-detail-links { display: grid; gap: 0.5rem; }
.glossary-detail-links a { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; min-block-size: 44px; padding: 0.55rem 0.9rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); color: var(--sonub-accent-ink); font-size: var(--gt-note); text-decoration: none; overflow-wrap: anywhere; }
.glossary-detail-links a:hover { border-color: var(--sonub-accent); }
.glossary-detail-links .is-source a { border-color: var(--sonub-accent); background: var(--sonub-accent-soft); font-size: var(--gt-body); }
.glossary-detail-links .is-source a > span:first-of-type { display: grid; gap: 0.1rem; }
.glossary-detail-checked { margin-inline-start: auto; color: var(--sonub-muted); font-size: var(--gt-note); }

@container glossary-detail (max-width: 46rem) {
	.glossary-detail-intro { grid-template-columns: minmax(0, 1fr); }
}
@container glossary-detail (max-width: 30rem) {
	.glossary-detail-fork { --fork-gutter: 2.5rem; }
	.glossary-detail-checked { margin-inline-start: 0; }
}