@charset "UTF-8";
/*
 * 마케터비 레이아웃 — 공통 폼 (모던 재작성 2026-08-21)
 * ====================================================================================================
 * [이 파일이 스타일링하는 곳]
 *   · 게시판 글쓰기 / 댓글 / 검색 폼 (Rhymix 기본 스킨이 .xet-form 안에 들어온다)
 *   · 상담폼 3종 + 퀵상담 바 (이쪽은 각자 컴포넌트 CSS 가 위에 덧칠한다)
 *
 * ★★ 특이도 계약(specificity contract) — 이 파일을 고치기 전에 반드시 읽을 것 ★★
 * ----------------------------------------------------------------------------------------------------
 * 예전 이 파일은 :not() 을 5번 이어 붙여 입력칸 기본 규칙의 특이도가 (0,6,1) 이었다.
 * 그 (0,6,1) 때문에 .reserve-field__input (0,1,0) / .quickcs-field (0,1,0) 같은 컴포넌트 스타일이
 * 단 한 번도 적용되지 못했고, 두 컴포넌트 파일은 똑같은 :not() 사슬을 복제해 (0,7,1) 로 이기는
 * 곡예를 해야 했다. 그래서 이번에 :not() 사슬을 :where() 안으로 옮겼다.
 *   → :where() 는 "특이도 0" 이 규격이다. 걸러내는 능력은 그대로 두고 점수만 0 으로 만든다.
 *
 * [새 특이도 계약 — 이 규칙에서 벗어나지 말 것]
 *
 *   1단계 · 기본 치수/색            (0,1,1)   .xet-form input:where(:not(...)) / .xet-form select / textarea
 *   2단계 · 상태(비활성·오류·포커스) (0,2,1)   .xet-form input:where(...):focus / .xet-form input[readonly] 등
 *   3단계 · 체크박스·라디오         (0,2,1)~(0,2,3)  .xet-form input[type=checkbox] + label::before 등
 *
 *   ┌ 컴포넌트가 이기려면 ──────────────────────────────────────────────────────────────────────┐
 *   │ 1단계를 덮어쓰려면  (0,2,0) 이상   예) .reserve-form .reserve-field__input                 │
 *   │ 2단계를 덮어쓰려면  (0,3,0) 이상   예) .reserve-form .reserve-field__input[readonly]       │
 *   │ → !important 도 :not() 복제도 필요 없다. 클래스 두세 개면 항상 이긴다.                     │
 *   └──────────────────────────────────────────────────────────────────────────────────────────┘
 *
 * [!important 정책]
 *   원칙적으로 쓰지 않는다. 위 계약만 지키면 컴포넌트가 항상 이기므로 필요가 없다.
 *   이 파일에 남은 !important 는 0 건이다. 새로 붙이고 싶어지는 순간이 오면
 *   "계약을 어긴 셀렉터를 쓰고 있는 것은 아닌지" 부터 의심할 것.
 *
 * [다크모드]
 *   2026-08-21 발주자 확정으로 이 테마는 항상 라이트다.
 *   예전 이 파일에 있던 다크 전용 규칙 25개(셀렉터 38개)를 삭제했고, !important 35개는 0 이 됐다.
 * ==================================================================================================== */

/* ====================================================================================================
   0. 플레이스홀더 (전역)
   ==================================================================================================== */
::placeholder {
  color: var(--muted-color);
  opacity: 1; /* Firefox 는 기본 opacity 가 1 이 아니다 */
}

/* ====================================================================================================
   1단계 — 입력 요소 기본            특이도 (0,1,1)
   ----------------------------------------------------------------------------------------------------
   :where() 안의 :not() 사슬은 "체크박스·라디오·버튼류·파일은 제외" 라는 뜻만 갖고 점수는 0 이다.
   ==================================================================================================== */
.xet-form input:where(:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="file"])) {
  vertical-align: top;
  width: 100%;
  height: var(--input-height);
  padding: 0 16px;
  font-size: inherit;
  color: var(--text-strong-color);
  background: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-sm);
  outline: 0; /* 포커스 표시는 아래 :focus-visible 과 border-color 로 준다 */
}

.xet-form textarea {
  width: 100%;
  height: 120px;
  padding: 16px;
  font-size: inherit;
  color: var(--text-strong-color);
  background: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.xet-form select {
  position: relative;
  width: 100%;
  height: var(--input-height);
  margin: 0;
  padding: 0 44px 0 16px;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  background-color: var(--input-bg-color);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='rgba(119,119,119,1)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: right 16px top 50%;
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-sm);
}

