/* -------------------------- 一、全局样式初始化 -------------------------- */
/* 清除默认边距、内边距，统一盒模型 */
* {
    margin: 0; /* 清除元素外部边距 */
    padding: 0; /* 清除元素内部边距 */
    box-sizing: border-box; /* 使内边距和边框不影响元素实际宽度 */
}

/* 全局字体设置 */
body, button, input, textarea, select, header, nav, main, section, footer {
    font-family: "华文楷体", "STKaiti", "Kaiti SC", "KaiTi", "楷体", "楷体_GB2312", serif !important; /* 全局字体 */
}

/* 页面整体淡入动画 */
body {
    opacity: 0;
    animation: bodyFadeIn 2s ease forwards; /* 页面加载淡入 */
}
@keyframes bodyFadeIn {
    to { opacity: 1; }
}

/* -------------------------- 二、雪花动画特效 -------------------------- */
/* 雪花容器，固定全屏，最高层级，不影响交互 */
#snowfall-container {
    position: fixed; /* 固定定位，始终显示在屏幕上方 */
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 9999; /* 层级最高，覆盖所有内容 */
    pointer-events: none; /* 不阻挡用户点击操作 */
}
/* 单个雪花样式，动画参数由JS注入 */
.snowflake {
    position: absolute; /* 绝对定位，实现随机位置分布 */
    width: 15px; height: 15px; /* 雪花宽高 */
    background-repeat: no-repeat; /* 背景图不重复 */
    background-position: center; /* 背景图居中显示 */
    background-size: cover; /* 背景图覆盖容器 */
    animation-name: fallAnimation; /* 应用下落动画 */
    animation-duration: var(--duration); /* 动画总时长（通过CSS变量控制） */
    animation-timing-function: linear; /* 匀速动画效果 */
    animation-delay: calc(var(--delay) * 1s); /* 随机延迟启动动画（需配合JS生成变量值） */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
    opacity: var(--opacity); /* 雪花透明度（通过CSS变量控制） */
}
@keyframes fallAnimation {
    from { transform: translateY(-10%) rotate(0deg);} /* 从屏幕外上方开始，初始旋转0度 */
    to   { transform: translateY(100vh) rotate(360deg);} /* 下落到屏幕底部，旋转一圈 */
}

/* -------------------------- 三、入场动画遮罩 -------------------------- */
#entrance-mask {
    position: fixed;
    z-index: 30000;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s;
    opacity: 1;
    pointer-events: all;
}
#entrance-mask.hide {
    opacity: 0;
    pointer-events: none;
}
.entrance-text {
    font-size: 2rem;
    color: #3a6a7c;
    letter-spacing: 4px;
    font-family: inherit;
    animation: entranceTextFade 1.2s cubic-bezier(.4,2,.6,1) forwards;
}
@keyframes entranceTextFade {
    0%   { opacity: 0; transform: scale(0.8);}
    60%  { opacity: 1; transform: scale(1.05);}
    100% { opacity: 1; transform: scale(1);}
}

