@charset "UTF-8";


/* login */
body{
    margin: 0 auto;
}

.login h2{
    padding: 80px 16px 0px;
    font-size: 24px;
    margin-bottom: 56px;
}

.login .input_box{
    padding: 0px 16px;
}

.login .input_box .email{
    margin-bottom: 14px;
}

.login .input_box .password{
    margin-bottom: 32px;
}

.login .btn_box {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 768px; /* ✅ 원하는 최대 폭 설정 */
    padding: 16px;
    z-index: 100;
}

.login .btn_box .find_box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 72px;
    flex-wrap: nowrap;
    margin-bottom: 48px;
}

.login .btn_box .find_box button {
    white-space: nowrap; 
    flex-shrink: 0; 
}

.login .btn_box .find_box .email{
    margin-right: 51px;
    color: var(--gray-400);
}

.login .btn_box .find_box .password{
    color: var(--gray-400);
}

.login .input_box .input_wrap{
    position: relative;
}

.login .input_box .form_control {
  width: 100%;
  padding-right: 40px; /* 아이콘 공간 확보 */
  box-sizing: border-box;
}

.login .input_box .toggle_password {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.login .input_box .toggle_password img {
  width: 20px;
  height: 20px;
}

/* find_password */
.find_password > div:first-child{
    min-height: calc(100vh - 128px);
    padding: 40px 16px 0px;
}

.find_password h2{
    font-size: 24px;
    margin-bottom: 40px;
}

.find_password .input_box .email{
    margin-bottom: 14px;
}

.find_password .btn_box{
    padding: 8px 16px 8px;
}

/* sign_up */
.sign_up > div:first-child{
    min-height: calc(100vh - 128px);
    padding: 40px 16px 0px;
}

.sign_up h2{
    font-size: 24px;
    margin-bottom: 40px;
}

.sign_up .input_box .email{
    margin-bottom: 32px;
}

.sign_up .input_box .text{
    margin-bottom: 32px;
}

.sign_up .input_box .password{
    margin-bottom: 14px;
}

.sign_up .input_box .input_wrap{
    position: relative;
}

.sign_up .input_box .form_control {
  width: 100%;
  padding-right: 40px; /* 아이콘 공간 확보 */
  box-sizing: border-box;
}

.sign_up .input_box .toggle_password {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sign_up .input_box .toggle_password img {
  width: 20px;
  height: 20px;
}



.sign_up .check_box .custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.sign_up .check_box .checkbox-box {
    width: 24px;
    height: 24px;
    padding: 2px;
    background-color: #C6C6C6;
    border-radius: 5px;
    margin-right: 16px;
}

.sign_up .check_box .custom-checkbox input[type="checkbox"]:checked + .checkbox-box {
  background-color: #3D4771;
}

.sign_up .check_box .checkbox-box img{
    width: 20px;
    height: 20px;
}

.sign_up .check_box .custom-checkbox span.essential{
    margin-left: 6px;
}




.sign_up .check_box{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0px 16px;
   height: 64px;
}

.sign_up .check_box .chevron_right_icon{
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.sign_up .check_box p{
    font-size: 15px;
}

.sign_up .check_box span{
    margin-left: 6px;
    font-size: 13px;
    color: var(--gray-600, #727272)
}

.sign_up .btn_box{
    padding: 8px 16px 8px;
}

/* reception_main */


.reception_main h2{
    padding: 24px 16px;
    font-size: 20px;
    font-weight: 500;
}

.reception_main section{
    padding: 0px 16px;
}

.reception_main section .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.reception_main section .title div{
    display: flex;
    align-items: center;
}

.reception_main section .title img{
    margin-right: 8px;
    width: 18px;
    height: 18px;
}

.reception_main section .title p{
    font-size: 18px;
    font-weight: 600;
}

.reception_main .option_box{
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    justify-content: space-between;
}

.reception_main .company .option_box div{
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border-radius: 10px;
    background: #F6F6F6;
    width: calc(50% - 10px);
    height: 96px;
    border: 2px solid transparent;
}

.reception_main .company .option_box .focus,
.reception_main .type .option_box .focus,
.reception_main .detail .option_box .focus,
.reception_main .grade .option_box .focus{
    border: 2px solid var(--phones-blue-700, #5365AB);
    background: var(--phones-blue-100, #E5ECF6);
}

.reception_main .company .option_box p{
    font-size: 14px;
    font-weight: 600;
}


.reception_main .company .option_box .samsung_logo{
    width: 68px;
    margin-bottom: 15px;
    padding: 24px 0px 0px;
}

.reception_main .company .option_box .apple_logo{
    width: 24px;
    margin-bottom: 15px;
    padding: 24px 0px 0px;
}

.divider {
  border: none;
  height: 1px;
  background-color:#E3E3E3;
  margin: 20px 0px;
}

.reception_main .type .option_box div,
.reception_main .detail .option_box div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0 auto;
    background: #F6F6F6;
    width: calc(33.33% - 10px);
    height: 64px;
}

.reception_main .photo .photo_group{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reception_main .photo .photo_group .box_wrapper {
    display: inline-block;
    position: relative;
}

.reception_main .photo .photo_group .box_label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.reception_main .photo .photo_group {
    display: flex;
    gap: 16px; 
    flex-wrap: wrap;
}

.reception_main .photo .photo_group p{
    font-size: 16px;
}

.reception_main .photo .photo_group .box_wrapper {
    flex: 1 1 calc(50% - 8px); 
    min-width: 140px; 
}

.reception_main .photo .photo_group .box{
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 10px;
    background: #7C7C7C;
    height: 132px;
    width: 100%;
}

.reception_main .photo .photo_group .box .preview{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* ✅ 박스를 꽉 채우면서 비율 유지 */
    object-position: center; /* ✅ 가운데 기준으로 자르기 */
    border-radius: 10px;     /* ✅ 박스와 같은 둥근 모서리 */
    display: none;           /* ✅ 업로드 전에는 숨김 */
}

.reception_main .photo .photo_group .box.plus{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50, #F3F3F3);
    cursor: pointer;
}

.reception_main .photo .photo_group .box.plus .preview{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* ✅ 박스를 꽉 채우면서 비율 유지 */
    object-position: center; /* ✅ 가운데 기준으로 자르기 */
    border-radius: 10px;     /* ✅ 박스와 같은 둥근 모서리 */
    display: none;           /* ✅ 업로드 전에는 숨김 */
    z-index: 1;              /* ✅ plus 아이콘 위로 올라오게 */
}


.reception_main .photo .photo_group .box.plus .plus{
    width: 40px;
    height: 40px;
}

.reception_main .photo .photo_group .edit{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    bottom: 8px;
    height: 31px;
    border-radius: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.50);
    cursor: pointer;
}

.reception_main .photo .photo_group .edit img{
    width: 14px;
    height: 14px;
    margin-right: 1px;
}

.reception_main .photo .photo_group .edit p{
    color: #FFF;
    font-size: 11px;
    font-weight: 500;
}

.reception_main .grade .option_box div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0 auto;
    background: #F6F6F6;
    width: calc(25% - 10px);
    height: 64px;
}

.reception_main .btn_box{
    padding: 40px 16px 8px;
}


/* .reception_confirm */

#contents.reception_confirm{
    background-color: #F8F8F8;
    padding: 0 16px;
}

.reception_confirm > div:first-child{
    min-height: calc(100vh - 128px);
}

.reception_confirm h2{
    padding: 32px 0px 24px;
    font-size: 20px;
    font-weight: 600;
}

.reception_confirm .photo{
    display: flex;
    justify-content: space-between;
}

.reception_confirm .photo div{
    width: calc(50% - 8px);
    height: 140px;
    border-radius: 10px;
    background: #CDCDCD;
    margin-bottom: 24px;
    }

.reception_confirm .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;       /* ✅ 박스를 꽉 채우면서 비율 유지 */
    object-position: center; /* ✅ 가운데 기준으로 자르기 */
    border-radius: 10px;     /* ✅ 박스와 같은 둥근 모서리 */
    }

.reception_confirm .info_box_01{
    padding: 24px 16px;
    border-radius: 10px;
    background: #FFF;
    margin-bottom: 24px;
}

.reception_confirm .label{
    color: var(--gray-900, #393939);
    font-size: 16px;
    font-weight: 500;
}

.reception_confirm .value{
    color: var(--gray-900, #393939);
    font-size: 16px;
    font-weight: 600;
}

.reception_confirm .info_box_02 .value{
    color: var(--phones-blue-900);
}

.reception_confirm .info_box_01 .info_row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.reception_confirm .info_box_01 .info_row_last{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.reception_confirm .info_box_02,
.reception_confirm .info_box_03{
    padding: 20px 16px;
    border-radius: 10px;
    background: #FFF;
    margin-bottom: 24px;
}

.reception_confirm .info_box_02 .info_row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reception_confirm .info_box_03 .info_row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reception_confirm .info_box_03 .info_row p{
    font-size: 18px;
    font-weight: 600;
    margin-top: 6px;
    min-width: calc(100% - 32px);
}

.reception_confirm .info_box_03 .info_row img{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.reception_confirm .btn_box{
    padding: 8px 0px 8px;
}


/* .reception_terms_agree 바텀시트 */
.bottom_sheet {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 10;
    visibility: hidden;
    width: 100vw;
    max-width: 768px;
    min-width: 320px;
    height: 100vh;
}
.bottom_sheet .bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}
.bottom_sheet .con_box{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 768px;
    height: auto;
    padding: 0px 16px 0px;
    border-radius: 28px 28px 0px 0px;
    background: var(--white-0, #FFF);
    transition: bottom 0.3s;
}

#reception_terms_agree.bottom_sheet .title p{
    color: var(--Gray-900, #393939);
    font-size: 20px;
    font-weight: 600;
    padding: 24px 0px;
}

#reception_terms_agree.bottom_sheet .check_box p{
    color: var(--Gray-900, #393939);
    font-size: 16px;
    font-weight: 600;
}

#reception_terms_agree.bottom_sheet .form_chk .check_box{
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 24px;
    width: 100%;
    height: 64px;
    border-radius: 10px;
    background: var(--gray-50, #F3F3F3);
}

#reception_terms_agree.bottom_sheet .form_chk .check_box:has(input[name='termsAgree']:checked) {
    background: var(--phones-blue-50, #F3F6FB);
}

#reception_terms_agree.bottom_sheet .form_chk .check_box .custom-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    }

#reception_terms_agree.bottom_sheet .form_chk .check_box .checkbox-box {
    width: 24px;
    height: 24px;
    padding: 2px;
    background-color: #C6C6C6;
    border-radius: 5px;
    margin-right: 0px;
    flex-shrink: 0;
}

#reception_terms_agree.bottom_sheet .form_chk .check_box .checkbox-box input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#reception_terms_agree.bottom_sheet .form_chk .check_box .checkbox-box:has(input[name='termsAgree']:checked) {
    background-color: #3D4771;
}

#reception_terms_agree.bottom_sheet .form_chk .check_box .checkbox-box img{
    width: 20px;
    height: 20px;
}

#reception_terms_agree.bottom_sheet .form_chk .terms{
    margin-bottom: 24px;
}

#reception_terms_agree.bottom_sheet .form_chk .terms p{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}

#reception_terms_agree.bottom_sheet .btn_box{
    margin: 8px 0px ;
}

/* reception_complete */

.reception_complete > div:first-child{
    min-height: calc(100vh - 128px);
}

#contents.reception_complete {
    padding: 0 16px;
}

.reception_complete .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 0px 32px;
}

.reception_complete .text h2{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.reception_complete .text p{
    font-size: 18px;
    font-weight: 500;
    color: var(--gray-600, #727272);
    margin-bottom: 56px;
}

.reception_complete .text img{
    width: 140px;
    height: 140px;
}

.reception_complete .address_box{
    display: flex;
    padding: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 82px;
    background-color: var(--gray-50, #F3F3F3);
    border-radius: 10px;
}

.reception_complete .address_box img{
    width: 20px;
    height: 20px;
}