/* 사진 올리기 — 떠 있는 알약 버튼과 아래에서 올라오는 시트. 전 템플릿 공통(`_snapfloat.jspf`).
   ⚠ 참석 회신 버튼(.lrf)과 같은 재질이다 — 반투명 차콜 + 흰 선. 지면 무드와 무관하게 어느 지면에서도 읽힌다.
   ⚠ 버튼은 화면 아래 가운데에 둔다. 음악 버튼은 모서리, 회신 버튼은 끌어서 옮기는 동그라미라 가운데가 가장 덜 겹친다.
   ⚠ 시트 안은 하객 업로드 화면(/s/{코드}?embed=1)을 그대로 띄운 iframe 이다 — 업로드 코드를 두 벌 두지 않는다. */

.lsf{ position:fixed; left:0; right:0; bottom:0; z-index:59; pointer-events:none; }
/* 시트가 열려 있는 동안은 예식 앞 페이지(.ldo, z-index 8900) 위에 올라온다. */
.lsf.is-open{ z-index:9100; }
.lsf[hidden]{ display:none; }

.lsf__btn{
  position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%, 24px); opacity:0;
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px 0 15px;
  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(13.5px * var(--fs,1)); font-weight:450; letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent;
  transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.lsf--nobtn .lsf__btn{ display:none; }   /* 본문 버튼(snapBlock)만 있는 때 — 떠 있는 버튼은 예식 당일부터 */
.lsf--pair .lsf__btn{ left:calc(50% + 5px); width:148px; height:44px; padding:0; justify-content:center; transform:translate(0, 24px); font-size:calc(14px * var(--fs,1)); }
.lsf.lsf--pair.is-on .lsf__btn{ transform:translate(0, 0); }
.lsf.is-on .lsf__btn{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.lsf.is-open .lsf__btn{ opacity:0; pointer-events:none; }
.lsf__btn svg{ width:18px; height:18px; display:block; flex:none; }

/* 시트 뒤 베일 */
.lsf__veil{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.lsf.is-open .lsf__veil{ opacity:1; pointer-events:auto; }

/* 시트 */
.lsf__sheet{
  position:fixed; left:50%; bottom:0; width:100%; max-width:480px; height:min(88vh, 760px); height:min(88dvh, 760px);
  background:#fff; border-radius:16px 16px 0 0; overflow:hidden;
  display:flex; flex-direction:column;
  transform:translate(-50%, 102%); transition:transform .45s cubic-bezier(.32,.72,0,1);
  pointer-events:none; box-shadow:0 -16px 40px -12px rgba(0,0,0,.35);
}
.lsf.is-open .lsf__sheet{ transform:translate(-50%, 0); pointer-events:auto; }
.lsf__bar{ position:relative; flex:none; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; }
.lsf__grab{ width:38px; height:4px; border-radius:2px; background:rgba(0,0,0,.18); }
.lsf__x{ position:absolute; right:6px; top:0; width:40px; height:34px; border:0; background:none; color:#1a1a1a; font-size:24px; line-height:1; cursor:pointer; padding:0; }
.lsf__frame{ flex:1 1 auto; width:100%; min-height:0; border:0; background:#fff; display:block; }

/* 시트가 열려 있는 동안 뒤 화면은 움직이지 않는다 */
html.lsf-lock, html.lsf-lock body{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .lsf__btn, .lsf__sheet, .lsf__veil{ transition:opacity .2s linear; }
  .lsf__btn{ transform:translate(-50%, 0); }
  .lsf__sheet{ transform:translate(-50%, 0); opacity:0; }
  .lsf.is-open .lsf__sheet{ opacity:1; }
}