:root{
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --soft:#EEF2F5;
  --text:#252A30;
  --muted:#747D86;
  --accent:#6F8193;
  --line:#DCE2E7;
  --shadow:0 20px 60px rgba(39,50,61,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:#E9EDF0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
button,a,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.shell{
  width:min(100%,520px);
  margin:0 auto;
  background:var(--surface);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#E5E9ED;
  overflow:hidden;
}
.hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.025);
  transition:opacity 2s ease,transform 2.2s ease;
}
.hero.is-visible .hero__image{
  opacity:1;
  transform:scale(1);
}
.hero__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(15,20,25,.03) 35%,rgba(15,20,25,.62) 100%);
  opacity:0;
  transition:opacity 1.6s ease .4s;
}
.hero.is-visible .hero__veil{opacity:1}
.hero__copy{
  position:relative;
  z-index:2;
  width:100%;
  padding:32px 24px max(50px,env(safe-area-inset-bottom));
  text-align:center;
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 1.2s ease .75s,transform 1.2s ease .75s;
}
.hero.is-visible .hero__copy{opacity:1;transform:none}
.hero__copy h1{
  margin:6px 0 10px;
  font-size:clamp(28px,8vw,42px);
  line-height:1.16;
  font-weight:400;
  letter-spacing:-.035em;
  word-break:keep-all;
}
.hero__caption{
  margin:0 0 17px;
  font-size:clamp(11px,3.4vw,13px);
  opacity:.84;
}
.hero__date,.hero__venue{
  margin:3px 0;
  font-size:clamp(11px,3.3vw,13px);
}
.hero__venue{opacity:.8}
.hero__handwriting{
  position:absolute;
  z-index:3;
  left:12%;
  right:12%;
  top:42%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
}
.hero__handwriting span{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  color:#fff;
  font-family:"Segoe Script","Brush Script MT","Apple Chancery","Snell Roundhand",cursive;
  font-size:clamp(27px,9.5vw,47px);
  line-height:1.2;
  letter-spacing:-.035em;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
  clip-path:inset(0 100% 0 0);
  opacity:0;
}
.hero.is-visible .hero__handwriting span.is-writing{
  opacity:1;
  animation:handwritingReveal 1.9s cubic-bezier(.22,.75,.26,1) .7s forwards;
}
.hero__handwriting img{
  display:block;
  width:min(76%,330px);
  max-height:150px;
  object-fit:contain;
  opacity:0;
  transform:scale(.97);
}
.hero.is-visible .hero__handwriting img.is-writing{
  animation:handwritingImageIn 1.8s ease .65s forwards;
}
@keyframes handwritingReveal{
  from{clip-path:inset(0 100% 0 0);opacity:.25}
  to{clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes handwritingImageIn{
  from{opacity:0;transform:scale(.97)}
  to{opacity:1;transform:scale(1)}
}

.hero__scroll{
  position:absolute;
  z-index:3;
  bottom:18px;
  left:50%;
  width:1px;
  height:24px;
  background:#ffffff4d;
  overflow:hidden;
}
.hero__scroll span{
  display:block;
  width:100%;
  height:45%;
  background:#fff;
  animation:scrollHint 1.7s ease-in-out infinite;
}
@keyframes scrollHint{
  0%{transform:translateY(-120%)}
  100%{transform:translateY(240%)}
}
.section{
  padding:76px 18px;
  background:var(--surface);
}
.section--soft{background:var(--soft)}
.inner{width:100%;margin:0 auto;text-align:center}
.inner--narrow{max-width:410px}
.eyebrow{
  margin:0 0 10px;
  color:var(--accent);
  font-size:9px;
  line-height:1.3;
  letter-spacing:.24em;
  font-weight:600;
}
.eyebrow--light{color:#ffffffc9}
.section-title{
  margin:0 0 22px;
  font-size:clamp(23px,6.4vw,31px);
  line-height:1.45;
  letter-spacing:-.045em;
  font-weight:400;
  white-space:pre-line;
  word-break:keep-all;
}
.section-title--date{
  font-size:clamp(23px,6vw,29px);
  letter-spacing:-.025em;
}
.description{
  max-width:410px;
  margin:0 auto 22px;
  color:var(--muted);
  font-size:clamp(11px,3.3vw,13px);
  word-break:keep-all;
}
.description--compact{margin-bottom:4px}
.invitation-body{
  margin:27px 0 34px;
  color:#626B74;
  font-size:clamp(12px,3.5vw,14px);
}
.invitation-body p{margin:5px 0}
.family-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.family-line>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.family-line span{
  color:#818A93;
  font-size:clamp(9px,2.9vw,11px);
  word-break:keep-all;
}
.family-line strong{
  font-size:clamp(14px,4vw,17px);
  font-weight:500;
}
.family-line b{font-size:12px;color:var(--accent);font-weight:400}

/* Calendar */
.calendar{
  width:min(100%,360px);
  margin:27px auto 18px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:3px;
}
.calendar__head{
  padding:5px 0 8px;
  color:#99A1A9;
  font-size:8px;
  letter-spacing:.05em;
}
.calendar__cell{
  position:relative;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:clamp(10px,3.2vw,12px);
}
.calendar__cell span{
  position:relative;
  z-index:2;
}
.calendar__cell.is-day{
  color:#fff;
  background:transparent;
}
.calendar__cell.is-day::before{
  content:"";
  position:absolute;
  z-index:1;
  width:34px;
  height:31px;
  left:50%;
  top:50%;
  transform:translate(-50%,-48%);
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='black' d='M16 27.4C14.7 26.2 3 17.1 3 8.7 3 3.9 6.7 1 10.7 1c2.5 0 4.4 1.2 5.3 2.8C16.9 2.2 18.8 1 21.3 1 25.3 1 29 3.9 29 8.7 29 17.1 17.3 26.2 16 27.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='black' d='M16 27.4C14.7 26.2 3 17.1 3 8.7 3 3.9 6.7 1 10.7 1c2.5 0 4.4 1.2 5.3 2.8C16.9 2.2 18.8 1 21.3 1 25.3 1 29 3.9 29 8.7 29 17.1 17.3 26.2 16 27.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 6px 10px rgba(111,129,147,.24));
}
.countdown{
  margin:9px 0 19px;
  color:var(--accent);
  font-size:16px;
  font-weight:600;
  letter-spacing:.08em;
}
.button-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 15px;
  border-radius:999px;
  border:0;
  text-decoration:none;
  font-size:11px;
  white-space:nowrap;
}
.button--outline{border:1px solid #C7D0D8;background:#fff;color:#46515C}
.button--dark{background:#343D46;color:#fff}
.button--share{background:#FEE500;color:#191919}
.button--wide{width:min(100%,320px)}

/* gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:26px;
}
.gallery button{
  min-width:0;
  border:0;
  padding:0;
  background:none;
  overflow:hidden;
  border-radius:4px;
}
.gallery img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .3s ease;
}
.gallery button:nth-child(5n+1){grid-row:span 2}
.gallery button:nth-child(5n+1) img{height:100%;aspect-ratio:auto}
.gallery button:active img{transform:scale(.985)}

/* map */
.venue-hall{
  margin:-13px 0 4px;
  color:#6F7881;
  font-size:12px;
}
.text-button{
  border:0;
  background:none;
  padding:8px 9px;
  color:#52616E;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px;
}
.map-frame{
  margin:22px 0 16px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#E4E9ED;
  aspect-ratio:4/3;
}
.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.transport{
  margin-top:26px;
  border-top:1px solid var(--line);
  text-align:left;
}
.transport__item{
  padding:15px 2px;
  border-bottom:1px solid var(--line);
}
.transport__item strong{
  display:block;
  margin-bottom:3px;
  font-size:12px;
}
.transport__item p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  word-break:keep-all;
}

/* contact - elegant wedding layout */
.contact-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 94% 4%, rgba(221,203,194,.20), transparent 22%),
    radial-gradient(circle at 7% 95%, rgba(207,220,214,.20), transparent 21%),
    var(--surface);
}
.contact-section::before,
.contact-section::after{
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}
.contact-section::before{
  right:-88px;
  top:78px;
  background:radial-gradient(circle,rgba(226,206,198,.16),rgba(226,206,198,0) 69%);
}
.contact-section::after{
  left:-92px;
  bottom:34px;
  background:radial-gradient(circle,rgba(203,216,211,.15),rgba(203,216,211,0) 68%);
}
.contact-section .inner{position:relative;z-index:1}
.contact-bloom{
  width:76px;
  height:35px;
  margin:0 auto 8px;
  color:#A89487;
  opacity:.82;
}
.contact-bloom svg{width:100%;height:100%;display:block}
.contact-title{margin-bottom:7px}
.contact-description{
  max-width:360px;
  margin-bottom:27px;
  font-size:11px;
  line-height:1.75;
}

.couple-contacts{
  display:grid;
  gap:11px;
}
.contact-primary-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  min-height:94px;
  padding:16px 17px 16px 18px;
  border:1px solid #E3E4E2;
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(250,250,249,.92));
  box-shadow:0 9px 30px rgba(56,63,69,.055);
  text-align:left;
  overflow:hidden;
}
.contact-primary-card::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-24px;
  width:88px;
  height:88px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(194,210,220,.17),rgba(194,210,220,0) 68%);
  pointer-events:none;
}
.contact-primary-card--bride::after{
  background:radial-gradient(circle,rgba(229,207,207,.18),rgba(229,207,207,0) 68%);
}
.contact-primary-card__copy{
  min-width:0;
  position:relative;
  z-index:1;
}
.contact-primary-card__eyebrow{
  display:block;
  margin-bottom:4px;
  color:#B19D8E;
  font-size:8px;
  line-height:1;
  letter-spacing:.17em;
  font-weight:700;
}
.contact-primary-card__title{
  display:block;
  margin-bottom:3px;
  color:#464C52;
  font-size:12px;
  font-weight:500;
}
.contact-primary-card__name{
  display:block;
  color:#747C83;
  font-size:10px;
  font-weight:400;
}
.contact-primary-card__actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:11px;
}
.contact-action{
  width:48px;
  display:grid;
  justify-items:center;
  gap:4px;
  color:#626B73;
  text-decoration:none;
}
.contact-action__icon{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#F2F5F6;
  border:1px solid #E0E6E8;
  color:#72828D;
}
.contact-primary-card--bride .contact-action__icon{
  background:#F8F1F2;
  border-color:#EADFE1;
  color:#9A7C83;
}
.contact-action svg{
  width:16px;
  height:16px;
  display:block;
}
.contact-action small{
  color:#90979D;
  font-size:7px;
  white-space:nowrap;
}
.contact-action.is-disabled{
  opacity:.28;
  pointer-events:none;
  filter:grayscale(.2);
}

