@charset "utf-8";

/**
 * 바른마음 — 스크롤 진입·호버 모션 (마크업 변경 없음 · syou-motion.js 연동)
 */

:root {
    --syou-motion-duration: 0.85s;
    --syou-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --syou-motion-distance: 32px;
    --syou-motion-stagger: 60ms;
}

/* ── 스크롤 진입·이탈 (올릴 때 역방향 transition) ── */
html.syou-root.syou-motion-ready body.syou-layout .syou-motion {
    opacity: 0;
    transform: translate3d(0, var(--syou-motion-distance), 0);
    pointer-events: none;
    transition:
        opacity var(--syou-motion-duration) var(--syou-motion-ease),
        transform var(--syou-motion-duration) var(--syou-motion-ease);
    transition-delay: var(--syou-motion-delay, 0ms);
}

html.syou-root.syou-motion-ready body.syou-layout .syou-motion.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

html.syou-root.syou-motion--reduce body.syou-layout .syou-motion {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
}

/* 히어로·고정 UI는 초기부터 표시 */
html.syou-root.syou-motion-ready body.syou-layout .syou-visual,
html.syou-root.syou-motion-ready body.syou-layout #sec-visual,
html.syou-root.syou-motion-ready body.syou-layout .syou-frame-top,
html.syou-root.syou-motion-ready body.syou-layout #header,
html.syou-root.syou-motion-ready body.syou-layout .pc-sidebar,
html.syou-root.syou-motion-ready body.syou-layout .syou-bottom-quick,
html.syou-root.syou-motion-ready body.syou-layout #footer,
html.syou-root.syou-motion-ready body.syou-layout .quick,
html.syou-root.syou-motion-ready body.syou-layout .diet_btn {
    opacity: 1 !important;
    transform: none !important;
}

/* ── 호버 (인터랙티브 요소) ── */
@media (hover: hover) and (pointer: fine) {
    body.syou-layout .syou-sec-head__more,
    body.syou-layout .syou-site-header__login,
    body.syou-layout .syou-mnav__login,
    body.syou-layout .pc-sidebar__login,
    body.syou-layout .syou-event-card__more,
    body.syou-layout .syou-ev-item__toggle,
    body.syou-layout .syou-page-cat-nav__btn,
    body.syou-layout .syou-event__cat,
    body.syou-layout .syou-location__map-btn,
    body.syou-layout .syou-login-card__btn,
    body.syou-layout .syou-register__btn {
        transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
    }

    body.syou-layout .syou-event-card,
    body.syou-layout .syou-clinic-card,
    body.syou-layout .syou-equipment-landing__card,
    body.syou-layout .syou-doctor-landing__card,
    body.syou-layout .syou-ev-item {
        transition: box-shadow 0.28s ease, transform 0.28s var(--syou-motion-ease);
    }

    body.syou-layout .syou-event-card:hover,
    body.syou-layout .syou-clinic-card:hover,
    body.syou-layout .syou-equipment-landing__card:hover,
    body.syou-layout .syou-doctor-landing__card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

    body.syou-layout .syou-ev-item:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    }

    body.syou-layout .syou-event-card__img img,
    body.syou-layout .syou-clinic-card__media img,
    body.syou-layout .syou-equipment-landing__figure img,
    body.syou-layout .syou-ev-item__visual img,
    body.syou-layout .syou-doctor-landing__figure img {
        transition: transform 0.45s var(--syou-motion-ease);
    }

    body.syou-layout .syou-event-card:hover .syou-event-card__img img,
    body.syou-layout .syou-clinic-card:hover .syou-clinic-card__media img,
    body.syou-layout .syou-equipment-landing__card:hover .syou-equipment-landing__figure img,
    body.syou-layout .syou-ev-item:hover .syou-ev-item__visual img,
    body.syou-layout .syou-doctor-landing__card:hover .syou-doctor-landing__figure img {
        transform: scale(1.04);
    }

    body.syou-layout .syou-sec-head__more:hover,
    body.syou-layout .syou-site-header__login:hover,
    body.syou-layout .syou-mnav__login:hover,
    body.syou-layout .pc-sidebar__login:hover {
        opacity: 0.82;
    }

    body.syou-layout .syou-login-social .sns-icon:hover,
    body.syou-layout .syou-register__social .sns-icon:hover {
        filter: brightness(1.03);
        transform: translateY(-1px);
        transition: transform 0.22s ease, filter 0.22s ease;
    }

    body.syou-layout .syou-location__tel:hover {
        color: var(--syou-primary, #c49a6b);
        transition: color 0.22s ease;
    }

    body.syou-layout .syou-mnav__list a:hover {
        color: var(--syou-primary, #c49a6b);
        transition: color 0.2s ease;
    }
}