@charset "utf-8";

/* ── 목록 레이아웃 ── */
.mb_board_skin-basic {
    position: relative;
    width: 98%;
    height: 95vh;
    max-height: 980px;
    margin: 0 auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    background: var(--mb-box);
    box-shadow: inset -1px -1px var(--mb-shadow-dark),
                inset 1px 1px var(--mb-shadow-middle-light),
                inset -2px -2px var(--mb-shadow-middle-dark),
                inset 2px 2px var(--mb-shadow-light);
}

.swiper-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.swiper-container_2 {
    background-image: url("img/bg.webp");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: auto;
    flex: 1;
    min-height: 0;
    position: relative;
    border: 2px groove transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.swiper-container h2 { padding: 45px 0 20px; }

/* ── 목록 아이템 ── */
.swiper-container li.bo-list {
    align-items: center;
    display: flex;
    position: relative;
    padding: 4px;
    text-align: center;
    width: 350px !important;
    flex-direction: row;
    box-shadow: rgb(155 155 155) 0px 0px 0px 1px, rgb(70, 70, 70) 0px 0px 0px 3px;
    border-radius: 1px;
    color: white;
    text-shadow: -2px 0px 2px black, 0px 2px 2px black,
                 2px 0px 2px black, 0px -2px 2px black;
    font-family: 'MabinogiClassicR';
    font-weight: 100;
    font-size: 11px;
}
.swiper-container li.bo-list:hover {
    background-color: #BDBDBD;
    text-shadow: -2px 0px 2px #dddddd, 0px 2px 2px #dddddd,
                 2px 0px 2px #dddddd, 0px -2px 2px #dddddd;
}

.swiper-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.2);
    align-items: center;
    padding: 3px;
    box-shadow: rgb(173 173 173) 0px 0px 0px 1px, rgb(113 113 113) 0px 0px 0px 3px;
    border-radius: 1px;
    overflow: auto;
}

.swiper-container li a {
    display: block;
    flex-direction: column;
    align-items: center;
    color: white;
}
.swiper-container li a.ui-thumb {
    overflow: hidden;
    box-shadow: rgb(145, 145, 145) 0px 0px 0px 2px, rgb(0, 0, 0) 0px 0px 0px 3px;
    background-color: white;
}
.swiper-container li a.ui-profile {
    text-align: left;
    padding: 10px;
}
.swiper-container li a.ui-profile .name,
.swiper-container li a.ui-profile .type {
    display: block;
    line-height: 130%;
    word-break: break-all;
}
.swiper-container li a.ui-profile .name { font-size: 13px; font-weight: 100; }

.swiper-container li.swiper-slide {
    overflow: hidden;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
    line-height: 150%;
}

/* swiper 버튼 */
.mb_board_skin-basic .swiper-button-prev,
.mb_board_skin-basic .swiper-container-rtl .swiper-button-next,
.mb_board_skin-basic .swiper-button-next,
.mb_board_skin-basic .swiper-container-rtl .swiper-button-prev {
    background-image: none;
    font-size: 44px;
    line-height: 44px;
}
.mb_board_skin-basic .swiper-button-prev,
.mb_board_skin-basic .swiper-container-rtl .swiper-button-next { left: 10px; }
.mb_board_skin-basic .swiper-button-next,
.mb_board_skin-basic .swiper-container-rtl .swiper-button-prev { right: 10px; }


.mbng_btn_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 20px 0;
}

.mbng_btn_box .mbng_btn {
    display: inline-flex;
    flex: 0 0 auto;
}

.swiper-container_2 .mbng_btn_box {
    flex-direction: row !important;
    align-self: center;
}


/* ── 반응형 ── */
@media all and (max-width: 640px) {
    .mb_board_category { display: block; width: 100%; box-sizing: border-box; padding: 0 10px; }
    .mb_board_category select { width: 100%; }
    .bo_fx { display: block; width: 100%; box-sizing: border-box; padding: 20px 10px !important; }
    .bo_fx a { display: block; width: 100%; }
    .mb_board_skin-basic .swiper-button-prev,
    .mb_board_skin-basic .swiper-container-rtl .swiper-button-next { left: 0; }
    .mb_board_skin-basic .swiper-button-next,
    .mb_board_skin-basic .swiper-container-rtl .swiper-button-prev { right: 0; }

    .swiper-container li.bo-list { width: 250px !important; }
}