*, *::before, *::after { box-sizing: border-box; }
/* 휴대폰에서 화면이 확대되거나 좌우로 흔들리지 않게 한다 (두 손가락 확대 · 두 번 눌러 확대 · 가로 밀림 막기) */
html { background: var(--bg, #f6f3ee); overflow-x: hidden; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-text-size-adjust: 100%; }

.inv {
  max-width: 430px; margin: 0 auto; overflow: hidden;
  background-color: var(--bg); background-image: var(--texture, none); background-size: var(--texture-size, auto); background-blend-mode: var(--texture-blend, normal);
  color: var(--text);
  font-family: var(--body-font), 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
  font-size: calc(15px * var(--scale, 1)); line-height: 1.9; text-align: center; word-break: keep-all;
}
.inv img { display: block; max-width: 100%; }
.inv button, .inv input, .inv select, .inv textarea { font: inherit; color: inherit; }
.inv button { cursor: pointer; }
.inv a { color: inherit; }
.inv .plain { text-decoration: none; }
.inv .dim { color: var(--muted); }
.inv .accent, .inv .heart { color: var(--accent); }
.inv small { font-size: .8em; }

.ph {
  display: flex; align-items: center; justify-content: center; min-height: 180px; width: 100%;
  background: rgba(128, 128, 128, .16); color: var(--muted); font-size: .85em;
}

/* 사진 필터 */
.filter-bw .cover-img, .filter-bw .single-img, .filter-bw .gal-item img, .filter-bw .pf-img { filter: grayscale(1); }
.filter-sepia .cover-img, .filter-sepia .single-img, .filter-sepia .gal-item img, .filter-sepia .pf-img { filter: sepia(.5) contrast(.95); }
.filter-faded .cover-img, .filter-faded .single-img, .filter-faded .gal-item img, .filter-faded .pf-img { filter: saturate(.65) contrast(.9) brightness(1.06); }

/* 스티커 · 문구 */
.cover-wrap, .sec { position: relative; }
.deco { position: absolute; z-index: 3; line-height: 1.25; white-space: nowrap; pointer-events: none; }
/* 스티커 기본 색: 따로 정하지 않으면 테마 색을 따라간다 (color = 글자·그림, --b = 바탕·테두리) */
.deco { --b: var(--surface, #fff8ea); }
.deco svg, .deco img { display: block; width: 100%; height: auto; }
.deco-in { display: block; color: var(--accent); }
.s-outline, .s-tape { color: var(--text); --b: var(--accent-soft, #bfe0f5); }
.s-label, .s-bubble { color: var(--text); --b: var(--surface, #fff8ea); }
.s-dots, .s-dymo, .s-heart { color: #fff; --b: var(--accent); }
.s-alert { color: #000; --b: #f2f2f4; }
.deco-text .deco-in { display: inline-block; position: relative; white-space: pre; text-align: center; }
/* 문구 스티커 모양 */
.s-outline { filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); padding: .2em .35em; }
.s-outline::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; padding: inherit; color: var(--b); -webkit-text-stroke: .5em var(--b); stroke-linejoin: round; }
.s-label { padding: .35em .9em; background: var(--b); clip-path: polygon(1% 5%, 99% 0, 100% 94%, 2% 100%); }
.s-dymo { padding: .3em .9em .25em; border-radius: 2px; background: var(--b); letter-spacing: .28em; text-indent: .28em; font-weight: 700; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.s-tape { padding: .3em 1.3em; background: var(--b); clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
.s-stamp { padding: .35em .8em .25em; border: 4px double currentColor; letter-spacing: .14em; text-transform: uppercase; }
.s-heart { padding: 1.7em 1.5em 2.3em; background: var(--b); clip-path: polygon(50% 26%, 62% 8%, 84% 4%, 98% 20%, 97% 46%, 80% 72%, 50% 96%, 20% 72%, 3% 46%, 2% 20%, 16% 4%, 38% 8%); }
.s-bubble { padding: .5em 1em; border-radius: 1.3em; background: var(--b); filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.s-bubble::after { content: ''; position: absolute; left: 22%; bottom: -.5em; border: .35em solid transparent; border-top-color: var(--b); border-left-color: var(--b); }
/* 아이폰 알림창 */
.s-alert {
  width: 17em; overflow: hidden; border-radius: .95em; background: var(--b); white-space: normal !important; line-height: 1.3;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  box-shadow: 0 6px 30px rgba(0,0,0,.22);
}
.s-alert .al-t { display: block; padding: 1.2em 1em 0; font-weight: 600; font-size: 1.06em; white-space: pre-line; }
.s-alert .al-b { display: block; padding: .3em 1.1em 0; font-size: .82em; line-height: 1.4; white-space: pre-line; }
.s-alert .al-k { display: block; margin-top: 1.2em; padding: .7em; border-top: 1px solid rgba(60,60,67,.28); color: #007aff; font-size: 1.06em; }
.s-dots i { display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; margin: 0 .14em; border-radius: 50%; background: var(--b); font-style: normal; }
.s-dots i.dn { transform: translateY(1em); }
.s-dots i.sp { width: .7em; background: none; }
.inv-preview .deco { pointer-events: auto; cursor: move; touch-action: none; user-select: none; }
.inv-preview .deco:hover, .inv-preview .deco.sel { outline: 1px dashed var(--accent); outline-offset: 4px; }
/* 손잡이: 스티커를 늘여도 손잡이는 찌그러지지 않게 반대로 줄인다 */
.deco-g {
  position: absolute; z-index: 2; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; letter-spacing: 0; text-indent: 0; text-transform: none;
  background: #2f9e5b; color: #fff !important; font: 700 11px/20px sans-serif !important; box-shadow: 0 1px 4px rgba(0,0,0,.3); touch-action: none;
  transform: scale(calc(1 / var(--sx, 1)), calc(1 / var(--sy, 1)));
}
.deco-x { top: -22px; right: -22px; background: #e5484d; cursor: pointer; }
.deco-o { top: -22px; left: calc(50% - 10px); cursor: grab !important; }
.deco-w { top: calc(50% - 10px); right: -22px; cursor: ew-resize !important; }
.deco-h { bottom: -22px; left: calc(50% - 10px); cursor: ns-resize !important; }
.deco-r { bottom: -22px; right: -22px; cursor: nwse-resize !important; }

/* 오른쪽 아래 버튼 · 참석 여부 팝업 */
#inv-fab { position: fixed; z-index: 45; right: max(12px, calc(50% - 203px)); bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#inv-fab button {
  padding: 9px 14px; border: 0; border-radius: 999px; background: var(--btn-fill, var(--accent, #333)); color: #fff; cursor: pointer;
  font: 500 12px/1.2 var(--body-font), sans-serif; letter-spacing: .02em; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#inv-fab .fab-icon { width: 44px; height: 44px; padding: 0; font-size: 17px; }
/* 화환 안내 창 (아래에서 올라옴) · 메뉴 (오른쪽 서랍) */
#inv-sheet, #inv-menu { position: fixed; inset: 0; z-index: 55; display: flex; justify-content: center; background: rgba(0,0,0,.5); }
#inv-sheet { align-items: flex-end; }
#inv-sheet .inv.inv-card { max-width: 430px; padding: 46px 24px 28px; border-radius: 22px 22px 0 0; animation: inv-sheet-up .3s ease; }
.sheet-names { margin: 0 0 14px; font-family: var(--title-font), serif; font-size: 1.15em; letter-spacing: .06em; }
.sheet-date { margin: 22px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .92em; }
#inv-menu { justify-content: flex-end; padding-right: max(0px, calc(50% - 215px)); }
#inv-menu .inv.inv-card { display: flex; flex-direction: column; width: 76%; max-width: 310px; height: 100%; max-height: none; padding: 54px 22px 20px; border-radius: 22px 0 0 22px; text-align: left; animation: inv-menu-in .3s ease; }
.menu-top, .menu-list button { display: block; width: 100%; padding: 10px 2px; border: 0; background: none; text-align: left; }
.inv .menu-top { color: var(--accent); }
.menu-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.inv .menu-list button { color: var(--muted); font-size: .95em; }
.menu-foot { display: flex; padding-top: 14px; border-top: 1px solid var(--line); }
.menu-foot button { flex: 1; padding: 6px 0; border: 0; background: none; font-size: .8em !important; line-height: 1.45; text-align: center; }
.menu-foot button + button { border-left: 1px solid var(--line); }
@keyframes inv-sheet-up { from { transform: translateY(40%); opacity: 0; } }
@keyframes inv-menu-in { from { transform: translateX(60%); opacity: 0; } }
#inv-upload { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.5); }
.up-info { margin: 0 2px; font-size: .82em; line-height: 1.6; color: var(--muted); text-align: center; }
#inv-modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.5); }
.inv.inv-card { position: relative; width: 100%; max-width: 380px; max-height: 88vh; margin: 0; padding: 40px 22px 14px; overflow-y: auto; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.inv-card .head { margin-bottom: 20px; }
.inv-card .link { display: block; margin: 10px auto 0; }
.inv-close { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; border: 0; background: none; font-size: 24px !important; line-height: 1; color: var(--muted) !important; }

/* ---------- 메인 화면 */
.cover { position: relative; }
.cover-img { width: 100%; height: 100%; object-fit: cover; }
.cover-title { margin: 0; font-weight: 400; line-height: 1.05; }
.cover-tag { margin: 0; font-family: var(--label-font), serif; font-size: 1.1em; letter-spacing: .14em; }
.cover-info { margin: 0; color: var(--muted); }
.cover-photo { overflow: hidden; border-radius: var(--photo-radius, var(--radius)); }
.cover-photo .ph { height: 100%; }

/* 사진 가득 (기본 · 스크립트 · 타원) */
.cover-full { height: 100vh; height: 100svh; min-height: 480px; max-height: 900px; color: #fff; }
.cover-full .cover-img { position: absolute; inset: 0; min-height: 0; }
.cover-full .ph { color: #fff; background: #a9a39b; }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 58%, rgba(0,0,0,.46)); }
.cover-top, .cover-bottom { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 22px; letter-spacing: .12em; }
.cover-top { top: 26px; font-family: var(--label-font), serif; font-size: 1.05em; }
.cover-bottom { bottom: 26px; font-family: var(--title-font), serif; font-size: 1.05em; }
.cover-full .cover-tag { position: absolute; left: 0; right: 0; top: 64px; font-style: italic; }
.cover-full .cover-title { position: absolute; left: 24px; right: 24px; bottom: 78px; font-size: 3.4em; text-align: left; }
.cover-script .cover-title { font-size: 4.6em; line-height: .92; transform: rotate(-5deg); transform-origin: left bottom; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.cover-oval .cover-title { top: 8%; bottom: auto; font-size: 3em; text-align: center; letter-spacing: .06em; }
.co-ring { position: absolute; left: 50%; top: 55%; width: 62%; aspect-ratio: 3 / 4.3; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.9); border-radius: 50%; }
.co-date { position: absolute; left: 0; right: 0; bottom: 62px; margin: 0; font-family: var(--label-font), serif; letter-spacing: .2em; }

/* 액자 · 아치 */
.cover-frame { padding: 56px 32px 48px; }
.cover-frame .cover-tag { margin-bottom: 28px; color: var(--accent); font-style: italic; }
.cover-frame .cover-photo { aspect-ratio: 3 / 4; }
.cover-arch .cover-photo { border-radius: 999px 999px var(--photo-radius, var(--radius)) var(--photo-radius, var(--radius)); }
.cover-frame .cover-title { margin-top: 30px; font-size: 2.4em; color: var(--accent); }
.cover-names { margin: 30px 0 14px; font-family: var(--title-font), serif; font-size: 1.5em; font-weight: 400; letter-spacing: .08em; }
.cover-names i { margin: 0 .9em; font-size: .6em; font-style: normal; color: var(--muted); }

/* 빈티지 필름 */
.cover-vintage { min-height: min(100vh, 900px); min-height: min(100svh, 900px); display: flex; align-items: center; justify-content: center; padding: 110px 0; color: var(--accent); font-family: var(--label-font), var(--body-font), serif; }
.cv-corner { position: absolute; font-size: .78em; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; }
.cv-tl { top: 22px; left: 24px; text-align: left; }
.cv-tr { top: 22px; right: 24px; text-align: right; max-width: 46%; }
.cv-bl { bottom: 22px; left: 24px; text-align: left; }
.cv-br { bottom: 22px; right: 24px; text-align: right; }
.cv-mid { width: 100%; }
.cv-name { margin: 0; font-size: 2.1em; line-height: 1.5; letter-spacing: .02em; }
.film { position: relative; width: 60%; margin: 18px auto; padding: 13px 0; background: #0c0c0c; }
.film::before, .film::after { content: ''; position: absolute; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.7) 9px 15px); }
.film::before { top: 4px; }
.film::after { bottom: 4px; }
.film .cover-img { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
.cover-vintage .cover-title { margin-top: 26px; font-size: 1.8em; }

/* 매거진 */
.cover-mag { padding: 50px 28px 46px; }
.cover-mag .cover-tag { font-size: .8em; text-transform: uppercase; color: var(--muted); }
.cover-mag .cover-title { margin-top: 10px; font-size: 3.9em; line-height: .98; letter-spacing: .01em; }
.cover-mag .cover-photo { position: relative; width: 78%; margin: -0.9em auto 0; aspect-ratio: 3 / 4; }
.cm-names { margin: 26px 0 8px; font-family: var(--title-font), serif; font-size: 1.3em; letter-spacing: .08em; }
.cm-names i { margin: 0 .5em; font-family: var(--label-font), serif; color: var(--muted); }

/* 폴라로이드 */
.cover-pola { padding: 60px 28px 52px; }
.cover-pola .cover-tag { color: var(--muted); }
.cover-pola .cover-title { margin: 6px 0 34px; font-size: 2.6em; color: var(--accent); }
.pola { position: relative; width: 82%; margin: 0 auto 36px; padding: 12px 12px 10px; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.18); transform: rotate(-3deg); }
.pola .cover-img { aspect-ratio: 1; height: auto; min-height: 0; }
.pola-cap { margin: 8px 0 0; font-size: 1.5em; line-height: 1.6; color: #333; }
.tape { position: absolute; z-index: 1; top: -15px; left: 50%; width: 96px; height: 28px; background: rgba(226, 208, 160, .78); transform: translateX(-50%) rotate(4deg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* 가운데 이름 */
.cover-center .cover-shade { background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.05) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.6)); }
.cover-center .cover-tag { top: 40px; }
.cc-box { position: absolute; left: 20px; right: 20px; bottom: 56px; }
.cover-center .cover-title { position: static; margin-bottom: 10px; font-size: 2.6em; text-align: center; }
.cc-names { margin: 0; font-family: var(--title-font), serif; font-size: 2em; font-weight: 400; letter-spacing: .1em; line-height: 1.4; }
.cc-names i { display: block; font-family: var(--label-font), serif; font-size: .55em; font-style: italic; opacity: .85; }
.cc-date { margin: 16px 0 0; font-family: var(--label-font), serif; letter-spacing: .2em; }
.cc-place { margin: 2px 0 0; font-size: .85em; opacity: .85; }

/* 사진 + 아래 카드 */
.ck-photo { height: 70vh; height: 70svh; min-height: 360px; max-height: 640px; }
.ck-box { position: relative; margin-top: -44px; padding: 40px 28px 44px; border-radius: 30px 30px 0 0; background-color: var(--bg); background-image: var(--texture, none); background-size: var(--texture-size, auto); background-blend-mode: var(--texture-blend, normal); }
.ck-box .cover-tag { margin-bottom: 4px; color: var(--accent); font-style: italic; }
.ck-box .cover-title { margin-bottom: 6px; font-size: 2.2em; color: var(--accent); }
.ck-box .cover-names { margin-top: 8px; }

/* 동그란 사진 + 돌아가는 글자 */
.cover-circle { padding: 60px 28px 50px; }
.cover-circle .cover-tag { margin-bottom: 26px; color: var(--accent); font-style: italic; }
.cr-wrap { position: relative; width: 86%; margin: 0 auto; aspect-ratio: 1; }
.cr-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: inv-spin 40s linear infinite; }
.cr-text text { fill: var(--accent); font-family: var(--label-font), serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.cr-photo { position: absolute; inset: 13%; overflow: hidden; border-radius: 50%; }
.cr-photo .ph { height: 100%; }

/* 큰 날짜 */
.cover-bigdate { padding: 52px 30px 46px; }
.cover-bigdate .cover-tag { margin-bottom: 24px; font-size: .85em; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.cover-bigdate .cover-photo { aspect-ratio: 4 / 5; }
.bd-date { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 26px 0 0; font-family: var(--label-font), serif; font-size: 3.6em; line-height: 1; color: var(--accent); }
.bd-date b { font-weight: 400; }
.bd-date i { width: 1px; height: .9em; background: currentColor; transform: rotate(20deg); opacity: .6; }
.cover-bigdate .cover-title { margin-top: 14px; font-size: 1.8em; }
.cover-bigdate .cover-names { margin-top: 18px; }

/* 위쪽 틈: 맨 위 띠에 날짜 · 시간을 적고 사진은 그 아래부터 */
.cover-gap .cover-img, .cover-gap .cover-shade { top: 76px; height: calc(100% - 76px); }
.cover-gap .cover-top { top: 0; z-index: 1; height: 76px; align-items: center; color: var(--text); background-color: var(--bg); background-image: var(--texture, none); background-size: var(--texture-size, auto); background-blend-mode: var(--texture-blend, normal); }
.cover-gap .cover-tag { top: 110px; }
/* 편집 중 다시 그릴 때는 등장 효과를 건너뛴다 */
.cover-anim.anim-skip > *, .cover-anim.anim-skip .cc-box > *, .cover-anim.anim-skip .ck-box > *, .cover-anim.anim-skip .cv-mid > * { animation: none; }
.cover-anim.anim-skip.anim-zoom .cover-img, .cover-anim.anim-skip.anim-focus .cover-img { animation: none; }
/* 큰 문구 위치 · 정렬 (사진을 화면 가득 채우는 배치) */
.cover-full:not(.cover-center).tp-top .cover-title { top: 104px; bottom: auto; }
.cover-full:not(.cover-center).tp-mid .cover-title { top: 50%; bottom: auto; transform: translateY(-50%); }
.cover-script.tp-mid .cover-title { transform: translateY(-50%) rotate(-5deg); }
.cover-full:not(.cover-center).tp-bot .cover-title { top: auto; bottom: 78px; }
.cover-full.cover-gap.tp-top .cover-title { top: 168px; }
.cover-center.tp-top .cc-box { top: 96px; bottom: auto; }
.cover-center.tp-mid .cc-box { top: 50%; bottom: auto; transform: translateY(-50%); }
.cover.ta-left .cover-title { text-align: left; }
.cover.ta-center .cover-title { text-align: center; }
.cover.ta-right .cover-title { text-align: right; }
/* 이름 줄바꿈: 이름 하나가 중간에서 잘리지 않게 한다 */
.nb { white-space: nowrap; }
.cover .nm-two i, .cover-sum .nm-two i { display: inline; margin: 0 .5em 0 0; }
.cover .nm-three i, .cover-sum .nm-three i { display: block; margin: 0; }
/* 메인 화면 아래 정리 상자 (이름 · 날짜 · 장소) */
.cover-sum { padding: 46px 28px 10px; }
.cs-names { margin: 0 0 14px; font-family: var(--title-font), serif; font-size: 1.5em; letter-spacing: .08em; line-height: 1.6; }
.cs-names i { margin: 0 .8em; font-size: .6em; font-style: normal; color: var(--muted); }
.cs-info { margin: 0; color: var(--muted); }
/* 큰 문구 등장: 써지듯 나타남 · 타자기 */
.tt-write .tw {
  display: inline-block; margin: -.2em -.25em; padding: .2em .25em;
  -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 220% 100% no-repeat; mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 220% 100% no-repeat;
  animation: inv-write 1.6s ease-in-out both;
}
@keyframes inv-write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.tt-type .tc { animation: inv-type .01s linear both; }
@keyframes inv-type { from { opacity: 0; } to { opacity: 1; } }
.anim-skip .tw, .anim-skip .tc { animation: none; -webkit-mask: none; mask: none; }
@media (prefers-reduced-motion: reduce) { .tt-write .tw, .tt-type .tc { animation: none; -webkit-mask: none; mask: none; } }

/* 메인 화면 움직임 */
.cover { overflow: hidden; }
@keyframes inv-zoom { from { scale: 1.16; } to { scale: 1; } }
@keyframes inv-pan { from { scale: 1.14; translate: -3% 0; } to { scale: 1.14; translate: 3% 0; } }
@keyframes inv-focus { from { filter: blur(16px); scale: 1.1; opacity: .3; } to { scale: 1; opacity: 1; } }
@keyframes inv-float { from { translate: 0 -7px; } to { translate: 0 7px; } }
@keyframes inv-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.cover-anim > *, .cover-anim .cc-box > *, .cover-anim .ck-box > *, .cover-anim .cv-mid > * { animation: inv-rise 1.3s ease backwards; }
.cover-anim > :nth-child(2), .cover-anim .cc-box > :nth-child(2), .cover-anim .ck-box > :nth-child(2), .cover-anim .cv-mid > :nth-child(2) { animation-delay: .35s; }
.cover-anim > :nth-child(3), .cover-anim .cc-box > :nth-child(3), .cover-anim .ck-box > :nth-child(3), .cover-anim .cv-mid > :nth-child(3) { animation-delay: .6s; }
.cover-anim > :nth-child(4), .cover-anim .cc-box > :nth-child(4), .cover-anim .ck-box > :nth-child(4) { animation-delay: .85s; }
.cover-anim > :nth-child(5) { animation-delay: 1.1s; }
.cover-anim > :nth-child(n+6) { animation-delay: 1.35s; }
.cover-anim > .cover-img, .cover-anim > .cover-shade, .cover-anim > .cc-box, .cover-anim > .ck-box, .cover-anim > .cv-mid, .cover-anim > .ck-photo { animation: none; }
.cover-anim.anim-zoom .cover-img { animation: inv-zoom 9s cubic-bezier(.2, .6, .2, 1) backwards; }
.cover-anim.anim-pan .cover-img { animation: inv-pan 16s ease-in-out infinite alternate; }
.cover-anim.anim-focus .cover-img { animation: inv-focus 2.6s ease backwards; }
.cover-anim.anim-float .cover-photo, .cover-anim.anim-float .pola, .cover-anim.anim-float .film, .cover-anim.anim-float .cr-wrap, .cover-anim.anim-float .ck-photo { animation: inv-float 4s ease-in-out infinite alternate; }
.cover-anim.anim-float.cover-full .cover-img { animation: inv-pan 16s ease-in-out infinite alternate; }

/* 화면 전체 효과 */
#inv-fx { position: fixed; z-index: 35; top: 0; bottom: 0; left: 50%; width: 100%; max-width: 430px; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
#inv-fx i { position: absolute; top: -6%; font-style: normal; line-height: 1; animation: inv-fall linear infinite; }
.fx-petals i { width: calc(11px * var(--s)); height: calc(8px * var(--s)); border-radius: 80% 0 80% 0; background: var(--fx, var(--accent-soft, #f3c9d2)); opacity: .85; }
.fx-cherry i { width: calc(11px * var(--s)); height: calc(8px * var(--s)); border-radius: 80% 0 80% 0; background: var(--fx, #f6c3cf); opacity: .85; }
.fx-leaves i { width: calc(14px * var(--s)); height: calc(9px * var(--s)); border-radius: 0 80% 0 80%; background: var(--fx, #c8813a); opacity: .8; }
.fx-leaves i:nth-child(3n) { background: #a8562a; }
.fx-leaves i:nth-child(3n+1) { background: #d9a441; }
.fx-confetti i { width: calc(5px * var(--s)); height: calc(10px * var(--s)); background: var(--fx, var(--accent)); opacity: .85; }
#inv-fx.fx-mono.fx-leaves i, #inv-fx.fx-mono.fx-confetti i { background: var(--fx); }
.fx-confetti i:nth-child(4n) { background: #f2c14e; }
.fx-confetti i:nth-child(4n+1) { background: #e8a0b4; }
.fx-confetti i:nth-child(4n+2) { background: #8fc1d4; border-radius: 50%; height: calc(6px * var(--s)); width: calc(6px * var(--s)); }
.fx-stars i { color: var(--fx, var(--accent)); font-size: calc(10px * var(--s)); opacity: .8; }
.fx-heartfall i { color: var(--fx, var(--accent-soft, #f3c9d2)); font-size: calc(12px * var(--s)); opacity: .85; }
.fx-rain i { width: 1px; height: calc(16px * var(--s)); background: var(--fx, var(--muted)); opacity: .35; animation-name: inv-rain !important; }
.fx-dust i { width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: var(--fx, #e3c888); box-shadow: 0 0 6px var(--fx, #e3c888); opacity: .7; }
#inv-fx.fx-bubbles i { top: auto; bottom: -6%; width: calc(12px * var(--s)); height: calc(12px * var(--s)); border: 1px solid var(--fx, var(--accent)); border-radius: 50%; animation-name: inv-rise-up; }
@keyframes inv-rain { from { transform: translateY(0); } to { transform: translateY(114vh); } }
.fx-snow i { width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: var(--fx, #fff); box-shadow: 0 0 3px rgba(0, 0, 0, .14); opacity: .9; }
#inv-fx.fx-hearts i { top: auto; bottom: -6%; color: var(--fx, var(--accent)); font-size: calc(12px * var(--s)); animation-name: inv-rise-up; }
#inv-fx.fx-sparkle i { color: var(--fx, var(--accent)); font-size: calc(11px * var(--s)); animation-name: inv-twinkle; animation-timing-function: ease-in-out; }
@keyframes inv-fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(26px, 56vh) rotate(160deg); } 100% { transform: translate(-10px, 114vh) rotate(340deg); } }
@keyframes inv-rise-up { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .5; } 100% { transform: translate(18px, -114vh); opacity: 0; } }
@keyframes inv-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .85; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #inv-fx { display: none; }
  .cover-anim *, .cr-text { animation: none !important; }
}

.form-cap { margin: 4px 2px -4px; font-size: .82em; color: var(--muted); }
.form-note { margin: -4px 2px 0; font-size: .8em; line-height: 1.6; color: var(--muted); }
.form[hidden], .fold-btn[hidden] { display: none; }
.body + .fold-btn { margin-top: 28px; }

/* ---------- 섹션 공통 */
.sec { padding: 64px 28px; }
.inv-alt .sec.sec-alt { background-color: var(--surface); background-image: var(--texture, none); background-size: var(--texture-size, auto); background-blend-mode: var(--texture-blend, normal); }
/* 이 섹션만 질감 빼기 */
.inv .no-tex { background-color: var(--bg); background-image: none; }
.inv-alt .sec.no-tex.sec-alt { background-color: var(--surface); background-image: none; }

/* 제목 없는 교통 안내 · 공지: 위 섹션에 이어 붙인다 */
.sec.sec-join { padding-top: 0; }
.sec:has(+ .sec-join) { padding-bottom: 30px; }
/* 섹션 바탕 카드 */
.sc { position: relative; padding: 36px 20px; background: var(--sc-bg, var(--surface)); }
.sc-card { border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.sc-line { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sc-bg, transparent); }
/* 찢어진 종이: 위아래 가장자리를 들쭉날쭉하게 자르고, 그 모양대로 그림자를 준다 */
.sc-torn { padding: 46px 20px; background: none; filter: drop-shadow(0 3px 7px rgba(0,0,0,.14)); }
.sc-torn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sc-bg, var(--surface));
  clip-path: polygon(0 7px, 3% 3px, 7% 8px, 11% 4px, 16% 9px, 21% 3px, 25% 7px, 30% 2px, 34% 8px, 39% 5px, 44% 10px, 48% 4px, 53% 8px, 58% 2px, 62% 7px, 67% 4px, 71% 9px, 76% 3px, 81% 8px, 85% 5px, 90% 10px, 94% 4px, 100% 8px,
    100% calc(100% - 6px), 96% calc(100% - 2px), 92% calc(100% - 8px), 87% calc(100% - 4px), 83% calc(100% - 9px), 78% calc(100% - 3px), 73% calc(100% - 7px), 69% calc(100% - 2px), 64% calc(100% - 8px), 59% calc(100% - 5px), 55% calc(100% - 10px), 50% calc(100% - 4px), 45% calc(100% - 8px), 41% calc(100% - 3px), 36% calc(100% - 9px), 31% calc(100% - 4px), 27% calc(100% - 7px), 22% calc(100% - 2px), 17% calc(100% - 8px), 12% calc(100% - 5px), 8% calc(100% - 9px), 4% calc(100% - 3px), 0 calc(100% - 7px));
}
.sc .map, .sc .cal-bg-heart { margin-left: -20px; margin-right: -20px; }
.sc .gal-slide, .sc .gal-film { margin-left: -20px; margin-right: -20px; }

/* 포인트 사진 (가로로 꽉 찬 사진) */
.sec-photo { padding: 0; }
.point { position: relative; overflow: hidden; }
.point .single-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.point .ph { height: 100%; min-height: 140px; }
.point-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 36px 20px 16px; color: #fff; font-family: var(--label-font), var(--body-font), serif; letter-spacing: .08em; background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.head { margin-bottom: 30px; }
.label { margin: 0 0 6px; font-family: var(--label-font), var(--body-font), serif; font-size: .82em; letter-spacing: .28em; color: var(--accent); }
.case-upper .label { text-transform: uppercase; }
.case-lower .label { text-transform: lowercase; }
.title { margin: 0; font-family: var(--title-font-ko), serif; font-size: 1.22em; font-weight: 400; letter-spacing: .04em; }
.head-big .label { margin-bottom: 2px; font-size: 1.75em; letter-spacing: .03em; line-height: 1.4; }
.head-big .title { font-size: .95em; color: var(--muted); }
.head-dymo .label { margin-bottom: 12px; font-size: .85em; }
.head-dymo .label span {
  display: inline-block; padding: 3px 12px 2px; border-radius: 2px; background: var(--accent); color: #fff;
  font-weight: 700; letter-spacing: .3em; text-indent: .3em; text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 -1px 0 rgba(255,255,255,.25);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18); transform: rotate(-1.5deg);
}
.orn { margin-top: 18px; color: var(--accent); font-size: 1.3em; line-height: 1; }
.orn span { display: block; }
.orn i { display: block; width: 1px; height: 64px; margin: 6px auto 0; background: var(--accent); opacity: .7; }
.body { margin: 0; }
.body + .body { margin-top: 10px; }
.rule { width: 36px; height: 1px; margin: 34px auto; background: var(--line); }
.parents p { margin: 0; }
.parents b { font-weight: 400; margin-left: .2em; }
.single { margin: 28px 0; }
.single:first-child { margin-top: 0; }
.single-img { width: 100%; border-radius: var(--photo-radius, var(--radius)); }

.btns { display: flex; gap: 8px; margin-top: 18px; }
.btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--btn-bg, var(--bg)); text-decoration: none; font-size: .9em;
}
.inv-alt .sec:not(.sec-alt) .btn { background: var(--btn-surface, var(--surface)); }
.btn-s { flex: none; min-height: 34px; font-size: .82em; }
.btn-main { width: 100%; }
.btn:disabled { opacity: .5; }
.link { margin-top: 14px; padding: 6px; border: 0; background: none; color: var(--muted) !important; font-size: .85em !important; text-decoration: underline; text-underline-offset: 3px; }

.box-outline .btn, .box-outline .acc, .box-outline .form input, .box-outline .form textarea, .box-outline .form select, .box-outline .seg span {
  border-color: var(--accent); background: transparent !important;
}
.box-outline .btn { color: var(--accent); }
.box-fill .btn { border-color: var(--accent); background: var(--btn-fill, var(--accent)) !important; color: #fff; }
/* 둥근 알약 */
.box-pill .btn, .box-pillline .btn, .box-pill .seg span, .box-pillline .seg span { border-radius: 999px; }
.box-pill .form input:not([type="radio"]), .box-pill .form select, .box-pillline .form input:not([type="radio"]), .box-pillline .form select { border-radius: 999px; padding-left: 20px; padding-right: 20px; }
.box-pill .form textarea, .box-pillline .form textarea { border-radius: 20px; padding-left: 20px; padding-right: 20px; }
.box-pill .btn { border-color: transparent; background: var(--btn-fill, var(--accent)) !important; color: #fff; }
.box-pillline .btn { border-color: var(--accent); background: transparent !important; color: var(--accent); }
/* 아이폰 버튼 */
.box-ios .btn { border: 0; border-radius: 12px; background: var(--btn-ios) !important; color: #007aff; font-weight: 600; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; }
.box-ios .seg span, .box-ios .form input:not([type="radio"]), .box-ios .form textarea, .box-ios .form select { border-color: transparent; border-radius: 12px; background: var(--btn-ios) !important; }
.box-ios .seg input:checked + span { border-color: transparent; background: #007aff !important; }
/* 그림자 · 반투명 유리 */
.box-shadow .btn { border-color: transparent; background: var(--btn-surface, var(--surface)) !important; box-shadow: 0 3px 12px rgba(0,0,0,.13); }
.box-glass .btn { border-color: rgba(255,255,255,.6); background: var(--btn-glass) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* 예식 일시 */
.date-big { margin: 0 0 4px; font-family: var(--label-font), serif; font-size: 1.9em; letter-spacing: .1em; line-height: 1.3; }
.date-en { font-size: 1.25em; letter-spacing: .06em; }
.date-ko { font-family: var(--title-font-ko), serif; font-size: 1.45em; letter-spacing: .04em; }
.date-sub { font-family: var(--label-font), var(--body-font), serif; letter-spacing: .04em; }
.cal { position: relative; margin: 30px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--label-font), var(--body-font), serif; }
.cal-bg-plain { border: 0; padding: 0; }
.cal-bg-card { padding: 22px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cal-bg, var(--surface)); }
.cal-bg-heart { margin: 14px -28px 30px; padding: 84px 44px 96px; border: 0; }
.cal-bg-heart::before { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: .32; clip-path: polygon(0 12%, 16% 2%, 36% 6%, 47% 20%, 58% 6%, 84% 0, 100% 14%, 98% 55%, 80% 82%, 50% 100%, 20% 82%, 2% 55%); }
.cal-bg-heart .cal-row { position: relative; }
.cal.cal-mark-underline .on em { width: auto; height: 1.7em; padding: 0 2px; border-radius: 0; border-bottom: 1px solid var(--accent); background: none; color: var(--accent); }
.cal.cal-mark-box .on em { border: 1px solid var(--accent); border-radius: 0; background: none; color: var(--accent); }
.cal.cal-mark-heart .on em { width: 40px; height: 40px; padding-bottom: 5px; border-radius: 0; clip-path: polygon(50% 26%, 62% 8%, 84% 4%, 98% 20%, 97% 46%, 80% 72%, 50% 96%, 20% 72%, 3% 46%, 2% 20%, 16% 4%, 38% 8%); }
.count.count-plain div { width: 70px; border: 0; }
.count.count-plain b { font-size: 1.8em; font-weight: 400; color: var(--accent); }
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.cal-head { margin-bottom: 8px; font-size: .85em; color: var(--muted); }
.cal span { display: flex; align-items: center; justify-content: center; height: 36px; }
.cal em { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-style: normal; border-radius: 50%; }
.cal .sun { color: #cf6a6a; }
.cal .on em { background: var(--accent); color: #fff; }
.count { display: flex; justify-content: center; gap: 10px; margin: 0 0 22px; }
.count div { width: 62px; padding: 10px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.3; }
.count b { display: block; font-family: var(--label-font), serif; font-size: 1.5em; font-weight: 500; }
.count span { font-family: var(--label-font), serif; font-size: .68em; letter-spacing: .14em; color: var(--muted); }

/* 오시는 길 */
.venue-name { margin: 0 0 4px; font-family: var(--title-font-ko), serif; font-size: 1.1em; }
.map { margin: 26px -28px 0; }
.map iframe { display: block; width: 100%; height: 280px; border: 0; }
.map-img { margin: 26px 0 0; }
.map-kakao { height: 280px; }
.map-tag { padding: 5px 10px; border-radius: 14px; background: #fff; color: #333; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.map .map-note { margin: 0 28px 8px; }
.map-note { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: #b4543a; text-align: left; word-break: keep-all; }

/* 안내 목록 */
.items { text-align: left; }
.item { padding: 18px 0; border-top: 1px solid var(--line); }
.item:last-child { border-bottom: 1px solid var(--line); }
.item h3 { margin: 0 0 4px; font-size: 1em; font-weight: 400; color: var(--accent); }
.item p { margin: 0; }

/* 갤러리 */
.sec-gallery { padding-left: 14px; padding-right: 14px; }
.gal { display: grid; gap: 4px; }
.gal-grid3 { grid-template-columns: repeat(3, 1fr); }
.gal-grid2 { grid-template-columns: repeat(2, 1fr); }
.gal-item { display: block; padding: 0; border: 0; background: none; aspect-ratio: 1; overflow: hidden; border-radius: var(--photo-radius, var(--radius)); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; }
.gal-masonry { display: block; columns: 2; column-gap: 6px; }
.gal-masonry .gal-item { width: 100%; margin-bottom: 6px; aspect-ratio: auto; break-inside: avoid; }
.gal-masonry .gal-item img { height: auto; }
.gal-slide, .gal-film { display: flex; margin: 0 -14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal-slide::-webkit-scrollbar, .gal-film::-webkit-scrollbar { display: none; }
.gal-slide { gap: 10px; padding: 0 28px; }
.gal-slide .gal-item { flex: 0 0 84%; aspect-ratio: 4 / 5; scroll-snap-align: center; }
.gal-film {
  gap: 8px; padding: 18px 8px; background-color: #0c0c0c; background-repeat: no-repeat; background-attachment: local;
  background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.75) 10px 17px), repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.75) 10px 17px);
  background-size: 100% 6px; background-position: 0 6px, 0 calc(100% - 6px);
}
.gal-film .gal-item { flex: 0 0 64%; aspect-ratio: 3 / 4; border-radius: 0; scroll-snap-align: center; }
.gal-polaroid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; padding: 8px 10px; }
.gal-polaroid .gal-item { aspect-ratio: auto; overflow: visible; padding: 7px 7px 26px; border-radius: 0; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.16); transform: rotate(-2.5deg); }
.gal-polaroid .gal-item:nth-child(even) { transform: rotate(2deg) translateY(10px); }
.gal-polaroid .gal-item:nth-child(3n) { transform: rotate(1deg); }
.gal-polaroid .gal-item img { aspect-ratio: 1; height: auto; }

.gal-more:not(.gal-open) .gal-x { display: none; }
.gal-more-btn { margin-top: 14px; }

/* 신랑 · 신부 소개 */
.pfs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pf-photo { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--photo-radius, var(--radius)); }
.pf-img { width: 100%; height: 100%; object-fit: cover; }
.pf-photo .ph { height: 100%; min-height: 0; }
.pf-heart {
  aspect-ratio: 1 / .94; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 84 79' preserveAspectRatio='none'%3E%3Cpath d='M50 86C20 63 9 46 9 32a20 20 0 0 1 41-6 20 20 0 0 1 41 6c0 14-11 31-41 54z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 84 79' preserveAspectRatio='none'%3E%3Cpath d='M50 86C20 63 9 46 9 32a20 20 0 0 1 41-6 20 20 0 0 1 41 6c0 14-11 31-41 54z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* 누끼 딴 사진: 사람 모양을 따라 테두리 색을 두른다 */
.pf-cutout {
  overflow: visible; border-radius: 0;
  filter: drop-shadow(var(--ow) 0 0 var(--oc)) drop-shadow(calc(-1 * var(--ow)) 0 0 var(--oc)) drop-shadow(0 var(--ow) 0 var(--oc)) drop-shadow(0 calc(-1 * var(--ow)) 0 var(--oc));
}
.pf-cutout .pf-img { object-fit: contain; object-position: center bottom; }
.pf-role { margin: 12px 0 0; font-size: .82em; letter-spacing: .1em; color: var(--muted); }
.pfs-row .pf-role { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pf-line p, .pf-name { margin: 0; font-size: .92em; line-height: 1.7; }
.pf-line b { font-weight: 400; color: var(--accent); }
.pf-body { margin: 8px 0 0; font-size: .88em; line-height: 1.75; }
.pfs-zigzag .pf { display: flex; align-items: center; gap: 18px; text-align: left; }
.pfs-zigzag .pf + .pf { margin-top: 26px; }
.pfs-zigzag .pf-rev { flex-direction: row-reverse; text-align: right; }
.pfs-zigzag .pf-photo { flex: 0 0 46%; }
.pfs-zigzag .pf-text { flex: 1; min-width: 0; }
.pfs-zigzag .pf-role { margin-top: 0; }

.lb { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb button { position: absolute; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; padding: 14px; }
.lb-x { top: 6px; right: 8px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 2px; }
.lb-next { right: 2px; }
.lb-n { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font: 13px sans-serif; opacity: .8; }

/* 계좌번호 · 연락처 */
.acc { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); text-align: left; overflow: hidden; }
.inv-alt .sec:not(.sec-alt) .acc { background: var(--surface); }
.body + .acc { margin-top: 28px; }
.acc summary { padding: 13px 16px; cursor: pointer; text-align: center; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '＋'; float: right; color: var(--muted); }
.acc[open] summary::after { content: '－'; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); line-height: 1.6; }
.rows { text-align: left; border-bottom: 1px solid var(--line); }
.rows .acc-row { padding: 12px 4px; }
.pair { display: flex; gap: 6px; }

/* 방명록 · 참석 여부 */
.form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.body + .form { margin-top: 28px; }
.form input:not([type="radio"]), .form textarea, .form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); outline: none; font-size: max(16px, .95em); /* 16px보다 작으면 아이폰이 입력할 때 화면을 확대한다 */
}
.inv-alt .sec:not(.sec-alt) .form input, .inv-alt .sec:not(.sec-alt) .form textarea, .inv-alt .sec:not(.sec-alt) .form select { background: var(--surface); }
.form textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); }
.form ::placeholder { color: var(--muted); }
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .9em; text-align: center; }
.seg input:checked + span { border-color: var(--accent); background: var(--accent) !important; color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.gb-list { margin-top: 26px; text-align: left; }
.gb { padding: 16px 2px; border-top: 1px solid var(--line); }
.gb:last-child { border-bottom: 1px solid var(--line); }
.gb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gb-top b { font-weight: 400; color: var(--accent); }
.gb-top span { font-size: .8em; }
.gb p { margin: 4px 0 0; }

/* 영상 */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--photo-radius, var(--radius)); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sec-ending .single { margin: 0 0 28px; }

.foot { padding: 28px 28px 44px; }
.foot .btns { margin: 0; }

/* 스크롤 등장 효과 */
.inv-reveal .sec > * { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.inv-reveal .sec.in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .inv-reveal .sec > * { opacity: 1; transform: none; transition: none; }
}

#inv-toast {
  position: fixed; left: 50%; bottom: 40px; z-index: 60; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px;
  background: rgba(30, 30, 30, .88); color: #fff; font: 13px/1.4 sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s;
}
#inv-toast.show { opacity: 1; }

/* 인트로(열기) 화면 — 처음 열 때 먼저 보이고, 터치하면 열리면서 메인 화면이 나온다 */
html.intro-lock, html.intro-lock body { overflow: hidden; }
#inv-intro {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 44px 28px; text-align: center; color: var(--text); cursor: pointer;
  background-color: var(--bg); background-image: var(--texture, none);
  background-size: var(--texture-size, auto); background-blend-mode: var(--texture-blend, normal);
  transition: opacity .8s ease, transform .8s cubic-bezier(.66, 0, .34, 1);
}
#inv-intro .intro-box { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 340px; animation: inv-intro-in .9s ease both; }
.intro-photo { width: min(300px, 78vw); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--photo-radius, 6px); }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; }
.intro-label { margin: 6px 0 0; font-family: var(--label-font), var(--body-font), serif; font-size: .82em; letter-spacing: .28em; color: var(--accent); }
.intro-title { margin: 2px 0 0; font-family: var(--title-font-ko), serif; font-size: 1.5em; font-weight: 400; line-height: 1.5; }
.intro-sub { margin: 0; font-family: var(--body-font), serif; font-size: .98em; line-height: 1.8; color: var(--muted); }
.intro-hint { margin-top: 10px; font-family: var(--label-font), var(--body-font), serif; font-size: .8em; letter-spacing: .1em; color: var(--muted); animation: inv-intro-pulse 1.8s ease-in-out infinite; }
@keyframes inv-intro-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes inv-intro-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.intro-fade.go { opacity: 0; }
.intro-up.go { transform: translateY(-100%); }
.intro-zoom.go { opacity: 0; transform: scale(1.25); }
#inv-intro.go .intro-box { opacity: 0; transition: opacity .35s ease; }
#inv-intro.open .intro-hint { opacity: 0; animation: none; transition: opacity .3s; }

/* 인트로 — 전체 화면 사진: 터치하면 글씨가 먼저 사라지고 사진이 천천히 걷히며 메인 화면으로 넘어간다 */
#inv-intro.look-photo { padding: 0; transition: opacity 1.8s ease-in-out; }
.look-photo.go { opacity: 0; }
.intro-full { position: absolute; inset: 0; }
.intro-full img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .42)); }
#inv-intro .intro-over { position: absolute; left: 28px; right: 28px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; gap: 8px; color: #fff; animation-delay: .3s; }
.intro-over .intro-label, .intro-over .intro-sub { color: rgba(255, 255, 255, .88); }
.intro-foot { position: absolute; left: 0; right: 0; bottom: calc(36px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.look-photo .intro-hint { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.look-photo.open .intro-shade, .look-photo.open .intro-over, .look-photo.open .intro-foot { opacity: 0; transition: opacity .5s; }

/* 인트로 — 아이폰 알림: 메인 화면 위에 알림창이 뜨고 ‘확인’을 누르면 닫힌다 */
#inv-intro.look-alert { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: default; transition: opacity .3s; }
.look-alert.go { opacity: 0; }
.ios-alert {
  width: 270px; overflow: hidden; border-radius: 14px; text-align: center; color: #000;
  background: rgba(242, 242, 247, .88); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; animation: inv-ios-in .34s cubic-bezier(.2, .9, .3, 1.15) both;
}
.ios-body { padding: 19px 16px 18px; }
.ios-body b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ios-body p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
#inv-intro .ios-btn { display: block; width: 100%; padding: 11px 0 12px; border: 0; border-top: .5px solid rgba(60, 60, 67, .3); background: none; font: inherit; font-size: 17px; color: #0a7aff; cursor: pointer; }
.ios-btn:active { background: rgba(0, 0, 0, .06); }
@keyframes inv-ios-in { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }

/* 인트로 — 봉투: 왁스·리본이 떨어지고 → 덮개가 열리고 → 카드가 올라온 뒤 메인 화면으로 */
#inv-intro .env-wrap { gap: 30px; max-width: none; }
.look-env.go, .look-envv.go { opacity: 0; }
.inv-intro { --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.env { position: relative; width: min(330px, 84vw); aspect-ratio: 10 / 7; --fh: 56%; --pk: 50%; --bt: 42%; --sw: 20%; --up: -60%; }
/* 세로 봉투는 화면을 꽉 채운다 */
#inv-intro.look-envv { padding: 0; overflow: hidden; }
#inv-intro.look-envv .env-wrap { position: relative; width: 100%; height: 100%; gap: 0; animation: none; }
.env-envv { width: 100%; height: 100%; aspect-ratio: auto; --fh: 41%; --pk: 39%; --bt: 33%; --sw: min(34vw, 150px); --up: -36%; transition: transform 1s cubic-bezier(.55, 0, .2, 1); }
.look-envv.open .env-envv { transform: translateY(21%) scale(.72); }
.look-envv .intro-hint { position: absolute; left: 0; right: 0; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); z-index: 6; }
.env > * { position: absolute; }
.env-back { inset: 0; z-index: 0; border-radius: 3px; background: var(--paper), var(--env); filter: brightness(.86); box-shadow: 0 18px 40px rgba(0, 0, 0, .2); }
.env-card {
  left: 6%; right: 6%; top: 4%; bottom: 4%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 7%; overflow: hidden; border-radius: 2px; background: var(--paper), #fffdf9; color: #3b3632; box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
  transition: transform 1.2s cubic-bezier(.3, .7, .3, 1);
}
.env-card-img { width: 100%; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 2px; }
.env-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.env-card-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.env-card .intro-label { margin: 0; font-size: .62em; }
.env-card .intro-title { margin: 0; font-family: var(--intro-script), var(--title-font-ko), serif; font-size: 1.5em; line-height: 1.3; }
.env-card .intro-sub { font-size: .78em; line-height: 1.55; }
.env-envv .env-card .intro-title { font-size: 1.75em; }
/* 카드가 올라왔을 때 보이는 위쪽에 글씨가 오도록 */
.env-envv .env-card { justify-content: flex-start; padding-top: 14%; }
.env-envv .env-card-img { flex: 0 1 62%; }
.card-up .env-card { transform: translateY(var(--up)); }
.env-pocket { inset: 0; z-index: 3; filter: drop-shadow(0 -1px 1.2px rgba(0, 0, 0, .1)); }
.env-pocket i { position: absolute; inset: 0; background: var(--paper), var(--env); }
.env-l { clip-path: polygon(0 0, 50% var(--pk), 0 100%); filter: brightness(.975); }
.env-r { clip-path: polygon(100% 0, 50% var(--pk), 100% 100%); filter: brightness(.965); }
.env-b { clip-path: polygon(0 100%, 50% var(--bt), 100% 100%); }
.env-text {
  left: 8%; right: 8%; top: 64%; z-index: 3; margin: 0; text-align: center; color: var(--env-ink);
  font-family: var(--intro-script), var(--title-font-ko), serif; font-size: 1.5em; line-height: 1.35;
}
.env-envv .env-text { top: 62%; font-size: 2.1em; }
.env-flapw { inset: 0; z-index: 4; perspective: 1600px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .13)); }
.env-flap {
  position: absolute; inset: 0; transform-origin: 50% 0; transition: transform .75s ease-in-out .25s, filter .75s;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(0, 0, 0, .025)), var(--paper), var(--env);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.look-envv .env-flap { transition-delay: .6s; }
.open .env-flap { transform: rotateX(180deg); filter: brightness(.9); }
.flap-back .env-flapw { z-index: 1; }
.env-seal { left: 50%; top: var(--fh); z-index: 5; width: var(--sw); transform: translate(-50%, -56%); transition: opacity .4s, transform .45s; }
.env-wax { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .28)) drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); }
.open .env-seal { opacity: 0; transform: translate(-50%, -64%) scale(1.06); }
.env-ribbon { inset: 0; z-index: 5; color: var(--seal); pointer-events: none; transition: opacity .4s, transform .5s; }
.env-band { position: absolute; top: 0; bottom: 0; left: 50%; width: 3.2%; transform: translateX(-50%); background: currentColor; box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .06); }
.env-envv .env-band { width: 2.4%; }
.env-bow { position: absolute; left: 50%; top: var(--fh); width: calc(var(--sw) * 2); transform: translate(-50%, -37%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22)); }
.env-tag {
  position: absolute; left: 50%; top: calc(var(--fh) + 14%); transform: translateX(-50%); padding: 2px 16px; border: 1px solid currentColor; border-radius: 50%;
  background: var(--env); color: var(--env-ink); font-family: var(--intro-script), serif; font-size: 1.1em; text-align: center; white-space: nowrap;
}
.open .env-ribbon { opacity: 0; transform: translateY(14px); }

#inv-music {
  position: fixed; top: 14px; right: max(14px, calc(50% - 201px)); z-index: 40; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .78); color: #444; font-size: 16px; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); opacity: .6;
}
#inv-music.on { opacity: 1; animation: inv-spin 4s linear infinite; }
@keyframes inv-spin { to { transform: rotate(360deg); } }