/* 기본 설정 */
* {
    box-sizing: border-box; /* 패딩과 보더가 너비/높이에 포함되도록 */
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* 기본 폰트 설정 */
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: #007bff; /* 링크 기본 색상 */
}

a:hover {
    text-decoration: underline;
}

/* 게시판 공통 스타일 */
#bo_list, #bo_w {
    max-width: 1200px; /* 게시판 최대 너비 */
    margin: 20px auto; /* 중앙 정렬 및 상하 여백 */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#bo_v_table {
    font-size: 1.8em;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
    text-align: center;
}

.sound_only {
    display: none; /* 스크린 리더기용 텍스트 숨기기 */
}

/* 버튼 공통 스타일 - 기본 정의 */
.btn, .btn2, input[type="submit"] { /* input[type="submit"]도 여기에 포함 */
    display: inline-block;
    padding: 10px 18px; /* 기본 버튼 패딩 */
    margin: 5px; /* 버튼 간 여백 (상하좌우 모두 적용) */
    font-size: 1em; /* 기본 폰트 크기 */
    text-align: center; /* 버튼 텍스트 가로 중앙 정렬 */
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    line-height: 1; /* 글자 세로 중앙 정렬 */
    box-sizing: border-box; /* 패딩과 보더가 너비에 포함되도록 */
    white-space: nowrap; /* 글자 잘림 방지를 위해 한 줄로 표시 */
    min-width: 80px; /* 기본 버튼 최소 너비 확보 */
}

/* .btn (기본 파란색) */
.btn {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn:hover {
    background-color: #0056b3;
    border-color: #004085;
    text-decoration: none;
}

/* .btn2 (기본 회색) */
.btn2 {
    color: #fff; /* 글자색 흰색으로 변경 */
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn2:hover {
    background-color: #5a6268;
    border-color: #545b62;
    text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* 특정 버튼 색상 및 레이아웃 오버라이드 (!!important 사용) */

/* 게시판 목록 상단/하단 "질문쓰기" 버튼 (파란색) */
/* list.skin.php에서 <a class='btn m mobile_write_btn'> 또는 <a class='btn'>로 사용됨 */
.board_buttons_area .mobile_write_btn, /* 상단 질문쓰기 버튼 */
.bo_fx .btn_bo_user .btn { /* 하단 질문쓰기 버튼 */
    color: #fff !important;
    background-color: #007bff !important; /* 파란색으로 강제 */
    border-color: #007bff !important; /* 파란색으로 강제 */
    white-space: nowrap !important;
    padding: 10px 18px !important;
    font-size: 1em !important;
    line-height: 1 !important;
    min-width: 80px !important;
    display: block !important; /* 항상 블록 요소로 처리 (모바일에서 줄바꿈 방지) */
    width: 100% !important; /* 너비 100% 사용 */
    margin: 5px 0 !important; /* 상하 여백 추가, 좌우 여백 제거 */
}

.board_buttons_area .mobile_write_btn:hover,
.bo_fx .btn_bo_user .btn:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
}

/* 게시물 작성 페이지 "작성완료" 버튼 (빨간색) */
#bo_w .btn_confirm #btn_submit {
    color: #fff !important;
    background-color: #dc3545 !important; /* 빨간색 유지 */
    border-color: #dc3545 !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 10px 18px !important;
    font-size: 1em !important;
    white-space: nowrap !important;
    min-width: 80px !important;
    margin: 0 5px !important; /* 좌우 여백 유지 */
}

#bo_w .btn_confirm #btn_submit:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* 게시물 작성 페이지 "취소" 버튼 (회색) */
#bo_w .btn_confirm a.btn2 {
    color: #fff !important;
    background-color: #6c757d !important; /* 회색 유지 */
    border-color: #6c757d !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 10px 18px !important;
    font-size: 1em !important;
    white-space: nowrap !important;
    min-width: 80px !important;
    margin: 0 5px !important; /* 좌우 여백 유지 */
}

#bo_w .btn_confirm a.btn2:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

