/tags/ の親子の木で押せないノードをヘッダーの群ラベルと同じ枠付きにする (#3226)

CLAUDE.md

@@ -194,6 +194,14 @@ lede: "Go 1.27 で標準ライブラリに追加されたuuidパッケージを
     `/categories/` の「累計 327本」はチップにしていたが、#2405 の根拠
     （タグチップは塗り、こちらは枠だけ、で性質の違いを示す）は #2990 で
     タグチップも地をやめた時点で消えている。**素の文字**（`ink-mute` × `text-meta`）で置く
+    - **「分類の名前で、押せない」ラベルは `.category-group-label` 1つ**（#3226）。
+      ヘッダーのドロップダウンの群（`開発` `基盤`）と `/tags/` の親子の木の実在しない
+      ノード（AI・DB・OS…11件）が同じクラスを当てる。押せる名前（本文の段・太字・
+      `ink-strong`）と同じ列に並ぶので色だけでは分かれず（差 1.62:1、axe
+      `link-in-text-block`）、**大きさ（`text-meta`）・太さ（400）・色（`ink-mute`）の3つ**で
+      分ける。静止の下線は本文だけの規則（#2926）なので使わない。
+      **枠を持つのはドロップダウンだけ**（縦罫を引く場所が無い）。木は枝の縦罫が
+      範囲を示すので枠は足さない——「群を表す手はその場所で1つ」
     - **著者数は出さない。** ここで選ぶのは行き先のカテゴリで、何人が書いたかは
       その判断に効かない。数字はカテゴリページのサイドバーが持つ
   - **タグのチップは枠の左端をそろえる**（`ul.tag-list` の `margin-left: -4px`。

themes/future/css-src/theme-styles.styl

@@ -665,9 +665,12 @@ Header and header elements
   font-weight: 700;
   color: var(--ink-mute);
 }
-/* カテゴリの群の名前 (#2908)。素の文字で、行き先である行より弱く置く
-   （添えの段。太字にもしない）。**群を表す手はその場所で1つだけ持つ。**
-   サイドバーは下の縦罫が範囲を示すので、ラベル自身は印を持たない */
+/* 群の名前 (#2908)。「分類の名前で、押せない」ものの形で、ヘッダーのカテゴリの群と
+   /tags/ の親子の木の実在しないノード（AI・DB・OS…#3226）が同じ形を使う。
+   素の文字で、行き先である行より弱く置く（添えの段。太字にもしない）。
+   押せる名前（本文の段・太字・ink-strong）とは大きさ・太さ・色の3つで分かれる。
+   **群を表す手はその場所で1つだけ持つ。** サイドバーと木は縦罫が範囲を示すので、
+   ラベル自身は印を持たない */
 .category-group-label {
   display: block;
   margin: 0 0 space-step;
@@ -3690,15 +3693,20 @@ ul.tag-list {
   break-inside: avoid;
   margin-bottom: (space-step * 6);
 }
-/* 群の名前。根がタグとして実在すれば行き先になる（面を持たないので反応は下線
+/* 群の名前。根はタグとして実在する行き先（面を持たないので反応は下線
    #3162。/categories/ の .category-index-name と同じ型）。実在しないノード
-   （AI・DB・OS…）は素の文字で、そのぶん薄い段に落ちる */
+   （AI・DB・OS…）はこのラベルではなく、ヘッダーのカテゴリの群と同じ
+   .category-group-label で描く (#3226)。押せる名前と押せない名前が
+   色だけで分かれると、押してみるまで区別が付かない（差 1.62:1） */
 .tag-forest-label {
   margin: 0 0 (space-step * 2);
   font-size: text-body;
   line-height: leading-row;
   font-weight: bold;
-  color: var(--ink-mute);
+}
+/* 木の中の押せないラベルも、押せる根の名前と同じ 8px で枝から離す */
+.tag-forest .category-group-label {
+  margin-bottom: (space-step * 2);
 }
 .tag-forest-label a {
   color: var(--ink-strong);

themes/future/layout/tags.ejs

@@ -64,9 +64,11 @@
           このページ1枚でしか使わないので partial にはしない %>
       <%
         // 子を持たない子はチップ、持つ子は自分のラベルを立てて中を字下げする。
-        // 名前とチップの markup は根と同じなので、深さだけ変えて再帰で描く
+        // 名前とチップの markup は根と同じなので、深さだけ変えて再帰で描く。
+        // タグとして実在しないノード（AI・DB・OS…）は押せないので、ヘッダーの
+        // カテゴリの群と同じ枠付きのラベルで描く (#3226)
         function renderTagGroup(n, depth) { %>
-        <p class="<%= depth ? 'tag-forest-sublabel' : 'tag-forest-label' %>"><% if (n.path) { %><a href="<%- url_for(n.path) %>"><%= n.name %></a><span class="tag-forest-count"><%= n.posts %></span><% } else { %><%= n.name %><% } %></p>
+        <% if (n.path) { %><p class="<%= depth ? 'tag-forest-sublabel' : 'tag-forest-label' %>"><a href="<%- url_for(n.path) %>"><%= n.name %></a><span class="tag-forest-count"><%= n.posts %></span></p><% } else { %><p class="category-group-label"><%= n.name %></p><% } %>
         <div class="tag-forest-branch">
           <% if (n.chips.length) { %>
           <div class="blog-tags"><%- partial('_partial/tag-chips', {items: n.chips}) %></div>