* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { --bar: 52px; --side: 260px; --accent: #2f6fed; --bg: #e9ebef; }
html, body { margin: 0; height: 100%; }
body { font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
       background: var(--bg); color: #1d2330; }

.bar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 20;
       display: flex; align-items: center; gap: 8px; padding: 0 12px;
       background: #fff; border-bottom: 1px solid #d8dbe2; }
.bar h1 { font-size: 16px; margin: 0 8px 0 2px; white-space: nowrap; }
.grow { flex: 1; }
.group { display: flex; align-items: center; gap: 6px; }
#zoomLabel { min-width: 44px; text-align: center; font-size: 13px; color: #555; }

.btn, .icon { border: 1px solid #cfd3db; background: #fff; border-radius: 8px; cursor: pointer;
              font: inherit; font-size: 14px; height: 34px; }
.btn { padding: 0 12px; display: inline-flex; align-items: center; }
.icon { width: 34px; }
.btn:hover, .icon:hover { background: #f2f4f8; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: #245ad0; }
.link { border: 0; background: none; color: #c0392b; cursor: pointer; font: inherit; font-size: 13px; }

aside { position: fixed; top: var(--bar); bottom: 0; left: 0; width: var(--side); z-index: 15;
        background: #fff; border-right: 1px solid #d8dbe2; overflow-y: auto; padding: 12px; }
.side-head { display: flex; justify-content: space-between; align-items: center; }
.hint { font-size: 12px; color: #888; margin: 6px 0 10px; }
#recent { list-style: none; margin: 0; padding: 0; }
#recent li { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 8px;
             cursor: pointer; font-size: 14px; }
#recent li:hover { background: #f2f4f8; }
#recent li.active { background: #e6eeff; }
#recent .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#recent .meta { display: block; font-size: 11px; color: #999; }
#recent .del { border: 0; background: none; color: #aaa; cursor: pointer; font-size: 16px; }
#recent .del:hover { color: #c0392b; }
#recent .empty { color: #aaa; cursor: default; }

main { padding: calc(var(--bar) + 20px) 20px 40px calc(var(--side) + 20px); min-height: 100%; }
body.side-closed aside { display: none; }
body.side-closed main { padding-left: 20px; }

.drop { display: flex; justify-content: center; padding-top: 8vh; }
.drop-box { max-width: 520px; width: 100%; text-align: center; background: #fff;
            border: 2px dashed #b9c0cc; border-radius: 16px; padding: 40px 24px; }
.drop-box .big { font-size: 48px; }
.drop-box .sub { color: #777; font-size: 13px; }
body.dragging .drop-box, body.dragging main { outline: 3px dashed var(--accent); outline-offset: -8px; }

.doc-info { text-align: center; font-size: 13px; color: #555; margin-bottom: 14px; }
.doc-info .warn { color: #b05a00; font-weight: 600; }
#pages { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.page canvas { display: block; width: 100%; height: 100%; }
.page .num { position: absolute; bottom: -17px; right: 0; font-size: 11px; color: #888; }
.page .badge { position: absolute; top: 6px; right: 6px; background: #fff3e0; color: #b05a00;
               border: 1px solid #f0c080; font-size: 11px; padding: 2px 6px; border-radius: 6px; }

.busy { position: fixed; inset: 0; z-index: 50; background: rgba(255,255,255,.7);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.spinner { width: 42px; height: 42px; border: 4px solid #cdd6ea; border-top-color: var(--accent);
           border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60;
         background: #222; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; }

#printArea { display: none; }

@media (max-width: 760px) {
  .bar h1 { display: none; }
  aside { width: 82vw; box-shadow: 4px 0 16px rgba(0,0,0,.15); }
  main { padding-left: 10px; padding-right: 10px; }
  body:not(.side-closed) main { padding-left: 10px; }
  #zoomLabel, #zoomFit { display: none; }
}

@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff; height: auto; }
  .no-print, main, aside { display: none !important; }
  #printArea { display: block; }
  #printArea .sheet { width: 210mm; height: 297mm; display: flex; align-items: center;
                      justify-content: center; overflow: hidden;
                      break-after: page; page-break-after: always; }
  #printArea .sheet:last-child { break-after: auto; page-break-after: auto; }
  #printArea img { max-width: 210mm; max-height: 297mm; width: 100%; height: 100%; object-fit: contain; }
}