/* 用語集（/glossary/）— 1 ページで引く。検索ボックスは画面上部に追従、
   語は <details class="gl-term"> で開閉（static/js/glossary.js）。
   色は gs-shell.css の変数（--g / --line / --soft / --ink / --mute / --bg）。 */
.gl-page { background: var(--bg); }
.gl-hero { background: rgb(253, 250, 243); border-bottom: 1px solid var(--line); padding: 2rem 0 1.2rem; }
.gl-inner { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.gl-eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .18em; color: var(--g-dark); margin-bottom: .4rem; }
.gl-eyebrow::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--y, #F4C542); margin-right: .45rem; vertical-align: 1px; }
.gl-hero h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 .5rem; color: var(--ink); }
.gl-hero h1 .n { font-size: 1rem; font-weight: 700; color: var(--mute); margin-left: .6rem; }
.gl-hero .lead { font-size: .98rem; line-height: 1.85; color: var(--ink); margin: 0; max-width: 760px; }
.gl-hero .lead a { color: var(--g-dark); }

/* サイトヘッダー（.gs-topbar: 74px・992px 以下は 62px）も sticky なので、その直下に追従させる。
   JS が実測した高さを --gl-top / --gl-stick に入れる（無ければこの既定値）。 */
.gl-search {
  position: sticky; top: var(--gl-top, 74px); z-index: 30; background: rgb(253, 250, 243);
  border-bottom: 1px solid var(--line); padding: .7rem 0 .55rem;
  box-shadow: 0 6px 14px -12px rgba(20, 40, 28, .35);
}
/* #<term_id> への着地・Enter のスクロールは、ヘッダー＋検索ボックスの下に来るようにする */
.gl-term, .gl-cat { scroll-margin-top: var(--gl-stick, 15rem); }
.gl-search form { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; display: flex; gap: .5rem; }
.gl-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 1.05rem; padding: .55rem .9rem;
  border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.gl-search input[type="search"]:focus { border-color: var(--g); outline: none; box-shadow: 0 0 0 3px rgba(47, 143, 91, .15); }
.gl-search button {
  min-height: 48px; padding: 0 1.1rem; border-radius: 12px; border: 1px solid var(--g);
  background: var(--g); color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.gl-search button:hover { background: var(--g-dark); }
.gl-chips { max-width: 1080px; margin: .55rem auto 0; padding: 0 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.gl-chips-rows { margin-top: .35rem; }
.gl-chip {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: .25rem .7rem;
  border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--soft); color: var(--g-dark);
  border: 1px solid var(--line); text-decoration: none;
}
.gl-chip .n { font-size: .7rem; color: var(--mute); font-weight: 500; }
.gl-chip.is-plain { background: #fff; }
.gl-chip[aria-pressed="true"] { background: var(--g); color: #fff; border-color: var(--g); }
.gl-chip[aria-pressed="true"] .n { color: rgba(255, 255, 255, .85); }
.gl-count { max-width: 1080px; margin: .5rem auto 0; padding: 0 1.25rem; font-size: .85rem; color: var(--mute); min-height: 1.2em; }
#gl-results { max-width: 1080px; margin: .9rem auto 0; padding: 0 1.25rem; }

.gl-cat { max-width: 1080px; margin: 1.6rem auto 0; padding: 0 1.25rem; }
.gl-sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; margin: 0 0 .7rem; padding-left: .7rem; border-left: 4px solid var(--g); }
.gl-sec-title { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--ink); }
.gl-sec-count { font-size: .8rem; color: var(--mute); font-weight: 600; white-space: nowrap; }
.gl-sec-hub { margin-left: auto; font-size: .82rem; color: var(--g-dark); text-decoration: none; font-weight: 600; white-space: nowrap; }
.gl-sec-hub:hover { text-decoration: underline; }

.gl-term {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 .5rem;
  box-shadow: 0 10px 20px -22px rgba(20, 40, 28, .4);
}
.gl-term > summary {
  list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem;
  padding: .75rem 1rem; min-height: 48px; cursor: pointer; color: var(--ink);
}
.gl-term > summary::-webkit-details-marker { display: none; }
.gl-term > summary::before { content: "▸"; color: var(--g); font-size: .9rem; }
.gl-term[open] > summary::before { content: "▾"; }
.gl-term[open] > summary { border-bottom: 1px solid var(--line); background: rgb(253, 250, 243); border-radius: 12px 12px 0 0; }
.gl-term-name { font-weight: 800; font-size: 1rem; }
.gl-term-cat {
  margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--g-dark); background: var(--soft);
  border-radius: 999px; padding: .12rem .55rem; white-space: nowrap;
}
.gl-term-body { padding: .8rem 1rem 1rem; font-size: .95rem; line-height: 1.85; color: var(--ink); }
.gl-def { margin: 0 0 .6rem; }
.gl-note { margin: 0 0 .6rem; color: #3d4742; }
.gl-note .k { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--mute); margin-right: .5rem; letter-spacing: .04em; }
.gl-meta { font-size: .85rem; color: #3d4742; margin: 0 0 .35rem; }
.gl-meta .k { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--mute); margin-right: .5rem; letter-spacing: .04em; }
.gl-meta a { color: var(--g-dark); text-decoration: underline; text-underline-offset: 2px; margin-right: .6rem; }
.gl-more { margin: .3rem 0 .5rem; }
.gl-more a { font-weight: 700; color: var(--g-dark); text-decoration: none; }
.gl-more a:hover { text-decoration: underline; }
.gl-foot { max-width: 1080px; margin: 2rem auto 2.5rem; padding: 0 1.25rem; font-size: .88rem; color: var(--mute); }
.gl-foot a { color: var(--g-dark); }
@media (max-width: 992px) { .gl-search { top: var(--gl-top, 62px); } }
@media (max-width: 576px) {
  .gl-hero { padding: 1.4rem 0 1rem; }
  .gl-hero h1 { font-size: 1.4rem; }
  .gl-search form, .gl-chips, .gl-count, #gl-results, .gl-cat, .gl-inner, .gl-foot { padding-left: .75rem; padding-right: .75rem; }
  .gl-search button { padding: 0 .85rem; }
  /* 追従する部分を小さく: chip は 1 行ずつ横スクロール（折り返すと画面の半分を占める） */
  .gl-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .gl-chips::-webkit-scrollbar { display: none; }
  .gl-chip { flex: 0 0 auto; }
  .gl-term > summary { padding: .7rem .8rem; }
  .gl-term-body { padding: .7rem .8rem .9rem; }
}