@charset "utf-8";
/* =========================================================
   공용 로딩 표시 (#load.eo-load) — head.sub.php 에서 불러옴, 동작은 js/eo-loader.js
   화면 맨 위 주황 진행 막대 + 가운데 "불러오는 중" + 옅은 막(다시 누르기 방지)
   ========================================================= */
.eo-load {
    position: fixed; inset: 0; z-index: 99999;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.eo-load.is-on {
    visibility: visible; opacity: 1; pointer-events: auto; cursor: progress;
    transition: opacity .15s ease, visibility 0s;
}
/* 옅은 막: 화면은 보이되 다시 누르지 못하게 */
.eo-load__veil { position: absolute; inset: 0; background: rgba(244, 246, 249, .45); }

/* 진행 막대: 천천히 90% 까지 차오르고, 다 뜨면 100% 로 채운 뒤 사라짐 */
.eo-load__bar {
    position: absolute; left: 0; top: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #f37021, #e8312f);
    box-shadow: 0 0 10px rgba(243, 112, 33, .55);
}
.eo-load.is-on .eo-load__bar { animation: eo-load-trickle 8s cubic-bezier(.1, .7, .2, 1) forwards; }
.eo-load.is-done .eo-load__bar { width: 100%; animation: none; transition: width .2s ease; }
@keyframes eo-load-trickle { 0% { width: 0; } 8% { width: 35%; } 30% { width: 62%; } 60% { width: 80%; } 100% { width: 90%; } }

/* 불러오는 중 — 화면 정가운데 */
.eo-load__pill {
    position: absolute; left: 50%; top: 50%;
    display: flex; align-items: center; gap: 12px; padding: 16px 28px 16px 22px;
    border-radius: 999px; background: #fff; color: #1f2633;
    font: 700 17px/1.2 "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif; letter-spacing: -0.02em; white-space: nowrap;
    box-shadow: 0 10px 34px rgba(20, 33, 61, .18), 0 0 0 1px rgba(20, 33, 61, .06);
    transform: translate(-50%, -50%) scale(.96); transition: transform .2s ease;
}
.eo-load.is-on .eo-load__pill { transform: translate(-50%, -50%); }
.eo-load__pill::before {
    content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
    border: 3px solid #e3e7ee; border-top-color: #f37021;
    animation: eo-load-spin .7s linear infinite;
}
@keyframes eo-load-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .eo-load.is-on .eo-load__bar { animation-duration: 12s; }
    .eo-load__pill::before { animation-duration: 2.4s; }
}
@media print { .eo-load { display: none !important; } }