/* 表格容器 */
.table-container {
  max-width: 900px;
  margin: 30px auto;
  padding: 20px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* 表格标题 */
.table-title {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 2px;
}

/* 主表格样式 */
.qianziwen-table {
  width: 100%;
  border-collapse: separate;
  /* 使用separate实现边框间距 */
  border-spacing: 4px;
  /* 单元格之间的间距 */
  margin: 0 auto;
}

/* 单元格样式 */
.qianziwen-table td {
  width: calc(100% / 10);
  /* 平均分配10列宽度 */
  aspect-ratio: 1;
  /* 正方形单元格 */
  padding: 8px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  /* 圆角边框 */
  text-align: center;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  /* 轻微阴影 */
  transition: all 0.3s ease;
  /* 过渡动画 */
}

/* 鼠标悬停效果 */
.qianziwen-table td:hover {
  transform: translateY(-3px);
  /* 轻微上浮 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-color: #a8c7fa;
  background-color: #f8fafc;
}

/* 序号样式 */
.qianziwen-table .number {
  display: block;
  font-size: 12px;
  color: #6495ed;
  /* 蓝色序号 */
  margin-bottom: 4px;
  font-weight: 500;
}

/* 汉字样式 */
.qianziwen-table .char {
  font-size: 20px;
  color: #333;
  font-weight: 500;
  letter-spacing: 1px;
}

/* 隔行变色效果（行级） */
.qianziwen-table tr:nth-child(even) td {
  background-color: #fafdff;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .table-container {
    padding: 10px;
  }

  .qianziwen-table td {
    padding: 4px;
  }

  .qianziwen-table .char {
    font-size: 16px;
  }
}