@charset "utf-8";

/* =========================================================
   contact_write 목록 / 상세 화면 디자인
   - 색상 변수(--cw-*)는 css/write_form.css 상단 :root 에 있음
   - 모든 선택자는 이 스킨의 .board 영역 안으로 한정
   ========================================================= */

/* ---------- 공통 버튼 ---------- */
.board .form-button-default {
    height: 40px;
    padding: 0 20px;
    border-radius: var(--cw-btn-radius, 5px);
    font-size: 14px;
    font-weight: normal;
    line-height: 38px;
    vertical-align: middle;
    box-sizing: border-box;
}
.board .form-button-blue {
    border: 1px solid var(--cw-submit-bg, #222222) !important;
    background: var(--cw-submit-bg, #222222) !important;
    color: var(--cw-submit-text, #ffffff) !important;
}
.board .form-button-blue:hover { background: var(--cw-submit-bg-hover, #000000) !important; }
.board .form-button-grey {
    border: 1px solid var(--cw-btn-border, #e1e1e1);
    background: var(--cw-btn-bg, #f3f3f3);
    color: var(--cw-btn-text, #444444) !important;
}
.board .form-button-grey:hover { background: var(--cw-btn-bg-hover, #e9e9e9); }

.board .btnArea {
    margin: 20px 0 0;
    overflow: hidden;
}
.board .btnArea .form-button { margin-left: 4px; }
.board .btnArea .etc .form-button { margin-left: 0; }

/* ---------- 목록 ---------- */
.board .boardList {
    border: 0;
    border-top: 2px solid var(--cw-line-strong, #333333);
    border-collapse: collapse;
}
.board .boardList th,
.board .boardList td {
    padding: 16px 12px;
    border: 0;
    border-bottom: 1px solid var(--cw-line, #e1e1e1);
    color: var(--cw-text, #222222);
    font-size: 14px;
    vertical-align: middle;
}
.board .boardList th {
    background: var(--cw-label-bg, #f7f7f7);
    font-weight: bold;
}
.board .boardList th a { color: var(--cw-text, #222222); }
.board .boardList td { background: #fff; }
.board .boardList td.num,
.board .boardList td.date,
.board .boardList td.reading { color: var(--cw-text-sub, #888888); }
.board .boardList td.title {
    font-weight: normal;
    white-space: normal;
}
.board .boardList td a { color: var(--cw-text, #222222); }
.board .boardList td.title a:hover { text-decoration: underline; }
.board .boardList tbody tr:hover td { background: var(--cw-row-hover, #fafafa); }
.board .boardList input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--cw-text, #222222);
}

/* 카테고리 탭 */
.board .categoryList { margin-bottom: 16px; }
.board .categoryList .categoryItemOver a,
.board .categoryList .categoryThisItem a {
    height: auto;
    margin: 0 4px 4px 0;
    padding: 9px 16px;
    border: 1px solid var(--cw-input-border, #d4d4d4);
    border-radius: var(--cw-btn-radius, 5px);
    background: #fff;
    color: var(--cw-text-sub, #888888);
    font-weight: normal;
    line-height: 1.4;
}
.board .categoryList .categoryThisItem a {
    border-color: var(--cw-submit-bg, #222222);
    background: var(--cw-submit-bg, #222222);
    color: var(--cw-submit-text, #ffffff);
}

/* ---------- 페이지 네비게이션 ---------- */
.board .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 30px 0 10px;
}
.board .pagination a,
.board .pagination strong {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 8px;
    border: 1px solid var(--cw-input-border, #d4d4d4);
    border-radius: var(--cw-btn-radius, 5px);
    background: #fff;
    color: var(--cw-text-sub, #888888);
    font-family: inherit;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    box-sizing: border-box;
}
.board .pagination a:hover {
    border-color: var(--cw-input-focus, #888888);
    color: var(--cw-text, #222222);
}
.board .pagination strong {
    border-color: var(--cw-submit-bg, #222222);
    background: var(--cw-submit-bg, #222222);
    color: var(--cw-submit-text, #ffffff) !important;
    font-weight: bold;
}
.board .pagination a.prevEnd,
.board .pagination a.nextEnd {
    padding: 0 12px;
    border: 1px solid var(--cw-input-border, #d4d4d4);
    background-image: none;
}
.board .pagination a.prevEnd::before { content: "\2039"; margin-right: 6px; }
.board .pagination a.nextEnd::after { content: "\203A"; margin-left: 6px; }

/* ---------- 상세 ---------- */
.board .boardRead .tit_area {
    border-bottom: 0;
}
.board .boardRead .tit_area h3 {
    margin: 0;
    color: var(--cw-text, #222222);
    font-size: 18px;
    font-weight: bold;
}
.board .boardRead .tit_area span {
    color: var(--cw-text-sub, #888888);
    font-size: 13px;
}
.board .boardRead .extraVarsList {
    margin: 0;
    border: 0;
    border-top: 2px solid var(--cw-line-strong, #333333) !important;  /* 템플릿 인라인 style 덮어씀 */
    border-bottom: 1px solid var(--cw-line, #e1e1e1);
    border-collapse: collapse;
}
.board .boardRead .extraVarsList th,
.board .boardRead .extraVarsList td {
    padding: 18px 24px;
    border: 0;
    border-top: 1px solid var(--cw-line, #e1e1e1);
    color: var(--cw-text, #222222);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    vertical-align: middle;
}
.board .boardRead .extraVarsList tr:first-child > th,
.board .boardRead .extraVarsList tr:first-child > td { border-top: 0; }
.board .boardRead .extraVarsList th {
    width: 200px;
    background: var(--cw-label-bg, #f7f7f7);
    font-weight: normal;
    word-break: keep-all;
}
.board .boardRead .extraVarsList td {
    background: #fff;
    overflow-wrap: anywhere;
}
.board .boardRead .extraVarsList td a {
    color: var(--cw-text, #222222);
    text-decoration: underline;
}
.board .boardRead .extraVarsList td .file_info {
    color: var(--cw-text-sub, #888888);
    font-size: 13px;
}

/* 비관리자 접수 완료 화면 */
.board .message_box {
    margin: 0;
    padding: 40px 20px;
    border-top: 2px solid var(--cw-line-strong, #333333);
    border-bottom: 1px solid var(--cw-line, #e1e1e1);
    background: var(--cw-label-bg, #f7f7f7);
    color: var(--cw-text, #222222);
    font-size: 16px;
    font-weight: normal;
}

/* ---------- 모바일 ---------- */
@media all and (max-width: 768px) {
    .board .boardList th,
    .board .boardList td {
        padding: 12px 6px;
        font-size: 13px;
    }

    /* 상세: 항목명 위 / 값 아래 */
    .board .boardRead .extraVarsList,
    .board .boardRead .extraVarsList tbody,
    .board .boardRead .extraVarsList tr,
    .board .boardRead .extraVarsList th,
    .board .boardRead .extraVarsList td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .board .boardRead .extraVarsList th {
        padding: 14px 16px 4px;
        background: none;
        font-weight: bold;
        text-align: left;
    }
    .board .boardRead .extraVarsList td {
        padding: 0 16px 14px;
        border-top: 0;
    }
    .board .boardRead .tit_area h3 { font-size: 16px; }

    .board .btnArea .form-button { margin: 4px 0 0 4px; }
    .board .pagination a.prevEnd,
    .board .pagination a.nextEnd { padding: 0 10px; }
}