다크 패턴

<div class="card">
  <p class="q">이메일로 계속하기</p>
  <label class="chk"><input type="checkbox" checked disabled><span>마케팅 소식 및 파트너 광고 수신에 동의합니다</span></label>
  <button class="go">계속하기 →</button>
  <a class="tiny" href="#">아니요, 저는 좋은 혜택을 놓치고 싶어요</a>
  <div class="warn" id="warn">⚠</div>
</div>

.card{position:relative;width:82%;max-width:280px;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;gap:10px}
.q{margin:0;font:700 13px/1.3 sans-serif;color:var(--fg)}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;color:var(--muted);line-height:1.4}
.chk input{margin-top:2px}
.go{border:0;border-radius:10px;padding:11px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.tiny{justify-self:center;font-size:9.5px;color:var(--line);text-decoration:underline}
.warn{position:absolute;top:-10px;right:34px;width:22px;height:22px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font:900 12px/1 monospace;opacity:0;transform:scale(.6);animation:pop 2.4s ease-in-out infinite}
@keyframes pop{0%,8%{opacity:0;transform:scale(.6)}18%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}