/* [Step 1] Pardot Layout Template > "Layout" Tab (inside <style>) */

/* Load Font */
@import url("https://cdn.jsdelivr.net/npm/pretendard@latest/dist/web/static/pretendard-jp.css");

/* 스크롤바 숨김 (iframe 내부) */
html {
  overflow: hidden;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE */
}
html::-webkit-scrollbar {
  display: none;               /* Chrome, Safari */
}

/* =========================================
   1. Base Reset & Layout (파닷 기본 CSS 완벽 차단)
   ========================================= */
form.form {
    display: flex !important;
    flex-wrap: wrap !important;         
    gap: 0 !important;                  
    padding: 0 !important; 
    margin: 0 auto !important;
    max-width: 720px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    font-family: "Pretendard JP", "Pretendard", "Inter", sans-serif !important; 
    clear: both !important;
}

/* 2. 파닷 폼 필드 래퍼 강제 블록화 (에러 시 깨짐 방지 핵심) */
form.form p.form-field,
form.form p.submit,
form.form p.errors {
    display: block !important;
    width: 100% !important;
    flex: 0 0 100% !important;          /* flexbox 환경에서 full-width 보장 */
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 5px !important;
    float: none !important;
}

/* 3. 2-Column Layout — flexbox 환경 대응 */
form.form p.form-col-half,
form.form p.form-col-half.errors {
    width: 50% !important;
    flex: 0 0 50% !important;           /* flexbox에서 width 대신 flex-basis로 제어 */
    max-width: 50% !important;
}

/* Hidden fields 숨김 처리 */
form.form p.form-field.hidden {
    display: none !important;
}

/* 4. Typography (Labels) */
form.form label.field-label { 
  display: block !important; 
  font-size: 13px !important; 
  font-weight: 700 !important; 
  margin-bottom: 8px !important; 
  color: #111111 !important; 
  line-height: 1.4 !important; 
  text-align: left !important;
  width: 100% !important;
  float: none !important;
}

/* Description Text */
form.form span.description,
form.form .description {
  display: block !important;
  font-size: 10px !important;
  color: #7B87A0 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
  float: none !important;
  width: 100% !important;
}

/* =========================================
   5. Inputs - Strong Reset
   ========================================= */
form.form input.text, 
form.form textarea.standard, 
form.form select,
form.form input[type="text"], 
form.form input[type="email"], 
form.form input[type="tel"] {
  display: block !important;
  box-sizing: border-box !important; 
  width: 100% !important; 
  height: 46px !important;
  background-color: #F2F4F8 !important; 
  border: 0px solid #F2F4F8 !important;
  border-radius: 10px !important; 
  padding: 0 14px !important;
  font-size: 14px !important; 
  font-family: inherit !important;
  color: #333 !important;
  transition: all 0.2s ease !important; 
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  box-shadow: none !important; 
  margin: 0 !important;
  float: none !important;
}

