@font-face{font-family:Pretendard;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/PretendardVariable.woff2?v=1.3.9') format('woff2')}
/* Shared UI typography; title artwork remains an image. */
html body,html body :is(button,input,select,textarea,dialog,h1,h2,h3,h4,p,a,span,label,legend,summary,small,b,strong,figcaption){font-family:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif!important}
/* Dismiss controls float above content without a separate header strip. */
body dialog .dialog-chrome{position:absolute;inset:0 0 auto;height:0;min-height:0;padding:0!important;border:0;background:none;box-shadow:none;pointer-events:none;overflow:visible}
body dialog .dialog-chrome>:not(button){display:none}
body dialog .dialog-chrome :is(.close,.album-close,.venue-map-close,[data-onboard-skip]){position:absolute;top:12px;right:12px;width:40px;height:40px;pointer-events:auto;margin:0!important}
body dialog .dialog-scroll{max-height:calc(var(--visible-height,100dvh) * .86);padding:56px 20px 24px}
/* A full-viewport map canvas with floating close and zoom controls. */
body dialog.venue-map-dialog[data-glass-ready]{position:fixed;inset:0;width:100%;max-width:none;height:var(--visible-height,100dvh);max-height:none;margin:0;border:0;border-radius:0;padding:0!important;background:#faf8f2;color:#403c36;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;scrollbar-gutter:auto}
body .venue-map-dialog .dialog-scroll{position:relative;flex:1;width:100%;height:100%;max-height:none;padding:0;overflow:hidden;scrollbar-gutter:auto}
body .venue-map-dialog .venue-map-scroll{position:absolute;inset:0;max-height:none;border:0;border-radius:0;padding:0;overflow:auto;display:grid;align-items:center;overscroll-behavior:contain}
body .venue-map-dialog .venue-map-scroll img{width:100%;align-self:center}
body .venue-map-dialog .venue-map-controls{position:absolute;z-index:2;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;padding:5px 8px;gap:8px;background:#ffffffe8;border:1px solid #ddd6c7;border-radius:24px;box-shadow:0 3px 20px #0001;backdrop-filter:blur(16px)}
body .venue-map-dialog .venue-map-controls button{border:0;background:transparent;border-radius:50%}
body .venue-map-dialog .dialog-chrome .venue-map-close{top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));width:44px;height:44px;background:#ffffffe8;color:#403c36;border:1px solid #ddd6c7;box-shadow:0 2px 12px #0001}
@font-face{font-family:'Gowun Batang';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/GowunBatang-Regular.woff2') format('woff2')}
@font-face{font-family:'Gowun Batang';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/GowunBatang-Bold.woff2') format('woff2')}
/* Narrative text has its own voice; controls retain the UI face. */
html body :is(.letter,.panel-letter,.our-story,.wedding-story) :is(h2,h3,p,p span,p strong,p small,time),html body :is(.letter,.panel-letter,.our-story,.wedding-story){font-family:'Gowun Batang',serif!important}
/* The screen stays at its original viewport position; the entire hall moves together. */
#stage{top:calc(180px * var(--scene-scale))}
#stage .world-title{top:calc(60px / var(--scene-scale) - 180px)}
#stage::before{content:'';position:absolute;left:0;right:0;top:-180px;height:240px;background:linear-gradient(#17141e,#17141e 75%,transparent);pointer-events:none;z-index:-1}
/* Dock icons travel into the center while their labels fade out. Geometry stays stable. */
#game .bottom-navigation .dock>button{position:relative}
#game .bottom-navigation .dock>button>.ui-icon{position:absolute;top:9px;left:calc(50% - 10.5px);transition:top 240ms cubic-bezier(.2,.8,.2,1)}
#game .bottom-navigation .dock>button>.menu-label{position:absolute;bottom:7px;left:0;right:0;opacity:1;transform:translateY(0);transition:opacity 180ms ease,transform 240ms cubic-bezier(.2,.8,.2,1)}
#game .bottom-navigation .dock.is-compact>button>.ui-icon{top:calc(50% - 10.5px)}
#game .bottom-navigation .dock.is-compact>button>.menu-label{opacity:0;transform:translateY(6px);pointer-events:none}
#game .bottom-navigation .floating-actions{position:absolute;top:auto;bottom:calc(100% + 10px);right:0;left:auto;width:auto;max-width:none;display:flex;flex-direction:row}
#game .bottom-navigation .floating-actions .write-action{flex-direction:row-reverse;gap:8px;width:auto;min-width:114px;padding:0 14px;height:44px}
@media(prefers-reduced-motion:reduce){#game .bottom-navigation .dock>button>.ui-icon,#game .bottom-navigation .dock>button>.menu-label{transition:none}}
/* A venue character, not a floating UI shortcut. */
#stage .wedding-mc{position:absolute;left:720px;top:960px;transform:translate(-50%,-100%);width:200px;height:200px;padding:0;border:0;background:none;z-index:5;cursor:pointer;touch-action:manipulation;color:#44383e}
.wedding-mc img{display:block;width:200px;height:200px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 5px 4px #0004);pointer-events:none}
:is(.wedding-mc,.mc-speech) .mc-bubble{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);width:300px;box-sizing:border-box;padding:17px 12px 14px;border:2px solid #eadbcb;border-radius:24px;background:#fff8ec;box-shadow:0 5px 15px #0003;font-size:27px;font-weight:600;line-height:1.4;white-space:nowrap;animation:mc-announcement 3.6s ease-in-out infinite}
.mc-bubble::after{content:'';position:absolute;left:calc(50% - 9px);bottom:-10px;width:18px;height:18px;background:#fff8ec;transform:rotate(45deg);border-right:2px solid #eadbcb;border-bottom:2px solid #eadbcb}
.mc-bubble small{display:block;font-size:19px;font-weight:400;color:#8a7265;margin-top:5px}
.wedding-mc .mc-name{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:21px;color:#f7efe7;background:#29212cce;border:1px solid #ddbd8d70;border-radius:8px;padding:3px 12px;white-space:nowrap}
.wedding-mc:focus-visible{outline:3px solid #ead7ae;outline-offset:6px;border-radius:16px}
.wedding-mc:hover .mc-bubble{background:#fffdf7}
@keyframes mc-announcement{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(prefers-reduced-motion:reduce){:is(.wedding-mc,.mc-speech) .mc-bubble{animation:none}}
.wedding-mc canvas{position:relative;display:block;width:200px;height:200px;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 4px 3px #0005)}
#stage :is(.wedding-mc,.mc-speech) .mc-bubble{top:calc(100% + 62px);bottom:auto;left:50%;width:310px;padding:16px 12px;background:#27232d70;color:#fff9ed;border:2px solid #fff1d64d;box-shadow:inset 0 1px 0 #ffffff35,0 5px 15px #0003;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:none}
#stage :is(.wedding-mc,.mc-speech) .mc-bubble::after{top:-10px;bottom:auto;background:#27232d70;border:0;border-top:2px solid #fff1d64d;border-left:2px solid #fff1d64d}
#stage .mc-bubble small{color:#eadfe4}
#stage :is(.mc-name,.stop-label,.ambient-name){opacity:1;font:400 21px/1.4 Pretendard,sans-serif;color:#f7efe7;background:#29212cb8;border:1px solid #ddbd8d70;border-radius:8px;padding:3px 12px;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
#stage .photo-stop .stop-label{opacity:1;bottom:-12px;font-size:21px}
#stage .ambient-name{top:152px;pointer-events:none}
#stage .wedding-mc:active canvas{filter:brightness(1.18)}
@media(prefers-reduced-transparency:reduce){#stage :is(.wedding-mc,.mc-speech) .mc-bubble,#stage :is(.wedding-mc,.mc-speech) .mc-bubble::after{background:#29232e}}
#stage .ambient-bubble{background:#27232d70;color:#fff9ed;border:2px solid #fff1d64d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #ffffff35,0 5px 15px #0003}
@media(prefers-reduced-transparency:reduce){#stage .ambient-bubble{background:#29232e}}
/* The MC stands in the floor gap beside the third left-hand table. */
#stage .wedding-mc{left:300px;top:1330px}
#stage :is(.wedding-mc,.mc-speech) .mc-bubble{top:auto;bottom:calc(100% + 12px)}
#stage :is(.wedding-mc,.mc-speech) .mc-bubble::after{top:auto;bottom:-10px;border:0;border-right:2px solid #fff1d64d;border-bottom:2px solid #fff1d64d}
/* Shared labels sit directly below the contact point and remain readable at every scale. */
#stage :is(.wedding-mc,.photo-stop,.ambient-guest)>.npc-name{display:block;position:absolute;left:50%;right:auto;top:calc(100% + 4px);bottom:auto;transform:translateX(-50%);opacity:1;z-index:6;margin:0;max-width:calc(125px / var(--scene-scale));padding:calc(2px / var(--scene-scale)) calc(5px / var(--scene-scale));font-size:calc(clamp(10px,2.5vw,12px) / var(--scene-scale));line-height:1.4;font-weight:500;color:#fff8ee;background:#241e2db8;border:1px solid #e3cda54a;border-radius:calc(4px / var(--scene-scale));box-shadow:0 2px 4px #0003;text-align:center;white-space:nowrap;pointer-events:none}
#stage .photo-stop{height:210px}
#stage .ambient-guest>.npc-name{top:154px}
/* Soft elliptical contact shadows follow the floor plane, with no glow or sparkles. */
#stage :is(.photo-stop,.wedding-mc,.ambient-guest)::before{content:'';display:block;position:absolute;left:50%;bottom:4px;width:110px;height:30px;transform:translateX(-50%) rotate(-8deg);border:0;border-radius:50%;background:radial-gradient(ellipse,#100d13a6 0%,#100d1366 38%,#100d1300 74%);box-shadow:none;filter:blur(3px);opacity:.85;animation:none;pointer-events:none;z-index:0}
#stage .wedding-mc::before{bottom:-2px;width:95px;height:27px}
#stage .ambient-guest::before{bottom:0;width:90px;height:24px}
#stage :is(.photo-stop,.wedding-mc)::after{content:none;animation:none}
#stage :is(.physical-prop,.wedding-mc canvas,.ambient-guest canvas){position:relative;z-index:1}
#stage .physical-prop{filter:drop-shadow(3px 5px 3px #100d1340);transform-origin:50% 92%}
#stage .prop-camera .physical-prop{animation:camera-survey 6s ease-in-out infinite}
#stage .prop-easel .physical-prop{animation:easel-settle 7s ease-in-out -2s infinite}
#stage .prop-album .physical-prop::after{content:'';position:absolute;left:50%;top:28%;width:25%;height:26%;border-radius:2px;background:linear-gradient(90deg,#e9dfc000,#fff2d699);transform-origin:left center;animation:album-page 7s ease-in-out -1s infinite;pointer-events:none}
@keyframes camera-survey{0%,20%,100%{rotate:0deg}40%,55%{rotate:-3deg}75%,85%{rotate:2deg}}
@keyframes easel-settle{0%,65%,100%{rotate:0deg}75%{rotate:-2deg}85%{rotate:1.5deg}}
@keyframes album-page{0%,55%,100%{transform:perspective(300px) rotateY(0);opacity:0}60%{opacity:.75}78%{transform:perspective(300px) rotateY(-160deg);opacity:.5}90%{opacity:0}}
body.paused #stage .physical-prop,body.paused #stage .physical-prop::after,body.scene-hidden #stage .physical-prop,body.scene-hidden #stage .physical-prop::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#stage .physical-prop,#stage .physical-prop::after{animation:none!important}}
/* Low floor-aligned platform, tucked beside the third table rather than a separate bay. */
#stage .mc-floor-dais{position:absolute;left:205px;top:1275px;width:190px;height:112px;z-index:3;pointer-events:none}
#stage .wedding-mc::before{bottom:2px;width:90px;height:22px;opacity:.9}
/* Replace only the left third table bay with a top-down MC area. */
#stage .mc-floor-dais{left:16px;top:1004px;width:326px;height:294px}
#stage .wedding-mc{left:180px;top:1220px}
#stage .couple-name{position:absolute;z-index:5;transform:translateX(-50%);font-size:calc(clamp(9px,2.4vw,11px) / var(--scene-scale));line-height:1.4;white-space:nowrap;color:#fff7ec;background:#241e2db8;border:1px solid #e3cda54a;border-radius:calc(3px / var(--scene-scale));padding:calc(2px / var(--scene-scale)) calc(3px / var(--scene-scale));text-align:center;pointer-events:none;text-shadow:0 1px 2px #0008}

/* Speech is a separate scene-level stacking context, below the viewport UI. */
#stage>#speech-layer{position:absolute;inset:0;z-index:10000;pointer-events:none;overflow:visible}
#speech-layer .speech-anchor{position:absolute;pointer-events:none;overflow:visible}
#speech-layer .guest-speech{width:160px;height:160px;transform:translate(-50%,-150px)}
#speech-layer .mc-speech{width:200px;height:200px;transform:translate(-50%,-100%)}
#speech-layer .ambient-bubble.visible,#speech-layer .mc-bubble{pointer-events:auto;cursor:pointer}
#speech-layer .mc-bubble:focus-visible{outline:3px solid #ead7ae;outline-offset:6px}