/* 文章訂閱元件樣式：原本寫在 subscribe.js 裡用 JS 注入 <style>，
   改成獨立 CSS 讓瀏覽器在繪製前就套用，訂閱框不會載入後才撐開版面（CLS）。
   subscribe.js 仍會在沒有這支 link 的頁面自動補上。 */
/* ---------- 共用文末訂閱框 ---------- */
.blog-sub{max-width:720px;margin:56px auto 8px;padding:0 24px}
.blog-sub-box{background:var(--bg-soft,#f5f7f9);border:1px solid var(--line,#e5e8ed);border-radius:20px;padding:36px 34px;box-shadow:var(--shadow-s,0 1px 3px rgba(16,24,40,.06))}
.blog-sub .k{font-family:"Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:3px;font-size:12px;color:var(--accent,#dc2626);font-weight:600;text-transform:uppercase;display:block;margin-bottom:12px}
.blog-sub h3{font-size:23px;letter-spacing:-.02em;color:var(--ink,#0c1015);margin:0 0 10px;font-weight:700;line-height:1.3}
.blog-sub p.lede{font-size:15px;color:var(--txt-dim,#5b6571);line-height:1.7;margin:0 0 20px}
.blog-sub .fine{font-size:12px;color:var(--txt-mut,#8a94a1);margin:14px 0 0}
@media(max-width:560px){.blog-sub button{width:100%}}

/* ---------- 表單共用樣式（三個入口都吃） ---------- */
.blog-sub-form{display:flex;gap:10px;flex-wrap:wrap}
.blog-sub-form input[type=email]{flex:1;min-width:200px;background:#fff;border:1px solid var(--line-2,#d9dde4);border-radius:44px;padding:14px 20px;color:var(--txt,#11161c);font-size:15px;font-family:inherit}
.blog-sub-form input[type=email]:focus{outline:none;border-color:var(--accent,#dc2626);box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.blog-sub-form button{background:var(--accent,#dc2626);color:#fff;border:none;border-radius:44px;padding:14px 30px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:transform .15s,opacity .15s}
.blog-sub-form button:hover{transform:translateY(-2px)}
.blog-sub-form button:disabled{opacity:.6;cursor:not-allowed;transform:none}
.blog-sub-hp{display:none !important}
.blog-sub-msg{display:none;font-size:14.5px;font-weight:600;line-height:1.6;margin:10px 0 0}

/* ---------- 1. 作者欄旁的訂閱按鈕 ---------- */
.art-author{flex-wrap:wrap}
.sub-inline-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--accent,#dc2626);color:#fff;border:none;border-radius:44px;padding:10px 20px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;line-height:1;transition:transform .15s,box-shadow .15s,opacity .15s;box-shadow:0 2px 10px rgba(220,38,38,.22)}
.sub-inline-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(220,38,38,.28)}
.sub-inline-toggle svg{width:15px;height:15px;flex:none}
.sub-inline-toggle[aria-expanded=true]{background:var(--bg-soft2,#eef1f5);color:var(--txt-dim,#5b6571);box-shadow:none}
.sub-inline{display:none;margin-top:16px;background:var(--bg-soft,#f5f7f9);border:1px solid var(--line,#e5e8ed);border-radius:16px;padding:18px 20px}
.sub-inline.open{display:block;animation:subInlineIn .25s ease}
@keyframes subInlineIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sub-inline .t{font-size:14.5px;font-weight:600;color:var(--ink,#0c1015);margin:0 0 12px;line-height:1.6}
.sub-inline .blog-sub-form input[type=email]{padding:12px 18px;font-size:14.5px}
.sub-inline .blog-sub-form button{padding:12px 24px;font-size:14.5px}
.sub-inline .fine{font-size:12px;color:var(--txt-mut,#8a94a1);margin:12px 0 0}
@media(max-width:560px){
  .sub-inline-toggle{margin-left:0;margin-top:14px;width:100%;justify-content:center}
  .sub-inline .blog-sub-form button{width:100%}
}

/* ---------- 2. 捲動 60% 浮出的底條 ---------- */
.sub-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-top:1px solid var(--line,#e5e8ed);box-shadow:0 -6px 26px rgba(16,24,40,.10);transform:translateY(110%);transition:transform .35s cubic-bezier(.22,.8,.3,1);padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
.sub-bar.show{transform:none}
.sub-bar-inner{max-width:920px;margin:0 auto;display:flex;align-items:center;gap:18px}
.sub-bar .txt{flex:1;min-width:0}
.sub-bar .txt strong{display:block;font-size:15px;font-weight:700;color:var(--ink,#0c1015);line-height:1.4}
.sub-bar .txt span{display:block;font-size:12.5px;color:var(--txt-mut,#8a94a1);margin-top:3px}
.sub-bar .blog-sub-form{flex:0 1 420px;flex-wrap:nowrap}
.sub-bar .blog-sub-form input[type=email]{min-width:0;padding:11px 18px;font-size:14.5px}
.sub-bar .blog-sub-form button{padding:11px 22px;font-size:14.5px}
.sub-bar .blog-sub-msg{margin:0}
.sub-bar .x{flex:none;background:none;border:none;cursor:pointer;color:var(--txt-mut,#8a94a1);font-size:22px;line-height:1;padding:4px 2px;font-family:inherit}
.sub-bar .x:hover{color:var(--ink,#0c1015)}
@media(max-width:720px){
  .sub-bar{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .sub-bar-inner{gap:10px;flex-wrap:wrap}
  .sub-bar .txt strong{font-size:14px}
  .sub-bar .txt span{display:none}
  .sub-bar .blog-sub-form{flex:1 1 100%;gap:8px}
  .sub-bar .blog-sub-form button{padding:11px 18px}
}

/* ---------- 4. 文章列表頁：Hero 底下的訂閱列 ---------- */
.sub-hero{margin-top:26px;max-width:520px}
.sub-hero .blog-sub-form input[type=email]{padding:13px 20px}
.sub-hero .blog-sub-form button{padding:13px 26px}
.sub-hero .fine{font-size:12.5px;color:var(--txt-mut,#8a94a1);margin:12px 0 0}
@media(max-width:560px){.sub-hero .blog-sub-form button{width:100%}}