@charset "UTF-8";
/* 国際基準に基づく小奇形アトラス
   静的サイト用スタイル。学会サイト本体とは独立したデザイン。 */

:root {
  --ink:      #182027;
  --ink-2:    #4c565f;
  --ink-3:    #7c868f;
  --line:     #e3e7eb;
  --line-2:   #eef1f4;
  --bg:       #ffffff;
  --bg-2:     #f6f8f9;
  --bg-3:     #eef2f4;
  --accent:   #0f6a6d;
  --accent-2: #0b5052;
  --accent-soft: #e4f0f0;
  --warn:     #a8442a;

  --sidebar-w: 17.5rem;
  --header-h:  auto;
  /* sticky なサイドバーの上端位置と、同じく sticky なフッターの高さ。
     サイドバーの高さ計算に使うので、フッターの余白を変えたらここも直す。 */
  --sidebar-top: 6.2rem;
  --footer-h:    2.1rem;
  /* 見出し(summary)＋絞り込み欄＋その余白の高さ。一覧の高さ計算に使う。 */
  --sidebar-head-h: 5.6rem;
  --radius:    10px;
  --maxw:      78rem;

  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
          "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:   #e6eaed;
    --ink-2: #b3bcc4;
    --ink-3: #8b959d;
    --line:  #2c343b;
    --line-2:#232a30;
    --bg:    #14191d;
    --bg-2:  #1a2025;
    --bg-3:  #222a30;
    --accent: #5cbfc1;
    --accent-2: #8ad6d7;
    --accent-soft: #1d2f30;
    --warn:  #e0866c;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: "palt" 1;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  color: inherit;
  line-height: 1.35;
  flex-shrink: 0;
}
.site-header__brand:hover { text-decoration: none; }
.site-header__title { font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; }
.site-header__sub   { font-size: .74rem; color: var(--ink-3); }

/* ---------- 検索 ---------- */

.site-search { position: relative; margin-left: auto; width: min(24rem, 45vw); }

/* 学会サイトへ戻るボタン。アトラスは独立した静的サイトなので、
   フッターのリンクだけでは戻り道が分かりにくいというご指摘があった。 */
.site-header__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .42rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}
.site-header__back:hover { background: var(--accent-2); text-decoration: none; }

.site-search input {
  width: 100%;
  padding: .5rem .85rem;
  font: inherit;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
}
.site-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg);
}

.site-search__results {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: min(30rem, 88vw);
  max-height: min(26rem, 60vh);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .13);
  padding: .35rem;
}

.result {
  display: block;
  padding: .5rem .7rem;
  border-radius: 7px;
  color: inherit;
  line-height: 1.5;
}
.result:hover, .result.is-active { background: var(--bg-3); text-decoration: none; }
.result__ja  { font-weight: 600; }
.result__en  { color: var(--ink-2); font-size: .84rem; margin-left: .4rem; }
.result__cat { float: right; font-size: .72rem; color: var(--ink-3); }
.result__def { display: block; font-size: .78rem; color: var(--ink-3);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 .1em; }

.site-search__empty { padding: .9rem .7rem; color: var(--ink-3); font-size: .86rem; }

/* ---------- カテゴリナビ ---------- */

.site-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem .1rem;
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  flex: 0 0 auto;
  padding: .45rem .8rem .6rem;
  font-size: .87rem;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a.is-current { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- レイアウト ---------- */

.layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.main { padding: 2rem 0 5rem; min-width: 0; }
.main--home { max-width: 52rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }

.page-title {
  font-size: 1.6rem;
  letter-spacing: .02em;
  margin: 0 0 1.5rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--line);
}

/* ---------- サイドバー ---------- */

.sidebar {
  position: sticky;
  top: var(--sidebar-top);
  /* フッターも sticky なので、その高さを引かないと一覧が下に潜り込む。
     最後の .8rem はフッターとの間に残す隙間。 */
  max-height: calc(100vh - var(--sidebar-top) - var(--footer-h) - .8rem);
  display: flex;
  flex-direction: column;
  padding: 2rem 0 1rem;
}

.sidebar__disclosure { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.sidebar__head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  cursor: default;
  list-style: none;
}
.sidebar__head::-webkit-details-marker { display: none; }
.sidebar__head h2 { font-size: .96rem; margin: 0; }
.sidebar__count { font-size: .74rem; color: var(--ink-3); }

