/* ===== mn-aae-replace : AAE Pro 대체 위젯 스타일 ===== */

/* 1) flip-box -> 3D flip 카드 (순수 CSS, 호버+탭) */
/* ★Elementor 컨테이너의 height 설정이 적용되지 않아(실측) CSS로 직접 고정 */
.mn-flip3d{position:relative;perspective:1400px;border-radius:14px;overflow:visible;height:340px !important}
@media(max-width:767px){.mn-flip3d{height:300px !important}}
.mn-flip3d-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;border-radius:14px}
.mn-flip3d:hover .mn-flip3d-inner,.mn-flip3d.is-flipped .mn-flip3d-inner{transform:rotateY(180deg)}
.mn-flip3d-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;box-sizing:border-box;border-radius:14px;overflow:hidden}
.mn-flip3d-front{background-size:cover;background-position:center;background-repeat:no-repeat}
.mn-flip3d-front::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.62));z-index:0}
.mn-flip3d-front>.elementor-element{position:relative;z-index:1}
.mn-flip3d-back{transform:rotateY(180deg);justify-content:center}
.mn-flip3d-face .elementor-widget{width:100%}
.mn-flip3d-face .elementor-widget+.elementor-widget{margin-top:8px}

/* 2) stacked-cards -> position:sticky 스택 (JS 불필요) */
.mn-stack3{display:flex;flex-direction:column}
.mn-stack3-card{position:sticky;border-radius:16px;background:#fff;box-shadow:0 14px 34px rgba(18,49,79,.14);border:1px solid #E7EDF3}
.mn-stack3-card:nth-child(1){top:104px;z-index:1}
.mn-stack3-card:nth-child(2){top:120px;z-index:2}
.mn-stack3-card:nth-child(3){top:136px;z-index:3}
.mn-stack3-card:nth-child(4){top:152px;z-index:4}
.mn-stack3-card:nth-child(5){top:168px;z-index:5}
.mn-stack3-card:nth-child(6){top:184px;z-index:6}
.mn-stack3-card:not(:last-child){margin-bottom:22px}
.mn-stack3-img{border-radius:12px 0 0 12px}
@media(max-width:767px){
  .mn-stack3-card{position:static;box-shadow:0 8px 20px rgba(18,49,79,.10)}
  .mn-stack3-img{border-radius:12px 12px 0 0}
}

/* 3) filterable-gallery -> CSS grid + JS 클래스 토글 */
.mn-fgal3-filters .elementor-widget{width:auto}
.mn-fgal3-btn a,.mn-fgal3-btn .elementor-button{cursor:pointer;transition:background .2s,color .2s}
.mn-fgal3-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:16px}
.mn-fgal3-item{transition:opacity .35s ease,transform .35s ease;border-radius:10px;overflow:hidden}
.mn-fgal3-item.is-hidden{display:none !important}
@media(max-width:900px){.mn-fgal3-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mn-fgal3-grid{grid-template-columns:repeat(1,1fr)}}

/* 4) image-compare 커스텀 드래그 보조(핸들 커서만, 실제 위치는 JS 인라인 style) */
.wcf--image-compare-handle{touch-action:none}