/* ========================================================================
   Visual_v1 - 비주얼 섹션 v1
   - 배경 풀블리드 이미지 + 좌측 텍스트박스 + 우하단 이미지
   - 상단 absolute 포인트 박스 데코 (반반 라운드 + 중앙 원)
   ======================================================================== */

/* 모든 선택자에 .Visual_v1 프리픽스 사용 (충돌 방지) */

.Visual_v1 {
  display: block;
  width: 100%;
  clear: both;
  position: relative;
}

/* 외곽 wrap: contents-container 는 사이트 표준(날개에서 고른 컨테이너 사이즈)
   폭을 그대로 유지한다. 폭을 건드리지 않으므로 콘텐츠 좌측 라인이 헤더/다른
   섹션과 자동 일치. 배경만 .wg_side 에서 100vw 풀블리드로 빼낸다.
   ★ 직계 자식 셀렉터 (>) 로 한정 — 다른 섹션 contents-container 에 영향 절대 금지 */
.Visual_v1 > .contents-container {
  display: block;
  position: relative;
  width: 100%;
}

.Visual_v1 .wg_side {
  display: block;
  position: relative;
  width: 100%;
  height: var(--vv1-h-pc, 700px);
  min-height: 360px;
  background: var(--vv1-section-bg, #000);
  isolation: isolate;
}

/* ==================== 배경 이미지 ==================== */
/* 배경은 컨테이너 폭을 무시하고 화면 전체 폭(100vw)으로 풀블리드.
   .wg_side 는 컨테이너 폭만큼만 차지하므로, 배경 레이어를 좌우로 펼쳐 화면 끝까지 채운다. */
/* ★ transform 금지: background-attachment:fixed 는 조상에 transform/filter 가 있으면
   viewport 가 아니라 그 박스 기준으로 잡혀 스크롤 고정이 깨진다.
   translateX(-50%) 대신 margin-left:calc(50% - 50vw) 로 풀블리드 → transform 미사용. */
.Visual_v1 .vv1_bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.Visual_v1 .vv1_bg.is-fixed {
  background-attachment: fixed;
}
.Visual_v1 .vv1_bg_color {
  position: absolute;
  inset: 0;
  background: var(--vv1-section-bg, #000);
  z-index: 1;
}
.Visual_v1 .vv1_bg_img {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--vv1-bg-opacity, 1);
  filter: blur(var(--vv1-bg-blur, 0));
  pointer-events: auto;
}
.Visual_v1 .vv1_bg_img img,
.Visual_v1 .vv1_bg_img video,
.Visual_v1 .vv1_bg_img canvas,
.Visual_v1 .vv1_bg_img svg,
.Visual_v1 .vv1_bg_img iframe,
.Visual_v1 .vv1_bg_img lottie-player {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 스크롤 고정 모드:
   background-attachment:fixed 사용 → 섹션 영역 밖으로 절대 안 나감
   (CSS background 라서 부모 overflow:hidden 자동 적용, z-index/푸터 영향 없음)
   ※ PHP 쪽에서 fixed 모드일 때만 <img> 대신 inline style background-image 출력 */
.Visual_v1 .wg_side[data-bg-fixed="1"] .vv1_bg_img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* fixed 모드일 때는 <img>가 출력되지 않지만, 혹시 들어가도 숨김 */
.Visual_v1 .wg_side[data-bg-fixed="1"] .vv1_bg_img > img {
  display: none;
}

/* ==================== INNER (텍스트 + 우측이미지) ==================== */
/* ★ inner 폭은 부모 .contents-container 가 결정한다.
   .contents-container 의 폭 = 날개(wing_right)에서 고른 컨테이너 사이즈
   (container-lg/md/sm/full). 여기서는 그 폭을 100% 그대로 채울 뿐,
   고정값을 두지 않는다 → 헤더/다른 섹션과 좌측 라인 자동 일치. */
.Visual_v1 .vv1_inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  align-content: stretch;
  padding: clamp(40px, calc(2.34vw + 32.5px), 80px) 0;
  box-sizing: border-box;
}

/* ==================== 좌측 텍스트 박스 ==================== */
.Visual_v1 .vv1_txt_box {
  position: relative;
  z-index: 6;
  align-self: center;
  max-width: 55%;
  width: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, calc(0.94vw + 11px), 26px);
  /* 세로 중앙(align-self:center) 기준 위/아래 미세이동 — 양수=위로 */
  transform: translateY(calc(-1 * var(--vv1-txtbox-oy-pc, 0px)));
}

