@charset "utf-8";

/* ==========================================================
   HUSS 게시판 공통 디자인 (전 스킨 공용)
   · 모든 게시판 스킨의 list / view / write 가 각자의 style.css "다음"에 이 파일을 불러온다.
   · 검색창 · 버튼 · 보기(제목/날짜/첨부/링크/이전·다음글) · 페이지네이션은
     스킨마다 따로 만들지 말고 여기 한 곳에서만 고친다.
   · 색상은 메인·서브와 같은 값을 쓴다.
     네이비 #204c75 / 포인트 #246ba5 / 틴트 #e5f3fb / 배경 #f5fafe / 라인 #dcebf5
   · 스킨의 최상위 요소에 .hb 클래스가 붙어 있어야 한다.
   ========================================================== */
.hb, .stf_bo, .fq_bo, .pg_bo{
	--hb-navy:#204c75; --hb-point:#246ba5; --hb-sky:#348bc1;
	--hb-tint:#e5f3fb; --hb-bg:#f5fafe; --hb-line:#dcebf5; --hb-line2:#c4dcee;
	--hb-text:#4b5468; --hb-mute:#7b8497; --hb-soft:#9aa3b5; --hb-red:#d64545;
	word-break:keep-all;
}
.hb *, .hb *:before, .hb *:after{box-sizing:border-box;}

/* ---------- lab_* 스킨 : 색·폭·글꼴을 사이트 기준으로 맞춤 ----------
   --ink(검정 계열)를 네이비로 바꿔 제목·상단 굵은 선이 다른 스킨과 같아진다.
   --pad 는 0 : 좌우 여백은 서브 레이아웃(.sCont)이 이미 잡고 있다. */
.hb.lab-wrap{
	--point:#246ba5; --point-dark:#204c75; --point-tint:#e5f3fb; --point-line:#c4dcee;
	--ink:#204c75; --ink-2:#4b5468; --ink-3:#7b8497; --line:#dcebf5; --line-2:#e8f2f9; --bg:#f5fafe;
	--pad:0px;
	max-width:none; color:#204c75;
}
.hb.lab-wrap, .hb.lab-wrap h1, .hb.lab-wrap h2, .hb.lab-wrap h3, .hb.lab-wrap h4, .hb.lab-wrap h5, .hb.lab-wrap h6,
.hb.lab-wrap input, .hb.lab-wrap select, .hb.lab-wrap textarea, .hb.lab-wrap button{font-family:'Paperlogy', 'Pretendard', 'Malgun Gothic', dotum, sans-serif;}
.hb.lab-wrap .lab-pills{margin:0 0 24px;}
.hb.lab-wrap .lab-gal-grid, .hb.lab-wrap .lab-vd-grid{margin:0;}
.hb.lab-wrap .lab-w-row > label, .hb.lab-wrap .lab-w-row > .lab-w-label{font-size:15px;}


/* ==========================================================
   1. 검색창 (모든 목록 공통)
   둥근 알약형 · 오른쪽에 구분선( | ) + 돋보기
   ========================================================== */
.hb-sch{display:flex; align-items:center; flex:0 1 auto; width:300px; max-width:100%; height:44px; margin:0; padding:0 4px 0 22px; border:1px solid var(--hb-navy); border-radius:100px; background:#fff; transition:border-color .3s ease, box-shadow .3s ease;}
.hb-sch:focus-within{border-color:var(--hb-point); box-shadow:0 0 0 4px rgba(36,107,165,.12);}
.hb .hb-sch input[type="text"], .hb .hb-sch input[type="search"]{flex:1 1 auto; min-width:0; width:auto; height:100%; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; font-family:inherit; font-size:15px; font-weight:500; color:var(--hb-navy); outline:none; -webkit-appearance:none; appearance:none;}
.hb .hb-sch input::placeholder{color:var(--hb-soft); font-weight:400;}
.hb .hb-sch input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}
.hb .hb-sch button, .hb .hb-sch .ic{position:relative; flex:0 0 46px; display:flex; align-items:center; justify-content:center; width:46px; height:34px; margin:0; padding:0; border:0; border-radius:0 100px 100px 0; background:none; font-size:19px; line-height:1; color:var(--hb-navy); transition:color .3s ease;}
.hb .hb-sch button{cursor:pointer;}
.hb .hb-sch button:before, .hb .hb-sch .ic:before{content:""; position:absolute; left:0; top:50%; width:1px; height:16px; margin-top:-8px; background:var(--hb-navy);}
.hb .hb-sch button:hover, .hb .hb-sch button:focus-visible{background:none; color:var(--hb-point);}
.hb .hb-sch button i, .hb .hb-sch .ic i{position:static; margin:0; font-size:19px; color:inherit;}

