/* 2026-10-21 スマホのヘッダー（LED 平台 led.hodokuai.jp の作りを参考に・周さん。色は PVMarket のまま）
   ・ヘッダーはロゴと三本線だけ（未ログインはログイン／新規登録も）。② の帯・メッセージ・アカウントはメニューの中へ
   ・メニューは本文を押し下げず、ヘッダーの下に重ねて開く
   ・カルテ（workspace_base）は v2-shell.css を読まず、三本線が 14×4px の点になって見えなかったので、ここで両方に同じ形を持つ
   base.html の最後に読む。workspace-shell.css / app-light-theme.css の body 付きの規則より強くするため、
   すべて body .v2-topnav[data-v2-shell] から書く。PC（768px 以上）は .v2-m-only を隠すだけで、見た目は変えない */

body .v2-topnav[data-v2-shell] .v2-m-only { display: none; }

@media (max-width: 767px) {
  body .v2-topnav[data-v2-shell] { position: sticky; top: 0; background: var(--pv-surface); backdrop-filter: none; }
  body .v2-topnav[data-v2-shell] .v2-topnav-inner { position: relative; flex-wrap: nowrap; gap: var(--pv-sp-2);
    min-height: 54px; padding: 0 var(--pv-sp-3) 0 var(--pv-sp-4); }
  body .v2-topnav[data-v2-shell] .v2-brand { min-width: 0; }

  /* ② の帯は隠す（中身はメニューの「発電所管理」に出る）。ログイン中はメッセージとアカウントもメニューへ */
  body .v2-topnav[data-v2-shell] .v2-managebar,
  body .v2-topnav[data-v2-shell] .v2-icon-btn,
  body .v2-topnav[data-v2-shell] .v2-user-menu { display: none; }
  body .v2-topnav[data-v2-shell] .v2-topnav-actions { order: 2; margin-left: auto; gap: var(--pv-sp-2); }

  /* 未ログイン: ログイン／新規登録を 1 行に（カルテでは字が 2 行に折れていた） */
  body .v2-topnav[data-v2-shell] .v2-nav-ghost,
  body .v2-topnav[data-v2-shell] .v2-nav-cta { white-space: nowrap; font-size: 13px; }
  body .v2-topnav[data-v2-shell] .v2-nav-ghost { padding: 6px 4px; }
  body .v2-topnav[data-v2-shell] .v2-nav-cta { padding: 7px 12px; }

  /* 三本線: 40px の枠付きの四角。開くと × */
  body .v2-topnav[data-v2-shell] .v2-nav-toggle { order: 3; position: relative; display: inline-flex; flex-direction: column;
    justify-content: center; gap: 4px; width: 40px; height: 40px; margin-left: 0; padding: 0 10px; flex: none;
    border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); background: var(--pv-surface); cursor: pointer; }
  body .v2-topnav[data-v2-shell] .v2-nav-toggle-bar { display: block; width: 18px; height: 2px; margin: 0 auto;
    background: var(--pv-ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
  body .v2-topnav[data-v2-shell].is-mobile-open .v2-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body .v2-topnav[data-v2-shell].is-mobile-open .v2-nav-toggle-bar:nth-child(2) { opacity: 0; }
  body .v2-topnav[data-v2-shell].is-mobile-open .v2-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  /* 未読のメッセージがあるときは三本線に小さな点（メッセージの印がヘッダーから消えるので） */
  body .v2-topnav[data-v2-shell] .v2-nav-toggle[data-unread]::after { content: ""; position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--pv-danger); box-shadow: 0 0 0 2px var(--pv-surface); }

  /* メニュー: ヘッダーの直下に重ねる。長いときはメニューの中だけスクロール */
  body .v2-topnav[data-v2-shell] .v2-primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    order: 4; flex-direction: column; align-items: stretch; gap: 0; width: auto; margin: 0; padding: var(--pv-sp-1) 0 var(--pv-sp-2);
    max-height: calc(100vh - 54px); max-height: calc(100dvh - 54px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--pv-surface); border-top: 1px solid var(--pv-border); border-bottom: 1px solid var(--pv-border);
    box-shadow: var(--pv-shadow); }
  body .v2-topnav[data-v2-shell].is-mobile-open .v2-primary-nav { display: flex; }
  /* 高さを切った縦の flex。行が縮まないようにして、長いときはスクロールさせる（運営は 16 行ある） */
  body .v2-topnav[data-v2-shell] .v2-primary-nav > * { flex-shrink: 0; }
  body .v2-topnav[data-v2-shell] .v2-m-only { display: block; }

  body .v2-topnav[data-v2-shell] .v2-primary-nav .v2-nav-link { display: block; margin: 0; padding: 13px var(--pv-sp-5);
    border: 0; border-top: 1px solid var(--pv-border); border-radius: 0; background: none;
    font-size: 15px; font-weight: 500; color: var(--pv-ink-2); text-decoration: none; white-space: normal; }
  body .v2-topnav[data-v2-shell] .v2-primary-nav .v2-nav-link.is-active { color: var(--pv-green-700); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--pv-green-700); background: var(--pv-green-50); }
  body .v2-topnav[data-v2-shell] .v2-primary-nav .v2-nav-link.v2-m-hide { display: none; }
  body .v2-topnav[data-v2-shell] .v2-primary-nav .v2-m-sub { padding-left: calc(var(--pv-sp-5) + var(--pv-sp-3)); }

  /* 区切りの見出し（発電所管理・アカウント） */
  body .v2-topnav[data-v2-shell] .v2-m-h { margin: 0; padding: var(--pv-sp-3) var(--pv-sp-5) var(--pv-sp-1);
    border-top: 1px solid var(--pv-border); font-size: var(--pv-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--pv-muted); }
  body .v2-topnav[data-v2-shell] .v2-m-h:first-child { border-top: 0; }
  body .v2-topnav[data-v2-shell] .v2-m-who { margin: 0; padding: 0 var(--pv-sp-5) var(--pv-sp-2); font-size: 13px; color: var(--pv-ink-2);
    overflow-wrap: anywhere; }
  body .v2-topnav[data-v2-shell] .v2-m-who span { display: block; font-size: 12px; color: var(--pv-muted); }
  body .v2-topnav[data-v2-shell] .v2-m-count { display: inline-block; min-width: 20px; margin-left: var(--pv-sp-1); padding: 0 6px;
    border-radius: 999px; background: var(--pv-danger); color: var(--pv-surface); font-size: 12px; font-weight: 700; text-align: center; }
}

