/* ════════════════════════════════════════════
   解鎖牆（email gate）共用樣式
   ・自帶配色（不依賴 tokens.css，練習頁也能用）
   ・全部 class 以 .dng- 前綴，避免和各頁樣式打架
   行為在 js/gate.js
   ════════════════════════════════════════════ */
.dng-root{
  --dng-paper:#f9f3e8; --dng-paper2:#f1e8d6; --dng-line:rgba(26,20,16,.12);
  --dng-ink:#1a1410; --dng-ink-soft:#7a6a5a; --dng-verm:#8b3929; --dng-pine:#4a5d4e;
  --dng-font-disp:'Noto Serif TC',serif; --dng-font-body:'Noto Sans TC',sans-serif;
}

/* 共用：卡片內容 */
.dng-card{
  width:min(420px, calc(100vw - 32px));
  background:var(--dng-paper); color:var(--dng-ink);
  border-radius:16px; padding:30px 26px 24px;
  box-shadow:0 18px 50px rgba(26,20,16,.28); text-align:center;
  font-family:var(--dng-font-body);
}
.dng-badge{
  display:inline-block; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--dng-verm); margin-bottom:.7rem;
}
.dng-title{ font-family:var(--dng-font-disp); font-weight:700; font-size:1.4rem; line-height:1.35; margin:0 0 .9rem; }
.dng-lead{ font-size:.9rem; line-height:1.65; color:var(--dng-ink-soft); margin:0 0 1.1rem; }
.dng-lead b{ color:var(--dng-ink); }
.dng-list{ list-style:none; margin:0 0 1.2rem; padding:0; display:inline-block; text-align:left; }
.dng-list li{ position:relative; padding-left:1.7rem; font-size:.92rem; line-height:1.5; color:var(--dng-ink); margin-bottom:.55rem; }
.dng-list li:last-child{ margin-bottom:0; }
.dng-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--dng-pine); font-weight:700; }

.dng-form{ display:flex; flex-direction:column; gap:.6rem; }
.dng-input{
  width:100%; box-sizing:border-box; font:inherit; font-size:1rem;
  padding:.8rem .95rem; border:1.5px solid var(--dng-line); border-radius:10px;
  background:#fff; color:var(--dng-ink);
}
.dng-input:focus{ outline:none; border-color:var(--dng-verm); box-shadow:0 0 0 3px rgba(139,57,41,.14); }
.dng-btn{
  width:100%; font:inherit; font-weight:700; font-size:1rem; cursor:pointer;
  padding:.85rem 1rem; border:none; border-radius:10px;
  background:var(--dng-verm); color:var(--dng-paper); transition:filter .15s ease, transform .05s ease;
}
.dng-btn:hover{ filter:brightness(1.08); }
.dng-btn:active{ transform:translateY(1px); }
.dng-btn:disabled{ opacity:.6; cursor:default; }
.dng-fine{ font-size:.72rem; color:var(--dng-ink-soft); margin:.8rem 0 0; }
.dng-err{ font-size:.8rem; color:var(--dng-verm); margin:.55rem 0 0; }

/* 成功狀態 */
.dng-card.is-ok .dng-form, .dng-card.is-ok .dng-fine{ display:none; }
.dng-ok{ display:none; }
.dng-card.is-ok .dng-ok{ display:block; }
.dng-ok .tick{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; background:var(--dng-pine); color:#fff;
  font-size:1.4rem; margin-bottom:.6rem;
}
.dng-ok p{ font-size:.95rem; color:var(--dng-ink); font-weight:500; margin:0; }

/* ── 全屏遮罩（gated 整頁）── */
.dng-overlay{
  position:fixed; inset:0; z-index:2147483600;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(249,243,232,.82); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}

/* ── 彈窗（點上鎖卡片／練習鈕觸發）── */
.dng-modal{
  position:fixed; inset:0; z-index:2147483601;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.dng-modal.is-open{ display:flex; }
.dng-modal__scrim{ position:absolute; inset:0; background:rgba(26,20,16,.55); }
.dng-modal .dng-card{ position:relative; z-index:1; animation:dng-pop .22s ease-out; }
.dng-close{
  position:absolute; top:8px; right:12px; z-index:2; cursor:pointer;
  background:none; border:none; font-size:1.6rem; line-height:1; color:var(--dng-ink-soft);
}
@keyframes dng-pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .dng-modal .dng-card{ animation:none; } }

body.dng-lock{ overflow:hidden; }

/* ── 回饋 pill（練習頁右下角）── */
.dng-fb{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:2147483500;
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-family:var(--dng-font-body); font-size:.8rem; font-weight:500; color:var(--dng-ink);
  background:var(--dng-paper); border:1.5px solid var(--dng-line); border-radius:999px;
  padding:.5rem .85rem; box-shadow:0 4px 14px rgba(26,20,16,.16);
}
.dng-fb:hover{ border-color:var(--dng-verm); color:var(--dng-verm); }

/* 上鎖卡片在情境列表頁的徽章（接 .sc-badge 既有樣式，補一個信封色） */
.sc-badge.badge-email{ background:rgba(139,57,41,.1); color:#8b3929; }