@charset "utf-8";

/* ==========================================================================
   [A] 공통 스타일 (캡처 화면 Green 테마)
   ========================================================================== */

/* 1. 기본 레이아웃 및 전체 폰트 설정 */
body {
    padding: 20px !important; /* body에 직접 들어간 padding 제거 후 여백 확보 */
    background-color: #f0f2f5; /* 페이지 전체 배경색 */
    color: #333;
	font-family: 'AppleSDGothicNeo-Regular', 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif;
}

/* [수정] 게시판 전체 컨테이너 */
#bo_list,
#bo_v,
#bo_w {
    max-width: 1200px; /* 게시판의 최대 너비를 1200px로 고정 (원하시는 크기로 조절) */
    min-width: 320px;
    margin: 2rem auto;  /* 상하 여백 및 자동 가운데 정렬 */
    padding: 0 2.5rem 2.5rem 2.5rem; /* 상단 여백만 0으로 변경 */
    background-color: #ffffff; /* 흰색 배경 */
    border: 1px solid #dee2e6;
    border-radius: 12px; /* 라운드형 테두리 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 부드러운 그림자 효과 */
    box-sizing: border-box;
}
.tbl_wrap {font-size: 14px;}
/* [수정] 게시판 제목 */
#container_title {
    margin: 0 -2.5rem 2rem -2.5rem; /* 좌우 여백을 컨테이너만큼 확장 */
    padding: 1.5rem 2.5rem;
    font-size: 1.5rem; /* 폰트 크기 살짝 조절 */
    font-weight: 700;
    color: #333;
    background-color: #fff; /* 헤더에 미세한 배경색 추가 */
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 12px;  /* 컨테이너와 맞게 상단 좌측 라운드 */
    border-top-right-radius: 12px; /* 컨테이너와 맞게 상단 우측 라운드 */
max-width: 1200px;
min-width: 320px;
margin: 2rem auto;
}

/* [추가] 제목 아래 컨텐츠 영역에 상단 여백 추가 */
#bo_list .bo_fx,
#bo_list #bo_cate,
#bo_v #bo_v_info,
#bo_w .tbl_frm01 {
    margin-top: 2rem;
}


/* 2. 버튼 스타일 */
.btn_b01, .btn_b02, .btn_admin, .btn_cancel, .btn_submit,
#bo_sch input[type="submit"], 
.btn_bo_adm input[type="submit"] {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #6c757d; /* 기본 회색 버튼 */
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn_b02, #bo_sch input[type="submit"], .btn_submit { /* 글쓰기, 검색, 작성완료 버튼 */
    background-color: #007bff; /* 파란색 강조 버튼 */
}

.btn_admin {
    background-color: #28a745; /* 녹색 관리자 버튼 */
}

.btn_bo_adm input[type="submit"] {
    background-color: #dc3545; /* 빨간색 관리 버튼 */
}

.btn_cancel {
    color: #333;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.btn_b01:hover, .btn_b02:hover, .btn_admin:hover, .btn_cancel:hover, .btn_submit:hover,
#bo_sch input[type="submit"]:hover,
.btn_bo_adm input[type="submit"]:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn_submit{color: #ff0000;}
/* 3. 상단/하단 컨트롤 바 (버튼 영역) */
.bo_fx,
#bo_v_top,
#bo_v_bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
#bo_v_bot {
    margin-top: 1.5rem;
}

.btn_bo_user,
.btn_bo_adm,
.bo_v_nb,
.bo_v_com {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 4. 페이지네이션 (페이지 번호) */
.pg_wrap {
    margin-top: 2rem;
    text-align: center;
}
.pg {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}
.pg_page, .pg_current, .pg_start, .pg_end, .pg_prev, .pg_next {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.5rem;
    font-size: 0.9rem;
    color: #333;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s;
}
.pg_page:hover, .pg_start:hover, .pg_end:hover, .pg_prev:hover, .pg_next:hover {
    background-color: #e9ecef;
}
.pg_current {
    font-weight: 700;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

/* 5. 검색창 */
#bo_sch {
    position: relative;
    margin: 2rem auto 0;
    padding: 1.5rem;
    max-width: 500px;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
#bo_sch legend {
    display: none;
}
#bo_sch .frm_input,
#bo_sch select {
    height: 2.4rem;
    padding: 0 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
    box-sizing: border-box;
}


/* ==========================================================================
   [B] 게시판 목록 페이지 (list.skin.php)
   ========================================================================== */

/* 1. 카테고리 */
#bo_cate { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #dee2e6; }
#bo_cate h2 { display: none; }
#bo_cate_ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
#bo_cate_ul li a { display: block; padding: 0.6rem 1.2rem; font-size: 0.95rem; font-weight: 500; color: #555; text-decoration: none; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 2rem; transition: all 0.2s ease; }
#bo_cate_ul li a:hover { background-color: #e9ecef; border-color: #ced4da; }
#bo_cate_ul li.on a { color: #fff; background-color: #007bff; border-color: #007bff; font-weight: 700; }

/* 2. 게시물 수 */
#bo_list_total { font-size: 0.9rem; color: #666; }
#bo_list_total span { font-weight: 600; color: #333; }

/* 3. 테이블 */
.tbl_wrap { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.tbl_head01 table { width: 100%; border-collapse: collapse; }
.tbl_head01 caption { display: none; }
.tbl_head01 thead th { padding: 1rem 0.75rem; font-weight: 600; color: #333; text-align: center; background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; }
.tbl_head01 tbody tr { transition: background-color 0.15s ease-in-out; }
.tbl_head01 tbody tr:hover { background-color: #f1f1f1; }
.tbl_head01 tbody td { padding: 1rem 0.75rem; color: #444; text-align: center; border-bottom: 1px solid #f0f0f0; }
.tbl_head01 tbody tr:last-child td { border-bottom: none; }
.tbl_head01 tr.bo_notice { background-color: #fffbe6; font-weight: 600; }
.tbl_head01 tr.bo_notice td { color: #856404; }
.empty_table { padding: 5rem 0 !important; text-align: center; color: #888; }
.bo_current { font-weight: 600; color: #007bff; }
.td_subject { text-align: left !important; }
.td_subject a { color: #333; text-decoration: none; transition: color 0.2s; }
.td_subject a:hover { color: #0056b3; text-decoration: underline; }
.td_name { color: #555; }
.td_date { font-size: 0.85rem; color: #777; }
.td_num { font-family: Consolas, monospace; font-size: 0.9rem; color: #777; }
.td_chk input { vertical-align: middle; }
.bo_cate_link { margin-right: 0.5rem; padding: 0.1rem 0.4rem; font-size: 0.75rem; font-weight: 700; color: #007bff; background-color: #e7f3ff; border-radius: 4px; text-decoration: none !important; }


/* ==========================================================================
   [C] 게시판 내용 보기 페이지 (view.skin.php)
   ========================================================================== */

#bo_v_title { padding: 1.5rem; border-bottom: 2px solid #333; margin:0; font-size: 15px;}
#bo_v_info { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 1rem 0; padding: 1rem; font-size: 0.9rem; color: #666; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e9ecef; }
#bo_v_info h2 { display: none; }
#bo_v_info strong { margin-left: 0.3rem; font-weight: 600; color: #333; }
#bo_v_file, #bo_v_link { margin: 1.5rem 0; padding: 1.5rem; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; }
#bo_v_file h2, #bo_v_link h2 { display: none; }
#bo_v_file ul, #bo_v_link ul { margin: 0; padding: 0; list-style: none; }
#bo_v_file li, #bo_v_link li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #e9ecef; }
#bo_v_file li:last-child, #bo_v_link li:last-child { border-bottom: none; }
#bo_v_file a, #bo_v_link a { color: #333; text-decoration: none; }
#bo_v_file a:hover, #bo_v_link a:hover { text-decoration: underline; }
#bo_v_file img, #bo_v_link img { margin-right: 0.5rem; vertical-align: middle; }
#bo_v_file span, #bo_v_link span { font-size: 0.85rem; color: #888; }
#bo_v_atc { padding: 2.5rem 0; }
#bo_v_atc_title { display: none; }
#bo_v_img { margin-bottom: 2rem; text-align: center; }
#bo_v_img img { max-width: 100%; height: auto; margin-bottom: 1rem; border-radius: 4px; }
#bo_v_con { font-size: 1rem; line-height: 1.8; color: #333; }
#bo_v_con img { max-width: 100%; height: auto; }
#bo_v_act { margin: 2rem 0; padding-top: 2rem; border-top: 1px solid #e9ecef; text-align: center; }
#bo_v_act .bo_v_act_gng { display: inline-block; margin: 0 0.5rem; }
#bo_v_act a { text-decoration: none; font-weight: 500; }
#bo_v_act strong { font-family: Consolas, monospace; }
#bo_v_act_good, #bo_v_act_nogood { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: #007bff; }


/* ==========================================================================
   [D] 글쓰기 페이지 (write.skin.php)
   ========================================================================== */

#bo_w .tbl_frm01 { border-top: 2px solid #6c757d; }
#bo_w .tbl_frm01 th { width: 150px; padding: 1rem; text-align: left; font-weight: 600; background-color: #f8f9fa; }
#bo_w .tbl_frm01 td { padding: 0.75rem 1rem; }
#bo_w .frm_input { height: 2.4rem; }
#bo_w input[type="text"], #bo_w input[type="password"] { width: 100%; max-width: 350px; }
#bo_w select { height: 2.4rem; padding: 0 0.5rem; border: 1px solid #ccc; border-radius: 4px; vertical-align: middle; }
#bo_w .wr_content .cke_contents, #bo_w .wr_content textarea { width: 100%; min-height: 250px; padding: 1rem; }
#bo_w .btn_confirm { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
#autosave_pop { top: 35px !important; }


/* ==========================================================================
   [E] 댓글 (view_comment.skin.php)
   ========================================================================== */
#bo_vc { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid #dee2e6; }
#bo_vc h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
#bo_vc #bo_vc_empty { text-align: center; color: #888; padding: 3rem 0; }
#bo_vc article { padding: 1.5rem 0; border-bottom: 1px solid #f0f0f0; }
#bo_vc article:last-of-type { border-bottom: none; }
#bo_vc article p {
    margin-top: 15px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.7;
    background-color: #f5f5ff;
    border-radius: 6px;
    border-left: 4px solid #17a2b8;
}
#bo_vc header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9rem; color: #555; margin-bottom: 1rem; }
#bo_vc header h1 { display: none; }
#bo_vc header .sv_member { font-weight: 600; color: #333; }
#bo_vc header .bo_vc_hdinfo { font-size: 0.85rem; color: #888; }
#bo_vc p { margin: 0 0 1rem; line-height: 1.7; color: #444; }
#bo_vc footer { margin-top: 1rem; }
#bo_vc .bo_vc_act { margin:0; padding:0; list-style:none; display:flex; gap: 1rem; }
#bo_vc .bo_vc_act a { font-size: 0.85rem; color: #666; text-decoration: none; }
#bo_vc .bo_vc_act a:hover { text-decoration: underline; }

/* 댓글 쓰기 */
#bo_vc_w { margin-top: 2rem; padding: 1.5rem; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; }
#bo_vc_w h2 { display: none; }
#bo_vc_w textarea { width: 100%; min-height: 100px; }
#bo_vc_w .tbl_frm01 th { background: transparent; padding-left: 0; }
#bo_vc_w .tbl_frm01 td { padding-right: 0; }
#bo_vc_w .btn_confirm { text-align: right; margin-top: 1rem; }


/* ==========================================================================
   [F] 반응형 (모바일 화면)
   ========================================================================== */

@media (max-width: 768px) {
    body { padding: 0 !important; }
    #bo_list, #bo_v, #bo_w {
        width: 100%;
        margin: 0;
        padding: 1rem;
        border-radius: 0;
        box-shadow: none;
    }
    #container_title { font-size: 1.5rem; padding: 1.2rem 1rem; margin: 0 -1rem 1.5rem -1rem; }

    /* 목록 페이지 */
    .tbl_head01 thead th:nth-child(5), .tbl_head01 tbody td:nth-child(5), /* 날짜 */
    .tbl_head01 thead th:nth-child(6), .tbl_head01 tbody td:nth-child(6), /* 조회 */
    .tbl_head01 thead th:nth-child(7), .tbl_head01 tbody td:nth-child(7), /* 추천 */
    .tbl_head01 thead th:nth-child(8) { /* 비추천 */
        display: none;
    }
    .tbl_head01 thead th:nth-child(3) { width: 60%; }
    .bo_fx { /*flex-direction: column;*/ 
	gap: 1rem; }

    /* 내용 보기 페이지 */
    #bo_v_title { font-size: 1.5rem; }
    #bo_v_info { flex-direction: column; gap: 0.5rem; align-items: flex-start; padding: 0.75rem; }
    #bo_v_file li, #bo_v_link li { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    /* 글쓰기 페이지 */
    #bo_w .tbl_frm01 th { width: 100%; display: block; padding-bottom: 0.5rem; }
    #bo_w .tbl_frm01 td { display: block; padding-top: 0; }
}
.btn_submit {
    padding: 10px 10px !important;
    height: 40px !important;
}