/* 나머지 화면이 더 쓰는 것.

   글의 너비는 한 벌만 쓴다. 도판은 판면 전체를 쓰고 문단은 --measure 에서
   끊어지므로, 글만 있는 화면도 도판이 있는 화면과 같은 너비로 선다. */
:root{--measure:1040px}
.prose h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.015em;
  border-top:2px solid var(--ink);padding-top:var(--s2);margin:var(--s7) 0 var(--s3)}
.prose h3{font-size:var(--t-h3);font-weight:700;
  border-top:1px solid var(--rule);padding-top:var(--s2);margin:var(--s5) 0 var(--s2)}
.prose p{font-size:var(--t-body);line-height:1.85;margin-bottom:var(--s3);
  max-width:var(--measure)}
.prose ol,.prose ul{margin:0 0 var(--s3) 1.1em;max-width:var(--measure)}
.prose li{font-size:var(--t-body);line-height:1.85;margin-bottom:var(--s1)}
.prose a{border-bottom:1px solid var(--rule)}
.deck{border-top:2px solid var(--ink);padding-top:var(--s3);margin-bottom:var(--s6)}
.deck p{font-size:var(--t-plate);line-height:1.8;color:var(--steel);
  max-width:var(--measure)}
.aside{max-width:none}
.aside p{max-width:var(--measure)}
.entry{border-top:1px solid var(--rule);padding:var(--s4) 0}
.entry:first-of-type{border-top:1px solid var(--ink)}
.entry h3{font-size:var(--t-h3);font-weight:700;margin-bottom:var(--s1)}
.entry .meta{font-size:var(--t-cap);color:var(--gray);margin-bottom:var(--s2)}
.entry p{font-size:var(--t-plate);line-height:1.8;color:var(--steel);
  max-width:var(--measure)}
.entry .lk{font-size:var(--t-cap);font-weight:600;color:var(--jade-deep);
  display:inline-block;margin-top:var(--s2)}

/* 갈림길. 번호가 왼쪽 기둥에 서고 가는 세로 괘선이 단계를 잇는다.
   테두리 상자와 둥근 모서리와 채운 원을 쓰지 않는다 */
.flow{list-style:none;margin:0;padding:0;counter-reset:step}
.flow li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:0 var(--s4);border-top:1px solid var(--rule);padding:var(--s4) 0}
.flow li:first-child{border-top:1px solid var(--ink)}
.flow li::before{counter-increment:step;content:counter(step);
  grid-column:1;grid-row:1;
  font-size:var(--t-h3);font-weight:800;color:var(--jade-deep);
  font-variant-numeric:tabular-nums lining-nums;line-height:1.2}
.flow li > *{grid-column:2}
.flow li::after{content:"";position:absolute;left:13px;top:calc(var(--s4) + 26px);
  bottom:0;width:1px;background:var(--rule)}
.flow li:last-child::after{display:none}
.flow h3{font-size:var(--t-h3);font-weight:700;margin:0 0 var(--s1)}
.flow p{font-size:var(--t-plate);line-height:1.8;color:var(--steel);
  max-width:var(--measure);margin-bottom:var(--s2)}
.flow p:last-child{margin-bottom:0}
.flow .branch{display:block;font-size:var(--t-cap);font-weight:700;
  color:var(--jade-deep);margin-bottom:2px}
.flow .branch.off{color:var(--gray)}
@media (max-width:560px){
  .flow li{grid-template-columns:30px minmax(0,1fr);gap:0 var(--s3)}
  .flow li::after{left:8px}
}
/* 도구 화면. 안내와 기관 목록과 공모사업은 도판 번호를 쓰지 않고
   고르는 줄, 세는 줄, 항목 목록이라는 같은 문법을 쓴다 */
.tool{margin-bottom:var(--s7)}
.tool h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.015em;
  border-top:2px solid var(--ink);padding-top:var(--s2);margin-bottom:var(--s4)}
.tool .lead{font-size:var(--t-plate);line-height:1.8;color:var(--steel);
  max-width:var(--measure);margin-bottom:var(--s3)}
.diabox{padding:var(--s2) 0 var(--s4);overflow-x:auto}
.dia{width:100%;min-width:640px;height:auto;display:block}
.calls{list-style:none;margin:0;padding:0}
.calls li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);
  border-top:1px solid var(--rule);padding:var(--s3) 0}
