/* /mall/ — 해외 파트너 매물 (2026-08-17)
 * 디자인은 www.mk1.co.kr/stock 과 같게 간다: stock.css(그 사이트 스타일 복사본)를 먼저 읽고,
 * 파트너 사이트 style.css를 뒤에 읽어 **헤더·푸터·버튼은 파트너 사이트가 이기게** 한다.
 * 이 파일은 그 위에 얹는 /mall/ 전용 최소 규칙만 담는다(접근 안내 레이어·검색줄·소소한 보정). */

/* 목록 검색 줄 — /kr/ 차량검색과 같은 규칙(위: 검색+정렬 / 아래: 조건). */
.mfilters{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;background:var(--white);
  border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:22px}
.mfilters .msearch{grid-column:1/-1;position:relative}
.mfilters #sort{grid-column:1/-1}
@media(min-width:620px){
  .mfilters{grid-template-columns:repeat(3,1fr)}
  .mfilters .msearch{grid-column:span 2}
  .mfilters #sort{grid-column:span 1}
}
@media(min-width:900px){
  .mfilters{grid-template-columns:repeat(6,1fr)}
  .mfilters .msearch{grid-column:span 4}
  .mfilters #sort{grid-column:span 2}
}
.mfilters select,.mfilters input{font:inherit;font-size:14px;width:100%;background:var(--off-white);
  border:1px solid var(--border);color:var(--navy-900);padding:10px 12px;border-radius:8px;outline:none}
.mfilters select:focus,.mfilters input:focus{border-color:var(--navy-900)}
.mfilters .msearch input{padding-left:38px}
.mfilters .msearch .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.mfilters .mreset{font:inherit;font-size:14px;font-weight:700;background:#fff;border:1px solid var(--border);
  color:var(--text-muted);border-radius:8px;padding:10px 12px;cursor:pointer;width:100%}
.mfilters .mreset:hover{border-color:var(--navy-900);color:var(--navy-900)}
.mcount{color:var(--text-muted);font-size:13px;margin:0 0 14px}
.mcount b{color:var(--navy-900)}

/* 상세 갤러리 — www 상세는 생성기가 카테고리 칩까지 만들지만, 여기선 사진 순서만 쓰는 단순형이다. */
/* 화살표는 썸네일까지 포함한 .mgal이 아니라 큰 사진 기준으로 앉아야 한다 -> 사진만 감싸는 무대를 둔다. */
.mgal .mstage{position:relative}
.mgal .mmain{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--navy-100);display:block}
/* 좌우 넘김 화살표 — 국문 상세(/kr/)와 같은 모양·같은 동작(2026-08-17 Kevin). */
.mgal .marrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;
  background:rgba(8,26,51,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:background .15s;padding:0 0 3px;z-index:2}
.mgal .marrow:hover{background:rgba(8,26,51,.82)}
.mgal .marrow.prev{left:14px}.mgal .marrow.next{right:14px}
.mgal .mcnt{position:absolute;right:12px;bottom:12px;background:rgba(8,26,51,.6);color:#fff;font-size:12px;
  padding:3px 9px;border-radius:20px;z-index:2}
@media(max-width:560px){.mgal .marrow{width:36px;height:36px;font-size:20px}
  .mgal .marrow.prev{left:8px}.mgal .marrow.next{right:8px}}
.mgal .mthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px}
.mgal .mthumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:pointer;
  border:2px solid transparent;background:var(--navy-100)}
.mgal .mthumbs img.on{border-color:var(--orange-500)}

/* 접근 안내 레이어 — 비로그인 / 승인 대기 / 국내 회원 */
.gate{position:fixed;inset:0;background:rgba(11,37,69,.5);display:flex;align-items:center;justify-content:center;z-index:500;padding:18px}
.gate[hidden]{display:none}
.gate .gbox{position:relative;background:#fff;border-radius:16px;padding:30px 26px 26px;width:min(430px,100%);
  text-align:center;box-shadow:0 24px 60px rgba(11,37,69,.28)}
