/* ── 히어로 배경 (canvas) ── */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .wrap{position:relative;z-index:2}
.hero-mo{position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
/* 모션의 .gi-spot > * {position:relative} 가 배경을 흐름 안으로 끌어들입니다.
   선택자를 한 단계 좁혀 이깁니다 (!important 없이). */
.hero > .hero-mo{position:absolute;z-index:0}
.hero-mo.on{opacity:1}
@media (max-width:900px){
  /* 좁은 화면에서는 그리지 않습니다. 글자만 남는 편이 낫습니다 */
  .hero-mo{display:none}
}

/* ── 메뉴 전환: 1024px 이하는 햄버거 ── */
@media (min-width:641px) and (max-width:1024px){
  .gnb-in{gap:14px}
  .gnb-toggle{display:block;-webkit-appearance:none;appearance:none;order:-1;
    width:34px;height:34px;margin:0;border:1px solid var(--border-dark);background:none;
    cursor:pointer;position:relative;flex:none}
  .gnb-toggle::before,.gnb-toggle::after{content:"";position:absolute;left:9px;right:9px;
    height:1.5px;background:#fff;transition:transform .25s ease,top .25s ease}
  .gnb-toggle::before{top:12px}
  .gnb-toggle::after{top:19px}
  .gnb-toggle:checked::before{top:15.5px;transform:rotate(45deg)}
  .gnb-toggle:checked::after{top:15.5px;transform:rotate(-45deg)}

  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--navy-alt);border-bottom:1px solid var(--border-dark);
    max-height:0;overflow:hidden;transition:max-height .28s ease;margin-left:0;z-index:40}
  .gnb-toggle:checked ~ .nav{max-height:calc(100dvh - 76px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:16px}
  .nav>li>a{padding:16px 20px;border-bottom:1px solid var(--border-dark);position:relative}
  .nav>li.on>a::after{display:none}

  /* 서브메뉴는 화살표로 펼칩니다 (좁은 화면 규칙과 동일) */
  .nav>li>.sub{display:block;overflow:hidden;max-height:0;
    transition:max-height .32s cubic-bezier(.16,.84,.44,1);
    position:static;opacity:1;visibility:visible;transform:none;
    background:var(--navy);border:0;box-shadow:none;min-width:0;padding:0}
  .nav>li.gi-open>.sub{max-height:560px}
  .nav>li>a .caret{position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    font-size:15px;transition:transform .3s ease;margin:0}
  .nav>li.gi-open>a .caret{transform:translateY(-50%) rotate(180deg)}
  .sub a{padding:13px 20px 13px 34px;border-bottom:1px solid var(--border-dark)}

  .gnb .cta{margin-left:auto;padding:11px 18px;font-size:14px}
  .langsw{order:3;margin:0 10px 0 auto;display:inline-flex}
  .langsw span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gnb .cta{margin-left:8px}
}

/* ── 상단 메뉴 크기 조절 ── */
@media (min-width:1181px){
  .gnb-in{gap:28px}
  .nav{gap:0}
  .nav > li > a{font-size:15.5px;padding-left:15px;padding-right:15px}
  .nav .caret{margin-left:5px}
  .nav .ext{font-size:11.5px;margin-left:4px}
  .gnb .cta{font-size:14px;padding:12px 20px;margin-left:10px}
  .gnb .logo svg{height:24px}
}
@media (min-width:1025px) and (max-width:1180px){
  .gnb-in{gap:20px}
  .nav{gap:0}
  .nav > li > a{font-size:15px;padding-left:13px;padding-right:13px}
  .nav .caret{font-size:9.5px;margin-left:4px}
  .nav .ext{font-size:11px;margin-left:4px}
  .gnb .cta{font-size:13.5px;padding:11px 17px;margin-left:8px}
  .gnb .logo svg{height:22px}
}

/* gi-menu */
/* ── 모바일 메뉴: 서브메뉴 접기 ── */
@media (max-width:1024px){
  /* 메뉴가 화면보다 길어지면 스크롤 — 마지막 항목이 잘리지 않게 */
  .gnb-toggle:checked ~ .nav{
    max-height:calc(100dvh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;padding-bottom:16px}

  /* 하위 항목은 기본으로 접습니다 */
  .nav > li > .sub{
    display:block;overflow:hidden;max-height:0;
    transition:max-height .32s cubic-bezier(.16,.84,.44,1)}
  .nav > li.gi-open > .sub{max-height:560px}

  /* 화살표를 손가락으로 누를 수 있는 크기로 키웁니다 */
  .nav > li > a{position:relative}
  .nav > li > a .caret{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    font-size:15px;transition:transform .3s ease;margin:0}
  .nav > li.gi-open > a .caret{transform:translateY(-50%) rotate(180deg)}
}
@media (prefers-reduced-motion:reduce){
  .nav > li > .sub{transition:none}
}

/* ── GI-Agent · GI-Radar: 로고와 같은 프록시마 노바 ── */
@font-face{
  font-family:'ProximaGI';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  /* `110%%` 로 적혀 있었습니다 — 자리표시자가 `d09GMgABAAAAAATkAA4AAAAACDwAAASRAAIAxQAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbEBwaBmAAgSQRCAqJXIdJATYCJANUCywABCAFBgcgGwgGgI7UVveHZKAy6Nv0Z/eI7SFRIWZE1Ah4LRWVo3WoKamKHPDUvlSJ//m/pl40nh4efdEjPZHIRVskZuB0PJtRN0UJTmggA9O96TZ03YCAg8R3TK0AEABSCgApCAgCVxEADFLIAQB4xgYjFGTsoKnj4Q1bTskLTgkPeNPr1ApgJX+afIxc0gFQeHhyAIUEAAecNG7slClQQolLXLBbBXBbSdpOq0C+pL0AlJAAoJnpQHAgnJZgLfA6JDgvFZmoQRNaoIEOgzAMIzAWEzAVl9zuCKEUdCg7HpO/p/vzD1z3b928eOHIoYN79+zqDwJLEzco0CAqDVAkRcaGyQ8AI0GaAiDdQ79OimYvRN5IIpFJJd5chETu4x3JFNIgr0iZxI8xeXyw9yCpl2yml9RzkM7ptLiMelGE4NAbXMTiNBgdDkEcwgivYAapjvXwJoNukNW5yMXbHHrdSSezioKDt7mSCSMyKvLMI9LLwK+V2RwQxGaD7Rax3GQMMubBiAJMxshhkVmdxOLibTXE8pJZ1YZykm2AzpZFTjLrZeGKgpGglXrC97M9iyD2p8z6WnAMchc4AOmON9zgStdfFvva7y56b0eq32B0tZLseiqIr0WxT40whDcHLeAszFpOKcCjnpTtcBZOCqLTdvuUVYTAr1rHeiEOMqsYqh8FlcYjDt7WIk+dzg2CuqPOM9sf3MAniCEPJ4QRnvDgwSAc4W0h+ssfCq+tby3vbHZzT2sP5TLkSjmy5gxsbWvr+8uvU6LuA1vyzapjo0epjmPyQ3/D4MMPR6uO5ZlVj+gK2ZkfLT/i/j1lj9dsuPe3/b3g/bq/tRAL+W2vbhRi6raRq/omNaxpzWvNVnWPHL9f/sXu+PqQrPzNW2p9plnw3fHe45j2YMKnps+O93aOnTNvoLpzqGauEP9bXOxv8cvXYN5xj2ubYzdfxQ/27NFqpapquKZdPaS1dtSjUmWBquNs4UBj6yJVu391akJH4Q9i5eR0S0Xs9cLrCN5WXFqn6z9z6YypM5f3NxbV/7Ttt+iw5i82ftEUlnVqdFk1YvjJm6xTxqxdN3HcivWzY01DfsqNbA6Ore5RjVXGZVf9nJ35kxq4N9/YVDuuqCe7NacisaxB23/G/GlTp88fYCyqL9l2uSTOoGlTNjEvbVjTW8vbprCsQ3n5h/DW3mtHmD1E3VU8oNj+pb2svHG0ukvTiGh+xpoN4pr1M2Z2aTRsOLxscHFtXi5KBxfW5ubhbegvWKVNTdsYEKisDX2LH/ma2cndVaMuD01KrUn0W9st1YSV1BXWjes7aLKxqnTYsI7o1IiA6J3dck1ESWNR0zQTvudb25saP1QvVS/etnjw0sGng0cHRvVGTYnBl2Ht09uHt49oBwCAAKB4IM0bMrlHUf6bN899BwBPwh/28Bq37v/3JNu5VaiBN2hWA7f1fycgOb9KuXUdQGC9g4gL5QQAqUXy2MWfZCCaXnH/Rt8hnCSgnG6S3h0IpskIo10IpQkCdQKEoZh226r/oRkDyVdQkJHwJnKk7sIHQQevtgTGeYKDmHsSAgEAAA==` 라 `%` 를 이스케이프해야 하는 줄
     알았던 듯한데, 여기는 `.replace()` 라 그럴 필요가 없습니다. 값이 무효가 되어
     브라우저가 선언을 버렸고, 높이 보정이 2026-08-14 까지 걸리지 않고 있었습니다. */
  size-adjust:110%;           /* 프리텐다드와 글자 높이를 맞춥니다 */
  src:url(/fonts/proximagi-800-96fecd9f.woff2) format('woff2');
}
/* .nav > li > a (0,1,2) 가 굵기를 600 으로 눌러서 한 단계 올립니다.
   세 제품은 「제품▾」 드롭다운 안(.nav .sub a)에도 있으므로 그 선택자를 함께 씁니다 —
   빠뜨리면 드롭다운 안에서만 프리텐다드로 되돌아가 두 벌로 보입니다. */
a[href*="ai.gi-corp.co.kr"],
a[href*="research.gi-corp.co.kr"],
a[href*="tools.gi-corp.co.kr"],
.nav > li > a.gi-ai,
.ftr a.gi-ai,
.nav > li > a[href*="ai.gi-corp.co.kr"],
.nav > li > a[href*="research.gi-corp.co.kr"],
.nav > li > a[href*="tools.gi-corp.co.kr"],
.nav .sub a[href*="ai.gi-corp.co.kr"],
.nav .sub a[href*="research.gi-corp.co.kr"],
.nav .sub a[href*="tools.gi-corp.co.kr"],
.ftr a[href*="ai.gi-corp.co.kr"],
.ftr a[href*="research.gi-corp.co.kr"],
.ftr a[href*="tools.gi-corp.co.kr"]{
  font-family:'ProximaGI','PretendardSub',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800;
  letter-spacing:-.012em;
}
/* 화살표와 한글은 이 폰트에 없어 프리텐다드로 되돌아갑니다.
   되돌아간 글자까지 800 이면 너무 굵어 원래 굵기로 낮춥니다.
   드롭다운의 한 줄 설명(.desc)도 같은 이유로 되돌립니다. */
a[href*="ai.gi-corp.co.kr"] .ext,
a[href*="research.gi-corp.co.kr"] .ext,
a[href*="tools.gi-corp.co.kr"] .ext,
a[href*="ai.gi-corp.co.kr"] .desc,
a[href*="research.gi-corp.co.kr"] .desc,
a[href*="tools.gi-corp.co.kr"] .desc{font-weight:700;letter-spacing:0}
/* ▾ 도 이 폰트에 없다. 옆의 「서비스▾」·「목적별▾」와 같은 굵기(600)로 되돌린다 —
   800 그대로 두면 GI-AI 의 화살표만 유독 굵어 보인다. */
a.gi-ai .caret{font-weight:600;letter-spacing:0}
.nav .sub a .desc{font-family:'PretendardSub',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400}