/* [v481] AI Bunker Global Layout Style System */

/* [v457] Critical Loader CSS - Moved to top of head for maximum stability */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-body, #191919);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.25s ease-in-out, visibility 0.25s;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(var(--accent-rgb, 67, 97, 238), 0.1);
    border-top: 3px solid var(--accent, #4361EE);
    border-radius: 50%;
    animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: var(--loader-delay, 0ms);
    margin-bottom: 20px;
    will-change: transform;
}

.loader-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem !important;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--accent, #4361EE);
    opacity: 0.8;
    white-space: nowrap;
    width: 280px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    line-height: 40px;
    transition: none !important;
    transform: none !important;
    animation: none !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* [v720] Forever Persistent Loader Protection (Anti-Flicker) */
#global-loader {
    display: flex;
    /* 초기 상태 노출 보장 */
}

/* data-loading 속성이 있을 때만 완벽 노출 */
html[data-loading="true"] #global-loader {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* loaded 클래스가 있거나 data-loading이 없을 때 부드럽게 숨김 (v720 전용) */
html:not([data-loading="true"]) #global-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* [v450] Persistent Mini Player Styles */
#mini-player-bar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: none;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    backdrop-filter: blur(10px);
}

#mini-player-bar.active {
    display: block;
    animation: miniPlayerSlideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes miniPlayerSlideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mini-player-header {
    padding: 10px 15px;
    background: var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.mini-player-title {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    color: white;
}

.mini-player-header .mini-ctrl-btn {
    color: white;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.mini-player-header .mini-ctrl-btn:hover {
    opacity: 1;
    color: white;
}

.mini-play-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mini-play-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.mini-sub-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.mini-sub-btn:hover {
    color: var(--accent);
}

.mini-sub-btn:focus,
.mini-sub-btn:active {
    outline: none !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
}

/* [모바일 슬라이드 숨기기] */
@media (max-width: 768px) {
    #mini-player-bar.mobile-hidden {
        transform: translateX(calc(100% - 42px)) !important;
        border-radius: 16px 0 0 16px !important;
    }

    #mini-player-bar.mobile-hidden .mini-hide-tab {
        opacity: 1;
    }

    .mini-hide-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 48px;
        background: var(--accent);
        border-radius: 10px 0 0 10px;
        cursor: pointer;
        position: absolute;
        left: -36px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10000;
        box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
        color: white;
        font-size: 1rem;
        transition: background 0.2s;
    }

    .mini-hide-tab:hover {
        background: var(--primary-brown-dark);
    }
}

@media (min-width: 769px) {
    .mini-hide-tab {
        display: none !important;
    }
}

.mini-player-content {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}

#mini-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mini-player-controls {
    padding: 8px 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.mini-ctrl-btn {
    background: none !important;
    border: none !important;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px !important;
    line-height: 1 !important;
}

.mini-player-header .mini-ctrl-btn {
    color: white !important;
    font-size: 1.2rem !important;
}

.mini-ctrl-btn:hover {
    color: var(--accent);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    #mini-player-bar {
        width: calc(100% - 20px);
        right: 0;
        bottom: 80px;
        border-radius: 16px 0 0 16px;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mini-player-content {
        position: absolute;
        top: -9999px;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0.01;
        pointer-events: none;
        visibility: visible !important;
        display: block !important;
    }
}

/* [v455] Switch Style Toggle (Shared) */
.theme-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.4s ease;
    border: none;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

[data-theme='dark'] .theme-switch:not(.mini-switch) {
    background: #A29BFE !important;
}

.theme-switch.mini-switch.active {
    background: var(--accent) !important;
}

.theme-switch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffb5a7;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

[data-theme='dark'] .theme-switch:not(.mini-switch)::before,
.theme-switch.mini-switch.active::before {
    transform: translateX(0);
}

.theme-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

[data-theme='dark'] .theme-switch:not(.mini-switch)::after,
.theme-switch.mini-switch.active::after {
    transform: translateX(24px);
}

/* --- CSS Block --- */

:root {
    --base: #FFFFFF;
    --sub1: #A47864;
    --deep: #2C3E50;
    --accent: #A47864;
    --accent-rgb: 164, 120, 100;
    --primary-brown: #A47864;
    --primary-brown-dark: #865d4b;
    --bg-body: #FFFFFF;
    --bg-sidebar: rgba(219, 203, 180, 1);
    --bg-sidebar-control: rgba(233, 226, 213, 0.4);
    --bg-card: #FFFFFF;
    --bg-input: #f8f6f2;
    --bg-modal: #FFFFFF;
    --bg-submenu: rgba(0, 0, 0, 0.03);
    --bg-hover: rgba(164, 120, 100, 0.05);
    --text-primary: #2C3E50;
    --text-secondary: #483C32;
    --text-muted: #888;
    --text-label: rgba(61, 61, 61, 0.35);
    --border-light: rgba(0, 0, 0, 0.08);
    --border-sidebar: rgba(0, 0, 0, 0.1);
    --shadow-card: rgba(0, 0, 0, 0.08);
    --search-bg: #333;
    --menu-toggle-bg: rgba(255, 255, 255, 0.6);
    --navbar-text: #483C32;
}

