html, body {
  height: 100%;
}

:root{
  --bg:#f7f4ef;
  --paper:#fcfaf7;
  --card:rgba(255,255,255,.82);
  --line:rgba(186,166,148,.18);
  --text:#3c322b;
  --sub:#8b7768;
  --point:#bfa79a;
  --point-deep:#8d7261;
  --shadow:0 16px 34px rgba(73,55,37,.08);
  --groom:#6f91be;
  --bride:#c98a96;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#ece7e1;
  color:var(--text);
  font-family:"Noto Serif KR",serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}

.invite-wrap{
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:
    radial-gradient(circle at 1px 1px, rgba(190,173,155,.14) 1px, transparent 0);
  background-size:12px 12px;
  background-color:var(--paper);
  box-shadow:0 0 36px rgba(0,0,0,.08);
}

.hero{
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}

.hero-bg{
  position: absolute;
  inset: 0;
  background: url("../images/main.jpg") center center / cover no-repeat;
  transform: scale(1);
  will-change: auto;
  z-index: 0;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 32%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 100%);
}

.hero-inner{
  position: relative;
  z-index: 2;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  padding: 28px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.hero-kicker{
  margin:0 0 18px;
  letter-spacing:.32em;
  font-size:11px;
  text-transform:uppercase;
  color: rgba(255,255,255,0.88);
  opacity: 1;
}

.hero-script{
  margin:0;
  text-shadow:0 6px 18px rgba(0,0,0,.28);
}

.hero-script-top,
.hero-script-bottom{
  display:block;
  font-family:"Great Vibes",cursive;
  font-weight:400;
  line-height:1;
}

.hero-script-top{font-size:56px}
.hero-script-bottom{font-size:64px;margin-top:4px}

.hero-names{
  margin-top:44px;
  font-size:24px;
  font-weight:500;
  letter-spacing:.04em;
  color:#fff;
}

.hero-date{
  margin-top:12px;
  font-size:16px;
  opacity:.92;
  color:#fff;
}

.scroll-text{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.88);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  z-index:2;
  animation: scrollFloat 2.6s ease-in-out infinite;
}

@keyframes scrollFloat {
  0%   { transform: translate(-50%, 0); }
  50%  { transform: translate(-50%, 6px); }
  100% { transform: translate(-50%, 0); }
}

.parallax-block{
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.section{
  position:relative;
  padding:76px 22px;
}
.section + .section{
  border-top:1px solid rgba(218,208,198,.34);
}

.section-kicker{
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  letter-spacing:.24em;
  color:#b7a49c;
  margin-bottom:8px;
}
.section-title{
  text-align:center;
  font-size:24px;
  color:#8d7871;
  margin:0 0 28px;
  font-weight:500;
  line-height:1.45;
}

.date-card,
.message-card,
.rsvp-card,
.location-card,
.guestbook-card,
.thanks-card,
.guide-card,
.account-box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

.date-card{
  padding:30px 18px 24px;
}
.date-big{
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size:42px;
  letter-spacing:.12em;
  color:#7a6961;
}
.date-sub{
  margin-top:10px;
  text-align:center;
  font-size:18px;
  color:#5f5147;
}

.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:28px 0 20px;
}
.count-item{
  background:rgba(247,242,238,.92);
  border:1px solid rgba(214,201,191,.34);
  border-radius:18px;
  text-align:center;
  padding:16px 4px 14px;
}
.count-item strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:32px;
  color:#7a6860;
}
.count-item span{
  display:block;
  margin-top:7px;
  font-size:11px;
  letter-spacing:.14em;
  color:#a08f84;
}
.count-message{
  text-align:center;
  margin:0;
  font-size:16px;
  line-height:1.9;
  color:#5d4e45;
}
.action-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}

.primary-btn,
.secondary-btn,
.copy-btn,
.side-btn,
.tab-btn,
.meal-btn,
.account-head{
  border:0;
  cursor:pointer;
  transition:.18s ease;
}
.primary-btn:active,
.secondary-btn:active,
.copy-btn:active,
.side-btn:active,
.tab-btn:active,
.meal-btn:active{transform:scale(.985)}

