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

/* ── 버튼 ──
   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;}
.pub-root .chip[aria-current="true"]{background:var(--pub-ink);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;}
.pub-root .badge--benefit{background:var(--pub-benefit);color:var(--pub-on-accent);}       /* 혜택 = 바이올렛 */
.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 으로 찌그러진다. ── */
.pub-root .media{display:block;position:relative;width:100%;background:var(--pub-bg-3);
  border-radius:var(--r1);overflow:hidden;}
.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(--s10);}
.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);}