/* =========================================================
   ENJO CONTACT — 페이지 콘텐츠 스킨
   ENJO 레이아웃의 색·서체 변수를 따르고, 없으면 기본값을 씁니다.
   ========================================================= */
.ej-contact{
  --c-ink:var(--ink,#1a1a1a);--c-sub:var(--sub,#6e6e6c);--c-line:var(--line,#d8d8d5);--c-bg:var(--bg,#fafaf8);--c-bg2:var(--bg-alt,#f3f3f1);
  --c-sans:var(--sans,'Jost','Noto Sans KR','Helvetica Neue',Arial,sans-serif);
  --c-sec:var(--sec,110px);--c-display:clamp(44px,5.4vw,76px);--c-small:var(--fs-small,11px);--c-body:var(--fs-body,13px);--c-label:var(--fs-label,14px);
  color:var(--c-ink);font-family:var(--c-sans);font-weight:300;padding-top:var(--c-sec)
}
.ej-contact *{box-sizing:border-box}
.ej-contact :is(h1,h2,p,dl,dt,dd,form){margin:0;padding:0}
.ej-contact img{display:block;max-width:100%}
.ej-contact a{color:inherit;text-decoration:none}
.ej-contact .ct-wrap{max-width:1440px;margin:0 auto}
@media (max-width:1519px){.ej-contact .ct-wrap{padding:0 40px}}
/* 위치 영역이 회색이므로 아래 사이트 푸터의 사선 뒤도 회색으로 이어 줍니다 */
body:has(.ej-contact .ct-loc) .ft{background:var(--bg-alt,#f3f3f1)}

/* 상단 제목 — 줄마다 아래에서 떠오름 */
.ej-contact .no{font-size:var(--c-small);letter-spacing:.14em}
.ej-contact .big{font-weight:300;font-size:var(--c-display);line-height:1;letter-spacing:.01em}
.ej-contact .bar{display:block;width:26px;height:1px;background:currentColor}
.ej-contact .cap{font-size:var(--c-small);letter-spacing:.26em;line-height:1.9;font-weight:400}
.ej-contact .q{font-size:clamp(20px,1.8vw,24px);line-height:1.55;word-break:keep-all}
.ct-head{display:grid;gap:22px;justify-items:start;padding-bottom:80px;margin-bottom:80px;border-bottom:1px solid var(--c-line)}
.ej-contact .m{display:block;overflow:hidden}
.ej-contact .m>span{display:block;transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
.ct-head.hide .m>span{transform:translateY(110%);transition:none}
.ct-head>.bar{transform-origin:left;transition:transform 1.1s .5s cubic-bezier(.2,.7,.1,1)}
.ct-head.hide>.bar{transform:scaleX(0);transition:none}

/* 연락처 + 문의 폼 */
.ct-two{display:grid;grid-template-columns:5fr 7fr;gap:80px}
.ct-two>*{min-width:0}
.ej-contact .lab{font-size:var(--c-label);font-weight:400;letter-spacing:.26em}
.ej-contact .lab+.bar{margin:20px 0 32px}
.ej-contact .info{display:grid;gap:18px}
.ej-contact .info>div{display:grid;grid-template-columns:120px 1fr;align-items:baseline;gap:16px}
.ej-contact .info dt,.ej-contact .info dd{font-size:15px}
.ej-contact .info dt{font-weight:400}
.ej-contact .info dd{overflow-wrap:anywhere}
.ej-contact .info dd a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s}
.ej-contact .info dd a:hover{background-size:100% 1px}
.ej-contact .info+.bar{margin:44px 0}
.ej-contact .note .ko{font-size:16px;line-height:1.7;margin-bottom:22px}
.ej-contact .note .en{font-size:var(--c-body);line-height:1.7;color:var(--c-sub);max-width:300px}
.ej-contact form{display:grid;gap:30px}
.ej-contact .f{position:relative}
.ej-contact .f input,.ej-contact .f textarea{width:100%;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;padding:22px 0 10px;font:inherit;font-size:15px;color:inherit;outline:0;resize:vertical;box-shadow:none;transition:border-color .4s}
.ej-contact .f label{position:absolute;left:0;top:22px;font-size:14px;color:var(--c-sub);pointer-events:none;transition:transform .4s cubic-bezier(.2,.6,.2,1),font-size .4s,color .4s}
.ej-contact .f input:focus,.ej-contact .f textarea:focus{border-color:var(--c-ink)}
.ej-contact .f input:focus+label,.ej-contact .f input:not(:placeholder-shown)+label,.ej-contact .f textarea:focus+label,.ej-contact .f textarea:not(:placeholder-shown)+label{transform:translateY(-20px);font-size:var(--c-small);letter-spacing:.08em;color:var(--c-ink)}
.ej-contact .f.err input,.ej-contact .f.err textarea{border-color:#c0392b}
.ej-contact .send-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ej-contact .status{font-size:12px;line-height:1.6;color:var(--c-sub)}
.ej-contact .status.err{color:#c0392b}
.ej-contact .send{display:inline-flex;align-items:center;gap:16px;margin-left:auto;padding:18px 30px 18px 36px;border:0;border-radius:999px;background:var(--c-ink);color:var(--c-bg);font:inherit;font-size:13px;font-weight:500;letter-spacing:.24em;cursor:pointer;transition:background .4s,opacity .4s}
.ej-contact .send .arw{display:inline-block;font-size:16px;letter-spacing:0;line-height:1;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.ej-contact .send:hover .arw,.ej-contact .send:focus-visible .arw{transform:translateX(6px)}
.ej-contact .send:hover{background:#000}
.ej-contact .send[disabled]{opacity:.5;cursor:wait}
.ej-contact .send:focus-visible,.ej-contact a:focus-visible{outline:1px solid var(--c-ink);outline-offset:4px}

/* 위치 — 사선 위 회색 영역 */
.ct-loc{position:relative;margin-top:110px;padding:calc(var(--c-sec) + 60px) 0 var(--c-sec)}
.ct-loc::before{content:"";position:absolute;inset:0;background:var(--c-bg2);clip-path:polygon(0 120px,100% 0,100% 100%,0 100%)}
.ct-loc .ct-wrap{position:relative}
.ej-contact .loc{display:grid;grid-template-columns:8fr 4fr;gap:44px;align-items:start}
.ej-contact .map-box{aspect-ratio:16/8;overflow:hidden;max-width:100%;background:var(--c-bg2)}
.ej-contact .map-box img{width:100%;height:100%;object-fit:cover}
.ej-contact .ko-addr{font-size:17px}
.ej-contact .en-addr{font-size:14px;color:var(--c-sub);margin-top:8px}
.ej-contact .loc-txt .bar{margin:28px 0}
.ej-contact .link{display:inline-flex;align-items:center;gap:12px;font-size:var(--c-small);font-weight:500;letter-spacing:.2em}
.ej-contact .link .arr{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:width .2s}
.ej-contact .link .arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.ej-contact .link:hover .arr{width:20px}

@media (max-width:900px){
  .ej-contact{--c-sec:72px}
  .ej-contact .ct-wrap{padding:0 24px}
  .ct-head{padding-bottom:56px;margin-bottom:56px}
  .ct-two,.ej-contact .loc{grid-template-columns:1fr;gap:48px}
  .ej-contact .info>div{grid-template-columns:100px 1fr}
  .ct-loc::before{clip-path:polygon(0 60px,100% 0,100% 100%,0 100%)}
}
@media (prefers-reduced-motion:reduce){.ej-contact .m>span,.ct-head>.bar{transition:none!important}}