/* ══════════ 연락하기 · 마음 전하실 곳 — 접이(아코디언) 유형 ══════════
   고객이 섹션 꼴로 '아코디언'을 고르면 이 살갗이 쓰인다(기본은 여태의 측 토글).

   ★ 왜 독립 파일인가 — 열 템플릿 가운데 다섯(001·007·008·009·010)은 연락처·계좌를
     **자체 마크업**으로 그려 `invitation-sections.css` 를 아예 싣지 않는다. 그 다섯에도
     같은 접이를 끼우려면 어디에 놓여도 혼자 서는 살갗이어야 한다.

   ★ 색·서체는 **전부 상속**이다. `--sec-*` 변수가 있는 지면(002~006)에서는 그 값을 따르고,
     없는 지면에서는 글자색을 그대로 물려받는다. 그래서 지면마다 따로 맞출 것이 없다.
   ⚠ 카드·그림자·둥근 모서리를 쓰지 않는다 — 활자와 선만으로 짠다(지면 공통 어휘).
   ⚠ 펼침은 `hidden` 속성으로 가른다. 여기에 `display` 를 주면 `hidden` 이 밀려 안 듣는다. */

.sec-acc{
  margin-top:18px;
  width:100%;
  text-align:left;
  border-top:1px solid var(--sec-line, currentColor);
}
/* 변수가 없는 지면에서 선이 글자색 그대로라 너무 진하다 — 옅게 깔아 준다. */
.sec-acc{ border-top-color:var(--sec-line, rgba(128,128,128,.32)); }

.sec-acc__it{ border-bottom:1px solid var(--sec-line, rgba(128,128,128,.32)); }

/* ── 접이 머리 ── 누르는 자리. 좌: 측 이름, 우: 여닫음 표시 */
.sec-acc__h{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 2px; margin:0;
  background:none; border:0; border-radius:0; box-shadow:none;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* ⚠ 머리는 **늘 한글**이다(「신랑측 계좌번호」) — 측 토글의 라틴 조판(GROOM·자간 .12em)을
     그대로 쓰면 낱자가 흩어진다. 고객이 고른 한글꼴로 짜고 자간을 좁게 준다. */
.sec-acc__t{
  font-family:var(--sec-body, inherit);
  /* 12px — 안내 문구(12~12.5px)와 같은 급으로 맞췄다. 13px 은 머리만 도드라져 커 보인다는 지적(2026-10-10). */
  font-size:calc(12px * var(--fs,1)); font-weight:500; letter-spacing:.03em;
}

/* 여닫음 표시 — 십자에서 가로줄만 남으면 '−' 가 된다(그림 파일을 쓰지 않는다). */
.sec-acc__i{ position:relative; width:11px; height:11px; flex:0 0 auto; opacity:.55; }
.sec-acc__i::before,
.sec-acc__i::after{
  content:''; position:absolute; left:0; top:50%;
  width:11px; height:1px; margin-top:-.5px; background:currentColor;
  transition:transform .22s ease, opacity .22s ease;
}
.sec-acc__i::after{ transform:rotate(90deg); }
.sec-acc__h[aria-expanded="true"] .sec-acc__i::after{ transform:rotate(0deg); opacity:0; }

/* ── 펼침 ── */
.sec-acc__p{ padding:0 2px 16px; }
.sec-acc__p[hidden]{ display:none; }

/* ── 행(연락처·계좌 공통) ── */
.sec-acc__r{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0;
}
.sec-acc__r + .sec-acc__r{ border-top:1px solid var(--sec-line, rgba(128,128,128,.22)); }
/* ⚠ 줄 간격을 못 박는다 — 지면의 `line-height`(템플릿마다 1.8~2.0)를 그대로 물려받으면
     역할과 이름이 한 뼘씩 벌어져 행 하나가 문단처럼 보인다. */
.sec-acc__l{ min-width:0; display:flex; flex-direction:column; gap:3px; line-height:1.35; }
.sec-acc__role{ font-size:calc(11px * var(--fs,1)); letter-spacing:.06em; opacity:.62; }
.sec-acc__role em{ font-style:normal; opacity:1; }
.sec-acc__nm{ font-size:calc(13px * var(--fs,1)); }
.sec-acc__no{
  font-family:var(--sec-num, var(--sec-lat, inherit));
  font-size:calc(12.5px * var(--fs,1)); letter-spacing:.02em; word-break:break-all;
}

/* 전화 — 글자 없는 동그란 버튼을 만들지 않는다. 선으로 그린 수화기 하나뿐(문자 버튼은 금지). */
.sec-acc__tel{
  flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:inherit; opacity:.72;
}
.sec-acc__tel svg{ width:17px; height:17px; display:block; }

/* 복사 — 「글자 + 밑줄」. 채운 버튼을 쓰지 않는다. */
.sec-acc__cp{
  flex:0 0 auto; padding:4px 1px; margin:0;
  background:none; border:0; border-bottom:1px solid currentColor; border-radius:0;
  color:inherit; font-family:var(--sec-lat, inherit);
  font-size:calc(10px * var(--fs,1)); font-weight:600; letter-spacing:.14em; line-height:1;
  opacity:.68; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.sec-acc__cp.is-done{ opacity:1; }

/* 글자가 바뀌어도 칸이 흔들리지 않게 — 'COPIED' 가 가장 길다. */
.sec-acc__cp span{ display:inline-block; min-width:4.4em; text-align:center; }