/* SPEC-MDVIEW-001: /mdview 뷰어 전용 스타일
   7 색상 팔레트 프리셋([data-mdview-theme] 색상 스코프, 단일 공통 타이포 공유) + 반응형 + @media print
   @MX:NOTE: [AUTO] REQ-004a — 프리셋은 색상 토큰만 차이, 타이포는 단일 github 산세리프 구조 공유.
   clean/세리프 프리셋 제거됨. 외부 웹폰트 fetch 금지 [HARD]. */

/* ──────────────────────────────────────────────────────────────────
   기본 리셋 및 레이아웃
   ────────────────────────────────────────────────────────────────── */

.mdview-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  font-family: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
}

.mdview-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-toolbar-bg);
  flex-shrink: 0;
  flex-wrap: wrap;
  z-index: 10;
}

.mdview-toolbar-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mv-heading);
  margin-right: auto;
}

.mdview-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ──────────────────────────────────────────────────────────────────
   색상 팔레트 프리셋 (7종, 색상 토큰만 — 타이포는 .mdview-prose에서 단일 고정)
   ────────────────────────────────────────────────────────────────── */

/* GitHub 테마 (기본) */
[data-mdview-theme="github"] {
  --mv-bg: #ffffff;
  --mv-toolbar-bg: #f6f8fa;
  --mv-border: #d0d7de;
  --mv-text: #24292f;
  --mv-heading: #24292f;
  --mv-link: #0969da;
  --mv-code-bg: #f6f8fa;
  --mv-code-text: #24292f;
  --mv-pre-bg: #f6f8fa;
  --mv-pre-border: #d0d7de;
  --mv-blockquote-border: #d0d7de;
  --mv-blockquote-text: #57606a;
  --mv-table-header-bg: #f6f8fa;
  --mv-table-border: #d0d7de;
  --mv-toc-bg: #f6f8fa;
  --mv-toc-active: #0969da;
  --mv-toc-active-bg: #dbeafe;
  --mv-btn-bg: #f6f8fa;
  --mv-btn-border: #d0d7de;
  --mv-btn-text: #24292f;
  --mv-btn-hover-bg: #eaeef2;
  --mv-btn-active-bg: #0969da;
  --mv-btn-active-text: #ffffff;
  --mv-drop-bg: #f0f6ff;
  --mv-drop-border: #0969da;
  --mv-raw-bg: #f6f8fa;
  --mv-raw-text: #24292f;
}

/* GitHub Dark 테마 */
[data-mdview-theme="github-dark"] {
  --mv-bg: #0f172a;
  --mv-toolbar-bg: #1e293b;
  --mv-border: #334155;
  --mv-text: #cbd5e1;
  --mv-heading: #f1f5f9;
  --mv-link: #60a5fa;
  --mv-code-bg: #1e293b;
  --mv-code-text: #93c5fd;
  --mv-pre-bg: #0f172a;
  --mv-pre-border: #334155;
  --mv-blockquote-border: #2563eb;
  --mv-blockquote-text: #94a3b8;
  --mv-table-header-bg: #1e293b;
  --mv-table-border: #334155;
  --mv-toc-bg: #1e293b;
  --mv-toc-active: #60a5fa;
  --mv-toc-active-bg: #1e3a5f;
  --mv-btn-bg: #1e293b;
  --mv-btn-border: #334155;
  --mv-btn-text: #cbd5e1;
  --mv-btn-hover-bg: #273548;
  --mv-btn-active-bg: #2563eb;
  --mv-btn-active-text: #ffffff;
  --mv-drop-bg: #1e293b;
  --mv-drop-border: #60a5fa;
  --mv-raw-bg: #0f172a;
  --mv-raw-text: #94a3b8;
}

