/* === Performance section === */
.performance{
  padding-left: 20px;
  padding-right: 20px;
  background-image: url('../images/performance.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  contain: layout style paint;
  isolation: isolate;
  position: relative;
}

.performance .container {
  width: 100%;
  max-width: 1200px;
  margin-top: 20px; /* 라벨과의 간격을 위해 상단 마진 추가 */
}

.performance .perf-eyebrow{
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 10;
  letter-spacing: .12em;
  margin: 0;
  text-transform: uppercase;
}

.performance .perf-title{
  margin: 0 auto;
  text-align: center !important;
}

/* 카드형 KPI */
.performance .perf-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
}

.performance .perf-card{
  border-radius: 14px;
  background: #f7f8fa;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.performance .perf-card .num,
.performance .perf-card .label {
  position: relative;
  z-index: 1;
}

.performance .perf-card .num{
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

.performance .perf-card .label{
  display: block;
  margin-top: .35rem;
}

.performance .perf-summary {
  text-align: center !important;
  line-height: 1.2;
}

.performance .perf-eyebrow span {
  font-size: 0.9rem;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* 모바일 최적화 */
@media (max-width: 911px){
  .performance{ 
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 60px; /* 라벨 아래 콘텐츠 시작을 위한 상단 패딩 */
  }
  .performance .perf-eyebrow {
    top: 30px;
    left: 30px;
  }
  
  .performance .perf-eyebrow span {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
  .performance .perf-grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* PC 버전(912px 이상)에서 4번째 그리드 카드 중앙 정렬 */
@media (min-width: 912px) {
  .performance .perf-card:nth-child(4) {
    grid-column-start: 2;
  }
}

      .perf-title .highlight {
        /* 형광펜 효과 */
        background: linear-gradient(180deg, transparent 65%, rgba(20, 20, 20, 0.6) 35%);
        display: inline;
        padding: 0 2px;
        margin: 0 -2px;
      }

/* ==============================================================
   [최종] Performance Section: 모든 스타일 변수 관리
   ============================================================== */

:root {
  /* === PC 전용 === */
  /* 폰트 */
  --perf-eyebrow-pc-size: 3rem;
  --perf-eyebrow-pc-color: #fff;
  --perf-eyebrow-pc-weight: 700;
  --perf-title-pc-size: 3rem;
  --perf-title-pc-color: #fff;
  --perf-title-pc-weight: 900;
  --perf-summary-pc-size: 3rem;
  --perf-summary-pc-color: #fff;
  --perf-summary-pc-weight: 500;
  --perf-num-pc-size: 3.5rem;
  --perf-num-pc-color: hsl(235, 76%, 27%);
  --perf-num-pc-weight: 900;
  --perf-label-pc-size: 1.2rem;
  --perf-label-pc-color: #666;
  --perf-label-pc-weight: 400;

  /* 간격 */
  --perf-section-padding-top-pc: 6rem;
  --perf-section-padding-bottom-pc: 6rem;
  --perf-space-eyebrow-to-title-pc: 1rem;
  --perf-space-above-grid-pc: 3rem;
  --perf-space-below-grid-pc: 3rem;
  --perf-card-padding-pc: 3.5rem 1.5rem;
  --perf-grid-gap-pc: 20px;
  
  /* 카드 막대 스타일 */
  --perf-card-bar-color: hsl(237, 80%, 34%);
  --perf-card-bar-width-pc: 20%;
  --perf-card-bar-height-pc: 2%;
  --perf-card-bar-top-pc: 14%;
  --perf-card-bar-left-pc: 4%;
  --perf-card-bar-radius: 2px;
  
  /* 첫 번째 카드 아이콘 스타일 - 자금조달성사율 */
  --perf-first-card-icon-url: url('../images/up.png');
  --perf-first-card-icon-width-pc: 60%;
  --perf-first-card-icon-height-pc: 20.75%;
  --perf-first-card-icon-top-pc: 25%;
  --perf-first-card-icon-left-pc: 90%;
  --perf-first-card-icon-transform-pc: translate(-50%, -50%);
  --perf-first-card-icon-opacity-pc: 1;

  /* 마지막 카드 아이콘 스타일 - 숫자 바로 위로 이동 */
  --perf-last-card-icon-url: url('../images/star.png');
  --perf-last-card-icon-width-pc: 30%;
  --perf-last-card-icon-height-pc: 30%;
  --perf-last-card-icon-top-pc: 25%;
  --perf-last-card-icon-left-pc: 50%;
  --perf-last-card-icon-transform-pc: translate(-50%, -50%);
  --perf-last-card-icon-opacity-pc: 1;

  /* [수정] 카드 텍스트 그룹 위치 - 조금 위로 이동 */
  --perf-card-text-top-pc: 40%;
  --perf-card-text-left-pc: 50%;
  --perf-card-text-transform-pc: translateX(-50%);

  /* === Mobile 전용 === */
  /* 폰트 */
  --perf-eyebrow-mo-size: 2.5rem;
  --perf-eyebrow-mo-color: #fff;
  --perf-eyebrow-mo-weight: 700;
  --perf-title-mo-size: 2.5rem;
  --perf-title-mo-color: #fff;
  --perf-title-mo-weight: 900;
  --perf-summary-mo-size: 2.5rem;
  --perf-summary-mo-color: #fff;
  --perf-summary-mo-weight: 500;
  --perf-num-mo-size: 3rem;
  --perf-num-mo-color: hsl(240, 74%, 36%);
  --perf-num-mo-weight: 900;
  --perf-label-mo-size: 1.2rem;
  --perf-label-mo-color: #666;
  --perf-label-mo-weight: 400;

  /* 간격 */
  --perf-section-padding-top-mo: 3rem;
  --perf-section-padding-bottom-mo: 3rem;
  --perf-space-eyebrow-to-title-mo: 0.75rem;
  --perf-space-above-grid-mo: 2rem;
  --perf-space-below-grid-mo: 2.5rem;
  --perf-card-padding-mo: 2.5rem 1rem;
  --perf-grid-gap-mo: 16px;
  
  /* 카드 스타일 */
  --perf-card-width-mo: 80%;
  
  /* 카드 막대 스타일 */
  --perf-card-bar-width-mo: 15%;
  --perf-card-bar-height-mo: 2%;
  --perf-card-bar-top-mo: 8%;
  --perf-card-bar-left-mo: 8%;

  /* 첫 번째 카드 아이콘 스타일 - 자금조달성사율 */
  --perf-first-card-icon-width-mo: 18.75%;
  --perf-first-card-icon-height-mo: 18.75%;
  --perf-first-card-icon-top-mo: 25%;
  --perf-first-card-icon-left-mo: 70%;
  --perf-first-card-icon-transform-mo: translate(-50%, -50%);
  --perf-first-card-icon-opacity-mo: 1;

  /* 마지막 카드 아이콘 스타일 - 숫자 바로 위로 이동 */
  --perf-last-card-icon-width-mo: 30%;
  --perf-last-card-icon-height-mo: 30%;
  --perf-last-card-icon-top-mo: 30%;
  --perf-last-card-icon-left-mo: 50%;
  --perf-last-card-icon-transform-mo: translate(-50%, -50%);
  --perf-last-card-icon-opacity-mo: 1;
  
  /* [수정] 카드 텍스트 그룹 위치 - 조금 위로 이동 */
  --perf-card-text-top-mo: 40%;
  --perf-card-text-left-mo: 50%;
  --perf-card-text-transform-mo: translateX(-50%);
}

/* ================= PC 스타일 적용 ================= */
@media (min-width: 912px) {
  .performance {
    padding-top: var(--perf-section-padding-top-pc);
    padding-bottom: var(--perf-section-padding-bottom-pc);
  }
  .performance .perf-grid {
    gap: var(--perf-grid-gap-pc);
  }
  .performance .perf-title,
  .performance .perf-summary {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .performance .perf-eyebrow {
    font-size: 0.9rem;
    color: #999;
    font-weight: 700;
    margin-bottom: 0;
    text-align: left;
  }
  .performance .perf-title {
    font-size: var(--perf-title-pc-size);
    color: var(--perf-title-pc-color);
    font-weight: var(--perf-title-pc-weight);
    margin-bottom: var(--perf-space-above-grid-pc);
  }
  .performance .perf-summary {
    font-size: var(--perf-summary-pc-size);
    color: var(--perf-summary-pc-color);
    font-weight: var(--perf-summary-pc-weight);
    margin-top: var(--perf-space-below-grid-pc);
  }
  .performance .perf-card {
    padding: var(--perf-card-padding-pc);
  }
 .performance .perf-card-text-wrapper {
    position: absolute !important;
    top: var(--perf-card-text-top-pc) !important;
    left: var(--perf-card-text-left-pc) !important;
    transform: var(--perf-card-text-transform-pc) !important;
  }
  .performance .perf-card::before {
    content: '';
    position: absolute;
    background-color: var(--perf-card-bar-color);
    width: var(--perf-card-bar-width-pc);
    height: var(--perf-card-bar-height-pc);
    top: var(--perf-card-bar-top-pc);
    left: var(--perf-card-bar-left-pc);
    border-radius: var(--perf-card-bar-radius);
  }
  .performance .perf-grid .perf-card:first-child::after {
    content: '' !important;
    position: absolute !important;
    background-image: url('../images/up.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 90% !important;
    height: 30% !important;
    top: 25% !important;
    left: 85% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }
  .performance .perf-card:last-child::after {
    content: '';
    position: absolute;
    background-image: var(--perf-last-card-icon-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: var(--perf-last-card-icon-width-pc);
    height: var(--perf-last-card-icon-height-pc);
    top: var(--perf-last-card-icon-top-pc);
    left: var(--perf-last-card-icon-left-pc);
    transform: var(--perf-last-card-icon-transform-pc);
    opacity: var(--perf-last-card-icon-opacity-pc);
    z-index: 0;
  }
  .performance .perf-card .num {
    font-size: var(--perf-num-pc-size);
    color: var(--perf-num-pc-color);
    font-weight: var(--perf-num-pc-weight);
  }
  .performance .perf-card .label {
    font-size: var(--perf-label-pc-size);
    color: var(--perf-label-pc-color);
    font-weight: var(--perf-label-pc-weight);
  }
  
  .performance .contact-button {
    display: block;
    margin: 30px auto 0;
    text-align: center;
  }
}

/* ================= Mobile 스타일 적용 ================= */
@media (max-width: 911px) {
  .performance {
    padding-top: var(--perf-section-padding-top-mo);
    padding-bottom: var(--perf-section-padding-bottom-mo);
  }
  .performance .perf-grid {
    gap: var(--perf-grid-gap-mo);
  }
  .performance .perf-title,
  .performance .perf-summary {
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .performance .perf-eyebrow {
    font-size: 0.8rem;
    color: #999;
    font-weight: 700;
    margin-bottom: 0;
    text-align: left;
  }
  .performance .perf-title {
    font-size: var(--perf-title-mo-size);
    color: var(--perf-title-mo-color);
    font-weight: var(--perf-title-mo-weight);
    margin-bottom: var(--perf-space-above-grid-mo);
  }
  .performance .perf-summary {
    font-size: var(--perf-summary-mo-size);
    color: var(--perf-summary-mo-color);
    font-weight: var(--perf-summary-mo-weight);
    margin-top: var(--perf-space-below-grid-mo);
  }
  
  .performance .contact-button {
    display: block;
    margin: 20px auto 0;
    text-align: center;
  }
  .performance .perf-card {
    padding: var(--perf-card-padding-mo);
    width: var(--perf-card-width-mo);
    min-height: 160px;
  }
  .performance .perf-card-text-wrapper {
    position: absolute !important;
    top: var(--perf-card-text-top-mo) !important;
    left: var(--perf-card-text-left-mo) !important;
    transform: var(--perf-card-text-transform-mo) !important;
  }
  .performance .perf-card::before {
    content: '';
    position: absolute;
    background-color: var(--perf-card-bar-color);
    width: var(--perf-card-bar-width-mo);
    height: var(--perf-card-bar-height-mo);
    top: var(--perf-card-bar-top-mo);
    left: var(--perf-card-bar-left-mo);
    border-radius: var(--perf-card-bar-radius);
  }
  .performance .perf-grid .perf-card:first-child::after {
    content: '' !important;
    position: absolute !important;
    background-image: url('../images/up.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 70% !important;
    height: 30% !important;
    top: 22% !important;
    left: 86% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }
  .performance .perf-card:last-child::after {
    content: '';
    position: absolute;
    background-image: var(--perf-last-card-icon-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: var(--perf-last-card-icon-width-mo);
    height: var(--perf-last-card-icon-height-mo);
    top: var(--perf-last-card-icon-top-mo);
    left: var(--perf-last-card-icon-left-mo);
    transform: var(--perf-last-card-icon-transform-mo);
    opacity: var(--perf-last-card-icon-opacity-mo);
    z-index: 0;
  }
  .performance .perf-card .num {
    font-size: var(--perf-num-mo-size);
    color: var(--perf-num-mo-color);
    font-weight: var(--perf-num-mo-weight);
  }
  .performance .perf-card .label {
    font-size: var(--perf-label-mo-size);
    color: var(--perf-label-mo-color);
    font-weight: var(--perf-label-mo-weight);
  }
}
/* performance.css 파일 */
/* ==============================================================
   [추가] Performance 섹션 스크롤 애니메이션
   ============================================================== */

/* --- 1. 애니메이션 시작 전 (초기 상태) --- */
.performance .perf-eyebrow {
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.performance .perf-title {
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
  will-change: opacity;
}

.performance .perf-summary {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

/* --- 2. 애니메이션 최종 상태 (화면에 나타났을 때) --- */
.performance .perf-eyebrow.perf-show {
  opacity: 1;
  transform: scale(1);
  will-change: auto;
}

.performance .perf-title.perf-show {
  opacity: 1;
  will-change: auto;
}

.performance .perf-summary.perf-show {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* ==============================================================
   [추가] PC 버전 원형 회전 텍스트 (SVG 최종 수정 버전)
   ============================================================== */

/* 기본적으로 숨김 처리 */
.rotating-text-svg-container {
  display: none;
}

/* PC 버전에서만 보이도록 설정 */
@media (min-width: 912px) {
  .performance .container {
    position: relative;
    z-index: 1;
  }

 /* ▼▼▼ 아래 코드로 교체 ▼▼▼ */
  .rotating-text-svg-container {
    display: block;
    /* HTML의 viewBox와 맞게 컨테이너 크기를 400px로 줄임 */
    width: 400px;
    height: 400px;
    position: absolute;
    left: 17%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: spin 40s linear infinite;
    pointer-events: none;
  }

  .rotating-text-svg-container svg textPath {
    /* 원이 작아졌으므로 글자 크기도 1.8rem으로 줄임 */
    font-size: 1.8rem;
    font-weight: 700;
    fill: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
  }
  /* ▲▲▲ 여기까지 교체 ▲▲▲ */
}

/* 회전 애니메이션 정의 (변경 없음) */
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}