/* 共通ヘッダ・フッタ（/d/ と /events/）。各ページのトークン（--teal 等）を前提にする。
   紺のバーはプロジェクトサイト（A）と同じ #004455。金のボタン＝案内メールの無料登録、
   という色の役割は A の規約に合わせる（同じ見た目のボタンに別の行き先を割り当てない）。 */
:root{ --gold:#C0962F; --gold-ink:#1f2d31; }

.topbar .in{ position:relative; }

/* ブランド＝プロジェクトのワードマーク（A と同じ logo-mincho の白版）＋「ライブラリー」。
   **所属をここで見せる。** `<title>` に「｜AI戦略実践プロジェクト」まで足すと、
   検索結果でもタブでも後ろが切れて読まれないので、名前は短いまま header で関係を示す。
   各ページの CSS にも `.brand` があるので、詳細度を上げて（`.topbar .brand`）上書きする。 */
.topbar .brand{ gap:10px; }
.topbar .brand .wm{ height:26px; width:auto; display:block; flex:none; }
.topbar .brand .bn{ font-size:14px; font-weight:700; letter-spacing:.02em;
  padding-left:10px; border-left:1px solid rgba(255,255,255,.3); }
@media (max-width:480px){
  .topbar .brand{ gap:7px; }
  .topbar .brand .wm{ height:21px; }
  .topbar .brand .bn{ font-size:12.5px; padding-left:7px; }
}
.gnav{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px;
  font-size:11.5px; }
.gnav a{ color:#C9DCE1; text-decoration:none; }
.gnav a:hover{ color:#fff; text-decoration:underline; }
.gnav .sp{ flex:1 1 auto; }
.gnav .cta{ display:inline-block; background:var(--gold); color:var(--gold-ink); font-weight:700;
  border-radius:6px; padding:4px 12px; font-size:11.5px; white-space:nowrap; }
.gnav .cta:hover{ background:#d4a83a; text-decoration:none; }
@media (min-width:880px){
  .gnav{ position:absolute; right:0; top:0; margin-top:0; }
}

.sitefoot{ max-width:1100px; margin:8px auto 40px; padding:14px 14px 0; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.8; }
.sitefoot .who{ font-weight:700; color:var(--teal); }
.sitefoot .links{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px; }
.sitefoot a{ color:var(--teal); }
.sitefoot .note{ margin-top:6px; font-size:11px; }

/* 発言録の下に置く「講義を読む」リンク */
.ctxlink{ display:inline-block; margin:2px 0 8px; font-size:11.5px; font-weight:700;
  color:var(--teal); text-decoration:none; }
.ctxlink:hover{ text-decoration:underline; }
.ctxlinks{ display:flex; flex-wrap:wrap; gap:0 16px; align-items:baseline; }

/* 論点から、その場面（メンバースペース）へ。押すとサインインを求められるので「メンバー」を添える */
.memberlink{ display:inline-flex; align-items:center; gap:6px; margin:2px 0 8px; font-size:11.5px; font-weight:700;
  color:var(--teal); text-decoration:none; }
.memberlink:hover{ text-decoration:underline; }
.memberlink .mb{ font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px;
  border:1px solid currentColor; line-height:1.5; }

/* ページ末尾の「関連する日」 */
.related{ margin-top:18px; }
.related .rl a{ display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:9px; padding:9px 13px; margin-bottom:7px; text-decoration:none; color:var(--ink); }
.related .rl .dt{ font-size:12.5px; font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; }
.related .rl .hd{ font-size:12px; line-height:1.65; margin-top:2px; }
.related .rl .sh{ font-size:10.5px; color:var(--muted); margin-top:3px; }


/* タブの高さ ―― 触る部品は 44px
 *
 * 各面の CSS は `padding:8px 18px / 12.5px` で、高さが約34px しか無い。
 * メンバースペース（`ai-strategy-account`）は入力と操作の面なので 44px が要り、
 * 揃えないと「同じ上部バー」に見えない（共通デザイン検証モック 2026-09-22）。
 *
 * **ここに置くのは、タブの定義が5面の CSS に散っているから。** 下の「詰め方」と
 * 同じ理由——散らすと片面だけ直され続ける。`.topbar .tabs a` は各面の `.tabs a`
 * より詳細度が高いので、5ファイルを触らずにここ1か所で効く。
 *
 * 横の余白は各面のまま（`/d/` だけ 22px で他より広い）。変えるのは縦だけ。
 * `box-sizing:border-box` なので min-height がそのまま見た目の高さになる。 */
.topbar .tabs a{ display:flex; align-items:center; justify-content:center;
  min-height:44px; padding-top:0; padding-bottom:0; }

/* タブ（携帯幅）
 *
 * タブが5つになってから、狭い画面では一行に収まらなくなった。各ページの CSS で
 * 折り返すようにしてあるが、`/d/` は左右の余白が広いぶん 360px で3行に割れる。
 * ヘッダだけで画面の半分近くを使ってしまうので、狭い画面では詰めて2行に収める。
 *
 * ここに置くのは、4面（今日・セッションの記録・用語集・AI関連イベント）で
 * 同じ見え方にするため ―― タブの定義は各ページの CSS に散っているので、
 * 詰め方まで散らすと片面だけ直され続ける。 */
@media(max-width:430px){
  .topbar .tabs{ gap:3px; margin-top:6px; }
  /* 携帯だけ 40px に下げる（2026-09-23 実機FB）。
     ここは**2段**になるので、1px の差が2倍で効く。44→40 で8px 戻る。
     タブは押し外しても隣の面に行くだけで取り返しがつく——同じ画面にある
     金のCTA（申し込み）とは性質が違うので、ここを先に削る。 */
  .topbar .tabs a{ padding:7px 10px; font-size:12px; flex:1 1 auto; text-align:center;
    min-height:40px; }
}

/* ヘッダの縦を詰める（携帯・2026-09-23 実機FB）
 *
 * 実測（360px・`/d/`）: 合計 217px のうち
 *   上余白12 ／ ブランド21 ／ サブ21 ／ gnav 61 ／ タブ102。
 *
 * **いちばん効いていたのは `.sp` だった。** 右寄せ用のスペーサーは `flex:1 1 auto` の
 * flex アイテムなので、折り返す幅では**それ自体が1行を占める**。実測で gnav が
 * 3行（リンク／スペーサー／CTA）になり、430px（CTA が収まる幅）の 28px に対して
 * 53px を使っていた。**スペーサーは右寄せが要る幅でだけ意味がある**ので、
 * 折り返す幅では畳む。
 *
 * タブは2段のまま・44px のまま。6つを1行に詰めるには文字か触る大きさを削るしかなく、
 * どちらも携帯でこそ削りたくない。段の間と上の余白だけを詰める。 */
@media(max-width:480px){
  .topbar{ padding-top:8px; }
  .gnav{ margin-top:6px; gap:5px 12px; }
  .gnav .sp{ display:none; }
}

/* 携帯のヘッダを1画面の1/4から詰める（2026-10、A と合わせたモバイル見直し）
 *
 * 実測（390px・`/terms/`）: ヘッダ 201px ＝ 844px の画面の約1/4。うち
 *   gnav 53px（リンク2つで1行、金のCTAで1行）／タブ 2段で約86px。
 * 加えて gnav のリンクは高さ20px で、指で押すには小さすぎた。
 *
 * - gnav：携帯ではロゴが「AI戦略実践プロジェクト」を出しているので、リンクは
 *   「プロジェクトとは」に縮めて（`.gn-long` を畳む）CTA と同じ1行に収める。
 *   リンクは見た目を変えずに押せる範囲だけ広げる（padding と負の margin）
 * - タブ：2段をやめて**横にスワイプする1行**にする。上の「詰め方」で 44→40px に
 *   削ったのは2段だったからなので、1段にした分は 44px に戻す。右端は薄くして
 *   「まだ続く」ことを見せ、今いる面のタブは見える位置まで送る（site.js）。
 *   9/23 の判断（文字も触る大きさも削らない）は守ったまま、段だけを減らす */
@media(max-width:480px){
  .gnav{ flex-wrap:nowrap; gap:0 14px; }
  .gnav .gn-long{ display:none; }
  .gnav a:not(.cta){ padding:12px 3px; margin:-12px -3px; white-space:nowrap; }
  .gnav .cta{ margin-left:auto; padding:7px 12px; }
}
/* 320px 級は1行に収まらない（実測で5px はみ出した）ので、CTA を次の行へ送る */
@media(max-width:359px){
  .gnav{ flex-wrap:wrap; gap:8px 14px; }
  .gnav .cta{ margin-left:0; }
}
@media(max-width:430px){
  .topbar .tabs{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:-16px; margin-right:-16px; padding:0 16px; scroll-padding:0 16px; }
  .topbar .tabs::-webkit-scrollbar{ display:none; }
  .topbar .tabs a{ flex:none; min-height:44px; padding:0 14px; white-space:nowrap; }
  .topbar .tabs.more-r{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); }
}