
:root{--bg:#010207;--ink:#f5f7ff;--muted:rgba(235,240,255,.58);--header-h:82px;--pad-x:clamp(20px,3.2vw,48px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}
#space,.aurora,.vignette{position:fixed;inset:0}#space{z-index:0;width:100%;height:100%;display:block}
.aurora{z-index:1;pointer-events:none;filter:blur(85px);opacity:.28;background:radial-gradient(ellipse at 22% 28%,rgba(54,104,255,.18),transparent 35%),radial-gradient(ellipse at 76% 63%,rgba(128,72,255,.12),transparent 34%),radial-gradient(ellipse at 54% 47%,rgba(72,228,208,.07),transparent 29%);animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate(2.8%,-2.2%) scale(1.05);opacity:.40}}
.vignette{z-index:2;pointer-events:none;background:radial-gradient(circle at 52% 48%,transparent 24%,rgba(0,0,0,.10) 56%,rgba(0,0,0,.76) 100%)}
.global-header{position:fixed;z-index:30;top:0;left:0;right:0;min-height:var(--header-h);padding:20px var(--pad-x);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:30px;border-bottom:1px solid rgba(255,255,255,.05);backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(1,2,7,.45),rgba(1,2,7,.05))}
.brand{font-size:12px;letter-spacing:.29em;font-weight:700;white-space:nowrap}.global-nav{display:flex;gap:clamp(16px,2vw,30px)}
.global-nav a,.languages button,.menu-toggle{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.56)}.global-nav a:hover,.languages button.active{color:#fff}
.languages{display:flex;gap:4px;padding-left:18px;border-left:1px solid rgba(255,255,255,.12)}.languages button{border:0;background:none;padding:6px;cursor:pointer}
.menu-toggle{display:none;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.18);padding:9px 11px;color:#fff}
.global-footer{position:fixed;z-index:25;left:var(--pad-x);right:var(--pad-x);bottom:18px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.18em;color:rgba(255,255,255,.31)}
@media(max-width:980px){.global-header{grid-template-columns:1fr auto}.menu-toggle{display:block}.global-nav{display:none}.global-nav.open{display:flex;position:fixed;z-index:40;top:var(--header-h);left:0;right:0;padding:24px var(--pad-x);flex-direction:column;background:rgba(1,2,7,.96);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}.languages{grid-column:1/-1;justify-self:end;border-left:0;padding-left:0;margin-top:-10px}}
@media(max-width:620px){:root{--header-h:106px}.global-header{padding-top:max(18px,env(safe-area-inset-top));gap:12px}.brand{font-size:10px;letter-spacing:.22em}.languages{width:100%;justify-content:flex-end}.global-footer{left:20px;right:20px}.global-footer span:first-child{display:none}}
@media(max-height:520px) and (orientation:landscape){:root{--header-h:60px}.global-header{min-height:60px;padding:12px 20px;grid-template-columns:1fr auto auto}.global-nav{display:flex;gap:15px}.menu-toggle{display:none}.languages{grid-column:auto;margin:0;border-left:1px solid rgba(255,255,255,.12);padding-left:12px}.global-footer{display:none}}
@media(prefers-reduced-motion:reduce){.aurora{animation:none}}


/* =========================================================
   v14 GLOBAL TYPOGRAPHY SYSTEM
   Goal: natural sentence flow across EN / KO / JA / ZH
   ========================================================= */

:root{
  --measure-display: 12ch;
  --measure-heading: 18ch;
  --measure-body: 58ch;
  --measure-body-narrow: 44ch;
}

/* Never let decorative words and punctuation break layout awkwardly */
h1,h2,h3,h4,h5,h6,
.hero h1,
.group-intro h1,
.network-copy h2,
.world-copy h2,
.closing h2{
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Body copy should prefer balanced final lines instead of ugly one-word endings */
p,
.hero p,
.group-intro p,
.network-copy p,
.world-copy p,
.node-info{
  text-wrap: pretty;
  overflow-wrap: break-word;
  max-width: var(--measure-body);
}

/* English / Latin typography */
html[lang="en"] body{
  line-break: auto;
  word-break: normal;
}
html[lang="en"] p{
  hyphens: none;
}

/* Korean */
html[lang="ko"] body{
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
html[lang="ko"] p,
html[lang="ko"] .world-copy p,
html[lang="ko"] .group-intro p,
html[lang="ko"] .network-copy p{
  line-height: 1.92;
  letter-spacing: .025em;
}

/* Japanese */
html[lang="ja"] body{
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}
html[lang="ja"] p{
  line-height: 1.9;
  letter-spacing: .025em;
}

/* Simplified Chinese */
html[lang="zh-Hans"] body{
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}
html[lang="zh-Hans"] p{
  line-height: 1.9;
  letter-spacing: .02em;
}

/* Prevent punctuation from visually detaching at line starts where possible */
html[lang="ko"] p,
html[lang="ja"] p,
html[lang="zh-Hans"] p{
  hanging-punctuation: allow-end;
}

/* Decorative labels stay separate from prose */
.eyebrow,
.section-index,
.kicker,
.tag,
.global-nav,
.languages,
.scroll-mark,
.network-hint{
  text-wrap: nowrap;
}

/* Title blocks get their own visual rhythm instead of forced <br> dependence */
.hero h1,
.group-intro h1,
.network-copy h2,
.closing h2{
  max-width: var(--measure-heading);
}

/* Body blocks are visually independent from graphics */
.hero,
.network-copy,
.world-copy,
.group-intro > div,
.closing-inner{
  isolation: isolate;
}

/* Better paragraph measure on large displays */
.hero p{max-width: 42ch;}
.group-intro p{max-width: 62ch;}
.network-copy p{max-width: 48ch;}
.world-copy p{max-width: 56ch;}

/* Avoid accidental single-line widows where browsers support it */
@supports (text-wrap: pretty){
  p{ text-wrap: pretty; }
}
@supports (text-wrap: balance){
  h1,h2,h3{ text-wrap: balance; }
}

/* Tablet */
@media(max-width:980px){
  :root{
    --measure-heading: 16ch;
    --measure-body: 52ch;
  }
  .hero p,
  .group-intro p,
  .network-copy p,
  .world-copy p{
    margin-left:auto;
    margin-right:auto;
  }
}

/* Mobile */
@media(max-width:620px){
  :root{
    --measure-heading: 12ch;
    --measure-body: 34ch;
    --measure-body-narrow: 30ch;
  }

  .hero h1,
  .group-intro h1,
  .network-copy h2,
  .world-copy h2,
  .closing h2{
    max-width: 11ch;
  }

  .hero p,
  .group-intro p,
  .network-copy p,
  .world-copy p{
    max-width: 32ch;
    font-size: 9px;
  }

  html[lang="ko"] .hero p,
  html[lang="ko"] .group-intro p,
  html[lang="ko"] .network-copy p,
  html[lang="ko"] .world-copy p{
    max-width: 29ch;
    line-height: 1.95;
  }

  html[lang="ja"] .hero p,
  html[lang="zh-Hans"] .hero p,
  html[lang="ja"] .world-copy p,
  html[lang="zh-Hans"] .world-copy p{
    max-width: 30ch;
  }
}

/* Mobile landscape */
@media(max-height:520px) and (orientation:landscape){
  .hero p,
  .group-intro p,
  .network-copy p,
  .world-copy p{
    max-width: 38ch;
    line-height: 1.72;
  }
}

/* v15 — editorial line balancing */
.copy-break{display:block}
.hero p,
.group-intro p,
.network-copy p,
.world-copy p{
  text-align:left;
}
.group-intro p{
  width:min(62ch,78vw);
}
.network-copy p{
  width:min(46ch,44vw);
}
.world-copy p{
  width:min(54ch,46vw);
}

/* Explicit sentence breaks preserve editorial rhythm on desktop/tablet. */
@media(min-width:621px){
  .copy-break{display:block}
}

/* Mobile: let short screens reflow naturally rather than forcing awkward sentence blocks. */
@media(max-width:620px){
  .copy-break{display:none}
  .group-intro p,
  .network-copy p,
  .world-copy p{
    width:auto;
    max-width:31ch;
    text-align:center;
  }
}

/* Korean text: sentence blocks remain visually compact */
html[lang="ko"] .group-intro p,
html[lang="ko"] .network-copy p,
html[lang="ko"] .world-copy p{
  letter-spacing:.015em;
}

/* =========================================================
   v16 SENTENCE LINE-DESIGN SYSTEM
   Editorial rule:
   1 sentence = 1 visual line block where space allows.
   Break only at sentence boundaries.
   Never split brand/domain names.
   ========================================================= */

.designed-copy{
  display:flex;
  flex-direction:column;
  gap:.34em;
  max-width:none!important;
}

.designed-copy .sentence{
  display:block;
  width:max-content;
  max-width:100%;
  text-wrap:nowrap;
  white-space:nowrap;
}

/* Protect names/domains from mid-name wrapping */
.designed-copy{
  word-break:keep-all;
}
.designed-copy .sentence{
  overflow-wrap:normal;
  hyphens:none;
}

/* Desktop: lines are deliberately designed, not browser-balanced */
.group-intro .designed-copy{
  width:min(760px,74vw)!important;
  align-items:center;
  margin-left:auto;
  margin-right:auto;
}
.group-intro .designed-copy .sentence{
  margin-left:auto;
  margin-right:auto;
}

.network-copy .designed-copy{
  width:min(500px,42vw)!important;
  align-items:flex-start;
}

.world-copy .designed-copy{
  width:min(600px,46vw)!important;
  align-items:flex-start;
}

/* Korean/Japanese/Chinese need slightly smaller type to preserve sentence units */
html[lang="ko"] .designed-copy,
html[lang="ja"] .designed-copy,
html[lang="zh-Hans"] .designed-copy{
  letter-spacing:.012em;
}
html[lang="ko"] .designed-copy .sentence,
html[lang="ja"] .designed-copy .sentence,
html[lang="zh-Hans"] .designed-copy .sentence{
  line-height:1.82;
}

/* Tablet:
   keep sentence-level breaks, reduce type/width before allowing wraps */
@media(max-width:980px){
  .group-intro .designed-copy{
    width:min(680px,84vw)!important;
  }
  .network-copy .designed-copy,
  .world-copy .designed-copy{
    width:min(600px,82vw)!important;
    align-items:center;
    margin-left:auto;
    margin-right:auto;
  }
  .network-copy .designed-copy .sentence,
  .world-copy .designed-copy .sentence{
    margin-left:auto;
    margin-right:auto;
  }
}

/* Mobile:
   sentence boundary remains primary.
   Only if a single sentence is physically too wide, it may wrap naturally,
   but the next sentence always begins on a new block. */
@media(max-width:620px){
  .designed-copy{
    width:min(88vw,360px)!important;
    gap:.42em;
    margin-left:auto;
    margin-right:auto;
  }
  .designed-copy .sentence{
    width:auto;
    max-width:100%;
    white-space:normal;
    text-wrap:pretty;
    word-break:keep-all;
    overflow-wrap:break-word;
    text-align:center;
  }
  html[lang="en"] .designed-copy .sentence{
    word-break:normal;
  }
}

/* Small phones */
@media(max-width:390px){
  .designed-copy{
    width:88vw!important;
  }
  .designed-copy .sentence{
    font-size:8.7px;
    line-height:1.85;
  }
}

/* v18 accessibility/readability safeguard */
.business-page p,
.business-page .sentence{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
