/* SRI-4235 프라이빗 세일 판매중 상태 뱃지
 * - 문의 중: utility-warning (bg-50 / text-700)
 * - 실물 뷰잉 예약: utility-brand (bg-100 / text-700)
 */

.ps-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 뱃지가 없어도 한 줄 높이(24px)를 확보해 카드 간 버튼 위치를 정렬한다 */
  min-height: 24px;
  margin-bottom: 10px;
}

.ps-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 상세 화면 뱃지: 목록보다 크게 (SRI-4235 #5) */
.ps-badges--detail .ps-badge {
  padding: 4px 12px;
}

/* 상세 화면: 작품 정보와 뱃지 사이 여백 (Figma 기준 사이즈→뱃지 55px = 기존 25 + 30) */
.ps-badges--detail {
  margin-top: 30px;
}

.ps-badge--inquiry {
  background-color: #FFFAEB;
  color: #DC6803;
}

.ps-badge--viewing {
  background-color: #EBFAF9;
  color: #1FA9A2;
}

.ps-badges + .button-area {
  margin-top: 12px !important;
  padding-top: 0 !important;
}

/* PS 목록 PC: 작가명/작품명이 비어도 행 높이를 유지해 카드 높이를 통일한다 (SRI-4235).
 * 기존 공용 규칙은 div.title{min-height:22px}(내용 line-height는 26px)이고,
 * 작품명 래퍼 .wrap-title_year에는 min-height가 없어 작품명이 비면 줄이 통째로 무너졌다.
 * Figma(node 920-1204)의 고정 행 높이(ArtistName 26px / 작품명 28px)에 맞춰 예약한다. */
@media all and (min-width: 1024px) {
  .content-panel.type_panel-product_list.wrap-lot_list.type_panel-private_sale .product-list .item-article .typo-area .title {
    min-height: 26px;
  }
  .content-panel.type_panel-product_list.wrap-lot_list.type_panel-private_sale .product-list .item-article .typo-area .desc .wrap-title_year {
    min-height: 28px;
  }
  /* 사이즈/연도 행: 비었을 땐 min-height 20px, 내용이 있으면 부모 16px strut과
   * 자식 12px 텍스트의 baseline 불일치로 line box가 21px가 되어 카드가 1px 더 커졌다.
   * 행 자체를 텍스트 스펙(12px / line-height 20px)으로 고정해 내용 유무와 무관하게 20px로 통일한다. */
  .content-panel.type_panel-product_list.wrap-lot_list.type_panel-private_sale .product-list .item-article .typo-area .desc .standard .text-over.vertical-lines {
    font-size: 12px;
    line-height: 20px;
  }
}

/* 모바일 목록: 뱃지를 작가명 위로 배치 (Figma 11560-173151 / 11570-59879) */
@media all and (max-width: 1023px) {
  .ps-info-box {
    display: flex;
    flex-direction: column;
  }
  .ps-info-box .ps-badges {
    order: -1;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 8px;
  }
  /* 모바일 뱃지: 작게 (Figma 46x20 = font 12 / line 16 / padding 2·6) */
  .ps-info-box .ps-badge {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 16px;
  }
  /* 뱃지가 없으면 영역을 완전히 비워 이전과 동일하게 유지 */
  .ps-info-box .ps-badges:empty {
    margin-bottom: 0;
  }
  /* PS 목록 모바일: 이미지 외곽 영역 130x150 / 이미지 130x130 (SRI-4235 #36385)
   * wrap-lot_list 공용 규칙은 .image-area 130x200 + .img-ratio{margin-top:30px}(LOT 번호 자리)인데
   * PS 목록은 LOT 번호를 숨기므로, PS(type_panel-private_sale)에서만 상단 여백을 없애고
   * 외곽 영역 높이를 150px로 줄여 이미지(130) 아래 빈 공간을 정리한다. */
  .content-panel.type_panel-product_list.wrap-lot_list.type_panel-private_sale .product-list .item-article .image-area {
    height: 150px;
  }
  .content-panel.type_panel-product_list.wrap-lot_list.type_panel-private_sale .product-list .item-article .image-area .img-ratio {
    margin-top: 0;
  }
  /* 옆 텍스트 영역도 공용 min-height 200px → 150px로 맞춰 카드 높이를 통일한다. */
  .content-panel.type_panel-product_list.wrap-lot_list.type_panel-private_sale .product-list .item-article .typo-area {
    min-height: 150px;
  }
}