변경사항 검토

<div class="diff" id="diff">
  <div class="ln head">utils.ts</div>
  <div class="ln ctx">function formatPrice(n) {</div>
  <div class="ln del">&nbsp;&nbsp;return '$' + n;</div>
  <div class="ln add">&nbsp;&nbsp;return '$' + n.toFixed(2);</div>
  <div class="ln ctx">}</div>
  <div class="actions" id="acts">
    <button class="rej">거부</button>
    <button class="acc">승인</button>
  </div>
</div>

.diff{width:min(300px,96%);border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface);font-family:ui-monospace,monospace;font-size:11px}
.ln{padding:4px 12px;white-space:pre;color:var(--fg)}
.ln.head{background:var(--bg);color:var(--muted);font-family:inherit;font-weight:700;font-size:10.5px;padding:7px 12px}
.ln.del{background:color-mix(in srgb, #e5484d 16%, transparent);color:#e5484d;text-decoration:line-through;text-decoration-thickness:1px;transition:opacity .3s,max-height .3s;max-height:30px}
.ln.add{background:color-mix(in srgb, #0f9d78 16%, transparent);color:#0f9d78;transition:background .3s}
.ln.del[data-gone]{opacity:0;max-height:0;padding-top:0;padding-bottom:0}
.ln.add[data-kept]{background:transparent;color:var(--fg)}
.actions{display:flex;gap:8px;padding:9px 12px;border-top:1px solid var(--line)}
.actions button{flex:1;padding:6px 0;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--line);font-family:inherit}
.rej{background:var(--bg);color:var(--muted)}
.acc{background:var(--accent-3);color:#fff;border-color:var(--accent-3)}

const diff = document.getElementById('diff'), del = diff.querySelector('.del'), add = diff.querySelector('.add'), acts = document.getElementById('acts');
function run() {
  del.removeAttribute('data-gone'); add.removeAttribute('data-kept'); acts.style.opacity = 1;
  setTimeout(() => {
    del.setAttribute('data-gone', '');
    add.setAttribute('data-kept', '');
    acts.style.opacity = .35;
  }, 2600);
}
run();
setInterval(run, 3800);