/* ═══════════════════════════════════════════════════════════════════
   참석 회신 — 자동 팝업의 **쪽지**. 전 템플릿 공통 살갗(`_rsvpenvelope.jspf`).
   종이 한 장이 띠용 하고 뜨고, [확인] 을 누르면 그 자리에서 전체 화면 회신 모달이 자라난다.

   ★ 색·서체는 **그 지면에서 떠 온다**(모듈이 `--lrv-paper`/`--lrv-ink` 에 넣는다) — 템플릿마다 따로 칠하지 않는다.
   ⚠ 장식을 더하지 않는다 — 종이 한 장과 활자뿐이다(봉투 연출은 2026-10-12에 걷었다 · 되살리지 말 것).
   ⚠ `display` 를 준 요소는 `hidden` 속성이 안 먹는다 — 아래 `[hidden]` 짝을 지우지 말 것.
   ═══════════════════════════════════════════════════════════════════ */
.lrv{
  --lrv-paper:#fbfaf7; --lrv-ink:#262522; --lrv-line:rgba(38,37,34,.22);
  position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  padding:22px; color:var(--lrv-ink);
}
.lrv[hidden]{ display:none; }
.lrv__bd{ position:absolute; inset:0; background:rgba(20,19,17,.5); opacity:0; transition:opacity .35s ease; }
.lrv.is-on .lrv__bd{ opacity:1; }

/* 쪽지 — 작게 움츠렸다 살짝 넘겨 뜬다(띠용). */
.lrv__letter{
  position:relative; z-index:1; width:100%; max-width:340px;
  opacity:0; transform:scale(.86) translateY(10px);
  transition:opacity .22s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}
.lrv.is-on .lrv__letter{ opacity:1; transform:none; }

.lrv__face{
  position:relative;
  background:var(--lrv-paper); box-shadow:0 22px 46px -24px rgba(20,19,17,.55);
  padding:32px 22px 24px;
}

/* 글 — 활자만. 제목은 라틴 캡스, 본문은 그 지면 서체 그대로. */
.lrv__t{ font-size:calc(11px * var(--fs,1)); font-weight:500; letter-spacing:.3em; padding-left:.3em; text-align:center; opacity:.72; }
.lrv__msg{
  margin:18px 0 0; text-align:center; font-size:calc(13.5px * var(--fs,1)); line-height:1.9; letter-spacing:-.01em;
  white-space:pre-line; word-break:keep-all; text-wrap:pretty;
}
.lrv__ok{
  display:block; width:100%; height:46px; margin-top:24px; padding:0;
  border:0; border-radius:0; cursor:pointer;
  background:var(--lrv-ink); color:var(--lrv-paper);
  font-family:inherit; font-size:calc(13.5px * var(--fs,1)); font-weight:600; letter-spacing:.02em;
}
.lrv__ok:active{ opacity:.82; }

.lrv__x{
  position:absolute; right:0; top:0; z-index:3; width:52px; height:52px; padding:0;
  border:0; background:none; cursor:pointer; color:inherit; font-size:calc(30px * var(--fs,1)); line-height:1; font-weight:300; opacity:.8;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.lrv__x:active{ opacity:1; }
/* 쪽지가 떠 있는 동안 뒤 지면은 움직이지 않는다 — 손가락이 어디에 닿아도 쪽지 위에서 끝난다(스크롤이 이어지며 탭을 삼키지 않게). */
.lrv{ touch-action:manipulation; overscroll-behavior:contain; }
.lrv__ok{ touch-action:manipulation; }

/* ── 마친 쪽지 ── 보낸 내용 + 인사 + 3초 막대. **묻는 쪽지와 같은 종이**다(2026-10-12 지시). */
.lrv__face--done[hidden]{ display:none; }
.lrv__msg--thanks{ font-size:calc(14.5px * var(--fs,1)); font-weight:600; line-height:1.7; }
/* 보낸 내용 한 줄 — 「김프롬 님 · 신랑 측 · 2명 참석 · 전세버스 2명」 */
.lrv__sum{
  margin:12px 0 0; text-align:center; font-size:calc(12.5px * var(--fs,1)); line-height:1.7; letter-spacing:-.01em;
  word-break:keep-all; text-wrap:pretty; opacity:.72;
}
.lrv__sum:empty{ display:none; }
.lrv__auto{ margin:18px 0 0; text-align:center; font-size:calc(11px * var(--fs,1)); letter-spacing:-.01em; opacity:.45; }
/* 막대 — 가득 찼다가 3초에 걸쳐 왼쪽으로 줄어든다(시간은 모듈의 AUTO_MS 와 한 벌). */
.lrv__bar{
  display:block; margin-top:10px; height:2px; overflow:hidden;
  background:color-mix(in srgb, var(--lrv-ink) 14%, transparent);
}
.lrv__bar i{ display:block; height:100%; background:var(--lrv-ink); transform-origin:left center; transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  .lrv__bar i{ transition:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .lrv__bd, .lrv__letter{ transition:none; }
}