//mixin 공통으로 사용할 수 있는 범용적 css ========================================================
.flex(@display: flex, @justifyCenter: center, @alignCenter: center, @direction: row) {
  display: @display;
  justify-content: @justifyCenter;
  align-items: @alignCenter;
  flex-direction: @direction;
}

.focused(@boxShadow: 0px, @borderRadius: 0px) {
  .position(@position: absolute, @top: 0, @left: 0, @right: 0, @bottom: 0);
  border: 4px solid @PRIMARY_COLOR_RED;
  box-shadow: 0 0 @boxShadow 0 rgba(0, 0, 0, 0.5);
  border-radius: @borderRadius;
  content: "";
}

.size(@w: 50px, @h: 50px) {
  width: @w;
  height: @h;
}

.position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto) {
  position: @position;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

//border-solid
.border-solid(@size, @color) {
  border: @size solid @color;
  box-sizing: border-box;
}

//font
.font (@fontFamily, @fontSize) {
  font-family: @fontFamily;
  font-size: @fontSize;
}

//말줄임
.elip(@clamp) {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @clamp;
}

//background 이미지 삽입
.imgElement (@backgroundW, @backgroundH, @positionX, @positionY) {
  background-size: @backgroundW, @backgroundH;
  background-repeat: no-repeat;
  background-position: @positionX @positionY;
}