/* static/css/pages/mcp.css — MCP 가이드 화면(mcp.html) 전용 스타일.
   코드 블록과 복사 버튼, 넓은 도구 표, 연결 흐름 SVG.

   이 페이지가 로드하는 층: tokens + shell + doc + 이 파일.
   공유 컴포넌트를 여기에 넣지 말 것 — 두 페이지 이상이 쓰게 되는 순간 그 층으로 올린다. */

/* MCP 가이드 전용 스타일 — 공통 문서 레이아웃(본문 기둥·목차·카드형 섹션·단계 목록·
   비교 표·FAQ)은 /css/doc.css, 디자인 토큰·폰트·헤더·푸터·모달은 /css/shell.css 가
   갖는다. 여기에는 이 페이지에만 있는 컴포넌트만 남긴다 — 코드 블록과 복사 버튼,
   도구 표의 넓은 변형, 연결 흐름 SVG. */
/* 여러 줄 명령·설정 블록(가이드 특성상 help.html에 없는 추가 컴포넌트) */
pre{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:var(--panel2);
  border:1px solid var(--softline);overflow-x:auto;
  font:400 13.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}
pre code{background:none;border-radius:0;padding:0;font-size:inherit}
.card.hl pre{background:var(--bg)}

/* 복사 버튼이 달린 코드 블록. 이 페이지의 스니펫은 "그대로 붙여넣어 동작하는 것"이 요점이라
   손으로 드래그해 고르게 두면 앞뒤 공백·줄바꿈에서 실수가 난다 — 버튼이 <code> 의
   textContent 를 통째로 복사한다(그래서 서버 주소를 치환하는 span 도 함께 딸려 온다).
   pre 의 오른쪽 패딩은 버튼 자리다 — 없으면 첫 줄이 버튼 밑으로 들어간다. */
.snip{position:relative;margin:14px 0 0}
.snip pre{margin:0;padding-right:84px}
/* 배경은 불투명(--bg)이어야 한다 — 반투명으로 두면(다크의 --accentSoft 가 그렇다) 가로로
   스크롤된 코드가 버튼 글자와 겹쳐 읽힌다. */
.copy-btn{position:absolute;top:9px;right:9px;padding:7px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer;
  font:600 12px/1 var(--font);transition:background .15s,border-color .15s}
.copy-btn:hover{background:var(--accentSoft);border-color:var(--lineStrong)}
/* 좁은 화면에서는 버튼을 블록 아래로 뺀다. 겹쳐 두면 한 줄짜리 명령이 화면보다 길어(375px
   에서 실측) 버튼이 명령 한가운데를 가리고, 그 밑을 보려면 버튼 아래로 스크롤해야 한다 —
   "복사해서 붙여넣는" 페이지에서 정작 무엇을 복사하는지 못 읽게 된다. 헤더가 햄버거로
   접히는 폭(840px)과 같은 경계를 쓴다. */
@media (max-width:840px){
  .snip pre{padding-right:16px}
  .copy-btn{position:static;display:block;margin:8px 0 0 auto}
}

/* 단계 안의 코드 블록은 번호 배지 기둥에 맞춰 왼쪽 정렬된다(padding-left 가 이미 잡아 준다). */
ol.steps .snip{margin-top:10px}

/* 도구 표는 열이 넷이라 기본 비교 표(440px)보다 넓게 잡는다. */
table.cmp.wide{min-width:660px}
table.cmp td code,table.cmp th code{white-space:nowrap}

/* 연결 흐름 다이어그램 — 외부 이미지 없이 인라인 SVG 로 그린다. 색은 전부 아래 클래스가
   CSS 변수·currentColor 로 칠하므로 라이트/다크가 자동으로 따라온다(SVG 안에 색을 직접
   적으면 한쪽 테마에서 사라진다). 폭 400 기준으로 그려 좁은 화면에서도 글자가 읽히게 하고,
   넓은 화면에서는 본문 폭까지 늘리지 않는다(줄 길이가 아니라 그림이라 커질 이유가 없다). */
figure.dia{margin:20px 0 0}
figure.dia figcaption{margin-top:10px;font:400 13.5px/1.6 var(--font);color:var(--muted);text-wrap:pretty}
.flow{display:block;width:100%;max-width:400px;margin:0 auto;height:auto;color:var(--ink)}
.flow .fbox{fill:var(--panel2);stroke:currentColor;stroke-opacity:.16;stroke-width:1}
.flow .fbadge{fill:currentColor}
.flow .fnum{fill:var(--bg);font-family:var(--font);font-size:14px;font-weight:700;text-anchor:middle}
.flow .ft{fill:currentColor;font-family:var(--font);font-size:15px;font-weight:700}
.flow .fd{fill:currentColor;fill-opacity:.66;font-family:var(--font);font-size:12.5px;font-weight:400}
.flow .fline{stroke:currentColor;stroke-opacity:.4;stroke-width:1.6;fill:none}
.flow .fmark{fill:currentColor;fill-opacity:.4}