/* Solarized Light 테마 */
[data-mdview-theme="solarized-light"] {
  --mv-bg: #fdf6e3;
  --mv-toolbar-bg: #eee8d5;
  --mv-border: #93a1a1;
  --mv-text: #657b83;
  --mv-heading: #586e75;
  --mv-link: #268bd2;
  --mv-code-bg: #eee8d5;
  --mv-code-text: #586e75;
  --mv-pre-bg: #eee8d5;
  --mv-pre-border: #93a1a1;
  --mv-blockquote-border: #268bd2;
  --mv-blockquote-text: #839496;
  --mv-table-header-bg: #eee8d5;
  --mv-table-border: #93a1a1;
  --mv-toc-bg: #eee8d5;
  --mv-toc-active: #268bd2;
  --mv-toc-active-bg: #d4e8f7;
  --mv-btn-bg: #eee8d5;
  --mv-btn-border: #93a1a1;
  --mv-btn-text: #657b83;
  --mv-btn-hover-bg: #ddd6c1;
  --mv-btn-active-bg: #268bd2;
  --mv-btn-active-text: #fdf6e3;
  --mv-drop-bg: #d4e8f7;
  --mv-drop-border: #268bd2;
  --mv-raw-bg: #eee8d5;
  --mv-raw-text: #657b83;
}

/* Solarized Dark 테마 */
[data-mdview-theme="solarized-dark"] {
  --mv-bg: #002b36;
  --mv-toolbar-bg: #073642;
  --mv-border: #586e75;
  --mv-text: #839496;
  --mv-heading: #93a1a1;
  --mv-link: #268bd2;
  --mv-code-bg: #073642;
  --mv-code-text: #2aa198;
  --mv-pre-bg: #073642;
  --mv-pre-border: #586e75;
  --mv-blockquote-border: #268bd2;
  --mv-blockquote-text: #657b83;
  --mv-table-header-bg: #073642;
  --mv-table-border: #586e75;
  --mv-toc-bg: #073642;
  --mv-toc-active: #268bd2;
  --mv-toc-active-bg: #0a3d4d;
  --mv-btn-bg: #073642;
  --mv-btn-border: #586e75;
  --mv-btn-text: #839496;
  --mv-btn-hover-bg: #0a3f4f;
  --mv-btn-active-bg: #268bd2;
  --mv-btn-active-text: #fdf6e3;
  --mv-drop-bg: #073642;
  --mv-drop-border: #268bd2;
  --mv-raw-bg: #002b36;
  --mv-raw-text: #657b83;
}

/* Nord 테마 */
[data-mdview-theme="nord"] {
  --mv-bg: #2e3440;
  --mv-toolbar-bg: #3b4252;
  --mv-border: #4c566a;
  --mv-text: #d8dee9;
  --mv-heading: #eceff4;
  --mv-link: #88c0d0;
  --mv-code-bg: #3b4252;
  --mv-code-text: #a3be8c;
  --mv-pre-bg: #3b4252;
  --mv-pre-border: #4c566a;
  --mv-blockquote-border: #88c0d0;
  --mv-blockquote-text: #9faabf;
  --mv-table-header-bg: #3b4252;
  --mv-table-border: #4c566a;
  --mv-toc-bg: #3b4252;
  --mv-toc-active: #88c0d0;
  --mv-toc-active-bg: #3d5166;
  --mv-btn-bg: #3b4252;
  --mv-btn-border: #4c566a;
  --mv-btn-text: #d8dee9;
  --mv-btn-hover-bg: #434c5e;
  --mv-btn-active-bg: #5e81ac;
  --mv-btn-active-text: #eceff4;
  --mv-drop-bg: #3b4252;
  --mv-drop-border: #88c0d0;
  --mv-raw-bg: #2e3440;
  --mv-raw-text: #9faabf;
}

