/* ============================================================
   미래일터 탐험대 · 바이브코딩 레이어 (접두사 vb-)
   tokens.css → base.css → comp.css → anim.css 다음에 로드된다.
   토큰은 절대 재정의하지 않는다. 이 파일이 정의하는 것은 vb-* 뿐이다.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   A. 슬라이드 덱 (/vibecoding/slides/)
   16:9 고정. 글자 크기는 --vb-u(스테이지 폭의 1%)에 비례한다.
   ══════════════════════════════════════════════════════════ */
.vb-deck{
  /* --vb-ub = 스테이지 폭의 1%(기본 단위). 순수 CSS 기본값이며 JS 가 실측 px 로 덮어쓴다.
     장별 자동 축소는 슬라이드에 --vb-fit 을 넣어 처리한다 (slides.js). */
  --vb-ub: min(1vw, 1.7778vh);
  --vb-chrome: 118px;
  /* isolation:isolate 를 쓰지 않는다 — 새 쌓임 문맥이 생기면 개요/도움말 오버레이가
     사이트 헤더(z-index:900) 아래에 갇힌다. */
  position:relative; background:var(--space-0); color:var(--space-text);
  padding:var(--sp-3) var(--sp-3) 0;
}
.vb-deck:fullscreen{ --vb-chrome:74px; padding:0; }
.vb-deck:-webkit-full-screen{ --vb-chrome:74px; padding:0; }

.vb-stage{
  position:relative; margin-inline:auto; width:100%;
  aspect-ratio:16/9;
  max-height:calc(100vh - var(--vb-chrome));
  max-width:calc((100vh - var(--vb-chrome)) * 16 / 9);
  background:var(--space-1);
  border:1px solid var(--space-3); border-radius:var(--radius-lg);
  overflow:hidden;
}
@supports (height:100dvh){
  .vb-stage{ max-height:calc(100dvh - var(--vb-chrome));
             max-width:calc((100dvh - var(--vb-chrome)) * 16 / 9); }
}
.vb-deck:fullscreen .vb-stage{ border-radius:0; border-color:transparent; }

/* ── 슬라이드 ─────────────────────────────────────────── */
.vb-slide{
  --vb-u: calc(var(--vb-ub) * var(--vb-fit, 1));
  position:absolute; inset:0; display:none;
  padding:calc(var(--vb-u) * 5.2) calc(var(--vb-u) * 6);
  flex-direction:column; overflow:hidden;
}
.vb-slide.is-active{ display:flex; animation:fade-up var(--dur-3) var(--ease) both; }
.vb-slide[hidden]{ display:none !important; }   /* 학년급 필터로 제외된 장 */
.vb-slide__head{ flex:0 0 auto; margin-bottom:calc(var(--vb-u) * 2.4); }
.vb-slide__kicker{
  display:flex; align-items:center; gap:calc(var(--vb-u) * 1.2);
  font-size:clamp(10px, calc(var(--vb-u) * 1.55), 20px);
  font-weight:800; letter-spacing:.06em; color:var(--space-muted);
  text-transform:none; margin-bottom:calc(var(--vb-u) * 1.2);
}
.vb-slide__title{
  font-size:clamp(17px, calc(var(--vb-u) * 4.5), 62px);
  line-height:1.2; letter-spacing:-.03em; color:#fff; margin:0;
  word-break:keep-all;
}
.vb-slide__sub{
  font-size:clamp(11px, calc(var(--vb-u) * 2.05), 27px);
  line-height:1.5; color:var(--space-muted); margin:calc(var(--vb-u) * 1.1) 0 0;
  word-break:keep-all;
}
.vb-slide__body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  justify-content:center; gap:calc(var(--vb-u) * 1.6); }

