/*
 * 코덱스 닷(/codex-dots) — 인포그래픽. SSOT 23절 "에이전트 툴" · 11절 "디자인".
 * 읽는 순서: 제목 → 한 문장(그림 | 설명 · 이름 풀이 · 사실 셋) → 나 → dot → Codex 작업 → 결과 사슬 · Codex 를 쓰는 세 가지 줄기
 *           → 규칙 줄기(세 카드) → 기기 셋 → dot → Codex 선 · 요금제 셋 → 사용 한도 → 안전 수칙 → 공식 출처.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 선은 public/js/ig-lines.js 가 svg 로 내용 뒤에 그린다(.ig-line) — 사슬은 브랜드색, 줄기는 옅은 글자색, 가지는 규칙마다 그 색.
 */
.codex-dots {
	--cd-body: calc(1rem * var(--wa-font-size-scale, 1));
	--cd-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--cd-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	--cd-h3: calc(1.1rem * var(--wa-font-size-scale, 1));
	--cd-gutter: 2.75rem;
	--cd-danger: var(--wa-color-danger-fill-loud);
	display: grid;
	container: codex-dots / 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;
}
.codex-dots :is(h2, h3, h4, p, ul, ol, li, figure) { margin: 0; }
.codex-dots :is(section, div, li, a) { min-inline-size: 0; }
.codex-dots :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.codex-dots h2 { font-size: var(--cd-h2); }
.codex-dots :is(a, button):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.codex-dots .sonub-icon-tile[data-tone='danger'] { --tile-ink: var(--wa-color-danger-on-quiet); --tile-bg: var(--wa-color-danger-fill-quiet); }
.cdots-block { display: grid; gap: 1.1rem; }
.cdots-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--cd-body); line-height: 1.75; }
.cdots-label { color: var(--sonub-muted); font-size: var(--cd-note); font-weight: 650; }
.cdots-pic { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; border-radius: var(--wa-border-radius-l); }
.cdots-go { justify-self: start; gap: 0.45rem; }

/* 선 — 사슬(순서) · 줄기(하나에서 여럿) · 가지 */
.codex-dots .ig-line { fill: none; stroke: var(--sonub-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.codex-dots .ig-line.is-trunk { stroke: var(--sonub-muted); }
.codex-dots .ig-line.is-branch { stroke: var(--wa-color-success-fill-loud); stroke-width: 2.5; }
.codex-dots .ig-node { r: 6px; fill: var(--wa-color-success-fill-loud); stroke: var(--sonub-surface); stroke-width: 3; }
.codex-dots :is(.ig-line, .ig-node).is-alone { stroke: var(--wa-color-success-fill-loud); }
.codex-dots :is(.ig-line, .ig-node).is-ask { stroke: var(--wa-color-warning-fill-loud); }
.codex-dots :is(.ig-line, .ig-node).is-never { stroke: var(--cd-danger); }
.codex-dots .ig-node.is-alone { fill: var(--wa-color-success-fill-loud); }
.codex-dots .ig-node.is-ask { fill: var(--wa-color-warning-fill-loud); }
.codex-dots .ig-node.is-never { fill: var(--cd-danger); }
.codex-dots .ig-node:is(.is-alone, .is-ask, .is-never) { stroke: var(--sonub-surface); }

/* 1. 한 문장 — 넓으면 그림 | 설명, 좁으면 위아래 */
.cdots-what { display: grid; gap: 1.75rem; align-items: center; }
@container codex-dots (min-inline-size: 56rem) {
	.cdots-what { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.cdots-hero img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-s); }
.cdots-what-text { display: grid; gap: 1.1rem; }
.cdots-big { font-size: calc(1.15rem * var(--wa-font-size-scale, 1)); font-weight: 600; line-height: 1.65; }
.cdots-name { display: grid; gap: 0.4rem; padding: 0.9rem 1.1rem; border-inline-start: 4px solid var(--sonub-accent); border-radius: var(--wa-border-radius-m); background: var(--sonub-accent-soft); }
.cdots-name h3 { font-size: var(--cd-body); }
.cdots-name p { font-size: var(--cd-body); line-height: 1.7; }
.cdots-facts { display: grid; gap: 0.6rem; }
.cdots-facts li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--cd-body); font-weight: 600; line-height: 1.45; }

/* 2. 함께 일하는 길 — 넓으면 네 칸이 한 줄, 좁으면 한 칸씩 아래로 */
.cdots-flow { display: grid; gap: 1.5rem; }
@container codex-dots (min-inline-size: 56rem) {
	.cdots-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem; }
}
.cdots-node { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: start; padding: 0.95rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.cdots-node[data-node='dot'] { border-color: color-mix(in srgb, var(--sonub-accent) 55%, var(--sonub-border)); }
.cdots-node h3 { display: flex; align-items: center; gap: 0.45rem; font-size: var(--cd-h3); line-height: 1.35; }
.cdots-node p { margin-block-start: 0.25rem; color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.55; }
.cdots-n { display: inline-grid; place-items: center; flex: none; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 999px; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-size: var(--cd-note); font-weight: 800; }
.cdots-tasks-lines { display: grid; gap: 0.75rem; }
.cdots-tasks { display: grid; gap: 0.6rem; padding-inline-start: var(--cd-gutter); max-inline-size: 54rem; }
.cdots-task { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: start; padding: 0.75rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); }
.cdots-task > .fa { margin-block-start: 0.2rem; color: var(--wa-color-success-on-quiet); font-size: calc(1.2rem * var(--wa-font-size-scale, 1)); }
.cdots-task h4 { font-size: var(--cd-body); line-height: 1.4; }
.cdots-task p { color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.6; }

