.recbtn{font:inherit;font-size:14px;font-weight:700;color:#fff;background:#dc2626;
  border:0;border-radius:99px;padding:9px 20px;cursor:pointer}
.recbtn:hover{background:#b91c1c}
.recbtn[disabled]{opacity:.5;cursor:default}
.recbtn.on{background:#111;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
#play{width:100%;max-width:420px;height:34px;margin:6px 0 2px}
.big2{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0}
.big2 .c{flex:1 1 210px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px}
.big2 .c .k{display:block;font-size:11px;color:var(--dim)}
.big2 .c b{font-size:25px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.big2 .c .u{font-size:12px;color:var(--dim);margin-left:6px}
.big2 .ok2{border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.big2 .no3{border-color:color-mix(in srgb,var(--no) 40%,transparent);
  background:color-mix(in srgb,var(--no) 8%,transparent)}
.flat{display:flex;align-items:flex-end;gap:3px;margin:12px 0 0}
.flat .b{flex:1;text-align:center;font-size:10.5px;color:var(--dim)}
.flat .b i{display:block;background:var(--acc);border-radius:3px 3px 0 0;
  margin-bottom:5px;opacity:.85;font-style:normal}

.big2 .age{border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  background:color-mix(in srgb,var(--acc) 11%,transparent)}
.big2 .age b{font-size:34px}
.warnbox{margin:14px 0 0;padding:12px 14px;border-radius:10px;
  background:color-mix(in srgb,var(--warn) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 38%,transparent)}
.warnbox p{margin:0 0 8px;font-size:12.5px}
.warnbox p:last-child{margin:8px 0 0;color:var(--dim)}
.warnbox table{max-width:420px;font-size:12.5px}
.hist{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:9px}
.hist .meta{margin:0 0 6px}

.vs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin:14px 0 0}
.side{border:1px solid var(--line);border-radius:11px;padding:14px 16px;background:var(--bg)}
.side .tag{display:block;font-size:10.5px;color:var(--dim);margin-bottom:4px;letter-spacing:.2px}
.side b{font-size:40px;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;line-height:1}
.side .u{font-size:14px;color:var(--dim);margin-left:4px}
.side.win{border-color:color-mix(in srgb,var(--ok) 50%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.side.lose{border-color:color-mix(in srgb,var(--no) 38%,transparent);
  background:color-mix(in srgb,var(--no) 7%,transparent)}
.cmp{margin-top:14px;max-width:560px}
.cmp th:first-child,.cmp td:first-child{width:auto}

/* 109 화자별 오차 표 — ±5년 안이면 초록, 벗어나면 빨강 */
td.num.ok{color:var(--ok);font-weight:600}
td.num.bad{color:var(--no);font-weight:600}