/* AXIS Visual Atlas: static teaching plates with optional JS enhancement. */
html { scroll-behavior:auto; }
body::before { background:none; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:20; background:#2a323d; color:#fff; padding:.8rem 1rem; }
.skip-link:focus { left:1rem; top:1rem; }
.visual-atlas { max-width:1040px; margin-inline:auto; }
.visual-atlas-intro { padding-block:1.5rem 2rem; } .visual-atlas-intro .badge { background:#c72f33; }
.visual-atlas-intro h1::after { background:#c72f33; border-radius:0; }
.atlas-search { display:block; width:100%; min-height:44px; margin:.4rem 0 1rem; padding:.7rem .85rem; border:1px solid #dfe3e8; border-radius:0; color:#2a323d; font:inherit; }
.visual-category-jumps { display:flex; flex-wrap:wrap; gap:.5rem; }
.visual-category-jumps a { min-height:44px; display:inline-flex; align-items:center; padding:0 .8rem; border:1px solid #dfe3e8; color:#2a323d; font-weight:700; text-decoration:none; }
.visual-category-jumps a:hover, .visual-category-jumps a:focus { border-color:#c72f33; color:#c72f33; }
.visual-category { scroll-margin-top:5rem; border-top:1px solid #dfe3e8; padding-top:2rem; }
.visual-category h2 { margin:0; color:#616a7f; font-size:1rem; letter-spacing:.08em; }
.visual-entry { border-top:3px solid #2a323d; padding-block:clamp(2rem,5vw,4rem); scroll-margin-top:5rem; }
.visual-entry:target { outline:3px solid #c72f33; outline-offset:6px; }
.visual-entry h2 { margin:0 0 .65rem; font-size:clamp(1.45rem,3vw,2rem); }
.visual-question { margin:.3rem 0 .8rem; color:#2a323d; font-size:clamp(1.1rem,2.2vw,1.35rem); font-weight:800; }
.visual-definition { max-width:46rem; color:#616a7f; }
.visual-stage { margin:1.4rem 0; border:1px solid #dfe3e8; background:#f7f8fa; padding:clamp(.75rem,2vw,1.25rem); }
.visual-stage svg { display:block; width:100%; height:auto; overflow:visible; font-family:'Noto Sans KR','Malgun Gothic',sans-serif; font-size:16px; fill:#2a323d; }
.visual-stage .svg-fixed { fill:#2a323d; stroke:#2a323d; }
.visual-stage .svg-runtime { fill:#dfe3e8; stroke:#616a7f; }
.visual-stage .svg-lane { fill:none; stroke:#616a7f; stroke-width:6; stroke-linecap:square; }
.visual-stage .svg-red { stroke:#c72f33; }
.visual-stage .svg-red-fill { fill:#c72f33; stroke:#c72f33; }
.visual-stage .svg-fixed-fill { fill:#2a323d; stroke:#2a323d; }
.visual-stage .svg-plate { fill:#fff; stroke:#2a323d; stroke-width:2; }
.visual-stage .svg-plate-soft { fill:#fff; stroke:#dfe3e8; stroke-width:2; }
.visual-stage .svg-on-ink { fill:#fff; }
.visual-stage .svg-kicker { font-size:14px; font-weight:700; fill:#616a7f; }
.visual-stage .svg-value { font-size:20px; font-weight:800; }
.visual-stage .svg-unit { font-size:12px; fill:#2a323d; }
.visual-stage .svg-on-ink.svg-unit { fill:#fff; }
.visual-stage .svg-primary-label { font-size:14px; fill:#2a323d; }
.visual-stage .svg-on-ink.svg-primary-label { fill:#fff; }
.visual-stage .svg-sentence:not(.svg-on-ink) { font-size:17px; fill:#2a323d; }
.visual-stage .svg-headroom { fill:#fff; stroke:#616a7f; stroke-width:2; stroke-dasharray:7 5; }
.visual-stage .svg-offload { fill:none; stroke:#c72f33; stroke-width:3; stroke-dasharray:10 6; stroke-linecap:square; }
.visual-stage .svg-idle { fill:#dfe3e8; stroke:#616a7f; stroke-width:2; }
.visual-stage .svg-busy { fill:#c72f33; stroke:#c72f33; }
.visual-stage .svg-gate { fill:#c72f33; }
.visual-stage .svg-emphasis { fill:#c72f33; }
.visual-stage .svg-note { fill:#fff; stroke:#c72f33; stroke-width:2; }
.visual-stage .svg-checkpoint { fill:#fff; stroke:#2a323d; stroke-width:3; }
.visual-stage .svg-tick { fill:#c72f33; stroke:#c72f33; }
.visual-stage .svg-axis { fill:none; stroke:#2a323d; stroke-width:2; stroke-linecap:square; }
.visual-stage .svg-precision-32 { fill:#2a323d; stroke:#2a323d; }
.visual-stage .svg-precision-16 { fill:#4b5563; stroke:#4b5563; }
.visual-stage .svg-precision-8 { fill:#747d89; stroke:#747d89; }
.visual-stage .svg-bar-tick,
.visual-stage .svg-bar-tick path { fill:none; stroke:#fff; stroke-width:1; opacity:.48; }
.visual-stage .svg-gap { fill:none; stroke:#c72f33; stroke-width:2; }

.visual-reading { margin:0 0 1.2rem 1.35rem; }
.visual-reading li { margin:.35rem 0; }
.visual-link-row { display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin:0; }
.visual-link-row a, .visual-return { min-height:44px; display:inline-flex; align-items:center; color:#2a323d; font-weight:700; }
.topnav a { color:#c72f33; } .topnav a, .visual-atlas footer a { min-height:44px; display:inline-flex; align-items:center; }
.visual-link-row a:not(.visual-return) { color:#c72f33; }
.visual-entry[hidden] { display:none; }
.visual-stage .svg-mobile { display:none; }
@media (max-width:680px) {
  .visual-atlas { padding-inline:1rem; }
  .visual-stage { margin-inline:-.15rem; }
  .visual-stage svg { font-size:14px; }
  .visual-definition, .visual-reading { font-size:14px; }
  .svg-desktop.has-mobile-pair { display:none; }
  .visual-stage .svg-mobile { display:block; }
}