.contact-crossing{position:absolute;inset:0;z-index:8;overflow:hidden;background:#dfabb0;isolation:isolate;opacity:0}
/* Focus may scroll the original paper internally, but never the scene itself. */
#contact .ctl .stage{overflow:clip;overflow-anchor:none}
/* The active label and its character marker take turns when the link is read. */
.site-nav:has(nav a.is-here[href="#contact"]:focus-visible) .nav-mascot{opacity:0;visibility:hidden}
/* 2026-10-08 r6 g3: :hover 는 마우스 기기에서만(휴대폰은 탭한 CONTACT 에 :hover 가 남아 도착한 캐릭터가 계속 숨었다) */
@media(hover:hover) and (pointer:fine){.site-nav:has(nav a.is-here[href="#contact"]:hover) .nav-mascot{opacity:0;visibility:hidden}}
.contact-crossing:focus{outline:none}
/* The between-room traveller must not cover the letter or the delivery scene. */
.contact-room-visible .journey-bridge:not(.is-contact-arrive){visibility:hidden!important}
.contact-crossing[hidden],.crossing-envelope[hidden],.crossing-confirm[hidden],.crossing-cyclist[hidden],.delivery-paper[hidden]{display:none!important}
.crossing-landscape,.crossing-landscape img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.crossing-signal{position:absolute;z-index:3;aspect-ratio:140/720;pointer-events:none}
.crossing-signal svg{display:block;width:100%;height:100%}
.crossing-gate{position:absolute;z-index:3;transform-origin:0 50%;will-change:transform;pointer-events:none}
.crossing-gate svg{width:100%;height:100%;display:block}
.crossing-actor{position:absolute;z-index:4;pointer-events:none;will-change:transform}
.ctl .crossing-actor img{position:static;display:block;width:100%;height:100%;max-width:none}
.crossing-shadow{position:absolute;z-index:3;pointer-events:none;border-radius:50%;background:#34324f;filter:blur(3px)}
.crossing-envelope{position:absolute;z-index:10;pointer-events:none;filter:drop-shadow(0 4px 3px #2b293a24)}
.crossing-envelope svg{display:block;width:100%;height:100%}
.crossing-confirm{position:absolute;right:7%;top:9%;display:flex;flex-direction:column;align-items:flex-end;gap:18px;color:#353641;z-index:5}
.crossing-confirm h3{margin:0;font:400 clamp(54px,6.1vw,88px)/1.1 var(--serif,Georgia,serif);letter-spacing:-.045em;color:#fff2d4;text-shadow:0 2px 0 #493c3b35}
.crossing-confirm button{min-height:44px;padding:8px 2px;border:0;border-bottom:1px solid currentColor;background:transparent;font:11px/1.5 var(--mono,monospace);letter-spacing:.08em;color:inherit;cursor:pointer}
.crossing-confirm button span{margin-left:8px;font:18px/1 Arial}
.crossing-confirm button:focus-visible{outline:2px solid #383e55;outline-offset:2px}
.crossing-confirm button:hover{color:#fdf0d6}
.crossing-cyclist{position:absolute;z-index:2;pointer-events:none;will-change:transform}
.ctl .crossing-cyclist img{display:block;position:static;width:100%;height:auto;max-width:none}
.delivery-paper{position:absolute;z-index:10;pointer-events:none;perspective:1600px}
.delivery-paper-sheet{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.delivery-paper-panel{position:absolute;left:0;right:0;height:33.333333%;transform-style:preserve-3d}
.delivery-paper-panel.part-0{top:0;transform-origin:50% 100%;z-index:3}
.delivery-paper-panel.part-1{top:33.333333%;z-index:1}
.delivery-paper-panel.part-2{top:66.666667%;transform-origin:50% 0;z-index:2}
.delivery-paper-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.delivery-paper-print{position:absolute;left:0;transform-style:flat;pointer-events:none}
.delivery-paper-print .inner{opacity:1!important;transition:none;transform:none}
.delivery-paper-print .face{box-shadow:none!important}
.delivery-paper-print .cnt,.delivery-paper-print .note,.delivery-paper-print .privacy{display:none!important}
.delivery-paper-face.back{left:3.3%;right:3.3%;transform:rotateX(180deg);background:#ecddbb;border:1px solid #716249;box-shadow:0 1px 3px #3c2f2828}
.delivery-paper-panel.part-0 .back{background:transparent;border:0;box-shadow:none}
.delivery-paper-face.back svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1px #3c2f2828)}
.delivery-paper-panel.part-1 .back{display:none}
.crossing-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.crossing-inspector{position:fixed;bottom:10px;left:10px;z-index:100;background:#fff;border:1px solid #555;color:#111;font:12px Arial}
.crossing-inspector summary{padding:12px;cursor:pointer}.crossing-inspector div{display:flex;max-width:370px;flex-wrap:wrap}.crossing-inspector button{min-height:44px;padding:10px;border:1px solid #ddd;background:white}
@media(max-width:760px),(max-aspect-ratio:1/1){.crossing-confirm{top:15%;left:16%;right:6%;align-items:center;gap:12px}.crossing-confirm h3{font-size:clamp(33px,9.5vw,64px);white-space:nowrap}.crossing-confirm button{font-size:10px;color:#363442}}
@media(prefers-reduced-motion:reduce){:where(html:not([data-motion-mode="full"])) .crossing-gate,:where(html:not([data-motion-mode="full"])) .crossing-actor,:where(html:not([data-motion-mode="full"])) .crossing-cyclist{will-change:auto}}