.hover-primary { transition: color 0.2s; }
.hover-primary:hover { color: #0d6efd !important; }

/* 临时正文图片兜底控制 (等你发给我后续需求后，我们会在专门的 CSS 文件里写) */
/*.post-content-body img {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*    border-radius: 8px;*/
/*    margin: 1rem 0;*/
/*}*/
.hover-primary { transition: color 0.2s; }
.hover-primary:hover { color: #0d6efd !important; }
.transition-all { transition: all 0.2s ease; }

figure img{
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   文章详情页 前台渲染样式 (作用域限定在 .post-content 内部)
   ========================================================================== */

.post-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    word-wrap: break-word;
}

/* --- 1. 基础排版 (Paragraph, Header, Link) --- */
.post-content p {
    margin-bottom: 1.2em;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #1a1a1a;
    line-height: 1.4;
}

.post-content a {
    color: #388ae5;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s;
}

.post-content a:hover {
    border-bottom-color: #388ae5;
}

/* --- 2. 列表 (List) --- */
.post-content ul,
.post-content ol {
    margin-bottom: 1.2em;
    padding-left: 40px;
}

.post-content li {
    margin-bottom: 0.4em;
}

/* --- 3. 图片 (Image) --- */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2em auto;
    border-radius: 9px; /* 与后台编辑器保持一致的圆角 */
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.05); /* 轻微的阴影提升质感 */
}

/* 图片说明 (Caption) 假设后端输出为 figcaption 或 div.image-caption */
.post-content figcaption,
.post-content .image-caption {
    text-align: center;
    font-size: 14px;
    color: #888;
    margin-top: -1em;
    margin-bottom: 2em;
    font-style: italic;
}

/* --- 4. 引用 (Quote) --- */
.post-content blockquote,
.post-content .editorjs-quote {
    margin: 2em 0;
    padding: 15px 20px;
    border-left: 4px solid #388ae5; /* 蓝色强调边框 */
    background-color: #f8f9fa; /* 浅灰色背景 */
    color: #555;
    font-style: italic;
    border-radius: 0 6px 6px 0;
}
.post-content blockquote p {
    margin-bottom: 0;
}

/* --- 5. 待办清单 (Checklist) --- */
.post-content .editorjs-checklist {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5em;
}
.post-content .checklist-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}
/* 模拟复选框 UI */
.post-content .checklist-item::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: 5px;
    flex-shrink: 0;
    border: 2px solid #adb5bd;
    border-radius: 4px;
    background-color: #fff;
    /* transition for checking effect (if toggled by JS later) */
    transition: all 0.2s ease;
}
/* 假设后端把选中的条目加上了 checked 类，比如 .checklist-item.checked */
/*.post-content .checklist-item.checked::before {*/
/*    background-color: #388ae5;*/
/*    border-color: #388ae5;*/
/*    !* CSS 画一个白色的对勾 *!*/
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");*/
/*    background-size: 12px;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*}*/

.post-content .editorjs-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 列表项之间的间距 */
    margin-bottom: 1.5em;
}

.post-content .checklist-item {
    display: flex;
    align-items: flex-start;
}

/* 核心魔法：干掉原生 checkbox 样式，自己画一个 */
.post-content .checklist-item input[type="checkbox"] {
    /* 强行清除浏览器的原生样式 */
    -webkit-appearance: none;
    appearance: none;

    /* 基础尺寸和边框 */
    width: 18px;
    height: 18px;
    margin: 4px 10px 0 0; /* 与右侧文字保持距离，并微微下移对齐首行 */
    border: 2px solid #adb5bd;
    border-radius: 4px;
    background-color: #fff;
    flex-shrink: 0;

    /* 抵消 disabled 带来的默认灰色半透明效果 */
    opacity: 1 !important;
    cursor: default; /* 提示用户前台是只读的 */

    /* 准备内部居中对勾 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* 选中状态的框：变成主题蓝色 */
.post-content .checklist-item input[type="checkbox"]:checked {
    background-color: #388ae5;
    border-color: #388ae5;
}

/* 选中状态的对勾：用 CSS 伪元素画一个白色的 SVG 对勾 */
.post-content .checklist-item input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 文本标签的基础样式 */
.post-content .checklist-item label {
    margin: 0;
    color: #333;
    line-height: 1.6;
    transition: all 0.2s ease;
}

/* 工业级细节 (Notion 风格)：如果 input 是选中状态，紧挨着它的 label 文本变灰并加删除线 */
/*.post-content .checklist-item input[type="checkbox"]:checked + label {*/
/*    color: #9ca3af; !* 浅灰色 *!*/
/*    text-decoration: line-through; !* 删除线 *!*/
/*}*/

/* --- 6. 警告 (Warning) --- */
.post-content .editorjs-warning {
    margin: 2em 0;
    padding: 16px 20px;
    background-color: #fff3cd; /* 经典的警告浅黄色 */
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    color: #664d03;
}
/* 警告标题 */
.post-content .editorjs-warning-title {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1.1em;
}
/* 警告内容 */
.post-content .editorjs-warning-message {
    margin-bottom: 0;
}

/* --- 7. 分割线 (Delimiter) --- */
.post-content .editorjs-delimiter {
    text-align: center;
    margin: 3em 0;
    line-height: 1;
}
.post-content .editorjs-delimiter::before {
    content: "***"; /* 还原编辑器的三个星号，或者改成 '• • •' */
    font-size: 1.5em;
    letter-spacing: 1em;
    color: #adb5bd;
    margin-left: 1em; /* 补偿 letter-spacing 导致的视觉不居中 */
}

/* --- 8. 表格 (Table) --- */
.post-content .editorjs-table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
}
.post-content .editorjs-table th,
.post-content .editorjs-table td {
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    text-align: left;
}
.post-content .editorjs-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* --- 9. 嵌入内容 (Embed - YouTube/Twitter等) --- */
.post-content .editorjs-embed {
    margin: 2em 0;
    text-align: center;
}
/* 响应式 iframe 容器 (保持 16:9 比例) */
.post-content .editorjs-embed iframe {
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- 10. 内联工具 (Marker, InlineCode) & 代码块 (CodeBlock) --- */
.post-content mark {
    background-color: #ffeca8; /* 柔和的高亮黄 */
    padding: 2px 4px;
    border-radius: 3px;
    color: #333;
}

.post-content code {
    background-color: #f1f3f5;
    color: #d63384; /* 醒目的粉红色 */
    padding: 3px 6px;
    border-radius: 4px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
}

/* 多行代码块 */
.post-content pre {
    background-color: #212529; /* 深色代码块背景 */
    color: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 2em 0;
}
.post-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 0.95em;
}