/*
 * DeepSeek 상세(/glossary/deepseek) — 인포그래픽. SSOT 23절 "용어집" DeepSeek 상세 · 11절 "디자인".
 * 읽는 순서: 제목 → 대표 그림 → 한눈에 네 칸 → 걸어온 길(세로 선 위 날짜 점) → 모델 비교표 → 부르는 법(순서도 + curl) → 싼 까닭 → 공개 가중치 → 주의할 점 → SONUB 에서 → 출처.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 색: 고래 파랑(--ds-blue) 하나를 걸어온 길의 선·점에 쓰고, R1 만 강조색(warning)으로 띄운다.
 */
.deepseek {
	--ds-body: calc(1rem * var(--wa-font-size-scale, 1));
	--ds-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--ds-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	--ds-blue: var(--wa-color-blue-50);
	display: grid;
	container: deepseek / 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;
}
.deepseek :is(h2, h3, p, ul, ol, li, figure, pre) { margin: 0; }
.deepseek :is(section, div, li, a) { min-inline-size: 0; }
.deepseek :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.deepseek h2 { font-size: var(--ds-h2); }
.deepseek :is(a, button, pre):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.deepseek p code, .deepseek li code { padding: 0.05em 0.35em; border-radius: var(--sonub-radius-sm); background: var(--sonub-subtle); font-size: 0.92em; overflow-wrap: anywhere; }
.deepseek-block { display: grid; gap: 1.1rem; }
.deepseek-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--ds-body); line-height: 1.75; }
.deepseek-foot { display: flex; gap: 0.5rem; align-items: baseline; color: var(--sonub-muted); font-size: var(--ds-note); line-height: 1.6; }
/* 확인한 날 — 페이지 제목 카드 맨 아래 단추 줄 끝의 조용한 글(단추가 아니다) */
.deepseek-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--ds-note); color: var(--sonub-muted); }

/* 1. 대표 그림 + 나란한 카드(한눈에 · 싼 까닭 · 주의할 점) */
.deepseek-hero img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 40%; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-s); }
/* 네 장은 2 × 2 로 — 한 줄 넷이면 카드가 좁아 글이 길게 접힌다 */
.deepseek-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.deepseek-cards > li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; }
.deepseek-cards > li > .sonub-icon-tile { grid-row: 1 / 3; }
.deepseek-cards h3 { font-size: var(--ds-body); line-height: 1.45; }
.deepseek-cards p { color: var(--sonub-muted); font-size: var(--ds-note); line-height: 1.7; }
.deepseek-cards.is-caution > li { border-inline-start: 4px solid var(--sonub-warning); }

/* 2. 걸어온 길 — 시작 쪽 세로 선 하나, 날짜마다 점. 마지막(지금)은 채운 점, R1 은 강조 */
.deepseek-timeline { position: relative; display: grid; gap: 1rem; padding-inline-start: 2rem; }
.deepseek-timeline::before { content: ''; position: absolute; inset-block: 0.6rem; inset-inline-start: 0.55rem; inline-size: 3px; border-radius: 3px; background: var(--ds-blue); opacity: 0.45; }
.deepseek-timeline > li { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: baseline; }
.deepseek-timeline > li::before { content: ''; position: absolute; inset-block-start: 0.45rem; inset-inline-start: -1.85rem; inline-size: 0.85rem; block-size: 0.85rem; border: 3px solid var(--ds-blue); border-radius: 999px; background: var(--sonub-surface); }
.deepseek-timeline > li.is-now::before { background: var(--ds-blue); }
.deepseek-timeline time { color: var(--sonub-muted); font-size: var(--ds-note); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deepseek-timeline p { font-size: var(--ds-body); line-height: 1.65; }
.deepseek-timeline > li.is-key { padding: 0.75rem 0.5rem; margin-inline-start: -0.5rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-warning-soft); }
.deepseek-timeline > li.is-key::before { inset-inline-start: -1.35rem; inset-block-start: 1.2rem; border-color: var(--sonub-warning); background: var(--sonub-warning); }
.deepseek-timeline > li.is-key p { font-weight: 600; }

/* 4. 부르는 법 — curl */
.deepseek-code { display: grid; gap: 0.4rem; }
.deepseek-code figcaption { color: var(--sonub-muted); font-size: var(--ds-note); font-weight: 650; }
.deepseek-code pre { padding: 1rem 1.25rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-subtle); color: var(--sonub-ink); font-size: var(--ds-note); line-height: 1.6; overflow-x: auto; text-align: start; }

/* 6. 공개 가중치 */
.deepseek-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem 1.1rem; align-items: center; }
.deepseek-open > div { display: grid; gap: 0.5rem; }
.deepseek-open p { font-size: var(--ds-body); line-height: 1.7; }
.deepseek-open .deepseek-warn { color: var(--sonub-muted); font-size: var(--ds-note); }
.deepseek-go { min-block-size: 2.5rem; gap: 0.4rem; padding-inline: 0.9rem; font-size: var(--ds-note); white-space: nowrap; }

/* 8. SONUB 에서 */
.deepseek-sonub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.deepseek-sonub > a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; }
.deepseek-sonub > a > .sonub-icon-tile { grid-row: 1 / 3; }
.deepseek-sonub h3 { font-size: var(--ds-body); color: var(--sonub-ink); }
.deepseek-sonub p { color: var(--sonub-muted); font-size: var(--ds-note); line-height: 1.7; }
.deepseek-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(--ds-body); font-weight: 650; line-height: 1.7; }
.deepseek-summary i { margin-block-start: 0.3em; color: var(--sonub-accent-ink); }

/* 9. 출처 */
.deepseek-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--ds-note); }
.deepseek-links a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sonub-accent-ink); }

@container deepseek (max-width: 52rem) {
	.deepseek-sonub { grid-template-columns: minmax(0, 1fr); }
}
@container deepseek (max-width: 40rem) {
	.deepseek-cards { grid-template-columns: minmax(0, 1fr); }
	.deepseek-hero img { aspect-ratio: 3 / 2; }
	.deepseek-timeline > li { grid-template-columns: minmax(0, 1fr); }
	.deepseek-open { grid-template-columns: auto minmax(0, 1fr); }
	.deepseek-go { grid-column: 1 / -1; justify-self: start; }
}