@charset "utf-8";
:root { 
	/* ===== 색상 시스템 ===== */
    
    /* Gray scale colors */
    --white: #fff;
    --black: #000;
    --gray-50: #e5e5e5;
    --gray-100: #cccccc;
    --gray-200: #b2b2b2;
    --gray-400: #999999;
    --gray-500: #7f7f7f;
    --gray-600: #666666;
    --gray-700: #4c4c4c;
    --gray-800: #333333;
    --gray-900: #191919;
    
    /* Colors Tokens */
	--color-white: #ffffff;
	--color-white-50: rgba(255, 255, 255, 0.5);
	--color-black: #121212;
	
	--color-primary: #1F2C4F;
	--color-primary-50: rgb(31 44 79 / 50%);
	 --color-secandary: #900A0B;
	/*--color-secandary: rgb(197 31 65);*/
	--color-point: #1F2C4F;
    --color-icon: #588FFF;
	--bg-body: #fff;
	--bg-head: var(--color-secandary);
	--bg-mobile-menu-home:#e8f0fc;
	--bg-mobile-menu:#f0f0f0;
	--bg-search-info: #f0f0f0;
	
	--system-color-yellow :#F2B817;
	--system-color-orange :#f06900;
	--system-color-red :#e50000;
	--system-color-green:#00b542;
	--system-color-blue:#2f6af9;
	
	/* Font Colors */
	--text-invert: var(--color-white);
	--text-black: var(--gray-900);
	--text-gray: var(--gray-500);
	--text-primary: var(--color-primary);
	
	/* Font */
	--font-family : Pretendard;
	--bs-body-line-height : 150%;
	
	/* Font Size */
	--fs-sm:1.4rem;
	--fs-base: 1.6rem;
	--fs-md: 1.8rem;
	--fs-lg: 2rem;
	
    /* Font Weights */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* Spacing */
    --padding-sm: 4px;
    --padding-md: 8px; 
    --padding-lg: 12px;
    --padding-xl: 20px;
    
    --margin-sm: 4px;
    --margin-md: 8px; 
    --margin-lg: 12px;
    --margin-xl: 20px;
    
    --gap-sm: 4px;
    --gap-md: 8px; 
    --gap-lg: 12px;
    --gap-xl: 20px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 999px;
	
	--border: var(--gray-100);
	--border-dp: var(--gray-200);
	
	
	--detailInfo-color-dt: #f4f7ff;
	--detailInfo-color-border:var(--border);
	
	--point-color: var(--color-primary);
}

/* Layout */

body {position: absolute; top:0; left:0; bottom:0; left:0; font-family: var(--font-family); line-height: var(--bs-body-line-height);}
input[type="search"], input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="month"], select {height: 38px; border-radius: 4px;}

/* 스크린리더 */
h3,
.sr_only{position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* text */
h1, h2, h3, h4, h5, h6{ font-weight:var(--fw-semibold);}

body[data-theme="TC01"]{
	--color-primary: #2f6af9;
	--color-primary-50: rgb(47 106 249 / 50%);
	--color-point: #0bb995;
	--bg-body: #f3f5f9;
	--text-primary: var(--color-primary);
	--filter: brightness(0) saturate(100%) invert(34%) sepia(78%) saturate(2914%) hue-rotate(215deg) brightness(102%) contrast(101%);
}
body[data-theme="TC02"] {
	--color-primary: #1F2C4F;
    --color-primary-50: rgb(31 44 79 / 50%);
	--color-point: #FC6845;
	--bg-body: #F7F5F5;
	--text-primary: var(--color-primary);
	--filter: brightness(0) saturate(100%) invert(15%) sepia(78%) saturate(595%) hue-rotate(330deg) brightness(90%) contrast(95%);
}

/* Header Layout */
.header_btn_group #extend_btn{background-color: var(--color-primary); border:1px solid var(--color-primary);}
.button {background-color: var(--color-primary);}

/* Left Nav Layout */
.side_menu_wrap {background-color: var(--color-primary);}
.side_sub_menu_item_status_line {background-color: var(--color-primary); opacity:0.5; background-blend-mode: color-burn;}

/* 테마컬러 설정 */
body[data-theme="TC04"], .settings_popup .layout_palette a.TC04{
    --color-primary: #0C9C82;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #73CB3D;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: #EDF5F2;
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC05"], .settings_popup .layout_palette a.TC05{
    --color-primary: #155e95;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #344cb7;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: #F1F5FF;
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC06"], .settings_popup .layout_palette a.TC06{
    --color-primary: #543a14;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #825b32;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: #F5F1ED;
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC07"], .settings_popup .layout_palette a.TC07{
    --color-primary: #4A0B9A;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #ae32c2;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC08"], .settings_popup .layout_palette a.TC08{
    --color-primary: #be5985;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #ec7fa9;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC09"], .settings_popup .layout_palette a.TC09{
    --color-primary: #2daa9e;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #66d2ce;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC10"], .settings_popup .layout_palette a.TC10{
    --color-primary: #3674b5;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #578fca;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC11"], .settings_popup .layout_palette a.TC11{
    --color-primary: #493d9e;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #8b81cc;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC12"], .settings_popup .layout_palette a.TC12{
    --color-primary: #1f849b;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #2e333b;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC13"], .settings_popup .layout_palette a.TC13{
    --color-primary: #897c76;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #2e333b;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC14"], .settings_popup .layout_palette a.TC14{
    --color-primary: #be4459;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #2e333b;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

body[data-theme="TC15"], .settings_popup .layout_palette a.TC15{
    --color-primary: #7563a2;
    --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, white 100%);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, white 100%);
    --text-primary: var(--color-primary);
    --color-point: #2e333b;
    --color-point-50: color-mix(in srgb, var(--color-point) 50%, white 100%);
    --color-point-20: color-mix(in srgb, var(--color-point) 20%, white 100%);
    --bg-body: color-mix(in srgb, var(--color-primary) 5%, white 100%);
    --button-color-basic: var(--point-color);
    --button-color-active: var(--point-color);
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	:root{
		--padding-content-wrap:2rem !important;
	    --padding-sm: 4px;
		--padding-md: 6px;
		--padding-lg: 10px;
		--padding-xl: 12px;
		--margin-sm: 4px;
		--margin-md: 6px;
		--margin-lg: 10px;
		--margin-xl: 12px;
		--gap-sm: 4px;
		--gap-md: 8px;
		--gap-lg: 10px;
		--gap-xl: 12px;
	}
}

@media (max-width: 767px) {
	:root{
		--padding-content-wrap:0.8rem !important;
		--padding-sm: 4px;
		--padding-md: 6px;
		--padding-lg: 10px;
		--padding-xl: 12px;
		--margin-sm: 4px;
		--margin-md: 6px;
		--margin-lg: 10px;
		--margin-xl: 12px;
		--gap-sm: 4px;
		--gap-md: 8px;
		--gap-lg: 10px;
		--gap-xl: 12px;
	}
}
/*
html[lang=en] {
    --fs-sm: 1.3rem;
    --fs-base: 1.5rem;
    --fs-md: 1.7rem;
    --fs-lg: 1.9rem;
}
*/