/*
 * 课本库 · 教材检索页 —— 静态还原
 * 设计源：Ardot「课本库 · 教材检索页设计」/ 画布 1440 × 2000 / 根帧 2:1
 * 所有颜色、字号、行高、圆角、gap、padding 均取自设计文件的节点读取结果。
 * 设计标注 AUTO 的行高，按该文本节点在设计稿中的实际盒高落地（可追溯到 absoluteBoundingBox）。
 * 与 index.html 共用同一套 token、字体子集与响应式断点。
 */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('./assets/fonts/noto-sans-sc-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif SC';
  src: url('./assets/fonts/noto-serif-sc-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/geist-mono-500.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  /* 纸底 / 墨色 / 朱红：来自各节点 fills[0].color */
  --paper:        #F7F4EC;
  --paper-alt:    #FBF8F1;
  --paper-card:   #FFFDF8;
  --paper-footer: #F2EEE4;
  --tag-bg:       #F7F0EC;
  --ink:          #1C1B19;
  --ink-2:        #6B675E;
  --ink-3:        #8C8578;
  --red:          #B4462F;
  --btn-ink:      #FFFDF8;
  --line:         #E3DDD0;
  --line-footer:  #DDD6C7;

  /* 六个封面印墨色：2:122 / 2:136 / 2:150 / 2:164 / 2:178 / 2:192 */
  --cover-1: #B4462F;
  --cover-2: #3F5A6B;
  --cover-3: #7A5C42;
  --cover-4: #6B7A4B;
  --cover-5: #5B5A7A;
  --cover-6: #4F6B55;

  --shadow: 0 2px 8px rgba(28, 28, 26, .06); /* 设计 DROP_SHADOW y2 / blur8 / #1C1C1A@.06 */

  --font-sans:  'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-mono:  'Geist Mono', 'SFMono-Regular', Menlo, monospace;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
img { display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
button { font: inherit; }
.page { width: 100%; max-width: 1440px; margin: 0 auto; }

/* ---- 2:2 顶部导航（88px / padding 0 120 / space-between） ---- */
.site-header {
  height: 88px;
  padding: 0 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 26px; height: 26px; flex: none; }
.brand-name {
  font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 32px;
  color: var(--ink); white-space: nowrap;
}
.brand-en {
  font-family: var(--font-mono); font-weight: 500; font-size: 9px; line-height: 12px;
  color: var(--ink-3); white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink); white-space: nowrap; }
.nav-links a.current { font-weight: 500; color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 24px; }
.header-actions .about { font-size: 14px; line-height: 20px; color: var(--ink); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 3px; background: var(--red); color: var(--btn-ink);
  font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: opacity .18s ease;
}
.btn:hover { opacity: .9; }
.btn-header { height: 44px; padding: 0 22px; font-size: 14px; line-height: 20px; }
.btn-search { flex: 0 0 148px; height: 56px; font-size: 16px; line-height: 23px; }

.header-divider { height: 1px; background: var(--line); }

/* ---- 2:19 页面标题区（padding 56/120/48 · gap 80 · center） ---- */
.intro {
  display: flex; align-items: center; gap: 80px;
  padding: 56px 120px 48px; background: var(--paper);
}
.intro-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.crumb { font-size: 12px; line-height: 17px; color: var(--ink-3); }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow-line { width: 28px; height: 2px; background: var(--red); flex: none; }
.eyebrow-text { font-size: 12px; line-height: 17px; font-weight: 500; color: var(--red); white-space: pre-wrap; }
.intro-title {
  font-family: var(--font-serif); font-weight: 700; font-size: 52px; line-height: 72px;
  color: var(--ink);
}
.intro-desc { width: 620px; max-width: 100%; font-size: 16px; line-height: 28px; color: var(--ink-2); }

/* 2:27 数据来源卡片（300 × 192 / padding 24 / gap 10 / radius 3） */
.source-card {
  flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 3px; background: var(--paper-alt);
}
.source-label { font-size: 11px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.source-name {
  font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 32px;
  color: var(--ink); white-space: pre-line;
}
.source-note { font-size: 13px; line-height: 22px; color: var(--ink-2); }

/* ---- 2:31 / 2:32 检索面板（padding 0 120；面板 padding 32 / gap 24 / radius 3） ---- */
.search-section { padding: 0 120px; background: var(--paper); }
.panel {
  display: flex; flex-direction: column; gap: 24px;
  padding: 32px; border-radius: 3px; background: var(--paper-card);
  box-shadow: var(--shadow);
}
.search-row { display: flex; align-items: center; gap: 12px; }
.search-input {
  flex: 1; min-width: 0; height: 56px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; border-radius: 3px; background: var(--paper);
}
.search-icon { width: 18px; height: 18px; flex: none; }
.search-input input {
  flex: 1; min-width: 0; height: 22px; padding: 0; margin: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--ink);
}
.search-input input::placeholder { color: var(--ink-3); opacity: 1; }
.panel-divider { height: 1px; background: var(--line); }

/* 2:42 筛选条件组（4 行 / gap 18 / 每行 label 56 + gap 20 + chips gap 8） */
.filters { display: flex; flex-direction: column; gap: 18px; }
.filter-row { display: flex; align-items: center; gap: 20px; }
.filter-label {
  flex: 0 0 56px; font-size: 13px; line-height: 19px; font-weight: 500; color: var(--ink-3);
}
.chips { display: flex; align-items: center; gap: 8px; }
.chip {
  height: 30px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; background: var(--paper);
  font-size: 13px; line-height: 19px; font-weight: 400; color: var(--ink); white-space: nowrap;
}
.chip.is-active { background: var(--red); color: var(--btn-ink); font-weight: 500; }

/* 2:43 已选条件行（gap 12 / 标签高 28 / radius 2） */
.active-row { display: flex; align-items: center; gap: 12px; }
.active-label { font-size: 13px; line-height: 19px; color: var(--ink-3); }
.tag {
  height: 28px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; background: var(--tag-bg);
  font-size: 12px; line-height: 17px; font-weight: 500; color: var(--red); white-space: nowrap;
}
.clear { font-size: 13px; line-height: 19px; color: var(--red); white-space: nowrap; }

/* ---- 2:106 检索结果区（padding 56/120/72 · gap 28） ---- */
.results {
  display: flex; flex-direction: column; gap: 28px;
  padding: 56px 120px 72px; background: var(--paper);
}
.results-head { display: flex; align-items: center; justify-content: space-between; }
.result-stats { display: flex; align-items: center; gap: 16px; }
.result-title { font-family: var(--font-serif); font-weight: 700; font-size: 26px; line-height: 37px; color: var(--ink); }
.page-hint { font-size: 13px; line-height: 19px; color: var(--ink-3); }
.result-tools { display: flex; align-items: center; gap: 20px; }
.sort-note { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.grid-icon { width: 20px; height: 20px; flex: none; }

/* 2:118 + 2:119 两张卡片行合并为 3 列网格：列间距 24，行间距与区块 gap 同为 28 */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.book-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 3px; background: var(--paper-card); box-shadow: var(--shadow);
}
.cover {
  height: 200px; padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--cover);
}
.cover-main { display: flex; flex-direction: column; gap: 8px; }
.cover-cat { font-size: 11px; line-height: 16px; color: var(--btn-ink); }
.cover-subject { font-family: var(--font-serif); font-weight: 700; font-size: 34px; line-height: 46px; color: var(--btn-ink); }
.cover-vol { font-size: 14px; line-height: 20px; color: var(--btn-ink); }
.cover-pub { font-size: 11px; line-height: 16px; color: var(--btn-ink); }
.card-meta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 24px 22px; background: var(--paper-card);
}
.book-name { font-family: var(--font-serif); font-weight: 700; font-size: 18px; line-height: 26px; color: var(--ink); }
.book-meta { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.card-divider { height: 1px; background: var(--line); }
.card-foot { display: flex; align-items: center; justify-content: space-between; }
.book-link { font-size: 13px; line-height: 19px; font-weight: 500; color: var(--red); }
.book-format { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 14px; color: var(--ink-3); }

.no-result { font-size: 13px; line-height: 19px; color: var(--ink-3); }

/* 2:205 分页器（gap 8 / 页码 32×32 / radius 2） */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pager-link { font-size: 13px; line-height: 19px; color: var(--ink-3); white-space: nowrap; }
.pager-link.next { color: var(--ink); font-weight: 500; }
.pager-num {
  width: 32px; height: 32px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-footer); font-size: 13px; line-height: 19px; color: var(--ink);
}
.pager-num.current { background: var(--red); color: var(--btn-ink); font-weight: 500; }
.pager-dots { font-size: 13px; line-height: 19px; color: var(--ink-3); }

