/* =============================================
   WEDDING INVITATION — 박종원 & 김보민
   Refined Edition · Luxury Editorial
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Cormorant+SC:wght@300;400;500&family=Noto+Serif+KR:wght@200;300;400&family=Inter:wght@200;300;400;500&display=swap');

/* ── Tokens ───────────────────────────────── */
:root {
  --ivory:        #faf8f4;
  --ivory-deep:   #f2ece2;
  --ivory-mid:    #ede5d8;
  --charcoal:     #1c1917;
  --charcoal-mid: #44403c;
  --charcoal-soft:#78716c;
  --charcoal-pale:#a8a29e;
  --gold:         #b8975a;
  --gold-light:   #d4b483;
  --gold-faint:   #f0e6d0;
  --line:         #e2d9cd;
  --white:        #ffffff;

  --f-display:  'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
  --f-caps:     'Cormorant SC', 'Cormorant Garamond', serif;
  --f-kr:       'Noto Serif KR', 'Cormorant Garamond', serif;
  --f-ui:       'Inter', system-ui, sans-serif;

  --section-v:  clamp(72px, 12vw, 120px);
  --inner-h:    clamp(28px, 6vw, 72px);
  --max-w:      800px;
  --radius-sm:  6px;
  --radius-md:  12px;

  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ── Reset ────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--f-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ── Page wrapper ─────────────────────────── */
.page-wrapper{
  max-width:var(--max-w);
  margin:0 auto;
  background:var(--ivory);
  overflow:hidden;
  box-shadow:0 0 80px rgba(28,25,23,.07);
}

/* ── Scroll reveal ────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].visible{
  opacity:1;
  transform:none;
}
[data-reveal-delay="1"]{transition-delay:.12s}
[data-reveal-delay="2"]{transition-delay:.24s}
[data-reveal-delay="3"]{transition-delay:.36s}
[data-reveal-delay="4"]{transition-delay:.48s}

/* ── Section label ──────────────────────────── */
.section-label{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:clamp(40px,8vw,64px);
}
.section-label::before,
.section-label::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}
.section-label span{
  font-family:var(--f-caps);
  font-size:clamp(11px,1.5vw,13px);
  font-weight:400;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}

/* ══════════════════════════════════════════
   01 · HERO
   ══════════════════════════════════════════ */
