/* ================================================================================
 * 47-v160-listing-app.css — Hi Car Match v160.1
 * 매물검색 페이지(views/pages/car-list.php) 전용 레이어.
 * --------------------------------------------------------------------------------
 * 두 가지만 담당한다.
 *   1. 엔카식 제조사 → 모델 드릴다운 레일 (.v160app-makers / .v160app-brand /
 *      .v160app-models / .v160app-seg / .v160app-ccpresets)
 *   2. 모바일 앱 레이어 — 고정 컴팩트 바, 정렬 바텀시트, 엣지 투 엣지 결과 행,
 *      스켈레톤, 눌림 피드백, 세이프 에어리어.
 *
 * 경계
 *   · 데스크톱 필터 레일/결과 골격은 42-v160-listing.css 가 소유한다. 여기서는
 *     .v160-pub-* 를 재정의하지 않고 새 .v160app-* 클래스만 정의한다.
 *     (예외: 42 가 정의하지 않는 자식 조합 몇 개는 명시적으로 주석을 달았다.)
 *   · 시트 껍데기(.v160-mob-sheet*)는 41-v160-mobile.css 소유. 여기서는 그 위에
 *     이 페이지에만 필요한 것만 얹는다.
 *   · 색/간격/모션은 전부 38-v160-foundation.css 토큰. 원시 색상값 없음.
 *
 * 브레이크포인트: mobile ≤640 / tablet ≤1024 / desktop ≥1025
 * ============================================================================== */


/* ================================================================================
 * 0. 페이지 스코프 변수
 * ============================================================================== */

:root {
    /* 고정 컴팩트 바가 붙는 위치. 헤더가 스크롤로 숨으면 0 으로 내려온다. */
    --v160app-bar-top: calc(var(--v160-mob-header-h, 56px) + var(--v160-mob-safe-t, 0px));
    --v160app-bar-h: 52px;
}

html.v160app-hd-off {
    --v160app-bar-top: var(--v160-mob-safe-t, 0px);
}


/* ================================================================================
 * 1. 제조사 → 모델 드릴다운 (모든 뷰포트 공통)
 * ============================================================================== */

/* --- 선택한 모델 칩 ---------------------------------------------------------- */
.v160app-picks {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-2);
    margin-block-end: var(--v160-space-3);
    padding: var(--v160-space-2) var(--v160-space-3);
    border: 1px solid var(--v160-accent-border);
    border-radius: var(--v160-r-md);
    background: var(--v160-accent-soft);
}
.v160app-picks__label {
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-accent);
}

/* --- 국산 / 수입 그룹 머리글 -------------------------------------------------- */
.v160app-group {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--v160-z-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v160-space-2);
    margin: 0;
    padding-block: var(--v160-space-2);
    padding-inline: var(--v160-space-1);
    border-block-end: 1px solid var(--v160-border);
    background: var(--v160-surface);
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-subtle);
    text-transform: uppercase;
}
.v160app-group__name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v160app-group__count {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--v160-text-placeholder);
}

.v160app-brand--all { border-block-end: 1px solid var(--v160-border); }

/* 선택된 제조사는 레일에서 즉시 눈에 띄어야 한다. */
.v160app-brand.is-open { background: var(--v160-accent-soft); }
.v160app-brand.is-open > .v160-pub-brand__row .v160-check-row__label {
    font-weight: 700;
    color: var(--v160-accent);
}

/* --- 모델 목록 (details/summary) --------------------------------------------- */
.v160app-models {
    margin-block-end: var(--v160-space-2);
    margin-inline-start: 28px;
}
.v160app-models__sum {
    display: inline-flex;
    align-items: center;
    gap: var(--v160-space-1);
    min-block-size: 28px;
    padding-inline: var(--v160-space-2);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-2xs);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}
