@charset "utf-8";

/* 사용자 화면 공통 검정/주황 테마 */
:root {
    --tb-bg: #090909;
    --tb-surface: #151515;
    --tb-surface-2: #202020;
    --tb-primary: #FE7702;
    --tb-primary-hover: #ff922f;
    --tb-text: #f5f5f5;
    --tb-muted: #aaa;
    --tb-border: #353535;
}

html, body {
    background: var(--tb-bg) !important;
    color: var(--tb-text) !important;
}
body a, body a:link, body a:visited { color: var(--tb-text); }
body a:hover, body a:focus, body a:active { color: var(--tb-primary) !important; }

#hd, #wrapper, #container, #aside, #ft,
.m-header, .m-category-bar, .m-bottom-nav, .m-side-panel {
    background: var(--tb-bg) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}

/* PC 상단 로고·확장 메뉴 영역 */
div.header,
div.header:hover,
div.header > .inner,
div.header h1.logo,
div.header .gnb,
div.header .gnb_ul,
div.header .submenu {
    background: var(--tb-bg) !important;
    border-color: var(--tb-border) !important;
}
div.header {
    border-bottom-color: var(--tb-primary) !important;
}
div.header h1.logo,
div.header h1.logo a {
    display: block;
    width: 250px;
    height: 80px;
    background: var(--tb-bg) !important;
}
div.header h1.logo img {
    display: block;
    width: 250px;
    height: 80px;
    object-fit: contain;
    object-position: left center;
}
div.gnb ul li a.tom,
div.gnb ul li.us div a {
    color: var(--tb-text) !important;
}
div.gnb ul li a.tom:hover,
div.gnb ul li.us:hover a.tom {
    color: var(--tb-primary) !important;
}
div.gnb ul li.us div a:hover {
    background: var(--tb-primary) !important;
    color: #111 !important;
}
div.header:hover div.gnb ul li.us .submenu {
    background: var(--tb-bg) !important;
    z-index: 30;
}
div.header:hover div.gnb ul li.us .submenu a,
div.header:hover div.gnb ul li.us .submenu a:link,
div.header:hover div.gnb ul li.us .submenu a:visited {
    display: block !important;
    color: var(--tb-text) !important;
    border-bottom: 1px solid var(--tb-border) !important;
}
div.header:hover div.gnb ul li.us .submenu a:first-child {
    border-top: 1px solid var(--tb-primary) !important;
}
div.header:hover div.gnb ul li.us .submenu a:hover,
div.header:hover div.gnb ul li.us .submenu a:focus {
    background: var(--tb-primary) !important;
    color: #111 !important;
}

#gnb, .gnb, .gnb_2dul, .m-menu-list, .m-user-box,
.custom-login, .latest, .lt, .new_win,
#bo_list, #bo_v, #bo_w, #bo_vc, .tbl_wrap,
.pc-card, .pc-empty-slot {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}

#gnb, .gnb { border-top-color: var(--tb-primary) !important; }
.gnb_1da:hover, .gnb_1dli_air .gnb_1da, .gnb_1dli_on .gnb_1da,
.gnb_2da:hover, .m-category-item.active,
.m-bottom-nav a.active, .m-bottom-nav a:active {
    background-color: var(--tb-primary) !important;
    color: #111 !important;
}

h1, h2, h3, h4, h5, h6, #container_title,
.pc-title-row h2, .pc-card-info h4, .cl-nick,
.m-menu-header, .m-user-nick { color: var(--tb-text) !important; }
#container_title {
    background: var(--tb-surface) !important;
    border-color: var(--tb-border) !important;
    border-left: 4px solid var(--tb-primary) !important;
}

.pc-card-info, .pc-card-bottom, .box_title,
.tbl_head01 tbody tr, .tbl_head02 tbody tr,
.tbl_frm01 td, .tbl_frm01 th {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}

.tbl_head01 thead th, .tbl_head02 thead th,
.tbl_head01 tfoot th, .tbl_head01 tfoot td,
.tbl_head02 tfoot th, .tbl_head02 tfoot td {
    background: var(--tb-surface-2) !important;
    color: var(--tb-primary) !important;
    border-color: var(--tb-border) !important;
}

/* 사이드 목록 홀짝 행 */
.list_tb,
.list_tb tbody,
.list_tb tbody tr,
.list_tb tbody .list1,
.list_tb tbody .list0 {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
}
.list_tb tbody .list1 {
    background: var(--tb-surface-2) !important;
}
.list_tb tbody td,
.list_tb tbody td a {
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}
.list_tb .m_rank_no:not(.m_rank_top),
.list_tb .m_rank_name,
.list_tb .m_rank_name span:not(.m_rank_top),
.list_tb .m_rank_point:not(.m_rank_top) {
    color: var(--tb-text) !important;
}
.list_tb tbody tr:hover,
.list_tb tbody .list1:hover {
    background: rgba(254, 119, 2, .14) !important;
}

/* 공지사항·이벤트·1:1문의 게시판 탭과 목록 */
ul.board_tab {
    border-bottom-color: var(--tb-primary) !important;
}
ul.board_tab li a,
ul.board_tab li a:link,
ul.board_tab li a:visited {
    background: var(--tb-surface-2) !important;
    color: var(--tb-muted) !important;
    border-color: var(--tb-border) !important;
}
ul.board_tab li a.tab_on,
ul.board_tab li a:hover,
ul.board_tab li a:focus {
    background: var(--tb-primary) !important;
    color: #111 !important;
    border-color: var(--tb-primary) !important;
}
#bo_list .tbl_head01 tbody tr td,
#bo_list .tbl_head01 tbody tr.bo_notice td {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border-top-color: var(--tb-border) !important;
    border-bottom-color: var(--tb-border) !important;
}
#bo_list .tbl_head01 tbody tr.bo_notice td {
    background: var(--tb-surface-2) !important;
}
#bo_list .tbl_head01 tbody td a,
#bo_list .tbl_head01 tbody td a:link,
#bo_list .tbl_head01 tbody td a:visited,
#bo_list .tbl_head01 tbody .td_num strong {
    color: var(--tb-text) !important;
}
#bo_list .tbl_head01 tbody tr.bo_notice .td_num strong,
#bo_list .tbl_head01 tbody tr.bo_notice .td_subject > a {
    color: var(--tb-primary) !important;
}
#bo_list .tbl_head01 tbody tr:hover td {
    background: rgba(254, 119, 2, .14) !important;
}

/* 포인트 전환 신청 */
.exc_form {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border: 1px solid var(--tb-border);
    padding: 18px;
    box-sizing: border-box;
}
.exc_form table,
.exc_form table th,
.exc_form table td {
    border-color: var(--tb-border) !important;
}
.exc_form table th {
    background: var(--tb-surface-2) !important;
    color: var(--tb-primary) !important;
    padding: 12px !important;
}
.exc_form table td {
    background: var(--tb-surface) !important;
    color: var(--tb-muted) !important;
    padding: 12px !important;
}
.exc_form table td input {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text) !important;
    border: 1px solid var(--tb-border) !important;
    padding: 8px 10px;
}
.exc_form .btn_submit {
    background: var(--tb-primary) !important;
    color: #111 !important;
    border: 1px solid var(--tb-primary) !important;
}
.exc_form .btn_submit:hover {
    background: var(--tb-primary-hover) !important;
}

/* 네임드스코어 외부 iframe 페이지 */
.named-score-page {
    width: 850px;
    max-width: 100%;
    margin: 20px auto;
    background: var(--tb-surface);
    border: 1px solid var(--tb-border);
    border-top: 3px solid var(--tb-primary);
    box-sizing: border-box;
    overflow: hidden;
}
.named-score-title {
    padding: 12px 16px;
    background: var(--tb-surface-2);
    color: var(--tb-primary);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--tb-border);
}
.named-score-frame {
    display: block;
    width: 100% !important;
    height: 1577px;
    border: 0;
    background: var(--tb-bg);
}
.named-score-page.is-mobile {
    width: 100%;
    margin: 0;
    border-right: 0;
    border-left: 0;
}
.named-score-page.is-mobile .named-score-frame {
    height: calc(100vh - 203px);
    min-height: 520px;
}

