.kfbp-viewer{ width:100%; max-width:1100px; margin:18px auto; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.06); }
.kfbp-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-bottom:1px solid #eef2f7; background:#fbfbfd; }
.kfbp-title-main{ font-weight:800; font-size:16px; line-height:1.1; }
.kfbp-title-sub{ font-weight:600; font-size:12px; color:#6b7280; margin-top:2px; }
.kfbp-controls{ display:flex; align-items:center; gap:8px; }
.kfbp-btn{ border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer; }
.kfbp-page-indicator{ min-width:130px; text-align:center; font-weight:700; color:#334155; }

.kfbp-stage{ width:100%; padding:14px; background:#f3f4f6; display:grid; grid-template-columns:1fr 1fr; gap:14px; transform-origin:top center; }
@media (max-width:840px){ .kfbp-stage{ grid-template-columns:1fr; } }

.kfbp-page{ background:#fff; border-radius:16px; overflow:hidden; min-height:620px; box-shadow:0 10px 20px rgba(0,0,0,0.08); }
@media (max-width:840px){ .kfbp-page{ min-height:560px; } }

.kfbp-page-inner{ width:100%; height:100%; display:flex; flex-direction:column; }
.kfbp-img{ width:100%; flex:1 1 auto; background:#fff; }
.kfbp-img img{ width:100%; height:100%; display:block; }
.kfbp-fit-fit img{ object-fit:contain; background:#fff; }
.kfbp-fit-fill img{ object-fit:cover; }
.kfbp-fit-original img{ object-fit:none; }
.kfbp-img.kfbp-missing{ background: repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 10px,#e2e8f0 10px,#e2e8f0 20px); }

.kfbp-textwrap{ padding:14px; background: rgba(255,255,255,0.85); border-radius:14px; }
.kfbp-textwrap .kfbp-text{ line-height:1.25; font-weight:700; }

.kfbp-mixed-a{ display:flex; flex-direction:column; height:100%; }
.kfbp-mixed-a .kfbp-img{ height:72%; }
.kfbp-mixed-a .kfbp-textwrap{ margin:12px; }

.kfbp-mixed-b{ display:grid; grid-template-columns:1fr 1fr; height:100%; }
@media (max-width:840px){ .kfbp-mixed-b{ grid-template-columns:1fr; } }
.kfbp-mixed-b .kfbp-textwrap{ margin:12px; align-self:center; }

.kfbp-textonly-center{ flex:1; display:flex; align-items:center; justify-content:center; padding:22px; }
.kfbp-textonly-center .kfbp-textwrap{ width:100%; max-width:720px; }


/* Start Closed (flat centered cover) */
.kfbp-viewer.kfbp-closed .kfbp-stage{ grid-template-columns: 1fr; justify-items:center; }
.kfbp-viewer.kfbp-closed .kfbp-page{ max-width: 520px; width: 100%; }
.kfbp-viewer.kfbp-closed .kfbp-left{ display:none !important; }
.kfbp-viewer.kfbp-closed .kfbp-right{ display:block !important; }
.kfbp-viewer .kfbp-openhint{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); background:rgba(255,255,255,0.92); border:1px solid #e5e7eb; border-radius:999px; padding:8px 12px; font-weight:800; color:#334155; box-shadow:0 6px 16px rgba(0,0,0,0.10); }