@font-face {
	font-family: "Invitation Serif";
	src: url("fonts/invitation-serif.woff") format("woff");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}
:root {
	--blue: #1674ad;
	--deep-blue: #164d86;
	--ink: #263f50;
	--muted: #5b7581;
	--green: #d0e6a1;
	--paper: #f6faf9;
	--page-width: 560px;
	--serif: "Invitation Serif", "Noto Serif KR", "Batang", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 66px; }
body { margin: 0; background: #e1e9e9; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid #e2b449; outline-offset: 5px; }
button:disabled { cursor: wait; opacity: .65; }
img { display: block; max-width: 100%; }
svg { display: block; }
p, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
.invitation-page { width: 100%; max-width: var(--page-width); margin: 0 auto; background: var(--paper); box-shadow: 0 0 80px #163d4c13; overflow: clip; }
.skip-link { position: fixed; top: -90px; left: 12px; z-index: 200; padding: 12px 20px; background: #fff; }
.skip-link:focus { top: 10px; }
.reading-progress { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 80; width: min(100%, var(--page-width)); height: 3px; pointer-events: none; }
.reading-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #d7eba3; }
.hero { position: relative; min-height: 800px; min-height: max(800px, 100svh); max-height: 1080px; padding: 34px 38px 32px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; color: #fff; background: #3599bd; }
.hero-art { position: absolute; inset: 0; background: url("../images/poster-background.svg") center / 100% 100% no-repeat; z-index: -3; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, #104d6320, transparent 80%); z-index: -2; }
.anniversary { position: absolute; top: 132px; right: 76px; width: 117px; height: auto; opacity: .35; mix-blend-mode: soft-light; z-index: -1; }
.vertical-lettering { position: absolute; right: 22px; top: 125px; width: 112px; height: auto; opacity: .72; mix-blend-mode: normal; z-index: -1; }
.hero-main { padding: 178px 0 44px; }
.hero-eyebrow { font-size: 11px; letter-spacing: .28em; margin-bottom: 9px; }
.hero-invite { font-family: var(--serif); font-weight: 600; font-size: 23px; letter-spacing: .12em; margin-bottom: 33px; }
.hero-title { font-family: var(--serif); font-size: clamp(33px, 8.5vw, 48px); font-weight: 600; line-height: 1.45; letter-spacing: -.065em; text-shadow: 0 2px 15px #125e7433; }
.hero-title > span { display: block; }
.hero-title .edition { font-size: .62em; letter-spacing: -.035em; margin-bottom: 5px; }
.hero-rule { display: block; height: 2px; width: 38px; background: #ffffffe6; margin: 36px 0 24px; }
.hero-year { font-size: 23px; line-height: 1.3; letter-spacing: -.02em; }
.hero-date { font-size: 43px; font-weight: 700; line-height: 1.25; letter-spacing: -.04em; }
.hero-date span { font-size: 16px; font-weight: 400; letter-spacing: 0; margin-left: 10px; }
.hero-time { font-size: 14px; letter-spacing: .04em; margin-top: 7px; }
.hero-venue { font-size: 17px; margin-top: 13px; font-weight: 500; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px; font-size: 16px; font-weight: 500; letter-spacing: .045em; position: relative; }
.scroll-arrow { font-size: 31px; line-height: 1; animation: scrollDown 2.4s ease-in-out infinite; }
@keyframes scrollDown { 0%, 100% { transform: translateY(-3px); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }
.section-nav { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: #f7faf9f5; border-bottom: 1px solid #dce8e6; backdrop-filter: blur(14px); }
.section-nav a { font-size: 13px; text-align: center; padding: 17px 5px; color: #526975; transition: color .25s, background .25s; }
.section-nav a[aria-current="location"] { color: #0d689e; background: #edf4f4; font-weight: 700; }
.section { position: relative; padding: 88px 35px 92px; isolation: isolate; }
.section-heading { text-align: center; margin-bottom: 48px; }
.section-en { color: #3883a3; font-size: 10px; letter-spacing: .26em; margin-bottom: 13px; }
.section-heading h2 { font-family: var(--serif); font-weight: 600; font-size: 29px; letter-spacing: .04em; }
.heading-line { display: block; width: 24px; height: 1px; margin: 23px auto 0; background: #4e9baf; }
.letter { background: radial-gradient(ellipse at 100% 0, #d8e9e080, transparent 55%), #f6faf9; }
.letter::before { content: ""; position: absolute; width: 230px; height: 300px; top: 0; right: 0; background: radial-gradient(ellipse at top right, #b8daba35, transparent 70%); z-index: -1; pointer-events: none; }
.letter-copy { font-size: 15px; line-height: 2.05; letter-spacing: -.045em; text-align: center; }
.letter-copy p + p { margin-top: 28px; }
.letter-copy strong { color: #176f9c; font-weight: 700; }
.letter-closing { color: #17739b; font-weight: 500; }
.signature { margin-top: 39px; text-align: center; font-size: 14px; }
.signature strong { display: inline-block; margin-left: 9px; font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .19em; }
.event-summary { padding: 25px 0 0; border-top: 1px solid #cbdddf; margin: 43px 0 0; font-size: 14px; }
.event-summary > div { display: grid; grid-template-columns: 47px 1fr; gap: 9px; }
.event-summary > div + div { margin-top: 13px; }
.event-summary dt { color: #348799; letter-spacing: .22em; }
.event-summary dd { margin: 0; }
.event-summary dd span { color: #59727c; font-size: 13px; }
.program { color: #fff; padding-top: 155px; padding-bottom: 155px; background: #25679c; overflow: hidden; }
/* 배경 SVG 내부의 사각 경계를 없애고 위·아래 섹션 색으로 자연스럽게 연결합니다. */
.program-art { position: absolute; inset: 0; z-index: -2; background: linear-gradient(to bottom, #f6faf9, transparent 130px, transparent calc(100% - 130px), #f3f8f6), radial-gradient(ellipse at 12% 25%, #519a9980, transparent 65%), linear-gradient(155deg, #266c91, #225784); }
.program .section-en { color: #c6e2d3; }
.program .heading-line { background: #b8dca6; }
.program .section-heading { margin-bottom: 31px; }
.program-date { font-size: 15px; padding-bottom: 18px; border-bottom: 1px solid #ffffff4a; letter-spacing: .055em; }
.program-date span { float: right; font-size: 9px; letter-spacing: .15em; margin-top: 5px; color: #cee3e8; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline-item { display: grid; grid-template-columns: 106px 1fr; column-gap: 15px; padding: 29px 0; border-bottom: 1px solid #ffffff2a; }
.timeline-item:last-child { border-bottom: 0; padding-bottom: 0; }
.program-index { display: block; color: #c1e09e; font-size: 11px; letter-spacing: .15em; margin-bottom: 10px; }
.program-time { font-size: 12px; color: #dcebed; white-space: nowrap; }
.timeline-content { padding-top: 23px; }
.timeline-content h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 12px; }
.timeline-content ul { margin: 0; padding: 0; list-style: none; font-size: 13px; color: #f0f7fa; line-height: 1.9; letter-spacing: -.04em; }
.timeline-content li { position: relative; padding-left: 10px; }
.timeline-content li::before { content: ""; position: absolute; width: 3px; height: 3px; left: 0; top: 11px; border-radius: 50%; background: #d2e7ed; }
.break-time .timeline-content h3 { font-size: 17px; color: #d4e8e3; }
.location { padding-left: 28px; padding-right: 28px; padding-bottom: 65px; background: linear-gradient(#f5f9f9,#eef6f5); }
.location .section-heading { margin-bottom: 39px; }
.venue-en { text-align: center; font-size: 8px; letter-spacing: .1em; color: #648390; }
.venue-name { text-align: center; margin: 9px 0 25px; font-size: 22px; letter-spacing: -.03em; font-weight: 600; }
.map-frame { position: relative; height: 280px; background: #e3eeee; border: 1px solid #cedcdb; overflow: hidden; }
.kakaomap { position: absolute; inset: 0; }
.map-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 13px; padding: 24px; background: #e6efed; text-align: center; color: #356d7e; }
.map-fallback p { font-size: 13px; }
.map-fallback a { padding: 8px 13px; border-bottom: 1px solid #7caaae; font-size: 13px; }
.map-enable { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 9px 15px; background: #fff; border: 1px solid #bad0d2; border-radius: 30px; color: #2f6272; box-shadow: 0 2px 10px #25465016; font-size: 12px; white-space: nowrap; }
.address-block { padding-top: 27px; text-align: center; }
.address-label { color: #759498; font-size: 9px; letter-spacing: .21em; margin-bottom: 9px; }
address { font-style: normal; font-size: 15px; letter-spacing: -.04em; }
.text-button { border: 0; padding: 10px 8px; background: transparent; color: #527d89; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.text-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.map-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.button { min-height: 49px; padding: 13px 15px; border: 1px solid transparent; display: flex; justify-content: center; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; text-align: center; border-radius: 3px; }
.button-kakao { color: #453b15; background: #f4e292; }
.button-naver { color: #206e4d; background: #deede3; }
.button-kakao span, .button-naver span { font-weight: 400; font-size: 17px; margin-left: 5px; }
.directions-link { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; padding: 13px 17px; background: #fff9; border: 1px solid #d5e2e1; font-size: 13px; color: #426979; border-radius: 3px; }
.share-area { margin-top: 49px; text-align: center; }
.share-line { display: block; margin: 0 auto 28px; width: 30px; height: 1px; background: #bacfd0; }
.share-area p { color: #6b8892; font-size: 13px; margin-bottom: 20px; }
.button-share { width: 100%; background: #267aac; color: #fff; }
.button-share svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.copy-link { margin-top: 6px; }
.footer { text-align: center; padding: 105px 27px 96px; background: linear-gradient(to bottom, #eef6f5, transparent 100px), linear-gradient(145deg, #3b89a6, #276b9c); }
.footer img { width: 100%; height: auto; max-width: 401px; margin: 0 auto; }
.footer p { margin: 23px 0 8px; color: #ecf5f9; font-size: 10px; letter-spacing: .03em; }
.footer a { color: #f1faff; display: inline-block; font-size: 11px; padding: 10px 15px; }
.music-toggle { position: fixed; z-index: 50; right: max(17px, calc((100vw - 560px) / 2 + 17px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 11px 15px; border-radius: 28px; border: 1px solid #ffffff70; color: #fff; background: #125981ed; box-shadow: 0 5px 24px #13384930; backdrop-filter: blur(8px); }
.music-toggle > span:last-child { font-size: 11px; font-weight: 500; }
.equalizer { display: flex; align-items: center; justify-content: center; gap: 3px; width: 21px; height: 20px; }
.equalizer i { display: block; width: 2px; height: 5px; background: #d4ebae; border-radius: 2px; }
.music-toggle[aria-pressed="true"] .equalizer i { height: 16px; animation: equalize 1.05s ease-in-out infinite alternate; }
.music-toggle[aria-pressed="true"] .equalizer i:nth-child(2) { animation-delay: -.75s; }
.music-toggle[aria-pressed="true"] .equalizer i:nth-child(3) { animation-delay: -.3s; }
.music-toggle[aria-pressed="true"] .equalizer i:nth-child(4) { animation-delay: -.55s; }
@keyframes equalize { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
dialog { padding: 0; border: 0; color: var(--ink); }
dialog::backdrop { background: #0d36467a; backdrop-filter: blur(6px); }
.welcome-dialog { width: min(calc(100% - 54px), 344px); max-height: calc(100dvh - 48px); background: #f9fbf8; border-radius: 5px; box-shadow: 0 24px 80px #13333e40; }
.welcome-inner { position: relative; padding: 34px 24px 25px; text-align: center; overflow: hidden; }
.welcome-inner::before { content: ""; position: absolute; top: 0; right: 0; border-left: 62px solid transparent; border-top: 69px solid #d5e8d2; pointer-events: none; }
.welcome-eyebrow { color: #548894; font-size: 9px; letter-spacing: .26em; }
.gesture-icon { width: 48px; height: 58px; color: #388ba3; margin: 16px auto 13px; }
.welcome-dialog h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin-bottom: 20px; }
#welcomeDescription { font-size: 14px; line-height: 1.95; letter-spacing: -.045em; }
.welcome-sound { color: #78908f; font-size: 11px; margin: 17px 0 22px; }
.button-confirm { width: 100%; background: #247fa7; color: #fff; border: 0; }
.copy-dialog { width: min(calc(100% - 48px), 360px); padding: 25px; border-radius: 5px; }
.copy-dialog h2 { font-size: 18px; }
.copy-dialog p { font-size: 13px; margin: 12px 0; }
.copy-dialog textarea { width: 100%; padding: 10px; color: #2f5267; border: 1px solid #b5cccc; background: #f1f8f6; margin-bottom: 18px; font-size: 16px; resize: none; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); opacity: 0; visibility: hidden; transition: .25s ease; width: max-content; max-width: calc(100% - 42px); padding: 12px 20px; background: #1e3d49f5; color: #fff; border-radius: 4px; font-size: 13px; text-align: center; pointer-events: none; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.noscript-note { max-width: 560px; margin: 0 auto; padding: 20px; background: #fff; font-size: 14px; }
.motion-ready .reveal { opacity: 0; transform: translateY(23px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.motion-ready .intro-motion { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.invitation-open .intro-motion { opacity: 1; transform: none; }
.hero-invite { transition-delay: .1s !important; }
.hero-title .edition { transition-delay: .2s !important; }
.hero-title > span:nth-child(2) { transition-delay: .3s !important; }
.hero-title > span:nth-child(3) { transition-delay: .4s !important; }
.hero-rule { transition-delay: .5s !important; }
.hero-details { transition-delay: .6s !important; }
@media (min-width: 561px) {
	body { background: radial-gradient(ellipse at 20% 5%, #c9ded6, transparent 60%), linear-gradient(140deg, #e3eeec, #d5e2eb); background-attachment: fixed; }
	.hero { min-height: 900px; }
	.hero-main { padding-top: 196px; }
	.hero-title { font-size: 52px; }
	.letter-copy { font-size: 16px; }
	.section { padding-left: 48px; padding-right: 48px; }
	.timeline { padding-left: 4px; padding-right: 4px; }
	.timeline-item { grid-template-columns: 130px 1fr; }
	.timeline-content ul { font-size: 14px; }
}
@media (max-width: 374px) {
	.hero { padding-left: 26px; padding-right: 26px; min-height: 750px; }
	.hero-main { padding-top: 150px; }
	.hero-title { font-size: 31px; }
	.section { padding-left: 22px; padding-right: 22px; }
	.letter-copy { font-size: 13px; line-height: 2.15; }
	.timeline-item { grid-template-columns: 94px 1fr; column-gap: 10px; }
	.program-time { font-size: 11px; }
	.timeline-content ul { font-size: 12px; }
	.venue-name { font-size: 20px; }
	address { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.motion-ready .reveal, .motion-ready .intro-motion { opacity: 1; transform: none; }
}