@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; }
}