会員限定コンテンツのアンロックカウントダウン

<div class="d10-05-11-card">
          <div class="d10-05-11-thumb"></div>
          <div class="d10-05-11-lock">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
            <span class="d10-05-11-txt">あと <b class="d10-05-11-timer">03:00</b> で無料公開</span>
          </div>
        </div>

.d10-05-11-card{position:relative;width:220px;height:150px;border-radius:12px;overflow:hidden}
        .d10-05-11-thumb{
          width:100%;height:100%;
          background:linear-gradient(135deg,#7c3aed,#c026d3);
          filter:blur(2px) brightness(.75);
        }
        .d10-05-11-lock{
          position:absolute;inset:0;
          display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
          background:rgba(15,23,42,.4);
          color:#fff;font-size:12px;font-weight:700;text-align:center;padding:0 14px;
        }
        .d10-05-11-timer{font-variant-numeric:tabular-nums;font-size:14px}

(function(){
        var timerEl=document.querySelector('.d10-05-11-timer');
        if(!timerEl)return;
        var remaining=180;
        function render(){
          var m=Math.floor(remaining/60);
          var s=remaining%60;
          timerEl.textContent=(m<10?'0':'')+m+':'+(s<10?'0':'')+s;
        }
        render();
        setInterval(function(){
          remaining--;
          if(remaining<0)remaining=180;
          render();
        },1000);
      })();