:root { --bar: #1e293b; --bar2: #334155; --bg: #475569; --fg: #f8fafc; --accent: #2563eb; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; overscroll-behavior: none; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

#bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; flex: 0 0 auto;
  padding-top: calc(8px + env(safe-area-inset-top)); background: var(--bar); }
.ttl { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ib { height: 36px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--bar2); color: #fff;
  font-size: 14px; font-family: inherit; cursor: pointer; touch-action: manipulation; white-space: nowrap; flex: 0 0 auto; }
.ib:active { background: #0f172a; }
.ib:disabled { opacity: .45; cursor: default; }
.pg { font-variant-numeric: tabular-nums; }
.zm { font-size: 18px; padding: 0; width: 36px; }
.wide { display: none; }
@media (min-width: 600px) { .wide { display: inline-block; } }

#searchBar { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: #0f172a; flex: 0 0 auto; }
#searchBar[hidden] { display: none; }
#searchBar input { flex: 1 1 0; min-width: 0; height: 36px; border-radius: 8px; border: 0; padding: 0 10px; font-size: 16px; font-family: inherit; }
.cnt { font-size: 13px; color: #cbd5e1; white-space: nowrap; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

#view { flex: 1 1 0; min-height: 0; overflow: auto; position: relative; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
#pages { position: relative; padding: 8px; width: max-content; min-width: 100%; transform-origin: 0 0; }
#pages[hidden] { display: none; }
.page { position: relative; margin: 0 auto 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.page canvas { display: block; }
.page .ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hl { position: absolute; background: rgba(250, 204, 21, .45); border-radius: 2px; }
.hl.cur { background: rgba(249, 115, 22, .55); outline: 2px solid #ea580c; }

#empty { min-height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }
#empty[hidden] { display: none; }
.logo { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 16px; background: #dc2626; color: #fff;
  font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; }
.lead { font-size: 18px; margin: 0 0 16px; }
.big { height: 48px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 16px; font-family: inherit; cursor: pointer; touch-action: manipulation; }
.big:active { background: #1d4ed8; }
.hint { font-size: 13px; color: #cbd5e1; line-height: 1.6; margin: 18px 0 0; }
body.drag #view { outline: 3px dashed #93c5fd; outline-offset: -6px; }