.calls li:first-child{border-top:1px solid var(--ink)}
.calls .who{font-weight:700;font-size:var(--t-plate);min-width:150px}
.calls .note{font-size:var(--t-cap);color:var(--gray)}
a.tel{font-size:var(--t-h3);font-weight:800;color:var(--jade-deep);
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.case{border-top:1px solid var(--rule);padding-top:var(--s3)}
.case h3{font-size:var(--t-plate);font-weight:700;margin-bottom:var(--s2)}
.case p{font-size:var(--t-plate);line-height:1.8;color:var(--steel)}
.tally{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 var(--s6)}
.tally li{display:flex;align-items:baseline;gap:var(--s3);
  border-bottom:1px solid var(--rule);padding:var(--s2) 0}
.tally .k{font-size:var(--t-plate)}
.tally .v{margin-left:auto;font-weight:700;
  font-variant-numeric:tabular-nums lining-nums}
.items{margin-bottom:var(--s5)}
.item{border-top:1px solid var(--rule);padding:var(--s4) 0}
.item:first-child{border-top:2px solid var(--ink)}
.item h3{font-size:var(--t-h3);font-weight:700;margin-bottom:var(--s1)}
.item .meta{font-size:var(--t-cap);color:var(--gray);margin-bottom:var(--s2);
  display:flex;flex-wrap:wrap;align-items:center;gap:0}
.item .meta .dot{display:inline-block;width:1px;height:10px;margin:0 var(--s2);
  background:var(--rule)}
.item p{font-size:var(--t-plate);line-height:1.8;color:var(--steel);
  max-width:var(--measure)}
.item .addr{color:var(--ink)}
.item .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--s2)}
.item .tag{font-size:var(--t-cap);color:var(--steel);
  border:1px solid var(--rule);padding:1px 7px}
.item .contact{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4);
  margin-top:var(--s2)}
.item .lk{font-size:var(--t-cap);font-weight:600;color:var(--jade-deep)}
.code{background:var(--wash);border-left:2px solid var(--jade-deep);
  padding:var(--s3) var(--s4);margin:0 0 var(--s3);overflow-x:auto;
  max-width:var(--measure)}
.code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.7;color:var(--ink);white-space:pre}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--wash);padding:1px 5px}
.tally .k a{border-bottom:1px solid var(--rule)}
.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}
footer.site .footlist{list-style:none;margin:0;padding:0}
footer.site .footlist li{position:relative;padding-left:11px;margin-bottom:3px;
  line-height:1.6}
footer.site .footlist li::before{content:"";position:absolute;left:0;top:.62em;
  width:4px;height:1px;background:var(--gray)}
/* 요약 문단의 숫자. 굵게 하지 않고 자릿수만 맞춘다. 한 문단에 굵은 글자가
   스물이면 어느 것도 눈에 띄지 않는다. 강조는 화면마다 하나뿐이다 */
.summary b.num{font-weight:500;font-variant-numeric:tabular-nums lining-nums}
.summary #focusNum b.num,.summary #rankNum b.num{font-weight:800}
nav.crumb{display:none}
.limits{list-style:none;margin:0;padding:0}
.limits li{position:relative;border-top:1px solid var(--rule);padding:var(--s3) 0 var(--s3) 22px;
  font-size:var(--t-plate);line-height:1.8;color:var(--steel);max-width:var(--measure)}
.limits li:first-child{border-top:1px solid var(--ink)}
.limits li::before{content:"";position:absolute;left:0;top:calc(var(--s3) + .72em);
  width:12px;height:1px;background:var(--jade-deep)}
.limits b{color:var(--ink);font-weight:700}
/* 요약과 머리글은 판면 전체를 쓴다. 도판과 같은 폭으로 서야 화면이 한 덩어리로
   읽힌다. 긴 산문(.prose, .case)만 읽기 좋은 폭에서 끊는다 */
.summary p:not(.src){max-width:none}
.deck p{max-width:none}
.tool .lead{max-width:none}
.viewtabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:var(--s5)}
.viewtabs button{font:inherit;font-size:var(--t-ui);font-weight:700;color:var(--gray);
  background:none;border:0;border-bottom:2px solid transparent;padding:8px 16px;
  cursor:pointer;margin-bottom:-1px}
