@charset "utf-8";

/* ==========================================================================
    Form
   ========================================================================== */
.form-chk01 {
    display: flex; align-items: center;
    .chk-item{appearance: none; width: 30px; height: 30px; border: 1px solid var(--form-border); background-color: var(--bg-color); background-repeat: no-repeat; background-position: center; border-radius: 5px;}
    .chk-item:checked{border-color: var(--point-color01); background-color: var(--point-color01); background-image: url('/assets/site/img/common/ico-check01w.svg');}
    .chk-label{font-size: 14px; color: var(--desc-color); padding-left: 8px; user-select: none}
    &.white .chk-item:checked{ border: 1px solid var(--form-border); background-color: var(--bg-color); background-image: url('/assets/site/img/common/ico-check01.svg');}
}
.form-chk02 {
    display: flex; justify-content: center; align-items: center;
    .chk-item{width: 24px; height: 24px; border: 1px solid var(--form-border);  background-color: var(--bg-color); background-repeat: no-repeat; background-position: center; background-size: 11px auto; border-radius: 4px; margin-top: 0;}
    .chk-item:checked{border-color: var(--form-chk); background-color: var(--form-chk); background-image: url('/assets/site/img/common/ico-check02.svg');}
    .chk-label{font-weight: 500; color: var(--basic-color); padding-left: 10px; user-select: none}
}
.form-radio {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    input[type="radio"] {visibility: hidden; width: 0; height: 0; position: absolute;}
    .radio-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--form-border); transition: .2s ease-out;}
    .radio-icon::after { content: ''; width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--form-point); opacity: 0; transition: .2s ease-out;}
    input[type="radio"]:checked + .radio-icon { border-color: var(--form-point); }
    input[type="radio"]:checked + .radio-icon::after { opacity: 1; }
}
.form-button {
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 44px;
    border: 1px solid var(--form-border); border-radius: 5px; background: #fff;
    font-size: 16px; color: var(--basic-color); text-align: center; cursor: pointer;
    transition: .15s ease-out;
    &.black{border-color: var(--basic-color); background: var(--basic-color); color: #fff;}
}
.form-agree{
    margin-top: 40px;
    .terms-btn{font-size: 12px; color: #888; text-decoration: underline; margin-left: 6px;}
    @media (width <= 860px) {
        .chk-label{font-size: 15px;}
    }
    @media (width <= 640px) {
        .chk-item{width: 20px; height: 20px;}
        .chk-label{padding-left: 6px;}
    }
}
.form-actions {
    display: flex; justify-content: center; gap: 8px; margin-top: 70px;
    .form-button{width: 160px;}
    @media (width <= 860px) {
        margin-top: 50px;
    }
    @media (width <= 640px) {
        .form-button{flex: 1; font-size: 15px;}
    }
}


/* ==========================================================================
    회원가입, 회원정보 변경
   ========================================================================== */
/* 공용 폼 */
.form-container {
    width: 100%; border-top: 1px solid var(--form-border);
    .field-button {
        display: flex; justify-content: center; align-items: center;
        min-width: 120px; padding: 0 4px;
        border-color: var(--basic-color); border-radius: 5px; background: #000;
        color: #fff; text-align: center; transition: .15s ease-out;
        &.white{color: var(--basic-color); border: 1px solid var(--form-border); background: #fff;}
    }
    .field-group {
        display: flex; gap: var(--form-gap);
        .field-input { flex: 1; }
        .email-group{flex: 1; min-width: 0;}
    }
    .radio-group { display: flex; gap: 16px;}
    .email-group {
        display: flex; align-items: center; gap: var(--form-gap); flex: 1; min-width: 0;
        .field-input { flex: 1; min-width: 0; }
        .email-at { font-size: 14px; flex-shrink: 0; }
    }
.form-row {display: flex; flex-direction: column; /*display: grid; grid-template-columns: 140px 1fr;*/ min-height: 80px;/* padding: 19px 0;*/}
    .form-row:not(:last-child){margin-bottom: 20px;}
    .form-label .label-text { display: flex; align-items: center; gap: 8px; font-weight: 600;}
    .form-label .required::after { content:""; display: block; width: 5px; aspect-ratio: 1; background-color: #00A9EB; border-radius: 50%; margin: -8px 0 0;}
    .form-field {display: flex; flex-direction: column; gap: var(--form-gap);}
    .form-guide li {position: relative; font-size: 14px; color: var(--form-desc); line-height: 22px; padding-left: 10px;}
    .form-guide li:not(:last-child){margin-bottom: 4px;}
    .form-guide li::before { content: ""; position: absolute; left: 0; top: 9px; display: block; width: 3px; aspect-ratio: 1; background-color: var(--form-desc); border-radius: 50%;}
    .form-row:has(.form-guide) {
        align-items: start;
        /* .form-label {padding-top: 8px;} */
    }
    @media (width <= 1024px) {
        font-size: 15px;
        .field-input{font-size: 15px;}
        .field-button { min-width: 100px; }
    }
    @media (width <= 860px) {
        /* .form-row {grid-template-columns: 1fr; gap: var(--form-gap); padding: 11px 0 16px;} */
        .form-guide li {font-size: 13px;}
    }
    @media (width <= 640px) {
        /* .form-row:last-child{border-bottom: 1px solid var(--form-border);} */
        .field-button { min-width: 70px; font-size: 13px;}
    }

}




/* ==========================================================================
    기존 FORM
   ========================================================================== */

/* 폼 공통 */
.form_wrap{}
.form_wrap.edit{border-radius: 12px; border: 1px solid #dbdbdb; background: #fff; overflow: hidden; padding: 56px 36px;}
.form_wrap.edit + .btn_wrap{margin-top: 20px;}


/* 상단 타이틀 + 로케이션 */
.form_wrap .sub-title-wrap{display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 36px;}
.form_wrap .sub-title-wrap .sub-title{font-size: 24px; font-weight: 700; color: #000; line-height: 1.2;}
.form_wrap .sub-title-wrap .sub-location{margin: 0 0 0 auto; display: flex; flex-wrap: wrap; font-size: 14px; color: #999;}
.form_wrap .sub-title-wrap .sub-location > li{}
.form_wrap .sub-title-wrap .sub-location > li + li{}
.form_wrap .sub-title-wrap .sub-location > li + li:before{content: ""; display: inline-block; margin: -2px 9px 0 8px; vertical-align: middle; width: 4px; height: auto; aspect-ratio: 1; border-top: 1px solid #999; border-right: 1px solid #999; transform: rotate(45deg);}
.form_wrap .sub-title-wrap .sub-location > li .home{font-size: 0; display: inline-block; margin: -3px 0 0; vertical-align: middle; width: 17px; height: auto; aspect-ratio: 1; background: url("/assets/site/img/common/ico-sub-location-home.svg") no-repeat center / 100% auto;}

/* 양식 테이블 */
.form_wrap .form_table{clear: both; width: 100%; margin: 0 auto; table-layout: fixed; border-collapse: collapse; font-size: 1rem; word-break: keep-all; overflow: hidden; box-sizing: border-box;}
.form_wrap .form_table colgroup {display: none;}
.form_wrap .form_table tbody{display: flex; flex-direction: column; gap: 20px;}
.form_wrap .form_table tbody tr{display: block;}
.form_wrap .form_table tbody tr th{display: block; margin-bottom: 10px; color: #000; box-sizing: border-box; vertical-align: middle; padding: 0; font-weight: 600; text-align: left;}
.form_wrap .form_table tbody tr th label,
.form_wrap .form_table tbody tr th span{position: relative; font-size: 15px; line-height: 1.2;}
.form_wrap .form_table tbody tr th label.necessary:before,
.form_wrap .form_table tbody tr th span.necessary:before{content: "필수입력항목"; position: absolute; top: 0; right: -11px; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: var(--point-color02); font-size: 0;}
.form_wrap .form_table tbody tr td{display: block; box-sizing: border-box; vertical-align: middle;}
.form_wrap .form_table tr td span.added {font-size: 0.9rem; margin-left: 5px; color: #777;}
.form_wrap .form_table .cont.email br,
.form_wrap .form_table .cont.address br{display: none;}

.form_wrap .form_table .captha{display: block; width: 0; height: 0; border: none; opacity: 0; overflow: hidden;}


/* 폼 상단박스 */
.form_wrap .form_info{margin: 0 0 2rem; box-sizing: border-box; padding: 2rem 2rem; background-color: #f5f5f5;}
.form_wrap .form_info p{}

/* 폼 상단 내, 사이드 박스 */
.form_wrap .form_info_side{margin: 0 0 10px 0; text-align: right;}
.form_wrap .form_info_side p{position: relative; display: inline-block;}
.form_wrap .form_info_side p::before{content: "필수입력항목"; position: absolute; top: 6px; left: -10px; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #cc0000; font-size: 0;}


/* 파일첨부 */
.form_wrap .custom-file{width: 500px; height: 44px; position: relative;}
.form_wrap .custom-file + .custom-file{margin-top: 10px;}
.form_wrap .custom-file:after{content: ""; display: block; clear: both;}
.form_wrap .custom-file label{float: left; position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 500px; height: 44px; line-height: 44px;  border: 1px solid #dbdbdb; box-sizing: border-box; text-align: left; padding: 0 150px 0 1rem; cursor: pointer; background-color: #fff; color: #bbb; font-size: 1rem;}
.form_wrap .custom-file label span {display: block; width: 70%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.form_wrap .custom-file input[type="file"]{position: absolute; left: 0; top: 0; width: 0; height: 0; line-height: 0; margin: 0; border: none; padding: 0; overflow: hidden;}
.form_wrap .custom-file input[type="file"]:focus + label{border: 1px solid #222;}
.form_wrap .custom-file .uploaded_file{position: absolute;}
.form_wrap .custom-file .upload_files_del{position: absolute; top: 0; right: 0; color: #fff; background: #222; width: 140px; line-height: 44px; text-align: center; font-size: 1rem; margin: 0; padding: 0; border: none; background-color: #e23131;}
.form_wrap .custom-file img{position: absolute; z-index: 1; width: 40px; height: 30px; left: 65px; top: 50%; transform: translateY(-50%); object-fit: scale-down;}
.form_wrap .custom-file-btn{position: absolute; top: 0; right: 0; color: #fff; background: #222; width: 140px; line-height: 44px; text-align: center; pointer-events: none;}

.form_wrap .info_list{width: 100%; margin: 10px 0 0;}
.form_wrap .info_list li{position: relative; box-sizing: border-box; padding: 0 0 0 10px; font-size: 0.9rem;}
.form_wrap .info_list li:before{content: "*"; position: absolute; top: 2px; left: 0;}
.form_wrap .add_fileform button{
    background: #222; color: #fff;
    width: 30px; height: 30px; box-sizing: border-box; padding: 0 0 2px 1px;
    font-size: 1.5rem; line-height: 1; cursor: pointer; text-align: center;
    display: inline-block; vertical-align: middle; margin-right: 0.4rem;
}
.form_wrap .add_fileform span{
    display: inline-block; vertical-align: middle; color: #888; letter-spacing: -0.3px;
}


/* 주소 입력 */
.form_wrap .address .postcode {margin-bottom: 5px;}
.form_wrap .address .postcode:after {content: ""; display: block; clear: both;}
.form_wrap .address .postcode input{float: left;}
.form_wrap .address .postcode .search_btn {float: left; display: inline-block; margin: 0 0 0 2px; vertical-align: middle; box-sizing: border-box; padding: 0 1rem; width: 120px; line-height: 44px; font-weight: 400; color: #fff; background: #222; cursor: pointer; text-align: center;}
#daum_zipcode {display:none;border:1px solid;width:98%;height:400px;margin:5px 0;position:relative; overflow:auto;}


/* 폼 개인정보취급방침 */
.form_wrap .agree{height: 200px; overflow-y: auto; box-sizing: border-box; padding: 1rem 1.5rem; background-color: #f9f9f9; border: 1px solid #dbdbdb;}
.form_wrap .agree .title{font-size: 17px; font-weight: 600; margin: 0 0 0.5rem;}


/* 작성오류 시 */
.invalid-feedback{display: block; height: auto; line-height: 130%; margin: 1rem 0 0 5px; font-size: 0.9rem; color: #dc3545;}
.member .agree .join_check + .invalid-feedback{text-align: center;}

/* 비밀번호 폼 */
.form_wrap.password{max-width: 500px; margin: 0 auto;}

/* 그룹핑 */
.form-group{display: inline-flex; gap: 10px;}
.form-group.affiliated{width: 460px;}
.form-group.ymd{width: 460px;}
@media (width <= 640px){
    .form-group.affiliated{width: 100%;}
    .form-group.ymd{width: 100%;}
}

/* select */
select.hasIco{
    background-position: left 20px center , calc(100% - 20px) center;
    padding: 0 var(--form-padding) 0 46px;
    &.hasCal{
        background-image: url("/assets/site/img/common/ico-calendar.svg") , url("/assets/site/img/common/form_sel_arrow.png");
    }
    @media (width <= 640px){
        background-position: left 8px center , calc(100% - 20px) center;
        padding: 0 var(--form-padding) 0 30px;
    }
}

@media (width <= 1024px){
    input,
    select{font-size: 15px;}
}




@media screen and (max-width:1300px){
    .form_wrap .form_table .cont.email br,
    .form_wrap .form_table .cont.address br{display: block;}
    .form_wrap .form_table .cont.email select{margin: 5px 0 0;}
    .form_wrap .form_table .cont.address .address_input input:last-of-type{margin: 5px 0 0;}
}

@media screen and (max-width:1280px){
    .form_wrap .form_list > li .tit{width: 160px;}
    .form_wrap .form_list > li .cont{width: calc(100% - 160px);}

    .form_wrap .form_table colgroup col:nth-child(1){width: 160px;}
    .form_wrap .form_table colgroup col:nth-child(2){width: calc(100% - 160px);}
}

@media screen and (max-width:1238px){
    .form_wrap .address .address_input input:last-of-type {margin-top: 5px;}
}

@media screen and (max-width:880px){
    .form_wrap .address .postcode input{width: calc(100% - 122px);}
}

@media screen and (max-width:860px){
    .form_wrap .form_list > li.w50{width: 100%; float: none;}
    .form_wrap .form_list > li .tit{display: block; width: 100%; background-color: transparent; padding: 1rem 1rem 0;}
    .form_wrap .form_list > li .cont{display: block; width: 100%; padding: 0.5rem 1rem 1rem;}

    /* .form_wrap .form_table{table-layout: auto;} */
    /* .form_wrap .form_table tbody tr {display: block; padding:1.5rem 0;} */
    /* .form_wrap .form_table tbody tr th{display: block; width: 100%; padding: 0 0 0.5rem 0;} */
    .form_wrap .form_table tbody tr th label {line-height: 1;}
    .form_wrap .form_table tbody tr th span {line-height: 1;}
    .form_wrap .form_table tbody tr td{display: block; width: 100%; padding: 0;}

    .form_wrap .custom-file {width: 100%;}
    .form_wrap .custom-file label {width: 100%; float: none; position: absolute;}
    .form_wrap .custom-file-btn{position: relative; float: right;}
    .form_wrap .custom-file .upload_files_del{position: relative; float: right;}

    .form_wrap .address .postcode {margin-bottom: 5px;}
}

@media screen and (max-width:768px){
    .form_wrap .form_info{padding: 1.5rem;}
}

@media screen and (max-width:568px){
    .form_wrap .checkbox_style label{margin: 0 10px 0 0;}

    .form_wrap .custom-file-btn{width: 96px;}
    .form_wrap .custom-file .upload_files_del{width: 96px;}
    .form_wrap .custom-file label{padding: 0 100px 0 1rem;}

    .form_wrap .agree{height: 160px; padding: 1rem; font-size: 13px;}
    .form_wrap .agree .title{font-size: 14px;}

    .form_wrap .address .postcode input {width: calc( 100% - 92px);}
    .form_wrap .address .postcode .search_btn {width: 90px;}
}

@media (width <= 860px){
    .form_wrap.edit{border: none; background: none; border-radius: 0; padding: 0;}
    .form_wrap .sub-title-wrap{display: block; text-align: center; padding: 36px 0 36px;}
    .form_wrap .sub-title-wrap .sub-location{display: none;}

    .form_wrap.edit + .btn_wrap{display: flex; flex-wrap: wrap; gap: 5px; margin-top: 40px;}
    .form_wrap.edit + .btn_wrap .btn{flex: 1; min-width: 0; margin: 0;}
}
@media (width <= 640px){
    
}