/* 큰 검색창 (FAQ 상단 배너 안) */
.hb-sch.lg{width:100%; height:60px; padding:0 8px 0 28px; border-color:#fff; box-shadow:0 20px 40px rgba(0,0,0,.2);}
.hb-sch.lg:focus-within{border-color:#fff; box-shadow:0 20px 40px rgba(0,0,0,.2), 0 0 0 4px rgba(169,220,245,.45);}
.hb .hb-sch.lg input[type="text"]{font-size:16px;}
.hb .hb-sch.lg button{flex-basis:56px; width:56px; height:44px; font-size:22px;}
.hb .hb-sch.lg button i{font-size:22px;}
.hb .hb-sch.lg button:before{height:20px; margin-top:-10px;}


/* ==========================================================
   2. 목록 상단 바 : 왼쪽 Total(+전체선택) / 오른쪽 검색창 + 버튼
   ========================================================== */
.hb-listbar, .hb.lab-wrap .lab-listbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; padding:0;}
.hb-listbar .lft, .hb-listbar .rgt{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-width:0;}
.hb-listbar .rgt, .hb.lab-wrap .lab-listbar .rgt{gap:8px;}
.hb-total, .hb.lab-wrap .lab-listbar .lab-total{font-size:15px; color:var(--hb-mute);}
.hb-total b, .hb.lab-wrap .lab-listbar .lab-total b{font-weight:800; color:var(--hb-point);}
.hb.lab-wrap .lab-chkall{font-size:14px; color:var(--hb-text);}

/* 하단 선택 버튼(선택삭제·복사·이동) */
.hb-selbtns, .hb.lab-wrap .lab-basic-foot, .hb.lab-wrap .lab-gal-foot, .hb.lab-wrap .lab-vd-foot{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; margin:22px 0 0; padding:0;}


/* ==========================================================
   3. 버튼 (모든 스킨 공통 — 알약형)
   기본 : 네이비 라인 / .pt : 포인트 채움 / .gh : 옅은 라인(관리용) / .del : 삭제 / .sm : 작게
   lab-btn · stf_btn · fq_btn · pg_btn 도 같은 모양으로 묶는다.
   ========================================================== */
.hb .hb-btn,
.hb.lab-wrap .lab-btn, .hb.lab-wrap .lab-btn-dark, .hb.lab-wrap .lab-btn-point, .hb.lab-wrap .lab-selbtn,
.hb.lab-wrap .lab-w-cancel, .hb.lab-wrap .lab-w-submit,
.stf_btn, .fq_btn, .pg_btn{
	display:inline-flex; align-items:center; justify-content:center; flex:none; gap:6px;
	height:44px; margin:0; padding:0 22px; border:1px solid var(--hb-navy); border-radius:100px; background:#fff; box-shadow:none;
	font-family:inherit; font-size:14px; font-weight:700; line-height:1; letter-spacing:-.2px; color:var(--hb-navy); text-decoration:none; white-space:nowrap;
	cursor:pointer; transform:none; transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.hb .hb-btn i,
.hb.lab-wrap .lab-btn i, .hb.lab-wrap .lab-btn-dark i, .hb.lab-wrap .lab-btn-point i, .hb.lab-wrap .lab-selbtn i,
.stf_btn i, .fq_btn i, .pg_btn i{margin:0; font-size:17px; font-weight:400; color:inherit;}
.hb .hb-btn:hover, .hb .hb-btn:focus-visible,
.hb.lab-wrap .lab-btn-dark:hover, .hb.lab-wrap .lab-btn-dark:focus-visible,
.stf_btn:hover, .stf_btn:focus-visible, .fq_btn:hover, .fq_btn:focus-visible, .pg_btn:hover, .pg_btn:focus-visible{border-color:var(--hb-navy); background:var(--hb-navy); box-shadow:none; color:#fff; text-decoration:none; transform:none;}

/* 포인트(글쓰기·저장) */
.hb .hb-btn.pt, .hb.lab-wrap .lab-btn-point, .hb.lab-wrap .lab-w-submit,
.stf_btn.pt, .fq_btn.pt, .pg_btn.pt{border-color:var(--hb-point); background:var(--hb-point); color:#fff;}
.hb .hb-btn.pt:hover, .hb .hb-btn.pt:focus-visible,
.hb.lab-wrap .lab-btn-point:hover, .hb.lab-wrap .lab-btn-point:focus-visible,
.hb.lab-wrap .lab-w-submit:hover, .hb.lab-wrap .lab-w-submit:focus-visible,
.stf_btn.pt:hover, .stf_btn.pt:focus-visible, .fq_btn.pt:hover, .fq_btn.pt:focus-visible, .pg_btn.pt:hover, .pg_btn.pt:focus-visible{border-color:var(--hb-navy); background:var(--hb-navy); box-shadow:none; color:#fff; transform:none;}

/* 옅은 라인(수정·복사·이동·취소 등 보조) */
.hb .hb-btn.gh, .hb.lab-wrap .lab-btn, .hb.lab-wrap .lab-selbtn, .hb.lab-wrap .lab-w-cancel{border-color:var(--hb-line2); background:#fff; color:var(--hb-text);}
.hb .hb-btn.gh:hover, .hb .hb-btn.gh:focus-visible,
.hb.lab-wrap .lab-btn:hover, .hb.lab-wrap .lab-btn:focus-visible,
.hb.lab-wrap .lab-selbtn:hover, .hb.lab-wrap .lab-selbtn:focus-visible,
.hb.lab-wrap .lab-w-cancel:hover, .hb.lab-wrap .lab-w-cancel:focus-visible{border-color:var(--hb-navy); background:var(--hb-bg); color:var(--hb-navy); transform:none;}

/* 삭제 */
.hb .hb-btn.del, .stf_btn.del, .fq_btn.del, .pg_btn.del{border-color:var(--hb-red); background:#fff; color:var(--hb-red);}
.hb .hb-btn.del:hover, .hb .hb-btn.del:focus-visible,
.stf_btn.del:hover, .stf_btn.del:focus-visible, .fq_btn.del:hover, .fq_btn.del:focus-visible, .pg_btn.del:hover, .pg_btn.del:focus-visible{border-color:var(--hb-red); background:var(--hb-red); color:#fff;}

/* 작게 */
.hb .hb-btn.sm, .hb.lab-wrap .lab-selbtn{height:38px; padding:0 16px; font-size:13px;}
.hb .hb-btn.sm i{font-size:15px;}


/* ==========================================================
   4. 보기(view) 공통
   제목·날짜 → 본문 → 첨부파일 → 관련링크 → 이전·다음글 → 버튼
   ========================================================== */
/* 4-1. 제목 / 날짜·조회 */
.hb-vhead{padding:34px 10px 28px; border-top:2px solid var(--hb-navy); border-bottom:1px solid var(--hb-line);}
.hb-vhead .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.hb-badge{display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 12px; border-radius:100px; background:var(--hb-tint); font-size:13px; font-weight:800; color:var(--hb-point); white-space:nowrap;}
.hb-badge.dk{background:var(--hb-navy); color:#fff;}
.hb .hb-vhead .tit{margin:0; padding:0; font-size:30px; font-weight:700; color:var(--hb-navy); letter-spacing:-1px; line-height:1.4; overflow-wrap:anywhere;}
.hb-vhead .meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 0; margin:18px 0 0; padding:0; list-style:none;}
.hb-vhead .meta li{display:inline-flex; align-items:center; gap:5px; margin:0; padding:0; font-size:15px; font-weight:500; color:var(--hb-mute); list-style:none;}
.hb-vhead .meta li + li:before{content:""; width:1px; height:12px; margin:0 14px; background:var(--hb-line2);}
.hb-vhead .meta li i{font-size:17px; color:var(--hb-soft);}
.hb-vhead .meta li.r{margin-left:auto;}
.hb-vhead .meta li.r:before{display:none;}
.hb .hb-vhead .meta .yt{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 16px; border:1px solid #f3c9cb; border-radius:100px; font-size:13px; font-weight:700; color:#e5484d; transition:background .3s ease;}
.hb .hb-vhead .meta .yt i{font-size:17px; color:#e5484d;}
.hb .hb-vhead .meta .yt:hover, .hb .hb-vhead .meta .yt:focus-visible{background:#fdf2f3; color:#e5484d;}

/* 4-2. 본문 */
.hb-vcon{min-height:200px; padding:40px 10px 50px; border-bottom:1px solid var(--hb-line); font-size:17px; font-weight:500; color:var(--hb-text); line-height:1.8; letter-spacing:-.3px; overflow-wrap:anywhere;}
.hb-vcon img{max-width:100%; height:auto;}
.hb-vcon #bo_v_img{margin:0 0 20px;}
.hb-vcon #bo_v_img img{display:block; margin:0 0 16px; border-radius:16px;}
.hb .hb-vcon #bo_v_con{width:auto; min-height:0; margin:0; font-size:inherit; line-height:inherit; word-break:keep-all; overflow:visible;}
.hb .hb-vcon #bo_v_con a{color:var(--hb-point); text-decoration:underline;}

/* 갤러리(lab_gallery) 사진 영역 · 영상(lab_video) 플레이어도 본문과 같은 틀에 맞춘다 */
.hb.lab-wrap .lab-gv-body{margin:0; padding:40px 10px 50px; border:0; border-bottom:1px solid var(--hb-line); border-radius:0; background:none;}
.hb.lab-wrap .lab-gv-main{border-color:var(--hb-line); border-radius:20px;}
.hb.lab-wrap .lab-gv-thumbs .th{border-radius:12px;}
.hb.lab-wrap .lab-gv-body .txt{font-size:17px; font-weight:500; color:var(--hb-text); letter-spacing:-.3px;}
.hb.lab-wrap .hb-vcon .lab-vdv-player{border-radius:20px;}
.hb.lab-wrap .hb-vcon .lab-vdv-con{max-width:none; margin:30px 0 0; font-size:inherit; color:inherit;}

/* 4-3. 첨부파일 / 관련링크 */
.hb-files{margin-top:30px;}
.hb .hb-files .fh{position:static; display:flex; align-items:center; gap:6px; overflow:visible; margin:0 0 12px; padding:0; font-size:16px; font-weight:700; line-height:1.4; color:var(--hb-navy);}
.hb-files .fh i{font-size:19px; color:var(--hb-point);}
.hb-files .fh b{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; padding:0 8px; border-radius:100px; background:var(--hb-tint); font-size:13px; font-weight:800; color:var(--hb-point);}
.hb .hb-files ul{display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; margin:0; padding:0; list-style:none;}
.hb .hb-files li{float:none; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; list-style:none;}
.hb .hb-files li a{float:none; display:flex; align-items:center; gap:14px; padding:12px 14px 12px 12px; border:1px solid var(--hb-line); border-radius:16px; background:#fff; color:var(--hb-navy); text-decoration:none; transition:border-color .3s ease, box-shadow .3s ease;}
.hb-files .ext{flex:0 0 44px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--hb-tint); font-family:'Outfit', 'Pretendard', sans-serif; font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--hb-point);}
.hb .hb-files .ext i{float:none; margin:0; font-size:20px; color:var(--hb-point);}
.hb-files .nm{flex:1 1 auto; min-width:0; overflow:hidden; font-size:16px; font-weight:600; color:var(--hb-navy); text-overflow:ellipsis; white-space:nowrap; transition:color .3s ease;}
.hb-files .inf{flex:0 0 auto; font-size:13px; font-weight:500; color:var(--hb-mute); white-space:nowrap;}
.hb-files .dl{flex:0 0 36px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--hb-bg); color:var(--hb-navy); transition:background .3s ease, color .3s ease;}
.hb .hb-files .dl i{float:none; margin:0; font-size:18px; color:inherit;}
.hb .hb-files li a:hover, .hb .hb-files li a:focus-visible{border-color:var(--hb-point); box-shadow:0 10px 24px rgba(32,76,117,.08); text-decoration:none;}
.hb-files li a:hover .nm, .hb-files li a:focus-visible .nm{color:var(--hb-point);}
.hb-files li a:hover .dl, .hb-files li a:focus-visible .dl{background:var(--hb-navy); color:#fff;}

/* 4-4. 이전글 / 다음글 */
.hb-nav{display:grid; margin:50px 0 0; padding:0; border-top:1px solid var(--hb-line);}
.hb .hb-nav a{display:flex; align-items:center; gap:20px; padding:20px 12px; border-bottom:1px solid var(--hb-line); text-decoration:none; transition:background .3s ease;}
.hb-nav em{flex:0 0 auto; display:flex; align-items:center; gap:4px; min-width:96px; font-style:normal; font-size:14px; font-weight:700; color:var(--hb-mute);}
.hb-nav em i{font-size:18px;}
.hb-nav span{flex:1 1 auto; min-width:0; overflow:hidden; font-size:16px; font-weight:600; color:var(--hb-navy); text-overflow:ellipsis; white-space:nowrap; transition:color .3s ease;}
.hb-nav time{flex:0 0 auto; font-family:'Outfit', 'Pretendard', sans-serif; font-size:14px; font-weight:500; color:var(--hb-soft);}
.hb .hb-nav a:hover, .hb .hb-nav a:focus-visible{background:var(--hb-bg);}
.hb-nav a:hover span, .hb-nav a:focus-visible span{color:var(--hb-point);}

/* 4-5. 버튼줄 : 왼쪽 수정·삭제·복사·이동 / 오른쪽 목록·글쓰기 */
.hb-vbtns{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:30px 0 0;}
.hb-vbtns .grp{display:flex; flex-wrap:wrap; gap:6px;}
.hb-vbtns .grp:last-child{margin-left:auto;}


/* ==========================================================
   5. 쓰기(write) 하단 버튼 : 가운데 정렬 · 조금 크게
   ========================================================== */
.hb-wbtns, .hb.lab-wrap .lab-w-foot, #bo_w.hb .stf_foot, #bo_w.hb .fq_foot, #bo_w.hb .pg_foot{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:40px 0 0;}
.hb .hb-wbtns .hb-btn, .hb.lab-wrap .lab-w-foot .lab-w-cancel, .hb.lab-wrap .lab-w-foot .lab-w-submit,
#bo_w.hb .stf_foot .stf_btn, #bo_w.hb .fq_foot .fq_btn, #bo_w.hb .pg_foot .pg_btn{min-width:130px; height:50px; padding:0 30px; font-size:15px;}


/* ==========================================================
   6. 페이지네이션 (그누보드 .pg_wrap 재정의 — 모든 스킨 동일)
   처음·이전·다음·마지막은 gif 대신 CSS 화살표로 그린다.
   ========================================================== */
.hb .pg_wrap{float:none; clear:both; display:flex; justify-content:center; margin:44px 0 0; padding:0; text-align:center;}
.hb .pg_wrap:after{display:none;}
.hb .pg{display:inline-flex; flex-wrap:wrap; justify-content:center; gap:6px;}
.hb .pg_page, .hb .pg_current{position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; margin:0; padding:0 8px; border:1px solid var(--hb-line); border-radius:100px; background:#fff; font-size:15px; font-weight:600; line-height:1; color:var(--hb-text); text-decoration:none; transition:border-color .3s ease, color .3s ease;}
.hb .pg_current{border-color:var(--hb-navy); background:var(--hb-navy); font-weight:700; color:#fff;}
.hb .pg_page:hover, .hb .pg_page:focus-visible{border-color:var(--hb-point); background:#fff; color:var(--hb-point);}
.hb .pg_page.pg_start, .hb .pg_page.pg_prev, .hb .pg_page.pg_next, .hb .pg_page.pg_end{overflow:hidden; padding:0; background-image:none; font-size:0; text-indent:0;}
.hb .pg_start:before, .hb .pg_prev:before, .hb .pg_next:before, .hb .pg_end:before,
.hb .pg_start:after, .hb .pg_end:after{content:""; display:block; width:7px; height:7px; border:solid currentColor; border-width:0 1.5px 1.5px 0; font-size:0;}
.hb .pg_prev:before, .hb .pg_start:before, .hb .pg_start:after{transform:rotate(135deg);}
.hb .pg_next:before, .hb .pg_end:before, .hb .pg_end:after{transform:rotate(-45deg);}
.hb .pg_prev:before{margin-left:3px;}
.hb .pg_next:before{margin-right:3px;}
.hb .pg_start:before{margin-left:4px;}
.hb .pg_start:after, .hb .pg_end:after{margin-left:-2px;}
.hb .pg_end:before{margin-right:1px;}
.hb .pg_end:after{margin-right:4px;}


/* ==========================================================
   7. 기본(basic) · 갤러리(gallery) 스킨
   그누보드 기본 마크업을 그대로 쓰는 스킨을 같은 모양으로 맞춘다.
   ========================================================== */
.hb-basic{float:none; margin:0; padding:0 0 80px; color:var(--hb-navy);}
.hb-basic:after{display:none;}

/* 분류 */
.hb-basic #bo_cate{margin:0 0 24px;}
.hb-basic #bo_cate ul{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.hb-basic #bo_cate li{display:block; padding:0;}
.hb-basic #bo_cate a{display:inline-flex; align-items:center; height:38px; padding:0 16px; border:1px solid var(--hb-line); border-radius:100px; background:#fff; box-shadow:none; font-size:14px; font-weight:600; line-height:1; color:var(--hb-text); transition:all .3s ease;}
.hb-basic #bo_cate a:hover, .hb-basic #bo_cate a:focus{border-color:var(--hb-point); background:#fff; color:var(--hb-point);}
.hb-basic #bo_cate #bo_cate_on{border-color:var(--hb-point); background:var(--hb-point); box-shadow:none; color:#fff;}

/* 목록 표 */
#bo_list.hb-basic .tbl_head01{margin:0; border-top:2px solid var(--hb-navy);}
#bo_list.hb-basic table{width:100%; border-collapse:collapse;}
#bo_list.hb-basic thead th{padding:16px 10px; border:0; border-bottom:1px solid var(--hb-line); background:var(--hb-bg); font-size:14px; font-weight:700; color:var(--hb-navy); text-align:center;}
#bo_list.hb-basic thead th a{color:inherit;}
#bo_list.hb-basic tbody tr{border:0; transition:background .2s ease;}
#bo_list.hb-basic tbody tr:hover{border:0; background:var(--hb-bg);}
#bo_list.hb-basic tbody td{padding:17px 10px; border:0; border-bottom:1px solid var(--hb-line); background:none; font-size:15px; color:var(--hb-text); line-height:1.5;}
#bo_list.hb-basic tbody .bo_notice td{background:var(--hb-bg);}
#bo_list.hb-basic .td_chk{width:46px;}
#bo_list.hb-basic .td_num, #bo_list.hb-basic .td_num2{width:76px; color:var(--hb-mute);}
#bo_list.hb-basic .td_name{width:120px; padding:17px 10px; text-align:center;}
#bo_list.hb-basic .td_datetime{width:120px; font-family:'Outfit', 'Pretendard', sans-serif; color:var(--hb-mute);}
#bo_list.hb-basic .td_subject{text-align:left;}
#bo_list.hb-basic .bo_tit{font-size:16px; font-weight:600; color:var(--hb-navy);}
#bo_list.hb-basic .bo_tit a{color:var(--hb-navy);}
#bo_list.hb-basic .bo_tit a:hover{color:var(--hb-point);}
#bo_list.hb-basic .notice_icon{display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:100px; background:var(--hb-point); font-size:12px; font-weight:800; line-height:1; color:#fff;}
#bo_list.hb-basic .bo_cate_link, #bo_gall.hb-basic .bo_cate_link{float:left; display:inline-flex; align-items:center; height:26px; margin-right:10px; padding:0 12px; border-radius:100px; background:var(--hb-tint); font-size:12px; font-weight:800 !important; line-height:1; color:var(--hb-point);}
#bo_list.hb-basic .empty_table{padding:80px 10px; color:var(--hb-soft);}

/* 갤러리 목록 카드 */
#bo_gall.hb-basic #gall_ul{margin:0 -10px;}
#bo_gall.hb-basic .gall_box{overflow:hidden; margin:0 0 20px; border:1px solid var(--hb-line); border-radius:20px; background:#fff; transition:box-shadow .3s ease, transform .3s ease;}
#bo_gall.hb-basic .gall_box:hover{box-shadow:0 16px 36px rgba(32,76,117,.12); transform:translateY(-4px);}
#bo_gall.hb-basic .gall_img{border:0; background:var(--hb-bg);}
#bo_gall.hb-basic .gall_img img{display:block; width:100%;}
#bo_gall.hb-basic .gall_text_href{margin:0; padding:18px 22px 0;}
#bo_gall.hb-basic .bo_tit{font-size:17px; font-weight:700; line-height:1.5; color:var(--hb-navy);}
#bo_gall.hb-basic .bo_cnt{display:block; margin-top:4px; font-size:14px; line-height:1.6; color:var(--hb-mute);}
#bo_gall.hb-basic .gall_info{padding:12px 22px 20px; font-size:13px; line-height:1.5; color:var(--hb-mute);}
#bo_gall.hb-basic .gall_option{display:none;}
#bo_gall.hb-basic .empty_list{padding:80px 10px; text-align:center; color:var(--hb-soft);}
#bo_gall.hb-basic #gall_allchk{margin:0;}

/* 보기 */
#bo_v.hb-basic{margin:0; background:none;}
#bo_v.hb-basic #bo_v_share{padding:0 0 20px;}
#bo_v.hb-basic #bo_v_act{margin:30px 0 0;}

/* 쓰기 */
#bo_w.hb-basic .write_div{margin:12px 0;}
#bo_w.hb-basic .frm_input, #bo_w.hb-basic .bo_w_select select{height:50px; padding:0 16px; border:1px solid var(--hb-line); border-radius:14px; background:#fff; box-shadow:none; font-size:15px; color:var(--hb-navy); outline:none; transition:border-color .3s ease, box-shadow .3s ease;}
#bo_w.hb-basic .frm_input:focus, #bo_w.hb-basic .bo_w_select select:focus{border-color:var(--hb-point); box-shadow:0 0 0 3px rgba(36,107,165,.12);}
#bo_w.hb-basic .bo_w_tit .frm_input{padding-right:150px;}
#bo_w.hb-basic .bo_w_tit #btn_autosave{top:8px; right:8px; height:34px; padding:0 14px; border:1px solid var(--hb-line2); border-radius:100px; background:#fff; font-size:13px; line-height:32px; color:var(--hb-text);}
#bo_w.hb-basic .wr_content textarea{padding:16px; border:1px solid var(--hb-line); border-radius:14px; box-shadow:none; font-size:15px; line-height:1.7;}
#bo_w.hb-basic .bo_w_link label{top:6px; left:6px; color:var(--hb-point);}
#bo_w.hb-basic .bo_w_link .frm_input{padding-left:50px;}
#bo_w.hb-basic .bo_w_flie .file_wr{height:50px; padding:10px; border:1px dashed var(--hb-line2); border-radius:14px; background:var(--hb-bg);}
#bo_w.hb-basic .bo_w_flie .lb_icon{top:6px; left:6px; color:var(--hb-point);}
#bo_w.hb-basic .btn_confirm{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:40px 0 0;}
#bo_w.hb-basic .btn_confirm .btn_cancel, #bo_w.hb-basic .btn_confirm .btn_submit{display:inline-flex; align-items:center; justify-content:center; min-width:130px; height:50px; padding:0 30px; border:1px solid var(--hb-line2); border-radius:100px; background:#fff; font-size:15px; font-weight:700; line-height:1; color:var(--hb-text); transition:background .3s ease, color .3s ease, border-color .3s ease;}
#bo_w.hb-basic .btn_confirm .btn_cancel:hover{border-color:var(--hb-navy); background:var(--hb-bg); color:var(--hb-navy);}
#bo_w.hb-basic .btn_confirm .btn_submit{border-color:var(--hb-point); background:var(--hb-point); color:#fff;}
#bo_w.hb-basic .btn_confirm .btn_submit:hover{border-color:var(--hb-navy); background:var(--hb-navy);}


/* ==========================================================
   8. 반응형
   ========================================================== */
@media (max-width: 1170px){
	.pg_bar .hb-sch{width:100%;}   /* 비교과 : 필터 바가 세로로 바뀌는 구간 */
}
@media (max-width: 1024px){
	.hb .hb-vhead .tit{font-size:26px;}
}
@media (max-width: 767px){
	.hb-listbar, .hb.lab-wrap .lab-listbar{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px;}
	.hb-listbar .rgt, .hb.lab-wrap .lab-listbar .rgt{width:100%;}
	.hb-listbar .hb-sch, .hb.lab-wrap .lab-listbar .hb-sch{flex:1 1 100%; width:100%;}
	.stf_bar .hb-sch{width:100%;}
	.hb.lab-wrap .lab-gv-body{padding:26px 4px 34px;}
	.hb.lab-wrap .lab-gv-body .txt{font-size:15px;}
	.hb-sch{height:42px; padding-left:18px;}
	.hb .hb-sch input[type="text"], .hb .hb-sch input[type="search"]{font-size:14px;}
	.hb-sch.lg{height:52px; padding:0 6px 0 22px;}
	.hb .hb-sch.lg input[type="text"]{font-size:14px;}
	.hb .hb-sch.lg button{flex-basis:48px; width:48px; height:40px;}

	.hb .hb-btn,
	.hb.lab-wrap .lab-btn, .hb.lab-wrap .lab-btn-dark, .hb.lab-wrap .lab-btn-point,
	.hb.lab-wrap .lab-w-cancel, .hb.lab-wrap .lab-w-submit,
	.stf_btn, .fq_btn, .pg_btn{height:40px; padding:0 16px; font-size:13px;}
	.hb .hb-btn.sm, .hb.lab-wrap .lab-selbtn{height:36px; padding:0 14px;}

	.hb-vhead{padding:24px 4px 20px;}
	.hb-vhead .tags{margin-bottom:10px;}
	.hb-badge{height:26px; padding:0 10px; font-size:12px;}
	.hb .hb-vhead .tit{font-size:21px; letter-spacing:-.6px;}
	.hb-vhead .meta{margin-top:12px;}
	.hb-vhead .meta li{font-size:13px;}
	.hb-vhead .meta li + li:before{margin:0 10px;}
	.hb-vhead .meta li i{font-size:15px;}
	.hb-vhead .meta li.r{flex:1 1 100%; margin:4px 0 0;}
	.hb-vcon{min-height:140px; padding:26px 4px 34px; font-size:15px;}

	.hb-files{margin-top:22px;}
	.hb .hb-files .fh{font-size:15px;}
	.hb .hb-files li a{gap:10px; padding:10px; border-radius:14px;}
	.hb-files .ext{flex-basis:38px; width:38px; height:38px; border-radius:10px; font-size:11px;}
	.hb-files .nm{font-size:14px; white-space:normal; overflow-wrap:anywhere;}   /* 긴 파일명·URL 이 화면을 밀어내지 않게 */
	.hb-files .inf{display:none;}
	.hb-files .dl{flex-basis:32px; width:32px; height:32px;}

	.hb-nav{margin-top:34px;}
	.hb .hb-nav a{flex-wrap:wrap; gap:4px 10px; padding:14px 4px;}
	.hb-nav em{min-width:0; font-size:13px;}
	.hb-nav time{margin-left:auto; font-size:13px;}
	.hb-nav span{order:3; flex:1 1 100%; font-size:15px;}

	.hb-vbtns{margin-top:22px;}
	.hb-wbtns, .hb.lab-wrap .lab-w-foot, #bo_w.hb .stf_foot, #bo_w.hb .fq_foot, #bo_w.hb .pg_foot{margin-top:28px;}
	.hb .hb-wbtns .hb-btn, .hb.lab-wrap .lab-w-foot .lab-w-cancel, .hb.lab-wrap .lab-w-foot .lab-w-submit,
	#bo_w.hb .stf_foot .stf_btn, #bo_w.hb .fq_foot .fq_btn, #bo_w.hb .pg_foot .pg_btn,
	#bo_w.hb-basic .btn_confirm .btn_cancel, #bo_w.hb-basic .btn_confirm .btn_submit{flex:1 1 0; min-width:0; height:46px; padding:0 16px; font-size:14px;}

	.hb .pg_wrap{margin-top:30px;}
	.hb .pg{gap:4px;}
	.hb .pg_page, .hb .pg_current{min-width:34px; height:34px; font-size:13px;}

	.hb-basic{padding-bottom:60px;}
	#bo_list.hb-basic thead{display:none;}
	#bo_list.hb-basic .td_num, #bo_list.hb-basic .td_num2, #bo_list.hb-basic .td_name{display:none;}
	#bo_list.hb-basic tbody td{padding:14px 6px; font-size:14px;}
	#bo_list.hb-basic .td_datetime{width:86px; font-size:13px;}
	#bo_list.hb-basic .bo_tit{font-size:15px;}
	#bo_gall.hb-basic .gall_row .gall_li{width:50%;}
	#bo_w.hb-basic .frm_input, #bo_w.hb-basic .bo_w_select select{height:46px; font-size:14px;}
}
@media (max-width: 480px){
	#bo_gall.hb-basic .gall_row .gall_li{width:100%;}
}