/* ═══════════════════════════════════════════════════════════════════════════
   ONECLIP 메인 — GLOBAL BUSINESS NETWORK 두 구획 전용 스타일
   WEB #10 · WEB-GLOBAL-NETWORK-10 · 2026-09-13

   ⚠ 이 파일은 «메인 한 쪽에서만» 링크된다.
     운영 site.css 는 «한 글자도» 바꾸지 않았다 (§18 CORPORATE MAIN ONLY).
     그래서 나머지 8쪽은 이 파일에 닿지 않는다.

   ⚠ 색·활자·여백·모서리·유리 카드는 site.css 의 것을 그대로 쓴다.
     여기서 새로 만드는 것은 «도해 두 개»의 뼈대뿐이다 (§15 공통 유지).

   ⚠ 금지 (§05): 코인·블록체인 느낌 · 카지노 네온 · 과한 입자 · 과한 움직임.
     그래서 애니메이션은 «있는지 없는지 모를 정도»로만 둔다.
   ═══════════════════════════════════════════════════════════════════════════ */

.gl{--gl-line:#23304A;--gl-dim:#2A3A55;--gl-on:var(--blue);}

/* ── 구획 머리 ─────────────────────────────────────────────────────────── */
.gl-head{max-width:66ch;margin:0 auto 48px;text-align:center}
.gl-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-soft);
  border:1px solid var(--blue-line);border-radius:999px;padding:6px 15px;margin:0 0 20px;
}
.gl-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
.gl-title{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(32px,5vw,58px);line-height:1.1;letter-spacing:-.035em;margin:0 0 20px;
}
.gl-title em{font-style:normal;color:var(--blue)}
.gl-lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink-2);margin:0 auto;max-width:52ch}
.gl-body{font-size:var(--t-body);line-height:var(--lh-kr);color:var(--muted);margin:18px auto 0;max-width:62ch}
.gl-body strong{color:var(--ink-2);font-weight:600}

/* ═══ A. 기업 간 네트워크 도해 ═══════════════════════════════════════════
   ⚠ 세로로 쌓고 «잇는 선»을 각 칸의 윗변에 붙인다.
     격자 좌표로 선을 그리면 폭이 바뀔 때마다 선이 어긋난다. 실제로 그렇게 만들었다가
     390px 에서 선이 카드 밖으로 튀어 다시 했다. 지금 방식은 어느 폭에서도 어긋나지 않는다. */
.gn{display:flex;flex-direction:column;align-items:center;gap:0;margin:0 auto;max-width:920px}
.gn > *{position:relative;padding-top:34px;width:100%;display:flex;justify-content:center}
.gn > *::before{content:"";position:absolute;left:50%;top:0;width:1px;height:34px;
  background:var(--gl-line);transform:translateX(-50%)}
/* ⚠ 데스크톱 순서: PARTNER A → (App · CORE · Biz) → SEMI → 통제 → PARTNER B·C → 흐름
   DOM 은 «모바일 순서»로 두고 데스크톱에서 order 로 올린다 (§04 도해 · §16 모바일 순서). */
.gn > .gn-a{order:1;padding-top:0}
.gn > .gn-a::before{display:none}
.gn > .gn-core-row{order:2}
.gn > .gn-semi{order:3}
.gn > .gn-gov{order:4}
.gn > .gn-bc{order:5}
.gn > .gn-flow{order:6}

/* 칸 — site.css 의 유리 카드 언어 그대로 */
.gn-node{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;min-width:150px;text-align:center;
  box-shadow:0 16px 50px rgba(0,0,0,.28);
}
.gn-node b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  color:var(--faint);margin-bottom:6px;font-weight:500}
.gn-node span{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.02em;color:var(--ink)}
.gn-node .sub{display:block;font-family:var(--sans);font-weight:400;font-size:var(--t-cap);
  color:var(--muted);letter-spacing:0;margin-top:5px}

/* CORE — 이 도해의 중심. 빛은 «한 군데»만 준다 */
.gn-node.core{
  border-color:var(--blue-line);background:var(--blue-soft);min-width:200px;
  box-shadow:0 0 0 1px rgba(0,133,253,.18), 0 24px 60px -28px rgba(0,133,253,.55);
}
.gn-node.core b{color:var(--blue)}
.gn-node.core span{font-size:18px;text-transform:uppercase}
/* ⚠ #11 §13 — 화면에는 대문자로 보이지만 «글자 자체»는 표준 표기(ONECLIP Core · AI Semi™)로 둔다.
   복사해 붙였을 때, 그리고 화면낭독기가 읽을 때 표준 이름이 나오게 하기 위해서다. */