/* Dracula 테마 */
[data-mdview-theme="dracula"] {
  --mv-bg: #282a36;
  --mv-toolbar-bg: #44475a;
  --mv-border: #6272a4;
  --mv-text: #f8f8f2;
  --mv-heading: #f8f8f2;
  --mv-link: #8be9fd;
  --mv-code-bg: #44475a;
  --mv-code-text: #50fa7b;
  --mv-pre-bg: #44475a;
  --mv-pre-border: #6272a4;
  --mv-blockquote-border: #bd93f9;
  --mv-blockquote-text: #bfc6d9;
  --mv-table-header-bg: #44475a;
  --mv-table-border: #6272a4;
  --mv-toc-bg: #44475a;
  --mv-toc-active: #bd93f9;
  --mv-toc-active-bg: #3d3f52;
  --mv-btn-bg: #44475a;
  --mv-btn-border: #6272a4;
  --mv-btn-text: #f8f8f2;
  --mv-btn-hover-bg: #4f5368;
  --mv-btn-active-bg: #bd93f9;
  --mv-btn-active-text: #282a36;
  --mv-drop-bg: #44475a;
  --mv-drop-border: #ff79c6;
  --mv-raw-bg: #282a36;
  --mv-raw-text: #bfc6d9;
}

/* Sepia 테마 */
[data-mdview-theme="sepia"] {
  --mv-bg: #f4ecd8;
  --mv-toolbar-bg: #ede0c4;
  --mv-border: #c9b99a;
  --mv-text: #5b4636;
  --mv-heading: #4a3728;
  --mv-link: #8a6d3b;
  --mv-code-bg: #ede0c4;
  --mv-code-text: #5b4636;
  --mv-pre-bg: #ede0c4;
  --mv-pre-border: #c9b99a;
  --mv-blockquote-border: #8a6d3b;
  --mv-blockquote-text: #7a6050;
  --mv-table-header-bg: #ede0c4;
  --mv-table-border: #c9b99a;
  --mv-toc-bg: #ede0c4;
  --mv-toc-active: #8a6d3b;
  --mv-toc-active-bg: #e0d0b0;
  --mv-btn-bg: #ede0c4;
  --mv-btn-border: #c9b99a;
  --mv-btn-text: #5b4636;
  --mv-btn-hover-bg: #e0cfb0;
  --mv-btn-active-bg: #8a6d3b;
  --mv-btn-active-text: #f4ecd8;
  --mv-drop-bg: #e8d8b8;
  --mv-drop-border: #8a6d3b;
  --mv-raw-bg: #ede0c4;
  --mv-raw-text: #7a6050;
}

/* ──────────────────────────────────────────────────────────────────
   툴바 버튼
   ────────────────────────────────────────────────────────────────── */

.mdview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--mv-btn-border);
  border-radius: 6px;
  background: var(--mv-btn-bg);
  color: var(--mv-btn-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.mdview-btn:hover {
  background: var(--mv-btn-hover-bg);
}

.mdview-btn.active {
  background: var(--mv-btn-active-bg);
  color: var(--mv-btn-active-text);
  border-color: var(--mv-btn-active-bg);
}

/* ──────────────────────────────────────────────────────────────────
   파일 업로드 드롭 존
   ────────────────────────────────────────────────────────────────── */

.mdview-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background: var(--mv-bg);
  color: var(--mv-text);
  border: 2px dashed var(--mv-border);
  margin: 1rem;
  border-radius: 12px;
  transition: background 0.2s, border-color 0.2s;
}

.mdview-dropzone.drag-over {
  background: var(--mv-drop-bg);
  border-color: var(--mv-drop-border);
}

.mdview-dropzone-icon {
  font-size: 3rem;
  opacity: 0.4;
}

.mdview-dropzone h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mv-heading);
  margin: 0;
}

.mdview-dropzone p {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

.mdview-file-input {
  display: none;
}

.mdview-upload-btn {
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid var(--mv-drop-border);
  border-radius: 8px;
  background: var(--mv-drop-bg);
  color: var(--mv-link);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.mdview-upload-btn:hover {
  background: var(--mv-link);
  color: #ffffff;
}

/* REQ-008 (v1.4.0): frontmatter 메타데이터 카드 (7종 테마 토큰 재사용) */
.mdview-frontmatter-card {
  border: 1px solid var(--mv-border);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--mv-code-bg);
}

.mdview-fm-thumbnail {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
  display: block;
}

.mdview-fm-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--mv-heading);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.mdview-fm-description {
  font-size: 0.95rem;
  color: var(--mv-text);
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

.mdview-fm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}

