/* =========================================================
   ELEXA MAIN HERO QUICK ACTIONS
   기존 Hero에만 적용
========================================================= */

#mainWrap .section01 .hero-list,
#mainWrap .section01 .hero-area {
    position: relative;
}


/* 버튼 묶음 */
#mainWrap .section01 .elexa-hero-actions {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: center;

    width: max-content;
    gap: 14px;

    margin-top: 24px;

    pointer-events: auto;
}


/* 원형 버튼 */
#mainWrap .section01 .elexa-hero-action {
    display: flex;
    flex: 0 0 64px;

    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;

    background: #fff;
    color: #111;

    cursor: pointer;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* 아이콘 wrapper */
#mainWrap .section01 .elexa-hero-action__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}


#mainWrap .section01 .elexa-hero-action__icon img {
    display: block;

    object-fit: contain;

    transition:
        filter 0.2s ease,
        transform 0.2s ease;
}


/* 1. 상세/주문 */
#mainWrap .section01
.elexa-hero-action:nth-child(1)
.elexa-hero-action__icon img {
    width: 28px;
    height: 50px;

    max-width: none;
    max-height: none;

    transform: translateY(1px);
}


/* 2. 보조금 계산기 */
#mainWrap .section01
.elexa-hero-action:nth-child(2)
.elexa-hero-action__icon img {
    width: 28px;
    height: 47px;

    max-width: none;
    max-height: none;

    transform: translateY(1px);
}


/* 3. 상담 */
#mainWrap .section01
.elexa-hero-action:nth-child(3)
.elexa-hero-action__icon img {
    width: 63px;
    height: 49px;

    max-width: none;
    max-height: none;

    transform: translate(-1px, 1px);
}


/* 4. 렌탈 */
#mainWrap .section01
.elexa-hero-action:nth-child(4)
.elexa-hero-action__icon img {
    width: 32px;
    height: auto;

    max-width: none;
    max-height: 47px;

    transform: translateY(1px);
}


/* PC hover */
@media (hover: hover) and (pointer: fine) {

    #mainWrap .section01 .elexa-hero-action:hover {
        border-color: #05C3DD;

        background: #05C3DD;

        transform: translateY(-2px);

        box-shadow:
            0 6px 16px rgba(5, 195, 221, 0.30);
    }


    #mainWrap .section01
    .elexa-hero-action:hover
    .elexa-hero-action__icon img {
        filter: brightness(0) invert(1);
    }
}


/* 키보드 접근 */
#mainWrap .section01 .elexa-hero-action:focus-visible {
    outline: 2px solid #05C3DD;
    outline-offset: 3px;
}


/* 클릭 */
#mainWrap .section01 .elexa-hero-action:active {
    border-color: #05C3DD;

    background: #05C3DD;

    transform: scale(0.96);
}


#mainWrap .section01
.elexa-hero-action:active
.elexa-hero-action__icon img {
    filter: brightness(0) invert(1);
}


/* =========================================================
   MOBILE
   preview와 동일하게 버튼 크기는 유지하고 위치만 Hero 하단
========================================================= */

@media (max-width: 768px) {

    /* 위치 기준은 Hero 전체 */
    #mainWrap .section01 .hero-list {
        position: relative !important;
    }

    /*
     * hero-area 높이를 기준으로 잡지 않도록 해제
     * Hero마다 텍스트 높이가 달라도 버튼 위치가 변하지 않음
     */
    #mainWrap .section01 .hero-area {
        position: static !important;
    }

     #mainWrap .section01 .elexa-hero-actions {
        position: absolute !important;

        left: 50% !important;
        bottom: 8px !important;

        z-index: 30;

        display: flex;
        align-items: center;
        justify-content: center;

        width: auto;
        gap: 10px;

        margin: 0;

        transform: translateX(-50%);
        white-space: nowrap;
    }
}