/* 기본은 단순 세로 배치. --e 만 grid 로 갈린다 */
.sec-contact__layout{display:block}

/* ⭐ head 와 body 는 같은 폭·같은 왼쪽 기준을 갖는다.
 *    분리해두면 title-c(왼쪽 정렬)에서 제목만 밖으로 튀어나온다. */
.sec-contact__head,
.sec-contact__body{max-width:840px;margin-left:auto;margin-right:auto}

.sec-contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.sec-contact__row--full{grid-column:1/-1}

.sec-contact__label{
  display:block;
  margin-bottom:8px;
  font-size:var(--fs-sm);
  font-weight:700;
}
.sec-contact__label em{color:#e03131;font-style:normal;margin-left:2px}

.sec-contact__input{
  width:100%;
  padding:13px 16px;
  font-family:var(--f-base);
  font-size:var(--fs-body);
  color:var(--c-text);
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--btn-radius);
  transition:border-color var(--tr);
}
.sec-contact__input:focus{
  outline:0;
  border-color:var(--c-primary);
}
.sec-contact__input::placeholder{color:var(--c-text-mute)}

.sec-contact__textarea{resize:vertical;line-height:1.65}

.sec-contact__err{
  margin-top:6px;
  font-size:13px;
  color:#e03131;
}

/* 개인정보 동의 */
.sec-contact__privacy{margin-top:26px}

.sec-contact__privacy-box{
  padding:18px 20px;
  background:var(--c-bg-alt);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  font-size:13px;
  color:var(--c-text-sub);
  line-height:1.7;
}
.sec-contact__privacy-box strong{
  display:block;
  margin-bottom:8px;
  font-size:var(--fs-sm);
  color:var(--c-text);
}
.sec-contact__privacy-box ul{list-style:none}
.sec-contact__privacy-box li{padding-left:10px;position:relative}
.sec-contact__privacy-box li::before{
  content:'';
  position:absolute;left:0;top:11px;
  width:3px;height:3px;
  background:var(--c-text-mute);
  border-radius:50%;
}

.sec-contact__check{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;
  font-size:var(--fs-sm);
  cursor:pointer;
}
.sec-contact__check input{
  width:17px;height:17px;
  accent-color:var(--c-primary);
  cursor:pointer;
}
.sec-contact__check em{color:#e03131;font-style:normal}

.sec-contact__captcha{margin-top:22px}

.sec-contact__actions{
  display:flex;justify-content:center;
  margin-top:32px;
}
.sec-contact__submit{
  min-width:220px;
  padding:16px 40px;
  background:var(--c-primary);
  color:#fff;
  border:0;
  border-radius:var(--btn-radius);
  font-family:var(--f-base);
  font-size:var(--fs-body);
  font-weight:700;
  cursor:pointer;
  transition:var(--tr);
}
.sec-contact__submit:hover{background:var(--c-primary-d)}
.sec-contact__submit:disabled{opacity:.6;cursor:default}

/* 접수 완료 */
.sec-contact__done{
  padding:60px 20px;
  text-align:center;
  background:var(--c-primary-l);
  border-radius:var(--radius-lg);
}
.sec-contact__done svg{
  width:52px;height:52px;
  margin:0 auto 18px;
  color:var(--c-primary);
}
.sec-contact__done p{
  font-size:17px;
  font-weight:600;
  line-height:1.6;
}
.sec-contact__again{
  margin-top:22px;
  padding:11px 26px;
  background:var(--c-bg);
  color:var(--c-primary);
  border:1px solid var(--c-primary);
  border-radius:var(--btn-radius);
  font-family:var(--f-base);
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
  transition:var(--tr);
}
.sec-contact__again:hover{background:var(--c-primary);color:#fff}

/* FAQ 블록 (--e 전용이지만 스타일은 여기 한 곳) */
.sec-contact__faq-more{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:22px;
  font-size:var(--fs-sm);color:var(--c-text-sub);
  text-decoration:none;transition:var(--tr);
}
.sec-contact__faq-more svg{width:15px;height:15px;transition:var(--tr)}
.sec-contact__faq-more:hover{color:var(--c-primary)}
.sec-contact__faq-more:hover svg{transform:translateX(3px)}

/* --a  2열 (기본) */

/* --b  1열 좁게 */
.sec-contact--b .sec-contact__head,
.sec-contact--b .sec-contact__body{max-width:560px}
.sec-contact--b .sec-contact__grid{grid-template-columns:1fr}

/* --c  회색 배경 카드 */
.sec-contact--c .sec-contact__body{
  padding:44px 48px;
  background:var(--c-bg-alt);
  border-radius:var(--radius-lg);
}
.sec-contact--c .sec-contact__privacy-box{background:var(--c-bg)}

/* --d  1열 넓게 */
.sec-contact--d .sec-contact__head,
.sec-contact--d .sec-contact__body{max-width:1000px}
.sec-contact--d .sec-contact__grid{grid-template-columns:1fr;gap:14px}
.sec-contact--d .sec-contact__input{padding:15px 18px}

/* --e  좌 FAQ + 우 폼카드 */
.sec-contact--e .sec-contact__layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr;      /* 행을 2개로 고정. 없으면 폼이 길어질 때 밀린다 */
  column-gap:var(--gap);
  row-gap:24px;
  align-items:start;
}

.sec-contact--e .sec-contact__head{
  grid-column:1;grid-row:1;
  margin-bottom:0;
}

/* 왼쪽 정렬 — base 의 중앙 정렬을 되돌린다 */
.sec-contact--e .sec-contact__head,
.sec-contact--e .sec-contact__head .sec__eyebrow,
.sec-contact--e .sec-contact__head .sec__title,
.sec-contact--e .sec-contact__head .sec__desc{
  text-align:left;
  margin-left:0;margin-right:auto;
  max-width:none;
}
.sec-contact--e .sec-contact__head .sec__title::after,
.sec-contact--e .sec-contact__head .sec__title::before{
  margin-left:0;margin-right:auto;left:0;transform:none;
}

.sec-contact--e .sec-contact__faq{grid-column:1;grid-row:2}

.sec-contact--e .sec-contact__body{
  grid-column:2;grid-row:1 / 3;
  max-width:none;margin:0;
  padding:40px;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

.sec-contact--e .sec-contact__grid{grid-template-columns:1fr;gap:16px}
.sec-contact--e .sec-contact__actions{margin-top:26px}
.sec-contact--e .sec-contact__submit{width:100%}

/* 제목이 없으면 FAQ 가 1행부터 */
.sec-contact--e .sec-contact__layout:not(:has(.sec-contact__head)) .sec-contact__faq{
  grid-row:1;
}

@media (max-width:1024px){
  .sec-contact__grid{grid-template-columns:1fr;gap:16px}
  .sec-contact__input{padding:12px 14px;font-size:15px}
  .sec-contact__submit{width:100%;min-width:0}
  .sec-contact--c .sec-contact__body{padding:26px 20px}
  .sec-contact__done{padding:44px 18px}
  .sec-contact__done p{font-size:15px}

  .sec-contact--e .sec-contact__layout{grid-template-columns:1fr;row-gap:32px}
  .sec-contact--e .sec-contact__head,
  .sec-contact--e .sec-contact__faq,
  .sec-contact--e .sec-contact__body{grid-column:1;grid-row:auto}
  .sec-contact--e .sec-contact__head{margin-bottom:0}
  .sec-contact--e .sec-contact__body{padding:26px 20px}
}