@charset "utf-8";

/* =========================================================
   contact_write 입력 폼 디자인
   - 모든 선택자는 .cw-form(이 스킨의 글쓰기 폼) 안으로 한정
   - 색상은 아래 변수만 바꾸면 전체에 반영됨
   ========================================================= */
:root {
    --cw-line: #e1e1e1;           /* 행 사이 가로 구분선 */
    --cw-line-strong: #333333;    /* 폼 상단 굵은 선 */
    --cw-label-bg: #f7f7f7;       /* 항목명(왼쪽) 배경, 목록 헤더 배경 */
    --cw-row-hover: #fafafa;      /* 목록 행 hover 배경 */
    --cw-input-bg: #ffffff;       /* 입력창 배경 */
    --cw-input-border: #d4d4d4;   /* 입력창 테두리 */
    --cw-input-focus: #888888;    /* 입력창 포커스 테두리 */
    --cw-text: #222222;           /* 기본 글자 */
    --cw-text-sub: #888888;       /* 보조 글자(설명, 안내문) */
    --cw-btn-bg: #f3f3f3;         /* 일반(회색) 버튼 배경 */
    --cw-btn-bg-hover: #e9e9e9;   /* 일반 버튼 배경(hover) */
    --cw-btn-border: #e1e1e1;     /* 일반 버튼 테두리 */
    --cw-btn-text: #444444;       /* 일반 버튼 글자 */
    --cw-btn-radius: 5px;         /* 모든 버튼 모서리 둥글기 */
    --cw-submit-bg: #222222;      /* 제출 버튼 배경 */
    --cw-submit-bg-hover: #000000;/* 제출 버튼 배경(hover) */
    --cw-submit-text: #ffffff;    /* 제출 버튼 글자 */
    --cw-required: #e60012;       /* 필수 표시(*) */
}

/* ---------- 표 기본 ---------- */
.cw-form .extraVarsList {
    width: 100%;
    margin: 0 0 40px;
    border: 0;
    border-top: 2px solid var(--cw-line-strong);
    border-bottom: 1px solid var(--cw-line);
    border-collapse: collapse;
    background: #fff;
}
.cw-form .extraVarsList th,
.cw-form .extraVarsList td {
    padding: 18px 24px;
    border: 0;
    border-top: 1px solid var(--cw-line);
    text-align: left;
    vertical-align: middle;
    color: var(--cw-text);
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
}
.cw-form .extraVarsList th {
    width: 200px;
    background: var(--cw-label-bg);
    font-weight: normal;
    word-break: keep-all;
}
.cw-form .extraVarsList td {
    width: auto;
    background: var(--cw-input-bg);
}
.cw-form .extraVarsList tr:first-child > th,
.cw-form .extraVarsList tr:first-child > td {
    border-top: 0;
}

/* 필수 표시 */
.cw-form .extraVarsList em {
    margin-left: 3px;
    color: var(--cw-required);
    font-style: normal;
    font-weight: normal;
}

/* ---------- 입력창 ---------- */
.cw-form .extraVarsList td > input[type="text"],
.cw-form .extraVarsList td > input[type="email"],
.cw-form .extraVarsList td > input[type="url"],
.cw-form .extraVarsList td > input[type="tel"],
.cw-form .extraVarsList td > input[type="password"],
.cw-form .extraVarsList td > input[type="number"],
.cw-form .extraVarsList td > input[type="date"],
.cw-form .extraVarsList td > input[type="time"],
.cw-form .extraVarsList td > select,
.cw-form .extraVarsList td > textarea,
.cw-form .extraVarsList .krZip input[type="text"],
.cw-form .extraVarsList .ev_file_input input {
    display: inline-block;
    max-width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--cw-input-border);
    border-radius: 0;
    background: var(--cw-input-bg);
    color: var(--cw-text) !important;
    font-size: 14px;
    line-height: 38px;
    vertical-align: middle;
    box-sizing: border-box;
    box-shadow: none;
    -webkit-appearance: none;
}
.cw-form .extraVarsList td > input:focus,
.cw-form .extraVarsList td > select:focus,
.cw-form .extraVarsList td > textarea:focus,
.cw-form .extraVarsList .krZip input:focus {
    border-color: var(--cw-input-focus);
    outline: none;
}
.cw-form .extraVarsList td > input[disabled],
.cw-form .extraVarsList .krZip input[disabled] {
    background: var(--cw-label-bg);
}

/* 한 줄 입력창 폭 */
.cw-form .extraVarsList td > input[type="text"],
.cw-form .extraVarsList td > input[type="email"],
.cw-form .extraVarsList td > input[type="url"],
.cw-form .extraVarsList td > input[type="password"],
.cw-form .extraVarsList td > input[type="number"],
.cw-form .extraVarsList td > input.rx_ev_tel_v2 {
    width: 100%;
    max-width: 400px;
}
.cw-form .extraVarsList td > .iText { display: block; }

