/*
 * 클로드 듀엣(/claude-duet) — 인포그래픽. SSOT 23절 "에이전트 툴" · 11절 "디자인".
 * 읽는 순서: 제목 → 한 문장(그림 | 문장 · 사실 셋) → 하루 흐름(그림 넷, 사슬 선) → 승인받는 일(계획 → 줄기 → 넷 · 승인해도 안 하는 일)
 *           → 쓸 수 있는 사람(✔ ✘ ⓘ) → 클로드 셋 비교 표 → 안전 수칙 → 공식 출처.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 선은 public/js/ig-lines.js 가 svg 로 내용 뒤에 그린다(.ig-line) — 사슬은 브랜드색, 줄기는 옅은 글자색, 가지·점은 경고색(승인 대기).
 */
.claude-duet {
	--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-gutter: 2.75rem;
	display: grid;
	container: claude-duet / 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;
}
.claude-duet :is(h2, h3, p, ul, ol, li, figure, dl, dt, dd) { margin: 0; }
.claude-duet :is(section, div, li, a) { min-inline-size: 0; }
.claude-duet :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.claude-duet h2 { font-size: var(--cd-h2); }
.claude-duet :is(a, button):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.cd-block { display: grid; gap: 1.1rem; }
.cd-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--cd-body); line-height: 1.75; }