.gate .gx{position:absolute;right:10px;top:8px;border:0;background:none;font-size:24px;line-height:1;
  color:var(--text-muted);cursor:pointer;padding:6px 10px}
.gate .gic{width:52px;height:52px;border-radius:50%;background:var(--off-white);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.gate h2{font-size:19px;margin:0 0 8px;font-weight:800;color:var(--navy-900)}
.gate .gtxt{font-size:14px;line-height:1.8;color:var(--text-secondary);margin:0 0 20px}
.gate .gcta{display:flex;flex-direction:column;gap:9px}
.gate .gcta .btn{width:100%}
.gate .gsub{font-size:12.5px;color:var(--text-muted);margin:14px 0 0;line-height:1.7}

/* ==========================================================================
   2026-08-19 — 헤더 버튼 정렬 · 상단 높이 · Equipment(옵션) 블록
   ========================================================================== */

/* 1. 로그아웃 상태 헤더 버튼 — stock.css가 모든 .btn에 height:52px를 건다(큰 매물 CTA용).
   그게 파트너 헤더의 'Sign in'(.btn-sm)까지 잡아 72px 바 안에 52px 블록이 서서
   22px짜리 메뉴 링크들과 높이가 어긋나 있었다. 로그인하면 .pill이 대신 나와서
   로그아웃일 때만 보이던 증상이다. 헤더 안에서만 되돌린다. */
.site-header .btn { height: auto; line-height: 1; }
.site-header .btn-sm { padding: 9px 16px; }

/* 2. 목록 상단(hero) 높이 — 430px는 첫 화면의 절반을 제목이 먹는다. 절반으로 줄인다.
   제목 글자만 줄이면 허전해서 위아래 여백까지 같이 줄였다.
   (h1/문단의 margin-top·max-width는 HTML 인라인 스타일이라 여기서 건드리지 않는다.) */
.stock-hero { padding-top: clamp(22px, 3vw, 38px); padding-bottom: clamp(12px, 1.6vw, 22px); }
.stock-hero .h1 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.18; max-width: 24ch; }
.stock-hero .body-lg { font-size: 15.5px; line-height: 1.62; }

/* 3. Equipment — 옵션 30~40개를 쉼표로 이으면 아무도 안 읽는다.
   카테고리로 묶고 항목마다 체크를 달아 눈이 개별 항목을 집을 수 있게 한다. */
.eqp-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px; padding: 0 8px; margin-left: 10px;
  border-radius: 999px; background: var(--orange-050); color: var(--orange-600);
  font-size: 13px; font-weight: 800; vertical-align: 3px;
}
.eqp-note { margin-top: var(--sp-3); color: var(--text-muted); }
/* 2단은 grid가 아니라 columns다 — grid면 행 높이가 그 행의 최대치로 맞춰져서
   'Exterior 2개' 같은 짧은 묶음 옆에 빈칸이 크게 남는다. columns는 알아서 채운다. */
.eqp { columns: 1; column-gap: var(--sp-7); margin-top: var(--sp-5); }
@media (min-width: 768px) { .eqp { columns: 2; } }
.eqp-g { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: var(--sp-6); }

.eqp-g__h {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.eqp-g__n { font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--text-muted); opacity: .75; }

.eqp-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eqp-list li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px 6px 11px;
  font-size: 13.5px; line-height: 1.35; color: var(--text-primary);
}
.eqp-list li svg { width: 12px; height: 12px; color: var(--orange-500); flex: none; }
@media (max-width: 479px) { .eqp-list li { font-size: 13px; padding: 5px 12px 5px 9px; } }

/* 4. 상세 상단(.stock-title) — 422px라 첫 화면을 제목이 다 먹었다(2026-08-20 Kevin).
   왼쪽(제목)만 줄이면 소용없다 — 섹션 높이는 오른쪽 가격 카드(260px)가 잡고 있어서
   둘을 같이 줄여야 실제로 낮아진다. */
