/* API 문서(#32) — 격자 첫 구역 · 왼쪽 목차. 물결 · 빛 번짐 · 코드 판은 공통 부품(#40) */

.apidoc-hero{position:relative;overflow:hidden;padding:72px 0 84px;border-bottom:1px solid var(--line)}
.apidoc-hero-bg{position:absolute;inset:0;pointer-events:none}
.apidoc-grid{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,var(--text) 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,var(--text) 20%,transparent 75%)}
.apidoc-hero-bg .vs-waves{position:absolute;left:0;bottom:0;height:100%}

.apidoc-hero-in{position:relative;display:grid;gap:40px;align-items:center}
@media (min-width:1024px){.apidoc-hero-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.apidoc-hero-copy{display:flex;flex-direction:column;gap:18px}
.apidoc-h1{font-size:clamp(34px,4.4vw,56px);font-weight:900;line-height:1.12;letter-spacing:-.5px}
.apidoc-grad-text{background:linear-gradient(90deg,var(--accent),var(--grad-b),var(--grad-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.apidoc-lead{font-size:17px;color:var(--muted);line-height:1.7}
.apidoc-cta{display:flex;flex-wrap:wrap;gap:8px}
.apidoc-stats{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.apidoc-stats div{padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.apidoc-stats dt{font-size:12px;color:var(--muted)}
.apidoc-stats dd{margin:2px 0 0;font:800 22px/1.2 var(--mono);color:var(--text)}
.apidoc-stats small{font:600 12px var(--sans);color:var(--muted);margin-left:3px}
.apidoc-hero-code{min-width:0}
.apidoc-hero-code .ctab{box-shadow:0 40px 80px -30px var(--glow-1)}

/* 본문(설계 165 §3-2) — S: 목차는 위에 접어 둔다 · M: 목차가 본문 위 · L · XL: 「목차(220) │ 본문」 ·
   2XL: 「목차 │ 본문 │ 코드」 — 코드가 있는 구역은 글 옆 열에 코드 판을 붙여 둔다 */
.apidoc-body{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);padding-top:48px;padding-bottom:24px}
@media (min-width:1024px){.apidoc-body{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"toc main";gap:56px}
  .apidoc-toc{grid-area:toc}.apidoc-main{grid-area:main}}
.apidoc-toc-s{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.apidoc-toc-s summary{display:flex;align-items:center;min-height:var(--tap);padding:0 14px;cursor:pointer;font-weight:700}
.apidoc-toc-s nav{display:flex;flex-direction:column;padding:0 6px 8px}
.apidoc-toc{display:none;flex-wrap:wrap;gap:4px;align-self:start}
@media (min-width:640px){.apidoc-toc-s{display:none}.apidoc-toc{display:flex}}
@media (min-width:1024px){.apidoc-toc{position:sticky;top:calc(var(--gn-h) + 24px);flex-direction:column;flex-wrap:nowrap;
  padding-left:14px;border-left:2px solid var(--line)}}
.apidoc-toc-title{width:100%;font-size:12px;font-weight:800;letter-spacing:1px;color:var(--faint);margin-bottom:4px}
.apidoc-toc a,.apidoc-toc-s a{display:flex;align-items:center;min-height:var(--tap);padding:0 10px;border-radius:var(--r-sm);color:var(--muted);text-decoration:none;font-size:14px;white-space:nowrap}
.apidoc-toc a:hover,.apidoc-toc-s a:hover{background:var(--hover);color:var(--text)}
.apidoc-toc a.is-on{color:var(--accent);font-weight:700;background:var(--accent-soft)}
.apidoc-main{display:flex;flex-direction:column;gap:56px;min-width:0}
.apidoc-sec,.apidoc-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.apidoc-sec{scroll-margin-top:calc(var(--gn-h) + 16px)}
.apidoc-code{min-width:0}
@media (min-width:1920px){
  .apidoc-sec.has-code{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"text code";gap:40px;align-items:start}
  .apidoc-text{grid-area:text}
  .apidoc-code{grid-area:code;position:sticky;top:calc(var(--gn-h) + 24px)}
}
.apidoc-sec h2{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apidoc-sec p{color:var(--muted);line-height:1.75}
.apidoc-route{display:flex;align-items:center;gap:8px;font-size:14px}
.apidoc-method{font:800 11px var(--mono);letter-spacing:.5px;padding:4px 8px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent)}
.apidoc-method.is-get{background:var(--ok-bg);color:var(--ok)}
.apidoc-badge{font:700 11px var(--mono);padding:3px 8px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.apidoc-badge.is-soon{background:var(--warn-bg);color:var(--warn);border-color:transparent;font-family:var(--sans)}
.apidoc-params{min-width:560px}
.apidoc-main .table-box{--table-bg:var(--paper)}
.apidoc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.apidoc-note{font-size:13px;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--accent-line)}
.apidoc-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:st}
@media (min-width:640px){.apidoc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.apidoc-steps li{counter-increment:st;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--card)}
.apidoc-steps li::before{content:counter(st);font:800 13px var(--mono);color:var(--accent)}
.apidoc-steps span{font-size:14px;color:var(--muted)}

.apidoc-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted);line-height:1.7}

/* 상세 사용법 자리(이슈 180) — 가짜 글을 흐리게 깔고 카드를 같은 칸에 겹친다. 카드는 읽는 동안 따라온다 */
.apidoc-locked{display:grid;grid-template-columns:minmax(0,1fr)}
.apidoc-locked>*{grid-area:1/1}
.apidoc-locked-body{display:flex;flex-direction:column;gap:56px;filter:blur(6px);-webkit-user-select:none;user-select:none;pointer-events:none}
.apidoc-lock-card{position:sticky;top:calc(var(--gn-h) + 24px);z-index:2;align-self:start;justify-self:center;width:min(100%,28rem);
  margin-top:40px;display:flex;flex-direction:column;gap:12px;padding:24px;box-shadow:var(--shadow-pop)}
.apidoc-lock-title{font-size:20px;font-weight:800;line-height:1.4;margin:0}
.apidoc-lock-card p{margin:0;color:var(--muted);line-height:1.7}