/* ═══════════════════════════════════════════════════════════════════════════
   신랑·신부 소개(`_intro.jspf`) — 전 템플릿 공통 **뼈대**. 근거: design_handoff_couple_intro.
   여기에는 짜임(배치·슬라이드·줄바꿈)만 둔다. 색·서체·사진 틀·장식은 템플릿이 `.cp` 아래에서 입힌다.

   템플릿이 바꾸는 변수(섹션 `.cp` 에 준다):
     --cp-ink    컨트롤(화살표·숫자) 글자색          --cp-line  진행 선 바탕
     --cp-fill   진행 선 채움                        --cp-empty 빈 사진 칸 색
     --cp-ratio  사진 틀 비율(기본 3/4)              --cp-pos   사진 초점(기본 50% 20%)
     --cp-albl   답 앞 라벨 폭(기본 44px)            --cp-w     자유형식 사진 폭(기본 120px)

   ⚠ 감춰 둔 칸(`__en` · `__ini` · `__gv` · `__sig` · `__av` · `__frame` · `__deco` · `__sep`)은 템플릿이 필요한 것만 켠다.
   ⚠ display 를 준 것을 스크립트가 감추는 자리(`__ctl`)에는 [hidden] 짝을 둔다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 사진 칸 ── 틀(`__frame`)은 사진 위에 얹는 그림, 사진은 `__phin` 안에서 cover. */
.lilt-cp__ph{ position:relative; aspect-ratio:var(--cp-ratio, 3/4); margin:0 auto; }
.lilt-cp__phin{ position:absolute; inset:0; overflow:hidden; display:block; background:var(--cp-empty, rgba(0,0,0,.06)); }
.lilt-cp__phin img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--cp-pos, 50% 20%);
  pointer-events:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; }
.lilt-cp__frame{ position:absolute; inset:0; display:none; pointer-events:none; background:center/100% 100% no-repeat; }
.lilt-cp__pcap{ display:none; }
.lilt-cp__deco{ display:none; position:absolute; inset:0; pointer-events:none; }
.lilt-cp__deco i{ position:absolute; display:block; background:center/contain no-repeat; }
.lilt-cp__en, .lilt-cp__ini, .lilt-cp__gv, .lilt-cp__sig, .lilt-cp__av, .lilt-cp__sep{ display:none; }
.lilt-cp__role.is-ko .lilt-cp__the{ display:none; }   /* 「THE 신랑」이 되지 않게 */

/* ── 인터뷰: 사진 두 장 ── */
.lilt-cp__photos{ position:relative; display:grid; grid-template-columns:1fr 1fr; }
.lilt-cp__fig{ margin:0; min-width:0; }
.lilt-cp__cap{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin-top:8px; }

/* ── 인터뷰: 슬라이드 ── 뷰포트 높이는 가장 긴 슬라이드가 정한다(넘길 때 출렁이지 않는다). */
.lilt-cp__vp{ overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.lilt-cp__track{ display:flex; align-items:flex-start; transition:transform .45s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.lilt-cp__s{ flex:0 0 100%; min-width:0; }
.lilt-cp__q{ display:flex; flex-direction:column; }
.lilt-cp__as{ display:flex; flex-direction:column; gap:6px; margin-top:8px; text-align:left; }
.lilt-cp__a{ display:flex; align-items:flex-start; gap:8px; }
.lilt-cp__al{ flex:none; width:var(--cp-albl, 44px); }
.lilt-cp__at{ min-width:0; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }
.lilt-cp__qt{ word-break:keep-all; overflow-wrap:anywhere; }

.lilt-cp__ctl{ display:flex; align-items:center; gap:10px; margin-top:6px; color:var(--cp-ink, currentColor); }
.lilt-cp__ctl[hidden]{ display:none; }
.lilt-cp__prev, .lilt-cp__next{ flex:none; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  color:inherit; font:inherit; font-size:calc(13px * var(--fs,1)); line-height:1; -webkit-tap-highlight-color:transparent; transition:opacity .2s; }
.lilt-cp__prev:disabled, .lilt-cp__next:disabled{ opacity:.25; cursor:default; }
.lilt-cp__mid{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.lilt-cp__cnt{ font-variant-numeric:tabular-nums; }
.lilt-cp__tot{ opacity:.45; }
.lilt-cp__bar{ position:relative; width:100%; height:1px; background:var(--cp-line, rgba(0,0,0,.14)); }
.lilt-cp__bar i{ position:absolute; left:0; top:-.5px; height:2px; width:0; background:var(--cp-fill, currentColor); transition:width .45s; }

/* ── 자유형식: 사람마다 `사진 | 글`, 둘째 사람은 뒤집는다(대각선 지그재그). ── */
.lilt-cp__person{ position:relative; display:flex; align-items:center; gap:18px; text-align:left; }
.lilt-cp__person--second{ flex-direction:row-reverse; text-align:right; }
.lilt-cp__person .lilt-cp__ph{ flex:none; width:var(--cp-w, 120px); margin:0; }
.lilt-cp__tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lilt-cp__bd{ margin:8px 0 0; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }

@media (prefers-reduced-motion:reduce){
  .lilt-cp__track, .lilt-cp__bar i{ transition:none; }
}