/* ============================================================
   写信台 · 样式表
   木桌背景 / 一叠信纸 / 纸纹与字体 / 折纸动画 / 信封正反面
   依赖 style.css 里的 Token（--gold / --cream / --seal …）
============================================================ */

/* ---------- 桌面 ---------- */
.desk{
  position:fixed;inset:0;z-index:80;visibility:hidden;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background-color:#5a3821;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(16px,3vh,30px) clamp(14px,3.4vw,46px) clamp(40px,6vh,72px);
  color:var(--cream);
}
/* 木纹：底色 → 台灯光池 → 板缝 → 纹路 → 四周压暗 */
.desk-wood{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 46% at 50% 4%, rgba(255,229,180,.26), transparent 72%),
    radial-gradient(130% 96% at 50% 118%, rgba(18,7,2,.62), transparent 62%),
    repeating-linear-gradient(180deg, transparent 0 226px, rgba(18,7,2,.34) 226px 230px, rgba(255,216,160,.06) 230px 232px),
    repeating-linear-gradient(91deg, rgba(46,22,8,.24) 0 2px, rgba(184,132,78,.07) 2px 8px, transparent 8px 41px),
    repeating-linear-gradient(88deg, rgba(24,9,3,.16) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(93deg, rgba(255,214,158,.05) 0 1px, transparent 1px 27px),
    linear-gradient(174deg,#6f4829 0%,#5b3821 42%,#452818 100%);
}
.desk-wood::after{
  content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* ---------- 顶部工具条 ---------- */
.desk-bar{
  position:relative;z-index:2;
  width:100%;display:flex;align-items:center;justify-content:flex-end;
  gap:16px;margin-bottom:clamp(14px,2.4vh,24px);
}
/* 叉号钉在视口左上角。
   必须挂在 .desk 直下：.desk-left 会被 GSAP 加 transform，
   一旦祖先有 transform，position:fixed 就会改成相对它定位 */
.desk-close{
  position:fixed;left:clamp(14px,2.2vw,26px);top:clamp(14px,2.2vw,26px);z-index:18;
  width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(236,227,204,.28);border-radius:50%;color:rgba(236,227,204,.78);
  background:rgba(30,16,8,.18);
  transition:border-color .28s,color .28s,background .28s,transform .2s;
}
.desk-close:hover{border-color:var(--gold);color:var(--gold);background:rgba(30,16,8,.4);}
.desk-close:active{transform:scale(.94);}
.desk-close svg{display:block;}

.style-picker{display:flex;align-items:center;gap:7px;flex:none;transition:opacity .3s;}
.desk.locked .style-picker{opacity:.34;pointer-events:none;}
/* 已经封好蜡、翻到背面之后，样式就定下来了：整条顶栏收掉（叉号是独立定位的，不受影响），
   空出来的高度全给信封。高度由 desk.js 用 GSAP 收到 0，信封才不会突然上跳 */
.desk.stage-back .desk-bar{opacity:0;pointer-events:none;}
.desk.is-reduce.stage-back .desk-bar{display:none;}
.sp{
  width:28px;height:28px;border-radius:2px;border:1px solid rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-hand);font-size:14px;line-height:1;
  opacity:.74;
  transition:transform .26s var(--ease-out),opacity .26s,box-shadow .26s;
}
.sp:hover{transform:translateY(-2px);opacity:1;}
.sp.active{
  opacity:1;transform:translateY(-3px);
  box-shadow:0 0 0 2px #4a2d1b, 0 0 0 3.5px var(--gold);
}

/* ---------- 舞台 ---------- */
.desk-stage{
  position:relative;z-index:2;
  width:100%;max-width:820px;
  display:flex;justify-content:center;
}

/* 一叠纸：主信纸比 A4 横向放宽 15%（210 → 241.5），高度仍由视口高度定，
   所以看到的是一张更宽的纸，而不是把整张纸等比放大到放不下。
   宽度算式里的 .8132 = 241.5 / 297，即"高度一定时，宽高比变宽后的换算系数"。 */
.sheet-stack{
  position:relative;flex:none;
  width:min(782px, calc((100dvh - 246px) * .8132), 100%);
  aspect-ratio:241.5 / 297;
}
/* 下面垫着的纸：不是平的。
   每张纸压着一两道斜折痕——折痕两侧一亮一暗，像被手按过又没抹平；
   折痕都放在靠近纸边的位置，因为中间一大块被上面的信纸盖住了。 */
.stack-sheet{
  position:absolute;pointer-events:none;border-radius:2px;
  background-color:#ddd0ae;
  background-image:
    linear-gradient(101deg, transparent 0 24%, rgba(255,252,238,.46) 33%, rgba(255,252,238,.05) 37%, transparent 42%),
    linear-gradient(101deg, transparent 0 37%, rgba(98,70,38,.19) 41%, transparent 53%),
    linear-gradient(83deg, transparent 0 69%, rgba(98,70,38,.1) 74%, rgba(255,252,238,.22) 76%, transparent 84%),
    radial-gradient(120% 66% at 4% 104%, rgba(80,52,24,.27), transparent 62%),
    radial-gradient(100% 58% at 96% 2%, rgba(255,250,232,.5), transparent 64%),
    linear-gradient(180deg,#e6dabd,#d6c5a2);
  filter:drop-shadow(0 15px 22px rgba(24,10,2,.44)) drop-shadow(0 2px 4px rgba(24,10,2,.3));
  /* 纸边薄薄的一圈明暗：上沿用光挑一下，下沿压一点点，纸就有了厚度 */
  box-shadow:
    inset 0 1px 0 rgba(255,252,238,.55),
    inset 0 -1px 0 rgba(96,68,36,.22),
    inset 1px 0 0 rgba(255,252,238,.3),
    inset -1px 0 0 rgba(96,68,36,.16);
  /* 纸边不是刀切的一条直线：每隔一段差上一两像素，像手工裁的、又有点翘 */
  clip-path:polygon(
    0 .8%, 14% .28%, 30% .86%, 47% .2%, 63% .78%, 79% .26%, 92% .84%, 100% .34%,
    99.6% 18%, 100% 40%, 99.5% 62%, 99.9% 83%,
    86% 99.62%, 70% 99.2%, 54% 99.7%, 38% 99.1%, 22% 99.68%, 8% 99.18%, 0 99.6%,
    .4% 76%, 0 54%, .5% 32%);}
/* 纸边微微翘起：下沿受光发亮，上沿压着一点影，纸立刻有了厚度和弧度 */
.stack-sheet::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(130% 34% at 50% 108%, rgba(255,252,238,.4), transparent 58%),
    radial-gradient(130% 34% at 50% -10%, rgba(90,62,32,.2), transparent 58%),
    radial-gradient(30% 130% at -8% 50%, rgba(255,252,238,.22), transparent 56%);
}
/* 纸纤维的一层细颗粒，混在纸色里，不是盖在上面的一层灰 */
.stack-sheet::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.14;
  mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
/* 四张纸：顶边、左右各差十几到几十像素，转角-3.4°/4.6°/-6.4°/7.6° 交替，
   尺寸也一层比一层收一点，叠起来才像随手摞的。
   折痕用两层不同周期的斜光带叠出来：周期互相错开，看着就不像机器压的；
   亮带紧跟着暗带，纸像是被折过又摊平，还微微翘着。 */
.stack-4{top:52px;left:52px;right:-6px;bottom:18px;transform:rotate(7.6deg);
  background-color:#cdbd97;
  background-image:
    repeating-linear-gradient(96deg,
      transparent 0 30px, rgba(255,252,238,.44) 40px, rgba(255,252,238,.02) 46px,
      rgba(92,64,34,.19) 52px, transparent 62px 118px),
    repeating-linear-gradient(87deg,
      transparent 0 74px, rgba(255,252,238,.11) 84px, rgba(92,64,34,.06) 92px, transparent 104px 176px),
    radial-gradient(130% 70% at 100% 102%, rgba(72,46,20,.32), transparent 60%),
    linear-gradient(180deg,#dccfae,#c4b28a);
}
.stack-3{top:38px;left:-22px;right:50px;bottom:12px;transform:rotate(-6.4deg);opacity:.95;
  background-color:#d9ccab;
  background-image:
    repeating-linear-gradient(108deg,
      transparent 0 26px, rgba(255,252,238,.45) 35px, rgba(255,252,238,.02) 41px,
      rgba(92,64,34,.2) 47px, transparent 57px 104px),
    repeating-linear-gradient(97deg,
      transparent 0 66px, rgba(255,252,238,.12) 76px, rgba(92,64,34,.06) 84px, transparent 96px 158px),
    radial-gradient(120% 64% at 2% 96%, rgba(80,52,24,.27), transparent 62%),
    linear-gradient(180deg,#dccfae,#c9b78f);}
.stack-2{top:20px;left:32px;right:-24px;bottom:2px;transform:rotate(4.6deg);
  background-color:#e0d3b3;
  background-image:
    repeating-linear-gradient(78deg,
      transparent 0 34px, rgba(255,252,238,.45) 44px, rgba(255,252,238,.02) 50px,
      rgba(92,64,34,.19) 56px, transparent 66px 132px),
    repeating-linear-gradient(112deg,
      transparent 0 88px, rgba(255,252,238,.11) 98px, rgba(92,64,34,.06) 106px, transparent 118px 190px),
    radial-gradient(110% 60% at 96% 100%, rgba(80,52,24,.24), transparent 62%),
    linear-gradient(180deg,#e2d5b6,#cfbd97);}
.stack-1{top:-22px;left:-32px;right:12px;bottom:12px;transform:rotate(-3.4deg);
  background-color:#e5d9bc;
  background-image:
    repeating-linear-gradient(112deg,
      transparent 0 22px, rgba(255,252,238,.44) 31px, rgba(255,252,238,.02) 37px,
      rgba(92,64,34,.18) 43px, transparent 53px 96px),
    repeating-linear-gradient(101deg,
      transparent 0 70px, rgba(255,252,238,.1) 80px, rgba(92,64,34,.05) 88px, transparent 100px 164px),
    radial-gradient(112% 64% at 6% 4%, rgba(255,250,232,.42), transparent 64%),
    linear-gradient(180deg,#e9dec2,#d8c8a6);}

/* ---------- 纸面通用（信纸 / 信封 / 折纸切片） ---------- */
.paper,.mail-front,.mail-back,.fs-face{
  background-color:var(--p-bg,#e9e0c9);
  background-image:linear-gradient(180deg,var(--p-bg,#e9e0c9),var(--p-bg2,#ddd2b4));
  background-size:100% 100%;background-repeat:no-repeat;
  color:var(--p-ink,#3b3222);
}

/* 纸张只有两种：横线、格子。
   线距 --p-lh 和起始位置 --rule-y 由 desk.js 按正文字号量出来后写进来，
   这样整张纸的线都能和正文的行对齐，从"给 xx"一直通到落款。 */
.paper,.fs-face{
  background-image:
    var(--p-vline,none),
    var(--p-hline,none),
    linear-gradient(180deg,var(--p-bg,#e9e0c9),var(--p-bg2,#ddd2b4));
  background-size:
    var(--p-lh,39px) 100%,
    100% var(--p-lh,39px),
    100% 100%;
  background-position:0 0, 0 var(--rule-y,22px), 0 0;
  background-repeat:repeat, repeat, no-repeat;
}
.mail-back,.mail-front{--p-line-strong:rgba(59,50,34,.3);}
[data-rule="line"]{
  --p-hline:linear-gradient(to bottom, transparent 0 calc(100% - 1px),
    var(--p-line,rgba(59,50,34,.17)) calc(100% - 1px) 100%);
}
[data-rule="grid"]{
  --p-hline:linear-gradient(to bottom, transparent 0 calc(100% - 1px),
    var(--p-line,rgba(59,50,34,.17)) calc(100% - 1px) 100%);
  --p-vline:linear-gradient(to right, transparent 0 calc(100% - 1px),
    var(--p-line-v,rgba(59,50,34,.13)) calc(100% - 1px) 100%);
}

/* 字体：六种样式各一种手写/活字感 */
[data-font="hand"]{font-family:var(--font-hand);}
[data-font="fangsong"]{font-family:"FangSong","STFangsong","仿宋",var(--font-serif);}
[data-font="kai"]{font-family:"KaiTi","STKaiti","楷体",var(--font-serif);}
[data-font="song"]{font-family:var(--font-serif);}
[data-font="xing"]{font-family:"STXingkai","华文行楷","KaiTi","楷体",var(--font-serif);}
[data-font="thin"]{font-family:"LiSu","STLiti","隶书","Noto Serif SC",serif;letter-spacing:.05em;}

/* ---------- 信纸 ---------- */
.paper{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;
  padding:clamp(24px,3vw,38px) clamp(22px,3.4vw,40px) clamp(20px,2.6vw,30px);
  border-radius:2px;
  box-shadow:0 30px 54px rgba(20,8,2,.5), 0 3px 9px rgba(20,8,2,.35);
  transition:box-shadow .5s;
}
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 14px 26px -18px rgba(255,255,255,.6);
}
.paper form{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;min-height:0;}

.letter-head{
  display:flex;align-items:baseline;gap:clamp(10px,2vw,18px);
  border-bottom:1px solid var(--p-line,rgba(59,50,34,.16));
  padding-bottom:10px;
}
.lh-label{
  font-family:var(--font-hand);font-size:clamp(20px,2.8vw,27px);
  color:var(--p-accent,#7e231c);opacity:.92;flex:none;line-height:1;
}
.lh-to{
  flex:1;min-width:0;border:0;background:transparent;padding:0 2px 4px;
  font-family:inherit;font-size:clamp(19px,2.6vw,25px);letter-spacing:.08em;
  color:var(--p-ink,#3b3222);
  border-bottom:1px dashed rgba(59,50,34,.22);
}
.lh-to::placeholder{color:var(--p-ink-soft,rgba(59,50,34,.4));letter-spacing:.04em;font-size:.8em;}
.lh-to:focus{outline:none;border-bottom-color:var(--p-accent,#7e231c);}

.letter-body{
  margin-top:clamp(12px,2.2vh,20px);flex:1;min-height:0;
  display:flex;flex-direction:column;
}
/* 横线画在纸上，不在 textarea 上：这样线从抬头的"给"一直通到右下角落款 */
.letter-body textarea{
  display:block;width:100%;height:100%;border:0;background:transparent;resize:none;
  font-family:inherit;font-size:clamp(16px,2vw,19px);line-height:2.05;
  color:var(--p-ink,#3b3222);
  text-indent:2em;
  overflow-y:auto;
  /* 写长了照样能滚，但不要那条压在纸上的滚动条 */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.letter-body textarea::-webkit-scrollbar{width:0;height:0;display:none;}
.letter-body textarea:focus{outline:none;}
.letter-body textarea::placeholder{color:var(--p-ink-soft,rgba(59,50,34,.36));}
.letter-err{
  display:none;margin-top:6px;font-family:var(--font-serif);
  font-size:12.5px;color:#b4453a;letter-spacing:.04em;flex:none;
}
.paper.has-error .letter-err{display:block;}
.paper.has-error{--p-line:rgba(180,69,58,.30);}

/* 落款：日期在上、发件人在下，都靠右 */
.letter-sign{
  margin-top:clamp(16px,2.6vh,26px);
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.sign-line{display:flex;align-items:baseline;gap:10px;max-width:100%;}
.sign-line span{
  font-family:var(--font-display);font-size:11px;letter-spacing:.24em;
  color:var(--p-ink,#3b3222);opacity:.72;text-transform:uppercase;flex:none;
}
.sign-line input{
  border:0;background:transparent;text-align:right;
  font-family:inherit;font-size:clamp(15px,1.8vw,17px);letter-spacing:.06em;
  color:var(--p-ink,#3b3222);
  border-bottom:1px dashed rgba(59,50,34,.32);
  padding:0 2px 3px;min-width:7.6em;max-width:12em;
}
.sign-line input:focus{outline:none;border-bottom-color:var(--p-accent,#7e231c);}
.sign-line input::placeholder{color:var(--p-ink-soft,rgba(59,50,34,.38));}
#fromName{min-width:9.2em;}
#writeDate{min-width:9.6em;font-variant-numeric:tabular-nums;}

/* ---------- 折纸层 ---------- */
.fold-layer{
  position:absolute;left:0;top:0;width:0;height:0;z-index:8;
  display:none;perspective:1600px;
}
.fold-sheet{
  position:absolute;inset:0;transform-style:preserve-3d;
  --ph:200px;
}
.fs-panel{
  position:absolute;left:0;width:100%;height:var(--ph);
  transform-style:preserve-3d;
}
#fsTop{top:0;transform-origin:50% 100%;}
#fsMid{top:var(--ph);}
#fsBot{top:calc(var(--ph) * 2);transform-origin:50% 0;}
.fs-face{
  position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* 纸的背面：没有线，只有一层压出来的暗光 */
.fs-back{
  transform:rotateX(180deg);
  background-image:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.10));
  box-shadow:inset 0 0 22px rgba(60,40,16,.16);
}
.fs-slice{
  position:absolute;left:0;width:100%;height:calc(var(--ph) * 3);
  padding:clamp(24px,3vw,38px) clamp(22px,3.4vw,40px) clamp(20px,2.6vw,30px);
  box-sizing:border-box;
}
.copy-head{
  display:flex;align-items:baseline;gap:clamp(10px,2vw,18px);
  border-bottom:1px solid var(--p-line,rgba(59,50,34,.16));padding-bottom:10px;
}
.copy-to-label{
  font-family:var(--font-hand);font-size:clamp(20px,2.8vw,27px);
  color:var(--p-accent,#7e231c);opacity:.92;line-height:1;
}
.copy-to{font-size:clamp(19px,2.6vw,25px);letter-spacing:.08em;}
.copy-body{
  margin-top:clamp(14px,2.4vh,22px);
  font-size:clamp(16px,2vw,19px);line-height:2.05em;
  text-indent:2em;white-space:pre-wrap;word-break:break-word;
}
.copy-sign{
  margin-top:clamp(16px,2.6vh,26px);text-align:right;
  font-size:clamp(15px,1.8vw,17px);line-height:1.9;
}
.copy-sign div{opacity:.88;}

/* ---------- 信封 ---------- */
.mail{
  --mw:min(645px,86vw);
  position:absolute;left:50%;top:57%;z-index:6;
  width:var(--mw);aspect-ratio:340 / 200;
  /* 居中用负 margin，不用 translate / transform：
     GSAP 一动 transform 就会把 CSS 的 translate 属性清成 none，信封便偏到右下角去 */
  margin-left:calc(var(--mw) / -2);
  margin-top:calc(var(--mw) * .5882 / -2);
  opacity:0;visibility:hidden;perspective:2000px;
}
.mail-inner{position:absolute;inset:0;transform-style:preserve-3d;}
.mail-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:3px;
  box-shadow:0 26px 46px rgba(18,7,2,.52), 0 3px 8px rgba(18,7,2,.4);
}
.mail-back{transform:rotateY(180deg);overflow:hidden;}

/* 正面：袋身 → 封盖 → 前袋 → 火漆 */
.mf-body{position:absolute;inset:0;background-image:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.02));}
.mf-flap{
  position:absolute;left:0;top:0;width:100%;height:54%;
  transform-origin:50% 0;transform-style:preserve-3d;
  filter:drop-shadow(0 6px 8px rgba(20,8,2,.28));
}
.mf-flap-face{
  position:absolute;inset:0;backface-visibility:hidden;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.mf-flap-out{background-image:linear-gradient(178deg, var(--p-bg2,#ddd2b4), var(--p-bg,#e9e0c9));}
.mf-flap-in{
  transform:rotateX(180deg);
  background-image:linear-gradient(0deg, rgba(0,0,0,.16), rgba(0,0,0,.05));
}
.mf-pocket{
  position:absolute;inset:0;
  clip-path:polygon(0 100%, 50% 56%, 100% 100%);
  background-image:linear-gradient(160deg, rgba(0,0,0,.06), rgba(0,0,0,.13));
}
.mf-frame{
  position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--p-line,rgba(59,50,34,.18));
}
.mf-seal{
  --sw:clamp(52px,8.4vw,78px);
  position:absolute;left:50%;top:56.5%;
  width:var(--sw);aspect-ratio:1;
  margin-left:calc(var(--sw) / -2);margin-top:calc(var(--sw) / -2);
  transform:scale(0);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-hand);font-size:clamp(20px,3.2vw,30px);color:#f3d9c2;
  background:radial-gradient(circle at 34% 28%, #d05a4b, var(--seal,#a6342a) 54%, var(--seal-dark,#7e231c));
  box-shadow:0 10px 22px rgba(10,4,1,.5), inset 0 2px 5px rgba(255,255,255,.26), inset 0 -4px 9px rgba(0,0,0,.3);
  transform-origin:50% 50%;
}
.mf-seal::after{
  content:"";position:absolute;inset:16%;border-radius:50%;
  border:1px dashed rgba(243,217,194,.45);
}
.mf-seal span{position:relative;z-index:2;line-height:1;}

/* ---------- 信封背面 ----------
   一块空白的背面被 940px 的大信封一衬就空了，所以照着真实信封把该有的都补上：
   封舌折痕、收件人邮编格、贴邮票处的虚线框、盖在邮票上的收寄日戳、
   挂号条码，以及右下角那串印制信息（GB/T 1416 里确实要求印这些）。
   全部按百分比定位，信封放大缩小时整块版式等比跟着走；
   内层字号从 --mw 推出来，所以放大后字也跟着大。 */
.mail-back{
  padding:0;display:block;
  font-size:max(calc(var(--mw, 645px) * .025), 10.2px);
  line-height:1.5;
}
/* 封盖压在上面那一条，压出一层很淡的暗 */
.mail-back::before{
  content:"";position:absolute;left:0;right:0;top:0;height:9.6%;pointer-events:none;
  background:linear-gradient(180deg, rgba(40,24,8,.10), rgba(40,24,8,.03) 62%, transparent);
}
/* 封舌折线 */
.mb-seam{
  position:absolute;left:0;top:0;width:100%;height:100%;
  fill:none;stroke:var(--p-line,rgba(59,50,34,.18));stroke-width:1;pointer-events:none;
}
.mb-seam path{vector-effect:non-scaling-stroke;}
.mb-seam .mb-join{stroke-opacity:.55;}

/* 收件人邮编：六个金红框格 */
.mb-zip{
  position:absolute;left:4.6%;top:14.4%;
  display:flex;align-items:center;gap:.4em;
}
.mb-zip-label{
  font-family:var(--font-hand);font-size:.8em;letter-spacing:.14em;
  color:var(--p-accent,#7e231c);opacity:.8;margin-right:.1em;
}
.mb-zip-box{
  width:1.44em;height:1.44em;border-radius:1px;
  border:1px solid var(--p-accent,#7e231c);opacity:.5;
}

/* 贴邮票处：虚线框 + 框下一行小字 */
.mb-frame{
  position:absolute;right:5.4%;top:6.6%;width:19.4%;aspect-ratio:76/96;
  border:1px dashed var(--p-ink-soft,rgba(59,50,34,.4));border-radius:1px;
  opacity:.55;pointer-events:none;
}
.mb-frame i{
  position:absolute;left:50%;top:calc(100% + .45em);transform:translateX(-50%);
  font-style:normal;font-family:var(--font-serif);font-size:.6em;
  letter-spacing:.24em;color:var(--p-ink-soft,rgba(59,50,34,.5));
  white-space:nowrap;
}

/* 贴上去的邮票：真正有齿孔，换图只换里面的 <image> */
.mb-stamp{
  position:absolute;right:8.3%;top:8%;width:14.6%;aspect-ratio:76/96;
  transform:rotate(6deg);
  filter:drop-shadow(0 .35em .6em rgba(20,8,2,.28));
}
.mb-stamp svg{display:block;width:100%;height:100%;}

/* 收寄日戳：圆形日戳压在邮票上，左边拖着四道销票波纹 */
.mb-post{
  position:absolute;right:5.6%;top:2.6%;width:54%;
  pointer-events:none;
}
.mb-post svg{display:block;width:100%;height:auto;overflow:visible;}
.mb-post .pm-waves path{stroke:#4a342a;stroke-opacity:.34;stroke-width:1.6;vector-effect:non-scaling-stroke;}
.mb-post .pm-ring circle{stroke:#4a342a;stroke-opacity:.4;stroke-width:1.8;vector-effect:non-scaling-stroke;}
.mb-post .pm-ring circle:last-of-type{stroke-opacity:.26;stroke-width:1;}
.mb-post .pm-ring path{stroke:#4a342a;stroke-opacity:.4;stroke-width:1.4;vector-effect:non-scaling-stroke;}
.mb-post .pm-ring .pm-arcpath{stroke:none;}
.mb-post .pm-ring .pm-sep{stroke-opacity:.34;}
.mb-post text{
  font-family:var(--font-serif);fill:#4a342a;fill-opacity:.66;
  text-anchor:middle;
}
.mb-post .pm-arc{font-size:12px;letter-spacing:.14em;fill-opacity:.7;}
.mb-post .pm-date{font-size:17px;letter-spacing:.06em;fill-opacity:.72;}
.mb-post .pm-tag{font-size:10.5px;letter-spacing:.3em;fill-opacity:.55;}

/* 地址三行 */
.mb-form{
  position:absolute;left:8.4%;right:27%;top:25.2%;
  display:flex;flex-direction:column;gap:1.3em;
}
.mb-title{
  display:flex;align-items:center;gap:.8em;
  font-family:var(--font-display);font-size:.68em;letter-spacing:.3em;
  color:var(--p-ink-soft,rgba(59,50,34,.62));margin-bottom:.1em;
}
.mb-title span{flex:none;}
.mb-title::after{
  content:"";flex:1;height:1px;background:var(--p-line,rgba(59,50,34,.18));
}
.mb-row{
  display:flex;align-items:baseline;gap:.6em;
  border-bottom:1px solid var(--p-line-strong,rgba(59,50,34,.26));
  padding-bottom:.45em;
}
.mb-label{
  font-family:var(--font-hand);font-size:1.3em;
  color:var(--p-accent,#7e231c);flex:none;line-height:1;
}
.mb-row input{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--font-serif);font-size:1em;letter-spacing:.04em;
  color:var(--p-ink,#3b3222);padding:.1em 0;
}
.mb-row input:focus{outline:none;}
.mb-row input::placeholder{color:var(--p-ink-soft,rgba(59,50,34,.4));font-size:.9em;}
.mb-row.has-error{border-bottom-color:#b4453a;}
/* 这一格不再放地址，只盖一枚「已验证」的记号：
   发件地址属于后台身份，不属于信封。做得像一枚小印，而不像输入框。 */
.mb-mark{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:.55em;
  font-family:var(--font-serif);font-size:.95em;letter-spacing:.06em;
  color:var(--p-ink-soft,rgba(59,50,34,.48));
  padding:.1em 0;
}
.mb-mark.on{color:var(--p-ink,#3b3222);}
.mb-mark.on::before{
  content:"";flex:none;
  width:.72em;height:.72em;border-radius:50%;
  border:1.4px solid var(--p-accent,#7e231c);
  background:radial-gradient(circle at 50% 50%,
    rgba(126,35,28,.22) 0 34%,transparent 36%);
}
.mb-row input[type="date"]::-webkit-calendar-picker-indicator,
.mb-row input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  opacity:.32;cursor:pointer;
}
/* 寄达带时分，字比别的行收一点；宽度跟着内容走，日历图标才会紧跟在时间后面，
   不像原来那样被 flex:1 拉到行的另一头 */
.mb-row-due input{letter-spacing:.02em;flex:0 1 auto;max-width:100%;}
.mb-err{display:none;font-size:.62em;color:#b4453a;letter-spacing:.06em;margin-top:-.4em;}
.mb-err.on{display:block;}

/* 挂号条：一条竖条码 + 一串编号 */
.mb-slip{
  position:absolute;left:9%;bottom:7.2%;
  display:flex;flex-direction:column;gap:.45em;
}
.mb-slip-bar{
  display:block;width:9.4em;height:1.55em;opacity:.45;
  background:repeating-linear-gradient(90deg,
    var(--p-ink,#3b3222) 0 1.5px, transparent 1.5px 4px,
    var(--p-ink,#3b3222) 4px 5.5px, transparent 5.5px 8.5px,
    var(--p-ink,#3b3222) 8.5px 12px, transparent 12px 13.5px);
}
.mb-slip-no{
  font-family:var(--font-serif);font-size:.62em;letter-spacing:.3em;
  color:var(--p-ink-soft,rgba(59,50,34,.5));opacity:.9;
}

/* 底部居中那行提醒 */
.mb-note{
  position:absolute;left:50%;bottom:7.4%;transform:translateX(-50%);
  font-family:var(--font-serif);font-size:.7em;letter-spacing:.32em;
  color:var(--p-ink-soft,rgba(59,50,34,.5));white-space:nowrap;opacity:.85;
}

/* 右下角的印制信息 */
.mb-print{
  position:absolute;right:6%;bottom:6.4%;text-align:right;
  font-family:var(--font-serif);font-size:.6em;line-height:2;
  letter-spacing:.08em;color:var(--p-ink-soft,rgba(59,50,34,.5));
}
.mb-print span{display:block;}
.mb-print span:first-child{letter-spacing:.3em;opacity:.85;}

/* ---------- 底部邮票栏 ----------
   没有底色、没有边框，就是一行悬浮在桌面最下面；
   翻到信封背面时从右边滑进来（不是刷新就出现）。
   容器本身不吃点击，只有邮票和上传框可以点。 */
.stamp-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:14;
  padding:0 clamp(12px,3vw,26px) calc(34px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
  opacity:0;visibility:hidden;
}
.stamp-bar.on{visibility:visible;}
.stamp-bar-inner{
  max-width:1180px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.stamp-label{
  flex:none;font-family:var(--font-hand);font-size:clamp(13px,1.5vw,15px);
  color:var(--gold);letter-spacing:.12em;line-height:1.2;
  text-align:center;text-shadow:0 2px 8px rgba(12,5,2,.6);
  pointer-events:none;
}
.stamp-row{
  width:100%;display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(22px,2.8vw,44px);
}
.stamp-list{
  flex:0 1 auto;min-width:0;
  display:flex;align-items:flex-start;gap:clamp(24px,3.6vw,58px);
  overflow-x:auto;overflow-y:hidden;padding:10px 8px 8px;
  scrollbar-width:none;pointer-events:auto;
}
.stamp-list::-webkit-scrollbar{display:none;}
/* 一枚一枚摆成随手排开的样子：大小往上抬一档，间距拉开，角度各不相同 */
.stamp-tile{
  flex:none;width:clamp(66px,6.6vw,86px);aspect-ratio:76/96;
  border-radius:1px;padding:0;background:none;
  opacity:.68;
  transition:opacity .26s,transform .34s var(--ease-out),filter .26s;
  filter:drop-shadow(0 6px 14px rgba(10,4,1,.52));
}
/* 分散：横向错位 + 纵向高低 + 角度拉大，像真的被人一张张按上去 */
.stamp-tile:nth-child(1){transform:rotate(-8.5deg) translate(-6px, 9px);}
.stamp-tile:nth-child(2){transform:rotate(7.2deg)  translate(3px,-10px);}
.stamp-tile:nth-child(3){transform:rotate(-3.4deg) translate(8px, 12px);}
.stamp-tile:nth-child(4){transform:rotate(10.5deg) translate(-4px,-7px);}
.stamp-tile:nth-child(5){transform:rotate(-7.2deg) translate(5px, 11px);}
.stamp-tile:nth-child(6){transform:rotate(5.6deg)  translate(-7px,-9px);}
.stamp-tile:hover{opacity:1;transform:translateY(-10px) rotate(0deg);}
.stamp-tile.active{
  opacity:1;transform:translateY(-10px) rotate(0deg);
  filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 6px rgba(201,168,106,.95)) drop-shadow(0 12px 20px rgba(10,4,1,.5));
}
.stamp-tile svg{display:block;width:100%;height:100%;}

/* 自定义：也是一枚邮票，中间是虚线圈里一个加号 */
.stamp-up{
  position:relative;flex:none;
  width:clamp(66px,6.6vw,86px);aspect-ratio:76/96;
  cursor:pointer;opacity:.7;transform:rotate(-9.5deg) translate(7px, 6px);
  transition:opacity .26s,transform .34s var(--ease-out),filter .26s;
  filter:drop-shadow(0 6px 14px rgba(10,4,1,.44));
  pointer-events:auto;
}
.stamp-up:hover,.stamp-up.active{opacity:1;transform:translateY(-10px) rotate(0);}
.stamp-up.active{filter:drop-shadow(0 0 6px rgba(201,168,106,.95)) drop-shadow(0 8px 16px rgba(10,4,1,.45));}
.stamp-up .su-art,.stamp-up .su-art svg{display:block;width:100%;height:100%;}
.su-tip{
  position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);
  font-size:10px;letter-spacing:.1em;color:rgba(236,227,204,.5);
  white-space:nowrap;transition:color .26s;
}
.stamp-up:hover .su-tip{color:var(--gold);}
/* 栏子占住底部时给桌面上方留出空间，送出按钮不会被压住 */
.desk.has-stamps{padding-bottom:clamp(206px,25vh,232px);}

/* ---------- 翻到信封背面 ---------- */
/* 这一屏不滚：所有东西都得在一屏里放下。
   信封尺寸直接由 CSS 定：宽度先按 94vw 收，再按"一屏高度减去顶栏/按钮/邮票行"反推
   （77dvh 那几个常量就是按下面这些固定的占位算出来的，改邮票行或按钮高度要一起改） */
.desk.stage-back{overflow:hidden;padding-top:clamp(10px,2vh,18px);justify-content:center;}
.desk.stage-back .mail{--mw:min(1290px, 94vw, calc((77dvh - 140px) * 1.7));}
.desk.stage-back .action-hint{display:none;}
.desk.stage-back .action-bar{margin-top:clamp(10px,1.8vh,18px);}

/* ---------- 退出确认 ---------- */
.desk-confirm{
  position:fixed;inset:0;z-index:96;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(12,5,2,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility 0s linear .26s;
}
.desk-confirm.on{opacity:1;visibility:visible;transition-delay:0s;}
.dc-box{
  width:min(352px,86vw);padding:28px 26px 20px;text-align:center;
  background:linear-gradient(180deg,#2c1709,#1c0e05);
  border:1px solid rgba(201,168,106,.32);
  box-shadow:0 32px 64px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,232,190,.05);
  transform:translateY(12px) scale(.97);
  transition:transform .34s var(--ease-out);
}
.desk-confirm.on .dc-box{transform:none;}
.dc-text{
  font-family:var(--font-hand);font-size:clamp(17px,2.2vw,19px);line-height:1.7;
  color:var(--cream);letter-spacing:.06em;
}
.dc-hint{
  margin-top:8px;font-size:11.5px;line-height:1.8;
  color:rgba(236,227,204,.42);letter-spacing:.06em;
}
.dc-actions{display:flex;gap:10px;margin-top:22px;}
.dc-btn{
  flex:1;min-height:42px;padding:11px 0;
  border:1px solid rgba(236,227,204,.24);border-radius:1px;
  font-size:12.5px;letter-spacing:.16em;color:rgba(236,227,204,.82);
  background:none;
  transition:border-color .26s,color .26s,background .26s;
}
.dc-btn:hover{border-color:rgba(236,227,204,.5);background:rgba(255,255,255,.05);}
.dc-ok{border-color:rgba(201,168,106,.62);color:var(--gold);}
.dc-ok:hover{background:var(--gold);color:#2a170a;border-color:var(--gold);}

/* ---------- 底部按钮 ---------- */
.action-bar{
  position:relative;z-index:2;
  margin-top:clamp(20px,3.4vh,34px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.btn-seal{
  position:relative;display:inline-flex;align-items:center;gap:12px;min-height:46px;
  padding:14px 40px;border:1px solid var(--gold);color:var(--cream);background:rgba(28,14,6,.24);
  letter-spacing:.34em;text-indent:.34em;font-size:14px;
  transition:background .34s,color .34s,transform .12s,border-color .34s;
}
.btn-seal:hover{background:var(--gold);color:#2a170a;}
.btn-seal:active{transform:scale(.985);}
.btn-seal[hidden]{display:none;}
.btn-seal[disabled]{opacity:.45;cursor:not-allowed;}
.btn-seal[disabled]:hover{background:rgba(28,14,6,.24);color:var(--cream);}
.btn-seal .seal-dot{
  width:11px;height:11px;border-radius:50%;background:var(--seal);
  box-shadow:0 0 0 4px rgba(166,52,42,.18);transition:transform .34s;
}
.btn-seal:hover .seal-dot{transform:scale(1.3);}
.action-hint{
  font-size:12.5px;color:rgba(236,227,204,.55);letter-spacing:.08em;
  text-align:center;max-width:40ch;line-height:1.9;
}

/* ---------- 响应式 ---------- */
@media (max-width:820px){
  /* 信封从左上角那颗叉号下面开始，不压在一起 */
  .desk.stage-back{padding-top:66px;}
  .paper{padding:22px 20px 18px;}
  .fs-slice{padding:22px 20px 18px;}
  .desk-bar{margin-bottom:26px;}
  .stack-4{left:30px;right:-4px;bottom:10px;}
  .stack-3{top:26px;left:-14px;right:30px;bottom:6px;}
  .stack-2{top:14px;left:20px;right:-14px;}
  .stack-1{top:-14px;left:-18px;right:8px;}
  .stamp-up{transform:rotate(-9.5deg) translate(5px, 4px);}
}
@media (max-width:560px){
  .desk{padding:12px 12px 40px;}
  .desk-bar{margin-bottom:10px;}
  .sp{width:24px;height:24px;font-size:12px;}
  /* 窄屏的纸宽已经被屏幕顶死了，再放宽只会把纸压矮、能写的行数变少，
     所以这一档回到 A4 的比例，把高度留给正文 */
  .sheet-stack{width:min(calc((100dvh - 246px) * .7071), 100%);aspect-ratio:210 / 297;}
  .paper{padding:18px 16px 16px;}
  .fs-slice{padding:18px 16px 16px;}
  .letter-body textarea{--lh:1.95em;min-height:calc(var(--lh) * 7);}
  .copy-body{line-height:1.95em;text-indent:2em;}
  .mail{--mw:min(94vw,500px);}
  .stamp-bar{padding:0 10px calc(24px + env(safe-area-inset-bottom,0px));}
  .stamp-bar-inner{gap:8px;}
  /* 窄屏一行摆不下就缩小一点，7 枚还是要能一眼看全 */
  .stamp-row{gap:8px;}
  .stamp-list{gap:8px;padding:12px 4px 8px;}
  .stamp-tile,.stamp-up{width:clamp(38px,10.4vw,58px);}
  .stamp-label{font-size:12px;letter-spacing:.08em;}
  .su-tip{font-size:8.5px;letter-spacing:0;left:auto;right:0;transform:none;}
  .desk.has-stamps{padding-bottom:154px;}
  .mb-title{display:none;}
  .mb-form{gap:9px;}
  .mb-row{padding-bottom:5px;}
  .mb-post{display:none;}
  .btn-seal{padding:13px 32px;font-size:13px;}
  .action-hint{font-size:12px;}
}