/* Verbault Landing — Quiet Scholarship migration (Sub-project B).
   Scoped to .verbault-landing. Uses only var(--vb-*) tokens (see design-tokens.css).
   Reference: docs/Design/reference.html (lines 55-309 mapped to landing context). */

/* ============================================================
   1. LANDING ROOT — body override + container
   ============================================================ */
.verbault-landing {
  font-family: var(--vb-font-sans);
  background: var(--vb-bg-page);
  color: var(--vb-text-primary);
  margin: 0;
  min-height: 100vh;
}
.verbault-landing *,
.verbault-landing *::before,
.verbault-landing *::after { box-sizing: border-box; }

.vb-landing {
  max-width: var(--vb-container-wide);
  margin: 0 auto;
  padding: var(--vb-space-4) var(--vb-space-4) var(--vb-space-12);
  display: flex;
  flex-direction: column;
  gap: var(--vb-space-8);
}
@media (min-width: 768px) {
  .vb-landing { padding: var(--vb-space-6) var(--vb-space-8) var(--vb-space-16); }
}
/* Hide landing hero/search/dest grid when a destination view is active.
   Without this, .vb-landing stays visible above the active section.view
   so /?view=reader (or any destination) shows Landing on top instead of
   the actual destination. */
.verbault-landing[data-view] .vb-landing {
  display: none;
}

/* Sticky .vb-nav (top:0, z-index:50) overlays the first ~64px of any
   scrolled-to anchor. scrollIntoView({block:'start'}) on view sections
   otherwise hides the section's first row (e.g. Reader's title bar)
   behind the nav. scroll-margin-top compensates. */
section.view {
  scroll-margin-top: 80px;
}

/* runSearch 후 결과 패널로 부드럽게 스크롤 — sticky nav 만큼 offset. */
.vb-results {
  scroll-margin-top: 80px;
}

/* ============================================================
   2. NAV (.top-chips + .landing-header 통합)
   ============================================================ */
.vb-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--vb-space-4) var(--vb-space-6);
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  gap: var(--vb-space-4);
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}
.vb-nav > .vb-logo-wrap { justify-self: start; }
.vb-nav > .vb-nav-items { justify-self: center; }
.vb-nav > .vb-nav-auth { justify-self: end; }

.vb-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

@media (max-width: 640px) {
  .vb-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--vb-space-3) var(--vb-space-4);
  }
  /* nav links become a fixed bottom tab bar (design-system §4: 모바일 바닥 탭바).
     Same DOM as the desktop center column — only positioning changes, so the
     data-dest click handlers and --active toggling are untouched. */
  .vb-nav > .vb-nav-items {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    justify-self: stretch;          /* override desktop grid justify-self:center */
    display: flex;
    justify-content: space-around;
    gap: 0;
    background: var(--vb-bg-elevated);
    border-top: 0.5px solid var(--vb-border);
    padding: var(--vb-space-1) var(--vb-space-1)
             calc(var(--vb-space-1) + env(safe-area-inset-bottom));
    z-index: var(--vb-z-sticky);
  }
  .vb-nav-item {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    padding: 4px 0;
    white-space: nowrap;
  }
  .vb-nav-item .vb-nav-icon svg { width: 19px; height: 19px; }
  /* tab-bar active state: color, not underline */
  .vb-nav-item--active { border-bottom: none; color: var(--vb-aubergine); }
  /* keep page content clear of the fixed bar.
     Use html+body selector (specificity 0,0,0,2) to beat later inline
     @media(max-width:720px) body{padding:0} rules in index.html (0,0,0,1)
     while still losing to body[data-view="reader"] (0,0,1,1) → Reader
     keeps its own 96/128px playbar clearance from reader.css. */
  html body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
/* 641–999px: 글자 포함 nav 는 ~970px 필요(§225 실측) — 라벨 숨기고 큰 아이콘만.
   탭바(≤640)는 라벨을 그대로 쓰므로 641 부터 시작. aria-label/title 이 접근성·툴팁 보전. */
@media (min-width: 641px) and (max-width: 999px) {
  .vb-nav-item .vb-nav-label { display: none; }
  /* 큰 아이콘(30px)이 좁은 끝(641px)에서도 들어가도록 간격·패딩 회수.
     ⚠ 베이스 규칙들이 파일 뒤쪽에 있어 동률 특이도는 패배 — .vb-nav 접두로 0-1-1↑ 확보 */
  .vb-nav { gap: var(--vb-space-2); padding-left: var(--vb-space-3); padding-right: var(--vb-space-3); }
  .vb-nav .vb-nav-items { gap: var(--vb-space-3); }
  .vb-nav .vb-logo-subtitle { display: none; }
  /* 0-2-1 특이도 — 뒤에 오는 베이스 `.vb-nav-icon svg`(1.05em, 0-1-1)를 이겨야 적용됨 */
  .vb-nav-item .vb-nav-icon svg { width: 24px; height: 24px; }
}
.vb-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.vb-logo:hover { text-decoration: none; }
/* Circular emblem precedes the wordmark. Theme-swapped: gold on dark, ink on
   light. Boot script sets data-theme before paint so no FOUC. */
.vb-logo-mark { width: 38px; height: 38px; display: block; flex: none; }
.vb-logo-mark--ink { display: none; }
:root[data-theme="light"] .vb-logo-mark--gold { display: none; }
:root[data-theme="light"] .vb-logo-mark--ink { display: block; }
.vb-logo-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.vb-logo-word {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-xl);
  font-weight: 500;
  color: var(--vb-text-primary);
  letter-spacing: -0.015em;
}
.vb-logo-subtitle {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-xs, 12px);
  color: var(--vb-text-secondary);
  font-style: italic;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.vb-logo-dot { color: var(--vb-aubergine); }

.vb-nav-items {
  display: flex;
  gap: var(--vb-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.vb-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  font-weight: 700;
  color: var(--vb-text-secondary);
  text-decoration: none;
  padding: 4px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--vb-dur-fast) var(--vb-ease);
}
.vb-nav-icon { display: inline-flex; align-items: center; line-height: 1; }
.vb-nav-icon svg { width: 1.05em; height: 1.05em; stroke: currentColor; }
.vb-nav-item:hover { color: var(--vb-text-primary); }
.vb-nav-item--active {
  color: var(--vb-text-primary);
  border-bottom: 1.5px solid var(--vb-aubergine);
}

.vb-nav-auth {
  display: flex;
  align-items: center;
  gap: var(--vb-space-3);
}
.vb-nav-auth > .vb-auth:empty { display: none; }
.vb-btn-primary {
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--vb-radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--vb-dur-fast) var(--vb-ease);
}
.vb-btn-primary:hover { background: color-mix(in srgb, var(--vb-aubergine), black 18%); }

.vb-btn-secondary {
  background: transparent;
  color: var(--vb-text-primary);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  padding: 8px 16px;
  border: 0.5px solid var(--vb-border-strong);
  border-radius: var(--vb-radius-md);
  cursor: pointer;
  transition: background var(--vb-dur-fast) var(--vb-ease);
}
.vb-btn-secondary:hover { background: var(--vb-bg-tint); }

.vb-search-toggle,
.vb-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border-strong);
  border-radius: var(--vb-radius-md);
  cursor: pointer;
  transition: background var(--vb-dur-fast) var(--vb-ease), color var(--vb-dur-fast) var(--vb-ease), border-color var(--vb-dur-fast) var(--vb-ease);
}
.vb-search-toggle:hover,
.vb-theme-toggle:hover {
  background: var(--vb-bg-tint);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}
.vb-search-toggle:focus-visible,
.vb-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--vb-focus-ring);
}
.vb-theme-icon { display: none; }
:root[data-theme="light"] .vb-theme-icon--moon { display: block; }
:root[data-theme="dark"]  .vb-theme-icon--sun  { display: block; }

.vb-settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border-strong);
  border-radius: var(--vb-radius-md);
  cursor: pointer;
  transition: background var(--vb-dur-fast) var(--vb-ease), color var(--vb-dur-fast) var(--vb-ease), border-color var(--vb-dur-fast) var(--vb-ease);
}
.vb-settings-toggle:hover {
  background: var(--vb-bg-tint);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}
.vb-settings-toggle:focus-visible {
  outline: none;
  box-shadow: var(--vb-focus-ring);
}
.vb-settings-toggle[aria-pressed="true"] {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}

/* ============================================================
   3. HERO (2-col @ desktop)
   ============================================================ */
.vb-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vb-space-10);
  padding: var(--vb-space-12) var(--vb-space-4) var(--vb-space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .vb-hero {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--vb-space-16);
    padding: var(--vb-space-20) var(--vb-space-8) var(--vb-space-16);
  }
}

.vb-hero-content { min-width: 0; }

.vb-hero-title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-hero);
  font-weight: 500;
  line-height: var(--vb-leading-tight);
  color: var(--vb-text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--vb-space-5);
}
.vb-hero-title em {
  font-style: italic;
  color: var(--vb-aubergine);
  font-weight: 400;
}
.vb-hero-sub {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-base);
  line-height: var(--vb-leading-relaxed);
  color: var(--vb-text-secondary);
  margin: 0 0 var(--vb-space-6);
  max-width: 480px;
}
.vb-hero-stats {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  color: var(--vb-text-secondary);
  letter-spacing: 0.04em;
  margin: var(--vb-space-6) 0 0;
}

/* ============================================================
   4. SEARCH + SUGGEST + CHIPS
   ============================================================ */
