@charset "utf-8";
/*--------------------------------------------------------------------------------------
main.html 전용 스타일 (공용 common.css/style.css 토큰을 재사용)
----------------------------------------------------------------------------------------*/

/* 1. 상단 프로모션 바 */
.promo_top_bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -70px;
  width: 500px;
  height: 44px;
  background-color: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 0 40px;
  z-index: 50;
}

/* overlay가 page_title_group 안에 중첩되어 있어
   글로벌 스택 기준으로 헤더(1000) > 프로모션바(1001 제외) > overlay 순서가 되도록 헤더를 올림.
   overlay(z-index:999)는 헤더 stacking context 내부에서 버튼(static)보다 위로 그려짐. */
.page_title_group {
  z-index: 1000;
}

@media screen and (max-width: 880px) {
  .promo_top_bar {
    margin-left: -250px;
  }
}

@media screen and (max-width: 500px) {
  .promo_top_bar {
    width: 100%;
    left: 0;
    margin: 0;
  }
}

.promo_top_bar .close_btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-mask: url(../images/icon/close.svg) center / contain no-repeat;
  mask: url(../images/icon/close.svg) center / contain no-repeat;
}

.promo_top_bar.hide {
  display: none;
}

/* 2. 헤더 우측 영역(마이페이지+햄버거) */
.header_right_group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.header_my_link {
  display: flex;
  width: 24px;
  height: 24px;
  background-color: #b2b2b2;
  -webkit-mask: url(../images/icon/ico-user.svg) center / contain no-repeat;
  mask: url(../images/icon/ico-user.svg) center / contain no-repeat;
}

/* 3. 퀵메뉴 (재고특가/즉시출고/출고이벤트 등) */
.quick_menu {
  display: flex;
  gap: 23px;
  padding: 10px 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  margin-bottom: 20px;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 40px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 calc(100% - 40px),
    transparent 100%
  );
}

.quick_menu.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.quick_menu::-webkit-scrollbar {
  display: none;
}

.quick_menu_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  cursor: pointer;
}

.quick_menu_item .ico_circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #eef0f3;
  box-shadow: 8px 10px 18px rgba(25, 35, 55, 0.08);
}

