/* 経済用語集ページ。色は固定値（ポップアップと同じ。文字 #1f2a30 / 背景 #ffffff = 14.66:1、リンク #0a58a8 = 7.06:1、補助の文字 #4a5860 = 7.35:1）。 */

/* ---------------------------------------------------------------------------------------------
   ページの枠（テーマの固定ページ用テンプレート page.php の見た目を、この用語集ページだけで詰める）。
   body に付く glossary-page は、プラグインが付ける（FinSight_Glossary_Page::filter_body_class）。
   - タイトルの行は、画面に出さない（運営者の指摘「赤枠が邪魔」、2026年10月31日 00:48）。
     タイトルの見出し（h1）は、検索エンジンと読み上げが題として使うので残し、見えない形にする。
     見える「経済用語集」は、検索パネルの左端に出す（パネルが固定されても、どのページか分かる）。
   - 「FINSIGHT ARCHIVE」と「ホーム」のリンクも出さない（ロゴと、ページ最後の「ホームへ戻る」があるため）。
   --------------------------------------------------------------------------------------------- */
.glossary-page .content-page {
    padding: 12px 0 48px;
}

/* 見えない形（画面からは消すが、検索エンジンと読み上げには残る）。display: none にはしない。 */
.glossary-sr-only,
.glossary-page .content-page .section-heading,
.glossary-page .content-page-navigation-top {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.glossary-page .content-page-body {
    padding: 12px 20px 20px;
}

/* ---------------------------------------------------------------------------------------------
   用語集の中身
   --------------------------------------------------------------------------------------------- */
.glossary [hidden] {
    display: none !important;
}

/* 「読んでいたページに戻る」：画面の下に固定（親指が届く位置）。ポップアップから来た人にだけ、JavaScriptが出す。 */
.glossary-return {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #8a979e;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}

.glossary-return-button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 860px;
    min-height: 48px;
    margin: 0 auto;
    padding: 8px 16px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background: #0a58a8;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.glossary-return-button:focus-visible {
    outline: 3px solid #1f2a30;
    outline-offset: 2px;
}

/* 戻るボタンの高さの分だけ、最後のカードの下を空ける。 */
.glossary-has-return {
    padding-bottom: 80px;
}

/* ---------------------------------------------------------------------------------------------
   検索・絞り込みのパネル（広い画面では、サイトのヘッダーの下に固定する）
   3列のグリッド：左＝見出し、中央＝入力やボタン、右＝補助（件数、英字・五十音の開閉）。
     経済用語集 | [ 用語を検索　例：FOMC、金利… ......... ] | 全120語
     分野       | [すべて][金融政策・金利]...             | ▸ 英字・五十音
   左上の「経済用語集」は、ページの名前（タイトルの行を無くした代わり。パネルが固定されても、どのページか分かる）。
   検索の行と絞り込みの行は、display: contents で、このグリッドに直接入れて、列をそろえる。
   --------------------------------------------------------------------------------------------- */
.glossary-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 14px;
    margin: 0 0 6px;
    background: #ffffff;
    border: 1px solid #c3ccd1;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.glossary-search,
.glossary-filters {
    display: contents;
}

.glossary-panel-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    color: #1f2a30;
    white-space: nowrap;
}

.glossary-filter-label {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.glossary-search-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 6px 12px;
    font: inherit;
    font-size: 16px;
    color: #1f2a30;
    background: #ffffff;
    border: 1px solid #8a979e;
    border-radius: 8px;
}

.glossary-count {
    margin: 0;
    color: #4a5860;
    font-size: 14px;
    white-space: nowrap;
}

.glossary-search-input:focus-visible,
.glossary-filter:focus-visible,
.glossary-row-link:focus-visible,
.glossary-row-top:focus-visible {
    outline: 2px solid #0a58a8;
    outline-offset: 2px;
}

.glossary-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.glossary-filter,
.glossary-row-link {
    box-sizing: border-box;
    min-height: 34px;
    min-width: 34px;
    padding: 3px 12px;
    font: inherit;
    font-size: 14px;
    color: #1f2a30;
    background: #ffffff;
    border: 1px solid #8a979e;
    border-radius: 17px;
    cursor: pointer;
}

.glossary-filter[aria-pressed="true"] {
    color: #ffffff;
    background: #0a58a8;
    border-color: #0a58a8;
}

/* 「英字・五十音」の開閉ボタン（読む人が、画面で出したり隠したりする。初期は閉じる）。分野の行の右端。 */
.glossary-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 3px 4px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #0a58a8;
    background: none;
    border: 0;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.glossary-more-toggle::before {
    content: "▸";
    text-decoration: none;
}

.glossary-more-toggle[aria-expanded="true"]::before {
    content: "▾";
}

.glossary-more-toggle:focus-visible {
    outline: 2px solid #0a58a8;
    outline-offset: 2px;
}

/* 開いた中身：英字の絞り込みと、五十音の行へのリンク。パネルの下の段に、全幅で出る。 */
.glossary-more {
    grid-column: 1 / -1;
    padding-top: 2px;
    border-top: 1px solid #dfe5e8;
}

.glossary-initial,
.glossary-row-nav {
    display: grid;
    grid-template-columns: 4.2em minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    margin-top: 8px;
}

.glossary-row-nav-label {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.glossary-row-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.glossary-row-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0a58a8;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.glossary-empty {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #f2f7fc;
    border-radius: 8px;
}

.glossary-empty-text {
    margin: 0 0 10px;
}

/* 0件の時の「検索と絞り込みを解除」ボタン。色は、戻るボタンと同じ（白文字 #ffffff / 青 #0a58a8 = 7.06:1）。 */
.glossary-reset {
    min-height: 40px;
    padding: 6px 16px;
    font: inherit;
    font-weight: 700;
    color: #ffffff;
    background: #0a58a8;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.glossary-reset:focus-visible {
    outline: 3px solid #1f2a30;
    outline-offset: 2px;
}

/* 行ごとの区画：カードは1列（上から順に並べる）。 */
.glossary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.glossary-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 2px solid #0a58a8;
}

