/* ═══════════════════════════════════════════════════════════════════════════
   참석 회신 — 카드 유형(`rsvpStyle: CARD`). 전 템플릿 공통 살갗.
   마크업은 `_rsvpcard.jspf`(카드) + `_rsvpcardbtn.jspf`(트리거), 동작은 `invitation-rsvp-card.js`.
   근거: 바탕화면 핸드오프 `rsvp-modal.md`.

   ★ 템플릿마다 다르게 보이려면 **변수 여섯 개만** 덮는다. 선택자를 다시 쓰지 말 것.
       --rc-paper  카드 종이      --rc-ink    글자
       --rc-dot    강조(남기기·Thank you)    --rc-line  밑줄·구분선
       --rc-label  캡스 라벨 서체  --rc-body  본문 서체
   ⚠ 카드는 지면 **밖**(body 끝)에 선다 — 템플릿은 `.rc{ … }` 에 변수를 준다.
     `.page` 안에만 주면 카드에 닿지 않는다(방명록 팝업이 같은 이유로 한 번 어긋났다).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 트리거 — 지면 안 ── */
.rc-open{
  display:flex; align-items:center; justify-content:center; gap:10px;
  /* ⚠ `margin-inline:auto` 를 빼지 말 것 — 버튼의 auto 폭은 글자 폭(shrink-to-fit)이라
     블록이 되는 순간 **왼쪽에 붙는다.** `justify-content:center` 는 버튼 *안*만 가운데로
     맞출 뿐이라 헛돈다. 지면의 `text-align:center` 도 블록 레벨에는 닿지 않는다. */
  height:44px; margin:30px auto 0; padding:0; border:0; background:none; cursor:pointer;
  color:inherit; font-family:inherit; font-size:calc(13px * var(--fs,1)); font-weight:500; line-height:1;
}
.rc-open svg{ width:16px; height:12px; display:block; flex:none; }
.rc-open span{ border-bottom:1px solid currentColor; padding-bottom:3px; opacity:.92; }
.rc-open:active{ opacity:.6; }

/* ── 카드 ── */
.rc{
  --rc-paper:#fbfaf7; --rc-ink:#262522; --rc-dot:#8a7f72;
  --rc-line:rgba(38,37,34,.4); --rc-label:inherit; --rc-body:inherit;
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:20px; color:var(--rc-ink); font-family:var(--rc-body);
}
.rc[hidden]{ display:none; }
.rc__bd{ position:absolute; inset:0; background:rgba(38,37,34,.42); animation:rcFade .3s ease; }
.rc__c{
  position:relative; z-index:1; width:100%; max-width:380px;
  max-height:88vh; overflow:auto;
  padding:38px 26px 24px; border-radius:0; background:var(--rc-paper);
  box-shadow:0 24px 48px -20px rgba(20,19,17,.45);
  animation:rcIn .5s cubic-bezier(.16,.84,.24,1);
}
@keyframes rcFade{ from{ opacity:0; } }
@keyframes rcIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.rc__x{
  position:absolute; right:8px; top:8px; width:40px; height:40px; z-index:2;
  border:0; background:none; cursor:pointer; color:inherit;
  font-family:var(--rc-label); font-weight:300; font-size:20px; line-height:1; opacity:.5;
}

.rc__hd{ text-align:center; }
.rc__t{ font-family:var(--rc-label); font-size:calc(11px * var(--fs,1)); font-weight:500; letter-spacing:.3em; padding-left:.3em; }
.rc__s{ margin-top:8px; font-size:calc(11px * var(--fs,1)); font-weight:500; letter-spacing:.14em; opacity:.7; }
/* 안내문 — 부제 아래 한 자리. 전세버스 둘째 단계에서는 전세버스 안내문이 같은 자리에 들어온다. */
.rc__note{ margin:10px 0 0; font-size:calc(11.5px * var(--fs,1)); line-height:1.8; letter-spacing:-.01em; opacity:.75;
  white-space:pre-line; word-break:keep-all; text-wrap:pretty; }
