/*
    고객센터(1:1문의) 화면 스타일.

    helpdesk/contact.volt 가 이 파일을 불러오는데 파일 자체가 없어서
    입력 칸·표·모달이 아무 모양 없이 세로로 쏟아졌고, 숨어 있어야 할 동의 안내 모달이 화면에 그대로 보였다.
    common.css 에 common_table_gray · modal_wrap 계열 정의가 없어 여기서 한다.
*/

/* ── 본문 틀 ─────────────────────────────── */
#section_contact.about_wrap{
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 10px;
    padding: 24px 24px 30px;
}
#section_contact .content_title_wrap{ margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #F1F1F5; }
#section_contact .content_title_wrap .new_title5{ font-size: 20px; font-weight: 700; color: #111; margin: 0 0 6px; }
#section_contact .gray_txt8,
#section_contact .gray_txt9{ font-size: 13px; line-height: 1.7; color: #777; }
#section_contact .underline_txt{ text-decoration: underline; cursor: pointer; }
#section_contact .contact_sub_txt{ margin-top: 6px; font-size: 12px; color: #999; }

/* ── 입력 표 ─────────────────────────────── */
#section_contact .common_table_round_wrap{ border: 1px solid #ECECEC; border-radius: 8px; overflow: hidden; }
#section_contact .common_table_gray{ width: 100%; border-collapse: collapse; font-size: 14px; }
#section_contact .common_table_gray th,
#section_contact .common_table_gray td{ border-bottom: 1px solid #F1F1F5; padding: 14px 16px; text-align: left; vertical-align: middle; }
#section_contact .common_table_gray tr:last-child th,
#section_contact .common_table_gray tr:last-child td{ border-bottom: 0; }
#section_contact .common_table_gray th{ width: 150px; background: #FAFAFC; font-weight: 600; color: #444; white-space: nowrap; }

#section_contact .common_input_wrap{ display: inline-block; max-width: 100%; }
#section_contact .common_input_wrap.input_wid_300{ width: 300px; }
#section_contact .common_input,
#section_contact .common_textarea{
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #DBDBDB;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    color: #222;
    background: #fff;
}
#section_contact .common_textarea{ min-height: 180px; line-height: 1.6; resize: vertical; }
#section_contact .common_input:focus,
#section_contact .common_textarea:focus{ outline: none; border-color: #5B21B6; }
#section_contact .error_txt,
#section_contact .error_txt_email,
#section_contact .error_txt_phone{ display: block; margin-top: 6px; font-size: 12px; color: #D03B3B; }

/* ── 문의 유형 선택 (직접 만든 셀렉트) ───────── */
#section_contact .area-custom-select{ position: relative; width: 300px; max-width: 100%; }
#section_contact .custom-select{ position: relative; border: 1px solid #DBDBDB; border-radius: 6px; padding: 10px 34px 10px 12px; font-size: 14px; color: #222; cursor: pointer; background: #fff; }
#section_contact .custom-select-arrow{ position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid #9a9a9a; border-bottom: 2px solid #9a9a9a; transform: rotate(45deg); }
#section_contact .custom-select-list{ display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid #DBDBDB; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
#section_contact .area-custom-select.active .custom-select-list{ display: block; }
#section_contact .custom-select-option{ padding: 10px 12px; font-size: 14px; color: #333; cursor: pointer; }
#section_contact .custom-select-option:hover{ background: #F5F1FD; color: #5B21B6; }

/* ── 동의 · 로봇확인 · 버튼 ──────────────── */
#section_contact .donation_personal_info_offer{ vertical-align: middle; }
#section_contact .aboutCheckRobot{ display: flex; justify-content: center; margin-top: 20px; }
#section_contact .content_bottom_btn{ margin-top: 22px; text-align: center; }
#section_contact .contact_btn{
    display: inline-block;
    min-width: 140px;
    padding: 12px 18px;
    border-radius: 8px;
    background: #C9C9CF;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
#section_contact .contact_btn.new_btn02{ background: #5B21B6; }

/* ── 모달 (동의 안내 · 접수 완료) ───────────── */
.modal_dim{ display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 9000; }
.contact_modal,
.contact_personal_infor_modal{
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9100;
    width: 460px;
    max-width: calc(100% - 32px);
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.contact_modal .modal_title,
.contact_personal_infor_modal .modal_title{ font-size: 17px; font-weight: 700; color: #111; margin-bottom: 12px; }
.contact_modal .modal_content,
.contact_personal_infor_modal .modal_content{ font-size: 13px; line-height: 1.75; color: #555; }
.contact_modal .modal_bottom,
.contact_personal_infor_modal .modal_bottom{ margin-top: 20px; text-align: center; }
.contact_modal .modal_bottom_close,
.contact_personal_infor_modal .modal_bottom_close{ display: inline-block; min-width: 120px; padding: 11px 18px; border-radius: 8px; background: #5B21B6; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.contact_modal .modal_close,
.contact_personal_infor_modal .modal_close{ position: absolute; right: 16px; top: 14px; font-size: 20px; color: #999; cursor: pointer; }

@media (max-width: 899px) {
    #section_contact.about_wrap{ padding: 18px 14px 24px; }
    #section_contact .common_table_gray th{ width: 100px; padding: 12px; }
    #section_contact .common_table_gray td{ padding: 12px; }
    #section_contact .common_input_wrap.input_wid_300,
    #section_contact .area-custom-select{ width: 100%; }
}

@media (max-width: 599px) {
    /* 표 한 줄이 너무 좁아진다. 제목 / 입력 두 줄로 쌓는다 */
    #section_contact .common_table_gray,
    #section_contact .common_table_gray tbody,
    #section_contact .common_table_gray tr,
    #section_contact .common_table_gray th,
    #section_contact .common_table_gray td{ display: block; width: 100%; box-sizing: border-box; }
    #section_contact .common_table_gray th{ border-bottom: 0; padding-bottom: 6px; background: #fff; }
    #section_contact .common_table_gray td{ padding-top: 0; }
}