/* ================================================
   V1_IMG - 이미지 카드 latest 신버전 (TOTAL_CARDIMG1 기반)
   - 탭믹스 슬롯 설정 CSS 변수 전체 연동
   - 텍스트 오버레이 모드 / 화살표 데코 모드 지원
   ================================================ */

/* 카드 아이템 */
.V1_IMG .card_item {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--ci1-box-bg, transparent);
  border-radius: var(--ci1-box-radius, 0);
  overflow: visible;
  box-shadow: var(--ci1-box-shadow, none);
  transition: all 0.3s ease;
  text-decoration: none;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  padding: var(--ci1-box-padding, 0);
  /* 카드 테두리 라인 — 기본 없음. 컬러만 지정 시 1px */
  border: var(--ci1-box-border-w, 1px) solid var(--ci1-box-border-c, transparent);
  box-sizing: border-box;
}

.V1_IMG .card_item:hover {
  transform: none;
  box-shadow: var(--ci1-box-hover-shadow, none);
}

/* ★ 박스 라운드 마스크 (v1img_boxclip — 박스 라운드 설정한 슬롯만)
   카드 박스에 모서리 라운드를 주면, 안의 이미지 라운드가 0이어도 박스 모서리로 클립.
   그림자는 overflow 와 무관하게 바깥에 정상 표시됨 */
.V1_IMG.v1img_boxclip .card_item {
  overflow: hidden;
}
/* 보강: 이미지 자체 마스크(배경 ::before / 클리핑 card_img_inner)의 위쪽 모서리도
   박스 라운드 이상으로 강제 — 이미지 라운드가 0이어도 카드 위 모서리가 항상 둥글게 */
.V1_IMG.v1img_boxclip .card_img::before,
.V1_IMG.v1img_boxclip .card_img_inner {
  border-top-left-radius: max(var(--ci1-img-radius, 16px), var(--ci1-box-radius, 0px));
  border-top-right-radius: max(var(--ci1-img-radius, 16px), var(--ci1-box-radius, 0px));
}

/* 제목 숨김 (hide_title=1 — 로고 나열 모드 등) */
.V1_IMG.v1img_no_title .card_title {
  display: none;
}

/* ★ 이미지 전용 모드 (라벨/제목/본문/날짜 전부 숨김) — 빈 텍스트 박스가 패딩만큼
   카드 하단 공간을 차지하던 문제 → card_info 자체를 접음 (로고 나열 등) */
.V1_IMG.v1img_img_only .card_info {
  display: none;
}

/* ★ 이미지 온전히 표시 모드 (img_fit=contain) — 비율 박스는 유지하되 이미지를 잘림 없이
   가로·세로 중앙 정렬로 통째 표시. 남는 여백 = 이미지 뒤 배경색(--ci1-img-bg).
   가로로 긴 로고 등 크롭되면 안 되는 이미지용. hover 확대도 함께 무효화 */
.V1_IMG.v1img_fit_contain .card_img_inner img {
  object-fit: contain;
  object-position: center center;
}
.V1_IMG.v1img_fit_contain .card_item:hover .card_img_inner img {
  transform: none;
}

/* ★ 구분선(라인) — btx_order 에 "라인" 넣은 위치에 출력 (V1_BBSTX1 과 동일 변수) */
.V1_IMG .card_info .btx_line {
  display: block;
  width: 100%;
  border: 0;
  border-top: var(--btx-line-height, 1px) var(--btx-line-style, solid) var(--btx-line-color, #e5e7eb);
  margin-top: var(--btx-line-mt, 10px);
  margin-bottom: var(--btx-line-mb, 10px);
}

/* 이미지 래퍼 (버튼 포함) */
.V1_IMG .card_img_wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ci1-img-ratio, 16/10);
}

/* 이미지 영역 - 외부 컨테이너 (SVG 배경용) */
.V1_IMG .card_img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: visible;
  background: transparent;
}

/* 이미지 마스크 컨테이너 */
.V1_IMG .card_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--ci1-img-radius, 16px);
  overflow: hidden;
  z-index: 0;
  background: var(--ci1-img-bg, #f3f4f6);
}

/* 둥근 흰색 배경 (SVG) - 우측 하단 라운드 데코
   ※ 이미지 라운드 경계의 서브픽셀 헤어라인(지직거리는 선)을 덮기 위해 1~2px 크게/바깥으로 */
.V1_IMG .card_img::after {
  content: "";
  position: absolute;
  right: 0; /* 우상단 곡선 조각 1px 왼쪽으로 */
  bottom: -1px; /* 좌하단 곡선 조각이 1px 내려가 보여 1px 올림 */
  z-index: 3;
  width: 93px;
  height: 95px;
  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;
}

/* 이미지 래퍼 (실제 클리핑 담당) */
.V1_IMG .card_img_inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--ci1-img-radius, 16px);
  overflow: hidden;
  z-index: 1;
}

.V1_IMG .card_img_inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--ci1-img-opacity, 1);
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.V1_IMG .card_item:hover .card_img_inner img {
  transform: scale(1.05);
  opacity: var(--ci1-img-hover-opacity, var(--ci1-img-opacity, 1));
}

