/* 렌탈마켓 공개 공통 컴포넌트 — 버튼 · 칩 · 배지 · 가격 · 이미지 · 안내 · 페이저 */

/* ── 버튼 ──
   primary 는 화면당 1개. 전환 행동 전용이다. */
.pub-root .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:var(--h-md);padding:0 var(--s5);border:0;border-radius:var(--r1);cursor:pointer;
  background:var(--pub-bg);color:var(--pub-ink);
  box-shadow:inset 0 0 0 1px var(--pub-line-2);
  font-size:var(--fs-label);font-weight:var(--fw-sb);letter-spacing:var(--tr-1);white-space:nowrap;}
.pub-root .btn:hover{background:var(--pub-bg-2);text-decoration:none;}
/* 주 CTA 그라데이션.
   진파랑 하나로 채우면 넓은 버튼에서 밋밋하다.
   글자가 놓이는 가운데 영역은 대비 4.68 이상이라 읽힘에 문제가 없다.

   hover 는 background 를 갈아끼우지 않고 filter 로 전체를 누른다.
   그라데이션은 단색처럼 press 색 하나로 바꿀 수 없다. */
.pub-root .btn--primary{
  background:linear-gradient(100deg,var(--pub-accent-grad) 0%,var(--pub-accent) 100%);
  color:var(--pub-on-accent);box-shadow:none;}
.pub-root .btn--primary:hover{filter:brightness(.93);}
.pub-root .btn--primary:active{filter:brightness(.88);}
.pub-root .btn--quiet{box-shadow:none;color:var(--pub-ink-2);}
.pub-root .btn--sm{height:var(--h-sm);padding:0 var(--s3);font-size:var(--fs-caption);}
.pub-root .btn--lg{height:var(--h-lg);padding:0 var(--s6);font-size:var(--fs-body);}
.pub-root .btn--block{width:100%;}
/* 단종 CTA. disabled 인 button 은 click 이벤트 자체가 발생하지 않아
   레거시 counsel.html 의 위임 핸들러에 도달하지 않는다. */
.pub-root .btn[disabled]{background:var(--pub-bg-3);color:var(--pub-ink-3);box-shadow:none;cursor:not-allowed;}

/* ── 칩 : 필터. 선택은 잉크 채움(accent 아님) ── */
.pub-root .chips{display:flex;flex-wrap:wrap;gap:var(--s2);}
.pub-root .chip{display:inline-flex;align-items:center;height:var(--h-md);padding:0 var(--s5);border:0;
  border-radius:var(--r-pill);background:var(--pub-bg-3);color:var(--pub-ink-2);
  font-size:var(--fs-label);font-weight:var(--fw-m);letter-spacing:var(--tr-1);
  cursor:pointer;white-space:nowrap;}
.pub-root .chip:hover{color:var(--pub-ink);text-decoration:none;}
/* 선택 상태는 accent 로. 검정은 「선택됨」이 아니라 「그냥 진한 chip」으로 읽힌다.
   00 승인 2026-10-14 (색 A · --pub-accent 5.5:1). 토큰 밖 색을 만들지 않는다. */
.pub-root .chip[aria-current="true"]{background:var(--pub-accent);color:var(--pub-on-accent);font-weight:var(--fw-sb);}

/* ── 배지 : 한 곳에 최대 2개. 상태가 있으면 항상 첫 자리 ── */
.pub-root .badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r1);
  background:var(--pub-bg-3);color:var(--pub-ink-2);
  font-size:var(--fs-caption);font-weight:var(--fw-b);letter-spacing:var(--tr-1);white-space:nowrap;}
/*
 * 혜택 배지 (DESIGN-REFINEMENT).
 *
 * 진한 청록 단색에서 연한 남색 그라데이션으로 바꿨다.
 *   조건표에서 셀마다 반복되니 표가 얼룩덜룩했고
 *   가격이 주인공인데 배지가 먼저 눈에 들어왔다.
 *
 * accent 계열이라 제휴카드 할인가 · CTA 버튼과 한 색으로 묶인다.
 * 반값 표기가 나오는 모든 자리(카드 · HOME · 상세 상단 · 조건표)가
 * 같은 색을 쓴다.
 */
.pub-root .badge--benefit{background:var(--pub-benefit-grad);
  color:var(--pub-benefit-grad-ink);
  box-shadow:inset 0 0 0 1px var(--pub-benefit-grad-line);}
.pub-root .badge--benefit-soft{background:var(--pub-benefit-soft);color:var(--pub-benefit-ink);}
.pub-root .badge--status{background:var(--pub-ink);color:var(--pub-on-accent);}            /* 판매상태 = 무채색 */
.pub-root .badge--outline{background:transparent;color:var(--pub-ink-2);box-shadow:inset 0 0 0 1px var(--pub-line-2);}
.pub-root .badge--lg{height:30px;padding:0 12px;font-size:var(--fs-label);}
.pub-root .badges{display:flex;flex-wrap:wrap;gap:var(--s1);}
.pub-root .badges--over{position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  flex-direction:column;align-items:flex-start;}

/* ── 가격 : 숫자와 '원' 은 한 요소다 ── */
.pub-root .price{display:inline-flex;align-items:baseline;gap:var(--s1);}
.pub-root .price__per{font-size:var(--fs-caption);font-weight:var(--fw-m);color:var(--pub-ink-3);}
.pub-root .price__num{font-size:var(--fs-price);font-weight:var(--fw-b);letter-spacing:var(--tr-3);}
.pub-root .price--hero .price__num{font-size:var(--fs-price-hero);font-weight:var(--fw-eb);}
.pub-root .price--hero .price__per{font-size:var(--fs-label);}
.pub-root .price--sub .price__num{font-size:var(--fs-price-sub);font-weight:var(--fw-sb);}
.pub-root .price--muted .price__num{font-size:var(--fs-price-sub);font-weight:var(--fw-m);color:var(--pub-ink-3);}
.pub-root .price--accent .price__num,.pub-root .price--accent .price__per{color:var(--pub-accent);}

/* ── 이미지 : display 를 반드시 선언한다.
   span 요소에 이 클래스를 쓰면 기본이 inline 이라
   width 와 aspect-ratio 가 무시되어 높이 0 으로 찌그러진다. ── */
/*
 * 썸네일 경계 (PUBLIC-THUMB-EDGE · 사용자 승인 2026-09-16).
 *
 * 흰 제품 사진이 흰 배경에 놓이면 어디까지가 제품인지 보이지 않는다.
 * 얇은 선 하나와 아주 옅은 그림자로 바닥에서 살짝 떼어 놓는다.
 *
 * ★ 선을 border 로 그리지 않는다.
 *   border 1px 은 양쪽에서 2px 를 먹는다. 4:5 · 1:1 비율에서 소수 픽셀이 생겨
 *   카드마다 높이가 미세하게 어긋난다. inset 그림자는 박스 크기를 바꾸지 않는다.
 *   홈 혜택 썸네일(.hm-feat__media)이 같은 이유로 이미 이 방식을 쓴다. 맞춰 둔다.
 *
 * 범위는 목록 · 카탈로그 카드(.card)뿐이다.
 *   상세 대표 이미지와 갤러리 썸네일은 자기 규칙(.dt-thumb .media 등)이 이미 있다.
 *   거기까지 넓히면 선택 표시와 겹쳐 무엇이 선택된 것인지 흐려진다.
 *
 * 그림자는 2px 아래 · 7px 번짐 · 불투명도 5% 다. 카드처럼 떠 보이면 안 된다.
 * 목록이 한 화면에 20장 넘게 깔리므로 조금만 진해도 화면이 시끄러워진다.
 */
.pub-root .media{display:block;position:relative;width:100%;background:var(--pub-bg-3);
  border-radius:var(--r1);overflow:hidden;}
/* 카드 썸네일에만 준다. 상세 대표 이미지 · 갤러리 썸네일은 자기 규칙이 따로 있다. */
.pub-root .card .media{box-shadow:inset 0 0 0 1px var(--pub-line), 0 2px 7px rgba(23,26,35,.05);}
.pub-root .media--1x1{aspect-ratio:1/1;}
.pub-root .media--4x5{aspect-ratio:4/5;}
.pub-root .media img{width:100%;height:100%;object-fit:cover;}
.pub-root .media__ph{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--pub-ink-4);font-size:var(--fs-caption);}

/* ── 안내 / 빈 상태 ── */
.pub-root .notice{border:1px solid var(--pub-line);border-radius:var(--r1);padding:var(--s4);
  font-size:var(--fs-label);color:var(--pub-ink-2);line-height:1.6;}
.pub-root .notice b{color:var(--pub-ink);}
.pub-root .notice--warn{border-color:#EADFC8;background:#FFFCF7;}
.pub-root .notice--warn b{color:var(--pub-warn);}
.pub-root .notice--err{border-color:#EFD3CF;background:#FFFAF9;}
.pub-root .notice--err b{color:var(--pub-err);}
.pub-root .empty{text-align:center;padding:var(--s12) var(--s4);background:var(--pub-bg-2);border-radius:var(--r2);}

/* ── 페이지네이션 ── */
.pub-root .pager{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s14);}
.pub-root .pager a,.pub-root .pager span{min-width:40px;height:40px;display:grid;place-items:center;
  border-radius:var(--r-pill);font-size:var(--fs-label);color:var(--pub-ink-3);}
.pub-root .pager a:hover{background:var(--pub-bg-2);text-decoration:none;}
.pub-root .pager [aria-current="page"]{background:var(--pub-ink);color:var(--pub-on-accent);font-weight:var(--fw-sb);}