/* ============================================================
   shohan-navchrome.css — 遷移フラッシュ対策(領域別 初回ペイント下地) batch5 v2
   ------------------------------------------------------------
   ★ CSSのみ・JS無改変。app-nav(サイドバー)を持つシェルにのみリンク
     (register/forgot/login 等サイドバー無しページには付けない=誤発火防止)。
   仕組み: モジュール間ナビは実ナビ(文書リロード)で紺サイドバーは app-nav.js が
     JS後描画。新文書の初回ペイントで地色/テーマ色が紺サイドバー領域に出て
     navy→地色→navy のチラつき。body.sh-root は静的=初回ペイントで存在するので、
     紺サイドバー幅ぶんだけ navy の「帯」を background-image で重ね、常に紺を保つ。
   ★ 重要:
     - shorthand(background) は使わず background-image のみ。これで mt-on の
       テーマ地色(module-theme.css:9 body.mt-on{background:var(--mt-page)!important})の
       background-COLOR を壊さず、コンテンツ領域はテーマ色のまま、左の帯だけ紺にする。
     - セレクタは `html body.sh-root`(特異度 0,1,2)で body.mt-on(0,1,1)に勝たせる。
     - 帯の右側は transparent ＝ 背景色(テーマ色 or 地色)が透ける。
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  html body.sh-root {
    min-height: 100vh;
    background-image: linear-gradient(to right,
      var(--sh-side-bg, #0F2451) 0, var(--sh-side-bg, #0F2451) 76px,
      transparent 76px) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
}
@media (min-width: 1024px) {
  html body.sh-root {
    min-height: 100vh;
    background-image: linear-gradient(to right,
      var(--sh-side-bg, #0F2451) 0, var(--sh-side-bg, #0F2451) var(--sh-sidebar-w, 240px),
      transparent var(--sh-sidebar-w, 240px)) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
  /* PC折畳(76px)= app-nav が mount 前に html.sh-nav-collapsed-pre 付与 */
  html.sh-nav-collapsed-pre body.sh-root,
  html body.sh-nav-collapsed.sh-root {
    background-image: linear-gradient(to right,
      var(--sh-side-bg, #0F2451) 0, var(--sh-side-bg, #0F2451) 76px,
      transparent 76px) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
}

/* ============================================================
   [floatnav0825] 段階B: 浮遊下部ナビ(Liquid Glass方向・スマホのみ)
   下部タブを「貼り付いた棒」から「浮いた半透明の板」へ。
   コンテンツはガラスの下を透けてスクロールする。
   app-nav.js注入styleの !important に勝つため html body で特異度を上げる。
   ============================================================ */
@media (max-width: 767px) {
  /* [flushnav0908] 森さん「下についててほしい」: 浮いた板ではなく画面下端に貼り付ける(角丸は上だけ・ガラス感は維持) */
  html body .sh-bottom-tab {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0;
    height: calc(var(--sh-tabbar-h, 72px) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-top: 1px solid rgba(15, 36, 81, .08) !important;
    border-radius: 20px 20px 0 0;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 8px 32px rgba(15, 36, 81, .22), inset 0 1px 0 rgba(255, 255, 255, .65);
    z-index: 60;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body .sh-bottom-tab {
      background: rgba(255, 255, 255, .6) !important;
      -webkit-backdrop-filter: blur(14px) saturate(1.5);
      backdrop-filter: blur(14px) saturate(1.5);
    }
  }
  /* 最後の項目がガラスの下に隠れないよう、コンテンツ下端に余白 */
  html body .sh-content {
    padding-bottom: calc(var(--sh-tabbar-h, 72px) + 16px + env(safe-area-inset-bottom, 0px)) !important;   /* [flushnav0908] */
  }
  /* ダークモード時のガラス面(トークンのみ・本格対応は後回し方針どおり) */
  html[data-theme="dark"] body .sh-bottom-tab {
    background: rgba(14, 20, 38, .6) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
}

/* ============================================================
   [bootcalm0825] モジュール起動時のがたつき対策(森さん報告0825)
   原因: app-nav.js が mount時に body全体を .sh-content へ包み直し、
   紺の静的 .app-bar を白い .sh-mobile-topbar/.sh-topbar に差し替える
   =初回ペイント→mount の一瞬で色と高さが跳ぶ。
   対策: mount前(body.sh-root がまだ .has-sh-nav を持たない間)だけ、
   静的 .app-bar を「最終形のトップバーの見た目(白・56px・下線)」に寄せる。
   mount後は app-nav 側の既存ルール(comm-styles: body.has-sh-nav .app-bar{display:none})に完全に戻る。
   ============================================================ */
html body.sh-root:not(.has-sh-nav) .app-bar {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--sh-line, #E5E8EE);
  height: 56px;
  min-height: 56px;
  box-sizing: border-box;
  box-shadow: none !important;
}
/* 中身(紺バー用の白文字ロゴ等)は白地では読めないので mount まで伏せる */
html body.sh-root:not(.has-sh-nav) .app-bar h1,
html body.sh-root:not(.has-sh-nav) .app-bar .nav-link,
html body.sh-root:not(.has-sh-nav) .app-bar .chip,
html body.sh-root:not(.has-sh-nav) .app-bar .spacer { visibility: hidden; }

/* ============================================================
   [hdrfloat0901] ヘッダーバーが浮いて動く対策(森さん報告0901)
   原因: .sh-content のスクロールが端に達すると WebView 本体へ
   チェーンし、iOSのラバーバンドで画面全体(ヘッダー含む)が動く。
   対策: ルートのオーバースクロールを止め、コンテンツ側は contain。
   浮遊感(下部ナビのガラス・タップの手応え)は変更しない。
   ============================================================ */
html, body {
  overscroll-behavior: none;
}
html body .sh-content {
  overscroll-behavior: contain;
}

/* ============================================================
   [tabgutter0901] タブ切替の「画面全体がガタッ」対策(森さん報告0901 PC)
   原因: タブ切替の瞬間だけ中身が短くなり .sh-content の縦スクロール
   バーが消える → 内容幅が約15px変わり、レイアウト全体が横に揺れる
   (実測: clientWidth 716↔731px)。PCの実スクロールバー環境のみで発生。
   対策: スクロールバー分の幅を常時確保して幅を不変にする。
   スマホ/タブレットはオーバーレイ式スクロールバーで元々揺れないため対象外。
   ============================================================ */
@media (min-width: 768px) {
  html body .sh-content {
    overflow-y: scroll !important;              /* 旧ブラウザ: 常にトラックを出して幅固定 */
  }
  @supports (scrollbar-gutter: stable) {
    html body .sh-content {
      overflow-y: auto !important;              /* 新ブラウザ: 空トラックは見せず幅だけ確保 */
      scrollbar-gutter: stable;
    }
  }
}