/* ================================
   메인 신청폼(우측 폼) 전용 스타일
   - Salient + CF7 환경 보정 포함
   - 아이콘/화살표 절대경로 적용
   ================================ */

/* 섹션 레이아웃 */
#sec_request{
  width:96%;
  max-width:1810px;
  margin:0 auto;
  padding: clamp(80px, 9vw, 130px) clamp(24px, 7.5vw, 30px);
  display:flex;
  justify-content:space-between;
  gap: clamp(24px, 3.5vw, 60px);
  position: relative;
  color:#fff;
}

/* 좌측 */
#sec_request .left{ width:56%; min-width:520px; }
#sec_request .left .sec_tit{ margin-bottom: clamp(90px, 10vw, 150px); }
#sec_request .left .sec_tit h2{ color:#fff; font-size: clamp(28px, 3vw, 46px); line-height:1.15; }
#sec_request .left .sec_tit p{ color:#fff; font-weight:300; font-size: clamp(15px, 1.15vw, 20px); line-height:1.6; opacity:.95; }

/* 스텝 */
#sec_request .left .step{
  display:flex; align-items:center;
  gap: clamp(40px, 7.5vw, 140px);
  position: relative; z-index:1;
}
#sec_request .left .step > div{ display:flex; flex-direction:column; align-items:center; position:relative; }
#sec_request .left .step > div p{
  font-size: clamp(16px, .94vw, 18px);
  color: rgba(255,255,255,.65);
  margin-top: clamp(12px, 1vw, 18px);
}

/* 스텝 – 원 */
#sec_request .left .step > div > span{
  width: clamp(80px, 5.21vw, 100px);
  height: clamp(80px, 5.21vw, 100px);
  border-radius:50%;
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  position: relative;
}
#sec_request .left .step .active > span{
  background-image: linear-gradient(0deg, #a89373 0%, #baa387 100%);
  color:#111; animation: req-pulse 2s infinite;
}
@keyframes req-pulse{
  0%{box-shadow:0 0 0 0 rgba(186,163,135,.45);}
  70%{box-shadow:0 0 0 20px rgba(186,163,135,0);}
  100%{box-shadow:0 0 0 0 rgba(186,163,135,0);}
}

/* 아이콘(원 내부) – 실제 경로로 교체 */
#sec_request .left .step .step1 > span::after,
#sec_request .left .step .step2 > span::after,
#sec_request .left .step .step3 > span::after{
  content:""; display:block;
  background-position:center; background-repeat:no-repeat; background-size:contain;
  width: clamp(22px, 1.6vw, 30px); height: clamp(22px, 1.6vw, 30px);
}
#sec_request .left .step .step1 > span::after{ background-image:url("../../img/main/icon/step_icon1_w.svg"); }
#sec_request .left .step .step2 > span::after{ background-image:url("../../img/main/icon/step_icon2.svg"); }
#sec_request .left .step .step3 > span::after{ background-image:url("../../img/main/icon/step_icon3.svg"); }

/* 스텝 – 연결 라인 */
#sec_request .left .step > div > span::before{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  height:1px; background-color: rgba(217,217,217,.2); z-index:0;
  width: clamp(60px, 4.17vw, 80px);
  right: calc(clamp(163px, 11.46vw, 220px) / 2 * -1);
}
#sec_request .left .step > div:last-child > span::before{ display:none; }

/* 스텝 – 말풍선(위쪽) */
#sec_request .left .step .step_txt{
  position:absolute; bottom: calc(100% + 34px); left:0;
  width: clamp(240px, 20vw, 300px);
  background:#baa387; color:#111; border-radius:10px;
  font-weight:600; font-size: clamp(13px, .95vw, 15px); line-height:1.55;
  padding: clamp(10px, 1.1vw, 16px) clamp(14px, 1.4vw, 22px);
  opacity:0; visibility:hidden; transition:.25s ease; pointer-events:none; z-index:2;
}
#sec_request .left .step .active .step_txt{ opacity:1; visibility:visible; }
#sec_request .left .step .step_txt::after{
  content:""; position:absolute; left:14%; bottom:-14px;
  border-left:8px solid transparent; border-right:8px solid transparent; border-top:14px solid #baa387;
}

