@charset "UTF-8";
/* ================================================================================
 * 43-v160-detail.css — v160 매물 상세 페이지 (views/pages/car-detail.php)
 * --------------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 *   The v160 redesign rewrote car-detail.php onto a new `.v160-pub-detail-*` /
 *   `.v160-pub-gallery__*` / `.v160-pub-pricebox__*` vocabulary while layer 39
 *   (39-v160-public.css §9) was still describing the old `.gab-detail-layout` /
 *   `.gab-price-card` / `.gab-gallery-main` markup. 72 classes on this template had
 *   no rule in any stylesheet. This layer supplies them.
 *
 * CASCADE POSITION
 *   Loads after 38–41, so it beats every earlier layer at equal specificity.
 *   car-detail.php also carries a stop-gap `<style id="hicm-detail-v160-css">` block
 *   in the document BODY (car-detail.php:809–1245). Body <style> comes after all
 *   <head> stylesheets in document order, so a bare `.v160-pub-x` rule written here
 *   would lose to it. Every in-page rule below is therefore scoped under the page
 *   root `.v160-pub-detail` (specificity 0,2,0) so this file is the authority and the
 *   template block degrades to a harmless subset. Do not "simplify" that scoping away.
 *
 * DEPENDENCIES
 *   38-v160-foundation.css — all tokens and every primitive composed here
 *   (.v160-card .v160-btn .v160-badge .v160-chip .v160-empty .v160-scroll-x
 *    .v160-stack .v160-cluster .v160-num .v160-price .v160-avatar .v160-toolbar).
 *   39-v160-public.css §9  — .v160-pub-gallery shell, .v160-pub-spec grid,
 *                            .v160-pub-seller shell, .gab-lb-*, .gab-modal-*, .gab-mbar-*.
 *   41-v160-mobile.css     — owns the sticky bottom action bar placement.
 *
 * HOUSE RULES OBSERVED
 *   Logical properties only (RTL/ar). No :has(), no @layer, no nesting.
 *   No raw hex — tokens only. No foundation primitive is redefined.
 *
 * CONTENTS
 *   1.  Page shell and two-column layout
 *   2.  Breadcrumbs
 *   3.  Gallery
 *   4.  Title block
 *   5.  Collapsible sections (details/summary)
 *   6.  Spec grid addenda
 *   7.  Options
 *   8.  Description
 *   9.  Seller card
 *   10. Brokerage process steps
 *   11. Notices
 *   12. Sticky price / CTA buybox
 *   13. Inquiry form and success state
 *   14. Related listings
 *   15. Fullscreen lightbox
 *   16. Inquiry modal
 *   17. Mobile action bar modifiers
 *   18. Defensive fallbacks
 *   19. Tablet  (<= 1024px)
 *   20. Mobile  (<= 640px)
 *   21. Reduced motion / print
 * ============================================================================== */


/* ================================================================================
 * 1. PAGE SHELL AND TWO-COLUMN LAYOUT
 * ============================================================================== */

/* 06-detail.css:5 still sets `padding: var(--gab-space-6) 0 var(--gab-space-16)` on
 * .gab-detail with a physical shorthand; the v160 template opens with a breadcrumb
 * that supplies its own leading space, so reset it here. */
.v160-pub-detail.gab-detail {
    padding: 0 0 var(--v160-space-4);
}

.v160-pub-detail {
    background: var(--v160-surface-2);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-md);
    line-height: var(--v160-lh-base);
}

/* A 1440px container behind a 360px buybox leaves a ~1040px reading column, which is
 * far wider than Encar/KCar run their detail pages. Narrow to the tight container for
 * this template only — the markup cannot be changed to `.v160-container--tight`. */
.v160-pub-detail > .v160-container {
    max-inline-size: var(--v160-container-tight);
}

.v160-pub-detail .v160-pub-detail-demo {
    margin-block-start: var(--v160-space-4);
}

.v160-pub-detail .v160-pub-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: var(--v160-space-6);
    padding-block: var(--v160-space-4) var(--v160-space-9);
}

.v160-pub-detail .v160-pub-detail-main {
    min-inline-size: 0;
}

.v160-pub-detail .v160-pub-detail-side {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-3);
    position: sticky;
    /* Same offset the public sticky sidebar uses in 39-v160-public.css:3778. */
    inset-block-start: 96px;
}


/* ================================================================================
 * 2. BREADCRUMBS
 * ============================================================================== */

.v160-pub-detail .v160-pub-crumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--v160-space-1);
    min-inline-size: 0;
    padding-block: var(--v160-space-4) 0;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-detail .v160-pub-crumbs__link {
    flex: 0 0 auto;
    color: var(--v160-text-muted);
    text-decoration: none;
    border-radius: var(--v160-r-xs);
    transition: color var(--v160-dur) var(--v160-ease);
}

.v160-pub-detail .v160-pub-crumbs__link:hover,
.v160-pub-detail .v160-pub-crumbs__link:focus-visible {
    color: var(--v160-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.v160-pub-detail .v160-pub-crumbs__sep {
    flex: 0 0 auto;
    font-size: var(--v160-fs-2xs);
    line-height: 1;
    color: var(--v160-text-placeholder);
}

/* The chevron glyph is directional; mirror it rather than swapping the icon. */
[dir="rtl"] .v160-pub-detail .v160-pub-crumbs__sep {
    transform: scaleX(-1);
}

.v160-pub-detail .v160-pub-crumbs__current {
    flex: 0 1 auto;
    min-inline-size: 0;
    color: var(--v160-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ================================================================================
 * 3. GALLERY
 * 39-v160-public.css:3785 gives `.v160-pub-gallery` the card shell (hairline, radius,
 * elev-1, overflow hidden). Everything inside it is defined here.
 * ============================================================================== */

.v160-pub-detail .v160-pub-gallery__stage {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--v160-surface-3);
    overflow: hidden;
}

.v160-pub-detail .v160-pub-gallery__stage:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--v160-accent);
}

/* The track rides on `.v160-scroll-x` (38-v160-foundation.css:2135) for swipe and
 * snap. Override the primitive's centring, 8px gap and proximity snap: gallery
 * slides are edge-to-edge and must land exactly. */
.v160-pub-detail .v160-pub-gallery__track {
    align-items: stretch;
    gap: 0;
    block-size: 100%;
    aspect-ratio: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
}

.v160-pub-detail .v160-pub-gallery__track > .v160-pub-gallery__slide {
    flex: 0 0 100%;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--v160-surface-3);
    color: inherit;
    font: inherit;
    cursor: zoom-in;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    -webkit-appearance: none;
    appearance: none;
}

.v160-pub-detail .v160-pub-gallery__slide img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: cover;
}

.v160-pub-detail .v160-pub-gallery__slide:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--v160-accent);
}

.v160-pub-detail .v160-pub-gallery__badges {
    position: absolute;
    inset-block-start: var(--v160-space-3);
    inset-inline-start: var(--v160-space-3);
    z-index: var(--v160-z-raised);
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-1);
    max-inline-size: calc(100% - var(--v160-space-6));
    pointer-events: none;
}

/* Shared chrome for the two arrows and the fullscreen button. */
.v160-pub-detail .v160-pub-gallery__nav,
.v160-pub-detail .v160-pub-gallery__expand {
    position: absolute;
    z-index: var(--v160-z-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--v160-tap);
    block-size: var(--v160-tap);
    margin: 0;
    padding: 0;
    border: 1px solid var(--v160-border);
    background: rgba(255, 255, 255, 0.94);
    color: var(--v160-text);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--v160-elev-2);
    transition:
        background var(--v160-dur) var(--v160-ease),
        color var(--v160-dur) var(--v160-ease),
        border-color var(--v160-dur) var(--v160-ease);
}

.v160-pub-detail .v160-pub-gallery__nav:hover,
.v160-pub-detail .v160-pub-gallery__expand:hover {
    background: var(--v160-surface);
    border-color: var(--v160-border-strong);
}

.v160-pub-detail .v160-pub-gallery__nav:active,
.v160-pub-detail .v160-pub-gallery__expand:active {
    background: var(--v160-surface-3);
}

.v160-pub-detail .v160-pub-gallery__nav:focus-visible,
.v160-pub-detail .v160-pub-gallery__expand:focus-visible {
    outline: none;
    border-color: var(--v160-accent);
    box-shadow: var(--v160-ring);
}

.v160-pub-detail .v160-pub-gallery__nav {
    inset-block-start: 50%;
    transform: translateY(-50%);
    border-radius: var(--v160-r-pill);
    font-size: var(--v160-fs-lg);
}

.v160-pub-detail .v160-pub-gallery__nav--prev {
    inset-inline-start: var(--v160-space-3);
}

.v160-pub-detail .v160-pub-gallery__nav--next {
    inset-inline-end: var(--v160-space-3);
}

/* Chevrons are directional glyphs — mirror them in RTL. */
[dir="rtl"] .v160-pub-detail .v160-pub-gallery__nav i {
    transform: scaleX(-1);
}

.v160-pub-detail .v160-pub-gallery__expand {
    inset-block-end: var(--v160-space-3);
    inset-inline-end: var(--v160-space-3);
    border-radius: var(--v160-r-md);
    font-size: var(--v160-fs-md);
}

.v160-pub-detail .v160-pub-gallery__counter {
    position: absolute;
    inset-block-end: var(--v160-space-3);
    inset-inline-start: var(--v160-space-3);
    z-index: var(--v160-z-raised);
    margin: 0;
    padding: 4px var(--v160-space-2);
    border-radius: var(--v160-r-sm);
    background: rgba(15, 23, 42, 0.74);
    color: var(--v160-text-inverse);
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    line-height: 1.4;
    /* "3 / 12" must stay LTR even on an Arabic page. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- Dot indicators (mobile only; desktop uses the thumbnail strip) ------- */

.v160-pub-detail .v160-pub-gallery__dots {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--v160-space-1);
    padding: 0 var(--v160-space-3);
    border-block-start: 1px solid var(--v160-border-subtle);
    background: var(--v160-surface-2);
}

/* The dot itself is 8px, but the button keeps a full 44px touch target. */
.v160-pub-detail .v160-pub-gallery__dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: var(--v160-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--v160-r-sm);
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.v160-pub-detail .v160-pub-gallery__dot::before {
    content: '';
    display: block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-border-strong);
    transition:
        background var(--v160-dur) var(--v160-ease),
        inline-size var(--v160-dur) var(--v160-ease);
}

.v160-pub-detail .v160-pub-gallery__dot.is-active::before,
.v160-pub-detail .v160-pub-gallery__dot[aria-current="true"]::before {
    inline-size: 20px;
    background: var(--v160-accent);
}

.v160-pub-detail .v160-pub-gallery__dot:focus-visible {
    outline: none;
    box-shadow: var(--v160-ring);
}

/* --- Thumbnail strip ------------------------------------------------------ */

.v160-pub-detail .v160-pub-gallery__thumbs {
    align-items: stretch;
    gap: var(--v160-space-2);
    padding: var(--v160-space-3);
    border-block-start: 1px solid var(--v160-border-subtle);
    background: var(--v160-surface-2);
    scroll-padding-inline: var(--v160-space-3);
}

.v160-pub-detail .v160-pub-gallery__thumbs > .v160-pub-gallery__thumb {
    flex: 0 0 auto;
    inline-size: 84px;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-sm);
    background: var(--v160-surface-3);
    overflow: hidden;
    opacity: 0.72;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color var(--v160-dur) var(--v160-ease),
        opacity var(--v160-dur) var(--v160-ease),
        box-shadow var(--v160-dur) var(--v160-ease);
}

.v160-pub-detail .v160-pub-gallery__thumb img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: cover;
}

.v160-pub-detail .v160-pub-gallery__thumb:hover {
    opacity: 1;
    border-color: var(--v160-border-strong);
}

/* Active ring: 1px hairline doubled by an accent ring, no glow. */
.v160-pub-detail .v160-pub-gallery__thumb.is-active,
.v160-pub-detail .v160-pub-gallery__thumb[aria-current="true"] {
    border-color: var(--v160-accent);
    opacity: 1;
    box-shadow: 0 0 0 1px var(--v160-accent);
}

.v160-pub-detail .v160-pub-gallery__thumb:focus-visible {
    outline: none;
    border-color: var(--v160-accent);
    box-shadow: var(--v160-ring);
}


/* ================================================================================
 * 4. TITLE BLOCK
 * ============================================================================== */

.v160-pub-detail .v160-pub-detail-head {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-2);
    min-inline-size: 0;
}

.v160-pub-detail .v160-pub-detail-head__brand {
    margin: 0;
    font-size: var(--v160-fs-sm);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-muted);
}

.v160-pub-detail .v160-pub-detail-head__title {
    margin: 0;
    font-size: var(--v160-fs-3xl);
    font-weight: 800;
    line-height: var(--v160-lh-tight);
    letter-spacing: var(--v160-track-tight);
    color: var(--v160-text);
    overflow-wrap: anywhere;
}

/* The model-year span leads the headline; keep it present but subordinate. */
.v160-pub-detail .v160-pub-detail-head__title .v160-num {
    color: var(--v160-text-muted);
    font-weight: 700;
}

.v160-pub-detail .v160-pub-detail-head__badges {
    margin-block-start: var(--v160-space-1);
}

.v160-pub-detail .v160-pub-detail-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-2) var(--v160-space-5);
    margin: 0;
    padding-block-start: var(--v160-space-3);
    border-block-start: 1px solid var(--v160-border-subtle);
}

.v160-pub-detail .v160-pub-detail-head__metaitem {
    display: flex;
    align-items: baseline;
    gap: var(--v160-space-2);
    min-inline-size: 0;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
}

.v160-pub-detail .v160-pub-detail-head__metaitem dt {
    flex: 0 0 auto;
    color: var(--v160-text-subtle);
}

.v160-pub-detail .v160-pub-detail-head__metaitem dd {
    margin: 0;
    min-inline-size: 0;
    color: var(--v160-text-muted);
    font-weight: 600;
}

/* Numeric meta (listing no., view count, posted date) stays LTR under RTL. */
.v160-pub-detail .v160-pub-detail-head__metaitem dd.v160-num,
.v160-pub-detail .v160-pub-pricebox__metaitem dd.v160-num {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}


/* ================================================================================
 * 5. COLLAPSIBLE SECTIONS (details / summary)
 * The section shell is `.v160-card`; `.v160-pub-sect` only supplies the disclosure
 * behaviour so 성능점검 / 옵션 / 차량 설명 / 유의사항 can be folded away.
 * ============================================================================== */

.v160-pub-detail .v160-pub-sect {
    display: block;
}

