/* =====================================================================
   Maple Build · Toss 스타일 공통 테마
   - 모든 페이지의 인라인 <style> 뒤에 로드되어 곡률/색상만 덮어씁니다.
   - 라이트: 연한 블루 배경 + 화이트 카드(24px) + 토스 블루(#3182f6) 액센트
   - 다크  : 다크 팔레트 + 라임(#d4ff00) 포인트 유지
   - 포인트 색은 --mb-accent 하나로 관리 (다크=라임, 라이트=블루)
   ===================================================================== */
:root {
    /* 포인트 색 (다크 기본 = 라임) */
    --mb-accent: #d4ff00;
    --mb-accent-hover: #c2eb00;
    --mb-accent-soft: rgba(212, 255, 0, 0.14);
    --mb-accent-soft-2: rgba(212, 255, 0, 0.09);
    --mb-on-accent: #191f28;      /* 포인트 배경 위 글자색 */
    --mb-blue: #3182f6;           /* 원래부터 양쪽 모드 모두 파란색이던 요소용 (스킬 선택, 레벨 버튼, 경험치 등) */
    --mb-red: #f04452;
    --mb-green: #00c471;

    --mb-r-card: 24px;     /* 큰 카드 */
    --mb-r-box: 18px;      /* 카드 안의 박스 */
    --mb-r-ctrl: 12px;     /* 버튼·입력창 */
    --mb-r-pill: 999px;

    /* 다크(기본) */
    --mb-bg: #17171c;
    --mb-card: #202027;
    --mb-card-2: #2a2a33;
    --mb-card-3: #33333d;
    --mb-line: rgba(255, 255, 255, 0.06);
    --mb-text: #f2f4f6;
    --mb-text-2: #b0b8c1;
    --mb-text-3: #8b95a1;
    --mb-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    --mb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
}
body.light-mode {
    /* 포인트 색 (라이트 = 토스 블루) */
    --mb-accent: #3182f6;
    --mb-accent-hover: #1b64da;
    --mb-accent-soft: rgba(49, 130, 246, 0.12);
    --mb-accent-soft-2: rgba(49, 130, 246, 0.08);
    --mb-on-accent: #ffffff;
    --mb-bg: #eaeff6;             /* 카드(흰색)와 구분되도록 한 단계 진한 블루그레이 */
    --mb-card: #ffffff;
    --mb-card-2: #f2f5f9;         /* 카드 안 박스 (지역 버튼, 입력창 등) */
    --mb-card-3: #e6ebf2;
    --mb-line: #dfe5ee;
    --mb-text: #191f28;
    --mb-text-2: #4e5968;
    --mb-text-3: #8b95a1;
    --mb-shadow: 0 1px 2px rgba(31, 64, 128, 0.06), 0 8px 24px rgba(31, 64, 128, 0.10);
    --mb-shadow-sm: 0 2px 8px rgba(31, 64, 128, 0.07);
}

/* ---------- 기본 ---------- */
html, body { background-color: var(--mb-bg) !important; color: var(--mb-text) !important; }
body.light-mode { background-color: var(--mb-bg) !important; color: var(--mb-text) !important; }

/* ---------- 네비게이션 / 테마 스위치 ---------- */
.navbar { background-color: var(--mb-card) !important; border-bottom: 1px solid var(--mb-line) !important; }
.nav-item { color: var(--mb-text-2) !important; }
.nav-item:hover { color: var(--mb-accent) !important; }
.slider { background-color: var(--mb-card-3) !important; border-color: var(--mb-line) !important; }
input:checked + .slider { background-color: var(--mb-card-3) !important; }
input:checked + .slider:before { background-color: var(--mb-accent) !important; }
body.light-mode .slider { background-color: #e5e8eb !important; }

/* ---------- 인트로 히어로 ---------- */
.intro-hero-inner {
    background-color: var(--mb-card) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-card) !important;
    box-shadow: var(--mb-shadow) !important;
}
.intro-hero-divider { background: var(--mb-line) !important; }
.intro-eyebrow, .intro-headline-accent { color: var(--mb-accent) !important; }
.intro-headline { color: var(--mb-text) !important; }
.intro-text { color: var(--mb-text-3) !important; }
.intro-mini-steps li { color: var(--mb-text-2) !important; }
.intro-mini-num {
    width: 22px !important; height: 22px !important; border-radius: 50% !important;
    background: var(--mb-accent-soft) !important; color: var(--mb-accent) !important;
}
.intro-map-card { border-radius: var(--mb-r-box) !important; border-color: var(--mb-line) !important; }
body.light-mode .intro-hero { background-image: none !important; }