.mdview-fm-date,
.mdview-fm-category {
  color: var(--mv-text);
  opacity: 0.7;
}

.mdview-fm-date::before { content: '📅 '; }
.mdview-fm-category::before { content: '📂 '; }

.mdview-fm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.mdview-fm-tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  background: var(--mv-link);
  color: #ffffff;
  opacity: 0.85;
  line-height: 1.6;
  word-break: break-all;
}

/* REQ-001 (v1.3.1): 초기/빈 상태 프라이버시 안내 (AC-001-7) */
.mdview-privacy-notice {
  font-size: 0.76rem;
  color: var(--mv-text);
  opacity: 0.55;
  margin: 0.75rem 0 0;
  text-align: center;
  line-height: 1.5;
  max-width: 36ch;
}

/* REQ-006: 샘플 선택 UI */
.mdview-sample-section {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.mdview-sample-label {
  font-size: 0.78rem;
  opacity: 0.6;
  margin: 0;
}

.mdview-sample-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.mdview-sample-btn {
  padding: 0.3rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1.5px solid var(--mv-drop-border);
  border-radius: 6px;
  background: transparent;
  color: var(--mv-text);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.mdview-sample-btn:hover {
  background: var(--mv-link);
  color: #ffffff;
  border-color: var(--mv-link);
}

.mdview-error-msg {
  color: #dc2626;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  max-width: 400px;
}

/* ──────────────────────────────────────────────────────────────────
   메인 콘텐츠 레이아웃
   ────────────────────────────────────────────────────────────────── */

.mdview-content-area {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: var(--mv-bg);
}

/* TOC 사이드바 (REQ-004b: 우측 배치 — DOM 순서상 content-area 다음, border-left로 구분) */
.mdview-toc-sidebar {
  width: 240px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--mv-border);
  background: var(--mv-toc-bg);
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  transition: width 0.2s;
}

.mdview-toc-sidebar.collapsed {
  width: 0;
  padding: 0;
  overflow: hidden;
  border-left: none;
}

.mdview-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mv-text);
  opacity: 0.6;
  flex-shrink: 0;
}

.mdview-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.mdview-toc-item {
  display: block;
}

.mdview-toc-link {
  display: block;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  color: var(--mv-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s;
  line-height: 1.4;
  word-break: break-word;
}

.mdview-toc-link:hover {
  background: var(--mv-btn-hover-bg);
  color: var(--mv-link);
}

.mdview-toc-link.active {
  color: var(--mv-toc-active);
  background: var(--mv-toc-active-bg);
  border-left-color: var(--mv-toc-active);
  font-weight: 600;
}

/* 헤딩 레벨별 들여쓰기 */
.mdview-toc-link[data-level="1"] { padding-left: 0.75rem; }
.mdview-toc-link[data-level="2"] { padding-left: 1.25rem; }
.mdview-toc-link[data-level="3"] { padding-left: 1.75rem; }

/* 뷰어 패널 */
.mdview-viewer-panels {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 렌더링 패널 */
.mdview-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  color: var(--mv-text);
  background: var(--mv-bg);
}

.mdview-panel.hidden {
  display: none;
}

/* 분할 뷰: 각 패널 50% */
.mdview-viewer-panels.split-mode .mdview-panel {
  flex: 0 0 50%;
  border-right: 1px solid var(--mv-border);
}
.mdview-viewer-panels.split-mode .mdview-panel:last-child {
  border-right: none;
}

/* 원본 뷰 */
.mdview-raw-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  background: var(--mv-raw-bg);
  color: var(--mv-raw-text);
  font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}

