/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主题变量 */
:root {
  /* 浅色主题 */
  --bg-color: #f5f5f5;
  --text-color: #333333;
  --primary-color: #e2db91;
  --secondary-color: #ccd78b;
  --card-bg: #ffffff;
  --card-bg-transparent: rgba(255, 255, 255, 0.3);
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-text: #333333;
  --border-color: #e0e0e0;
}

/* 深色主题 */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --primary-color: #6c986c;
  --secondary-color: #82ae82;
  --card-bg: #2d2d2d;
  --card-bg-transparent: rgba(45, 45, 45, 0.3);
  --nav-bg: rgba(45, 45, 45, 0.95);
  --nav-text: #e0e0e0;
  --border-color: #444444;
}

/* 深色主题下的盒子样式 */
[data-theme="dark"] .left-combined-box,
[data-theme="dark"] .combined-box {
  background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .carousel-section,
[data-theme="dark"] .terms-detail-section,
[data-theme="dark"] .terms-culture-section,
[data-theme="dark"] .overview-section,
[data-theme="dark"] .recommendations-section,
[data-theme="dark"] .culture-item,
[data-theme="dark"] .detail-item {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* 节气总览和内容推荐中的小盒子 */
[data-theme="dark"] .overview-item,
[data-theme="dark"] .recommendation-item {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* 国风主题 */
[data-theme="chinese"] {
  --bg-color: #f9f2e8;
  --text-color: #8b4513;
  --primary-color: #e7c285;
  --secondary-color: #d3bc92;
  --card-bg: #f5efe6;
  --card-bg-transparent: rgba(245, 239, 230, 0.8);
  --nav-bg: rgba(245, 239, 230, 0.95);
  --nav-text: #8b4513;
  --border-color: #e8d5c4;
}

/* 清新主题 */
[data-theme="fresh"] {
  --bg-color: #f0f8ff;
  --text-color: #2c3e50;
  --primary-color: #d4f1d4;
  --secondary-color: #b8e6b8;
  --card-bg: #f0f8ff;
  --card-bg-transparent: rgba(240, 248, 255, 0.3);
  --nav-bg: rgba(240, 248, 255, 0.95);
  --nav-text: #2c3e50;
  --border-color: #d6eaf8;
}

body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  background-image: url('tp/背景图.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 30px;
}

/* 头部区域 */
.header {
  background: var(--card-bg-transparent);
  color: var(--text-color);
  padding: 40px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.title-section h1 {
  font-size: 2em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  margin-left: 50px;
}

.title-section h2 {
  font-size: 1.2em;
  font-weight: normal;
  opacity: 0.9;
  color: var(--text-color);
  margin-left: 185px;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--card-bg);
  opacity: 0.8;
  padding: 10px 20px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

.top-right .item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  color: var(--text-color);
}

.top-right .item:hover {
  transform: translateY(-2px);
}

.login-item {
  position: relative;
}

.login-form {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--card-bg-transparent);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 200px;
  margin-top: 10px;
  backdrop-filter: blur(10px);
}

.login-form input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-color);
}

