@font-face {
    font-family: "Pretendard-Regular";
    src: url("https://contents-em.infovine.co.kr/CareServiceFiles/homepage/fonts/Pretendard-Regular.woff2") format("woff2");
    /*src: url("./Pretendard-Regular.woff2") format("woff2");*/
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Pretendard-Bold";
    src: url("https://contents-em.infovine.co.kr/CareServiceFiles/homepage/fonts/Pretendard-Bold.woff2") format("woff2");
    /*src: url("./Pretendard-Bold.woff2") format("woff2");*/
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
* {
    box-sizing: border-box;
}
.btn-telecom {
    width: 100%;
    font-size: 20px;
    height: 60px;
    /* border-radius: 6px; */
    cursor: pointer;
    background: #ffffff;
    border: solid 1px #0468ff;
    color: #171717;
    font-family: Pretendard-Bold;
}
.area-telecom {
    width: 100%;
    margin-top: 32px;
    display: flex;
    line-height: 3;
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -0.5px;
    color: #171717;
}

#toastPopup {
    position: fixed;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#toastPopup label {
    background: gray;
    padding: 10px 20px;
    border: 1px solid gray;
    border-radius: 23px;
    color: white;
}

/* 아래에서 위로 슬라이드하며 나타나는 상태 */
#toastPopup.active {
    transform: translateX(50%) translateY(0);
    opacity: 1;
}
.b-active {
    color: white;
    background-color: #0468ff;
    font-family: MalgunGothic;
}
.b-skt {
    border-radius: 8px 0px 0px 8px;
}
.b-lgu {
    border-radius: 0px 8px 8px 0px;
}
.signup_title {
    font-family: Pretendard-Bold;
    font-size: 52px;
    font-weight: bold;
    line-height: 1.31;
    letter-spacing: -1.3px;
    text-align: center;
    color: #171717;
}
.signup_subtitle {
    margin-top: 32px;
    font-family: Pretendard-Regular;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: -0.6px;
    text-align: center;
    color: #171717;
}

.authArea {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box; /* height: 50px; */
    margin-top: 10px;
    gap: 5px;
}
.authArea > input {
    height: 60px;
    border-radius: 8px;
    border: solid 1px #0468ff;
    background-color: #fff;
    width: 100%;
    font-family: Pretendard-Bold;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-align: left;
    color: #171717;
    padding: 18px 20px;
}
.authArea > button {
    width: 152px;
    height: 60px;
    border-radius: 8px;
    border: 0px;
    background-color: #0468ff;
    text-align: center;
    font-family: Pretendard-Bold;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: #fff;
}

.authArea > button:disabled {
    width: 152px;
    height: 60px;
    border-radius: 8px;
    border: 0px;
    background-color: #d1d1d1;
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: #fff;
}
.authNubmerArea > input {
    height: 60px;
    border-radius: 8px;
    border: solid 1px #0468ff;
    background-color: #fff;
    width: 100%;
    font-family: Pretendard-Bold;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-align: left;
    color: #171717;
    padding: 18px 20px;
}

.authNubmerArea > span {
    font-family: Pretendard-Bold;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #0468ff;
}
.termsAreaDiv{
width:100%;
}
.termsArea {
    margin-top: 10px;
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    /*margin: 32px 21px 0px;*/
    padding: 20px 20px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 16px 0 rgba(51, 51, 51, 0.09);
    background-color: #fff;
}
.termsArea_dash {
    border-bottom: 1px solid #ededed;
    margin: 16px 0px 0px 0px;
}
.custom-checkbox {
    display: none;
}

.checkbox-label {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("https://contents-em.infovine.co.kr/CareServiceFiles/homepage/images/checkbox-off@2x.png"); /* 체크 안된 이미지 */
    background-size: cover;
    cursor: pointer;
}

/* 체크된 상태 */
.custom-checkbox:checked + .checkbox-label {
    background-image: url("https://contents-em.infovine.co.kr/CareServiceFiles/homepage/images/checkbox-on@2x.png"); /* 체크된 이미지 */
}
.termsArea_checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-family: Pretendard-Regular;
}

.checkall-text {
    font-weight: bold;
    font-family: Pretendard-Bold;
}

.checkall-text > span {
    margin-left: 5px;
    font-family: Pretendard-Regular;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.19;
    letter-spacing: -0.4px;
    color: #0468ff;
}
.termsRow {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    margin-top: 19px;
}

.termsArea_checkbox.checkall {
    margin-top: 0;
}
.termsRow > img {
    width: 20px;
    height: 20px;
}
.joinBtnArea {
    margin-top: 16px;
    width: 100%;
    display: none;
}
.joinBtnArea > button {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    background-color: #0468ff;
    border: 0px;
    font-family: Pretendard;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -0.5px;
    text-align: center;
    color: #fff;
}

.joinBtnArea > button:disabled {
    background-color: #d1d1d1;
}

.authNubmerArea {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    position: relative;

}

#signupForm {
    max-width: 580px;
    margin: 60px auto 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height:90vh;
}


@media (max-width: 1200px) {
  #signupForm { padding: 0 35px; }
  .authArea > input,
  .authNubmerArea > input { height: 56px; font-size: 18px; }
  .authArea > button { height: 56px; font-size: 18px; }
  .authArea > button:disabled { height: 56px; font-size: 18px; }
}

/* =========================
   1080↓ (원하면 사용, 없으면 생략 가능)
   ========================= */
@media (max-width: 1080px) {
  .signup_title { font-size: 44px; }
  .signup_subtitle { font-size: 20px; }
  .btn-telecom { height: 56px; font-size: 18px; }
}

/* =========================
   765↓ (원하면 사용, 없으면 생략 가능)
   ========================= */
@media (max-width: 765px) {
  .signup_title { font-size: 36px; }
  .signup_subtitle { font-size: 18px; line-height: 1.6; }
  .area-telecom { margin-top: 24px;}
  .btn-telecom { height: 52px; font-size: 17px; }
  .authArea { gap: 8px; }
  .authArea > input { height: 52px; font-size: 16px; }
  .authArea > button,
  .authArea > button:disabled { height: 48px; font-size: 16px; width: 132px; }
}
@media (max-width: 1200px) {

    #signupForm {
        padding: 0px 35px;
    }
}

@media (max-width: 765px) {

}
@media (max-width: 430px) {
  #signupForm{ margin-top:40px; }
  .signup_title{ font-size:28px; }
  .signup_subtitle{
    font-size:16px;
    margin-top:20px;
    letter-spacing: -1px !important;
  }
  .area-telecom{
    margin-top:20px;
  }
  .btn-telecom{ font-size: 16px; }
  .authArea{ gap : 8px; }
  .authArea > input { font-size:16px; }
  .authArea > button{
    width : 125px;
    font-size:16px;
    flex-shrink: 0;
  }
  .authNubmerArea > span{
    position: absolute;
    font-size:14px;
  }
  .authNubmerArea > input{ font-size: 16px; }

  .termsArea{
    margin: 20px 0px 0px;
    gap:0px;
  }
  .termsAreaDiv{ width: 100%; }
  .checkall-text > span{ font-size:14px; }
  .termsArea_checkbox{ font-size:16px; }
  .termsRow > .termsArea_checkbox{ font-size:14px; }
  .termsRow > img{ width:16px; height:16px; }

  .authArea > button:disabled{
    font-size:14px;
    width:125px;
  }
  .joinBtnArea > button{ font-size:16px; }
}