@charset "utf-8";

/* 폼 공통 */
.form-wrap{}

/* 폼 상단 */
.form-top{
    display: flex; flex-wrap: wrap; margin: 0 0 20px;
    & .title{flex: 1; min-width: 0; font-size: 34px; font-weight: var(--fwb); color: #000; line-height: 1.412;}
    & .form-must{
        margin: 0 0 0 auto; padding: 23px 0 0; flex: 0 0 auto; font-size: 14px; letter-spacing: -0.02em; display: inline-flex; gap: 10px; align-items: center;
        &:before{content: ""; flex: 0 0 auto; display: inline-block; width: 5px; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: var(--theme-green);}
    }

    @media (width <= 1280px){
        & .title{font-size: 30px;}
    }
    @media (width <= 860px){
        & .title{font-size: 26px;}
    }
    @media (width <= 640px){
        flex-direction: column; gap: 12px; margin: 0 0 4px;
        & .title{font-size: 22px;}
        & .form-must{padding: 0;}
    }
}

/* 양식 */
.form-list{
    --form-gap: 10px;
    --form-height : 40px;
    padding: 23px 24px; border: 1px solid #e8e8e8; border-radius: 10px; background: #fff; letter-spacing: -0.04em;
    display: flex; flex-direction: column; gap: 20px;
    container-name: form-container;
    container-type: inline-size;

    & .form-row{
        display: flex; flex-wrap: wrap; gap: 20px;

        & .form-name{
            flex: 0 0 auto; width: 120px; line-height: var(--form-height);
            & label,
            & span{
                position: relative; color: #222; font-weight: var(--fwm); display: inline-block; line-height: 1.4;
                &.must:before{content: ""; position: absolute; top: 10px; left: calc(100% + 10px); display: inline-block; width: 5px; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--theme-green);}
            }
        }

        & .form-cont{
            flex: 1; min-width: 0;
        }

        & .form-combo{
            display: flex; flex-wrap: wrap; gap: var(--form-gap);

            & .form-input{
                flex: 1; min-width: 0;
                & input{width: 100%;}
            }
            & .form-select{
                flex: 1; min-width: 0;
                & select{width: 100%; min-width: auto;}
            }

            &:has(> .form-btn){
                & .form-btn{
                    flex: 0 0 auto;
                }
                & .form-input{
                    flex: 1; min-width: 0;
                    & input{width: 100%;}
                }
                & .form-select{
                    flex: 1; min-width: 0;
                    & select{width: 100%;}
                }
            }

            &.email{
                & .form-btn{
                    flex: 0 0 auto;
                }
                & .form-input{
                    flex: 1; min-width: 0;
                    & input{width: 100%;}
                }
                & .form-select{
                    flex: 1; min-width: 0;
                    & select{width: 100%; min-width: auto;}
                }
            }

            &.phone{
                & > *{flex: 1; min-width: 0;}
                & .form-input{
                    & input{width: 100%; min-width: auto;}
                }
                & .form-select{
                    & select{width: 100%; min-width: auto;}
                }
            }
        }
        & .form-combo + .form-combo{margin-top: var(--form-gap);}

        & .form-input{
            position: relative;
            & input{
                display: block; width: 100%; max-width: 100%; border-radius: 5px; border: 1px solid #e1e5ed; height: var(--form-height); padding: 0 var(--input-inner-space-sm); outline: none; font-size: 1rem; font-weight: var(--fwr); color: var(--main); transition: border 0.1s;
                &.w100{width: 100%;}
                &::placeholder{color: #d4d8e1;}
                &:read-only{color: #d4d8e1; cursor: default;}
                &:focus{border-color: var(--theme-green);}

                & + label{position: absolute; top: 50%; left: var(--input-inner-space-sm); transform: translateY(-50%); transition: 0.1s; pointer-events: none; font-size: 1rem; color: #d4d8e1; background: var(--white); 
                    padding: 0; line-height: 1;}
                &:focus + label{top: 0; transform: translateY(-50%); left: 10px; font-size: 0.75rem; color: var(--theme-green); padding: 0 3px;}
                &:not(:placeholder-shown):not(:focus) + label { top: 0; transform: translateY(-50%); left: 10px; font-size: 12px; color: #d4d8e1; padding: 0 3px;}

                &.datepicker{
                    cursor: pointer; color: var(--main);
                    background-image: url("/assets/site/img/common/form-select-arr.svg"), url("/assets/site/img/common/select-cal.svg"); 
                    background-position: center right 14px, center left 15px;
                    background-size: 16px auto, 16px auto; 
                    background-repeat: no-repeat;
                    padding: 0 36px 0 40px;
                }
            }

            &.mail-at{
                &:before{content: "@"; position: absolute; left: calc(var(--input-inner-space-sm) - 2px); line-height: var(--form-height);}
                & input{padding-left: 32px;}
            }

            &.noRadius{
                & input{border-radius: 0 !important;}
            }
        }

        & .form-btn-radio-group{
            display: flex; flex-wrap: wrap;
        }

        & .form-btn-radio{
            font-size: 14px; font-weight: var(--fwm); letter-spacing: -0.04em; color: #222; border: 1px solid #e1e5ed; background-color: #fff;
            line-height: calc(var(--form-height) - 2px); text-align: center; padding: 0 10px; flex: 1; min-width: 0;
            & input{position: absolute; left: -9999px;}

            &:has(input:checked){
                color: #fff; background-color: var(--theme-green); border-color: transparent;
            }
        }
        & .form-btn-radio + .form-btn-radio{margin-left: -1px;}

        & .form-radio-group{
            display: flex; flex-wrap: wrap; gap: 20px;
        }
        & .form-radio-group + .form-radio-group{margin-top: var(--form-gap);}

        & .form-radio{
            display: inline-flex; align-items: center; gap: 9px; color: #000; line-height: var(--form-height);
            & input{position: absolute; left: -9999px; width: 0; height: 0; font-size: 0; opacity: 0;}
            & input + .shape{
                position: relative; display: inline-block; width: 18px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 2px solid #b5babe; background-color: var(--white); margin: 2px 0 0;
                &:before{content: ""; position: absolute; inset: 2px; border-radius: 50%; background-color: #00a651; opacity: 0;}
            }
            & input:checked + .shape{
                border-color: #00a651;
                &:before{opacity: 1;}
            }
        }

        & .form-check-group{
            display: flex; flex-wrap: wrap; gap: 15px 24px;
        }
        & .form-check-group + .form-check-group{margin-top: var(--form-gap);}

        & .form-check{
            display: inline-flex; align-items: center; gap: 9px; color: #000; line-height: var(--form-height);
            & > input{position: absolute; left: -9999px; width: 0; height: 0; font-size: 0; opacity: 0;}
            & > input + .shape{
                position: relative; display: inline-block; width: 18px; height: auto; aspect-ratio: 1; border-radius: 2px; border: 2px solid #b5babe; background-color: var(--white); margin: 2px 0 0;
                &:before{content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -77%) rotate(-48deg); opacity: 0;}
            }
            & > input:checked + .shape{
                border-color: transparent; background-color: var(--theme-green);
                &:before{opacity: 1;}
            }

            &.hasTextInput{
                & > .form-input{
                    visibility: hidden; opacity: 0; pointer-events: none;
                }

                & > input:checked ~ .form-input{
                    visibility: visible; opacity: 1; pointer-events: auto;
                }
            }
        }

        & .form-select{
            & select{
                position: relative; min-width: 155px; max-width: 100%; border-radius: 5px; border: 1px solid #e1e5ed; height: var(--form-height); padding: 0 30px 0 var(--input-inner-space-sm); font-size: 1rem; font-weight: var(--fwr); outline: none; transition: 0.1s; letter-spacing: inherit;
                background-image: url("/assets/site/img/common/form-select-arr.svg"); background-position: center right 14px; background-size: 16px auto; background-repeat: no-repeat; background-color: #fff; color: var(--main);
                text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
                &.hasCal{
                    background-image: url("/assets/site/img/common/form-select-arr.svg"), url("/assets/site/img/common/select-cal.svg"); 
                    background-position: center right 14px, center left 15px;
                    background-size: 16px auto, 16px auto; 
                    background-repeat: no-repeat;
                    padding: 0 30px 0 40px;
                }

                &:focus{border-color: var(--theme-green);}
            }

            &.noRadius{
                & select{border-radius: 0 !important;}
            }
        }

        & .form-textarea{
            position: relative;
            & textarea{
                display: block; border-radius: 5px; border: 1px solid #e1e5ed; width: 100%; resize: none; transition: 0.1s; outline: none;
                padding: var(--input-inner-space-sm) var(--input-inner-space-sm); height: 138px; font-size: 1rem;

                &:focus{border-color: var(--theme-green);}

                & + label{position: absolute; top: var(--input-inner-space-sm); left: var(--input-inner-space-sm); transform: none; transition: 0.1s; pointer-events: none; font-size: 1rem; color: #d4d8e1; background: var(--white); padding: 0;}
                &:focus + label{ top: 0; transform: translateY(-50%); left: 10px; font-size: 0.75rem; color: var(--theme-green); padding: 0 3px;}
                &:not(:placeholder-shown):not(:focus) + label{top: 0; transform: translateY(-50%); left: 10px; font-size: 0.75rem; color: #d4d8e1; padding: 0 3px;}
            }

            &.noRadius{
                & textarea{border-radius: 0 !important;}
            }
        }

        & .form-btn{
            & button{display: block; width: 120px; border-radius: 5px; line-height: calc(var(--form-height) - 2px); border: 1px solid transparent; background: #333132; color: #fff; font-weight: var(--fwr); letter-spacing: -0.04em;}
        }

        & .form-attach{
            display: flex; flex-wrap: wrap; gap: var(--form-gap);
            & input{opacity: 0; width: 0; height: 0; position: absolute;}
            & label{flex: 1; min-width: 0; width: auto; border: 1px solid #e1e5ed; border-radius: 5px; height: var(--form-height); align-content: center; padding: 0 var(--input-inner-space-sm); color: #d4d8e1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
            & .custom-file-btn{flex: 0 0 auto; display: block; width: 100px; border-radius: 5px; border: 1px solid transparent; background: #333132; color: #fff; font-weight: var(--fwr); align-content: center; text-align: center; cursor: pointer; letter-spacing: -0.04em;}
        }

        & .form-note{
            padding: 10px 0 10px; font-size: 14px; line-height: 1.6; letter-spacing: 0;
        }
    }

    &.hasRowBorder{
        gap: 0;
        & .form-row{
            border-bottom: 1px dashed #e1e5ed; padding-top: 20px; padding-bottom: 20px;

            &:last-of-type{border: none;}
        }
    }

    @container form-container (max-width: 700px){
        & .form-row{
            & .form-btn{
                & button{width: 100px;}
            }
            & .form-input{
                & input{
                    &.datepicker{
                        padding: 0 20px 0 27px; background-position: center right 6px, center left 8px;
                    }
                }
            }
            & .form-select{
                & select{
                    background-position: center right 6px; padding: 0 20px 0 var(--input-inner-space-sm);
                    &.hasCal{
                        padding: 0 20px 0 27px; background-position: center right 6px, center left 8px;
                    }
                }
            }
        }
    }
    @container form-container (max-width: 600px){
        & .form-row{
            flex-direction: column; gap: 0px;
            & .form-input{
                & input{width: 100%; min-width: auto;}
                &.mail-at{
                    & input{padding-left: 27px;}
                    &:before{left: 9px;}
                }
            }
            & .form-select{
                & select{
                    width: 100%; min-width: auto;
                }
            }
            & .form-name{width: 100%;}
            & .form-cont{flex: 0 0 auto; width: 100%;}
            & .form-combo{
                display: flex;
                & .form-select{
                    flex: 1; min-width: 0;
                    & select{
                        width: 100%; min-width: auto;
                    }
                }
                & .form-input{
                    flex: 1; min-width: 0;
                    & input{width: 100%; min-width: auto;}
                }

                &.email{
                    & .form-input{
                        & input{width: 100%; min-width: auto;}
                    }
                    & .form-select{
                        display: none;
                        & select{width: 100%; min-width: auto;}
                    }
                }
                &.ymd-h-m{
                    & > *:nth-child(1){flex: 0 0 auto; width: 100%;}
                }
            }
            & .form-attach{
                & label{flex: 1; min-width: 0; width: auto;}
                & .custom-file-btn{width: 80px;}
            }
            & .form-radio-group{
                gap: 12px;
            }
            & .form-radio{
                gap: 4px;
            }
            & .form-btn{
                & button{width: 80px; font-size: 14px;}
            }
            & .form-note{
                font-size: 13px;
            }
        }
    }



    @media (width <= 640px){
        /* 이 부분은 컨테이너 쿼리에서 적용 X (스코프가 내부, 자체는 불가) */
        /* 그래서 일반 뷰포트 기준 미디어쿼리로 처리 */
        --form-gap: 5px;
        padding: 12px 12px;
    }
}

/* 양식 테이블 */
.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_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;}
}