.glossary-row-title {
    margin: 0;
    font-size: 20px;
}

/* 先頭（検索・絞り込み）へ戻るリンク。パネルが固定されない狭い画面だけに出す。 */
.glossary-row-top {
    display: none;
    align-items: center;
    min-height: 36px;
    color: #0a58a8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

/* 用語のカード。 */
.glossary-card {
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    color: #1f2a30;
    background: #ffffff;
    border: 1px solid #c3ccd1;
    border-radius: 10px;
    scroll-margin-top: 16px;
    overflow-wrap: anywhere;
}

.glossary-card p {
    margin: 4px 0 0;
    line-height: 1.75;
}

.glossary-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
}

.glossary-card-short {
    font-weight: 700;
}

.glossary-card-meta {
    color: #4a5860;
    font-size: 13px;
}

.glossary-card a {
    color: #0a58a8;
    text-decoration: underline;
}

/* 検索した言葉に当たる部分（JSが <mark> で囲む）：黄色の地＋太字。色だけに頼らない。文字 #1f2a30 / 地 #ffe08a = 約11:1。 */
.glossary-card mark {
    padding: 0 2px;
    color: #1f2a30;
    background: #ffe08a;
    font-weight: 700;
    border-radius: 3px;
}

/* 「#term-…」のリンクで来た時（JavaScript不要）、そのカードを目立たせる。 */
.glossary-card:target {
    outline: 3px solid #0a58a8;
    background: #f2f7fc;
}

/* ---------------------------------------------------------------------------------------------
   広い画面（幅641px以上、高さ481px以上）：パネルを、サイトのヘッダーの下に固定する。
   高さが低い画面（例：高さ548pxのブラウザ）でも固定する。固定しないと、スクロールでパネルが流れ、目線が切れる（運営者の指摘、2026年10月31日 00:53）。
   --glossary-sticky-top（ヘッダーの高さ）と --glossary-panel-height（パネルの高さ）は、JSが測って入れる。
   固定したパネルの下にカードが隠れないよう、リンクで飛んだ先（カード・行の見出し）の上を、パネルの高さだけ空ける。
   --------------------------------------------------------------------------------------------- */
@media (min-width: 641px) and (min-height: 481px) {
    /* パネルの上の余白をなくし、スクロールする前から、固定した位置（ヘッダーの真下）に置く。
       余白があると、スクロールの最初の約25pxで、パネルが上に動いて見える（運営者の指摘、2026年10月31日 00:58）。 */
    .glossary-page .content-page {
        padding-top: 0;
    }

    .glossary-page .content-page-body {
        padding-top: 0;
        border-top-width: 0;
    }

    .glossary-panel {
        position: sticky;
        /* ヘッダーの真下に付ける（隙間をあけると、後ろを通るカードの文字が、隙間から透けて見えるため）。 */
        top: var(--glossary-sticky-top, 72px);
        z-index: 15;
    }

    .glossary-card,
    .glossary-row,
    .glossary-empty {
        scroll-margin-top: calc(var(--glossary-panel-height, 110px) + 16px);
    }
}

/* ---------------------------------------------------------------------------------------------
   狭い画面（幅640px以下）：パネルは固定しない（サイトのヘッダーが、すでに画面を使うため）。縦に積む。
   --------------------------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .glossary-page .content-page {
        padding: 10px 0 40px;
    }

    .glossary-page .content-page-body {
        padding: 10px;
    }

    .glossary-panel {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px;
    }

    /* 1行目：ページの名前｜件数。2行目：入力（全幅）。 */
    .glossary-panel-title {
        grid-column: 1;
        grid-row: 1;
    }

    .glossary-count {
        grid-column: 2;
        grid-row: 1;
    }

    .glossary-search-input {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .glossary-filter-label,
    .glossary-filter-group,
    .glossary-more-toggle-row {
        grid-column: 1 / -1;
    }

    .glossary-initial,
    .glossary-row-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .glossary-initial .glossary-filter-label,
    .glossary-row-nav-label {
        grid-column: 1;
    }

    /* ボタンは、折り返さず、横にスクロールする1行にする（折り返すと、縦に400px以上を使うため）。 */
    .glossary-filter-group,
    .glossary-row-nav-links {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }

    .glossary-filter,
    .glossary-row-link {
        flex: 0 0 auto;
    }

    .glossary-row-top {
        display: inline-flex;
    }
}

/* 高さが低い（700px以下）時は、固定するパネルが画面を占める割合を減らすため、余白を詰める。 */
@media (min-width: 641px) and (max-height: 700px) {
    .glossary-panel {
        gap: 6px 12px;
        padding: 7px 14px;
    }

    .glossary-search-input {
        min-height: 36px;
    }

    .glossary-filter {
        min-height: 30px;
    }
}

/* 広い画面でも、高さが480px以下（スマホを横向きにした時など）は、パネルを固定しない（画面の大半を占めるため）。 */
@media (min-width: 641px) and (max-height: 480px) {
    .glossary-row-top {
        display: inline-flex;
    }
}

@media (pointer: coarse) {
    .glossary-filter,
    .glossary-row-link,
    .glossary-row-top,
    .glossary-more-toggle,
    .glossary-search-input {
        min-height: 44px;
        min-width: 44px;
    }
}