/* 홈 v14 원본 모니터링 컴포넌트. 같은 이미지·4화면·스크롤 규격. */
/* ===== v14: section 05 — real Monitor screens, auto-cycling in a browser frame ===== */
    .monitor-shot{margin:0;position:relative;min-width:0}
    .shot-window{border-radius:14px;overflow:hidden;background:#090B0E;border:1px solid #16181c;box-shadow:0 30px 70px rgba(40,32,10,.20),0 8px 20px rgba(0,0,0,.08)}
    .shot-bar{display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;background:#0D1014;border-bottom:1px solid rgba(255,255,255,.07)}
    .shot-dots{display:flex;gap:6px;flex:0 0 auto}.shot-dots i{width:9px;height:9px;border-radius:50%;background:#2a2f36}
    .shot-url{flex:1;max-width:260px;margin:0 auto;padding:4px 10px;border-radius:6px;background:#151A20;color:#8b929c;font-size:11px;text-align:center;letter-spacing:0}
    .shot-live{flex:0 0 auto;font-size:11px;font-weight:700;color:#FFC300}
    .shot-screen{position:relative;aspect-ratio:1440/900;background:#090B0E}
    .shot-view{position:absolute;inset:0;display:grid;grid-template-columns:17.2222% 1fr;opacity:0;transition:opacity .8s ease}
    .shot-view.is-active{opacity:1}
    .shot-side{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
    .shot-main{position:relative;overflow:hidden}
    .shot-main img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 0s linear .8s}
    .shot-view.is-active .shot-main img{transform:translateY(var(--pan,0%));transition:transform calc(var(--dwell,5200ms) - 1700ms) cubic-bezier(.45,0,.25,1) 1s}
    .shot-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
    .shot-tabs button{position:relative;overflow:hidden;padding:8px 13px;border:1px solid rgba(19,20,23,.12);border-radius:10px;background:rgba(255,255,255,.65);color:#5a5e65;font-size:12px;font-weight:700;transition:background .3s ease,color .3s ease,border-color .3s ease}
    .shot-tabs button:hover{color:var(--ink);border-color:rgba(19,20,23,.25)}
    .shot-tabs button.is-active{background:#fff;color:var(--ink);border-color:rgba(19,20,23,.28)}
    .shot-tabs button i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
    .shot-tabs button.is-active i{animation:shotProgress var(--dwell,5200ms) linear forwards}
    .monitor-shot.is-paused .shot-tabs button.is-active i{animation-play-state:paused}
    @keyframes shotProgress{to{transform:scaleX(1)}}
    @media(max-width:540px){.shot-bar{height:28px;padding:0 10px}.shot-url{font-size:10px}.shot-live{display:none}.shot-tabs button{padding:7px 10px;font-size:11px}}
    @media(prefers-reduced-motion:reduce){.shot-view,.shot-main img{transition:none!important}.shot-tabs button i{display:none}}
    
.process-monitor{--gold:#ffc300;--dwell:5200ms}.process-monitor .shot-tabs button{font:inherit;font-size:12px;min-height:44px;cursor:pointer}.process-monitor .shot-view:not(.is-active){pointer-events:none}.process-monitor .shot-tabs button:focus-visible{outline:2px solid #987500;outline-offset:3px}.process-monitor .demo-controls{margin-top:8px}