/* ------------------공통부분--------------------- */

/* PC에서만 본문을 오른쪽으로 살짝 이동 */
@media (min-width: 769px) {
    #container_wr {
            max-width: 1000px;
        position: relative;
        left: 100px;
    }
}

#bo_cate {
    margin: var(--spacing-lg) 0;
}

#bo_cate h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_cate ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

#bo_cate li {
    display: inline-block;
}

#bo_cate a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--btn-primary-radius);
    border: 1px solid var(--btn-primary-bg);
    color:var(--btn-primary-text);
    background:var(--btn-primary-bg);
    transition: var(--transition-fast);
    text-decoration: none;
}

#bo_cate a:hover,
#bo_cate a:focus,
#bo_cate a:active,
#bo_cate #bo_cate_on {
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    border-color: var(--btn-accent-bg);
    text-decoration: none;
}

#bo_cate #bo_cate_on {
    font-weight: bold;
}

.board-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.bo_gall_top.board-topbar,
#bo_btn_top.board-topbar,
.book-card-heading.board-topbar,
.bookshelf-heading.board-topbar,
.series-guide.board-topbar,
.thumb-guide.board-topbar,
.loadup-guide.board-topbar,
.thread-guide.board-topbar,
.timethread-guide.board-topbar,
.draw-loadb-header.board-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    flex-direction: row;
}

.board-topbar > .board-top-actions,
.board-topbar .btn_bo_user,
.board-topbar #bo_gall_act,
.board-topbar .book-card-heading-actions,
.board-topbar .bookshelf-actions,
.board-topbar .series-ui-btn,
.board-topbar .thumb-ui-btn,
.board-topbar .loadup-guide-button,
.board-topbar .thread_btn,
.board-topbar .timethread-guide-button,
.board-topbar .draw-loadb-actions {
    margin-left: auto;
}

.board-topbar .btn_bo_user,
.board-topbar #bo_gall_act,
.board-topbar .book-card-heading-actions,
.board-topbar .bookshelf-actions,
.board-topbar .series-ui-btn,
.board-topbar .thumb-ui-btn,
.board-topbar .loadup-guide-button,
.board-topbar .thread_btn,
.board-topbar .timethread-guide-button,
.board-topbar .draw-loadb-tools,
.board-topbar .draw-loadb-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: 0;
    list-style: none;
}

.board-topbar .book-card-heading-actions,
.board-topbar #bo_gall_act {
    width: auto;
}

.board-topbar .draw-loadb-tools {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.board-topbar .board-top-search,
.board-topbar .bo_sch_wrap,
.board-topbar .series-sch,
.board-topbar .thumb-sch,
.board-topbar .searc-sub-box,
.board-topbar .draw-loadb-search {
    flex: 1 1 360px;
    min-width: min(100%, 260px);
}

.board-top-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.board-topbar .thread_btn {
    margin-bottom: 0;
    justify-content: flex-end;
}

.board-icon-btn,
.board-text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid var(--btn-primary-bg);
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: var(--content-font-family);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn_bo_user li .btn.board-icon-btn,
.btn_bo_user .btn.board-icon-btn,
.sch_btn.board-icon-btn,
.btn_b01.btn.board-icon-btn,
.btn_admin.btn.board-icon-btn,
.ui-btn.board-icon-btn,
.ra0_ui_btn.board-icon-btn,
.thumb-btn.board-icon-btn,
.draw-loadb-icon-btn.board-icon-btn,
.draw-loadb-write-btn.board-icon-btn,
#bo_gall_act .btn_bo_user .btn.board-icon-btn,
#bo_gall_act .btn_bo_user .view_mode_btn.board-icon-btn,
#bo_gall_act .sch_btn.board-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--btn-primary-bg);
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: none;
    transform: none;
}

.btn_bo_user li .btn.board-icon-btn:hover,
.btn_bo_user .btn.board-icon-btn:hover,
.sch_btn.board-icon-btn:hover,
.btn_b01.btn.board-icon-btn:hover,
.btn_admin.btn.board-icon-btn:hover,
.ui-btn.board-icon-btn:hover,
.ra0_ui_btn.board-icon-btn:hover,
.thumb-btn.board-icon-btn:hover,
.draw-loadb-icon-btn.board-icon-btn:hover,
.draw-loadb-write-btn.board-icon-btn:hover,
#bo_gall_act .btn_bo_user .btn.board-icon-btn:hover,
#bo_gall_act .btn_bo_user .view_mode_btn.board-icon-btn:hover,
#bo_gall_act .sch_btn.board-icon-btn:hover {
    border-color: var(--btn-accent-bg);
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    box-shadow: none;
    transform: none;
}

.btn_bo_user li:has(.board-icon-btn) {
    width: auto;
    margin-left: 0;
    background: transparent;
    border-radius: 0;
}

.board-icon-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 30px;
}

.board-text-btn {
    padding: 0 var(--spacing-md);
    gap: var(--spacing-xs);
}

.board-icon-btn:hover,
.board-icon-btn:focus,
.board-text-btn:hover,
.board-text-btn:focus,
.board-icon-btn.is-active,
.board-text-btn.is-active {
    border-color: var(--btn-accent-bg);
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    text-decoration: none;
}

.board-icon-btn.is-secondary,
.board-text-btn.is-secondary {
    border-color: var(--btn-secondary-bg);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

.board-icon-btn.is-secondary:hover,
.board-icon-btn.is-secondary:focus,
.board-text-btn.is-secondary:hover,
.board-text-btn.is-secondary:focus {
    border-color: var(--btn-accent-bg);
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
}

.board-icon-btn.is-accent,
.board-text-btn.is-accent {
    border-color: var(--btn-accent-bg);
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
}

.board-top-search,
.board-top-search form,
.board-top-search .ui-search-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.board-top-search fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.board-top-search #bo_sch,
.board-top-search #bo_sch form {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    max-width: none;
    margin: 0;
}

.board-top-search #bo_sch form {
    flex-wrap: nowrap;
}

.board-top-search select,
.board-top-search input[type="text"],
.board-search-modal select,
.board-search-modal input[type="text"] {
    min-height: 35px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    font-family: var(--content-font-family);
}

.board-top-search input[type="text"] {
    min-width: 180px;
    padding: 0 var(--spacing-sm);
}

.board-top-search select {
    padding: 0 var(--spacing-sm);
}

.board-search-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(15, 18, 28, .42);
    backdrop-filter: blur(6px);
}

.board-search-modal.is-open {
    display: grid;
}

.board-search-modal form {
    position: relative;
    display: flex;
    align-items: center;
    width: min(560px, 100%);
    padding: var(--spacing-sm);
    border: 1px solid var(--form-border-color);
    border-radius: var(--container-border-radius);
    background: var(--form-bg-color);
    box-shadow: 0 16px 48px rgba(15, 18, 28, .18);
}

.board-search-modal select {
    width: 110px;
    border: 0;
    border-right: 1px solid var(--form-border-color);
    border-radius: 0;
    background: transparent;
}

.board-search-modal input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 var(--spacing-md);
    outline: 0;
}

.board-search-modal button[type="submit"] {
    min-height: 35px;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--btn-primary-bg);
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    cursor: pointer;
}

.board-search-close {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: calc(50% - min(280px, 50%) + 12px);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--form-text-color);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

@media (max-width: 640px) {
    .board-topbar,
    .board-top-search,
    .board-top-search form,
    .board-top-search .ui-search-box {
        width: 100%;
    }

    .board-top-search input[type="text"] {
        min-width: 0;
        flex: 1;
    }
}

.board-top-search form,
.board-top-search .ui-search-box {
    min-width: 0;
}

.board-top-search.board-top-search form,
.board-top-search.board-top-search .ui-search-box {
    justify-content: flex-start;
}

.board-top-search .sch_text {
    flex: 1 1 auto;
    min-width: 0;
}

.board-top-search .sch_category {
    flex: 0 0 auto;
    min-width: 0;
}

.board-top-search .sch_button {
    position: static !important;
    width: auto !important;
    flex: 0 0 auto;
}

.board-top-search input#stx,
.board-top-search input[type="text"],
.board-top-search .frm_input,
.board-top-search #bo_sch .frm_input,
.board-top-search select {
    width: 100%;
    max-width: none;
    height: 35px;
    min-height: 35px;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    box-shadow: none;
}

.board-top-search select {
    width: auto;
    min-width: 92px;
}

.board-top-search button[type="submit"].board-icon-btn,
.board-top-search .board-icon-btn,
.bo_sch .sch_btn.board-icon-btn,
#bo_sch .sch_btn.board-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--btn-primary-bg);
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    float: none;
    font-size: 13px;
    line-height: 1;
}

.board-top-search button[type="submit"].board-icon-btn:hover,
.board-top-search .board-icon-btn:hover,
.bo_sch .sch_btn.board-icon-btn:hover,
#bo_sch .sch_btn.board-icon-btn:hover {
    border-color: var(--btn-accent-bg);
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    transform: none;
    box-shadow: none;
}

.bo_sch .sch_input.sch_input,
#bo_sch .sch_input.sch_input {
    height: 35px;
    min-height: 35px;
    color: var(--form-text-color);
    box-shadow: none;
}
/* ------------------공통부분 끝--------------------- */