* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; }
    body {
        background-color: #aba49c; /* 배경레이어(#bg-layer) 로딩 전/실패 시 대비 폴백 색상 */
        overflow: hidden;
        font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
        user-select: none;
    }
    /* 배경사진 전용 고정 레이어(v3.12) - body의 background-attachment:fixed는 모바일에서
       주소창 표시/숨김에 따라 실제 뷰포트 높이 계산이 흔들려 배경이미지가 위아래/좌우로
       잘려보이는 문제가 있었음(잘 알려진 모바일 브라우저 버그). position:fixed + inset:0 은
       뷰포트 크기 변화와 무관하게 항상 정확한 화면 전체 영역을 그대로 유지하므로 이 문제가
       구조적으로 발생하지 않음. */
    #bg-layer {
        position: fixed;
        inset: 0;
        z-index: -2;
        background-image: url('images/bg.webp');
        background-position: center center;
        background-size: cover; /* v3.13: 여백 색이 띠처럼 보이는 것을 없애기 위해 contain에서
            cover로 변경 - 화면 전체를 비율 유지하며 빈틈없이 채움(사진 비율과 화면 비율이
            다르면 넘치는 가장자리만 살짝 잘리고, 대신 별도 색 여백은 생기지 않음) */
        background-repeat: no-repeat;
        background-color: #aba49c; /* 이미지 로딩 전/실패 시에만 보이는 폴백 색상 */
        pointer-events: none;
    }
    /* 배경 위에 은은한 톤 정리(오버레이) - 책이 더 잘 보이도록 */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: linear-gradient(rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.24) 100%);
        pointer-events: none;
        z-index: 0;
    }

    #viewport {
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* v3.17: 모바일 주소창 변화에 실시간으로 정확히 맞춰지도록(지원 안 하는
            구버전 브라우저는 자동으로 위 100vh 값 유지) */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        perspective: 2400px;
        touch-action: pan-x; /* v3.12: 두 손가락 핀치줌은 JS가 직접 처리하도록 브라우저 기본
            핀치줌을 끄되, 기존 turn.js의 한 손가락 좌우 넘김 동작은 그대로 유지 */
        /* v3.37: 표지 화면이 옅어지는(fade-out, 0.5초) 동안 책 화면이 아직 불투명 1로
           고정돼 있으면, 둘 사이 어느 순간 배경(몸통 배경색=흰색)이 잠깐 그대로
           드러나 보여 "버퍼링/렉처럼 보이는 흰 화면"으로 오해받는 문제가 있었음.
           표지가 옅어지는 것과 정확히 같은 시간 동안 책 화면이 함께 짙어지도록
           (교차 페이드) 만들어서, 항상 둘 중 하나는 충분히 보이는 상태를 유지함 */
        opacity: 0; transition: opacity .5s ease;
    }
    #viewport.pinch-zoomed { touch-action: none; } /* 확대된 상태에서는 한 손가락도 이동(pan)으로 사용 */
    /* v3.41: PC 마우스 드래그 이동 중 커서를 손바닥(잡고 있는) 모양으로 바꿔서
       "지금 화면을 옮기는 중"임을 시각적으로 알려줌 */
    #viewport.book-pan-dragging { cursor: grabbing; }

    #flipbook { width: 1508px; height: 820px; position: relative; z-index: 3; transform-style: preserve-3d; }

    .page {
        /* v3.37 근본원인 수정: 사진이 실제 화면에 그려지기(페인트) 전까지 노출되는
           기본색이 순백색이라, 표지->내지 전환 순간처럼 화면에 처음 나타나는
           찰나에 흰색이 잠깐 보이면 "버퍼링/렉"처럼 보였음. 사진이 로드되기 전에도
           위화감 없이 자연스러워 보이도록, 순백색 대신 은은한 웜그레이로 변경 */
        background-color: #ece7dd;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        box-shadow: 0 14px 46px rgba(0,0,0,0.6), 0 3px 10px rgba(0,0,0,0.4);
    }

    /* 책 전체를 배경과 분리시켜주는 큰 앰비언트 그림자 (책 주변 전체 - 상하좌우 - 를 은은하게 감쌈) */
    #book-ambient-shadow {
        position: fixed;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.22) 42%, rgba(0,0,0,0) 72%);
        filter: blur(clamp(10px, calc(24px * var(--ui-scale, 1)), 34px));
        pointer-events: none;
        z-index: 1;
    }
    /* 책 바로 바깥 테두리를 따라 도는 좀 더 또렷한 그림자(배경 -> 그림자 -> 책 순서를 분명하게) */
    #book-frame-shadow {
        position: fixed;
        border-radius: 6px;
        box-shadow: 0 0 clamp(16px, calc(34px * var(--ui-scale, 1)), 46px) clamp(5px, calc(10px * var(--ui-scale, 1)), 14px) rgba(0,0,0,0.38);
        pointer-events: none;
        z-index: 2;
    }

    /* 색인 페이지의 제품 사진+캡션 클릭 영역 (호버시 살짝 강조) */
    #hotspot-layer { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
    #memo-dot-layer { position: fixed; inset: 0; pointer-events: none; z-index: 400; }
    .hotspot {
        position: absolute; cursor: pointer; pointer-events: auto;
        border-radius: 12px; box-sizing: border-box;
        border: 2px solid transparent;
        transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, z-index 0s;
    }

    /* 페이지 4 상단의 글자 목록(가나다순 색인) - 기존 방식 그대로 유지, 다른 항목 어둡게 하지 않음 */
    .hotspot-text:hover {
        background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(120,200,255,0.05));
        border-color: rgba(110,200,255,0.85);
        box-shadow: 0 8px 22px rgba(0,0,0,0.35), 0 0 0 4px rgba(110,200,255,0.16);
        transform: scale(1.02);
    }
    .hotspot-text.selected {
        background: linear-gradient(160deg, rgba(110,200,255,0.22), rgba(110,200,255,0.06));
        border-color: #5fd4ff;
        box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 0 5px rgba(95,212,255,0.32);
        animation: hotspotSelectPop .45s cubic-bezier(.3,1.4,.4,1);
    }

    /* 페이지 4 하단 사진 4개 + 페이지 5~11 사진/캡션 - 사진 크기에 맞춘 테두리 + 나머지는 어둡게(스포트라이트) */
    .hotspot-photo:hover {
        background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(120,200,255,0.05));
        border-color: rgba(110,200,255,0.85);
        box-shadow: 0 8px 22px rgba(0,0,0,0.35), 0 0 0 4px rgba(110,200,255,0.18);
        transform: scale(1.015);
    }
    .hotspot-photo.selected {
        background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(120,200,255,0.05));
        border-color: #5fd4ff;
        z-index: 50;
        box-shadow:
            0 0 0 9999px rgba(8,10,14,0.62),
            0 10px 30px rgba(0,0,0,0.5),
            0 0 0 4px rgba(110,200,255,0.22);
        transform: scale(1.015);
        animation: hotspotSelectPop .45s cubic-bezier(.3,1.4,.4,1);
    }

    .hotspot.selected::after{
        content:'✓';
        position:absolute; top:-9px; right:-9px; width:20px; height:20px; border-radius:50%;
        background: linear-gradient(160deg, #7fe3ff, #3fb8ea);
        color:#0b2430; font-size:11px; font-weight:900;
        display:flex; align-items:center; justify-content:center;
        box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 0 2px rgba(255,255,255,0.5);
        z-index: 51;
    }
    @keyframes hotspotSelectPop{
        0%   { transform: scale(0.94); }
        55%  { transform: scale(1.035); }
        100% { transform: scale(1); }
    }

    /* 책 아래 바닥 그림자 (입체감) - 위치/크기는 JS에서 책 크기에 맞춰 갱신 */
    #book-floor-shadow {
        position: fixed;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.08) 62%, rgba(0,0,0,0) 78%);
        filter: blur(clamp(2px, calc(5px * var(--ui-scale, 1)), 7px));
        pointer-events: none;
        z-index: 2;
    }
    #book-floor-shadow-soft {
        position: fixed;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0) 72%);
        filter: blur(clamp(5px, calc(12px * var(--ui-scale, 1)), 17px));
        pointer-events: none;
        z-index: 1;
    }

    /* 책 뒤에 항상 깔리는 종이색 배경 - 페이지 전환/이동 중 아주 짧은 순간이라도
       배경(방 사진)이 비쳐 보이는 "깜빡임" 현상을 원천적으로 막아줌 */
    #book-backing {
        position: fixed;
        background: #f4f1ea;
        pointer-events: none;
        z-index: 3;
        border-radius: 2px;
    }

    /* 펼쳐진 책 중앙(제본선) 그림자 - 입체감 표현 (더 진하고 뚜렷하게) */
    #book-gutter-shadow {
        position: fixed;
        background: linear-gradient(90deg,
            rgba(0,0,0,0) 0%, rgba(0,0,0,0.20) 32%, rgba(0,0,0,0.42) 46%, rgba(0,0,0,0.58) 50%, rgba(0,0,0,0.42) 54%, rgba(0,0,0,0.20) 68%, rgba(0,0,0,0) 100%);
        pointer-events: none;
        z-index: 4;
    }

    /* 상단 슬림 메뉴 바 */
    #top-bar {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 20;
        height: 48px;
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px;
        z-index: 9000;
    }
    #top-bar .brand { font-size: 15px; font-weight: 700; color: #333; letter-spacing: 0.5px; }
    #top-bar .brand span { color: #4a9c4a; }
    #top-bar { display: none !important; } /* 브랜드바/구버전 페이지표시는 화면에서 항상 숨김 */
    /* 새 페이지 표시 - 화면 상단 정중앙, 잘 보이는 색상(어두운 배경 위 흰 글자 + 그림자) */
    #top-page-indicator-center{
        position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
        /* v3.25: 기본값(JS가 아직 위치를 계산하기 전, 예: 표지화면)에서도 아래
           "클릭하여 카탈로그 열기" 버튼과 나란히 중앙정렬되도록 transform 추가 -
           이전엔 left:50%만 있고 translateX가 없어서 표지화면에서 좌측으로
           치우쳐 보였음 */
        font-size: 13px; font-weight: 700; color: #fff;
        background: rgba(20,20,24,0.62); backdrop-filter: blur(10px);
        padding: 6px 10px 6px 16px; border-radius: 14px; letter-spacing: 0.3px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        z-index: 9000;
        display: flex; align-items: center; gap: 8px;
    }
    .topbar-divider{ width: 1px; height: 16px; background: rgba(255,255,255,0.25); }
    /* v3.20: 세로화면에서 확대 중일 때만 화면 맨 위로 고정 - JS가 계산해서 넣는
       inline top/left 값(책 위치 기준)보다 우선 적용되도록 !important 사용 */
    #top-page-indicator-center.zoom-badge-top{
        top: 10px !important; left: 50% !important; transform: translateX(-50%) !important;
    }
    /* v3.23: "페이지" 글자 라벨은 삭제하고, 대신 페이지 숫자 자체를 눌러서
       이동하게 변경 - 숫자에 살짝 밑줄을 줘서 눌러도 되는 곳임을 알 수 있게 함 */
    #top-page-indicator-text{
        cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
        text-decoration-color: rgba(255,255,255,0.4);
    }
    /* 배지 안에 들어간 확대버튼은 별도 원형 배경 없이 아이콘만 (배지 자체가 이미 배경 역할) */
    #top-page-indicator-center .mobile-zoom-btn{
        position: static; width: auto; height: auto;
        background: none; border: none; backdrop-filter: none;
        padding: 2px;
    }
    #top-page-indicator-center .mobile-zoom-btn svg{ width: 16px; height: 16px; stroke: #fff; }
    #top-page-indicator {
        font-size: 13px; color: #555; background: rgba(0,0,0,0.06);
        padding: 5px 14px; border-radius: 14px; font-weight: 600;
    }

    .flip-arrow {
        position: fixed; top: 50%; transform: translateY(-50%);
        width: clamp(30px, calc(62px * var(--ui-scale, 1)), 78px);
        height: clamp(30px, calc(62px * var(--ui-scale, 1)), 78px);
        border-radius: 50%;
        background:
            linear-gradient(155deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.10) 100%),
            rgba(40,40,46,0.38);
        backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
        border: 1px solid rgba(255,255,255,0.30);
        box-shadow: 0 8px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.35);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; z-index: 500;
        transition: background 0.18s ease, transform 0.15s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .flip-arrow:hover { background: linear-gradient(155deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.10) 100%), rgba(40,40,46,0.5); transform: translateY(-50%) scale(1.08); }

    /* v3.37: 처음/끝 페이지로 바로 이동하는 신규 버튼 - 기존 한 장씩 넘기는
       화살표(회색, 위)와 확실히 구분되도록 빨간색 배경 + 더 작은 크기로 표시.
       텍스트 없이 아이콘(화살표+막대)만으로 "끝까지 이동"을 나타냄 */
    .jump-arrow{
        width: clamp(20px, calc(38px * var(--ui-scale, 1)), 48px);
        height: clamp(20px, calc(38px * var(--ui-scale, 1)), 48px);
        /* v3.39: 사용자 확인 - 빨간색 대신 기존 페이지넘김 화살표(.flip-arrow)와
           똑같은 회색 계열로 통일 */
        background: linear-gradient(155deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.10) 100%), rgba(40,40,46,0.55);
        border-color: rgba(255,255,255,0.30);
        /* v3.37: 부모(.flip-arrow)의 transform 트랜지션(0.15초)이, 이 버튼이
           처음 나타나는 순간 기존 기본값(translateY(-50%))에서 새 위치(none)로
           전환되는 애니메이션으로 오작동해서 위치가 살짝 어긋나 보이던 문제 발견
           - 이 버튼은 애니메이션이 필요 없으므로 transition 자체를 꺼서 항상
           즉시 정확한 위치에 나타나게 함 */
        transition: none;
    }
    .jump-arrow:hover{ background: linear-gradient(155deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.10) 100%), rgba(60,60,66,0.6); }
    .flip-arrow.jump-arrow svg{ fill: #eee; } /* v3.39: stroke 방식 대신 채워진 아이콘(fill)으로 그려서 색상도 fill로 지정. .flip-arrow svg의 fill:none을 확실히 덮어쓰도록 선택자를 더 구체적으로 지정 */

    /* v3.17: 확대 중에만 나타나는 "원래대로(100%) 돌아가기" 버튼 - 화면 하단 중앙에
       고정. #viewport 밖에 있어서 확대 transform의 영향을 받지 않고 항상 제 위치/크기를 유지함 */
    #book-zoom-reset-btn{
        position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        display: flex; align-items: center; gap: 6px;
        padding: 10px 18px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.30);
        background: rgba(30,30,34,0.78); backdrop-filter: blur(14px) saturate(180%);
        color:#fff; font-size: 14px; font-weight: 600; cursor: pointer;
        box-shadow: 0 8px 22px rgba(0,0,0,0.35);
        z-index: 9600; /* 확대버튼(9500)보다 위, 항상 최상단 조작영역 */
    }
    #book-zoom-reset-btn:hover{ background: rgba(45,45,50,0.85); }
    /* v3.28: 돋보기 전체화면(zoom-overlay) 전용 100%복귀 버튼 - 위 책화면 버튼과 동일한
       디자인/위치(화면 하단 중앙 고정) */
    #zoom-overlay-reset-btn{
        position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        display: flex; align-items: center; gap: 6px;
        padding: 10px 18px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.30);
        background: rgba(30,30,34,0.78); backdrop-filter: blur(14px) saturate(180%);
        color:#fff; font-size: 14px; font-weight: 600; cursor: pointer;
        box-shadow: 0 8px 22px rgba(0,0,0,0.35);
        z-index: 10600;
    }
    #zoom-overlay-reset-btn:hover{ background: rgba(45,45,50,0.85); }
    .flip-arrow:active,
    .flip-arrow.pressed {
        transform: translateY(-50%) scale(0.94);
        border-color: rgba(255,217,74,0.75);
        box-shadow: 0 8px 22px rgba(0,0,0,0.32), 0 0 0 3px rgba(255,217,74,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .flip-arrow.pressed svg { stroke: #ffd94a; }
    .flip-arrow svg { width: clamp(13px, calc(24px * var(--ui-scale, 1)), 30px); height: clamp(13px, calc(24px * var(--ui-scale, 1)), 30px); fill: none; stroke: #fff; stroke-width: 2.3; opacity: 0.95; transition: stroke .15s ease; }
    #arrow-prev { left: clamp(8px, calc(32px * var(--ui-scale, 1)), 40px); }
    #arrow-next { right: clamp(8px, calc(32px * var(--ui-scale, 1)), 40px); }
    .flip-arrow.disabled { opacity: 0.25; cursor: default; pointer-events: none; }

    /* 책 좌/우 바깥 가장자리 클릭 시 페이지 넘김 (투명 클릭 영역, JS로 위치 갱신) */
    #edge-zone-left, #edge-zone-right { position: fixed; cursor: pointer; z-index: 6; }

    .offline-badge{
        font-size:10px; color:#4a9c4a; letter-spacing:1px;
        border:1px solid rgba(74,156,74,0.4); padding:3px 8px; border-radius:10px;
        margin-left: 10px;
    }
    .version-badge{
        font-size:10px; color:#888; letter-spacing:0.5px;
        border:1px solid rgba(150,150,150,0.4); padding:3px 8px; border-radius:10px;
        margin-left: 6px;
    }

    /* ===== 상단바 아이콘 버튼 (확대) ===== */
    #top-bar-right{ display:flex; align-items:center; }
    #top-bar .icon-group{ display:flex; align-items:center; gap:8px; margin-right:14px; }
    .icon-btn{
        width:36px; height:36px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        cursor:pointer; background:rgba(0,0,0,0.05);
        border:1px solid rgba(0,0,0,0.08);
        transition: background .15s ease, transform .15s ease;
    }
    .icon-btn:hover{ background: rgba(74,156,74,0.16); transform: scale(1.06); }
    .icon-btn svg{ width:18px; height:18px; stroke:#444; fill:none; stroke-width:2; }

    /* ===================================================================
       디자인 토큰 (심플 & 모던, 다크 글래스 테마)
    =================================================================== */
    :root{
        --bar-bg: rgba(0,0,0,0.65);           /* 하단 메뉴 바: 100% - 35% */
        --panel-bg: rgba(18,18,20,0.60);      /* 팝업 박스: 100% - 40% */
        --panel-border: rgba(255,255,255,0.14);
        --accent: #ffd94a;                    /* 선택됨 표시: 노랑 + 굵게 */
        --text-main: rgba(255,255,255,0.94);
        --text-sub: rgba(255,255,255,0.55);
        --chip-bg: rgba(255,255,255,0.08);
        --chip-bg-hover: rgba(255,255,255,0.16);
    }

    /* ===== 하단 메뉴 바: 목차 / 검색 / 페이지 / 메모 / 전체 (가운데 정렬된 컴팩트 독) ===== */
    #bottombar{
        position:fixed; left:50%; bottom: clamp(8px, calc(22px * var(--ui-scale, 1)), 28px); transform:translateX(-50%);
        display:flex; align-items:center; gap: clamp(0px, calc(2px * var(--ui-scale, 1)), 3px);
        background:
            linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.06) 100%),
            rgba(22,22,26,0.55);
        backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%);
        border:1px solid rgba(255,255,255,0.26);
        border-radius: clamp(14px, calc(30px * var(--ui-scale, 1)), 34px);
        padding: clamp(4px, calc(8px * var(--ui-scale, 1)), 10px) clamp(5px, calc(10px * var(--ui-scale, 1)), 12px);
        box-shadow:
            0 16px 40px rgba(0,0,0,0.4),
            0 0 0 1px rgba(255,255,255,0.03),
            inset 0 1px 0 rgba(255,255,255,0.32),
            inset 0 0 24px rgba(255,255,255,0.03);
        z-index:9000;
    }
    .barBtn{
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap: clamp(1px, calc(4px * var(--ui-scale, 1)), 5px); background:none; border:1px solid transparent; cursor:pointer;
        color:var(--text-main); font-family:inherit;
        padding: clamp(5px, calc(9px * var(--ui-scale, 1)), 11px) clamp(7px, calc(17px * var(--ui-scale, 1)), 20px);
        border-radius: clamp(9px, calc(20px * var(--ui-scale, 1)), 23px);
        transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
    }
    .barBtn:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.10); }
    .barBtn:active{ transform: scale(0.94); }
    .barBtn svg{ width: clamp(14px, calc(21px * var(--ui-scale, 1)), 25px); height: clamp(14px, calc(21px * var(--ui-scale, 1)), 25px); fill:none; stroke:currentColor; stroke-width:1.8; }

    /* v3.35: 가로화면 전용 "좌측 캡슐형" 레이아웃 - 돋보기/페이지번호 배지와
       하단바(목차/검색/메모)를 화면 왼쪽에 세로로 나란히 쌓아 하나의 캡슐처럼
       보이게 함. 세로화면에는 전혀 영향 없음(이 클래스는 가로화면일 때만 JS가
       붙임)
       v3.36: 사용자 확인에 따라 폭을 좁히고(고정폭, 글자는 안 잘리게 최소여백만
       유지), 아이콘 아래 글자를 배치하고, 세로 길이를 책 세로길이와 맞춰
       일체감 있게 보이도록 전면 수정 */
    #top-page-indicator-center.landscape-capsule{
        flex-direction: column; align-items: center; justify-content: center;
        gap: 8px; padding: 10px 4px; width: 40px;
        border-radius: 18px 18px 0 0;
    }
    #top-page-indicator-center.landscape-capsule #top-page-indicator-text{
        writing-mode: horizontal-tb; text-align: center; font-size: 10px;
        line-height: 1.15; word-break: break-word;
        /* v3.36 원인: flex 자식은 기본적으로 min-width:auto라서, 부모 폭을
           40px로 줄여도 텍스트 자체(예: "1 / 213")의 한 줄 폭만큼은 절대
           안 줄어들고 그만큼 캡슐 전체가 옆으로 넘쳐 보였음(min-width:0으로
           명시해야 실제로 줄바꿈되며 폭 안에 들어감) */
        min-width: 0; width: 100%;
    }
    #top-page-indicator-center.landscape-capsule .topbar-divider{
        width: 24px; height: 1px;
    }
    #top-page-indicator-center.landscape-capsule .mobile-zoom-btn{
        flex-direction: column;
    }
    #bottombar.landscape-capsule{
        flex-direction: column; align-items: center; justify-content: center;
        width: 40px; gap: 2px;
        border-radius: 0 0 18px 18px;
    }
    #bottombar.landscape-capsule .barBtn{
        flex-direction: column; gap: 2px; padding: 6px 2px; width: 100%;
        min-width: 0; /* v3.36: 위와 같은 이유로 여기도 함께 명시(전수점검) */
    }
    .barBtn span{ font-size: clamp(8px, calc(10.5px * var(--ui-scale, 1)), 12.5px); letter-spacing:0.3px; font-weight:500; }

    /* ===== 공용 오버레이 패널 (목차/검색/페이지/메모) - 화면 가운데 팝업 ===== */
    #overlay{
        position:fixed; inset:0; background:rgba(10,10,14,0.42);
        backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
        z-index:20000; display:flex; align-items:center; justify-content:center;
        padding: 20px;
    }
    #overlay.hidden{ display:none; }
    #panel{
        position:relative;
        width:100%; max-width:440px; max-height:78vh;
        background:
            linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.05) 60%, rgba(0,0,0,0.08) 100%),
            rgba(24,24,28,0.58);
        backdrop-filter: blur(34px) saturate(190%); -webkit-backdrop-filter: blur(34px) saturate(190%);
        border:1px solid rgba(255,255,255,0.28);
        border-radius:28px;
        display:flex; flex-direction:column; overflow:hidden;
        box-shadow:
            0 30px 80px rgba(0,0,0,0.55),
            0 0 0 1px rgba(255,255,255,0.04),
            0 0 46px rgba(255,217,74,0.07),
            inset 0 1px 0 rgba(255,255,255,0.35),
            inset 0 0 40px rgba(255,255,255,0.03);
        animation: panelUp .22s cubic-bezier(.2,.8,.3,1);
    }
    @keyframes panelUp{ from{ transform:scale(0.94) translateY(14px); opacity:0; } to{ transform:scale(1) translateY(0); opacity:1; } }
    #panelHeader{
        position:relative;
        padding:19px 22px; margin:0 4px;
        border-bottom:1px solid rgba(255,255,255,0.10);
        display:flex; align-items:center; justify-content:space-between;
        cursor:grab; user-select:none;
    }
    #panelHeader::after{
        content:''; position:absolute; left:22px; right:22px; bottom:-1px; height:1px;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
    }
    #panelHeader:active{ cursor:grabbing; }
    #panelTitle{ font-size:16.5px; font-weight:800; color:var(--text-main); letter-spacing:0.2px; }
    #panelClose{
        border:1px solid rgba(255,255,255,0.14);
        background:rgba(255,255,255,0.08); color:var(--text-main); font-size:12px;
        padding:7px 15px; border-radius:20px; cursor:pointer; font-weight:600;
        transition: background .15s ease, transform .1s ease;
    }
    #panelClose:hover{ background:rgba(255,255,255,0.18); }
    #panelClose:active{ transform: scale(0.95); }
    #panelBody{ padding:18px 22px 26px; overflow-y:auto; flex:1; }

    /* 카테고리 / 정렬 탭 (칩) - 선택시 노랑+굵게 */
    /* v3.42 근본원인 수정: 카테고리가 5개일 때는 한 줄에 다 들어가서 문제가
       없었는데, 이번에 4개(시스템/손잡이/몸통/영상)를 추가해 9개가 되면서
       가로스크롤 방식(nowrap+overflow-x)으로는 화면 밖으로 넘친 나머지가
       안 보이고, 게다가 스크롤바까지 숨겨놔서 "옆으로 더 있다"는 것 자체를
       알 수 없었음(데이터는 정상이었지만 이 CSS 때문에 안 보인 것) - 다
       안 들어가면 자동으로 다음 줄로 넘어가도록(줄바꿈) 변경해서 전부
       확실히 보이게 함 */
    .chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
    .chip{
        padding:7px 12px; border-radius:16px; background:var(--chip-bg);
        color:var(--text-main); font-size:12px; cursor:pointer; font-weight:500;
        transition: background .15s ease, color .15s ease, transform .1s ease;
        border:1px solid rgba(255,255,255,0.08);
        white-space:nowrap; flex-shrink:0;
    }
    .chip:hover{ background:var(--chip-bg-hover); }
    .chip:active{ transform: scale(0.96); }
    .chip.active{
        color:var(--accent); font-weight:800;
        background:rgba(255,217,74,0.16); border-color:rgba(255,217,74,0.45);
        box-shadow: 0 0 0 1px rgba(255,217,74,0.15), 0 4px 12px rgba(255,217,74,0.1);
    }

    /* 목차/검색 리스트 */
    .panel-search-input{
        width:100%; padding:12px 16px; border-radius:22px;
        border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.05);
        box-shadow: inset 0 1px 4px rgba(0,0,0,0.15);
        color:var(--text-main); font-size:13px; outline:none; margin-bottom:12px; box-sizing:border-box;
        transition: border-color .15s ease, background .15s ease;
    }
    .panel-search-input::placeholder{ color:var(--text-sub); }
    .panel-search-input:focus{ border-color:var(--accent); background:rgba(255,255,255,0.08); }
    .panel-list{ list-style:none; margin:0; padding:0; }
    .panel-list li{
        padding:8px 14px; border-radius:10px; cursor:pointer;
        display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px;
        transition: background .12s ease, transform .1s ease;
    }
    .panel-list li:hover{ background:rgba(255,255,255,0.09); transform: translateX(2px); }
    .panel-list li .item-label{ font-size:13.5px; color:var(--text-main); font-weight:700; }
    .panel-list li .item-badge{
        font-size:11px; color:#1c1c1e; background:var(--accent); padding:2px 9px;
        border-radius:9px; flex-shrink:0; font-weight:800;
    }
    .panel-no-result{ padding:24px 10px; color:var(--text-sub); font-size:13px; text-align:center; }

    /* v3.46: 검색결과 - 엑셀 데이터(재질/색상/손잡이) 미리보기 줄. 제품명+페이지
       배지는 한 줄, 그 아래 재질/색상/손잡이 요약을 별도 줄로 표시 */
    .panel-list li .item-snippet{
        flex-basis:100%; font-size:12px; color:var(--text-sub); line-height:1.4;
        white-space:normal; word-break:break-word;
    }
    .panel-list li .item-snippet mark{
        background:var(--accent); color:#1c1c1e; padding:0 2px; border-radius:3px;
    }
    .panel-list li .item-label mark{
        background:var(--accent); color:#1c1c1e; padding:0 2px; border-radius:3px;
    }

    /* 페이지 이동 패널 */
    .page-slider-wrap{ padding: 6px 4px 18px; }
    .page-slider-value{
        text-align:center; font-size:34px; font-weight:800; color:var(--accent);
        margin-bottom:6px; font-variant-numeric: tabular-nums;
    }
    .page-slider-value span{ font-size:15px; color:var(--text-sub); font-weight:500; }
    #page-slider{
        width:100%; accent-color:#ffd94a; height:6px; cursor:pointer;
    }
    .page-jump-row{ display:flex; gap:8px; margin:16px 0 14px; }
    .page-jump-row input{
        flex:1; padding:12px 14px; border-radius:12px;
        border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06);
        color:var(--text-main); font-size:14px; outline:none; box-sizing:border-box;
    }
    .page-jump-row input:focus{ border-color:var(--accent); }
    .page-jump-row button{
        padding:12px 20px; border-radius:12px; border:none; background:var(--accent);
        color:#1c1c1e; font-size:13px; cursor:pointer; font-weight:800;
    }
    .page-jump-row button:hover{ filter:brightness(1.08); }
    .page-jump-hint{ font-size:12px; color:var(--text-sub); margin-bottom:12px; text-align:center; }
    .page-jump-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
    .page-jump-grid div{
        padding:11px 4px; text-align:center; border-radius:10px; background:var(--chip-bg);
        cursor:pointer; font-size:13px; color:var(--text-main); font-weight:600;
        transition: background .12s ease, color .12s ease;
    }
    .page-jump-grid div:hover{ background:rgba(255,217,74,0.16); color:var(--accent); }
    .page-jump-grid div.current{ color:var(--accent); font-weight:800; background:rgba(255,217,74,0.14); }

    /* 메모 패널 */
    .memo-add-box{
        background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
        border-radius:14px; padding:14px; margin-bottom:16px;
    }
    .memo-current-page{ font-size:12.5px; color:var(--text-sub); margin-bottom:10px; }
    .memo-current-page b{ color:var(--accent); }
    .memo-page-picker{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
    .memo-page-value{
        font-size:16px; font-weight:800; color:var(--accent); min-width:64px;
        font-variant-numeric: tabular-nums; text-align:center;
    }
    .memo-page-value span{ font-size:11.5px; color:var(--text-sub); font-weight:500; }
    .memo-page-picker input[type="range"]{ flex:1; accent-color:#ffd94a; height:6px; cursor:pointer; }
    .memo-page-input{
        width:60px; padding:8px 6px; border-radius:10px; text-align:center;
        border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06);
        color:var(--text-main); font-size:13px; outline:none; box-sizing:border-box;
    }
    .memo-page-input:focus{ border-color:var(--accent); }
    .color-row{ display:flex; gap:9px; margin-bottom:12px; }
    .color-dot-choice{
        width:24px; height:24px; border-radius:50%; cursor:pointer;
        border:2px solid transparent; box-sizing:border-box;
        transition: transform .1s ease;
    }
    .color-dot-choice:hover{ transform:scale(1.12); }
    .color-dot-choice.selected{ border-color:#fff; box-shadow:0 0 0 2px var(--accent); }
    #memo-textarea{
        width:100%; min-height:80px; padding:12px; border-radius:12px;
        border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06);
        color:var(--text-main); font-size:13.5px; font-family:inherit; resize:vertical;
        outline:none; box-sizing:border-box; margin-bottom:10px;
    }
    #memo-textarea::placeholder{ color:var(--text-sub); }
    #memo-textarea:focus{ border-color:var(--accent); }
    .memo-add-btn{
        width:100%; padding:11px; border-radius:12px; border:none; background:var(--accent);
        color:#1c1c1e; font-size:13px; cursor:pointer; font-weight:800;
    }
    .memo-add-btn:hover{ filter:brightness(1.08); }
    .memo-list-title{ font-size:12px; color:var(--text-sub); margin:16px 0 8px; letter-spacing:0.3px; }
    .memo-item{
        display:flex; align-items:flex-start; gap:10px; padding:11px 10px;
        border-radius:12px; cursor:pointer; transition: background .12s ease;
    }
    .memo-item:hover{ background:rgba(255,255,255,0.07); }
    .memo-item .memo-color-dot{
        width:12px; height:12px; border-radius:50%; margin-top:4px; flex-shrink:0;
    }
    .memo-item .memo-item-body{ flex:1; min-width:0; }
    .memo-item .memo-item-page{ font-size:11px; color:var(--accent); font-weight:800; margin-bottom:2px; }
    .memo-item .memo-item-text{ font-size:13px; color:var(--text-main); word-break:break-word; }
    .memo-item .memo-item-del{
        color:var(--text-sub); font-size:16px; cursor:pointer; padding:2px 6px; flex-shrink:0;
    }
    .memo-item .memo-item-del:hover{ color:#ff6b6b; }
    .memo-empty-hint{ font-size:12.5px; color:var(--text-sub); text-align:center; padding:16px 4px; }

    /* 페이지 모서리 메모 표시 점 (책 위에 표시, 기존 대비 2배 크기 + 드래그 가능 + 알림 펄스) */
    .memoDot{
        position:fixed; z-index:9; width:22px; height:22px; border-radius:50%;
        box-shadow:0 0 0 4px rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.45);
        font-size:0; cursor:grab; pointer-events:auto;
        /* v3.24: 손가락으로 눌러서 끌 때, 브라우저가 이 터치를 화면 스크롤 등
           자기 기본 동작으로 먼저 가로채가서 드래그 이동이 안 되던 문제 수정 -
           이 아이콘의 터치는 전부 우리 코드가 직접 처리하도록 함(핀치줌 때와
           같은 종류의 문제였음) */
        touch-action: none;
    }
    .memoDot.hidden{ display:none; }
    .memoDot::after{
        content:''; position:absolute; inset:-6px; border-radius:50%;
        border:2px solid rgba(255,180,0,0.55);
        animation: memoDotPulse 1.6s ease-out infinite;
        pointer-events:none;
    }
    .memoDot.dragging{ cursor:grabbing; }
    .memoDot.dragging::after{ animation-play-state: paused; opacity:0; }
    @keyframes memoDotPulse{
        0%   { transform:scale(0.75); opacity:0.9; }
        70%  { transform:scale(1.5); opacity:0; }
        100% { transform:scale(1.5); opacity:0; }
    }

    /* 메모 아이콘 클릭 시 바로 보이는 말풍선 (드래그와 겹치지 않는 별도 레이어) */
    #memo-quickview{
        position:fixed; z-index:10500; max-width:260px; min-width:180px;
        background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05)), var(--panel-bg);
        backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
        border:1px solid rgba(255,255,255,0.22); border-radius:14px;
        box-shadow:0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
        padding:10px 12px; animation: panelUp .16s ease;
    }
    .memo-quickview-title{
        font-size:12px; font-weight:800; color:var(--accent); margin-bottom:8px;
        display:flex; align-items:center; justify-content:space-between;
    }
    .memo-quickview-close{ cursor:pointer; color:var(--text-sub); font-weight:400; }
    .memo-quickview-close:hover{ color:#fff; }
    .memo-quickview-list{ display:flex; flex-direction:column; gap:7px; max-height:200px; overflow-y:auto; }
    .memo-quickview-item{ display:flex; align-items:flex-start; gap:7px; }
    .memo-quickview-dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex-shrink:0; display:inline-block; }
    .memo-quickview-text{ font-size:12.5px; color:var(--text-main); word-break:break-word; }
    .memo-quickview-delete{
        margin-top:10px; width:100%; padding:8px; border-radius:10px;
        border:1px solid rgba(255,107,107,0.4); background:rgba(255,107,107,0.12);
        color:#ff8a8a; font-size:12px; font-weight:700; cursor:pointer;
        transition: background .15s ease;
    }
    .memo-quickview-delete:hover{ background:rgba(255,107,107,0.22); }

    /* ===== 확대(돋보기) 오버레이 ===== */
    .zoom-overlay{
        position:fixed; inset:0; background:rgba(10,10,10,0.92);
        z-index: 25000; display:none; flex-direction:column;
    }
    .zoom-overlay.show{ display:flex; }
    .zoom-toolbar{
        height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
        gap:10px; background:rgba(0,0,0,0.5); border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .zbtn{
        color:#eee; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
        padding:8px 16px; border-radius:18px; font-size:13px; cursor:pointer; user-select:none;
    }
    .zbtn:hover{ background:rgba(255,255,255,0.18); }
    .zbtn.zoom-close{ color:#ffd166; }
    .zoom-viewport{
        flex:1; overflow:hidden; position:relative; cursor:grab;
        display:flex; align-items:center; justify-content:center;
        touch-action: none; /* v3.12: 브라우저 기본 핀치줌(전체화면 확대)이 앱 자체 핀치 로직과
            충돌해서 확대가 먹통이거나 화면 전체가 어긋나게 커지던 문제 수정 - 이 영역의 터치
            제스처는 전부 JS가 직접 제어하도록 브라우저 기본 동작을 끔 */
    }
    .zoom-viewport.dragging{ cursor:grabbing; }
    .zoom-canvas{
        display:flex; gap:0; will-change:transform; box-shadow:0 20px 60px rgba(0,0,0,0.6);
    }
    .zoom-canvas img{ height: 78vh; display:block; user-select:none; -webkit-user-drag:none; }
    .zoom-hint{
        position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
        font-size:11.5px; color:rgba(255,255,255,0.55); letter-spacing:0.3px;
    }

    /* 확대 버튼: 상단 브랜드바를 없앤 대신, 모든 화면 크기에서 항상 이 버튼으로 확대 기능 제공 */
    .mobile-zoom-btn{
        display:flex; position:fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        z-index:9500;
        width:36px; height:36px; border-radius:50%;
        background: rgba(30,30,34,0.55); backdrop-filter: blur(14px);
        border:1px solid rgba(255,255,255,0.22);
        align-items:center; justify-content:center; cursor:pointer;
    }
    .mobile-zoom-btn svg{ width:17px; height:17px; stroke:#fff; }

    /* ===== 모바일 대응 ===== */
    @media (max-width: 700px), (max-height: 700px){
        #top-bar{ display:none; }
        .icon-btn{ width:30px; height:30px; }
        .icon-btn svg{ width:15px; height:15px; }
        /* 화살표/하단바 자체 크기는 --ui-scale로 이미 책 크기에 비례해서 조정되므로,
           여기서는 노치 등 안전 영역만큼의 위치 보정만 추가로 적용합니다. */
        #arrow-prev{ left: calc(8px + env(safe-area-inset-left, 0px)); }
        #arrow-next{ right: calc(8px + env(safe-area-inset-right, 0px)); }
        #bottombar{ bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
        #panel{ max-width:100%; }
        .zoom-canvas img{ height:60vh; }
    }

    /* ===================== 표지(시작화면) ===================== */
    #cover-screen{
        position:fixed; inset:0; z-index: 8000;
        display:flex; align-items:center; justify-content:center;
        background: transparent;
        opacity:1; transition: opacity .5s ease;
    }
    #cover-screen.fade-out{ opacity:0; pointer-events:none; }
    #cover-screen .cover-stage{
        position:relative;
        cursor:pointer;
    }
    /* 흰색 매트/프레임 - 참고 이미지처럼 여백을 두고 카드 형태로 (크기는 JS에서 책 크기와 동일하게 맞춤) */
    #cover-screen .cover-frame{
        position:relative;
        background:#fff;
        padding: 14px 14px 14px 20px;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow:
            0 2px 5px rgba(0,0,0,0.12),
            0 clamp(9px, calc(18px * var(--ui-scale, 1)), 24px) clamp(22px, calc(45px * var(--ui-scale, 1)), 60px) rgba(0,0,0,0.30),
            0 clamp(3px, calc(6px * var(--ui-scale, 1)), 9px) clamp(8px, calc(16px * var(--ui-scale, 1)), 22px) rgba(0,0,0,0.20);
    }
    #cover-screen .cover-img{
        display:block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius:1px;
    }
    #cover-screen .cover-floor-shadow{
        position:absolute; left:6%; right:6%; bottom:-30px; height:36px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.14) 45%, rgba(0,0,0,0) 75%);
        filter: blur(clamp(2px, calc(5px * var(--ui-scale, 1)), 7px));
    }
    #cover-screen .cover-hint{
        position:absolute; left:50%; bottom:-64px; transform:translateX(-50%);
        color:#fff; font-size:13px; letter-spacing:1px;
        background:rgba(0,0,0,0.45); padding:9px 20px; border-radius:20px;
        white-space:nowrap; animation: coverHintPulse 1.8s ease-in-out infinite;
    }
    #cover-screen .cover-version-hint{
        position:absolute; left:8px; top:-28px;
        color:rgba(255,255,255,0.55); font-size:11px; letter-spacing:0.5px;
    }
    @keyframes coverHintPulse{ 0%,100%{opacity:.75;} 50%{opacity:1;} }

    /* ===================== 책 입체감 - 오른쪽 책 두께감 (배경 -> 그림자 -> 책두께감 -> 책 순서) ===================== */
    /* 종이가 겹쳐 쌓인 두께 표현 - 책 오른쪽 가장자리 "바깥"(책과 배경 사이)에 위치 */
    #book-thickness-right{
        position:fixed; pointer-events:none; z-index:3;
        background: repeating-linear-gradient(
            90deg, #f0e9d8 0px, #f0e9d8 2px, #d9cca9 2px, #d9cca9 3px, #c3b48c 3px, #c3b48c 4px);
        box-shadow: 3px 0 12px rgba(0,0,0,0.4), inset -1px 0 1px rgba(255,255,255,0.4), inset 1px 0 2px rgba(0,0,0,0.25);
        border-radius: 0 5px 5px 0;
    }



