@charset "utf-8";

/* auto_scrolling3 - 섹션배경 + 좌측 Sticky 타이틀(버튼) + 우측 투명카드(숫자형) */

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

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

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

/* === 내부 flex === */
.auto_scrolling3_v1 .asc3_inner {
  display: flex;
  align-items: flex-start;
  gap: var(--asc3-side-gap, clamp(30px, calc(3.91vw + 17.5px), 80px));
  width: 100%;
  /* ★ 콘텐츠 하단 여백 (섹션 패딩과 별개. 배경은 꽉 차고 콘텐츠만 위로 여백) */
  padding-bottom: var(--asc3-content-pb, 0px);
  box-sizing: border-box;
}

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

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

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

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

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

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

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

.auto_scrolling3_v1 .asc3_title_area .hymore_wrap .hymore {
  display: inline-flex;
}

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

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

/* === 개별 카드 === ★ asc3: 기본 투명 배경/무테두리/무패딩 (옵션으로 다시 줄 수 있음) */
.auto_scrolling3_v1 .asc3_card {
  background: var(--asc3-card-bg, transparent);
  border: var(--asc3-card-border, 0);
  border-color: var(--asc3-card-border-color);
  border-radius: var(--asc3-card-radius, 0);
  padding: var(--asc3-card-padding, 0);
  transition: all 0.3s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}

.auto_scrolling3_v1 .asc3_card:hover {
  border-color: var(--asc3-card-hover-border);
  box-shadow: var(--asc3-card-hover-shadow);
  background: var(--asc3-card-hover-bg, var(--asc3-card-bg, transparent));
}

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

/* 이미지 우측 하단 "포트폴리오 보기" 버튼 (항목3 텍스트) */
.auto_scrolling3_v1 .asc3_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_scrolling3_v1 .asc3_more_btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.auto_scrolling3_v1 .asc3_more_btn,
.auto_scrolling3_v1 .asc3_more_btn * {
  color: #fff;
}
.auto_scrolling3_v1 .asc3_more_btn .asc3_more_btn_txt {
  display: inline-block;
}
.auto_scrolling3_v1 .asc3_more_btn .uil {
  font-size: 1.05em;
  line-height: 1;
}

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

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

/* 카드 hover 시 이미지 확대 (배율 옵션 --asc3-img-hover-scale, 기본 1.1 / 1=확대안함) */
.auto_scrolling3_v1 a.asc3_card:hover .asc3_card_img img,
.auto_scrolling3_v1 a.asc3_card:hover .asc3_card_img video,
.auto_scrolling3_v1 a.asc3_card:hover .asc3_card_img iframe,
.auto_scrolling3_v1 .asc3_card .asc3_card_img:hover img,
.auto_scrolling3_v1 .asc3_card .asc3_card_img:hover video,
.auto_scrolling3_v1 .asc3_card .asc3_card_img:hover iframe {
  transform: scale(var(--asc3-img-hover-scale, 1.1));
}
/* ★ 오브젝트 레이어(첨부2) 이미지는 hover 확대 제외 — 자체 등장 transform 유지
   (위 hover scale 규칙보다 셀렉터가 구체적이라 덮어씀) */
.auto_scrolling3_v1 a.asc3_card:hover .asc3_card_img .asc3_object_layer img,
.auto_scrolling3_v1 .asc3_card .asc3_card_img:hover .asc3_object_layer img {
  transform: translate(var(--asc3-obj-shift, 120px), var(--asc3-obj-down, 12%));
}
.auto_scrolling3_v1 a.asc3_card:hover .asc3_card_img.is-in .asc3_object_layer img,
.auto_scrolling3_v1 .asc3_card .asc3_card_img.is-in:hover .asc3_object_layer img {
  transform: translate(var(--asc3-obj-end, 8%), var(--asc3-obj-down, 12%));
}

/* === 카드 텍스트 === ★ asc3: 숫자(txt1) absolute + 나머지 텍스트박스 padding-left */
.auto_scrolling3_v1 .asc3_card_txt {
  width: 100%;
  float: left;
  position: relative;          /* 숫자 absolute 기준 */
  margin-top: clamp(16px, calc(1.88vw + 10px), 40px);
}