.rc__note[hidden]{ display:none; }
/* `[[ ]]` 강조의 바닥 값 — 템플릿이 회신 마감일 강조(`.rsvp-due b`)와 같은 꼴로 덮는다(`body [data-sec="rsvp"] mark`). */
.rc__note mark, .rsvp-note mark, [data-lsh-note] mark{ background:none; color:var(--lsh-mark, currentColor); font-weight:500; padding:0; }
.rc__hd::after{ content:""; display:block; margin-top:20px; height:1px; background:var(--rc-line); }
/* 템플릿 로고 머리(rsvpCardMark) — 가운데 한 장. 아래 헤어라인은 글자 머리와 같다. */
.rc__mark{ display:block; width:29%; max-width:112px; margin:0 auto; }
.rc__hd--mark::after{ margin-top:16px; }

/* 1행 — 성함(밑줄 입력) + 참석 여부(괄호 묶음) */
/* ⚠ 행 간격은 시안(26/20/18)보다 좁다 — 그대로 두니 "너무 넓다"고 지적받았다(2026-09-28).
   묻는 것이 넷뿐이라 성기게 벌리면 카드가 빈 종이처럼 보인다. */
.rc__line{ margin-top:18px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end; }
.rc__nm{ display:block; min-width:0; }
.rc__nm input{
  width:100%; height:36px; padding:0 2px; border:0; border-bottom:1px solid var(--rc-line);
  border-radius:0; background:none; outline:none; color:inherit;
  font-family:inherit; font-size:calc(13px * var(--fs,1)); -webkit-appearance:none; appearance:none;
}
/* ⚠ 포커스 때만 16px — 아이폰 확대 차단(전 템플릿 공통). 안내 글자는 함께 커지지 않게 묶는다. */
.rc__nm input:focus{ font-size:calc(16px * var(--fs,1)); }
.rc__nm input:focus::placeholder{ font-size:calc(13px * var(--fs,1)); }
.rc__nm input::placeholder{ color:var(--rc-ink); opacity:.38; }