.vb-search {
  position: relative;
  display: flex;
  background: var(--vb-surface);
  border: 0.5px solid var(--vb-border-strong);
  border-radius: var(--vb-radius-md);
  padding: 5px;
  align-items: center;
  max-width: 560px;
  transition: border-color var(--vb-dur-fast) var(--vb-ease),
              box-shadow var(--vb-dur-fast) var(--vb-ease);
}
.vb-search:focus-within {
  border-color: var(--vb-aubergine);
  box-shadow: var(--vb-focus-ring);
}
.vb-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--vb-text-secondary);
  flex-shrink: 0;
}
.vb-search-attach {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -4px;
  padding: 0;
  color: var(--vb-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--vb-radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--vb-dur-fast) var(--vb-ease),
              background var(--vb-dur-fast) var(--vb-ease);
}
.vb-search-attach:hover,
.vb-search-attach:focus-visible {
  color: var(--vb-aubergine);
  background: var(--vb-aubergine-soft);
  outline: none;
}
.vb-search-attach[disabled],
.vb-search-attach[aria-busy="true"] {
  opacity: 0.5;
  cursor: progress;
}
.vb-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-primary);
  padding: 8px 12px;
  min-width: 0;
}
.vb-search-input::placeholder { color: var(--vb-text-secondary); }
.vb-search-submit {
  width: 36px;
  height: 36px;
  border-radius: var(--vb-radius-sm);
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--vb-dur-fast) var(--vb-ease);
}
.vb-search-submit:hover { background: color-mix(in srgb, var(--vb-aubergine), black 18%); }

.vb-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: var(--vb-space-2);
  background: var(--vb-surface);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
  max-height: 360px;
  overflow-y: auto;
  z-index: var(--vb-z-dropdown);
}
.vb-suggest[hidden] { display: none; }
.vb-suggest-item {
  display: block;
  padding: var(--vb-space-2) var(--vb-space-3);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-primary);
  border-radius: var(--vb-radius-sm);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.vb-suggest-item:hover,
.vb-suggest-item[aria-selected="true"] { background: var(--vb-aubergine-soft); }

.vb-suggest-item .suggest-label {
  color: var(--vb-text-primary);
}
.vb-suggest-item .suggest-sep {
  margin: 0 0.5em;
  color: var(--vb-text-tertiary);
}
.vb-suggest-item .suggest-meta {
  font-size: var(--vb-text-xs);
  color: var(--vb-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vb-space-2);
  margin-top: var(--vb-space-4);
  align-items: center;
}
.vb-chips-label {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  color: var(--vb-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vb-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  padding: 4px 10px;
  border-radius: var(--vb-radius-full);
  background: transparent;
  color: var(--vb-aubergine);
  border: 0.5px solid var(--vb-aubergine);
  cursor: pointer;
  transition: background var(--vb-dur-fast) var(--vb-ease);
  letter-spacing: 0.02em;
}
.vb-chip:hover { background: var(--vb-aubergine-soft); }

/* ============================================================
   5. QUOTE (Hero right)
   ============================================================ */
.vb-quote {
  background: var(--vb-surface);
  border-left: 2px solid var(--vb-ember);
  padding: var(--vb-space-5) var(--vb-space-6);
  border-radius: 0 var(--vb-radius-sm) var(--vb-radius-sm) 0;
}
.vb-quote-text {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-reading);
  line-height: var(--vb-leading-relaxed);
  font-style: italic;
  color: var(--vb-text-primary);
  margin: 0 0 var(--vb-space-3);
}
.vb-quote-word {
  font-style: normal;
  background: var(--vb-highlight-unlearned);
  border-bottom: 1px dotted var(--vb-highlight-unlearned-border);
  color: var(--vb-highlight-unlearned-text);
  padding: 0 3px;
  border-radius: 2px;
}
.vb-quote-attr {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  color: var(--vb-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* ============================================================
   6. RESULTS PANEL (container + mode tabs only; cards untouched)
   ============================================================ */
.vb-results {
  background: var(--vb-surface);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  padding: var(--vb-space-4) var(--vb-space-5);
  margin-top: var(--vb-space-6);
}
.vb-results[hidden] { display: none; }
.vb-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vb-space-4);
  padding-bottom: var(--vb-space-3);
  border-bottom: 0.5px solid var(--vb-border-soft);
  flex-wrap: wrap;
}
.vb-results-detected {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  color: var(--vb-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vb-results-detected b {
  color: var(--vb-aubergine);
  font-weight: 500;
}
.vb-results-mode {
  display: flex;
  gap: var(--vb-space-2);
}
.vb-results-mode-btn {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  padding: 4px 12px;
  border-radius: var(--vb-radius-full);
  background: transparent;
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--vb-dur-fast) var(--vb-ease);
}
.vb-results-mode-btn:hover { border-color: var(--vb-border-strong); }
.vb-results-mode-btn[aria-selected="true"],
.vb-results-mode-btn.active {
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
  border-color: var(--vb-aubergine);
}
.vb-results-body {
  padding-top: var(--vb-space-4);
  /* 내부 카드는 기존 클래스 보존 — Sub-D 가 unify */
}

/* ============================================================
   7. RECENT BOOKS (container only)
   ============================================================ */
.vb-recent {
  margin-top: var(--vb-space-8);
}
.vb-recent-title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-lg);
  font-weight: 500;
  color: var(--vb-text-primary);
  margin: 0 0 var(--vb-space-4);
}
.vb-recent-body {
  /* 내부 카드는 기존 클래스 보존 — Sub-D 가 vb-bcard 로 unify */
}

