@charset "utf-8";
/* ==========================================================================
   장성청소년자람터 오늘 - 갤러리 게시판 스킨 (활동사진)
   기본 목록/읽기/쓰기 스타일은 jst_basic 스킨과 동일한 규칙을 사용합니다.
   ========================================================================== */

#bo_gall{width:100% !important;}

/* ---------- 상단 ---------------------------------------------------------- */
#bo_cate h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
#bo_cate ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 26px;padding:0;}
#bo_cate a{
    display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;
    border:1px solid var(--jst-line);background:#fff;font-size:15px;color:var(--jst-text);text-decoration:none;
}
#bo_cate a:hover{border-color:var(--jst-green-400);color:var(--jst-green-800);background:var(--jst-green-050);}
#bo_cate #bo_cate_on{background:var(--jst-green-700);border-color:var(--jst-green-700);color:#fff;font-weight:700;}

#bo_btn_top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;flex-wrap:wrap;}
#bo_list_total{font-size:14.5px;color:var(--jst-muted);}
#bo_list_total span{color:var(--jst-ink);font-weight:700;}

.btn_bo_user{display:flex;gap:8px;list-style:none;margin:0;padding:0;}
.btn_bo_user li{position:relative;margin:0;}
.btn_bo_user .btn,
.btn_bo_user button{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:38px;min-width:38px;padding:0 12px;border-radius:8px;
    border:1px solid var(--jst-line);background:#fff;color:var(--jst-text);
    font-size:14px;text-decoration:none;cursor:pointer;
}
.btn_bo_user .btn:hover,
.btn_bo_user button:hover{border-color:var(--jst-green-400);color:var(--jst-green-800);background:var(--jst-green-050);}
.btn_bo_user .more_opt{
    position:absolute;right:0;top:42px;z-index:20;min-width:150px;padding:6px;margin:0;display:none;
    background:#fff;border:1px solid var(--jst-line);border-radius:8px;box-shadow:var(--jst-shadow-lg);list-style:none;
}
.btn_bo_user .more_opt button{width:100%;justify-content:flex-start;border:0;height:36px;}

/* ---------- 갤러리 그리드 -------------------------------------------------- */
.gall_row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    list-style:none;margin:0;padding:0;
}
.gall_row::after{display:none;}
.gall_li{float:none !important;width:auto !important;margin:0 !important;padding:0 !important;display:flex;}
.gall_li.box_clear{clear:none;}

.gall_box{
    display:flex;flex-direction:column;width:100%;background:#fff;
    border:1px solid var(--jst-line);border-radius:var(--jst-radius-lg);overflow:hidden;
    transition:.2s ease;
}
.gall_li:hover .gall_box{border-color:var(--jst-green-400);box-shadow:var(--jst-shadow-lg);transform:translateY(-4px);}

.gall_chk{position:absolute;z-index:3;margin:10px;}
.gall_chk:empty{display:none;}

.gall_con{margin:0;padding:0;}
.gall_href,.gall_img{display:block;}
.gall_img{
    position:relative;width:100% !important;height:auto !important;
    padding-top:68%;overflow:hidden;background:var(--jst-green-050);line-height:0 !important;
}
.gall_img a{position:absolute;inset:0;display:block;}
.gall_img img{
    position:absolute;inset:0;width:100% !important;height:100% !important;
    object-fit:cover;max-width:none;transition:.3s ease;
}
.gall_li:hover .gall_img img{transform:scale(1.06);}
.gall_img .no_image,
.gall_img .gall_no_img{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--jst-green-300);font-size:14px;line-height:1.4;
}

.gall_text_href{padding:18px 20px 6px;}
.gall_text_href .bo_tit{display:block;font-size:16.5px;line-height:1.5;}
.gall_text_href .bo_tit a{
    color:var(--jst-ink);font-weight:700;text-decoration:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gall_li:hover .bo_tit a{color:var(--jst-green-800);}
.gall_text_href .bo_cnt{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--jst-muted);
}
.bo_cate_link{
    display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:4px;
    background:var(--jst-green-050);color:var(--jst-green-700) !important;
    font-size:12.5px;font-weight:700;text-decoration:none;
}
.new_icon,.hot_icon{
    display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;
    background:var(--jst-warm);color:#fff;font-size:11px;font-weight:800;vertical-align:2px;
}
.cnt_cmt{
    display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;
    background:var(--jst-green-100);color:var(--jst-green-800);font-size:12px;font-weight:700;
}

