다시 생성

<div class="wrap">
  <div class="bubble" id="bub">첫 문단은 후킹, 둘째 문단은 핵심 근거 두 가지로 구성하면 좋아요.</div>
  <div class="bar">
    <button class="rg" id="rgn"><svg id="ricon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M21 12a9 9 0 1 1-2.6-6.36M21 4v6h-6"/></svg><span>다시 생성</span></button>
    <span class="ver" id="ver">1 / 1</span>
  </div>
</div>

.wrap{width:min(300px,94%);display:grid;gap:8px}
.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;transition:opacity .18s}
.bubble[data-loading]{opacity:.4}
.bar{display:flex;align-items:center;gap:10px}
.rg{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:600;cursor:pointer}
.rg svg{transition:transform .5s ease}
.rg[data-spin] svg{animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ver{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}

const bub = document.getElementById('bub'), rgn = document.getElementById('rgn'), ver = document.getElementById('ver');
const variants = [
  '첫 문단은 후킹, 둘째 문단은 핵심 근거 두 가지로 구성하면 좋아요.',
  '질문으로 시작해서 독자의 상황에 먼저 공감한 뒤 결론을 제시하는 구조를 추천해요.',
  '숫자로 시작하는 훅 한 줄, 그다음 사례 하나, 마지막에 요약 한 줄로 짧게 가는 것도 좋아요.',
];
let i = 0;
function regen() {
  rgn.setAttribute('data-spin', '');
  bub.setAttribute('data-loading', '');
  setTimeout(() => {
    i = (i + 1) % variants.length;
    bub.textContent = variants[i];
    ver.textContent = (i + 1) + ' / ' + variants.length;
    rgn.removeAttribute('data-spin');
    bub.removeAttribute('data-loading');
  }, 700);
}
setInterval(regen, 2600);