@font-face{font-family:"Galmuri11";src:url(../fonts/Galmuri11.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Pretendard";src:url(../fonts/PretendardVariable.woff2) format("woff2-variations");font-weight:45 920;font-display:swap}

/* 1u = 디자인 1px (아트보드 가로 2240 기준). js/common.js가 화면 폭에 맞춰 계산 */
:root{--u:calc(100vw / 2240)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
html{scrollbar-gutter:stable}
/* 스크롤 잠금 */
html.no-scroll,html.no-scroll body{overflow:hidden;overscroll-behavior:none}
body{overflow-x:hidden;font-family:"Pretendard",system-ui,sans-serif}
img{display:block;-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit}

/* 페이지 = 아트보드 */
.page{position:relative;width:calc(var(--u) * 2240);margin:0 auto}
.page>.bg{width:100%;height:auto;pointer-events:none}

/* 디자인 좌표로 배치되는 요소 */
.obj{position:absolute;left:calc(var(--u) * var(--x));top:calc(var(--u) * var(--y));width:calc(var(--u) * var(--w))}
.obj>img{width:100%;height:auto}

/* 호버 시 이미지가 바뀌는 버튼 */
.swap{border:0;padding:0;margin:0;background:none;cursor:pointer;z-index:10}
.swap .hov{position:absolute;left:calc(var(--u) * var(--hx));top:calc(var(--u) * var(--hy));width:calc(var(--u) * var(--hw));max-width:none;visibility:hidden;pointer-events:none}
.swap:hover .hov,.swap:focus-visible .hov{visibility:visible}
.swap:hover .base,.swap:focus-visible .base{visibility:hidden}
.swap:focus-visible{outline:none}

/* 화면에 고정 (스크롤해도 그 자리) */
.fixed{position:fixed;z-index:20}

/* 정해진 구간 안에서만 화면에 고정 (구간 끝 --stop에서 멈춤) */
.sticky-rail{position:absolute;left:calc(var(--u) * var(--x));top:calc(var(--u) * var(--y));width:calc(var(--u) * var(--w));height:calc(var(--u) * (var(--stop) - var(--y)));z-index:20;pointer-events:none}
.sticky-rail>.sticky{position:sticky;top:calc(var(--u) * var(--y));width:100%;height:auto;pointer-events:auto}

/* 드래그 가능한 미니배너 */
.drag{z-index:30;cursor:grab;touch-action:none;user-select:none}
.drag.dragging{cursor:grabbing}
.drag .close{position:absolute;left:calc(var(--u) * var(--bx));top:calc(var(--u) * var(--by));width:calc(var(--u) * var(--bw));height:calc(var(--u) * var(--bh));border:0;padding:0;background:none;cursor:pointer}
.drag .close img{width:100%;height:100%}

/* 1-2 팝업 */
.popup{animation:popin .12s steps(2) both}
@keyframes popin{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}

/* 1-2 검은 막 + 소녀 대화창 (화면 중앙 고정) */
.dim{position:fixed;inset:0;background:#000;opacity:0;transition-property:opacity;transition-timing-function:linear;z-index:1000}
.dim.on{opacity:.75}
.dialog{position:fixed;left:50%;top:50%;width:calc(var(--u) * 481.9);transform:translate(-50%,-50%);z-index:1001;visibility:hidden}
.dialog.show{visibility:visible;animation:dlgin .12s steps(2) both}
.dialog.show.first{animation:dlgFirst 1.3s cubic-bezier(.25,.6,.3,1) both} /* 첫 대화창은 천천히 */
@keyframes dlgFirst{from{transform:translate(-50%,-50%) scale(.85);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
@keyframes dlgin{from{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.dialog img{width:100%;height:auto}
.dialog button{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:pointer}
.dialog button:focus-visible{outline:2px dashed #00f}

/* 임시 안내 (다음 단계 연결 전) */
.toast{position:fixed;left:50%;top:5vh;transform:translateX(-50%);z-index:9999;background:#111;color:#0f0;font-family:"Galmuri11",monospace;font-size:14px;padding:12px 18px;border:1px solid #0f0;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}