:root {
  --reader-bg: #020817;
  --reader-panel: rgba(2, 6, 23, 0.92);
  --reader-border: rgba(255,255,255,.08);
  --reader-soft: rgba(255,255,255,.06);
  --reader-text: #e2e8f0;
  --reader-muted: #94a3b8;
  --reader-progress-h: 6px;
  --reader-topbar-h: 74px;
  --reader-toolbar-h: 60px;
  --reader-bottom-gap: 18px;
}
html, body { margin:0; height:100%; background:var(--reader-bg); color:var(--reader-text); }
body.pdf-reader-page { overflow:hidden; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.reader-app { position:fixed; inset:0; display:flex; flex-direction:column; background:radial-gradient(circle at top, rgba(15,23,42,.55), rgba(2,8,22,.98)); }
.reader-topbar {
  min-height: var(--reader-topbar-h);
  display:flex; align-items:center; gap:.9rem; padding:.8rem 1rem;
  border-bottom:1px solid var(--reader-border);
  background:rgba(2,6,23,.94); backdrop-filter: blur(10px);
  z-index:50;
}
.reader-topbar__meta { min-width:0; flex:1; }
.reader-topbar__title { font-size:1.15rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-topbar__sub { font-size:.84rem; color:var(--reader-muted); margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-topbar__actions { display:flex; align-items:center; gap:.7rem; }
.reader-icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:1rem; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05); color:#fff; text-decoration:none; cursor:pointer;
  font-size:1.2rem; font-weight:800; user-select:none;
}
.reader-icon-btn:hover { background:rgba(255,255,255,.12); }
.reader-progress {
  padding:.35rem 1rem .45rem; border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(2,6,23,.88); z-index:45;
}
.reader-progress__row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; font-size:.82rem; }
.reader-progress__label { font-weight:700; }
.reader-progress__hint { color:var(--reader-muted); }
.reader-progress__rail {
  width:100%; height:var(--reader-progress-h); border-radius:999px; background:rgba(255,255,255,.09);
  overflow:hidden; cursor:pointer; position:relative; touch-action:none;
}
.reader-progress__bar { width:0%; height:100%; background:linear-gradient(90deg, #3b82f6, #7dd3fc); }
.reader-body { position:relative; flex:1; min-height:0; background:radial-gradient(circle at center, rgba(15,23,42,.25), rgba(2,8,22,.98)); }
.reader-stage { position:absolute; inset:0; }
.reader-stage[hidden] { display:none !important; }
.reader-page-stage {
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.reader-page-wrap {
  min-height:100%; display:flex; align-items:center; justify-content:center;
  padding:1rem 4rem calc(var(--reader-bottom-gap) + 1rem);
  box-sizing:border-box;
}
.reader-page-card {
  width:max-content; height:max-content; max-width:none; max-height:none; margin:auto; position:relative;
}
.reader-page-card canvas {
  display:block; background:#fff; border-radius:.45rem; box-shadow:0 20px 40px rgba(0,0,0,.3);
}
.reader-scroll-stage {
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:1rem 1rem calc(var(--reader-bottom-gap) + 1rem);
  box-sizing:border-box;
}
.reader-scroll-pages { display:flex; flex-direction:column; align-items:center; gap:16px; min-height:100%; }
.reader-scroll-page { display:flex; flex-direction:column; align-items:center; gap:.35rem; width:min(100%, 920px); }
.reader-scroll-page canvas { display:block; width:100%; height:auto; background:#fff; border-radius:.45rem; box-shadow:0 20px 40px rgba(0,0,0,.24); }
.reader-scroll-index { font-size:.74rem; color:#cbd5e1; }
.reader-message {
  position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:60; display:none;
  padding:1rem 1.1rem; border-radius:1rem; border:1px solid rgba(248,113,113,.35); background:rgba(127,29,29,.22);
}
.reader-message.is-visible { display:block; }
.reader-side-hit {
  position:absolute; top:50%; transform:translateY(-50%); z-index:30;
  width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(15,23,42,.68); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; cursor:pointer; backdrop-filter:blur(6px);
}
.reader-side-hit--prev { left:14px; }
.reader-side-hit--next { right:14px; }
.reader-desktop-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.65rem 1rem; border-top:1px solid var(--reader-border); background:rgba(2,6,23,.92);
}
.reader-toolbar-group { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.reader-btn, .reader-btn--link {
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.55rem .95rem;
  border-radius:.9rem; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:#e2e8f0;
  text-decoration:none; cursor:pointer; font-weight:800; font-size:.86rem;
}
.reader-btn:hover, .reader-btn--link:hover { background:rgba(255,255,255,.12); }
.reader-btn.is-active { background:#f8fafc; color:#111827; border-color:#f8fafc; }
.reader-chip { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.55rem .95rem; border-radius:.9rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); font-weight:800; }
.reader-overlay { position:fixed; inset:0; background:rgba(2,6,23,.62); z-index:79; }
.reader-overlay[hidden] { display:none !important; }
.reader-drawer {
  position:fixed; top:0; bottom:0; left:0; width:min(380px, 88vw); transform:translateX(-100%);
  background:rgba(3,7,18,.98); border-right:1px solid rgba(255,255,255,.08); z-index:80;
  transition:transform .22s ease; overflow:auto; -webkit-overflow-scrolling:touch;
  box-shadow:20px 0 50px rgba(0,0,0,.35);
}
.reader-app.is-drawer-open .reader-drawer { transform:translateX(0); }
.reader-drawer__head { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; background:rgba(3,7,18,.98); border-bottom:1px solid rgba(255,255,255,.08); }
.reader-drawer__title { font-size:1.5rem; font-weight:900; }
.reader-panel { margin:1rem; padding:1rem; border-radius:1.1rem; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.04); }
.reader-panel h3 { margin:0 0 .85rem; font-size:1rem; font-weight:900; }
.reader-panel__row { display:flex; flex-wrap:wrap; gap:.75rem; }
.reader-panel__row--two > * { flex:1 1 0; min-width:0; }
.reader-panel__meta { margin-top:.6rem; color:#cbd5e1; }
.reader-bookmark-list { margin-top:.85rem; display:flex; flex-direction:column; gap:.65rem; }
.reader-bookmark-item { display:grid; grid-template-columns:1fr auto; gap:.65rem; align-items:center; padding:.85rem 1rem; border-radius:.95rem; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.reader-bookmark-item strong { display:block; font-size:1.05rem; }
.reader-bookmark-item span { display:block; margin-top:.15rem; color:#94a3b8; }
.reader-bookmark-empty { color:#94a3b8; }
@media (max-width: 767px) {
  :root { --reader-topbar-h: 66px; --reader-progress-h: 5px; --reader-bottom-gap: 10px; }
  .reader-topbar { padding:.65rem .9rem; gap:.7rem; }
  .reader-topbar__title { font-size:.95rem; }
  .reader-topbar__sub { display:none; }
  .reader-progress { padding:.25rem .75rem .35rem; }
  .reader-progress__row { margin-bottom:.2rem; font-size:.74rem; }
  .reader-progress__hint { display:none; }
  .reader-desktop-toolbar { display:none; }
  .reader-page-wrap { padding:.2rem .5rem .4rem; align-items:flex-start; }
  .reader-side-hit { width:44px; height:44px; background:rgba(51,65,85,.78); }
  .reader-side-hit--prev { left:8px; }
  .reader-side-hit--next { right:8px; }
  .reader-scroll-stage { padding:.35rem .5rem .5rem; }
  .reader-drawer { width:min(420px, 86vw); }
}
@media (prefers-reduced-motion: reduce) {
  .reader-drawer { transition:none; }
}


.reader-btn--mini { min-height:34px; padding:.4rem .7rem; border-radius:.75rem; font-size:.8rem; }
.reader-page-card--spread { display:block; }
.reader-page-card--single[hidden], .reader-page-card--spread[hidden] { display:none !important; }
.reader-spread-wrap { display:flex; align-items:center; justify-content:center; gap:18px; }
.reader-sheet { position:relative; display:inline-block; }
.reader-sheet canvas { position:relative; z-index:1; display:block; background:#fff; border-radius:.45rem; box-shadow:0 20px 40px rgba(0,0,0,.3); }
.reader-spread-wrap .reader-sheet[data-page-slot="right"].is-empty { visibility:hidden; }
.reader-anno-layer { position:absolute; inset:0; z-index:5; border-radius:.45rem; overflow:visible; cursor:crosshair; touch-action:none; }
.reader-anno-layer.is-disabled { pointer-events:none; }
.reader-anno-mark { position:absolute; border-radius:6px; box-sizing:border-box; }
.reader-anno-mark--highlight { background:rgba(253,224,71,.34); border:1px solid rgba(250,204,21,.85); }
.reader-anno-mark--note { background:rgba(147,197,253,.14); border:1px solid rgba(96,165,250,.95); }
.reader-anno-mark__pin { position:absolute; top:-10px; right:-10px; width:20px; height:20px; border-radius:999px; background:#38bdf8; color:#082f49; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.22); }
.reader-anno-selection { position:absolute; border:2px dashed rgba(255,255,255,.92); background:rgba(125,211,252,.16); pointer-events:none; border-radius:6px; }
.reader-select-toolbar { position:absolute; z-index:65; display:flex; gap:.5rem; padding:.55rem; border-radius:1rem; border:1px solid rgba(255,255,255,.14); background:rgba(3,7,18,.96); box-shadow:0 18px 34px rgba(0,0,0,.35); }
.reader-select-toolbar[hidden] { display:none !important; }
.reader-note-modal { position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,.52); padding:1rem; }
.reader-note-modal[hidden] { display:none !important; }
.reader-note-modal__box { width:min(520px, 92vw); border-radius:1.1rem; border:1px solid rgba(255,255,255,.12); background:rgba(3,7,18,.98); box-shadow:0 24px 44px rgba(0,0,0,.42); padding:1rem; }
.reader-note-modal__head { font-size:1.05rem; font-weight:900; margin-bottom:.8rem; }
.reader-note-modal textarea { width:100%; min-height:140px; resize:vertical; box-sizing:border-box; border-radius:1rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#e2e8f0; padding:.9rem 1rem; font:inherit; }
.reader-note-modal__actions { display:flex; justify-content:flex-end; gap:.65rem; margin-top:.85rem; }
.reader-annotation-item { display:grid; grid-template-columns:1fr auto; gap:.65rem; align-items:center; padding:.85rem 1rem; border-radius:.95rem; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.reader-annotation-item strong { display:block; font-size:.98rem; }
.reader-annotation-item span { display:block; margin-top:.18rem; color:#94a3b8; line-height:1.45; }
.reader-annotation-item .reader-annotation-type { display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:.2rem .55rem; border-radius:999px; font-size:.72rem; font-weight:800; margin-bottom:.35rem; }
.reader-annotation-type--highlight { background:rgba(253,224,71,.22); color:#fde68a; border:1px solid rgba(250,204,21,.35); }
.reader-annotation-type--note { background:rgba(96,165,250,.18); color:#bfdbfe; border:1px solid rgba(96,165,250,.35); }
.reader-annotation-actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.reader-flash { animation: readerFlash 1s ease; }
@keyframes readerFlash { 0% { box-shadow:0 0 0 0 rgba(250,204,21,.0);} 20% { box-shadow:0 0 0 4px rgba(250,204,21,.55);} 100% { box-shadow:0 0 0 0 rgba(250,204,21,.0);} }
@media (max-width: 980px) {
  .reader-spread-wrap { gap:10px; }
}
@media (max-width: 767px) {
  .reader-spread-wrap { gap:8px; }
  .reader-page-card--spread .reader-sheet[data-page-slot="right"] { display:none; }
  .reader-note-modal__box { width:100%; }
  .reader-select-toolbar { left:12px !important; right:12px; bottom:12px; top:auto !important; justify-content:center; flex-wrap:wrap; }
}



.reader-note-popover {
  position: fixed; z-index: 120; width: min(320px, calc(100vw - 24px));
  border-radius: 6px; border: 1px solid rgba(120, 95, 14, .28);
  background: #ffd71f;
  color: #3f2d00;
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
  padding: .9rem 1rem 1rem; display: none;
}
.reader-note-popover::after {
  content:''; position:absolute; right:0; bottom:0; width:24px; height:24px;
  background: linear-gradient(135deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 48%, #ffe66b 48%, #ffe66b 100%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.reader-note-popover[hidden] { display:none !important; }
.reader-note-popover.is-visible { display:block; }
.reader-note-popover__pin {
  position:absolute; width:16px; height:16px; border-radius:999px;
  background:#f59e0b; box-shadow:0 3px 8px rgba(0,0,0,.18);
  top:-8px; left:14px;
}
.reader-note-popover__head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.5rem; cursor:move; user-select:none; }
.reader-note-popover__head strong { font-size:.88rem; font-weight:900; color:#5b3c00; }
.reader-note-popover__tools{display:flex; align-items:center; gap:.35rem;}
.reader-note-popover__tool,.reader-note-popover__close {
  min-width:28px; height:28px; border-radius:999px; border:1px solid rgba(91,60,0,.18);
  background: rgba(255,255,255,.34); color:#5b3c00; cursor:pointer; font-size:12px; line-height:1; padding:0 .55rem;
}
.reader-note-popover__close{padding:0; font-size:18px;}
.reader-note-popover__tool:hover,.reader-note-popover__close:hover { background: rgba(255,255,255,.72); }
.reader-note-popover__body {
  font-size:1.05rem; line-height:1.55; color:#2f2500; font-weight:700;
  white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto;
}
@media (max-width: 767px) {
  .reader-note-popover { width: min(300px, calc(100vw - 24px)); }
}

.reader-anno-mark--note-badge{cursor:pointer;overflow:visible;}
.reader-note-popover{pointer-events:auto;}
.reader-note-popover__body{font-size:1.02rem;}
.reader-note-popover__card,.reader-note-popover{z-index:120;}
.reader-message{display:none !important;}

.reader-note-popover__body{font-size:1.02rem; line-height:1.55; color:#2f2500; font-weight:700; white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto;}
.reader-note-popover{pointer-events:auto;}
.reader-note-popover[data-dragging='1']{opacity:.96;}
.reader-note-popover[data-side='left'] .reader-note-popover__pin{left:auto; right:14px;}
.reader-anno-mark--note-badge{cursor:pointer;overflow:visible;}
.reader-message{display:none !important;}

/* v anchor-click-drag fix */
.reader-anno-mark--note-badge{background:transparent !important;border:none !important;box-shadow:none !important;pointer-events:auto;z-index:70;}
.reader-anno-mark--note-badge .reader-anno-mark__pin{pointer-events:none;}
.reader-note-popover--sticky{
  position:fixed;
  z-index:9999;
  background:#ffd81a;
  border:1px solid rgba(182,135,0,.24);
  border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  color:#2f2500;
}
.reader-note-popover--sticky .reader-note-popover__head{
  cursor:move;
  padding-bottom:.25rem;
  border-bottom:1px solid rgba(120,88,0,.12);
}
.reader-note-popover--sticky .reader-note-popover__head strong{
  color:#6b4c00;
}
.reader-note-popover--sticky .reader-note-popover__body{
  color:#2f2500;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.55;
}
.reader-note-popover--sticky .reader-note-popover__tool,
.reader-note-popover--sticky .reader-note-popover__close{
  background:rgba(255,255,255,.38);
  color:#5a4100;
  border:1px solid rgba(120,88,0,.16);
}
.reader-note-popover--sticky .reader-note-popover__pin{
  width:14px;height:14px;border-radius:999px;background:#f28c28;top:-8px;left:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.18);
}
.reader-note-popover--sticky[data-side='left'] .reader-note-popover__pin{left:auto;right:12px;}
.reader-note-popover--sticky::after{
  content:"";
  position:absolute;
  right:0;bottom:0;
  width:24px;height:24px;
  background:linear-gradient(135deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 55%);
  clip-path:polygon(100% 0, 0 100%, 100% 100%);
  opacity:.45;
}

/* 안정화: N 배지 클릭 우선권 */
.reader-anno-mark--note-badge{z-index:120 !important; pointer-events:auto !important; cursor:pointer !important;}
.reader-anno-mark--note-badge .reader-anno-mark__pin{pointer-events:none !important;}
.reader-note-popover{z-index:9999 !important;}