/* 클릭 영역 표시(v2) — magazine.css 의 옅은 파란 칠(opacity .1)만으로는 누르는 곳인지 안 보여서
   테두리 + 종류별 아이콘 + 페이지 넘길 때 한 번 반짝임. (magazine.css 는 매니페스트 고정이라 새 파일) */
.magazine .region {
    opacity: 1;
    background: rgba(37, 99, 235, .07);
    border: 2px solid rgba(37, 99, 235, .55);
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: visible;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.magazine .region:hover {
    opacity: 1;
    background: rgba(37, 99, 235, .16);
    border-color: rgba(37, 99, 235, .9);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.magazine .region.youtube { background: rgba(220, 38, 38, .05); border-color: rgba(220, 38, 38, .55); }
.magazine .region.youtube:hover { background: rgba(220, 38, 38, .14); border-color: rgba(220, 38, 38, .9); box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
.magazine .region.to-page { background: rgba(22, 163, 74, .06); border-color: rgba(22, 163, 74, .55); }
.magazine .region.to-page:hover { background: rgba(22, 163, 74, .15); border-color: rgba(22, 163, 74, .9); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
/* 확대 영역은 원래처럼 거의 투명 (보조 기능) */
.magazine .region.zoom { background: transparent; border-color: transparent; }
.magazine .region.zoom:hover { background: rgba(147, 51, 234, .10); border-color: rgba(147, 51, 234, .5); box-shadow: none; }

/* 아이콘 배지: 기본은 오른쪽 위 모서리에 걸친 작은 원 */
.magazine .region .region-badge {
    position: absolute; right: 0; top: 0;
    transform: translate(40%, -40%);
    width: var(--rb, 24px); height: var(--rb, 24px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #2563eb; color: #fff;
    font-size: calc(var(--rb, 24px) * .55); line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.magazine .region.youtube .region-badge { background: #dc2626; }
.magazine .region.to-page .region-badge { background: #16a34a; }
.magazine .region.zoom .region-badge { display: none; }
/* 큰 유튜브 영역은 영상 썸네일처럼 가운데 재생 버튼 */
.magazine .region.youtube.is-large .region-badge {
    right: auto; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--rbl, 52px); height: var(--rbl, 52px);
    font-size: calc(var(--rbl, 52px) * .5);
    background: rgba(220, 38, 38, .92);
}
/* 휴대폰에선 책이 작아 52px 재생 버튼이 영상 그림을 너무 덮었다(10/23 과장님) → 영역 크기에 맞춰 줄인다.
   영역 짧은 쪽의 30%(22~52px). 컨테이너 단위를 못 쓰는 옛 브라우저는 좁은 화면에서 36px. */
@media (max-width: 767.98px) { .magazine .region.youtube.is-large { --rbl: 36px; } }
@supports (container-type: size) {
    .magazine .region.youtube.is-large { container-type: size; }
    .magazine .region.youtube.is-large .region-badge { --rbl: clamp(22px, 30cqmin, 52px); }
}

/* 페이지가 펼쳐질 때 한 번 반짝 */
@keyframes regionHint {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); }
    70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.magazine .region.region-hint { animation: regionHint 1.1s ease-out 2; }
.magazine .region.youtube.region-hint { animation-name: regionHintRed; }
@keyframes regionHintRed {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
    70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* '클릭 영역 숨기기' 토글 */
.fb-hide-regions .magazine .region:not(:hover) { background: transparent; border-color: transparent; box-shadow: none; }
.fb-hide-regions .magazine .region:not(:hover) .region-badge { display: none; }

@media (prefers-reduced-motion: reduce) { .magazine .region.region-hint { animation: none; } }


/* 화면 높이: magazine.css 의 `height:100dvh; min-height:100vh` 는 주소창이 아래에 있는 브라우저(삼성 인터넷 등)에서
   100vh(주소창 포함)가 이겨서 하단 도구막대가 주소창 뒤로 숨었다(스크롤도 막혀 있음).
   → 실제 보이는 높이(window.innerHeight)를 스크립트가 --fb-vh 로 넣고, 그 값을 쓴다. */
.container-fluid {
    height: var(--fb-vh, 100dvh) !important;
    min-height: 0 !important;
}
#bottomMenu.fb-bottombar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }

/* 클릭 겹침(10/20): 페이지 가장자리 그림자 막(.gradient)이 페이지 전체를 덮는 투명 판이라,
   로딩 순서에 따라 클릭 영역보다 위에 오면 영상을 눌러도 이 막이 눌려 '확대'가 됐다(가끔·새로고침하면 정상).
   그림자·로딩 표시는 장식이므로 클릭을 통과시키고, 영역은 항상 페이지 그림 위에. */
.magazine .page .gradient,
.magazine .page .loader { pointer-events: none; }
.magazine .page .region { z-index: 3; }

/* "주손디앤피에서 만든 웹북 · 나도 만들기" (클릭 영역 이용권이 열린 플립북엔 안 나옴) */
.fb-madeby {
    margin-left: auto; margin-right: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; line-height: 1; white-space: nowrap;
    color: #475569; text-decoration: none;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .12); background: rgba(255, 255, 255, .75);
    transition: background .15s, color .15s;
}
.fb-madeby:hover { background: #fff; color: #0f172a; }
.fb-madeby b { font-weight: 700; color: #ea580c; }
.fb-madeby .fb-madeby-long { display: inline; }
@media (max-width: 576px) {
    .fb-madeby { margin-right: 8px; padding: 6px 10px; font-size: 11.5px; }
    .fb-madeby .fb-madeby-long { display: none; }   /* 휴대폰: 짧은 문구 하나만 */
    /* 휴대폰 문구 = "내 웹북 만들기"(10/21 과장님). 서버가 넣는 <b>나도 만들기</b> 를 CSS 로만 바꿔 재시작 없이 적용 */
    .fb-madeby b { font-size: 0; }
    .fb-madeby b::after { content: "내 웹북 만들기"; font-size: 11.5px; }
}

/* 자동 넘김 간격 버튼 · 공유 알림 (2026-10-20) */
/* 다른 도구막대 아이콘(이전·확대·목록·재생·다음)과 같게 — 동그라미 테두리 없이 아이콘만 */
#sharePage, #regionToggle, #searchOpen, #fullscreenToggle { background: transparent !important; border: 0 !important; color: inherit !important; }
#regionToggle.is-off { opacity: .45; }
.fb-speed {
    height: 30px; min-width: 34px; padding: 0 4px; border: 0; background: transparent;
    color: var(--fb-ink, #1a2238); font-size: 13px; font-weight: 700; cursor: pointer; margin-left: -6px;
    text-decoration: underline; text-decoration-color: rgba(26, 34, 56, .25); text-underline-offset: 4px;
}
.fb-speed:hover { text-decoration-color: currentColor; }
.fb-toast {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px);
    background: rgba(26, 34, 56, .92); color: #fff; font-size: 13.5px; line-height: 1.4; padding: 9px 14px; border-radius: 10px;
    white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.fb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 420px) {
    .fb-toolbar { gap: 0.32rem; }
    .fb-toolbar .fb-toolbtn { width: 36px; height: 36px; }
    .fb-toolbar .fb-toolbtn i { font-size: 16px; }
    .fb-speed { min-width: 30px; padding: 0 2px; font-size: 12px; }
    .fb-toast { white-space: normal; text-align: center; width: max-content; }
}

/* 내 브랜드로만 보기: 주손 표기 숨김 (viewer html 의 인라인 스크립트가 .fb-nobrand 를 붙임) */
.fb-nobrand .fb-brand-eyebrow { display: none !important; }

/* ── 무료 플립북 주손 표시 (2026-10-21) ── 내 브랜드로만 보기 책은 .fb-nobrand 로 전부 숨김 */
#viewerRow { position: relative; }
.fb-badge {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 40;
    width: auto !important; max-width: calc(100% - 24px); margin: 0 !important; /* #viewerRow 는 .row 라 자식이 width:100% 가 됨 */
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 12px; border-radius: 999px; /* 10/28 조금 키움(12.5→14px) */
    background: rgba(255, 255, 255, .86); border: 1px solid rgba(26, 34, 56, .12); box-shadow: 0 2px 10px rgba(26, 34, 56, .08);
    color: #1a2238; font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .15s, box-shadow .15s;
}
.fb-badge:hover { background: #fff; color: #1a2238; box-shadow: 0 4px 14px rgba(26, 34, 56, .14); }
.fb-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6f00; flex: none; }
.fb-badge-short { display: none; }
.fb-endcard {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); z-index: 60; width: min(380px, calc(100vw - 32px));
    background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(26, 34, 56, .28); padding: 26px 24px 22px; text-align: center;
    opacity: 0; transition: opacity .25s, transform .25s;
}
.fb-endcard.is-on { opacity: 1; transform: translate(-50%, -50%); }
.fb-endcard-x { position: absolute; right: 10px; top: 10px; border: 0; background: transparent; color: #64748b; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.fb-endcard-x:hover { background: #f1f5f9; }
.fb-endcard-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #64748b; }
.fb-endcard-title { margin: 12px 0 8px; font-size: 21px; line-height: 1.35; font-weight: 800; letter-spacing: -.035em; color: #1a2238; }
.fb-endcard-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #5f6670; }
.fb-endcard-actions { display: flex; flex-direction: column; gap: 8px; }
.fb-endcard-go { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border-radius: 12px; background: #ff6f00; color: #fff; font-weight: 800; font-size: 15.5px; text-decoration: none; }
.fb-endcard-go:hover { background: #f06400; color: #fff; }
.fb-endcard-again { border: 0; background: transparent; color: #475569; font-size: 13.5px; font-weight: 600; padding: 6px; cursor: pointer; }
.fb-endcard-again:hover { color: #1a2238; }
.fb-nobrand .fb-badge, .fb-nobrand .fb-endcard { display: none !important; }
@media (max-width: 576px) {
    .fb-badge { bottom: 6px; padding: 5px 12px 5px 10px; font-size: 12.5px; }
    .fb-badge-long { display: none; }
    .fb-badge-short { display: inline; }
    .fb-endcard { padding: 22px 18px 18px; }
    .fb-endcard-title { font-size: 19px; }
}

/* 가로로 돌린 휴대폰(높이 500px 이하): 위·아래 막대를 얇게 → 책이 커진다. 책 크기는 fbFitBook 이 막대 높이를 재서 맞춘다. */
@media (orientation: landscape) and (max-height: 500px) {
    .fb-topbar { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 40px !important; }
    .fb-brand-text { display: none; }
    .fb-pager-input, .fb-pager-go { padding-top: 3px !important; padding-bottom: 3px !important; }
    .fb-bottombar { padding-top: 3px !important; padding-bottom: 3px !important; }
    .fb-toolbar .fb-toolbtn { width: 32px; height: 32px; }
    .fb-toolbar .fb-toolbtn i { font-size: 15px; }
    .fb-badge { bottom: 3px; padding: 3px 10px 3px 8px; font-size: 11px; }
    .fb-badge-long { display: none; }
    .fb-badge-short { display: inline; }
}

/* 책 양옆 이전/다음 (10/22 과장님) — 넓은 화면에서만, 책 밖 빈자리에 둥근 버튼.
   magazine.css 가 예전에 '양옆 화살표 비표시'(display:none !important)로 막아 둬서 더 센 선택자로 다시 켠다.
   첫 쪽·마지막 쪽(disableControls 가 style="display: none")과 확대 중엔 숨김. 휴대폰은 책이 꽉 차서 아래 막대·밀기로. */
@media (min-width: 768px) {
    .magazine-viewport .magazine .next-button,
    .magazine-viewport .magazine .previous-button {
        display: block !important;
        width: 52px !important; height: 52px !important; top: 50% !important; margin-top: -26px;
        border-radius: 50% !important; background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .06);
        transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; z-index: 30;
    }
    .magazine-viewport .magazine .next-button { right: -84px !important; }
    .magazine-viewport .magazine .previous-button { left: -84px !important; }
    .magazine-viewport .magazine .next-button::after,
    .magazine-viewport .magazine .previous-button::after {
        border: 0 !important; width: 13px; height: 13px; top: 50%; margin-top: -6.5px;
        border-top: 3px solid #1f2937 !important; border-right: 3px solid #1f2937 !important; border-radius: 2px;
    }
    .magazine-viewport .magazine .next-button::after { right: auto; left: 16px; transform: rotate(45deg); }
    .magazine-viewport .magazine .previous-button::after { left: 21px; transform: rotate(-135deg); }
    .magazine-viewport .magazine .next-button-hover,
    .magazine-viewport .magazine .previous-button-hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(15, 23, 42, .22), 0 0 0 1px rgba(15, 23, 42, .08); }
    .magazine-viewport .magazine .next-button-down,
    .magazine-viewport .magazine .previous-button-down { transform: scale(.96); background: #f1f5f9 !important; }
    .magazine-viewport .magazine .next-button[style*="display: none"],
    .magazine-viewport .magazine .previous-button[style*="display: none"],
    .magazine-viewport.zoom-in .magazine .next-button,
    .magazine-viewport.zoom-in .magazine .previous-button,
    .magazine-viewport .zoom-in .magazine .next-button,
    .magazine-viewport .zoom-in .magazine .previous-button { display: none !important; }
}
/* 태블릿 폭(책이 거의 꽉 참): 책 가장자리 안쪽에 조금 작게 */
@media (min-width: 768px) and (max-width: 999.98px) {
    .magazine-viewport .magazine .next-button,
    .magazine-viewport .magazine .previous-button { width: 44px !important; height: 44px !important; margin-top: -22px; background: rgba(255, 255, 255, .88) !important; }
    .magazine-viewport .magazine .next-button { right: 10px !important; }
    .magazine-viewport .magazine .previous-button { left: 10px !important; }
    .magazine-viewport .magazine .next-button::after { left: 12px; }
    .magazine-viewport .magazine .previous-button::after { left: 17px; }
}

/* ── 불러오는 중(10/23) */
.fb-loading { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .35s; }
.fb-loading.is-off { opacity: 0; }
.fb-loading-box { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #475569; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 10px 18px; box-shadow: 0 6px 20px rgba(15, 23, 42, .12); }
.fb-loading-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #cbd5e1; border-top-color: #ff6f00; animation: flipbook-loader-spin .8s linear infinite; }
#viewerRow { position: relative; }

/* ── 책 안 글자 찾기(10/23) */
.fb-search { width: min(380px, 92vw) !important; }
.fb-search .offcanvas-header { gap: 10px; }
.fb-search-box { flex: 1; display: flex; align-items: center; gap: 8px; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; background: #fff; }
.fb-search-box:focus-within { border-color: #ff6f00; }
.fb-search-box i { color: #94a3b8; }
.fb-search-box input { flex: 1; border: 0; outline: 0; font-size: 15px; min-width: 0; background: transparent; }
.fb-search-status { font-size: 12.5px; color: #64748b; margin-bottom: 8px; }
.fb-search-results { list-style: none; margin: 0; padding: 0; }
.fb-search-results li + li { border-top: 1px solid #f1f5f9; }
.fb-search-results button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 4px; border-radius: 8px; cursor: pointer; }
.fb-search-results button:hover { background: #f8fafc; }
.fb-sr-page { display: block; font-size: 12px; font-weight: 800; color: #c2410c; margin-bottom: 2px; }
.fb-sr-text { display: block; font-size: 13px; color: #334155; line-height: 1.55; word-break: keep-all; }
.fb-sr-text mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }