/* 详情页主体容器 */
.main-body { background-color: #ffffff; padding: 1.5rem 16px; }

/* 文章头部 */
.article-header { margin-bottom: 1.5rem; }
.article-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: #111827; margin: 0 0 1rem 0; }
.article-meta-info { display: flex; flex-wrap: wrap; align-items: center; font-size: 0.75rem; color: #9ca3af; gap: 1rem; }

/* 文章正文 */
.article-content { color: #374151; }
.article-content p { margin-bottom: 0; line-height: 1.8; text-align: justify; margin-top: 0; }
.article-content p.font-medium { font-weight: 500; }
.article-content h2 { font-weight: 700; color: #e63946; margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; }
.article-content video{width: 100%;}
/* 配图 */
.article-figure { margin: 1.5rem 0; }
.article-img { width: 100%; border-radius: 0.5rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: block; }
.article-figcaption { text-align: center; font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; }

/* 互动栏 */
.interaction-bar {position: relative; display: flex; justify-content: center; align-items: center; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; margin: 2rem 0; }
.interaction-btn { background: none; border: none; display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 0; }
.interaction-icon-box { padding: 0.75rem; border-radius: 9999px; background-color: #f9fafb; transition: background-color 0.2s; color: #9ca3af; }
.interaction-icon-box .iconfont{font-size:20px;}
.interaction-label { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }
.interaction-btn.on .iconfont{color: red;}

.like-animation {
    position: absolute;
    color: red;
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
    z-index: 100;
    animation: likeUp 0.8s ease-out forwards
}

@keyframes likeUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }

    100% {
        opacity: 0;
        transform: translateY(-50px) scale(1.2)
    }
}