.v160app-models__sum::-webkit-details-marker { display: none; }
.v160app-models__sum::marker { content: ""; }
.v160app-models__sum:hover { border-color: var(--v160-border-strong); color: var(--v160-text); }
.v160app-models__sum:focus-visible { outline: none; box-shadow: var(--v160-ring); }
.v160app-models__caret { transition: transform var(--v160-dur) var(--v160-ease); }
.v160app-models[open] > .v160app-models__sum .v160app-models__caret { transform: rotate(180deg); }

/* 42 의 .v160-pub-models 위에 스크롤 상한과 들여쓰기만 얹는다. */
.v160app-models__list {
    max-block-size: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-block-start: var(--v160-space-1);
    padding-inline-start: 0;
    scrollbar-width: thin;
}
.v160app-model { min-block-size: 32px; font-size: var(--v160-fs-sm); }

.v160app-hint {
    margin: var(--v160-space-2) 0 0;
    font-size: var(--v160-fs-2xs);
    line-height: var(--v160-lh-snug);
}


/* ================================================================================
 * 2. 변속기 세그먼트 (오토 / 수동) + 배기량 프리셋
 * ============================================================================== */

.v160app-seg {
    display: flex;
    gap: 2px;
    inline-size: 100%;
    padding: 3px;
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface-3);
}
.v160app-seg__item {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 34px;
    padding-inline: var(--v160-space-2);
    border-radius: var(--v160-r-sm);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease);
}
.v160app-seg__item:hover { color: var(--v160-text); }
.v160app-seg__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.v160app-seg__label {
    display: block;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v160app-seg__item.is-active {
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-1);
    color: var(--v160-accent);
    font-weight: 700;
}
/* JS 가 없어도 :checked 만으로 선택 상태가 보인다. */
.v160app-seg__input:checked ~ .v160app-seg__label {
    color: var(--v160-accent);
    font-weight: 700;
}
.v160app-seg__input:focus-visible ~ .v160app-seg__label {
    border-radius: var(--v160-r-xs);
    box-shadow: var(--v160-ring);
}

.v160app-ccpresets { margin-block-start: var(--v160-space-2); }
.v160app-ccpresets .v160-chip { cursor: pointer; }


/* ================================================================================
 * 3. 딜러 연동 컨텍스트 헤더 (?dealer_id=N)
 * ============================================================================== */

.v160app-dealer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-3);
    padding: var(--v160-space-4);
    border: 1px solid var(--v160-accent-border);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-1);
}
.v160app-dealer--unknown {
    border-color: var(--v160-warning-border);
    background: var(--v160-warning-soft);
}
.v160app-dealer__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--v160-r-md);
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
    font-size: var(--v160-fs-xl);
}
.v160app-dealer--unknown .v160app-dealer__mark {
    background: var(--v160-warning-soft);
    color: var(--v160-warning);
}
.v160app-dealer__main {
    flex: 1 1 260px;
    min-inline-size: 0;
}
.v160app-dealer__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-2);
    margin: 0;
    font-size: var(--v160-fs-lg);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    color: var(--v160-text);
}
.v160app-dealer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-1) var(--v160-space-4);
    margin: var(--v160-space-1) 0 0;
    font-size: var(--v160-fs-xs);
}
.v160app-dealer__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.v160app-dealer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-2);
    flex: 0 0 auto;
    margin-inline-start: auto;
}
.v160app-dealer__state { cursor: default; }


/* ================================================================================
 * 4. 결과 행의 판매자 연동
 * ============================================================================== */

/* 썸네일이 자기 그리드 트랙을 밀어내는 문제.
 * .v160-pub-row 는 align-items:stretch 라 미디어 칸이 본문 높이만큼 늘어나고,
 * aspect-ratio:4/3 가 그 높이로 폭을 되계산한다. 그리드 아이템 기본값
 * min-inline-size:auto 때문에 그 폭이 고정 트랙(232px/116px)을 넘어 삐져나온다.
 * → 42 소유자에게: .v160-pub-row__media 에 min-inline-size:0 / align-self:start 를
 *   넣으면 이 블록은 지울 수 있다. 여기서는 이 페이지 행에만 적용한다. */
.v160app-row .v160-pub-row__media {
    min-inline-size: 0;
    align-self: start;
}

.v160app-seller {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-inline-size: 0;
    max-inline-size: 100%;
}
.v160app-seller__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-inline-size: 180px;
    color: var(--v160-text-link);
    font-size: var(--v160-fs-2xs);
    font-weight: 600;
    text-decoration: none;
}
.v160app-seller__link span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v160app-seller__link:hover { text-decoration: underline; }
.v160app-seller__link:focus-visible {
    outline: none;
    border-radius: var(--v160-r-xs);
    box-shadow: var(--v160-ring-info);
}


/* ================================================================================
 * 5. 스켈레톤 — 조건을 적용하는 동안 결과 자리를 지킨다.
 *    gabAjaxNav() 가 #gab-results-col 에 .is-loading 을 붙였다 뗀다.
 * ============================================================================== */

.v160app-skels { display: none; }

#gab-results-col.is-loading .v160app-skels { display: block; }
#gab-results-col.is-loading .v160-pub-results,
#gab-results-col.is-loading .v160-pub-pagination,
#gab-results-col.is-loading .v160-pub-empty { display: none; }

.v160app-skel {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: var(--v160-space-2) var(--v160-space-3);
    padding-block: var(--v160-space-3);
    border-block-end: 1px solid var(--v160-border-subtle);
}
.v160app-skel__thumb {
    grid-row: 1 / 4;
    inline-size: 116px;
    block-size: 82px;
    border-radius: var(--v160-r-md);
}
.v160app-skel__l1 { inline-size: 42%; }
.v160app-skel__l2 { inline-size: 78%; }
.v160app-skel__l3 { inline-size: 56%; }


/* ================================================================================
 * 6. 데스크톱 (≥1025px) — 앱 전용 요소는 존재하지 않는 것처럼 둔다.
 * ============================================================================== */

@media (min-width: 1025px) {
    /* 41-v160-mobile.css 는 데스크톱에서 `.v160-mob-sheet` 를 통째로 display:none 한다.
     * 이 페이지의 필터 레일은 '같은 <form> 이 모바일에서 시트로 변신하는' 구조라
     * 그 규칙에 걸려 데스크톱 필터 레일이 통째로 사라진다. 같은 특이도로 되살린다.
     * → 41 소유자에게: `.v160-mob-sheet` 일괄 숨김에서 시트 겸용 요소를 제외하거나,
     *   변신형 요소용 클래스를 따로 두면 이 블록은 지울 수 있다. */
    .v160-pub-filters.v160-mob-sheet { display: block; }
    /* 시트 전용 크롬(핸들/닫기)은 데스크톱에서 의미가 없다. */
    .v160-pub-filters .v160-mob-sheet__handle,
    .v160-pub-filters .v160-mob-sheet__close { display: none; }

    .v160app-bar,
    .v160app-skels,
    .v160app-sortsheet { display: none !important; }

    /* 레일 안에서는 모델 목록이 과하게 길어지지 않게 한 번 더 조인다. */
    .v160app-brandlist { max-block-size: 420px; }
    .v160app-models__list { max-block-size: 220px; }
}


/* ================================================================================
 * 7. 모바일 앱 레이어 (≤1024px)
 * ============================================================================== */

