*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #f1f5f9;
  --surface: #fff;
  --text: #1e293b;
  --text-secondary: #64748b;
  --border: #e2e8f0;
  --primary: #2563eb;
  --primary-light: #dbeafe;
  --keep: #10b981;
  --keep-light: #d1fae5;
  --sub: #f59e0b;
  --sub-light: #fef3c7;
  --trash: #ef4444;
  --trash-light: #fee2e2;
  --watchlist: #8b5cf6;
  --watchlist-light: #ede9fe;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* Active pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.active-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  animation: pulse 1.4s ease-in-out infinite;
}

.active-dot.dot-collecting { background: #3b82f6; }
.active-dot.dot-processing { background: #f59e0b; }

/* Header */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

nav {
  display: flex;
  gap: 4px;
}

nav button {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  font-weight: 500;
  transition: all 0.15s;
}

nav button:hover {
  background: var(--bg);
  color: var(--text);
}

nav button.active {
  background: var(--primary-light);
  color: var(--primary);
}

.btn-settings {
  background: none;
  border: none;
  padding: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.15s;
  display: flex;
  align-items: center;
}

.btn-settings:hover {
  background: var(--bg);
  color: var(--text);
}

.settings-modal-content {
  max-width: 420px;
}

.settings-modal-content h3 {
  margin-bottom: 16px;
  font-size: 16px;
}

/* Main */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.loading {
  text-align: center;
  padding: 48px;
  color: var(--text-secondary);
}

.loading.hidden {
  display: none;
}

/* Pipeline */
.pipeline-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.pipeline-column {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 200px;
}

.pipeline-column h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pipeline-column h3 .count {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

/* Progress stepper */
.progress-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  background: var(--border);
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg);
  border: 2px solid var(--border);
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}

.step.has-items .step-dot {
  color: #fff;
  border-color: transparent;
}

.step-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.pipeline-card {
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.pipeline-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pipeline-card .card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline-card .card-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.pipeline-card .card-elapsed {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

.pipeline-card .card-elapsed svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.pipeline-card .card-group {
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
  text-align: center;
}

.pipeline-card .card-papers {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.pipeline-card[data-stage="pending"] { background: #f1f5f9; }
.pipeline-card[data-stage="collecting"] { background: var(--primary-light); }
.pipeline-card[data-collected="true"] {
  background: #fef3c7;
  border: 2px solid #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}

.pipeline-card[data-stage="processing"] { background: var(--sub-light); }
.pipeline-card[data-stage="reading"] { background: #f0fdfa; }
.pipeline-card[data-stage="done"] { background: var(--keep-light); }

/* Papers toolbar */
.papers-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.papers-period {
  display: flex;
  align-items: center;
  gap: 4px;
}

.period-btn-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.period-btn-nav:hover {
  background: var(--bg);
  border-color: var(--text-secondary);
}

#period-label {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 600;
  min-width: 70px;
  text-align: center;
}

.papers-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.papers-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.papers-view-toggle button {
  padding: 6px 14px;
  border: none;
  background: var(--surface);
  font-family: "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.papers-view-toggle button.active {
  background: var(--text);
  color: var(--surface);
}

/* Card grouping view */
.paper-group {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}

.paper-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}

.paper-group-header:hover {
  background: var(--bg);
}

.paper-group-arrow {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.paper-group.open .paper-group-arrow {
  transform: rotate(90deg);
}

.paper-group-date {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 60px;
}

.paper-group-cat {
  font-size: 14px;
  font-weight: 600;
}

.paper-group-stats {
  margin-left: auto;
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.paper-group-body {
  display: none;
  border-top: 1px solid var(--border);
}

.paper-group.open .paper-group-body {
  display: block;
}

.pg-source {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}

.pg-manual {
  background: var(--primary-light);
  color: var(--primary);
}

.pg-auto {
  background: var(--bg);
  color: var(--text-secondary);
}

.paper-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bg);
  font-size: 13px;
  transition: background 0.1s;
}

.paper-group-row:last-child {
  border-bottom: none;
}

.paper-group-row:hover {
  background: var(--bg);
}

.pg-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pg-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.pg-title a {
  color: var(--text);
  text-decoration: none;
}

.pg-title a:hover {
  color: var(--primary);
}

.pg-title-ko {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-oa {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--keep-light);
  color: #065f46;
}

.pg-paid {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bg);
  color: var(--text-secondary);
}

.pg-title-ft a {
  background: linear-gradient(to top, #fef08a 40%, transparent 40%);
}

.pg-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pg-score {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pg-eval {
  color: var(--primary);
  font-weight: 600;
}

.pg-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-read {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-family: "Pretendard", sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-read:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.btn-icon:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-upload-card {
  color: var(--text-tertiary);
  border-style: dashed;
}
.btn-upload-card:hover {
  color: #f59e0b;
  border-color: #f59e0b;
  background: #fef3c7;
}

.btn-icon-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.pg-uploaded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--keep);
  flex-shrink: 0;
}

.pg-reproc {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: #fef3c7;
  color: #92400e;
  margin-left: 4px;
}

.actions-cell {
  display: flex;
  gap: 4px;
  white-space: nowrap;
  align-items: center;
}

/* Sortable headers */
.papers-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.papers-table th[data-sort]:hover {
  color: var(--primary);
}

.papers-table th[data-sort]::after {
  content: " ↕";
  font-size: 10px;
  opacity: 0.4;
}

/* Reader Drawer */
.reader-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.reader-drawer.hidden {
  display: none;
}
.reader-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  animation: drawerFadeIn 0.2s ease;
}
.reader-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;
  max-width: 960px;
  height: 100vh;
  background: var(--surface);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: drawerSlideIn 0.25s ease;
}
@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes drawerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reader-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 16px;
}

.reader-header-left {
  flex: 1;
  min-width: 0;
}

.reader-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.reader-meta {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.reader-score {
  font-weight: 600;
  color: var(--primary);
}

.reader-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.reader-eval {
  border-top: 1px solid var(--border);
  padding: 16px 32px 24px;
  flex-shrink: 0;
}

.reader-eval-toggle {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.reader-eval-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.reader-eval-panel {
  margin-top: 12px;
}

.reader-eval-panel.hidden {
  display: none;
}

.reader-eval-panel label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 6px;
}

.reader-eval-panel label:first-child {
  margin-top: 0;
}

.reader-eval-panel .score-buttons {
  display: flex;
  gap: 6px;
}

.reader-eval-panel .score-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.reader-eval-panel .score-btn.selected {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.reader-eval-panel .status-buttons {
  display: flex;
  gap: 6px;
}

.reader-eval-panel .btn-status {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.reader-eval-panel .btn-status.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.reader-eval-panel .btn-primary {
  margin-top: 12px;
  width: 100%;
}

.reader-close {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 22px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reader-close:hover {
  background: var(--bg);
  color: var(--text);
}

.reader-body {
  padding: 28px 32px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
}

.reader-body h1 { font-size: 20px; font-weight: 700; margin: 24px 0 12px; }
.reader-body h2 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; color: var(--text); }
.reader-body h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
.reader-body hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.reader-body blockquote {
  border-left: 3px solid var(--primary);
  margin: 12px 0;
  padding: 8px 16px;
  background: var(--bg);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.reader-body pre {
  background: var(--bg);
  padding: 14px;
  border-radius: 8px;
  font-size: 13px;
  overflow-x: auto;
  line-height: 1.5;
  margin: 12px 0;
}
.reader-body ul, .reader-body ol { margin: 8px 0; padding-left: 20px; }
.reader-body li { margin: 4px 0; }
.reader-body .wiki-link {
  color: var(--accent);
  background: rgba(59,130,246,0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 13px;
}
.rel-graph {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.rel-graph h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.rel-canvas {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--radius);
  background: #f8fafc;
}

/* Toolbar legacy compat */
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* Papers Table */
.table-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.papers-table {
  min-width: 1000px;
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.papers-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.papers-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.papers-table tbody tr:hover {
  background: var(--bg);
}

.papers-table .title-cell {
  min-width: 400px;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.papers-table .title-ko {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.papers-table .journal-cell {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.papers-table .title-cell a {
  color: var(--text);
  text-decoration: none;
}

.papers-table .title-cell a:hover {
  color: var(--primary);
}

.papers-table .title-ft a {
  background: linear-gradient(to top, #fef08a 40%, transparent 40%);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge-oa { background: var(--keep-light); color: #065f46; }
.badge-paid { background: var(--bg); color: var(--text-secondary); }
.badge-keep { background: var(--keep-light); color: #065f46; }
.badge-sub { background: var(--sub-light); color: #92400e; }
.badge-trash { background: var(--trash-light); color: #991b1b; }
.badge-none { background: var(--bg); color: var(--text-secondary); }

/* Buttons */
.btn-eval {
  background: var(--primary-light);
  color: var(--primary);
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.btn-eval:hover {
  background: var(--primary);
  color: #fff;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}

.btn-secondary:hover { background: var(--border); }

.btn-danger {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid #fca5a5;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  margin-left: auto;
}
.btn-danger:hover { background: #fef2f2; }

.confirm-modal-content {
  max-width: 360px;
  text-align: center;
  padding: 28px 24px 20px;
}
.confirm-modal-content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
  color: var(--text);
}
.confirm-modal-content .modal-actions {
  justify-content: center;
}

/* Status Buttons */
.status-buttons {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.btn-status {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-keep:hover, .btn-keep.selected { background: var(--keep-light); border-color: var(--keep); color: #065f46; }
.btn-sub:hover, .btn-sub.selected { background: var(--sub-light); border-color: var(--sub); color: #92400e; }
.btn-trash:hover, .btn-trash.selected { background: var(--trash-light); border-color: var(--trash); color: #991b1b; }
.btn-watchlist:hover, .btn-watchlist.selected { background: var(--watchlist-light); border-color: var(--watchlist); color: #5b21b6; }

.pg-watchlist { color: var(--watchlist); font-size: 1.1em; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden { display: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal-content {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.card-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.card-modal-header h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 2px;
}

.card-modal-date {
  font-size: 13px;
  color: var(--text-secondary);
}

.card-edit-row {
  display: flex;
  gap: 12px;
}

.card-edit-row > div {
  flex: 1;
}

/* Card modal readonly */
.card-readonly {
  text-align: center;
}

.card-ro-keywords {
  font-size: 14px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 16px;
}

.card-ro-row {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.card-ro-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-ro-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.card-ro-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Card modal editable inline */
.card-inline-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.card-inline-row .card-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-inline-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.card-inline-row select,
.card-inline-row input {
  width: 100% !important;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  margin-bottom: 0;
}

.modal-content pre {
  background: var(--bg);
  padding: 12px;
  border-radius: 6px;
  font-size: 13px;
  overflow-x: auto;
  margin: 12px 0;
  white-space: pre-wrap;
}

.modal-content label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 16px;
  margin-bottom: 6px;
}

.eval-modal-content {
  max-width: 640px;
}

.eval-modal-content h3 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.eval-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  text-align: center;
}

.score-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.score-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.score-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.score-btn.selected {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.btn-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-status svg {
  flex-shrink: 0;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Pipeline toolbar */
.pipeline-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pipeline-period {
  display: flex;
  align-items: center;
  gap: 4px;
}

#pipeline-label {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 600;
  min-width: 70px;
  text-align: center;
}

/* Keywords */
.kw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kw-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kw-section-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}

.kw-section-card:hover {
  border-color: var(--border);
}

.kw-section-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.kw-section-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.kw-section-card .kw-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.kw-detail {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: none;
}

.kw-detail.visible {
  display: block;
}

.kw-detail h2 {
  font-size: 16px;
  margin-bottom: 16px;
}

.kw-detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg);
}

.kw-detail-row:last-child {
  border-bottom: none;
}

.kw-detail-row .cat-name {
  font-size: 13px;
  font-weight: 600;
  min-width: 110px;
  flex-shrink: 0;
  color: var(--text);
}

.kw-detail-row .cat-keywords {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.btn-upload-inline {
  cursor: pointer;
  border: none;
  font-family: "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}

.btn-upload-inline:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.badge-uploaded {
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Modal form shared */
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="password"],
.modal-content select,
.modal-content textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 4px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.modal-content label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 12px;
  margin-bottom: 4px;
}

.issue-form label:first-child {
  margin-top: 0;
}

/* Issue modal */
.issue-modal-content {
  max-width: 620px;
  padding: 32px;
}

.issue-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 24px;
}

.issue-header h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}

.issue-date-input {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  width: auto;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.issue-date-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Date picker popup styling */
.issue-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

.issue-date-input::-webkit-datetime-edit {
  font-family: "Pretendard", sans-serif;
}

.issue-category-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.issue-category-row .issue-cat-name,
.issue-category-row .issue-shuffle {
  position: relative;
  z-index: 1;
}

.issue-category-row .issue-cat-center {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}

.issue-cat-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.issue-shuffle {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.15s;
  flex-shrink: 0;
}

.issue-shuffle:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.issue-cat-search-wrap {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.issue-cat-search {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  width: 120px;
  transition: border-color 0.15s;
}

.issue-cat-search:focus {
  outline: none;
  border-color: var(--primary);
}

.issue-cat-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  max-height: 160px;
  overflow-y: auto;
  z-index: 10;
}

.issue-cat-dropdown.hidden {
  display: none;
}

.issue-cat-option {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}

.issue-cat-option:hover {
  background: var(--bg);
}

.issue-cat-option.active {
  color: var(--primary);
  font-weight: 600;
}

/* Keywords box */
.issue-kw-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  background: var(--bg);
  border-radius: 10px;
  min-height: 100px;
  margin-bottom: 20px;
  align-items: flex-start;
  align-content: flex-start;
}

.issue-kw-box:empty::before {
  content: "카테고리를 선택하면 키워드가 표시됩니다";
  color: var(--text-secondary);
  font-size: 13px;
}

.issue-kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  color: var(--text);
}

.issue-kw-chip.custom {
  background: var(--primary-light);
  border-color: rgba(37,99,235,0.3);
}

.issue-kw-chip .kw-x {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
}

.issue-kw-chip .kw-x:hover {
  color: var(--trash);
}

.issue-kw-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  transition: all 0.15s;
}

.issue-kw-add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.issue-kw-input {
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 6px 12px;
  width: 240px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}

.issue-note {
  width: 100%;
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  margin-bottom: 4px;
}

.issue-note:focus {
  outline: none;
  border-color: var(--primary);
}

/* Period grid + count stepper */
.issue-bottom-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
}

.issue-period-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
}

.period-btn {
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.period-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text);
}

.period-btn.selected {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
  font-weight: 600;
}

.issue-count-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.count-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.count-btn:hover {
  background: var(--bg);
  border-color: var(--text-secondary);
}

#issue-count-display {
  font-family: "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.count-unit {
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
}

.issue-preview {
  background: var(--bg);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  max-height: 80px;
  overflow-y: auto;
}

/* Settings */
.settings-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 480px;
}

.settings-card h2 {
  font-size: 16px;
  margin-bottom: 8px;
  margin-top: 20px;
}

.settings-card h2:first-child {
  margin-top: 0;
}

.hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.input-row {
  display: flex;
  gap: 8px;
}

.input-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}

#token-status {
  margin-top: 8px;
  font-size: 13px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}

.empty-state p {
  margin-top: 8px;
  font-size: 14px;
}

/* Toolbar right */
.toolbar-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* Dropzone */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
  font-size: 14px;
}

.dropzone:hover, .dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.dropzone.has-file {
  border-color: var(--keep);
  background: var(--keep-light);
  color: #065f46;
}

/* Keyword suggestions */
.kw-suggestions {
  margin-top: 24px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.kw-suggestions details summary {
  cursor: pointer;
  list-style: none;
}
.kw-suggestions details summary::-webkit-details-marker { display: none; }

.kw-suggestions .sug-header {
  display: flex;
  align-items: center;
}

.kw-suggestions h2 {
  font-size: 16px;
  margin-bottom: 0;
}

.kw-suggestions details[open] h2 {
  margin-bottom: 16px;
}

.sug-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--sub);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  padding: 0 5px;
}

.sug-badge.pulse {
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.kw-suggestions .sug-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 16px 0 6px;
}

.kw-suggestions .sug-date:first-child {
  margin-top: 0;
}

.sug-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 12px;
}

.sug-table th {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 2px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.sug-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}

.sug-approved td:last-child {
  color: var(--keep);
  font-weight: 600;
}

.sug-rejected td:last-child {
  color: var(--trash);
  font-weight: 600;
  text-decoration: line-through;
}

.sug-pending td:last-child {
  color: var(--sub);
  font-weight: 600;
}

/* Add Paper (batch) */
.add-paper-wide { max-width: 600px; }

.add-paper-textarea {
  width: 100%;
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}

.add-paper-drop {
  margin-top: 8px;
  padding: 14px;
  min-height: unset;
}

.add-paper-drop p { margin: 0; font-size: 12px; }

.add-paper-drop.dragover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.add-paper-status {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}

.ap-badge-pdf {
  display: inline-block;
  font-size: 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
  font-weight: 600;
}

.add-paper-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.add-paper-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.add-paper-item.error {
  border-color: var(--trash);
  opacity: 0.6;
}

.add-paper-item .ap-info {
  flex: 1;
  min-width: 0;
}

.add-paper-item .ap-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-paper-item .ap-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.add-paper-item .ap-cat {
  flex-shrink: 0;
}

.add-paper-item .ap-cat select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.add-paper-item .ap-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  padding: 2px;
}

.add-paper-item .ap-remove:hover { color: var(--trash); }

.ap-doi-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.ap-doi-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.ap-doi-fetch {
  font-size: 11px;
  padding: 4px 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    height: auto;
    padding: 12px 16px;
    gap: 8px;
  }

  nav { width: 100%; overflow-x: auto; }

  .pipeline-board {
    grid-template-columns: 1fr;
  }

  .papers-table .title-cell {
    min-width: 280px;
    max-width: 360px;
  }

  main { padding: 16px; }
}