/* ============================================================
   通玄 TONGXUAN · 典籍库 dianji.css
   藏书之阁：检索行 × 线装书架 × 展卷阅读
   （颜色仅用设计 token 与金 / 朱砂 / 纸墨 rgba，换肤全靠 token 覆盖）
   ============================================================ */

/* ---------- 工具 ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================
   ① 检索行
   ================================================ */
.dj-search { max-width: 860px; margin: 0 auto 58px; }
.dj-search-box { position: relative; }
.dj-search-icon {
  position: absolute; left: 2px; top: 50%;
  width: 19px; height: 19px;
  transform: translateY(-54%);
  color: var(--gold-700);
  pointer-events: none;
}
.dj-search-input {
  font-size: 19px;
  padding: 12px 8px 12px 36px;
}
.dj-search-input::placeholder { font-size: 15.5px; }
.dj-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 类目 chips */
.dj-chips {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
}
.dj-chip {
  padding: 8px 24px;
  font-family: var(--font-serif);
  font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.16em; text-indent: 0.16em;
  color: var(--paper-ink-soft);
  border: 1px solid rgba(150, 114, 58, 0.45);
  border-radius: 999px;
  background: rgba(250, 247, 239, 0.7);
  transition: color 0.3s, border-color 0.3s, background 0.3s,
              box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.dj-chip:hover {
  transform: translateY(-2px);
  color: var(--gold-700);
  border-color: rgba(184, 145, 75, 0.7);
}
.dj-chip.active {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
  color: #241a08;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(212, 175, 106, 0.3);
}
.dj-chip:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* 藏书计数 */
.dj-count {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 12.5px; letter-spacing: 0.22em; text-indent: 0.22em;
  color: var(--paper-ink-soft);
}

/* ================================================
   ② 书架（线装书封）
   ================================================ */
.dj-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  scroll-margin-top: calc(var(--nav-h) + 32px);
}

.book-card {
  position: relative;
  aspect-ratio: 5 / 7;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(212, 175, 106, 0.3);
  background:
    radial-gradient(ellipse 130% 90% at 82% -12%, rgba(212, 175, 106, 0.13), transparent 55%),
    linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 55%, var(--ink-950) 100%);
  box-shadow: 0 14px 32px rgba(44, 42, 36, 0.2), inset 0 1px 0 rgba(212, 175, 106, 0.16);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}
/* 封面织纹（金线暗绣） */
.book-card::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.09;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23d4af6a' stroke-width='0.8'%3E%3Cpath d='M0 28h56M28 0v56'/%3E%3Ccircle cx='28' cy='28' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
}
/* 封面内框细金线 */
.book-card::after {
  content: "";
  position: absolute; inset: 8px 8px 8px 30px;
  border: 1px solid rgba(212, 175, 106, 0.16);
  border-radius: 4px;
  pointer-events: none;
}
.book-card:hover, .book-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 106, 0.75);
  box-shadow: 0 24px 48px rgba(44, 42, 36, 0.28), 0 0 24px rgba(212, 175, 106, 0.18),
              inset 0 1px 0 rgba(212, 175, 106, 0.22);
}
.book-card:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}
.book-card.active {
  border-color: var(--gold-500);
  box-shadow: 0 18px 40px rgba(44, 42, 36, 0.26), 0 0 0 1px rgba(212, 175, 106, 0.4),
              0 0 28px rgba(212, 175, 106, 0.22);
}

/* 装订线：细金双线 + 四个装订点 */
.book-spine {
  position: absolute; top: 0; bottom: 0; left: 15px;
  width: 8px;
  border-left: 1px solid rgba(212, 175, 106, 0.55);
  border-right: 1px solid rgba(212, 175, 106, 0.3);
  pointer-events: none;
}
.book-spine::after {
  content: "";
  position: absolute; left: 50%; top: 10%; bottom: 10%;
  width: 6px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle 2.1px at 50% 50%, var(--gold-500) 55%, rgba(212, 175, 106, 0) 60%);
  background-size: 100% 25%;
}

