/* ==========================================================================
   msg-butterfly.css — 나비 한 마리 (인트로·로그인·회원 화면 공통)
   원본: LODELLA-intro v8 style.css 의 #butterfly 묶음(최종 값). 날개 두 장이 몸통을 축으로 따로 접힌다.
   크기는 여기서 정하고, msg-butterfly.js 는 그려진 폭을 읽어 쓴다.
   크기는 원본보다 1.82배(10-21 형 요청: 1.3배 → 2배는 너무 커서 30% 줄임. 인트로 72→188→132 · 폰 51→132→92 · 회원 화면 56→146→102 · 폰 44→114→80).
   원근(perspective)·다리 px 도 같은 배수라 날개 접히는 모양은 원본 그대로다.
   ========================================================================== */

.msg-bf {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 132px; height: 132px;
  pointer-events: none; opacity: 0; will-change: transform;
  perspective: 637px; transform-style: preserve-3d;
}
.msg-bf[hidden] { display: none !important; }

.msg-bf .butterfly-pose { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.msg-bf .photo-wing,
.msg-bf .photo-body {
  position: absolute; inset: 0;
  background: url('/data/skin/common/intro/white-butterfly.webp') center / contain no-repeat;
  transform-origin: 50% 50%; backface-visibility: visible;
}
.msg-bf .photo-wing { transform-style: preserve-3d; will-change: transform; }
.msg-bf .wing-left { clip-path: inset(0 50% 0 0); }
.msg-bf .wing-right { clip-path: inset(0 0 0 50%); }
.msg-bf .photo-body { clip-path: inset(0 46% 0 46%); transform: translateZ(.5px); }
.msg-bf .body-volume {
  position: absolute; left: 48%; top: 40%; width: 4%; height: 31%; border-radius: 55%;
  background: linear-gradient(90deg, #393b30, #aaa99c 45%, #555747);
  transform: rotateY(90deg); transform-style: preserve-3d;
}
.msg-bf .butterfly-legs {
  position: absolute; left: 50%; top: 51%; width: 25px; height: 18px;
  transform: rotateX(65deg) translateZ(-1px);
  opacity: var(--legs, 1); transition: opacity .15s;
}
.msg-bf .butterfly-legs i {
  position: absolute; left: -7px; width: 13px; height: 9px;
  border-left: 1.1px solid #55584a; border-bottom: 1.1px solid #55584a; transform: rotate(25deg);
}
.msg-bf .butterfly-legs i:nth-child(2) { top: 6px; left: 0; }
.msg-bf .butterfly-legs i:nth-child(3) { top: 11px; left: 3.6px; }

@media (max-width: 699.98px) {
  .msg-bf { width: 92px; height: 92px; }
}

/* 회원 화면 위 (msg-butterfly.js 의 page() 가 body 끝에 붙인다)
   화면에 고정, 누르는 것을 막지 않음. 머리 띠(40) 위·폰 탭바(900)·서랍(1000)·팝업 아래 */
.msg-bf.msg-bf-page { position: fixed; z-index: 45; width: 102px; height: 102px; }
@media (max-width: 699.98px) {
  .msg-bf.msg-bf-page { width: 80px; height: 80px; }
}
/* 펼친 메뉴·목록(머리말의 PC 메뉴·언어 목록, 본문 하위메뉴 목록 z 20)이 열린 동안은 그 판들 아래로
   — 판이 나비를 덮어 메뉴 글자를 가리지 않는다 */
body:has(.nav_depth_list_wrap.active, .hgroup_util_toggle_item.active, .submenu_two_list_wrap.active) .msg-bf.msg-bf-page { z-index: 19; }
/* 크림 종이 위에서는 흰 날개(쉴 때 70° 가까이 접힘)가 묻힌다 → 날개마다 옅은 그림자.
   날개 낱장에만 걸어서 3D 접힘(.butterfly-pose 의 preserve-3d)은 그대로 */
.msg-bf.msg-bf-page .photo-wing,
.msg-bf.msg-bf-page .photo-body {
  filter: drop-shadow(0 1px 1px rgba(51, 49, 43, .42)) drop-shadow(0 6px 9px rgba(51, 49, 43, .18));
}
@media print {
  .msg-bf { display: none !important; }
}