@charset "utf-8";
/* HN2026_GALLERY 20261014 : 순창문화원 공용 갤러리 스킨 (그누보드 5.4.1.9 basic 기반, 디자인만 교체)
   글자 크기는 em — .hn-sub 의 글자크기(4단계 조절기)를 따라감 */
#bo_gall,#bo_v,#bo_w{
  --b-c:var(--hn-c,#1f6db6);--b-ink:var(--hn-ink,#1a1f26);--b-tx:var(--hn-tx,#3a4350);--b-mu:var(--hn-mu,#6b7480);
  --b-ln:var(--hn-ln,#e3e8ee);--b-bg:var(--hn-bg,#fff);--b-bg2:var(--hn-bg2,#f5f7fa);--b-on:var(--hn-on,#eef5fc);
  font-size:1em;color:var(--b-tx);word-break:keep-all}
#bo_gall *,#bo_v *,#bo_w *{box-sizing:border-box}
#bo_gall a,#bo_v a,#bo_w a{color:inherit}

/* 공통 버튼 */
#bo_gall .btn_bo_user,#bo_v .btn_bo_user{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
#bo_gall .btn_bo_user>li,#bo_v .btn_bo_user>li{position:relative;margin:0;padding:0;list-style:none;float:none}
#bo_gall .btn,#bo_v .btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--b-ln);border-radius:8px;background:var(--b-bg);color:var(--b-tx);font-size:.9375em;line-height:1;text-decoration:none;cursor:pointer}
#bo_gall .btn:hover,#bo_gall .btn:focus-visible,#bo_v .btn:hover,#bo_v .btn:focus-visible{border-color:var(--b-c);color:var(--b-c);outline:none}
#bo_gall .btn_bo_sch{display:none !important}
#bo_gall .more_opt,#bo_v .more_opt{display:none;position:absolute;top:46px;right:0;z-index:20;min-width:140px;margin:0;padding:6px 0;list-style:none;
  border:1px solid var(--b-ln);border-radius:10px;background:var(--b-bg);box-shadow:0 10px 30px rgba(15,30,50,.12)}
#bo_gall .more_opt li,#bo_v .more_opt li{list-style:none;margin:0}
#bo_gall .more_opt a,#bo_gall .more_opt button,#bo_v .more_opt a,#bo_v .more_opt button{display:block;width:100%;padding:10px 16px;border:0;background:none;
  color:var(--b-tx);font-size:.9375em;text-align:left;text-decoration:none;cursor:pointer;font-family:inherit}
#bo_gall .more_opt a:hover,#bo_gall .more_opt button:hover,#bo_v .more_opt a:hover,#bo_v .more_opt button:hover{background:var(--b-bg2);color:var(--b-c)}
#bo_gall .more_opt i,#bo_v .more_opt i{width:18px;margin-right:6px;text-align:center}

/* 체크박스 (관리자) */
#bo_gall .selec_chk,#bo_v .selec_chk,#bo_w .selec_chk{position:absolute;width:1px;height:1px;opacity:0}
#bo_gall .chk_box label,#bo_w .chk_box label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
#bo_gall .chk_box label span,#bo_w .chk_box label span{display:inline-block;width:18px;height:18px;border:1px solid #b9c2cd;border-radius:4px;background:var(--b-bg)}
#bo_gall .chk_box input:checked+label span,#bo_w .chk_box input:checked+label span{border-color:var(--b-c);background:var(--b-c);box-shadow:inset 0 0 0 3px var(--b-bg)}
#bo_gall .chk_box input:focus-visible+label span,#bo_w .chk_box input:focus-visible+label span{outline:2px solid var(--b-c);outline-offset:2px}

