@charset "utf-8";
/* ----------------------------------------------
LAYOUT.CSS - Theme Layout & Structure
* writer : uxcamp
* version : 1.0.0
* last update : 2025.01.18
* purpose : Cyan Theme - Arctic Sky
* license : © 2025 uxcamp. All rights reserved.
------------------------------------------------*/
:root {
    /* === 브랜드 컬러 === */
    --color-prime: #17a2b8; /* Arctic Cyan - 북극의 시안 블루 */

    /* === layout 영역별 색상 === */
    /* 헤더 영역 - 아이스 화이트 */
    --layout-header: #fcfdfd;
    --layout-tnb: #ffffff;    
    --layout-header-border: #e5f1f3; /* 아이스 블루 테두리 */
    
    /* 바디/컨테이너 영역 - 특별 패턴: 프로스티 배경 */
    --layout-body: #ffffff; /* 프로스티 화이트 */
    --layout-container-bg: #ffffff;
    
    /* 사이드바 영역 - 반투명 느낌 */
    --layout-sidebar-bg: #fff; /* 반투명 배경 효과 */
    --layout-sidebar-border: #dce9ec;
    --layout-sidebar-border-dashed: #c8dfe4;
    --layout-sidebar-active-bg: var(--color-prime);
    --layout-sidebar-active-color: #ffffff;
    
    /* 푸터 영역 - 아이스 그라데이션 */
    --layout-footer-bg: #ecf4f6;
    --layout-footer-border: #dce9ec;
    --layout-footer-copyright-bg: #e3eff2;
    
    /* 검색 팝업 영역 */
    --layout-searchpop-bg: rgba(10, 40, 50, 0.85); /* 딥 아쿠아 팝업 */
    --layout-searchpop-dim: rgba(10, 40, 50, 0.4);
    
    /* 드롭다운 메뉴 - 글래스 효과 */
    --layout-dropdown-bg: rgba(255, 255, 255, 0.95);
    --layout-dropdown-border: #17a2b8; /* 시안 강조 보더 */
    --layout-dropdown-hover-bg: #e8f5f7;
    
    /* 게시판 타이틀/정보 영역 */
    --layout-board-bg: #ecf4f6;
    --layout-board-border: #e5f1f3;
    
    /* 서브 네비게이션 - 특별 패턴: 투톤 효과 */
    --layout-snb-border: #dce9ec;
    --layout-snb-hover-bg: #e0f2f5;
    --layout-snb-active-bg: linear-gradient(135deg, #17a2b8 0%, #138496 100%); /* 그라데이션 */
    --layout-snb-active-color: #ffffff;
    
    /* 기타 요소 */
    --layout-kvWrap-bg: #ecf4f6;
    --layout-demo-border: #c1d5da;

}
/* ========================================
   다크모드 색상 시스템
======================================== */
:root.darkMode {
    /* === 브랜드 컬러 === */
    --color-prime: #3DBDD6; /* 다크모드에서 더 밝은 시안 */

    /* === layout 영역별 색상 (다크모드) === */
    /* 헤더 영역 - 미드나이트 오션 */
    --layout-header: #0a1418; /* 미드나이트 오션 */
    --layout-tnb: #111e23;    
    --layout-header-border: #1e3339;
    
    /* 바디/컨테이너 영역 */
    --layout-body: #0a1418;
    --layout-container-bg: #111e23;
    
    /* 사이드바 영역 - 반투명 다크 */
    --layout-sidebar-bg: rgba(20, 30, 35, 0.95);
    --layout-sidebar-border: #1e3339;
    --layout-sidebar-border-dashed: #1e3339;
    --layout-sidebar-active-bg: var(--color-prime);
    --layout-sidebar-active-color: #000000; /* 밝은 시안에는 블랙 텍스트 */
    
    /* 푸터 영역 */
    --layout-footer-bg: #172329;
    --layout-footer-border: #1e3339;
    --layout-footer-copyright-bg: #111e23;
    
    /* 검색 팝업 영역 */
    --layout-searchpop-bg: rgba(10, 20, 24, 0.95);
    --layout-searchpop-dim: rgba(10, 20, 24, 0.7);
    
    /* 드롭다운 메뉴 - 글래스 다크 */
    --layout-dropdown-bg: rgba(23, 35, 41, 0.95);
    --layout-dropdown-border: #3DBDD6; /* 시안 보더 */
    --layout-dropdown-hover-bg: #1e2b31;
    
    /* 게시판 타이틀/정보 영역 */
    --layout-board-bg: #172329;
    --layout-board-border: #1e3339;
    
    /* 서브 네비게이션 */
    --layout-snb-border: #1e3339;
    --layout-snb-hover-bg: #1e2b31;
    --layout-snb-active-bg: #3DBDD6; /* 솔리드 시안 */
    --layout-snb-active-color: #000000;
    
    /* 기타 요소 */
    --layout-kvWrap-bg: #172329;
    --layout-demo-border: #2a424a;

}