input:not([type="checkbox"]):not([type="radio"]), textarea, select, .frm_input {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}
input::placeholder, textarea::placeholder { color: #777 !important; }

.btn_submit, .btn_b02, .btn_admin, .cl-btn-primary,
.pc-admin-bar button, .pc-tab.active, .pg_current,
button[type="submit"], input[type="submit"] {
    background: var(--tb-primary) !important;
    border-color: var(--tb-primary) !important;
    color: #111 !important;
}
.btn_submit:hover, .btn_b02:hover, .cl-btn-primary:hover,
.pc-admin-bar button:hover, button[type="submit"]:hover,
input[type="submit"]:hover { background: var(--tb-primary-hover) !important; }

.btn_b01, .btn_cancel, .cl-btn-secondary, .cl-links a,
.pg_page, .pc-tab {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}
.pc-tabs {
    background: var(--tb-surface) !important;
    border-color: var(--tb-border) !important;
}
.pc-card-category, .pc-card-date, .pc-count,
.frm_info, .cl-auto, .m-menu-list small { color: var(--tb-muted) !important; }
.pc-card:hover {
    border-color: var(--tb-primary) !important;
    box-shadow: 0 8px 24px rgba(254, 119, 2, .18) !important;
}

/* 파트너 업체 등록/수정 모달 */
#addModal,
#editModal {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border: 1px solid var(--tb-primary) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .7) !important;
}
#addModal h3,
#editModal h3 {
    color: var(--tb-primary) !important;
    border-bottom: 1px solid var(--tb-border);
    padding-bottom: 12px;
}
#addModal label,
#editModal label {
    color: var(--tb-text) !important;
}
#addModal input:not([type="checkbox"]):not([type="radio"]),
#addModal select,
#addModal textarea,
#editModal input:not([type="checkbox"]):not([type="radio"]),
#editModal select,
#editModal textarea {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text) !important;
    border: 1px solid var(--tb-border) !important;
}
#addModal input[type="file"],
#editModal input[type="file"] {
    color: var(--tb-muted) !important;
}
#addModal input[type="file"]::file-selector-button,
#editModal input[type="file"]::file-selector-button {
    background: var(--tb-primary);
    color: #111;
    border: 0;
    border-radius: 4px;
    padding: 7px 10px;
    margin-right: 10px;
    cursor: pointer;
}
#addModal iframe,
#editModal iframe {
    background: #111 !important;
}
#currentBannerImage {
    max-height: 280px;
    object-fit: contain;
    background: #0b0b0b;
    border: 1px solid var(--tb-border);
}

/* 회원정보/비밀글 비밀번호 확인 */
#mb_confirm,
#pw_confirm {
    color: var(--tb-text) !important;
}
#mb_confirm h1,
#pw_confirm h1 {
    color: var(--tb-primary) !important;
}
#mb_confirm p,
#pw_confirm p {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}
#mb_confirm p strong,
#pw_confirm p strong {
    color: var(--tb-primary) !important;
}
#mb_confirm fieldset,
#pw_confirm fieldset {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}
#mb_confirm fieldset .frm_input,
#pw_confirm fieldset .frm_input {
    background: #111 !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-primary) !important;
}
#mb_confirm_id,
#mb_confirm label,
#pw_confirm label {
    color: var(--tb-text) !important;
}
#pw_confirm .btn_confirm a {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}

/* 아이디/비밀번호 찾기 팝업 */
#find_info {
    min-height: 100vh;
    background: var(--tb-bg) !important;
    color: var(--tb-text) !important;
}
#find_info #win_title {
    background: var(--tb-surface) !important;
    color: var(--tb-primary) !important;
    border-top-color: var(--tb-primary) !important;
    border-bottom-color: var(--tb-border) !important;
}
#find_info #info_fs {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
    padding: 20px !important;
}
#find_info #info_fs p,
#find_info #info_fs label,
#find_info #captcha_info {
    color: var(--tb-text) !important;
}
#find_info #mb_email,
#find_info #captcha_key {
    background: #111 !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-primary) !important;
}
#find_info .win_btn {
    border-top: 1px solid var(--tb-border);
}
#find_info .win_btn button {
    background: var(--tb-surface-2) !important;
    color: var(--tb-text) !important;
    border: 1px solid var(--tb-border) !important;
}

/* 출석부 플러그인 */
#atd_list,
#ajax_navi,
#ajax_calendar,
#ajax_list {
    color: var(--tb-text) !important;
}
#atd_list div.atd_info,
#atd_list div.atd_box,
#atd_list table,
#atd_list tr,
#atd_list td,
#atd_list thead th,
.calendar_conts,
.calendar_summ {
    background-color: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}