/* ── 목록 ── */
#bo_gall #bo_cate{display:none}
#bo_gall #bo_btn_top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
#bo_gall #bo_gall_total{font-size:.9375em;color:var(--b-mu)}
#bo_gall #bo_gall_total span:first-child{color:var(--b-ink);font-weight:700}
#bo_gall .tbl_head01{margin:0}
#bo_gall .tbl_head01 table{width:100%;border-collapse:collapse;border-top:2px solid var(--b-ink);table-layout:auto}
#bo_gall .tbl_head01 caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#bo_gall .tbl_head01 thead th{padding:14px 10px;border:0;border-bottom:1px solid var(--b-ln);background:var(--b-bg2);color:var(--b-ink);font-size:.9375em;font-weight:700;text-align:center}
#bo_gall .tbl_head01 thead th a{color:inherit;text-decoration:none}
#bo_gall .tbl_head01 td{padding:16px 10px;border:0;border-bottom:1px solid var(--b-ln);background:var(--b-bg);color:var(--b-mu);font-size:.9375em;text-align:center;vertical-align:middle;line-height:1.5}
#bo_gall .tbl_head01 tbody tr:hover td{background:var(--b-bg2)}
#bo_gall .td_chk{width:46px}
#bo_gall .td_num2{width:80px}
#bo_gall .td_name{width:120px}
#bo_gall .td_num{width:80px}
#bo_gall .td_datetime{width:120px}
#bo_gall .td_subject{text-align:left !important}
#bo_gall .bo_tit{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#bo_gall .bo_tit a{color:var(--b-ink);font-size:1.0625em;font-weight:600;text-decoration:none}
#bo_gall .bo_tit a:hover,#bo_gall .bo_tit a:focus-visible{color:var(--b-c);text-decoration:underline;text-underline-offset:3px}
#bo_gall .bo_tit img{vertical-align:middle}
#bo_gall .bo_tit i{color:var(--b-mu)}
#bo_gall .cnt_cmt{display:inline-block;min-width:22px;padding:1px 6px;border-radius:10px;background:var(--b-on);color:var(--b-c);font-size:.75em;font-weight:700;text-align:center}
#bo_gall .bo_cate_link{display:inline-block;padding:2px 8px;border:1px solid var(--b-ln);border-radius:4px;font-size:.8125em;color:var(--b-mu);text-decoration:none}
#bo_gall tr.bo_notice td{background:var(--b-on)}
#bo_gall .notice_icon{display:inline-block;padding:3px 9px;border-radius:4px;background:var(--b-c);color:#fff;font-size:.8125em;font-weight:700}
#bo_gall .empty_table{padding:70px 0 !important;color:var(--b-mu)}
#bo_gall .bo_fx{display:flex;justify-content:flex-end;margin:16px 0 0}
#bo_gall .bo_fx:empty{display:none}

/* 검색: 항상 보이게 */
#bo_gall .bo_sch_wrap,.hn-sub .bo_sch_wrap{display:block !important;position:static !important;width:auto;height:auto;margin:28px 0 0;background:none;z-index:auto}
.hn-sub .bo_sch_bg,.hn-sub .bo_sch_cls,.hn-sub .bo_sch h3{display:none !important}
.hn-sub .bo_sch{position:static !important;width:auto !important;max-width:none;margin:0;padding:20px;border:1px solid var(--hn-ln,#e3e8ee);border-radius:12px;background:var(--hn-bg2,#f5f7fa);transform:none !important;box-shadow:none}
.hn-sub .bo_sch form{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.hn-sub .bo_sch select{height:46px;padding:0 12px;border:1px solid var(--hn-ln,#e3e8ee);border-radius:8px;background:var(--hn-bg,#fff);color:var(--hn-tx,#3a4350);font-size:1em}
.hn-sub .bo_sch .sch_bar{display:flex;flex:0 1 460px;height:46px;margin:0;border:1px solid var(--hn-ln,#e3e8ee);border-radius:8px;background:var(--hn-bg,#fff);overflow:hidden}
.hn-sub .bo_sch .sch_input{flex:1;min-width:0;height:100%;padding:0 14px;border:0;background:none;color:var(--hn-ink,#1a1f26);font-size:1em}
.hn-sub .bo_sch .sch_btn{width:auto;height:100%;padding:0 18px;border:0;background:var(--hn-c,#1f6db6);color:#fff;font-size:1em;cursor:pointer}
.hn-sub .bo_sch .sch_bar:focus-within{border-color:var(--hn-c,#1f6db6);box-shadow:0 0 0 3px rgba(31,109,182,.15)}

/* 페이지 번호 */
.hn-sub .pg_wrap{display:block;float:none;margin:30px 0 0;text-align:center;clear:both}
.hn-sub .pg{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px}
.hn-sub .pg_page,.hn-sub .pg_current{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;
  border:1px solid var(--hn-ln,#e3e8ee);border-radius:8px;background:var(--hn-bg,#fff);color:var(--hn-tx,#3a4350);font-size:.9375em;text-decoration:none}
.hn-sub .pg_page:hover{border-color:var(--hn-c,#1f6db6);color:var(--hn-c,#1f6db6)}
.hn-sub .pg_current{border-color:var(--hn-c,#1f6db6);background:var(--hn-c,#1f6db6);color:#fff;font-weight:700}

/* ── 보기 ── */
#bo_v{margin:0}
#bo_v #bo_v_title{margin:0 0 14px}
#bo_v .bo_v_cate{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:4px;background:var(--b-on);color:var(--b-c);font-size:.8125em;font-weight:700}
#bo_v .bo_v_tit{display:block;margin:0;color:var(--b-ink);font-size:1.625em;font-weight:800;line-height:1.4;letter-spacing:-.02em}
#bo_v #bo_v_info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;padding:14px 0;border-top:2px solid var(--b-ink);border-bottom:1px solid var(--b-ln);color:var(--b-mu);font-size:.875em}
#bo_v #bo_v_info h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#bo_v .profile_info{display:flex;align-items:center;gap:10px;flex:1;float:none}
#bo_v .pf_img{display:none}
#bo_v .profile_info_ct{display:flex;flex-wrap:wrap;gap:4px 14px;float:none}
#bo_v .profile_info_ct strong{font-weight:400}
#bo_v #bo_v_top{display:flex;justify-content:flex-end;margin:12px 0 0;float:none}
#bo_v #bo_v_file,#bo_v #bo_v_link{margin:20px 0 0;padding:16px 20px;border:1px solid var(--b-ln);border-radius:10px;background:var(--b-bg2)}
#bo_v #bo_v_file h2,#bo_v #bo_v_link h2{margin:0 0 8px;font-size:.875em;font-weight:700;color:var(--b-mu)}
#bo_v #bo_v_file ul,#bo_v #bo_v_link ul{margin:0;padding:0;list-style:none}
#bo_v #bo_v_file li,#bo_v #bo_v_link li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px dashed var(--b-ln);float:none;width:auto}
#bo_v #bo_v_file li:first-child,#bo_v #bo_v_link li:first-child{border-top:0}
#bo_v #bo_v_file li a,#bo_v #bo_v_link li a{color:var(--b-c);font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
#bo_v #bo_v_file li i,#bo_v #bo_v_link li i{color:var(--b-mu)}
#bo_v .bo_v_file_cnt,#bo_v .bo_v_link_cnt,#bo_v .if_date{font-size:.8125em;color:var(--b-mu)}
#bo_v #bo_v_atc{margin:0;padding:34px 0 40px;min-height:160px}
#bo_v #bo_v_atc_title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#bo_v #bo_v_img img{display:block;max-width:100%;height:auto;margin:0 auto 20px}
#bo_v #bo_v_con{color:var(--b-tx);font-size:1.0625em;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
#bo_v #bo_v_con img{max-width:100% !important;height:auto !important}
#bo_v #bo_v_con table{max-width:100%}
#bo_v #bo_v_act{margin:20px 0 0;text-align:center}
#bo_v #bo_v_share{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:14px 0 0;border-top:1px solid var(--b-ln)}
#bo_v .bo_v_nb{margin:0;padding:0;list-style:none;border-top:2px solid var(--b-ink);border-bottom:1px solid var(--b-ln)}
#bo_v .bo_v_nb li{display:flex;align-items:center;gap:14px;padding:14px 10px;border-top:1px solid var(--b-ln);list-style:none;float:none}
#bo_v .bo_v_nb li:first-child{border-top:0}
#bo_v .bo_v_nb .nb_tit{flex:none;width:80px;color:var(--b-mu);font-size:.875em;font-weight:700}
#bo_v .bo_v_nb li a{flex:1;min-width:0;color:var(--b-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bo_v .bo_v_nb li a:hover{color:var(--b-c);text-decoration:underline}
#bo_v .bo_v_nb .nb_date{flex:none;color:var(--b-mu);font-size:.875em}

/* 댓글 */
#bo_vc{margin:36px 0 0}
#bo_vc h2{margin:0 0 12px;font-size:1.0625em;font-weight:700;color:var(--b-ink)}
#bo_vc article{padding:16px 0;border-top:1px solid var(--b-ln)}
#bo_vc .pf_img{display:none}
#bo_vc .cm_wrap{margin:0}
#bo_vc .bo_vc_hdinfo{color:var(--b-mu);font-size:.875em}
#bo_vc .cmt_contents{margin:8px 0 0;color:var(--b-tx);line-height:1.7}
#bo_vc #bo_vc_empty{padding:30px 0;color:var(--b-mu);text-align:center}
.bo_vc_w{margin:20px 0 0;padding:20px;border:1px solid var(--hn-ln,#e3e8ee);border-radius:12px;background:var(--hn-bg2,#f5f7fa)}
.bo_vc_w textarea{width:100%;min-height:110px;padding:12px 14px;border:1px solid var(--hn-ln,#e3e8ee);border-radius:8px;background:var(--hn-bg,#fff);color:var(--hn-ink,#1a1f26);font-size:1em;font-family:inherit}
.bo_vc_w .frm_input{height:42px;padding:0 12px;border:1px solid var(--hn-ln,#e3e8ee);border-radius:8px;font-size:.9375em}
.bo_vc_w .btn_confirm{display:flex;justify-content:flex-end;gap:8px;margin:10px 0 0}
.bo_vc_w .btn_submit{height:44px;padding:0 22px;border:0;border-radius:8px;background:var(--hn-c,#1f6db6);color:#fff;font-size:.9375em;font-weight:700;cursor:pointer}

/* ── 쓰기/편집 ── */
#bo_w{margin:0}
#bo_w .write_div{position:relative;margin:0 0 14px}
#bo_w .bo_w_info{display:flex;flex-wrap:wrap;gap:8px}
#bo_w .bo_w_info .frm_input{flex:1 1 220px}
#bo_w .frm_input{height:46px;padding:0 14px;border:1px solid var(--b-ln);border-radius:8px;background:var(--b-bg);color:var(--b-ink);font-size:1em;font-family:inherit}
#bo_w .frm_input:focus,#bo_w select:focus,#bo_w textarea:focus{border-color:var(--b-c);outline:none;box-shadow:0 0 0 3px rgba(31,109,182,.15)}
#bo_w .full_input{width:100%}
#bo_w .half_input{width:calc(50% - 4px)}
#bo_w select{height:46px;padding:0 12px;border:1px solid var(--b-ln);border-radius:8px;background:var(--b-bg);color:var(--b-ink);font-size:1em}
#bo_w .bo_v_option{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
#bo_w .bo_v_option li{list-style:none;margin:0}
#bo_w .bo_w_tit .frm_input{padding-right:110px;font-size:1.0625em;font-weight:600}
#bo_w .btn_frmline{position:absolute;top:7px;right:7px;height:32px;padding:0 12px;border:1px solid var(--b-ln);border-radius:6px;background:var(--b-bg2);color:var(--b-tx);font-size:.8125em;cursor:pointer}
#bo_w #autosave_pop{z-index:30;border:1px solid var(--b-ln);border-radius:10px;background:var(--b-bg);box-shadow:0 10px 30px rgba(15,30,50,.12)}
#bo_w textarea{width:100%;min-height:320px;padding:14px;border:1px solid var(--b-ln);border-radius:8px;background:var(--b-bg);color:var(--b-ink);font-size:1em;font-family:inherit;line-height:1.7}
#bo_w .bo_w_link,#bo_w .bo_w_flie{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#bo_w .lb_icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--b-ln);border-radius:8px;background:var(--b-bg2);color:var(--b-mu)}
#bo_w .bo_w_link .frm_input{flex:1}
#bo_w .bo_w_flie .file_wr{display:flex;align-items:center;flex:1;gap:8px;margin:0}
#bo_w .frm_file{flex:1;min-width:0;font-size:.9375em}
#bo_w .file_del{font-size:.875em;color:var(--b-mu)}
#bo_w .btn_confirm{display:flex;justify-content:center;gap:10px;margin:30px 0 0}
#bo_w .btn_cancel,#bo_w .btn_submit{display:inline-flex;align-items:center;justify-content:center;min-width:140px;height:52px;padding:0 26px;border-radius:10px;font-size:1.0625em;font-weight:700;text-decoration:none;cursor:pointer}
#bo_w .btn_cancel{border:1px solid var(--b-ln);background:var(--b-bg);color:var(--b-tx)}
#bo_w .btn_submit{border:0;background:var(--b-c);color:#fff}
#bo_w .btn_submit:hover{filter:brightness(.92)}
#bo_w #char_count_desc{margin:0 0 6px;color:var(--b-mu);font-size:.875em}

@media (max-width:768px){
  #bo_gall .td_num2,#bo_gall .td_name,#bo_gall .td_num,#bo_gall thead th:nth-child(1):not(.all_chk){}
  #bo_gall .tbl_head01 thead{display:none}
  #bo_gall .tbl_head01 tr{display:flex;flex-wrap:wrap;align-items:center;padding:14px 4px;border-bottom:1px solid var(--b-ln)}
  #bo_gall .tbl_head01 td{display:none;padding:0;border:0;background:none !important}
  #bo_gall .tbl_head01 td.td_subject{display:block;flex:1 1 100%;margin:0 0 6px}
  #bo_gall .tbl_head01 td.td_datetime,#bo_gall .tbl_head01 td.td_name{display:inline-block;width:auto;margin-right:12px;font-size:.8125em}
  #bo_gall .tbl_head01 td.td_chk{display:inline-block;width:auto;margin-right:8px}
  #bo_gall .tbl_head01 td.empty_table{display:block;flex:1 1 100%}
  #bo_gall tr.bo_notice{background:var(--b-on)}
  #bo_v .bo_v_tit{font-size:1.375em}
  #bo_v .bo_v_nb .nb_date{display:none}
  #bo_w .half_input{width:100%}
  #bo_w .btn_cancel,#bo_w .btn_submit{flex:1;min-width:0}
}
@media print{
  #bo_gall .btn_bo_user,#bo_v .btn_bo_user,#bo_v .bo_v_nb,#bo_vc,.bo_vc_w,.hn-sub .bo_sch_wrap,.hn-sub .pg_wrap{display:none !important}
}

/* HN_NOHOT 20261014 : 목록 인기글 하트 아이콘 숨김 */
#bo_gall .bo_tit .fa-heart{display:none}

/* ── 갤러리 목록 ── */
#bo_gall #gall_ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
#bo_gall #gall_ul:after{display:none}
#bo_gall #gall_ul>li{width:auto !important;float:none !important;clear:none !important;margin:0 !important;padding:0 !important;list-style:none}
#bo_gall .gall_box{position:relative;height:100%;border:1px solid var(--b-ln);border-radius:12px;background:var(--b-bg);overflow:hidden;transition:box-shadow .2s,transform .2s}
#bo_gall .gall_box:hover,#bo_gall .gall_box:focus-within{box-shadow:0 12px 28px rgba(15,30,50,.1);transform:translateY(-2px)}
#bo_gall .gall_chk{position:absolute;top:10px;left:10px;z-index:3;padding:4px;border-radius:6px;background:rgba(255,255,255,.9)}
#bo_gall .gall_con{display:flex;flex-direction:column;height:100%}
#bo_gall .gall_img{position:relative;width:100%;aspect-ratio:10/7;height:auto;max-height:none;background:var(--b-bg2);overflow:hidden;border:0}
#bo_gall .gall_img a{display:block;width:100%;height:100%}
#bo_gall .gall_img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
#bo_gall .gall_box:hover .gall_img img{transform:scale(1.04)}
#bo_gall .no_image{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--b-mu);font-size:.875em}
#bo_gall .is_notice{position:absolute;top:10px;right:10px;z-index:2;padding:3px 9px;border-radius:4px;background:var(--b-c);color:#fff;font-size:.75em;font-weight:700}
#bo_gall .gall_text_href{padding:14px 16px 6px;margin:0}
#bo_gall .gall_text_href .bo_tit{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--b-ink);font-size:1em;font-weight:700;line-height:1.45;text-decoration:none}
#bo_gall .gall_text_href .bo_tit:hover{color:var(--b-c);text-decoration:underline;text-underline-offset:3px}
#bo_gall .gall_text_href .fa-heart{display:none}
#bo_gall .gall_text_href img{vertical-align:middle}
#bo_gall .gall_info{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:auto;padding:0 16px 16px;color:var(--b-mu);font-size:.8125em}
#bo_gall .gall_info .sv_member,#bo_gall .gall_info .sv_guest{color:var(--b-mu)}
#bo_gall .gall_option{display:none}
#bo_gall .empty_list{grid-column:1/-1;padding:70px 0;color:var(--b-mu);text-align:center}
@media (max-width:1024px){#bo_gall #gall_ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (max-width:768px){#bo_gall #gall_ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#bo_gall .gall_text_href{padding:10px 12px 4px}#bo_gall .gall_info{padding:0 12px 12px}}

/* HN_GALLFIX 20261014 : 옛 스킨(유튜브영상) CSS 덮기 — 사진 카드 꽉 채우기 · 검색 선택상자 폭 */
#bo_gall .gall_img a,#bo_gall .gall_img>*{height:100% !important}
#bo_gall .gall_img img{width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important}
.hn-sub .bo_sch select{flex:0 0 auto !important;width:auto !important;min-width:110px}