/* loading.css — the page-load overlay, the same one withok.kr shows (business_withok assets/css/loading.css, snippets/loading.php): the page covered in black while it loads, with one hairline bar across the middle filling left to right. js/loading.js drives the bar and lifts the overlay. Linked in the of every page that carries the overlay, so it paints before anything under it does. */ .site-loading { position: fixed; inset: 0; z-index: 4000; /* over everything, the detail panel (120) too */ display: flex; align-items: center; justify-content: center; padding-bottom: 2%; background: var(--bg, #111110); opacity: 1; visibility: visible; pointer-events: all; transition: opacity 0.28s ease, visibility 0.28s ease; } .site-loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .site-loading-inner { width: min(24rem, 70vw); } .site-loading-bar { width: 100%; height: 0.065rem; /* withok.kr's --clock-line-width */ background: rgba(240, 240, 240, 0.16); overflow: hidden; } .site-loading-bar-fill { width: 0%; height: 100%; background: #f0f0f0; transition: width 0.18s ease; }