/* 나눔스퀘어 */
/* @import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css'); */

/* 프리텐다드로 변경 (모든 굵기 지원) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body {
  font-family: 'Pretendard', sans-serif; /* 폰트 패밀리도 Pretendard로 변경 */
  background-color: #fafafa;
  padding-bottom: 56px;
}
   
    
    .bg-noise {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.04;
      mix-blend-mode: overlay;
      pointer-events: none;
    }

    .text-balance { text-wrap: balance; }
    
    @keyframes ticker {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .animate-ticker { 
      animation: ticker 25s linear infinite; 
    }
    .animate-ticker:hover {
      animation-play-state: paused;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    .client-item {
      width: 160px; 
      flex-shrink: 0;
    }

    /* 흐르는 점선 애니메이션 */
    @keyframes dashflow {
      to { stroke-dashoffset: -24; }
    }
    .animate-dashflow {
      stroke-dasharray: 6;
      animation: dashflow 0.6s linear infinite;
    }

    /* 은은한 배경 그리드 */
    .bg-grid-subtle {
      background-size: 40px 40px;
      background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    }

    /* 스마트 빌리지 흐름 애니메이션 */
    @keyframes signal-1 {
      0% { left: 0%; opacity: 0; }
      5% { opacity: 1; }
      45% { opacity: 1; left: 100%; }
      50% { opacity: 0; left: 100%; }
      100% { opacity: 0; left: 100%; }
    }
    @keyframes signal-2 {
      0% { left: 0%; opacity: 0; }
      50% { left: 0%; opacity: 0; }
      55% { opacity: 1; left: 0%; }
      95% { opacity: 1; left: 100%; }
      100% { opacity: 0; left: 100%; }
    }
    
    @keyframes signal-v-1 {
      0% { top: 0%; opacity: 0; }
      5% { opacity: 1; }
      45% { opacity: 1; top: 100%; }
      50% { opacity: 0; top: 100%; }
      100% { opacity: 0; top: 100%; }
    }
    @keyframes signal-v-2 {
      0% { top: 0%; opacity: 0; }
      50% { top: 0%; opacity: 0; }
      55% { opacity: 1; top: 0%; }
      95% { opacity: 1; top: 100%; }
      100% { opacity: 0; top: 100%; }
    }

    @keyframes node-ping-1 {
      0% { transform: scale(1); opacity: 0.8; }
      25% { transform: scale(1.4); opacity: 0; }
      100% { transform: scale(1.4); opacity: 0; }
    }
    @keyframes node-ping-2 {
      0% { transform: scale(1); opacity: 0; }
      45% { transform: scale(1); opacity: 0; }
      50% { transform: scale(1); opacity: 0.8; }
      75% { transform: scale(1.4); opacity: 0; }
      100% { transform: scale(1.4); opacity: 0; }
    }
    @keyframes node-ping-3 {
      0% { transform: scale(1.3); opacity: 0; }
      90% { transform: scale(1); opacity: 0; }
      95% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(1.3); opacity: 0; }
    }

    /* 신호등 깜빡임 애니메이션 */
    @keyframes traffic-light {
      0%, 100% { opacity: 0.25; }
      50% { opacity: 1; }
    }

    .animate-sig-1 { animation: signal-1 5.4s linear infinite; }
    .animate-sig-2 { animation: signal-2 5.4s linear infinite; }
    .animate-sig-v-1 { animation: signal-v-1 5.4s linear infinite; }
    .animate-sig-v-2 { animation: signal-v-2 5.4s linear infinite; }
    .animate-node-1 { animation: node-ping-1 5.4s linear infinite; }
    .animate-node-2 { animation: node-ping-2 5.4s linear infinite; }
    .animate-node-3 { animation: node-ping-3 5.4s linear infinite; }
    
    .traffic-1 { animation: traffic-light 2.4s infinite 0s ease-in-out; }
    .traffic-2 { animation: traffic-light 2.4s infinite 0.8s ease-in-out; }
    .traffic-3 { animation: traffic-light 2.4s infinite 1.6s ease-in-out; }

    /* GNB 트랜지션 */
    .gnb-transition { transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }