@charset "utf-8";
/* ==========================================================================
    form.css — 폼 공통 (양식 테이블/파일첨부/주소/약관/유효성)
    문의·회원가입·게시판 글쓰기·폼빌더에서 공용
    브레이크포인트: 1280 / 1024 / 768 / 560 (common.css 표준)
   ========================================================================== */

/* ==========================================================================
    양식 테이블 — 768 이하 스택형 전환
   ========================================================================== */
.form_wrap .form_table{
    clear: both;
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 1rem;
    word-break: keep-all;
    border-top: 2px solid var(--ink);
}
.form_wrap .form_table colgroup col:nth-child(1){ width: 190px; }
.form_wrap .form_table colgroup col:nth-child(2){ width: calc(100% - 190px); }
.form_wrap .form_table tbody tr{ border-bottom: 1px solid var(--line-soft); }
.form_wrap .form_table tbody tr th{
    padding: 1rem 1.25rem;
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
    color: var(--ink);
    background-color: var(--bg-soft);
}
.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: 2px; right: -10px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background-color: var(--danger);
    font-size: 0;
}
.form_wrap .form_table tbody tr td{
    padding: 1rem 1.25rem;
    vertical-align: middle;
}
.form_wrap .form_table tr td span.added{ font-size: .9rem; margin-left: 5px; color: var(--ink-3); }
.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; }

