
.contact-page{background:#010207}
.contact-main{
  position:relative;z-index:4;
  min-height:100svh;
  padding:calc(var(--header-h) + 88px) var(--pad-x) 110px;
  display:grid;align-items:center;
}
.contact-shell{
  width:min(1220px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:8vw;
  align-items:center;
}
.contact-copy-block{padding-right:2vw}
.contact-kicker{
  font-size:11px;letter-spacing:.31em;
  color:rgba(230,238,255,.42);
  margin-bottom:26px
}
.contact-title{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(64px,7.4vw,116px);
  line-height:.84;
  letter-spacing:-.055em;
  font-weight:400;
  text-transform:uppercase
}
.contact-title span{display:block}
.contact-copy{
  margin-top:34px;
  display:flex;flex-direction:column;gap:.45em;
  max-width:590px
}
.contact-copy .sentence{
  font-size:15.5px;line-height:1.9;
  color:rgba(235,240,255,.60);
  white-space:normal;word-break:keep-all
}
.contact-meta{
  margin-top:44px;
  display:flex;gap:24px;flex-wrap:wrap
}
.contact-meta span{
  font-size:10px;letter-spacing:.16em;
  color:rgba(198,219,255,.45)
}
.contact-form-wrap{
  position:relative;
  padding:38px 38px 34px;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.006));
  backdrop-filter:blur(10px);
  box-shadow:0 24px 80px rgba(0,0,0,.18)
}
.contact-form-wrap::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(#7dd7ff,#b996ff 52%,transparent)
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 18px}
.contact-field{display:flex;flex-direction:column;gap:9px}
.contact-field.full{grid-column:1/-1}
.contact-field label{
  font-size:11px;letter-spacing:.14em;
  color:rgba(235,240,255,.50);
  text-transform:uppercase
}
.contact-field input,.contact-field textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.11);
  border-radius:0;
  background:rgba(0,0,0,.18);
  color:rgba(247,250,255,.92);
  padding:15px 16px;
  font:inherit;font-size:14px;
  outline:none;
  transition:border-color .25s ease,box-shadow .25s ease
}
.contact-field input:focus,.contact-field textarea:focus{
  border-color:rgba(129,203,255,.48);
  box-shadow:0 0 0 3px rgba(83,158,255,.055)
}
.contact-field textarea{min-height:180px;resize:vertical;line-height:1.7}
.contact-actions{
  margin-top:24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:22px
}
.contact-note{
  max-width:360px;
  font-size:12px;line-height:1.7;
  color:rgba(235,240,255,.43)
}
.contact-submit{
  min-width:154px;height:48px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.025);
  color:#f7f9ff;
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s ease
}
.contact-submit:hover{
  border-color:rgba(135,211,255,.55);
  box-shadow:0 0 34px rgba(91,170,255,.11)
}
.contact-honeypot{position:absolute!important;left:-9999px!important}

html[lang="ko"] .contact-title,
html[lang="ja"] .contact-title,
html[lang="zh-Hans"] .contact-title{
  font-family:Arial,Helvetica,"Apple SD Gothic Neo","Noto Sans CJK KR","Malgun Gothic",sans-serif;
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.98;
  text-transform:none
}
html[lang="ko"] .contact-title{font-size:clamp(58px,6.5vw,98px)}
html[lang="ko"] .contact-copy .sentence,
html[lang="ja"] .contact-copy .sentence,
html[lang="zh-Hans"] .contact-copy .sentence{line-height:1.95}

@media(max-width:980px){
  .contact-main{padding-top:calc(var(--header-h) + 74px)}
  .contact-shell{grid-template-columns:1fr;gap:64px;text-align:center}
  .contact-copy-block{padding-right:0}
  .contact-copy{margin-left:auto;margin-right:auto}
  .contact-meta{justify-content:center}
  .contact-form-wrap{text-align:left;max-width:760px;width:100%;margin:0 auto}
}
@media(max-width:620px){
  .contact-main{padding:calc(var(--header-h) + 58px) 22px 82px}
  .contact-shell{width:100%;gap:48px}
  .contact-title{font-size:clamp(50px,15vw,72px)}
  html[lang="ko"] .contact-title{font-size:clamp(44px,12vw,62px)}
  .contact-copy{margin-top:26px}
  .contact-copy .sentence{font-size:15px}
  .contact-form-wrap{padding:27px 20px 24px}
  .contact-grid{grid-template-columns:1fr;gap:16px}
  .contact-field.full{grid-column:auto}
  .contact-actions{align-items:flex-start;flex-direction:column}
  .contact-submit{width:100%}
}

/* =========================================================
   v37 — CONTACT POETIC HEADING
   대화를
   시작합니다.
   Each line is a complete phrase and may not wrap internally.
   ========================================================= */
.contact-title span{
  display:block!important;
  width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
html[lang="ko"] .contact-title{
  font-size:clamp(54px,5.8vw,84px)!important;
  line-height:1.02!important;
  letter-spacing:-.05em!important;
}
html[lang="ko"] .contact-title span+span{
  margin-top:.06em!important;
}
@media(max-width:620px){
  html[lang="ko"] .contact-title{
    font-size:clamp(42px,10.8vw,58px)!important;
  }
}

/* =========================================================
   v38 — CONTACT PROPORTION / FORM WIDTH
   Larger form, calmer title, clearer hierarchy.
   ========================================================= */

.contact-main{
  padding-top:calc(var(--header-h) + 74px)!important;
  padding-bottom:96px!important;
}

.contact-shell{
  width:min(1380px,94vw)!important;
  grid-template-columns:minmax(360px,.72fr) minmax(620px,1.28fr)!important;
  gap:6.5vw!important;
}

.contact-copy-block{
  align-self:center!important;
  padding-right:0!important;
}

.contact-title{
  font-size:clamp(58px,6vw,92px)!important;
  line-height:.88!important;
}

html[lang="ko"] .contact-title{
  font-size:clamp(50px,5.25vw,76px)!important;
  line-height:1.04!important;
}

.contact-copy{
  max-width:520px!important;
  margin-top:30px!important;
}

.contact-form-wrap{
  width:100%!important;
  max-width:780px!important;
  justify-self:end!important;
  padding:42px 42px 38px!important;
}

.contact-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:20px 20px!important;
}

.contact-field input,
.contact-field textarea{
  min-width:0!important;
  width:100%!important;
  font-size:14.5px!important;
}

.contact-field textarea{
  min-height:190px!important;
}

.contact-actions{
  margin-top:26px!important;
}

.contact-note{
  max-width:420px!important;
  font-size:12.5px!important;
  line-height:1.72!important;
}

/* Prevent the SOCIAL field from looking like a login component */
#contact-social{
  background:rgba(0,0,0,.16)!important;
}

/* Tablet */
@media(max-width:1080px){
  .contact-shell{
    grid-template-columns:1fr!important;
    max-width:820px!important;
    gap:56px!important;
    text-align:center!important;
  }
  .contact-copy{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .contact-meta{justify-content:center!important}
  .contact-form-wrap{
    max-width:820px!important;
    justify-self:center!important;
    text-align:left!important;
  }
}

/* Mobile */
@media(max-width:620px){
  .contact-main{
    padding-top:calc(var(--header-h) + 52px)!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  html[lang="ko"] .contact-title{
    font-size:clamp(40px,10.8vw,54px)!important;
  }
  .contact-form-wrap{
    padding:26px 18px 24px!important;
  }
  .contact-grid{
    grid-template-columns:1fr!important;
  }
}
