/* ═══════════════════════════════════════════════════════════════════════════
   마음 전하실 곳 · 연락하기 · 참석 회신(기본형) — 전 템플릿 공통 살갗.
   마크업은 `_accountlist.jspf` · `_contactlist.jspf` · `_rsvpinline.jspf`,
   동작은 `invitation-sections.js`. 정본은 LILT_008 의 짜임이다(2026-09-28 지시).

   ★ 템플릿마다 다르게 보이려면 **변수만** 덮는다. 선택자를 다시 쓰지 말 것.
       --sec-body    한글 본문 서체(고객이 고른 꼴)   --sec-lat     라틴 라벨 서체
       --sec-num     계좌번호 서체(비우면 --sec-lat)
       --sec-toggle  측 토글 버튼 서체                --sec-script  앰퍼샌드(필기체) 서체
       --sec-ink     글자색                           --sec-dot     강조색
       --sec-line    행 구분선                        --sec-line2   회신 기둥·가지
       --sec-btn-bg  회신 버튼 바탕                    --sec-btn-fg  회신 버튼 글자
       --sec-btn-r   회신 버튼 모서리(각진 지면은 0)
   ⚠ 비워 두면 08 무드로 떨어진다 — 템플릿마다 `.lilt-sec{ … }` 로 반드시 덮을 것.
   ═══════════════════════════════════════════════════════════════════════════ */

.lilt-sec{
  --sec-body:inherit; --sec-lat:inherit; --sec-num:var(--sec-lat); --sec-toggle:inherit; --sec-script:inherit;
  --sec-ink:currentColor; --sec-dot:currentColor;
  --sec-line:rgba(38,37,34,.14); --sec-line2:rgba(38,37,34,.4);
  --sec-btn-bg:#2b2a27; --sec-btn-fg:#ffffff; --sec-btn-r:999px;
  color:var(--sec-ink); font-family:var(--sec-body);
}

/* ── 측 토글 — 계좌와 연락처가 **따로** 기억한다(상태를 한 쌍으로 묶지 말 것) ── */
.sec-side{ margin-top:34px; display:flex; align-items:center; justify-content:center; gap:22px; }
.sec-side button{
  height:36px; padding:0 4px; border:0; background:none; color:inherit;
  font-family:var(--sec-toggle); font-weight:600; font-size:calc(12px * var(--fs,1)); letter-spacing:.12em; cursor:pointer;
  opacity:.35; border-bottom:1px solid transparent; transition:opacity .3s ease;
}
.sec-side button.on{ opacity:1; border-bottom-color:currentColor; }
/* 한글 보기(신랑 / 신부) — 라틴 자간·서체를 물려받으면 낱자가 흩어진다 */
.sec-side.is-ko button{ font-family:var(--sec-body); font-weight:500; font-style:normal; letter-spacing:.1em; }
.sec-side i{ font-family:var(--sec-script); font-style:normal; font-size:calc(13px * var(--fs,1)); line-height:1; color:var(--sec-dot); }