/* ---------- 메인 카테고리 카드 / 지역 버튼 ---------- */
.category-column, .map-wrapper-box, #hover-map-info, .skill-sidebar, #worldmap-ui > div, #hunt-recommend-box {
    background-color: var(--mb-card) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-card) !important;
    box-shadow: var(--mb-shadow) !important;
}
body.light-mode .category-column, body.light-mode .map-wrapper-box, body.light-mode #hover-map-info,
body.light-mode .skill-sidebar, body.light-mode #worldmap-ui > div, body.light-mode #hunt-recommend-box {
    border: 1px solid var(--mb-line) !important;
}
.category-header { color: var(--mb-text) !important; border-bottom-color: var(--mb-line) !important; }
.grid-container { gap: 12px !important; }
.sub-button {
    background: var(--mb-card-2) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-box) !important;
    color: var(--mb-text-2) !important;
    box-shadow: none !important;
}
.sub-button:hover {
    background: var(--mb-card) !important;
    border-color: var(--mb-accent) !important;
    color: var(--mb-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}
.mobile-only-notice {
    background-color: var(--mb-accent-soft-2) !important;
    border: 1px solid rgba(49, 130, 246, 0.25) !important;
    border-radius: 14px !important;
    color: var(--mb-accent) !important;
}

/* ---------- 월드맵 / 시뮬레이터 ---------- */
#map-viewport, #worldmap-container {
    border-radius: var(--mb-r-box) !important;
    background-color: #0f1115 !important;
    border: 1px solid var(--mb-line) !important;
    box-shadow: none !important;
}
body.light-mode #map-viewport, body.light-mode #worldmap-container { background-color: #e3e8f0 !important; }

.worldmap-header h2 { color: var(--mb-text) !important; }
#region-title { color: var(--mb-accent) !important; text-shadow: none !important; }
body.light-mode #region-title { color: var(--mb-accent) !important; }
#hover-map-info > div:first-child { color: var(--mb-accent) !important; }
.sidebar-hint { color: var(--mb-accent) !important; }
#hunt-recommend-box > div:first-child { color: var(--mb-accent) !important; }
#hunt-recommend-box > div:nth-child(2) { color: var(--mb-text-3) !important; }
#hunt-recommend-box a {
    background: var(--mb-accent) !important; color: var(--mb-on-accent) !important;
    border-radius: var(--mb-r-ctrl) !important;
}
#hunt-recommend-box a:hover { background: var(--mb-accent-hover) !important; }

.worldmap-guide-legend-inline {
    background: var(--mb-card-2) !important; color: var(--mb-text-2) !important;
    border: 1px solid var(--mb-line) !important; backdrop-filter: none !important;
}

/* 버튼류 */
.back-btn, #hitbox-btn, #platform-btn {
    background: var(--mb-card-2) !important; color: var(--mb-text-2) !important;
    border: 1px solid var(--mb-line) !important; border-radius: var(--mb-r-ctrl) !important;
    box-shadow: none !important;
}
.back-btn:hover { background: var(--mb-card-3) !important; color: var(--mb-text) !important; }
#hitbox-btn::before, #platform-btn::before { border-color: var(--mb-text-3) !important; }
#hitbox-btn.checked-active { color: var(--mb-accent) !important; background: var(--mb-accent-soft) !important; border-color: transparent !important; }
#hitbox-btn.checked-active::before {
    background-color: var(--mb-accent) !important; border-color: var(--mb-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191f28' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
body.light-mode #hitbox-btn.checked-active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.save-btn { background: var(--mb-green) !important; color: #fff !important; border-radius: var(--mb-r-ctrl) !important; }
.save-btn:hover { background: #00b063 !important; }
#reset-btn-header { background: var(--mb-red) !important; border-radius: var(--mb-r-ctrl) !important; box-shadow: none !important; }
#reset-btn-header:hover { background: #d93d4a !important; }

/* 검색창 / 드롭다운 */
#map-search-input {
    background: var(--mb-card-2) !important; border: 1px solid var(--mb-line) !important;
    color: var(--mb-text) !important; border-radius: var(--mb-r-ctrl) !important;
}
#map-search-input:focus { border-color: var(--mb-accent) !important; outline: none !important; box-shadow: 0 0 0 3px var(--mb-accent-soft) !important; }
#search-dropdown, #dropdown-selected, #dropdown-list {
    background: var(--mb-card) !important; border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-ctrl) !important; box-shadow: var(--mb-shadow) !important; color: var(--mb-text) !important;
}
#dropdown-selected { background: var(--mb-card-2) !important; box-shadow: none !important; }
#dropdown-selected span { color: var(--mb-text) !important; }
.search-item, .dropdown-item span { color: var(--mb-text-2) !important; }
.search-item:hover, .dropdown-item:hover { background: var(--mb-accent-soft-2) !important; color: var(--mb-accent) !important; }
.dropdown-category { background: var(--mb-card-2) !important; color: var(--mb-accent) !important; border-color: var(--mb-line) !important; }
body.light-mode .dropdown-item { border-bottom-color: var(--mb-line) !important; }

