@charset "utf-8";

/* 基础重置与通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 现代盒模型 */
}

html {
scroll-behavior: smooth;
font-size: 16px; /* 基础字号 */
}

body {
font: 14px "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
color: #333;
line-height: 1.6; /* 更现代的行高写法 */
background: #eee url(./img/bg.jpg) center top / cover no-repeat fixed; /* 简写背景属性 */
}

a {
color: #833;
text-decoration: none;
transition: all 0.3s ease; /* 统一过渡效果 */
}

a:hover {
text-decoration: underline;
}

textarea, input, select, button {
font: 14px "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
border-radius: 4px; /* 统一表单控件圆角 */
border: 1px solid #ddd;
transition: border-color 0.3s ease;
}

textarea:focus, input:focus, select:focus {
outline: none;
border-color: #833;
box-shadow: 0 0 0 2px rgba(131, 51, 51, 0.1); /* 焦点状态 */
}

img {
border: 0;
max-width: 100%; /* 响应式图片 */
height: auto;
}

textarea {
line-height: 1.8;
overflow: auto;
padding: 8px; /* 更舒适的内边距 */
resize: vertical; /* 仅允许垂直调整大小 */
}

td {
font: 14px "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
color: #000;
line-height: 1.8;
}

input {
color: #000;
background: #fff;
padding: 6px 8px; /* 优化输入框内边距 */
}

fieldset {
line-height: 1.8;
padding: 16px;
border: 1px solid #ddd;
border-radius: 6px;
margin: 10px 0;
}

legend {
font-weight: 600;
padding: 0 8px;
}

hr {
height: 1px;
border: none;
background-color: #eee; /* 更柔和的分割线 */
margin: 16px 0;
}

ul, ol {
list-style: none;
}

div {
word-wrap: break-word;
}

/* 主容器 */
#outmain {
width: 950px;
margin: 0 auto;
position: relative;
clear: both;
background: rgba(255, 255, 255, 0.5); /* 提高背景不透明度，更清晰 */
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 8px 8px; /* 底部圆角 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影提升层次感 */
}

/* 头部 */
#header {
position: relative;
height: 200px;
background: #fff url(./img/head.jpg) center / cover no-repeat;
}

div.blog-title {
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-weight: 600;
letter-spacing: 2px;
padding: 94px 0 0 50px;
font-size: 36px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影提升可读性 */
}

div.blog-title a,
#header .description {
text-decoration: none;
color: #fff;
}

div.blog-title a:hover {
text-decoration: underline;
}

#header .description {
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-size: 14px;
padding: 10px 0 0 50px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 搜索栏 */
#searchbar {
float: right;
padding: 0 10px 0 0;
margin-top: 13px;
}

.searchform {
border: 1px solid #B94646;
background: #f8f8f8; /* 更柔和的背景色 */
width: 200px;
padding: 5px 10px;
margin: 0;
border-radius: 20px; /* 圆形搜索框 */
display: flex; /* 弹性布局 */
align-items: center;
}

.searchform .searchinput {
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-size: 14px;
border: none;
background: transparent;
padding: 0;
margin: 0;
flex: 1; /* 自动填充剩余空间 */
min-width: 0; /* 防止溢出 */
}

.searchform .searchsubmit {
background: url(img/searchsubmit.gif) no-repeat center;
text-indent: -9000px;
width: 20px;
height: 20px;
border: none;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s ease;
padding: 0;
margin: 0 0 0 5px;
}

.searchform .searchsubmit:hover {
opacity: 1;
}

/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}

/* 导航菜单 */
#pagemenu {
width: 100%;
font-size: 1.4em;
background: #fff url(./img/head1.jpg) no-repeat;
}

#pagemenu ul {
display: flex; /* 弹性布局替代float */
margin: 0 auto;
padding: 0 30px;
gap: 15px; /* 替代margin-left */
}

#pagemenu ul li {
line-height: 30px; /* 更高的导航栏，更舒适 */
flex-shrink: 0;
}

#pagemenu ul li a {
font-size: 14px;
background: #0066cc; /* 更现代的蓝色 */
text-decoration: none;
color: #fff;
padding: 0 20px;
border-radius: 6px 6px 0 0; /* 简化圆角写法 */
display: block;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#pagemenu ul li a:hover {
text-decoration: none;
background: #d32f2f; /* 更现代的红色 */
color: #fff; /* 保持白色文字更易读 */
transform: translateY(-2px); /* 轻微上浮效果 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#pagemenu ul li.current_page_item a {
background: #d32f2f;
color: #fff;
}

/* 主体内容 */
#page {
width: 100%;
margin-bottom: 1px;
float: left;
padding: 10px; /* 统一内边距 */
}