/* ── 계좌 행 ── */
.sec-rows{ margin-top:18px; width:100%; text-align:left; border-bottom:1px solid var(--sec-line); }
.sec-rows[hidden]{ display:none; }
.sec-row{
  padding:16px 0; border-top:1px solid var(--sec-line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.sec-row__l{ display:flex; flex-direction:column; gap:5px; min-width:0; }
/* ⚠ 역할 이름도 한글이다(신랑 · 신랑 아버지 …) — 라틴 서체 뒤에 한글꼴을 세워 둔다. */
.sec-row__role{ font-family:var(--sec-lat), var(--sec-body); font-stretch:110%; font-weight:500;
  font-size:calc(10px * var(--fs,1)); letter-spacing:.1em; line-height:1.6; opacity:.62; }
.sec-row__role em{ font-family:var(--sec-body); font-style:normal; letter-spacing:.02em; }
/* ⚠ 이 줄은 '국민은행 123456-01-234567' 처럼 한글과 숫자가 섞인다 — 폴백을 반드시 이을 것. */
/* ⚠ 계좌번호는 숫자 덩어리다 — 라틴 세리프(Bodoni·Cormorant)는 옛숫자라 한글 옆에서 들쭉날쭉해진다.
   그런 지면은 `--sec-num:var(--ko)` 로 덮는다(전 템플릿 공통 규칙). */
/* ⚠ 계좌번호는 공백 없는 한 덩어리로 들어온다 — anywhere 가 없으면 줄이 안 바뀌어 글자가 잘린다
   ('anywhere' 라야 flex·grid 의 최소 폭 계산에도 반영된다). */
.sec-row__no{ font-family:var(--sec-num), var(--sec-body); font-size:calc(13px * var(--fs,1)); line-height:1.3; letter-spacing:.02em;
  overflow-wrap:anywhere; }
.sec-row__cp{ flex:none; height:28px; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.sec-row__cp span{
  font-family:var(--sec-lat); font-stretch:110%; font-weight:500; font-size:calc(8.5px * var(--fs,1));
  letter-spacing:.2em; line-height:1.6; border-bottom:1px solid currentColor; padding-bottom:1px;
}

/* ── 연락처 행 — 행마다 **전화 버튼 하나뿐**이다(문자 버튼 금지) ── */
.sec-ct{ margin-top:18px; width:100%; text-align:left; border-bottom:1px solid var(--sec-line); }
.sec-ct[hidden]{ display:none; }
.sec-ct__r{
  padding:14px 0; border-top:1px solid var(--sec-line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sec-ct__l{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.sec-ct__role{ font-family:var(--sec-lat), var(--sec-body); font-stretch:110%; font-weight:500;
  font-size:calc(9px * var(--fs,1)); letter-spacing:.2em; line-height:1.6; }
.sec-ct__nm{ font-size:calc(13.5px * var(--fs,1)); font-weight:500; }
.sec-ct__tel{
  position:relative; flex:none; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--sec-line2);
  display:flex; align-items:center; justify-content:center; color:inherit;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
/* ⚠ 그려지는 원은 36px 이지만 **닿는 자리는 44px** 로 넓혀 둔다(사방 4px).
   넓은 연령대가 쓰는 화면이라 과녁이 작으면 안 된다 — 레이아웃은 건드리지 않는 방식이다. */
.sec-ct__tel::after{ content:''; position:absolute; inset:-4px; }
.sec-ct__tel svg{ display:block; width:15px; height:15px; }
.sec-ct__tel:hover, .sec-ct__tel:active{ background:var(--sec-dot); border-color:var(--sec-dot); color:var(--sec-btn-fg); }

.sec-empty{ margin-top:30px; font-size:calc(12px * var(--fs,1)); opacity:.5; text-align:center; }

/* ── 참석 회신(기본형) ── */
.rs{ position:relative; margin:40px 0 0; width:100%; }
/* 오른쪽 기둥 — 줄 칸(40px)의 **첫 줄 한가운데부터 마지막 줄 한가운데까지**만 선다.
   ⚠ 기준은 `.rs__rows` 다(폼이 아니다). 폼에 걸면 [회신 보내기]까지 내려가 가지 없는 선이
     남고, 인원 줄이 숨은 상태도 이 기준이라야 따라온다 — 위아래 20px 은 줄 높이의 절반. */
.rs__rows{ position:relative; }
.rs__tick{ position:absolute; right:0; top:20px; bottom:20px; width:1px; background:var(--sec-line2); }
.rs__r{ display:grid; grid-template-columns:78px minmax(0,1fr) 12px; align-items:center; height:40px; }
.rs__r[hidden]{ display:none; }
.rs__k{ font-family:var(--sec-body); font-weight:500; font-size:calc(11.5px * var(--fs,1)); line-height:1.2;
  text-align:left; white-space:nowrap; }
.rs__v{
  position:relative; height:30px; width:100%; padding:0 2px;
  border:0; border-bottom:1px dotted var(--sec-line2); border-radius:0; background:transparent;
  display:flex; align-items:center;
  font-family:var(--sec-body); font-size:calc(11.5px * var(--fs,1)); font-weight:400; letter-spacing:.02em;
  color:inherit; text-align:left; outline:none; -webkit-appearance:none; appearance:none;
}
/* ⚠ 포커스 때만 16px — 아이폰은 그보다 작은 칸에 포커스가 가면 지면을 확대하고 돌아오지 않는다.
   안내 글자는 함께 커지지 않게 묶는다(확대 판정은 칸의 font-size 로만 한다). */
input.rs__v:focus{ font-size:calc(16px * var(--fs,1)); }
input.rs__v:focus::placeholder{ font-size:calc(11.5px * var(--fs,1)); }
input.rs__v::placeholder{ color:currentColor; opacity:.42; }
button.rs__v{ cursor:pointer; }
button.rs__v:active{ opacity:.6; }
.rs__cnt{ justify-content:space-between; padding:0 0 0 10px; }
.rs__cnt div{ display:flex; }
.rs__cnt button{ width:30px; height:30px; border:0; background:none; color:inherit; font-size:calc(14px * var(--fs,1)); cursor:pointer; }
.rs__cnt b{ font-family:var(--sec-body); font-weight:500; }
.rs__r > i{ height:1px; background:var(--sec-line2); }
.rs__err{ margin:10px 0 0; font-size:calc(11.5px * var(--fs,1)); font-weight:500; color:var(--sec-dot); text-align:left; }
.rs__err[hidden]{ display:none; }
.rs__foot{ margin-top:22px; display:grid; grid-template-columns:78px minmax(0,1fr) 12px; }
.rs__foot > div{ display:flex; justify-content:flex-end; }
.rs__send{
  height:34px; padding:0 22px; border:0; border-radius:var(--sec-btn-r);
  background:var(--sec-btn-bg); color:var(--sec-btn-fg);
  font-family:var(--sec-body); font-weight:500; font-size:calc(11.5px * var(--fs,1)); letter-spacing:.06em;
  cursor:pointer;
}
.rs__send:active{ transform:scale(.96); }
.rs__send:disabled{ opacity:.45; cursor:default; transform:none; }
.rs__done{ margin-top:26px; text-align:center; }
.rs__done[hidden]{ display:none; }
.rs__msg{ margin:0 0 10px; font-size:calc(12.5px * var(--fs,1)); line-height:1.8; }
.rs__got{ font-size:calc(11px * var(--fs,1)); letter-spacing:.01em; line-height:1.7; opacity:.75; }
.rs__again{ margin-top:8px; height:40px; padding:0; border:0; background:none; color:inherit;
  font-family:var(--sec-body); font-size:calc(12px * var(--fs,1)); cursor:pointer; }
.rs__again span{ border-bottom:1px solid currentColor; padding-bottom:2px; }