/* 旧ページの土台（front/base_legacy.html）だけが読む、載せ替えのための小さな上書き（2026-09-17）。
   旧本文のCSS（style.css・Bootstrap subset・tarot.css …）は触らず、必要になった上書きだけをここに集める。
   各規則に「なぜ」を書く。「読みにくい・崩れた」が出たら、まずこのファイルの規則を疑う（数が少ないので切り分けが早い）。
   正本の計画: docs/計画_旧ページ載せ替えと閉鎖_2026-09-17.md §1-4 */

/* 新ヘッダーのボタンと検索欄を、遊ぶ側（play/base.html）と同じ見た目にする。
   Bootstrap subset の input,button{font-family/line-height:inherit}・button{-webkit-appearance:button}・
   [type=search]{-webkit-appearance:textfield} と style.css の button,input{font:inherit} が新ヘッダーに届き、
   検索ボタンの「⌕」の書体と行の高さが変わっていた（計算後スタイル比較で検出）。
   遊ぶ側にはこれらの規則が無いので、ブラウザ既定へ戻せば同じになる。
   サイズは play-chrome.css 側（.pl-nav-search button{font-size:18px}・.pl-nav-search input{font-size:13px}）が持つので戻さない。 */
.pl-header .pl-nav-toggle,
.pl-header .pl-nav-search button {
    font-family: revert;
    font-weight: revert;
    line-height: revert;
    font-feature-settings: revert;
    appearance: revert;
}

.pl-header .pl-nav-toggle {
    font-size: revert;
}

.pl-header .pl-nav-search input {
    appearance: revert;
}

/* フッターのXアイコン。遊ぶ側は play.css の img{height:auto} で縦横比どおり（18×18.3）になる。
   旧ページには play.css を読ませない（本文の画像に漏れる）ので、ここだけ同じにする。 */
.pl-footer-x img {
    height: auto;
}

/* ---- サイドバーを外したタイプ詳細（/types/<slug>/）を1列にする（2026-09-18 判断票16回目 l1・Phase 2a-1） ----
   result_v2.css の .rv2-shell は「本文 + 右列304px」の2列グリッドで、右列（aside.rv2-side）はテンプレートから外した。
   列定義だけ残すと本文が左の列に片寄り、右に304pxの空白が残るので1列にする。
   本文の幅は右列があったときと同じ 1360 − 304 − 32 = 1024px に据え置いて中央へ（行の長さを変えない）。
   ★先頭の .layout は specificity のため: result_v2.css は {% block extra_head %} でこのファイルより後に読まれ、
   同じ specificity では負ける（.rv2-shell > .rv2{margin:0} が margin-inline:auto を消す）。
   1023px以下は result_v2.css が display:block・padding-inline:20px にしており、ここは max-width と中央寄せしか足さない。 */
.layout .rv2-shell {
    grid-template-columns: minmax(0, 1fr);
}

.layout .rv2-shell > .rv2 {
    max-width: 1024px;
    margin-inline: auto;
}

/* ---- 記事詳細（/articles/<slug>/）の右列（aside.article-side）を外した分（2026-09-18 Phase 2b・判断票16回目 l1=b） ----
   articles.css の .article-detail-layout は「本文 + 右列304px」の2列グリッド。列定義だけ残すと本文が左に片寄り右に空白が残るので1列にする。 */
.article-detail-layout {
    grid-template-columns: minmax(0, 1fr);
}

/* 本文の幅は右列があったときと同じ 1024px に据え置く（記事詳細は articles.css の body:has(.article-detail-live) .article-shell が
   1360px。1360 − 304 − 32 = 1024。計画 §1-4 の 904px は 1240px 基準の試算で、実測は 1024px）。
   本文だけを中央に寄せるとパンくず・見出し（同じ .article-shell）が左端に残って縦の線が揃わないので、
   記事詳細のページでは .article-shell（ジャンルナビ・「結果に戻る」・パンくず・見出し・本文）をまとめて 1024px にする。
   ★ :has(.article-detail-layout) にしているのは、.article-detail-live は記事一覧のカードにも付いていて一覧まで狭まるため。
   specificity は articles.css の規則と同じ (0,2,1) で、このファイルが後に読まれるので勝つ。 */
body:has(.article-detail-layout) .article-shell {
    width: min(1024px, calc(100% - 32px));
}

/* 本文の最後へ移した「近い記事」（.side-card.legacy-related）。部品は articles.css のもの（.a-side-title・.a-rel・.related-more）。
   右列幅（304px）では縦1列だった。本文幅で縦に並べると間延びするので、768px以上は1本 280px 以上で横に並べる
   （ビューは同じテーマカテゴリから最大3本を渡す＝本文1024pxで3列・768pxで2列）。 */
@media (min-width: 768px) {
    .legacy-related .a-rel {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        column-gap: 24px;
    }
}

/* .side-card .related-more{display:flex;width:100%} は右列幅いっぱいの帯。本文幅では帯が間延びするのでピルに戻す
   （旧右列の style="margin-top:14px" もここへ移した） */
.legacy-related .related-more {
    display: inline-flex;
    width: auto;
    margin-top: 14px;
}

/* 記事詳細の「◯◯の結果に戻る」（旧ヘッダー右端のCTAの代わり・計画 §1-5）。パンくずの上に1行 */
.legacy-return {
    margin-top: 16px;
}

/* ---- 用語集の詳細（/glossary/<slug>/）の右列（aside.glossary-side）を外した分 ----
   articles.css の .glossary-detail-shell は「本文 + 右列300px」の2列グリッド。本文は .glossary-article{max-width:720px} のまま中央へ。
   900px以下は articles.css 側が既に1列・max-width:none にしている。 */
.glossary-detail-shell {
    grid-template-columns: minmax(0, 1fr);
}

.glossary-detail-shell > .glossary-article {
    margin-inline: auto;
}

/* 本文（720px）だけを中央へ寄せると、パンくず（.article-shell＝1240px幅）が左端に残って縦の線が揃わない。
   901px以上（本文が720pxに収まる幅）だけ、用語集の詳細のパンくず（.breadcrumb-wrap.glossary-live）を本文と同じ幅にする。 */
@media (min-width: 901px) {
    .breadcrumb-wrap.glossary-live {
        width: min(720px, calc(100% - 32px));
    }
}

/* 本文の最後へ移した「関連する用語」。見出しは .glossary-see-also h2 と同じ、項目は用語名だけのピル（横に並べて折り返す）。
   右列の .glossary-side * の規則は右列に閉じていて効かないので、ここで持つ。 */
.glossary-related-inline {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--article-line);
}

.glossary-related-inline h2 {
    margin: 0 0 12px;
    font-family: var(--article-font-serif);
    font-size: 1.16rem;
}

.glossary-related-inline ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.glossary-related-inline li {
    margin: 0;
}

.glossary-related-inline li a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--article-line-strong);
    border-radius: 999px;
    color: var(--article-navy);
    font-size: 0.95rem;
}

.glossary-related-inline li a:hover {
    color: var(--article-gold-text);
    border-color: var(--article-gold-deep);
}