@charset "utf-8";
/* ----------------------------------------------
LAYOUT.CSS - Theme Layout & Structure
* writer : uxcamp
* version : 1.0.0
* last update : 2025.01.18
* purpose : Dark Theme - Professional Charcoal
* license : © 2025 uxcamp. All rights reserved.
------------------------------------------------*/
:root {
    /* === 브랜드 컬러 === */
    --color-prime: #343a40; /* Charcoal Gray - 프로페셔널한 차콜 그레이 */

    /* === layout 영역별 색상 === */
    /* 헤더 영역 */
    --layout-header: #ffffff; /* 순수 흰색 */
    --layout-tnb: #f8f9fa;    /* 밝은 회색 */
    --layout-header-border: #dee2e6; /* 회색 테두리 */
    
    /* 바디/컨테이너 영역 */
    --layout-body: #f8f9fa; /* 밝은 회색 배경 */
    --layout-container-bg: #ffffff;
    
    /* 사이드바 영역 */
    --layout-sidebar-bg: #f1f3f5; /* 연한 회색 배경 */
    --layout-sidebar-border: #dee2e6;
    --layout-sidebar-border-dashed: #dee2e6;
    --layout-sidebar-active-bg: var(--color-prime);
    --layout-sidebar-active-color: #ffffff;
    
    /* 푸터 영역 */
    --layout-footer-bg: #e9ecef;
    --layout-footer-border: #dee2e6;
    --layout-footer-copyright-bg: #e9ecef;
    
    /* 검색 팝업 영역 */
    --layout-searchpop-bg: rgba(52, 58, 64, 0.9); /* 차콜 그레이 팝업 */
    --layout-searchpop-dim: rgba(52, 58, 64, 0.5);
    
    /* 드롭다운 메뉴 */
    --layout-dropdown-bg: #ffffff;
    --layout-dropdown-border: #dee2e6;
    --layout-dropdown-hover-bg: #f1f3f5;
    
    /* 게시판 타이틀/정보 영역 */
    --layout-board-bg: #e9ecef;
    --layout-board-border: #dee2e6;
    
    /* 서브 네비게이션 */
    --layout-snb-border: #dee2e6;
    --layout-snb-hover-bg: #f1f3f5;
    --layout-snb-active-bg: var(--color-prime); /* 차콜 액센트 */
    --layout-snb-active-color: #ffffff;
    
    /* 기타 요소 */
    --layout-kvWrap-bg: #e9ecef;
    --layout-demo-border: #ced4da;

}
/* ========================================
   다크모드 색상 시스템
======================================== */
:root.darkMode {
    /* === 브랜드 컬러 === */
    --color-prime: #9e9e9e; /* 다크모드 메인 액센트 - 순수 회색 */

    /* === layout 영역별 색상 (다크모드) === */
    /* 헤더 영역 */
    --layout-header: #2a2a2a; /* 헤더 배경 - 매우 진한 회색 */
    --layout-tnb: #333333;    /* 탑 네비 - 진한 회색 */
    --layout-header-border: #3d3d3d; /* 테두리 - 은은한 회색 */
    
    /* 바디/컨테이너 영역 */
    --layout-body: #303030; /* 배경 - 매우 진한 회색 */
    --layout-container-bg: #424242; /* 컨테이너 - 진한 회색 */
    
    /* 사이드바 영역 */
    --layout-sidebar-bg: #383838; /* 사이드바 배경 - 더 어두운 회색 */
    --layout-sidebar-border: #404040; /* 사이드바 테두리 - 은은한 회색 */
    --layout-sidebar-border-dashed: #404040;
    --layout-sidebar-active-bg: #757575; /* 활성 상태 - 밝은 회색 */
    --layout-sidebar-active-color: #fafafa;
    
    /* 푸터 영역 */
    --layout-footer-bg: #424242; /* 푸터 배경 - 진한 회색 */
    --layout-footer-border: #484848;
    --layout-footer-copyright-bg: #303030; /* 매우 진한 회색 */
    
    /* 검색 팝업 영역 */
    --layout-searchpop-bg: rgba(66, 66, 66, 0.95); /* 진한 회색 팝업 */
    --layout-searchpop-dim: rgba(48, 48, 48, 0.7); /* 딤 처리 */
    
    /* 드롭다운 메뉴 */
    --layout-dropdown-bg: #4a4a4a; /* 드롭다운 배경 */
    --layout-dropdown-border: #505050;
    --layout-dropdown-hover-bg: #555555; /* 호버 시 밝게 */
    
    /* 게시판 타이틀/정보 영역 */
    --layout-board-bg: #4a4a4a;
    --layout-board-border: #505050;
    
    /* 서브 네비게이션 */
    --layout-snb-border: #484848;
    --layout-snb-hover-bg: #555555;
    --layout-snb-active-bg: #757575; /* 활성 상태 - 밝은 회색 */
    --layout-snb-active-color: #fafafa;
    
    /* 기타 요소 */
    --layout-kvWrap-bg: #4a4a4a;
    --layout-demo-border: #505050;

}