/* Vinc docs — 공유 레이아웃·타이포·앱 셸 모형(모션). 단일 소스: 10개 문서 페이지가
   모두 이 파일 하나를 쓴다. 페이지는 본문과 ko 사전만 갖는다.

   ⚠ 앱 셸 모형(.vshell)은 **출하된 화면**을 따른다. 지금 기준은 v0.6.7(D56):
   상단 바 하나 = 로고 · 크럼 · 상시 검색 · 가져오기 · 공유 · 설정, 지도 하단 바 =
   렌즈 · 관점 · 지표(D65), 관점 4종(3D · 2D · 타임라인 · 합계 — 흐름은 D53 에서 폐기).
   셸은 여기 **한 벌만** 있고 모든 장면이 그것을 쓴다. 앱 셸이 바뀌면(예: D69 의 좌측
   문서 트리 재도입) 이 블록 하나만 고치면 다섯 장면이 함께 따라온다. 장면마다 셸을
   복제하지 말 것 — 구 가이드가 그렇게 하다가 다섯 곳이 따로 낡았다. */

/* ── 기본 ─────────────────────────────────────────────────────────────
   10개 페이지가 같은 <style> 을 복붙하지 않도록 여기 둔다. 페이지에는 인라인
   스타일이 하나도 없어야 한다. */
*{box-sizing:border-box;margin:0}
body{font:0.9375rem/1.6 var(--font-ui);
  color:hsl(var(--foreground));background:hsl(var(--background));min-height:100vh;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:hsl(var(--ring)/.28)}

/* ── 3열 레이아웃 ─────────────────────────────────────────────────────── */
/* z-index:1 — docs.js 가 body 맨 앞에 꽂는 배경 레이어(fixed, z-index:0) 위로 뜬다.
   나머지 페이지의 data-vinc-page 래퍼와 같은 관례. */
/* align-items:stretch(기본값) — 가운뎃열(.doc-col) 카드가 lnb·목차 중 더 큰 높이에
   맞춰 늘어난다(발주자 지적: 카드가 본문 길이에만 맞춰져 옆 칸과 어긋나 보였다). */
.docs{position:relative;z-index:1;display:grid;grid-template-columns:16rem minmax(0,1fr) 14rem;gap:2.5rem;
  max-width:80rem;margin:0 auto;padding:0 1.5rem}
.docs-side{position:sticky;top:3.25rem;max-height:calc(100vh - 3.25rem);overflow-y:auto;
  padding:1.6rem 0 3rem;font-size:.875rem}
.docs-toc{position:sticky;top:3.25rem;max-height:calc(100vh - 3.25rem);overflow-y:auto;
  padding:2.4rem 0 3rem;font-size:.8125rem}
/* 가운뎃열 — 카드를 담는다. margin-top:1.6rem — lnb 는 테두리가 없어 첫 항목이 자기
   padding(1.6rem) 만큼 아래에서 시작하는데, 카드는 테두리가 그 자리에서 바로 보여서
   카드 위쪽 테두리가 lnb 시작보다 위에 있는 것처럼 보였다(실측 78.6px vs 53px). */
.doc-col{display:flex;flex-direction:column;min-width:0;margin-top:1.6rem}
/* 본문 전체가 카드(테두리·둥근모서리·반투명 배경) 위에 얹힌다 — .note/.docnav/다른
   페이지 카드와 같은 평범한 반투명(background 만, blur·shadow 없음)으로 통일했다.
   DC 원본은 backdrop-filter+box-shadow 를 얹었지만, 그러면 뒤 배경이 흐려 보여
   다른 카드들과 다르게 "덜 투명해" 보였다(발주자 지적). flex:1 — .doc-col 이 늘어난
   만큼 카드가 따라 늘어난다(위 stretch 메모). */
.doc{flex:1;min-width:0;max-width:46rem;padding:2.4rem 2.6rem 2.6rem;
  border:1px solid hsl(var(--border));border-radius:1rem;background:hsl(var(--card)/.55)}

/* 빵부스러기 — 카드 밖, DC 원본처럼 본문 카드와 별도 요소. docs.js 가 SECTIONS 로 채운다. */
.doc-crumb{display:flex;align-items:center;gap:.45rem;font-size:.76rem;
  color:hsl(var(--muted-foreground));margin-bottom:1.1rem}
