/* =========================================
   全局重置
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
    color: #000;
    /* 防止因浏览器计算误差出现横向滚动条 */
    overflow-x: hidden; 
}

.page-wrapper {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #fff;
}

/* =========================================
   1. Header
   ========================================= */
.site-header {
    width: 100%;
    position: relative;
    z-index: 1; /*以此为基准*/
}

.header-img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   2. Content 容器 (Flex 方案解决边框问题)
   ========================================= */
.main-content {
    width: 100%;
     margin: 0 auto; /* 居中 */
    /* 背景图设定 */
    background-image: url('../img/background.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    max-width: 1920px;
    position: relative;
    z-index: 2; /* 必须比 header 高 */
    
    /* 【核心修复】
       使用 Flex 布局代替透明边框法。
       这能完美隔离子元素的负 Margin，不再需要 border-top: 1px，
       也就不会有那条讨厌的线了。
    */
    display: flex;
    flex-direction: column;
 align-items: center;
font-family: "KaiTi", "楷体";
   overflow: visible;
   letter-spacing: 0.5em;
   color: #000;
}

/* =========================================
   3. 文章框
   ========================================= */
.article-box {
    margin-left: auto;
    margin-right: auto;
    
    /* 负边距实现上移：175 / 1920 = 9.11% */
    margin-top: -9.11%; 
    
    /* 自身样式 */
    width: 68.85%;
    
    /* 【严格遵循您的代码参数】 */
    padding: 0 5%;       /* 您修改后的左右边距 */
    padding-bottom: 10%; /* 您修改后的底部边距 */
    position: relative;
    z-index: 10;
    
}

.text-content {
    padding-top: 6.7%;
    
    /* 【核心适配】字号缩放逻辑 
       您要求的 25px 在 1920px 宽度的比例是：25 / 1920 = 1.302%
       使用 vw 单位，确保屏幕变窄时，字号、换行位置、行数永远保持不变。
    */
    font-size: 1.354vw; 
    
    /* 【严格遵循您的代码参数】 */
    line-height: 1.5;
    color: #000;
    text-align: justify;
}

.text-content p {
    text-indent: 2em;
    /* 虽然您代码里注释了 margin-bottom，但因为顶部有 * { margin: 0 }，
       如果不加这行，段落会粘在一起。我建议恢复并设为 1.5em（与行高一致），
       这样也会随 vw 字号自动缩放。
    */
    margin-bottom: 1.2em; 
}
/* 2. 特殊处理：第一段称呼 (覆盖上面的设置) */
.text-content .salutation {
    text-indent: 0;       /* 取消缩进 */
    text-align: left;     /* 强制左对齐 */
    
    /* 如果觉得称呼和正文之间空太大了，可以单独调小这个 margin-bottom */
    margin-bottom: 1.2em; 
}

/* =========================================
   落款部分 (PC端最终修正版)
   ========================================= */
.signature-section {
    display: flex;
    /* 垂直居中：让左边的“职务”和右边的“签名组”水平线居中对齐 */
    align-items: center; 
    
    /* 【核心】主轴右对齐：把所有内容推到文章框的最右边缘 */
    justify-content: flex-end; 
    
    /* 宽度撑满，这样才能对齐到最右边 */
    width: 100%;
    
    /* 职务和签名组之间的距离 */
    gap: 2vw; 
    
    margin-top: 4vw;
}

/* 左侧：职务文字 */
.sig-text {
    font-size: 1.354vw; /* 约等于 26px */
    color: #000;
    white-space: nowrap;
    /* 职务文字不需要右对齐，它在签名组的左边 */
}

/* 右侧：组合容器（包含图片+日期） */
.sig-group {
    display: flex;
    /* 【核心】垂直排列：强制让日期换行，跑到图片下面！ */
    flex-direction: column; 
    
    /* 【核心】侧轴右对齐：让日期文字对齐图片的右边缘 */
    align-items: flex-end;  
}

/* 签名图片 */
.sig-image {
    width: 11.98vw; /* 约等于 230px */
    height: auto;
    display: block;
}

/* 日期文字 */
.sig-date {
    font-size: 1.354vw;
    color: #000;
    
    /* 离上面图片的距离 */
    margin-top: 2vw; 
    
    /* 强制右对齐 */
    text-align: right;
    white-space: nowrap;
    
}

/* =========================================
   4. Footer
   ========================================= */
.site-footer {
    width: 100%;
    /* 【核心修改】高度固定200px，对应你背景图底部的高度 */
    height: 200px; 
    
    /* 背景透明，透出 main-wrapper 的背景图 */
    background-color: transparent; 
    
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中版权文字 */
    
    /* 如果文字需要沉底，可以改成 align-items: flex-end; padding-bottom: 50px; */
}

.copyright {
    font-size: 1.354vw;
    
    text-align: center;
}