@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

#wxm-overlay{
  position:fixed; inset:0; z-index:2147483000; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(6,6,8,.74);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
}
#wxm-overlay::before{ /* 緩慢漂移的暖金光暈，讓背景「呼吸」 */
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(212,175,95,.10), transparent 70%),
    radial-gradient(40% 40% at 70% 70%, rgba(212,175,95,.08), transparent 70%);
  animation:wxm-drift 14s ease-in-out infinite alternate;
}
@keyframes wxm-drift{ 0%{transform:translate(-3%,-2%) scale(1)} 100%{transform:translate(3%,2%) scale(1.08)} }
#wxm-overlay.wxm-open{ opacity:1; visibility:visible; }

#wxm-card{
  position:relative; width:min(420px,92vw); max-height:92vh; overflow-y:auto;
  padding:46px 38px 34px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,175,95,.16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 5px),
    linear-gradient(160deg,#161618 0%, #0c0c0e 100%);
  border:1px solid rgba(212,175,95,.38);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(26px) scale(.94); opacity:0;
  transition:transform .55s cubic-bezier(.18,.9,.28,1.12), opacity .45s ease;
  text-align:center; color:#efe9dc;
  font-family:'Noto Sans TC',system-ui,sans-serif;
}
#wxm-overlay.wxm-open #wxm-card{ transform:translateY(0) scale(1); opacity:1; }
#wxm-card::before{ content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,95,.9),transparent); }
#wxm-card.wxm-pulse{ animation:wxm-card-pulse .6s ease; }
@keyframes wxm-card-pulse{
  0%{box-shadow:0 30px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 0 rgba(212,175,95,0)}
  40%{box-shadow:0 30px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 3px rgba(212,175,95,.55)}
  100%{box-shadow:0 30px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 0 rgba(212,175,95,0)}
}

.wxm-corner{ position:absolute; width:18px; height:18px; border:1.5px solid rgba(212,175,95,.85); opacity:0; transition:opacity .5s ease .25s; }
#wxm-overlay.wxm-open .wxm-corner{ opacity:1; }
.wxm-corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.wxm-corner.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.wxm-corner.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.wxm-corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }

#wxm-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; z-index:3;
  border:1px solid rgba(212,175,95,.4); border-radius:50%;
  background:transparent; color:#d4af5f; font-size:16px; line-height:1; cursor:pointer;
  transition:transform .4s ease, color .3s, border-color .3s;
}
#wxm-close:hover{ transform:rotate(90deg); color:#fff; border-color:#d4af5f; }

.wxm-eyebrow{ position:relative; display:inline-block; font-size:11px; letter-spacing:.42em; color:#9a8a5e; text-transform:uppercase; margin:0 0 14px; }
.wxm-eyebrow::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-7px; width:26px; height:1px; background:linear-gradient(90deg,transparent,#d4af5f,transparent); }
.wxm-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; line-height:1.1; letter-spacing:.04em; margin:0; color:#f3ead2; }
.wxm-sub{ font-size:13px; font-weight:300; color:#b9b1a0; margin:12px 0 22px; letter-spacing:.04em; }

/* 二維碼：金框裱邊 + 取景角標 + 掃描線 + 對焦微動效 */
.wxm-qr-wrap{ position:relative; width:min(224px,64vw); margin:0 auto; border:1px solid rgba(212,175,95,.55); background:#fff; }
.wxm-qr-wrap img{ width:100%; height:auto; display:block; }
#wxm-qr{ transition:transform .6s cubic-bezier(.18,.9,.28,1.1), filter .6s ease; transform:scale(.94); filter:blur(3px); }
#wxm-overlay.wxm-open #wxm-qr{ transform:scale(1); filter:blur(0); }
.wxm-qc{ position:absolute; width:16px; height:16px; border:2px solid #d4af5f; opacity:0; z-index:2; transition:opacity .5s ease .3s; }
#wxm-overlay.wxm-open .wxm-qc{ animation:wxm-qc-pulse 2.4s ease-in-out infinite; }
@keyframes wxm-qc-pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
.wxm-qc.tl{ top:6px; left:6px; border-right:0; border-bottom:0; }
.wxm-qc.tr{ top:6px; right:6px; border-left:0; border-bottom:0; }
.wxm-qc.bl{ bottom:6px; left:6px; border-right:0; border-top:0; }
.wxm-qc.br{ bottom:6px; right:6px; border-left:0; border-top:0; }
.wxm-scan{ position:absolute; left:0; right:0; height:46px; top:0; z-index:2;
  background:linear-gradient(180deg,transparent,rgba(212,175,95,.32),transparent); pointer-events:none; opacity:0; }
#wxm-overlay.wxm-open .wxm-scan{ opacity:1; animation:wxm-scan 2.8s ease-in-out infinite; }
@keyframes wxm-scan{ 0%{top:0} 50%{top:calc(100% - 46px)} 100%{top:0} }
.wxm-qr-fb{ display:none; min-height:220px; align-items:center; justify-content:center; color:#8a7a4e; font-size:12px; text-align:center; padding:12px; }

.wxm-or{ display:flex; align-items:center; gap:12px; margin:20px 0 6px; color:#8a7c54; font-size:11px; letter-spacing:.3em; }
.wxm-or::before,.wxm-or::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(212,175,95,.4),transparent); }

.wxm-id{ margin:4px 0 4px; font-size:13px; color:#cfc6b2; letter-spacing:.05em; }
.wxm-id b{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:18px; letter-spacing:.12em; color:#f3ead2; margin-left:6px; }

#wxm-copy{
  position:relative; overflow:hidden; margin-top:12px; width:100%; padding:13px 18px; cursor:pointer;
  background:transparent; color:#e7c878; border:1px solid rgba(212,175,95,.7); border-radius:2px;
  font-family:'Noto Sans TC',sans-serif; font-size:14px; font-weight:500; letter-spacing:.18em;
  transition:color .35s ease, border-color .35s ease;
}
#wxm-copy::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); transition:left .6s ease; }
#wxm-copy:hover{ color:#15110a; border-color:#d4af5f; background:linear-gradient(90deg,#caa24e,#e7c878); }
#wxm-copy:hover::after{ left:130%; }
#wxm-copy.wxm-copied{ color:#15110a; background:linear-gradient(90deg,#b9913f,#d4af5f); border-color:#d4af5f; }
.wxm-copy-label{ display:inline-flex; align-items:center; gap:8px; }
.wxm-check{ width:16px; height:16px; display:none; }
.wxm-check path{ stroke:#15110a; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24; }
#wxm-copy.wxm-copied .wxm-check{ display:inline-block; }
#wxm-copy.wxm-copied .wxm-check path{ animation:wxm-draw .4s ease forwards; }
@keyframes wxm-draw{ to{ stroke-dashoffset:0; } }

.wxm-foot{ margin-top:14px; font-size:11px; color:#7d7565; letter-spacing:.08em; }

@media (max-width:480px){
  #wxm-card{ padding:40px 22px 26px; }
  .wxm-title{ font-size:25px; }
  .wxm-qr-wrap{ width:min(196px,60vw); }
}