フォーム全体のカード型レイアウト枠

<div class="d04-10-10-card">
          <div class="d04-10-10-header">
            <span class="d04-10-10-step">STEP 2 OF 4</span>
            <h4 class="d04-10-10-title">お届け先情報</h4>
          </div>
          <div class="d04-10-10-body">
            <div class="d04-10-10-placeholder"></div>
            <div class="d04-10-10-placeholder d04-10-10-short"></div>
          </div>
          <div class="d04-10-10-footer">
            <span class="d04-10-10-btn d04-10-10-btn-back">戻る</span>
            <span class="d04-10-10-btn d04-10-10-btn-next">次へ進む</span>
          </div>
        </div>

.d04-10-10-card{width:100%;max-width:290px;border-radius:12px;border:1px solid #eef0f3;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden;font-family:sans-serif}
        .d04-10-10-header{padding:14px 16px;background:#f8f8fc;border-bottom:1px solid #eef0f3}
        .d04-10-10-step{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;color:#6366f1;margin-bottom:4px}
        .d04-10-10-title{margin:0;font-size:14px;font-weight:700;color:#1f2937}
        .d04-10-10-body{padding:16px;display:flex;flex-direction:column;gap:8px}
        .d04-10-10-placeholder{height:14px;border-radius:5px;background:#eef0f3}
        .d04-10-10-short{width:60%}
        .d04-10-10-footer{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid #eef0f3}
        .d04-10-10-btn{flex:1;text-align:center;font-size:11.5px;font-weight:700;padding:8px 10px;border-radius:8px}
        .d04-10-10-btn-back{color:#6b7280;background:#f1f5f9}
        .d04-10-10-btn-next{color:#fff;background:#6366f1}