SNS投稿風レビューカード

<div class="d06-01-11-card">
          <div class="d06-01-11-head">
            <span class="d06-01-11-av" style="--g1:#38bdf8;--g2:#6366f1">N</span>
            <div><b>N.Okada</b><small>@n_okada_design</small></div>
          </div>
          <p class="d06-01-11-text">対応がとにかく丁寧。相談してから公開までの流れがスムーズで安心して任せられました。</p>
          <button type="button" class="d06-01-11-like">
            <svg viewBox="0 0 24 24" width="16" height="16"><path class="d06-01-11-h" d="M12 21s-7.5-4.8-10-9.2C.6 9 1.6 5.5 4.8 4.8 7 4.3 8.9 5.5 12 8.4c3.1-2.9 5-4.1 7.2-3.6C22.4 5.5 23.4 9 22 11.8 19.5 16.2 12 21 12 21z"/></svg>
            <span class="d06-01-11-cnt">128</span>
          </button>
        </div>

.prev.d06-01-11{background:#f8fafc}
        .d06-01-11-card{width:290px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px 20px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d06-01-11-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
        .d06-01-11-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
        .d06-01-11-head b{display:block;font-size:13px;color:#0f172a}
        .d06-01-11-head small{color:#94a3b8;font-size:11px}
        .d06-01-11-text{margin:0 0 12px;font-size:12.5px;line-height:1.7;color:#334155}
        .d06-01-11-like{display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;color:#94a3b8;font-size:12px;font-weight:700;padding:0}
        .d06-01-11-h{fill:#e2e8f0;transition:fill .2s}
        .d06-01-11-like.is-on .d06-01-11-h{fill:#f43f5e}
        .d06-01-11-like.is-on svg{animation:d1529pop .5s cubic-bezier(.2,1.4,.4,1)}
        @keyframes d1529pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
        .d06-01-11-like.is-on .d06-01-11-cnt{color:#f43f5e}

(function(){
        var root=document.querySelector('#item-06-01-11 .d06-01-11-card');if(!root)return;
        var btn=root.querySelector('.d06-01-11-like'),cnt=root.querySelector('.d06-01-11-cnt');
        var base=128;
        btn.addEventListener('click',function(){
          var on=btn.classList.toggle('is-on');
          cnt.textContent=on?base+1:base;
        });
      })();