/* static/css/doc.css — 문서 화면(help.html·mcp.html)이 공유하는 레이아웃과 컴포넌트.
   한 기둥 본문(820px), 목차 사이드바, 카드형 섹션, 단계 목록, 용어 정의, 비교 표, FAQ 아코디언.

   **tokens.css → shell.css 순으로 먼저 로드해야 한다.** 토큰·폰트·전역 리셋은 `tokens.css`,
   헤더·푸터·모달은 `shell.css` 소유다. 이 파일에는 그 값들이 없다.

   **app.css 와 함께 로드하지 말 것.** .card·.h1 이 두 파일에서 이름만 같고 정의가 다르다
   (여기: 문서 카드 16px 라운드 / app.css: 갤러리 카드 320px 그리드 + hover transform).
   그래서 문서 화면은 app.css 를 통째로 들이는 대신 이 파일을 쓴다.

   두 페이지의 고유 컴포넌트는 css/pages/ 에 한 장씩 있다 —
   pages/help.css: .mail·figure.shot / pages/mcp.css: pre·.snip/.copy-btn·figure.dia/.flow */

/* 푸터를 페이지 바닥에 붙이기 위한 세로 flex. 앱 화면은 #app 래퍼가 같은 일을 하지만
   문서 화면은 래퍼 없이 body 가 직접 헤더·main·푸터를 담는다. */
body{display:flex;flex-direction:column}

/* ---- 본문 기둥 ---- */
main{flex:1;width:100%;max-width:820px;margin:0 auto;padding:clamp(36px,6vw,64px) clamp(20px,5vw,40px) 64px}
/* max-width 캡 없음 — main(820px)이 이미 줄 길이를 제한한다. 별도 캡(600px)을 두면
   넓은 해상도에서 본문 대비 절반 폭의 좁은 기둥처럼 보인다(실사용 피드백). */
.h1{font-weight:700;font-size:clamp(30px,4.5vw,44px);line-height:1.14;margin:14px 0 0;font-feature-settings:"ss01"}
.lead{font:400 18px/1.6 var(--font);color:var(--muted);margin:18px 0 0;text-wrap:pretty}
a{color:var(--ink)}

/* ---- 목차 ---- */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 8px}
.toc a{font:500 13px/1 var(--font);color:var(--muted);text-decoration:none;background:var(--panel2);
  border-radius:999px;padding:9px 14px;transition:background .15s,color .15s}
.toc a:hover{background:var(--accentSoft);color:var(--ink)}
/* 지금 읽고 있는 섹션 강조(doc.js 가 .on 을 옮긴다). 섹션이 십수 개라 표시가 없으면
   목록 어디쯤인지 알 수 없다 — 특히 아래 고정 사이드바에서. */
.toc a.on{background:var(--ink);color:var(--bg)}
/* 넓은 화면에서는 **같은 노드**를 왼쪽 고정 사이드바로 바꾼다. 목차 DOM 을 하나 더 만들지
   않는 이유: 한/영 본문이 각자 목차를 갖고 있어(2벌) 복제하면 같은 앵커가 4벌이 되고,
   숨겨진 쪽까지 관찰 대상이 된다. 1300px 은 본문(main 820px)과 사이드바(left 24 + 폭 200)가
   겹치지 않는 하한이다 — (1300-820)/2 = 240 > 224. 그 미만에서는 상단 칩 목록 그대로라
   모바일 레이아웃에는 영향이 없다. */
@media (min-width:1300px){
  /* left 를 뷰포트 기준 고정값으로 두면 화면이 넓어질수록 가운데 본문(820px)에서 멀어져,
     넓은 모니터에서는 목차만 왼쪽 끝에 떨어져 붙는다(2560px 에서 본문과 640px 넘게 벌어졌다).
     본문 기둥의 왼쪽 가장자리(50% - 410px)에서 간격(24px)과 목차 폭(200px)만큼 되짚어 붙이고,
     하한 24px 로 막아 1300px 부근에서 화면 밖으로 나가지 않게 한다(그 지점에선 계산값이
     16px 이라 하한이 이긴다 — 위 주석의 겹침 계산과 같은 자리다). */
  .toc{position:fixed;left:max(24px, calc(50% - 410px - 24px - 200px));
    top:92px;width:200px;max-height:calc(100vh - 132px);
    margin:0;gap:1px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    overflow-y:auto;overscroll-behavior:contain}
  .toc a{background:none;border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.35}
  .toc a:hover{background:var(--panel2)}
}

/* ---- 카드형 섹션 ---- */
.card{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px);margin-top:22px;background:var(--bg)}
.card.hl{border-color:var(--ink);background:var(--panel2)}
.card h2{font:700 clamp(20px,2.6vw,25px)/1.2 var(--font);margin:0;display:flex;align-items:center;gap:10px;
  font-feature-settings:"ss01";scroll-margin-top:80px}