.sidebar__filter {
  margin: .7rem 0;
  width: 100%;
  padding: .4rem .7rem;
  font: inherit;
  font-size: .82rem;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
}
.sidebar__filter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* <details> の中身はブラウザ内部で匿名ボックス(::details-content)に包まれるため、
   details に display:flex を付けても flex は nav まで届かない。
   結果として一覧が sidebar の枠をはみ出してフッターの下まで伸びていた。
   まず calc で高さを直接与え、::details-content を指定できるブラウザでは
   下の @supports で本来の flex 配分に切り替える。 */
.sidebar__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  max-height: calc(100vh - var(--sidebar-top) - var(--footer-h)
                   - .8rem            /* フッターとの隙間 */
                   - 2rem - 1rem      /* .sidebar の上下 padding */
                   - var(--sidebar-head-h));
  margin-right: -.5rem;
  padding-right: .5rem;
}
.sidebar__list ul { list-style: none; margin: 0; padding: 0; }

@supports selector(::details-content) {
  .sidebar__disclosure::details-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
  }
  .sidebar__list { max-height: none; }
}

.sidebar__section {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin: 1rem 0 .3rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--line-2);
}
.sidebar__section:first-child { margin-top: 0; }

.sidebar__list a {
  display: block;
  padding: .28rem .5rem;
  margin-left: -.5rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-2);
  border-radius: 6px;
  border-left: 2px solid transparent;
}
.sidebar__list a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.sidebar__list a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sidebar__en { display: block; font-size: .72rem; color: var(--ink-3); }
.sidebar__list a.is-active .sidebar__en { color: inherit; opacity: .8; }

.sidebar__empty { font-size: .82rem; color: var(--ink-3); padding: .5rem; }

/* ---------- 節見出し ---------- */

.section-title {
  font-size: 1.15rem;
  margin: 3rem 0 1.2rem;
  padding: .4rem .9rem;
  background: var(--bg-3);
  border-radius: var(--radius);
  scroll-margin-top: 7rem;
}
.section-title:first-of-type { margin-top: 1rem; }

.section-intro {
  margin: 1.5rem 0 2.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section-intro h3 { font-size: .95rem; margin: 1.3rem 0 .4rem; color: var(--accent); }
.section-intro h3:first-child { margin-top: 0; }
.section-intro__text { font-size: .9rem; }
.section-intro ol { padding-left: 1.4rem; }

.table-wrap { overflow-x: auto; margin: .8rem 0; }
.table-wrap table { border-collapse: collapse; font-size: .85rem; min-width: 22rem; }
.table-wrap caption { text-align: left; font-weight: 700; padding-bottom: .4rem; font-size: .88rem; }
.table-wrap th, .table-wrap td {
  border: 1px solid var(--line);
  padding: .35rem .7rem;
  text-align: left;
  vertical-align: top;
}
.table-wrap th { background: var(--bg-3); }

/* ---------- 用語 ---------- */

.term {
  padding: 1.5rem 0 1.6rem;
  border-top: 1px solid var(--line-2);
  scroll-margin-top: 7rem;
}
.term:target .term__name { color: var(--accent); }

.term__name {
  font-size: 1.05rem;
  margin: 0 0 .9rem;
  line-height: 1.6;
}
.term__ja { font-weight: 700; }
.term__en { font-weight: 500; color: var(--ink-2); font-size: .92rem; }

.term__anchor {
  margin-left: .45rem;
  color: var(--ink-3);
  opacity: 0;
  font-weight: 400;
  transition: opacity .15s;
}
.term:hover .term__anchor, .term__anchor:focus { opacity: 1; }

.term__note {
  margin: -.6rem 0 .8rem;
  font-size: .8rem;
  color: var(--ink-3);
}

.term__repaired {
  display: inline-block;
  margin: -.5rem 0 .8rem;
  padding: .05rem .5rem;
  font-size: .7rem;
  color: var(--warn);
  border: 1px solid currentColor;
  border-radius: 999px;
}

.term__body { display: flex; gap: 1.8rem; align-items: flex-start; }
.term__text { flex: 1; min-width: 0; }
.term__figures { flex: 0 0 auto; width: 19rem; max-width: 42%; }

.field { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .6rem; margin-bottom: .5rem; }
.field__label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-3);
  padding-top: .38rem;
  letter-spacing: .03em;
}
.field__value { font-size: .92rem; }

