.contactdiv{    max-width: var(--page-w);
  margin: 0 auto;
  background: #0e0e0e;
  color: #fff;
  padding: 36px;}


.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ====== Contact Split (1920 기준 좌우 분할) ====== */
.contact{
  background: #0e0e0e;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
  min-height: calc(100vh - 290px); /* header+footer 제외 대략 높이 */
}

.col{
  overflow: hidden;
  backdrop-filter: blur(2px);

}

.col-image{
  display: grid;
}
.col-image > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====== Form ====== */
.col-form{ 
  padding: 0px clamp(20px, 3vw, 42px);; }

.contact-title{
  margin: 40px 0px 20px 0px;
  font-size: clamp(28px, 2.8vw, 40px);
  letter-spacing: 0.04em;
  color: #fff;
}
.contact-desc{
  color: var(--muted);
  font-size: 14px;
  margin: 0px !important;
}

.field{ margin-bottom: 18px; }
.field label{
  color: #fff;
  display: inline-block;
  margin-bottom: 12px;
  font-weight: 400;
  font-size: 16px;
}
input, textarea{
  width: 100%;
  color: #fff;
  background: #1d1d1d;
  border: 1px solid var(--border);
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  resize: none;
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Noto Sans KR', sans-serif;
}
#message {
  height: 240px;      /* 원하시는 고정 높이로 변경 가능 */
  min-height: 240px;
  max-height: 240px;
  overflow: auto;     /* 내용 많으면 내부 스크롤 */
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Noto Sans KR', sans-serif;
}

input:focus, textarea:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(148,163,184,0.25);
}
.hint{ margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.error{ margin: 8px 0px 0px 0px; color: rgb(160, 160, 160); font-size: 13px !important; min-height: 1.2em; }

.actions{ display: flex; gap: 12px; margin-top: 12px; }
.btn{
  appearance: none;
  padding: 8px 14px;
  border-radius: 99px;
  cursor: pointer;
}
.btn.primary{
  color: #2a2a2a;
  background: #efefef;
  font-weight: 400;
  font-size: 14px;
  margin: 0px 0px 0px 0px;
}

#formStatus{ display:block; margin-top: 12px; color: var(--muted); 
  font-size: 13px; color: rgb(160, 160, 160) !important; 
  margin: 10px 0px 40px 0px;
}

.emailjs-guide{
  margin-top: 16px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  color: var(--muted);
}
.emailjs-guide summary{ cursor: pointer; color: var(--accent); }


/* ====== Footer ====== */
.footer {
  padding: 34px var(--pad) 40px;
  margin-top: 0px !important;
  background: #0e0e0e !important;
  border-top: 1px solid #2a2a2a;
}


/* ====== Responsive ====== */
@media (max-width: 1200px){
  .contact{
    grid-template-columns: 1fr;
  }
  .col-image{ height: 40vh; }
}