/* © 2026 Webzine Studio. All rights reserved. webzinestudio.com */

/* =========================================================
   이북 뷰어
========================================================= */

.sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* hidden 속성이 display 선언에 밀리지 않도록 강제
   (목차 · 썸네일 · 모달 · 토스트가 항상 열려버리는 문제 방지) */
.ebv [hidden]{ display:none !important; }

.ebv{
    max-width:none;
    width:100%;
    margin:0;
    padding:0;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    background:#0f1420;
    color:#fff;
    overflow:hidden;
}

/* 전체화면일 때 */
.ebv:fullscreen{ height:100vh; }

/* 공통 포커스 링 - 접근성 (상용 뷰어들이 놓치는 부분) */
.ebv button:focus-visible,
.ebv a:focus-visible,
.ebv input:focus-visible{
    outline:2px solid #5b9dff;
    outline-offset:2px;
    border-radius:8px;
}

/* ---------------- 상단 바 ---------------- */
.ebv-bar{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 20px;
    background:rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.ebv-bar-left{ display:flex; align-items:center; gap:14px; min-width:0; }

.ebv-back{
    width:38px; height:38px;
    flex:0 0 38px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
}
.ebv-back svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ebv-back:hover{ background:rgba(255,255,255,.16); }

.ebv-titles{ min-width:0; }
.ebv-titles strong{
    display:block; font-size:15px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ebv-titles span{
    display:block; font-size:12.5px; color:#8f9bb0; margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.ebv-bar-right{ display:flex; align-items:center; gap:6px; }

.ebv-icon{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    min-width:56px; padding:7px 8px;
    border:none; background:transparent; color:#c3ccdb;
    border-radius:10px; cursor:pointer;
    transition:.18s ease;
}
.ebv-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ebv-icon em{ font-style:normal; font-size:11px; letter-spacing:.02em; }
.ebv-icon:hover{ background:rgba(255,255,255,.08); color:#fff; }
.ebv-icon.is-on{ background:rgba(49,130,246,.18); color:#7db4ff; }

/* ---------------- 본문 ---------------- */
.ebv-stage{
    flex:1 1 auto;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 76px;
    min-height:0;
}

.ebv-book{
    position:relative;
    display:flex;
    gap:2px;
    height:100%;
    align-items:center;
    justify-content:center;
    perspective:2200px;
    transition:transform .26s ease;
}

.ebv-page{
    position:relative;
    height:100%;
    display:flex;
}
.ebv-page img{
    height:100%;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
    background:#fff;
    user-select:none;
    -webkit-user-drag:none;
}

/* 스프레드일 때 가운데 접힘선 */
.ebv-book.is-spread .ebv-page:first-child img{ border-radius:4px 0 0 4px; }
.ebv-book.is-spread .ebv-page:last-child  img{ border-radius:0 4px 4px 0; }
.ebv-book.is-spread::after{
    content:'';
    position:absolute;
    top:0; bottom:0; left:50%;
    width:26px; margin-left:-13px;
    pointer-events:none;
    background:-webkit-gradient(linear, left top, right top,
        from(rgba(0,0,0,0)), color-stop(.5, rgba(0,0,0,.22)), to(rgba(0,0,0,0)));
    background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.22) 50%, rgba(0,0,0,0));
    z-index:3;
}

/* 넘김 애니메이션 */
@keyframes ebvFlipR{
    0%   { opacity:.35; transform:translateX(26px) rotateY(-7deg); }
    100% { opacity:1;   transform:translateX(0) rotateY(0); }
}
@keyframes ebvFlipL{
    0%   { opacity:.35; transform:translateX(-26px) rotateY(7deg); }
    100% { opacity:1;   transform:translateX(0) rotateY(0); }
}
.ebv-book.flip-r{ animation:ebvFlipR .26s ease-out; }
.ebv-book.flip-l{ animation:ebvFlipL .26s ease-out; }

/* 확대 모드 */
.ebv.is-zoom .ebv-stage{ overflow:auto; align-items:flex-start; }
.ebv.is-zoom .ebv-book{ height:auto; transform:scale(1.55); transform-origin:top center; margin:40px 0; }
.ebv.is-zoom .ebv-page img{ height:auto; width:100%; }

/* 좌우 버튼 */
.ebv-nav{
    position:absolute;
    top:50%; transform:translateY(-50%);
    width:50px; height:50px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.1);
    color:#fff;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:.18s ease;
    z-index:6;
}
.ebv-nav svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ebv-nav:hover:not(:disabled){ background:#3182f6; }
.ebv-nav:disabled{ opacity:.22; cursor:default; }
.ebv-prev{ left:16px; }
.ebv-next{ right:16px; }

/* ---------------- 핫스팟 ---------------- */
.ebv-hotspot{
    position:absolute;
    border:2px solid rgba(49,130,246,.85);
    background:rgba(49,130,246,.1);
    border-radius:12px;
    cursor:pointer;
    padding:0;
    z-index:4;
    transition:.18s ease;
    animation:ebvPulse 2.6s ease-in-out infinite;
}
@keyframes ebvPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(49,130,246,.45); }
    50%    { box-shadow:0 0 0 9px rgba(49,130,246,0); }
}
.ebv-hotspot:hover{ background:rgba(49,130,246,.24); }

.ebv-hotspot-badge{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:8px;
    background:#3182f6;
    color:#fff;
    padding:9px 15px;
    border-radius:40px;
    font-size:13px; font-weight:700;
    white-space:nowrap;
    box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.ebv-hotspot-badge svg{ width:16px; height:16px; fill:currentColor; stroke:none; }
.ebv-hotspot--audio .ebv-hotspot-badge{ background:#111827; }
.ebv-hotspot--audio .ebv-hotspot-badge svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ebv-hotspot--link  .ebv-hotspot-badge{ background:#0f9d58; }
.ebv-hotspot--link  .ebv-hotspot-badge svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------- 목차 ---------------- */
.ebv-toc{
    position:absolute;
    top:0; right:0; bottom:0;
    width:290px;
    background:#151b29;
    border-left:1px solid rgba(255,255,255,.08);
    z-index:8;
    display:flex; flex-direction:column;
}
.ebv-toc-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 18px 14px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.ebv-toc-head strong{ font-size:14px; letter-spacing:.06em; }
.ebv-toc-close{
    width:30px; height:30px; border:none; border-radius:50%;
    background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.ebv-toc-close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.ebv-toc-list{ overflow-y:auto; padding:8px 0; }
.ebv-toc-list li{ list-style:none; }
.ebv-toc-list button{
    width:100%;
    display:flex; align-items:center; gap:13px;
    padding:12px 18px;
    border:none; background:transparent;
    color:#b9c3d4; text-align:left; cursor:pointer;
    font-size:14px;
    transition:.15s ease;
}
.ebv-toc-list button:hover{ background:rgba(255,255,255,.05); color:#fff; }
.ebv-toc-list button.is-active{ background:rgba(49,130,246,.14); color:#7db4ff; }
.ebv-toc-no{ font-size:11.5px; color:#6b7891; letter-spacing:.06em; flex:0 0 20px; }
.ebv-toc-list button.is-active .ebv-toc-no{ color:#7db4ff; }
.ebv-toc-tt{ flex:1; }

/* ---------------- 하단 ---------------- */
.ebv-foot{
    flex:0 0 auto;
    background:rgba(255,255,255,.04);
    border-top:1px solid rgba(255,255,255,.08);
}

.ebv-progress{ height:3px; background:rgba(255,255,255,.07); }
.ebv-progress-fill{
    display:block; height:100%;
    background:#3182f6;
    transition:width .26s ease;
}

.ebv-foot-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 20px;
}

.ebv-thumbs-toggle{
    display:flex; align-items:center; gap:8px;
    border:none; background:transparent; color:#c3ccdb;
    padding:8px 12px; border-radius:9px; cursor:pointer;
    font-size:13px;
}
.ebv-thumbs-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; }
.ebv-thumbs-toggle em{ font-style:normal; }
.ebv-thumbs-toggle:hover{ background:rgba(255,255,255,.08); color:#fff; }
.ebv-thumbs-toggle.is-on{ background:rgba(49,130,246,.18); color:#7db4ff; }

.ebv-counter{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:#8f9bb0; }
.ebv-counter input{
    width:56px; padding:7px 8px;
    text-align:center;
    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:13.5px;
    -moz-appearance:textfield;
}
.ebv-counter input::-webkit-outer-spin-button,
.ebv-counter input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* 썸네일 */
.ebv-thumbs{
    display:flex; gap:10px;
    padding:14px 20px 18px;
    overflow-x:auto;
    border-top:1px solid rgba(255,255,255,.07);
}
.ebv-thumb{
    position:relative;
    flex:0 0 auto;
    width:66px;
    border:2px solid transparent;
    border-radius:6px;
    background:transparent;
    padding:0; cursor:pointer;
    overflow:hidden;
    transition:.15s ease;
}
.ebv-thumb img{ width:100%; display:block; }
.ebv-thumb span{
    position:absolute; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.62);
    color:#fff; font-size:10.5px; padding:2px 0;
}
.ebv-thumb:hover{ border-color:rgba(255,255,255,.4); }
.ebv-thumb.is-active{ border-color:#3182f6; }

/* ---------------- 토스트 ---------------- */
.ebv-toast{
    position:fixed;
    left:50%; bottom:110px;
    transform:translateX(-50%);
    background:#fff; color:#16181d;
    font-size:13.5px; font-weight:600;
    padding:12px 22px;
    border-radius:40px;
    box-shadow:0 12px 34px rgba(0,0,0,.35);
    z-index:60;
}

/* ---------------- 모달 ---------------- */
.ebv-modal{
    position:fixed; inset:0;
    background:rgba(8,11,18,.9);
    z-index:70;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
}
.ebv-modal-close{
    position:absolute; top:22px; right:22px;
    width:44px; height:44px; border-radius:50%;
    border:none; background:#fff; color:#16181d;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.ebv-modal-close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.ebv-modal-body{ width:100%; max-width:900px; }

.ebv-modal-video{
    position:relative;
    padding-top:56.25%;
    border-radius:14px;
    overflow:hidden;
    background:#000;
}
.ebv-modal-video iframe{
    position:absolute; inset:0;
    width:100%; height:100%; border:0;
}

.ebv-modal-audio{
    background:#fff; color:#16181d;
    border-radius:16px;
    padding:34px;
    text-align:center;
}
.ebv-modal-audio strong{ display:block; font-size:19px; margin-bottom:16px; }
.ebv-modal-audio p{ font-size:14.5px; line-height:1.8; color:#5b6472; }
.ebv-modal-audio audio{ width:100%; margin-top:8px; }

/* =========================================================
   태블릿 이하
========================================================= */
@media (max-width:900px){

    .ebv-stage{ padding:16px 14px; }

    .ebv-nav{
        width:42px; height:42px;
        background:rgba(0,0,0,.42);
    }
    .ebv-prev{ left:6px; }
    .ebv-next{ right:6px; }

    .ebv-toc{ width:100%; }

    .ebv-icon{ min-width:46px; padding:6px 4px; }
    .ebv-icon em{ display:none; }

    .ebv-titles span{ display:none; }

    .ebv-hotspot-badge{ font-size:11.5px; padding:7px 12px; }
    .ebv-hotspot-badge em{ display:none; }

    .ebv.is-zoom .ebv-book{ transform:scale(1.25); }
}

@media (max-width:520px){
    .ebv-bar{ padding:11px 13px; }
    .ebv-titles strong{ font-size:13.5px; }
    .ebv-thumb{ width:54px; }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
    .ebv-book.flip-r,
    .ebv-book.flip-l{ animation:none; }
    .ebv-hotspot{ animation:none; }
}

/* =========================================================
   전체화면 몰입 모드
   - 상단바 · 하단바를 감추고 페이지만 크게
   - 화면을 탭하면 잠깐 다시 나타남
========================================================= */

/* 몰입 모드에서 바를 absolute로 띄우기 위한 기준점 */
.ebv{
    position:relative;
}

/* 화살표 버튼 연타 시 확대 방지 */
.ebv-nav,
.ebv-icon,
.ebv-thumbs-toggle{
    touch-action:manipulation;
}

/* 상단/하단 바 - 부드럽게 사라지도록 */
.ebv-bar,
.ebv-foot{
    transition:opacity .25s ease, transform .25s ease;
}

/* 몰입 모드: 위아래 숨김 */
.ebv.is-immersive .ebv-bar{
    position:absolute !important;
    top:0; left:0; right:0;
    z-index:20;
    opacity:0;
    transform:translateY(-100%);
    pointer-events:none;
    /* flex 레이아웃에서 자리를 완전히 비우도록 */
    flex:0 0 auto;
    height:auto;
}

.ebv.is-immersive .ebv-foot{
    position:absolute !important;
    bottom:0; left:0; right:0;
    z-index:20;
    opacity:0;
    transform:translateY(100%);
    pointer-events:none;
    flex:0 0 auto;
}

/* 몰입 모드에서 썸네일 패널은 접어둠 (페이지 영역 최대 확보) */
.ebv.is-immersive .ebv-thumbs{
    display:none !important;
}

/* 페이지 영역이 화면 전체를 쓰도록 */
.ebv.is-immersive .ebv-stage{
    padding-top:14px;
    padding-bottom:14px;
}

/* 탭하면 잠깐 다시 보임 */
.ebv.is-immersive.ui-peek .ebv-bar,
.ebv.is-immersive.ui-peek .ebv-foot{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* 몰입 모드에서도 좌우 화살표는 항상 사용 가능 */
.ebv.is-immersive .ebv-nav{
    opacity:.45;
}

.ebv.is-immersive .ebv-nav:hover,
.ebv.is-immersive.ui-peek .ebv-nav{
    opacity:1;
}

@media (max-width:900px){

    /* 모바일 몰입 모드에서는 여백을 더 줄여 페이지를 최대한 크게 */
    .ebv.is-immersive .ebv-stage{
        padding:6px 8px;
    }

    /* 화살표도 작게 - 페이지를 가리지 않도록 */
    .ebv.is-immersive .ebv-nav{
        width:38px;
        height:38px;
        background:rgba(0,0,0,.35);
    }

    .ebv.is-immersive .ebv-prev{ left:4px; }
    .ebv.is-immersive .ebv-next{ right:4px; }
}

@media (prefers-reduced-motion: reduce){
    .ebv-bar,
    .ebv-foot{ transition:none; }
}

/* =========================================================
   iOS 사파리 등 네이티브 전체화면 미지원 브라우저용 대체
   - 화면 전체를 덮어 전체화면과 동일한 경험 제공
========================================================= */

/* .ebv는 이미 100dvh로 화면을 채우고 있어 '덮기'만으로는 변화가 없습니다.
   실제 체감되는 변화는 상단바·하단바를 감춰 페이지를 키우는 것이므로
   is-faux-full 은 위치 고정만 담당하고, 나머지는 is-immersive 가 처리합니다. */
.ebv.is-faux-full{
    position:fixed;
    inset:0;
    z-index:9998;
    width:100%;
    height:100vh;
    height:100dvh;
}

/* 몰입 모드에서 페이지 이미지가 실제로 커지도록
   (바가 absolute 로 빠지면서 stage 가 전체 높이를 차지) */
.ebv.is-immersive .ebv-stage{
    flex:1 1 auto;
    height:100%;
    min-height:0;
}

/* 집중 모드 배경 - 페이지가 잘 보이도록 더 어둡게 */
.ebv.is-immersive,
.ebv.is-faux-full{
    background:#05070c;
}
/* =========================================================
   핫스팟 인라인 재생
   - 클릭하면 뱃지 자리에서 바로 영상/오디오가 재생됨
========================================================= */

/* 재생 중일 때는 점선 테두리·펄스 애니메이션 끄고, 콘텐츠가 꽉 차게 */
.ebv-hotspot.is-playing{
    border-color:transparent;
    background:#000;
    animation:none;
    cursor:default;
    overflow:hidden;
}

.ebv-hotspot.is-playing iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

/* 오디오는 흰 배경 카드 형태로 */
.ebv-hotspot-audio{
    position:absolute;
    inset:0;
    background:#fff;
    border-radius:10px;
    padding:16px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    cursor:default;
}

.ebv-hotspot-audio strong{
    font-size:14px;
    color:#16181d;
}

.ebv-hotspot-audio audio{
    width:100%;
}

.ebv-hotspot-audio p{
    font-size:12.5px;
    color:#6b7684;
    line-height:1.6;
    margin:0;
}

/* 재생 중일 때 우상단에 뜨는 닫기(정지) 버튼 */
.ebv-hotspot-stop{
    position:absolute;
    top:8px;
    right:8px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    cursor:pointer;
}

.ebv-hotspot-stop svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
}

.ebv-hotspot-audio ~ .ebv-hotspot-stop{
    background:rgba(0,0,0,.35);
    color:#16181d;
}

@media(max-width:900px){
    .ebv-hotspot-audio{
        padding:10px 12px;
    }
    .ebv-hotspot-audio strong{
        font-size:12.5px;
    }
    .ebv-hotspot-audio p{
        font-size:11px;
    }
}

/* =========================================================
   영상 핫스팟 - 재생 전에는 실제 유튜브 썸네일이 보이도록
========================================================= */
.ebv-hotspot--video{
    overflow:hidden;
}

.ebv-hotspot-thumb{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    z-index:0;
}

/* 썸네일이 밝아도 재생 버튼 글씨가 항상 잘 보이도록 은은한 그라데이션 */
.ebv-hotspot--video::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
    z-index:0;
    pointer-events:none;
}

.ebv-hotspot--video .ebv-hotspot-badge{
    z-index:1;
}

/* 재생 중일 때는 썸네일이 필요 없으므로 자동으로 사라짐 (is-playing 시 innerHTML 초기화됨) */

/* =========================================================
   iframe 전체화면 버그 수정
   ---------------------------------------------------------
   .ebv-book에 항상 걸려있던 perspective(3D 공간) 속성이
   후손 iframe(유튜브 플레이어)의 전체화면 요청을 브라우저가
   자동 취소하게 만드는 원인이었음(transform과 동일한 부류의 제약).
   페이지 넘김 애니메이션에만 필요한 속성이므로, 넘기는 순간(.flip-r/.flip-l)
   에만 적용되게 옮기고 평소에는 제거함 */
.ebv-book{
    perspective:none;
}

.ebv-book.flip-r,
.ebv-book.flip-l{
    perspective:2200px;
}

/* =========================================================
   몰입모드 - 모바일 전용 개선
   1) 화살표 숨김 (스와이프로 대체)
   2) 처음 진입 시 중앙에 스와이프 안내
   3) PDF 바깥 영역까지 확실하게 검은 배경
========================================================= */

@media(max-width:900px){

    /* 몰입모드에서는 화살표 완전히 숨김 (스와이프로만 넘김) */
    .ebv.is-immersive .ebv-nav{
        display:none;
    }

    /* 페이지 바깥 여백까지 확실히 검게 - html/body까지 덮어서
       혹시라도 흰 배경이 비치는 일이 없도록 */
    .ebv.is-immersive,
    .ebv.is-faux-full{
        background:#000;
    }

    .ebv.is-immersive .ebv-stage{
        background:#000;
    }
}

/* 스와이프 안내 (몰입모드 처음 진입 시 중앙에 잠깐 표시) */
.ebv-swipe-hint{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.92);
    z-index:30;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:26px 32px;
    border-radius:20px;
    background:rgba(15,20,32,.82);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.1);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
}

.ebv-swipe-hint.is-visible{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

.ebv-swipe-hint svg{
    width:72px;
    height:28px;
    fill:none;
    stroke:#fff;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    animation:ebvSwipeMove 1.8s ease-in-out infinite;
}

@keyframes ebvSwipeMove{
    0%,100%{ transform:translateX(0); opacity:1; }
    50%{ transform:translateX(0); opacity:.55; }
}

.ebv-swipe-hint span{
    color:#fff;
    font-size:13.5px;
    line-height:1.6;
    text-align:center;
    letter-spacing:-0.01em;
}

@media(prefers-reduced-motion: reduce){
    .ebv-swipe-hint svg{ animation:none; }
}

/* =========================================================
   모바일 스와이프 - 위아래 밀림 방지
   ---------------------------------------------------------
   #ebvBook에 touch-action 지정이 없어서, 좌우로 넘기려고
   드래그하면 브라우저가 이걸 "세로 스크롤"로도 같이 해석해서
   페이지 이미지가 위아래로 같이 밀리는 문제가 있었음.
   이 영역은 페이지 넘김을 JS가 전담하므로, 브라우저의 기본
   터치 스크롤·핀치 동작을 아예 꺼서 겹치는 움직임을 없앰 */
.ebv-stage,
.ebv-book,
.ebv-page{
    touch-action:none;
    overscroll-behavior:none;
}

/* =========================================================
   페이지 상자 <-> 실제 이미지 크기 불일치 수정
   ---------------------------------------------------------
   .ebv-page는 height:100%로 고정되어 있었는데, 실제 <img>는
   좁은 화면에서 max-width:100%에 눌리면서 높이가 자동으로
   줄어들어 상자보다 작아지는 경우가 있었음(레터박싱 발생).
   이러면 퍼센트로 위치를 잡아둔 핫스팟(영상·사운드·링크)이
   상자 기준으로 계산되어, 실제 눈에 보이는 이미지 위치와
   어긋나 보임.

   페이지 이미지는 전부 A4 비율(약 0.7071)로 통일 생성되므로,
   상자 자체를 이 비율로 고정해 상자와 이미지가 화면 크기와
   무관하게 항상 정확히 일치하도록 처리함 */
.ebv-page{
    aspect-ratio:827 / 1170;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

.ebv-page img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
}

/* ---------------- 실사용 링크 핫스팟 (바로가기 버튼이 이미지 안에 그려져 있는 경우)
   테두리·펄스·배지 다 숨기고, 그냥 투명하게 클릭만 되도록 함 ---------------- */
.ebv-hotspot--bare{
    border:none !important;
    background:transparent !important;
    animation:none !important;
    box-shadow:none !important;
}
.ebv-hotspot--bare:hover{
    background:transparent !important;
}
.ebv-hotspot--bare .ebv-hotspot-badge{
    display:none !important;
}