モバイル検索バー展開

<div class="d11-03-11-phone">
          <div class="d11-03-11-screen">
            <div class="d11-03-11-bar">
              <span class="d11-03-11-logo">MySite</span>
              <div class="d11-03-11-searchwrap">
                <input type="text" class="d11-03-11-input" id="d11-03-11-input" placeholder="検索...">
                <button class="d11-03-11-icon" id="d11-03-11-icon" aria-label="検索を開く">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#1e293b" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </button>
              </div>
            </div>
            <div class="d11-03-11-body">コンテンツ</div>
          </div>
        </div>

.d11-03-11-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-11-screen{position:absolute;inset:0;background:#f8fafc}
        .d11-03-11-bar{position:absolute;top:0;left:0;right:0;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#fff;border-bottom:1px solid #eef2f7;z-index:2;gap:8px}
        .d11-03-11-logo{font-size:12px;font-weight:700;color:#1e293b;flex:none}
        .d11-03-11-searchwrap{position:relative;display:flex;align-items:center;justify-content:flex-end}
        .d11-03-11-input{width:0;opacity:0;border:1px solid #e2e8f0;border-radius:14px;padding:5px 8px;font-size:11px;outline:none;transition:width .28s ease,opacity .2s,padding .28s}
        .d11-03-11-searchwrap.open .d11-03-11-input{width:100px;opacity:1;padding:5px 10px;margin-right:6px}
        .d11-03-11-icon{width:26px;height:26px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
        .d11-03-11-body{position:absolute;top:42px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px}

(function(){
        var root=document.getElementById('item-11-03-11');if(!root)return;
        var wrap=root.querySelector('.d11-03-11-searchwrap'),icon=root.querySelector('#d11-03-11-icon'),input=root.querySelector('#d11-03-11-input');
        icon.addEventListener('click',function(){
          var open=wrap.classList.toggle('open');
          if(open)input.focus();
        });
      })();