.primary-btn{
  width:100%;
  min-height:54px;
  border-radius:16px;
  background:linear-gradient(135deg,#d7c2c0 0%, #bfa8a1 100%);
  color:#fff;
  font-size:16px;
  font-weight:600;
}
.secondary-btn{
  width:100%;
  min-height:54px;
  border-radius:16px;
  background:rgba(255,255,255,.82);
  color:#7f6c61;
  border:1px solid rgba(185,164,151,.28);
  font-size:16px;
  font-weight:600;
}

.message-card{
  padding:34px 24px;
  text-align:center;
}
.message-card p{
  margin:0;
  font-size:16px;
  line-height:2.05;
  color:#4a3d35;
  word-break:keep-all;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  box-shadow:0 8px 18px rgba(42,31,18,.08);
  background:#f3efeb;
  cursor:pointer;
}
.gallery-item img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .45s ease, opacity .35s ease;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.16) 0%, rgba(0,0,0,.04) 34%, rgba(0,0,0,0) 60%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.gallery-item:hover img{
  transform:scale(1.03);
}
.gallery-item:hover::after{
  opacity:1;
}
.gallery-item.is-hidden{
  display:none;
}

.gallery-more-wrap{
  margin-top:22px;
}

.rsvp-card{
  padding:22px 18px;
}
.rsvp-side-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.side-btn{
  min-height:52px;
  border-radius:14px;
  background:#f3f1f0;
  color:#786b62;
  border:1px solid rgba(215,203,194,.7);
  font-weight:600;
}
.side-btn.groom.active{
  background:var(--groom);
  border-color:var(--groom);
  color:#fff;
}
.side-btn.bride.active{
  background:var(--bride);
  border-color:var(--bride);
  color:#fff;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.form-grid .full{grid-column:1 / -1}
.field{
  width:100%;
  border:1px solid rgba(208,194,184,.7);
  background:rgba(255,255,255,.84);
  border-radius:14px;
  padding:14px;
  font-size:15px;
  color:#443830;
  outline:none;
}
.field::placeholder{color:#b0a39b}
.textarea{
  min-height:110px;
  resize:vertical;
}

.meal-group{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:14px 0 16px;
}
.meal-btn{
  min-height:48px;
  border-radius:12px;
  background:#f3f1f0;
  color:#7a6a62;
  border:1px solid rgba(215,203,194,.7);
  font-size:15px;
  font-weight:600;
}
.meal-btn.active{
  background:#fff;
  color:#6f625b;
  border:2px solid #b9aea7;
}

.guide-shell{
  overflow:hidden;
  border-radius:28px;
  box-shadow:var(--shadow);
}
.guide-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:rgba(245,239,234,.74);
  border:1px solid rgba(209,194,182,.42);
  border-bottom:0;
}
.tab-btn{
  padding:16px 10px;
  background:transparent;
  color:#8b7870;
  font-size:15px;
  border-right:1px solid rgba(209,194,182,.42);
}
.tab-btn:last-child{border-right:0}
.tab-btn.active{
  background:rgba(255,255,255,.96);
  color:#7d6962;
  font-weight:600;
}
.guide-card{
  border-radius:0 0 28px 28px;
  padding:18px;
  border-top:0;
}
.guide-image{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:18px;
}
.guide-text{
  text-align:center;
  font-size:16px;
  line-height:2;
  color:#51443b;
  padding:0 8px 6px;
  word-break:keep-all;
}

.location-card{
  padding:24px 18px;
}
.location-place{
  text-align:center;
  font-size:20px;
  line-height:1.8;
  font-weight:600;
  color:#2d241d;
}
.location-address{
  text-align:center;
  margin-top:6px;
  font-size:16px;
  line-height:1.8;
  color:#918177;
}
.map-frame{
  width:100%;
  height:320px; /* 🔥 기존보다 키움 */
  border-radius:12px;
  overflow:hidden;
}
.map-frame iframe{
  width:100%;
  height:320px;
  border:0;
}
.map-links{
  display:flex;
  margin-top:12px;
  border-radius:10px;
  overflow:hidden;
}

.map-link-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 6px;
  background:#f1ece9;
  color:#2f2925;
  text-decoration:none;
  font-size:13px;
  border-right:1px solid rgba(0,0,0,0.08);
}

.map-link-btn:last-child{
  border-right:none;
}

.map-link-icon-box{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.map-link-icon-box img{
  width:20px;
  height:20px;
}

.account-accordion{
  display:grid;
  gap:14px;
}
.account-box{
  overflow:hidden;
}
.account-head{
  width:100%;
  padding:20px;
  background:#f2edeb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#7e6a63;
  font-size:18px;
  font-weight:600;
}
.account-body{
  display:none;
  background:rgba(255,255,255,.86);
}
.account-box.open .account-body{display:block}
.account-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding:18px;
  border-top:1px solid rgba(215,202,193,.42);
  align-items:center;
}
.account-bank{
  font-size:16px;
  line-height:1.8;
  color:#4e433a;
}
.account-holder{
  margin-top:4px;
  font-size:15px;
  color:#6d6057;
}
.copy-btn{
  min-width:86px;
  height:44px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  border:1px solid rgba(202,188,179,.58);
  background:#fff;
  color:#65574c;
}

.guestbook-card{
  padding:18px;
}
.guestbook-form{
  display:grid;
  gap:10px;
  margin-bottom:18px;
}
.guestbook-list{
  display:grid;
  gap:12px;
}
.guestbook-item{
  background:rgba(255,255,255,.84);
  border:1px solid rgba(210,197,188,.48);
  border-radius:18px;
  padding:16px 16px 14px;
}
.guestbook-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.guestbook-name{
  font-weight:600;
  color:#64554c;
  font-size:15px;
}
.guestbook-date{
  font-size:12px;
  color:#aa9b91;
}
.guestbook-message{
  font-size:15px;
  line-height:1.85;
  color:#4c4037;
  white-space:pre-wrap;
  word-break:break-word;
}
.empty-text{
  text-align:center;
  color:#8f7a69;
  padding:18px 0 8px;
}

.thanks-card{
  padding:28px 20px;
  text-align:center;
}
.thanks-card p{
  margin:0;
  line-height:1.9;
  color:#4a3d35;
}
.share-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
}

.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(14px);
  z-index:10000;
  min-width:180px;
  max-width:calc(100vw - 40px);
  background:rgba(49,39,33,.92);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  text-align:center;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.reveal-item{
  opacity:0;
  transform:translate3d(0, 18px, 0);
  will-change:transform, opacity;
}

.reveal-item.is-visible{
  opacity:1;
}

.reveal-hero{
  opacity:1 !important;
  transform:none !important;
}

.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8, 8, 10, 0.94);
  backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
  z-index:99999;
}

.lightbox.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.lightbox-img{
  display:block;
  max-width:min(92vw, 900px);
  max-height:82vh;
  width:auto;
  height:auto;
  border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.38);
  transform:scale(.96);
  transition:transform .28s ease, opacity .28s ease;
  opacity:0;
  user-select:none;
  -webkit-user-drag:none;
}

.lightbox.show .lightbox-img{
  transform:scale(1);
  opacity:1;
}

.lightbox-close{
  position:absolute;
  top:18px;
  right:20px;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

.lightbox-nav.prev{ left:16px; }
.lightbox-nav.next{ right:16px; }

.lightbox-close:hover,
.lightbox-nav:hover{
  background:rgba(255,255,255,.18);
}

body.lightbox-open{
  overflow:hidden;
  touch-action:none;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

.gallery-item img,
.guide-image {
  transform: translateZ(0);
}

@media (max-width:380px){
  .section{padding:66px 18px}
  .hero-script-top{font-size:48px}
  .hero-script-bottom{font-size:56px}
  .action-buttons{grid-template-columns:1fr}
}

@media (max-width: 480px){
  .lightbox{
    padding:18px;
  }

  .lightbox-img{
    max-width:92vw;
    max-height:74vh;
    border-radius:14px;
  }

  .lightbox-nav{
    width:44px;
    height:44px;
    font-size:26px;
  }

  .lightbox-close{
    width:44px;
    height:44px;
    font-size:28px;
  }

  .lightbox-nav.prev{ left:10px; }
  .lightbox-nav.next{ right:10px; }
}

@media (prefers-reduced-motion: reduce){
  .gallery-item img,
  .gallery-item::after,
  .lightbox,
  .lightbox-img{
    transition:none !important;
  }

  .reveal-item,
  .parallax-block{
    opacity:1 !important;
    transform:none !important;
  }
}