/* 색상표 */
:root {
	/* ========== Primitive Color ========== */
	--color-primary-10: #F3F7FE;
	--color-primary-20: #E6EBF4;
	--color-primary-30: #A7C4F7;
	--color-primary-40: #7CA6F3;
	--color-primary-50: #1686FF;
	--color-primary-60: #056FEB;
	--color-primary-70: #005AC3;
	--color-primary-80: #16408D;
	--color-primary-90: #0E2B5E;
	--color-primary-100: #15223C;
	
	--color-secondary-10: #FFFDF3;
	--color-secondary-20: #FBF3ED;
	--color-secondary-50: #FF8060;
	
	--color-grayscale-00: #FFFFFF; 
	--color-grayscale-05: #F8F8F8;
	--color-grayscale-10: #F1F1F1; 
	--color-grayscale-20: #DBDBDB; 
	--color-grayscale-30: #CCCCCC; 
	--color-grayscale-40: #BDBDBD; 
	--color-grayscale-50: #8E8E8E; 
	--color-grayscale-60: #717171; 
	--color-grayscale-70: #555555; 
	--color-grayscale-80: #2d2d2d; 
	--color-grayscale-90: #222222; 
	--color-grayscale-100: #000000; 
	
	--color-red-50: #FF0000;
	--color-yellow-50: #FFC106;
	--color-green-50: #28A744;
	--color-orange-50: #FF8060;
	
	
	/* ========== Semantic Color ========== */
	--color-primary: var(--color-primary-60);
	--color-secondary: var(--color-secondary-50);

	--color-text-primary: var(--color-primary-50);
	--color-text-secondary: var(--color-secondary-50);
	--color-text-disabled: var(--color-grayscale-60);
	--color-text-inverse: var(--color-grayscale-00);
	--color-text-default: var(--color-grayscale-90);
	--color-text-white: var(--color-grayscale-00);
	--color-text-black: var(--color-grayscale-100);
	--color-text-placeholder: var(--color-grayscale-50);
	--color-text-label: var(--color-grayscale-60);
	--color-text-inactive: var(--color-grayscale-40);
	--color-text-danger: var(--color-red-50);
	--color-text-blue: var(--color-primary-70);
	
	--color-text-nav: var(--color-grayscale-70);
	--color-text-nav-sub: var(--color-grayscale-60);
	--color-text-nav-active: var(--color-grayscale-90);
	--color-text-nav-active-sub: var(--color-primary-50);
	
	--color-bg-surface: var(--color-grayscale-00);
	--color-bg-onSurface: var(--color-grayscale-10);
	--color-bg-primary: var(--color-primary-50);
	--color-bg-primary-hover: var(--color-primary-70);
	--color-bg-priramy-active: var(--color-primary-100);
	--color-bg-secondary: var(--color-secondary-50);
	--color-bg-gray: var(--color-grayscale-60);
	--color-bg-strong: var(--color-grayscale-80);
	--color-bg-disabled: var(--color-grayscale-20);
	--color-bg-inverse: var(--color-grayscale-90);
	--color-bg-white: var(--color-grayscale-00);
	--color-bg-danger: var(--color-red-50);
	--color-bg-success: var(--color-green-50);
	--color-bg-point: var(--color-secondary-50);
	--color-bg-excel: #207044;
	
	--color-bg-nav: var(--color-grayscale-00);
	--color-bg-nav-sub: var(--color-primary-20);
	--color-bg-nav-scroll: var(--color-grayscale-30);
	
	--color-bg-grid-head: var(--color-primary-10);
	--color-bg-grid-hover: var(--color-grayscale-05);
	--color-bg-grid-select: var(--color-grayscale-10);
	--color-bg-grid-side-head: var(--color-grayscale-10);
	--color-bg-grid-legend: var(--color-secondary-20);
	--color-bg-grid-release: #fffbe6;
	--color-bg-grid-unout: #f8d2d2;
	
	--color-bg-search: var(--color-grayscale-05);
	
	--color-bg-paging: var(--color-primary-90);
	
	--color-icon-nav: var(--color-grayscale-40);
	
	--color-border-default: var(--color-grayscale-20);
	--color-border-strong: var(--color-grayscale-60);
	--color-border-disabled: var(--color-grayscale-30);
	--color-border-inverse: var(--color-grayscale-00);
	--color-border-light: var(--color-grayscale-10);
	--color-border-primary: var(--color-primary-50);
	--color-border-active: var(--color-primary-100);
	--color-border-focus: var(--color-primary-30);

	--color-border-grid-legend: var(--color-secondary-50);

	--color-border-control-default: var(--color-grayscale-40);
	--color-border-control-strong: var(--color-grayscale-60);

	--color-button-border-default: var(--color-grayscale-40);
	--color-button-border-hover: var(--color-grayscale-60);
	--color-button-border-active: var(--color-grayscale-40);
	--color-button-border-disabled: var(--color-grayscale-40);

	--color-modal-border: var(--color-grayscale-40);

	--radius-0: 0;
	--radius-2: 2px;
	--radius-4: 4px;
	--radius-6: 6px;
	--radius-8: 8px;
	--radius-10: 10px;
	--radius-999: 999px;
	
	--radius-control: var(--radius-4);
	--radius-surface: var(--radius-10);
	--radius-pill: var(--radius-999);
	
	--font-default: 'Noto Sans';
	
	
}