/* ═══════════════════════════════════════════════════════════
   BIZNOTE Manual — C안 "Vercel / Linear / Resend" 톤
   ⚠️ 전략: body.theme-vercel 스코핑으로 manual.css와 충돌 회피
   - 모든 셀렉터에 `body.theme-vercel` prefix
   - manual.css 클래스를 그대로 활용 (specificity 0,2,0 vs 0,1,0)
   - !important 사용 안 함 (스코프로 자연 우위)
   ═══════════════════════════════════════════════════════════ */

/* ═══ 1. 변수 오버라이드 (theme-vercel 활성 시만) ═══ */
body.theme-vercel {
  /* 다크 사이드바 전용 토큰 */
  --c-dark-bg: #0A0A0F;
  --c-dark-bg-2: #111118;
  --c-dark-border: #1F1F2A;
  --c-dark-border-strong: #2E2E3D;
  --c-dark-text: #FFFFFF;
  --c-dark-text-dim: #D4D4DC;
  --c-dark-text-muted: #8B8B98;
  --c-dark-hover: rgba(139, 92, 246, 0.12);
  --c-dark-hover-border: rgba(139, 92, 246, 0.5);
  --c-dark-active: rgba(139, 92, 246, 0.32);
  --c-dark-active-border: #8B5CF6;

  /* 본문 톤: 워밍 베이지 → 순백 */
  --c-bg: #FFFFFF;
  --c-bg-warm: #FAFAFC;
  --c-bg-code: #F4F4F7;
  --c-bg-sidebar: #0A0A0F;
  --c-bg-hover: #F7F7FA;
  --c-bg-active: rgba(124, 58, 237, 0.08);

  /* 텍스트 */
  --c-text: #0A0A0F;
  --c-text-secondary: #4A4A5A;
  --c-text-tertiary: #8B8B98;

  /* 액센트: 인디고 → Vercel 보라 */
  --c-accent: #7C3AED;
  --c-accent-light: #A78BFA;
  --c-accent-lighter: rgba(124, 58, 237, 0.12);
  --c-accent-bg: rgba(124, 58, 237, 0.08);
  --c-accent-2: #6366F1;
  --c-accent-grad: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
  --c-accent-glow: rgba(124, 58, 237, 0.35);
  --c-accent-border: rgba(124, 58, 237, 0.25);

  /* 보더 */
  --c-border: #E8E8EE;
  --c-border-light: #EFEFF3;
  --c-divider: #EFEFF3;

  /* 그림자 강화 */
  --shadow-sm: 0 1px 3px rgba(10, 10, 15, 0.05);
  --shadow-md: 0 4px 12px rgba(10, 10, 15, 0.07);
  --shadow-lg: 0 12px 32px rgba(10, 10, 15, 0.1);
  --shadow-focus: 0 0 0 3px var(--c-accent-bg);
  --dur: 0.18s;
}

/* ═══ 2. SVG 아이콘 보정 (검정 도형 방지) ═══ */
body.theme-vercel svg { fill: none; }
body.theme-vercel .keep-fill svg, body.theme-vercel [data-keep-fill] svg { fill: currentColor; }

