@charset "utf-8";

/* 1. 카테고리 분류탭 - 플로팅 카드 스타일 */
#bo_cate { margin: 30px 0; padding: 0 5px; }
#bo_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_cate ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
#bo_cate li { display: inline-block; }
#bo_cate a { 
    display: block; 
    line-height: 1; 
    padding: 13px 24px; 
    border-radius: 16px; 
    border: 1px solid #e2e8f0; 
    background: #fff; 
    color: #4a5568; 
    font-size: 15px; 
    font-weight: 600; 
    text-decoration: none; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); 
}
#bo_cate a:hover { 
    color: #3a8afd; 
    border-color: #3a8afd; 
    transform: translateY(-3px); 
    box-shadow: 0 8px 15px rgba(58, 138, 253, 0.15); 
}
#bo_cate #bo_cate_on { 
    background: linear-gradient(135deg, #3a8afd 0%, #2172f8 100%); 
    color: #fff; 
    font-weight: 700; 
    border: none; 
    box-shadow: 0 4px 12px rgba(58, 138, 253, 0.4); 
}

/* 2. 갤러리 리스트 레이아웃 */
#bo_gall #gall_ul { column-count: 3; column-gap: 20px; margin-bottom: 20px; }
@media (max-width: 991px) { #bo_gall #gall_ul { column-count: 2; } }
@media (max-width: 640px) { #bo_gall #gall_ul { column-count: 1; } }

.gall_li { break-inside: avoid; margin-bottom: 25px; border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; transition: all 0.2s; }
.gall_li:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #ddd; }

.gall_img { border-bottom: 1px solid #f8f9fa; text-align: center; overflow: hidden; background: #fcfcfc; }
.gall_img img { width: 100%; height: auto; display: block; transition: transform 0.4s; }
.gall_li:hover .gall_img img { transform: scale(1.05); }

.gall_text_href { padding: 12px 15px; }
.bo_tit { 
    display: block; 
    line-height: 1.5; 
    font-weight: 700; 
    color: #222; 
    font-size: 0.95em; 
    margin-top: 6px; 
    text-decoration: none; 
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bo_tit:hover { color: #3a8afd; }
.bo_cate_link { display: inline-block; background: #f0f4f9; color: #3a8afd; padding: 3px 10px; border-radius: 6px; font-size: 0.85em; font-weight: 600; text-decoration: none; }

/* 3. 게시글 보기(View) - 분류 뱃지 */
.bo_v_cate_box {
    display: inline-block;
    line-height: 1;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #3a8afd;
    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
    margin-right: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* 4. 댓글 영역 디자인 */
.cmt_btn { 
    width: 100%; padding: 16px; background: #fff; border: 1px solid #eef2f6; border-radius: 12px; 
    text-align: left; font-size: 16px; color: #444; margin: 30px 0 10px; cursor: pointer; 
    display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
}
.cmt_btn:hover { background: #fcfdfe; border-color: #3a8afd; }
.cmt_btn b { color: #3a8afd; margin-right: 5px; }

.cmt_card { position: relative; padding: 20px; background: #fff; border: 1px solid #f1f5f9; border-radius: 12px; margin-bottom: 15px; display: flex; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.cmt_card[style*="margin-left"] { border-left: 3px solid #3a8afd; background: #fbfcfe; } 

.pf_img img { width: 44px; height: 44px; border-radius: 50%; margin-right: 15px; border: 1px solid #eee; }
.cm_wrap { flex: 1; }
.cmt_user strong { font-size: 15px; color: #222; margin-right: 8px; }
.bo_vc_hdinfo { font-size: 12px; color: #999; }
.cmt_contents { margin-top: 10px; font-size: 15px; color: #444; line-height: 1.6; }

/* 댓글 수정/삭제 옵션 */
.bo_vl_opt { position: absolute; right: 15px; top: 15px; }
.btn_cm_opt { background: none; border: none; font-size: 18px; color: #ccc; cursor: pointer; padding: 5px; }
.bo_vc_act { display: none; position: absolute; right: 0; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 100; min-width: 70px; }
.bo_vc_act li a { display: block; padding: 8px 15px; font-size: 13px; color: #666; text-decoration: none; text-align: center; }
.bo_vc_act li a:hover { background: #f8fafc; color: #3a8afd; }

/* 댓글 입력창 */
.bo_vc_w { margin-top: 20px; padding: 25px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
.wr_content_wrap { position: relative; margin-bottom: 10px; }
#wr_content { 
    width: 100%; height: 100px; padding: 15px; border: 1px solid #e2e8f0; border-radius: 10px; 
    font-size: 15px; resize: none; transition: 0.3s; background: #fcfdfe; 
}
#wr_content:focus { border-color: #3a8afd; box-shadow: 0 0 0 4px rgba(58, 138, 253, 0.1); outline: none; background: #fff; }
#char_cnt { position: absolute; right: 15px; bottom: 10px; font-size: 12px; color: #ccc; }

.bo_vc_w_wr { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.btn_submit { 
    background: linear-gradient(135deg, #3a8afd 0%, #2172f8 100%); 
    color: #fff; border: none; padding: 12px 30px; border-radius: 10px; 
    font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(58, 138, 253, 0.3); 
}
.btn_submit:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(58, 138, 253, 0.4); }

/* 기타 공통 요소 */
.cnt_cmt { margin-left: 4px; color: #ff4d4d; font-size: 0.85em; font-weight: bold; }
.new_icon { display: inline-block; background: #23db79; color: #fff; font-size: 10px; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 3px; margin-left: 4px; vertical-align: middle; }