/* =============================================
   꽁타 그누보드 테마 - default.css
   원본 꽁타 Vue 화면의 밝은 배경/주황 포인트를 기준으로 조정
   ============================================= */

:root {
    --bg:           #f5f5f5;
    --bg-card:      #ffffff;
    --bg-card2:     #f7f7f7;
    --bg-header:    #ffffff;
    --accent:       #feb16e;
    --accent-hover: #fb7800;
    --accent2:      #5576a3;
    --accent-dim:   rgba(254,177,110,0.22);
    --accent-border:rgba(254,177,110,0.65);
    --text:         #333333;
    --text-dim:     #666666;
    --text-muted:   #999999;
    --border:       #e0e0e0;
    --red:          #dc2626;
    --gold:         #e8c856;
    --radius-sm:    4px;
    --radius:       6px;
    --radius-lg:    10px;
    --left-w:       345px;
    --max-w:        1290px;
    --header-h:     76px;
    --mobile-top-h: 64px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', '맑은 고딕', sans-serif;
    line-height: 1.5;
    min-width: 320px;
}
body.bm-mobile-topbar-fixed { padding-top: var(--header-h); }
a { color: var(--text); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); }
img { max-width: 100%; vertical-align: middle; }
ul { list-style: none; }
input, button, select, textarea { font-family: inherit; font-size: inherit; }
.sound_only { position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden; }

/* ── 팝업 레이어 ── */
#hd_pop {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    margin: 0 !important;
    z-index: 3000 !important;
    pointer-events: none;
}
#hd_pop > h2,
#hd_pop > p { display: none; }
#hd_pop .hd_pops {
    position: absolute !important;
    pointer-events: auto;
    max-width: calc(100vw - 20px);
    background:#000;
}
#hd_pop .hd_pops .hd_pops_con {
    max-width: 100%;
    overflow: auto;
}
#hd_pop .hd_pops img {
    display:block;
    width:100%;
    height:auto;
}
#hd_pop .hd_pops .hd_pops_footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0;
    width:100%;
    padding:10px 0;
    background:#000;
    color:#fff;
}
#hd_pop .hd_pops .hd_pops_footer button {
    margin:0 !important;
    border:0;
    background:#000;
    color:#fff;
    font-size:13px;
    line-height:1.2;
    padding:12px 14px;
    white-space:nowrap;
}
#hd_pop .hd_pops .hd_pops_footer .hd_pops_reject {
    flex:1 1 auto;
    text-align:left;
}
#hd_pop .hd_pops .hd_pops_footer .hd_pops_close {
    flex:0 0 auto;
    background:#000;
    position:static;
    border-left:1px solid rgba(255,255,255,.16);
}

@media (max-width: 1100px) {
    #hd_pop .hd_pops {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 !important;
    }
    #hd_pop .hd_pops .hd_pops_con {
        width: 100% !important;
        max-height: calc(100vh - 90px);
        overflow: auto;
    }
    #hd_pop .hd_pops .hd_pops_footer {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    #hd_pop .hd_pops .hd_pops_footer button {
        min-height: 0;
        line-height: 1.2;
        padding: 10px 10px;
        display: block;
        font-size: 12px;
    }
    #hd_pop .hd_pops .hd_pops_footer .hd_pops_reject {
        text-align: left;
        white-space: normal;
    }
    #hd_pop .hd_pops .hd_pops_footer .hd_pops_close {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
}

/* ── 로그인 상태 메세지 ── */
#hd_login_msg {
    background: rgba(18,213,211,0.08);
    color: var(--accent);
    text-align: right;
    padding: 3px 16px;
    font-size: 12px;
    border-bottom: 1px solid var(--accent-border);
}
#hd_login_msg a { color: var(--accent); margin-left: 8px; }

/* =============================================
   HEADER
   ============================================= */
#bm-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── 상단바 ── */
#bm-topbar {
    border-bottom: 0;
}
#bm-topbar .bm-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 45px;
    display: flex;
    align-items: center;
    height: var(--header-h);
    gap: 0;
}

/* 로고 */
.bm-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: clamp(20px, 5vw, 210px);

    height: 100%;
}
.bm-logo img { height: 55px; width: 160px; object-fit: contain; }
.bm-logo-text {
    font-size: 20px;
    font-weight: 900;
    color: var(--accent2);
    letter-spacing: 0;
}

/* ── GNB 네비게이션 ── */
#bm-gnb {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: var(--header-h);
    overflow: visible;
    scrollbar-width: none;
    justify-content: space-between;
}
#bm-gnb::-webkit-scrollbar { display: none; }

.bm-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 0;
}
.bm-menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4px, 1.5vw, 20px);
    font-size: clamp(20px, 1.54vw, 22px);
    font-weight: 900;
    line-height: 1.75rem;
    color: #333333;
    white-space: nowrap;
    height: 100%;
    width: auto;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.bm-menu-link:hover {
    color: #ff8c00;
    border-bottom-color: var(--accent);
}
/* 현재 활성 메뉴 - 그라디언트 텍스트 (실제 사이트 동일) */
.bm-menu-item.active .bm-menu-link,
.bm-menu-item.gradient .bm-menu-link {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    animation: none;
    color: #ff8c00;
    border-bottom-color: var(--accent);
}
.bm-menu-item.partner-highlight .bm-menu-link {
    background: linear-gradient(90deg, #ff8c00 0%, #feb16e 50%, #5576a3 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ff8c00;
    text-shadow: none;
    filter: none;
    animation: partnerBreath 2.8s ease-in-out infinite;
    border-bottom-color: transparent;
}
@keyframes menuShimmer {
    0%   { background-position: 0% 0; }
    50%  { background-position: 100% 0; }
    100% { background-position: 200% 0; }
}
@keyframes partnerMenuFlow {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes partnerBreath {
    0%, 100% {
        opacity: 0.92;
        text-shadow: none;
    }
    50% {
        opacity: 1;
        text-shadow: none;
    }
}

/* 드롭다운 서브메뉴 */
.bm-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #FEC796;
    border: 2px solid var(--accent);
    border-radius: 16px;
    min-width: 156px;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    overflow: hidden;
    padding: 8px;
}
.bm-menu-item:hover .bm-submenu,
.bm-menu-item:focus-within .bm-submenu { display: none; }
.bm-submenu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: 16.5px;
    font-weight: 700;
    color: #2f2f2f;
    white-space: nowrap;
    text-align: center;
    border-bottom: 0;
    border-radius: 10px;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.bm-submenu-link:last-child { margin-bottom: 0; }
.bm-submenu-link:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #FD8C25 0%, #FB7800 100%);
    box-shadow: 0 7px 16px rgba(251, 120, 0, 0.28);
    transform: translateY(-1px);
}

