/* vramcheck — 오프화이트 배경, 터미널/기술문서 미학, 독스형 좌측 내비 */
:root {
  --vc-bg: #faf9f4;
  --vc-panel: #f3f1e9;
  --vc-ink: #22281f;
  --vc-dim: #5c6357;
  --vc-line: #e1ded1;
  --vc-green: #2e7d52;
  --vc-green-deep: #1d5c3a;
  --vc-green-wash: #e8f2ea;
  --vc-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --vc-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--vc-bg);
  color: var(--vc-ink);
  font-family: var(--vc-sans);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
}

a { color: var(--vc-green-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vc-green); }
code, pre, .prompt_glyph, .pane_label, .crumb_row {
  font-family: var(--vc-mono);
}
pre {
  background: var(--vc-panel);
  border: 1px solid var(--vc-line);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
code { font-size: 0.9em; }
p code, li code {
  background: var(--vc-panel);
  border: 1px solid var(--vc-line);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}
img, svg { max-width: 100%; }

/* ── 상단 라인 ─────────────────────────────── */
.topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 2px solid var(--vc-green);
  background: var(--vc-bg);
}
.brandmark {
  font-family: var(--vc-mono);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--vc-ink);
}
.prompt_glyph { color: var(--vc-green); }
.motto_line { margin: 0; font-size: 0.85rem; color: var(--vc-dim); }

/* ── 독스형 프레임: 좌측 내비 + 본문 ───────── */
.frame { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.sidepane { padding: 1.25rem 0 0.25rem; }
.pane_label {
  margin: 1rem 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vc-dim);
}
.pane_label::before { content: "## "; color: var(--vc-green); }
.pane_list { list-style: none; margin: 0; padding: 0; }
.pane_list li { margin: 0.15rem 0; }
.pane_list a {
  display: block;
  padding: 0.2rem 0.5rem;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--vc-ink);
}
.pane_list a:hover { background: var(--vc-green-wash); }
.pane_list a[aria-current="page"] {
  border-left-color: var(--vc-green);
  background: var(--vc-green-wash);
  font-weight: 600;
}

.deckwrap { padding: 1.5rem 0 3rem; min-width: 0; }
.deckwrap h1 { font-size: 1.65rem; line-height: 1.35; margin: 0.5rem 0 1rem; }
.deckwrap h2 {
  font-size: 1.2rem;
  margin: 2.2rem 0 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--vc-line);
}
.deckwrap h2::before { content: "# "; color: var(--vc-green); font-family: var(--vc-mono); }

