@charset "UTF-8";

/* 목록 */
.sub-cate {margin: clamp(80px, calc( 120 / var(--inner) * 100vw ), 120px) 0 clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px);}
.sub-cate h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;}
.sub-cate .ul-cate-list {width: 100%; background: var(--gray50); display: flex; justify-content: center; align-items: stretch;}
.ul-cate-list li {width: 20%;}
.ul-cate-list li a {padding: 16px 0; display: flex; justify-content: center; align-items: center; color: var(--gray700); text-align: center; font-family: Paperlogy; font-size: 1.25rem; font-weight: 400; line-height: 100%; letter-spacing: 0;}
.ul-cate-list li a#bo_cate_on {color: var(--gray900); font-weight: 500; line-height: 100%;}

.top {width: 100%; padding: var(--inner-padding); display: flex; justify-content: space-between; align-items: center; margin: 10px 0;}

.ul-user-menu {width: 100%; display: flex; justify-content: end; gap: 10px; margin: 10px 0;}
.top .ul-user-menu {margin: 0; margin-left: auto;}
.ul-user-menu li {position: relative;}

.more_opt {display:none;position:absolute;top:50px;right:7px;background:#fff;border:1px solid #b8bfc4;z-index:999}
.more_opt:before {content:"";position:absolute;top:-8px;right:6px;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:6px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.more_opt.is_list_btn{width:90px}
.more_opt li {display:block;border-bottom:1px solid #f1f1f1;padding:10px;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 {line-height:20px}

.ul-table {width: 100%; max-width: 1920px; padding: 80px var(--inner-padding-l); display: grid; grid-template-columns: repeat(4, calc((100% - clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px)*3)/4)); gap: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); margin: 0 auto;}
.ul-table>li {width: 100%; height: auto; aspect-ratio: 1/1;}
.ul-table>li.empty {padding: 80px 0; aspect-ratio: unset; grid-column: 1 / span 4; text-align: center;}
.ul-table .box {width: 100%; height: 100%; display: block; border-radius: 40px; overflow: hidden; position: relative;}
.ul-table .box .checkbox-area {position: absolute; top: 10px; left: 10px; z-index: 2;}
.ul-table .box .thumb {width: 100%; height: 100%;}
.ul-table .box .thumb img {width: 100%; height: 100%; object-fit: cover; border-radius: 40px;}
.ul-table .box .info {width: 100%; padding: clamp(24px, calc( 32 / 1600 * 100vw ), 32px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%); position: absolute; bottom: 0; left: 0; right: 0;}
.ul-table .box .info>* + * {margin-top: 2px;}
.ul-table .box .info .subject {color: var(--gray100);}
.ul-table .box .info .content {color: var(--gray200); max-height: calc(var(--text3-fs)*1.3*2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/* //목록 */

/* 상세 */
#bo_v_top .ul-user-menu {width: 100%; padding: var(--inner-padding);}
#bo_v_atc_title {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_atc .subject {color: var(--primary); text-align: center;}
#bo_v_con img {margin: 0 auto;}

.ul-nav {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 30px; font-size: 1rem; margin: 10px 0;}
.ul-nav .date {color: var(--gray500);}
.ul-nav :is(a, button) {display: flex; align-items: center; gap: 5px;}
.ul-nav .btn-prev {justify-content: start;}
.ul-nav .btn-next {justify-content: end;}
.ul-nav .btn-next i {order: 4; width: 1.125rem; height: 1.125rem; display: flex; justify-content: center; align-items: center;}
.ul-nav .btn-next .tit {order: 3;}
.ul-nav .btn-next .subject {order: 1;}
.ul-nav .btn-next .date {order: 2;}

.btn-golist {width: fit-content; padding: 10px 8px; display: flex; justify-content: center; align-items: center; gap: 5px; margin: 10px auto; border-radius: 5px; background: var(--gray900); color: #fff;}
/* //상세 */

/* 글쓰기 */
#bo_write {padding: clamp(100px, calc( 200 / var(--inner) * 100vw ), 200px) 0;}
.delete-file-area {display: flex; justify-content: start; align-items: center; gap: 10px; margin-top: 5px;}
.delete-file-area img {flex-shrink: 0;}
.clr-field {width: 100%;}
.clr-field button {width: 10%; min-width: 30px; cursor: pointer;}

/* .writeWrap :is(.bo_w_link, .bo_w_flie) {gap: 5px;}
.writeWrap :is(.bo_w_link, .bo_w_flie) label {flex-shrink: 0; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center;} */
/* //글쓰기 */





@media (max-width:1024px){
    .ul-table {grid-template-columns: repeat(3, calc((100% - clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px)*2)/3));}
    .ul-table>li.empty {grid-column: 1 / span 3;}
}

@media (max-width:768px){
    .ul-cate-list li {width: 25%;}
    .ul-table {grid-template-columns: repeat(2, calc((100% - clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px))/2));}
    .ul-table>li.empty {grid-column: 1 / span 2;}
}

@media (max-width:500px){
    .ul-table {grid-template-columns: none;}
    .ul-table>li.empty {grid-column: 1 / span 1;}
}