/* 렌탈마켓 상품 목록·상세 전용 */

/* ── 목록 ── */
.pub-root .pd-head{padding-block:var(--s5) var(--s6);}
.pub-root .pd-head p{margin-top:var(--s2);}
.pub-root .pd-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);}
.pub-root .pd-sort{display:flex;gap:var(--s4);overflow-x:auto;scrollbar-width:none;}
.pub-root .pd-sort::-webkit-scrollbar{display:none;}
.pub-root .pd-sort a{font-size:var(--fs-label);color:var(--pub-ink-3);white-space:nowrap;}
.pub-root .pd-sort a[aria-current="true"]{color:var(--pub-ink);font-weight:var(--fw-sb);
  text-decoration:underline;text-underline-offset:5px;}

.pub-root .pd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s8) var(--s3);}
@media (min-width:600px){ .pub-root .pd-grid{grid-template-columns:repeat(3,1fr);gap:var(--s10) var(--s5);} }
@media (min-width:1024px){ .pub-root .pd-grid{grid-template-columns:repeat(4,1fr);gap:var(--s10) var(--s6);} }

/* 카드 : 테두리·그림자 없음. 이미지 바탕과 여백만으로 구분한다 */
.pub-root .card{position:relative;display:flex;flex-direction:column;height:100%;}
.pub-root .card:focus-within{outline:2px solid var(--pub-accent-brand);outline-offset:4px;border-radius:var(--r1);}
.pub-root .card__brand{margin-top:var(--s3);font-size:var(--fs-label);color:var(--pub-ink-3);letter-spacing:var(--tr-1);}
.pub-root .card__name{margin-top:2px;font-size:var(--fs-body);font-weight:var(--fw-m);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pub-root .card__name a::after{content:"";position:absolute;inset:0;}
.pub-root .card__model{margin-top:2px;font-size:var(--fs-caption);color:var(--pub-ink-3);letter-spacing:var(--tr-1);}
/* 이름 높이를 예약하는 대신 가격을 바닥으로 민다.
   모델명이 상품명 바로 아래 붙으면서도 카드 간 가격 줄은 정렬된다. */
.pub-root .card__price{margin-top:auto;padding-top:var(--s3);}
/* 혜택 배지를 썸네일 오버레이로 옮겼다(PATCH-002).
   카드 하단 컨테이너는 더 쓰이지 않지만 규칙은 남긴다.
   다른 화면이 이 클래스를 쓸 수 있고, 지워서 얻는 것이 없다. */
.pub-root .card__foot{margin-top:var(--s2);}

/* ── 카드 기능 라벨 (PATCH-002) ──────────────────────────
 * 정수 · 온수 · 냉수 · 얼음.
 * 제품명 아래, 가격 위에 둔다. 이름을 보고 바로 기능을 확인하는 순서다.
 *
 * 가운뎃점은 CSS 로 넣는다. 마크업에 넣으면 스크린리더가 읽는다.
 */
/*
 * 기능 라벨 pill (PATCH-004 RC2).
 *
 * 이전에는 가운뎃점으로 구분한 일반 텍스트였다.
 *   정수 · 온수 · 냉수 · 얼음
 * 제품명 바로 아래라 어디까지가 이름이고 어디부터 기능인지 흐렸다.
 *
 * 하나의 박스로 묶는다. 항목별로 pill 을 만들지 않는다.
 *   4개면 pill 이 4개가 되어 카드가 배지밭이 되고,
 *   혜택 배지(badge--benefit)와 위계가 다투게 된다.
 *   기능은 "이 제품이 무엇을 하는가"이지 강조 대상이 아니다.
 *
 * 한 줄로 유지한다. 좁은 화면에서 접히면 카드 높이가 들쭉날쭉해진다.
 * 넘치면 말줄임으로 자른다. 기능 전체는 상세에서 본다.
 */
.pub-root .card__feats{display:inline-flex;flex-wrap:nowrap;align-items:center;
  /* 카드가 flex/grid 컨테이너라 inline-flex 여도 늘어난다.
     align-self 로 내용 크기에 맞춘다. 폭 전체를 채우면 pill 이 아니라 띠가 된다. */
  align-self:flex-start;width:fit-content;
  max-width:100%;margin:var(--s2) 0 0;padding:3px var(--s2);
  border-radius:var(--r1);background:var(--pub-bg-3);
  list-style:none;overflow:hidden;}
.pub-root .card__feats li{flex:0 0 auto;
  font-size:var(--fs-caption);color:var(--pub-ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-root .card__feats li + li::before{content:"·";margin:0 4px;
  color:var(--pub-ink-4);}

.pub-root .plines{display:grid;gap:2px;}
.pub-root .pline{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);}
.pub-root .pline dt{flex:0 0 auto;font-size:var(--fs-caption);color:var(--pub-ink-3);
  letter-spacing:var(--tr-1);white-space:nowrap;}
.pub-root .pline dd{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--s1);min-width:0;}
.pub-root .pline--card dt{color:var(--pub-accent);font-weight:var(--fw-sb);}

/* ── 상세 : 좌 갤러리 고정 / 우 패널 스크롤 ── */
.pub-root .dt-hero{display:grid;gap:var(--s6);}
@media (min-width:960px){
  .pub-root .dt-hero{grid-template-columns:minmax(0,1fr) var(--detail-panel);gap:var(--s10);align-items:start;}
  .pub-root .dt-gallery{position:sticky;top:calc(64px + var(--s5));}
}
.pub-root .dt-gallery__main{position:relative;}

/* 이전 / 다음 */
.pub-root .gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(30,23,35,.14);
  color:var(--pub-ink);font-size:22px;line-height:1;display:grid;place-items:center;}
.pub-root .gal-nav:hover{background:#fff;}
.pub-root .gal-nav--prev{left:var(--s3);}
.pub-root .gal-nav--next{right:var(--s3);}
.pub-root .gal-count{position:absolute;right:var(--s3);bottom:var(--s3);z-index:3;
  padding:3px 10px;border-radius:var(--r-pill);background:rgba(30,23,35,.7);color:#fff;
  font-size:var(--fs-caption);letter-spacing:var(--tr-1);}
.pub-root .gal-count b{font-weight:var(--fw-b);}

/* 썸네일 */
.pub-root .dt-thumbs{display:flex;gap:var(--s2);margin-top:var(--s3);overflow-x:auto;
  scrollbar-width:none;padding-bottom:2px;}
.pub-root .dt-thumbs::-webkit-scrollbar{display:none;}
.pub-root .dt-thumb{flex:0 0 76px;width:76px;border:0;padding:0;background:none;cursor:pointer;
  position:relative;display:block;}
.pub-root .dt-thumb .media{box-shadow:inset 0 0 0 1px var(--pub-line);}
.pub-root .dt-thumb:hover .media{box-shadow:inset 0 0 0 1px var(--pub-ink-3);}
/* 선택된 썸네일은 잉크 2px. 마젠타를 쓰지 않는다(가격·행동 전용) */
/* [RC16 PRE-EXISTING ACCESSIBILITY FIX]
   썸네일은 tab 이 아니라 toggle button 이다. aria-pressed 로 상태를 읽는다.
   시각 상태(테두리·투명도)와 보조기기 상태가 같은 속성 하나에서 나온다. */
.pub-root .dt-thumb[aria-pressed="true"] .media{box-shadow:inset 0 0 0 2px var(--pub-ink);}
.pub-root .dt-thumb[aria-pressed="false"] .media{opacity:.72;}
.pub-root .dt-thumb:focus-visible{outline:2px solid var(--pub-accent-brand);outline-offset:2px;border-radius:var(--r1);}

/* 조건 패널 */
.pub-root .panel__head{padding-bottom:var(--s4);margin-bottom:var(--s2);border-bottom:1px solid var(--pub-line);}
.pub-root .panel__head .card__brand{margin-top:0;}
.pub-root .panel__head h1{margin-top:var(--s1);}
.pub-root .panel__head .card__model{margin-top:var(--s1);display:block;}

.pub-root .opt-row{padding:var(--s4) 0;border-bottom:1px solid var(--pub-line);}
.pub-root .opt-row--stack{display:block;}
.pub-root .opt-row__head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3);}
.pub-root .opt-row__label{font-size:var(--fs-label);font-weight:var(--fw-b);letter-spacing:var(--tr-1);}
.pub-root .opt-row__val{font-size:var(--fs-label);color:var(--pub-ink-3);}

.pub-root .opts{display:flex;flex-wrap:wrap;gap:var(--s2);}
/* 좌우 폭을 꽉 채우는 균등 분할 */
.pub-root .opts--fill{flex-wrap:nowrap;gap:var(--s2);}
.pub-root .opts--fill .opt{flex:1 1 0;min-width:0;}
.pub-root .opts--fill .opt__btn{width:100%;}
.pub-root .opt{position:relative;}
.pub-root .opt input{position:absolute;opacity:0;width:1px;height:1px;}
.pub-root .opt__btn{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:var(--h-md);
  padding:0 12px;cursor:pointer;border-radius:var(--r1);
  box-shadow:inset 0 0 0 1px var(--pub-line-2);
  font-size:var(--fs-label);font-weight:var(--fw-m);letter-spacing:var(--tr-1);}
.pub-root .opt:hover .opt__btn{background:var(--pub-bg-2);}
/* 선택은 잉크 채움. 무채색이라 마젠타·바이올렛과 경쟁하지 않는다 */
.pub-root .opt input:checked + .opt__btn{box-shadow:inset 0 0 0 2px var(--pub-ink);font-weight:var(--fw-b);}
.pub-root .opt input:disabled + .opt__btn{color:var(--pub-ink-4);background:var(--pub-bg-2);
  box-shadow:inset 0 0 0 1px var(--pub-line);cursor:not-allowed;text-decoration:line-through;}
.pub-root .opt input:focus-visible + .opt__btn{outline:2px solid var(--pub-accent-brand);outline-offset:2px;}

/* 요약 — L1 이 사는 곳 */
.pub-root .sum{margin-top:var(--s5);border:1px solid var(--pub-line);border-radius:var(--r2);padding:var(--s5);}
.pub-root .sum .pline dt{font-size:var(--fs-label);}
.pub-root .sum__meta{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--pub-line);
  font-size:var(--fs-caption);color:var(--pub-ink-3);letter-spacing:var(--tr-1);}
.pub-root .sum__meta span + span{margin-left:var(--s3);}
.pub-root .sum__cta{margin-top:var(--s5);display:none;}
@media (min-width:960px){ .pub-root .sum__cta{display:block;} }

/* 혜택 유의사항 — 상품별 운영자 입력 문구
   보조 텍스트다. 카드·배지·마젠타 배경을 쓰지 않는다.
   white-space:pre-line 이 줄바꿈을 보존한다(nl2br 미사용). */
.pub-root .benefit-note{margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--pub-line);}
.pub-root .benefit-note__title{font-size:var(--fs-caption);font-weight:var(--fw-b);
  color:var(--pub-ink-2);letter-spacing:var(--tr-1);}
.pub-root .benefit-note__body{margin-top:var(--s2);font-size:var(--fs-caption);
  color:var(--pub-ink-3);line-height:1.65;letter-spacing:var(--tr-1);
  white-space:pre-line;word-break:keep-all;}

/* 제휴카드 요약 */
.pub-root .cardlist{margin-top:var(--s5);border:1px solid var(--pub-line);border-radius:var(--r2);overflow:hidden;}
.pub-root .cardlist summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5);font-size:var(--fs-label);font-weight:var(--fw-b);letter-spacing:var(--tr-1);}
.pub-root .cardlist summary::-webkit-details-marker{display:none;}
.pub-root .cardlist summary b{color:var(--pub-accent);}
.pub-root .cardlist summary::after{content:"⌄";color:var(--pub-ink-3);}
.pub-root .cardlist[open] summary::after{content:"⌃";}
.pub-root .cardlist ul{border-top:1px solid var(--pub-line);background:var(--pub-bg-2);}
.pub-root .cardlist li{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--pub-line);}
.pub-root .cardlist li:last-of-type{border-bottom:0;}
.pub-root .cardlist li a,.pub-root .cardlist li > span:first-child{flex:1;min-width:0;}
.pub-root .cardlist li a:hover{text-decoration:none;}
.pub-root .cardlist li a:hover .cl__name{text-decoration:underline;}
.pub-root .cl__name{display:block;font-size:var(--fs-label);letter-spacing:var(--tr-1);}
.pub-root .cl__name em{font-style:normal;color:var(--pub-ink-3);}
.pub-root .cl__amt{display:block;margin-top:1px;font-size:var(--fs-caption);font-weight:var(--fw-b);color:var(--pub-accent);}
.pub-root .cl__go{flex:0 0 auto;font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .cl__go::after{content:"›";margin-left:3px;}
.pub-root .cardlist__note{padding:var(--s3) var(--s5);border-top:1px solid var(--pub-line);}

/* 전체 조건표 (읽기 전용) */
.pub-root .rates__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pub-root .rates table{width:100%;min-width:600px;font-variant-numeric:tabular-nums;}
.pub-root .rates th,.pub-root .rates td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--pub-line);white-space:nowrap;}
.pub-root .rates thead th{font-size:var(--fs-caption);font-weight:var(--fw-sb);color:var(--pub-ink-3);
  border-bottom:1px solid var(--pub-ink);}
.pub-root .rates tbody th{font-size:var(--fs-label);font-weight:var(--fw-sb);
  position:sticky;left:0;background:var(--pub-bg);z-index:1;}
.pub-root .rates thead th:first-child{position:sticky;left:0;background:var(--pub-bg);z-index:2;}
.pub-root .rates .r-main{font-size:var(--fs-price-sub);font-weight:var(--fw-b);}
.pub-root .rates .r-card{font-size:var(--fs-caption);color:var(--pub-accent);font-weight:var(--fw-b);}
.pub-root .rates .r-none{font-size:var(--fs-label);color:var(--pub-ink-4);}

/* 사양 */
.pub-root .spec-g + .spec-g{margin-top:var(--s8);}
.pub-root .spec-g__t{padding-bottom:var(--s3);border-bottom:1px solid var(--pub-ink);
  font-size:var(--fs-label);font-weight:var(--fw-b);letter-spacing:var(--tr-1);}
.pub-root .spec-list{display:grid;grid-template-columns:1fr;}
@media (min-width:768px){ .pub-root .spec-list{grid-template-columns:1fr 1fr;column-gap:var(--s12);} }
.pub-root .spec{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;
  border-bottom:1px solid var(--pub-line);font-size:var(--fs-label);}
.pub-root .spec dt{flex:0 0 96px;color:var(--pub-ink-3);}
.pub-root .spec dd{flex:1;min-width:0;word-break:keep-all;}
.pub-root .spec--off dd{color:var(--pub-ink-3);}

/* 부가 이미지 — 원본 비율 유지 */
.pub-root .dt-detail{max-width:var(--content-max);margin:0 auto;}
.pub-root .dt-detail__list{display:grid;gap:var(--s3);}
.pub-root .dt-detail__list img{width:100%;height:auto;border-radius:var(--r1);}
.pub-root .dt-detail__more{margin-top:var(--s4);}
.pub-root .dt-detail__more summary{list-style:none;cursor:pointer;}
.pub-root .dt-detail__more summary::-webkit-details-marker{display:none;}
.pub-root .dt-detail__more[open] summary{display:none;}

/* sticky CTA (모바일) */
/* ── 제품 상세 모바일 가격 dock (KAKAO-CTA) ─────────────
 * 기준선 1024px. 넥센 운영 구조와 같은 선을 쓴다.
 *
 * position:fixed 다. sticky 가 아니다.
 *   sticky 는 부모 overflow 나 transform 에 걸리면 조용히 풀린다.
 *   화면 아래에 반드시 붙어 있어야 하는 요소라 fixed 로 고정한다.
 *
 * 공통 하단바(.rm-cbar)를 여기서 끈다.
 *   두 바가 같이 뜨면 화면 아래가 두 겹으로 막힌다.
 */
.pub-root .pd-dock{display:none;}
/* 여백 규칙은 public-counsel-cta.css 가 갖는다.
   공통바 여백과 함께 문서 맨 끝에서 처리해야 푸터가 가리지 않는다. */
.pub-root .pd-dock__space{display:none;}

@media (max-width:1023px){
  .pub-root .pd-dock{display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
    background:var(--pub-bg);
    box-shadow:0 -4px 18px rgba(30,23,35,.08);
    /* 아이폰 홈 인디케이터 영역만큼 여백을 더한다.
       없으면 버튼이 화면 맨 끝선에 붙어 누르기 어렵다. */
    padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));}

  .pub-root .pd-dock__price{max-width:520px;margin:0 auto var(--s3);}
  .pub-root .pd-dock__row{display:flex;align-items:baseline;
    justify-content:space-between;gap:var(--s3);}
  .pub-root .pd-dock__row + .pd-dock__row{margin-top:2px;}
  .pub-root .pd-dock__row[hidden]{display:none;}
  .pub-root .pd-dock__lb{flex:0 1 auto;min-width:0;
    font-size:var(--fs-caption);color:var(--pub-ink-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pub-root .pd-dock__act{display:flex;align-items:stretch;gap:var(--s2);
    width:100%;max-width:520px;margin:0 auto;}
}