Stop generating

<div class="wrap">
  <div class="bubble"><span id="txt"></span><span class="caret" id="caret">▍</span></div>
  <div class="ctrl">
    <button class="stopbtn" id="btn"><svg id="icn" width="12" height="12" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor"/></svg></button>
    <span class="lbl" id="lbl">생성 중…</span>
  </div>
</div>

.wrap{width:min(290px,94%);display:grid;gap:9px}
.bubble{padding:10px 12px;border-radius:12px;border-bottom-left-radius:4px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:12px;line-height:1.6;min-height:20px}
.caret{color:var(--accent);animation:blink 1s step-end infinite}
.caret[data-hide]{display:none}
@keyframes blink{50%{opacity:0}}
.ctrl{display:flex;align-items:center;gap:7px}
.stopbtn{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.lbl{font-size:10.5px;color:var(--muted)}

const full = '분산 시스템에서 일관성과 가용성은 서로 트레이드오프 관계에 있고, 네트워크 분할이 생기면 둘 중 하나를 포기해야 하는데 이걸';
const txt = document.getElementById('txt'), caret = document.getElementById('caret'), lbl = document.getElementById('lbl');
let i = 0, timer = null, stopAt = 46;
function step() {
  txt.textContent = full.slice(0, i);
  if (i >= stopAt) { finish(true); return; }
  i++;
  timer = setTimeout(step, 34);
}
function finish(stopped) {
  clearTimeout(timer);
  caret.setAttribute('data-hide', '');
  lbl.textContent = stopped ? '중단됨' : '완료';
  setTimeout(restart, 2000);
}
function restart() {
  i = 0; stopAt = 30 + Math.floor(Math.random() * 30);
  txt.textContent = '';
  caret.removeAttribute('data-hide');
  lbl.textContent = '생성 중…';
  step();
}
step();