/* 시각화 여러 편이 함께 쓰는 모양.
 *
 * 이 화면들은 코스 본문에서 새 창으로 열리므로 사이트의 토큰 파일에 기대지
 * 않고 필요한 것만 여기 둔다. 색은 라이트·다크 두 벌을 모두 적는다 — 한 벌만
 * 두면 다크에서 대비가 무너지고, 그것을 눈으로는 알기 어렵다. 실제로 오늘
 * 공개 화면이 그 일로 배포를 나흘 막았다.
 *
 * 편마다 따로 두지 않는 이유는 같다. 둘일 때는 복사해도 견디지만 셋을 넘기면
 * 한 편만 고쳐진다. */
:root {
  --paper: #ffffff;
  --canvas: #f3f6fa;
  --ink: #172b45;
  --dim: #52647b;
  --line: #d7e0ea;
  --accent: #185adb;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #172b45;
    --canvas: #101b2b;
    --ink: #f3f6fa;
    --dim: #b8c5d4;
    --line: #334860;
    --accent: #8eb6ff;
  }
}
* { box-sizing: border-box }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--paper);
  padding: .5rem .9rem;
  z-index: 9;
}
.head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.head p { margin: 0; color: var(--dim) }
.brand { color: var(--ink); font-weight: 750; text-decoration: none }
main {
  max-width: 62rem;
  margin: auto;
  padding: 1.5rem 1.25rem 4rem;
}
h1 { font-size: 1.6rem; margin: 1rem 0 .5rem }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem }
.lede { max-width: 46rem }
.hint, .note { color: var(--dim) }
.err { color: #a64a08; min-height: 1.2em; margin: .2rem 0 }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .err { color: #ffb67a }
}
canvas {
  width: 100%;
  height: min(58vh, 520px);
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin: .5rem 0;
}
input[type="text"], #addrInput {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  min-width: 14rem;
}
.btn {
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent) }
.summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem 1rem;
  margin: .5rem 0 1rem;
}
.summary dt { color: var(--dim) }
.summary dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace }
table { border-collapse: collapse; width: 100%; margin: .5rem 0 }
caption { text-align: left; color: var(--dim); padding-bottom: .4rem }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line) }
tbody th { font-weight: 650 }
td code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace }
/* TLB 가 맞으면 네 층을 건너뛴다. 줄을 지우지 않고 흐리게 두어, 무엇을
   건너뛰었는지 보이게 한다. */
tr.skipped { opacity: .45 }

/* 범례. 색 조각만 두면 색을 구별하기 어려운 사람이 읽을 수 없으므로,
   글로 쓴 이름이 늘 함께 있어야 한다(각 편의 index.html). */
.sw {
  display: inline-block;
  width: .85em;
  height: .85em;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: .15em;
  border: 1px solid var(--line);
}
input[type="range"] { min-width: 14rem }
output { font-family: ui-monospace, SFMono-Regular, Menlo, monospace }
/* 건너뛰거나 막힌 줄은 지우지 않고 흐리게 둔다 — 무엇이 빠졌는지 보이게. */
tr.skipped th, tr.skipped td,
tr.blocked th, tr.blocked td { opacity: .55 }
tr.fits th, tr.active th { font-weight: 750 }