/**
 * markdown.css - 마크다운 요소: 코드 블록, 인라인 코드, 목록, 인용문, 헤딩, 표
 */

/* 코드 블록 */
.code-block-container {
  margin: 12px 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--code-header-border);
  background-color: var(--code-block-bg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background-color: var(--code-header-bg);
  border-bottom: 1px solid var(--code-header-border);
  user-select: none;
}

.code-lang-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: lowercase;
}

.code-copy-btn {
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  gap: 4px;
}

.code-copy-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
  border-color: var(--border-subtle);
}

.code-copy-btn.copied {
  color: var(--success-text);
  background-color: var(--success-subtle);
  border-color: rgba(16, 185, 129, 0.3);
}

.code-content-pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--code-text);
  tab-size: 2;
}

.code-content-pre code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
}

/* 인라인 코드 */
.inline-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: var(--code-inline-bg);
  border: 1px solid var(--code-inline-border);
  color: var(--code-inline-text);
  word-break: break-word;
}

/* 기본 마크다운 타이포그래피 */
.message-body p {
  margin: 6px 0;
}

.message-body p:first-child {
  margin-top: 0;
}

.message-body p:last-child {
  margin-bottom: 0;
}

.message-body strong {
  font-weight: 700;
  color: var(--text-primary);
}

.message-body em {
  font-style: italic;
}

.message-body del {
  text-decoration: line-through;
  opacity: 0.7;
}

.message-body h1,
.message-body h2,
.message-body h3,
.message-body h4 {
  color: var(--text-primary);
  font-weight: 700;
  margin: 14px 0 6px 0;
  line-height: 1.3;
}

.message-body h1 { font-size: 18px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; }
.message-body h2 { font-size: 16px; }
.message-body h3 { font-size: 14px; }
.message-body h4 { font-size: 13px; }

.message-body ul,
.message-body ol {
  margin: 6px 0 6px 20px;
  padding: 0;
}

.message-body li {
  margin: 3px 0;
}

.message-body blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--accent-primary);
  background-color: var(--bg-surface);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  color: var(--text-secondary);
}

.message-body hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 14px 0;
}

.message-body a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}