/* ═══════════════════════════════════════════════════════
    Korean pages (/ko/...): loaded after each page's own styles.
    The site's fonts carry Latin letters only, so Korean text falls back to the
    system's Korean fonts, named here so Windows doesn't pick a Chinese or Japanese one.
    ═══════════════════════════════════════════════════════ */

:root:lang(ko) {
    --ko-fonts: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Nanum Gothic", sans-serif;
    /* The pages' own font stacks with the Korean fonts in place of the generic ones. */
    --font-title: "Inter", "Inter Fallback", -apple-system, "Segoe UI", var(--ko-fonts);
    --font-display: "Archivo", "Arial Black", var(--ko-fonts);
}

:root:lang(ko):has(.sf2-stage) {
    --font-body: "Inter Tight", -apple-system, "Segoe UI", var(--ko-fonts);
}

:root:lang(ko):has(.spu-stage) {
    /* simpleSPU's own Rubik fonts, with the Korean fonts behind them. */
    --font-display: "Rubik Mono One", "Arial Black", var(--ko-fonts);
    --font-body: "Rubik", -apple-system, "Segoe UI", var(--ko-fonts);
}

/* Korean breaks lines at spaces, between words: keep-all stops a line breaking
   in the middle of a word. */
:lang(ko) body {
    word-break: keep-all;
    overflow-wrap: break-word;
}

:lang(ko) h1,
:lang(ko) h2,
:lang(ko) h3,
:lang(ko) .product-hero__title {
    /* The tight tracking suits Latin headings but squeezes Hangul together. */
    letter-spacing: 0;
}

/* simpleSPU's headings use Rubik Mono One, which has one weight, so the Korean letters
   fall back to a thin system font. Ask for bold, which only the Korean font has: with
   font-synthesis off, the browser doesn't fake a bold Rubik for the Latin letters. */
:root:lang(ko):has(.spu-stage) :is(h1, h2) {
    font-weight: 700;
    font-synthesis: none;
    /* The spaces between Korean words come from Rubik Mono One, about 0.85em wide:
       this brings them to a normal Korean word space. */
    word-spacing: -0.55em;
}

/* simpleSPU's header button names its own font stack: put the Korean fonts behind Rubik. */
:lang(ko) .site-header[data-cta="retro"] .nav-cta {
    font-family: "Rubik", -apple-system, "Segoe UI", var(--ko-fonts);
}