/* ── 모바일 로고/버튼 행 ── */
#bm-mobile-top {
    display: none;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    max-height: 64px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
#bm-mobile-top.hidden {
    max-height: 0;
    opacity: 0;
}
.bm-mobile-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    min-height: 64px;
}
.bm-logo-mobile img { height: 50px; width: 160px; object-fit: contain; }
.bm-mobile-top-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── 데스크탑 GNB 우측 여백 ── */
.bm-gnb-spacer { flex: 1; }

/* ── 우측 로그인/회원가입 버튼 ── */
.bm-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 8px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
    height: 100%;
}
.bm-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.bm-btn-outline:hover { background: var(--accent); color: #111; }
.bm-btn-accent {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--accent);
    border-radius: var(--radius-sm);
    color: #111;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.bm-btn-accent:hover { opacity: 0.85; color: #111; }

/* ── 이벤트 티커 ── */
#bm-ticker {
    background: transparent;
    border-bottom: 0;
    overflow: hidden;
}
#bm-ticker .bm-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    height: 39px;
    box-sizing: border-box;
    background: #fffaf4;
    border: 1px solid var(--accent);
    border-top: 0;
    box-shadow: 0 1px 0 rgba(254,177,110,0.22);
}
.bm-ticker-label {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    background: var(--accent);
    color: #111;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0 14px;
    height: 100%;
    white-space: nowrap;
    border-right: 1px solid rgba(17,17,17,0.08);
}
.bm-ticker-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
    position: relative;
}
.bm-ticker-track {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    width: max-content;
    animation: ticker-scroll var(--bm-ticker-duration-desktop, 90s) linear infinite;
    will-change: transform;
}
.bm-ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}
.bm-ticker-item {
    display: inline-flex;
    align-items: center;
    padding: 0 24px;
    font-size: 17.25px;
    color: #333333;
    font-weight: 600;
    flex-shrink: 0;
}
.bm-ticker-item:hover { color: var(--accent-hover); }
.bm-ticker-dot { color: var(--accent-hover); margin-right: 8px; font-size: 10px; }

@media (max-width: 1100px) {
    .bm-ticker-track {
        animation-duration: var(--bm-ticker-duration-mobile, 60s);
    }
}

/* =============================================
   전체 페이지 래퍼 (헤더 제외 전체)
   ============================================= */
#bm-page {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 10px 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: calc(100vh - var(--header-h) - 40px);
}

/* ── 좌측 사이드바 ── */
#bm-left {
    width: var(--left-w);
    min-width: var(--left-w);
    flex-shrink: 0;
}
.bm-section { margin-bottom: 8px; }

/* ── 메인 컨텐츠 ── */
#bm-content {
    flex: 1;
    min-width: 0;
}

#bm-page.bm-page-reference-board {
    padding-top: 8px;
}

#bm-content.bm-content-reference-board {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bm-content-tabs {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 4px;
}

.bm-content-tabs-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bm-content-tabs-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.bm-content-tabs-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#bm-content .bm-content-tab {
    align-items: center;
    background: #ffffff;
    border: 2px solid #FEB16E;
    border-radius: 999px;
    color: #FFA048 !important;
    display: inline-flex;
    font-size: 20px;
    font-weight: 800;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    text-align: center;
    white-space: nowrap;
    flex: 1 1 0;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: 0 3px 0 rgba(254, 177, 110, 0.24), 0 1px 6px rgba(0, 0, 0, 0.06);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

#bm-content .bm-content-tab:hover,
#bm-content .bm-content-tab:focus {
    background: linear-gradient(180deg, #FD8C25 0%, #FB7800 100%);
    border-color: #FB7800;
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 18px rgba(251, 120, 0, 0.34);
    transform: translateY(-2px);
    filter: saturate(1.05);
}

#bm-content .bm-content-tab.active {
    border-color: #FEB16E;
    background: linear-gradient(180deg, #FEB16E 0%, #FDA65B 100%);
    box-shadow: 0 8px 16px rgba(254, 177, 110, 0.32);
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#bm-content .bm-content-tab.active:hover,
#bm-content .bm-content-tab.active:focus {
    background: linear-gradient(180deg, #FD8C25 0%, #FB7800 100%);
    border-color: #FB7800;
    color: #ffffff !important;
    box-shadow: 0 11px 20px rgba(251, 120, 0, 0.36);
    transform: translateY(-2px);
}

#bm-content .bm-content-tab:focus-visible {
    outline: 2px solid #FD8C25;
    outline-offset: 2px;
}

.bm-content-tab.is-empty {
    cursor: default;
    opacity: 0.65;
}

/* =============================================
   BOX (카드) - 좌측 사이드 섹션 공통
   ============================================= */
/* 카드 - primary */
.bm-card-primary {
    background: #ffffff;
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* 카드 - accent */
.bm-card-accent {
    background: #ffffff;
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* 뚜껑 헤더 스타일 (레퍼런스 동일) */
.bm-box-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 4px 12px;
    background: var(--accent);
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    text-align: center;
}
.bm-box-title-inner {
    position: relative;
    top: 3px;
    left: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.bm-box-title-text {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* 뚜껑 아래 본문 (accent 테두리) */
.bm-box-body {
    border: 2px solid var(--accent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}
.bm-box-body-list {
    padding: 8px 0;
}
.bm-box-body-fm {
    padding: 16px;
}
.bm-box-body-event {
    min-height: 156px;
}
.bm-box-body-rank-fixed {
    min-height: 366px;
}
.bm-box-body-fm-fixed {
    min-height: 500px;
}

/* ── 로그인 박스 (비로그인) ── */
.bm-login-form-wrap { padding: 14px; }
.bm-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 8px;
    display: block;
}
.bm-input:focus { border-color: var(--accent); }
.bm-login-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.bm-btn-login,
.bm-btn-register {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}
.bm-btn-login:hover,
.bm-btn-register:hover { opacity: 0.85; color: #ffffff; }

/* ── 로그인 박스 (로그인 후) ── */
.bm-logined-wrap { padding: 10px 12px; }
.bm-logined-row {
    display: flex;
    align-items: center;
    gap: 27px;
}
.bm-logined-level-badge {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bm-logined-level-icon {
    width: 41px;
    height: 41px;
    object-fit: contain;
    display: block;
}
.bm-logined-info {
    flex: 1;
    min-width: 0;
}
.bm-logined-nick-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    line-height: 1.1;
}
.bm-logined-nick-link:hover { color: #ff8c00; }
.bm-logined-info-icon {
    color: var(--accent);
    font-size: 12px;
}
.bm-logined-meta {
    margin-top: 3px;
    font-size: 12px;
    color: #333333;
    font-weight: 700;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}
.bm-logined-meta-name {
    color: #333333;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bm-logined-meta-level {
    color: #ff4d4f;
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
}
.bm-logined-point {
    flex-shrink: 0;
    font-size: 15.6px;
    font-weight: 700;
    color: #333333;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}
.bm-logined-point-main {
    display:flex;
    align-items:center;
    gap:4px;
}
.bm-logined-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff 0%, #dff7ff 100%);
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.bm-logined-admin-btn:hover {
    color: #0f172a;
    opacity: 0.92;
}
.bm-logined-point-lp {
    font-size: 11px;
    font-weight: 500;
    color: #8a8a8a;
    line-height: 1;
}
.bm-logined-point-coin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    background: radial-gradient(circle at 35% 35%, #fff5b8 0%, #f7d74d 38%, #d4a514 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.18);
    flex-shrink: 0;
}
.bm-logined-logout {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    color: rgba(255,255,255,.9);
    font-size: 18px;
    transition: color 0.2s, border-color 0.2s, background .2s;
}
.bm-logined-logout:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.06); }
.bm-logined-progress-wrap {
    margin-top: 10px;
}
.bm-logined-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: rgba(255,255,255,.92);
    margin-bottom: 6px;
}
.bm-logined-progress-bar {
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    overflow: hidden;
}
.bm-logined-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #feb16e 0%, #5576a3 100%);
}

/* ── 탭 (채팅/경기순위) - 레퍼런스 동일 ── */
.bm-tab-header {
    display: flex;
    width: 100%;
    background: #ffffff;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: visible;
}
.bm-tab-btn {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 6px;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}
.bm-tab-btn.active {
    color: var(--accent);
    border-top-color: var(--accent);
    border-left-color: var(--accent);
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
}
.bm-tab-btn:hover { color: #ffffff; }
.bm-tab-body {
    width: 100%;
    margin: 0;
    border: 2px solid var(--accent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}
.bm-tab-panel { display: none; }
.bm-tab-panel.active { display: block; }
.bm-rank-iframe {
    width: 100%;
    height: 1000px;
    display: block;
    border: none;
}

/* ── 텔레그램 배너 ── */
.bm-tg-link { display: block; }
.bm-tg-img {
    width: 100%;
    display: block;
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
}
.bm-tg-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: linear-gradient(135deg, rgba(0,136,204,0.15), rgba(0,136,204,0.3));
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    color: #29b6f6;
    font-weight: 700;
    font-size: 14px;
}

/* ── 이벤트 목록 ── */
.bm-event-item {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}
.bm-event-item:last-child { border-bottom: none; }
.bm-event-item:hover { background: var(--accent-dim); }
.bm-event-badge {
    flex-shrink: 0;
    background: #FFA048;
    color: #fff;
    font-size: 13.2px;
    font-weight: 700;
    padding: 2.4px 7.2px;
    border-radius: 3px;
    margin-right: 8px;
    animation: blinkBg 1.5s infinite;
    white-space: nowrap;
}
@keyframes blinkBg {
    0%, 100% { background: #FFA048; }
    50%       { background: #555; }
}
.bm-event-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}
.bm-event-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.bm-event-comment {
    flex-shrink: 0;
    margin-left: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--red);
}

/* ── 꽁머니 지급 완료금액 ── */
.bm-fm-total {
    text-align: center;
    padding: 0 0 16px;
}
.bm-fm-total-num {
    display: inline-block;
    font-size: 23.76px;
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid currentColor;
    padding-bottom: 4px;
}
.bm-fm-sub-header {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    border: 2px solid var(--accent) !important;
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    margin-bottom: 16px;
}
.bm-fm-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.bm-fm-table th {
    background: #ffecb3;
    color: #333333;
    font-size: 15.6px;
    font-weight: 600;
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.bm-fm-table td {
    font-size: 15.6px;
    color: var(--text);
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
}
.bm-fm-table tbody tr:hover td { background: var(--accent-dim); }
.text-center { text-align: center; }

/* ── 랭킹 리스트 (공통) ── */
.bm-rank-item {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 8px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    cursor: default;
}
.bm-rank-item[onclick] { cursor: pointer; }
.bm-rank-item[onclick]:hover { background: var(--accent-dim); }
.bm-rank-item:last-child { border-bottom: none; }
.bm-rank-num {
    flex-shrink: 0;
    width: 30px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    margin-right: 8px;
    background: var(--border);
    color: var(--text-dim);
}
.bm-rank-num.top { background: var(--accent); color: #ffffff; }
/* TOP 3 - blue (#5575A3) : 업체 후기 TOP 10 */
.bm-rank-num.top-blue { background: #5575A3; color: #fff; }
.bm-rank-nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-rank-val { flex-shrink: 0; color: var(--text-dim); font-size: 14px; display: flex; align-items: center; gap: 3px; }
.bm-level-rank-nick {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.bm-level-rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bm-rank-top-icon{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0;
    font-size:21px;
    line-height: 1.2;
    color: inherit;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0 6px rgba(255, 190, 60, .7);
    overflow:visible;
}
.bm-rank-top-icon-1,
.bm-rank-top-icon-2,
.bm-rank-top-icon-3 { background: transparent; }
.bm-level-rank-val {
    color: #FB7800;
    font-weight: 400;
    gap: 5px;
    font-size:90%;
}
.bm-rank-level-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.bm-rank-val .bm-p-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--accent);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    border-radius: 4px;
    vertical-align: middle;
}

/* =============================================
   메인 페이지 - 중앙 영역
   ============================================= */

/* 히어로 슬라이더 영역 */
.bm-hero {
    position: relative;
    background: linear-gradient(135deg, #111 0%, #1a1a2e 60%, #0f3460 100%);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
    min-height: 200px;
}
.bm-hero-inner {
    display: flex;
    align-items: stretch;
    min-height: 200px;
}
.bm-hero-text {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    padding: 24px 28px;
    z-index: 2;
}
.bm-hero-title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
    word-break: keep-all;
}
.bm-hero-title .line1 { font-size: 22px; font-weight: 700; }
.bm-hero-title .brand { font-size: 38px; color: var(--accent); }
.bm-hero-title .tv-badge {
    display: inline-block;
    background: var(--accent);
    color: #111;
    font-size: 14px;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
}
.bm-hero-img {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.bm-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
}
.bm-hero-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
}
.bm-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.5);
    transition: background 0.2s;
}
.bm-dot.active { background: var(--accent); border-color: var(--accent); }

/* ── 스포츠 탭 + 경기 목록 ── */
.bm-match-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

/* 상단 행 (스코어보드/일정) */
.bm-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-card2);
    border-bottom: 1px solid var(--border);
}
.bm-match-header-left { font-size: 14px; font-weight: 700; color: var(--text); }
.bm-match-header-right { font-size: 12px; color: var(--text-dim); }

