@charset "utf-8";
/* --------------------------------------------------------------------------
   Modern Brown Master - Screenshot Match Perfected
   Core Theme: Screenshot Inspired Balance (No Blue)
   Philosophy: Consistency, Unity, and Distinction (Screenshot Palette)
   Colors: Golden Sand (#C4A46A) & Warm Beige (#F2EBE0)
   Designed by: Antigravity
   -------------------------------------------------------------------------- */

/* [1] MASTER INHERITANCE RESET (Force Consistency Across All Pages) */
html, 
body {
    background-color: var(--layout-body) !important;
    color: var(--layout-gray-900) !important;
}

:root {
    /* === [2] GOLDEN SAND PALETTE (No Blue Accent) === */
    --color-prime: #7B5A3E !important;
    --hitel-gold: #D4AF37 !important;
    --hitel-cream: #FAF9F5 !important;
    --hitel-charcoal: #3D3B29 !important;

    /* === [3] LIGHT MODE MASTER (Screenshot Layout Rhythm) === */
    --layout-body: #FFFFFF !important;
    --layout-header: #FFFFFF !important;
    --layout-tnb: #664734 !important;
    --layout-header-border: color-mix(in srgb, var(--color-prime) 40%, transparent);
    
    --layout-container-bg: #FFFFFF !important;
    --layout-sidebar-bg: #FBF2E6 !important;
    --layout-sidebar-border: color-mix(in srgb, var(--color-prime) 40%, transparent);
    --layout-sidebar-active-bg: #EBDAC5 !important;
    --layout-sidebar-active-color: var(--hitel-charcoal) !important;
    
    --layout-footer-bg: #4d3527 !important;
    --layout-footer-border: color-mix(in srgb, var(--color-prime) 40%, transparent);
    
    --layout-dropdown-bg: #FFFFFF !important;
    --layout-dropdown-hover-bg: #E5D3C1 !important;
    
    --layout-board-bg: #F0E2D0 !important;
    --layout-board-border: color-mix(in srgb, var(--color-prime) 40%, transparent);
    
    --layout-radius: 12px;
    --layout-radius-lg: 20px;
    --hitel-border: #EFE2CC !important;
    
    --layout-kvWrap-bg: #F0E2D0 !important;

    /* === [4] GRAY-TO-BROWN MASTER REMAPPING === */
    --layout-white: #FFFFFF !important; 
    --layout-gray-50: #FFFBF5 !important;
    --layout-gray-100: #F2E2CE !important;
    --layout-gray-200: color-mix(in srgb, var(--color-prime) 40%, transparent);
    --layout-gray-300: #EFE2CC !important;
    --layout-gray-900: var(--hitel-charcoal) !important; 
    --layout-black: #FDF2E3 !important; 
}

/* === [5] DARK MODE MASTER (Structural Echo of Light Mode) === */
:root.darkMode, html.darkMode, body.darkMode, .darkMode {
    --layout-body: #000000 !important;
    --layout-header: #000000 !important;
    --layout-tnb: #241409 !important;
    --layout-sidebar-bg: #261A13 !important;
    --layout-container-bg: #2B1E16 !important;

    --layout-footer-bg: #241409 !important;
    --layout-footer-border: color-mix(in srgb, var(--color-prime) 40%, transparent);
    
    --layout-dropdown-bg: #463326 !important;
    --layout-dropdown-hover-bg: #66523A !important; /* 패널 배경(#463326)보다 밝은 하이라이트, 흰 텍스트 기준 대비 7.41:1 */
    
    --layout-board-bg: #4F3A29 !important;
    --layout-board-border: color-mix(in srgb, var(--color-prime) 40%, transparent);
    
    --color-prime: #A18D60 !important;       
    --hitel-border: #4D382A !important;
    --layout-gray-300: #4D382A !important;
    
    --layout-white: #332619 !important;
    --layout-gray-900: #FAF9E6 !important;   
    --layout-black: #000000 !important;
    
    --layout-gray-100: #4D3A2B !important;
    --layout-gray-200: color-mix(in srgb, var(--color-prime) 40%, transparent);
    --layout-header-border: color-mix(in srgb, var(--color-prime) 40%, transparent);
    
    --layout-kvWrap-bg: #4F3A29 !important;
    --layout-gray-50: #000000 !important;

    --layout-sidebar-active-bg: #4D382A !important;
    --layout-sidebar-active-color: #FAF9F6 !important;
}

