/* owner: 문의 / spec §5.8 — 레이아웃·간격만. 색은 밴드 변수(--fg/--fg-2/--fg-3/--line/--bg/--mint)만 참조. */

/* 섹션 — 등고선 140% 블리드가 가로 스크롤·푸터 아래 문서 높이를 늘리지 않도록 양축 clip */
.sec-contact{overflow:clip}
.sec-contact>.container{position:relative;z-index:var(--z-content)}
.sec-contact .grid-12{align-items:start}

/* 배경 등고선 (§4.6 데이터, §5.8 배치) — 모바일 퍼스트. 정상 노드(viewBox 402,96)를 섹션 우상단 패딩 안(y≈64px)에 고정.
   노드 x = W − right − svgW + .8375·svgW · 노드 y = top + .2·svgW (svgW = min(1.4W,1400))
   ≥1024: right −172px · top −216px → 노드 (W−55.5, 64) — 폼 상단(pad ≥112.6)·h2 우측(≤611)과 안 겹침, 1920 에서도 뷰포트 안
   768~1023: right −12% · top 64px−28vw(=.2·1.4W) → 노드 (.8925W, 64) — 1열이라 폼은 아래, 라벨(y=pad 84.5)보다 위
   <768: 변경 없음(width 100%·right 0·top −4%, 375 에서 노드 (315,933) 유지) */
.contact__contour{position:absolute;right:0;top:-14%;width:100%;height:auto;opacity:1;z-index:var(--z-contour);pointer-events:none;display:block}
/* 하위 겹만 감쇠(구 그룹 opacity .6 × 겹 opacity), 최상단 민트선·정상 노드는 선명하게 */
.contact__contour .contour__l--0{opacity:.19}.contact__contour .contour__l--1{opacity:.23}.contact__contour .contour__l--2{opacity:.26}.contact__contour .contour__l--3{opacity:.30}.contact__contour .contour__l--4{opacity:.34}.contact__contour .contour__l--5{opacity:.37}
.contact__contour .contour__peak,
.contact__contour .contour__ring{transform-box:fill-box;transform-origin:50% 50%}
@media (max-width:767px){
  .contact__contour .contour__l--0,
  .contact__contour .contour__l--1{display:none}
}
@media (min-width:768px){
  /* 노드 좌표(viewBox 402,96 · scale=W/480): 768→W1075 x≈654 y≈75 · 1024→W1200 x≈911 y≈80 · 1280→x≈1187 · 1440→x≈1360 (모두 뷰포트 안, 폼 상단 위) */
  .contact__contour{right:-8%;top:-140px;width:140%;max-width:1200px}
  .contact__contour .contour__peak circle:first-child{r:2.2}
  .contact__contour .contour__ring{r:5}
}
@media (min-width:1024px){
  .contact__contour{top:-160px}
}

/* 좌 정보 / 우 폼 — 모바일·태블릿 1열, ≥1024 5/7 */
.contact__info{grid-column:1 / -1}
.contact__form{grid-column:1 / -1;width:100%;max-width:560px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-2);padding:24px}
@media (min-width:768px){
  .contact__form{padding:32px;margin-top:var(--s-4)}
}
@media (min-width:1024px){
  .contact__info{grid-column:1 / 6}
  .contact__form{grid-column:7 / 13;margin-top:0}
}

/* 연락처 헤어라인 리스트 */
.contact__list{border-bottom:1px solid var(--line)}
.contact__row{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.contact__row dt{font:500 var(--fs-caption)/1.5 var(--ff);letter-spacing:var(--ls-caption);color:var(--fg-2)}
.contact__row dd{font:500 var(--fs-small)/1.5 var(--ff);color:var(--fg-3)}
.contact__micro{display:flex;align-items:center;gap:10px;margin-top:var(--s-5);font:500 var(--fs-caption)/1.5 var(--ff);letter-spacing:var(--ls-caption);color:var(--fg-2)}

/* 폼 세부 간격 */
.contact__form .field:last-of-type{margin-bottom:0}
.contact__form .field--agree .field__error{margin-top:-2px}
.form__actions{margin-top:var(--s-5)}
@media (min-width:768px){
  .form__actions{display:flex;justify-content:flex-end}
  .form__actions .btn--block{width:auto}
}
.contact__form .form__status{margin-top:12px}

/* 성공 카드 — 폼 자리를 대신함 */
.form__success[hidden]{display:none}
.form__success:focus{outline:none}
.form__success-title{font:700 22px/1.4 var(--ff);color:var(--fg)}
.form__success-sub{margin-top:12px;font:500 var(--fs-small)/1.7 var(--ff);color:var(--fg-2)}
.form__success-list{margin-top:var(--s-5)}

/* 성공 카드 clip 등장 400ms — 기본(no-JS·reduce)은 완성 상태 */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="reduce"]) .form__success{clip-path:inset(0 0 100% 0);transition:clip-path 400ms var(--ease)}
  html.js:not([data-motion="reduce"]) .form__success.is-in{clip-path:inset(0 0 0 0)}
}