/* 아이콘 컴포넌트 — 가이드 §3 */

/* 기본 — <img> 태그용 */
.icon {
    display: inline-block;
    width: 24px;            /* 표준 */
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
}

.icon-sm  { width: 20px; height: 20px; }
.icon-xs  { width: 16px; height: 16px; }
.icon-lg  { width: 32px; height: 32px; }
.icon-xl  { width: 40px; height: 40px; }

/* ── Mask 아이콘 — currentColor로 색상 제어 가능 ──────────
   사용 예:
   <span class="icon-mask icon-mask-arrow-left" aria-hidden="true"></span>
   .my-btn .icon-mask { background-color: var(--primary-50); } */

.icon-mask {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-mask.icon-sm { width: 20px; height: 20px; }
.icon-mask.icon-xs { width: 16px; height: 16px; }
.icon-mask.icon-lg { width: 32px; height: 32px; }
.icon-mask.icon-xl { width: 40px; height: 40px; }

/* Mask 정의 — 자주 쓰는 것만 등록.
   필요 시 추가할 것. SVG 경로 = static/front/images/user/icon/ */
.icon-mask-arrow-left      { -webkit-mask-image: url('/static/front/images/user/icon/arrow-left.svg');     mask-image: url('/static/front/images/user/icon/arrow-left.svg'); }
.icon-mask-arrow-right     { -webkit-mask-image: url('/static/front/images/user/icon/arrow-right.svg');    mask-image: url('/static/front/images/user/icon/arrow-right.svg'); }
.icon-mask-arrow-top       { -webkit-mask-image: url('/static/front/images/user/icon/arrow-top.svg');      mask-image: url('/static/front/images/user/icon/arrow-top.svg'); }
.icon-mask-arrow-down      { -webkit-mask-image: url('/static/front/images/user/icon/arrow-down.svg');     mask-image: url('/static/front/images/user/icon/arrow-down.svg'); }
.icon-mask-expand-more     { -webkit-mask-image: url('/static/front/images/user/icon/expand_more.svg');    mask-image: url('/static/front/images/user/icon/expand_more.svg'); }
.icon-mask-expand-less     { -webkit-mask-image: url('/static/front/images/user/icon/expand_less.svg');    mask-image: url('/static/front/images/user/icon/expand_less.svg'); }
.icon-mask-close           { -webkit-mask-image: url('/static/front/images/user/icon/close.svg');          mask-image: url('/static/front/images/user/icon/close.svg'); }
.icon-mask-search          { -webkit-mask-image: url('/static/front/images/user/icon/search.svg');         mask-image: url('/static/front/images/user/icon/search.svg'); }
.icon-mask-reset           { -webkit-mask-image: url('/static/front/images/user/icon/reset.svg');          mask-image: url('/static/front/images/user/icon/reset.svg'); }
.icon-mask-share           { -webkit-mask-image: url('/static/front/images/user/icon/share.svg');          mask-image: url('/static/front/images/user/icon/share.svg'); }
.icon-mask-download        { -webkit-mask-image: url('/static/front/images/user/icon/download.svg');       mask-image: url('/static/front/images/user/icon/download.svg'); }
.icon-mask-document        { -webkit-mask-image: url('/static/front/images/user/icon/document.svg');       mask-image: url('/static/front/images/user/icon/document.svg'); }
.icon-mask-eye             { -webkit-mask-image: url('/static/front/images/user/icon/eye.svg');            mask-image: url('/static/front/images/user/icon/eye.svg'); }
.icon-mask-print           { -webkit-mask-image: url('/static/front/images/user/icon/print.svg');          mask-image: url('/static/front/images/user/icon/print.svg'); }
.icon-mask-flag            { -webkit-mask-image: url('/static/front/images/user/icon/flag.svg');           mask-image: url('/static/front/images/user/icon/flag.svg'); }
.icon-mask-government      { -webkit-mask-image: url('/static/front/images/user/icon/government.svg');     mask-image: url('/static/front/images/user/icon/government.svg'); }
.icon-mask-guide-check     { -webkit-mask-image: url('/static/front/images/user/icon/guide_check.svg');    mask-image: url('/static/front/images/user/icon/guide_check.svg'); }
.icon-mask-mic             { -webkit-mask-image: url('/static/front/images/user/icon/stash_mic-light.svg'); mask-image: url('/static/front/images/user/icon/stash_mic-light.svg'); }
.icon-mask-system-danger   { -webkit-mask-image: url('/static/front/images/user/icon/system-danger.svg');  mask-image: url('/static/front/images/user/icon/system-danger.svg'); }
.icon-mask-system-warning  { -webkit-mask-image: url('/static/front/images/user/icon/system-warning.svg'); mask-image: url('/static/front/images/user/icon/system-warning.svg'); }
.icon-mask-system-info     { -webkit-mask-image: url('/static/front/images/user/icon/system-info.svg');    mask-image: url('/static/front/images/user/icon/system-info.svg'); }
.icon-mask-system-success  { -webkit-mask-image: url('/static/front/images/user/icon/system-success.svg'); mask-image: url('/static/front/images/user/icon/system-success.svg'); }
.icon-mask-check-circle    { -webkit-mask-image: url('/static/front/images/user/icon/check_circle.svg');   mask-image: url('/static/front/images/user/icon/check_circle.svg'); }
.icon-mask-heart           { -webkit-mask-image: url('/static/front/images/user/icon/heart.svg');          mask-image: url('/static/front/images/user/icon/heart.svg'); }
.icon-mask-play            { -webkit-mask-image: url('/static/front/images/user/icon/play.svg');           mask-image: url('/static/front/images/user/icon/play.svg'); }
.icon-mask-home            { -webkit-mask-image: url('/static/front/images/user/icon/home.svg');           mask-image: url('/static/front/images/user/icon/home.svg'); }
.icon-mask-analytics       { -webkit-mask-image: url('/static/front/images/user/icon/analytics.svg');      mask-image: url('/static/front/images/user/icon/analytics.svg'); }
.icon-mask-emergency       { -webkit-mask-image: url('/static/front/images/user/icon/emergency.svg');      mask-image: url('/static/front/images/user/icon/emergency.svg'); }
.icon-mask-annotation      { -webkit-mask-image: url('/static/front/images/user/icon/annotation.svg');     mask-image: url('/static/front/images/user/icon/annotation.svg'); }
.icon-mask-certified       { -webkit-mask-image: url('/static/front/images/user/icon/certified.svg');      mask-image: url('/static/front/images/user/icon/certified.svg'); }