/* 스킬 카드 */
.skill-sidebar h4 { color: var(--mb-text) !important; }
.sidebar-divider { border-top-color: var(--mb-line) !important; }
.skill-card {
    background: var(--mb-card-2) !important; border: 1px solid var(--mb-line) !important;
    border-radius: 14px !important; box-shadow: none !important;
}
.skill-card span { color: var(--mb-text-2) !important; }
.skill-card:hover, .skill-card.active {
    background: rgba(49,130,246,0.08) !important; border-color: var(--mb-blue) !important;
    box-shadow: none !important;
}
.skill-card.active span, .skill-card:hover span { color: var(--mb-blue) !important; }
.lvl-btn { background: var(--mb-card-3) !important; color: var(--mb-text-2) !important; border: none !important; border-radius: 8px !important; }
.lvl-btn:hover { background: rgba(49,130,246,0.12) !important; color: var(--mb-blue) !important; }
.lvl-btn.active { background: var(--mb-blue) !important; color: #fff !important; }
.janus-options { border-top-color: var(--mb-line) !important; }

/* BGM 컨트롤러 */
.bgm-controller {
    background: var(--mb-card-2) !important; border: 1px solid var(--mb-line) !important;
    box-shadow: none !important; border-radius: var(--mb-r-pill) !important;
}
.bgm-controller button { color: var(--mb-text-2) !important; border-right: 1px solid var(--mb-line) !important; }
#bgm-btn.playing { background: var(--mb-accent) !important; color: var(--mb-on-accent) !important; }
.volume-slider-wrapper svg { fill: var(--mb-text-3) !important; }
#bgm-volume::-webkit-slider-runnable-track { background: var(--mb-line) !important; }
#bgm-volume::-webkit-slider-thumb { background: var(--mb-accent) !important; border: none !important; box-shadow: 0 1px 4px rgba(49,130,246,0.4) !important; }

/* 툴팁 / 몬스터 정보 */
.portal-tooltip {
    background-color: var(--mb-card) !important; border: 1px solid var(--mb-line) !important;
    border-radius: 14px !important; box-shadow: var(--mb-shadow) !important; color: var(--mb-text) !important;
}
.tooltip-name { border-bottom-color: var(--mb-line) !important; color: var(--mb-text) !important; }
.tooltip-force { color: var(--mb-blue) !important; }
.mob-info { color: var(--mb-red) !important; }
.mob-count { background: var(--mb-card-3) !important; color: var(--mb-text-2) !important; }

.info-title-panel { color: var(--mb-text) !important; text-shadow: none !important; border-bottom-color: var(--mb-line) !important; }
.info-force-card { background: var(--mb-card-2) !important; border: 1px solid var(--mb-line) !important; border-radius: 14px !important; }
.info-force-card .force-label { color: var(--mb-text-2) !important; }
.info-force-card .force-val-req { color: var(--mb-blue) !important; }
.info-force-card .force-val-rec { color: #f29c1f !important; }
.info-force-card .force-divider { background: var(--mb-line) !important; }
.info-mob-card { background: var(--mb-card-2) !important; border: 1px solid var(--mb-line) !important; border-radius: 16px !important; box-shadow: none !important; }
.info-mob-img-bg { background: var(--mb-card) !important; border: 1px solid var(--mb-line) !important; border-radius: 12px !important; }
.info-mob-name { color: var(--mb-text) !important; }
.info-mob-name span { color: var(--mb-text-3) !important; }
.info-mob-stat-bg { background: var(--mb-card-3) !important; border-radius: 10px !important; }
.info-mob-stat-bg .stat-label { color: var(--mb-text-3) !important; }
/* 체력·경험치 수치는 강조색 없이 기본 글자색으로 */
.info-mob-stat-bg .stat-hp, .info-mob-stat-bg .stat-exp { color: var(--mb-text) !important; }
#mob-info-content > div[style*="color: #888"] { color: var(--mb-text-3) !important; }

/* 스크롤바 */
::-webkit-scrollbar-thumb { background: var(--mb-card-3) !important; border-color: var(--mb-card) !important; }

/* ---------- 푸터 ---------- */
.footer { border-top: 1px solid var(--mb-line) !important; }
.footer-info span, .footer-links, .footer-links a, .footer-warning p { color: var(--mb-text-3) !important; }
.footer-links a:hover { color: var(--mb-accent) !important; }
.footer-warning { border-top-color: var(--mb-line) !important; }

/* ---------- 서브 페이지 (업데이트 / 가이드 / 소개 / 문의 / 개인정보) ---------- */
.update-card, .about-card, .policy-card, .faq-box, .contact-card,
#guide-content .step-box, #guide-content .notice {
    background: var(--mb-card) !important; border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-card) !important; box-shadow: var(--mb-shadow) !important;
}
#guide-content .notice { border-radius: var(--mb-r-box) !important; box-shadow: none !important; background: var(--mb-card-2) !important; }
.update-title, .about-title, .contact-title, .policy-title, .faq-title,
.about-card h2, .contact-card h2, .policy-card h2, #guide-content h1, #guide-content .section-title h2 { color: var(--mb-text) !important; }
.update-sub, .about-sub, .contact-sub, .policy-sub, .policy-date, #guide-content .lead { color: var(--mb-text-3) !important; }
.update-card li, .about-card p, .about-card li, .contact-card p, .policy-card p, .policy-card li, #guide-content .step-box p, .faq-a { color: var(--mb-text-2) !important; }
.update-date { background: var(--mb-accent) !important; color: var(--mb-on-accent) !important; }
.update-new { background: var(--mb-red) !important; color: #fff !important; }
.update-card li::before { background: var(--mb-accent) !important; }
.about-card li b, .policy-card a, #guide-content .accent, #guide-content .eyebrow, #guide-content .shot-ph .ph-file, .faq-q::before { color: var(--mb-accent) !important; }
#guide-content .hl-pink { color: var(--mb-red) !important; }
#guide-content .section-title .num {
    background: var(--mb-accent-soft) !important; color: var(--mb-accent) !important; border-radius: 50% !important;
}
#guide-content .cta, .contact-btn { background: var(--mb-accent) !important; color: var(--mb-on-accent) !important; border-radius: var(--mb-r-ctrl) !important; }
#guide-content .cta:hover, .contact-btn:hover { background: var(--mb-accent-hover) !important; }
.contact-btn.copied { background: var(--mb-green) !important; }
#guide-content .step-box figure.shot { border-radius: var(--mb-r-box) !important; overflow: hidden; }
#guide-content .step-box figure.shot img { border-radius: var(--mb-r-box) !important; }
#guide-content .divider { border-color: var(--mb-line) !important; background: var(--mb-line) !important; }
.faq-item { border-color: var(--mb-line) !important; }
.faq-q { color: var(--mb-text) !important; }
.contact-card:hover { border-color: var(--mb-accent) !important; }

