@charset "UTF-8";
/* ============================================================
   电脑端左右两侧悬浮内容（side-rail / side-qr）
   —— 移动端与电脑端页面样式完全一致，仅在宽屏时于画布两侧
      追加固定的左侧导航与右侧二维码卡片；窄屏自动隐藏。
   画布宽度 600px（6rem，宽屏 1rem = 100px），居中显示。
   ============================================================ */

/* -------- 宽屏画布外底色（窄屏不生效，移动端观感不变） -------- */
@media (min-width:1024px){
  html{ background:#f1ece2; }
  body{
    box-shadow:0 0 60px rgba(90,70,30,.09),
               0 0 0 1px rgba(168,128,46,.10);
  }
}

/* -------- 默认隐藏（移动端 / 窄屏） -------- */
.side-rail,
.side-qr{ display:none; }

/* ================= 宽屏显示 ================= */
@media (min-width:1024px){

  /* ---------- 左侧：页面导航 ---------- */
  .side-rail{
    display:block;
    position:fixed;
    top:50%; left:calc(50% - 4.42rem);
    transform:translateY(-50%);
    width:.98rem;
    max-height:calc(100vh - .4rem);
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--sep, #eee9e1);
    border-radius:.16rem;
    box-shadow:0 .08rem .3rem rgba(0,0,0,.08);
    padding:.12rem .09rem;
    z-index:50;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .side-rail::-webkit-scrollbar{ width:0; height:0; }

  .side-rail a{
    display:flex; flex-direction:column; align-items:center;
    gap:.04rem;
    padding:.07rem .03rem;
    border-radius:.1rem;
    text-decoration:none;
    color:var(--dim, #6f6859);
    font-size:.115rem; line-height:1.35; letter-spacing:.02em;
    white-space:nowrap;
    transition:background .2s ease, color .2s ease;
  }
  .side-rail a svg{
    width:.19rem; height:.19rem; flex-shrink:0;
    stroke:currentColor; fill:none;
    stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .side-rail a:hover{ color:var(--gold, #a8802e); background:var(--ink-3, #f2efe9); }
  .side-rail a.is-on{ background:var(--gold, #a8802e); color:#fff; }
  .side-rail a.is-on:hover{ background:var(--gold, #a8802e); color:#fff; }

  .side-rail .rail-sep{
    height:1px; background:var(--sep, #eee9e1);
    margin:.05rem .07rem;
  }

  /* ---------- 右侧：二维码卡片 ---------- */
  .side-qr{
    display:block;
    position:fixed;
    top:50%; right:calc(50% - 4.8rem);
    transform:translateY(-50%);
    width:1.36rem;
    background:#fff;
    border:1px solid var(--sep, #eee9e1);
    border-radius:.16rem;
    box-shadow:0 .08rem .3rem rgba(0,0,0,.08);
    padding:.18rem .16rem .16rem;
    text-align:center;
    z-index:50;
  }
  .side-qr .qr-cap{
    font-size:.13rem; letter-spacing:.12em; color:var(--text, #2b2721);
    margin-bottom:.12rem; white-space:nowrap;
  }
  .side-qr .qr-cap::before{
    content:"▦"; margin-right:.05rem; color:var(--gold, #a8802e); font-size:.115rem;
  }
  .side-qr .qr-box{
    width:100%; aspect-ratio:1/1;
    border:1px dashed var(--line, rgba(168,128,46,.28));
    border-radius:.1rem;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; background:var(--ink-2, #faf8f5);
  }
  .side-qr .qr-box img{ width:100%; height:100%; object-fit:contain; display:block; }
  .side-qr .qr-txt{
    margin-top:.1rem;
    font-size:.115rem; line-height:1.6; color:var(--soft, #9a9384);
  }

  /* ---------- 原有「返回顶部」按钮回到画布内 ---------- */
  /* 移动端是 right:.24rem（贴视口右边），宽屏下会飞出画布，这里改为贴画布右下 */
  .back-to-top{
    right:calc(50% - 3rem + .24rem);
  }
}