/* ═══════════════════════════════════════════════════════════════════════════
   안내사항 변형(Tabs · Accordion · Swipe) — 고객이 고른 본문 꼴.
   기존형(Stack)은 `invitation-infostack.css` 가 맡는다. 마크업은 `_infovariants.jspf`.
   전 템플릿(01~09)이 함께 쓴다. 섹션 제목·장식은 템플릿이, 본문만 이 파일이 맡는다.

   ★ 템플릿마다 다르게 보이려면 **변수만** 덮는다(`.lilt-st` 와 같은 관례).
     선택자를 다시 쓰지 말 것 — 탭 줄·패널 높이가 어긋난다.
       --info-dot     강조(필기체 · 캡스 라벨 · 형광펜)
       --info-card    스와이프 카드 면(기본 = 지면이 비치는 반투명 흰색)
       --info-ink     제목 글자색        --info-soft   본문 글자색
       --info-line    아코디언 구분선
       --info-body    본문 서체(한글 — 고객 선택을 따르려면 var(--ko))
       --info-label   캡스 라벨 서체     --info-script 필기체 자리 서체
   ⚠ 기본값은 08 의 색·서체다 — 비워 두면 08 무드로 떨어진다.
   ═══════════════════════════════════════════════════════════════════════════ */
.lilt-info{
  --info-dot:var(--dot, #5d6b55);
  --info-ink:#262522;
  --info-soft:#3d3b37;
  --info-line:rgba(38,37,34,.18);
  width:100%; margin-top:36px; color:var(--info-ink); font-family:var(--info-body,'IBM Plex Sans KR',sans-serif);
}
.lilt-info button{ color:inherit; font:inherit; }
/* 탭 줄 — **칸을 똑같이 나눈 그리드** + 아래 헤어라인, 그 위를 밑줄이 미끄러진다.
   ⚠ 칸 수는 켜진 안내 수다(1~4 — 고객이 더한 안내까지). 조각이 --info-tabs 로 넘겨 주니 3으로 못박지 말 것. */
.lilt-info__tabs{
  position:relative; display:grid; grid-template-columns:repeat(var(--info-tabs,3),minmax(0,1fr));
  border-bottom:1px solid var(--info-line);
}
/* ⚠ 선택자를 `.lilt-info .lilt-info__tab` 으로 둔다 — 위의 `.lilt-info button{ font:inherit }` 가 명시도로 이겨
     글자 크기가 템플릿 body 를 물려받았다(08·09 는 13px, body 크기가 없는 01~05 는 16px 로 커졌다). */
.lilt-info .lilt-info__tab{
  height:46px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  /* ⚠ 탭 이름은 **한글**이다 — 캡스 라틴 서체·넓은 자간을 쓰면 글자가 흩어진다. */
  /* 크기는 08·09 에서 실제로 보이던 13px 로 전 템플릿을 맞춘다. */
  font-family:var(--info-body,'IBM Plex Sans KR',sans-serif); font-size:calc(13px * var(--fs,1)); line-height:1; font-weight:500;
  color:var(--info-ink); opacity:.4; transition:opacity .35s ease;
  /* 탭 이름이 칸보다 길면 옆 칸으로 번지지 않고 칸 안에서 줄을 바꾼다(글자 크기 단계 「크게」·고객이 적은 긴 항목명). 띄어쓰기 자리에서 먼저 나눈다. */
  padding:0 2px; text-align:center; line-height:1.15; white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
}
.lilt-info__tab[aria-selected="true"]{ opacity:1; }
/* 다섯 칸(화환·식사·주차·전세버스·고객이 더한 안내) — 좁은 폰에서 한 칸이 51px 쯤이라 글자를 한 단 줄인다.
   네 글자 「전세버스」와 고객이 적은 긴 이름이 옆 칸으로 번지지 않게 하는 눈금이다. */
.lilt-info .lilt-info__tabs.is-many .lilt-info__tab{ font-size:calc(11.5px * min(var(--fs,1), 1.1)); letter-spacing:-.03em; }   /* 다섯 칸은 크게(×1.3)에서도 ×1.1 까지만 — 칸당 51~60px 라 더 키우면 「전세버스」가 칸을 넘는다 */
/* 여섯 칸 이상(고객이 더한 안내가 최대 5개라 아홉 칸까지) — 한 줄로는 칸이 30px 대라 읽히지 않는다.
   세 칸씩 줄을 바꾸고, 미끄러지는 밑줄 대신 선택된 탭 자신이 밑줄을 긋는다. */
.lilt-info .lilt-info__tabs.is-wrap{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lilt-info .lilt-info__tabs.is-wrap .lilt-info__tab{ border-bottom:1.5px solid transparent; margin-bottom:-1px; }
.lilt-info .lilt-info__tabs.is-wrap .lilt-info__tab[aria-selected="true"]{ border-bottom-color:var(--info-ink); }
.lilt-info .lilt-info__tabs.is-wrap .lilt-info__ind{ display:none; }
/* 밑줄 — 한 칸 폭이라 칸 번호만큼 제 폭을 밀면 그 칸에 선다(JS 가 transform 을 준다). */
.lilt-info__ind{
  position:absolute; bottom:-1px; left:0; width:calc(100% / var(--info-tabs,3)); height:1.5px;
  background:var(--info-ink); pointer-events:none;
  transition:transform .45s cubic-bezier(.6,.05,.25,1);
}
/* 본문 — **글뿐이다.** 면도, 테두리도, 영문 라벨도, 제목도, 번호도 없다(탭이 이미 말한다).
   ⚠ 상자를 되살리지 말 것 — 세로 배너·납작한 띠·마스크로 녹인 면까지 세 번 물렸다(2026-09-28). */
.lilt-info__panel{
  min-height:100px; padding:24px 12px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.lilt-info__panel[hidden]{ display:none; }
.lilt-info__title{ font-size:calc(14.5px * var(--fs,1)); font-weight:500; }
/* ⚠ word-break:keep-all 을 빼지 말 것 — 없으면 한글이 낱말 한가운데서 끊겨, [[ ]] 로 강조한 구절이 두 줄로 갈라진다
   ("(2 / 시간 무료"). 띄어쓰기 없는 긴 글은 overflow-wrap:anywhere 가 받아 준다. 아코디언·카드 스택도 같은 규칙이다. */
.lilt-info__desc{ margin:0; color:var(--info-soft); font-size:calc(13.5px * var(--fs,1)); line-height:2; word-break:keep-all; overflow-wrap:anywhere;
  white-space:pre-line; text-wrap:pretty; }
.lilt-info__desc mark{ background:none; color:var(--info-dot); font-weight:500; }

.lilt-info__acc{ border-top:1px solid var(--info-line); }
.lilt-info__acc-row{ border-bottom:1px solid var(--info-line); }
.lilt-info__acc-head{
  width:100%; min-height:58px; display:flex; align-items:center; gap:14px; padding:0; border:0; background:none;
  text-align:left; cursor:pointer;
}
.lilt-info__acc-label{
  width:62px; flex:none; color:var(--info-dot);
  font-stretch:110%; font-size:calc(8.5px * var(--fs,1)); font-weight:500; letter-spacing:.15em;
}
.lilt-info__acc-title{ flex:1; font-size:calc(13.5px * var(--fs,1)); font-weight:500; }
.lilt-info__acc-sign{ width:40px; height:40px; display:grid; place-items:center; flex:none; opacity:.6;
  font-family:var(--info-label,'Archivo',sans-serif); font-size:calc(18px * var(--fs,1)); font-weight:300; }
/* ⚠ 아코디언 본문은 **좌측 정렬**이다 — 섹션이 가운데 정렬이라 그대로 두면 줄마다
   가운데로 몰려 들쑥날쑥해진다(2026-09-27 지적). 제목 줄과 같은 왼쪽 선에 맞춘다. */
.lilt-info__acc-body{ padding:0 0 20px 76px; text-align:left; animation:liltInfoFade .35s ease; }
.lilt-info__acc-body[hidden]{ display:none; }
.lilt-info__acc-body p{ margin:0; color:var(--info-soft); font-size:calc(12.5px * var(--fs,1)); line-height:1.8; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }
.lilt-info__acc-body mark{ background:none; color:var(--info-dot); font-weight:500; }
@keyframes liltInfoFade{ from{opacity:0} to{opacity:1} }

.lilt-info--swipe{
  width:min(100vw,430px); margin-left:calc(50% - min(50vw,215px)); margin-right:0;
/* ⚠ **align-self 를 빼지 말 것** — 지면 끝까지 눕히는 이 셈(width:100vw + 음수 margin)은
   부모가 블록일 때를 전제한다. 08·09 처럼 부모 섹션이 flex(align-items:center) 면 가운데
   맞춤이 음수 margin 을 한 번 더 먹어 띠가 **왼쪽으로 여백의 절반만큼 밀린다**(2026-09-28 실측:
   왼쪽 -28px / 오른쪽 -28px). flex-start 로 세워 두면 블록일 때와 셈이 같아진다. */
  align-self:flex-start;
}
.lilt-info__rail{
  display:flex; gap:12px; overflow-x:auto; padding:0 14%; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none;
}
.lilt-info__rail::-webkit-scrollbar{ display:none; }
/* PC 는 마우스로 끌어 넘긴다(_infovariants.jspf) — 끌 수 있다는 것은 커서가 알린다.
   손가락에는 손잡이 커서가 없으므로 마우스가 있는 기기에서만 건다. */
@media (hover:hover) and (pointer:fine){
  .lilt-info__rail{ cursor:grab; }
}
/* ⚠ 카드 면은 **지면을 아주 옅게 눌러** 만든다(2026-09-28) — 불투명한 흰 상자는 따뜻한
   종이 위에서 혼자 새하얗게 튀고, 그렇다고 흰색을 반투명으로 덧씌우면 **지면이 이미 흰
   템플릿(07·08)에서는 아예 보이지 않는다**(실측 대비 1.03 — "너무 투명하다").
   검정을 5% 만 깔면 지면이 밝든 어둡든 **같은 무게**로 내려앉는다(어느 템플릿에서나 대비 1.12).
   템플릿이 제 색을 주고 싶으면 --info-card 를 덮는다. */
.lilt-info__card{
  flex:0 0 72%; min-height:230px; padding:26px 22px;
  background:var(--info-card,rgba(0,0,0,.05));
  scroll-snap-align:center; display:flex; flex-direction:column; text-align:left;
}
.lilt-info__card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
/* ⚠ 번호는 **작고 은은하다**(2026-09-27) — 34px 짜리 숫자가 카드에서 제일 먼저 읽혀
   정작 안내 글이 뒤로 밀렸다. 색도 강조색이 아니라 **면보다 조금 진한 톤온톤**으로 둔다. */
.lilt-info__num{ font-family:var(--info-label,'Archivo',sans-serif); font-stretch:110%; font-size:calc(15px * var(--fs,1)); font-weight:400;
  color:var(--info-ink); opacity:.34; font-variant-numeric:tabular-nums; line-height:1; }
.lilt-info__card-label{ padding-top:4px; font-family:var(--info-label,'Archivo',sans-serif); font-stretch:110%;
  font-size:calc(8.5px * var(--fs,1)); letter-spacing:.18em; opacity:.6; }
.lilt-info__card .lilt-info__title{ margin-top:auto; }
.lilt-info__card .lilt-info__desc{ margin-top:9px; font-size:calc(12px * var(--fs,1)); }
.lilt-info__swipe-hint{ margin-top:16px; text-align:center; font-family:var(--info-label,'Archivo',sans-serif);
  font-stretch:110%; font-size:calc(10px * var(--fs,1)); letter-spacing:.14em; opacity:.55; }
/* ── 판(Panel) ── 안내마다 판 하나를 세로로 쌓는다. 접지도 넘기지도 않아 한눈에 다 보인다.
   11 Sweet Devotion 핸드오프 "06 Info" 의 조판을 전 템플릿 선택지로 끌어올린 것이다.
   ⚠ 면 색은 스와이프 카드와 **같은 변수**(--info-card)를 쓴다 — 한 템플릿에서 두 유형의
     판 색이 달라 보이면 안 된다. 기본값도 같은 "검정 5%" 다.
   ⚠ 라벨은 라틴 캡스라 --info-label 서체를 쓰고, 제목·본문은 한글이라 --info-body 다. */
.lilt-info__panels{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.lilt-info__pnl{
  display:flex; flex-direction:column; gap:5px;
  padding:14px 16px 15px; background:var(--info-card,rgba(0,0,0,.05));
}
.lilt-info__pnl-label{
  font-family:var(--info-label,"Archivo",sans-serif); font-stretch:110%;
  font-size:calc(9.5px * var(--fs,1)); letter-spacing:.28em; line-height:1; opacity:.72;
}
.lilt-info__pnl-title{ font-size:calc(13px * var(--fs,1)); font-weight:700; line-height:1.3; color:var(--info-ink); }
.lilt-info__pnl .lilt-info__desc{ font-size:calc(12px * var(--fs,1)); line-height:1.6; white-space:pre-line; }
/* 스크롤로 들어오면 판이 **위에서 하나씩 내려와 척 척 쌓인다**(스크립트가 .is-armed → .is-in 을 단다).
   ⚠ 시작 모습은 스크립트가 `.is-armed` 를 달 때만 준다 — 스크립트가 죽으면 판이 그대로 보인다(fail-open). */
.lilt-info__panels.is-armed .lilt-info__pnl{ opacity:0; transform:translateY(-28px); }
.lilt-info__panels.is-in .lilt-info__pnl{
  opacity:1; transform:none;
  transition:opacity .3s ease calc(var(--i,0) * 190ms), transform .6s cubic-bezier(.2,1.25,.4,1) calc(var(--i,0) * 190ms);
}
@media (prefers-reduced-motion:reduce){ .lilt-info__panels.is-armed .lilt-info__pnl{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .lilt-info .lilt-info__tab,.lilt-info__acc-body{ transition:none; animation:none; }
}