:root{
    --maxw: 600px;
    --bg:#fefefe; 
    --ink:#2d2d2d; 
    --muted:#8a8a8a; 
    --accent:#d099a1; 
    --ink2:#4a4a4a; 
    --line:#e6e6e6; 
    --shaded:#f9f9f9;
    --directionbox:#fffbfd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: 'Pretendard', -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, sans-serif;}
/* Contain accidental horizontal overflow */
html, body { overflow-x: hidden; }
/* Lock scroll when lightbox (or any modal) is open */
body.no-scroll { height: 100%; overflow: hidden; }
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;margin:0 auto}
.section{width:100%;max-width:var(--maxw);margin:0 auto;padding:32px 16px}
.section > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* HERO (slider) */
.hero{position:relative; padding:0;}
.hero-frame{position:relative;width:100%;aspect-ratio:800/932;background:#000;overflow:hidden}
.slides{position:absolute;inset:0}
/* .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:flex;align-items:center;justify-content:center} */
.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1200ms ease-in-out;
    will-change: opacity;
    display:flex;
    align-items:center;
    justify-content:center;
}
.slide.active{opacity:1}
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;    /* fill the hero frame while cropping safely */
  object-position:center; /* keep subject centered; adjust later if needed */
  margin:0;
}
@media (prefers-reduced-motion: reduce){
    .slide{ transition:none; }
}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center}
/* Hero overlay & auto-fit text */
.hero-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px 28px}
.hero-overlay::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    /* Only cover the lower band where the names/text sit */
    height:clamp(220px, 60vh, 440px);
    background:linear-gradient(to top,
        rgba(0,0,0,.48) 0%,
        rgba(0,0,0,.32) 20%,
        rgba(0,0,0,0) 100%);
    z-index:-1;
    pointer-events:none;
}
.hero-text{width:100%;max-width:600px;text-align:center;color:#fff;line-height:1.15;font-weight:500;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'PT Serif', serif;}
/* Fallback size via viewport width; precise fit is handled by JS below */
.hero-text{font-size:clamp(18px, 7vw, 48px)}
/* Script styling for "and" only */
.hero-text .and{
    font-family: 'Pinyon Script', cursive;
    font-weight: 400;
    letter-spacing: .02em;
    display:inline-block;
    font-size: 1.1em; /* slight emphasis */
    transform: translateY(0.02em); /* subtle baseline alignment */
    margin-right: .25em; /* extra gap before HYE */
}
.dot{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.5}
.dot.active{opacity:1}

/* Headings overlay */
.hero-meta{position:relative;margin-top:32px;text-align:center}
.names{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,6vw,60px);align-items:center;justify-items:center;text-align:center;margin-top:56px;margin-bottom:24px}
.names::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-.5px)}
.name-wrapper{text-align:center}
.name-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.name-label{font-family: 'Pretendard', cursive;color:var(--accent);font-size:clamp(18px, 3.2vw, 22px);margin-bottom:8px}
.line.parents{font-family:"Pretendard",sans-serif;font-size:18px;color:var(--ink2);}
.line.rel{font-family:"Pretendard",sans-serif;font-size:16px;color:var(--muted);letter-spacing:.08em;margin-top:2px}
.line.who{font-weight:700;font-size:clamp(18px,3.4vw,22px);margin-top:8px;color:var(--ink)}
.names .label-wrapper{letter-spacing:normal;color:inherit;font-weight:inherit;font-family:inherit;font-size:inherit}
.date{margin-top:64px;color:var(--accent);font-family:"Pretendard", sans-serif;font-size:clamp(16px,3.2vw,22px);letter-spacing:.05em;text-align:center}
.venue{margin-top:12px;color:var(--accent);font-family:"Pretendard", sans-serif;font-size:clamp(14px,2.8vw,20px);letter-spacing:.025em;text-align:center}

/* Message */
.msg{background:var(--shaded);margin-top:64px;text-align:center;line-height:2.1}
.msg p{margin:0 auto;max-width:var(--maxw);font-size:17px}
.parents-name{text-align:center;margin-top:32px;font-family:"Pretendard",sans-serif}
.parents-name p{margin:0 0 12px 0;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.6;color:var(--ink2)}
.parents-name .relation{font-size:17px;color:var(--accent)}