[data-theme='dark'] {
    --base: #191919;
    --sub1: #ffb5a7;
    /* 웜 핑크 적용 */
    --deep: #FFFFFF;
    --accent: #ffb5a7;
    --accent-rgb: 255, 181, 167;
    --primary-brown: #ffb5a7;
    --primary-brown-dark: #f2745f;
    --bg-body: #191919;
    --bg-sidebar: #202020;
    --bg-sidebar-control: #2b2b2b;
    --bg-card: #252525;
    --bg-input: #2b2b2b;
    --bg-modal: #252525;
    --bg-submenu: rgba(255, 255, 255, 0.03);
    --bg-hover: rgba(255, 181, 167, 0.08);
    /* 웜 핑크 기반 다크 호버 */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.45);
    --text-label: rgba(255, 255, 255, 0.2);
    --border-light: #373737;
    --border-sidebar: #373737;
    --shadow-card: rgba(0, 0, 0, 0.5);
    --search-bg: #373737;
    --menu-toggle-bg: #2b2b2b;
    --navbar-text: rgba(255, 255, 255, 0.85);
}

/* [v293] Loader Logo Color for Dark Mode */
[data-theme='dark'] .loader-logo {
    color: #FFFFFF !important;
}

/* 메뉴 호버 및 프로필 배경 버그 수정 */
[data-theme='dark'] .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme='dark'] .submenu-link:hover {
    background-color: transparent !important;
}

[data-theme='dark'] .nav-link:hover,
[data-theme='dark'] .nav-link[aria-expanded="true"],
[data-theme='dark'] .nav-link.active {
    background-color: transparent !important;
}

[data-theme='dark'] .sidebar-top-profile,
[data-theme='dark'] .sidebar-profile-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.sidebar-top-profile {
    margin: 0 !important;
    padding: 0 !important;
}

/* 사이드바 서브메뉴 가시성 강화 (v146) */
[data-theme='dark'] .submenu-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme='dark'] .submenu-link:hover {
    color: var(--accent) !important;
}

/* 전역 다크모드 텍스트 가시성 개선 (v147) */
[data-theme='dark'] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme='dark'] .text-dark {
    color: var(--text-primary) !important;
}

/* 하드코딩된 어두운 글자색 전역 오버라이드 */
[data-theme='dark'] [style*="color: #333"],
[data-theme='dark'] [style*="color: #000"],
[data-theme='dark'] [style*="color: #222"],
[data-theme='dark'] [style*="color: #111"],
[data-theme='dark'] [style*="color: black"],
[data-theme='dark'] [style*="color: #483C32"],
[data-theme='dark'] [style*="color:#333"],
[data-theme='dark'] [style*="color:#000"],
[data-theme='dark'] [style*="color:#483C32"],
[data-theme='dark'] [style*="color: #2c3e50;"],
[data-theme='dark'] [style*="color:#2c3e50;"] {
    color: var(--text-primary) !important;
}

/* 전역 테이블 다크모드 가시성 보장 */
[data-theme='dark'] .table-wrapper,
[data-theme='dark'] .bg-white.table-wrapper {
    background-color: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme='dark'] .table,
[data-theme='dark'] .table td,
[data-theme='dark'] .table th,
[data-theme='dark'] .table tbody td {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-light) !important;
}

[data-theme='dark'] .table-light th {
    background-color: var(--bg-sidebar-control) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-light) !important;
}

[data-theme='dark'] .table-hover tbody tr:hover td {
    background-color: transparent !important;
    /* rows have hover bg, not tds */
    color: var(--text-primary) !important;
}

