/*
 * MCP(/mcp) — SSOT 23절 "MCP" · 11절 "디자인".
 * 읽는 순서: 머리 → 탭 → (역할) MCP 란 · 순서도와 두 역할 카드 · WebMCP 예 · 세 가지 카드 · 쉽게 이해하기
 *   → (활용) 연결 Reference · 비교표 · 무엇을 쓸까 · 시작하는 코드 · 비유 두 카드 · 안전 → (서버 개발) 메시지 순서도 · 전송 두 카드 · 1 서버 · 2 클라이언트 · 3 명령과 저장 위치 경고 → 출처 → AI 과정 링크.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다). 세 방식은 열마다 같은 색(WebMCP 브랜드 · DevTools 파랑 · Playwright 초록).
 */
.mcp {
	--mc-body: calc(1rem * var(--wa-font-size-scale, 1));
	--mc-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--mc-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	--mc-h3: calc(1.1rem * var(--wa-font-size-scale, 1));
	display: grid;
	container: mcp / 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;
}
.mcp :is(section, div, li, a, figure, td, th) { min-inline-size: 0; }
.mcp :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.mcp [data-col='webmcp'] { --mc-tone: var(--wa-color-brand-fill-loud); --mc-quiet: var(--wa-color-brand-fill-quiet); }
.mcp [data-col='devtools'] { --mc-tone: var(--wa-color-blue-50, var(--wa-color-brand-fill-loud)); --mc-quiet: var(--wa-color-blue-95, var(--sonub-surface)); }
.mcp [data-col='playwright'], .mcp [data-col='robot'] { --mc-tone: var(--wa-color-success-fill-loud); --mc-quiet: var(--wa-color-success-fill-quiet); }
/* 탭 이름이 긴 언어는 좁은 화면에서 두 줄로(가로로 잘리지 않게 — /harness 와 같다) */
.mcp-tabs > .sonub-tabs { flex-wrap: wrap; }
.mcp-panel:not([hidden]) { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); padding-block-start: 1rem; }
.mcp-block { display: grid; gap: 1.1rem; }
.mcp-block h2 { margin: 0; font-size: var(--mc-h2); }
.mcp-text { max-inline-size: var(--sonub-reading-width); margin: 0; font-size: var(--mc-body); line-height: 1.8; }
.mcp-text p, .mcp-card p { margin: 0; }
.mcp-text > * + *, .mcp-card > * + * { margin-block-start: 0.75rem; }
.mcp-card > :is(p, ul, h3) + :is(p, ul) { margin-block-start: 0.6rem; }
.mcp-note { margin: 0; color: var(--sonub-muted); font-size: var(--mc-note); line-height: 1.7; }
.mcp-subtitle { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; font-size: var(--mc-h3); }
.mcp-subtitle i { color: var(--wa-color-brand-fill-loud); }

/* 카드 — 역할 · 예 · 비유 · 안전 · 경고 */
.mcp-card { padding: 1.1rem 1.3rem; border: 1px solid var(--sonub-border); border-inline-start: 5px solid var(--mc-tone, var(--wa-color-brand-fill-loud)); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); font-size: var(--mc-body); line-height: 1.8; }
.mcp-card[data-dg-tone] { border-inline-start-color: var(--dg-fill); background: var(--dg-soft, var(--sonub-surface)); }
.mcp-card h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--mc-h3); line-height: 1.45; }
.mcp-card h3 > i { color: var(--mc-tone, var(--dg-fill, var(--wa-color-brand-fill-loud))); }
.mcp :where(.rich-list) { margin: 0; padding-inline-start: 1.25rem; }
.mcp :where(.rich-list) li + li { margin-block-start: 0.35rem; }

/* 두 카드 나란히(역할 · 전송 방식) · 세 카드(서버가 내놓는 것) — 좁으면 한 줄에 하나 */
.mcp-pair, .mcp-offers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
@container mcp (min-inline-size: 40rem) {
	.mcp-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container mcp (min-inline-size: 50rem) {
	.mcp-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mcp-role h3, .mcp-offer h3, .mcp-transport h3 { font-size: var(--mc-h3); }
.mcp-role h3 > i, .mcp-offer h3 > i, .mcp-transport h3 > i { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--wa-border-radius-m); background: var(--dg-fill, var(--wa-color-brand-fill-loud)); color: #fff; font-size: 0.95em; }
.mcp-flow { margin-block: 0.25rem; }
/* 호스트 · 증거 — 아이콘을 앞에 둔 한 줄 안내 */
.mcp-host, .mcp-proof { display: flex; align-items: flex-start; gap: 0.6rem; }
.mcp-host { max-inline-size: var(--sonub-reading-width); }
.mcp-host > i, .mcp-proof > i { flex: none; margin-block-start: 0.3rem; color: var(--dg-fill, var(--wa-color-brand-fill-loud)); }
.mcp-proof { margin: 0; }
/* 서버 개발 단계 — 1 · 2 · 3 을 왼쪽 선으로 묶는다 */
.mcp-step { display: grid; gap: 0.9rem; padding-inline-start: 1.1rem; border-inline-start: 3px solid var(--sonub-border); }
.mcp-step + .mcp-step { margin-block-start: 1.25rem; }
.mcp-step > .mcp-subtitle { margin-block-start: 0; }
/* 무엇을 쓸까 — 화살표 뒤의 이름이 눈에 띄게 */
.mcp-pick .rich-list li::marker { color: var(--dg-fill); }

/* 쉽게 이해하기 — 세 칸(/harness 와 같은 모양) */
.mcp-easy { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.85rem; margin: 0; }
.mcp-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); }
.mcp-easy > div[data-dg-tone] { border-inline-start-color: var(--dg-fill); }
.mcp-easy dt { display: flex; align-items: center; gap: 0.45rem; margin-block-end: 0.35rem; font-weight: 700; }
.mcp-easy dt i { color: var(--wa-color-brand-fill-loud); }
.mcp-easy > div[data-dg-tone] dt i { color: var(--dg-fill); }
.mcp-easy dd { margin: 0; font-size: var(--mc-body); line-height: 1.75; }