.contact-divider{
  display:grid;
  grid-template-columns:1fr 34px 1fr;
  align-items:center;
  gap:8px;
  margin:28px 6px 23px;
  color:#B1AAA1;
}
.contact-divider>span{height:1px;background:#E5E2DE}
.contact-divider svg{width:34px;height:18px}

.parent-contacts{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}
.parent-panel{
  position:relative;
  min-width:0;
  padding:15px 11px 13px;
  border:1px solid #E2E4E4;
  border-radius:17px;
  background:rgba(252,252,251,.94);
  box-shadow:0 8px 26px rgba(54,62,69,.045);
  overflow:hidden;
}
.parent-panel::before{
  content:"";
  position:absolute;
  top:-33px;
  left:50%;
  width:92px;
  height:62px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(205,218,214,.16),rgba(205,218,214,0) 70%);
}
.parent-panel--bride::before{
  background:radial-gradient(circle,rgba(229,211,210,.17),rgba(229,211,210,0) 70%);
}
.parent-panel__title{
  position:relative;
  margin:0 0 12px;
  padding-bottom:10px;
  color:#606970;
  font-size:10px;
  font-weight:600;
  text-align:center;
}
.parent-panel__title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:22px;
  height:1px;
  transform:translateX(-50%);
  background:#D8D6D1;
}
.parent-person{
  min-height:104px;
  padding:11px 1px 9px;
  border-top:1px solid #ECEAE6;
  text-align:center;
}
.parent-person:first-of-type{border-top:0}
.parent-person__identity{
  min-height:33px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:4px;
}
.parent-person__role{
  color:#9A9187;
  font-size:8px;
}
.parent-person__name{
  color:#4B5156;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}
.parent-person__name .deceased-mark{
  margin-right:2px;
  color:#888178;
  font-size:.92em;
  font-weight:500;
}
.parent-person__actions{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:9px;
}
.parent-mini-action{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid #E0E3E3;
  border-radius:50%;
  background:#F8FAFA;
  color:#738087;
  text-decoration:none;
}
.parent-mini-action svg{width:13px;height:13px}
.parent-mini-action--talk{
  width:auto;
  min-width:38px;
  padding:0 7px;
  border-color:#E8DFAE;
  background:#FFF4B9;
  color:#514A2E;
  font-size:7px;
  font-weight:800;
  letter-spacing:.02em;
}
.parent-mini-action.is-disabled{
  opacity:.24;
  pointer-events:none;
}
.parent-person--deceased{
  display:grid;
  align-content:center;
}
.parent-person--deceased .parent-person__identity{
  min-height:auto;
}
.parent-person--deceased .parent-person__name{
  color:#696A68;
  font-weight:500;
}
.parent-person--deceased .parent-person__actions{display:none}
.parent-person--deceased::after{
  content:"";
  width:22px;
  height:1px;
  margin:9px auto 0;
  background:#DDD8D1;
}

.contact-footnote{
  margin:23px 0 0;
  color:#9B948C;
  font-size:8px;
  letter-spacing:.05em;
}

@media(max-width:360px){
  .contact-primary-card{
    min-height:88px;
    padding:14px 12px;
    gap:8px;
  }
  .contact-primary-card__actions{gap:6px}
  .contact-action{width:42px}
  .contact-action__icon{width:32px;height:32px}
  .parent-contacts{gap:7px}
  .parent-panel{padding-left:8px;padding-right:8px}
  .parent-person__identity{gap:3px}
  .parent-person__name{font-size:10px}
  .parent-person__role{font-size:7px}
  .parent-mini-action{width:29px;height:29px}
}


/* accounts always open */
.account-heading{
  margin:25px 0 9px;
  text-align:left;
  color:#53606B;
  font-size:11px;
  font-weight:700;
}
.account-heading--bride{margin-top:34px}
.account-list{display:grid;gap:8px}
.account-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  text-align:left;
}
.account-card__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
}
.account-card__label{
  display:block;
  margin-bottom:2px;
  color:#929AA2;
  font-size:9px;
}
.account-card__name{font-size:12px;font-weight:600}
.account-card__bank{
  color:#66717B;
  font-size:10px;
  text-align:right;
}
.account-card__number{
  margin:9px 0;
  color:#4A545D;
  font-size:12px;
  word-break:break-all;
}
.account-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mini-button{
  min-height:31px;
  padding:0 10px;
  border:1px solid #D3DAE0;
  border-radius:999px;
  background:#F8FAFB;
  color:#53606B;
  font-size:10px;
}

/* closing */
.closing{
  position:relative;
  min-height:68svh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  background:#303840;
  color:#fff;
}
.closing>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.closing__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(18,23,27,.66));
}
.closing__copy{
  position:relative;
  z-index:2;
  padding:38px 20px 48px;
  text-align:center;
}
.closing__copy p{margin:0 0 7px;font-size:11px;opacity:.84}
.closing__copy strong{font-size:20px;font-weight:400}
footer{
  padding:24px 15px 32px;
  background:#272F36;
  color:#89939C;
  text-align:center;
  font-size:9px;
}

/* music */
.music-toggle{
  position:fixed;
  z-index:800;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,calc((100vw - 520px)/2 + 12px));
  width:39px;
  height:39px;
  border:1px solid #ffffff66;
  border-radius:50%;
  background:#26313a9e;
  color:#fff;
  backdrop-filter:blur(8px);
}
.music-toggle.is-playing{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}

/* lightbox */
.lightbox{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:rgba(13,17,21,.96);
  color:#fff;
}
.lightbox::backdrop{background:transparent}
.lightbox figure{
  width:100%;
  height:100%;
  margin:0;
  display:grid;
  place-items:center;
}
.lightbox img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.lightbox figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:max(18px,env(safe-area-inset-bottom));
  text-align:center;
  color:#ffffffaa;
  font-size:10px;
}
.lightbox__close,.lightbox__nav{
  position:absolute;
  z-index:4;
  border:0;
  background:transparent;
  color:#fff;
}
.lightbox__close{top:7px;right:10px;font-size:33px}
.lightbox__nav{
  top:50%;
  transform:translateY(-50%);
  padding:16px 10px;
  font-size:48px;
}
.lightbox__nav--prev{left:0}
.lightbox__nav--next{right:0}

/* toast / reveal */
.toast{
  position:fixed;
  z-index:2000;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translate(-50%,12px);
  max-width:calc(100vw - 26px);
  padding:9px 13px;
  border-radius:999px;
  background:#27313A;
  color:#fff;
  text-align:center;
  font-size:10px;
  opacity:0;
  pointer-events:none;
  transition:.22s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:360px){
  .hero__handwriting{left:7%;right:7%;top:40%}
  .hero__handwriting span{font-size:clamp(23px,9vw,31px)}
  .calendar__cell.is-day::before{width:30px;height:28px}
}
@media(max-width:330px){
  .section{padding:66px 14px}
  .hero__copy{padding-left:15px;padding-right:15px}
  .button-row{display:grid;grid-template-columns:1fr}
  .button-row .button{width:100%}
  .family-line{gap:4px}
  .account-card{padding:12px}
  .contact-row{padding:11px}
}
@media(min-width:521px){
  body{padding:18px 0}
  .shell{border-radius:18px}
}


/* ===== V2 personalized hero / performance fixes ===== */
.hero__mark{
  position:absolute;
  z-index:3;
  left:18px;
  right:18px;
  top:43%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  color:#fff;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.25s ease .55s, transform 1.25s ease .55s;
}
.hero.is-visible .hero__mark{opacity:1;transform:translateY(-50%)}
.hero__mark span{
  display:block;
  font-family:"Segoe Script","Brush Script MT","Apple Chancery","Snell Roundhand",cursive;
  font-size:clamp(31px,10vw,50px);
  line-height:1.05;
  font-weight:400;
  white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.22);
}
.hero__mark strong{
  display:block;
  max-width:100%;
  font-size:clamp(22px,6.8vw,32px);
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.045em;
  word-break:keep-all;
  text-shadow:0 2px 13px rgba(0,0,0,.25);
}
.hero__mark em{
  display:block;
  margin-top:4px;
  font-size:clamp(16px,5.3vw,24px);
  line-height:1.35;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.045em;
  word-break:keep-all;
  text-shadow:0 2px 13px rgba(0,0,0,.25);
}
.hero__copy{
  pointer-events:none;
}
.personal-label{
  display:inline-block;
  margin:0 0 9px!important;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:rgba(20,25,30,.18);
  color:#fff;
  font-size:9px!important;
  letter-spacing:.04em;
  backdrop-filter:blur(5px);
}
.invitation-personal{
  display:inline-block;
  margin:0 0 18px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--soft);
  color:var(--accent);
  font-size:10px;
  font-weight:600;
}
@media(max-width:360px){
  .hero__mark{left:12px;right:12px;top:41%}
  .hero__mark span{font-size:clamp(27px,9.5vw,35px)}
  .hero__mark strong{font-size:clamp(19px,6.5vw,25px)}
  .hero__mark em{font-size:clamp(14px,5vw,20px)}
}


/* =========================================================
   V2.1 - Hero script placement / write-on animation
   - Keep the names near the original position.
   - Move only "Our Wedding" upward so it does not cover faces.
   - Reveal only the English script from left to right.
   ========================================================= */

.hero__mark{
  opacity:1;
  transition:none;
  transform:translateY(-50%);
}

/* Public/friend name line: do not clip it. */
.hero__mark strong,
.hero__mark em{
  opacity:0;
  transform:translateY(5px);
}

.hero.is-visible .hero__mark strong{
  animation:heroMainAppear .72s ease 1.55s forwards;
}

.hero.is-visible .hero__mark em{
  animation:heroMainAppear .72s ease 1.75s forwards;
}

/* Put ONLY Our Wedding well above the faces. */
.hero__mark span{
  position:absolute;
  left:50%;
  bottom:calc(100% + 58px);
  width:max-content;
  max-width:calc(100vw - 54px);
  transform:translateX(-50%);
  margin:0;
  overflow:hidden;
  white-space:nowrap;

  /* Start completely unwritten. */
  opacity:1;
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.18));
}

/* A faint ink tail makes the reveal feel less like a simple fade. */
.hero__mark span::after{
  content:"";
  position:absolute;
  top:8%;
  right:-3px;
  width:7px;
  height:84%;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  filter:blur(3px);
  opacity:0;
}

.hero.is-visible .hero__mark span{
  animation:heroScriptWrite 2.15s cubic-bezier(.28,.02,.25,1) .55s forwards;
}

.hero.is-visible .hero__mark span::after{
  animation:heroInkTail 2.15s linear .55s forwards;
}

@keyframes heroScriptWrite{
  0%{
    clip-path:inset(0 100% 0 0);
    -webkit-clip-path:inset(0 100% 0 0);
  }
  12%{
    clip-path:inset(0 91% 0 0);
    -webkit-clip-path:inset(0 91% 0 0);
  }
  42%{
    clip-path:inset(0 58% 0 0);
    -webkit-clip-path:inset(0 58% 0 0);
  }
  72%{
    clip-path:inset(0 27% 0 0);
    -webkit-clip-path:inset(0 27% 0 0);
  }
  100%{
    clip-path:inset(0 0 0 0);
    -webkit-clip-path:inset(0 0 0 0);
  }
}

@keyframes heroInkTail{
  0%,6%{opacity:0}
  10%,91%{opacity:.68}
  100%{opacity:0}
}

@keyframes heroMainAppear{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

/* Galaxy Fold / narrow screens */
@media(max-width:360px){
  .hero__mark span{
    bottom:calc(100% + 46px);
    max-width:calc(100vw - 26px);
    font-size:clamp(25px,9.2vw,32px);
  }
}



/* =========================================================
   V2.3 — Full Editorial Wedding Design
   ========================================================= */
:root{
  --w-ivory:#FCFBF8;
  --w-paper:#F7F5F1;
  --w-sage:#8A968D;
  --w-sage-soft:#EEF2EE;
  --w-rose:#B79CA0;
  --w-rose-soft:#F7F0F1;
  --w-taupe:#8F8175;
  --w-ink:#404346;
  --w-line:#E5E2DC;
  --w-shadow:0 16px 42px rgba(62,65,66,.065);
}

body{
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.7),transparent 420px),
    #ECE9E4;
  color:var(--w-ink);
}
.shell{
  background:var(--w-ivory);
  box-shadow:0 20px 70px rgba(53,55,56,.10);
}

/* every section now shares the same visual language */
.section{
  position:relative;
  padding:82px 20px;
  background:var(--w-ivory);
}
.section--soft{
  background:
    radial-gradient(circle at 102% 10%,rgba(188,206,195,.12),transparent 27%),
    radial-gradient(circle at -8% 92%,rgba(223,204,203,.11),transparent 28%),
    #F4F5F2;
}
.section-ornament{
  width:66px;
  height:28px;
  margin:0 auto 8px;
  color:#AA9B8D;
  opacity:.74;
}
.section-ornament svg{display:block;width:100%;height:100%}
.eyebrow{
  color:#9D8D7F;
  font-size:8px;
  letter-spacing:.28em;
}
.section-title{
  color:#424548;
  font-size:clamp(22px,6.2vw,30px);
  font-weight:400;
  letter-spacing:-.038em;
}
.description{
  color:#7F807D;
  font-size:clamp(10px,3.2vw,12px);
  line-height:1.8;
}

