/* ==========================================================
   山风 (ShanFeng) 文章详情页核心样式 - 终极对齐版
   核心理念：底灰 + 左悬浮岛 + 右灰岛屿 + 居中 680px 黄金阅读流
   ========================================================== */

/* --- 0. 专属页面背景 --- */
body.single {
    background-color: #FFFFFF !important; 
}

/* --- 1. 整体布局大容器 --- */
.sf-reading-container-with-sidebar {
    max-width: var(--sf-container-width, 1040px); /* 完美继承首页的 1040px 宽度 */
    margin: 0 auto 60px;    
    padding: 0 20px;       /* 恢复两边 20px 的安全距离 */
    display: flex;          
    gap: 30px;             /* 左中右三个模块的呼吸间距 */
    align-items: flex-start; 
    background: transparent;
    border-radius: 0;
    box-shadow: none; 
}

/* 单栏纯净阅读模式专属容器 */
.sf-reading-container-no-sidebar {
    max-width: 800px; /* 单栏时稍微窄一点更聚光 */
    margin: 0 auto 60px auto; 
    padding: 0 20px;
    display: block; 
    background: transparent;
}
.sf-reading-container-no-sidebar .sf-single-main-content {
    width: 100%;
}

/* --- 2. 左侧主内容区域 (黄金阅读流) --- */
.sf-single-main-content {
    flex: 1;                
    min-width: 0;           
    background: transparent; 
    border-radius: 0;        
    box-shadow: none;        
    /* 核心修改：左右增加 60px 留白！
       这样正文的实际宽度会被“挤”到 520px 左右，和首页完全一致 */
    padding: 0 30px; 
}

.sf-single-container {
    background: transparent;
    border-radius: 0;
    padding: 0;          
    box-shadow: none; 
}

/* --- 3. 极左侧悬浮操作岛 (少数派风格) --- */
.sf-single-left-actions {
    width: 60px;             
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;        
    top: 180px;              
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;               
    padding-top: 80px;       
}

