/* 变量定义 */
:root {
  --bg-color: #f3f4f6; /* 整体背景色 */
  --header-bg-color: #e23912; /* 头部背景色 */
  --header-text-color: #e2e8f0; /* 头部文字颜色 */
  --grid-border-color: #cbd5e1; /* 网格边框颜色 */
  --text-primary-color: #334155; /* 主要文字颜色 */
  --text-secondary-color: #64748b; /* 次要文字颜色 */
  --border-radius: 12px; /* 边框圆角 */
  --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.05); /* 盒子阴影 */
  --cell-hover-bg-color: #f1f5f9; /* 单元格悬停背景色 */
}

/* 全局设置 */
*,
*::before,
*::after {
  box-sizing: border-box; /* 设置所有元素的盒模型为border-box */
}

/* 基础设置 */
body {
  margin: 0; /* 去掉默认的边距 */
  font-family: 'Microsoft YaHei', Arial, sans-serif; /* 设置字体 */
  background-color: var(--bg-color); /* 应用背景色变量 */
  color: var(--text-primary-color); /* 应用主要文字颜色 */
}
/* 年历标题 */
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.title button {
    width: 20%; /* 设置按钮宽度为父容器宽度的20% */
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    padding: 10px 10px;
    margin: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.title button:hover {
    background: linear-gradient(135deg, #5b86e5, #36d1dc);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.title input[type="text"] {
    width: 20%; /* 设置按钮宽度为父容器宽度的20% */
    padding: 10px;
    border: 2px solid #36d1dc;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease;
}

.title input[type="text"]:focus {
    border-color: #5b86e5;
}

/* 日历容器 */
.calendar-container {
  width: 98%; /* 宽度 */
  max-width: 98%; /* 最大宽度 */
  background: white; /* 背景色 */
  margin: 50px auto; /* 上下外边距50px，水平居中 */
  padding: 2em; /* 内边距 */
  border-radius: var(--border-radius); /* 圆角 */
  box-shadow: var(--box-shadow); /* 盒子阴影 */
  overflow: hidden; /* 隐藏溢出内容 */
}

/* 日历头部 */
.calendar-header {
  background: var(--header-bg-color); /* 头部背景色 */
  color: var(--header-text-color); /* 头部文字颜色 */
  text-align: center; /* 文本居中 */
  padding: 20px 0; /* 上下内边距20px */
  border-radius: var(--border-radius) var(--border-radius) 0 0; /* 圆角 */
  box-shadow: var(--box-shadow); /* 盒子阴影 */
}

.calendar-header-title {
  font-size: 2em; /* 字体大小 */
  padding: 5px; /* 内边距 */
  border: none; /* 无边框 */
  text-align: center; /* 文本居中 */
  color: var(--header-text-color); /* 文字颜色 */
}

/* 月份部分 */
.month {
  padding: 15px 25px; /* 内边距：上下15px，左右25px */
  margin: 10px 0; /* 上下外边距10px */
  background: linear-gradient(135deg, #ffffff, #f3f4f6); /* 渐变背景 */
  border-radius: var(--border-radius); /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

.month:hover {
  transform: translateY(-5px); /* 悬停时向上移动 */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); /* 悬停时阴影效果 */
}

.month h3 {
  text-align: center; /* 文本居中 */
  font-size: 2em; /* 字体大小 */
  color: var(--header-bg-color); /* 头部背景色 */
  margin: 12px 0; /* 上下外边距12px */
  font-family: 'Arial', sans-serif; /* 字体样式 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文本阴影 */
}

/* 星期标题 */
/* 星期标题 */
.week-title {
  display: inline-block; /* 行内块元素 */
  width: 14.2%; /* 宽度 */
  text-align: center; /* 文本居中 */
  font-weight: bold; /* 加粗 */
  color: #333; /* 文字颜色 */
  background: #ff8800; /* 背景色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 4px; /* 圆角 */
  padding: 15px 0; /* 上下内边距 */
  margin: 10px 0; /* 上下外边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微盒子阴影 */
  transition: background 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

.week-title:hover {
  background: #ffe4e1; /* 悬停时背景色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}


/* 星期部分 */
.week {
  display: flex; /* 弹性布局 */
  justify-content: space-around; /* 子元素水平分布 */
  flex-wrap: wrap; /* 自动换行 */
}

.week div {
  width: 13%; /* 宽度 */
  text-align: center; /* 文本居中 */
  padding: 5px; /* 内边距 */
  margin: 5px 0; /* 上下外边距5px */
  border-radius: var(--border-radius); /* 圆角 */
  transition: background 0.3s ease, transform 0.3s ease; /* 过渡效果 */
  position: relative; /* 相对定位 */
  box-shadow: var(--box-shadow); /* 盒子阴影 */
  background: white; /* 背景色 */
}
/* 当前日期样式 */
.week div.today {
  color: #fff; /* 文字颜色改为白色 */
  background: #ff6347; /* 背景色 */
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  padding: 5px; /* 增加内边距 */
  position: relative; /* 确保绝对定位的子元素相对于这个元素定位 */
}

.week div.today::after {
  content: '📌'; /* 添加emoji内容 */
  position: absolute; /* 绝对定位 */
  top: -5px; /* 距离顶部-5像素 */
  right: -5px; /* 距离右侧-5像素 */
  font-size: 10px; /* 设置emoji的大小 */
  background: #fff; /* 背景色为白色 */
  border-radius: 50%; /* 圆形背景 */
  padding: 2px; /* 内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}
.week div.festival {
  color: #fff; /* 文字颜色 */
  background: #ff4500; /* 背景色 */
}
.week div .lunar strong {
  font-weight: bold;
}

.week div.other {
  color: #aaa; /* 文字颜色 */
}

.week div .gregorian {
  font-size: 1.2em; /* 字体大小 */
  font-weight: bold; /* 加粗 */
  color: #333; /* 文字颜色 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 1.5em; /* 高度 */
  font-style: normal; /* 正常字体 */
}

.week div .lunar {
  display: block; /* 块级元素 */
  font-size: 0.8em; /* 字体大小 */
  color: #333; /* 文字颜色 */
  margin-top: -2px; /* 调整与公历日期的距离 */
  font-style: normal; /* 正常字体 */
}

.week div .gan-zhi {
  display: block; /* 块级元素 */
  font-size: 0.8em; /* 字体大小 */
  color: #333; /* 文字颜色 */
  padding: 2px 5px; /* 内边距 */
  border-radius: 3px; /* 圆角 */
  font-style: normal; /* 正常字体 */
  margin-bottom: 4px; /* 底部外边距 */
}

.week div:hover {
  background: var(--cell-hover-bg-color); /* 悬停背景色 */
  transform: scale(1.20); /* 缩放效果 */
}

/* 自定义信息1 */
.custom-info1 {
  position: absolute; /* 绝对定位 */
  top: 5px; /* 距顶部5px */
  left: 5px; /* 距左侧5px */
  font-size: 10px; /* 字体大小 */
  color: red; /* 文字颜色 */
  font-style: normal; /* 正常字体 */
}
.custom-info2 {
  position: absolute; /* 绝对定位 */
  bottom: 5px; /* 距底部5px */
  left: 5px; /* 距左侧5px */
  font-size: 10px; /* 字体大小 */
  color: blue; /* 文字颜色 */
  font-style: normal; /* 正常字体 */
}
.custom-info3 {
  position: absolute; /* 绝对定位 */
  top: 5px; /* 距顶部5px */
  right: 5px; /* 距右侧5px */
  font-size: 10px; /* 字体大小 */
  color: green; /* 文字颜色 */
  font-style: normal; /* 正常字体 */
}
.custom-info4 {
  position: absolute; /* 绝对定位 */
  bottom: 5px; /* 距底部5px */
  right: 5px; /* 距右侧5px */
  font-size: 10px; /* 字体大小 */
  color: orange; /* 文字颜色 */
  font-style: normal; /* 正常字体 */
}