/* 텍스트1 = 숫자 (absolute left:0 top:0) */
.auto_scrolling3_v1 .asc3_num {
  position: absolute;
  left: var(--asc3-num-left, 0);
  top: var(--asc3-num-top, 0);
  font-size: var(--asc3-num-size, clamp(28px, calc(1.56vw + 23px), 48px));
  color: var(--asc3-num-color, var(--primary, #f0473e));
  line-height: 1;
  font-weight: 700;
  z-index: 1;
}

/* 텍스트2/3.. 을 감싼 박스 — 숫자 폭만큼 왼쪽 패딩 */
.auto_scrolling3_v1 .asc3_txt_inner {
  width: 100%;
  float: left;
  padding-left: var(--asc3-txtbox-pad-left, clamp(40px, calc(2.34vw + 32.5px), 70px));
  box-sizing: border-box;
}

.auto_scrolling3_v1 .asc3_txt2,
.auto_scrolling3_v1 .asc3_txt3,
.auto_scrolling3_v1 .asc3_txt4,
.auto_scrolling3_v1 .asc3_txt5,
.auto_scrolling3_v1 .asc3_txt6 {
  width: 100%;
  float: left;
}

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

  .auto_scrolling3_v1 .asc3_title_area {
    flex: none;
    width: 100%;
    position: static;
  }

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

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

  .auto_scrolling3_v1 .asc3_card {
    padding: var(--asc3-card-padding, 0);
  }

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

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

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

  .auto_scrolling3_v1 .asc3_btn_area,
  .auto_scrolling3_v1 .asc3_title_area .hymore_wrap {
    margin-top: clamp(16px, calc(1.05vw + 12.6px), 24px);
  }
}

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

  .auto_scrolling3_v1 .asc3_card:nth-child(2n) {
    transform: none;
  }
  /* 모바일 비율 우선 */
  .auto_scrolling3_v1 .asc3_wrap[style*="--asc3-img-ratio-mobile"] .asc3_card_img {
    aspect-ratio: var(--asc3-img-ratio-mobile);
    height: auto;
  }
}

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

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

/* ============================================================
   ★ 키워드 영역 (위젯제목5) — 위아래 연한 라인 + #해시태그 span 간격
   ============================================================ */