/* 320px 前後の小さい画面で、未ログインのログイン／新規登録が字のロゴに重なった（審査の指摘で確認）。マークだけにする */
@media (max-width: 360px) {
  body .v2-topnav[data-v2-shell] .v2-topnav-inner:has(.v2-nav-ghost) .pv-brand-stack { display: none; }
}

/* ── 首页・検索・市場などのヘッダー（marketing_header_v9 / .p9-header-main）も同じ形に（2026-10-21 周さん「首页、搜索、市场的页头也改」）──
   このヘッダーは 860px 未満で三本線になる（home-v9-peach.css）ので、境目はそちらに合わせて 859px。
   ログイン中は ✉ と頭文字の丸をヘッダーから外し、メニューの「アカウント」に入れる。
   メニューの中身と並びはアプリのヘッダーと同じ部品（partials/nav_mobile_menu.html）。 */
body .p9-header-main .p9-m-only { display: none; }

@media (max-width: 859px) {
  body .p9-header-main .p9-header-main-inner { position: relative; min-height: 54px; padding-top: 0; padding-bottom: 0; }
  body .p9-header-main .p9-brand { min-width: 0; }
  body .p9-header-main .p9-msg-link,
  body .p9-header-main .p9-user-menu { display: none; }
  body .p9-header-main .p9-btn { white-space: nowrap; }

  /* 三本線: 40px の四角（アプリ側と同じ大きさ）。開くと × */
  body .p9-header-main .p9-burger { position: relative; width: 40px; height: 40px; flex: none;
    border-color: var(--pv-border); border-radius: var(--pv-radius-sm); }
  body .p9-header-main .p9-burger span { transition: transform .2s, opacity .2s; }
  body .p9-header-main.is-nav-open .p9-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body .p9-header-main.is-nav-open .p9-burger span:nth-child(2) { opacity: 0; }
  body .p9-header-main.is-nav-open .p9-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  body .p9-header-main .p9-burger[data-unread]::after { content: ""; position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--pv-danger); box-shadow: 0 0 0 2px var(--pv-surface); }

  /* メニュー: 長いとき（ログイン中は 15 行ほど）はメニューの中だけスクロール */
  body .p9-header-main.is-nav-open .p9-nav { max-height: calc(100vh - 54px); max-height: calc(100dvh - 54px - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--pv-border); }
  /* PC 用の justify-content: center のままだと、はみ出した分が上にも逃げて「発電所管理」「概況」へスクロールで戻れない */
  body .p9-header-main.is-nav-open .p9-nav { justify-content: flex-start; }
  body .p9-header-main.is-nav-open .p9-nav > * { flex-shrink: 0; }
  body .p9-header-main.is-nav-open .p9-nav > .p9-nav-link { padding: 13px var(--pv-sp-5); font-size: 15px; font-weight: 500;
    color: var(--pv-ink-2) !important; border-bottom: 0; border-top: 1px solid var(--pv-border); }
  body .p9-header-main.is-nav-open .p9-nav > .p9-nav-link:first-child { border-top: 0; }
  /* 選んでいる所: PC の下線ではなく、左の緑の線（アプリ側と同じ） */
  body .p9-header-main.is-nav-open .p9-nav > .p9-nav-link--active { padding-bottom: 13px; border-bottom: 0;
    color: var(--pv-green-700) !important; font-weight: 700; background: var(--pv-green-50); box-shadow: inset 3px 0 0 var(--pv-green-700); }
  body .p9-header-main.is-nav-open .p9-nav > .p9-nav-link--talk { color: var(--pv-green-700) !important; font-weight: 700; }
  body .p9-header-main.is-nav-open .p9-nav > .p9-nav-link.p9-m-hide { display: none; }
  body .p9-header-main .p9-m-only { display: block; }
  body .p9-header-main.is-nav-open .p9-nav > .p9-m-sub { padding-left: calc(var(--pv-sp-5) + var(--pv-sp-3)); }

  body .p9-header-main .p9-m-h { margin: 0; padding: var(--pv-sp-3) var(--pv-sp-5) var(--pv-sp-1);
    border-top: 1px solid var(--pv-border); font-size: var(--pv-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--pv-muted); }
  body .p9-header-main .p9-m-h:first-child { border-top: 0; }
  body .p9-header-main .p9-m-who { margin: 0; padding: 0 var(--pv-sp-5) var(--pv-sp-2); font-size: 13px; color: var(--pv-ink-2);
    overflow-wrap: anywhere; }
  body .p9-header-main .p9-m-who span { display: block; font-size: 12px; color: var(--pv-muted); }
  body .p9-header-main .p9-m-count { display: inline-block; min-width: 20px; margin-left: var(--pv-sp-1); padding: 0 6px;
    border-radius: 999px; background: var(--pv-danger); color: var(--pv-surface); font-size: 12px; font-weight: 700; text-align: center; }
}

/* 320px 前後: 未ログインのログイン／新規登録・三本線で 332px になり、三本線が「新規登録」に重なっていた。マークだけにする */
@media (max-width: 360px) {
  body .p9-header-main .p9-header-main-inner:has(.p9-btn--ghost) .pv-brand-stack { display: none; }
}