@charset "utf-8";

.travel-params { background-color: #F4F4F4; padding: 40px 15px; }
.desktop .travel-params { padding: 40px; }
.travel-params .input_area { display: flex; align-items: center; justify-content: space-between; flex-direction: column; gap: 12px; }
.desktop .travel-params .input_area { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.travel-params .title_area { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.travel-params .title_area .title { font-size: 20px; line-height: 29px; font-weight: bold; letter-spacing: -0.4px; color: #333333; }
.travel-params .title_area .buttons { font-size: 14px;}
.travel-params .input-icon-wrap { width: 100%; position: relative; cursor: pointer; }
.desktop .travel-params .input-icon-wrap { width: 300px; flex-basis: 300px; flex-shrink: 0; }
.travel-params .input-icon-wrap img {  position: absolute; height: 19px; top: 50%; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; }
.travel-params .input-icon-wrap .input-icon { padding-left: 37px; background: #fff; width: 100%; cursor: pointer; line-height: 40px; height: 40px; border: 1px solid #E5E5E5; letter-spacing: -0.28px; }
.desktop .input-icon-wrap .input-icon { line-height: 48px; height: 48px; padding-left: 41px; }
.btn-travel-search { background-color: #126CD5; color: #fff; height: 46px; line-height: 46px; width: 100%; border: none; letter-spacing: -0.32px; font-size: 16px; font-weight: bold; }
.desktop .btn-travel-search { flex-grow: 1; height: 46px; line-height: 46px; }



.layer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: none; z-index: 1020; }
.layer-backdrop.show { display: block; }
.desktop .layer-backdrop { background: transparent; }
.layer-wrap { 
    position: fixed; 
    bottom: -100%; 
    left: 0; 
    right: 0; 
    background: white; 
    border-radius: 12px 12px 0 0; 
    z-index: 1031; 
    transition: bottom 0.3s ease; 
    touch-action: none; 
    --tw-shadow: 0px 2px 8px rgba(0, 0, 0, 0.24);
    --tw-shadow-colored: 0px 2px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    min-height: 95vh;
    cursor: initial;
}
.desktop .layer-wrap::after { 
    content: "";
    display: block;
    clear: both;
}

.layer-wrap.active { bottom: 0; }
.layer-wrap .drag-handle { width: 100%; padding: 15px 0; }
.layer-wrap .drag-handle::after { content: ''; width: 40px; height: 5px; background: #ccc; border-radius: 3px; display: block; margin: 0 auto; }
.layer-wrap .layer-body { padding: 12px 12px 20px; }
.mobile .layer-wrap .layer-body { height: 77vh; overflow-y: auto; }
.desktop .layer-wrap .drag-handle {display: none;}

.desktop .layer-wrap { transition: none; overflow-y: auto; border-radius: 12px; }
.desktop #layer-area { width: 400px; min-height: 50vh; }
.desktop #layer-date { width: 600px; min-height: 40vh; }
.desktop #layer-person { width: 440px; min-height: 30vh; }

.mobile #layer-area { min-height: 90vh; max-height: 90vh; }
.mobile #layer-date { min-height: 40vh; }
.mobile #layer-person { min-height: 30vh; }

.desktop #layer-area.active { top: 58px; left: 0; position: absolute; }
.desktop #layer-date.active { top: 58px; left: 0; position: absolute; }
.desktop #layer-person.active { top: 58px; left: -60px; position: absolute; }

.desktop .input-icon-wrap + input[name*="travel_area"] { width: 400px;}
.tt-menu {display: none !important;}

.children_ages_wrap {
    display: none;
    margin-bottom: 12px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
}

.children_ages_wrap .child_age_select {
    width: 100%;
    height: 36px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
    background: #fff;
}

.children_ages_wrap .child_age_select.is-invalid {
    border-color: #dc3545;
}

.person_ea_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.person_ea_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.person_ea_box input {
    position: relative;
    top: 0;
    -webkit-flex: 1;
    flex: 1;
    width: 100%;
    border: 0;
    background: transparent !important;
    font-size: 22px;
    font-weight: bold;
    color: #222;
    text-align: right;
    caret-color: var(--bs-warning);
    appearance: none;
}

.person_ea_box .ea_button {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #126CD5;
    border-radius: 100%;
    color: #126CD5;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.ea_button::before,
.ea_button::after {
  content: '';
  position: absolute;
  background-color: #126CD5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* 공통 - 가로선 */
.ea_button::before {
  width: 16px;
  height: 2px;
}

/* plus 버튼에만 세로선 추가 */
.ea_button.plus::after {
  width: 2px;
  height: 16px;
}

.person_notice {
    background-color: #F9F9F9;
    padding: 20px 15px;
    font-size: 14px;
}

.reference-mark {
    position: relative;
    padding-left: 20px;
}
.reference-mark::before {
    content: '※';
    position: absolute;
    left: 0;
  }



.twitter-typeahead {
    display: block !important;
}


.typeahead_item {
    font-size: 15px;
    color:#333333;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
}


.typeahead_item:hover {
    background-color: #E5E5E5;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}

.typeahead_item mark {
    padding: 0 !important;
    background: transparent;
    color: #126CD5;
}

.typeahead_del {
    cursor: pointer;
}

.typeahead_del:hover i {
    color: red;
}