@font-face{font-family:'PretendardSub';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pretendardsub-400-d67862a9.woff2) format('woff2');}
@font-face{font-family:'PretendardSub';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/pretendardsub-600-57fe311c.woff2) format('woff2');}
@font-face{font-family:'PretendardSub';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pretendardsub-700-642d910b.woff2) format('woff2');}
@font-face{font-family:'PretendardSub';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/pretendardsub-800-4c1ed712.woff2) format('woff2');}
@font-face{font-family:'PretendardSub';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/pretendardsub-900-6029edba.woff2) format('woff2');}

/* ══════════════════════════════════════════════════
   GI Corporation — 홈 프로토타입
   design-tokens/gi-tokens.js 값을 그대로 사용
   ══════════════════════════════════════════════════ */

:root{
  --navy:#10141C; --navy-alt:#0A0E15; --ink:#10141C;
  --cream:#F4F6FA; --stone:#E2E7F0; --ghost-dark:#1B2233;
  --blue:#6B7689; --blue-300:#A3ACBD; --blue-600:#555F70; --blue-700:#3F4757;
  --mint:#4D8DFF; --mint-400:#7CACFF; --mint-800:#12459E;
  --slate-dark:#A5AEBE; --slate-light:#57606E; --muted-light:#4F5866;
  --border-dark:#242C3B; --divider:#C6CEDA;

  --gutter:24px; --container:1200px; --pad-y:120px;
  --fs-display:88px; --fs-h1:64px; --fs-h2:44px; --fs-h3:32px;
  --fs-lead:24px; --fs-body:17px; --fs-small:15px; --fs-label:13px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'PretendardSub','Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--cream);
}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--pad-y) 0;position:relative;overflow:hidden;scroll-margin-top:76px}
html{scroll-behavior:smooth}

/* ── 서피스 ── */
.dark{background:var(--navy);color:#fff}
.light{background:var(--cream);color:var(--ink)}

/* ── 타이포 ── */
.label{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:36px;display:block;
}
.dark .label{color:var(--mint)}
.light .label{color:var(--blue)}

h1{font-size:var(--fs-display);font-weight:800;line-height:1.1;letter-spacing:-.035em}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.2;letter-spacing:-.025em}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em}

.lead{font-size:var(--fs-lead);font-weight:600;line-height:1.45;letter-spacing:-.01em}
.body{font-size:var(--fs-body);font-weight:400;line-height:1.65;letter-spacing:-.005em}
.dark .body,.dark .lead{color:var(--slate-dark)}
.light .body{color:var(--slate-light)}
.light .lead{color:var(--muted-light)}

/* ── 시그니처 민트 룰 ── */
.rule{width:236px;height:5px;background:var(--mint);margin:56px 0 40px}

/* ── 고스트 워드마크 ── */
.ghost{
  position:absolute;right:60px;top:50%;transform:translateY(-50%);
  font-weight:900;font-size:520px;line-height:.78;letter-spacing:-.045em;
  color:var(--ghost-dark);user-select:none;pointer-events:none;
}