/* ═══ 3. 헤더: 다크 ═══ */
body.theme-vercel .mn-header {
  background: var(--c-dark-bg);
  border-bottom: 1px solid var(--c-dark-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-vercel .mn-header-logo {
  color: var(--c-dark-text);
}
body.theme-vercel .mn-header-logo .logo-icon,
body.theme-vercel .mn-header-logo .logo-mark {
  background: var(--c-accent-grad);
  box-shadow: 0 2px 8px var(--c-accent-glow);
  border-radius: 6px;
}
body.theme-vercel .mn-header-logo .logo-label {
  color: var(--c-dark-text-muted);
  border-left: 1px solid var(--c-dark-border-strong);
  padding-left: 8px;
  margin-left: 4px;
}

/* 헤더 검색창 */
body.theme-vercel .mn-header-search input {
  background: var(--c-dark-bg-2);
  border: 1px solid var(--c-dark-border-strong);
  color: var(--c-dark-text);
}
body.theme-vercel .mn-header-search input::placeholder { color: var(--c-dark-text-muted); }
body.theme-vercel .mn-header-search input:focus {
  background: var(--c-dark-bg);
  border-color: var(--c-accent);
  box-shadow: var(--shadow-focus);
}
body.theme-vercel .mn-header-search .search-icon { color: var(--c-dark-text-muted); }
body.theme-vercel .mn-header-search .search-kbd {
  background: var(--c-dark-bg);
  border: 1px solid var(--c-dark-border-strong);
  color: var(--c-dark-text-muted);
}

/* 헤더 우측 버튼들 */
body.theme-vercel .mn-header-faq,
body.theme-vercel .mn-header-ai {
  background: transparent;
  border: 1px solid var(--c-dark-border-strong);
  color: var(--c-dark-text-dim);
}
body.theme-vercel .mn-header-faq:hover {
  background: var(--c-dark-hover);
  color: var(--c-dark-text);
  border-color: var(--c-accent);
}
body.theme-vercel .mn-header-ai {
  background: var(--c-accent-grad);
  color: white;
  border-color: transparent;
}
body.theme-vercel .mn-header-ai:hover {
  background: var(--c-accent-grad);
  box-shadow: 0 4px 12px var(--c-accent-glow);
  color: white;
  border-color: transparent;
}
body.theme-vercel .mn-header-ai.active {
  background: var(--c-accent-grad);
  color: white;
  border-color: transparent;
}
body.theme-vercel .mn-header-version {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-dark-border-strong);
  color: var(--c-dark-text-muted);
}
body.theme-vercel .mn-sidebar-toggle {
  color: var(--c-dark-text-dim);
}
body.theme-vercel .mn-sidebar-toggle:hover {
  background: var(--c-dark-hover);
  color: var(--c-dark-text);
}

/* ═══ 4. 사이드바: 다크 ═══ */
body.theme-vercel .mn-sidebar {
  background: var(--c-dark-bg);
  border-right: 1px solid var(--c-dark-border);
}
body.theme-vercel .mn-sidebar::-webkit-scrollbar-thumb,
body.theme-vercel .mn-nav-scroll::-webkit-scrollbar-thumb {
  background: var(--c-dark-border-strong);
}

body.theme-vercel .mn-nav-group-title {
  color: #B5B7C9;
  font-weight: 700;
  letter-spacing: 0.1em;
}

body.theme-vercel .mn-nav-item {
  color: var(--c-dark-text);
  font-weight: 500;
  font-size: 14px;
  padding: 7px var(--sp-lg);
  gap: 10px;
  line-height: 1.4;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, border-left-color 0.12s ease, color 0.12s ease;
}
body.theme-vercel .mn-nav-item:hover {
  background: var(--c-dark-hover);
  color: #FFFFFF;
  border-left-color: var(--c-dark-hover-border);
}
body.theme-vercel .mn-nav-item.active {
  background: var(--c-dark-active);
  color: #FFFFFF;
  border-left: 4px solid var(--c-dark-active-border);
  padding-left: calc(var(--sp-lg) - 1px); /* 두꺼워진 border만큼 보정 (3→4px) */
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.25);
}
body.theme-vercel .mn-nav-item .nav-icon {
  color: var(--c-dark-text-dim);
  opacity: 1;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.theme-vercel .mn-nav-item.active .nav-icon { color: #FFFFFF; }
body.theme-vercel .mn-nav-item:hover .nav-icon { color: var(--c-accent-light); }
body.theme-vercel .mn-nav-item .nav-icon svg { width: 16px; height: 16px; }

body.theme-vercel .mn-nav-item .nav-badge {
  background: rgba(124, 58, 237, 0.18);
  color: var(--c-accent-light);
  border: 1px solid rgba(124, 58, 237, 0.25);
}

/* 사이드바 하단 footer */
body.theme-vercel .mn-nav-footer {
  background: var(--c-dark-bg-2);
  border-top: 1px solid var(--c-dark-border);
}
body.theme-vercel .mn-nav-footer .mn-nav-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-dark-border-strong);
  color: var(--c-dark-text);
  border-radius: 6px;
}
body.theme-vercel .mn-nav-footer .mn-nav-item:hover {
  background: rgba(124, 58, 237, 0.12);
  color: var(--c-accent-light);
  border-color: var(--c-accent);
}
body.theme-vercel .mn-nav-footer .mn-nav-item.active {
  background: rgba(124, 58, 237, 0.18);
  color: var(--c-accent-light);
  border-color: var(--c-accent);
}

