@charset "UTF-8";
/* products-monitor.php 전용 — 인라인 <style>에서 분리 (2026-07-30) */
/* 스크롤 리빌 */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
.reveal.is-visible{opacity:1;transform:none;}
.rv-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
.rv-stagger.is-visible>*{opacity:1;transform:none;}
.rv-stagger.is-visible>*:nth-child(1){transition-delay:.04s}
.rv-stagger.is-visible>*:nth-child(2){transition-delay:.12s}
.rv-stagger.is-visible>*:nth-child(3){transition-delay:.20s}
.rv-stagger.is-visible>*:nth-child(4){transition-delay:.28s}
.rv-stagger.is-visible>*:nth-child(5){transition-delay:.36s}
.rv-stagger.is-visible>*:nth-child(6){transition-delay:.44s}
.rv-stagger.is-visible>*:nth-child(7){transition-delay:.52s}
.rv-stagger.is-visible>*:nth-child(8){transition-delay:.60s}
.rv-stagger.is-visible>*:nth-child(9){transition-delay:.68s}
@media (prefers-reduced-motion:reduce){.reveal,.rv-stagger>*{opacity:1!important;transform:none!important;transition:none!important;}}

/* 제품 개요 미디어에 라이브 대시보드 데모(이벤트 매트릭스) 인라인 — iframe 미사용, .panel 영역만 노출 */
/* 다크 데모 팔레트(사이트 토큰과 무관)는 아래 --lm-* 로컬 커스텀 프로퍼티에서만 정의 */
.ov-media--live{
  --lm-bg:#071827;--lm-panel:#091f32;--lm-line:#265770;--lm-hairline:#ffffff16;
  --lm-ink:#d9f7fa;--lm-mut:#8eafc4;--lm-cyan:#72f1f5;
  --lm-node:#163a57;--lm-up:#255f77;--lm-up-edge:#3c91a9;
  --lm-alert:#7a5930;--lm-alert-glow:#e7a546;--lm-event:#167661;--lm-event-glow:#45e9c7;--lm-sweep:#58f1e544;
  background:var(--lm-bg);padding:22px;display:flex;flex-direction:column;font:12px ui-monospace,SFMono-Regular,monospace;color:var(--lm-ink)}
.ov-media--live .lm-head{display:flex;justify-content:space-between;align-items:center;color:var(--lm-mut);padding-bottom:16px;border-bottom:1px solid var(--lm-hairline)}
.ov-media--live .lm-head b{color:var(--lm-cyan)}
.ov-media--live .lm-panel{border:1px solid var(--lm-line);border-radius:12px;padding:15px;background:var(--lm-panel);margin-top:16px}
.ov-media--live .lm-title{font-size:10px;letter-spacing:.08em;color:var(--lm-mut);margin-bottom:12px}
.ov-media--live .lm-matrix{display:grid;grid-template-columns:repeat(12,1fr);gap:7px;position:relative}
.ov-media--live .lm-node{aspect-ratio:1;border-radius:3px;background:var(--lm-node)}
.ov-media--live .lm-node.up{background:var(--lm-up);box-shadow:inset 0 0 0 1px var(--lm-up-edge)}
.ov-media--live .lm-node.alert{background:var(--lm-alert);box-shadow:0 0 12px var(--lm-alert-glow);animation:lm-blink 1.8s infinite}
.ov-media--live .lm-node.event{background:var(--lm-event);box-shadow:0 0 10px var(--lm-event-glow)}
.ov-media--live .lm-scan{position:absolute;inset:-10% auto -10% -30px;width:32px;background:linear-gradient(90deg,transparent,var(--lm-sweep),transparent);animation:lm-sweep 4.8s linear infinite}
.ov-media--live .lm-footer{display:flex;gap:22px;margin-top:15px;color:var(--lm-mut)}
.ov-media--live .lm-footer b{color:var(--lm-ink)}
@keyframes lm-sweep{to{transform:translateX(1050%)}}
@keyframes lm-blink{50%{opacity:.25}}

/* 기능 상세 09 Report — 화면 2장 전환 (monitor 전용이므로 3종 공용 products-common.css가 아니라 여기에 둔다) */
/* .zz-media에는 position이 없다. 게다가 .reveal의 will-change가 .zz-row를 컨테이닝 블록으로 만들어
   .zz-frames에 position을 주지 않으면 화살표가 텍스트 칼럼에 가서 붙는다 */
.zz-frames{position:relative}
/* reset.css의 전역 img{display:block}(작성자 origin)이 UA의 [hidden]{display:none}을 이기므로 명시 필요
   — .plan-card[hidden]·#maintBox[hidden]과 같은 함정. 이 줄이 있어야 숨은 img가 탭 순서에서도 빠진다 */
.zz-frames img[hidden]{display:none}
/* 라이트박스 트리거가 figure에서 img로 옮겨졌으므로 확대 커서도 함께 옮긴다 */
.zz-media--multi{cursor:auto}
.zz-frames img{cursor:zoom-in}
/* 화살표를 이미지 밖으로 반쯤 빼려면 .zz-media{overflow:hidden}을 풀어야 한다.
   그러면 모서리 라운드도 함께 풀리므로 자식에게 직접 돌려준다 — figure의 배경·보더는 스스로의
   border-radius를 따르지만(overflow와 무관), 자식인 img·figcaption은 그 곡선 밖으로 삐져나온다.
   1px 보더 안쪽의 곡률이므로 반지름에서 1px을 뺀다. 캡션은 figure와 배경색이 같아 라운드만 맞추면 된다 */
.zz-media--multi{overflow:visible}
.zz-frames img{border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
/* 포커스 링은 안쪽으로 그린다 — 기본 offset:3px면 이제 잘리지는 않지만 밖으로 나온 화살표와 겹친다 */
.zz-frames img:focus-visible{outline-offset:-3px}

/* 화살표 — .feat-nav(폐기된 Swiper 슬라이더의 죽은 코드)의 시각 어휘만 따르고 클래스는 재사용하지 않는다.
   크기는 44px: .feat-nav의 52px은 슬라이드 바깥 여백에 놓이던 값이고 여기는 이미지 안이다 */
.zz-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--shadow-deep);color:var(--ink);cursor:pointer;transition:.2s}
.zz-nav::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon-chevron-right) center/contain no-repeat;mask:var(--icon-chevron-right) center/contain no-repeat}
/* 이미지 밖으로 절반(22px)씩 걸치게 둔다 — .container의 좌우 24px 패딩 안에 들어가므로 넘치지 않는다 */
/* 좌향 화살표 토큰은 없으므로 chevron-right를 뒤집어 쓴다 */
.zz-nav--prev{left:-22px}
.zz-nav--prev::before{transform:scaleX(-1)}
.zz-nav--next{right:-22px}
.zz-nav:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (hover: hover){.zz-nav:hover{background:var(--primary);border-color:var(--primary);color:#fff}}

/* 캡션바 — 현재 화면 이름이 가시 텍스트로 남아 기계 판독(AEO)에도 쓰인다.
   배경은 .zz-media에서 그대로 받으므로 지정하지 않는다 (지정하면 풀린 모서리 밖으로 사각 배경이 삐져나온다) */
.zz-caption{padding:11px 16px;border-top:1px solid var(--line);border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);color:var(--gray);font-size:13px;font-weight:600;line-height:1.5;text-align:center}

@media (max-width:768px){
  .zz-nav{width:38px;height:38px}
  .zz-nav::before{width:18px;height:18px}
  .zz-nav--prev{left:-19px}
  .zz-nav--next{right:-19px}
  .zz-caption{padding:9px 12px;font-size:12px}
}