/* =========================================================================
   API 투자전략센터 — Sub-page shared chrome
   Page header · doc padding · callouts · reusable code block
   Reusable across every sub-page.
   ========================================================================= */

/* ---------- page header band ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding-top: 113px; padding-bottom: clamp(30px, 5vw, 50px);
  border-bottom: 1px solid var(--border);
}
.page-hero__glow {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, var(--glow-navy), transparent 66%);
  top: -160px; right: 4%; opacity: 0.6;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { margin: 0; }
.page-hero__sub { margin-top: 16px; max-width: 660px; }

/* ---------- doc layout ---------- */
.doc { padding-block: clamp(44px, 5vw, 72px); }

/* ---------- callouts ---------- */
.callout { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); margin: 16px 0; }
.callout:first-child { margin-top: 0; }
.callout:has(.callout__body h4) { align-items: flex-start; }
.callout__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.callout__icon svg { width: 18px; height: 18px; }
.callout__body h4 { font-size: var(--fs-text-md); line-height: var(--lh-text-md); font-weight: 700; margin-bottom: 4px; }
/* 원본은 여기서 var(--text-sub) 를 참조하지만 그 토큰은 어디에도 정의돼 있지 않다.
   의도(본문 보조 텍스트)에 맞는 --text-dim 으로 둔다. */
.callout__body p { font-size: var(--fs-text-sm); color: var(--text-dim); margin: 0; line-height: var(--lh-text-sm); }
.callout--info { border-color: var(--chip-border); background: var(--surface-blue); }
.callout--info .callout__icon { background: rgba(91,168,255,0.12); color: var(--accent-prime); }
.callout--tip { border-color: rgba(240,176,114,0.32); background: rgba(240,176,114,0.1); }
.callout--tip .callout__icon { background: rgba(240,176,114,0.16); color: var(--color-warning); }
.callout--warn { border-color: rgba(240,176,114,0.32); }
.callout--warn .callout__icon { background: rgba(240,176,114,0.14); color: var(--color-warning); }
:root[data-theme="light"] .callout--warn { background: rgba(240,176,114,0.07); }

/* ---------- reusable code block (copy + syntax) ---------- */
.codeblock { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-strong); background: var(--code-bg); margin: 14px 0; box-shadow: var(--shadow-card); }
.codeblock__bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.codeblock__dots { display: flex; gap: 6px; }
.codeblock__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.codeblock__dots i:nth-child(1){background:#ff5f57;} .codeblock__dots i:nth-child(2){background:#febc2e;} .codeblock__dots i:nth-child(3){background:#28c840;}
.codeblock__file { margin-left: 4px; font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--code-file); }
.codeblock__lang { font-family: var(--font-mono); font-size: var(--fs-badge); line-height: var(--lh-badge); color: var(--accent-cyan); padding: 3px 8px; border-radius: 5px; background: rgba(52,225,255,0.1); border: 1px solid rgba(52,225,255,0.2); }
.copy-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--fs-badge); line-height: var(--lh-badge); font-weight: 500; color: var(--copy-btn-text);
  padding: 5px 11px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}
.copy-btn:hover { color: #fff; border-color: var(--border-glow); background: rgba(52,225,255,0.08); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.copied { color: var(--color-success); border-color: rgba(43,214,110,0.4); }
.codeblock__body { padding: 16px 18px; font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--code-text); overflow-x: auto; }
.codeblock__body pre { white-space: pre; margin: 0; }
.codeblock--inline .codeblock__body { font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); padding: 14px 16px; }
.tok-kw { color: var(--code-kw); } .tok-str { color: var(--code-str); } .tok-num { color: var(--code-num); }
.tok-fn { color: var(--code-fn); } .tok-com { color: var(--code-comment); font-style: italic; }
.tok-punc { color: var(--code-punc); } .tok-var { color: #c9d3f0; } .tok-key { color: #7aa2ff; }
:root[data-theme="light"] .codeblock__body, :root[data-theme="light"] .codeblock__file { color: var(--code-text); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .page-hero { padding-top: 93px; }
  .page-hero__sub { margin-top: 7px; }
  .callout { padding: 14px; align-items: flex-start; }
  .callout__icon { width: 3px; height: 3px; border-radius: 50%; margin-top: 10px; }
  .callout__icon svg { display: none; }
  .callout--tip .callout__icon, .callout--warn .callout__icon { background: var(--color-warning); }
  .callout--info .callout__icon { background: var(--accent-prime); }
}