.v160-pub-detail .v160-pub-sect__head {
    display: flex;
    align-items: center;
    gap: var(--v160-space-3);
    cursor: pointer;
    list-style: none;
    /* WebKit + spec marker removal — the chevron is the affordance. */
    -webkit-tap-highlight-color: transparent;
    transition: background var(--v160-dur-fast) var(--v160-ease);
}

.v160-pub-detail .v160-pub-sect__head::-webkit-details-marker {
    display: none;
}

.v160-pub-detail .v160-pub-sect__head::marker {
    content: '';
}

.v160-pub-detail .v160-pub-sect__head:hover {
    background: var(--v160-surface-2);
}

.v160-pub-detail .v160-pub-sect__head:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--v160-accent);
}

.v160-pub-detail .v160-pub-sect__chevron {
    flex: 0 0 auto;
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-md);
    line-height: 1;
    transition: transform var(--v160-dur) var(--v160-ease);
}

.v160-pub-detail .v160-pub-sect[open] > .v160-pub-sect__head .v160-pub-sect__chevron {
    transform: rotate(180deg);
}

/* A closed section must not keep the head's bottom hairline dangling. */
.v160-pub-detail .v160-pub-sect:not([open]) > .v160-pub-sect__head {
    border-block-end-color: transparent;
}

.v160-pub-detail .v160-pub-sect__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-2);
    margin: var(--v160-space-4) 0 0;
}


/* ================================================================================
 * 6. SPEC GRID ADDENDA
 * The grid itself is 39-v160-public.css:4119 (.v160-pub-spec / __row / __label /
 * __value). Only the masked-identifier footnote is missing.
 * ============================================================================== */

.v160-pub-detail .v160-pub-spec__note {
    display: flex;
    align-items: flex-start;
    gap: var(--v160-space-2);
    margin: var(--v160-space-3) 0 0;
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-detail .v160-pub-spec__note i {
    flex: 0 0 auto;
    margin-block-start: 2px;
}

/* Numeric spec values (year, mileage, displacement, masked VIN) stay LTR. */
.v160-pub-detail .v160-pub-spec__value.v160-num {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    letter-spacing: 0.01em;
}


/* ================================================================================
 * 7. OPTIONS — chips grouped by category
 * ============================================================================== */

.v160-pub-detail .v160-pub-optgroup {
    min-inline-size: 0;
}

.v160-pub-detail .v160-pub-optgroup + .v160-pub-optgroup {
    padding-block-start: var(--v160-space-4);
    border-block-start: 1px solid var(--v160-border-subtle);
}

.v160-pub-detail .v160-pub-optgroup__title {
    margin: 0 0 var(--v160-space-2);
    font-size: var(--v160-fs-sm);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-muted);
}

/* Option chips are read-only facts, not filters — drop the interactive affordance. */
.v160-pub-detail .v160-pub-optgroup .v160-chip {
    cursor: default;
}

.v160-pub-detail .v160-pub-optgroup .v160-chip i {
    color: var(--v160-success);
}


/* ================================================================================
 * 8. DESCRIPTION
 * ============================================================================== */

.v160-pub-detail .v160-pub-desc {
    margin: 0;
    max-inline-size: 72ch;
    font-size: var(--v160-fs-md);
    line-height: var(--v160-lh-base);
    color: var(--v160-text-muted);
    overflow-wrap: anywhere;
}


/* ================================================================================
 * 9. SELLER CARD
 * 39-v160-public.css:4356 styles `.v160-pub-seller` as a standalone card. Here it is
 * nested inside a `.v160-card__body`, so strip the duplicated shell.
 * ============================================================================== */

.v160-pub-detail .v160-pub-seller {
    flex-direction: row;
    align-items: center;
    gap: var(--v160-space-4);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.v160-pub-detail .v160-pub-seller__body {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-2);
}

.v160-pub-detail .v160-pub-seller__name {
    margin: 0;
    font-size: var(--v160-fs-xl);
    font-weight: 700;
    line-height: var(--v160-lh-tight);
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Platform-only contact policy. Reads as a quiet notice, not an alert. */
.v160-pub-detail .v160-pub-seller__privacy {
    display: flex;
    align-items: flex-start;
    gap: var(--v160-space-2);
    margin: var(--v160-space-4) 0 0;
    padding: var(--v160-space-3);
    border: 1px solid var(--v160-border-subtle);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface-2);
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-detail .v160-pub-seller__privacy i {
    flex: 0 0 auto;
    margin-block-start: 2px;
}

.v160-pub-detail .v160-pub-seller__links {
    gap: var(--v160-space-2);
    margin-block-start: var(--v160-space-4);
}


/* ================================================================================
 * 10. BROKERAGE PROCESS STEPS (중개 절차)
 * ============================================================================== */

.v160-pub-detail .v160-pub-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--v160-space-5) var(--v160-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.v160-pub-detail .v160-pub-steps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--v160-space-3);
    min-inline-size: 0;
}

