/* 设置根变量，方便整个样式的颜色和间距等属性统一调整 */
:root {
  --bg-color: #f3f4f6; /* 整体背景色 */
  --header-bg-color: #e23912; /* 头部背景色 */
  --header-text-color: #e2e8f0; /* 头部文字颜色 */
  --grid-border-color: #cbd5e1; /* 网格边框颜色 */
  --cell-hover-bg-color: #e2e8f0; /* 单元格悬停背景色 */
  --cell-active-bg-color: #60a5fa; /* 单元格选中背景色 */
  --text-primary-color: #334155; /* 主要文字颜色 */
  --text-secondary-color: #64748b; /* 次要文字颜色 */
  --border-radius: 12px; /* 边框圆角 */
  --box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06); /* 盒子阴影 */
}

/* 针对全站的基础样式重置 */
*,
*::before,
*::after {
  box-sizing: border-box; /* 设置所有元素的盒模型为border-box */
}

body {
  margin: 0; /* 去掉默认的边距 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置字体 */
  background-color: var(--bg-color); /* 应用背景色变量 */
  color: var(--text-primary-color); /* 应用主要文字颜色 */
}

/* 月历容器风格 */
.calendar-container {
  max-width: 800px; /* 设置最大宽度 */
  background: white; /* 背景色为白色 */
  margin: 0.1em auto 0.5em auto; /* 顶部和底部外边距分别设置为0.1em和0.5em，左右外边距为auto */
  padding: 2em; /* 内边距为2em */
  border-radius: var(--border-radius); /* 应用圆角 */
  box-shadow: var(--box-shadow); /* 应用阴影 */
}

/* 月历头部风格 */
.calendar-header {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 子元素两端对齐 */
  align-items: center; /* 子元素垂直居中 */
  margin-bottom: 1em; /* 底部外边距为1em */
  background: var(--header-bg-color); /* 应用头部背景色 */
  color: var(--header-text-color); /* 应用头部文字颜色 */
  padding: 0.5em 1em; /* 内边距分别为0.5em和1em */
  border-radius: var(--border-radius); /* 应用圆角 */
}

.calendar-header button {
  background: none; /* 去掉默认背景 */
  border: 2px solid var(--header-text-color); /* 给按钮添加边框 */
  padding: 0.5em 1em; /* 增加内边距 */
  border-radius: var(--border-radius); /* 应用圆角 */
  color: var(--header-text-color); /* 应用文字颜色 */
  cursor: pointer; /* 鼠标样式为手型 */
  transition: background-color 0.3s, color 0.3s; /* 背景色和文字颜色过渡效果 */
}

.calendar-header button:hover {
  background-color: var(--header-text-color); /* 悬停时背景色 */
  color: var(--header-bg-color); /* 悬停时文字颜色 */
}

.calendar-header-title {
  font-size: 1.55rem; /* 调整标题字体大小 */
  font-weight: bold; /* 字体加粗 */
}

/* 月历网格风格 */
.calendar-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(7, 1fr); /* 网格列数为7，每列平分宽度 */
  gap: 0.2em; /* 网格间距 */
}

/* 工作日标题风格 */
.day-titles {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(7, 1fr); /* 网格列数为7，每列平分宽度 */
  margin-bottom: 1em; /* 底部外边距为1em */
  text-align: center; /* 文字居中 */
  font-weight: bold; /* 文字加粗 */
  color: var(--text-secondary-color); /* 应用次要文字颜色 */
}

/* 月历单元格风格 */
.calendar-day {
  border: 0px solid var(--grid-border-color); /* 边框颜色 */
  padding: 0.5em; /* 内边距为0.5em */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 元素垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  border-radius: var(--border-radius); /* 应用圆角 */
  background-color: #ffffff; /* 背景色为白色 */
  cursor: pointer; /* 鼠标样式为手型 */
  transition: background-color 0.3s, transform 0.3s; /* 背景色过渡效果 */
  position: relative; /* 为自定义信息定位提供基础 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

.calendar-day:hover {
  transform: scale(1.05); /* 悬停时放大效果 */
  background-color: var(--cell-hover-bg-color); /* 选中时背景色 */
  transition: transform 0.3s, background-color 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 悬停时添加更明显的阴影 */
}

/* 选中日期点击日期 */
.calendar-day.active {
  background-color: var(--cell-active-bg-color); /* 选中时背景色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
  color: #ff084a; /* 选中时文字颜色 */
  transform: scale(1.05); /* 选中时放大效果 */
  border-radius: 12px; /* 增加圆角 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 增加文本阴影 */
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 添加过渡效果 */
  border: 2px solid #ff084a; /* 增加边框 */
}

