/********************************************************************************************************
 [테마 색상 팔레트 사용법 숙지하고 정하기]
 
	(1) 먼저 기준색을 정해야 한다. 기준색을 뭘할지 헷갈리면 아래 링크에 가서 올해의 색 중에서 선택한다.

		https://www.w3schools.com/colors/colors_2025.asp
		
		(내가 여기서 선택한 색상은 #2E5283 로 Déja Vu Blue 라는 이름이다.)

	(2) 아래 링크에 가서 이 색에 대한  정보를 본다.

		https://www.colorhexa.com/	또는  https://www.color-hex.com/
		
	(3) 색상 정보에서 이 색과 어울리는 Color Schemes 의 색상을 따로 잘 복사해 둔다.
		
		- Tetradic Color 에서 기준색 제외 3가지 색 : #2e835f (녹색)	#832e52 (자주색)		#835f2e (황토색) 
		
		( 참고로 선택 색상이 web safe 색상이 아니면 추천하는 web safe 색상도 확인해 보고 마음에 들면
		 기왕이면 web safe 색상을 선택하면 좋다. - 그런데 나는 마음에 안들어 기준 색상 그대로 사용했다 )
	
	(4) 아래 링크에서 선택한 기준 색상을 넣고 [Create Theme] 버튼으로 생성된 테마를 아래에 복사한다.

		https://www.w3schools.com/w3css/w3css_color_generator.asp 
		
	(5) 생성된 w3-theme 를 복사해 아래에 붙여 넣기 	
	
	(6) 테이블 관련 색상은 생성된 테마를 기준으로 style.css 에서 변경해 준다.

	(7) 색상 사용 비율 : 60-30-10 규칙 - 주요 색채를 60%, 보조 색감을 30%, 강조 색을 10% 비율로 사용하면 균형 잡힌 디자인이 완성

********************************************************************************************************/

.w3-theme-l5 {color:#000 !important; background-color:#f0f4fa !important}
.w3-theme-l4 {color:#000 !important; background-color:#cedbee !important}
.w3-theme-l3 {color:#000 !important; background-color:#9db7dd !important}
.w3-theme-l2 {color:#fff !important; background-color:#6c94cb !important}
.w3-theme-l1 {color:#fff !important; background-color:#4071b5 !important}
.w3-theme-d1 {color:#fff !important; background-color:#2a4a77 !important}
.w3-theme-d2 {color:#fff !important; background-color:#25426a !important}
.w3-theme-d3 {color:#fff !important; background-color:#20395c !important}
.w3-theme-d4 {color:#fff !important; background-color:#1c314f !important}
.w3-theme-d5 {color:#fff !important; background-color:#172942 !important}

.w3-theme-light {color:#000 !important; background-color:#f0f4fa !important}
.w3-theme-dark {color:#fff !important; background-color:#172942 !important}
.w3-theme-action {color:#fff !important; background-color:#172942 !important}

.w3-theme {color:#fff !important; background-color:#2e5283 !important}
.w3-text-theme {color:#2e5283 !important}
.w3-border-theme {border-color:#2e5283 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#2e5283 !important}
.w3-hover-text-theme:hover {color:#2e5283 !important}
.w3-hover-border-theme:hover {border-color:#2e5283 !important}

/********************************************************************************************************

	아래는 위 (2) 에서 적어 둔 어울리는 보색 색상명을 적는다. (반대 되는 색으로 사용하기에 좋다.)
	(꼭 아래 classname 이 아니어도 좋다. 대비 되는 색상이 필요할 때 클래스를 만들어 사용하면 된다)
	
	(1) #2e5283 (기준색)  (2) #2e835f (녹색)	(3) #832e52 (자주색)  (4) #835f2e (황토색) 

********************************************************************************************************/

:root { /* 색상변수들 */
	/* 기준색 */
    --color-background: #f4f6f8; /* #f1f1f1 전체 배경 */
    --color-text: #000; /*기본 글자색 */
    --color-bg-main: #FFF; /* 메인 콘텐츠 배경 */
    --theme: #2e5283; 		
	--theme-l5: #f0f4fa;
	--theme-l4: #cedbee;
	--theme-l3: #9db7dd;
	--theme-l2: #6c94cb;
	--theme-l1: #4071b5;
	--theme-d1: #2a4a77;
	--theme-d2: #25426a;
	--theme-d3: #20395c;
	--theme-d4: #1c314f;
	--theme-d5: #172942;
	/* 테이블 관련 */
	--theme-table-border: 1px solid #ccc;
	--theme-tr-border-bottom: 1px solid #ddd;
	--theme-td-border: 1px solid #ccc;
	--theme-tr-even: #f0f4fa;
	--theme-tr-odd: #fff;
	--theme-tr-hover: #fbfcd6;
	--theme-th: #cedbee; /*#f1f1ff*/
	/* 색상명  */
	
    --red: red; 			/* 빨강  */
    --orange: #835f2e; 		/* 주황  */
    --yellow: yellow; 		/* 노량  */
    --green: #2e835f; 		/* 초록  */
    --blue: blue; 			/* 파란  */
    --navy: #2e5283;		/* 남색  기준색*/
    --purple: #832e52; 		/* 보라  */
    --silver: #C0C0C0; 		/* 실버  */
    --gray: #757575; 		/* 회색 w3 배경 #9e9e9e  글자 #757575  */
    --light-gray: #f1f1f1;	/* 회색 w3 배경,글자 #f1f1f1  */
    --dark-gray: #3a3a3a; 	/* 회색 w3 배경 #616161 글자 #757575  */

}

/* 위 색상 변수를 기준으로 클래스를 만들어 사용한다 */
.theme {color:#fff !important; background-color:var(--theme) !important}
.theme-side {color:#000 !important; background-color:var(--theme-l5) !important}
.theme-ok {color:#fff !important; background-color:var(--theme-l2) !important}
.theme-cancel {color:#fff !important; background-color:var(--purple) !important}
.theme-close {color:#fff !important; background-color:var(--theme-l2) !important}
.theme-popup-title {color:#fff !important; background-color:var(--dark-gray) !important}
.theme-btn-x {color:#fff !important; background-color:var(--red) !important}
.theme-side-head {color:#fff !important; background-color:var(--theme) !important}
.theme-side-menu {color:#000 !important; background-color:#fff !important}
.theme-drop-menu {color:#fff !important; background-color:var(--theme-d2) !important}

.theme-text {color:var(--theme) !important}
.theme-text-cancel {color:var(--purple) !important}

h3 {color: var(--theme-d2)} /* 게시판 타이틀 */