/* saju-i18n-type.css — 사주 2.0 언어별 타이포그래피
 *
 * ★ 폰트 파일은 saju-fonts.css 가 싣는다. 이 파일은 **어느 언어에 어느 얼굴을
 *   쓰고, 얼마나 벌리고, 어디서 줄을 끊을지**만 정한다. 순서는
 *   saju-fonts.css → 이 파일 → 화면 CSS 다.
 *
 * ★ 「전 언어에 배율 하나」는 하지 않는다.
 *   이 화면들은 px 이 643곳, rem 이 157곳이다. html 의 font-size 를 건드리면
 *   rem 만 움직여 **글자마다 제각각 커지는** 화면이 된다. 그래서 진짜 문제가
 *   생기는 자리만 고른다 —
 *     ① 언어마다 다른 얼굴(폰트)         ← 가장 크게 달라지는 것
 *     ② 줄간·자간·줄바꿈 규칙            ← CJK 는 라틴보다 줄을 벌려야 읽힌다
 *     ③ 영어는 같은 뜻이 30~50% 길다     ← 단추·칩이 넘친다. 거기만 줄인다
 *     ④ CJK 최소 크기                    ← 10px 한자는 못 읽는다. 라틴은 읽힌다
 *
 * ★ 폰트는 전부 SIL Open Font License 1.1 — 상업 사용·웹호스팅 자유.
 *   ko  Pretendard   — 국내 금융·커머스가 널리 쓴다. 숫자 폭이 고르고
 *                      가격·날짜가 흔들리지 않아 결제 화면의 신뢰에 유리하다
 *   ja  Noto Sans JP — 일본에서 가장 중립적인 고딕. 낯선 얼굴은 그 자체로
 *                      「외국 사이트」 신호가 되어 결제 직전에 손을 멈추게 한다
 *   zh-CN Noto Sans SC / zh-TW Noto Sans TC
 *   zh-HK Noto Sans HK — 대만과 **따로** 둔다. 번체는 같아도 홍콩 자형
 *                      (香港增補字符集)이 달라, TC 를 그대로 쓰면 현지에서
 *                      「대륙/대만 사이트」로 읽힌다
 *   en  Inter        — 화면용으로 설계된 라틴 산세리프. 작은 크기에서
 *                      숫자·대문자가 뭉개지지 않는다
 */

/* ── 언어별 얼굴·줄간·자간 ─────────────────────────────────────────────── */

:root,
html[lang="ko"] {
  --font-sans: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --i18n-line-height: 1.65;
  --i18n-letter-spacing: -0.01em;   /* 한글은 살짝 좁혀야 덩어리로 읽힌다 */
  --i18n-word-break: keep-all;      /* 어절 중간에서 끊기지 않게 */
  --i18n-min-size: 11px;
}

html[lang="ja"] {
  --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  /* 한자·가나가 빽빽해 줄을 더 벌려야 눈이 다음 줄을 찾는다 */
  --i18n-line-height: 1.85;
  --i18n-letter-spacing: 0.01em;
  --i18n-word-break: normal;
  --i18n-min-size: 12px;
}

html[lang="zh-CN"] {
  --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --i18n-line-height: 1.8;
  --i18n-letter-spacing: 0.01em;
  --i18n-word-break: normal;
  --i18n-min-size: 12px;
}

html[lang="zh-TW"] {
  --font-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  /* 번체는 획이 많아 간체보다 한 칸 더 벌린다 */
  --i18n-line-height: 1.85;
  --i18n-letter-spacing: 0.01em;
  --i18n-word-break: normal;
  --i18n-min-size: 12px;
}

html[lang="zh-HK"] {
  --font-sans: 'Noto Sans HK', 'PingFang HK', 'Microsoft JhengHei', sans-serif;
  --i18n-line-height: 1.85;
  --i18n-letter-spacing: 0.01em;
  --i18n-word-break: normal;
  --i18n-min-size: 12px;
}

