/*
 * SosoDodam Micro Interaction / FX Layer
 * v1.0.0 (2026-09-22 KST)
 *
 * Performance policy:
 * - transform / opacity 중심
 * - pointer tracking 없음
 * - 무한 애니메이션 없음
 * - 모바일 강도 축소
 * - prefers-reduced-motion 대응
 */

:root {
    --soso-fx-pink: #f7afc4;
    --soso-fx-pink-soft: rgba(247, 175, 196, 0.22);
    --soso-fx-shadow: 0 10px 28px rgba(84, 47, 61, 0.09);
    --soso-fx-fast: 180ms;
    --soso-fx-normal: 260ms;
    --soso-fx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* FX는 레이아웃에 참여하지 않는 단일 오버레이에서만 출력합니다. */
#soso-fx-layer {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    pointer-events: none;
    overflow: hidden;
    contain: layout style paint;
}

.soso-fx-spark,
.soso-fx-easter {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    will-change: transform, opacity;
    transform: translate3d(var(--soso-x, 0px), var(--soso-y, 0px), 0) translate(-50%, -50%);
}

.soso-fx-spark {
    font-size: var(--soso-size, 13px);
    animation: sosoFxSpark var(--soso-duration, 430ms) var(--soso-fx-ease) forwards;
}

.soso-fx-easter {
    font-size: var(--soso-size, 17px);
    animation: sosoFxEaster var(--soso-duration, 680ms) var(--soso-fx-ease) forwards;
}

@keyframes sosoFxSpark {
    0% {
        opacity: 0;
        transform: translate3d(var(--soso-x, 0px), var(--soso-y, 0px), 0) translate(-50%, -50%) scale(0.62) rotate(0deg);
    }
    22% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate3d(calc(var(--soso-x, 0px) + var(--soso-dx, 0px)), calc(var(--soso-y, 0px) + var(--soso-dy, -18px)), 0) translate(-50%, -50%) scale(1.08) rotate(var(--soso-rot, 10deg));
    }
}

@keyframes sosoFxEaster {
    0% {
        opacity: 0;
        transform: translate3d(var(--soso-x, 0px), calc(var(--soso-y, 0px) + 5px), 0) translate(-50%, -50%) scale(0.72) rotate(-5deg);
    }
    28%, 68% {
        opacity: 1;
        transform: translate3d(var(--soso-x, 0px), calc(var(--soso-y, 0px) - 4px), 0) translate(-50%, -50%) scale(1) rotate(4deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--soso-x, 0px), calc(var(--soso-y, 0px) - 13px), 0) translate(-50%, -50%) scale(0.92) rotate(0deg);
    }
}

/* 상품 카드: 평소에는 조용하고 포인터 hover에서만 아주 조금 움직입니다. */
.rb_shop_list_item,
.rb_shop_list_item .rb_shop_list_item_img,
.rb_shop_list_item .rb_shop_list_item_img img {
    transition-property: transform, box-shadow, filter;
    transition-duration: var(--soso-fx-normal);
    transition-timing-function: var(--soso-fx-ease);
}

.rb_shop_list_item .rb_shop_list_item_img {
    overflow: hidden;
    border-radius: 10px;
}

@media (hover: hover) and (pointer: fine) {
    .rb_shop_list_item:hover {
        transform: translate3d(0, -2px, 0);
    }

    .rb_shop_list_item:hover .rb_shop_list_item_img {
        box-shadow: var(--soso-fx-shadow);
    }

    .rb_shop_list_item:hover .rb_shop_list_item_img img {
        transform: scale(1.018);
    }

    .popup_item_image:hover img {
        transform: scale(1.012);
    }
}

/* 메뉴 텍스트는 JS가 안전한 링크에만 이 클래스를 붙입니다. */
.soso-fx-menu-link {
    position: relative;
}

.soso-fx-menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(247, 175, 196, 0.86), rgba(247, 175, 196, 0.25));
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--soso-fx-normal) var(--soso-fx-ease), opacity var(--soso-fx-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .soso-fx-menu-link:hover::after,
    .soso-fx-menu-link:focus-visible::after {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* 헤더 아이콘/로고는 실제 요소를 이동시키지 않고 내부 그림만 짧게 까딱입니다. */
#header #logo_img img,
#header #tog_gnb_mobile .rb-color-emoji,
#header #notification_top_btn .rb-color-emoji,
#header a[alt="장바구니"] .rb-color-emoji,
#header #rb_my_ovray .rb-color-emoji {
    transform-origin: 50% 70%;
    transition: transform 190ms var(--soso-fx-ease), filter 190ms ease;
}

@media (hover: hover) and (pointer: fine) {
    #header #logo_img:hover img {
        transform: translate3d(0, -1px, 0) rotate(-1deg);
    }

    #header #tog_gnb_mobile:hover .rb-color-emoji,
    #header #notification_top_btn:hover .rb-color-emoji,
    #header a[alt="장바구니"]:hover .rb-color-emoji,
    #header #rb_my_ovray:hover .rb-color-emoji {
        transform: rotate(-4deg) scale(1.035);
    }
}

/* 검색창은 focus 상태에서만 미세하게 반응합니다. */
#header .search_top_wrap_inner {
    transition: transform var(--soso-fx-fast) var(--soso-fx-ease), box-shadow var(--soso-fx-fast) ease;
}

#header .search_top_wrap_inner:focus-within {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 8px 24px rgba(247, 175, 196, 0.13);
}

/* 성공한 장바구니/찜/카운터 반응 */
.soso-fx-success-pop {
    animation: sosoFxSuccessPop 420ms var(--soso-fx-ease) both;
}

@keyframes sosoFxSuccessPop {
    0%, 100% { transform: scale(1); }
    36% { transform: scale(1.13); }
    64% { transform: scale(0.97); }
}

/* 빈 화면 장식: 자리 차지 없이 대상 내부에서만 살짝 등장합니다. */
.soso-fx-empty-host {
    position: relative !important;
}

.soso-fx-empty-charm {
    position: absolute;
    right: max(10px, 3%);
    top: 50%;
    transform: translate3d(0, -50%, 0);
    pointer-events: none;
    user-select: none;
    font-size: 15px;
    line-height: 1;
    opacity: 0;
    animation: sosoFxEmptyPeek 560ms var(--soso-fx-ease) 80ms forwards;
}

@keyframes sosoFxEmptyPeek {
    0% { opacity: 0; transform: translate3d(5px, -50%, 0) scale(0.8) rotate(5deg); }
    60% { opacity: 0.9; transform: translate3d(-1px, -50%, 0) scale(1.04) rotate(-3deg); }
    100% { opacity: 0.68; transform: translate3d(0, -50%, 0) scale(1) rotate(0deg); }
}

/* 모바일은 카드 자체 이동과 그림자 강도를 더 줄입니다. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .rb_shop_list_item,
    .rb_shop_list_item .rb_shop_list_item_img,
    .rb_shop_list_item .rb_shop_list_item_img img {
        transition-duration: 160ms;
    }

    #header .search_top_wrap_inner:focus-within {
        transform: none;
        box-shadow: 0 5px 16px rgba(247, 175, 196, 0.1);
    }

    .soso-fx-empty-charm {
        font-size: 13px;
        right: 8px;
    }
}

/* 접근성: 모션 감소 요청 시 장식 애니메이션을 사실상 제거합니다. */
@media (prefers-reduced-motion: reduce) {
    #soso-fx-layer {
        display: none !important;
    }

    .rb_shop_list_item,
    .rb_shop_list_item .rb_shop_list_item_img,
    .rb_shop_list_item .rb_shop_list_item_img img,
    .popup_item_image img,
    .soso-fx-menu-link,
    .soso-fx-menu-link::after,
    #header #logo_img img,
    #header .rb-color-emoji,
    #header .search_top_wrap_inner,
    .soso-fx-success-pop,
    .soso-fx-empty-charm {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .soso-fx-empty-charm {
        opacity: 0.55;
    }
}