.doc-crumb a{color:inherit;text-decoration:none}
.doc-crumb a:hover{color:hsl(var(--foreground))}

/* 사이드바 — 섹션 전환 박스 + 그 섹션의 페이지. IA 는 docs.js 의 SECTIONS 가 정본.
   ⚠ 현재 항목 표시는 **채워진 알약** 하나뿐이다. 좌측 색띠(border-left 강조)를 쓰지 말 것 —
   문서 내비에서 각 줄 옆에 색 막대가 서면 장식이 내용보다 먼저 읽힌다(발주자 지적). */
.docs-side .secsw{background:hsl(var(--muted)/.6);border-radius:var(--radius);padding:.3rem;margin-bottom:1.4rem}
.docs-side .secsw a{display:block;text-decoration:none;color:hsl(var(--muted-foreground));
  padding:.42rem .75rem;border-radius:calc(var(--radius-sm) + 1px);font-weight:560;
  transition:color .13s,background .13s}
.docs-side .secsw a:hover{color:hsl(var(--foreground))}
.docs-side .secsw a.on{background:hsl(var(--background));color:hsl(var(--foreground));
  font-weight:640;box-shadow:0 1px 2px hsl(0 0% 0%/.06),0 0 0 1px hsl(var(--border))}
.docs-side .sec-h{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));padding:0 .75rem;margin-bottom:.5rem}
.docs-side .secnav a{display:block;text-decoration:none;color:hsl(var(--muted-foreground));
  padding:.4rem .75rem;border-radius:var(--radius-sm);transition:color .13s,background .13s}
.docs-side .secnav a:hover{color:hsl(var(--foreground));background:hsl(var(--muted)/.55)}
.docs-side .secnav a.on{background:hsl(var(--ring)/.14);color:hsl(var(--foreground));font-weight:600}

/* 우측 on-this-page — h2 는 굵게, h3 는 들여쓴 보조 항목(docs.js 가 훑어 만든다). */
.docs-toc .toc-h{font-size:.8125rem;font-weight:640;color:hsl(var(--foreground));
  margin-bottom:.6rem;padding-left:.1rem}
.docs-toc a{display:block;text-decoration:none;color:hsl(var(--muted-foreground));
  padding:.24rem .1rem;line-height:1.5;transition:color .13s}
.docs-toc a.l2{font-weight:600;color:hsl(var(--foreground)/.78);margin-top:.45rem}
.docs-toc a.l3{padding-left:1rem;font-size:.78rem}
.docs-toc a:hover{color:hsl(var(--foreground))}
.docs-toc a.on{color:hsl(var(--ring))}

/* ── 본문 타이포 ──────────────────────────────────────────────────────── */
/* 제목부 — 아이브로(작은 대문자) → 큰 제목 → 한 줄 리드 → 가로줄 → 본문.
   아이브로는 강조색을 쓰지 않는다(섹션 이름일 뿐 링크가 아니다). */
.doc .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));margin-bottom:1rem}
.doc h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem);font-weight:680;letter-spacing:-.03em;line-height:1.08}
.doc .lede{color:hsl(var(--muted-foreground));font-size:1.0625rem;line-height:1.6;margin-top:1.1rem}
.doc .lede + *{margin-top:2rem}
.doc h1 ~ .lede::after{content:"";display:block;height:1px;background:hsl(var(--border));margin:2rem 0 0}
.doc h2{font-size:1.32rem;font-weight:670;letter-spacing:-.015em;margin:2.9rem 0 .7rem;scroll-margin-top:4.5rem}
.doc h3{font-size:1.02rem;font-weight:650;margin:1.8rem 0 .5rem;scroll-margin-top:4.5rem}
.doc p{margin:.75rem 0;line-height:1.72}
.doc ul,.doc ol{margin:.75rem 0;padding-left:1.3rem;line-height:1.72}
.doc li{margin:.3rem 0}
.doc li::marker{color:hsl(var(--muted-foreground))}
.doc a{color:hsl(var(--ring));text-decoration:none;border-bottom:1px solid hsl(var(--ring)/.35)}
.doc a:hover{border-bottom-color:hsl(var(--ring))}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;
  background:hsl(var(--muted)/.7);border:1px solid hsl(var(--border));border-radius:4px;padding:.1em .35em}