/* 이메일 입력 (input + select) */
.form_wrap .form_table .cont.email{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.form_wrap .form_table .cont.email input{ flex: 1; min-width: 180px; width: auto; }
.form_wrap .form_table .cont.email select{ flex: none; width: 200px; }

/* ==========================================================================
    폼 안내 박스
   ========================================================================== */
.form_wrap .form_info{
    margin: 0 0 1.75rem;
    padding: 1.5rem 1.75rem;
    background-color: var(--bg-soft);
    border-radius: var(--radius);
    color: var(--ink-2);
}
.form_wrap .form_info_side{ margin: 0 0 10px; text-align: right; }
.form_wrap .form_info_side p{ position: relative; display: inline-block; font-size: .875rem; color: var(--ink-3); }
.form_wrap .form_info_side p::before{
    content: "필수입력항목";
    position: absolute;
    top: 6px; left: -10px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background-color: var(--danger);
    font-size: 0;
}

/* ==========================================================================
    파일첨부
   ========================================================================== */
.form_wrap .custom-file{ width: min(500px, 100%); height: var(--input-height); 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: 100%; height: var(--input-height); line-height: calc(var(--input-height) - 2px);
    padding: 0 150px 0 1rem;
    text-align: left;
    color: var(--ink-4); font-size: 1rem;
    background-color: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s;
}
.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; padding: 0; border: none;
    overflow: hidden;
}
.form_wrap .custom-file input[type="file"]:focus + label{ border-color: var(--point, #4F46E5); box-shadow: 0 0 0 3px var(--point-soft); }
.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;
    width: 140px; line-height: var(--input-height);
    color: #fff; text-align: center;
    background: var(--ink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    pointer-events: none;
}
.form_wrap .custom-file .upload_files_del{
    position: absolute;
    top: 0; right: 0;
    width: 140px; line-height: var(--input-height);
    margin: 0; padding: 0; border: none;
    color: #fff; font-size: 1rem; text-align: center;
    background-color: var(--danger);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
}
.form_wrap .add_fileform button{
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 30px; height: 30px;
    margin-right: .4rem;
    padding-bottom: 2px;
    font-size: 1.4rem; line-height: 1;
    color: #fff; text-align: center;
    background: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
    vertical-align: middle;
}
.form_wrap .add_fileform span{
    display: inline-block;
    vertical-align: middle;
    color: var(--ink-3);
}

/* 안내 리스트 */
.form_wrap .info_list{ width: 100%; margin: 10px 0 0; }
.form_wrap .info_list li{
    position: relative;
    padding: 0 0 0 10px;
    font-size: .875rem; color: var(--ink-3);
}
.form_wrap .info_list li::before{ content: "*"; position: absolute; top: 2px; left: 0; }

/* ==========================================================================
    주소 입력 (Daum 우편번호)
   ========================================================================== */
.form_wrap .address .postcode{ display: flex; gap: 6px; margin-bottom: 6px; }
.form_wrap .address .postcode input{ width: min(220px, 100%); }
.form_wrap .address .postcode .search_btn{
    flex: none;
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 0 1.25rem;
    height: var(--input-height);
    color: #fff; font-weight: 500;
    background: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .2s;
}
.form_wrap .address .postcode .search_btn:hover{ background: var(--point, #4F46E5); }
.form_wrap .address .address_input{ display: flex; flex-direction: column; gap: 6px; }
#daum_zipcode{
    display: none;
    position: relative;
    width: 98%; height: 400px;
    margin: 5px 0;
    border: 1px solid var(--line);
    overflow: auto;
}

/* ==========================================================================
    개인정보 동의 박스
   ========================================================================== */
.form_wrap .agree{
    height: 200px;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background-color: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: .9375rem;
}
.form_wrap .agree .title{ font-size: 1.0625rem; font-weight: 600; margin: 0 0 .5rem; color: var(--ink); }

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

/* ==========================================================================
    폼빌더 공개 화면 (sub/form.php)
   ========================================================================== */
.form_desc{ margin-bottom: 24px; }
.form_wrap .form_table td.fm_section{
    padding: 18px 8px 8px;
    border-bottom: 2px solid var(--point, #4F46E5);
}
.form_wrap .form_table td.fm_section strong{
    font-size: 1.05em;
    color: var(--point, #4F46E5);
}
.form_wrap .form_table td.fm_agree{ padding: 10px 8px; }
.fm_agree_box{
    max-height: 110px;
    overflow: auto;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    font-size: .88em; color: var(--ink-2);
    white-space: pre-wrap;
}
.fm_agree_label{ cursor: pointer; }
.req{ color: var(--danger); }
.fm_opt{ margin-right: 14px; cursor: pointer; }
.fm_hint{ color: var(--ink-4); }

/* ==========================================================================
    반응형
   ========================================================================== */
@media (width <= 1280px){
    .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 (width <= 768px){
    /* 테이블 → 스택형 */
    .form_wrap .form_table{ table-layout: auto; }
    .form_wrap .form_table tbody tr{ display: block; padding: 1.1rem 0; }
    .form_wrap .form_table tbody tr th{
        display: block;
        width: 100%;
        padding: 0 0 .5rem;
        background-color: transparent;
    }
    .form_wrap .form_table tbody tr th label,
    .form_wrap .form_table tbody tr th span{ line-height: 1.2; }
    .form_wrap .form_table tbody tr td{ display: block; width: 100%; padding: 0; }

    .form_wrap .form_table .cont.email select{ width: 100%; }
    .form_wrap .form_info{ padding: 1.25rem; }

    .form_wrap .custom-file label{ padding-right: 110px; }
    .form_wrap .custom-file-btn,
    .form_wrap .custom-file .upload_files_del{ width: 100px; }
}

@media (width <= 560px){
    .form_wrap .checkbox_style label{ margin: 0 10px 0 0; }
    .form_wrap .agree{ height: 160px; padding: 1rem; font-size: .8125rem; }
    .form_wrap .address .postcode input{ flex: 1; min-width: 0; }
}

.pg-inquiry {
    & .inquiry-title {text-align: center; margin: 0 0 36px;
        & p {font-size: 2rem; font-weight: 700;}
        & span {display: block; color: var(--ink-3); margin: 12px 0 0;}
    }
    & .inquiry-form {
        & .form-side {text-align: right; margin: 0 0 6px;
            & p {position: relative; display: inline-block; font-size: 14px; color: var(--ink-3); padding: 0 0 0 12px;}
            & p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 6px; background: var(--point); border-radius: 50%;}
        }
        & .form-table {
            & table {width: 100%; table-layout: fixed;
                & tbody {display: flex; flex-direction: column; gap: 16px;
                    & tr {display: flex;}
                    & th {position: relative; width: 200px; text-align: left; line-height: var(--input-height);
                        & label {position: relative;}
                        &.necessary label::before {content: ''; position: absolute; top: 50%; right: -12px; transform: translateY(-50%); width: 4px; height: 4px; background: var(--point); border-radius: 50%;}
                    }
                    & td {flex: 1;}
                }
                & .con {display: flex;
                    & input {background: var(--input-bg); border: 0;}
                    & select {background: var(--input-bg) url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E) no-repeat calc(100% - 14px) center; border: 0; background-color: var(--input-bg);}
                    & textarea {background: var(--input-bg); border: 0; resize: none;}
                }
                & .email {gap: 16px;
                    & input {flex: 1;}
                    & select {flex: 1;}
                }
                & .custom-file {flex: 1;
                    & .file-btn {display: flex; gap: 16px; margin: 0 0 8px;
                        & input[type="file"] {position: absolute; left: 0; top: 0; width: 0; height: 0; line-height: 0; margin: 0; padding: 0; border: none; overflow: hidden; display: none;}
                        & label {flex: 1; height: var(--input-height); background: var(--input-bg); line-height: var(--input-height); padding: 0 14px; border-radius: var(--radius-sm); font-size: var(--form-fontsize); color: var(--form-placeholder);}
                        & .custom-file-btn {width: 120px; height: var(--input-height); line-height: var(--input-height); text-align: center; border: 1px solid var(--ink-2); border-radius: var(--radius-sm); font-weight: 600;}
                    }
                    & .file-txt {
                        & p {position: relative; font-size: 14px; color: var(--ink-4); line-height: 20px; padding: 0 0 0 10px;}
                        & p::before {content: ''; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; background: var(--ink-4); border-radius: 50%;}
                    }
                }
                & .agree {flex: 1;
                    & .agree-txt {padding: 16px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); margin: 0 0 12px;
                        & p {font-size: 17px; font-weight: 600; margin: 0 0 8px;}
                        & span {display: block; font-size: 15px;}
                    }
                    & .agree-btn {display: flex; align-items: center;
                        & span {font-size: 15px;}
                    }
                }
            }
        }
        & .form-btn {display: flex; justify-content: center; gap: 16px; margin: 36px 0 0;
            & .btn {margin: 0;}
        }
    }
    @media (width <= 1280px) {
        & .inquiry-title {
            & p {font-size: 1.8rem;}
            & span {font-size: 15px;}
        }
    }
    @media (width <= 1024px) {
        & .inquiry-form {
            & .form-table {
                & table {
                    & tbody th {width: 150px;}
                }
            }
        }
    }
    @media (width <= 768px) {
        & .inquiry-title {margin: 0 0 24px;
            & p {font-size: 1.6rem;}
            & span {font-size: 14px; margin: 6px 0 0;}
        }
        & .inquiry-form {
            & .form-side p {font-size: 12px;}
            & .form-table {
                & table {
                    & tbody {gap: 20px;}
                    & tbody tr {flex-direction: column; gap: 8px;}
                    & tbody th {font-size: 14px; line-height: 1.4;}
                    & .con {
                        & select {height: 40px; font-size: 14px;}
                        & input {height: 40px; font-size: 14px;}
                        & textarea {font-size: 14px;}
                    }
                    & .email {gap: 8px;}
                    & .custom-file {
                        & .file-btn label {height: 40px; line-height: 40px; font-size: 14px;}
                        & .file-txt p {font-size: 13px;}
                    }
                    & .agree {
                        & .agree-txt {padding: 12px 16px;}
                        & .agree-txt p {font-size: 15px;}
                        & .agree-txt span {font-size: 13px;}
                        & .agree-btn label span {font-size: 14px;}
                    }
                    & .invalid-feedback {font-size: 13px; margin: 6px 0 0;}
                }
            }
        }
    }
}