:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1d212a; --line:#2a2f3a;
  --text:#e6e8ec; --muted:#8b93a3; --accent:#5b8cff; --accent-dim:#2f4a8a;
  --warn:#e0a458; --danger:#e05a5a; --ok:#4caf7d;
  --row:#151821; --row-hover:#1b1f29; --row-active:#1e2740;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f6f8; --panel:#ffffff; --panel-2:#f0f2f5; --line:#dfe3ea;
    --text:#1a1d23; --muted:#6b7280; --accent:#2f6bff; --accent-dim:#c9d8ff;
    --row:#ffffff; --row-hover:#f3f5f9; --row-active:#e8efff;
  }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  display:flex;flex-direction:column;background:var(--bg);color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.spacer{flex:1}
.muted{color:var(--muted)}
.hidden{display:none !important}

header{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.brand{font-weight:700;letter-spacing:-.2px}
.stats{color:var(--muted);font-size:12px}

button,.chip,a.primary,a.ghost{
  font:inherit;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);padding:6px 11px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
button:hover,.chip:hover,a.primary:hover,a.ghost:hover{border-color:var(--accent)}
.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ghost{background:transparent}
.mini{padding:2px 7px;font-size:12px}
.round{width:34px;height:34px;border-radius:50%;padding:0}
kbd{
  font:11px ui-monospace,monospace;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;padding:1px 4px;color:var(--muted)
}
select,input[type=text],input[type=search]{
  font:inherit;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:7px;padding:6px 9px;
}

main{flex:1;display:flex;min-height:0}
#sidebar{
  width:290px;flex:0 0 290px;border-right:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;overflow:hidden;
}
.panel{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.panel.grow{flex:1;min-height:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:13px}
.hint{margin:0;font-size:11px;color:var(--muted);line-height:1.45}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 10px;font-size:12px}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.keys{margin:0;padding:0;list-style:none;font-size:12px;color:var(--muted);display:grid;gap:4px}

.glossary{overflow-y:auto;display:flex;flex-direction:column;gap:3px;min-height:0}
.term{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;font-size:13px}
.term:hover{background:var(--panel-2)}
.term input[type=checkbox]{margin:0}
.term .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term .s{font-size:11px;color:var(--muted)}
.term .x{opacity:0;border:none;background:none;color:var(--muted);padding:0 4px;cursor:pointer}
.term:hover .x{opacity:1}

#editor{flex:1;overflow-y:auto;padding:10px 14px 20px}
.empty{color:var(--muted);text-align:center;padding:60px 20px}

.row{
  /* 오른쪽 칸을 조금 넓혀 글상자를 줄였다. '수정 저장' 이 줄바꿈 없이
     글상자 바로 옆에 붙어야 '내가 고친 이 자리' 라는 것이 보인다. */
  display:grid;grid-template-columns:78px 1fr 124px;gap:8px;align-items:start;
  padding:8px 10px;border:1px solid transparent;border-radius:9px;background:var(--row);margin-bottom:5px;
}
.row:hover{background:var(--row-hover)}
.row.active{background:var(--row-active);border-color:var(--accent-dim)}
.row.done{opacity:.55}
/* 고친 줄에만 뜨는 '수정 저장'.
   위쪽 저장 단추 하나만으로는 '내가 고친 게 들어갔나' 를 알 수 없다.
   고친 자리 바로 옆에서 답해 주는 편이 낫다. */
.row.edited textarea{border-color:var(--accent-dim)}
.row .tools .mini.save{
  background:var(--accent);color:#fff;border-color:var(--accent);
  font-weight:600;white-space:nowrap;font-size:11px;padding:2px 6px;
}
.row .tools .mini.save:disabled{
  background:transparent;color:var(--muted);border-color:var(--line);
  font-weight:400;cursor:default;
}

/* 시각 칸은 '이 구간만 듣기' 단추다. 눌러 보이게 상자로 세운다 -
   그냥 글자만 있으면 누를 수 있는 줄을 모른다. */
