/* ==========================================================================
   tours/tour/view.php + rentview1.php + rent.php + rentcarss.php 전용
   모바일 반응형 CSS
   - breakpoint: 720px (이하 = 모바일, 초과 = PC 그대로)
   - 작성일: 2026-04-25
   - 원칙: 미디어 쿼리 안에서만 PC 스타일을 override 한다.
           PC(721px 이상) 레이아웃은 절대 건드리지 않는다.
   ========================================================================== */

/* ---------- 공통: 모바일 가로 스크롤 차단 (안전판) ---------- */
@media (max-width: 720px) {
    html, body { max-width: 100vw; overflow-x: hidden; }
}

/* ==========================================================================
   720px 이하 - 모바일 메인 블록
   ========================================================================== */
@media (max-width: 720px) {

    /* ----- view.php 의 #conbox 풀어주기 ----- */
    #conpage,
    #conbox.right-box,
    #conpage .right-box {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ----- rentview1.php 최상위 테이블 - 2단 레이아웃을 1단으로 ----- */
    .rv-mainwrap,
    .rv-mainwrap > tbody,
    .rv-mainwrap > tbody > tr {
        display: block !important;
        width: 100% !important;
    }
    .rv-mainwrap > tbody > tr > td.rv-photo-cell,
    .rv-mainwrap > tbody > tr > td.rv-info-cell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ----- 차량 사진 영역 (rentview1.php 줄 158 부근) ----- */
    .rv-photo-table {
        width: 100% !important;
        height: auto !important;
    }
    .rv-photo-wrap {
        position: relative !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto;
    }
    .rv-mainimg {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    /* ----- 차량명 위쪽 정보 박스 ----- */
    .rv-info-cell .rv-title-box,
    .rv-info-cell h2 {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        font-size: 18px !important;
        line-height: 1.4;
    }

    /* ----- 예약상담 전화번호 (줄 201, position:absolute right:-20% 였던 것) ----- */
    .rv-callbar {
        position: static !important;
        width: 100% !important;
        right: auto !important;
        bottom: auto !important;
        margin: 8px 0 !important;
        text-align: center;
        font-size: 16px !important;
    }
    .rv-callbar a {
        font-size: 22px !important;
    }

    /* ----- 자차 배너 (줄 206) ----- */
    .rv-jacha-banner {
        position: static !important;
        width: 100% !important;
        max-width: 240px;
        height: auto !important;
        margin: 6px auto !important;
        text-align: center;
    }
    .rv-jacha-banner img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ----- 썸네일 갤러리 테이블 (줄 261) ----- */
    .rv-thumb-table {
        position: static !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }
    .rv-thumb-table img {
        width: 100% !important;
        max-width: 60px;
        height: auto !important;
    }

    /* ----- 예약/장바구니 버튼 영역 (줄 387, position:absolute width:500px 였던 것) ----- */
    .rv-buttonbar {
        position: static !important;
        width: 100% !important;
        margin: 12px 0 !important;
        padding-top: 10px !important;
        text-align: center !important;
        display: flex;
        gap: 6px;
        justify-content: center;
    }
    .rv-buttonbar a {
        flex: 1;
        max-width: 50%;
    }
    .rv-buttonbar img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* ----- gubundess (라벨) / gubundesss (값) 줄바꿈 허용 ----- */
    .gubundess,
    .gubundesss {
        display: inline-block;
        max-width: 100%;
        white-space: normal !important;
        word-break: keep-all;
    }

    /* ==========================================================================
       rent.php - 날짜/시간 선택기 영역
       ========================================================================== */
    .detail_box,
    .detail_box .spec,
    .detail_box .spec dl {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 인수반납 라벨 + 날짜선택기 1줄 → 모바일 1줄 풀폭 */
    .rent-datebox,
    .rentdesc {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box;
    }
    .rent-datebox .selDate,
    .datestyle1 {
        font-size: 16px !important;
        height: 36px !important;
        max-width: 130px;
    }
    .rent-datebox SELECT,
    SELECT.datestyle1 {
        height: 36px !important;
        font-size: 16px !important;
        padding: 2px 4px;
    }

    /* 정상요금/총대여료 박스 ----- */
    .rent-pricebox {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* jQuery UI datepicker - 모바일 폭 ----- */
    .ui-datepicker {
        max-width: 100% !important;
        width: auto !important;
    }

    /* ==========================================================================
       rentcarss.php - 하단 이용안내/보험/인도반납/기타 섹션
       ========================================================================== */
    .cardes,
    .rcss-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 0 4px;
    }
    .rcss-section img,
    .cardes img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* movebar 탭 (이벤트/이용안내/보험/인도반납/기타) */
    ul.movebar {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap;
        margin: 0 !important;
        padding: 0 !important;
    }
    ul.movebar li {
        flex: 1 1 auto;
        min-width: 33.333%;
        height: auto !important;
        line-height: 1.6 !important;
        text-align: center;
        font-size: 13px !important;
    }
    ul.movebar li a {
        display: block;
        padding: 10px 4px;
        font-size: 13px !important;
    }
    /* 우측 TOP 버튼은 별도 행으로 */
    ul.movebar li#movebar1 {
        min-width: 100%;
        line-height: 1.8 !important;
    }

    /* 차량 갤러리 .imgw / .imgw1 */
    .imgw, .imgw1 {
        width: 48% !important;
        max-width: 48% !important;
        height: auto !important;
        margin: 1%;
        float: left;
    }

    /* 동일차량 더보기 박스 (jejusea 관리자 영역) */
    .red > .fl {
        width: 100% !important;
        padding: 0 !important;
        border-left: 0 !important;
        border-bottom: 1px dotted gray;
        margin-bottom: 10px;
    }

    /* ==========================================================================
       글로벌 안전판: rentview1 영역의 인라인 width:NNNpx 잡아내기
       (인라인 스타일은 우선순위가 높으므로 [style*=] selector 로 override)
       ========================================================================== */
    #conbox [style*="width:570px"],
    #conbox [style*="width: 570px"],
    #conbox [style*="width:500px"],
    #conbox [style*="width: 500px"],
    #conbox [style*="width:370px"],
    #conbox [style*="width: 370px"],
    #conbox [style*="width:365px"],
    #conbox [style*="width: 365px"],
    #conbox [style*="width:360px"],
    #conbox [style*="width: 360px"],
    #conbox [style*="width:280px"],
    #conbox [style*="width: 280px"],
    #conbox [style*="width:227px"],
    #conbox [style*="width: 227px"],
    #conbox [style*="width:230px"],
    #conbox [style*="width: 230px"],
    #conbox [style*="width:390px"],
    #conbox [style*="width: 390px"],
    #conbox [style*="width:880px"],
    #conbox [style*="width: 880px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* position:absolute 인라인을 가진 박스를 모바일에서는 흐름에 띄우지 않음 */
    #conbox .rv-callbar[style*="absolute"],
    #conbox .rv-jacha-banner[style*="absolute"],
    #conbox .rv-buttonbar[style*="absolute"] {
        position: static !important;
    }
}

/* ==========================================================================
   480px 이하 - 작은 모바일 추가 조정
   ========================================================================== */
