빈 대화 시작 화면

<div class="es">
  <div class="mark"></div>
  <h3>무엇을 도와드릴까요?</h3>
  <div class="grid">
    <button class="card" data-i="0"><span>이 계약서에서<br>위험 조항 찾기</span></button>
    <button class="card" data-i="1"><span>발표 대본<br>더 간결하게 다듬기</span></button>
    <button class="card" data-i="2"><span>버그 원인<br>같이 찾아보기</span></button>
  </div>
</div>

.es{width:100%;height:100%;display:grid;place-items:center;gap:12px;padding:16px;text-align:center}
.mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
h3{margin:0;font-size:14px;color:var(--fg)}
.grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:300px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:10px 12px;font-size:10.5px;line-height:1.4;color:var(--muted);cursor:pointer;transition:transform .15s,border-color .15s,color .15s;width:130px}
.card[data-active]{transform:scale(.95);border-color:var(--accent);color:var(--accent)}

const cards = [...document.querySelectorAll('.card')];
let i = 0;
setInterval(() => {
  cards.forEach((c) => c.removeAttribute('data-active'));
  cards[i % cards.length].setAttribute('data-active', '');
  setTimeout(() => cards[i % cards.length].removeAttribute('data-active'), 500);
  i++;
}, 1600);