@charset "utf-8";

/* 게시판 공통 스타일 */
.bo_v_wrap { max-width: var(--max-width); margin: 0 auto; padding: 40px 20px; font-family: 'Pretendard', sans-serif; }

/* 1. 카테고리 탭 */
.bo_cate { margin-bottom: 30px; text-align: center; }
.bo_cate ul { display: inline-flex; gap: 10px; background: #f8f9fa; padding: 6px; border-radius: 50px; }
.bo_cate li a { display: block; padding: 10px 25px; border-radius: 40px; font-size: 15px; color: #666; font-weight: 500; }
.bo_cate li a#bo_cate_on { background: var(--primary-color); color: #fff; box-shadow: 0 4px 10px rgba(0,82,164,0.3); }

/* 2. 게시판 상단 (검색 및 카운트) */
.bo_top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0; padding-bottom: 15px; border-bottom: 1px solid #1a1a1a; }
.bo_list_total { font-size: 15px; color: #1a1a1a; }
.bo_list_total b { color: var(--primary-color); font-weight: 700; }

/* 3. 목록 스타일 (리스트형) */
.bo_table { width: 100%; border-collapse: collapse; }
.bo_table tr { border-bottom: 1px solid #eee; transition: 0.2s; }
.bo_table tbody tr:hover { background: #fcfcfc; }
.bo_table th { padding: 15px 10px; font-weight: 700; color: #333; font-size: 16px; border-bottom: 1px solid #ddd; }
.bo_table td { padding: 20px 10px; text-align: center; color: #666; font-size: 15px; }

.td_subject { text-align: left !important; }
.td_subject a { display: block; font-size: 18px; color: #1a1a1a; font-weight: 600; }
.td_subject a .bo_cate_link { font-size: 13px; color: var(--primary-color); background: rgba(0,82,164,0.05); padding: 2px 8px; border-radius: 4px; margin-right: 10px; font-weight: 500; }
.td_subject a:hover { color: var(--primary-color); }

/* 4. 페이지네이션 */
.pg_wrap { 
    margin-top: 60px; 
    text-align: center; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; /* 숫자 사이 간격 */
    flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
}

/* 그누보드 특유의 접근성 텍스트 숨기기 (핵심) */
.sound_only, legend { 
    display: none !important; 
}

/* 숫자 및 버튼 공통 스타일 */
.pg_page, .pg_current, .pg_start, .pg_prev, .pg_next, .pg_end { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    font-size: 15px; 
    color: #666; 
    border: 1px solid #eee; 
    background: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1;
}

/* 현재 페이지 강조 (코레일 블루 혹은 다크 컬러) */
.pg_current { 
    background: var(--primary-color, #0052A4); 
    color: #fff; 
    border-color: var(--primary-color, #0052A4); 
    font-weight: 700; 
}

/* 마우스 호버 효과 */
.pg_page:hover, .pg_start:hover, .pg_prev:hover, .pg_next:hover, .pg_end:hover { 
    background: #f8f9fa; 
    border-color: #ccc; 
    color: #000;
}

/* '다음', '맨끝' 등 텍스트 버튼 스타일 조정 (원형 안에 글자가 꽉 차 보일 경우) */
.pg_next, .pg_end, .pg_start, .pg_prev {
    font-size: 12px;
    letter-spacing: -1px;
}

/* 5. 게시글 보기 (View) */
.view_header { padding: 50px 0 30px; border-bottom: 1px solid #eee; text-align: center; }
.view_header h2 { font-size: 36px; font-weight: 800; color: #111; letter-spacing: -1px; margin-bottom: 20px; line-height: 1.3; }
.view_info { display: flex; justify-content: center; gap: 20px; color: #999; font-size: 15px; }
.view_info span b { color: #333; margin-right: 5px; }

.view_content { padding: 60px 0; font-size: 18px; line-height: 1.8; color: #444; min-height: 300px; }
.view_content img { max-width: 100%; border-radius: 15px; margin: 20px 0; }

.view_btns { display: flex; justify-content: space-between; padding: 30px 0; border-top: 1px solid #eee; }
.btn_b01, .btn_admin { padding: 12px 25px; border-radius: 8px; font-size: 15px; font-weight: 600; display: inline-block; }
.btn_b01 { background: #f5f5f5; color: #666; }
.btn_submit { background: var(--primary-color); color: #fff; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .view_header h2 { font-size: 24px; }
    .bo_table thead { display: none; }
    .bo_table td { display: block; padding: 10px 20px; text-align: left; }
    .td_subject a { font-size: 16px; }
    .td_num, .td_date, .td_hit { display: inline-block; font-size: 13px; color: #aaa; }
}

/* 1. 공지사항 강조 스타일 */
.bo_table tr.bo_notice { background-color: #fcfdfe; } /* 아주 연한 푸른색 배경 */
.notice_badge { 
    display: inline-block; 
    background: var(--accent-color, #E21836); 
    color: #fff; 
    font-size: 11px; 
    font-weight: 700; 
    padding: 2px 8px; 
    border-radius: 3px; 
    line-height: 1.4;
}
.bo_notice .td_subject a { font-weight: 700; color: #000; }

/* 2. 비밀글 아이콘 */
.icon_secret { color: #aaa; margin-right: 5px; font-size: 14px; }

/* 3. 검색창 디자인 */
.list-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f7f7; /* 배경 회색 */
    padding: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* 8. 게시판 목록 댓글 갯수 스타일 */
.bo_cmt_cnt {
    display: inline-block;
    margin-left: 12px; /* 제목과의 간격 */
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color, #0052A4);
    vertical-align: middle;
}

.total-info { font-size: 0.95em; color: #666; }
.total-info .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #002366;
    vertical-align: middle;
    margin-right: 8px;
}
.total-info strong { color: #002366; font-weight: bold; }

#bo_sch { display: block; margin: 0; padding: 0; border: 0; }
#bo_sch form { display: flex; }

#sfl {
    height: 40px;
    border: 1px solid #ccc;
    padding: 0 10px;
    background: #fff;
    color: #333;
    font-size: 14px;
    margin-right: 5px;
}

.sch_input {
    height: 40px;
    border: 1px solid #ccc;
    padding: 0 15px;
    width: 250px;
    font-size: 14px;
    outline: none;
    margin-right: 5px;
}

.sch_btn {
    height: 40px;
    width: 90px;
    background: #002366; /* 남색 버튼 */
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    margin-left: -1px; /* 테두리 겹침 방지 */
}

.sch_btn i { margin-right: 5px; }


/* 6. 글쓰기 페이지 (Write) */
.bo_w_info { margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; font-size: 14px; color: #666; }
.bo_w_info i { color: var(--primary-color); margin-right: 5px; }

.write_div { margin-bottom: 25px; position: relative; }
.write_div label { display: block; font-weight: 700; color: #333; margin-bottom: 10px; font-size: 15px; }
.write_div .frm_input { 
    width: 100%; 
    height: 50px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    padding: 0 15px; 
    font-size: 16px; 
    transition: all 0.3s; 
    box-sizing: border-box;
}
.write_div .frm_input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0,82,164,0.1); outline: none; }

/* 카테고리 선택 커스텀 */
.write_div select.frm_input { cursor: pointer; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 15px center; -webkit-appearance: none; }

/* 에디터 영역 */
.write_div .cke_chrome { border: 1px solid #ddd !important; border-radius: 8px !important; overflow: hidden; }
.cke_sc {display:none;}

/* 7. 웹에디터 미사용 시 textarea 스타일 */
.write_div textarea { 
    display: block;
    width: 100%; 
    min-height: 400px; /* 충분한 작성 공간 확보 */
    padding: 20px; 
    line-height: 1.6; 
    font-family: 'Pretendard', sans-serif; /* 폰트 일치 */
    font-size: 16px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    background: #fff;
    outline: none;
    resize: vertical; /* 사용자가 높이만 조절 가능하도록 설정 */
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* 마우스를 올렸을 때 */
.write_div textarea:hover {
    border-color: #ccc;
}

/* 클릭(포커스) 되었을 때 - 제목창과 통일 */
.write_div textarea:focus { 
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 3px rgba(0,82,164,0.1); 
    background: #fff;
}


/* 파일 첨부 영역 */
.bo_w_flist { 
    margin-top: 10px; 
    border: 1px solid #eee; /* 점선보다 깔끔한 실선 권장 */
    padding: 10px 20px; 
    border-radius: 8px; 
    background: #fcfcfc; 
}
.bo_w_flist .frm_file { 
    display: flex;
    align-items: center; /* 파일 선택 버튼과 '선택된 파일 없음' 글씨 수직 중앙 정렬 */
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.bo_w_flist .frm_file:last-child { border-bottom: 0; }

/* 옵션 체크박스 */
.bo_w_option { 
    display: flex; 
    align-items: center; /* 수직 중앙 정렬 */
    gap: 10px; 
    margin: 10px 0 20px; 
}
.bo_w_option input[type="checkbox"] { 
    width: 18px; 
    height: 18px; 
    margin: 0; /* 기본 마진 제거 */
    cursor: pointer;
    accent-color: var(--primary-color); /* 체크박스 색상 통일 */
}
.bo_w_option label { 
    display: inline-block; 
    font-size: 15px;
    font-weight: 500; 
    cursor: pointer; 
    color: #333;
    line-height: 18px; /* 체크박스 높이와 맞춰 글씨 중앙 정렬 */
}

/* 하단 버튼 */
.btn_confirm { text-align: center; margin-top: 50px; display: flex; justify-content: center; gap: 10px; }
.btn_confirm .btn_submit { width: 180px; height: 55px; line-height: 55px; font-size: 17px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s; }
.btn_confirm .btn_cancel { width: 120px; height: 55px; line-height: 55px; background: #fff; color: #666; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; font-weight: 600; }
.btn_confirm .btn_submit:hover { opacity: 0.9; transform: translateY(-2px); }

/* 버튼 공통 스타일 업데이트 */
.btn_confirm .btn_submit, 
.btn_confirm .btn_cancel { 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px; 
    font-size: 16px; 
    font-weight: 600; 
    border-radius: 8px !important; /* 작성완료 버튼에도 강제 적용 */
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.btn_confirm .btn_submit { 
    width: 180px; 
    background: var(--primary-color, #0052A4); 
    color: #fff; 
    border: none;
    cursor: pointer; 
}
.btn_confirm .btn_cancel { 
    width: 120px; 
    background: #fff; 
    color: #666; 
    border: 1px solid #ddd; 
    text-decoration: none; 
}

/* 버튼 호버 효과 */
.btn_confirm .btn_submit:hover { background: #003d7a; }
.btn_confirm .btn_cancel:hover { background: #f8f9fa; border-color: #ccc; }

/* 모바일 대응 수정 */
@media (max-width: 768px) {
    /* 1. 상단 검색 영역 수정 */
    .list-top-nav { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 12px; 
        padding: 15px; 
    }

    #bo_sch { width: 100%; }
    #bo_sch form { 
        display: flex; 
        width: 100%; 
        gap: 4px; /* 요소 간 간격 */
    }

    #sfl { 
        width: 85px; /* 검색 조건 선택창 너비 고정 */
        flex-shrink: 0; 
        margin: 0; 
    }

    .sch_input { 
        flex: 1; /* 입력창이 남은 공간을 모두 차지 */
        width: 100%; 
        min-width: 0; /* flex 박스 안에서 줄어들 수 있도록 설정 */
        margin: 0; 
    }

    .sch_btn { 
        width: 90px; /* 버튼 너비 적절히 조절 */
        flex-shrink: 0; 
        margin: 0; 
        white-space: nowrap; /* 글자 줄바꿈 방지 */
    }

    /* 2. 목록 스타일 수정 (제목/날짜 2줄 구성) */
    .bo_table {
        width: 100%;
        table-layout: fixed; /* 테이블 너비 고정 */
        word-break: break-all; /* 긴 영문/숫자 줄바꿈 */
    }

    .bo_table thead { display: none; } /* 제목 줄 숨김 */
    
    .bo_table tr { 
        display: flex; 
        flex-wrap: wrap; /* 줄바꿈 허용 */
        padding: 12px 0; 
        border-bottom: 1px solid #eee;
        align-items: center;
        box-sizing: border-box; /* 패딩이 너비에 포함되도록 추가 */
    }

    .bo_table td { 
        display: block; 
        border: none !important; 
        text-align: left !important;
        box-sizing: border-box;
    }

    /* 3. 공지 아이콘 및 글번호 처리 */
    .td_num { display: none !important; } /* 일반 번호는 완전히 숨김 */
    .bo_notice .td_num { 
        display: block !important; 
        width: auto; 
        order: 1; 
        margin-right: 8px; /* 아이콘과 제목 사이 간격 */
        padding: 0 !important;
    }

    /* 4. 글 제목: 첫 번째 줄 꽉 채우기 */
    .td_subject { 
        padding: 0 !important;
        order: 2; 
        flex: 1; 
        /* 제목이 첫 줄을 다 차지하도록 강제 (아이콘 제외 남은 너비) */
        min-width: calc(100% - 60px); 
    }
    .bo_notice .td_subject { min-width: calc(100% - 60px); }
    .bo_table tr.bo_notice {background: none;}

    /* 공지가 아닌 글은 제목이 100% 차지 */
    .bo_table tr:not(.bo_notice) .td_subject { min-width: 100%; }

    .td_subject a { 
        display: block;
        font-size: 16px; 
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; /* 길면 ... 처리 */
    }

    /* 5. 작성자 및 날짜: 두 번째 줄로 밀어내기 */
    .td_name, .td_date { 
        display: inline-block !important; 
        width: auto; 
        font-size: 13px; 
        margin-top: 8px; /* 제목과의 간격 */
    }

     .td_name { 
        padding: 0 !important;
        order: 3; 
        color: #777; 
    }

    .td_date { 
        order: 4; 
        color: #aaa !important; 
        padding: 0 0 0 12px !important; 
        position: relative;
    }

    /* 작성자와 날짜 사이 구분선(점) */
    .td_date::before {
        content: "·";
        position: absolute;
        left: 4px;
        color: #ddd;
        font-weight: bold;
    }
    
    /* 제목 옆 아이콘들 간격 조정 */
    .td_subject .notice_badge,
    .td_subject .icon_secret {
        vertical-align: middle;
        margin-top: -3px;
    }

    /* 불필요한 조회수, 관리 버튼 숨김 */
    .td_hit, .td_mng { display: none !important; }

    /* 페이지네이션 간격 조정 */
    .pg_wrap { margin-top: 30px; gap: 5px; }
    .pg_page, .pg_current { width: 35px; height: 35px; font-size: 14px; }

    /* 댓글 */
    .bo_cmt_cnt {
        font-size: 13px;
        margin-left: 4px;
    }

    /* 글쓰기 */
    .btn_confirm .btn_submit { flex: 2; }
    .btn_confirm .btn_cancel { flex: 1; }
}