/* キャッシュされた base.css に依存せず効かせるため、 ヘッダーのレイアウト要点を
     インライン <style> に持つ（HTML は毎回新鮮に取得されるため確実）。 */

  /* ===== V27 リデザイン (TOP Source.html 踏襲): 高さ4.25rem・半透明ネイビー+blur・
     ナビは角丸ホバー / アクティブ金下線・認証はゴールドピル ===== */
  :root { --topbar-h: 4.25rem; }
  .app-topbar {
    /* z-index: ドロップダウンメニューを後続コンテンツより前面に出す (これが無いと
       メニューがコンテンツの下に描画され、 クリック不能 + 透けて見える) */
    position: relative; z-index: 100;
    background: rgba(24, 42, 68, 0.92);
    backdrop-filter: blur(0.875rem); -webkit-backdrop-filter: blur(0.875rem);
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.11);
    box-shadow: none;
  }
  .app-topbar-inner {
    /* ページ全体の幅 = 120rem (パディング込み) に統一 */
    max-width: 120rem; margin: 0 auto; box-sizing: border-box;
    padding: 0 2rem; gap: 1.5rem;
  }
  .app-topbar-logo-img { height: 2.625rem; }
  .app-topbar-brand { margin-right: 0.5rem; }
  .app-topbar-nav { gap: 0.25rem; }
  .app-topbar-nav-item {
    padding: 0.5rem 0.875rem; border-radius: 0.5rem;
    color: #8FA0B5; font-size: 0.86rem; font-weight: 700;
    transition: color .15s, background .15s;
  }
  .app-topbar-nav-item:hover { color: #F2F5F9; background: rgba(255,255,255,0.05); }
  .app-topbar-nav-item.active { color: #E8CE8C; }
  .app-topbar-nav-item.active::after {
    left: 0.875rem; right: 0.875rem; bottom: 0.125rem; height: 0.125rem;
    background: #C9A85C; border-radius: 0.0625rem;
  }
  /* 認証リンク (ログイン / アカウント) はゴールドピル */
  .app-topbar-auth > .app-topbar-nav-item,
  .app-topbar-auth .app-acct-trigger {
    border: 0.0625rem solid rgba(201,168,92,0.45); border-radius: 62.4375rem;
    padding: 0.5rem 1.125rem; color: #E8CE8C; font-size: 0.8rem; font-weight: 700;
  }
  .app-topbar-auth > .app-topbar-nav-item:hover,
  .app-topbar-auth .app-acct-trigger:hover { background: rgba(201,168,92,0.14); color: #E8CE8C; }
  .app-topbar-auth .app-acct-trigger.active::after { display: none; }
  .app-topbar-auth > .app-topbar-nav-item.active::after { display: none; }
  @media (max-width: 768px) {
    :root { --topbar-h-mobile: 3.5rem; }
    .app-topbar-inner { padding: 0 0.75rem; gap: 0.5rem; }
    .app-topbar-logo-img { height: 2.25rem; }
  }

  .app-topbar-nav { flex: 1 1 auto; min-width: 0; }
  .app-topbar-auth { margin-left: auto; display: inline-flex; align-items: center; gap: 0.125rem; flex-shrink: 0; }
  /* アカウントラベル切替: PC=アカウント名さん / モバイル=マイページ
     (base を media より前に置く = 後勝ちで media を打ち消さない) */
  .app-acct-label-sp { display: none; }
  @media (max-width: 768px) {
    .app-topbar-nav { display: none; }
    /* 三本線（ハンバーガー）はロゴの左端へ */
    .app-topbar-hamburger { order: -1; margin-left: 0; margin-right: 0.125rem; }
    /* 右端にはログイン or アカウントを表示 */
    .app-topbar-auth { display: inline-flex; margin-left: auto; }
    .app-topbar-auth .app-topbar-nav-item {
      padding: 0.375rem 0.5rem; font-size: .88rem;
      max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* モバイルはホバー不可のためドロップダウンは出さず、 タップでマイページへ直行 */
    .app-acct-menu { display: none !important; }
    .app-acct-caret { display: none; }
    /* ラベル切替: モバイルは「マイページ」 (直行先と一致させる) */
    .app-acct-label-pc { display: none; }
    .app-acct-label-sp { display: inline; }
  }
  /* アカウント ドロップダウン（ログイン後・デスクトップ）。
     V27: ホバーではなくクリックで開閉 (.open は JS が付与)・配色はダークネイビー×ゴールド */
  .app-acct { position: relative; }
  .app-acct-trigger { display: inline-flex; align-items: center; }
  .app-acct-caret { width: 0.8125rem; height: 0.8125rem; margin-left: 0.25rem; transition: transform .15s; }
  .app-acct.open .app-acct-caret { transform: rotate(180deg); }
  .app-acct-menu {
    position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 12.25rem; padding: 0.375rem;
    background: #182A44;
    border: 0.0625rem solid rgba(201, 168, 92, 0.35); border-radius: 0.75rem;
    box-shadow: 0 0.875rem 2.25rem rgba(7, 14, 27, .5); z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(0.3125rem);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .app-acct.open .app-acct-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .app-acct-mi {
    display: flex; align-items: center; gap: 0.5625rem; width: 100%; box-sizing: border-box;
    padding: 0.625rem 0.8125rem; font-size: .88rem; font-weight: 700; color: #F2F5F9; text-decoration: none;
    background: none; border: 0; border-radius: 0.5rem; cursor: pointer; text-align: left; font-family: inherit;
    transition: background .15s, color .15s;
  }
  .app-acct-mi:hover { background: rgba(201, 168, 92, 0.14); color: #E8CE8C; }
  .app-acct-mi svg { width: 1rem; height: 1rem; color: #8FA0B5; flex-shrink: 0; }
  .app-acct-mi:hover svg { color: #E8CE8C; }
  .app-acct-logout-form { margin: 0; }
  .app-acct-sep { height: 0.0625rem; background: rgba(255, 255, 255, 0.11); margin: 0.3125rem 0.375rem; }