@charset "UTF-8";
@keyframes ani-spinner {
  0% {
    rotate: 0turn;
  }
  100% {
    rotate: 1turn;
  }
}
/*
  회원가입(단계형) 페이지 스타일.

  구버전 퍼블리싱(jb_content/resources/css/diagnosis.css)의 단계 화면 구조
  (StepGuide / StepContents / StepTit / stepForm / agreeSet / user-info)를 옮겨 온 것이다.

  구버전 CSS 는 input·button 같은 요소 선택자와 .btn-* 유틸을 전역에 다시 정의해
  기존 화면(common/board/sub)과 충돌하므로 그 부분은 가져오지 않는다.
  버튼·인풋·체크박스는 프로젝트 디자인 시스템(.bt-*, .form-*, .sel-*)을 그대로 쓴다.

  또 모든 규칙을 페이지 루트 .joinWrap 안에 넣어 이 화면 밖으로 새지 않게 한다.
  (구버전의 .StepGuide 는 sub.css 의 .subHeader .stepTit .StepGuide 와 이름이 겹치지만
   양쪽 다 스코프가 있어 서로 닿지 않는다.)

  STEP 2(정보 입력)는 절 카드(.join_sec)를 쌓는 구성이라 껍데기 흰 카드를 .stepForm.bare 로 벗는다.
  카드 골격은 마이페이지 회원정보수정(pages/_sub.scss 의 "회원정보수정" 절)과 같고,
  카드 안 항목 배치(.form-user)만 이 화면 방식([라벨 위 / 입력 아래])이다.
*/
.joinWrap {
  width: 100%;
  background: #f7f7fc;
  /* 단계 표시 바 : 약관동의 · 정보입력 · 가입완료
     원형 번호를 선으로 잇는다. 지나온 단계(.complete)와 현재 단계(.active) 쪽 선은 파랑,
     남은 단계는 회색이다. 선은 dl 의 ::after 로 [앞 원 중심 → 자기 원 중심]까지 긋는데,
     dl 이 모두 같은 너비(flex:1)여야 -50% 가 앞 원의 중심에 정확히 닿는다.
     (::before 는 태블릿에서 현재 단계 앞의 점으로 쓰므로 선은 ::after 로 긋는다.) */
}
.joinWrap .StepGuide {
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3.3rem 2rem 3.4rem;
  position: relative;
}
.joinWrap .StepGuide dl {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  color: #f3f3f8;
  /* 앞 단계와 잇는 선 — 원 지름(5.6rem)의 절반 높이에 맞춘다 */
}
.joinWrap .StepGuide dl:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 2.8rem;
  margin-top: -0.1rem;
  left: -50%;
  right: 50%;
  height: 0.2rem;
  background: #e0dfe8;
}
.joinWrap .StepGuide dl dt {
  position: relative;
  z-index: 1;
  width: 5.6rem;
  aspect-ratio: 1/1;
  border-radius: 100rem;
  background: #ccc9d5;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.8rem, 1.9531vw, 2rem);
  font-weight: 600;
  overflow: hidden;
}
.joinWrap .StepGuide dl.active::after {
  background: #3060ff;
}
.joinWrap .StepGuide dl.active dt {
  background: #3060ff;
}
.joinWrap .StepGuide dl.active dd {
  color: #3b3844;
}
.joinWrap .StepGuide dl.complete::after {
  background: #3060ff;
}
.joinWrap .StepGuide dl.complete dt {
  text-indent: -9999px;
}
.joinWrap .StepGuide dl.complete dt::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #3060ff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M2.78082 5.71429C2.71576 5.71408 2.65145 5.70049 2.59186 5.67437C2.53228 5.64825 2.4787 5.61016 2.43447 5.56246L0.128607 3.10952C0.0424112 3.01766 -0.00376373 2.89532 0.000240272 2.76942C0.00424428 2.64352 0.0580993 2.52436 0.149958 2.43816C0.241817 2.35197 0.364154 2.30579 0.490058 2.3098C0.615961 2.3138 0.735118 2.36766 0.821314 2.45951L2.77608 4.54238L6.76626 0.177378C6.80675 0.126954 6.85712 0.0853407 6.91428 0.0550935C6.97144 0.0248463 7.03419 0.0066041 7.09865 0.00148739C7.16312 -0.00362932 7.22795 0.00448753 7.28917 0.0253393C7.35039 0.046191 7.4067 0.0793373 7.45464 0.122743C7.50258 0.166148 7.54114 0.218896 7.56795 0.277746C7.59476 0.336596 7.60926 0.400307 7.61055 0.464965C7.61185 0.529622 7.59991 0.593862 7.57547 0.653738C7.55104 0.713614 7.51462 0.767862 7.46845 0.81315L3.13192 5.55772C3.0881 5.60628 3.03471 5.64526 2.97511 5.6722C2.9155 5.69914 2.85097 5.71347 2.78556 5.71429H2.78082Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center center/2.4rem;
}
.joinWrap .StepGuide dl.complete dd {
  color: #3b3844;
}
.joinWrap .StepGuide dl dd {
  font-size: min(4vw, 2rem);
  font-weight: 600;
  color: #aea9ba;
}
.joinWrap {
  /* 단계 본문 */
}
.joinWrap .StepContents {
  padding: min(5rem, 10vw) 0 3rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.joinWrap {
  /* 단계 제목 — 제목은 크게, 아래 한 줄 설명은 본문 크기의 회색 문구다(시안). */
}
.joinWrap .StepTit {
  text-align: center;
  margin-bottom: 2rem;
}
.joinWrap .StepTit h1 {
  font-size: min(7vw, 3.4rem);
  color: #3b3844;
  font-family: "Paperlogy", sans-serif;
  line-height: 1.2;
  word-break: keep-all;
  font-weight: 600;
  text-wrap-style: pretty;
}
.joinWrap .StepTit h1 strong {
  color: #3060ff;
}
.joinWrap .StepTit > p {
  color: #9590a2;
  font-weight: 300;
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  line-height: 1.4;
  word-break: keep-all;
  text-wrap-style: pretty;
  margin-top: 1.2rem;
}
.joinWrap .StepTit > p span {
  color: #3b3844;
  font-weight: 700;
}
.joinWrap {
  /* 흰 카드(약관·입력폼 공통 껍데기) */
}
.joinWrap .stepForm {
  width: calc(100% - min(6rem, 6vw));
  max-width: 100rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: min(4rem, 6vw);
  border-radius: 0.8rem;
  background: #ffffff;
  /* 안쪽에 절 카드(.join_sec)를 쌓는 단계는 껍데기를 벗는다 —
     흰 칸 위에 흰 칸이 겹치면 카드 경계가 보이지 않는다. */
}
.joinWrap .stepForm.bare {
  padding: 0;
  border-radius: 0;
  background: none;
}
.joinWrap {
  /* STEP 1 : 약관 동의 */
}
.joinWrap .agreeSet .join_all {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #ccc9d5;
}
.joinWrap .agreeSet .join_all label {
  font-size: clamp(1.8rem, 1.9531vw, 2rem);
  color: #3b3844;
}
.joinWrap .agreeSet .joinList .jl_item {
  margin-bottom: 3rem;
}
.joinWrap .agreeSet .joinList .jl_item:last-child {
  margin-bottom: 0;
}
.joinWrap .agreeSet .joinList .jl_item > p {
  padding-bottom: 1rem;
}
.joinWrap .agreeSet .joinList .jl_item {
  /* 약관 본문 박스 */
}
.joinWrap .agreeSet .joinList .jl_item > div {
  border: 1px solid #ccc9d5;
  box-sizing: border-box;
  padding: 2rem;
  color: #7a7588;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.7578vw, 1.8rem);
}
.joinWrap .agreeSet .joinList .jl_item > div > div {
  max-height: 27rem;
  min-height: 10rem;
  overflow-y: auto;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: #ccc9d5 #f7f7fc;
}
.joinWrap {
  /* 약관 본문(장·조 구조) */
}
.joinWrap .policyArea {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.joinWrap .policySec > p {
  font-size: clamp(1.8rem, 1.9531vw, 2rem);
  color: #3b3844;
  font-weight: 700;
  margin-bottom: 1rem;
}
.joinWrap .policy-define {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.joinWrap .policy-define dl {
  font-size: clamp(1.6rem, 1.7578vw, 1.8rem);
  line-height: 1.3;
}
.joinWrap .policy-define dl dt {
  color: #3b3844;
  font-weight: 700;
}
.joinWrap .policy-define dl dd {
  color: #7a7588;
  font-weight: 400;
}
.joinWrap .policy-define {
  /* 점 목록 */
}
.joinWrap .policy-define ol {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  line-height: 1.4;
  margin-top: 0.6rem;
  font-weight: 300;
}
.joinWrap .policy-define ol li {
  position: relative;
  margin-left: 1rem;
}
.joinWrap .policy-define ol li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  border-radius: 10rem;
  background: #7a7588;
  position: absolute;
  top: 0.9rem;
  left: -1rem;
}
.joinWrap .policy-define {
  /* 번호 목록 */
}
.joinWrap .policy-define ul {
  counter-reset: policy-num 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  line-height: 1.4;
  font-weight: 300;
}
.joinWrap .policy-define ul li {
  counter-increment: policy-num;
  margin-left: 2.2rem;
}
.joinWrap .policy-define ul li::before {
  content: counter(policy-num);
  font-size: 1.2rem;
  font-weight: 700;
  border: 2px solid #9590a2;
  color: #9590a2;
  line-height: 0.5;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 10rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -0.2rem;
  margin-right: 0.5rem;
  margin-left: -2.2rem;
}
.joinWrap .policy-define ul .caution {
  display: block;
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  line-height: 1.4;
  color: #9590a2;
}
.joinWrap .policy-define ul .caution::before {
  content: "※";
  display: inline-block;
  margin-right: 0.2rem;
}
.joinWrap {
  /* STEP 2 : 정보 입력
     절(節) 카드 [계정정보 / 기본정보 / 본인인증] 을 쌓고, 카드 안 항목은
     [라벨 위 / 입력 아래] 로 한 줄에 하나씩 쌓는다.
     카드 골격은 마이페이지 회원정보수정(pages/_sub.scss 의 "회원정보수정" 절)과 같고,
     항목 배치만 이 화면 방식이다 — 가입은 처음 오는 사람이 위에서 아래로 한 번만 읽어 내려가게 한다. */
  /* 절 카드 — 제목 아래를 선으로 끊고 그 밑에 항목을 담는다. */
}
.joinWrap .join_sec {
  padding: min(3rem, 5vw);
  border: 0.1rem solid #e0dfe8;
  border-radius: 0.8rem;
  background: #ffffff;
}
.joinWrap .join_sec > h3 {
  padding-bottom: 1.6rem;
  margin-bottom: 2.4rem;
  border-bottom: 0.1rem solid #e0dfe8;
  font-size: clamp(1.8rem, 1.9531vw, 2rem);
  font-weight: 600;
  color: #3b3844;
}
.joinWrap {
  /* 카드 안 항목 목록 — 한 줄이 dl 하나다. */
}
.joinWrap .join_list {
  display: flex;
  flex-direction: column;
  gap: min(2rem, 4vw);
}
.joinWrap {
  /* 폼 자체는 절 카드를 쌓는 열이다(카드 사이 간격). */
}
.joinWrap .form-user {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.joinWrap .form-user dl {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.joinWrap .form-user dl dt {
  color: #3b3844;
  font-size: clamp(1.6rem, 1.7578vw, 1.8rem);
  font-weight: 500;
}
.joinWrap .form-user dl dt i.imp {
  color: #e61e21;
  display: inline-block;
  margin-left: 0.1rem;
}
.joinWrap .form-user dl dd {
  /* 인풋 + 버튼 한 줄 */
}
.joinWrap .form-user dl dd .cut-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.joinWrap .form-user dl dd .cut-flex button, .joinWrap .form-user dl dd .cut-flex a {
  flex-shrink: 0;
}
.joinWrap .form-user dl dd .cut-flex.half {
  width: calc(50% - 0.5rem);
}
.joinWrap .form-user dl dd .cut-flex:not(:last-of-type) {
  margin-bottom: 1rem;
}
.joinWrap .form-user dl dd .cut-flex span {
  color: #7a7588;
  font-weight: 200;
}
.joinWrap .form-user dl dd .cut-flex span.dash {
  min-width: 1.4rem;
  text-align: center;
}
.joinWrap .form-user dl dd.checkBox {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.joinWrap {
  /* 프로필 사진 선택과 미리보기 */
}
.joinWrap .join_photo {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: #f5f7ff;
  border-radius: 1rem;
  border: 0.1rem solid #cbd7ff;
}
.joinWrap .join_photo [hidden] {
  display: none;
}
.joinWrap .join_photo .join_photo_preview {
  flex-shrink: 0;
  width: 12rem;
  height: 12rem;
  overflow: hidden;
  border: 0.1rem solid #dbe4ff;
  border-radius: 0.6rem;
  background: #ffffff;
}
.joinWrap .join_photo .join_photo_preview > i {
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10.4733 8.47338C11.1269 7.95915 11.604 7.25399 11.8382 6.456C12.0723 5.65802 12.0519 4.80689 11.7799 4.02102C11.5078 3.23516 10.9975 2.55364 10.32 2.07128C9.64259 1.58892 8.83163 1.32971 8 1.32971C7.16836 1.32971 6.35741 1.58892 5.67995 2.07128C5.00249 2.55364 4.49223 3.23516 4.22014 4.02102C3.94805 4.80689 3.92767 5.65802 4.16184 6.456C4.396 7.25399 4.87307 7.95915 5.52666 8.47338C4.40672 8.92207 3.42952 9.66628 2.69926 10.6267C1.969 11.587 1.51304 12.7276 1.38 13.9267C1.37037 14.0143 1.37808 14.1028 1.40268 14.1874C1.42729 14.272 1.46831 14.3509 1.52341 14.4196C1.63468 14.5584 1.79652 14.6473 1.97333 14.6667C2.15014 14.6862 2.32744 14.6346 2.46621 14.5233C2.60499 14.412 2.69388 14.2502 2.71333 14.0734C2.85972 12.7702 3.48112 11.5666 4.45881 10.6926C5.4365 9.81856 6.70193 9.3354 8.01333 9.3354C9.32473 9.3354 10.5902 9.81856 11.5679 10.6926C12.5455 11.5666 13.1669 12.7702 13.3133 14.0734C13.3315 14.2372 13.4096 14.3885 13.5327 14.4981C13.6559 14.6076 13.8152 14.6677 13.98 14.6667H14.0533C14.2281 14.6466 14.3878 14.5582 14.4977 14.4209C14.6076 14.2835 14.6587 14.1083 14.64 13.9334C14.5063 12.7308 14.0479 11.5874 13.3139 10.6255C12.5799 9.66366 11.5979 8.9197 10.4733 8.47338V8.47338ZM8 8.00004C7.47258 8.00004 6.95701 7.84365 6.51848 7.55063C6.07995 7.25761 5.73815 6.84114 5.53632 6.35387C5.33449 5.8666 5.28168 5.33042 5.38457 4.81314C5.48746 4.29585 5.74144 3.8207 6.11438 3.44776C6.48732 3.07482 6.96247 2.82084 7.47976 2.71795C7.99704 2.61505 8.53322 2.66786 9.02049 2.8697C9.50776 3.07153 9.92423 3.41332 10.2173 3.85186C10.5103 4.29039 10.6667 4.80596 10.6667 5.33338C10.6667 6.04062 10.3857 6.7189 9.88562 7.21899C9.38552 7.71909 8.70724 8.00004 8 8.00004Z' fill='%23aea9ba'/%3E%3C/svg%3E") no-repeat center/50%;
}
.joinWrap .join_photo .join_photo_preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.joinWrap .join_photo .join_photo_preview > [hidden] {
  display: none;
}
.joinWrap .join_photo .join_photo_controls {
  min-width: 0;
}
.joinWrap .join_photo .join_photo_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.joinWrap .join_photo .join_photo_buttons button, .joinWrap .join_photo .join_photo_buttons a {
  min-width: 9rem;
}
.joinWrap .join_photo .join_photo_help, .joinWrap .join_photo .join_photo_status {
  margin-top: 0.8rem;
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  color: #8d869b;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.joinWrap .join_photo .join_photo_status.is-error {
  color: #e61e21;
}
@media screen and (max-width: 720px) {
  .joinWrap .join_photo {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .joinWrap .join_photo .join_photo_preview {
    width: 9.6rem;
    height: 9.6rem;
  }
}
.joinWrap {
  /* 첨부파일(.file-drop-s / .file-list) — board.css 공통 컴포넌트를 이력사항 칸에서 그대로 쓴다.
     컴포넌트 머리말의 dl 은 [총 N개파일 (용량)] 가로 배치인데, 위 .form-user dl(세로 쌓기)과 특이도가
     같아(둘 다 0,2,1) 나중에 읽히는 이 파일이 이겨 버린다. 컴포넌트 배치를 여기서 되돌린다.
     (.fl_list 안쪽 dl 은 board.css 규칙이 더 구체적이라 손댈 필요가 없다.) */
}
.joinWrap .file-list .fl_head dl {
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
}
.joinWrap .file-list .fl_head dl dt {
  font-size: clamp(1.2rem, 1.3672vw, 1.4rem);
  font-weight: 700;
}
.joinWrap {
  /* 안내·오류 문구 */
}
.joinWrap .ip-cau {
  position: relative;
  color: #9590a2;
  font-weight: 300;
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  margin-top: 1rem;
  margin-left: 2.6rem;
  display: none;
}
.joinWrap .ip-cau::before {
  content: "!";
  background: #3b3844;
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: center;
  width: 2rem;
  height: 2rem;
  border-radius: 100rem;
  position: absolute;
  left: -2.6rem;
  top: 0.1rem;
}
.joinWrap .ip-cau.on {
  display: block;
}
.joinWrap .ip-cau.warring {
  color: #e61e21;
  font-weight: 400;
  display: block;
}
.joinWrap .ip-cau.warring::before {
  background-color: #e61e21;
}
.joinWrap {
  /* 본인인증 안내 — 본인인증 절 카드에 담기는 가로형 안내 상자.
     [원형 아이콘 | 제목·설명·버튼] 이며 카드 안이라 테두리 없이 배경만 옅게 깐다. */
}
.joinWrap .cer-item {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: min(2.4rem, 5vw);
  border-radius: 0.8rem;
  background: #f7f7fc;
}
.joinWrap .cer-item > i {
  flex-shrink: 0;
  width: 7rem;
  aspect-ratio: 1/1;
  border-radius: 100rem;
  background: #ebf0ff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.38419 0V0.00106879C4.91379 -0.00241468 5.427 0.185328 5.82867 0.530117C6.18145 0.83306 6.42738 1.23875 6.53324 1.68761L6.56965 1.8832L6.57072 1.88961C6.65598 2.53482 6.81408 3.16837 7.04186 3.77816C7.18938 4.16985 7.22138 4.59587 7.13395 5.00512C7.0465 5.4144 6.84304 5.79023 6.54823 6.0878L6.54609 6.09101L6.02248 6.61257C6.8819 7.95848 8.02573 9.09987 9.37402 9.95787L9.89763 9.4363L9.90084 9.43417C10.199 9.13991 10.5755 8.93683 10.9855 8.84954C11.3946 8.76248 11.8199 8.79404 12.2116 8.94039H12.2127C12.6713 9.11121 13.1436 9.24265 13.6239 9.3337L14.1069 9.41172L14.1133 9.41279C14.6459 9.48779 15.1329 9.75558 15.4807 10.1652C15.8242 10.5701 16.0076 11.0855 15.9989 11.6156L16 13.8023L15.9882 14.0299C15.9654 14.2562 15.9074 14.478 15.8158 14.6872C15.6935 14.9665 15.514 15.2176 15.289 15.4236C15.0641 15.6296 14.7986 15.7866 14.5095 15.8843C14.2202 15.9819 13.9131 16.0186 13.609 15.9912L13.5961 15.9901V15.989C11.2332 15.7327 8.96328 14.9274 6.96905 13.6366V13.6356C5.1166 12.4594 3.54508 10.8921 2.36684 9.04299C1.06916 7.04344 0.262111 4.76639 0.0100592 2.39728L0.00898842 2.3866C-0.0183983 2.0841 0.0168592 1.77881 0.113925 1.49096C0.21109 1.203 0.368067 0.938367 0.573289 0.713948C0.778544 0.489515 1.02828 0.309819 1.30677 0.187037C1.58509 0.0643549 1.88592 0.000345975 2.19016 0H4.38419ZM2.04133 1.47599C1.99216 1.48638 1.94407 1.5016 1.89784 1.52195C1.80502 1.56287 1.72105 1.62242 1.65263 1.69723C1.58422 1.77204 1.5319 1.86095 1.49951 1.95695C1.4676 2.0518 1.45558 2.15226 1.46418 2.25193C1.67868 4.25645 2.33371 6.18727 3.3798 7.90794L3.59396 8.24995L3.59824 8.2553C4.59649 9.82323 5.90701 11.168 7.44769 12.2055L7.75821 12.4086L7.76464 12.4118C9.56417 13.5766 11.6119 14.3037 13.7439 14.5365C13.8441 14.5452 13.9451 14.5345 14.0405 14.5023C14.1369 14.4698 14.2257 14.4171 14.3007 14.3484C14.3757 14.2798 14.4355 14.1957 14.4763 14.1026C14.5169 14.0096 14.5377 13.9091 14.5373 13.8076V11.5985C14.5418 11.4195 14.4808 11.2444 14.3649 11.1079C14.249 10.9714 14.0863 10.8828 13.9088 10.8578V10.8557C13.1548 10.7558 12.4145 10.5728 11.7019 10.3074H11.6998C11.5691 10.2584 11.4272 10.2474 11.2907 10.2764C11.1553 10.3052 11.0298 10.3711 10.9309 10.4677L10.0036 11.3954C9.77099 11.6276 9.41161 11.6752 9.1256 11.513C7.18117 10.4094 5.5712 8.80241 4.46557 6.8616C4.30303 6.57613 4.35076 6.21741 4.58336 5.9852L5.51172 5.05856C5.60846 4.95983 5.67559 4.83563 5.70446 4.70052C5.7335 4.56426 5.72249 4.42265 5.67341 4.29224V4.2901C5.40736 3.57844 5.2219 2.83927 5.12196 2.08627C5.09698 1.91147 5.00973 1.75154 4.87568 1.63631C4.74125 1.52092 4.56897 1.45828 4.39169 1.45996H2.19231L2.04133 1.47599Z' fill='%233060ff'/%3E%3C/svg%3E") no-repeat center center/3.2rem;
}
.joinWrap .cer-item {
  /* 제목·설명·버튼을 한 열로 쌓는다 — 버튼은 설명 아래 왼쪽에 붙는다(시안). */
}
.joinWrap .cer-item .cer_info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.joinWrap .cer-item .cer_info > button {
  margin-top: 1.2rem;
}
.joinWrap .cer-item dt {
  font-size: clamp(1.6rem, 1.7578vw, 1.8rem);
  font-weight: 600;
  color: #3b3844;
}
.joinWrap .cer-item dd {
  margin-top: 0.6rem;
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  color: #7a7588;
  line-height: 1.4;
}
.joinWrap {
  /* STEP 3 : 가입 완료 */
}
.joinWrap .user-info {
  width: calc(100% - min(6rem, 6vw));
  max-width: 90rem;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 1rem;
  padding: min(4rem, 6vw);
  border: 0.3rem solid #e0dfe8;
  box-sizing: border-box;
}
.joinWrap .user-info > i {
  width: min(12rem, 16vw);
  height: min(12rem, 16vw);
  display: block;
  margin: 0 auto 1rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10.4733 8.47338C11.1269 7.95915 11.604 7.25399 11.8382 6.456C12.0723 5.65802 12.0519 4.80689 11.7799 4.02102C11.5078 3.23516 10.9975 2.55364 10.32 2.07128C9.64259 1.58892 8.83163 1.32971 8 1.32971C7.16836 1.32971 6.35741 1.58892 5.67995 2.07128C5.00249 2.55364 4.49223 3.23516 4.22014 4.02102C3.94805 4.80689 3.92767 5.65802 4.16184 6.456C4.396 7.25399 4.87307 7.95915 5.52666 8.47338C4.40672 8.92207 3.42952 9.66628 2.69926 10.6267C1.969 11.587 1.51304 12.7276 1.38 13.9267C1.37037 14.0143 1.37808 14.1028 1.40268 14.1874C1.42729 14.272 1.46831 14.3509 1.52341 14.4196C1.63468 14.5584 1.79652 14.6473 1.97333 14.6667C2.15014 14.6862 2.32744 14.6346 2.46621 14.5233C2.60499 14.412 2.69388 14.2502 2.71333 14.0734C2.85972 12.7702 3.48112 11.5666 4.45881 10.6926C5.4365 9.81856 6.70193 9.3354 8.01333 9.3354C9.32473 9.3354 10.5902 9.81856 11.5679 10.6926C12.5455 11.5666 13.1669 12.7702 13.3133 14.0734C13.3315 14.2372 13.4096 14.3885 13.5327 14.4981C13.6559 14.6076 13.8152 14.6677 13.98 14.6667H14.0533C14.2281 14.6466 14.3878 14.5582 14.4977 14.4209C14.6076 14.2835 14.6587 14.1083 14.64 13.9334C14.5063 12.7308 14.0479 11.5874 13.3139 10.6255C12.5799 9.66366 11.5979 8.9197 10.4733 8.47338V8.47338ZM8 8.00004C7.47258 8.00004 6.95701 7.84365 6.51848 7.55063C6.07995 7.25761 5.73815 6.84114 5.53632 6.35387C5.33449 5.8666 5.28168 5.33042 5.38457 4.81314C5.48746 4.29585 5.74144 3.8207 6.11438 3.44776C6.48732 3.07482 6.96247 2.82084 7.47976 2.71795C7.99704 2.61505 8.53322 2.66786 9.02049 2.8697C9.50776 3.07153 9.92423 3.41332 10.2173 3.85186C10.5103 4.29039 10.6667 4.80596 10.6667 5.33338C10.6667 6.04062 10.3857 6.7189 9.88562 7.21899C9.38552 7.71909 8.70724 8.00004 8 8.00004Z' fill='%233060ff'/%3E%3C/svg%3E") no-repeat center/contain;
}
.joinWrap .user-info > img {
  display: block;
  max-width: 10rem;
  margin: 0 auto;
  margin-bottom: 0.4rem;
}
.joinWrap .user-info h2 {
  font-family: "Paperlogy", sans-serif;
  font-size: clamp(3rem, 3.5156vw, 3.6rem);
  font-weight: 700;
  text-align: center;
  color: #3060ff;
  margin-bottom: 2rem;
}
.joinWrap .user-info .user-data {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.joinWrap .user-info dl {
  border-radius: 10rem;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: #f7f7fc;
  padding: 1.4rem 4rem;
  color: #3b3844;
  box-sizing: border-box;
}
.joinWrap .user-info dl dt {
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  min-width: 5.8rem;
  text-align-last: justify;
  padding-top: 0.2rem;
}
.joinWrap .user-info dl dd {
  font-size: clamp(2.2rem, 2.5391vw, 2.6rem);
  display: flex;
  align-items: center;
  line-height: 1;
}
.joinWrap .user-info dl dd::before {
  content: "";
  width: 1px;
  height: 1.2rem;
  background: #ccc9d5;
  display: inline-block;
  margin: 0 1.4rem;
}
.joinWrap .user-info .caution {
  color: #9590a2;
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  font-weight: 300;
  display: block;
  text-align: center;
  margin-top: 1.5rem;
}
.joinWrap {
  /* 하단 버튼 줄 */
}
.joinWrap .btnArea {
  display: flex;
  gap: 1rem;
  margin: min(6vw, 6rem) 0 min(8vw, 10rem);
}
.joinWrap .btnArea.f_center {
  justify-content: center;
}
.joinWrap .btnArea.f_right {
  justify-content: flex-end;
}
.joinWrap .btnArea {
  /* 디자인 시스템 버튼은 폭이 내용에 맞춰지므로 단계 버튼만 최소 폭을 준다 */
}
.joinWrap .btnArea [class^=bt-] {
  min-width: min(16rem, 40vw);
}
.joinWrap {
  /* 단계 전환 : JS 가 .on 을 옮겨 붙인다 */
}
.joinWrap .stepPanel {
  display: none;
}
.joinWrap .stepPanel.on {
  display: block;
}

.job-field {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
}
.job-field .job-field-group {
  min-height: 5rem;
}
.job-field .job-field-group.job-field-etc {
  flex-grow: 1;
}

@media screen and (max-width: 720px) {
  .joinWrap .StepGuide {
    padding: 4vw 3vw;
  }
  .joinWrap .StepGuide dl dt {
    display: none;
  }
  .joinWrap .StepGuide dl {
    /* 원을 감추므로 잇는 선도 함께 감춘다 */
  }
  .joinWrap .StepGuide dl::after {
    display: none;
  }
  .joinWrap .StepGuide dl.active::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 10rem;
    background: #92acff;
    margin-right: 1.6vw;
  }
  .joinWrap .user-info dl {
    flex-direction: column;
  }
  .joinWrap .user-info dl dd::before {
    display: none;
  }
  .joinWrap .form-user dl dd .cut-flex.half {
    width: 100%;
  }
  .joinWrap {
    /* 본인인증 안내는 아이콘을 위로 올려 한 열로 쌓는다. */
  }
  .joinWrap .cer-item {
    flex-direction: column;
    gap: 1.6rem;
  }
  .joinWrap .cer-item > i {
    width: 6rem;
  }
  .joinWrap .cer-item .cer_info {
    align-items: center;
    text-align: center;
  }
}