.gall_info{
    margin:auto 0 0;padding:10px 20px 18px;list-style:none;
    display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--jst-muted);
}
.gall_info li{margin:0;}
.gall_info .fa{margin-right:4px;color:var(--jst-green-400);}
.gall_info .sound_only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ---------- 페이지 / 검색 -------------------------------------------------- */
.pg_wrap{display:flex;justify-content:center;margin:36px 0 0;}
.pg{display:flex;gap:6px;align-items:center;}
.pg_page,.pg_current{
    display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;
    border:1px solid var(--jst-line);border-radius:8px;background:#fff;color:var(--jst-text);
    font-size:14.5px;text-decoration:none;
}
.pg_page:hover{border-color:var(--jst-green-400);color:var(--jst-green-800);background:var(--jst-green-050);}
.pg_current{background:var(--jst-green-700);border-color:var(--jst-green-700);color:#fff;font-weight:700;}

.bo_fx{display:flex;justify-content:flex-end;margin:20px 0 0;}

.bo_sch_wrap{display:none;position:fixed;inset:0;z-index:1100;background:rgba(23,32,26,.5);}
.bo_sch{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92%;max-width:440px;
    background:#fff;border-radius:var(--jst-radius-lg);padding:28px;box-shadow:var(--jst-shadow-lg);
}
.bo_sch h3{font-size:19px;margin:0 0 18px;}
.bo_sch select,.bo_sch input[type="text"]{
    width:100%;height:46px;padding:0 14px;margin-bottom:10px;border:1px solid var(--jst-line);
    border-radius:8px;font-size:15px;font-family:inherit;background:#fff;color:var(--jst-ink);
}
.bo_sch .sch_bar{display:flex;gap:8px;}
.bo_sch .sch_input{flex:1 1 auto;margin-bottom:0;}
.bo_sch .sch_btn{
    flex:0 0 auto;width:52px;height:46px;border:0;border-radius:8px;background:var(--jst-green-700);
    color:#fff;font-size:16px;cursor:pointer;
}
.bo_sch_cls{
    position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;background:transparent;
    font-size:20px;color:var(--jst-muted);cursor:pointer;
}
.bo_sch_bg{position:absolute;inset:0;}

.empty_list{padding:80px 0;text-align:center;color:var(--jst-muted);}

/* ---------- 읽기 / 쓰기 ---------------------------------------------------- */
#bo_v{width:100% !important;}
#bo_v_title .bo_v_tit{display:block;font-size:26px;font-weight:800;color:var(--jst-ink);letter-spacing:-.03em;line-height:1.4;}
#bo_v_info{
    display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
    padding:14px 0 16px;margin:0 0 26px;border-bottom:1px solid var(--jst-line);
    font-size:14px;color:var(--jst-muted);
}
#bo_v_info>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
#bo_v_info .profile_info{display:flex;align-items:center;gap:10px;}
#bo_v_info .pf_img{display:none;}
#bo_v_info .profile_info_ct{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
#bo_v_info .profile_info_ct br{display:none;}
#bo_v_info strong{font-weight:500;color:var(--jst-muted);}
#bo_v_info strong a{color:var(--jst-muted);text-decoration:none;}
#bo_v_info .fa{margin-right:4px;color:var(--jst-green-400);}
#bo_v_info .sound_only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
#bo_v_atc_title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
#bo_v_share{display:none;}
#bo_vc,#bo_vc_w,#bo_vc_empty,.bo_vc_hdinfo,.cmt_btn,#bo_vc_win{display:none !important;}
#bo_v_info .profile_info_ct>strong:first-of-type{display:none;} /* 댓글 수 숨김 */
#bo_v_con{font-size:16.5px;line-height:1.85;color:var(--jst-text);word-break:keep-all;}
#bo_v_con img{max-width:100%;height:auto;border-radius:var(--jst-radius);margin:6px 0;}
#bo_v_file{margin:0 0 24px;padding:0;list-style:none;}
#bo_v_file a{
    display:flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid var(--jst-line);
    border-radius:var(--jst-radius);background:#fff;color:var(--jst-ink);text-decoration:none;font-size:15px;
    margin-bottom:8px;
}
#bo_v_file a:hover{border-color:var(--jst-green-400);background:var(--jst-green-050);color:var(--jst-green-800);}
#bo_v_bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;}
#bo_v_nb,.bo_v_nb{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--jst-line);}
#bo_v_nb li,.bo_v_nb li{border-bottom:1px solid var(--jst-line-2);}
#bo_v_nb li,.bo_v_nb li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:13px 4px;}
#bo_v_nb a,.bo_v_nb a{flex:1 1 auto;min-width:0;color:var(--jst-text);text-decoration:none;font-size:15px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#bo_v_nb .nb_date,.bo_v_nb .nb_date{flex:0 0 auto;font-size:13.5px;color:var(--jst-muted);}

#bo_w{width:100% !important;}
#bo_w label{display:block;margin-bottom:6px;font-size:14.5px;font-weight:700;color:var(--jst-ink);}
#bo_w .frm_input,#bo_w select,#bo_w textarea{
    width:100%;padding:12px 14px;border:1px solid var(--jst-line);border-radius:8px;
    font-size:15px;font-family:inherit;color:var(--jst-ink);background:#fff;
}
#bo_w .btn_confirm{display:flex;gap:10px;justify-content:center;margin-top:24px;}
#bo_w .btn_submit{
    height:48px;padding:0 30px;border:0;border-radius:999px;background:var(--jst-green-700);
    color:#fff;font-size:15px;font-weight:700;cursor:pointer;
}

/* ---------- 반응형 -------------------------------------------------------- */
@media (max-width:1024px){
    .gall_row{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:600px){
    .gall_row{grid-template-columns:1fr;gap:16px;}
    #bo_v_title .bo_v_tit{font-size:21px;}
}