/* === [6] GLOBAL TYPOGRAPHY MASTER === */
body, a, h1, h2, h3, h4, h5, p, span, li, strong, dt, dd, i, b, em {
    color: var(--layout-gray-900);
}

:root.darkMode body, :root.darkMode a, :root.darkMode p, :root.darkMode span, 
:root.darkMode h1, :root.darkMode h2, :root.darkMode h3, :root.darkMode h4,
.darkMode body, .darkMode a, .darkMode p, .darkMode span, 
.darkMode h1, .darkMode h2, .darkMode h3, .darkMode h4 {
    color: #FAF9E6 !important;
}

/* === [7] ARCHITECTURE PROTECTION (Screenshot Rhythm) === */
/* Logo Visuals: Vivid Gold/Brown Branding (Light Mode) - Specificity Boost */
html:not(.darkMode) .header .title a h1 i[data-item="logoIcon"],
html:not(.darkMode) .header .title a h1 strong[data-item="logoTxt"],
html:not(.darkMode) .sideWrap .logo .logoHeading i[data-item="logoIcon"],
html:not(.darkMode) .sideWrap .logo .logoHeading strong[data-item="logoTxt"] {
    color: #c57600 !important;
}

/* Footer Logo Visuals: Brightened for readability against Brown background */
html:not(.darkMode) .footerBrand .logo i[data-item="logoIcon"],
html:not(.darkMode) .footerBrand .logo strong[data-item="logoTxt"] {
    color: #EBA34A !important; /* 명도 상향 (#c57600 -> #EBA34A) */
}

/* White Mode Only: Stepped Header/GNB Hierarchy (Cloned Style Final) */
html:not(.darkMode) .gnbWrap {
    background: transparent !important;
}

/* 헤더 메뉴 위/아래 구분선 제거 */
.header,
.gnbWrap {
    border-bottom: none !important;
}

html:not(.darkMode) .gnbWrap .gnb {
    background: transparent !important;
    height: 100%;
}

html:not(.darkMode) .gnbWrap .gnb nav {
    background: transparent !important;
    width: fit-content;
}

/* Restore dropdown menu background (adapts to light/dark mode) */
html:not(.darkMode) .gnb-menu ul,
html:not(.darkMode) .dropdown-menu {
    background: var(--layout-dropdown-bg) !important;
}

/* GNB Top-Level Menu & Icon: Dark text on transparent bar (Light Mode)
   (!important 불필요: 라이트모드 전역 텍스트색 규칙이 !important 없이 낮은 명세도라
   이 선택자가 이미 자연스럽게 이김) */
html:not(.darkMode) .gnbWrap .gnb nav > ul > li > a,
html:not(.darkMode) .gnbWrap .gnb nav > ul > li > a i {
    color: var(--layout-gray-900);
}

/* Menu text/background hover: 풀다운(드롭다운) 호버와 동일한 배경색 적용 */
html:not(.darkMode) .gnbWrap .gnb nav > ul > li > a:hover {
    background: var(--layout-dropdown-hover-bg) !important;
    color: var(--color-prime) !important;
}
html:not(.darkMode) .gnbWrap .gnb nav > ul > li > a:hover i {
    color: var(--color-prime) !important;
}
/* 다크모드: 배경이 밝은 하이라이트라 흰 텍스트가 대비 확보에 유리 */
.darkMode .gnbWrap .gnb nav > ul > li > a:hover {
    background: var(--layout-dropdown-hover-bg) !important;
    color: #ffffff !important;
}
.darkMode .gnbWrap .gnb nav > ul > li > a:hover i {
    color: #ffffff !important;
}

