/* v3.15.5 상세페이지: 대표글 + 3개 카드 + 접힌 목록 */
.detail-related-section{
  padding-top:72px !important;
  padding-bottom:82px !important;
  border-top:1px solid #e6e8e3;
  background:#fbfaf7;
}
.detail-related-head{
  margin-bottom:26px;
}
.detail-related-kicker{
  margin-bottom:7px;
  color:#64856e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}
.detail-related-head h2{
  margin:0 0 7px;
}
.detail-related-head p{
  margin:0;
  color:#747d76;
  font-size:12px;
}

.detail-related-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.detail-related-card{
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid #e1e5df;
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.detail-related-card:hover{
  transform:translateY(-3px);
  border-color:#cfd9d1;
  box-shadow:0 14px 30px rgba(24,58,42,.07);
}
.detail-related-card-image{
  overflow:hidden;
  aspect-ratio:16/10;
  background:#edf1ed;
}
.detail-related-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.detail-related-card-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    linear-gradient(145deg,rgba(238,243,239,.98),rgba(219,230,222,.95));
  color:#557160;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
}
.detail-related-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:20px 19px 19px;
}
.detail-related-card-category{
  margin-bottom:7px;
  color:#64856e;
  font-size:9px;
  font-weight:800;
}
.detail-related-card h3{
  margin:0;
  color:#183a2a;
  font-size:18px;
  line-height:1.48;
  word-break:keep-all;
}
.detail-related-card p{
  margin:10px 0 0;
  color:#747b76;
  font-size:11px;
  line-height:1.72;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.detail-related-card-link{
  margin-top:auto;
  padding-top:17px;
  color:#3f7253;
  font-size:10px;
  font-weight:800;
}
.detail-related-empty{
  padding:48px 0;
  color:#7d867f;
  font-size:12px;
}

.detail-related-more{
  margin-top:20px;
  border:1px solid #e0e5df;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.detail-related-more > summary{
  min-height:58px;
  padding:0 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  list-style:none;
  color:#244232;
  font-size:12px;
  font-weight:800;
  user-select:none;
}
.detail-related-more > summary::-webkit-details-marker{display:none}
.detail-related-more > summary::after{
  content:"+";
  width:26px;
  height:26px;
  margin-left:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf4ef;
  color:#315f45;
  font-size:17px;
  font-weight:500;
}
.detail-related-more[open] > summary::after{content:"−"}
.detail-related-count{
  padding:4px 8px;
  border-radius:999px;
  background:#f1f3f0;
  color:#778078;
  font-size:9px;
  font-weight:700;
}
.detail-related-list{
  border-top:1px solid #edf0ec;
}
.detail-related-list-item{
  min-height:64px;
  padding:12px 18px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 24px;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #f0f2ef;
  color:inherit;
  text-decoration:none;
}
.detail-related-list-item:last-child{border-bottom:0}
.detail-related-list-item:hover{background:#f8faf8}
.detail-related-list-number{
  color:#a0aaa2;
  font-size:9px;
  font-weight:800;
}
.detail-related-list-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.detail-related-list-copy strong{
  overflow:hidden;
  color:#273a2e;
  font-size:12px;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.detail-related-list-copy small{
  color:#849087;
  font-size:9px;
}
.detail-related-list-arrow{
  color:#5f826b;
  font-size:14px;
  text-align:right;
}

@media(max-width:900px){
  .detail-related-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .detail-related-card:nth-child(3){
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
  }
  .detail-related-card:nth-child(3) .detail-related-card-image{
    aspect-ratio:auto;
    min-height:220px;
  }
}
@media(max-width:640px){
  .detail-related-section{
    padding-top:52px !important;
    padding-bottom:58px !important;
  }
  .detail-related-cards{
    grid-template-columns:1fr;
    gap:12px;
  }
  .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-body{padding:17px}
  .detail-related-card h3{font-size:17px}
  .detail-related-more{margin-top:14px}
  .detail-related-more > summary{min-height:54px;padding:0 14px}
  .detail-related-list-item{
    min-height:60px;
    padding:11px 14px;
    grid-template-columns:28px minmax(0,1fr) 20px;
  }
}