/* ============================================================
   冷月幽 · 秘籍页专属
   卷轴卡片列表
   只被 miji.html 引入
   ============================================================ */

.scroll-list {
  display: grid;
  gap: 16px;
  /* 左对齐到页面栅格（与标题、面包屑同一条左边线），
     宽度收到 880px 避免长行不利于阅读 */
  max-width: 880px;
  margin-inline: 0;
}

.scroll-card {
  position: relative;
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: clamp(16px, 2.6vw, 30px);
  align-items: start;
  padding: 20px clamp(18px, 2.6vw, 28px) 20px clamp(16px, 2.4vw, 22px);
  background: linear-gradient(90deg, var(--paper-4), var(--paper-3) 22%);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}

.scroll-list .scroll-card:hover {
  transform: translateX(4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

.scroll-rod {
  align-self: stretch;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--line-2), var(--gold), var(--line-2));
  opacity: .55;
}

.scroll-kicker {
  font-size: 13px;
  letter-spacing: .24em;
  color: var(--cinnabar);
}

.scroll-title {
  margin-top: 6px;
  font-family: var(--font-kai);
  font-size: 20px;
  letter-spacing: .08em;
  line-height: 1.4;
}

.scroll-summary {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

.scroll-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-4);
}

.scroll-meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-4);
  opacity: .6;
}

.scroll-arrow {
  align-self: center;
  font-size: 16px;
  color: var(--ink-4);
  transition: transform .3s var(--ease), color .3s var(--ease);
}

.scroll-card:hover .scroll-arrow { transform: translateX(4px); color: var(--cinnabar); }

@media (max-width: 560px) {
  .scroll-card { grid-template-columns: 4px 1fr; }
  .scroll-arrow { display: none; }
}