.login-form button {
  width: 100%;
  padding: 8px;
  background: var(--primary-color);
  color: var(--nav-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.login-form button:hover {
  background: var(--secondary-color);
  transform: translateY(-2px);
}

/* 雨滴动画 */
/* 特效容器 */
.effect-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1001;
  overflow: hidden;
}

/* 通用特效样式 */
.effect-drop {
  position: absolute;
  top: -50px;
}

/* 雨滴特效 */
.rain-drop {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
  width: 2px;
  border-radius: 0 0 50% 50%;
  animation: rain-fall linear infinite;
}

@keyframes rain-fall {
  0% {
    transform: translateY(-100px);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* 绿叶特效 */
.leaves-drop {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  border-radius: 50% 0 50% 50%;
  animation: leaves-fall ease-in-out infinite;
}

@keyframes leaves-fall {
  0% {
    transform: translateY(-50px) rotate(0deg) translateX(0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  15% {
    transform: translateY(15vh) rotate(54deg) translateX(15px);
  }

  30% {
    transform: translateY(30vh) rotate(108deg) translateX(-10px);
  }

  45% {
    transform: translateY(45vh) rotate(162deg) translateX(12px);
  }

  60% {
    transform: translateY(60vh) rotate(216deg) translateX(-8px);
  }

  75% {
    transform: translateY(75vh) rotate(270deg) translateX(10px);
    opacity: 1;
  }

  85% {
    transform: translateY(85vh) rotate(315deg) translateX(-5px);
    opacity: 0.5;
  }

  100% {
    transform: translateY(100vh) rotate(360deg) translateX(0);
    opacity: 0;
  }
}

/* 炊烟特效 */
.smoke-drop {
  background: radial-gradient(circle, rgba(200, 200, 200, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  animation: smoke-rise ease-out infinite;
}

@keyframes smoke-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translateY(-50vh) translateX(30px) scale(1.5);
    opacity: 0.3;
  }

  100% {
    transform: translateY(-100vh) translateX(-20px) scale(2);
    opacity: 0;
  }
}

/* 雪花特效 */
.snow-drop {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  border-radius: 50%;
  animation: snow-fall ease-in-out infinite;
  top: -100px;
}

@keyframes snow-fall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  25% {
    transform: translateY(25vh) rotate(90deg) translateX(20px);
  }

  50% {
    transform: translateY(50vh) rotate(180deg) translateX(-15px);
  }

  75% {
    transform: translateY(75vh) rotate(270deg) translateX(25px);
  }

  95% {
    opacity: 1;
  }

  100% {
    transform: translateY(calc(100vh + 100px)) rotate(360deg) translateX(-10px);
    opacity: 0;
  }
}

/* 雨滴切换按钮 */
.rain-toggle-btn {
  background: var(--card-bg-transparent);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.rain-toggle-btn:hover {
  background: var(--card-bg);
  transform: scale(1.1);
}

.rain-toggle-btn.active {
  background: var(--card-bg);
  box-shadow: 0 0 10px var(--primary-color);
}

/* 特效菜单 */
.effect-item {
  position: relative;
}

.effect-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--card-bg-transparent);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  padding: 8px;
  min-width: 120px;
  backdrop-filter: blur(10px);
  z-index: 9999;
}

.effect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-color);
  transition: all 0.2s ease;
  text-align: left;
}

.effect-option:hover {
  background: var(--primary-color);
  color: var(--nav-text);
}

.effect-option span:first-child {
  font-size: 16px;
}

/* 导航栏 */
nav {
  background: var(--nav-bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.nav-content {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  padding: 15px 0;
}

.nav-content a {
  text-decoration: none;
  color: var(--nav-text);
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.nav-content a:hover {
  color: var(--primary-color);
}

.nav-content a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.nav-content a:hover::after {
  width: 100%;
}

/* 主要内容区域 */
main {
  padding: 40px 0;
}

.hero-section {
  background: var(--card-bg-transparent);
  border-radius: 10px;
  padding: 40px;
  padding-left: 240px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.hero-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: var(--primary-color);
}

.hero-section p {
  font-size: 1.1em;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 节气总览内容 */
.overview-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.overview-item {
  background: var(--card-bg-transparent);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  position: relative;
}

.overview-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.overview-item h3 {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 1.3em;
}

.overview-item p {
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--text-color);
}

/* 内容推荐 */
.recommendations-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.recommendation-item {
  background: var(--card-bg-transparent);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
}

.recommendation-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.recommendation-item h3 {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 1.3em;
}

.recommendation-item p {
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--text-color);
}

/* 两列布局 */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
  align-items: stretch;
}

.main-left {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100%;
  height: 100%;
}

.main-right {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100%;
  height: 100%;
}

/* 左侧组合盒子样式 */
.left-combined-box {
  background: var(--card-bg-transparent);
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(10px);
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

/* 轮播图样式 */
.carousel-section {
  width: 100%;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}


.carousel-section h2 {
  font-size: 1.8em;
  margin-bottom: 25px;
  color: var(--primary-color);
}

.solar-carousel {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 15px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  min-width: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 15px;
}

.slide-caption {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1.1em;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.carousel-prev:hover,
.carousel-next:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: 15px;
}

.carousel-next {
  right: 15px;
}

.carousel-indicators {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scale(1.2);
}

/* 节气详解样式 */
.terms-detail-section {
  flex: 1;
  max-height: 600px;
  overflow-y: scroll;
  width: 100%;
}

/* 节气文化样式 */
.terms-culture-section {
  flex: 1;
  overflow-y: scroll;
  width: 100%;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
}

.terms-culture-section h2 {
  font-size: 1.8em;
  margin-bottom: 25px;
  color: var(--primary-color);
}

.terms-culture-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.culture-item {
  padding: 20px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  position: relative;
}

.culture-item h3 {
  font-size: 1.3em;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.culture-item p {
  line-height: 1.8;
  color: var(--text-color);
}

/* 节气详解标题样式 */
.terms-detail-section h2 {
  line-height: 1.8;
  color: var(--text-color);
}

.terms-detail-section h2 {
  font-size: 1.8em;
  margin-bottom: 25px;
  color: var(--primary-color);
}

.terms-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.term-detail-item {
  background: var(--card-bg-transparent);
  border-radius: 12px;
  padding: 22px;
  transition: all 0.3s ease;
  position: relative;
}

.term-detail-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.term-detail-item h3 {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 1.3em;
}

/* 收藏图标样式 */
.favorite-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--primary-color);
  font-size: 16px;
  cursor: pointer;
  color: var(--primary-color);
  opacity: 0.8;
  transition: all 0.3s ease;
  padding: 6px 10px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  box-sizing: border-box;
}

.favorite-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.favorite-btn.favorited {
  opacity: 1;
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.term-detail-item h3 .emoji-icon {
  font-size: 2em;
  display: inline-block;
  transform: scaleX(2);
}

.term-detail-item p {
  line-height: 1.8;
  color: var(--text-color);
  font-size: 1.05em;
}

/* 组合盒子样式 */
.combined-box {
  background: var(--card-bg-transparent);
  border-radius: 15px;
  padding: 35px;
  backdrop-filter: blur(10px);
  width: 100%;
}

/* 右侧栏样式 */
.overview-section,
.recommendations-section {
  width: 100%;
}

.overview-section {
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--border-color);
}

.overview-section h2,
.recommendations-section h2 {
  font-size: 1.8em;
  margin-bottom: 25px;
  color: var(--primary-color);
}

/* 右侧栏内容项 */
.overview-content,
.recommendations-content {
  gap: 25px;
}

.overview-item,
.recommendation-item {
  padding: 25px;
  border-radius: 12px;
}

.overview-item h3,
.recommendation-item h3 {
  font-size: 1.4em;
  margin-bottom: 18px;
}

.overview-item p,
.recommendation-item p {
  font-size: 1.05em;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* 页脚 */
footer {
  background: var(--card-bg-transparent);
  color: var(--text-color);
  padding: 30px 0;
  margin-top: 50px;
  backdrop-filter: blur(10px);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-info {
  font-size: 0.9em;
  opacity: 0.8;
}

.footer-links a {
  color: var(--text-color);
  margin: 0 10px;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  opacity: 1;
}

/* ========== 响应式设计 ========== */

/*
 * 断点策略：
 *   ≤480px      手机竖屏
 *   481-768px   平板 / 手机横屏
 *   769-1024px  小屏桌面 / 平板横屏
 *   1025-1280px 标准桌面
 *   1281px+     大屏桌面
 */

/* ============================================================
   手机端 — 小屏幕设备 (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  /* 移动端 fixed 背景性能差，改为 scroll */
  body {
    background-attachment: scroll;
  }

  .container {
    padding: 0 10px;
  }

  /* ---- 头部 ---- */
  .header {
    padding: 15px 0;
  }

  .header-content {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .title-section {
    width: 100%;
    text-align: center;
  }

  .title-section h1 {
    font-size: 1.2em;
    white-space: normal;
    margin-left: 0;
    margin-bottom: 6px;
  }

  .title-section h2 {
    font-size: 0.85em;
    margin-left: 0;
  }

  .top-right {
    width: 100%;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-radius: 20px;
  }

  .top-right .item {
    font-size: 0.8em;
  }

  .rain-toggle-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .login-form {
    min-width: 180px;
    right: -20px;
  }

  .effect-menu {
    right: -10px;
    min-width: 100px;
  }

  /* ---- 导航 ---- */
  .nav-content {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .nav-content a {
    padding: 6px 10px;
    font-size: 0.8em;
  }

  /* ---- 主体双栏 → 单栏 ---- */
  .main-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .main-left,
  .main-right {
    width: 100%;
    gap: 20px;
  }

  main {
    padding: 20px 0;
  }

  /* ---- hero-section ---- */
  .hero-section {
    padding: 20px 12px;
    padding-left: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
  }

  .hero-section h2 {
    font-size: 1.4em;
    margin-bottom: 10px;
  }

  .hero-section p {
    font-size: 0.85em;
    line-height: 1.7;
  }

  /* ---- 左侧组合盒子 ---- */
  .left-combined-box {
    padding: 15px;
    border-radius: 10px;
  }

  /* ---- 轮播图 ---- */
  .carousel-section {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  .carousel-section h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
  }

  .carousel-slide img {
    height: 180px;
  }

  .carousel-prev,
  .carousel-next {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .slide-caption {
    bottom: 8px;
    left: 8px;
    padding: 6px 12px;
    font-size: 0.8em;
    border-radius: 6px;
  }

  /* 轮播指示器 — 移动端只显关键点位 */
  .carousel-indicators {
    bottom: 8px;
    right: 8px;
    gap: 4px;
  }

  .indicator {
    width: 6px;
    height: 6px;
  }

  /* ---- 节气详解 ---- */
  .terms-detail-section {
    max-height: none;
    overflow-y: visible;
  }

  .terms-detail-section h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
  }

  .term-detail-item {
    padding: 14px;
    border-radius: 8px;
  }

  .term-detail-item h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
  }

  .term-detail-item p {
    font-size: 0.85em;
    line-height: 1.7;
  }

  /* ---- 节气文化 ---- */
  .terms-culture-section {
    margin-top: 15px;
    padding-top: 15px;
  }

  .terms-culture-section h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
  }

  .terms-culture-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .culture-item {
    padding: 14px;
  }

  .culture-item h3 {
    font-size: 1.1em;
  }

  .culture-item p {
    font-size: 0.85em;
    line-height: 1.7;
  }

  /* ---- 收藏按钮 ---- */
  .favorite-btn {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    font-size: 12px;
    padding: 4px 8px;
  }

  /* ---- 右侧组合盒子 ---- */
  .combined-box {
    padding: 15px;
    border-radius: 10px;
  }

  .overview-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .overview-section h2,
  .recommendations-section h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
  }

  .overview-content,
  .recommendations-content {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
  }

  .overview-item,
  .recommendation-item {
    padding: 14px;
  }

  .overview-item h3,
  .recommendation-item h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
  }

  .overview-item p,
  .recommendation-item p {
    font-size: 0.85em;
    line-height: 1.7;
  }

  /* ---- 页脚 ---- */
  footer {
    padding: 20px 0;
    margin-top: 30px;
  }

  .footer-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 0 10px;
  }

  .footer-links {
    flex-direction: column;
    gap: 6px;
  }

  .footer-links a {
    font-size: 0.85em;
  }

  .footer-info {
    font-size: 0.8em;
  }
}