.doc strong{font-weight:640}
.doc hr{border:0;border-top:1px solid hsl(var(--border));margin:2.6rem 0}

/* 명령줄 블록 */
.doc .cmd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;
  background:hsl(var(--muted)/.55);border:1px solid hsl(var(--border));border-radius:var(--radius-sm);
  padding:.62rem .8rem;margin:.7rem 0;overflow-x:auto;white-space:pre;color:hsl(var(--foreground))}
.doc .cmd .dim{color:hsl(var(--muted-foreground))}

/* 노트 상자 */
.doc .note{border:1px solid hsl(var(--border));border-radius:var(--radius-sm);
  background:hsl(var(--card)/.6);padding:.85rem 1rem;margin:1.2rem 0;font-size:.9rem;line-height:1.68}
.doc .note.key{border-color:hsl(var(--ring)/.45);background:hsl(var(--ring)/.07)}

/* 팁 목록(장면 옆 요점) */
.doc .tips{list-style:none;padding:0;margin:1.1rem 0 0}
.doc .tips li{position:relative;padding-left:1.15rem;color:hsl(var(--muted-foreground));font-size:.9rem;margin:.4rem 0}
.doc .tips li::before{content:"";position:absolute;left:.15rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:hsl(var(--ring))}

/* 도구·호스트 표 */
.doc .rows{border:1px solid hsl(var(--border));border-radius:var(--radius-sm);overflow:hidden;margin:1.1rem 0}
.doc .rows > div{display:flex;gap:1rem;align-items:baseline;padding:.62rem .85rem;flex-wrap:wrap}
.doc .rows > div + div{border-top:1px solid hsl(var(--border))}
.doc .rows code{flex:0 0 auto;min-width:9.5rem;background:transparent;border:0;padding:0;
  color:hsl(var(--ring));font-weight:600}
.doc .rows span{flex:1 1 14rem;color:hsl(var(--muted-foreground));font-size:.9rem}

/* 섹션 카드(개요) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.85rem;margin:1.3rem 0}
.cards a{display:block;text-decoration:none;border:1px solid hsl(var(--border));border-radius:var(--radius-sm);
  background:hsl(var(--card)/.55);padding:.95rem 1rem;transition:border-color .15s,background .15s,transform .15s}
.cards a:hover{border-color:hsl(var(--ring)/.5);background:hsl(var(--card));transform:translateY(-2px)}
.cards .n{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:hsl(var(--ring));display:block;margin-bottom:.3rem}
.cards .t{font-size:1rem;font-weight:640;display:block;color:hsl(var(--foreground))}
.cards .d{font-size:.85rem;color:hsl(var(--muted-foreground));display:block;margin-top:.3rem;line-height:1.6}

/* 아이콘 붙은 h3 — 제품군 구분용. 마크는 장식이 아니라 **식별자**다(내 호스트를
   글자보다 로고로 먼저 찾는다). 그래서 h3 안에 두고 목차에는 글자만 간다. */
.doc h3.h3i{display:flex;align-items:center;gap:.55rem}
.h3mark{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;
  background:hsl(var(--muted));color:hsl(var(--foreground))}
.h3mark svg{width:15px;height:15px;fill:currentColor}
.h3mark .wordmark{font-size:.58rem;font-weight:700;letter-spacing:-.02em}
/* 한 제품군 안의 갈래(예: Claude 의 데스크톱·터미널·웹) */
.variants{border:1px solid hsl(var(--border));border-radius:var(--radius-sm);overflow:hidden;margin:.9rem 0 1.4rem}
.variants > div{display:flex;gap:.9rem;align-items:baseline;padding:.6rem .85rem;flex-wrap:wrap}
.variants > div + div{border-top:1px solid hsl(var(--border))}
.variants b{flex:0 0 8.5rem;font-weight:620;font-size:.9rem}
.variants .cmd{margin:0;flex:1 1 16rem;font-size:.78rem;padding:.35rem .55rem;background:hsl(var(--muted)/.75)}
.variants p{flex:1 1 100%;margin:0;font-size:.85rem;color:hsl(var(--muted-foreground));line-height:1.6}