.auto_scrolling3_v1 .asc3_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(--asc3-keyword-line, #e5e5e5);
  border-bottom: 1px solid var(--asc3-keyword-line, #e5e5e5);
}
/* 키워드(#해시태그) 컨테이너 */
.auto_scrolling3_v1 .asc3_keywords_box .asc3_keywords,
.auto_scrolling3_v1 .asc3_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_scrolling3_v1 .asc3_keywords_box .asc3_keywords span,
.auto_scrolling3_v1 .asc3_keywords_box > div > span {
  display: inline-block;
  white-space: nowrap;
}

/* ★ 더보기 버튼 영역 (메인블럭 더보기 위치/오프셋 적용) */
.auto_scrolling3_v1 .asc3_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_scrolling3_v1 .asc3_btn_area[data-more-pos="center"] { justify-content: center; }
.auto_scrolling3_v1 .asc3_btn_area[data-more-pos="right"]  { justify-content: flex-end; }
.auto_scrolling3_v1 .asc3_btn_area[data-more-pos="left"]   { justify-content: flex-start; }
/* 오프셋(--mt/mr/mb/ml)이 있으면 position relative 로 미세 이동 */
.auto_scrolling3_v1 .asc3_btn_area[style*="--mt"],
.auto_scrolling3_v1 .asc3_btn_area[style*="--mr"],
.auto_scrolling3_v1 .asc3_btn_area[style*="--mb"],
.auto_scrolling3_v1 .asc3_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_scrolling3_v1 .asc3_btn_area[data-more-pos-mo="center"] { justify-content: center; }
  .auto_scrolling3_v1 .asc3_btn_area[data-more-pos-mo="right"]  { justify-content: flex-end; }
  .auto_scrolling3_v1 .asc3_btn_area[data-more-pos-mo="left"]   { justify-content: flex-start; }
  .auto_scrolling3_v1 .asc3_btn_area[style*="--mt-mo"],
  .auto_scrolling3_v1 .asc3_btn_area[style*="--mr-mo"],
  .auto_scrolling3_v1 .asc3_btn_area[style*="--mb-mo"],
  .auto_scrolling3_v1 .asc3_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_scrolling3_v1 .asc3_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(--asc3-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_scrolling3_v1 .asc3_more_link:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* ============================================================
   ★ asc3 좌측 버튼 (Visual_v2 스타일: pill + SVG mask 화살표)
   ============================================================ */
.auto_scrolling3_v1 .asc3_btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: var(--asc3-btn-padding, clamp(12px, calc(0.31vw + 11px), 16px) clamp(20px, calc(0.78vw + 17.5px), 28px));
  background: var(--asc3-btn-bg, #111);
  color: var(--asc3-btn-color, #fff);
  border-radius: var(--asc3-btn-radius, 999px);
  font-size: var(--asc3-btn-size, clamp(13px, calc(0.16vw + 12.5px), 15px));
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  width: max-content;
  max-width: 100%;
  transition: transform .25s ease, background .25s ease;
}
/* hover 상승 효과 제거 — 다른 위젯과 통일 (정적 버튼) */
.auto_scrolling3_v1 .asc3_btn_txt { display: inline-block; color: inherit; }
/* 화살표 — ar_right.svg 를 mask 로 (색 CSS 제어 가능) */
.auto_scrolling3_v1 .asc3_btn_arrow {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  /* 다른 섹션과 통일 — 사이트 메인컬러(--primary) 고정. (옵션값 있으면 그것 우선) */
  background-color: var(--asc3-btn-arrow-color, var(--primary, #f0473e));
  -webkit-mask: url('/_img/svg/line_icon/ar_right.svg') no-repeat center / contain;
          mask: url('/_img/svg/line_icon/ar_right.svg') no-repeat center / contain;
}

/* ============================================================
   ★ 섹션 배경이미지 (섹션 꽉 채움) — wrap ::before
   - asc3-has-bg 일 때만. 콘텐츠는 그 위(z-index)
   ============================================================ */
.auto_scrolling3_v1 .asc3_wrap.asc3-has-bg { position: relative; }
/* ★ 배경: 섹션 패딩까지 덮도록 상/하/좌/우로 bleed(음수 확장).
   섹션 padding 값(예 100px)을 --asc3-bg-bleed-* 에 넣으면 그만큼 바깥으로 늘어남.
   위치는 상단 중심(center top) — 위 이미지가 안 잘리게. */
.auto_scrolling3_v1 .asc3_wrap.asc3-has-bg::before {
  content: "";
  position: absolute;
  top:    calc(-1 * var(--asc3-bg-bleed-top, var(--asc3-bg-bleed, 0px)));
  bottom: calc(-1 * var(--asc3-bg-bleed-bottom, var(--asc3-bg-bleed, 0px)));
  left:   calc(-1 * var(--asc3-bg-bleed-x, 0px));
  right:  calc(-1 * var(--asc3-bg-bleed-x, 0px));
  z-index: 0;
  background-image: var(--asc3-bg-pc);
  background-size: cover;
  background-position: center top;   /* 상단 중심 */
  background-repeat: no-repeat;
  opacity: var(--asc3-bg-opacity, 1);
  pointer-events: none;
}
/* 콘텐츠는 배경 위 */
.auto_scrolling3_v1 .asc3_wrap.asc3-has-bg > .contents-container { position: relative; z-index: 1; }
@media screen and (max-width: 640px) {
  .auto_scrolling3_v1 .asc3_wrap.asc3-has-bg[style*="--asc3-bg-mo"]::before {
    background-image: var(--asc3-bg-mo);
  }
}

/* ============================================================
   ★ asc3 카드 이미지 — 마스크 배경 + 오브젝트
   - 마스크 레이어 = 우측에서 슬라이드인(진입 1회) + 내부 배경은 계속 왼쪽으로 무한 이동
   - 오브젝트 = 우측에서 슬라이드인(진입 1회)
   - 항목 차등: 카드별 --asc3-item-delay (JS 가 인덱스로 부여)
   - 진입 1회: JS 가 .is-in 부여
   ============================================================ */
.auto_scrolling3_v1 .asc3_card_img { position: relative; }

/* 마스크 레이어 (배경 사진 컨테이너) — 진입 전 우측+투명 */
.auto_scrolling3_v1 .asc3_mask_layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transform: translateX(var(--asc3-in-shift, 60px));
  transition: opacity var(--asc3-in-dur, 0.9s) ease,
              transform var(--asc3-in-dur, 0.9s) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--asc3-item-delay, 0s);
  will-change: transform, opacity;
}
/* 마스크 적용 (텍스트4 경로) — 모양 안에서만 배경 보임.
   위치 기본 center bottom: 마스크 모양 바닥을 박스 하단에 붙임 → 오브젝트(하단정렬) 바닥과 일치 */
.auto_scrolling3_v1 .asc3_card_img.asc3_has_mask .asc3_mask_layer {
  -webkit-mask: var(--asc3-mask) no-repeat var(--asc3-mask-pos, center bottom) / var(--asc3-mask-size, contain);
          mask: var(--asc3-mask) no-repeat var(--asc3-mask-pos, center bottom) / var(--asc3-mask-size, contain);
}
/* 진입 후: 마스크 레이어 제자리 등장 */
.auto_scrolling3_v1 .asc3_card_img.is-in .asc3_mask_layer {
  opacity: 1;
  transform: translateX(0);
}
/* 배경 이미지 — 마스크보다 넓게(확대) + 계속 왼쪽으로 무한 왕복 이동 */
.auto_scrolling3_v1 .asc3_mask_layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--asc3-pan-scale, 1.06));
  will-change: transform;
}
/* 진입 후 배경 무한 좌→우 왕복 팬 (끊김 없이) */
.auto_scrolling3_v1 .asc3_card_img.is-in .asc3_mask_layer img {
  animation: asc3_pan_loop var(--asc3-pan-dur, 14s) linear infinite alternate;
  animation-delay: var(--asc3-item-delay, 0s);
}
@keyframes asc3_pan_loop {
  from { transform: scale(var(--asc3-pan-scale, 1.06)) translateX(var(--asc3-pan-from, 2.5%)); }
  to   { transform: scale(var(--asc3-pan-scale, 1.06)) translateX(var(--asc3-pan-to, -2.5%)); }
}

