@charset "UTF-8";
:root {
  --mo-header-height: 56px;
  --mo-bottom-nav-height: 64px;
  --mo-fixed-btn-height: 52px;
  --mo-content-padding-x: 1.25rem + 1.25rem;
}
/* layout */
#pc-header > div {
  /*content inner width + padding*/
  max-width: calc(1140px + var(--mo-content-padding-x));
  margin-left: auto;
  margin-right: auto;
}
#mobile-top-navi {
  z-index: 140;
}
#mobile-top-navi > .relative {
  min-height: calc(var(--mo-header-height) - 1px);
}
#content-fixed {
  min-height: calc(100dvh - 62px - 170px);
}
#subpage-content {
  max-width: calc(1140px + var(--mo-content-padding-x));
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023.98px) {
  /* 모바일 하단 고정버튼 */
  #content-fixed:has(.fixed-b-btn) {
    padding-bottom: calc(var(--mo-bottom-nav-height) + var(--mo-fixed-btn-height));
  }
  #content-fixed:has(.fixed-b-btn.is-cart) {
    padding-bottom: calc(var(--mo-bottom-nav-height) + var(--mo-fixed-btn-height) + 61px);
  }
  #content-fixed .fixed-b-btn {
    left: 0;
    bottom: var(--mo-bottom-nav-height);
    /* z-index: 150; */
    z-index: 100;
  }
  #content-fixed .fixed-b-btn .btn {
    border-radius: 0;
  }
  #content-fixed:has(.fixed-b-p-btn) {
    padding-bottom: calc(var(--mo-bottom-nav-height) + var(--mo-fixed-btn-height) + var(--mo-content-padding-x)) !important;
  }
  #content-fixed .fixed-b-p-btn {
    left: 0;
    bottom: var(--mo-bottom-nav-height);
    z-index: 150;
  }
  #content-fixed:has(.single-frame) {
    padding-bottom: 0;
  }

  #content-fixed:has(.fixed-b-btn) + .btn-chat {
    bottom: 138px;
  }
  #content-fixed:has(.fixed-b-p-btn) + .btn-chat {
    bottom: 158px;
  }

  /* 단일 페이지인 경우 (우측상단 닫기 버튼만 있고, 하단 메뉴는 없는 페이지) */
  .single-frame {
    height: calc(100dvh - var(--mo-header-height));
  }
  .multiple-frame {
    height: calc(100dvh - var(--mo-header-height) - var(--mo-bottom-nav-height));
  }

  .garage-swiper .swiper-slide:first-child {
    margin-left: 20px;
  }
  .garage-swiper .swiper-slide:last-child {
    margin-right: 20px;
  }
}

/* 툴팁박스 커스텀테마 */
.tippy-box[data-theme~='light-shadow'] {
  padding: 9px 15px;
  line-height: 150%;
  font-size: 12px;
  color: #6B6C6B;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #DCDDDC;
  box-shadow: none;
}

/* 카카오맵 관련(테스트) */
.root_daum_roughmap .map_border {
  display: none !important;
}
.root_daum_roughmap .wrap_controllers {
  display: none;
}
.root_daum_roughmap .wrap_map {
  min-height: 100%;
  height: 100% !important;
}

/* 메인 카테고리 그리드 */
.cate-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 0.75rem;
  row-gap: 0.75rem;
  padding-bottom: 1rem;
}
@media (min-width: 1024px) {
  .cate-grid {
    grid-auto-columns: calc(16.666% - 15px);
    column-gap: 18px;
    row-gap: 1.5rem;
    padding-bottom: 1.25rem;
  }
}

/* 차량 카테고리 검색 모달 박스 - 폭 지정 (원하는 값으로 조정) */
.car-category-modal {
  max-width: 100%;
}
@media (min-width: 1024px) {
  .car-category-modal {
    max-width: 900px;
  }
}

/* 차량 카테고리 검색 모달: input/select 포커스 시 기본 파란 아웃라인/링 → 초록 계열로 변경 */
.car-category-modal input:focus,
.car-category-modal select:focus {
  outline-offset: 0;
  border-color: #006436;
  box-shadow: none;
}
/* 기존 select box처럼 텍스트(I-beam) 커서가 아닌 기본 커서 유지 */
.car-category-modal input,
.car-category-modal select {
  cursor: default;
}
/* 마우스오버 시에도 테두리를 초록 계열로 통일 */
.car-category-modal input:hover,
.car-category-modal select:hover {
  border-color: #006436;
}

/* swiper */
.swiper-pagination-bullet {
  background: #fff;
  opacity: 0.3;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}

/* 차량 검색 옵션 레이어 항목 텍스트: 최대 3줄까지 표시하고 넘치면 말줄임 (레이어는 데스크톱에서만 노출) */
.car-select-item-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}
@media screen and (max-width: 1023px) {
  #parts1Tab .cate-grid {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .car-select-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .prods-thumb-swiper {
    padding: 0 20px;
  }
  .prods-thumb-swiper .swiper-slide {
    width: 56px;
  }
  .min-w-100 {
    width: 100% !important;
  }
}