/* ============================================================
   文章详情页（案例 / 资讯共用）
   左侧正文 850px + 右侧目录 240px，整体 1200 居中
   ============================================================ */
.detail-layout{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
    box-sizing: border-box;
}
/* 无目录时（正文没有可提取的小节标题）正文回到居中 */
.detail-layout.no-toc{
    justify-content: center;
}

/* .fh-width 是站点通用容器（width:auto + margin:0 auto），
   在 flex 行里 margin:auto 会抢走剩余空间把正文推到中间，这里必须清掉。 */
.detail-layout .fh-width{
    margin: 0;
    width: 850px;
    max-width: 100%;
    min-width: 0;
}
/* 长标题自然换行，避免固定 30px 高度挤到发布时间与正文。 */
.detail-layout .detail-title{
    height: auto;
    line-height: 1.5;
    margin: 0 0 24px;
}

/* ---------- 右侧目录 ---------- */
.detail-toc{
    width: 240px;
    flex-shrink: 0;
    margin-left: 40px;
    position: -webkit-sticky;
    position: sticky;
    top: 130px; /* 顶部导航 fixed 90px，再留 40px 呼吸 */
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overflow-x: hidden;
    /* 与正文标题的第一行视觉齐平 */
    padding-top: 6px;
}
.detail-toc-list{
    margin: 0;
    padding: 2px 0 24px;
    list-style: none;
    border-left: 1px solid #e6e9ef;
}
.detail-toc-list li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.detail-toc-list li a{
    display: block;
    position: relative;
    margin-bottom: 18px;
    padding: 0 0 0 20px;
    font-size: 15px;
    line-height: 26px;
    color: #5b6273;
    text-decoration: none;
    transition: color .2s;
}
.detail-toc-list li:last-child a{
    margin-bottom: 0;
}
.detail-toc-list li a:hover{
    color: #2d8bff;
    text-decoration: none;
}
.detail-toc-list li.active a{
    color: #2d8bff;
    font-weight: bold;
}
/* 当前章节的左侧蓝色标记，覆盖整行（长标题换行也跟着拉长） */
.detail-toc-list li.active a::before{
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #2d8bff;
}

/* 正文小节标题：跳转时避开固定导航条 */
.detail-content h1[id],
.detail-content h2[id],
.detail-content h3[id],
.detail-content h4[id],
.detail-content p[id]{
    scroll-margin-top: 116px;
}
#article-top,
#relatedCase{
    scroll-margin-top: 116px;
}

/* 正文里被识别为小节标题的段落（富文本里用小节标题常写成加粗独立段落，
   不是 h 标签），给它一点上间距，跳转落点不至于贴住上一段。 */
.detail-content p.article-section{
    margin-top: 8px;
}

@media (max-width: 1240px){
    /* 目录隐藏后只剩正文一列，居中摆放，避免内容贴左侧留一大片空白 */
    .detail-layout{
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
        justify-content: center;
    }
    .detail-toc{
        display: none;
    }
}