#atd_list div.atd_info td.head,
#atd_list div.atd_box td,
#atd_list div.atd_box div.no_hand,
#atd_list div.atd_box div.no_hand span,
#atd_list tbody td,
#atd_list td.info_m .contentsText {
    color: var(--tb-text) !important;
}
#atd_list div.atd_info td:not(.head),
#atd_list td.point,
#atd_list #at-timer {
    color: var(--tb-primary) !important;
}
#atd_list div.atd_box {
    border-left: 3px solid var(--tb-primary) !important;
}
#atd_list thead th {
    background: var(--tb-surface-2) !important;
    color: var(--tb-primary) !important;
}
#atd_list tbody tr:nth-child(odd) td {
    background: #121212 !important;
}
#atd_list tbody tr:nth-child(even) td {
    background: var(--tb-surface) !important;
}
#atd_list .attend_input {
    background: #111 !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-primary) !important;
}
#ajax_navi .att-btn-primary,
#ajax_navi .navi .att-btn-primary {
    background: var(--tb-primary) !important;
    color: #111 !important;
    border-color: var(--tb-primary) !important;
}
#ajax_navi .att-btn-primary font {
    color: inherit !important;
}
#ajax_navi .att-btn-primary.disabled {
    background: #303030 !important;
    color: #888 !important;
    border-color: var(--tb-border) !important;
}
.calendar_conts ul.chart {
    background: var(--tb-surface-2) !important;
    border-color: var(--tb-border) !important;
}
.calendar_conts ul.chart li dt {
    color: var(--tb-text) !important;
}
.calendar_conts ul.chart li dt.today,
.calendar_conts ul.chart li dt.regi {
    background: var(--tb-primary) !important;
    color: #111 !important;
}
.calendar_conts ul.chart li dt.off,
.calendar_summ ul.tip li,
.calendar_summ ul.tip li em,
.calendar_summ p.tip {
    color: var(--tb-muted) !important;
}
.calendar_conts ul.chart li dt.sun { color: #ff665b !important; }
.calendar_conts ul.chart li dt.sat { color: #58a6ff !important; }
#ft_copy, .m-bottom-nav {
    background: #050505 !important;
    border-color: var(--tb-border) !important;
}

/* 사용자 페이지 안내 푸터 */
div.footer {
    background: var(--tb-surface) !important;
    color: var(--tb-muted) !important;
    border-color: var(--tb-border) !important;
}
div.footer h2,
div.footer h3,
div.footer strong {
    color: var(--tb-text) !important;
}
div.footer h2 {
    border-left: 4px solid var(--tb-primary);
    padding-left: 10px;
}
div.footer h3 {
    color: var(--tb-primary) !important;
}
div.footer p,
div.footer li {
    color: var(--tb-muted) !important;
}
hr, table, th, td { border-color: var(--tb-border) !important; }

/* 로그인 폼은 화면 폭과 관계없이 동일한 어두운 배경 유지 */
#mb_login,
#mb_login form,
#mb_login #login_fs {
    background: var(--tb-surface) !important;
    color: var(--tb-text) !important;
    border-color: var(--tb-border) !important;
}
#mb_login #login_fs .login_id,
#mb_login #login_fs .login_pw,
#mb_login #login_fs label[for="login_auto_login"] {
    color: var(--tb-text) !important;
}
#mb_login #login_id,
#mb_login #login_pw {
    background: #090909 !important;
    color: var(--tb-text) !important;
    border: 1px solid var(--tb-border) !important;
}
#mb_login #login_id:focus,
#mb_login #login_pw:focus {
    border-color: var(--tb-primary) !important;
    outline: 0;
}
#mb_login #login_info {
    background: #101010 !important;
    color: var(--tb-muted) !important;
    border-color: var(--tb-border) !important;
}
#mb_login #login_info h2 {
    color: var(--tb-primary) !important;
}
#mb_login #login_info p {
    color: var(--tb-muted) !important;
}

@media (max-width: 991px) {
    body {
        background: var(--tb-bg) !important;
    }
    .m-header {
        background: #050505 !important;
        border-bottom: 2px solid var(--tb-primary) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
    }
    .m-header-logo img {
        width: auto !important;
        max-width: 190px !important;
        height: 36px !important;
        object-fit: contain;
    }
    .m-header-right a,
    .m-hamburger,
    .m-bottom-nav a {
        color: var(--tb-text) !important;
    }
    .m-hamburger:active,
    .m-header-right a:active {
        background: var(--tb-surface-2) !important;
        color: var(--tb-primary) !important;
    }

    .m-cat-nav {
        background: #0d0d0d !important;
        border-bottom: 1px solid var(--tb-border) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .35) !important;
    }
    .m-cat-item,
    .m-cat-item:visited,
    .m-cat-item p {
        color: var(--tb-text) !important;
    }
    .m-cat-item:active {
        background: var(--tb-surface-2) !important;
    }
    .m-cat-item .m-cat-icon,
    .m-cat-item:nth-child(n) .m-cat-icon {
        background: linear-gradient(145deg, var(--tb-primary), #c95700) !important;
        color: #111 !important;
        box-shadow: 0 3px 9px rgba(254, 119, 2, .3) !important;
    }

    .m-main {
        padding: 10px !important;
        background: var(--tb-bg) !important;
    }
    .m-hl-section,
    .m-score-section {
        width: 100%;
        margin: 0 0 12px !important;
        padding: 12px !important;
        overflow: hidden;
        background: var(--tb-surface) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .28) !important;
    }
    .m-hl-header,
    .m-score-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 10px;
        padding: 0 0 10px;
        color: var(--tb-text) !important;
        font-size: 15px;
        font-weight: 700;
        border-bottom: 2px solid var(--tb-primary) !important;
    }
    .m-hl-header i,
    .m-score-header i {
        color: var(--tb-primary) !important;
    }
    .m-hl-scroll {
        width: 100%;
        gap: 8px !important;
        padding: 0 0 4px !important;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }
    .m-hl-card {
        flex: 0 0 calc((100% - 8px) / 2) !important;
        width: calc((100% - 8px) / 2) !important;
        min-width: 0;
        background: var(--tb-surface-2) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 9px !important;
        scroll-snap-align: start;
    }
    .m-hl-thumb {
        background: #050505 !important;
    }
    .m-hl-play {
        background: rgba(254, 119, 2, .92) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    }
    .m-hl-play::before {
        border-left-color: #111 !important;
    }
    .m-hl-title {
        min-height: 3.5em !important;
        color: var(--tb-text) !important;
        font-size: 12px !important;
    }
    .m-main-iframe {
        width: 100% !important;
        height: 600px !important;
        margin: 0 !important;
        background: #050505 !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .m-bottom-nav {
        background: #050505 !important;
        border-top: 1px solid var(--tb-primary) !important;
        box-shadow: 0 -3px 12px rgba(0, 0, 0, .45) !important;
    }
    .m-bottom-nav a:active,
    .m-bottom-nav a.active {
        color: var(--tb-primary) !important;
        background: transparent !important;
    }

    /* 모바일 좌측 오프캔버스 메뉴 */
    .m-offcanvas,
    .m-offcanvas.show,
    .m-offcanvas.showing,
    .m-offcanvas.hiding {
        width: min(84vw, 320px) !important;
        max-width: 320px !important;
        background: #0b0b0b !important;
        color: var(--tb-text) !important;
        border-right: 1px solid var(--tb-primary) !important;
        box-shadow: 8px 0 24px rgba(0, 0, 0, .55) !important;
    }
    .m-offcanvas .offcanvas-header {
        min-height: 65px;
        padding: 14px 18px !important;
        background: #050505 !important;
        border-bottom: 2px solid var(--tb-primary) !important;
    }
    .m-offcanvas .offcanvas-title img {
        display: block;
        width: auto !important;
        max-width: 190px !important;
        height: 34px !important;
        object-fit: contain;
    }
    .m-offcanvas .btn-close {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 8px;
        background-color: var(--tb-surface-2) !important;
        background-image: none !important;
        color: var(--tb-text) !important;
        filter: none !important;
        opacity: 1 !important;
    }
    .m-offcanvas .btn-close::before {
        content: "\00d7";
        display: block;
        color: var(--tb-text);
        font-family: Arial, sans-serif;
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
    }
    .m-offcanvas .btn-close:focus {
        box-shadow: 0 0 0 2px rgba(254, 119, 2, .4) !important;
    }
    .m-offcanvas .offcanvas-body {
        padding: 0 !important;
        background: #0b0b0b !important;
        color: var(--tb-text) !important;
        scrollbar-color: var(--tb-primary) #111;
    }
    .m-offcanvas .m-user-box {
        margin: 0 !important;
        padding: 16px 18px !important;
        background: var(--tb-surface) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--tb-border) !important;
    }
    .m-offcanvas .m-user-nick,
    .m-offcanvas .m-user-nick i {
        color: var(--tb-text) !important;
    }
    .m-offcanvas .m-user-nick i {
        color: var(--tb-primary) !important;
    }
    .m-offcanvas .m-user-actions a,
    .m-offcanvas .m-btn-login,
    .m-offcanvas .m-btn-register {
        background: var(--tb-surface-2) !important;
        color: var(--tb-text) !important;
        border: 1px solid var(--tb-border) !important;
    }
    .m-offcanvas .m-user-actions a:first-child,
    .m-offcanvas .m-btn-login {
        background: var(--tb-primary) !important;
        color: #111 !important;
        border-color: var(--tb-primary) !important;
    }
    .m-offcanvas .m-menu-list {
        margin: 0 !important;
        padding: 0 !important;
        background: #0b0b0b !important;
    }
    .m-offcanvas .m-menu-list > li {
        background: transparent !important;
        border-bottom: 1px solid var(--tb-border) !important;
    }
    .m-offcanvas .m-menu-list li > a,
    .m-offcanvas .m-menu-list li > .m-menu-header {
        min-height: 52px;
        padding: 14px 18px !important;
        background: transparent !important;
        color: var(--tb-text) !important;
    }
    .m-offcanvas .m-menu-list li > a i:first-child,
    .m-offcanvas .m-menu-list li > .m-menu-header > i:first-child,
    .m-offcanvas .m-menu-list .m-menu-header .arrow {
        color: var(--tb-primary) !important;
    }
    .m-offcanvas .m-menu-list li > a:active,
    .m-offcanvas .m-menu-list li > a:hover,
    .m-offcanvas .m-menu-list li > .m-menu-header:active,
    .m-offcanvas .m-menu-list li.open > .m-menu-header {
        background: var(--tb-surface-2) !important;
        color: var(--tb-primary) !important;
    }
    .m-offcanvas .m-menu-list .m-menu-sub {
        padding: 5px 0 !important;
        background: #050505 !important;
        border-top: 1px solid #292929;
    }
    .m-offcanvas .m-menu-list .m-menu-sub a,
    .m-offcanvas .m-menu-list .m-menu-sub a:visited {
        padding: 11px 18px 11px 51px !important;
        background: #050505 !important;
        color: var(--tb-muted) !important;
        border-left: 3px solid transparent;
    }
    .m-offcanvas .m-menu-list .m-menu-sub a:hover,
    .m-offcanvas .m-menu-list .m-menu-sub a:active {
        background: #171717 !important;
        color: var(--tb-primary) !important;
        border-left-color: var(--tb-primary) !important;
    }
    .offcanvas-backdrop.show {
        background: #000 !important;
        opacity: .78 !important;
    }

    /* 모바일 로그인 */
    #mb_login {
        width: 100% !important;
        max-width: 480px;
        margin: 8px auto 20px !important;
        padding: 18px 14px !important;
        overflow: hidden;
        background: var(--tb-surface) !important;
        color: var(--tb-text) !important;
        border: 1px solid var(--tb-border) !important;
        border-top: 3px solid var(--tb-primary) !important;
        border-radius: 12px;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .32);
    }
    #mb_login h1 {
        margin: 0 0 18px !important;
        padding: 0 0 13px !important;
        color: var(--tb-text) !important;
        font-size: 20px !important;
        text-align: center;
        border-bottom: 1px solid var(--tb-border);
    }
    #mb_login #login_frm {
        position: static !important;
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 0 !important;
    }
    #mb_login #login_frm .frm_input,
    #mb_login #login_id,
    #mb_login #login_pw {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        background: #090909 !important;
        color: var(--tb-text) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        line-height: 46px !important;
        box-shadow: none !important;
    }
    #mb_login #login_frm .frm_input:focus {
        border-color: var(--tb-primary) !important;
        box-shadow: 0 0 0 2px rgba(254, 119, 2, .18) !important;
        outline: 0;
    }
    #mb_login #login_frm .frm_input::placeholder {
        color: #777 !important;
    }
    #mb_login .btn_submit {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        margin: 3px 0 0 !important;
        padding: 0 !important;
        background: var(--tb-primary) !important;
        color: #111 !important;
        border: 1px solid var(--tb-primary) !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 700;
        line-height: 44px !important;
    }
    #mb_login #login_frm > div {
        padding: 2px 0 0 !important;
        color: var(--tb-muted) !important;
        text-align: left !important;
    }
    #mb_login #login_auto_login {
        width: 16px;
        height: 16px;
        margin: 0 6px 0 0;
        accent-color: var(--tb-primary);
        vertical-align: -3px;
    }
    #mb_login #login_frm label {
        color: var(--tb-muted) !important;
    }
    #mb_login #login_fs {
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--tb-text) !important;
        border: 0 !important;
    }
    #mb_login #login_fs legend {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0);
    }
    #mb_login #login_fs .login_id,
    #mb_login #login_fs .login_pw {
        position: static !important;
        display: block !important;
        margin: 0 !important;
        color: var(--tb-muted) !important;
        font-size: 12px;
        letter-spacing: 0 !important;
    }
    #mb_login #login_fs .frm_input {
        margin: 0 0 2px !important;
    }
    #mb_login #login_fs #login_auto_login {
        grid-row: 8;
        justify-self: start;
        margin-top: 3px;
    }
    #mb_login #login_fs label[for="login_auto_login"] {
        grid-row: 8;
        align-self: center;
        justify-self: start;
        margin-left: 24px !important;
        color: var(--tb-muted) !important;
        font-size: 12px;
    }
    #mb_login section,
    #mb_login #login_info {
        margin: 18px 0 0 !important;
        padding: 15px !important;
        background: #101010 !important;
        color: var(--tb-muted) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 9px;
    }
    #mb_login section h2,
    #mb_login #login_info h2 {
        margin: 0 !important;
        color: var(--tb-primary) !important;
        font-size: 15px !important;
    }
    #mb_login section p,
    #mb_login #login_info p {
        margin: 0 !important;
        padding: 10px 0 13px !important;
        color: var(--tb-muted) !important;
        font-size: 12px;
        line-height: 1.65 !important;
    }
    #mb_login section > div,
    #mb_login #login_info > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        text-align: center !important;
    }
    #mb_login section .btn01,
    #mb_login section .btn02,
    #mb_login #login_info .btn01,
    #mb_login #login_info .btn02 {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 7px !important;
        background: var(--tb-surface-2) !important;
        color: var(--tb-text) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 7px !important;
        font-size: 12px;
        line-height: 1.3;
    }
    #mb_login section .btn01,
    #mb_login #login_info .btn01 {
        border-color: var(--tb-primary) !important;
        color: var(--tb-primary) !important;
    }
    #mb_login .btn_confirm {
        margin: 12px 0 0 !important;
        text-align: center;
    }
    #mb_login .btn_confirm a {
        display: inline-block;
        padding: 8px 12px;
        color: var(--tb-muted) !important;
        font-size: 12px;
    }

    /* 모바일 커뮤니티/게시판 목록 */
    #bo_list {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }
    #bo_list .bo_fx {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        margin: 0 0 8px !important;
        padding: 8px 4px !important;
        color: var(--tb-muted) !important;
    }
    #bo_list #bo_list_total,
    #bo_list .btn_bo_user,
    #bo_list .btn_bo_adm {
        float: none !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
    #bo_list .tbl_head01 table {
        display: block !important;
        width: 100% !important;
    }
    #bo_list .tbl_head01 tbody {
        display: block !important;
        width: 100% !important;
    }
    #bo_list .tbl_head01 tbody tr {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100% !important;
        min-height: 54px;
        margin: 0 0 7px !important;
        padding: 10px 12px !important;
        overflow: hidden;
        background: var(--tb-surface) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 8px !important;
        box-sizing: border-box;
        box-shadow: none !important;
    }
    #bo_list .tbl_head01 tbody td {
        display: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    #bo_list .tbl_head01 tbody td.td_chk {
        display: block !important;
        flex: 0 0 auto;
        order: 0;
    }
    #bo_list .tbl_head01 tbody td.td_subject {
        display: block !important;
        flex: 1 1 auto;
        order: 1;
        overflow: hidden;
        color: var(--tb-text) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.45;
    }
    #bo_list .tbl_head01 tbody td.td_subject a {
        display: block !important;
        overflow: hidden;
        color: var(--tb-text) !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #bo_list .tbl_head01 tbody td.td_subject img {
        display: inline-block !important;
        width: auto !important;
        max-height: 13px;
        margin: 0 0 0 3px !important;
        vertical-align: -1px;
    }
    #bo_list .tbl_head01 tbody td.td_date,
    #bo_list .tbl_head01 tbody td.td_datetime {
        display: block !important;
        flex: 0 0 auto;
        order: 2;
        color: var(--tb-muted) !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    #bo_list .tbl_head01 tbody tr.bo_notice {
        border-left: 3px solid var(--tb-primary) !important;
    }
    #bo_list .tbl_head01 tbody tr.bo_notice td.td_subject a {
        color: var(--tb-primary) !important;
    }
    #bo_sch {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 10px !important;
        background: var(--tb-surface) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 8px;
        box-sizing: border-box;
    }
    #bo_sch form {
        display: grid;
        grid-template-columns: 94px minmax(0, 1fr) auto;
        gap: 6px;
        width: 100%;
    }
    #bo_sch select,
    #bo_sch .frm_input,
    #bo_sch .btn_submit {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 7px 9px !important;
        font-size: 13px !important;
        box-sizing: border-box;
    }
    #bo_sch .btn_submit {
        width: auto !important;
        background: var(--tb-primary) !important;
        color: #111 !important;
    }

    /* 모바일 커뮤니티 게시글 상세 */
    #bo_v {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px !important;
        padding: 0 0 12px !important;
        overflow: hidden;
        background: var(--tb-surface) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 9px;
        box-sizing: border-box;
    }
    #bo_v > header {
        padding: 12px 10px !important;
        background: var(--tb-surface) !important;
        border-top: 2px solid var(--tb-primary) !important;
        border-bottom: 1px solid var(--tb-border) !important;
    }
    #bo_v #bo_v_title {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--tb-text) !important;
        font-size: 17px !important;
        line-height: 1.45 !important;
        word-break: break-word;
    }
    #bo_v #bo_v_info {
        padding: 9px 10px !important;
        background: #101010 !important;
        color: var(--tb-muted) !important;
        border-bottom: 1px solid var(--tb-border) !important;
        font-size: 11px !important;
        line-height: 1.6;
    }
    #bo_v #bo_v_info strong {
        color: #ddd !important;
        font-size: inherit !important;
    }
    #bo_v #bo_v_top,
    #bo_v #bo_v_bot {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        margin: 0 !important;
        padding: 8px 10px !important;
        box-sizing: border-box;
    }
    #bo_v #bo_v_top ul,
    #bo_v #bo_v_bot ul,
    #bo_v #bo_v_top li,
    #bo_v #bo_v_bot li {
        float: none !important;
        margin: 0 !important;
    }
    #bo_v #bo_v_top ul,
    #bo_v #bo_v_bot ul {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    #bo_v #bo_v_top a,
    #bo_v #bo_v_bot a {
        display: inline-flex !important;
        align-items: center;
        min-height: 36px;
        padding: 7px 10px !important;
        background: var(--tb-surface-2) !important;
        color: var(--tb-text) !important;
        border: 1px solid var(--tb-border) !important;
        border-radius: 6px;
    }
    #bo_v #bo_v_atc {
        width: 100% !important;
        min-height: 120px !important;
        margin: 0 !important;
        padding: 14px 10px !important;
        overflow: hidden;
        background: #101010 !important;
        color: var(--tb-text) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }
    #bo_v #bo_v_con {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        color: var(--tb-text) !important;
        font-size: 14px !important;
        line-height: 1.75 !important;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }
    #bo_v #bo_v_con a {
        color: var(--tb-primary) !important;
    }
    #bo_v #bo_v_con img,
    #bo_v #bo_v_img img {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 8px auto !important;
    }
    #bo_vc,
    #bo_vc_w {
        width: 100% !important;
        max-width: 100% !important;
        background: var(--tb-surface) !important;
        color: var(--tb-text) !important;
        border-color: var(--tb-border) !important;
        box-sizing: border-box;
    }
    #bo_vc a,
    #bo_vc p,
    #bo_vc strong,
    #bo_vc_w h2,
    #bo_vc_w label {
        color: var(--tb-text) !important;
    }
    #bo_vc_w textarea,
    #bo_vc_w .frm_input {
        width: 100% !important;
        max-width: 100% !important;
        background: #111 !important;
        color: var(--tb-text) !important;
        border-color: var(--tb-primary) !important;
        box-sizing: border-box;
    }

    /* 모바일 작성자 사이드뷰 메뉴 */
    .sv_wrap {
        display: inline-block !important;
        position: relative !important;
        max-width: 100%;
    }
    .sv_wrap > .sv {
        display: none !important;
        z-index: 10050 !important;
        width: min(210px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 120px);
        margin: 0 !important;
        padding: 7px !important;
        overflow-x: hidden;
        overflow-y: auto;
        background: #111 !important;
        border: 1px solid var(--tb-primary) !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, .7) !important;
        box-sizing: border-box;
    }
    .sv_wrap > .sv.sv_on {
        display: block !important;
        position: fixed !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        height: auto !important;
        transform: translate(-50%, -50%);
    }
    .sv_wrap > .sv a,
    .sv_wrap > .sv a:link,
    .sv_wrap > .sv a:visited {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 40px;
        margin: 0 !important;
        padding: 8px 11px !important;
        background: #181818 !important;
        color: var(--tb-text) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--tb-border) !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        text-align: left;
        white-space: normal;
        box-sizing: border-box;
    }
    .sv_wrap > .sv a:first-child {
        border-radius: 6px 6px 0 0 !important;
    }
    .sv_wrap > .sv a:last-child {
        border-bottom: 0 !important;
        border-radius: 0 0 6px 6px !important;
    }
    .sv_wrap > .sv a:hover,
    .sv_wrap > .sv a:focus,
    .sv_wrap > .sv a:active {
        background: var(--tb-primary) !important;
        color: #111 !important;
    }
    .m-side-overlay { background: rgba(0, 0, 0, .78) !important; }
}