/*
 * 렌탈마켓 공개 상품 상세 — .pdt-* 전용
 *
 * 설계 정본 PUBLIC-UI-003-PRODUCT-DETAIL-DESIGN-v0.1.4.md (최종 정본)
 *   정의 범위  .pub-root 하위의 .pdt-* 만
 *   금지      :root 재정의 · !important
 *             .dt-* / .pd-* 전역 재작성
 *             .pc-* 사용 (카탈로그 전용)
 *             .rm-* 사용 (관리자 전용)
 *
 * 상세 화면의 기존 스타일은 public-product.css 가 제공한다.
 * 이 파일은 그 위에 PUBLIC-UI-003 이 더한 요소 3개만 얹는다.
 *   breadcrumb · 상품 요약 · 브랜드 복귀 링크 · 복사 버튼/피드백
 * public-product.css 파일 내용은 수정하지 않는다. 등록만 하고 그 뒤에 온다.
 *
 * public-catalog.css 를 상세에서 로드하지 않는다.
 * 카탈로그의 .pc-crumb 를 재사용하지 않고 여기서 .pdt-crumb 를 새로 정의한다.
 *
 * 색 규칙  마젠타는 돈과 행동에만. breadcrumb 과 요약은 잉크·중립만 쓴다.
 */

/* ── breadcrumb ─────────────────────────────────────────
 * 마지막 항목(상품명)은 링크가 아니라 aria-current="page" 텍스트다.
 * 모바일에서 상품명이 길면 1줄로 자른다.
 */
.pub-root .pdt-crumb{margin-bottom:var(--s3);}
.pub-root .pdt-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  margin:0;padding:0;list-style:none;
  font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .pdt-crumb li{min-width:0;}
.pub-root .pdt-crumb li + li::before{content:"›";margin-right:var(--s2);color:var(--pub-ink-4);}
.pub-root .pdt-crumb a{color:var(--pub-ink-3);}
.pub-root .pdt-crumb a:hover{color:var(--pub-ink);}
.pub-root .pdt-crumb li[aria-current="page"]{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}

/* ── 상품 요약 / 한 줄 소개 ──────────────────────────────
 * 핵심 스펙이 아니라 운영자가 입력한 요약 문장이다.
 * 길 수 있으므로 2줄에서 자른다.
 */
.pub-root .pdt-summary{margin-top:var(--s3);
  font-size:var(--fs-label);line-height:1.5;color:var(--pub-ink-2);
  word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ── 복사 버튼 · 피드백 (PUBLIC-UI-003) ──────────────────
 * 버튼은 서버에서 hidden 으로 내려오고 public-detail.js 가 드러낸다.
 * [hidden] 은 public-base.css 가 이미 display:none 으로 처리한다.
 *
 * 복사 버튼은 .btn(secondary) 이다. 상담 CTA 와 위계를 나눈다.
 * 마젠타(--pub-accent)를 쓰지 않는다. 돈·행동 전용 색이다.
 */
.pub-root .pdt-copy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  margin-bottom:var(--s2);}
.pub-root .pdt-copy .t-section{margin:0;}
.pub-root .pdt-copy__btn{min-height:44px;}

/* 피드백은 문구가 정본이다. 색만으로 성공·실패를 구분하지 않는다. */
.pub-root .pdt-copy__msg{font-size:var(--fs-caption);color:var(--pub-ink-3);}

/* 유의사항 안쪽 복사 버튼
 *
 * 이 버튼은 조건 선택 패널 · 월 렌탈료 · 상담 CTA 바로 아래 영역에 놓인다.
 * 시각 무게가 비슷하면 사용자가 상담 CTA 와 혼동한다.
 * 구분선으로 영역을 끊고 글자를 한 단계 낮춰 보조 동작임을 드러낸다.
 * 터치 영역 44px 은 그대로 지킨다.
 */
.pub-root .pdt-copy--note{margin-top:var(--s4);margin-bottom:0;
  padding-top:var(--s3);border-top:1px solid var(--pub-line);}
.pub-root .pdt-copy--note .pdt-copy__btn{font-size:var(--fs-caption);
  color:var(--pub-ink-2);}

