@charset "UTF-8";
/**
* InputRangeBox
* input range에 up/down 버튼을 만들어준다. 현재 값을 보여준다.
* "공대여자는 이쁘다"를 표시기해야 쓸 수 있습니다.
*/

.inputRangeBox ,
.inputNumberBox{
	display: inline-flex;
	align-items: center; /* 세로 중앙 */
	min-width:2em;
	width:10em;
	position: relative;
	box-sizing: content-box;
	vertical-align: middle;
}
.inputRangeBox.readOnly ,
.inputRangeBox.disabled ,
.inputNumberBox.readOnly ,
.inputNumberBox.disabled{
	pointer-events: none;	
}
.inputRangeBox.readOnly::before ,
.inputRangeBox.disabled::before ,
.inputNumberBox.readOnly::before ,
.inputNumberBox.disabled::before{
	text-decoration: line-through;
	background-color: rgba(0,0,0,0.1);
}
.inputRangeBox::before ,
.inputNumberBox::before{
	z-index: 1;
	position: absolute;
	left:0; right:0;top:0;margin:0;
	pointer-events: none;
	text-align: center;
	content: attr(data-prefix)attr(data-value)attr(data-suffix);
	align-items: center;
	padding:0;margin:0;line-height: 1em;
	vertical-align: middle;
}

.inputRangeBox button ,
.inputNumberBox button{
	font-size: inherit;
	flex: 0 0 auto;
	padding:0;margin:0;
	width:1em;height: 1em;line-height: 1em;
	align-items: center;
	border-width:0;
	border-radius: 0.5em;
	position: relative;;
}
.inputRangeBox input:focus ,
.inputRangeBox button:focus ,
.inputNumberBox input:focus ,
.inputNumberBox button:focus{
	filter: brightness(0.9);
}
.inputRangeBox input:hover ,
.inputRangeBox button:hover ,
.inputNumberBox input:hover ,
.inputNumberBox button:hover{
	filter: brightness(0.9);
}
.inputRangeBox input:active ,
.inputRangeBox button:active ,
.inputNumberBox input:active ,
.inputNumberBox button:active{
	filter: brightness(0.85);
}
.inputRangeBox button::before ,
.inputNumberBox button::before{
	position: absolute;top:0;bottom: 0;left: 0;right:0;
	font-size: 0.5em;
	content: "➕";
	align-items: center;
}
.inputRangeBox button.btn-m::before ,
.inputNumberBox button.btn-m::before{
	content: "➖";
}

.inputRangeBox input ,
.inputNumberBox input{
	min-width: 1em;
	font-size: 1em;
	flex: 1 1 100%;
	padding:0;margin:0;
	height: 1em;line-height: 1em;
	align-items: center;
	overflow: visible;
}


.inputRangeBox button[data-text]::before ,
.inputNumberBox button[data-text]::before{
	content: attr(data-text);
}


/**
* design-1
* @type {[type]}
*/
.inputRangeBox-design-1 input{
	-webkit-appearance: none;
	background-color: #eee;
	height:1em;
	border-width: 0;
}
.inputRangeBox-design-1 input[type="range"]::-webkit-slider-runnable-track
{
	-webkit-appearance: none;
	height:1em;
	border-radius: 0;
	border: 0px solid #000000;
}
.inputRangeBox-design-1 input[type="range"]::-moz-range-track
{
	height:1em;
	border-radius: 0;
	border: 0px solid #000000; background-color: transparent;
}
.inputRangeBox-design-1 input[type="range"]::-ms-track{
	height:1em;
	border-radius: 0;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

.inputRangeBox-design-1 input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height:1em;
	width:0.2em;
	background-color: rgba(0,0,0,0.3);
	border-radius: 0;
	
	border:0.05em solid rgba(0,0,0,0.6);
	border-width: 0 0.05em 0 0.05em;
}
.inputRangeBox-design-1 input[type="range"]::-moz-range-thumb{
	height:1em;
	width:0.2em;
	background-color: rgba(0,0,0,0.6);
	border-radius: 0;
	border:0.05em solid rgba(0,0,0,0.6);
	border-width: 0 0.05em 0 0.05em;
}
.inputRangeBox-design-1 input[type="range"]::-ms-thumb {
	height:1em;
	width:0.2em;
	background-color: rgba(0,0,0,0.6);
	border-radius: 0;
	border:0.05em solid rgba(0,0,0,0.6);
	border-width: 0 0.05em 0 0.05em;	
}
.inputRangeBox-design-1 input[type="range"]:focus::-ms-fill-lower {
	background: transparent;
}
.inputRangeBox-design-1 input[type="range"]:focus::-ms-fill-upper {
	background: transparent;
}
.inputRangeBox-design-1 input[type="range"]::-ms-fill-lower {
	background: transparent;
}
.inputRangeBox-design-1 input[type="range"]::-ms-fill-upper {
	background: transparent;
}


.inputRangeBox.inputRangeBox-design-1 button{
	background-color: #aaa;
}
.inputRangeBox.inputRangeBox-design-1 button.btn-m{
	border-radius: 50% 0 0 50%;
}
.inputRangeBox.inputRangeBox-design-1 button.btn-p{
	border-radius: 0 50% 50% 0;
}

/* Number box */

.inputNumberBox{
	width: 8em;
	position: static;
}
.inputNumberBox.readOnly ,
.inputNumberBox.disabled{
	pointer-events: none;
}
.inputNumberBox::before{
	position: static;
	content: attr(data-prefix)
}
.inputNumberBox::after{
	position: static;
	content: attr(data-suffix)
}
.inputNumberBox input{
	-moz-appearance:textfield;
	text-align: right;
}
.inputNumberBox input[type="number"]::-webkit-outer-spin-button,
.inputNumberBox input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/**
* design-1
* @type {[type]}
*/
.inputNumberBox-design-1 input{
	-webkit-appearance: none;
	background-color: #fff;
	height:1em;
	border-width: 0;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.8) inset;
}
.inputNumberBox-design-1.readOnly input,
.inputNumberBox-design-1.disabled input{
	background-color: #999;
	color:rgba(0,0,0,0.5);
}
.inputNumberBox.inputNumberBox-design-1 button{
	background-color: #aaa;
}
.inputNumberBox.inputNumberBox-design-1 button.btn-m{
	border-radius: 50% 0 0 50%;
}
.inputNumberBox.inputNumberBox-design-1 button.btn-p{
	border-radius: 0 50% 50% 0;
}