@font-face {
  font-family: 'Invitation Serif';
  src: url('assets-673e0b233e00a5d9/fonts/invitation-serif.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #fcfbf8;
  --paper-deep: #f3f2ed;
  --ink: #343831;
  --ink-soft: #555b52;
  --muted: #686e65;
  --accent: #626e5b;
  --sunday: #985a55;
  --line: #dfdfd6;
  --button-line: #d2d8c9;
  --button-surface: #f4f6ef;
  --button-ink: #59644f;
  --button-hover: #f0f1ea;
  --button-pressed: #e8ece2;
  --serif: 'Invitation Serif', 'AppleMyungjo', 'Batang', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: #e9ebe6;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 0.9375rem; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { display: block; width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
main { max-width: 480px; margin: auto; background: var(--paper); overflow: hidden; text-align: center; }

/* Every secondary action on the page uses this one quiet button. */
.line-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 10px 22px; border: 1px solid var(--button-line); border-radius: 999px; background: var(--button-surface); font-size: 0.875rem; color: var(--button-ink); transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
#open-gallery::before, .copy-address::before, .copy-link-button::before { content: ''; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: var(--button-icon) center / contain no-repeat; mask: var(--button-icon) center / contain no-repeat; }
#open-gallery { --button-icon: url('assets-673e0b233e00a5d9/icons/images.svg'); }
.copy-address, .copy-link-button { --button-icon: url('assets-673e0b233e00a5d9/icons/copy.svg'); }
.copy-address.is-copied, .copy-link-button.is-copied { --button-icon: url('assets-673e0b233e00a5d9/icons/check.svg'); }
.copy-link-button { min-width: 160px; }

/* Cover */
.cover { position: relative; }
/* The music button stays at the top right of the invitation while the guest scrolls. */
.music-toggle { position: fixed; top: max(12px, calc(env(safe-area-inset-top) + 8px)); right: max(12px, calc(env(safe-area-inset-right) + 8px), calc((100vw - 480px) / 2 + 12px)); z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(52, 56, 49, .04); color: var(--accent); }
.music-note { width: 18px; height: 18px; }
.music-bars { display: none; align-items: flex-end; gap: 2.5px; height: 14px; }
.music-bars i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: music-bar 1.1s ease-in-out infinite; }
.music-bars i:nth-child(2) { animation-delay: -.45s; }
.music-bars i:nth-child(3) { animation-delay: -.8s; }
@keyframes music-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.music-toggle[aria-pressed="true"] .music-note { display: none; }
.music-toggle[aria-pressed="true"] .music-bars { display: flex; }
.cover-visual { display: flex; flex-direction: column; }
.cover-photo { aspect-ratio: 3 / 2; object-fit: contain; }
.cover-heading { order: -1; padding: 56px 24px 36px; }
h1 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; font-family: var(--serif); font-size: 1.8125rem; font-weight: 400; line-height: 1.4; }
.name-dot { font-size: 1rem; color: var(--accent); }
.cover-date { margin-top: 14px; font-family: var(--serif); font-size: 0.9375rem; letter-spacing: .08em; color: var(--ink-soft); }
.cover-info { padding: 32px 24px 0; }
.cover-info p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; }
.cover-info p + p { margin-top: 4px; font-family: var(--sans); font-size: 0.875rem; color: var(--muted); }

.section-pad { padding: 72px 28px; }
.section-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; line-height: 1.6; color: var(--ink); }

.invitation .section-title { font-size: 1.125rem; color: var(--accent); }
.invitation-message { margin-top: 28px; font-family: var(--serif); font-size: 1.0625rem; line-height: 2.1; }
/* Parents on the left, the couple's names in a column on the right. */
.families { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; column-gap: 12px; row-gap: 8px; margin-top: 40px; font-family: var(--serif); }
.families p { display: contents; }
.parents { text-align: right; font-size: 0.9375rem; color: var(--ink-soft); }
.parents span { font-family: var(--sans); font-size: 0.875rem; color: var(--muted); }
.families strong { text-align: left; font-size: 1.1875rem; font-weight: 400; color: var(--ink); }

