/* ================================================
   STACK_IN_IMG_1 - 이미지 카드 리스트 (상하배열, 그리드)
   CSS 변수: --si1-* (자동 빌드)
   ================================================ */

.stack_list:has(.STACK_IN_IMG_1) { overflow: visible !important; }

.STACK_IN_IMG_1 { width: 100%; }

/* 100% 높이 모드 */
.STACK_IN_IMG_1.si1_full_height { height: 100%; display: flex; flex-direction: column; }
.STACK_IN_IMG_1.si1_full_height .si1_grid { flex: 1; min-height: 0; }

/* ── 그리드 ── */
.STACK_IN_IMG_1 .si1_grid {
  display: grid;
  grid-template-columns: repeat(var(--si1-grid-cols, 2), 1fr);
  gap: var(--si1-grid-gap, clamp(15px, calc(0.78vw + 12.5px), 25px));
}

@media only all and (max-width: 991px) {
  .STACK_IN_IMG_1 .si1_grid {
    grid-template-columns: repeat(var(--si1-grid-cols-tablet, 2), 1fr);
  }
}
@media only all and (max-width: 767px) {
  .STACK_IN_IMG_1 .si1_grid {
    grid-template-columns: repeat(var(--si1-grid-cols-mobile, 1), 1fr);
  }
}

/* ── 카드 ── */
.STACK_IN_IMG_1 .si1_card {
  background: var(--si1-card-bg, transparent);
  border-radius: var(--si1-card-radius, 0);
  box-shadow: var(--si1-card-shadow, none);
  padding: var(--si1-card-padding, 0);
  border: var(--si1-card-border, none);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}

.STACK_IN_IMG_1 .si1_card:hover {
  box-shadow: var(--si1-hover-card-shadow, var(--si1-card-shadow, none));
}

.STACK_IN_IMG_1 .si1_card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ── 이미지 영역 ── */
.STACK_IN_IMG_1 .si1_img_wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--si1-img-ratio, 16/10);
  background: var(--si1-img-bg, #f3f4f6);
}

/* 이미지 inner (클리핑) */
.STACK_IN_IMG_1 .si1_img_inner {
  position: absolute; inset: 0;
  border-radius: var(--si1-img-radius, 12px);
  overflow: hidden;
  z-index: 1;
}

.STACK_IN_IMG_1 .si1_img_inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--si1-img-opacity, 1);
  transition: transform 0.4s ease, opacity 0.3s;
}

.STACK_IN_IMG_1 .si1_card:hover .si1_img_inner img {
  transform: scale(var(--si1-img-hover-scale, 1.05));
  opacity: var(--si1-img-hover-opacity, var(--si1-img-opacity, 1));
}

/* ── 데코: 우측 하단 SVG 컷아웃 + 화살표 (show_deco=1) ── */
.STACK_IN_IMG_1 .si1_has_deco::after {
  content: "";
  position: absolute; right: 0; bottom: -1px; z-index: 3;
  width: 80px; height: 82px;
  background-image: url("data:image/svg+xml,%3Csvg width='110' height='112' viewBox='0 0 110 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M110 112H0C17.67 112 32 97.67 32 80V64C32 46.3269 46.3269 32 64 32H78C95.67 32 110 17.67 110 0V112Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  pointer-events: none;
}
.STACK_IN_IMG_1 .si1_deco_arrow {
  position: absolute; bottom: 0; right: 0; z-index: 5;
  width: var(--si1-deco-arrow-size, 48px);
  height: var(--si1-deco-arrow-size, 48px);
  background: var(--si1-deco-arrow-bg, #333);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  transition: background 0.3s, transform 0.3s;
}
.STACK_IN_IMG_1 .si1_card:hover .si1_deco_arrow {
  background: var(--primary, #333);
  transform: scale(1.05);
}
/* ── 화살표만 모드 (이미지 위 우측 하단) ── */
.STACK_IN_IMG_1 .si1_img_arrow {
  position: absolute; bottom: 15px; right: 15px; z-index: 3;
  width: var(--si1-deco-arrow-size, 40px);
  height: var(--si1-deco-arrow-size, 40px);
  background: var(--si1-deco-arrow-bg, rgba(0,0,0,0.5));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  transition: background 0.3s, transform 0.3s;
  opacity: 0.85;
}
.STACK_IN_IMG_1 .si1_card:hover .si1_img_arrow {
  background: var(--primary, #333);
  transform: scale(1.1);
  opacity: 1;
}
.STACK_IN_IMG_1 .si1_has_arrow {
  border-radius: var(--si1-img-radius, 12px);
  overflow: hidden;
}

/* 데코 없을 때: 기존처럼 overflow hidden */
.STACK_IN_IMG_1 .si1_img_wrap:not(.si1_has_deco):not(.si1_has_arrow) {
  border-radius: var(--si1-img-radius, 12px);
  overflow: hidden;
}

/* ── 텍스트 영역 ── */
.STACK_IN_IMG_1 .si1_info {
  padding: var(--si1-txt-padding, 12px 0 0 0);
  text-align: var(--si1-txt-align, left);
  position: relative;
}

/* ── 라벨 ── */
.STACK_IN_IMG_1 .si1_label {
  display: var(--si1-label-display, inline-block);
  font-size: var(--si1-label-size, clamp(10px, calc(0.08vw + 9.75px), 11px));
  color: var(--si1-label-font-color, var(--primary, #10b981));
  background: var(--si1-label-color, transparent);
  border-radius: var(--si1-label-radius, 0);
  padding: var(--si1-label-padding, 0);
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}
/* 인라인 배경색이 있을 때 (label_colors) 최소 패딩/라운드 보장 */
.STACK_IN_IMG_1 .si1_label[style*="background"] {
  padding: var(--si1-label-padding, 3px 8px);
  border-radius: var(--si1-label-radius, 4px);
}
/* 라벨 위치: 이미지 위 절대위치 */
.STACK_IN_IMG_1 .si1_img_wrap > .si1_label {
  position: absolute; z-index: 3; margin: 0;
}
.STACK_IN_IMG_1 .si1_label_abs_rt .si1_img_wrap > .si1_label { top: 10px; right: 10px; }
.STACK_IN_IMG_1 .si1_label_abs_lt .si1_img_wrap > .si1_label { top: 10px; left: 10px; }

/* ── 제목 ── */
.STACK_IN_IMG_1 .si1_title {
  display: -webkit-box;
  -webkit-line-clamp: var(--si1-title-clamp, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--si1-title-size, clamp(14px, calc(0.16vw + 13.5px), 16px));
  color: var(--si1-title-color, #1f2937);
  font-weight: var(--si1-title-weight, 600);
  line-height: var(--si1-title-lh, 1.4);
  letter-spacing: var(--si1-title-spacing);
  padding: var(--si1-title-padding, 0);
  margin-bottom: 6px;
  word-break: keep-all;
  transition: color 0.2s;
}

.STACK_IN_IMG_1 .si1_card:hover .si1_title {
  color: var(--si1-hover-title-color, var(--primary, #dc2626));
}

/* ── 본문 ── */
.STACK_IN_IMG_1 .si1_desc {
  display: var(--si1-content-display, -webkit-box);
  -webkit-line-clamp: var(--si1-content-clamp, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: var(--si1-content-padding, 0);
  font-size: var(--si1-content-size, clamp(12px, calc(0.08vw + 11.75px), 13px));
  color: var(--si1-content-color, #6b7280);
  font-weight: var(--si1-content-weight, 400);
  line-height: var(--si1-content-lh, 1.5);
  margin: 0 0 6px;
}

/* ── 날짜 ── */
.STACK_IN_IMG_1 .si1_date {
  display: var(--si1-date-display, block);
  font-size: var(--si1-date-size, clamp(11px, calc(0.08vw + 10.75px), 12px));
  color: var(--si1-date-color, #9ca3af);
  font-weight: var(--si1-date-weight, 400);
  padding: var(--si1-date-padding, 0);
}
/* 날짜 위치: 절대위치 (si1_info 기준) */
.STACK_IN_IMG_1 .si1_date_abs_rt .si1_date {
  position: absolute; top: var(--si1-txt-padding, 12px); right: 0;
}
.STACK_IN_IMG_1 .si1_date_abs_lt .si1_date {
  position: absolute; top: var(--si1-txt-padding, 12px); left: 0;
}

/* ── 영상 재생 버튼 (video 모드) ── */
.STACK_IN_IMG_1 .si1_play_btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 56px; height: 56px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px;
  transition: background 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
}
/* 호버: 배경 어두워지고 + 플레이 버튼 강조 (inner에 적용) */
.STACK_IN_IMG_1 .si1_img_inner::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
  z-index: 2;
  pointer-events: none;
}
.STACK_IN_IMG_1 .si1_card:has(.si1_play_btn):hover .si1_img_inner::after {
  background: rgba(0,0,0,0.35);
}
.STACK_IN_IMG_1 .si1_card:hover .si1_play_btn {
  background: rgba(220,38,38,0.9);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ── NEW 아이콘 ── */
.STACK_IN_IMG_1 .si1_new {
  display: inline-block; padding: 1px 5px; font-size: 10px; font-weight: 700;
  color: #23db79; background: #e8fff1; border-radius: 3px;
  vertical-align: middle; line-height: 1.4; margin: 0 4px;
}

/* ── 빈 리스트 ── */
.STACK_IN_IMG_1 .si1_empty {
  padding: 60px 20px; text-align: center;
  color: #94a3b8; font-size: 15px;
}

/* ================================================
   반응형 - 모바일
   ================================================ */
@media only all and (max-width: 767px) {
  .STACK_IN_IMG_1 .si1_img_inner {
    border-radius: var(--si1-img-radius, 8px);
  }
  .STACK_IN_IMG_1 .si1_img_wrap:not(.si1_has_deco) {
    border-radius: var(--si1-img-radius, 8px);
  }

  .STACK_IN_IMG_1 .si1_title {
    font-size: var(--si1-title-size, 14px);
  }

  .STACK_IN_IMG_1 .si1_desc {
    font-size: var(--si1-content-size, 12px);
  }

  /* 데코 모바일 축소 */
  .STACK_IN_IMG_1 .si1_has_deco::after {
    width: 65px; height: 67px;
  }
  .STACK_IN_IMG_1 .si1_deco_arrow {
    width: 40px; height: 40px; font-size: 18px;
  }
  .STACK_IN_IMG_1 .si1_play_btn {
    width: 44px; height: 44px; font-size: 22px;
  }
}