/* 이 파일은 `node build.js` 가 data/vehicles.json 을 보고 생성합니다.
   직접 고치지 마세요 — 다음 빌드에서 덮어써집니다.
   톤수와 무관한 스타일은 style.css 의 '톤수 탭 + 차량 카드' 블록에 있습니다. */

/* 선택된 톤수의 패널만 보인다 */
#tn-1t:checked ~ .tonnage-panel[data-tonnage="1t"],
#tn-1_4t:checked ~ .tonnage-panel[data-tonnage="1_4t"],
#tn-2_5t:checked ~ .tonnage-panel[data-tonnage="2_5t"],
#tn-3_5t:checked ~ .tonnage-panel[data-tonnage="3_5t"],
#tn-5t:checked ~ .tonnage-panel[data-tonnage="5t"],
#tn-11t:checked ~ .tonnage-panel[data-tonnage="11t"],
#tn-18t:checked ~ .tonnage-panel[data-tonnage="18t"],
#tn-22t:checked ~ .tonnage-panel[data-tonnage="22t"],
#tn-25t:checked ~ .tonnage-panel[data-tonnage="25t"] {
  display: block;
}

/* 선택된 탭 강조 — 이 페이지에서 레드를 쓰는 유일한 자리 */
#tn-1t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-1t"],
#tn-1_4t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-1_4t"],
#tn-2_5t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-2_5t"],
#tn-3_5t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-3_5t"],
#tn-5t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-5t"],
#tn-11t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-11t"],
#tn-18t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-18t"],
#tn-22t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-22t"],
#tn-25t:checked ~ .tonnage-tablist .tonnage-tab[for="tn-25t"] {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

/* 키보드 포커스 표시 */
#tn-1t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-1t"],
#tn-1_4t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-1_4t"],
#tn-2_5t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-2_5t"],
#tn-3_5t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-3_5t"],
#tn-5t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-5t"],
#tn-11t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-11t"],
#tn-18t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-18t"],
#tn-22t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-22t"],
#tn-25t:focus-visible ~ .tonnage-tablist .tonnage-tab[for="tn-25t"] {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* 전체 차량 비교 — 고르지 않은 톤수의 행을 숨긴다.
   '보이기'가 아니라 '숨기기'로 해야 한다. display 를 지정해 버리면
   모바일에서 표를 카드로 쌓는 규칙(display:block)까지 덮어써서 깨진다.
   '전체'(#vf-all)는 아무것도 숨기지 않으므로 규칙이 없다. */
#vf-1t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="1t"]),
#vf-1_4t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="1_4t"]),
#vf-2_5t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="2_5t"]),
#vf-3_5t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="3_5t"]),
#vf-5t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="5t"]),
#vf-11t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="11t"]),
#vf-18t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="18t"]),
#vf-22t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="22t"]),
#vf-25t:checked ~ .compare-scroll .compare-table tbody tr:not([data-tonnage="25t"]) {
  display: none;
}

/* 고른 필터 강조 */
#vf-all:checked ~ .vfilter-list .tonnage-tab[for="vf-all"],
#vf-1t:checked ~ .vfilter-list .tonnage-tab[for="vf-1t"],
#vf-1_4t:checked ~ .vfilter-list .tonnage-tab[for="vf-1_4t"],
#vf-2_5t:checked ~ .vfilter-list .tonnage-tab[for="vf-2_5t"],
#vf-3_5t:checked ~ .vfilter-list .tonnage-tab[for="vf-3_5t"],
#vf-5t:checked ~ .vfilter-list .tonnage-tab[for="vf-5t"],
#vf-11t:checked ~ .vfilter-list .tonnage-tab[for="vf-11t"],
#vf-18t:checked ~ .vfilter-list .tonnage-tab[for="vf-18t"],
#vf-22t:checked ~ .vfilter-list .tonnage-tab[for="vf-22t"],
#vf-25t:checked ~ .vfilter-list .tonnage-tab[for="vf-25t"] {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

#vf-all:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-all"],
#vf-1t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-1t"],
#vf-1_4t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-1_4t"],
#vf-2_5t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-2_5t"],
#vf-3_5t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-3_5t"],
#vf-5t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-5t"],
#vf-11t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-11t"],
#vf-18t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-18t"],
#vf-22t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-22t"],
#vf-25t:focus-visible ~ .vfilter-list .tonnage-tab[for="vf-25t"] {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}