.photographs { padding: 72px 20px; background: var(--paper-deep); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 32px 0; }
.photo { display: block; overflow: hidden; width: 100%; background: #e7e9e0; }
.photo img { aspect-ratio: 2 / 3; object-fit: contain; transition: transform .6s ease; }
.photo-feature, .photo-wide { grid-column: 1 / -1; }
.photo-wide { margin: 8px 0; }
.photo-wide img { aspect-ratio: 3 / 2; }
@media (hover: hover) { .photo:hover img { transform: scale(1.02); } }
.photo-total { margin-left: 2px; padding-left: 12px; border-left: 1px solid var(--button-line); color: var(--muted); font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; }

.ceremony { padding-bottom: 44px; }
.ceremony-date { margin-top: 24px; font-family: var(--serif); font-size: 1.625rem; letter-spacing: .06em; }
.ceremony-time { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); }
.calendar { margin: 32px auto 0; max-width: 320px; padding: 16px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; table-layout: fixed; text-align: center; }
th { height: 36px; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
td { height: 42px; font-family: var(--serif); font-size: 1rem; }
th:first-child, td:first-child { color: var(--sunday); }
.wedding-day { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; }

.location { padding-top: 44px; }
.venue-name { margin-top: 24px; font-family: var(--serif); font-size: 1.4375rem; }
.hall { margin-top: 6px; font-size: 0.9375rem; color: var(--ink-soft); }
.address { margin-top: 12px; font-size: 0.875rem; line-height: 1.7; color: var(--muted); }
.map { display: block; width: 100%; height: auto; margin: 24px auto; color: var(--muted); stroke-width: 0; }
.map path { fill: none; }
.map .road-border { stroke: #bcc3b5; stroke-width: 9; }
.map .road { stroke: var(--paper); stroke-width: 6; }
.map .map-street { stroke: #bcc3b5; stroke-width: 1.5; }
.map circle { fill: #7a8373; }
/* Diagram labels scale with its viewBox; the full address above follows the reader's text size. */
.map text { fill: var(--muted); font-size: 18px; }
.map .venue-ring { fill: #626e5b16; }
.map .venue-dot, .map .venue-label { fill: var(--accent); }
.place-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.place-actions > * { flex: 1 1 7rem; }
.place-actions .copy-address { flex-basis: 100%; }

.accounts { padding-top: 72px; padding-bottom: 72px; background: var(--paper-deep); }
.account-message { margin-top: 24px; font-family: var(--serif); font-size: 1rem; line-height: 2; color: var(--ink-soft); }
.account-groups { margin-top: 32px; text-align: left; }
.account-group { border-top: 1px solid var(--line); overflow: hidden; }
.account-group:last-child { border-bottom: 1px solid var(--line); }
.account-group h3 { font-weight: 400; }
.account-toggle { width: 100%; min-height: 68px; padding: 18px 8px; display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: var(--muted); }
.account-toggle strong { margin-left: 14px; font-family: var(--serif); font-size: 1.125rem; font-weight: 400; color: var(--ink); }
.account-toggle:focus-visible { outline-offset: -3px; }
.chevron { width: 8px; height: 8px; margin-right: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .4s ease; }
.account-toggle[aria-expanded=true] .chevron { transform: rotate(225deg) translate(-2px, -1px); }
.account-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1), visibility .45s; }
.account-panel.is-open { grid-template-rows: 1fr; visibility: visible; }
.account-panel-inner { min-height: 0; overflow: hidden; }
.account-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px; background: var(--paper); }
.account-row > div { flex: 1 1 9rem; min-width: 0; }
.account-row + .account-row { border-top: 1px solid var(--line); }
.account-row:last-child { margin-bottom: 16px; }
.account-holder { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; font-size: 0.9375rem; }
.account-holder > span { display: inline-block; min-width: 52px; font-size: 0.8125rem; color: var(--muted); }
/* A long bank name pushes the number onto its own line, flush left. */
.account-number { display: flex; flex-wrap: wrap; column-gap: 6px; margin-top: 4px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.account-number > span { overflow-wrap: anywhere; }
.copy-account { min-width: 72px; min-height: 44px; margin-left: auto; padding: 6px 12px; border: 1px solid transparent; border-radius: 999px; background: #eef1e8; color: var(--button-ink); font-size: 0.875rem; flex-shrink: 0; transition: background-color .18s ease, transform .18s ease; }

footer { padding-bottom: max(56px, calc(env(safe-area-inset-bottom) + 32px)); }
footer > img { aspect-ratio: 3 / 2; object-fit: cover; }
.closing { padding: 48px 24px 32px; }
.closing p { font-family: var(--serif); font-size: 1.125rem; line-height: 1.9; }
.closing > span { display: block; margin-top: 8px; font-family: var(--serif); font-size: 0.9375rem; color: var(--muted); }
.skip-link { position: fixed; top: 0; left: 12px; transform: translateY(-120%); padding: 14px; background: var(--paper); z-index: 10; }
.skip-link:focus { transform: translateY(0); }
button:active { background-color: #626e5b14; }
@media (hover: hover) and (pointer: fine) {
  .line-button:hover, .copy-account:hover { background-color: var(--button-hover); border-color: #aeb6a4; }
}
.line-button:active, .copy-account:active { background-color: var(--button-pressed); transform: translateY(1px); }
.line-button.is-copied, .copy-account.is-copied { background-color: #e5ebdf; color: #46573d; }

/* Photo viewer: the photo follows the finger; pulling it down fades the viewer away. */
dialog { --viewer-top: calc(76px + env(safe-area-inset-top)); --viewer-bottom: calc(112px + env(safe-area-inset-bottom)); --viewer-muted: #c3c8bc; border: 0; padding: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; background: transparent; color: var(--paper); overflow: hidden; overscroll-behavior: contain; }
dialog::backdrop { background: transparent; }
body:has(dialog[open]) { overflow: hidden; }
dialog button:focus-visible { outline-color: var(--paper); }
.viewer-shade { position: fixed; inset: 0; background: #232620; opacity: var(--shade, 1); }
.viewer-track { position: fixed; inset: 0; display: flex; transform: translateX(-100%); touch-action: none; }
.viewer-slide { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--viewer-top) max(12px, env(safe-area-inset-right)) var(--viewer-bottom) max(12px, env(safe-area-inset-left)); }
/* Bound the image itself: a grid's intrinsic minimum can otherwise push a portrait below the screen. */
.viewer-slide img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - var(--viewer-top) - var(--viewer-bottom)); min-width: 0; min-height: 0; object-fit: contain; border-radius: 2px; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.viewer-slide[data-state="loading"] img, .viewer-slide[data-state="error"] img { visibility: hidden; }
.viewer-slide:nth-child(2) img { transform: translateY(var(--lift, 0)) scale(var(--shrink, 1)); }
.viewer-feedback { position: fixed; inset: var(--viewer-top) 20px var(--viewer-bottom); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; pointer-events: none; text-align: center; font-size: 0.875rem; }
.viewer-feedback button { pointer-events: auto; background-color: var(--paper); }
.gallery-toolbar { position: fixed; top: 0; left: 0; right: 0; height: var(--viewer-top); padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left)); display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 0.875rem; opacity: var(--shade, 1); }
.gallery-heading { display: flex; align-items: center; gap: 12px; line-height: 1.4; }
#photo-count { border-left: 1px solid #51574b; padding-left: 12px; color: var(--viewer-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-control { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #fcfbf829; border-radius: 50%; background: #fcfbf808; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.viewer-control svg { width: 20px; height: 20px; }
.viewer-control:active { background: #fcfbf81f; transform: scale(.94); }
.viewer-step { position: fixed; top: calc((100% + var(--viewer-top) - var(--viewer-bottom)) / 2); width: 48px; height: 48px; margin-top: -24px; display: none; opacity: var(--shade, 1); }
#previous-photo { left: max(24px, env(safe-area-inset-left)); }
#next-photo { right: max(24px, env(safe-area-inset-right)); }
@media (hover: hover) and (pointer: fine) {
  .viewer-control:hover { background: #fcfbf814; border-color: #fcfbf84d; }
  .thumbnails button:hover img { opacity: 1; }
}
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .viewer-step { display: grid; }
  .viewer-slide { padding-left: max(88px, env(safe-area-inset-left)); padding-right: max(88px, env(safe-area-inset-right)); }
}
.thumbnails { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: 720px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 12px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); align-items: center; height: var(--viewer-bottom); scrollbar-width: none; opacity: var(--shade, 1); overscroll-behavior-x: contain; }
.thumbnails::-webkit-scrollbar { display: none; }
.thumbnails button { flex: 0 0 50px; height: 72px; padding: 3px; border: 1px solid transparent; border-radius: 8px; transition: border-color .18s ease, background-color .18s ease; }
.thumbnails img { height: 100%; object-fit: cover; border-radius: 4px; opacity: .6; transition: opacity .18s ease; }
.thumbnails button[aria-current=true] img, .thumbnails button:focus-visible img { opacity: 1; }
.thumbnails button[aria-current=true] { border-color: var(--paper); background: #fcfbf80a; }
.thumbnails button:focus-visible { outline-width: 2px; outline-offset: 3px; }
@media (max-height: 500px) {
  dialog { --viewer-top: calc(64px + env(safe-area-inset-top)); --viewer-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .gallery-toolbar { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; }
  .thumbnails { padding-top: 12px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .thumbnails button { flex-basis: 44px; height: 56px; }
}
.toast { position: fixed; bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 13px 20px; font-size: 0.875rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 20; width: max-content; max-width: 90vw; border-radius: 8px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 600px) {
  body { padding: 30px 0; }
  main { box-shadow: 0 8px 55px #3438310a; }
  .music-toggle { top: 46px; }
  .section-pad { padding-left: 40px; padding-right: 40px; }
  .photographs { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 350px) {
  .cover-heading { padding-top: 48px; }
  h1 { font-size: 1.625rem; gap: 12px; }
  .section-pad { padding-left: 22px; padding-right: 22px; }
  .photographs { padding-left: 14px; padding-right: 14px; }
  .invitation-message { font-size: 1rem; }
  .parents { font-size: 0.875rem; }
  .parents span { font-size: 0.8125rem; }
  .account-row { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .account-holder > span { min-width: 46px; }
  .account-number { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .music-bars i { animation: none; transform: scaleY(.7); }
}