@charset "utf-8";

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

:root {
    --syou-motion-duration: 0.6s;
    --syou-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --syou-motion-distance: 24px;
    --syou-motion-stagger: 50ms;
}

/* 서브페이지: fade-up */
html.syou-root.syou-motion-ready body.syou-layout.syou-sub-page .syou-motion {
    opacity: 0;
    transform: translate3d(0, var(--syou-motion-distance), 0);
    pointer-events: none;
    will-change: opacity, transform;
    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-sub-page .syou-motion.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

html.syou-root.syou-motion-ready body.syou-layout.syou-sub-page .syou-motion.is-revealed.is-motion-settled {
    will-change: auto;
    transition: none;
}

/* 메인: transform만 (스크롤 부하 완화) */
html.syou-root.syou-motion-ready body.syou-layout.syou-landing-page .syou-motion {
    opacity: 1;
    transform: translate3d(0, 16px, 0);
    pointer-events: auto;
    will-change: transform;
    transition: transform 0.45s var(--syou-motion-ease);
    transition-delay: var(--syou-motion-delay, 0ms);
}

html.syou-root.syou-motion-ready body.syou-layout.syou-landing-page .syou-motion.is-revealed {
    transform: translate3d(0, 0, 0);
}

html.syou-root.syou-motion-ready body.syou-layout.syou-landing-page .syou-motion.is-revealed.is-motion-settled {
    will-change: auto;
    transition: none;
}

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 .syou-clinic-page-top,
html.syou-root.syou-motion-ready body.syou-layout .syou-clinic-page-top .syou-clinic-card,
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;
}

html.syou-root.syou-motion-ready body.syou-layout .syou-location__map {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !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-page-cat-bar__arrow,
    body.syou-layout .syou-event__cat,
    body.syou-layout .syou-faq__cat,
    body.syou-layout .syou-caution__cat,
    body.syou-layout .syou-equipment__cat,
    body.syou-layout .syou-before-after__cat,
    body.syou-layout .syou-location__map-btn,
    body.syou-layout .syou-login-card__btn,
    body.syou-layout .syou-register__btn,
    body.syou-layout .syou-price-closing__contact-btn,
    body.syou-layout .syou-before-after__more,
    body.syou-layout .syou-footer__legal-link,
    body.syou-layout .syou-event-pager__arrow,
    body.syou-layout .syou-board-list__write {
        transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease, transform 0.22s var(--syou-motion-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-doctor-index__card,
    body.syou-layout .syou-ev-item,
    body.syou-layout .syou-equipment__card,
    body.syou-layout a.syou-before-after__card,
    body.syou-layout .syou-skin-clinic__concerns-card,
    body.syou-layout .syou-skin-clinic__reserve-link,
    body.syou-layout .syou-philosophy-pillars__item,
    body.syou-layout .syou-location__access > li,
    body.syou-layout .syou-faq__item,
    body.syou-layout .syou-caution__item {
        transition: box-shadow 0.28s ease, transform 0.28s var(--syou-motion-ease), border-color 0.22s ease, background-color 0.22s 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,
    body.syou-layout .syou-doctor-index__card:hover,
    body.syou-layout .syou-equipment__card:hover,
    body.syou-layout a.syou-before-after__card:hover,
    body.syou-layout .syou-skin-clinic__concerns-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

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

    body.syou-layout .syou-philosophy-pillars__item:hover {
        transform: translateY(-2px);
    }

    body.syou-layout .syou-skin-clinic__reserve-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    }

    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,
    body.syou-layout .syou-doctor-index__figure img,
    body.syou-layout .syou-equipment__card-img,
    body.syou-layout .syou-before-after__img,
    body.syou-layout .syou-tour-banner__slide 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,
    body.syou-layout .syou-doctor-index__card:hover .syou-doctor-index__figure img,
    body.syou-layout .syou-equipment__card:hover .syou-equipment__card-img,
    body.syou-layout a.syou-before-after__card:hover .syou-before-after__img,
    body.syou-layout .syou-tour-banner:hover .syou-tour-banner__slide img {
        transform: scale(1.06);
    }

    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-page-cat-bar__arrow:not(:disabled):hover,
    body.syou-layout .syou-event-pager__arrow:not(:disabled):hover {
        opacity: 0.75;
    }

    body.syou-layout .syou-event__cat:hover,
    body.syou-layout .syou-faq__cat:hover,
    body.syou-layout .syou-caution__cat:hover,
    body.syou-layout .syou-equipment__cat:hover,
    body.syou-layout .syou-before-after__cat:hover {
        color: var(--syou-primary, #0a5c52);
    }

    body.syou-layout .syou-location__map-btn:hover {
        opacity: 0.88;
        transform: translateY(-1px);
    }

    body.syou-layout .syou-price-closing__contact-btn:hover,
    body.syou-layout .syou-before-after__more:hover,
    body.syou-layout .syou-board-list__write:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    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, #0a5c52);
        transition: color 0.22s ease;
    }

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

    body.syou-layout .syou-clinic-block,
    body.syou-layout .syou-guide-note__links a {
        transition: box-shadow 0.28s ease, transform 0.28s var(--syou-motion-ease), color 0.22s ease;
    }

    body.syou-layout .syou-guide-note__links a:hover,
    body.syou-layout .syou-faq__question:hover {
        color: var(--syou-primary, #0a5c52);
    }
}