:root {
  color-scheme: light;
  --toolbar: #1f2937;
  --toolbar-hover: #374151;
  --accent: #16a34a;
  --paper: #fff;
  --surface: #d7dbe0;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  color: #111827;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
}

button, input, a { font: inherit; }

.toolbar {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto 0;
  min-height: 58px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--toolbar);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.toolbar__brand { margin-right: auto; font-weight: 700; white-space: nowrap; }
.toolbar__group { display: flex; align-items: center; gap: 5px; }

button, .download {
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button:hover, button:focus-visible, .download:hover, .download:focus-visible { background: var(--toolbar-hover); }
button:focus-visible, input:focus-visible, .download:focus-visible { outline: 3px solid #93c5fd; outline-offset: 1px; }
button:disabled { opacity: .38; cursor: default; }

.page-field { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.page-field input {
  width: 48px;
  height: 36px;
  border: 1px solid #6b7280;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  text-align: center;
}

.zoom-value { min-width: 64px; font-size: 14px; }
.download { padding: 0 14px; background: var(--accent); font-weight: 700; }
.download:hover, .download:focus-visible { background: #15803d; }

.viewer {
  position: fixed;
  inset: 58px 0 0;
  overflow: auto;
  padding: 24px;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#pdfCanvas {
  display: none;
  margin: 0 auto;
  max-width: none;
  background: var(--paper);
  box-shadow: 0 4px 22px rgba(0, 0, 0, .25);
}

.status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  color: #374151;
}

.status[hidden] { display: none; }

.status.error { color: #991b1b; }
.spinner { width: 34px; height: 34px; border: 4px solid #9ca3af; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.status.error .spinner { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .toolbar { min-height: 108px; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
  .toolbar__brand { width: calc(100% - 104px); margin-right: 0; }
  .toolbar__group { order: 2; }
  .download { margin-left: auto; padding: 0 10px; }
  .viewer { inset-block-start: 108px; padding: 12px 8px calc(20px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .toolbar { padding-inline: 6px; }
  .toolbar__brand { font-size: 14px; }
  button { min-width: 36px; }
  .zoom-value { min-width: 52px; }
}

@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }