/*
 * OpenRouter 상세(/glossary/open-router) — 인포그래픽. SSOT 23절 "용어집" OpenRouter 상세 · 11절 "디자인".
 * 읽는 순서: 제목(주장) → 네 길 갈림길(그림 → 출발점 → 줄기 → 길 카드) → 받는 돈 → 네 까닭 → 실측(리엔 · 에이전트 · 다른 모델) → 이득인 때 → 결정 → 출처.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 색: 길마다 고유색 하나(--route — 선 · 테두리 · 점) + 강조색 하나(warning 잉크, 피크 2배 · 답 한 번 비용에만).
 * 선은 public/js/ig-lines.js 가 svg 로 그리고(.ig-line), 실측 못 한 길은 점선 + 낭독 글자("가격표로 계산")로도 구분한다.
 */
.open-router {
	--or-body: calc(1rem * var(--wa-font-size-scale, 1));
	--or-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--or-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	--or-gap-group: clamp(2.75rem, 5vw, 3.75rem);
	--route: var(--sonub-accent);
	display: grid;
	container: open-router / inline-size;
	max-inline-size: 70rem;
	padding-block: 1rem 3rem;
	gap: var(--or-gap-group);
	color: var(--sonub-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.open-router :is(h2, h3, p, ul, ol, li, figure, dl, dd) { margin: 0; }
.open-router :is(section, div, li, a) { min-inline-size: 0; }
.open-router :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.open-router h2 { font-size: var(--or-h2); }
.open-router :is(a, button):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.open-router-block { display: grid; gap: 1.1rem; }
.open-router-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--or-body); line-height: 1.75; }
/* 잰 날 — 페이지 제목 카드 맨 아래 단추 줄 끝의 조용한 글(단추가 아니다) */
.open-router-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--or-note); color: var(--sonub-muted); }

/* 길마다 고유색 — 카드 테두리 · 줄기 위 점 · 가지가 같은 색을 쓴다 */
.open-router [data-route='direct'], .open-router :is(.ig-line, .ig-node).is-direct { --route: var(--wa-color-green-50); }
.open-router [data-route='via-deepseek'], .open-router :is(.ig-line, .ig-node).is-via-deepseek { --route: var(--wa-color-blue-50); }
.open-router [data-route='open-inference'], .open-router :is(.ig-line, .ig-node).is-open-inference { --route: var(--wa-color-orange-50); }
.open-router [data-route='sail'], .open-router :is(.ig-line, .ig-node).is-sail { --route: var(--wa-color-purple-50); }
.open-router .ig-line { fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.open-router .ig-line.is-dashed { stroke-width: 2.5; stroke-dasharray: 2 7; }
.open-router .ig-line.is-trunk { stroke: var(--sonub-muted); }
.open-router .ig-node { r: 8px; fill: var(--route); stroke: var(--sonub-surface); stroke-width: 3; }

/* 1. 갈림길 — 그림 아래 가장자리의 출발점 하나에서 줄기가 시작 쪽 여백을 따라 내려가고, 카드마다 색 점에서 가지가 들어간다 */
.open-router-fork { --fork-gutter: 3.5rem; display: grid; gap: 1.75rem; }
.open-router-hero { position: relative; }
.open-router-hero img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 45%; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-s); }
.open-router-origin { position: absolute; inset-block-end: -1.6rem; inset-inline-start: calc(var(--fork-gutter) / 2); inline-size: 1.2rem; block-size: 1.2rem; margin-inline-start: -0.6rem; border-radius: 999px; background: var(--sonub-muted); box-shadow: 0 0 0 3px var(--sonub-surface); }
.open-router-routes { display: grid; gap: 1rem; padding-inline-start: var(--fork-gutter); }
.open-router-route { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: 'pic head go' 'pic facts facts'; gap: 0.75rem 1.25rem; align-items: center; padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-inline-start: 5px solid var(--route); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.open-router-pic { grid-area: pic; align-self: start; inline-size: 100%; block-size: auto; aspect-ratio: 1; border-radius: var(--wa-border-radius-l); }
.open-router-route-head { grid-area: head; display: grid; gap: 0.2rem; }
.open-router-route-head h3 { font-size: calc(1.2rem * var(--wa-font-size-scale, 1)); line-height: 1.35; }
.open-router-route-head p { color: var(--sonub-muted); font-size: var(--or-note); line-height: 1.5; }
.open-router-go { grid-area: go; min-block-size: 2.5rem; gap: 0.4rem; padding-inline: 0.9rem; font-size: var(--or-note); white-space: nowrap; }
/* 이름표 칸 폭이 네 카드에서 같아, 값이 같은 세로 줄에서 시작한다 */
.open-router-facts { grid-area: facts; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.45rem 1rem; align-items: baseline; }
.open-router-facts > div { display: contents; }
.open-router-facts dt { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--sonub-muted); font-size: var(--or-note); font-weight: 650; line-height: 1.6; }
.open-router-facts dt i { inline-size: 1.1em; color: var(--route); text-align: center; }
.open-router-facts dd { font-size: var(--or-body); line-height: 1.6; font-variant-numeric: tabular-nums; }
.open-router-cost dd { color: var(--sonub-warning); font-weight: 750; }
.open-router-warn { color: var(--sonub-warning); font-size: var(--or-note); font-weight: 650; white-space: nowrap; }
.open-router-bad { color: var(--sonub-danger); font-weight: 750; }
.open-router-estimated { display: inline-block; margin-inline-start: 0.5rem; color: var(--sonub-muted); font-size: var(--or-note); font-weight: 500; }

