/* ===== 공통 상담신청 폼 컴포넌트 (bonnie 패밀리 공용, 2026-08-20)
   테마별 style.css는 이 파일을 링크한 뒤 .cf-fields/.cf-fields-m에
   --cf-x/--cf-y/--cf-w/--cf-pad(-m) 변수만 오버라이드해서 위치를 지정한다.
   .cf-card는 카드형 테마(cancer/dental/silbi/silver 등)에서만 마크업에 붙이고,
   임베드형 테마(fire/2disease/sick/annuity/total)는 붙이지 않는다.
   --u는 각 테마 .pc-layout에서 정의하는 반응형 스케일 단위. */
.cf-card{background:#ffffff;border-radius:calc(var(--u) * 24);box-shadow:0 calc(var(--u) * 10) calc(var(--u) * 40) rgba(11,58,91,0.14);}

.cf-fields{position:absolute;left:calc(var(--u) * var(--cf-x, 0));top:calc(var(--u) * var(--cf-y, 0));width:calc(var(--u) * var(--cf-w, 794));box-sizing:border-box;padding:0 calc(var(--u) * var(--cf-pad, 40));display:flex;flex-direction:column;gap:calc(var(--u) * 24);}
.cf-field{display:flex;flex-direction:column;gap:calc(var(--u) * 10);}
.cf-label{font-family:'Noto Sans KR';font-weight:700;font-size:1.6rem;color:var(--cf-accent, #0b3a5b);letter-spacing:-0.03em;}
.cf-input{position:relative;width:100%;height:calc(var(--u) * 58);background:#fafbfc;border:calc(var(--u) * 1.5) solid #d5dbe0;border-radius:calc(var(--u) * 12);box-sizing:border-box;}
.cf-input::before{content:attr(data-ph);position:absolute;left:calc(var(--u) * 20);top:0;bottom:0;display:flex;align-items:center;font-family:'Noto Sans KR';font-weight:400;font-size:1.6rem;color:#a7b0b8;letter-spacing:-0.03em;}
.cf-genderrow{display:flex;align-items:center;gap:calc(var(--u) * 28);}
.cf-genderopt{display:flex;align-items:center;gap:calc(var(--u) * 10);font-family:'Noto Sans KR';font-weight:400;font-size:1.6rem;color:#333;letter-spacing:-0.03em;}
.cf-dot{width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:50%;border:calc(var(--u) * 2) solid #c3cad0;background:#fff;box-sizing:border-box;display:inline-block;flex:0 0 auto;}
.cf-agree{display:flex;align-items:center;gap:calc(var(--u) * 10);font-family:'Noto Sans KR';font-weight:400;font-size:1.4rem;color:#555;letter-spacing:-0.03em;align-self:center;}
.cf-checkbox{width:calc(var(--u) * 22);height:calc(var(--u) * 22);border-radius:calc(var(--u) * 6);border:calc(var(--u) * 1.5) solid #c3cad0;background:#fff;box-sizing:border-box;flex:0 0 auto;}
.cf-submit{margin-top:calc(var(--u) * 6);width:100%;height:calc(var(--u) * 70);border-radius:calc(var(--u) * 999);background:var(--cf-accent, #0b3a5b);color:#fff;font-family:'Noto Sans KR';font-weight:700;font-size:1.8rem;display:flex;align-items:center;justify-content:center;letter-spacing:-0.03em;box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(11,58,91,.3);}

.cf-fields-m{position:absolute;left:calc(var(--u) * var(--cf-x-m, 0));top:calc(var(--u) * var(--cf-y-m, 0));width:calc(var(--u) * var(--cf-w-m, 607));box-sizing:border-box;padding:0 calc(var(--u) * var(--cf-pad-m, 30));display:flex;flex-direction:column;gap:calc(var(--u) * 20);}