/* 3. 규칙 — 출발점 아래 줄기, 카드마다 그림 | 제목·설명 */
.cdots-rules-lines { display: grid; gap: 1rem; }
.cdots-start { display: inline-flex; justify-self: start; align-items: center; gap: 0.55rem; padding: 0.6rem 1rem; border: 1px solid var(--sonub-border); border-radius: 999px; background: var(--sonub-surface); font-size: var(--cd-body); font-weight: 700; }
.cdots-start .fa { color: var(--sonub-accent); }
.cdots-rules { display: grid; gap: 1rem; padding-inline-start: var(--cd-gutter); max-inline-size: 58rem; }
.cdots-rule { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem 1.25rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid var(--sonub-border); border-inline-start-width: 5px; border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.cdots-rule[data-rule='alone'] { border-inline-start-color: var(--wa-color-success-fill-loud); }
.cdots-rule[data-rule='ask'] { border-inline-start-color: var(--wa-color-warning-fill-loud); }
.cdots-rule[data-rule='never'] { border-inline-start-color: var(--cd-danger); }
.cdots-rule h3 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--cd-h3); line-height: 1.35; }
.cdots-rule p { margin-block-start: 0.45rem; font-size: var(--cd-body); line-height: 1.7; }
@container codex-dots (max-inline-size: 34rem) {
	.cdots-rule { grid-template-columns: 4.5rem minmax(0, 1fr); padding: 0.9rem; }
	.cdots-rules { padding-inline-start: 2rem; }
}

/* 4. 어디서 · 누가 — 그림 | 기기 셋 → dot → Codex, 아래 요금제 셋 */
.cdots-where { display: grid; gap: 1.5rem; align-items: center; }
@container codex-dots (min-inline-size: 48rem) {
	.cdots-where { grid-template-columns: 15rem minmax(0, 1fr); }
}
.cdots-where-pic { max-inline-size: 15rem; justify-self: center; }
.cdots-where-map { display: grid; gap: 2.5rem; justify-items: center; }
.cdots-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; inline-size: 100%; }
.cdots-device { display: grid; justify-items: center; gap: 0.3rem; padding: 0.8rem 0.6rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); text-align: center; }
.cdots-device .fa { color: var(--sonub-accent); font-size: calc(1.5rem * var(--wa-font-size-scale, 1)); }
.cdots-device strong { font-size: var(--cd-note); line-height: 1.35; }
.cdots-device span { color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.35; }
@container codex-dots (max-inline-size: 34rem) {
	.cdots-devices { gap: 0.4rem; }
	.cdots-device { padding: 0.7rem 0.35rem; }
	.cdots-device :is(strong, span) { word-break: normal; }
}
.cdots-hub { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.25rem; border: 2px solid var(--sonub-accent); border-radius: 999px; background: var(--sonub-accent-soft); font-size: var(--cd-body); font-weight: 750; }
.cdots-hub .fa { color: var(--sonub-accent); }
.cdots-hub.is-codex { border-color: var(--wa-color-success-fill-loud); background: var(--sonub-success-soft); }
.cdots-hub.is-codex .fa { color: var(--wa-color-success-on-quiet); }
.cdots-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.cdots-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.cdots-plan > .sonub-icon-tile { grid-row: 1 / 3; }
.cdots-plan h3 { font-size: var(--cd-body); line-height: 1.4; }
.cdots-plan p { color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.65; }

/* 5. 사용 한도 — 그림 | 두 카드 */
.cdots-limits { display: grid; gap: 1.25rem; align-items: center; }
@container codex-dots (min-inline-size: 48rem) {
	.cdots-limits { grid-template-columns: 15rem minmax(0, 1fr); }
}
.cdots-limits > .cdots-pic { max-inline-size: 15rem; justify-self: center; }
.cdots-limit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.cdots-limit { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--sonub-border); border-block-start-width: 4px; border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.cdots-limit[data-limit='chat'] { border-block-start-color: var(--wa-color-success-fill-loud); }
.cdots-limit[data-limit='tasks'] { border-block-start-color: var(--wa-color-warning-fill-loud); }
.cdots-limit > .sonub-icon-tile { grid-row: 1 / 3; }
.cdots-limit h3 { font-size: var(--cd-body); line-height: 1.4; }
.cdots-limit p { font-size: var(--cd-body); line-height: 1.7; }

/* 6. 안전 수칙 — 그림 | 여섯 카드 */
.cdots-safe-wrap { display: grid; gap: 1.25rem; align-items: start; }
@container codex-dots (min-inline-size: 56rem) {
	.cdots-safe-wrap { grid-template-columns: 14rem minmax(0, 1fr); }
}
.cdots-safe-wrap > .cdots-pic { max-inline-size: 14rem; justify-self: center; }
.cdots-safe { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.cdots-safe > li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.cdots-safe > li > .sonub-icon-tile { grid-row: 1 / 3; }
.cdots-safe h3 { font-size: var(--cd-body); line-height: 1.45; }
.cdots-safe p { color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.7; }

/* 7. 공식 출처 */
.cdots-docs { display: grid; gap: 0.5rem; }
.cdots-docs a { display: inline-flex; align-items: center; gap: 0.55rem; min-block-size: 2.5rem; color: var(--sonub-accent); font-size: var(--cd-body); }

/* 다크 — 그림은 밝은 종이 바탕이라 테두리로 어두운 바탕과 나눈다 */
html[data-sonub-theme='dark'] .codex-dots :is(.cdots-hero img, .cdots-pic) { outline: 1px solid var(--sonub-border); }