.gn-core-row{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:nowrap}
.gn-h{width:clamp(24px,4vw,58px);height:1px;background:var(--gl-line);flex:none}

/* AI Semi — 작은 마디 하나. 전신 캐릭터를 주인공으로 쓰지 않는다 (§05) */
.gn-semi-node{display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--blue-line);background:var(--blue-soft);border-radius:999px;
  padding:9px 18px 9px 10px}
.gn-semi-node img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--surface-2)}
.gn-semi-node .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--blue);
  text-transform:uppercase}

/* 통제 사슬 — POLICY → PERMISSION → AUTHORIZED TOOL → TRANSACTION BOUNDARY (§07) */
.gn-gov{flex-direction:column;align-items:center}
.gn-gov-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.gn-gov-in .p{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);
  border:1px solid var(--line);background:var(--ground);border-radius:999px;padding:7px 14px}
.gn-gov-in .ar{color:var(--faint);font-size:12px}
.gn-gov-note{margin:16px 0 0;font-size:var(--t-cap);color:var(--muted);text-align:center;max-width:52ch;line-height:1.8}

/* 파트너 두 칸 */
.gn-bc{gap:clamp(14px,3vw,40px);flex-wrap:wrap}

/* 아래 흐름 띠 */
.gn-flow{margin-top:0}
.gn-flow-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--ground);border-radius:14px;padding:16px 18px}
.gn-flow-in .s{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-2)}
.gn-flow-in .ar{color:var(--faint);font-size:12px}

/* 기업 간 연결 예시 — «지금 되는 일»로 읽히면 안 된다 (§06) */
.gl-example{margin:clamp(34px,4vw,54px) auto 0;max-width:920px;
  border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:clamp(20px,2.6vw,28px)}
.gl-example .cap{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.13em;color:var(--faint);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;margin-bottom:18px}
.gl-example .cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.gl-chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0;padding:0;list-style:none}
.gl-chain li{display:flex;align-items:center;gap:8px;flex:1 1 150px}
.gl-chain .c{flex:1;border:1px solid var(--line);background:var(--ground);border-radius:12px;padding:13px 15px}
.gl-chain b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  color:var(--faint);margin-bottom:5px;font-weight:500;text-transform:uppercase}
.gl-chain span{display:block;font-size:14px;color:var(--ink-2)}
.gl-chain .ar{color:var(--faint);font-size:12px;flex:none}
.gl-example .note{margin:18px 0 0;font-size:var(--t-cap);color:var(--faint);line-height:1.8}

/* 구획 마무리 큰 글자 */
.gl-big{margin:clamp(40px,5vw,64px) auto 0;text-align:center}
.gl-big .k{font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(22px,3vw,36px);line-height:1.28;letter-spacing:-.028em;margin:0}
.gl-big .k em{font-style:normal;color:var(--blue)}
.gl-big .s{margin:16px auto 0;max-width:46ch;font-size:var(--t-body);color:var(--muted);line-height:1.85}

/* ═══ B. 세계 지도 ═══════════════════════════════════════════════════════
   ⚠ 스톡 지도 이미지를 쓰지 않았다 (§10). 실제 지리 데이터(Natural Earth 110m)를
     점 격자로 바꿔 SVG 로 직접 그렸다. 1,196점 (남극 제외).
   ⚠ 한국만 밝다. 나머지는 «계획»이므로 어둡게 두고 점선으로 잇는다. */