.mdview-raw-panel.hidden {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────
   Prose 스타일 (테마 변수 기반)
   ────────────────────────────────────────────────────────────────── */

/* REQ-004a: prose 컨테이너 — 단일 공통 타이포 (7 프리셋 공유, per-theme 타이포 변수 없음)
   시스템 산세리프, 72ch 폭, 1.7 줄간격 — 색상만 [data-mdview-theme] 스코프에서 변경 */
.mdview-prose {
  max-width: 72ch;
  line-height: 1.7;
  color: var(--mv-text);
  font-family: -apple-system, 'Segoe UI', Pretendard, 'Noto Sans KR', system-ui, sans-serif;
}

.mdview-prose h1,
.mdview-prose h2,
.mdview-prose h3,
.mdview-prose h4,
.mdview-prose h5,
.mdview-prose h6 {
  color: var(--mv-heading);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  scroll-margin-top: 1rem;
}

/* h1/h2 하단 보더: 7 프리셋 전부 var(--mv-border) 활성 (단일 github 타이포 구조) */
.mdview-prose h1 { font-size: 1.8em; border-bottom: 2px solid var(--mv-border); padding-bottom: 0.3em; }
.mdview-prose h2 { font-size: 1.4em; border-bottom: 1px solid var(--mv-border); padding-bottom: 0.25em; }
.mdview-prose h3 { font-size: 1.15em; }
.mdview-prose h4 { font-size: 1em; }

.mdview-prose p { margin: 0.9em 0; }

.mdview-prose a {
  color: var(--mv-link);
  text-decoration: underline;
}

.mdview-prose code {
  background: var(--mv-code-bg);
  color: var(--mv-code-text);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
}

.mdview-prose pre {
  background: var(--mv-pre-bg);
  border: 1px solid var(--mv-pre-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1em 0;
}

.mdview-prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 0.85em;
}

.mdview-prose blockquote {
  border-left: 4px solid var(--mv-blockquote-border);
  color: var(--mv-blockquote-text);
  margin: 1em 0;
  padding: 0.5em 1em;
  font-style: italic;
}

.mdview-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 1em 0;
  overflow-x: auto;
  display: block;
}

.mdview-prose thead th {
  background: var(--mv-table-header-bg);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mv-table-border);
}

.mdview-prose td {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--mv-table-border);
}

.mdview-prose tr:nth-child(even) td {
  background: var(--mv-code-bg);
}

.mdview-prose ul,
.mdview-prose ol {
  margin: 0.75em 0;
  padding-left: 1.5em;
}

.mdview-prose li {
  margin: 0.3em 0;
}

/* Task list 체크박스 */
.mdview-prose input[type="checkbox"] {
  margin-right: 0.3em;
  cursor: default;
}

/* ──────────────────────────────────────────────────────────────────
   로딩 상태
   ────────────────────────────────────────────────────────────────── */

.mdview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.75rem;
  color: var(--mv-text);
  opacity: 0.7;
  font-size: 0.9rem;
}

.mdview-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--mv-border);
  border-top-color: var(--mv-link);
  border-radius: 50%;
  animation: mdview-spin 0.8s linear infinite;
}

@keyframes mdview-spin {
  to { transform: rotate(360deg); }
}

/* 내용 없음 상태 */
.mdview-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.5rem;
  color: var(--mv-text);
  opacity: 0.5;
  font-size: 0.9rem;
  padding: 2rem;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────
   Mermaid 다이어그램
   ────────────────────────────────────────────────────────────────── */

.mdview-prose pre.mermaid,
.mdview-prose .mdview-mermaid-fallback {
  text-align: center;
}

.mdview-mermaid-fallback {
  text-align: left;
  opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────────────
   모바일 드로어 (TOC)
   ────────────────────────────────────────────────────────────────── */

.mdview-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 50;
}

.mdview-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  background: var(--mv-toc-bg);
  border-left: 1px solid var(--mv-border);
  z-index: 51;
  overflow-y: auto;
  padding: 1rem 0;
  transform: translateX(100%);
  transition: transform 0.25s;
}

.mdview-drawer.open {
  transform: translateX(0);
}

.mdview-drawer-overlay.open {
  display: block;
}

/* ──────────────────────────────────────────────────────────────────
   모바일 탭 (반응형)
   ────────────────────────────────────────────────────────────────── */

.mdview-tab-bar {
  display: none;
  gap: 0;
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-toolbar-bg);
  flex-shrink: 0;
}

.mdview-tab {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--mv-text);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
}

