背景暗転リビールドロワー

<div class="d03-09-08-stage">
          <nav class="d03-09-08-drawer">
            <a href="#" onclick="return false" class="active">フィード</a>
            <a href="#" onclick="return false">通知</a>
            <a href="#" onclick="return false">メッセージ</a>
            <a href="#" onclick="return false">プロフィール</a>
            <a href="#" onclick="return false">設定</a>
          </nav>
          <div class="d03-09-08-content">
            <header class="d03-09-08-bar">
              <button class="d03-09-08-btn" type="button" aria-label="メニュー"><span></span><span></span><span></span></button>
              <span class="d03-09-08-logo">FEED</span>
            </header>
            <div class="d03-09-08-body">
              <div class="d03-09-08-card"></div>
              <div class="d03-09-08-card"></div>
            </div>
            <div class="d03-09-08-shade"></div>
          </div>
        </div>

.prev.d03-09-08{padding:0;display:block}
        .d03-09-08-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#111827}
        .d03-09-08-drawer{position:absolute;inset:0;padding:70px 20px 20px;display:flex;flex-direction:column;gap:2px}
        .d03-09-08-drawer a{color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:600;padding:10px 6px}
        .d03-09-08-drawer a.active{color:#fff}
        .d03-09-08-drawer a:hover{color:#fff}
        .d03-09-08-content{position:absolute;inset:0;background:#fff;transform:translateX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:2;overflow:hidden}
        .d03-09-08-stage.open .d03-09-08-content{transform:translateX(66%) scale(.88)}
        .d03-09-08-bar{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;background:#fff;position:relative}
        .d03-09-08-btn{width:34px;height:34px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
        .d03-09-08-btn span{display:block;width:18px;height:2px;background:#111827;border-radius:2px}
        .d03-09-08-logo{font-weight:800;font-size:13px;letter-spacing:.1em;color:#111827}
        .d03-09-08-body{padding:14px}
        .d03-09-08-card{height:70px;border-radius:10px;margin-bottom:10px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}
        .d03-09-08-shade{position:absolute;inset:0;background:rgba(15,23,42,.5);opacity:0;transition:opacity .35s ease;z-index:3;pointer-events:none}
        .d03-09-08-stage.open .d03-09-08-shade{opacity:1;pointer-events:auto}

(function(){
        var stage=document.querySelector('.d03-09-08-stage');
        if(!stage)return;
        stage.querySelector('.d03-09-08-btn').addEventListener('click',function(){
          stage.classList.toggle('open');
        });
        stage.querySelector('.d03-09-08-shade').addEventListener('click',function(){
          stage.classList.remove('open');
        });
      })();