@charset "UTF-8";
/**
* colorPalette
* 컬러 파레트
* "공대여자는 이쁘다"를 표시기해야 쓸 수 있습니다.
*/

.colorPalette{
	box-sizing: border-box;
	min-width: 300px;
	min-height: 400px;
}
.colorPalette-tab{
	position: relative;
}

.colorPalette-range{
	position: absolute;top:0px;right: 0px;bottom: 0px;left: 0px;
	padding: 0;margin: 0;
}
.colorPalette-bar{
	position: absolute;top:0;left:50%; z-index: 10;
	pointer-events: none;
}
.colorPalette-box{
	/* background-color: #fff; */
}

/* hsl */
.colorPalette-tab-hsl{
	display: flex;
}
.colorPalette-tab-hsl::before{
	position: absolute;
	text-align: right;
	content: attr(data-toStringHSL) "\a" attr(data-toStringRGB) "\a" attr(data-toStringHEX) ;
	white-space: pre;
	z-index: 10;
	pointer-events: none;
	color:#fff;
	box-shadow: 1px 1px 5px rgba(255,255,255,0.9);
	top:auto;right:45px;bottom: 5px;left:auto;
	background-color: rgba(0,0,0,0.2);
	padding:5px;
	border-radius: 5px;
	width: 9em;
}
.colorPalette-box-sl{
	position: relative;
	cursor: crosshair;
	isolation: isolate;
	flex: 1 0 auto;
	overflow: hidden;
}
.colorPalette-range-s{
	/* background: linear-gradient(to right bottom, hsl(0, 100%, 100%), hsl(0, 100%, 50%)) !important; */
	/* background-color:hsl(0, 100%, 50%); */
	/* background-image: linear-gradient(to top, #000, hsla(20, 42%, 65%, 0)),linear-gradient(to right, #fff, hsla(20, 42%, 65%, 0)); */
	background-image:  linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
	linear-gradient(to right, hsla(0, 0%, 50%, 1) 0%, hsla(0, 0%, 50%, 0) 100%)

	;
	/* mix-blend-mode: multiply; */

}
.colorPalette-range-l{
	/* mix-blend-mode: multiply; */
	/* background: linear-gradient(to bottom, hsla(0, 0%, 25%,0), hsla(0, 0%, 0%,1)); */
	/* background:linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
	linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); */
	/* background-image: linear-gradient(to right, #fff, hsla(20, 42%, 65%, 0)) , linear-gradient(to top, #000, hsla(20, 42%, 65%, 0)); */
	z-index: 2
}

.colorPalette-box-h{
	margin-left: 10px;
	position: relative;
	cursor: crosshair;
	isolation: isolate;
	flex: 0 0 30px;
	overflow: hidden;
}
.colorPalette-range-h{
	background: linear-gradient(to bottom, hsl(0, 100%, 50%),hsl(20, 100%, 50%),hsl(40, 100%, 50%),hsl(60, 100%, 50%)
	,hsl(80, 100%, 50%),hsl(100, 100%, 50%),hsl(120, 100%, 50%),hsl(140, 100%, 50%),hsl(160, 100%, 50%),hsl(180, 100%, 50%)
	,hsl(200, 100%, 50%),hsl(220, 100%, 50%),hsl(240, 100%, 50%),hsl(260, 100%, 50%),hsl(280, 100%, 50%),hsl(300, 100%, 50%)
	,hsl(320, 100%, 50%),hsl(340, 100%, 50%),hsl(360, 100%, 50%));
}



/* colorPalette-bar */
.colorPalette-bar::before{
	content: "";
	box-sizing:border-box;
	border:1px solid #ccc;
	pointer-events: none;
	position: absolute;
}
.colorPalette-bar-s{
	width:2px;overflow: visible;
	height:100%;
}
.colorPalette-bar-s::before{
	left: -2px;top: 0px;bottom: 0px;right: 0px;
	border-width: 0px 1px 0px 1px;
	width: 4px;
}
.colorPalette-bar-l , .colorPalette-bar-h{
	left:0;top:50%;
	height:2px;overflow: visible;
	width:100%;
}
.colorPalette-bar-l::before ,
.colorPalette-bar-h::before{
	left: 0px;top: -2px;bottom: 0;right: 0px;

	border-width: 1px 0px 1px 0px;

	height: 4px;
}




/* 버튼 들 */
.colorPalette-btn{
	border:2px solid #999;
	width:3em;
	height:2em;
	margin:2px 0.3em;
	vertical-align: top;
	border-radius: 0.5em;
	background-color: #ccc;
}
.colorPalette-btn:focus{
	outline-width:0;
}
.colorPalette-btn-curr{
	border: 2px solid #999;
}

.colorPalette-btn-curr::before{
	content: ""
}
.colorPalette-btn-new{
	border: 2px solid #999;
}
.colorPalette-btn-new::before{
	content: ""
}
.colorPalette-btn-confirm::before{
	content: "Confirm"
}
.colorPalette-btn-cancel::before{
	content: "Cancel"
}


