:root {
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #6b7280;
  --accent: #d92d20;
  --border: #e5e7eb;
  --surface: #f7f7f8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d;
    --fg: #f2f3f5;
    --muted: #9aa0aa;
    --accent: #f2564d;
    --border: #2c3038;
    --surface: #1e2128;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font:
    16px/1.5 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Apple SD Gothic Neo',
    'Noto Sans KR',
    sans-serif;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}
main {
  max-width: 480px;
  margin: 0 auto;
}
h1 {
  font-size: 20px;
  margin: 0 0 24px;
}
input,
button,
a.primary {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  font-size: 16px; /* iOS 자동 확대 방지 */
}
input {
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}
button,
a.primary {
  margin-top: 12px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
button#paste,
button#again,
button#retry {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.bar {
  height: 8px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
  margin: 16px 0 8px;
}
#bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}
#bar-fill.indeterminate {
  width: 100%;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.error {
  color: var(--accent);
}
#stage,
#progress-title,
#done-title {
  color: var(--muted);
}