@media (min-width: 880px) {
  .frame {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2.5rem;
  }
  .sidepane {
    border-right: 1px solid var(--vc-line);
    padding-right: 1.25rem;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* ── 빵부스러기 ───────────────────────────── */
.crumb_row { font-size: 0.78rem; color: var(--vc-dim); margin-bottom: 0.75rem; }
.crumb_row a { color: var(--vc-dim); }
.crumb_sep { margin: 0 0.45rem; color: var(--vc-line); }

/* ── 히어로/즉답 ──────────────────────────── */
.hero_block { padding: 0.5rem 0 0.75rem; }
.hero_block .lede { font-size: 1.05rem; color: var(--vc-dim); }
.quickfact {
  border-left: 3px solid var(--vc-green);
  background: var(--vc-green-wash);
  border-radius: 0 6px 6px 0;
  padding: 0.8rem 1rem;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}

/* ── 도구 카드 그리드 ─────────────────────── */
.tool_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
}
.tool_grid li {
  border: 1px solid var(--vc-line);
  border-radius: 8px;
  background: #fff;
  padding: 0.9rem 1rem;
}
.tool_grid .tool_name {
  display: block;
  font-family: var(--vc-mono);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.tool_grid .tool_note { font-size: 0.85rem; color: var(--vc-dim); margin: 0; }
.soon_tag {
  display: inline-block;
  font-family: var(--vc-mono);
  font-size: 0.68rem;
  color: var(--vc-green-deep);
  background: var(--vc-green-wash);
  border: 1px solid var(--vc-green);
  border-radius: 999px;
  padding: 0 0.5em;
  margin-left: 0.4em;
  vertical-align: middle;
}

/* ── 표 ──────────────────────────────────── */
.sheet_scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { border: 1px solid var(--vc-line); padding: 0.45rem 0.7rem; text-align: left; }
th { background: var(--vc-panel); font-family: var(--vc-mono); font-size: 0.8rem; }

/* ── FAQ (가시 마크업, dl 고정형) ─────────── */
.faq_fold { margin-top: 2.5rem; }
.qa_list dt {
  font-weight: 700;
  margin-top: 1.1rem;
}
.qa_list dt::before { content: "Q. "; color: var(--vc-green); font-family: var(--vc-mono); }
.qa_list dd { margin: 0.3rem 0 0; color: var(--vc-ink); }

/* ── 임베드 킷 ────────────────────────────── */
.embed_kit { margin-top: 2.5rem; }
.kit_copy {
  font-family: var(--vc-mono);
  font-size: 0.85rem;
  color: #fff;
  background: var(--vc-green-deep);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.kit_copy:hover { background: var(--vc-green); }

/* ── 하단 ────────────────────────────────── */
.baseline {
  border-top: 1px solid var(--vc-line);
  background: var(--vc-panel);
  padding: 1.5rem 1.25rem 2rem;
  font-size: 0.82rem;
  color: var(--vc-dim);
}
.baseline_note { max-width: 46rem; margin: 0 auto 0.8rem; }
.baseline_links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0 auto 0.8rem;
  padding: 0;
  max-width: 46rem;
}
.baseline_sig { max-width: 46rem; margin: 0 auto; font-family: var(--vc-mono); font-size: 0.75rem; }

/* ── 임베드 뷰(?lite=1): 골격 숨김 + 귀속바 ── */
.checkbar { display: none; }
html.liteview .topline,
html.liteview .sidepane,
html.liteview .baseline,
html.liteview .crumb_row,
html.liteview .embed_kit,
html.liteview .faq_fold { display: none; }
html.liteview .frame { display: block; padding: 0 0.75rem; }
html.liteview .deckwrap { padding: 0.75rem 0 3rem; }
html.liteview .checkbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  background: var(--vc-ink);
  font-family: var(--vc-mono);
  font-size: 0.78rem;
}
html.liteview .checkbar a { color: #d9efe1; text-decoration: none; }
html.liteview .checkbar a:hover { text-decoration: underline; }


/* ---- farm calc/guide helpers ---- */
.farm-calc{border:1px solid #ccc;border-radius:10px;padding:1rem 1.1rem;margin:1.2rem 0;background:#fafafa}
.farm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.85rem 1rem}
.farm-calc label{display:block;font-size:.78rem;font-weight:700;margin-bottom:.3rem}
.farm-calc input,.farm-calc select{width:100%;font:inherit;padding:.45rem .55rem;border:1px solid #bbb;border-radius:6px}
.farm-out{margin-top:.9rem;padding:.85rem 1rem;background:#fff;border:1px solid #ddd;border-radius:8px}
.farm-out table{width:100%;border-collapse:collapse}
.farm-out th,.farm-out td{text-align:left;padding:.3rem .35rem;border-bottom:1px solid #eee}
.farm-note{font-size:.9rem;color:#555;margin-top:.5rem}
.farm-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.2rem 0}
.farm-card{border:1px solid #ddd;border-radius:10px;padding:1rem;background:#fff}
.farm-card h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.farm-card p{margin:0;font-size:.92rem;color:#444}
.guide-body p{margin:0 0 .85rem;line-height:1.65}
.guide-body h2{margin:1.6rem 0 .7rem}
.guide-body ul{margin:0 0 1rem;padding-left:1.2rem;line-height:1.55}

/* terminal-style next commands + load pipeline */
.vc-next {
  margin: 1.6rem 0 0;
  padding: 0.85rem 1rem 1rem;
  background: #1a1f1c;
  color: #c8d5cc;
  border-radius: 8px;
  border: 1px solid #2d3830;
  font-family: var(--vc-mono);
  font-size: 0.88rem;
}
.vc-next__cmd {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #7dcea0;
  font-family: var(--vc-mono);
  letter-spacing: 0.02em;
}
.vc-cmdlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.vc-cmdlist li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: baseline;
  line-height: 1.45;
}
.vc-flag {
  color: #8fb9a0;
  min-width: 4.5rem;
  flex-shrink: 0;
}
.vc-cmdlist a {
  color: #e8f5ec;
  text-decoration: none;
  border-bottom: 1px dotted #4a6b56;
}
.vc-cmdlist a:hover {
  color: #fff;
  border-bottom-color: #7dcea0;
}
.vc-pipeline {
  margin: 1.4rem 0;
  padding: 1rem 1.1rem;
  background: var(--vc-panel);
  border: 1px solid var(--vc-line);
  border-left: 4px solid var(--vc-green);
  border-radius: 6px;
}
.vc-pipeline h2 {
  margin: 0 0 0.55rem;
  font-family: var(--vc-mono);
  font-size: 1.05rem;
  color: var(--vc-green-deep);
}
.vc-pipeline ol {
  margin: 0;
  padding-left: 1.25rem;
}
.vc-pipeline li { margin: 0.35rem 0; }
.vc-map {
  font-family: var(--vc-mono);
  font-size: 0.86rem;
  color: var(--vc-dim);
  padding: 0.55rem 0.75rem;
  background: var(--vc-green-wash);
  border: 1px dashed var(--vc-green);
  border-radius: 4px;
  line-height: 1.7;
}
.vc-map a { font-weight: 600; }

/* entity see-also — plain, matches guide-body */
.see-also{margin:2rem 0 1rem;padding:1rem 0 0;border-top:1px solid rgba(127,127,127,.25)}
.see-also h2{font-size:1.15rem;margin:0 0 .75rem}
.see-also p{margin:0 0 .55rem;line-height:1.55}