@import url("base.css");
@font-face { font-family: "JejuMyeongjo"; src: url("assets/JejuMyeongjo.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Allison"; src: url("assets/Allison-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --paper: #dee3ed; --ink: #525252; --muted: #596374; --sage: #141c2f; --accent: #141c2f; --line: #bfc8d7; --serif: "JejuMyeongjo", "Batang", serif; }
body { background: #e9edf3; word-break: keep-all; }
.invitation { max-width: 420px; }
.hero { overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; inset-inline: 0; pointer-events: none; }
.hero::before { top: 0; height: 250px; background: linear-gradient(#080d1e99, transparent); }
.hero::after { bottom: 0; height: 200px; background: linear-gradient(transparent, #080d1eaa); }
.hero-photo { height: auto; object-fit: contain; }
.hero-names { display: block; top: 50px; color: #fff; font-size: 20px; line-height: 1; z-index: 1; }
.hero-names > span { display: block; }
.hero-names .name-divider { width: 16px; height: 1px; margin: 20px auto; background: #fff; }
.hero-event { position: absolute; z-index: 1; bottom: 40px; inset-inline: 14px; color: #fff; font-size: 15px; line-height: 25px; }
.hero-event p { margin: 0; }
.greeting { padding-top: 65px; }
.greeting-text { line-height: 35px; }
.script-heading { font: 400 34px/1.2 "Allison", cursive; color: var(--accent); letter-spacing: 0; }
.families { font-size: 14px; }
.family-child { display: block; }
.families strong { font-size: 16px; }
.section { padding-inline: 28px; }
.gallery-section { padding-inline: 10px; background: var(--paper); }
.photo-link { aspect-ratio: 2 / 3; }
.calendar-section { border: 0; }
.wedding-day time { border-radius: 10px; }
.gallery-arrow { border-color: #7a879e; }
.hint { color: var(--muted); }
.access h2, .accounts-section h2, .attendance-section h2 { font-size: 20px; letter-spacing: 0; }
.venue-card { border: 0; padding: 0; }
.venue-card .venue-address, .action, .directions [lang=ko], .taxi-address { font-family: var(--serif); }
.venue-card .secondary { margin-top: 10px; }
.action { border-radius: 24px; }
.taxi-address, .closing { background: #d5ddea; }
.music-toggle { right: max(16px, calc((100vw - 420px) / 2 + 16px)); }
.attendance-copy { font-size: 14px; line-height: 2; margin-bottom: 25px; }
.accounts-section details { border: 1px solid #a5b2c9; border-radius: 18px; margin-top: 16px; padding: 15px; }
.accounts-section summary { cursor: pointer; padding: 4px; }
.account-row { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.account-row p { overflow-wrap: anywhere; font-size: 14px; }
.account-row button { margin-top: 10px; min-height: 44px; }
.rsvp-dialog { width: calc(100% - 24px); max-width: 420px; max-height: calc(100dvh - 24px); overflow: auto; margin: auto; border: 0; border-radius: 4px; padding: 26px 18px; background: #fff; color: #525252; font: 13px/1.7 var(--serif); text-align: left; }
.rsvp-dialog::backdrop { background: #10182bbb; }
.rsvp-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; background: transparent; border: 0; font: 28px/1 system-ui; color: var(--accent); }
.rsvp-dialog h2 { margin-bottom: 0; font-size: 18px; letter-spacing: 0; }
.rsvp-intro { color: #68758a; font-size: 12px; margin-bottom: 20px; }
.rsvp-dialog fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-row { display: flex; gap: 8px; }
.choice-row label { flex: 1; cursor: pointer; position: relative; }
.choice-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-row span { display: block; border: 1px solid #d1d7e0; padding: 8px 6px; text-align: center; border-radius: 3px; background: #f8f9fb; }
.choice-row input:checked + span { border-color: #141c2f; background: #141c2f; color: white; }
.choice-row input:focus-visible + span { outline: 3px solid #52719b; outline-offset: 2px; }
.side-choice { margin-bottom: 18px !important; padding-bottom: 14px !important; border-bottom: 1px dashed #cbd2de !important; }
.form-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px !important; }
.form-row legend { float: left; width: 82px; padding: 0; }
.form-row > span, .form-row legend { text-align: center; }
.form-row input[type=text], .form-row input[type=tel], .form-row input[type=number] { width: 100%; min-height: 44px; border: 1px solid #dde2e9; background: #f6f7f9; border-radius: 3px; padding: 8px; color: #313b4d; font: 15px/1.5 system-ui; }
.party-input { display: flex; align-items: center; gap: 8px; }
.party-input input { max-width: 90px; }
.consent { display: flex; gap: 9px; margin-top: 24px; color: #596374; font-size: 11px; line-height: 1.8; }
.consent input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
#turnstile-widget { margin-top: 15px; }
.rsvp-status { min-height: 20px; font: 12px/1.7 system-ui; color: #964040; margin-top: 12px; }
.rsvp-status.success { color: #246235; }
.rsvp-dialog .primary { border-radius: 3px; margin-top: 12px; }
.rsvp-dialog button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 359px) { .section { padding-inline: 20px; } .gallery-section { padding-inline: 8px; } .hero-names { font-size: 20px; } .hero-event { font-size: 13px; line-height: 23px; bottom: 30px; } .greeting-text { font-size: 14px; } .form-row { grid-template-columns: 72px minmax(0,1fr); gap: 6px; } .form-row legend { width: 72px; } }