@charset "utf-8";

/* 공통 */
#container { background: #fff; padding-bottom: 170px; }
.gw-bbs-con { margin: 0 auto; width: 1200px; }

/* [리스트 페이지만 상단 여백 강제 부여] */
/* 검색창이 있든 없든 리스트 전체를 180px 아래로 밀어냅니다. */
#gw-bo-list {
    margin-top: 100px !important;
    display: block;
    overflow: hidden;
}

/* 리스트 내 검색창 여백 조정 (위의 margin과 겹치지 않게 조절) */
#gw-bo-list .search-container {
    padding: 40px 0 80px 0;
    position: relative;
    width: 700px;
    margin: 0 auto;
    display: flex;
    gap: 15px;
}

/* [상세보기 및 글쓰기] 기존 여백 유지 */
#gw-bo-v, #gw-bo-w { padding-top: 120px; }

.more_opt { display: none; position: absolute; top: 45px; right: 0; background: #fff; border: 1px solid #ddd; z-index: 100; box-shadow: 70px 70px 130px rgb(39 49 108 / 20%); }
.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: 154px; margin: 0; color: #666; 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: #666; text-align: left; }
.more_opt li:hover a, .more_opt li:hover button { color: #000; }
.more_opt li i { float: right; line-height: 20px; }

/* 페이징 */
.pg_wrap { display: flex; align-items: center; place-content: center; font-family: "Outfit", sans-serif; font-weight: 600; }
.pg { text-align: center; display: flex; }
.pg_page, .pg_current { min-width: 20px; padding: 0 3px; margin: 0 6px; text-align: center; }
.pg_page { color: #999 !important; }
.pg_current { border-bottom: 2px solid #000; }
.pg a:focus, .pg a:hover { text-decoration: none; }
.pg_start { text-indent: -999px; overflow: hidden; padding: 0; background: url('img/gw-bbs-start.png') no-repeat 50% 50%; background-size: 100%; }
.pg_prev { text-indent: -999px; overflow: hidden; padding: 0; background: url('img/gw-bbs-prev.png') no-repeat 50% 50%; background-size: 100%; }
.pg_end { text-indent: -999px; overflow: hidden; padding: 0; background: url("img/gw-bbs-end.png") no-repeat 50% 50%; background-size: 100%; }
.pg_next { text-indent: -999px; overflow: hidden; padding: 0; background: url('img/gw-bbs-next.png') no-repeat 50% 50%; background-size: 100%; }

/* list 세부 설정 */
#gw-bo-list .search-container button { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); }
#gw-bo-list .sch_input { padding: 12px 17px; height: 55px; border: 2px solid #ddd; border-radius: 5px; background: #fff; width: 100%; }
#gw-bo-list .sch_input::placeholder { text-align: left; font-family: "Noto Sans KR", sans-serif; font-weight: 500; color: #666; }
#gw-bo-list .sch_input:focus { text-align: left; border-color: #000; }
#bo_cate_on { background: #fff; box-shadow: 0 15px 10px rgba(34, 34, 34, .02); color: var(--main-color); }
.gw-table01 .chk_box { width: 60px; }
#gw-bo-list .td_num2 { width: 130px; }
#gw-bo-list .td_name { width: 200px; }
#gw-bo-list .td_num { width: 110px; }
#gw-bo-list .td_datetime { width: 110px; }
#gw-bo-list .profile_img { display: none; }
#gw-bo-list .bo_cate_link { margin-right: 5px; color: var(--main-color); transition: all .3s; }
#gw-bo-list .bo_tit { font-size: var(--main-title04); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: 600px; }
#gw-bo-list .btn_bo_user { place-content: center; align-items: flex-start; }
#gw-bo-list .icon-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: #000; display: flex; gap: 5px; }
#gw-bo-list .new_icon { font-size: 14px; font-family: "Outfit", sans-serif; font-weight: 600; color: #fff; width: 20px; height: 20px; display: block; text-align: center; line-height: 20px; background: var(--main-color); }
#gw-bo-list .cnt_cmt { color: var(--main-color); }
#gw-bo-list .gw-table01 tbody tr { position: relative; transition: all .5s; }
#gw-bo-list .gw-table01 td { transition: all .3s; color: #000; }
#gw-bo-list .gw-empty-list { border-top: 2px solid #000; padding: 40px 0; border-bottom: 1px solid #ddd; border-top: 2px solid #ddd; }
#gw-bo-list .gw-empty-list > h3 { font-size: var(--main-title03); }

/* view 세부 설정 */
#gw-bo-v .profile_img { display: none; }
#bo_v_info .profile_info { text-align: center; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #ddd; }
#bo_v_atc { min-height: 250px; border: 0px solid #ddd; border-radius: 5px; background: #fff; padding: 20px; }
#gw-bo-v .bo_v_nb { padding-top: 60px; margin-bottom: 60px; align-items: center; border-top: 1px solid #ddd; text-align: center; }
#gw-bo-v .bo_v_nb > li > a { display: block; width: 100%; transition: all .3s; text-transform: uppercase; font-size: var(--main-title04); }
#gw-bo-v .bo_v_nb > li > .list-btn { display: inline-block; width: 60px; height: 60px; background: #000; color: #fff; position: relative; box-shadow: 0 20px 30px rgba(0, 0, 0, .05); transition: all .3s; }
#gw-bo-v .bo_v_nb > li > .list-btn:hover { background: var(--main-color); }
#gw-bo-v .bo_v_nb > li > a.disabled-link { color: #ccc; }

/* write 세부 설정 */
#gw-bo-w { width: 1000px; margin: 0 auto; padding-top: 120px; }
#gw-bo-w > h2 { padding-bottom: 40px; margin-bottom: 20px; border-bottom: 2px solid #000; }

/* 반응형 모바일 대응 */
@media screen and (max-width: 1280px) {
    #container { padding-bottom: 120px; }
    .gw-bbs-con { width: 100%; padding: 0 40px; }
    #gw-bo-w { width: 100%; }
}

@media screen and (max-width: 1024px) {
    .gw-bbs-con { padding: 0 20px; }
    /* 태블릿 환경 리스트 상단 여백 */
    #gw-bo-list { margin-top: 140px !important; }
    #gw-bo-v, #gw-bo-w { padding-top: 100px; }
}

@media screen and (max-width: 768px) {
    #container { padding-bottom: 60px; }
    /* 모바일 환경 리스트 상단 여백 */
    #gw-bo-list { margin-top: 100px !important; }
    #gw-bo-v, #gw-bo-w { padding-top: 60px; }
}

@media screen and (max-width: 576px) {
    #gw-bo-list .search-container { padding-bottom: 40px; flex-wrap: wrap; }
    #gw-bo-v .bo_v_nb { padding-top: 30px; margin-bottom: 30px; }
}