@charset "utf-8";

/* =========================================================
   BOARD & GALLERY DARK THEME (Responsive)
   ========================================================= */

/* 1. 기본 폰트 및 컬러 */
#bo_gall, #bo_v, #bo_w, #bo_vc {
    font-family: 'Pretendard', sans-serif;
    color: #e0e0e0;
    font-size: 0.95rem;
}

/* 2. 갤러리 카드 (Grid System 사용) */
.gall_card {
    background-color: #1e1e1e;
    border: 1px solid #333;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    height: 100%;
    overflow: hidden;
}
.gall_card:hover {
    transform: translateY(-5px);
    border-color: #d4af37; /* 골드 포인트 */
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}
.gall_card img {
    width: 100%;
    height: 180px; /* 썸네일 높이 고정 (모바일에서도 적절) */
    object-fit: cover;
    border-bottom: 1px solid #333;
}
.gall_text_href a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}
.gall_text_href a:hover { color: #d4af37; }

/* 3. 게시글 보기 (View) */
#bo_v { 
    border: 1px solid #333; 
    background: #1e1e1e; 
    padding: 30px; 
    border-radius: 8px; 
}
#bo_v_title .bo_v_tit { 
    font-size: 1.6em; 
    color: #fff; 
    font-weight: bold; 
    line-height: 1.3;
}
#bo_v_info { 
    border-top: 1px solid #333; 
    border-bottom: 1px solid #333; 
    padding: 15px 0; 
    color: #888; 
    margin: 20px 0; 
}
#bo_v_con { 
    color: #ddd; 
    line-height: 1.8; 
    min-height: 200px; 
    word-break: break-all;
}

/* 4. 댓글 (Comment) */
#bo_vc article { 
    border-bottom: 1px solid #333; 
    padding: 15px 0; 
}
#bo_vc header { color: #d4af37; margin-bottom: 5px; }
#bo_vc .cmt_contents { color: #ccc; line-height: 1.6; }
#bo_vc_w textarea { 
    background: #222 !important; 
    color: #fff !important; 
    border: 1px solid #444; 
    padding: 10px;
}

/* 5. 버튼 및 입력폼 */
.btn_b01, .btn_b02, .btn_submit, .btn_cancel {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
    border: 0;
    text-align: center;
}
.btn_b01, .btn_cancel { background: #333; color: #ccc; border: 1px solid #555; }
.btn_b02, .btn_submit { background: #d4af37; color: #000; font-weight: bold; }

.frm_input, .form-control, select {
    background-color: #2c2c2c !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    height: 40px;
    padding: 0 10px;
    border-radius: 4px;
    width: 100%;
}

/* =========================================================
   [Mobile Specific] 모바일 최적화 (768px 이하)
   ========================================================= */
@media (max-width: 768px) {
    /* 1. 여백 및 패딩 축소 */
    #bo_gall, #bo_v { width: 100% !important; padding: 10px !important; margin: 0; border: 0; }
    
    /* 2. 갤러리 이미지 높이 조정 */
    .gall_card img { height: 150px; }
    
    /* 3. 제목 및 폰트 크기 */
    #bo_v_title .bo_v_tit { font-size: 1.3em; }
    
    /* 4. 정보 영역 세로 배치 */
    #bo_v_info .d-flex { flex-direction: column; align-items: flex-start !important; }
    #bo_v_info .text-muted { margin-top: 5px; font-size: 0.85em; }
    
    /* 5. 버튼 꽉 차게 */
    .btn_b02, .btn_submit, .btn_cancel { width: 100%; display: block; margin-top: 5px; }
    
    /* 6. 검색창 세로 배열 */
    .bo_sch_wrap .d-inline-flex { display: flex; width: 100%; }
    .bo_sch_wrap select { width: 30% !important; }
    .bo_sch_wrap input { width: 55% !important; }
    .bo_sch_wrap button { width: 15% !important; }
}