/* ======================================
   富文本编辑器内容基础样式（editor-content-view）
   ====================================== */
.editor-content-view {
  /* 基础字体与行高，确保全局阅读一致性 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  padding: 16px; /* 内容区内边距，避免文字贴边 */
  max-width: 800px; /* 限制最大宽度，提升长文本阅读体验 */
  margin: 0 auto; /* 水平居中，适配宽屏 */
}


/* ======================================
   1. 段落与列表（p, li）
   ====================================== */
/* 段落样式：优化行高，增加上下间距 */
.editor-content-view p {
  white-space: pre-wrap; /* 保留换行与空格，适配代码/诗歌等场景 */
  line-height: 2; /* 保持原有行高，提升可读性 */
  margin: 12px 0; /* 增加段落间距，避免拥挤 */
}

/* 无序列表/有序列表：调整缩进与间距 */
.editor-content-view ul,
.editor-content-view ol {
  padding-left: 28px; /* 增大左侧缩进，从20px→28px，更显层次 */
  margin: 12px 0;
}

/* 列表项：优化行高与间距 */
.editor-content-view li {
  white-space: pre-wrap;
  line-height: 1.8; /* 列表项行高略低于段落，避免冗余 */
  margin: 6px 0; /* 列表项上下间距，提升区分度 */
}


/* ======================================
   2. 引用块（blockquote）
   ====================================== */
.editor-content-view blockquote {
  background-color: #f8fafc; /* 背景从#f1f1f1→#f8fafc，更清新通透 */
  border-left: 4px solid #3b82f6; /* 左侧边框从8px→4px，颜色改为蓝色，更显精致 */
  margin: 16px 0; /* 增大上下间距，从10px→16px，突出引用区域 */
  padding: 12px 18px; /* 调整内边距，更舒展 */
  border-radius: 0 8px 8px 0; /* 右侧圆角，避免尖锐边缘 */
  color: #64748b; /* 引用文本颜色柔化，与正文区分 */
  font-style: italic; /* 增加斜体，强化引用属性 */
}


/* ======================================
   3. 代码块（code, pre>code）
   ====================================== */
/* 行内代码：优化背景与圆角 */
.editor-content-view code {
  background-color: #f1f5f9; /* 背景从#eee→#f1f5f9，更贴合现代设计 */
  border-radius: 4px; /* 增大圆角，从3px→4px */
  font-family: "SFMono-Regular", Menlo, Monaco, monospace; /* 统一等宽字体，适配代码场景 */
  padding: 3px 6px; /* 调整左右内边距，从3px→6px，更舒展 */
  color: #dc2626; /* 代码颜色改为红色，增强辨识度 */
  font-size: 0.9em; /* 代码字体略小，避免与正文冲突 */
}

/* 多行代码块：增强视觉层次 */
.editor-content-view pre>code {
  display: block;
  padding: 16px; /* 增大内边距，从10px→16px，更易读 */
  background-color: #1e293b; /* 深色背景，适配代码高亮场景 */
  color: #f8fafc; /* 代码文本白色，高对比度 */
  border-radius: 8px; /* 增加圆角，更现代 */
  overflow-x: auto; /* 横向滚动，避免代码换行错乱 */
  line-height: 1.5; /* 代码行高优化，提升阅读体验 */
  font-size: 0.9em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，增强立体感 */
}


/* ======================================
   4. 表格（table, th, td）
   ====================================== */
.editor-content-view table {
  border-collapse: collapse;
  width: 100%; /* 表格占满容器，避免过窄 */
  margin: 16px 0; /* 增加上下间距，突出表格区域 */
  border-radius: 8px; /* 表格整体圆角（需配合overflow隐藏） */
  overflow: hidden; /* 确保圆角生效，裁剪边框 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 轻微阴影，增强层次感 */
}

/* 表头：优化背景与文字样式 */
.editor-content-view th {
  background-color: #f1f5f9; /* 表头背景从#f1f1f1→#f1f5f9，更清新 */
  border: 1px solid #e2e8f0; /* 边框颜色柔化，从#ccc→#e2e8f0 */
  height: 40px; /* 增表头高度，从20px→40px，更易点击 */
  min-width: 80px; /* 增最小宽度，从50px→80px，避免内容拥挤 */
  padding: 8px 12px; /* 增加内边距，更舒展 */
  text-align: left; /* 表头文字左对齐，符合阅读习惯 */
  font-weight: 600; /* 表头文字加粗，突出标题属性 */
  color: #334155;
}

/* 表格单元格：优化边框与间距 */
.editor-content-view td {
  border: 1px solid #e2e8f0;
  height: 36px; /* 增加单元格高度，从20px→36px，更易读 */
  min-width: 80px;
  padding: 8px 12px;
  color: #475569;
  transition: background 0.2s ease; /* 增加hover过渡，提升交互感 */
}

/* 表格行hover：增强交互反馈 */
.editor-content-view tr:hover td {
  background-color: #f8fafc; /* 行hover背景，方便查看数据 */
}


/* ======================================
   5. 复选框（input[type=checkbox]）
   ====================================== */
.editor-content-view input[type=checkbox] {
  margin-right: 8px; /* 增大右侧间距，从5px→8px，与文字区分更明显 */
  width: 16px;
  height: 16px;
  accent-color: #3b82f6; /* 复选框选中颜色改为蓝色，统一主题 */
  cursor: pointer; /* 鼠标悬浮为指针，提示可点击 */
}


/* ======================================
   6. 分隔线（hr）
   ====================================== */
.editor-content-view hr {
  color: #e2e8f0; /* 分隔线颜色柔化，从#ccc→#e2e8f0 */
  margin: 20px 0; /* 增大上下间距，从10px→20px，更显分区作用 */
  height: 1px;
  border: none;
  background-color: #e2e8f0; /* 兼容部分浏览器，确保分隔线显示 */
}