/* =========================================================
   contact.css — 문의하기 페이지 전용 스타일
   (공통 디자인 토큰·컴포넌트는 common.css 재사용)
   ========================================================= */

/* 히어로 (첨부 이미지 배경 적용) */
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  background-color:var(--navy-deep);
  background-image:
    linear-gradient(100deg,rgba(16,33,52,.90) 0%,rgba(18,38,58,.72) 45%,rgba(16,33,52,.40) 100%),
    url("../images/contact-hero.webp");
  background-size:cover;background-position:center 35%;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;opacity:.35;pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2;padding:56px 24px 60px;}
.page-hero .eyebrow{display:inline-block;font-size:14px;letter-spacing:.14em;color:#bcd6ec;font-weight:600;margin-bottom:14px;border-left:3px solid var(--gold);padding-left:12px;}
.page-hero h1{font-size:40px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;}
.page-hero .lead{font-size:17px;line-height:1.65;color:#dce8f3;font-weight:400;max-width:640px;}

#formsec{padding-top:70px;}

/* 폼 레이아웃 */
.contact-layout{display:grid;grid-template-columns:1fr 320px;gap:36px;max-width:1000px;margin:0 auto;align-items:start;}
.contact-form{border:1px solid var(--line);border-radius:14px;padding:36px;background:#fff;}
.form-row{margin-bottom:20px;}
.form-row label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:8px;}
.form-row label .req{color:#c0392b;margin-left:2px;}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
  transition:border-color .2s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{outline:none;border-color:var(--blue);}
.form-row textarea{resize:vertical;min-height:140px;line-height:1.6;}
.form-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-note{font-size:13px;color:var(--gray);margin-top:-8px;margin-bottom:20px;line-height:1.6;}
.form-submit{width:100%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:16px;border-radius:8px;font-size:16px;font-weight:700;transition:opacity .2s;}
.form-submit:hover{opacity:.9;}
.form-mailto-hint{font-size:12.5px;color:var(--gray);margin-top:14px;line-height:1.7;text-align:center;}

/* 완료 메시지 */
.form-done{display:none;border:1px solid #74b784;background:#f8fbf8;border-radius:12px;padding:28px 26px;text-align:center;}
.form-done.show{display:block;}
.form-done h3{font-size:17px;font-weight:700;color:#3f7a52;margin-bottom:8px;}
.form-done p{font-size:14px;color:var(--gray);line-height:1.6;}

/* 사이드 안내 카드 */
.contact-side{display:flex;flex-direction:column;gap:16px;}
.side-card{border:1px solid var(--line);border-radius:12px;padding:22px 20px;background:var(--bg-soft);}
.side-card h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:10px;}
.side-card p,.side-card a{font-size:14px;color:var(--ink);line-height:1.7;}
.side-card a{color:var(--blue);font-weight:600;}

@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .page-hero .wrap{padding:40px 24px 44px;}
  .page-hero h1{font-size:28px;}
  .contact-form{padding:26px 20px;}
  .form-two{grid-template-columns:1fr;}
}