[data-theme='dark'] .table-hover tbody tr:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* 전역 테마 버튼 및 게이지 오버라이드 (v145) */
.btn-primary,
.btn-success {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

input[type="range"] {
    accent-color: var(--accent);
}

.progress {
    background-color: var(--bg-input) !important;
}

.progress-bar {
    background-color: var(--accent) !important;
}

[data-theme='dark'] input[type="range"] {
    background: #2b2b2b;
    border-radius: 10px;
}

.btn-primary:hover,
.btn-success:hover {
    background-color: var(--primary-brown-dark) !important;
    border-color: var(--primary-brown-dark) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* [v501] Premium Notification Badge (Red Capsule) */
.notification-badge {
    position: absolute;
    top: -2px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #FF3B30 !important;
    /* iOS Style Red */
    color: #FFFFFF !important;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid var(--bg-sidebar);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    background-color: var(--accent) !important;
    color: #fff !important;
}

.bg-success {
    background-color: var(--accent) !important;
}

.text-success {
    color: var(--accent) !important;
}

/* [v730] 전역 스크롤바 커스텀: 시각적으로는 숨기되 기능은 유지 (IntersectionObserver 호환) */
html {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

::-webkit-scrollbar {
    display: none;
    /* Safari/Chrome */
    width: 0;
    height: 0;
}

/* 스크롤 트랙 및 핸들을 투명하게 처리 (v732) */
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    background: transparent !important;
}

::-webkit-scrollbar-thumb:hover {
    background: transparent !important;
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: transparent !important;
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: transparent !important;
}

/* Firefox용 전역 스크롤바 얇은 옵션 설정 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(164, 120, 100, 0.15) transparent;
}

[data-theme='dark'] * {
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

html,
body {
    /* [v735] Robust Scroll Recovery: Ensure scroll is NEVER locked globally */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 0;
}

html {
    min-height: 100%;
    background-color: var(--bg-body) !important;
    /* [v235] 모바일 하단 여백 버그 해결: html 배경색을 테마색으로 고정 */
}

/* 파티클이 준비되었을 때만 body를 투명화하여 배경 노출 (html은 배경색 유지) */
html.bg-particles-ready body {
    background-color: transparent !important;
}

body {
    background-color: var(--bg-body) !important;
    /* [v234] 파티클 준비 전까지는 불투명 유지 */
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    font-family: 'Pretendard', sans-serif;
    color: var(--text-primary);
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* 실제 배경색을 담당하는 레이어 (v120) */
#bg-layers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    /* dynamic viewport height */
    background: var(--bg-body) !important;
    z-index: -5 !important;
    /* 최하단 (v202) */
    transition: background-color 0.4s ease;
}

body.modal-open {
    /* overflow: hidden 제거 (v712) - 스크롤 보존을 위해 auto 사용 장려 */
    overflow-y: auto !important;
}

/* [v900] 타임라인 뷰 모드 전용 스크롤 잠금 (GIS 타임라인 진입 시 body에 토글) */
body.timeline-active,
html.timeline-active {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

/* ── 모달 스크롤 디자인 리뉴얼 (이미지 고정 + 글 스크롤 + 가로 진행바) ── */
.modal-body.split-scroll-body {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden !important;
    padding: 0 !important;
}

/* 패션 갤러리 PC 레이아웃 (좌우 분할) */
@media (min-width: 992px) {
    .fashion-modal-body.split-scroll-body {
        flex-direction: row;
        height: 90vh;
        /* 높이 약간 확대 (v155) */
    }
}

/* 스크롤 가능한 상세 내용 박스 */
.scrollable-detail-box {
    flex-grow: 1;
    overflow-y: auto !important;
    scrollbar-width: none;
    /* Firefox 스크롤바 숨김 */
    -ms-overflow-style: none;
    /* IE/Edge 스크롤바 숨김 */
    position: relative;
}

.scrollable-detail-box::-webkit-scrollbar {
    display: none !important;
    /* Chrome/Safari 스크롤바 숨김 */
}

/* 사진-글 경계 가로 스크롤 진행바 */
.scroll-progress-container {
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, 0.05);
    position: relative;
    flex-shrink: 0;
    z-index: 10;
}

[data-theme='dark'] .scroll-progress-container {
    background: rgba(255, 255, 255, 0.05);
}

.scroll-progress-bar {
    width: 0%;
    height: 100%;
    background: #a47864;
    /* Light 모드: 브라운 (v155) */
    transition: width 0.1s;
}

[data-theme='dark'] .scroll-progress-bar {
    background: #15aabf;
    /* Dark 모드: 민트/시안 (v155) */
}

/* 수직 스크롤 진행바 (패션 모달 경계선용) */
.vertical-scroll-progress-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: rgba(0, 0, 0, 0.03);
    z-index: 100;
    flex-shrink: 0;
}

[data-theme='dark'] .vertical-scroll-progress-container {
    background: rgba(255, 255, 255, 0.03);
}

.vertical-scroll-progress-bar {
    width: 100%;
    height: 0%;
    background: #a47864;
    transition: height 0.1s;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

[data-theme='dark'] .vertical-scroll-progress-bar {
    background: #15aabf;
    box-shadow: 0 0 10px rgba(21, 170, 191, 0.3);
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.1s ease-out;
}

[data-theme='dark'] .scroll-progress-bar {
    background: #ffb5a7;
    box-shadow: 0 0 10px rgba(255, 181, 167, 0.5);
}

/* 패션 PC 버전용 가로 진행바 위치 (우측 패널 상단) */
@media (min-width: 992px) {
    .fashion-info-side {
        position: relative;
    }

    .fashion-progress-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}

/* 배경 레이어 (파티클 캔버스보다 아래) */
.dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -4 !important;
    background: none !important;
}

#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1 !important;
    /* 콘텐츠 바로 뒤 (v205) */
    pointer-events: none;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* PC 버전 전역 스크롤바 완전 은폐 (v715) */
@media (min-width: 992px) {

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    * {
        scrollbar-width: none !important;
    }
}

/* ── 전역 맞춤형 스크롤 인디케이터 (사이드바 경계선) ── */
.global-scroll-indicator-container {
    position: fixed;
    left: 200px; /* 사이드바 바깥 (199px -> 200px로 수정) */
    top: 0;
    width: 3px; /* 가시성 향상을 위해 2px -> 3px로 수정 */
    height: 100vh;
    background: transparent;
    z-index: 1060;
    pointer-events: none;
}

.global-scroll-indicator-bar {
    width: 100%;
    height: 0%;
    background: var(--accent);
    transition: height 0.1s ease-out;
    box-shadow: 0 0 10px var(--accent);
}

