/* ═══════════════════════════════════════════════════════════════════════════
   안내 사항 스택 — 화환 · 식사 · 주차를 **쌓아 둔 카드 한 덩어리**로 보여 준다.
   전 템플릿 공통이다(2026-09-26 고객 지시: "다 동일한 탭 슬라이드 방식으로").
   마크업과 동작은 `_infostack.jspf` 한 곳에 있고, 이 파일은 그 기본 살갗이다.

   ★ 템플릿마다 다르게 보이려면 **변수 네 개만** 덮어쓴다. 선택자를 다시 쓰지 말 것 —
     겹쳐 놓은 꼴(간격·회전·넘김 거리)이 어긋나면 카드가 서로를 가린다.
       --st-card    카드 면 색
       --st-ink     카드 글자색
       --st-accent  라벨 앞 점 · 형광펜([[ ]]) 색
       --st-label   캡스 라벨 서체(FLOWERS·DINING·PARKING)
   ⚠ 카드 높이는 JS 가 **가장 긴 글**에 맞춰 키운다. 여기에 height 를 박지 말 것.
   ═══════════════════════════════════════════════════════════════════════════ */
.lilt-st{
  --st-card:#ffffff;
  --st-ink:#262522;
  --st-accent:currentColor;
  --st-label:inherit;
  --st-ease:cubic-bezier(.2,.8,.2,1);

  /* ⚠ 높이는 카드(196) + 뒤에 겹쳐 비어져 나온 자리(34) 다. `_infostack.jspf` 의 `max` 와
     **같이 고친다** — 한쪽만 바꾸면 겹친 카드가 잘리거나 밑에 빈 띠가 남는다. */
  position:relative; margin-top:44px; width:100%; height:230px;
  touch-action:pan-y; user-select:none;
}
/* ⚠ 카드 면은 **지면을 아주 옅게 눌러** 만든다 — 불투명한 흰 상자는 따뜻한 종이 위에서 혼자
   새하얗게 튄다(안내 스와이프·방명록 플로우 카드가 먼저 같은 지적을 받아 검정 5% 로 갔다).
   ⚠ 그런데 스택은 카드 **석 장이 겹쳐** 있어 면을 반투명으로 두면 뒤 카드가 비친다. 그래서
     불투명한 `--st-card` **위에** 5% 를 덧대 합성한다 — 눌린 무게는 같고 겹침은 그대로다. */
.lilt-st__c{
  position:absolute; left:0; right:0; top:0; height:196px; padding:18px 20px 20px;
  background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)), var(--st-card); color:var(--st-ink);
  box-shadow:0 0 0 1px rgba(38,37,34,.07), 0 2px 3px rgba(0,0,0,.07), 0 14px 26px -14px rgba(38,37,34,.4);
  transition:transform .6s var(--st-ease); cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; text-align:left;
}
.lilt-st__hd{ display:flex; justify-content:space-between; align-items:center; }
.lilt-st__en{
  display:flex; align-items:center; gap:8px;
  font-family:var(--st-label); font-stretch:110%; font-weight:500; font-size:calc(9px * var(--fs,1)); letter-spacing:.22em;
}
.lilt-st__en i{ width:7px; height:7px; border-radius:50%; background:var(--st-accent); }
/* ⚠ 장 번호는 **숫자뿐이라 지면 본문 서체를 그대로 쓴다**(`inherit` — 고객이 고른 한글꼴).
   캡스 라벨 서체(--st-label)는 라틴이고, 그 옛숫자가 한글 카드 위에서 들쭉날쭉해 튄다
   (2026-09-28 "숫자는 한글꼴로"). 라벨(FLOWERS…)은 순수 영문이라 그대로 둔다. */
.lilt-st__n{ font-family:inherit; font-size:calc(10px * var(--fs,1)); letter-spacing:.14em; opacity:.55; }
.lilt-st__bd{ display:flex; flex-direction:column; gap:10px; }
.lilt-st__bd b{ font-size:calc(14px * var(--fs,1)); font-weight:500; }
/* ⚠ keep-all — 낱말 한가운데서 끊기면 [[ ]] 강조 구절이 두 줄로 갈라진다(invitation-info-variants.css 와 같은 규칙). */
.lilt-st__bd p{ margin:0; font-size:calc(11px * var(--fs,1)); line-height:1.85; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }
.lilt-st__bd mark{ background:none; color:var(--st-accent); font-weight:500; }
/* ⚠ 넘김 줄은 가운데 정렬이다 — 섹션이 flex 가운데 정렬이 아닌 템플릿(01~07)에서는
   이게 없으면 카드 밑에서 왼쪽 끝에 홀로 붙는다. */
.lilt-st__nav{
  margin-top:10px; display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--st-label); font-size:calc(11px * var(--fs,1)); letter-spacing:.2em; font-variant-numeric:tabular-nums;
}
.lilt-st__nav button{
  width:40px; height:40px; padding:0; border:0; background:none; color:inherit;
  font-family:inherit; font-weight:300; font-size:calc(16px * var(--fs,1)); cursor:pointer;
}
/* ⚠ display 를 준 요소라 hidden 속성만으로는 안 감춰진다 — 짝을 반드시 함께 둔다
   (카드가 한 장뿐일 때 JS 가 이 줄을 hidden 으로 감춘다). */
.lilt-st__nav[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .lilt-st__c{ transition:none; } }