/* ================================================
   STACK_IN_SW_1 - 스와이퍼 이미지 카드
   CSS 변수: --sw1-*
   ================================================ */

.STACK_IN_SW_1 { width: 100%; display: flex; flex-direction: column; gap: clamp(8px, calc(0.47vw + 6.5px), 14px); }

/* Swiper 미로드 대비 */
.STACK_IN_SW_1 .swiper-wrapper { display: flex; }
.STACK_IN_SW_1 .swiper-slide { flex-shrink: 0; }

/* ── 컨트롤 세트 공통 ── */
.sw1_ctrl {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px;
}

/* ── 화살표 ── */
.sw1_prev, .sw1_next {
  width: var(--sw1-arrow-size, 36px); height: var(--sw1-arrow-size, 36px);
  border: var(--sw1-arrow-border, none);
  border-radius: var(--sw1-arrow-radius, 50%);
  background: var(--sw1-arrow-bg, transparent);
  color: var(--sw1-arrow-color, #333);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--sw1-arrow-size, 36px) * 0.6);
  cursor: pointer; transition: opacity 0.2s, background 0.2s;
  flex-shrink: 0; padding: 0;
}
.sw1_prev:hover, .sw1_next:hover { opacity: 0.6; }

/* ── 도트 ── */
.sw1_dots {
  display: flex; align-items: center; gap: 6px;
}
.sw1_dots .swiper-pagination-bullet {
  width: var(--sw1-dot-size, 8px); height: var(--sw1-dot-size, 8px);
  border-radius: 50%;
  background: var(--sw1-dot-color, #ccc);
  opacity: 1; transition: background 0.2s;
  cursor: pointer;
}
.sw1_dots .swiper-pagination-bullet-active {
  background: var(--sw1-dot-active-color, var(--primary, #333));
}

/* ── 플레이바 ── */
.sw1_bar {
  flex: 1; height: var(--sw1-bar-height, 3px);
  background: var(--sw1-bar-bg, #e5e7eb);
  border-radius: 99px; overflow: hidden;
}
.sw1_bar_fill {
  height: 100%; width: 0;
  background: var(--sw1-bar-color, var(--primary, #333));
  border-radius: 99px;
  transition: width 0.3s ease;
}

/* ── 세트별 정렬 ── */
.sw1_ctrl_set1 { justify-content: center; }
.sw1_ctrl_set2 { justify-content: flex-end; }
.sw1_ctrl_set3 { justify-content: center; }
.sw1_ctrl_set4 { justify-content: flex-end; }
.sw1_ctrl_set5 { justify-content: flex-start; }
.sw1_ctrl_set6 { justify-content: space-between; }
.sw1_ctrl_set7 { justify-content: flex-start; }
.sw1_ctrl_set8 { justify-content: flex-end; }
.sw1_ctrl_set9 { justify-content: flex-start; }
.sw1_ctrl_set10 { justify-content: center; }
.sw1_ctrl_set11 { justify-content: flex-end; }



/* ================================================
   카드 (IMG_1과 동일 구조)
   ================================================ */

.STACK_IN_SW_1 .sw1_card {
  background: var(--sw1-card-bg, transparent);
  border-radius: var(--sw1-card-radius, 0);
  box-shadow: var(--sw1-card-shadow, none);
  padding: var(--sw1-card-padding, 0);
  overflow: hidden; height: 100%;
}
.STACK_IN_SW_1 .sw1_card a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
}

/* ── 이미지 ── */
.STACK_IN_SW_1 .sw1_img_wrap {
  position: relative; width: 100%;
  aspect-ratio: var(--sw1-img-ratio, 16/10);
  background: var(--sw1-img-bg, #f3f4f6);
}
.STACK_IN_SW_1 .sw1_img_inner {
  position: absolute; inset: 0;
  border-radius: var(--sw1-img-radius, 12px);
  overflow: hidden; z-index: 1;
}
.STACK_IN_SW_1 .sw1_img_inner img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.STACK_IN_SW_1 .sw1_card:hover .sw1_img_inner img {
  transform: scale(var(--sw1-img-hover-scale, 1.05));
}
/* overflow hidden (데코 없을 때) */
.STACK_IN_SW_1 .sw1_img_wrap:not(.sw1_has_deco):not(.sw1_has_arrow) {
  border-radius: var(--sw1-img-radius, 12px); overflow: hidden;
}

/* ── 데코: SVG 컷아웃 + 화살표 ── */
.STACK_IN_SW_1 .sw1_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_SW_1 .sw1_deco_arrow {
  position: absolute; bottom: 0; right: 0; z-index: 5;
  width: 44px; height: 44px;
  background: var(--sw1-deco-arrow-bg, #333);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  transition: background 0.3s, transform 0.3s;
}
.STACK_IN_SW_1 .sw1_card:hover .sw1_deco_arrow {
  background: var(--primary, #333); transform: scale(1.05);
}

/* ── 화살표만 (이미지 위) ── */
.STACK_IN_SW_1 .sw1_img_arrow {
  position: absolute; bottom: 15px; right: 15px; z-index: 3;
  width: 36px; height: 36px;
  background: var(--sw1-deco-arrow-bg, rgba(0,0,0,0.5));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  transition: background 0.3s, transform 0.3s; opacity: 0.85;
}
.STACK_IN_SW_1 .sw1_card:hover .sw1_img_arrow {
  background: var(--primary, #333); transform: scale(1.1); opacity: 1;
}
.STACK_IN_SW_1 .sw1_has_arrow { border-radius: var(--sw1-img-radius, 12px); overflow: hidden; }

/* ── 플레이 버튼 ── */
.STACK_IN_SW_1 .sw1_play_btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 50px; height: 50px;
  background: rgba(0,0,0,0.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; z-index: 2;
  opacity: 0.8; pointer-events: none;
  transition: background 0.3s, transform 0.3s;
}
.STACK_IN_SW_1 .sw1_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_SW_1 .sw1_card:has(.sw1_play_btn):hover .sw1_img_inner::after {
  background: rgba(0,0,0,0.35);
}
.STACK_IN_SW_1 .sw1_card:hover .sw1_play_btn {
  background: rgba(220,38,38,0.9); transform: translate(-50%, -50%) scale(1); opacity: 1;
}

/* ── 텍스트 영역 ── */
.STACK_IN_SW_1 .sw1_info {
  padding: var(--sw1-txt-padding, 12px 0 0 0);
  text-align: var(--sw1-txt-align, left);
  position: relative; flex: 1;
}

/* ── 라벨 ── */
.STACK_IN_SW_1 .sw1_label {
  display: var(--sw1-label-display, inline-block);
  font-size: var(--sw1-label-size, 11px);
  color: var(--sw1-label-font-color, var(--primary, #10b981));
  background: var(--sw1-label-color, transparent);
  border-radius: var(--sw1-label-radius, 0);
  padding: var(--sw1-label-padding, 0);
  font-weight: 600; margin-bottom: 4px; line-height: 1.3;
}
/* 인라인 배경색이 있을 때 (label_colors) 최소 패딩/라운드 보장, 폰트 흰색 고정 */
.STACK_IN_SW_1 .sw1_label[style*="background"] {
  padding: var(--sw1-label-padding, 3px 8px);
  border-radius: var(--sw1-label-radius, 4px);
  color: #fff !important;
}
.STACK_IN_SW_1 .sw1_img_wrap > .sw1_label {
  position: absolute; z-index: 3; margin: 0;
}
.STACK_IN_SW_1 .sw1_label_abs_rt .sw1_img_wrap > .sw1_label { top: 10px; right: 10px; }
.STACK_IN_SW_1 .sw1_label_abs_lt .sw1_img_wrap > .sw1_label { top: 10px; left: 10px; }

/* ── 제목 ── */
.STACK_IN_SW_1 .sw1_title {
  display: -webkit-box; -webkit-line-clamp: var(--sw1-title-clamp, 2); -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--sw1-title-size, clamp(14px, calc(0.16vw + 13.5px), 16px));
  color: var(--sw1-title-color, #1f2937);
  font-weight: var(--sw1-title-weight, 600);
  padding: var(--sw1-title-padding, 0);
  margin-bottom: 6px; word-break: keep-all;
  transition: color 0.2s;
}
.STACK_IN_SW_1 .sw1_card:hover .sw1_title {
  color: var(--primary, #dc2626);
}

/* ── 본문 ── */
.STACK_IN_SW_1 .sw1_desc {
  display: var(--sw1-content-display, -webkit-box);
  -webkit-line-clamp: var(--sw1-content-clamp, 2); -webkit-box-orient: vertical;
  overflow: hidden;
  padding: var(--sw1-content-padding, 0);
  font-size: var(--sw1-content-size, 13px);
  color: var(--sw1-content-color, #6b7280);
  margin: 0 0 6px;
}

/* ── 날짜 ── */
.STACK_IN_SW_1 .sw1_date {
  display: var(--sw1-date-display, block);
  font-size: var(--sw1-date-size, 12px);
  color: var(--sw1-date-color, #9ca3af);
  padding: var(--sw1-date-padding, 0);
}
.STACK_IN_SW_1 .sw1_date_abs_rt .sw1_date {
  position: absolute; top: var(--sw1-txt-padding, 12px); right: 0;
}

/* ── NEW ── */
.STACK_IN_SW_1 .sw1_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_SW_1 .sw1_empty {
  padding: 60px 20px; text-align: center; color: #94a3b8; font-size: 15px;
}


/* ================================================
   탭 시스템 (stk_tab)
   ================================================ */
.STACK_IN_SW_1 .stk_tab_wrap {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: var(--stk-tab-gap, 6px);
  margin: var(--stk-tab-margin, 10px 0 15px 0);
  position: relative;
}
.STACK_IN_SW_1 .stk_tab {
  border: none; cursor: pointer;
  font-size: var(--stk-tab-font-size, 13px);
  font-weight: 500;
  padding: var(--stk-tab-padding, 6px 16px);
  background: var(--stk-tab-off-bg, #f1f5f9);
  color: var(--stk-tab-off-color, #64748b);
  border-radius: var(--stk-tab-radius, 50px);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap; line-height: 1.4; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.STACK_IN_SW_1 .stk_tab.on {
  background: var(--stk-tab-on-bg, var(--primary, #333));
  color: var(--stk-tab-on-color, #fff);
}
.STACK_IN_SW_1 .stk_tab::after {
  content: '\00a0'; display: inline-block;
  width: 0; overflow: hidden; font-size: var(--stk-tab-icon-size, 1.1em);
}
.STACK_IN_SW_1 .stk_tab:has(.stk_tab_more)::after { display: none; }
.STACK_IN_SW_1 .stk_tab:hover:not(.on) { opacity: 0.7; }
.STACK_IN_SW_1 .stk_tab_more {
  display: inline-flex; align-items: center;
  margin-left: var(--stk-tab-icon-gap, 4px);
  color: var(--stk-tab-icon-color, inherit);
  text-decoration: none; vertical-align: middle;
  font-size: var(--stk-tab-icon-size, 1.1em);
  position: relative;
  top: var(--stk-tab-icon-offset-y, -1px);
  left: var(--stk-tab-icon-offset-x, 0px);
}

/* 하단 라인탭 */
.STACK_IN_SW_1 .stk_tab_underline {
  border-bottom: 2px solid var(--stk-tab-line-color, #e5e7eb);
  gap: 0 !important;
}
.STACK_IN_SW_1 .stk_tab_underline .stk_tab {
  background: transparent !important;
  border-radius: 0 !important;
  padding: var(--stk-tab-padding, 10px 16px);
  color: var(--stk-tab-off-color, #64748b);
}
.STACK_IN_SW_1 .stk_tab_underline .stk_tab.on {
  color: var(--stk-tab-on-color, var(--primary, #333));
  background: transparent !important; font-weight: 600;
}
.STACK_IN_SW_1 .stk_tab_indicator {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--stk-tab-active-line, var(--primary, #333));
  transition: left 0.3s ease, width 0.3s ease;
  transform: translateY(1px);
}
.STACK_IN_SW_1 .stk_tab_abs_right {
  position: absolute; top: 0; right: 0;
  margin: 0; width: auto; z-index: 2;
}

/* ================================================
   반응형
   ================================================ */
@media only all and (max-width: 767px) {
  .STACK_IN_SW_1 .sw1_img_inner { border-radius: var(--sw1-img-radius, 8px); }
  .STACK_IN_SW_1 .sw1_title { font-size: var(--sw1-title-size, 14px); }
  .STACK_IN_SW_1 .sw1_desc { font-size: var(--sw1-content-size, 12px); }
  .sw1_prev, .sw1_next { width: 30px; height: 30px; font-size: 18px; }
  .STACK_IN_SW_1 .sw1_has_deco::after { width: 60px; height: 62px; }
  .STACK_IN_SW_1 .sw1_deco_arrow { width: 36px; height: 36px; font-size: 16px; }
}