/* /var/www/imrentcar/app/static/css/user/brand.css */
/* -*- coding: utf-8 -*- */

/* ============================================================
   IM Rent Car User Brand Filter CSS
   ------------------------------------------------------------
   역할:
   - 소비자 메인 오른쪽 차량 선택 패널의 브랜드 유형 필터 스타일
   - 전체 / 국산 / 수입 탭
   - 기존 main.css의 brand-choice-area, brand-choice와 함께 사용

   중요:
   - 이 파일은 main.css 뒤에서 로드된다.
   - 따라서 모바일 브랜드 영역의 최종 보정은 이 파일에서 처리한다.
============================================================ */

/* ============================================================
   모바일/패널 가로 overflow 방지 보정
============================================================ */

.user-main-hero,
.user-main-inner,
.user-main-layout,
.user-hero-content,
.user-car-search-panel,
.brand-origin-tabs,
.brand-choice-area,
.car-search-form,
.car-search-guide,
.car-result-list,
.car-pagination {
  max-width: 100%;
  box-sizing: border-box;
}

.user-main-layout,
.user-hero-content,
.user-car-search-panel,
.brand-origin-tabs,
.brand-choice-area,
.car-search-form,
.car-search-guide,
.car-result-list,
.car-pagination {
  min-width: 0;
}

/* ============================================================
   브랜드 유형 탭 : 전체 / 국산 / 수입
============================================================ */

.brand-origin-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px;
  margin: 0 0 16px;
  border-radius: 18px;
  background: #f4f7fb;
  border: 1px solid rgba(228, 231, 236, 0.96);
  overflow: hidden;
}

.brand-origin-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  color: #667085;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.brand-origin-tab:hover {
  color: #183f36;
  background: #ffffff;
  border-color: rgba(24, 63, 54, 0.12);
  transform: translateY(-1px);
}

.brand-origin-tab.active {
  color: #ffffff;
  background: #183f36;
  border-color: #183f36;
  box-shadow: 0 12px 24px rgba(24, 63, 54, 0.18);
}

/* ============================================================
   브랜드 로고 영역 보정
============================================================ */

.brand-choice-area {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.brand-choice {
  min-width: 0;
  width: 100%;
  min-height: 78px;
  border-radius: 20px;
  border: 1px solid transparent;
  overflow: hidden;
}

.brand-choice:hover {
  background: #ffffff;
  border-color: rgba(72, 184, 137, 0.28);
  box-shadow: 0 12px 26px rgba(23, 32, 51, 0.06);
}

.brand-choice.active {
  background: #f0fbf6;
  border-color: rgba(72, 184, 137, 0.52);
  box-shadow: 0 14px 30px rgba(72, 184, 137, 0.12);
}

.brand-choice.active .brand-logo-box,
.brand-choice.active .brand-logo-text {
  border-color: rgba(72, 184, 137, 0.62);
  background: #ffffff;
}

.brand-logo-box,
.brand-logo-text {
  flex: 0 0 auto;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.brand-choice:hover .brand-logo-box,
.brand-choice:hover .brand-logo-text {
  transform: scale(1.04);
}

/* 브랜드 없음 메시지 */
.empty-brand-message {
  grid-column: 1 / -1;
  min-width: 0;
}

.empty-brand-message strong {
  font-size: 15px;
  font-weight: 900;
  color: #172033;
}

.empty-brand-message span {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  color: #667085;
}

/* ============================================================
   반응형
============================================================ */

@media (max-width: 768px) {
  .user-main-hero,
  .user-main-inner,
  .user-main-layout,
  .user-hero-content,
  .user-car-search-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .user-main-hero,
  .user-main-inner,
  .user-main-layout,
  .user-hero-content {
    overflow-x: hidden;
  }

  /*
    Vehicle Search 브랜드 유형 탭 모바일 잘림 보정
    ------------------------------------------------------------
    페이지 scrollWidth가 정상인데 수입 탭이 잘려 보이는 경우:
    - body overflow 문제가 아니라 탭 내부 clipping 문제일 가능성이 높다.
    - 모바일에서는 grid 대신 flex 구조로 전환해 3개 탭을 균등 배분한다.
  */
  .brand-origin-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 5px;
    margin-bottom: 14px;
    border-radius: 16px;
    overflow: visible;
  }

  .brand-origin-tab {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 36px;
    padding: 0 4px;
    border-radius: 12px;
    font-size: 13px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
    기존 main.css에서는 모바일에서도 브랜드 로고가 5열로 유지될 수 있다.
    작은 화면에서 5열은 로고 원형 크기 때문에 가로 overflow가 생길 수 있으므로
    brand.css에서 4열로 재정의한다.
  */
  .brand-choice-area {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }

  .brand-choice {
    min-height: 84px;
    padding: 0;
    flex-direction: column;
    justify-content: center;
  }

  .brand-logo-box,
  .brand-logo-text {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 520px) {
  .brand-origin-tabs {
    gap: 5px;
    padding: 5px;
  }

  .brand-origin-tab {
    font-size: 13px;
    letter-spacing: -0.03em;
  }

  .brand-choice-area {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .brand-choice {
    min-height: 76px;
    border-radius: 18px;
  }

  .brand-logo-box,
  .brand-logo-text {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 420px) {
  .brand-origin-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 5px;
    overflow: visible;
  }

  .brand-origin-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    padding: 0 3px;
    font-size: 12px;
    letter-spacing: -0.04em;
  }

  /*
    main.css의 420px 이하 설정과 충돌하지 않도록
    브랜드 로고 카드는 column 구조로 고정한다.
  */
  .brand-choice {
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
    padding: 0;
    gap: 6px;
  }

  .brand-logo-box,
  .brand-logo-text {
    width: 40px;
    height: 40px;
  }

  .brand-logo-text {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .brand-origin-tab {
    font-size: 12px;
    padding: 0 2px;
  }

  .brand-choice-area {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand-choice {
    min-height: 72px;
  }
}