/* ============================================
   UNIFIED HEADER — スキャンサイト全ページ共通の唯一のソース
   locahun3d.com(オンライン版) site-header.tsx と数値パリティ。
   ⚠このファイルだけを編集すること。各HTMLへのコピーは禁止
     (以前はページ毎にコピーされ3系統へdriftし、文字サイズ/幅がページで変わる不具合が発生した)。
   切替幅1200pxは両サイト共通。変更時は必ずオンライン版も同時に。
   検証: locahun3d_online/scripts/header-parity.mjs + ui-audit.mjs + scripts/sync_header.py --check
   ============================================ */
/* ============================================
   UNIFIED HEADER — matches locahun3d.com
   ============================================ */
/* 継承の遮断: ページ本文の letter-spacing / line-height / font-family が
   ヘッダーへ漏れると、同じCSSでもページ毎に文字幅・ヘッダー高が変わる
   （実測: nav幅 360.0/368.2/375.4px、モバイル総高 75.7/77.3/78.4px の3〜4系統）。
   ヘッダーは常にここで定義した値だけで描画されること。 */
.site-header{font-family:'Noto Sans JP',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:normal;line-height:1.5;
  position:fixed;top:0;left:0;right:0;z-index:1050;
  height:64px;background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 max(48px, calc((100vw - 1440px) / 2))}
.site-header .sh-left{flex:1;min-width:0;display:flex;align-items:center;gap:16px}
.site-header .sh-left nav{display:flex;align-items:center;gap:16px}
.site-header .sh-left nav a{display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:300;color:rgba(255,255,255,.62);text-decoration:none;
  white-space:nowrap;transition:color .2s}
.site-header .sh-left nav a:hover{color:#fafaf6}
/* 番号コードの表示可否は下部の @media(max-width:1439px) が唯一の担当。
   ここで display を指定しない（過去、ベースで display:none にして全幅で消え、
   オンライン版=1440px以上で表示 とのパリティが崩れた）。 */
.site-header .sh-left nav a .code{font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.2em;opacity:.5;transition:color .2s,opacity .2s}
.site-header .sh-left nav a:hover .code{color:var(--accent);opacity:1}
.site-header .sh-center{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-header .sh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.site-header .sh-brand svg{flex:none}
.site-header .sh-brand-text{font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:18px;letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.site-header .sh-toggle{display:flex;align-items:stretch;
  font-family:'Noto Sans JP',sans-serif;font-weight:900;font-size:11px;letter-spacing:.06em;margin-left:4px}
.site-header .sh-toggle a,.site-header .sh-toggle span{padding:4px 12px;
  border:1px solid rgba(255,255,255,.18);text-decoration:none;transition:background .2s,color .2s}
.site-header .sh-toggle span+a,.site-header .sh-toggle a+span{border-left:0}
.site-header .sh-toggle .sh-active{background:rgba(255,180,84,.12);border-color:rgba(255,180,84,.5);color:#ffb454}
.site-header .sh-toggle a:not(.sh-active){color:var(--ink)}
.site-header .sh-toggle a:not(.sh-active):hover{background:rgba(94,200,232,.15);color:#5ec8e8;border-color:rgba(94,200,232,.5)}
/* トグル各セルは常に自サービス色ボーダー50%（オンライン版と共通の状態規則） */
.site-header .sh-toggle:not(.sh-lang) a:not(.sh-active){border-color:rgba(94,200,232,.5)}
/* ENチップ: オンライン版 LangToggle と同スタイル (JetBrains Mono / 薄グレー) に統一 */
.site-header .sh-toggle.sh-lang a{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:300;letter-spacing:.12em;padding:4px 8px;color:rgba(255,255,255,.62)}
.site-header .sh-toggle.sh-lang a:hover{color:var(--accent);border-color:var(--accent);background:none}
.site-header .sh-right{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.site-header .sh-right a{font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:6px 16px;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.site-header .sh-btn-ghost{border:1px solid var(--line);color:var(--ink)}
.site-header .sh-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.site-header .sh-btn-accent{border:1px solid var(--accent);color:var(--accent)}
.site-header .sh-btn-accent:hover{background:var(--accent);color:var(--bg)}
.site-header .sh-user{display:none;align-items:center;gap:10px}
.site-header .sh-user-avatar{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--accent);object-fit:cover;cursor:pointer}
.site-header .sh-user-name{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--ink);white-space:nowrap}

@media(max-width:1199px){
  /* 2段ヘッダー — locahun3d.com(オンライン版) site-header.tsx のモバイル値と1:1で共通化。
     切替幅 1200px もオンライン版 min-[1200px] と同一（両サイト同時変更が必須）。
     変更時は必ず両サイト同時に。パリティ検査 = locahun3d_online/scripts/header-parity.mjs */
  .site-header{height:auto;min-height:0;padding:0 16px;flex-wrap:wrap}
  .site-header .sh-center{order:1;flex:1 0 100%;justify-content:flex-start;gap:4px;height:48px}
  .site-header .sh-center .sh-lang{margin-left:auto!important}
  .site-header .sh-brand{gap:4px}
  .site-header .sh-brand svg{width:18px;height:18px}
  .site-header .sh-brand-text{font-size:13px;letter-spacing:.01em}
  .site-header .sh-toggle{font-size:8px;letter-spacing:.02em;margin-left:0}
  .site-header .sh-toggle a,.site-header .sh-toggle span{padding:2px 4px;white-space:nowrap}
  .site-header .sh-toggle.sh-lang a{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:300;letter-spacing:.04em;padding:2px 4px;color:rgba(255,255,255,.62)}
  .site-header .sh-left{order:2;flex:1 0 100%;justify-content:center;padding-bottom:8px}
  .site-header .sh-left nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px}
  .site-header .sh-left nav a{font-size:11px}
  .site-header .sh-left nav a .code{display:none}
  .site-header .sh-right{display:none}
  .site-header .sh-user-name{display:none}}
.site-header .sh-left nav a:focus-visible{color:#fafaf6}

@media(max-width:359px){
  .site-header .sh-center{gap:2px}
  .site-header .sh-brand-text{font-size:11px}
  .site-header .sh-toggle{font-size:7px}
  .site-header .sh-toggle a,.site-header .sh-toggle span{padding:2px 3px}
  .site-header .sh-toggle.sh-lang a{font-size:9px;padding:2px 4px}}

/* タブレット帯(768-1199px): スマホ極小サイズのままだと余白だらけで崩れて
   見えるため中間サイズへ拡大。locahun3d.com site-header.tsx の min-[768px]:
   値と1:1（変更時は両サイト同時に。検査=header-parity.mjs）。 */
@media(min-width:768px) and (max-width:1199px){
  .site-header .sh-center{height:56px;gap:8px}
  .site-header .sh-brand{gap:8px}
  .site-header .sh-brand-text{font-size:16px}
  .site-header .sh-toggle{font-size:10px;letter-spacing:.04em}
  .site-header .sh-toggle a,.site-header .sh-toggle span{padding:4px 8px}
  .site-header .sh-toggle.sh-lang a{font-size:10px;letter-spacing:.08em;padding:3px 6px}
  .site-header .sh-left nav{gap:6px 24px}
  .site-header .sh-left nav a{font-size:13px}
  .site-header .sh-left{padding-bottom:10px}}

/* ナビ番号コード(0.1〜0.4)は 1560px 以上でのみ表示する。
   実測の根拠: .site-header の padding は max(48px, calc((100vw - 1440px)/2)) なので
   ヘッダー内容幅は「ビューポート1536px以上」で1440pxに到達して頭打ちになる。
   コードを出すとナビが伸び、1440〜1535px では日本語4項目が中央ブランドに衝突する
   （実測: 1440pxでナビ→ブランド間が works で −6.5px＝重なり）。
   1560px以上なら +41〜57px の余裕があり安全に表示できる。
   オンライン版は1440px以上で表示（英字ラベルで収まるため）。閾値だけが異なる。
   ラベルを伸ばす時はこの閾値の再実測が必要。 */
.site-header .sh-left nav a .code{display:none}
@media(min-width:1560px){
  .site-header .sh-left nav a .code{display:inline}
}