/* VKM clone overrides — loaded last. */

/* Main banner: native CSS scroll-snap carousel — swipeable (touch/trackpad)
   and fully rendered on first paint (no JS init flash). Autoplay + dots are
   layered on by JS without causing any layout shift. */
.main_visual .main_slick {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.main_visual .main_slick::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.main_visual .main_slick > div {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}
.main_visual .main_slick img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 211 / 50; /* same ratio slick applied via .slick-slide img */
}
@media (max-width: 1024px) {
  .main_visual .main_slick img { aspect-ratio: 282 / 103; }
}
@media (max-width: 640px) {
  .main_visual .main_slick img { aspect-ratio: 282 / 139; }
}

/* Desktop GNB dropdown on hover.
   The original markup reveals .gnb_2dul by adding the .gnb_1dli_over class via
   JS (hoverIntent). We reproduce the same behavior with pure CSS :hover so the
   dropdown works without the legacy menu scripts. */
#gnb .gnb_1dli:hover > .gnb_2dul {
  display: block;
}

/* Keep the dropdown open while the cursor travels from the top item to it. */
#gnb .gnb_1dli > .gnb_2dul {
  padding-top: 0;
}

/* Process images (Sales/Bidding/1:1 pages) were getting clipped because the
   container is overflow:hidden with no responsive rule on the inner <img>.
   Scale the image to fit the box. */
.sales_pro_img img {
  max-width: 100%;
  height: auto;
}

/* Signup link in the login box — no background / border, plain centered text. */
.mbskin .regist_btn {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  color: #333;
  font-size: 1em;
  text-decoration: none;
  cursor: pointer;
}
.mbskin .regist_btn:hover {
  text-decoration: underline;
}

/* The mirrored default_shop.css lacks a width rule for .sales_table, so it
   rendered at auto (content) width. The live site shows it full width. */
table.sales_table {
  width: 100%;
  border-collapse: collapse;
}
table.sales_table td {
  text-align: center;
}
table.sales_table td:first-child {
  text-align: left;
}
table.sales_table td:last-child {
  text-align: left;
}

/* default_shop.css 의 .main_latest 는 margin-top 이 주석 처리되어 있고, 뒤따르는
   .main_best / .main_auction 에만 40px 이 걸려 있다. 원본 홈에는 .main_latest 가
   하나뿐이라 문제가 없었지만 Used Cars 랜딩은 .main_latest 를 세 번(Lastest cars /
   Under $1,000 / FAQ) 쓰므로 블록끼리 붙어 보인다. 연속된 경우에만 같은 간격을 준다. */
.main_latest + .main_latest {
  margin-top: 40px;
  overflow: hidden;
}

/* 서브 콘텐츠 페이지의 이미지가 컨테이너를 넘치는 문제.
   organ.png(1127px) / network.png(1128px) 은 .wrap 이 1880px 일 때만 들어맞는
   크기인데, #mid_part 는 화면폭에 따라 훨씬 좁아진다. 원본이 기대하던
   img{max-width:100%} 규칙이 미러링된 CSS 어디에도 없어(404 나던 base.css 에
   있었던 것으로 보인다) 원본 크기 그대로 삐져나온다.

   .organ_img 의 .pc/.mo 전환이 display 로 되어 있으므로 display 는 건드리지
   않고 폭만 제한한다. */
#content img {
  max-width: 100%;
  height: auto;
}

/* 체크박스와 문구의 세로 정렬 + 간격.
   default_shop.css 가 input[type=checkbox] 를 20x20 에 테두리까지 준 상태인데
   vertical-align 이 기본값(baseline)이라, 20px 짜리 박스가 텍스트 베이스라인
   위에 올라서고 문구는 상대적으로 아래로 처져 보인다. 둘 사이 여백도 없다. */
input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 6px;
}

/* 필터의 브랜드/차종/모델 목록은 label 이 체크박스와 문구를 함께 감싸므로
   flex 로 잡아 준다. 문구가 두 줄로 넘어가도 체크박스가 가운데 정렬된다. */
.fiter_on > li > ol > li > label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.fiter_on > li > ol > li > label > input[type="checkbox"] {
  flex: none;
  margin: 0;
}

/* 필터 select 의 글자색.
   default_shop.css 는 .car_filter select 를 항상 #bdbdbd(연회색)로 둔다.
   option 에 준 color:#222 는 펼쳐진 목록에만 적용되므로, 값을 고른 뒤에도
   닫힌 상태의 글자는 계속 회색이라 읽기 어렵다.

   회색은 "Select fuel" 같은 안내문(value="") 이 선택돼 있을 때만 쓰고,
   실제 값을 고르면 검정으로 돌린다. :has() 를 모르는 브라우저는 지금과 같은
   회색으로 남으므로 더 나빠지지 않는다. */
.car_filter select {
  color: #222;
}
.car_filter select:has(option[value=""]:checked) {
  color: #bdbdbd;
}

/* 첫 화면(Lastest cars / Under $1,000)에도 Offer·Inquiry 버튼을 넣었는데,
   .car_c_btn 의 배치 규칙이 default_shop.css 에서 #sct.search_result 안쪽으로만
   걸려 있다. 버튼만 float 된 채 남지 않도록 같은 규칙을 여기에도 준다. */
.main_latest .pro_list li .car_c_btn {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 10px;
}