/* 스포츠 아이콘 탭 */
.bm-sport-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg-card2);
    border-bottom: 1px solid var(--border);
    padding: 4px 8px 0;
    gap: 4px;
}
.bm-sport-tabs::-webkit-scrollbar { display: none; }
.bm-sport-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    margin-bottom: -1px;
}
.bm-sport-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.bm-sport-tab:hover { color: #ffffff; }

/* 경기 목록 테이블 */
.bm-match-list { padding: 0; }
.bm-match-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
    font-size: 13px;
    min-height: 40px;
    transition: background 0.15s;
}
.bm-match-row:last-child { border-bottom: none; }
.bm-match-row:hover { background: var(--accent-dim); }
.bm-match-row a { display: flex; align-items: center; gap: 8px; width: 100%; color: var(--text); }
.bm-match-row a:hover { color: var(--accent); }
.bm-match-league {
    flex-shrink: 0;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 2px;
    min-width: 36px;
    text-align: center;
}
.bm-match-time-col { flex-shrink: 0; color: var(--text-dim); font-size: 12px; min-width: 80px; }
.bm-match-teams {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.bm-match-team { flex: 1; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-match-team.home { text-align: right; }
.bm-match-team.away { text-align: left; }
.bm-match-vs {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
    padding: 0 4px;
}
.bm-match-watch {
    flex-shrink: 0;
    color: var(--accent);
    font-size: 14px;
    margin-left: 4px;
}
.bm-match-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bm-match-date-col { flex-shrink: 0; color: var(--text-dim); font-size: 12px; min-width: 60px; text-align: right; }

/* =============================================
   일반 게시판 페이지 컨테이너
   ============================================= */
#bm-container-title {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    padding: 10px 0 10px;
    margin-bottom: 12px;
    background: var(--bg-card2);
    padding: 10px 12px;
    border-top: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    border-left: 6px solid var(--accent);
}

/* =============================================
   FOOTER
   ============================================= */
#bm-footer {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: var(--max-w);
    margin: 16px auto;
    padding: 30px 20px;
    color: #333333;
    min-height: 300px;
    width: calc(100% - 20px);
}
.bm-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.bm-footer-brand {
    flex: 1 1 40%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.bm-footer-brand-name {
    font-size: 36px;
    font-weight: 900;
    color: #333333;
    margin-bottom: 10px;
    line-height: 1.2;
}
.bm-footer-dmca {
    display: inline-flex;
    align-items: stretch;
    color: #fff;
    text-decoration: none;
}
.bm-footer-dmca-primary,
.bm-footer-dmca-secondary {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 13px;
}
.bm-footer-dmca-primary {
    gap: 8px;
    background: #4caf50;
}
.bm-footer-dmca-secondary {
    background: #161616;
}
.bm-footer-col {
    flex: 1 1 15%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    color: #666666;
    margin-bottom: 12px;
}
.bm-footer-col-title {
    font-weight: 700;
    color: #333333;
    margin-bottom: 8px;
    font-size: 16px;
}
.bm-footer-col ul {
    padding-left: 0;
}
.bm-footer-col li {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
}
.bm-footer-col a { color: #666666; }
.bm-footer-col a:hover { color: #ff8c00; }

.bm-footer-social {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0;
    width: 100%;
}
.bm-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #5576a3;
    font-size: 20px;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.bm-social-icon:hover {
    background: var(--accent2);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.bm-footer-address {
    flex: 1 1 100%;
    text-align: center;
    font-size: 13px;
    color: #666666;
    margin-top: 24px;
}
.bm-footer-copy {
    flex: 1 1 100%;
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

#bm-mobile-footer-wrap {
    display: none;
}
#bm-mobile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 12px 20px;
    background: #feb16e;
    border-top: 1px solid #f3a45f;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.28);
}
.bm-mobile-footer-item {
    flex: 1 1 20%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 0;
    font: inherit;
    padding: 0;
    cursor: pointer;
}
.bm-mobile-footer-button {
    appearance: none;
    -webkit-appearance: none;
}
.bm-mobile-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.bm-mobile-footer-icon svg {
    width: 2rem;
    height: 2rem;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bm-mobile-footer-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
/* ── TOP 버튼 ── */
#bm-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 42px; height: 42px;
    background: var(--accent);
    color: #111;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 998;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
#bm-top-btn.visible { opacity: 1; pointer-events: all; }
#bm-top-btn:hover { background: var(--accent2); }

/* =============================================
   그누보드 기본 요소 다크 오버라이드
   ============================================= */
/* 게시판 */
table { border-collapse: collapse; width: 100%; }
.board_list th, .bd_lst th, table.tbl_head th {
    background: var(--bg-card2);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-size: 12px;
    padding: 8px 8px;
    font-weight: 600;
}
.board_list td, .bd_lst td {
    border: 1px solid var(--border);
    padding: 7px 8px;
    font-size: 13px;
    color: var(--text);
    background: var(--bg-card);
}
.board_list tr:hover td, .bd_lst tr:hover td { background: var(--accent-dim); }
.board_list a, .bd_lst a { color: var(--text); }
.board_list a:hover, .bd_lst a:hover { color: var(--accent); }

/* h2 제목 스타일 (WithLeftPage 동일) */
#bm-content h2 {
    background: var(--bg-card2);
    font-size: 1.3rem;
    font-weight: bold;
    padding: 10px 12px;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    border-left: 6px solid var(--accent);
}
#bm-content h3 {
    font-size: 1.2rem;
    font-weight: bold;
    padding-top: 10px;
    margin-bottom: 10px;
    line-height: 1.5;
}
#bm-content strong { color: var(--accent); }
#bm-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95rem;
    border-top: 2px solid var(--accent);
}
#bm-content th {
    background: #ffecb3;
    color: #333333;
    font-weight: bold;
    border: 1px solid var(--border);
    padding: 12px 15px;
    border-bottom: 2px solid var(--accent);
}
#bm-content td {
    border: 1px solid var(--border);
    padding: 12px 15px;
    color: var(--text);
}
#bm-content tr:nth-child(even) td { background: #fafafa; }
#bm-content tr:hover td { background: #fff6ec; }

