/* ============================================================
   梦灵山·灵盾 · 卷轴文档（隐私政策 / 免责声明）
   ------------------------------------------------------------
   展开动画用 grid-template-rows: 0fr -> 1fr 实现，
   不需要 JS 测量高度，内容长度或屏宽变化都不会算错。
   ============================================================ */

/* 条款页为单列文档布局 */
.shield-site .main-doc {
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
}

.shield-site .doc-shell {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.shield-site .doc-page-head {
  margin-bottom: 4px;
}

.shield-site .doc-page-head h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.shield-site .doc-page-head p {
  margin: 0;
  color: #6a84a7;
  font-size: 13px;
  line-height: 2;
}

.scroll {
  --rod-h: 26px;
  --paper: #fffdf8;
  --paper-edge: #e6dcc8;
  --wood-1: #9a7746;
  --wood-2: #6f5230;
  --wood-3: #543d22;
  --wood-line: #3f2e18;
  --gold: #d4b56a;
  /* 木轴两端伸出纸面的距离：不伸出去就不像卷轴，
     而是一条压在纸上的横条。 */
  --rod-overhang: 16px;

  margin-top: 30px;
}

/* ---------------- 木轴 ---------------- */

/* 木轴始终可见：卷起时应看到两根轴并拢，
   若默认隐藏，收起后就会只剩一片空白。 */
.scroll-rod {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* 向两侧各伸出 --rod-overhang，让轴头越过纸边 */
  margin-inline: calc(-1 * var(--rod-overhang));
  /* 给木轴一点落地感，避免像贴上去的色块 */
  filter: drop-shadow(0 3px 2px rgba(63, 46, 24, 0.16));
}

/* 轴身：横向圆木。
   竖向多段渐变模拟圆柱的受光面（约 1/3 处高光）、中间调与下方暗面，
   再叠一层细密竖纹当木纹，这样才不会是一根扁平的直线。 */
.scroll-rod .rod-bar {
  position: relative;
  flex: 1;
  height: var(--rod-h);
  border: 1px solid var(--wood-line);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(63, 46, 24, 0.13) 0 1px,
      rgba(63, 46, 24, 0) 1px 8px,
      rgba(255, 244, 214, 0.07) 8px 9px,
      rgba(255, 244, 214, 0) 9px 17px
    ),
    linear-gradient(
      180deg,
      #45321c 0%,
      #7a5c34 9%,
      #b18e4e 22%,
      #d9bd80 33%,
      #b8934c 52%,
      #83633a 74%,
      #55401f 91%,
      #7c5e35 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.3);
}

/* 轴头：两端收圆的木质旋钮，比轴身略粗，形成明显的收口。
   用足够大的圆角把方角去掉，是它看起来像「杆」而不是「条」的关键。 */
.scroll-rod .rod-cap {
  flex-shrink: 0;
  width: 22px;
  height: calc(var(--rod-h) + 14px);
  border: 1px solid var(--wood-line);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #45321c 0%,
    #8a6a3e 12%,
    #e0c68d 30%,
    #cba75f 46%,
    #8f6d3c 70%,
    #4f3a1f 92%,
    #7a5c34 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.35);
}

.scroll-rod .rod-cap.is-left {
  margin-right: -3px;
}

.scroll-rod .rod-cap.is-right {
  margin-left: -3px;
}

/* ---------------- 纸面 ---------------- */

.scroll-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
}

.scroll.is-open .scroll-body {
  grid-template-rows: 1fr;
}

/* 关闭动画时去掉延迟，收起更跟手 */
.scroll-clip {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* 展开过程中在切口处留一道柔影，收口更自然 */
.scroll-clip::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(48, 82, 108, 0), rgba(48, 82, 108, 0.14));
  opacity: 1;
  transition: opacity 600ms ease;
  pointer-events: none;
}

.scroll.is-open .scroll-clip::after {
  opacity: 0;
  transition-delay: 1200ms;
}

/* 纸面：左右各留出与木轴相同的边距，
   这样纸边落在轴头内侧，视觉上才是「卷在轴上」。 */
