*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; height: 100%; }
body {
  background: #fff;
  color: #000;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, input, select {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  margin: 0;
}
button { cursor: pointer; padding: 6px 12px; letter-spacing: .08em; line-height: 1.2; }
button:hover { background: #000; color: #fff; }
a { color: inherit; }
[hidden] { display: none !important; }

/* 読み込み中は白地で覆い、準備ができたら短いフェードで消える */
#loading {
  position: fixed; inset: 0; z-index: 100;
  background: #fff;
  transition: opacity .3s ease-out;
}
#loading.done { opacity: 0; pointer-events: none; }

/* ---------- MAP ---------- */
#map {
  position: fixed; inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#map.dragging { cursor: grabbing; }
#lines { position: absolute; left: 0; top: 0; pointer-events: none; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.node {
  position: absolute; left: 0; top: 0;
  padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .9s, color .9s;
}
/* 単語名の「( )」とその中身は少し小さく（layout.js の PAREN_SCALE と同じ倍率） */
.paren { font-size: .75em; }
.node:hover { background: #f2f2f2; }
.node.flash { background: #000; color: #fff; transition: none; }

.ui { position: fixed; z-index: 10; }
#search { left: 16px; top: 16px; width: 240px; max-width: calc(100vw - 270px); }
#q { width: 100%; height: 34px; padding: 0 10px; letter-spacing: .08em; }
#q::placeholder { color: #000; opacity: 1; }
#q:focus::placeholder { color: #aaa; }
#cands { border: 1px solid #000; border-top: 0; background: #fff; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#cands:empty { display: none; }
.cand { padding: 6px 10px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; overflow: hidden; }
.cand + .cand { border-top: 1px solid #e5e5e5; }
.cand small { color: #888; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 70%; }
.cand.on, .cand:hover { background: #000; color: #fff; }
.cand.on small, .cand:hover small { color: #bbb; }
/* 他の候補にマウスが乗っている間は、選択中の候補を白に戻す */
#cands:hover .cand.on:not(:hover) { background: #fff; color: #000; }
#cands:hover .cand.on:not(:hover) small { color: #888; }
#topright { right: 16px; top: 16px; display: flex; gap: 8px; }
#topright button { height: 34px; padding: 0 12px; }
#credit {
  right: 12px; bottom: 10px;
  font-size: 10px; letter-spacing: .1em;
  text-decoration: none; color: #888;
  background: #fff;
  padding: 2px 4px;
}
#credit:hover { color: #000; }

/* ---------- LIST ---------- */
#list {
  position: fixed; inset: 0; z-index: 20;
  background: #fff;
  overflow-y: auto;
  /* 絞り込みで縦スクロールバーが出たり消えたりしても、表示が横にずれないよう幅を常に確保する */
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  transition: opacity .18s;
}
#list.fade { opacity: 0; }
.bar { position: sticky; top: 0; z-index: 2; background: #fff; }
.bar-in {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px;
}
/* SORT・FILTER・RETURN は同じ高さ（ボタン 28px ＋ 上下余白 4px ＋ 枠） */
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid #000; padding: 4px 8px; }
.lbl { font-size: 13px; letter-spacing: .08em; color: #000; }
/* FILTER の右に表示中の単語の数 */
.count { font-size: 13px; letter-spacing: .08em; color: #000; white-space: nowrap; padding: 0 4px; }
.group button, select { height: 28px; padding: 0 10px; font-size: 13px; line-height: 1; }
.group button.on { background: #000; color: #fff; }
#return { height: 38px; padding: 0 14px; }
.seg { display: flex; }
.seg button + button { margin-left: -1px; }
.sel { position: relative; display: inline-flex; align-items: center; }
.sel span { font-size: 13px; padding: 0 6px 0 0; color: #000; }
select {
  -webkit-appearance: none; appearance: none;
  min-width: 48px; cursor: pointer;
  text-align: center;
}
select.on { background: #000; color: #fff; }
.group .pick { min-width: 48px; }
.pick.on { background: #000; color: #fff; }
.kana {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(5, 34px); gap: 4px;
  padding: 8px; background: #fff; border: 1px solid #000;
  max-height: 60vh; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
}
.kana button { width: 34px; height: 30px; padding: 0; font-size: 14px; letter-spacing: 0; }
.kana button.on { background: #000; color: #fff; }
.kana button:disabled { color: #ccc; border-color: #e3e3e3; cursor: default; background: #fff; }
.kana .k-clear { grid-column: 1 / -1; width: auto; }
.chip { background: #000; color: #fff; }
.chip:hover { background: #fff; color: #000; }
#grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#grid { max-width: 1200px; margin: 0 auto 64px; padding: 0 16px; }
@media (min-width: 640px) { #grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 860px) { #grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1080px) { #grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cell {
  border: 1px solid #000;
  min-height: 40px;
  padding: 6px 8px;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
  cursor: pointer;
  background: #fff;
}
.cell:hover { background: #000; color: #fff; }
.cell span { white-space: nowrap; }
.cell.s-m { font-size: 12px; }
.cell.s-s { font-size: 11px; }
.cell.s-s span { white-space: normal; }

/* ---------- DETAIL ---------- */
#detail { position: fixed; inset: 0; z-index: 40; }
#detail .backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, .88); }
#detail .wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.panel {
  position: relative;
  --strip: 30px; /* 検索ボタンの帯 */
  --top: 26px;   /* 帯の下から単語名まで */
  padding-top: var(--strip); /* 検索ボタンの下からスクロール */
  width: 640px; max-width: 100%;
  max-height: 100%;
  border: 1px solid #000;
  background: #fff;
  display: flex; flex-direction: column;
}
.panel .scroll {
  overflow-y: auto;
  padding: var(--top) 40px 40px;
  -webkit-overflow-scrolling: touch;
}
.panel .gsearch { position: absolute; right: 29px; top: -1px; height: 31px; font-size: 12px; padding: 0 12px; z-index: 1; }
.panel .close { position: absolute; right: -1px; top: -1px; width: 31px; height: 31px; padding: 0; font-size: 18px; line-height: 1; z-index: 1; }
.body { text-align: left; display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.d-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.d-head .d-read + .d-var { margin-top: -4px; }
/* --min: 折り返しを避けて小さくする時の下限（app.js の fitTitle） */
.d-word { --min: 28px; font-size: 39px; font-weight: 500; line-height: 1.2; letter-spacing: .1em; overflow-wrap: anywhere; }
.d-read { font-size: 10px; color: #555; letter-spacing: .1em; }
.d-var { font-size: 15px; color: #222; }
.d-var span + span::before { content: "/"; color: #aaa; margin: 0 .5em; }
.d-mean { font-size: 15px; line-height: 1.8; }
.d-mean > div { white-space: pre-wrap; overflow-wrap: anywhere; }
/* 「>」で始まる行（引用）は薄いグレーの帯 */
.d-mean > .quote { background: #efefef; padding: 2px 12px; margin: 4px 0; }
.d-links { font-size: 11px; color: #555; line-height: 1.7; }
.d-links > div { white-space: pre-wrap; overflow-wrap: anywhere; }
/* タグと、それに紐づく単語 */
/* タグ部分は5行ほど（単語ボタン1行 ≒ 31px）まで表示し、残りはこの中だけでスクロール */
.d-tags-in {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  max-height: calc(5 * 31px); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* 結ぶ相手のいるタグだけ押せる */
.d-tagrow button.tag { cursor: pointer; }
.d-tagrow button.tag:hover { background: #000; border-color: #000; color: #fff; }
/* 説明文との区切り線（説明文〜線の間隔は .body の gap 18px ＋ 6px） */
.body > .d-tags { margin-top: 6px; border-top: 1px solid #000; padding-top: 18px; }
.d-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
/* タグは黒地で小さめ、単語は白地の枠付きボタン */
.d-tagrow .tag { font-size: 12px; padding: 3px 10px; border: 1px solid #444; background: #444; color: #fff; line-height: 1.4; letter-spacing: .04em; }
.d-rel { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 2px; }
.d-rel .rw { font-size: 13px; padding: 3px 10px; letter-spacing: 0; line-height: 1.4; text-align: left; }
.d-rel .rw:hover { background: #f0f0f0; color: #000; }
.panel .scroll { transition: opacity .15s; }
/* ---------- ABOUT ---------- */
/* --fs: 文字の大きさ / --lh: 行の高さ（倍率）/ --ch: 飾りの高さ */
.about { --fs: 16px; --lh: 2.1; --ch: 26px; font-size: var(--fs); line-height: var(--lh); }
.about p { margin: 0; }
.about a { text-decoration: underline; text-underline-offset: 3px; }
/* 飾り（同じ幅）と説明（左揃え）の2列。間は1文字分、行の間隔は均等 */
.about .guide {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 1em; row-gap: 2px; margin: 20px 0; align-items: start;
}
.about .g-text { white-space: nowrap; min-width: 0; overflow: hidden; line-height: calc(var(--lh) * var(--fs)); }
.about .note { font-size: 13px; line-height: 1.9; color: #333; }
/*
 * 画面上の部品を模した飾り（押せない）。4つとも同じ高さ・同じ幅。
 * 説明の1行目の文字の中心に、飾りの中心を合わせる
 * （Noto Sans JP の文字の中心は行の中央より少し下にある。実測で調整）。
 */
.about .ex {
  display: flex; align-items: center; justify-content: center;
  height: var(--ch); padding: 0 9px 0.03em;
  margin-top: calc((var(--lh) * var(--fs) - var(--ch)) / 2 + 0.04 * var(--fs));
  border: 1px solid #000; background: #fff; color: #000;
  line-height: 1;
  cursor: default; user-select: none; -webkit-user-select: none;
}
.about .ex-word { font-size: 15px; }
.about .ex-tag { font-size: 12px; border-color: #444; background: #444; color: #fff; letter-spacing: .04em; }
.about .ex-btn { font-size: 12px; letter-spacing: .08em; }

#ghost {
  position: fixed; z-index: 50;
  border: 1px solid #000;
  background: #fff;
  pointer-events: none;
}

@media (max-width: 600px) {
  .about { --fs: 15px; --ch: 24px; }
  .about .note { font-size: 12px; }
  .about .ex { padding: 0 7px 0.03em; }
  .about .ex-word { font-size: 14px; }
  .about .ex-tag, .about .ex-btn { font-size: 11px; }
  .panel { --top: 22px; }
  .panel .scroll { padding: var(--top) 20px 28px; }
  .d-word { --min: 20px; font-size: 27px; }
  .d-mean { font-size: 13px; }
  .d-var { font-size: 14px; }
  .d-rel .rw { font-size: 12px; }
  .d-tagrow .tag { font-size: 11px; }
  .cell { min-height: 36px; padding: 5px 4px; font-size: 14px; }
  .cell.s-m { font-size: 11px; }
  .cell.s-s { font-size: 10px; }
  .bar-in { padding: 10px 12px; gap: 8px; }
  .controls { gap: 6px; }
  .group { padding: 3px 6px; gap: 6px; }
  .lbl, .sel span, .count { font-size: 12px; letter-spacing: 0; }
  .sel span { padding-right: 4px; }
  .group button, select { height: 26px; font-size: 12px; padding: 0 7px; letter-spacing: 0; }
  select, .group .pick { min-width: 40px; }
  #return { height: 34px; font-size: 12px; padding: 0 8px; letter-spacing: .04em; }
  #grid { padding: 0 12px; }
}