@charset "UTF-8";
/* products-scanner.php 전용 — 인라인 <style>에서 분리 (2026-07-30) */
/* 제품 개요 미디어 라이브 데모 — 휴대형 스캔 레이더 (페이지 한정) */
/* 다크 데모 팔레트(사이트 토큰과 무관)는 아래 --sc-* 로컬 커스텀 프로퍼티에서만 정의 */
.ov-media--live{
  --sc-bg:#071827;--sc-panel:#091f32;--sc-line:#265770;--sc-hairline:#ffffff16;
  --sc-ink:#d9f7fa;--sc-mut:#8eafc4;--sc-cyan:#72f1f5;--sc-bright:#a8faff;
  --sc-radar-hi:#153c50;--sc-radar-mid:#0a2538;--sc-radar-lo:#081d2d;--sc-ring:#2c6e85;--sc-sweep:#70f2f455;
  --sc-device-edge:#73f3f7;--sc-device-fill:#173e52;--sc-device-glow:#55eaf855;
  --sc-status-line:#2c6880;--sc-status-bg:#0b2b3e;--sc-status-ink:#87f7f8;
  background:var(--sc-bg);padding:22px;display:flex;flex-direction:column;justify-content:center;font:12px ui-monospace,SFMono-Regular,monospace;color:var(--sc-ink)}
.ov-media--live .sc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--sc-mut);padding-bottom:16px;border-bottom:1px solid var(--sc-hairline)}
.ov-media--live .sc-head b{color:var(--sc-cyan)}
.ov-media--live .sc-panel{border:1px solid var(--sc-line);border-radius:12px;padding:15px;background:var(--sc-panel);margin-top:16px}
.ov-media--live .sc-scanner{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border-radius:10px;background:radial-gradient(circle,var(--sc-radar-hi) 0 4%,var(--sc-radar-mid) 5% 38%,var(--sc-radar-lo) 39%)}
.ov-media--live .sc-scanner::before{content:'';position:absolute;inset:10%;border:1px solid var(--sc-ring);border-radius:50%}
.ov-media--live .sc-scanner::after{content:'';position:absolute;inset:-20%;background:conic-gradient(transparent 0 78%,var(--sc-sweep) 90%,transparent 100%);animation:sc-spin 3s linear infinite}
.ov-media--live .sc-device{position:relative;z-index:2;width:74px;height:110px;border:2px solid var(--sc-device-edge);border-radius:10px;background:var(--sc-device-fill);box-shadow:0 0 24px var(--sc-device-glow)}
.ov-media--live .sc-device i{display:block;margin:16px auto;width:38px;height:6px;background:var(--sc-cyan);animation:sc-blink 1.5s infinite}
.ov-media--live .sc-device small{display:block;text-align:center;color:var(--sc-bright)}
.ov-media--live .sc-status{margin-top:15px;padding:12px;border:1px solid var(--sc-status-line);background:var(--sc-status-bg);color:var(--sc-status-ink)}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ov-media--live .sc-scanner::after,.ov-media--live .sc-device i{animation:none}}