/* ========================================================================
   Visual_v2 - 비주얼 섹션 v2
   - 배경 풀블리드 이미지 + 좌측 텍스트박스 + 우측 6아이콘 그리드(흰색)
   - 하단 포인트 박스 데코 (반반 라운드 + 원) — 원 중심은 inner 좌측 정렬
   - 상단 SVG 데코 슬롯 (하단과 반대 개념)
   ======================================================================== */

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

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

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

.Visual_v2 .wg_side {
  display: block;
  position: relative;
  width: 100%;
  height: var(--vv2-h-pc, 700px);
  min-height: 360px;
  background: var(--vv2-section-bg, #000);
  isolation: isolate;
  /* inner = 컨테이너 폭(100%, 날개 설정).
     inner 좌측 패딩 0. */
  --vv2-inner-px: 0px;
  /* 데코는 100vw 풀블리드라서, "화면 좌측 끝 ~ inner(컨테이너) 좌측 경계" 거리만큼
     안쪽으로 들여야 도트/SVG 가 타이틀과 같은 inner 좌측 라인에 맞는다.
     = (100vw - 컨테이너폭) / 2. 컨테이너폭 = 날개에서 고른 --container-lg/md/sm. */
  --vv2-container-w: var(--container-lg, 1600px);
  --vv2-inner-edge: max(0px, calc((100vw - var(--vv2-container-w)) / 2));
}
/* 날개에서 고른 컨테이너 사이즈에 따라 데코 정렬 기준 폭 동기화 */
.Visual_v2 > .contents-container.container-md .wg_side { --vv2-container-w: var(--container-md, 1560px); }
.Visual_v2 > .contents-container.container-sm .wg_side { --vv2-container-w: var(--container-sm, 1440px); }
.Visual_v2 > .contents-container.container-full .wg_side { --vv2-container-w: var(--inner-wide, calc(100% - 100px)); }

/* ==================== 배경 이미지 ==================== */
/* 배경은 컨테이너 폭 무시, 화면 전체(100vw) 풀블리드 */
.Visual_v2 .vv2_bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.Visual_v2 .vv2_bg.is-fixed {
  background-attachment: fixed;
}
.Visual_v2 .vv2_bg_color {
  position: absolute;
  inset: 0;
  background: var(--vv2-section-bg, #000);
  z-index: 1;
}
.Visual_v2 .vv2_bg_img {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--vv2-bg-opacity, 1);
  filter: blur(var(--vv2-bg-blur, 0));
  pointer-events: auto;
}
.Visual_v2 .vv2_bg_img img,
.Visual_v2 .vv2_bg_img video,
.Visual_v2 .vv2_bg_img canvas,
.Visual_v2 .vv2_bg_img svg,
.Visual_v2 .vv2_bg_img iframe,
.Visual_v2 .vv2_bg_img lottie-player {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 스크롤 고정 모드 */
.Visual_v2 .wg_side[data-bg-fixed="1"] .vv2_bg_img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.Visual_v2 .wg_side[data-bg-fixed="1"] .vv2_bg_img > img {
  display: none;
}

/* ==================== INNER (좌 텍스트 + 우 아이콘) ==================== */
/* 제목 박스는 absolute 로 섹션 위에서 content_top 거리에 고정,
   아이콘은 flex 로 우측+세로중앙 → 둘이 완전히 독립 */
/* inner 폭 = 부모 .contents-container 폭(날개 컨테이너 사이즈) 100% 그대로.
   고정값 없음 → 헤더/다른 섹션과 좌측 라인 자동 일치 */
.Visual_v2 .vv2_inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--vv2-inner-px, 0px);
  box-sizing: border-box;
}

/* ==================== 좌측 텍스트 박스 (absolute — content_top 위치) ==================== */
.Visual_v2 .vv2_txt_box {
  position: absolute;
  z-index: 6;
  left: var(--vv2-inner-px, clamp(20px, calc(2.34vw + 12.5px), 60px));
  /* 위에서 content_top 거리. 비우면 섹션높이 30% 지점 */
  top: var(--vv2-content-top-pc, calc(var(--vv2-h-pc, 700px) * var(--vv2-content-top-ratio, 0.3)));
  max-width: 660px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, calc(0.94vw + 11px), 26px);
}

