プルダウン通知バナー付きスマホ画面(静止)

<div class="d11-06-06-frame">
          <div class="d11-06-06-status"><span>9:41</span></div>
          <div class="d11-06-06-banner">
            <span class="d11-06-06-app"></span>
            <div class="d11-06-06-txt"><p class="d11-06-06-t">メッセージ</p><p class="d11-06-06-s">新しいコメントが届きました</p></div>
          </div>
          <div class="d11-06-06-body">
            <div class="d11-06-06-line"></div>
            <div class="d11-06-06-line short"></div>
          </div>
        </div>

.d11-06-06-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; display:flex; flex-direction:column; position:relative; }
        .d11-06-06-status{ padding:8px 14px; font-size:11px; font-weight:700; color:#1f2328; background:#f8f9fb; }
        .d11-06-06-banner{ position:absolute; top:34px; left:8px; right:8px; display:flex; align-items:center; gap:8px; background:#fff; border-radius:12px; padding:8px 10px; box-shadow:0 4px 10px rgba(15,23,42,.15); border:1px solid #eceef1; }
        .d11-06-06-app{ width:22px; height:22px; border-radius:6px; background:#5b8def; flex:0 0 auto; }
        .d11-06-06-t{ margin:0; font-size:10px; font-weight:700; color:#1f2328; }
        .d11-06-06-s{ margin:1px 0 0; font-size:9px; color:#8792a2; }
        .d11-06-06-body{ flex:1; padding:56px 14px 14px; display:flex; flex-direction:column; gap:8px; }
        .d11-06-06-line{ height:9px; border-radius:4px; background:#e6e9ee; width:100%; }
        .d11-06-06-line.short{ width:55%; }