@font-face {
  font-family:Allura;
  src:url('../fonts/allura.woff2') format('woff2');
  font-display:swap;
  font-weight:400
}

@font-face {
  font-family:'Invitation Serif';
  src:url('../fonts/serif-ko.woff2') format('woff2');
  font-display:swap;
  font-weight:400
}

:root {
  --paper:#fff;
  --ink:#38352f;
  --muted:#746e66;
  --accent:#a05c20;
  --line:#e7e2da;
  --wash:#faf9f6;
  --serif:'Invitation Serif','Noto Serif KR','Batang','AppleMyungjo',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}
.analytics-notice {
  margin:0 24px 24px;
  font:11px/1.8 var(--sans);
  color:var(--muted)
}
.analytics-notice summary {cursor:pointer;text-align:center}
.analytics-notice p {padding:8px 0}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:0
}
html,body,dialog {
  touch-action:pan-x pan-y
}
body {
  margin:0;
  background:#eeece7;
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased
}
body.modal-open {
  overflow:hidden
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:pan-x pan-y
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button {
  border-radius:0
}
button[hidden],[hidden] {
  display:none!important
}
main {
  max-width:520px;
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 0 60px #52442d08
}
.skip-link {
  position:fixed;
  top:-100px;
  left:12px;
  background:white;
  padding:12px;
  z-index:99
}
.skip-link:focus {
  top:12px
}
.cover {
  padding:0 24px
}
.cover-top {
  display:flex;
  justify-content:flex-end;
  gap:12px;
  font:10px/1.5 var(--sans);
  letter-spacing:1.6px;
  padding:25px 0 20px;
  color:#777167
}
.cover-photo {
  position:relative;
  overflow:hidden
}
.cover-photo>img {
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover
}
.cover-photo::after {
  content:'';
  position:absolute;
  inset:60% 0 0;
  background:linear-gradient(transparent,#0002);
  pointer-events:none
}
.script {
  font-family:Allura,'Snell Roundhand',cursive;
  font-weight:400;
  line-height:1.05;
  letter-spacing:0
}
.cover h1 {
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:13px;
  margin:0;
  color:white;
  text-align:center;
  font-size:clamp(72px,20vw,110px);
  text-shadow:0 1px 6px #0001
}
.cover h1 span {
  display:block;
  margin-top:-18px;
  padding-left:100px
}
.cover-caption {
  text-align:center;
  padding:27px 0 18px
}
.couple {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  margin:0 0 15px;
  font-size:22px;
  letter-spacing:3px
}
.couple-heart {
  width:19px;
  height:19px;
  flex-shrink:0;
  color:var(--accent)
}
.cover-caption>p:not(.couple) {
  font-size:14px;
  line-height:2.1;
  margin:0
}
.scroll-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:80px;
  margin:25px auto 0;
  font:9px/1.5 var(--sans);
  letter-spacing:2.5px;
  color:#8e867a
}
.scroll-link span {
  font-size:19px;
  line-height:1.6
}
.cover-divider {
  width:48px;
  height:0;
  border:0;
  border-top:1px solid var(--line);
  margin:24px auto 0
}
#invitation-start {
  scroll-margin-top:32px
}
@media(min-width:1024px) {
  .scroll-link {
    display:none
  }
}
.section {
  padding:75px 38px;
  text-align:center
}
.eyebrow {
  font:13px/1.6 var(--sans);
  letter-spacing:2px;
  color:var(--muted);
  margin:0 0 19px
}
.section h2.script {
  color:var(--accent);
  font-size:63px;
  margin:0 0 36px
}
.invitation {
  padding-top:87px;
  padding-bottom:78px
}
.letter {
  text-align:left;
  max-width:320px;
  margin:auto;
  font-size:17px;
  line-height:2.2;
  color:#67615a;
  word-break:keep-all
}
.letter p {
  margin:0 0 29px
}
.letter p:last-child {
  margin:0
}
.families {
  margin-top:49px;
  padding-top:29px;
  border-top:1px solid var(--line);
  font-size:15px
}
.family-line {
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  column-gap:6px;
  margin:7px 0;
  white-space:nowrap
}
.family-line i {
  font-style:normal;
  color:#a49a8b;
  margin:0 3px
}
.relation {
  color:var(--muted);
  font-size:13px
}
.family-line strong {
  font-size:18px;
  font-weight:400;
  margin-left:9px
}
.date-section {
  background:var(--wash);
  padding-top:65px;
  padding-bottom:62px
}
.date-section h2 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:33px;
  letter-spacing:4px;
  margin:13px 0 6px
}
.date-time {
  font-size:14px;
  margin:0 0 24px;
  color:var(--muted)
}
.calendar {
  width:100%;
  max-width:340px;
  margin:0 auto 22px;
  border-collapse:collapse;
  table-layout:fixed;
  font-family:var(--sans);
  font-weight:400
}
.calendar th {
  font-size:12px;
  font-weight:400;
  height:43px;
  color:var(--muted);
  border-bottom:1px solid var(--line)
}
.calendar td {
  height:44px;
  font-size:14px
}
.calendar tr:first-child td {
  padding-top:7px
}
.calendar td span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px
}
.calendar td:first-child {
  color:#b57058
}
.calendar td .wedding-day {
  background:var(--accent);
  color:white;
  border-radius:50%
}
.countdown {
  font-size:14px;
  margin:28px 0 20px
}
.countdown strong {
  color:var(--accent);
  font-weight:500
}
.outline-button {
  border:1px solid #d9d2c6;
  background:transparent;
  padding:11px 20px;
  display:inline-flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  font:13px/1.7 var(--sans);
  min-height:44px
}
.outline-button:hover {
  background:#f1ede6
}
.gallery-section {
  padding-left:24px;
  padding-right:24px
}
.gallery-section h2.script {
  margin-bottom:14px
}
.section-subtitle {
  font-size:14px;
  color:var(--muted);
  margin:0 0 34px
}
.gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.photo {
  padding:0;
  display:block;
  width:100%;
  border:0;
  background:#eee;
  overflow:hidden
}
.photo img {
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  transition:transform .35s
}
.photo-wide {
  grid-column:1/-1
}
.photo-wide img {
  aspect-ratio:3/2
}
.more-button {
  width:100%;
  margin-top:24px
}
.location-section {
  padding-top:65px;
  background:var(--wash);
  padding-left:30px;
  padding-right:30px
}
.location-section h2.script {
  margin-bottom:31px
}
.venue-name {
  font-size:23px;
  font-weight:400;
  margin:0 0 3px
}
.hall {
  font-size:16px;
  margin:0 0 19px
}
.address {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  margin:0
}
.text-button {
  border:0;
  background:none;
  font:13px/1.7 var(--sans);
  min-height:44px;
  padding:10px 16px;
  color:var(--muted)
}
.text-button:hover {
  color:var(--accent)
}
.map-frame {
  margin-top:22px;
  position:relative;
  background:#f1eee7;
  min-height:240px
}
.map {
  height:280px;
  width:100%
}
.map-fallback {
  min-height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:22px
}
.map-pin {
  font-family:var(--sans);
  font-size:38px;
  color:var(--accent);
  line-height:1
}
.map-fallback p {
  font-size:17px;
  line-height:1.7;
  margin:13px 0
}
.map-fallback p span {
  font-size:13px;
  color:var(--muted)
}
.map-fallback a {
  font:13px/1.7 var(--sans);
  text-decoration:underline;
  text-underline-offset:5px;
  padding:8px
}
.map-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line);
  background:white
}
.map-links a {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  font:13px/1.7 var(--sans);
  padding:16px 5px
}
.map-links a+a {
  border-left:1px solid var(--line)
}
.map-brand {
  width:19px;
  height:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  font:bold 11px var(--sans)
}
.kakao {
  background:#fae24c;
  color:#372c11
}
.naver {
  background:#258341;
  color:white
}
.directions {
  text-align:left;
  margin-top:33px
}
.directions>div {
  padding:21px 0;
  border-bottom:1px solid var(--line)
}
.directions>div:last-child {
  border:0;
  padding-bottom:0
}
.directions h3 {
  font-size:15px;
  font-weight:500;
  margin:0 0 9px;
  color:var(--accent)
}
.directions p {
  font-size:14px;
  line-height:1.95;
  color:var(--muted);
  margin:0;
  word-break:keep-all
}
.directions p+p {
  margin-top:14px
}
.directions h4 {
  margin:16px 0 6px;
  font-size:14px;
  font-weight:500
}
.direction-list {
  padding-left:19px;
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.95;
  word-break:keep-all
}
.direction-list li+li {
  margin-top:4px
}
.direction-list li::marker {
  color:var(--accent);
  font-size:.8em
}
.parking-list {
  margin:14px 0
}
.icon {
  width:18px;
  height:18px;
  flex-shrink:0;
  vertical-align:middle
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px
}
.venue-phone {
  font:14px/1.7 var(--sans);
  color:var(--muted);
  margin:12px 0 0
}
.venue-phone a {
  display:inline-block;
  padding:10px 0;
  text-underline-offset:4px
}
.venue-phone a:hover {
  color:var(--accent);
  text-decoration:underline
}
.accounts-section {
  padding-left:30px;
  padding-right:30px
}
.accounts-section h2.script {
  margin-bottom:23px
}
.accounts {
  text-align:left
}
.account-group {
  border:1px solid var(--line);
  margin-top:14px
}
.account-group summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:19px 20px;
  cursor:pointer;
  list-style:none;
  font-size:15px;
  background:var(--wash)
}
.account-group summary::-webkit-details-marker {
  display:none
}
.account-toggle {
  display:flex;
  align-items:center;
  gap:5px;
  font:13px/1.5 var(--sans);
  color:var(--muted)
}
.account-group .when-open,.account-group[open] .when-closed {
  display:none
}
.account-group[open] .when-open {
  display:inline
}
.account-group[open] .chevron {
  transform:rotate(180deg)
}
.account-list {
  list-style:none;
  margin:0;
  padding:0 20px
}
.account {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:21px 0
}
.account+.account {
  border-top:1px solid var(--line)
}
.account p {
  margin:0
}
.account-holder {
  font-size:16px
}
.account-holder span {
  font-size:13px;
  color:var(--muted);
  margin-right:5px
}
.account-bank {
  font:13px/1.8 var(--sans);
  color:var(--muted);
  padding-top:7px
}
.account-number {
  font:15px/1.8 var(--sans);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}