/* 텍스트1 (타이틀) - 끝에 노란 dot / 기본 글씨 크게 */
.Visual_v2 .vv2_txt1 {
  position: relative;
  color: var(--vv2-txt1-color, #fff);
  font-size: clamp(34px, calc(2.5vw + 26px), 64px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  word-break: keep-all;
  /* 텍스트 글로우 — 강도 0 ~ 1 사이. 0이면 그림자 없음, 1이면 강함 */
  text-shadow: 0 0 var(--vv2-txt-glow-blur, 0px) rgba(0,0,0, var(--vv2-txt-glow-alpha, 0));
}
.Visual_v2 .vv2_txt1_inner {
  position: relative;
  display: inline;
}
/* 제목 끝 노란 dot — widget_body 에서 옵션 토글로 HTML 자체를 출력/미출력 분기.
   출력된 경우에만 보이고, 크기는 옵션 변수로 제어 */
.Visual_v2 .vv2_txt1_dot {
  display: inline-block;
  width:  var(--vv2-txt1-dot-size, 10px);
  height: var(--vv2-txt1-dot-size, 10px);
  background: var(--vv2-txt1-dot, #f5a623);
  border-radius: 50%;
  vertical-align: baseline;
  margin-left: 6px;
  margin-bottom: 4px;
  transform: translateY(8px);
}
/* 사용자가 타이틀에 블록 요소(div/p)를 넣어도 dot 이 새 줄로 안 밀리게 */
.Visual_v2 .vv2_txt1_inner > div,
.Visual_v2 .vv2_txt1_inner > p {
  display: inline;
}

/* 텍스트2 (설명) — 기본 글씨 키움 */
.Visual_v2 .vv2_txt2 {
  color: var(--vv2-txt2-color, #fff);
  font-size: clamp(15px, calc(0.39vw + 13.75px), 20px);
  line-height: 1.6;
  word-break: keep-all;
  opacity: 0.95;
  /* 글로우 (타이틀과 동일 변수 공유 — 두 곳에 동일 효과) */
  text-shadow: 0 0 var(--vv2-txt-glow-blur, 0px) rgba(0,0,0, var(--vv2-txt-glow-alpha, 0));
}

/* 더보기 버튼 (텍스트3) */
.Visual_v2 .vv2_btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: var(--vv2-btn-padding, clamp(12px, calc(0.31vw + 11px), 16px) clamp(20px, calc(0.78vw + 17.5px), 28px));
  background: var(--vv2-btn-bg, #111);
  color: var(--vv2-btn-color, #fff);
  border-radius: var(--vv2-btn-radius, 999px);
  font-size: var(--vv2-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_v2 .vv2_btn:hover {
  transform: translateY(-2px);
}
.Visual_v2 .vv2_btn_txt {
  display: inline-block;
  color: inherit;
}
/* 버튼 화살표 — ar_right.svg 를 mask 로 쓰고 메인컬러로 채움
   (img 와 달리 mask 라서 색을 CSS 로 제어 가능 → 메인컬러 적용) */
.Visual_v2 .vv2_btn_arrow {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--vv2-btn-arrow, var(--primary, #f5a623));
  -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;
}

/* ==================== 우측 6아이콘 그리드 ==================== */
.Visual_v2 .vv2_icons {
  position: relative;
  z-index: 6;
  /* inner flex align-items:center 라 세로 중앙. icon_top 으로 중앙 기준 ± 미세조정 */
  margin-top: var(--vv2-icon-top-pc, 0px);
  display: grid;
  grid-template-columns: repeat(var(--vv2-icon-cols, 3), minmax(96px, 1fr));
  column-gap: var(--vv2-icon-col-gap, var(--vv2-icon-gap, clamp(20px, calc(1.6vw + 8px), 48px)));
  row-gap: var(--vv2-icon-row-gap, var(--vv2-icon-gap, clamp(24px, calc(1.6vw + 12px), 50px)));
}
.Visual_v2 .vv2_icon_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.Visual_v2 a.vv2_icon_item { cursor: pointer; }
.Visual_v2 .vv2_icon_svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vv2-icon-size, 40px);
  height: var(--vv2-icon-size, 40px);
  color: var(--vv2-icon-color, #fff);
  transition: transform .25s ease, opacity .25s ease;
}
/* 아이콘 이미지(widget_img.php 의 wg_img1) 또는 인라인 svg 모두 대응 */
.Visual_v2 .vv2_icon_svg .wg_img1,
.Visual_v2 .vv2_icon_svg > svg,
.Visual_v2 .vv2_icon_svg .wg_img1 img,
.Visual_v2 .vv2_icon_svg .wg_img1 svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.Visual_v2 a.vv2_icon_item:hover .vv2_icon_svg {
  transform: translateY(-4px);
}
/* 편집 모드: 아이콘 이미지 비었을 때 첨부 placeholder */
.Visual_v2 .vv2_icon_placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.Visual_v2 .vv2_icon_title {
  color: var(--vv2-icon-title, #fff);
  font-size: clamp(13px, calc(0.16vw + 12.5px), 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  word-break: keep-all;
}

/* ==================== 상단 SVG 데코 (하단과 반대 개념) ====================
   - 색: PHP 로더가 각 도형 fill 속성에 직접 박음 (CSS color 의존 없음 → 검정 떨어짐 방지)
     · top_deco_color 비움 = SVG 원본 색 유지 / 색 지정 시 = 그 색으로 통일
   - 위치: inner 좌측/우측 가장자리에 정렬 (하단 데코와 동일 기준) */
.Visual_v2 .vv2_top_deco {
  position: absolute;
  z-index: 6;
  width: var(--vv2-top-deco-w, clamp(120px, 16vw, 240px));
  height: auto;
  pointer-events: none;
  transform: translate(var(--vv2-top-deco-ox, 0px), var(--vv2-top-deco-oy, 0px));
}
.Visual_v2 .vv2_top_deco svg {
  display: block;
  width: 100%;
  height: auto;
}
/* 상단 SVG 데코는 부모 .wg_side(=컨테이너/ inner 폭) 기준 absolute 이므로
   edge(화면끝 거리) 불필요 — inner 패딩만으로 inner 좌/우 라인에 정렬 */
.Visual_v2 .vv2_top_pos_top-left {
  top: 0;
  left: var(--vv2-inner-px, clamp(20px, calc(2.34vw + 12.5px), 60px));
}
.Visual_v2 .vv2_top_pos_top-right {
  top: 0;
  right: var(--vv2-inner-px, clamp(20px, calc(2.34vw + 12.5px), 60px));
}
.Visual_v2 .vv2_top_pos_top-center {
  top: 0;
  left: 50%;
  transform: translate(calc(-50% + var(--vv2-top-deco-ox, 0px)), var(--vv2-top-deco-oy, 0px));
}

/* ==================== 하단 포인트 박스 데코 (절대) ==================== */
/* v2: 원(파이)의 중심은 inner 좌측(--vv2-deco-dot-center)에 위치.
   좌/우 흰색 박스가 만나는 라운드 경계선도 그 지점에 맞춤.
   - 좌측 박스: 0 ~ center, 우측상단 라운드
   - 우측 박스: center ~ 끝, 좌측상단 라운드
   - 그 경계에 원 */
.Visual_v2 .vv2_bot_deco {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: var(--vv2-deco-h, 120px);
  z-index: 10;
  pointer-events: none;
  /* 원 중심 가로 위치 = (화면끝~inner 좌측 거리) + inner 좌측 패딩 + 사용자 보정값 */
  --vv2-deco-dot-center: calc(var(--vv2-inner-edge) + var(--vv2-inner-px, 60px) + var(--vv2-deco-dot-x, 0px));
}
.Visual_v2 .vv2_bot_deco_left,
.Visual_v2 .vv2_bot_deco_right {
  position: absolute;
  bottom: 0;
  height: 100%;
}
.Visual_v2 .vv2_bot_deco_left {
  left: 0;
  width: calc(var(--vv2-deco-dot-center) - (var(--vv2-deco-gap, 0px) / 2));
  background: var(--vv2-deco-left-bg, #fff);
  border-top-right-radius: var(--vv2-deco-r, 120px);
}
.Visual_v2 .vv2_bot_deco_right {
  left: calc(var(--vv2-deco-dot-center) + (var(--vv2-deco-gap, 0px) / 2));
  right: 0;
  background: var(--vv2-deco-right-bg, #fff);
  border-top-left-radius: var(--vv2-deco-r, 120px);
}
.Visual_v2 .vv2_bot_deco_dot {
  position: absolute;
  /* V자 파임 바닥(가장 깊은 지점) = bottom:(deco_h - radius).
     도트가 그 아래 흰 바탕 안에 완전히 들어오도록 윗변을 파임 바닥에 맞추고
     dot_gap 만큼 더 내림 →  bottom = deco_h - radius - dot - dot_gap.
     dot_y(양수) 로 더 아래, (음수) 로 위로 미세 조정.
     max(8px,...) 로 데코 영역 밖(음수)으로 빠지는 것 방지 */
  bottom: max(8px, calc(var(--vv2-deco-h, 160px) - var(--vv2-deco-r, 90px) - var(--vv2-deco-dot, 20px) - var(--vv2-deco-dot-gap, 14px) - var(--vv2-deco-dot-y, 0px)));
  left: var(--vv2-deco-dot-center);
  transform: translateX(-50%);
  width: var(--vv2-deco-dot, 20px);
  height: var(--vv2-deco-dot, 20px);
  border-radius: 50%;
  background: var(--vv2-deco-dot-bg, #f5a623);
  z-index: 2;
}

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

/* ==================== 반응형 ==================== */
@media screen and (max-width: 1280px) {
  .Visual_v2 .vv2_icons {
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: clamp(20px, 2vw, 36px);
  }
}

@media screen and (max-width: 1024px) {
  .Visual_v2 .vv2_inner {
    gap: clamp(24px, 3vw, 48px);
  }
  .Visual_v2 .vv2_txt_box { max-width: 480px; }
  /* fixed 모드 모바일/태블릿에서는 일반 흐름 권장 (iOS Safari background-attachment:fixed 미지원) */
  .Visual_v2 .wg_side[data-bg-fixed="1"] .vv2_bg_img {
    background-attachment: scroll;
  }
}

@media screen and (max-width: 860px) {
  /* 좌우 2단 → 위아래 1단 (flex column) */
  .Visual_v2 .wg_side {
    height: auto;
    min-height: var(--vv2-h-mo, 560px);
  }
  .Visual_v2 .vv2_inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(28px, 5vw, 44px);
    /* 좌우 여백은 부모 .contents-container(날개 컨테이너 폭)에서 처리 → 헤더와 라인 일치.
       상/하 패딩만 지정 (상단: content-top, 하단: 데코 공간) */
    padding: var(--vv2-content-top-mo, clamp(50px, calc(2.34vw + 22.5px), 70px)) 0 calc(var(--vv2-deco-h, 120px) + 30px);
  }
  /* 모바일: 제목 박스 absolute 해제 → 일반 흐름(아이콘 위에 쌓임). 위치는 inner padding-top 으로 제어 */
  .Visual_v2 .vv2_txt_box {
    position: static;
    top: auto; left: auto;
    max-width: 100%;
  }
  .Visual_v2 .vv2_icons {
    justify-content: start;
    margin-top: var(--vv2-icon-top-mo, 0px);
    grid-template-columns: repeat(var(--vv2-icon-cols-tab, 3), minmax(80px, 110px));
  }
}

@media screen and (max-width: 640px) {
  .Visual_v2 .vv2_txt1 { font-size: clamp(22px, calc(2.5vw + 14px), 32px); }
  .Visual_v2 .vv2_txt2 { font-size: 13px; }
  .Visual_v2 .vv2_icons {
    grid-template-columns: repeat(var(--vv2-icon-cols-mo, 2), 1fr);
    column-gap: 20px;
    row-gap: 26px;
  }
  .Visual_v2 .vv2_icon_svg {
    width: calc(var(--vv2-icon-size, 40px) * 0.85);
    height: calc(var(--vv2-icon-size, 40px) * 0.85);
  }
  .Visual_v2 .vv2_bot_deco {
    height: calc(var(--vv2-deco-h, 120px) * 0.7);
  }
  .Visual_v2 .vv2_bot_deco_left {
    border-top-right-radius: calc(var(--vv2-deco-r, 120px) * 0.7);
  }
  .Visual_v2 .vv2_bot_deco_right {
    border-top-left-radius: calc(var(--vv2-deco-r, 120px) * 0.7);
  }
  .Visual_v2 .vv2_bot_deco_dot {
    width: calc(var(--vv2-deco-dot, 20px) * 0.7);
    height: calc(var(--vv2-deco-dot, 20px) * 0.7);
  }
  .Visual_v2 .vv2_top_deco {
    width: calc(var(--vv2-top-deco-w, 200px) * 0.7);
  }
}

/* ========================================================================
   스크롤 진입 애니메이션
   ======================================================================== */

/* (1) 배경 줌 아웃 (1.1 → 1.0) */
.Visual_v2 .vv2_anim:not([data-bg-fixed="1"]) .vv2_bg_img {
  transform: scale(var(--vv2-anim-bg-zoom, 1.1));
  transition: transform var(--vv2-anim-bg-dur, 2000ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.Visual_v2 .vv2_anim:not([data-bg-fixed="1"]).is-in .vv2_bg_img {
  transform: scale(1);
}
.Visual_v2 .vv2_anim[data-bg-fixed="1"] .vv2_bg_img {
  background-size: calc(var(--vv2-anim-bg-zoom, 1.1) * 100%) auto;
  transition: background-size var(--vv2-anim-bg-dur, 2000ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: background-size;
}
.Visual_v2 .vv2_anim[data-bg-fixed="1"].is-in .vv2_bg_img {
  background-size: cover;
}

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

/* 상단 데코는 장식 — 진입 애니메이션 없이 항상 표시 (위치/표시 깨짐 방지) */

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