/* 게시판 하단 "삭제", "복사", "이동" 버튼 (파란색) */
/* 이 버튼들은 <input type="submit">이면서 .btn_bo_adm 클래스 안에 있음 */
.btn_bo_adm input[type="submit"] {
    color: #fff !important;
    background-color: #007bff !important; /* 파란색으로 변경 */
    border-color: #007bff !important;
    white-space: nowrap !important;
    padding: 10px 18px !important;
    font-size: 1em !important;
    line-height: 1 !important;
    min-width: 80px !important;
    display: block !important; /* 블록 요소로 변경 */
    width: 100% !important; /* 너비 100% */
    margin: 5px 0 !important; /* 상하 여백 추가, 좌우 여백 제거 */
}

.btn_bo_adm input[type="submit"]:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
}

/* 게시판 하단 "검색" 버튼 (파란색) */
/* 검색 폼 안의 submit 버튼 (class="btn" 추가했으므로 .btn 선택자를 사용) */
#bo_sch .btn { /* input[type="submit"]은 .btn 클래스를 가짐 */
    color: #fff !important;
    background-color: #007bff !important; /* 파란색으로 강제 */
    border-color: #007bff !important;
    white-space: nowrap !important;
    padding: 10px 18px !important;
    font-size: 1em !important;
    line-height: 1 !important;
    min-width: 80px !important;
    display: block !important; /* 블록 요소로 변경 */
    width: 100% !important; /* 너비 100% */
    margin: 5px 0 !important; /* 상하 여백 추가, 좌우 여백 제거 */
}

#bo_sch .btn:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
}

/* ---------------------------------------------------------------------- */

.btn.m {
    padding: 6px 12px;
    font-size: 0.85em;
}

.btn.l {
    padding: 10px 20px;
    font-size: 1.1em;
}

.frm_input, .ed, .required {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

.frm_input:focus, .ed:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* list.skin.php 관련 스타일 */

#bo_list #board_category_ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap; /* 카테고리가 많을 경우 줄바꿈 */
    gap: 10px; /* 항목 간 간격 */
}

#bo_list #board_category_ul li a {
    display: block;
    padding: 8px 15px;
    border: 1px solid #eee;
    border-radius: 20px;
    background-color: #f9f9f9;
    color: #555;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

#bo_list #board_category_ul li a:hover {
    background-color: #e9ecef;
    border-color: #ccc;
    text-decoration: none;
}

#bo_list #board_category_ul li a#cate_select {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: bold;
}

.board_top {
    display: flex;
    justify-content: space-between; /* 양쪽 정렬 */
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 */
    gap: 10px; /* 항목 간 간격 */
}

.board_category_area {
    flex-grow: 1; /* 남은 공간 채우기 */
}

#bo_cate {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 항목 간 간격 */
}

#bo_cate li a {
    display: block;
    padding: 8px 15px;
    border: 1px solid #eee;
    border-radius: 20px;
    background-color: #f9f9f9;
    color: #555;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

#bo_cate li a:hover {
    background-color: #e9ecef;
    border-color: #ccc;
    text-decoration: none;
}

#bo_cate li a#bo_cate_on {
    background-color: #28a745; /* 답변대기/완료 등 활성화 색상 */
    color: #fff;
    border-color: #28a745;
    font-weight: bold;
}

.board_buttons_area {
    display: flex;
    align-items: center;
    gap: 10px; /* 버튼 간 간격 */
}

.total_count_display {
    font-size: 0.9em;
    color: #777;
    margin-right: 10px;
}

.board_list {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border-top: 2px solid #007bff;
}

.board_list th, .board_list td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.board_list th {
    background-color: #f8f8f8;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
    white-space: nowrap; /* 헤더 텍스트 줄바꿈 방지 */
}

.board_list td {
    font-size: 0.9em;
    color: #444;
}

.board_list tr:hover {
    background-color: #f5f5f5; /* 마우스 오버 시 배경색 */
}

.board_list .bo_notice {
    background-color: #eef8ff; /* 공지사항 배경색 */
    font-weight: bold;
}

.board_list .td_num {
    text-align: center;
    width: 60px;
    color: #777;
}

