ステータスバー付きスマホ画面

<div class="d11-06-01-frame">
          <div class="d11-06-01-status">
            <span class="d11-06-01-time">9:41</span>
            <span class="d11-06-01-icons">
              <i class="d11-06-01-signal"></i>
              <i class="d11-06-01-wifi"></i>
              <i class="d11-06-01-batt"><b></b></i>
            </span>
          </div>
          <div class="d11-06-01-body">
            <div class="d11-06-01-line"></div>
            <div class="d11-06-01-line short"></div>
          </div>
        </div>

.d11-06-01-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
        .d11-06-01-status{ display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:#f8f9fb; border-bottom:1px solid #eceef1; }
        .d11-06-01-time{ font-size:11px; font-weight:700; color:#1f2328; }
        .d11-06-01-icons{ display:flex; align-items:center; gap:5px; }
        .d11-06-01-signal{ width:12px; height:8px; background:linear-gradient(90deg,#1f2328 0 25%,#1f2328 25% 50%,#c7cbd1 50% 100%); border-radius:1px; }
        .d11-06-01-wifi{ width:10px; height:8px; border:1.5px solid #1f2328; border-bottom:none; border-radius:8px 8px 0 0; }
        .d11-06-01-batt{ position:relative; width:18px; height:9px; border:1.3px solid #1f2328; border-radius:2px; display:block; }
        .d11-06-01-batt b{ position:absolute; top:1px; left:1px; bottom:1px; width:70%; background:#1f2328; border-radius:1px; }
        .d11-06-01-body{ flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:8px; }
        .d11-06-01-line{ height:9px; border-radius:4px; background:#e6e9ee; width:100%; }
        .d11-06-01-line.short{ width:60%; }