/* 竖排书名签 */
.book-title {
  position: absolute; top: 15px; left: 36px;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.15;
  color: var(--gold-300);
  padding: 15px 7px 17px;
  max-height: 74%;
  border: 1px solid rgba(212, 175, 106, 0.4);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(212, 175, 106, 0.12), rgba(212, 175, 106, 0.03));
  box-shadow: inset 0 0 0 1px rgba(212, 175, 106, 0.08);
  transition: color 0.35s, border-color 0.35s;
}
.book-card:hover .book-title { color: var(--gold-400); border-color: rgba(212, 175, 106, 0.6); }

/* 右上角类目小徽（朱砂钤记） */
.book-cat {
  position: absolute; top: 12px; right: 12px;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--paper-50);
  padding: 7px 4px 8px;
  border-radius: 3px;
  background: linear-gradient(155deg, var(--cinnabar), var(--cinnabar-deep));
  box-shadow: 0 3px 8px rgba(150, 53, 44, 0.35), inset 0 0 0 1px rgba(248, 236, 216, 0.25);
}

/* 底部时代作者 */
.book-era {
  position: absolute; left: 36px; right: 14px; bottom: 13px;
  font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--text-low);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 书封入场：显形后逐一立上书架 */
.dj-shelf .book-card { opacity: 0; }
.dj-shelf.in .book-card {
  animation: djBookIn 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
@keyframes djBookIn {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dj-shelf .book-card { opacity: 1; }
  .dj-shelf.in .book-card { animation: none; }
}

/* ================================================
   空态 · 阁中未见此卷
   ================================================ */
.dj-empty {
  padding: 72px 20px 60px;
  text-align: center;
}
.dj-empty-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  font-family: var(--font-serif);
  font-size: 30px; font-weight: 700;
  color: var(--cinnabar);
  border: 1.5px solid rgba(184, 73, 62, 0.55);
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px rgba(184, 73, 62, 0.08);
  transform: rotate(-4deg);
}
.dj-empty-title {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 600;
  letter-spacing: 0.22em; text-indent: 0.22em;
  color: var(--paper-ink);
}
.dj-empty-sub {
  margin-top: 10px;
  font-size: 13.5px; letter-spacing: 0.1em;
  color: var(--paper-ink-soft);
}

/* ================================================
   ③ 展卷区
   ================================================ */
.dj-unfurl {
  max-width: 900px;
  margin: 72px auto 0;
  scroll-margin-top: calc(var(--nav-h) + 26px);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.dj-unfurl:focus { outline: none; }
.dj-unfurl.open { opacity: 1; transform: none; }

/* 卷轴杆（上下各一，金帽轴头） */
.unfurl-rod {
  position: relative; z-index: 2;
  height: 12px;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-bottom: -6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-950));
  border: 1px solid rgba(212, 175, 106, 0.45);
  box-shadow: 0 4px 12px rgba(44, 42, 36, 0.32), inset 0 1px 0 rgba(212, 175, 106, 0.22);
}
.unfurl-rod.bottom { margin-bottom: 0; margin-top: -6px; }
.unfurl-rod::before, .unfurl-rod::after {
  content: "";
  position: absolute; top: 50%;
  width: 17px; height: 17px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--gold-300), var(--gold-600) 72%);
  box-shadow: 0 2px 6px rgba(44, 42, 36, 0.35), inset 0 0 0 1px rgba(150, 114, 58, 0.5);
}
.unfurl-rod::before { left: -8px; }
.unfurl-rod::after { right: -8px; }

/* 卷面（宣纸） */
.unfurl-inner {
  position: relative;
  background: linear-gradient(175deg, var(--paper-50), var(--paper-100) 80%);
  border: 1px solid rgba(184, 145, 75, 0.55);
  border-radius: var(--radius-md);
  padding: 52px 56px 46px;
  box-shadow: 0 26px 64px rgba(44, 42, 36, 0.16), 0 3px 10px rgba(44, 42, 36, 0.07);
  overflow: hidden;
}
/* 纸纹噪点 */
.unfurl-inner::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.unfurl-inner > * { position: relative; }