/* ============================================================
   7b. LATEST BLOG POSTS ("From the journal")
   ============================================================ */
/* display 는 .vb-latest-grid 에만 — 섹션에 display 를 주면 [hidden] 이
   무력화되어 글이 없을 때 빈 제목 박스가 노출된다. 안전망으로 가드도 둔다. */
.vb-latest {
  margin-top: var(--vb-space-8);
}
.vb-latest[hidden] { display: none; }
.vb-latest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vb-space-4);
  margin: 0 0 var(--vb-space-4);
}
.vb-latest-title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-lg);
  font-weight: 500;
  color: var(--vb-text-primary);
  margin: 0;
}
.vb-latest-all {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.vb-latest-all:hover,
.vb-latest-all:focus-visible { color: var(--vb-ember); }

.vb-latest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vb-space-4);
}
@media (min-width: 640px)  { .vb-latest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vb-latest-grid { grid-template-columns: repeat(3, 1fr); gap: var(--vb-space-5); } }

.vb-post-card {
  display: flex;
  flex-direction: column;
  background: var(--vb-surface);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--vb-text-primary) 8%, transparent);
  transition: transform var(--vb-dur) var(--vb-ease),
              border-color var(--vb-dur-fast) var(--vb-ease),
              box-shadow var(--vb-dur-fast) var(--vb-ease);
}
.vb-post-card:hover {
  transform: translateY(-3px);
  border-color: var(--vb-border-strong);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--vb-text-primary) 14%, transparent);
}
.vb-post-thumb {
  width: 100%;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: var(--vb-bg-tint);
  border-bottom: 0.5px solid var(--vb-border);
}
.vb-post-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vb-post-thumb-ph {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-xl);
  color: var(--vb-text-secondary);
  background: var(--vb-bg-tint);
}
.vb-post-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--vb-space-4);
}
.vb-post-cat {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vb-ember);
}
.vb-post-title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-base);
  font-weight: 500;
  color: var(--vb-text-primary);
  line-height: var(--vb-leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-post-excerpt {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
  line-height: var(--vb-leading-snug);
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vb-post-meta {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  color: var(--vb-text-muted, var(--vb-text-secondary));
  margin-top: var(--vb-space-1);
}

/* ============================================================
   8. DESTINATIONS GRID (6 cards: Library / Reader / Worksheet /
      Canvas / Vault / Classroom — 상단 NAV 6항목 미러)
   ============================================================ */
.vb-dest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vb-space-4);
  margin-top: var(--vb-space-8);
}
/* 6 카드가 항상 폭을 꽉 채우도록: 2열(3행) → 3열(2행) */
@media (min-width: 640px)  { .vb-dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vb-dest-grid { grid-template-columns: repeat(3, 1fr); gap: var(--vb-space-5); } }

.vb-dest-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vb-space-2);
  background: var(--vb-surface);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  padding: var(--vb-space-5);
  text-align: left;
  cursor: pointer;
  transition: transform var(--vb-dur) var(--vb-ease),
              border-color var(--vb-dur-fast) var(--vb-ease);
}
.vb-dest-card:hover {
  transform: translateY(-2px);
  border-color: var(--vb-border-strong);
}
.vb-dest-icon {
  font-size: var(--vb-text-2xl);
  line-height: 1;
}
.vb-dest-title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-lg);
  font-weight: 500;
  color: var(--vb-text-primary);
}
.vb-dest-desc {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
  line-height: var(--vb-leading-snug);
}

/* ============================================================
   9. FOOTER
   ============================================================ */
.vb-footer {
  margin-top: var(--vb-space-16);
  padding-top: var(--vb-space-6);
  border-top: 0.5px solid var(--vb-border-soft);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  color: var(--vb-text-secondary);
  text-align: center;
  letter-spacing: 0.04em;
}

.vb-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vb-space-4);
  margin-bottom: var(--vb-space-3);
}

.vb-footer-links a {
  color: var(--vb-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.vb-footer-links a:hover,
.vb-footer-links a:focus-visible {
  color: var(--vb-ember);
  text-decoration: underline;
}