/* ═══════════════════════════════════════════════════════════════
   레이아웃과 부품.

   크기·자간·여백은 전부 tokens.css 의 토큰에서 가져옵니다.
   여기에 새 숫자를 직접 적지 마세요. 필요하면 토큰을 늘리세요.
   ═══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 화면 넘김은 JS 가 직접 합니다. 문서는 스크롤할 게 없어서, 맨 위에서
   아래로 당기면 크롬이 '더 당김'으로 보고 새로고침을 띄웁니다. 끕니다. */
html, body{overscroll-behavior-y:none}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-md);
  line-height:var(--lh-body); letter-spacing:var(--ls-ko);
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
[hidden]{display:none !important}

/* 화면이 청첩장보다 넓으면 종이 카드처럼 보이게 합니다 */
@media (min-width:540px){
  body{background:#DCD5C3}
  .deck{box-shadow:0 0 0 1px rgba(21,18,15,.06), 0 18px 50px rgba(21,18,15,.09)}
}

/* ═══ 한 화면씩 넘어가기 ═══════════════════════════════════
   브라우저 스크롤 스냅에 맡기면 기기에 따라 관성 때문에 두 장씩
   지나갑니다. 위치를 직접 옮깁니다. (app.js 의 wireDeck)

   높이는 100svh(주소창이 있을 때의 높이)에 묶습니다. 상수라
   주소창이 오가도 변하지 않고, 남는 높이는 아래 막대가 흡수합니다. */
.deck{
  position:fixed; left:0; right:0; top:0; height:100lvh;
  max-width:var(--page); margin-inline:auto;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg);
}
.rail{
  flex:0 0 auto; height:calc(100svh - var(--nav-h));
  position:relative; overflow:hidden; touch-action:pan-y;
}
.rail__inner{
  will-change:transform;
  transition:transform .52s cubic-bezier(.32,.72,.24,1);
}
.rail.is-dragging .rail__inner{transition:none}

.scr{
  height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column;
  padding:var(--sec-y) var(--gutter);
  position:relative; overflow:hidden;
  container-type:inline-size;
}
/* 세로 가운데 맞춤. 자리가 모자라면 아래로만 넘칩니다. */
.scr:not(.cover)::before,
.scr:not(.cover)::after{content:''; display:block; flex:0 0 auto}
.scr:not(.cover)::before{margin-top:auto}
.scr:not(.cover)::after{margin-bottom:auto}

/* 장 안의 세로 간격은 이 세 값이 정합니다. 화면이 짧아 장이
   넘치면 measure() 가 d1 → d2 → d3 순으로 간격을 조입니다.
   글자 크기는 맨 마지막에만 건드립니다 — 읽기 어려워지는 것보다
   여백이 좁아지는 편이 낫습니다. */
.scr{--gap-block:var(--s5); --gap-cta:var(--s6); --row-y:var(--s3)}
.scr.d1{--gap-block:var(--s4); --gap-cta:var(--s5); --row-y:10px}
.scr.d2{--gap-block:var(--s3); --gap-cta:var(--s4); --row-y:var(--s2)}
.scr.d3{--gap-block:var(--s2); --gap-cta:var(--s3); --row-y:var(--s2)}
.scr.d3 .poem{font-size:var(--t-md); line-height:var(--lh-body)}

.scr--paper{background:var(--paper)}
.scr--album{background:var(--paper)}
.scr--red{background:var(--accent); color:var(--paper)}

/* 여백을 다 줄여도 넘치는 장만 안에서 스크롤합니다 */
.scr.is-tall{overflow-y:auto; -webkit-overflow-scrolling:touch}

@supports not (height: 100svh){
  .deck{height:100vh}
  .rail, .scr{height:calc(100vh - var(--nav-h))}
}

/* 화면을 눕히거나 아주 낮으면 통째로 이어 붙여 보여줍니다 */
@media (max-height:460px){
  .deck{position:static; display:block; height:auto; overflow:visible}
  .rail{height:auto; overflow:visible}
  .rail__inner{transform:none !important}
  .scr{height:auto; min-height:0}
  .nav{display:none}
}

/* ═══ 아래 막대 ═════════════════════════════════════════════
   덱은 100lvh, 통로는 100svh − 56px. 주소창이 숨어 화면이 커지면
   남는 높이를 이 막대가 흡수하고, 버튼은 늘 위쪽 56px 안에 있습니다. */
.nav{
  flex:1 1 auto; min-height:var(--nav-h);
  display:flex; align-items:flex-start;
  background:var(--bg); border-top:1px solid var(--line);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.nav button{
  flex:1; height:var(--nav-h); appearance:none; border:0;
  background:transparent; cursor:pointer; padding:0 2px;
  font-family:var(--myeongjo); font-size:var(--t-xs);
  letter-spacing:var(--ls-ko); color:var(--faint);
  transition:color .25s var(--ease);
}
.nav button span{position:relative; display:inline-block; padding-bottom:var(--s1)}
.nav button[aria-current="true"]{color:var(--accent)}
.nav button[aria-current="true"] span::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accent);
}
.nav button:focus-visible{outline:2px solid var(--accent); outline-offset:-4px}

/* 배경음악 — 네비 오른쪽 끝. 화면 위쪽 구석에 띄우면 표지의 확대
   버튼이나 각 장의 제목과 겹칩니다.
   처음엔 꺼져 있어서, 흐린 아이콘으로 두면 음악이 있는지조차 모릅니다.
   칸 전체를 강조색으로 채워 눈에 띄게 하고, 켜짐/꺼짐은 아이콘
   (물결 / ×)으로 구분합니다. */
.nav .bgm{
  flex:0 0 48px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--paper);
}
.nav .bgm[hidden]{display:none}
.nav .bgm:focus-visible{outline:2px solid var(--ink); outline-offset:-4px}
.bgm svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.bgm .bgm__on{display:none}
.bgm[aria-pressed="true"] .bgm__on{display:inline}
.bgm[aria-pressed="true"] .bgm__off{display:none}

.deck[data-tone="red"] .nav{background:var(--deep); border-top-color:rgba(244,240,230,.25)}
.deck[data-tone="red"] .nav button{color:#E7C8CE}
.deck[data-tone="red"] .nav button[aria-current="true"]{color:#fff}
.deck[data-tone="red"] .nav button[aria-current="true"] span::after{background:#fff}
.deck[data-tone="red"] .nav .bgm{color:#fff}
.deck[data-tone="paper"] .nav{background:var(--paper)}

/* ═══ 공통 조판 ═════════════════════════════════════════════ */

/* 포스터 테두리 글자 — 이 청첩장에서 가장 고유한 요소입니다.
   6% 로는 있으나 마나였습니다. 읽히는 세기까지 올립니다. */
.edge{
  position:absolute; top:0; bottom:0; display:flex; align-items:center;
  writing-mode:vertical-rl; pointer-events:none; user-select:none;
  font-family:var(--serif); font-size:clamp(30px,11cqw,54px);
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink); opacity:.11; white-space:nowrap;
}
.edge--l{left:-.16em; transform:rotate(180deg)}
.edge--r{right:-.16em}
.scr--red .edge{color:var(--paper); opacity:.12}

/* 영문 레이블 — 화면 제목과 소제목에만 씁니다.
   내용 안에서는 한글을 쓰세요. 한 화면에 영문 레이블이 여럿이면
   무엇이 상위인지 알 수 없게 됩니다. */
.eyebrow, .sub{
  display:flex; align-items:baseline; gap:var(--s3);
  font-family:var(--serif); font-size:var(--t-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--accent); flex:0 0 auto;
}
.eyebrow{margin:0 0 var(--gap-block, var(--s5))}
/* 위 글과 조금 더 떨어뜨립니다 — 새 덩어리가 시작됨을 알립니다 */
.sub{margin:calc(var(--gap-block, var(--s5)) + var(--s2)) 0 var(--s3)}
.eyebrow i, .sub i{
  flex:1; height:1px; background:currentColor;
  opacity:.4; transform:translateY(-3px);
}
.scr--red .eyebrow{color:#EFD6C6}

/* 본문 */
.copy{
  margin:0; font-size:var(--t-sm); line-height:var(--lh-body);
  color:var(--muted); white-space:pre-line;
}
.scr--red .copy{color:#F3E6DB}

/* ═══ 버튼 ══════════════════════════════════════════════════ */
.pill{
  appearance:none; cursor:pointer; display:inline-block; text-align:center;
  border:1px solid currentColor; border-radius:999px;
  background:transparent; color:var(--ink); text-decoration:none;
  font-family:var(--myeongjo); font-size:var(--t-md);
  letter-spacing:.08em; padding:var(--s3) var(--s6);
  transition:.3s var(--ease);
}
.pill:hover{background:var(--ink); color:var(--paper)}
.pill:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.pill[disabled]{opacity:.5; cursor:default}
.pill--lg{padding:var(--s3) var(--s7)}
.pill--sm{font-size:var(--t-sm); padding:var(--s2) var(--s4); letter-spacing:.04em}
.pill--solid{background:var(--accent); border-color:var(--accent); color:#fff}
.pill--solid:hover{background:var(--deep); border-color:var(--deep); color:#fff}
.scr--red .pill{color:var(--paper)}
.scr--red .pill:hover{background:var(--paper); color:var(--accent)}

/* ═══ 01 표지 ═══════════════════════════════════════════════ */
.cover{padding:0}
.shot{flex:1 1 auto; min-height:0; position:relative; overflow:hidden; background:var(--bg)}
/* 두 장 모두 잘라내지 않고 통째로 보여줍니다.
   cover 로 채우면 화면 비율에 따라 아치 가장자리가 잘립니다.
   남는 자리는 크림색인데, 잡지 표지는 배경이 같은 색이라 안 보이고
   커버 사진은 인쇄된 판처럼 앉습니다. */
.shot > img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  animation:shotIn 1.1s var(--ease) both;
}
@keyframes shotIn{from{opacity:0; transform:scale(1.05)}}
@keyframes swap{from{opacity:0}}
@keyframes riseIn{from{opacity:0; transform:translateY(10px)}}

.shot__more{
  position:absolute; right:var(--s3); top:var(--s3); z-index:2;
  appearance:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(21,18,15,.16);
  background:rgba(244,240,230,.86); color:var(--ink);
  font-size:var(--t-sm); backdrop-filter:blur(3px);
  animation:riseIn .8s var(--ease) .5s both;
}
.shot__more:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.cover__foot{
  flex:0 0 auto; display:flex; justify-content:center;
  background:var(--bg);
  padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
}
.dots{display:flex; gap:var(--s2); animation:riseIn .8s var(--ease) .45s both}
.dots button{
  appearance:none; border:0; cursor:pointer; padding:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--line); transition:.25s var(--ease);
}
.dots button[aria-pressed="true"]{background:var(--accent); transform:scale(1.25)}
.dots button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.veil__rule{width:26px; height:1px; background:var(--accent); border:0; margin:0}
.cover__foot .pill{animation:riseIn .8s var(--ease) .62s both}

/* ═══ 02 인사말 · 식순 ══════════════════════════════════════ */
.poem{
  margin:0; flex:0 0 auto; white-space:pre-line; text-align:center;
  font-family:var(--myeongjo); font-weight:400;
  font-size:var(--t-lg); line-height:var(--lh-poem); letter-spacing:var(--ls-ko-lg);
}
.signoff{
  margin:var(--gap-block, var(--s5)) 0 0; flex:0 0 auto; text-align:center;
  font-family:var(--myeongjo); font-size:var(--t-sm);
  line-height:var(--lh-body); color:var(--muted);
}
.signoff b{font-weight:400; color:var(--ink); font-size:var(--t-md)}
.signoff em{font-style:normal; color:var(--accent); padding:0 var(--s1)}

/* 날짜 한 줄 — 표시용 숫자라 Prata 를 씁니다 */
.dateline{
  display:flex; align-items:center; gap:var(--s3); flex:0 0 auto;
  /* 아래 여백은 혼주 위 여백과 같게 둡니다. 다르면 시가 위아래로
     치우쳐 보입니다. 위 여백은 가운데 맞춤이 알아서 냅니다. */
  margin:0 0 var(--gap-block, var(--s5));
  font-family:var(--serif); font-size:var(--t-md);
  letter-spacing:var(--ls-num); color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dateline i{flex:1; height:1px; background:var(--accent); opacity:.45}

/* 인사말 아래 참석 버튼 */
.cta{margin:var(--gap-cta, var(--s6)) 0 0; flex:0 0 auto; text-align:center}
/* 마지막 장의 참석 버튼과 같은 비율 — 폭을 다 씁니다 */
.cta .pill{display:block; width:100%; padding-inline:var(--s4); border-color:var(--accent); color:var(--accent)}
.cta .pill:hover{background:var(--accent); color:#fff}
.cta__note{margin:var(--s3) 0 0; font-size:var(--t-sm); color:var(--faint)}

/* ═══ 식순 ═════════════════════════════════════════════════
   시각은 왼쪽에 Prata 숫자로 세우고, 가는 척추선이 점들을 잇습니다.
   선은 첫 점에서 시작해 마지막 점에서 끝납니다. '본식' 한 곳만
   채운 점에 고리를 둘러 강조합니다. */
.prog{
  list-style:none; margin:0; padding:0; flex:0 0 auto;
  --dot-y: calc(var(--row-y, var(--s3)) + 11px);   /* 줄 위 여백 + 글줄 절반 */
}
.prog__i{
  position:relative;
  display:grid; grid-template-columns:50px 16px 1fr; column-gap:var(--s2);
  padding:var(--row-y, var(--s3)) 0;
}
.prog__i::before{
  content:''; position:absolute; top:0; bottom:0; width:1px;
  left:calc(50px + var(--s2) + 7.5px); background:var(--line);
}
.prog__i:first-child::before{top:var(--dot-y)}
.prog__i:last-child::before{bottom:calc(100% - var(--dot-y))}

.prog__time{
  align-self:start; font-family:var(--serif); font-size:var(--t-md);
  line-height:var(--lh-tight); letter-spacing:var(--ls-num);
  font-variant-numeric:tabular-nums; color:var(--faint);
}
.prog__dot{
  align-self:start; height:calc(var(--t-md) * var(--lh-tight));
  display:flex; align-items:center; justify-content:center;
}
.prog__dot::after{
  content:''; position:relative; z-index:1; width:6px; height:6px;
  border-radius:50%; border:1px solid var(--accent); background:var(--bg);
}
.prog__i.is-key .prog__time{color:var(--accent)}
.prog__i.is-key .prog__dot::after{
  width:7px; height:7px; background:var(--accent);
  box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--accent);
}
.prog__body{min-width:0}
.prog__title{
  margin:0; font-family:var(--myeongjo); font-size:var(--t-md);
  line-height:var(--lh-tight); letter-spacing:var(--ls-ko); color:var(--ink);
}
.prog__i.is-key .prog__title{font-weight:700; color:var(--accent)}
.prog__desc{
  margin:var(--s1) 0 0; font-size:var(--t-sm); line-height:var(--lh-tight);
  letter-spacing:var(--ls-ko); color:var(--muted);
}
/* 메뉴 보기 — 버튼이 아니라 글줄 속 링크처럼. 밑줄 하나로 충분합니다. */
.prog__link{
  appearance:none; cursor:pointer; border:0; background:transparent;
  display:inline-block; margin-left:var(--s3); padding:0 0 1px; vertical-align:1px;
  font-family:var(--sans); font-size:var(--t-sm); line-height:1.3;
  letter-spacing:var(--ls-ko); color:var(--accent);
  border-bottom:1px solid currentColor;
}
.prog__link::after{content:'  →'; white-space:pre}
.prog__link:hover{color:var(--deep)}
.prog__link:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.leg{
  display:block; margin-top:var(--s3); font-style:normal;
  font-size:var(--t-sm); color:var(--muted);
}
.leg:first-child{margin-top:0}

/* ═══ 03 오시는 길 ══════════════════════════════════════════ */
.venue{margin:0 0 var(--s4); flex:0 0 auto}
.venue h2{
  margin:0; font-family:var(--myeongjo); font-weight:400;
  font-size:var(--t-xl); line-height:var(--lh-tight); letter-spacing:var(--ls-ko-lg);
  text-wrap:balance;
}
/* 홀 이름과 주소는 한 줄에. 예식장 이름과 붙이면 스무 자가 넘어
   두 줄로 접힙니다. */
.venue p{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2);
  margin:var(--s2) 0 0; font-size:var(--t-sm); color:var(--muted);
}
/* 주소를 옮겨 적는 일은 길 안내 실행과 성격이 달라 띠에서 뺐습니다 */
.venue__copy{
  appearance:none; cursor:pointer; flex:0 0 auto;
  border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--accent);
  font-size:var(--t-xs); letter-spacing:var(--ls-ko); padding:2px var(--s3);
}
.venue__copy:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.venue__copy:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.map{
  width:100%; flex:1 1 auto; min-height:190px;
  background:var(--sunk); border:1px solid var(--line);
  overflow:hidden; position:relative;
}
.map iframe{width:100%; height:100%; border:0; display:block}
.map__still{width:100%; height:100%; object-fit:cover; display:block}
.map__credit{
  position:absolute; right:var(--s2); bottom:var(--s1); margin:0;
  font-size:9px; color:var(--faint); letter-spacing:0;
  background:rgba(244,240,230,.72); padding:1px var(--s1);
}
.map.is-empty{display:none}
.map__home{
  position:absolute; left:var(--s2); top:var(--s2); z-index:2;
  appearance:none; cursor:pointer;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line);
  font-family:var(--myeongjo); font-size:var(--t-xs);
  letter-spacing:var(--ls-ko); padding:var(--s1) var(--s3);
  box-shadow:0 1px 5px rgba(21,18,15,.16);
}
.map__home:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.map__home:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.map__pin{
  background:var(--accent); color:#fff; white-space:nowrap;
  font-family:var(--myeongjo); font-size:var(--t-xs);
  padding:var(--s1) var(--s2); transform:translate(-50%,-100%);
  box-shadow:0 2px 8px rgba(21,18,15,.25);
}

/* 지도 아래 두 줄.
   회색 테두리 상자를 위아래로 겹쳐 놓으니 같은 부품이 두 번 놓인
   것처럼 보였습니다. 사이트 전체와 같은 알약 하나로 통일하고,
   채움(길 안내 실행)과 외곽선(정보 보기)으로 위계를 줍니다. */
.acts{
  display:flex; justify-content:center; gap:var(--s2);
  flex:0 0 auto; margin:var(--s4) 0 var(--s3);
}
.acts .pill{min-width:112px}

.ways{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:var(--s2); flex:0 0 auto;
}
.ways .pill{
  border-color:var(--line); color:var(--muted);
  min-width:70px; padding-inline:var(--s3);
}
.ways .pill:hover{background:var(--accent); border-color:var(--accent); color:#fff}

/* 안내 팝업 안쪽 */
.sheet__title{
  margin:0; font-family:var(--myeongjo); font-weight:400;
  font-size:var(--t-xl); letter-spacing:var(--ls-ko-lg); line-height:1.2;
}
.sheet__text{margin:0; font-size:var(--t-md); line-height:var(--lh-body)}

/* 식사 메뉴 — 코스 차림표. 가운데 맞춤, 영문은 Prata, 한글은 명조.
   한 코스에 요리가 둘이면 같은 무게로 나란히. 코스 사이는 짧은
   크림슨 선 하나뿐입니다. 번호도 상자도 없습니다. */
.modal[data-kind="menu"] .modal__panel{padding-top:var(--s6)}
.modal[data-kind="menu"] .modal__head{justify-content:center; position:relative; margin-bottom:0}
.modal[data-kind="menu"] .modal__x{position:absolute; right:0; top:-4px}
.modal[data-kind="menu"] .sheet__title{
  font-family:var(--serif); font-size:var(--t-2xl); line-height:1;
  letter-spacing:var(--ls-label); text-indent:var(--ls-label); text-transform:uppercase;
}
.menu__sub{
  margin:var(--s3) 0 0; text-align:center;
  font-family:var(--myeongjo); font-size:var(--t-sm);
  letter-spacing:var(--ls-ko); color:var(--muted);
}
.menu{list-style:none; margin:var(--s5) 0 0; padding:0; text-align:center}
.course{padding:var(--s4) 0}
.course + .course{position:relative; padding-top:calc(var(--s4) + var(--s3))}
.course + .course::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:1px; background:var(--accent); opacity:.7;
}
.dish + .dish{margin-top:var(--s3)}
.dish p{margin:0; text-wrap:balance}
.dish__en{
  font-family:var(--serif); font-size:var(--t-md); line-height:var(--lh-tight);
  letter-spacing:.01em; color:var(--ink);
}
.dish__ko{
  margin-top:2px !important; font-family:var(--myeongjo); font-size:var(--t-sm);
  line-height:var(--lh-tight); letter-spacing:var(--ls-ko); color:var(--muted);
}
.menu__note{
  margin:var(--s5) 0 0; text-align:center;
  font-size:var(--t-xs); letter-spacing:var(--ls-ko); color:var(--faint);
}

/* 오시는 길 팝업 안쪽 */
.sheet__leg{margin:var(--s4) 0 0; font-size:var(--t-sm); color:var(--muted)}
.sheet__leg:first-child{margin-top:0}
/* 본 안내에 덧붙이는 줄 */
.sheet__note{
  margin:var(--s4) 0 0; padding:var(--s3) var(--s4);
  background:var(--sunk); border-left:2px solid var(--accent);
  font-size:var(--t-sm); line-height:var(--lh-body); color:var(--muted);
}
.chips{
  display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s2) 0 0;
  font-family:var(--sans); font-size:var(--t-md);
  letter-spacing:var(--ls-num); font-variant-numeric:tabular-nums; color:var(--ink);
}
.chips span{border:1px solid var(--line); background:var(--bg); padding:var(--s1) var(--s3)}
.times{
  margin:var(--s2) 0 0; font-family:var(--sans); font-size:var(--t-md);
  letter-spacing:var(--ls-num); font-variant-numeric:tabular-nums; color:var(--ink);
}

/* ═══ 04 앨범 ═══════════════════════════════════════════════ */
/* 정사각형 3열. 화면에 온전히 들어가는 줄까지만 깔고 잘라냅니다.

   격자 안에서 따로 스크롤하게 두면, 격자가 화면의 거의 전부를
   덮고 있어서 다음 장으로 넘어가려는 손짓까지 격자가 먹습니다.
   끝에 닿으면 넘어가긴 하지만 그걸 알 길이 없으니 갇힌 느낌이
   듭니다. 한 손짓을 두 개의 스크롤이 다투는 게 원인이라, 안쪽
   스크롤을 아예 두지 않았습니다. 이제 앨범도 다른 장과 똑같이
   손짓 한 번에 넘어갑니다.

   못 담은 사진은 마지막 칸의 +N 을 눌러 크게 보기로 이어 봅니다. */
.album{
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s1); align-content:start;
}
/* 비율은 버튼이 아니라 이미지에 겁니다.
   버튼은 브라우저가 특별하게 다루는 요소라, 버튼의 높이에 대한
   자식의 백분율 높이(height:100%)가 제대로 잡히지 않습니다.
   그러면 사진이 원래 비율대로 늘어나 칸 밖으로 삐져나옵니다. */
.album button{
  appearance:none; border:0; padding:0; margin:0; cursor:pointer;
  display:block; min-width:0; line-height:0;
  overflow:hidden; background:var(--sunk);
}
.album img{
  display:block; width:100%; aspect-ratio:1; object-fit:cover;
}
.album button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* .album button 의 display:block 이 브라우저 기본 [hidden] 을 이기므로
   접은 칸을 직접 숨겨 줍니다. */
.album button[hidden]{display:none}

.album__wrap{flex:1 1 auto; min-height:0; display:flex}

/* 마지막 칸에 남은 장수를 얹습니다. 눌러 크게 보기로 이어 봅니다. */
.album .more{position:relative}
.album .more::after{
  content:attr(data-more);
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(21,18,15,.52); color:var(--paper);
  font-family:var(--serif); font-size:var(--t-xl); line-height:1;
  letter-spacing:var(--ls-num);
}

/* ═══ 05 참석 · 연락처 · 인사 ═══════════════════════════════ */
.finale{text-align:center}

.finale__mark{
  margin:0; font-family:var(--serif); font-size:var(--t-2xl);
  line-height:1; color:var(--paper);
}
.finale__names{
  margin:var(--s3) 0 0; font-family:var(--myeongjo);
  font-size:var(--t-md); letter-spacing:var(--ls-ko); color:var(--paper);
}
/* 계좌 접이와 Thank you 사이 — 선 대신 여백만 둡니다 */
.finale .folds{margin-bottom:var(--gap-cta, var(--s6))}
/* 마지막에 한 번 더 — 응답이 있으면 rsvp.js 가 '응답 수정하기'로 바꿉니다 */
/* 주된 행동 하나 — 아래 작은 테두리 버튼 셋과 헷갈리지 않게,
   크림색으로 채운 넓은 버튼으로 둡니다. */
.finale__rsvp{margin:var(--gap-block, var(--s5)) 0 var(--s3); flex:0 0 auto}
.finale .finale__rsvp .pill{
  display:block; width:100%; padding:var(--s3) var(--s4);
  background:var(--paper); border-color:var(--paper); color:var(--accent);
}
.finale .finale__rsvp .pill:hover{background:#fff; border-color:#fff; color:var(--deep)}

/* 계좌를 말없이 늘어놓으면 받으러 온 것처럼 보입니다.
   무엇인지, 왜 두었는지 먼저 밝힙니다. 제목이 크고 안내는 낮게. */
.gift{
  margin:0 0 var(--s2); flex:0 0 auto;
  font-family:var(--myeongjo); font-weight:400; font-size:var(--t-xl);
  line-height:var(--lh-tight); letter-spacing:var(--ls-ko-lg); color:var(--paper);
}
.gift__note{
  margin:0 0 var(--gap-block, var(--s5)); flex:0 0 auto;
  font-size:var(--t-sm); line-height:var(--lh-tight);
  letter-spacing:var(--ls-ko); color:#E7C8CE;
}

/* 신부측·신랑측 — 접혀 있다가 누르면 펼쳐집니다.
   오른쪽의 + 는 펼치면 − 가 됩니다. */
.folds{flex:0 0 auto; text-align:left}
.fold{border-top:1px solid rgba(244,240,230,.28)}
.fold:last-child{border-bottom:1px solid rgba(244,240,230,.28)}
.fold__head{
  appearance:none; width:100%; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) 0; color:var(--paper);
  font-family:var(--myeongjo); font-size:var(--t-md); letter-spacing:var(--ls-ko);
}
.fold__head:focus-visible{outline:2px solid var(--paper); outline-offset:-4px}
.fold__x{position:relative; width:12px; height:12px; flex:0 0 auto; margin-right:2px}
.fold__x::before, .fold__x::after{
  content:''; position:absolute; left:0; top:50%; width:100%; height:1px;
  background:currentColor; transition:transform .3s var(--ease);
}
.fold__x::after{transform:rotate(90deg)}
.fold.is-open .fold__x::after{transform:rotate(0)}
.fold__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
.fold.is-open .fold__panel{grid-template-rows:1fr}
.fold__inner{overflow:hidden; min-height:0}
.fold__inner > :last-child{padding-bottom:var(--s3)}

.who{display:flex; align-items:center; gap:var(--s3); padding:var(--s1) 0}
.who__role{
  flex:0 0 58px; font-size:var(--t-xs); color:#E3C3CA;
}
.who__name{
  flex:0 0 auto; margin:0; font-family:var(--myeongjo); font-size:var(--t-md);
  line-height:var(--lh-tight); letter-spacing:var(--ls-ko); color:var(--paper);
}
/* 계좌번호 — 이름과 복사 버튼 사이. 오른쪽에 맞춰 줄마다 가지런합니다.
   기능적인 숫자라 본문 글꼴을 쓰고, 자릿수를 고르게 둡니다. */
.who__acc{
  flex:1 1 auto; min-width:0; margin:0; text-align:right;
  font-family:var(--sans); font-size:var(--t-xs);
  letter-spacing:var(--ls-num); font-variant-numeric:tabular-nums;
  color:#F0D9DE; overflow-wrap:anywhere;
}
.who .pill{
  flex:0 0 auto; margin-left:auto;
  font-size:var(--t-xs); padding:var(--s1) var(--s3); letter-spacing:0;
}

.btnrow{display:flex; gap:var(--s2); flex:0 0 auto}
.btnrow .pill{flex:1; padding-inline:0}

/* ═══ 사진 크게 보기 ════════════════════════════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:50; background:rgba(15,13,11,.96);
  display:flex; align-items:center; justify-content:center;
}
.lightbox img{max-width:100%; max-height:100dvh; object-fit:contain}
.lightbox__x, .lightbox__nav{
  position:absolute; appearance:none; border:0; background:transparent;
  color:var(--paper); cursor:pointer; line-height:1;
  width:56px; height:56px; display:grid; place-items:center;
}
.lightbox__x{top:calc(var(--s2) + env(safe-area-inset-top)); right:var(--s2); font-size:var(--t-xl)}
.lightbox__nav{font-size:var(--t-3xl); top:50%; transform:translateY(-50%)}
.lightbox__nav--prev{left:0}
.lightbox__nav--next{right:0}
.lightbox__count{
  position:absolute; bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  left:0; right:0; text-align:center; margin:0; color:#C6BCA9;
  font-family:var(--sans); font-size:var(--t-sm);
  letter-spacing:var(--ls-num); font-variant-numeric:tabular-nums;
}
.lightbox__x:focus-visible, .lightbox__nav:focus-visible{outline:2px solid var(--accent)}

/* ═══ 참석 의사 팝업 ════════════════════════════════════════ */
.modal{position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center}
.modal__scrim{position:absolute; inset:0; background:rgba(21,18,15,.55); border:0; padding:0; cursor:pointer}
.modal__panel{
  position:relative; width:100%; max-width:var(--page);
  max-height:88dvh; overflow-y:auto; background:var(--paper); color:var(--ink);
  padding:var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
  animation:riseIn .35s var(--ease);
}
.modal__head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--s4)}
.modal__title{
  margin:0; font-family:var(--serif); font-size:var(--t-xl);
  letter-spacing:var(--ls-label); line-height:1;
}
.modal__head p{margin:var(--s2) 0 0; font-size:var(--t-sm); color:var(--muted)}
.modal__x{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-size:var(--t-lg); line-height:1; color:var(--muted); padding:0 0 0 var(--s3);
}
.modal__x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.modal__editing{
  margin:0 0 var(--s1); padding:var(--s3); background:var(--sunk);
  font-size:var(--t-sm); line-height:var(--lh-tight);
  color:var(--muted); border-left:2px solid var(--accent);
}
.modal__foot{margin:var(--s4) 0 0; text-align:center; font-size:var(--t-sm); color:var(--muted)}

.field{margin-top:var(--s5)}
.field > span, .field > label{
  display:block; margin-bottom:var(--s2);
  font-size:var(--t-sm); color:var(--faint); font-weight:600;
}
.field em{font-style:normal; color:var(--accent); font-weight:400}
.field__hint{margin:var(--s2) 0 0; font-size:var(--t-xs); color:var(--faint); line-height:var(--lh-tight)}
.field__err{margin:var(--s2) 0 0; font-size:var(--t-sm); color:var(--accent); display:none}
.field.is-invalid .field__err{display:block}
.field.is-invalid .input,
.field.is-invalid .choice span{border-color:var(--accent)}

/* 묻는 대신 알려주는 문구 */
.field__note{
  margin:var(--s5) 0 0; padding:var(--s3) var(--s4);
  background:var(--sunk); border-left:2px solid var(--accent);
  font-size:var(--t-sm); line-height:var(--lh-body); color:var(--muted);
}
.field__note b{color:var(--accent); font-weight:400; margin-right:var(--s2)}

.input{
  width:100%; padding:var(--s3) var(--s4); background:#fff;
  border:1px solid var(--line); border-radius:0;
  font-size:16px;   /* 이보다 작으면 아이폰이 입력할 때 화면을 확대합니다 */
}
.input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
textarea.input{resize:vertical; min-height:64px; line-height:var(--lh-body)}

.choices{display:flex; gap:var(--s2)}
.choice{flex:1}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice span{
  display:block; text-align:center; padding:var(--s3) var(--s1); cursor:pointer;
  border:1px solid var(--line); background:#fff;
  font-size:var(--t-md); transition:.2s var(--ease);
}
.choice input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff}
.choice input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}

.counts{display:flex; gap:var(--s5); flex-wrap:wrap}
.count{display:flex; align-items:center; gap:var(--s3)}
.count__label{font-size:var(--t-sm); color:var(--muted)}
.count__ctrl{display:flex; align-items:center; border:1px solid var(--line); background:#fff}
.count__ctrl button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:40px; height:40px; font-size:var(--t-lg); color:var(--accent);
}
.count__ctrl button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.count__ctrl output{
  width:40px; text-align:center; font-size:var(--t-md);
  font-variant-numeric:tabular-nums;
}

.consent{display:flex; align-items:flex-start; gap:var(--s2)}
.consent input{width:18px; height:18px; margin-top:3px; accent-color:var(--accent); flex:0 0 auto}
.consent label{
  margin:0; font-size:var(--t-sm); color:var(--ink);
  font-weight:400; line-height:var(--lh-body);
}

.modal__submit{width:100%; margin-top:var(--s5); padding:var(--s4)}
.linkbtn{
  appearance:none; border:0; background:transparent; cursor:pointer; padding:0;
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  font-size:var(--t-sm);
}
.linkbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 봇 잡는 함정 — 사람에게는 보이지 않습니다 */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.done{text-align:center; padding:var(--s5) 0 var(--s2)}
.done__mark{
  margin:0 0 var(--s3); font-family:var(--serif); font-size:var(--t-2xl);
  letter-spacing:var(--ls-label); color:var(--accent);
}

/* ═══ 안내 문구 ═════════════════════════════════════════════ */
.toast{
  position:fixed; left:50%; bottom:calc(var(--s7) + env(safe-area-inset-bottom));
  transform:translate(-50%, 12px); z-index:60;
  background:var(--ink); color:var(--paper);
  padding:var(--s3) var(--s5); font-size:var(--t-sm);
  border-radius:999px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.3s var(--ease);
  max-width:calc(100vw - var(--s7)); overflow:hidden; text-overflow:ellipsis;
}
.toast.is-on{opacity:1; transform:translate(-50%, 0)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}