/* style.gallery.scss
-------------------------------------------------------------------------------------------------------- */
#xet-simple-board .simple-board__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(120px, auto);
  grid-gap: 16px;
}

/* Item */
#xet-simple-board .simple-board__gallery .item {
  overflow: hidden;
  border-radius: 0;
  z-index: 0;
  border: 0.5px solid var(--board-border-color);
  box-shadow: var(--board-box-shadow);
  transition: all 0.25s;
}

#xet-simple-board .simple-board__gallery .item.is-active {
  background-color: #f4f9f9;
}

#xet-simple-board .simple-board__gallery .item .item__thumbnail .thumbnail {
  display: block;
  overflow: hidden;
}

/* ✅ 이미지 아래 여백(베이스라인) 제거 */
#xet-simple-board .simple-board__gallery .item .item__thumbnail .thumbnail img {
  width: 100%;
  display: block;
  transition-duration: 0.3s;
}

#xet-simple-board .simple-board__gallery .item .item__contents {
  color: var(--board-text-base-color);
}

/* ✅ 기본 inner 리듬 통일 (모바일/PC 모두 10px) */
#xet-simple-board .simple-board__gallery .item .item__contents .item__inner {
  padding: 0 16px;
  margin-top: 10px;
}

#xet-simple-board .simple-board__gallery .item .item__contents .item__inner:last-child {
  margin-bottom: 10px;
}

#xet-simple-board .simple-board__gallery .item .item__contents .item__category {
  color: var(--board-primary-color);
}

/* 제목 영역 */
#xet-simple-board .simple-board__gallery .item .item__contents .item__subject {
  display: flex;
  align-items: center;
}

/* 제목 영역 위쪽 간격(B2B) */
#xet-simple-board .simple-board__gallery .item .item__contents .item__subject.item__inner {
  margin-top: 10px; /* ✅ 리듬 통일 */
}

/* 체크박스 */
#xet-simple-board .simple-board__gallery .item .item__contents .item__subject input[name=cart] {
  margin-right: 4px;
}

/* (사용 안 하면 영향 없음) 요약 */
#xet-simple-board .simple-board__gallery .item .item__contents .item__summary {
  color: var(--board-text-strong-color);
}

/* =========================
   B2B 카드 타이포 (톤 다운, 50+ 제품군용)
========================= */

/* 제목(설명 텍스트) */
#xet-simple-board .simple-board__gallery
.item .item__contents .item__subject a.subject{
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #6b7682;
  display: block;
}

/* 모델코드(extra_1) */
#xet-simple-board .simple-board__gallery .yh-model{
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-right: 2px;
}

/* ✅ 부제목(extra_2) - PC/모바일 모두 절대 안 잘리게 */
#xet-simple-board .simple-board__gallery
.item .item__contents .item__ev-only{
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #7c8794;
  letter-spacing: -0.01em;

  /* 줄바꿈 정책 (한글/영문 모두 안전) */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;

  /* ✅ 잘림/클램프 제거 */
  overflow: visible;
  max-height: none;
  height: auto;
}

/* 조회수 등 보조정보 */
#xet-simple-board .simple-board__gallery
.item .item__contents .item__etc-wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: #b3bcc7;
}

#xet-simple-board .simple-board__gallery.style-b .item {
  border-radius: 1rem;
}

/* 반응형 */
@media (min-width: 768px) {
  #xet-simple-board .simple-board__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  #xet-simple-board .simple-board__gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  #xet-simple-board .simple-board__gallery .item:hover {
    box-shadow: var(--board-box-shadow2);
  }

  #xet-simple-board .simple-board__gallery .item:hover .item__thumbnail img {
    transform: scale(1.2, 1.2);
  }
}

@media (min-width: 1200px) {
  #xet-simple-board .simple-board__gallery {
    grid-template-columns: repeat(5, 1fr);
  }
}






/* =========================================================
   Extra vars group background (ALL extra vars)
========================================================= */

/* 제목 다음 첫 확장변수 줄(그룹 시작) */
#xet-simple-board .simple-board__gallery
.item .item__contents .item__subject + .item__extra{
  margin-top: 10px;
  padding: 10px 16px 3px 16px;

  background: #ffffff;
  border: 1px solid #e6ebf0;
  border-bottom: 0;

  border-radius: 8px 8px 0 0;
}

/* 두 번째 줄부터 */
#xet-simple-board .simple-board__gallery
.item .item__contents .item__extra + .item__extra{
  margin-top: 0;
  padding: 3px 16px;

  background: #ffffff;
  border-left: 1px solid #eef2f6;
  border-right: 1px solid #eef2f6;
}

/* 마지막 줄 */
#xet-simple-board .simple-board__gallery
.item .item__contents .item__extra:last-of-type{
  padding-bottom: 10px;

  background: #ffffff;
  border-left: 1px solid #eef2f6;
  border-right: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;

  border-radius: 0 0 8px 8px;
}

/* 확장변수 텍스트 */
#xet-simple-board .simple-board__gallery
.item .item__contents .item__extra{
  font-size: 12.5px;
  line-height: 1.3;
  color: #9aa6b2;
  font-weight: 500;
}

/* 내부 여백 제거 */
#xet-simple-board .simple-board__gallery .item__extra p,
#xet-simple-board .simple-board__gallery .item__extra div{
  margin: 0;
  padding: 0;
}

/* 라벨 */
#xet-simple-board .simple-board__gallery
.item__extra > span{
  color: #7f8b97;
  font-weight: 500;
}

/* 줄바꿈 제거 */
#xet-simple-board .simple-board__gallery
.item__extra br{
  display: none;
}

/* =========================================================
   Model color
========================================================= */

body.mid-board5 #xet-simple-board .simple-board__gallery .yh-model{
  color: #55606c !important;
}

body:not(.mid-board5) #xet-simple-board .simple-board__gallery .yh-model{
  color: #2b2f34 !important;
}

/* =========================================================
   Material Filter Tabs
========================================================= */

.yh-material-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}

.yh-material-tabs a{
  display:inline-block;
  padding:8px 14px;
  border:1px solid #d9d9d9;
  border-radius:999px;
  background:#fff;
  color:#333;
  text-decoration:none;
  font-size:14px;
  line-height:1.2;
}

.yh-material-tabs a.is-active{
  background:#169179;
  border-color:#169179;
  color:#fff;
}

/* =========================================================
   Material Badge (물질종류)
========================================================= */

#xet-simple-board .simple-board__gallery
.item .item__contents .yh-material-badge{
  display:inline-block;
  margin-top:6px;
  margin-bottom:8px;
  padding:4px 10px;
  border-radius:999px;
  background:#eaf6f4;
  color:#169179;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
}