/* -------------------------- 四、头部导航栏样式 -------------------------- */
header {
    background-color: rgba(214, 204, 194, 0); /* 初始透明 */
    transition: background-color 0.4s cubic-bezier(.4,2,.6,1); /* 平滑过渡 */
    height: 60px;
    width: 100%;
    box-sizing: border-box;
    position: fixed; /* 固定在页面顶部 */
    top: 0;
    left: 0;
    z-index: 1000; /* 保证在内容区之上 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}
.header-logo {
    display: flex; /* 弹性布局，实现水平排列 */
    align-items: center; /* 垂直方向居中对齐LOGO和文字 */
    margin-left: 8.5rem; /* 左侧间距 */
}
.header-cloud,
.header-logo img {
    width: 50px; /* LOGO图标宽度 */
    height: 50px; /* LOGO图标高度 */
    border-radius: 50%; /* 圆形边框 */
    object-fit: cover; /* 图片等比缩放并覆盖容器 */
    margin-right: 16px; /* 右侧间距 */
}
h1 {
    color: #000; /* 标题文字颜色 */
    line-height: 1; /* 紧凑行高 */
    font-size: 1.5rem; /* 标题文字大小 */
    font-family: inherit;
}
header ul {
    list-style: none; /* 移除列表默认样式 */
    position: absolute; /* 绝对定位，相对于header定位 */
    right: 5vw; /* 右侧距离视口宽度5% */
    top: 0; /* 顶部对齐header顶部 */
    line-height: 60px; /* 行高与header高度一致，实现垂直居中 */
    display: flex;
    gap: 32px; /* 导航项间距 */
}
header li {
    display: inline-block; /* 每个导航项独立一行块，便于分开显示 */
    margin-right: 0px;
    vertical-align: middle;
}
header a {
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 文字颜色 */
    font-size: 1.2rem; /* 文字大小 */
    font-family: inherit;
}
header a:hover {
    color: #d6ccc2; /* 鼠标悬停时文字颜色 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 5px; /* 圆角边框 */
    transition: all 0.3s ease; /* 动画过渡效果 */
}
header a.nav-home,
header a.nav-sunset,
header a.nav-friends,
header a.nav-about {
    display: inline-flex; /* 让图标和文字成为一个整体 */
    align-items: center;
    text-underline-position: under; /* 下划线更美观 */
}
header a.nav-home:hover,
header a.nav-sunset:hover,
header a.nav-friends:hover,
header a.nav-about:hover {
    text-decoration: underline; /* 悬停时整体显示下划线，包括图标和文字 */
}
/* 首页时（未滚动），鼠标悬停四个导航项时，图标和文字一起变为 #bf9061 */
header a.nav-home:hover,
header a.nav-sunset:hover,
header a.nav-friends:hover,
header a.nav-about:hover,
header a.nav-home:hover .nav-icon,
header a.nav-sunset:hover .nav-icon,
header a.nav-friends:hover .nav-icon,
header a.nav-about:hover .nav-icon {
    color: #bf9061 !important;
}
.nav-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
    color: #000; /* 默认颜色，可与文字一致 */
    transition: color 0.3s;
}
.nav-home:hover .nav-icon {
    color: #d6ccc2; /* 悬停时图标颜色与文字一致 */
}
.nav-sunset:hover .nav-icon,
.nav-friends:hover .nav-icon,
.nav-about:hover .nav-icon {
    color: #d6ccc2;
}
header,
header a,
header h1,
header .nav-icon {
    color: #d6ccc2; /* 移除 !important */
    transition: color 0.3s;
}
header a:hover,
header .nav-icon:hover {
    color: #bf9062; /* 移除 !important */
}

/* 滚动后添加的类 */
header.scrolled {
    background-color:  rgba(214, 204, 194, 0.4); /* 滚动后背景色 */
    backdrop-filter: blur(12px); /* 滚动后模糊效果 */
    -webkit-backdrop-filter: blur(12px); /* 兼容Safari */
}
header.scrolled,
header.scrolled a,
header.scrolled h1,
header.scrolled .nav-icon {
    color: #000; /* 移除 !important */
}
header.scrolled a:hover,
header.scrolled .nav-icon:hover,
header.scrolled a:hover .nav-icon {
    color: #bf9062; /* 移除 !important */
}

