@font-face{
  font-family:WeddingKR;
  src:local("NanumMyeongjo"),local("Noto Serif KR"),local("Batang");
  font-display:swap
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:#ebe6df;
  color:#3f3a36;
  font-family:WeddingKR,"Apple SD Gothic Neo",serif
}
.invite{
  width:min(100%,430px);
  margin:auto;
  background:#fbf8f3
}
.panel{
  position:relative;
  min-height:100svh;
  padding:64px 28px;
  background:#fbf8f3;
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid #eee8e0
}
.eyebrow,.mini-date,.year,.sat{
  font-family:Georgia,serif;
  letter-spacing:.34em;
  font-size:10px;
  color:#57504b
}
.hero{
  padding:54px 0 0;
  display:flex;
  flex-direction:column
}
.hero h1{
  font-size:29px;
  font-weight:400;
  margin:28px 0 13px;
  letter-spacing:.03em
}
.hero i,.names i{
  font-style:normal;
  color:#e9a091
}
.date{
  font:15px Georgia,serif;
  letter-spacing:.27em
}
.hero-art{
  position:relative;
  flex:1;
  min-height:570px;
  margin-top:20px;
  overflow:hidden
}
.hero-art:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,#fbf8f3 0%,transparent 15%,transparent 70%,#fbf8f3 100%);
  pointer-events:none
}
.hero-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  filter:saturate(.72) brightness(1.04) contrast(.9)
}
.hero-bottom{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:23px
}
.hero-bottom p{
  margin:0 0 6px;
  font-size:13px
}
.hero-bottom small{
  font:8px Georgia,serif;
  letter-spacing:.27em
}
.mouse{
  display:block;
  margin:22px auto 4px;
  font-size:17px
}
.hero-bottom b{
  font:7px Georgia,serif;
  letter-spacing:.2em;
  font-weight:400
}
.greeting{
  display:flex;
  flex-direction:column;
  align-items:center
}
.greeting h2{
  font-size:20px;
  font-weight:400;
  line-height:1.95;
  margin:56px 0 28px
}
.greeting p{
  font-size:14px;
  line-height:2.1;
  margin:0
}
.botanical{
  color:#8d9b7b;
  font-size:25px;
  margin:34px 0
}
.script{
  font-family:cursive;
  color:#96908a;
  font-size:26px;
  line-height:1.05;
  transform:rotate(-7deg);
  margin:8px 0 auto
}
.names{
  font-size:16px;
  letter-spacing:.11em
}
.mini-date{
  margin-top:15px;
  font-size:9px
}
.day{
  padding-bottom:0
}
.year{
  margin-top:45px;
  font-size:12px
}
.big-date{
  font:38px Georgia,serif;
  letter-spacing:.13em;
  margin:12px 0 5px
}
.sat{
  font-size:13px
}
.wedding-calendar{
  width:min(100%,294px);
  margin:38px auto 3px;
  color:#625c57
}
.wedding-calendar__month{
  margin-bottom:17px;
  font:14px Georgia,serif;
  letter-spacing:.16em
}
.wedding-calendar__grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  align-items:center;
  row-gap:8px
}
.wedding-calendar__weekday{
  color:#9b846a;
  font-size:10px
}
.wedding-calendar__date{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  justify-self:center;
  color:#625c57;
  font:12px Georgia,serif
}
.wedding-calendar__date.is-wedding-day{
  border-radius:50%;
  background:#9b846a;
  color:white
}
.greeting .wedding-calendar{
  margin:32px auto 0
}
.day h2{
  font-size:16px;
  font-weight:400;
  margin:25px 0
}
.rule{
  width:34px;
  height:1px;
  background:#cfc5bb;
  margin:28px auto
}
.day h3{
  font-size:19px;
  margin:0 0 8px
}
.day>p{
  font-size:12px;
  color:#706a64;
  margin:0
}
.quick{
  display:flex;
  justify-content:center;
  gap:38px;
  margin:33px 0 24px
}
.quick a,.quick button{
  border:0;
  background:none;
  color:#6e6862;
  text-decoration:none;
  font:17px Georgia,serif;
  padding:0
}
.quick span{
  display:block;
  font:10px WeddingKR,serif;
  margin-top:7px;
  white-space:nowrap
}
.venue-image{
  height:260px;
  margin:0 -28px
}
.venue-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.6) sepia(.05)
}
.directions{
  padding-top:38px;
  text-align:left
}
.directions>h2,.gallery>h2,.account>h2,.story>h2{
  text-align:center;
  font-size:17px;
  margin:0 0 25px
}
.map-wrap{
  background:#eeeae5;
  border-radius:10px;
  padding:8px
}
/*
.map-tabs{
  display:flex;
  gap:5px;
  margin-bottom:8px
}
.map-tabs>*{
  flex:1;
  text-align:center;
  font-size:10px;
  background:#f6f3ef;
  padding:9px 3px;
  border-radius:7px;
  font-weight:400
}
.map-tabs b{
  background:#514c47;
  color:white
}*/
.map-image{
  height:245px;
  border-radius:7px;
  overflow:hidden;
  position:relative;
  background:#eee
}
.map-image img{
  width:100%;
  height:100%;
  object-fit:cover
}
.pin{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  font-size:27px;
  color:#4e4945;
  text-align:center
}
.pin small{
  display:block;
  background:white;
  color:#4e4945;
  font:10px WeddingKR,serif;
  padding:7px 10px;
  margin-top:3px;
  border-radius:6px;
  white-space:nowrap;
  box-shadow:0 2px 8px #0002
}
.place{
  display:flex;
  gap:12px;
  padding:17px 5px 14px;
  align-items:flex-start
}
.place>b{
  font-size:18px
}
.place p{
  margin:0
}
.place strong,.place span{
  display:block
}
.place strong{
  font-size:13px
}
.place span{
  font-size:10px;
  color:#7a746e;
  margin-top:5px
}
.map-buttons{
  display:flex;
  gap:7px
}
.map-buttons a{
  flex:1;
  border:1px solid #d9d2ca;
  background:white;
  border-radius:7px;
  padding:11px 5px;
  text-align:center;
  text-decoration:none;
  color:#48433f;
  font-size:11px
}
.map-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  margin-right:3px;
  font-weight:700;
  line-height:1
}
.map-brand--naver{
  color:#03c75a
}
.map-brand--kakao{
  border-radius:3px;
  background:#fee500;
  color:#3c1e1e
}
.transport{
  margin-top:22px
}
.transport>div{
  display:flex;
  gap:13px;
  margin:18px 0
}
.transport>div>b{
  width:20px;
  color:#9b846a
}
.transport p{
  margin:0
}
.transport strong,.transport span{
  display:block
}
.transport strong{
  font-size:12px;
  margin-bottom:5px
}
.transport span{
  font-size:11px;
  color:#68625d
}
.gallery{
  padding:40px 14px 16px;
  min-height:auto
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px
}
.gallery-grid img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:4px;
  filter:saturate(.82);
  cursor:zoom-in
}
.guestbook{
  min-height:auto;
  padding-top:48px
}
.guestbook-form{
  display:grid;
  gap:12px;
  margin-top:26px;
  text-align:left
}
.guestbook-form label{
  display:grid;
  gap:7px;
  font-size:11px;
  color:#625c57
}
.guestbook-form input,.guestbook-form textarea{
  box-sizing:border-box;
  width:100%;
  border:1px solid #d9d2ca;
  border-radius:4px;
  background:white;
  padding:10px 11px;
  color:#48433f;
  font:12px WeddingKR,serif;
  resize:vertical
}
.guestbook-form textarea{
  min-height:92px
}
.guestbook-form button{
  border:0;
  border-radius:5px;
  background:#514c47;
  color:white;
  padding:12px;
  font:12px WeddingKR,serif
}
.guestbook-form button:disabled{
  cursor:wait;
  opacity:.65
}
.guestbook-status{
  min-height:18px;
  margin:12px 0 4px;
  color:#7a746e;
  font-size:11px
}
.guestbook-list{
  border-top:1px solid #e5ded6;
  text-align:left
}
.guestbook-entry{
  border-bottom:1px solid #e5ded6;
  padding:15px 4px
}
.guestbook-entry__meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#7a746e;
  font-size:10px
}
.guestbook-entry__name{
  color:#48433f;
  font-weight:700
}
.guestbook-entry__message{
  margin:8px 0 0;
  color:#625c57;
  font-size:12px;
  line-height:1.7;
  overflow-wrap:anywhere;
  white-space:pre-wrap
}
.guestbook-empty{
  margin:0;
  padding:20px 4px;
  color:#7a746e;
  font-size:11px;
  text-align:center
}
.guestbook-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin-top:18px;
  color:#625c57;
  font-size:11px
}
.guestbook-pagination button{
  width:28px;
  height:28px;
  border:1px solid #d9d2ca;
  border-radius:4px;
  background:white;
  color:#48433f;
  font-size:18px;
  line-height:1
}
.guestbook-pagination button:disabled{
  cursor:default;
  color:#c4bdb5
}
.account{
  min-height:auto;
  padding-top:48px
}
.account .botanical{
  margin:20px 0
}
.lead{
  font-size:13px;
  line-height:1.9
}
.account-tabs{
  display:flex;
  background:#f0ece7;
  border-radius:8px;
  padding:3px;
  margin:28px 0 12px
}
.account-tabs button{
  flex:1;
  border:0;
  background:transparent;
  padding:10px;
  border-radius:6px;
  font:11px WeddingKR,serif;
  color:#625c57
}
.account-tabs .active{
  background:#514c47;
  color:white
}
.account-list>div{
  display:flex;
  align-items:center;
  border-bottom:1px solid #e5ded6;
  padding:14px 4px;
  text-align:left
}
.account-list p{
  flex:1;
  margin:0
}
.account-list b,.account-list span{
  display:block
}
.account-list b{
  font-size:12px
}
.account-list span{
  font-size:11px;
  margin-top:6px
}
.account-list button{
  border:0;
  background:none;
  font-size:17px;
  color:#777
}
.hidden{
  display:none
}
.thanks{
  font-size:11px;
  line-height:1.8;
  color:#79736d;
  margin-top:35px
}
.story{
  min-height:auto;
  padding-top:48px
}
.timeline{
  width:80%;
  margin:35px auto 0;
  text-align:left;
  position:relative
}
.timeline:before{
  content:"";
  position:absolute;
  left:15px;
  top:16px;
  bottom:20px;
  width:1px;
  background:#d5cdc4
}
.timeline>div{
  display:flex;
  gap:20px;
  position:relative;
  margin-bottom:27px
}
.timeline em{
  width:31px;
  height:31px;
  border:1px solid #cfc7bd;
  background:#fbf8f3;
  border-radius:50%;
  font-style:normal;
  text-align:center;
  line-height:29px;
  z-index:1
}
.timeline p{
  margin:0
}
.timeline b,.timeline span{
  display:block
}
.timeline b{
  font:11px Georgia,serif;
  letter-spacing:.13em;
  margin:2px 0 7px
}
.timeline span{
  font-size:12px
}
.story blockquote{
  font-size:13px;
  line-height:1.9;
  margin:0
}
.ending{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.ending h2{
  font-size:20px;
  font-weight:400;
  line-height:2.05;
  margin:0
}
.ending h2 strong{
  font-weight:400;
  display:block;
  margin-top:10px
}
.ending .rule{
  margin:31px auto
}
.end-en{
  margin-top:58px;
  line-height:2;
  font-size:8px
}
.corner{
  position:absolute;
  color:#a2aa91;
  font-size:42px;
  opacity:.55
}
.c1{
  right:15px;
  top:25px
}
.c2{
  left:15px;
  bottom:25px
}
#toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%,20px);
  opacity:0;
  z-index:20;
  background:#45413e;
  color:white;
  border-radius:22px;
  padding:10px 17px;
  font-size:11px;
  transition:.25s;
  pointer-events:none
}
#toast.show{
  opacity:1;
  transform:translate(-50%,0)
}
.gallery-lightbox{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#111;color:white}.gallery-lightbox::backdrop{background:#111}.gallery-lightbox__track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.gallery-lightbox__track::-webkit-scrollbar{display:none}.gallery-lightbox__track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center}.gallery-lightbox button{position:absolute;z-index:2;border:0;color:white;background:#0008;cursor:pointer}.gallery-lightbox__close{top:18px;right:18px;width:38px;height:38px;border-radius:50%;font-size:28px;line-height:1}.gallery-lightbox__move{top:50%;width:40px;height:56px;transform:translateY(-50%);font-size:38px}.gallery-lightbox__move--previous{left:10px}.gallery-lightbox__move--next{right:10px}
@media(min-width:560px){
body{
  padding:28px 0
}
.invite{
  box-shadow:0 8px 40px #00000012
}
.panel{
  min-height:850px
}
}