ヘッダーの「Guidelines」のドロップダウンを2列にする (#488)

.vitepress/theme/style.css

@@ -141,6 +141,69 @@
   box-shadow: none;
 }
 
+/* 群を持つドロップダウンは 2 列 (#488)。技術ブログ #2908 と同じ。
+   「Guidelines」は 6 群 23 件で高さ約 1,079px あり、max-height が
+   calc(100vh - 64px) なので viewport が 1,143px を超えないと中でスクロールする。
+   行き先を選ぶための一覧が一度に見えていなかった。
+
+   グリッドではなく多段組にするのは 2 つの理由から。グリッドは行の高さを
+   左右でそろえるので件数の少ない群の下に空きが出るのと、多段組なら
+   break-inside で群が列の途中で割れない。
+   列数は列幅の下限で決めるので、幅が足りない場所では 1 列に落ちる。
+
+   幅は「最長の行が折り返さない」で決める。行は Markdown設計ドキュメント の
+   175px、群ラベルは はじめての〇〇シリーズ の 154px で、左右のパディング 24px を
+   足して列の内寸 200px。溝 32px とパネルの余白 24px、枠 2px で 458px。
+
+   群を持たない「About Us」（平らな 6 件）には当てない */
+#app .VPMenu:has(.VPMenuGroup) {
+  width: 500px;
+}
+#app .VPMenu:has(.VPMenuGroup) > .items {
+  column-width: 220px;
+  column-gap: 32px;
+}
+#app .VPMenu:has(.VPMenuGroup) > .items > .VPMenuGroup {
+  break-inside: avoid;
+  /* 群の区切りは空きだけが持つ。2 列にすると 2 列目の先頭の群にも罫線と
+     余白が付き、1 列目の先頭（罫線なし）と高さがそろわない。どの群が列の
+     先頭に来るかは CSS からは分からないので、片方だけ消すことはできない。
+     列の中の切れ目 24px に対して列の溝は 32px で、階層が逆にならない */
+  margin: 0 0 24px;
+  border-top: 0;
+  padding: 0;
+}
+#app .VPMenu:has(.VPMenuGroup) > .items > .VPMenuGroup:last-child {
+  margin-bottom: 0;
+}
+
+/* 群のラベルは枠を持つ (#488)。技術ブログ #3226 と同じ。
+   2 列の多段組では左に余白が無く縦罫を引く場所が無いので、群を表す印は
+   ラベル自身が持つしかない。枠はタグのチップ（ピル型）と取り違えられないよう
+   角丸は小さな部品の段（4px）の四角のままで、地は敷かない。
+   幅は文字ちょうどに留める——列幅いっぱいに伸ばすと同じ幅のボタンの列に見える。
+
+   枠を足したぶん文字は一段引く（14px/600 → 12px/400）。押せない分類の名前が
+   行き先より重いと、読む順が逆になる。大きさ・太さ・色の 3 つで押せる名前と分ける。
+   枠の中の文字（左 3 ＋ 枠 1 ＋ 余白 8 ＝ 12px）は、2 列化する前の行の文字と同じ位置 */
+#app .VPMenu:has(.VPMenuGroup) .VPMenuGroup > .title {
+  width: fit-content;
+  margin: 0 0 4px 3px;
+  padding: 2px 8px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* 行はラベルより 8px 下げて、その群に属することを示す。16px は強すぎる
+   （技術ブログ #3180 が実測で 8px 止まりと決めている）。
+   押せる範囲は列いっぱいのままで、下げるのは文字だけ */
+#app .VPMenu:has(.VPMenuGroup) .VPMenuGroup .link {
+  padding-left: 20px;
+}
+
 /* 角丸は 3 段（4 / 8 / 999px）だけで、12px は持たない。箱の段に寄せる */
 #app .VPMenu {
   border-radius: 8px;