/*
 * 모바일(≤767px) 전환 개선용 스타일. 데스크톱에는 영향 없음.
 * 대상: 메인(index), 렌터카 검색(rentacar_search), 렌터카 결제(rentacar_payment)
 * 버전은 header.ejs 의 ?v= 쿼리로 관리.
 */
@media (max-width: 767px) {

  /* ---------- 공통 ---------- */
  /* 탭 타깃 최소 44px, 폰트 16px 미만 input 은 iOS 에서 확대되므로 16px 로 */
  .form-control,
  select.form-control,
  input.form-control {
    min-height: 40px;
    font-size: 15px;
  }

  /* 하단 고정 CTA 가 있는 페이지: 채팅/맨위 버튼을 CTA 위로 올린다 */
  body.has-mobile-cta {
    padding-bottom: 84px;
  }
  body.has-mobile-cta #okitour-chat-launcher {
    bottom: 96px !important;
  }
  body.has-mobile-cta #toTop {
    bottom: 92px !important;
  }

  /* ---------- 렌터카 검색 ---------- */
  /* 검색조건 요약바: 결과 위에 고정. 폼은 접혀 있고 탭하면 펼친다 */
  .m-search-summary {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1010;
    display: flex !important; /* .visible-xs 의 display:block !important 보다 우선 */
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }
  .m-search-summary .m-search-summary__body {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
  }
  .m-search-summary .m-search-summary__dates {
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-search-summary .m-search-summary__place {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-search-summary .m-search-summary__btn {
    flex-shrink: 0;
    border: 1px solid #3498db;
    background: #fff;
    color: #3498db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    min-height: 40px;
  }
  .m-search-summary .m-search-summary__btn.is-open {
    background: #3498db;
    color: #fff;
  }

  /* 펼쳐진 폼: 재검색 버튼을 전체폭으로 */
  #tools2 .btn_search {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
    margin-top: 6px;
  }
  #tools2 .search-form-container .row .col-lg-2 > div {
    text-align: center !important;
    margin-right: 0 !important;
  }
  /* 렌터카 회사 select 가 옆 라벨과 함께 한 줄에 안 들어가면 아래로 */
  #tools2 select.form-control.input-sm[ng-model="order.selected_company_uid"] {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  /* 최근 검색 기록: 결과보다 위에 있어 첫 화면을 밀어낸다 → 접힌 상태에서는 숨김 */
  .search-history-container.m-collapsed {
    display: none;
  }

  /* 프로모션/조건 표: 제목만 보이고 탭하면 펼침 */
  .m-conditions-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
  }
  .m-conditions-toggle .fa {
    color: #adb5bd;
    transition: transform 0.2s;
  }
  .m-conditions-toggle.is-open .fa {
    transform: rotate(180deg);
  }
  .m-conditions-body {
    display: none;
  }
  .m-conditions-body.is-open {
    display: block;
  }
  .m-conditions-body .table_summary td {
    display: block;
    width: 100%;
    text-align: left !important;
    font-size: 12px;
    padding: 6px 10px;
    border-top: 0;
  }
  .m-conditions-body .table_summary tr {
    display: block;
    border-top: 1px solid #eee;
    padding: 4px 0;
  }
  .m-conditions-body .table_summary tr:first-child {
    border-top: 0;
  }

  .search-result-summary {
    margin: 0 0 10px;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* 결과 카드: 사진·특징·가격·버튼만. 갤러리 썸네일과 회사 로고 이미지는 접는다 */
  .strip_list {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  .strip_list .row {
    padding: 12px 10px 10px !important;
  }
  .strip_list .visible-xs h3 {
    font-size: 15px !important;
    line-height: 1.3;
    margin: 16px 0 4px !important; /* 좌상단 클래스 배지 아래로 */
    padding-right: 0;
  }
  .strip_list .visible-xs h3 .btn-xs {
    font-size: 11px;
    padding: 2px 7px;
  }
  .strip_list .visible-xs .car_class {
    top: -12px !important;
    left: -10px !important;
    padding: 6px 10px 4px !important;
    font-size: 11px;
  }
  .strip_list .visible-xs p {
    font-size: 12px;
    color: #6c757d;
    margin: 0 0 6px !important;
  }
  .strip_list .list_ok_2 {
    margin: 4px 0 6px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  .strip_list .list_ok_2 li {
    font-size: 12px;
    line-height: 1.5;
    padding: 0;
  }
  .strip_list .blueimp-gallery-inner {
    display: none !important;
  }
  .strip_list .rentacar_logo {
    padding: 4px 0 0 !important;
    margin: 0 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 6px;
  }
  .strip_list .rentacar_logo img {
    max-height: 18px !important;
    margin: 0 !important;
  }
  .strip_list .rentacar_logo div {
    text-align: left !important;
    font-size: 11px !important;
    padding-top: 0 !important;
    width: auto !important;
  }
  .strip_list .btn-review-stats {
    font-size: 11px;
    padding: 2px 6px;
  }

  /* 가격 + 예약 버튼: 한 줄에 정렬 */
  .strip_list .price_list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 0 !important;
    padding: 10px 12px !important;
    text-align: left;
  }
  .strip_list .price_list:after {
    display: none !important;
  }
  .strip_list .price_list .col-xs-6 {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
  }
  .strip_list .price_list .col-xs-6:first-child {
    flex: 1;
    min-width: 0;
  }
  .strip_list .price_list .col-xs-6 + .col-xs-6 {
    flex: 0 0 132px;
  }
  /* 보험 등급별 총액 목록: 가격/버튼 아래 전체폭 */
  .strip_list .price_list .ins-tier-col {
    flex: 0 0 100%;
    width: 100% !important;
    float: none !important;
  }
  .strip_list .price_list .normal_price_list {
    display: inline;
    font-size: 12px;
    margin-right: 6px;
  }
  .strip_list .price_list b {
    display: inline;
    font-size: 19px;
    color: #e04f67;
    margin: 0;
  }
  .strip_list .price_list small {
    font-size: 11px;
    line-height: 1.35;
    margin: 0;
  }
  .strip_list .price_list p {
    margin: 0;
  }
  .strip_list .btn_reservation {
    min-height: 46px;
    padding: 10px 8px !important;
    font-size: 15px !important;
    border-radius: 10px;
  }
  .strip_list .clearfix.visible-xs {
    display: none !important;
  }
  /* 동일 차종 더보기 버튼 */
  .strip_list > div[ng-show*="is_group"] {
    padding: 8px 10px !important;
  }
  .strip_list > div[ng-show*="is_group"] .btn {
    min-height: 40px;
    font-size: 13px;
  }

  /* ---------- 렌터카 결제 ---------- */
  #payment-form .box_style_1 h3.inner {
    font-size: 16px;
  }
  /* 라벨 위, 입력 아래 — 좌우 2단 그리드는 모바일에서 읽기 어렵다 */
  #payment-form .form-horizontal .control-label {
    text-align: left;
    padding-top: 0;
    margin-bottom: 4px;
    font-size: 13px;
  }
  #payment-form .form-group {
    margin-bottom: 12px;
  }
  #payment-form input.form-control,
  #payment-form select.form-control {
    min-height: 44px;
    font-size: 16px; /* iOS 자동 확대 방지 */
  }
  #payment-form .btn_search.btn-block {
    min-height: 50px;
    font-size: 16px;
  }
  /* 일자별 요금: 3일까지만 보이고 나머지는 접는다 */
  .m-days-more {
    display: inline-block;
    margin-top: 4px;
    color: #3498db;
    font-size: 12px;
    text-decoration: underline;
  }

  /* 하단 고정 결제바 */
  .m-pay-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e3e6ea;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
  }
  .m-pay-bar__amount {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }
  .m-pay-bar__label {
    display: block;
    font-size: 11px;
    color: #6c757d;
  }
  .m-pay-bar__value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #e04f67;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-pay-bar__sub {
    display: block;
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-pay-bar__btn {
    flex: 0 0 auto;
    min-width: 132px;
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: #27ae60;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 0 14px;
  }
  .m-pay-bar__btn[disabled] {
    opacity: 0.6;
  }

  /* ---------- 메인 ---------- */
  /* 블로그 리뷰: 4열 → 2열 */
  .index-blog-list .index-blog-item {
    width: calc(50% - 5px) !important;
  }
  .index-blog-list .index-blog-item > a > div {
    height: 90px !important;
  }
  .index-blog-list .index-blog-item a[style*="white-space:nowrap"] {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px !important;
  }

  /* 상품/렌터카 카드: 이미지 위 가격 오버레이가 글자와 겹치지 않게 블록으로 */
  .grid-frame .short_info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.62) !important;
    padding: 6px 8px !important;
    text-align: right;
    line-height: 1.25;
  }
  .grid-frame .short_info .base {
    position: static !important;
    display: block;
    font-size: 11px;
    opacity: 0.9;
    text-align: left;
  }
  .grid-frame .short_info .price {
    float: none !important;
    display: block !important;
    font-size: 17px;
    text-align: right;
  }
  .grid-frame .short_info .price > .visible-xs {
    display: block !important;
    font-size: 11px !important;
    opacity: 0.9;
    text-align: left;
  }
  .grid-frame .short_info .price s {
    font-size: 12px !important;
    opacity: 0.8;
    margin-right: 4px;
  }
  .grid-frame .tour_container .short_info .price {
    font-size: 16px;
  }
  .grid-frame .short_info .price br {
    display: none;
  }
  .grid-frame .short_info .price small {
    font-size: 11px;
  }
  .grid-frame .short_info .price .badge {
    font-size: 10px !important;
    padding: 2px 5px;
    vertical-align: middle;
  }
  .grid-frame .car_class {
    font-size: 11px !important;
    padding: 3px 8px;
    width: auto !important;
  }
  .grid-frame .transfer_title h3,
  .grid-frame .tour_title h3 {
    font-size: 14px;
    line-height: 1.35;
    margin: 6px 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .grid-frame .transfer_title p,
  .grid-frame .tour_title > div {
    font-size: 11px;
    color: #6c757d;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .grid-frame .col-xs-6 {
    padding-left: 6px;
    padding-right: 6px;
  }
  .main_title h2 {
    font-size: 20px;
  }
  .main_title p {
    font-size: 13px;
  }
  /* 메인 검색 버튼: 전체폭·크게 */
  #search_container2 .btn_search {
    width: 100%;
    min-height: 50px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 10px;
  }
  #search_container2 .btn_search + * ,
  #search_container2 form > div[style*="text-align:center"] {
    padding: 8px 0 0 !important;
  }
}