/* 1. 页面背景：冷调莫兰蒂灰蓝，轻微模糊保持柔和 */
body {
  background-color: rgba(220, 224, 228, 0.5); 
  background-image: url("https://ts1.tc.mm.bing.net/th/id/R-C.e7ff0adef83c71d45d7cdd45e0397d45?rik=Z5wqiOTXAxLXSQ&riu=http%3a%2f%2fimg.netbian.com%2ffile%2f2023%2f0910%2f085308BFQID.jpg&ehk=EZla%2bwTfSUMfUUcRAzvuaOrRkErsBScUgcILwAYYZlg%3d&risl=&pid=ImgRaw&r=0");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* 2. 全局容器：加宽白色区域，调整为左右分栏布局 */
#main {
  max-width: 1200px; /* 加宽外部容器 */
  margin: 0 auto;
  padding: 20px;
  display: flex; /* 启用弹性布局，实现博客+公告同一行 */
  gap: 20px; /* 博客与公告的间距 */
}

/* 3. 博客内容区：占据主要宽度 */
#home {
  flex: 3; /* 博客区占比更大 */
  background-color: rgba(245, 247, 249, 0.65);
  padding: 24px; /* 增加内边距 */
  border-radius: 16px; /* 加大圆角 */
  border: 1px solid rgba(200, 210, 220, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 0; /* 取消底部间距，由全局gap控制 */
}

/* 4. 侧边栏（公告+日历等）：独立成右侧栏 */
#sideBar {
  flex: 1; /* 侧边栏占比更小 */
  background-color: transparent; /* 取消侧边栏自身背景，模块独立背景 */
  padding: 0; /* 取消侧边栏内边距 */
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}

/* 5. 内容模块（博客文章、公告等）：统一样式 */
.post, .postTitle, .postBody, .day, .newsItem,
/* 侧边栏子模块（公告、日历） */
.news, .catListComment, .catListCategory,
.catListLink, .catListArchive, .catListImageCategory, .catListArticleRank {
  background-color: rgba(250, 252, 253, 0.8);
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(210, 218, 226, 0.5);
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
}

/* 6. 标题：冷调莫兰蒂蓝粉色，字体更重 */
.postTitle a, .postTitle, .titlelnk {
  color: #7a8b9f !important;
  font-weight: 700;
  border-bottom: 2px solid rgba(122, 139, 159, 0.4);
  padding-bottom: 4px;
}

/* 7. 正文：字体颜色大幅加重，优化阴影保证清晰 */
.postBody, .postDesc, .postCon {
  color: #333333 !important;
  line-height: 1.8;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
}

/* 8. 链接：冷调深蓝灰，hover 更醒目 */
a, .postBody a, .newsItem a {
  color: #607288 !important;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: #485868 !important;
  text-decoration: underline;
  text-decoration-color: rgba(72, 88, 104, 0.5);
}

/* 9. 侧边栏模块标题：优化样式 */
#sideBar h3, .catListLink h3, .catListArchive h3,
.catListImageCategory h3, .catListArticleRank h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #607288;
  font-weight: 600;
  border-bottom: 1px solid rgba(210, 218, 226, 0.5);
  padding-bottom: 8px;
}

/* 10. 侧边栏模块列表：增加内边距，更宽松 */
.catListLink ul, .catListArchive ul,
.catListImageCategory ul, .catListArticleRank ul {
  padding-left: 0;
  list-style: none;
}

.catListLink li, .catListArchive li,
.catListImageCategory li, .catListArticleRank li {
  padding: 8px 0;
  line-height: 1.6;
}

/* 11. 日历组件：字体加重，冷调适配 */
#calendar {
  background-color: transparent;
}

#calendar td, #calendar th {
  color: #333333 !important;
  font-weight: 600;
}

#calendar .CalToday {
  background-color: #7a8b9f;
  color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(122, 139, 159, 0.3);
}

/* 12. 导航栏：冷调配色，字体加重 */
#navList a {
  color: #607288 !important;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
}

#navList a:hover {
  background-color: rgba(122, 139, 159, 0.2);
  color: #485868 !important;
}

/* 13. 底部信息：冷调高透明，字体加重 */
#footer {
  max-width: 1200px; /* 底部与内容区同宽 */
  margin: 20px auto 0;
  color: #555555 !important;
  background-color: rgba(245, 247, 249, 0.65);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(200, 210, 220, 0.4);
}