html, body { background: #443025; }
html[lang|="ko"] body { word-break: keep-all; }
.custom-font #root p { font-family: var(--invitation-font) !important; }
.load-error { position: fixed; inset: 1rem 1rem auto; z-index: 100; padding: 1rem; background: #f2cfca; color: #443025; font: 16px/1.5 sans-serif; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #ec9c9d; outline-offset: 4px; }
noscript { display: block; color: #f2cfca; padding: 2rem; text-align: center; }
@font-face { font-family: Cardo; src: url('/_assets/detail/b95aa1fdcb09e09615227815961b914b-full.8ff20a628f9ad901.woff2'); font-display: block; }
@font-face { font-family: Cardo; src: url('/_assets/cover/b95aa1fdcb09e09615227815961b914b-latin.woff2'); font-display: block; unicode-range: U+0000-00FF, U+2010-203A; }
.story-section { display: flex !important; flex-direction: column; background-position: center top; background-size: cover; background-repeat: no-repeat; }
.reception-countdown { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; color: #fff6f3; text-align: center; font-family: var(--invitation-font, Cardo), Georgia, serif; }
.reception-countdown h3 { margin: 0 0 24px; font-size: 70px; font-weight: 400; line-height: 1.3; }
.countdown-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.countdown-units > div { padding: 18px 8px; border: 2px solid #aa7f66; border-radius: 12px; background: #fff6f3e6; color: #443025; }
.countdown-units span { display: block; font-size: 58px; line-height: 1.2; }
.countdown-units [data-countdown-value] { font-size: 90px; font-variant-numeric: tabular-nums; }
.reception-countdown .calendar-link { display: inline-flex; box-sizing: border-box; align-self: center; align-items: center; justify-content: center; gap: 20px; min-height: 190px; margin-top: 24px; padding: 20px 48px; border: 3px solid #443025; border-radius: 12px; background: #443025; color: #fff6f3; font-size: 60px; line-height: 1.3; text-decoration: none; }
.calendar-link svg { width: 1.1em; height: 1.1em; flex: none; }
.reception-countdown .calendar-link:focus-visible { outline-width: 10px; outline-offset: 10px; }
.countdown-complete { margin: 16px 0 0; font-size: 42px; line-height: 1.4; }
.story-section ._8jGYJw, .story-section .GDnEHQ { background-color: transparent !important; }
#LBXl7dRCj1G2pBwZ.is-visible .Izwocg { animation: story-seal-spin 4.8s linear; transform-origin: center; }
@keyframes story-seal-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.story-content { order: 1; box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 24px 64px; color: #fff6f3; font: 18px/1.8 var(--invitation-font, Cardo), Georgia, serif; text-align: left; }
.story-content article { padding: 0 0 0 22px; border-left: 1px solid #ec9c9d; margin: 0 0 32px; }
.story-content h3 { font: 600 24px/1.4 var(--invitation-font, Cardo), Georgia, serif; margin: 0 0 12px; color: #fff6f3; overflow-wrap: break-word; }
.story-content p { text-align: justify; margin: 0; white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; }
.rsvp-section { display: block !important; background: #f2cfca !important; }
.rsvp-section > div { display: none; }
.rsvp-frame { display: block; box-sizing: border-box; width: 100%; height: 1200px; border: 0; }
.gift-section { position: relative; }
.qris-trigger { position: absolute; z-index: 5; left: 0; right: 0; width: auto; margin: 0 auto; padding: 0; border: 0; background: transparent; color: #fff6f3; cursor: pointer; transform-origin: 50% 80%; }
.qris-trigger img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.qris-trigger span { display: block; position: absolute; top: 100%; left: 50%; width: 130px; margin: 8px 0 0 -65px; font: 14px/1.4 var(--invitation-font, Cardo), Georgia, serif; text-align: center; text-decoration: underline; }
.qris-trigger.is-visible { animation: gift-wobble 4.8s ease-in-out; }
.qris-trigger:hover, .qris-trigger:focus-visible { animation: gift-hover 1s ease-in-out; }
.qris-trigger:focus-visible { outline: 3px solid #443025; outline-offset: 6px; border-radius: 12px; }
.qris-dialog { box-sizing: border-box; width: min(94vw, 520px); max-height: calc(100svh - 24px); padding: 24px; border: 1px solid #aa7f66; border-radius: 16px; background: #fff6f3; color: #443025; text-align: center; font: 16px/1.5 var(--invitation-font, Cardo), Georgia, serif; }
.qris-dialog::backdrop { background: rgb(36 21 14 / 76%); }
.qris-dialog h2 { font: 28px/1.2 var(--invitation-font, Cardo), Georgia, serif; margin: 8px 0; }
.qris-dialog p { margin: 8px 0 16px; }
.qris-dialog img { display: block; width: 100%; max-height: calc(100svh - 245px); object-fit: contain; margin: 0 auto 16px; }
.qris-dialog a { color: #443025; text-decoration: underline; padding: 10px; display: inline-block; }
.qris-close { display: block; margin-left: auto; padding: 8px 16px; min-height: 44px; border: 1px solid #aa7f66; border-radius: 6px; background: #fff6f3; color: #443025; font: inherit; cursor: pointer; }
html:has(.qris-dialog[open]) { overflow: hidden; }
.gallery-section { display: flex !important; flex-direction: column; background-size: cover; }
.gallery-section > .detail-canvas { overflow: hidden; }
.gallery-grid { order: 1; box-sizing: border-box; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; padding: 0 20px 32px; width: 100%; }
.gallery-grid img { display: block; width: 100%; height: auto; }
.gallery-grid img:nth-child(3n + 1) { grid-column: 1 / -1; }
@keyframes gift-wobble { 0%, 28%, 55%, 82%, 100% { rotate: 0deg; translate: 0 0; } 6%, 61% { rotate: -7deg; translate: 0 -4px; } 12%, 67% { rotate: 7deg; translate: 0 -6px; } 18%, 73% { rotate: -4deg; } 23%, 78% { rotate: 3deg; } }
@keyframes gift-hover { 0%, 100% { rotate: 0deg; } 25% { rotate: -7deg; } 50% { rotate: 7deg; } 75% { rotate: -4deg; } }
@media (min-width: 601px) {
  .qris-trigger { scale: 1.25; transform-origin: 50% 0; }
  .qris-trigger span { width: clamp(160px, 24vw, 240px); margin-left: 0; transform: translateX(-50%); font-size: clamp(16px, 1.65vw, 22.4px); }
}
@media (max-width: 600px) { .story-content { font-size: 17px; padding: 24px 24px 44px; } .story-content h3 { font-size: 23px; } .qris-dialog { padding: 16px; } }
@media (prefers-reduced-motion: reduce) {
  #LBXl7dRCj1G2pBwZ .Izwocg { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}