.yearbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  border-top:1px solid var(--rule);padding:var(--s3) 0;margin-bottom:var(--s2)}
.yearbar input[type=range]{flex:1 1 260px;accent-color:var(--jade-deep);height:22px}
.yearbar output{font-weight:800;font-size:var(--t-h3);color:var(--jade-deep);
  font-variant-numeric:tabular-nums lining-nums;min-width:66px}
/* 이 두 화면이 더 쓰는 것. 색과 간격과 활자는 위의 눈금을 그대로 쓴다 */
.subnav{display:flex;flex-wrap:wrap;align-items:baseline;margin:0 0 var(--s5);
  border-bottom:1px solid var(--rule);padding-bottom:var(--s2)}
.subnav .lb{font-size:var(--t-cap);font-weight:700;color:var(--gray);padding-right:var(--s3)}
.subnav a{font-size:var(--t-small);font-weight:600;color:var(--ink);padding:0 var(--s3);
  border-left:1px solid var(--rule);line-height:1.3}
.subnav a:first-of-type{border-left:none}
.subnav a:hover{color:var(--jade-deep)}
.subnav a[aria-current="page"]{color:var(--jade-deep);font-weight:800}
.picker{background:var(--wash);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.picker .row{align-items:center}
.chips.picked{margin-top:var(--s2)}
.chips.picked:empty{display:none}
.chips.picked button{background:var(--jade-deep);color:var(--paper);
  border-color:var(--jade-deep)}
.chips.picked button .x{margin-left:6px;font-weight:700;opacity:.85}
.chips.picked button.clr{background:var(--paper);color:var(--steel);
  border-color:var(--rule);font-weight:600}
.scopeline{font-size:var(--t-cap);color:var(--steel);margin-top:var(--s3);display:inline-block}
.scopeline b{color:var(--ink);font-weight:700}
.aside{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:var(--s4) 0;margin:var(--s7) 0 0;max-width:760px}
.aside h3{font-size:var(--t-cap);font-weight:700;color:var(--steel);margin-bottom:var(--s2)}
.aside p{font-size:var(--t-plate);color:var(--steel);line-height:1.75}
.aside p + p{margin-top:var(--s3)}
.mapplate{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:var(--s6);
  align-items:start;padding-top:var(--s3)}
/* 시도 지도는 인라인 svg 다. 리플릿 지도의 겹판 svg 까지 이 규칙에 걸리면
   높이가 0 이 되어 칠한 시군구가 사라진다. 직계 자식만 잡는다 */
.mapplate > svg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
.legend{border-top:1px solid var(--ink);padding-top:var(--s2)}
.legend .lt{font-size:var(--t-cap);font-weight:700;color:var(--steel);margin-bottom:var(--s2)}
.legend ul{list-style:none}
.legend li{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-cap);color:var(--steel);
  padding:2px 0;font-variant-numeric:tabular-nums}
.legend i{width:22px;height:11px;flex:none;border:1px solid rgba(20,24,29,.18)}
.legend .n{margin-left:auto;color:var(--gray)}
table.yb th.l,table.yb td.l{text-align:left;font-variant-numeric:normal}
table.yb .rk{width:42px;color:var(--gray);font-weight:600;text-align:right}
@media (max-width:880px){
  .mapplate{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
}
@media (max-width:560px){
  .picker{padding:var(--s4)}
  .subnav .lb{width:100%;padding-bottom:var(--s1)}
}