/* ============================================
   COUNT3 - D-DAY 카운트다운
   - inner 안 디데이 배열 + 중앙 리드문구
   - 하단 연한 배경글씨 (옵션)
   - 모든 값 CSS 변수 fallback → 톱니 옵션으로 override
   ============================================ */

/* 최상위 - 배경 + 가로 스크롤 방지 */
.COUNT3 {
  position: relative;
  overflow: hidden;
  float: left;
  width: 100%;
}

/* inner */
.COUNT3 .contents-container {
  position: relative;
  z-index: 2;
}

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

/* ── 디데이 배열 ── */
.COUNT3 .count3_list {
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--c3-gap, clamp(30px, calc(3.13vw + 20px), 70px));
  margin-bottom: clamp(30px, calc(2.34vw + 22.5px), 60px);
}
.COUNT3.c3_align_center  .count3_list { justify-content: center; }
.COUNT3.c3_align_left    .count3_list { justify-content: flex-start; }
.COUNT3.c3_align_right   .count3_list { justify-content: flex-end; }
.COUNT3.c3_align_between .count3_list { justify-content: space-between; flex-wrap: nowrap; }

.COUNT3 .count3_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 120px;
}
/* 꽉채움: 각 항목 균등 폭으로 inner 채움 */
.COUNT3.c3_align_between .count3_item {
  flex: 1 1 0;
  min-width: 0;
}

/* 디데이 제목 */
.COUNT3 .count3_title {
  font-size: var(--c3-title-size, clamp(15px, calc(0.47vw + 13.5px), 21px));
  font-weight: var(--c3-title-weight, 600);
  color: var(--c3-title-color, #0f172a);
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin-bottom: clamp(8px, calc(0.63vw + 6px), 16px);
  word-break: keep-all;
}

/* 디데이 카운트 D-N */
.COUNT3 .count3_count {
  font-size: var(--c3-count-size, clamp(36px, calc(3.13vw + 26px), 76px));
  font-weight: var(--c3-count-weight, 800);
  color: var(--c3-count-color, #0f172a);
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}
.COUNT3 .count3_dnum {
  font-variant-numeric: tabular-nums;
}

/* 각 항목 실제 날짜 */
.COUNT3 .count3_date {
  margin-top: clamp(10px, calc(0.63vw + 8px), 18px);
  font-size: clamp(14px, calc(0.31vw + 13px), 18px);
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.5px;
}
.COUNT3.c3_hide_date .count3_date { display: none; }

/* ── 리드 문구 (inner 왼쪽에서 40% 들여쓰기, 왼쪽 정렬) ── */
.COUNT3 .count3_lead {
  float: left;
  width: 60%;
  margin-left: 40%;
  text-align: left;
  font-size: var(--c3-lead-size, clamp(15px, calc(0.47vw + 13.5px), 21px));
  color: var(--c3-lead-color, #475569);
  line-height: 1.8;
  letter-spacing: -0.3px;
  word-break: keep-all;
}
.COUNT3 .count3_lead b,
.COUNT3 .count3_lead strong {
  color: var(--c3-count-color, #0f172a);
  font-weight: 700;
}

/* ── 하단 연한 배경글씨 (섹션 .COUNT3 직속, 섹션 안쪽 전체 레이어) ──
   레이어가 섹션 콘텐츠 영역(패딩 안쪽) 전체를 덮고, 그 안에서 글씨를 세로 정렬.
   inset:0 → 항상 섹션 안. 하단 정렬 시 콘텐츠 하단(패딩 안쪽 끝)에 붙음. */
.COUNT3 .count3_bgtext {
  position: absolute;
  inset: 0;                                    /* 섹션 패딩박스 안쪽 전체 */
  z-index: 0;                                  /* 콘텐츠(z-index 2) 뒤로 */
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: flex-end;                       /* 기본: 하단 정렬 */
}
.COUNT3 .count3_bgtext span {
  display: inline-block;
  font-size: var(--c3-bgtxt-size, clamp(56px, 13vw, 200px));
  font-weight: var(--c3-bgtxt-weight, 900);
  color: var(--c3-bgtxt-color, #0f172a);
  opacity: var(--c3-bgtxt-opacity, 0.08);
  letter-spacing: -3px;
  line-height: 0.85;
}

/* ── 세로 위치 (레이어 안 글씨 정렬) ── */
.COUNT3.c3_bgpos_bottom .count3_bgtext { align-items: flex-end; }
.COUNT3.c3_bgpos_center .count3_bgtext { align-items: center; }
.COUNT3.c3_bgpos_top    .count3_bgtext { align-items: flex-start; }

/* ── 고정 버전: 좌우=inner 기준 ── */
.COUNT3 .count3_bgtext_fixed {
  display: block;                              /* flex 대신 블록: 내부 inner가 정렬 담당 */
}
.COUNT3 .count3_bgtext_fixed .contents-container {
  width: 100%;
  position: absolute;
  left: 0; right: 0;
  margin: 0 auto;
}
/* 고정 버전 세로 위치 (inner를 레이어 안에서 위치) */
.COUNT3.c3_bgpos_bottom .count3_bgtext_fixed .contents-container { bottom: 0; }
.COUNT3.c3_bgpos_center .count3_bgtext_fixed .contents-container { top: 50%; transform: translateY(-50%); }
.COUNT3.c3_bgpos_top    .count3_bgtext_fixed .contents-container { top: 0; }
/* 좌우 정렬 (inner 폭 기준) */
.COUNT3.c3_bgalign_center .count3_bgtext_fixed .contents-container { text-align: center; }
.COUNT3.c3_bgalign_left   .count3_bgtext_fixed .contents-container { text-align: left; }
.COUNT3.c3_bgalign_right  .count3_bgtext_fixed .contents-container { text-align: right; }

/* ── 흐르는(마퀴) 반복 버전 (섹션 전체폭 = 섹션 안 100%) ──
   .COUNT3 자체가 전체폭(width:100%)이므로 inset:0 만으로 섹션 전체를 채움.
   섹션 밖으로 넘어가지 않음 (position:relative + overflow:hidden 부모 안). */
.COUNT3 .count3_bgtext_marquee {
  text-align: left;
  /* inset:0 상속 → 섹션 안 전체 */
}
.COUNT3 .count3_marquee_track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: c3_marquee var(--c3-bgtxt-speed, 24s) linear infinite;
}
.COUNT3 .count3_marquee_item {
  display: inline-block;
  padding-right: clamp(20px, 4vw, 60px);   /* 반복 텍스트 사이 간격 */
  font-size: var(--c3-bgtxt-size, clamp(56px, 13vw, 200px));
  font-weight: var(--c3-bgtxt-weight, 900);
  color: var(--c3-bgtxt-color, #0f172a);
  opacity: var(--c3-bgtxt-opacity, 0.08);
  letter-spacing: -3px;
  line-height: 0.85;
}
@keyframes c3_marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* 8개 중 절반 폭만큼 이동 → 끊김없이 반복 */
}
/* 마우스 오버 시 정지(선택) */
.COUNT3 .count3_bgtext_marquee:hover .count3_marquee_track {
  animation-play-state: paused;
}

/* ── 반응형: 태블릿 ── */
@media screen and (max-width: 992px) {
  .COUNT3 .count3_list {
    gap: clamp(20px, 4vw, 40px);
  }
  .COUNT3 .count3_item {
    min-width: 100px;
  }
  /* 리드 문구 들여쓰기 축소 (40% → 25%) */
  .COUNT3 .count3_lead {
    width: 75%;
    margin-left: 25%;
  }
}

/* ── 반응형: 모바일 ── */
@media screen and (max-width: 640px) {
  .COUNT3 .count3_list {
    gap: 24px 18px;
  }
  .COUNT3 .count3_item {
    min-width: calc(50% - 12px);
    flex: 0 0 calc(50% - 12px);
  }
  /* 리드 문구 들여쓰기 해제 (전체폭) */
  .COUNT3 .count3_lead {
    width: 100%;
    margin-left: 0;
  }
  .COUNT3 .count3_bgtext span {
    letter-spacing: -1px;
  }
}

/* ── 편집 모드 ── */
.COUNT3 .wg_edit_txt {
  transition: none !important;
  position: relative;   /* 편집 힌트(::before 뱃지) 기준 */
  z-index: 3;           /* 배경글씨(z-index:0) 위로 → 클릭 가능 */
}
/* 배경글씨는 항상 콘텐츠 뒤 + 클릭 통과 (인라인편집 방해 방지) */
.COUNT3 .count3_bgtext,
.COUNT3 .count3_bgtext * {
  pointer-events: none !important;
}