/* 卷内元素随展卷缓入 */
.unfurl-head, .unfurl-divider, .unfurl-sample, .unfurl-badge-row, .unfurl-actions {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.dj-unfurl.open .unfurl-head      { transition-delay: 0.1s; }
.dj-unfurl.open .unfurl-divider   { transition-delay: 0.18s; }
.dj-unfurl.open .unfurl-sample    { transition-delay: 0.26s; }
.dj-unfurl.open .unfurl-badge-row { transition-delay: 0.36s; }
.dj-unfurl.open .unfurl-actions   { transition-delay: 0.42s; }
.dj-unfurl.open .unfurl-head,
.dj-unfurl.open .unfurl-divider,
.dj-unfurl.open .unfurl-sample,
.dj-unfurl.open .unfurl-badge-row,
.dj-unfurl.open .unfurl-actions { opacity: 1; transform: none; }

/* 卷首：类目印 + 书名 + 提要 */
.unfurl-head { text-align: center; }
.unfurl-cat {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 14px;
  font-family: var(--font-serif);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--cinnabar);
  border: 1px solid rgba(184, 73, 62, 0.45);
  border-radius: 3px;
  background: rgba(184, 73, 62, 0.05);
}
.unfurl-title {
  margin-top: 16px;
  font-size: clamp(27px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--paper-ink);
  line-height: 1.4;
}
.unfurl-title .mark { color: var(--cinnabar); }
.unfurl-meta {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 13.5px; letter-spacing: 0.18em;
  color: var(--paper-ink-soft);
}
.unfurl-intro {
  margin: 18px auto 0;
  max-width: 620px;
  font-size: 15px; line-height: 2.1; letter-spacing: 0.05em;
  color: var(--paper-ink-soft);
}
.unfurl-intro .book-mark { color: var(--cinnabar); }

.unfurl-divider { margin: 28px auto 0; }

/* 样章原文 */
.unfurl-sample { margin-top: 30px; }
.unfurl-sample-tag {
  display: table;
  margin: 0 auto 18px;
  padding: 3px 13px;
  font-family: var(--font-serif);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.26em; text-indent: 0.26em;
  color: var(--gold-700);
  border: 1px dashed rgba(150, 114, 58, 0.55);
  border-radius: 999px;
}
.unfurl-text {
  max-width: 660px;
  margin-inline: auto;
}
.unfurl-text p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 2.4;
  letter-spacing: 0.05em;
  text-indent: 2em;
  color: var(--paper-ink);
}
.unfurl-text p + p { margin-top: 6px; }
.unfurl-text .book-mark { color: var(--cinnabar); }

.unfurl-badge-row { margin-top: 30px; text-align: center; }
.unfurl-actions { margin-top: 24px; text-align: center; }

/* ================================================
   阁末识语
   ================================================ */
.dj-colophon {
  margin-top: 84px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 12.5px;
  letter-spacing: 0.24em; text-indent: 0.24em;
  color: var(--paper-ink-soft);
}
.dj-colophon::before, .dj-colophon::after {
  content: "";
  display: inline-block;
  width: 40px; height: 1px;
  vertical-align: middle;
  margin: 0 16px;
  background: linear-gradient(90deg, transparent, rgba(150, 114, 58, 0.5));
}
.dj-colophon::after { transform: scaleX(-1); }

/* ================================================
   响应式
   ================================================ */
@media (max-width: 1080px) {
  .dj-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 720px) {
  .dj-search { margin-bottom: 44px; }
  .dj-search-input { font-size: 17px; }
  .dj-chip { padding: 7px 18px; font-size: 13.5px; }
  .dj-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .book-card { border-radius: 5px; }
  .book-card::after { inset: 6px 6px 6px 24px; }
  .book-spine { left: 11px; width: 7px; }
  .book-title {
    top: 12px; left: 27px;
    font-size: 17px;
    padding: 12px 6px 14px;
    letter-spacing: 0.24em;
  }
  .book-cat { top: 9px; right: 9px; font-size: 10px; padding: 6px 3px 7px; }
  .book-era { left: 27px; right: 10px; bottom: 10px; font-size: 10.5px; letter-spacing: 0.04em; }
  .unfurl-inner { padding: 36px 24px 34px; }
  .unfurl-rod { width: calc(100% + 20px); margin-left: -10px; }
  .unfurl-text p { line-height: 2.3; }
  .dj-colophon { margin-top: 60px; }
  .dj-colophon::before, .dj-colophon::after { width: 22px; margin: 0 10px; }
}