/* INNO&M CONTACT — 문의 폼 중심 페이지 (form-focused).
   Shared tokens / header / footer / eyebrow all come from common.css.
   Dark canvas + blue accent, surface-raised form card, mailto compose on submit. */

.contact-page{background:var(--canvas);padding:0;min-height:100vh;}
.contact-page > .container{max-width:1248px;padding-top:116px;padding-bottom:100px;}
@media(min-width:1320px){.contact-page > .container{padding-left:24px;padding-right:24px;}}
@media(max-width:900px){.contact-page > .container{padding-top:116px;padding-bottom:72px;}}

/* ===== 시안1 — 좌우 분할: 왼쪽 안내/연락처/오시는 길, 오른쪽 폼 ===== */
.cf-split{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start;}

/* 왼쪽 컬럼 */
.cf-left{padding-top:14px;}
.cf-left .eyebrow{margin-bottom:26px;}
.cf-title{font-family:var(--ff-ko);font-weight:700;font-size:clamp(38px,4.4vw,58px);line-height:1.18;letter-spacing:-1.4px;color:var(--text);word-break:keep-all;}
.cf-lead{margin-top:22px;max-width:460px;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.75;color:var(--muted);word-break:keep-all;}

/* 오시는 길(왼쪽 컬럼 하단) */
.cf-loc{margin-top:34px;}
.cf-loc-label{font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:2px;}
.cf-loc .cf-info{margin-top:0;}

/* form card (오른쪽) */
.cf-form{
  background:var(--surface-raised);border:1.5px solid var(--accent);border-radius:var(--radius-lg);
  box-shadow:0 20px 60px -16px rgba(2,112,255,.32);
  padding:34px 36px 30px;display:flex;flex-direction:column;gap:10px;
}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cf-field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.cf-field label{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:rgba(255,255,255,0.82);}
.cf-req{color:var(--accent);}
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);color:var(--text);
  background:var(--surface-sunken);border:1px solid var(--hair-2);border-radius:var(--radius-sm);
  padding:10px 15px;transition:border-color .18s,box-shadow .18s;
}
.cf-field textarea{resize:vertical;min-height:70px;line-height:1.5;}
.cf-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 16px,calc(100% - 14px) 16px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;}
.cf-field select option{color:var(--text);background:var(--bg-panel);}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(255,255,255,0.32);}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}

.cf-submit{
  align-self:flex-start;margin-top:4px;font-family:var(--ff-ko);font-weight:600;font-size:var(--fs-base);
  color:var(--text);background:var(--accent);border:none;border-radius:var(--radius-pill);
  padding:12px 34px;cursor:pointer;transition:transform .18s,background .18s;
}
.cf-submit span{margin-left:4px;}
.cf-submit:hover{transform:translateY(-2px);background:var(--color-brand-hover);}
.cf-submit:active{transform:none;}

.cf-formnote{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted-2);line-height:1.55;word-break:keep-all;}
.cf-formnote a{color:var(--accent);text-decoration:none;}
.cf-formnote a:hover{text-decoration:underline;}
.cf-formnote.cf-ok{color:#3ddc84;}
.cf-formnote.cf-err{color:#ff6a6a;}

/* contact info — 왼쪽 컬럼 세로 스택(구분선형) */
.cf-info{margin-top:56px;display:flex;flex-direction:column;gap:0;}
.cf-loc .cf-info{margin-top:0;}
.cf-info-item{
  display:flex;flex-direction:column;gap:6px;flex:none;
  background:transparent;border:none;border-top:1px solid var(--hair);border-radius:0;
  padding:18px 0;text-decoration:none;transition:border-color .18s;
}
a.cf-info-item:hover{border-top-color:var(--accent-line);}
.cf-info-k{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-micro);letter-spacing:1.6px;color:var(--accent);text-transform:uppercase;}
.cf-info-v{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);color:rgba(255,255,255,0.86);line-height:1.45;word-break:keep-all;}
.cf-info-v em{font-style:normal;color:var(--muted-2);font-size:var(--fs-xs);}

/* 좌우 → 세로 스택 전환 */
@media(max-width:980px){
  .cf-split{grid-template-columns:1fr;gap:52px;}
  .cf-left{padding-top:0;}
  .cf-lead{max-width:100%;}
  .cf-info{margin-top:44px;}
}
@media(max-width:680px){
  .cf-row{grid-template-columns:1fr;}
  .cf-form{padding:26px 20px 24px;}
}

/* Mobile nav drawer: layout class applied by JS while open (display stays flex
   during the close animation). opacity/transform only. */
.nav.nav--drawer{
  display:flex;position:absolute;top:100%;right:24px;flex-direction:column;
  background:rgba(10,10,12,0.97);padding:16px 24px;border-radius:12px;gap:16px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1);
}
.nav.nav--drawer.nav--open{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .nav.nav--drawer{transition:none;}
}

/* 모바일 터치 타깃 ≥44px (리뷰 반영) */
@media(max-width:680px){
  .cf-field input,.cf-field select,.cf-field textarea{padding:13px 15px;}
}