/* 페이징 */
.pg_wrap { text-align: center; padding: 14px 0; }
.pg_wrap a, .pg_wrap strong {
    display: inline-block;
    min-width: 30px;
    padding: 5px 7px;
    margin: 0 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-dim);
    background: var(--bg-card);
}
.pg_wrap strong { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.pg_wrap a:hover { color: var(--accent); border-color: var(--accent); }

/* 폼 요소 */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], input[type="number"], textarea, select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    outline: none;
    transition: border-color 0.2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
select option { background: var(--bg-card2); }

/* 버튼 */
input[type="submit"], input[type="button"],
button.btn_submit, .btn_submit {
    background: var(--accent);
    color: #111;
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}
input[type="submit"]:hover, input[type="button"]:hover { opacity: 0.85; }

/* outlogin 스킨 오버라이드 */
#bo_login { background: var(--bg-card); border-color: var(--border); }

/* =============================================
   반응형
   ============================================= */
@media (max-width: 1100px) {
    :root { --left-w: 240px; }
    .bm-menu-link { padding: 0 12px; font-size: 14px; }
}

@media (max-width: 1100px) {
    html, body { overflow-x: hidden; }
    body {
        padding-bottom: 104px;
    }
    #bm-left { display: none; }
    #bm-page { padding: 8px 6px; }
    #bm-page.bm-page-reference-board {
        padding-top: 8px;
    }
    #bm-page.bm-page-reference-board #bm-left {
        width: auto;
        min-width: 0;
    }
    .bm-hero-title { font-size: 24px; }
    .bm-hero-title .brand { font-size: 30px; }
    /* 모바일: 로고/버튼은 일반 흐름, 메뉴만 상단 고정 */
    #bm-header { position: static; }
    #bm-mobile-top { display: block; }
    .bm-logo { display: none; }
    .bm-gnb-spacer { display: none; }
    /* 모바일: 메뉴 아이템 원래 크기로 */
    .bm-menu-item {
        flex: 0 0 auto;
        min-width: max-content;
        justify-content: flex-start;
    }
    .bm-menu-link {
        width: auto;
        flex: 0 0 auto;
        padding: 0 14px;
        font-size: 18px;
        font-weight: 700;
        border-bottom-color: transparent !important;
    }
    .bm-menu-link:hover {
        border-bottom-color: transparent !important;
    }
    .bm-menu-item.active .bm-menu-link,
    .bm-menu-item.gradient .bm-menu-link,
    .bm-menu-item.active .bm-menu-link:hover,
    .bm-menu-item.gradient .bm-menu-link:hover {
        border-bottom-color: transparent !important;
        color: var(--accent);
    }
    /* 모바일: 헤더 자체는 화면 폭에 고정 */
    #bm-header { overflow: visible; }
    #bm-topbar { overflow-x: hidden; }
    #bm-topbar.bm-mobile-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background: var(--bg-header);
        box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    }
    #bm-topbar.bm-mobile-fixed .bm-inner {
        background: var(--bg-header);
    }
    #bm-topbar .bm-inner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        display: block;
        height: auto;
        overflow-x: hidden;
    }
    /* 모바일: GNB만 가로스크롤 */
    #bm-gnb {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        max-width: 100vw;
        padding-left: 8px;
        overflow-x: auto !important;
        overflow-y: hidden;
        position: static;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }
    #bm-mobile-dropdown,
    .bm-submenu { display: none !important; }
    /* 모바일: 드롭다운 위치 조정 */
    .bm-submenu { position: fixed; top: unset; left: unset; transform: none; }
    #bm-footer { display: block; }
    #bm-mobile-footer-wrap {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        padding: 0;
    }
    #bm-top-btn {
        bottom: 104px;
        right: 14px;
    }
    .bm-content-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow-x: visible;
        width: 100%;
    }

    .bm-content-tabs.bm-content-tabs-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .bm-content-tabs.bm-content-tabs-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bm-content-tab {
        border-radius: 10px;
        font-size: 16.5px;
        min-height: 38px;
        padding: 0 8px;
        min-width: 0;
        width: 100%;
        flex: 1 1 auto;
    }

    #bm-content .bm-content-tabs .bm-content-tab {
        font-size: 15.5px;
        line-height: 1.2;
        font-weight: 800;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    :root { --header-h: 52px; }
    .bm-menu-link { padding: 10px 14px; font-size: 18px; font-weight: 700; }
    .bm-btn-outline, .bm-btn-accent { padding: 5px 10px; font-size: 12px; }
    #bm-mobile-top .bm-btn-outline,
    #bm-mobile-top .bm-btn-accent {
        border-color: #FFA048;
        background: #ffffff;
        color: #FFA048;
        -webkit-text-fill-color: #FFA048;
    }
    #bm-mobile-top .bm-btn-outline:hover,
    #bm-mobile-top .bm-btn-accent:hover {
        border-color: #FFA048;
        background: #ffffff;
        color: #FFA048;
        -webkit-text-fill-color: #FFA048;
    }
    #bm-page { padding: 8px 6px; }
    .bm-hero-inner { flex-direction: column; }
    .bm-hero-text { flex: 0 0 auto; padding: 16px; }
    .bm-hero-img { min-height: 120px; }
    .bm-mobile-footer-label { font-size: 12px; }
    #bm-mobile-footer {
        height: 78px;
        padding: 0 8px 18px;
        border-radius: 18px 18px 0 0;
    }
    .bm-mobile-footer-icon svg {
        width: 1.9rem;
        height: 1.9rem;
    }

    .bm-seo-content {
        padding: 0 3px 6px !important;
        margin: 0 !important;
    }

    .bm-seo-content img,
    .bm-seo-content > div[style*="padding-top"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .bm-seo-content h2 {
        margin-top: 4px;
        margin-bottom: 6px;
    }

    .bm-seo-content h3 {
        padding-top: 4px;
        margin-bottom: 4px;
    }

    .bm-seo-content h4 {
        padding-top: 3px;
        margin-bottom: 3px;
    }

    .bm-seo-content p {
        padding-bottom: 4px;
    }

    .bm-seo-content ul {
        padding-left: 6px;
        margin: 4px 0;
    }

    .bm-seo-content li {
        margin: 4px 0;
    }

    .bm-seo-content .bm-seo-faq-img {
        margin-bottom: 6px;
    }

    .bm-seo-content .numbered-section {
        padding: 6px;
        margin-top: 6px;
        margin-bottom: 4px;
        line-height: 1.4;
        border-left-width: 4px;
    }
}

