/* ===== 상담 신청 폼 — 전 단지 공통 =====
 *
 * 단지 페이지마다 폼을 따로 들고 있으면 필드 하나 고치는 데 페이지 수만큼
 * 손이 간다. 마크업은 consult.js 가 그리고, 모양은 이 파일이 책임진다.
 *
 * 색은 --cf-accent 하나만 페이지에서 바꾸면 나머지가 따라온다.
 * 페이지의 CSS 변수(--blue, --navy 등)에 기대지 않는다.
 * 단지마다 변수 이름이 달라서, 기대는 순간 공통 파일이 아니게 된다.
 */
/* 고정 헤더가 있는 페이지에서 앵커로 점프하면 폼 머리가 헤더에 가린다.
   여유를 둬서 카드 상단이 온전히 보이게 한다. */
.cf { scroll-margin-top: 84px; }

/* 껍데기를 <section> 으로 두다 보니 페이지의 공용 section 규칙
   (허브는 padding:80px 40px)이 먹어 카드가 아래로 밀렸다.
   레이아웃 값은 여기서 0 으로 못박고, 배치는 부모 그리드에 맡긴다. */
.cf {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

.cf {
  --cf-accent: #0085ad;
  --cf-accent-d: #00647f;
  --cf-ink: #22272f;
  --cf-gray: #6d747e;
  --cf-line: #dcdfe4;
  --cf-soft: #f6f7f9;
  --cf-radius: 14px;
  --cf-font: inherit;

  display: block;
  font-family: var(--cf-font);
  color: var(--cf-ink);
  -webkit-text-size-adjust: 100%;
}
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }

/* 단지 페이지가 섹션에 text-align:center 를 걸어두는 경우가 있다.
   상속되면 라벨과 동의문구가 가운데로 밀리므로 여기서 못박는다. */
.cf-card, .cf-body, .cf-field, .cf-agree, .cf-modal-card { text-align: left; }
.cf-head, .cf-ok, .cf-note { text-align: center; }

.cf-card {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.07);
  overflow: hidden;
}
.cf-head {
  padding: 22px 24px 18px;
  background: var(--cf-accent);
  color: #fff;
}
.cf-head h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.cf-head p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: .92; }

.cf-body { padding: 22px 24px 24px; }

.cf-row { display: grid; gap: 14px; margin-bottom: 14px; }
.cf-row.c2 { grid-template-columns: 1fr 1fr; }

.cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-field > label { font-size: 13px; font-weight: 700; color: var(--cf-ink); letter-spacing: -.2px; }
.cf-field .req { color: #d64545; }
.cf-field .opt { font-weight: 500; color: var(--cf-gray); font-size: 12px; }

.cf-field input[type="text"],
.cf-field input[type="tel"],
.cf-field select,
.cf-field textarea,
.cf-date-btn {
  width: 100%;
  padding: 12px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--cf-ink);
  background: var(--cf-soft);
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cf-field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #a4abb4; }
.cf-field input:hover, .cf-field select:hover,
.cf-field textarea:hover, .cf-date-btn:hover { border-color: var(--cf-accent); }
.cf-field input:focus, .cf-field select:focus,
.cf-field textarea:focus, .cf-date-btn:focus-visible {
  outline: none;
  border-color: var(--cf-accent);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 18%, transparent);
}

/* 연락처 — 010 은 고정으로 두고 뒷자리만 받는다. 오입력이 확 준다. */
.cf-tel { display: flex; align-items: stretch; }
.cf-tel-prefix {
  display: flex; align-items: center;
  padding: 0 11px;
  font-size: 15px; font-weight: 700; color: var(--cf-gray);
  background: #eef0f3;
  border: 1px solid var(--cf-line); border-right: 0;
  border-radius: 10px 0 0 10px;
}
.cf-tel input { border-radius: 0 10px 10px 0 !important; }

/* 날짜 선택 버튼 */
.cf-date-btn {
  display: flex; align-items: center; gap: 9px;
  text-align: left; cursor: pointer;
}
.cf-date-btn .ico { font-size: 16px; line-height: 1; }
.cf-date-btn .val { flex: 1; }
.cf-date-btn .val.empty { color: #a4abb4; }
.cf-date-btn .arrow { color: var(--cf-gray); font-size: 12px; }

/* 동의 */
.cf-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 14px; cursor: pointer;
}
.cf-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-agree .box {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--cf-line); border-radius: 6px;
  background: #fff; position: relative; transition: all .15s;
}
.cf-agree input:checked + .box { background: var(--cf-accent); border-color: var(--cf-accent); }
.cf-agree input:checked + .box::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cf-agree input:focus-visible + .box {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 25%, transparent);
}
.cf-agree .txt { font-size: 12.5px; line-height: 1.6; color: var(--cf-gray); }
.cf-agree .txt a { color: var(--cf-accent); }

