@charset "utf-8";

/* === 불필요한 모바일 접기/펼치기 탭 영구 숨김 === */
.qr_toggle {
    display: none !important;
}

/* ===================================================
   QUICK RESERVE (기존 코드는 이 아래로 그대로 유지)
=================================================== */


.quick_reserve{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background:#FFD33D;
    box-shadow:0 -4px 20px rgba(0,0,0,.12);
    z-index:9999;
}

.quick_reserve *{
    box-sizing:border-box;
}

.quick_reserve input,
.quick_reserve button,
.quick_reserve textarea{
    font-family:inherit;
}

.qr_container{
    max-width:1400px;
    margin:0 auto;
    padding:18px 40px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:30px;
    align-items:center;
}

/* ---------------- Left ---------------- */

.qr_left{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.qr_title{
    display:block;
    font-size:34px;
    font-weight:700;
    color:#222;
    line-height:1;
    margin-bottom:10px;
}

.qr_desc{
    font-size:15px;
    color:#333;
    line-height:1.5;
    margin:0;
}

.quick_reserve p{
    background:transparent !important;
}

/* ---------------- Right ---------------- */

.qr_right{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.qr_top{
    display:grid;
    grid-template-columns:260px 1fr 170px;
    gap:12px;
    align-items:center;
}

.qr_name input,
.qr_phone input{

    width:100%;
    height:58px;

    border:0;
    border-radius:8px;

    background:#fff;

    padding:0 18px;

    font-size:17px;

    outline:none;

}

.qr_phone{
    display:flex;
    align-items:center;
    gap:8px;
}

.qr_phone input{
    width:90px;
    text-align:center;
}

.qr_phone span{
    font-size:20px;
    font-weight:700;
    color:#444;
}

.qr_btn{

    width:170px;
    height:58px;

    border:0;
    border-radius:8px;

    background:#005BAC;

    color:#fff;

    font-size:18px;
    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.qr_btn:hover{

    background:#00488a;

}

/* ---------------- Bottom ---------------- */

.qr_bottom{
    display:flex;
    align-items:center;
    gap:14px;
}

.qr_agree{
    display:flex;
    align-items:center;
    cursor:pointer;
    font-size:14px;
    color:#333;
}

.qr_agree input{
    margin-right:8px;
}

.qr_more{

    background:none;
    border:0;

    color:#005BAC;

    cursor:pointer;

    font-size:14px;

    text-decoration:underline;

}

/* ===================================================
   TABLET
=================================================== */

@media screen and (max-width:1024px){

    .qr_container{
        grid-template-columns:1fr;
        gap:14px;
        padding:16px 20px;
    }

    /* 좌측 텍스트를 가로로 정렬하여 공간 절약 */
    .qr_left{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        text-align:left;
    }

    .qr_title{
        font-size:22px;
        margin: 0;
    }

    .qr_desc{
        font-size:14px;
        margin: 0;
    }

    .qr_desc br {
        display: none;
    }

    /* 입력칸과 버튼이 아래로 떨어지지 않게 가로 분할 */
    .qr_top{
        display: grid;
        grid-template-columns: 1fr 2fr 130px; 
        gap:10px;
    }

    .qr_name{
        width:100%;
    }

    .qr_phone{
        justify-content:space-between;
    }

    .qr_phone input{
        flex:1;
        width:auto;
    }

    .qr_btn{
        width:100%;
        height: 100%;
    }

    .qr_bottom{
        justify-content:flex-start;
        flex-wrap:wrap;
    }

}

/* ===================================================
   MOBILE
=================================================== */

@media screen and (max-width:768px){

    .quick_reserve{
        padding-bottom:env(safe-area-inset-bottom);
    }

    .qr_container{
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* 상단 타이틀 영역 가로 배치 및 노출 */
    .qr_left{
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .qr_title{
        font-size: 16px;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .qr_desc{
        display: block;
        font-size: 13px;
        margin: 0;
    }

    .qr_desc br{
        display: none; /* 한 줄로 나오도록 줄바꿈 제거 */
    }

    /* 폼 영역 Grid 재배치 (입력 4칸 + 버튼 1칸) */
    .qr_right{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 65px; 
        grid-template-rows: auto auto;
        gap: 8px 6px;
    }

    /* Wrapper 해제하여 내부 자식을 Grid 아이템으로 꺼냄 */
    .qr_top, .qr_bottom {
        display: contents;
    }

    /* 1. 이름 */
    .qr_name{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: 100%;
    }
    
    .qr_name input{
        height: 42px;
        font-size: 13px;
        padding: 0 5px;
        text-align: center;
    }

    /* 2. 연락처 (하이픈 숨기고 3칸 분할) */
    .qr_phone{
        grid-column: 2 / 5;
        grid-row: 1 / 2;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
        align-items: center;
    }
    
    .qr_phone span{
        display: none;
    }
    
    .qr_phone input{
        width: 100%;
        height: 42px;
        font-size: 13px;
        padding: 0;
        text-align: center;
    }

    /* 3. 빠른 예약 버튼 (오른쪽 2줄 차지) */
    .qr_btn{
        grid-column: 5 / 6;
        grid-row: 1 / 3;
        width: 100%;
        height: 100%;
        font-size: 14px;
        padding: 0;
        line-height: 1.2;
        word-break: keep-all; /* '빠른' '예약'으로 자연스럽게 줄바꿈 */
    }

    /* 4. 하단 개인정보 동의 */
    .qr_agree{
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        font-size: 12px;
        display: flex;
        align-items: center;
        margin: 0;
    }
    
    .qr_agree input {
        margin-right: 4px;
    }

    /* 5. 자세히 보기 */
    .qr_more{
        grid-column: 4 / 5;
        grid-row: 2 / 3;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

/* ===================================================
   모바일 접기 / 펼치기 (완전 숨김)
=================================================== */

.qr_toggle{
    display: none !important;
}

@media screen and (max-width:768px){
    /* 폼 영역이 항상 열려있도록 강제 노출 */
    .quick_reserve.fold .req_form{
        display: block !important;
    }

    /* 기존 왼쪽 제목 숨김 해제 */
    .qr_left{
        display: flex;
    }
}
}

@media screen and (max-width:480px){
    .qr_container{
        padding: 12px;
    }
    .qr_title{ font-size: 15px; }
    .qr_desc{ font-size: 12px; }
    .qr_name input, .qr_phone input { font-size: 12px; height: 38px; }
    .qr_btn { font-size: 13px; }
    .qr_agree, .qr_more { font-size: 11px; }
}

/* ===================================================
   개인정보 팝업 (복구)
=================================================== */

.privacy_modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:99999;
}

.privacy_box{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:90%;
    max-width:720px;
    background:#fff;
    border-radius:8px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.privacy_close{
    position:absolute;
    top:20px;
    right:25px;
    border:0;
    background:none;
    color:#333;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
}

.privacy_box h2{
    margin:0 0 25px;
    font-size:38px;
    font-weight:700;
    color:#222;
    line-height:1.2;
}

.privacy_text{
    font-size:20px;
    color:#444;
    line-height:1.8;
    word-break:keep-all;
}

@media screen and (max-width:768px){
    .privacy_box{
        width:92%;
        padding:25px;
    }
    .privacy_close{
        top:15px;
        right:20px;
        font-size:16px;
    }
    .privacy_box h2{
        font-size:28px;
        margin-bottom:20px;
    }
    .privacy_text{
        font-size:16px;
        line-height:1.7;
    }
}