/* ============================================================
   平板端 — 中等屏幕 (481-768px)
   ============================================================ */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding: 0 15px;
  }

  body {
    background-attachment: scroll;
  }

  /* ---- 头部 ---- */
  .header {
    padding: 20px 0;
  }

  .header-content {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .title-section {
    width: 100%;
    text-align: center;
  }

  .title-section h1 {
    font-size: 1.5em;
    white-space: normal;
    margin-left: 0;
    margin-bottom: 8px;
  }

  .title-section h2 {
    font-size: 1em;
    margin-left: 0;
  }

  .top-right {
    width: 100%;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 15px;
  }

  .top-right .item {
    font-size: 0.85em;
  }

  /* ---- 导航 ---- */
  .nav-content {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
  }

  .nav-content a {
    padding: 6px 14px;
    font-size: 0.85em;
  }

  /* ---- 主体双栏 → 单栏 ---- */
  .main-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .main-left,
  .main-right {
    width: 100%;
    gap: 25px;
  }

  main {
    padding: 25px 0;
  }

  /* ---- hero-section ---- */
  .hero-section {
    padding: 25px 16px;
    padding-left: 16px;
    margin-bottom: 20px;
  }

  .hero-section h2 {
    font-size: 1.6em;
  }

  .hero-section p {
    font-size: 0.95em;
  }

  /* ---- 左侧组合盒子 ---- */
  .left-combined-box {
    padding: 20px;
  }

  /* ---- 轮播图 ---- */
  .carousel-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .carousel-section h2 {
    font-size: 1.5em;
  }

  .carousel-slide img {
    height: 240px;
  }

  /* ---- 节气详解 ---- */
  .terms-detail-section {
    max-height: none;
    overflow-y: visible;
  }

  .terms-detail-section h2 {
    font-size: 1.5em;
  }

  .term-detail-item {
    padding: 18px;
  }

  .term-detail-item p {
    font-size: 0.9em;
  }

  /* ---- 节气文化 ---- */
  .terms-culture-section {
    margin-top: 20px;
    padding-top: 20px;
  }

  .terms-culture-section h2 {
    font-size: 1.5em;
  }

  .terms-culture-content {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .culture-item {
    padding: 16px;
  }

  .culture-item p {
    font-size: 0.9em;
  }

  /* ---- 右侧组合盒子 ---- */
  .combined-box {
    padding: 20px;
  }

  .overview-section {
    margin-bottom: 25px;
    padding-bottom: 25px;
  }

  .overview-section h2,
  .recommendations-section h2 {
    font-size: 1.5em;
  }

  .overview-content,
  .recommendations-content {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 15px;
  }

  .overview-item,
  .recommendation-item {
    padding: 18px;
  }

  .overview-item p,
  .recommendation-item p {
    font-size: 0.9em;
  }

  /* ---- 页脚 ---- */
  footer {
    padding: 25px 0;
    margin-top: 35px;
  }

  .footer-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 0 15px;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}

/* ============================================================
   小屏桌面 — (769-1024px)  双栏布局但更紧凑
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }

  /* ---- 头部 ---- */
  .header {
    padding: 25px 0;
  }

  .header-content {
    gap: 20px;
  }

  .title-section h1 {
    font-size: 1.6em;
    margin-left: 20px;
  }

  .title-section h2 {
    font-size: 1.05em;
    margin-left: 80px;
  }

  .top-right {
    gap: 14px;
    padding: 8px 16px;
  }

  /* ---- 导航 ---- */
  .nav-content {
    gap: 20px;
  }

  .nav-content a {
    font-size: 0.9em;
  }

  /* ---- 主体双栏 ---- */
  .main-layout {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }

  main {
    padding: 30px 0;
  }

  /* ---- hero-section ---- */
  .hero-section {
    padding: 30px 20px;
    padding-left: 60px;
    border-radius: 10px;
  }

  .hero-section h2 {
    font-size: 1.6em;
  }

  .hero-section p {
    font-size: 0.95em;
  }

  /* ---- 左侧组合盒子 ---- */
  .left-combined-box {
    padding: 22px;
  }

  /* ---- 轮播图 ---- */
  .carousel-section h2 {
    font-size: 1.5em;
  }

  .carousel-slide img {
    height: 260px;
  }

  /* ---- 节气详解 ---- */
  .terms-detail-section {
    max-height: 500px;
  }

  .terms-detail-section h2 {
    font-size: 1.5em;
  }

  .term-detail-item p {
    font-size: 0.9em;
  }

  /* ---- 节气文化 ---- */
  .terms-culture-section h2 {
    font-size: 1.5em;
  }

  .terms-culture-content {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .culture-item p {
    font-size: 0.9em;
  }

  /* ---- 右侧组合盒子 ---- */
  .combined-box {
    padding: 22px;
  }

  .overview-section {
    margin-bottom: 25px;
    padding-bottom: 25px;
  }

  .overview-section h2,
  .recommendations-section h2 {
    font-size: 1.5em;
  }

  .overview-content,
  .recommendations-content {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 15px;
  }

  .overview-item p,
  .recommendation-item p {
    font-size: 0.9em;
  }
}

/* ============================================================
   标准桌面 — (1025-1280px)
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1280px) {
  .container {
    padding: 0 25px;
  }

  .title-section h1 {
    font-size: 1.8em;
    margin-left: 35px;
  }

  .title-section h2 {
    font-size: 1.1em;
    margin-left: 130px;
  }

  .nav-content {
    gap: 28px;
  }

  .main-layout {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .hero-section {
    padding: 35px 25px;
    padding-left: 140px;
  }

  .carousel-slide img {
    height: 300px;
  }
}

/* ============================================================
   大屏桌面 — (1281px+)
   ============================================================ */
@media (min-width: 1281px) {
  .container {
    padding: 0 30px;
  }

  .main-layout {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .hero-section {
    padding: 40px;
    padding-left: 240px;
  }

  .carousel-slide img {
    height: 320px;
  }
}