@media (max-width: 480px) {
    .rv-info-cell h2 {
        font-size: 16px !important;
    }
    ul.movebar li {
        min-width: 50%;
        font-size: 12px !important;
    }
    .imgw, .imgw1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px 0;
        float: none;
    }
    .rent-datebox .selDate,
    .datestyle1 {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   2026-04-25 (rev2) - 헤더/메뉴 모바일 안전판
   - tours/head.php 의 header{width:1250px} 강제로 인한 깨짐 추가 방어
   - mobile/head.php 의 #hd, #gnb, #hd_wrapper 가 모바일 폭 안에 들어오도록
   ========================================================================== */
@media (max-width: 720px) {
    header,
    header#hd,
    .header,
    #hd_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    #hd_wrapper {
        position: relative;
        padding: 8px 12px;
    }
    /* 로고 영역: 좌측 고정 */
    #logo {
        max-width: 60%;
        height: auto;
    }
    #logo img {
        max-width: 100%;
        height: auto;
    }
    /* 햄버거 / 사용자버튼: 우측 정렬, 터치 가능 크기 */
    #gnb_open,
    #user_btn,
    .hd_opener {
        display: inline-block !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 22px !important;
        text-align: center;
        background: transparent;
        border: 0;
        padding: 0;
        margin-left: 4px;
        vertical-align: middle;
    }
    /* 메뉴(#gnb): 닫힌 상태 기본 숨김 (햄버거 클릭 시 열림 유지) */
    #gnb {
        position: fixed;
        top: 0;
        right: -110%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 8px rgba(0,0,0,0.15);
        overflow-y: auto;
        z-index: 9999;
        transition: right 0.25s ease-out;
    }
    #gnb.open,
    body.gnb_open #gnb {
        right: 0;
    }
    /* gnb 안의 메뉴 항목들: 1단 세로 정렬, 글자 안 깨지게 */
    #gnb #gnb_1dul,
    #gnb #hd_nb {
        display: block !important;
        width: 100% !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        list-style: none;
    }
    #gnb .gnb_1dli,
    #gnb .gnb_2dli,
    #gnb #hd_nb li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        text-align: left;
        white-space: nowrap;
        word-break: keep-all;
        border-bottom: 1px solid #eee;
    }
    #gnb .gnb_1da,
    #gnb .gnb_2da,
    #gnb #hd_nb a {
        display: block !important;
        padding: 12px 16px;
        font-size: 15px;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
    }
    #gnb .gnb_2dul {
        display: none;
        padding-left: 12px;
        background: #f7f7f7;
    }
    #gnb .btn_gnb_op {
        position: absolute;
        right: 8px;
        top: 8px;
        width: 36px;
        height: 36px;
        border: 0;
        background: transparent;
    }
}


/* ==========================================================================
   2026-04-25 (rev3) - navication.php 의 nav.gnb 메뉴 모바일 변환
   - <header class="container header"> > nav.gnb > ul.gnb_menu > li.gnb_menu_list
   - PC 가로 메뉴를 모바일에서 햄버거 슬라이드 패널로 전환
   - view-mobile-menu.js 가 .ks-mobile-toggle 버튼을 동적 주입
   ========================================================================== */