#wrap {
width: 630px;
padding: 0 10px;
float: left;
}

#showcalendar {
margin: 20px 0;
width: 260px;
text-align: center;
border: 1px dashed #ccc;
border-radius: 6px;
overflow: hidden; /* 防止内容溢出 */
}

#showcalendar td {
text-align: center;
padding: 4px;
}

#sidebar {
width: 280px;
margin: 0;
padding: 0 10px;
float: right;
}

#sidebar ul {
margin-bottom: 20px;
}

#sidebar p {
margin-top: -20px;
padding-bottom: 10px;
text-align: center;
}

#sidebar p a {
margin: 10px;
display: inline-block; /* 让margin生效 */
padding: 4px 8px;
border-radius: 4px;
background: #f5f5f5;
}

#sidebar p a:hover {
background: #eee;
text-decoration: none;
}

#sidebar p.more {
text-align: right;
padding: 6px 0 0;
}

#sidebar table {
width: 100%; /* 响应式宽度 */
}

#sidebar div.stitle {
font-style: italic;
font-weight: normal;
font-size: 20px;
color: #333;
margin: 10px 0 15px;
padding-bottom: 8px;
border-bottom: 0px solid #eee; /* 添加下划线提升层次感 */
}

#sidebar ul li {
background: url(img/arrow.gif) no-repeat 2px 13px;
padding: 8px 0 8px 15px; /* 更舒适的内边距 */
border-bottom: 0px solid #f5f5f5;
transition: padding-left 0.3s ease;
}

#sidebar ul li:hover {
padding-left: 20px; /* 悬停缩进效果 */
}

#sidebar ul li span {
color: #666;
font-size: 12px;
}

/* 日历样式 */
.week {
background: #f5f5f5;
border-bottom: 2px solid #aaa;
padding: 6px 4px;
font-weight: 600;
}

.cal_day1 {
padding: 6px 2px;
transition: background-color 0.3s ease;
}

.cal_day1:hover {
background-color: #f8f8f8;
}

.cal_day2 {
background: #f1f1f1;
border: 1px solid #999;
font-weight: bold;
}

/* 文章样式 */
.post-body {
font-size: 15px; /* 稍大的字号提升可读性 */
line-height: 1.8;
margin: 15px 0;
}

.post-body a {
text-decoration: underline;
text-underline-offset: 2px; /* 下划线偏移 */
}

.post-body a:hover {
text-decoration: none;
color: #d32f2f;
}

.post-body p {
margin: 15px 0;
}

.post-body ul {
margin: 15px 22px;
list-style: disc;
}

.post-body ol {
margin: 15px 30px;
list-style: decimal;
}

.needpwd {
padding: 16px;
margin: 20px 0;
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.post-title {
font-weight: 600;
font-size: 24px;
line-height: 1.4;
margin: 8px 0 12px;
clear: both;
color: #222;
}

.post-date {
font-size: 12px;
color: #666;
margin-bottom: 16px;
display: block;
}

.post-meta {
text-align: right;
margin: 10px 0;
clear: both;
font-size: 12px;
color: #666;
}

.post-main {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px dashed #eee; /* 更柔和的分割线 */
}

.post-stick-title {
font-size: 22px;
line-height: 1.4;
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
margin: 8px 0;
clear: both;
color: #d32f2f; /* 置顶标题醒目 */
}

.cat-links {
padding: 0 0 0 15px;
background: url(img/bullet_go.gif) no-repeat 0 4px;
font-size: 12px;
}

.post-meta-link {
padding: 0 0 0 28px;
background: url(img/comment.gif) no-repeat 10px 3px;
}

/* 站标容器样式 */
.link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 2px;
    background-color: #f0f0f0;
    overflow: hidden;
}

/* 站标图片样式 */
.link-favicon {
    width: 100%;
    height: 100%;
    border: none;
}

/* 文字替代层样式 */
.link-char {
    display: none;
    font-size: 10px;
    color: #333;
    font-weight: 600;
    width: 100%;
    height: 100%;
    line-height: 16px;
    text-align: center;
}

/* 文字模式：显示文字，隐藏图片 */
.link-icon.text-mode .link-char {
    display: block;
}

/* 友情链接列表样式优化 */
.onelink {
    line-height: 24px;
    margin: 4px 0;
    list-style: none;
}

.linkover {
    padding-left: 0;
}

/* 页脚 */
#footer {
font-size: 12px;
margin: 0 auto;
padding: 20px;
line-height: 1.8;
clear: both;
text-align: center;
color: #666;
border-top: 0px solid #eee;
}

.clear {
clear: both;
}

.clear-height {
clear: both;
height: 15px;
}

/* 表单样式 */
.formbox p {
margin: 0;
padding: 0 0 12px;
}

.title {
font-weight: 600;
font-size: 24px;
position: relative;
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
margin: 10px 0 15px;
clear: both;
padding: 0 0 12px;
border-bottom: 0px solid #eee;
}

.formfield {
font-size: 14px;
color: #000;
border: 0px solid #eee;
background: rgba(255, 255, 255, 0.8);
border-radius: 6px;
padding: 8px 12px;
width: 100%;
}

button {
padding: 8px 16px;
background: #833;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}

button:hover {
background: #a55;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 日历当前日期 */
.curdate {
font-weight: bold;
text-align: center;
padding: 6px 4px;
background: #82c8f0;
color: #fff;
border-radius: 4px;
}

/* 附件样式 */
.attach a {
text-decoration: underline;
}

.attach a:hover {
text-decoration: none;
}

.attach {
padding: 0;
margin: 10px 0;
}

.attach img {
border: 1px solid #ddd;
background: #f8f8f8;
padding: 8px;
border-radius: 6px;
transition: transform 0.3s ease;
}

.attach img:hover {
transform: scale(1.02); /* 轻微放大效果 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

img.attach {
border: 1px solid #ddd;
background: #f8f8f8;
padding: 8px;
border-radius: 6px;
}

/* 标签样式 */
.tags {
line-height: 40px;
margin-bottom: 25px;
font-weight: normal;
}

.art-tag {
margin: 15px 0;
font-size: 14px;
}

.art-tag a {
display: inline-block;
padding: 4px 10px;
background: #f5f5f5;
border-radius: 16px;
margin-right: 8px;
margin-bottom: 8px;
}

.art-tag a:hover {
background: #833;
color: #fff;
text-decoration: none;
}

/* 文章其他标题 */
#article-other-title {
margin: 25px 0;
line-height: 25px;
}

.lesscontent {
display: block;
clear: both;
line-height: 20px;
margin: 5px 0 35px;
}

/* 引用样式 */
.quote {
border-left: 4px solid #833; /* 左侧边框替代全边框 */
background: #f9f9f9;
margin: 15px 0;
padding: 12px 16px;
border-radius: 0 6px 6px 0;
}

/* 弹窗提示 */
.ajaxmsg {
position: absolute;
font-size: 14px;
padding: 8px 16px;
background: #f00;
color: #fff;
display: none;
text-align: center;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ajaxdiv {
border: 1px solid #ddd;
background: #f8f8f8;
position: absolute;
padding: 16px;
line-height: 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ajaxdiv h2 {
border-bottom: 1px dashed #ccc;
font-size: 14px;
line-height: 26px;
margin: 0 0 15px;
padding-bottom: 8px;
}

.ajaxdiv h2 a {
font-weight: 400;
float: right;
}

/* 分页样式 */
.p_bar * {
font-size: 14px;
}

.p_bar {
clear: both;
margin: 30px 0 15px;
text-align: center;
}

.p_bar a {
padding: 8px 12px;
display: inline-block;
border-radius: 4px;
margin: 0 2px;
}

.p_bar a:hover {
background: #fef7e0;
border: 1px solid #833;
text-decoration: none;
}

.p_info {
background: #fef7e0;
border: 1px solid #833;
margin-right: 1px;
padding: 8px 12px;
border-radius: 4px;
}

.p_num {
background: #fff;
border: 1px solid #e0e0e0;
margin-right: 1px;
padding: 8px 12px;
border-radius: 4px;
}

.p_redirect {
background: #fff;
border: 1px solid #e0e0e0;
margin-right: 1px;
padding: 8px 12px;
border-radius: 4px;
}

.p_curpage {
margin-right: 1px;
border: 1px solid #833;
background: #fef7e0;
color: #833;
padding: 8px 12px;
border-radius: 4px;
font-weight: 600;
}

/* 链接样式 */
.linkover {
margin: 0 0 20px 0;
padding: 10px 0;
clear: both;
}

.linkover li {
color: #666;
width: 120px;
line-height: 26px;
margin: 0 10px;
float: left;
}

.linkover li.onelink {
width: 280px;
margin: 0 10px 8px;
}

.linkgroup {
margin-bottom: 25px;
}

h1 a, .cal_day1 a:hover, .cal_day2 a:hover, .post-title a, .curdate a {
text-decoration: none;
}

.navlink li.current_page_item a:hover, .cal_day1 a, .cal_day2 a, .curdate a:hover, .post-title a:hover {
text-decoration: underline;
}

#sidebar ul li img, .p_bar * {
vertical-align: middle;
}

/* 无评论提示 */
.nocomment {
margin: 20px;
font-size: 16px;
text-align: center;
color: #666;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
}

.trackbackurl {
float: right;
font-size: 12px;
}

/* 评论样式 */
#comment-post textarea {
width: 100%;
min-height: 120px;
}

#cancel-reply {
font-size: 12px;
float: right;
}

div.cmcontent {
padding: 8px 2px;
line-height: 1.8;
}

div.commentnum {
font-size: 16px;
font-style: italic;
float: left;
width: 32px;
color: #833;
}

div.comment {
margin-left: 42px;
margin-top: 10px;
margin-bottom: 20px;
padding: 16px;
border: 0px solid #eee;
border-radius: 8px;
transition: box-shadow 0.3s ease;
}

div.comment:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

div.comment-children {
margin-bottom: 0;
margin-left: 20px; /* 子评论缩进 */
clear: both;
border-radius: 8px;
}

div.rowa {
background: #fafafa;
border-radius: 8px;
}

div.rowb {
background: #ffffff;
border-radius: 8px;
}

.comment_data {
padding-bottom: 8px;
color: #999;
font-size: 12px;
margin-bottom: 8px;
border-bottom: 0px solid #f5f5f5;
}

.comment_data .author {
display: block;
font-size: 16px;
color: #444;
font-weight: 600;
margin-bottom: 4px;
}

.comment_data a.reply {
float: right;
padding: 2px 8px;
background: #f5f5f5;
border-radius: 4px;
font-size: 12px;
}

.comment_data a.reply:hover {
background: #833;
color: #fff;
text-decoration: none;
}

.comment_data .art-title {
font-size: 12px;
float: right;
font-weight: normal;
}

img.avatar {
float: left;
margin-right: 10px;
border-radius: 50%; /* 圆形头像 */
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 归档样式 */
.car-container p {
margin: 20px 0;
font-weight: bold;
}

.car-toggle {
font-weight: normal;
font-size: 16px;
line-height: 30px;
margin: 8px 0;
clear: both;
cursor: pointer;
padding: 8px 0;
border-bottom: 0px solid #f5f5f5;
}

.car-toggle:hover {
color: #833;
}

.car-yearmonth span {
color: #666;
}

.car-yearmonth a {
font-weight: bold;
}

.car-monthlisting li {
line-height: 28px;
padding-left: 30px;
}

/* 相关文章 */
.related-title {}

.related-title li {
background: url(img/arrow.gif) no-repeat 2px 13px;
padding: 8px 0 8px 15px;
border-bottom: 0px solid #f5f5f5;
}

/* 代码图片 */
.codeimg {
cursor: pointer;
margin: 8px 0 15px 0;
border-radius: 6px;
overflow: hidden;
}

/* --- 新增：头部广告栏 (PC端默认样式) --- */
.header-ad {
    position: absolute;   /* 绝对定位：脱离文档流，自由移动 */
    right: 10px;          /* 靠右显示，距离右边 20px */
    bottom: 30px;         /* 靠下对齐：放在 header 容器底部上方 20px 处 */
                          /* 或者使用 top: 80px; 来根据顶部定位，避开右上角的搜索框 */
    z-index: 10;          /* 确保在最上层 */
    text-align: right;    /* 内容右对齐 */
}

/* 返回顶部按钮 */
#backToTop {
position: fixed;
bottom: 30px; /* 调整位置更合理 */
right: 30px; /* 调整位置更合理 */
background-color: #833; /* 统一主色调 */
color: white;
padding: 12px 16px;
border-radius: 50px; /* 圆形按钮更现代 */
text-decoration: none;
display: none;
z-index: 1000;
box-shadow: 0 4px 12px rgba(131, 51, 51, 0.3);
transition: all 0.3s ease;
border: none;
font-size: 14px;
}

#backToTop:hover {
background-color: #a55;
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(131, 51, 51, 0.4);
text-decoration: none;
}

#backToTop::after {
content: "↑";
margin-left: 4px;
}
/* ==================================== */
/* 移动端响应式样式 (修改版) */
/* ==================================== */
@media screen and (max-width: 960px) {
    
    /* --- 新增：移动端广告样式适配 --- */
    .header-ad {
        position: static;     /* 恢复为静态定位，回归正常文档流 */
        width: 100%;          /* 宽度占满 */
        text-align: center;   /* 内容居中 */
        margin: 0 0 10px 0;   /* 底部留点空隙，与标题隔开 */
        padding-top: 10px;    /* 顶部留白 */
    }
    /* 1. 容器改为自适应宽度 */
    #outmain {
        width: 100%;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* 2. 隐藏侧边栏 */
    #sidebar {
        display: none !important;
    }

    /* 3. 内容区域改为单栏全宽 */
    #page {
        padding: 0;
        float: none;
    }
    
    #wrap {
        width: 100%;
        float: none;
        padding: 10px 15px;
    }

    /* 4. 头部样式调整 */
    #header {
        height: auto;
        padding-bottom: 20px;
        background-size: cover; 
    }

    div.blog-title {
        font-size: 26px;
        padding: 40px 15px 10px 15px;
        text-align: center;
    }

    #header .description {
        padding: 0 15px;
        text-align: center;
    }

 /* --- 搜索栏布局深度修复 --- */
    #searchbar {
        float: none;
        margin: 15px auto;
        padding: 0 15px;
        width: 50%;
        box-sizing: border-box; /* 确保padding不会撑大宽度 */
        text-align: center; 
    }

    .searchform {
        width: 100%;
        max-width: 400px;
        height: 40px;
        background: #fff;
        border: 1px solid #ccc; /* 加个边框看得更清楚 */
        border-radius: 20px;
        
        /* 关键布局设置：启用弹性盒子 */
        display: flex; 
        flex-direction: row; /* 横向排列 */
        align-items: center; /* 垂直居中 */
        padding: 0 10px;     /* 容器内边距 */
    }

    .searchform .searchinput {
        /* 核心修复：输入框霸占剩余空间 */
        flex-grow: 1;        /* 自动放大占据剩余空间 */
        flex-shrink: 1;      /* 空间不够时允许缩小 */
        width: auto;         /* 覆盖掉默认宽度 */
        height: 30px;        /* 足够的高度 */
        border: none;        /* 去掉输入框自带边框 */
        background: transparent;
        font-size: 16px;     /* 防止iOS缩放 */
        outline: none;       /* 去掉点击时的蓝框 */
        margin: 0;
        padding: 0;
        z-index: 1;          /* 确保输入框层级 */
    }

    .searchform .searchsubmit {
        /* 核心修复：按钮固定在右边 */
        flex-grow: 0;        /* 不许放大 */
        flex-shrink: 0;      /* 不许缩小 */
        flex-basis: 30px;    /* 固定宽度30px */
        width: 30px;
        height: 30px;
        border: none;
        margin-left: 5px;    /* 跟输入框拉开点距离 */
        background-color: transparent; /* 背景透明 */
        cursor: pointer;
        opacity: 1;          /* 手机端保持不透明 */
        z-index: 2;          /* 按钮层级 */
    }
    /* -------------------------- */
    /* 5. 菜单调整为自动折行 */
    #pagemenu {
        height: auto;
        background-size: cover;
    }

    #pagemenu ul {
        flex-wrap: wrap;
        justify-content: center;
        padding: 5px 0;
        gap: 5px;
    }
    
    #pagemenu ul li a {
        padding: 0 12px;
        font-size: 13px;
        line-height: 36px;
    }

    /* 6. 图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 修复代码高亮和表格 */
    div.syntaxhighlighter {
        overflow-x: auto !important;
    }
    
    table {
        width: 100%;
    }
    
    /* 输入框适配 */
    .formfield, input, textarea {
        width: 100% !important;
        max-width: 100%;
    }
    /* --- 页脚移动端美化 --- */
    #footer {
        padding: 20px 10px;   /* 增加上下内边距，左右留空 */
        height: auto;         /* 取消高度限制 */
        font-size: 12px;      /* 稍微调小字号，更精致 */
        line-height: 2.0;     /* 增加行高，两行文字之间拉开距离 */
        word-wrap: break-word; /* 防止极个别长单词撑破布局 */
    }
    
    /* 让统计图标稍微隔开点 */
    #footer img {
        vertical-align: middle;
        margin-left: 5px;
    }
}