/* 404 */
.home-btn { background: var(--mb-accent) !important; color: var(--mb-on-accent) !important; border-radius: var(--mb-r-ctrl) !important; }
.code { color: var(--mb-accent) !important; }

/* ---------- 렌더링 성능 힌트 ---------- */
/* transition: all → 필요한 속성만 (포탈 20~30개가 동시에 레이아웃을 다시 계산하지 않도록) */
.portal-link, .map-transition-portal {
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}
.sub-button { transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; }
.sub-button img { filter: none !important; }
.skill-card { transition: background-color 0.15s ease, border-color 0.15s ease !important; }
/* 맵 영역은 바깥 레이아웃과 분리 (패닝/줌 때 페이지 전체 리플로우 방지) */
#map-viewport, #worldmap-container { contain: layout paint; }
#map-container { backface-visibility: hidden; }
.intro-map-badge { backdrop-filter: none !important; background: rgba(15, 18, 24, 0.72) !important; }

/* ---------- 라이트 모드 우선순위 보정 ----------
   각 페이지 인라인 CSS에 body.light-mode 규칙이 있어 위 공통 규칙보다 우선순위가 높습니다.
   라이트 모드에도 동일하게 적용되어야 하는 항목은 여기서 다시 지정합니다. */
body.light-mode .sub-button:hover,
body.light-mode .skill-card:hover, body.light-mode .skill-card.active,
body.light-mode .info-mob-card, body.light-mode .intro-map-card,
body.light-mode .back-btn, body.light-mode .bgm-controller {
    box-shadow: none !important;
}
body.light-mode .sub-button:hover { background: var(--mb-card) !important; border-color: var(--mb-accent) !important; color: var(--mb-accent) !important; }
body.light-mode .intro-map-card { box-shadow: var(--mb-shadow) !important; }
body.light-mode .info-mob-stat-bg .stat-hp, body.light-mode .info-mob-stat-bg .stat-exp { color: var(--mb-text) !important; }
body.light-mode .portal-tooltip { box-shadow: var(--mb-shadow) !important; border-color: var(--mb-line) !important; }
body.light-mode .intro-hero-inner { box-shadow: var(--mb-shadow) !important; border-color: var(--mb-line) !important; }

/* 체력·경험치 수치: 굵은 Tahoma → 본문 폰트, 중간 굵기, 숫자 폭 고정 (다크/라이트 공통) */
.info-mob-stat-bg .stat-hp, .info-mob-stat-bg .stat-exp,
body.light-mode .info-mob-stat-bg .stat-hp, body.light-mode .info-mob-stat-bg .stat-exp {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    letter-spacing: -0.2px !important;
    font-variant-numeric: tabular-nums;
    color: var(--mb-text-2) !important;
}
.info-mob-stat-bg .stat-label, body.light-mode .info-mob-stat-bg .stat-label { font-weight: 500 !important; }

/* ---------- 시뮬레이터 상·하단 버튼: 크기·여백 통일 ---------- */
.map-header { margin-bottom: 0 !important; }
#map-viewport { margin: 14px 0 !important; }
.guide-bar { margin-top: 0 !important; }
.map-header, .guide-bar { height: 44px !important; }

.ui-btn, .map-header .back-btn, #reset-btn-header, #hitbox-btn, #platform-btn, #save-build-btn, #bgm-btn,
body.light-mode .ui-btn, body.light-mode .back-btn, body.light-mode #reset-btn-header, body.light-mode #hitbox-btn {
    box-sizing: border-box !important;
    height: 40px !important;
    min-width: 156px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: var(--mb-r-ctrl) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    white-space: nowrap !important;
    transform: none !important;
    box-shadow: none !important;
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}
.ui-btn:hover, body.light-mode .ui-btn:hover { transform: none !important; }
.map-header .back-btn, body.light-mode .map-header .back-btn { justify-content: center !important; }
#region-title { font-size: 20px !important; }

/* 토글 버튼(히트박스 / 발판 범위): 체크박스 공통 */
.toggle-btn, body.light-mode .toggle-btn { gap: 8px !important; padding: 0 14px !important; }
#platform-btn::before {
    content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 4px;
    border: 2px solid var(--mb-text-3); box-sizing: border-box; transition: all 0.2s ease-in-out;
    background-repeat: no-repeat; background-position: center; background-size: 10px 10px;
}
#platform-btn.checked-active { color: var(--mb-accent) !important; background: var(--mb-accent-soft) !important; border-color: transparent !important; }
#platform-btn.checked-active::before {
    background-color: var(--mb-accent); border-color: var(--mb-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191f28' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
body.light-mode #platform-btn.checked-active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/* BGM 컨트롤러: [BGM 재생] + 유튜브식 볼륨(아이콘 호버 시 슬라이더 펼침) */
.bgm-controller, body.light-mode .bgm-controller {
    height: 40px !important; min-height: 0 !important; padding: 0 !important;
    border-radius: var(--mb-r-ctrl) !important; overflow: visible !important;
    background: var(--mb-card-2) !important; border: 1px solid var(--mb-line) !important; box-shadow: none !important;
}
#bgm-btn, body.light-mode #bgm-btn {
    height: 38px !important; min-width: 118px !important;
    background: transparent !important; border: none !important; border-right: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-ctrl) 0 0 var(--mb-r-ctrl) !important; color: var(--mb-text-2) !important;
}
#bgm-btn.playing, body.light-mode #bgm-btn.playing { background: var(--mb-accent) !important; color: var(--mb-on-accent) !important; border-right-color: transparent !important; }
.volume-slider-wrapper, body.light-mode .volume-slider-wrapper { display: flex !important; align-items: center !important; height: 38px !important; padding: 0 6px 0 2px !important; gap: 0 !important; }
.volume-icon-btn {
    width: 36px !important; height: 38px !important; min-width: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important; cursor: pointer;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.volume-icon-btn .vol-icon { fill: var(--mb-text-2) !important; transition: fill 0.15s; }
.volume-icon-btn:hover .vol-icon { fill: var(--mb-text) !important; }
.volume-icon-btn .vol-off { display: none; }
.volume-slider-wrapper.muted .vol-on { display: none; }
.volume-slider-wrapper.muted .vol-off { display: inline; }
.volume-slider-track { width: 0; overflow: hidden; transition: width 0.2s ease; display: flex; align-items: center; }
.volume-slider-wrapper:hover .volume-slider-track,
.volume-slider-wrapper:focus-within .volume-slider-track { width: 78px; }
#bgm-volume, body.light-mode #bgm-volume {
    -webkit-appearance: none !important; appearance: none !important;
    width: 64px !important; height: 20px !important; margin: 0 8px 0 4px !important; background: transparent !important; cursor: pointer;
    --vol: 10%;
}
#bgm-volume::-webkit-slider-runnable-track, body.light-mode #bgm-volume::-webkit-slider-runnable-track {
    height: 3px !important; border-radius: 2px !important;
    background: linear-gradient(to right, var(--mb-text) 0 var(--vol), var(--mb-line) var(--vol) 100%) !important;
}
#bgm-volume::-webkit-slider-thumb, body.light-mode #bgm-volume::-webkit-slider-thumb {
    -webkit-appearance: none !important; width: 12px !important; height: 12px !important; border-radius: 50% !important;
    background: var(--mb-text) !important; border: none !important; margin-top: -4.5px !important; box-shadow: none !important;
}
#bgm-volume::-moz-range-track { height: 3px; border-radius: 2px; background: var(--mb-line); }
#bgm-volume::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--mb-text); }
#bgm-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--mb-text); border: none; }

/* 모바일: 하단 바 세로 배치 시 정리 */
@media screen and (max-width: 768px), screen and (max-height: 700px) {
    .map-header, .guide-bar { height: auto !important; }
    .guide-bar-left, .guide-bar-center, .guide-bar-right { justify-content: center !important; width: 100% !important; }
    .guide-bar-center { flex-wrap: wrap !important; }
    .bgm-controller { width: auto !important; }
    #hitbox-btn, #platform-btn { width: auto !important; padding: 0 16px 0 14px !important; background: var(--mb-card-2) !important; }
    #hitbox-btn.checked-active, #platform-btn.checked-active { background: var(--mb-accent-soft) !important; }
    .ui-btn, .map-header .back-btn, #reset-btn-header { min-width: 0 !important; height: 36px !important; padding: 0 12px !important; font-size: 12.5px !important; }
    .volume-slider-track { width: 78px !important; }
}