.card h3{font:700 clamp(15.5px,1.7vw,17px)/1.4 var(--font);margin:22px 0 0;color:var(--ink)}
.card h3:first-of-type{margin-top:18px}
.card .ico{font-size:22px;line-height:1}
.card p{font:400 16px/1.65 var(--font);color:var(--ink);margin:14px 0 0;text-wrap:pretty}
.card p.sub{color:var(--muted)}
.card ul{margin:14px 0 0;padding-left:22px}
.card ol{margin:14px 0 0;padding-left:22px}
.card li{font:400 16px/1.7 var(--font);color:var(--ink);margin:4px 0}
.card li b,.card p b{font-weight:600}

/* 강조 상자. 주의·함정을 목록으로 담을 때는 아래 ul/li/p 규격을 쓴다. */
.note{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--ink);
  font:500 15px/1.55 var(--font);color:var(--ink)}
.note ul{margin:9px 0 0;padding-left:20px}
.note li{font:500 14.5px/1.6 var(--font);margin:5px 0}
.note p{font:500 15px/1.55 var(--font);margin:9px 0 0}

code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--accentSoft);border-radius:6px;padding:2px 6px}

/* ---- 번호 단계 — ol 기본 마커 대신 원형 배지를 쓴다(카운터). ---- */
ol.steps{list-style:none;margin:20px 0 0;padding:0;counter-reset:st}
ol.steps>li{counter-increment:st;position:relative;padding-left:44px;margin:0 0 18px;
  font:400 16px/1.65 var(--font);color:var(--ink)}
ol.steps>li:last-child{margin-bottom:0}
ol.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:29px;height:29px;
  border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;
  font:700 14px/1 var(--font)}
ol.steps>li b{font-weight:700}
ol.steps .d{display:block;margin-top:4px;font:400 14.5px/1.6 var(--font);color:var(--muted)}

/* "이럴 때 쓰세요" — 기능마다 구체적인 사용 상황을 한 줄로. */
.usecase{margin-top:16px;padding:12px 15px;border-radius:11px;background:var(--panel2);
  font:400 15px/1.6 var(--font);color:var(--ink);text-wrap:pretty}
.usecase b{font-weight:700}
/* 강조 카드 안에서는 배경이 겹쳐 묻히므로 캔버스 색으로 뒤집는다. */
.card.hl .usecase{background:var(--bg)}

/* 용어 풀이 정의 목록 */
.gloss{margin:16px 0 0}
.gloss dt{font:700 15.5px/1.5 var(--font);color:var(--ink);margin-top:16px}
.gloss dt:first-of-type{margin-top:0}
.gloss dd{margin:3px 0 0;font:400 15px/1.65 var(--font);color:var(--muted);text-wrap:pretty}

/* 비교 표 — 375px 폭에서 페이지 자체가 가로로 밀리지 않도록 표만 자기 컨테이너 안에서
   스크롤한다(min-width 는 표가 뭉개지지 않는 하한). */
.tblwrap{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:440px}
table.cmp th,table.cmp td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--softline);
  font:400 14.5px/1.6 var(--font);color:var(--ink);vertical-align:top}
table.cmp thead th{background:var(--panel2);font-weight:700;white-space:nowrap}
table.cmp tbody th{font-weight:700;white-space:nowrap}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}

/* ---- FAQ 아코디언 — 카드 안에서 구분선으로 나뉜 <details> 목록(JS 없이 네이티브). ---- */
.faq{margin-top:8px}
.faq details{border-top:1px solid var(--softline)}
.faq details:last-child{border-bottom:1px solid var(--softline)}
/* **summary 를 flex 컨테이너로 만들지 말 것.** 예전에 display:flex + space-between 으로
   "질문은 왼쪽, +/− 는 오른쪽"을 만들었는데, 그러면 질문 텍스트가 통째로 한 덩어리일
   때만 의도대로 보인다. 질문 안에 <code> 같은 인라인 태그가 하나라도 들어가면 앞뒤
   텍스트가 각각 **익명 flex 아이템**으로 쪼개져, space-between 이 그 조각들을 줄 폭
   전체에 흩뿌린다 — `운영자 토큰(` … `admin_token` … `)은 뭔가요?` 처럼 한 문장이 세
   덩어리로 벌어져 보였다(실제 배포본 제보). 같은 이유로 조각마다 min-content 폭이 생겨,
   공백 없는 긴 토큰이 카드를 밀고 375px 화면에서 **페이지 전체가 가로로 스크롤됐다**(실측).
   지금은 마커를 절대 배치하고 오른쪽 padding 으로 자리만 비워 둔다 — 질문은 평범한
   인라인 흐름이라 인라인 태그가 몇 개 들어오든 정상적으로 이어지고 줄바꿈된다. */
.faq summary{list-style:none;cursor:pointer;padding:16px 30px 16px 2px;position:relative;
  font:600 16px/1.45 var(--font);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary code{overflow-wrap:anywhere}
/* line-height 를 질문 텍스트의 줄 상자(16px × 1.45 ≈ 23px)에 맞춰 첫 줄과 나란히 놓는다 —
   질문이 두 줄이 되어도 마커는 첫 줄 옆에 남는다(아코디언 관례). */
.faq summary::after{content:'+';position:absolute;right:2px;top:16px;
  font:400 22px/23px var(--font);color:var(--muted)}
.faq details[open] summary::after{content:'−'}
.faq .ans{padding:0 2px 18px;font:400 15px/1.7 var(--font);color:var(--muted);text-wrap:pretty}