/* 우측 폼 래퍼 */
#sec_request .right{ width:37.3%; min-width:420px; }
#sec_request .main-cf7-wrap{ width:100%; }

/* ===============================
   CF7/Salient 보정 (메인 폼)
   =============================== */

/* CF7가 자동으로 감싸는 <p> → 가로 배치 유리하게 제거 */
#sec_request .main-cf7-wrap form.wpcf7-form > p{
  display: contents;
  margin:0; padding:0;
}

/* Salient 전역 폼 톤다운 무력화 (rgba/두꺼운 보더 등) */
.material.woocommerce-page[data-form-style=default] input#coupon_code,
#sec_request .main-cf7-wrap input[type=date],
#sec_request .main-cf7-wrap input[type=email],
#sec_request .main-cf7-wrap input[type=number],
#sec_request .main-cf7-wrap input[type=password],
#sec_request .main-cf7-wrap input[type=search],
#sec_request .main-cf7-wrap input[type=tel],
#sec_request .main-cf7-wrap input[type=text],
#sec_request .main-cf7-wrap input[type=url],
#sec_request .main-cf7-wrap select,
#sec_request .main-cf7-wrap textarea{
  background:#fff !important;
  border:1px solid #e5e8ee !important;
  border-radius:6px !important;
  box-shadow:none !important;
  color:#111 !important;
}

/* 인풋/셀렉트 공통 */
#sec_request .main-cf7-wrap input[type="text"],
#sec_request .main-cf7-wrap input[type="tel"],
#sec_request .main-cf7-wrap select{
  width:100%;
  height: clamp(54px, 4.2vw, 72px);
  font-size: clamp(16px, 1.04vw, 20px);
  padding: 0 clamp(40px, 3.13vw, 60px);
  box-sizing:border-box;
}
#sec_request .main-cf7-wrap input::placeholder{ color:#999; }

/* 입력 래퍼 + 아이콘 */
#sec_request .main-cf7-wrap .input_wrapper{ position:relative; margin-bottom:20px; }
#sec_request .main-cf7-wrap .input_wrapper::before{
  content:""; position:absolute; left: clamp(15px, 1.56vw, 30px); top:50%; transform:translateY(-50%);
  width: clamp(16px, 1.25vw, 20px); height: clamp(16px, 1.25vw, 20px);
  background-position:center; background-repeat:no-repeat; background-size:cover; z-index:2;
}
/* 아이콘 경로(절대경로 사용) */
#sec_request .main-cf7-wrap .input_wrapper.icon-name::before{ background-image:url("../../img/main/icon/form_icon1.svg"); }
#sec_request .main-cf7-wrap .input_wrapper.icon-tel::before{  background-image:url("../../img/main/icon/form_icon2.svg"); }

/* 아이콘과 겹치지 않게 좌측 패딩 확보 */
#sec_request .main-cf7-wrap input[type="text"],
#sec_request .main-cf7-wrap input[type="tel"]{
  padding-left: clamp(40px, 3.13vw, 60px) !important;
  position: relative; z-index:1;
}

/* 셀렉트 화살표(절대경로 + 우측 여백) */
#sec_request .main-cf7-wrap .select_wrapper select{
  appearance:none; -webkit-appearance:none;
  background: #fff url("../../img/main/icon/form_arrow.svg")
              right 20px center no-repeat !important;
  background-size: clamp(18px, 1.4vw, 22px) auto !important;
  padding-right: clamp(40px, 3.13vw, 60px) !important;
  position: relative; z-index:1;
}