/* =============================================
   스포츠 중계 탭 (broadcast-a/b/c)
   ============================================= */
.bm-broadcast-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
}
.bm-broadcast-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    text-decoration: none;
}
.bm-broadcast-tab:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.bm-broadcast-tab:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.bm-broadcast-tab:hover { color: #ffffff; }
.bm-broadcast-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--bg-card);
}

/* 중계 iframe 래퍼 */
.bm-broadcast-wrap {
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
}

/* =============================================
   SEO 텍스트 콘텐츠 (하단 본문)
   ============================================= */
.bm-seo-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 24px 20px;
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}
.bm-seo-content h2 { margin-top: 10px; margin-bottom: 20px; }
.bm-seo-content h3 {
    font-size: 1.2rem;
    font-weight: bold;
    padding-top: 10px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.bm-seo-content h4 {
    font-size: 1.0rem;
    font-weight: 600;
    padding-top: 8px;
    margin-bottom: 6px;
}
.bm-seo-content p {
    font-size: 1rem;
    margin: 0;
    padding-bottom: 10px;
}
.bm-seo-content strong { color: var(--accent); }
.bm-seo-content ul {
    padding-left: 10px;
    margin: 10px;
    list-style: none;
}
.bm-seo-content li { margin: 12px 0; }
.bm-seo-content a { text-decoration: underline; text-underline-offset: 3px; }
.bm-seo-content .bm-seo-faq-img {
    display: block;
    width: 100%;
    max-width: 458px;
    height: auto;
    border-radius: 12px;
    margin-bottom: 16px;
}
.bm-seo-content .numbered-section {
    background: var(--bg-card2);
    font-size: 1.3rem;
    font-weight: bold;
    padding: 15px 10px 15px 10px;
    margin-top: 32px;
    margin-bottom: 10px;
    line-height: 1.6rem;
    border-top: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    border-left: 6px solid var(--accent);
}
.bm-seo-content .numbered-section:first-child { margin-top: 0; }
/* 팝업레이어 알림 제목 숨김 */
#hd_pop h2 { display: none; }

/* =============================================
   GGONGTA original layout chrome overrides
   ============================================= */
:root {
    --ggt-header-border: #F9CB3D;
    --ggt-menu-orange: #FF8C00;
    --ggt-footer-grey: #616161;
}

#bm-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#bm-topbar {
    max-width: var(--max-w);
    margin: 0 auto;
    background: #ffffff;
    border-right: 1px solid var(--ggt-header-border);
    border-bottom: 1px solid var(--ggt-header-border);
    border-left: 1px solid var(--ggt-header-border);
    overflow: visible;
}

#bm-topbar .bm-inner {
    max-width: 100%;
    height: 96px;
    min-height: 96px;
    padding: 0 48px;
    gap: 0;
    background: #ffffff;
    border-top: 5px solid var(--ggt-header-border);
    border-bottom: 1px solid var(--ggt-header-border);
}

.bm-logo {
    width: 240px;
    min-width: 240px;
    height: 89px;
    margin: 0;
    justify-content: center;
}

