/* ==========================================================================
   바로 써먹는 바이브코딩 첫 걸음 [기초편]
   daisyUI cupcake 테마 위에 얹는 최소한의 커스텀 스타일
   ========================================================================== */

:root {
  --vc-mint: #a8e6cf;
  --vc-mint-deep: #5fc9a3;
  --vc-coral: #ffaaa5;
  --vc-coral-deep: #f08a84;
  --vc-cream: #fff8ef;
  --vc-ink: #3b3042;
  --vc-ink-soft: #6b5f72;
  --vc-line: #eadfd3;
}

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--vc-ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #fdf2e9 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #e9f8f2 0%, transparent 55%),
    var(--vc-cream);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 본문 최소 가독성: 프로젝터 뒷자리 기준 */
p, li, dd, dt, label { font-size: 1rem; }
.vc-lead { font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   진행률 바
   -------------------------------------------------------------------------- */
.vc-progress-rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(0, 0, 0, .06);
}
.vc-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--vc-mint-deep), var(--vc-coral-deep));
  transition: width .15s linear;
}

/* --------------------------------------------------------------------------
   카드 / 섹션 공통
   -------------------------------------------------------------------------- */
.vc-card {
  background: #fff;
  border: 1px solid var(--vc-line);
  border-radius: 1rem;
  box-shadow: 0 10px 30px -18px rgba(59, 48, 66, .35);
}

.vc-book-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  background: hsl(var(--p) / 0.13);
  color: hsl(var(--p));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.vc-section { scroll-margin-top: 6.5rem; }

.vc-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; font-weight: 700; letter-spacing: .02em;
  color: var(--vc-ink-soft);
}

/* 단계 카드가 "완료"로 표시됐을 때 */
.vc-step[data-done="true"] {
  border-color: var(--vc-mint-deep);
  box-shadow: 0 0 0 3px rgba(95, 201, 163, .18), 0 10px 30px -18px rgba(59, 48, 66, .35);
}
.vc-step[data-done="true"] .vc-step-number {
  background: var(--vc-mint-deep); color: #fff;
}

.vc-step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border-radius: 9999px;
  background: #fdeadf; color: #b4623f;
  font-weight: 800; font-size: 1rem;
}

/* --------------------------------------------------------------------------
   명령어(터미널) 목업 — 검은 배경이 아닌 cupcake 톤
   -------------------------------------------------------------------------- */