/* 파일 선택 */
.xet-form input[type="file"] {
  width: 100%;
  height: var(--input-height);
  padding: 0;
  overflow: hidden;
  font-size: inherit;
  cursor: pointer;
  color: var(--muted-color);
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-sm);
  outline: 0;
  appearance: none;
}
.xet-form input[type="file"]::file-selector-button {
  height: var(--input-height);
  margin-top: 0;
  padding: 0 16px;
  font-size: inherit;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  color: var(--muted-color);
  background: var(--input-bg-color);
  border: 0;
  border-right: 1px solid var(--input-border-color);
}
/* 파일 인풋 뒤에 붙는 대체 라벨(Rhymix 기본 스킨)은 쓰지 않는다 */
.xet-form input[type="file"] + label {
  display: none;
}

/* 입력칸 옆에 붙는 버튼의 높이 맞춤 (.input-md / .select-md 는 기본 높이와 같으므로 별도 규칙 불필요) */
.xet-form input:where(:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"])) ~ .xet-btn,
.xet-form select ~ .xet-btn {
  height: var(--input-height);
  border-radius: var(--radius-sm);
}

/* 크기 변형 (Rhymix 스킨이 붙이는 유틸) */
.xet-form select.select-xs {
  height: 28px;
}

/* 자동완성 배경 강제 해제 — 크롬이 넣는 노란 배경이 테마와 맞지 않는다 */
.xet-form input:-webkit-autofill,
.xet-form input:-webkit-autofill:hover,
.xet-form input:-webkit-autofill:focus,
.xet-form input:-webkit-autofill:active,
.xet-form input:autofill,
.xet-form input:autofill:hover,
.xet-form input:autofill:focus,
.xet-form input:autofill:active {
  -webkit-text-fill-color: var(--text-strong-color);
  box-shadow: 0 0 0 1000px var(--input-bg-color) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ====================================================================================================
   2단계 — 상태            특이도 (0,2,1)
   ----------------------------------------------------------------------------------------------------
   순서에 의미가 있다: 비활성 → 오류 → 포커스.
   같은 (0,2,1) 끼리는 나중에 선언된 쪽이 이기므로 "포커스가 오류 표시를 덮는다".
   (예전 파일도 focus(0,4,1)!important 가 error(0,2,1)!important 를 이겨 같은 결과였다 — 동작 보존)
   ==================================================================================================== */

/* 비활성 / 읽기전용 */
.xet-form input[disabled],
.xet-form input[readonly],
.xet-form select[disabled],
.xet-form select[readonly],
.xet-form textarea[disabled],
.xet-form textarea[readonly] {
  cursor: not-allowed;
  opacity: 1;
  color: var(--disabled-color);
  background-color: var(--disabled-bg-color);
  border-color: var(--input-border-color);
  box-shadow: none;
  text-shadow: none;
}

/* 검증 실패 (jquery.validate 가 .error 를 붙인다) */
.xet-form input.error,
.xet-form select.error,
.xet-form textarea.error {
  color: var(--text-strong-color);
  border-color: var(--red-color);
}
.xet-form input.error::placeholder {
  color: var(--muted-color);
}

/* 포커스 */
.xet-form input:where(:not([type="button"], [type="submit"], [type="reset"])):focus,
.xet-form select:focus,
.xet-form textarea:focus {
  color: var(--text-strong-color);
  background-color: var(--input-bg-color);
  border-color: var(--focus-border-color);
}

/* 키보드 이동 시에만 나오는 링. 위에서 outline:0 을 준 것을 접근성 측면에서 되살린다. */
.xet-form input:focus-visible,
.xet-form select:focus-visible,
.xet-form textarea:focus-visible {
  outline: 2px solid var(--focus-border-color);
  outline-offset: 1px;
}

/* ====================================================================================================
   3단계 — 체크박스 / 라디오
   ----------------------------------------------------------------------------------------------------
   네이티브 컨트롤은 화면에서 숨기고 바로 뒤 <label> 의 가상요소로 그린다.
   ※ 이 구조를 쓰지 않고 라벨 "안"에 체크박스를 넣은 경우(.xet-form label > input)는 맨 아래에서 되돌린다.
   ==================================================================================================== */
.xet-form input[type="radio"],
.xet-form input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  opacity: 0;
  vertical-align: top;
}

.xet-form input[type="radio"] + label,
.xet-form input[type="checkbox"] + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 26px;
  white-space: nowrap;
  cursor: pointer;
}
.xet-form input[type="radio"] + label {
  margin-right: var(--gap);
}

/* ---- 라디오 ---- */
.xet-form input[type="radio"] + label::before,
.xet-form input[type="radio"] + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 50%;
}
.xet-form input[type="radio"] + label::before {
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
}
.xet-form input[type="radio"] + label::after {
  left: 5px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) scale(0);
  background: var(--theme-color);
}
.xet-form input[type="radio"]:checked + label::after {
  transform: translateY(-50%) scale(1);
}

/* ---- 체크박스 ---- */
.xet-form input[type="checkbox"] + label::before,
.xet-form input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
}
.xet-form input[type="checkbox"] + label::before {
  transform: translateY(-50%);
  background: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
}
.xet-form input[type="checkbox"] + label::after {
  transform: translateY(-50%) scale(0);
  background: var(--theme-color) url("./icons/check.png") no-repeat center;
  background-size: 14px;
}
.xet-form input[type="checkbox"]:checked + label::after {
  transform: translateY(-50%) scale(1);
}
.xet-form input[type="checkbox"]:checked + label::before {
  border-color: var(--theme-color);
}

/* ---- 토글 스위치 (.checkbox-style) ---- */
/* 위 체크박스 규칙과 특이도가 같다 — `.xet-form .checkbox-style input + label::before` (0,2,3) vs
   `.xet-form input[type=checkbox] + label::before` (0,2,3). 같은 파일에서 이쪽이 "뒤에" 선언되므로
   선언 순서로 이긴다. 예전에는 이걸 !important 로 눌렀지만 순서만 지키면 필요 없다.
   ★ 이 블록을 위쪽으로 옮기면 토글이 네모 체크박스로 되돌아간다. 반드시 체크박스 규칙 뒤에 둘 것. */
.xet-form .checkbox-style {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: #f1f1f1;
  cursor: pointer;
}
.xet-form .checkbox-style input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.xet-form .checkbox-style input + label {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
.xet-form .checkbox-style input + label::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 10px;
  transform: none;
  cursor: pointer;
  transition: all 0.2s;
}
.xet-form .checkbox-style input + label::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: none;
  background: #fff;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s;
}
.xet-form .checkbox-style input:checked + label::after {
  left: 20px;
}
.xet-form .checkbox-style input:checked + label::before {
  background: var(--theme-color);
}

/* ---- 라벨이 컨트롤을 감싼 구조(label > input)는 네이티브 체크박스를 그대로 보여준다 ----
   위 "숨김" 규칙은 (0,2,1) 이고 이 규칙은 (0,2,2) 라 요소 칸에서 이긴다. !important 불필요.
   ※ 상담폼(.reserve-form / .quickcs-form)은 이 규칙보다 높은 (0,3,1) 로 다시 숨기고 직접 그린다. */
.xet-form label {
  display: inline-flex;
  align-items: center;
}
.xet-form label input[type="radio"],
.xet-form label input[type="checkbox"] {
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 4px 0 0;
  overflow: visible;
  opacity: 1;
  border: 1px solid var(--input-border-color);
}

/* ====================================================================================================
   4. 폼 레이아웃 (.form__*)  — 클래스 기반이라 특이도 문제 없음
   ==================================================================================================== */
form {
  margin: 0;
  padding: 0;
}
form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
form fieldset legend {
  color: var(--text-base-color);
}

.form__input-group {
  display: flex;
  flex-direction: column;
}
.form__input-group + .form__input-group {
  margin-top: var(--gap);
}
.form__input-group__label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: var(--fw-medium);
  color: var(--text-strong-color);
}
/* 필수 표시 점 */
.form__input-group__label em {
  display: block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  overflow: hidden;
  font-size: 0;
  border-radius: 50%;
  background-color: var(--red-color);
}
.form__input-group__input {
  position: relative;
  flex: 1;
  color: var(--text-strong-color);
}
/* 입력칸 안쪽 오른쪽에 겹쳐 놓는 보조 버튼 (중복확인 등) */
.form__input-group__input input + button,
.form__input-group__input input + input[type="button"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: var(--input-height);
  padding: 0 16px;
  cursor: pointer;
  color: var(--muted-color);
  background-color: transparent;
  border: 0;
  border-left: 1px solid var(--input-border-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form__input-group .help-desc {
  color: var(--text-base-color);
}
.form__input-btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gap);
}
.form__submit-group {
  margin-top: var(--gap);
}

/* 가로형 폼 */
form.form-horizontal .form__input-group {
  flex-direction: row;
}
form.form-horizontal .form__input-group .form__input-group__label {
  width: 100px;
  margin-bottom: 0;
}
/* .xet-form select 의 width:100% (0,1,1) 을 (0,3,2) 로 이긴다 */
form.form-horizontal .form__input-group .form__input-group__input select {
  width: auto;
}

/* LG — 데스크탑에서는 라벨을 왼쪽에 세운다 */
@media (min-width: 1024px) {
  form:not(.form-horizontal) .form__input-group {
    flex-direction: row;
    align-items: center;
  }
  form:not(.form-horizontal) .form__input-group .form__input-group__label {
    width: 180px;
    margin-bottom: 0;
  }
}