/* ============================================
   技能原文 Markdown 渲染样式
   Skill Original Markdown Render Styles
   ============================================

   说明：
   - 以下 CSS 变量需由项目主题系统注入
   - 若项目未提供主题系统，可保留 :root 中的默认值用于预览
   - 容器定高 400px，带垂直滚动，class 名为 .custom-scrollbar

   依赖变量清单：
   --common_level2_base_color : 主文字色（80% 不透明度）
   --common_level3_base_color : 次级文字色（60% 不透明度，用于代码块）
   --common_link_color        : 链接色
   --common_bg_z0_color       : 背景色（#f8f8fb）
   --overlay_area_color       : 叠加层色（8% 不透明度）
   --line_light_color         : 浅分割线
   --line_hard_color          : 深分割线
   --line_element_color       : 元素级分割线（用于滚动条 hover）
   ============================================ */

/* ----- 主题变量（预览用，接入项目后可选删除） ----- */
:root {
  --common_level1_base_color: rgba(23, 26, 29, 1);
  --common_level2_base_color: rgba(23, 26, 29, 0.8);
  --common_level3_base_color: rgba(23, 26, 29, 0.6);
  --common_level4_base_color: rgba(23, 26, 29, 0.24);
  --common_link_color: rgba(49, 126, 208, 1);
  --common_bg_z0_color: rgba(248, 248, 251, 1);
  --overlay_area_color: rgba(126, 134, 142, 0.08);
  --line_light_color: rgba(126, 134, 142, 0.16);
  --line_hard_color: rgba(126, 134, 142, 0.24);
  --line_element_color: rgba(126, 134, 142, 0.4);
}

/* ----- 滚动条样式 ----- */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--common_bg_z0_color);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--line_hard_color);
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--line_element_color);
}

/* ----- Markdown 渲染主体 ----- */
.skill-original-markdown {
  font-size: 12px;
  line-height: 1.7;
  color: var(--common_level2_base_color);
  word-break: break-word;
}

/* ----- 标题层级 ----- */
.skill-original-markdown h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--common_level2_base_color);
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line_light_color);
}

.skill-original-markdown h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--common_level2_base_color);
  line-height: 1.4;
  margin-top: 20px;
  margin-bottom: 10px;
}

.skill-original-markdown h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--common_level2_base_color);
  line-height: 1.4;
  margin-top: 16px;
  margin-bottom: 8px;
}

.skill-original-markdown h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--common_level2_base_color);
  line-height: 1.4;
  margin-top: 14px;
  margin-bottom: 6px;
}

.skill-original-markdown h5 {
  font-size: 12px;
  font-weight: 600;
  color: var(--common_level2_base_color);
  line-height: 1.4;
  margin-top: 12px;
  margin-bottom: 6px;
}

.skill-original-markdown h6 {
  font-size: 12px;
  font-weight: 500;
  color: var(--common_level2_base_color);
  line-height: 1.4;
  margin-top: 12px;
  margin-bottom: 6px;
}

/* ----- 正文段落 ----- */
.skill-original-markdown p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--common_level2_base_color);
  margin-top: 0;
  margin-bottom: 10px;
}

/* ----- 列表 ----- */
.skill-original-markdown ul,
.skill-original-markdown ol {
  font-size: 12px;
  line-height: 1.7;
  color: var(--common_level2_base_color);
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 20px;
}

.skill-original-markdown li {
  margin-bottom: 4px;
}

.skill-original-markdown li > p {
  margin-bottom: 0;
}

/* ----- 代码 ----- */
/* 行内代码 */
.skill-original-markdown code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  background-color: var(--overlay_area_color);
  color: var(--common_level2_base_color);
  padding: 2px 5px;
  border-radius: 4px;
  word-break: break-all;
}

/* 代码块 */
.skill-original-markdown pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.6;
  background-color: var(--common_bg_z0_color);
  color: var(--common_level3_base_color);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line_light_color);
  overflow-x: auto;
  margin-top: 0;
  margin-bottom: 12px;
}

.skill-original-markdown pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  color: var(--common_level3_base_color);
}

/* ----- 表格 ----- */
.skill-original-markdown table {
  font-size: 11px;
  line-height: 1.5;
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  margin-bottom: 12px;
}

.skill-original-markdown thead {
  background-color: var(--common_bg_z0_color);
}

.skill-original-markdown th {
  font-weight: 600;
  color: var(--common_level2_base_color);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line_light_color);
  border-top: 1px solid var(--line_light_color);
}

.skill-original-markdown td {
  color: var(--common_level2_base_color);
  padding: 7px 10px;
  border-bottom: 1px solid var(--overlay_area_color);
  vertical-align: top;
}

.skill-original-markdown tbody tr:hover {
  background-color: var(--overlay_area_color);
}

/* ----- 引用块 ----- */
.skill-original-markdown blockquote {
  font-size: 12px;
  line-height: 1.7;
  color: var(--common_level2_base_color);
  margin: 0 0 10px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--line_hard_color);
  background-color: var(--common_bg_z0_color);
  border-radius: 0 6px 6px 0;
}

.skill-original-markdown blockquote p:last-child {
  margin-bottom: 0;
}

/* ----- 分割线 ----- */
.skill-original-markdown hr {
  border: none;
  border-top: 1px solid var(--line_light_color);
  margin: 16px 0;
}

/* ----- 链接 ----- */
.skill-original-markdown a {
  font-size: 12px;
  color: var(--common_link_color);
  text-decoration: none;
}

.skill-original-markdown a:hover {
  text-decoration: underline;
}

/* ----- 粗体 / 斜体 ----- */
.skill-original-markdown strong {
  font-weight: 600;
  color: var(--common_level2_base_color);
}

.skill-original-markdown em {
  font-style: italic;
  color: var(--common_level2_base_color);
}

/* ----- 图片 ----- */
.skill-original-markdown img {
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
}

/* ----- 任务列表 ----- */
.skill-original-markdown input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}