/* =========================================================
   안현빈 ♡ 권효정 · Mobile Wedding Invitation
   ========================================================= */

:root{
  --bg:        #fbfaf6;
  --paper:     #ffffff;
  --tint:      #f4f1ea;
  --ink:       #35322d;
  --ink-soft:  #6b665e;
  --muted:     #9a948a;
  --line:      #e7e2d8;
  --accent:    #8bb0cc;   /* sky */
  --accent-dp: #4e7d9e;
  --warm:      #cba75c;   /* bouquet yellow */
  --shadow:    0 10px 30px rgba(53,50,45,.08);

  --serif-ko: 'Gowun Batang', serif;
  --serif-en: 'Cormorant Garamond', serif;
  --sans-ko:  'Noto Sans KR', system-ui, sans-serif;

  --card-w: 460px;
}

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

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

body{
  margin:0;
  background:#e9e6e0;
  color:var(--ink);
  font-family:var(--serif-ko);
  line-height:1.75;
  letter-spacing:-.01em;
  overflow-x:hidden;
}
body.lock{ overflow:hidden }

img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none }
a{ color:inherit; text-decoration:none }

.card{
  max-width:var(--card-w);
  margin:0 auto;
  background:var(--bg);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.07);
}

/* ---------------------------------------------------------
   인트로 오버레이
   --------------------------------------------------------- */
.intro{
  position:fixed; inset:0; z-index:900;
  background:#cfe2ef;
  display:flex; align-items:flex-end; justify-content:center;
  transition:opacity .9s ease, visibility .9s;
}
.intro.hide{ opacity:0; visibility:hidden; pointer-events:none }
.intro__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  animation:introZoom 9s ease-out forwards;
}
@keyframes introZoom{ from{ transform:scale(1.08) } to{ transform:scale(1) } }
.intro__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.05) 40%, rgba(90,110,125,.35));
}
.intro__body{ position:relative; text-align:center; padding-bottom:56px }
.intro__hint{
  margin:0 0 14px; color:#fff; font-size:14px; letter-spacing:.08em;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
  animation:fadePulse 2.4s ease-in-out infinite;
}
.intro__arrow{
  display:block; width:12px; height:12px; margin:0 auto;
  border-right:1.4px solid #fff; border-bottom:1.4px solid #fff;
  transform:rotate(45deg);
  animation:arrowDown 2.4s ease-in-out infinite;
}
@keyframes fadePulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes arrowDown{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5 } 50%{ transform:rotate(45deg) translate(4px,4px); opacity:1 } }

/* ---------------------------------------------------------
   커버
   --------------------------------------------------------- */
.cover{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:#b5e9fe;
}
/* 사진 위쪽 하늘 — 사진 첫 줄 색(#86b9f0 → #aad0ff → #b5e9fe)과 정확히 이어진다 */
.cover__sky{
  flex:1 1 auto; min-height:0;
  background:
    linear-gradient(180deg, rgba(84,140,198,.34) 0%, rgba(84,140,198,.10) 60%, rgba(84,140,198,0) 100%),
    linear-gradient(90deg,
      #86b9f0 0%,  #8fbef6 10%, #95c4fc 20%, #a2c7fe 30%, #a6cbff 40%,
      #aad0ff 50%, #abd6ff 60%, #afdbff 70%, #b5e3fd 80%, #b3e7fc 90%, #b5e9fe 100%);
}
.cover__photo{
  flex:0 0 auto;
  width:100%; height:auto; max-width:none;
}
.cover__deco{ position:absolute; inset:0; pointer-events:none }
.cover__deco svg{ width:100%; height:100% }

.cover__title{
  position:absolute; top:7%; left:0; right:0;
  margin:0; text-align:center;
  font-family:var(--serif-en);
  font-weight:300; font-style:italic;
  color:#fff;
  line-height:.92;
  text-shadow:0 2px 24px rgba(90,120,145,.25);
}
.cover__title span{ display:block }
.cover__title span:nth-child(1){ font-size:58px }
.cover__title span:nth-child(2){ font-size:58px; letter-spacing:-.01em }
.cover__title span:nth-child(3){ font-size:58px }

.cover__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  text-align:center; color:#fff;
  padding:0 20px 44px;
  text-shadow:0 1px 10px rgba(70,90,105,.45), 0 0 26px rgba(70,90,105,.25);
}
.cover__date{
  margin:0 0 6px; font-family:var(--serif-en);
  font-size:19px; letter-spacing:.06em;
}
.cover__venue{ margin:0 0 22px; font-size:14px; letter-spacing:.02em; opacity:.95 }
.cover__names{
  margin:0; font-size:16px; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.cover__names b{ font-weight:400 }
.heart{ font-style:normal; color:#ffd7e0; font-size:13px }

/* ---------------------------------------------------------
   BGM
   --------------------------------------------------------- */
.bgm{
  position:fixed; z-index:800;
  top:calc(14px + env(safe-area-inset-top));
  left:calc(50% - var(--card-w)/2 + 14px);
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6);
  display:grid; place-items:center;
  transition:opacity .4s;
}
@media (max-width:460px){ .bgm{ left:14px } }
.bgm svg{ width:15px; height:15px; fill:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.25)) }
.bgm .bgm__pause{ display:none }
.bgm.on .bgm__play{ display:none }
.bgm.on .bgm__pause{ display:block }
.bgm.dim{ background:rgba(120,120,120,.18); border-color:rgba(120,120,120,.18) }
.bgm.dim svg{ fill:var(--ink-soft); filter:none }