.quick_menu_item .ico_circle i {
  width: 34px;
  height: 34px;
  background-color: var(--primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ico_circle i.q_stock {
  background-image: url(../images/icon/ico-main-1.svg);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.ico_circle i.q_instant {
  background-image: url(../images/icon/ico-main-2.svg);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.ico_circle i.q_event {
  background-image: url(../images/icon/ico-main-3.svg);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.ico_circle i.q_review_event {
  background-image: url(../images/icon/ico-main-4.svg);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.ico_circle i.q_discount {
  background-image: url(../images/icon/ico-main-5.svg);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.ico_circle i.q_review {
  background-image: url(../images/icon/ico-main-6.svg);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.quick_menu_item .ico_circle .badge {
  position: absolute;
  bottom: 10px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background-color: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  white-space: nowrap;
}

.quick_menu_item .txt {
  font-size: 13px;
  font-weight: 500;
  color: #686868;
  line-height: 1.3;
  word-break: keep-all;
}

/* 4. 메인 비주얼(히어로 배너) */
.hero_banner {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
}

.hero_banner .swiper-slide img {
  width: 100%;
  aspect-ratio: 15 / 8;
  object-fit: cover;
}

.hero_banner .swiper-pagination {
  bottom: 12px !important;
  right: 12px !important;
  left: auto !important;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 100px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.hero_banner .swiper-pagination::after {
  content: "›";
  font-weight: 700;
}

/* 5. 정확한 견적 비교 섹션 */
.compare_section {
  padding: 54px 0 0;
}

.compare_section .compare_title {
  font-size: 19px;
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1.4;
  margin-bottom: 14px;
}

.compare_box {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
  overflow: hidden;
}

.compare_box .compare_num {
  font-size: 40px;
  font-weight: 500;
  color: #1f1f1f;
  flex-shrink: 0;
}

.compare_box .compare_desc {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: #3b3b3b;
  line-height: 1.4;
  font-weight: 400;
  word-break: keep-all;
}

.compare_box .compare_desc b {
  font-weight: 700;
  color: #1f1f1f;
}

.compare_box .partner_logos {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  width: 161px;
  max-width: 161px;
  aspect-ratio: 1905 / 826;
  margin-left: auto;
  overflow: hidden;
}

.compare_box .partner_logos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 500px) {
  .compare_box .compare_desc .mobile_hide {
    display: none;
  }
}

/* 6. 즉시 출고 브랜드 섹션 */
.instant_section {
  padding: 60px 0 0;
}

.instant_section .instant_title {
  font-size: 19px;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 14px;
}

.instant_layout {
  display: flex;
  gap: 8px;
}

.instant_promo_card {
  flex: 0 0 28%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--primary-light);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 4px 8px 14px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.instant_promo_card .deco_icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  pointer-events: none;
  background-color: var(--primary);
  -webkit-mask: url(../images/icon/ico-car-star.svg) center / contain no-repeat;
  mask: url(../images/icon/ico-car-star.svg) center / contain no-repeat;
}

.instant_brand_grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-width: 0;
}

.instant_promo_card .txt {
  font-size: 16px;
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1.4;
  word-break: keep-all;
}

.instant_promo_card .more_btn {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: #56ad4f;
}

.instant_brand_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #fff;
  border-radius: 12px;
  padding: 14px 6px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.instant_brand_card img {
  width: 33px;
  height: 33px;
  object-fit: contain;
}

.instant_brand_card .brand_name {
  font-size: 12px;
  color: #222122;
  font-weight: 500;
}

.instant_brand_card .brand_count {
  font-size: 16px;
  font-weight: 700;
  color: #1f1f1f;
}

.instant_brand_card .brand_count .unit {
  font-size: 12px;
  font-weight: 500;
  color: #888;
  margin-left: 2px;
}

/* 7. 장기렌트 재고 특가 */
.instant_section + .sub_contents {
  margin-top: 54px;
}

/* 필터칩 */
.filter_chip_group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.filter_chip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #3b3b3b;
  background-color: #fff;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.035);
}

.filter_chip.on {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 8. 재고 특가 리스트 */
.stock_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stock_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.045);
}

.stock_item .stock_top_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stock_item .stock_no {
  font-size: 12px;
  color: #535353;
}

.stock_item .stock_partner {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #767676;
  background-color: #f1f2f4;
  border-radius: 6px;
  padding: 4px 8px;
}

.stock_item .stock_body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stock_item .stock_img {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 12px;
}

.stock_item .stock_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stock_item .stock_info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.stock_item .stock_model {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  margin-bottom: 2px;
}

.stock_item .stock_price {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.stock_item .stock_trim {
  font-size: 13px;
  font-weight: 400;
  color: #000;
  word-break: keep-all;
}

@media screen and (max-width: 500px) {
  .stock_item .stock_model {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .stock_item .stock_price {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .stock_item .stock_trim {
    font-size: 11px;
  }
}

/* 9. 신차 할인 비교 */
.discount_section {
  padding: 30px 0 0;
  padding-top: 0;
  margin-top: 54px;
}

.discount_section .discount_desc {
  font-size: 13px;
  color: #888;
  margin-top: -8px;
  margin-bottom: 14px;
}

.discount_compare_box {
  background-color: #fff;
  border-radius: 14px;
  padding: 4px 16px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.07),
    0 10px 20px rgba(0, 0, 0, 0.06);
}

.discount_compare_row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid #f1f2f4;
}

.discount_compare_row:last-of-type {
  border-bottom: 0;
}

.discount_compare_row .compare_chip {
  display: block;
  font-size: 12px;
  color: #000000;
  background-color: #f2f2f4;
  border-radius: 100px;
  padding: 3px 7px;
  width: fit-content;
  font-weight: 400;
}

.discount_compare_row .discount_bottom_row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.discount_compare_row .brand_logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 4px;
}

.discount_compare_row .brand_name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

.discount_compare_row .rate {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  font-size: 13px;
  color: #000;
}

.discount_compare_row .rate .num {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.double_deal_title {
  margin-top: 54px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: #1f1f1f;
}

.double_deal_title .main_color {
  font-weight: 700;
  color: var(--primary);
}

/* 10. 더블특가 배너 */
.double_deal_banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(105deg, #239f59 0%, #168a4a 48%, #006e3a 100%);
  border-radius: 14px;
  padding: 18px;
  margin-top: 20px;
  box-shadow:
    0 18px 40px rgba(22, 32, 45, 0.16),
    0 4px 12px rgba(22, 32, 45, 0.08);
}

.double_deal_banner .txt p {
  font-size: 12px;
  color: #a1e6b5;
  margin-bottom: 4px;
}

.double_deal_banner .txt strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.double_deal_banner button {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  background-color: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  white-space: nowrap;
}

/* 11. 고객후기 카드 ~ 카카오 상담 (백색 배경 영역) */
.white_section {
  background-color: #fff;
  margin: 0 -15px;
  padding: 0 15px;
}

/* 자주 묻는 질문 — white_section 안에서만 위 간격 확보 (common.css의 .sub_contents에 영향 없음) */
.white_section .sub_contents {
  margin-top: 28px;
}

.review_section {
  padding: 54px 0 0;
}

.review_band {
  position: relative;
  margin: 0 -15px;
}

.review_band_bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: #f3f4f7;
  z-index: 0;
}

.review_scroll {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  padding: 0 15px 36px;
  overflow-x: auto;
  scrollbar-width: none;
}

.review_scroll::-webkit-scrollbar {
  display: none;
}

.review_card2 {
  flex-shrink: 0;
  width: 220px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.06),
    6px 10px 22px rgba(0, 0, 0, 0.08);
  padding: 16px;
}

.review_card2 .review_car {
  font-size: 13px;
  font-weight: 400;
  color: var(--primary);
  margin-bottom: 8px;
}

.review_card2 .review_star {
  margin-bottom: 10px;
}

.review_card2 .review_star .star {
  font-size: 14px;
  color: #e0e0e0;
}

.review_card2 .review_star .star.on {
  color: #ffc107;
}

.review_card2 .review_txt {
  font-size: 13px;
  color: #000;
  line-height: 1.5;
  word-break: keep-all;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  margin-bottom: 50px;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review_card2 .review_user {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  background-color: var(--primary-light);
  border-radius: 3px;
  padding: 5px 10px;
  width: 100%;
}

/* 11-1. 자주 묻는 질문 (질문마다 개별 카드) */
.faq_group {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq_item {
  background-color: #f8f8f8;
  border-radius: 12px;
  padding: 0 16px;
  border-bottom: 0;
}

/* 12. 카카오 상담 배너 */
.kakao_consult {
  padding: 54px 0 40px;
}

/* .row가 헤더 높이만큼 relative top 오프셋을 가져서, .row 바깥의
   .section_footer가 실제 콘텐츠 끝보다 일찍 시작해 카카오 상담과
   겹치는 문제 보정 */
main.home_page ~ .section_footer {
  margin-top: 70px;
}

.kakao_consult .tab_bubble {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 0 0 10px 16px;
  padding: 8px 24px 8px 10px;
  border-radius: 999px;
  background: #239f59;
  box-sizing: border-box;
  color: #9dd4b5;
  font-size: clamp(11px, 3.2vw, 13px);
  line-height: 1.4;
  word-break: keep-all;
  font-size: 12px;
  font-weight: 400;
}

.kakao_consult .tab_bubble::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0px;
  width: 36px;
  height: 20px;
  background: #239f59;
  clip-path: polygon(0 0, 100% 100%, 20% 100%);
}

.kakao_consult .tab_bubble .chaq_logo_img {
  display: block;
  flex-shrink: 0;
  width: clamp(36px, 10vw, 50px);
  aspect-ratio: 332 / 98;
  background-color: #fff;
  -webkit-mask: url(../images/common/logo-chaq.svg) center / contain no-repeat;
  mask: url(../images/common/logo-chaq.svg) center / contain no-repeat;
}

@media screen and (max-width: 360px) {
  .kakao_consult .tab_bubble {
    width: calc(100% - 24px);
    margin-left: 12px;
    padding: 8px 20px 8px 8px;
    gap: 6px 10px;
    font-size: 11px;
  }

  .kakao_consult .tab_bubble .logo_badge {
    padding: 3px 8px;
  }
}

.kakao_consult .consult_box {
  position: relative;
  display: block;
  background: linear-gradient(135deg, #f7f7f8 0%, #ececee 100%);
  border-radius: 16px;
  padding: 24px 22px 22px;
  overflow: hidden;
}

.kakao_consult .consult_box .txt h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 8px;
}

.kakao_consult .consult_box .txt p {
  font-size: 13px;
  font-weight: 500;
  color: #4a4a4a;
  line-height: 1.5;
}

.kakao_consult .consult_btns {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.kakao_consult .consult_btns .btn_main {
  background: linear-gradient(180deg, #239f59 0%, #219554 52%, #1d824a 100%);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
}

.kakao_consult .consult_btns .btn_kakao_channel {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #764c24 0%, #724a23 52%, #6c4420 100%);
  border-radius: 10px;
  padding: 10px 14px;
  white-space: nowrap;
}

.kakao_consult .consult_box .kakao_bubble_ico {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 72px;
  aspect-ratio: 912 / 849;
  background-image: url(../images/common/img-bubble-talk.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.16))
    drop-shadow(11px 13px 10px rgba(0, 0, 0, 0.14));
  overflow: visible;
}

/* 13. 사업자 정보(footer 보강) */
.biz_info_toggle {
  margin-top: 14px;
}

.biz_info_toggle summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #848484;
  cursor: pointer;
  list-style: none;
}

.biz_info_toggle summary::-webkit-details-marker {
  display: none;
}

.biz_info_toggle summary::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #3b3b3b;
  -webkit-mask: url(../images/icon/g-down.svg) center / contain no-repeat;
  mask: url(../images/icon/g-down.svg) center / contain no-repeat;
  transition: transform 0.25s ease;
}

.biz_info_toggle[open] summary::after {
  transform: rotate(180deg);
}

.biz_info_toggle .biz_links {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}

.biz_info_toggle .biz_links a {
  font-size: 12px;
  color: #999;
}

/* 15. 프로모션 바 노출 시 헤더/본문 오프셋 (다른 페이지에는 영향 없음) */
.page_title_group.has_promo {
  top: 44px;
}

.home_page .nav .row {
  top: 102px;
}

.home_page .nav .row .content {
  padding-top: 6px;
}

.home_page.promo_closed .nav .row {
  top: 58px;
}