/*
 * 렌탈마켓 공개 상품 카탈로그 — .pc-* 전용
 *
 * 설계 정본 PUBLIC-UI-002-PRODUCT-CATALOG-CORE-DESIGN-v0.1.3.md §24 A-11
 *   정의 범위  .pub-root 하위의 .pc-* 만
 *   금지      .pd-* / .dt-* / .hm-* / .rm-* / .card / .chip / .pager / .media / .price 재정의
 *             :root 에서 --pub-* 재정의
 *             !important
 *
 * 카드·그리드·가격행 스타일은 public-product.css 가 제공한다.
 * 이 파일은 그 위에 카탈로그 전용 요소만 얹는다.
 * .pager 공통 규칙은 고치지 않고, 내 요소(.pc-pager 하위)에만 값을 더한다.
 *
 * 색 규칙  마젠타는 돈과 행동에만. 필터·breadcrumb·pager 는 잉크와 중립만 쓴다.
 *
 * ── TAXONOMY-006 (00 승인 2026-10-15) ────────────────────────
 *
 * 공개 사양 필터를 없앴다. .pc-filter* 규칙 전체와 그에 딸린 바닥 시트 ·
 * 인라인 패널 · 필터 아이콘(.pc-ico)이 함께 사라졌다.
 * 「적용된 조건」 줄(.pc-applied)도 함께 사라졌다 — 풀어야 할 조건이 없다.
 *
 * 그 자리에 **분류 탭(.pc-taxo)** 이 들어온다.
 *   브랜드는 알약(.chip), 분류는 글자 탭이다. 두 줄이 같은 모양이면
 *   손님이 「같은 종류의 선택」으로 읽는다.
 *   크기는 --fs-label 하나로 맞추고 두께와 잉크로만 단을 구분한다.
 *
 * 세로 리듬을 한 칸씩 올렸다(00 지시 2026-10-15 — "1.5배씩은 더").
 *   전부 기존 토큰 안에서 올린 값이다. 토큰 밖 숫자를 만들지 않는다.
 *
 * ── UI-002 (00 디자인 지시 2026-10-14) ───────────────────────
 *
 * breakpoint 가 하나로 줄었다.
 *   이전  브랜드 필터 1024px · 정렬 768px — 두 축이 따로 놀았다
 *   지금  브랜드는 모든 폭에서 고정 chip, 정렬은 모든 폭에서 <details>
 *         (필터 <details> 는 TAXONOMY-006 에서 사라졌다 — 아래 '남은 것' 참고)
 *
 * 글자 위계는 두께로만 준다.
 *   크기는 --fs-label 하나로 맞추고 700 / 600 / 400 으로 단을 구분한다.
 *   크기·색·두께를 동시에 움직이면 같은 층인지 매번 다시 판단하게 된다.
 *
 * no-JS 우선(설계 C-2) — TAXONOMY-006 이후 **더 강해졌다**
 *   .pc-enhanced 가 필요하던 유일한 자리(모바일 필터 시트)가 사라졌다.
 *   정렬은 링크 목록이라 JS 없이 동작하고, 브랜드·분류 줄의 좌우 스크롤도
 *   네이티브 overflow-x 다. 이 파일은 이제 JS 에 의존하는 규칙이 하나도 없다.
 */

/* ── breadcrumb ─────────────────────────────────────────── */
.pub-root .pc-crumb{margin-bottom:var(--s5);}      /* 12 → 20 (세로 리듬) */
.pub-root .pc-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .pc-crumb li{display:inline-flex;align-items:center;}
.pub-root .pc-crumb li + li::before{content:"›";margin-right:var(--s2);color:var(--pub-ink-4);}
.pub-root .pc-crumb a{color:var(--pub-ink-3);}
.pub-root .pc-crumb a:hover{color:var(--pub-ink);}

/* ── 툴바 ───────────────────────────────────────────────── */
.pub-root .pc-toolbar{margin-bottom:var(--s5);}

/* ── 브랜드 — 모든 폭에서 목록 위에 고정 ──────────────────
 * .chip 은 public-components.css 소유다. 재정의하지 않고 그대로 쓴다.
 * 터치 영역 보정만 내 클래스(.pc-brand-filter__item)에 건다.
 */
.pub-root .pc-brand-filter--pin{display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-bottom:var(--s3);}
/*
 * 가운데 정렬 (00 확정 레이아웃 2026-10-15).
 *
 * ★ safe center 가 핵심이다.
 *   그냥 center 로 두고 넘치게 하면 **넘친 쪽이 스크롤로 닿지 않는다.**
 *   가운데 정렬이 시작 쪽으로 밀어낸 영역은 스크롤 원점 밖이라
 *   좁은 폭에서 첫 칩(「전체」)에 영영 못 간다. 실제로 깨지는 자리다.
 *   safe center 는 들어가면 가운데, 넘치면 시작 정렬로 자동 전환한다.
 *   지원하지 않는 브라우저는 앞줄 center 를 쓰고, 좁은 폭 규칙이 따로 못박는다.
 */
.pub-root .pc-brand-filter--center{justify-content:center;justify-content:safe center;
  gap:var(--s3);margin-bottom:var(--s10);}   /* 00 실측 지정 40px (2026-10-15 조정본) */

/* ── 제목 — 넓은 폭에서 가운데 (00 확정 레이아웃) ───────────
 * .pd-head 는 public-product.css 소유다. 재정의하지 않고 이 클래스에만 값을 건다.
 */
.pub-root .pc-head--center{text-align:center;padding-block:var(--s8) var(--s10);}

/* ── 분류 탭 — 브랜드 줄 아래 독립 줄 ──────────────────────
 * 알약이 아니라 글자다. 선택 상태는 두께와 잉크로만 말한다.
 * 밑줄·테두리를 쓰지 않는다 — 결과 줄을 테두리로 묶지 않는 기존 지시와 같은 방향이다.
 */
.pub-root .pc-taxo{display:flex;align-items:center;gap:var(--s6);
  justify-content:center;justify-content:safe center;margin-bottom:var(--s8);}
.pub-root .pc-taxo a{font-size:var(--fs-label);font-weight:var(--fw-r);color:var(--pub-ink-3);
  white-space:nowrap;padding-block:var(--s2);}
.pub-root .pc-taxo a:hover{color:var(--pub-ink);text-decoration:none;}
.pub-root .pc-taxo a[aria-current="page"]{color:var(--pub-ink);font-weight:var(--fw-b);}
.pub-root .pc-brand-filter__item{display:inline-flex;align-items:center;min-height:40px;}
/* 0건인데 남아 있는 것 = 선택된 값. 흐리게 두되 지우지 않는다 (§E-4) */
.pub-root .pc-brand-filter__item.is-zero{opacity:.55;}

/* ── 결과 줄 — 총 N개 … 정렬 ──────────────────────────────
 * 테두리로 묶지 않고 간격으로만 나눈다(00 지시).
 * .pd-bar 는 공용 클래스라 내 .pc-toolbar 안으로 한정해서만 값을 더한다.
 * 아래 여백을 한 칸 올린다(20 → 32).
 */
.pub-root .pc-toolbar .pd-bar{position:relative;margin-bottom:var(--s8);}
.pub-root .pc-tools{display:flex;align-items:center;gap:var(--s4);margin-left:auto;}

/* 정렬 트리거 — 상자 없이 글자와 간격만 */
.pub-root .pc-sortmenu__summary{display:inline-flex;align-items:center;gap:var(--s2);
  min-height:40px;cursor:pointer;list-style:none;white-space:nowrap;
  font-size:var(--fs-label);font-weight:var(--fw-sb);color:var(--pub-ink);}
.pub-root .pc-sortmenu__summary::-webkit-details-marker{display:none;}
.pub-root .pc-sortmenu__summary::after{content:"";width:8px;height:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);}
.pub-root .pc-sortmenu[open] > .pc-sortmenu__summary::after{
  transform:rotate(-135deg) translate(-2px,-2px);}

/* ── 정렬 — 링크 목록 드롭다운 ─────────────────────────────
 * 제출 버튼이 없다. 링크라 누르면 바로 이동하고 JS 가 필요 없다.
 * $link() 가 category · brand · spec 을 유지하므로 정렬만 바뀐다.
 */
.pub-root .pc-sortmenu__body{position:absolute;top:calc(100% + var(--s2));right:0;
  /* 정렬 드롭다운은 필터 패널보다 한 단 위다 (GPT10 RC1 blocker · 2026-10-14).
     둘은 동시에 열릴 수 있고 겹쳐도 된다 — 배타로 막지 않는다.
     같은 --z-modal 이면 DOM 뒤쪽(필터 패널)이 덮어 정렬 링크 4개가 전부 안 눌렸다(실측). */
  z-index:calc(var(--z-modal) + 1);min-width:168px;padding:var(--s2) 0;
  display:flex;flex-direction:column;
  border:1px solid var(--pub-line);border-radius:var(--r2);background:var(--pub-bg);
  box-shadow:0 8px 24px rgba(30,23,35,.12);}
.pub-root .pc-sortmenu__body a{padding:var(--s2) var(--s4);
  font-size:var(--fs-label);font-weight:var(--fw-r);color:var(--pub-ink-3);}
.pub-root .pc-sortmenu__body a:hover{color:var(--pub-ink);text-decoration:none;}
.pub-root .pc-sortmenu__body a[aria-current="true"]{color:var(--pub-ink);font-weight:var(--fw-b);}

/* ── pager (RC2 P1 · P3) ────────────────────────────────
 * .pager 공통 규칙은 고치지 않는다. 내 하위 요소에만 값을 더한다.
 * 공통 40x40 을 44x44 로 올린다(설계 최소 터치 영역).
 */
.pub-root .pc-pager .pc-pager__n,
.pub-root .pc-pager .pc-pager__step{display:inline-grid;place-items:center;
  min-width:44px;min-height:44px;padding:0 var(--s2);}
.pub-root .pc-pager .pc-pager__gap{display:inline-grid;place-items:center;
  min-width:32px;min-height:44px;color:var(--pub-ink-4);}
.pub-root .pc-pager .pc-pager__step{white-space:nowrap;}

/* 모바일 숫자 상한 5.
   어떤 번호를 감출지는 서버가 정한다(.pc-pager__wide).
   nth-of-type 으로 순서를 추측해 처음·끝 바로가기를 잘못 감추지 않는다. */
@media (max-width:599px){
  .pub-root .pc-pager .pc-pager__wide{display:none;}
}

/* ── 좁은 폭 — 왼쪽 정렬 · 두 줄 좌우 드래그 ───────────────
 * 00 지시 2026-10-15
 *   "모바일은 위에 브랜드 버튼 포함 좌우 드래그되는 버튼으로 만들어"
 *   "모바일은 PC랑 다르게 정수기 글씨까지 왼쪽 정렬로 맞춰도 돼"
 *
 * 왼쪽 정렬로 내리면 breadcrumb · 제목 · 브랜드 · 분류 · 총 N개 가
 * 한 세로선에서 시작한다. 가운데 정렬은 넓은 폭에서만 쓴다.
 *
 * 드래그는 JS 가 아니다. 터치에서 손가락으로 미는 것이 곧 네이티브 가로 스크롤이다.
 * JS drag 를 얹으면 no-JS 계약이 깨지고 터치 스크롤과 서로 싸운다.
 *
 * 화면 끝까지 흘려보낸다(bleed). 컨테이너 안에서 끊기면 「여기서 끝」으로 읽힌다.
 * 음수 margin 으로 컨테이너 패딩을 상쇄하고 같은 값을 안쪽 padding 으로 돌려준다 —
 * 그래야 첫·마지막 항목이 화면 가장자리에 붙지 않는다.
 */
@media (max-width:767px){
  .pub-root .pc-head--center{text-align:left;padding-block:var(--s6) var(--s8);}

  .pub-root .pc-brand-filter--pin,
  .pub-root .pc-taxo{
    flex-wrap:nowrap;
    justify-content:flex-start;      /* safe center 미지원 브라우저까지 못박는다 */
    overflow-x:auto;
    overscroll-behavior-x:contain;   /* 끝에서 더 밀어도 브라우저 뒤로가기를 부르지 않는다 */
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--s4) * -1);
    padding-inline:var(--s4);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .pub-root .pc-brand-filter--pin::-webkit-scrollbar,
  .pub-root .pc-taxo::-webkit-scrollbar{display:none;}
}

/* ══ 카탈로그 safe area (UI-003 RC2 · 00 결정 2026-10-14) ═══
 *
 * 1024~1407px 에서 우측 고정 상담 레일이 상품 그리드를 덮어
 * **가격 2건이 읽히지 않았다**(폭을 32px 간격으로 훑어 실측).
 *   1024~1280  겹침 64px · 1366  21px · 1376  16px · 1408  0
 *
 * 레일을 숨기지 않는다 · .rm-side 를 고치지 않는다 · public-counsel-cta.css 를
 * override 하지 않는다. 문제가 나는 화면의 콘텐츠 폭만 안쪽으로 들인다.
 *
 * 레일 소유자가 쓰는 값을 그대로 읽는다 — right:var(--s5) · 폭 var(--rm-side-w).
 * 둘 다 public-counsel-cta.css 가 @media (min-width:1024px) 안에서 정의한다.
 * 레일 폭이 바뀌면 이 규칙도 따라간다. 숫자를 베껴 적지 않는다.
 * 자산 조합이 어긋나 토큰이 없을 때를 대비해 76px 를 fallback 으로 둔다.
 *
 * 1408px 부터는 규칙이 꺼지고 기존 폭으로 돌아간다 — 그 위에서는 겹치지 않는다.
 */
@media (min-width:1024px) and (max-width:1407px){
  .pub-root .pc-catalog-container{
    padding-right:calc(var(--gutter) + var(--rm-side-w, 76px) + var(--s2));
  }
}