:root{--paper:#f6f1e7;--paper-hi:#fffdf8;--ink:#3b3a36;--ink-soft:#7a756b;--road:#b8a383;--road-faint:#ddd1bb;--leaf:#7a8b6f;--serif:"Gowun Batang", "Nanum Myeongjo", serif;--sans:"Gowun Dodum", -apple-system, "Apple SD Gothic Neo", sans-serif;--ease:cubic-bezier(.2, .7, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;background:#e7dfcf}#root{background:var(--paper);max-width:430px;min-height:100svh;margin:0 auto;overflow-x:clip;box-shadow:0 0 48px #3c280a1a}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0}img{max-width:100%;height:auto;display:block}p,.milestone__title{word-break:keep-all;overflow-wrap:break-word}.reveal{opacity:0;transition:opacity 1.1s ease, transform 1.1s var(--ease);transform:translateY(18px)}.reveal.is-in{opacity:1;transform:none}.intro{--env-w:min(76vw, 310px);--env-h:calc(var(--env-w) / 1.45);min-height:100svh;padding:32px 24px calc(40px + env(safe-area-inset-bottom));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:relative}.intro__eyebrow{font-family:var(--sans);letter-spacing:.28em;color:var(--ink-soft);font-size:12px}.intro__title{margin-bottom:calc(var(--env-h) * .56 + 4px);font-size:clamp(20px,6.2vw,24px);font-weight:700}.intro__hint{font-family:var(--sans);color:var(--ink-soft);margin-top:24px;font-size:13px;line-height:1.6;transition:opacity .4s}.intro.is-open .intro__hint{opacity:0}.intro{transition:opacity .38s,transform .38s}.intro.is-leaving{opacity:0;transform:translateY(-24px)}.envelope{width:var(--env-w);height:var(--env-h);perspective:900px;flex-shrink:0;animation:5s ease-in-out infinite float;position:relative}.envelope:disabled{cursor:default}.intro.is-open .envelope{animation:none}.envelope>span{position:absolute}.envelope__back{z-index:0;background:#e6d9c1;border-radius:6px;inset:0;box-shadow:0 22px 40px -20px #46321473}.envelope__paper{z-index:1;background:var(--paper-hi) repeating-linear-gradient(to bottom, transparent 0 13px, #96826424 13px 14px);transition:transform .9s var(--ease) .45s;border-radius:3px;inset:7% 7% 8%}.envelope__front{z-index:2;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);background:#eee3ce;border-radius:6px;justify-content:center;align-items:flex-end;padding-bottom:13%;display:flex;inset:0}.envelope__to{color:var(--ink);font-size:clamp(13px,4.2vw,16px)}.envelope__flap{z-index:3;clip-path:polygon(0 0,100% 0,50% 56%);transform-origin:top;background:#e2d3b8;border-radius:6px 6px 0 0;height:100%;transition:transform .7s,z-index 0s linear .35s;inset:0 0 auto}.envelope__seal{z-index:4;background:var(--leaf);border-radius:50%;width:28px;height:28px;transition:opacity .3s;top:calc(56% - 20px);left:calc(50% - 14px);box-shadow:inset 0 0 0 3px #ffffff40,0 2px 4px #00000026}.intro.is-open .envelope__seal{opacity:0}.intro.is-open .envelope__flap{z-index:0;transform:rotateX(180deg)}.intro.is-open .envelope__paper{transform:translateY(-34%)}.letter .paper{transform-origin:top;animation:unfold .8s var(--ease) both}.unfold-in{animation:.7s both rise}.scroll-hint{font-family:var(--sans);color:var(--ink-soft);flex-direction:column;align-items:center;gap:6px;padding:8px 24px 24px;font-size:13px;animation:.6s 1.6s both rise;display:flex}.scroll-hint__arrow{animation:2.4s ease-in-out infinite bob}.letter{padding:calc(28px + env(safe-area-inset-top)) clamp(12px, 4vw, 16px) 32px;scroll-margin-top:16px}.paper{background:var(--paper-hi) repeating-linear-gradient(to bottom, transparent 0 33px, #96826421 33px 34px);background-position:0 36px;border-radius:4px;padding:44px clamp(18px,6.5vw,26px) 40px;box-shadow:0 1px #00000008,0 24px 44px -26px #46321459}.paper__to{margin-bottom:34px;font-size:18px;font-weight:700;line-height:34px}.paper__p{white-space:pre-line;margin-bottom:34px;font-size:16px;line-height:34px}.paper__sign{flex-direction:column;align-items:flex-end;font-size:16px;line-height:34px;display:flex}.paper__date{font-family:var(--sans);color:var(--ink-soft);font-size:13px}.bridge{text-align:center;padding:32px 24px 0}.bridge p{font-size:clamp(15px,4.6vw,17px);line-height:1.9}.bridge__line{border-left:3px dotted var(--road);width:0;height:64px;margin:32px auto 0;display:block}.road{padding:8px 0 88px;position:relative}.road__svg{pointer-events:none;position:absolute;inset:0;overflow:visible}.road__base,.road__drawn,.road__mask{fill:none;stroke-linecap:round}.road__base{stroke:var(--road-faint);stroke-width:3px;stroke-dasharray:.1 10}.road__drawn{stroke:var(--road);stroke-width:4.5px;stroke-dasharray:.1 10}.road__mask{stroke:#fff;stroke-width:16px}.road__walker{fill:var(--leaf);stroke:var(--paper);stroke-width:3px;opacity:0;transition:opacity .3s}.road__item{z-index:1;position:relative}.road__item--milestone{justify-content:center;padding:56px 0 40px;display:flex}.road__item--photo{padding:34px 0}.milestone{text-align:center;background:var(--paper);border:1px solid var(--road);border-radius:14px;min-width:168px;padding:14px 24px 16px}.milestone__no{font-family:var(--sans);letter-spacing:.22em;color:var(--leaf);font-size:11px;display:block}.milestone__title{margin-top:6px;font-size:21px;display:block}.milestone__sub{font-family:var(--sans);color:var(--ink-soft);margin-top:4px;font-size:12px;display:block}.photo{opacity:0;width:64%;transition:opacity 1s ease, transform 1.1s var(--ease);transform:translateY(32px)rotate(0)}.photo--left{margin-left:6%}.photo--right{margin-left:30%}.photo.is-in{opacity:1;transform:rotate(var(--tilt))}.photo__frame{background:#fff;border-radius:2px;padding:8px 8px 0;box-shadow:0 2px 4px #0000000d,0 16px 30px -16px #3c280a80}.photo__img{background:var(--paper);width:100%;display:block}.photo__img img{object-fit:cover;width:100%}.photo__ph{aspect-ratio:4/5;font-family:var(--sans);letter-spacing:.2em;color:var(--ink-soft);background:repeating-linear-gradient(45deg,#efe7d8 0 10px,#f4eee2 10px 20px);justify-content:center;align-items:center;font-size:12px;display:flex}.photo__cap{padding:10px 4px 14px}.photo__cap time{font-family:var(--sans);letter-spacing:.06em;color:var(--ink-soft);font-size:11px;display:block}.photo__cap span{word-break:keep-all;margin-top:4px;font-size:14px;line-height:1.6;display:block}.arrival{text-align:center;background:radial-gradient(80% 60% at 50% 45%,#fffdf8e6,#0000 70%);padding:0 clamp(16px,7vw,28px) 96px;position:relative}.arrival__mark{background:var(--leaf);border-radius:50%;width:18px;height:18px;margin:0 auto 16px;display:block;box-shadow:0 0 0 8px #7a8b6f29,0 0 0 20px #7a8b6f12}.arrival__label{font-family:var(--sans);letter-spacing:.3em;color:var(--leaf);margin:20px 0 48px;font-size:11px}.arrival__intro{color:var(--ink-soft);margin-bottom:32px;font-size:15px}.arrival__verse p{font-size:clamp(15px,5.2vw,20px);line-height:2.1}.arrival__ref{font-style:normal;font-family:var(--sans);letter-spacing:.14em;color:var(--ink-soft);margin-top:32px;font-size:13px;display:block}.ending{padding:48px 0 calc(64px + env(safe-area-inset-bottom));text-align:center;border-top:1px dashed var(--road-faint);margin:0 24px}.ending__msg{white-space:pre-line;font-size:16px;line-height:1.9}.ending__sign{font-family:var(--sans);color:var(--ink-soft);margin-top:20px;font-size:12px}.ending__top{font-family:var(--sans);color:var(--ink-soft);border:1px solid var(--road-faint);border-radius:999px;margin-top:40px;padding:9px 16px;font-size:12px}.ending__credit{font-family:var(--sans);letter-spacing:.08em;color:var(--ink-soft);opacity:.7;margin-top:48px;font-size:10px}.ending__credit a{color:inherit;text-underline-offset:2px;text-decoration:underline}.lightbox{z-index:50;padding:calc(64px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));touch-action:none;background:#1c1a16f2;flex-direction:column;justify-content:center;align-items:center;animation:.25s fade;display:flex;position:fixed;inset:0}.lightbox__img{max-width:100%;max-height:calc(100vh - 200px);max-height:calc(100svh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain;border-radius:2px;animation:.3s fade}.lightbox__ph{aspect-ratio:4/5;color:#a39d90;width:min(80vw,340px,80svh - 160px);font-family:var(--sans);letter-spacing:.2em;background:#3a3731;justify-content:center;align-items:center;font-size:12px;display:flex}.lightbox__bar{grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;width:100%;max-width:400px;margin-top:16px;display:grid}.lightbox__meta{text-align:center;color:#ede6d8;min-width:0}.lightbox__meta time{font-family:var(--sans);opacity:.65;font-size:12px}.lightbox__meta p{margin-top:6px;font-size:15px;line-height:1.6}.lightbox__count{top:calc(26px + env(safe-area-inset-top));left:max(20px, env(safe-area-inset-left));font-family:var(--sans);color:#fff9;font-size:12px;position:absolute}.lightbox__close{top:calc(12px + env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));color:#fff;width:44px;height:44px;font-size:20px;position:absolute}.lightbox__nav{color:#ffffffb3;width:44px;height:44px;font-size:28px;line-height:1}.lightbox__nav:disabled{opacity:.15;cursor:default}.bgm{z-index:40;top:calc(12px + env(safe-area-inset-top));width:40px;height:40px;color:var(--ink-soft);-webkit-backdrop-filter:blur(6px);opacity:.6;background:#fffdf8d9;border-radius:50%;font-size:15px;position:fixed;right:max(12px,50vw - 203px);box-shadow:0 4px 12px #3c280a1f}.bgm.is-on{color:var(--leaf);opacity:1}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes unfold{0%{opacity:0;transform:translateY(40px)scaleY(.35)}}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}@keyframes fade{0%{opacity:0}}@media (height<=520px){.intro{--env-w:min(76vw, 310px, 40svh);padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));gap:8px}.intro__hint{margin-top:12px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.photo{opacity:1!important;transition:none!important;transform:none!important}.envelope,.scroll-hint__arrow,.letter .paper,.unfold-in{animation:none}}