/* 사이트 공통 라인 아이콘 세트(리뉴얼 2B 시안)
   - 스프라이트 PNG(흰색 실루엣)를 mask 로 사용하고 background-color:currentColor 로 색을 상속한다.
     → 기존 아이콘 폰트처럼 텍스트 색/hover 색을 그대로 따라간다.
   - 크기는 --mi 변수로 조절 (기본 16px). 예: <i class="mi-delete" style="--mi:20px">, .mi-lg
   - 사용: <i class="mi-like"></i>  (단일 클래스)
   - 스프라이트: 6열 × 3행, //img.mayya.net/2.0/board-icons.png */

[class^="mi-"],
[class*=" mi-"] {
	--mi: 16px;
	--mx: 0;
	--my: 0;
	display: inline-block;
	width: var(--mi);
	height: var(--mi);
	vertical-align: -0.2em;
	margin-right: 5px;
	background-color: currentColor;
	-webkit-mask-image: url(//img.mayya.net/2.0/board-icons.png);
	mask-image: url(//img.mayya.net/2.0/board-icons.png);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: calc(var(--mi) * 6) calc(var(--mi) * 3);
	mask-size: calc(var(--mi) * 6) calc(var(--mi) * 3);
	-webkit-mask-position: calc(var(--mx) * var(--mi) * -1) calc(var(--my) * var(--mi) * -1);
	mask-position: calc(var(--mx) * var(--mi) * -1) calc(var(--my) * var(--mi) * -1);
}

/* 큰 아이콘(예: 아이콘 타일) */
.mi-lg { --mi: 32px; }

/* row 0 */
.mi-reply   { --mx: 0; --my: 0; }
.mi-write   { --mx: 1; --my: 0; }
.mi-edit    { --mx: 2; --my: 0; }
.mi-delete  { --mx: 3; --my: 0; }
.mi-like    { --mx: 4; --my: 0; }
.mi-dislike { --mx: 5; --my: 0; }
/* row 1 */
.mi-comment { --mx: 0; --my: 1; }
.mi-views   { --mx: 1; --my: 1; }
.mi-refresh { --mx: 2; --my: 1; }
.mi-report  { --mx: 3; --my: 1; }
.mi-top     { --mx: 4; --my: 1; }
.mi-prev    { --mx: 5; --my: 1; }
/* row 2 */
.mi-next    { --mx: 0; --my: 2; }
.mi-list    { --mx: 1; --my: 2; }
.mi-nest    { --mx: 2; --my: 2; }
.mi-pin     { --mx: 3; --my: 2; }
.mi-unpin   { --mx: 4; --my: 2; }