/* ===================== 영상 안내 표시 (사진 테두리 강조 + "영상보기" 펄스 배지) ===================== */
/* 사진 영역 전체를 감싸는 투명한 클릭 영역 + 파란 테두리로 "클릭 가능"을 알림 */
.video-play-badge{
    position:absolute; z-index:6; cursor:pointer;
    border-radius:6px;
    box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(55,138,221,0); /* 평소엔 테두리 없음 */
    background:transparent;
    transition: box-shadow .15s ease;
}
/* 사진 위에 마우스를 올리거나(호버) 터치하는 동안에만 파란 테두리가 나타남 */
.video-play-badge:hover, .video-play-badge:active, .video-play-badge:focus-visible{
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 4px var(--text-accent, #378ADD);
}
/* badge-only: 사진 전체를 감싸는 큰 테두리 없이, "영상보기" 펄스 배지만 항상 표시 */
.video-play-badge.badge-only,
.video-play-badge.badge-only:hover,
.video-play-badge.badge-only:active,
.video-play-badge.badge-only:focus-visible{
    box-shadow: none !important;
}
/* 사진 좌상단에 "영상보기" 문구가 있는 알약 모양 배지, 펄스 효과로 시선을 끔 */
.video-play-badge::after{
    content: "▶  " attr(data-label);
    position:absolute; top:6px; left:6px;
    background: var(--text-accent, #378ADD);
    color:#fff; font-weight:500;
    /* 고정 px이면 책이 커지는 태블릿/PC와 작아지는 폰에서 배지가 상대적으로
       다른 크기로 보였음 - 다른 UI(화살표/하단바 등)와 동일하게 화면 배율에 비례하도록 수정.
       v3.23: 최소크기(예전 9px)가 너무 일찍 걸려서, 폰처럼 책이 많이 작아지는 화면에서
       책은 계속 작아지는데 배지 글자만 못 작아져서 상대적으로 커 보이던 문제 완화 -
       최소값을 7px로 낮춤. v3.24: 책 비율과 더 가깝게 맞추기 위해 6px로 한 단계 더 낮춤
       (과도하게 낮추면 글자가 안 보일 수 있어 6px을 최소 하한으로 유지) */
    font-size: clamp(6px, calc(11px * var(--ui-scale, 1)), 15px);
    border-radius:12px;
    padding: calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    display:flex; align-items:center;
    white-space:nowrap;
    transform-origin: top left;
    /* v3.21: 책 화면을 핀치줌으로 확대하면 이 배지도 같이 커져서 헷갈렸음.
       --book-inverse-zoom(책 확대배율의 역수, 평소엔 1)을 곱해서 책이 커진 만큼
       반대로 줄여, 화면에 보이는 배지 크기는 항상 원래 그대로 유지되게 함
       (위치는 그대로 콘텐츠를 따라감 - 부모 요소의 left/top만으로 결정되므로 영향 없음) */
    animation: videoBadgePulse 1.8s ease-in-out infinite;
}
/* 배지 자체가 작아지는 화면(폰 등)에서는 "영상보기" 대신 짧게 "영상"만 표시 - JS에서 data-label 값을 바꿔줌 */
@keyframes videoBadgePulse{
    0%,100%{ box-shadow: 0 0 0 0 rgba(55,138,221,0.6); transform: scale(var(--book-inverse-zoom, 1)); }
    50%{ box-shadow: 0 0 0 10px rgba(55,138,221,0); transform: scale(calc(var(--book-inverse-zoom, 1) * 1.06)); }
}

#video-modal{
    position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,0.51); /* 기존 0.85에서 약 40% 완화 - 뒤에 책이 더 잘 비치도록 */
    display:flex; align-items:center; justify-content:center;
}
#video-modal[hidden]{ display:none; }
#video-modal-inner{
    position:relative;
    /* v3.22: 기존엔 폭을 화면 너비 기준(90vw)으로만 잡아서, 가로로 눕힌 좁은 화면에서
       세로 여유가 부족해지면 영상(16:9) 좌우로 크게 검은 여백이 남는 문제가 있었음.
       영상의 실제 비율(16:9)과 남은 세로 높이도 함께 고려해서, 세로 공간이 좁을 때는
       폭도 그에 맞춰 자동으로 줄어들도록 함
       v3.23: 화면을 거의 꽉 채우던 것을, 시안처럼 주변 여백이 뚜렷하게 보이는 카드형
       크기로 축소(90%->78%)
       v3.25: 16:9로 고정 가정하지 않고, 영상이 로드되면 실제 비율(--video-real-ratio)로
       바로 다시 계산해서 좌우 빈 공간이 남지 않도록 함(기본값은 16:9 유지, 로드 전이나
       구형 브라우저 대비)
       v3.28: 컨트롤바 높이를 "64px"로 추측해서 고정해뒀는데, 컨트롤바 디자인이 바뀔
       때마다(v3.24 등) 실제 높이와 이 추측값이 어긋나서 좌우 여백이 다시 생기는 문제가
       반복됐음 - 추측값 대신 실제 렌더링된 컨트롤바 높이(--video-controlbar-height,
       JS가 열릴 때 직접 측정)를 사용하도록 근본적으로 바꿔서 앞으로 컨트롤바 디자인이
       또 바뀌어도 이 문제가 재발하지 않게 함 */
    width: min(78vw, 860px, calc((80dvh - var(--video-controlbar-height, 64px)) * var(--video-real-ratio, 1.7778)));
    max-height:80vh; max-height:80dvh; /* v3.17: vh는 모바일 브라우저 주소창이 나타났다
        사라졌다 할 때 실제 화면 크기와 다르게 계산되는 문제가 있어(특히 가로화면처럼
        세로공간이 좁을 때 두드러짐), 실시간으로 정확한 화면 크기를 따라가는 dvh 단위로
        교체함. dvh를 모르는 구버전 브라우저를 위해 vh를 먼저 써두고 dvh로 덮어씀(지원 안 하면
        자동으로 vh값 유지) */
    background:#161616; border-radius:20px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
    /* v3.16: 영상(예전엔 max-height:80vh 고정)과 그 아래 재생 버튼줄을 합친 높이가
       화면(90vh)을 넘으면 버튼줄이 카드 밖으로 잘려 안 보이던 문제 수정. flex 세로배치로
       바꿔서 버튼줄(#video-controls-bar)이 항상 자기 높이만큼 먼저 확보하고, 영상은
       "남는 공간만큼만" 차지하도록 해서 어떤 화면 크기에서도 버튼이 잘리지 않게 함 */
    display:flex; flex-direction:column;
}
#video-modal-player{
    width:100%; flex:1 1 auto; min-height:0; display:block; background:#000; object-fit:contain;
}
#video-modal-close{
    position:absolute; top:14px; right:14px; z-index:2;
    width:34px; height:34px; border-radius:50%; border:none;
    background:rgba(20,20,20,0.55); backdrop-filter:blur(6px); color:#fff;
    font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
#video-modal-unmute{
    position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
    border:none; border-radius:20px; padding:8px 16px;
    background:rgba(0,0,0,0.7); color:#fff; font-size:14px; cursor:pointer;
}

/* ===================== 영상 커스텀 컨트롤바 - PC/웹 기본형 ===================== */
/* 어두운 카드(#video-modal-inner)와 하나로 이어지도록, 별도 흰 배경/그림자/둥근모서리 없이
   영상 바로 아래에 자연스럽게 붙임 (세련되게 통일된 카드 느낌) */
#video-controls-bar{
    flex-shrink:0; margin-top:0; background:#161616;
    /* v3.23: 컨트롤바를 더 컴팩트하게(높이를 줄이고 여백도 줄임) - 시안 이미지 기준
       v3.24: 재생버튼이 30% 더 작아진 만큼(12px->8px), 버튼 아래쪽 여백도 같은
       비율로 줄임 */
    padding:10px 16px 8px;
}
#video-progress{
    width:100%; margin-bottom:8px; -webkit-appearance:none; appearance:none;
    height:1px; border-radius:1px; background:rgba(255,255,255,0.28); outline:none; cursor:pointer;
}
#video-progress::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;
    margin-top:-4.5px; box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
#video-progress::-moz-range-thumb{
    width:10px; height:10px; border-radius:50%; background:#fff; border:none; cursor:pointer;
}
#video-progress::-moz-range-track{ height:4px; border-radius:2px; background:rgba(255,255,255,0.18); }
#video-buttons-row{ display:flex; align-items:center; justify-content:center; gap:16px; }
#video-buttons-row button{
    border:none; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:transparent; color:rgba(255,255,255,0.65);
    width:30px; height:30px;
    transition: background .15s ease, color .15s ease;
}
#video-buttons-row button:hover{ background:rgba(255,255,255,0.1); color:#fff; }
/* 재생/정지 아이콘: hidden 속성 대신 클래스로 명확하게 하나만 보이도록 강제 제어 */
#video-btn-playpause .icon-play{ display:none; }
#video-btn-playpause .icon-pause{ display:block; }
#video-btn-playpause.is-paused .icon-play{ display:block; }
#video-btn-playpause.is-paused .icon-pause{ display:none; }
#video-btn-playpause{
    background:#fff !important; color:#161616 !important;
    /* v3.24: 재생버튼을 약 30% 더 축소(42px -> 30px) */
    width:30px !important; height:30px !important;
}
/* 재생/정지 아이콘은 버튼이 이미 flex 정렬이라 별도 display 지정 불필요.
   (이전엔 여기서 display:block을 무조건 걸어놔서, hidden 속성으로 숨겨야 할
   아이콘까지 계속 보이는 버그가 있었음 - 그래서 이 규칙 자체를 제거함) */
#video-btn-playpause[hidden]{ display:none; }

/* ===================== 모바일 세로/가로 화면(v3.14) =====================
   이전에는 모바일에서만 화면 전체(100vw/100vh)를 채우는 별도 스타일을 썼으나,
   사용자가 PC에서 보이는 것과 같은 "가운데 여백 있는 카드형 박스" 모습을
   모바일 세로/가로 모두에서 원해서, 모바일 전용 풀스크린 오버라이드를 제거함.
   이제 모바일도 위의 PC/웹 기본형 스타일(#video-modal-inner: width:min(90vw,960px)
   등)을 세로/가로 구분 없이 그대로 사용함. */

/* 영상 로드 실패 시 화면에 표시되는 에러 메시지 (문제 파악을 쉽게 하기 위함) */
#video-modal-error{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(200,40,40,0.92); color:#fff; font-size:13px;
    padding:12px 18px; border-radius:8px; max-width:80%; text-align:center;
    z-index:5;
}