/* 汉服资料馆 - 页面美化样式
   说明：原样式大量针对 .container / .nav-links / .classic-books-table 等
   页面中并不存在的类名，几乎未生效。此版本改为针对页面真实结构
   （body / p / a / img / table / th / td）编写，保留汉服暖色主题。 */

:root {
  --primary: #8b2a2a;        /* 主色·红褐 */
  --primary-dark: #6e1f1f;
  --secondary: #c8a45c;      /* 次色·金 */
  --bg: #f7f1e3;             /* 背景·米黄 */
  --paper: #fffdf7;          /* 内容纸面 */
  --text: #4a3526;           /* 正文深褐 */
  --muted: #8a7a66;
  --border: #e3d8c0;
}

* {
  box-sizing: border-box;
}

/* 页面整体 */
body {
  margin: 0;
  padding: 30px 16px 64px;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.9;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(
      -15deg,
      transparent,
      transparent 24px,
      rgba(139, 42, 42, 0.025) 24px,
      rgba(139, 42, 42, 0.025) 25px
    );
  background-attachment: fixed;
}

/* 让主体元素居中、限制宽度，整体更规整 */
body > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* 段落：链接密集，留足行距 */
p {
  margin: 0 0 14px;
  line-height: 2.1;
  word-break: break-word;
}

/* 链接：做成可点击的“标签”样式 */
a {
  color: var(--primary);
  text-decoration: none;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

a:hover {
  background-color: var(--primary);
  color: #fff7ec;
  border-color: var(--primary);
}

/* 图片：统一高度、间距、圆角 */
img {
  vertical-align: middle;
  max-height: 180px;
  margin: 0 2px;
  border-radius: 4px;
}

/* 表格美化（页面中的两个数据表） */
table {
  width: 100%;
  max-width: 1080px;
  margin: 22px 0;          /* 改为靠左，不再居中 */
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--secondary);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(110, 31, 31, 0.08);
  font-size: 16px;
}

th,
td {
  padding: 11px 14px;
  border: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}

th {
  background: var(--primary);
  color: #fff7ec;
  font-weight: 600;
  letter-spacing: 1px;
}

th[scope="row"] {
  background: var(--secondary);
  color: #3a2a18;
  font-weight: 600;
}

tbody tr:nth-child(even) td {
  background: rgba(200, 164, 92, 0.06);
}

tbody tr:hover td {
  background: rgba(200, 164, 92, 0.16);
}

/* 移动端适配 */
@media (max-width: 768px) {
  body {
    padding: 16px 12px 36px;
    font-size: 16px;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body > * {
    max-width: 100%;
  }

  /* 链接在手机上作为可点区块，加大点击区域、允许长网址换行 */
  a {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  img {
    max-height: 30px;
  }

  /* 手机表格：用 fixed 布局，列宽由首行决定 */
  table {
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
  }

  /* 专家学者表（表头同时带 scope=col 与 width 属性，可唯一定位）：
     把列宽改为百分比，按原比例（书最宽、名窄）分配，
     恰好填满屏幕、不再横向溢出；两列表无 width 属性，不会被误伤 */
  /* 第一列“名”：单字宽度（横排会出框），其余列按比例分配；五列合计 100% 避免剩余空间挤压首列 */
  th[scope="col"][width]:nth-child(1) { width: 7%; padding: 8px 3px; }
  th[scope="col"][width]:nth-child(2) { width: 52%; }
  th[scope="col"][width]:nth-child(3) { width: 13%; }
  th[scope="col"][width]:nth-child(4) { width: 10%; }
  th[scope="col"][width]:nth-child(5) { width: 18%; }

  th,
  td {
    padding: 8px 10px;
    white-space: normal;
    overflow-wrap: anywhere;   /* 长文本（书列）自动换行，不撑破 */
    word-break: break-word;
  }

  /* 专家学者表（唯一带 scope=col 且含 width 表头的大表）首列“名”：
     单字宽度 + 自然按字换行，与“论”“图”列表现一致，避免横排文字出框；
     并取消 th 默认的加粗与字距，使字号/粗细与论列完全一致 */
  table:has(th[scope="col"][width]) th[scope="row"] {
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    padding: 8px 2px;
    font-weight: 400;
    letter-spacing: normal;
  }
}

/* 超小屏（手机竖屏）进一步收紧 */
@media (max-width: 480px) {
  body {
    padding: 12px 8px 28px;
    font-size: 15px;
  }

  a {
    padding: 5px 9px;
    font-size: 15px;
  }

  img {
    max-height: 66px;
  }

  table {
    font-size: 12px;
  }

  th,
  td {
    padding: 6px 7px;
  }
}

/* 打印样式 */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
    padding: 0;
  }

  body > * {
    max-width: 100%;
  }

  table {
    box-shadow: none;
    border: 1px solid #999;
  }

  a {
    color: #000;
    border: none;
    padding: 0;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
}