/* subtitle-seq4.css
   - Seq4 전용 Title Section (1280 x 280)
   - Contact Section + Form styles 포함
   - submotion.css와 함께 사용 (data-enter 모션은 submotion.css)
*/

/* =========================
   Tokens
========================= */
:root{
  /* Title */
  --seq4-title-h: 280px;
  --seq4-title-pad-top: 140px;

  --title-box-w: 151px;
  --title-box-h: 96px;
  --title-box-pad-top: 24px;

  /* ✅ 가운데 정렬 정확도를 위해 0 */
  --title-box-pad-left: 0px;

  /* Contact section */
  --contact-pad-y: 140px;
  --contact-max-w: 1280px;
  --contact-col-1: 0.75fr;
  --contact-col-2: 1fr;
  --contact-gap-x: 60px;

  /* Form */
  --form-item-gap: 38px;    /* 항목 간격 */
  --label-input-gap: 20px;  /* 라벨-입력 간격 */

  --field-h: 51px;          /* ✅ 89 맞추기용: 라벨18 + 간격20 + 51 = 89 */
  --textarea-h: 155px;      /* ✅ 193 맞추기용: 라벨18 + 간격20 + 155 = 193 */

  --radius: 20px;           /* ✅ 피그마 모서리 반경 20 통일 */
  --field-border: rgba(165,171,175,.35);
  --placeholder: rgba(96,93,92,.55);
  --shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* =========================
   Title Section (1280 x 280)
========================= */
.sub-title-section{
  width: 100%;
  background: #fff;
}

.sub-title-section__inner{
  width: 100%;
  max-width: 1280px;
  height: var(--seq4-title-h);
  margin: 0 auto;
  padding-top: var(--seq4-title-pad-top);

  position: relative; /* CONTACT US absolute 기준 */
  box-sizing: border-box;
}

/* ✅ 제품문의 + 점: 박스 자체를 정확히 중앙 */
.sub-title-box{
  width: var(--title-box-w);
  height: var(--title-box-h);
  margin: 0 auto;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: var(--title-box-pad-top);
  padding-left: var(--title-box-pad-left);
  box-sizing: border-box;
}

.sub-title-text{
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

/* page-point 위치/크기만 (모션은 submotion.css) */
.page-point{
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 10%);
  display: block;
  pointer-events: none;
}

/* CONTACT US (bottom hug 29, centered) */
.sub-title-sub{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  width: fit-content;
  margin: 0 auto;

  height: 29px;
  line-height: 29px;

  white-space: nowrap;
  text-align: center;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* =========================
   Contact Section (1280 x 1436, hug)
   - padding-top/bottom: 140
   - grid: 2 cols (0.75fr / 1fr)
   - column gap: 60
========================= */
.contact-section{
  width: 100%;
  background: #fff;
}

.contact-section__inner{
  width: 100%;
  max-width: var(--contact-max-w);
  margin: 0 auto;
  padding: var(--contact-pad-y) 0;
  box-sizing: border-box;
}

.contact-grid{
  width: 100%;
  display: grid;
  grid-template-columns: var(--contact-col-1) var(--contact-col-2);
  column-gap: var(--contact-gap-x);
  align-items: start;
  box-sizing: border-box;
}

.contact-left,
.contact-right{
  min-height: 1px;
}

/* =========================
   Contact art: Desktop/Tablet SVG switch
========================= */
.contact-left{
  display: block;
  position: sticky;
  top: 0px; 
  /* top: 100px; */
  align-self: flex-start;
}

.contact-art{
  display: block;
  max-width: 100%;
  height: auto;
}

.contact-art--tablet{
  display: none;
}

.contact-art--desktop{
  width: 523px;
  height: 600px;
}

/* Tablet (<=1279): 1열 + 배너 SVG */
@media (max-width: 1279px){
  .contact-grid{
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .contact-left{
    position: static;
  }
  .contact-art--desktop{ display: none; }
  .contact-art--tablet{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* =========================
   Contact Right Form (Seq4)
========================= */
.contact-right{
  align-self: start;
}

/* 항목 스택 */
.contact-fields{
  display: flex;
  flex-direction: column;
  gap: var(--form-item-gap);
}

/* 각 필드: 라벨 위 / 입력 아래 */
.form-field{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--label-input-gap);
}

.form-label{
  margin: 0;
}

/* ✅ 입력 공통(텍스트/textarea) */
.form-input,
.form-textarea{
  width: 100%;
  box-sizing: border-box;

  border: 1px solid var(--field-border);
  background: #fff;
  box-shadow: var(--shadow);

  border-radius: var(--radius);
  outline: none;
}

.form-input{
  height: var(--field-h);
  padding: 0 18px;
}

.form-input::placeholder{
  color: var(--placeholder);
}

/* textarea */
.form-textarea{
  height: var(--textarea-h);
  min-height: var(--textarea-h);
  padding: 16px 18px; /* ✅ 피그마 느낌(상단 여백) */
  resize: none;
}

.form-textarea::placeholder{
  color: var(--placeholder);
}

/* 파일 업로드 박스(텍스트 + 버튼) */
.filebox{
  width: 100%;
  height: var(--field-h);

  display: flex;
  align-items: stretch;

  border: 1px solid var(--field-border);  /* ✅ wrapper에 테두리 */
  border-radius: var(--radius);
  overflow: hidden;

  background: #fff;
  box-shadow: var(--shadow);              /* ✅ wrapper에 그림자 */
  box-sizing: border-box;
}

/* 왼쪽: 파일명 표시 */
.filebox-name{
  flex: 1;                 /* ✅ 남는 폭 전부 */
  height: 100%;
  padding: 0 18px;

  border: 0;               /* ✅ 제거 */
  box-shadow: none;        /* ✅ 제거 */
  border-radius: 0;
  background: transparent;

  outline: none;
  box-sizing: border-box;
}

.filebox-name::placeholder{
  color: var(--placeholder);
}

/* 오른쪽: 파일찾기 버튼 */
.filebox-btn{
  width: 136px;            /* ✅ 136 */
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--c-blue, #061B4B);
  color: #fff;

  border: 0;
  padding: 0;
  line-height: 1;          /* ✅ 세로 가운데 더 깔끔 */
  cursor: pointer;
  user-select: none;

  box-sizing: border-box;
}
.filebox-real{
  display: none;
}

/* =========================
   Terms box (스크롤 박스)
========================= */
.form-terms{
  width: 100%;

  /* ✅ 높이 고정 + 내용 많으면 내부 스크롤 */
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

  /* ✅ 피그마: 배경은 W1(연한 흰색), 글자는 G2(#605D5C) */
  background: #F8F9FA;                 /* W1 */
  border-radius: var(--radius, 20px);

  /* ✅ 패딩(원하는 값 유지 가능) */
  padding: 10px 14px 10px 32px;        /* 좌32 / 우14 느낌 + 스크롤 공간 */
  box-sizing: border-box;

  /* 스크롤바가 콘텐츠 위에 겹치지 않게 여유 */
  scrollbar-gutter: stable;

  /* ✅ 기본 글자색 */
  color: var(--c-g2, #605D5C);
}

/* ✅ 내부 텍스트도 G2로 통일 */
.form-terms *{
  color: inherit;
}

/* (선택) 스크롤바 스타일 - WebKit */
.form-terms::-webkit-scrollbar{
  width: 10px;
}
.form-terms::-webkit-scrollbar-track{
  background: transparent;
}
.form-terms::-webkit-scrollbar-thumb{
  background: rgba(47,42,37,.45);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* (선택) Firefox */
.form-terms{
  scrollbar-width: thin;
  scrollbar-color: rgba(47,42,37,.55) transparent;
}
/* =========================
   Bottom row (agree + submit) : 52
========================= */
.form-bottom{
  width: 100%;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.agree{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.agree-check{
  width: 16px;
  height: 16px;
}
/* 문의하기 버튼 */
.btn-submit{
  width: 134px;          /* ✅ W 134 */
  height: 52px;          /* ✅ H 52 */
  padding: 0 32px;       /* ✅ 좌우 32 */
  border: 0;
  border-radius: 9999px; /* ✅ radius 1000 느낌 */

  background: var(--c-blue, #061B4B);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background-color 160ms ease;
}

.btn-submit:hover{
  background: var(--c-orange, #ED7011); /* ✅ hover 주황 */
}
/* =========================
   Seq4 Contact responsive frame
   - Tablet: 800 x 1670 (content 720, pad 40/40)
   - Mobile: 375 x 1515 (content 337, pad 19/19)
========================= */

/* ✅ Tablet (800~1279): frame 800 / content 720 고정 */
@media (max-width: 1279px) and (min-width: 800px){
  .contact-section__inner{
    max-width: 800px;                 /* ✅ 프레임 800 고정 */
    padding: var(--contact-pad-y) 40px;/* ✅ 좌우 40 */
    box-sizing: border-box;
  }

  .contact-grid{
    width: 100%;
    max-width: 720px;                 /* ✅ 콘텐츠 720 고정 */
    margin: 0 auto;                   /* ✅ 가운데 */
    grid-template-columns: 1fr;        /* ✅ 1열 */
    row-gap: 24px;
    box-sizing: border-box;
  }

  /* ✅ 태블릿 SVG (720 x 160) */
  .contact-art--desktop{ display: none; }
  .contact-art--tablet{
    display: block;
    width: 720px;
    height: 160px;
    margin: 0 auto;                   /* ✅ 가운데 */
    max-width: 100%;
  }

  .contact-right,
  .contact-form,
  .contact-fields{
    width: 100%;
    max-width: 720px;                 /* ✅ 폼도 720 고정 */
    margin: 0 auto;
    box-sizing: border-box;
  }
}

/* ✅ Mobile (<=799): frame 375 / content 337 고정 + SVG 숨김 */
@media (max-width: 799px){
  .contact-section__inner{
    max-width: 375px;                 /* ✅ 프레임 375 */
    padding: var(--contact-pad-y) 19px;/* ✅ 좌우 19 => content 337 */
    box-sizing: border-box;
  }

  .contact-grid{
    width: 100%;
    max-width: 337px;                 /* ✅ 콘텐츠 337 고정 */
    margin: 0 auto;                   /* ✅ 가운데 */
    grid-template-columns: 1fr;
    row-gap: 24px;
    box-sizing: border-box;
  }

  /* ✅ 모바일은 SVG 안 보임 */
  .contact-left{ display: none; }

  .contact-right,
  .contact-form,
  .contact-fields,
  .form-field{
    width: 100%;
    max-width: 337px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  /* 모바일에서 파일찾기 버튼 폭 조정 */
  .filebox-btn{
    width: 136px; /* ✅ 모바일도 136 고정이면 그대로, 다르면 여기만 수정 */
    flex: 0 0 136px; /* ✅ 찌그러짐 방지 */
  }
   .filebox-name{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .form-input,
  .form-textarea,
  .filebox{
    width: 100%;
    box-sizing: border-box;
  }
  .form-bottom{
    height: auto;                 /* ✅ 52 고정 해제 */
    flex-direction: column;       /* ✅ 위/아래로 */
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;                    /* ✅ 이미지처럼 적당한 간격(필요시 조정) */
  }

  .agree{
    width: 100%;
    align-items: flex-start;      /* ✅ 체크박스 기준 상단 */
  }

  .agree-text{
    line-height: 1.5;             /* ✅ 모바일에서 줄바꿈 자연스럽게 */
  }

  .btn-submit{
    width: 100%;                  /* ✅ 337 꽉 채움(부모가 337) */
    height: 52px;
    padding: 0;                   /* ✅ 풀버튼이면 패딩 불필요 */
    border-radius: 9999px;
  }
}