/* ================================================
   TOTAL_IMG3 — 흰박스 카드 (썸네일 + 본문 + 프로필/작성자/라벨)
   모든 수치는 CSS 변수로 제어 가능
   ================================================ */

/* 카드 박스 */
.im3_card .im3_item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--im3-box-bg, #fff);
  border-radius: var(--im3-box-radius, 16px);
  padding: var(--im3-box-padding, clamp(20px, calc(1.5625vw + 15px), 40px));
  /* 4방향 패딩 — 지정 시 box-padding 의 해당 면 덮어씀 */
  padding-top:    var(--im3-box-padding-top, var(--im3-box-padding, clamp(20px, calc(1.5625vw + 15px), 40px)));
  padding-right:  var(--im3-box-padding-right, var(--im3-box-padding, clamp(20px, calc(1.5625vw + 15px), 40px)));
  padding-bottom: var(--im3-box-padding-bottom, var(--im3-box-padding, clamp(20px, calc(1.5625vw + 15px), 40px)));
  padding-left:   var(--im3-box-padding-left, var(--im3-box-padding, clamp(20px, calc(1.5625vw + 15px), 40px)));
  box-shadow: var(--im3-box-shadow, 0 2px 8px rgba(0,0,0,0.06));
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.im3_card .im3_item:hover {
  box-shadow: var(--im3-box-shadow-hover, 0 8px 24px rgba(0,0,0,0.1));
  transform: translateY(-2px);
}

/* 썸네일 */
.im3_card .im3_thumb {
  position: relative;
  width: 100%;
  aspect-ratio: var(--im3-img-ratio, 4/3);
  height: var(--im3-img-height, auto);
  border-radius: var(--im3-img-radius, 12px);
  overflow: hidden;
  background: #f3f4f6;
  flex-shrink: 0;
}
.im3_card .im3_thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.im3_card .im3_item:hover .im3_thumb img {
  transform: scale(1.04);
}

/* 본문 영역 */
.im3_card .im3_body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--im3-body-padding, 18px 4px 14px);
  gap: 10px;
}

/* 제목 */
.im3_card .im3_title {
  display: var(--im3-title-display, -webkit-box);
  font-size: var(--im3-title-size, 18px);
  font-weight: var(--im3-title-weight, 700);
  color: var(--im3-title-color, #111);
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 본문 */
.im3_card .im3_content {
  display: var(--im3-content-display, -webkit-box);
  font-size: var(--im3-content-size, 14px);
  color: var(--im3-content-color, #5b6470);
  line-height: 1.7;
  margin: 0;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 하단 푸터 */
.im3_card .im3_foot {
  display: var(--im3-foot-display, var(--im3-profile-display, flex));
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--im3-foot-padding, 14px 0 0);
  margin-top: 14px;
  border-top: var(--im3-foot-border-top, 1px solid var(--im3-divider-color, #e5e7eb));
}
.im3_card .im3_foot_right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.im3_card .im3_profile_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

/* 둥근 프로필 */
.im3_card .im3_profile {
  flex-shrink: 0;
  width: var(--im3-profile-size, 40px);
  height: var(--im3-profile-size, 40px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--im3-profile-bg, #f3f4f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.im3_card .im3_profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 프로필 fallback 아이콘 */
.im3_card .im3_profile.im3_profile_icon i {
  font-size: var(--im3-profile-icon-size, 20px);
  color: var(--im3-profile-icon-color, #9ca3af);
  line-height: 1;
}

/* 메타 영역 (작성자 + 카테고리 라벨) */
.im3_card .im3_meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.im3_card .im3_author {
  font-size: var(--im3-author-size, 14px);
  font-weight: var(--im3-author-weight, 600);
  color: var(--im3-author-color, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.im3_card .im3_cate {
  display: var(--im3-label-display, inline-block);
  width: fit-content;
  font-size: var(--im3-label-size, 12px);
  font-weight: 500;
  color: var(--im3-label-font-color, #6b7280);
  background: var(--im3-label-color, transparent);
  border-radius: var(--im3-label-radius, 0);
  padding: var(--im3-label-padding, 0);
  line-height: 1.5;
}

/* 날짜 */
.im3_card .im3_date {
  font-size: var(--im3-date-size, 13px);
  color: var(--im3-date-color, #9ca3af);
  font-weight: 500;
  white-space: nowrap;
}

/* + 버튼 */
.im3_card .im3_more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--im3-more-size, 36px);
  height: var(--im3-more-size, 36px);
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 18px;
  transition: all 0.2s ease;
}
.im3_card .im3_item:hover .im3_more {
  background: var(--im3-more-hover-bg, #111);
  border-color: var(--im3-more-hover-bg, #111);
  color: #fff;
}

/* 빈 카드 */
.im3_card.empty-slide .empty-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #9ca3af;
  font-size: 14px;
  background: var(--im3-box-bg, #fff);
  border-radius: var(--im3-box-radius, 16px);
}

/* ================================================
   모바일
   ================================================ */
@media only all and (max-width: 767px) {
  .im3_card .im3_item {
    padding: var(--im3-box-padding-mo, 14px);
    border-radius: var(--im3-box-radius-mo, var(--im3-box-radius, 14px));
  }
  .im3_card .im3_body {
    padding: 14px 2px 10px;
    gap: 8px;
  }
  .im3_card .im3_title {
    /* 모바일 전용값(-mo) 없으면 PC값(--im3-title-size, clamp 등) 따라감 */
    font-size: var(--im3-title-size-mo, var(--im3-title-size, 16px));
  }
  .im3_card .im3_content {
    font-size: var(--im3-content-size-mo, var(--im3-content-size, 13px));
    -webkit-line-clamp: 4;
  }
  .im3_card .im3_foot {
    padding-top: 10px;
    margin-top: 10px;
  }
  .im3_card .im3_profile {
    width: var(--im3-profile-size-mo, var(--im3-profile-size, 34px));
    height: var(--im3-profile-size-mo, var(--im3-profile-size, 34px));
  }
  .im3_card .im3_more {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/* ================================================
   슬라이드 높이 통일 (가장 긴 카드 기준)
   - Swiper 슬라이드를 stretch 시켜 같은 행 카드들이 같은 높이
   - 본문 영역(im3_body)이 늘어나며 푸터는 항상 하단 고정
   ================================================ */
.im3_card.im3-equal-height {
  height: auto;
}
/* 같은 wrapper 안에 통일 카드가 있으면 모든 슬라이드 stretch (:has 지원 브라우저) */
.swiper-wrapper:has(.im3-equal-height) {
  align-items: stretch;
}
.swiper-wrapper:has(.im3-equal-height) > .swiper-slide {
  height: auto;
}
/* 통일 카드 자체 — 슬라이드(부모) 높이를 꽉 채움 */
.im3_card.im3-equal-height .im3_item {
  height: 100%;
}
/* 본문 영역이 남은 공간 흡수 → 푸터 하단 고정 */
.im3_card.im3-equal-height .im3_body {
  flex: 1 1 auto;
}
.im3_card.im3-equal-height .im3_foot {
  margin-top: auto;
}