/* ===== 페이지 이동 · 경계 표시 · 부드러운 전환 (추가) ===== */
html{scroll-behavior:auto;overflow-anchor:none}
#viewer,#innerView,#ivBody{overflow-anchor:none}

/* 내지: 한 칸씩 옮기는 ◀ ▶ */
.ivmv{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:8px;opacity:0;transform:translateY(5px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:3}
.ivp:hover .ivmv,.ivp:focus-within .ivmv,.ivp.sel .ivmv{opacity:1;transform:none}
.ivmv button{pointer-events:auto;border:0;border-radius:999px;width:36px;height:26px;background:rgba(24,31,38,.88);color:#fff;font-size:12px;line-height:1;cursor:pointer;transition:background .15s,transform .15s}
.ivmv button:hover:not(:disabled){background:var(--acc);transform:scale(1.1)}
.ivmv button:active:not(:disabled){transform:scale(.94)}
.ivmv button:disabled{opacity:.28;cursor:not-allowed}
.ivbody.dragmode .ivmv{display:none}
@media(hover:none){.ivmv{opacity:1;transform:none}}

/* 선택한 페이지 / 방금 옮긴 페이지 */
.ivp.sel canvas{outline:2px solid var(--acc);outline-offset:2px}
.ivp.ivlanded canvas{animation:ivland 1.05s ease-out}
@keyframes ivland{0%{box-shadow:0 0 0 0 rgba(14,124,134,.95)}100%{box-shadow:0 0 0 14px rgba(14,124,134,0)}}

/* 끌 때: 모든 페이지 사이의 경계 점선 + 놓일 자리 표시 */
.ivgap{position:absolute;width:0;border-left:2px dashed rgba(14,124,134,.62);pointer-events:none;z-index:5;animation:ivgapin .22s ease both}
.ivgap::before{content:'';position:absolute;top:-4px;left:-5px;width:8px;height:8px;border-radius:50%;background:var(--acc);opacity:.75}
.ivgap.nop{display:none}
.ivgap.hot{border-left-color:transparent}
.ivgap.hot::before{display:none}
.ivgap.flash{border-left:3px solid var(--acc);box-shadow:0 0 12px rgba(14,124,134,.85);animation:ivflash 1.15s ease-out both}
.ivgap.flash::before{display:none}
@keyframes ivgapin{from{opacity:0}to{opacity:1}}
@keyframes ivflash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
.ivdrop{transition:left .16s cubic-bezier(.2,.8,.2,1),top .16s cubic-bezier(.2,.8,.2,1),height .16s ease}
.ivdrop::after{content:attr(data-l);position:absolute;top:8px;left:10px;white-space:nowrap;background:var(--acc);color:#fff;font-size:10.5px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ivdrop[data-s=r]::after{left:auto;right:10px}
.ivghost{will-change:left,top,transform}

/* 섹션 이동 중: 페이지와 페이지 사이 경계가 드러남 */
#ivBody .ivs,#ivBody.single .ivp{outline:1px dashed transparent;outline-offset:6px;transition:outline-color .28s ease}
body.pg-moving #ivBody .ivs,body.pg-moving #ivBody.single .ivp{outline-color:rgba(14,124,134,.65)}
.pg-flash{animation:pgflash .95s ease-out}
@keyframes pgflash{0%{box-shadow:0 0 0 0 rgba(14,124,134,.7)}100%{box-shadow:0 0 0 12px rgba(14,124,134,0)}}
.pg-arrive{animation:pgarrive 1.1s ease-out}
@keyframes pgarrive{0%{box-shadow:0 0 0 0 rgba(14,124,134,.7)}100%{box-shadow:0 0 0 14px rgba(14,124,134,0)}}

/* 표지 ↔ 내지 경계선 */
#innerView{position:relative}
.pgline{position:absolute;left:0;right:0;top:-9px;height:0;border-top:2px dashed var(--line);pointer-events:none;transition:border-color .25s,box-shadow .25s}
.pgtag{position:absolute;left:50%;top:-21px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);color:var(--soft);font-size:10.5px;font-weight:700;line-height:1;padding:4px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;transition:background .25s,color .25s,border-color .25s}
body.pg-moving .pgline{border-top-style:solid;border-top-color:var(--acc);box-shadow:0 0 10px rgba(14,124,134,.55)}
body.pg-moving .pgtag{background:var(--acc);border-color:var(--acc);color:#fff}

/* 떠 있는 페이지 이동 바 */
#pgnav{position:fixed;bottom:18px;left:var(--pgx,50%);z-index:60;display:flex;align-items:center;gap:4px;padding:6px 8px;background:rgba(24,31,38,.93);color:#f4f1e8;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transform:translate(-50%,26px);transition:opacity .25s ease,transform .38s cubic-bezier(.2,.8,.2,1)}
#pgnav.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#pgnav.bump{animation:pgbump .36s ease}
@keyframes pgbump{0%,100%{transform:translate(-50%,0)}30%{transform:translate(-50%,-4px)}60%{transform:translate(-50%,1px)}}
#pgnav .pgb{width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:1;cursor:pointer;transition:background .15s,transform .15s}
#pgnav .pgb:hover:not(:disabled){background:var(--acc);transform:scale(1.09)}
#pgnav .pgb:active:not(:disabled){transform:scale(.93)}
#pgnav .pgb:disabled{opacity:.3;cursor:default}
#pgnav .pgchips{display:flex;gap:2px;padding:0 4px}
#pgnav .pgchip{border:0;border-radius:999px;background:transparent;color:#c9ced6;font:inherit;font-size:12px;padding:6px 12px;cursor:pointer;transition:background .25s ease,color .25s ease}
#pgnav .pgchip:hover{color:#fff}
#pgnav .pgchip.on{background:var(--acc);color:#fff;font-weight:700}
#pgnav .pgpos{min-width:84px;padding:0 6px;text-align:center;font-size:11px;color:#9aa3b2;font-variant-numeric:tabular-nums}
#pgnav button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .ivmv,.ivdrop,#pgnav,#pgnav .pgchip,.pgline,.pgtag{transition:none}
  .ivgap,.ivp.ivlanded canvas,.pg-flash,.pg-arrive,#pgnav.bump{animation:none}
}