文字数カウント付きコメント入力欄

<form class="d06-11-07-wrap">
          <textarea class="d06-11-07-input" maxlength="120" rows="3" placeholder="コメントを入力…(120文字まで)"></textarea>
          <div class="d06-11-07-footer">
            <span class="d06-11-07-count"><strong>0</strong> / 120</span>
            <button class="d06-11-07-send" type="submit" disabled>投稿する</button>
          </div>
        </form>

.d06-11-07-wrap{width:100%;max-width:240px;display:flex;flex-direction:column;gap:8px}
        .d06-11-07-input{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;font-size:12px;resize:none;font-family:inherit}
        .d06-11-07-footer{display:flex;align-items:center;justify-content:space-between}
        .d06-11-07-count{font-size:11px;color:#9ca3af}
        .d06-11-07-count strong{color:#6b7280;font-weight:700}
        .d06-11-07-count.d06-11-07-warn strong{color:#f59e0b}
        .d06-11-07-count.d06-11-07-max strong{color:#ef4444}
        .d06-11-07-send{border:none;background:#d1d5db;color:#fff;border-radius:999px;padding:6px 16px;font-size:12px;cursor:not-allowed;transition:background .2s}
        .d06-11-07-send.d06-11-07-ready{background:#6366f1;cursor:pointer}

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-11-07');
          var input = root.querySelector('.d06-11-07-input');
          var count = root.querySelector('.d06-11-07-count');
          var countNum = count.querySelector('strong');
          var send = root.querySelector('.d06-11-07-send');
          var max = 120;
          input.addEventListener('input', function(){
            var len = input.value.length;
            countNum.textContent = len;
            count.classList.remove('d06-11-07-warn', 'd06-11-07-max');
            if(len >= max){ count.classList.add('d06-11-07-max'); }
            else if(len >= max * 0.8){ count.classList.add('d06-11-07-warn'); }
            var ready = len > 0;
            send.disabled = !ready;
            send.classList.toggle('d06-11-07-ready', ready);
          });
          root.addEventListener('submit', function(e){
            e.preventDefault();
            if(!input.value.trim()){ return; }
            input.value = '';
            countNum.textContent = '0';
            count.classList.remove('d06-11-07-warn', 'd06-11-07-max');
            send.disabled = true;
            send.classList.remove('d06-11-07-ready');
          });
        })();