/* ====== Footer（网站底部）样式 ====== */
footer {
  background: #f5f5f5;   /* 浅灰背景 */
  width: 100%;
  padding: 20px 10px;    /* 内边距 */
  text-align: center;    /* 内容居中 */
  font-size: 1.0em;      /* 字体稍微小一点 */
  color: #666;           /* 灰色文字 */
}

/* 社交图标容器 */
footer .footer-social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;        /* ✅ 自动换行（图标多时换行） */
  gap: 14px;              /* 图标间距 */
  margin: 6px 0;         /* 上下间距 */
  font-size: 1.5em;       /* 图标大小 */
  max-width: 280px;       /* ✅ 限制宽度，图标多时自动分行，少时保持一行 */
  margin-left: auto;
  margin-right: auto;
}

/* 社交图标悬停效果 */
footer .footer-social a {
  color: #666;            /* 默认颜色 */
  transition: color 0.3s;
}

footer .footer-social a:hover {
  color: #1da1f2;         /* 鼠标悬停变蓝，可按需调整 */
}

/* ====== 备案号一行排版美化 ====== */
footer .footer-records {
  display: flex;
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直对齐 */
  flex-wrap: wrap;            /* 小屏幕自动换行 */
  gap: 15px;                  /* 两个备案号之间的间距 */
  margin-top: 8px;
  font-size: 0.9em;
}

footer .footer-records a {
  color: #666;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;                   /* 图标与文字间距 */
  transition: color 0.3s ease, opacity 0.3s ease;
}

footer .footer-records a:hover {
  color: #1da1f2;             /* 悬停变蓝 */
  opacity: 0.9;
}

footer .footer-records img {
  height: 16px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

footer .footer-records a:hover img {
  opacity: 1;
}