@charset "utf-8";

/* ==========================================================================
    Form
   ========================================================================== */
.check-item {
    width: 20px; height: 20px; 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;
    &:checked{border-color: var(--form-chk); background-color: var(--form-chk); background-image: url('/assets/site/img/common/ico-check02.svg');}
}

.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-chk03 {
    display: flex; justify-content: center; align-items: center;
    .chk-item{width: 20px; height: 20px; border: 1px solid var(--form-border);  background-color: var(--bg-color); background-repeat: no-repeat; background-position: center; background-size: 11px auto; border-radius: 2px; 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(--bb-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: .05s ease-out;}
    .radio-icon::after { content: ''; width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--form-point); opacity: 0; transition: .05s ease-out;}
    input[type="radio"]:checked + .radio-icon { border-color: var(--form-point); }
    input[type="radio"]:checked + .radio-icon::after { opacity: 1; }
}
.select-group { display: flex; flex-wrap: wrap; gap: 18px;}
.radio-group { display: flex; gap: 16px;}
.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-color01); text-align: center; cursor: pointer;
    transition: .15s ease-out;
    &.black{border-color: var(--basic-color01); background: var(--basic-color01); color: #fff;}
    &.primary{border-color: var(--point-color01); background: var(--point-color01); color: #fff;}
}
.form-agree{
    margin-top: 40px;
    .chk-label{text-decoration: underline; text-underline-offset: 3px;}
    .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-notice {
    padding: 15px 30px; background: var(--form-bg); border-radius: var(--radius01);
    font-size: 14px; color: var(--black-color); line-height: 22px;
    margin: 20px auto 0;
    li{position: relative; padding-left: 12px}
    li::before {content: ""; position: absolute; left: 0; top: 10px; display: block; width: 3px; height: 3px; margin-right: 8px; background: #0f162a; border-radius: 50%;}
    @media (width <= 860px) {
        padding: 15px 20px;
    }
}
.join-box + .form-notice{max-width: var(--board-width);}


.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) {
        margin-top: 40px;
        .form-button{flex: 1; font-size: 15px;}
    }
}
.file-upload {
    padding: 11px 14px; border: 1px solid var(--border-color01); border-radius: var(--form-radius);
    .file-upload-head{display:flex; align-items:center; gap:10px;}
    .file-upload-input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}
    .file-upload-btn{display:inline-flex; justify-content:center; align-items:center; height: 24px; padding: 0 10px; font-size: 14px; color: #fff; border-radius: 2px; background:#222; cursor: pointer;}
    .file-upload-util{display:flex; align-items:center; gap:10px; margin-left:auto;}
    .file-upload-count{font-size: 14px; font-weight: 600; color: #424242;}
    .file-upload-count strong{color: #EE6D6D;}
    .file-delete-all{height: 24px; padding: 0 8px; font-size: 13px; color: #9E9E9E; border: 1px solid var(--border-color01); background: #F5F5F5; border-radius: 2px;}
    .file-delete-all:disabled{color:#bdbdbd; cursor:default;}
    .file-upload-list{display: none;}
    .file-upload-list:has(.file-upload-item){display: block; margin-top: 18px;}
    .file-upload-list > ul{display: flex; flex-direction: column; gap: 8px;}
    .file-upload-item{display:flex; align-items:center; min-height: 46px; padding: 8px 20px; border: 1px solid #F8CECE; font-size: 14px; color: var(--bb-color); background: #FDF2F2; border-radius: var(--form-radius);}
    .file-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .file-size{flex-shrink:0; color:#757575; margin-left:4px;}
    .file-remove{flex:0 0 auto; width:20px; aspect-ratio:1; margin-left:auto; background:url("/assets/site/img/common/ico-x01.svg") no-repeat center / 22px auto;}
    @media (width <= 1200px) {
        .file-upload-btn{font-size: 13px;}
        .file-upload-item{min-height: 40px;}
    }
    @media (width <= 1024px) {
        .file-upload-item{padding: 8px 14px;}
    }
}

/* ==========================================================================
    회원가입, 회원정보 변경
   ========================================================================== */
/* 공용 폼 */
.form-container {
    width: 100%;
    .field-button {
        display: flex; justify-content: center; align-items: center;
        min-width: 120px; padding: 0 4px;
        border-color: var(--basic-color01); border-radius: 5px; background: var(--basic-color01);
        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; }
        .maxw { max-width: 390px; }
        .email-group{flex: 1; min-width: 0;}
    }
    .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: grid; grid-template-columns: 140px 1fr; align-items: center; min-height: 80px; padding: 19px 0;}
    .form-row:not(:last-child){border-bottom: 1px dashed var(--form-border);}
    .form-label .label-text { display: flex; align-items: center; gap: 8px; }
    .form-label .required::after { content:""; display: block; width: 5px; aspect-ratio: 1; background-color: var(--form-point); border-radius: 50%; }
    .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) {
        border-top: 1px solid var(--form-border);
        .form-row:last-child{border-bottom: 1px solid var(--form-border);}
        .field-button { min-width: 70px; font-size: 13px;}
    }

}




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

/* 폼 공통 */
.form_wrap{}

/* 양식 테이블 */
.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; border-top: 2px solid #222; box-sizing: border-box; background-color: #fff;}
.form_wrap .form_table colgroup col:nth-child(1){width: 200px;}
.form_wrap .form_table colgroup col:nth-child(2){width: calc(100% - 200px);}
.form_wrap .form_table tbody{}
.form_wrap .form_table tbody tr{border-bottom: 1px solid #dbdbdb;}
.form_wrap .form_table tbody tr th{box-sizing: border-box; vertical-align: middle; padding: 1rem 1.5rem; font-weight: 600; text-align: left; background-color: #f9f9f9;}
.form_wrap .form_table tbody tr th label,
.form_wrap .form_table tbody tr th span{position: relative;}
.form_wrap .form_table tbody tr th label.necessary:before,
.form_wrap .form_table tbody tr th span.necessary:before{content: "필수입력항목"; position: absolute; top: 3px; right: -10px; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #cc0000; font-size: 0;}
.form_wrap .form_table tbody tr td{box-sizing: border-box; padding: 1rem 1.5rem; 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;}





@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%; background-color: transparent; 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;}
}