응답 피드백

<div class="wrap">
  <div class="bubble">에펠탑은 1889년 만국박람회를 위해 세워졌어요.</div>
  <div class="fb">
    <button class="ic" id="up" aria-label="좋아요"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 22V11m0 11h11.5a2 2 0 0 0 2-1.7l1.2-7A2 2 0 0 0 19.7 10H14l1-5.5a1.7 1.7 0 0 0-3-1.3L7 11"/></svg></button>
    <button class="ic" id="down" aria-label="싫어요"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 2v11m0-11H5.5a2 2 0 0 0-2 1.7l-1.2 7A2 2 0 0 0 4.3 14H10l-1 5.5a1.7 1.7 0 0 0 3 1.3L17 13"/></svg></button>
    <span class="thanks" id="thx">감사합니다 — 반영할게요</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}
.fb{display:flex;align-items:center;gap:6px}
.ic{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ic[data-on]{background:var(--accent);color:#fff;border-color:var(--accent)}
.thanks{font-size:10.5px;color:var(--accent-3);opacity:0;transition:opacity .2s}
.thanks[data-show]{opacity:1}

const up = document.getElementById('up'), down = document.getElementById('down'), thx = document.getElementById('thx');
function set(which) {
  up.removeAttribute('data-on'); down.removeAttribute('data-on');
  which.setAttribute('data-on', '');
  thx.setAttribute('data-show', '');
  setTimeout(() => thx.removeAttribute('data-show'), 1400);
}
set(up);
setInterval(() => set(up), 3000);