/* ---------- 발판 범위 버튼 아이콘: 체크박스(ㅁ) 대신 선(ㅡ) ----------
   꺼짐: 회색 선 / 켜짐: 포인트 색 선 (히트박스 체크박스와 동일, 다크=라임·라이트=블루) */
#platform-btn::before,
body.light-mode #platform-btn::before {
    content: "" !important;
    width: 18px !important; height: 4px !important;
    border: none !important; border-radius: 2px !important;
    background: var(--mb-text-3) !important;
    background-image: none !important;
    box-shadow: none !important;
}
#platform-btn.checked-active::before,
body.light-mode #platform-btn.checked-active::before {
    background: var(--mb-accent) !important;
    background-image: none !important;
}

/* 히트박스 버튼: 켜졌을 때 체크 표시 없이 네모만 포인트 색으로 채움 (다크·라이트 공통) */
#hitbox-btn.checked-active::before,
body.light-mode #hitbox-btn.checked-active::before {
    background-image: none !important;
    background-color: var(--mb-accent) !important;
    border-color: var(--mb-accent) !important;
}

/* ---------- 지역 몬스터 정보: 이름은 툴팁과 같은 색, 레벨은 이름 옆에 ---------- */
.info-mob-name, body.light-mode .info-mob-name {
    color: var(--mb-red) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.info-mob-name span, body.light-mode .info-mob-name span {
    display: inline !important;
    margin: 0 0 0 4px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--mb-text-3) !important;
    white-space: nowrap;
}
/* 체력은 빨강, 경험치는 파랑 (위 포스 카드와 같은 톤) */
.info-mob-stat-bg .stat-hp  { color: #ff6b78 !important; }
.info-mob-stat-bg .stat-exp { color: #5a9cff !important; }
body.light-mode .info-mob-stat-bg .stat-hp  { color: var(--mb-red) !important; }
body.light-mode .info-mob-stat-bg .stat-exp { color: var(--mb-blue) !important; }


/* ---------- 광고 영역 (다크/라이트 공통) ---------- */
/* 광고가 실제로 채워졌을 때만 여백과 'AD' 표시가 생김 → 광고 차단·미게재 시 빈칸이 남지 않음 */
.mb-ad { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; text-align: center; clear: both; }
.mb-ad-label { display: none; margin-bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 1px; color: var(--mb-text-3); }
.mb-ad:has(ins[data-ad-status="filled"]) { margin: 36px auto; }
.mb-ad:has(ins[data-ad-status="filled"]) .mb-ad-label { display: block; }
.mb-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
#main-page > .mb-ad, #guide-content > .mb-ad { padding: 0; }

/* 월드맵 아래 가로 광고 — 월드맵이 숨겨지면 같이 숨김 */
.mb-ad.mb-ad-wm { width: min(1280px, calc(100vw - 40px)); max-width: none; padding: 0; }
.mb-ad.mb-ad-wm:has(ins[data-ad-status="filled"]) { margin: 24px auto 8px auto; }
#worldmap-ui[style*="display: none"] + .mb-ad-wm { display: none; }
/* 시뮬레이터 양옆 세로 광고 (위치는 스크립트가 빈 공간에 맞춰 계산) */
.mb-side-ad { display: none; position: absolute; width: 160px; z-index: 1; text-align: center; }
.mb-side-ad.show { display: block; }
.mb-side-ad .mb-ad-label { display: none; margin-bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 1px; color: var(--mb-text-3); }
.mb-side-ad:has(ins[data-ad-status="filled"]) .mb-ad-label { display: block; }
.mb-side-ad:has(ins[data-ad-status="unfilled"]) { visibility: hidden; }

/* 넓은 화면(1600px 이상)에서는 시뮬레이터 양옆에 광고 자리(각 208px)를 비워 둠 */
@media (min-width: 1600px) {
    #simulator-main.simulator-main { width: calc(100% - 416px) !important; max-width: none !important; }
}