/* 화환 보내기 — 안내 사항 섹션 **맨 아래**(가운데)에 서는 주문 버튼 + 그 바로 밑에 붙는 보낸 분 한 줄(위아래로 넘어간다).
   전 템플릿 공통(`_wreath.jspf`, 안내 사항 조각이 항목들 뒤에서 한 번 부른다).
   ⚠ 색·서체는 주변에서 물려받는다(inherit · currentColor). 템플릿별 색을 여기에 박지 말 것.
   ⚠ .lwr__roll 의 한 줄 높이(--lwr-h)와 JS 가 읽는 줄 높이가 짝이다. */

.lwr{ --lwr-h:18px; box-sizing:border-box; width:100%; margin-top:28px; padding:0; text-align:center; color:inherit; font:inherit; }
.lwr *{ box-sizing:border-box; }
.lwr[hidden]{ display:none; }

/* 버튼 폭에 맞춰 보낸 분 줄이 따라간다 */
.lwr__act{ display:flex; flex-direction:column; align-items:stretch; width:100%; }

/* 떠 있는 흰 카드 + 튤립(2026-10-20 선택). 바탕색과 상관없이 흰 면 + 그림자라 어느 템플릿에서도 눈에 띈다(소프트 톤은 바탕과 비슷해 묻혔다).
   흰 면은 25% 투명(rgba .75)이라 바탕이 살짝 비친다 — 너무 튄다는 지적(2026-10-20). 튤립은 한 색 마스크(`img/wreath/tulip.png`)라 글자색을 따라간다. 글자색은 카드가 흰색이라 어두운 고정색이다.
   ⚠ `.lwr .lwr__btn` — 안내 사항 변형 CSS 의 `.lilt-info button{ font:inherit }` 가 명시도로 이긴다(접이·판·스와이프·탭에서 16px 로 커졌다). */
.lwr .lwr__btn{
  display:flex; width:100%; align-items:center; justify-content:center; gap:9px; min-height:50px; min-width:0; padding:0 22px;
  border:0; background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#2a2826; border-radius:12px; cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.06);
  font:inherit; font-size:calc(14px * var(--fs,1)); font-weight:500; letter-spacing:.03em; line-height:1; -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.lwr .lwr__btn:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.06); }
.lwr .lwr__btn:active{ transform:none; opacity:.8; }
.lwr .lwr__btn:disabled{ opacity:.5; cursor:default; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.lwr__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; }

/* 보낸 분 한 줄 — 「마음 보내주신 분 ·」은 **고정**이고 그 뒤의 이름(+시각)만 위아래로 넘어간다(2026-10-20 지시). */
.lwr__tick{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; height:var(--lwr-h); font-size:11px;   /* 장식용 「마음 보내주신 분」 알림 띠 — 글자 크기 단계를 따르지 않는다(이름 칸 너비를 JS 가 맞추는 한 줄이라 커지면 말줄임으로 잘린다) */ line-height:var(--lwr-h); letter-spacing:.02em; opacity:.6; }
.lwr__tick[hidden]{ display:none; }
/* 보낸 분 줄이 나중에 생겨도 카드 높이가 튀지 않도록 자리를 미리 잡는다(스택 카드는 높이를 한 번 재서 맞춘다). */
.lwr[data-lwr-senders="true"] .lwr__tick[hidden]{ display:flex; visibility:hidden; }
.lwr__lead{ flex:none; white-space:nowrap; }
.lwr__dot{ flex:none; opacity:.6; }
/* 이름 칸 너비는 JS(fit)가 지금 이름 폭으로 맞춘다 — 줄 전체가 늘 가운데에 서므로 이름이 짧아도 한쪽으로 쏠리지 않는다. */
.lwr__roll{ display:block; flex:none; min-width:0; height:var(--lwr-h); overflow:hidden; text-align:left; transition:width .55s cubic-bezier(.65,0,.25,1); }
.lwr__list{ display:block; transition:transform .55s cubic-bezier(.65,0,.25,1); will-change:transform; }
.lwr__list.is-snap{ transition:none; }
.lwr__item{ display:block; height:var(--lwr-h); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
.lwr__item b{ font-weight:inherit; }
.lwr__item i{ font-style:normal; margin-left:6px; opacity:.75; }


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