@media (max-width:599px){
  .pub-root .pdt-copy{gap:var(--s2);}
  .pub-root .pdt-copy--note .pdt-copy__btn{width:100%;}
}

/* ── 브랜드 복귀 링크 ────────────────────────────────────
 * paused / discontinued 일 때만 렌더된다.
 * 상담 CTA 와 위계가 겹치지 않도록 primary 를 쓰지 않는다(.btn 그대로).
 * 터치 영역은 .btn 기본 높이를 따르되 최소 44px 을 보장한다.
 */
.pub-root .pdt-back{display:flex;justify-content:center;
  padding-top:var(--s5);border-top:1px solid var(--pub-line);}
.pub-root .pdt-back .btn{min-height:44px;}

@media (max-width:599px){
  .pub-root .pdt-back{padding-top:var(--s4);}
  .pub-root .pdt-back .btn{width:100%;}
}


/* ── 상품 상세 콘텐츠 (PRODUCT-DETAIL-EDITOR-001) ────────
 * 저장 HTML 에는 style/class 가 없다(서버 sanitizer 가 제거).
 * 따라서 표시는 전적으로 사이트가 소유한다.
 * 이 파일 규약대로 모든 selector 를 .pub-root 하위로 둔다.
 * :root 재정의 · !important 없음.
 */
.pub-root .pdt-content{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:keep-all;
  line-height:1.75;color:var(--pub-ink,#1f2430);}
.pub-root .pdt-content > :first-child{margin-top:0;}
.pub-root .pdt-content > :last-child{margin-bottom:0;}
.pub-root .pdt-content h2,
.pub-root .pdt-content h3,
.pub-root .pdt-content h4{margin:1.6em 0 .6em;line-height:1.4;font-weight:700;word-break:keep-all;}
.pub-root .pdt-content h2{font-size:1.25rem;}
.pub-root .pdt-content h3{font-size:1.1rem;}
.pub-root .pdt-content h4{font-size:1rem;}
.pub-root .pdt-content p{margin:0 0 1em;}
.pub-root .pdt-content hr{margin:1.8em 0;border:0;border-top:1px solid var(--pub-line,#e4e7ec);}
.pub-root .pdt-content ul,
.pub-root .pdt-content ol{margin:0 0 1em;padding-left:1.4em;}
.pub-root .pdt-content li{margin:.3em 0;}
.pub-root .pdt-content blockquote{margin:1.2em 0;padding:.6em 1em;
  border-left:3px solid var(--pub-line,#e4e7ec);color:var(--pub-muted,#6b7280);}
.pub-root .pdt-content a{color:var(--pub-brand,#2f6fed);text-decoration:underline;overflow-wrap:anywhere;}
/*
 * 상세 본문 이미지 (DESIGN-REFINEMENT · §4).
 *
 * 가운데 정렬한다.
 *   이전에는 margin:1em 0 이라 원본이 작은 이미지가 왼쪽에 붙었다.
 *   본문 폭보다 좁은 그림이 한쪽에 몰리면 편집 실수처럼 보인다.
 *
 * margin-inline:auto 만 쓴다.
 *   부모에 text-align:center 를 걸지 않는다.
 *   그러면 본문 글까지 가운데로 가서 읽기 어려워진다.
 *
 * max-width:100% + height:auto 로 원본 비율을 지킨다.
 * 긴 상세 이미지도 폭에 맞춰 줄어들 뿐 잘리지 않는다.
 */
.pub-root .pdt-content img{max-width:100%;height:auto;display:block;
  margin-block:1em;margin-inline:auto;}
.pub-root .pdt-content figure{margin:1.2em 0;}
/* figure 안에서는 바깥 여백을 figure 가 갖는다. 가운데 정렬은 유지한다. */
.pub-root .pdt-content figure img{margin-block:0;margin-inline:auto;}
.pub-root .pdt-content figcaption{margin-top:.5em;font-size:.875rem;
  color:var(--pub-muted,#6b7280);text-align:center;}

/* 표는 컨테이너보다 넓을 수 있다. 표만 가로 스크롤시키고 body 전역 overflow 는 건드리지 않는다. */
.pub-root .pdt-content table{display:block;width:100%;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;border-collapse:collapse;margin:1.2em 0;font-size:.9375rem;}
.pub-root .pdt-content th,
.pub-root .pdt-content td{border:1px solid var(--pub-line,#e4e7ec);padding:.5em .7em;
  text-align:left;vertical-align:top;min-width:6em;}
.pub-root .pdt-content th{background:var(--pub-bg-soft,#f7f9fc);font-weight:700;}


/* ── 제품 정보 탭 (PUBLIC-FINAL-BUNDLE-001) ──────────────
 * 00 ADDENDUM 확정: [제품 정보] [제품 상세 이미지] 2탭.
 * 제품 정보 안에 제품 사양 → 제품 상세(detail_html)를 세로로 둔다.
 *
 * 선택 탭은 잉크 배경으로 반전한다.
 * accent(마젠타)는 상담 CTA·가격 전용이라 탭에 쓰지 않는다.
 *
 * 탭이 1개만 렌더될 수 있다(사양만 있거나 이미지만 있는 경우).
 * flex:1 이라 그때는 한 칸이 전체를 차지한다.
 */
.pub-root .pdt-tabs{display:flex;margin-bottom:var(--s6);
  box-shadow:inset 0 0 0 1px var(--pub-line);border-radius:var(--r1);overflow:hidden;}
.pub-root .pdt-tabs__btn{flex:1 1 0;min-width:0;min-height:56px;padding:0 var(--s4);
  border:0;background:var(--pub-bg);cursor:pointer;
  font-size:var(--fs-label);font-weight:var(--fw-m);color:var(--pub-ink-3);
  box-shadow:inset 0 0 0 1px var(--pub-line);
  transition:background .15s ease,color .15s ease;}
.pub-root .pdt-tabs__btn:hover{color:var(--pub-ink);}
.pub-root .pdt-tabs__btn.is-on{background:var(--pub-ink);color:var(--pub-on-accent);
  font-weight:var(--fw-b);box-shadow:none;}

.pub-root .pdt-tabs__panel[hidden]{display:none;}

/* JS 가 없으면 탭 버튼을 숨기고 패널을 모두 보여 준다.
   버튼만 남으면 눌러도 아무 일이 없어 더 혼란스럽다. */
.pub-root .pdt-tabs:not([data-ready]){display:none;}
.pub-root .pdt-tabs:not([data-ready]) ~ .pdt-tabs__panel[hidden]{display:block;}

/* 제품 정보 탭 내부 블록 */
.pub-root .pdt-block + .pdt-block{margin-top:var(--s14);
  padding-top:var(--s8);border-top:1px solid var(--pub-line);}
.pub-root .pdt-block__t{margin-bottom:var(--s5);}


/* 타사보상가 표시 규칙은 제거했다 (PATCH-004).
   PUBLIC 에 행을 렌더하지 않으므로 스타일도 남기지 않는다.
   데이터는 유지되며 다시 표시할 때 규칙을 되돌린다. */

/* 위생·관리 안내 캡션 (PATCH-002).
   이 값이 선택에 따라 바뀐다는 것을 알린다. */
.pub-root .pdt-mg__note{margin:0 0 var(--s3);
  font-size:var(--fs-caption);color:var(--pub-ink-3);}

/* ── 복사 아이콘 버튼 (PATCH-002) ────────────────────────
 * 텍스트를 아이콘으로 바꿨다. 이름은 aria-label · title · sr-only 로 남는다.
 * 터치 44px 를 지킨다. 아이콘만 남았다고 작아지면 누르기 어렵다.
 */
/*
 * 제목 옆 복사 버튼 (DESIGN-REFINEMENT).
 *
 * 44px 은 제목(24px)보다 커서 버튼이 먼저 눈에 들어왔다.
 * 제목 글자 높이에 맞춰 줄인다.
 *
 * 44px 손가락 규칙을 지키되 버튼 상자는 키우지 않는다.
 *   ::after 로 보이지 않는 터치 영역만 넓힌다.
 *   모바일에서 누르기 어려워지면 안 된다.
 */
.pub-root .pdt-copy__btn--ico{position:relative;
  display:inline-grid;place-items:center;
  width:1.5em;height:1.5em;min-height:0;padding:0;flex:0 0 auto;
  border-radius:var(--r1);}
.pub-root .pdt-copy__btn--ico::after{content:"";position:absolute;
  left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.pub-root .pdt-copy__ico{width:1em;height:1em;background:var(--pub-ink-2);
  -webkit-mask:var(--rm-ico-copy) center/contain no-repeat;
          mask:var(--rm-ico-copy) center/contain no-repeat;}
.pub-root .pdt-copy__btn--ico:hover .pdt-copy__ico{background:var(--pub-ink);}

/*
 * 약정기간 패널 옆 렌탈료 복사 (DESIGN-REFINEMENT).
 *
 * 라벨과 같은 줄에 붙는다. 라벨보다 작고 약하게 둔다.
 * 조건을 고르는 것이 먼저고 복사는 그 다음이다.
 */
.pub-root .pdt-copy__mini{display:inline-flex;align-items:center;gap:4px;
  margin-left:auto;padding:4px 8px;
  border:0;border-radius:var(--r1);background:transparent;cursor:pointer;
  font-family:inherit;font-size:var(--fs-caption);color:var(--pub-ink-3);
  line-height:1;white-space:nowrap;}
.pub-root .pdt-copy__mini:hover{background:var(--pub-bg-2);color:var(--pub-ink);}
.pub-root .pdt-copy__mini[hidden]{display:none;}
.pub-root .pdt-copy__mini .pdt-copy__ico{width:14px;height:14px;
  background:var(--pub-ink-3);}
.pub-root .pdt-copy__mini:hover .pdt-copy__ico{background:var(--pub-ink);}

/* 라벨과 버튼이 한 줄에 마주 본다. */
.pub-root .opt-row__head{display:flex;align-items:center;gap:var(--s3);}

/* 아이콘 세트가 없어 인라인 SVG 를 mask 로 쓴다. 외부 라이브러리를 들이지 않는다. */
.pub-root{
  --rm-ico-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15 1H4a2 2 0 0 0-2 2v12h2V3h11V1zm4 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
}

/* ── 조건 패널 CTA (PATCH-002) ───────────────────────────
 * 상담 신청 아래에 카카오톡을 둔다.
 * 카카오는 브랜드 색이 정해져 있어 accent 와 나란히 두면 서로 다툰다.
 * 주 행동(상담 신청)을 위에, 보조를 아래에 세로로 쌓는다.
 */
.pub-root .sum__cta{display:flex;flex-direction:column;gap:var(--s2);}
/*
 * CTA 행 — [COUNSEL-FSITE-CTA-CLEANUP-001] (00 결정 2026-10-13).
 *
 *   [ 카카오톡 상담 ][ 상담 신청 ]    한 줄 · 1:1
 *
 * 전에는 상담신청이 한 줄 전체였고 그 아래 [AI 채팅상담][카카오톡] 이었다.
 * AI 진입을 빼면서 두 버튼을 한 줄에 반씩 둔다.
 *
 * flex:1 1 0 으로 **기준폭 0** 에서 나눈다. auto 면 글자 길이만큼 어긋난다.
 * min-width:0 이 없으면 긴 라벨이 축소를 막아 넘친다.
 * 카카오가 없으면 상담신청 하나가 한 줄 전체를 쓴다(fail-soft).
 *
 * btn--lg 높이는 그대로다. .sum__ai* 규칙은 쓰는 markup 이 없어 걷었다.
 */
/*
 * 컨테이너 규칙을 되살린다.
 * AI 블록을 걷으면서 .sum__cta-row{display:flex} 까지 함께 지웠고,
 * 그러자 두 버튼이 inline 으로 흘러 179 vs 115 로 어긋났다(실측).
 */
.pub-root .sum__cta-row{display:flex;align-items:stretch;gap:var(--s2);}
.pub-root .sum__cta-row > *{flex:1 1 0;min-width:0;}
.pub-root .sum__kakao{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);background:#FEE500;color:#181600;box-shadow:none;}
.pub-root .sum__kakao:hover{filter:brightness(.95);text-decoration:none;}