.bm-logo picture,
.bm-logo img {
    display: block;
}

.bm-logo img {
    width: 165px;
    height: 60px;
    object-fit: contain;
}

#bm-gnb {
    height: 89px;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
}

.bm-menu-item {
    height: 100%;
    align-items: center;
}

.bm-menu-link,
.bm-menu-link:hover,
.bm-menu-item.active .bm-menu-link,
.bm-menu-item.gradient .bm-menu-link,
.bm-menu-item.partner-highlight .bm-menu-link {
    height: 100%;
    padding: 0 clamp(8px, 1.1vw, 18px);
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--ggt-menu-orange);
    -webkit-text-fill-color: var(--ggt-menu-orange);
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', '맑은 고딕', sans-serif;
    font-size: clamp(18px, 1.28vw, 21px);
    font-weight: 800;
    line-height: 1.75rem;
    letter-spacing: 0;
    text-shadow: none;
    filter: none;
    animation: none;
}

.bm-menu-link:hover,
.bm-menu-item.active .bm-menu-link {
    opacity: 0.72;
    border-bottom-color: var(--accent);
}

#bm-mobile-dropdown {
    border-color: var(--ggt-header-border) !important;
    border-radius: 0 !important;
}

.bm-submenu-link,
#bm-mobile-dropdown .bm-submenu-link {
    color: #FFA048;
    font-weight: 700;
}

.bm-submenu-link:hover,
#bm-mobile-dropdown .bm-submenu-link:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #FD8C25 0%, #FB7800 100%);
    box-shadow: 0 7px 16px rgba(251, 120, 0, 0.28);
    transform: translateY(-1px);
}

#bm-footer {
    max-width: var(--max-w);
    width: calc(100% - 16px);
    margin: 16px auto 8px;
    padding: 24px;
    min-height: 0;
    background: var(--ggt-footer-grey);
    border: 0;
    border-radius: 10px;
    color: #ffffff;
}

.bm-footer-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.bm-footer-brand {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bm-footer-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bm-footer-logo-link img {
    width: 165px;
    height: 60px;
    object-fit: contain;
}

.bm-footer-col {
    min-height: 0;
    margin: 0;
    color: #ffffff;
}

.bm-footer-col-title {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.bm-footer-col li {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.bm-footer-col a,
.bm-footer-col a:hover {
    color: #ffffff;
}

.bm-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.bm-footer-contact i {
    width: 14px;
    margin-top: 3px;
    text-align: center;
}

.bm-footer-social {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0;
}

.bm-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    font-size: 24px;
}

.bm-footer-social a:hover {
    color: #ffffff;
    opacity: 0.78;
}

.bm-footer-notice {
    grid-column: 1 / -1;
    padding: 0 24px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
}

.bm-footer-notice-title {
    margin-bottom: 8px;
    font-weight: 700;
}

.bm-footer-copy {
    margin-top: 12px;
    color: #d5d5d5;
    font-size: 14px;
    text-align: center;
}

.bm-footer-copy a {
    color: #ffffff;
}

#bm-mobile-footer {
    height: 80px;
    padding: 0 10px 20px;
    background: #ffa048;
    border-top: 1px solid #474;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
}

.bm-mobile-footer-item {
    color: #ffffff;
    font-weight: 700;
}

.bm-mobile-footer-icon {
    color: #ffffff;
}

.bm-mobile-footer-icon svg {
    width: 2rem;
    height: 2rem;
    stroke: currentColor;
}

.bm-mobile-footer-icon i {
    font-size: 2rem;
    line-height: 1;
}

.bm-mobile-footer-label {
    margin-top: 2px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.15;
}

/* Left sidebar: match original GGONGTA white/orange panels */
#bm-left .bm-card,
#bm-left .bm-card-primary,
#bm-left .bm-card-accent,
#bm-left .bm-box-body,
#bm-left .bm-box-body-fm,
#bm-left .bm-box-body-list {
    background: #ffffff;
    color: #333333;
}

#bm-left .bm-card,
#bm-left .bm-card-primary,
#bm-left .bm-card-accent {
    border-color: #ffa048;
    border-radius: 10px;
    box-shadow: none;
}

#bm-left .bm-login-shell {
    border: 2px solid #ffa048;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

#bm-left .bm-login-card,
#bm-left .bm-logined-card {
    border: 0;
    border-radius: 10px;
}

#bm-left .bm-login-shell {
    border-width: 2px;
}

#bm-left .bm-login-form-wrap {
    margin: 8px;
    padding: 8px 8px 16px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

#bm-left .bm-input {
    height: 36px;
    margin: 4px 0 8px;
    border: 1px solid #ffa048;
    border-radius: 4px;
    background: #ffffff;
    color: #333333;
}

#bm-left .bm-login-btn-row {
    gap: 4px;
    margin-top: 4px;
}

#bm-left .bm-btn-login,
#bm-left .bm-btn-register {
    min-height: 36px;
    border: 1px solid #FEB16E;
    border-radius: 8px;
    background: #FEB16E;
    color: #ffffff;
    font-size: 16px;
}

#bm-left .bm-btn-login:hover,
#bm-left .bm-btn-register:hover {
    background: #FEB16E;
    color: #ffffff;
    opacity: 0.88;
}

#bm-left .bm-box-title {
    min-height: 40px;
    background: #FEB16E;
    border-color: #FEB16E;
    border-radius: 10px 10px 0 0;
}

#bm-left .bm-box-body {
    border-color: #FEB16E;
    border-radius: 0 0 10px 10px;
}

#bm-left .bm-tg-img {
    border-width: 2px;
    border-radius: 10px;
}

#bm-left .bm-fm-total-num {
    color: #333333;
}

#bm-left .bm-fm-sub-header {
    background: #FEB16E;
    color: #ffffff;
    border-color: #FEB16E !important;
}

#bm-left .bm-rank-item,
#bm-left .bm-rank-nick,
#bm-left .bm-rank-title,
#bm-left .bm-rank-val,
#bm-left .bm-event-title,
#bm-left .bm-fm-table td {
    color: #333333;
}

#bm-left .bm-rank-item {
    background: #ffffff;
}

#bm-left .bm-rank-item:hover,
#bm-left .bm-event-item:hover,
#bm-left .bm-fm-table tbody tr:hover td {
    background: rgba(254, 177, 110, 0.14);
}

#bm-left .bm-rank-num {
    background: #eeeeee;
    color: #333333;
}

#bm-left .bm-rank-num.top,
#bm-left .bm-rank-num.top-blue {
    background: #FFA048;
    color: #ffffff;
}

#bm-left .bm-review-comment {
    color: #ff4d4f;
    font-weight: 700;
}

#bm-left .bm-attendance-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 4px;
}

#bm-left .bm-attendance-tabs span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: #777777;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

#bm-left .bm-attendance-tabs span.active {
    color: #5575A3;
    border-bottom: 2px solid #5575A3;
}

#bm-left .bm-logined-progress-meta {
    color: #333333;
}

#bm-left .bm-logined-wrap {
    padding: 0;
    border-radius: 10px;
    background: #ffffff;
}

#bm-left .bm-logined-row {
    gap: 8px;
    min-height: 72px;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
    background: #ffffff;
}

#bm-left .bm-logined-level-badge {
    width: 46px;
    height: 46px;
}

#bm-left .bm-logined-level-icon {
    width: 46px;
    height: 46px;
}

#bm-left .bm-logined-nick-link {
    color: #333333;
    font-size: 15px;
}

#bm-left .bm-logined-nim {
    margin-left: 2px;
    color: #333333;
    font-size: 13px;
    font-weight: 400;
}

#bm-left .bm-logined-logout-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    background: #ffffff;
    color: #666666;
    font-size: 13px;
    font-weight: 700;
}

#bm-left .bm-logined-logout-btn:hover {
    color: #333333;
    background: #f7f7f7;
}

#bm-left .bm-logined-admin-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    background: #ffffff;
    color: #666666;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

#bm-left .bm-logined-admin-btn:hover {
    color: #333333;
    background: #f7f7f7;
}

#bm-left .bm-logined-progress-wrap {
    margin: 0;
    background: #ffffff;
}

#bm-left .bm-logined-exp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
    color: #666666;
    font-size: 12px;
}

#bm-left .bm-logined-exp-row > span {
    flex: 0 0 auto;
}

#bm-left .bm-logined-progress-bar {
    position: relative;
    flex: 1;
    height: 15px;
    background: #ff8f00;
    border-radius: 999px;
    overflow: hidden;
}

#bm-left .bm-logined-progress-fill {
    min-width: 0;
    background-color: #e87500;
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.18) 75%,
        transparent 75%,
        transparent
    );
    background-size: 18px 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

#bm-left .bm-logined-progress-label {
    position: absolute;
    inset: -1px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

#bm-left .bm-logined-progress-meta {
    justify-content: space-between;
    margin: 0;
    padding: 6px 8px;
    border-bottom: 1px solid #e0e0e0;
    color: #666666;
    font-size: 12px;
}

#bm-left .bm-logined-progress-meta b,
#bm-left .bm-logined-attendance-points span {
    color: #FF8F00;
    font-weight: 800;
}

#bm-left .bm-logined-attendance-points {
    padding: 6px 8px;
    border-bottom: 1px solid #e0e0e0;
    color: #666666;
    font-size: 12px;
    line-height: 1.5;
}

#bm-left .bm-logined-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: #ffffff;
}

#bm-left .bm-logined-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-right: 1px solid #eeeeee;
    color: #607d8b;
    font-size: 17px;
}

#bm-left .bm-logined-actions a:last-child {
    border-right: 0;
}

#bm-left .bm-logined-actions a:hover {
    color: #c10015;
    background: #fafafa;
}

#bm-left .bm-logined-logout {
    border-color: #FEB16E;
    color: #FEB16E;
}

#bm-left .bm-logined-logout:hover {
    background: rgba(254, 177, 110, 0.12);
    border-color: #FEB16E;
    color: #ff8c00;
}

@media (max-width: 1100px) {
    #bm-header {
        position: static;
        background: #ffffff;
    }

    #bm-mobile-top {
        display: block;
        background: #ffffff;
        border-bottom: 0;
        max-height: 64px;
    }

    .bm-mobile-top-inner {
        min-height: 64px;
        padding: 0 8px;
    }

    .bm-logo-mobile img {
        width: 130px;
        height: 47px;
        object-fit: contain;
    }

    #bm-topbar {
        max-width: 100%;
        border-right: 0;
        border-left: 0;
    }

    #bm-topbar .bm-inner {
        height: auto;
        min-height: 0;
        padding: 0;
        border-top: 5px solid var(--ggt-header-border);
        border-bottom: 1px solid var(--ggt-header-border);
    }

    #bm-gnb {
        height: 52px;
        padding-left: 8px;
        justify-content: flex-start;
        overflow-x: auto !important;
        overflow-y: hidden;
    }

    .bm-menu-link,
    .bm-menu-link:hover,
    .bm-menu-item.active .bm-menu-link,
    .bm-menu-item.gradient .bm-menu-link,
    .bm-menu-item.partner-highlight .bm-menu-link {
        padding: 0 14px;
        font-size: 18px;
        font-weight: 800;
    }

    #bm-footer {
        display: block;
        width: calc(100% - 16px);
        margin-top: 15px;
        margin-bottom: 96px;
        padding: 15px;
    }
}

@media (max-width: 760px) {
    .bm-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bm-footer-brand,
    .bm-footer-contact,
    .bm-footer-social,
    .bm-footer-notice {
        grid-column: 1 / -1;
    }

    .bm-footer-notice {
        padding: 0;
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 80px !important;
    }
    #bm-page {
        padding-bottom: 0 !important;
    }
    #bm-footer {
        margin: 0 auto 15px !important;
        padding: 15px !important;
        min-height: 0 !important;
    }
}