/* 호스트 카드 */
.hosts{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.85rem;margin:1.2rem 0}
.host{border:1px solid hsl(var(--border));border-radius:var(--radius-sm);background:hsl(var(--card)/.6);
  padding:.9rem .95rem;display:flex;flex-direction:column;gap:.5rem;scroll-margin-top:4.5rem}
.host-head{display:flex;align-items:center;gap:.6rem}
.host-mark{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:6px;
  background:hsl(var(--muted)/.8);color:hsl(var(--foreground))}
.host-mark svg{width:15px;height:15px;fill:currentColor}
.host-mark .wordmark{font-size:.6rem;font-weight:700;letter-spacing:-.02em}
.host-name{font-size:.92rem;font-weight:620;line-height:1.2}
.host-kind{font-size:.7rem;color:hsl(var(--muted-foreground))}
.host p{margin:0;font-size:.85rem;line-height:1.6;color:hsl(var(--muted-foreground));flex:1}
.host .cmd{margin:0;font-size:.76rem;padding:.45rem .6rem}

/* 단축키 */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.5rem;margin:1.1rem 0}
.krow{display:flex;align-items:center;gap:.75rem;border:1px solid hsl(var(--border));
  border-radius:var(--radius-sm);background:hsl(var(--card)/.55);padding:.55rem .75rem}
.krow kbd{font-family:inherit;font-size:.76rem;font-weight:640;border:1px solid hsl(var(--border));
  border-bottom-width:2px;border-radius:5px;background:hsl(var(--background));padding:.16rem .45rem;
  white-space:nowrap;flex:none}
.krow span{font-size:.87rem;color:hsl(var(--muted-foreground))}

/* 다음 문서 — 이제 본문 카드 밖(.doc-col 의 형제, 카드 다음)이라 구분선은 필요 없다.
   카드 테두리가 이미 그 역할을 한다 — 위쪽은 그냥 여백. */
.docnav{display:flex;gap:.85rem;margin-top:1.4rem}
.docnav a{flex:1 1 0;min-width:0;text-decoration:none;border:1px solid hsl(var(--border));
  background:hsl(var(--card)/.55);border-radius:.75rem;padding:.9rem 1.2rem;transition:border-color .15s,background .15s}
.docnav a:hover{border-color:hsl(var(--ring)/.5);background:hsl(var(--card))}
.docnav .dir{display:block;font-size:.7rem;color:hsl(var(--muted-foreground));margin-bottom:.15rem}
.docnav .ttl{font-size:.92rem;font-weight:600;color:hsl(var(--foreground))}
.docnav .next{text-align:right;margin-left:auto}

/* ══════════════════════════════════════════════════════════════════════
   앱 셸 모형(.vshell) — 장면 공통. 여기 한 벌뿐이다(파일 머리 주석 참조).
   ══════════════════════════════════════════════════════════════════════ */
.scene{margin:1.6rem 0 .6rem}
.vshell{border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;
  background:hsl(var(--card));box-shadow:var(--shadow-2);font-size:.78rem;position:relative;
  --dom1:hsl(var(--ring));--dom2:hsl(258 52% 66%);--dom3:hsl(190 55% 55%)}
[data-theme="dark"] .vshell{background:hsl(230 30% 6%)}

/* 창 크롬(제목 표시줄) */
.vshell .tbar{display:flex;align-items:center;gap:.4rem;padding:.42rem .7rem;
  border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/.55)}
.vshell .tbar i{width:9px;height:9px;border-radius:50%;background:hsl(var(--border));flex:none}
.vshell .tbar .tt{margin-left:.5rem;color:hsl(var(--muted-foreground));font-size:.72rem}

/* 상단 바(D56) — 로고 · 크럼 · 상시 검색 · 가져오기 · 공유 · 설정 */
.vshell .top{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;
  border-bottom:1px solid hsl(var(--border))}
.vshell .top .lg{width:16px;height:16px;color:hsl(var(--primary));flex:none}
.vshell .top .crumb{color:hsl(var(--muted-foreground));white-space:nowrap;font-size:.74rem}
.vshell .top .crumb b{color:hsl(var(--foreground));font-weight:600}
.vshell .find{flex:1 1 auto;min-width:4rem;display:flex;align-items:center;gap:.4rem;
  border:1px solid hsl(var(--border));border-radius:999px;background:hsl(var(--background)/.6);
  padding:.24rem .7rem;color:hsl(var(--muted-foreground));overflow:hidden;white-space:nowrap}