/* 선 — 사슬(하루 순서) · 줄기(계획 하나에서 넷) · 가지 */
.claude-duet .ig-line { fill: none; stroke: var(--sonub-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.claude-duet .ig-line.is-trunk { stroke: var(--sonub-muted); }
.claude-duet .ig-line.is-branch { stroke: var(--sonub-warning); stroke-width: 2.5; }
.claude-duet .ig-node { r: 6px; fill: var(--sonub-warning); stroke: var(--sonub-surface); stroke-width: 3; }

/* 1. 한 문장 — 넓으면 그림 | 문장·사실, 좁으면 위아래 */
.cd-what { display: grid; gap: 1.5rem; align-items: center; }
@container claude-duet (min-inline-size: 52rem) {
	.cd-what { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.cd-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); }
.cd-what-body { display: grid; gap: 1.25rem; }
.cd-sentence { padding-inline-start: 1rem; border-inline-start: 4px solid var(--sonub-accent); font-size: calc(1.2rem * var(--wa-font-size-scale, 1)); font-weight: 650; line-height: 1.6; }
.cd-facts { display: grid; gap: 0.75rem; }
.cd-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.1rem 0.8rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.cd-fact > .sonub-icon-tile { grid-row: 1 / 3; }
.cd-fact dt { color: var(--sonub-muted); font-size: var(--cd-note); font-weight: 650; line-height: 1.4; }
.cd-fact dd { font-size: var(--cd-body); font-weight: 650; line-height: 1.5; }

/* 2. 하루 흐름 — 넓으면 네 칸 한 줄, 중간이면 두 칸, 좁으면 한 칸. 칸 사이를 사슬 선이 잇는다 */
.cd-day { display: grid; gap: 1.5rem; }
@container claude-duet (min-inline-size: 36rem) { .cd-day { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container claude-duet (min-inline-size: 60rem) { .cd-day { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.cd-day-step { display: grid; align-content: start; gap: 0.6rem; padding: 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.cd-day-pic { inline-size: 100%; max-inline-size: 11rem; justify-self: center; block-size: auto; aspect-ratio: 1; border-radius: var(--wa-border-radius-l); }
.cd-day-time { display: flex; align-items: center; gap: 0.45rem; color: var(--sonub-accent); font-size: var(--cd-note); font-weight: 750; }
.cd-day-n { display: inline-grid; place-items: center; flex: none; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 999px; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-weight: 800; }
.cd-day-step h3 { font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); line-height: 1.35; }
.cd-day-step > p:last-child { color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.7; }

/* 3. 승인받는 일 — 계획 카드 아래 줄기에서 넷, 옆(좁으면 아래)에 "승인해도 안 하는 일" */
.cd-approve { display: grid; gap: 1.5rem; align-items: start; }
@container claude-duet (min-inline-size: 52rem) {
	.cd-approve { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.cd-approve-tree { display: grid; gap: 1rem; }
.cd-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: center; padding: 0.9rem 1.1rem; border: 1px solid color-mix(in srgb, var(--sonub-accent) 45%, var(--sonub-border)); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.cd-plan h3 { font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); line-height: 1.35; }
.cd-plan p { color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.55; }
.cd-actions { display: grid; gap: 0.6rem; padding-inline-start: var(--cd-gutter); }
.cd-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.9rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); }
.cd-action-icon { color: var(--sonub-accent); font-size: calc(1.15rem * var(--wa-font-size-scale, 1)); }
.cd-action-name { font-size: var(--cd-body); font-weight: 700; line-height: 1.4; }
.cd-wait { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--sonub-warning-soft); color: var(--sonub-warning); font-size: var(--cd-note); font-weight: 700; white-space: nowrap; }
@container claude-duet (max-inline-size: 30rem) {
	.cd-action { grid-template-columns: auto minmax(0, 1fr); }
	.cd-wait { grid-column: 2; justify-self: start; white-space: normal; }
}
.cd-never { display: grid; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px dashed color-mix(in srgb, var(--sonub-danger) 55%, var(--sonub-border)); border-radius: var(--wa-border-radius-l); background: var(--sonub-danger-soft); }
.cd-never h3 { color: var(--sonub-danger); font-size: var(--cd-body); line-height: 1.4; }
.cd-never ul { display: grid; gap: 0.6rem; }
.cd-never li { display: flex; align-items: center; gap: 0.7rem; font-size: var(--cd-body); line-height: 1.45; }
.cd-never .dg-ban { flex: none; color: var(--sonub-danger); }

/* 4. 쓸 수 있는 사람 — 표시(✔ ✘ ⓘ) · 아이콘 · 글 */
.cd-access { display: grid; gap: 0.55rem; max-inline-size: 54rem; }
.cd-access-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.65rem 0.9rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); font-size: var(--cd-body); line-height: 1.5; }
.cd-mark { display: inline-grid; place-items: center; font-size: calc(1.2rem * var(--wa-font-size-scale, 1)); }
.cd-mark[data-tone='success'] { color: var(--sonub-success); }
.cd-mark[data-tone='danger'] { color: var(--sonub-danger); }
.cd-mark[data-tone='info'] { color: var(--sonub-info); }
.cd-access-row[data-ok='danger'] { background: var(--sonub-danger-soft); }
.cd-access-icon { color: var(--sonub-muted); }
.cd-go { justify-self: start; gap: 0.45rem; }

/* 5. 비교 — 듀엣 열을 표의 성공색 칸으로, 아래 링크 단추 */
.cd-compare { max-inline-size: 60rem; }
.cd-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cd-links .sonub-button { gap: 0.45rem; }

/* 6. 안전 수칙 — 넓으면 그림 | 카드, 카드는 칸 폭에 따라 한두 줄 */
.cd-safe-wrap { display: grid; gap: 1.25rem; align-items: start; }
@container claude-duet (min-inline-size: 52rem) {
	.cd-safe-wrap { grid-template-columns: 12rem minmax(0, 1fr); }
}
.cd-safe-pic { inline-size: 100%; max-inline-size: 12rem; block-size: auto; aspect-ratio: 1; border-radius: var(--wa-border-radius-l); }
.cd-safe { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.cd-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); }
.cd-safe > li > .sonub-icon-tile { grid-row: 1 / 4; }
.cd-safe h3 { font-size: var(--cd-body); line-height: 1.45; }
.cd-safe p { color: var(--sonub-muted); font-size: var(--cd-note); line-height: 1.7; }
.cd-safe-go { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2.5rem; color: var(--sonub-accent); font-size: var(--cd-note); font-weight: 650; }

/* 7. 공식 출처 — 종류 표(공식 · 기사) + 링크 */
.cd-docs { display: grid; gap: 0.5rem; }
.cd-docs li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.cd-doc-kind { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--sonub-accent-soft); color: var(--sonub-accent); font-size: var(--cd-note); font-weight: 700; }
.cd-doc-kind[data-official='no'] { background: var(--sonub-subtle); color: var(--sonub-ink); }
.cd-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); }
.cd-clash { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: var(--cd-note); }
.cd-clash a { color: var(--sonub-accent); }

/* 다크 — 옅은 경고·위험 바탕 위 글자를 밝게 */
html[data-sonub-theme='dark'] .cd-wait { background: color-mix(in srgb, var(--sonub-warning) 22%, var(--sonub-surface)); }
html[data-sonub-theme='dark'] .cd-never,
html[data-sonub-theme='dark'] .cd-access-row[data-ok='danger'] { background: color-mix(in srgb, var(--sonub-danger) 14%, var(--sonub-surface)); }
html[data-sonub-theme='dark'] .cd-doc-kind[data-official='no'] { background: color-mix(in srgb, var(--sonub-ink) 14%, var(--sonub-surface)); }