@charset "utf-8";

/* ── 폰트 ── */
@font-face {
    font-family: 'MabinogiClassicR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ── CSS 변수 ── */
:root {
    --mb-box: silver;
    --mb-shadow-light: #fff;
    --mb-shadow-middle-light: #dfdfdf;
    --mb-shadow-middle-dark: grey;
    --mb-shadow-dark: #0a0a0a;
    --mb-gra: linear-gradient(90deg, navy, #1084d0);
}

/* ── 전역 ── */
#body hr.padding { height: 0; padding: 0; }
#body .fix-layout { max-width: 1500px; }
#goto_top { display: none !important; }

.mb_board_viewer,
.mb_board_skin-basic {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* view에만 적용 */
.mb_board_viewer {
    line-height: 1.5;
}



/* ── 상단 프레임 바 ── */
.frame-top-1 {
    width: 100%;
    height: 23px;
    box-sizing: border-box;
    background: var(--mb-gra);
    padding: 0 5px;
    text-align: left;
    margin-bottom: 3px;
}
.frame-top-1 span {
    color: rgb(255, 255, 255);
    position: relative;
    margin: 0 0 auto;
    font-size: 11px;
    line-height: 23px;
}
.frame-top-1 img { line-height: 23px; }

/* 상태바 버튼 공통 */
.staus_bar_botton1,
.staus_bar_botton2 {
    width: 20px;
    height: 19px;
    overflow: hidden;
    text-indent: -999px;
    color: black;
    float: right;
    margin: 2px 0 0 0;
    font-weight: 700;
    position: relative;            /* ← 추가 */
    background-color: var(--mb-box);  /* ← 추가 */
}
.staus_bar_botton1:active,
.staus_bar_botton2:active {
    transition-duration: 0s;
    transform: translateX(1px) translateY(1px);
}
.staus_bar_botton1:before {
    content: '×';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--mb-box);
    box-shadow: inset -1px -1px var(--mb-shadow-dark), inset 1px 1px var(--mb-shadow-light),
                inset -2px -2px var(--mb-shadow-middle-dark), inset 2px 2px var(--mb-shadow-middle-light);
    line-height: 19px;
    text-indent: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-family: gulim;
}
.staus_bar_botton1:active:before {
    box-shadow: inset -1px -1px var(--mb-shadow-light), inset 1px 1px var(--mb-shadow-dark),
                inset -2px -2px var(--mb-shadow-middle-light), inset 2px 2px var(--mb-shadow-middle-dark);
}
.staus_bar_botton2:before {
    content: '?';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--mb-box);
    box-shadow: inset -1px -1px var(--mb-shadow-dark), inset 1px 1px var(--mb-shadow-light),
                inset -2px -2px var(--mb-shadow-middle-dark), inset 2px 2px var(--mb-shadow-middle-light);
    line-height: 19px;
    text-indent: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    font-family: gulim;
}
.staus_bar_botton2:active:before {
    box-shadow: inset -1px -1px var(--mb-shadow-light), inset 1px 1px var(--mb-shadow-dark),
                inset -2px -2px var(--mb-shadow-middle-light), inset 2px 2px var(--mb-shadow-middle-dark);
}


/* ── 공통 버튼 ── */
.mbng_btn {
    box-shadow: inset -1px -1px 1px #212121, inset 1px 1px 1px #4C4C4C,
                inset -2px -2px 1px #353535, inset 2px 2px 1px #4C4C4C;
    background-color: #3C3C3C !important;
    font-family: 'MabinogiClassicR';
    font-size: 11px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 2px;
    color: white;
    padding: 1px 24px;
    border-radius: 2px;
}
.mbng_btn:hover {
    box-shadow: inset -1px -1px #303030, inset 1px 1px #5D5D5D,
                inset -2px -2px #3d3d3d, inset 2px 2px #5D5D5D;
    background-color: #4B4B4B !important;
    color: white;
    text-shadow: -1px 0px 1px #dddddd, 0px 1px 1px #dddddd,
                 1px 0px 1px #dddddd, 0px -1px 1px #dddddd;
}
.mbng_btn:active {
    box-shadow: inset -1px -1px 1px #4C4C4C, inset 1px 1px 1px #212121,
                inset -2px -2px 1px #353535, inset 2px 2px 1px #212121;
    background-color: #353535 !important;
}
.mbng_btn.small { padding: 1px 10px; }
.mbng_btn.full  { width: 100%; }
.mbng_btn.point { background-color: navy !important; }

.mbng_com {
    display: flex;
    flex-direction: row;
}

/* ── 샘플 텍스트 ── */
.sample_text {
    display: block;
    line-height: 100%;
    background: rgba(255, 255, 255, 0.5);
    color: #252525;
    padding: 10px;
    border-radius: 5px;
}

/* ── 카테고리 네비 ── */
#navi_category ul { text-align: center; padding: 30px 0; }
#navi_category li { display: inline-block; padding: 5px 0; }
#navi_category li:before { display: inline-block; content: "|"; padding: 0 15px; opacity: .6; }
#navi_category li:first-child:before { display: none; content: ""; }
#navi_category #bo_cate_on { font-weight: bold; }