.cf-submit {
  width: 100%; padding: 16px;
  font-size: 16.5px; font-weight: 800; font-family: inherit;
  color: #fff; letter-spacing: -.3px;
  background: var(--cf-accent);
  border: 0; border-radius: 11px; cursor: pointer;
  transition: filter .15s, transform .05s;
}
.cf-submit:hover:not(:disabled) { filter: brightness(1.07); }
.cf-submit:active:not(:disabled) { transform: translateY(1px); }
.cf-submit:disabled { opacity: .6; cursor: default; }

.cf-note { margin: 11px 0 0; font-size: 12.5px; color: var(--cf-gray); text-align: center; line-height: 1.55; }

.cf-err {
  display: none;
  margin-bottom: 14px; padding: 11px 13px;
  font-size: 13.5px; font-weight: 600; color: #b4232a;
  background: #fdeced; border: 1px solid #f5c2c5; border-radius: 9px;
}
.cf-err.on { display: block; }

/* 완료 패널 */
.cf-ok { display: none; padding: 40px 24px 44px; text-align: center; }
.cf-ok.on { display: block; }
.cf-ok .ico {
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
  background: var(--cf-accent); border-radius: 50%;
}
.cf-ok h3 { margin: 0 0 10px; font-size: 21px; font-weight: 800; }
.cf-ok p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--cf-gray); }

/* ── 날짜 선택 모달 ── */
.cf-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.45);
}
.cf-modal.on { display: flex; }
.cf-modal-card {
  width: 100%; max-width: 360px;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.cf-modal-title {
  padding: 17px 20px; font-size: 16px; font-weight: 800;
  color: #fff; background: var(--cf-accent);
}
.cf-cal { padding: 16px 18px 6px; }
.cf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cf-cal-head span { font-size: 15.5px; font-weight: 800; }
.cf-cal-nav {
  width: 32px; height: 32px; font-size: 18px; line-height: 1;
  color: var(--cf-ink); background: var(--cf-soft);
  border: 1px solid var(--cf-line); border-radius: 8px; cursor: pointer;
}
.cf-cal-nav:hover { border-color: var(--cf-accent); color: var(--cf-accent); }
.cf-cal-dow { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 4px; }
.cf-cal-dow span { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--cf-gray); padding: 5px 0; }
.cf-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cf-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-family: inherit; color: var(--cf-ink);
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.cf-day:hover:not(:disabled) { background: var(--cf-soft); }
.cf-day.empty, .cf-day:disabled { color: #c8ccd2; cursor: default; background: none; }
.cf-day.sun { color: #d64545; }
.cf-day.sat { color: #3a6fd8; }
.cf-day.sel { color: #fff !important; background: var(--cf-accent); font-weight: 800; }
/* 선택된 날짜에 마우스를 올리면 글자가 사라지던 문제.
   .cf-day:hover:not(:disabled) 는 우선순위가 (0,3,1) 로 .cf-day.sel (0,2,1) 보다
   높아 배경만 연회색(--cf-soft)으로 덮이는데, 글자색은 !important 라 흰색으로
   남아 흰 바탕에 흰 글씨가 된다. 선택 상태에서는 강조색을 유지한다.
   ⚠ --cf-accent-d 를 쓰면 안 된다 — 스크립트가 data-accent 로 --cf-accent 만
     바꾸므로 --cf-accent-d 는 기본 청록색 그대로다. 밝기만 낮춰 쓴다. */
.cf-day.sel:hover:not(:disabled) { background: var(--cf-accent); filter: brightness(.88); }
.cf-modal-foot { display: flex; gap: 9px; padding: 12px 18px 18px; }
.cf-modal-btn {
  flex: 1; padding: 12px; font-size: 14.5px; font-weight: 700; font-family: inherit;
  border-radius: 9px; cursor: pointer;
}
.cf-modal-btn.ghost { color: var(--cf-gray); background: #fff; border: 1px solid var(--cf-line); }
.cf-modal-btn.primary { color: #fff; background: var(--cf-accent); border: 0; }

@media (max-width: 520px) {
  .cf-row.c2 { grid-template-columns: 1fr; }
  .cf-head { padding: 19px 18px 16px; }
  .cf-head h3 { font-size: 18px; }
  .cf-body { padding: 18px 18px 20px; }
  .cf-submit { padding: 15px; font-size: 16px; }
}