.scroll-paper {
  padding: 34px 38px 40px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(180, 160, 120, 0.05) 0 1px,
      rgba(180, 160, 120, 0) 1px 28px
    ),
    var(--paper);
  border-right: 2px solid var(--paper-edge);
  border-left: 2px solid var(--paper-edge);
  box-shadow: inset 0 0 34px rgba(180, 160, 120, 0.14);
}

/* ---------------- 卷内排版 ---------------- */

.scroll-doc + .scroll-doc {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 2px dashed #ded2ba;
}

.scroll-doc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.scroll-doc-head .icon {
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.scroll-doc-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.scroll-doc-meta {
  margin: 0 0 20px;
  padding-bottom: 14px;
  color: #8b9aa8;
  font-size: 11px;
  border-bottom: 2px solid #ece3d2;
}

.scroll-doc p {
  margin: 0 0 13px;
  color: #3c5a72;
  font-size: 13px;
  line-height: 2;
}

.scroll-doc h3 {
  margin: 22px 0 9px;
  color: #2f5570;
  font-size: 14px;
  font-weight: 700;
}

.scroll-doc ol,
.scroll-doc ul {
  margin: 0 0 14px;
  padding-left: 22px;
  color: #3c5a72;
  font-size: 13px;
  line-height: 2;
}

.scroll-doc li {
  margin-bottom: 6px;
}

.scroll-doc li::marker {
  color: #7ba0b8;
}

.scroll-doc strong {
  color: #2f5570;
  font-weight: 700;
}

.scroll-doc a {
  color: #397ba6;
  border-bottom: 1px solid #a8c8dd;
}

.scroll-note {
  margin: 22px 0 0;
  padding: 13px 16px;
  color: #6b7f8f;
  font-size: 12px;
  line-height: 1.9;
  background: #f4f8fb;
  border-left: 3px solid #a8c8dd;
}

/* 文末落款 */
.scroll-sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid #ece3d2;
}

.scroll-sign-text {
  color: #6b7f8f;
  font-size: 12px;
  line-height: 1.9;
}

.scroll-sign-text strong {
  display: block;
  margin-bottom: 4px;
  color: #2f5570;
  font-size: 14px;
}

.scroll-seal {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  opacity: 0;
  transform: scale(0.72) rotate(-8deg);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.34, 1.4, 0.5, 1);
}

.scroll.is-open .scroll-seal {
  opacity: 1;
  transform: none;
  transition-delay: 1750ms;
}

.scroll-seal img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* ---------------- 动效降级 ---------------- */

@media (prefers-reduced-motion: reduce) {
  .scroll-body,
  .scroll.is-open .scroll-body {
    transition: none;
    grid-template-rows: 1fr;
  }

  .scroll-seal,
  .scroll.is-open .scroll-seal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-clip::after,
  .scroll.is-open .scroll-clip::after {
    opacity: 0;
    transition: none;
  }
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 780px) {
  .scroll {
    --rod-h: 22px;
    /* 窄屏收窄外伸量，避免轴头撑出视口 */
    --rod-overhang: 10px;
    margin-top: 22px;
  }

  .scroll-rod .rod-cap {
    width: 15px;
    height: calc(var(--rod-h) + 10px);
  }

  .scroll-paper {
    padding: 24px 18px 28px;
  }

  .scroll-doc-head h2 {
    font-size: 18px;
  }

  .scroll-doc-head .icon {
    width: 19px;
    height: 19px;
  }

  .scroll-doc p,
  .scroll-doc ol,
  .scroll-doc ul {
    font-size: 12.5px;
    line-height: 1.95;
  }

  .scroll-doc h3 {
    font-size: 13.5px;
  }

  .scroll-sign {
    flex-direction: column;
    align-items: flex-start;
  }

  .scroll-seal {
    align-self: flex-end;
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 420px) {
  .scroll-paper {
    padding: 20px 14px 24px;
  }

  .scroll-doc ol,
  .scroll-doc ul {
    padding-left: 18px;
  }
}