.gl-map-wrap{position:relative;margin:0 auto;max-width:1000px}
.gl-map{display:block;width:100%;height:auto}
.gl-map .land{fill:#1B2635}
.gl-map .route{fill:none;stroke:#2B4C7E;stroke-width:1.2;stroke-dasharray:4 5;opacity:.85}
.gl-map .pt{fill:#38506F}
.gl-map .pt-ring{fill:none;stroke:#38506F;stroke-width:1}
.gl-map .pt.on{fill:var(--blue)}
.gl-map .pt-ring.on{stroke:var(--blue);opacity:.55}
.gl-map .lb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;fill:#7C8899}
.gl-map .lb.on{fill:var(--blue)}
.gl-map .lb.sm{font-size:9.5px;letter-spacing:.08em;fill:#66738A}

.gl-maplegend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:22px 0 0}
.gl-maplegend span{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;color:var(--muted)}
.gl-maplegend i{width:9px;height:9px;border-radius:50%;background:#38506F;flex:none}
.gl-maplegend i.on{background:var(--blue)}
.gl-maplegend i.rt{width:22px;height:0;border-radius:0;border-top:1px dashed #2B4C7E}

/* 지도 위에 항상 붙여 두는 딱지 — 「계획」이라는 말이 지도에서 떨어지면 안 된다 (§10) */
.gl-mapbadge{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--faint);border:1px solid var(--line);background:rgba(7,9,14,.72);
  border-radius:999px;padding:5px 12px}

/* 단계 카드 4장 */
.gl-road{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,4vw,52px)}
.gl-rc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  box-shadow:0 16px 50px rgba(0,0,0,.28)}
.gl-rc.now{border-color:var(--blue-line);background:var(--blue-soft)}
.gl-rc .n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--faint);margin-bottom:12px}
.gl-rc.now .n{color:var(--blue)}
.gl-rc h3{margin:0 0 5px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.gl-rc .t{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  color:var(--blue);margin-bottom:12px}
.gl-rc.now .t{color:var(--live)}
.gl-rc p{margin:0;font-size:var(--t-desc);color:var(--muted);line-height:1.75}

/* 100 — 목표 숫자. 「서비스 중」으로 읽히지 않도록 딱지를 숫자에 «붙여» 둔다 (§12) */
.gl-100{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  justify-content:center;text-align:left;margin-top:clamp(34px,4vw,52px);
  border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:clamp(24px,3vw,36px)}
.gl-100 .num{font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,108px);
  line-height:.92;letter-spacing:-.05em;color:var(--blue);flex:none}
.gl-100 .rt{min-width:0}
.gl-100 .lab{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--ink-2);margin-bottom:10px}
.gl-100 .st{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:4px 11px;margin-bottom:12px}
.gl-100 p{margin:0;font-size:var(--t-body);color:var(--muted);line-height:1.85;max-width:46ch}

/* ═══ 반응형 (§16) ═══════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* 모바일 순서: TITLE → BODY → CORE → PARTNER A → AI SEMI → PARTNER B → PARTNER C → FLOW */
  .gn > .gn-core-row{order:1;padding-top:0}
  .gn > .gn-core-row::before{display:none}
  .gn > .gn-a{order:2;padding-top:34px}
  .gn > .gn-a::before{display:block}
  .gn-core-row{flex-direction:column;gap:0}
  .gn-core-row .gn-node.core{order:-1}
  .gn-h{width:1px;height:26px}
  .gn-bc{flex-direction:column;align-items:center;gap:0}
  .gn-bc .gn-node{margin-top:0}
  .gn-bc .gn-node + .gn-node{margin-top:34px;position:relative}
  .gn-bc .gn-node + .gn-node::before{content:"";position:absolute;left:50%;top:-34px;width:1px;
    height:34px;background:var(--gl-line);transform:translateX(-50%)}
  .gl-road{grid-template-columns:repeat(2,1fr)}
  .gl-100{justify-content:flex-start}
}
@media (max-width:620px){
  .gl-road{grid-template-columns:1fr}
  .gl-chain li{flex:1 1 100%}
  .gl-chain .ar{display:none}
  .gn-node{min-width:0;width:100%;max-width:320px}
  .gn-core-row{width:100%}
  .gn-core-row .gn-node{max-width:320px}
  .gl-maplegend{justify-content:flex-start}
  .gl-mapbadge{position:static;display:inline-block;margin-bottom:12px}
  /* ⚠ 처음에는 가로로 밀어 보게 만들었는데, 한국이 지도 오른쪽 77% 지점이라
     390px 에서 «출발점이 화면 밖»에 있었다. 지도의 요점이 안 보이면 의미가 없다.
     그래서 밀기를 없애고 폭에 맞춰 줄이되, 점과 글씨를 키워 읽히게 했다. */
  .gl-map{min-width:0}
  .gl-map .land{stroke-width:4.6}
  .gl-map .lb{font-size:17px;letter-spacing:.06em}
  .gl-map .lb.sm{font-size:14px;letter-spacing:.04em}
  .gl-map .pt{r:7}
  .gl-map .pt.on{r:9}
  .gl-map .pt-ring{stroke-width:1.8}
  .gl-map .route{stroke-width:2;stroke-dasharray:6 7}
}
@media (prefers-reduced-motion:reduce){
  .gl *{animation:none !important;transition:none !important}
}