:root { --line:#e5e7eb; --muted:#6b7280; --bg:#f9fafb; --accent:#2563eb; --card:#fff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Malgun Gothic", sans-serif; color:#111827; background:var(--bg); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar { background:#fff; border-bottom:1px solid var(--line); padding:12px 20px; display:flex; align-items:center; gap:20px; }
.topbar .brand { font-size:17px; font-weight:600; color:#111827; }
.topbar nav a { margin-right:14px; font-size:14px; color:#374151; }

.container { max-width:920px; margin:24px auto; padding:0 16px; }
h2 { margin:0 0 4px; }
h3 { margin:0 0 10px; font-size:16px; }
.muted { color:var(--muted); font-size:13px; }
.req { color:#dc2626; }

.row { display:flex; align-items:center; }
.row.between { justify-content:space-between; }
.row.gap { gap:10px; margin-top:8px; }

.btn { display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#374151; cursor:pointer; font-size:14px; }
.btn:hover { background:#f3f4f6; text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.danger { border-color:#dc2626; color:#dc2626; }

table.grid { width:100%; border-collapse:collapse; margin-top:12px; background:var(--card); border:1px solid var(--line); }
table.grid th, table.grid td { border:1px solid var(--line); padding:8px 10px; text-align:left; font-size:14px; }
table.grid thead { background:#f3f4f6; }

.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; }
.s-대기 { background:#f3f4f6; color:#6b7280; }
.s-진행중 { background:#dbeafe; color:#1d4ed8; }
.s-심사중 { background:#fef3c7; color:#b45309; }
.s-완료 { background:#dcfce7; color:#15803d; }

.empty { margin-top:16px; padding:28px; background:#fff; border:1px dashed var(--line); border-radius:8px; color:var(--muted); text-align:center; line-height:1.7; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-top:16px; }
.form label { display:block; margin-bottom:12px; font-size:14px; color:#374151; }
.form input, .form textarea, .form select { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.step { margin:0; }
.step-name { font-size:13px; color:#374151; margin-bottom:4px; }
.step select { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:8px; }
.danger-zone { border-color:#fecaca; }

/* ── 대시보드 책 목록 ── */
.book-list { margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.book-row { display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; color:#111827; }
.book-row:hover { border-color:#c7d2fe; text-decoration:none; }
.book-title { font-weight:600; }
.book-step { display:flex; gap:8px; align-items:center; }
.step-tag { background:#eef2ff; color:#4338ca; border-radius:999px; padding:2px 10px; font-size:12px; }
.mini-bar { grid-column:1 / -1; height:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.mini-bar span { display:block; height:100%; background:var(--accent); }
.book-row .go { color:var(--accent); font-size:13px; white-space:nowrap; }

/* ── 마법사 진행바 ── */
.progress { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:16px 0 0; }
.progress .pg { font-size:12px; color:#9ca3af; padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; background:#fff; }
.progress .pg .num { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center;
  border-radius:50%; background:#e5e7eb; color:#6b7280; margin-right:6px; font-size:11px; }
.progress .pg a { color:inherit; }
.progress .pg.done { color:#15803d; border-color:#bbf7d0; background:#f0fdf4; }
.progress .pg.done .num { background:#22c55e; color:#fff; }
.progress .pg.current { color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; font-weight:600; }
.progress .pg.current .num { background:var(--accent); color:#fff; }

.wizard-card { margin-top:14px; }
.wizard-actions { margin-top:18px; justify-content:space-between; }
.hint { font-size:13px; color:#6b7280; margin:6px 0 14px; }
.hint.error-text { color:#b91c1c; }

/* ── 검증 체크리스트 ── */
.checks { list-style:none; padding:0; margin:8px 0 16px; }
.checks .chk { display:flex; align-items:flex-start; gap:8px; padding:6px 0; font-size:14px; }
.checks .mark { width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%; font-size:12px; color:#fff; flex:none; }
.chk.ok .mark { background:#22c55e; }
.chk.warn .mark { background:#f59e0b; }
.chk.error .mark { background:#ef4444; }

/* ── 추출 확인 화면 ── */
.extract-grid { display:grid; grid-template-columns: 1fr 240px; gap:20px; }
.extract-side { font-size:13px; }
.cover-box { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#f8fafc; min-height:180px; display:flex; align-items:center; justify-content:center; }
.cover-box img { width:100%; display:block; }
.no-cover { color:#9ca3af; text-align:center; padding:20px; font-size:13px; }
.side-label { color:#9ca3af; font-size:12px; margin-top:12px; }
.toc { margin:6px 0 0; padding-left:18px; font-size:13px; color:#374151; }
@media (max-width:720px){ .extract-grid{ grid-template-columns:1fr; } .two,.three{ grid-template-columns:1fr; } }

/* ── 파일 드롭존 ── */
.field-label { display:block; font-size:14px; color:#374151; margin-bottom:6px; }
.dropzone { position:relative; border:2px dashed #cbd5e1; border-radius:12px; background:#f8fafc;
  padding:26px 16px; text-align:center; transition:all .15s ease; cursor:pointer; }
.dropzone.small { padding:16px; }
.dropzone:hover { border-color:#93c5fd; background:#f0f7ff; }
.dropzone.dragover { border-color:var(--accent); background:#e0edff; transform:scale(1.01);
  box-shadow:0 6px 20px rgba(37,99,235,.15); }
.dropzone.has-file { border-style:solid; border-color:#22c55e; background:#f0fdf4; }
.dropzone input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.dz-icon { font-size:26px; }
.dz-label { font-size:13px; color:#64748b; margin-top:6px; }
.dropzone.small .dz-icon { font-size:20px; }
.dz-file { margin-top:8px; font-size:13px; font-weight:600; color:#15803d; }
.dz-file:not(:empty)::before { content:"✓ "; }

/* ── 표지 크기 표시 ── */
.cover-size { font-size:12px; color:#475569; margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ok-pill { background:#dcfce7; color:#15803d; border-radius:999px; padding:1px 8px; font-size:11px; }
.warn-pill { background:#fef3c7; color:#b45309; border-radius:999px; padding:1px 8px; font-size:11px; }

/* ── AI 패널 / 배너 ── */
.ai-panel { background:#f5f3ff; border:1px solid #ddd6fe; border-radius:10px; padding:14px 16px; margin-bottom:18px; }
.ai-title { font-weight:600; color:#6d28d9; margin-bottom:4px; }
.banner { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px; }
.warn-box { background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:14px 16px; border-radius:8px; line-height:1.6; font-size:14px; }
.btn.small { padding:3px 10px; font-size:12px; margin-left:8px; }
textarea.mono { width:100%; font-family:ui-monospace,Consolas,monospace; font-size:12px; border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; }
.guide { color:#374151; font-size:14px; line-height:1.8; padding-left:20px; }

/* ---------- 로그인 화면 ---------- */
.login-wrap { max-width: 360px; margin: 60px auto; text-align: center; }
.login-wrap h1 { margin-bottom: 8px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.login-form input { padding: 12px 14px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; }
.login-form button { padding: 12px 14px; font-size: 16px; border: 0; border-radius: 8px; background: #2b6cb0; color: #fff; cursor: pointer; }
.login-form button:hover { background: #245a94; }
.login-error { color: #c0392b; margin-top: 10px; }
.topbar nav a.logout { margin-left: auto; opacity: .8; }