/* 텍스트1 (타이틀) - 끝에 노란 dot */
.Visual_v1 .vv1_txt1 {
  position: relative;
  color: var(--vv1-txt1-color, #fff);
  font-size: clamp(28px, calc(1.95vw + 21.75px), 54px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  word-break: keep-all;
  /* 텍스트 글로우 — 배경과 묻힐 때 텍스트 주변만 살짝 어둡게. 둘 다 0이면 효과 없음 */
  text-shadow: 0 0 var(--vv1-txt-glow-blur, 0px) rgba(0,0,0, var(--vv1-txt-glow-alpha, 0));
}
.Visual_v1 .vv1_txt1_inner {
  position: relative;
  display: inline;
}
/* 사용자가 타이틀에 <div class="COM_tit ..."> 같은 블록 요소를 인라인 텍스트로
   넣으면 dot 이 다음 줄로 밀린다. inner 안의 직계 블록(div/p)을 inline 으로 강제 →
   dot 이 텍스트 끝(마지막 글자 우측)에 자연스럽게 붙음.
   (글꼴 크기/색은 COM_tit 클래스가 그대로 살아있음) */
.Visual_v1 .vv1_txt1_inner > div,
.Visual_v1 .vv1_txt1_inner > p {
  display: inline;
}
.Visual_v1 .vv1_txt1_dot {
  display: inline-block;
  width:  var(--vv1-txt1-dot-size, clamp(10px, calc(0.47vw + 8.5px), 16px));
  height: var(--vv1-txt1-dot-size, clamp(10px, calc(0.47vw + 8.5px), 16px));
  border-radius: 50%;
  background: var(--vv1-txt1-dot, #f5a623);
  vertical-align: baseline;
  margin-left: 6px;
  margin-bottom: 4px;
  /* 기존 -2px(살짝 위) → +8px : 10px 아래로 내림 */
  transform: translateY(8px);
}

/* 텍스트2 (설명) */
.Visual_v1 .vv1_txt2 {
  color: var(--vv1-txt2-color, #fff);
  font-size: clamp(13px, calc(0.31vw + 12px), 17px);
  line-height: 1.65;
  word-break: keep-all;
  opacity: 0.9;
  /* 글로우 (타이틀과 동일 변수 공유) */
  text-shadow: 0 0 var(--vv1-txt-glow-blur, 0px) rgba(0,0,0, var(--vv1-txt-glow-alpha, 0));
}

/* 텍스트3 (버튼) */
.Visual_v1 .vv1_btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  /* 패딩/라운드/폰트크기 — 옵션 비우면 기본 clamp 값 fallback */
  padding:
    var(--vv1-btn-pad-v, clamp(12px, calc(0.31vw + 11px), 16px))
    var(--vv1-btn-pad-h, clamp(20px, calc(0.78vw + 17.5px), 28px));
  background: var(--vv1-btn-bg, #111);
  color: var(--vv1-btn-color, #fff);
  border-radius: var(--vv1-btn-radius, 999px);
  font-size: var(--vv1-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%;
  margin-top: 4px;
  transition: transform .25s ease, background .25s ease;
}
.Visual_v1 .vv1_btn:hover {
  transform: translateY(-2px);
}
.Visual_v1 .vv1_btn_txt {
  display: inline-block;
  color: inherit;
}
/* 화살표 컬러: Visual_v2 와 동일 정책 — 비우면 사이트 메인컬러(--primary) */
.Visual_v1 .vv1_btn_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--vv1-btn-arrow, var(--primary, #f5a623));
  flex-shrink: 0;
}
.Visual_v1 .vv1_btn_arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==================== 우하단 이미지 (inner 55% ~ 끝) ====================
   너비 조절: --vv1-side-img-w-pc 변수가 있으면 그 px 폭(우측정렬), 없으면 left:55%~끝.
   클래스 토글에 의존하지 않도록 CSS 변수 fallback 만으로 처리.
   - left  : 변수 있으면 auto, 없으면 55%  → 변수가 없을 때만 left 발동
   - width : 변수 있으면 그 값, 없으면 auto(=left/right 로 폭 결정) */
/* ★ 핵심: 박스(vv1_side_img)에 너비를 주고, 이미지는 박스를 100% 채운다.
   - 너비 지정 시: 박스 width=지정px, left:auto(우측정렬), 높이/세로 제약 해제
   - 미지정 시: 박스 left:55%~right:0 (기존), 이미지 max-height 70vh
   임시 wid_css 로 검증된 동작과 동일하되 변수 기반으로 옵션 연동 */
.Visual_v1 .vv1_side_img {
  position: absolute;
  right: 0;
  /* 너비 지정 시 PHP가 --vv1-side-left:auto 출력 → 우측정렬 고정폭 */
  left: var(--vv1-side-left, 55%);
  width: var(--vv1-side-img-w-pc, auto);
  bottom: calc(var(--vv1-deco-h, 120px) - var(--vv1-side-img-down, 2px));
  top: auto;
  height: auto;
  z-index: 4;
  pointer-events: none;
}
.Visual_v1 .vv1_side_img > div {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
}
.Visual_v1 .vv1_side_img img,
.Visual_v1 .vv1_side_img video,
.Visual_v1 .vv1_side_img svg,
.Visual_v1 .vv1_side_img lottie-player {
  width: 100%;
  height: auto;
  /* 너비 px 지정 시 PHP가 --vv1-side-maxh:none 출력 → 세로 제약 해제(박스 폭대로) */
  max-width: 100%;
  max-height: var(--vv1-side-maxh, 70vh);
  display: block;
  margin-left: auto;
  object-fit: contain;
  object-position: right bottom;
}

/* ==================== 하단 포인트 박스 데코 (절대) ==================== */
/* 섹션 가로 50% 기준 반반 + 그 사이 중앙 원
   - 좌측 박스: 우측상단 라운드 (위쪽으로 깎인 V자 형태)
   - 우측 박스: 좌측상단 라운드
   - 섹션 맨 아래에 absolute 로 부착 (bottom:0)
*/
.Visual_v1 .vv1_bot_deco {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: var(--vv1-deco-h, 120px);
  z-index: 10;
  pointer-events: none;
}
.Visual_v1 .vv1_bot_deco_left,
.Visual_v1 .vv1_bot_deco_right {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: calc(50% - (var(--vv1-deco-gap, 0px) / 2));
}
.Visual_v1 .vv1_bot_deco_left {
  left: 0;
  background: var(--vv1-deco-left-bg, #fff);
  border-top-right-radius: var(--vv1-deco-r, 120px);
}
.Visual_v1 .vv1_bot_deco_right {
  right: 0;
  background: var(--vv1-deco-right-bg, #fff);
  border-top-left-radius: var(--vv1-deco-r, 120px);
}
.Visual_v1 .vv1_bot_deco_dot {
  position: absolute;
  /* bottom 기준: 박스 경계선이 0
     기본값(--vv1-deco-dot-y=0)이면 박스 경계선 위로 데코높이의 절반만큼 올라가서
     V자 파임 안에 완전한 원으로 표시됨.
     음수 입력시 더 위로, 양수 입력시 아래로 이동 */
  bottom: calc((var(--vv1-deco-h, 120px) / 2) - (var(--vv1-deco-dot, 20px) / 2) - var(--vv1-deco-dot-y, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: var(--vv1-deco-dot, 20px);
  height: var(--vv1-deco-dot, 20px);
  border-radius: 50%;
  background: var(--vv1-deco-dot-bg, #f5a623);
  z-index: 2;
}

/* ==================== 상단 포인트 박스 데코 (절대) ==================== */
/* 하단 데코의 상하 대칭 버전 — 섹션 맨 위(top:0)에 부착,
   박스 하단 모서리가 라운드(V자 파임이 아래쪽) */
.Visual_v1 .vv1_top_deco {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: var(--vv1-deco-top-h, 120px);
  z-index: 10;
  pointer-events: none;
}
.Visual_v1 .vv1_top_deco_left,
.Visual_v1 .vv1_top_deco_right {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(50% - (var(--vv1-deco-top-gap, 0px) / 2));
}
.Visual_v1 .vv1_top_deco_left {
  left: 0;
  background: var(--vv1-deco-top-left-bg, #fff);
  border-bottom-right-radius: var(--vv1-deco-top-r, 120px);
}
.Visual_v1 .vv1_top_deco_right {
  right: 0;
  background: var(--vv1-deco-top-right-bg, #fff);
  border-bottom-left-radius: var(--vv1-deco-top-r, 120px);
}
.Visual_v1 .vv1_top_deco_dot {
  position: absolute;
  /* top 기준: 박스 경계선이 0
     기본값(--vv1-deco-top-dot-y=0)이면 박스 경계선 아래로 데코높이의 절반만큼 내려가서
     V자 파임 안에 완전한 원으로 표시됨.
     음수 입력시 더 위로, 양수 입력시 아래로 이동 */
  top: calc((var(--vv1-deco-top-h, 120px) / 2) - (var(--vv1-deco-top-dot, 20px) / 2) + var(--vv1-deco-top-dot-y, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: var(--vv1-deco-top-dot, 20px);
  height: var(--vv1-deco-top-dot, 20px);
  border-radius: 50%;
  background: var(--vv1-deco-top-dot-bg, #f5a623);
  z-index: 2;
}

/* ==================== 상단 SVG 인라인 데코 (Visual_v2 패턴) ====================
   - 색: PHP 로더가 각 도형 fill 에 직접 박음 (CSS color 의존 X → 검정 떨어짐 방지)
     · top_deco_color 비움 = SVG 원본 색 유지 / 색 지정 시 = 그 색으로 통일
   - 위치: inner(컨테이너) 좌측/우측/중앙 가장자리에 정렬 → 타이틀과 같은 라인 */
.Visual_v1 .vv1_topsvg_deco {
  position: absolute;
  z-index: 11;
  width: var(--vv1-topsvg-w, clamp(120px, 16vw, 240px));
  height: auto;
  pointer-events: none;
  transform: translate(var(--vv1-topsvg-ox, 0px), var(--vv1-topsvg-oy, 0px));
}
.Visual_v1 .vv1_topsvg_deco svg {
  display: block;
  width: 100%;
  height: auto;
}
/* 부모 .wg_side 가 컨테이너 폭(=inner)이므로 좌/우 0 이 곧 inner 가장자리 */
.Visual_v1 .vv1_topsvg_pos_top-left  { top: 0; left: 0; }
.Visual_v1 .vv1_topsvg_pos_top-right { top: 0; right: 0; }
.Visual_v1 .vv1_topsvg_pos_top-center {
  top: 0; left: 50%;
  transform: translate(calc(-50% + var(--vv1-topsvg-ox, 0px)), var(--vv1-topsvg-oy, 0px));
}

/* ==================== 인라인 편집 힌트 (편집 권한자) ==================== */
.Visual_v1 .vv1_bg_img.wg_edit_img {
  outline: 2px dashed transparent;
  outline-offset: -2px;
  transition: outline-color .2s;
}
.Visual_v1 .vv1_bg_img.wg_edit_img:hover {
  outline-color: rgba(245, 166, 35, .8);
}

/* ==================== 반응형 ==================== */
@media screen and (max-width: 1280px) {
  .Visual_v1 .vv1_txt_box { max-width: 60%; }
}

@media screen and (max-width: 1024px) {
  .Visual_v1 .vv1_txt_box { max-width: 65%; }
  .Visual_v1 .vv1_side_img { left: 60%; max-height: 60%; }
  /* fixed 모드 모바일/태블릿에서는 일반 흐름 권장 (iOS Safari background-attachment:fixed 미지원) */
  .Visual_v1 .wg_side[data-bg-fixed="1"] .vv1_bg_img {
    background-attachment: scroll;
  }
}

@media screen and (max-width: 768px) {
  .Visual_v1 .wg_side {
    height: var(--vv1-h-mo, 560px);
  }
  .Visual_v1 .vv1_inner {
    padding: clamp(30px, calc(2.34vw + 22.5px), 50px) clamp(16px, calc(1.56vw + 11px), 30px);
  }
  .Visual_v1 .vv1_txt_box {
    max-width: 100%;
    transform: translateY(calc(-1 * var(--vv1-txtbox-oy-mo, 0px)));
  }
  /* 모바일 SVG 로고 너비 — 옵션 비우면 PHP가 PC값을 넣어줌 */
  .Visual_v1 .vv1_svg_logo {
    width: var(--vv1-svg-w-mo, var(--vv1-svg-w, clamp(180px, 22vw, 360px)));
  }
  /* 모바일: 박스 너비 = 모바일값 > PC값 > 기본 left45%~끝 */
  .Visual_v1 .vv1_side_img {
    left: var(--vv1-side-left, 45%);
    width: var(--vv1-side-img-w-mo, var(--vv1-side-img-w-pc, auto));
    max-width: 90vw;
  }
  .Visual_v1 .vv1_side_img img,
  .Visual_v1 .vv1_side_img video,
  .Visual_v1 .vv1_side_img svg,
  .Visual_v1 .vv1_side_img lottie-player {
    width: 100%;
    max-width: 100%;
    max-height: var(--vv1-side-maxh, 45vh);
  }
}

@media screen and (max-width: 640px) {
  .Visual_v1 .vv1_txt1 { font-size: clamp(22px, calc(2.5vw + 14px), 32px); }
  .Visual_v1 .vv1_txt2 { font-size: 13px; }
  .Visual_v1 .vv1_side_img {
    left: var(--vv1-side-left, 40%);
    opacity: 0.85;
    /* 데코가 0.7배로 줄어든 만큼 이미지도 내려서 데코에 딱 붙임 */
    bottom: calc(var(--vv1-deco-h, 120px) * 0.7);
  }
  .Visual_v1 .vv1_side_img img,
  .Visual_v1 .vv1_side_img video,
  .Visual_v1 .vv1_side_img svg,
  .Visual_v1 .vv1_side_img lottie-player {
    max-height: var(--vv1-side-maxh, 38vh);
  }
  .Visual_v1 .vv1_bot_deco {
    height: calc(var(--vv1-deco-h, 120px) * 0.7);
  }
  .Visual_v1 .vv1_bot_deco_left {
    border-top-right-radius: calc(var(--vv1-deco-r, 120px) * 0.7);
  }
  .Visual_v1 .vv1_bot_deco_right {
    border-top-left-radius: calc(var(--vv1-deco-r, 120px) * 0.7);
  }
  .Visual_v1 .vv1_bot_deco_dot {
    width: calc(var(--vv1-deco-dot, 20px) * 0.7);
    height: calc(var(--vv1-deco-dot, 20px) * 0.7);
  }
  .Visual_v1 .vv1_top_deco {
    height: calc(var(--vv1-deco-top-h, 120px) * 0.7);
  }
  .Visual_v1 .vv1_top_deco_left {
    border-bottom-right-radius: calc(var(--vv1-deco-top-r, 120px) * 0.7);
  }
  .Visual_v1 .vv1_top_deco_right {
    border-bottom-left-radius: calc(var(--vv1-deco-top-r, 120px) * 0.7);
  }
  .Visual_v1 .vv1_top_deco_dot {
    width: calc(var(--vv1-deco-top-dot, 20px) * 0.7);
    height: calc(var(--vv1-deco-top-dot, 20px) * 0.7);
  }
}

/* ========================================================================
   스크롤 진입 애니메이션
   - .vv1_anim 가 wg_side 에 붙으면 초기 상태(숨김/줌인)로 셋팅
   - JS가 IntersectionObserver 로 .is-in 클래스 추가하면 트리거됨
   ======================================================================== */

/* (1) 배경 줌 아웃 (1.1 → 1.0) — 부드럽게 서서히 줌 아웃
   ★ .vv1_anim 은 wg_side 자체에 붙어있음 — 셀렉터 주의 */

/* 일반 모드 (data-bg-fixed="0"): transform:scale 으로 <img> 를 줌 */
.Visual_v1 .vv1_anim:not([data-bg-fixed="1"]) .vv1_bg_img {
  transform: scale(var(--vv1-anim-bg-zoom, 1.1));
  transition: transform var(--vv1-anim-bg-dur, 2000ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.Visual_v1 .vv1_anim:not([data-bg-fixed="1"]).is-in .vv1_bg_img {
  transform: scale(1);
}

/* fixed 모드 (data-bg-fixed="1"): background-size 로 줌
   transform 은 background-attachment:fixed 와 충돌하므로 안 씀
   기본 cover 가 100% — 시작 시 110% (1.1배) 로 키워두고, .is-in 시 100% 로 줄임 */
/* ★ fixed 모드는 will-change 금지: will-change:transform/background-size 도
   composite layer 를 만들어 background-attachment:fixed 의 viewport 기준을 깬다. */
.Visual_v1 .vv1_anim[data-bg-fixed="1"] .vv1_bg_img {
  background-size: calc(var(--vv1-anim-bg-zoom, 1.1) * 100%) auto;
  transition: background-size var(--vv1-anim-bg-dur, 2000ms) cubic-bezier(0.16, 1, 0.3, 1);
}
.Visual_v1 .vv1_anim[data-bg-fixed="1"].is-in .vv1_bg_img {
  background-size: cover;
}

/* (2) 텍스트/버튼/이미지 fade-up 시간차 */
.Visual_v1 .vv1_anim .vv1_fadeup_item {
  opacity: 0;
  transform: translateY(var(--vv1-anim-txt-offset, 40px));
  transition:
    opacity var(--vv1-anim-txt-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--vv1-anim-txt-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--vv1-anim-txt-delay, 200ms) + (var(--vv1-i, 0) * var(--vv1-anim-txt-stagger, 180ms)));
  will-change: opacity, transform;
}
.Visual_v1 .vv1_anim.is-in .vv1_fadeup_item {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================================
   SVG 로고 — 마스크 슬라이드업 (아래에서 위로 올라오며 등장)
   ======================================================================== */

.Visual_v1 .vv1_svg_logo {
  position: absolute;
  width: var(--vv1-svg-w, clamp(180px, 22vw, 360px));
  height: auto;
  z-index: 6;
  pointer-events: none;
  /* 마스크 영역: 자식(svg)이 이 박스 밖으로 나가지 못함 */
  overflow: hidden;
  transform: translate(var(--vv1-svg-ox, 0px), var(--vv1-svg-oy, 0px));
}
.Visual_v1 .vv1_svg_logo svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--vv1-svg-color, #fff); /* currentColor 로 fill 받음 */
}
/* SVG 내부 도형들이 fill="currentColor" 를 받도록 (외부 .st0 CSS 제거됐을 때 대비) */
.Visual_v1 .vv1_svg_logo svg path[fill="currentColor"],
.Visual_v1 .vv1_svg_logo svg polygon[fill="currentColor"],
.Visual_v1 .vv1_svg_logo svg rect[fill="currentColor"] {
  fill: currentColor;
}

/* 위치 — 데코 높이만큼 위로 띄움 */
.Visual_v1 .vv1_svg_pos_bottomright {
  right: clamp(20px, 3vw, 60px);
  bottom: calc(var(--vv1-deco-h, 120px) + clamp(20px, 3vw, 60px));
}
.Visual_v1 .vv1_svg_pos_bottomleft {
  left: clamp(20px, 3vw, 60px);
  bottom: calc(var(--vv1-deco-h, 120px) + clamp(20px, 3vw, 60px));
}
.Visual_v1 .vv1_svg_pos_topright {
  right: clamp(20px, 3vw, 60px);
  top: clamp(20px, 3vw, 60px);
}
.Visual_v1 .vv1_svg_pos_topleft {
  left: clamp(20px, 3vw, 60px);
  top: clamp(20px, 3vw, 60px);
}
.Visual_v1 .vv1_svg_pos_center {
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--vv1-svg-ox, 0px)), calc(-50% + var(--vv1-svg-oy, 0px)));
}

/* 마스크 슬라이드업: SVG 자체가 아래에서 위로 올라오게
   - 초기: translateY(100%) → 마스크 영역 아래에 숨음
   - .is-in: translateY(0) → 제자리
   - overflow:hidden 덕분에 SVG가 밑에 숨어있는 동안은 안 보임 */
.Visual_v1 .vv1_anim .vv1_svg_logo svg {
  transform: translateY(100%);
  transition: transform var(--vv1-svg-dur, 1500ms) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--vv1-svg-delay, 600ms);
  will-change: transform;
}
.Visual_v1 .vv1_anim.is-in .vv1_svg_logo svg {
  transform: translateY(0);
}

/* prefers-reduced-motion 사용자는 애니메이션 즉시 완료 상태로 */
@media (prefers-reduced-motion: reduce) {
  .Visual_v1 .vv1_anim .vv1_bg_img,
  .Visual_v1 .vv1_anim .vv1_fadeup_item,
  .Visual_v1 .vv1_anim .vv1_svg_logo svg {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}