@charset "utf-8";

/* 천문암 테마 컬러 */
:root {
    --gold: #b28e5d;
    --dark: #1a1a1a;
    --border: #eeeeee;
    --bg-light: #f9f9f9;
}

/* 기본 레이아웃 */
.sub_wrap { padding: 60px 0; max-width: 1200px; margin: 0 auto; }
.sub_title { text-align: center; margin-bottom: 50px; }
.sub_title span { font-size: 32px; font-weight: 800; color: var(--dark); border-bottom: 3px solid var(--gold); padding-bottom: 10px; }

/* 게시판 상단 정보 및 버튼 */
#bo_btn_top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding: 0 10px; }
.color-gray { color: #888; font-size: 14px; }
.btn_bo_user { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }

/* [핵심] 갤러리 그리드 시스템 */
#gall_ul { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px 15px; /* 세로간격 20px, 가로간격 15px */
    padding: 0; 
    list-style: none; 
    margin: 0;
}

/* PC: 기본 4열 (1200px 기준) */
.gall_li { 
    flex: 0 1 calc(25% - 11.25px); 
    box-sizing: border-box;
}

.gall_box { 
    background: #fff; border-radius: 12px; overflow: hidden; 
    border: 1px solid var(--border); transition: all 0.3s ease;
    position: relative; height: 100%;
}
.gall_box:hover { transform: translateY(-7px); border-color: var(--gold); box-shadow: 0 12px 25px rgba(178, 142, 93, 0.15); }

