/* 릴코노미 루트 전자책 리더 (라이트 A4 디자인 보존 + 두쪽/넘김/드로어 UX)
   각 ebook의 기존 <div class="page"> (A4 고정 페이지)는 그대로 두고, 스케일해서 페이저로 넘김 */
html.ebr, body.ebr { margin:0; height:100%; overflow:hidden; background:#e7e7ea; }
#ebr-app{ position:fixed; inset:0; display:flex; flex-direction:column; background:#e7e7ea;
  font-family:'Noto Sans KR','Apple SD Gothic Neo',-apple-system,sans-serif; }

/* 상단바 */
#ebr-top{ height:50px; flex:0 0 50px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:#fff; border-bottom:1px solid #e3e3e7; z-index:20; }
#ebr-top .ebr-title{ font-size:13px; font-weight:600; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58%; }
.ebr-btn{ font-size:12.5px; color:#555; background:#fff; border:1px solid #d8d8dd; border-radius:8px; padding:6px 11px; cursor:pointer; transition:.15s; white-space:nowrap; }
.ebr-btn:hover{ border-color:#26C6DA; color:#0a8ea3; }
.ebr-btn.open{ border-color:#26C6DA; color:#0a8ea3; background:#eaf9fb; }

/* 페이저(덱) */
#ebr-deck{ flex:1 1 auto; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
#ebr-deck::-webkit-scrollbar{ display:none; } #ebr-deck{ scrollbar-width:none; }
.ebr-spread{ flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:flex-start; justify-content:center; gap:20px; padding:16px; overflow-y:auto; }
.ebr-spread.center{ align-items:center; }
.ebr-slot{ flex:0 0 auto; position:relative; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.16); overflow:hidden; }
.ebr-slot > .page{ margin:0 !important; transform-origin:top left; }

/* 데스크톱 좌우 화살표 */
.ebr-edge{ position:fixed; top:50px; bottom:46px; width:72px; z-index:15; border:none; background:transparent;
  cursor:pointer; color:#9a9aa2; display:none; align-items:center; transition:.2s; }
.ebr-edge:hover{ color:#26C6DA; background:linear-gradient(var(--d),rgba(38,198,218,.10),transparent); }
.ebr-edge.l{ left:0; justify-content:flex-start; padding-left:16px; --d:90deg; }
.ebr-edge.r{ right:0; justify-content:flex-end; padding-right:16px; --d:270deg; }
.ebr-edge svg{ width:28px; height:28px; }
.ebr-edge:disabled{ opacity:0; pointer-events:none; }
@media(hover:hover) and (min-width:760px){ .ebr-edge{ display:flex; } }

/* 하단바 */
#ebr-bot{ height:46px; flex:0 0 46px; display:flex; align-items:center; gap:12px; padding:0 16px;
  background:#fff; border-top:1px solid #e3e3e7; }
.ebr-mini{ width:32px; height:32px; border:1px solid #d8d8dd; border-radius:8px; background:#fff; color:#444;
  cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.ebr-mini:disabled{ opacity:.35; cursor:default; }
@media(min-width:760px){ .ebr-mini{ display:none; } }
#ebr-prog{ flex:1 1 auto; height:4px; background:#e6e6ea; border-radius:9px; overflow:hidden; }
#ebr-prog > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#26C6DA,#00ACC1); border-radius:9px; transition:width .3s; }
#ebr-count{ font-size:12px; color:#666; white-space:nowrap; }
#ebr-count b{ color:#222; }

/* 드로어 목차 */
#ebr-ov{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .25s; z-index:30; }
#ebr-ov.open{ opacity:1; pointer-events:auto; }
#ebr-dr{ position:fixed; top:0; bottom:0; left:0; width:304px; max-width:85vw; background:#fff; z-index:31;
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:0 0 50px rgba(0,0,0,.25);
  display:flex; flex-direction:column; }
#ebr-dr.open{ transform:none; }
.ebr-dr-h{ padding:16px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.ebr-dr-h .t{ font-size:12px; letter-spacing:.14em; color:#0a8ea3; font-weight:700; }
.ebr-dr-h .s{ font-size:11.5px; color:#888; margin-top:3px; }
#ebr-dr-close{ border:none; background:none; font-size:16px; color:#999; cursor:pointer; }
#ebr-dr nav{ flex:1 1 auto; overflow-y:auto; padding:6px 0; }
.ebr-ditem{ display:flex; gap:10px; align-items:baseline; width:100%; text-align:left; border:none; background:none;
  padding:11px 16px; font-size:14px; color:#444; cursor:pointer; border-left:3px solid transparent; transition:.15s; }
.ebr-ditem:hover{ background:#f4f4f6; }
.ebr-ditem.active{ background:#eaf9fb; border-left-color:#26C6DA; color:#111; }
.ebr-ditem .n{ font-size:11px; color:#26C6DA; font-weight:700; min-width:22px; }
.ebr-dr-foot{ padding:12px 16px; border-top:1px solid #eee; font-size:11px; color:#999; }