特設ページと連載一覧のパネルの囲みを外してフラットにする (#3152)

CLAUDE.md

@@ -1394,6 +1394,32 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
     ホームの本文にあった「連載から探す」2枚はこれに置き換えた。
     **「連載がある」ことは新着一覧自体が名乗る**——1ページ目の25本のうち12本が連載所属で、
     7本はタイトルに「連載」と入っている
+- **パネルの既定はフラット。囲みを持つのは強調のために枚数を絞った枠だけ**（#3152）。
+  記事へ送るカードは一覧の1件（#2747）・We're hiring（#2820）の順に囲みを外してきて、
+  枠が残っていたのは連載・特設のパネルだけだった。**1枚のまとまりは間隔の比が作る**
+  - 囲みを持つのは `.series-panels-boxed` を足した枠だけで、いまはホームの「特集」
+    （旬で2枚 #2892）だけが該当する。**「特設ページだから枠」ではなく「選んで
+    絞ったから枠」**。全件を並べる `/series/` ・ `/specials/guidelines/` ・
+    `/specials/httf/` ・ `/specials/advent-calendar/` ・ `/specials/techcast/` は
+    フラットになる
+  - **外の空きは縦横で違う。比べる相手（中の空き）が軸ごとに違うため**。
+    **横は 48px**——隣の列との境目で近づくのは「左のカードの文字」と「右のカードの
+    サムネ」なので、中の空き（サムネと文字の 12px）の4倍を取る。24px では2倍にしか
+    ならず、**同じ形の We're hiring が同じ判断をしている**（#2820）。
+    **縦は 24px のまま**——1枚は［サムネ｜文字］の横帯なので、縦に並ぶ相手との間に
+    挟まる中の空きは題と添えの 4px しかない。48px にすると帯そのもの（59px）と
+    ほぼ同じ高さの空きになり、囲みを外した意味（情報密度）が消える
+  - **枠を外すと情報密度が上がる。** 内側の余白（18px）と枠（1px）が消えるぶん、
+    本文列3列で題の幅が 164px → 190px、1枚の高さが 97px → 59px（題1行のとき）。
+    `/series/` の78枚で実測すると、行の送りが 123px → 83px、グリッド全体が
+    3,201px → 2,169px（-32%）、**高さ900pxの画面に入る枚数が 21枚 → 30枚**。
+    題が2行に折り返す連載も6件から2件に減る（幅が広がるため）
+  - **内側の余白を持たないので、サムネの左端が節見出し・本文とそろう**（#2820 と同じ）
+  - ガターの値は CSS（`.series-panels.row`）が持つ。**呼び出し側に `.g-4` を書かない**
+    ——markup と CSS の2箇所に同じ値を持つことになる
+  - hover はどちらもカードの型（題に下線・画像が一段引く）のまま。We're hiring が
+    行の型（面）に移った（#3113）のは1枚＝1行き先だからで、パネルは HTTF の
+    メタと「特集」の全件導線に別のリンクを含む
 - **ホームの「特集」枠は旬で2枚選ぶ**（#2880 / #2892）。優先順は
   アドベントカレンダー（開催年が今年）→ Tech Cast（新エピソード）→ HTTF（開催中）→
   連載（走り終えたもの。#3135）→ ガイドライン。前3つが季節もので、常設は後ろから落ちる

source/specials/styleguide/index.md

@@ -322,7 +322,7 @@ career: true
 
 ### 影は持たない
 
-影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 一覧の1件は囲みを持たず間隔だけで分け、記事へ送るカードで枠線を持つのは**横に並んで箱でないと成立しない部品**（連載・特設パネル / リンクプレビュー）だけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。
+影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 記事へ送るカードは囲みを持たず、1件のまとまりは**外の空きが中の空きより十分大きいこと**が作ります。[連載一覧](/series/)や特設ページのパネルは、隣の列との間が 48px で、サムネイルと文字の間（12px）の4倍です。枠線を持つのは**強調のために枚数を絞った枠**（[トップページ](/)の「特集」）と、リンクプレビューだけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。
 
 ### hover は1部品1反応
 

themes/future/css-src/_variables.styl

@@ -276,9 +276,10 @@ sidebar = hexo-config("sidebar")
 // 影は持たない（#2747）。以前は静止（card-shadow）と持ち上がり
 // （card-shadow-raised）の2段を置いていたが、カード＋影の見せ方をやめて
 // 「輪郭はなるべく作らない」方針に寄せた。
-// 一覧の1件は囲みを持たず間隔だけで分け、横に並んで箱でないと成立しない
-// 部品（連載・特設パネル / We're hiring / タブ / リンクプレビュー）だけが
-// 枠線（rule-base）を持つ。hover はどのカードも「中身が一段引く」。
+// 記事へ送るカードは囲みを持たず間隔だけで分ける。一覧の1件 (#2747)、
+// We're hiring (#2820)、連載・特設のパネル (#3152) の順に外してきた。
+// 枠線（rule-base）が残るのは、強調のために枚数を絞った枠（トップの「特集」）と
+// リンクプレビューだけ。hover はどのカードも「中身が一段引く」。
 // **新しい影を足さない。** 1つ足すと「どこに影を使うか」の判断が戻ってくる
 // （角丸を3段・ink を3段に絞ったのと同じ理屈 #2534）
 //

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

@@ -1909,8 +1909,8 @@ body {
    中央値5行・最大7行で、1件は幅375pxで中央値460px・最大530pxある。
    **カードの区切り（80px）が節の区切り（56px）より大きいのは階層が逆で、**
    さらに #2911 で区切り線が入ったので、空きだけが分ける役を負っていない。
-   横に並んで箱でないと成立しない部品（連載・特設パネル / タブ）は
-   個別に枠線を持つ */
+   横に並ぶパネル（連載・特設）も #3152 で囲みを外した。枠線が残るのは
+   強調のために枚数を絞った枠（トップの「特集」）だけ */
 /* 一括指定にしない (#2951)。margin-left / margin-right まで 0 になり、
    一覧カード（.row）が持つ負のマージン（ガターの半分）を打ち消していた。
    カードの中身だけが本文列の左端から 12px 右にいて、節見出しとそろっていなかった */
@@ -2106,20 +2106,62 @@ body {
   font-size: text-body;
 }
 
-/* 連載・特設・HTTF のパネルカード。We're hiring と同じ横並びの作り */
+/* 連載・特設・HTTF のパネルカード。We're hiring と同じ横並びの作り。
+
+   **既定は囲みを持たない (#3152)。** 一覧の1件 (#2747) と We're hiring (#2820) が
+   先に囲みを外していて、記事へ送るカードで枠が残っていたのはここだけだった。
+   枠と内側の余白のぶん中身が狭くなり（本文列の3列で題の幅が 164px → 190px）、
+   1枚の高さも 38px 増える（題1行で 97px 対 59px）。
+   1枚のまとまりは間隔の比が作る（下の .series-panels.row）。
+   内側の余白を持たないので、サムネの左端が節見出し・本文とそろう (#2820 と同じ) */
 .series-panels .article-card {
   display: flex;
-  /* 「特集」のパネルは本文が4行（ラベル・タイトル・メタ・導線）で 91px あり、
-     88×59 のサムネの 1.5 倍の高さになる。12px では文字の塊がサムネに寄って見える
-     ので一段広げた (#2892)。他の6箇所も同じ部品なので一緒に動かす */
-  gap: 16px;
+  /* 囲みが無いぶん中の空きは最小段に寄せる。We're hiring と同じ 12px で、
+     外の空き（48px）の 1/4 (#2747) */
+  gap: 12px;
   /* 固定59pxのサムネより本文（1行タイトル＋メタ）が低いことが多く、
      上揃えだと本文が上に張り付く。hiring カードと同じ垂直中央 (#2347) */
   align-items: center;
-  padding: 18px;
   margin: 0;
-  /* 囲みは .article-card ではなくここが持つ (#2747)。枠は「カード・箱を囲む線」
-     なので rule-weak（区切りの線）ではなく rule-base */
+}
+/* 外の空きは縦横で違う。**比べる相手（中の空き）が軸ごとに違う**ため。
+
+   横は 48px。隣の列との境目で近づくのは「左のカードの文字」と「右のカードのサムネ」で、
+   中の空き（サムネと文字の 12px）の4倍を取る。24px では中の2倍にしかならず、
+   We're hiring が同じ形で同じ判断をしている (#2820)。
+   広げても外側の左右の揃いは動かない（Bootstrap のガターは列の padding と
+   行の負のマージンで作るので、相殺される）。
+
+   縦は 24px のまま。1枚は［サムネ｜文字］の横帯なので、縦に並ぶ相手との間に
+   挟まる中の空きは題と添えの 4px しかない。48px にすると帯そのもの（59px）と
+   ほぼ同じ高さの空きになり、囲みを外した意味（情報密度 #3152）が消える。
+
+   呼び出し側に .g-4 は書かない——ガターの値をここが決めるので2箇所に持たない。
+   包み自身が行のとき（3列のグリッド）と、節の中に行を持つとき（ホームの「特集」）の
+   両方に当てる */
+.series-panels.row,
+.series-panels > .row {
+  --bs-gutter-x: 48px;
+  --bs-gutter-y: 24px;
+}
+/* 強調のために枚数を絞った枠だけが囲みを持つ (#3152)。いまはトップの「特集」
+   （旬で2枚 #2892）だけ。枠は「カード・箱を囲む線」なので rule-weak（区切りの線）
+   ではなく rule-base。
+   高さをそろえるのもここ。囲みがあると2枚の下辺のズレが線として見える。
+
+   **列の間は 24px に戻す。** 切れ目は枠が作っているので、間隔で作り直す必要が無い */
+.series-panels-boxed.row,
+.series-panels-boxed > .row {
+  --bs-gutter-x: 24px;
+  --bs-gutter-y: 24px;
+}
+.series-panels-boxed .article-card {
+  /* 「特集」のパネルは本文が4行（ラベル・タイトル・メタ・導線）で 91px あり、
+     88×59 のサムネの 1.5 倍の高さになる。12px では文字の塊がサムネに寄って見える
+     ので一段広げた (#2892) */
+  gap: 16px;
+  padding: 18px;
+  height: 100%;
   border: 1px solid var(--rule-base);
   border-radius: card-radius;
 }
@@ -3561,7 +3603,7 @@ ul.tag-list {
   font-size: text-meta;
   font-weight: 400;
 }
-/* row(g-4) の負のトップマージンが見出しに食い込むので外す。
+/* row の負のトップマージンが見出しに食い込むので外す。
    見出しとカードの間隔がカード同士の間隔（24px）と同じになる */
 .group-heading + .series-panels {
   margin-top: 0;

themes/future/layout/_partial/archive.ejs

@@ -121,11 +121,15 @@
   <% const shownPanels = specialPanels.slice(0, 2); %>
   <% const sharedMore = new Set(shownPanels.map(function(p){ return p.more.url; })).size === 1
        ? shownPanels[0].more : null; %>
-  <section class="series-panels">
+  <%# ここだけ囲みを持つ (#3152)。パネルの既定はフラットで、枠線は「強調のために
+      枚数を絞った」ときの印。この枠は候補の中から旬の2枚を選んで出している (#2892)
+      ので、その条件に当たる。行き先の全件は /series/ ・ /specials/ が持ち、
+      そちらはフラットな一覧になる %>
+  <section class="series-panels series-panels-boxed">
     <%# 連載の索引は記事なので「特設ページ」では名前が実態と合わない (#2892)。
         連載も特設ページも「記事1本ではない、まとまった読み物への入口」なので特集で束ねる %>
     <%- partial('section-heading', {id: 'specials', text: '特集'}) %>
-    <div class="row g-4">
+    <div class="row">
       <% shownPanels.forEach(function(p){ %>
       <div class="col-12 col-md-6">
         <%# 旬の2枚に専用の絵が無いときは空き枠。サムネの無い連載（/series/）と行頭を揃える。

themes/future/layout/_partial/panel-card.ejs

@@ -4,6 +4,9 @@
     **列は呼び出し側が持つ。** 2列（ホームの特集）と3列（それ以外）で違い、
     グリッドの都合はカードの都合ではない。ここが描くのはカード1枚だけ。
 
+    **囲みも呼び出し側が持つ。** 既定はフラットで、強調のために枚数を絞った枠だけが
+    包みに `series-panels-boxed` を足して枠線と高さそろえを持つ (#3152)。
+
     引数:
       url      行き先（必須）
       title    題（必須）
@@ -25,7 +28,7 @@
   const panelMore = typeof more === 'undefined' ? null : more;
   const panelBlank = (typeof external !== 'undefined' && external) ? ' target="_blank" rel="noopener"' : '';
 %>
-<div class="article-card series-panel h-100">
+<div class="article-card series-panel">
   <% if (panelThumb) { %>
   <a href="<%= url %>" title="<%= title %>" class="thumb-link panel-thumb<%= panelThumb.contain ? ' panel-thumb-contain' : '' %>" tabindex="-1" aria-hidden="true"<%- panelBlank %>>
     <img src="<%= panelThumb.src %>" alt="" width="<%= panelThumb.width %>" height="<%= panelThumb.height %>" loading="lazy">

themes/future/layout/_partial/post-panel-grid.ejs

@@ -2,7 +2,7 @@
     guidelines から切り出し）。本文列（col-md-9）内でも3列を出す（レビューで確定）。
     呼び出し: partial('post-panel-grid', {posts: [...]}) %>
 <% if (posts.length) { %>
-<div class="series-panels row g-4">
+<div class="series-panels row">
   <% posts.forEach(function(p){ %>
   <div class="col-12 col-md-6 col-lg-4">
     <%# 推薦パネルの日付は鮮度の目安なので年月まで (#2404) %>

themes/future/layout/gallery.ejs

@@ -248,9 +248,9 @@
         <%- partial('_partial/archive-post', {post: samplePost, index: false}) %>
       </div>
       <div class="gallery-item">
-        <%- galleryName('patterns', 'sample-panel-card', 'パネル') %>
-        <p class="specials-text">連載や特設ページへの入口です。サムネイルが無いときは同じ大きさの空き枠を置いて、題の頭をそろえます。種別の名札と、全件への行き先を添えられます。</p>
-        <div class="series-panels row g-4">
+        <%- galleryName('patterns', 'sample-panel-card', '強調したパネル') %>
+        <p class="specials-text">トップページの「特集」で、旬のものを2枚だけ選んで出すときの形です。枚数を絞って強調する枠なので、パネルの既定とは違って枠線を持ちます。サムネイルが無いときは同じ大きさの空き枠を置いて、題の頭をそろえます。種別の名札と、全件への行き先を添えられます。</p>
+        <div class="series-panels series-panels-boxed row">
           <div class="col-12 col-md-6">
             <%- partial('_partial/panel-card', {
                   url: url_for(samplePost.path),
@@ -273,7 +273,7 @@
       </div>
       <div class="gallery-item">
         <%- galleryName('patterns', 'sample-post-panel-grid', 'パネルの並び') %>
-        <p class="specials-text">特設ページで、記事へのパネルを3列で並べます。</p>
+        <p class="specials-text">連載一覧や特設ページで、記事へのパネルを3列で並べます。パネルの既定の形で、囲みは持ちません。1枚のまとまりは、隣の列との間（48px）がサムネイルと文字の間（12px）より十分大きいことが作ります。</p>
         <%- partial('_partial/post-panel-grid', {posts: samples.panelPosts}) %>
       </div>
       <% if (authorPost) { %>

themes/future/layout/httf.ejs

@@ -28,7 +28,7 @@
       <% const httfContests = (site.data.httf || []).map(function(c){
            return Object.assign({title: 'HACK TO THE FUTURE ' + c.year, qualLabel: c.qual_label}, c);
          }); %>
-      <div class="series-panels row g-4">
+      <div class="series-panels row">
         <% httfContests.forEach(function(c){ %>
         <div class="col-12 col-md-6 col-lg-4">
           <%# ロゴは切り抜くと欠けるので contain 表示。

themes/future/layout/series.ejs

@@ -33,8 +33,9 @@
             text: year + '年',
             meta: list.length + '連載・全' + list.reduce((sum, s) => sum + s.total, 0) + '本・著者' + yearAuthors.size + '名',
           }) %>
-      <%# .series-panels がパネルの横並びレイアウトを持つ（トップの「連載から探す」と同じ部品） %>
-      <div class="series-panels row g-4">
+      <%# .series-panels がパネルの横並びレイアウトを持つ（トップの「特集」と同じ部品）。
+          囲みは持たない (#3152)。ガターは CSS 側が 48px を持つので .g-4 は書かない %>
+      <div class="series-panels row">
         <% list.forEach(function(s){ %>
         <div class="col-12 col-md-6 col-lg-4">
           <%# 期間は連載の活動期間（初回〜最新）。単月で終わった連載は1つだけ名乗る %>