/* 사이드바 설정 (v288 최적화) */
.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 200px !important;
    height: 100vh;
    background: var(--bg-sidebar) !important;
    z-index: 1050;
    transition: transform 0.3s ease-in-out, background-color 0.4s ease;
    padding: 20px 0 !important;
    /* 패딩 축소 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-right: 1px solid var(--border-sidebar);
    overflow: hidden !important;
    /* 사이드바 자체 스크롤 완전 방지 */
}

.navbar .sidebar-content-wrapper {
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    /* 상단 밀집 배치 (v340) */
    overflow-y: auto !important;
    /* 사이드바 내부 스크롤 허용 */
    overflow-x: hidden !important;
}

.sidebar-wrapper {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE/Edge */
}

.sidebar-wrapper::-webkit-scrollbar {
    display: none !important;
    /* Chrome/Safari */
}

.brand-bunker-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 10px 5px 10px;
    /* 패딩 대폭 축소 (v330) */
    background: transparent;
}

.bunker-logo {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}


.bunker-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.text-top {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 4px;
    margin-bottom: 4px;
}

.text-main {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-primary) !important;
    letter-spacing: -0.5px;
}

.text-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
}

/* [v290] 벙커 로고: Hover glow & Click press effect */
.bunker-logo:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 8px rgba(164, 120, 100, 0.6));
}

.bunker-logo:hover .text-main {
    color: #A47864 !important;
    -webkit-text-fill-color: #A47864;
}

[data-theme='dark'] .bunker-logo:hover {
    filter: drop-shadow(0 0 10px rgba(255, 181, 167, 0.7));
}

[data-theme='dark'] .bunker-logo:hover .text-main {
    color: #ffb5a7 !important;
    -webkit-text-fill-color: #ffb5a7;
}

.bunker-logo:active {
    transform: scale(0.94);
    filter: drop-shadow(0 0 4px rgba(164, 120, 100, 0.3));
    transition: transform 0.1s ease;
}



.sidebar-top-widget {
    background: var(--bg-sidebar-control);
    backdrop-filter: blur(15px);
    margin: 15px 10px 30px 10px !important;
    padding: 12px 14px;
    border-radius: 24px;
    border: 1px solid var(--border-sidebar);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px var(--shadow-card);
    transition: all 0.4s ease;
}

.sidebar-top-controls {
    display: flex;
    align-items: center;
    background: transparent !important;
    backdrop-filter: none !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border: none !important;
    width: 100% !important;
    box-shadow: none !important;
    gap: 12px;
}

.visitor-counter-mini {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex-grow: 1;
}

.visitor-mini-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.v-label {
    font-size: 0.4rem;
    color: var(--text-label);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 25px;
}

.v-count {
    font-size: 0.65rem;
    /* 폰트 크기를 더 작게 하여 많은 숫자에 대응 */
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.2px;
}

.search-trigger-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--search-bg);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--shadow-card);
}

.search-trigger-btn:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

/* 왼쪽 아이콘과 텍스트를 하나로 묶기 위한 래퍼 */
.nav-link-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 오른쪽 뱃지와 화살표를 묶기 위한 래퍼 */
.nav-link-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 하단 프로필 섹션 */
.sidebar-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0px 10px !important;
    text-decoration: none;
    color: inherit;
    width: 88%;
    margin: 10px auto 40px auto;
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.sidebar-profile-card:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.sidebar-profile-card:hover .profile-img,
.sidebar-profile-card:hover .profile-placeholder {
    transform: scale(1.2);
    border-color: var(--accent);
    z-index: 5;
}

.profile-img,
.profile-placeholder {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    transition: transform 0.3s ease;
    margin-top: 5px;
    margin-bottom: 2px;
}

.profile-placeholder {
    background: rgba(164, 120, 100, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--navbar-text);
    white-space: nowrap !important;
    margin-top: 5px;
}

.profile-role {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.6;
    text-transform: uppercase;
}

.sidebar-footer {
    margin-top: auto;
    width: 100%;
    padding: 15px 15px;
    text-align: center;
    font-size: 0.7rem;
    opacity: 0.7;
    color: var(--text-secondary);
    border-top: none !important;
    flex-shrink: 0 !important;
}

/* 프로필 배경 완벽 제거 */
[data-theme='dark'] .sidebar-top-profile,
[data-theme='dark'] .sidebar-profile-card,
[data-theme='dark'] .sidebar-top-profile *,
[data-theme='dark'] .sidebar-profile-card * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 네비게이션 메뉴 */
.navbar-nav {
    width: 100%;
    flex-direction: column !important;
    border-top: 1px solid var(--border-light);
    box-shadow: none;
    margin-top: 30px !important;
    /* 메뉴 상단 여백 확보 (v350) */
}

.nav-item {
    width: 100%;
    border-bottom: 1px solid var(--border-light);
    box-shadow: none;
    transition: all 0.3s ease;
}

.nav-item:hover {
    background-color: var(--bg-hover);
}

.nav-link {
    padding: 16px 20px !important;
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--navbar-text) !important;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* 왼쪽 아이콘과 텍스트를 하나로 묶기 위한 래퍼 */
.nav-link-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 오른쪽 뱃지와 화살표를 묶기 위한 래퍼 */
.nav-link-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover {
    color: var(--accent) !important;
    background-color: var(--bg-hover);
}

.nav-link[aria-expanded="true"],
.nav-link.active {
    color: var(--accent) !important;
    background-color: var(--bg-hover);
}

