/* 운전면허 2단계 페이지(course·road·fines) 전용. drive.css 위에 덧붙인다. */
nav.stages { display: flex; gap: 4px; overflow-x: auto; margin: 10px 0 4px; padding-bottom: 4px; scrollbar-width: thin; }
nav.stages a { flex: none; text-decoration: none; padding: 6px 10px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: var(--card); }
nav.stages a[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }
nav.stages span.arrow { flex: none; align-self: center; color: var(--muted); font-size: .8rem; }
table.law td.n, table.law th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.law tr.grp th { background: var(--accent-soft); color: var(--fg); }
.law-src { font-size: .8rem; color: var(--muted); }
.pass { display: inline-block; font-weight: 800; font-size: 1.1rem; padding: 2px 10px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }
ol.dq li, ul.dq li { margin: 4px 0; }

/* 범칙금·과태료·벌점 표 */
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 6px; }
.filters label { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; font-weight: 600; color: var(--muted); min-width: 0; }
.filters label.wide { grid-column: 1 / -1; }
.filters select, .filters input { font: inherit; font-size: .95rem; font-weight: 400; color: var(--fg); padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); min-width: 0; width: 100%; }
@media (min-width: 720px) { .filters { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } .filters label.wide { grid-column: auto; } }
.fcount { font-size: .88rem; color: var(--muted); margin: 6px 0; }
table.fines { font-size: .9rem; }
table.fines th { position: sticky; top: 0; background: var(--bg); z-index: 1; font-size: .8rem; }
table.fines td.amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.fines td.amt.none { color: var(--muted); text-align: center; }
table.fines td.pts { text-align: center; font-weight: 700; }
table.fines .ko-orig, table.fines .ctx, table.fines .rnote { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
table.fines .rnote { color: var(--warn); }
table.fines .ref { font-size: .8rem; color: var(--muted); }
.kb { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-right: 4px; vertical-align: 1px; }
.kb.fine { background: var(--accent-soft); color: var(--accent); }
.kb.penalty { background: var(--warn-soft); color: var(--warn); }
.kb.points { background: var(--bad-soft); color: var(--bad); }
.kb.zone { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 719px) {
  table.fines thead { display: none; }
  table.fines, table.fines tbody, table.fines tr, table.fines td { display: block; width: 100%; }
  table.fines tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 8px 0; background: var(--card); }
  table.fines td { border: 0; padding: 3px 0; }
  table.fines td.amt, table.fines td.pts { display: flex; justify-content: space-between; text-align: right; }
  table.fines td.amt.none { display: none; }
  table.fines td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 400; margin-right: 8px; text-align: left; }
}