.sf-single-left-actions .action-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px; color: #A0A0A0; cursor: pointer; transition: all 0.3s ease;
}
.sf-single-left-actions .icon-wrap {
    width: 36px; height: 36px; border-radius: 50%; background-color: #F4F5F7; 
    display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s ease;
}
.sf-single-left-actions .action-count { font-size: 11px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.sf-single-left-actions .action-item:hover { color: #1d1d1f; }
.sf-single-left-actions .action-item:hover .icon-wrap { background-color: #e2e2e5; color: #1d1d1f; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }

/* --- 4. 极右侧边栏 (高级灰底色) --- */
.sf-single-sidebar {
    width: 240px; /* 完美对齐首页右侧边栏的 240px */
    flex-shrink: 0;          
    position: -webkit-sticky;
    position: sticky;        
    top: 100px;              
    display: flex;
    flex-direction: column;
    gap: 0px;                
    background-color: #F4F5F7; 
    padding: 20px 0px;        
    border-radius: 6px;    
}

.sf-bento-widget {
    background: #F7F7F9;    
    border-radius: 12px;    
    padding: 20px;
    margin: 0 15px 15px 15px; /* 用 margin 把白卡片往里挤出灰色边框 */
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
.sf-bento-widget:hover { transform: translateY(-2px); }

/* --- 5. 少数派风格大头图与沉底标题 --- */
.sf-single-header-sspai { margin-bottom: 40px; }

.sf-single-header-sspai.has-hero .sf-hero-image-wrap {
    position: relative; border-radius: 6px; overflow: hidden; margin-bottom: 20px; 
}
.sf-single-header-sspai.has-hero .sf-single-hero-image { margin-bottom: 0; width: 100%; display: flex; }
.sf-single-header-sspai.has-hero .sf-single-hero-image img {
    margin-bottom: 0; border-radius: 0; max-height: 500px; width: 100%; object-fit: cover; display: block;
}
.sf-single-header-sspai.has-hero .sf-single-title-box {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    background: linear-gradient(to top, rgba(145, 0, 0, 0.85) 0%, rgba(158, 0, 0, 0.3) 60%, transparent 100%);
    padding: 80px 30px 25px 30px; 
}
.sf-single-header-sspai.has-hero .sf-single-title { color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); font-size: 34px; font-weight: 800; line-height: 1.35; margin: 0; letter-spacing: -0.5px; }

.sf-single-category-badge { margin-bottom: 8px; }
.sf-single-header-sspai.has-hero .sf-single-category-badge a {
    display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; text-decoration: none; transition: all 0.3s;
    background-color: rgba(255, 255, 255, 0.2); color: #ffffff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15);
}
.sf-single-header-sspai.has-hero .sf-single-category-badge a:hover { background-color: #D71A1B; border-color: #D71A1B; }

/* ==========================================================
   无图模式下：拉开标题与作者信息的间距
   ========================================================== */
.sf-single-header-sspai.no-hero .sf-single-meta-box {
    margin-top: 24px; /* 如果觉得不够宽敞，可以改成 30px */
}

/* 顺便优化一下标题行高，让多行标题看起来更舒展 */
.sf-single-header-sspai.no-hero .sf-single-title {
    line-height: 1.4;
}

/* 无图模式修正 */
.sf-single-header-sspai.no-hero { padding-top: 0px; }
.sf-single-header-sspai.no-hero .sf-single-title { font-size: 34px; line-height: 1.45; color: #1d1d1f; font-weight: 800; margin: 0 0 20px 0; }
.sf-single-header-sspai.no-hero .sf-single-category-badge a { background-color: rgba(215, 26, 27, 0.08); color: #D71A1B; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-decoration: none;}
.sf-single-header-sspai.no-hero .sf-single-category-badge a:hover { background-color: #D71A1B; color: #ffffff; }

/* --- 6. Meta 数据栏 (带精致红线) --- */
.sf-single-meta-box {
    display: flex; align-items: center; gap: 12px; margin-bottom: 35px; position: relative; padding-bottom: 15px;
}
.sf-single-meta-box::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 2px; background: var(--sf-accent-red);
}
.meta-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #f0f0f0; display: block; }
.meta-info-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.meta-info-text .author-name { font-size: 15px; font-weight: 600; color: #1d1d1f; line-height: 1; }
.meta-info-text .post-date { font-size: 11px; color: #86868b; line-height: 1.5; }

/* --- 7. 正文排版核心 (支持两端对齐) --- */
.sf-single-content {
    font-size: 15px;
    line-height: 1.8;       
    color: #333;
    word-wrap: break-word;
    text-align: justify;
    text-justify: inter-character;
    word-break: break-all;
}
.sf-single-content p { margin-bottom: 1.6em; }
.sf-single-content blockquote {
    background-color: #f7f7f9; padding: 20px 24px; border-radius: 12px; border-left: none !important; margin: 30px 0; color: #555; font-size: 15px;
}
.sf-single-content img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 30px auto; }

/* 底部标签 */
/* ==========================================================================
   文章底部：标签样式优化 (主题红 + 呼吸间距版)
   ========================================================================== */
.sf-single-footer { 
    margin-top: 10px; 
    padding-top: 15px; 
    padding-bottom: 25px; /* 【核心修改】：加大底部留白，拉开与版权声明的距离 */
    border-top: 0px dashed #eee; 
}

.sf-single-tags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 7px; 
}

.sf-single-tags a { 
    display: inline-block; 
    font-size: 11px; 
    font-weight: 500;
    /* 【核心修改】：改为品牌红色背景 */
    color: #FFFFFF !important; 
    background-color: var(--sf-accent-red, #D71A1B); 
    padding: 4px 10px; 
    border-radius: 4px; /* 稍微硬朗一点的圆角，更显高级 */
    line-height: 1 !important; 
    text-decoration: none; 
}

/* 鼠标经过：颜色反转或加深 */
.sf-single-tags a:hover { 
    /* 悬停时变为深色，或者你可以改为更亮的红色 */
    background-color: #1d1d1f; 
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ==========================================================
   8. 山风专属评论区域 (纯白底色 + 线框卡片版)
   ========================================================== */

/* 1. 评论区大底：褪去灰底，融入页面纯白背景 */
.sf-comments-area { 
    background: transparent; 
    border-radius: 0; 
    padding: 0px 30px 0 30px; /* 左右不再需要内边距，完全和正文左对齐 */
    margin-top: 50px; 
    border-top: 0px solid #EFEFEF; /* 用一条极浅的线和正文内容隔开 */
}

.comments-title, .comment-reply-title { 
    font-size: 14px; 
    font-weight: 700; 
    color: #1d1d1f; 
    margin: 0 0 15px 0; 
}

.sf-comment-list { list-style: none; padding: 0; margin: 0; }

/* ==========================================================
   核心魔法 1：顶级评论（每一栋楼）变成带有极淡边框的白卡片
   ========================================================== */
.sf-comment-list > li.comment { 
    background: #FFFFFF; 
    border-radius: 12px; 
    padding: 0px;       
    margin-bottom: 16px; 
    border: 0px solid #F0F2F5; /* 核心修改：用极淡的线框代替灰底的高低差 */
    box-shadow: none; /* 彻底扁平化，去掉阴影 */
}

/* 内部基础排版 */
.sf-comment-body { 
    display: flex; 
    gap: 12px; 
    align-items: flex-start; 
}

/* 头像 */
.sf-comment-avatar { flex-shrink: 0; }
.sf-comment-avatar img { 
    border-radius: 50%; 
    border: 1px solid #EFEFEF; 
    width: 40px; 
    height: 40px;
    background: #fff; 
}

/* 右侧内容容器 */
.sf-comment-content-wrap { 
    flex: 1; 
    min-width: 0; 
    background: transparent; 
    padding: 0; 
    box-shadow: none; 
}

/* 名字和时间上下紧凑堆叠 */
.sf-comment-header { 
    display: flex; 
    flex-direction: column;  
    align-items: flex-start; 
    margin-bottom: 5px; 
    gap: 0px;                
}
.sf-comment-author {
   font-size: 12px; 
    font-weight: 600; 
    color: #1d1d1f; 
    text-decoration: none; 

}
.sf-comment-author a { 
    font-size: 12px; 
    font-weight: 600; 
    color: #1d1d1f; 
    text-decoration: none; 
}
.sf-comment-time a { 
    font-size: 12px; 
    color: #999999; 
    text-decoration: none; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

/* 作者徽章 (如有) */
.bypostauthor > .sf-comment-body .sf-comment-author::after {
    content: "作者";
    display: inline-block;
    font-size: 10px;
    color: #0066FF;
    background: #E5F0FF;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: normal;
}

/* 评论正文 */
.sf-comment-text { 
    font-size: 14px; 
    color: #333333; 
    line-height: 1.6; 
    word-break: break-word; 
    background: transparent; 
    padding: 0; 
    border-radius: 0; 
}
.sf-comment-text p { margin: 0 0 6px 0; } 
.sf-comment-text p:last-child { margin: 0; }

/* 回复按钮：保持在右侧 */
.sf-comment-reply { margin-top: 0px; text-align: right; } 
.sf-comment-reply a { 
    display: inline-flex; 
    align-items: center;
    gap: 4px;
    font-size: 12px; 
    color: #999; 
    font-weight: 500;
    text-decoration: none; 
    transition: color 0.3s ease; 
}
.sf-comment-reply a:hover { color: #111; }


/* ==========================================================
   核心魔法 2：子评论（楼中楼）排版保持不变
   ========================================================== */
.sf-comment-list .children { 
    list-style: none; 
    margin: 6px 0 0 0;  
    padding-left: 50px;  
}

.sf-comment-list .children li.comment { 
    margin-bottom: 0; 
    padding: 12px 0 0 0; 
    background: transparent; 
    border-radius: 0; 
    box-shadow: none;
    border-top: 1px solid #F0F2F5; /* 楼层内部的柔和分割线 */
}

.sf-comment-list .children .sf-comment-avatar img { width: 32px; height: 32px; }
.sf-comment-list .children .children { padding-left: 44px; }


/* ==========================================================
   核心魔法 3：表单区域适应白底环境
   ========================================================== */
.comment-respond {
    background: transparent; 
    border-radius: 0;
    padding: 20px 0 0 0; 
    margin-top: 20px;
}

.sf-comment-form-grid { display: flex; gap: 12px; margin-bottom: 12px; }
.sf-comment-form-grid p { flex: 1; margin: 0; }

/* 核心修改：在白底上，把输入框变成浅灰色以作区分 */
.comment-respond input[type="text"], 
.comment-respond textarea { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 12px 16px;  
    background: #F4F5F7; /* 浅灰色输入框 */
    border: 1px solid transparent; 
    border-radius: 10px; 
    font-size: 14px; 
    outline: none; 
    transition: all 0.3s ease; 
    font-family: inherit; 
    color: #333;
    box-shadow: none; 
}
.comment-respond textarea { resize: vertical; min-height: 100px; }

/* 获取焦点时：变回纯白底色，并亮起品牌红圈 */
.comment-respond input[type="text"]:focus, 
.comment-respond textarea:focus { 
    background: #FFFFFF; 
    border-color: #D71A1B; 
    box-shadow: 0 0 0 3px rgba(215, 26, 27, 0.1); 
}

.comment-form-comment { margin: 0 0 15px 0; }
.form-submit { text-align: right; margin: 0; }
.sf-submit-btn { 
    background: #111; color: #fff; border: none; padding: 10px 30px; font-size: 14px; font-weight: 600; border-radius: 30px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
}
.sf-submit-btn:hover { background: #333; }
.comment-form-cookies-consent, .logged-in-as { display: none; }

/* 手机端适配调整 */
@media (max-width: 768px) {
    .sf-comments-area { padding: 30px 0 0 0; margin-top: 30px; }
    .sf-comment-list > li.comment { padding: 16px; }
    .sf-comment-list .children { padding-left: 20px; } 
    .sf-comment-form-grid { flex-direction: column; gap: 10px; }
}

/* --- 9. 滚动时的强化阴影与毛玻璃隔离层 --- */
body.single .site-header { background-color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-bottom: 1px solid transparent !important; transition: all 0.3s ease !important; }
body.single .site-header.is-scrolled { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important; }

/* ==========================================================
   10. 移动端终极响应式适配
   ========================================================== */
@media (max-width: 1024px) {
    /* 彻底隐藏两边岛屿 */
    .sf-single-left-actions, .sf-single-sidebar { display: none !important; }
    
    .sf-reading-container-with-sidebar, .sf-reading-container-no-sidebar {
        padding: 0 15px !important; display: block !important; max-width: 100% !important; margin-bottom: 40px !important;
    }
    .sf-single-main-content { padding: 0 !important; width: 100% !important; flex: none !important; }
    
    .sf-single-header-sspai.has-hero .sf-hero-image-wrap { border-radius: 8px; }
    .sf-single-header-sspai.has-hero .sf-single-title-box { padding: 40px 15px 15px 15px !important; }
    .sf-single-header-sspai .sf-single-title, .sf-single-header-sspai.no-hero .sf-single-title { font-size: 24px !important; }
    
    .sf-comments-area { padding: 30px 0 0 0 !important; margin-top: 30px; }
    .sf-comment-form-grid { flex-direction: column !important; gap: 12px; }
    .sf-comment-list .children { padding-left: 20px; }
}

/* ==========================================================
   11. 内页大底栏：少数派 (sspai) 宽版布局 (纯白背景版)
   ========================================================== */
.sf-inner-page-footer {
    background-color: #FFFFFF !important; 
    padding: 40px 0 !important;
    border-top: 1px solid #EFEFEF !important; 
    margin-top: 60px !important; /* 距离上方正文留出足够的呼吸空间 */
}

/* 核心容器：宽度对齐头部 */
.footer-flex-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 核心魔法：调用 base.css 中的头部宽度变量，实现上下绝对同宽！ */
    max-width: var(--sf-header-width, 1200px);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 左侧：品牌与社交 --- */
/* --- 左侧：品牌与社交 (极简克制纯圆版) --- */
.footer-left-brand { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

/* 恢复 38px 和纯圆形裁切 */
.footer-logo-img { 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    object-fit: cover; 
    opacity: 0.9;
    transition: opacity 0.3s ease; 
}

/* 鼠标悬停只变亮，绝对不浮动 */
.footer-logo-img:hover {
    opacity: 1; 
}

.footer-logo-placeholder { 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    background-color: var(--sf-accent-red, #D71A1B); 
    color: #fff; 
    font-size: 14px; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.footer-social-icons { 
    display: flex; 
    gap: 20px; 
}

.footer-social-icons a { 
    color: #A0A0A0 !important; 
    font-size: 22px; 
    transition: color 0.3s ease; 
}

/* 社交图标鼠标悬停变深色，无浮动无放大 */
.footer-social-icons a:hover { 
    color: #555 !important; 
}

/* --- 右侧：文字链接与版权 --- */
.footer-right-info { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.footer-nav-links { display: flex; gap: 15px; }
.footer-nav-links a { font-size: 13px; color: #333; text-decoration: none; transition: color 0.2s; }
.footer-nav-links a:hover { color: var(--sf-accent-red, #D71A1B); }
.footer-copyright-text { font-size: 11px; color: #A0A0A0; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.footer-copyright-text a { color: #A0A0A0 !important; text-decoration: none; transition: color 0.3s ease; }
.footer-copyright-text a:hover { color: #777 !important; }
.footer-copyright-text .sep { color: #E0E0E0; }

/* --- 手机端 Footer 居中堆叠适配 --- */
@media (max-width: 900px) {
    .footer-flex-wrap { flex-direction: column; text-align: center; gap: 30px; }
    .footer-left-brand { flex-direction: column; gap: 15px; }
    .footer-right-info { align-items: center; }
    .footer-nav-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
    .footer-copyright-text { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================
   9. 评论区对齐修正 (不对称轨道版)
   ========================================================== */

/* 抵消掉独立容器导致的多余顶部留白 */
.sf-comments-container-wrap .sf-comments-area {
    margin-top: 20px !important; 
}

/* 手机端取消一切偏移，恢复自然堆叠 */
@media (max-width: 1024px) {
    .sf-reading-container-with-sidebar .sf-comments-container-wrap {
        margin-left: 0 !important;
    }
    .sf-article-track {
        flex-direction: column;
        gap: 0 !important;
    }
}

/* ==========================================================
   点赞成功后的状态样式
   ========================================================== */
/* 整体变红 */
.sf-single-left-actions .action-item.sf-like-btn.has-liked {
    color: #D71A1B !important; 
    cursor: default; /* 点过赞后指针变回箭头 */
}

/* 图标底座变成淡红色，里面的图标变深红，并且不再上浮 */
.sf-single-left-actions .action-item.sf-like-btn.has-liked .icon-wrap {
    background-color: rgba(215, 26, 27, 0.1) !important;
    color: #D71A1B !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 点赞时的缩放小动画，增加打击感 */
.sf-single-left-actions .action-item.sf-like-btn:active .icon-wrap {
    transform: scale(0.9) !important;
}

/* ==========================================================
   10. 文章底部：上一篇 / 下一篇 (大箭头 + 斜线黄金分割版)
   ========================================================== */
.sf-post-navigation-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 30px 0;
    border-top: none !important; 
    border-bottom: 1px dashed #EFEFEF !important; /* 仅保留底部的虚线 */
}

/* 两侧容器均分空间，保证中间的斜线永远在绝对中心 */
.sf-post-navigation-v2 .nav-side {
    flex: 1;
    min-width: 0;
    display: flex;
}

/* 当 PHP 检测到下方有“探索更多”时，自动干掉底部的虚线 */
.sf-post-navigation-v2.no-bottom-border {
    border-bottom: none !important;
}

/* 左侧靠左，右侧靠右 */
.sf-post-navigation-v2 .nav-prev { justify-content: flex-start; }
.sf-post-navigation-v2 .nav-next { justify-content: flex-end; text-align: right; }

/* 链接整体布局 */
.sf-post-navigation-v2 .nav-link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    max-width: 100%;
    transition: all 0.3s ease;
}

/* 巨型折角箭头 */
.sf-post-navigation-v2 .nav-icon {
    font-size: 32px;        /* 巨型尺寸 */
    color: #E0E0E0;         /* 默认是安静的浅灰色 */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
}

/* 文字信息块 */
.sf-post-navigation-v2 .nav-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sf-post-navigation-v2 .nav-label {
    font-size: 12px;
    color: #A0A0A0;
    letter-spacing: 1px;
}

.sf-post-navigation-v2 .nav-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    /* 改为单行省略，让大排版看起来像刀切一样利落 */
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

/* ==========================================================
   中间的霸气斜线 (纯 CSS 绘制的轻盈符号)
   ========================================================== */
.sf-post-navigation-v2 .nav-divider {
    font-size: 40px;
    font-weight: 200;
    color: #EFEFEF;
    font-style: italic;
    padding: 0 30px;
    flex-shrink: 0;
    user-select: none; /* 防止被鼠标选中 */
}

/* ==========================================================
   高级鼠标悬停交互
   ========================================================== */
/* 悬停时：箭头变红并微动，标题变红 */
.sf-post-navigation-v2 .nav-link:hover .nav-title {
    color: #D71A1B;
}
.sf-post-navigation-v2 .nav-link:hover .nav-icon {
    color: #D71A1B;
}
.sf-post-navigation-v2 .nav-prev .nav-link:hover .nav-icon {
    transform: translateX(-4px) scale(1.1); /* 左箭头向左冲 */
}
.sf-post-navigation-v2 .nav-next .nav-link:hover .nav-icon {
    transform: translateX(4px) scale(1.1);  /* 右箭头向右冲 */
}


/* ==========================================================
   手机端适配：去掉斜线，改为上下结构
   ========================================================== */
@media (max-width: 768px) {
    .sf-post-navigation-v2 {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }
    .sf-post-navigation-v2 .nav-divider {
        display: none; /* 手机端屏幕太小，隐藏斜线 */
    }
    .sf-post-navigation-v2 .nav-side, 
    .sf-post-navigation-v2 .nav-link {
        width: 100%;
    }
    .sf-post-navigation-v2 .nav-prev {
        justify-content: flex-start;
        border-bottom: 1px solid #F4F5F7;
        padding-bottom: 15px;
    }
    .sf-post-navigation-v2 .nav-next {
        justify-content: flex-start;
        text-align: left;
    }
    /* 手机端让下一篇的箭头放在最右边，文字在左边，形成对比 */
    .sf-post-navigation-v2 .nav-next .nav-link {
        justify-content: space-between;
    }
    .sf-post-navigation-v2 .nav-next .nav-link .nav-text {
        align-items: flex-start;
    }
    .sf-post-navigation-v2 .nav-icon {
        font-size: 24px; /* 手机端箭头稍微缩小 */
    }
    .sf-post-navigation-v2 .nav-title {
        -webkit-line-clamp: 2; /* 手机端恢复两行显示 */
    }
}
/* ==========================================================
   11. 文章底部：探索更多 (整体灰底 + 紧凑小白卡 + 无浮动)
   ========================================================== */
.sf-explore-more {
    margin: 20px 0px 20px 0px; 
    padding: 20px;          /* 给整个区块加上内边距 */
    background: #F4F5F7;    /* 核心修改：整体铺上极浅的灰色底 */
    border-radius: 6px;    /* 整体圆角 */
}

.explore-title {
    font-size: 14px;        /* 标题字号缩小 */
    font-weight: 600;
    color: #888888;         /* 标题颜色调淡，更像副标题的辅助感 */
    margin: 0 0 16px 0;
    letter-spacing: 1px;
    /* 彻底去掉了之前的 ::before 红色竖线代码 */
}

/* 一行三列的网格布局 */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;              /* 卡片之间的间距稍微收紧 */
}

/* 独立图文卡片 */
.explore-card {
    display: flex;
    flex-direction: column;
    background: none;    /* 核心修改：在灰底上，卡片变成纯白，形成精致对比 */
    border-radius: 6px;     /* 卡片变小，圆角也跟着收敛一点 */
    overflow: hidden;
    text-decoration: none;
    border: 0px solid #EAEAEA; /* 加一层极淡的线框包裹 */
    transition: all 0.3s ease;
    /* 彻底去掉了 hover 时的 translateY 浮动和 box-shadow 阴影 */
}

/* 图片容器 */
.explore-thumb {
    width: 100%;
    height: 90px;           /* 核心修改：图片高度大幅缩小，卡片整体变矮 */
    overflow: hidden;
    position: relative;
    background: #EFEFEF;
}

.explore-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* 无图时的占位设计 */
.no-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #DFDFE1;
    background: #F0F2F5;
}

/* 文字信息区 */
.explore-info {
    padding: 10px 0px;     /* 核心修改：内边距全面收紧 */
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.explore-post-title {
    margin: 0;
    font-size: 13px;        /* 核心修改：文字变小，更加紧凑 */
    font-weight: 500;
    line-height: 1.5;
    color: #333333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

/* 鼠标悬停动效：不浮动，仅仅是文字变红，图片微微放大增加交互感 */
.explore-card:hover .explore-thumb img {
    transform: scale(1.05); /* 如果连图片放大也不想要，可以把这三行删掉 */
}
.explore-card:hover .explore-post-title {
    color: #D71A1B;
}

/* ==========================================================
   手机端适配：改为一行两个的极小卡片
   ========================================================== */
@media (max-width: 768px) {
    .sf-explore-more {
        padding: 16px;
    }
    .explore-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px;
    }
    .explore-thumb {
        height: 80px; /* 手机端图片进一步缩小 */
    }
    .explore-info {
        padding: 8px 10px;
    }
    .explore-post-title {
        font-size: 12px;
    }
    .explore-card:nth-child(3) {
        display: none; /* 隐藏第三个 */
    }
}

/* ==========================================================
   12. 文章底部：版权声明 (右上角水印图标版)
   ========================================================== */
.sf-copyright-notice {
    position: relative;      /* 核心：为绝对定位的水印提供参考基准 */
    overflow: hidden;        /* 核心：切掉超出版权框外面的多余图标边角 */
    margin-top: 0px;        
    margin-bottom: 0px;     
    padding: 15px 15px;      /* 稍微加大一点内边距，让文字更有呼吸感 */
    background: #F9F9FA;     
    border-radius: 6px;
    border: 0px solid #EFEFEF;
    transition: background 0.3s ease;
}

.sf-copyright-notice:hover {
    background: #F4F5F7;
}

/* 魔法变身：将图标变成右上角的倾斜虚化水印 */
.copyright-icon {
    position: absolute;
    top: -30px;              /* 向上偏移一点 */
    right: -15px;            /* 向右偏移一点 */
    font-size: 130px;        /* 巨型尺寸 */
    color: #000000;          
    opacity: 0.03;           /* 极其虚化（透明度仅3%），若隐若现最高级 */
    transform: rotate(-15deg); /* 微微向左倾斜 */
    pointer-events: none;    /* 核心：让鼠标穿透图标，绝对不会妨碍用户复制文字 */
    z-index: 0;              /* 沉入底层 */
}

/* 文字区块提升层级 */
.copyright-text {
    position: relative;
    z-index: 1;              /* 确保文字悬浮在水印上方 */
    font-size: 12px;
    color: #666666;          
    line-height: 1.7;
}

/* --- 下面是我们之前调好的完美排版，保持不变 --- */
.copyright-text p {
    margin: 0;
    display: flex;           
    align-items: flex-start; 
}

.copyright-text strong {
    color: #333333;
    font-weight: 600;
    flex-shrink: 0;          
    white-space: nowrap;     
}

.copyright-text span {
    flex: 1;                 
    min-width: 0;            
}

.copyright-text a {
    color: #666666;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: all 0.3s ease;
}
.copyright-text a:hover {
    color: #D71A1B;
    border-bottom-color: #D71A1B;
}
/* ==========================================================
   手机端适配：防止链接过长撑破屏幕
   ========================================================== */
@media (max-width: 768px) {
    .sf-copyright-notice {
        padding: 14px 16px;
        gap: 12px;
    }
    .copyright-icon {
        font-size: 16px;
    }
    .copyright-text {
        font-size: 12px;
        word-break: break-all; /* 核心：手机端强制换行，防止长链接破坏排版 */
    }
}

/* ==========================================================
   修复：左侧悬浮岛移出主内容区，实现全局完美左对齐
   ========================================================== */
.sf-left-actions-wrapper {
    position: absolute;
    right: 100%;         /* 核心魔法：100%靠右，刚好把它完全挤出主内容区的左边缘 */
    top: 0;
    bottom: 0;           /* 跟随文章区域的完整高度，确保内部的 sticky 吸顶能一直滑到底 */
    padding-right: 30px; /* 控制图标距离正文的间距 */
    pointer-events: none;/* 透明外壳，防止遮挡鼠标点击底层的空白处 */
    z-index: 10;
}

.sf-single-left-actions {
    position: sticky;
    top: 100px;
    pointer-events: auto; /* 恢复内部图标的点击能力 */
}

/* ==========================================================
   响应式安全兜底：屏幕较窄时放回原处
   ========================================================== */
@media (max-width: 1200px) {
    .sf-left-actions-wrapper {
        position: static;     /* 屏幕变窄时，取消绝对定位，让它乖乖回到 Flex 盒子里 */
        padding-right: 0;
        pointer-events: auto;
    }
}

/* ==========================================================================
   文章正文 (Single Post) 列表排版优化 (已修正类名为 sf-single-content)
   ========================================================================== */

/* 1. 列表基础重置与外边距 */
.sf-single-content ul,
.sf-single-content ol {
    margin: 0 0 24px 0 !important; /* 增加 !important 确保覆盖浏览器的默认样式 */
    padding-left: 0 !important;   
    color: var(--sf-text-main);
}

/* 2. 列表项通用行高与间距 */
.sf-single-content li {
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 14px;
}
.sf-single-content li:last-child {
    margin-bottom: 0;
}

/* ==========================================
   无序列表 (ul) - 极简红点风格
   ========================================== */
.sf-single-content ul {
    list-style: none !important; /* 杀掉自带的丑陋黑圆点 */
}

.sf-single-content ul > li {
    position: relative;
    padding-left: 22px; 
}

/* 核心魔法：用 CSS 画一个精致的主题色小圆点 */
.sf-single-content ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.65em; 
    width: 6px;
    height: 6px;
    background-color: var(--sf-accent-red, #D71A1B); 
    border-radius: 50%;
}

/* ==========================================
   有序列表 (ol) - 现代加粗数字风格
   ========================================== */
.sf-single-content ol {
    list-style: none !important; /* 杀掉自带的数字 */
    counter-reset: sf-counter; 
}

.sf-single-content ol > li {
    position: relative;
    padding-left: 28px; 
}

/* 核心魔法：接管数字渲染，加粗并改变颜色 */
.sf-single-content ol > li::before {
    counter-increment: sf-counter;
    content: counter(sf-counter) "."; 
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--sf-font-display);
    font-weight: 700; 
    color: var(--sf-accent-red, #D71A1B); 
    font-size: 15px;
}

/* ==========================================
   处理列表嵌套 (列表里面套列表)
   ========================================== */
.sf-single-content ul ul,
.sf-single-content ol ol,
.sf-single-content ul ol,
.sf-single-content ol ul {
    margin-top: 12px;
    margin-bottom: 0 !important;
    padding-left: 20px !important; 
}

/* 嵌套的无序列表，圆点变成空心圈，以示区分 */
.sf-single-content ul ul > li::before {
    background-color: transparent;
    border: 2px solid var(--sf-accent-red, #D71A1B);
    width: 5px;
    height: 5px;
}

/* ==========================================================================
   修复：消除 WordPress 列表项 (li) 内部自带的多余行高与间距
   ========================================================================== */
.sf-single-content li {
    margin-bottom: 5px !important; /* 强制收紧列表项之间的安全距离 */
}

/* 核心杀招：直接干掉 li 里面自动生成的 p 标签间距，并化解块级撑开的高度 */
.sf-single-content li p {
    margin-bottom: 0 !important; 
    margin-top: 0 !important;
    display: inline; /* 强制将段落转为内联元素，彻底消灭上下残留的空白区 */
}

/* ==========================================================================
   文章隐藏内容 (回复可见) UI 样式 - 高级水印版
   ========================================================================== */

/* 1. 未解锁状态：红色虚线提示框 */
.sf-hidden-locked {
    position: relative;         /* 为水印图标提供参考基准 */
    overflow: hidden;           /* 切掉超出的巨型图标边缘 */
    background-color: #FDF9F9; 
    border: 0.8px dashed var(--sf-accent-red, #D71A1B);
    border-radius: 6px;
    padding: 40px 20px;         /* 稍微加大垂直内边距，更有空间感 */
    text-align: center;
    margin: 30px 0;
}

/* 核心魔法：左上角倾斜放大虚化水印 */
.sf-hidden-locked i {
    position: absolute;
    top: -20px;                /* 往左上角偏移 */
    left: -10px;
    font-size: 110px;          /* 巨型尺寸 */
    color: var(--sf-accent-red, #D71A1B);
    opacity: 0.05;             /* 极度虚化，仅 5% 透明度 */
    transform: rotate(-15deg); /* 微微向左倾斜 */
    pointer-events: none;      /* 确保鼠标能穿透图标点击下方的链接 */
    display: block;            /* 覆盖原本样式中的 display 设置 */
    margin-bottom: 0;          /* 消除原本的边距 */
}

.sf-hidden-locked p {
    position: relative;        /* 确保文字层级在水印上方 */
    z-index: 1;
    font-size: 14px !important;
    color: #666666;
    margin: 0 !important;
}

.sf-hidden-locked a {
    color: var(--sf-accent-red, #D71A1B);
    font-weight: 600;
    margin: 0 4px;
    border-bottom: 1px solid var(--sf-accent-red, #D71A1B);
}

/* 2. 已解锁状态：浅绿色阅读框 */
.sf-hidden-unlocked {
    background-color: #F6FCF8; 
    border: 1px solid #E2F0E7;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
}

.sf-hidden-unlocked-title {
    font-size: 13px;
    color: #00B96B; 
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.sf-hidden-content {
    color: var(--sf-text-main);
}

/* 清除隐藏内容里最后一行的多余间距 */
.sf-hidden-content p:last-child {
    margin-bottom: 0 !important;
}