.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}
/* 필요한 도움은 누르는 단추로 (2026-09-28, 나리 요청). 고르는 칸은 논리와 읽어 주는
   프로그램을 위해 남기고 화면에서만 감춘다 */
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.needrow{align-items:flex-start !important;gap:var(--s2) var(--s3)}
.needlab{font-size:var(--t-cap);font-weight:700;color:var(--steel);padding-top:7px;flex:none}
.needs{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 0;min-width:0}
.needs button{font-family:Pretendard;font-size:var(--t-small);font-weight:600;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);padding:5px 10px;cursor:pointer;line-height:1.3}
.needs button:hover{border-color:var(--jade-deep)}
.needs button.on{background:var(--jade-deep);border-color:var(--jade-deep);color:#fff}
.needs button.more{border-style:dashed;color:var(--jade-deep)}
#rgeo{flex:none}
@media (max-width:560px){.needrow{flex-direction:column}.needlab{padding-top:0}}
.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(28,23,19,.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)}
}