/* ============================================================
   연우 모바일 청첩장 — 화이트 톤 + 풀 모션
   참고 사이트(모다모먼트)와 같은 기능 구성:
   인트로 / 메인 / 인사말 / 신랑신부 소개 / 캘린더+카운트다운 /
   갤러리(라이트박스) / 오시는 길(탭) / 계좌 / 참석여부 / 방명록 /
   공유·일정등록 / 플로팅 하단바
   ============================================================ */

/* ---------- 0. 변수 ---------- */
:root{
  --white:#FFFFFF;
  --paper:#FAFAF9;          /* 살짝 눌린 배경 */
  --ink:#1A1A1C;            /* 본문 */
  --soft:#8D8D8A;           /* 보조 텍스트 */
  --line:#EAEAE6;           /* 구분선 */
  --point:#9BA79B;          /* 아주 옅은 세이지 포인트 */
  --shadow:0 10px 30px rgba(26,26,28,.08);

  --en:'Outfit',sans-serif;             /* 영문·숫자 */
  --kr:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  --mj:'Gowun Batang',serif;            /* 인사말 등 감성 문구 */
  --ease:cubic-bezier(.16,.84,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:#E7E7E3; font-family:var(--kr); font-weight:300;
  color:var(--ink); line-height:1.9; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
button{font-family:inherit}

/* 폰 폭 프레임 */
.wrap{max-width:430px;margin:0 auto;background:var(--white);overflow:hidden;padding-bottom:104px;position:relative}

/* ---------- 1. 인트로 오프닝 ---------- */
#intro{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  display:flex;align-items:flex-end;
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
/* 사라질 때 : 살짝 확대되며 투명해짐 → 아래 메인 사진과 겹쳐 자연스럽게 이어짐 */
#intro.done{opacity:0;transform:scale(1.05);pointer-events:none}

/* 인트로 사진 — 메인과 같은 사진을 쓰면 전환이 가장 매끄럽습니다 */
#intro .iph{
  position:absolute;inset:0;
  background:url('../images/intro.jpg') center/cover, linear-gradient(168deg,#E2E2DE 0%,#C6C7C2 52%,#ABADA8 100%);
  transform:scale(1.14);
  animation:kenburns 7s var(--ease) forwards;   /* 아주 천천히 줌아웃 */
}
@keyframes kenburns{to{transform:scale(1)}}
/* 글씨가 잘 보이도록 위아래를 흰색으로 눌러줌 */
#intro .iveil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,.78) 100%);
}
#intro .itx{position:relative;width:100%;padding:0 26px 86px}
#intro .itx > *{opacity:0;transform:translateY(16px);animation:introUp 1.1s var(--ease) forwards}
#intro .d1{font-family:var(--en);font-size:11px;letter-spacing:.36em;color:#5C5C58;animation-delay:.55s}
#intro .d2{font-family:var(--en);font-weight:200;font-size:31px;letter-spacing:-.015em;
  color:var(--ink);margin-top:10px;animation-delay:1.0s}
#intro .d3{font-family:var(--mj);font-size:14.5px;color:#43433F;margin-top:8px;animation-delay:1.4s}
/* 가는 세로선이 아래로 자라는 마무리 */
#intro .iline{width:1px;height:0;background:rgba(26,26,28,.35);margin-top:20px;
  animation:growLine .9s var(--ease) 1.75s forwards}
@keyframes growLine{to{height:40px}}
@keyframes introUp{to{opacity:1;transform:none}}

/* ---------- 2. 상단 진행바 ---------- */
#prog{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:2px;z-index:80}
#prog i{display:block;height:100%;width:0;background:var(--ink)}

/* ---------- 3. 등장 모션 유틸 ---------- */
.rvl{display:block;overflow:hidden}
.rvl > span{
  display:block;transform:translateY(112%);opacity:0;
  transition:transform 1.05s var(--ease),opacity 1.05s var(--ease);
  transition-delay:var(--d,0s);
}
.on .rvl > span{transform:none;opacity:1}
.fd{opacity:0;transform:translateY(18px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0s)}
.on .fd{opacity:1;transform:none}