.calendar-day.active::after {
  content: '📌'; /* 添加emoji内容 */
  position: absolute; /* 绝对定位 */
  top: 2px; /* 距离顶部2像素 */
  right: 2px; /* 距离右侧2像素 */
  font-size: 8px; /* 设置emoji的大小 */
}

/* 公历日期 */
.solar-date {
  font-size: 1.15rem; /* 字体大小 */
  margin-bottom: -0.2em; /* 底部外边距为负值，调节位置 */
  font-weight: bold; /* 字体加粗 */
  padding-top: 0px; /* 设置顶部内边距 */
  padding-bottom: 2px; /* 设置底部内边距 */
}

/* 农历日期 */
.lunar-date {
  font-size: 0.75rem; /* 字体大小 */
  color: var(--text-secondary-color); /* 应用次要文字颜色 */
  padding-top: 0px; /* 设置顶部内边距 */
  padding-bottom: 0px; /* 设置底部内边距 */
}

/* 干支日期 */
.gan-zhi {
  font-size: 0.75rem; /* 字体大小 */
  color: var(--text-secondary-color); /* 应用次要文字颜色 */
  padding-bottom: 4px; /* 调整底部内边距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .calendar-container {
    padding: 1em; /* 缩小内边距 */
  }
}

/* 当前日期样式 */
/* 当前日期样式 */
.current-day {
  position: relative; /* 设置相对定位，为伪元素定位提供基础 */
  font-weight: bold; /* 字体加粗 */
  background: linear-gradient(135deg, #ffe0e0 25%, transparent 25%) -50px 0, 
              linear-gradient(225deg, #ffe0e0 25%, transparent 25%) -50px 0,
              linear-gradient(315deg, #ffe0e0 25%, transparent 25%),
              linear-gradient(45deg, #ffe0e0 25%, transparent 25%); /* 叠加多个线性渐变背景，创建格子图案 */
  background-size: 100px 100px; /* 设置背景图案的尺寸 */
  background-color: rgba(255, 8, 74, 0.1); /* 背景颜色为半透明的红色 */
  padding: 10px; /* 内边距为10像素 */
  border-radius: 12px; /* 设置圆角半径为12像素 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  transition: all 0.3s ease-in-out; /* 添加所有属性的过渡效果 */
}
.current-day::before {
  content: ''; /* 内容为空 */
  position: absolute; /* 绝对定位 */
  top: -5px; /* 距离顶部-5像素 */
  right: -5px; /* 距离右侧-5像素 */
  bottom: -5px; /* 距离底部-5像素 */
  left: -5px; /* 距离左侧-5像素 */
  background: radial-gradient(circle at center, transparent 75%, #ff084a 75%); /* 圆形径向渐变，中心为透明，外圈为红色 */
  border-radius: 50%; /* 圆形边框 */
  z-index: -1; /* 设置堆叠顺序，使其在文本后面 */
  transform: scale(0); /* 初始缩放为0 */
  transition: transform 0.3s ease-in-out; /* 添加缩放效果的过渡 */
}
.current-day:hover::before {
  transform: scale(1); /* 悬停时缩放为1，显示环绕效果 */
}


.current-day .lunar-date,
.current-day .gan-zhi {
  color: inherit; /* 继承父元素的文字颜色 */
  font-weight: normal; /* 文字不加粗 */
  display: inline-block; /* 设置为行内块元素 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
  transition: transform 0.3s ease-in-out; /* 添加变换效果的过渡 */
}

.current-day:hover .solar-date,
.current-day:hover .lunar-date,
.current-day:hover .gan-zhi {
  transform: scale(1.1); /* 悬停时，文字缩放 */
}

/* 月历单元格内边距调整 */
.calendar-day {
  padding-top: 0.16em; /* 调整顶部内边距 */
  padding-bottom: 0.16em; /* 调整底部内边距 */
}

/* 上月和下月的日期样式 */
.other-month {
  background-color: #f9f9f9; /* 背景色为浅灰色 */
  color: #bbb; /* 浅色文字 */
}

.other-month .solar-date,
.other-month .lunar-date,
.other-month .gan-zhi {
  color: inherit; /* 继承父元素颜色 */
}

/* 自定义信息样式 */
.custom-info-left {
  font-size: 8px; /* 设置字体大小 */
  color: #666;
  position: absolute; /* 绝对定位 */
  top: 2px; /* 距离顶部2像素 */
  left: 2px; /* 距离左侧2像素 */
}

/* 自定义信息样式 运势 */
.custom-info-right {
  font-size: 8px; /* 设置字体大小 */
  color: #666;
  position: absolute; /* 绝对定位 */
  top: 2px; /* 距离顶部2像素 */
  right: 2px; /* 距离右侧2像素 */
}

.custom-info-bottom-right {
  font-size: 8px;
  color: #999;
  position: absolute;
  bottom: 2px;
  right: 2px;
}