@charset "utf-8";

/* contents 스킨 style.css를 기반으로 가져옴 — 체크박스/검색/관리자버튼/글쓰기/댓글 등
   게시판 공통 UI는 이 파일이 스타일을 담당하므로 그대로 유지 (infl 전용 카드 그리드는 파일 하단 참고) */

.content_move {display:none}

/* 게시판 목록 */
#bo_cate {margin:25px 0}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:2px}
#bo_cate a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#3a8afd;color:#fff}
#bo_cate #bo_cate_on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd;
-webkit-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
-moz-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
box-shadow:inset 0 2px 5px rgb(33, 135, 202)}

.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {position:relative;padding-left:20px;color:#676e70;vertical-align:baseline}
.chk_box input[type="checkbox"] + label:hover{color:#2172f8}
.chk_box input[type="checkbox"] + label span {position:absolute;top:10px;left:10px;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(../contents/img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px}
.all_chk.chk_box input[type="checkbox"] + label span {top:0;left:0}

/* 게시판 목록 공통 */
#bo_btn_top {margin:10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_list_total {float:left;line-height:34px;font-size:0.92em;color:#4e546f}

.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;width:40px;text-align:center;margin-left:5px;background:#fff}
.btn_bo_user > li {position:relative}

.more_opt {display:none;position:absolute;top:45px;right:0;background:#fff;border:1px solid #b8bfc4;z-index:999}
.more_opt:before {content:"";position:absolute;top:-8px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.more_opt:after {content:"";position:absolute;top:-6px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.more_opt li {border-bottom:1px solid #f1f1f1;padding:10px;float:inherit;width:90px;margin:0;color:#6b757c;text-align:left}
.more_opt li:last-child {border-bottom:0}
.more_opt li button, .more_opt li a {width:100%;border:0;background:#fff;color:#6b757c}
.more_opt li:hover a,
.more_opt li:hover button {color:#000}
.more_opt li i {float:right;line-height:20px}

.bo_cate_link {display:inline-block;background:#e2eaf6;color:#3a8afd;font-weight:normal !important;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;font-size:0.95em}
.bo_cate_link:hover {text-decoration:none}

.bo_sch_wrap {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999}
.bo_sch {position:absolute;top:50%;left:50%;background:#fff;text-align:left;width:330px;max-height:300px;margin-left:-125px;margin-top:-180px;overflow-y:auto;border-radius:5px;-webkit-box-shadow:1px 1px 18px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 18px rgba(0,0,0,0.2);box-shadow:1px 1px 18px rgba(0,0,0,0.2);border:1px solid #dde7e9;background:#fff;border-radius:3px}
.bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
.bo_sch h3 {padding:15px;border-bottom:1px solid #e8e8e8}
.bo_sch form {padding:15px;display:block}
.bo_sch select {border:0;width:100%;height:40px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075)}
.bo_sch .sch_bar {display:inline-block;width:100%;clear:both;margin-top:15px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075)}
.bo_sch .sch_input {width:250px;height:38px;border:0;padding:0;background-color:transparent;float:left}
.bo_sch .sch_btn {height:38px;float:right;color:#656565;background:none;border:0;width:40px;font-size:15px}
.bo_sch .bo_sch_cls {position:absolute;right:0;top:0;color:#b5b8bb;border:0;padding:12px 15px;font-size:16px;background:#fff}
.bo_sch_bg {background:#000;background:rgba(0,0,0,0.1);width:100%;height:100%}

#bo_gall li.empty_list, #infl_grid li.empty_list {padding:85px 0;text-align:center;width:100% !important}

/* 관리자 로그인 시 우측 고정 툴바 (contents 스킨과 동일) */
.btn_bo_user--admin {position:fixed;top:100px;right:40px;z-index:1000;display:flex;flex-direction:column;gap:8px;background-color:#fff;border-radius:4px;border:1px solid #ddd;padding-right:0 !important}
.btn_bo_user--admin li {float:left;width:40px;text-align:center;margin-left:0;background:#fff}
.btn_bo_user--admin li a {padding:0}
#bo_btn_top {position:relative}


/* ==========================================================
   infl 전용 커스텀 — 영상 카드 그리드 (카테고리 필터 / 검색바는
   sub_01.css의 .board_category / .board_search 공통 스타일 사용)
   ========================================================== */

#infl_grid {display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 40px; list-style: none; padding: 0; margin: 0;}
#infl_grid li {position: relative; width: calc(25% - 15px); margin-bottom: 0;}

#infl_grid .yt_facade, #infl_grid li > iframe {position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; background: #000; overflow: hidden; cursor: pointer; border: 0;}
#infl_grid .yt_facade img {width: 100%; height: 100%; object-fit: cover; display: block;}
#infl_grid .yt_facade .yt_play {position: absolute; top: 50%; left: 50%; width: 60px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .65); border-radius: 12px; transform: translate(-50%, -50%); transition: background .2s ease, transform .2s ease;}
#infl_grid .yt_facade .yt_play svg {width: 20px; height: 20px; margin-left: 2px;}
#infl_grid .yt_facade:hover .yt_play {background: #FF0000; transform: translate(-50%, -50%) scale(1.08);}

#infl_grid .txt_wrap {padding-top: 10px;}
#infl_grid .txt_wrap .tit {display: block; font-size: 18px; font-weight: 600; line-height: 1.4; color: #000;}
#infl_grid .txt_wrap .tag {display: block; font-size: 14px; line-height: 1.4; color: #666; margin-top: 4px;}

#infl_grid input[type="checkbox"] {width: 24px; height: 24px;}

#infl_grid .sort_num {display: block; font-size: 13px; color: #999; margin-bottom: 6px;}

/* 관리자 순번 변경(드래그 정렬) */
.sortable-item.drag-active {cursor: move; border: 1px solid #d13f4a; padding: 10px;}
.ui-state-highlight {background: #efefef;}
#infl_grid.sorting a {pointer-events: none;}
#infl_grid .sortable-helper {display: flex; gap: 10px;}
#infl_grid .sortable-helper .sortable-item {float: none;}

.bo_sort_controls--admin {position: fixed; top: 100px; right: calc(40px + 42px + 12px); z-index: 999; background: #fff; padding: 8px 12px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-width: 260px;}

@media screen and (max-width: 1200px) {
    #infl_grid li {width: calc(33.333% - 14px);}
}

@media screen and (max-width: 797px) {
    .sub_work .work_title {padding-top: 40px;}

    #infl_grid {column-gap: 14px; row-gap: 24px;}
    #infl_grid li {width: calc(50% - 7px);}
    #infl_grid .txt_wrap .tit {font-size: 15px;}
    #infl_grid .txt_wrap .tag {font-size: 13px;}
}