@charset "UTF-8";

/* 태블릿(~1024px, 아이패드/갤럭시탭 등) 및 가로모드 터치 기기 반응형 규칙 모음.
   pc_layout.css 로드 이후에 적용되어야 하며, 기본(PC) 상태는 pc_layout.css에 그대로 둔다.

   이 파일은 성격이 다른 두 조건을 목적에 따라 나눠 쓴다 :
   - (max-width:1024px) OR (hover:none)+(pointer:coarse) : "화면이 좁다" 또는 "터치 기기다"
     둘 중 하나만 맞아도 같은 압축 UI(오프캔버스 사이드바, 상단바, 탭 전환)를 써야 하는
     구조적 변경 → SECTION 1
   - (hover:none)+(pointer:coarse) 단독 : 폭과 무관하게 "터치 기기인지"를 반드시 구분해야
     하는 경우 (가로모드 대형 태블릿은 1024px를 넘어도 터치 UI를 유지해야 함) → SECTION 2
   - (max-width:...) 단독 : 터치 여부와 무관하게 "폭이 좁아서" 콘텐츠를 스택/축소해야 하는
     경우 (PC에서 브라우저 창을 좁게 줄여도 동일 적용) → SECTION 3 */

/* ======================================================================
   SECTION 1. 구조 전환 : 화면이 좁거나(≤1024px) 터치 기기면 공통 적용
   사이드바 오프캔버스화, 상단 퀵바, 탭 그룹 변환 등 레이아웃 골격이 바뀌는 규칙
   ====================================================================== */
@media screen and (max-width: 1024px),
screen and (hover: none) and (pointer: coarse) {
    .main_quick_nav_card {
        display: block !important;
    }

    #wrap left {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        /* #wrap과 동일하게 JS 실측값(--app-height) 사용, 지원 전 폴백은 svh */
        height: 100svh;
        height: calc(var(--app-height, 100svh));
        flex-basis: 260px;
        width: 260px;
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .15);
        /* iPad 등 터치 기기에서 세로 스크롤 중 iOS 특유의 좌우 바운스(elastic scroll)까지
           반응해 메뉴가 좌우로 밀리는 것처럼 보이는 문제 방지 → 세로 방향만 허용 */
        overflow-x: hidden;
        overscroll-behavior-x: none;
        touch-action: pan-y;
    }

    #wrap.sidebar-open left {
        transform: translateX(0);
    }

    /* PC에서는 left가 고정 높이가 아니라서 자식(.left_menu_wrap)의 flex:1이 부모를
       그대로 늘려 결과적으로 left 전체가 통스크롤됐지만, 태블릿은 left가
       height:100svh로 고정되어 flex:1인 .left_menu_wrap이 남는 공간만큼 눌려
       그 안에서만 좁게 스크롤됨 → flex/overflow를 풀어서 left 전체가 통스크롤되게 함 */
    #wrap left .left_menu_wrap {
        flex: none;
        overflow-y: visible;
    }

    #container {
        width: 100%;
    }

    .tablet_topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem .75rem;
        padding: .6rem 1rem;
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        position: sticky;
        top: 0;
        z-index: 900;
        transition: padding .15s ease;
        transform: translateZ(0);
    }

    /* 스크롤 내리면 최상단 헤더(.tablet_topbar)는 완전히 숨기고, .content-sticky-top(제목
       영역, 이미 position:sticky;top:0)이 유일한 헤더 역할을 함. 상단바에 있던 햄버거
       메뉴는 .content-sticky-top 쪽에 별도로 추가된 .sidebar_menu_toggle 버튼(이벤트
       위임이라 클래스만 같으면 그대로 동작)이 대신함. 탭바/상품설정의 top 오프셋도
       content-sticky-top 높이만큼만 내려오면 되도록 조정 (topbar가 사라졌으니 그만큼 당겨짐) */
    #wrap.is-collapsed .tablet_topbar {
        display: none;
    }

    /* .content-sticky-top-menu-toggle 기본 숨김(display:none)은 pc_layout.css에 있고,
       바로 아래 .sidebar_menu_toggle 박스 스타일(display:flex)과 이 선택자가 specificity가
       같아서(각 0,1,0,0) 파일 로드 순서에 따라 승패가 갈리는 문제가 있었음 → 기본 숨김
       쪽 선택자를 .sidebar_menu_toggle.content-sticky-top-menu-toggle로 더 구체화해서
       (0,2,0,0) 순서와 무관하게 항상 이기도록 고정. 이 규칙은 그보다 더 구체적인
       #wrap.is-collapsed 조합(1,2,0,0)이라 순서에 상관없이 항상 우선함 */
    #wrap.is-collapsed .content-sticky-top-menu-toggle {
        display: flex;
        margin-left: .6rem;
    }

    #wrap.is-collapsed .tab_group .tab_bar {
        top: 3.3rem !important;
    }

    #wrap.is-collapsed .tab_group .tab_content>.tab_row:first-child {
        top: 8rem;
    }

    /* 태블릿에서는 사이드바가 오프캔버스로 숨어있어 로고(브랜드)가 안 보이는 문제 :
       상단바에 로고를 노출해 첫 진입 시에도 무슨 서비스인지 알 수 있게 함 */
    .tablet_topbar_logo {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    .tablet_topbar_logo img {
        height: 24px;
        width: auto;
    }

    .sidebar_menu_toggle {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 36px;
        height: 36px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .1);
        border-radius: 8px;
        cursor: pointer;
    }

    .sidebar_menu_toggle>span {
        display: block;
        width: 16px;
        height: 2px;
        background: #333;
        border-radius: 1px;
    }

    .tablet_topbar_actions {
        display: flex;
        align-items: center;
        gap: .4rem;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .tablet_topbar_actions a,
    .tablet_topbar_actions button {
        flex: 0 0 auto;
        padding: .4rem .8rem;
        border-radius: 20px;
        border: 1px solid rgba(0, 0, 0, .1);
        background: #fff;
        color: #333;
        font-size: .8rem;
        white-space: nowrap;
        cursor: pointer;
    }

    .tablet_topbar_actions a.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }

    .tablet_topbar_actions a.mode-dot {
        position: relative;
        padding-right: 1.2rem;
    }

    .tablet_topbar_actions a.mode-dot::after {
        content: '';
        position: absolute;
        top: 4px;
        right: 4px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
        border: 1px solid #fff;
    }

    .sidebar_overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, .4);
    }

    #wrap.sidebar-open .sidebar_overlay {
        display: block;
    }

    .quick_link_row {
        display: none !important;
    }

    .main-row {
        margin-bottom: 0.75rem !important;
    }

    .main-row>div {
        height: 100%;
        gap: .75rem !important;
    }

    .main2-row {
        flex-direction: column;
        gap: .75rem !important;
    }

    /* Bootstrap 그리드는 992px부터 col-lg-* 폭(25%/50% 등)을 적용하는데,
       사이드바/햄버거 전환 기준(1024px)과 어긋나 992~1024px 구간에서만
       좁은 열로 보이는 문제가 있어 이 구간도 전체 폭으로 강제 통일.
       .row 하위(마이페이지 등 일반 화면)까지 포함해 col-lg-* 열은
       태블릿에서 전부 세로 스택으로 표시 */
    /* 운용/금융리스, 할부 등 차량 정보 설정 화면(.calc_wrap .top-col, 4단 25% 배치)은
       태블릿에서 폭에 따라 1~2단으로 유동적으로 배치 (100% 고정 스택시 입력창이 과하게 늘어져 보임) */
    /* minmax(410px,1fr)만 쓰면 1300px대 폭에서 3열까지 들어가버려 4번째(통합계산) 카드만
       다음 줄에 혼자 남아 풀폭으로 늘어나는 문제(3열+1열) 발생 → 컬럼 최소폭을
       "410px 또는 컨테이너 45% 중 큰 값"으로 잡아 3열이 못 들어가게 해서 항상 최대 2열(2+2) 유지 */
    .calc_wrap {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(max(410px, 45%), 1fr)) !important;
    }

    .calc_wrap .top-col {
        flex: none !important;
        max-width: none !important;
        height: 100% !important;
    }

    /* 현금은 통합계산 카드가 없어 calc_wrap 카드가 3개뿐 → 위 45% 기준(최대 2열)을 적용하면
       2열+1열로 어색해짐. 3개는 짝수로 나눌 수 없으니 "2열" 상태 자체를 건너뛰고
       기본은 1열 스택, 폭이 충분한 가로모드(1200px+ 터치)에서만 3열로 전환 (SECTION 2 참고) */
    .calc_wrap:has(.top-col.cash) {
        grid-template-columns: 1fr !important;
    }

    .main-row>[class*="col-lg-"],
    .main2-row>[class*="col-lg-"],
    .row>[class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 전기차보조금/대출모집인 퀵링크는 태블릿에서 맨 위 바로가기 옆으로 옮겨서 보여주므로
       (.quick_link_row_top), 원래 위치(제공 금융사 카드 하단)의 것은 숨겨 중복 노출을 막음 */
    .main-row>.col-lg-6.d-flex.flex-column>.quick_link_row {
        display: none !important;
    }

    /* 맨 위 줄 : 바로가기(넓게) + 전기차보조금/대출모집인 퀵링크(좁게, 세로 2단)를
       위 100% 스택 규칙과 달리 나란히 2열로 배치 */
    .main-row>.col-lg-8:has(.main_quick_nav_card) {
        flex: 2 1 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    /* 할부 수수료 TOP3 / 제공 금융사 : 위 100% 스택 규칙 대신 8:4(2:1) 비율로 나란히 배치 */
    .main-row>.col-lg-6:not(.d-flex) {
        flex: 2 1 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    .main-row>.col-lg-6.d-flex.flex-column {
        flex: 1 1 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    /* .quick_link_row_top 하나만으로는 .main-row > [class*="col-lg-"] 100% 스택 규칙(specificity
       0,2,0)보다 낮아(0,1,0) 밀리므로, col-lg-4까지 같이 명시해 우선순위를 맞춤 */
    .main-row>.col-lg-4.quick_link_row_top {
        display: flex !important;
        flex-direction: column !important;
        row-gap: .75rem !important;
        flex: 1 1 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    /* 내 견적조건/내 견적함 대시보드 : 위 100% 스택 규칙 대신 두 카드는 한 줄에 나란히(원래
       col-3:col-6 비율인 1:2 유지), 공지사항만 그 아래 별도 줄에 전체 폭으로 배치.
       col-lg-*는 자체 좌우 padding(.75rem)이 이미 있어 여기에 column-gap(.75rem)까지 더하면
       카드 사이 간격이 2배 가까이 벌어져 보임 → column-gap은 0으로, 줄바꿈 간격(row-gap)만 유지 */
    .main2-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        column-gap: 0 !important;
        row-gap: .75rem !important;
    }

    .main-row>[class*="col-lg-"]:nth-child(2) {
        padding-left: 0 !important;
    }

    /* 내 견적 조건/내 견적함/공지사항 전용 배치 : 하단 설명 이미지(dashboard_1~4.png)도
       같은 .main2-row 구조(img.col-lg-6 2개)를 쓰기 때문에, div로 한정하지 않으면
       이미지에도 max-width:none이 걸려 원본 크기만큼 가로로 넘쳐버림 */
    .main2-row>div[class*="col-lg-"]:nth-child(1) {
        flex: 1 1 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    .main2-row>div[class*="col-lg-"]:nth-child(2) {
        flex: 2 1 0 !important;
        max-width: none !important;
        width: auto !important;
        padding-left: 0;
    }

    .main2-row>div[class*="col-lg-"]:nth-child(3) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 현금 견적(고객정보설정 + 견적서)처럼 탭 없이 2개 영역만 있는 화면 :
       위 규칙(100% 강제 스택)을 덮어써서 tab_content와 동일한 "여유 있으면 나란히,
       480px 밑으로 좁아지면 자동 스택" 동작 적용. 견적서 영역이 원래 col-lg-8이라
       더 넓게(flex:2) 배분 */
    .adaptive_row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: .5rem;
        margin: 0 20px !important;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 10px;
        padding: .75rem;
    }

    .adaptive_row>[class*="col-lg-4"] {
        flex: 1 1 480px !important;
        max-width: none !important;
        width: auto !important;
    }

    .adaptive_row>[class*="col-lg-8"] {
        flex: 2 1 480px !important;
        max-width: none !important;
        width: auto !important;
    }

    /* 브랜드/모델 선택 레이어 팝업(.dropdown-content)이 고정 952px라 화면 밖으로 넘치는 문제 :
       트리거 폭에 맞추면 너무 좁아지므로, 화면 하단에 전체 폭으로 붙는 바텀시트 형태로 변경
       (마크업에 이미 있는 .sheet-header .btn-close 닫기 버튼 그대로 재사용) */
    .dropdown-content {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70dvh !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 1060 !important;
    }

    /* 바텀시트가 열려있을 때 배경 어둡게 */
    #wrap:has(.dropdown-content.show)::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1050;
    }

    /* 모델/세부모델 등 바텀시트가 열려있을 때 뒷화면(페이지 본문)이 같이 스크롤되는 문제 :
       실제 스크롤 주체가 body인지 #content인지 확실하지 않아 둘 다 잠금.
       바텀시트 내부(.dropdown-content)는 자체 overflow-y로 스크롤되므로 영향 없음 */
    body:has(.dropdown-content.show),
    #content:has(.dropdown-content.show) {
        overflow: hidden !important;
    }

    .option-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .option-grid.seven-columns {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .color-list ul.option-grid,
    .options-list ul.option-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 색상/옵션 수기입력란(.input-grid)은 위의 2열/3열 강제 규칙 때문에 화면 가로에
       꽉 안 차고 절반/1/3 폭으로 쪼그라들던 문제 : 다른 규칙보다 우선하도록
       클래스를 더 명시해서 항상 1열(전체 폭)로 되돌림 */
    .color-list ul.option-grid.input-grid,
    .options-list ul.option-grid.input-grid,
    .option-grid.input-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .main-row>.col-lg-3:not(.d-flex)>.card,
    .main-row>.col-lg-4:not(.d-flex)>.card,
    .main-row>.col-lg-6:not(.d-flex)>.card,
    .main-row>.col-lg-8:not(.d-flex)>.card,
    .main-row>.col-lg-12:not(.d-flex)>.card {
        height: auto;
    }

    .tab_group {
        margin: 0 20px;
    }

    /* 상품설정1,2,3 / 견적결과1,2,3 탭 전환 : 라디오 상태에 따라 두 .tab_row(설정/결과)의
       같은 data-tab만 동시에 노출 (하나의 탭 그룹으로 묶어서 연동) */
    /* .tablet_topbar(top:0, sticky) 바로 아래에 탭바도 고정 : 스크롤해도 상품 1/2/3 전환이
       계속 눈에 보이게 함. 아래 top 오프셋은 topbar 높이 기준 추정치라 실제로 겹치거나
       뜨는 간격이 보이면 조정 필요 */
    .tab_group .tab_bar {
        display: flex;
        gap: .5rem;
        margin: 0;
        position: sticky !important;
        top: 4.5rem;
        z-index: 800;
        background: #fff;
        padding: .35rem 0;
        transform: translateZ(0);
    }

    .tab_group .tab_label {
        flex: 1;
        text-align: center;
        padding: .6rem 0;
        border: 1px solid rgba(0, 0, 0, .1);
        border-radius: 8px;
        background: #f1f3f5;
        color: #333;
        cursor: pointer;
        margin: 0;
    }

    /* 상품설정/견적결과 두 .tab_row를 나란히 : 13인치 가로모드처럼 폭이 넉넉하면
       flex-wrap이 자동으로 반반 배치, 한쪽이 480px보다 좁아지면 자동으로 줄바꿈되어 세로 스택
       (뷰포트 폭이 아닌 실제 렌더링 폭 기준이라 별도 브레이크포인트 불필요) */
    .tab_group .tab_content {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .5rem;
    }

    /* 1024px(iPad 세로모드 등)에서도 상품설정+견적결과가 가로로 나오게 하기 위해
       최소폭을 480px→440px로 낮춤. 1024px 뷰포트에서 tab_group 좌우 margin(20px*2),
       tab_content 좌우 padding(.75rem*2), 두 tab_row 사이 gap(.5rem)을 빼면
       실사용 가능폭이 약 952px(카드당 476px)라 440px면 여유 있게 2단으로 들어감 */
    .tab_group .tab_content>.tab_row {
        flex: 1 1 440px;
        min-width: 440px;
        margin: 0 !important;
    }

    .tab_group .tab_row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .tab_group .tab_panel {
        display: none;
    }

    /* ID(ol_tab_1 등)이 아닌 data-tab 값으로 매칭 : 운용/금융/할부/장기렌트 등
       탭 라디오 name/id 접두어가 페이지마다 달라도 동일 규칙 하나로 전부 커버 */
    .tab_group .tab_radio[data-tab="1"]:checked~.tab_bar .tab_label[data-tab="1"],
    .tab_group .tab_radio[data-tab="2"]:checked~.tab_bar .tab_label[data-tab="2"],
    .tab_group .tab_radio[data-tab="3"]:checked~.tab_bar .tab_label[data-tab="3"] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }

    .tab_group .tab_radio[data-tab="1"]:checked~.tab_content .tab_row .tab_panel[data-tab="1"],
    .tab_group .tab_radio[data-tab="2"]:checked~.tab_content .tab_row .tab_panel[data-tab="2"],
    .tab_group .tab_radio[data-tab="3"]:checked~.tab_content .tab_row .tab_panel[data-tab="3"] {
        display: block;
        padding: 0 !important;
    }

    /* "폴더" 스타일 시험 적용 (운용리스만 tab_group--folder 부여, 확인 후 다른 페이지도 적용 예정) :
       탭이 내용물 위 뚜껑처럼 붙어보이도록 탭 바닥 테두리를 없애고 -1px 겹쳐서 내용 박스 상단 테두리와 이어붙임.
       활성 탭만 내용 박스와 같은 흰 배경을 줘서 하나로 연결된 것처럼 보이게 처리 */
    .tab_group--folder .tab_bar {
        gap: 2px;
        margin-bottom: -1px;
        position: relative;
        z-index: 2;
    }

    .tab_group--folder .tab_label {
        border: 1px solid rgba(0, 0, 0, .08);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        background: #eef1f4;
        color: #888;
        font-weight: 500;
    }

    .tab_group--folder .tab_label:hover {
        background: #e4e7eb;
    }

    .tab_group--folder .tab_content {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 0 0 10px 10px;
        padding: .75rem;
        position: relative;
        z-index: 1;
    }

    .tab_group--folder .tab_radio[data-tab="1"]:checked~.tab_bar .tab_label[data-tab="1"],
    .tab_group--folder .tab_radio[data-tab="2"]:checked~.tab_bar .tab_label[data-tab="2"],
    .tab_group--folder .tab_radio[data-tab="3"]:checked~.tab_bar .tab_label[data-tab="3"] {
        background: #fff;
        color: var(--primary-color);
        border-color: rgba(0, 0, 0, .08);
        font-weight: 700;
    }

    /* 견적서 보기 이미지 크기 조절 */
    .estimate_wrap a:has(img) {
        width: 100% !important;
    }

    /* 레이어 팝업 컨테이너 */
    .layer-popup__container {
        max-height: 85vh !important;
    }

    .card-body {
        height: 100% !important;
    }

    /* 월 납입금 범위값 줄바꿈 (.lease-range-break 기본은 pc_layout.css에서 display:none) */
    .lease-range-break {
        display: inline;
    }
}

/* ======================================================================
   SECTION 2. 터치 전용 : 폭과 무관하게 터치 기기일 때만 적용
   가로모드 대형 태블릿(1024px 초과)에서도 유지되어야 하는 세부 보정
   ====================================================================== */

/* 현금 calc_wrap 3카드 : 터치+가로모드(1024px 이상 폭)에서 3열로 펼침. SECTION 1의
   1열 스택 강제(max-width:1024px)와 폭 기준을 맞춰 iPad mini/Air 등 흔한 태블릿의
   가로모드(1024~1180px대)에서도 3열로 전환되도록 함 ("2열" 상태는 거치지 않음) */
@media screen and (min-width:1024px) and (hover:none) and (pointer:coarse) {
    .calc_wrap:has(.top-col.cash) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* left(0)+width(100%)+right(PC 기본값 0)가 동시에 지정되면 과잉 제약(over-constrained)이 되어
   브라우저마다(특히 iPad 가로모드) 폭 계산이 어긋날 수 있음 → width 대신 left/right를
   둘 다 명시해서 폭이 애매하지 않게 간접 계산되도록 처리. 터치 기기 전용 버그 우회이므로
   폭 조건 없이 터치 여부로만 판단 */
@media screen and (hover:none) and (pointer:coarse) {
    .calc-footer {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }
}

/* ======================================================================
   SECTION 3. 폭 전용 : 터치 여부와 무관하게 화면(창) 폭이 좁을 때 적용
   PC에서 브라우저 창을 좁게 줄여도 동일하게 콘텐츠가 스택/축소되어야 함
   ====================================================================== */
@media screen and (max-width: 820px) {

    .color-list ul.option-grid,
    .options-list ul.option-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 할부 수수료 TOP3 / 제공 금융사 : 820px 이상에서는 8:4로 나란히 배치하지만,
       그보다 좁아지면 카드 내부가 짓눌리므로 세로 스택으로 되돌림 */
    .main-row>.col-lg-6:not(.d-flex),
    .main-row>.col-lg-6.d-flex.flex-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.75rem !important;
    }

    /* 바로가기 / 전기차보조금·대출모집인 퀵링크 : 마찬가지로 820px 이상에서는 나란히 배치하지만,
       그보다 좁아지면 세로 스택으로 되돌림 */
    .main-row>.col-lg-4.quick_link_row_top {
        flex-direction: row !important;
        padding-left: .75rem !important;
    }

    .main-row>.col-lg-8:has(.main_quick_nav_card) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .main-row>.col-lg-4.quick_link_row_top {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 내 견적함(.estimate_row) : row_title(140px)+row_car_info(유동)+row_est_info(480px)+row_process_btn(140px)이
   flex-wrap 없이 한 줄로 강제되어 있어, 가로(13인치 랜드스케이프 등 1024px+)에서는 폭이 넉넉해 괜찮지만
   세로모드처럼 1024px 이하로 좁아지면 4영역이 전부 flex-shrink로 짓눌려 표/이미지가 일그러짐.
   폭 자체가 좁을 때만 세로 스택으로 전환 (터치 여부와 무관 — 좁은 데스크탑 창에도 동일하게 적용) */
@media screen and (max-width:1024px) {

    /* row_title(140px 고정)+row_car_info(flex:1)는 그대로 두면 이 둘만으로 한 줄이 꽉 차서
       (140px + 나머지 전부) row_est_info/row_process_btn은 자동으로 다음 줄로 넘어감 →
       "제목+차량정보는 가로, 나머지는 세로" 구조가 flex-wrap만으로 자연스럽게 만들어짐.
       아래 !important는 이 파일(tablet_layout.css)이 pc_layout.css보다 나중에 로드되어
       순서상으로도 이미 이기지만, 로드 순서가 바뀌어도 안전하도록 유지 */
    .estimate_list .estimate_row {
        flex-wrap: wrap;
        row-gap: .35rem;
        border: none !important;
    }

    .estimate_list .estimate_row .row_est_info {
        background: #f5f5f5;
        border-radius: 8px;
        padding: .5rem;
    }

    .estimate_list .estimate_row .row_est_info,
    .estimate_list .estimate_row .row_process_btn {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .estimate_list .estimate_row .row_process_btn {
        flex-direction: row !important;
        justify-content: flex-end !important;
        column-gap: 10px;
    }

    /* 버튼이 글자 길이만큼만 잡혀서(견적 검토 요청 vs 삭제) 크기가 들쭉날쭉해 보이는 문제 :
       버튼끼리 동일한 폭을 나눠 갖도록 고정 */
    .estimate_list .estimate_row .row_process_btn button {
        flex: 1 1 0;
        min-width: 0;
    }

    /* 실적관리(.perf_row) : row_title(80px)+customer_info(120px)+row_car_info(flex:1)가
       이미 이 셋만으로 한 줄이 꽉 차므로 flex-wrap만 주면 row_est_info는 자동으로
       다음 줄(하단)로 넘어감. 항목별 구분선(.perf_row 자체 border-bottom)과 겹쳐 지저분해
       보이지 않도록, 상/하단 구분은 선 대신 옅은 배경색으로 표시
       row_est_info 내부 dl 6개도 좁아진 폭에서 그대로 욱여넣으면 뭉개지므로 wrap 허용 */
    .perf_list .perf_row {
        flex-wrap: wrap;
        row-gap: .75rem;
        border: none !important;
    }

    .perf_list .perf_row .row_est_info {
        flex-basis: 100% !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        padding: .5rem;
        border-radius: 8px;
        background: #f5f5f5;
    }

    .perf_list .perf_row .row_est_info dl {
        flex: 1 1 140px !important;
        min-width: 110px;
    }
}