/* 模型页面专用样式，定义全局布局和内容样式 */

/* 限制内容区最大宽度，居中，添加内边距 */
.model-section-custom {
    background: transparent; /* 卡片区背景透明，继承 body 渐变 */
    /*background: rgba(0, 255, 0, 0); !* 卡片半透明白色背景，透明度降低以突出渐变 *!*/
    /*max-width: 800px; !* 最大宽度800px，适配宽屏 *!*/
    /*margin: auto; !* 水平居中 *!*/
    padding: 1em 0; /* 内边距1em，增加内容间距 */
    font-size: 1.1em; /* 全局字体放大，增强可读性 */
}

.model-card-custom {
    background: transparent; /* 卡片区背景透明，继承 body 渐变 */
    /*background: rgba(255, 255, 0, 0.5); !* 卡片半透明白色背景，透明度降低以突出渐变 *!*/
    border-radius: 10px; /* 圆角，参考 index.html 的 rounded-lg */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 1); /* 阴影，增加立体感 */
    /*margin: auto;*/
    /*transition: all 0.3s ease; !* 动画过渡，平滑交互 *!*/
    /*min-height: 180px; !* 推荐：设置最小高度，如 200px，适配内容 *!*/
    padding: 2em; /* 内边距1em，内容不贴边 */
}

/* 内容 一层 半透明容器框，包裹每个标题的内容 */
.content-container {
    background: transparent; /* 卡片区背景透明，继承 body 渐变 */
    /*background: rgba(0, 255, 255, 1); !* 半透明黑色背景，适配深色主题 *!*/
    border-radius: 8px; /* 圆角8px，增加美感 */
    padding-top: 0em; /* 内边距1em，内容不贴边 */
    /*padding-right: 5em; !* 内边距1em，内容不贴边 *!*/
    /*margin: 0em auto; !* 上下边距0.5em，水平居中 *!*/
    margin: auto; /* 水平居中 */
    margin-top: 0em;
    margin-bottom: 3em;
    width: 100%; /* 最大宽度90%，适配容器 */
    max-width: 100%; /* 最大宽度90%，适配容器 */
    display: block; /* 块级元素，确保独占一行 */
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.3); /* 轻微阴影，增加立体感 */
}

/* 内容二层 容器 */
.content-container-text {
    background: transparent; /* 卡片区背景透明，继承 body 渐变 */
    /*background: rgba(255, 0, 0, 0.5); !* 半透明黑色背景，适配深色主题 *!*/
    border-radius: 8px; /* 圆角8px，增加美感 */
    /*padding: 1em; !* 内边距1em，内容不贴边 *!*/
    /*padding-left: 5em; !* 内边距1em，内容不贴边 *!*/
    /*padding-right: 5em; !* 内边距1em，内容不贴边 *!*/
    margin: 0em auto; /* 上下边距0.5em，水平居中 */
    /*width: 100%; !* 最大宽度90%，适配容器 *!*/
    width: fit-content;
    max-width: 80%; /* 最大宽度90%，适配容器 */
    display: block; /* 块级元素，确保独占一行 */
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); !* 轻微阴影，增加立体感 *!*/

/*
    background: rgba(255, 0, 0, 0.5); !* 半透明红色背景，用于调试 *!
    border-radius: 8px; !* 圆角8px，增加美感 *!
    padding: 1em; !* 内边距1em，内容不贴边 *!
    margin: 0.5em auto; !* 上下边距0.5em，水平居中 *!
    width: fit-content; !* 宽度自适应内容 *!
    max-width: 80%; !* 最大宽度为父容器的80% *!
    display: inline-block; !* 配合 width: fit-content，确保宽度随内容变化 *!
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); !* 轻微阴影，增加立体感 *!
    */
}

/* 主标题样式，居中显示 */
.model-title {
    text-align: center; /* 居中对齐 */
    font-size: 2.2rem; /* 字体大小2.2rem，突出标题 */
    font-weight: bold; /* 加粗，增强视觉效果 */
    margin-bottom: 1.5rem; /* 下边距1.5rem，分离标题和内容 */
}

/* 章节标题样式，居中显示 */
.section-title {
    text-align: center; /* 居中对齐 */
    font-size: 2rem; /* 字体大小1.4rem，适中 */
    font-weight: bold; /* 加粗，突出章节 */
    margin-top: 1rem; /* 上边距2rem，增加间距 */
    margin-bottom: 1rem; /* 下边距1rem，分隔内容 */
}



 /*左对齐文本样式，用于 overview、concepts、example*/
