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

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

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

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

/* ── 좌측: 이미지 (absolute, right:50% → inner 중앙에서 왼쪽으로) ── */
.COUNT2 .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;
  /* 슬라이드인 초기 상태 */
  opacity: 0;
}

.COUNT2 .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);
}
.COUNT2 .count2_img img {
  width: 100%;
  float: left;
  display: block;
  object-fit: cover;
  aspect-ratio: 3/4;
}

/* 이미지 엇갈림 배치 (transform으로 높이 동일 유지) */
.COUNT2 .count2_img1 {
  transform: translateY(clamp(-25px, calc(-0.78vw - 7.5px), -10px));
}
.COUNT2 .count2_img2 {
  transform: translateY(clamp(30px, calc(4.69vw + 15px), 90px));
}
.COUNT2 .count2_img3 {
  transform: translateY(clamp(-50px, calc(-2.34vw - 12.5px), -20px));
}

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

/* 메인 타이틀 */
.COUNT2 .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 .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 .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 .count2_list {
  float: left;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: clamp(15px, calc(2.34vw + 7.5px), 45px);
  border-top: 1px solid #ccc;
  padding-top: clamp(15px, calc(1.17vw + 11.25px), 30px);
}
.COUNT2 .count2_item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.COUNT2 .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 .count2_item:hover .count2_label {
  color: var(--primary, #2196f3);
}
.COUNT2 .count2_num {
  float: left;
  width: 100%;
}
.COUNT2 .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 .count2_item:hover .count2_num strong {
  color: var(--primary, #2196f3);
}

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

/* ── 반응형: 모바일 ── */
@media screen and (max-width: 640px) {
  .COUNT2 .count2_list {
    gap: 10px;
  }
  .COUNT2 .count2_img {
    border-radius: 0px 20px 0px 20px;
  }
}

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