/* 마크다운 본문 스타일 — 구 front/components/markdown/markdown-content.tsx 의
 * Tailwind component override 를 1:1 로 옮긴 것.
 *
 * 구조: React 의 `components` 맵으로 태그마다 className 을 주입하던 것을,
 * 컨테이너 클래스 하위 선택자로 대체한다. 렌더 결과 HTML 은 동일하므로
 * (renderMarkdown 이 순수 태그를 뱉음) 스타일만 여기서 붙는다.
 *
 * variant:
 *   .markdown-body                → bubble (채팅 응답, 기본)
 *   .markdown-body.is-document    → document (지식 저장소 / 출처 드로어)
 * 차이는 헤딩 크기 · 문단 간격 · 코드/표 폰트 크기뿐. 나머지는 공통.
 */

.markdown-body {
  word-break: break-word;

  /* variant 별 값 — is-document 에서 덮어쓴다 */
  --md-h1: var(--text-base);
  --md-h2: var(--text-base);
  --md-h3: var(--text-sm);
  --md-h4: var(--text-sm);
  --md-h5: var(--text-sm);
  --md-h6: var(--text-sm);
  --md-para-gap: 0.5rem;   /* mt-2 */
  --md-code-size: var(--text-xs);
  --md-table-size: var(--text-xs);
}

.markdown-body.is-document {
  --md-h1: var(--text-2xl);
  --md-h2: var(--text-xl);
  --md-h3: var(--text-lg);
  --md-h4: var(--text-base);
  --md-h5: var(--text-sm);
  --md-h6: var(--text-sm);
  --md-para-gap: 0.75rem;  /* mt-3 */
  --md-code-size: var(--text-sm);
  --md-table-size: var(--text-sm);
}

/* ── 문단 ─────────────────────────────────────────────────────── */
.markdown-body p {
  margin: 0;
  line-height: var(--leading-relaxed);
}
.markdown-body p:not(:first-child) {
  margin-top: var(--md-para-gap);
}

/* ── 헤딩 ─────────────────────────────────────────────────────── */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 0.75rem 0 0.25rem;   /* mt-3 mb-1 */
  font-weight: 600;
}
.markdown-body h1:first-child,
.markdown-body h2:first-child,
.markdown-body h3:first-child,
.markdown-body h4:first-child,
.markdown-body h5:first-child,
.markdown-body h6:first-child {
  margin-top: 0;               /* first:mt-0 */
}
.markdown-body h1 { font-size: var(--md-h1); }
.markdown-body h2 { font-size: var(--md-h2); }
.markdown-body h3 { font-size: var(--md-h3); }
.markdown-body h4 { font-size: var(--md-h4); }
.markdown-body h5 { font-size: var(--md-h5); }
.markdown-body h6 { font-size: var(--md-h6); }

/* ── 목록 ─────────────────────────────────────────────────────── */
.markdown-body ul,
.markdown-body ol {
  margin: 0.5rem 0;            /* my-2 */
  padding-left: 1.25rem;       /* ml-5 */
}
.markdown-body ul { list-style: disc; }
.markdown-body ol { list-style: decimal; }
.markdown-body li {
  padding-left: 0.25rem;       /* pl-1 */
  line-height: var(--leading-relaxed);
}
.markdown-body li + li { margin-top: 0.25rem; }   /* space-y-1 */

/* ── 인라인 요소 ──────────────────────────────────────────────── */
.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }
.markdown-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.markdown-body a:hover { color: var(--primary); }

.markdown-body blockquote {
  margin: 0.5rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid color-mix(in oklab, var(--muted-foreground) 30%, transparent);
  font-style: italic;
}

.markdown-body hr {
  margin: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* ── 코드 ─────────────────────────────────────────────────────── */
/* 인라인 코드 — 펜스(<pre><code>) 안쪽은 배경/패딩을 pre 가 담당하므로 해제 */
.markdown-body code {
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--background) 60%, transparent);
  padding: 0.125rem 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--md-code-size);
}
.markdown-body pre {
  margin: 0.5rem 0;
  padding: 0.75rem;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--background) 60%, transparent);
  font-size: var(--md-code-size);
}
.markdown-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ── 표 ───────────────────────────────────────────────────────── */
/* 구 버전은 React 가 <div class="my-2 overflow-x-auto"> 로 감쌌다.
   바닐라에서는 렌더 후 markdown.js 의 wrapTables() 가 .md-table-wrap 을 씌운다. */
.markdown-body .md-table-wrap {
  margin: 0.5rem 0;
  overflow-x: auto;
}
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--md-table-size);
}
.markdown-body thead {
  background: color-mix(in oklab, var(--background) 60%, transparent);
}
.markdown-body th,
.markdown-body td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;     /* px-2 py-1 */
}
.markdown-body th {
  text-align: left;
  font-weight: 600;
}
.markdown-body td {
  vertical-align: top;
}

/* document 변형 한정: 이미지 미로드(2026-06-05 결정).
   지식문서 .md 의 이미지 자산이 서빙되지 않아 깨진 아이콘 + 실패 요청만 남는다.
   구 버전은 React 가 img 컴포넌트를 null 로 반환해 아예 마운트하지 않았다.
   CSS 만으로는 요청 자체를 막을 수 없어, markdown.js 가 document 변형에서
   <img> 노드를 제거한다(여기서는 잔여 케이스 대비 안전망). */
.markdown-body.is-document img { display: none; }

/* ── 인용 칩 (구 makeCiteComponent 의 <button> 대체) ──────────────
 * renderMarkdown 이 <cite data-cite-index="N"></cite> 를 뱉고,
 * 라벨은 CSS content 로, 클릭은 이벤트 위임으로 처리한다.
 * 접근성 속성(role/aria)은 markdown.js 가 렌더 후 부여한다. */
.markdown-body cite[data-cite-index] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.125rem;          /* mx-0.5 */
  padding: 0 0.375rem;         /* px-1.5 */
  border: 1px solid transparent;
  border-radius: 9999px;
  background: #6b7280;         /* gray-500 */
  color: #fff;
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: background-color 0.15s;
}
.markdown-body cite[data-cite-index]::before {
  content: "근거[" attr(data-cite-index) "]";
}
.markdown-body cite[data-cite-index]:hover {
  background: #4b5563;         /* gray-600 */
}
/* 드로어가 이 근거로 열려 있는 상태 — 검정 배경 */
.markdown-body cite[data-cite-index][aria-pressed="true"] {
  background: #000;
}
.markdown-body cite[data-cite-index]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

/* ── 근거 강조 2단 (remark-source-highlight 산출) ──────────────── */
/* 1단: 라인 band — 청크 라인 범위의 블록 노드 배경 */
.cite-band {
  background-color: var(--cite-band-bg);
  border-radius: 0.25rem;
}
/* 표는 tr 에 붙으므로 셀로 내려 칠한다(tr 배경이 border-collapse 에서 묻힘) */
tr.cite-band > td,
tr.cite-band > th {
  background-color: var(--cite-band-bg);
}
/* 2단: 정확 구절 — gold 박스 + orange 글로우 */
.markdown-body mark.cite-quote {
  background: var(--cite-quote-bg);
  color: var(--cite-quote-fg);
  padding: 0 0.125rem;
  border-radius: var(--radius-md);
  box-shadow: 0 0 12px var(--cite-quote-glow);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}