.v160-pub-detail .v160-pub-steps__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    border: 1px solid var(--v160-accent-border);
    border-radius: var(--v160-r-pill);
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
    font-size: var(--v160-fs-sm);
    font-weight: 700;
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
}

.v160-pub-detail .v160-pub-steps__body {
    min-inline-size: 0;
}

.v160-pub-detail .v160-pub-steps__title {
    margin: 0;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    line-height: var(--v160-lh-snug);
    color: var(--v160-text);
}

.v160-pub-detail .v160-pub-steps__text {
    margin: 2px 0 0;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}


/* ================================================================================
 * 11. NOTICES (유의사항)
 * ============================================================================== */

.v160-pub-detail .v160-pub-notices {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.v160-pub-detail .v160-pub-notices__item {
    display: flex;
    align-items: flex-start;
    gap: var(--v160-space-1);
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-muted);
}

.v160-pub-detail .v160-pub-notices__item i {
    flex: 0 0 auto;
    color: var(--v160-text-placeholder);
    font-size: var(--v160-fs-lg);
    line-height: var(--v160-lh-snug);
}


/* ================================================================================
 * 12. STICKY PRICE / CTA BUYBOX
 * ============================================================================== */

.v160-pub-detail .v160-pub-pricebox {
    overflow: visible;
}

.v160-pub-detail .v160-pub-pricebox .v160-card__body {
    padding: var(--v160-space-5);
}

.v160-pub-detail .v160-pub-pricebox__label {
    margin: 0;
    font-size: var(--v160-fs-xs);
    font-weight: 600;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-subtle);
}

/* The single loudest number on the page. Tabular figures come from `.v160-price`
 * (38-v160-foundation.css:317) so digits do not jitter between listings. */
.v160-pub-detail .v160-pub-pricebox__value {
    margin: 2px 0 0;
    font-size: var(--v160-fs-4xl);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: var(--v160-track-tight);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    overflow-wrap: anywhere;
}

.v160-pub-detail .v160-pub-pricebox__monthly {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v160-space-2);
    margin: var(--v160-space-3) 0 0;
    padding: var(--v160-space-2) var(--v160-space-3);
    border: 1px solid var(--v160-border-subtle);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface-2);
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-snug);
}

.v160-pub-detail .v160-pub-pricebox__monthly .v160-num {
    font-weight: 700;
    color: var(--v160-text);
    direction: ltr;
    unicode-bidi: isolate;
}

.v160-pub-detail .v160-pub-pricebox__note {
    margin: var(--v160-space-2) 0 0;
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-detail .v160-pub-pricebox__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-1) var(--v160-space-4);
    margin: var(--v160-space-4) 0 0;
    padding-block: var(--v160-space-3);
    border-block: 1px solid var(--v160-border-subtle);
}

.v160-pub-detail .v160-pub-pricebox__metaitem {
    display: flex;
    align-items: baseline;
    gap: var(--v160-space-2);
    min-inline-size: 0;
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
}

.v160-pub-detail .v160-pub-pricebox__metaitem dt {
    flex: 0 0 auto;
    color: var(--v160-text-subtle);
}

.v160-pub-detail .v160-pub-pricebox__metaitem dd {
    margin: 0;
    min-inline-size: 0;
    color: var(--v160-text-muted);
    font-weight: 600;
}

/* Primary 문의하기 CTA. */
.v160-pub-detail .v160-pub-pricebox .v160-btn--block {
    margin-block-start: var(--v160-space-4);
}

/* Secondary row: 찜 / 비교 / 공유 — equal thirds, never wider than the panel. */
.v160-pub-detail .v160-pub-pricebox__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v160-space-2);
    margin-block-start: var(--v160-space-2);
}

