/* ==========================================================================
   filter-bar — INQUIRY 상단 필터 (시리즈 칩 + 제품 칩)
   제품 칩 앞의 점은 파장 스와치다. --swatch 로 색을 주입한다.
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-direction: column;
  /* 무리 사이 간격은 선이 대신한다 — 32px 은 선까지 있으면 지나치다 `[2026-09-18]` */
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--radius);
}

/* 시리즈와 제품 사이에 선 하나 `[2026-09-18]`.
   무리 이름(Series·Product)은 화면에 적지 않는다 — 칩만 봐도 무엇인지 알고,
   글자가 늘면 좁은 화면에서 읽을 것만 많아진다. 스크린리더용으로만 남긴다
   (마크업의 .filter-bar__title.visually-hidden) */
.filter-bar__group--product {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}

.filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter-bar__group--product { gap: 10px var(--sp-2); }

/* --- 시리즈 칩 -------------------------------------------------------------- */

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 15px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-chip);
  border-radius: var(--radius-pill);
  color: var(--c-text-placeholder);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1.875;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.filter-chip:hover { border-color: var(--c-blue-deep); color: var(--c-blue-deep); }

.filter-chip.is-active {
  border-color: var(--c-blue-deep);
  color: var(--c-blue-deep);
  font-weight: var(--fw-semibold);
}

/* --- 제품 칩 (스와치 점 포함) ------------------------------------------------- */

.product-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 33px;
  padding-inline: var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line-chip);
  border-radius: var(--radius-pill);
  color: var(--c-text-chip);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 2.04;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.product-chip:hover { border-color: var(--c-blue-deep); }

.product-chip.is-active {
  border-color: var(--c-blue-deep);
  color: var(--c-blue-deep);
}

.product-chip__swatch {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--swatch);
}

/* 모바일 — 칩 글자를 14px 로 `[2026-09-18]`.
   16px 은 좁은 화면에서 제품명이 든 칩(FSD™ EX Fluor 488 NHS ester)을
   두 줄로 접거나 칸 밖으로 밀어낸다 */
@media (max-width: 767px) {
  /* 제품 칩(.product-chip)도 같이 걸어야 한다 — 시리즈 칩과 클래스가 다르다 */
  .product-chip {
    height: auto;   /* 33px 고정을 푼다. 두 줄이 되면 글자가 잘린다 */
    align-items: center;
  }

  .filter-chip,
  .product-chip {
    /* 긴 제품명("FlammaBead® EX Deep Red, Carboxylated 0.2 µm")이 한 줄로 버티면
       칩이 상자 밖으로 삐져나간다. 좁은 화면에서는 칩 안에서 줄을 바꾼다 `[2026-09-18]` */
    max-width: 100%;
    padding: 5px var(--sp-4);
    font-size: var(--fs-base);   /* 14px */
    line-height: 1.4;
    white-space: normal;
    /* 두 줄을 고르게 나눈다 — 가운데 정렬로 두면 "Carboxylated" 뒤에서 잘려
       0.2 µm 만 둘째 줄에 남는다. balance 를 모르는 브라우저는 그대로 줄바꿈한다 */
    text-align: left;
    text-wrap: balance;
  }

  /* 제품 칩만 한 눈금 작게 `[2026-09-18]`.
     위의 시리즈 칩(큰 항목)과 같은 크기면 둘이 한 무리로 읽힌다.
     13px 은 토큰에 없는 값이다 — 12px 은 두 줄로 접힌 이름이 잘게 보이고
     14px 은 시리즈 칩과 구분이 안 되어, 그 사이를 요청대로 직접 지정했다 */
  .product-chip { font-size: 0.8125rem; }   /* 13px */
}

@media (min-width: 768px) {
  .filter-bar { padding: var(--sp-5) var(--sp-8); }
}

/* 활성이 되면 굵기가 바뀌면서 칩 폭이 늘어난다.
   같은 글자를 굵게 한 벌 더 깔아 굵은 상태의 폭을 미리 잡아 둔다.
   높이 0 · overflow hidden 이라 폭만 차지하고 보이지는 않는다. */
.filter-chip__label { display: inline-block; }

.filter-chip__label::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: var(--fw-semibold);
  visibility: hidden;
}

/* ==========================================================================
   back-link — 모바일 전용 뒤로가기 `[2026-09-18]`

   좁은 화면에서는 헤더 메뉴가 아이콘으로 줄어, 제품을 보다가 목록으로
   돌아갈 길이 브라우저 뒤로가기밖에 없었다. 화면 맨 위에 한 줄을 둔다.
   화살표 옆 글자는 "Back" 이 아니라 **지금 화면 이름**이다 — 어디에 있는지와
   나가는 길을 한 줄이 같이 알려 준다. 데스크톱에는 헤더 메뉴가 있어 숨긴다.
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  margin-bottom: var(--sp-2);
  color: var(--c-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-sm);
}
.back-link:hover { color: var(--c-blue-deep); }

@media (min-width: 768px) {
  .back-link { display: none; }
}