.card-text {
    font-size: 1.2em; /* 字体大小1.1em，适中 */
    line-height: 1.6; /* 行高1.6，优化阅读 */
    /*white-space: pre-wrap; !* 保留全角空格和换行 如果没有这个，就不会换行，就是一行显示，但是有这个，首行有 会多个空各？*!*/
    /*text-indent: 2em; !* 首行缩进两格，符合中文排版 *!*/
    /*text-align: left !important;*/
    text-align: left;

    /*flex: 1; !* 描述占满剩余空间 *!*/
    /*text-align: left; !* 左对齐 *!*/


}
/*模型概述内容 首行空格*/
.section-card-text {
    font-size: 1.5em; /* 字体大小1.1em，适中 */
    text-indent: 2em; /* 首行缩进 2em */
    text-align: left; /* 左对齐 */
}

 /*左对齐文本样式，用于 overview、concepts、example*/
.section-custom .card-text {
    /*font-size: 1.1em; !* 字体大小1.1em，适中 *!*/
    /*!*line-height: 1.6; !* 行高1.6，优化阅读 *!*!*/
    /*white-space: pre-wrap; !* 保留全角空格和换行，确保 JSON 中的空格和换行显示 *!*/
    /*text-indent: 0em; !* 首行缩进两格，符合中文排版 *!*/
    /*text-align: left !important; !* 强制左对齐，覆盖可能的 Bootstrap 样式 *!*/

     flex: 1; /* 描述占满剩余空间 */
     text-align: left; /* 左对齐 */
}


 /*居中文本样式，用于 mechanism、advantages*/
.section-custom .card-body .centered-text {
    text-align: center !important; /* 强制居中，覆盖Bootstrap */
    font-size: 1.1em; /* 字体大小1.1em，保持一致 */
    line-height: 1.6; /* 行高1.6，优化阅读 */
    text-indent: 0; /* 取消首行缩进 */
    margin: 0 auto; /* 水平居中 */
    width: 100%; /* 全宽，填充容器 */
    display: block; /* 块级元素，确保独占一行 */
    /*white-space: pre-wrap; !* 保留换行和空格 *!*/
}

/* 公式说明样式，用于 formulas 的 description */
.section-custom .card-body .formula-description {
    text-align: center !important; /* 强制居中，覆盖Bootstrap */
    font-size: 1.1em; /* 字体大小1.1em，保持一致 */
    line-height: 1; /* 行高1.6，优化阅读 */
    margin: 0em auto; /* 上下边距0.5em，水平居中 */
    text-indent: 0; /* 取消首行缩进 */
    width: 100%; /* 全宽，填充容器 */
    display: block; /* 块级元素，确保独占一行 */
    white-space: pre-wrap; /* 保留换行和空格 */
}

/* MathJax 公式样式，居中显示 */
.mathjax {
    text-align: center; /* 居中对齐 */
    display: block; /* 块级元素，独占一行 */
    font-size: 1.2em; /* 公式字体放大，突出显示 */
    margin: 1em 0; /* 上下边距1em，增加间距 */
    text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.3); /* 轻微阴影，模拟加粗 */
}

/* 表格容器样式，响应式 */
.table-responsive {
    font-size: 1.3em; /* 表格字体放大 */
    /*color: #ffffff !important; !* 强制字体颜色为白色，覆盖Bootstrap *!*/
}

/* 表格单元格内边距、边框颜色和文字居中 */
.table-responsive th,
.table-responsive td {
    padding: 0.75em; /* 内边距0.75em，优化布局 */
    border: 1px solid #ffffff; /* 边框颜色为白色 */
    color: #ffffff !important; /* 强制单元格文字颜色为白色 */
    text-align: center; /* 文字居中 */
}

/* 动画容器样式 */
.animation-container {
    max-width: 100%; /* 全宽，适配容器 */
    margin: 1em 0; /* 上下边距1em，增加间距 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 响应式样式，适配小屏幕（<768px） */
@media (max-width: 768px) {
    .section-custom {
        font-size: 1em; /* 移动端字体缩小 */
    }
    .model-title {
        font-size: 1.8rem; /* 移动端主标题缩小 */
    }
    .section-title {
        font-size: 1.2rem; /* 移动端章节标题缩小 */
    }
    .content-container {
        max-width: 95%; /* 移动端容器稍宽 */
        padding: 0.8em; /* 内边距稍减 */
    }
    /*.card-text, .section-custom .card-body .centered-text, .section-custom .card-body .formula-description {*/
        /*font-size: 1em; !* 移动端正文、机制、优势、公式说明缩小 *!*/
    /*}*/
    .mathjax {
        font-size: 1em; /* 移动端公式缩小 */
        text-shadow: 0.3px 0.3px 0.3px rgba(0, 0, 0, 0.3); /* 移动端阴影减弱 */
    }
    .table-responsive {
        font-size: 0.9em; /* 移动端表格字体缩小 */
    }
    .table-responsive th,
    .table-responsive td {
        padding: 0.5em; /* 移动端表格内边距减小 */
    }
    .animation-container iframe {
        height: 300px; /* 移动端 iframe 高度 */
    }
}