/* The drawing is on paper, so it keeps paper's colours whatever the page
   around it is doing. Type is one condensed monospace throughout, uppercase
   for the engineering labels and regular weight for the Korean lines. */
.bp-overlay[hidden] { display: none; }
.bp-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 14, 0.86);
  backdrop-filter: blur(3px);
  padding: 24px;
}
.bp-scroll {
  width: min(1560px, 96vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
}
.bp {
  display: block;
  width: 100%;
  height: auto;
  min-width: 900px;          /* below this the callouts collide; scroll instead */
  background: #f2ede1;
}
.bp-close {
  position: fixed; right: 26px; top: 22px;
  padding: 7px 13px;
  border: 1px solid #6d675c; border-radius: 3px;
  background: #f2ede1; color: #1c1c1a;
  font: 600 12px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  letter-spacing: 0.08em; cursor: pointer;
}
.bp-close:hover { background: #fff; }

.bp text {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, "DejaVu Sans Mono", monospace;
  fill: #1c1c1a;
}
.bp .bp-r { text-anchor: end; }

.bp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
.bp-title   { font-size: 38px; font-weight: 800; letter-spacing: 0.005em; }
.bp-sub     { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; }
.bp-doc     { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.bp-tiny    { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; }
.bp-datum   { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; }

.bp-blocktitle { font-size: 12.5px; font-weight: 700; letter-spacing: 0.11em; text-anchor: middle; }
.bp-part       { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-anchor: middle; }

.bp-callnum { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; }
.bp-callko  { font-size: 11.5px; font-weight: 400; letter-spacing: 0; fill: #7a3a26; }

.bp-read { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-anchor: middle; }
.bp-note { font-size: 9.5px; font-weight: 400; letter-spacing: 0.02em; fill: #6d675c; }

/* the button that opens it, matching the cross-link strip on each page */
.bp-open {
  padding: 6px 11px; border: 0; border-left: 1px solid var(--rule, #222b39);
  background: transparent; color: var(--muted, #97a3b6);
  font-family: var(--mono, ui-monospace), monospace; font-size: inherit;
  letter-spacing: 0.02em; cursor: pointer; white-space: nowrap;
}
.bp-open:hover { color: var(--ink, #dfe6f0); background: rgba(255, 255, 255, 0.05); }

.bp-dim { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.bp-lead { font-size: 10.5px; font-weight: 400; letter-spacing: 0.02em; }
.bp-lead b { font-weight: 700; }
.bp-scale { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; fill: #6d675c; }

/* when a page has no obvious place for it, the opener puts itself in a corner */
.bp-open.bp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  border: 1px solid #3a4453; border-radius: 4px;
  background: rgba(14, 19, 27, 0.92); color: #dfe6f0;
  padding: 9px 14px; font-size: 12px; letter-spacing: 0.06em;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
}
.bp-open.bp-float:hover { background: rgba(24, 32, 44, 0.98); }