/* ---- 2:217 页脚（padding 56/120/32 · gap 28） ---- */
.site-footer {
  display: flex; flex-direction: column; gap: 28px;
  padding: 56px 120px 32px; background: var(--paper-footer);
}
.footer-top { display: flex; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 32px; color: var(--ink); }
.footer-tagline { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.footer-source { font-size: 12px; line-height: 17px; color: var(--ink-3); }
.footer-divider { height: 1px; background: var(--line-footer); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-bottom span { font-size: 12px; line-height: 17px; color: var(--ink-3); white-space: pre-wrap; }

/* 交互态：设计稿未定义 hover，沿用首页的 token / 透明度规则 */
.nav-links a:hover, .header-actions .about:hover, .breadcrumb-home:hover,
.clear:hover, .book-link:hover, .pager-link:hover, .pager-num:hover { color: var(--red); }
.btn:focus-visible { outline-offset: 4px; }

/* ---- 响应式重排：沿用首页已锁定策略，桌面 1440 保持设计稿 1:1 ---- */
@media (max-width: 1439px) {
  .site-header { padding: 0 64px; }
  .intro { padding: 56px 64px 48px; gap: 48px; }
  .search-section { padding: 0 64px; }
  .results { padding: 56px 64px 72px; }
  .site-footer { padding: 56px 64px 32px; }
}
@media (max-width: 1023px) {
  .site-header { height: auto; min-height: 88px; flex-wrap: wrap; gap: 16px 32px; padding: 20px 32px; }
  .intro { flex-direction: column; align-items: flex-start; gap: 36px; padding: 48px 32px; }
  .intro-copy, .intro-desc { width: 100%; }
  .source-card { flex: none; width: 100%; max-width: 300px; }
  .search-section { padding: 0 32px; }
  .filter-row { align-items: flex-start; }
  .chips { flex-wrap: wrap; }
  .results { padding: 48px 32px 64px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { padding: 48px 32px 32px; }
}
@media (max-width: 767px) {
  .site-header { padding: 20px 24px; }
  .nav-links { gap: 20px; }
  .header-actions { gap: 16px; }
  .intro { padding: 40px 24px; gap: 32px; }
  .intro-title { font-size: clamp(36px, 9vw, 52px); line-height: 1.38; }
  .intro-desc { font-size: 15px; line-height: 26px; }
  .source-card { max-width: none; }
  .search-section { padding: 0 24px; }
  .panel { padding: 24px; gap: 20px; }
  .search-row { flex-direction: column; align-items: stretch; }
  .search-input { flex: none; width: 100%; }
  .btn-search { flex: none; width: 100%; }
  .active-row { flex-wrap: wrap; }
  .results { padding: 40px 24px 56px; gap: 24px; }
  .results-head { flex-wrap: wrap; gap: 12px; }
  .result-title { font-size: 22px; line-height: 32px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cover-subject { font-size: 30px; line-height: 42px; }
  .pager { flex-wrap: wrap; }
  .site-footer { padding: 40px 24px 28px; gap: 24px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 480px) {
  .nav-links a { font-size: 13px; }
  .header-actions .about { font-size: 13px; }
  .filter-label { flex-basis: 48px; }
}