/* === 全局滚动条美化 === */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.8);
}

/* === Markdown 自定义样式 (GitHub/Notion 风格) === */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #374151;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: #111827;
  margin-top: 2em;
  margin-bottom: 0.8em;
  line-height: 1.3;
}

.markdown-body h1 {
  font-size: 2em;
  font-weight: 800;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.3em;
}
.markdown-body h2 {
  font-size: 1.75em;
  font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.3em;
}
.markdown-body h3 {
  font-size: 1.5em;
  font-weight: 600;
}
.markdown-body h4 {
  font-size: 1.25em;
  font-weight: 600;
}

.markdown-body p {
  margin-bottom: 1.5em;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.markdown-body ul {
  list-style-type: disc;
}
.markdown-body ol {
  list-style-type: decimal;
}
.markdown-body li {
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}

.markdown-body blockquote {
  padding: 1em 1.5em;
  color: #4b5563;
  border-left: 4px solid #3b82f6;
  background-color: #f3f4f6;
  border-radius: 0 8px 8px 0;
  margin: 2em 0;
  font-style: italic;
}

.markdown-body a {
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.markdown-body a:hover {
  border-bottom-color: #2563eb;
}

/* === Markdown 图片美化 === */
.markdown-body img {
  max-width: 100%; /* 限制最大宽度不超过父容器 */
  height: auto; /* 高度自适应，防止变形 */
  display: block; /* 变为块级元素，允许设置 margin */
  margin: 2rem auto; /* 上下留白 2rem，左右自动居中 */
  border-radius: 8px; /* 8px 圆角 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 柔和的阴影 */
  border: 1px solid rgba(0, 0, 0, 0.05); /* 极淡的边框，防止白底图在白背景下“消失” */
  transition: transform 0.3s ease; /* 为鼠标悬停效果做准备 */
  backface-visibility: hidden; /* 防止缩放时文字抖动 */
}

/* 鼠标悬停时轻微放大 (可选) */
.markdown-body img:hover {
  transform: scale(1.02);
}

.markdown-body pre {
  padding: 1.5em; /* ✅ 核心修改：增加了内边距 */
  margin-bottom: 1.5em; /* 建议：底部留出空隙 */
  border-radius: 8px; /* 建议：加点圆角 */
  overflow-x: auto; /* 建议：代码太长时横向滚动 */
  background-color: #f3f4f6; /* 建议：加个浅灰背景，不然看不出范围 */
}

/* 防止 pre 里面的 code 标签自带间距干扰 */
.markdown-body pre code {
  padding: 0;
  border: none;
  background: transparent;
}