/*
 * for supported in all modern browsers
 * Copyright inpleworks, Co.
 * https://xetemplate.com
 */

.xet-layout {
  /* Form */
}

.xet-layout .xet-layout__article .layout__article__container {
  margin: 0 auto;
  max-width: 640px;
}

/* 접수폼 컨테이너 고급화 (Sleek & Sophisticated) */
.xet-layout .contact-form {
  padding: 3rem 2rem;
  border-radius: 16px !important; /* 너무 둥글어 귀여운 느낌 대신 절제되고 슬림한 16px 라운딩 */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #ffffff !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.07) !important; /* 더 깊이있고 소프트한 고품격 그림자 */
  transition: all 0.3s ease;
}

/* 접수폼 헤더 영역 디자인 (AI스러운 가로 밑줄 제거 및 타이포 중심 럭셔리 튜닝) */
.xet-layout .contact-form .contact-form-header {
  text-align: center;
  margin-bottom: 2.8rem;
}
.xet-layout .contact-form .contact-form-header .sub-title {
  display: inline-block;
  font-size: 9px !important; /* 작고 심플하게 극적 축소 */
  font-weight: 700 !important;
  color: var(--theme-color, #005f6a) !important;
  letter-spacing: 0.22em !important; /* 럭셔리 브랜드 자간 레이아웃 */
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  background: transparent !important; /* 채워진 배경 대신 투명 라벨로 변경 */
  border: 1.5px solid rgba(0, 95, 106, 0.22) !important; /* 얇은 테마 경계선 */
  padding: 4px 14px !important;
  border-radius: 30px;
}
.xet-layout .contact-form .contact-form-header h2 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--text-strong-color, #111) !important;
  margin: 0 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.3;
}

/* 입력 필드 레이아웃 */
.xet-layout .contact-form .form__input-group {
  margin-bottom: 1.1rem;
  width: 100%;
}

.xet-layout .contact-form .form__input-group .form__input-group__input {
  position: relative;
  width: 100%;
}

/* 인풋/텍스트에어리어 기본 스타일 */
.xet-layout .contact-form .form__input-group .form__input-group__input input,
.xet-layout .contact-form .form__input-group .form__input-group__input textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 10px !important; /* 캐주얼한 둥글기 대신 정갈하고 모던한 10px로 최적화 */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background-color: #f7f9fa !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222222 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
}

/* placeholder 스타일 튜닝 (자연스러운 회색 톤) */
.xet-layout .contact-form .form__input-group .form__input-group__input input::placeholder,
.xet-layout .contact-form .form__input-group .form__input-group__input textarea::placeholder {
  color: #a0aab0 !important;
  font-weight: 500 !important;
}

.xet-layout .contact-form .form__input-group .form__input-group__input textarea {
  height: 120px !important;
  padding: 16px 16px !important;
  resize: none !important;
}

/* 인풋 포커스(Focus) 효과 (모던 테마 하이라이트 효과) */
.xet-layout .contact-form .form__input-group .form__input-group__input input:focus,
.xet-layout .contact-form .form__input-group .form__input-group__input textarea:focus {
  border-color: var(--theme-color, #005f6a) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(0, 95, 106, 0.1) !important;
  outline: none !important;
}

/* 주소 검색 버튼 */
.xet-layout .contact-form .form__address-group button {
  height: 52px !important;
  border-radius: 10px !important; /* 인풋과 일치시킨 10px 모서리 */
  background-color: #1f2224 !important; /* 세련된 차콜 */
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 18px !important;
  border: none !important;
  cursor: pointer;
  transition: background-color 0.2s;
}
.xet-layout .contact-form .form__address-group button:hover {
  background-color: #111111 !important;
}

/* 에러 메세지 */
.xet-layout .contact-form em.error {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #ff3b30;
  font-weight: 600;
  padding-left: 6px;
}

/* 리드온리(Readonly) 인풋 스타일 */
.xet-layout .contact-form .form__input-group .form__input-group__input input[readonly] {
  background-color: #eef1f2 !important;
  color: #444444 !important;
}

/* 동의 체크박스 영역 */
.xet-layout .contact-form .form__input-group__lavel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600;
  color: #444444;
  margin-top: 1.2rem;
}
.xet-layout .contact-form .form__input-group__lavel input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: var(--theme-color, #005f6a);
  cursor: pointer;
}
.xet-layout .contact-form #js-privacy-button {
  font-size: 12px !important;
  font-weight: 700;
  color: var(--theme-color, #005f6a) !important;
  text-decoration: underline;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
}

/* 약관 내용보기 박스 */
.xet-layout .contact-form .form__input-group__privacy-info {
  flex: 1;
  padding: 1.2rem !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background-color: #f7f9fa !important;
  font-size: 11px !important;
  line-height: 1.6;
  color: #555555 !important;
  max-height: 110px;
  overflow-y: auto;
}

/* 전송 버튼 고급화 (Sleek & Clean) */
.xet-layout .contact-form .form__submit-group {
  margin-top: 1.8rem;
}
.xet-layout .contact-form .form__submit-group button {
  width: 100%;
  height: 56px !important;
  border-radius: 10px !important; /* 버튼 코너를 10px로 깔끔히 정돈 */
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important; /* 영문명에 어울리는 세련된 버튼 자간 */
  background-color: var(--theme-color, #005f6a) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 6px 20px rgba(0, 95, 106, 0.14) !important;
}
.xet-layout .contact-form .form__submit-group button:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 8px 24px rgba(0, 95, 106, 0.22) !important;
  filter: brightness(1.03);
}

/* 다크 모드 스타일 */
body.color_scheme_dark .xet-layout .contact-form {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background-color: #1a1f21 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3) !important;
}
body.color_scheme_dark .xet-layout .contact-form .contact-form-header h2 {
  color: #ffffff !important;
}
body.color_scheme_dark .xet-layout .contact-form .contact-form-header .sub-title {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
body.color_scheme_dark .xet-layout .contact-form .form__input-group .form__input-group__input input,
body.color_scheme_dark .xet-layout .contact-form .form__input-group .form__input-group__input textarea {
  background-color: #121618 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
body.color_scheme_dark .xet-layout .contact-form .form__input-group .form__input-group__input input:focus,
body.color_scheme_dark .xet-layout .contact-form .form__input-group .form__input-group__input textarea:focus {
  border-color: var(--theme-color, #005f6a) !important;
  background-color: #1a1f21 !important;
}
body.color_scheme_dark .xet-layout .contact-form .form__input-group .form__input-group__privacy-info {
  background-color: #121618 !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  color: #aaaaaa !important;
}
body.color_scheme_dark .xet-layout .contact-form .form__input-group .form__input-group__input input[readonly] {
  background-color: #272f31 !important;
  color: #bbbbbb !important;
}
body.color_scheme_dark .xet-layout .contact-form .form__input-group__lavel {
  color: #cccccc;
}

@media (min-width: 1024px) {
  .xet-layout .xet-layout__article .layout__article__container {
    flex-direction: row;
    gap: var(--gap2x);
  }
  .xet-layout .xet-layout__article .layout__article__container > div {
    flex: 1;
  }
  .xet-layout .contact-form {
    padding: 3.5rem 3rem;
  }
}