@charset "utf-8";

/* auto_scrolling2 - 좌측 Sticky 타이틀 + 우측 2열 스태거 카드 */

.auto_scrolling2_v1{
  position: relative;
  width: 100%;
  float: left;
}

/* admin_div 오버라이드 */
.auto_scrolling2_v1.admin_div,
.auto_scrolling2_v1.admin_div:hover {
  overflow: visible !important;
  position: relative !important;
  border: none !important;
  outline: none !important;
}

/* === 래퍼 === */
.auto_scrolling2_v1 .asc2_wrap {
  position: relative;
  width: 100%;
  float: left;
}

/* === 내부 flex === */
.auto_scrolling2_v1 .asc2_inner {
  display: flex;
  align-items: flex-start;
  gap: var(--asc2-side-gap, clamp(30px, calc(3.91vw + 17.5px), 80px));
  width: 100%;
}

/* === 좌측 타이틀 영역 - Sticky === */
.auto_scrolling2_v1 .asc2_title_area {
  flex: 0 0 var(--asc2-title-width, clamp(240px, calc(15.63vw + 190px), 440px));
  position: sticky;
  /* 헤더 높이만큼 띄워서 페이지 진입 직후부터 타이틀이 상단에 보이도록 */
  top: var(--asc2-sticky-top, calc(var(--header-h, 100px) + 20px));
  align-self: flex-start;
}

/* 타이틀 (위젯제목2) */
.auto_scrolling2_v1 .asc2_title {
  width: 100%;
  float: left;
}

/* 서브 타이틀 (위젯제목3) */
.auto_scrolling2_v1 .asc2_sub {
  width: 100%;
  float: left;
}

/* 설명 (위젯제목4) */
.auto_scrolling2_v1 .asc2_desc {
  width: 100%;
  float: left;
}

/* 타이틀 하위 요소 간격 */
.auto_scrolling2_v1 .asc2_title_area .COM_tit + .COM_tit {
  margin-top: 8px;
}

/* 버튼 영역 (위젯제목5) */
.auto_scrolling2_v1 .asc2_btn_area {
  width: 100%;
  float: left;
  margin-top: clamp(20px, calc(1.56vw + 15px), 40px);
}

/* MORE 버튼 시스템 오버라이드 */
.auto_scrolling2_v1 .asc2_title_area .hymore_wrap {
  position: static;
  margin-top: clamp(20px, calc(1.56vw + 15px), 40px);
}

.auto_scrolling2_v1 .asc2_title_area .hymore_wrap .hymore {
  display: inline-flex;
}

/* === 우측 카드 영역 - 2열 그리드 === */
.auto_scrolling2_v1 .asc2_card_area {
  flex: 1 1 0%;
  display: grid;
  grid-template-columns: repeat(var(--asc2-cols-pc, 2), 1fr);
  gap: var(--asc2-gap, clamp(20px, calc(1.56vw + 15px), 40px));
}

/* 짝수 카드 아래로 오프셋 (엇갈린 배치) */
.auto_scrolling2_v1 .asc2_card:nth-child(2n) {
  transform: translateY(var(--asc2-stagger, clamp(50px, calc(3.91vw + 37.5px), 100px)));
}

/* === 개별 카드 === */
.auto_scrolling2_v1 .asc2_card {
  background: var(--asc2-card-bg, #fff);
  border: var(--asc2-card-border, 1px solid #e5e5e5);
  /* 테두리 색 — 컬러피커 입력 시 색만 덮어씀 (미입력 시 위 border 색 유지) */
  border-color: var(--asc2-card-border-color);
  border-radius: var(--asc2-card-radius, clamp(12px, calc(0.63vw + 10px), 20px));
  padding: var(--asc2-card-padding, clamp(16px, calc(1.88vw + 10px), 40px));
  transition: all 0.3s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}

.auto_scrolling2_v1 .asc2_card:hover {
  border-color: var(--asc2-card-hover-border, #ccc);
  box-shadow: var(--asc2-card-hover-shadow, 0 4px 20px rgba(0,0,0,0.08));
  background: var(--asc2-card-hover-bg, var(--asc2-card-bg, #fff));
}

/* === 카드 이미지 === */
.auto_scrolling2_v1 .asc2_card_img {
  width: 100%;
  float: left;
  height: var(--asc2-img-height, clamp(150px, calc(8.59vw + 122.5px), 260px));
  border-radius: var(--asc2-img-radius, clamp(8px, calc(0.47vw + 6.5px), 14px));
  overflow: hidden;
  position: relative;
}
/* 비율(aspect-ratio) 입력 시 → 높이 무시하고 비율 우선 (PC) */
.auto_scrolling2_v1 .asc2_wrap[style*="--asc2-img-ratio-pc"] .asc2_card_img {
  aspect-ratio: var(--asc2-img-ratio-pc);
  height: auto;
}

/* 이미지 우측 하단 "포트폴리오 보기" 버튼 (항목3 텍스트) */
.auto_scrolling2_v1 .asc2_more_btn {
  position: absolute;
  right: clamp(10px, calc(0.78vw + 7.5px), 20px);
  bottom: clamp(10px, calc(0.78vw + 7.5px), 20px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(8px, calc(0.31vw + 7px), 12px) clamp(12px, calc(0.63vw + 10px), 20px);
  background-color: var(--primary, #f0473e);
  color: #fff;
  border-radius: 10px;
  font-size: clamp(12px, calc(0.16vw + 11.5px), 14px);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.auto_scrolling2_v1 .asc2_more_btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.auto_scrolling2_v1 .asc2_more_btn,
.auto_scrolling2_v1 .asc2_more_btn * {
  color: #fff;
}
.auto_scrolling2_v1 .asc2_more_btn .asc2_more_btn_txt {
  display: inline-block;
}
.auto_scrolling2_v1 .asc2_more_btn .uil {
  font-size: 1.05em;
  line-height: 1;
}

.auto_scrolling2_v1 .asc2_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  will-change: transform;
}

.auto_scrolling2_v1 .asc2_card_img video,
.auto_scrolling2_v1 .asc2_card_img iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* 카드 hover 시 이미지 1.1배 확대 (마스크는 overflow:hidden으로 잘림) */
.auto_scrolling2_v1 a.asc2_card:hover .asc2_card_img img,
.auto_scrolling2_v1 a.asc2_card:hover .asc2_card_img video,
.auto_scrolling2_v1 a.asc2_card:hover .asc2_card_img iframe,
.auto_scrolling2_v1 .asc2_card .asc2_card_img:hover img,
.auto_scrolling2_v1 .asc2_card .asc2_card_img:hover video,
.auto_scrolling2_v1 .asc2_card .asc2_card_img:hover iframe {
  transform: scale(1.1);
}

/* === 카드 텍스트 === */
.auto_scrolling2_v1 .asc2_card_txt {
  width: 100%;
  float: left;
  margin-top: clamp(16px, calc(1.88vw + 10px), 40px);
}

/* 카드 제목 (txt1) */
.auto_scrolling2_v1 .asc2_txt1 {
  width: 100%;
  float: left;
}

/* 카드 설명 (txt2) — 마진은 인라인(에디터)에서 제어 */
.auto_scrolling2_v1 .asc2_txt2 {
  width: 100%;
  float: left;
}

/* 추가 텍스트 (txt4/5/6) — 마진 없음, 인라인에서 제어 */
.auto_scrolling2_v1 .asc2_txt4,
.auto_scrolling2_v1 .asc2_txt5,
.auto_scrolling2_v1 .asc2_txt6 {
  width: 100%;
  float: left;
}

/* ========== 반응형 - 태블릿 ========== */
@media screen and (max-width: 992px) {
  .auto_scrolling2_v1 .asc2_inner {
    flex-direction: column;
    gap: clamp(20px, calc(2.63vw + 11.6px), 40px);
  }

  .auto_scrolling2_v1 .asc2_title_area {
    flex: none;
    width: 100%;
    position: static;
  }

  .auto_scrolling2_v1 .asc2_card_area {
    flex: none;
    width: 100%;
    grid-template-columns: repeat(var(--asc2-cols-tablet, 2), 1fr);
    gap: var(--asc2-gap, clamp(16px, calc(1.58vw + 10.7px), 28px));
  }

  .auto_scrolling2_v1 .asc2_card:nth-child(2n) {
    transform: translateY(var(--asc2-stagger, clamp(20px, calc(2.63vw + 11.6px), 40px)));
  }

  .auto_scrolling2_v1 .asc2_card {
    padding: var(--asc2-card-padding, clamp(12px, calc(1.05vw + 8.6px), 20px));
  }

  .auto_scrolling2_v1 .asc2_card_img {
    height: var(--asc2-img-height-tablet, clamp(120px, calc(11.84vw + 82.1px), 200px));
  }
  /* 태블릿 비율 우선 */
  .auto_scrolling2_v1 .asc2_wrap[style*="--asc2-img-ratio-tablet"] .asc2_card_img {
    aspect-ratio: var(--asc2-img-ratio-tablet);
    height: auto;
  }

  .auto_scrolling2_v1 .asc2_card_txt {
    margin-top: clamp(12px, calc(1.05vw + 8.6px), 20px);
  }

  .auto_scrolling2_v1 .asc2_txt2 {
    margin-top: clamp(4px, calc(0.53vw + 2.3px), 8px);
  }

  .auto_scrolling2_v1 .asc2_btn_area,
  .auto_scrolling2_v1 .asc2_title_area .hymore_wrap {
    margin-top: clamp(16px, calc(1.05vw + 12.6px), 24px);
  }
}

/* ========== 반응형 - 모바일 ========== */
@media screen and (max-width: 640px) {
  .auto_scrolling2_v1 .asc2_card_area {
    grid-template-columns: repeat(var(--asc2-cols-mobile, 1), 1fr);
  }

  .auto_scrolling2_v1 .asc2_card:nth-child(2n) {
    transform: none;
  }
  /* 모바일 비율 우선 */
  .auto_scrolling2_v1 .asc2_wrap[style*="--asc2-img-ratio-mobile"] .asc2_card_img {
    aspect-ratio: var(--asc2-img-ratio-mobile);
    height: auto;
  }
}

/* ============================================================
   ★ 아이콘 모드 — 이미지 박스를 배경 없는 absolute 아이콘으로 (.asc2-icon-mode)
   - 카드는 relative, 아이콘은 카드 내 자유 위치
   - 아이콘 크기/위치 PC·모바일 각각 (CSS 변수)
   ============================================================ */
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card {
  position: relative;
}
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img {
  position: absolute;
  z-index: 2;
  width: var(--asc2-icon-size-pc, 64px);
  height: var(--asc2-icon-size-pc, 64px);
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  /* 위치 — 미입력 면 우상단 기본 */
  top:    var(--asc2-icon-top-pc, 20px);
  right:  var(--asc2-icon-right-pc, 20px);
  bottom: var(--asc2-icon-bottom-pc, auto);
  left:   var(--asc2-icon-left-pc, auto);
  float: none;
}
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img img,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img svg,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img lottie-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 아이콘 모드: 우측하단 "포트폴리오 보기" 버튼은 숨김 (이미지 위 배치라 의미 없음) */
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_more_btn { display: none; }
/* 아이콘 모드: 텍스트 영역 상단 마진 제거 (이미지가 absolute라 자리 안 차지) */
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_txt { margin-top: 0; }
/* ★ 아이콘 모드: hover 확대 애니메이션 끔 (아이콘은 고정) */
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode a.asc2_card:hover .asc2_card_img img,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode a.asc2_card:hover .asc2_card_img video,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode a.asc2_card:hover .asc2_card_img iframe,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card .asc2_card_img:hover img,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card .asc2_card_img:hover video,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card .asc2_card_img:hover iframe,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img img,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img svg,
.auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img lottie-player {
  transform: none !important;
  transition: none !important;
}

@media screen and (max-width: 640px) {
  .auto_scrolling2_v1 .asc2_wrap.asc2-icon-mode .asc2_card_img {
    width: var(--asc2-icon-size-mobile, var(--asc2-icon-size-pc, 48px));
    height: var(--asc2-icon-size-mobile, var(--asc2-icon-size-pc, 48px));
    top:    var(--asc2-icon-top-mo, var(--asc2-icon-top-pc, 16px));
    right:  var(--asc2-icon-right-mo, var(--asc2-icon-right-pc, 16px));
    bottom: var(--asc2-icon-bottom-mo, var(--asc2-icon-bottom-pc, auto));
    left:   var(--asc2-icon-left-mo, var(--asc2-icon-left-pc, auto));
  }
}

/* ============================================================
   ★ 키워드 영역 (위젯제목5) — 위아래 연한 라인 + #해시태그 span 간격
   ============================================================ */
.auto_scrolling2_v1 .asc2_keywords_box {
  width: 100%;
  float: left;
  margin-top: clamp(20px, calc(1.56vw + 15px), 36px);
  padding: clamp(16px, calc(1.17vw + 12px), 28px) 0;
  border-top: 1px solid var(--asc2-keyword-line, #e5e5e5);
  border-bottom: 1px solid var(--asc2-keyword-line, #e5e5e5);
}
/* 키워드(#해시태그) 컨테이너 */
.auto_scrolling2_v1 .asc2_keywords_box .asc2_keywords,
.auto_scrolling2_v1 .asc2_keywords_box > div {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, calc(0.78vw + 5px), 18px) clamp(12px, calc(1.17vw + 8px), 26px);
  line-height: 1.6;
}
/* 각 # 단어 span — 단어 단위 간격 */
.auto_scrolling2_v1 .asc2_keywords_box .asc2_keywords span,
.auto_scrolling2_v1 .asc2_keywords_box > div > span {
  display: inline-block;
  white-space: nowrap;
}

/* ★ 더보기 버튼 영역 (메인블럭 더보기 위치/오프셋 적용) */
.auto_scrolling2_v1 .asc2_btn_area {
  width: 100%;
  float: left;
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(20px, calc(1.56vw + 15px), 40px);
  position: relative;
}
/* 더보기 위치 프리셋 (메인블럭 더보기의 data-more-pos) */
.auto_scrolling2_v1 .asc2_btn_area[data-more-pos="center"] { justify-content: center; }
.auto_scrolling2_v1 .asc2_btn_area[data-more-pos="right"]  { justify-content: flex-end; }
.auto_scrolling2_v1 .asc2_btn_area[data-more-pos="left"]   { justify-content: flex-start; }
/* 오프셋(--mt/mr/mb/ml)이 있으면 position relative 로 미세 이동 */
.auto_scrolling2_v1 .asc2_btn_area[style*="--mt"],
.auto_scrolling2_v1 .asc2_btn_area[style*="--mr"],
.auto_scrolling2_v1 .asc2_btn_area[style*="--mb"],
.auto_scrolling2_v1 .asc2_btn_area[style*="--ml"] {
  top: var(--mt, 0);
  right: var(--mr, auto);
  bottom: var(--mb, auto);
  left: var(--ml, 0);
}
@media screen and (max-width: 640px) {
  .auto_scrolling2_v1 .asc2_btn_area[data-more-pos-mo="center"] { justify-content: center; }
  .auto_scrolling2_v1 .asc2_btn_area[data-more-pos-mo="right"]  { justify-content: flex-end; }
  .auto_scrolling2_v1 .asc2_btn_area[data-more-pos-mo="left"]   { justify-content: flex-start; }
  .auto_scrolling2_v1 .asc2_btn_area[style*="--mt-mo"],
  .auto_scrolling2_v1 .asc2_btn_area[style*="--mr-mo"],
  .auto_scrolling2_v1 .asc2_btn_area[style*="--mb-mo"],
  .auto_scrolling2_v1 .asc2_btn_area[style*="--ml-mo"] {
    top: var(--mt-mo, var(--mt, 0));
    right: var(--mr-mo, var(--mr, auto));
    bottom: var(--mb-mo, var(--mb, auto));
    left: var(--ml-mo, var(--ml, 0));
  }
}
.auto_scrolling2_v1 .asc2_more_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(12px, calc(0.47vw + 10px), 18px) clamp(22px, calc(1.09vw + 18px), 38px);
  background: var(--asc2-more-bg, var(--primary, #a0765a));
  color: #fff;
  font-size: clamp(14px, calc(0.31vw + 13px), 16px);
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.auto_scrolling2_v1 .asc2_more_link:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}