/*
  지몽 테마의 로케일 덧칠 (en · ja · zh-tw). theme-ko.css(지몽 "밤의 서고" 테마 그 자체)와 화면 CSS 다음에 맨 끝으로 링크해요.
  색은 theme-ko 그대로 두고, 서체 더미와 줄바꿈만 그 언어에 맞춰요. ko 화면은 이 파일을 싣지 않아요.
  로케일 페이지는 모두 지몽 화면이라 locale-{en,ja,zh-tw}.css를 싣지 않아요 (그 파일은 html[lang]에서 색 토큰을 밝게 덮어써요). 서버가 만드는 사전·글도 맨 끝에 이 파일을 실어요 (server/library-template.js).
  웹폰트는 늘리지 않아요: en은 theme-ko의 Noto Serif KR 라틴 조각, ja·zh-tw는 시스템 명조(없으면 그 언어의 고딕).
  docs/superpowers/plans/2026-10-13-jimong-global.md
*/

html[lang="en"] {
  --font-serif: "Noto Serif KR", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tracking-display: -0.01em;
}

html[lang="ja"] {
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", "BIZ UDPMincho", "Hiragino Sans", "Noto Sans JP", serif;
  --font-ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, -apple-system, sans-serif;
  --font-numeric: var(--font-ui);
  --tracking-display: 0.02em;
}

html[lang="zh-Hant-TW"] {
  --font-serif: "Noto Serif TC", "Noto Serif CJK TC", "Source Han Serif TC", "Songti TC", "PMingLiU", "MingLiU", "PingFang TC", "Microsoft JhengHei", serif;
  --font-ui: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, -apple-system, sans-serif;
  --font-numeric: var(--font-ui);
  --tracking-display: 0.02em;
}

/* 랜딩 명조 한 장(Jimong Serif Landing)은 ko 글자와 라틴만 담은 Noto Serif KR이라, 일본어·중국어 글자와 섞이지 않게 그 언어의 명조로 바로 가요 */
html[lang="ja"] .jm,
html[lang="zh-Hant-TW"] .jm {
  --font-landing-serif: var(--font-serif);
}

/* 한국어용 word-break: keep-all은 띄어쓰기가 없는 일본어·중국어에서 줄을 못 나눠요. 보통 줄바꿈으로 되돌리고 금칙은 엄격하게 */
html[lang="ja"] body,
html[lang="ja"] body *,
html[lang="zh-Hant-TW"] body,
html[lang="zh-Hant-TW"] body * {
  word-break: normal !important;
  line-break: strict;
  overflow-wrap: break-word;
}

/* 일본어 제목은 문절에서 꺾어요 (지원하는 브라우저만) */
html[lang="ja"] h1,
html[lang="ja"] h2 {
  word-break: auto-phrase !important;
}

/* 영어 고지 두 줄 (나이, 오락·자기 성찰): 바닥글 바로 위, 시스템 고딕 보조 글씨 */
.jm-legal {
  margin: var(--space-6) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--color-muted);
}

.jm-legal p {
  margin: 0 0 var(--space-2);
}

/* 문패 글자(HeyMong)는 한 줄로 */
html[lang="en"] .jm .brand span,
html[lang="ja"] .jm .brand span,
html[lang="zh-Hant-TW"] .jm .brand span {
  white-space: nowrap;
}

/* 좁은 폰(380px 아래)에서는 문패 글자를 화면에서만 감추고 인장만 둬요 (사전 링크·언어 고르기와 한 줄에 들어가게). 읽어 주기에는 남아요 */
@media (max-width: 379px) {
  html[lang="en"] .jm .brand span,
  html[lang="ja"] .jm .brand span,
  html[lang="zh-Hant-TW"] .jm .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/* 사주 칸의 "모름"은 영어로 길어(Unknown) 좁은 칸에서 글자 중간이 꺾이지 않게 조금 작게 */
html[lang="en"] .jm-pillar-unknown {
  font-size: 0.78em;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* 特定商取引法に基づく表記 등 ja 법무 표 (/jp/tokushoho·terms·privacy): 지몽 화면이 locale-ja.css를 싣지 않게 되며 그 파일에서 옮겨 온 배치 규칙. 색은 theme-ko 그대로 */
html[lang="ja"] .legal-table th {
  white-space: nowrap;
  vertical-align: top;
}

@media (max-width: 480px) {
  html[lang="ja"] .legal-table table,
  html[lang="ja"] .legal-table tbody,
  html[lang="ja"] .legal-table tr,
  html[lang="ja"] .legal-table th,
  html[lang="ja"] .legal-table td {
    display: block;
    width: auto;
  }

  html[lang="ja"] .legal-table thead {
    display: none;
  }

  html[lang="ja"] .legal-table th {
    white-space: normal;
    padding-bottom: 0;
  }
}

/* 사전·글 머리 (.library-top): 문패 글자(HeyMong / 夢占い HeyMong / 解夢 HeyMong)가 ko(해몽)보다 길어 좁은 폰에서 사전 링크·언어 고르기를 화면 밖으로 밀어요.
   랜딩 문패처럼 그 너비 아래에서는 글자를 화면에서만 감추고 인장만 둬요. 읽어 주기에는 남아요 */
@media (max-width: 439px) {
  html[lang="en"] .library-top .library-brand span,
  html[lang="ja"] .library-top .library-brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

@media (max-width: 379px) {
  html[lang="zh-Hant-TW"] .library-top .library-brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}