.darkMode .gnbWrap,
.darkMode .gnbWrap .gnb nav {
    background: transparent !important;
}

html:not(.darkMode) .gnbWrap .gnb nav ul.gnb-menu li .dropdown-menu li a:hover {
    color: var(--color-prime) !important;
}
.darkMode .gnbWrap .gnb nav ul.gnb-menu li .dropdown-menu li a:hover {
    color: #ffffff !important;
}

/* Pulldown/Dropdown Menu: Gray/Charcoal (Light Mode) Override */
html:not(.darkMode) .gnb-menu ul li a,
html:not(.darkMode) .dropdown-menu a,
html:not(.darkMode) .sub-menu a {
    color: var(--layout-gray-900) !important;
}

.sideWrap, .sidebar, .snb, .gnb-menu, .dropdown-menu, .sub-menu, .container {
    background: var(--layout-sidebar-bg) !important;
    border-color: var(--hitel-border) !important;
}

.mainContainer, .container {
    background: var(--layout-body) !important;
}

/* Sidebar Nav Hover Effect (Unity with GNB) */
.sideWrap .sideGnb .nav ul > li > a {
    color: var(--layout-gray-900) !important; 
    transition: all 0.2s ease-in-out;
    padding: 8px 12px !important; 
    border-radius: 8px !important;
    margin-right: 14px;
}

.sideWrap .sideGnb .nav ul > li > a:hover {
    background: var(--layout-dropdown-hover-bg) !important;
    color: var(--color-prime) !important;
    padding-left: 16px !important;
}

/* Dark Mode Swap: Hover becomes Light Gold highlight */
.darkMode .sideWrap .sideGnb .nav ul > li > a:hover {
    background: var(--color-prime) !important;
    color: #ffffff !important;
}

/* Ensure active state color is enforced */
.sideWrap .sideGnb .nav ul > li > a.active {
    background: var(--layout-sidebar-active-bg) !important;
    color: var(--layout-sidebar-active-color) !important;
}

/* === [8] UI COMPONENTS MASTER (Screenshot Aesthetics) === */
input, select, textarea {
    background: #FFFFFF !important;
    color: var(--hitel-charcoal) !important;
    border-color: var(--hitel-border) !important;
}
:root.darkMode input, :root.darkMode select, :root.darkMode textarea {
    background: #3D392C !important; 
    color: #FAF9F6 !important;
    border-color: #4D4936 !important;
}

/* Blue-free pagination */
.pg_wrap .pg .pg_page, .pg_wrap .pg .pg_current {
    background: var(--layout-gray-100) !important;
    color: var(--layout-gray-900) !important;
}
.pg_wrap .pg .pg_current {
    background: var(--color-prime) !important;
    color: #ffffff !important;
}

/* === [9] SPECIFIC PAGE GUARD (Master Fixed) === */
html body .loginBox,
html body .memberWrap,
html body .boardListWrap,
html body .boardViewWrap {
    background: var(--layout-container-bg) !important;
    color: var(--layout-gray-900) !important;
    border-color: var(--hitel-border) !important;
}

/* Guard against dark mode parent class inheritance conflicts resulting in white background */
html.darkMode body .loginBox,
html.darkMode body .memberWrap,
html.darkMode body .boardListWrap,
html.darkMode body .boardViewWrap,
body.darkMode .loginBox,
body.darkMode .memberWrap,
body.darkMode .boardListWrap,
body.darkMode .boardViewWrap,
.darkMode .loginBox,
.darkMode .memberWrap,
.darkMode .boardListWrap,
.darkMode .boardViewWrap {
    background: transparent !important;
    color: var(--layout-gray-900) !important;
    border-color: var(--hitel-border) !important;
}

