言語切替セレクタ付きフッター

<footer class="d01-03-11-ft">
          <div class="d01-03-11-top">
            <div class="d01-03-11-logo">Global Studio</div>
            <nav class="d01-03-11-nav"><a href="#">Home</a><a href="#">Works</a><a href="#">Contact</a></nav>
            <div class="d01-03-11-lang">
              <button type="button" class="d01-03-11-cur" aria-haspopup="true" aria-expanded="false">🌐 日本語<i>▾</i></button>
              <ul class="d01-03-11-menu">
                <li data-l="日本語">日本語</li>
                <li data-l="English">English</li>
                <li data-l="中文">中文</li>
              </ul>
            </div>
          </div>
          <div class="d01-03-11-copy">&copy; 2026 Global Studio</div>
        </footer>

.d01-03-11-ft{background:#111827;color:#cbd5e1;padding:18px 20px;font-size:11px;box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center}
        .d01-03-11-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
        .d01-03-11-logo{color:#fff;font-weight:700;font-size:13px}
        .d01-03-11-nav{display:flex;gap:12px}
        .d01-03-11-nav a{color:#cbd5e1;text-decoration:none;transition:color .2s}
        .d01-03-11-nav a:hover{color:#fff}
        .d01-03-11-lang{position:relative}
        .d01-03-11-cur{background:#1f2937;border:1px solid #374151;color:#e5e7eb;border-radius:8px;padding:6px 10px;font-size:10.5px;cursor:pointer;display:flex;align-items:center;gap:6px}
        .d01-03-11-cur i{font-style:normal;font-size:9px}
        .d01-03-11-menu{position:absolute;right:0;bottom:calc(100% + 6px);background:#1f2937;border:1px solid #374151;border-radius:8px;list-style:none;margin:0;padding:4px;min-width:100px;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .2s}
        .d01-03-11-lang.is-open .d01-03-11-menu{opacity:1;transform:translateY(0);pointer-events:auto}
        .d01-03-11-menu li{padding:6px 10px;border-radius:6px;font-size:10.5px;cursor:pointer;color:#cbd5e1}
        .d01-03-11-menu li:hover{background:#374151;color:#fff}
        .d01-03-11-copy{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:#64748b;font-size:10px}

(function(){
        var root=document.querySelector('#item-01-03-11 .d01-03-11-lang');if(!root)return;
        var cur=root.querySelector('.d01-03-11-cur');
        cur.addEventListener('click',function(){
          var open=root.classList.toggle('is-open');
          cur.setAttribute('aria-expanded',String(open));
        });
        root.querySelectorAll('.d01-03-11-menu li').forEach(function(li){
          li.addEventListener('click',function(){
            cur.innerHTML='🌐 '+li.dataset.l+'<i>▾</i>';
            root.classList.remove('is-open');
          });
        });
      })();