/* ---------------------------------------------------------
   섹션 공통
   --------------------------------------------------------- */
.sec{
  padding:76px 30px;
  text-align:center;
  position:relative;
}
.sec--tint{ background:var(--tint) }
.sec--poem{ padding:88px 30px 78px }

.sec__eyebrow{
  margin:0 0 10px;
  font-family:var(--serif-en);
  font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--accent-dp); opacity:.8;
}
.sec__title{
  margin:0 0 30px;
  font-size:21px; font-weight:400; letter-spacing:.04em;
}
.sec__title::after{
  content:''; display:block; width:26px; height:1px;
  background:var(--line); margin:16px auto 0;
}

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .intro__img{ animation:none }
}

.btn{
  display:inline-block; padding:13px 30px;
  border-radius:999px; font-size:14px; letter-spacing:.04em;
  transition:all .25s;
}
.btn--fill{ background:var(--accent); color:#fff }
.btn--fill:active{ background:var(--accent-dp) }
.btn--line{ border:1px solid var(--line); background:var(--paper); color:var(--ink-soft) }
.btn--line:active{ background:var(--tint) }

/* ---------------------------------------------------------
   시
   --------------------------------------------------------- */
.poem{ font-size:15px; line-height:2.2; color:var(--ink-soft) }
.poem p{ margin:0 }
.poem__author{
  margin:26px 0 0; font-size:12.5px; color:var(--muted); letter-spacing:.02em;
}

/* ---------------------------------------------------------
   초대합니다
   --------------------------------------------------------- */
.greet{ font-size:15px; line-height:2.15; color:var(--ink-soft) }
.greet p{ margin:0; min-height:.5em }
.greet__photo{
  margin:40px -6px 36px;
  border-radius:2px; overflow:hidden;
  box-shadow:var(--shadow);
}
.greet__photo img{ width:100%; height:auto }

.parents{ font-size:14.5px; line-height:2.3; margin-bottom:30px }
.parents p{ margin:0 }
.parents em{ font-style:normal; font-size:12.5px; color:var(--muted); margin:0 3px }
.parents b{ font-weight:400 }
.dot{
  display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--line); vertical-align:middle; margin:0 8px 3px;
}

/* ---------------------------------------------------------
   달력 / 카운트다운
   --------------------------------------------------------- */