/* nav-toggle (계층형 메뉴) */
body.theme-vercel .mn-nav-toggle {
  color: var(--c-dark-text);
  border-left: 3px solid transparent;
  transition: background 0.12s ease, border-left-color 0.12s ease, color 0.12s ease;
}
body.theme-vercel .mn-nav-toggle:hover {
  background: var(--c-dark-hover);
  color: #FFFFFF;
  border-left-color: var(--c-dark-hover-border);
}
body.theme-vercel .mn-nav-toggle .nav-icon { color: var(--c-dark-text-dim); }
body.theme-vercel .mn-nav-toggle .toggle-arrow { color: var(--c-dark-text-muted); }

/* ═══ 5. 본문 영역 ═══ */
body.theme-vercel .mn-content-area {
  background: var(--c-bg);
}

/* 본문 링크: 카드/사이드바/TOC는 hover 밑줄 X, 본문 인라인만 밑줄 */
body.theme-vercel a:hover { text-decoration: none; }
body.theme-vercel .mn-article p > a,
body.theme-vercel .mn-article li > a,
body.theme-vercel .mn-article strong > a,
body.theme-vercel .mn-article a.mn-link {
  color: var(--c-accent);
}
body.theme-vercel .mn-article p > a:hover,
body.theme-vercel .mn-article li > a:hover,
body.theme-vercel .mn-article strong > a:hover,
body.theme-vercel .mn-article a.mn-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--c-accent-2);
}

/* ═══ 6. Feature Card — 정보 카드 (hover 효과 없음, 화살표 커서) ═══ */
body.theme-vercel .mn-feature-card {
  cursor: default;
  transition: none;
}
body.theme-vercel .mn-feature-card:hover {
  border-color: var(--c-border);
  background: var(--c-bg);
  box-shadow: none;
  transform: none;
}

/* ═══ 7. h2 — 텍스트 폭만큼 컬러 밑줄 ═══ */
body.theme-vercel .mn-article h2 {
  display: table;
  border-bottom: 3px solid var(--c-accent);
  padding-bottom: 6px;
  position: relative;
}
body.theme-vercel .mn-article h2::before,
body.theme-vercel .mn-article h2::after {
  content: none;
}

/* ═══ 8. AI Chat Panel — Vercel 톤 ═══ */
body.theme-vercel .ai-header { background: var(--c-bg-warm); }
body.theme-vercel .ai-context-badge {
  background: var(--c-accent-bg);
  color: var(--c-accent);
  border: 1px solid var(--c-accent-border);
}
body.theme-vercel .ai-msg.user .ai-msg-avatar { background: var(--c-accent-bg); color: var(--c-accent); }
body.theme-vercel .ai-msg.user .ai-msg-bubble { background: var(--c-accent); }
body.theme-vercel .ai-input-wrap textarea:focus {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-focus);
}
body.theme-vercel .ai-send-btn { background: var(--c-accent-grad); }
body.theme-vercel .ai-send-btn:hover { background: var(--c-accent-grad); opacity: 0.92; }

/* ═══ 8.5. 페이지 전환 — 페이드 효과 제거 (즉시 표시) ═══ */
body.theme-vercel .mn-content.loading {
  opacity: 1; /* 페이드 아웃 제거 */
  transition: none;
}
body.theme-vercel .mn-content.loaded {
  opacity: 1;
  transition: none;
  animation: none; /* contentFadeIn 0.3s + translateY 8px 제거 */
}

/* ═══ 9. 검색 결과 mark 색상 ═══ */
body.theme-vercel .mn-search-result mark {
  background: var(--c-accent-bg);
  color: var(--c-accent);
}

/* ═══ 10. 모바일 ═══ */
@media (max-width: 900px) {
  body.theme-vercel .mn-header-logo { width: auto; }
}