/* 20: 설명 칸은 오른쪽에서 스르륵. 위젯은 12px만 옮기며 0.32초에 밝아졌다.
   72px(모바일 40px) 오른쪽에서 0.72초에 걸쳐 들어온다. 카드가 먼저 움직이도록 0.12초 뒤에 시작한다. */
@media (prefers-reduced-motion:no-preference){
 body.eg-site #main .mb-card-panel.is-open .mb-panel-desc{animation:s3-desc-in .72s cubic-bezier(.22,.61,.36,1) .12s both;}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
 body.eg-site #main .mb-card-panel.is-open .mb-panel-desc{animation-name:s3-desc-in-sm;}
}
@keyframes s3-desc-in{from{opacity:0;transform:translateX(72px)}to{opacity:1;transform:none}}
@keyframes s3-desc-in-sm{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* 20·21: 위젯의 틀 칸 나눔·여백 전환(0.38초)은 칸 나눔이 보간되지 않아 중간에 한 번에 튄다.
   카드 flex-basis 전환까지 같이 돌면 JS가 옮기는 카드가 두 번 움직인다.
   그래서 JS가 돌 때(html.s3-deck-js)만 이 둘을 끈다. 마우스를 올리면 살짝 뜨는 전환(transform·box-shadow .2s)은 그대로다. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
 html.s3-deck-js body.eg-site #main .mb-card-panel{transition:none;}
 html.s3-deck-js body.eg-site #main .mb-card-panel .mb-card-stack .mb-card{transition:transform .2s ease,box-shadow .2s ease;}
}

body.eg-site #main .mb-card-panel .mb-card-stack .mb-card{aspect-ratio:1461/869;}
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card .mb-card-face{background:transparent center/contain no-repeat;border:0;}
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card[data-tier="founder"] .mb-card-face{background-image:url('/assets/membership-cards-1020/founder.webp');}
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card[data-tier="resident"] .mb-card-face{background-image:url('/assets/membership-cards-1020/resident.webp');}
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card[data-tier="member"] .mb-card-face{background-image:url('/assets/membership-cards-1020/member.webp');}
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card[data-tier="club"] .mb-card-face{background-image:url('/assets/membership-cards-1020/club.webp');}
/* 그림 안에 로고·등급·번호가 있으므로 카드면 HTML 로고·번호는 화면에서만 감춘다(화면 읽기에는 그대로). */
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card .mb-card-face>:is(.mb-card-logo,.mb-card-meta){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
/* 등급명(기존 글 그대로)은 그림 위가 아니라 카드 바로 아래에 둔다 — 틸 세 장 구분용(S3 준비안). */
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card{margin-bottom:64px;}
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card .mb-card-grade{position:absolute;left:2px;right:2px;top:100%;margin-top:12px;font-size:22px;line-height:1.22;color:#F4F1EA;}
body.eg-site #main .mb-card-panel .mb-card-stack .mb-card .mb-card-grade-ko{font-size:14px;line-height:1.4;}
@media (max-width:700px){
 body.eg-site #main .mb-card-panel .mb-card-stack .mb-card{margin-bottom:56px;}
 body.eg-site #main .mb-card-panel .mb-card-stack .mb-card .mb-card-grade{margin-top:10px;font-size:18px;}
 body.eg-site #main .mb-card-panel .mb-card-stack .mb-card .mb-card-grade-ko{font-size:13px;}
}