* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', system-ui, monospace;
  background:#0d1117;
  color:#c9d1d9;
  font-size:13px;
  padding:24px 32px 48px;
  max-width:1100px;
  margin:0 auto;
}

/* Header */
.page-header {
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid #21262d;
  margin-bottom:28px;
}
h1 { color:#f0f6fc; font-size:22px; font-family:monospace; letter-spacing:-.02em; }
.subtitle { color:#484f58; font-size:12px; }

/* Section */
h2 {
  color:#8b949e;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:28px 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid #21262d;
}
a { color:#58a6ff; text-decoration:none; }
a:hover { text-decoration:underline; color:#79c0ff; }

/* URL Builder */
.builder {
  background:#161b22;
  border:1px solid #30363d;
  border-radius:8px;
  padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.builder-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.builder-label { color:#484f58; font-size:11px; min-width:64px; flex-shrink:0; font-family:monospace; }
.env-btn, .page-btn, .param-btn {
  background:#0d1117; color:#8b949e; border:1px solid #30363d;
  border-radius:5px; padding:3px 10px; font-size:12px; font-family:monospace;
  cursor:pointer; white-space:nowrap; transition:border-color .12s, color .12s;
}
.env-btn:hover, .page-btn:hover, .param-btn:hover { border-color:#58a6ff; color:#c9d1d9; }
.env-btn.active  { background:#0c2a4a; color:#58a6ff; border-color:#58a6ff; }
.page-btn.active { background:#0a2a1a; color:#3fb950; border-color:#3fb950; }
.param-btn.active{ background:#2a2a0a; color:#e3b341; border-color:#e3b341; }
.builder-preview {
  font-size:12px; font-family:monospace;
  color:#3fb950; background:#0d1117;
  border:1px solid #21262d; border-radius:5px;
  padding:6px 10px; word-break:break-all; flex:1;
}
.open-btn {
  background:#1a3a2a; color:#3fb950;
  border:1px solid #2a5a3a; border-radius:5px;
  padding:4px 18px; font-size:12px; font-family:monospace;
  cursor:pointer; flex-shrink:0; transition:background .12s;
}
.open-btn:hover { background:#2a4a3a; }

/* Shuffle tools */
.shuffle-list { display:flex; gap:8px; flex-wrap:wrap; }
.shuffle-item {
  background:#161b22; border:1px solid #21262d;
  border-radius:6px; padding:7px 14px;
  display:flex; align-items:center; gap:8px;
}
.sbadge {
  font-size:10px; font-family:monospace;
  border-radius:3px; padding:2px 7px;
  font-weight:700; letter-spacing:.04em;
}
.sbadge.dev { background:#0a2a0a; color:#3fb950; border:1px solid #2a5a2a; }
.sbadge.qa  { background:#2a0a0a; color:#f85149; border:1px solid #5a2a2a; }

/* Blueprint / guide links */
.bp-list { display:flex; flex-direction:column; gap:4px; }
.bp-item {
  background:#161b22; border:1px solid #21262d;
  border-radius:5px; padding:7px 12px;
  display:flex; align-items:center; gap:8px;
  line-height:1.4;
}

/* Docs table */
table { border-collapse:collapse; width:100%; }
td, th {
  padding:6px 12px;
  border:1px solid #21262d;
  vertical-align:top;
  line-height:1.7;
}
th {
  background:#161b22; color:#8b949e;
  font-weight:500; text-align:left;
  width:140px; white-space:nowrap;
  font-size:12px;
}
td { background:#0d1117; }
.tag {
  display:inline-block;
  background:#21262d; color:#8b949e;
  border-radius:3px; padding:1px 6px;
  font-size:10px; font-family:monospace;
  margin:1px 3px 1px 0;
}
.vs-link { color:#9ecbff; }
.vs-link:hover { color:#b3d4ff; }

/* npm scripts */
.script-list { display:flex; flex-direction:column; gap:3px; }
.script-row {
  display:grid;
  grid-template-columns: 300px 1fr auto;
  align-items:center; gap:12px;
  background:#161b22; border:1px solid #21262d;
  border-radius:5px; padding:6px 12px;
}
.script-row code { color:#e3b341; font-family:monospace; font-size:12px; }
.script-row .desc { color:#6e7681; font-size:11px; }
.copy-btn {
  background:#21262d; color:#6e7681;
  border:none; border-radius:3px;
  cursor:pointer; padding:2px 8px;
  font-size:11px; font-family:monospace;
  transition:background .1s;
}
.copy-btn:hover { background:#30363d; color:#c9d1d9; }
.copy-btn.ok { color:#3fb950; }

/* Skills / Subagent table */
.cmd-table { border-collapse:collapse; width:100%; }
.cmd-table td, .cmd-table th {
  padding:6px 12px;
  border:1px solid #21262d;
  vertical-align:top;
}
.cmd-table th {
  background:#161b22; color:#e3b341;
  font-family:monospace; font-size:12px;
  font-weight:600; text-align:left;
  width:200px; white-space:nowrap;
}
.cmd-table td { background:#0d1117; color:#8b949e; font-size:12px; }

/* toast */
#toast {
  position:fixed; bottom:24px; right:24px;
  background:#238636; color:#f0f6fc;
  padding:7px 16px; border-radius:6px;
  font-size:12px; display:none;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* TODO / Roadmap */
.todo-group-title {
  font-size:11px; font-weight:600; color:#6e7681;
  margin:16px 0 6px; letter-spacing:.04em;
  font-family:system-ui;
}
.todo-list { display:flex; flex-direction:column; gap:3px; margin-bottom:4px; }
.todo-item {
  display:grid;
  grid-template-columns: 68px 80px 1fr;
  align-items:start; gap:8px;
  background:#161b22; border:1px solid #21262d;
  border-radius:5px; padding:5px 10px;
  font-size:12px; line-height:1.5;
}
.todo-badge {
  font-size:10px; font-family:monospace; font-weight:700;
  border-radius:3px; padding:2px 6px; text-align:center;
  white-space:nowrap; align-self:center;
}
.badge-high { background:#3a0d0d; color:#f85149; border:1px solid #5a2a2a; }
.badge-med  { background:#2a1f0a; color:#e3b341; border:1px solid #4a3a1a; }
.badge-low  { background:#0a1a0a; color:#4a8a4a; border:1px solid #1a3a1a; }
.todo-slot {
  color:#58a6ff; font-family:monospace; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  align-self:center;
}
.todo-text { color:#8b949e; }

/* 우선순위 조정 */
.todo-badge.clickable {
  cursor:pointer; user-select:none;
  position:relative;
  transition:filter .12s;
}
.todo-badge.clickable:hover { filter:brightness(1.4); }
.badge-orig {
  display:block; font-size:8px; color:#484f58;
  text-decoration:line-through; line-height:1.1; margin-top:1px;
}
.todo-item.overridden { border-color:#30363d; background:#1a1f26; }
.todo-item.overridden .todo-text { color:#8b949e; }
.badge-reset-btn {
  background:none; border:none; color:#484f58;
  cursor:pointer; font-size:13px; padding:0 2px;
  flex-shrink:0; line-height:1;
  transition:color .1s;
}
.badge-reset-btn:hover { color:#c9d1d9; }
.todo-override-bar {
  display:flex; align-items:center; gap:10px;
  background:#1c2128; border:1px solid #30363d;
  border-radius:5px; padding:5px 12px;
  margin-bottom:8px; font-size:11px; color:#e3b341;
}
.todo-override-bar button {
  background:#21262d; color:#8b949e; border:1px solid #30363d;
  border-radius:3px; padding:2px 8px; font-size:10px;
  cursor:pointer; margin-left:auto;
}
.todo-override-bar button:hover { color:#f85149; border-color:#f85149; }
/* 오버라이드 된 항목은 4열 그리드 (리셋 버튼 추가) */
.todo-item.overridden {
  grid-template-columns: 68px 80px 1fr auto;
}

/* Repo root bar — vscode://file/__REPO_ROOT__/X 토큰 치환용. localStorage 캐싱. */
.repo-root-bar {
  display:flex; align-items:center; gap:10px;
  background:#161b22; border:1px solid #21262d;
  border-radius:5px; padding:6px 12px;
  margin-bottom:20px; font-size:11px;
}
.repo-root-bar .label { color:#6e7681; font-family:monospace; }
.repo-root-bar code {
  color:#58a6ff; font-family:monospace; font-size:12px;
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.repo-root-bar code.unset { color:#f85149; }
.repo-root-bar button {
  background:#21262d; color:#8b949e;
  border:1px solid #30363d; border-radius:3px;
  cursor:pointer; padding:3px 10px; font-size:11px; font-family:monospace;
}
.repo-root-bar button:hover { border-color:#58a6ff; color:#c9d1d9; }