.rc__row{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rc__row + .rc__row{ margin-top:12px; }
.rc__lb{ font-size:calc(12.5px * var(--fs,1)); }
/* 괄호 묶음 — 괄호는 옅게, 구분선은 더 옅게. 고른 것만 또렷해진다. */
.rc__pick{ display:flex; align-items:center; gap:7px; white-space:nowrap; opacity:1; }
.rc__pick > span{ opacity:.55; }
.rc__pick .rc__sep{ opacity:.3; }
.rc__pick button{
  height:36px; padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:calc(12.5px * var(--fs,1)); line-height:1;
  color:var(--rc-ink); opacity:.36; transition:opacity .25s ease;
}
.rc__pick button.on{ opacity:1; border-bottom:1px solid currentColor; padding-bottom:2px; }

.rc__step{ display:flex; align-items:center; gap:2px; }
.rc__step button{ width:34px; height:36px; border:0; background:none; cursor:pointer;
  color:inherit; font-family:var(--rc-label); font-size:calc(14px * var(--fs,1)); line-height:1; }
.rc__step b{ min-width:26px; text-align:center; font-family:var(--rc-label); font-weight:400; font-size:calc(13px * var(--fs,1));
  border-bottom:1px solid var(--rc-line); padding-bottom:2px; }
/* 불참이면 인원을 묻지 않는다 — 칸은 남기고 흐린다(줄이 사라지면 카드가 출렁인다). */
[data-rc-countwrap].is-off{ opacity:.35; pointer-events:none; }

.rc__err{ margin:12px 0 0; font-size:calc(11.5px * var(--fs,1)); font-weight:500; color:var(--rc-dot); }
.rc__err[hidden]{ display:none; }
.rc__foot{ margin-top:14px; display:flex; justify-content:flex-end; }
.rc__send{
  display:flex; align-items:center; gap:8px; height:36px; padding:0;
  border:0; background:none; cursor:pointer; color:var(--rc-dot);
  font-family:inherit; font-size:calc(12.5px * var(--fs,1)); font-weight:500; line-height:1;
}
.rc__send svg{ width:16px; height:12px; display:block; flex:none; }
.rc__send:disabled{ opacity:.4; cursor:default; }

/* ── 완료 ── */
.rc__done{ text-align:center; animation:rcFade .5s ease; }
.rc__done[hidden]{ display:none; }
.rc__msg{ margin:12px 0 0; font-size:calc(12.5px * var(--fs,1)); line-height:1.8; }
.rc__got{ margin-top:10px; font-size:calc(11px * var(--fs,1)); letter-spacing:.01em; line-height:1.7; opacity:.7; }
.rc__again{ margin-top:16px; min-height:40px; padding:0; border:0; background:none; cursor:pointer;
  color:inherit; font-family:inherit; font-size:calc(12px * var(--fs,1)); }
.rc__again span{ border-bottom:1px solid currentColor; padding-bottom:2px; }

@media (prefers-reduced-motion:reduce){
  .rc__bd,.rc__c,.rc__done{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   전체 화면 유형(`rsvpStyle: FULL`) — 카드와 **같은 마크업**(`.rc.rc--full`), 모양만 앱 화면이다.
   화면을 통째로 덮고 · 글씨와 버튼이 크고 · 한 줄에 하나씩 묻고 · 보내기 줄은 바닥에 붙는다.
   ⚠ 색·서체는 카드와 같은 변수(`--rc-*`)를 받는다 — 템플릿마다 따로 칠하지 않는다.
   ⚠ 손가락 닿는 곳은 모두 48px 이상(넓은 연령대). 입력 글자는 16px 이상(확대 차단).
   ⚠ `display` 를 준 요소는 `hidden` 속성이 안 먹는다 — 아래 `[hidden]` 짝을 지울 것.
   ═══════════════════════════════════════════════════════════════════ */
.rc--full{ padding:0; align-items:stretch; justify-content:stretch; background:var(--rc-paper); }
.rc--full .rc__bd{ display:none; }
.rc--full .rc__c{
  width:100%; max-width:none; height:100%; max-height:none; margin:0; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top, 0px) + 66px) 24px calc(env(safe-area-inset-bottom, 0px) + 20px);   /* 위 66px = 왼쪽 위 [← 이전] 자리 */
  box-shadow:none; animation:rcFullIn .45s cubic-bezier(.16,.84,.24,1);
}
.rc--full .rc__c > *{ width:100%; max-width:460px; margin-left:auto; margin-right:auto; }
@keyframes rcFullIn{ from{ opacity:0; transform:translateY(28px); } }

/* 닫기 — 모서리에서 한 뼘 안쪽, 큰 터치 칸 */
.rc--full .rc__x{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 8px); right:10px; width:52px; height:52px;
  font-size:30px; opacity:.7;
}

/* 머리 — 왼쪽 정렬의 큰 제목. 영문 라벨은 작게, 한글 부제가 주인공이다. */
.rc--full .rc__hd{ text-align:left; }
.rc--full .rc__t{ font-size:calc(11.5px * var(--fs,1)); padding-left:0; letter-spacing:.34em; opacity:.7; }
.rc--full .rc__s{ margin-top:12px; font-size:23px; font-weight:600; letter-spacing:-.02em; line-height:1.28; opacity:1; }
.rc--full .rc__note{ margin-top:12px; font-size:calc(13.5px * var(--fs,1)); line-height:1.85; opacity:.72; }
.rc--full .rc__hd::after{ margin-top:24px; }
.rc--full .rc__hd--mark{ text-align:left; }
.rc--full .rc__mark{ margin:0; width:34%; max-width:140px; }

/* 폼 — 남는 키를 먹고, 보내기 줄을 바닥으로 민다 */
.rc--full [data-rc-form]{ flex:1 1 auto; display:flex; flex-direction:column; padding-top:6px; }
.rc--full [data-rc-form][hidden]{ display:none; }
.rc--full .rc__line{ margin-top:22px; display:block; }
.rc--full .rc__nm input{
  height:48px; padding:0 2px; font-size:calc(16.5px * var(--fs,1)); border-bottom-width:1.5px;
}
.rc--full .rc__nm input:focus{ font-size:calc(16.5px * var(--fs,1)); }
.rc--full .rc__nm input::placeholder{ font-size:calc(16.5px * var(--fs,1)); opacity:.4; }

/* 한 줄에 하나씩 — 라벨은 위, 고르는 칸은 아래로 크게 */
.rc--full .rc__row{ margin-top:22px; display:block; }
.rc--full .rc__lb{ display:block; margin-bottom:9px; font-size:calc(13px * var(--fs,1)); opacity:.68; }
/* ⚠ 위 `.rc__pick{display:grid}` 가 이기도록 이 규칙에는 display 를 주지 않는다(선택자 우선순위) */
.rc--full .rc__line .rc__pick{ margin-top:18px; }

/* 고르기 — 괄호·구분선을 걷고 두 칸짜리 큰 선택 버튼으로. 고른 쪽은 먹색으로 채운다. */
.rc--full .rc__pick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; white-space:normal; }
.rc--full .rc__pick > span{ display:none; }
.rc--full .rc__pick button{
  height:48px; padding:0 8px; border:1.5px solid var(--rc-line); border-radius:0;
  font-size:calc(15px * var(--fs,1)); font-weight:500; opacity:1; color:var(--rc-ink); background:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.rc--full .rc__pick button.on{
  background:var(--rc-ink); color:var(--rc-paper); border-color:var(--rc-ink); padding-bottom:0;
}

/* 인원 — 큰 − / + 와 가운데 숫자 */
.rc--full .rc__step{ display:grid; grid-template-columns:48px 1fr 48px; gap:0; align-items:stretch; }
.rc--full .rc__step button{
  width:auto; height:48px; border:1.5px solid var(--rc-line); font-size:20px; color:inherit;
}
.rc--full .rc__step b{
  display:flex; align-items:center; justify-content:center; height:48px; min-width:0;
  border:0; border-top:1.5px solid var(--rc-line); border-bottom:1.5px solid var(--rc-line);
  font-size:20px; font-weight:500; padding:0;
}
.rc--full .lsh-total{ display:none; }

.rc--full .rc__err{ margin-top:16px; font-size:calc(13px * var(--fs,1)); }

/* 보내기 줄 — 바닥에 붙는 큰 막대(앱의 주 버튼). 먹색 바탕에 종이색 글자라 어느 지면에서도 읽힌다. */
.rc--full [data-rc-form] > .rc__foot,
.rc--full [data-rc-form] > .lsh-foot{ margin-top:auto; padding-top:24px; }
.rc--full .rc__foot{ display:block; }
.rc--full .rc__send{
  width:100%; height:52px; justify-content:center; gap:9px;
  background:var(--rc-ink); color:var(--rc-paper); font-size:calc(15.5px * var(--fs,1)); font-weight:600; letter-spacing:.01em;
}
.rc--full .rc__send svg{ width:20px; height:15px; }
.rc--full .rc__send:disabled{ opacity:.32; }
.rc--full .rc__send:not(:disabled):active{ opacity:.85; }
/* 둘째 단계의 아래쪽 [이전] — 전체 화면은 **왼쪽 위 [← 이전]** 이 한 단계 뒤로 가므로 아래 것은 걷는다(둘이 있으면 같은 말이 두 번 선다).
   보내기 막대가 줄을 꽉 채운다. */
.rc--full .lsh-foot [data-lsh-prev]{ display:none; }
.rc--full .lsh-foot.is-step2{ grid-template-columns:1fr; }

/* 완료 — 화면 한가운데에 크게 */
.rc--full .rc__done{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.rc--full .rc__done[hidden]{ display:none; }
.rc--full .rc__msg{ font-size:calc(18px * var(--fs,1)); font-weight:600; line-height:1.6; }
.rc--full .rc__got{ font-size:calc(16px * var(--fs,1)); margin-top:14px; opacity:.7; }
.rc--full .rc__again{ margin-top:26px; min-height:48px; font-size:calc(14.5px * var(--fs,1)); }

@media (prefers-reduced-motion:reduce){ .rc--full .rc__c{ animation:none; } }

/* 전체 화면 — 닫기는 X 가 아니라 왼쪽 위 [← 이전] 이다(2026-10-11 지시). 카드 유형에서는 이 버튼이 없다. */
.rc__back{ display:none; }
.rc--full .rc__x{ display:none; }
.rc--full .rc__back{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 6px); left:8px; z-index:2;
  display:flex; align-items:center; gap:5px; width:auto; max-width:none; margin:0; height:44px; padding:0 12px 0 6px;
  border:0; background:none; cursor:pointer; color:inherit; font-family:inherit; font-size:calc(14px * var(--fs,1)); font-weight:500; line-height:1;
}
.rc--full .rc__back svg{ width:20px; height:20px; flex:none; }
.rc--full .rc__back:active{ opacity:.6; }

/* ═══════════════════════════════════════════════════════════════════
   전체 화면 **팝업**(`.rc--pop`) — 자동 팝업(봉투)·플로팅 버튼·전체 화면 유형의 지면 버튼이 여는 한 벌.
   위에 한 뼘 틈을 두고 둥근 상단 보더로 올라온다. 안쪽 짜임은 `.rc--full` 그대로다.

   ★ **준 자리에서 전체 화면까지 자라난다** — `clip-path` 만 늘린다(안쪽 글은 처음부터 제 자리에 있어 출렁이지 않는다).
     모듈(`invitation-rsvp-card.js`)이 `--rf-t/-r/-b/-l` 에 시작 자리를 넣고 `.is-grow` 를 한 틀만 걸었다 뗀다.
   ⚠ **PC 에서도 지면 폭을 넘지 않는다**(2026-10-12 지시) — 청첩장은 한 뼘 폭의 지면이라, 넓은 화면에서 모달만
     화면 끝까지 벌어지면 다른 물건이 된다. 판은 `--rf-w` 폭으로 가운데 선다.
   ⚠ 틈으로 뒤 지면이 비친다 — 바탕은 종이색이 아니라 **어둑한 장막**이다(`.rc--full` 의 종이 바탕을 덮는다).
   ⚠ 닫기는 **오른쪽 위 X** 와 왼쪽 위 [← 이전] 둘 다다 — [← 이전] 은 전세버스 둘째 단계에서 한 단계 뒤로 간다.
   ═══════════════════════════════════════════════════════════════════ */
.rc--pop{
  /* 위 틈 — 화면을 꽉 채우면 답답하다(2026-10-12 지시). 키 작은 폰에서는 아래 눈금이 줄인다. */
  --rf-gap:108px; --rf-w:440px; --rf-t:0px; --rf-r:0px; --rf-b:0px; --rf-l:0px;
  z-index:96;                                         /* 봉투 편지(95) 위 — 넘겨받는 동안 겹쳐도 가려지지 않게 */
  padding-top:var(--rf-gap);
  justify-content:center;                             /* 지면 폭으로 좁힌 판을 가운데 세운다 */
  background:rgba(20,19,17,.5);
  transition:background .45s ease;
}
.rc--pop .rc__c{
  width:100%; max-width:var(--rf-w);
  background:var(--rc-paper);
  border-radius:22px 22px 0 0;
  padding-top:66px;                                   /* 위 틈이 있으니 안전영역만큼 더 내리지 않는다 */
  animation:none;
  clip-path:inset(0 0 0 0 round 22px 22px 0 0);
  transition:clip-path .72s cubic-bezier(.16,.84,.24,1);
}
.rc--pop .rc__c > *{ transition:opacity .34s ease .16s; }
/* 시작 모습 — 준 자리만큼만 보이고, 글은 아직 비어 있다 */
.rc--pop.is-grow{ background:rgba(20,19,17,0); transition:none; }
.rc--pop.is-grow .rc__c{
  clip-path:inset(var(--rf-t) var(--rf-r) var(--rf-b) var(--rf-l) round 14px);
  transition:none;
}
.rc--pop.is-grow .rc__c > *{ opacity:0; transition:none; }
/* 닫는 모습 — **열린 자리로 다시 오므라든다**(2026-10-12 지시). 여는 것보다 한 뼘 빠르다. */
.rc--pop.is-shrink{ background:rgba(20,19,17,0); transition:background .4s ease; }
.rc--pop.is-shrink .rc__c{
  clip-path:inset(var(--rf-t) var(--rf-r) var(--rf-b) var(--rf-l) round 14px);
  transition:clip-path .44s cubic-bezier(.5,.05,.2,1);
}
.rc--pop.is-shrink .rc__c > *{ opacity:0; transition:opacity .22s ease; }
/* 모서리 두 손잡이 — 둥근 판 **안쪽** 위 두 구석.
   ⚠ `fixed` 를 쓰지 않는다 — `clip-path`·`filter` 가 걸린 판은 고정 자손의 **그릇**이 되어 자리가 어긋난다
     (07 은 카드 종이 그림에 drop-shadow 를 써서 손잡이가 로고 위로 내려앉았다 · 2026-10-12).
     판에 붙여 두면 판이 지면 폭으로 좁아져도 늘 제 구석에 선다. */
.rc--pop .rc__c{ position:relative; }
.rc--pop .rc__back{ position:absolute; top:11px; left:10px; right:auto; z-index:2; }
.rc--pop .rc__x{
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:11px; right:8px; left:auto; z-index:2;
  width:44px; height:44px; margin:0; padding:0; border:0; background:none; cursor:pointer;
  color:inherit; font-size:23px; line-height:1; opacity:.5;
}
.rc--pop .rc__x:active{ opacity:.85; }

/* 키 작은 폰 — 위 틈을 그대로 두면 물을 자리가 모자란다. 틈만 줄인다(치수는 건드리지 않는다). */
@media (max-height: 780px){ .rc--pop{ --rf-gap:64px; } }
@media (max-height: 680px){ .rc--pop{ --rf-gap:40px; } }

@media (prefers-reduced-motion:reduce){
  .rc--pop, .rc--pop .rc__c, .rc--pop .rc__c > *,
  .rc--pop.is-shrink, .rc--pop.is-shrink .rc__c, .rc--pop.is-shrink .rc__c > *{ transition:none; }
}

/* ── 회신을 마친 뒤 ── **묻는 말은 모두 걷는다**(2026-10-12 지시). 보낸 내용만 남으면 된다.
   걷는 것 둘 — 한글 부제(`data-lsh-sub`)와 안내 줄(`data-lsh-note`).
   ⚠ 특히 **두 단계로 받은 뒤 다시 열면** 머리에 마지막 단계의 글(「전세버스 탑승 여부」 + 전세버스 안내문)이
     그대로 남아 있다 — 이미 다 보낸 사람에게 다시 묻는 꼴이라 어색하다.
   ⚠ 완료 화면이 떴는지로 가른다 — 템플릿마다 완료를 모는 스크립트가 달라, 클래스를 새로 심는 대신
     이미 있는 상태를 본다. 이 파일은 전 템플릿 head 에서 불린다.
   ⚠ 라틴 제목(R.S.V.P)과 가로선은 남긴다 — 그 자리가 무엇인지는 알려 줘야 한다. */
#rsvpSection:has(#rsvpDone:not([hidden])) [data-lsh-sub],
#rsvpSection:has(#rsvpDone:not([hidden])) [data-lsh-note],
[data-sec="rsvp"]:has(#rsvpDone:not([hidden])) [data-lsh-sub],
[data-sec="rsvp"]:has(#rsvpDone:not([hidden])) [data-lsh-note],
/* 가운데 카드·전체 화면 팝업 — 같은 규칙. 팝업 벌에는 id 가 없어 `[data-rc-done]` 으로 본다. */
.rc:has([data-rc-done]:not([hidden])) [data-lsh-sub],
.rc:has([data-rc-done]:not([hidden])) [data-lsh-note]{ display:none; }