/* 동의 체크 – 넓이/색 보정 */
#sec_request .main-cf7-wrap .agree_wrapper > p{ display: contents; margin:0; }
#sec_request .main-cf7-wrap .agree_wrapper{
  display:inline-flex; align-items:center; gap:10px;
  width:auto; min-width:340px; white-space:nowrap;
  margin: 28px 0 36px;
}
#sec_request .main-cf7-wrap .agree_wrapper .wpcf7-list-item,
#sec_request .main-cf7-wrap .agree_wrapper .wpcf7-list-item label{
  display:inline-flex; align-items:center; gap:10px;
  color:#fff !important; white-space:nowrap; line-height:1.35;
}
#sec_request .main-cf7-wrap .agree_wrapper .wpcf7-list-item-label{ color:#fff !important; }
#sec_request .main-cf7-wrap .agree_wrapper input[type=checkbox]{ width:20px; height:20px; margin:0; }

/* 기본 사각형 + 체크 이미지 */
/*
#sec_request .main-cf7-wrap .agree_wrapper input[type=checkbox] + span{
  width:24px; height:24px; background:#fff; border-radius:4px; display:inline-block;
}

#sec_request .main-cf7-wrap .agree_wrapper input[type=checkbox]:checked + span{
  background-image:url("../../img/main/icon/check_icon_b.svg");
  background-position:center; background-repeat:no-repeat; background-size:18px 15px;
}
*/
/* 제출 버튼 */
#sec_request .main-cf7-wrap input[type="submit"].quickCounsel_btn{
  width:100%;
  height: clamp(54px, 4.2vw, 68px);
  border:0; border-radius:8px;
  background-image: linear-gradient(0deg, #a89373 0%, #baa387 100%);
  color:#111; font-weight:700; font-size: clamp(18px, 1.04vw, 20px);
  cursor:pointer; transition: transform .1s ease, filter .2s ease;
}
#sec_request .main-cf7-wrap input[type="submit"].quickCounsel_btn:hover{ filter:brightness(1.03); }
#sec_request .main-cf7-wrap input[type="submit"].quickCounsel_btn:active{ transform: translateY(1px); }

/* CF7 응답 메시지 */
#sec_request .main-cf7-wrap .wpcf7-response-output{
  margin:12px 0 0; border-radius:6px;
}

#sec_request .wpcf7-response-output { display:none; }

/* ===============================
   반응형
   =============================== */
@media (max-width:1100px){
  #sec_request{ flex-direction:column; align-items:center; }
  #sec_request .left{ width:100%; min-width:0; }
  #sec_request .right{ width:100%; min-width:0; margin-top: clamp(40px, 6vw, 80px); }
  #sec_request .left .step{ display:none !important; }
  #sec_request .left .sec_tit{ margin-bottom: clamp(44px, 6.5vw, 80px); }
}
@media (max-width:980px){
  #sec_request .left .sec_tit{ margin-bottom: clamp(20px, 5vw, 32px) !important; }
  #sec_request .main-cf7-wrap input[type="submit"].quickCounsel_btn{
    height: clamp(55px, 13.5vw, 56px);
  }
}
@media (max-width:750px){
  #sec_request{
    width:100%;
    padding: clamp(80px, 18.67vw, 140px) clamp(17px, 5.33vw, 40px);
    align-items:flex-start; background-position:center;
  }
  #sec_request .main-cf7-wrap input[type="text"],
  #sec_request .main-cf7-wrap input[type="tel"]{
    font-size: clamp(16px, 4vw, 20px);
    height: clamp(56px, 15vw, 66px);
    padding-left: clamp(60px, 14.67vw, 110px);
  }
  #sec_request .main-cf7-wrap .select_wrapper select{
    font-size: clamp(16px, 4vw, 20px);
    height: clamp(56px, 15vw, 66px);
    padding-left: clamp(20px, 8vw, 60px);
    background-position: right clamp(20px, 8vw, 60px) center;
    background-size: clamp(16px, 3.2vw, 24px) clamp(10px, 1.87vw, 14px);
  }
}