.v160-pub-detail .v160-pub-pricebox__row .v160-btn {
    min-inline-size: 0;
    padding-inline: var(--v160-space-2);
    font-size: var(--v160-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Saved (찜) state — mirrors `.gab-mbar-btn.is-active` in 41-v160-mobile.css:2318. */
.v160-pub-detail .v160-pub-pricebox__row .v160-btn.is-active {
    border-color: var(--v160-accent-border);
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
}

.v160-pub-detail .v160-pub-pricebox__trust {
    display: flex;
    align-items: flex-start;
    gap: var(--v160-space-2);
    margin: var(--v160-space-4) 0 0;
    padding-block-start: var(--v160-space-3);
    border-block-start: 1px solid var(--v160-border-subtle);
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-detail .v160-pub-pricebox__trust i {
    flex: 0 0 auto;
    margin-block-start: 2px;
}


/* ================================================================================
 * 13. INQUIRY FORM AND SUCCESS STATE
 * The same partial renders inline (car-detail.php:1608) and inside the modal
 * (car-detail.php:1737), so these rules are NOT scoped to `.v160-pub-detail`.
 * ============================================================================== */

.v160-pub-inq-form {
    min-inline-size: 0;
}

/* `.v160-stack` already spaces the fields; the submit button gets extra air. */
.v160-pub-inq-form .gab-modal-submit {
    margin-block-start: var(--v160-space-1);
}

.v160-pub-inq-note,
.v160-pub-detail .v160-pub-inq-note {
    display: flex;
    align-items: flex-start;
    gap: var(--v160-space-2);
    margin: 0;
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

.v160-pub-inq-note i {
    flex: 0 0 auto;
    margin-block-start: 2px;
}

/* Success state. `gabSendInquiry()` flips `display` inline, so never set `display`
 * here — only the box the revealed element draws. */
.v160-pub-inq-done {
    padding: 0;
    text-align: center;
}

.v160-pub-inq-done .v160-empty__icon {
    color: var(--v160-success);
    background: var(--v160-success-soft);
}


/* ================================================================================
 * 14. RELATED LISTINGS
 * ============================================================================== */

/* The layout above already ends on `padding-block-end: space-9`; the divider only
 * needs its own breathing room, not a second stacked gap. */
.v160-pub-detail .v160-pub-related {
    margin-block-start: 0;
    padding-block: var(--v160-space-6) var(--v160-space-9);
    border-block-start: 1px solid var(--v160-border);
}

.v160-pub-detail .v160-pub-related__grid {
    margin-block-start: var(--v160-space-4);
}


/* ================================================================================
 * 15. FULLSCREEN LIGHTBOX
 * Legacy shell: 06-detail.css:549 (.gab-lb, fixed + fade) and 39-v160-public.css:3925.
 * The v160 markup drops the old `.gab-lb-bottom` wrapper, so the counter would fall
 * into the flex row beside the photo — it is re-anchored here.
 * ============================================================================== */

.v160-pub-lb {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--v160-space-4);
    background: rgba(15, 23, 42, 0.94);
    /* 06-detail.css:549 pins .gab-lb at z-index 1100; align it with the token scale. */
    z-index: var(--v160-z-modal);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overscroll-behavior: contain;
}

/* 06-detail.css:549 sets `display: flex`, which defeats the UA `[hidden]` rule the
 * template relies on (car-detail.php:1709 ships the dialog with `hidden`). */
.v160-pub-lb[hidden] {
    display: none;
}

.v160-pub-lb__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-inline-size: min(92vw, 1280px);
    max-block-size: 82vh;
}

.v160-pub-lb__stage img {
    max-inline-size: min(92vw, 1280px);
    max-block-size: 82vh;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    border-radius: var(--v160-r-md);
    background: var(--v160-surface-dark);
}

.v160-pub-lb__close,
.v160-pub-lb__nav {
    position: absolute;
    z-index: var(--v160-z-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--v160-tap);
    block-size: var(--v160-tap);
    margin: 0;
    padding: 0;
    border: 1px solid var(--v160-border-inverse);
    border-radius: var(--v160-r-pill);
    background: rgba(255, 255, 255, 0.12);
    color: var(--v160-text-inverse);
    font-size: var(--v160-fs-xl);
    line-height: 1;
    cursor: pointer;
    transition: background var(--v160-dur) var(--v160-ease);
}

.v160-pub-lb__close:hover,
.v160-pub-lb__nav:hover {
    /* 06-detail.css:556 rotates the close button 90deg and 06-detail.css:558 scales the
     * arrows on hover; v160 chrome does not animate transform on hover. */
    background: rgba(255, 255, 255, 0.24);
    transform: none;
}

.v160-pub-lb__nav:hover {
    transform: translateY(-50%);
}

.v160-pub-lb__close:focus-visible,
.v160-pub-lb__nav:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* 06-detail.css:555 uses physical `top/right`, which lands on the wrong side in RTL. */
.v160-pub-lb__close {
    inset-block-start: var(--v160-space-4);
    inset-inline-end: var(--v160-space-4);
    inset-inline-start: auto;
    inline-size: 46px;
    block-size: 46px;
    font-size: var(--v160-fs-lg);
}

.v160-pub-lb__nav {
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 54px;
    block-size: 54px;
}

/* 06-detail.css:559 sets `.gab-lb-prev { left: 28px }` / `.gab-lb-next { right: 28px }`.
 * Re-express both logically so the pair mirrors as a unit under `dir="rtl"`. */
.v160-pub-lb__nav[data-lb-step="-1"] {
    inset-inline-start: var(--v160-space-6);
    inset-inline-end: auto;
    left: auto;
    right: auto;
}

.v160-pub-lb__nav[data-lb-step="1"] {
    inset-inline-end: var(--v160-space-6);
    inset-inline-start: auto;
    left: auto;
    right: auto;
}

[dir="rtl"] .v160-pub-lb__nav i {
    transform: scaleX(-1);
}

/* Without `.gab-lb-bottom` the counter must anchor itself. */
.v160-pub-lb__counter {
    position: absolute;
    inset-block-end: var(--v160-space-6);
    inset-inline: 0;
    z-index: var(--v160-z-raised);
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--v160-fs-md);
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
    pointer-events: none;
}


/* ================================================================================
 * 16. INQUIRY MODAL
 * Shell: 13-pages.css:538 (.gab-modal / .gab-modal-box) + 39-v160-public.css:4823.
 * The v160 markup puts a full `.v160-card` INSIDE `.gab-modal-box`, so the legacy
 * box padding and the legacy absolute close button both have to be undone.
 * ============================================================================== */

.v160-pub-inq-modal {
    padding: var(--v160-space-4);
    overscroll-behavior: contain;
}

.v160-pub-inq-modal__box {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 560px;
    max-block-size: min(88vh, 760px);
    /* 13-pages.css:540 sets `padding: 28px` on .gab-modal-box; the nested .v160-card
     * head/body already own their padding. */
    padding: 0;
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-2xl);
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-5);
    overflow: hidden;
}