.cal{
  max-width:300px; margin:6px auto 34px;
  background:var(--paper); border-radius:4px; padding:22px 16px 18px;
  box-shadow:var(--shadow);
}
.cal__month{
  font-family:var(--serif-en); font-size:22px; letter-spacing:.06em;
  margin:0 0 16px; color:var(--accent-dp);
}
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px 0 }
.cal__dow{ font-size:11px; color:var(--muted); letter-spacing:.02em; padding-bottom:6px }
.cal__dow:first-child{ color:#d09090 }
.cal__day{
  font-size:13.5px; height:32px; line-height:32px; color:var(--ink-soft);
  position:relative;
}
.cal__day--sun{ color:#d09090 }
.cal__day--mark{
  color:#fff; font-weight:700;
}
.cal__day--mark::before{
  content:''; position:absolute; inset:2px 50% auto 50%;
  width:28px; height:28px; margin-left:-14px; border-radius:50%;
  background:var(--accent); z-index:-1;
}
.cal__day--mark{ z-index:0 }

.dday{ display:flex; justify-content:center; gap:8px; margin-bottom:22px }
.dday__unit{
  flex:1; max-width:70px;
  background:var(--paper); border-radius:4px; padding:12px 4px;
  box-shadow:0 4px 14px rgba(53,50,45,.06);
}
.dday__unit b{
  display:block; font-family:var(--serif-en); font-size:26px;
  font-weight:400; color:var(--accent-dp); line-height:1.2;
}
.dday__unit span{ font-size:10.5px; color:var(--muted); letter-spacing:.08em }
.dday__text{ margin:0; font-size:14px; color:var(--ink-soft) }
.dday__text b{ color:var(--accent-dp); font-weight:700 }

/* ---------------------------------------------------------
   갤러리
   --------------------------------------------------------- */
.slider{
  position:relative; margin:6px -6px 18px;
  border-radius:2px; overflow:hidden; background:#eceae5;
  box-shadow:var(--shadow);
}
.slider__track{
  display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1);
  touch-action:pan-y;
}
.slider__track figure{ margin:0; flex:0 0 100%; aspect-ratio:3/4; background:#eceae5 }
.slider__track img{ width:100%; height:100%; object-fit:cover }
.slider__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.55); backdrop-filter:blur(4px);
  color:var(--ink); font-size:24px; line-height:1;
  display:grid; place-items:center;
}
.slider__nav--prev{ left:10px }
.slider__nav--next{ right:10px }
.slider__count{
  position:absolute; right:12px; bottom:12px;
  background:rgba(0,0,0,.32); color:#fff;
  font-size:11.5px; padding:3px 10px; border-radius:999px;
  font-family:var(--serif-en); letter-spacing:.06em;
}

.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  margin:0 -6px 26px;
}
.grid figure{ margin:0; aspect-ratio:1; overflow:hidden; background:#eceae5 }
.grid img{ width:100%; height:100%; object-fit:cover; transition:transform .4s }
.grid figure:active img{ transform:scale(1.04) }
.grid figure[hidden]{ display:none }

/* ---------------------------------------------------------
   오시는 길
   --------------------------------------------------------- */
.loc__name{ margin:0 0 6px; font-size:18px; letter-spacing:.02em }
.loc__addr{ margin:0 0 4px; font-size:14px; color:var(--ink-soft) }
.loc__hall{ margin:0 0 22px; font-size:13px; color:var(--muted) }

.map{
  height:260px; margin:0 -6px 8px;
  border-radius:2px; overflow:hidden;
  background:var(--paper); box-shadow:var(--shadow);
  display:grid; place-items:center;
}
.map--frame{ display:block }
.map__frame{ width:100%; height:100%; border:0; display:block }
.map__fallback{ text-align:center; padding:20px }
.map__fallback svg{ width:34px; height:34px; fill:var(--accent); margin:0 auto 12px }
.map__fallback p{ margin:0; font-size:13.5px; color:var(--ink-soft) }
.map__fallback small{ display:block; margin-top:8px; font-size:11.5px; color:var(--muted) }
.map__hint{ margin:0 0 20px; font-size:11.5px; color:var(--muted) }

.navi{ display:flex; gap:8px; margin-bottom:34px }
.navi__btn{
  flex:1; padding:12px 0; border-radius:4px;
  background:var(--paper); border:1px solid var(--line);
  font-size:13px; color:var(--ink-soft); text-align:center;
}
.navi__btn:active{ background:var(--tint) }

.trans{ text-align:left }
.trans__item{ padding:18px 0; border-top:1px solid var(--line) }
.trans__item:last-child{ border-bottom:1px solid var(--line) }
.trans__head{
  margin:0 0 8px; display:flex; align-items:center; gap:8px;
  font-size:14.5px; letter-spacing:.02em;
}
.trans__head svg{ width:17px; height:17px; fill:var(--accent-dp); flex:none }
.trans__item p{ margin:0; font-size:13.5px; line-height:1.95; color:var(--ink-soft) }

/* ---------------------------------------------------------
   프로필
   --------------------------------------------------------- */
.profiles{ display:flex; flex-direction:column; gap:34px }
.prof{ display:flex; align-items:center; gap:18px; text-align:left }
.prof:nth-child(2){ flex-direction:row-reverse; text-align:right }
.prof__photo{
  flex:none; width:118px; aspect-ratio:3/4;
  border-radius:60px 60px 4px 4px; overflow:hidden;
  box-shadow:var(--shadow); background:#eceae5;
}
.prof__photo img{ width:100%; height:100%; object-fit:cover }
.prof__label{
  margin:0 0 6px; font-family:var(--serif-en);
  font-size:12px; letter-spacing:.3em; color:var(--accent-dp);
}
.prof__name{ margin:0 0 10px; font-size:19px; letter-spacing:.06em }
.prof__desc{ margin:0 0 10px; font-size:13.5px; line-height:1.85; color:var(--ink-soft) }
.prof__family{ margin:0; font-size:12px; color:var(--muted) }

/* ---------------------------------------------------------
   인터뷰
   --------------------------------------------------------- */
.itv{
  background:var(--paper); border-radius:4px; padding:30px 24px;
  box-shadow:var(--shadow);
}
.itv__q{
  margin:0 0 20px; font-size:14.5px; color:var(--accent-dp);
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.itv__a{ font-size:14px; line-height:2.1; color:var(--ink-soft) }
.itv__a p{ margin:0; min-height:.6em }

/* ---------------------------------------------------------
   안내사항
   --------------------------------------------------------- */
.notice__item{
  background:var(--tint); border-radius:4px;
  padding:22px 22px; text-align:left; margin-bottom:10px;
}
.notice__item h3{
  margin:0 0 8px; font-size:14.5px; font-weight:400;
  display:flex; align-items:center; gap:7px;
}
.notice__item h3 svg{ width:16px; height:16px; fill:var(--accent-dp) }
.notice__item p{ margin:0; font-size:13.5px; line-height:1.9; color:var(--ink-soft) }

/* ---------------------------------------------------------
   마음을 전하는 곳
   --------------------------------------------------------- */
.acc__msg{ font-size:13.5px; line-height:2; color:var(--ink-soft); margin-bottom:26px }
.acc__msg p{ margin:0 }
.acc__group{ margin-bottom:10px }
.acc__head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--accent); color:#fff;
  padding:14px 20px; border-radius:4px; font-size:14px; letter-spacing:.02em;
}
.acc__head i{ font-style:normal; transition:transform .3s; font-size:12px }
.acc__group.open .acc__head i{ transform:rotate(180deg) }
.acc__body{ display:none; background:var(--paper); border:1px solid var(--line); border-top:0; border-radius:0 0 4px 4px }
.acc__group.open .acc__body{ display:block }
.acc__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 18px; border-bottom:1px solid var(--line);
  text-align:left;
}
.acc__row:last-child{ border-bottom:0 }
.acc__row p{ margin:0 }
.acc__bank{ font-size:13px; color:var(--ink-soft); font-family:var(--sans-ko); letter-spacing:-.02em }
.acc__owner{ font-size:12.5px; color:var(--muted); margin-top:2px !important }
.acc__copy{
  flex:none; font-size:12px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft);
}
.acc__copy:active{ background:var(--tint) }

/* ---------------------------------------------------------
   방명록
   --------------------------------------------------------- */
.gb{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px }
.gb__item{
  background:var(--tint); border-radius:4px; padding:18px 20px; text-align:left;
}
.sec--tint .gb__item{ background:var(--paper) }
.gb__from{ margin:0 0 8px; font-size:12.5px; color:var(--accent-dp); letter-spacing:.02em }
.gb__msg{ margin:0 0 10px; font-size:14px; line-height:1.85; white-space:pre-wrap; color:var(--ink) }
.gb__date{ margin:0; font-size:11px; color:var(--muted); font-family:var(--sans-ko) }
.gb__empty{ font-size:13.5px; color:var(--muted); padding:30px 0 }
.gb__btns{ display:flex; gap:8px; justify-content:center }
.gb__btns .btn{ flex:1; max-width:150px; padding:13px 0 }

/* ---------------------------------------------------------
   RSVP
   --------------------------------------------------------- */
.rsvp__desc{ margin:0 0 24px; font-size:13.5px; color:var(--ink-soft) }

/* ---------------------------------------------------------
   엔딩
   --------------------------------------------------------- */