.mdview-tab.active {
  color: var(--mv-link);
  border-bottom-color: var(--mv-link);
}

/* ──────────────────────────────────────────────────────────────────
   반응형: 좁은 뷰포트 (< 768px)
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* 고정 사이드바 숨김 → 드로어로 대체 */
  .mdview-toc-sidebar {
    display: none;
  }

  /* 분할 뷰 대신 탭 전환 */
  .mdview-viewer-panels.split-mode .mdview-panel:first-child {
    display: none;
  }
  .mdview-viewer-panels.split-mode .mdview-panel:last-child {
    flex: 1;
  }
  .mdview-viewer-panels.split-mode {
    flex-direction: column;
  }

  /* 탭 바 표시 */
  .mdview-tab-bar {
    display: flex;
  }

  /* 툴바에서 분할 뷰 버튼 숨김 */
  .mdview-btn.split-view-btn {
    display: none;
  }

  /* 패널 패딩 축소 */
  .mdview-panel,
  .mdview-raw-panel {
    padding: 1rem;
  }
}

/* ──────────────────────────────────────────────────────────────────
   @media print — 인쇄 최적화 (REQ-005b)
   뷰어 크롬 숨김, 렌더링 결과만 출력
   ────────────────────────────────────────────────────────────────── */

@media print {
  /* 뷰어 크롬(툴바, TOC 토글, 테마 선택기, 드롭 영역) 숨김 */
  .mdview-toolbar,
  .mdview-toc-sidebar,
  .mdview-dropzone,
  .mdview-tab-bar,
  .mdview-drawer,
  .mdview-drawer-overlay,
  .mdview-loading,
  .mdview-empty-state {
    display: none !important;
  }

  /* 렌더링 패널만 출력 */
  .mdview-raw-panel,
  .mdview-viewer-panels .mdview-panel.hidden {
    display: none !important;
  }

  /* 렌더링 패널 전체 폭으로 */
  .mdview-body,
  .mdview-content-area,
  .mdview-viewer-panels {
    display: block !important;
    overflow: visible !important;
  }

  .mdview-panel {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* 코드 블록, 표, 다이어그램이 페이지에서 잘리지 않도록 */
  .mdview-prose pre,
  .mdview-prose table,
  .mdview-prose figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .mdview-prose h1,
  .mdview-prose h2,
  .mdview-prose h3 {
    page-break-after: avoid;
    break-after: avoid;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Prism.js 토큰 색상 (REQ-004a — 단일 소스: mdview.css)
   라이트 계열: github / solarized-light / sepia
   다크 계열:  github-dark / solarized-dark / nord / dracula
   @MX:NOTE: [AUTO] Prism 토큰 색상은 이 블록에서만 관리.
   templates/mdview.html 인라인 style에 토큰 규칙 추가 금지.
   ────────────────────────────────────────────────────────────────── */

/* 라이트 팔레트 Prism 토큰 — github / solarized-light / sepia */
:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.comment,
:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.prolog { color: #6e7781; }

:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.keyword { color: #cf222e; }

:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.string { color: #0a3069; }

:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.number,
:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.boolean { color: #0550ae; }

:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.function { color: #8250df; }

:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.operator,
:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.punctuation { color: #24292f; }

:is(
  [data-mdview-theme="github"],
  [data-mdview-theme="solarized-light"],
  [data-mdview-theme="sepia"]
) .token.class-name { color: #953800; }

/* 다크 팔레트 Prism 토큰 — github-dark / solarized-dark / nord / dracula */
:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.comment,
:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.prolog { color: #8b949e; }

:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.keyword { color: #f472b6; }

:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.string { color: #86efac; }

:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.number,
:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.boolean { color: #60a5fa; }

:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.function { color: #c4b5fd; }

:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.operator,
:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.punctuation { color: #94a3b8; }

:is(
  [data-mdview-theme="github-dark"],
  [data-mdview-theme="solarized-dark"],
  [data-mdview-theme="nord"],
  [data-mdview-theme="dracula"]
) .token.class-name { color: #fcd34d; }