.hero{
  position:relative;
  width:100%;
  min-height:100svh;
  background:var(--charcoal);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  opacity:.72;
  transform:scale(1.04);
  animation:hero-zoom 14s var(--ease-out) forwards;
}
@keyframes hero-zoom{
  to{transform:scale(1); opacity:.78}
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(28,25,23,.65) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 0%,   rgba(28,25,23,.25) 0%, transparent 70%);
}
.hero__grain{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size:200px;
  opacity:.4;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.hero__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(48px,12vw,96px) clamp(28px,6vw,64px);
  animation:hero-fade 1.4s .3s both;
}
@keyframes hero-fade{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}
.hero__eyebrow{
  font-family:var(--f-caps);
  font-size:clamp(10px,1.4vw,12px);
  font-weight:400;
  letter-spacing:.5em;
  color:var(--gold-light);
  text-transform:uppercase;
  margin-bottom:clamp(28px,5vw,44px);
}
.hero__deco{
  width:clamp(180px,55%,320px);
  margin-bottom:clamp(28px,5vw,40px);
  opacity:.7;
}
.hero__names{
  font-family:var(--f-display);
  font-size:clamp(36px,8vw,72px);
  font-weight:300;
  letter-spacing:.18em;
  color:var(--white);
  line-height:1;
  margin-bottom:clamp(20px,4vw,32px);
}
.hero__names .amp{
  font-style:italic;
  font-weight:300;
  color:var(--gold-light);
  margin:0 .2em;
  font-size:.75em;
}
.hero__rule{
  width:48px;
  height:1px;
  background:var(--gold);
  margin:0 auto clamp(18px,3vw,28px);
  opacity:.7;
}
.hero__venue{
  font-family:var(--f-kr);
  font-size:clamp(12px,2vw,16px);
  font-weight:200;
  color:rgba(255,255,255,.75);
  letter-spacing:.12em;
  margin-bottom:8px;
}
.hero__date{
  font-family:var(--f-caps);
  font-size:clamp(11px,1.6vw,14px);
  font-weight:300;
  letter-spacing:.4em;
  color:var(--gold-light);
  opacity:.9;
}
.hero__scroll{
  position:absolute;
  bottom:clamp(24px,5vw,40px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:2;
  animation:hero-fade 1.4s 1.2s both;
}
.hero__scroll span{
  font-family:var(--f-caps);
  font-size:10px;
  letter-spacing:.35em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.hero__scroll-line{
  width:1px;
  height:40px;
  background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
  animation:scroll-pulse 2s 1.8s infinite;
}
@keyframes scroll-pulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* ══════════════════════════════════════════
   02 · OUR STORY
   ══════════════════════════════════════════ */
.our-story{
  background:var(--white);
  padding:var(--section-v) var(--inner-h);
}
.our-story__inner{
  max-width:620px;
  margin:0 auto;
}
.our-story__photo-wrap{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  margin-bottom:clamp(40px,8vw,60px);
  position:relative;
}
.our-story__photo-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(184,151,90,.18);
  pointer-events:none;
}
.our-story__photo{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.our-story__photo-wrap:hover .our-story__photo{transform:scale(1.03)}
.our-story__poem{
  font-family:var(--f-kr);
  font-size:clamp(14px,2.2vw,17px);
  font-weight:200;
  color:var(--charcoal-mid);
  line-height:2.4;
  text-align:center;
  letter-spacing:.03em;
}
.our-story__poem p{margin-bottom:.1em}
.our-story__poem .stanza{margin-top:1.6em}

/* ══════════════════════════════════════════
   03 · LOCATION
   ══════════════════════════════════════════ */
.location{
  background:var(--ivory-deep);
  padding:var(--section-v) var(--inner-h);
}
.location__inner{max-width:620px;margin:0 auto}

.location__header{
  margin-bottom:clamp(32px,6vw,48px);
}
.location__venue{
  font-family:var(--f-display);
  font-size:clamp(36px,9vw,64px);
  font-weight:300;
  font-style:italic;
  color:var(--charcoal);
  line-height:1.05;
  margin-bottom:16px;
  letter-spacing:-.01em;
}
.location__address-block{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.location__address{
  font-family:var(--f-kr);
  font-size:clamp(12px,1.8vw,14px);
  font-weight:200;
  color:var(--charcoal-soft);
  letter-spacing:.05em;
}
.location__phone{
  font-family:var(--f-ui);
  font-size:clamp(12px,1.8vw,14px);
  font-weight:300;
  color:var(--charcoal-soft);
  letter-spacing:.08em;
  margin-top:8px;
}

.location__actions{
  display:flex;
  gap:10px;
  margin:clamp(20px,4vw,32px) 0;
  flex-wrap:wrap;
}
.location__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 22px;
  border:1px solid var(--line);
  font-family:var(--f-caps);
  font-size:clamp(11px,1.5vw,13px);
  font-weight:400;
  letter-spacing:.2em;
  color:var(--charcoal-mid);
  background:transparent;
  transition:all .25s;
}
.location__btn:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.location__btn svg{opacity:.6}

.location__map{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  margin-bottom:clamp(24px,5vw,36px);
  border:1px solid var(--line);
}
.location__map iframe{width:100%;height:100%;border:none;display:block}

.location__transport{display:flex;flex-direction:column;gap:1px}
.transport-card{
  padding:clamp(16px,3vw,22px) 0;
  border-top:1px solid var(--line);
}
.transport-card:last-child{border-bottom:1px solid var(--line)}
.transport-card__title{
  font-family:var(--f-caps);
  font-size:clamp(11px,1.5vw,13px);
  letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:10px;
}
.transport-card__body{
  font-family:var(--f-kr);
  font-size:clamp(12px,1.8vw,14px);
  font-weight:200;
  color:var(--charcoal-soft);
  line-height:1.9;
  white-space:pre-line;
}

/* ══════════════════════════════════════════
   04 · GALLERY
   ══════════════════════════════════════════ */
.gallery{
  background:var(--ivory);
  padding:var(--section-v) var(--inner-h);
}
.gallery__inner{max-width:660px;margin:0 auto}

.gallery__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  margin-bottom:clamp(24px,5vw,36px);
}
.gallery__item{
  aspect-ratio:1;
  overflow:hidden;
  cursor:pointer;
  background:var(--ivory-mid);
  position:relative;
}
.gallery__item::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(28,25,23,0);
  transition:background .3s;
}
.gallery__item:hover::after{background:rgba(28,25,23,.12)}
.gallery__item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.gallery__item:hover img{transform:scale(1.06)}

