/* 화환 보내기 — 떠 있는 알약 버튼. 전 템플릿 공통(`_wreathfloat.jspf`).
   ⚠ 하객 스냅 버튼(.lsf__btn)과 같은 재질·같은 자리(아래 가운데)다. 둘이 함께 뜨는 날(.lwf--up)에는 한 줄로 나란히 — 화환(흰색)이 왼쪽, 사진 올리기(차콜)가 오른쪽, 크기는 같다.
   ⚠ --lwf-lift 는 편집기 미리보기 안에서만 JS 가 쓴다(부모 화면의 바닥 줄에 가려지지 않게 올린다).
   ⚠ 지면 무드와 무관하게 읽히도록 반투명 차콜 + 흰 선. */

.lwf{ position:fixed; left:0; right:0; bottom:0; z-index:58; pointer-events:none; }
.lwf[hidden]{ display:none; }

.lwf__btn{
  position:absolute; left:50%; bottom:calc(18px + var(--lwf-lift, 0px) + env(safe-area-inset-bottom));
  transform:translate(-50%, 24px); opacity:0;
  display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 24px 0 20px;
  border-radius:999px; cursor:pointer; pointer-events:none;
  background:rgba(59,57,58,.84); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22); color:#fff;
  font:inherit; font-size:calc(14px * var(--fs,1)); font-weight:500; letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent;
  /* bottom — 샘플 창에서 제작 줄이 숨고 뜰 때 버튼이 바닥까지 내려갔다 줄 위로 올라온다. 튕기지 않는 긴 감속 곡선으로 스르륵 옮긴다. */
  transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1), bottom .6s cubic-bezier(.22,.61,.36,1) var(--lwf-bdelay, 0s);
}
.lwf--up .lwf__btn{ left:calc(50% - 5px); width:148px; height:44px; padding:0; justify-content:center; transform:translate(-100%, 24px);
  background:rgba(255,255,255,.94); color:#2b2a29; border-color:rgba(0,0,0,.14); box-shadow:0 8px 16px -8px rgba(0,0,0,.4); }
.lwf.lwf--up.is-on .lwf__btn{ transform:translate(-100%, 0); }
.lwf.is-on .lwf__btn{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.lwf__ic{ width:14px; height:18px; flex:none; background:currentColor;
  -webkit-mask:url(../img/wreath/tulip.png) center/contain no-repeat; mask:url(../img/wreath/tulip.png) center/contain no-repeat; }

@media (prefers-reduced-motion:reduce){
  .lwf__btn{ transition:opacity .2s linear; transform:translate(-50%, 0); }
}