.nav-link[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.nav-link i.bi-chevron-down {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* 하위 메뉴 스타일 (v46) */
.submenu-list {
    background: var(--bg-submenu);
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border-light);
}

/* [v310] 모바일 메뉴 우측 영역 활용을 위한 배지 스타일 */
.menu-badge {
    font-size: 0.65rem;
    background: rgba(164, 120, 100, 0.1);
    /* Soft brown for light mode */
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 800;
    border: 1px solid rgba(164, 120, 100, 0.2);
    white-space: nowrap;
    transition: all 0.3s ease;
}

[data-theme='dark'] .menu-badge {
    background: rgba(255, 181, 167, 0.15);
    /* Soft pink for dark mode */
    color: var(--accent);
    border-color: rgba(255, 181, 167, 0.3);
}

.submenu-item {
    border: none !important;
    box-shadow: none !important;
}

.submenu-link {
    padding: 12px 20px 12px 40px !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    color: var(--text-muted) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.submenu-link:hover {
    color: var(--accent) !important;
    padding-left: 45px !important;
    background: var(--bg-hover);
}

.submenu-link.active {
    color: var(--accent) !important;
    background: var(--bg-hover);
    border-right: 3px solid var(--accent);
}

.submenu-link i {
    font-size: 1rem;
    opacity: 0.7;
    background: transparent !important;
    box-shadow: none !important;
    /* [v240] 다크모드 검정 사각형 버그 완전 수정 */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

[data-theme='dark'] .submenu-link i,
[data-theme='dark'] .bi {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* 메인 콘텐츠 영역 (v38) */
.main-content {
    margin-left: 200px;
    width: calc(100% - 200px);
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    transition: all 0.3s ease;
    position: relative;
    min-height: 100vh;
    display: block;
    /* Flex 대신 Block으로 변경하여 내부 자식의 margin: auto 작동 보장 */
    overflow: visible;
}

/* [중요] 모든 트레이닝 모듈의 최상위 래퍼를 강제 중앙 정렬 */
.editorial-wrapper,
.cube-container,
.chess-container,
.container.mt-5 {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* 폰트/스타일 태그 노출 방지 보호막 */
.main-content style,
.main-content script {
    display: none !important;
}

/* PC 해상도 축소 시 사이드바 최적화 (992px - 1300px) */
@media (min-width: 992px) and (max-width: 1300px) {
    #side-nav {
        width: 180px !important;
    }

    .sidebar-wrapper .nav-link {
        font-size: 0.95rem !important;
    }

    .brand-bunker-wrapper .text-main {
        font-size: 1.1rem !important;
    }

    .brand-bunker-wrapper .text-top {
        font-size: 0.55rem !important;
    }

    .main-content {
        margin-left: 180px !important;
        width: calc(100% - 180px) !important;
    }

    .sidebar-profile-card {
        padding: 10px !important;
    }

    .profile-name {
        font-size: 0.8rem !important;
    }
}

/* 모바일 대응 */
@media (max-width: 991px) {

    .global-scroll-indicator-container {
        display: none !important;
    }

    /* [v156] 모바일 스크롤바 완전 숨김 */
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    *::-webkit-scrollbar {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding-top: 80px !important;
    }

    .navbar {
        width: 60% !important;
        /* 60% 너비 적용 (v289) */
        height: 100dvh !important;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        z-index: 10000;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s;
        border-right: 1px solid var(--border-light);
    }

    .navbar.show {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    /* 모바일 사이드바 배경 오버레이 (v288) */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    #menu-toggle.hide {
        display: none;
    }

    .mobile-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        z-index: 9998;
        background: transparent;
        transition: transform 0.3s ease;
        pointer-events: none;
    }

    /* [v156] 메뉴 버튼 원형 프로그레스 래퍼 */
    .menu-progress-wrapper {
        position: absolute;
        top: 15px;
        left: 20px;
        width: 48px;
        height: 48px;
        z-index: 9999;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #menu-toggle {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--menu-toggle-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 12px var(--shadow-card);
        color: var(--text-primary);
        margin: 0;
        padding: 0;
    }

    /* [v156] 감각적인 원형 진행바 SVG */
    .menu-progress-svg {
        position: absolute;
        top: -4px;
        left: -4px;
        width: 56px;
        height: 56px;
        transform: rotate(-90deg);
        pointer-events: none;
    }

    .menu-progress-bg {
        fill: none;
        stroke: rgba(0, 0, 0, 0.06);
        stroke-width: 2.5;
    }

    [data-theme='dark'] .menu-progress-bg {
        stroke: rgba(255, 255, 255, 0.06);
    }

    .menu-progress-circle {
        fill: none;
        stroke: var(--accent);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: 157;
        /* 2 * PI * 25 ≈ 157 */
        stroke-dashoffset: 157;
        transition: stroke-dashoffset 0.15s ease-out;
    }

    [data-theme='dark'] .menu-progress-circle {
        stroke: #15aabf;
        filter: drop-shadow(0 0 8px rgba(21, 170, 191, 0.6));
    }

    body.login-page #menu-toggle,
    body.signup-page #menu-toggle,
    body.modal-open #menu-toggle {
        display: none !important;
    }

    #menu-toggle:hover {
        background: var(--accent);
        color: #fff;
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        border-color: var(--accent);
    }

    /* 모바일 사이드바 내부 요소 정렬 보강 */
    .mobile-side-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: 100% !important;
        /* 고정 높이 100% */
        justify-content: flex-start !important;
        /* 상단 밀집 배치 (v340) */
        padding: 10px 0 !important;
    }

    .sidebar-wrapper {
        width: 100% !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 5px !important;
    }

    .sidebar-wrapper .navbar-nav {
        display: flex !important;
        width: 100% !important;
        gap: 2px !important;
        /* 간격 축소 */
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    .sidebar-wrapper .nav-item {
        display: block !important;
        width: 100% !important;
    }

    .sidebar-wrapper .nav-link {
        font-size: 1rem !important;
        padding: 8px 25px !important;
        /* [v201] 테마별 메뉴 가시성 개선 */
        color: var(--text-primary) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        display: flex !important;
        justify-content: flex-start !important;
        /* [v455] Center -> Left align as requested */
        padding-left: 45px !important;
        /* [v455] Added padding for left alignment */
        padding-right: 20px !important;
        text-decoration: none !important;
        gap: 15px;
    }

    /* [v201] 다크모드/라이트모드 세부 조정 */
    [data-theme='dark'] .sidebar-wrapper .nav-link,
    [data-theme='dark'] .sidebar-wrapper .submenu-link {
        color: #f0f0f0 !important;
        /* 밝은 그레이 */
    }

    [data-theme='light'] .sidebar-wrapper .nav-link,
    [data-theme='light'] .sidebar-wrapper .submenu-link {
        color: #483C32 !important;
        /* 밤색 */
    }

    /* 하위 메뉴 가독성 추가 보강 (v202) */
    .sidebar-wrapper .submenu-link {
        font-size: 0.95rem !important;
        opacity: 0.9 !important;
        padding-left: 35px !important;
    }

    [data-theme='light'] .sidebar-content-wrapper .submenu-link {
        color: #483C32 !important;
        /* [v207] 흐릿한 회색에서 진한 갈색으로 보정 */
        font-weight: 600 !important;
    }

    [data-theme='dark'] .sidebar-wrapper .submenu-link {
        color: #f0f0f0 !important;
    }

    .sidebar-footer {
        margin-top: 0 !important;
        /* [v205] 추가 여백 제거 */
        padding-top: 0 !important;
        padding-bottom: 20px !important;
        width: 100% !important;
    }

    .sidebar-footer p {
        margin-top: 5px !important;
    }

    /* 모바일 사이드바 내부 스크롤 허용 및 배경 고정 (v115: Scrollbar Hidden) */
    .navbar {
        /* overflow: hidden 제거 (v712) */
        overflow-y: auto !important;
        background: var(--bg-sidebar) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mobile-side-container {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        padding: 0 !important;
        overflow-y: auto !important;
    }

    .sidebar-wrapper {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .sidebar-wrapper::-webkit-scrollbar {
        display: none;
    }

    .brand-bunker-wrapper,
    .sidebar-top-profile,
    .sidebar-tools-widget,
    .sidebar-footer {
        flex-shrink: 0 !important;
    }

    /* 프리미엄 모달 모바일 최적화 (v29) */
    .nav-modal-content {
        padding: 35px 20px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        border-radius: 30px !important;
        width: 85% !important;
    }

    .nav-modal-header {
        margin-bottom: 25px !important;
    }

    .nav-modal-subtitle {
        font-size: 0.7rem !important;
        word-break: keep-all !important;
    }

    .nav-menu-grid {
        gap: 12px !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* 모바일에서 2열 배치 (v30) */
    }

    .nav-menu-card {
        padding: 15px 10px !important;
        flex-direction: column !important;
        /* 가로 배열에서 다시 세로 배열로 (v30) */
        justify-content: center !important;
        gap: 10px !important;
        border-radius: 20px !important;
    }

    .nav-menu-card i {
        font-size: 1.4rem !important;
    }

    .nav-menu-card span {
        font-size: 0.9rem !important;
        /* 폰트 약간 축소 (v30) */
        text-align: center;
    }

    /* 커스텀 스크롤바 (모달 전용) */
    .nav-modal-content::-webkit-scrollbar {
        width: 5px;
    }

    .nav-modal-content::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    /* 모바일에 최적화된 사이드바 세부 간격 조정 (v320) */
    .brand-bunker-wrapper {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .sidebar-top-profile {
        margin: 0 !important;
        padding: 5px 0 !important;
    }

    .profile-img,
    .profile-placeholder {
        width: 48px !important;
        height: 48px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .profile-name {
        font-size: 0.85rem !important;
        margin-top: 2px !important;
    }

    .sidebar-tools-widget {
        margin: 8px 15px !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .sidebar-footer {
        padding-bottom: 15px !important;
        margin-top: 0 !important;
    }

    .sidebar-social-links {
        margin-bottom: 3px !important;
        gap: 12px !important;
    }
}

/* 프리미엄 모달 스타일 */
.nav-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.nav-modal-overlay.show {
    opacity: 1;
}

.nav-modal-content {
    background: var(--bg-modal);
    width: 90%;
    max-width: 800px;
    padding: 50px;
    border-radius: 40px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* PC 버전 모달/팝업 콘텐츠 영역(사이드바 제외) 중앙 정렬 (v37.2) */
@media (min-width: 992px) {
    .modal-dialog {
        /* 기본 200px 사이드바 기준 마진 */
        margin-left: calc(50% - (var(--modal-width, 500px) / 2) + 100px) !important;
    }

    @media (max-width: 1300px) {
        .modal-dialog {
            /* 축소된 180px 사이드바 기준 마진 */
            margin-left: calc(50% - (var(--modal-width, 500px) / 2) + 90px) !important;
        }
    }

    .modal-xl {
        --modal-width: 1140px;
    }

    .modal-lg {
        --modal-width: 800px;
    }

    .modal-md {
        --modal-width: 500px;
    }

    .modal-sm {
        --modal-width: 300px;
    }

    .nav-modal-content,
    .search-modal-content {
        margin-left: 100px !important;
    }

    @media (max-width: 1300px) {

        .nav-modal-content,
        .search-modal-content {
            margin-left: 90px !important;
        }
    }
}

.nav-modal-overlay.show .nav-modal-content {
    transform: translateY(0) scale(1);
}

.nav-modal-header {
    text-align: center;
    margin-bottom: 40px;
}

.nav-modal-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    color: var(--deep);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.nav-menu-card {
    background: var(--bg-submenu);
    border-radius: 25px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.nav-menu-card i {
    font-size: 2rem;
    color: var(--sub1);
}

.nav-menu-card:hover {
    transform: translateY(-8px);
    background: var(--bg-card);
    box-shadow: 0 15px 35px var(--shadow-card);
}

/* 검색 모달 스타일 */
.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(233, 226, 213, 0.4);
    backdrop-filter: blur(15px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.search-modal-content {
    background-color: var(--bg-modal);
    width: 90%;
    max-width: 500px;
    padding: 35px;
    border-radius: 32px;
    box-shadow: 0 45px 110px rgba(0, 0, 0, 0.4);
    position: relative;
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}


.modal-search-input {
    width: 100%;
    height: 55px;
    border-radius: 18px;
    border: none;
    background: var(--bg-input);
    color: var(--text-primary);
    padding: 0 20px;
    margin-bottom: 20px;
}

.modal-search-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 12px 25px;
    font-weight: 700;
    width: auto;
    min-width: 120px;
    transition: all 0.3s ease;
}

.modal-search-btn:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(164, 120, 100, 0.4);
    color: #fff;
}

/* 검색 모드 토글 버튼 (v31) */
.search-mode-toggle {
    display: flex;
    background: var(--bg-input);
    padding: 5px;
    border-radius: 18px;
    gap: 5px;
}

.search-mode-btn {
    border: none;
    background: transparent;
    padding: 8px 15px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.search-mode-btn.active {
    background: var(--bg-card);
    color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow-card);
}

.search-mode-btn:hover:not(.active) {
    color: var(--accent);
    background: var(--bg-hover);
}

/* 다크모드 전역 보정 */
[data-theme='dark'] .container,
[data-theme='dark'] .main-content {
    color: var(--text-primary);
}

[data-theme='dark'] .text-dark,
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6 {
    color: var(--text-primary) !important;
}

[data-theme='dark'] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme='dark'] .text-secondary {
    color: var(--text-secondary) !important;
}

[data-theme='dark'] .card,
[data-theme='dark'] .modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* [v210] 프로필 배경 완벽 제거 (전역 강제 적용) */
[data-theme='dark'] .sidebar-top-profile,
[data-theme='dark'] .sidebar-profile-card,
[data-theme='dark'] .sidebar-top-profile *,
[data-theme='dark'] .sidebar-profile-card * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

[data-theme='dark'] .border,
[data-theme='dark'] .border-top,
[data-theme='dark'] .border-bottom {
    border-color: var(--border-light) !important;
}

[data-theme='dark'] hr {
    border-color: var(--border-light);
    opacity: 0.3;
}

[data-theme='dark'] .badge.bg-primary {
    background-color: var(--accent) !important;
}

[data-theme='dark'] .form-control,
[data-theme='dark'] .form-select,
[data-theme='dark'] input:not([type="range"]),
[data-theme='dark'] textarea,
[data-theme='dark'] select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* [v150] 전역 슬라이더 & 게이지 다크모드 웜 핑크 테마 보강 */
[data-theme='dark'] input[type="range"] {
    accent-color: var(--accent) !important;
}

[data-theme='dark'] .progress-bar {
    background-color: var(--accent) !important;
    color: #fff !important;
}

/* Webkit Browsers Slider Special handling */
[data-theme='dark'] input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

[data-theme='dark'] input[type="range"]::-webkit-slider-thumb {
    background: var(--accent);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 10px rgba(255, 181, 167, 0.4);
}

[data-theme='dark'] .table {
    color: var(--text-primary);
    --bs-table-bg: var(--bg-card);
    --bs-table-border-color: var(--border-light);
}

[data-theme='dark'] .table thead th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

[data-theme='dark'] .shadow-sm,
[data-theme='dark'] .shadow {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme='dark'] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme='dark'] .bg-light {
    background-color: var(--bg-input) !important;
}

[data-theme='dark'] .search-modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}


[data-theme='dark'] .fw-bold {
    color: var(--text-primary);
}

[data-theme='dark'] a:not(.btn):not(.nav-link):not(.submenu-link):not(.sidebar-social-links a) {
    color: var(--accent);
}

[data-theme='dark'] .btn-outline-secondary {
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

[data-theme='dark'] .btn-outline-secondary:hover {
    background-color: var(--bg-hover) !important;
    color: var(--accent) !important;
}

[data-theme='dark'] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-light);
}

[data-theme='dark'] .dropdown-item {
    color: var(--text-primary);
}

[data-theme='dark'] .dropdown-item:hover {
    background-color: var(--bg-hover);
}

/* [v292] Dark Mode Premium Color Overrides (Brown -> Pink) */
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .btn-custom-write,
[data-theme='dark'] .btn-login,
[data-theme='dark'] .btn-accent {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #191919 !important;
    /* 다크모드 핑크 배경에는 어두운 글자가 더 잘 보임 */
}

[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-custom-write:hover,
[data-theme='dark'] .btn-login:hover,
[data-theme='dark'] .btn-accent:hover {
    background-color: var(--primary-brown-dark) !important;
    border-color: var(--primary-brown-dark) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 181, 167, 0.4) !important;
}

[data-theme='dark'] .card-header,
[data-theme='dark'] .board-header {
    background-color: rgba(255, 181, 167, 0.15) !important;
    border-bottom: 1px solid rgba(255, 181, 167, 0.3) !important;
}

[data-theme='dark'] .card-header h4,
[data-theme='dark'] .card-header h5,
[data-theme='dark'] .board-header h3 {
    color: var(--accent) !important;
}

[data-theme='dark'] .table {
    border-top-color: var(--accent) !important;
}

/* [v292] Catch-all for hardcoded #a47864 color in dark mode */
[data-theme='dark'] [style*="#a47864"],
[data-theme='dark'] [style*="#A47864"] {
    color: var(--accent) !important;
}

[data-theme='dark'] [style*="background-color: #a47864"],
[data-theme='dark'] [style*="background-color: #A47864"],
[data-theme='dark'] [style*="background: #a47864"],
[data-theme='dark'] [style*="background: #A47864"] {
    background-color: var(--accent) !important;
    color: #191919 !important;
}

[data-theme='dark'] [style*="border-color: #a47864"],
[data-theme='dark'] [style*="border-color: #A47864"],
[data-theme='dark'] [style*="border-left: 4px solid #a47864"],
[data-theme='dark'] [style*="border-top: 3px solid #a47864"] {
    border-color: var(--accent) !important;
}

/* [v456] Enhanced Sidebar Tools Widget (Restored version) */
.sidebar-tools-widget {
    position: relative;
    background: var(--bg-sidebar-control) !important;
    /* [v483] Ensure solid background */
    backdrop-filter: blur(10px);
    /* [v483] Smooth transition for scrolling items */
    padding: 8px 18px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid var(--border-light);
    margin: -11px auto -7px auto;
    /* [v482] 메뉴 밀착을 위해 0.6cm(22px) 여백 축소 */
    width: 88%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    z-index: 10;
    /* [v483] Move above scrolling menu items */
}



[data-theme='dark'] .sidebar-tools-widget {
    background: rgba(43, 43, 43, 0.8) !important;
    /* [v483] Increase opacity for dark mode visibility */
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.visitor-stats-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.stat-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--text-muted);
    opacity: 0.7;
    width: 25px;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 0.55rem;
    font-weight: 900;
    color: var(--text-muted);
    opacity: 0.7;
    font-family: 'Outfit', sans-serif;
}

.sidebar-search-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--deep);
    color: var(--base);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] .sidebar-search-btn {
    background: #373737;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-search-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(var(--accent-rgb), 0.3);
}