.gallery__item:first-child{
  grid-column:span 2;
  aspect-ratio:2/1;
}

.gallery__more-wrap{
  display:flex;
  justify-content:center;
}
.gallery__more{
  font-family:var(--f-caps);
  font-size:clamp(11px,1.5vw,13px);
  letter-spacing:.35em;
  color:var(--charcoal-mid);
  padding:12px 32px;
  border:1px solid var(--line);
  transition:all .25s;
}
.gallery__more:hover{
  border-color:var(--gold);
  color:var(--gold);
}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed;inset:0;z-index:9999;
  background:rgba(28,25,23,.95);
  align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.lightbox.open{display:flex}
.lightbox__img{
  max-width:90vw;max-height:88vh;
  object-fit:contain;
}
.lightbox__close{
  position:fixed;top:24px;right:28px;
  color:rgba(255,255,255,.6);
  font-size:28px;line-height:1;cursor:pointer;
  font-family:var(--f-ui);font-weight:200;
  transition:color .2s;
}
.lightbox__close:hover{color:#fff}

/* ══════════════════════════════════════════
   05 · ACCOUNT DETAILS
   ══════════════════════════════════════════ */
.account{
  background:var(--white);
  padding:var(--section-v) var(--inner-h);
}
.account__inner{max-width:620px;margin:0 auto}

.accordion{display:flex;flex-direction:column;gap:0}

.accordion-item{
  border-top:1px solid var(--line);
}
.accordion-item:last-child{border-bottom:1px solid var(--line)}

.accordion-trigger{
  width:100%;
  padding:clamp(18px,3.5vw,26px) 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  cursor:pointer;
  transition:opacity .2s;
}
.accordion-trigger:hover{opacity:.7}

.accordion-trigger__label{
  font-family:var(--f-display);
  font-size:clamp(20px,4vw,28px);
  font-weight:300;
  color:var(--charcoal);
  letter-spacing:.05em;
}
.accordion-trigger__en{
  font-style:italic;
  font-size:.65em;
  color:var(--charcoal-pale);
  margin-left:.5em;
  font-family:var(--f-display);
}
.accordion-trigger__chevron{
  width:20px;height:20px;
  color:var(--gold);
  transition:transform .4s var(--ease-out);
  flex-shrink:0;
}
.accordion-item.open .accordion-trigger__chevron{transform:rotate(180deg)}

.accordion-body{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease-out);
}
.accordion-item.open .accordion-body{max-height:1000px}

.accordion-body__inner{
  padding:0 0 clamp(24px,5vw,36px);
  display:flex;flex-direction:column;gap:0;
}

.account-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0 clamp(14px,3vw,24px);
  padding:clamp(14px,2.5vw,20px) 0;
  border-bottom:1px solid var(--line);
}
.account-card:last-child{border-bottom:none}
.account-card__role{
  font-family:var(--f-caps);
  font-size:clamp(10px,1.3vw,12px);
  letter-spacing:.3em;
  color:var(--charcoal-pale);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  white-space:nowrap;
  min-width:16px;
}
.account-card__info{
  display:flex;flex-direction:column;gap:4px;
}
.account-card__name{
  font-family:var(--f-kr);
  font-size:clamp(16px,3vw,22px);
  font-weight:300;
  color:var(--charcoal);
}
.account-card__number{
  font-family:var(--f-ui);
  font-size:clamp(11px,1.6vw,13px);
  font-weight:300;
  color:var(--charcoal-soft);
  letter-spacing:.05em;
}
.copy-btn{
  font-family:var(--f-caps);
  font-size:11px;
  letter-spacing:.25em;
  color:var(--charcoal-pale);
  padding:8px 14px;
  border:1px solid var(--line);
  transition:all .2s;
  flex-shrink:0;
}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.copy-btn.copied{
  border-color:var(--gold);
  color:var(--gold);
  background:var(--gold-faint);
}

/* ══════════════════════════════════════════
   06 · CONGRATULATIONS
   ══════════════════════════════════════════ */
.congrats{
  background:var(--ivory-deep);
  padding:var(--section-v) var(--inner-h);
  position:relative;overflow:hidden;
}
.congrats__bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.04;pointer-events:none;
  mix-blend-mode:multiply;
}
.congrats__inner{
  max-width:580px;margin:0 auto;position:relative;z-index:1;
}
.congrats__desc{
  font-family:var(--f-kr);
  font-size:clamp(13px,1.9vw,15px);
  font-weight:200;
  color:var(--charcoal-soft);
  line-height:2;
  text-align:center;
  margin-bottom:clamp(36px,7vw,52px);
  letter-spacing:.03em;
}

.message-list{
  display:flex;flex-direction:column;gap:1px;
  margin-bottom:clamp(36px,7vw,52px);
}
.message-card{
  padding:clamp(16px,3vw,22px) 0;
  border-top:1px solid var(--line);
}
.message-card:last-child{border-bottom:1px solid var(--line)}
.message-card__meta{
  display:flex;justify-content:space-between;
  margin-bottom:8px;
}
.message-card__name{
  font-family:var(--f-caps);
  font-size:clamp(11px,1.5vw,13px);
  letter-spacing:.2em;
  color:var(--charcoal-mid);
}
.message-card__date{
  font-family:var(--f-ui);
  font-size:11px;
  font-weight:300;
  color:var(--charcoal-pale);
}
.message-card__text{
  font-family:var(--f-kr);
  font-size:clamp(13px,1.9vw,15px);
  font-weight:200;
  color:var(--charcoal-soft);
  line-height:1.8;
}

.congrats-form{display:flex;flex-direction:column;gap:0}

.form-group{
  position:relative;
  padding-top:20px;
  margin-bottom:clamp(20px,4vw,28px);
}
.form-label{
  position:absolute;top:0;left:0;
  font-family:var(--f-caps);
  font-size:11px;
  letter-spacing:.3em;
  color:var(--gold);
}
.form-input,
.form-textarea{
  width:100%;
  padding:10px 0;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  font-family:var(--f-kr);
  font-size:clamp(13px,1.9vw,15px);
  font-weight:200;
  color:var(--charcoal);
  outline:none;
  resize:none;
  transition:border-color .25s;
}
.form-input::placeholder,.form-textarea::placeholder{
  color:var(--charcoal-pale);
  font-family:var(--f-kr);
  font-weight:200;
}
.form-input:focus,.form-textarea:focus{
  border-bottom-color:var(--gold);
}
.form-textarea{height:100px}
.char-count{
  text-align:right;
  font-family:var(--f-ui);
  font-size:11px;
  color:var(--charcoal-pale);
  margin-top:4px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,4vw,32px);
}
.form-row .form-group{margin-bottom:0}

.form-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-top:clamp(16px,3vw,24px);
}
.anonymous-check{
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-caps);
  font-size:11px;letter-spacing:.2em;
  color:var(--charcoal-soft);cursor:pointer;
}
.anonymous-check input{
  accent-color:var(--gold);
  width:14px;height:14px;
}
.submit-btn{
  font-family:var(--f-caps);
  font-size:clamp(12px,1.6vw,14px);
  letter-spacing:.3em;
  color:var(--white);
  background:var(--charcoal);
  padding:clamp(14px,2.5vw,18px) clamp(32px,6vw,52px);
  transition:background .25s,transform .15s;
}
.submit-btn:hover{background:var(--gold);transform:translateY(-1px)}
.submit-btn:active{transform:none}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
footer{
  background:var(--charcoal);
  padding:clamp(48px,10vw,72px) var(--inner-h);
  text-align:center;
}
.footer__monogram{
  font-family:var(--f-display);
  font-size:clamp(32px,6vw,52px);
  font-weight:300;
  font-style:italic;
  color:var(--gold-light);
  letter-spacing:.15em;
  margin-bottom:16px;
}
.footer__rule{
  width:40px;height:1px;
  background:var(--gold);
  margin:0 auto 20px;
  opacity:.5;
}
.footer__names{
  font-family:var(--f-caps);
  font-size:clamp(11px,1.6vw,13px);
  font-weight:300;
  letter-spacing:.45em;
  color:rgba(255,255,255,.5);
  margin-bottom:8px;
}
.footer__date{
  font-family:var(--f-ui);
  font-size:clamp(10px,1.4vw,12px);
  font-weight:200;
  letter-spacing:.2em;
  color:rgba(255,255,255,.3);
}

/* ── Responsive ───────────────────────────── */
@media(min-width:560px){
  .gallery__grid{grid-template-columns:repeat(4,1fr)}
  .gallery__item:first-child{aspect-ratio:2/1}
}
@media(min-width:800px){
  .our-story__poem{font-size:17px}
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .gallery__item:first-child{grid-column:span 2;aspect-ratio:2/1}
}

/* ── Util ─────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}