/* ── static/css/components/card.css ── */

.result-item {
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 8px; /* 카드 사이 간격 */
}
.result-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.result-thumbnail {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 */
  position: relative;
}
.result-thumbnail img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.result-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.result-title {
  margin: 0;
  font-size: 14px;          /* 기본(데스크탑)에서 14px */
  font-weight: 500;
  color: var(--primary-color);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;    /* 최대 2줄까지 표시 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
}


@keyframes skeleton-wave {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton-box {
  flex: 0 0 auto;
  width: clamp(210px, 20vw, 240px);
  min-height: 200px;
  margin: 2px;
  border-radius: 8px;
  background-color: var(--light-gray);
background-image: linear-gradient(
  90deg,
  var(--light-gray)     0px,   /* 기존 medium-gray → light-gray */
  var(--hover-color)    40px,  /* 기존 light-gray  → hover-color (더 밝음) */
  var(--light-gray)     80px   /* 기존 medium-gray → light-gray */
);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: skeleton-wave 1.5s infinite linear;
}


/* ─── 모바일 전용으로 폰트 사이즈 및 여백 조금 조정 ─── */
@media (max-width: 768px) {
  .result-title {
    font-size: 11px;     
    line-height: 1.35;    /* 모바일 문단 조금 더 여유 있게 */
    margin: 0;            /* 필요 시 모바일 여백을 더 줄이려면 여기서 조정 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: auto;
  }

  .result-content {
    padding: 8px;         /* 모바일에서 카드 콘텐츠 패딩을 줄임 */
  }

  .result-meta {
    font-size: 10px;     /* 모바일에서 메타 정보 폰트 더 작게 */
  }
    .carousel-container .skeleton-box {
    /* flex: 0 0 80%; */
    max-width: 40%;
    width: 100vw;            /* flex 기반 너비만 사용 */
    /* margin만 줘서 카드 간격을 동일하게 맞춥니다 */
    margin: 0;
    padding: 2px;              /* 카드와 동일하게 패딩 없이 처리 */
    border-radius: 8px;
    min-height: 150px;
    
  }
}