/* 3·7. 나란한 카드 — 까닭 넷 · 이득인 때 다섯 */
.open-router-why, .open-router-when { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
/* 다섯 장은 넓은 화면에서 3 + 2 로(4 + 1 이면 한 장만 외톨이) */
.open-router-when { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.open-router-when h3 code { padding: 0.05em 0.35em; border-radius: var(--sonub-radius-sm); background: var(--sonub-subtle); font-size: 0.92em; }
.open-router-why > li, .open-router-when > li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; }
.open-router-why > li > .sonub-icon-tile, .open-router-when > li > .sonub-icon-tile { grid-row: 1 / 3; }
.open-router-why h3, .open-router-when h3 { font-size: var(--or-body); line-height: 1.45; }
.open-router-why p, .open-router-when p { color: var(--sonub-muted); font-size: var(--or-note); line-height: 1.7; }

/* 6. 다른 모델 — 한 줄에 모델 하나: 이름 · 걸음 시간 막대 · 코딩 · 비용 · 캐시(칸 폭이 모든 줄에서 같다) */
.open-router-models { display: grid; grid-template-columns: minmax(11rem, 1.3fr) minmax(10rem, 1.6fr) repeat(3, minmax(5.5rem, auto)); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); overflow: hidden; }
.open-router-model { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 1rem; align-items: center; padding: 0.75rem 1.1rem; border-block-start: 1px solid var(--sonub-border); font-size: var(--or-body); font-variant-numeric: tabular-nums; }
.open-router-model.is-head { border-block-start: 0; background: var(--sonub-subtle); color: var(--sonub-muted); font-size: var(--or-note); font-weight: 650; }
.open-router-model.is-baseline { background: var(--sonub-accent-soft); }
.open-router-model-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; font-weight: 650; }
.open-router-model-name a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sonub-accent-ink); }
.open-router-model-name a i { font-size: 0.75em; }
.open-router-baseline { padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--sonub-accent); color: var(--sonub-on-accent); font-size: var(--or-note); font-weight: 650; }
.open-router-model-step { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; gap: 0.6rem; align-items: center; }
.open-router-bar { display: block; block-size: 0.6rem; border-radius: 999px; background: var(--sonub-border); overflow: hidden; }
.open-router-bar > span { display: block; inline-size: var(--pct); block-size: 100%; border-radius: inherit; background: var(--wa-color-blue-50); }
.open-router-model.is-baseline .open-router-bar > span { background: var(--wa-color-green-50); }
.open-router-model-value { text-align: end; }
.open-router-model-code { display: inline-flex; align-items: center; gap: 0.35rem; }
.open-router-model-code.is-full i { color: var(--sonub-success); }
.open-router-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--or-note); }
.open-router-links a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sonub-accent-ink); }

/* 8. 결정 */
.open-router-sonub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.open-router-sonub > a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; }
.open-router-sonub > a > .sonub-icon-tile { grid-row: 1 / 3; }
.open-router-sonub h3 { font-size: var(--or-body); color: var(--sonub-ink); }
.open-router-sonub p { color: var(--sonub-muted); font-size: var(--or-note); line-height: 1.7; }
.open-router-summary { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-accent-soft); color: var(--sonub-ink); font-size: var(--or-body); font-weight: 650; line-height: 1.7; }
.open-router-summary i { margin-block-start: 0.3em; color: var(--sonub-accent-ink); }

/* 좁으면 줄마다 카드 — 이름 · 막대가 한 줄씩, 숫자 셋은 이름표와 함께 한 줄에 */
@container open-router (max-width: 52rem) {
	.open-router-models { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.open-router-model { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: auto; gap: 0.5rem 1rem; }
	.open-router-model.is-head { display: none; }
	.open-router-model-name, .open-router-model-step { grid-column: 1 / -1; }
	.open-router-model > [role='cell']:nth-child(n + 3) { display: block; white-space: nowrap; }
	.open-router-model-code i { margin-inline-end: 0.35rem; }
	.open-router-model > [role='cell']:nth-child(n + 3)::before { content: attr(data-label); display: block; color: var(--sonub-muted); font-size: var(--or-note); font-weight: 650; white-space: normal; }
}
@container open-router (max-width: 46rem) {
	.open-router-hero img { aspect-ratio: 3 / 2; }
	.open-router-route { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
	.open-router-sonub { grid-template-columns: minmax(0, 1fr); }
}
@container open-router (max-width: 34rem) {
	.open-router-fork { --fork-gutter: 2.75rem; }
	.open-router-route { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: 'pic head' 'facts facts' 'go go'; gap: 0.7rem 0.75rem; padding: 0.9rem; }
	.open-router-go { justify-self: start; }
	.open-router-facts { grid-template-columns: minmax(0, 1fr); row-gap: 0.7rem; }
	.open-router-facts > div { display: grid; gap: 0.1rem; }
}