/* ============================================================
   신동준 ♥ 최소담 · 모바일 청첩장
   ============================================================ */

:root{
  --cream:      #FFFEFA;
  --cream-deep: #F7F3EA;
  --band:       #BAD0D8;
  --band-deep:  #9DBAC5;
  --wood:       #A9713C;
  --ink:        #2E2B26;
  --ink-soft:   #5B564E;
  --muted-2:    #9A9388;
  --line:       #E6E0D4;
  --heart:      #DA526A;

  --font-sans:  'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-serif: 'Nanum Myeongjo', serif;

  --page: 480px;
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:#EFEAE1;
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.paper{
  max-width:var(--page);
  margin:0 auto;
  background:var(--cream);
  overflow:hidden;
  box-shadow:0 0 60px rgba(60,50,35,.12);
}

/* ── 등장 애니메이션 ───────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

/* 움직임 없이 투명도만 0 → 100 */
.reveal--fade{
  transform:none;
  transition:opacity 1.6s ease;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.eyebrow{
  margin:0 0 26px;
  text-align:center;
  font-size:11px;
  letter-spacing:.34em;
  font-weight:500;
  color:var(--muted-2);
  text-indent:.34em;
}

/* ── 1. 액자 + 인사말 ──────────────────────────────── */
.top{ position:relative; }
.top__frame{ width:100%; height:auto; }
.top__text{
  position:absolute;
  top:0; left:0;
  width:100%; height:auto;
}

/* ── 2. 예식 안내 배너 = 편지 봉투 ──────────────────── */
.banner{
  display:grid;
  grid-template-rows:1fr;
  margin-bottom:4%;
  transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1),
             margin-bottom   .5s cubic-bezier(.4,0,.2,1),
             opacity         .3s ease;
}
.banner__inner{ position:relative; overflow:hidden; }
.banner__img{ width:100%; height:auto; }

/* 하트를 누르면 봉투는 접히며 사라집니다 */
.banner.is-gone{
  grid-template-rows:0fr;
  margin-bottom:0;
  opacity:0;
  pointer-events:none;
}

/* 하트는 배너 이미지 안에 그려져 있습니다.
   1620×931 원본에서 하트 자리 x 698~910, y 538~725 를 비율로 옮긴 것 */
.heart{
  position:absolute;
  touch-action:manipulation;
  /* 하트 자리(43.09% / 57.79% / 13.15% × 20.19%)에서
     사방으로 조금 넓혀 손가락으로 누르기 쉽게 했습니다 */
  left:41.1%;
  top:54.8%;
  width:17.2%;
  height:26.2%;
  border:0; padding:0;
  background:none;
  -webkit-tap-highlight-color:transparent;
}

/* ── 3. 봉투에서 나오는 편지 ────────────────────────── */
.details{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .62s cubic-bezier(.22,.61,.36,1);
}
.details__inner{ overflow:hidden; }
.details.is-open{ grid-template-rows:1fr; }

@media (prefers-reduced-motion: reduce){
  .banner, .details{ transition:none; }
}

/* 편지지는 상단-2-2.png 를 둘로 잘라 쓴 것입니다.
   위(파란 띠 + 하트)는 그대로 두고, 가운데 종이만 내용 길이에 맞춰 늘어납니다.
   원본 종이결이 세로 방향이고 밝기가 전 구간 균일해서 늘어나도 이음매가 없습니다. */
.details__paper{ position:relative; }
.details__pt{ width:100%; height:auto; margin-bottom:-1px; }

.details__body{
  /* 편지지는 가로 6.0%~94.0% 구간이라, 그보다 안쪽에서 시작하게 잡습니다 */
  padding:2% 10% 9%;
  background:url(../images/panel-mid.webp) top center / 100% 100% no-repeat;
}

/* 종이 위에 얹히므로 달력 칸의 배경색은 걷어냅니다 */
.details .calendar{ background:none; }
.details .calendar,
.details .location{ padding-left:0; padding-right:0; }

/* 종이 폭이 좁아진 만큼 지도 버튼은 두 줄로 */
.details .map__links{ grid-template-columns:repeat(2, 1fr); }

/* 지도 자리는 크림색 대신 종이 위에 얹힌 반투명 판으로 */
.details .map{
  background:rgba(255,255,255,.42);
  border-color:rgba(255,255,255,.65);
}
.details .map__fallback{
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,.30) 0 12px,
    rgba(255,255,255,.55) 12px 24px);
}

/* ── 4. 혼주 소개 ─────────────────────────────────── */
.intro{ padding:20px 0 64px; }
.intro__photo{ margin:0 auto; width:77%; }
.intro__photo img{ width:100%; height:auto; }

.intro__names{
  margin-top:26px;
  text-align:center;
  font-size:16px;
  line-height:2;
  color:var(--ink);
}
.intro__names p{ margin:0; }
.intro__names b{ font-weight:700; }
.intro__names .rel{ color:var(--muted-2); font-weight:400; font-size:15px; }

.intro__contact{ margin-top:24px; text-align:center; }

/* ── 버튼 공통 ────────────────────────────────────── */
.btn{
  display:inline-block;
  touch-action:manipulation;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  font-size:13.5px;
  font-weight:500;
  padding:11px 22px;
  border-radius:999px;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn--ghost{ border-color:var(--band-deep); color:#54707C; }
.btn--map{ padding:10px 6px; font-size:12.5px; border-radius:8px; text-align:center; white-space:nowrap; }

/* ── 5. 갤러리 ────────────────────────────────────── */
.gallery{ padding:8px 0 70px; }
.collage{ display:flex; flex-direction:column; }
.collage__item{ margin:0; }

/* iOS 사파리는 그냥 <img> 에 붙인 click 이 안 먹을 때가 있어서
   버튼으로 감쌌습니다. 탭 지연(300ms)도 함께 없앱니다. */
.collage__btn{
  display:block;
  width:100%;
  border:0; padding:0;
  background:none;
  cursor:zoom-in;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.collage__btn img{ width:100%; height:auto; }

.collage__item--a{ width:68%;   margin-left:0; }
.collage__item--b{ width:38%;   margin-left:4.8%;  margin-top:11%; }
.collage__item--c{ width:49.2%; margin-left:auto;  margin-right:3.9%; margin-top:-33%; }
.collage__item--d{ width:68.3%; margin-left:5.6%;  margin-top:9%; }
.collage__item--e{ width:53%;   margin-left:auto;  margin-right:4.3%; margin-top:6.5%; }
.collage__item--f{ width:88.8%; margin-left:6.4%;  margin-top:4.7%; }

/* ── 6. 달력 ──────────────────────────────────────── */
.calendar{
  padding:54px 24px 62px;
  background:var(--cream-deep);
  text-align:center;
}
.cal{
  width:100%;
  max-width:330px;
  margin:0 auto;
  border-collapse:collapse;
  font-size:14px;
}
.cal th{
  padding:0 0 12px;
  font-weight:500;
  font-size:12px;
  color:var(--muted-2);
  border-bottom:1px solid var(--line);
}
.cal td{ padding:9px 0; color:var(--ink-soft); font-weight:400; }
.cal tbody tr:first-child td{ padding-top:16px; }
.cal .sun{ color:#C86E77; }
.cal .sat{ color:#7C93A6; }

.cal__mark{
  display:inline-grid; place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--heart);
  color:#fff; font-weight:700;
}

.cal__time{
  margin:28px 0 0;
  font-family:var(--font-serif);
  font-size:16px;
  color:var(--ink);
  letter-spacing:.01em;
}
.cal__dday{
  margin:10px 0 0;
  font-size:13.5px;
  color:var(--muted-2);
}
.cal__dday b{ color:var(--heart); font-weight:700; }

/* ── 7. 오시는 길 ─────────────────────────────────── */
.location{ padding:58px 24px 66px; text-align:center; }
.place{
  margin:0;
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
}
.place span{ display:block; font-size:15px; font-weight:400; color:var(--ink-soft); margin-top:6px; }
.addr{ margin:16px 0 4px; font-size:14px; color:var(--ink-soft); }
.tel{ margin:0; font-size:14px; }
.tel a{ color:var(--muted-2); text-decoration:none; border-bottom:1px solid var(--line); }

.map{
  position:relative;
  margin:26px 0 14px;
  height:240px;
  border-radius:10px;
  overflow:hidden;
  background:var(--cream-deep);
  border:1px solid var(--line);
}
.map__canvas{ width:100%; height:100%; }
.map__fallback{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:13px; color:var(--muted-2);
  background:
    repeating-linear-gradient(45deg, #F4F0E7 0 12px, #F7F3EA 12px 24px);
}
.map.is-live .map__fallback{ display:none; }

.map__links{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
}
@media (max-width: 360px){
  .map__links{ grid-template-columns:repeat(2, 1fr); }
}

.ways{ margin:32px 0 0; text-align:left; }
.ways > div{
  display:flex; gap:14px;
  padding:14px 2px;
  border-top:1px solid var(--line);
}
.ways > div:last-child{ border-bottom:1px solid var(--line); }
.ways dt{
  flex:0 0 46px;
  font-size:13px; font-weight:700; color:var(--ink);
  line-height:1.75;
}
.ways dd{
  margin:0; flex:1;
  font-size:13px; color:var(--ink-soft); line-height:1.75;
}
.ways dd b{ font-weight:700; color:var(--ink); }

/* ── 8. 마음 전하실 곳 ─────────────────────────────── */
.account{
  padding:56px 24px 64px;
  background:var(--cream-deep);
  text-align:center;
}
.account__lead{
  margin:0 0 28px;
  font-size:14px;
  line-height:1.95;
  color:var(--ink-soft);
}

.acc{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
  text-align:left;
}
.acc__head{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px;
  border:0; background:none;
  font-size:14px; font-weight:500; color:var(--ink);
}
.acc__head i{
  width:8px; height:8px;
  border-right:1.5px solid var(--muted-2);
  border-bottom:1.5px solid var(--muted-2);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.acc__head[aria-expanded="true"] i{ transform:rotate(-135deg) translate(-2px,-2px); }

.acc__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.acc__inner{ overflow:hidden; padding:0 18px; }
.acc.is-open .acc__body{ grid-template-rows:1fr; }
.acc.is-open .acc__inner{ padding-bottom:8px; }
.acc__row:first-child{ border-top:0; }

.acc__row{
  display:flex; align-items:center; gap:10px;
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.acc__who{ flex:0 0 84px; color:var(--muted-2); }
.acc__no{ flex:1; color:var(--ink); letter-spacing:-.01em; }
.acc__copy{
  flex:0 0 auto;
  border:1px solid var(--line); background:var(--cream);
  border-radius:6px; padding:5px 10px;
  font-size:12px; color:var(--ink-soft);
}

/* ── 9. 마무리 ────────────────────────────────────── */
.outro{ padding:64px 24px 78px; text-align:center; }
.outro__names{
  margin:0;
  font-family:var(--font-serif);
  font-size:21px; letter-spacing:.06em;
}
.outro__names span{ color:var(--heart); font-size:17px; margin:0 6px; }
.outro__date{
  margin:12px 0 0;
  font-size:13px; letter-spacing:.24em; color:var(--muted-2);
}
.outro__share{ margin-top:30px; }

/* ── 배경음악 버튼 ────────────────────────────────── */
.bgm{
  position:fixed;
  top:20px;
  right:20px;
  z-index:9999;
  width:28px; height:28px;
  border:0; padding:0;
  border-radius:50%;
  background:rgba(46,43,38,.06);
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, transform .15s ease;
}
/* 버튼은 작게 두되 손가락 닿는 범위는 46px 로 넓힙니다 */
.bgm::before{
  content:'';
  position:absolute;
  inset:-9px;
}
.bgm:active{ transform:scale(.9); }

/* 화면이 넓어지면 청첩장(480px) 오른쪽 끝을 기준으로 붙입니다 */
@media (min-width: 521px){
  .bgm{ right:calc(50% - var(--page)/2 + 20px); }
}

.bgm__ico{ width:15px; height:15px; grid-area:1/1; }
.bgm__ico .spk{ fill:#ABA396; }
.bgm__ico .wave{
  fill:none; stroke:#ABA396;
  stroke-width:1.9; stroke-linecap:round;
}

/* 기본은 꺼짐(스피커에 ×), 재생 중에는 음파 */
.bgm__ico--on{ display:none; }
.bgm.is-playing .bgm__ico--on{ display:block; }
.bgm.is-playing .bgm__ico--off{ display:none; }

/* ── 모달 ─────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; }
.modal__dim{ position:absolute; inset:0; background:rgba(30,26,20,.5); }
.modal__panel{
  position:relative;
  width:min(340px, calc(100vw - 44px));
  background:var(--cream);
  border-radius:14px;
  padding:26px 22px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.modal__x{
  position:absolute; top:8px; right:10px;
  border:0; background:none; font-size:26px; line-height:1;
  color:var(--muted-2); padding:6px;
}
.modal__title{
  margin:0 0 18px; text-align:center;
  font-family:var(--font-serif); font-size:17px;
}
.modal__label{
  margin:0 0 6px;
  font-size:11px; letter-spacing:.2em; color:var(--muted-2);
}
.modal__side + .modal__side{ margin-top:20px; }
.modal__row{
  display:flex; align-items:center; gap:8px;
  padding:9px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.modal__row span{ flex:1; color:var(--ink-soft); }
.modal__row a{
  flex:0 0 auto;
  border:1px solid var(--line); background:#fff;
  border-radius:6px; padding:5px 12px;
  font-size:12px; text-decoration:none; color:var(--ink-soft);
}

/* ── 라이트박스 ───────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:70;
  background:rgba(24,21,17,.94);
  display:grid; place-items:center;
  /* touch-action 을 제한하지 않아야 두 손가락으로 확대할 수 있습니다 */
}
.lightbox img{
  max-width:92vw; max-height:82vh;
  object-fit:contain;
  border-radius:4px;
}
.lightbox__x{
  position:absolute; top:10px; right:14px;
  border:0; background:none; color:#fff;
  font-size:32px; line-height:1; padding:8px;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:none; color:#fff;
  font-size:44px; line-height:1; padding:10px 14px; opacity:.7;
}
.lightbox__nav--prev{ left:2px; }
.lightbox__nav--next{ right:2px; }
.lightbox__count{
  position:absolute; bottom:22px; left:0; right:0;
  text-align:center; color:rgba(255,255,255,.7);
  font-size:12.5px; letter-spacing:.1em; margin:0;
}

/* ── 토스트 ───────────────────────────────────────── */
.toast{
  position:fixed;
  left:50%; bottom:40px;
  transform:translate(-50%, 14px);
  z-index:80;
  background:rgba(46,43,38,.92);
  color:#fff;
  font-size:13px;
  padding:10px 18px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }