휴먼 인 더 루프

<div class="card" id="card">
  <div class="head"><i class="warn">!</i><strong>승인이 필요해요</strong></div>
  <p>임시 파일 <b>12개</b>를 삭제합니다. 이 작업은 되돌릴 수 없어요.</p>
  <div class="row">
    <button class="deny" id="deny">거부</button>
    <button class="approve" id="ok">승인</button>
  </div>
</div>

.card{width:min(280px,94%);border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:14px;display:grid;gap:9px;transition:opacity .2s}
.head{display:flex;align-items:center;gap:8px;font-size:12.5px}
.warn{width:18px;height:18px;border-radius:50%;background:#f5a524;color:#fff;font-style:normal;font-weight:800;font-size:11px;display:grid;place-items:center;flex-shrink:0}
p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.55}
.row{display:flex;gap:8px}
.deny,.approve{flex:1;border-radius:9px;padding:8px 0;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--line)}
.deny{background:var(--bg);color:var(--muted)}
.approve{background:var(--accent);color:#fff;border-color:var(--accent)}
.card[data-approved] .row{display:none}
.status{display:none;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0f9d78}
.card[data-approved] .status{display:flex}
.status i{width:16px;height:16px;border-radius:50%;background:var(--accent-3);display:inline-grid;place-items:center}
.status i::after{content:"";width:4px;height:7px;border:solid #fff;border-width:0 1.4px 1.4px 0;transform:rotate(45deg) translate(-1px,-1px)}

const card = document.getElementById('card'), ok = document.getElementById('ok');
const row = document.querySelector('.row');
const status = document.createElement('div');
status.className = 'status';
status.innerHTML = '<i></i><span>승인됨 — 삭제를 실행합니다</span>';
card.appendChild(status);
function approve() {
  card.setAttribute('data-approved', '');
  setTimeout(reset, 2000);
}
function reset() { card.removeAttribute('data-approved'); setTimeout(approve, 1600); }
setTimeout(approve, 1600);
ok.addEventListener('click', approve);