/* ============================================================
   云栖阁 —— 古风主题
   宣纸 / 墨 / 朱砂 / 黛青 / 淡金
   ============================================================ */
:root{
  --paper:#F7F3EA;
  --paper-2:#EFE9DC;
  --ink:#1C1B19;
  --ink-2:#5A544C;
  --ink-3:#8C857A;
  --cinnabar:#9E2B25;
  --dai:#3A4A56;
  --gold:#B08D57;
  --line:rgba(28,27,25,.13);
  --line-2:rgba(28,27,25,.07);
  --pad:20px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior:none;
}
html,body{max-width:100vw}
body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  -webkit-touch-callout:none;
  overscroll-behavior-y:contain;
}
/* 卡片和按钮：禁止长按菜单、双击缩放 */
.one,.one-frame,.cell,.act,.back,.lb-close,.rb,.vids video{
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
img{display:block;max-width:100%;-webkit-user-drag:none;user-drag:none}
/* 输入框 16px，iOS 聚焦不放大页面 */
input,textarea,select{font-size:16px}
/* 滚动容器只管自己的方向 */
.scroll-list{overscroll-behavior:contain}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- 纸纹 ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(176,141,87,.10), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(58,74,86,.08), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
#app,.view{position:relative;z-index:1}

/* ================= 密码门 ================= */
.gate{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 32px 90px;position:relative;
}
.gate-frame{
  width:100%;max-width:330px;padding:38px 26px 34px;text-align:center;position:relative;
  border:1px solid var(--line);
}
.gate-frame::before,.gate-frame::after{
  content:"";position:absolute;left:12px;right:12px;height:1px;background:var(--line-2);
}
.gate-frame::before{top:8px}
.gate-frame::after{bottom:8px}
.seal{
  width:52px;height:52px;margin:0 auto 26px;border:1.5px solid var(--cinnabar);
  color:var(--cinnabar);display:grid;place-items:center;
  font-size:15px;letter-spacing:1px;line-height:1.1;border-radius:2px;
  transform:rotate(-2deg);opacity:.92;
}
.gate-title{font-size:26px;letter-spacing:.5em;text-indent:.5em;font-weight:400;margin-bottom:6px}
.gate-sub{font-size:11.5px;color:var(--ink-3);letter-spacing:.36em;text-indent:.36em;margin-bottom:34px}
.gate-form{width:100%}
.gate-input{
  width:100%;padding:11px 4px;font-family:var(--serif);font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  outline:none;text-align:center;letter-spacing:.3em;margin-bottom:26px;
  transition:border-color .3s;
}
.gate-input::placeholder{color:var(--ink-3);letter-spacing:.2em;font-size:13px}
.gate-input:focus{border-bottom-color:var(--cinnabar)}
.gate-btn{
  width:100%;padding:12px;font-family:var(--serif);font-size:14px;letter-spacing:.4em;text-indent:.4em;
  color:var(--paper);background:var(--ink);border-radius:1px;transition:.3s;
}
.gate-btn:active{background:var(--cinnabar)}
.gate-err{
  font-size:12px;color:var(--cinnabar);letter-spacing:.1em;margin:-14px 0 16px;
  opacity:0;transition:.2s;height:16px;
}
.gate-err.on{opacity:1}
.gate-foot{
  position:absolute;bottom:calc(30px + var(--safe-b));left:0;right:0;text-align:center;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.28em;
}

/* ================= 首页头部 ================= */
.hd{padding:26px var(--pad) 0;text-align:center}
.brand-mark{
  width:28px;height:28px;margin:0 auto 12px;border:1px solid var(--cinnabar);
  color:var(--cinnabar);font-size:10px;display:grid;place-items:center;line-height:1.15;
  transform:rotate(-3deg);opacity:.9;border-radius:1px;
}
.brand-name{font-size:24px;letter-spacing:.46em;text-indent:.46em;font-weight:400}
.brand-rule{
  width:46px;height:1px;background:var(--gold);margin:13px auto 10px;opacity:.55;
}
.brand-slogan{font-size:11px;color:var(--ink-3);letter-spacing:.3em;text-indent:.3em;margin-bottom:6px}
.brand-count{font-size:10px;color:var(--ink-3);letter-spacing:.22em;margin-top:9px;opacity:.7}

/* ================= 卷卡（一人一卷） ================= */
.scroll-list{padding:32px var(--pad) 20px;display:flex;flex-direction:column;gap:44px}
@media(min-width:640px){
  .scroll-list{display:grid;grid-template-columns:repeat(2,1fr);gap:44px}
}
.one{display:block;position:relative}
.one-frame{
  position:relative;padding:9px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
}
.one-frame::after{
  content:"";position:absolute;inset:4px;border:1px solid var(--line-2);pointer-events:none;
}
.one-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.one-img .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.one-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  filter:saturate(.92) contrast(1.02)}
.one-meta{padding:18px 2px 0;text-align:center}
.one-name{font-size:19px;letter-spacing:.34em;text-indent:.34em;font-weight:400}
.one-line{width:18px;height:1px;background:var(--gold);margin:11px auto;opacity:.5}
.one-sub{font-size:11.5px;color:var(--ink-3);letter-spacing:.2em;text-indent:.2em}
.one-video{
  position:absolute;right:14px;bottom:14px;font-size:9.5px;letter-spacing:.1em;
  color:var(--paper);background:rgba(28,27,25,.62);padding:3px 8px;border-radius:1px;
}
.one-tag{
  position:absolute;left:14px;top:14px;font-size:9.5px;letter-spacing:.18em;
  color:var(--cinnabar);background:rgba(247,243,234,.9);border:1px solid rgba(158,43,37,.35);
  padding:3px 7px;
}

/* ================= 页脚 ================= */
.foot{
  padding:56px 0 calc(46px + var(--safe-b));text-align:center;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.24em;
}
.foot-rule{width:30px;height:1px;background:var(--line);margin:0 auto 18px}