.stock-title { padding-top: clamp(16px, 2.2vw, 26px); padding-bottom: clamp(14px, 1.8vw, 22px); }
.stock-title .h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.16; }
.stock-title .body-lg { font-size: 16.5px; line-height: 1.5; }
.stock-title__specs { margin-top: 14px; padding-top: 14px; font-size: 14.5px; }

.price-card.card { padding: 16px 18px; }
@media (min-width: 1024px) {
  .price-card { top: 88px; }
  .price-card .h3 { margin-top: 1px; }
  .price-card__buttons { margin-top: 13px; gap: 8px; }
  .price-card__buttons .btn { height: 42px; }
  .price-card__note { margin-top: 11px; line-height: 1.55; }
}

/* 5. Specifications — 10줄이 한 줄로 죽 내려가면 스크롤만 길어진다(2026-08-20 Kevin).
   768px 이상은 2단, 모바일은 그대로 1단.
   2단에서는 마지막 줄에도 밑줄을 남긴다 — :last-child만 지우면 왼쪽 칸 끝에는 줄이
   있고 오른쪽 칸 끝에는 없어서 바닥이 어긋나 보인다. */
.spec-grid { display: grid; }
@media (min-width: 768px) {
  .spec-grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .spec-grid .spec-row:last-child { border-bottom: 1px solid var(--border); }
}

/* 5b. 가격 카드 추가 압축 — 상단 높이를 잡고 있는 게 이 카드다.
   버튼 2개를 세로로 쌓으면 그것만 90px이라, 데스크톱에서는 나란히 놓는다.
   (모바일은 카드가 전폭이라 기존대로 세로로 쌓인다.) */
@media (min-width: 1024px) {
  .price-card .h3 { font-size: 20px; }
  /* 버튼은 한 개 전폭. 2단으로 쪼갰더니 1024px에서 칸이 132px까지 좁아져
     'WhatsApp Kevin'이 글자로 꽉 차 깨져 보였다(2026-08-20 Kevin). 되돌린다. */
  .price-card__buttons { grid-template-columns: 1fr; gap: 8px; }
  /* 🔴 세로 가운데 정렬은 flex로 직접 준다. 파트너 style.css가 stock.css보다 뒤에 로드돼
     .btn이 inline-flex가 아니라 inline-block으로 바뀌는데, 거기에 height만 주면
     글자가 버튼 위쪽에 딱 붙는다(2026-08-20 Kevin). height를 주는 버튼은 전부 이 짝이 필요하다. */
  .price-card__buttons .btn {
    display: flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 16px; font-size: 14px; line-height: 1;
  }
  .price-card__note { font-size: 12.5px; }
  .price-card__note a { color: var(--navy-900); font-weight: 700; }
  .price-card__note a:hover { color: var(--orange-600); }
}

/* 5c. 가격 카드의 Email 버튼이 안 보였다(2026-08-20 실측).
   파트너 사이트 style.css의 .btn-ghost는 어두운 배경용이라 '흰 글씨 + 흰색 12% 배경'인데,
   이 카드는 흰 배경이라 글자도 테두리도 사라진다 — Kevin 화면에 WhatsApp 하나만 보이던 이유.
   흰 바탕용 보조 버튼으로 되돌린다. */
.price-card .btn-ghost {
  background: transparent; color: var(--navy-900);
  border: 1px solid var(--border);
}
.price-card .btn-ghost:hover { border-color: var(--navy-900); background: var(--off-white); }

/* 6. 접근 안내 레이어 버튼도 같은 짝 문제 — height는 stock.css가, display:inline-block은
   파트너 style.css가 줘서 글자가 위로 최대 6px 치우쳐 있었다(2026-08-20 실측).
   로그아웃 방문자가 제일 먼저 보는 버튼이라 여기부터 맞춘다. */
.gate .gcta .btn {
  display: flex; align-items: center; justify-content: center; line-height: 1;
}