
[data-hsfc-id="Renderer"] {
  --hsf-global__font-family: Freesentation, sans-serif !important;
  --hsf-global__font-size: 2rem !important;  
  --hsf-default-background__padding: 40px !important;
  --hsf-default-background__background-color: rgba(250, 250, 250, 1.0) !important;
  --hsf-default-background__border-style: none !important;
  --hsf-default-background__border-color: rgba(250, 250, 250, 1.0) !important;
  --hsf-default-background__border-radius: 0.0px 0.0px 0.0px 0.0px !important;
  --hsf-default-progressbar-progressLine__background-color: rgba(0, 220, 132, 1.0) !important;
  /* --hsf-default-field-input__background-color: rgba(250, 250, 250, 1.0) !important; */
  --hsf-default-field-label__color: rgba(0, 0, 0, 1.0) !important;
  --hsf-default-field-input__background-color: transparent !important;
  --hsf-default-field-input__border-style: none !important;
  --hsf-default-field-checkbox__border-style: solid !important;
  --hsf-default-field-textarea__background-color: #FFF !important;
  --hsf-default-field-textarea__border-color: #EEEEEE !important;
  --hsf-default-field-checkbox__padding: 1rem !important;

}

@media (min-width: 1280px) {
  [data-hsfc-id="Renderer"] {
    --hsf-default-background__padding: 40px 104px !important; /* 데스크탑에서 원하는 값으로 변경 */
  }
}

.custom_hsform_inner{
  padding:9.6rem 0 12.4rem !important;
}

.custom_hsform .hsfc-Step__Content{
  min-height: 600px;
  background-color: #fff !important;
}

.custom_hsform .hsfc-Step .hsfc-Step__Banner {
  background-color: #FAFAFA !important;
}

/* 1. 모든 상태에서 기본 테두리와 외곽선 제거 */
.custom_hsform .hsfc-TextInput,
.custom_hsform .hsfc-TextInput:hover,
.custom_hsform .hsfc-TextInput:focus,
.custom_hsform .hsfc-DropdownInput--active {
  border: none !important; /* 전체 테두리 제거 */
  border-bottom: 1px solid #e0e0e0 !important; /* 기존 언더라인 유지 */
  outline: none !important; /* 클릭 시 브라우저 기본 파란 선 제거 */
  box-shadow: none !important; /* 포커스 시 생기는 그림자 제거 */
}

.custom_hsform .hsfc-TextInput {
  border-bottom: 1px solid #e0e0e0 !important;
}

.custom_hsform .hsfc-TextField input::placeholder,
.custom_hsform .hsfc-PhoneField input::placeholder,
.custom_hsform .hsfc-EmailField input::placeholder,
.custom_hsform .hsfc-DropdownInput input::placeholder,
.custom_hsform .hsfc-TextareaInput::placeholder{
  color: #CCCCCC !important;
}


.custom_hsform .hsfc-DropdownOptions__Search {
    padding: 0 !important;
}

.custom_hsform .hsfc-DropdownOptions__List {
    background: #fafafa !important;
}

.custom_hsform li.hsfc-DropdownOptions__List__ListItem{
  /* padding:12px 24px !important; */
  padding: .8rem !important;
  /* color:#616161 !important; */
  font-size:2rem !important;
  line-height:1 !important;
  font-weight:400 !important;
  background:#FAFAFA !important;
}
.custom_hsform li.hsfc-DropdownOptions__List__ListItem:hover{
  color:#fff !important;
  background:#000 !important;
}

.custom_hsform label {
  font-size: 2rem !important;
  font-weight: 500 !important;
}

/*
.custom_hsform .hsfc-Button{
  padding-top:58px !important;
  display:flex !important;
  justify-content:center !important;
}
*/

{# ######################################################################### #}
{# ###########################   typography   ############################## #}
{# ######################################################################### #}
.custom_hsform h2.hsfc-Heading{
  /*
  padding-bottom:72px !important;
  padding-top: 82px !important;
  */
  font-size:3.2rem !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  color:#000 !important;
}
/*
.custom_hsform .hsfc-Row:first-of-type h2.hsfc-Heading{
  padding-top: 0 !important;
}
*/

/*
.custom_hsform .hsfc-PhoneField .hsfc-PhoneInput,
.custom_hsform .hsfc-DropdownInput{
  width:100% !important;
  max-width:400px !important;
}
*/
.custom_hsform label > span{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.custom_hsform .hsfc-ErrorAlert{
  width:100%;
}
.custom_hsform .hsfc-RichText{
  font-size:24px !important;
  line-height:36px !important;
  color:#9E9E9E !important;
}

[data-hsfc-id="Renderer"] .hsfc-FieldLabel__RequiredIndicator {
  color:#000 !important;   
  /* display: none !important; */
}

[data-hsfc-id=Renderer] .hsfc-CheckboxField label a {
  border-bottom: 1px solid #000;
}

[data-hsfc-id=Renderer] .hsfc-ErrorAlert {
  font-size: max(14px, 1.4rem) !important;
}

/******************** NavigationRow 버튼 양쪽 정렬 Start ************************/

.hsfc-NavigationRow__Buttons {
  display: flex !important;
  justify-content: space-between !important; /* 요소가 하나면 오른쪽, 둘이면 양끝 정렬 */
  width: 100% !important;
  gap: 10px;
}

.hsfc-NavigationRow__Buttons:not(:has(button:nth-child(2))) {
  justify-content: flex-end !important;
}

/******************** NavigationRow 버튼 양쪽 정렬 End ************************/


.custom_hsform .hsfc-Button{
  font-size:2rem !important;
  font-weight:600 !important;
  color:#000 !important;
  line-height:1 !important;
  padding:11px 40px !important;
  border-radius: 0 !important;
  background:#eee !important;
  cursor:pointer !important;
  transition:all 0.3s ease;
}

.custom_hsform .hsfc-Button:hover{
  background:#000 !important;
  color:#fff !important;
}

.custom_hsform .hsfc-ProgressBar__Text {
  margin-bottom: 11px !important;
  text-align: center !important;
}

.custom_hsform .hsfc-ProgressBar__Progress {
  border-radius: 0px !important;
}

.custom_hsform .hsfc-ProgressBar__Progress>div {
  border-radius: 0px !important;
}

/******************** Step content 레아아웃 조정 Start ************************/

/* 1. 부모 컨테이너 설정 */
.custom_hsform .hsfc-Step__Content {
  display: flex !important;
  flex-direction: column !important;
}

/* 2. 프로그래스 바 (상단 고정) */
.custom_hsform .hsfc-Step__Content > .hsfc-Row:has(.hsfc-ProgressBar) {
  order: -1 !important;        /* 시각적으로 맨 위로 보냄 */
  margin-top: 12px !important;
  margin-bottom: 71px !important; 
  padding: 0 !important;
}

/* 3. 첫 번째 Row (타이틀): 이제 위쪽 마진을 auto로 주어 중앙으로 밀기 */
/*
.custom_hsform .hsfc-Step__Content > .hsfc-Row:first-child {
  margin-top: auto !important;   
  margin-bottom: 0 !important;
}
*/

/* 4. 중앙 요소들 (타이틀 이후 ~ 버튼 전까지) */
.custom_hsform .hsfc-Step__Content > .hsfc-Row:not(:first-child):not(:has(.hsfc-ProgressBar)):not([data-hsfc-id="NavigationRow"]) {
  flex-grow: 0 !important;
}

/* 5. 네비게이션 버튼 (하단 고정) */
.custom_hsform .hsfc-NavigationRow {
  margin-top: auto !important;   /* 중간 요소들 아래 공간을 다 채워 버튼을 바닥으로 밀어냄 */
  padding-top: 20px;
}

/* 버튼 내부 간격 */
.custom_hsform .hsfc-NavigationRow__Buttons {
  margin-top: 10px !important;
}

/* 개인정보 보호 필드 마지막 Row 제거 (동일) */
.hsfc-DataPrivacyField > .hsfc-Row:last-child {
  display: none !important;
}

/******************** Step content 레아아웃 조정 End ************************/



/* 데이터 프라이버시 필드 전체의 하단 여백 제거 */

/********** Data Privacy 불필요한 콘텐츠 및 여백 제거 Start *****************/
.hsfc-DataPrivacyField[id$="2065502042909"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 데이터 프라이버시 필드 내의 이용 약관 타이틀(Row 0) 숨기기 */
.hsfc-DataPrivacyField [id$="2065502042909-ic-r0"] {
  display: none !important;
}

.hsfc-DataPrivacyField [id$="2065502042909-ic-r1"] {
  margin-bottom: 0 !important;
}

/* 데이터 프라이버시 필드 내의 하단 빈 공간(Row 2) 숨기기 */
.hsfc-DataPrivacyField [id$="2065502042909-ic-r2"] {
  display: none !important;
  margin-bottom: 0 !important;
}
/***************** Data Privacy 불필요한 콘텐츠 및 여백 제거 End *****************/

@media (min-width: 1280px) {
  /* 1. 이메일, 이름, 연락처 필드 컨테이너 타겟팅 (ID 뒷자리 기준) */
  [id$="1851501589393"], 
  [id$="3213059853576"], 
  [id$="3490988740619"] {
    display: flex !important;
    flex-direction: row !important; /* 가로 정렬 */
    align-items: center !important; /* 라벨과 인풋 높이 중앙 맞춤 */
    /* gap: 20px !important; */           /* 라벨과 인풋 사이 간격 */
    /* margin-bottom: 10px !important; */ /* 필드 간 간격 축소 (높이 절약) */
    flex-wrap: wrap !important;     /* 에러 메시지 발생 시 아래로 떨어짐 방지용 */
  }

  /* 2. 라벨 너비 고정 (세 필드의 시작점을 일직선으로 맞춤) */
  [id$="1851501589393"] .hsfc-FieldLabel,
  [id$="3213059853576"] .hsfc-FieldLabel,
  [id$="3490988740619"] .hsfc-FieldLabel {
    flex: 0 0 100px !important;    /* 라벨 가로 길이를 100px로 고정 */
    margin-bottom: 0 !important;   /* 기존 아래 여백 제거 */
    text-align: left !important;
    white-space: nowrap !important;
  }

  /* 3. 인풋 박스가 남은 가로 공간을 모두 차지하도록 설정 */
  [id$="1851501589393"] .hsfc-TextInput,
  [id$="3213059853576"] .hsfc-TextInput,
  [id$="3490988740619"] .hsfc-TextInput {
    flex: 1 !important;
    width: auto !important;
  }

  /* 4. 에러 메시지 위치 조정 (에러 발생 시 인풋 아래로 정렬) */
  [id$="1851501589393"] .hsfc-ErrorAlert,
  [id$="3213059853576"] .hsfc-ErrorAlert,
  [id$="3490988740619"] .hsfc-ErrorAlert {
    flex: 0 0 100% !important;
  }
}
