/* ============================================
   COUNT2 - 2단 레이아웃 (좌: 3이미지 / 우: 텍스트+카운팅)
   이미지: inner 50% 기준 absolute로 왼쪽 빠져나옴
   ============================================ */

/* 최상위 - 가로 스크롤 방지 */
.COUNT2_v2 {
  position: relative;
  overflow: hidden;
  float: left;
  width: 100%;
  background-color: #fff;
}

/* inner */
.COUNT2_v2 .contents-container {
  position: relative;
}

/* wrap = position 기준 */
.COUNT2_v2 .count2_wrap {
  position: relative;
  float: left;
  width: 100%;
}

/* ── 좌측: 이미지 (absolute, right:50% → inner 중앙에서 왼쪽으로) ── */
.COUNT2_v2 .count2_left {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(50% + 80px);
  margin: auto 0;
  height: fit-content;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, calc(2.34vw + 2.5px), 40px);
  z-index: 2;
  /* 전체 30px 위로 + 좌우 오프셋(톱니 img_offset_x) */
  transform: translate(var(--c2v2-img-x, 0px), -30px);
}

.COUNT2_v2 .count2_img {
  float: left;
  width: 100%;
  overflow: hidden;
  border-radius: 0px clamp(20px, calc(3.13vw + 10px), 60px) 0px clamp(20px, calc(3.13vw + 10px), 60px);
  opacity: 0; /* GSAP 개별 등장 초기 상태 */
}
.COUNT2_v2 .count2_img img {
  width: 100%;
  float: left;
  display: block;
  object-fit: cover;
  aspect-ratio: 3/4;
}

/* 이미지 엇갈림 배치 (transform — GSAP는 이 계산값을 읽어 착지점으로 사용) */
.COUNT2_v2 .count2_img1 {
  transform: translateY(clamp(-25px, calc(-0.78vw - 7.5px), -10px));
}
.COUNT2_v2 .count2_img2 {
  transform: translateY(clamp(30px, calc(4.69vw + 15px), 90px));
}
.COUNT2_v2 .count2_img3 {
  transform: translateY(clamp(-50px, calc(-2.34vw - 12.5px), -20px));
}

/* ── 우측: 텍스트 (normal flow, 50% 오른쪽에 배치 → 높이 결정) ── */
.COUNT2_v2 .count2_right {
  float: left;
  width: 50%;
  margin-left: 50%;
  padding: 0 0 0 clamp(20px, calc(3.13vw + 10px), 60px);
}

/* 메인 타이틀 */
.COUNT2_v2 .count2_tit {
  float: left;
  width: 100%;
  font-size: clamp(28px, calc(1.56vw + 23px), 48px);
  font-weight: 700;
  color: #000;
  letter-spacing: -1px;
  line-height: 1.3;
  margin-bottom: clamp(15px, calc(1.17vw + 11.25px), 30px);
}

/* 서브 타이틀 */
.COUNT2_v2 .count2_sub {
  float: left;
  width: 100%;
  font-size: clamp(18px, calc(0.63vw + 16px), 26px);
  font-weight: 600;
  color: #000;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: clamp(12px, calc(0.63vw + 10px), 20px);
}

/* 설명 */
.COUNT2_v2 .count2_desc {
  float: left;
  width: 100%;
  font-size: clamp(14px, calc(0.31vw + 13px), 18px);
  color: #666;
  letter-spacing: -0.5px;
  line-height: 1.6;
  margin-bottom: clamp(30px, calc(1.56vw + 25px), 50px);
}

