/* 교통사고 벌금·합의금 계산기 전용 스타일.
   공통 부품(.tkhead/.tkh/.tklead/.tkcard/.tknote…)은 /tools/assets/tools.css 를 쓴다.
   여기에는 이 서비스에만 있는 것 — 죄명 카드, 12대 중과실 체크박스 — 만 둔다. */

/* 죄명 하나가 카드 한 칸. 조문 번호를 이름 바로 밑에 붙여, 어디서 나온 숫자인지
   화면에서 바로 확인할 수 있게 한다. */
.fine-charge{border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:#FBFCFE}
.fine-charge + .fine-charge{margin-top:10px}
.fine-charge .nm{font-size:15px;font-weight:850;color:var(--deep);margin:0}
.fine-charge .law{font-size:12.2px;font-weight:600;color:var(--blue);margin:2px 0 0}
.fine-charge .note{font-size:12.5px;line-height:1.7;color:var(--gray);margin:10px 0 0}

.fine-terms{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.fine-terms > div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.fine-terms dt{font-size:11.5px;font-weight:800;letter-spacing:.3px;color:var(--muted);margin:0 0 3px}
.fine-terms dd{margin:0;font-size:13.8px;font-weight:800;color:var(--deep);line-height:1.45}
@media(max-width:460px){.fine-terms{grid-template-columns:1fr}}

/* 12대 중과실 체크박스는 목록이 길어서 두 칸으로 세운다. */
.fine-graves{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fine-graves .tkchip span{padding:10px 13px;font-size:13.5px}
.fine-graves .tkchip span small{font-size:11.8px}
.fine-graves .tkchip span::before{content:attr(data-no);display:inline-block;min-width:19px;height:19px;
  line-height:19px;text-align:center;border-radius:6px;background:#EEF2F8;color:var(--muted);
  font-size:11px;font-weight:800;margin-right:8px;vertical-align:1px}
.fine-graves .tkchip input:checked + span::before{background:var(--blue);color:#fff}

.fine-actions{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}
.fine-actions .tkbtn{flex:1 1 220px}