/* ── static/css/modules/youtube.css ── */

.youtube-card .views-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 8px;
}

/* (기사 카드와 동일한 detail-summary 토글 스타일을 그대로 사용해도 됩니다) */


/* ───────── 모바일 전용 커스텀 ───────── */
@media (max-width: 768px) {


  /* 2) 배너 카드 썸네일 16:9 비율로 */
  .mobile-more-list .youtube-card.full-width .result-thumbnail
  
  {
    padding-bottom: 56.25% !important;  /* 16 ÷ 9 × 100 */
    width: 100% !important; /* 폭 꽉 차게 */
    height: 0 !important;  /* 높이 고정 대신 */
  }

  /* 3) 배너 카드 안의 이미지가 꽉 차도록 */
  .mobile-more-list .youtube-card.full-width .result-thumbnail img {
    object-fit: cover;
  }
  .mobile-more-list .youtube-card{
    flex: 0 0 100% !important;
    max-width: 45% !important;
    margin : 0 !important;
  }
  .mobile-more-list .result-item.full-width,
  .mobile-more-list .youtube-card.full-width {
    flex: 0 0 94% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;   /* grid 레이아웃 대비 */
  }
  .mobile-more-list .result-item.full-width,
  .mobile-more-list .youtube-card.full-width .result-title {
    font-size : 16px !important; /* 모바일에서 배너 카드 제목 크게 */
  }
.mobile-more-list .card-third {
    display: flex;               /* 세로 → 가로 */
    flex-direction: row;
    align-items: stretch;
    flex: 0 0 94%!important;
    max-width: 100% !important;
    height: auto;                /* 높이는 콘텐츠에 맞게 */
  }

  /* 2) 썸네일을 오른쪽으로, 폭 40 % 정도 */
  .mobile-more-list .card-third .result-thumbnail {
    order: 2;                    /* 오른쪽 */
    flex: 0 0 40%;
    max-width: 40%;
    padding-bottom: 0;           /* 높이 고정 대신 */
    aspect-ratio: 3 / 2;         /* 3:2 비율 유지 */
  }
  .mobile-more-list .card-third .result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

   /* 2) 썸네일을 오른쪽으로, 폭 40 % 정도 */
  .mobile-more-list .card-third .result-thumbnail {
    order: 2;                    /* 오른쪽 */
    flex: 0 0 40%;
    max-width: 40%;
    padding-bottom: 0;           /* 높이 고정 대신 */
    aspect-ratio: 3 / 2;         /* 3:2 비율 유지 */
  }
  .mobile-more-list .card-third .result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 3) 텍스트(제목·요약) 영역을 왼쪽으로 */
  .mobile-more-list .card-third .result-content {
    order: 1;                    /* 왼쪽 */
    flex: 1 1 60%;               /* 남은 공간 */
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


}

/* 모바일 전용 */