/* ── 카운트 리스트 ── */
.COUNT2_v2 .count2_list {
  float: left;
  width: 100%;
  display: flex;
  align-items: stretch;
  --c2v2-gap: clamp(15px, calc(2.34vw + 7.5px), 45px);
  gap: var(--c2v2-gap);
  border-top: 1px solid #ccc;
  padding-top: clamp(15px, calc(1.17vw + 11.25px), 30px);
}
/* 톱니: 제목영역~반복구간 사이 라인 숨김 */
.COUNT2_v2.c2v2_noline_top .count2_list {
  border-top: none;
}
.COUNT2_v2 .count2_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* 톱니: 항목 사이 세로 라인 (gap 한가운데) */
.COUNT2_v2.c2v2_item_divider .count2_item + .count2_item::before {
  content: "";
  position: absolute;
  left: calc(var(--c2v2-gap) / -2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ccc;
}
.COUNT2_v2 .count2_label {
  font-size: clamp(12px, calc(0.39vw + 10.75px), 17px);
  color: #000;
  line-height: 1.3;
  margin-bottom: clamp(10px, calc(1.56vw + 5px), 30px);
  transition: color 0.3s;
}
.COUNT2_v2 .count2_item:hover .count2_label {
  color: var(--primary, #2196f3);
}
.COUNT2_v2 .count2_num {
  float: left;
  width: 100%;
}
.COUNT2_v2 .count2_num strong {
  font-size: clamp(32px, calc(2.19vw + 25px), 60px);
  font-weight: 800;
  color: #000;
  line-height: 1.2;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.COUNT2_v2 .count2_item:hover .count2_num strong {
  color: var(--primary, #2196f3);
}

/* ── 아이콘 항목 (txt2에 img/svg 넣으면 자동 적용) ── */
.COUNT2_v2 .count2_item_icon {
  align-items: flex-start;
  text-align: left;
  justify-content: flex-start;
}
/* 배치: 아이콘 위 → 제목 아래 (hover 이동 없음 — 고정)
   정렬/오프셋 = 톱니 설정 (icon_img_align/icon_text_align/icon_text_offset_y) */
.COUNT2_v2 .count2_item_icon .count2_icon {
  order: 1;
  line-height: 1;
  margin-bottom: 14px;
  width: 100%;
  text-align: var(--c2v2-icon-align, left);
}
.COUNT2_v2 .count2_item_icon .count2_label {
  order: 2;
  margin-bottom: 0;
  width: 100%;
  text-align: var(--c2v2-text-align, left);
  margin-top: var(--c2v2-text-oy, 0px); /* 음수 = 위로 당김 */
}
/* 아이콘 크기 — 톱니 설정 icon_width(--c2v2-icon-w) 우선, 없으면 기본 반응형 */
/* lottie-player 는 인라인 style(width/height px)이 박혀 오므로 !important 로 덮어씀 */
.COUNT2_v2 .count2_item_icon .count2_icon img,
.COUNT2_v2 .count2_item_icon .count2_icon svg,
.COUNT2_v2 .count2_item_icon .count2_icon lottie-player {
  width: var(--c2v2-icon-w, clamp(48px, calc(1.25vw + 44px), 64px)) !important;
  height: var(--c2v2-icon-w, clamp(48px, calc(1.25vw + 44px), 64px)) !important;
  object-fit: contain;
  display: inline-block;
}

/* ── 반응형: 태블릿 ── */
@media screen and (max-width: 992px) {
  /* 이미지: absolute 해제 → 일반 flow */
  .COUNT2_v2 .count2_left {
    position: relative;
    top: auto;
    right: auto;
    transform: translateX(var(--c2v2-img-x, 0px));
    width: 100%;
    float: left;
    gap: clamp(8px, 2vw, 15px);
    margin-bottom: clamp(30px, 5vw, 50px);
  }
  .COUNT2_v2 .count2_img1 {
    transform: translateY(-10px);
  }
  .COUNT2_v2 .count2_img2 {
    transform: translateY(30px);
  }
  .COUNT2_v2 .count2_img3 {
    transform: translateY(-30px);
  }
  .COUNT2_v2 .count2_right {
    width: 100%;
    margin-left: 0;
    padding: 0;
  }
}

/* ── 반응형: 모바일 ── */
@media screen and (max-width: 640px) {
  /* 이미지 영역 ↔ "교육 이용안내" 제목 사이 간격 축소 */
  .COUNT2_v2 .count2_left {
    margin-bottom: 18px;
  }
  /* 설명 글씨 ↔ 아이콘 반복영역 사이 간격 축소 */
  .COUNT2_v2 .count2_desc {
    margin-bottom: 16px;
  }
  .COUNT2_v2 .count2_list {
    --c2v2-gap: 12px;              /* 항목 사이 간격 */
    padding-top: 14px;            /* 상단 라인 ~ 항목 간격 (글씨↔아이콘 간격 축소) */
    flex-wrap: wrap;              /* 줄바꿈 허용 → 2개씩 2열 배열 */
    row-gap: 24px;               /* 위/아래 줄 사이 세로 간격 */
  }
  /* 항목을 한 줄에 2개씩 (gap 12px 고려한 폭 계산) */
  .COUNT2_v2 .count2_item {
    flex: 0 0 calc((100% - var(--c2v2-gap)) / 2);
    max-width: calc((100% - var(--c2v2-gap)) / 2);
    min-width: 0;
  }
  /* 2열 배열에서는 항목 사이 세로 구분선 숨김 (레이아웃 깨짐 방지) */
  .COUNT2_v2.c2v2_item_divider .count2_item + .count2_item::before {
    display: none;
  }
  /* 아이콘 항목: 좌우 여백 최소화 + 중앙 정렬로 잘림 방지 */
  .COUNT2_v2 .count2_item_icon {
    align-items: center;
    text-align: center;
  }
  .COUNT2_v2 .count2_item_icon .count2_icon {
    text-align: center;
    margin-bottom: 8px;
  }
  .COUNT2_v2 .count2_item_icon .count2_label {
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
    word-break: keep-all;
  }
  /* 아이콘 크기 축소 — 톱니 icon_width 미설정 시 기본값을 모바일용으로 */
  /* lottie-player 인라인 style(150px 등) 덮어쓰기 위해 !important */
  .COUNT2_v2 .count2_item_icon .count2_icon img,
  .COUNT2_v2 .count2_item_icon .count2_icon svg,
  .COUNT2_v2 .count2_item_icon .count2_icon lottie-player {
    width: var(--c2v2-icon-w, 48px) !important;
    height: var(--c2v2-icon-w, 48px) !important;
  }
  .COUNT2_v2 .count2_img {
    border-radius: 0px 20px 0px 20px;
  }
}

/* ── 마우스 팔로워 버튼 (링크 있는 항목 hover, JS 주입 — step123_v1 패턴) ── */
.COUNT2_v2 .count2_item_haslink {
  cursor: pointer;
}
.COUNT2_v2 .count2_cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(64px, calc(1.56vw + 59px), 84px);
  height: clamp(64px, calc(1.56vw + 59px), 84px);
  border-radius: 50%;
  background: var(--c2v2-cursor-bg, var(--primary, #FF6E00));
  background: var(--c2v2-cursor-bg, color-mix(in srgb, var(--primary, #FF6E00) 55%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  color: var(--c2v2-cursor-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, calc(0.16vw + 11.5px), 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 10;
}
@media screen and (max-width: 992px) {
  .COUNT2_v2 .count2_cursor {
    display: none;
  }
}

/* ── 편집 모드 ── */
.COUNT2_v2 .wg_edit_txt,
.COUNT2_v2 .wg_edit_img,
.COUNT2_v2 .wg_edit_link {
  transition: none !important;
}