/* nav.css — 全ページ共通のヘッダー動線（大分類＋その中身の2段）
 * 色・角丸は app.css / ux.css の役割トークンだけを使う。
 */

/* --- 1段目：大分類。全ページで同じものが同じ場所にある --- */
.gnav { background: var(--c-surface); border-bottom: 1px solid var(--c-border-weak); }
.gnav__in {
  max-width: var(--ux-maxw, 1280px); margin: 0 auto; padding: 0 12px;
  display: flex; gap: 4px; overflow-x: auto;
}
.gnav__c {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 9px 16px 8px; border-bottom: 3px solid transparent; white-space: nowrap;
  color: var(--c-text-sub);
}
.gnav__c:hover { background: var(--c-bg-muted); color: var(--c-text); }
.gnav__l { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
/* 分類名だけだと中身が想像できないので、下に一行だけ添える。
   「どっちを押せばいいか」を迷う時間がいちばん長い。 */
.gnav__s { font-size: 11px; line-height: 1.3; color: var(--c-text-muted); font-weight: 400; }
.gnav__c.is-on { color: var(--c-primary); border-bottom-color: var(--c-primary); background: var(--c-primary-weak); }
.gnav__c.is-on .gnav__s { color: var(--c-primary); }

/* --- 2段目：いま居る分類の中身 --- */
.snav { background: var(--c-bg-muted); border-bottom: 2px solid var(--ux-line, var(--c-border)); }
.snav__in {
  max-width: var(--ux-maxw, 1280px); margin: 0 auto; padding: 0 12px;
  display: flex; gap: 2px; overflow-x: auto; align-items: flex-end;
}
/* 2段目に入るリンク。トップのタブ（.tab）と見た目をそろえる。 */
.snav__i {
  font-size: 14px; font-weight: 700; color: var(--c-text-sub); text-decoration: none;
  padding: 12px 16px; border-bottom: 3px solid transparent; white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.snav__i:hover { color: var(--c-text); background: var(--c-surface); }
.snav__i[aria-current="page"] { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* 元のタブ置き場は nav.js が畳む。枠線だけが残らないように念のため消す。 */
header .tabs[hidden] { display: none; }

@media (max-width: 720px) {
  .gnav__s { display: none; }          /* 狭いところでは分類名だけにする */
  .gnav__c { padding: 11px 13px; }
  .snav__i, .snav__in .tab { padding: 11px 13px; font-size: 13.5px; }
}

/* 印刷では動線は不要 */
@media print { .gnav, .snav { display: none !important; } }