.bottom-float-form{
    position: fixed;
    left: 0; right: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
    margin: 0 auto;
    width: 100%;
    height: 84px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;


    /* 모양 */
    background: var(--sub-color); color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    padding: 12px 16px;

    /* 트랜지션 (숨김 애니메이션용) */
    /*transform: translateY(0);*/
    /*transition: transform .25s ease, opacity .2s ease;*/
}

.bottom-float-form .f-form{
    display: flex;
    align-items: center;
    gap: 12px;
}

.bottom-float-form .f-form label {
    font-size: 18px;
    margin-right: 4px;
    white-space: nowrap;
    color: var(--txt-color);
}

.bottom-float-form .f-form input[type="text"] {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    flex: 0 0 140px;          /* input 가로폭 고정 */
}

.bottom-float-form .f-form input[type="checkbox"] {
    margin-right: 4px;
}

.bottom-float-form .f-form button {
    background: var(--main-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 18px;
    cursor: pointer;
    white-space: nowrap;
}

.bottom-float-form .f-form button:hover {
    background: #444;
}


/* 스크롤 내릴 때 숨김 */
.bottom-float-form.is-hidden{
    /*transform: translateY(140%);*/
    /*opacity: .95;*/
    /*pointer-events: none;*/
}

@supports (padding: max(0px)) {
    .bottom-float-form{
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

:root{ --bottom-float-h: 0px; }
body{ padding-bottom: calc(var(--bottom-float-h) + 16px); }

.banner-slider .swiper-pagination,
.menu-slider   .swiper-pagination{
    bottom: calc(var(--bottom-float-h) + 12px) !important;
}

.banner-slider .swiper-button-next,
.banner-slider .swiper-button-prev,
.menu-slider   .swiper-button-next,
.menu-slider   .swiper-button-prev{
    bottom: calc(var(--bottom-float-h) + 48px);
}

/* 모바일 레이아웃: 768px 이하에서 2줄 구성 */
@media (max-width: 768px){
    .bottom-float-form .f-form input[type="text"] {
        flex: 0 0 110px;          /* input 가로폭 고정 */
    }

    .bottom-float-form{
        height: auto;                 /* 고정높이 해제 */
        padding: 10px 12px;
    }

    .bottom-float-form .f-form{
        flex-wrap: wrap;              /* 여러 줄 허용 */
        row-gap: 8px;
        column-gap: 8px;
        width: 100%;
    }

    .bottom-float-form .f-form > div:nth-child(-n+3) label {
        display: none;
    }


    /* 공통: 각 필드 래퍼 정렬 */
    .bottom-float-form .f-form > div{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* 1~3번째(성함/연락처/지역) = 1줄 3칸 */
    .bottom-float-form .f-form > div:nth-child(-n+3){
        flex: 0 0 100px;
    }
    .bottom-float-form .f-form > div:nth-child(-n+3) input[type="text"]{
        width: 100%;
        font-size: 15px;
        padding: 6px 8px;
    }
    .bottom-float-form .f-form > div:nth-child(-n+3) label{
        font-size: 14px;
        color: var(--txt-color);
        white-space: nowrap;
    }

    /* 4번째(개인정보 동의) = 2줄의 왼쪽 넓게 */
    .bottom-float-form .f-form > div:nth-child(4){
        order: 4;
        flex: 1 1 calc(100% - 132px); /* 버튼 폭을 제외한 영역 */
    }
    .bottom-float-form .f-form > div:nth-child(4) label{
        font-size: 14px;
        line-height: 1.3;
    }

    /* 버튼 = 2줄의 오른쪽 고정폭 */
    .bottom-float-form .f-form button{
        order: 5;
        flex: 0 0 124px;              /* 버튼 고정폭 */
        padding: 10px 12px;
        font-size: 16px;
        align-self: stretch;          /* 체크박스 높이와 맞춤(선택) */
    }
}

/* 아주 작은 화면(<=480px)에서 여백 조정(기존 블록 유지 + 보완) */
@media (max-width: 480px){
    .bottom-float-form .f-form input[type="text"]{
        flex: 0 0 100px; /* 필요 시 80~110px 사이로 조정 */
    }
    .bottom-float-form{
        padding: 10px 10px;
    }
}