.ar-service-scene { width: 100%; min-width: 0; margin: 0; color: #173b32; }
.ar-service-scene > svg { display: block; width: 100%; height: auto; background: transparent; font-family: 'Noto Sans KR', sans-serif; }
.ar-scene-text { font-size: 14px; font-weight: 600; fill: #173b32; }
.ar-scene-small { font-size: 12px; font-weight: 500; }
.ar-scene-floor { fill: #173b32; opacity: .07; }
.ar-scene-line { fill: none; stroke: #d2e1ca; stroke-width: 5; stroke-linecap: round; }
.ar-scene-line.ar-scene-teal { stroke: #cce8de; }
.ar-scene-packets { fill: none; stroke: #6e9d45; stroke-width: 5; stroke-dasharray: 2 28; stroke-linecap: round; animation: ar-scene-travel 3s linear infinite; }
.ar-scene-packets.ar-scene-teal { stroke: #29a78c; animation-duration: 4s; }
.ar-scene-chip > rect { fill: #fff; stroke: #d8e5d5; stroke-width: 1.4; }
.ar-scene-chip .ar-scene-text { fill: #476653; }
.ar-scene-float { transform-box: fill-box; transform-origin: center; animation: ar-scene-hover 6s ease-in-out infinite; }
.ar-scene-cursor { transform-box: fill-box; transform-origin: center; animation: ar-scene-cursor 7s ease-in-out infinite; }
.ar-scene-orbit { transform-box: view-box; transform-origin: 50px 50px; animation: ar-scene-orbit 22s linear infinite; }
.ar-scene-reject { fill: none; stroke: #8b9e8b; stroke-width: 3; stroke-linecap: round; animation: ar-scene-reject 5s ease-in-out infinite; }
.ar-scene-chart-bars { transform-box: fill-box; transform-origin: bottom; animation: ar-scene-bars 8s ease-in-out infinite; }
.ar-service-scene figcaption { margin-top: 12px; color: #68776f; font-size: 12px; line-height: 1.7; text-align: center; word-break: keep-all; }
.ar-product-tunnel-stream { animation: ar-product-stream 2.2s ease-in-out infinite; }
.ar-product-tcp { animation: ar-product-tcp 2.8s ease-in-out infinite; }
.ar-product-udp { animation: ar-product-udp 2.2s ease-in-out infinite; }
.ar-product-gate-a, .ar-product-gate-b { transform-box: fill-box; transform-origin: bottom; animation: ar-product-gate 2.6s ease-in-out infinite; }
.ar-product-gate-b { animation-delay: -1.3s; }
.ar-product-address { animation: ar-product-caret 1s steps(2, jump-none) infinite; }
.ar-product-domain-link { animation: ar-product-domain 3.2s ease-in-out infinite; }
.ar-product-dns-one, .ar-product-dns-two, .ar-product-dns-three { animation: ar-product-hub 3s ease-in-out infinite; }
.ar-product-dns-two { animation-delay: -.8s; }
.ar-product-dns-three { animation-delay: -1.6s; }
.ar-product-failover-primary { animation: ar-product-primary 4s ease-in-out infinite; }
.ar-product-failover-backup { animation: ar-product-backup 4s ease-in-out infinite; }
.ar-product-failover-standby { animation: ar-product-backup-flow 4s ease-in-out infinite; }
.ar-product-door { transform-box: fill-box; transform-origin: left; animation: ar-product-door 3.4s ease-in-out infinite; }
.ar-product-allow { animation: ar-product-allow 2.5s ease-in-out infinite; }
.ar-product-block { animation: ar-product-block 2.8s ease-in-out infinite; }
.ar-product-http-doc { animation: ar-product-document 3s ease-in-out infinite; }
.ar-product-magnifier { animation: ar-product-inspect 3.2s ease-in-out infinite; }
.ar-product-waf-reject { animation: ar-product-restrict 3.2s ease-in-out infinite; }
.ar-product-identity-check { transform-box: fill-box; transform-origin: center; animation: ar-product-verify 2.6s ease-in-out infinite; }
.ar-product-identity-code { animation: ar-product-domain 3s ease-in-out infinite; }
.ar-product-workspace-focus rect { stroke-dasharray: 12 6; animation: ar-product-focus 3s linear infinite; }
.ar-product-workspace-cards { animation: ar-product-workspace 3.5s ease-in-out infinite; }
.ar-product-audit-row-one, .ar-product-audit-row-two, .ar-product-audit-row-three { animation: ar-product-record 3.2s ease-in-out infinite; }
.ar-product-audit-row-two { animation-delay: -.9s; }
.ar-product-audit-row-three { animation-delay: -1.8s; }
.ar-product-audit-scan { animation: ar-product-timeline 3.2s ease-in-out infinite; }
.ar-product-install-download { animation: ar-product-download 2.4s ease-in-out infinite; }
.ar-product-install-package { transform-box: fill-box; transform-origin: center; animation: ar-product-package 3s ease-in-out infinite; }
.ar-product-install-register { transform-box: fill-box; transform-origin: center; animation: ar-product-verify 3.2s ease-in-out infinite; }
.ar-product-remote-pointer { animation: ar-product-pointer 3s ease-in-out infinite; }
.ar-product-remote-handshake { animation: ar-product-handshake 3.8s ease-in-out infinite; }
@keyframes ar-product-stream { 0%,100% { transform: translateX(-10px); } 50% { transform: translateX(20px); } }
@keyframes ar-product-tcp { 0%,100% { transform: translateX(0); } 50% { transform: translateX(50px); } }
@keyframes ar-product-udp { 0%,100% { transform: translateX(-25px); opacity: .65; } 50% { transform: translateX(30px); opacity: 1; } }
@keyframes ar-product-gate { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.85); } }
@keyframes ar-product-caret { 0% { opacity: .2; } 100% { opacity: 1; } }
@keyframes ar-product-domain { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ar-product-hub { 0%,100% { opacity: .65; } 40%,60% { opacity: 1; } }
@keyframes ar-product-primary { 0%,25%,100% { opacity: 1; } 55%,85% { opacity: .35; } }
@keyframes ar-product-backup { 0%,25%,100% { opacity: .5; } 55%,85% { opacity: 1; } }
@keyframes ar-product-backup-flow { 0%,25%,100% { opacity: .25; } 55%,85% { opacity: 1; } }
@keyframes ar-product-door { 0%,100% { transform: scaleX(1); } 40%,70% { transform: scaleX(.45); } }
@keyframes ar-product-allow { 0%,100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
@keyframes ar-product-block { 0%,60%,100% { transform: translateX(0); } 70%,90% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes ar-product-document { 0%,100% { transform: translateX(0); } 50% { transform: translateX(16px); } }
@keyframes ar-product-inspect { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-7px,24px); } }
@keyframes ar-product-restrict { 0%,100% { opacity: .6; transform: translateY(-5px); } 50% { opacity: 1; transform: translateY(5px); } }
@keyframes ar-product-verify { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.08); } }
@keyframes ar-product-focus { to { stroke-dashoffset: -72; } }
@keyframes ar-product-workspace { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ar-product-record { 0%,100% { opacity: .6; transform: translateX(0); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes ar-product-timeline { 0%,100% { transform: translateY(-50px); opacity: .3; } 50% { transform: translateY(120px); opacity: .85; } }
@keyframes ar-product-download { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
@keyframes ar-product-package { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ar-product-pointer { 0%,100% { transform: translate(0,0); } 40%,60% { transform: translate(-28px,-17px); } }
@keyframes ar-product-handshake { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes ar-scene-travel { to { stroke-dashoffset: -120; } }
@keyframes ar-scene-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ar-scene-cursor { 0%,20%,100% { transform: translate(0,0); } 45%,65% { transform: translate(-12px,-6px); } }
@keyframes ar-scene-orbit { to { transform: rotate(360deg); } }
@keyframes ar-scene-reject { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ar-scene-bars { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }
.ar-site.motion-paused .ar-service-scene *, .motion-paused .ar-service-scene * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ar-service-scene * { animation: none !important; }
}


/* Shared soft graph-paper backdrop for transparent animated illustrations. */
.ar-service-scene{position:relative;isolation:isolate}
.ar-service-scene::before{content:'';position:absolute;z-index:-1;inset:0 0 auto;aspect-ratio:640/460;pointer-events:none;background-image:linear-gradient(#315b4309 1px,transparent 1px),linear-gradient(90deg,#315b4309 1px,transparent 1px),linear-gradient(#315b4306 1px,transparent 1px),linear-gradient(90deg,#315b4306 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center;-webkit-mask-image:radial-gradient(ellipse at center,#000 40%,#0009 65%,transparent 88%);mask-image:radial-gradient(ellipse at center,#000 40%,#0009 65%,transparent 88%)}