@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap);
/* 예시파일 */

:root {
  --layout-color: #fff;
}

@charset 'utf-8';

:root {
  --whole-color: #fff;
  --background-color: #f5f6f8;
  --point-color: #f92626;
  --point-color-secondary: #2869f7;
  --black-color: #111;
  --dark-gray-color: #262626;

  --empty-color: #f5f6f8;
  --default-color: #ddd;
  --blue-gray-color: #3f434c;
  --gray-color: #999;
  --gray-font-color: #828282;
  --tooltip-bg-color: #f7f7f7;

  --default-font-color: #181818;
}

.product-thumb-brand {
  display: block;
  overflow: hidden;
  padding: 2px 5px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--black-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 브랜드만 노출: 이미지 너비 기준 가운데 정렬, 긴 이름은 두 줄까지 */
.product-thumb-brand--only {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  width: 100%;
  margin-bottom: 10px;
  padding: 2px 0 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

.thumb-item__info:has(.product-thumb-brand--only) {
  text-align: center;
}

.thumb-item__info:has(.product-thumb-brand--only) > a {
  display: block;
  width: 100%;
}

.brand-list__index {
  position: sticky;
  top: 50px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--light-gray-border-color, #ececec);
}

.brand-list__index-link {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--black-color);
  text-align: center;
}

.brand-list__search {
  padding: 12px 16px 4px;
}

.brand-list__search-input {
  width: 100%;
  padding: 8px 0 10px;
  font-size: 15px;
  border: 0;
  border-bottom: 1px solid var(--black-color);
  outline: none;
  background: transparent;
}

.brand-list__status {
  padding: 40px 16px;
  color: var(--gray-font-color);
  text-align: center;
}

.brand-list__section {
  scroll-margin-top: 108px;
}

.brand-list__letter {
  padding: 20px 16px 8px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.brand-list__items {
  list-style: none;
  margin: 0;
  padding: 0 16px;
}

.brand-list__item {
  display: block;
  padding: 16px 0;
  font-size: 15px;
  color: var(--default-font-color);
  border-bottom: 1px solid var(--light-gray-border-color, #ececec);
}