.vc-term {
  border-radius: 1rem;
  border: 1px solid #e7dcf0;
  background: linear-gradient(180deg, #fffdfb 0%, #fbf4ff 100%);
  overflow: hidden;
}
.vc-term-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem;
  background: #f3e9fb;
  border-bottom: 1px solid #e7dcf0;
  font-size: .8125rem; color: var(--vc-ink-soft);
}
.vc-dot { width: .65rem; height: .65rem; border-radius: 9999px; display: inline-block; }
.vc-dot-r { background: #ffaaa5; }
.vc-dot-y { background: #ffd3a5; }
.vc-dot-g { background: #a8e6cf; }

.vc-term-body {
  padding: .9rem 1rem;
  font-family: "JetBrains Mono", "D2Coding", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Courier New", monospace;
  font-size: 17px;          /* 명령어 블록 17~18px */
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #4a3b56;
}
@media (min-width: 768px) { .vc-term-body { font-size: 18px; } }

.vc-term-body .vc-prompt { color: var(--vc-mint-deep); font-weight: 700; user-select: none; }
.vc-term-body .vc-out { color: #7a6c86; }
.vc-term-body .vc-ok { color: #2f9d77; font-weight: 700; }

/* --------------------------------------------------------------------------
   화면 목업 (CSS/SVG로 그린 UI 모형)
   -------------------------------------------------------------------------- */
.vc-mock {
  border-radius: 1rem; border: 1px solid var(--vc-line);
  background: #fff; overflow: hidden;
}
.vc-mock-bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .75rem; background: #f7efe6; border-bottom: 1px solid var(--vc-line);
}
.vc-mock-url {
  flex: 1; background: #fff; border: 1px solid var(--vc-line);
  border-radius: 9999px; padding: .15rem .7rem;
  font-size: .8125rem; color: var(--vc-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-mock-body { padding: 1rem; background: #fffdfa; }
.vc-mock-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .65rem; border-radius: .6rem; border: 1px dashed var(--vc-line);
  background: #fff; font-size: .9375rem;
}
.vc-mock-row + .vc-mock-row { margin-top: .5rem; }
.vc-mock-btn {
  display: inline-block; padding: .3rem .8rem; border-radius: 9999px;
  background: var(--vc-mint); color: #2b6a55; font-weight: 700; font-size: .875rem;
}
/* 핀(화살표) 표시 */
.vc-pin {
  position: relative;
  outline: 2px solid var(--vc-coral-deep);
  outline-offset: 2px;
  border-radius: .6rem;
}
.vc-pin::after {
  content: attr(data-pin);
  position: absolute; right: -.4rem; top: -.85rem;
  background: var(--vc-coral-deep); color: #fff;
  font-size: .75rem; font-weight: 700; line-height: 1;
  padding: .25rem .5rem; border-radius: 9999px;
  white-space: nowrap;
}
.vc-pin-note {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .6rem; font-size: .875rem; color: var(--vc-ink-soft);
}

/* --------------------------------------------------------------------------
   타임라인 미니바
   -------------------------------------------------------------------------- */
.vc-timeline { display: flex; gap: .35rem; align-items: stretch; }
.vc-timeline-item {
  border-radius: .75rem; padding: .5rem .4rem; text-align: center;
  background: #fff; border: 1px solid var(--vc-line);
  font-size: .8125rem; line-height: 1.3; min-width: 0;
}
.vc-timeline-item b { display: block; font-size: .875rem; }
.vc-timeline-item span { color: var(--vc-ink-soft); font-size: .75rem; }

/* --------------------------------------------------------------------------
   도구 선택 카드
   -------------------------------------------------------------------------- */
.vc-tool-card {
  cursor: pointer; text-align: left; width: 100%;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.vc-tool-card:hover { transform: translateY(-2px); }
.vc-tool-card[aria-pressed="true"] {
  border-color: var(--vc-mint-deep);
  box-shadow: 0 0 0 3px rgba(95, 201, 163, .25);
}
.vc-tool-card[aria-pressed="true"] .vc-tool-check { opacity: 1; }
.vc-tool-check { opacity: 0; transition: opacity .12s ease; color: var(--vc-mint-deep); }

/* 도구 이름 인라인 치환 */
.vc-toolname { font-weight: 700; color: #b4623f; }

/* --------------------------------------------------------------------------
   복사 버튼 피드백
   -------------------------------------------------------------------------- */
.vc-copy[data-copied="true"] { background: var(--vc-mint-deep) !important; color: #fff !important; border-color: var(--vc-mint-deep) !important; }

/* --------------------------------------------------------------------------
   전면 QR 모달
   -------------------------------------------------------------------------- */
.vc-qr-canvas { display: grid; place-items: center; }
.vc-qr-canvas img, .vc-qr-canvas canvas { width: 100%; height: auto; image-rendering: pixelated; }
#vcQrStage .vc-qr-canvas { max-width: min(62vh, 88vw); }

/* --------------------------------------------------------------------------
   접근성 / 포커스
   -------------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--vc-coral-deep); outline-offset: 2px; border-radius: .35rem; }
.vc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; padding: .6rem 1rem; border-radius: .5rem;
}
.vc-skip:focus { left: .75rem; top: .75rem; }

/* --------------------------------------------------------------------------
   인쇄: 실습 코스가 유인물처럼 나오도록
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 14mm; }
  html { scroll-behavior: auto; }
  body {
    background: #fff !important;
    font-size: 11pt; line-height: 1.5; color: #000;
  }
  .vc-no-print,
  header.vc-nav, .vc-hero-cta, .vc-subsite, footer,
  .vc-copy, .btn, dialog { display: none !important; }

  .vc-section, .vc-card, .vc-step { break-inside: avoid; page-break-inside: avoid; }
  .vc-step { border: 1px solid #999 !important; box-shadow: none !important; margin-bottom: 8mm; }
  .vc-term, .vc-mock { border: 1px solid #999 !important; background: #fff !important; }
  .vc-term-body { font-size: 10.5pt; background: #f6f6f6 !important; }

  /* 아코디언은 인쇄 시 모두 펼쳐서 유인물로 */
  details { display: block !important; }
  details > summary { list-style: none; font-weight: 700; }
  details > *:not(summary) { display: block !important; }
  .collapse-content { display: block !important; max-height: none !important; visibility: visible !important; padding: 0 !important; }
  .collapse-title::after { display: none !important; }
  input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* 모션 최소화 선호 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}