/* ============================================================================
 * petmart_product 상세뷰 전용 CSS (view.skin.php add_stylesheet 로 view 액션에서만 로드)
 *  - 기본 게시판 1200 컨테이너 → 풀블리드 (섹션 화면폭 채우고 카드 중앙 1486)
 *  - 디자인: psd/03_제품 y3123~ (카드 1486×478 좌우여백 217 대칭)
 * ========================================================================== */

/* --- 컨테이너 풀블리드 오버라이드 (이 뷰에서만 로드되므로 안전) --- */
.container { width: 100% !important; }
.container_content { width: 100% !important; float: none !important; }

/* --- 상세 섹션 --- */
.pdv {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 9.5vw;              /* 고정 헤더(5.4vw)+여백 */
  padding-bottom: 8vw;
  background: #fff;
  color: #141414;
  font-family: 'Pretendard Variable', sans-serif;
  letter-spacing: -0.05vw;
}

.pdv_iner {
  width: 100%;
}

/* ===== 카드·상세 공통 박스 (동일 골격 — 중복 선언 방지) ===== */
.pdv_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 1486);
  border: 1px solid #dfdfdf;
  border-radius: calc(var(--px) * 30);
  background: #fff;
}

/* ===== 제품 카드 (고유: 가로배치 + 패딩. 목록버튼 absol 기준) ===== */
.pdv_card {
  position: relative;
  flex-direction: row;
  align-items: stretch;
  padding: calc(var(--px) * 37) calc(var(--px) * 100);
}

/* --- 좌: 이미지 박스 (연노랑 라운드 스퀘어) --- */
.pdv_img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 404);
  height: calc(var(--px) * 404);
  border: 1px solid #dfdfdf;
  border-radius: calc(var(--px) * 30);
  background: #fff7da;
}

.pdv_pimg {
  max-width: calc(var(--px) * 300);
  max-height: calc(var(--px) * 340);
  width: auto;
  height: auto;
  object-fit: contain;
}

.pdv_noimg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 300);
  height: calc(var(--px) * 340);
}

.pdv_noimg p {
  color: #c4bda0;
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* 할인율 뱃지 (이미지 좌상단) */
.pdv_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 28);
  top: calc(var(--px) * 23);
  width: calc(var(--px) * 74);
  aspect-ratio: 1 / 1;
}

.pdv_badge img {
  width: 100%;
  height: 100%;
}

.pdv_badge_tx {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: calc(var(--px) * 13);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

/* --- 우: 정보 컬럼 --- */
.pdv_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
  margin-left: calc(var(--px) * 180);
  padding-top: 3.1vw;
}

.pdv_labels {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 6);
}

.pdv_label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 32);
  padding: 0 calc(var(--px) * 14);
  border-radius: 50vw;
  font-size: calc(var(--px) * 14);
  font-weight: 700;
  line-height: 1;
}

.pdv_cat { background: #ffe947; color: #141414; }   /* 대분류 = 노랑 (먼저) */
.pdv_sub { background: #141414; color: #fff; }        /* 소분류 = 검정 */
.pdv_ctgy { box-sizing: border-box; background: #fff; color: #141414; border: 1px solid #555; }   /* 카테고리 = 흰 배경·검은 글씨·회색 테두리 */

.pdv_name {
  margin-top: calc(var(--px) * 17);
  color: #000;
  font-size: calc(var(--px) * 27);
  font-weight: 700;
  line-height: 1.2;
}

.pdv_price {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 24);
}

.pdv_ptop {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 10);
}

.pdv_rate {
  color: #ff6b6b;
  font-size: calc(var(--px) * 20);
  font-weight: 700;
}

.pdv_orig {
  color: #878787;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  text-decoration: line-through;
}

.pdv_sale {
  margin-top: calc(var(--px) * 6);
  color: #141414;
  font-size: calc(var(--px) * 27);
  font-weight: 700;
}

/* 목록으로 버튼 — 카드 우하단 absol (PSD: 카드 우측 100 / 하단 74). .pet_btn(relative) 이기려 카드 스코프로 specificity ↑ */
.pdv_card .pdv_list {
  position: absolute;
  right: calc(var(--px) * 100);
  bottom: calc(var(--px) * 74);
}

.pdv_list2{
  margin-top: 2vw;
}

/* ===== PRODUCT DETAILS (고유: 세로배치 + 상단여백 + 패딩) ===== */
.pdv_detail {
  flex-direction: column;
  margin-top: calc(var(--px) * 40);
  padding: calc(var(--px) * 60) calc(var(--px) * 100);
  padding-bottom: 0;
}


.pdv_detail_tit {
  font-family: 'Ria';
  color: #8a8a8a;
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  letter-spacing: 0.05vw;
  text-align: center;
}

/* 상세 이미지 — 이미지마다 한 행을 차지하는 세로 스택 (간격 없음) */
.pdv_detail .pdv_detail_con {
  margin: 3vw 0 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  row-gap: 0;
}

.pdv_detail .pdv_detail_con .pdv_detail_img {
  display: block;
  grid-column: 1;
  max-width: min(100%, calc(var(--px) * 1286));
  width: auto;
  height: auto;
}

.pdv_detail .pdv_detail_con p { line-height: 1.6; }

/* ===== 관리자 메뉴 (관리자 로그인 시에만 노출) ===== */
.pdv_admin {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: calc(var(--px) * 26) calc(var(--px) * 28);
  border: 1px solid #ddd;
  border-radius: calc(var(--px) * 15);
  margin-top: 2vw;
  background: #fff;
}
.pdv_admin_tit {
  color: #222;
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  letter-spacing: 0.03vw;
}
.pdv_admin_btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 8);
  width: 100%;
  margin-top: calc(var(--px) * 16);
}
.pdv_admin_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 9) calc(var(--px) * 16);
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 8);
  background: #fff;
  color: #555;
  font-size: calc(var(--px) * 14);
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
}
.pdv_admin_btn:hover { background: #f7f7f7; border-color: #cfcfcf; }
.pdv_admin_del { border-color: #f3c2c2; color: #e46a6a; }
.pdv_admin_del:hover { background: #fdf3f3; border-color: #e9a9a9; }

/* ===== 모바일 ===== */
@media (max-width: 599px) {
  .pdv { padding-top: 22vw; padding-bottom: 14vw; }
  .pdv_card { flex-direction: column; align-items: center; width: 90%; padding: 6vw 5vw; }
  /* 카드류 radius — PC calc(--px*30)=6px microscopic(각짐) → vw 토큰(con03/store 카드 4vw 통일) */
  .pdv_box { border-radius: 4vw; }
  .pdv_img { width: 70vw; height: 70vw; border-radius: 4vw; }
  .pdv_pimg { max-width: 52vw; max-height: 58vw; }

  /* 할인율 뱃지 — PC --px microscopic(15px·2.7px) → vw 확대 (con03 카드 규격 통일) */
  .pdv_badge { width: 16vw; left: 4vw; top: 4vw; }
  .pdv_badge_tx { font-size: 3.3vw; }

  .pdv_info { margin-left: 0; margin-top: 6vw; padding-top: 0; align-items: center; width: 100%; }

  /* 라벨 pill — PC 폰트 2.9px microscopic → 3vw + 가운데 gap */
  .pdv_labels { justify-content: center; gap: 2vw; }
  .pdv_label { height: 6.5vw; padding: 0 3vw; font-size: 3vw; }

  .pdv_name { margin-top: 3vw; font-size: 4vw; text-align: center; }

  /* 가격 — PC px gap microscopic → vw + 세로중앙 정렬 */
  .pdv_price { margin-top: 4vw; align-items: center; }
  .pdv_ptop { gap: 2vw; }
  .pdv_rate { font-size: 4vw; }
  .pdv_orig { font-size: 4vw; }
  .pdv_sale { margin-top: 1.5vw; font-size: 5.5vw; }

  /* 목록으로 — PC 카드 우하단 absol(가격과 겹침) → in-flow 하단중앙. .pdv_card 스코프로 desktop 이김.
     position:relative(오프셋X=in-flow 유지)로 둬야 버튼이 화살표(pet_btn_arw absol)의 기준이 됨. static이면 화살표가 .pdv_card로 탈출 */
  .pdv_card .pdv_list { position: relative; right: auto; bottom: auto; align-self: center; margin-top: 6vw; }

  /* 하단 여백은 PC(padding-bottom:0)와 동일 — 상세 이미지가 박스 하단에 flush */
  .pdv_detail { width: 90%; margin-top: 6vw; padding: 8vw 5vw; padding-bottom: 0; }
  .pdv_detail_tit { font-size: 4.5vw; }
  .pdv_detail .pdv_detail_con .pdv_detail_img { max-width: 100%; }
  .pdv_admin { width: 66%; margin: 7vw auto 0; padding: 5.5vw 5vw; border-radius: 3.5vw; }
  .pdv_admin_tit { font-size: 4.2vw; }
  .pdv_admin_btns { flex-direction: column; align-items: stretch; gap: 2.5vw; margin-top: 3.5vw; }
  .pdv_admin_btn { padding: 3vw 5vw; font-size: 3.4vw; border-radius: 2vw; }
}