/* 표지 / 섹션 / 마무리 */
.vb-slide--title,.vb-slide--section,.vb-slide--closing{
  align-items:flex-start; justify-content:center; text-align:left;
  background:radial-gradient(1200px 600px at 82% 12%, rgba(124,58,237,.30), transparent 62%),
             radial-gradient(900px 520px at 10% 92%, rgba(14,116,110,.28), transparent 60%),
             var(--space-1);
}
.vb-slide--title .vb-slide__title{ font-size:clamp(20px, calc(var(--vb-u) * 6.4), 88px); }
.vb-slide--section .vb-slide__title{ font-size:clamp(19px, calc(var(--vb-u) * 5.8), 80px); }
.vb-slide--closing .vb-slide__title{ font-size:clamp(19px, calc(var(--vb-u) * 5.6), 78px); }
.vb-slide__stamp{
  font-size:clamp(30px, calc(var(--vb-u) * 13), 190px); font-weight:900; line-height:.9;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.22);
  margin-bottom:calc(var(--vb-u) * 1.4);
}

/* ── 불릿 ─────────────────────────────────────────────── */
.vb-bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column;
  gap:calc(var(--vb-u) * 1.35); }
.vb-bullet{
  display:flex; align-items:flex-start; gap:calc(var(--vb-u) * 1.5);
  font-size:clamp(12px, calc(var(--vb-u) * 2.42), 33px);
  line-height:1.42; color:var(--space-text); word-break:keep-all;
}
.vb-bullet::before{
  content:""; flex:0 0 auto; margin-top:.52em;
  width:calc(var(--vb-u) * .95); height:calc(var(--vb-u) * .95); min-width:5px; min-height:5px;
  border-radius:50%; background:linear-gradient(140deg,#8FD3FF,var(--planet-2));
}
.vb-bullets--few .vb-bullet{ font-size:clamp(13px, calc(var(--vb-u) * 2.9), 40px); }
/* 항목이 많으면 세로로 줄이지 않고 16:9 의 남는 가로를 쓴다 (교실 뒷자리 가독성 우선) */
.vb-bullets--many{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:calc(var(--vb-u) * 3.4); row-gap:calc(var(--vb-u) * 1.25);
  align-content:center;
}
.vb-bullets--many .vb-bullet{ font-size:clamp(12px, calc(var(--vb-u) * 2.05), 28px); line-height:1.36; }
@media (max-width:640px){ .vb-bullets--many{ grid-template-columns:1fr; } }

/* ── 2단 / 비교 ───────────────────────────────────────── */
.vb-cols{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--vb-u) * 2.6); min-height:0; }
.vb-col{
  background:rgba(255,255,255,.055); border:1px solid var(--space-3);
  border-radius:var(--radius-kid); padding:calc(var(--vb-u) * 1.9) calc(var(--vb-u) * 2.1);
  display:flex; flex-direction:column; min-height:0;
}
.vb-col__title{
  font-size:clamp(11px, calc(var(--vb-u) * 2.2), 30px); font-weight:850; color:#fff;
  margin:0 0 calc(var(--vb-u) * 1.2); padding-bottom:calc(var(--vb-u) * .8);
  border-bottom:1px solid var(--space-3);
}
.vb-col__items{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column;
  gap:calc(var(--vb-u) * 1.1); }
.vb-col__items li{
  font-size:clamp(12px, calc(var(--vb-u) * 1.98), 26px); line-height:1.38;
  color:var(--space-text); word-break:keep-all; padding-left:calc(var(--vb-u) * 1.7);
  position:relative;
}
.vb-col__items li::before{ content:"·"; position:absolute; left:calc(var(--vb-u) * .5);
  font-weight:900; color:var(--space-muted); }