/* Active Category Match */
.sidebar .category-item.active {
    background: var(--color-prime) !important;
    color: #ffffff !important;
}

/* === [10] UNITY FILTER (Sand Tone) === */
.logo img, .icon img {
    filter: sepia(0.3) saturate(0.8) hue-rotate(10deg);
}

footer, .footerWrap, .footer {
    background: var(--layout-footer-bg) !important;
    border-top: 2px solid var(--layout-footer-border) !important;
    color: #FAF9F6 !important;
}

/* Explicitly target all inner elements including icons (i.bx-) and logo text */
footer *, .footerWrap *, .footer * {
    color: #FAF9F6 !important;
}

footer a:hover, .footerWrap a:hover, .footer a:hover {
    color: var(--color-prime) !important;
}

/* Ensure footer text is legible in dark mode */
.darkMode footer, .darkMode .footerWrap, .darkMode .footer {
    color: #FAF9F6 !important;
}

/* === [11] REMAINING WHITE BACKGROUND GUARD (WIDGETS, DROPDOWNS, TNB) === */
.tnb, .topWrap, .header-top {
    background: var(--layout-tnb) !important;
    color: #FAF9F6 !important;
}

/* Broaden to all child elements (time, date, nickname, icons) for high contrast */
.tnb *, .topWrap *, .header-top * {
    color: #FAF9F6 !important;
}

.tnb a:hover, .topWrap a:hover, .header-top a:hover {
    color: var(--color-prime) !important;
}

.darkMode .tnb, .darkMode .topWrap, .darkMode .header-top {
    background: var(--layout-tnb) !important;
}

/* 2. 드롭다운 및 특정 흰색 박스 보정 */
.darkMode .bg-white,
.darkMode .dropdown-menu,
.darkMode .sub-menu,
.darkMode .dropdown-content,
.darkMode .gnb-menu ul {
    background-color: var(--layout-dropdown-bg) !important;
    border-color: var(--hitel-border) !important;
    color: var(--layout-gray-900) !important;
}

/* [12] DROPDOWN READABILITY FIX (TNB Children Override) */
/* Ensure dropdowns inside .tnb regain correct text colors despite the global .tnb * rule */
.tnb .translateDropdown,
.tnb .translateDropdown *,
.tnb .outloginUserMenu,
.tnb .outloginUserMenu * {
    color: var(--layout-gray-900) !important;
}

/* Ensure icons in dropdowns use the prime color or intended contrast */
.tnb .translateDropdown .bx-globe,
.tnb .translateDropdown .bx-check,
.tnb .outloginUserMenu i {
    color: var(--color-prime) !important;
}

/* Hover & Active States for Dropdowns */
.tnb .translateItem:hover,
.tnb .translateItem:hover *,
.tnb .outloginUserMenu a:hover,
.tnb .outloginUserMenu a:hover * {
    background-color: var(--layout-dropdown-hover-bg) !important;
    color: var(--color-prime) !important;
}

.tnb .translateItem.active,
.tnb .translateItem.active * {
    background-color: var(--layout-gray-200) !important;
    color: var(--color-prime) !important;
    font-weight: 700 !important;
}

/* Google Translate Powered By text fix */
.tnb .translateFooter small {
    color: var(--hitel-charcoal) !important;
    opacity: 0.6;
}

/* [13] LIGHT MODE BUTTON UI IMPROVEMENTS (Lighten Brown & White Icons) */
html:not(.darkMode) #btn_submit,
html:not(.darkMode) .scrollToTop,
html:not(.darkMode) .scrollToBottom {
    background-color: #917056 !important; /* 명도 상향 (#7B5A3E -> #917056) */
    color: #ffffff !important;
}

html:not(.darkMode) #btn_submit i,
html:not(.darkMode) .scrollToTop i,
html:not(.darkMode) .scrollToBottom i {
    color: #ffffff !important; /* 아이콘 흰색 고정 */
}