/* 청첩장 목록 맨 위 «새로 나온 디자인» 한 줄 — common/catalog_new_arrivals_row.php (2026-11-06 대표님 카드 2525 «안 1»)
 * 숫자를 새로 적지 않는다(docs/DESIGN_GRAIN_GUIDE.md) — 정본 토큰(common/bojagi-design-system.css)과 가로 목록 한 벌(.bj-rail)만.
 *   제목 = 목록 안 «혜택 줄» 제목(.bj-care-row__title · common/catalog_list_banner.php)과 같은 단계(작은 구역 제목 크기 · control 무게)
 *   카드 사진·이름 = 목록 카드와 같은 틀·같은 이름 단계·같은 글꼴(--bj-font-family) — 이름 단계는 정본의 «목록 상품 범위»(:where(.product_list_gb, … .bj-new-arrivals))가 준다
 *   «신상품 전체 보기» = 혜택 줄 작은 글(.bj-care-row__tag)과 같은 작은 글 단계(caption · control 무게) · 흐린 글색 · 누를 자리 높이는 목록 단추 높이(--bj-catalog-cta-height-mobile)
 *   간격 = --bj-space-1·2·3 · 폰 좌우 여백 = 폰 목록 여백(--wedding-catalog-page-gutter · m/wedding_catalog_modern.css.php)
 * 한 화면에 PC 4장(최대 8장 · 끌기·Shift+휠·← →·진행선으로 넘김 · 대표님 38293) · 폰 2장과 조금(손가락으로 넘김 · 진행선). 4장 이하면 넘칠 것이 없어 조작부가 숨는다. */
.bj-new-arrivals {
  /* (2026-11-06 대표님 34549 · 카드 2639) 위 필터 줄에 붙어 보였다(7px) — 위 여백도 아래와 같은 구역 간격 토큰 */
  margin: var(--bj-space-3) 0 var(--bj-space-3);
  padding: 0;
}

.bj-new-arrivals__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bj-space-2);
  margin: 0 0 var(--bj-space-1);
}

.bj-new-arrivals__title {
  margin: 0;
  color: var(--bj-ink);
  font-size: var(--bj-type-subsection);
  font-weight: var(--bj-type-control-weight);
  line-height: var(--bj-type-subsection-line);
  letter-spacing: var(--bj-type-page-tracking);
  word-break: keep-all;
}

.bj-new-arrivals__more {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--bj-catalog-cta-height-mobile);
  color: var(--bj-muted);
  font-size: var(--bj-type-caption);
  font-weight: var(--bj-type-control-weight);
  line-height: var(--bj-type-caption-line);
  text-decoration: none;
  white-space: nowrap;
}

.bj-new-arrivals__more:hover,
.bj-new-arrivals__more:focus-visible {
  color: var(--bj-ink);
}

.bj-new-arrivals__list {
  gap: var(--bj-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bj-new-arrivals__cell {
  flex: 0 0 calc((100% - 3 * var(--bj-space-2)) / 4);
  min-width: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.bj-new-arrivals__item {
  display: block;
  color: var(--bj-catalog-title-color);
  text-decoration: none;
}

.bj-new-arrivals__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 7;
  object-fit: contain;
  border-radius: var(--bj-catalog-media-radius);
  background: var(--bj-template-media-surface);
}

/* (2026-11-08 대표님 카드 2973) 이름 옆 작은 NEW — 이름이 길면 이름만 줄임표로 줄고 NEW 는 남는다 */
.bj-new-arrivals__name {
  display: flex;
  align-items: baseline;
  gap: var(--bj-space-1);
  margin-top: var(--bj-space-1);
  color: var(--bj-catalog-title-color);
  font-size: var(--bj-catalog-title-size);
  font-weight: var(--bj-catalog-title-weight);
  line-height: var(--bj-catalog-supporting-line);
  font-family: var(--bj-font-family);
}

.bj-new-arrivals__label {
  /* 안쪽 span — 사이트 공통 span 글자 규칙(12px)을 받지 않게 이름 단계를 그대로 잇는다 */
  color: inherit;
  font: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bj-new-arrivals__new {
  flex: 0 0 auto;
  min-height: 0;
}

/* (2026-11-10 대표님 웍스비 41052·41054 «새로 나온 디자인 줄에서도 샘플 담기·찜») 사진 아래 한 줄 — 사진 위에는 여전히 아무것도 얹지 않는다(카드 2973).
 *   «+ 샘플 담기» = 목록 카드 샘플 글 단추와 같은 단계(card/doc/product/wedding_catalog_refined.css.php .sample_btn_wrapper .spc_add —
 *     보조 글 크기·줄높이 · 진한 글씨·단추 무게 · 더하기/체크 가면) · 누를 자리 높이 = 목록 단추 높이(--bj-catalog-cta-height-mobile)
 *   하트 = 목록 카드와 같은 하트 그림·크기(그림 칸 = 기본 간격 셋) · 누를 자리 = 목록 단추 높이 네모 */
.bj-new-arrivals__cell {
  position: relative;
}

.bj-new-arrivals__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bj-space-1);
  margin-top: 0;   /* 누를 자리(44) 가운데 글이라 이름과 사이가 이미 목록 카드 가격 줄 간격만큼 — 위 여백을 더하면 넓어 보였다 */
}

.bj-new-arrivals .bj-new-arrivals__sample {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bj-space-1) / 2);
  width: auto;
  min-width: 0;
  height: var(--bj-catalog-cta-height-mobile);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--bj-catalog-selected-action-color);
  background: transparent;
  box-shadow: none;
  font-family: var(--bj-font-family);
  font-size: var(--bj-catalog-supporting-size);
  font-weight: var(--bj-catalog-cta-weight);
  line-height: var(--bj-catalog-supporting-line);
  white-space: nowrap;
  cursor: pointer;
}

.bj-new-arrivals .bj-new-arrivals__sample::before {
  display: block;
  flex: 0 0 var(--bj-space-2);
  width: var(--bj-space-2);
  height: var(--bj-space-2);
  margin: 0;
  background-color: currentColor;
  content: "";
  -webkit-mask: var(--bj-catalog-sample-plus-mask) center / var(--bj-space-2) var(--bj-space-2) no-repeat;
  mask: var(--bj-catalog-sample-plus-mask) center / var(--bj-space-2) var(--bj-space-2) no-repeat;
}

.bj-new-arrivals .bj-new-arrivals__sample::after {
  display: none;
  content: none;
}

.bj-new-arrivals .bj-new-arrivals__sample:hover,
.bj-new-arrivals .bj-new-arrivals__sample:focus-visible {
  color: var(--bj-text);
}

.bj-new-arrivals .bj-new-arrivals__sample.on_add_sample,
.bj-new-arrivals .bj-new-arrivals__sample.sample_btn_on {
  color: var(--bj-catalog-selected-action-color);
  font-weight: var(--bj-catalog-cta-weight);
}

.bj-new-arrivals .bj-new-arrivals__sample.on_add_sample::before,
.bj-new-arrivals .bj-new-arrivals__sample.sample_btn_on::before {
  -webkit-mask-image: var(--bj-catalog-sample-check-mask);
  mask-image: var(--bj-catalog-sample-check-mask);
}

.bj-new-arrivals .bj-new-arrivals__sample[data-sample-state="loading"]::before,
.bj-new-arrivals .bj-new-arrivals__sample[data-sample-state="error"]::before {
  opacity: 0;
}

/* 하트 = 아래 목록 카드 하트와 같은 자리·크기 — 사진 오른쪽 위(반 간격 안쪽) · 누를 자리 = 기본 간격 다섯 네모 · 그림 = 간격 셋 */
.bj-new-arrivals .bj-new-arrivals__wish {
  position: absolute;
  top: calc(var(--bj-space-1) / 2);
  right: calc(var(--bj-space-1) / 2);
  z-index: 1;
  width: calc(var(--bj-space-1) * 5);
  height: calc(var(--bj-space-1) * 5);
  margin: 0;
  padding: 0;
  border: 0;
  background: url('/card/img/product_list_heart_off.png') center / calc(var(--bj-space-1) * 3) no-repeat;
  cursor: pointer;
}

.bj-new-arrivals .bj-new-arrivals__wish.active {
  background-image: url('/card/img/product_list_heart_on.png');
}

/* 진행선은 1px 이라 누를 자리를 위아래로 넓힌다(data-rail-seek · PC) */
.bj-new-arrivals__rail[data-rail-seek] .bj-rail__progress {
  position: relative;
  overflow: visible;   /* 넓힌 누를 자리(::before)가 잘리지 않게 */
  cursor: pointer;
  touch-action: none;
}

.bj-new-arrivals__rail[data-rail-seek] .bj-rail__progress::before {
  content: "";
  position: absolute;
  inset: calc(var(--bj-space-1) * -1) 0;
}

.bj-new-arrivals--m {
  padding: 0 var(--wedding-catalog-page-gutter, var(--bj-page-gutter-mobile));
}

@media (max-width: 767px) {
  .bj-new-arrivals {
    margin-top: var(--bj-space-2);
    margin-bottom: var(--bj-space-2);
  }

  .bj-new-arrivals__list {
    gap: var(--bj-space-1);
  }

  .bj-new-arrivals__cell {
    flex-basis: calc((100% - 2 * var(--bj-space-1)) / 2.4);
  }
}