/* ==========================================================================
   chip — 제품 시리즈 탭 필터. 탭 전환 시 목록만 교체한다 (페이지 이동 없음)
   ========================================================================== */

.chip-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 줄바꿈된 칩 사이(세로)는 좁게, 옆(가로)은 그대로 `[2026-09-18]` —
     모바일에서 세 줄로 접히면 세로 간격이 그대로 쌓여 띠가 두꺼워 보인다 */
  gap: var(--sp-2) var(--sp-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px var(--sp-5);   /* 세로를 줄인다 `[2026-09-18]` */
  background: var(--c-bg);
  border: 1px solid var(--c-navy);
  background-origin: border-box;
  background-repeat: no-repeat;
  border-radius: 30px;
  color: var(--c-navy);
  font-size: var(--fs-base);   /* 14px `[2026-09-18]` — 12px 는 손으로 누르기에 작다 */
  font-weight: var(--fw-semibold);
  line-height: 1.67;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { background: var(--c-surface); }

.chip__count { font-weight: var(--fw-medium); }

.chip.is-active {
  background-image: var(--g-brand-soft);
  border-color: transparent;
  color: var(--c-text-invert);
}

.chip.is-disabled { opacity: .45; pointer-events: none; }

/* 모바일 — 한 줄에 셋씩 `[2026-09-18]`.
   글자 길이에 맡기면 2·2·1 로 세 줄이 되어 목록이 밀린다.
   폭을 1/3 로 못 박아 3 + 2 두 줄로 세운다. 좌우 여백은 그만큼 줄인다 */
@media (max-width: 767px) {
  /* 제품 목록과 같은 선에 맞춘다 — 화면 기본 여백(20px) 대신 12px `[2026-09-18]` */
  .chip-bar {
    gap: var(--sp-2);
    margin-inline: calc(var(--sp-3) - var(--gutter));
    /* 마지막 줄도 왼쪽 선에 맞춘다 — 가운데로 모으면 둘째 줄만 안쪽으로 들어가
       제품 카드 줄과 시작점이 어긋난다 `[2026-09-18]` */
    justify-content: flex-start;
  }

  /* 늘어나지 않게 한다(grow 0) — 마지막 줄에 둘만 남으면 그 둘이 줄을 나눠 가져
     첫 줄보다 뚱뚱해진다. 폭을 고정하고 가운데로 모은다 */
  .chip {
    flex: 0 1 calc((100% - var(--sp-2) * 2) / 3);
    min-width: 0;
    justify-content: center;
    padding-inline: var(--sp-2);
  }

  /* 개수는 뺀다 — "Flamma NHS (5)" 는 1/3 칸에 들어가지 않는다.
     개수는 목록을 보면 바로 세어지지만, 시리즈 이름이 잘리면 무엇인지 알 수 없다 */
  .chip__count { display: none; }
}

/* 시안 node 37:815 — 칩 높이 48px, 좌우 여백 40px, 글자 18px / 행간 30px */
@media (min-width: 768px) {
  .chip-bar { gap: var(--sp-6); }
  .chip { padding: var(--sp-2) var(--sp-10); font-size: var(--fs-lg); }
}