/* Select Specifics */
form.form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ADB5C5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 14px center !important; 
  background-repeat: no-repeat !important; 
  background-size: 1.5em 1.5em !important; 
  padding-right: 34px !important;
  color: #ADB5C5 !important;
}
form.form select:not(:invalid) { color: #333 !important; }

form.form textarea.standard { height: auto !important; padding: 14px !important; resize: vertical !important; }
form.form input::placeholder, form.form textarea::placeholder { color: #ADB5C5 !important; opacity: 1 !important; }

/* Focus State */
form.form input.text:focus, form.form textarea.standard:focus, form.form select:focus,
form.form input[type="text"]:focus, form.form input[type="email"]:focus {
  outline: none !important; 
  background-color: #EBEEF3 !important; 
  border-color: #EBEEF3 !important; 
  box-shadow: 0 0 0 0px #EBEEF300 !important;
}

/* =========================================
   6. Radio & Checkbox (파닷 강제 여백 및 float 초기화)
   ========================================= */
form.form span.value { 
  display: flex !important; 
  flex-direction: column !important; 
  gap: 10px !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  float: none !important;
  width: 100% !important;
}
form.form span.value > span {
  display: flex !important; 
  flex-direction: row !important; 
  align-items: center !important; 
  width: 100% !important; 
  height: auto !important; 
  gap: 8px !important; 
  margin: 0 !important; 
  padding: 0 !important;
}
form.form span.value input[type="radio"], 
form.form span.value input[type="checkbox"] {
  width: 16px !important; 
  height: 16px !important; 
  min-width: 16px !important; 
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important; 
  padding: 0 !important; 
  accent-color: #0050FF !important; 
  cursor: pointer !important; 
  flex-shrink: 0 !important; 
  position: static !important; 
  appearance: auto !important; -webkit-appearance: auto !important;
  border: 1px solid #ccc !important;
  float: none !important;
}
form.form label.inline {
  display: inline-block !important; 
  font-size: 12px !important;
  font-weight: 500 !important; 
  color: #343F55 !important;
  margin: 0 !important; 
  padding: 0 !important; 
  cursor: pointer !important; 
  line-height: 1.4 !important; 
  width: auto !important;
  float: none !important;
  white-space: normal !important; /* 긴 텍스트 자동 줄바꿈 보장 */
}

/* =========================================
   7. Submit Button (가장 강력한 타겟팅)
   ========================================= */
form.form p.submit { 
  margin-top: 10px !important; 
  padding: 0 5px !important; 
  text-align: center !important;
}
form.form p.submit input[type="submit"],
form.form input.submitter,
form.form .submit input {
  display: block !important; 
  width: 100% !important; 
  height: 50px !important; 
  background-color: #0050FF !important; 
  color: #FFFFFF !important;
  border: none !important; 
  border-radius: 10px !important; 
  font-size: 14px !important;
  font-weight: 600 !important; 
  cursor: pointer !important; 
  transition: all 0.2s !important; 
  -webkit-appearance: none !important; appearance: none !important;
  font-family: inherit !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  box-sizing: border-box !important;
  float: none !important;
}
form.form p.submit input[type="submit"]:hover,
form.form input.submitter:hover { 
  filter: brightness(110%) !important; 
  transform: translateY(-1px) !important; 
}

/* =========================================
   8. 파닷 에러 렌더링 강제 교정 (핵심 리셋) 
   ========================================= */
form.form p.errors label.field-label {
    display: block !important;
    width: 100% !important;
    color: #E53E3E !important; 
}

form.form p.error, form.form span.error { 
    display: block !important; 
    width: 100% !important;
    color: #E53E3E !important; 
    font-size: 12px !important; 
    font-weight: 500 !important; 
    margin-top: 6px !important; 
    margin-left: 0 !important;
    float: none !important;
    clear: both !important;
}

/* 에러 발생한 인풋 박스 스타일 */
form.form p.errors input.text, 
form.form p.errors input[type="text"], 
form.form p.errors input[type="email"],
form.form input.text.error, 
form.form input[type="text"].error, 
form.form input[type="email"].error { 
    border-color: #E53E3E !important; 
    background-color: #FEF2F2 !important; 
}

/* 파닷 글로벌 에러 메시지(Please correct...) 상단 마진 */
form.form p.errors {
    margin-bottom: 12px !important; 
}

/* Mobile Breakpoint: 550px 이하 처리 (iframe 실제 렌더링 너비 기준) */
@media only screen and (max-width: 550px) {
  form.form p.form-col-half,
  form.form p.form-col-half.errors {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* JS 토글용 숨김 클래스 — !important로 form-field 기본값 덮어쓰기 */
form.form p.form-field.js-hidden {
  display: none !important;
}

/* purpose-form 기본 숨김 (기타 선택 시에만 표시) */
form.form p.form-field.purpose-form {
  display: none !important;
}
form.form p.form-field.purpose-form.js-visible {
  display: block !important;
}

/* submit 버튼 로딩 상태 */
form.form p.submit input[type="submit"].is-loading {
  background-color: #ADB5C5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: none !important;
  transform: none !important;
}


/* =========================================
   [Pardot 추가] Framer Form Studio 미지원 영역
   ========================================= */

/* 9. Dependent Field (조건부 표시 필드)
   Pardot JS 동작:
   - 숨길 때: style="display: none;" 또는 style="/* display: none; * /"
   - 보여줄 때: style="display:block" 또는 style="display: block"
   CSS !important가 인라인을 덮으므로 attribute selector로 분기 */
form.form p.form-field.dependentField {
  display: none !important;
}
form.form p.form-field.dependentField[style*="display:block"],
form.form p.form-field.dependentField[style*="display: block"] {
  display: block !important;
}

/* 10. 동의 체크박스 토글 버튼 */
button.agree-content-toggle {
  font-family: "Pretendard", "Nanum Barun Gothic", Helvetica, Arial, Dotum, "돋움", "Apple SD Gothic Neo", sans-serif;
  border: none;
  background-color: transparent !important;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  padding: 0;
  color: #343F55;
  line-height: 1.4;
}

/* 11. 동의 아코디언 박스 — .agree-content (CSS 기준 클래스) */
.agree-content {
  display: none;
}
.agree-content.open {
  display: block;
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid #E2E6ED;
  border-radius: 8px;
  background-color: #FAFBFC;
}
.agree-content-list        { margin: 0; padding: 0; list-style: none; }
.agree-content-title       { font-size: 13px; font-weight: 600; color: #333; margin: 8px 0 2px 0; }
.agree-content-title:first-child { margin-top: 0; }
.agree-content-description { font-size: 12px; color: #555; margin: 0 0 0 8px; padding: 0; }
.agree-content-footnote    { font-size: 11px; color: #888; margin: 8px 0 0 0; padding: 0; }