/* -------------------------- 五、内容区域样式 -------------------------- */
.diyiio {
    background-color: antiquewhite;
    color:  #d6ccc2;
    min-height: 100vh; /* 用min-height替换height:110vh */
    background-image: url('./tupian/rilou.jpg'); /* 背景图片 */
    background-size: cover; /* 背景图片覆盖整个区域 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 子元素水平居中 */
    justify-content: center; /* 让h2和p垂直居中 */
    font-family: "微软雅黑", sans-serif; /* 内容区字体 */
    text-align: center; /* 文字居中 */
    margin-top: 0; /* 顶部外边距为0 */
    position: relative; /* 关键：为绝对定位的子元素提供参照 */
    padding-top: 0; /* 顶部内边距为0 */
}
.center-content {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
}
.diyiio h2 {
    font-size: 2rem; /* 标题文字大小 */
    margin-bottom: 10px; /* 标题下方间距 */
}
.diyiio p {
    color: white; /* 段落文字颜色 */
    font-size: 1.5rem; /* 段落文字大小 */
    margin: 5px 0; /* 上下外边距 */
    opacity: 0; /* 初始透明度为0 */
    transform: translateY(20px); /* 初始位置向下偏移20px */
    animation: fadeInUp 0.8s forwards; /* 动画效果（向上淡入） */
    animation-delay: 0.1s; /* 动画延迟 */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
    animation-timing-function: ease-in-out; /* 动画缓动函数 */
    text-shadow: 2px 2px 8px #3a6a7c, 0 0 2px #fff; /* 文字阴影 */
}
.diyiio p:nth-child(2) { animation-delay: 0.3s; } /* 第二个p动画延迟 */
.diyiio p:nth-child(3) { animation-delay: 0.6s; } /* 第三个p动画延迟 */
@keyframes fadeInUp {
    to {
        opacity: 1; /* 动画结束时完全不透明 */
        transform: translateY(0); /* 动画结束时回到原位 */
    }
}
.dier {
    background: radial-gradient(300% 100% at top,#14253e 10%,#75517d 40%,#e98296 65%,#f7eca7)fixed; /* 渐变背景 */
    backdrop-filter: blur(12px); /* 磨砂模糊效果 */
    -webkit-backdrop-filter: blur(12px); /* 兼容Safari */
    height: 100vh; /* 高度100%视口 */
    position: relative; /* 相对定位 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 左对齐 */
    padding-left: 220px; /* 给左侧名片留空间，原来是300px */
}

/* -------------------------- 六、个人名片样式 -------------------------- */
.profile-card {
    width: 220px; /* 缩小整体宽度 */
    background-color: rgba(214,204,194,0.7); /* 半透明背景色，原为#d6ccc2 */
    border-radius: 18px; /* 圆角 */
    box-shadow: 0 6px 32px 0 rgba(58,106,124,0.18); /* 阴影效果 */
    padding: 24px 12px 12px 12px; /* 上右下左内边距 */
    text-align: center; /* 内容居中 */
    position: absolute; /* 绝对定位 */
    left: 100px; /* 距离左侧更近，原来是50px */
    top: 21%; /* 距离顶部21% */
    transform: translateY(-50%); /* 垂直居中 */
    z-index: 2; /* 层级提升，防止被遮挡 */
}
.profile-avatar {
    width: 60px; /* 头像宽度 */
    height: 60px; /* 头像高度 */
    margin-bottom: 12px; /* 下方间距 */
}
.profile-name {
    font-size: 1.1rem; /* 名字字号 */
    margin-bottom: 6px; /* 下方间距 */
}
.profile-desc {
    font-size: 0.85rem; /* 描述文字大小 */
    margin-bottom: 12px; /* 下方间距 */
}
.profile-links {
    margin-bottom: 10px; /* 下方间距 */
    gap: 6px; /* 按钮间距 */
}
.profile-btn {
    padding: 4px 10px; /* 按钮内边距 */
    font-size: 0.85rem; /* 按钮文字大小 */
    color: #ca71c9; /* 按钮文字颜色 */
    border: none; /* 无边框 */
    transition: background-color 0.3s, color 0.3s; /* 颜色过渡动画 */
    align-items: center; /* 内容垂直居中 */
    justify-content: center; /* 内容水平居中 */
    text-decoration: none; /* 去除下划线 */
    margin-bottom: 2px; /* 下方间距 */
    border-radius: 18px; /* 圆角 */
}

/* -------------------------- 七、社交按钮与社交区 -------------------------- */
.social-btn {
    display: inline-flex; /* 行内弹性盒子，图标和文字横向排列 */
    align-items: center; /* 垂直居中 */
    color: #2f93cd; /* 默认字体颜色 */
    border-radius: 18px; /* 圆角 */
    padding: 6px 16px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    text-decoration: none; /* 去除下划线 */
    background: none !important; /* 无背景色 */
    box-shadow: none !important; /* 无阴影 */
    transition: color 0.2s; /* 颜色过渡动画 */
    position: relative; /* 相对定位，便于内部绝对定位元素 */
}
.social-btn img {
    width: 22px; /* 图标宽度 */
    height: 22px; /* 图标高度 */
    margin-right: 7px; /* 图标与文字间距 */
}
.social-btn:hover {
    background: none !important; /* 悬停时无背景色 */
    box-shadow: none !important; /* 悬停时无阴影 */
    color: #3a6a7c; /* 悬停时字体颜色 */
    transform: none; /* 无缩放等变化 */
    transition: none; /* 关闭动画过渡 */
}
.social-btn:hover img,
.social-btn:hover svg {
    color: #3a6a7c; /* 悬停时图标颜色 */
    filter: none; /* 无滤镜 */
}
.social-btn.wechat:hover .wechat-qrcode {
    display: block; /* 悬停时显示微信二维码 */
}
.wechat-qrcode {
    display: none; /* 默认隐藏二维码 */
    position: absolute; /* 绝对定位 */
    top: 120%; /* 距离按钮底部 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精准居中 */
    background: #fff; /* 白色背景 */
    padding: 8px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 12px rgba(58,106,124,0.15); /* 阴影 */
    z-index: 10; /* 层级提升 */
}
/* 社交链接容器样式 */
.social-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 68vh; /* 用vh更适配不同屏幕 */
    margin-top: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    -webkit-backdrop-filter: blur(8px);
    border-radius: 22px;
    padding: 12px 24px;
    background: none !important;    /* 无背景色 */
    box-shadow: none !important;/* 无阴影 */
}
.social-btn svg {
    color: #d6ccc2; /* 默认图标颜色 */
    transition: color 0.2s; /* 颜色过渡动画 */
}
.social-btn:hover svg {
    color: #bf9062; /* 悬停时图标颜色 */
}
/* QQ复制提示 */
.social-btn.qq .qq-tip {
    display: none; /* 默认隐藏提示 */
    position: absolute; /* 绝对定位 */
    left: 110%; /* 按钮右侧 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精准居中 */
    background: #fff; /* 白色背景 */
    color: #3a6a7c; /* 文字颜色 */
    border-radius: 8px; /* 圆角 */
    padding: 6px 14px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    box-shadow: 0 2px 12px rgba(58,106,124,0.15); /* 阴影 */
    white-space: nowrap; /* 不换行 */
    z-index: 10; /* 层级提升 */
}
.social-btn.qq:hover .qq-tip {
    display: block;
}
.qq-copied {
    color: #3a6a7c;
    font-size: 0.95em;
    margin-left: 8px;
}
.social-btn.qq {
    position: relative;
}
.social-btn.qq .qq-copied {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%);
    background: #fff;
    color: #3a6a7c;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 1rem;
    box-shadow: 0 2px 12px rgba(58,106,124,0.15);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.social-btn.qq .qq-copied.show {
    display: block;
    opacity: 1;
}

