멘탈 모델

<div class="stage">
  <div class="side">
    <div class="bub user">🧠 "복구 가능"</div>
    <div class="icon">🗑️</div>
    <div class="bub sys" id="sys">⚙️ 영구 삭제</div>
  </div>
  <div class="gap" id="gap">✗</div>
</div>

.stage{position:relative;display:flex;align-items:center;gap:18px}
.side{display:grid;gap:10px;justify-items:center}
.bub{padding:6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font:600 11px/1 sans-serif;color:var(--fg)}
.icon{font-size:30px;text-align:center}
.gap{font:900 22px/1 monospace;color:var(--accent-2);transition:color .3s,transform .3s}
.gap.ok{color:var(--accent-3);transform:scale(1.3)}
.sys{transition:background .4s,border-color .4s}
.sys.aligned{background:var(--accent-3);color:#fff;border-color:var(--accent-3)}

const sys = document.getElementById('sys');
const gap = document.getElementById('gap');
let aligned = false;
setInterval(() => {
  aligned = !aligned;
  sys.textContent = aligned ? '⚙️ 영구 삭제' : '⚙️ 영구 삭제';
  sys.classList.toggle('aligned', aligned);
  gap.textContent = aligned ? '✓' : '✗';
  gap.classList.toggle('ok', aligned);
}, 2000);