/* 多言語ページの見た目合わせ（service-sites/scripts/localize.py が生成ページと ja ページの両方に読み込む）
   - 言語ごとのフォント（CJK は各言語のシステムフォント、欧文は system-ui）
   - 欧文（es / fr / de）は日本語より 1.5〜2 倍長くなるので、見出し・ボタン・ナビの折り返しを許す
   - 言語切替 <details class="lang-switch">（JS 不要） */

/* 1. フォント */
html[lang="en"] body, html[lang="es"] body, html[lang="fr"] body, html[lang="de"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
html[lang="ko"] body {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Pretendard", system-ui, sans-serif;
  word-break: keep-all;
}
html[lang="zh-CN"] body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
html[lang="zh-TW"] body {
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}
html:not([lang="ja"]) body { line-height: 1.65; hyphens: manual; -webkit-hyphens: manual; }

/* 2. 欧文の長さ対策 — 日本語前提の nowrap を外し、見出しを少し詰める */
html:not([lang="ja"]):not([lang^="zh"]):not([lang="ko"]) h1 { overflow-wrap: anywhere; letter-spacing: -0.01em; }
html:not([lang="ja"]) .hero h1, html:not([lang="ja"]) .people-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
html:not([lang="ja"]) .hero .eyebrow, html:not([lang="ja"]) .people-hero-kicker { white-space: normal; }
html:not([lang="ja"]) .cta-band .button, html:not([lang="ja"]) .hero-actions .button, html:not([lang="ja"]) .people-button { white-space: normal; text-align: center; line-height: 1.25; }
html:not([lang="ja"]) .header-cta, html:not([lang="ja"]) .header-demo { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
html:not([lang="ja"]) .site-nav a { white-space: nowrap; font-size: 0.88rem; }
html:not([lang="ja"]) .nav { gap: clamp(10px, 1.2vw, 18px); font-size: 12px; }
html:not([lang="ja"]) .nav > a, html:not([lang="ja"]) .nav-trigger { white-space: nowrap; }
@media (max-width: 1400px) { html:not([lang="ja"]) .header-cta { display: none; } }
html:not([lang="ja"]) .site-nav { flex-wrap: wrap; }
html:not([lang="ja"]) .table-wrap th, html:not([lang="ja"]) .table-wrap td { white-space: normal; min-width: 7em; }
html:not([lang="ja"]) .mock-pill, html:not([lang="ja"]) .pill, html:not([lang="ja"]) .badge { white-space: nowrap; }
html:not([lang="ja"]) .steps h3, html:not([lang="ja"]) .grid h3 { overflow-wrap: anywhere; }
@media (max-width: 1220px) {
  html:not([lang="ja"]) .nav { font-size: 11.5px; }
}
/* chordone.jp のモバイル: ヘッダーのボタンは下部の固定 CTA に任せる（後方の display:inline-flex が
   560px の非表示指定を打ち消していたので、詳細度を上げて確実に隠す） */
@media (max-width: 560px) {
  .site-header .header-actions .header-cta, .site-header .header-actions .header-demo { display: none; }
  html:not([lang="ja"]) .mobile-sticky-cta a { font-size: 13px; line-height: 1.2; padding: 6px 10px; white-space: normal; text-align: center; }
}

/* 3. 言語切替 */
.lang-switch { position: relative; margin: 0; font-size: 0.85rem; }
.lang-switch > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 12px;
  border: 1px solid var(--accent-border, #c9dcf3); border-radius: 999px;
  background: #fff; color: var(--accent-ink, #2a578f);
  font-weight: 700; cursor: pointer; white-space: nowrap; user-select: none;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover, .lang-switch[open] > summary { background: var(--accent-soft, #edf4ff); }
.lang-switch > summary:focus-visible { outline: 2px solid var(--accent, #3d72b4); outline-offset: 2px; }
.lang-switch > ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 11em; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--accent-border, #c9dcf3); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 21, 34, 0.14);
}
.lang-switch > ul li a {
  display: block; padding: 8px 12px; border-radius: 10px;
  color: var(--ink, #101522); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.lang-switch > ul li a:hover { background: var(--accent-soft, #edf4ff); color: var(--accent-ink, #2a578f); }
.lang-switch > ul li a[aria-current="true"] { background: var(--accent-soft, #edf4ff); color: var(--accent-ink, #2a578f); }
.lang-switch > ul li a[aria-current="true"]::after { content: " ✓"; }
.lang-switch > ul li a[lang="ko"] { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
.lang-switch > ul li a[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
.lang-switch > ul li a[lang="zh-TW"] { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; }
@media (max-width: 860px) {
  .site-header .container { gap: 12px; }
  .lang-switch { margin-left: auto; }
  .lang-switch > summary { min-height: 34px; padding: 4px 8px; font-size: 0.8rem; gap: 4px; }
  .lang-switch > ul { right: -8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lang-switch > ul { animation: lang-switch-in 160ms ease-out; }
  @keyframes lang-switch-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}