생각 중 인디케이터

<div class="wrap">
  <div class="think" id="th">
    <button class="head" id="hd"><i class="chev">▸</i><span id="label">생각 중</span><span class="shine" id="shine"></span></button>
    <div class="body" id="body"><p id="ptxt">검색 결과를 비교하는 중…</p></div>
  </div>
</div>

.wrap{width:min(300px,92%)}
.think{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.head{width:100%;display:flex;align-items:center;gap:7px;padding:9px 12px;border:0;background:none;cursor:pointer;color:var(--muted);font-size:12px;font-weight:600;text-align:left}
.chev{font-style:normal;font-size:10px;transition:transform .2s}
.think[data-open] .chev{transform:rotate(90deg)}
.shine{margin-left:auto;width:0;height:0}
.body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.think[data-open] .body{grid-template-rows:1fr}
.body p{overflow:hidden;min-height:0;margin:0;padding:0 12px;font-size:11px;color:var(--muted);line-height:1.6}
.think[data-open] .body p{padding-bottom:10px}
#label.shimmer{background:linear-gradient(90deg,var(--muted) 0%,var(--fg) 50%,var(--muted) 100%);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.6s linear infinite}
@keyframes shim{to{background-position:-200% 0}}

const th = document.getElementById('th'), label = document.getElementById('label'), ptxt = document.getElementById('ptxt');
const steps = ['후보 답변을 비교하는 중…', '근거를 다시 확인하는 중…', '결론을 정리하는 중…'];
th.setAttribute('data-open', '');
label.classList.add('shimmer');
let i = 0;
const iv = setInterval(() => { ptxt.textContent = steps[i % steps.length]; i++; }, 700);
setTimeout(() => {
  clearInterval(iv);
  label.classList.remove('shimmer');
  label.textContent = '4초간 생각함';
  th.removeAttribute('data-open');
  setTimeout(restart, 2200);
}, 2600);
function restart() {
  label.textContent = '생각 중';
  label.classList.add('shimmer');
  th.setAttribute('data-open', '');
  let j = 0;
  const iv2 = setInterval(() => { ptxt.textContent = steps[j % steps.length]; j++; }, 700);
  setTimeout(() => {
    clearInterval(iv2);
    label.classList.remove('shimmer');
    label.textContent = '4초간 생각함';
    th.removeAttribute('data-open');
    setTimeout(restart, 2200);
  }, 2600);
}