/* Save the Date (mini calendar) */
.save-date{display:flex;flex-direction:column;align-items:center;margin-top:14px}
.cal-card{display:inline-block;padding:12px 12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.cal-head{font-family:'PT Serif', serif;font-size:16px;letter-spacing:.08em;text-align:center;margin-bottom:6px;color:var(--ink2)}
.cal-month{font-weight:700;text-align:center;font-size:20px;margin:6px 0 8px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,22px);grid-auto-rows:22px;gap:4px;justify-content:center;font-size:12px}
.cal-dow{font-weight:600;text-align:center;line-height:22px}
.cal-day{ text-align:center; line-height:22px; border-radius:50%;}
.cal-day.muted{ color:#bcbcbc;}
/* 아주 은은한 핑크 하이라이트 (배경은 흰색 유지) */
.cal-day.mark{ background:#f6e8ee; position:relative;}
.cal-day.mark::after{ content:''; position:absolute; inset:-2px; border:1px solid #e6c9d6; border-radius:50%;}

/* D-day counter under calendar (outside the card) */
.dcount{margin-top:8px;text-align:center;font-family:'Nanum Myeongjo', serif;font-size:14px;letter-spacing:.08em;color:var(--ink2)}

/* Contacts */
.contacts{padding-top:24px;padding-bottom:0}
.contact-rows{display:flex;flex-direction:column;gap:16px;width:100%;margin-bottom:24px}
.contact-row{display:flex;justify-content:center;align-items:center;gap:12px;padding:8px 0}
.contact-info{font-family:"Pretendard", sans-serif;color:var(--ink2)}
.btns{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--shaded);text-decoration:none;cursor:pointer}
.btn.icon{padding:6px;border:none;background:transparent}
.btn.icon img{width:20px;height:20px;display:block}
@media (min-width:480px){
    .btn.icon img{width:18px;height:18px}
}
.btn.full-width{width:100%;margin-top:8px;background:var(--shaded);color:var(--ink2);font-family:"Pretendard", sans-serif}

.more{margin-top:12px;margin-bottom: 36px; text-align:center}
details summary{cursor:pointer;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;list-style:none}
details[open] summary{border-style:solid}
.parents{display:block;margin-top:12px}
.parents-group{border:0;border-radius:0;padding:0;background:transparent}
.parents .row{display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:8px 0}
.modal .parents .row{justify-content:space-between;gap:16px}
.modal .parents .row > div:first-child{flex:1}

.smallbtns{display:flex;gap:8px}
.group-sep{margin:12px 0;border:0;border-top:1px solid var(--line)}
.group-inner{max-width:360px;margin:0 auto}
.group-title{margin:8px 0;text-align:left}

/* Gallery */
.gallery{padding-top:64px}
.grid-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.grid-photos a{display:block;position:relative;overflow:hidden;border-radius:6px;aspect-ratio:1/1}
.grid-photos img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}


/* Map & nav */
.map-section{text-align:center}
.map-section .mapbox{width:100%;height:320px;border:0;border-radius:8px;overflow:hidden;background:#f6f6f6;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin-top:32px;}
@media (max-width:480px){.map-section .mapbox{height:260px}}
.map-title{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-family:"Pretendard", sans-serif;width:100%}
.map-title .place{
    font-size: clamp(16px, 3.2vw, 22px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: .02em;
}
.map-title #addressDetail{
    font-size: clamp(14px, 2.6vw, 18px);
    line-height: 1.4;
    color: var(--ink2);
    letter-spacing: .01em;
    margin-top: 2px;
}
.nav-links ul{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:0;margin:16px 0 0 0;list-style:none}
.nav-links a{display:flex;align-items:center;justify-content:center;text-decoration:none}
.nav-links img{width:40px;height:40px;border-radius:8px}

/* Etc info */
.etc ul{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:10px;padding:3px 16px 3px 16px;background:var(--directionbox)}
.etc li{display:flex;flex-direction:column;gap:4px;padding:12px 0}
.etc li:not(:last-child){border-bottom:1px solid var(--line)}
.etc strong{color:var(--accent);font-family:"Pretendard", sans-serif;font-size:15px}
.etc span{color:var(--ink2);font-size:14px}

/* Remittance */
.remit .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}
.remit .btn{background:#d16f8e;color:#fff;border-color:#d16f8e}

/* Modal (accounts) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:60}
.modal.open{display:flex}
.modal .panel{background:#fff;border-radius:12px;max-width:min(86vw,440px);width:100%;padding:16px 14px}
.acct{border:1px solid var(--line);border-radius:8px;padding:12px;margin:10px 0}
.acct-title{font-weight:700;margin-bottom:6px}
.actions{display:flex;gap:8px;margin-top:8px}

/* Footer */
footer{padding:32px 16px;margin:0 -16px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}
.share{display:flex;gap:10px;justify-content:center;margin-top:10px;width:100%}
footer > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* Utility */
.center{text-align:center}
.muted{color:var(--muted)}
.muted.flaticon{color:var(--muted);font-size:8px;margin-top:12px;}
.shaded{color:var(--shaded)}

/* === A11y: Floating font-size toggle === */
.fab-bar{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:800; display:flex; gap:8px; align-items:center; justify-content:center;
}
/* Individual buttons share the previous look */
.fab{
  padding:10px 16px;
  border:1px solid #111;
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  font-family:"Pretendard", sans-serif;
  font-size:14px;
  letter-spacing:.02em;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Circular variant for icon-only button */
.fab--icon{
  width:44px; height:44px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
}
.fab:focus{outline:2px solid var(--accent); outline-offset:2px}

/* Large-text mode */
.a11y-large .section h2{ font-size: clamp(20px, 4vw, 32px) !important; }
.a11y-large .section p{ font-size: 1.2em; line-height: 1.9; }

/* Message block */
.a11y-large .msg p{ font-size:20px; }

/* Parents name lines */
.a11y-large .parents-name p{ font-size:19px; }
.a11y-large .parents-name .relation{ font-size:19px; }

/* Etc list */
.a11y-large .etc strong{ font-size:17px; }
.a11y-large .etc span{ font-size:16px; }

/* Map title */
.a11y-large .map-title .place{ font-size: clamp(18px, 3.8vw, 26px); }
.a11y-large .map-title #addressDetail{ font-size: clamp(16px, 3.2vw, 20px); }

/* Mini calendar + D-day */
.a11y-large .cal-head{ font-size:20px; }
.a11y-large .cal-month{ font-size:24px; }
.a11y-large .cal-grid{ font-size:14px; }
.a11y-large .dcount{ font-size:16px; }


/* === A11y: broadened large-text coverage === */
/* Global bump for rem/em-based text */
.a11y-large{ font-size:112.5%; }

/* Names block (keep hero overlay as-is) */
.a11y-large .name-label{ font-size: clamp(18px, 3.6vw, 24px); }
.a11y-large .line.parents{ font-size: 20px; }
.a11y-large .line.rel{ font-size: 18px; }
.a11y-large .line.who{ font-size: clamp(20px, 3.8vw, 24px); }

/* Date & Venue */
.a11y-large .date{ font-size: clamp(20px, 3.6vw, 24px); }
.a11y-large .venue{ font-size: clamp(18px, 3.4vw, 22px); }

/* Section headings with inline styles → override with !important */
.a11y-large .gallery h2,
.a11y-large .map-section h2,
.a11y-large .etc h2,
.a11y-large .remit h2{ font-size: clamp(22px, 2.4vw, 26px) !important; }

/* Contacts & Buttons */
.a11y-large .contact-info{ font-size: 1.06em; }
/* .a11y-large .btn{ font-size: 1.00em; padding:10px 12px; } */
.a11y-large .btn.icon img{ width:22px; height:22px; }

/* Etc list spacing a touch larger */
.a11y-large .etc ul{ padding:6px 18px; }

/* Modals */
.a11y-large .modal .panel{ font-size:1.06em; }

.a11y-large .remit p{ font-size: clamp(16px, 2.0vw, 22px) !important; }

/* Footer */
.a11y-large footer{ font-size:1.02em; }

/* === Gallery expand/collapse === */
#gallery.collapsed a:nth-of-type(n+10){
  display:none; /* show only first 9 thumbnails */
}
.gallery-controls{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:12px;
}
.chev-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:1px solid #000;
  color:#000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  -webkit-tap-highlight-color: transparent;
}
.chev-btn svg{ width:18px; height:18px; fill: none; stroke: currentColor; }
.chev-btn svg *{ fill: none !important; stroke: currentColor; }
.chev-btn:active{ transform: translateY(1px); }
.chev-btn:focus-visible{ outline:2px solid #888; outline-offset:2px; }
@media (hover:hover){ .chev-btn:hover{ border-color:#000; color:#000; } }

/* === A11y tweak: soften scaling for Remittance section === */
.a11y-large .remit{ 
  font-size: 0.94em; /* counteracts the global .a11y-large bump */
}
.a11y-large .remit h2{ 
  font-size: clamp(16px, 2.6vw, 22px) !important; /* slightly smaller than generic section override */
}
.a11y-large .remit p{ 
  font-size: clamp(16px, 1.8vw, 19px) !important; /* softer paragraph scale */
}
.a11y-large .remit .btn{ 
  font-size: 0.96em; /* prevent buttons from feeling oversized */
}

/* === GLightbox: desktop arrow styling (hidden on mobile) === */
.glightbox-clean .gprev,
.glightbox-clean .gnext{
  display: flex;              /* force visible (some skins hide on small screens) */
  align-items: center; justify-content: center;
  width: 44px; height: 44px;             /* comfortable touch target */
  border-radius: 50%;                     /* match site style */
  background: #fff;                       /* white circle */
  border: 1px solid #000;                 /* solid black border for contrast */
  color: #000;                            /* solid black for strong icon contrast */
  z-index: 1100;                          /* above overlay chrome */
}
.glightbox-clean .gprev svg,
.glightbox-clean .gnext svg{
  width:18px; height:18px;
  fill: currentColor !important;   /* make arrow solid black */
  stroke: currentColor !important;  /* keep outlines consistent */
}
.glightbox-clean .gprev svg *,
.glightbox-clean .gnext svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Mobile positioning */
@media (max-width: 640px){
  .glightbox-clean .gprev{ left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }
  .glightbox-clean .gnext{ right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }
}

/* Hide arrows on small screens (revert to default mobile experience) */
@media (max-width: 640px){
  .glightbox-clean .gprev,
  .glightbox-clean .gnext{ display:none !important; }
}

/* === GLightbox mobile flicker minimization === */
.glightbox-container .gslide {
  will-change: transform;               /* hint compositor */
}
.glightbox-container .ginner,
.glightbox-container .gslide-image,
.glightbox-container .gslide-image img {
  backface-visibility: hidden;          /* avoid paint artifacts */
  transform: translateZ(0);             /* promote to GPU layer */
}
.glightbox-container .gslide-image img {
  image-rendering: auto;                /* prevent odd resampling */
}