/* =============================================
   AIONCLOUD User Portal Icon Sprite
   SVG : /img/AIONCLOUD_User-Portal_ICON.svg (1090 x 970)
   Default display size : 18.2px
   Usage : <span class="portal-icon icon-home"></span>
   Custom size : <span class="portal-icon icon-home icon-size-20"></span>
   Inline size : <span class="portal-icon icon-home" style="--icon-size: 20px"></span>
   ============================================= */

.portal-icon {
    --icon-size: 18.2px;
    --icon-base-size: 18.2px;
    --sprite-base-width: 396.76px;
    --sprite-base-height: 353.08px;
    --icon-scale: calc(var(--icon-size) / var(--icon-base-size));
    --x: 0px;
    --y: 0px;

    position: relative;
    top: -1px;

    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: linear-gradient(transparent, transparent), url(/img/AIONCLOUD_User-Portal_ICON.svg);
    background-size:
        calc(var(--sprite-base-width) * var(--icon-scale))
        calc(var(--sprite-base-height) * var(--icon-scale));
    background-position:
        calc(var(--x) * var(--icon-scale))
        calc(var(--y) * var(--icon-scale));
    background-repeat: no-repeat;
    vertical-align: middle;
}
.icon-size-14 { --icon-size: 14px; }
.icon-size-15 { --icon-size: 15px; }
.icon-size-16 { --icon-size: 16px; }
.icon-size-17 { --icon-size: 17px; }
.icon-size-18 { --icon-size: 18px; }
.icon-size-19 { --icon-size: 19px; }
.icon-size-20 { --icon-size: 20px; }
.icon-size-21 { --icon-size: 21px; }
.icon-size-22 { --icon-size: 22px; }
.icon-size-23 { --icon-size: 23px; }
.icon-size-24 { --icon-size: 24px; }
.icon-size-25 { --icon-size: 25px; }
.icon-size-26 { --icon-size: 26px; }
.icon-size-27 { --icon-size: 27px; }
.icon-size-28 { --icon-size: 28px; }
.icon-size-29 { --icon-size: 29px; }
.icon-size-30 { --icon-size: 30px; }
.icon-size-31 { --icon-size: 31px; }
.icon-size-32 { --icon-size: 32px; }
.icon-size-33 { --icon-size: 33px; }
.icon-size-34 { --icon-size: 34px; }
.icon-size-35 { --icon-size: 35px; }
.icon-size-36 { --icon-size: 36px; }
.icon-size-37 { --icon-size: 37px; }
.icon-size-38 { --icon-size: 38px; }
.icon-size-39 { --icon-size: 39px; }
.icon-size-40 { --icon-size: 40px; }



/* Row 1 */
.icon-home-menu          { --x: -0.15px;   --y: -1.64px; }
.icon-cloud-menu         { --x: -22.5px;  --y: 0.64px; }
.icon-user-menu          { --x: -44.72px;  --y: -1.64px; }
.icon-user-guide-menu          { --x: -67.26px;  --y: -1.64px; }
.icon-release-note-menu     { --x: -91.00px;  --y: -2.64px; }
.icon-ticket-menu        { --x: -111.5px; --y: -1.64px; }
.icon-lock          { --x: -135.68px; --y: -1.64px;}
.icon-key           { --x: -156.52px; --y: -1.64px; }
.icon-more-info     { --x: -178.36px; --y: -3.64px; }
.icon-shield-menu        { --x: -200.5px; --y: -1.64px; }
.icon-card-green          { --x: -222.04px; --y: -0.36px; }
.icon-logout        { --x: -243.88px; --y: -0.36px; }
.icon-history       { --x: -267.72px; --y: -1.64px; }
.icon-calendar      { --x: -289.56px; --y: -0.64px; }
.icon-detail-black          { --x: -309.40px; --y: -3.64px; }
.icon-new-ticket           { --x: -331.24px; --y: -0.64px; }
.icon-account       { --x: -354.08px; --y: -1.64px; }
.icon-admin    { --x: -378.92px; --y: -1.64px; }