.row .tc{
  display:flex;align-items:center;gap:7px;
  font:inherit;font-size:11px;color:var(--muted);text-align:left;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:6px 9px 6px 7px;cursor:pointer;transition:background .12s,border-color .12s;
}
.row .tc:hover{background:var(--row-hover);border-color:var(--accent-dim)}
.row .tc:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.row .tc b{display:block;color:var(--text);font-weight:600}
.row .tc .tc-play{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:9px;padding-left:1px;
}
.row .tc .tc-time{display:block;line-height:1.25}
/* 듣고 있는 줄은 한눈에 보이게. 다시 누르면 멈춘다는 뜻으로 ■ 로 바꾼다. */
.row.playing{border-color:var(--accent)}
.row.playing .tc{border-color:var(--accent);background:var(--row-active)}
.row.playing .tc .tc-play{font-size:8px;padding-left:0}
.row textarea{
  font:inherit;width:100%;resize:vertical;min-height:44px;background:transparent;
  color:var(--text);border:1px solid var(--line);border-radius:7px;padding:7px 9px;line-height:1.55;
}
.row textarea:focus{outline:none;border-color:var(--accent)}
.row .side{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
/* 단추를 칩보다 위에 둔다. 칩이 여러 줄이면 단추가 저 아래로 밀려
   글상자에서 멀어진다 - 그러면 붙여 놓은 뜻이 없다. */
.row .tools{display:flex;gap:3px;order:-1;align-items:flex-start}
.badges{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end}
.badge{font-size:10px;padding:1px 6px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.badge.term{color:var(--warn);border-color:var(--warn)}
.badge.hallucination,.badge.no_speech{color:var(--danger);border-color:var(--danger)}
.badge.fast,.badge.long{color:var(--accent);border-color:var(--accent-dim)}
.badge.corrected{color:var(--ok);border-color:var(--ok)}
.note{grid-column:2;font-size:11px;color:var(--warn);margin-top:-2px}
.cps{font-size:10px;color:var(--muted)}
.cps.over{color:var(--danger)}

footer#player{
  flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);padding:6px 14px 10px;
}
#wave{width:100%;height:56px;display:block;cursor:pointer}
.transport{display:flex;align-items:center;gap:14px;margin-top:6px;font-size:13px}
.toggle{display:flex;align-items:center;gap:5px;color:var(--muted);cursor:pointer}
.speed{display:flex;align-items:center;gap:5px;color:var(--muted)}