.account-copy {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:44px;
  padding:8px 10px;
  background:white;
  border:1px solid var(--line);
  font:12px/1.7 var(--sans);
  color:var(--muted)
}
.account-copy .icon {
  width:15px;
  height:15px
}
.closing-photo {
  padding:35px 24px 0
}
.closing-photo img {
  width:100%
}
.closing {
  text-align:center;
  padding:40px 30px 25px
}
.closing .script {
  color:var(--accent);
  font-size:62px;
  margin:0 0 24px
}
.closing>p:not(.script) {
  font-size:14px;
  color:var(--muted);
  line-height:2
}
.closing .closing-names {
  margin-top:25px
}
.share-actions {
  margin:33px auto 0;
  max-width:300px;
  display:flex;
  flex-direction:column;
  gap:5px
}
.solid-button {
  background:#9b602f;
  color:white;
  border:1px solid #9b602f;
  min-height:48px;
  padding:12px 22px;
  font:14px/1.7 var(--sans)
}
.solid-button:hover {
  background:#834b20
}
.solid-button span {
  margin-left:18px
}
.endnote {
  text-align:center;
  font:9px/1.6 var(--sans);
  letter-spacing:1.6px;
  color:#8b8379;
  margin:0;
  padding:12px 15px 33px
}
dialog {
  border:0;
  padding:0
}
dialog::backdrop {
  background:#171614f5
}
#lightbox {
  background:transparent;
  color:white;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  overflow:hidden
}
#lightbox[open] {
  display:flex;
  flex-direction:column;
  justify-content:center
}
.lightbox-toolbar {
  flex-shrink:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:max(16px,env(safe-area-inset-top)) 22px 10px;
  font:14px var(--sans)
}
.lightbox-toolbar button {
  width:48px;
  height:48px;
  background:none;
  color:white;
  border:0;
  font-size:34px
}
.lightbox-stage {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex:1;
  min-height:0;
  touch-action:pan-y
}
.lightbox-stage img {
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  height:100%;
  max-width:900px;
  object-fit:contain;
  user-select:none
}
.lightbox-stage button {
  position:absolute;
  z-index:2;
  width:44px;
  height:60px;
  border:0;
  background:#0005;
  color:white;
  font:40px/1 var(--sans);
  top:calc(50% - 30px)
}
#previous-photo {
  left:0
}
#next-photo {
  right:0
}
.lightbox-hint {
  font:12px/1.5 var(--sans);
  text-align:center;
  color:#ddd;
  margin:10px 0;
  padding:0 8px
}
.thumbnail-navigation {
  flex-shrink:0;
  width:min(calc(100% - 32px),440px);
  margin:0 auto;
  padding-bottom:max(8px,env(safe-area-inset-bottom))
}
.thumbnail-carousel {
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}
.thumbnail-carousel::-webkit-scrollbar {
  display:none
}
.thumbnail-page {
  flex:0 0 100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:4px;
  scroll-snap-align:start;
  scroll-snap-stop:always
}
.thumbnail {
  aspect-ratio:1;
  min-width:0;
  padding:3px;
  border:1px solid transparent;
  background:transparent;
  opacity:.6
}
.thumbnail img {
  width:100%;
  height:100%;
  aspect-ratio:1;
  object-fit:cover
}
.thumbnail[aria-pressed="true"] {
  border-color:#e8c5a0;
  opacity:1
}
.thumbnail:hover,.thumbnail:focus-visible {
  opacity:1
}
.thumbnail:focus-visible {
  outline-offset:0
}
.thumbnail-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font:12px/1.5 var(--sans);
  color:#ddd
}
.thumbnail-pagination button {
  width:44px;
  height:44px;
  border:0;
  background:none;
  color:white;
  font:25px/1 var(--sans)
}
.thumbnail-pagination button:disabled {
  opacity:.25
}
@media (orientation:landscape) and (max-height:500px) {
  .lightbox-toolbar {
    padding:0 16px
  }
  .thumbnail-navigation {
    width:260px
  }
  .lightbox-hint {
    display:none
  }
  .thumbnail-pagination button {
    height:32px
  }
}
#toast {
  position:fixed;
  bottom:35px;
  left:50%;
  transform:translate(-50%,15px);
  opacity:0;
  pointer-events:none;
  background:#34302bea;
  color:white;
  font:14px/1.6 var(--sans);
  padding:12px 22px;
  border-radius:4px;
  z-index:20;
  width:max-content;
  max-width:90%;
  transition:opacity .2s,transform .2s
}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
#copy-dialog {
  width:min(90%,400px);
  padding:25px;
  background:white
}
#copy-dialog h2 {
  font-size:16px
}
#copy-value {
  width:100%;
  font:16px var(--sans);
  padding:12px;
  border:1px solid #ccc;
  margin-bottom:20px
}
#copy-dialog button {
  width:100%
}
@media(min-width:600px) {
  main {
  margin:28px auto
}
.cover-top {
  padding-top:27px
}
.cover {
  padding:0 30px
}
.cover h1 {
  font-size:112px
}

}
@media(max-width:360px) {
  .cover {
  padding:0 18px
}
.cover-top {
  font-size:8px;
  letter-spacing:1.2px
}
.section {
  padding-left:24px;
  padding-right:24px
}
.letter {
  font-size:16px
}
.family-line {
  column-gap:4px;
  font-size:14px
}
.family-line strong {
  margin-left:4px;
  font-size:17px
}
.relation {
  font-size:12px
}
.cover-caption>p:not(.couple) {
  font-size:13px
}
.couple {
  font-size:21px
}
.directions p {
  font-size:13px
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* {
  transition:none!important
}

}

.guestbook-section { background: #f6f3ed; }
.guestbook-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; margin:28px 0; }
.guestbook-form label, #guestbook-delete label { display:grid; gap:8px; font:14px/1.6 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif; }
.guestbook-form input,.guestbook-form textarea,#guestbook-delete input { width:100%; box-sizing:border-box; border:1px solid #d8d0c5; background:#fffdfa; padding:12px; border-radius:4px; font:16px/1.6 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif; color:#423c35; }
.guestbook-message,.guestbook-form button { grid-column:1/-1; }
.guestbook-form textarea { resize:vertical; }
.guestbook-entry { text-align:left; border-top:1px solid #ddd4c8; padding:22px 0; font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif; }
.guestbook-entry header { display:flex; align-items:center; gap:12px; }
.guestbook-entry time { font-size:12px; color:#71695e; }
.guestbook-entry button { margin-left:auto; }
.guestbook-entry p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; font-size:15px; }
#guestbook-status,#guestbook-delete-status { font:14px/1.6 sans-serif; }
#guestbook-delete { width:min(360px,85vw); padding:26px; border:1px solid #d8d0c5; background:#faf9f6; color:#423c35; }
#guestbook-delete::backdrop { background:#0008; }
#guestbook-delete .outline-button { margin-top:16px; }