/* 트럭샵 모바일 UI (2026-11-12)
   이 파일은 base.html 에서 media="(max-width:800px)" 로만 불러옵니다 → PC 화면에는 적용되지 않습니다.
   상세페이지 모바일 기준(800px)은 기존 vehicle-detail.css 와 같고, 검색창은 기존 모바일 검색 기준(760px)을 따릅니다. */

:root{--mo-line:#e4dbf7;--mo-soft:#f6f2fe;--mo-ink:#16131f;--mo-sub:#6a6380}

/* ── 1. 차량정보: 하나의 표(2열), 차량번호·제시번호는 한 줄 전체 ── */
.record-info .vehicle-info-table{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;column-gap:1px;margin:14px;padding:0;background:var(--mo-line);border:1px solid var(--mo-line);border-radius:12px;overflow:hidden}
.record-info .vehicle-info-table>div,
.record-info .vehicle-info-table>div:nth-last-child(2),
.record-info .vehicle-info-table>div:nth-last-child(-n+2){display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:66px;padding:11px 14px;border:0;border-radius:0;background:#fff}
.record-info .vehicle-info-table>div.is-wide{grid-column:1/-1}
/* 위쪽 요약(연식·톤수·주행거리·차종)과 가격 옆 차량번호에 이미 나온 항목은 표에서 뺌 → 빈칸 없이 채우기 */
.record-info .vehicle-info-table{grid-auto-flow:row dense}
.record-info .vehicle-info-table>div.dup-mo{display:none}
.record-info .vehicle-info-table>div.wide-mo{grid-column:1/-1}
.record-info .vehicle-info-table dt{font-size:12.5px;color:var(--mo-sub);font-weight:500;line-height:1.3}
.record-info .vehicle-info-table dd{font-size:15.5px;font-weight:750;color:var(--mo-ink);text-align:left;line-height:1.4;overflow-wrap:anywhere;word-break:keep-all;width:100%}
.record-info .vehicle-info-table dd .record-missing{font-size:14px;font-weight:500;color:#9a94ab}
.record-info .car-no-detail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:16px}
.record-info .car-no-detail .copy-btn{flex:none;width:34px;height:34px;margin:0}

/* 등록증·성능점검기록부: 한 줄에 2개, 같은 높이 */
.record-info .record-documents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 14px 14px;margin:0}
.record-info .record-documents>button,.record-info .record-documents>span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;margin:0;padding:8px 10px;border-radius:10px;font-size:14.5px;line-height:1.35;font-weight:700;width:100%}
.record-info .record-documents>button{border:1px solid #d9cbf7;background:var(--mo-soft);color:#4a2fa8}
.record-info .record-documents>span{border:1px dashed #d8d3e3;background:#fbfafd;color:#8a849a;font-weight:500}

/* ── 2. 상세페이지 순서: 사진 → 차명 → 가격 → 요약 → 문의 → 제원 → 차량정보·서류 → 옵션 → 설명 → 판매자 → 추천매물 ── */
.detail-layout>.detail-intro,.detail-layout>.detail-purchase,.detail-layout>.detail-lower,.detail-lower>.vehicle-records{display:contents}
.detail-intro>.gallery{order:1}
.detail-layout .detail-purchase>.simple-title{display:block;order:2}
.detail-intro>.price-action-row{order:3}
.detail-intro>.detail-views-mo{order:4}
.detail-intro>.detail-summary-title,.detail-intro>.detail-summary-mo{order:5}
.detail-intro>.detail-contact-mo{order:6}
.vehicle-records>.record-dimensions{order:7}
.vehicle-records>.record-info{order:8}
.vehicle-records>.record-equipment{order:9}
.detail-lower>.vehicle-description{order:10}
.vehicle-records>.seller-record{order:11}
.detail-layout>.detail-related{order:12}
.detail-layout>.dqa-bottom{order:13}
.detail-layout .detail-purchase>.purchase-call{display:none}
.detail-layout{gap:16px;align-items:stretch}
.detail-intro>.gallery,.detail-intro>.price-action-row,.detail-intro>.detail-summary-mo,.detail-intro>.detail-contact-mo,.detail-layout .detail-purchase>.simple-title,.vehicle-records>.vehicle-record-card,.detail-lower>.vehicle-description,.detail-layout>.detail-related,.detail-layout>.dqa-bottom{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.vehicle-records>.vehicle-record-card{margin:0}
.detail-lower>.vehicle-description{margin:0}

/* 차명·가격 */
.detail-layout .detail-purchase>.simple-title{margin:2px 0 0;font-size:20px;line-height:1.42;font-weight:800;letter-spacing:-.5px;color:var(--mo-ink);word-break:keep-all;overflow-wrap:anywhere}
.detail-intro>.price-action-row{margin:0;gap:10px}
.price-action-row .detail-main-price{font-size:30px;line-height:1.1;letter-spacing:-.8px}
.price-action-row .detail-main-price small{font-size:17px;margin-left:3px;font-weight:700;letter-spacing:0}
.detail-intro>.detail-views-mo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-6px 0 0;font-size:12.5px;color:#8a849a}
.detail-views-mo .direct-sale{margin:0;font-size:12.5px;padding:5px 10px;line-height:1}
/* 가격 옆 차량번호(직접·알선매도 표시는 조회수 옆으로 이동) */
.price-action-row>div:first-child>.direct-sale{display:none}
.price-action-row>div:first-child{flex-wrap:nowrap;align-items:center;gap:10px}
.price-action-row .detail-carno-mo{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 6px 6px 11px;border:1px solid var(--mo-line);border-radius:9px;background:#fff;font-size:16px;font-weight:800;color:var(--mo-ink);white-space:nowrap}
.detail-carno-mo .copy-btn{margin:0;width:30px;height:30px}
.price-action-row>div:first-child{width:100%}

/* 주요 제원 요약 */
.mo-only.detail-summary-mo{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:0;border:1px solid var(--mo-line);border-radius:12px;overflow:hidden;background:var(--mo-line)}
.detail-summary-mo>div{background:#fff;padding:11px 8px 12px;text-align:center;min-width:0}
.detail-summary-mo>div{grid-column:span 2}
.detail-summary-mo>div:nth-child(4):nth-last-child(2),.detail-summary-mo>div:nth-child(5):last-child,
.detail-summary-mo>div:first-child:nth-last-child(4),.detail-summary-mo>div:first-child:nth-last-child(4)~div{grid-column:span 3}
.detail-summary-mo dt{font-size:12px;color:var(--mo-sub);margin-bottom:3px}
.detail-summary-mo dd{margin:0;font-size:15px;font-weight:750;color:var(--mo-ink);line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}

/* 전화문의(주요)·1:1문의(보조) */
.mo-only.detail-contact-mo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px}
/* 전화문의·1:1문의는 화면 아래 고정(상세페이지에서는 기존 하단 메뉴 대신 표시, 아이폰 하단 안전영역 확보) */
.page-detail .mo-only.detail-contact-mo{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:#fff;border-top:1px solid #e9e3f4;box-shadow:0 -4px 16px #2a1f4a12}
/* 760px 이하: 기존 하단 메뉴(홈·최근 본·관심·1:1문의) 위에 두 줄로 쌓음 */
@media(max-width:760px){
 body.page-detail .mo-only.detail-contact-mo{bottom:var(--mb-h,calc(67px + env(safe-area-inset-bottom,0px)));padding-bottom:10px;box-shadow:none;border-top:1px solid #e9e3f4}
 body.page-detail .mobile-bottom{z-index:41;grid-template-columns:repeat(3,minmax(0,1fr))}
 body.page-detail .mobile-bottom a[href="/support/ask/"]{display:none}
 body.page-detail{padding-bottom:calc(var(--mb-h,calc(67px + env(safe-area-inset-bottom,0px))) + 76px)}
}
@media(min-width:761px){body.page-detail{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.detail-intro>.dcm-sold{order:6}
.mo-only.dcm-sold{display:block}
.dcm-sold{margin:0;padding:10px 12px;border-radius:10px;background:#f3f1f6;color:#5b5568;font-size:14px;line-height:1.5}
.dcm-call,.dcm-ask{display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;border-radius:12px;font-size:16px;font-weight:750;text-decoration:none}
.dcm-call{background:#7046d8;color:#fff}
.dcm-call svg{width:19px;height:19px;fill:currentColor}
.dcm-ask{background:#fff;color:#5432b8;border:1.5px solid #c9b6f3}
.dcm-call:focus-visible,.dcm-ask:focus-visible{outline:3px solid #ac8eed;outline-offset:2px}

/* 차량 상세설명 */
.detail-lower .vehicle-description h2{font-size:18px}
.detail-lower .vehicle-description .prose{font-size:16px;line-height:1.8;color:#24202f;overflow-wrap:anywhere;word-break:keep-all}
.detail-lower .vehicle-description .prose p{margin:0 0 1em}
.detail-lower .vehicle-description .prose img,.detail-lower .vehicle-description .prose video,.detail-lower .vehicle-description .prose iframe{max-width:100%;height:auto}
.detail-lower .vehicle-description .prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.detail-lower .vehicle-description .prose td,.detail-lower .vehicle-description .prose th{min-width:72px}

/* 판매자 정보: 2열로 압축하지 않고 사진 + 한 줄씩 */
.seller-record .seller-profile{display:grid;grid-template-columns:1fr;gap:12px;padding:16px}
.seller-record .seller-portrait{width:84px;height:100px;border-radius:10px;object-fit:cover}
.seller-record .seller-info-table{margin:0;padding:0}
.seller-record .seller-info-table>div{padding:11px 0;gap:14px}
.seller-record .seller-info-table dt{font-size:13px;color:var(--mo-sub)}
.seller-record .seller-info-table dd{font-size:15px;font-weight:700;color:var(--mo-ink);line-height:1.45}
.seller-record .seller-info-table dd a{color:#5432b8}

/* ── 3. 모바일 검색: 기본(차종·톤수·검색어) + 상세조건 펼치기 ── */
@media(max-width:760px){
 .mo-simple-search .search-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
 .mo-simple-search .mo-keyword{grid-column:1/-1;display:grid;gap:6px}
 .mo-simple-search .mo-keyword span{font-size:13px;font-weight:700}
 .mo-simple-search .mo-keyword input{width:100%;min-height:46px;font-size:15px;padding:0 12px;border:1px solid #e3deef;border-radius:8px;background:#fbfafd}
 .mo-simple-search .search-field select{min-height:46px;font-size:15px}
 .mo-more{margin-top:12px;border:1px solid #e9e2f6;border-radius:10px;background:#fbf9ff}
 .mo-more>summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;cursor:pointer;list-style:none;font-weight:750;font-size:15px;color:#3d2a86}
 .mo-more>summary::-webkit-details-marker{display:none}
 .mo-more>summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid #8a7fb0;border-bottom:2px solid #8a7fb0;transform:rotate(45deg) translateY(-2px)}
 .mo-more[open]>summary::after{transform:rotate(-135deg)}
 .mo-more>summary small{font-weight:500;font-size:12px;color:#8a849a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .mo-more>summary:focus-visible{outline:3px solid #ac8eed;outline-offset:2px;border-radius:10px}
 .mo-more-fields{padding:4px 14px 14px}
 .mo-search-actions{display:grid;gap:8px;margin-top:12px}
 .mo-search-actions .search-submit{width:100%;min-height:52px;font-size:16px}
 .mo-search-actions a{justify-self:center;font-size:13px;color:#8a849a;padding:6px 10px}
 /* 차종 사진 버튼: 3열 × 2행, 선택한 차종은 연보라 테두리·배경 */
 .category-tabs .category-tab.selected,.category-tabs .category-tab[aria-current="true"]{border-color:#9b7be8;background:#f1ebfd;box-shadow:inset 0 0 0 1px #9b7be8}
}
.detail-intro>.detail-fact-cards,.detail-intro>.detail-cost-note,.detail-intro>.dqa-top{display:none}
.detail-action-buttons .kuca-search{width:100%;min-height:50px}
.detail-action-buttons .kuca-search>span{font-size:14px}
.detail-action-buttons .kuca-search .kuca-hint{font-size:12.5px}

/* 목록 카드의 차량번호는 모바일에서 숨김(상세화면에서만 표시) */
@media(max-width:760px){p.car-no{display:none}}

/* 요약 카드 = 모바일 '차량정보', 아래 표 카드 = '상세정보'(장착 옵션 포함) */
.mo-only.detail-summary-title{display:block;margin:0 0 -8px;font-size:17px;font-weight:800;color:var(--mo-ink);letter-spacing:-.3px}
.record-info h2 .pc-label{display:none}
.record-info h2 .mo-label{display:inline}
.vehicle-records>.record-equipment{display:none}
.mo-only.record-equipment-mo{display:block;border-top:1px solid #f0edf5;padding:14px}
.record-equipment-mo h3{margin:0 0 10px;font-size:15px;font-weight:750;color:var(--mo-ink)}
.record-equipment-mo h3 strong{color:#7046d8}
.record-equipment-mo .equipment-list{padding:0;margin:0}
.record-equipment-mo .record-empty{margin:0;font-size:14px;color:#8a849a}

/* ── 모바일 상세 상단바: 뒤로가기 · 차량번호 · 공유 · 관심(♡) → 바로 사진 ── */
body.page-detail>header{display:none}
.page-detail .detail-center>.breadcrumb,.page-detail .detail-center>.detail-cats,.page-detail .gallery-fav{display:none}
.mo-only.detail-topbar-mo{display:grid;grid-template-columns:48px minmax(0,1fr) 44px 48px;align-items:center;position:sticky;top:0;z-index:30;height:54px;padding:0 4px;background:#fff;border-bottom:1px solid #eee9f5}
.detail-topbar-mo a,.detail-topbar-mo button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:#16131f;padding:0;cursor:pointer;text-decoration:none;border-radius:10px}
.detail-topbar-mo svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dtb-title{text-align:center;font-size:18px;font-weight:800;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-topbar-mo .dtb-fav{font-size:25px;line-height:1;color:#16131f}
.detail-topbar-mo .dtb-fav[aria-pressed="true"]{color:#e0245e}
.detail-topbar-mo a:focus-visible,.detail-topbar-mo button:focus-visible{outline:3px solid #ac8eed;outline-offset:-2px}
.page-detail .vehicle-detail-shell{margin-top:10px}

/* ── 모바일 홈: 최근 본 · 찜한 매물 ── */
@media(max-width:760px){
 .home-saved-mo:not([hidden]){display:block;margin:18px 0 4px}
 .hs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
 .hs-tabs{display:flex;align-items:center;gap:4px}
 .hs-tabs button{border:0;background:none;padding:6px 8px 6px 0;font:inherit;font-size:18px;font-weight:800;color:#b3adc2;cursor:pointer}
 .hs-tabs button+button{padding-left:10px;border-left:1px solid #ddd6ea;border-radius:0}
 .hs-tabs button[aria-selected="true"]{color:#16131f}
 .hs-all{font-size:13px;color:#6a6380;text-decoration:underline;text-underline-offset:3px}
 .hs-list{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
 .hs-card{flex:0 0 138px;scroll-snap-align:start;display:grid;gap:5px;color:#16131f;text-decoration:none}
 .hs-photo{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#efedf3}
 .hs-photo img{width:100%;height:100%;object-fit:cover;display:block}
 .hs-photo em{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background:#16131fb3;color:#fff;text-align:center;font-style:normal;font-size:12px;font-weight:700;padding:3px 0}
 .hs-title{font-size:13.5px;line-height:1.4;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
 .hs-price{font-size:16px;font-weight:800;color:#16131f}
 .hs-price small{font-size:12px;font-weight:700;margin-left:1px}
 .hs-empty{margin:4px 0 0;font-size:13px;color:#8a849a}
}
/* 모바일 상세: 상단 광고는 사진 위가 아니라 본문 아래로(사진이 바로 보이도록) */
body.page-detail .vehicle-detail-shell.vehicle-detail-shell.vehicle-detail-shell{grid-template-areas:'content' 'left' 'right';grid-template-columns:minmax(0,1fr)}

/* ── 모바일 메인(/) 플랫폼형: 검색 → 차종 → 추천 4 → 최근 등록 4 → 전체 매물 → 거래 서비스 → 리뷰 ── */
@media(max-width:760px){
 .hero-home-root>.container{display:flex;flex-direction:column}
 .hero-home-root .hero-top{order:0}
 .hero-home-root .hero-banner{order:1}
 .hero-home-root .search-panel{order:2}
 .hero-home-root .category-tabs{order:3;margin-top:16px}
 .hero-home-root .home-saved-mo{order:4}
 .home-root-list{display:none}
 .mo-only.mobile-home-feed{display:grid;gap:26px;margin:18px 0 8px}
 .mf-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
 .mf-head h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.4px;color:#16131f}
 /* 추천: 2열 × 2행, 기존 카드 재사용 */
 .mf-rec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .mf-rec-item{position:relative;min-width:0;display:flex}
 .mf-rec-item>.vehicle-card{width:100%}
 .mf-badge{position:absolute;z-index:3;left:8px;top:8px;padding:4px 8px;border-radius:6px;background:#7046d8;color:#fff;font-size:11.5px;font-weight:800;line-height:1}
 .mf-rec-item .vehicle-photo{aspect-ratio:4/3}
 .mf-rec-item .vehicle-photo img{width:100%;height:100%;object-fit:cover}
 .mf-rec-item .card-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 /* 최근 등록: 가로형 한 줄 1대 */
 .mf-recent{list-style:none;margin:0;padding:0;display:grid;gap:10px}
 .mf-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid #ebe5f6;border-radius:12px;background:#fff;color:#16131f;text-decoration:none}
 .mf-row-photo{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#efedf3}
 .mf-row-photo img{width:100%;height:100%;object-fit:cover;display:block}
 .mf-row-photo .placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#b3adc2;font-size:22px}
 .mf-row-body{display:grid;gap:4px;min-width:0}
 .mf-row-title{font-size:15px;font-weight:750;line-height:1.35;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .mf-row-spec{font-size:13px;color:#6a6380}
 .mf-row-price{font-size:17px;font-weight:800;color:#5432b8}
 .mf-row-price small{font-size:12px;margin-left:1px}
 .mf-row:focus-visible,.mf-svc:focus-visible,.mf-all:focus-visible{outline:3px solid #ac8eed;outline-offset:2px}
 /* 전체 매물 N대 보기 */
 .mf-all{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;background:#7046d8;color:#fff;font-size:16px;font-weight:800;text-decoration:none}
 /* 거래 서비스: 2열 × 2행 */
 .mf-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .mf-svc{display:flex;align-items:center;gap:10px;min-height:68px;padding:12px;border:1px solid #ebe5f6;border-radius:12px;background:#fff;color:#16131f;text-decoration:none}
 .mf-svc strong{display:block;font-size:15px;font-weight:800;line-height:1.3;word-break:keep-all}
 .mf-svc small{display:block;font-size:12px;color:#8a849a;margin-top:2px;word-break:keep-all}
 .mf-svc-icon{flex:none;width:36px;height:36px;border-radius:10px;background:#f1ebfd center/22px no-repeat}
 .mf-i-info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237046d8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 7h6M8 11h6'/%3E%3C/svg%3E")}
 .mf-i-price{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237046d8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 19V5M4 19h16M8 15l4-4 3 3 5-6'/%3E%3C/svg%3E")}
 .mf-i-plate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237046d8' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M7 12h3M13 12h4'/%3E%3C/svg%3E")}
 .mf-i-loan{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237046d8' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E")}
 .mf-i-sell{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237046d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16V8h11v8M14 11h4l3 3v2h-7'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E")}
}