/* 전화번호(3칸) */
.cw-form .extraVarsList td > input.tel {
    width: 100px;
    margin-right: 6px;
}
.cw-form .extraVarsList td > input.tel:last-of-type { margin-right: 0; }

/* 선택 상자 */
.cw-form .extraVarsList td > select {
    min-width: 180px;
    padding-right: 34px;
    background: var(--cw-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 12px center;
}

/* 여러 줄 입력 */
.cw-form .extraVarsList td > textarea {
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}

/* 체크박스 / 라디오 */
.cw-form .extraVarsList td ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cw-form .extraVarsList td ul li {
    display: inline-block;
    margin: 4px 20px 4px 0;
}
.cw-form .extraVarsList td ul li input {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: var(--cw-text);
}
.cw-form .extraVarsList td ul li label { vertical-align: middle; }

/* 항목 설명 */
.cw-form .extraVarsList .rx_ev_description {
    margin: 8px 0 0;
    color: var(--cw-text-sub);
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- 일반 버튼(중복확인, 우편번호 검색, 삭제 등) ---------- */
.cw-form .extraVarsList td > input[type="button"],
.cw-form .extraVarsList td > button,
.cw-form .extraVarsList td > a > span,
.cw-form .extraVarsList .krZip button,
.cw-form .extraVarsList .ev_file_info button,
.cw-form .extraVarsList .form-button-grey {
    display: inline-block;
    /* 라이믹스 공통 .btn 의 height/line-height/padding !important 를 덮어씀 */
    height: 40px !important;
    margin: 0 0 0 6px;
    padding: 0 18px !important;
    border: 1px solid var(--cw-btn-border);
    border-radius: var(--cw-btn-radius);
    background: var(--cw-btn-bg);
    color: var(--cw-btn-text) !important;
    font-size: 14px;
    font-weight: normal;
    line-height: 38px !important;
    vertical-align: middle;
    text-shadow: none;
    box-shadow: none;
    opacity: 1;
    cursor: pointer;
    box-sizing: border-box;
}
/* 날짜/시간 삭제 버튼: 입력창과 같은 높이, 등록 버튼과 같은 색 */
.cw-form .extraVarsList td > button.dateRemover,
.cw-form .extraVarsList td > button.timeRemover {
    border-color: var(--cw-submit-bg);
    background: var(--cw-submit-bg);
    color: var(--cw-submit-text) !important;
}
.cw-form .extraVarsList td > button.dateRemover:hover,
.cw-form .extraVarsList td > button.timeRemover:hover {
    background: var(--cw-submit-bg-hover);
}
.cw-form .extraVarsList td > input[type="button"]:hover,
.cw-form .extraVarsList td > button:hover,
.cw-form .extraVarsList td > a > span:hover,
.cw-form .extraVarsList .krZip button:hover,
.cw-form .extraVarsList .ev_file_info button:hover,
.cw-form .extraVarsList .form-button-grey:hover {
    border-color: var(--cw-btn-border);
    background: var(--cw-btn-bg-hover);
}

/* 우편번호 */
.cw-form .extraVarsList .krZip input.krzip-postcode { width: 140px; }
.cw-form .extraVarsList .krZip .krzip-address-wrap input,
.cw-form .extraVarsList .krZip .krzip-detailAddress-wrap input {
    display: block;
    width: 100%;
    max-width: 400px;
    margin-top: 8px;
}

/* ---------- 개인정보 동의 ---------- */
.cw-form .extraVarsList th.info_btn {
    width: auto;
    padding-right: 120px;
}
.cw-form .extraVarsList th.info_btn .form-button-grey {
    top: 50% !important;
    right: 24px !important;
    height: 30px !important;
    margin: 0;
    padding: 0 12px !important;
    font-size: 12px;
    line-height: 28px !important;
    transform: translateY(-50%);
}
/* 약관 textarea 는 위 회색 제목 영역과 좌우 끝을 맞춤 */
.cw-form .extraVarsList td.info_box {
    padding: 18px 0;
    text-align: left;
}
.cw-form .extraVarsList td.info_box > ul {
    padding: 0 24px;
}
.cw-form .extraVarsList td.info_box .info_p {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--cw-input-border);
    background: var(--cw-label-bg);
    color: var(--cw-text-sub) !important;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}
.cw-form .extraVarsList td.info_box p { margin: 0; }

/* ---------- 에디터 파일 첨부 영역 ---------- */
/* 기본 스타일: common/js/plugins/jquery.fileupload/css/style.css (!important 다수) */
.cw-form .xefu-dropzone .xefu-act-selectfile {
    height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid var(--cw-btn-border);
    border-radius: var(--cw-btn-radius);
    background: var(--cw-btn-bg);
    line-height: 34px !important;
    box-shadow: none;
    box-sizing: border-box;
    vertical-align: top;
}
.cw-form .xefu-dropzone .xefu-act-selectfile:hover {
    background: var(--cw-btn-bg-hover);
}
.cw-form .xefu-dropzone .xefu-act-selectfile > span { color: var(--cw-btn-text); }
.cw-form .xefu-dropzone .xefu-act-selectfile > span {
    height: 34px;
    margin: 0 -16px !important;
    padding: 0 16px !important;
    font-size: 14px;
    line-height: 34px;
    vertical-align: top;
}
.cw-form .xefu-dropzone .xefu-act-selectfile > span i { vertical-align: -1px; }
/* 안내 문구 2줄: 왼쪽 정렬, 버튼과 30px 간격, 항상 표시 */
.cw-form .xefu-dropzone p.xefu-dropzone-message,
.cw-form .xefu-dropzone p.upload_info {
    display: block;
    margin: 4px 0 0 !important;
    padding: 0;
    line-height: 1.6;
    text-align: left;
}
.cw-form .xefu-dropzone .xefu-act-selectfile + p {
    margin-top: 30px !important;
}

/* ---------- 하단 버튼 ---------- */
.cw-form .cw-actions {
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
}
/* 등록 / 취소(목록) 버튼: 같은 크기, 색만 다름 */
.cw-form .cw-actions input[type="submit"],
.cw-form .cw-actions .form-button-grey {
    display: inline-block;
    width: 231px;
    max-width: 100%;
    height: 56px;
    margin: 0 4px;
    padding: 0 20px;
    border: 1px solid var(--cw-btn-border) !important;
    border-radius: var(--cw-btn-radius);
    font-size: 17px;
    font-weight: bold;
    line-height: 54px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
}
.cw-form .cw-actions input[type="submit"] {
    border-color: var(--cw-submit-bg) !important;
    background: var(--cw-submit-bg) !important;
    color: var(--cw-submit-text) !important;
}
.cw-form .cw-actions input[type="submit"]:hover { background: var(--cw-submit-bg-hover) !important; }
.cw-form .cw-actions .form-button-grey {
    background: var(--cw-btn-bg);
    color: var(--cw-btn-text) !important;
}
.cw-form .cw-actions .form-button-grey:hover { background: var(--cw-btn-bg-hover); }

/* ---------- 모바일: 항목명 위 / 입력 영역 아래 ---------- */
@media all and (max-width: 768px) {
    .cw-form .extraVarsList,
    .cw-form .extraVarsList tbody,
    .cw-form .extraVarsList tr,
    .cw-form .extraVarsList th,
    .cw-form .extraVarsList td {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .cw-form .extraVarsList { margin-bottom: 30px; }
    .cw-form .extraVarsList th {
        padding: 16px 16px 8px;
        background: none;
        font-weight: bold;
        text-align: left;
    }
    .cw-form .extraVarsList td {
        padding: 0 16px 16px;
        border-top: 0;
        overflow-wrap: anywhere;
    }
    .cw-form .extraVarsList th.info_btn { padding: 16px 100px 12px 16px; }
    .cw-form .extraVarsList th.info_btn .form-button-grey { right: 16px !important; }
    .cw-form .extraVarsList td.info_box { padding: 0 0 16px; }
    .cw-form .extraVarsList td.info_box > ul { padding: 0 16px; }

    .cw-form .extraVarsList td > input[type="text"],
    .cw-form .extraVarsList td > input[type="email"],
    .cw-form .extraVarsList td > input[type="url"],
    .cw-form .extraVarsList td > input[type="password"],
    .cw-form .extraVarsList td > input[type="number"],
    .cw-form .extraVarsList td > input[type="date"],
    .cw-form .extraVarsList td > input.rx_ev_tel_v2,
    .cw-form .extraVarsList td > select,
    .cw-form .extraVarsList .krZip .krzip-address-wrap input,
    .cw-form .extraVarsList .krZip .krzip-detailAddress-wrap input {
        width: 100%;
        max-width: 100%;
    }
    .cw-form .extraVarsList td > input.tel {
        width: 31%;
        margin-right: 2%;
    }
    .cw-form .extraVarsList td > input.tel:last-of-type { margin-right: 0; }
    .cw-form .extraVarsList .krZip input.krzip-postcode { width: 110px; }
    .cw-form .extraVarsList .krZip button { margin-top: 4px; }

    /* 등록/취소 두 버튼이 가로를 반씩 나눠 꽉 차게 */
    .cw-form .cw-actions {
        display: flex;
        gap: 8px;
        padding: 0 16px 20px;
    }
    .cw-form .cw-actions input[type="submit"],
    .cw-form .cw-actions .form-button-grey {
        display: block;  /* board.css 의 .no_btn{display:none} 보다 우선 */
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0 8px;
    }
}