ミッションカード完了演出

<div class="d09-06-10-card">
          <label class="d09-06-10-check">
            <input type="checkbox">
            <span class="d09-06-10-box">
              <svg viewBox="0 0 24 24" width="14" height="14"><path class="d09-06-10-path" d="M4 12l5 5L20 6" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </label>
          <div class="d09-06-10-body">
            <h4>デイリーミッション</h4>
            <p>記事を1本読む</p>
          </div>
        </div>

.d09-06-10-card{position:relative;display:flex;align-items:center;gap:14px;width:100%;max-width:280px;
          padding:16px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;
          transition:background .4s ease,border-color .4s ease}
        .d09-06-10-card.is-done{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-color:#10b981}
        .d09-06-10-check{position:relative;flex-shrink:0;width:26px;height:26px}
        .d09-06-10-check input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
        .d09-06-10-box{position:absolute;inset:0;border-radius:8px;border:2px solid #cbd5e1;background:#fff;
          display:flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease}
        .d09-06-10-path{stroke-dasharray:28;stroke-dashoffset:28;transition:stroke-dashoffset .35s ease .05s}
        .d09-06-10-check input:checked ~ .d09-06-10-box{background:#10b981;border-color:#10b981}
        .d09-06-10-check input:checked ~ .d09-06-10-box .d09-06-10-path{stroke-dashoffset:0}
        .d09-06-10-body h4{margin:0 0 4px;font-size:13px;color:#1e293b}
        .d09-06-10-body p{margin:0;font-size:12px;color:#64748b;transition:color .3s ease}
        .d09-06-10-card.is-done .d09-06-10-body p{color:#059669;text-decoration:line-through}

(function(){
        var root=document.getElementById('item-09-06-10');
        if(!root)return;
        var input=root.querySelector('input[type=checkbox]');
        var card=root.querySelector('.d09-06-10-card');
        input.addEventListener('change',function(){
          card.classList.toggle('is-done',input.checked);
        });
      })();