.vb-compare .vb-col--bad{ background:rgba(220,38,38,.14); border-color:rgba(248,113,113,.45); }
.vb-compare .vb-col--bad .vb-col__title{ color:#FFC9C9; border-bottom-color:rgba(248,113,113,.4); }
.vb-compare .vb-col--bad .vb-col__items li::before{ content:"✕"; color:#FCA5A5; font-size:.8em; }
.vb-compare .vb-col--good{ background:rgba(14,122,80,.20); border-color:rgba(52,211,153,.45); }
.vb-compare .vb-col--good .vb-col__title{ color:#B6F3D4; border-bottom-color:rgba(52,211,153,.4); }
.vb-compare .vb-col--good .vb-col__items li::before{ content:"✓"; color:#6EE7B7; font-size:.8em; }

/* ── 단계 ─────────────────────────────────────────────── */
.vb-steps{ list-style:none; padding:0; margin:0; display:grid;
  gap:calc(var(--vb-u) * 1.5); align-content:center; }
/* 4단계 이상은 2열로 배치한다 — 세로로 쌓으면 글자를 줄여야 해서 뒷자리에서 안 읽힌다 */
.vb-steps--many{ grid-template-columns:1fr 1fr; column-gap:calc(var(--vb-u) * 2.2); }
@media (max-width:640px){ .vb-steps--many{ grid-template-columns:1fr; } }
.vb-step{
  display:grid; grid-template-columns:auto 1fr; align-items:start;
  gap:calc(var(--vb-u) * 1.9);
  background:rgba(255,255,255,.05); border:1px solid var(--space-3);
  border-left:calc(var(--vb-u) * .5) solid var(--planet-2);
  border-radius:var(--radius-kid); padding:calc(var(--vb-u) * 1.4) calc(var(--vb-u) * 1.8);
}
.vb-step__n{
  display:grid; place-items:center; font-weight:900;
  width:calc(var(--vb-u) * 4); height:calc(var(--vb-u) * 4);
  min-width:24px; min-height:24px; border-radius:50%;
  background:linear-gradient(140deg,#8FD3FF,var(--planet-2)); color:#0B1533;
  font-size:clamp(10px, calc(var(--vb-u) * 2), 26px);
}
.vb-step__title{ font-size:clamp(11px, calc(var(--vb-u) * 2.15), 29px); font-weight:850;
  color:#fff; margin:0 0 calc(var(--vb-u) * .5); word-break:keep-all; }
.vb-step__desc{ font-size:clamp(12px, calc(var(--vb-u) * 1.85), 24px); line-height:1.42;
  color:var(--space-muted); margin:0; word-break:keep-all; }

/* ── 인용 ─────────────────────────────────────────────── */
.vb-quote{ position:relative; padding-left:calc(var(--vb-u) * 6); margin:0; }
.vb-quote__mark{
  position:absolute; left:0; top:calc(var(--vb-u) * -1.4);
  font-size:clamp(34px, calc(var(--vb-u) * 9), 130px); line-height:1;
  color:var(--planet-2); opacity:.65; font-weight:900;
}
.vb-quote__text{
  font-size:clamp(13px, calc(var(--vb-u) * 2.85), 39px); line-height:1.5; color:#fff;
  font-weight:650; word-break:keep-all; margin:0;
}
.vb-cite{ display:block; margin-top:calc(var(--vb-u) * 1.8);
  font-size:clamp(10px, calc(var(--vb-u) * 1.7), 22px); color:var(--space-muted); font-style:normal; }
.vb-cite::before{ content:"— "; }

/* ── 활동 / 질문 ──────────────────────────────────────── */
.vb-slide--activity .vb-slide__body{ justify-content:flex-start; }
.vb-tag{
  display:inline-flex; align-items:center; gap:.4em; border-radius:var(--radius-pill);
  padding:.28em .8em; font-weight:800; letter-spacing:.02em;
  font-size:clamp(9px, calc(var(--vb-u) * 1.5), 19px);
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3);
}
.vb-tag--elem{ background:rgba(14,122,80,.34); border-color:rgba(52,211,153,.5); }
.vb-tag--middle{ background:rgba(30,75,143,.42); border-color:rgba(143,211,255,.5); }
.vb-tag--high{ background:rgba(138,63,192,.36); border-color:rgba(196,146,240,.5); }

.vb-qna{ list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:1fr 1fr; gap:calc(var(--vb-u) * 2); }
.vb-qna li{
  background:rgba(255,255,255,.06); border:1px solid var(--space-3);
  border-radius:var(--radius-kid); padding:calc(var(--vb-u) * 2);
  font-size:clamp(10.5px, calc(var(--vb-u) * 1.95), 26px); line-height:1.44;
  color:var(--space-text); word-break:keep-all;
}
.vb-qna li::before{ content:"?"; display:block; font-weight:900; color:var(--planet-2);
  font-size:clamp(14px, calc(var(--vb-u) * 3), 40px); line-height:1;
  margin-bottom:calc(var(--vb-u) * .8); }

/* ── 도식 설명 (visual) ───────────────────────────────── */
.vb-visual{
  flex:0 0 auto; margin:0; display:flex; align-items:flex-start; gap:calc(var(--vb-u) * 1.2);
  border-top:1px dashed var(--space-3); padding-top:calc(var(--vb-u) * 1.2);
  font-size:clamp(9px, calc(var(--vb-u) * 1.42), 18px); line-height:1.45;
  color:var(--space-muted); word-break:keep-all;
}
.vb-visual__ico{ flex:0 0 auto; opacity:.8; }
.vb-visual__label{ font-weight:800; color:#B9CBEC; }

/* ── 발표자 노트 ──────────────────────────────────────── */
.vb-note{
  position:absolute; left:0; right:0; bottom:0; display:none;
  max-height:calc(var(--vb-u) * 19); overflow:auto;
  background:rgba(7,12,27,.95); border-top:2px solid var(--planet-2);
  padding:calc(var(--vb-u) * 1.6) calc(var(--vb-u) * 2.4);
  font-size:clamp(10px, calc(var(--vb-u) * 1.62), 21px); line-height:1.55;
  color:#D9E4F7; text-align:left;
}
.vb-note__label{ display:block; font-weight:850; color:#8FD3FF; letter-spacing:.05em;
  margin-bottom:.35em; font-size:.82em; }
.vb-deck.is-notes .vb-slide.is-active .vb-note{ display:block; }
/* 노트를 켜면 본문이 가려지지 않게 아래를 비운다 (slides.js 의 자동 맞춤이 글자를 줄인다) */
.vb-deck.is-notes .vb-slide.is-active{ padding-bottom:calc(var(--vb-u) * 21); }

/* ── 하단 바 ──────────────────────────────────────────── */
.vb-bar{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  max-width:calc((100vh - var(--vb-chrome)) * 16 / 9); margin:var(--sp-3) auto 0;
  padding-bottom:var(--sp-3);
}
.vb-bar__progress{ flex:1 1 160px; height:7px; min-width:110px;
  background:rgba(255,255,255,.14); border-radius:999px; overflow:hidden; }
.vb-bar__fill{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,#8FD3FF,var(--planet-2)); border-radius:999px;
  transition:width var(--dur-2) var(--ease); }
.vb-bar__count{ font-variant-numeric:tabular-nums; font-weight:850; color:#fff;
  font-size:15px; letter-spacing:.02em; }
.vb-bar__count b{ color:#8FD3FF; }
.vb-bar__group{ display:flex; align-items:center; gap:6px; }
.vb-bar__btn{
  min-height:38px; min-width:38px; padding:0 12px; border-radius:var(--radius);
  border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  color:#fff; font-weight:750; font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.vb-bar__btn:hover{ background:rgba(255,255,255,.2); }
.vb-bar__btn[aria-pressed="true"]{ background:#8FD3FF; border-color:#8FD3FF; color:#0B1533; }
.vb-bar__btn:focus-visible{ outline:3px solid #8FD3FF; outline-offset:2px; }
.vb-bar__sel{
  min-height:38px; border-radius:var(--radius); padding:0 10px;
  border:1.5px solid rgba(255,255,255,.28); background:#132250; color:#fff;
  font-weight:750; font-size:14px; cursor:pointer;
}
.vb-bar__sel:focus-visible{ outline:3px solid #8FD3FF; outline-offset:2px; }
.vb-bar__hint{ color:var(--space-muted); font-size:13px; }

/* ── 개요(그리드) · 도움말 오버레이 ───────────────────── */
.vb-overlay{
  /* 사이트 헤더(900) · 학년급 바(800) · FAB(850) 보다 위. skip-link(1000) 는 남겨 둔다. */
  position:fixed; inset:0; z-index:960; overflow:auto;
  background:rgba(7,12,27,.97); padding:var(--sp-6) var(--gut);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.vb-overlay[hidden]{ display:none; }
.vb-overlay__head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  max-width:1400px; margin:0 auto var(--sp-5); }
.vb-overlay__head h2{ color:#fff; margin:0; font-size:22px; }
.vb-ov-grid{
  display:grid; gap:var(--sp-4); max-width:1400px; margin-inline:auto;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.vb-ov-card{
  text-align:left; cursor:pointer; color:var(--space-text);
  background:var(--space-2); border:1.5px solid var(--space-3);
  border-radius:var(--radius); padding:var(--sp-3) var(--sp-4);
  display:flex; flex-direction:column; gap:6px; min-height:96px;
}
.vb-ov-card:hover{ border-color:#8FD3FF; }
.vb-ov-card:focus-visible{ outline:3px solid #8FD3FF; outline-offset:2px; }
.vb-ov-card.is-current{ border-color:#8FD3FF; background:#1D3272; }
.vb-ov-card__no{ font-size:12px; font-weight:850; color:#8FD3FF; font-variant-numeric:tabular-nums; }
.vb-ov-card__title{ font-size:14.5px; font-weight:750; color:#fff; line-height:1.35;
  word-break:keep-all; }
.vb-ov-card__meta{ margin-top:auto; font-size:11.5px; color:var(--space-muted); }

.vb-help__grid{ display:grid; gap:var(--sp-3) var(--sp-5); max-width:760px; margin-inline:auto;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.vb-help__row{ display:flex; align-items:center; gap:var(--sp-3);
  padding:10px 0; border-bottom:1px solid var(--space-3); color:var(--space-text); font-size:15px; }
.vb-kbd{
  flex:0 0 auto; display:inline-block; min-width:34px; text-align:center;
  padding:4px 8px; border-radius:6px; background:var(--space-2);
  border:1px solid var(--space-3); border-bottom-width:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:#fff;
}

/* ── 접근성 안내 (스크린리더 전용) ────────────────────── */
.vb-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; }

/* ── 모션 최소화 ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .vb-slide.is-active{ animation:none; }
  .vb-bar__fill{ transition:none; }
}

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width:640px){
  .vb-deck{ --vb-chrome:152px; }
  .vb-cols,.vb-qna{ grid-template-columns:1fr; gap:calc(var(--vb-u) * 1.4); }
  .vb-bar__hint{ display:none; }
}

/* ══════════════════════════════════════════════════════════
   B. 인쇄 — 슬라이드 1장 / 1페이지 가로 + 아래에 발표자 노트
   ══════════════════════════════════════════════════════════ */
/* @page(가로) 는 슬라이드 페이지에서만 필요하므로 이 파일에 두지 않는다.
   build/vibecoding.py 가 /vibecoding/slides/ 에만 인라인으로 넣는다. */
@media print{
  .vb-bar,.vb-overlay{ display:none !important; }
  /* JS 가 인라인으로 넣은 값들을 인쇄에서 되돌린다 → !important 필요 */
  .vb-deck{ --vb-ub:2.1mm !important; background:#fff; color:#000; padding:0; }
  .vb-slide{ --vb-fit:1 !important; }
  .vb-stage{
    position:static; width:100%; max-width:none; max-height:none; aspect-ratio:auto;
    background:#fff; border:0; overflow:visible;
  }
  .vb-slide{
    position:static; display:flex !important; break-after:page; page-break-after:always;
    break-inside:avoid; page-break-inside:avoid;
    border:1px solid #999; border-radius:6px; margin-bottom:4mm;
    /* A4 가로(297×210mm) − @page margin 11mm = 인쇄 가능 높이 188mm.
       margin-bottom(4mm)·테두리를 뺀 값까지 채워 페이지 하단 여백을 없앤다. */
    padding:8mm 9mm; min-height:176mm; animation:none !important;
  }
  .vb-slide[hidden]{ display:none !important; }
  .vb-slide:last-of-type{ break-after:auto; page-break-after:auto; }
  .vb-slide,.vb-slide *{ color:#000 !important; }
  .vb-slide--title,.vb-slide--section,.vb-slide--closing{ background:#fff !important; }
  .vb-slide__title{ font-size:22pt; }
  .vb-slide--title .vb-slide__title,.vb-slide--section .vb-slide__title,
  .vb-slide--closing .vb-slide__title{ font-size:26pt; }
  .vb-slide__sub{ font-size:12pt; }
  .vb-slide__stamp{ -webkit-text-stroke:1px #666; font-size:40pt; }
  .vb-bullet,.vb-col__items li,.vb-qna li{ font-size:11.5pt !important; }
  .vb-step__title{ font-size:12pt; } .vb-step__desc{ font-size:10.5pt; }
  .vb-quote__text{ font-size:15pt; }
  .vb-col,.vb-step,.vb-qna li{ background:#fff !important; border:1px solid #999 !important; }
  .vb-tag,.vb-step__n{ background:#eee !important; border:1px solid #666 !important; }
  .vb-visual{ font-size:8.5pt; border-top:1px dashed #999; }
  .vb-note{
    position:static; display:block !important; max-height:none; overflow:visible;
    background:#F4F4F4 !important; border:0; border-top:1.5px solid #666;
    margin-top:5mm; padding:3mm 0 0; font-size:9.5pt; line-height:1.5;
  }
  .vb-note__label{ font-size:8pt; }
}

/* ══════════════════════════════════════════════════════════
   C. 설명 페이지 (/vibecoding/, /vibecoding/lab/)
   ══════════════════════════════════════════════════════════ */

/* ── 제작 과정 인포그래픽 ─────────────────────────────── */
.vb-flow{ background:var(--space-1); border-radius:var(--radius-kid-lg); padding:var(--sp-5);
  border:1px solid var(--space-3); }
.vb-flow svg{ display:block; width:100%; height:auto; }
.vb-flow__cap{ margin:var(--sp-4) 0 0; color:var(--space-muted); font-size:var(--fs-small);
  line-height:1.6; }
.vb-flow__legend{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-3);
  padding:0; list-style:none; }
.vb-flow__legend li{ display:flex; align-items:center; gap:6px; color:var(--space-muted);
  font-size:var(--fs-small); }
.vb-flow__legend i{ width:12px; height:12px; border-radius:3px; background:var(--planet-2);
  display:inline-block; }

/* ── 프롬프트 예시 카드 ───────────────────────────────── */
.vb-prompt{
  border:1.5px solid var(--border); border-radius:var(--radius-kid);
  background:var(--surface); overflow:hidden;
}
.vb-prompt__head{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4); background:var(--planet-tint);
  border-bottom:1px solid var(--border);
}
.vb-prompt__label{ font-weight:850; color:var(--planet-ink); font-size:var(--fs-small);
  letter-spacing:.02em; }
.vb-prompt__body{
  margin:0; padding:var(--sp-4); white-space:pre-wrap; word-break:keep-all;
  font-size:15px; line-height:1.72; color:var(--text-strong);
  font-family:var(--font-sans);
}
.vb-prompt__foot{ padding:0 var(--sp-4) var(--sp-4); }
.vb-prompt--bad{ border-color:var(--danger); }
.vb-prompt--bad .vb-prompt__head{ background:var(--danger-tint); }
.vb-prompt--bad .vb-prompt__label{ color:var(--danger); }
.vb-prompt--good{ border-color:var(--success); }
.vb-prompt--good .vb-prompt__head{ background:var(--success-tint); }
.vb-prompt--good .vb-prompt__label{ color:var(--success); }

/* ── 5원칙 카드 ───────────────────────────────────────── */
.vb-principle{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4);
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-4) var(--sp-5);
}
.vb-principle__n{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--planet); color:#fff; font-weight:900; font-size:19px;
}
.vb-principle h3{ margin:0 0 4px; font-size:var(--fs-h3); }
.vb-principle p{ margin:0; color:var(--text-muted); font-size:var(--fs-small); line-height:1.65; }

/* ── 무료 도구 카드 ───────────────────────────────────── */
.vb-tool{
  display:flex; flex-direction:column; gap:var(--sp-2);
  border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-4); background:var(--bg); height:100%;
}
.vb-tool__name{ display:flex; align-items:center; gap:8px; font-weight:850;
  font-size:16.5px; color:var(--text-strong); }
.vb-tool p{ margin:0; font-size:var(--fs-small); color:var(--text-muted); line-height:1.6; }
.vb-tool__link{ margin-top:auto; font-weight:750; font-size:var(--fs-small); word-break:break-all; }

/* ── 미션 워크북 ──────────────────────────────────────── */
.vb-mission{
  border:2px solid var(--border); border-radius:var(--radius-kid-lg);
  padding:var(--sp-5); background:var(--bg);
}
.vb-mission__head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-3); }
.vb-mission__title{ margin:0; font-size:var(--fs-h2); }
.vb-mission__goal{ margin:0 0 var(--sp-4); color:var(--text-muted); font-size:var(--fs-small);
  line-height:1.65; }
.vb-mission--elem{ border-color:var(--g-elem); }
.vb-mission--middle{ border-color:var(--g-middle); }
.vb-mission--high{ border-color:var(--g-high); }

.vb-steplist{ list-style:none; padding:0; margin:0; counter-reset:vbstep; }
.vb-step-item{
  counter-increment:vbstep; position:relative; padding:var(--sp-4) 0;
  border-top:1px solid var(--border);
}
.vb-step-item:first-child{ border-top:0; padding-top:0; }
.vb-check{ display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer; }
.vb-check input{ flex:0 0 auto; width:24px; height:24px; margin-top:2px; accent-color:var(--planet); }
.vb-check__text{ font-weight:750; font-size:17px; color:var(--text-strong); line-height:1.5; }
.vb-check__text::before{ content:counter(vbstep) ". "; color:var(--planet); font-weight:900; }
.vb-step-item.is-done .vb-check__text{ color:var(--text-muted); text-decoration:line-through; }
.vb-step-item__body{ margin-top:var(--sp-3); padding-left:calc(24px + var(--sp-3)); }
.vb-step-item__why{ margin:0 0 var(--sp-3); font-size:var(--fs-small); color:var(--text-muted);
  line-height:1.65; }

.vb-progress{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.vb-progress__track{ flex:1 1 auto; height:12px; background:var(--surface-2);
  border-radius:999px; overflow:hidden; }
.vb-progress__fill{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--planet),var(--planet-2));
  transition:width var(--dur-3) var(--ease); }
.vb-progress__num{ font-weight:850; font-variant-numeric:tabular-nums; color:var(--planet-ink);
  font-size:var(--fs-small); }

.vb-badgebox{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  border:2px dashed var(--planet); border-radius:var(--radius-kid);
  background:var(--planet-tint); padding:var(--sp-4) var(--sp-5); margin-top:var(--sp-5);
}
.vb-badgebox__ico{ font-size:34px; line-height:1; }
.vb-badgebox p{ margin:0; font-size:var(--fs-small); color:var(--planet-ink); line-height:1.6; }
.vb-badgebox.is-earned{ border-style:solid; background:var(--success-tint); border-color:var(--success); }

/* ── FAQ 아코디언 ─────────────────────────────────────── */
.vb-faq{ border:1.5px solid var(--border); border-radius:var(--radius-kid);
  background:var(--bg); overflow:hidden; }
.vb-faq+.vb-faq{ margin-top:var(--sp-3); }
.vb-faq__q{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; cursor:pointer;
  padding:var(--sp-4) var(--sp-5); font-weight:800; font-size:16.5px;
  color:var(--text-strong); list-style:none; background:var(--surface);
}
.vb-faq__q::-webkit-details-marker{ display:none; }
.vb-faq__q::after{ content:"＋"; margin-left:auto; font-weight:900; color:var(--planet);
  font-size:20px; line-height:1; }
.vb-faq[open] .vb-faq__q::after{ content:"－"; }
.vb-faq__q:focus-visible{ outline:3px solid var(--planet); outline-offset:-3px; }
.vb-faq__a{ padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--border); }
.vb-faq__a p{ margin:0 0 var(--sp-3); line-height:1.72; }
.vb-faq__a>:last-child{ margin-bottom:0; }

/* ── 작은 조각 ────────────────────────────────────────── */
.vb-vs{ display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.vb-copybtn{ white-space:nowrap; }
.vb-mini{ font-size:var(--fs-small); color:var(--text-muted); margin:0; line-height:1.6; }

@media print{
  .vb-mission{ break-inside:avoid; page-break-inside:avoid; }
  .vb-faq{ break-inside:avoid; }
  .vb-faq__a{ display:block !important; }
  .vb-flow{ background:#fff; border-color:#999; }
  .vb-flow__cap,.vb-flow__legend li{ color:#333; }
}