/* 라이브 모션그래픽 뒷배경 & 다이내믹 리딩 UX */
#kjiReadingProgressWrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 4px;
    background: rgba(4, 8, 20, 0.65); z-index: 9999; pointer-events: none;
}
#kjiReadingProgressBar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #22d3ee 0%, #f7dc79 50%, #22d3ee 100%);
    background-size: 200% 100%;
    animation: kjiShimmer 3s linear infinite;
    box-shadow: 0 0 14px #22d3ee, 0 0 24px rgba(247, 220, 121, 0.7);
    transition: width 0.12s ease-out;
}
@keyframes kjiShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
#kjiLiveBgWrap {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    z-index: 0; pointer-events: none; overflow: hidden;
}
.kji-aurora-orb {
    position: absolute; border-radius: 50%; filter: blur(90px);
    opacity: 0.28; mix-blend-mode: screen; will-change: transform;
}
.kji-aurora-orb.orb-a {
    width: 520px; height: 520px; top: 8%; left: 8%;
    background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
    animation: kjiOrbA 18s ease-in-out infinite alternate;
}
.kji-aurora-orb.orb-b {
    width: 580px; height: 580px; bottom: 6%; right: 8%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.55) 0%, transparent 70%);
    animation: kjiOrbB 22s ease-in-out infinite alternate;
}
@keyframes kjiOrbA {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(110px, 90px) scale(1.18); }
}
@keyframes kjiOrbB {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-120px, -85px) scale(1.15); }
}
#kjiMotionCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body > header, body > nav, body > main, body > section, body > div, body > footer { position: relative; z-index: 1; }
section { background-color: rgba(4, 9, 22, 0.72) !important; }
.kji-hl-pen {
    background-image: linear-gradient(120deg, rgba(212, 175, 55, 0.28) 0%, rgba(56, 189, 248, 0.25) 100%);
    background-repeat: no-repeat; background-size: 0% 38%; background-position: 0 92%;
    transition: background-size 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.kji-hl-pen.is-lit { background-size: 100% 38% !important; }
.kji-motion-card {
    position: relative; overflow: hidden;
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}
.kji-motion-card:hover {
    transform: translateY(-5px);
    border-color: #22d3ee !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(56, 189, 248, 0.18);
}
#kjiReadingHud {
    position: fixed; bottom: 20px; right: 20px; z-index: 9990;
    display: flex; align-items: center; gap: 8px;
    background: rgba(8, 16, 34, 0.92); backdrop-filter: blur(12px);
    border: 1.5px solid rgba(212, 175, 55, 0.5); border-radius: 999px;
    padding: 8px 14px; font-size: 0.78rem; color: #f8fafc;
    box-shadow: 0 10px 28px rgba(0,0,0,0.6);
}
#kjiHudPct { color: #f7dc79; font-weight: 900; min-width: 34px; }
#kjiHudTop {
    background: rgba(212,175,55,0.2); border: 1px solid rgba(212,175,55,0.5);
    color: #f7dc79; border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 800; cursor: pointer;
}