/* 비교표 — 넓으면 세 열 표, 좁으면 방식마다 카드(칸 앞에 방식 이름) */
.mcp-compare-wrap { overflow-x: auto; border-radius: var(--wa-border-radius-l); }
.mcp-compare { inline-size: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); font-size: var(--mc-body); line-height: 1.65; }
.mcp-compare caption { padding-block-end: 0.5rem; color: var(--sonub-muted); font-size: var(--mc-note); text-align: start; }
.mcp-compare :is(th, td) { padding: 0.8rem 0.95rem; border-block-end: 1px solid var(--sonub-border); text-align: start; vertical-align: top; }
.mcp-compare tbody tr:last-child :is(th, td) { border-block-end: 0; }
.mcp-compare thead th { border-block-start: 5px solid var(--mc-tone, var(--sonub-border)); background: var(--mc-quiet, var(--sonub-surface)); font-weight: 750; white-space: nowrap; }
.mcp-compare thead th i { margin-inline-end: 0.4rem; color: var(--mc-tone); }
.mcp-compare tbody th { inline-size: 9rem; color: var(--sonub-muted); font-size: var(--mc-note); font-weight: 700; }
@container mcp (max-inline-size: 44rem) {
	.mcp-compare, .mcp-compare :is(tbody, tr, th, td) { display: block; }
	.mcp-compare { border: 0; background: none; }
	.mcp-compare thead { display: none; }
	.mcp-compare caption { display: block; inline-size: auto; }
	.mcp-compare tbody { display: grid; gap: 0.85rem; }
	.mcp-compare tbody tr { border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); overflow: hidden; }
	.mcp-compare tbody th { inline-size: auto; padding-block: 0.6rem; background: var(--wa-color-brand-fill-quiet); color: var(--sonub-ink); }
	.mcp-compare td { border-inline-start: 4px solid var(--mc-tone); }
	.mcp-compare td::before { content: attr(data-label); display: block; margin-block-end: 0.2rem; color: var(--mc-tone); font-size: var(--mc-note); font-weight: 750; }
}

/* 코드 상자 — 시작하는 코드 · 소스 파일 · 명령(왼쪽→오른쪽 그대로) */
.mcp-start { display: grid; gap: 0.85rem; }
.mcp-code { display: grid; gap: 0.5rem; margin: 0; }
.mcp-code figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: var(--mc-note); font-weight: 700; }
.mcp-code figcaption i { color: var(--mc-tone, var(--wa-color-brand-fill-loud)); }
.mcp-code pre { margin: 0; padding: 0.9rem 1.1rem; overflow-x: auto; border-inline-start: 4px solid var(--mc-tone, var(--wa-color-brand-fill-loud)); border-radius: var(--wa-border-radius-m); background: var(--wa-color-neutral-fill-quiet); font-size: calc(0.85rem * var(--wa-font-size-scale, 1)); line-height: 1.6; text-align: left; }

/* 비유 — 넓으면 두 카드 나란히 */
.mcp-analogy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@container mcp (min-inline-size: 46rem) {
	.mcp-analogy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mcp-analogy-card { background: var(--mc-quiet, var(--sonub-surface)); }
.mcp-sum { display: flex; align-items: flex-start; gap: 0.6rem; max-inline-size: var(--sonub-reading-width); margin: 0; font-size: var(--mc-body); font-weight: 600; line-height: 1.75; }
.mcp-sum > i { margin-block-start: 0.35rem; color: var(--wa-color-warning-fill-loud); }

/* 출처 · AI 과정 링크 */
.mcp-sources { font-size: var(--mc-note); }
.mcp-sources summary { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; font-weight: 700; }
.mcp-sources ul { margin: 0.6rem 0 0; padding-inline-start: 1.25rem; line-height: 1.8; }
.mcp-course-link { display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start; padding: 0.7rem 1.1rem; border: 1px solid var(--wa-color-brand-border-normal); border-radius: var(--wa-border-radius-l); background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); font-weight: 700; text-decoration: none; }
.mcp-course-link:hover { background: var(--wa-color-brand-fill-normal); }