/* invitation — letter paper */
#invitation .inner{
  position:relative;
}
#invitation .inner::before{
  content:"";
  position:absolute;
  inset:-23px -2px -24px;
  z-index:-1;
  border:1px solid #ECE8E1;
  border-radius:22px;
  background:linear-gradient(180deg,#FFFEFC,#FBFAF7);
  box-shadow:var(--w-shadow);
}
.invitation-body{
  margin:29px 0 36px;
  color:#676A6B;
  font-size:clamp(12px,3.5vw,14px);
  line-height:1.85;
}
.family-line{
  margin:0 8px;
  padding-top:24px;
  border-top:1px solid #E7E2DB;
}
.family-line b{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid #D9D4CD;
  border-radius:50%;
  color:#A79789;
  font-size:10px;
}

/* calendar — wedding card */
.calendar-card{
  position:relative;
  width:min(100%,410px);
  margin:26px auto 0;
  padding:27px 18px 21px;
  border:1px solid #E5E2DC;
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,249,246,.96));
  box-shadow:var(--w-shadow);
  overflow:hidden;
}
.calendar-card::before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-47px;
  top:-52px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,156,160,.12),rgba(183,156,160,0) 70%);
}
.calendar-card__rings{
  position:absolute;
  left:18px;
  top:17px;
  width:34px;
  height:17px;
}
.calendar-card__rings i{
  position:absolute;
  top:2px;
  width:13px;
  height:13px;
  border:1px solid #C7BBAF;
  border-radius:50%;
}
.calendar-card__rings i:first-child{left:4px}
.calendar-card__rings i:last-child{left:14px}
.calendar{margin:12px auto 15px}
.calendar__head{color:#A7A29A}
.calendar__cell{color:#5D6265}
.calendar__cell.is-day::before{
  background:#A99195;
  filter:drop-shadow(0 6px 12px rgba(169,145,149,.23));
}
.countdown{
  color:#8B777B;
  font-size:14px;
  letter-spacing:.13em;
}
.calendar-card .description{max-width:310px;margin-bottom:17px}

/* buttons */
.button{
  min-height:40px;
  padding:0 15px;
  font-size:10px;
  letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.button:active{transform:scale(.985)}
.button--outline{
  border-color:#D9D5CE;
  background:#FFFDFC;
  color:#5E6568;
}
.button--dark{
  background:#56615B;
  box-shadow:0 7px 18px rgba(86,97,91,.14);
}
.text-button{
  color:#6F7874;
  text-decoration:none;
  border-bottom:1px solid #BFC5C1;
  border-radius:0;
  padding:5px 2px;
}

/* gallery — album page */
.gallery-shell{
  position:relative;
  margin-top:25px;
  padding:15px;
  border:1px solid #E7E3DD;
  border-radius:20px;
  background:#FEFDFB;
  box-shadow:var(--w-shadow);
}
.gallery-shell__label{
  margin:0 0 10px;
  color:#AAA198;
  font:7px Georgia,"Times New Roman",serif;
  letter-spacing:.22em;
  text-align:left;
}
.gallery{
  margin:0;
  gap:8px;
}
.gallery button{
  position:relative;
  border-radius:9px;
  box-shadow:0 5px 16px rgba(53,53,53,.06);
}
.gallery button::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:9px;
  pointer-events:none;
}
.gallery img{border-radius:9px}
.gallery button:nth-child(5n+1){
  transform:rotate(-.35deg);
}
.gallery button:nth-child(5n+3){
  transform:rotate(.3deg);
}

/* location — venue card */
.venue-card{
  width:min(100%,390px);
  margin:18px auto 20px;
  padding:22px 18px 19px;
  border:1px solid #E4E1DB;
  border-radius:19px;
  background:#FEFDFB;
  box-shadow:var(--w-shadow);
}
.venue-card__label{
  display:block;
  margin-bottom:8px;
  color:#B09B8C;
  font-size:7px;
  font-weight:700;
  letter-spacing:.22em;
}
.venue-card .section-title{margin-bottom:12px}
.venue-hall{color:#777D7A;font-size:11px}
.map-frame{
  margin:15px 0 14px;
  border-color:#E2DFD8;
  border-radius:18px;
  box-shadow:var(--w-shadow);
  background:#E9ECE9;
}
.transport{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:21px;
  border:0;
}
.transport__item{
  position:relative;
  padding:14px 14px 14px 42px;
  border:1px solid #E2E0DA;
  border-radius:13px;
  background:#FCFBF9;
}
.transport__item::before{
  position:absolute;
  left:13px;
  top:13px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#EEF2EE;
  color:#7B8980;
  font-size:10px;
}
.transport__item:nth-child(1)::before{content:"M"}
.transport__item:nth-child(2)::before{content:"B"}
.transport__item:nth-child(3)::before{content:"P"}
.transport__item strong{font-size:11px;color:#575D5B}
.transport__item p{font-size:10px;line-height:1.7}

/* accounts — two elegant family blocks */
.account-board{
  display:grid;
  gap:13px;
  margin-top:27px;
}
.account-side{
  position:relative;
  padding:16px;
  border:1px solid #E3E1DB;
  border-radius:18px;
  background:#FEFDFC;
  box-shadow:var(--w-shadow);
  overflow:hidden;
}
.account-side::before{
  content:"";
  position:absolute;
  right:-34px;
  top:-34px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(185,204,191,.14),transparent 68%);
}
.account-side--bride::before{
  background:radial-gradient(circle,rgba(226,201,205,.15),transparent 68%);
}
.account-heading{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 10px;
  color:#5D6460;
  font-size:11px;
}
.account-heading span{
  color:#AC9C8E;
  font-size:7px;
  letter-spacing:.15em;
}
.account-heading--bride{margin:0 0 10px}
.account-list{position:relative;z-index:1;gap:7px}
.account-card{
  padding:13px;
  border-color:#E8E5E0;
  border-radius:13px;
  background:rgba(255,255,255,.83);
}
.account-card__label{color:#A09890}
.account-card__name{color:#4E5354;font-size:11px}
.account-card__bank{color:#7F8482}
.account-card__number{
  color:#5C6262;
  font-size:11px;
  letter-spacing:.015em;
}
.mini-button{
  border-color:#DCDAD4;
  background:#FAFAF8;
  color:#666E69;
}

/* share — final stationery */
.share-card{
  position:relative;
  padding:31px 19px 27px;
  border:1px solid #E5E1DA;
  border-radius:22px;
  background:
    radial-gradient(circle at 88% 8%,rgba(226,205,205,.12),transparent 23%),
    radial-gradient(circle at 7% 93%,rgba(204,219,211,.13),transparent 24%),
    #FEFDFB;
  box-shadow:var(--w-shadow);
  overflow:hidden;
}
.share-card__rings{
  width:38px;
  height:20px;
  margin:0 auto 4px;
  position:relative;
}
.share-card__rings i{
  position:absolute;
  width:15px;
  height:15px;
  border:1px solid #C7BAAE;
  border-radius:50%;
}
.share-card__rings i:first-child{left:7px}
.share-card__rings i:last-child{left:17px}
.share-card__caption{
  margin:-10px 0 19px;
  color:#8E8A84;
  font-size:10px;
}
.button--share{
  background:#FEE500;
  color:#252525;
  box-shadow:0 8px 20px rgba(214,191,0,.12);
}

/* closing */
.closing{
  min-height:74svh;
}
.closing__veil{
  background:linear-gradient(180deg,rgba(20,24,23,.02) 27%,rgba(24,28,27,.69));
}
.closing__copy{padding-bottom:54px}
.closing__script{
  display:block;
  margin-bottom:13px;
  color:#fff;
  font-family:"Segoe Script","Brush Script MT","Apple Chancery","Snell Roundhand",cursive;
  font-size:clamp(25px,8vw,39px);
  line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.16);
}
.closing__copy p{
  font-size:10px;
  letter-spacing:.06em;
}
.closing__copy strong{
  font-size:18px;
  letter-spacing:.03em;
}
footer{
  background:#3F4944;
  color:#AEB8B2;
}

/* hero — slightly more editorial, keep faces clear */
.hero__veil{
  background:linear-gradient(180deg,rgba(15,18,17,.015) 25%,rgba(15,18,17,.16) 62%,rgba(15,18,17,.62) 100%);
}
.hero__date,.hero__venue{
  font-size:11px;
  letter-spacing:.035em;
}
.personal-label{
  display:inline-block;
  margin:0 0 9px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:8px;
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
}

@media(max-width:360px){
  .section{padding:70px 14px}
  .calendar-card{padding-left:11px;padding-right:11px}
  .gallery-shell{padding:10px}
  .venue-card{padding-left:13px;padding-right:13px}
  .account-side{padding:11px}
  .share-card{padding-left:14px;padding-right:14px}
}



/* =========================================================
   V2.4 — Typography / account clarity / custom friend copy
   ========================================================= */

/* elegant typography used throughout the invitation */
.section-title,
.invitation-body,
.family-line,
.venue-card,
.account-card,
.contact-section{
  font-family:"Gowun Batang","Noto Serif KR","Malgun Gothic",serif;
}

/* The hero is intentionally more editorial than the body UI. */
.hero__mark span{
  font-family:"Allura","Segoe Script","Brush Script MT","Apple Chancery",cursive !important;
  font-size:clamp(44px,13vw,67px);
  font-weight:400;
  line-height:.96;
  letter-spacing:.005em;
  text-shadow:0 3px 18px rgba(0,0,0,.22);
}
.hero__mark strong,
.hero__mark em{
  font-family:"Gowun Batang","Noto Serif KR","Malgun Gothic",serif;
  font-weight:400;
  letter-spacing:-.035em;
}
.hero__mark strong{
  font-size:clamp(21px,6.7vw,31px);
}
.hero__mark strong.is-custom-message{
  width:min(92%,420px);
  max-width:92%;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
  line-height:1.48;
  font-size:clamp(19px,5.9vw,28px);
  text-wrap:balance;
}
.hero__mark em{
  font-size:clamp(15px,4.8vw,22px);
  font-weight:400;
}
.hero__date{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(13px,4vw,17px);
  font-weight:500;
  letter-spacing:.08em;
}
.hero__venue,
.personal-label{
  font-family:"Gowun Batang","Noto Serif KR","Malgun Gothic",serif;
  font-weight:400;
}
.hero__venue{
  font-size:clamp(10px,3.2vw,13px);
  letter-spacing:.02em;
}
.personal-label{
  letter-spacing:0;
}

/* Make bank + account number a single visual unit.
   Bank is never floating in the top-right anymore. */
.account-card__top{
  display:block;
}
.account-card__label{
  display:block;
  margin-bottom:3px;
}
.account-card__name{
  font-size:12px;
  font-weight:700;
}
.account-card__account-line{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  margin-top:10px;
  padding:10px 11px;
  border:1px solid #E4E1DA;
  border-radius:11px;
  background:#F7F5F1;
}
.account-card__bank{
  flex:0 0 auto;
  padding:3px 7px;
  border-radius:999px;
  background:#E9EEE9;
  color:#53625A;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  font-size:9px;
  font-weight:700;
  line-height:1.45;
  white-space:nowrap;
}
.account-side--bride .account-card__bank{
  background:#F3E8E9;
  color:#80666B;
}
.account-card__number{
  min-width:0;
  color:#414746;
  font-family:"Cormorant Garamond","Gowun Batang",serif;
  font-size:15px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:.035em;
  overflow-wrap:anywhere;
}
.account-card__actions{
  margin-top:10px;
}

@media(max-width:360px){
  .hero__mark span{font-size:clamp(39px,13vw,52px)}
  .hero__mark strong.is-custom-message{font-size:clamp(17px,5.8vw,23px)}
  .account-card__account-line{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .account-card__number{font-size:14px}
}


/* ===============================================================
   V2.5 | Consistent typography + editorial bank/wayfinding cards
   The Latin/number baseline is no longer mixed with Korean serif.
   =============================================================== */
html,body,button,a,input,textarea,select,
.section-title,.invitation-body,.family-line,.venue-card,
.account-card,.contact-section,.hero__mark strong,.hero__mark em,
.hero__date,.hero__venue,.personal-label,.calendar,
.contact-primary-card,.parent-panel,.transport,.countdown,
.contact-footnote,.closing__copy p,.closing__copy strong{
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
body{font-size:13px;font-synthesis:none}
.section-title{font-weight:500;letter-spacing:-.045em}
.eyebrow,.section-ornament,.venue-card__label,.account-heading span{font-family:"Noto Sans KR","Malgun Gothic",sans-serif}
.hero__mark strong,.hero__mark em,.hero__venue,.personal-label{line-height:1.52;letter-spacing:-.03em}
.hero__mark strong{font-weight:500}
.hero__mark em{font-weight:400}
.hero__date{letter-spacing:.045em;font-size:clamp(11px,3.35vw,13px);font-weight:400}
.hero__mark span,.closing__script{
  font-family:"Allura","Segoe Script","Apple Chancery",cursive!important;
  font-weight:400;
}
.calendar__head,.calendar__cell,.countdown{font-variant-numeric:tabular-nums}

/* A clean bank statement: no bank badge, no shaded numeric pill. */
.account-board{gap:13px}
.account-side{padding:16px 14px 13px}
.account-side::before{display:none}
.account-heading{margin:0 0 10px;font-weight:500;font-size:12px}
.account-heading span{font-size:8px;letter-spacing:.1em;color:#9B8C80}
.account-list{gap:10px}
.account-card{
  padding:15px 14px 13px;
  border:1px solid #E9E6E0;
  border-radius:13px;
  background:#FFFFFF;
  font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
}
.account-card__top{display:flex;align-items:baseline;gap:8px;min-width:0}
.account-card__label{margin:0;color:#9B9994;font-size:10px;flex:0 0 auto}
.account-card__name{color:#424A47;font-weight:600;font-size:12px}
.account-card__details{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding-top:12px;
  margin-top:10px;
  border-top:1px solid #F0EFEB;
}
.account-card__bankline{display:flex;min-width:0;flex-direction:column;gap:4px;align-items:flex-start}
.account-card__bank{
  display:block;
  flex:initial;
  padding:0;
  border:0;
  border-radius:0;
  background:none!important;
  color:#57665C!important;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  text-align:left;
  line-height:1.5;
  letter-spacing:-.02em;
}
.account-card__number{
  margin:0;
  color:#343B39;
  font-family:inherit;
  font-size:clamp(13px,3.65vw,16px);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  line-height:1.5;
  letter-spacing:.004em;
  word-break:normal;
  overflow-wrap:anywhere;
}
.account-card__copy{
  flex:0 0 auto;
  display:inline-flex;
  gap:4px;
  align-items:center;
  justify-content:center;
  min-height:33px;
  padding:6px 10px;
  color:#63756A;
  border:1px solid #DDE3DC;
  background:#F7F9F6;
  border-radius:9px;
  font-size:10px;
  font-weight:500;
}
.account-card__copy svg{width:14px;height:14px;display:block}
.account-card__copy:active{transform:scale(.98)}
.account-card__pay{display:inline-block;margin-top:10px;color:#68756D;font-size:10px;text-decoration:underline;text-underline-offset:3px}

/* Integrated map/directions without the jarring foreign map UI. */
.wayfinding-card{
  position:relative;
  padding:19px 17px 15px;
  margin:14px 0 17px;
  border:1px solid #E7E3DD;
  border-radius:19px;
  background:linear-gradient(142deg,#FFFEFC 0%,#F8F9F6 100%);
  box-shadow:var(--w-shadow);
  text-align:left;
  overflow:hidden;
}
.wayfinding-card::before{
  content:"";
  position:absolute;
  top:-48px;right:-56px;
  width:175px;height:175px;
  border:1px solid rgba(154,171,160,.17);
  border-radius:50%;
  box-shadow:0 0 0 23px rgba(155,171,160,.035),0 0 0 50px rgba(155,171,160,.025);
  pointer-events:none;
}
.wayfinding-card__heading{position:relative;display:flex;align-items:center;gap:10px}
.wayfinding-card__pin{
  flex:0 0 auto;
  width:39px;height:39px;
  display:grid;place-items:center;
  color:#7D9487;
  background:#EDF2ED;
  border-radius:50%;
}
.wayfinding-card__pin svg{width:24px;height:24px}
.wayfinding-card__eyebrow{
  color:#AAA195;
  margin:0 0 1px;
  font-size:8px;
  font-weight:600;
  letter-spacing:.18em;
}
.wayfinding-card h3{margin:0;color:#4B5551;font-size:14px;font-weight:500}
.wayfinding-card__message{
  margin:15px 0 17px;
  color:#828884;
  font-size:11px;
  line-height:1.82;
}
.wayfinding-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wayfinding-card__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:41px;
  border:1px solid #D8DFD9;
  border-radius:11px;
  background:#FFFFFF;
  color:#586B5F;
  font-size:11px;
  font-weight:500;
  text-decoration:none;
}
.wayfinding-card__link:nth-child(2){border-color:#E7D9C7;color:#8C755B}
.wayfinding-card__link span{font-size:14px;line-height:1}
.wayfinding-card__link:active{transform:scale(.987)}
[hidden]{display:none!important}
.map-embed{
  margin:0 0 14px;
  border:1px solid #E5E5E1;
  border-radius:13px;
  background:#E7EBE7;
  overflow:hidden;
  height:330px;
}
.map-embed iframe{width:100%;height:100%;display:block;border:0}
@media(max-width:360px){
  .wayfinding-card{padding:15px 12px 12px}
  .wayfinding-card__actions{gap:6px}
  .wayfinding-card__link{font-size:10px;gap:6px}
  .account-card{padding:12px 10px}
  .account-card__number{font-size:13px}
  .account-card__copy{padding:6px 8px}
}

/* V2.5.2 Kakao roughmap: use its native DOM embed, sized in pixels. */
.map-embed--kakao{height:auto;min-height:320px;background:#F8F8F5}
.map-embed--google{height:330px}
.map-status{padding:12px;color:#737C75;font-size:11px;line-height:1.6;text-align:center}
.map-status.is-error{padding:20px 14px;background:#FAF7F2;color:#776F62}

/* V2.5.3 — remove decorative double rings and repeated botanical ornaments. */
.section-ornament,.calendar-card__rings,.share-card__rings,.contact-divider{display:none!important}
.parent-contacts{margin-top:23px}
.calendar-card{padding-top:27px}
.share-card{padding-top:29px}
.wayfinding-card::before{display:none}
/* When the external map fails, never leave a blank 320px rectangle. */
.map-embed--kakao{min-height:0;height:auto;background:transparent;border-color:#E9E7E1}
.map-embed--kakao.map-embed--failed iframe{display:none}
.map-embed--kakao.map-embed--failed .map-status{margin:0;padding:17px 14px;background:#FBF8F3;color:#807971}
.map-embed--kakao .map-status:not(.is-error){padding:15px;color:#8B968E;font-size:11px}


/* ================================================================
   V2.5.4 - Airy mobile cover + physically draggable gallery
   ================================================================ */
.hero{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  justify-content:stretch;
  width:100%;
  height:100svh;
  min-height:0;
  max-height:none;
  background:#FBFAF7;
  overflow:hidden;
}
.hero__photo{
  position:relative;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#DDDAD3;
}
.hero__image{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 42%;
}
.hero__veil{
  inset:0;
  position:absolute;
  background:linear-gradient(180deg,rgba(15,20,21,.34) 0%,rgba(15,20,21,.12) 19%,rgba(15,20,21,0) 42%);
  transition:opacity 1.4s ease .15s;
  pointer-events:none;
}
/* Place the handwriting high on the photo, clear of faces. */
.hero__mark,
.hero.is-visible .hero__mark{
  position:absolute;
  top:clamp(18px,4.0svh,44px);
  left:8px;
  right:8px;
  bottom:auto;
  z-index:3;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:auto;
  gap:0;
  min-height:68px;
  transform:none;
  opacity:1;
  transition:none;
  pointer-events:none;
}
.hero__mark #heroMarkScript{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  top:auto;
  display:block;
  width:max-content;
  max-width:calc(100vw - 26px);
  margin:0;
  transform:none;
  overflow:visible;
  white-space:nowrap;
  color:#FFF9F0;
  font-family:"Allura","Segoe Script","Apple Chancery",cursive!important;
  font-size:clamp(55px,16vw,83px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.004em;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.33));
  text-shadow:0 2px 12px rgba(0,0,0,.2);
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
}
.hero__mark #heroMarkScript::after{display:none}
.hero.is-visible .hero__mark #heroMarkScript{
  animation:heroCoverWrite 3.25s cubic-bezier(.28,.1,.24,1) .35s both;
}
@keyframes heroCoverWrite{
  0%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}
  22%{clip-path:inset(0 81% 0 0);-webkit-clip-path:inset(0 81% 0 0)}
  47%{clip-path:inset(0 53% 0 0);-webkit-clip-path:inset(0 53% 0 0)}
  73%{clip-path:inset(0 29% 0 0);-webkit-clip-path:inset(0 29% 0 0)}
  100%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
}
.hero__details{
  position:relative;
  z-index:3;
  min-height:clamp(195px,28svh,248px);
  background:#FBFAF7;
  padding:clamp(13px,2.3svh,24px) 17px max(15px,env(safe-area-inset-bottom));
  color:#4B4D4B;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.hero__details-inner{width:100%;max-width:460px}
.hero__details .hero__caption{
  margin:0 0 5px;
  font-size:9px;
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:.18em;
  color:#9B978E;
  opacity:1;
}
.hero__details .hero__caption span{margin:0 9px;color:#BDB3AC;font-size:10px}
.hero__headline{margin:0 0 8px;line-height:1.42}
.hero__details #heroMarkMain,
.hero__details #heroMarkSub{
  display:block;
  position:static;
  width:auto;
  max-width:100%;
  color:#343A38;
  margin:0;
  text-align:center;
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:clamp(21px,5.9vw,29px);
  font-weight:500;
  line-height:1.42;
  letter-spacing:-.05em;
  word-break:keep-all;
  overflow-wrap:anywhere;
  white-space:normal;
  text-shadow:none;
  transform:none;
  opacity:0;
}
.hero.is-visible .hero__details #heroMarkMain{
  animation:heroDetailIn .86s ease 1s forwards;
}
.hero.is-visible .hero__details #heroMarkSub{
  animation:heroDetailIn .86s ease 1.25s forwards;
}
.hero__details #heroMarkSub[hidden]{display:none!important}
.hero__details #heroMarkMain.is-custom-message{
  width:100%;max-width:100%;
  font-size:clamp(15px,4.6vw,22px);
  line-height:1.5;
  text-wrap:balance;
}
.hero--personal .hero__details #heroMarkMain{font-size:clamp(17px,5vw,24px)}
.hero--personal .hero__details #heroMarkSub{font-size:clamp(13px,4vw,18px);font-weight:400}
.hero__details .hero__date,
.hero__details .hero__venue,
.hero__details .hero__weather{
  position:static;
  padding:0;
  margin:3px 0 0;
  color:#878A85;
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:clamp(10px,2.7vw,12px);
  letter-spacing:-.02em;
  line-height:1.6;
  opacity:0;
  text-shadow:none;
}
.hero__details .hero__venue{color:#999B94}
.hero__details .hero__weather{color:#A19D93}
.hero.is-visible .hero__details .hero__date,
.hero.is-visible .hero__details .hero__venue,
.hero.is-visible .hero__details .hero__weather{
  animation:heroDetailIn .9s ease 1.45s forwards;
}
@keyframes heroDetailIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
.hero__details .personal-label{
  margin:0 0 7px!important;
  padding:0;
  border:0;
  background:none;
  color:#96978F;
  font-size:10px!important;
  font-weight:400;
  backdrop-filter:none;
}
.hero__scroll{
  bottom:6px;
  left:50%;
  width:14px;
  height:12px;
  transform:translateX(-50%);
  background:none;
  overflow:visible;
}
.hero__scroll span{
  display:block;
  width:7px;height:7px;
  border:0;
  border-right:1px solid #ACAAA4;
  border-bottom:1px solid #ACAAA4;
  background:none;
  transform:rotate(45deg);
  animation:heroCoverScroll 2s ease-in-out infinite;
}
@keyframes heroCoverScroll{0%,100%{opacity:.35;transform:translateY(-2px) rotate(45deg)}50%{opacity:.85;transform:translateY(3px) rotate(45deg)}}

/* Modal: isolate gestures and hold the page at its previous scroll position. */
html.lightbox-open{overflow:hidden;overscroll-behavior:none}
.lightbox{
  position:fixed;
  width:100vw;height:100dvh;
  max-width:100vw;max-height:100dvh;
  inset:0;
  background:#111515;
  overflow:hidden;
  overscroll-behavior:contain;
  touch-action:none;
}
.lightbox::backdrop{background:#111515}
.lightbox__viewport{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  width:100%;height:100%;
  touch-action:none;
  overscroll-behavior:contain;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}
.lightbox__viewport:active{cursor:grabbing}
.lightbox__track{
  display:flex;
  width:100%;height:100%;
  transform:translate3d(-100%,0,0);
  transition:transform .36s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.lightbox__track.is-dragging{transition:none!important}
.lightbox__slide{
  flex:0 0 100%;
  width:100%;height:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(45px,7svh,65px) 0 clamp(55px,9svh,80px);
}
.lightbox__slide img{
  display:block;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.lightbox__close,
.lightbox__nav{
  z-index:5;
  touch-action:manipulation;
}
.lightbox__close{top:max(8px,env(safe-area-inset-top));right:12px;padding:5px 13px;font-size:34px}
.lightbox__nav{top:50%;padding:15px 11px;opacity:.84;font-size:42px}
.lightbox__footer{
  position:absolute;
  z-index:4;
  left:0;right:0;
  bottom:max(19px,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:4px;
  pointer-events:none;
  color:#F4F1EC;
}
.lightbox__counter{font-size:12px;letter-spacing:.09em;font-variant-numeric:tabular-nums}
.lightbox__hint{color:#A8AEAB;font-size:10px;letter-spacing:-.01em}
@media(max-width:360px){
  .hero__mark,.hero.is-visible .hero__mark{top:clamp(12px,2.6svh,24px)}
  .hero__mark #heroMarkScript{font-size:clamp(47px,15vw,58px)}
  .hero__details{min-height:195px;padding:10px 10px max(15px,env(safe-area-inset-bottom))}
  .hero__headline{margin-bottom:5px}
  .hero__details #heroMarkMain{font-size:20px}
  .hero__details .hero__caption{font-size:8px}
  .hero__details .hero__date,.hero__details .hero__venue{font-size:10px}
}
@media(max-height:650px){
  .hero__details{min-height:185px;padding-top:9px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .hero__details .hero__caption{margin-bottom:2px}
  .hero__headline{margin-bottom:3px}
  .hero__mark #heroMarkScript{font-size:clamp(43px,13vw,70px)}
  .hero__mark,.hero.is-visible .hero__mark{min-height:48px;top:12px}
}
@media(prefers-reduced-motion:reduce){
  .hero.is-visible .hero__mark #heroMarkScript,
  .hero.is-visible .hero__details #heroMarkMain,
  .hero.is-visible .hero__details #heroMarkSub,
  .hero.is-visible .hero__details .hero__date,
  .hero.is-visible .hero__details .hero__venue,
  .hero.is-visible .hero__details .hero__weather{animation:none!important;opacity:1!important;clip-path:none!important;-webkit-clip-path:none!important}
  .lightbox__track{transition-duration:.12s}
}


/* ================================================================
   V2.5.5 – Friend cover: couple names + private recipient/greeting
   ================================================================ */
/* Preserve the manually requested exact centering of Our Wedding. */
.hero__mark #heroMarkScript{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
}
/* Same typography as the public cover, regardless of the recipient. */
.hero--personal .hero__details #heroMarkMain{
  font-size:clamp(21px,5.9vw,29px);
  font-weight:500;
}
.hero__personal[hidden]{display:none!important}
.hero__personal{
  width:min(100%,370px);
  margin:9px auto 11px;
  padding:8px 9px 9px;
  border-top:1px solid #E5E0D9;
  border-bottom:1px solid #E5E0D9;
  text-align:center;
}
.hero__details .hero__personal .personal-label{
  display:block;
  margin:0 0 3px!important;
  padding:0;
  border:0;
  color:#998777;
  font-family:Georgia,"Times New Roman",serif;
  font-size:11px!important;
  font-style:italic;
  letter-spacing:.04em;
  line-height:1.45;
}
.hero__details .hero__personal #heroMarkSub{
  display:block;
  position:static;
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:clamp(11px,3.35vw,14px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.025em;
  color:#5F6461;
  text-shadow:none;
  text-wrap:balance;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
  opacity:0;
}
.hero.is-visible .hero__personal #heroMarkSub{
  animation:heroDetailIn .86s ease 1.3s forwards;
}
@media(max-width:360px){
  .hero--personal .hero__details #heroMarkMain{font-size:20px}
  .hero__personal{margin:6px auto 8px;padding:5px 6px 7px}
  .hero__details .hero__personal #heroMarkSub{font-size:11px;line-height:1.42}
}
@media(max-height:650px){
  .hero__personal{margin:5px auto 6px;padding:4px 5px 5px}
  .hero__details .hero__personal .personal-label{font-size:10px!important}
  .hero__details .hero__personal #heroMarkSub{font-size:10.5px;line-height:1.36}
}
@media(prefers-reduced-motion:reduce){
  .hero.is-visible .hero__personal #heroMarkSub{animation:none!important;opacity:1!important}
}


/* ================================================================
   V2.5.6 — Align both fathers; hand-drawn SVG calligraphy
   ================================================================ */

/* Keep both father rows aligned, even when one parent has no contacts. */
.parent-person--deceased{
  display:block;
  align-content:normal;
}
.parent-person--deceased .parent-person__identity{
  min-height:33px;
}
.parent-person--deceased .parent-person__name,
.parent-person--deceased .parent-person__name .deceased-mark{
  color:#4B5156;
  font-size:11px;
  font-weight:600;
}
.parent-person--deceased .parent-person__name .deceased-mark{
  margin-right:2px;
}
/* Reserve the same action-row height without rendering any action links. */
.parent-person--deceased .parent-person__actions{
  display:block;
  height:31px;
  margin-top:9px;
  visibility:hidden;
  pointer-events:none;
}
.parent-person--deceased::after{display:none}
.parent-person__identity{flex-wrap:nowrap;align-items:baseline}

/* SVG pen strokes are centered exactly at the top of the photograph. */
.hero__mark .hero-pen-writing{
  display:block;
  position:absolute;
  z-index:2;
  top:-10px;
  left:50%;
  width:min(97%,440px);
  height:auto;
  overflow:visible;
  transform:translateX(-50%);
  filter:drop-shadow(0 2px 5px rgba(15,20,20,.49));
  pointer-events:none;
}
.hero__mark .hero-pen-writing[hidden],
.hero__mark #heroMarkScript[hidden]{display:none!important}
.hero-pen-writing__stroke{
  stroke-dasharray:100 102;
  stroke-dashoffset:101;
  opacity:1;
}
.hero.is-visible .hero-pen-writing__stroke{
  animation:heroPenDraw var(--pen-duration) cubic-bezier(.34,.13,.67,.91) var(--pen-delay) forwards;
}
@keyframes heroPenDraw{
  from{stroke-dashoffset:101}
  to{stroke-dashoffset:0}
}
@media(max-width:360px){
  .parent-person--deceased .parent-person__name,
  .parent-person--deceased .parent-person__name .deceased-mark{font-size:10px}
  .hero__mark .hero-pen-writing{top:-7px;width:min(98%,440px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-pen-writing__stroke,
  .hero.is-visible .hero-pen-writing__stroke{
    animation:none!important;
    stroke-dashoffset:0!important;
  }
}


/* ==============================================================
   현수유진 V2.5.7 — small interactions, profiles, notices
   ============================================================== */

/* Elegant vector-script: independent of OS/browser font availability. */
.hero__mark .hero-calligraphy{
  width:min(96%,450px);
  top:-15px;
  height:auto;
  aspect-ratio:650/147;
  filter:drop-shadow(0 2px 5px rgba(15,20,20,.46));
}
.hero-calligraphy .calligraphy-mask{
  animation:none;
}
.hero.is-visible .hero-calligraphy .calligraphy-mask{
  animation:calligraphyLetter var(--letter-duration) cubic-bezier(.22,.05,.33,.98) var(--letter-delay) forwards;
}
@keyframes calligraphyLetter{from{width:0}to{width:var(--letter-width)}}
.hero-calligraphy-flourish{
  stroke-dasharray:220;
  stroke-dashoffset:220;
}
.hero.is-visible .hero-calligraphy-flourish{
  animation:calligraphyFlourish .65s ease-out var(--flourish-delay) forwards;
}
@keyframes calligraphyFlourish{to{stroke-dashoffset:0}}
@media(max-width:360px){
 .hero__mark .hero-calligraphy{top:-8px;width:min(98%,440px)}
}

/* Tiny double heartbeat; the calendar date stays stationary. */
.calendar__cell.is-day::before{
  animation:calendarHeartbeat 3.4s ease-in-out infinite;
  transform-origin:center center;
}
@keyframes calendarHeartbeat{
  0%,14%,30%,100%{transform:translate(-50%,-48%) scale(1)}
  19%{transform:translate(-50%,-48%) scale(1.065)}
  25%{transform:translate(-50%,-48%) scale(.99)}
  36%{transform:translate(-50%,-48%) scale(1.045)}
  43%{transform:translate(-50%,-48%) scale(1)}
}
.calendar__cell.is-day .calendar__time{
  position:absolute;
  z-index:3;
  top:calc(50% + 20px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  color:#998381;
  font-size:clamp(8px,2.2vw,10px);
  font-weight:600;
  white-space:nowrap;
  line-height:1;
  letter-spacing:-.02em;
}
.calendar{margin-bottom:30px}
.calendar-card .countdown{margin-top:13px}

/* Introduction portraits */
.profile-section{background:#FCFBF8}
.profile-intro{margin-bottom:29px}
.profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  max-width:410px;
  margin:0 auto;
  align-items:stretch;
}
.profile-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px 12px 23px;
  border:1px solid #E7E5E0;
  border-radius:21px;
  background:linear-gradient(165deg,#fff,#FAFAF7);
  box-shadow:0 10px 32px rgba(51,60,57,.045);
  text-align:center;
}
.profile-portrait{
  width:clamp(94px,28vw,128px);
  height:clamp(94px,28vw,128px);
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:4px solid #FFF;
  outline:1px solid #E3E1DB;
  border-radius:50%;
  background:#E8EAE5;
  box-shadow:0 7px 18px rgba(45,47,44,.08);
}
.profile-card--bride .profile-portrait{background:#F0E7E6}
.profile-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.profile-portrait__fallback{
  color:#87958B;
  font-family:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  font-size:33px;
  font-weight:300;
}
.profile-card--bride .profile-portrait__fallback{color:#B8989B}
.profile-card__english{
  margin-top:19px;
  color:#AC9E91;
  font-size:8px;
  letter-spacing:.18em;
  line-height:1.35;
}
.profile-card h3{
  margin:6px 0 11px;
  color:#484F4D;
  font-family:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  font-weight:500;
  font-size:clamp(14px,4vw,18px);
  line-height:1.35;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.profile-card h3 span{color:#9B9C97;font-weight:400;font-size:.75em}
.profile-card p{
  margin:0;
  max-width:190px;
  color:#777F79;
  font-size:clamp(10px,2.9vw,12px);
  line-height:1.8;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* Calm, clear information cards; no ornamental rings. */
.notice-section{
  background:#FBFAF7;
}
.notice-intro{margin-bottom:25px}
.notice-list{
  display:grid;
  gap:10px;
  max-width:430px;
  margin:0 auto;
}
.notice-item{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:13px;
  align-items:start;
  padding:19px 20px;
  border:1px solid #E4E4DE;
  border-radius:16px;
  background:#FFF;
  box-shadow:0 9px 25px rgba(41,47,42,.035);
  text-align:left;
}
.notice-item__index{font-family:Georgia,serif;font-style:italic;font-size:15px;color:#ADB9B0;line-height:1.5}
.notice-item h3{margin:0 0 7px;color:#4B514D;font-size:13px;font-weight:600;letter-spacing:-.025em}
.notice-item p{margin:0;color:#767D78;font-size:11px;line-height:1.83;white-space:pre-line;overflow-wrap:anywhere}

@media(max-width:360px){
 .profile-grid{gap:8px}
 .profile-card{padding:18px 7px 20px}
 .profile-portrait{width:clamp(83px,26vw,110px);height:clamp(83px,26vw,110px)}
 .profile-card h3{font-size:13px}
 .profile-card p{font-size:10px}
 .notice-item{padding:16px 14px;gap:8px}
}
@media(prefers-reduced-motion:reduce){
 .reveal,.reveal.is-visible{opacity:1!important;transform:none!important;transition:none!important}
 .calendar__cell.is-day::before{animation:none!important}
 .hero-calligraphy .calligraphy-mask,
 .hero.is-visible .hero-calligraphy .calligraphy-mask{
   animation:none!important;width:var(--letter-width)!important
 }
 .hero-calligraphy-flourish,.hero.is-visible .hero-calligraphy-flourish{
   animation:none!important;stroke-dashoffset:0!important
 }
}
/* Respect failed image and fallback state despite author img display rule. */
.profile-portrait img[hidden],.profile-portrait__fallback[hidden]{display:none!important}

/* Keep hand-lettering comfortably within the upper photo margin. */
.hero__mark .hero-calligraphy{top:4px}
@media(max-width:360px){.hero__mark .hero-calligraphy{top:4px}}

/* ==============================================================
   현수유진 V2.5.8 — real pen-stroke lettering + visible heartbeat
   ============================================================== */

/*
   The previous calligraphy revealed filled glyphs from left to right.
   This version is made only from hand-drawn SVG strokes, so the line
   itself grows along the writing path like ink coming from a pen.
*/
.hero__mark .hero-hand-script{
  display:block;
  position:absolute;
  z-index:3;
  top:6px;
  left:50%;
  width:min(96%,500px);
  height:auto;
  overflow:visible;
  transform:translateX(-50%);
  filter:drop-shadow(0 2px 5px rgba(15,20,20,.42));
  pointer-events:none;
}
.hero__mark .hero-hand-script[hidden]{display:none!important}
.hero-hand-script .hand-script{
  stroke-width:3.15;
}
.hero-hand-script .hand-script-stroke{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  vector-effect:non-scaling-stroke;
  opacity:.99;
}
.hero-hand-script .hand-script-stroke--major{stroke-width:3.45}
.hero-hand-script .hand-script-stroke--tail{stroke-width:3.0}
.hero-hand-script .hand-script-stroke--flourish{
  stroke-width:1.75;
  opacity:.82;
}
.hero.is-visible .hero-hand-script .hand-script-stroke{
  animation:heroRealPen var(--t) cubic-bezier(.31,.06,.26,.98) var(--d) forwards;
}
@keyframes heroRealPen{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}

/* A tiny moving ink-tip makes the direction of writing visually obvious. */
.hero-hand-script::after{content:none}

/* Stronger but still tasteful: two beats, then a rest. */
.calendar__cell.is-day::before{
  animation:calendarHeartbeatV258 2.85s cubic-bezier(.25,.1,.25,1) infinite!important;
  transform-origin:center center!important;
  will-change:transform,filter;
}
@keyframes calendarHeartbeatV258{
  0%,9%,28%,100%{
    transform:translate(-50%,-48%) scale(1);
    filter:drop-shadow(0 2px 5px rgba(169,145,149,.13));
  }
  13%{
    transform:translate(-50%,-48%) scale(1.20);
    filter:drop-shadow(0 4px 8px rgba(169,145,149,.29));
  }
  18%{transform:translate(-50%,-48%) scale(.94)}
  23%{
    transform:translate(-50%,-48%) scale(1.14);
    filter:drop-shadow(0 3px 7px rgba(169,145,149,.24));
  }
  28%{transform:translate(-50%,-48%) scale(1)}
}

@media(max-width:360px){
  .hero__mark .hero-hand-script{top:8px;width:min(98%,480px)}
  .hero-hand-script .hand-script{stroke-width:2.85}
}
@media(prefers-reduced-motion:reduce){
  .hero-hand-script .hand-script-stroke,
  .hero.is-visible .hero-hand-script .hand-script-stroke{
    animation:none!important;
    stroke-dashoffset:0!important;
  }
  .calendar__cell.is-day::before{animation:none!important}
}


/* =========================================================
   V2.5.9 PERFORMANCE
   External webfont loading removed. System Korean fonts render immediately.
   ========================================================= */
html{
  font-synthesis:none;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI","Malgun Gothic",sans-serif;
}
.gallery img,
.profile-portrait img,
.closing img,
.hero__image{
  content-visibility:auto;
}


/* =========================================================
   V2.6.0 SERVICE — fast first paint + continuous ink writing
   ========================================================= */

/* The hero must feel loaded, not wait through a 2-second artificial fade. */
.hero__image{
  transition:opacity .48s ease-out,transform .85s cubic-bezier(.2,.72,.22,1)!important;
  transform:scale(1.008)!important;
}
.hero.is-visible .hero__image{transform:scale(1)!important}

/* One continuous brush mask reveals a real calligraphy outline.
   There are no letter-by-letter pauses, so it reads as one flowing pen gesture. */
.hero__mark .hero-ink-script{
  display:block;
  position:absolute;
  z-index:3;
  top:2px;
  left:50%;
  width:min(96%,500px);
  height:auto;
  overflow:visible;
  transform:translateX(-50%);
  filter:drop-shadow(0 2px 5px rgba(10,15,15,.42));
  pointer-events:none;
}
.hero__mark .hero-ink-script[hidden]{display:none!important}
.hero-ink-reveal{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.hero.is-visible .hero-ink-reveal{
  animation:heroInkWrite 3.05s cubic-bezier(.15,.64,.18,1) .16s forwards;
}
@keyframes heroInkWrite{to{stroke-dashoffset:0}}
.hero-ink-flourish{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  opacity:.9;
}
.hero.is-visible .hero-ink-flourish{
  animation:heroInkFlourish .72s cubic-bezier(.2,.65,.25,1) 2.72s forwards;
}
@keyframes heroInkFlourish{to{stroke-dashoffset:0}}
.hero-ink-tip{
  opacity:0;
  offset-path:path("M18 112 C95 91 155 91 220 108 C295 126 362 94 427 102 C503 111 555 118 624 105 C691 92 746 99 808 112");
  offset-distance:0%;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.85));
}
.hero.is-visible .hero-ink-tip{
  animation:heroInkTip 3.05s cubic-bezier(.15,.64,.18,1) .16s forwards;
}
@keyframes heroInkTip{
  0%{opacity:0;offset-distance:0%}
  4%{opacity:.9}
  94%{opacity:.9}
  100%{opacity:0;offset-distance:100%}
}

/* V2.6.1 — reveal sooner and make the upward motion easier to notice. */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:
    opacity .42s cubic-bezier(.2,.72,.25,1),
    transform .58s cubic-bezier(.16,.84,.24,1);
  will-change:opacity,transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.section .reveal .eyebrow,
.section .reveal .section-title{
  transition:transform .52s cubic-bezier(.16,.84,.24,1);
}
.section .reveal:not(.is-visible) .eyebrow,
.section .reveal:not(.is-visible) .section-title{
  transform:translateY(8px);
}

/* Heart is clearly visible: two small beats, then rest. */
.calendar__cell.is-day::before{
  animation:calendarHeartbeatV260 2.45s cubic-bezier(.22,.65,.25,1) infinite!important;
  transform-origin:center center!important;
}
@keyframes calendarHeartbeatV260{
  0%,10%,31%,100%{transform:translate(-50%,-48%) scale(1)}
  14%{transform:translate(-50%,-48%) scale(1.25)}
  20%{transform:translate(-50%,-48%) scale(.93)}
  25%{transform:translate(-50%,-48%) scale(1.17)}
  31%{transform:translate(-50%,-48%) scale(1)}
}

/* Lower content can skip expensive off-screen paint until it approaches viewport. */
@supports(content-visibility:auto){
  #profileSection,
  #noticeSection,
  #contactSection,
  .closing{
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }
}

@media(max-width:360px){
  .hero__mark .hero-ink-script{top:5px;width:min(98%,475px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-ink-reveal,.hero.is-visible .hero-ink-reveal,
  .hero-ink-flourish,.hero.is-visible .hero-ink-flourish{
    animation:none!important;
    stroke-dashoffset:0!important;
  }
  .hero-ink-tip{display:none!important}
  .reveal,.reveal.is-visible{
    opacity:1!important;transform:none!important;transition:none!important
  }
  .calendar__cell.is-day::before{animation:none!important}
}



/* =========================================================
   V2.7.0 — handwriting / continuous heart / guest uploads
   ========================================================= */
/* The lettering is now drawn glyph-by-glyph instead of a single horizontal mask. */
.hero-ink-glyphs > path{
  fill:#FFF9F3;
  fill-opacity:0;
  stroke:#FFF9F3;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:var(--glyph-length,1);
  stroke-dashoffset:var(--glyph-length,1);
  stroke-opacity:0;
  vector-effect:non-scaling-stroke;
}
.hero.is-visible .hero-ink-glyphs > path{
  animation:
    heroGlyphWrite var(--glyph-duration,.28s) cubic-bezier(.38,.05,.55,.96) var(--glyph-delay,0s) forwards,
    heroGlyphFill .24s ease-out var(--glyph-fill-delay,.2s) forwards;
}
@keyframes heroGlyphWrite{
  0%{stroke-dashoffset:var(--glyph-length,1);stroke-opacity:0}
  5%{stroke-opacity:.98}
  100%{stroke-dashoffset:0;stroke-opacity:.92}
}
@keyframes heroGlyphFill{
  0%{fill-opacity:0;stroke-opacity:.92}
  100%{fill-opacity:1;stroke-opacity:.10}
}
/* Old travelling reveal/tip is disabled; underline still finishes the handwritten mark. */
.hero-ink-reveal,.hero-ink-tip{display:none!important}
.hero.is-visible .hero-ink-flourish{animation-delay:3.0s!important}

/* Bottom mother rows visually balance the title + father area above. */
.parent-person--mother{
  min-height:128px;
  padding-top:18px;
  padding-bottom:15px;
}

/* Continuous, calm heartbeat with no long resting plateau. */
.calendar__cell.is-day::before{
  animation:calendarHeartContinuous 1.08s ease-in-out infinite!important;
  transform-origin:center center!important;
  will-change:transform,filter;
}
@keyframes calendarHeartContinuous{
  0%,100%{transform:translate(-50%,-48%) scale(.96);filter:drop-shadow(0 2px 5px rgba(169,145,149,.13))}
  50%{transform:translate(-50%,-48%) scale(1.20);filter:drop-shadow(0 4px 9px rgba(169,145,149,.28))}
}

/* Guest photo/video upload — deliberately compact and invitation-like. */
.guest-upload-section{background:linear-gradient(180deg,#FBFAF7 0%,#F7F4F1 100%)}
.guest-upload-card{
  padding:34px 22px 28px;
  border:1px solid #E6E1DA;
  border-radius:24px;
  background:rgba(255,255,255,.82);
  box-shadow:0 15px 40px rgba(71,65,59,.055);
  text-align:center;
}
.guest-upload-description{margin-bottom:23px!important}
.guest-upload-form{display:grid;gap:12px;text-align:left}
.guest-upload-name{display:grid;gap:7px}
.guest-upload-name>span{padding-left:3px;color:#77736D;font-size:10px;font-weight:600;letter-spacing:.02em}
.guest-upload-name>span small{margin-left:4px;color:#AAA39B;font-size:9px;font-weight:400}
.guest-upload-name input{
  width:100%;height:45px;padding:0 13px;border:1px solid #E4E0DA;border-radius:13px;
  background:#FCFBF9;color:#4A4D4C;font:inherit;outline:none;
}
.guest-upload-name input:focus{border-color:#B6B1A9;box-shadow:0 0 0 3px rgba(160,153,144,.08)}
.guest-upload-notice{margin:2px 4px 0;color:#9B958E;font-size:9px;line-height:1.65;text-align:center}
.guest-upload-form .button:disabled{opacity:.55;cursor:wait}
@media(max-width:380px){.guest-upload-card{padding-left:16px;padding-right:16px}.parent-person--mother{min-height:124px}}
@media(prefers-reduced-motion:reduce){
  .hero-ink-glyphs>path,.hero.is-visible .hero-ink-glyphs>path{animation:none!important;stroke-dashoffset:0!important;stroke-opacity:0!important;fill-opacity:1!important}
  .calendar__cell.is-day::before{animation:none!important}
}


/* ===============================================================
   V2.7.1 — mobile picker, compact upload state, readability pass
   =============================================================== */
/* Keep body copy comfortably readable on current mobile displays. */
.description{font-size:clamp(12px,3.55vw,14px);line-height:1.78}
.invitation-body{font-size:clamp(13px,3.8vw,15px);line-height:1.86}
.family-line{font-size:12px}
.button{font-size:12px;min-height:43px}
.calendar__head{font-size:10px}
.calendar__cell{font-size:12px}
.venue-hall{font-size:13px}
.transport__item strong{font-size:13px}
.transport__item p{font-size:12px;line-height:1.72}
.wayfinding-card__message,.wayfinding-card__link{font-size:12px}
.contact-description{font-size:12px;line-height:1.75}
.contact-primary-card__eyebrow{font-size:9px}
.contact-primary-card__title{font-size:14px}
.contact-primary-card__name{font-size:12px}
.contact-action small{font-size:9px}
.parent-panel__title{font-size:12px}
.parent-person__role{font-size:10px}
.parent-person__name,.parent-person--deceased .parent-person__name,.parent-person--deceased .parent-person__name .deceased-mark{font-size:13px}
.parent-mini-action{font-size:9px}
.contact-footnote{font-size:10px;line-height:1.7}
.profile-card p{font-size:clamp(11.5px,3.15vw,13px)}
.notice-item h3{font-size:14px}
.notice-item p{font-size:12px;line-height:1.82}
.share-card__caption{font-size:12px;line-height:1.7}

/* Separate image/video inputs let iOS/Android hand off to their native
   photo/video pickers instead of the generic document-only picker. */
.guest-upload-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.guest-upload-choice{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:13px 12px;border:1px solid #E1DCD5;border-radius:14px;background:#FFF;cursor:pointer;text-align:left}
.guest-upload-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.guest-upload-choice__icon{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#F3F4F1;color:#7E8C83;font-size:18px}
.guest-upload-choice>span:last-child{min-width:0;display:grid;gap:2px}
.guest-upload-choice strong{color:#555B58;font-size:13px;font-weight:600;white-space:nowrap}
.guest-upload-choice small{color:#969A95;font-size:10px;line-height:1.35;white-space:nowrap}
.guest-upload-limit{margin:0;color:#96918B;font-size:10px;line-height:1.55;text-align:center}
.guest-upload-name>span{font-size:12px}
.guest-upload-name>span small{font-size:10px}
.guest-upload-name input{font-size:13px}
.guest-upload-notice{font-size:10.5px;line-height:1.65}
.guest-upload-queue{display:block}
.guest-upload-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 13px;border:1px solid #E9E6E0;border-radius:13px;background:#FFF;text-align:left}
.guest-upload-summary>div:first-child{min-width:0;display:grid;gap:2px}
.guest-upload-summary strong{color:#555C58;font-size:12px;font-weight:600}
.guest-upload-summary small{color:#969A95;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guest-upload-reset{border:0;background:transparent;color:#7A8A80;font:inherit;font-size:10px;text-decoration:underline;text-underline-offset:3px;padding:6px 0;cursor:pointer}
.guest-upload-current{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;min-width:0;padding-top:4px;color:#686F6B;font-size:10px}
.guest-upload-current span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guest-upload-current b{flex:0 0 auto;font-weight:500;font-variant-numeric:tabular-nums}
.guest-upload-progress{grid-column:1/-1;display:block;height:3px;overflow:hidden;border-radius:999px;background:#EEEAE5}
.guest-upload-progress b{display:block;width:0;height:100%;border-radius:inherit;background:#8F9F95;transition:width .12s linear}
@media(max-width:380px){
  .guest-upload-picker{gap:7px}
  .guest-upload-choice{padding:11px 9px;gap:7px}
  .guest-upload-choice__icon{width:30px;height:30px;font-size:16px}
  .guest-upload-choice strong{font-size:12px}
  .guest-upload-choice small{font-size:9px}
  .parent-person__name,.parent-person--deceased .parent-person__name,.parent-person--deceased .parent-person__name .deceased-mark{font-size:12px}
  .profile-card p{font-size:11.5px}
}


/* ===============================================================
   V2.7.5 — Pinyon Script cursorless write-on / unclipped
   =============================================================== */
.hero__mark .hero-pinyon-script{
  display:block;
  position:absolute;
  z-index:4;
  top:-7px;
  left:50%;
  width:min(98%,520px);
  height:auto;
  overflow:visible;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(10,15,15,.40));
}
.hero__mark .hero-pinyon-script[hidden],
.hero__mark .hero-pinyon-fallback[hidden]{display:none!important}
.hero-pinyon-text{
  font-family:"Pinyon Script",cursive;
  font-size:132px;
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  letter-spacing:0;
  fill:#FFF9F3;
}
/*
 * White center-line brush strokes live inside the SVG mask.  The Pinyon
 * glyph underneath is revealed continuously as the brush travels, so there
 * is no outline animation and no delayed fill phase.
 */
.hero-pinyon-mask-stroke{
  fill:none;
  stroke:#fff;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
}
.hero-pinyon-pen{
  fill:#FFFDF8;
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.82));
}
.hero__mark .hero-pinyon-fallback{
  font-family:"Pinyon Script",cursive!important;
  font-size:clamp(47px,15vw,68px)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  line-height:1!important;
  color:#FFF9F3;
  text-shadow:0 2px 5px rgba(10,15,15,.40);
}
@media(max-width:360px){
  .hero__mark .hero-pinyon-script{top:-2px;width:min(99%,505px)}
  .hero-pinyon-text{font-size:128px}
}
@media(prefers-reduced-motion:reduce){
  .hero-pinyon-mask-stroke{stroke-dashoffset:0!important}
  .hero-pinyon-pen{display:none!important}
}



/* ===============================================================
   V2.7.5 — unclipped, faster, cursorless handwriting
   =============================================================== */
.hero__mark .hero-pinyon-script{
  top:-18px;
  width:min(104%,560px);
  overflow:visible!important;
  filter:drop-shadow(0 2px 5px rgba(10,15,15,.40));
}
.hero__mark{overflow:visible!important}
.hero-pinyon-pen{display:none!important}
@media(max-width:360px){
  .hero__mark .hero-pinyon-script{top:-13px;width:min(105%,540px)}
}


/* ===============================================================
   V2.7.6 — complete handwriting mask + compact uniform gallery
   =============================================================== */
/* Every thumbnail uses one identical cell. Portrait/landscape images are
   fitted inside rather than consuming extra grid rows. */
.gallery{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row;
  align-items:stretch;
}
.gallery button,
.gallery button:nth-child(5n+1),
.gallery button:nth-child(5n+3){
  grid-row:auto!important;
  aspect-ratio:4/5;
  transform:none!important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#F4F1EC;
}
.gallery img,
.gallery button:nth-child(5n+1) img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  background:#F4F1EC;
}
.gallery-more{
  display:block;
  width:min(100%,220px);
  margin:14px auto 1px;
  padding:11px 18px;
  border:1px solid #DDD8D1;
  border-radius:999px;
  background:#FEFDFB;
  color:#6E716E;
  font:500 12px/1.2 Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.02em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gallery-more[hidden]{display:none!important}
.gallery-more:active{transform:scale(.985)}

/* Swiping already follows the finger; release should only settle the small
   remaining distance, not play a second conspicuous slide animation. */
.lightbox__track{transition-duration:.23s}

/* Wider write-on brush coverage prevents tiny holes at Pinyon joins/crossings. */
.hero-pinyon-mask-stroke{
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ===============================================================
   V2.7.7 — fuller handwriting mask + framed gallery thumbnails
   =============================================================== */
/* Give the write-on brush a little more breathing room at thick joins. */
.hero-pinyon-mask-stroke{
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Uniform editorial photo cards. The original image stays fully visible;
   the same thumbnail softly fills any unused space behind it. */
.gallery{gap:8px}
.gallery button,
.gallery button:nth-child(5n+1),
.gallery button:nth-child(5n+3){
  position:relative;
  isolation:isolate;
  aspect-ratio:4/5;
  border:1px solid rgba(202,197,189,.72)!important;
  border-radius:10px!important;
  background:#EEEAE4!important;
  box-shadow:0 2px 10px rgba(47,43,38,.055), inset 0 0 0 1px rgba(255,255,255,.58);
}
.gallery button::before{
  content:"";
  position:absolute;
  inset:-10px;
  z-index:-2;
  background-image:var(--gallery-thumb);
  background-size:cover;
  background-position:center;
  filter:blur(13px) saturate(.82);
  transform:scale(1.08);
  opacity:.30;
}
.gallery button::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(246,243,238,.36);
  pointer-events:none;
}
.gallery img,
.gallery button:nth-child(5n+1) img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center;
  background:transparent!important;
  border-radius:8px;
  transition:transform .22s ease, opacity .22s ease;
}
.gallery button:active img{transform:scale(.992)}


/* ===============================================================
   V2.7.8 — full handwriting coverage + native swipe lightbox
   =============================================================== */
/* The Pinyon mask width is now intentionally generous in app.js.
   Rounded joins keep the reveal soft even when the brush overlaps. */
.hero-pinyon-mask-stroke{
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Let the browser own touch physics.  There is no transform carousel and
   therefore no second transition after the finger is released. */
.lightbox{
  touch-action:auto!important;
}
.lightbox__viewport{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  touch-action:pan-x!important;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  scroll-snap-type:x mandatory;
  scroll-padding:0;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:default!important;
}
.lightbox__viewport::-webkit-scrollbar{display:none}
.lightbox__viewport:active{cursor:default!important}
.lightbox__track{
  display:flex;
  width:max-content!important;
  min-width:100%;
  height:100%;
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}
.lightbox__track.is-dragging{transition:none!important}
.lightbox__slide{
  flex:0 0 var(--lightbox-page,100vw)!important;
  width:var(--lightbox-page,100vw)!important;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}


/* ===============================================================
   V2.8.2 — slower true write-on + consistent footer script font
   =============================================================== */
/* Keep the visible writing edge narrow.  The broad repair stroke uses a
   flat cap and trails well behind, so it fixes thick Pinyon joins without
   looking like the whole word is being revealed at once. */
.hero-pinyon-mask-stroke--lead{
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.hero-pinyon-mask-stroke--cleanup{
  stroke-linecap:butt!important;
  stroke-linejoin:round!important;
}

/* The previous stack depended on OS-installed script fonts (Segoe Script on
   Windows), so phones rendered a different fallback. Pinyon Script is already
   loaded as a webfont for the hero and now makes this line identical on iOS,
   Android and desktop. */
.closing__script{
  font-family:"Pinyon Script",cursive!important;
  font-weight:400!important;
  font-style:normal!important;
  font-size:clamp(31px,9.6vw,43px)!important;
  line-height:1.08!important;
  letter-spacing:0!important;
}

/* ===============================================================
   V2.8.3 — hand-authored visible SVG handwriting
   =============================================================== */
/* The animated path itself is the visible ink. There is no giant reveal brush,
   no cleanup mask and no cursor, so letters can only appear where the pen path
   has actually travelled. The exact Pinyon Script glyph locks in after the
   entire phrase has been written. */
.hero-pinyon-writing-stroke{
  fill:none;
  stroke:#FFF9F3;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
  filter:drop-shadow(0 2px 5px rgba(10,15,15,.34));
}
.hero-pinyon-final{opacity:0}
@media(prefers-reduced-motion:reduce){
  .hero-pinyon-writing-stroke{stroke-dashoffset:0!important}
  .hero-pinyon-final{opacity:1!important}
}

/* ===============================================================
   V2.8.4 — one Pinyon Script from first stroke to final result
   =============================================================== */
/* The actual Pinyon Script glyph is always the visible artwork. The animated
   hand-authored path is only a white SVG mask over it, so there is no late
   crossfade and no second font appearing after handwriting completes. */
.hero-pinyon-final{opacity:1!important}
.hero-pinyon-write-mask{
  fill:none;
  stroke:#fff;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
}
@media(prefers-reduced-motion:reduce){
  .hero-pinyon-write-mask{stroke-dashoffset:0!important}
}


/* ===============================================================
   V2.8.5 — per-glyph Pinyon write-on (no broken letters)
   =============================================================== */
/* Each handwritten reveal stroke is clipped to its own Pinyon glyph. This lets
   the brush fully cover thick joins without exposing neighbouring letters. */
.hero-pinyon-write-mask--glyph{
  fill:none;
  stroke:#fff;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
}
.hero-pinyon-char-settle{
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .hero-pinyon-write-mask--glyph{stroke-dashoffset:0!important}
  .hero-pinyon-char-settle{opacity:1!important}
}

/* ===============================================================
   V2.8.6 — continuous script flow, no per-letter cleanup pops
   =============================================================== */
.hero-pinyon-write-mask--lead,
.hero-pinyon-write-mask--trail,
.hero-pinyon-write-mask--bridge{
  fill:none;
  stroke:#fff;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
}
/* V2.8.5 used per-glyph cleanup rectangles. They are intentionally disabled:
   the trailing brush now performs continuous cleanup on the same pen path. */
.hero-pinyon-char-settle{display:none!important}
@media(prefers-reduced-motion:reduce){
  .hero-pinyon-write-mask--lead,
  .hero-pinyon-write-mask--trail,
  .hero-pinyon-write-mask--bridge{stroke-dashoffset:0!important}
}

/* ===============================================================
   V2.8.7 — viewport-timed, piece-by-piece scroll rise
   =============================================================== */
/* The old .reveal moved an entire section and started before it entered the
   viewport, so the movement was nearly finished by the time it was visible. */
.reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}

html.js .reveal-ready > .scroll-rise{
  opacity:0;
  transform:translate3d(0,38px,0);
  filter:blur(1.6px);
  transition-property:opacity,transform,filter;
  transition-duration:.62s,.82s,.62s;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
  transition-delay:var(--rise-delay,0ms);
  will-change:opacity,transform,filter;
}
html.js .reveal-ready > .scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}

/* Titles get a touch more travel than dense cards/text, which makes the
   vertical rise readable without making the page feel sluggish. */
html.js .reveal-ready > :is(.eyebrow,.section-title,.invitation-personal,.closing__script).scroll-rise{
  transform:translate3d(0,46px,0);
}
html.js .reveal-ready > :is(.eyebrow,.section-title,.invitation-personal,.closing__script).scroll-rise.is-visible{
  transform:translate3d(0,0,0);
}

@media(max-width:600px){
  html.js .reveal-ready > .scroll-rise{
    transform:translate3d(0,34px,0);
    transition-duration:.58s,.76s,.58s;
  }
  html.js .reveal-ready > :is(.eyebrow,.section-title,.invitation-personal,.closing__script).scroll-rise{
    transform:translate3d(0,42px,0);
  }
}

@media(prefers-reduced-motion:reduce){
  html.js .reveal-ready > .scroll-rise,
  html.js .reveal-ready > .scroll-rise.is-visible{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}


/* V2.8.9 — refined inline After Wedding + larger section eyebrows */
.eyebrow{
  font-size:clamp(9.5px,2.55vw,10.5px);
  letter-spacing:.24em;
}
.after-wedding-section{background:#F4F5F2}
.after-wedding-card{padding:4px 5px 0;text-align:center;color:#424548}
.after-wedding-card__eyebrow{margin-bottom:13px;color:#9D8D7F!important;font-size:clamp(10.5px,2.8vw,12px)!important;letter-spacing:.245em!important}
.after-wedding-card__title{margin:0 auto 17px!important;max-width:350px;color:#424548!important;font-size:clamp(25px,6.7vw,32px)!important;line-height:1.38!important;font-weight:400!important;letter-spacing:-.045em!important}
.after-wedding-card__description{max-width:360px;margin:0 auto;color:#6F7372;font-size:clamp(12.5px,3.45vw,14px);line-height:1.9;word-break:keep-all}
.after-wedding-card__meta{margin:16px 0 0;color:#A08F82;font-size:11px;line-height:1.6;letter-spacing:.035em}
.after-wedding-card__registered{margin:14px 0 0;color:#7E8983;font-size:11.5px;line-height:1.65}
.after-wedding-disclosure{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:27px;padding:16px 2px;border:0;border-top:1px solid rgba(125,121,114,.18);border-bottom:1px solid rgba(125,121,114,.18);background:transparent;color:#555B5A;font:inherit;font-size:12.5px;font-weight:500;text-align:left;letter-spacing:-.015em}
.after-wedding-disclosure__icon{flex:0 0 auto;color:#A08F82;font-size:17px;font-weight:300;line-height:1;transition:transform .2s ease}
.after-wedding-disclosure[aria-expanded="true"] .after-wedding-disclosure__icon{transform:rotate(180deg)}
.after-wedding-recover-link,.after-wedding-inline-link{margin:12px 0 0;padding:2px 0;border:0;background:transparent;color:#8B8D89;font-size:10.5px;line-height:1.6;text-decoration:underline;text-decoration-color:rgba(139,141,137,.42);text-underline-offset:4px}
.after-wedding-inline{max-height:0;margin-top:0;overflow:hidden;opacity:0;transform:translateY(-8px);transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .24s ease,transform .34s cubic-bezier(.22,1,.36,1),margin-top .3s ease}
.after-wedding-inline.is-open{max-height:1800px;margin-top:18px;opacity:1;transform:none}
.after-wedding-inline__body{padding:22px 19px;border:1px solid rgba(128,123,116,.14);border-radius:18px;background:rgba(255,255,255,.58);box-shadow:0 10px 32px rgba(73,76,76,.045);text-align:left}
.after-wedding-inline__intro{padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid rgba(128,123,116,.14)}
.after-wedding-inline__intro p{margin:0;color:#636867;font-size:13px;line-height:1.9;white-space:pre-line;word-break:keep-all}
.after-wedding-inline__intro span{display:block;margin-top:11px;color:#989690;font-size:10.5px;line-height:1.7;word-break:keep-all}
.after-wedding-inline__intro--compact h3{margin:0 0 8px;color:#474C4B;font-family:inherit;font-size:17px;font-weight:500;letter-spacing:-.035em}
.after-wedding-inline__intro--compact p{font-size:12px;color:#797C79}
.after-wedding-form{display:grid;gap:14px}
.after-wedding-form label{display:grid;gap:7px}
.after-wedding-form label>span{padding-left:1px;color:#626765;font-size:11.5px;font-weight:500}
.after-wedding-form label>span small{margin-left:3px;color:#A5A39E;font-size:9.5px;font-weight:400}
.after-wedding-form input,.after-wedding-form select,.after-wedding-form textarea{width:100%;min-height:46px;padding:11px 12px;border:1px solid #DEDBD5;border-radius:11px;outline:0;background:rgba(255,255,255,.88);color:#414746;font-size:13.5px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.after-wedding-form input:focus,.after-wedding-form select:focus,.after-wedding-form textarea:focus{border-color:#AAB5AD;box-shadow:0 0 0 3px rgba(111,129,147,.07);background:#FFF}
.after-wedding-form textarea{resize:vertical;min-height:76px;line-height:1.6}
.after-wedding-form__row{display:grid;grid-template-columns:1.22fr .78fr;gap:9px}
.after-wedding-field-note{margin:-7px 1px 0;color:#A2A09B;font-size:9.5px;line-height:1.6}
.after-wedding-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.after-wedding-form-submit{width:100%;min-height:48px;margin-top:3px;border:0;border-radius:12px;background:var(--accent);color:#FFF;font-size:12.5px;font-weight:600;letter-spacing:-.015em;box-shadow:0 8px 20px rgba(85,101,116,.12);transition:transform .15s ease,opacity .15s ease}
.after-wedding-form-submit:active{transform:scale(.99)}
.after-wedding-form-submit:disabled{opacity:.55;cursor:wait}
.after-wedding-privacy{margin:0;color:#A3A19C;font-size:9.5px;line-height:1.65;text-align:center}
.after-wedding-form--recover .after-wedding-inline-link{justify-self:center;margin-top:-2px}
.after-wedding-detail{text-align:center}
.after-wedding-detail__lead{margin:0;color:#4C5250;font-size:17px;font-weight:400;letter-spacing:-.03em}
.after-wedding-detail-date{margin:7px 0 17px;color:#98958F;font-size:10.5px;letter-spacing:.02em}
.after-wedding-detail-card{position:relative;padding:18px 16px;border-top:1px solid #E4E0DA;border-bottom:1px solid #E4E0DA;text-align:left}
.after-wedding-detail-card strong{display:block;color:#414745;font-size:16px;font-weight:500;letter-spacing:-.025em}
.after-wedding-detail-card>p{margin:6px 0 0;color:#747875;font-size:12px;line-height:1.65}
.after-wedding-detail-card dl{display:flex;justify-content:space-between;gap:15px;margin:14px 0 0;padding-top:13px;border-top:1px solid #EEEAE4;font-size:11px}
.after-wedding-detail-card dt{color:#9B9994}.after-wedding-detail-card dd{margin:0;color:#5A605D;font-weight:600}
.after-wedding-copy{margin-top:11px;padding:0;border:0;background:transparent;color:#89958D;font-size:10px;text-decoration:underline;text-decoration-color:rgba(137,149,141,.4);text-underline-offset:3px}
.after-wedding-map-actions{margin-top:8px;border-top:1px solid #ECE8E2}
.after-wedding-map{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 3px;border-bottom:1px solid #ECE8E2;color:#5D6461;font-size:11.5px;font-weight:500;text-decoration:none}
.after-wedding-map b{color:#A08F82;font-size:12px;font-weight:400}
.after-wedding-detail-note{margin:15px 3px 0;color:#96958F;font-size:10.5px;line-height:1.75;text-align:center;word-break:keep-all}
.after-wedding-pending{padding:8px 2px 2px;text-align:center}
.after-wedding-pending h3{margin:0 0 8px;color:#4D5351;font-size:17px;font-weight:500;letter-spacing:-.03em}
.after-wedding-pending p{margin:0;color:#888A86;font-size:11.5px;line-height:1.8}
@media(max-width:380px){.after-wedding-inline__body{padding-left:15px;padding-right:15px}.after-wedding-form__row{grid-template-columns:1fr}.after-wedding-card__description{font-size:12.5px}}

/* ===============================================================
   V2.9.0 — single-stroke pen handwriting (웨딩버스 pen engine)
   =============================================================== */
.hero__mark .hero-pen-script{
  display:block;
  position:absolute;
  z-index:4;
  top:-4px;
  left:50%;
  width:min(84%,430px);
  transform:translateX(-50%);
  pointer-events:none;
  color:#FFF9F3;
  filter:drop-shadow(0 2px 5px rgba(10,15,15,.40));
}
.hero__mark .hero-pen-script[hidden]{display:none!important}
.hero__mark .hero-pen-script .hero-pen-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
@media(max-width:360px){
  .hero__mark .hero-pen-script{top:0;width:min(88%,410px)}
}
/* V2.9.1 — Pinyon Script ink revealed by traced pen strokes */
.hero__mark .hero-pen-script .hero-pen-ink{fill:#FFF9F3}
.hero__mark .hero-pen-script{width:min(90%,470px)}
@media(max-width:360px){.hero__mark .hero-pen-script{width:min(92%,440px)}}