@charset "utf-8";
/* ----------------------------------------------
LAYOUT.CSS - Theme Layout & Structure
* writer : uxcamp
* version : 1.0.0
* last update : 2025.07.11
* purpose : 레이아웃 구조 및 테마 시스템
* license : © 2025 uxcamp. All rights reserved.
------------------------------------------------*/
:root {
     /* === 브랜드 컬러 === */
    --color-prime: #520026; 

    /* === layout 영역별 색상 === */
    /* 헤더 영역: 부드러운 오프화이트 베이스 */
    --layout-header: #ffffff; 
    --layout-tnb: #faf9f6; /* 본 화이트로 변경하여 눈의 피로도 감소 */
    --layout-header-border: #f0eaec;
    
    /* 바디/컨테이너 영역 */
    --layout-body: #ffffff;
    --layout-container-bg: #ffffff;
    
    /* 사이드바 영역: 활성화된 메뉴 글자색을 부드럽게 조정 */
    --layout-sidebar-bg: #fdfbf7; /* 따뜻한 크림 화이트 배경 */
    --layout-sidebar-border: #ece0e4;
    --layout-sidebar-border-dashed: #ece0e4;
    --layout-sidebar-active-bg: var(--color-prime);
    --layout-sidebar-active-color: #faf9f6; /* 순백색 대신 본 화이트 적용 */
    
    /* 푸터 영역 */
    --layout-footer-bg: #f7f0f2;
    --layout-footer-border: #e8d8de;
    --layout-footer-copyright-bg: #f7f0f2;
    
    /* 검색 팝업 영역: 글자색을 부드럽게 */
    --layout-searchpop-bg: rgba(61, 0, 18, 0.9);
    --layout-searchpop-dim: rgba(61, 0, 18, 0.45);
    
    /* 드롭다운 메뉴 */
    --layout-dropdown-bg: #ffffff;
    --layout-dropdown-border: #f0eaec;
    --layout-dropdown-hover-bg: #faf9f6;
    
    /* 게시판 타이틀/정보 영역 */
    --layout-board-bg: #faf9f6;
    --layout-board-border: #ede2e6;
    
    /* 서브 네비게이션: 액티브 텍스트를 소프트 화이트로 */
    --layout-snb-border: #ece0e4;
    --layout-snb-hover-bg: #fdfbf7;
    --layout-snb-active-bg: #3d001c; 
    --layout-snb-active-color: #faf9f6; /* 부드러운 텍스트 컬러 */
    
    /* 기타 요소 */
    --layout-kvWrap-bg: #faf9f6;
    --layout-demo-border: #d8c4cb;

}

/* ========================================
   다크모드 색상 시스템
======================================== */
:root.darkMode {
    /* 브랜드 컬러 */
    --color-prime: #520026; 

    /* === 다크모드 영역별 색상 (배경과 글자 대비 확보) === */
    --layout-header: #120a0d;    /* [추가] 헤더 배경을 어둡게 설정하여 메뉴 가독성 확보 */
    --layout-tnb: #0d0709;       /* [추가] 상단바 배경 어둡게 */
    --layout-body: #120a0d;      /* 바디 배경 */
    --layout-white: #120a0d;     /* 흰색 영역 반전 */
    
    /* 그레이 스케일 (글자색) */
    --layout-gray-900: #faf9f6;  /* 기본 글자색 (본 화이트) */
    --layout-black: #faf9f6;     /* 다크모드 기본 텍스트 */
    --layout-gray-50: #1c1115;   /* 타이틀 영역 배경색 */
    
    /* 사이드바/SNB 선택 시 크림 반전 세팅 */
    --layout-sidebar-active-bg: #faf9f6; 
    --layout-sidebar-active-color: #520026; 
    --layout-snb-active-bg: #faf9f6; 
    --layout-snb-active-color: #520026; 
	
	/* [수정] 호버 시 배경은 어둡게, 글자는 밝게 유지하여 대비 확보 */
    --layout-sidebar-bg: #1c1115;
    --layout-sidebar-border: #38262c;
    --layout-snb-hover-bg: #faf9f6;   
    --layout-gray-900: #520026;     
}