.board_list .td_chk {
    text-align: center;
    width: 40px;
}

.board_list .td_subject {
    position: relative;
    padding-right: 200px; /* 우측 정보 공간 확보 */
}

.board_list .td_subject > div:first-child {
    margin-right: 10px; /* 제목과 오른쪽 정보 사이 간격 */
}

.board_list .td_subject > div:last-child {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px; /* 정보 항목 간 간격 */
    white-space: nowrap;
    font-size: 0.85em;
    color: #777;
}

.board_list .bo_cate_link {
    display: inline-block;
    background-color: #f0f0f0;
    color: #777;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.8em;
    margin-right: 5px;
}

.board_list .comment_cnt {
    color: #007bff;
    font-weight: bold;
    margin-left: 5px;
}

.board_list .empty_table {
    text-align: center;
    padding: 50px;
    color: #777;
}

.bo_fx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 */
    gap: 10px; /* 항목 간 간격 */
}

.bo_fx ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px; /* 버튼 간 간격 */
}

.board_page {
    text-align: center;
    margin-top: 30px;
    font-size: 1.1em;
}

.board_page a, .board_page strong {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #555;
}

.board_page strong {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: bold;
}

.board_page a:hover {
    background-color: #f0f0f0;
    text-decoration: none;
}

#bo_sch {
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-top: 20px;
}

#bo_sch legend {
    display: none;
}

#bo_sch select, #bo_sch input[type="text"] {
    margin-right: 5px;
    vertical-align: middle;
}
#bo_sch input[type="text"] {
    width: 180px; /* 검색어 입력창 너비 */
}


/* write.skin.php 관련 스타일 */

/* 폼 전체 너비 및 패딩 조정 */
#bo_w #fwrite {
    max-width: 900px; /* 최대 너비 설정, 필요에 따라 조절 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 20px; /* 내부 여백 추가 */
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}

/* 테이블 컨테이너에 스크롤 적용 (모바일에서 테이블이 넘칠 경우) */
#bo_w .tbl_wrap {
    overflow-x: auto; /* 가로 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}

/* 게시물 작성 테이블 */
#bo_w .board_list {
    width: 100%;
    min-width: 320px; /* 테이블 최소 너비 설정, 모바일에서 너무 작아지지 않게 */
    border-collapse: collapse;
}

#bo_w .board_list tr {
    border-bottom: 1px solid #eee; /* 각 행 하단 경계선 */
}

/* 첫 번째 셀 (라벨) 스타일 */
#bo_w .board_list .td_label {
    width: 100px; /* 라벨 열 고정 너비, 필요에 따라 조절 */
    min-width: 80px;
    padding: 10px;
    font-weight: bold;
    color: #555;
    vertical-align: middle; /* 세로 중앙 정렬 */
    background-color: #f8f8f8; /* 배경색 추가 */
    border-right: 1px solid #eee;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 두 번째 셀 (입력 필드) 스타일 */
#bo_w .board_list .td_input {
    padding: 10px;
    vertical-align: middle;
}

/* 입력 필드 (input, select, textarea) 공통 스타일 */
#bo_w .frm_input,
#bo_w select,
#bo_w textarea {
    width: 100%; /* 부모 td의 100% 너비 */
    max-width: 600px; /* 최대 너비 제한 */
    padding: 8px 10px; /* 패딩 조정 */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em; /* 폰트 크기 조정 */
    line-height: 1.5; /* 줄 높이 조정 */
}

/* 텍스트에어리어 높이 설정 (에디터가 아닌 경우) */
#bo_w textarea#wr_content {
    min-height: 250px; /* 최소 높이 설정, 필요에 따라 조절 */
    resize: vertical; /* 세로 방향으로만 크기 조절 가능하게 */
}

/* 에디터가 적용된 경우 (예: CKEditor) */
/* 에디터는 자체적으로 높이/너비를 조절하므로, 이곳에서는 최소 높이만 보장 */
.cke_contents {
    min-height: 350px !important; /* 에디터 내용 영역 최소 높이 */
}