/* ── 버튼 (radius 0 — 브랜드 시그니처) ── */
.btn{
  display:inline-block;padding:20px 40px;font-size:17px;font-weight:700;
  text-decoration:none;border-radius:0;letter-spacing:-.01em;
}
.btn-primary{background:var(--mint);color:var(--navy)}
.btn-ghost{border:1px solid var(--border-dark);color:#fff;margin-left:12px}
.light .btn-ghost{border-color:var(--divider);color:var(--ink)}
.btn-row{margin-top:48px}

/* ══ 0. 글로벌 헤더 ══ */
.gnb{
  position:sticky;top:0;z-index:100;background:var(--navy);
  border-bottom:1px solid var(--border-dark);
}
.gnb-in{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  height:76px;display:flex;align-items:center;gap:40px;
}
.gnb .logo{font-size:21px;color:#fff;text-decoration:none;letter-spacing:-.02em;white-space:nowrap}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav > li{list-style:none;position:relative}
.nav > li > a{
  display:block;padding:26px 18px;font-size:16px;font-weight:600;
  color:#C6CEDA;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;
}
.nav > li > a:hover,.nav > li:hover > a{color:#fff}
.nav .caret{font-size:10px;margin-left:6px;color:#57606E}
.nav .ext{font-size:12px;margin-left:5px;color:var(--mint)}

/* 하위 메뉴 */
.sub{
  position:absolute;top:100%;left:0;min-width:238px;
  background:var(--navy-alt);border:1px solid var(--border-dark);
  padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav > li:hover .sub,.nav > li:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub li{list-style:none}
.sub a{
  display:block;padding:13px 22px;font-size:15px;font-weight:500;
  color:#A5AEBE;text-decoration:none;letter-spacing:-.01em;border-left:2px solid transparent;
}
.sub a:hover{color:#fff;background:#10141C;border-left-color:var(--mint)}
.sub-note{padding:11px 22px 6px;font-size:12px;color:#555F70;border-top:1px solid #1B2233;margin-top:6px;list-style:none}
.sub .desc{display:block;font-size:12.5px;color:#57606E;margin-top:3px;font-weight:400}

.gnb .cta{
  padding:13px 24px;background:var(--mint);color:var(--navy);
  font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;margin-left:12px;
}
.gnb .cta:hover{background:var(--mint-400)}
.gnb-toggle{display:none}

/* ══ 1. 히어로 ══ */
.hero{padding:180px 0 160px}
.hero h1{max-width:16ch}
.hero .en{font-size:41px;font-weight:600;color:var(--blue-300);letter-spacing:-.005em}
.hero .lead{margin-top:32px;max-width:44ch}


/* ══ 1-0. 고객사 띠 ══ (2026-09-02)
   경쟁사 7곳 중 5곳이 사례·로고를 첫 화면 바로 다음에 둔다. 우리는 같은 이름을
   9번째 섹션(#cases)에만 두고 있었다. 여기는 **이름만** 얹는다 — 사진은 #cases 가 맡는다.

   두 가지를 일부러 이렇게 했다:
   1) **`dark`·`light` 클래스를 안 붙였다.** `--invert-home` 이 홈의 dark/light 를 통째로
      맞바꾸므로(`invert_patch.py`), 클래스를 붙이면 옵션 유무에 따라 색이 뒤집힌다.
      배경과 글자색을 여기서 직접 정해 어느 빌드에서도 같게 나오게 했다.
   2) **코발트를 안 썼다.** 히어로 CTA 가 같은 첫 화면에서 이미 액센트를 쓰고 있다
      (액센트는 한 화면에 한 번). 이름은 잉크, 라벨은 스틸로만 쓴다. */
.clients{
  background:var(--cream);color:var(--ink);
  padding:40px 0;border-top:1px solid var(--divider);
}
.clients .ck{
  display:block;font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate-light);
}
.clients ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 0}
.clients li{
  font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
  padding:0 18px;border-left:1px solid var(--divider);line-height:1.45;
}
.clients li:first-child{padding-left:0;border-left:0}
.clients .more{
  display:inline-block;margin-top:22px;font-size:15px;font-weight:600;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--divider);padding-bottom:3px;
}
.clients .more:hover{border-bottom-color:var(--ink)}
@media (max-width:820px){
  .clients{padding:32px 0}
  .clients li{font-size:15px;padding:0 12px}
}

/* ══ 1-1. 성과 지표 밴드 ══ */
.stats{
  margin-top:96px;padding-top:44px;border-top:1px solid var(--border-dark);
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
}
.stats div .n{
  display:block;font-size:46px;font-weight:800;color:#fff;letter-spacing:-.035em;line-height:1.05;
}
.stats div .n em{font-style:normal;color:var(--mint);font-size:30px;margin-left:2px}
.stats div .k{
  display:block;margin-top:10px;font-size:14px;font-weight:600;color:#A5AEBE;letter-spacing:-.005em;
}

/* ══ CEO 인용 ══ */
.ceo{
  margin-top:72px;padding:44px 0 0;border-top:1px solid var(--border-dark);
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;
}
.ceo .who{font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);white-space:nowrap;padding-top:8px}
.ceo blockquote{
  margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.5;
  letter-spacing:-.02em;color:#fff;word-break:keep-all;
}
.ceo cite{display:block;margin-top:18px;font-size:var(--fs-body);font-style:normal;color:#A5AEBE;font-weight:600}

/* ══ 강의 이력 ══ */
.lectures{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.lectures li{
  list-style:none;padding:14px 0;border-bottom:1px solid var(--border-dark);
  font-size:15px;line-height:1.5;color:#A5AEBE;letter-spacing:-.01em;
  display:flex;gap:12px;word-break:keep-all;
}
.lectures li::before{content:"";flex:0 0 auto;width:5px;height:5px;background:var(--mint);margin-top:8px}

/* ══ 2·3. 문제/답 ══ */
.statement h2{max-width:14ch}
.statement .body{margin-top:40px;max-width:52ch}

/* SUCCESS / FAILURE 대비 블록 */
.contrast{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:900px}
.contrast div{border-top:1px solid var(--border-dark);padding-top:28px}
.contrast .k{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;display:block;margin-bottom:10px}
.contrast .a .k{color:#555F70}
.contrast .b .k{color:var(--mint)}
.contrast .v{font-size:var(--fs-body);color:var(--slate-dark)}

/* ══ 4. 5가지 방식 ══ */
.ways{margin-top:24px}
.way{
  display:grid;grid-template-columns:80px 220px 1fr;gap:32px;align-items:baseline;
  padding:34px 0;border-bottom:1px solid var(--divider);
}
.way:first-child{border-top:1px solid var(--divider)}
.way .n{font-size:var(--fs-body);font-weight:700;color:var(--mint-800)}
.way .t{font-size:var(--fs-h3);font-weight:700;color:var(--ink);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:12px}
.way .t svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--slate-light)}
.way .d{font-size:var(--fs-lead);font-weight:400;color:var(--slate-light);letter-spacing:-.01em}

/* ══ 5. 서비스 ══ */
.svc{margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-dark)}
.svc article{background:var(--navy);padding:52px 44px}
.svc .n{font-size:var(--fs-body);font-weight:700;color:var(--mint);display:block;margin-bottom:20px}
.svc h3{color:#fff;margin-bottom:18px}
.svc h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--mint);padding-bottom:2px}
.svc h3 a:hover{color:var(--mint)}
.svc p{font-size:var(--fs-body);line-height:1.7;color:var(--slate-dark)}

/* ══ 5-1. GI-Agent ══ */
.ai-panel{
  margin-top:64px;background:var(--navy);color:#fff;
  padding:64px 60px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.ai-panel h3{color:#fff;margin-bottom:24px}
.ai-panel p{font-size:var(--fs-body);line-height:1.75;color:var(--slate-dark)}
.ai-panel .quote{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--border-dark);
  font-size:var(--fs-lead);font-weight:700;color:var(--mint);letter-spacing:-.01em;line-height:1.45;
}
.ai-flow{display:flex;flex-direction:column;gap:1px;background:var(--border-dark)}
.ai-flow div{background:var(--navy-alt);padding:20px 24px;display:flex;align-items:baseline;gap:16px}
.ai-flow .k{font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--mint);min-width:26px}
.ai-flow .v{font-size:var(--fs-body);font-weight:600;color:#fff}
.ai-flow .s{margin-left:auto;font-size:13px;color:#57606E}

/* ══ 6. 사례 ══ */
.cases{margin-top:64px;display:grid;grid-template-columns:repeat(5,1fr);gap:28px 20px}
.cases figure{margin:0}
.cases img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:0;background:var(--stone)}
.cases figcaption{
  margin-top:12px;font-size:14px;font-weight:600;color:var(--muted-light);
  letter-spacing:-.01em;line-height:1.35;word-break:keep-all;
}
/* ══ 7. 인사이트 ══ */
.posts{margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.posts article{border-top:2px solid var(--mint);padding-top:26px}
.posts .cat{font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);display:block;margin-bottom:16px}
.posts h3{font-size:21px;color:#fff;line-height:1.45;font-weight:700}
.posts p{margin-top:14px;font-size:var(--fs-small);color:#A5AEBE;line-height:1.6}

/* ══ 7-1. 강의 ══ */
.teach{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.teach figure{margin:0}
.teach img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:0}
.teach figcaption{
  margin-top:14px;font-size:14px;line-height:1.55;color:#A5AEBE;
  letter-spacing:-.01em;word-break:keep-all;
}
.teach figcaption b{display:block;color:#fff;font-weight:700;font-size:15px;margin-bottom:4px}
.teach-note{
  margin-top:36px;padding-top:26px;border-top:1px solid var(--border-dark);
  font-size:var(--fs-lead);font-weight:700;color:var(--mint);letter-spacing:-.01em;
}

/* ══ 8. CTA ══ */
.cta{text-align:left}
.cta h2{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;line-height:1.14;max-width:12ch}
.cta .contactinfo{margin-top:64px;font-size:var(--fs-body);color:var(--muted-light);line-height:1.9}
.cta .contactinfo b{color:var(--ink);font-weight:700}

/* ══════════════════════════════════════════════════
   반응형 — 태블릿 810 / 모바일 390
   ══════════════════════════════════════════════════ */
@media (max-width:1024px){
  :root{
    --pad-y:80px;
    --fs-display:64px;--fs-h1:48px;--fs-h2:36px;--fs-h3:26px;
    --fs-lead:21px;--fs-body:17px;
  }
  .hero{padding:120px 0 100px}
  .ghost{font-size:340px;right:-40px;opacity:.75}
  .rule{width:200px;height:4px;margin:40px 0 32px}
  .way{grid-template-columns:56px 1fr;row-gap:10px}
  .way .d{grid-column:2}
  .svc{grid-template-columns:repeat(2,1fr)}
  .cases{grid-template-columns:repeat(4,1fr);gap:22px 16px;margin-top:48px}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px;margin-top:64px}
  .lectures{grid-template-columns:1fr;gap:0}
  .ceo{grid-template-columns:1fr;gap:20px}
  .ai-panel{grid-template-columns:1fr;gap:40px;padding:48px 40px;margin-top:48px}
  .posts{grid-template-columns:1fr;gap:36px}
}

@media (max-width:640px){
  /* ── 모바일 오버플로 방지 (현행 사이트의 가로 잘림과 같은 원인) ── */
  html,body{overflow-x:hidden;width:100%}
  .wrap{width:100%}
  .hero h1,.hero .lead,.statement h2,.statement .body,.cta h2{max-width:none}
  /* 한국어 조판: 단어 중간에서 끊지 않되, 넘치면 강제 줄바꿈 */
  h1,h2,h3,p,.lead,.body,.en{word-break:keep-all;overflow-wrap:break-word}
  .cases figcaption{word-break:keep-all;overflow-wrap:break-word}

  :root{
    --gutter:20px;--pad-y:56px;
    --fs-display:40px;--fs-h1:32px;--fs-h2:26px;--fs-h3:21px;
    --fs-lead:18px;--fs-body:16px;--fs-small:14px;--fs-label:12px;
  }
  /* 모바일에서 고스트 워드마크 제거 — 가로 오버플로의 주범 */
  .ghost{display:none}
  .hero{padding:80px 0 72px}
  .hero h1,.statement h2,.cta h2{max-width:none}
  .hero .en{font-size:26px}
  .hero .lead{margin-top:24px;max-width:none}
  .rule{width:160px;height:4px;margin:32px 0 24px}
  .label{margin-bottom:24px}
  .contrast{grid-template-columns:1fr;gap:28px;margin-top:48px}
  .way{grid-template-columns:1fr;row-gap:8px;padding:26px 0}
  .way .d{grid-column:1}
  .svc{grid-template-columns:1fr;margin-top:48px}
  .svc article{padding:36px 24px}
  /* 모바일 헤더 — 로고 + 문의 CTA만, 메뉴는 접힘 */
  section{scroll-margin-top:62px}
  .gnb-in{height:62px;gap:14px}
  .gnb .logo{font-size:18px}
  .nav{
    position:absolute;top:62px;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;
  }
  .gnb-toggle:checked ~ .nav{max-height:640px;overflow:auto}
  .nav > li > a{padding:16px 20px;font-size:16px;border-bottom:1px solid #1B2233}
  .nav .caret{float:right;color:#57606E}
  .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;background:#10141C;padding:0;min-width:0;
  }
  .sub a{padding:12px 20px 12px 36px;font-size:14px;border-bottom:1px solid #1B2233}
  .sub-note{padding:11px 22px 6px;font-size:12px;color:#555F70;border-top:1px solid #1B2233;margin-top:6px;list-style:none}
.sub .desc{display:none}
  .gnb .cta{margin-left:auto;padding:10px 16px;font-size: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:linear-gradient(#C6CEDA,#C6CEDA) center/16px 1.5px no-repeat,
               linear-gradient(#C6CEDA,#C6CEDA) center top 11px/16px 1.5px no-repeat,
               linear-gradient(#C6CEDA,#C6CEDA) center bottom 11px/16px 1.5px no-repeat;
    cursor:pointer;flex:0 0 auto;
  }
  .gnb-toggle:checked{border-color:var(--mint)}

  .ai-panel{grid-template-columns:1fr;gap:32px;padding:36px 24px;margin-top:40px}
  .ai-flow div{padding:16px 18px;gap:12px;flex-wrap:wrap}
  .ai-flow .s{margin-left:0;flex-basis:100%}
  .teach{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .stats{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;padding-top:32px}
  .stats div .n{font-size:34px}
  .stats div .n em{font-size:22px}
  .ceo{margin-top:48px;padding-top:32px}
  .teach-note{margin-top:28px;padding-top:22px}
  .cases{grid-template-columns:repeat(2,1fr);gap:20px 14px;margin-top:40px}
  .cases figcaption{font-size:13px;margin-top:9px}
  .posts{margin-top:48px}
  .btn{display:block;text-align:center;padding:18px 24px}
  .btn-ghost{margin-left:0;margin-top:12px}
  .btn-row{margin-top:36px}
  .cta .contactinfo{margin-top:40px}
}

/* ── 로고 (공식 SVG) ── */
.gnb .logo{display:flex;align-items:center;height:100%;padding:0}
.gnb .logo svg{height:26px;width:auto;display:block;color:#fff}
.ghost{display:flex;align-items:center;justify-content:flex-end;right:0;opacity:.9}
.ghost svg{width:360px;height:auto;color:var(--ghost-dark);display:block}
@media (max-width:1024px){.ghost svg{width:260px}}
@media (max-width:640px){.gnb .logo svg{height:21px}}

/* 드롭다운 */
.nav>li{position:relative}
.nav .caret{font-size:10px;margin-left:6px;color:#57606E}
.nav .ext{font-size:12px;margin-left:5px;color:var(--mint)}
.sub{position:absolute;top:100%;left:0;min-width:250px;background:var(--navy-alt);border:1px solid var(--border-dark);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:120}
.nav>li:hover .sub,.nav>li:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub li{list-style:none}
.sub a{display:block;padding:13px 22px;font-size:15px;font-weight:500;color:#A5AEBE;text-decoration:none;letter-spacing:-.01em;border-left:2px solid transparent;white-space:nowrap}
.sub a:hover{color:#fff;background:#10141C;border-left-color:var(--mint)}
.sub .desc{display:block;font-size:12.5px;color:#57606E;margin-top:3px;font-weight:400;white-space:nowrap}
@media (max-width:640px){
  .nav .caret{float:right;color:#57606E}
  .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;background:#10141C;padding:0;min-width:0}
  .sub a{padding:12px 20px 12px 36px;font-size:14px;border-bottom:1px solid #1B2233;white-space:normal}
  .sub .desc{display:none}
  .gnb-toggle:checked ~ .nav{max-height:860px;overflow:auto}
}

/* ── 푸터 ── */
.ftr{background:var(--navy-alt);border-top:1px solid var(--border-dark);padding:72px 0 32px}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:56px}
.ftr-logo{display:block;margin-bottom:26px}
.ftr-logo svg{height:24px;width:auto;color:#fff;display:block}
.ftr-slog{font-size:19px;font-weight:700;color:#fff;line-height:1.45;letter-spacing:-.02em;word-break:keep-all}
.ftr-en{margin-top:10px;font-size:15px;font-weight:600;color:var(--mint)}
.ftr-col .h{display:block;font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--mint);margin-bottom:20px;text-transform:uppercase}
.ftr-col ul{list-style:none}
.ftr-col li{margin-bottom:12px}
.ftr-col a{font-size:15px;color:#A5AEBE;text-decoration:none;letter-spacing:-.01em}
.ftr-col a:hover{color:#fff}
.ftr-info li{font-size:15px;color:#A5AEBE;line-height:1.6}
.ftr-ext{margin-top:22px;display:flex;flex-wrap:wrap;gap:16px}
.ftr-ext a{font-size:14px;font-weight:600;color:var(--mint);text-decoration:none}
.ftr-btm{margin-top:56px;padding-top:26px;border-top:1px solid var(--border-dark);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ftr-btm span{font-size:13px;color:#57606E}
.ftr-btm a{font-size:13px;font-weight:600;color:#A5AEBE;text-decoration:none}
.ftr-btm a:hover{color:#fff}
@media (max-width:1024px){.ftr-top{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-width:640px){.ftr{padding:48px 0 28px}.ftr-top{grid-template-columns:1fr;gap:36px}.ftr-btm{margin-top:36px}}

:root{color-scheme:light}
html{background:#10141C}
.proto-bar{background:#071523;color:#A5AEBE;padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;border-bottom:1px solid #242C3B}
.proto-bar b{color:#fff;font-weight:700}
.proto-bar .pb-tag{background:#4D8DFF;color:#10141C;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px}
@media (max-width:640px){.proto-bar{padding:12px 20px;font-size:12px;gap:10px}}


/* ── 푸터 사업자 정보 ── */
.ftr-legal{margin-top:48px;padding-top:28px;border-top:1px solid var(--border-dark)}
.ftr-legal .fl-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;margin-bottom:12px}
.ftr-legal .fl-row{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:13px;line-height:1.75;
  color:#A5AEBE;letter-spacing:-.005em;word-break:keep-all}
.ftr-legal .fl-row b{color:#C6CEDA;font-weight:600}
.ftr-legal .fl-row a{color:inherit;text-decoration:none}
.ftr-legal .fl-row a:hover b{color:#fff}
.ftr-legal + .ftr-btm{margin-top:26px;padding-top:20px}
@media (max-width:640px){
  .ftr-legal{margin-top:32px;padding-top:22px}
  .ftr-legal .fl-row{gap:2px 16px;font-size:12.5px}
}


/* 헤더 CTA — 모바일에서는 '무료 진단'만 */
@media (max-width:820px){.gnb .cta-x{display:none}}


/* ── 사무실 사진 ── */
.gi-photo{margin:56px 0 0}
.gi-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:0;background:#E2E7F0}
.gi-photo figcaption{margin-top:14px;font-size:14px;line-height:1.55;letter-spacing:-.01em;word-break:keep-all}
.dark .gi-photo figcaption{color:#A5AEBE}
.light .gi-photo figcaption{color:#4F5866}
.gi-photo figcaption b{font-weight:700;margin-right:8px}
.dark .gi-photo figcaption b{color:#fff}
.light .gi-photo figcaption b{color:#141822}
/* 넓은 화면에서 과하게 커지지 않도록 */
.gi-photo.tall img{aspect-ratio:21/9}
@media (max-width:640px){
  .gi-photo{margin-top:36px}
  .gi-photo.tall img{aspect-ratio:16/9}
  .gi-photo figcaption{font-size:13px}
}


/* ══ 홈 히어로 — 사무실 유리문 사진 배경 ══
   구성: 사진 속 GI 사인은 오른쪽, 본문은 왼쪽.
   사인의 글자와 본문이 겹치지 않게 하는 것이 핵심입니다. */
.hero-photo{position:relative;isolation:isolate;padding-bottom:132px}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* 가로: 오른쪽(사인)은 살려두고 왼쪽(본문)만 확실히 어둡게
   세로: 하단은 네이비로 수렴시켜 지표 밴드가 얹히게 */
.hero-photo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(16,20,28,.96) 0%,rgba(16,20,28,.93) 30%,rgba(16,20,28,.82) 46%,rgba(16,20,28,.34) 68%,rgba(16,20,28,.22) 100%),
    linear-gradient(180deg,rgba(16,20,28,.55) 0%,rgba(16,20,28,.10) 24%,rgba(16,20,28,.80) 80%,#10141C 100%)}
.hero-photo .wrap{position:relative;z-index:1}
.hero-photo .ghost{display:none}          /* 사진이 고스트 워드마크를 대신합니다 */
.hero-photo h1{text-shadow:0 2px 28px rgba(16,20,28,.55)}
.hero-photo .lead,.hero-photo .en{text-shadow:0 1px 16px rgba(16,20,28,.6)}

/* 데스크톱: 본문을 오른쪽으로. 사인과 겹치지 않는 선에서 최대한 넓게 */
@media (min-width:1025px){
  .hero-photo{padding:132px 0 120px}
  .hero-photo .label,.hero-photo h1,.hero-photo .rule,
  .hero-photo .en,.hero-photo .lead,.hero-photo .btn-row{margin-left:0;max-width:50%}
  /* 사인과 겹치지 않는 폭에서 "실패 원인을 분석합니다."가 한 줄에 들어가는 크기 */
  .hero-photo h1{max-width:none;font-size:clamp(40px,3.6vw,54px);line-height:1.18;white-space:nowrap}
  .hero-photo .en{font-size:clamp(24px,2.1vw,30px)}
  .hero-photo .lead{max-width:34ch;margin-top:26px}
  .hero-photo .rule{margin:34px 0 26px}
  .hero-photo .btn-row{margin-top:34px}
  .hero-photo .stats{margin-top:72px}
}
@media (min-width:1440px){
  .hero-photo .label,.hero-photo h1,.hero-photo .rule,
  .hero-photo .en,.hero-photo .lead,.hero-photo .btn-row{max-width:52%}
}

/* 하단 스트립 — 회사 이름의 뜻. GI = Grounded Intelligence (2026-09-02 확정)
   왼쪽이 영문 뜻, 오른쪽이 국문 한 줄. 슬로건(H1 아래 .en)과 층이 다르므로 겹치지 않는다. */
.hero-strip{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter) 40px;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A5AEBE}
.hero-strip .hs-en b{color:var(--cream);font-weight:800}
/* 한글은 대문자화가 안 먹고 넓은 자간이 어색하다 — 이 줄만 자간을 되돌린다 */
.hero-strip .hs-ko{letter-spacing:.02em;text-transform:none}
.hero-strip .hs-scroll{display:inline-flex;align-items:center;gap:9px;color:var(--mint);text-decoration:none}
.hero-strip .hs-scroll em{font-style:normal;animation:hsBob 2.2s ease-in-out infinite}
@keyframes hsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.hero-strip .hs-scroll em{animation:none}}

@media (max-width:1024px){
  .hero-photo{padding-bottom:112px}
  .hero-strip{font-size:12px;padding-bottom:32px}
}
@media (max-width:1024px){
  /* 태블릿: 본문 전체 폭. 사인은 위쪽에만 보이게 */
  .hero-photo .hero-bg img{object-position:62% top}
  .hero-photo::after{background:
    linear-gradient(180deg,rgba(16,20,28,.42) 0%,rgba(16,20,28,.62) 18%,rgba(16,20,28,.93) 46%,#10141C 88%)}
}
@media (max-width:640px){
  .hero-photo{padding-bottom:96px}
  .hero-photo .hero-bg img{object-position:66% top}
  /* 모바일은 화면이 좁아 대비를 더 확보합니다 */
  .hero-photo::after{background:
    linear-gradient(180deg,rgba(16,20,28,.45) 0%,rgba(16,20,28,.70) 16%,rgba(16,20,28,.95) 42%,#10141C 78%)}
  .hero-strip{font-size:11px;letter-spacing:.1em;padding-bottom:26px;gap:10px}
  .hero-strip span{opacity:.85}
  /* 좁은 화면에서는 이름의 뜻을 접고 Scroll 만 남긴다.
     양옆 칸 중 하나라도 남기면 폭을 넘겨 글자가 화면 밖에서 잘린다
     (2026-09-02 에 국문·영문 둘 다 시도해 보고 확인했다).
     뜻은 About 페이지와 데스크톱 히어로가 전달한다. */
  .hero-strip{justify-content:center}
  .hero-strip .hs-en,.hero-strip .hs-ko{display:none}
}


/* ══ 반전: 히어로를 크림으로 ══ */
.hero-photo.dark{background:var(--cream);color:var(--ink)}
.hero-photo .hero-bg img{filter:saturate(.62) brightness(1.06)}
.hero-photo::after{background:
  linear-gradient(90deg,rgba(244,246,250,.97) 0%,rgba(244,246,250,.94) 30%,rgba(244,246,250,.86) 46%,rgba(244,246,250,.30) 66%,rgba(244,246,250,.04) 100%),
  linear-gradient(180deg,rgba(244,246,250,.50) 0%,rgba(244,246,250,.10) 24%,rgba(244,246,250,.35) 78%,rgba(244,246,250,.88) 94%,var(--cream) 100%)!important}
.hero-photo .label{color:var(--blue)}
.hero-photo h1{color:var(--ink);text-shadow:0 2px 22px rgba(244,246,250,.85)}
.hero-photo .en{color:var(--blue-600);text-shadow:0 1px 14px rgba(244,246,250,.9)}
.hero-photo .lead{color:var(--muted-light);text-shadow:0 1px 12px rgba(244,246,250,.9)}
.hero-photo .btn-ghost{border-color:var(--divider);color:var(--ink)}
.hero-photo .stats{border-top-color:var(--divider)}
.hero-photo .stats div .n{color:var(--ink)}
.hero-photo .stats div .n em{color:var(--mint-800)}   /* 크림 위 민트는 대비 미달 → 진한 민트 */
.hero-photo .stats div .k{color:var(--slate-light)}
.hero-strip{color:var(--slate-light)}
.hero-strip .hs-scroll{color:var(--mint-800)}
.hero-strip .hs-en b{color:var(--ink)}   /* 어두운 히어로에서는 크림이지만 반전되면 배경과 같아진다 */


/* ── 반전 히어로: 태블릿·모바일 ──
   세로 화면에서는 16:9 사진이 크게 확대돼 로고가 본문을 덮습니다.
   좁은 화면에서는 사진을 옅은 바탕 질감으로 낮추고 글을 앞세웁니다. */
/* 세로 화면에서는 사진의 왼쪽(어두운 벽)이 잘려 들어옵니다.
   그대로 두면 크림이 아니라 회색 판이 됩니다 — 실측 밝기 186, 데스크톱 크림은 243.
   사진을 더 밝게 올리고 크림을 더 얹어 데스크톱과 같은 톤으로 맞춥니다. */
@media (max-width:1024px){
  .hero-photo .hero-bg img{object-position:26% center!important;filter:saturate(.40) brightness(1.24)!important}
  .hero-photo::after{background:
    linear-gradient(180deg,rgba(244,246,250,.84) 0%,rgba(244,246,250,.80) 40%,rgba(244,246,250,.90) 78%,var(--cream) 100%)!important}
}
@media (max-width:640px){
  .hero-photo .hero-bg img{object-position:10% center!important;filter:saturate(.34) brightness(1.32)!important}
  .hero-photo::after{background:
    linear-gradient(180deg,rgba(244,246,250,.88) 0%,rgba(244,246,250,.85) 42%,rgba(244,246,250,.92) 76%,var(--cream) 100%)!important}
  .hero-photo h1{text-shadow:0 1px 10px rgba(244,246,250,.95)}
  .hero-photo .lead,.hero-photo .en{text-shadow:0 1px 8px rgba(244,246,250,.95)}
}

/* 반전 시 CTA 섹션이 네이비가 되므로 연락처 글자색 보정 */
.dark.cta .contactinfo{color:var(--slate-dark)}
.dark.cta .contactinfo b{color:#fff}
/* 반전 시 5가지 방식 리스트가 네이비 위로 감 */
.dark .way{border-bottom-color:var(--border-dark)}
.dark .way:first-child{border-top-color:var(--border-dark)}
.dark .way .n{color:var(--mint)}
.dark .way .t{color:#fff}
.dark .way .t svg{stroke:var(--slate-dark)}
.dark .way .d{color:var(--slate-dark)}
/* 반전 시 서비스 카드가 크림 위로 감 */
.light .svc{background:var(--divider)}
.light .svc article{background:var(--cream)}
.light .svc .n{color:var(--mint-800)}
.light .svc h3{color:var(--ink)}
.light .svc h3 a{border-bottom-color:var(--mint-800)}
.light .svc p{color:var(--slate-light)}
/* 반전 시 대비 블록·CEO */
.light .contrast div{border-top-color:var(--divider)}
.light .contrast .a .k{color:#A5AEBE}
.light .contrast .b .k{color:var(--mint-800)}
.light .contrast .v{color:var(--slate-light)}
.light .ceo{border-top-color:var(--divider)}
.light .ceo .who{color:var(--mint-800)}
.light .ceo blockquote{color:var(--ink)}
.light .ceo cite{color:var(--slate-light)}
/* 반전 시 인사이트/강의 */
.light .lectures li{border-bottom-color:var(--divider);color:var(--slate-light)}
.light .lectures li::before{background:var(--mint-800)}
.light .teach figcaption{color:var(--slate-light)}
.light .teach figcaption b{color:var(--ink)}
.light .teach-note{border-top-color:var(--divider);color:var(--mint-800)}
.light .posts article{border-top-color:var(--mint-800)}
.light .posts .cat{color:var(--mint-800)}
.light .posts h3{color:var(--ink)}
.light .posts p{color:var(--slate-light)}
/* 반전 시 AI 패널은 그대로 네이비 유지 (강조 블록) */


/* ── 강의 사진 3장 ── */
.teach,.teach2{grid-template-columns:repeat(3,1fr)!important;gap:20px!important}
.teach figcaption,.teach2 figcaption{font-size:13px}
.teach figcaption b,.teach2 figcaption b{font-size:14px}
@media (max-width:1024px){
  .teach,.teach2{grid-template-columns:repeat(2,1fr)!important}
  .teach figure:last-child,.teach2 figure:last-child{grid-column:1/-1}
  .teach figure:last-child img,.teach2 figure:last-child img{aspect-ratio:21/9}
}
@media (max-width:640px){
  .teach,.teach2{grid-template-columns:1fr!important;gap:26px!important}
  .teach figure:last-child img,.teach2 figure:last-child img{aspect-ratio:16/9}
}


/* ── 왜 지아이인가 ── */
.proofsec .pf{margin-top:56px;display:grid;grid-template-columns:1.15fr .85fr;gap:1px;
  background:var(--divider);border:1px solid var(--divider)}
.proofsec article{background:var(--cream);padding:34px 32px}
.proofsec .k{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;
  color:var(--mint-800);margin-bottom:16px}
.proofsec h3{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.3;color:var(--ink)}
.proofsec p{margin-top:16px;font-size:15px;line-height:1.7;color:var(--slate-light);word-break:keep-all}
.proofsec p a{color:var(--mint-800);font-weight:700;text-decoration:none;white-space:nowrap}
.proofsec p a:hover{text-decoration:underline}
.pf-main{display:flex;flex-direction:column}
.pf-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pf-logos span{padding:10px 16px;border:1px solid var(--ink);font-size:15px;font-weight:700;
  color:var(--ink);letter-spacing:-.01em}
.pf-side{display:grid;gap:1px;background:var(--divider)}
.pf-side h3{font-size:19px}
.pf-side p{font-size:14px;margin-top:12px}
.dark.proofsec .pf{background:var(--border-dark);border-color:var(--border-dark)}
.dark.proofsec article{background:var(--navy)}
.dark.proofsec .k{color:var(--mint)}
.dark.proofsec h3{color:#fff}
.dark.proofsec p{color:var(--slate-dark)}
.dark.proofsec p a{color:var(--mint)}
.dark.proofsec .pf-logos span{border-color:#fff;color:#fff}
.dark.proofsec .pf-side{background:var(--border-dark)}
@media (max-width:1024px){
  .proofsec .pf{grid-template-columns:1fr}
  .proofsec article{padding:28px 24px}
}
@media (max-width:640px){
  .proofsec .pf{margin-top:36px}
  .proofsec h3{font-size:21px}
  .pf-side h3{font-size:18px}
  .pf-logos span{font-size:14px;padding:9px 13px}
}


/* ══════════════════ 인포그래픽 공통 ══════════════════
   밝은 섹션/어두운 섹션 어디에 놓여도 색이 자동으로 맞습니다. */
.ig{--ig-line:var(--divider);--ig-box:#fff;--ig-ink:var(--ink);
    --ig-sub:var(--slate-light);--ig-key:var(--mint-800);--ig-fill:rgba(77,141,255,.14);
    margin-top:56px}
.dark .ig{--ig-line:var(--border-dark);--ig-box:var(--navy-alt);--ig-ink:#fff;
    --ig-sub:var(--slate-dark);--ig-key:var(--mint);--ig-fill:rgba(77,141,255,.16)}
.ig-cap{margin-top:18px;font-size:13px;line-height:1.6;color:var(--ig-sub);word-break:keep-all}
.ig-cap b{color:var(--ig-key);font-weight:700}

/* ── 1. 측정 체인 (트래킹) ── 어느 단계에서 데이터가 새는지 */
.ig-chain{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--ig-line)}
.ig-chain>div{padding:22px 16px 20px;border-right:1px solid var(--ig-line);position:relative}
.ig-chain>div:last-child{border-right:0}
.ig-chain .s{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--ig-sub);margin-bottom:9px}
.ig-chain .t{display:block;font-size:17px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-chain .leak{margin-top:16px;padding-top:14px;border-top:1px dashed var(--ig-line);
  font-size:12.5px;line-height:1.55;color:var(--ig-sub);word-break:keep-all}
.ig-chain .leak b{display:block;color:var(--ig-key);font-weight:700;font-size:12px;letter-spacing:.04em;margin-bottom:4px}
.ig-chain .ok .leak{opacity:.42}
/* 데이터가 새는 단계는 상단에 민트 바 */
.ig-chain .hit::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mint)}

/* ── 2. 파이프라인 (데이터) ── */
.ig-pipe{display:grid;gap:0;border:1px solid var(--ig-line)}
.ig-pipe .row{padding:24px 22px;border-bottom:1px solid var(--ig-line)}
.ig-pipe .row:last-child{border-bottom:0}
.ig-pipe .rh{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.ig-pipe .rh .n{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key)}
.ig-pipe .rh .t{font-size:17px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-pipe .rh .d{margin-left:auto;font-size:12.5px;color:var(--ig-sub)}
.ig-chips{display:flex;flex-wrap:wrap;gap:8px}
.ig-chips span{padding:7px 13px;border:1px solid var(--ig-line);font-size:13px;
  font-weight:600;color:var(--ig-ink);letter-spacing:-.01em;background:var(--ig-box)}
.ig-chips span.k{border-color:var(--ig-key);color:var(--ig-key)}
.ig-pipe .flow{text-align:center;padding:10px 0;color:var(--ig-key);font-size:15px;font-weight:700}

/* ── 4. 순환 (퍼포먼스 운영) ── */
.ig-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ig-line);
  border:1px solid var(--ig-line)}
.ig-loop .st{background:var(--ig-box);padding:24px 20px;position:relative}
.dark .ig-loop .st{background:var(--navy)}
.ig-loop .n{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key);margin-bottom:10px}
.ig-loop .t{display:block;font-size:17px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-loop .d{display:block;margin-top:9px;font-size:13px;line-height:1.55;color:var(--ig-sub);word-break:keep-all}
.ig-loop .st::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  z-index:2;font-size:14px;color:var(--ig-key);background:var(--ig-box);padding:2px 1px}
.dark .ig-loop .st::after{background:var(--navy)}
.ig-loop .st:last-child::after{content:"↺";right:20px;top:24px;transform:none}

/* ── 5. 대비 (SEO vs GEO) ── */
.ig-vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ig-line);border:1px solid var(--ig-line)}
.ig-vs .col{background:var(--ig-box);padding:26px 22px}
.dark .ig-vs .col{background:var(--navy)}
.ig-vs .h{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;margin-bottom:16px}
.ig-vs .a .h{color:var(--ig-sub)}
.ig-vs .b .h{color:var(--ig-key)}
.ig-vs ul{list-style:none}
.ig-vs li{padding:11px 0;border-bottom:1px solid var(--ig-line);font-size:14.5px;
  line-height:1.5;color:var(--ig-ink);word-break:keep-all;display:flex;gap:10px}
.ig-vs li:last-child{border-bottom:0}
.ig-vs li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:7px;background:var(--ig-line)}
.ig-vs .b li::before{background:var(--mint)}
.ig-base{border:1px solid var(--ig-line);border-top:0;padding:20px 22px;background:var(--ig-fill)}
.ig-base .h{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key);margin-bottom:12px}
.ig-base .items{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--ig-ink);font-weight:600}

@media (max-width:1024px){
  .ig-chain{grid-template-columns:repeat(3,1fr)}
  .ig-chain>div{border-bottom:1px solid var(--ig-line)}
  .ig-chain>div:nth-child(3n){border-right:0}
  .ig-loop{grid-template-columns:repeat(2,1fr)}
  .ig-loop .st::after{display:none}
}
@media (max-width:640px){
  .ig{margin-top:36px}
  .ig-chain{grid-template-columns:1fr}
  .ig-chain>div{border-right:0}
  .ig-loop{grid-template-columns:1fr}
  .ig-vs{grid-template-columns:1fr}
  .ig-pipe .rh{flex-wrap:wrap;gap:6px 12px}
  .ig-pipe .rh .d{margin-left:0;flex-basis:100%}
}

/* ── 6. 서비스 스택 (홈) ── 측정이 아래, 자립이 위 */
.ig-stack{display:grid;gap:1px;background:var(--ig-line);border:1px solid var(--ig-line)}
.ig-stack .lv{background:var(--ig-box);padding:22px 24px;display:grid;
  grid-template-columns:132px 1fr;gap:22px;align-items:center}
.dark .ig-stack .lv{background:var(--navy)}
.ig-stack .lb{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key)}
.ig-stack .lb em{display:block;font-style:normal;font-size:13px;font-weight:600;
  letter-spacing:-.01em;color:var(--ig-sub);margin-top:6px}
.ig-stack .it{display:flex;flex-wrap:wrap;gap:8px}
.ig-stack .it a,.ig-stack .it span{padding:9px 15px;border:1px solid var(--ig-line);
  font-size:14px;font-weight:600;color:var(--ig-ink);text-decoration:none;letter-spacing:-.01em}
.ig-stack .it a:hover{border-color:var(--ig-key);color:var(--ig-key)}
.ig-stack .base{background:var(--ig-fill)}
.dark .ig-stack .base{background:rgba(77,141,255,.08)}
.ig-stack .base .it a,.ig-stack .base .it span{border-color:var(--ig-key);color:var(--ig-key)}

/* ── 7. 진행 단계 (서비스 · 문의) ── */
.ig-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.ig-steps>div{padding:0 18px 0 0;position:relative}
.ig-steps .bar{height:3px;background:var(--ig-line);margin-bottom:18px;position:relative}
.ig-steps .bar i{position:absolute;left:0;top:0;bottom:0;width:26px;background:var(--mint)}
.ig-steps .n{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key);margin-bottom:9px}
.ig-steps .t{display:block;font-size:19px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-steps .d{display:block;margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--ig-sub);word-break:keep-all}
.ig-steps .w{display:inline-block;margin-top:11px;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--ig-key);border:1px solid var(--ig-key);padding:4px 9px}

/* ── 8. 2층 구조 (목적별) ── */
.ig-tiers{border:1px solid var(--ig-line)}
.ig-tiers .tier{padding:24px 22px;border-bottom:1px solid var(--ig-line)}
.ig-tiers .tier:last-child{border-bottom:0}
.ig-tiers .th{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.ig-tiers .th b{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key)}
.ig-tiers .th span{font-size:13.5px;color:var(--ig-sub);word-break:keep-all}
.ig-tiers .gs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ig-line);
  border:1px solid var(--ig-line)}
.ig-tiers .gs.two{grid-template-columns:repeat(2,1fr)}
.ig-tiers .gs a{background:var(--ig-box);padding:16px 15px;text-decoration:none;display:block}
.dark .ig-tiers .gs a{background:var(--navy)}
.ig-tiers .gs a:hover{background:var(--ig-fill)}
.ig-tiers .gs .g{display:block;font-size:15px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-tiers .gs .k{display:block;margin-top:7px;font-size:12.5px;color:var(--ig-sub);word-break:keep-all}
.ig-tiers .found{background:var(--ig-fill)}
.dark .ig-tiers .found{background:rgba(77,141,255,.08)}
.ig-tiers .note{padding:14px 22px;border-top:1px dashed var(--ig-line);font-size:13px;color:var(--ig-sub);text-align:center}

/* ── 9. 매트릭스 (사례) ── */
.ig-mx{width:100%;border-collapse:collapse;border:1px solid var(--ig-line);font-size:14px}
.ig-mx th,.ig-mx td{border:1px solid var(--ig-line);padding:13px 15px;text-align:left;
  vertical-align:top;word-break:keep-all;line-height:1.55}
.ig-mx thead th{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--ig-key);
  background:var(--ig-fill);white-space:nowrap}
.dark .ig-mx thead th{background:rgba(77,141,255,.08)}
.ig-mx tbody th{font-weight:700;color:var(--ig-ink);white-space:nowrap;width:1%}
.ig-mx td{color:var(--ig-sub)}
.ig-mx td.k{color:var(--ig-ink);font-weight:600}
.ig-wrap{overflow-x:auto}

/* ── 10. 교육 단계 ── */
.ig-lv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ig-line);border:1px solid var(--ig-line)}
.ig-lv .c{background:var(--ig-box);padding:24px 20px}
.dark .ig-lv .c{background:var(--navy)}
.ig-lv .st{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key);margin-bottom:12px}
.ig-lv .t{display:block;font-size:18px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-lv .q{display:block;margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--ig-sub);word-break:keep-all}
.ig-lv .meter{display:flex;gap:4px;margin-top:16px}
.ig-lv .meter i{height:4px;flex:1;background:var(--ig-line)}
.ig-lv .meter i.on{background:var(--mint)}

@media (max-width:1024px){
  .ig-steps{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .ig-tiers .gs{grid-template-columns:repeat(2,1fr)}
  .ig-lv{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ig-stack .lv{grid-template-columns:1fr;gap:14px}
  .ig-steps{grid-template-columns:1fr;row-gap:28px}
  .ig-tiers .gs,.ig-tiers .gs.two{grid-template-columns:1fr}
  .ig-mx{font-size:13px}
}

/* ── 11. 문서 목차 (진단 리포트 미리보기) ── */
.ig-doc{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:1px;background:var(--ig-line);border:1px solid var(--ig-line)}
.ig-doc .cover{background:var(--navy);color:#fff;padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;min-height:230px}
.ig-doc .cover .k{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--mint)}
.ig-doc .cover .t{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.25;margin-top:14px}
.ig-doc .cover .m{margin-top:auto;padding-top:20px;border-top:1px solid var(--border-dark);font-size:12.5px;color:#A5AEBE;line-height:1.6}
.ig-doc .toc{background:var(--ig-box);padding:8px 0}
.dark .ig-doc .toc{background:var(--navy-alt)}
.ig-doc .toc li{list-style:none;display:grid;grid-template-columns:34px 1fr;gap:12px;
  padding:13px 24px;border-bottom:1px solid var(--ig-line);align-items:baseline}
.ig-doc .toc li:last-child{border-bottom:0}
.ig-doc .toc .n{font-size:11px;font-weight:800;color:var(--ig-key);letter-spacing:.1em}
.ig-doc .toc .t{font-size:15px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-doc .toc .d{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--ig-sub);word-break:keep-all}

/* ── 12. 매체 × 목적 매트릭스 ── */
.ig-grid{width:100%;border-collapse:collapse;border:1px solid var(--ig-line);font-size:13.5px}
.ig-grid th,.ig-grid td{border:1px solid var(--ig-line);padding:11px 12px;text-align:center}
.ig-grid thead th{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ig-key);
  background:var(--ig-fill);white-space:nowrap}
.dark .ig-grid thead th{background:rgba(77,141,255,.08)}
.ig-grid tbody th{text-align:left;font-weight:700;color:var(--ig-ink);white-space:nowrap}
.ig-grid .y{color:var(--mint-800);font-weight:800}
.dark .ig-grid .y{color:var(--mint)}
.ig-grid .n{color:var(--ig-line)}

/* ── 13. 규격 카드 ── */
.ig-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ig-line);border:1px solid var(--ig-line)}
.ig-spec .c{background:var(--ig-box);padding:24px 20px}
.dark .ig-spec .c{background:var(--navy)}
.ig-spec .n{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ig-key);margin-bottom:11px}
.ig-spec .t{display:block;font-size:18px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em;margin-bottom:14px}
.ig-spec dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:13px;line-height:1.5}
.ig-spec dt{color:var(--ig-sub);white-space:nowrap}
.ig-spec dd{color:var(--ig-ink);font-weight:600;word-break:keep-all}
.ig-spec .kpi{margin-top:16px;padding-top:13px;border-top:1px dashed var(--ig-line);
  font-size:12.5px;color:var(--ig-key);font-weight:700}

/* ── 14. 대상별 트랙 ── */
.ig-track{display:grid;gap:1px;background:var(--ig-line);border:1px solid var(--ig-line)}
.ig-track .r{background:var(--ig-box);padding:20px 22px;display:grid;
  grid-template-columns:150px 1fr auto;gap:20px;align-items:center}
.dark .ig-track .r{background:var(--navy)}
.ig-track .who{font-size:15px;font-weight:700;color:var(--ig-ink);letter-spacing:-.02em}
.ig-track .what{font-size:13.5px;color:var(--ig-sub);line-height:1.55;word-break:keep-all}
.ig-track .tag{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ig-key);
  border:1px solid var(--ig-key);padding:5px 10px;white-space:nowrap}

@media (max-width:1024px){
  .ig-doc{grid-template-columns:1fr}
  .ig-spec{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ig-track .r{grid-template-columns:1fr;gap:10px}
  .ig-grid{font-size:12px}
  .ig-grid th,.ig-grid td{padding:8px 6px}
}


/* ── 오시는 길 ── */
.gi-map{margin:56px 0 0}
.gi-map iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.gi-map-info{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline}
.gi-map-info b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.gi-map-info span{font-size:15px;color:var(--slate-light);word-break:keep-all}
.gi-map-info a{font-size:15px;font-weight:700;color:var(--mint-800);text-decoration:none;white-space:nowrap}
.gi-map-info a:hover{text-decoration:underline}
.dark .gi-map-info b{color:#fff}
.dark .gi-map-info span{color:var(--slate-dark)}
.dark .gi-map-info a{color:var(--mint)}
@media (max-width:640px){
  .gi-map{margin-top:36px}
  .gi-map-info{gap:8px 18px}
}


/* ── 운영 매체 ── */
.mediasec .mnote{margin-top:28px;font-size:15px;line-height:1.7;color:var(--slate-light);
  max-width:58ch;word-break:keep-all}
.dark .mediasec .mnote{color:var(--slate-dark)}
.mediasec .mnote b{color:var(--ink);font-weight:700}
.dark .mediasec .mnote b{color:#fff}
.mgrid{margin-top:48px;display:grid;grid-template-columns:repeat(8,1fr);
  gap:1px;background:var(--divider);border:1px solid var(--divider)}
.dark .mgrid{background:var(--border-dark);border-color:var(--border-dark)}
.mgrid .m{background:var(--cream);padding:30px 12px 22px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;min-height:124px}
.dark .mgrid .m{background:var(--navy)}
.mgrid .mk{height:36px;display:flex;align-items:center;justify-content:center}
.mgrid svg{display:block;fill:var(--ink);
  transition:fill .3s ease,transform .35s cubic-bezier(.16,.84,.44,1)}
.dark .mgrid svg{fill:#fff}
.mgrid .wm{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);
  transition:color .3s ease,transform .35s cubic-bezier(.16,.84,.44,1)}
.dark .mgrid .wm{color:#fff}
.mgrid .mn{font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--slate-light)}
.dark .mgrid .mn{color:var(--slate-dark)}
.mgrid .m:hover svg{fill:var(--mint-800);transform:translateY(-2px)}
.dark .mgrid .m:hover svg{fill:var(--mint)}
.mgrid .m:hover .wm{color:var(--mint-800);transform:translateY(-2px)}
.dark .mgrid .m:hover .wm{color:var(--mint)}
.mdisc{margin-top:22px;font-size:12.5px;line-height:1.65;color:var(--muted-light);
  max-width:74ch;word-break:keep-all}
.dark .mdisc{color:var(--slate-dark);opacity:.75}
.mgrid .m--more .wm{font-size:20px;font-weight:700;color:var(--slate-light)}
.dark .mgrid .m--more .wm{color:var(--slate-dark)}
.mgrid .m--more:hover .wm{color:var(--mint-800);transform:none}
.dark .mgrid .m--more:hover .wm{color:var(--mint)}
@media (max-width:900px){
  .mgrid{grid-template-columns:repeat(4,1fr)}
  .mgrid .m{min-height:108px;padding:24px 8px 18px;gap:11px}
}
@media (max-width:520px){
  .mgrid{grid-template-columns:repeat(2,1fr);margin-top:32px}
  .mgrid .mk{height:32px}
  .mgrid svg{transform:scale(.9)}
  .mgrid .wm{font-size:23px}
}


/* ── 숫자 밑 맥락 한 줄 ── */
.stats .ctx,.agg .ctx{display:block;margin-top:7px;font-size:12px;font-weight:600;
  letter-spacing:-.005em;line-height:1.4;color:var(--blue-300);word-break:keep-all}
.light .stats .ctx,.light .agg .ctx,.agg .ctx{color:var(--mint-800)}
.dark .stats .ctx,.dark .agg .ctx{color:var(--mint)}
@media (max-width:640px){.stats .ctx,.agg .ctx{font-size:11px;margin-top:5px}}


/* ── 언어 전환 ──
   두 칸짜리 상자는 민트 CTA 와 나란히 놓이면 서로 경쟁하고,
   1180px 아래에서는 헤더 밖으로 밀려났습니다.
   바꿀 언어 하나만, 조용한 글자 링크로 둡니다. */
.langsw{flex:none;margin-right:4px;display:inline-flex;align-items:center;
  gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--slate-dark);
  text-decoration:none;padding:8px 2px;transition:color .2s ease;white-space:nowrap}
.langsw:hover{color:#fff}
.langsw::before{content:"";width:13px;height:13px;flex:none;border:1.5px solid currentColor;
  border-radius:50%;background:
    linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat}
.gnb .cta{margin-left:0}
/* 1025~1120px — 글자까지 넣으면 CTA 가 밀립니다. 지구 아이콘만 남깁니다. */
@media (min-width:1025px) and (max-width:1140px){
  .langsw span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .langsw{margin-right:20px;gap:0}
}
/* 640px 이하 — 오른쪽 끝은 CTA 자리. 언어는 아이콘만. */
@media (max-width:640px){
  .gnb .cta{margin-left:auto}
  .langsw{order:3;margin:0 0 0 10px;gap:0}
  .langsw span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ── 언어 메뉴 (lang_menu.py) ── */
.langmenu{position:relative;flex:none;display:inline-flex;align-items:center}
.langmenu .langsw{margin:0;order:0}
.langlist{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;margin:0;padding:6px;
  list-style:none;z-index:5;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid rgba(16,20,28,.08);border-radius:16px;box-shadow:0 22px 44px -24px rgba(16,20,28,.4);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.langmenu:hover .langlist,.langmenu:focus-within .langlist,.langmenu.open .langlist{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.langlist a{display:block;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;
  letter-spacing:0;color:#3F4757;text-decoration:none;white-space:nowrap}
.langlist a:hover{background:rgba(16,20,28,.05);color:var(--ink)}
.langlist a.on{color:var(--ink);font-weight:800}
.langlist a.on::after{content:"\2713";float:right;margin-left:14px;color:#12459E}
.langmenu{margin-right:4px}
@media (min-width:1025px) and (max-width:1140px){.langmenu{margin-right:20px}}
@media (max-width:640px){.langmenu{order:3;margin:0 0 0 10px}}
@media (max-width:1024px){.langmenu{order:3;margin:0 10px 0 auto}}
@media (max-width:640px){.langmenu{margin:0 0 0 10px}}


/* ── 홈 히어로 진입 ── */
/* 이미지가 아니라 감싼 상자를 키웁니다.
   img 의 transform 은 스크롤 패럴랙스가 인라인으로 계속 덮어써서,
   여기에 걸면 진입 줌이 첫 프레임에 지워집니다. */
.hero-photo .hero-bg{transform:scale(1.09);transform-origin:center;
  transition:transform 2.6s cubic-bezier(.16,.84,.44,1)}
.gi-in .hero-photo .hero-bg{transform:scale(1)}

/* 시작 전에는 감춥니다. 감추는 대상은 스크립트가 잡은 것만 —
   자바스크립트가 죽으면 아무것도 안 보이는 사태를 막습니다. */
.hero-photo [data-gi-in]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .72s cubic-bezier(.16,.84,.44,1),transform .72s cubic-bezier(.16,.84,.44,1)}
.hero-photo [data-gi-in].on{opacity:1;transform:none}

/* 민트 선은 좌→우로 그어집니다 */
.hero-photo .rule[data-gi-in]{transform:scaleX(0);transform-origin:left center;opacity:1;
  transition:transform .8s cubic-bezier(.16,.84,.44,1)}
.hero-photo .rule[data-gi-in].on{transform:scaleX(1)}

/* 제목은 줄 단위로 밀려 올라옵니다 */
.hero-photo h1 .gi-il{display:block;overflow:hidden}
.hero-photo h1 .gi-il > i{display:block;font-style:normal;
  padding-bottom:.16em;margin-bottom:-.16em;
  transform:translate3d(0,110%,0);
  transition:transform .86s cubic-bezier(.16,.84,.44,1)}
.hero-photo h1 .gi-il.on > i{transform:none}

@media (max-width:640px){
  .hero-photo [data-gi-in]{transform:translate3d(0,16px,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo .hero-bg,
  .hero-photo [data-gi-in],
  .hero-photo h1 .gi-il > i{
    opacity:1!important;transform:none!important;transition:none!important}
}


/* ── 홈 히어로: 컷 전환 + 계측 ── */
.hero-photo .hero-cuts{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero-photo .hero-cuts figure{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.hero-photo .hero-cuts figure.on{opacity:1}
.hero-photo .hero-cuts img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;transform-origin:50% 50%;will-change:transform}
.hero-photo .hero-scan{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-photo .hero-dots{position:absolute;right:34px;bottom:104px;z-index:2;display:flex;gap:7px}
.hero-photo .hero-dots i{display:block;width:26px;height:2px;background:rgba(16,20,28,.22);
  transition:background .4s ease,transform .4s ease}
.hero-photo .hero-dots i.on{background:var(--olive);transform:scaleY(2.4)}
.hero-photo .wrap{position:relative;z-index:2}

@media (max-width:1180px){.hero-photo .hero-dots{right:24px;bottom:88px}}
@media (max-width:900px){
  .hero-photo .hero-cuts,.hero-photo .hero-scan,.hero-photo .hero-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo .hero-cuts,.hero-photo .hero-scan,.hero-photo .hero-dots{display: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}


/* -- 숫자 / 영문 라벨: Space Grotesk 700 (2026-09-02) --
   .n  은 히어로 숫자(2019 / 200억+)와 섹션 번호(01~05)를 함께 잡습니다.
   .label / .en 은 영문 라벨과 큰 영문 한 줄입니다.
   한글은 이 폰트에 없어 브라우저가 알아서 프리텐다드로 되돌립니다. */
@font-face{
  font-family:'SpaceGro';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(/fonts/spacegro-700-24928473.woff2) format('woff2');
}
.n,.label,.en,.hero-strip .hs-en{
  font-family:'SpaceGro','PretendardSub','Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
}


/* ── 사례 이미지 기울기 ── */
.cases{perspective:1100px}
.cases figure{overflow:visible}
.gi-tilt{display:block;position:relative;overflow:hidden;transform-style:preserve-3d;
  /* 3D 로 기운 카드는 브라우저 적중 판정을 계속 흔듭니다.
     판정에서 빼고, 어느 카드인지는 좌표로 직접 계산합니다. */
  pointer-events:none;
  will-change:transform;
  transition:transform .55s cubic-bezier(.16,.84,.44,1),box-shadow .45s ease}
.gi-tilt.act{transition:transform .12s linear,box-shadow .45s ease}
.light .gi-tilt.act{box-shadow:0 22px 46px -26px rgba(16,20,28,.55)}
.dark .gi-tilt.act{box-shadow:0 22px 46px -22px rgba(0,0,0,.7)}

/* 커서를 따라다니는 옅은 빛 — 종이가 아니라 표면처럼 보이게 합니다 */
.gi-tilt::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--tx,50%) var(--ty,50%),
    rgba(77,141,255,.16),rgba(77,141,255,0) 62%)}
.gi-tilt.act::after{opacity:1}

@media (hover:none),(pointer:coarse),(max-width:900px){
  .gi-tilt{transform:none!important;box-shadow:none!important}
  .gi-tilt::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gi-tilt{transform:none!important;transition:none!important;box-shadow:none!important}
  .gi-tilt::after{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-phone — 전화번호 상시 노출 (2026-09-08) */
.gnb .gnb-tel{margin-left:auto;margin-right:2px;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  color:#3F4757;text-decoration:none;white-space:nowrap;padding:8px 10px;border-radius:999px}
.gnb .gnb-tel:hover{color:var(--mint-800,#12459E);background:rgba(255,255,255,.55)}
.gnb .gnb-tel + .cta{margin-left:6px}
.gi-phonebar{display:none}
@media (max-width:1024px){
  .gnb .gnb-tel{display:none}
  .gi-phonebar{position:fixed;left:0;right:0;bottom:0;z-index:290;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    box-shadow:0 -1px 0 rgba(255,255,255,.7),0 -8px 24px -16px rgba(16,20,28,.25)}
  .gi-phonebar a{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:999px;
    font-size:14px;font-weight:700;text-decoration:none;color:#10141C;
    background:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(16,20,28,.14),inset 0 1px 0 rgba(255,255,255,.9)}
  .gi-phonebar a.pri{color:var(--mint-800,#12459E);background:rgba(255,255,255,.62);
    box-shadow:0 0 0 1px rgba(77,141,255,.55),inset 0 1px 0 rgba(255,255,255,.9)}
  body{padding-bottom:72px}
  .gc-l{bottom:84px!important}
}