.ending{ position:relative; min-height:78svh; display:grid; place-items:center; overflow:hidden }
.ending__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ending__veil{ position:absolute; inset:0; background:linear-gradient(rgba(40,50,58,.28),rgba(40,50,58,.42)) }
.ending__body{
  position:relative; text-align:center; color:#fff;
  font-size:16px; line-height:2.3; letter-spacing:.03em;
  text-shadow:0 1px 14px rgba(0,0,0,.35); padding:0 24px;
}
.ending__body p{ margin:0 }

.share{ display:flex; gap:8px; padding:34px 30px; background:var(--bg); justify-content:center }
.share .btn{ flex:1; max-width:180px; padding:13px 0; font-size:13px }

.foot{
  padding:0 30px 46px; text-align:center; background:var(--bg);
  color:var(--muted);
}
.foot p{ margin:0; font-size:13px; letter-spacing:.06em }
.foot__sub{ font-family:var(--serif-en); font-size:12px !important; margin-top:4px !important }

/* ---------------------------------------------------------
   모달
   --------------------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px }
.modal[hidden]{ display:none }
.modal__dim{ position:absolute; inset:0; background:rgba(30,32,35,.5); animation:fadeIn .25s }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal__box{
  position:relative; width:100%; max-width:400px;
  background:var(--paper); border-radius:6px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation:popIn .28s cubic-bezier(.2,.9,.3,1.2);
  max-height:82vh; display:flex; flex-direction:column;
}
.modal__box--tall{ max-height:86vh }
@keyframes popIn{ from{ opacity:0; transform:translateY(14px) scale(.97) } to{ opacity:1; transform:none } }
.modal__head{
  margin:0; padding:16px 20px; background:var(--accent); color:#fff;
  font-size:15px; letter-spacing:.03em; position:relative; flex:none;
}
.modal__x{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; font-size:24px; line-height:1; color:#fff;
}
.modal__body{ padding:8px 20px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch }

.ct__row{
  display:flex; align-items:center; gap:12px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.ct__row:last-child{ border-bottom:0 }
.ct__role{ flex:none; width:74px; font-size:12px; color:var(--muted); text-align:left }
.ct__name{ flex:1; font-size:15px; text-align:left; letter-spacing:.02em }
.ct__acts{ display:flex; gap:8px; flex:none }
.ct__ic{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line);
}
.ct__ic svg{ width:16px; height:16px; fill:var(--accent-dp) }
.ct__ic:active{ background:var(--tint) }

.form{ display:flex; flex-direction:column; gap:14px; padding-top:18px; text-align:left }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted) }
.form input,.form textarea,.form select{
  font-family:var(--sans-ko); font-size:14px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line); border-radius:4px;
  background:var(--bg); outline:none; width:100%;
}
.form input:focus,.form textarea:focus,.form select:focus{ border-color:var(--accent) }
.form textarea{ resize:vertical; line-height:1.7 }
.form .btn{ margin-top:6px; width:100%; text-align:center }

/* ---------------------------------------------------------
   라이트박스
   --------------------------------------------------------- */
.lb{ position:fixed; inset:0; z-index:1100; background:rgba(16,18,20,.94); display:grid; place-items:center }
.lb[hidden]{ display:none }
.lb__img{ max-width:100%; max-height:86vh; object-fit:contain }
.lb__x{ position:absolute; top:10px; right:14px; color:#fff; font-size:32px; width:44px; height:44px; line-height:1 }
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  color:#fff; font-size:38px; width:52px; height:52px; opacity:.75;
}
.lb__nav--prev{ left:2px } .lb__nav--next{ right:2px }
.lb__count{
  position:absolute; bottom:22px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.8); font-family:var(--serif-en);
  font-size:13px; letter-spacing:.1em; margin:0;
}

/* ---------------------------------------------------------
   토스트
   --------------------------------------------------------- */
.toast{
  position:fixed; z-index:1200; left:50%; bottom:40px; transform:translate(-50%,20px);
  background:rgba(40,42,45,.92); color:#fff;
  padding:11px 22px; border-radius:999px; font-size:13px;
  opacity:0; pointer-events:none; transition:all .3s;
  font-family:var(--sans-ko); white-space:nowrap;
}
.toast.on{ opacity:1; transform:translate(-50%,0) }

/* ---------------------------------------------------------
   작은 화면 대응
   --------------------------------------------------------- */
@media (max-width:360px){
  .sec{ padding:64px 22px }
  .cover__title span{ font-size:48px !important }
  .prof__photo{ width:100px }
}