@media (max-width: 1024px) {

    /* --- 7.1 고정 컴팩트 바 --------------------------------------------------
     * 42-v160-listing.css 는 이 바를 '떠 있는 둥근 카드'로 만든다. 앱 느낌에는
     * 화면 끝까지 붙은 한 줄 바가 맞으므로 테두리/라운드/그림자를 해제한다. */
    .v160app-bar {
        position: sticky;
        inset-block-start: var(--v160app-bar-top);
        z-index: var(--v160-mob-z-sticky, 190);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--v160-space-2);
        min-block-size: var(--v160app-bar-h);
        /* 컨테이너 좌우 패딩을 상쇄해 화면 끝까지 붙인다. */
        margin-inline: calc(var(--v160-container-pad) * -1);
        padding-inline: var(--v160-container-pad);
        padding-block: var(--v160-space-2);
        border: 0;
        border-block-end: 1px solid var(--v160-border);
        border-radius: 0;
        box-shadow: none;
        background: var(--v160-surface);
        transition: inset-block-start var(--v160-dur-slow) var(--v160-ease);
    }
    .v160app-bar__count {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--v160-fs-sm);
        color: var(--v160-text-muted);
    }
    .v160app-bar__count strong { color: var(--v160-accent); font-weight: 700; }
    .v160app-bar__actions {
        display: flex;
        align-items: center;
        gap: var(--v160-space-2);
        flex: 0 0 auto;
    }
    .v160app-bar__btn { min-block-size: 36px; }
    .v160app-bar__sort {
        display: inline-block;
        max-inline-size: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    /* --- 7.2 결과 행: 손가락에 반응하는 느낌 --------------------------------- */
    .v160app-row {
        transition: transform var(--v160-dur-fast) var(--v160-ease),
                    background var(--v160-dur-fast) var(--v160-ease);
        -webkit-tap-highlight-color: transparent;
    }
    /* 앱처럼 눌리는 느낌. 손가락을 뗀 순간 원위치. */
    .v160app-row:active {
        transform: scale(0.985);
        background: var(--v160-surface-2);
    }
    .v160app-row .v160app-seller {
        flex-direction: row;
        align-items: center;
        gap: var(--v160-space-2);
    }

    /* --- 7.3 필터 시트 -------------------------------------------------------
     * 42-v160-listing.css 는 `.v160-pub-filters.v160-mob-sheet { max-block-size: 88vh }`
     * 로 시트를 하단 88% 로 고정한다. 이 페이지의 필터는 엔카 앱처럼 전체 화면이어야
     * 하므로(자체 헤더 + 스크롤 본문 + 고정 푸터) 같은 특이도로 되돌린다.
     * → 42 소유자에게: --full 변형을 88vh 규칙에서 제외해 주면 이 블록은 지울 수 있다. */
    .v160-pub-filters.v160-mob-sheet--full {
        inset-block-start: 0;
        max-block-size: none;
        block-size: 100%;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        padding-block-start: var(--v160-mob-safe-t, 0px);
    }
    .v160app-sheet .v160-pub-filters__head { padding-inline: var(--v160-space-2); }
    .v160app-sheet__ic { display: none; }
    .v160app-sheet .v160-pub-filters__body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* 하단 확정 버튼 — 항상 살아있는 결과 수를 들고 있다. */
    .v160app-apply {
        position: relative;
        min-block-size: 48px;
        font-size: var(--v160-fs-lg);
        font-weight: 700;
    }
    .v160app-apply__spin {
        position: absolute;
        inset-inline-start: var(--v160-space-4);
        inset-block-start: 50%;
        inline-size: 16px;
        block-size: 16px;
        margin-block-start: -8px;
        border: 2px solid var(--v160-border-inverse);
        border-block-start-color: var(--v160-text-inverse);
        border-radius: var(--v160-r-pill);
        opacity: 0;
        animation: v160app-spin 720ms linear infinite;
    }
    .v160app-apply.is-busy .v160app-apply__spin { opacity: 1; }
    .v160app-apply.is-busy .v160app-apply__text { opacity: 0.7; }

    /* --- 7.4 정렬 바텀시트 --------------------------------------------------- */
    .v160app-sortsheet {
        padding-block-end: var(--v160-mob-safe-b, 0px);
    }
    .v160app-sortsheet .v160-mob-sheet__body { padding-block: var(--v160-space-2); }
    .v160app-sortlist {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .v160app-sortlist__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--v160-space-3);
        min-block-size: var(--v160-tap);
        padding-inline: var(--v160-space-2);
        border-radius: var(--v160-r-md);
        color: var(--v160-text);
        font-size: var(--v160-fs-lg);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .v160app-sortlist__item:active { background: var(--v160-surface-3); }
    .v160app-sortlist__check {
        flex: 0 0 auto;
        color: var(--v160-accent);
        opacity: 0;
    }
    .v160app-sortlist__item.is-active {
        color: var(--v160-accent);
        font-weight: 700;
    }
    .v160app-sortlist__item.is-active .v160app-sortlist__check { opacity: 1; }

    /* --- 7.5 세이프 에어리어 -------------------------------------------------- */
    /* 하단 탭바와 비교함 트레이 아래로 콘텐츠가 잘리지 않게 여백을 확보한다. */
    .v160-pub-list-page {
        padding-block-end: calc(var(--v160-mob-tabbar-total, 56px) + var(--v160-space-8));
    }
    .v160app-dealer { padding: var(--v160-space-3); }
    .v160app-dealer__actions {
        inline-size: 100%;
        margin-inline-start: 0;
    }
    .v160app-dealer__actions .v160-btn { flex: 1 1 auto; }
}


