/* Melanoir motion layer — 뷰티 랜딩의 구조 표현 이식. 기존 페이지 스크립트와 비충돌(클래스 분리). */
:root{--mnr-motion-ease:cubic-bezier(.19,1,.22,1)}

/* 스크롤 진행바 (페이지에 .scroll-progress가 없을 때만 JS가 생성) */
.mnr-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:80;pointer-events:none;background:linear-gradient(90deg,#b9b2a6,#d9d3c8 40%,#e7dfe9 55%,#d9d3c8 70%,#b9b2a6)}

/* reveal (기존 .reveal 시스템과 별개 클래스) */
.mnr-reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--mnr-motion-ease),transform 1s var(--mnr-motion-ease)}
.mnr-reveal.in{opacity:1;transform:none}

/* 헤더 hide-on-scroll — sticky 헤더에 부착 */
.mnr-header,.topbar{transition:transform .5s var(--mnr-motion-ease),box-shadow .5s}
.mnr-motion-hide{transform:translateY(-100%)!important}

/* 카드 호버 리프트 통일 */
.product-grid .card,.mnr-explore-card{transition:transform .5s var(--mnr-motion-ease),border-color .5s,box-shadow .5s}
.product-grid .card:hover,.mnr-explore-card:hover{transform:translateY(-4px)}

/* 다크 셸 와이드 레이아웃 — body.mnr-wide 옵트인. 홈(index.html)의 검증된 Phase A 패턴 이식.
   모바일 무변화: max-width 해제는 560px 초과 뷰포트에서만 체감됨. */
body.mnr-wide .app{max-width:none}
body.mnr-wide .section{padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
body.mnr-wide .section>*{max-width:1080px;margin-left:auto;margin-right:auto}
body.mnr-wide .section>.section-visual,body.mnr-wide .section>figure{max-width:1200px}
@media(min-width:769px){body.mnr-wide .section{padding-top:96px;padding-bottom:96px}}

/* 폴백: reduced-motion 시 콘텐츠 항상 노출 */
@media(prefers-reduced-motion:reduce){.mnr-reveal{opacity:1!important;transform:none!important;transition:none!important}.mnr-progress{display:none}}