#spList .item{border-top:1px solid var(--rule);padding:var(--s3) 0}
#spList .item:first-child{border-top:1px solid var(--ink)}
#spList .item h3{font-size:var(--t-plate);font-weight:700;margin:0 0 3px}
#spList .item h3 a{color:var(--ink);border-bottom:1px solid var(--rule)}
#spList .item h3 a:hover{color:var(--jade-deep);border-color:var(--jade-deep)}
#spList .item .who{font-size:var(--t-cap);color:var(--jade-deep);font-weight:600;margin:0 0 5px}
#spList .item .desc{font-size:var(--t-small);color:var(--steel);line-height:1.7;margin:0;
  max-width:var(--measure)}

#spList .item .who .k{display:inline-block;margin-right:6px;color:var(--gray);
  font-weight:700;font-size:var(--t-cap);letter-spacing:-.01em}
#spList .item .who .k + .k,#spList .item .who .k:not(:first-child){margin-left:14px}

/* 언어 전환. 상단 오른쪽 끝에 가는 테두리를 두른 작은 링크 하나 */
.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)}

/* 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}