/* ================================================================================
 * 8. 좁은 모바일 (≤640px)
 * ============================================================================== */

@media (max-width: 640px) {
    .v160app-bar__sort { max-inline-size: 64px; }
    .v160app-bar__btn .v160-count { margin-inline-start: 4px; }

    /* 42-v160-listing.css 가 이미 .v160-pub-list 를 화면 끝까지 빼 놓았다.
     * 여기서는 행 좌우 여백을 컨테이너 여백과 맞춰 위쪽 툴바·칩과 정렬만 시킨다. */
    .v160app-row { padding-inline: var(--v160-container-pad); }
    .v160app-row .v160app-seller__link { max-inline-size: 56vw; }
    .v160app-row .v160-pub-row__price { font-size: var(--v160-fs-xl); }

    /* 폰에서는 결과 수·정렬·보기 전환이 전부 고정 바와 정렬 시트로 옮겨간다.
     * 툴바에 같은 컨트롤이 한 벌 더 있으면 앱 느낌이 깨지므로 시각적으로만 접는다.
     * display:none 이 아닌 이유 — 안쪽 .gab-list-count 는 aria-live 영역이고
     * gabAjaxNav() 와 시트의 실시간 카운트가 이 노드에서 총계를 읽는다.
     * (시트의 정렬 항목은 평범한 <a href> 라 JS 없이도 동작하므로 기능 손실 없음)
     * → 42 소유자에게: 42 의 모바일 툴바 규칙으로 옮기는 편이 낫다. */
    .v160-pub-results-col > .v160-pub-toolbar {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* 스켈레톤도 같은 폭으로 빠져야 자리가 흔들리지 않는다. */
    .v160-pub-results-col > .v160app-skels {
        margin-inline: calc(var(--v160-container-pad) * -1);
        padding-inline: var(--v160-container-pad);
    }
    .v160app-skel {
        grid-template-columns: 96px minmax(0, 1fr);
    }
    .v160app-skel__thumb { inline-size: 96px; block-size: 70px; }

    .v160app-models { margin-inline-start: var(--v160-space-4); }
    .v160app-models__list { max-block-size: 220px; }

    .v160app-dealer__name { font-size: var(--v160-fs-md); }
    .v160app-dealer__mark { inline-size: 36px; block-size: 36px; font-size: var(--v160-fs-lg); }
}


/* ================================================================================
 * 9. RTL — 논리 속성으로 처리되지 않는 회전만 손본다.
 * ============================================================================== */

[dir="rtl"] .v160app-apply__spin { animation-direction: reverse; }


/* ================================================================================
 * 10. 모션 축소 — 위에서 켠 앱 모션을 전부 끈다.
 * ============================================================================== */

@keyframes v160app-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .v160app-row,
    .v160app-bar,
    .v160app-models__caret,
    .v160app-seg__item {
        transition: none !important;
    }
    .v160app-row:active { transform: none; }
    .v160app-apply__spin { animation: none; }
    /* 헤더 자동 숨김도 이동 없이 즉시 처리한다. */
    .gab-site-header { transition: none !important; }
}