@charset "UTF-8";
/*
* Copyright 마케터비
* 상담·접수 페이지 전용 스타일
* --------------------------------------------------------------------------------------------------
* 이 파일이 로드되는 곳
*   include/page_contact/content_main.html  메인 접수폼
*   include/page_contact/content.html       서브 상담폼
*
* [범위] 폼 "바깥 틀"만 담당한다.
*   입력창 / 라벨 / 체크박스 / 개인정보 안내 / 제출 버튼 등 폼 컴포넌트(.reserve-*)는
*   방문예약 모달과 공용이라 전부 css/reserve-modal.css 에 있다. 여기에 중복 정의하지 말 것.
*
* [2026-08-19 정리 내역]
*   · 파일 인코딩을 EUC-KR → UTF-8 로 변환. (한글 주석이 페이지에서 깨져 보이던 원인)
*   · .contact-form 의 box-shadow: 0 20px 20px rgba(0,0,0,.1) 제거.
*     들어올린 카드 대신 헤어라인 + 여백으로 구분하는 현재 디자인 방향과 정면으로 충돌했다.
*   · 죽은 규칙 일괄 삭제 — 마크업이 .reserve-* 체계로 바뀌면서 대응 요소가 사라진 것들:
*       .date-input-wrap / .calendar-icon / .date-clear-btn   → .reserve-date-* 로 대체됨
*       .form__input-group__privacy-info                      → .reserve-privacy 로 대체됨
*       select[name="time"].is-disabled / .is-enabled         → 클래스를 붙이는 JS 가 없음
*   · 전역 셀렉터 input.has-value 제거.
*     .reserve-field__input(특이도 0,1,0) 을 이기고 border-color:#4f46e5(인디고) 를 강제해
*     날짜를 고르면 테마색이 아닌 남보라 테두리가 나왔다. 게다가 이 파일은 메인 페이지에서
*     전역 로드되므로 같은 페이지의 방문예약 모달까지 물들였다(서브 페이지에서는 안 그래서
*     같은 컴포넌트가 페이지마다 다르게 보이는 원인이었다).
*/

/* ====================================================================================================
   페이지 컨테이너
   ==================================================================================================== */
.xet-layout .xet-layout__article .layout__article__container {
  margin: 0 auto;
  max-width: 640px;
}

/* ====================================================================================================
   폼 틀
   ----------------------------------------------------------------------------------------------------
   .reserve-form-page  = 제목/부제 + 폼 전체를 감싸는 블록  ← 여기에 테두리를 준다
   .contact-form       = <form> 자체                        ← 테두리 없이 내용만
   (예전에는 form 에 테두리를 줘서 부제가 틀 밖으로 밀려나 있었다)
   ==================================================================================================== */
.xet-layout .reserve-form-page {
  padding: var(--gap2x) var(--gap);
  background: var(--content-bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
}

/* 페이지 폼은 모달과 달리 상단 손잡이 여백이 필요 없다 */
.xet-layout .reserve-form-page .reserve-modal__header {
  margin-top: 0;
}

/* form 자체는 틀을 갖지 않는다 (예전 카드 그림자 제거) */
.xet-layout .contact-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

/* [readonly 입력창(날짜칸)에 관하여 — 여기에 다시 쓰지 말 것]
   예전에는 이 파일에 아래 우회책이 있었다.
     .xet-layout .contact-form input[readonly] { background-color/color: ... !important }
   문제가 둘이었다.
     ① 이 파일은 메인폼·서브폼에서만 로드되고 셀렉터도 .contact-form 에 묶여 있어
        같은 컴포넌트인 방문예약 모달(#js-reserve-form)은 회색으로 남았다.
        → 같은 날짜칸이 페이지마다 다르게 보였다.
     ② cursor:not-allowed 와 box-shadow:none(포커스 링 사망)은 손대지 못해 절반만 고쳐진 상태였다.
   지금은 css/reserve-modal.css 의 `.reserve-form .reserve-field__input[readonly]` 계열 규칙이
   세 폼을 한꺼번에 처리한다. 중복 정의하면 다시 갈라지므로 여기에는 두지 않는다. */

/* MID 미입력 경고 */
.xet-layout .xet-layout__article .layout__article__container .message.error {
  margin-bottom: var(--gap);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  border-radius: var(--radius-xs);
}

/* ====================================================================================================
   다크모드
   현재 js/header.js 에서 라이트를 강제하고 있어 적용되지 않지만, 복구 대비로 유지한다. (삭제 금지)
   ==================================================================================================== */
/* 다크모드 규칙은 2026-08-21 에 테마 전체에서 제거했다(항상 라이트 고정 운영).
   여기 있던 body.color_scheme_dark 규칙은 참조하던 --dark-* 토큰이 함께 삭제되어
   값이 비는 죽은 코드가 되므로 같이 지운다. */

/* ====================================================================================================
   데스크탑
   ※ 입력창 높이·글자 크기는 reserve-modal.css 에서 전 구간 동일하게 유지한다.
     여기서는 폼을 감싸는 여백만 키운다.
   ==================================================================================================== */
@media (min-width: 768px) {
  .xet-layout .reserve-form-page {
    padding: var(--gap3x) var(--gap2x);
  }
}