@charset "euc-kr";

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

.middle_btn h1{
  font-size: 40px;
  font-family: 'paperozi';
    font-weight: 600;
  padding-bottom: clamp(10px,2vw,30px);
}

/* ===== 버튼 영역 ===== */
.consult-cta__buttons{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}


/* ===== 버튼 공통 ===== */
.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;
}

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

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

.cta-btn--kakao{
  background: #f7d44a;
  color: #1f1f1f;
}

.cta-btn--quick{
  background: #0b4a8b;
  color: #ffffff;   /* 텍스트 흰색 */
}

/* 화살표가 검정 SVG일 경우 흰색 보정 */
.cta-btn--quick .cta-btn__arrow img{
  filter: brightness(0) invert(1);
}

/* ===== 모바일 ===== */
@media (max-width:768px){
    .middle_btn > h1{
        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);
  }

}