html[lang="en"] {
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --i18n-line-height: 1.6;
  --i18n-letter-spacing: 0;         /* 한글용 음수 자간을 라틴에 쓰면 뭉갠다 */
  --i18n-word-break: normal;
  --i18n-min-size: 0px;             /* 라틴은 작아도 읽힌다 — 하한 없음 */
}

/* ── 공통 적용 ─────────────────────────────────────────────────────────── */

.sjc-body,
.lp-root,
.sjtop {
  line-height: var(--i18n-line-height);
  letter-spacing: var(--i18n-letter-spacing);
  word-break: var(--i18n-word-break);
  overflow-wrap: anywhere;          /* 긴 URL·번호가 칸을 밀어내지 않게 */
}

/* 일본어·번체는 금칙 처리를 엄격히 — 문장부호가 줄 첫머리에 서지 않는다 */
html[lang="ja"] .lp-root,
html[lang="zh-TW"] .lp-root,
html[lang="zh-HK"] .lp-root {
  line-break: strict;
}

/* ── ④ CJK 최소 글자 크기 ──────────────────────────────────────────────
   화면 곳곳에 10~11px 짜리 보조 문구가 있다. 한글은 겨우 읽히지만
   한자·가나는 획이 뭉개져 **읽을 수 없다.** 그 자리만 끌어올린다.
   (영어는 --i18n-min-size 가 0 이라 이 규칙에 걸리지 않는다) */
html[lang="ja"], html[lang="zh-CN"], html[lang="zh-TW"], html[lang="zh-HK"] {
  --i18n-apply-min: 1;
}
html[lang="ja"] .sjc-footer__meta,
html[lang="zh-CN"] .sjc-footer__meta,
html[lang="zh-TW"] .sjc-footer__meta,
html[lang="zh-HK"] .sjc-footer__meta,
html[lang="ja"] .sjc-section__desc,
html[lang="zh-CN"] .sjc-section__desc,
html[lang="zh-TW"] .sjc-section__desc,
html[lang="zh-HK"] .sjc-section__desc,
html[lang="ja"] .sjtop__link,
html[lang="zh-CN"] .sjtop__link,
html[lang="zh-TW"] .sjtop__link,
html[lang="zh-HK"] .sjtop__link,
html[lang="ja"] .sjtop__user,
html[lang="zh-CN"] .sjtop__user,
html[lang="zh-TW"] .sjtop__user,
html[lang="zh-HK"] .sjtop__user {
  font-size: max(var(--i18n-min-size), 1em);
}

/* ── ③ 영어는 길다 ────────────────────────────────────────────────────
   「신청하기」 4글자가 "Apply now" 9글자가 된다. 폭이 고정된 단추·칩·
   상단바에서 넘치거나 두 줄이 된다. **글자만** 한 눈금 줄이고 좌우 여백을
   깎는다 — 단추 크기를 줄이면 누르기 어려워지므로 높이는 건드리지 않는다. */
html[lang="en"] .sjc-header__apply,
html[lang="en"] .sjtop__link,
html[lang="en"] .sjtop__cta {
  font-size: 0.92em;
  padding-left: 10px;
  padding-right: 10px;
}

html[lang="en"] .sjc-btn {
  font-size: 0.92em;
  padding-left: 18px;
  padding-right: 18px;
}

/* 상단바는 56px 한 줄이다. 영어에서 브랜드+메뉴+계정이 겹치지 않게
   계정 이름 쪽을 먼저 양보시킨다. */
html[lang="en"] .sjtop__user-nm { max-width: 44px; }

/* ── 언어 선택기 — 어느 언어에서도 목록이 흔들리지 않게 ─────────────────
   각 줄이 제 언어 글자로 적히므로(한국어·日本語·繁體中文) 이 메뉴 안에서는
   현재 언어의 얼굴을 강요하지 않는다. 브라우저가 글자마다 맞는 얼굴을
   고르게 둔다 — 아니면 일본어 화면에서 「한국어」가 두부(□□□)로 보인다. */
.sjc-lang-menu__item {
  font-family: 'Pretendard', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC',
               'Noto Sans HK', 'Inter', sans-serif;
  letter-spacing: 0;
}