<li style="display: flex; align-items: center; margin-bottom: 10px; width: 700px;">
    <label for="reg_mb_start_date" style="width: 200px; margin-bottom: 0px; text-align: left; padding-left: 10px;">등록유효기간</label>
    <div style="display: flex; align-items: center; width: 100%; margin-left: 20px;">
        <!-- 시작 날짜 입력 -->
        <input type="date" name="mb_start_date" id="reg_mb_start_date" class="frm_input" required style="flex: 1;">
        <!-- 중간에 '~' 기호 -->
        <span style="margin: 0 10px;">~</span>ㅁ
        <!-- 종료 날짜 입력 -->
        <input type="date" name="mb_end_date" id="reg_mb_end_date" class="frm_input" required style="flex: 1;" onblur="generateMb1()">
    </div>
</li>
<script>
    // 필드 간 자동 이동 및 mb_3에 값 저장을 위한 스크립트
    document.addEventListener("DOMContentLoaded", function() {
        // 필드 요소 참조
        const tel1 = document.getElementById('reg_mb_tel_1');
        const tel2 = document.getElementById('reg_mb_tel_2');
        const tel3 = document.getElementById('reg_mb_tel_3');
 
        // 세 번째 필드에서 mb_3에 값 저장
        tel3.addEventListener('input', function() {
            if (this.value.length === this.maxLength) {
                const tel1Value = tel1.value;
                const tel2Value = tel2.value;
                const tel3Value = this.value;
                const mb3 = tel1Value + '-' + tel2Value + '-' + tel3Value;
                document.getElementById("mb_3").value = mb3;
            }
        });
    });
</script>