/* ================= 详情页 ================= */
.dhd{
  position:sticky;top:0;z-index:20;height:52px;display:flex;align-items:center;
  padding:0 var(--pad);background:rgba(247,243,234,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
}
.dhd .back{width:34px;height:34px;display:grid;place-items:center;margin-left:-8px}
.dhd .back svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.4}
.dhd .dname{
  margin-left:auto;font-size:12px;color:var(--ink-3);letter-spacing:.3em;
}

.hero{position:relative;padding:16px var(--pad) 0}
.hero-frame{position:relative;padding:9px;border:1px solid var(--line)}
.hero-frame::after{content:"";position:absolute;inset:4px;border:1px solid var(--line-2);pointer-events:none}
.hero-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.hero-img .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;z-index:2;
  filter:saturate(.92) contrast(1.02)}
.hero-count{
  position:absolute;right:14px;bottom:14px;font-size:11px;letter-spacing:.14em;
  color:var(--paper);background:rgba(28,27,25,.72);padding:5px 11px;border-radius:1px;
  z-index:5;                      /* 之前没有，被 z-index:2 的图盖住 */
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(198,164,92,.22);
}

/* 名号 */
.title-block{padding:24px var(--pad) 0;text-align:center}
.title-name{font-size:25px;letter-spacing:.4em;text-indent:.4em;font-weight:400}
.title-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 14px}
.title-rule span{width:26px;height:1px;background:var(--gold);opacity:.5}
.title-rule i{font-style:normal;color:var(--gold);font-size:8px;opacity:.75}
.title-sub{font-size:11.5px;color:var(--ink-3);letter-spacing:.22em;text-indent:.22em}

/* 小传 */
.bio{
  margin:26px var(--pad) 0;padding:22px 20px;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);font-size:14px;line-height:2.05;color:var(--ink-2);
  letter-spacing:.06em;text-align:justify;white-space:pre-wrap;
}

/* 数字三格 */
.figures{display:flex;margin:24px var(--pad) 0;border:1px solid var(--line-2)}
.figure{flex:1;text-align:center;padding:15px 0 13px;position:relative}
.figure+.figure::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line-2);
}
.figure b{display:block;font-size:19px;font-weight:400;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.figure i{display:block;font-style:normal;font-size:10px;color:var(--ink-3);letter-spacing:.2em;margin-top:4px}

/* 想玩 / 喜欢 */
.acts{display:flex;gap:12px;margin:26px var(--pad) 0}
.act{
  flex:1;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);font-size:13.5px;letter-spacing:.24em;text-indent:.24em;
  transition:.25s;position:relative;overflow:hidden;
}
.act.want{background:var(--ink);color:var(--paper)}
.act.want svg{stroke:var(--paper)}
.act.like{background:transparent;color:var(--ink);border-color:var(--line)}
.act.like svg{stroke:var(--ink-3)}
.act.like.liked{border-color:var(--cinnabar);color:var(--cinnabar)}
.act.like.liked svg{stroke:var(--cinnabar);fill:var(--cinnabar)}
.act.done{opacity:.45}
.act:active{transform:scale(.985)}
.act svg{width:15px;height:15px;fill:none;stroke-width:1.3}
.act b{font-size:13px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.04em}
@keyframes actpop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
.act.pop{animation:actpop .36s cubic-bezier(.34,1.56,.64,1)}

/* 图集 */
.sec{display:flex;align-items:baseline;justify-content:space-between;padding:46px var(--pad) 16px}
.sec h2{font-size:14px;font-weight:400;letter-spacing:.34em;text-indent:.34em}
.sec h2::before{content:"";display:inline-block;width:3px;height:3px;background:var(--cinnabar);
  margin-right:10px;vertical-align:middle;transform:rotate(45deg)}
.sec span{font-size:10.5px;color:var(--ink-3);letter-spacing:.2em}

.album{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 var(--pad)}
.album .cell{position:relative;aspect-ratio:1;overflow:hidden;background:var(--paper-2);cursor:pointer}
.album .cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92)}
.album .cell .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.album .cell .n{
  position:absolute;right:4px;bottom:3px;font-size:9px;color:rgba(247,243,234,.85);
  letter-spacing:.06em;
}

/* 视频 */
.vids{padding:0 var(--pad)}
.vids .cell{position:relative;aspect-ratio:16/9;overflow:hidden;background:#12100E}
.vids video{width:100%;height:100%;object-fit:contain;display:block;background:#12100E}

/* 推荐 */
.rec{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 var(--pad) 4px}
.rec::-webkit-scrollbar{display:none}
.rec .one{flex:0 0 46%}
.rec .one-name{font-size:15px;letter-spacing:.28em}

/* ================= 全屏浏览 ================= */
.lightbox{
  position:fixed;inset:0;z-index:99;background:#0E0D0B;display:flex;flex-direction:column;
  touch-action:none;overscroll-behavior:none;transition:opacity .3s ease,background .2s ease;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.lightbox.on{opacity:1;pointer-events:auto}
.lb-head{
  position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;padding:calc(16px + env(safe-area-inset-top,0px)) 20px 16px;
}
#lbIdx{
  font-size:12px;color:rgba(255,246,228,.86);letter-spacing:.24em;
  font-variant-numeric:tabular-nums;
  padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lb-close{
  width:34px;height:34px;
  border:1px solid rgba(255,246,228,.55);
  color:#FFF6E4;
  background:rgba(0,0,0,.52);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-size:14px;line-height:1;
  display:grid;place-items:center;border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.15);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.lb-close:active{background:rgba(0,0,0,.7)}
.lb-viewport{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;touch-action:none;overscroll-behavior:contain}
.lb-track{display:flex;height:100%;width:100%;will-change:transform}
.lb-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;padding:0 6px}
.lb-slide img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.lb-slide .ph{position:absolute;inset:12%;background-size:cover;background-position:center;z-index:0}
.lb-slide img{position:relative;z-index:2}

/* ================= toast ================= */
#toast{
  position:fixed;left:50%;bottom:calc(40px + var(--safe-b));transform:translate(-50%,14px);
  background:rgba(28,27,25,.9);color:var(--paper);font-size:12px;letter-spacing:.16em;
  padding:9px 18px;opacity:0;pointer-events:none;transition:opacity .24s,transform .24s;
  z-index:120;white-space:nowrap;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ================= 加载动画 ================= */
@keyframes inkIn{
  from{opacity:0;transform:translateY(14px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
.one{animation:inkIn .7s cubic-bezier(.22,.61,.36,1) backwards}

/* 首页"长安"二字的装饰 */
.city-line{
  margin-top:16px;font-size:10px;color:var(--ink-3);letter-spacing:.62em;text-indent:.62em;
  position:relative;display:inline-block;
}
.city-line::before,.city-line::after{
  content:"";position:absolute;top:50%;width:20px;height:1px;background:var(--line);
}
.city-line::before{left:-28px}
.city-line::after{right:-28px}



/* ================= 下滑提示 ================= */
.lb-hint{
  position:absolute; left:0; right:0;
  bottom:calc(38px + env(safe-area-inset-bottom,0px));
  z-index:9; text-align:center;
  font-size:15px; font-weight:600; letter-spacing:.32em;
  color:#F7F3EA;
  pointer-events:none;
  opacity:0; transition:opacity .4s ease;
  /* 发光：多层文字阴影 + 底部光晕 */
  text-shadow:
    0 0 6px rgba(198,164,92,.95),
    0 0 14px rgba(198,164,92,.75),
    0 0 26px rgba(198,164,92,.45),
    0 2px 3px rgba(0,0,0,.85);
  animation:hintGlow 2.2s ease-in-out infinite;
}
.lightbox.on .lb-hint{ opacity:1; }
.lightbox.dragging .lb-hint{ opacity:0; }




/* ============================================================
   古长安装饰：城楼 · 灯笼 · 云纹
   ============================================================ */
.changan{
  position:absolute; top:0; left:0; right:0;
  height:0; pointer-events:none; z-index:5; overflow:visible;
}

/* 城楼剪影：很淡，只在顶部 */
.city-wall{
  position:absolute;
  top:0; left:0; right:0;
  width:100%; height:74px;
  opacity:.55;
}

/* ---------- 灯笼 ---------- */
.lantern-string{
  position:absolute; top:0;
  display:flex; flex-direction:column; align-items:center;
  transform-origin:top center;
  animation:sway 4.6s ease-in-out infinite;
}
.lantern-string.left  { left:16px }
.lantern-string.right { right:16px; animation-delay:-2.3s }

/* 晃得明显：±5.5 度，还带一点横向摆动 */
@keyframes sway{
  0%   { transform:rotate(-5.5deg) translateX(0) }
  25%  { transform:rotate(0deg)   translateX(2px) }
  50%  { transform:rotate(5.5deg) translateX(0) }
  75%  { transform:rotate(0deg)   translateX(-2px) }
  100% { transform:rotate(-5.5deg) translateX(0) }
}

.cord{
  width:1px; height:24px;
  background:linear-gradient(180deg, rgba(140,36,28,.6), rgba(140,36,28,.3));
}
.cord.short{ height:13px }

.lantern{
  position:relative;
  width:30px;
  display:flex; flex-direction:column; align-items:center;
}
.lantern.small{ width:21px }

/* 挂钩 */
.hook{
  width:5px; height:5px;
  border:1px solid rgba(180,140,70,.7);
  border-radius:50%;
  margin-bottom:1px;
}

/* 上下盖 */
.cap{
  width:13px; height:4px;
  border-radius:1px;
  background:linear-gradient(180deg,#D8B36A,#8A6B2E 60%,#A9853E);
  box-shadow:0 1px 2px rgba(60,30,10,.25);
}
.lantern.small .cap{ width:9px; height:3px }

/* 灯体 */
.body{
  position:relative;
  width:100%; height:36px;
  border-radius:50% / 44%;
  background:
    radial-gradient(ellipse 42% 46% at 32% 30%, rgba(255,232,202,.72), transparent 58%),
    radial-gradient(ellipse 60% 50% at 74% 78%, rgba(92,16,10,.42), transparent 62%),
    linear-gradient(180deg, #CE4030 0%, #AE2C1D 44%, #8A1F12 78%, #6E1509 100%);
  box-shadow:
    0 0 18px rgba(226,104,64,.38),
    0 2px 6px rgba(60,20,10,.22),
    inset -5px 0 10px rgba(84,14,7,.42),
    inset 5px 0 11px rgba(255,186,144,.18);
  overflow:hidden;
}
.lantern.small .body{ height:26px }

/* 竖骨 */
.rib{
  position:absolute; top:8%; bottom:8%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(80,12,6,.28) 22%, rgba(80,12,6,.28) 78%, transparent);
}
.rib.r1{ left:30% }
.rib.r2{ left:50% }
.rib.r3{ left:70% }

/* 上下金边 */
.rim{
  position:absolute; left:6%; right:6%;
  height:3px;
  border-radius:50%;
  background:linear-gradient(90deg, transparent, rgba(226,186,110,.55), transparent);
}
.rim{ top:2px }
.rim::after{
  content:'';
  position:absolute; left:0; right:0;
  top:29px; height:3px;
  border-radius:50%;
  background:linear-gradient(90deg, transparent, rgba(226,186,110,.5), transparent);
}
.lantern.small .rim::after{ top:19px }

/* 团花 */
.flower{
  position:absolute;
  left:50%; top:50%;
  width:14px; height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(236,196,120,.9) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 50% 12%, rgba(236,196,120,.6) 0 1px, transparent 1.4px),
    radial-gradient(circle at 50% 88%, rgba(236,196,120,.6) 0 1px, transparent 1.4px),
    radial-gradient(circle at 12% 50%, rgba(236,196,120,.6) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 50%, rgba(236,196,120,.6) 0 1px, transparent 1.4px);
  opacity:.85;
}

/* 灯芯 */
.glow{
  position:absolute;
  left:50%; top:52%;
  width:66%; height:58%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,158,.7), transparent 66%);
  animation:flicker 3.4s ease-in-out infinite;
}
.lantern-string.right .glow{ animation-delay:-1.6s }

@keyframes flicker{
  0%,100% { opacity:.76 }
  38%     { opacity:1 }
  58%     { opacity:.84 }
  78%     { opacity:.96 }
}

/* 坠结 + 流苏 */
.knot{
  width:4px; height:4px;
  border-radius:50%;
  background:linear-gradient(180deg,#D8B36A,#96742F);
  margin-top:1px;
}
.tassel{
  display:flex; gap:2px;
  margin-top:2px;
  height:14px;
  align-items:flex-start;
}
.tassel i{
  display:block;
  width:1px; height:100%;
  background:linear-gradient(180deg, rgba(206,158,78,.9), rgba(206,158,78,.1));
}
.tassel i:nth-child(2){ height:80% }
.tassel i:nth-child(3){ height:88% }
.lantern.small .tassel{ height:9px }

/* ---------- 标题两侧云纹 ---------- */
.cloud-mark{
  position:absolute;
  top:52px;
  width:76px; height:auto;
  opacity:.9;
}
.cloud-mark.cl{ left:74px }
.cloud-mark.cr{ right:74px; transform:scaleX(-1) }

/* header 让位 */
.hd{ position:relative; padding-top:10px }


/* ============================================================
   红色宫墙
   ============================================================ */
.palace-wall{
  position:absolute;
  top:0; left:0; right:0;
  height:150px;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}

/* 琉璃瓦顶 */
.roof{
  position:absolute;
  top:0; left:0; right:0;
  height:22px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0 1px,
      transparent 1px 13px),
    linear-gradient(180deg,#9C8250 0%,#7E6739 42%,#5E4C28 100%);
  box-shadow:inset 0 -1px 0 rgba(255,220,160,.22);
}
/* 瓦当小圆 */
.roof::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:6px;
  background:repeating-linear-gradient(90deg,
    rgba(196,168,110,.55) 0 4px,
    transparent 4px 13px);
}

/* 墙体 */
.wall-face{
  position:absolute;
  top:22px; left:0; right:0;
  bottom:0;
  background:
    /* 上沿落影 */
    linear-gradient(180deg, rgba(50,10,6,.42) 0%, transparent 14%),
    /* 砖缝 */
    repeating-linear-gradient(0deg,
      rgba(48,8,4,.16) 0 1px,
      transparent 1px 26px),
    repeating-linear-gradient(90deg,
      rgba(48,8,4,.10) 0 1px,
      transparent 1px 42px),
    /* 朱红墙身 */
    linear-gradient(180deg,#9C3428 0%,#8A2C21 38%,#7A241A 72%,#6A1F16 100%);
  box-shadow:inset 0 0 40px rgba(40,6,3,.30);
}

/* 墙面颗粒 */
.brick{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.07;
  mix-blend-mode:overlay;
}

/* 墙根压暗 */
.wall-base{
  position:absolute;
  left:0; right:0; bottom:0;
  height:26px;
  background:linear-gradient(180deg, transparent, rgba(40,6,3,.32));
}

/* ---------- 墙上文字改浅色 ---------- */
.hd, .hd *{ position:relative; z-index:6 }

.hd{
  padding-top:26px;
  padding-bottom:22px;
}
.hd [data-mark],
.brand-mark{
  border-color:rgba(226,196,132,.85) !important;
  color:#F0DCAA !important;
  text-shadow:0 1px 6px rgba(40,6,3,.7);
}
.hd [data-name],
.brand-name{
  color:#F7EEDC !important;
  text-shadow:0 2px 10px rgba(40,6,3,.6);
}
.hd [data-slogan],
.brand-slogan{
  color:rgba(240,222,186,.88) !important;
  text-shadow:0 1px 8px rgba(40,6,3,.55);
}
.brand-count, #count,
.city-line,
.brand-rule{
  color:rgba(232,208,168,.80) !important;
}
.brand-rule{
  background:linear-gradient(90deg, transparent, rgba(226,196,132,.6), transparent) !important;
}
.city-line::before, .city-line::after{
  background:rgba(226,196,132,.45) !important;
}

/* 灯笼挂到墙下沿 */
.lantern-string{ top:-6px }
.lantern-string.left { top:auto; bottom:-96px }
.lantern-string.right{ top:auto; bottom:-96px }
.city-wall{ opacity:.85; top:20px }
.cloud-mark{ top:78px }


/* ============================================================
   整页朱红宫墙
   ============================================================ */
body.has-board{
  padding-top:62px;
}

body{
  background-color:#8A2C21;
  min-height:100vh;
}

/* 墙：大块错缝砖 + 斑驳 + 上瓦下石 */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    /* 斑驳：新旧不匀 */
    radial-gradient(46% 32% at 12% 18%, rgba(180,72,52,.20), transparent 68%),
    radial-gradient(38% 28% at 82% 26%, rgba(40,8,4,.26),     transparent 70%),
    radial-gradient(52% 36% at 68% 62%, rgba(176,68,48,.14), transparent 72%),
    radial-gradient(42% 30% at 22% 76%, rgba(36,7,3,.24),     transparent 70%),
    radial-gradient(34% 26% at 52% 94%, rgba(184,78,56,.12), transparent 68%),
    /* 横向砖缝：每 78px 一道 */
    repeating-linear-gradient(0deg,
      rgba(44,8,4,.26) 0 1px,
      rgba(255,210,170,.05) 1px 2px,
      transparent 2px 78px),
    /* 竖向砖缝：每 152px 一道 */
    repeating-linear-gradient(90deg,
      rgba(44,8,4,.20) 0 1px,
      rgba(255,210,170,.04) 1px 2px,
      transparent 2px 152px),
    /* 墙身 */
    linear-gradient(178deg,#A03A2C 0%,#8E2F23 30%,#7E271C 62%,#6A1F16 88%,#5A180F 100%);
  background-attachment:fixed;
}

/* 墙面颗粒 */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.075;
  mix-blend-mode:overlay;
}

/* 底部墙根石基 */
.bottom-base{
  position:fixed;
  left:0; right:0; bottom:0;
  height:14px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(30,8,4,.5), rgba(46,34,24,.9));
  box-shadow:0 -4px 16px rgba(24,4,2,.42);
}

/* ---------- 页头：压在墙上 ---------- */
.hd{
  position:relative;
  z-index:6;
  padding-top:34px;
  padding-bottom:20px;
}
.hd [data-mark], .brand-mark{
  border-color:rgba(230,200,136,.88) !important;
  color:#F5E5BE !important;
  text-shadow:0 1px 6px rgba(40,6,3,.75);
}
.hd [data-name], .brand-name{
  color:#FAF2E2 !important;
  text-shadow:0 2px 12px rgba(34,5,2,.7);
}
.hd [data-slogan], .brand-slogan{
  color:rgba(242,224,190,.9) !important;
  text-shadow:0 1px 9px rgba(34,5,2,.65);
}
.brand-count, #count{
  color:rgba(238,214,172,.78) !important;
  text-shadow:0 1px 8px rgba(34,5,2,.6);
}
.city-line{
  color:rgba(236,210,168,.82) !important;
  text-shadow:0 1px 8px rgba(34,5,2,.6);
}
.city-line::before, .city-line::after{
  background:rgba(230,200,136,.5) !important;
}
.brand-rule{
  background:linear-gradient(90deg, transparent, rgba(230,200,136,.62), transparent) !important;
}

/* 列表与页脚：浮在墙上，垫浅色纸 */
.scroll-list{
  position:relative;
  z-index:6;
  background:none;
  border:0;
  box-shadow:none;
  padding-top:26px;
}

/* 页脚 */
.foot{
  position:relative;
  z-index:6;
  padding:22px 0 34px;
}
.foot span, .foot [data-footer]{
  color:rgba(240,220,182,.72) !important;
  text-shadow:0 1px 8px rgba(34,5,2,.6);
}
.foot-rule{
  background:linear-gradient(90deg, transparent, rgba(230,200,136,.45), transparent) !important;
}

/* 灯笼贴墙垂下来 */
.lantern-string.left { left:14px; top:0 }
.lantern-string.right{ right:14px; top:0 }
.city-wall{ display:none }
.cloud-mark{ top:96px }


/* ---------- 卡片：金框浮在墙上 ---------- */
.one-frame{
  border:1px solid rgba(226,196,132,.34) !important;
  background:linear-gradient(180deg, rgba(60,10,6,.28), rgba(40,6,3,.44)) !important;
  box-shadow:
    0 10px 34px rgba(24,4,2,.42),
    inset 0 0 0 1px rgba(255,214,160,.06) !important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* 卡内图片区 */
.one-frame img{
  box-shadow:0 0 0 1px rgba(226,196,132,.18);
}

/* 「有影」角标 */
.one-count, .one-shade, .one-badge,
.one-frame [class*="count"], .one-frame [class*="badge"]{
  color:rgba(240,220,180,.85) !important;
  background:rgba(30,6,3,.55) !important;
  border-color:rgba(226,196,132,.3) !important;
}

/* 名字 / 副标题 */
.ci-name, .one-name{
  color:#FAF2E2 !important;
  text-shadow:0 2px 12px rgba(24,4,2,.7) !important;
}
.ci-sub, .one-sub{
  color:rgba(238,214,172,.82) !important;
  text-shadow:0 1px 10px rgba(24,4,2,.65) !important;
}
.ci-rule, .one-rule{
  background:linear-gradient(90deg, transparent, rgba(226,196,132,.5), transparent) !important;
}

/* 名字区可能带纸底，去掉 */
.one-body, .ci-body{
  background:none !important;
  border:0 !important;
}

/* 整页滚动区不再有分隔感 */
.foot{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}


/* ============================================================
   顶部屋檐：直接用参照照片
   ============================================================ */
.roof-photo{
  position:absolute;
  top:0; left:0; right:0;
  height:360px;
  z-index:4;
  pointer-events:none;
  background:url("assets-bg/roof.jpg") center top / cover no-repeat;
}
/* 底部渐隐，接到纯红墙 */
.roof-photo::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:240px;
  background:linear-gradient(180deg,
    rgba(142,47,35,0) 0%,
    rgba(142,47,35,.30) 22%,
    rgba(142,47,35,.62) 46%,
    rgba(140,45,33,.86) 68%,
    rgba(138,44,32,.96) 84%,
    #8C2D21 100%);
}

/* 页头往下让出屋檐 */
.hd{
  padding-top:300px !important;
}

/* 灯笼挂在屋檐下 */
.lantern-string.left { left:14px; top:250px }
.lantern-string.right{ right:14px; top:250px }
.cloud-mark{ top:340px !important }








/* ============================================================
   古代布告栏
   ============================================================ */
.board{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  margin:0;
  padding:0 42px;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
/* 收起时只露出纸头和一点点正文提示，整体上移 */
.board:not(.open){
  transform:translateY(6px);
}

/* 上下木轴 */
.board-roll{
  height:11px;
  border-radius:6px;
  background:
    linear-gradient(180deg,#8A6234 0%,#6E4A26 38%,#523416 68%,#6A4626 100%);
  box-shadow:
    0 2px 6px rgba(40,12,4,.5),
    inset 0 1px 0 rgba(255,214,160,.28),
    inset 0 -1px 0 rgba(40,16,4,.55);
}
.board-roll.top{ margin-bottom:-2px; border-radius:0 0 8px 8px }
.board-roll.bottom{ margin-top:-2px; border-radius:8px 8px 0 0 }

/* 纸面 */
.board-paper{
  position:relative;
  border-radius:2px;
  background:
    linear-gradient(180deg, rgba(58,16,8,.30) 0%, rgba(58,16,8,.16) 6%, transparent 12%),
    linear-gradient(180deg,#F3E8D2 0%,#EFE1C6 52%,#E8D8BA 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120,84,44,.32),
    0 6px 20px rgba(40,10,4,.30);
  overflow:hidden;
}
/* 纸纹 */
.board-paper::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='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.03' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.45'/%3E%3C/svg%3E");
  opacity:.07;
  mix-blend-mode:multiply;
}

/* 标题行（可点） */
.board-head{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 15px 13px 13px;
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}
.board-head:active{ background:rgba(120,70,30,.06) }

.board-seal{
  flex:0 0 auto;
  width:22px; height:22px;
  display:grid; place-items:center;
  border:1px solid rgba(158,43,37,.8);
  color:#9E2B25;
  font-size:12px;
  line-height:1;
  border-radius:2px;
}
.board-title{
  flex:1;
  font-size:13px;
  letter-spacing:.05em;
  color:#4A2A14;
  font-weight:500;
}
.board-arrow{
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:1.6px solid rgba(120,74,34,.75);
  border-bottom:1.6px solid rgba(120,74,34,.75);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  margin-right:3px;
}
.board.open .board-arrow{
  transform:rotate(-135deg) translateY(-2px);
}

/* 正文 */
.board-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .42s cubic-bezier(.4,0,.2,1);
}
.board-inner{
  padding:2px 20px 18px 20px;
  border-top:1px dashed rgba(140,96,50,.30);
  margin:0 13px;
  padding-top:12px;
}
.board-inner p{
  margin:0 0 7px;
  font-size:12.5px;
  line-height:1.85;
  color:#5A3A20;
  letter-spacing:.02em;
}
.board-inner p:last-child{ margin-bottom:0 }
.board-note{
  margin-top:11px !important;
  padding-top:10px;
  border-top:1px solid rgba(140,96,50,.22);
  color:#6B4A2C !important;
  font-size:12px !important;
  line-height:1.9 !important;
}


/* 布告栏展开：更深的投影，像从城墙上垂下来 */
.board.open{
  box-shadow:0 14px 36px rgba(20,4,2,.38);
}
.board:not(.open) .board-paper{
  max-height:52px;
}


/* ============================================================
   详情页统一到宫墙风格
   ============================================================ */

/* 顶部栏：去掉米白底，压在墙上 */
.dhd{
  background:linear-gradient(180deg, rgba(58,14,8,.42) 0%, rgba(58,14,8,.10) 62%, transparent 100%) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0 !important;
}
.dhd .back{ color:#F0DCAE !important }
.dhd .back svg{ stroke:#F0DCAE }
.dhd .dname{ color:rgba(246,232,204,.94) !important }

/* 主图框：金边 */
.hero-frame{
  border:1px solid rgba(238,206,140,.34) !important;
  background:linear-gradient(180deg, rgba(96,16,8,.22), rgba(70,10,5,.36)) !important;
  box-shadow:0 12px 34px rgba(40,8,3,.42), inset 0 0 0 1px rgba(255,216,164,.06) !important;
}

/* 名字 */
.title-name{
  color:#FDF5E6 !important;
  text-shadow:0 3px 18px rgba(50,8,3,.7) !important;
}
/* 分隔线 */
.title-rule span{
  background:linear-gradient(90deg, transparent, rgba(238,206,140,.6), transparent) !important;
}
.title-rule i{ color:rgba(238,206,140,.8) !important }
/* 副标题 */
.title-sub{
  color:rgba(242,220,180,.82) !important;
  text-shadow:0 1px 10px rgba(50,8,3,.6) !important;
}

/* 数据（身高三围年龄） */
.figures, .figures *{
  color:#FAF2E2 !important;
}
.figures .fig-num, .figures b, .figures strong{
  color:#FDF5E6 !important;
  text-shadow:0 2px 12px rgba(50,8,3,.6) !important;
}
.figures .fig-label, .figures span, .figures i, .figures em{
  color:rgba(238,214,172,.74) !important;
}
.figures .fig{
  border-color:rgba(238,206,140,.20) !important;
}

/* 按钮 */
.act{
  border-color:rgba(238,206,140,.34) !important;
  background:rgba(70,12,6,.42) !important;
  color:rgba(246,230,198,.92) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.act svg{ stroke:rgba(240,214,168,.9) !important; fill:none }
.act.want{ background:rgba(150,40,26,.46) !important }
.act b{ color:#FDF5E6 !important }

/* 简介 */
.bio{
  color:rgba(244,226,194,.86) !important;
  text-shadow:0 1px 10px rgba(50,8,3,.55) !important;
}

/* 小节标题 */
.sec h2{
  color:#F5E9D2 !important;
  text-shadow:0 2px 12px rgba(50,8,3,.6) !important;
}
.sec span{
  color:rgba(238,214,172,.66) !important;
}

/* 图集 / 影像 / 推荐 卡片边 */
.album > *, .vids > *, .rec > *{
  border-color:rgba(238,206,140,.22) !important;
}

/* 页脚 */
.foot span, .foot [data-footer]{
  color:rgba(244,222,182,.72) !important;
  text-shadow:0 1px 9px rgba(50,8,3,.6) !important;
}






/* ============================================================
   客评（替代图集）
   ============================================================ */
.reviews{
  margin:0 20px 8px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:9px;
}
.rv-shot{
  position:relative;
  padding:0;border:1px solid rgba(238,206,140,.24);
  border-radius:3px;overflow:hidden;
  background:rgba(70,10,5,.3);
  aspect-ratio:9/16;
  display:block;width:100%;
}
.rv-shot .ph{
  position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
}
.rv-shot img{z-index:2;
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.rv-shot:active{opacity:.82}

/* 好评大图 */
.shot-view{
  position:fixed;inset:0;z-index:120;
  background:rgba(10,8,6,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .26s ease;
  padding:56px 18px;
}
.shot-view.on{opacity:1;pointer-events:auto}
.shot-view img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  border-radius:2px;
}
.shot-x{
  position:absolute;
  top:calc(16px + env(safe-area-inset-top,0px));
  right:18px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,246,228,.55);
  background:rgba(0,0,0,.52);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#FFF6E4;font-size:14px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* 主图下方小圆点 */
.hero-frame{position:relative}
.hero-dots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  pointer-events:none;
}
.hero-dots i{
  width:5px;height:5px;border-radius:50%;
  background:rgba(247,241,228,.34);
  transition:background .25s, transform .25s;
}
.hero-dots i.on{
  background:#D9B072;
  transform:scale(1.5);
}

/* ============================================================
   首页搜索
   ============================================================ */
.search-wrap{
  margin:0 auto 18px;
  max-width:260px;
  display:flex;align-items:center;gap:9px;
  padding:9px 14px 9px 12px;
  border:1px solid rgba(238,206,140,.24);
  background:rgba(58,12,6,.34);
  border-radius:2px;
}
.search-ico{
  flex:0 0 auto;width:14px;height:14px;
  stroke:rgba(238,206,140,.62);fill:none;stroke-width:1.6;
}
#searchInput{
  flex:1;min-width:0;
  background:none;border:0;outline:none;
  font-family:inherit;font-size:13px;
  color:#F6E8CC;
  letter-spacing:.06em;
}
#searchInput::placeholder{color:rgba(238,214,172,.42);letter-spacing:.1em}
.search-clear{
  flex:0 0 auto;width:18px;height:18px;
  display:none;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(238,206,140,.18);
  color:rgba(246,232,204,.8);font-size:11px;line-height:1;
}
.search-clear.on{display:flex}
.search-empty{
  display:none;
  margin:32px 20px;text-align:center;
  font-size:12.5px;letter-spacing:.14em;
  color:rgba(238,214,172,.5);
}
.search-empty.on{display:block}


/* ============================================================
   全局柔和过渡
   ============================================================ */
:root{
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .18s;
  --t:      .3s;
  --t-slow: .48s;
}

/* 元素进场：淡入 + 微微上浮 */
@keyframes softIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes softFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes softPop{
  0%{transform:scale(1)}
  42%{transform:scale(1.055)}
  100%{transform:scale(1)}
}
@keyframes softGlow{
  0%{box-shadow:0 0 0 0 rgba(217,176,114,.42)}
  70%{box-shadow:0 0 0 9px rgba(217,176,114,0)}
  100%{box-shadow:0 0 0 0 rgba(217,176,114,0)}
}

/* ---------- 卡片：轻浮起 ---------- */
.one{
  transition:
    transform var(--t) var(--ease),
    filter var(--t) var(--ease);
  will-change:transform;
}
.one:active{
  transform:scale(.975);
  transition-duration:.09s;
}
.one .one-frame{
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.one:active .one-frame{
  box-shadow:0 2px 10px rgba(40,8,3,.3);
}
.one .one-img img{
  transition:
    transform var(--t-slow) var(--ease-out),
    filter var(--t) var(--ease);
}
.one:active .one-img img{
  transform:scale(1.015);
}
.one .one-name{
  transition:letter-spacing var(--t) var(--ease), color var(--t) var(--ease);
}

/* ---------- 按钮 ---------- */
.act,.back,.gate-btn,.rb,.lb-close,.shot-x,.hero-dots i,.search-clear{
  transition:
    background var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft),
    opacity var(--t-fast) var(--ease-soft),
    transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.act:active,.back:active,.gate-btn:active,.rb:active,.lb-close:active,.shot-x:active{
  transform:scale(.955);
}
.gate-btn{
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t) var(--ease);
}
.gate-btn:active{
  transform:scale(.975);
  box-shadow:0 2px 10px rgba(0,0,0,.34);
}
.gate-btn:disabled{opacity:.42}

/* ---------- 输入框 ---------- */
.gate-input,#searchInput,input,textarea{
  transition:
    border-color var(--t) var(--ease-soft),
    background var(--t) var(--ease-soft),
    box-shadow var(--t) var(--ease-soft);
}
.gate-input:focus,
#searchInput:focus{
  border-color:rgba(238,206,140,.5);
}
#searchInput:focus{
  background:rgba(58,12,6,.5);
}

/* ---------- 图片 ---------- */
.hero-img img{
  transition:
    transform var(--t-slow) var(--ease-out),
    filter var(--t) var(--ease),
    opacity var(--t) var(--ease);
}
.hero-img:active img{
  transform:scale(1.012);
}
.rv-shot{
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease),
    opacity var(--t-fast) var(--ease-soft);
}
.rv-shot:active{
  transform:scale(.965);
}

/* ---------- 全屏 ---------- */
.lightbox{
  transition:opacity var(--t) var(--ease-soft);
}
.lb-slide{
  transition:transform var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
}
.lb-slide img{
  animation:softFade .32s var(--ease-out) both;
}
.lb-hint{
  transition:opacity var(--t) var(--ease-soft);
}
.shot-view{
  transition:opacity var(--t) var(--ease-soft);
}
.shot-view img{
  animation:softPop .34s var(--ease-out) both;
}

/* ---------- 文字 / 链接 ---------- */
.one-sub,.brand-slogan,.city-line,.foot span,.title-sub,.rv-text{
  transition:color var(--t) var(--ease-soft), opacity var(--t) var(--ease-soft);
}

/* ---------- 布告栏 ---------- */
.board{
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.board-head{
  transition:background var(--t-fast) var(--ease-soft);
}
.board-arrow{
  transition:transform var(--t) var(--ease-out);
}
.board-body{
  transition:max-height var(--t-slow) var(--ease-out);
}
.board-inner p{
  animation:softIn .4s var(--ease-out) both;
}

/* ---------- 搜索 ---------- */
.search-wrap{
  transition:
    border-color var(--t) var(--ease-soft),
    background var(--t) var(--ease-soft),
    box-shadow var(--t) var(--ease-soft);
}
.search-wrap:focus-within{
  border-color:rgba(238,206,140,.48);
  background:rgba(58,12,6,.52);
  box-shadow:0 0 0 3px rgba(217,176,114,.08);
}
.search-clear{
  opacity:0;
  transform:scale(.7);
  transition:opacity var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease);
}
.search-clear.on{
  opacity:1;
  transform:scale(1);
}
.search-empty{
  transition:opacity var(--t) var(--ease-soft);
}
#list .one{
  animation:softIn .5s var(--ease-out) both;
}

/* ---------- 三围数字 ---------- */
.figure b{
  transition:transform var(--t) var(--ease), color var(--t) var(--ease-soft);
}
.figure{
  transition:transform var(--t) var(--ease);
}

/* ---------- 提示 ---------- */
#toast{
  transition:opacity var(--t) var(--ease-soft), transform var(--t) var(--ease-out);
}

/* ---------- 滚动更顺 ---------- */
html{
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* ---------- 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================
   今日在岗 印章
   ============================================================ */
.one-frame{ position:relative }
.one-duty{
  position:absolute; top:7px; right:7px; z-index:6;
  width:46px; height:42px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.one-duty svg{
  width:44px; height:40px;
  filter:
    drop-shadow(0 1px 1.5px rgba(0,0,0,.85))
    drop-shadow(0 0 3px rgba(0,0,0,.55))
    drop-shadow(0 0 8px rgba(230,211,163,.45));
}
.one-duty::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,240,200,.22) 0%, transparent 62%);
  animation:crownGlow 3s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes crownGlow{
  0%,100%{ opacity:.30; transform:scale(.92); }
  50%    { opacity:.80; transform:scale(1.08); }
}
}
}
@keyframes dutyGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(226,74,58,.18), 0 2px 10px rgba(0,0,0,.45) }
  50%    { box-shadow:0 0 0 1px rgba(226,74,58,.42), 0 2px 16px rgba(226,74,58,.35) }
}

/* 下滑提示：发光脉动 + 小箭头 */
.lb-hint::after{
  content:"";
  display:block;
  width:7px;height:7px;
  margin:9px auto 0;
  border-right:1.5px solid rgba(198,164,92,.95);
  border-bottom:1.5px solid rgba(198,164,92,.95);
  transform:rotate(45deg);
  box-shadow:2px 2px 8px rgba(198,164,92,.8);
  animation:hintArrow 2.2s ease-in-out infinite;
}
@keyframes hintGlow{
  0%,100%{ text-shadow:0 0 6px rgba(198,164,92,.95),0 0 14px rgba(198,164,92,.75),0 0 26px rgba(198,164,92,.45),0 2px 3px rgba(0,0,0,.85); }
  50%    { text-shadow:0 0 10px rgba(230,211,163,1),0 0 22px rgba(198,164,92,.95),0 0 40px rgba(198,164,92,.65),0 2px 3px rgba(0,0,0,.85); }
}
@keyframes hintArrow{
  0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.75; }
  50%    { transform:rotate(45deg) translate(3px,3px); opacity:1; }
}


/* ==== 唐风扫光骨架 ==== */
/* 占位底：金色大面积流光 + 呼吸 */
.ph{
  position:absolute; inset:0;
  overflow:hidden;
  background-size:cover;
  background-position:center top;
}
/* 层 1：常驻的金光渐变，让骨架本身就有层次 */
.ph::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg,
    rgba(255,252,244,0) 0%,
    rgba(230,211,163,.28) 25%,
    rgba(255,250,235,.52) 42%,
    rgba(176,141,87,.30) 58%,
    rgba(255,252,244,0) 78%);
  background-size:300% 300%;
  animation:goldFlow 4.5s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
/* 层 2：明亮扫光带，斜向扫过（不带 blur，边缘干净） */
.ph::after{
  content:"";
  position:absolute;
  top:-40%; bottom:-40%; left:0;
  width:50%;
  background:linear-gradient(90deg,
    rgba(255,255,250,0) 0%,
    rgba(255,255,250,.35) 30%,
    rgba(255,253,246,.95) 50%,
    rgba(255,255,250,.35) 70%,
    rgba(255,255,250,0) 100%);
  transform:translateX(-160%) skewX(-18deg);
  animation:sweepGold 2.2s cubic-bezier(.42,0,.58,1) infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes goldFlow{
  0%,100%{ background-position:0% 0%; }
  50%    { background-position:100% 100%; }
}
@keyframes sweepGold{
  0%   { transform:translateX(-160%) skewX(-18deg); }
  70%  { transform:translateX(260%) skewX(-18deg); }
  100% { transform:translateX(260%) skewX(-18deg); }
}

/* 图片就位后停掉所有动画 */
.one-img img.loaded ~ .ph::before,
.one-img img.loaded ~ .ph::after,
.hero-img img.loaded ~ .ph::before,
.hero-img img.loaded ~ .ph::after{
  animation:none;
}


/* ==== 骨架上的「后宫」标识 ==== */
/* 居中篆书水印，带金线外框和四角装饰 */
.ph-seal{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  display:flex;
  flex-direction:column;      /* 上下排列，顺序由 DOM 决定 */
  align-items:center;
  justify-content:center;
  gap:2px;
  font-family:var(--serif);
  font-size:30px;
  font-weight:600;
  line-height:1.05;
  color:rgba(158,43,37,.72);
  border:1.5px solid rgba(176,141,87,.55);
  border-radius:3px;
  background:rgba(255,252,244,.55);
  box-shadow:
    0 0 0 3px rgba(255,252,244,.25),
    0 0 18px rgba(176,141,87,.28),
    inset 0 0 12px rgba(230,211,163,.35);
  text-shadow:
    0 1px 2px rgba(255,255,255,.9),
    0 0 14px rgba(230,211,163,.75);
  pointer-events:none;
  user-select:none;
  padding:14px 8px;
  box-sizing:content-box;
  opacity:.95;
  animation:sealBreath 4s ease-in-out infinite;
}
.ph-seal i{
  font-style:normal;
  display:block;
  line-height:1;
}
/* 四角小点 */
.ph-seal::before,
.ph-seal::after{
  content:"";
  position:absolute;
  width:5px; height:5px;
  background:rgba(176,141,87,.85);
  border-radius:50%;
  box-shadow:0 0 6px rgba(176,141,87,.6);
}
.ph-seal::before{ left:-3px; top:-3px; }
.ph-seal::after{ right:-3px; bottom:-3px; }
@keyframes sealBreath{
  0%,100%{ opacity:.80; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.02); }
}

/* 图片就位后隐藏封面标识 */
.one-img img.loaded ~ .ph .ph-seal,
.hero-img img.loaded ~ .ph .ph-seal{
  opacity:0; transition:opacity .3s;
}