/* -------------------------- 八、内容区右移 -------------------------- */
.sunset-content {
    margin-left: 120px;
    margin-top: -40px;
    padding: 0 20px;
    width: calc(100% - 120px);
    max-width: 1200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 60px;
    flex: 1;
}

/* -------------------------- 九、文章卡片样式 -------------------------- */
.article-card {
    display: flex; /* 文章卡片采用flex布局，横向排列图片和内容 */
    align-items: flex-start; /* 顶部对齐 */
    flex-direction: row; /* 横向排列 */
    background: #d6ccc2; /* 卡片背景色 */
    border-radius: 14px; /* 圆角 */
    box-shadow: 0 2px 12px rgba(58,106,124,0.10); /* 阴影效果 */
    padding: 18px; /* 内边距 */
    margin: 20px auto; /* 上下外边距，水平居中 */
    max-width: 100%; /* 最大宽度不超过父容器 */
    transition: box-shadow 0.2s; /* 阴影过渡动画 */
    cursor: pointer; /* 鼠标悬停变为手型 */
    flex-wrap: wrap; /* 换行显示 */
    gap: 16px; /* 子元素间距 */
    overflow: hidden; /* 超出部分隐藏 */
    position: relative; /* 相对定位，便于内部绝对定位元素 */
    background-color: rgba(214, 204, 194, 0.8); /* 半透明背景色 */
    backdrop-filter: blur(8px); /* 毛玻璃模糊效果 */
    -webkit-backdrop-filter: blur(8px); /* 兼容Safari的毛玻璃效果 */
    width: 100%; /* 卡片宽度100% */
}
.article-card:hover {
    box-shadow: 0 6px 24px rgba(58,106,124,0.18); /* 悬停时阴影加深 */
}
.article-img {
    width: 120px; /* 图片宽度 */
    height: 90px; /* 图片高度 */
    object-fit: cover; /* 图片裁剪填充 */
    border-radius: 10px; /* 图片圆角 */
    margin-right: 18px; /* 图片与内容间距 */
    max-width: 100%; /* 新增，防止溢出 */
}
.article-body {
    display: block;        /* 让标题和描述变为块级，text-align: center 生效 */
    width: 100%;
    flex: 1; /* 占据剩余空间 */
    display: flex; /* 内部采用flex布局 */
    flex-direction: column; /* 纵向排列 */
}
.article-title {
    font-size: 1.15rem; /* 标题字号 */
    color: #5c9fd2; /* 标题颜色 */
    margin-bottom: 8px; /* 标题下方间距 */
    font-weight: bold; /* 标题加粗 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.2s; /* 标题颜色过渡动画 */
    width: 100%;
    display: block;
}
.article-desc {
    font-size: 0.98rem; /* 描述文字大小 */
    color: #555; /* 描述文字颜色 */
    margin-bottom: 10px; /* 描述下方间距 */
}
.article-link {
    color: #bf9062; /* 阅读全文链接颜色 */
    text-decoration: none; /* 去除下划线 */
    font-size: 0.95rem; /* 链接文字大小 */
    align-self: flex-end; /* 右对齐 */
}
.article-link:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* 文章卡片左下角信息样式 */
.article-meta {
    position: absolute;/* 绝对定位 */
    left: 18px;/* 距离左侧18px */
    bottom: 8px;/* 距离底部16px */
    font-size: 0.82rem;/* 元信息文字大小 */
    color: #888;/* 元信息文字颜色 */
    z-index: 2;/* 确保在卡片上方 */
    pointer-events: none;/* 禁止鼠标事件 */
}

/* -------------------------- 十、页脚样式 -------------------------- */
footer {
    background-color: #d6ccc2;
    color: #000;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
footer .footer-in {
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer .footer-in p {
    text-align: center;
}

/* -------------------------- 十一、打字机动画 -------------------------- */
.typewriter {
    color: #fef7e6;
    font-size: 15px;
    margin: 5px 0;
    white-space: pre-wrap;
    min-height: 1.5em;
    letter-spacing: 1px;
    border-right: 2px solid #fef7e6;
    animation: blink-cursor 0.8s steps(1) infinite;
}
@keyframes blink-cursor {
    0%, 100% { border-color: #fef7e6; }
    50% { border-color: transparent; }
}

/* -------------------------- 十二、响应式适配 -------------------------- */
/* 针对屏幕宽度小于等于768px的设备进行样式调整，实现移动端友好显示 */
@media (max-width: 768px) {
    header {
        padding: 0 10px;           /* 减小左右内边距，适应小屏 */
        height: 40px;              /* 减小头部高度 */
    }
    .header-logo {
        display: none !important;
    }
    header ul {
        position: static;          /* 取消绝对定位，改为正常流 */
        flex-direction: row;       /* 导航横向排列 */
        gap: 5px;                 /* 导航项间距缩小 */
        line-height: 50px;         /* 行高与header一致 */
        right: 0;                  /* 右侧对齐 */
    }
    nav,
    header ul {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: static; /* 保证不绝对定位 */
        margin: 0 auto;
        left: 0;
        right: 0;
    }
    .nav-icon {
        margin-right: 2px;         /* 图标与文字间距缩小 */
        width: 16px;               /* 图标宽度缩小 */
        height: 16px;              /* 图标高度缩小 */
    }
    .diyiio {
        height: auto;              /* 高度自适应内容 */
        min-height: 100vh;         /* 最小高度为视口高度 */
        padding-top: 60px;         /* 顶部留出导航栏空间 */
        background-position: center top; /* 背景图片顶部对齐 */
    }
    .center-content h2 {
        font-size: 1.2rem;         /* 标题字号缩小 */
    }
    .center-content p,
    .typewriter {
        font-size: 1rem;           /* 段落和打字机字号缩小 */
    }
    .social-links {
        position: static;
        transform: none;
        top: auto;
        margin: 24px 0 0 0;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 8px 10px;
        -webkit-backdrop-filter: blur(8px);/* 兼容Safari */
    }
    .social-btn {
        font-size: 0.95rem;        /* 按钮字号缩小 */
        padding: 6px 10px;         /* 按钮内边距缩小 */
    }
    .dier {
        flex-direction: column;    /* 主体区垂直排列 */
        padding-left: 0;           /* 取消左侧内边距 */
        height: auto;              /* 高度自适应 */
        min-height: 100vh;         /* 最小高度为视口高度 */
    }
    .profile-card {
        position: static;          /* 取消绝对定位 */
        left: auto;/* 取消左侧定位 */
        top: auto;/* 取消顶部定位 */
        transform: none;
        width: 90vw;               /* 宽度自适应屏幕 */
        margin: 20px auto 0 auto;  /* 居中显示，上方留间距 */
        padding: 18px 8px 12px 8px;/* 内边距缩小 */
    }
    .sunset-content {
        margin-left: 0;            /* 取消左侧外边距 */
        padding: 0 10px;           /* 左右内边距缩小 */
        padding-top: 60px;         /* 顶部留出导航栏空间 */
        align-items: center;       /* 内容区水平居中 */
        width: 90vw;/* 内容区宽度自适应屏幕 */
    }
    footer {
        font-size: 0.80rem;        /* 页脚字号缩小 */
        height: 48px;              /* 页脚高度缩小 */
        padding: 0 5px;            /* 左右内边距缩小 */
    }
    #entrance-mask .entrance-text {
        font-size: 1.2rem;         /* 遮罩欢迎语字号缩小 */
    }
    .article-card {
        flex-direction: column;    /* 文章卡片垂直排列 */
        align-items: stretch;      /* 子项拉伸，不居中 */
        padding: 10px;/* 内边距缩小 */
        max-width: 80vw;/* 最大宽度自适应屏幕 */
        margin-top: 50px;          /* 新增：下移10px */
    }
    .article-img {
        width: 80vw;               /* 图片宽度自适应屏幕 */
        max-width: 330px;          /* 最大宽度限制 */
        height: 120px;             /* 图片高度缩小 */
        margin: 0 0 10px 0;        /* 下方留间距 */
        display: block;            /* 块级元素，默认左对齐 */
    }
    .article-body {
        display: block;        /* 让标题和描述变为块级，text-align: center 生效 */
        width: 100%;
        flex: 1; /* 占据剩余空间 */
        display: flex; /* 内部采用flex布局 */
        flex-direction: column; /* 纵向排列 */
    }
    .article-title {
        text-align: center;
        width: 100%;
        display: block;
    }
    .article-desc {
        text-align: center;
    }
}

/* 针对超小屏幕（如375px及以下）进一步适配 */
@media (max-width: 400px) {
    header {
        padding: 0 2vw;
        height: 44px;
    }
    .header-logo img,
    .header-cloud {
        width: 36px;
        height: 36px;
        margin-right: 6px;
    }
    h1 {
        font-size: 1.1rem;
    }
    .center-content h2 {
        font-size: 1rem;
    }
    .center-content p,
    .typewriter {
        font-size: 0.92rem;
    }
    .profile-card {
        width: 98vw;
        padding: 10px 2vw 10px 2vw;
    }
    .article-card {
        max-width: 98vw;
        padding: 6px;
    }
    .article-img {
        width: 96vw;
        max-width: 200px;
        height: 80px;
    }
    .social-links {
        gap: 4px;
        padding: 4px 2vw;
    }
    .social-btn {
        font-size: 0.85rem;
        padding: 4px 6px;
    }
    footer {
        font-size: 0.70rem;        /* 页脚字号更小 */
        height: 38px;              /* 页脚高度更小 */
        padding: 0 2vw;            /* 左右内边距更小 */
    }
}


/* 针对竖屏模式优化（如手机竖屏） */
@media (orientation: portrait) {
    .dier {
        flex-direction: column;
        padding-left: 0;
    }
    .profile-card {
        margin: 16px auto 0 auto;
        left: auto;
        top: auto;
        transform: none;
        position: static;
    }
    .sunset-content {
        margin-left: 0;
        padding: 0 8px;
    }
}

/* 针对横屏模式优化（如手机横屏） */
@media (orientation: landscape) and (max-width: 900px) {
    .dier {
        flex-direction: row;
        padding-left: 0;
    }
    .profile-card {
        width: 160px;
        margin: 0 8px 0 8px;
    }
    .sunset-content {
        padding: 0 8px;
    }
}

/* 保证图片、卡片等元素最大宽度不超出屏幕 */
img, .article-card, .profile-card {
    max-width: 100vw;
    box-sizing: border-box;
}



/* 针对屏幕宽度320px到768px之间，进一步缩小header及相关元素 */
@media (min-width: 320px) and (max-width: 768px) {
    header {
        height: 42px;/* header高度缩小 */
        padding: 0 4vw;/* header左右内边距缩小 */
        font-size: 0.9rem;/* header文字大小缩小 */
    }
    .header-logo {
        margin-left: 0;/* LOGO左侧间距缩小 */
    }
    .header-logo img,
    .header-cloud {
        width: 28px;/* LOGO图标大小缩小 */
        height: 28px;/* LOGO图标大小缩小 */
        margin-right: 4px;/* LOGO图标大小缩小 */
    }
    h1 {
        font-size: 0.98rem;/* 标题文字大小缩小 */
    }
    header ul {
        gap: 2px;/* 导航项间距缩小 */
        line-height: 42px;/* 行高与header一致 */
    }
    .nav-icon {
        width: 13px;/* 图标大小缩小 */
        height: 13px;/* 图标大小缩小 */
        margin-right: 1px;/* 图标与文字间距缩小 */
    }
    header a {
        font-size: 0.95rem;/* 导航文字大小 */
        padding: 2px 4px;/* 导航内边距 */
    }
}

/* 新增：针对屏幕宽度小于等于768px的设备，调整.sunset-img样式 */
@media (max-width: 768px) {
    .sunset-img {
        align-self: center !important;
    }
    .article-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}