/* 자동차 사고 과실비율 찾기 전용 스타일.
   공통 부품(.tkhead/.tkh/.tklead/.tkcard/.tknote/.tkchip…)은 /tools/assets/tools.css 를 쓴다.
   여기에는 이 서비스에만 있는 것 — 도표 고르는 목록, 과실비율 막대, 가감요소 줄 — 만 둔다. */

/* ── 3단계 중 마지막: 도표 고르기 ──────────────────────────────────
   칩으로 하기엔 글이 길어서(A와 B가 각각 어떻게 움직였는지를 다 적어야 한다)
   한 줄에 하나씩 세우고, 오른쪽에 기본 과실비율을 미리 보여 준다. */
.flt-charts{display:grid;gap:8px}
.flt-pick{position:relative;display:block}
.flt-pick input{position:absolute;opacity:0;width:0;height:0}
.flt-pick span.box{display:flex;align-items:center;gap:12px;border:1px solid var(--tk-line);background:#fff;
  border-radius:12px;padding:12px 14px;cursor:pointer;transition:.13s}
.flt-pick span.box:hover{border-color:var(--blue-surface);background:#FCFDFF}
.flt-pick input:checked + span.box{border-color:var(--blue);background:var(--light)}
.flt-pick input:focus-visible + span.box{outline:2px solid var(--blue);outline-offset:2px}
.flt-pick .nm{font-size:14px;font-weight:750;color:var(--deep);line-height:1.45;display:block}
.flt-pick .sub{font-size:12.2px;font-weight:600;color:var(--gray);margin-top:2px;display:block}
.flt-pick .rt{margin-left:auto;flex-shrink:0;font-size:13px;font-weight:850;color:var(--blue);white-space:nowrap}
.flt-pick .rt small{display:block;font-size:10.8px;font-weight:700;color:var(--muted);letter-spacing:.3px}

/* 결과 맨 위 카드. .tkhead 는 가운데 정렬이 기본인데, 여기는 도표 번호·경로·제목이
   왼쪽에서 시작해야 읽힌다. */
.flt-head{text-align:left;padding:24px 22px}
.flt-head .tkh{margin:10px 0 14px}

/* ── 결과: 내 쪽 고르기 ────────────────────────────────────────────
   도표는 두 당사자를 A·B 라고만 부른다. 어느 쪽이 나인지 정하지 않으면
   숫자를 읽어도 남의 이야기가 된다. 결과에서 제일 먼저 묻는 자리다. */
.flt-mine{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;
  background:var(--tk-surface);border:1px solid var(--tk-line);border-radius:12px;padding:10px 12px}
.flt-mine .lb{font-size:12.8px;font-weight:800;color:var(--gray);margin-right:2px}
.flt-mine button{flex:1 1 180px;font-family:inherit;text-align:left;background:#fff;cursor:pointer;
  border:1px solid var(--tk-line);border-radius:10px;padding:8px 12px;transition:.13s}
.flt-mine button:hover{border-color:var(--blue-surface)}
.flt-mine button b{display:block;font-size:13.4px;font-weight:750;color:var(--deep);line-height:1.4}
.flt-mine button small{display:block;font-size:11.4px;font-weight:600;color:var(--muted);margin-top:2px}
.flt-mine button[aria-pressed="true"]{border-color:var(--blue);background:var(--light)}
.flt-mine button[aria-pressed="true"] b{color:var(--blue-d)}
.flt-mine button[aria-pressed="true"] b::before{content:"내 쪽 ";font-weight:850;color:var(--blue)}

/* 숫자가 지갑에서 무슨 뜻인지 풀어 주는 줄 */
.flt-mean{font-size:13.6px;line-height:1.75;color:#33405A;margin:14px 0 0;
  background:var(--light);border-radius:11px;padding:11px 14px}

/* ── 결과: 케이스 탭 ───────────────────────────────────────────────
   한 도표 안에 (가)(나)(다) 가 있는 경우다. 선진입이냐 동시진입이냐처럼
   같은 사고에서 갈리는 갈래라, 고르면 아래 숫자와 가감요소가 통째로 바뀐다. */
.flt-cases{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.flt-cases button{font-family:inherit;font-size:13px;font-weight:750;color:var(--gray);background:#fff;
  border:1px solid var(--tk-line);border-radius:10px;padding:8px 13px;cursor:pointer;transition:.13s}
.flt-cases button:hover{border-color:var(--blue-surface);color:var(--blue)}
.flt-cases button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* ── 결과: 과실비율 막대 ────────────────────────────────────────────
   숫자 두 개를 크게 띄우고 그 사이를 막대로 잇는다. 가감요소를 켜면 이 막대만 다시 그린다. */
.flt-ratio{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:14px}
.flt-ratio .side{min-width:0}
.flt-ratio .side.b{text-align:right}
.flt-ratio .who{font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--muted);margin:0}
.flt-ratio .pct{font-size:44px;font-weight:900;letter-spacing:-2px;line-height:1.05;color:var(--deep);margin:2px 0 0}
.flt-ratio .pct span{font-size:19px;font-weight:800;letter-spacing:-.5px;margin-left:2px}
.flt-ratio .side.is-mine .pct{color:var(--blue)}
.flt-ratio .side.is-mine .who{color:var(--blue-d)}
.flt-ratio .vs{font-size:13px;font-weight:800;color:var(--muted);padding-bottom:10px}
.flt-ratio .act{font-size:13px;font-weight:700;color:#33405A;line-height:1.5;margin:6px 0 0}
.flt-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--tk-line-soft);margin:16px 0 0}
.flt-bar i{display:block;height:100%;transition:width .25s ease}
.flt-bar i.a{background:var(--blue)}
.flt-bar i.b{background:#9FB2CC}
.flt-bar.mine-b i.a{background:#9FB2CC}
.flt-bar.mine-b i.b{background:var(--blue)}
.flt-moved{font-size:12.5px;font-weight:750;color:var(--blue);margin:10px 0 0;text-align:center}
.flt-moved.warn{color:#9A4B06}
.flt-moved[hidden]{display:none}
@media(max-width:460px){
  .flt-ratio{gap:8px}
  .flt-ratio .pct{font-size:36px}
}

/* ── 결과: 가감요소 ────────────────────────────────────────────────
   왼쪽이 A 쪽 증감, 오른쪽이 B 쪽 증감이다. 0 인 쪽은 흐리게 두어
   "누구의 잘못으로 몇 %가 움직이는지"가 한눈에 보이게 한다. */
.flt-mods{display:grid;gap:6px;margin:12px 0 0}
.flt-mod{position:relative;display:block}
.flt-mod input{position:absolute;opacity:0;width:0;height:0}
.flt-mod span.row{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:10px;
  border:1px solid var(--tk-line);background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer;transition:.13s}
.flt-mod span.row:hover{border-color:var(--blue-surface);background:#FCFDFF}
.flt-mod input:checked + span.row{border-color:var(--blue);background:var(--light)}
.flt-mod input:focus-visible + span.row{outline:2px solid var(--blue);outline-offset:2px}
.flt-mod .t{font-size:13.2px;font-weight:700;color:var(--deep);line-height:1.45}
.flt-mod .v{font-size:13px;font-weight:850;text-align:center;color:var(--muted)}
.flt-mod .v.on{color:var(--blue)}
.flt-mod .v.minus{color:#1D8A5A}
.flt-mod-head{display:grid;grid-template-columns:52px 1fr 52px;gap:10px;padding:0 12px 6px;
  text-align:center;
  font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--muted)}
.flt-mod-head span:nth-child(2){text-align:left}

/* ── 결과: 근거·원문 ───────────────────────────────────────────────── */
.flt-src{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;
  padding-top:14px;border-top:1px solid var(--tk-line)}
.flt-law{font-size:12px;font-weight:700;color:var(--gray);background:#F2F5FA;border-radius:7px;padding:5px 9px}
.flt-src a{margin-left:auto;font-size:13px;font-weight:800;color:var(--blue);white-space:nowrap}
.flt-src a:hover{text-decoration:underline}
@media(max-width:520px){.flt-src a{margin-left:0}}

/* 같은 분류의 다른 도표로 바로 건너뛰기 */
.flt-more{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.flt-more button{font-family:inherit;font-size:12.6px;font-weight:700;color:#33405A;background:#fff;
  border:1px solid var(--tk-line);border-radius:9px;padding:7px 11px;cursor:pointer;transition:.13s}
.flt-more button:hover{border-color:var(--blue);color:var(--blue)}

/* 페이지 아래 정적 목록. 자바스크립트가 안 떠도 무엇을 다루는지 보이게 둔 자리다. */
.flt-index{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.flt-index li{display:flex;align-items:baseline;gap:9px;font-size:13.5px;color:#33405A;line-height:1.55;
  border-bottom:1px solid var(--tk-line-soft);padding-bottom:6px}
.flt-index li b{flex-shrink:0;font-size:12px;font-weight:800;color:var(--blue);background:var(--light);
  border-radius:6px;padding:3px 7px}
.flt-index li span{margin-left:auto;flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--gray);white-space:nowrap}