dialog{
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);
  padding:20px;min-width:400px;max-width:min(560px,92vw);
}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h3{margin:0 0 14px}
dialog label{display:block;margin-bottom:12px;font-size:13px;color:var(--muted)}
dialog label.row{display:flex;align-items:center;gap:7px}
dialog input[type=file],dialog input[type=text]{display:block;margin-top:5px;width:100%}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.job{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.bar{height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.issues{max-height:200px;overflow:auto;font-size:12px;color:var(--warn);display:grid;gap:3px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid2 input[type=number]{width:100%;font:inherit;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:7px;padding:6px 9px;margin-top:5px}
dialog hr{border:none;border-top:1px solid var(--line);margin:16px 0}
dialog h4{margin:0 0 10px;font-size:13px}
dialog input[type=password]{width:100%;font:inherit;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:7px;padding:7px 9px;margin-top:5px}
.needs-key{outline:2px solid var(--warn);outline-offset:2px}

#dlg-accuracy{width:min(880px,94vw);max-width:min(880px,94vw);max-height:88vh;overflow:auto}
dialog .wide{width:100%}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dlg-head h3{margin:0}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.metric{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.metric .k{font-size:11px;color:var(--muted)}
.metric .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.metric .d{font-size:11px;color:var(--muted);margin-top:2px}
.metric.good .v{color:var(--ok)} .metric.warn .v{color:var(--warn)} .metric.bad .v{color:var(--danger)}
table.mini{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
table.mini th,table.mini td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--line)}
table.mini th{color:var(--muted);font-weight:600}
table.mini td.num{text-align:right;font-variant-numeric:tabular-nums}
.acc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.acc-cols h4{margin:10px 0 0;font-size:12px}
.scroll{max-height:210px;overflow:auto}
.callout{border-left:3px solid var(--accent);background:var(--panel-2);padding:9px 12px;border-radius:0 8px 8px 0;font-size:12px;margin:12px 0;line-height:1.6}
.callout.warn{border-color:var(--warn)}
@media (max-width:720px){.acc-cols{grid-template-columns:1fr}}

.sugg{grid-column:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.sugg button{font-size:11px;padding:2px 9px;border-radius:20px;border:1px solid var(--warn);
  background:transparent;color:var(--warn);cursor:pointer;line-height:1.6}
.sugg button:hover{background:var(--warn);color:#111}
.sugg button.retry{border-color:var(--accent);color:var(--accent)}
.sugg button.retry:hover{background:var(--accent);color:#fff}
.sugg .x{border-color:var(--line);color:var(--muted);padding:2px 7px}
.sugg .x:hover{background:var(--line);color:var(--text)}


/* ---------------------------------------------------------------- 속기 채점표 */
.sc-table { width: 100%; border-collapse: collapse; margin: .6rem 0; }
.sc-table th, .sc-table td { padding: .5rem .7rem; text-align: center;
  border-bottom: 1px solid var(--line); }
.sc-table th { font-weight: 600; color: var(--muted); font-size: .85rem; }
.sc-table td { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-table .ok { color: #157347; }
.sc-table .bad { color: var(--danger); }
.sc-score { text-align: center; margin: .8rem 0 1rem; font-size: 1.05rem; }
.sc-score b { font-size: 2rem; font-variant-numeric: tabular-nums; }
.sc-legend { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 8px;
  padding: .7rem .8rem; font-size: .85rem; margin-bottom: .7rem; line-height: 2.4; }
.sc-body { line-height: 3.1; font-size: 1.02rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fafafa;
  max-height: 30rem; overflow: auto; word-break: keep-all; }

/* 받아쓴 글자를 정답 글자 위에 얹는다. ruby 를 쓰면 줄 높이가 어긋나지 않는다. */
ruby.sc-sub { color: var(--danger); font-weight: 700; ruby-position: over;
  background: #ffecec; border-radius: 2px; padding: 0 .08em; }
ruby.sc-sub rt { color: #0d6efd; font-weight: 700; font-size: .58em;
  line-height: 1.1; }
.sc-del { color: var(--danger); font-weight: 700; background: #ffecec;
  border-bottom: 2px dotted var(--danger); border-radius: 2px; padding: 0 .05em; }
.sc-ins { color: #0d6efd; font-weight: 700; text-decoration: line-through;
  text-decoration-thickness: 1.5px; opacity: .85; }


/* ---------------------------------------------------------------- 자동 교정 내역 */
/* 이미 바뀐 것은 초록. 아직 안 바뀐 제안(주황)과 눈에 띄게 갈라 놓는다.
   .row 는 3열 그리드라 .sugg 처럼 2열을 차지해야 가로로 눕는다. */
.fixed{grid-column:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.fixed .undo{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:0 0 auto;
  font-size:11px;padding:2px 9px;border-radius:20px;
  border:1px solid var(--ok);color:var(--ok);background:transparent;cursor:pointer;
}
.fixed .undo:hover{background:var(--ok);color:#0f1115}
.fixed .undo .back{
  font-size:10px;padding:0 5px;border-radius:20px;pointer-events:none;
  border:1px solid currentColor;opacity:.75;
}

/* 정확도 지도 — 색으로 '어디가 무너지는가'를 먼저 읽게 한다 */
td.num.ok{color:var(--ok)}
td.num.warn{color:var(--warn)}
td.num.bad{color:var(--danger);font-weight:700}

/* 두 번 듣고 갈린 낱말 — 여기만 다시 들으면 된다 */
.unsure{grid-column:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.unsure .pick{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:11px;padding:2px 9px;border-radius:20px;
  border:1px solid var(--danger);color:var(--danger);background:transparent;
}
.unsure .pick i{font-style:normal;opacity:.6}
.badge.unsure{color:var(--danger);border-color:var(--danger)}

/* 글 검토 제안 — 왜 고치라는지 이유를 칩 안에 함께 보여준다 */
.sugg button.read{border-color:var(--accent);color:var(--accent)}
.sugg button.read:hover{background:var(--accent);color:#fff}
.sugg button.read i{font-style:normal;opacity:.7;font-size:10px;margin-left:3px}
.badge.wording{color:var(--accent);border-color:var(--accent)}

/* CDMS 고르기 — 수백 편을 한 줄로 늘어놓으면 못 고른다. 프로젝트로 접는다 */
.cdms-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
#cdms-body{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.cg{border-bottom:1px solid var(--line)}
.cg:last-child{border-bottom:none}
.cg>summary{cursor:pointer;padding:8px 12px;font-weight:600;display:flex;gap:10px;align-items:center}
.cg>summary::-webkit-details-marker{display:none}
.cg>summary:hover{background:var(--row-hover)}
.cg .cnt{font-weight:400;font-size:12px;color:var(--muted)}
.cg .all{margin-left:auto;font-size:11px}
.ci{display:flex;gap:10px;align-items:center;padding:5px 12px 5px 30px;font-size:13px}
.ci:hover{background:var(--row-hover)}
.ci .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci .h{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.ci .st{font-size:11px;padding:1px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.ci.done .st{color:var(--ok);border-color:var(--ok)}
.ci.incomplete .st{color:var(--warn);border-color:var(--warn)}
.ci.done,.ci.incomplete{opacity:.6}

/* ---------------------------------------------------------------- 같은 오류 한꺼번에 */
/* .row 는 3열 그리드다. grid-column:2 를 안 주면 좁은 셋째 칸으로 떨어져
   세로로 길게 늘어진다(초록 칩에서 겪은 것과 같은 자리). */
.bulk-bar{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:6px;padding:5px 9px;border-radius:6px;font-size:12px;
  border:1px solid var(--accent);color:var(--text);background:transparent}
.bulk-bar b{color:var(--accent)}
.bulk-bar button{font-size:11px;padding:2px 9px;border-radius:20px;
  border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.bulk-bar button:hover{background:var(--accent);color:#fff}
.bulk-bar button.bulk-skip{border-color:var(--line);color:var(--muted)}
.bulk-bar button.bulk-skip:hover{background:var(--line);color:var(--text)}
#dlg-bulk td{font-size:.95rem;font-weight:400;text-align:left}
#dlg-bulk td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- 잠긴 단추 */
/* 일하는 동안 단추를 잠그면서 모양을 그대로 두면, 눌러도 되는 줄 알고
   다시 누르거나 "멈췄나" 하고 오해한다. 실제로 그런 일이 있었다.
   잠긴 것은 잠겨 보여야 한다. */
button:disabled,
button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(1);
}
button:disabled:hover,
button[disabled]:hover {
  background: inherit;
  color: inherit;
}
/* 일하는 중임을 한눈에: 글씨 옆에서 점이 돈다 */
button.working::after {
  content: "";
  display: inline-block;
  width: .55em; height: .55em;
  margin-left: .45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }