:root {
  --bg: #121212; --surface: #1E1E1E; --surface2: #2A2A2A;
  --text: #E0E0E0; --text2: #999; --accent: #c4a35a; --accent2: #4a90d9;
  --success: #4caf50; --warning: #ff9800; --error: #f44336;
  --font: 'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --radius: 8px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; }
.hidden { display:none !important; }
.screen { min-height:100vh; }

/* Auth */
.auth-box { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; gap:16px; }
.auth-box h1 { font-size:24px; color:var(--accent); }
.auth-box p { color:var(--text2); font-size:14px; }

/* Buttons */
.btn-primary { background:var(--accent); color:#000; border:none; padding:10px 24px; border-radius:20px; font-size:14px; font-weight:600; cursor:pointer; }
.btn-secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); padding:8px 20px; border-radius:20px; font-size:13px; cursor:pointer; margin-top:16px; }
.btn-small { background:transparent; color:var(--text2); border:1px solid #444; padding:4px 12px; border-radius:4px; font-size:12px; cursor:pointer; }

/* Toolbar */
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; background:var(--surface); border-bottom:1px solid #333; position:sticky; top:0; z-index:100; }
.logo { font-size:16px; font-weight:700; color:var(--accent); }
.toolbar nav { display:flex; gap:16px; }
.toolbar nav a { color:var(--text2); text-decoration:none; font-size:13px; padding:4px 0; }
.toolbar nav a.nav-active { color:var(--accent); border-bottom:2px solid var(--accent); }

/* Container */
.container { max-width:960px; margin:0 auto; padding:16px; }
.container h2 { font-size:18px; margin-bottom:16px; color:var(--text); }

/* Project Grid */
.project-grid { display:flex; flex-direction:column; gap:12px; }
.project-card {
  background:var(--surface); border-radius:var(--radius); padding:16px;
  cursor:pointer; transition:background .2s;
}
.project-card:hover { background:var(--surface2); }
.project-card h3 { font-size:16px; margin-bottom:8px; }
.project-card .progress-bar { height:4px; background:#333; border-radius:2px; margin:8px 0; }
.project-card .progress-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .3s; }
.project-card .meta { font-size:12px; color:var(--text2); display:flex; gap:12px; }

/* Kanban */
.kanban { display:flex; gap:8px; overflow-x:auto; padding-bottom:16px; }
.kanban-col { min-width:160px; flex:1; background:var(--surface); border-radius:var(--radius); padding:8px; }
.kanban-col h3 { font-size:13px; color:var(--text2); padding:4px 8px; margin-bottom:8px; }
.kanban-items { display:flex; flex-direction:column; gap:4px; }
.kanban-item {
  background:var(--surface2); border-radius:4px; padding:8px; font-size:13px; cursor:pointer;
  border-left:3px solid var(--accent);
}
.kanban-item.status-DONE { border-left-color:var(--success); }
.kanban-item.status-VERIFY { border-left-color:var(--warning); }
.kanban-item.status-HUMAN_REVIEW { border-left-color:var(--error); }
.kanban-item .ep-chars { font-size:11px; color:var(--text2); }

/* Episode List */
.episode-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.episode-card {
  background:var(--surface); border-radius:var(--radius); padding:12px; text-align:center;
  cursor:pointer; transition:background .2s; font-size:14px;
}
.episode-card:hover { background:var(--surface2); }
.episode-card .ep-status { font-size:11px; color:var(--text2); margin-top:4px; }

/* Reader */
.reader-toolbar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--surface); border-bottom:1px solid #333; }
.reader-toolbar button { background:none; border:none; color:var(--text2); cursor:pointer; font-size:14px; }
.reader-wrap { position:fixed; top:80px; bottom:0; left:0; right:0; overflow:hidden; }
.reader-content {
  height:100%; column-width:calc(100vw - 48px); column-gap:48px; column-fill:auto;
  overflow:visible; padding:24px 24px 60px; box-sizing:border-box;
  font-size:17px; line-height:1.85; transition:transform .3s ease;
  font-family:'Nanum Gothic','Nanum Myeongjo',sans-serif;
}
.reader-content p { margin-bottom:14px; text-align:justify; word-break:keep-all; }
.reader-touch-left, .reader-touch-right { position:fixed; top:80px; bottom:60px; width:30%; z-index:50; cursor:pointer; }
.reader-touch-left { left:0; }
.reader-touch-right { right:0; }
.reader-page-ind { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#000a; padding:4px 14px; border-radius:16px; font-size:12px; color:#888; z-index:90; }

/* 인라인 피드백: 텍스트 선택 시 */
.reader-content ::selection { background:var(--accent); color:#000; }

/* Modal */
.modal { position:fixed; inset:0; background:#000c; z-index:200; display:flex; align-items:flex-end; justify-content:center; }
.modal-content { background:var(--surface); border-radius:16px 16px 0 0; padding:20px; width:100%; max-width:480px; }
.modal-content h3 { margin-bottom:12px; font-size:16px; color:var(--accent); }
.selected-text { font-size:13px; color:var(--text2); background:var(--surface2); padding:8px; border-radius:4px; margin-bottom:12px; max-height:60px; overflow:hidden; }
.modal-content select, .modal-content textarea {
  width:100%; background:var(--surface2); color:var(--text); border:1px solid #444;
  border-radius:4px; padding:8px; font-size:14px; margin-bottom:8px; font-family:inherit;
}
.modal-actions { display:flex; gap:8px; justify-content:flex-end; }

/* Mobile */
@media(max-width:768px) {
  .kanban { flex-direction:column; }
  .kanban-col { min-width:auto; }
  .toolbar nav { gap:8px; }
  .toolbar nav a { font-size:12px; }
  .container { padding:12px; }
  .episode-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }
}