/* 이미지 영역 */
.gall_img { width: 100%; height: 220px; overflow: hidden; background: var(--bg-light); }
.gall_img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gall_box:hover .gall_img img { transform: scale(1.08); }
.no_image { display: flex; align-items: center; justify-content: center; height: 100%; color: #ccc; font-weight: bold; font-size: 13px; }

/* 텍스트 내용 */
.gall_text_wrap { padding: 18px 12px; text-align: center; }
.bo_cate_link { font-size: 11px; color: var(--gold); font-weight: 700; display: block; margin-bottom: 6px; text-transform: uppercase; }
.bo_tit { font-size: 16px; color: #222; font-weight: 600; display: block; margin-bottom: 10px; line-height: 1.4; word-break: break-all; }
.gall_info_bottom { font-size: 11px; color: #999; display: flex; justify-content: center; gap: 10px; border-top: 1px solid #f7f7f7; padding-top: 12px; }

/* 버튼 스타일 */
.btn_b02 { background: var(--gold); color: #fff !important; padding: 10px 25px; border-radius: 50px; font-weight: 600; text-decoration: none; display: inline-block; font-size: 14px; }
.btn_admin { background: #fff; border: 1px solid #ddd; padding: 7px 12px; border-radius: 5px; color: #666; cursor: pointer; font-size: 13px; }

/* 페이징 */
.pg_wrap { text-align: center; margin-top: 50px; }
.pg_page, .pg_current { display: inline-block; width: 32px; height: 32px; line-height: 32px; text-decoration: none; border-radius: 50%; margin: 0 2px; font-size: 13px; }
.pg_page { color: #777; background: #eee; }
.pg_current { background: var(--gold); color: #fff; font-weight: bold; }

/* 검색창 */
#bo_sch { text-align: center; margin: 40px auto 0; border: 1px solid #eee; display: table; padding: 4px 15px; border-radius: 50px; background: #fff; }
#bo_sch select { border: none; background: transparent; padding: 8px; color: #666; font-size: 13px; outline: none; }
#bo_sch .sch_input { border: none; background: transparent; padding: 8px; width: 130px; outline: none; font-size: 13px; }
#bo_sch .sch_btn { border: none; background: transparent; cursor: pointer; color: var(--gold); font-size: 16px; padding: 0 5px; }

/* [반응형] 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
    .sub_wrap { padding: 40px 15px; }
    .sub_title span { font-size: 26px; }
    
    /* 모바일 2열 배치 */
    .gall_li { 
        flex: 0 1 calc(50% - 7.5px); 
    }
    
    .gall_img { height: 160px; } /* 모바일에서 사진 높이 조정 */
    .bo_tit { font-size: 14px; margin-bottom: 8px; height: 40px; overflow: hidden; } /* 제목 높이 고정으로 균형 유지 */
    .gall_text_wrap { padding: 12px 8px; }
}

/* [반응형] 아주 작은 화면 (350px 이하) */
@media (max-width: 350px) {
    .gall_img { height: 130px; }
    .bo_tit { font-size: 13px; }
}

/* 상세 페이지 커스텀 스타일 */
#bo_v { background: #fff; border-radius: 15px; border: 1px solid #eee; overflow: hidden; padding: 0 !important; }
#bo_v_title { padding: 40px 20px 20px; text-align: center; border-bottom: 1px solid #f7f7f7; margin: 0; }
.bo_v_tit { font-size: 26px; font-weight: 700; color: #222; }

#bo_v_info { padding: 15px; background: #fafafa; border-bottom: 1px solid #eee; text-align: center; font-size: 13px; }
.v_divider { margin: 0 10px; color: #ddd; }
.v_cate { background: var(--gold); color: #fff; padding: 2px 8px; border-radius: 3px; margin-left: 10px; }

#bo_v_atc { padding: 40px 30px; line-height: 1.8; font-size: 16px; }
#bo_v_img { text-align: center; margin-bottom: 30px; }
#bo_v_img img { max-width: 100%; height: auto; border-radius: 10px; margin-bottom: 15px; }

.v_data_box { padding: 20px 30px; background: #f9f9f9; border-top: 1px solid #eee; font-size: 14px; }
.v_file, .v_link { margin-bottom: 5px; }
.v_file a, .v_link a { color: #555; text-decoration: none; }
.v_file a:hover { color: var(--gold); }

.v_btn_wrap { padding: 30px; display: flex; justify-content: space-between; border-top: 1px solid #eee; }
.v_btn_left, .v_btn_right { display: flex; gap: 10px; list-style: none; }

.v_btn_gold { background: var(--gold); color: #fff !important; padding: 8px 20px; border-radius: 5px; font-weight: 600; }
.v_btn_gray { background: #888; color: #fff !important; padding: 8px 20px; border-radius: 5px; }
.v_btn_list { background: var(--dark); color: #fff !important; padding: 8px 20px; border-radius: 5px; }

.v_nb { list-style: none; padding: 0; margin: 0; border-top: 1px solid #eee; }
.v_nb li { padding: 15px 30px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; }
.nb_label { width: 80px; font-weight: bold; color: var(--gold); }
.v_nb a { color: #444; text-decoration: none; }
.v_nb a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .bo_v_tit { font-size: 20px; }
    .v_btn_wrap { flex-direction: column; gap: 15px; align-items: center; }
    #bo_v_atc { padding: 20px 15px; }
}

/* 글쓰기 페이지 커스텀 스타일 */
.write_form_wrap { background: #fff; border: 1px solid #eee; border-radius: 15px; padding: 30px; margin-bottom: 30px; }
.write_item { margin-bottom: 20px; }
.write_div_flex { display: flex; gap: 15px; margin-bottom: 20px; }
.flex-1 { flex: 1; }

.v_input { width: 100%; height: 45px; border: 1px solid #ddd; border-radius: 5px; padding: 0 15px; font-size: 14px; outline: none; transition: 0.3s; }
.v_input:focus { border-color: var(--gold); box-shadow: 0 0 5px rgba(178,142,93,0.2); }
.v_subject { height: 55px; font-size: 18px; font-weight: 600; border-width: 0 0 2px 0; border-radius: 0; padding: 0; }

.v_option_area { display: flex; align-items: center; gap: 15px; font-size: 13px; color: #666; }
.chk_item { display: flex; align-items: center; gap: 5px; }

.v_subject_wrap { position: relative; margin-bottom: 10px; }
.v_btn_save { position: absolute; right: 0; top: 12px; background: #f0f0f0; border: none; padding: 5px 12px; border-radius: 3px; font-size: 12px; cursor: pointer; }

.v_icon_input { position: relative; }
.v_icon_input i { position: absolute; left: 15px; top: 15px; color: var(--gold); }
.v_icon_input .v_input { padding-left: 40px; }

.v_file_area { background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px dashed #ddd; }
.v_file_input { font-size: 13px; color: #777; }
.v_file_del { margin-top: 8px; font-size: 12px; color: #d9534f; }

.v_btn_confirm { text-align: center; display: flex; justify-content: center; gap: 10px; margin-bottom: 50px; }
.v_btn_cancel { background: #888; color: #fff !important; padding: 12px 40px; border-radius: 50px; font-weight: 600; text-decoration: none; }
.v_btn_submit { background: var(--gold); color: #fff !important; padding: 12px 60px; border-radius: 50px; border: none; font-weight: 600; font-size: 16px; cursor: pointer; transition: 0.3s; }
.v_btn_submit:hover { background: var(--dark); }

/* 모바일 대응 */
@media (max-width: 768px) {
    .write_form_wrap { padding: 15px; }
    .write_div_flex { flex-direction: column; gap: 10px; }
    .v_btn_save { position: static; width: 100%; margin-top: 10px; }
    .v_btn_submit { flex: 1; padding: 12px 20px; }
    .v_btn_cancel { flex: 1; padding: 12px 20px; text-align: center; }
}