.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}
.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)}
}
/* 그림 1 아래 표의 계열 두 칸. 고른 것이 계열이거나 계열에 자격이 하나뿐이면
   같은 수가 두 번 서므로 접는다 */
#trendTable.nofam th:nth-child(3),#trendTable.nofam th:nth-child(4),
#trendTable.nofam td:nth-child(3),#trendTable.nofam td:nth-child(4){display:none}
/* 조건 없이 연 화면. 고른 국적이나 자격이 없으므로 빈 도판을 늘어놓지 않고
   전체 표와 색인만 남긴다 */
body.hubmode .titlerow .actions,body.hubmode .plate,body.hubmode .grid2{display:none}

/* language menu */
.langsw.langpick{position:relative;padding:0}
.langpick>summary{list-style:none;cursor:pointer;padding:4px 9px;display:flex;align-items:center}
.langpick>summary::-webkit-details-marker{display:none}
.langpick>summary::after{content:"";margin-left:7px;border:4px solid transparent;
  border-top-color:currentColor;border-bottom:0}
.langpick[open]>summary{background:var(--wash)}
.langpick .langmenu{position:absolute;right:-1px;top:calc(100% + 1px);z-index:60;min-width:calc(100% + 2px);
  background:#fff;border:1px solid var(--rule);padding:4px 0;display:flex;flex-direction:column}
body header.site .langpick .langmenu a,.langpick .langmenu span{display:block;order:0;margin:0;border:0;
  padding:7px 14px;white-space:nowrap;font-size:inherit;letter-spacing:inherit;font-weight:600;color:var(--jade-deep);background:none;text-decoration:none}
body header.site .langpick .langmenu a:hover{background:var(--wash)}
.langpick .langmenu span{color:var(--ink);font-weight:800}
