/* v3.15.21 — 상세페이지 관련 건강정보 카드 디자인을 메인페이지 건강정보 카드와 동일하게 통일 */
.detail-related-section{
  background:#fff;
}

.detail-related-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  grid-auto-rows:1fr;
}

.detail-related-card{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0 0 18px;
  overflow:hidden;
  border:1px solid #e1e5df;
  border-radius:15px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(24,58,42,.035);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.detail-related-card:hover{
  transform:translateY(-3px);
  border-color:#cbd7ce;
  box-shadow:0 12px 28px rgba(24,58,42,.075);
}

.detail-related-card-image{
  flex:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  min-height:0;
  max-height:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  margin:0;
  border-radius:0;
  background:linear-gradient(145deg,#e3ece5,#cad9ce);
}
.detail-related-card-image img{
  display:block;
  width:100%;
  height:100%;
  min-width:100%;
  max-width:100%;
  min-height:100%;
  max-height:none;
  margin:0;
  border-radius:0;
  object-fit:cover;
  object-position:center;
}
.detail-related-card-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:20px;
  background:linear-gradient(145deg,#e3ece5,#cad9ce);
  color:#607a69;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
}

.detail-related-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:0;
}
.detail-related-card-category{
  margin:14px 18px 0;
  padding-top:13px;
  border-top:1px solid #eef1ed;
  color:#64856e;
  font-size:10px;
  font-weight:700;
}
.detail-related-card h3{
  min-height:3.05em;
  margin:18px 18px 8px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:#183a2a;
  font-family:var(--title);
  font-size:18px;
  line-height:1.52;
  word-break:keep-all;
}
.detail-related-card p{
  min-height:5.1em;
  margin:0 18px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  color:#747b76;
  font-size:12px;
  line-height:1.7;
  word-break:keep-all;
}
.detail-related-card-link{
  margin:14px 18px 0;
  padding-top:13px;
  border-top:1px solid #eef1ed;
  color:#3f7253;
  font-size:10px;
  font-weight:700;
}

/* 기존 더보기 리스트는 유지 */

@media(max-width:900px){
  .detail-related-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .detail-related-card:nth-child(3){
    grid-column:auto;
    display:flex;
  }
  .detail-related-card:nth-child(3) .detail-related-card-image{
    aspect-ratio:16/10;
    min-height:0;
  }
}

@media(max-width:640px){
  .detail-related-section{
    padding-top:52px !important;
    padding-bottom:58px !important;
  }
  .detail-related-cards{
    grid-template-columns:1fr;
    gap:14px;
  }
  .detail-related-card:nth-child(3){
    grid-column:auto;
    display:flex;
  }
  .detail-related-card:nth-child(3) .detail-related-card-image{
    aspect-ratio:16/10;
    min-height:0;
  }
  .detail-related-card h3{
    min-height:0;
    font-size:18px;
  }
  .detail-related-card p{
    min-height:0;
  }
}