.viewtabs button:hover{color:var(--jade-deep)}
.viewtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--jade-deep)}
.item.hit{background:var(--wash);outline:2px solid var(--jade-deep);outline-offset:2px}
.chipgroup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s3);
  margin-top:var(--s3)}
.chipgroup .lb{font-size:var(--t-cap);font-weight:700;color:var(--gray);
  padding-top:5px;min-width:34px}
.chips{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 auto}
.chips button{font:inherit;font-size:var(--t-cap);font-weight:600;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);padding:4px 9px;
  cursor:pointer;line-height:1.35;
  transition:background-color .12s,border-color .12s,color .12s}
.chips button:hover{border-color:var(--jade-deep);color:var(--jade-deep)}
.chips button .c{margin-left:5px;color:var(--gray);
  font-variant-numeric:tabular-nums lining-nums}
.chips button[aria-pressed="true"]{background:var(--jade-deep);color:var(--paper);
  border-color:var(--jade-deep)}
.chips button[aria-pressed="true"] .c{color:rgba(255,255,255,.75)}
a.ico{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--rule);color:var(--steel);
  font-size:14px;transition:background-color .12s,border-color .12s,color .12s}
a.ico:hover{background:var(--wash);border-color:var(--jade-deep);color:var(--jade-deep)}
.item .contact{gap:6px}
a.tel i,a.lk i{margin-right:6px}
.empty{font-size:var(--t-plate);color:var(--gray);
  border-top:1px solid var(--rule);padding:var(--s5) 0}
.f-in{font:inherit;font-size:var(--t-ui);color:var(--ink);background:var(--paper);
  border:1px solid var(--ink);padding:7px 10px;min-width:220px;flex:1 1 220px}
.f-in:focus{outline:2px solid var(--jade-deep);outline-offset:1px}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--wash);color:var(--jade-deep)}
.btn.more{display:block;width:100%;margin-bottom:var(--s6)}
.btn.more[hidden]{display:none}
/* 기관 지도 */
.facmap{height:560px;border:1px solid var(--rule);margin:var(--s2) 0 var(--s4)}
/* 지도 한 장이 화면을 채우는 도판은 더 높다. 한반도와 수도권은 세로로 길어
   낮은 상자에 넣으면 배율이 한 칸 내려가고 바다만 넓어진다 */
.facmap.tall{height:700px}
.leaflet-container{font-family:Pretendard,sans-serif;background:var(--paper)}
.leaflet-popup-content{font-size:13.5px;line-height:1.6}
.leaflet-popup-content a{color:var(--jade-deep);font-weight:600}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:0}
@media (max-width:560px){.facmap{height:420px}.facmap.tall{height:520px}}

@media (max-width:560px){
  .calls .who{min-width:0;width:100%}
  .tally{grid-template-columns:minmax(0,1fr)}
}
.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6)}
@media (max-width:720px){.twocol{grid-template-columns:minmax(0,1fr)}}

button.why{font:inherit;font-size:inherit;color:inherit;background:none;border:0;
  padding:0;cursor:help;display:inline-flex;align-items:center;gap:5px;text-align:left}
button.why .qm{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border:1px solid var(--rule);color:var(--gray);
  font-size:10px;font-weight:700;line-height:1}
button.why:hover .qm,button.why:focus-visible .qm{border-color:var(--jade-deep);
  color:var(--paper);background:var(--jade-deep)}
.tip{position:absolute;z-index:80;background:var(--ink);color:#FFFFFF;
  font-size:var(--t-cap);line-height:1.7;padding:10px 12px;letter-spacing:-.005em;
  border:0;max-width:340px}
.tip[hidden]{display:none}

.totop{position:fixed;right:22px;bottom:22px;z-index:70;width:46px;height:46px;
  display:none;align-items:center;justify-content:center;background:var(--paper);
  border:1px solid var(--ink);color:var(--ink);cursor:pointer;padding:0;
  font-family:Pretendard,system-ui,sans-serif}
.totop svg{width:15px;height:15px;display:block}
.totop:hover{background:var(--ink);color:var(--paper)}
.totop.on{display:flex}
@media (max-width:560px){.totop{right:14px;bottom:14px;width:42px;height:42px}}
@media print{.totop{display:none}}