.vshell .find svg{width:12px;height:12px;flex:none}
.vshell .act{display:flex;gap:.3rem;flex:none}
.vshell .bx{border:1px solid hsl(var(--border));border-radius:999px;padding:.2rem .6rem;
  color:hsl(var(--muted-foreground));white-space:nowrap;font-size:.72rem}
.vshell .bx.pri{background:linear-gradient(hsl(var(--primary)/.92),hsl(var(--primary)));
  color:hsl(var(--primary-foreground));border-color:transparent}
.vshell .bx.on{color:hsl(var(--foreground));border-color:hsl(var(--ring)/.6);background:hsl(var(--ring)/.12)}

/* 본문 영역 */
.vshell .body{min-height:15rem;padding:.9rem;position:relative}
.vshell .body.flush{padding:0}

/* 지도 하단 바(D65) — 렌즈 · 관점 · 지표 */
.vshell .foot{display:flex;align-items:center;gap:.5rem;padding:.42rem .7rem;flex-wrap:wrap;
  border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.4)}
.vshell .foot .lbl{color:hsl(var(--muted-foreground));font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}
.vshell .foot .sp{margin-left:auto}

/* 공통 조각 */
.vshell h4{font-size:.86rem;font-weight:620;margin:0 0 .12rem}
.vshell .sub{color:hsl(var(--muted-foreground));font-size:.72rem;margin:0}
.vshell .drop{border:1.5px dashed hsl(var(--border));border-radius:var(--radius-sm);
  padding:1.5rem 1rem;text-align:center;margin-top:.7rem}
.vshell .drop .mk{width:26px;height:26px;color:hsl(var(--ring));margin:0 auto .5rem;display:block}
.vshell .hint{color:hsl(var(--muted-foreground));font-size:.72rem;margin:.28rem 0 0;line-height:1.55}
.vshell .row{display:flex;gap:.4rem;justify-content:center;margin-top:.75rem;flex-wrap:wrap}
.vshell .ok{display:inline-flex;align-items:center;gap:.4rem;color:hsl(var(--ring));font-weight:600}
.vshell .ok svg{width:13px;height:13px}
.vshell .chips{display:flex;gap:.3rem;justify-content:center;margin-top:.5rem;flex-wrap:wrap}
.vshell .chip{border:1px solid hsl(var(--border));border-radius:999px;padding:.08rem .45rem;
  color:hsl(var(--muted-foreground));font-size:.68rem}
.vshell .pbar{display:block;height:4px;border-radius:999px;background:hsl(var(--muted));overflow:hidden;margin-top:.5rem}
.vshell .pbar i{display:block;height:100%;width:0;background:hsl(var(--ring))}

/* 그래프 캔버스 */
.vshell .graph{display:block;width:100%;height:15.5rem;background:
  radial-gradient(120% 90% at 50% 0%, hsl(var(--ring)/.09), transparent 66%)}
.vshell .edge{stroke:hsl(var(--muted-foreground)/.42);stroke-width:1.1;fill:none}
.vshell .edge.hl{stroke:hsl(var(--ring));stroke-width:1.8}
.vshell .node{fill:var(--dom1)}
.vshell .node.d2{fill:var(--dom2)}
.vshell .node.d3{fill:var(--dom3)}
.vshell .node.pt{fill:hsl(var(--ring));stroke:hsl(var(--background));stroke-width:2}
.vshell .halo{fill:none;stroke:hsl(var(--ring));stroke-width:1.4;opacity:0}
.vshell .legend{position:absolute;left:.8rem;bottom:.8rem;display:flex;gap:.65rem;font-size:.66rem;
  color:hsl(var(--muted-foreground))}
.vshell .legend b{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.25rem;vertical-align:middle}
.vshell .detail{position:absolute;right:.8rem;top:.8rem;width:11rem;border:1px solid hsl(var(--border));
  border-radius:var(--radius-sm);background:hsl(var(--card));padding:.65rem .7rem;box-shadow:var(--shadow-3)}
.vshell .detail .badge{display:inline-block;font-size:.62rem;color:hsl(var(--ring));
  border:1px solid hsl(var(--ring)/.4);border-radius:999px;padding:.05rem .4rem;margin:.25rem 0}

/* 검색 결과 */
.vshell .res{margin-top:.6rem}
.vshell .res h6{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));margin:.7rem 0 .25rem}
.vshell .res h6 span{color:hsl(var(--ring));margin-left:.3rem}
.vshell .lrow{display:flex;align-items:center;gap:.55rem;padding:.32rem 0;border-top:1px solid hsl(var(--border)/.6)}
.vshell .lrow .mark{color:hsl(var(--ring));font-size:.72rem;flex:none;width:1.6rem}
.vshell .lrow .ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vshell .lrow .act2{color:hsl(var(--muted-foreground));font-size:.68rem;flex:none}

/* 터미널 · 커넥터(장면 5) */
.vshell .split{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:720px){.vshell .split{grid-template-columns:1fr}}
.vshell .term{border:1px solid hsl(var(--border));border-radius:var(--radius-sm);
  background:hsl(230 30% 5%);padding:.7rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;color:hsl(0 0% 88%);line-height:1.7}
.vshell .term .pr{color:hsl(var(--ring))}
.vshell .term .out{color:hsl(0 0% 62%)}
.vshell .term .out.good{color:hsl(var(--ring))}
.vshell .conn{border:1px solid hsl(var(--border));border-radius:var(--radius-sm);
  background:hsl(var(--card)/.7);padding:.7rem}
.vshell .ch{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.vshell .ch svg{width:18px;height:18px;color:hsl(var(--primary))}
.vshell .pill{display:inline-flex;align-items:center;gap:.35rem;border:1px solid hsl(var(--ring)/.45);
  border-radius:999px;padding:.1rem .5rem;color:hsl(var(--ring));font-size:.68rem}
.vshell .pill .cd{width:6px;height:6px;border-radius:50%;background:hsl(var(--ring))}
.vshell .tools{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.6rem}
.vshell .tool{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;
  border:1px solid hsl(var(--border));border-radius:999px;padding:.1rem .45rem;
  color:hsl(var(--muted-foreground))}

/* 커서·클릭 물결 */
.vshell .cur{position:absolute;width:15px;height:15px;color:hsl(var(--foreground));
  filter:drop-shadow(0 1px 2px hsl(0 0% 0%/.4));pointer-events:none;z-index:3}
.vshell .rip{position:absolute;width:12px;height:12px;border-radius:50%;
  border:1.5px solid hsl(var(--ring));pointer-events:none;z-index:2}
.vshell .caret{display:inline-block;width:1px;height:.85em;background:hsl(var(--foreground));
  vertical-align:-.12em;margin-left:1px}

/* ── 모션 ──────────────────────────────────────────────────────────────
   .play 는 docs.js 가 스크롤 진입 시 붙인다. 붙기 전에는 **완료 상태**로 보이도록
   기본값을 잡는다 - 자바스크립트가 죽거나 reduced-motion 이면 정지 화면이 남는다.
   (애니메이션은 전부 .play 하위에서만 정의한다.) */
/* `.play` 는 .vshell **자신**에 붙는다. `.vshell .play` (자손)로 쓰면 영영 안 걸려
   단계 등장이 통째로 사라진다 - 화면은 멀쩡해 보여서 눈으로는 안 잡힌다.

   그리고 **숨김은 반드시 `.play` 에 매달아야 한다.** 요소 자체에 opacity:0 을 박아
   두면(예전 `.tool`·`.out` 이 그랬다) 관찰자가 안 뜨는 환경 - 합성이 없는 창,
   IntersectionObserver 미지원, 스크립트 차단 - 에서 그 내용이 영영 안 보인다. */
.vshell .fx{opacity:1}
.vshell.play .fx,
.vshell.play .tool{opacity:0}

/* 장식(커서·물결·후광·캐럿)은 반대다: 재생 중에만 존재한다. 정지 화면 한가운데
   커서가 얼어붙어 있으면 고장으로 읽힌다. */
.vshell .cur,.vshell .rip,.vshell .halo,.vshell .caret{opacity:0}

@media (prefers-reduced-motion: no-preference){
  .scene .vshell.play .cur{animation:vcur 3.4s ease-in-out forwards}
  .scene .vshell.play .rip{animation:vrip .7s ease-out 1.25s}
  .scene .vshell.play .caret{animation:vcaret 1s steps(2) infinite}
  .scene .vshell.play .st1{animation:vin .5s var(--ease-out) .2s forwards}
  .scene .vshell.play .st2{animation:vin .5s var(--ease-out) 1.5s forwards}
  .scene .vshell.play .st3{animation:vin .5s var(--ease-out) 2.4s forwards}
  .scene .vshell.play .st4{animation:vin .5s var(--ease-out) 3.1s forwards}
  .scene .vshell.play .pbar i{transform:scaleX(0);transform-origin:left;animation:vbar 2.1s var(--ease-out) .6s forwards}
  .scene .vshell.play .halo{animation:vhalo 1.4s ease-out 1.4s forwards}
  .scene .vshell.play .tool{animation:vin .4s var(--ease-out) forwards}
  .scene .vshell.play .tool:nth-child(1){animation-delay:2.2s}
  .scene .vshell.play .tool:nth-child(2){animation-delay:2.35s}
  .scene .vshell.play .tool:nth-child(3){animation-delay:2.5s}
  .scene .vshell.play .tool:nth-child(4){animation-delay:2.65s}
  .scene .vshell.play .tool:nth-child(5){animation-delay:2.8s}
  .scene .vshell.play .typed{animation:vtype 1.5s steps(24) .4s forwards}
}
@keyframes vin{to{opacity:1;transform:none}}
@keyframes vbar{to{transform:scaleX(1)}}
@keyframes vhalo{0%{opacity:0;r:10}55%{opacity:.85}100%{opacity:0;r:26}}
@keyframes vrip{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(3.2)}}
@keyframes vcaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes vcur{
  0%{opacity:0;transform:translate(var(--x0,20%),var(--y0,80%))}
  12%{opacity:1}
  45%{transform:translate(var(--x1,44%),var(--y1,46%))}
  75%{opacity:1;transform:translate(var(--x1,44%),var(--y1,46%))}
  100%{opacity:0;transform:translate(var(--x1,44%),var(--y1,46%))}
}
@keyframes vtype{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.vshell .typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:12rem}
.scene .vshell.play .typed{clip-path:inset(0 100% 0 0)}

@media (prefers-reduced-motion: reduce){
  .vshell.play .fx{opacity:1}
  .vshell .typed,.scene .vshell.play .typed{max-width:none}
}

/* ── 반응형 ───────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .docs{grid-template-columns:14rem minmax(0,1fr);gap:2rem}
  .docs-toc{display:none}
}
@media(max-width:860px){
  .docs{grid-template-columns:1fr;gap:0}
  /* 좁은 화면에서는 세로 목록을 가로 스크롤 줄로 눕힌다. 섹션 박스가 먼저, 페이지가 그다음. */
  .docs-side{position:static;max-height:none;padding:.9rem 0 .6rem;border-bottom:1px solid hsl(var(--border))}
  .docs-side .secsw{display:flex;gap:.2rem;overflow-x:auto;margin-bottom:.7rem}
  .docs-side .secsw a{white-space:nowrap;flex:none}
  .docs-side .sec-h{display:none}
  .docs-side .secnav{display:flex;gap:.2rem;overflow-x:auto}
  .docs-side .secnav a{white-space:nowrap;flex:none}
  .doc{padding:1.5rem 1.3rem 2rem;border-radius:.75rem}
  .doc h1{font-size:clamp(1.9rem,1.4rem + 3vw,2.6rem)}
}

footer.docs-foot{position:relative;z-index:1;border-top:1px solid hsl(var(--border));padding:1.8rem 0 2.6rem;
  color:hsl(var(--muted-foreground));font-size:.8125rem}
footer.docs-foot .row{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;
  max-width:80rem;margin:0 auto;padding:0 1.5rem}
footer.docs-foot a{text-decoration:none;color:inherit}
footer.docs-foot a:hover{color:hsl(var(--foreground))}
footer.docs-foot .bm{display:flex;align-items:center;gap:.45rem;margin-right:auto}
footer.docs-foot .bm svg,footer.docs-foot .bm .vmark{width:16px;height:16px}