/* =========================================================
   contact.css - 견적문의 페이지 전용 스타일
   ========================================================= */

/* ===================== 공통 섹션 헤드 ===================== */
.section-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.section-head::before{content:"";display:block;width:40px;height:3px;background:var(--gold);margin:0 auto 18px;border-radius:2px;}
.section-eyebrow{color:var(--gold);font-weight:700;letter-spacing:.15em;font-size:13px;margin-bottom:8px;}
.section-title{font-size:32px;color:var(--navy);margin-bottom:10px;}
.section-sub{color:#666;font-size:15px;line-height:1.7;}

/* ===================== 상담 전 준비사항 ===================== */
.prep-section{padding:100px 0;background:#fff;}
.prep-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;}
.prep-item{position:relative;background:var(--bg-light);border-radius:16px;padding:34px 24px 30px;text-align:center;
  opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s,box-shadow .3s,transform .3s;}
.prep-item.in-view{opacity:1;transform:translateY(0);}
.prep-item:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(10,20,35,.1);}
.prep-num{position:absolute;top:14px;right:18px;font-size:26px;font-weight:900;color:var(--navy);opacity:.08;}
.prep-icon{width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 18px;}
.prep-item h3{font-size:17px;color:var(--navy);margin-bottom:8px;}
.prep-item p{font-size:13.5px;color:#666;line-height:1.6;}

/* ===================== 연락처 + 폼 레이아웃 ===================== */
.contact-section{padding:20px 0 120px;background:var(--bg-light);}
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:start;}

/* --- 연락처 카드 --- */
.contact-info-col{display:flex;flex-direction:column;gap:20px;
  opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s;}
.contact-info-col.in-view{opacity:1;transform:translateY(0);}
.contact-info-card{background:#fff;border-radius:16px;padding:30px 28px;box-shadow:0 8px 24px rgba(10,20,35,.06);
  transition:transform .3s,box-shadow .3s;}
.contact-info-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(10,20,35,.12);}
.cic-icon{width:48px;height:48px;border-radius:50%;background:var(--navy);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:16px;}
.contact-info-card h3{font-size:16.5px;color:var(--navy);margin-bottom:8px;}
.cic-main{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.cic-sub{font-size:13px;color:#888;}
.cic-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight:600;
  color:var(--navy);transition:gap .3s,color .3s;}
.cic-link:hover{gap:10px;color:var(--gold);}

/* --- 폼 카드 --- */
.contact-form-col{opacity:0;transform:translateY(28px);transition:opacity .7s .1s,transform .7s .1s;}
.contact-form-col.in-view{opacity:1;transform:translateY(0);}
.contact-form-card{background:#fff;border-radius:18px;padding:44px 44px 40px;box-shadow:0 10px 30px rgba(10,20,35,.08);}
.cf-title{font-size:22px;color:var(--navy);margin-bottom:8px;}
.cf-sub{font-size:14px;color:#777;margin-bottom:30px;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.form-group{display:flex;flex-direction:column;margin-bottom:20px;}
.form-group.full{grid-column:1/-1;}
.form-row .form-group{margin-bottom:0;}
.form-group label{font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:8px;}
.req{color:#d33;margin-left:2px;}

.form-group input,
.form-group select,
.form-group textarea{
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:14px;
  font-family:inherit;color:#333;background:#fff;transition:border-color .25s,box-shadow .25s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,90,.18);
}
.form-group textarea{resize:vertical;min-height:120px;}
.field-hint{font-size:12px;color:#999;margin-top:6px;}

.field-error{display:none;font-size:12px;color:#d33;margin-top:6px;}
.form-group.error input,
.form-group.error select,
.form-group.error textarea{border-color:#d33;}
.form-group.error .field-error{display:block;}

.agree-row{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#555;margin:8px 0 6px;cursor:pointer;}
.agree-row input{margin-top:2px;}
.agree-row a{color:var(--navy);font-weight:600;text-decoration:underline;}
.agree-error{margin-bottom:10px;}
#quoteForm.show-agree-error .agree-error{display:block;}

.btn-submit{
  width:100%;background:var(--navy);color:#fff;font-size:15.5px;font-weight:700;
  padding:16px 0;border:none;border-radius:10px;cursor:pointer;margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .25s,transform .25s,box-shadow .25s;
}
.btn-submit:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px);box-shadow:0 12px 26px rgba(212,175,90,.35);}

/* ===================== 개인정보 모달 ===================== */
.privacy-modal{position:fixed;inset:0;background:rgba(10,14,22,.6);display:none;
  align-items:center;justify-content:center;z-index:999;padding:20px;}
.privacy-modal.active{display:flex;}
.privacy-modal-box{position:relative;background:#fff;border-radius:14px;max-width:520px;width:100%;
  padding:36px 32px;box-shadow:0 20px 50px rgba(0,0,0,.25);
  opacity:0;transform:scale(.94);transition:opacity .3s,transform .3s;}
.privacy-modal.active .privacy-modal-box{opacity:1;transform:scale(1);}
.privacy-modal-box h3{color:var(--navy);font-size:19px;margin-bottom:14px;}
.privacy-modal-box p{font-size:13.5px;line-height:1.8;color:#555;}
.pm-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:18px;color:#999;cursor:pointer;}
.pm-close:hover{color:var(--navy);}

/* ===================== 반응형 ===================== */
@media (max-width:1024px){
  .prep-grid{grid-template-columns:repeat(3,1fr);}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .prep-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .contact-form-card{padding:32px 24px;}
  .prep-section{padding:70px 0;}
  .contact-section{padding:10px 0 80px;}
}
@media (max-width:420px){
  .prep-grid{grid-template-columns:1fr;}
}