@charset "euc-kr";

/* ===== 전체 섹션 ===== */
.middle_btn{
    padding-top: clamp(15px,2.5vw,25px);
    padding-bottom: clamp(20px,2.5vw,30px);
  text-align: center;
  background: #fff;   /* 연한 노란색 fff9e6 */
}

.middle_btn p{
    font-size: 30px;
    font-family: 'paperozi';
    font-weight: 400;
    padding-bottom: clamp(5px,2vw,10px);
    color: #323232;
}

.middle_btn .main{
  font-size: 40px;
  font-family: 'paperozi';
    font-weight: 700;
  padding-bottom: clamp(10px,2vw,30px);
    color: #036b45;
}

/* ===== 버튼 영역 ===== */
.consult-cta__buttons{
  max-width: 700px;
  margin: 0 auto;
}


/* ===== 버튼 공통 ===== */
.cta-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 100px;
  border-radius: 14px;
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: all .2s ease;
  box-sizing: border-box;
  box-shadow: none;   /* 그림자 제거 */
}

.cta-btn:hover{
  transform: translateY(-5px);
}

.cta-btn:active{
  transform: translateY(0);
}

/* ===== 아이콘 ===== */
.cta-btn__icon{
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-btn__icon img{
  width: clamp(40px,2.5vw,60px);
  height: clamp(40px,2.5vw,60px);
  object-fit: contain;
}

/* ===== 텍스트 ===== */
.cta-btn__label{
  flex: 1;
  text-align: left;
  padding: 0 20px;
    font-family: 'paperozi';
    font-weight: 400;
    font-size: clamp(16pt,2.5vw,20pt);
}

/* ===== 화살표 ===== */
.cta-btn__arrow{
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-btn__arrow img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: transform .2s ease;
    filter: invert(1);/*색상 뒤집기*/
}

.cta-btn:hover .cta-btn__arrow img{
  transform: translateX(4px);
}

/* ===== 색상 버전 ===== */

.cta-btn--kakao{
  background: #036b45;
  color: #ffffff;
}




/* ===== 모바일 ===== */
@media (max-width:768px){
    .middle_btn>p{
        font-size: 15px;
        padding-bottom: 3px;
    }
    .middle_btn > .main{
        font-size: 17px;
    }

  /* 중앙 버튼 grid → 1열 유지 */
  .consult-cta__buttons{
    width:90%;
    grid-template-columns:1fr;
    gap:10px;
  }

  /* 버튼 구조 하단과 동일하게 */
  .consult-cta__buttons .cta-btn{
    width:80%;
    margin:0 auto;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    height:clamp(60px,2.5vw,80px);
    border-radius:clamp(5px,2.5vw,20px);
    gap:20px;
    padding:0 48px 0 24px;
    position:relative;
  }

  /* 아이콘 크기 통일 */
  .consult-cta__buttons .cta-btn__icon img{
    width:40px;
    height:40px;
  }

  /* 텍스트 크기 통일 */
  .consult-cta__buttons .cta-btn__label{
    font-size:16px;
    text-align:left;
    padding:0;
    flex:1;
  }

  /* 기존 화살표 span 숨기기 */
  .consult-cta__buttons .cta-btn__arrow{
    display:none;
  }

  /* 하단과 동일한 CSS 화살표 생성 */
  .consult-cta__buttons .cta-btn::after{
    content:"";
    position:absolute;
    right:20px;
    top:50%;
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-top:2px solid currentColor;
    transform:translateY(-50%) rotate(45deg);
  }

}