/* 详情页面通用装饰样式 */
/* 用于新闻详情、研究会简介、研究会章程、组织结构等所有详情页面 */

/* 渐变背景和装饰边框包装器 */
.detail-body-wrapper,
.news-detail-body-wrapper,
.content-body-wrapper {
    position: relative;
    padding-left: 4px;
    padding-right: 4px;
}

/* 主内容区域 - 渐变背景 */
.detail-body,
.news-detail-body,
.content-body {
    font-size: 17px;
    line-height: 1.9;
    color: #1f2933;
    position: relative;
    padding: 40px;
    border-radius: 20px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(240, 247, 255, 1) 25%,
        rgba(255, 244, 235, 1) 50%,
        rgba(240, 249, 255, 1) 75%,
        rgba(255, 255, 255, 1) 100%);
    box-shadow: inset 0 0 30px rgba(26, 84, 144, 0.05);
}

/* 上装饰条 */
.detail-body::before,
.news-detail-body::before,
.content-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        rgba(26, 84, 144, 0.35) 0%, 
        rgba(46, 139, 192, 0.3) 25%,
        rgba(52, 168, 183, 0.25) 50%,
        rgba(16, 185, 129, 0.3) 75%,
        rgba(26, 84, 144, 0.35) 100%);
    border-radius: 20px 20px 0 0;
    animation: shimmer 12s linear infinite;
    background-size: 200% 100%;
}

/* 下装饰条 */
.detail-body::after,
.news-detail-body::after,
.content-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(270deg, 
        rgba(26, 84, 144, 0.35) 0%, 
        rgba(46, 139, 192, 0.3) 25%,
        rgba(52, 168, 183, 0.25) 50%,
        rgba(16, 185, 129, 0.3) 75%,
        rgba(26, 84, 144, 0.35) 100%);
    border-radius: 0 0 20px 20px;
    animation: shimmer 12s linear infinite reverse;
    background-size: 200% 100%;
}

/* 左装饰条 */
.detail-body-wrapper::before,
.news-detail-body-wrapper::before,
.content-body-wrapper::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, 
        rgba(26, 84, 144, 0.35) 0%, 
        rgba(46, 139, 192, 0.3) 25%,
        rgba(52, 168, 183, 0.25) 50%,
        rgba(16, 185, 129, 0.3) 75%,
        rgba(26, 84, 144, 0.35) 100%);
    border-radius: 0;
    animation: shimmerVertical 12s linear infinite;
    background-size: 100% 200%;
}

/* 右装饰条 */
.detail-body-wrapper::after,
.news-detail-body-wrapper::after,
.content-body-wrapper::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 0;
    width: 4px;
    background: linear-gradient(0deg, 
        rgba(26, 84, 144, 0.35) 0%, 
        rgba(46, 139, 192, 0.3) 25%,
        rgba(52, 168, 183, 0.25) 50%,
        rgba(16, 185, 129, 0.3) 75%,
        rgba(26, 84, 144, 0.35) 100%);
    border-radius: 0;
    animation: shimmerVertical 12s linear infinite reverse;
    background-size: 100% 200%;
}

/* 动画定义 */
@keyframes shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

@keyframes shimmerVertical {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .detail-body,
    .news-detail-body,
    .content-body {
        padding: 32px 24px;
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    .detail-body,
    .news-detail-body,
    .content-body {
        padding: 24px 20px;
        font-size: 15px;
    }
}

/* 让 Quill 的对齐（ql-align-*）对图片也生效（全局 img 为 display:block 时需要） */
.detail-body .ql-align-center img,
.news-detail-body .ql-align-center img,
.content-body .ql-align-center img {
    margin-left: auto;
    margin-right: auto;
}

.detail-body .ql-align-right img,
.news-detail-body .ql-align-right img,
.content-body .ql-align-right img {
    margin-left: auto;
    margin-right: 0;
}