/* 임시 저장 버튼 및 목록 */
#bo_w #btn_autosave {
    margin-left: 10px;
}
#bo_w #autosave_pop {
    max-height: 300px; /* 임시 저장 목록 최대 높이 */
    overflow-y: auto;
}

/* 버튼 영역 */
#bo_w .btn_confirm {
    text-align: center;
    padding: 20px 0;
}
#bo_w .btn_confirm .btn,
#bo_w .btn_confirm .btn2 {
    margin: 0 5px; /* 버튼 간 간격 */
}

/* ---------------------------------------------------------------------- */
/* 모바일 화면 (768px 이하) 관련 스타일 */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    #bo_list, #bo_w {
        padding: 15px; /* 모바일에서 패딩 줄임 */
        margin: 10px auto; /* 상하 여백 줄임 */
    }

    #bo_v_table {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    .board_top {
        flex-direction: column; /* 세로로 정렬 */
        align-items: flex-start; /* 왼쪽 정렬 */
        gap: 15px;
    }

    .board_buttons_area {
        width: 100%;
        justify-content: space-between; /* 버튼 양쪽 정렬 */
    }

    #bo_cate, #board_category_ul {
        width: 100%; /* 너비 100% 사용 */
        justify-content: flex-start; /* 왼쪽 정렬 */
        gap: 8px; /* 간격 줄임 */
    }

    #bo_cate li a, #board_category_ul li a {
        padding: 6px 10px;
        font-size: 0.85em;
    }

    .total_count_display {
        display: none; /* 모바일에서 총 게시물 수 숨김 (공간 절약) */
    }
    .mobile_write_btn {
        flex-grow: 1; /* 글쓰기 버튼이 남은 공간 채우기 */
        text-align: center;
    }

    /* "글쓴이" 테이블 헤더 모바일에서 숨김 */
    .desktop_only {
        display: none;
    }

    /* 글 작성자 정보 모바일에서 숨김 */
    .mobile_hidden {
        display: none !important;
    }

    .board_list th, .board_list td {
        padding: 10px;
        font-size: 0.85em;
    }

    .board_list .td_subject {
        padding-right: 0; /* 모바일에서는 우측 정보가 아래로 내려가므로 패딩 제거 */
    }

    .board_list .td_subject > div:last-child {
        position: static; /* 절대 위치 해제 */
        transform: none;
        margin-top: 5px; /* 제목 아래로 여백 */
        flex-wrap: wrap; /* 정보 항목 줄바꿈 */
        font-size: 0.8em;
        width: 100%; /* 너비 100% */
        justify-content: flex-start; /* 왼쪽 정렬 */
    }

    .board_list .td_chk {
        width: 30px;
    }

    .bo_fx {
        flex-direction: column; /* 세로 정렬 */
        align-items: flex-start;
        gap: 15px;
    }

    .bo_fx ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 8px; /* 버튼 간 간격 */
        width: 100%; /* 모바일에서 버튼 영역 100% */
        justify-content: space-between; /* 버튼 간격 균등 분배 */
    }

    .bo_fx ul li {
        flex-grow: 1; /* 각 버튼이 공간 채우기 */
    }

    /* 모바일에서 모든 주요 버튼 스타일 (질문쓰기, 삭제, 복사, 이동, 검색) */
    .board_buttons_area .btn, /* 상단 질문쓰기 */
    .bo_fx ul li .btn, /* 하단 질문쓰기 */
    .bo_fx ul li input[type="submit"], /* 삭제, 복사, 이동 */
    #bo_sch .btn { /* 검색 */
        font-size: 0.9em !important;
        padding: 10px 0 !important; /* 패딩 조정 */
        line-height: 1 !important;
        white-space: nowrap !important;
        min-width: 60px !important;
        width: 100% !important; /* 너비 100% */
        display: block !important;
        margin: 5px 0 !important; /* 상하 여백 추가 */
    }

    /* 하단 삭제, 복사, 이동 버튼 색상 (파란색) */
    .bo_fx ul li input[type="submit"] {
        background-color: #007bff !important; /* 파란색으로 변경 */
        border-color: #007bff !important;
    }
    .bo_fx ul li input[type="submit"]:hover {
        background-color: #0056b3 !important;
        border-color: #004085 !important;
    }


    .board_page a, .board_page strong {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    #bo_sch {
        padding: 15px;
    }
    #bo_sch select, #bo_sch input[type="text"] {
        width: 100%; /* 검색 폼 요소 너비 100% */
        margin-right: 0;
        margin-bottom: 8px; /* 요소 간 여백 */
    }
    #bo_sch input[type="text"] {
        max-width: none;
    }

    /* write.skin.php 모바일 스타일 */
    #bo_w #fwrite {
        padding: 10px; /* 모바일에서 패딩 줄임 */
        max-width: 100%; /* 모바일에서 100% 너비 사용 */
    }

    #bo_w .board_list .td_label {
        width: 60px; /* 모바일에서 라벨 열 너비 줄임 */
        min-width: 60px;
        padding: 8px; /* 패딩 줄임 */
        font-size: 0.9em;
    }

    #bo_w .board_list .td_input {
        padding: 8px; /* 모바일에서 패딩 줄임 */
    }

    #bo_w .frm_input,
    #bo_w select,
    #bo_w textarea {
        padding: 6px 8px; /* 모바일에서 입력 필드 패딩 줄임 */
        font-size: 0.9em; /* 폰트 크기 줄임 */
    }

    #bo_w textarea#wr_content {
        min-height: 200px; /* 모바일에서 텍스트에어리어 최소 높이 조정 */
    }
    .cke_contents {
        min-height: 250px !important; /* 모바일에서 에디터 내용 영역 최소 높이 조정 */
    }

    /* 임시 저장 버튼 */
    #bo_w #btn_autosave {
        display: block; /* 블록 요소로 변경 */
        width: 100%; /* 너비 100% */
        margin-top: 5px; /* 상단 여백 추가 */
        margin-left: 0;
    }

    /* 모바일 작성 페이지 버튼 스타일 (작성완료, 취소) */
    #bo_w .btn_confirm #btn_submit,
    #bo_w .btn_confirm a.btn2 {
        width: auto !important; /* 너비 자동 조절 */
        padding: 10px 15px !important; /* 패딩 조정 */
        min-width: 80px !important; /* 최소 너비 확보 */
        font-size: 0.9em !important;
    }
}

/* 더 작은 화면 (예: 480px 이하) */
@media (max-width: 480px) {
    #bo_list, #bo_w {
        padding: 10px;
    }

    #bo_v_table {
        font-size: 1.3em;
    }

    .board_list th, .board_list td {
        padding: 8px;
        font-size: 0.8em;
    }

    #bo_sch input[type="text"] {
        width: 100%; /* 더 작은 화면에서 검색어 입력창 너비 100% */
    }

    /* write.skin.php 더 작은 화면 스타일 */
    #bo_w .board_list .td_label {
        width: 50px; /* 라벨 열 더 줄임 */
        min-width: 50px;
        font-size: 0.8em;
    }

    #bo_w .frm_input,
    #bo_w select,
    #bo_w textarea {
        font-size: 0.85em; /* 폰트 크기 더 줄임 */
    }

    #bo_w textarea#wr_content {
        min-height: 180px; /* 더 작은 화면에서 텍스트에어리어 최소 높이 */
    }
    .cke_contents {
        min-height: 200px !important; /* 더 작은 화면에서 에디터 내용 영역 최소 높이 */
    }

    /* 더 작은 화면에서 버튼 스타일 */
    .btn, .btn2, /* 일반 버튼 포함 */
    #bo_w .btn_confirm .btn,
    #bo_w .btn_confirm .btn2,
    .board_buttons_area .btn,
    .bo_fx ul li .btn, .bo_fx ul li .btn2,
    #bo_sch .btn {
        font-size: 0.8em !important; /* 버튼 폰트 크기 줄임 */
        padding: 8px 10px !important; /* 버튼 패딩 조정 */
        min-width: 60px !important; /* 최소 너비 확보 */
    }
}