.v160-pub-inq-modal__box > .v160-card__head {
    flex: 0 0 auto;
    align-items: flex-start;
}

.v160-pub-inq-modal__box > .v160-card__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 13-pages.css:542 absolutely positions .gab-modal-x at top/right 16px. In the v160
 * markup it sits inside `.v160-card__actions`, so return it to normal flow. */
.v160-pub-inq-modal__box .gab-modal-x {
    position: static;
    inline-size: auto;
    block-size: auto;
    inset: auto;
}

.v160-pub-inq-modal__box .v160-card__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ================================================================================
 * 17. MOBILE ACTION BAR MODIFIERS
 * Layer 41 (41-v160-mobile.css:2301) owns `.gab-mbar-btn` placement and the
 * `.is-active` treatment. Only the two icon-only modifiers were undefined; they need
 * their inline padding removed so the 44px square is not squeezed by the 16px
 * padding-inline that 39-v160-public.css:4796 puts on the base class.
 * ============================================================================== */

@media (max-width: 1024px) {
    .gab-mbar-btn--save,
    .gab-mbar-btn--compare {
        flex: 0 0 auto;
        padding-inline: 0;
        inline-size: var(--v160-tap);
        min-inline-size: var(--v160-tap);
    }

    .gab-mbar-btn--save i,
    .gab-mbar-btn--compare i {
        line-height: 1;
    }
}


/* ================================================================================
 * 18. DEFENSIVE FALLBACKS
 * ============================================================================== */

/* car-detail.php:1370 and :1535 build the tone modifier by interpolation
 * (`v160-badge--<?php echo $tone ?>`). Every current code path yields a real tone, but
 * an empty value would ship a bare `v160-badge--` token and render an unstyled badge.
 * Degrade to the neutral tone instead of losing the border. */
.v160-badge-- {
    background: var(--v160-neutral-soft);
    border-color: var(--v160-neutral-border);
    color: var(--v160-neutral);
}


/* ================================================================================
 * 19. TABLET (<= 1024px) — single column, buybox unpinned
 * ============================================================================== */

@media (max-width: 1024px) {
    .v160-pub-detail .v160-pub-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--v160-space-4);
        padding-block: var(--v160-space-3) var(--v160-space-6);
    }

    .v160-pub-detail .v160-pub-detail-side {
        position: static;
    }

    .v160-pub-detail .v160-pub-detail-head__title {
        font-size: var(--v160-fs-2xl);
    }

    .v160-pub-detail .v160-pub-related {
        padding-block: var(--v160-space-5) var(--v160-space-7);
    }

    .v160-pub-lb__nav {
        inline-size: var(--v160-tap);
        block-size: var(--v160-tap);
    }

    .v160-pub-lb__nav[data-lb-step="-1"] {
        inset-inline-start: var(--v160-space-2);
    }

    .v160-pub-lb__nav[data-lb-step="1"] {
        inset-inline-end: var(--v160-space-2);
    }
}

/* Tablet band only. The sticky bottom action bar (layer 41 / 13-pages.css:659) does
 * not appear above 860px, so once the buybox unpins there is nothing carrying the
 * price above the fold — hoist the panel above the gallery for this band only.
 * Phones keep photo-first because the action bar already shows price + 문의하기. */
@media (min-width: 641px) and (max-width: 1024px) {
    .v160-pub-detail .v160-pub-detail-side {
        order: -1;
    }
}


/* ================================================================================
 * 20. MOBILE (<= 640px) — full-bleed swipeable gallery, dots instead of thumbs
 * ============================================================================== */

@media (max-width: 640px) {
    .v160-pub-detail .v160-pub-detail-layout {
        gap: var(--v160-space-3);
        /* The sticky bottom action bar (layer 41) sits over the last ~72px. */
        padding-block-end: var(--v160-space-7);
    }

    .v160-pub-detail .v160-pub-crumbs {
        padding-block-start: var(--v160-space-3);
        font-size: var(--v160-fs-xs);
    }

    /* Full-bleed gallery: cancel the container gutter and the card rounding so the
     * photo runs edge to edge, the way Encar/KCar present it on a phone. */
    .v160-pub-detail .v160-pub-gallery {
        margin-inline: calc(-1 * var(--v160-container-pad));
        border-inline: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .v160-pub-detail .v160-pub-gallery__stage {
        aspect-ratio: 4 / 3;
    }

    /* Swipe is the primary control on touch — hide the arrows, show the dots. */
    .v160-pub-detail .v160-pub-gallery__nav {
        display: none;
    }

    .v160-pub-detail .v160-pub-gallery__dots {
        display: flex;
    }

    .v160-pub-detail .v160-pub-gallery__thumbs {
        display: none;
    }

    .v160-pub-detail .v160-pub-gallery__expand,
    .v160-pub-detail .v160-pub-gallery__counter {
        inset-block-end: var(--v160-space-2);
    }

    .v160-pub-detail .v160-pub-gallery__expand {
        inset-inline-end: var(--v160-space-2);
    }

    .v160-pub-detail .v160-pub-gallery__counter {
        inset-inline-start: var(--v160-space-2);
    }

    .v160-pub-detail .v160-pub-detail-head__title {
        font-size: var(--v160-fs-xl);
    }

    .v160-pub-detail .v160-pub-detail-head__meta {
        gap: var(--v160-space-1) var(--v160-space-4);
    }

    .v160-pub-detail .v160-pub-pricebox .v160-card__body {
        padding: var(--v160-space-4);
    }

    .v160-pub-detail .v160-pub-pricebox__value {
        font-size: var(--v160-fs-3xl);
    }

    .v160-pub-detail .v160-pub-pricebox__row .v160-btn {
        padding-inline: var(--v160-space-1);
        font-size: var(--v160-fs-xs);
    }

    .v160-pub-detail .v160-pub-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--v160-space-4);
    }

    .v160-pub-detail .v160-pub-seller {
        align-items: flex-start;
        gap: var(--v160-space-3);
    }

    .v160-pub-detail .v160-pub-seller__name {
        font-size: var(--v160-fs-lg);
    }

    .v160-pub-detail .v160-pub-seller__links .v160-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .v160-pub-lb {
        padding: var(--v160-space-2);
    }

    .v160-pub-lb__stage,
    .v160-pub-lb__stage img {
        max-inline-size: 100vw;
        max-block-size: 74vh;
    }

    .v160-pub-lb__close {
        inline-size: var(--v160-tap);
        block-size: var(--v160-tap);
        inset-block-start: var(--v160-space-2);
        inset-inline-end: var(--v160-space-2);
    }

    .v160-pub-lb__counter {
        inset-block-end: var(--v160-space-4);
        font-size: var(--v160-fs-sm);
    }

    /* Sheet-style modal. 35-global-platform-v156.css:455 already pins the backdrop to
     * flex-end with !important and re-pads the box; match its weight so the nested
     * card keeps ownership of its own padding. */
    .v160-pub-inq-modal {
        padding: 0;
    }

    #gab-inq-modal .v160-pub-inq-modal__box {
        max-inline-size: 100%;
        max-block-size: calc(100dvh - var(--v160-space-7));
        padding: 0 !important; /* defeats 35-global-platform-v156.css:461 */
        border-inline: 0;
        border-block-end: 0;
        border-radius: var(--v160-r-2xl) var(--v160-r-2xl) 0 0 !important;
    }

    #gab-inq-modal .v160-pub-inq-modal__box > .v160-card__body {
        padding-block-end: calc(var(--v160-space-5) + env(safe-area-inset-bottom, 0px));
    }
}


/* ================================================================================
 * 21. REDUCED MOTION / PRINT
 * ============================================================================== */

@media (prefers-reduced-motion: reduce) {
    .v160-pub-detail .v160-pub-gallery__track {
        scroll-behavior: auto;
    }

    .v160-pub-detail .v160-pub-sect__chevron,
    .v160-pub-detail .v160-pub-sect__head,
    .v160-pub-detail .v160-pub-gallery__dot::before,
    .v160-pub-detail .v160-pub-gallery__nav,
    .v160-pub-detail .v160-pub-gallery__expand,
    .v160-pub-detail .v160-pub-crumbs__link,
    .v160-pub-detail .v160-pub-gallery__thumbs > .v160-pub-gallery__thumb,
    .v160-pub-lb__close,
    .v160-pub-lb__nav {
        transition: none;
    }
}

@media print {
    .v160-pub-detail .v160-pub-detail-layout {
        display: block;
    }

    .v160-pub-detail .v160-pub-detail-side {
        position: static;
        margin-block-start: var(--v160-space-4);
    }

    .v160-pub-detail .v160-pub-gallery__nav,
    .v160-pub-detail .v160-pub-gallery__expand,
    .v160-pub-detail .v160-pub-gallery__dots,
    .v160-pub-detail .v160-pub-gallery__thumbs,
    .v160-pub-detail .v160-pub-related,
    .v160-pub-lb,
    .v160-pub-inq-modal {
        display: none;
    }

    .v160-pub-detail .v160-pub-sect__chevron {
        display: none;
    }
}
