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

:root{
	--border-radaus:1.4em;
	--border-radaus2:.6em;
}

.theme- {
	--primary: #ff2d2d; /* 메인 하이라리트 칼라   */
	--success: #2adda2; /* 메인 하이라이트 보조칼라 */
	--warning: #f50b0b; /* 밝은 오렌지 (경고) */
	--danger: #ff5252; /* 밝은 레드 (위험) */
	--star:#ff5252;
	--info: #9ca2da; /* 밝은 블루 (정보) */
	
	--text-primary: #1e293b; /* 깊은 그레이-블랙 (본문 텍스트) */
	--text-anti-primary: #ffffff; /* 진한 배경색 반대색  */
	--text-secondary: #64748b; /* 중간 그레이 (보조 텍스트) */
	--text-tertiary: #94a3b8; /* 연한 그레이 (3차 텍스트) */

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

	/* 상호작용 상태 색상 */
	--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); /* 그림자 색상 (주 색상의 투명 톤) */
	--box-shadow: .1em .1em .4em var(--shadow);
}

.theme-default {
	--primary: #0082CE; /* 메인 하이라리트 칼라   */
	--success: #009689; /* 메인 하이라이트 보조칼라 */
	--warning: #f59e0b; /* 밝은 오렌지 (경고) */
	--danger: #ff6266; /* 밝은 레드 (위험) */
	--star:#ff6266;
	--info: #777caa; /* 밝은 블루 (정보) */
	
	--text-primary: #1e293b; /* 깊은 그레이-블랙 (본문 텍스트) */
	--text-anti-primary: #ffffff; /* 진한 배경색 반대색  */
	--text-secondary: #64748b; /* 중간 그레이 (보조 텍스트) */
	--text-tertiary: #94a3b8; /* 연한 그레이 (3차 텍스트) */

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

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

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

.theme-red {
	--primary: #ef4444; /* 메인 하이라이트 칼라 (레드 중심) */
	--success: #eb8f27; /* 성공(녹색) 보조 */
	--warning: #f59e0b; /* 경고(오렌지) */
	--danger: #ef4444; /* 위험(레드) */
	--star:#ef4444;
	--info: #f87171; /* 보조 정보색 (연한 레드) */

	--text-primary: #1e293b; /* 본문 텍스트 */
	--text-anti-primary: #ffffff; /* 진한 배경일 때 반전 텍스트 */
	--text-secondary: #64748b; /* 보조 텍스트 */
	--text-tertiary: #94a3b8; /* 3차 텍스트 */

	/* 배경 색상 */
	--bg-body: #ffffff;
	--bg-primary: #ffffff; /* 아주 옅은 레드 배경 */
	--bg-secondary: #fff8f8; /* 연한 레드(보조) */
	--bg-tertiary: #fee2e2; /* 카드/구분 배경 */
	--bg-dark: #a51111; /* 어두운 레드/브라운 계열 배경 */
	--bg-cancel: #ffdede;
	--bg-input:#f9f7f7;

	/* 테두리 색상 */
	--border-dark: #7f1d1d; /* 진한 레드 테두리 */
	--border-primary: #e0dbdb; /* 연한 테두리 */
	--border-secondary: #e0dbdb; /* 중간 테두리 */
	--border-input:#c7bdbd; /* 진한 레드 테두리 *;

	/* 상호작용 상태 색상 */
	--hover-primary: #ff6b6b; /* 호버 (밝아진 레드) */
	--active-primary: #b91c1c; /* 활성 (어두운 레드) */
	--hover-success: #059669;
	--hover-warning: #d97706;
	--hover-danger: #c02626;
	--hover-info: #ef9a9a;

	/* 특수 요소 색상 */
	--disabled: #ef4444;
	--placeholder: #94a3b8;
	--shadow: rgba(239,68,68,0.08); /* 레드 계열 그림자 */
	--box-shadow: .1em .1em .4em var(--shadow);
}

.theme-orange {
	--primary: #f97316; /* 메인 하이라이트 칼라 (오렌지) */
	--success: #3b3e42; /* 성공(녹색) 보조 */
	--warning: #f59e0b; /* 경고(밝은 오렌지/앰버) */
	--danger: #ef4444; /* 위험(레드) */
	--star:#ef4444;
	--info: #fb923c; /* 보조 정보색(밝은 오렌지) */

	--text-primary: #1e293b; /* 본문 텍스트 */
	--text-anti-primary: #ffffff; /* 진한 배경일 때 반전 텍스트 */
	--text-secondary: #64748b; /* 보조 텍스트 */
	--text-tertiary: #94a3b8; /* 3차 텍스트 */

	/* 배경 색상 */
	--bg-body: #ffffff;
	--bg-primary: #F9F9FA; /* 아주 옅은 오렌지 배경 */
	--bg-secondary: #efefef; /* 연한 오렌지(보조) */
	--bg-tertiary: #e4e4e4; /* 카드/구분 배경 */
	--bg-dark: #767e85; /* 어두운 오렌지/갈색 계열 배경 */
	--bg-cancel: #CED0D1;
	--bg-input:#ffffff;

	/* 테두리 색상 */
	--border-dark: #767f86; /* 진한 오렌지/브라운 테두리 */
	--border-primary: #dfe2e3; /* 연한 테두리 */
	--border-secondary: #D9DBDC; /* 중간 테두리 */
	--border-input:#D9DBDC; /* 진한 오렌지/브라운 테두리 *;

	/* 상호작용 상태 색상 */
	--hover-primary: #ff7a18; /* 호버(밝아짐) */
	--active-primary: #c2410c; /* 활성(어두워짐) */
	--hover-success: #059669;
	--hover-warning: #d97706;
	--hover-danger: #dc2626;
	--hover-info: #ea580c;

	/* 특수 요소 색상 */
	--disabled: #cbd5e1;
	--placeholder: #94a3b8;
	--shadow: rgba(110, 59, 23, 0.08); /* 오렌지 계열 그림자 */
	--box-shadow: .1em .1em .4em var(--shadow);
}

.theme-mint {
	/* 주 색상 : */
	--primary: #25b8a4; /* 민트 메인 */
	--success: #10b981; /* 성공(녹색) 보조 */
	--warning: #f59e0b; /* 밝은 오렌지 (경고) */
	--danger: #ef4444; /* 밝은 레드 (위험) */
	--star:#ef4444;
	--info: #0ea5a4; /* 민트톤 정보색 */

	--text-primary: #0f172a; /* 깊은 그레이-블랙 (본문 텍스트) */
	--text-anti-primary: #ffffff; /* 진한 배경색 반대색 */
	--text-secondary: #475569; /* 중간 그레이 (보조 텍스트) */
	--text-tertiary: #94a3b8; /* 연한 그레이 (3차 텍스트) */

	/* 배경 색상 */
	--bg-body: #F5F7F9;
	--bg-primary: #ffffff; /* 아주 옅은 민트 배경 */
	--bg-secondary: #f9ffff; /* 연한 민트 (보조 배경) */
	--bg-tertiary: #d5dddc; /* 카드/구분 배경 */
	--bg-dark: #083238; /* 어두운 민트톤 배경 */
	--bg-cancel: rgb(156, 156, 156);
	--bg-input:#ffffff;

	/* 테두리 색상 */
	--border-dark: #1f6f66; /* 진한 민트 테두리 */
	--border-primary: #d0dada; /* 연한 민트 테두리 */
	--border-secondary: #9ac9c4; /* 중간 민트 테두리 */
	--border-input:#dce3e2; /* 진한 민트 테두리 *;

	/* 상호작용 상태 색상 */
	--hover-primary: #13b8a9; /* 주 색상 호버 (진한 민트) */
	--active-primary: #0e8f82; /* 주 색상 활성 (어두운 민트) */
	--hover-success: #059669; /* 성공 색상 호버 */
	--hover-warning: #d97706; /* 경고 색상 호버 */
	--hover-danger: #dc2626; /* 위험 색상 호버 */
	--hover-info: #0a8c83; /* 정보 색상 호버 */

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

.theme-ocean {
	--primary: #0ea5a4; /* 청록 계열 메인 */
	--success: #06b6d4;
	--warning: #f97316;
	--danger: #ef4444;
	--star:#ef4444;
	--info: #0284c7;

	--text-primary: #0f172a;
	--text-anti-primary: #ffffff;
	--text-secondary: #6b7280;
	--text-tertiary: #9aa6b2;

	--bg-body: #FFF;
	--bg-primary: #f9fcfc;
	--bg-secondary: #F8FCFC;
	--bg-tertiary: #ECF6F6;
	--bg-dark: #012b34;
	--bg-cancel: #9fb0b4;
	--bg-input:#f9fcfc;

	--border-dark: #0b5560;
	--border-primary: #d5dfdf;
	--border-secondary: #DEEDED;
	--border-input: #d5dfdf;

	--hover-primary: #0891b2;
	--active-primary: #03636a;
	--hover-success: #0288a9;
	--hover-warning: #e65a00;
	--hover-danger: #dc2626;
	--hover-info: #0369a1;

	--disabled: #cbd5e1;
	--placeholder: #9aa6b2;
	--shadow: rgba(14,165,164,0.08);
	--box-shadow: .1em .1em .4em var(--shadow);
}
 
.theme-dark-blue {
	--primary: #5f95e0; /* 차분한 실버-그레이 강조색 */
	--success: #10b981;
	--warning: #f59e0b;
	--danger: #ef4444;
	--star:#ef4444;
	--info: #60a5fa;

	--text-primary: #e6eef8; /* 본문 밝은 텍스트 */
	--text-anti-primary: #d0d9df; /* 어두운 배경에서 반전 텍스트(필요한 경우) */
	--text-secondary: #94a3b8; /* 보조 텍스트 */
	--text-tertiary: #6b7280; /* 3차 텍스트 */

	/* 배경 색상 (어두운 계열) */
	--bg-body: #383f46; /* 페이지 배경 - 거의 검정 */
	--bg-primary: #3c454f; /* 주요 컴포넌트 배경 */
	--bg-secondary: #313a45; /* 보조 배경 */
	--bg-tertiary: #8f9399; /* 카드/구분 배경 */
	--bg-dark: #000000; /* 완전한 블랙 */
	--bg-cancel: #1f2225; /* 취소/비활성 배경 */
	--bg-input:#39424d;

	/* 테두리 색상 */
	--border-dark: #d6d8db;
	--border-primary: #4a626d;
	--border-secondary: #7a8791;
	--border-input:rgb(86, 114, 128);

	/* 상호작용 상태 색상 */
	--hover-primary: #1587f8; /* 호버 시 밝아지는 강조색 */
	--active-primary: #4a77da; /* 활성화된 강조색 */
	--hover-success: #059669;
	--hover-warning: #d97706;
	--hover-danger: #dc2626;
	--hover-info: #3b82f6;

	/* 특수 요소 색상 */
	--disabled: #5f95e0; /* 비활성 텍스트/아이콘 */
	--placeholder: #6b7280; /* 입력 플레이스홀더 */
	--shadow: rgba(0,0,0,0.3); /* 어두운 그림자 */
	--box-shadow: .1em .1em .4em var(--shadow);
}
 
.theme-dark-red {
	/* 다크 레드 테마 (기존 .theme-dark-blue를 다크 레드로 교체) */
	--primary: #E63946; /* 진한 레드(주 강조색) */
	--success: #e6be39;
	--warning: #f5130b;
	--danger: #ff0000;
	--star:#ef4444;
	--info: #f39191;

	--text-primary: #ffffff; /* 밝은 본문 텍스트 */
	--text-anti-primary: #ffffff; /* 진한 배경용 반전 텍스트 */
	--text-secondary: #f0dcdc; /* 보조 텍스트 */
	--text-tertiary: #9aa0a0; /* 3차 텍스트 */

	/* 배경 색상 (어두운 레드 계열) */
	--bg-body: #1A1818; /* 페이지 배경 */
	--bg-primary: #211F1F; /* 주요 컴포넌트 배경 */
	--bg-secondary: #242121; /* 보조 배경 */
	--bg-tertiary: #2D2929; /* 카드/구분 배경 */
	--bg-dark: #A8202A; /* 완전 블랙 */
	--bg-cancel: #121010; /* 취소/비활성 배경 */
	--bg-input:#2D2929;

	/* 테두리 색상 */
	--border-dark: #2D2929;
	--border-primary: #3D3838;
	--border-secondary: #524C4C;
	--border-input:#3D3838;

	/* 상호작용 상태 색상 */
	--hover-primary: #ff6b6b; /* 호버 시 밝아지는 레드 */
	--active-primary: #7f1d1d; /* 활성화된 강조색 */
	--hover-success: #059669;
	--hover-warning: #d97706;
	--hover-danger: #c02626;
	--hover-info: #fca5a5;

	/* 특수 요소 색상 */
	--disabled: #E63946; /* 비활성 텍스트/아이콘 */
	--placeholder: #9a8888; /* 입력 플레이스홀더 */
	--shadow: rgba(0,0,0,0.4); /* 어두운 그림자 */
	--box-shadow: .1em .1em .4em var(--shadow);
}

.theme-dark-green {
	/* 다크 그린 테마 */
	--primary: #40B43E; /* 진한 그린(주 강조색) */
	--success: #239e21;
	--warning: #f59e0b;
	--danger: #ef4444;
	--star:#ef4444;
	--info: #6dd46b;

	--text-primary: #ffffff; /* 밝은 본문 텍스트 */
	--text-anti-primary: #ffffff; /* 진한 배경용 반전 텍스트 */
	--text-secondary: #bcd6c6; /* 보조 텍스트 */
	--text-tertiary: #9aaea0; /* 3차 텍스트 */

	/* 배경 색상 (어두운 그린 계열) */
	--bg-body: #1A1C1A; /* 페이지 배경 - 거의 블랙에 가까운 짙은 그린 */
	--bg-primary: #242624; /* 주요 컴포넌트 배경 */
	--bg-secondary: #2E312E; /* 보조 배경 */
	--bg-tertiary: #214f3e; /* 카드/구분 배경 */
	--bg-dark: #1A1C1A; /* 완전 블랙 */
	--bg-cancel: #3E413E; /* 취소/비활성 배경 */
	--bg-input:#3E413E;

	/* 테두리 색상 */
	--border-dark: #3E413E;
	--border-primary: #3E413E;
	--border-secondary: #3E413E;
	--border-input:#3E413E;

	/* 상호작용 상태 색상 */
	--hover-primary: #2A7A29; /* 호버 시 밝아지는 강조색 */
	--active-primary: #52D050; /* 활성화된 강조색 */
	--hover-success: #059669;
	--hover-warning: #d97706;
	--hover-danger: #c02626;
	--hover-info: #2dd4bf;

	/* 특수 요소 색상 */
	--disabled: #40B43E; /* 비활성 텍스트/아이콘 */
	--placeholder: #9aaea0; /* 입력 플레이스홀더 */
	--shadow: rgba(0,0,0,0.8); /* 어두운 그림자 */
	--box-shadow:  0 4px 20px rgba(0,0,0,0.3);
}

.theme-dark-orange {
	/* 다크 오렌지 테마 (Sunset Orange) */
	--primary: #F3A04C; /* 메인 오렌지 (주 강조색) */
	--success: #40B43E;
	--warning: #FFB11B;
	--danger: #E65C53;
	--star: #FFB11B;
	--info: #58B2DC;

	--text-primary: #FFFFFF; /* 밝은 본문 텍스트 */
	--text-anti-primary: #FFFFFF; /* 진한 오렌지 배경용 반전 텍스트 (가독성 위해 검정 권장) */
	--text-secondary: #B8B3AF; /* 보조 텍스트 (웜 그레이 톤) */
	--text-tertiary: #706B67; /* 3차 텍스트 */

	/* 배경 색상 (따뜻한 기운이 도는 어두운 회색 계열) */
	--bg-body: #1C1B1A; /* 페이지 배경 */
	--bg-primary: #242220; /* 주요 컴포넌트 배경 */
	--bg-secondary: #2D2B29; /* 보조 배경 */
	--bg-tertiary: #3D3834; /* 카드/구분 배경 */
	--bg-dark: #121110; /* 완전 블랙에 가까운 딥 브라운 */
	--bg-cancel: #3E3B38; /* 취소/비활성 배경 */
	--bg-input: #2D2B29;

	/* 테두리 색상 */
	--border-dark: #3E3B38;
	--border-primary: #4A4540;
	--border-secondary: rgba(255, 255, 255, 0.05);
	--border-input: #4A4540;

	/* 상호작용 상태 색상 */
	--hover-primary: #E58522; /* 호버 시 진해지는 강조색 */
	--active-primary: #FFB11B; /* 활성화된 밝은 강조색 */
	--hover-success: #37b42c;
	--hover-warning: #d6871a;
	--hover-danger: #D14B42;
	--hover-info: #49A3CD;

	/* 특수 요소 색상 */
	--disabled: #E58522; /* 비활성 텍스트/아이콘 */
	--placeholder: #706B67; /* 입력 플레이스홀더 */
	--shadow: rgba(0, 0, 0, 0.5); /* 어두운 그림자 */
	
	/* 박스 그림자: 심플하지만 디테일한 0.15 오렌지 하이라이트 포함 */
	--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 1px rgba(243, 160, 76, 0.15);
}