:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1d2330;
  --muted: #5c6577;
  --line: #e2e6ec;
  --accent: #2f5bea;
  --accent-soft: #e9efff;
  --ok: #19794a;
  --ok-soft: #e6f5ec;
  --warn: #9a6200;
  --warn-soft: #fff4dc;
  --bad: #b3261e;
  --bad-soft: #fdecea;
  --radius: 10px;
  --font: "Pretendard", "Segoe UI", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--font); word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 14px; }
button:hover:not(:disabled) { border-color: #b9c2d3; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.primary:hover:not(:disabled) { background: #2449c9; }
button.danger { color: var(--bad); }
button.small { padding: 3px 10px; font-size: 13px; }
a.btn { display: inline-block; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 14px; color: var(--ink); text-decoration: none; }
a.btn:hover { border-color: #b9c2d3; }
input[type=text], input[type=password], textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; }
textarea { min-height: 80px; resize: vertical; }
textarea.code { font-family: ui-monospace, Consolas, "Malgun Gothic", monospace; font-size: 13px; }
.preview { border: 1px dashed var(--line); border-top: 0; border-radius: 0 0 8px 8px; padding: 6px 10px; background: #fbfcfe; font-size: 14px; margin-top: -4px; }
.preview:empty { display: none; }
label { display: block; font-weight: 600; margin: 10px 0 4px; font-size: 14px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 4px 14px 4px 0; }

header.top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
header.top .bar { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
header.top .brand { font-weight: 800; font-size: 17px; text-decoration: none; color: var(--ink); }
header.top .brand small { font-weight: 600; color: var(--accent); margin-left: 4px; }
header.top nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
header.top nav a { white-space: nowrap; text-decoration: none; color: var(--muted); padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 14px; }
header.top nav a.active { background: var(--accent-soft); color: var(--accent); }
header.top .right { font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }

main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 80px; }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 18px; margin: 0 0 10px; }
h3 { font-size: 16px; margin: 16px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.cols { display: grid; gap: 0 16px; align-items: start; }
.cols > *, .grid2 > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.cols-title { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 10px; }

.chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #eef0f4; color: var(--muted); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.run { background: var(--accent-soft); color: var(--accent); }
.note { border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.note.warn { background: var(--warn-soft); color: #5c3b00; }
.note.bad { background: var(--bad-soft); color: #6b1612; }
.note.ok { background: var(--ok-soft); color: #0f4a2d; }
.note.info { background: var(--accent-soft); color: #1b3a99; }
.note ul { margin: 4px 0 0; padding-left: 18px; }

.drop { border: 2px dashed #c6cedb; border-radius: var(--radius); padding: 16px; text-align: center; background: #fbfcfe; cursor: pointer; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop img { max-width: 100%; max-height: 260px; border-radius: 6px; }
.drop.disabled { opacity: .45; pointer-events: none; }
.drop .clear { position: absolute; top: 6px; right: 6px; }

.list { display: flex; flex-direction: column; gap: 8px; }
.list .entry { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-decoration: none; color: inherit; }
.list .entry:hover { border-color: #b9c2d3; }
.list .entry .title { font-weight: 700; }

.rich p { margin: .35em 0; }
.rich p.bullet { margin: .15em 0 .15em .4em; }
.table-wrap { overflow-x: auto; margin: .5em 0; }
.rich table { border-collapse: collapse; font-size: 14px; }
.rich th, .rich td { border: 1px solid #cfd5df; padding: 4px 10px; text-align: center; }
.rich td { white-space: nowrap; }
.rich th { white-space: nowrap; }
.rich th { background: #f2f4f8; }
.katex { font-size: 1.05em; }
.katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px 16px; margin-top: 8px; }
.choices .c { display: flex; gap: 6px; align-items: baseline; }
.choices .c.answer { font-weight: 700; color: var(--ok); }

.steps { counter-reset: s; }
.step { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; margin: 12px 0; }
.step .head { font-weight: 700; }
.step .head .badge { display: inline-block; background: var(--accent); color: #fff; border-radius: 6px; padding: 0 7px; font-size: 12px; margin-right: 6px; }
.step .meta { font-size: 13.5px; color: var(--muted); }
.step .meta b { color: var(--ink); font-weight: 600; }

.edit-step { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #fbfcfe; }

.orig img { width: 100%; border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; background: #fff; }
.orig figure { margin: 0 0 12px; }
.orig figcaption { font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
/* Problem page: the original problem and the teacher's solution side by side (stacked on phones) */
.orig-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.orig-2 figure { margin: 0; }

.item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; }
.item > .head { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fafbfd; flex-wrap: wrap; }
.item > .head .num { font-weight: 800; }
.item > .body { padding: 14px 16px; }
details { border-top: 1px solid var(--line); }
details > summary { cursor: pointer; padding: 10px 16px; font-weight: 700; font-size: 14.5px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--muted); }
details[open] > summary::before { content: "▾ "; }
details > .inner { padding: 0 16px 14px; }
.panel details > summary { padding-left: 0; padding-right: 0; }
.panel details > .inner { padding-left: 0; padding-right: 0; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 14px; }
.kv .k { color: var(--muted); }
table.rules { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.rules td, table.rules th { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
table.rules.sys th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.rules.sys td:first-child { white-space: nowrap; }
table.rules.sys td:last-child .chip { white-space: nowrap; }
/* ---- 자료·결과: originals with their problem sets ---- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.tab { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.tab .count { color: var(--muted); font-weight: 700; margin-left: 2px; }
.tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab.on .count { color: #dfe6ff; }
.mat-list { display: grid; gap: 12px; }
.mat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mat-head { display: flex; gap: 14px; align-items: center; padding: 14px 16px; text-decoration: none; color: inherit; }
.mat-head:hover { background: #fafbfd; }
.mat-thumb { flex: 0 0 64px; width: 64px; height: 84px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; background: #f1f3f6; }
.mat-info { flex: 1; min-width: 0; }
.mat-title { font-weight: 700; font-size: 16px; }
.mat-state { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.mat-open { color: var(--accent); font-size: 13.5px; white-space: nowrap; }
.set-list { display: grid; }
.mat-card .set-list { border-top: 1px solid var(--line); background: #fafbfd; padding: 4px 16px 4px 94px; }
.set-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; text-decoration: none; color: inherit; border-bottom: 1px dashed var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row:hover .set-main b { color: var(--accent); }
.set-main { display: flex; flex-direction: column; min-width: 0; }
.set-state { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.panel .set-list .set-row { padding: 10px 2px; }

/* ---- 모델 비교 ---- */
a.button { display: inline-block; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px; background: var(--panel); color: var(--ink); white-space: nowrap; }
a.button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.cv2-orig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.cv2-orig img { height: 110px; width: auto; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; background: #fff; }
.cv2 { display: grid; gap: 12px; }
.cv2-row { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)) 150px; gap: 10px; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.cv2-model { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cv2-model > b { font-size: 16px; }
.cv2-cell { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: #f4f6fa; }
.cv2-cell.ok { background: var(--ok-soft); } .cv2-cell.ok b { color: var(--ok); }
.cv2-cell.warn { background: var(--warn-soft); } .cv2-cell.warn b { color: var(--warn); }
.cv2-cell.bad { background: var(--bad-soft); } .cv2-cell.bad b { color: var(--bad); }
.cv2-stage { font-size: 12px; color: var(--muted); font-weight: 600; }
.cv2-cell b { font-size: 15px; }
.cv2-why { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cv2-pdf { display: flex; align-items: center; justify-content: center; }
.cv2-check { margin-bottom: 18px; }
.cv2-h { margin: 6px 0 10px; }
.cv2-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; font-size: 13.5px; }
.cv2-table th, .cv2-table td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }
.cv2-table tr:first-child th { vertical-align: bottom; border-bottom: 2px solid var(--line); font-size: 14px; }
.cv2-table tr > th:first-child { width: 170px; font-weight: 600; }
.cv2-table tr.grp td { background: #f4f6fa; color: var(--accent); font-weight: 700; font-size: 12.5px; padding: 6px 10px; }
.cv2-score { font-size: 26px; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.cv2-score.ok, .cv2-pct.ok { color: var(--ok); } .cv2-score.warn, .cv2-pct.warn { color: #b97d10; } .cv2-score.bad, .cv2-pct.bad { color: var(--bad); }
.cv2-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: 13px; }
.cv2-mark.ok { background: var(--ok-soft); color: var(--ok); } .cv2-mark.warn { background: var(--warn-soft); color: var(--warn); } .cv2-mark.bad { background: var(--bad-soft); color: var(--bad); }
.cv2-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.cv2-quote summary { font-size: 13.5px; color: var(--accent); cursor: pointer; font-weight: 600; }
.cv2-quote blockquote { margin: 8px 0 4px; padding: 10px 14px; border-left: 3px solid var(--accent); background: #f6f8fd; border-radius: 0 8px 8px 0; font-size: 14px; color: var(--ink); }

/* ---- 학습 ---- */

/* ---- 시스템 안내 (teacher-facing) ---- */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 4px; }
.check-item { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line); }
.check-item::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.check-item b { display: block; font-size: 14.5px; }
.check-item span { font-size: 13px; color: var(--muted); }
.sys-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sys-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sys-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; }
.sys-card p { font-size: 13.5px; color: var(--muted); margin: 8px 0; }
.model-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; }
.model-eval { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.meter-row { display: grid; grid-template-columns: 76px 1fr 38px; align-items: center; gap: 8px; font-size: 13px; margin: 5px 0; }
.meter { height: 8px; background: #eef0f4; border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; }
.meter span.ok { background: var(--ok); } .meter span.warn { background: #d99a1e; } .meter span.bad { background: var(--bad); }
.meter-num { font-weight: 700; font-size: 13px; text-align: right; }
.sys-card.learn { background: #f8f9fc; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { background: #f8f9fc; border-radius: 10px; padding: 12px 14px; }
.stat-label { display: block; font-size: 13px; color: var(--muted); }
.stat b { font-size: 20px; }
.sys-card.price .price-big { font-size: 26px; font-weight: 800; margin: 10px 0 2px; color: var(--ink); }
.sys-card.price .price-big small { font-size: 13px; font-weight: 600; color: var(--muted); }
.sys-card.price.free .price-big { color: var(--ok); }
.price-lines { margin: 10px 0 8px; padding-left: 18px; font-size: 13.5px; }
.price-lines li { margin: 2px 0; }
.tiny { font-size: 11.5px; }
.cmp-cards { margin-bottom: 16px; }
.cmp-card { display: flex; flex-direction: column; gap: 8px; }
.cmp-tags { min-height: 22px; }
.cmp-score { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.cmp-big { font-size: 40px; font-weight: 800; line-height: 1; }
.cmp-big.ok { color: var(--ok); } .cmp-big.warn { color: #b97d10; } .cmp-big.bad { color: var(--bad); }
.cmp-unit { font-size: 16px; font-weight: 700; margin-right: 6px; }
/* 95% range of the score on a 0–100 track; the dot is the score itself */
.cmp-range { display: flex; flex-direction: column; gap: 4px; }
.cmp-band { position: relative; height: 8px; border-radius: 4px; background: var(--line); }
.cmp-band span { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--accent-soft); border: 1px solid #b9c8f6; }
.cmp-band i { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.cmp-table tr.cmp-total th, .cmp-table tr.cmp-total td { background: #fafbfd; }
.cmp-pct { font-size: 17px; } .cmp-pct.ok { color: var(--ok); } .cmp-pct.warn { color: #b97d10; } .cmp-pct.bad { color: var(--bad); }
.cmp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.cmp-facts span { display: block; font-size: 12px; color: var(--muted); }
.cmp-facts b { font-size: 15px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; min-width: 520px; }
.cmp-table th, .cmp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cmp-table tr:first-child th { font-size: 13px; color: var(--muted); border-bottom: 2px solid var(--line); }
.cmp-table tr > th:first-child { font-weight: 600; width: 28%; }
.cmp-table tr.grp td { background: #f4f6fa; font-weight: 700; font-size: 12.5px; color: var(--accent); padding: 6px 10px; }
.cmp-cell { display: grid; grid-template-columns: minmax(40px, 1fr) 42px; align-items: center; gap: 8px; }
.cmp-cell b { text-align: right; }
.plain-list { margin: 0; padding-left: 20px; }
.plain-list li { margin: 4px 0; }
pre.values { background: #f4f6f9; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; white-space: pre-wrap; margin: 6px 0; max-height: 220px; overflow: auto; }

.log { font-size: 13px; color: var(--muted); max-height: 180px; overflow: auto; background: #fafbfd; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.log div { white-space: pre-wrap; }

.overlay { position: fixed; inset: 0; background: rgba(15, 20, 30, .55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.overlay .box { background: #fff; border-radius: 12px; padding: 24px; width: min(380px, 100%); }
.zoom { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 60; overflow: auto; cursor: zoom-out; display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.zoom img { max-width: none; width: min(1400px, 100%); background: #fff; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1d2330; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 70; max-width: calc(100% - 32px); font-size: 14px; }
.toast.bad { background: var(--bad); }

@media (max-width: 860px) {
  .grid2, .cols-3, .cols-title { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: 1fr; }
  .kv .k { margin-top: 6px; }
  .cv2-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv2-model, .cv2-pdf { grid-column: 1 / -1; }
  .cv2-pdf { justify-content: flex-start; }
}

@media (max-width: 600px) {
  body { font-size: 14.5px; }
  main { padding: 14px 12px 60px; }
  h1 { font-size: 19px; }
  .panel { padding: 14px; }
  .cols-2, .cols-3-1 { grid-template-columns: minmax(0, 1fr); }
  table.rules.sys td:first-child { white-space: normal; overflow-wrap: anywhere; }
  table.rules.sys td, table.rules.sys th { padding: 6px 5px; overflow-wrap: anywhere; }
  .flow { flex-direction: column; align-items: stretch; }
  .mat-head { padding: 12px; gap: 10px; align-items: flex-start; }
  .mat-thumb { flex-basis: 48px; width: 48px; height: 64px; }
  .mat-open { display: none; }
  .cv2-row { grid-template-columns: minmax(0, 1fr); }
  .cv2-orig img { height: 80px; }
  .mat-card .set-list { padding: 2px 12px; }
  .set-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .set-state { align-items: flex-start; text-align: left; }
  .check-grid, .sys-cards.two, .stat-row { grid-template-columns: minmax(0, 1fr); }
  header.top .bar { padding: 8px 12px; gap: 6px 10px; }
  header.top nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -4px; }
  header.top .right { margin-left: auto; }
  .item > .head, .item > .body, details > summary, details > .inner { padding-left: 12px; padding-right: 12px; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drop { min-height: 110px; }
}

/* 모델 비교 on a phone: cards swipe sideways, wide tables keep their first column in view while they scroll. */
.mobile-only { display: none; }
@media (max-width: 600px) {
  .mobile-only { display: block; }
  .swipe-hint { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
  .cmp-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .cmp-cards > .cmp-card { scroll-snap-align: start; }
  .cmp-big { font-size: 34px; }
  .cmp-table { font-size: 12.5px; min-width: 560px; }
  .cmp-table th, .cmp-table td { padding: 7px 8px; }
  .cmp-table tr > :first-child:not([colspan]) { position: sticky; left: 0; z-index: 1; background: var(--panel); width: 118px; box-shadow: 1px 0 0 var(--line); }
  .cmp-table tr.cmp-total > :first-child { background: #fafbfd; }
  .cv2-table { min-width: 760px; font-size: 12.5px; }
  .cv2-table th, .cv2-table td { padding: 8px; }
  .cv2-table tr > th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); width: 128px; box-shadow: 1px 0 0 var(--line); }
  .grp-label { position: sticky; left: 8px; }
  .cv2-row { padding: 12px; gap: 8px; }
  .cv2-cell { padding: 8px 10px; }
  .cv2-pdf .button { width: 100%; text-align: center; }
}

/* model picker */
.providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.provider { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0; font-weight: 400; cursor: pointer; background: #fff; }
.provider:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.provider input { margin-top: 4px; }
.provider span { display: flex; flex-direction: column; }
.provider small { color: var(--muted); font-size: 12.5px; }
.provider.off { opacity: .55; cursor: not-allowed; }

/* shown while polling cannot reach the server */
.conn { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 40; background: var(--warn-soft); color: #5c3b00; border: 1px solid #f0d49a; border-radius: 8px; padding: 8px 14px; font-size: 13.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); max-width: calc(100% - 24px); }

/* Problem page: feedback input on one line, variant sets with their problems */
.fb-add-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fb-add-bar label { margin: 0; font-weight: 600; white-space: nowrap; }
.fb-add-bar select { width: auto; min-width: 96px; }

/* 전체 피드백: problem feedback grouped under each problem */

/* Header: the 기본 모델 */
.model-state { color: var(--muted); text-decoration: none; white-space: nowrap; }
.model-state b { color: var(--ink); }
.model-state:hover b { text-decoration: underline; }
@media (max-width: 600px) { .model-state { font-size: 12px; } .model-state .chip { display: none; } }

/* Variant review: verdict buttons, what the problem kept, quick feedback tags */
.item.adopted { border-color: #22a35a; box-shadow: 0 0 0 1px #22a35a inset; }
.review-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--soft, #f7f8fa); }
.review-bar button { font-weight: 600; }
.review-bar .rv-adopt.on { background: #22a35a; border-color: #22a35a; color: #fff; }
.fix-panel textarea { width: 100%; }

/* Problem page tabs and 학습 현황 */
.table-wrap { overflow-x: auto; }
/* LLM tab: one column of three sections; every model and instruction is a row that opens in place */
.lt { max-width: 860px; margin: 0 auto; display: grid; gap: 28px; }
.lt-head { display: flex; align-items: center; gap: 12px; }
.lt-head h1 { margin: 0 auto 0 0; }
.lt-sec { display: grid; gap: 10px; }
.lt-sec-head h2 { margin: 0; }
.lt-sec-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.lt-sec .panel { margin: 0; }
.lt-list { padding: 0; }
.lt-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.lt-row:first-child { border-top: 0; }
.lt-row.lt-plain { grid-template-columns: minmax(0, 1fr) auto; }
.lt-row > input[type=radio] { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.lt-main { display: grid; gap: 1px; min-width: 0; }
.lt-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.lt-tag { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0 8px; }
.lt-sub { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.lt-sub.lt-has { color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-dot { width: 7px; height: 7px; border-radius: 50%; background: #c3c9d4; flex: 0 0 auto; }
.lt-dot.ok { background: var(--ok); }
.lt-fact { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); }
.lt-money b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lt-meter { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.lt-meter b { color: var(--ink); min-width: 34px; text-align: right; }
.lt-bar { width: 56px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lt-bar i { display: block; height: 100%; }
.lt-bar i.ok { background: var(--ok); } .lt-bar i.warn { background: #d99a1e; } .lt-bar i.bad { background: var(--bad); }
.lt-more { grid-column: 1 / -1; display: none; gap: 12px; padding: 14px 0 2px; }
.lt-row:not(.lt-plain) .lt-more { grid-column: 2 / -1; }
.lt-row.open .lt-more { display: grid; }
.lt-row .lt-more.lt-more-open { display: grid; } /* 이 원본의 기록: always open */
.lt-row.open .lt-open { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.lt-more label { margin: 0 0 4px; font-size: 13px; }
.lt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lt-inline { display: flex; gap: 8px; }
.lt-note { margin: 0; font-size: 13px; color: var(--muted); }
.lt-actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.lt-actions .lt-base { flex: 1 1 0; min-width: 0; border: 0; }
.lt-actions .lt-base + .spacer { display: none; }
.lt-base > summary { padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.lt-base h4 { margin: 12px 0 4px; font-size: 13.5px; }
.lt-base pre.values { max-height: 280px; }
#claude-login:empty { display: none; }
#claude-login ol { margin: 4px 0; padding-left: 20px; }
.lt-checks p { margin: 0 0 8px; }
.lt-checks details { border: 0; }
.lt-checks details > summary { padding: 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.lt-check-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; margin-top: 8px; }
.lt-check-groups h3 { font-size: 14px; color: var(--muted); margin: 8px 0 4px; }
.lt-check-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lt-check-groups li b { display: block; font-size: 14px; }
.lt-check-groups li span { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .lt-row { grid-template-columns: 18px minmax(0, 1fr) auto; padding: 12px 14px; }
  .lt-fact { grid-column: 2 / -1; grid-row: 2; }
  .lt-row:not(.lt-plain) .lt-more { grid-column: 1 / -1; }
  .lt-fields, .lt-check-groups { grid-template-columns: minmax(0, 1fr); }
}
/* Problem page: same rows as the LLM tab, in the order of the loop */
.lt-title h1 { margin: 0; text-wrap: balance; }
.lt-meta { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.lt-sec-row { display: flex; align-items: flex-end; gap: 12px; }
.lt-sec-row > div { flex: 1; min-width: 0; }
.lt-list.editing { padding: 18px; }
.lt-row.lt-pick { grid-template-columns: 18px minmax(0, 1fr) auto; }
.lt-row > input[type=checkbox] { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); align-self: start; margin-top: 4px; }
.lt-row.lt-set { grid-template-columns: minmax(0, 1fr) auto auto; }
.lt-row.lt-set .lt-more { grid-column: 1 / -1; }
.lt-row.off .lt-main { opacity: .6; }
.lt-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-row.open .lt-name.lt-clip { white-space: normal; }
.lt-sub.lt-wrap { display: block; }
.lt-sub .bad, .lt-fact .bad, .lt-meta .bad, .jt-check .bad { color: var(--bad); font-weight: 600; }
.lt-sub .warn, .jt-check .warn { color: var(--warn); font-weight: 600; }
.lt-fact .run { color: var(--accent); font-weight: 600; }
.lt-sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
a.lt-name { color: var(--ink); text-decoration: none; }
a.lt-name:hover { color: var(--accent); }
.lt-dot.warn { background: #d99a1e; } .lt-dot.bad { background: var(--bad); } .lt-dot.run { background: var(--accent); }
.lt-name .lt-dot { display: inline-block; }
.lt-thumbrow { display: flex; align-items: center; gap: 12px; }
.lt-thumbs { display: flex; gap: 6px; flex: 0 0 auto; }
.lt-thumbs img { width: 48px; height: 48px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; background: #fff; }
.lt-ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.lt-kv { display: flex; gap: 10px; font-size: 14px; }
.lt-kv b { flex: 0 0 auto; color: var(--muted); font-weight: 600; }
.lt-more .rich { min-width: 0; overflow-x: auto; }
.lt-more textarea { width: 100%; }
.lt-actions select { width: auto; }
.lt-off { border-top: 1px solid var(--line); }
.lt-off > summary { padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lt-items { display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lt-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
.lt-item:first-child { border-top: 0; }
.lt-item:hover { background: var(--bg); }
.lt-item-text { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-state { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lt-state.ok { color: var(--ok); } .lt-state.warn { color: var(--warn); } .lt-state.bad { color: var(--bad); } .lt-state.run { color: var(--accent); }

/* Set page: the problem first, one check line, the review right under it */
.jt-head { gap: 10px; margin-bottom: 18px; }
.lt-back { font-size: 14px; color: var(--muted); text-decoration: none; }
.lt-back:hover { color: var(--accent); }
.jt-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jt-jump { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.jt-jump button { white-space: nowrap; font-size: 13px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; }
.jt-log { border: 0; }
.jt-log-in { padding: 4px 0; }
.jt-log-in p { margin: 6px 0; }
.item > .head .spacer { flex: 1; }
.jt-check { border: 1px solid var(--line); border-radius: 8px; margin-top: 14px; font-size: 14px; }
.jt-check > summary { padding: 8px 12px; font-weight: 500; font-size: 14px; }
.jt-check.bad { border-color: #e7b0b0; }
.jt-check-in { padding: 0 12px 10px; display: grid; gap: 8px; }
.review-bar { background: none; border-top: 1px solid var(--line); border-bottom: 0; }
.fix-panel { border-top: 0; }
.fix-panel > summary { display: none; }
.fix-in { padding: 0 16px 14px; display: grid; gap: 8px; }
@media (max-width: 640px) {
  .lt-thumbs img { width: 40px; height: 40px; }
  .lt-sec-row { align-items: flex-start; }
  .lt-row.lt-set { grid-template-columns: minmax(0, 1fr) auto; }
  .lt-row.lt-set .lt-fact { grid-column: 1 / -1; grid-row: 2; }
  .lt-item { grid-template-columns: minmax(0, 1fr) auto; }
  .lt-item-text { grid-column: 1 / -1; grid-row: 2; }
  .review-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-bar button { padding: 7px 4px; }
}
#items { max-width: 860px; margin: 0 auto; }
.jt-jump { scrollbar-width: none; }
.jt-jump::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .rv-long { display: none; } }
/* Problem page feedback: what is applied now, by when it is used, then one box to add more */
.lt-sec-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.fb-wrap { display: grid; gap: 10px; }
.fb-kind { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 18px 8px; background: var(--bg); border-top: 1px solid var(--line); font-size: 13px; }
.fb-kind:first-child { border-top: 0; border-radius: var(--radius) var(--radius) 0 0; }
.fb-kind b { font-size: 14px; }
.fb-kind > span:nth-of-type(1) { font-weight: 700; color: var(--accent); }
.fb-kind .muted { margin-left: auto; font-size: 12.5px; }
.fb-empty { padding-block: 10px; }
.fb-new { display: grid; gap: 10px; }
.fb-new textarea { width: 100%; }
@media (max-width: 640px) { .fb-kind .muted { margin-left: 0; flex-basis: 100%; } .lt-sec-row { flex-wrap: wrap; } }
.lt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt-row.open .lt-clamp { -webkit-line-clamp: unset; }
/* Problem page: two stages, each result → feedback → do it again */
.stage-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.stage-tabs button { border: 0; border-radius: 0; background: none; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; min-width: 0; }
.stage-tabs button + button { border-left: 1px solid var(--line); }
.stage-tabs button:hover:not(.on) { background: var(--bg); }
.stage-tabs button.on { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.stage-no { width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.stage-tabs .on .stage-no { background: var(--accent); color: #fff; }
.stage-txt { display: grid; min-width: 0; }
.stage-txt b { font-size: 15px; }
.stage-tabs .on .stage-txt b { color: var(--accent); }
.stage-txt small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-txt small .warn { color: var(--warn); font-weight: 600; }
.stage { display: grid; gap: 28px; }
.fb-target-label { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .stage-tabs button { padding: 10px; gap: 8px; } .stage-no { display: none; } .stage-txt b { font-size: 14px; } .stage-txt small { white-space: normal; } }
.stage[hidden] { display: none; }
.fb-new .lt-actions { align-items: center; }
/* Problem name: heading with 제목 수정, or the small form in its place */
.name-show { display: flex; align-items: flex-start; gap: 12px; }
.name-text { flex: 1; min-width: 0; }
.name-show[hidden], .name-form[hidden] { display: none; }
.name-form { display: grid; gap: 10px; margin: 0; }
.name-form label { margin: 0 0 4px; font-size: 13px; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .name-row { grid-template-columns: minmax(0, 1fr); } }
/* The problem's progress: five steps and one line on what is happening now */
.flow { display: grid; gap: 8px; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fs { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.fs-dot { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--line); color: var(--muted); }
.fs-txt { display: grid; min-width: 0; line-height: 1.3; }
.fs-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs.done .fs-dot { background: var(--ok-soft); color: var(--ok); }
.fs.run .fs-dot { background: var(--accent-soft); color: var(--accent); }
.fs.warn .fs-dot { background: var(--warn-soft); color: var(--warn); }
.fs.bad .fs-dot { background: var(--bad-soft); color: var(--bad); }
.fs.todo { opacity: .65; }
.fs.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; opacity: 1; }
.fs.current.warn { border-color: #d99a1e; box-shadow: 0 0 0 1px #d99a1e inset; }
.flow-now { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); }
.flow-now > span { flex: 1; min-width: 0; }
.flow-now.run { background: var(--accent-soft); border-color: transparent; color: #1b3a99; }
.flow-now.warn { background: var(--warn-soft); border-color: #f0d49a; color: #5c3b00; }
.flow-now.bad { background: var(--bad-soft); border-color: #e7b0b0; color: var(--bad); }
.flow-now .btn, .flow-now button { flex: 0 0 auto; white-space: nowrap; }
.spin { display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
.fs-dot .spin, .flow-now .spin { margin-right: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
.jt-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.jt-bar span { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.jt-wait { margin: 0; }
@media (max-width: 640px) {
  .flow-steps { gap: 3px; }
  .fs { flex-direction: column; gap: 4px; padding: 6px 2px; text-align: center; }
  .fs-txt b { font-size: 12px; } .fs-txt small { font-size: 10.5px; }
  .flow-now { flex-wrap: wrap; }
}
/* 학습: the count of each kind by where it applies */
.learn-sum { padding: 6px 18px; }
.learn-table2 { width: 100%; border-collapse: collapse; font-size: 14px; }
.learn-table2 th, .learn-table2 td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.learn-table2 tr:last-child th, .learn-table2 tr:last-child td { border-bottom: 0; }
.learn-table2 tr:first-child th { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.learn-table2 td { width: 34%; }
.learn-n { border: 0; background: var(--accent-soft); color: var(--accent); font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 13.5px; }
.learn-n small { font-weight: 500; color: var(--muted); margin-left: 2px; }
.fb-common { margin: 2px 2px 0; }
.fb-kind a.muted { margin-left: auto; font-size: 12.5px; color: var(--muted); }
/* Learning (docs/learning.md): the kind of each item, the box to teach more, "학습됨", the 출제 노트 */

/* 새 세트 만들기: each setting one row of small choices, then what will be made and the button */
.gen-form { display: grid; }
.gen-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.gen-row:first-child { border-top: 0; padding-top: 0; }
.gen-row[hidden] { display: none; }
.gen-k { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.gen-v { font-size: 14px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { margin: 0; font-weight: 500; font-size: 13.5px; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); }
.opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt input:disabled + span { opacity: .45; cursor: not-allowed; }
.gen-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.gen-hint:empty { display: none; }
.gen-go { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
#estimate { flex: 1; min-width: 180px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) { .gen-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

.jt-howto { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.jt-howto b { color: var(--ink); font-weight: 600; }
.jt-need { margin-top: 14px; padding: 12px 14px; border: 1px solid #e7b0b0; background: var(--bad-soft); border-radius: 8px; display: grid; gap: 6px; font-size: 14px; }
.jt-need p { margin: 0; }
.jt-need details { border: 0; }
.jt-need details > summary { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--bad); }
/* 문제 리스트: one card per set, its problems as the staircase */
.stage-txt small .run { color: var(--accent); font-weight: 600; }
.set-list { display: grid; gap: 14px; }
.set-card { padding: 0; overflow: hidden; }
.set-card.busy { border-color: #c5d3fb; }
.set-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.set-title { flex: 1 1 260px; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.set-title a { font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; }
.set-title a:hover { color: var(--accent); }
.set-new { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0 8px; }
.set-meta { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.set-tally { display: flex; gap: 6px; flex-wrap: wrap; }
.set-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--bg); color: var(--muted); }
.set-pill.ok { background: var(--ok-soft); color: var(--ok); }
.set-pill.warn { background: var(--warn-soft); color: var(--warn); }
.set-pill.bad { background: var(--bad-soft); color: var(--bad); }
.set-pill.run { background: var(--accent-soft); color: var(--accent); }
.set-pill .spin { width: 11px; height: 11px; margin: 0; }
a.set-pill { text-decoration: none; }
.ck-table td, .ck-table th { white-space: nowrap; }
.ck-model + .ck-model { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.ck-model h3 { font-size: 14px; margin: 8px 0 4px; }
.ck-issues { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.ck-issues li { margin: 4px 0; }
.ck-scores { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 12px; }
.ck-score { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 120px; }
.set-later { margin: 0; padding: 8px 18px; font-size: 13px; color: var(--warn); background: var(--warn-soft); }
.set-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.set-items li + li { border-top: 1px solid var(--line); }
.set-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; color: var(--ink); text-decoration: none; }
.set-item:hover { background: var(--bg); }
.set-item:hover b { color: var(--accent); }
.si-no { width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.si-no.last { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.si-main { display: grid; min-width: 0; }
.si-main b { font-size: 14.5px; }
.si-text { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-empty p { margin: 0; flex: 1; color: var(--muted); }
.set-older { margin-top: 14px; border: 0; }
.set-older > summary { padding: 6px 0 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
@media (max-width: 640px) {
  .set-head { padding: 12px 14px; }
  .set-item { padding: 10px 14px; gap: 10px; }
  .set-later { padding: 8px 14px; }
}
/* 학습: 문제별 학습, one card per problem */
.lp-intro { margin: 0; color: var(--muted); font-size: 14px; }
.lp-list { display: grid; gap: 14px; }
.lp-card { padding: 0; overflow: hidden; }
.lp-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.lp-title { flex: 1; min-width: 0; display: grid; }
.lp-title a { font-size: 16.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.lp-title a:hover { color: var(--accent); }
.lp-meta { font-size: 13px; color: var(--muted); }
.lp-group { border-top: 1px solid var(--line); }
.lp-group h3 { margin: 0; padding: 10px 18px 0; font-size: 13px; color: var(--muted); font-weight: 700; }
.lp-group h3 .muted { font-weight: 600; margin-left: 2px; }
@media (max-width: 640px) { .lp-head { padding: 12px 14px; } .lp-group h3 { padding: 10px 14px 0; } }
.name-btns { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.name-btns .danger { border-color: transparent; background: none; }
.name-btns .danger:hover { background: var(--bad-soft); }
.set-del { border-color: transparent; background: none; color: var(--muted); }
.set-del:hover { color: var(--bad); background: var(--bad-soft); }
/* 세트 리포트 and each problem's report */
.jt-report { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 14px 18px; display: grid; gap: 6px; font-size: 14px; }
.jt-report h2 { margin: 0 0 2px; font-size: 16px; }
.jt-report p { margin: 0; }
.jt-report .bad { color: var(--bad); font-weight: 600; }
.jt-learned { margin-top: 6px; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; }
.jt-learned ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.jt-learned .lt-tag { background: #fff; }
.jt-report-item { margin-top: 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; display: grid; gap: 4px; }
.jt-report-item p { margin: 0; }
.jt-report-item.ok { background: var(--ok-soft); border-color: #bfe3cd; }
.jt-report-item.warn { background: var(--warn-soft); border-color: #f0d59a; }
.jt-report-item.bad { background: var(--bad-soft); border-color: #e7b0b0; }
.jt-report-item details { border: 0; }
.jt-report-item details > summary { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.jt-report-item .jt-check-in { padding: 8px 0 0; }
.jt-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.jt-steps .lt-ul { font-size: 13px; color: var(--muted); }
/* 학습 › 하네스 */
.hn-flow { margin: 0; padding: 14px 18px 14px 40px; display: grid; gap: 8px; font-size: 14px; }
.hn-flow li b { margin-right: 8px; }
.hn-flow li span { color: var(--muted); }
.hn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.hn-stats div { display: grid; gap: 2px; }
.hn-stats b { font-size: 22px; font-variant-numeric: tabular-nums; }
.hn-stats span { font-size: 13px; color: var(--muted); }
.hn-form { display: grid; gap: 14px; }
.hn-set { display: grid; grid-template-columns: 170px 90px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.hn-set label { margin: 0; font-weight: 600; font-size: 14px; }
.hn-set input { width: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }
.hn-set p { margin: 0; }
.hn-fail { font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: var(--bg); color: var(--muted); }
.hn-fail.rewrite { background: var(--accent-soft); color: var(--accent); }
.hn-fail.repair { background: var(--warn-soft); color: var(--warn); }
.hn-fail.answer { background: var(--bad-soft); color: var(--bad); }
.hn-fail.fix { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 640px) {
  .hn-set { grid-template-columns: minmax(0, 1fr) 90px; }
  .hn-set p { grid-column: 1 / -1; }
  .lt-row .hn-fail { grid-column: 1 / -1; justify-self: start; }
}
/* 학습: a plain tab row */
.lt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.lt-tab { border: 0; border-radius: 0; background: none; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lt-tab:hover { color: var(--ink); }
.lt-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.lt-tab em { font-style: normal; font-size: 12px; font-weight: 700; line-height: 18px; min-width: 18px; text-align: center; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--muted); }
.lt-tab.on em { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 640px) { .lt-tab { padding: 10px 8px; font-size: 14px; } }
/* LLM: every model open, no 관리 button */
.lt-row.lt-llm { grid-template-columns: 18px minmax(0, 1fr) auto; }
.lt-row.lt-llm .lt-more { padding-top: 10px; }
@media (max-width: 640px) { .lt-row.lt-llm .lt-fact { grid-column: 2 / -1; grid-row: 2; } }
.cli-code { font-size: 20px; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.set-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
a.btn.set-open { font-weight: 600; color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
a.btn.set-open:hover { border-color: var(--accent); }
/* 로그인 · 계정 */
.login-box label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.acc-link { font-weight: 600; }
.acc-form { display: grid; gap: 10px; max-width: 520px; }
.acc-form label { display: block; margin: 0 0 4px; font-size: 13px; }
.acc-form p { margin: 0; }
.acc-add { margin-top: 10px; }
.acc-row { grid-template-columns: minmax(0, 1fr) auto; }
.acc-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acc-reset { grid-column: 1 / -1; display: flex; gap: 6px; }
.acc-reset[hidden] { display: none; }
.acc-reset input { max-width: 260px; }
@media (max-width: 640px) { .acc-row { grid-template-columns: minmax(0, 1fr); } .acc-acts { justify-content: flex-start; } }

/* 학습 › 학습 지도: summary tiles, the tree of where items apply beside the items of the chosen branch, then 정리 후보. */
.lt.lm { max-width: 1080px; gap: 18px; }
.lm-pane { display: grid; gap: 16px; min-width: 0; }
.lm-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.lm-tree { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; gap: 1px; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; }
.lm-group { font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 8px 4px; letter-spacing: .02em; }
.lm-none { margin: 0; padding: 4px 22px; font-size: 13px; color: var(--muted); }
.lm-node { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 7px; background: none; text-align: left; width: 100%; font-size: 14px; }
.lm-node:hover:not(:disabled) { background: var(--bg); }
.lm-node.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lm-node.d1 { padding-left: 18px; }
.lm-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-node .n { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lm-main { display: grid; gap: 12px; min-width: 0; }
.lm-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lm-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.lm-head h2 { margin: 0; font-size: 18px; }
.lm-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.lm-count { margin: 0; font-size: 13px; color: var(--muted); }
.lm-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lm-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); }
.lm-item + .lm-item { border-top: 1px solid var(--line); }
.lm-pick { display: flex; align-items: flex-start; justify-content: center; padding: 14px 0 0 10px; }
.lm-pick input { margin: 0; width: 15px; height: 15px; accent-color: var(--accent); }
.lm-item .lm-detail { grid-column: 2; }
.lm-item.open .lm-row { padding-bottom: 6px; }
.lm-item.off .lm-txt strong { color: var(--muted); }
.lm-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 14px; width: 100%; border: 0; border-radius: 0; background: none; text-align: left; }
.lm-row:hover:not(:disabled) { background: var(--bg); }
.lm-row.lm-static:hover { background: none; }
.lm-txt { min-width: 0; display: grid; gap: 4px; }
.lm-txt strong { font-weight: 500; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lm-item.open .lm-txt strong { display: block; }
.lm-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.lm-chip { font-size: 11.5px; padding: 0 7px; border-radius: 999px; background: #eef0f4; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-chip.auto { background: var(--accent-soft); color: var(--accent); }
.lm-detail { display: grid; gap: 10px; padding: 2px 14px 14px; }
.lm-kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 13px; }
.lm-kv dt { color: var(--muted); } .lm-kv dd { margin: 0; min-width: 0; }
.lm-quote { background: var(--bg); border-radius: 8px; padding: 6px 10px; color: var(--muted); }
.lm-quote + .lm-quote { margin-top: 4px; }
.lm-edit { display: grid; gap: 8px; }
.lm-move { width: auto; padding: 3px 8px; font-size: 13px; }
.lm-persona { padding-top: 14px; }
.lm-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 14px; }
.lm-add { display: grid; gap: 8px; }
.lm-add textarea { min-height: 60px; }
.lm-inbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lm-inbox-head { padding: 11px 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.lm-inbox-head span { color: var(--muted); font-size: 13px; }
.lm-cand { padding: 12px 14px; display: grid; gap: 8px; }
.lm-cand + .lm-cand { border-top: 1px solid var(--line); }
.lm-cand p { margin: 0; }
.lm-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.lm-pair div { background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; min-width: 0; }
.lm-pair small, .lm-merged small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.lm-merged { border: 1px dashed var(--accent); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.lm-merged small { color: var(--accent); }
.lm-done { margin: 0; padding: 12px 14px; color: var(--ok); font-size: 13px; }
@media (max-width: 760px) {
  .lm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-body { grid-template-columns: minmax(0, 1fr); }
  .lm-tree { position: static; max-height: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
  .lm-group, .lm-none { display: none; }
  .lm-node, .lm-node.d1 { flex: 0 0 auto; width: auto; max-width: 220px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
  .lm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .lm-state { grid-column: 1 / -1; text-align: left; }
  .lm-pair { grid-template-columns: minmax(0, 1fr); }
}

/* 설명 page (guide-view.js): sections with inline SVG diagrams drawn from the tokens. */
.gd { max-width: 960px; margin: 0 auto; display: grid; gap: 28px; }
.gd-toc { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 58px; z-index: 5; background: var(--bg); padding: 6px 0; }
.gd-toc a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); text-decoration: none; font-size: 14px; }
.gd-toc a:hover { border-color: var(--accent); color: var(--accent); }
.gd-sec { display: grid; gap: 12px; scroll-margin-top: 110px; }
.gd-sec h2 { margin: 0; font-size: 21px; }
.gd-sec h3 { margin: 10px 0 0; font-size: 16px; }
.gd-sec p { margin: 0; max-width: 72ch; color: var(--ink); }
.gd-small { font-size: 13.5px; color: var(--muted) !important; }
.gd-use { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.gd-use li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 6px; align-content: start; position: relative; }
.gd-use li + li::before { content: '›'; position: absolute; left: -9px; top: 18px; color: var(--muted); font-weight: 700; }
.gd-use p { margin: 0; font-size: 13.5px; color: var(--muted); }
.gd-use small { font-size: 12px; color: var(--accent); font-weight: 600; }
.gd-no { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.gd-fig { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.gd-scroll { overflow-x: auto; }
.gd-svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.gd-scroll .gd-svg { min-width: 700px; }
.gd-node rect { fill: var(--panel); stroke: #c9d0dc; stroke-width: 1.2; }
.gd-node.accent rect { fill: var(--accent-soft); stroke: var(--accent); }
.gd-node.warn rect { fill: var(--warn-soft); stroke: #e3b45c; }
.gd-node.ok rect { fill: var(--ok-soft); stroke: #7cc39b; }
.gd-t { font-size: 15px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.gd-s { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.gd-l { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.gd-l.start { text-anchor: start; }
.gd-l.ok { fill: var(--ok); font-weight: 600; }
.gd-line { fill: none; stroke: #8d97a8; stroke-width: 1.6; }
.gd-line.dash { stroke-dasharray: 5 4; }
.gd-line.ok { stroke: var(--ok); }
.gd-arrowhead { fill: #8d97a8; }
.gd-axis { font-size: 13px; fill: var(--muted); text-anchor: middle; font-weight: 600; }
.gd-axis.end { text-anchor: end; fill: var(--ink); }
.gd-axis.start { text-anchor: start; }
.gd-grid { stroke: var(--line); stroke-width: 1; }
.gd-bar { fill: #b9c6ea; }
.gd-bar.final { fill: var(--accent); }
.gd-bar-t { font-size: 12.5px; fill: var(--ink); text-anchor: end; font-weight: 600; }
.gd-bar.final + .gd-bar-t { fill: #fff; }
.gd-note { font-size: 12.5px; fill: var(--muted); }
.gd-seg.p0 { fill: #d7dcea; } .gd-seg.p1 { fill: #2f5bea; } .gd-seg.p2 { fill: #5b7ff0; } .gd-seg.p3 { fill: #98b0f6; } .gd-seg.p4 { fill: #cfe3d7; } .gd-seg.p5 { fill: #eef0f4; }
.gd-seg-t { font-size: 13px; text-anchor: middle; fill: var(--ink); font-weight: 600; }
.gd-seg.p1 + .gd-seg-t, .gd-seg.p2 + .gd-seg-t { fill: #fff; }
.gd-cap { stroke: var(--bad); stroke-width: 2; stroke-dasharray: 4 3; }
.gd-layers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gd-layers div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.gd-layers b { font-size: 14px; }
.gd-layers span { font-size: 12.5px; color: var(--muted); }
.gd-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gd-check-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; border-top: 3px solid var(--line); }
.gd-check-col.answer { border-top-color: var(--bad); } .gd-check-col.repair { border-top-color: #d99a1e; } .gd-check-col.rewrite { border-top-color: var(--accent); }
.gd-check-col h4 { margin: 0 0 8px; font-size: 14px; }
.gd-check-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd-check-col li { display: grid; gap: 1px; }
.gd-check-col li b { font-size: 13.5px; }
.gd-check-col li span { font-size: 12.5px; color: var(--muted); }
.gd-table { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.gd-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gd-table th, .gd-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gd-table tr:last-child th, .gd-table tr:last-child td { border-bottom: 0; }
.gd-table thead th { background: var(--bg); font-size: 13px; color: var(--muted); }
.gd-table tbody th { white-space: nowrap; }
@media (max-width: 760px) {
  .gd-use, .gd-layers, .gd-checks { grid-template-columns: minmax(0, 1fr); }
  .gd-use li + li::before { content: none; }
  .gd-fig:not(.gd-scroll) { overflow-x: auto; }
  .gd-fig:not(.gd-scroll) .gd-svg { min-width: 620px; }
  .gd-toc { top: 0; position: static; }
}

/* 학습 지도 › 히트맵: items of a branch against every recent set; the subject tag chip. */
.lm-chip.subj { background: var(--ok-soft); color: var(--ok); }

/* 진행 상황 page (progress-view.js): the token-saving work, its rounds and what was kept or reverted. */
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pg-tile { display: grid; gap: 4px; }
.pg-tile span { color: var(--muted); font-size: 13px; }
.pg-tile b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pg-tile small { color: var(--muted); }
.pg-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.55; }
.pg-hist { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.pg-hist p { margin: 4px 0 0; color: var(--ink); line-height: 1.55; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13.5px; margin-bottom: 6px; }
.pg-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pg-legend small { color: var(--muted); }
.pg-chart { position: relative; overflow-x: auto; }
.pg-chart svg { width: 100%; min-width: 520px; height: auto; display: block; }
.pg-grid { stroke: var(--line); stroke-width: 1; }
.pg-axis { fill: var(--muted); font-size: 12px; }
i.pg-mm, path.pg-mm { background: #2a78d6; fill: #2a78d6; }
i.pg-nv, path.pg-nv { background: #eb6834; fill: #eb6834; }
.pg-hit:hover path { opacity: .8; }
.pg-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: 12.5px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; }
.pg-good { color: var(--ok); }
/* 모델 비교 · 혼합 모델: what the mix saves against Opus alone */
.save-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 10px 0; }
.save-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.save-card.win { border-color: var(--ok); background: var(--ok-soft); }
.save-title { font-weight: 800; margin-bottom: 8px; }
.save-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); }
.save-line:first-of-type { border-top: 0; }
.save-line span { color: var(--muted); }
.save-card.win .save-line b { color: var(--ok); }
.save-sub { text-align: right; color: var(--muted); font-size: 12px; margin-top: -3px; padding-bottom: 3px; }
.save-note { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.save-h { font-size: 16px; margin: 18px 0 6px; }
.save-up { color: var(--ok); } .save-down { color: var(--bad); }
.save-total { font-size: 16px; margin: 4px 0 10px; }
.save-sub-total th, .save-sub-total td { background: #fafbfd; }

/* 모델 비교: the long notes and the round log fold away. */
.cmp-note { margin-top: 12px; }
.cmp-note > summary { padding: 8px 0; font-weight: 600; color: var(--muted); }
.cmp-note > p, .cmp-note > .table-wrap { margin-top: 6px; }

/* 모델 비교 › 전체 비교: short cards, the price-quality chart and the price grid. */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.ov-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.ov-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.ov-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip.solo { background: #e8f1fc; color: #1c5cab; }
.chip.mix { background: #fdeee7; color: #b24316; }
.ov-score { font-size: 34px; font-weight: 800; line-height: 1; }
.ov-score small { font-size: 14px; font-weight: 600; margin-left: 2px; color: var(--muted); }
.ov-score.ok { color: #1a7f45; } .ov-score.warn { color: #b7791f; } .ov-score.bad { color: #c53030; }
.ov-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 0; font-size: 13px; }
.ov-facts dt { color: var(--muted); } .ov-facts dd { margin: 0; font-weight: 600; text-align: right; }
.ov-prices { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; border-top: 1px solid var(--line); }
.ov-prices th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 0; vertical-align: top; white-space: nowrap; }
.ov-prices td { text-align: right; padding: 6px 0; }
.ov-prices td span { display: block; }
.ov-chart-wrap { overflow-x: auto; }
.ov-chart { width: 100%; min-width: 600px; display: block; }
.ov-chart .ov-gl { stroke: #e7e9ef; stroke-width: 1; }
.ov-tick { font-size: 11px; fill: #6b7280; }
.ov-axis { font-size: 12px; fill: #4b5563; }
.ov-lbl { font-size: 12px; fill: #1f2937; font-weight: 600; }
.ov-sweet { fill: #e9f7ef; }
.ov-sweet-t { font-size: 11px; fill: #1a7f45; font-weight: 600; }
.ov-dot:hover .ov-lbl { text-decoration: underline; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; margin: 6px 0; }
.ov-legend svg { vertical-align: -2px; margin-right: 4px; }
.cost-matrix { min-width: 980px; }
.cost-matrix th, .cost-matrix td { word-break: keep-all; }
/* 모델 비교 1차 / 2차 */
.cmp-rounds { display: flex; gap: 8px; margin: 4px 0 16px; flex-wrap: wrap; }
.cmp-rounds .cmp-tab { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.cmp-rounds .cmp-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cmp-rounds .cmp-tab.on .muted { color: rgba(255, 255, 255, .8); }
/* An original's own rounds, under the originals. */
.cmp-round-sub { margin: 0 0 16px; }
.cmp-round-sub .cmp-tab { padding: 6px 13px; font-size: .92em; font-weight: 500; }

.train-card { margin-bottom: 12px; }
.train-table td { white-space: normal; vertical-align: top; }
.train-table td:first-child { white-space: nowrap; }
.set-history { margin: 0 0 12px; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.jt-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.jt-trust-sep { flex: 1; }
.ck-tabs { display: flex; gap: 4px; margin: 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ck-tabs button { border: 0; background: none; padding: 8px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; }
.ck-tabs button.on { color: inherit; border-bottom-color: currentColor; }

/* 학습 지도: 할 일, 선택해서 한꺼번에, 분류 머리, 이력 */
.lm-node.d2 { padding-left: 30px; font-size: 13.5px; }
.lm-q { width: 220px; max-width: 100%; padding: 6px 10px; font-size: 14px; }
.lm-count .linklike { border: 0; background: none; color: var(--accent); font-size: 13px; padding: 0 2px; cursor: pointer; }
.lm-cat { padding: 10px 14px 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--bg); border-top: 1px solid var(--line); grid-column: 1 / -1; }
.lm-cat .n { font-weight: 500; }
.lm-cat:first-child { border-top: 0; }
.lm-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.lm-chip.off { background: #f3e5e5; color: var(--bad); }
.lm-chip.ask { background: #fbf1dc; color: #8a5a00; }
.lm-hist + .lm-hist { margin-top: 6px; }
.lm-hist .lm-quote { margin-top: 2px; }
.lm-bulk { position: sticky; top: 8px; z-index: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); font-size: 13px; }
.lm-bulk b { margin-right: 4px; }
.lm-todos { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lm-todo { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; }
.lm-todo + .lm-todo { border-top: 1px solid var(--line); }
.lm-todo > b { font-size: 22px; font-variant-numeric: tabular-nums; text-align: center; }
.lm-todo strong { display: block; font-size: 14.5px; }
.lm-todo span { display: block; }
.lm-todo-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lm-cand-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lm-originals summary { font-size: 13px; color: var(--muted); cursor: pointer; padding: 2px 0; }
.lm-originals .lm-quote small { display: block; font-size: 11.5px; margin-bottom: 2px; }
@media (max-width: 720px) { .lm-todo { grid-template-columns: 40px minmax(0, 1fr); } .lm-todo-acts { grid-column: 2; justify-content: flex-start; } .lm-q { width: 100%; } }