/* ---------- 4. 공통 섹션 ---------- */
.sec{padding:82px 26px}
.sec.tint{background:var(--paper)}
.label{font-family:var(--en);font-size:10px;letter-spacing:.3em;color:var(--soft);text-transform:uppercase}
.sec h2{font-family:var(--en);font-weight:200;font-size:25px;letter-spacing:-.02em;margin:14px 0 30px}
.sec h2.kr{font-family:var(--mj);font-weight:400;font-size:21px;letter-spacing:.02em}

/* ---------- 5. 메인 ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero .ph{
  position:absolute;inset:-8% 0;
  background:url('../images/intro.jpg') center/cover, linear-gradient(168deg,#E2E2DE 0%,#C6C7C2 52%,#ABADA8 100%);
  transform:scale(1.07);transition:transform 1.8s var(--ease);
}
.hero.on .ph{transform:scale(1)}
.hero .ph::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.62) 100%);
}
.hero .top{position:absolute;top:26px;left:26px;right:26px;display:flex;justify-content:space-between;
  font-family:var(--en);font-size:10px;letter-spacing:.26em;color:#5C5C58}
.hero .tx{position:absolute;left:26px;right:26px;bottom:72px}
.hero .names{font-family:var(--en);font-weight:200;font-size:clamp(36px,11vw,46px);line-height:1.08;letter-spacing:-.025em}
.hero .kr{font-family:var(--mj);font-size:16px;color:#3E3E3B;margin-top:14px;letter-spacing:.04em}
.hero .dt{font-family:var(--en);font-size:11.5px;letter-spacing:.22em;color:#5C5C58;margin-top:18px}
.scrollhint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:1px;height:28px;
  background:rgba(26,26,28,.22);overflow:hidden}
.scrollhint::after{content:'';display:block;width:100%;height:13px;background:var(--ink);animation:sc 2.2s var(--ease) infinite}
@keyframes sc{0%{transform:translateY(-15px)}60%,100%{transform:translateY(30px)}}

/* ---------- 6. 인사말 ---------- */
.greet{font-family:var(--mj);font-size:15.5px;line-height:2.3;color:#33332F;text-align:center}
.greet .rvl > span{line-height:2.3}

/* 신랑 · 신부 소개 */
.people{display:grid;gap:12px;margin-top:38px}
.person{
  display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--line);background:var(--white);
}
.person .av{width:56px;height:56px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,#DEDEDA,#B6B8B3)}
.person .bd{flex:1;min-width:0}
.person .rel{font-family:var(--en);font-size:9.5px;letter-spacing:.2em;color:var(--soft)}
.person .nm{font-size:16px;font-weight:400;margin-top:2px}
.person .nm small{font-size:12px;color:var(--soft);margin-left:6px;font-weight:300}
.person .par{font-size:12.5px;color:var(--soft);margin-top:2px}
.person .act{display:flex;gap:6px;flex:none}
.person .act a{
  width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--ink);font-size:14px;transition:.3s var(--ease);
}
.person .act a:active{background:var(--ink);color:#fff}

/* ---------- 7. 캘린더 + 카운트다운 ---------- */
.cal{width:100%;border-collapse:collapse;font-family:var(--en);font-size:14px;font-weight:300}
.cal th{padding:0 0 14px;font-size:10px;letter-spacing:.14em;color:var(--soft);font-weight:400}
.cal td{padding:9px 0;text-align:center;color:#3C3C39;position:relative}
.cal .sun{color:#B98080}
.cal .mark{position:relative;color:var(--ink);font-weight:400}
/* SVG 원이 그려지는 표시 */
.cal .mark svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:34px;overflow:visible}
.cal .mark ellipse{fill:none;stroke:var(--point);stroke-width:1.2;
  stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset 1.5s var(--ease) .4s}
.on .cal .mark ellipse{stroke-dashoffset:0}
.cal-note{text-align:center;font-family:var(--en);font-size:11.5px;letter-spacing:.18em;color:var(--soft);margin-top:26px}

.count{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:24px}
.count div{background:var(--white);padding:16px 4px;text-align:center}
.count .n{font-family:var(--en);font-weight:200;font-size:26px;letter-spacing:-.02em}
.count .k{font-family:var(--en);font-size:8.5px;letter-spacing:.2em;color:var(--soft);margin-top:2px}
.dday-line{margin-top:18px;text-align:center;font-size:13.5px;color:var(--soft)}
.dday-line b{color:var(--ink);font-weight:400}

/* ---------- 8. 갤러리 ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.gal button{border:none;padding:0;background:none;cursor:pointer;aspect-ratio:1/1;overflow:hidden}
.gal img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s var(--ease)}
.gal button:active img{transform:scale(1.06)}

/* 라이트박스 */
#lb{position:fixed;inset:0;z-index:150;background:rgba(255,255,255,.98);display:none;
  flex-direction:column;opacity:0;transition:opacity .35s var(--ease)}
#lb.open{display:flex}
#lb.show{opacity:1}
#lb .bar{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;
  font-family:var(--en);font-size:11px;letter-spacing:.18em;color:var(--soft)}
#lb .close{background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;line-height:1}
#lb .track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
#lb .track::-webkit-scrollbar{display:none}
#lb .track div{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:0 16px}
#lb .track img{width:100%;aspect-ratio:3/4;display:block;object-fit:cover;object-position:center}
#lb .nav{display:flex;justify-content:space-between;padding:16px 20px 26px}
#lb .nav button{background:none;border:1px solid var(--line);padding:11px 20px;font-family:var(--en);
  font-size:10px;letter-spacing:.16em;cursor:pointer;color:var(--ink)}

/* ---------- 9. 오시는 길 ---------- */
.venue{text-align:center}
.venue .nm{font-family:var(--mj);font-size:19px}
.venue .ad{font-size:13.5px;color:var(--soft);margin:6px 0 22px}
.map{height:190px;border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,#F4F4F1 0 12px,#EDEDE9 12px 24px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--en);font-size:10.5px;letter-spacing:.2em;color:var(--soft)}
.mapbtn{display:flex;gap:7px;margin-top:12px}
.mapbtn a{flex:1;padding:13px 0;text-align:center;text-decoration:none;border:1px solid var(--line);
  font-family:var(--en);font-size:10px;letter-spacing:.14em;color:var(--ink);transition:.3s var(--ease)}
.mapbtn a:active{background:var(--ink);color:#fff}

/* 교통편 탭 */
.tabs{display:flex;margin-top:32px;border-bottom:1px solid var(--line)}
.tabs button{flex:1;padding:13px 0;background:none;border:none;border-bottom:1px solid transparent;
  font-size:13px;color:var(--soft);cursor:pointer;margin-bottom:-1px;transition:.3s var(--ease)}
.tabs button.act{color:var(--ink);border-bottom-color:var(--ink)}
.tabpane{display:none;padding-top:20px;font-size:13.5px;line-height:2.1;color:#3C3C39}
.tabpane.act{display:block;animation:fadeIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tabpane b{display:block;font-family:var(--en);font-size:9.5px;letter-spacing:.18em;color:var(--soft);
  font-weight:400;margin-top:14px}
.tabpane b:first-child{margin-top:0}

/* ---------- 10. 계좌 ---------- */
.acc{border-bottom:1px solid var(--line)}
.acc:last-of-type{border-bottom:none}
.acc-h{width:100%;padding:18px 0;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink)}
.acc-h i{width:9px;height:9px;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);
  transform:rotate(45deg) translateY(-3px);transition:transform .45s var(--ease)}
.acc.open .acc-h i{transform:rotate(-135deg) translateY(-3px)}
/* 높이를 몰라도 부드럽게 열리는 방식 */
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-b > div{overflow:hidden}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;font-size:12.5px;color:var(--soft)}
.acc-row:last-child{padding-bottom:18px}
.acc-row b{color:var(--ink);font-weight:400}
.copy{font-family:var(--en);font-size:10px;letter-spacing:.1em;padding:8px 13px;border:1px solid var(--line);
  background:none;color:var(--ink);cursor:pointer;transition:.3s var(--ease);white-space:nowrap}
.copy:active{background:var(--ink);color:#fff}

/* ---------- 11. 참석 여부 ---------- */
.rsvp-box{border:1px solid var(--line);padding:26px 22px;text-align:center}
.rsvp-box p{font-size:13.5px;color:var(--soft);line-height:2}
.btn-main{width:100%;margin-top:20px;padding:15px 0;border:none;background:var(--ink);color:#fff;
  font-size:14px;cursor:pointer;transition:opacity .3s var(--ease)}
.btn-main:active{opacity:.75}
.btn-line{width:100%;margin-top:8px;padding:15px 0;border:1px solid var(--line);background:none;
  font-size:14px;cursor:pointer;color:var(--ink)}

/* 모달 */
.modal{position:fixed;inset:0;z-index:160;display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
.modal .dim{position:absolute;inset:0;background:rgba(26,26,28,.4);opacity:0;transition:opacity .35s var(--ease)}
.modal.show .dim{opacity:1}
.sheet{position:relative;width:100%;max-width:430px;background:var(--white);padding:26px 24px 34px;
  transform:translateY(100%);transition:transform .45s var(--ease);
  max-height:86svh;overflow-y:auto;padding-bottom:calc(34px + env(safe-area-inset-bottom))}
.modal.show .sheet{transform:none}
.sheet h3{font-size:17px;font-weight:400;margin-bottom:6px}
.sheet .sub{font-size:12.5px;color:var(--soft);margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--en);font-size:9.5px;letter-spacing:.18em;color:var(--soft);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--white);
  font-family:var(--kr);font-size:14px;font-weight:300;color:var(--ink);border-radius:0;
}
.field textarea{resize:vertical;min-height:88px;line-height:1.8}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.seg{display:flex;gap:7px}
.seg button{flex:1;padding:13px 0;border:1px solid var(--line);background:none;font-size:13.5px;
  color:var(--ink);cursor:pointer;transition:.25s var(--ease)}
.seg button.sel{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- 12. 방명록 ---------- */
.gb-list{display:grid;gap:10px;margin-bottom:16px}
.gb-item{border:1px solid var(--line);padding:16px 18px}
.gb-item .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.gb-item .who{font-size:13.5px;font-weight:400}
.gb-item .when{font-family:var(--en);font-size:10px;letter-spacing:.1em;color:var(--soft)}
.gb-item .msg{font-size:13.5px;color:#3C3C39;line-height:1.95;word-break:break-word}
.gb-empty{text-align:center;font-size:13px;color:var(--soft);padding:26px 0}

/* ---------- 13. 공유 ---------- */
.share{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.share button,.share a{padding:15px 0;border:1px solid var(--line);background:none;text-align:center;
  text-decoration:none;color:var(--ink);font-size:13.5px;cursor:pointer;transition:.3s var(--ease)}
.share button:active,.share a:active{background:var(--ink);color:#fff}
.share .full{grid-column:1/-1}

/* ---------- 14. 엔딩 + 하단바 ---------- */
.end{padding:96px 26px 46px;text-align:center}
.end .en{font-family:var(--en);font-weight:200;font-size:28px;letter-spacing:-.02em}
.end p{font-family:var(--en);font-size:10.5px;letter-spacing:.22em;color:var(--soft);margin-top:16px}

.fbar{position:fixed;bottom:0;left:50%;width:100%;max-width:430px;display:flex;z-index:90;
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translate(-50%,100%);transition:transform .7s var(--ease)}
.fbar.show{transform:translate(-50%,0)}
.fbar a,.fbar button{flex:1;padding:18px 0;background:none;border:none;border-right:1px solid var(--line);
  font-family:var(--en);font-size:9.5px;letter-spacing:.18em;color:var(--ink);
  text-align:center;text-decoration:none;cursor:pointer}
.fbar > *:last-child{border-right:none}

/* 토스트 */
#toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:210;
  background:rgba(26,26,28,.92);color:#fff;font-size:13px;padding:12px 20px;
  opacity:0;pointer-events:none;transition:.35s var(--ease)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 접근성 : 동작 줄이기 ---------- */
@media (prefers-reduced-motion:reduce){
  #intro{display:none}
  .rvl > span,.fd{opacity:1;transform:none;transition:none}
  .hero .ph{transform:none;transition:none}
  .cal .mark ellipse{stroke-dashoffset:0;transition:none}
  .scrollhint::after{animation:none}
  .fbar{transform:translate(-50%,0)}
  html{scroll-behavior:auto}
}