/* =====================================================================
   GLOBAL NETWORK (gnet2) — 메인페이지(index.html)와 동일한 글로벌 네트워크 밴드.
   index.html 의 인라인 스타일에서 그대로 떼어낸 것이며, 이 파일을 불러오는
   페이지(about.html 등)는 메인과 똑같은 모습이 된다.
   필요 변수: --navh
   ===================================================================== */
  .fade-up{opacity:0;transform:translateY(30px);transition:opacity .85s ease,transform .85s cubic-bezier(.22,1,.36,1);}
  .fade-up.in{opacity:1;transform:none;}
  /* 히어로 카피 등장은 JS(initHeroVideo)가 영상 재생 시점에 맞춰 제어하므로
     여기서 transition-delay 를 또 주면 간격이 이중으로 벌어진다.
     대신 히어로만 본문 섹션보다 짧은 지속시간·이동거리로 더 빠릿하게 뜬다. */
  .mhero .fade-up{transform:translateY(20px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);}
  .mhero .fade-up.in{transform:none;}
  @media (prefers-reduced-motion:reduce){ .fade-up{transition:opacity .4s ease;transform:none;} }
  /* ---- 한 번 '틱' 걸리는 구간 ----
     제품라인·기술·프로그램이 화면을 붙잡는 것과 같은 방식.
     섹션을 화면 높이 + 여유(--hold)만큼 길게 잡고 안쪽을 sticky 로 고정하면,
     휠 한 번에 지나쳐 버리지 않고 한 박자 머문다.
     화면이 낮거나 좁으면 내용이 잘리므로 해제한다. */
  .hold-scroller{position:relative;}
  .hold-pin{display:block;}
  @media (min-width:901px) and (min-height:760px){
    .blog,.cert,.gnet2{--hold:62vh;}
    .hold-scroller{height:calc(100svh - var(--navh) + var(--hold));}
    .hold-pin{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));
      display:flex;flex-direction:column;justify-content:center;}
    /* 글로벌은 지도가 절대배치라 섹션의 flex/min-height 를 풀고 핀에 맡긴다.
       .gnet2 .hold-pin 이 위에서 relative 로 잡혀 있어 같은 특정도로 다시 눌러준다. */
    .gnet2{display:block;min-height:0;}
  }

  /* ===================================================== GLOBAL NETWORK (GNI dotted world map: HQ arcs + pulsing pins + counters) */
  /* 배경색을 섹션이 아니라 고정 영역(핀)이 갖는다.
     섹션에 두면 위아래 180px 패딩 자리에 스크림이 안 닿아 연회색 띠가 그대로 드러난다.
     (스크림은 핀 크기에 맞춰 그려지므로 핀 밖은 덮지 못한다) */
  .gnet2{position:relative;background:#fff;
    /* overflow:hidden 은 안쪽 sticky 를 무력화한다 → clip 으로 바꾼다 */
    overflow:clip;
    /* 영상 섹션은 위아래 여백을 두지 않는다. 여백이 있으면 앞 섹션과 영상 사이에
       빈 검정 띠가 그대로 드러난다(=풀블리드 미디어 밴드). */
    padding:0;min-height:clamp(600px,88vh,1000px);display:flex;align-items:center;}
  /* 영상 여백이 순검정이라 섹션도 순검정이어야 경계가 안 보인다 */
  .gnet2 .hold-pin{background:#000;}
  /* 배경영상(.gnvid)과 스크림(::after)의 기준 박스를 핀으로 옮긴다.
     안 그러면 지도가 길어진 스크롤러 전체를 기준으로 잡혀 위치가 어긋난다. */
  .gnet2 .hold-scroller{width:100%;}
  .gnet2 .hold-pin{position:relative;width:100%;}
  /* 위 규칙과 특정도가 같으므로 '뒤에' 와야 이긴다 */
  @media (min-width:901px) and (min-height:760px){
    .gnet2 .hold-pin{position:sticky;top:var(--navh);}
  }
  /* ---- 배경 영상 ----
     Hugel 이 Vimeo 배경영상을 깔고 그 위에 검정 그라데이션과 카피를 얹은 구조와 같다.
     영상은 우리가 직접 렌더링한 8초 루프(1280x720)다.
     핵심은 영상과 카피가 '나란히'가 아니라 '겹치고', 그 위를 검정이 왼쪽부터 덮는 것. */
  /* 영상 안에서 지구는 왼쪽 60% 에 있다. 카피가 왼쪽이므로 영상을 오른쪽으로 민다.
     object-fit:cover 는 세로로만 잘려서 가로 이동이 안 먹으므로 transform 으로 옮긴다.
     영상 바깥은 우주(검정)라 섹션 배경과 이어져 경계가 보이지 않는다. */
  .gnvid{position:absolute;inset:0;z-index:0;overflow:hidden;}
  /* 영상 왼쪽 끝이 그라데이션의 '완전 검정' 구간(≈33%) 안으로 들어가야 경계가 안 보인다.
     1920 기준 왼쪽 끝 ≈628px, 지구 중심 ≈1200px 이 되도록 잡은 값. */
  .gnvid video,.gnvid__net{position:absolute;top:50%;left:50%;height:120%;width:auto;
    transform:translate(-17%,-50%);display:block;}
  /* 순서를 명시해 둔다 — 영상 뒤로 숨는 사고를 막는다 */
  .gnvid video{z-index:1;}
  .gnvid__net{z-index:2;}
  /* 캔버스는 width/height 속성(1920x1080)이 있어 width:auto 로도 영상과 같은 상자가 된다.
     덕분에 좌표를 영상 프레임 기준으로 그대로 쓸 수 있다. */
  /* WebGL 캔버스는 기본이 source-over 합성이라, 색이 0 이어도 알파가 있으면
     아래 영상을 '덮어' 검게 만든다. screen 합성이면 어두운 픽셀은 무시되고
     밝은 선만 더해진다 — 우리가 원하는 additive 와 같은 결과다. */
  .gnvid__net{pointer-events:none;mix-blend-mode:screen;}

  .gnet2-inner{position:relative;z-index:3;width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,60px);display:flex;justify-content:flex-start;}
  /* max-width 만 주면 이 블록은 '내용에 맞춘 폭'을 갖는 flex 아이템이 된다.
     그러면 카운터 숫자가 0+ → 60+ 로 커지는 동안 블록 폭이 매 프레임 달라지고,
     justify-content:flex-end 때문에 블록 전체가 좌우로 흔들린다(제목·본문까지 전부).
     너비를 고정하면 내용이 바뀌어도 블록은 제자리에 있는다. */
  .gnet2-text{width:min(700px,100%);}
  .gnet2-text h2{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.22;margin-top:14px;color:#fff;}
  .gnet2-text p{margin-top:22px;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7;color:rgba(255,255,255,.62);max-width:560px;}
  /* minmax(0,1fr): 1fr 의 자동 최소값이 내용 폭을 따라가지 않게 막아 열 너비를 고정한다. */
  .gnet2-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 64px;margin-top:clamp(36px,5vw,56px);max-width:780px;}
  /* tabular-nums: 0~9 의 글자폭을 동일하게 맞춰 카운트 중 숫자가 좌우로 떨리지 않게 한다. */
  .gnet2-stats div b{font-size:clamp(3rem,4.7vw,5rem);font-weight:800;color:#fff;display:block;line-height:1;
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
  .gnet2-stats div span{font-size:14.5px;color:rgba(255,255,255,.5);margin-top:10px;display:block;}
  /* 위 블로그 섹션이 흰 배경이라 경계선이 그어져 보였다.
     섹션 배경을 흰색에서 시작해 지도 배경색으로 내려앉히고,
     그 구간에 걸치는 지도 그래픽과 우측 스크림도 함께 페이드인시켜
     색 덩어리가 생기지 않게 한다. */
  #network{background:#000;}

  /* 그라데이션 2장 모두 '끝나는 지점'이 눈에 보이는 게 문제였다.
     - 상단 페이드는 380px 에서 뚝 끝나 흰 선반처럼 가로 단차가 생겼다 → 섹션 전체 높이로 늘려
       천천히 감쇠시키면 끝나는 자리가 안 보인다.
     - 우측 스크림은 90deg 직선이라 세로 띠로 읽혔다 → 화면 오른쪽 밖에 중심을 둔 타원으로 바꿔
       곡선으로 번지게 하면 방향성 있는 경계가 사라진다. */
  /* 왼쪽은 완전 검정 → 서서히 영상 등장 → 오른쪽은 영상 그대로 */
  #network .hold-pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,
      #000 0%, #000 27%, rgba(0,0,0,.97) 33%, rgba(0,0,0,.82) 39%,
      rgba(0,0,0,.5) 46%, rgba(0,0,0,.18) 54%, rgba(0,0,0,0) 64%);}
  @media(max-width:980px){.gnet2{min-height:auto;padding:80px 0;}.gnet2-inner{justify-content:center;text-align:center;}.gnet2-text{margin:0 auto;}.gnet2-stats{margin-left:auto;margin-right:auto;}}
  @media(max-width:900px){
    .gnvid video,.gnvid__net{height:100%;width:auto;min-width:100%;transform:translate(-50%,-50%);}
    #network .hold-pin::after{background:linear-gradient(180deg,
      rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 42%, rgba(0,0,0,.94) 100%);}
  }