/* style-c5.css */
/* ====================== C5  ====================== */


/* 기본 섹션 레이아웃 */
.c5 {
  position: relative;
  padding: clamp(90px, 10vw, 150px) 0 160px;
  background: url('../img/c5/c5_bg.png') center/cover no-repeat;
  box-sizing: border-box;
  color: #fff;
  word-break: keep-all;
}

.c5-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

/* 왼쪽 텍스트 영역 */
.c5-text-wrap {
  flex: 1 1 50%;
  min-width: 0;
}

.c5-title {
  margin: 0 0 40px;
  font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.4;
}

.c5-title-line {
  display: block;
}

/* 인용문 리스트 */
.c5-quote-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c5-quote {
  font-size: 22px;
  line-height: 1.8;
  margin-bottom: 18px;
  font-weight: 400;
}




/* 기본 상태: 보이지 않지만 위치는 제자리(translateY(0)) */
.c5-quote-list .c5-quote {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.4s ease; /* 사라질 때는 opacity만 부드럽게 변경 */
}

/* 활성화될 때:
   - opacity 1로 바뀌면서
   - c5-quote-up 애니메이션으로 "한 번만" 밑에서 위로 슬라이드 */
.c5-quote-list .c5-quote.is-active {
  opacity: 1;
  animation: c5-quote-up 0.6s ease forwards;
}

/* 등장 애니메이션: 아래(20px) → 제자리(0) */
@keyframes c5-quote-up {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}






/* 오른쪽 그래프 전체 래퍼 */
.c5-chart-wrap {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

/* 각 그래프 박스 */
.c5-chart-box {
  text-align: center;
  font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
}




.c5-donut {
  --value: 0;
  --value-current: 0;
  --accent-start: #ead38b;
  --accent-end:   #9a703e;
  --track-color:  rgba(255,255,255,255);

  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.c5-donut::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      var(--accent-start) 0deg,
      var(--accent-end)   calc(var(--value-current) * 3.6deg),
      var(--track-color)  calc(var(--value-current) * 3.6deg),
      var(--track-color)  360deg
    );
  -webkit-mask: radial-gradient(circle at center,
    transparent 0 62%,
    #000 63% 100%
  );
          mask: radial-gradient(circle at center,
    transparent 0 62%,
    #000 63% 100%
  );

    /* ✅ 이 줄 추가 */
    transform: rotate(90deg);
  }


.c5-donut .c5-percent {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.c5-donut-42 { --value: 42.5; }
.c5-donut-30 { --value: 30.5; }





/* 퍼센트 텍스트 */
.c5-percent {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 0.06em;
}

/* 도넛 아래 설명 텍스트 및 점선 */
.c5-chart-caption {
  margin-top: 28px;
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
}

/* 세로 점선 장식 – 원본 이미지 하단의 점선 느낌 */
.c5-caption-dots {
  display: block;
  width: 4px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow:
    0 8px 0 0 #ffffff,
    0 16px 0 0 #ffffff,
    0 24px 0 0 #ffffff;
}

/* 캡션 텍스트 */
.c5-caption-text {
  display: inline-block;
  margin-top: 30px;
}

/* 반응형 처리 – 태블릿 이하에서 세로 정렬 */
@media (max-width: 992px) {
  .c5-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .c5-chart-wrap {
    align-self: center;
  }
  .c5-text-wrap {
    padding: 50px;  }
}


@media (max-width:900px){
  .c5-inner {
    width: 100%;}
}

/* 모바일에서 폰트 및 그래프 크기 축소 */
@media (max-width: 640px) {
  .c5 {
    padding: 50px 20px;
  }

  .c5-title {
    font-size: 30px;
  }

  .c5-quote {
    font-size: 18px;
  }

  .c5-chart-wrap {
    flex-direction: column;
    gap: 40px;
  }

  .c5-donut {
    width: 180px;
    height: 180px;
  }

  .c5-percent {
    font-size: 34px;
  }

  .c5-chart-caption {
    font-size: 18px;
  }
  .c5-text-wrap {
    padding: 50px;  }
}