/* input 텍스트 */
.colorPalette-text{
	width:3em;text-align: right;
	font-size: inherit;
}

.colorPalette-text-h{
	background: linear-gradient(to right, hsl(0, 100%, 50%),hsl(20, 100%, 50%),hsl(40, 100%, 50%),hsl(60, 100%, 50%)
	,hsl(80, 100%, 50%),hsl(100, 100%, 50%),hsl(120, 100%, 50%),hsl(140, 100%, 50%),hsl(160, 100%, 50%),hsl(180, 100%, 50%)
	,hsl(200, 100%, 50%),hsl(220, 100%, 50%),hsl(240, 100%, 50%),hsl(260, 100%, 50%),hsl(280, 100%, 50%),hsl(300, 100%, 50%)
	,hsl(320, 100%, 50%),hsl(340, 100%, 50%),hsl(360, 100%, 50%))
}
.colorPalette-text-s{
	background: linear-gradient(to right, hsla(0, 0%, 50%, 1) 0%, hsla(0, 0%, 50%, 0) 100%)
}
.colorPalette-text-l{
	background: linear-gradient(to left, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%);
}
.colorPalette-text-r{
	background: linear-gradient(to right, rgba(255,127,127,0) 0%, rgb(255,0,0,1) 100%)
}
.colorPalette-text-g{
	background: linear-gradient(to right, rgba(0,255,0,0) 0%, rgb(0,255,0,1) 100%)
}
.colorPalette-text-b{
	background: linear-gradient(to right, rgba(0,0,255,0) 0%, rgb(0,0,255,1) 100%)
}
/* linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
linear-gradient(to right, hsla(0, 0%, 50%, 1) 0%, hsla(0, 0%, 50%, 0) 100%) */

.colorPalette-box-hsl , .colorPalette-box-rgb , .colorPalette-box-colorString , .colorPalette-box-btns{
	display: flex;
	margin-top:0.5em;
}
.colorPalette-box-colorString dl{margin:0; box-sizing: border-box; width: 100%;}
.colorPalette-box-colorString dt{ font-size: 0.5em; font-weight: bold;padding:0;margin:0;}
.colorPalette-box-colorString dd{padding:0 0.1em;margin:0;}
.colorPalette-box-colorString dd input{width:100%;}
.colorPalette-box-colorString .colorPalette-text-rgb,
.colorPalette-box-colorString .colorPalette-text-hsl{ color: #999;}

.colorPalette-text-hsl,.colorPalette-text-rgb,.colorPalette-text-hex{
	width:5em; text-align: left; background-color: transparent;
	border-width:0;
	border-bottom: 1px solid #ccc;
}
.colorPalette-text-hex:invalid{
	text-decoration: line-through;
}
.colorPalette-box-btns >*{
	width: 100%;
}
.colorPalette-tab-info .inputRangeBox{
	margin:0 0.2em;
}
.colorPalette-tab-info .inputRangeBox::before{
	text-shadow: 1px 1px 0px #fff;
}



/* 히스토리 */
.colorPalette-color{
	display: inline-block;
	width:2em;height: 2em;
	margin:3px; padding:0;
	border:1px solid #000;
	position: relative;
	vertical-align: bottom;
}
.colorPalette-color[data-selected]::after{
	position: absolute;
	top:0px; left:0px;
	bottom: 0px; right: 0px;
	content: "✔️";
	justify-content: center;  /* 가로 중앙 */
	align-items: center; /* 세로 중앙 */
}
.colorPalette-bookmark::before{
	content: "📎";
	position: absolute;top: -0.5em; right: 0;
	color: #333;
}

.colorPalette-box-hsl , .colorPalette-box-rgb , .colorPalette-box-colorString{
	/* font-size:24px; */
}

/* 세로방향 FLEX */
.colorPalette{
	display: flex;flex-direction: column;
}
.colorPalette-tab-hsl{
	flex: 0 1 360px;
	min-height: auto;
	max-height: 360px;
}
.colorPalette-tab-info{
	flex: 0 0 0;
	margin-bottom:0.5em;
}
.colorPalette-tab-colors{
	flex: 1 1 200px;
	min-height: 50px;
	overflow-y: auto;
	overflow-x: hidden;

	border: 1px dashed #999;
	border-width: 2px 0 2px 0;
}
.colorPalette-tab-colors:empty{
	display: none;
}


/* 부트스트랩 연동 호환용 */
.colorPalette-modal{

}
.colorPalette-modal .modal-dialog {
	margin: 0 auto;
	padding: 0.5em;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.colorPalette-modal .modal-content{
	max-height: 100%;
}
@media (max-height: 800px) {
	.colorPalette-modal .modal-content{
		height: 100%;
	}
}
.colorPalette-modal .modal-body{
	height: calc(100% - 70px);
	padding: 5px;
}
.colorPalette-modal .modal-body .colorPalette{
	max-height: 100%;
}