:root {  /* CSS变量定义区 */
  --footer-max-width: 1200px;  /* footer最大宽度 */
  --footer-padding-x: 20px;  /* 左右内边距 */
  --divider-color: rgba(255, 255, 255, 0.08);  /* 分隔线颜色 */
}

.site-footer {  /* 页脚容器 */
  background-color: #111;  /* 背景颜色为深灰 */
  color: #ccc;  /* 默认字体颜色为浅灰 */
  font-size: 14px;  /* 字体大小 */
  line-height: 1.6;  /* 行高 */
  font-family: "Microsoft YaHei", "Helvetica Neue", sans-serif;  /* 字体族 */
}

.site-footer .wrapper {  /* 页脚内部包裹容器 */
  max-width: var(--footer-max-width);  /* 最大宽度为定义的变量 */
  margin: 0 auto;  /* 水平居中 */
  padding: 0 var(--footer-padding-x);  /* 左右内边距为定义的变量 */
}

.footer-banner {  /* 顶部提示区域 */
  padding: 40px 0;  /* 上下内边距 */
  border-top: 1px solid var(--divider-color);  /* 顶部边框线 */
  text-align: center;  /* 文本居中 */
}

.footer-banner .wrapper {  /* 顶部提示的容器 */
  display: flex;  /* 使用flex布局 */
  flex-direction: column;  /* 垂直排列子元素 */
  align-items: center;  /* 子元素水平居中 */
  gap: 16px;  /* 子元素垂直间距 */
}

.footer-banner h3 {  /* 提示标题 */
  font-size: 18px;  /* 字体大小 */
  font-weight: bold;  /* 加粗字体 */
  color: #fff;  /* 字体颜色为白色 */
  margin: 0;  /* 清除默认外边距 */
}

.footer-banner p {  /* 提示段落 */
  font-size: 14px;  /* 字体大小 */
  color: #aaa;  /* 字体颜色为浅灰 */
  margin: 0;  /* 清除外边距 */
  line-height: 1.6;  /* 行高 */
  max-width: 800px;  /* 最大宽度限制 */
}

.footer-download-btn {  /* 下载按钮样式 */
  display: inline-block;  /* 行内块元素 */
  padding: 10px 24px;  /* 内边距 */
  background-color: #333;  /* 背景色深灰 */
  color: #fff;  /* 字体颜色白色 */
  border-radius: 999px;  /* 超大圆角 */
  font-size: 14px;  /* 字体大小 */
  text-decoration: none;  /* 无下划线 */
  border: 1px solid #555;  /* 边框颜色 */
  transition: background-color 0.3s ease;  /* 背景过渡效果 */
}

.footer-download-btn:hover {  /* 按钮悬停样式 */
  background-color: #555;  /* 背景色变亮 */
}

.footer-links {  /* 链接区域 */
  border-top: 1px solid var(--divider-color);  /* 顶部边框线 */
  padding: 40px 0;  /* 上下内边距 */
}

.footer-links .wrapper {  /* 链接容器 */
  display: flex;  /* 使用flex布局 */
  flex-wrap: wrap;  /* 超出换行 */
  justify-content: space-between;  /* 项目两端对齐 */
  gap: 30px;  /* 项目间距 */
}

.footer-column {  /* 每一列链接 */
  flex: 1 1 200px;  /* 弹性宽度 */
  min-width: 200px;  /* 最小宽度 */
}

.footer-column h4 {  /* 列标题 */
  font-size: 15px;  /* 字体大小 */
  font-weight: bold;  /* 加粗 */
  color: #fff;  /* 字体颜色白色 */
  margin-bottom: 12px;  /* 下外边距 */
}

.footer-column ul {  /* 链接列表 */
  list-style: none;  /* 去除项目符号 */
  padding: 0;  /* 去除内边距 */
  margin: 0;  /* 去除外边距 */
}

.footer-column ul li {  /* 每一项 */
  margin-bottom: 10px;  /* 下间距 */
}

.footer-column ul li a {  /* 链接样式 */
  text-decoration: none;  /* 去下划线 */
  color: #aaa;  /* 字体颜色浅灰 */
  transition: color 0.3s ease;  /* 字体颜色渐变 */
}

.footer-column ul li a:hover {  /* 悬停状态 */
  color: #fff;  /* 字体颜色白色 */
}

.subscribe-form {  /* 订阅表单容器 */
  display: flex;  /* 使用flex布局 */
  flex-direction: column;  /* 垂直排列 */
  gap: 10px;  /* 元素间距 */
}

.subscribe-form input[type="email"] {  /* 邮箱输入框 */
  padding: 8px 12px;  /* 内边距 */
  border: 1px solid #555;  /* 边框颜色 */
  border-radius: 4px;  /* 圆角 */
  background-color: #222;  /* 背景色 */
  color: #eee;  /* 字体颜色 */
  width: 100%;  /* 宽度100% */
}

.subscribe-form button {  /* 提交按钮 */
  padding: 8px 12px;  /* 内边距 */
  background-color: #444;  /* 背景色 */
  border: none;  /* 无边框 */
  color: #fff;  /* 字体颜色 */
  border-radius: 4px;  /* 圆角 */
  cursor: pointer;  /* 鼠标样式 */
  transition: background-color 0.3s;  /* 背景色过渡 */
}

.subscribe-form button:hover {  /* 鼠标悬停样式 */
  background-color: #666;  /* 背景色变亮 */
}

.footer-bottom {  /* 底部版权区域 */
  border-top: 1px solid var(--divider-color);  /* 顶部分隔线 */
  padding: 20px 0;  /* 上下内边距 */
  font-size: 12px;  /* 字体大小 */
  color: #666;  /* 字体颜色 */
  text-align: center;  /* 居中 */
}

.footer-bottom .footer-bottom-links {  /* 版权链接列表 */
  margin-bottom: 10px;  /* 下边距 */
}

.footer-bottom-links a {  /* 链接样式 */
  color: #888;  /* 字体颜色 */
  margin: 0 10px;  /* 左右外边距 */
  text-decoration: none;  /* 去下划线 */
  transition: color 0.3s;  /* 渐变 */
}

.footer-bottom-links a:hover {  /* 鼠标悬停 */
  color: #fff;  /* 字体颜色白色 */
}

.footer-legal a {  /* 法律信息链接 */
  color: #888;  /* 字体颜色 */
  text-decoration: none;  /* 去下划线 */
}

.footer-legal a:hover {  /* 鼠标悬停 */
  color: #fff;  /* 字体颜色白色 */
}

@media (max-width: 768px) {  /* 响应式：平板及以下 */
  .footer-links .wrapper {
    flex-direction: column;  /* 垂直排列 */
    align-items: flex-start;  /* 顶部对齐 */
    gap: 20px;  /* 间距 */
  }

  .footer-banner h3 {
    font-size: 16px;  /* 字体变小 */
  }

  .footer-banner p {
    font-size: 13px;  /* 字体变小 */
  }

  .footer-column {
    width: 100%;  /* 宽度全屏 */
  }
}