/* 이 편에만 있는 것 — 범례 색과 표의 강조. 모양과 색 토큰은 /viz/_shared/viz.css 에 있다.
   색 조각만으로는 뜻이 전해지지 않으므로 index.html 이 이름을 함께 적는다.
   헤드 색은 app.js 의 HEAD_COLORS 와 같아야 한다 — 한쪽만 바꾸면 범례가 거짓말을 한다. */
.sw.h0 { background: #185adb }
.sw.h1 { background: #2e9e5b }
.sw.h2 { background: #d9822b }
.sw.faint { background: #185adb; opacity: .25 }
.sw.masked { background: #8aa0b8; opacity: .6 }
.sw.picked { background: #ffc857 }

/* 표가 여섯 열을 넘는다. 좁은 화면에서 페이지 전체가 옆으로 밀리지 않게 표만 민다. */
.scroll { overflow-x: auto; margin: .5rem 0 1.2rem }
.scroll table { min-width: 30rem }
td { font-variant-numeric: tabular-nums }

/* 가장 많이 보는 칸. 색만으로 가르지 않고 굵기로도 가른다. */
td.top, tr.top th, tr.top td { font-weight: 750 }
tr.top td:last-child { color: var(--accent) }
/* 가려진 칸은 지우지 않고 흐리게 둔다 — 무엇을 막았는지 보이게. */
td.masked, tr.masked th, tr.masked td { opacity: .5 }
tr.active th { font-weight: 750 }
tr.active { background: color-mix(in srgb, var(--accent) 8%, transparent) }

.role { margin: 1.4rem 0 .2rem; max-width: 46rem }
details { margin: 1rem 0 }
summary { cursor: pointer; color: var(--accent) }
select {
  padding: .4rem .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}