/*
 * 하네스(/harness) — SSOT 23절 "하네스" · 11절 "디자인".
 * 읽는 순서: 머리 → 탭 → (하네스란) 그림 · 한 문장 · 쉽게 이해하기 → 세 관점(source-perspectives.css) → 함께 자라요 → 세 모습 카드 → AI 과정 링크.
 * 용어 탭은 용어 상세와 같은 본문이라 glossary-detail.css 를 쓴다(.glossary-detail 로 감싼다).
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 */
.harness {
	--hn-body: calc(1rem * var(--wa-font-size-scale, 1));
	--hn-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--hn-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	display: grid;
	container: harness / inline-size;
	max-inline-size: 64rem;
	padding-block: 1rem 3rem;
	gap: 1.5rem;
	color: var(--sonub-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.harness :is(section, div, li, a) { min-inline-size: 0; }
.harness :where(ul[role='list'], ol[role='list']) { margin: 0; padding: 0; list-style: none; }
.harness :is(a, button):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
/* 탭 이름이 긴 언어는 좁은 화면에서 두 줄로(가로로 잘리지 않게 — /ai-use 와 같다) */
.harness-tabs > .sonub-tabs { flex-wrap: wrap; }
.harness-panel:not([hidden]) { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); padding-block-start: 1rem; }
.harness-block { display: grid; gap: 1.1rem; }
.harness-block h2 { margin: 0; font-size: var(--hn-h2); }
.harness-note { max-inline-size: var(--sonub-reading-width); margin: 0; color: var(--sonub-muted); font-size: var(--hn-body); line-height: 1.8; }
.harness-note p { margin: 0; }
.harness-note > * + * { margin-block-start: 0.75rem; }
/* 용어 탭 — 용어 상세 본문의 바깥 틀(.glossary-detail)이 탭 안에서 여백을 두 번 두지 않게 */
.harness .harness-term { padding-block: 0; }

/* 하네스란 — 넓으면 그림 | 한 문장, 그 아래 쉽게 이해하기 세 칸 */
.harness-intro { grid-template-columns: minmax(0, 1fr); align-items: center; }
@container harness (min-inline-size: 48rem) {
	.harness-intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 2rem; }
	.harness-easy { grid-column: 1 / -1; }
}
.harness-hero { margin: 0; }
.harness-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); }
.harness-must { display: grid; gap: 0.6rem; padding: 1.2rem 1.4rem; border: 1px solid var(--wa-color-brand-border-normal); border-inline-start: 5px solid var(--wa-color-brand-fill-loud); border-radius: var(--wa-border-radius-l); background: var(--wa-color-brand-fill-quiet); }
.harness-must h2 { display: flex; align-items: center; gap: 0.5rem; font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); }
.harness-must h2 i { color: var(--wa-color-brand-fill-loud); }
.harness-must p { margin: 0; font-size: calc(1.05rem * var(--wa-font-size-scale, 1)); font-weight: 600; line-height: 1.75; }
.harness-easy { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.85rem; margin: 0; }
.harness-easy > div { padding: 0.9rem 1.1rem; border-inline-start: 4px solid var(--wa-color-brand-fill-loud); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.harness-easy > div[data-dg-tone] { border-inline-start-color: var(--dg-fill); }
.harness-easy dt { display: flex; align-items: center; gap: 0.45rem; margin-block-end: 0.35rem; font-weight: 700; }
.harness-easy dt i { color: var(--wa-color-brand-fill-loud); }
.harness-easy > div[data-dg-tone] dt i { color: var(--dg-fill); }
.harness-easy dd { margin: 0; font-size: var(--hn-body); line-height: 1.75; }

/* 세 모습 — 가운데 출발점(하네스)에서 세 카드로 갈라지는 선(public/js/ig-lines.js), 카드마다 그 탭으로 */
.harness-fork { display: grid; justify-items: center; gap: 3.5rem; }
.harness-origin { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-weight: 750; box-shadow: var(--wa-shadow-s); }
.harness-fork > .harness-kinds { justify-self: stretch; }
.harness .ig-line { fill: none; stroke: var(--wa-color-brand-fill-loud); stroke-width: 3; stroke-linecap: round; }
.harness-kinds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* 세 칸 아니면 한 줄 — 두 칸이면 셋째 카드로 가는 선이 첫 카드 뒤로 지나간다. 한 줄일 때는 첫 카드까지만 선을 긋는다(숨은 점은 ig-lines 가 건너뛴다) */
@container harness (min-inline-size: 46rem) {
	.harness-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container harness (max-inline-size: 45.99rem) {
	.harness-kind:not(:first-child) .harness-kind-pin { display: none; }
}
/* 한 줄이지만 넓으면 그림 | 글 — 그림이 화면을 다 차지하지 않게 */
@container harness (min-inline-size: 30rem) and (max-inline-size: 45.99rem) {
	.harness-kind { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1.1rem; align-items: start; }
	.harness-kind img { grid-row: 1 / 4; }
}
.harness-kind { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; 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); }
/* 갈라진 선이 닿는 점 — 카드 윗변 가운데(선이 카드 뒤로 숨지 않게) */
.harness-kind-pin { position: absolute; inset-block-start: -0.45rem; inset-inline-start: calc(50% - 0.45rem); inline-size: 0.9rem; block-size: 0.9rem; border-radius: 999px; background: var(--wa-color-brand-fill-loud); box-shadow: 0 0 0 3px var(--sonub-surface); }
.harness-kind img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wa-border-radius-m); }
.harness-kind h3 { margin: 0; font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); line-height: 1.4; }
.harness-kind p { margin: 0; color: var(--sonub-muted); font-size: var(--hn-note); line-height: 1.65; }
.harness-kind-go { justify-self: start; gap: 0.45rem; }

/* AI 과정 링크 */
.harness-course-link { display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start; min-block-size: 2.5rem; color: var(--sonub-accent); font-size: var(--hn-body); font-weight: 650; }