/* names.css: the shared bones of a name in 한글 · 漢字 · English (built by names.js).
   한글 in Noto Sans KR (a page may set --nm-ko to Noto Serif KR); 漢字 always in Noto Serif KR, so it
   reads as a name and takes Korean glyph forms; English keeps the page's own type. Each page sets
   sizes and colors for its own contexts. Same class names as the app (web/css/family.css). */

:root {
  --nm-ko: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --nm-hanja: 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', Batang, serif;
}

.nm { white-space: nowrap; }
.nm-ko { font-family: var(--nm-ko); text-transform: none; letter-spacing: .02em; }
.nm-hanja { font-family: var(--nm-hanja); font-weight: 400; text-transform: none; letter-spacing: .06em; }

/* stack: 한글 large over a small line of 漢字 · ENGLISH (· extra) */
.nm-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .28em; }
.nm-stack .nm-lead { line-height: 1.05; }
.nm-sub { display: block; white-space: nowrap; line-height: 1.2; }
.nm-sep { display: inline-block; margin: 0 .42em; opacity: .5; }

/* line: 한글 │ 漢字 │ English, hairline rules between */
.nm-rule {
  display: inline-block; width: 1px; height: .82em; margin: 0 .12em;
  vertical-align: -.06em; background: currentColor; opacity: .3;
}

/* compact: 한글 漢字 (English) */
.nm-compact .nm-hanja { font-size: .86em; }
/* the English beside a 한글 name is a caption: smaller and mute, never by alpha (§13.1) */
.nm-compact .nm-en { font-size: .8em; color: var(--mute, #5D618C); }
/* an English-only name (no 한글, no 漢字) is the name: full size, in its own ink */
.nm-compact .nm-en.nm-solo { font-size: 1em; color: inherit; }

/* an echo's why: words · people · place */
.nm-why { white-space: normal; }
.nm-why .nm { white-space: nowrap; }
.nm-why .nm-sep { margin: 0 .35em; }