/* 오브젝트 레이어 — 마스크 위, 우측에 살짝 걸침. 더 우측에서 슬라이드인 */
.auto_scrolling3_v1 .asc3_object_layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;                 /* 하단 기준 (비석이 바닥에 서도록) */
  justify-content: var(--asc3-obj-justify, flex-end);  /* 우측 정렬 */
  pointer-events: none;
  overflow: visible;
}
.auto_scrolling3_v1 .asc3_object_layer img {
  max-width: var(--asc3-obj-maxw, 78%);  /* 비석이 마스크 일부만 차지 */
  max-height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  /* 더 우측에서 시작 + 아래로 내림(--asc3-obj-down, 양수=더 아래) */
  transform: translate(var(--asc3-obj-shift, 120px), var(--asc3-obj-down, 12%));
  transition: opacity var(--asc3-obj-dur, 0.9s) ease,
              transform var(--asc3-obj-dur, 0.9s) cubic-bezier(0.22, 1, 0.36, 1);
  /* 오브젝트는 마스크 등장보다 살짝 늦게 (item-delay + obj-delay) */
  transition-delay: calc(var(--asc3-item-delay, 0s) + var(--asc3-obj-delay, 0.35s));
  will-change: transform, opacity;
}
.auto_scrolling3_v1 .asc3_card_img.is-in .asc3_object_layer img {
  opacity: 1;
  /* 최종: 우측에 살짝 걸침(X) + 아래로 내림(Y) 유지 */
  transform: translate(var(--asc3-obj-end, 8%), var(--asc3-obj-down, 12%));
}