/* Row 2 */
.icon-globe { --x: -1.10px;   --y: -22.48px;}
.icon-edit          { --x: -25.48px;  --y: -22.48px; }
.icon-search        { --x: -44.32px;  --y: -21.48px; }
.icon-warning       { --x: -69.16px;  --y: -21.48px }
.icon-refresh       { --x: -91.00px;  --y: -21.48px; }
.icon-more-343A40          { --x: -112.84px; --y: -24.48px; }
.icon-help          { --x: -134.68px; --y: -22.48px; }
.icon-more-6C757D         { --x: -155.52px; --y: -23.48px; }
.icon-ticket-dashboard          { --x: -178.36px; --y: -24.48px; }
.icon-user-dashboard     { --x: -202.20px; --y: -24.48px; }
.icon-bank-transfer          { --x: -222.04px; --y: -24.48px; }
.icon-prepaid       { --x: -243.88px; --y: -24.48px; }
.icon-bell          { --x: -265.72px; --y: -24.48px; }
.icon-gear          { --x: -287.56px; --y: -24.48px; }
.icon-cursor        { --x: -307.40px; --y: -22.48px; }
.icon-arrow-right   { --x: -331.24px; --y: -23.48px; }
.icon-close         { --x: -353.08px; --y: -24.48px; }
.icon-invoice     { --x: -374.92px; --y: -24.48px; }

/* Row 3 */
.icon-upload        { --x: -3.64px;   --y: -47.32px; }
.icon-download      { --x: -25.48px;  --y: -47.32px; }
.icon-alert-yellow         { --x: -47.32px;  --y: -45.32px; }
.icon-info          { --x: -68.16px;  --y: -45.32px; }
.icon-filter        { --x: -91.00px;  --y: -46.32px; }
.icon-check-circle           { --x: -112.84px; --y: -47.32px; }
.icon-cheveron-down-gray         { --x: -134.68px; --y: -47.32px; }
.icon-cheveron-353B41       { --x: -156.52px; --y: -45.32px; }
.icon-account-3D3939         { --x: -178.36px; --y: -47.32px; }
.icon-cheveron-down-black         { --x: -200.20px; --y: -47.32px; }
.icon-help-gray { --x: -222.04px; --y: -43.32px; }
.icon-detail-gray          { --x: -243.88px; --y: -45.32px; }
.icon-detail-down-gray  { --x: -265.72px; --y: -45.32px; }
.icon-warning-green         { --x: -287.56px; --y: -42.32px; }
.icon-cloud-white          { --x: -309.40px; --y: -47.32px; }
.icon-user-white           { --x: -331.24px; --y: -47.32px; }
.icon-cheveron-left { --x: -353.08px; --y: -47.32px;}
.icon-card-1C1C1E          { --x: -377.92px; --y: -43.32px; }


/* Row 4 */
.icon-home-admin-menu { --x: -1.10px;   --y: -66.16px; }
.icon-home-admin-green          { --x: -25.48px;  --y: -66.16px; }
.icon-users          { --x: -45.32px;  --y: -66.16px; }
.icon-users-green      { --x: -68.16px;  --y: -66.16px; }
.icon-billing       { --x: -91.00px;  --y: -66.16px; }
.icon-billing-green { --x: -112.84px; --y: -66.16px; }
.icon-product-catalog { --x: -134.68px; --y: -66.16px}
.icon-product-catalog-green    { --x: -156.52px; --y: -68.16px;}
.icon-adduser      { --x: -180.36px; --y: -65.16px; }
.icon-create-coupon { --x: -202.20px; --y: -65.16px;}
.icon-cheveron-left-3D3939 { --x: -222.04px; --y: -68.16px; }
.icon-cloud-dashboard { --x: -243.88px; --y: -67.16px; }
.icon-card { --x: -269.72px; --y: -66.16px; }
.icon-bank-transfer-green { --x: -289.56px; --y: -66.16px; }
.icon-cheveron-right-green { --x: -311.30px; --y: -66.16px;}
.icon-warning-background-white { --x: -333.04px; --y: -66.16px;}

/* Row 5 */
.icon-promotion-menu{ --x: -1.10px;   --y: -88.00px; }



/* ==============================================
   Icon Color State System
   background-image SVG는 CSS color가 먹히지 않으므로
   filter를 사용해 색상을 변환한다.

   [ Active ]   .br-menu-item.active .portal-icon   — 자동 적용 (메뉴 전용)
   [ 고정색 ]   .portal-icon.icon-col-{color}       — 특정 화면에서 색 고정
   [ Hover색 ]  .portal-icon.hover-{color}          — 특정 화면에서 hover 시 색 변환

   사용 예:
     <i class="portal-icon icon-shield-menu icon-col-green"></i>
     <i class="portal-icon icon-edit hover-black"></i>
     <i class="portal-icon icon-gear icon-col-white hover-green"></i>

   선언 순서: active → icon-col-* → hover-* 순으로 두어
   특이도 동일 시 hover-* 가 icon-col-* 를 덮도록 한다.
   ============================================== */

/* ── 1. Menu active state ── */
.br-menu-item.active .portal-icon {
    filter: brightness(0) saturate(100%) invert(22%) sepia(5%) saturate(422%) hue-rotate(314deg) brightness(96%) contrast(94%);
}

/* ── 2. Fixed color modifiers ── */
.portal-icon.icon-col-black {
    filter: brightness(0);
}
.portal-icon.icon-col-white {
    filter: brightness(0) invert(1);
}
/* #5E9441 (AionCloud green) */
.portal-icon.icon-col-green {
    filter: brightness(0) saturate(100%)
            invert(44%) sepia(25%) saturate(781%)
            hue-rotate(64deg) brightness(101%) contrast(88%);
}
/* #343A40 (dark charcoal) */
.portal-icon.icon-col-dark {
    filter: brightness(0) saturate(100%)
            invert(20%) sepia(6%) saturate(726%)
            hue-rotate(167deg) brightness(95%) contrast(93%);
}
/* #A9A9A9 (dark gray) */
.portal-icon.icon-col-gray {
    filter: brightness(0) saturate(100%)
            invert(90%) sepia(0%) saturate(1152%)
            hue-rotate(144deg) brightness(79%) contrast(78%);
}
/* #FF6E5F (coral red) */
.portal-icon.icon-col-red {
    filter: brightness(0) saturate(100%)
            invert(52%) sepia(68%) saturate(1268%)
            hue-rotate(323deg) brightness(102%) contrast(98%);
}
/* #C9CACA (light gray) */
.portal-icon.icon-col-light-gray {
    filter: brightness(0) saturate(100%)
    invert(91%) sepia(5%) saturate(21%)
    hue-rotate(131deg) brightness(90%) contrast(90%);
}
/* ── 3. Hover color modifiers ── */
.portal-icon.hover-black:hover {
    filter: brightness(0) saturate(100%) invert(11%) sepia(9%) saturate(848%) hue-rotate(169deg) brightness(97%) contrast(92%);
}
.portal-icon.hover-white:hover {
    filter: brightness(0) invert(1);
}
/* #5E9441 */
.portal-icon.hover-green:hover {
    filter: brightness(0) saturate(100%)
            invert(44%) sepia(25%) saturate(781%)
            hue-rotate(64deg) brightness(101%) contrast(88%);
}
/* #343A40 */
.portal-icon.hover-dark:hover {
    filter: brightness(0) saturate(100%)
            invert(20%) sepia(6%) saturate(726%)
            hue-rotate(167deg) brightness(95%) contrast(93%);
}

/* ── 4. Parent hover modifiers (부모에 hover 시 자식 아이콘 색 변환) ──
   부모 요소에 클래스를 붙이면 그 안의 모든 .portal-icon 에 적용.
   사용 예: <a class="group-hover-black"> ... <i class="portal-icon ..."></i> </a>
   ── */
.group-hover-black:hover .portal-icon {
    filter: brightness(0) saturate(100%) invert(11%) sepia(9%) saturate(848%) hue-rotate(169deg) brightness(97%) contrast(92%);
}
.group-hover-white:hover .portal-icon {
    filter: brightness(0) invert(1);
}
/* #5E9441 */
.group-hover-green:hover .portal-icon {
    filter: brightness(0) saturate(100%)
            invert(44%) sepia(25%) saturate(781%)
            hue-rotate(64deg) brightness(101%) contrast(88%);
}
/* #343A40 */
.group-hover-dark:hover .portal-icon {
    filter: brightness(0) saturate(100%)
            invert(20%) sepia(6%) saturate(726%)
            hue-rotate(167deg) brightness(95%) contrast(93%);
}