@charset "utf-8";
@import url(../fonts/iconfont/common/iconfont.css);
@import url(../fonts/iconfont/sns/iconfont.css);
@import url(../fonts/iconfont/arrow/iconfont.css);

:root {
	/* 주 색상 : */
	--primary: #6366f1; /* 밝은  */
	--primary-light: #818cf8; /* 주 색상의 밝은 톤 */
	--primary-dark: #4f46e5; /* 주 색상의 어두운 톤 */

	/* 보조 색상 : 선명한 대비 색, 강조 및 기능 구분용 */
	--success: #10b981; /* 선명한 그린 (성공) */
	--warning: #f59e0b; /* 밝은 오렌지 (경고) */
	--danger: #ef4444; /* 밝은 레드 (위험) */
	--info: #777caa; /* 밝은 블루 (정보) */

	/* 중립 색상 : 콘텐츠를 또렷하고 가독성 있게 */
	--text-primary: #1e293b; /* 깊은 그레이-블랙 (본문 텍스트) */
	--text-secondary: #64748b; /* 중간 그레이 (보조 텍스트) */
	--text-tertiary: #94a3b8; /* 연한 그레이 (3차 텍스트) */

	/* 배경 색상 */
	--bg-primary: #ffffff; /* 화이트 (기본 배경) */
	--bg-secondary: #f8fafc; /* 아주 연한 그레이 (보조 배경) */
	--bg-tertiary: #e2e8f0; /* 연한 그레이 (구분선/카드 배경) */
	--bg-cancel:#afb4b9;
	
	/* 테두리 색상 */
	--border-primary: #e2e8f0; /* 연한 그레이 테두리 */
	--border-secondary: #cbd5e1; /* 중간 그레이 테두리 */

	/* 상호작용 상태 색상 */
	--hover-primary: #7c3aed; /* 주 색상 호버 (짙은 퍼플) */
	--active-primary: #5b21b6; /* 주 색상 활성 (어두운 퍼플) */
	--hover-success: #059669; /* 성공 색상 호버 */
	--hover-warning: #d97706; /* 경고 색상 호버 */
	--hover-danger: #dc2626; /* 위험 색상 호버 */
	--hover-info: #2563eb; /* 정보 색상 호버 */

	/* 특수 요소 색상 */
	--disabled: #cbd5e1; /* 비활성 상태 색상 */
	--placeholder: #94a3b8; /* 플레이스홀더 텍스트 색상 */
	--shadow: rgba(99, 102, 241, 0.1); /* 그림자 색상 (주 색상의 투명 톤) */
}