/* 지도 팝업. 모서리와 그림자를 없애고 화면의 다른 상자와 같은 결로 둔다 */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:0;box-shadow:none;
  background:var(--paper);border:1px solid var(--ink)}
.leaflet-popup-content{margin:11px 13px;font-family:Pretendard,system-ui,sans-serif;
  font-size:var(--t-cap);color:var(--steel);line-height:1.6}
.leaflet-popup-close-button{color:var(--gray)}
.mappop b{display:block;font-size:var(--t-plate);font-weight:700;color:var(--ink);
  letter-spacing:-.01em}
.mappop .v{display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.mappop a{display:inline-block;margin-top:9px;border:1px solid var(--ink);
  padding:5px 11px;font-size:var(--t-cap);font-weight:700;color:var(--ink);
  text-decoration:none}
.mappop a:hover{background:var(--ink);color:var(--paper)}

/* 유형 태그. 고른 것에 색을 주어 지금 무엇을 보고 있는지 한눈에 알게 한다 */
.chips button[data-c="0"][aria-pressed="true"]{background:#1F9789;border-color:#1F9789}
.chips button[data-c="1"][aria-pressed="true"]{background:#135F56;border-color:#135F56}
.chips button[data-c="2"][aria-pressed="true"]{background:#4A7B8C;border-color:#4A7B8C}
.chips button[data-c="3"][aria-pressed="true"]{background:#8A6E3F;border-color:#8A6E3F}
.chips button[data-c="4"][aria-pressed="true"]{background:#7A5A78;border-color:#7A5A78}
.chips button[data-c="5"][aria-pressed="true"]{background:#46505A;border-color:#46505A}
.chips button[aria-pressed="true"] .c{color:rgba(255,255,255,.82)}
/* 인용 상자. 자료를 쓰는 사람이 그대로 옮겨 적을 수 있게 한 덩이로 둔다 */
.cite{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:var(--s4) 0;margin:var(--s7) 0 0}
.cite h3{font-size:var(--t-cap);font-weight:700;color:var(--steel);margin-bottom:var(--s2)}
.cite p{font-size:var(--t-plate);color:var(--ink);line-height:1.75;max-width:820px}
.cite p + p{margin-top:var(--s2)}
.cite .btn{margin-top:var(--s3)}
footer.site .cite{border-bottom:none;margin-top:0;padding-bottom:0}
footer.site .cite p{font-size:var(--t-cap);color:var(--steel)}

footer.site .footcite{font-size:var(--t-cap);color:var(--steel);line-height:1.7;max-width:340px}
footer.site .footcite a{color:var(--jade-deep)}
footer.site .citecopy{display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:var(--t-cap);font-weight:600;color:var(--jade-deep);
  background:var(--paper);border:1px solid var(--rule);
  padding:5px 10px 6px;margin-top:var(--s2);cursor:pointer}
footer.site .citecopy:hover{background:var(--jade-deep);color:var(--paper);
  border-color:var(--jade-deep)}
footer.site .citemsg{font-size:var(--t-cap);color:var(--jade-deep);
  margin-left:var(--s2)}

/* 지도에서 도형을 누르면 브라우저가 그 도형의 네모 둘레에 초점 테두리를 그린다.
   경계 자체를 굵게 하는 것으로 바꾼다. 자판으로 옮겨 다닐 때도 같게 보인다 */
.leaflet-interactive:focus{outline:none}
.leaflet-interactive:focus-visible{outline:none;stroke:#14181D;stroke-width:2.4}
.leaflet-container a.leaflet-popup-close-button:focus-visible{outline:1px solid var(--ink)}

/* 탭의 표시. 글자와 같은 색으로 두고 크기만 줄인다. 장식이 아니라 자리를
   찾는 표지이므로 색을 따로 주지 않는다 */
nav.top a i,.subnav a i{font-size:.82em;margin-right:6px;opacity:.72}
nav.top a[aria-current="page"] i,.subnav a[aria-current="page"] i{opacity:1}
.viewtabs button i,.btn i,button.btn i{margin-right:6px;font-size:.86em}
.chips button i{margin-right:5px;font-size:.86em;opacity:.75}

/* 손가락으로 누르는 화면에서는 글자 높이만큼만 눌리면 옆 항목이 눌린다. 탭과
   자료 링크와 칩의 누를 수 있는 높이를 손가락 크기로 올린다. 이 규칙은 다른
   규칙보다 뒤에 서야 이긴다 */
@media (max-width:560px){
  .subnav a{padding:9px var(--s3);line-height:1.35}
  .subnav a[aria-current="page"]{padding-top:9px;padding-bottom:9px}
  nav.top a{padding-top:8px;padding-bottom:8px}
  .footlist a,.footcite a{display:inline-block;padding:7px 0}
  .chips button{padding:7px 11px}
  .viewtabs button{padding-top:9px;padding-bottom:9px}
}

/* 200% 로 키우면 접히지 않는 주소와 명령줄이 화면 밖으로 밀린다. 긴 주소는
   어디서든 접히게 하고 명령줄 상자는 제 안에서 가로로 민다 */
a,.prose a,.footcite a,.footlist a,.prose li a{overflow-wrap:anywhere}
pre,code,.prose pre,.prose code,.cmd,.cmd code{overflow-wrap:anywhere;
  white-space:pre-wrap;word-break:break-word}
.prose pre,.cmd{overflow-x:auto;max-width:100%}

/* 자판으로 짚은 지도 도형과 무리 표시가 어디인지 보이게 한다. 마우스로 누를
   때는 나오지 않고 자판으로 옮겨 갈 때만 나온다 */
.leaflet-interactive:focus-visible{outline:3px solid var(--jade-deep);outline-offset:1px}
.marker-cluster:focus-visible,.leaflet-marker-icon:focus-visible{outline:3px solid var(--jade-deep)}
#sidoMap path:focus-visible,#locMap path:focus-visible{outline:2px solid var(--jade-deep)}
/* 지도의 그림 층은 장식이 아니라 자료지만 이름은 담고 있는 상자가 가지고 있다 */
.leaflet-zoom-animated{pointer-events:auto}

/* 요약이 서로 다른 사실을 하나씩 말할 때는 문단 대신 항목으로 세운다 */
.summary ul.sumlist{list-style:none;margin:0}
.summary ul.sumlist li{font-size:var(--t-body);line-height:1.8;color:var(--ink);
  padding:0 0 var(--s2) 18px;position:relative}
.summary ul.sumlist li:last-child{padding-bottom:0}
.summary ul.sumlist li::before{content:"";position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--jade-deep)}

/* 언어 전환. 상단 오른쪽 끝에 가는 테두리를 두른 작은 링크 하나 */
.langsw{align-self:flex-end;margin-bottom:var(--s1);font-size:var(--t-fine);
  font-weight:700;letter-spacing:.02em;color:var(--jade-deep);
  border:1px solid var(--rule);padding:4px 9px;flex:none;
  transition:border-color .12s,background-color .12s}
.langsw:hover{border-color:var(--jade-deep);background:var(--wash)}
/* 아이콘은 차례 줄의 것과 같은 크기와 옅기로 둔다. 국기는 쓰지 않는다.
   깃발은 나라의 표지이지 말의 표지가 아니고, English 는 한 나라의 것이 아니다 */
.langsw i{margin-right:6px;font-size:.86em;opacity:.75}
@media (max-width:860px){
  /* 첫 줄은 로고와 언어 링크. 차례 줄은 그다음 줄로 내려간다 */
  .langsw{order:0;margin-left:auto;margin-bottom:0;align-self:center}
  header.site nav.top{order:1}
  header.site{align-items:center;row-gap:var(--s3)}
}
/* 도구 화면의 산문. 소제목과 문단과 표가 서로 붙지 않게 한다. .lead 와 .src 와
   목록은 저마다 여백이 있으나 맨 태그로 쓴 h3, p, table 은 없었다 */
.tool h3{font-size:var(--t-lead);font-weight:700;letter-spacing:var(--track-tight);
  border-top:1px solid var(--rule);padding-top:var(--s3);
  margin:var(--s5) 0 var(--s2)}
.tool h3:first-of-type{margin-top:var(--s4)}
.tool > p{font-size:var(--t-plate);line-height:1.8;color:var(--steel);
  max-width:var(--measure);margin-bottom:var(--s3)}
.tool > p.src{margin-bottom:0}
.tool > table.yb,.tool > .scroller{margin:var(--s3) 0 var(--s4)}
.tool > ul,.tool > ol{margin-bottom:var(--s3)}