/* Tokens follow the Letterbox newsletter (news.goodpace.app). */
:root {
  --bg: #ffffff; --surface: #ffffff; --line: #e5e7eb;
  --ink: #24292f; --ink-soft: #6b7280; --ink-faint: #9ca3af; --ink-fainter: #ccd0d5;
  --hover-bg: #f3f4f6; --active-bg: #e9ebee; --chip-bg: #e9ebee;
  --accent: #46586a; --made: #2f7d5b; --made-bg: #e7f3ec; --warn: #9a6a1c; --warn-bg: #fbf3e2;
  --pick: #c2410c; --pick-bg: #fdeee5;
  --hot: #b4232c; --hot-bg: #fdecec; --run: #1d5fa8; --run-bg: #e8f0fb;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101214; --surface: #16181b; --line: #24282d;
    --ink: #d3d7dc; --ink-soft: #9aa1aa; --ink-faint: #6d747d; --ink-fainter: #4a5157;
    --hover-bg: #1b1f23; --active-bg: #22262b; --chip-bg: #22262b;
    --accent: #93a9be; --made: #7cc5a0; --made-bg: #16261e; --warn: #d9b26a; --warn-bg: #2a2416;
    --pick: #f0a374; --pick-bg: #2c1d14;
    --hot: #f08a8f; --hot-bg: #2c1618; --run: #8fb8ea; --run-bg: #16212e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101214; --surface: #16181b; --line: #24282d;
  --ink: #d3d7dc; --ink-soft: #9aa1aa; --ink-faint: #6d747d; --ink-fainter: #4a5157;
  --hover-bg: #1b1f23; --active-bg: #22262b; --chip-bg: #22262b;
  --accent: #93a9be; --made: #7cc5a0; --made-bg: #16261e; --warn: #d9b26a; --warn-bg: #2a2416;
  --pick: #f0a374; --pick-bg: #2c1d14;
  --hot: #f08a8f; --hot-bg: #2c1618; --run: #8fb8ea; --run-bg: #16212e;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.logo { font-family: "Dancing Script", "Segoe Script", cursive; font-size: 26px; text-decoration: none; white-space: nowrap; }
.tabs { display: flex; gap: 20px; }
.tabs button { color: var(--ink-soft); padding: 4px 0; white-space: nowrap; }
.tabs button.on { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.tabs .n { font-size: 12px; color: var(--ink-faint); }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search input {
  width: 220px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); padding: 6px 10px; font: inherit; font-size: 14px;
}

/* Layout */
.wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; max-width: 1240px; margin: 0 auto; padding: 28px 32px 80px; }
.side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 8px; }
.group { margin-bottom: 22px; }
.chip { display: inline-block; font-size: 12px; color: var(--ink-soft); background: var(--chip-bg); border-radius: 4px; padding: 1px 8px; margin: 0 0 6px; }
.item { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; padding: 6px 10px; border-radius: 8px; color: var(--ink); }
.item:hover { background: var(--hover-bg); }
.item.on { background: var(--active-bg); font-weight: 600; }
.item .c { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.more { font-size: 13px; color: var(--ink-faint); padding: 4px 10px; }
.updated { font-size: 12px; color: var(--ink-faint); margin-top: 28px; }

/* List bar */
.bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.periods { display: flex; gap: 14px; }
.periods button { color: var(--ink-soft); }
.periods button.on { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.toggle { font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.count { margin-left: auto; font-size: 13px; color: var(--ink-faint); }

/* List */
.list { list-style: none; margin: 0; padding: 0; }
.gh { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 26px 0 4px; border-bottom: 1px solid var(--line); }
.gh .c { font-weight: 400; color: var(--ink-faint); margin-left: 6px; }
.row { border-bottom: 1px solid var(--line); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 4px 15px; cursor: pointer; }
.head:hover .t { text-decoration: underline; text-decoration-color: var(--ink-fainter); text-underline-offset: 4px; }
.meta { font-size: 12px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 0 6px; }
.meta .sep::before { content: "·"; }
.t { font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; }
.row.skip .t { color: var(--ink-faint); }
.flags { display: flex; gap: 6px; align-items: center; }
.badge { font-size: 12px; border-radius: 4px; padding: 1px 7px; white-space: nowrap; text-decoration: none; }
.badge.made { color: var(--made); background: var(--made-bg); }
.badge.sim { color: var(--warn); background: var(--warn-bg); }
.badge.picked { color: var(--pick); background: var(--pick-bg); }
.badge.vid { color: var(--ink-soft); background: var(--chip-bg); }
.badge.hot { color: var(--hot); background: var(--hot-bg); }
.badge.review { color: var(--pick); background: var(--pick-bg); font-weight: 600; }
.badge.job { color: var(--run); background: var(--run-bg); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.badge.fail { color: var(--hot); background: var(--hot-bg); }
.badge.src { color: var(--ink-soft); background: var(--chip-bg); }
.badge.act { background: var(--chip-bg); font-variant-numeric: tabular-nums; }
.badge.act.hi { color: var(--made); background: var(--made-bg); }
.badge.act.mid { color: var(--ink-soft); }
.badge.act.lo { color: var(--ink-faint); }
.pickbtn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-fainter); }
.pickbtn:hover { background: var(--hover-bg); color: var(--ink-soft); }
.pickbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.row.pick .pickbtn { color: var(--pick); }
.row.pick .pickbtn svg { fill: currentColor; }

/* Expanded detail */
.detail { padding: 0 4px 20px; display: none; }
.row.open .detail { display: block; }
.detail p { margin: 0 0 10px; color: var(--ink); }
.detail .angle { color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: 12px; }
.detail .lbl { font-size: 12px; color: var(--ink-faint); margin-right: 6px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; margin: 12px 0; }
.links a { color: var(--accent); text-decoration: none; }
.links a:hover { text-decoration: underline; }
.similar { font-size: 13px; color: var(--warn); margin: 0 0 10px; }
.similar a { color: inherit; }
.made-list { font-size: 13px; color: var(--made); margin: 0 0 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn { font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; color: var(--ink-soft); background: var(--surface); }
.btn:hover { background: var(--hover-bg); color: var(--ink); }
.btn.primary.on { border-color: var(--pick); color: var(--pick); background: var(--pick-bg); }
.media { margin-top: 14px; }
.media img { display: block; max-width: 420px; width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.media .yt { position: relative; max-width: 560px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.upload { display: flex; gap: 18px; align-items: flex-start; margin: 4px 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.upload .short { width: 240px; max-height: 70vh; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; flex: none; }
.uinfo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.uinfo strong { font-size: 16px; }
.uinfo a { color: var(--accent); font-size: 14px; }
.uinfo .btn.on { background: var(--active-bg); color: var(--ink); }
.panel { display: grid; gap: 6px; width: 100%; max-width: 520px; padding: 10px 12px; border-radius: 8px; background: var(--hover-bg); }
.panel input, .panel textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; resize: vertical;
}
.panel .btn { justify-self: start; }
.uinfo .qa { width: 100%; max-width: 640px; border-radius: 8px; border: 1px solid var(--line); }
.uinfo .err { color: var(--hot); font-size: 13px; margin: 0; }
.perf { font-size: 13px; color: var(--ink-soft); }
.made-list .stat { color: var(--ink-faint); margin-left: 4px; }
.visual { margin: 12px 0; }
.visual img { display: block; width: 100%; max-width: 560px; border-radius: 8px; border: 1px solid var(--line); }
.visual p { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.cluster { margin: 10px 0; font-size: 13px; }
.cluster ul, .draft ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); }
.cluster a { color: var(--accent); }
.linkbtn { color: var(--accent); font-size: 13px; }
.linkbtn:hover { text-decoration: underline; }
.draft { margin: 12px 0; padding: 10px 12px; background: var(--hover-bg); border-radius: 8px; font-size: 14px; }
.draft ul { color: var(--ink); margin-bottom: 6px; }
.draft p { margin: 0; }
.note { margin: 14px 0 4px; display: grid; gap: 6px; max-width: 560px; }
.note textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical;
}
.note .btn { justify-self: start; }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn.make { border-color: var(--run); color: var(--run); font-weight: 600; }
.btn.make:hover { background: var(--run-bg); color: var(--run); }
.job { margin: 12px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); max-width: 560px; font-size: 14px; }
.job.queued, .job.running { border-color: var(--run); background: var(--run-bg); }
.job.done { border-color: var(--made); background: var(--made-bg); }
.job.failed { border-color: var(--hot); background: var(--hot-bg); }
.job .jh { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.job .jh a { color: var(--accent); }
.job .err { color: var(--hot); font-size: 13px; margin: 6px 0 0; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; color: var(--ink-soft); max-height: 180px; overflow-y: auto; }
.steps time { color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: 4px; }
.steps .msg { color: var(--ink-faint); }
.codes { font-size: 12px; color: var(--ink-faint); margin-top: 10px; }
.empty { color: var(--ink-soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-top: 14px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg); font-size: 14px; padding: 8px 14px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Mobile */
@media (max-width: 860px) {
  .top { height: auto; flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; gap: 18px; }
  .search { margin-left: auto; }
  .search input { width: 150px; }
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 16px 60px; }
  .side { position: static; max-height: none; overflow: visible; padding: 0; min-width: 0; }
  .main { min-width: 0; }
  .group { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 4px; align-items: center; max-width: 100%; scrollbar-width: none; }
  .group::-webkit-scrollbar { display: none; }
  .group > div { display: contents; }
  .chip { margin: 0; flex: none; }
  .item { width: auto; flex: none; padding: 4px 10px; white-space: nowrap; }
  .more, .updated { display: none; }
  .bar { gap: 14px; margin-top: 6px; }
  .head { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .flags .badge.vid, .flags .badge.src { display: none; }
  .upload { flex-direction: column; }
  .upload .short { width: 100%; max-width: 320px; align-self: center; }
  .flags { flex-wrap: wrap; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }