@charset "UTF-8";
 html, body {
	 height: 100%;
}
 body.multiRange-grabbing {
	 cursor: grabbing;
}
 .multiRange {
	 user-select: none;
	 height: 5%;
}
 .multiRange__rangeWrap {
	 height: 12px;
	 background: #e8e8e8;
	 border-radius: 3px;
	 position: relative;
	 z-index: 5;
}
 .multiRange__range {
	 height: 105%;
	 position: absolute;
	 right: 0;
	 background: currentColor;
}
 .multiRange__range:nth-child(1) {
	 color: #e5b26c;
}
 .multiRange__range:nth-child(2) {
	 color: #d1e56c;
}
 .multiRange__range:nth-child(3) {
	 color: #8ae56c;
}
 .multiRange__range:nth-child(4) {
	 color: #6ce594;
}
 .multiRange__range:nth-child(5) {
	 color: #6ce5db;
}
.multiRange__range:nth-child(6) {
	color: #6cc2e5; /* 밝은 하늘색 */
}
.multiRange__range:nth-child(7) {
	color: #6c94e5; /* 밝은 파랑 */
}
.multiRange__range:nth-child(8) {
	color: #8b6ce5; /* 보라 계열 */
}
.multiRange__range:nth-child(9) {
	color: #c86ce5; /* 보라+분홍 중간 */
}
.multiRange__range:nth-child(10) {
	color: #e56ccc; /* 분홍+연보라 */
}
 .multiRange__range:first-child > .multiRange__handle {
	 display: none;
}
 .multiRange__range.grabbed > .handle {
	 background: black;
}
 .multiRange__range .multiRange__handle {
	 width: 4px;
	 position: absolute;
	 top: -3px;
	 bottom: -3px;
	 left: -2px;
	 cursor: grab;
	 background: currentColor;
	 box-shadow: 1px 0 white, -1px 0 white;
	 transition: 0.2s;
}
 .multiRange__range .multiRange__handle:active {
	 cursor: inherit;
}
 .multiRange__range .multiRange__handle__value {
	 position: absolute;
	 transform: translate(-50%, -6px);
	 min-width: 10px;
	 background: #333;
	 color: white;
	 padding: 2px 6px;
	 top: -100%;
	 left: 2px;
	 white-space: nowrap;
	 font-size: 11px;
	 text-align: center;
	 border-radius: 4px;
	 cursor: default;
}
 .multiRange__range .multiRange__handle__value::after {
	 content: "";
	 position: absolute;
	 left: 50%;
	 bottom: -3px;
	 border-color: #333 transparent transparent;
	 border-style: solid;
	 border-width: 3px 4px;
	 transform: translate(-50%, 50%);
	 color: #333;
	 font-size: 15px;
}
 .multiRange__ticks {
	 display: flex;
	 justify-content: space-between;
	 height: 6px;
	 margin: 2px 0 0 0;
	 font: 10px Arial;
	 cursor: default;
}
 .multiRange__ticks > div {
	 height: 100%;
	 width: 1px;
	 background: #ddd;
	 color: #888;
}
 .multiRange__ticks > div:nth-child(5n - 4) {
	 height: 200%;
}
 .multiRange__ticks > div:nth-child(5n - 4)::before {
	 display: block;
	 content: attr(data-value);
	 transform: translate(-50%, 100%);
	 text-align: center;
	 width: 40px;
	 font-size: 13px;
}