.field--refs .field__label { padding-top: .3rem; }
.refs { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.refs li { padding: .1rem 0; color: var(--ink-2); }
.ref__arrow { margin: 0 .4rem; color: var(--ink-3); }

/* ---------- 図 ---------- */

.figure { margin: 0 0 1.2rem; }

.figure__zoom {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  cursor: zoom-in;
  overflow: hidden;
  width: 100%;
}
.figure__zoom:hover { border-color: var(--accent); }
.figure__zoom img { display: block; width: 100%; height: auto; }

.figure figcaption { margin-top: .45rem; font-size: .78rem; line-height: 1.65; }
.figure__title { display: block; font-weight: 700; color: var(--ink-2); }
.figure__desc  { display: block; color: var(--ink-3); margin-top: .15rem; }
.figure__note  { font-size: .78rem; color: var(--ink-3); }

/* ---------- ライトボックス ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(10, 14, 17, .88);
  cursor: zoom-out;
  border: none;
}
.lightbox::backdrop { background: rgba(10, 14, 17, .88); }
.lightbox img {
  max-width: 100%;
  max-height: 85vh;
  /* 原画像は横300px。拡大しても精細にはならないため等倍を上限にする */
  width: auto;
  image-rendering: auto;
  border-radius: 6px;
  background: #fff;
}
.lightbox__close {
  position: fixed;
  top: 1rem; right: 1.25rem;
  width: 2.4rem; height: 2.4rem;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }

/* ---------- ホーム ---------- */

.lede { color: var(--ink-2); margin-top: -.7rem; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .8rem;
  margin: 2rem 0 3rem;
}
.cat-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1.1rem 1.2rem;
  color: inherit;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.cat-card:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-2px);
}
.cat-card__name  { font-weight: 700; }
.cat-card__count { font-size: .78rem; color: var(--ink-3); }

.about h2 { font-size: 1.1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.about p { font-size: .92rem; }
.about__sign { text-align: right; color: var(--ink-2); }

/* ---------- フッター ---------- */

/* 常時表示する細いバー。ヘッダーが sticky なので上下で枠になる。
   position:sticky + bottom:0 は最後の要素に効かせると、
   スクロール中は画面下に貼り付き、最後は自然に収まる。 */
.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  padding: .4rem 1.25rem;
  font-size: .76rem;
  color: var(--ink-3);
  line-height: 1.6;
}

.site-footer__line {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em 1em;
}
.site-footer__copy { color: var(--ink-3); }

/* 出典表記は本文の末尾に置く */
.atlas-credit {
  margin: 3rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-2);
  font-size: .78rem;
  line-height: 1.8;
  color: var(--ink-3);
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 60rem) {
  .term__body { display: block; }
  .term__figures { width: auto; max-width: 21rem; margin-top: 1rem; }
}

@media (max-width: 48rem) {
  .layout { grid-template-columns: 1fr; gap: 0; padding: 0 1rem; }

  .site-footer { padding: .35rem 1rem; font-size: .72rem; }

  .site-header__bar { flex-wrap: wrap; gap: .6rem 1rem; padding: .6rem 1rem; }
  .site-search { width: 100%; margin-left: 0; order: 3; }
  .site-header__back { order: 2; margin-left: auto; padding: .34rem .8rem; font-size: .76rem; }
  .site-nav { padding: 0 1rem .1rem; }

  /* サイドバーは折りたたみ式にする (初期状態は app.js が閉じる) */
  .sidebar {
    position: static;
    max-height: none;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar__list { max-height: 60vh; }
  .sidebar__head {
    cursor: pointer;
    padding: .35rem 0;
    align-items: center;
  }
  .sidebar__head::after {
    content: "";
    width: .5rem; height: .5rem;
    margin-left: auto;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s;
  }
  .sidebar__disclosure[open] .sidebar__head::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .field { grid-template-columns: 1fr; gap: .1rem; margin-bottom: .8rem; }
  .field__label { padding-top: 0; }

  .page-title { font-size: 1.35rem; }
  .main { padding: 1.5rem 0 4rem; }
  .term__figures { max-width: 100%; }
}