/* =========================================================================
   ko.css — Korean typography layer.

   Loaded LAST, and only on Korean pages (build.mjs sets {{extra-head}}).
   Everything here overrides a value in tokens.css / base.css / layout.css
   that was tuned for Latin text.

   Deliberately NOT written as :root[lang="ko"] rules inside tokens.css:
   English pages carry legitimate Korean fragments (footer addresses, the
   Korean-name column on Certifications, agency names on Clients), and a
   [lang="ko"] selector would restyle those too — an English regression
   hidden inside a Korean feature.
   ========================================================================= */

:root {
  /* Inter first: it renders the Latin that runs through Korean copy
     (WiseSphere 3D, OGC, 3D Tiles, ETRI, figures) better than Noto's Latin.
     Hangul falls through to Noto Sans KR per glyph. */
  --font-sans: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  /* 880px runs to ~52 Hangul characters per line on the long-prose pages
     (CEO letter, Vision). 760px lands at ~44, inside the comfortable band. */
  --container-narrow: 760px;
}

body {
  /* Hangul needs more leading than Latin at the same size. */
  line-height: 1.75;
  /* THE important one. Without keep-all, browsers break Hangul mid-eojeol,
     which reads as broken Korean. Paired with overflow-wrap so long unbroken
     Latin tokens (URLs, WiseSphere3D) still wrap instead of overflowing. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5 {
  /* base.css uses -0.02em, a Latin optical correction. Hangul syllable
     blocks are already tightly packed; negative tracking makes strokes
     touch at --step-4 / --step-5 sizes. */
  letter-spacing: -0.005em;
  /* 1.18 clips the descenders of ㄹ / ㅎ / ㅍ finals. */
  line-height: 1.38;
  word-break: keep-all;
  /* balance + keep-all tends to leave a 4-character orphan line. */
  text-wrap: auto;
}

.hero h2 {
  /* layout.css:468 uses -0.035em for the Latin hero. */
  letter-spacing: 0;
  line-height: 1.3;
}

p {
  /* base.css uses text-wrap: pretty. */
  text-wrap: auto;
}

.lead {
  line-height: 1.72;
}

.eyebrow {
  /* .14em tracking reads as broken spacing in Hangul, not as emphasis. */
  letter-spacing: 0.02em;
}

.pagehead p,
.section-head p {
  line-height: 1.7;
}

/* .section-head { max-width: 62ch } is left alone on purpose. `ch` resolves
   against the "0" glyph, which still comes from Inter (~0.55em), so 62ch is
   about 34 Hangul characters — the right measure. It works by way of the
   font ordering above; if Inter is ever removed from --font-sans, revisit. */

/* The Korean GNB puts a submenu under 인재채용, which is the last item and sits
   flush against the right edge of the container. layout.css anchors .gnb__sub
   with left: 0, so that dropdown overflows the viewport and gives the whole
   page a horizontal scrollbar. The English GNB never hits this because none of
   its trailing items have a submenu. Anchor the last one to its right edge
   instead. Desktop only — below 900px the nav is a drawer with static
   positioning. */
@media (min-width: 901px) {
  .gnb__list > li:last-child > .gnb__sub {
    left: auto;
    right: 0;
  }
}

/* --- Korean-site artwork ------------------------------------------------
   The legacy product tiles have Korean text baked in, which is correct here
   (see DEPLOY.md §6). They are small and come in three fixed shapes:
     ai_img01_*  150x100  (3:2, the .iconcard default)
     ai_img02_*  250x100  (5:2)
     ai_img03_*  120x68   (~16:9)
   ------------------------------------------------------------------------ */

.iconcard--wide img {
  aspect-ratio: 5 / 2;
}

.iconcard--flat img {
  aspect-ratio: 16 / 9;
}

/* Hanja shown beside a Korean 사자성어 (인재상 on 인재채용). Set slightly
   smaller and lighter so it reads as a gloss rather than a second heading. */
.feature__hanja {
  font-weight: 500;
  font-size: 0.86em;
  color: var(--text-muted);
  margin-left: 0.15em;
}

.section--dark .feature__hanja,
.section--darker .feature__hanja {
  color: var(--text-on-dark-muted);
}

/* .iconrow's default track stretches tiles to ~212px, which upscales the
   120px-wide ai_img03_* set by 1.8x and visibly softens it. Cap the track so
   those rows render nearer their native size. Remove this once higher
   resolution originals are supplied. */
.iconrow--sm {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 11rem));
}