/* --- CSS Block --- */

/* [v390] Unified Sidebar Footer Social/Tool Icons */
.sidebar-social-links a {
    color: var(--text-primary);
    font-size: 1.3rem;
    /* Slightly larger for better "thickness" feel */
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.sidebar-social-links a:hover {
    color: var(--accent);
    opacity: 1;
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.4));
}

.sidebar-social-links a i {
    -webkit-text-stroke: 0.7px;
    /* More "thick" feel as requested */
}

/* [v470] Footer Icons Mobile Responsiveness */
@media (max-width: 768px) {
    .sidebar-social-links {
        gap: 24px !important;
    }

    .sidebar-social-links a {
        font-size: 1.1rem !important;
    }

    .sidebar-footer p {
        font-size: 0.65rem !important;
    }
}

/* [v301] Login Button Glowing Effect */
@keyframes loginGlow {
    0% {
        text-shadow: 0 0 4px var(--accent);
        opacity: 0.85;
    }

    50% {
        text-shadow: 0 0 12px var(--accent), 0 0 20px var(--accent);
        opacity: 1;
    }

    100% {
        text-shadow: 0 0 4px var(--accent);
        opacity: 0.85;
    }
}

.glow-login {
    animation: loginGlow 2.5s ease-in-out infinite;
    color: var(--accent) !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-align: center;
}