@media (max-width: 720px) {
    header.container.header,
    header.header.ks-header-mobile {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        box-sizing: border-box;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        z-index: 1000;
    }

    /* 좌측 로고 */
    header.header > a,
    header.header .logo_web {
        display: inline-block !important;
        max-width: 60%;
        height: auto;
    }
    header.header .logo_web {
        max-height: 36px;
        width: auto;
    }

    /* nav.gnb : 컨테이너 */
    header.header nav.gnb {
        display: block !important;
        position: static;
        width: auto;
        margin: 0;
        padding: 0;
    }

    /* 햄버거 버튼 (JS 가 동적 추가) */
    .ks-mobile-toggle {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 38px;
        font-size: 28px;
        background: transparent;
        border: 0;
        color: #333;
        cursor: pointer;
        padding: 0;
        margin: 0;
        text-align: center;
        z-index: 10001;
        position: relative;
    }
    .ks-mobile-toggle.open { color: #fe8a3d; }

    /* gnb_menu : 닫힘 상태 = 화면 밖, 열림 상태 = 우측 슬라이드 패널 */
    header.header ul.gnb_menu {
        position: fixed !important;
        top: 0;
        right: -110%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 12px rgba(0,0,0,0.18);
        overflow-y: auto;
        margin: 0 !important;
        padding: 56px 0 24px 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        z-index: 9999;
        transition: right 0.25s ease-out;
    }
    header.header ul.gnb_menu.open {
        right: 0;
    }

    /* 메뉴 항목 */
    header.header li.gnb_menu_list {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #eee;
        text-align: left;
        white-space: nowrap;
        word-break: keep-all;
    }
    header.header li.gnb_menu_list > a {
        display: block !important;
        padding: 14px 20px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        white-space: nowrap;
        word-break: keep-all;
        background: transparent;
    }
    header.header li.gnb_menu_list > a:hover,
    header.header li.gnb_menu_list > a:focus {
        background: #f7f7f7;
    }

    /* user_menu_wrap : 별도 작은 메뉴는 패널 안에 흡수 */
    header.header .user_menu_wrap {
        position: static;
        width: 100%;
        background: transparent;
    }
    header.header .user_menu {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    header.header .user_menu .user_menu_list {
        display: block;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    header.header .user_menu .user_menu_list a {
        display: block;
        padding: 12px 20px;
        color: #555;
        text-decoration: none;
        font-size: 14px;
    }

    /* 백드롭 효과 — body 에 ks-menu-open 클래스 붙으면 */
    body.ks-menu-open {
        overflow: hidden;
    }
    body.ks-menu-open::before {
        content: '';
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: rgba(0,0,0,0.4);
        z-index: 9998;
    }

    /* 상단 fixed admin bar 가 있으면 헤더 안 가리도록 */
    .container-fluid.top-line.fixed-header {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* PC (>=721px) 에서는 햄버거 숨김 (혹시 JS 가 늦게 제거할 때 깜빡임 방지) */
@media (min-width: 721px) {
    .ks-mobile-toggle { display: none !important; }
}


/* ==========================================================================
   2026-04-25 (rev4) - 모바일 헤더바 .ks-mhdr + 기존 헤더 숨김 + movebar 강제 가로
   ========================================================================== */
@media (max-width: 720px) {

    /* ---------- 새 모바일 헤더바 (JS 동적 생성) ---------- */
    body.ks-mobile-mode { padding-top: 50px !important; }

    .ks-mhdr {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 50px;
        background: #fff;
        border-bottom: 1px solid #eaeaea;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        z-index: 10000;
        box-sizing: border-box;
    }
    .ks-mhdr-logo {
        display: inline-flex;
        align-items: center;
        height: 50px;
        max-width: 50%;
        text-decoration: none;
        color: #2d8c10;
        font-weight: bold;
        font-size: 16px;
    }
    .ks-mhdr-logo img {
        max-height: 32px;
        width: auto;
        display: block;
    }
    .ks-mhdr-right {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .ks-mhdr-tel {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 10px;
        background: #fff7f0;
        border: 1px solid #fe8a3d;
        border-radius: 18px;
        text-decoration: none;
        color: #fe8a3d;
        font-weight: bold;
        font-size: 13px;
        white-space: nowrap;
        line-height: 1;
    }
    .ks-mhdr-tel-icon {
        font-size: 14px;
        margin-right: 4px;
    }
    .ks-mhdr-tel-num { letter-spacing: -0.3px; }

    /* 햄버거 버튼 — 3줄 라인 디자인 */
    .ks-mobile-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 40px;
        height: 36px;
        background: transparent;
        border: 1px solid #d8d8d8;
        border-radius: 6px;
        cursor: pointer;
        padding: 0;
        margin: 0;
    }
    .ks-mobile-toggle .ks-bar {
        display: block;
        width: 18px;
        height: 2px;
        background: #555;
        border-radius: 1px;
        transition: transform 0.2s, opacity 0.2s;
    }
    .ks-mobile-toggle.open { border-color: #fe8a3d; }
    .ks-mobile-toggle.open .ks-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); background:#fe8a3d; }
    .ks-mobile-toggle.open .ks-bar:nth-child(2) { opacity: 0; }
    .ks-mobile-toggle.open .ks-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background:#fe8a3d; }

    /* 좁은 폭 — 전화 번호 숨기고 아이콘만 (예: <380px) */
    @media (max-width: 380px) {
        .ks-mhdr-tel-num { display: none; }
        .ks-mhdr-tel { padding: 0 10px; }
    }

    /* ---------- 기존 어수선한 PC 헤더 / 상단 메뉴 모바일에서 숨김 ---------- */
    body.ks-mobile-mode header.header,
    body.ks-mobile-mode header.container.header,
    body.ks-mobile-mode .container-fluid.top-line.fixed-header,
    body.ks-mobile-mode nav.navbar.fixed-top,
    body.ks-mobile-mode .ety-main {
        display: none !important;
    }

    /* 단, 메뉴 데이터(ul.gnb_menu)는 슬라이드 패널로 살린다 -> nav.gnb / ul.gnb_menu 는 다시 표시 */
    body.ks-mobile-mode header.header,
    body.ks-mobile-mode header.container.header {
        display: block !important; /* ul.gnb_menu 가 fixed 라 부모는 보이게 두되 시각 영향 0 */
        position: static !important;
        height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    body.ks-mobile-mode header.header > a,
    body.ks-mobile-mode header.header .logo_web,
    body.ks-mobile-mode header.header nav.gnb > a {
        display: none !important;  /* 헤더 안 로고는 .ks-mhdr 가 대신 표시 */
    }
    body.ks-mobile-mode header.header nav.gnb {
        display: block !important;
        height: 0;
        overflow: visible;
    }

    /* ul.gnb_menu : 햄버거 클릭 시 우측 슬라이드 (.ks-open) */
    body.ks-mobile-mode ul.gnb_menu {
        position: fixed !important;
        top: 50px !important;
        right: -110%;
        width: 80%;
        max-width: 320px;
        height: calc(100vh - 50px);
        background: #fff;
        box-shadow: -2px 0 12px rgba(0,0,0,0.18);
        overflow-y: auto;
        margin: 0 !important;
        padding: 12px 0 24px 0 !important;
        list-style: none !important;
        display: block !important;
        z-index: 9999;
        transition: right 0.25s ease-out;
    }
    body.ks-mobile-mode ul.gnb_menu.ks-open { right: 0 !important; }

    body.ks-mobile-mode ul.gnb_menu > li.gnb_menu_list {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eee;
        white-space: nowrap;
        word-break: keep-all;
    }
    body.ks-mobile-mode ul.gnb_menu > li.gnb_menu_list > a {
        display: block !important;
        padding: 14px 20px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        white-space: nowrap;
        background: transparent;
    }
    body.ks-mobile-mode ul.gnb_menu > li.gnb_menu_list > a:active,
    body.ks-mobile-mode ul.gnb_menu > li.gnb_menu_list > a:hover {
        background: #f7f7f7;
    }

    /* user_menu_wrap (로그인후 사용자 메뉴) - 모바일에서 숨김 (필요시 패널 안에 흡수) */
    body.ks-mobile-mode header.header .user_menu_wrap { display: none !important; }

    /* 백드롭 */
    body.ks-menu-open { overflow: hidden; }
    body.ks-menu-open::before {
        content: '';
        position: fixed;
        top: 50px; left: 0;
        width: 100%; height: calc(100vh - 50px);
        background: rgba(0,0,0,0.4);
        z-index: 9998;
    }

    /* ---------- rentview1.php 의 .rv-callbar (큰 예약상담 박스) 모바일 숨김
                  -> .ks-mhdr-tel 이 대체 ---------- */
    body.ks-mobile-mode .rv-callbar { display: none !important; }

    /* ---------- movebar 탭 강제 가로 6분할 ---------- */
    body.ks-mobile-mode ul.movebar,
    ul.movebar.tab {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: #fafafa;
        border-bottom: 1px solid #eaeaea;
    }
    body.ks-mobile-mode ul.movebar > li,
    ul.movebar.tab > li {
        display: flex !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
        background: transparent !important;
        border-right: 1px solid #eaeaea;
    }
    body.ks-mobile-mode ul.movebar > li:last-child,
    ul.movebar.tab > li:last-child { border-right: 0; }

    body.ks-mobile-mode ul.movebar > li > a,
    ul.movebar.tab > li > a {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        height: auto !important;
        min-height: 48px !important;
        padding: 6px 2px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere;
        letter-spacing: 0 !important;
        color: #555 !important;
        text-decoration: none !important;
    }
    /* 활성 탭 (background-color:#fe8a3d 인라인) - 글자색 흰색으로 바꿔서 가독성 */
    body.ks-mobile-mode ul.movebar > li[style*="fe8a3d"] > a,
    body.ks-mobile-mode ul.movebar > li[style*="fe8a3d"] > a.on {
        color: #fff !important;
        font-weight: bold !important;
    }
    body.ks-mobile-mode ul.movebar > li[style*="fe8a3d"] {
        background: #fe8a3d !important;
    }
    /* TOP 버튼 (movebar1) - 별도 색 유지, 같은 1/N 폭 */
    body.ks-mobile-mode ul.movebar > li#movebar1,
    ul.movebar.tab > li#movebar1 {
        background: #fe8a3d !important;
    }
    body.ks-mobile-mode ul.movebar > li#movebar1 > a {
        color: #fff !important;
        font-weight: bold !important;
    }
}

/* PC: 새 헤더바 절대 표시 안 함 */
@media (min-width: 721px) {
    .ks-mhdr { display: none !important; }
    body { padding-top: 0 !important; }
}


/* ==========================================================================
   2026-04-25 (rev5) - 헤더 전화 = 작은 원형 ☎ 아이콘 (텍스트 제거)
                       본문 .rv-callbar 다시 보이게 (전화 유도)
   ========================================================================== */
@media (max-width: 720px) {
    /* 로고 영역 - 텍스트 폴백 (이미지 못 불러올 때 "당근렌트카" 표시) */
    .ks-mhdr-logo {
        gap: 6px;
    }
    .ks-mhdr-logo-fallback {
        display: none;
        font-weight: bold;
        color: #2d8c10;
        font-size: 16px;
        letter-spacing: -0.3px;
    }
    .ks-mhdr-logo.ks-text-logo .ks-mhdr-logo-fallback {
        display: inline-block;
    }

    /* 우측 아이콘 영역 */
    .ks-mhdr-right {
        gap: 6px;
    }

    /* 전화 버튼 - 작은 원형 아이콘 ONLY (텍스트 X) */
    .ks-mhdr-tel {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        background: #fe8a3d !important;
        border: 0 !important;
        border-radius: 50% !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(254,138,61,0.35);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .ks-mhdr-tel:hover,
    .ks-mhdr-tel:active {
        transform: scale(0.94);
        box-shadow: 0 1px 5px rgba(254,138,61,0.55);
    }
    .ks-mhdr-tel svg {
        width: 18px;
        height: 18px;
        display: block;
    }
    /* rev4 의 텍스트 노드는 SVG 만 들어가서 자연 제거. 혹시 있어도 숨김 */
    .ks-mhdr-tel-num,
    .ks-mhdr-tel-icon { display: none !important; }

    /* 햄버거도 같은 크기 원형 통일 */
    .ks-mobile-toggle {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border: 1px solid #d8d8d8 !important;
        gap: 3px !important;
    }
    .ks-mobile-toggle .ks-bar {
        width: 16px;
        height: 2px;
    }
    .ks-mobile-toggle.open .ks-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .ks-mobile-toggle.open .ks-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

    /* ---------- 본문 .rv-callbar (064-755-8279 빨간 큰 글씨) 다시 표시 ---------- */
    /* rev4 에서 display:none 했던 것을 풀고 모바일 친화적 컴팩트 박스로 */
    body.ks-mobile-mode .rv-callbar {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 8px 0 12px 0 !important;
        padding: 10px 12px !important;
        right: auto !important;
        bottom: auto !important;
        text-align: center !important;
        background: #fff8f3;
        border: 1px solid #fe8a3d !important;
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 15px !important;
        line-height: 1.4 !important;
        overflow: visible !important;
    }
    body.ks-mobile-mode .rv-callbar a {
        font-size: 22px !important;
        color: #e0521b !important;
        font-weight: bold !important;
        text-decoration: none !important;
        letter-spacing: -0.3px;
    }
    body.ks-mobile-mode .rv-callbar a::before {
        content: '☎ ';
        font-size: 18px;
        margin-right: 2px;
    }
}


/* ==========================================================================
   2026-04-25 (rev6) - 로고를 인라인 SVG 차 아이콘 + 텍스트로 (외부 이미지 의존 제거)
   ========================================================================== */
@media (max-width: 720px) {
    .ks-mhdr-logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 50px;
        max-width: 60% !important;
        text-decoration: none !important;
        color: #2d8c10 !important;
        line-height: 1 !important;
        padding: 0 4px;
    }
    .ks-mhdr-logo svg.ks-mhdr-logo-icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: block;
    }
    .ks-mhdr-logo-text {
        font-weight: bold !important;
        font-size: 17px !important;
        letter-spacing: -0.5px !important;
        color: #2d8c10 !important;
        white-space: nowrap;
        line-height: 1 !important;
    }
    /* rev5 의 폴백/이미지 셀렉터들 제거 (이제 안 씀) */
    .ks-mhdr-logo-fallback { display: none !important; }
    .ks-mhdr-logo > img { display: none !important; }

    /* 좁은 화면(<=360px) 에서는 로고 글자 살짝 작게 */
    @media (max-width: 360px) {
        .ks-mhdr-logo-text { font-size: 15px !important; }
        .ks-mhdr-logo svg.ks-mhdr-logo-icon { width: 20px; height: 20px; }
    }
}


/* ==========================================================================
   2026-04-25 (rev7) - 로고를 사용자 지정 이미지(jejucar.kr/.../logo.svg) 로 표시
                       기존 rev들의 logo_web 숨김 / SVG 아이콘 셀렉터 무력화
   ========================================================================== */
@media (max-width: 720px) {
    /* rev2~6 에서 숨겼던 .logo_web 을 .ks-mhdr 안에서는 다시 표시 */
    .ks-mhdr .ks-mhdr-logo .logo_web,
    .ks-mhdr .ks-mhdr-logo .ks-mhdr-logo-img,
    .ks-mhdr .ks-mhdr-logo > img {
        display: block !important;
        max-height: 36px !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* 로고 컨테이너: 이미지가 잘 보이도록 폭/높이 조정 */
    .ks-mhdr .ks-mhdr-logo {
        display: inline-flex !important;
        align-items: center !important;
        height: 50px;
        max-width: 60% !important;
        padding: 0 4px !important;
        text-decoration: none !important;
        gap: 0 !important;
    }

    /* rev6 의 텍스트/SVG 셀렉터는 더 이상 안 쓰지만 혹시 남아 있으면 숨김 */
    .ks-mhdr .ks-mhdr-logo-text,
    .ks-mhdr .ks-mhdr-logo-icon,
    .ks-mhdr .ks-mhdr-logo-fallback { display: none !important; }
}

/* PC 에서는 .ks-mhdr 자체가 안 보이지만, 안의 logo_web 도 명시적으로 숨김 */
@media (min-width: 721px) {
    .ks-mhdr { display: none !important; }
}


/* ==========================================================================
   2026-04-25 (rev8) - 로고 이미지 4중 안전판
   - 모든 가시성 속성 (display/visibility/opacity/height/width/object-fit) !important
   - 이미지 못 뜨면 .ks-logo-text-only 클래스로 자동 텍스트 폴백
   ========================================================================== */
@media (max-width: 720px) {
    /* 로고 컨테이너 — 명시적 크기 + flex */
    .ks-mhdr .ks-mhdr-logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 50px !important;
        max-width: 60% !important;
        padding: 0 6px !important;
        text-decoration: none !important;
        color: #2d8c10 !important;
        line-height: 1 !important;
    }

    /* 이미지 — 가시성 모든 속성 강제 */
    .ks-mhdr .ks-mhdr-logo .ks-mhdr-logo-img,
    .ks-mhdr .ks-mhdr-logo .logo_web,
    .ks-mhdr .ks-mhdr-logo > img {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 36px !important;
        width: auto !important;
        max-height: 36px !important;
        max-width: 100% !important;
        min-height: 28px !important;
        min-width: 80px !important;
        object-fit: contain !important;
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        vertical-align: middle;
    }

    /* 텍스트 — 기본 숨김, 이미지 fail 시 자동 표시 */
    .ks-mhdr .ks-mhdr-logo .ks-mhdr-logo-text {
        display: none;
        font-weight: bold;
        font-size: 17px;
        color: #2d8c10;
        letter-spacing: -0.5px;
        white-space: nowrap;
        line-height: 1;
    }
    .ks-mhdr .ks-mhdr-logo.ks-logo-text-only .ks-mhdr-logo-text {
        display: inline-block;
    }
    /* 이미지 실패 시 (text-only 모드) min 크기 해제해서 텍스트만 가지런히 */
    .ks-mhdr .ks-mhdr-logo.ks-logo-text-only .ks-mhdr-logo-img,
    .ks-mhdr .ks-mhdr-logo.ks-logo-text-only > img {
        display: none !important;
    }

    /* 좁은 화면 (<=360px) - 로고 살짝 축소 */
    @media (max-width: 360px) {
        .ks-mhdr .ks-mhdr-logo .ks-mhdr-logo-img,
        .ks-mhdr .ks-mhdr-logo .logo_web,
        .ks-mhdr .ks-mhdr-logo > img {
            height: 30px !important;
            max-height: 30px !important;
            min-width: 70px !important;
        }
        .ks-mhdr .ks-mhdr-logo .ks-mhdr-logo-text { font-size: 15px; }
    }
}

/* PC: .ks-mhdr 자체 숨김 (안전판) */
@media (min-width: 721px) {
    .ks-mhdr { display: none !important; }
}


/* ==========================================================================
   2026-04-25 (rev9) - 헤더 전화 = 텍스트 링크 (☎ 원형 아이콘 제거)
                       본문 .rv-callbar 다시 숨김 (헤더로 일원화)
   ========================================================================== */
@media (max-width: 720px) {
    /* ---------- 헤더 전화번호: 빨간 텍스트 링크 ---------- */
    .ks-mhdr .ks-mhdr-telnum {
        display: inline-flex !important;
        align-items: center;
        height: 36px;
        padding: 0 6px;
        color: #e0521b !important;
        font-weight: bold;
        font-size: 15px;
        letter-spacing: -0.5px;
        text-decoration: none !important;
        white-space: nowrap;
        background: transparent;
        border: 0;
    }
    .ks-mhdr .ks-mhdr-telnum::before {
        content: '\260E';
        margin-right: 4px;
        font-size: 14px;
        color: #e0521b;
    }
    .ks-mhdr .ks-mhdr-telnum:active,
    .ks-mhdr .ks-mhdr-telnum:hover {
        background: #fff7f0;
        border-radius: 6px;
    }

    /* rev4~5 의 ☎ 원형 아이콘 (.ks-mhdr-tel) 완전 제거 */
    .ks-mhdr .ks-mhdr-tel,
    .ks-mhdr .ks-mhdr-tel-icon,
    .ks-mhdr .ks-mhdr-tel-num { display: none !important; }

    /* 우측 영역 간격 */
    .ks-mhdr .ks-mhdr-right { gap: 4px !important; }

    /* ---------- 본문 .rv-callbar (예약상담 박스) 다시 숨김 ---------- */
    body.ks-mobile-mode .rv-callbar,
    .rv-callbar { display: none !important; }

    /* 좁은 폭 (<=380px) - 전화 텍스트 살짝 작게 */
    @media (max-width: 380px) {
        .ks-mhdr .ks-mhdr-telnum {
            font-size: 13px;
            padding: 0 4px;
        }
    }
    /* 더 좁은 폭 (<=340px) - 번호 짧게 (앞 064- 생략 안 함, padding 만 조정) */
    @media (max-width: 340px) {
        .ks-mhdr .ks-mhdr-telnum {
            font-size: 12px;
            padding: 0 2px;
            letter-spacing: -1px;
        }
        .ks-mhdr .ks-mhdr-telnum::before { display: none; }
    }
}


/* ==========================================================================
   2026-04-25 (rev10) - 공간 비율 정리
   - 헤더 ~ 차량 사진 사이 빈 공간 제거
   - body padding-top 만 헤더 자리(50px), 그 외 본문 위쪽 모든 잔여 padding/margin 제거
   ========================================================================== */
@media (max-width: 720px) {

    /* 본문 컨테이너 위쪽 여백 제거 */
    body.ks-mobile-mode #conpage {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.ks-mobile-mode #conbox,
    body.ks-mobile-mode #conbox.right-box {
        margin: 0 !important;
        padding: 0 8px !important;       /* 좌우만 8px, 상하 0 */
    }

    /* navication 의 ety-main 같은 빈 placeholder 들 + 게시판 상단 배경 영역 제거 */
    body.ks-mobile-mode .ety-main,
    body.ks-mobile-mode .top_banner,
    body.ks-mobile-mode #top_banner,
    body.ks-mobile-mode .container-fluid.top-line,
    body.ks-mobile-mode #wrapper > br,
    body.ks-mobile-mode #conpage > br {
        display: none !important;
    }

    /* rentview1.php 의 최상위 테이블 첫 빈 행 (height=10 colspan=2) 제거 */
    body.ks-mobile-mode table.rv-mainwrap > tbody > tr:first-child,
    body.ks-mobile-mode table.rv-mainwrap > tr:first-child {
        display: none !important;
    }

    /* 사진 셀의 위쪽 padding 제거 */
    body.ks-mobile-mode .rv-photo-cell {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 사진 테이블 + 사진 컨테이너 위쪽 여백 0 */
    body.ks-mobile-mode .rv-photo-table,
    body.ks-mobile-mode .rv-photo-wrap {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* rentview1.php line 164: <div style='padding-top:5px;...'> 의 padding-top:5px 인라인 무력화 */
    body.ks-mobile-mode .rv-photo-cell > div[style*="padding-top:5px"],
    body.ks-mobile-mode .rv-photo-cell div[style*="padding-top: 5px"] {
        padding-top: 0 !important;
    }

    /* 메인 차량 이미지 - 위쪽 마진 없애기 */
    body.ks-mobile-mode .rv-mainimg {
        margin-top: 0 !important;
    }

    /* 사진 위에 떠 있는 absolute 들 (스모킹/신차 아이콘 등) 의 자리 차지 방지 */
    body.ks-mobile-mode .rv-photo-cell .copyrealcar { top: 4% !important; }

    /* head 영역 잔재가 만드는 위쪽 빈 공간 (head.sub.php 의 hd, hd_pop, hd_define 등) */
    body.ks-mobile-mode #hd,
    body.ks-mobile-mode #hd_pop,
    body.ks-mobile-mode #hd_define,
    body.ks-mobile-mode #tnb_index,
    body.ks-mobile-mode #tnb_index_left,
    body.ks-mobile-mode .fixed-header {
        display: none !important;
        height: 0 !important;
    }

    /* form 영역 ('intoCart') 의 margin 정리 */
    body.ks-mobile-mode form[name="intoCart"] {
        margin: 0 !important;
    }

    /* 차량명 라인 위쪽 여백 정리 */
    body.ks-mobile-mode .rv-info-cell {
        padding-top: 8px !important;
    }
    body.ks-mobile-mode .rv-title-box {
        padding-top: 4px !important;
        margin-top: 4px !important;
    }
}

/* ==========================================================================
   2026-04-25 (rev11) - .rv-jacha-banner / copyrealcar 컴팩트 absolute 처리
   - rev2 에서 position:static + width:100% 로 두었던 자차 배너가
     큰 높이 (img height auto = 240px 폭 × 비율) 차지하던 문제 수정
   - 차량 사진 우측 상단에 작은 크기로 absolute 배치 (자리 안 차지)
   ========================================================================== */
@media (max-width: 720px) {
    /* ---------- 자차 배너 (jacha.png / iljacha.png / carboumtit.png) ----------
       기능: habsale 값에 따라 자차가입이벤트 / 완전자차포함 등 안내 이미지 표시
       모바일에서는 차량 사진 위 우측 상단에 작은 라벨로 표시 (자리 차지 0) */
    body.ks-mobile-mode .rv-jacha-banner {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 35vw !important;
        height: auto !important;
        max-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right;
        background: transparent;
        z-index: 5;
        overflow: hidden;
    }
    body.ks-mobile-mode .rv-jacha-banner img {
        display: block !important;
        width: auto !important;
        height: 24px !important;
        max-height: 24px !important;
        max-width: 100% !important;
        margin-left: auto;
        object-fit: contain !important;
    }

    /* 관리자 복사 버튼 (copyrealcar) - 좌측 상단 작게 */
    body.ks-mobile-mode .copyrealcar {
        top: 6px !important;
        left: 6px !important;
        right: auto !important;
        position: absolute !important;
        font-size: 11px !important;
        padding: 2px 6px !important;
        z-index: 5;
    }

    /* 메인 사진 컨테이너에 position:relative 보장 (absolute 자식 기준) */
    body.ks-mobile-mode .rv-photo-wrap,
    body.ks-mobile-mode .rv-photo-table,
    body.ks-mobile-mode .rv-photo-cell {
        position: relative !important;
    }

    /* 사진 위 absolute 들 (스모킹/신차 아이콘 영역) - 더 작게 + 우측에 정렬 */
    body.ks-mobile-mode .rv-photo-cell div[style*="position:absolute"][style*="top:10%"] {
        top: 38px !important;
        right: 6px !important;
    }
    body.ks-mobile-mode .rv-photo-cell div[style*="position:absolute"][style*="top:10%"] img {
        max-width: 28px !important;
        max-height: 28px !important;
        height: auto !important;
        width: auto !important;
    }
}

/* ==========================================================================
   2026-04-28 - 인수일시/반납일시 한 줄 유지 + 박스 폭 채움 (모바일)
   - rent.php 레거시 (.rent-datebox: float + &nbsp; 기반) 와
     rent_realtime.php 실시간 (.rt2-row: flex 기반) 둘 다 적용
   - flex-wrap:nowrap 강제 + 시/분 select 는 고정 64px 정도, 날짜는 flex-grow 로 박스 폭을 다 차지
   - jQuery UI datepicker 모바일 가운데 고정 (옆으로 밀려나가는 문제 해결)
   ========================================================================== */
@media (max-width: 720px) {

    /* ===== 실시간 경로 (.rt2-row) ===== */
    .rt2-row {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    .rt2-label {
        width: auto !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap;
        font-size: 13px !important;
    }
    .rt2-date {
        flex: 1 1 auto !important;        /* 박스 안 남은 공간 모두 차지 */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 7px 6px !important;
        font-size: 14px !important;
        text-align: center;
    }
    .rt2-time {
        flex: 0 0 auto !important;
        width: 64px !important;
        min-width: 0 !important;
        padding: 6px 4px !important;
        font-size: 14px !important;
    }
    .rt2-tilde {
        padding: 0 2px !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
    }

    /* ===== 레거시 경로 (.rent-datebox) ===== */
    /* float + &nbsp; 기반 → flex nowrap 으로 전환, 날짜는 flex-grow */
    .rent-datebox {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }
    .rent-datebox .selDate.datestyle1 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    .rent-datebox SELECT.datestyle1 {
        flex: 0 0 auto !important;
        width: 64px !important;
        min-width: 0 !important;
        height: 36px !important;
        padding: 2px 2px !important;
        font-size: 14px !important;
    }

    /* ===== jQuery UI datepicker — 모바일 가운데 고정 ===== */
    /* jQuery UI 가 inline 으로 position:absolute; top/left 을 박는 것을 fixed 로 강제 덮어쓰기 */
    .ui-datepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 92vw !important;
        max-width: 360px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
        z-index: 999999 !important;
    }
    .ui-datepicker table {
        width: 100% !important;
        table-layout: fixed;
    }
}

@media (max-width: 480px) {
    /* 일반 모바일 (360~480) — 폰트만 약간 축소, 폭은 그대로 박스 채움 유지 */
    .rt2-label  { font-size: 12px !important; }
    .rt2-date   { padding: 6px 4px !important; font-size: 13px !important; }
    .rt2-time   { width: 56px !important; padding: 5px 2px !important; font-size: 13px !important; }
    .rt2-tilde  { font-size: 12px !important; padding: 0 1px !important; }

    .rent-datebox .selDate.datestyle1 {
        height: 34px !important;
        font-size: 13px !important;
    }
    .rent-datebox SELECT.datestyle1 {
        width: 56px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 360px) {
    /* iPhone SE / 초소형 — 시/분 셀렉트 더 축소 */
    .rt2-label  { font-size: 11px !important; }
    .rt2-date   { font-size: 12px !important; padding: 5px 3px !important; }
    .rt2-time   { width: 48px !important; font-size: 12px !important; padding: 4px 1px !important; }

    .rent-datebox .selDate.datestyle1 { font-size: 12px !important; }
    .rent-datebox SELECT.datestyle1   { width: 48px !important; font-size: 12px !important; }
}

/* ==========================================================================
   2026-04-28 (rev3) - tours/tour/order.html 전면 재설계 디자인
   - reservation.php / reserprice.php 의 폼/상품 영역을 div 기반으로 마크업 변경
   - .rv-* 접두 클래스 기반 (PC + 모바일 통합 반응형)
   - 기본 디자인은 모바일 우선, PC 는 미디어쿼리로 큰 폭 적용
   - form name/id/value 와 제출 흐름은 영향 없음
   ========================================================================== */

/* ===== 페이지 컨테이너 ===== */
.rv-page {
    width: 100%;
    max-width: 950px;
    margin: 0 auto 60px auto;
    padding: 16px 12px;
    box-sizing: border-box;
    color: #333;
    font-family: 'Nanum Gothic', '맑은 고딕', AppleGothic, sans-serif;
}
.rv-page .rv-part {
    margin-bottom: 16px;
}
.rv-page .rv-ctitle {
    width: 100%;
    max-width: 100%;
    padding: 0 0 12px 0;
    border-bottom: 2px solid #ff7a00;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.rv-page .ctitle1 {
    float: none;
    text-indent: 0;
    font-size: 22px;
    font-weight: 700;
    color: #444;
    padding-bottom: 4px;
    letter-spacing: 1px;
}
.rv-page .ctitle2 {
    float: none;
    clear: both;
}
.rv-page .ctitle2 p {
    text-align: left;
    font-size: 12px;
    color: #777;
    margin: 4px 0 0 0;
}
.rv-page .ctitle2 p a {
    color: #555;
    text-decoration: none;
}
.rv-orderpage {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== 폼 wrapper ===== */
.rv-form {
    width: 100%;
    box-sizing: border-box;
}
.rv-form .rv-card {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
.rv-form .rv-card-title {
    margin: 0 0 14px 0;
    padding: 0 0 10px 0;
    font-size: 16px;
    font-weight: 700;
    color: #2b3a55;
    border-bottom: 1px solid #e3eaf3;
    letter-spacing: 0.5px;
}

/* ===== 폼 행 (라벨 + 입력) ===== */
.rv-form .rv-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 0 12px 0;
    gap: 8px;
}
.rv-form .rv-row:last-child {
    margin-bottom: 0;
}
.rv-form .rv-row-vertical {
    flex-direction: column;
    align-items: stretch;
}
.rv-form .rv-row-admin {
    background: #fff8e1;
    border-radius: 4px;
    padding: 6px 8px;
    margin-left: -8px;
    margin-right: -8px;
}
.rv-form .rv-label {
    flex: 0 0 110px;
    font-size: 14px;
    font-weight: 600;
    color: #45556c;
    padding-top: 10px;
    word-break: keep-all;
    line-height: 1.4;
}
.rv-form .rv-label-admin {
    color: #b26500;
}
.rv-form .rv-required {
    color: #c62828;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
}
.rv-form .rv-input-wrap {
    flex: 1 1 220px;
    min-width: 0;
}

/* ===== 입력 필드 (input/select/textarea) — class .rv-input ===== */
.rv-form .rv-input {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.4;
    color: #2b3a55;
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.rv-form .rv-input:focus {
    border-color: #ff7a00;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
}
.rv-form select.rv-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
    padding-right: 32px;
}
.rv-form .rv-textarea {
    min-height: 110px;
    font-family: inherit;
    resize: vertical;
}
.rv-form .rv-hint {
    display: block;
    font-size: 12px;
    color: #8a99ac;
    margin-top: 4px;
    line-height: 1.4;
}

/* ===== 전자우편 grid ===== */
.rv-form .rv-email-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    align-items: center;
}
.rv-form .rv-email-id    { grid-column: 1 / 2; grid-row: 1 / 2; }
.rv-form .rv-email-at    { grid-column: 2 / 3; grid-row: 1 / 2; text-align: center; color: #666; padding: 0 4px; font-weight: 600; }
.rv-form .rv-email-domain{ grid-column: 3 / 4; grid-row: 1 / 2; }
.rv-form .rv-email-select{ grid-column: 1 / 4; grid-row: 2 / 3; }

/* ===== 라디오 / 체크박스 ===== */
.rv-form .rv-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.rv-form .rv-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #45556c;
    padding: 6px 4px;
}
.rv-form .rv-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #ff7a00;
}
.rv-form .rv-driver-age {
    margin-top: 10px;
    padding: 10px;
    background: #fffaf0;
    border: 1px solid #ffd591;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.rv-form .rv-driver-age-label {
    font-weight: 700;
    color: #d46b08;
}
.rv-form .rv-age-input {
    width: 140px !important;
    flex: 0 0 140px;
    text-align: right;
    font-weight: 700;
    border-color: #ffa940 !important;
}

/* ===== 예약접수하기 버튼 ===== */
.rv-form .rv-submit-wrap {
    margin: 24px 0 16px 0;
    text-align: center;
}
.rv-form .rv-submit-btn {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 8px;
    color: #fff;
    background: linear-gradient(180deg, #ff8a1a 0%, #ff7a00 100%);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 122, 0, 0.25);
    transition: transform 0.05s, box-shadow 0.15s;
}
.rv-form .rv-submit-btn:hover {
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.35);
}
.rv-form .rv-submit-btn:active {
    transform: translateY(1px);
}

/* ===== 안내 문구 ===== */
.rv-form .rv-notices {
    margin: 16px 0;
    padding: 12px 14px;
    background: #f7faff;
    border-left: 3px solid #5b8fdb;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.7;
    color: #4a5a73;
}
.rv-form .rv-notices p {
    margin: 4px 0;
}
.rv-form .rv-notice-icon {
    color: #ff7a00;
    font-weight: 700;
    margin-right: 4px;
}
.rv-form .rv-notice-pending {
    color: #2e7d32;
    font-weight: 700;
}
.rv-form .rv-notice-pending-admin {
    color: #fff;
    background: #c62828;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
}

/* ===== hidden 영역 ===== */
.rv-form .rv-hidden {
    display: contents;
}
.rv-form .rv-hidden input[type="hidden"] {
    display: none;
}

/* ===== 개인정보 동의 ===== */
.rv-form .rv-privacy-card {
    background: #fafbfd;
}
.rv-form .rv-privacy-box {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid #d9e2ec;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    line-height: 1.7;
    box-sizing: border-box;
}
.rv-form .rv-privacy-section {
    margin-bottom: 8px;
}
.rv-form .rv-privacy-box hr {
    border: 0;
    border-top: 1px dashed #ddd;
    margin: 8px 0;
}
.rv-form .rv-accept {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: #ecf6e8;
    border: 1px solid #b6d8a4;
    border-radius: 4px;
    font-size: 14px;
    color: #2b5210;
    cursor: pointer;
}
.rv-form .rv-accept input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #4caf50;
}

/* ===== 상품 정보 (.rv-product-info td) ===== */
.rv-orderpage .rv-product-info {
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 10px !important;
    color: #2b3a55 !important;
    word-break: keep-all;
}
.rv-orderpage .rv-product-info a {
    color: #2b3a55;
    text-decoration: none;
    font-weight: 600;
}
.rv-orderpage .mobilefont1 {
    font-size: 14px !important;
    padding: 8px !important;
}

/* ===== 관리자 고정 사이드 박스 (jejusea position:fixed 영역) ===== */
.rv-page div[style*="position: fixed"][style*="margin-left: 860px"] {
    /* PC 1280px+ 에서만 사이드 고정. 모바일에서는 미디어쿼리에서 무력화 */
}

/* ==========================================================================
   PC 디자인 (721px 이상) - 라벨 좁게, 입력 옆에
   ========================================================================== */
@media (min-width: 721px) {
    .rv-page {
        padding: 24px 16px;
    }
    .rv-form .rv-card {
        padding: 20px 24px;
    }
    .rv-form .rv-row {
        flex-wrap: nowrap;
        align-items: center;
    }
    .rv-form .rv-row-vertical {
        flex-wrap: wrap;
    }
    .rv-form .rv-label {
        flex: 0 0 140px;
        padding-top: 10px;
    }
    .rv-form .rv-email-grid {
        grid-template-columns: 1fr auto 1fr 180px;
        grid-template-rows: auto;
    }
    .rv-form .rv-email-id    { grid-column: 1 / 2; grid-row: 1; }
    .rv-form .rv-email-at    { grid-column: 2 / 3; grid-row: 1; }
    .rv-form .rv-email-domain{ grid-column: 3 / 4; grid-row: 1; }
    .rv-form .rv-email-select{ grid-column: 4 / 5; grid-row: 1; }
}

/* ==========================================================================
   모바일 (720px 이하) - 컨테이너 폭 조정 및 사이드 박스 무력화
   ========================================================================== */
@media (max-width: 720px) {
    .rv-page {
        padding: 56px 8px 0 8px !important;  /* 모바일 햄버거 헤더 회피 */
        margin-bottom: 60px !important;
    }
    .rv-form .rv-card {
        padding: 14px 12px;
        margin-bottom: 10px;
    }
    .rv-form .rv-card-title {
        font-size: 15px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .rv-form .rv-row {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 14px;
    }
    .rv-form .rv-label {
        flex: 0 0 auto;
        padding-top: 0;
        font-size: 13px;
    }
    .rv-form .rv-input-wrap {
        flex: 1 1 100%;
        width: 100%;
    }
    .rv-form .rv-input {
        font-size: 16px;        /* iOS 자동줌 방지 */
    }
    .rv-form .rv-submit-btn {
        font-size: 16px;
        letter-spacing: 4px;
        padding: 14px 0;
    }
    .rv-form .rv-notices {
        font-size: 12px;
        line-height: 1.6;
        padding: 10px 12px;
    }
    .rv-form .rv-notice-pending-admin {
        font-size: 13px;
    }
    /* 관리자 사이드 고정 박스 - 모바일에선 흐름에 풀어둠 */
    .rv-page div[style*="position: fixed"][style*="margin-left: 860px"] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 12px 0 !important;
        padding: 10px !important;
        z-index: auto !important;
    }
    .rv-page div[style*="position: fixed"][style*="margin-left: 860px"] input[type="button"] {
        width: 100% !important;
        height: 50px !important;
        margin: 0 !important;
        font-size: 16px !important;
    }
    /* 상품 정보 */
    .rv-orderpage .rv-product-info {
        font-size: 13px !important;
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .rv-form .rv-driver-age {
        flex-direction: column;
        align-items: stretch;
    }
    .rv-form .rv-age-input {
        width: 100% !important;
        flex: 1 1 100%;
    }
    .rv-form .rv-email-grid {
        grid-template-columns: 1fr 24px 1fr;
    }
}

@media (max-width: 360px) {
    .rv-form .rv-card {
        padding: 12px 10px;
    }
    .rv-form .rv-input {
        padding: 9px 10px;
        font-size: 15px;
    }
    .rv-form .rv-submit-btn {
        font-size: 15px;
        letter-spacing: 2px;
    }
}

/* ==========================================================================
   2026-04-28 - tours/tour/proc_tourreser.html (예약접수 완료 페이지) 디자인
   - .ptr-* 클래스 기반 (PC + 모바일 통합 반응형)
   - 공유 파일(reserguide.php / reserprice.php / orderdocu.php) 마크업 변경 없음
   - 후손 셀렉터로 안의 인라인 스타일 override
   ========================================================================== */

/* ===== 페이지 컨테이너 ===== */
.ptr-conpage {
    width: 100%;
    box-sizing: border-box;
}
.ptr-conbox {
    width: 100% !important;       /* sub.css 의 1224px 강제 무력화 */
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ptr-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    box-sizing: border-box;
    color: #2b3a55;
    font-family: 'Nanum Gothic', '맑은 고딕', AppleGothic, sans-serif;
}

/* ===== Hero (체크 아이콘 + 메시지) ===== */
.ptr-hero {
    text-align: center;
    padding: 32px 12px 28px;
    margin-bottom: 16px;
    background: linear-gradient(180deg, #fff8f0 0%, #fff 100%);
    border-radius: 12px;
    border: 1px solid #ffd9b3;
}
.ptr-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    margin: 0 auto 14px;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
}
.ptr-hero-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 800;
    color: #2b3a55;
    letter-spacing: 1px;
}
.ptr-hero-sub {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #6b7a90;
    line-height: 1.6;
}
.ptr-breadcrumb {
    margin-top: 8px;
    font-size: 12px;
    color: #8a99ac;
}
.ptr-breadcrumb a {
    color: #6b7a90;
    text-decoration: none;
}
.ptr-breadcrumb a:hover { color: #ff7a00; }
.ptr-breadcrumb span { margin: 0 4px; color: #c5d0db; }
.ptr-breadcrumb strong { color: #ff7a00; }

/* ===== 카드 ===== */
.ptr-card {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    padding: 20px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    box-sizing: border-box;
    overflow-x: auto;
}
.ptr-card-title {
    margin: 0 0 14px 0;
    padding: 0 0 10px 0;
    font-size: 16px;
    font-weight: 700;
    color: #2b3a55;
    border-bottom: 2px solid #ff7a00;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== 안내 카드 (reserguide.php 출력 override) ===== */
.ptr-guide-card p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    padding: 4px 0 !important;
    margin: 6px 0 !important;
    background: none !important;
    color: #45556c !important;
    text-align: left !important;
    font-weight: normal !important;
}
/* "예약접수완료" 큰 제목은 hero 와 중복이므로 작게 */
.ptr-guide-card p[style*="font-size:20px"] {
    font-size: 13px !important;
    color: #8a99ac !important;
    text-align: center !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* 빨간 띠 → 좌측 보더 강조 박스 */
.ptr-guide-card p[style*="FF3300"],
.ptr-guide-card p[style*="ff3300"] {
    background: #fff5f5 !important;
    border-left: 4px solid #e53935 !important;
    color: #c62828 !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-align: left !important;
}
/* "예약해주셔서 감사드립니다" 끝 인사 */
.ptr-guide-card p[style*="font-size:17px"] {
    font-size: 14px !important;
    color: #ff7a00 !important;
    text-align: center !important;
    font-weight: 700 !important;
    margin: 14px 0 0 0 !important;
}
.ptr-guide-card a {
    color: #ff7a00 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* ===== 상품 카드 (reserprice.php / orderdocu.php override) ===== */
.ptr-product-card table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    font-size: 13px;
}
.ptr-product-card table[width="800"],
.ptr-product-card table[width="600"] {
    width: 100% !important;
}
.ptr-product-card table td {
    padding: 8px 6px !important;
    word-break: break-word;
    box-sizing: border-box;
    line-height: 1.5;
}
.ptr-product-card table td[bgcolor="#dbf2fa"],
.ptr-product-card table td[bgcolor="#dbf2fb"],
.ptr-product-card table td[bgcolor="#e3f6fc"] {
    background: #f0f7fc !important;
    color: #45556c !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}
.ptr-product-card center {
    display: block;
    text-align: center;
}
.ptr-product-card .mobilefont,
.ptr-product-card .mobilefont1,
.ptr-product-card .rv-product-info {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #2b3a55 !important;
    padding: 8px !important;
    word-break: break-word !important;
}
.ptr-product-card .rv-product-info a {
    color: #2b3a55 !important;
    text-decoration: none;
    font-weight: 700;
}
.ptr-product-card .tprice,
.ptr-product-card .tprice1 {
    float: none !important;
    display: inline-block !important;
}
/* "강아지 동반 함" 같은 단순 echo 텍스트 */
.ptr-product-card > div:not([class]),
.ptr-product-card > p:not([class]) {
    padding: 6px 0;
    font-size: 13px;
    color: #6b7a90;
}

/* ===== 다음 행동 버튼 ===== */
.ptr-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 24px 0;
    flex-wrap: wrap;
}
.ptr-btn {
    flex: 1 1 auto;
    max-width: 200px;
    min-width: 140px;
    display: inline-block;
    padding: 14px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.05s, box-shadow 0.15s;
    cursor: pointer;
}
.ptr-btn-primary {
    background: linear-gradient(180deg, #ff8a1a 0%, #ff7a00 100%);
    color: #fff;
    border: 2px solid #ff7a00;
    box-shadow: 0 2px 6px rgba(255, 122, 0, 0.25);
}
.ptr-btn-primary:hover {
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.35);
}
.ptr-btn-outline {
    background: #fff;
    color: #ff7a00;
    border: 2px solid #ff7a00;
}
.ptr-btn-outline:hover {
    background: #fff5eb;
}
.ptr-btn:active {
    transform: translateY(1px);
}

/* ===== 모바일 (720px 이하) ===== */
@media (max-width: 720px) {
    .ptr-page {
        padding: 56px 8px 32px 8px;   /* 모바일 헤더 회피 */
        max-width: 100%;
    }
    .ptr-hero {
        padding: 24px 10px 20px;
        border-radius: 10px;
    }
    .ptr-hero-icon {
        width: 56px;
        height: 56px;
        font-size: 30px;
        margin-bottom: 12px;
    }
    .ptr-hero-title {
        font-size: 20px;
    }
    .ptr-hero-sub {
        font-size: 13px;
    }
    .ptr-breadcrumb {
        font-size: 11px;
    }
    .ptr-card {
        padding: 14px 12px;
    }
    .ptr-card-title {
        font-size: 15px;
    }
    .ptr-product-card table {
        font-size: 12px;
    }
    .ptr-product-card table td {
        padding: 6px 4px !important;
    }
    .ptr-product-card .mobilefont,
    .ptr-product-card .mobilefont1,
    .ptr-product-card .rv-product-info {
        font-size: 13px !important;
        padding: 6px !important;
    }
    .ptr-actions {
        gap: 8px;
        margin: 18px 0;
    }
    .ptr-btn {
        font-size: 14px;
        padding: 12px 16px;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .ptr-page {
        padding: 56px 6px 24px 6px;
    }
    .ptr-hero {
        padding: 20px 8px 16px;
    }
    .ptr-hero-title {
        font-size: 18px;
    }
    .ptr-hero-icon {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
    .ptr-card {
        padding: 12px 10px;
    }
    .ptr-product-card .rv-product-info {
        font-size: 12px !important;
    }
    .ptr-actions {
        flex-direction: column;
    }
    .ptr-btn {
        max-width: 100%;
        width: 100%;
    }
}