/* MORE 버튼 (동그라미 화살표) — 우측이 카드 라운드 경계에 잘리지 않게 살짝 안쪽으로 */
.V1_IMG .card_more {
  position: absolute;
  bottom: 4px;
  right: 5px;
  width: 52px;
  height: 52px;
  background: var(--v1img-arrow-bg, #333);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
}

.V1_IMG .card_more i {
  color: var(--v1img-arrow-color, #fff);
  font-size: 22px;
}

.V1_IMG .card_item:hover .card_more {
  background: var(--card-more-hover, var(--primary, #333));
  transform: none; /* 이미지 확대(hover)와 무관하게 화살표 크기 유지 */
}

/* ── ★ 노치(데코) 위치: 우측 상단 모드 — 라운드 방향 자동 반전 ──
   SVG를 세로로 뒤집어(scaleY) 곡선이 아래로 파고드는 형태 + 화살표도 상단으로 */
.V1_IMG.v1img_notch_top .card_img::after {
  bottom: auto;
  top: -1px;
  transform: scaleY(-1);
}
.V1_IMG.v1img_notch_top .card_more {
  bottom: auto;
  top: 4px;
}
.V1_IMG.v1img_notch_top.v1img_arrow_circle .card_more { top: 12px; bottom: auto; }
/* 상단 노치 + 오버레이 조합: 텍스트는 하단 그대로, 노치만 위 — 충돌 없음 */

/* ── ★ 화살표/라운드 데코 모드 ──
   circle = 라운드 데코 제거, 동그라미 화살표만 (이미지 안쪽으로 여백)
   none   = 데코/화살표 모두 숨김 */
.V1_IMG.v1img_arrow_circle .card_img::after { display: none; }
.V1_IMG.v1img_arrow_circle .card_more { bottom: 12px; right: 12px; }
.V1_IMG.v1img_arrow_none .card_img::after { display: none; }
.V1_IMG.v1img_arrow_none .card_more { display: none; }

/* 텍스트 영역 */
.V1_IMG .card_info {
  padding: var(--ci1-txt-padding, 16px 8px 0 8px);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  text-align: var(--ci1-title-align, left);
}

/* ── ★ 텍스트 오버레이 모드 (txt_mode: overlay_always / overlay_hover) ──
   텍스트 영역을 이미지 위로 올림 — 하단 그라데이션 + 흰 글씨 기본 */
.V1_IMG.v1img_overlay .card_info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: var(--v1img-overlay-padding, 20px);
  text-align: var(--v1img-overlay-align, left);
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
  border-radius: 0 0 var(--ci1-img-radius, 16px) var(--ci1-img-radius, 16px);
  gap: 6px;
}
/* 오버레이 모드에선 카드 높이 = 이미지 높이 (card_info가 흐름에서 빠지므로) */
.V1_IMG.v1img_overlay .card_item { overflow: hidden; border-radius: var(--ci1-img-radius, 16px); }
/* 오버레이 그라데이션(z4) 위에 흰 라운드 데코(z5)와 화살표(z6)가 오도록 층 재배치 */
.V1_IMG.v1img_overlay .card_img::after { z-index: 5; }
.V1_IMG.v1img_overlay .card_more { z-index: 6; }
/* 오버레이 기본 글자색: 흰색 계열 (설정값 있으면 그 값 우선) */
.V1_IMG.v1img_overlay .card_title { color: var(--ci1-title-color, #fff); }
.V1_IMG.v1img_overlay .card_desc  { color: var(--ci1-content-color, rgba(255,255,255,0.85)); }
.V1_IMG.v1img_overlay .card_label { color: var(--ci1-label-font-color, #fff); }
.V1_IMG.v1img_overlay .card_date  { color: var(--ci1-date-color, rgba(255,255,255,0.7)); }
/* hover 모드: 평소 숨김 → 마우스 오버 시 부드럽게 등장 */
.V1_IMG.v1img_overlay_hover .card_info {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.V1_IMG.v1img_overlay_hover .card_item:hover .card_info {
  opacity: 1;
  transform: translateY(0);
}
/* 오버레이 + 라운드데코 조합 시 화살표가 텍스트 위로 오도록 유지 (z5 > z4) */

/* 라벨 */
.V1_IMG .card_label {
  display: var(--ci1-label-display, inline-block);
  width: fit-content;
  font-size: var(--ci1-label-size, 13px);
  font-weight: 600;
  color: var(--ci1-label-font-color, var(--primary, #10b981));
  background: var(--ci1-label-color, transparent);
  border-radius: var(--ci1-label-radius, 0);
  padding: var(--ci1-label-padding, 0);
  margin-bottom: 4px;
  line-height: 1.4;
}

/* 제목 */
.V1_IMG .card_title {
  font-size: var(--ci1-title-size, clamp(14px, calc(0.31vw + 13px), 16px));
  font-weight: var(--ci1-title-weight, 600);
  letter-spacing: var(--ci1-title-spacing, normal);
  color: var(--ci1-title-color, #1f2937);
  line-height: var(--ci1-title-lh, 1.4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* 설명 */
.V1_IMG .card_desc {
  display: var(--ci1-content-display, -webkit-box);
  font-size: var(--ci1-content-size, clamp(12px, calc(0.23vw + 11.25px), 14px));
  font-weight: var(--ci1-content-weight, 400);
  letter-spacing: var(--ci1-content-spacing, normal);
  color: var(--ci1-content-color, #6b7280);
  line-height: var(--ci1-content-lh, 1.6);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  margin-top: 4px;
}

/* 날짜 (슬롯설정 ④ 날짜 — hide_date/date_size/date_color/date_weight/date_mb) */
.V1_IMG .card_date {
  display: var(--ci1-date-display, block);
  font-size: var(--ci1-date-size, 12px);
  font-weight: var(--ci1-date-weight, 400);
  color: var(--ci1-date-color, #94a3b8);
  line-height: 1.4;
  margin-top: 2px;
  margin-bottom: var(--ci1-date-mb, 0);
}

/* NEW 아이콘 */
.V1_IMG .ci1_new {
  display: inline-block;
  background: #22c55e;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  margin: 0 3px;
  vertical-align: middle;
  line-height: 1.2;
}

/* ================================================
   모바일 스타일
   ================================================ */
@media only all and (max-width:767px) {
  .V1_IMG .card_img_wrap {
    aspect-ratio: var(--ci1-img-ratio, 16/9);
  }

  .V1_IMG .card_img::before,
  .V1_IMG .card_img_inner {
    border-radius: var(--ci1-img-radius, 12px);
  }

  .V1_IMG .card_img::after {
    width: 71px;
    height: 73px;
    right: 0;
    bottom: -1px;
  }

  .V1_IMG .card_more {
    width: 40px;
    height: 40px;
    bottom: 4px;
    right: 4px;
  }
  .V1_IMG.v1img_arrow_circle .card_more { bottom: 10px; right: 10px; }

  .V1_IMG .card_more i {
    font-size: 16px;
  }

  .V1_IMG .card_info {
    padding: var(--ci1-txt-padding, 12px 0 0 0);
    gap: 4px;
  }
  .V1_IMG.v1img_overlay .card_info {
    padding: var(--v1img-overlay-padding, 14px);
  }

  .V1_IMG .card_label {
    font-size: var(--ci1-label-size, 12px);
  }

  .V1_IMG .card_title {
    font-size: var(--ci1-title-size, clamp(13px, calc(0.23vw + 12px), 15px));
  }

  .V1_IMG .card_desc {
    font-size: var(--ci1-content-size, clamp(11px, calc(0.2vw + 10px), 13px));
    -webkit-line-clamp: 2;
  }

  .V1_IMG .card_date {
    font-size: var(--ci1-date-size, 11px);
  }

  /* 모바일은 hover가 없으므로 overlay_hover도 항상 표시 */
  .V1_IMG.v1img_overlay_hover .card_info {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ── ★ 영상 썸네일 버전 (view_mode=video) — hover 시 ▶ 오버레이 (TOTAL_IMG1_MV 포팅) ── */
.V1_IMG .v1img_play_overlay { display: none; }
.V1_IMG[data-view-mode="video"] .v1img_play_overlay {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  pointer-events: none;
  z-index: 7; /* 라운드데코(z5)/화살표(z6) 위 */
  border-radius: var(--ci1-img-radius, 16px);
}
.V1_IMG[data-view-mode="video"] .card_item:hover .v1img_play_overlay {
  background: rgba(0,0,0,0.4);
}
.V1_IMG[data-view-mode="video"] .v1img_play_overlay i {
  font-size: clamp(36px, 4vw, 56px);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.V1_IMG[data-view-mode="video"] .card_item:hover .v1img_play_overlay i { opacity: 1; }

/* ── 영상/게시물 모달 (TOTAL_IMG1_MV와 공유 — 단독 사용 대비 동일 정의) ── */
.imgmv_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.imgmv_modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.imgmv_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  gap: 12px;
}
.imgmv_modal_title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imgmv_modal_close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.imgmv_modal_close:hover { background: #e2e8f0; color: #1e293b; }
.imgmv_modal_body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.imgmv_modal_img { width: 100%; margin-bottom: 20px; border-radius: 12px; overflow: hidden; }
.imgmv_modal_img img { width: 100%; height: auto; display: block; }
.imgmv_modal_content { font-size: 15px; line-height: 1.7; color: #374151; word-break: keep-all; }
.imgmv_modal_content img { max-width: 100%; height: auto; }
.imgmv_video_wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.imgmv_video_wrap iframe,
.imgmv_video_wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}
@media only all and (max-width: 767px) {
  .imgmv_modal { max-width: 100%; max-height: 85vh; border-radius: 12px; }
  .imgmv_modal_body { padding: 16px; }
}

/* 빈 슬라이드 */
.V1_IMG .empty-slide .empty_li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #9ca3af;
  font-size: 14px;
}