/* ============================================================
   分享弹层（栏目列表页 list.html / 文章页 article.html 共用）
   触发：顶栏右侧「···」按钮
   结构：半透明黑色遮罩 → 中间当前页二维码 → 底部「复制链接 / 微信分享」
   配色：跟随米金色系（--primary #d4a373）
   ============================================================ */

.share-mask{
  position:fixed;left:0;top:0;right:0;bottom:0;
  z-index:900;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  display:flex;flex-direction:column;
  padding:56px 16px calc(88px + env(safe-area-inset-bottom,0px));
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.share-mask.open{opacity:1;visibility:visible;}

/* 关闭按钮（右上角） */
.share-close{
  position:absolute;
  top:calc(14px + env(safe-area-inset-top,0px));right:16px;
  width:36px;height:36px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;cursor:pointer;padding:0;
}

/* 中间二维码区 */
.share-body{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:0;
}
.share-qr-card{
  width:100%;max-width:276px;
  background:#fff;border-radius:16px;
  padding:20px 20px 16px;
  text-align:center;
  box-shadow:0 14px 44px rgba(0,0,0,.4);
  transform:translateY(-4%);
}
.share-qr-title{
  font-size:15px;font-weight:700;color:#1a1a1a;
  margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 二维码容器（由 qrcode.min.js 生成 canvas + img，内边距即二维码静区） */
.share-qr-box{
  display:block;width:196px;height:196px;margin:0 auto;
  padding:10px;background:#fff;
  border:1px solid #f1f1f1;border-radius:10px;
  position:relative;overflow:hidden;
}
.share-qr-box:empty::after{
  content:"二维码生成中…";
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  font-size:12px;color:#c9c9c9;text-align:center;
}
.share-qr-box img,
.share-qr-box canvas{display:block;width:176px !important;height:176px !important;}
.share-qr-tip{
  font-size:12px;color:#8d99ae;line-height:1.6;margin-top:14px;
}
.share-qr-tip b{color:#d4a373;}

/* 底部按钮区 */
.share-actions{
  flex-shrink:0;
  display:flex;gap:12px;
  width:100%;max-width:420px;
  margin:28px auto 0;
}
.share-btn{
  flex:1;
  height:46px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:600;
  color:#fff;cursor:pointer;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  border-radius:23px;
  transition:background-color .2s,transform .1s;
  font-family:inherit;
  padding:0;
}
.share-btn:active{transform:scale(.97);background:rgba(255,255,255,.26);}
.share-btn.primary{
  background:var(--primary,#d4a373);
  border-color:var(--primary,#d4a373);
  color:#fff;
}
.share-btn.primary:active{background:var(--primary-dark,#b98a55);}
.share-btn svg{width:17px;height:17px;fill:currentColor;}

/* 轻提示 */
.share-toast{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:990;
  max-width:76vw;
  padding:11px 20px;
  background:rgba(0,0,0,.82);
  color:#fff;font-size:14px;line-height:1.5;
  border-radius:10px;text-align:center;
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.share-toast.show{opacity:1;visibility:visible;}

/* 微信右上角引导（页面内无法主动拉起微信分享，只能引导） */
.share-guide{
  position:fixed;left:0;top:0;right:0;bottom:0;
  z-index:995;
  background:rgba(0,0,0,.8);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.share-guide.open{opacity:1;visibility:visible;}
.share-guide-arrow{
  position:absolute;top:14px;right:22px;
  font-size:46px;line-height:1;
  color:#d4a373;
  animation:zxyyShareArrow 1.1s ease-in-out infinite;
}
@keyframes zxyyShareArrow{
  0%,100%{transform:translate(0,0);opacity:.7;}
  50%{transform:translate(-4px,4px);opacity:1;}
}
.share-guide-text{
  position:absolute;top:82px;right:20px;
  max-width:230px;
  color:#fff;font-size:14px;line-height:1.7;
  text-align:right;
}
.share-guide-text b{color:#d4a373;}
.share-guide-tip{
  position:absolute;left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom,0px));
  text-align:center;color:rgba(255,255,255,.7);font-size:13px;
}

@media (min-width:768px){
  .share-qr-card{max-width:300px;padding:24px 24px 18px;}
  .share-qr-box{width:216px;height:216px;}
  .share-qr-box img,.share-qr-box canvas{width:196px !important;height:196px !important;}
  .share-actions{max-width:360px;margin-top:32px;}
}

/* ============================================================
   微信 / QQ 分享缩略图占位（article.html 与 list.html 共用）
   ------------------------------------------------------------
   微信抓取分享卡片图片时，只认可宽度 ≥300px 的图片。
   所以这张图必须保留「真实尺寸」，只是用离屏定位让它不出现在版面里。
   ★ 不要改成 display:none / width:0 / opacity:0 —— 微信会判定为无效图片而忽略。
   ★ 负 left 不会产生横向滚动条，可以放心用。
   ============================================================ */
.wx-share-thumb{
  position:absolute;
  left:-9999px;
  top:0;
  width:300px;
  height:300px;
  object-fit:cover;
  pointer-events:none;
}