/* ===========================================================
   実写エロ記憶検索DB — 曖昧記憶検索 フロントエンド
   黒地に赤(Netflix仕様) / システムフォント

   配色の理由(2026-08-01 決定):
   実写動画を選ばせる画面なので、動画サービスの視覚言語=「黒地に赤」に寄せる。
   地は #141414(Netflix の背景)、アクセントは #e50914(Netflix レッド)。
   同人版(doujindb.jp)が「和紙に墨と朱」なので明度が反転し、一目で別ブランド
   だと分かる。黒地はサムネイルが映えるため、作品を選ばせる画面とも相性が良い。

   赤は「塗り用」と「文字用」で必ず分ける:
   ・#e50914 を暗地に**文字として**置くと 3.8:1 しか出ない(4.5:1 を割る)
   ・#e50914 の**塗りの上の白**は 4.79:1 で通る
   よって塗り = --accent-fill(#e50914)/文字・枠線 = --accent(明るい赤)。
   コントラストは本文・UI文字とも 4.5:1 を下回らないよう取ってある。
   =========================================================== */

:root {
  --bg:        #141414;
  --bg-raise:  #1f1f1f;
  --bg-card:   #181818;
  --line:      #2f2f2f;
  --fg:        #ffffff;   /* 対 --bg 18.4:1 */
  --fg-dim:    #b3b3b3;   /* 対 --bg  8.8:1 */
  --fg-faint:  #949494;   /* 対 --bg  6.1:1(--bg-raise 上でも 5.4:1) */
  /* 暗地に置く「文字・枠線としての赤」。--accent-dk は「濃い赤」ではなく
     **明るい赤**で、文字のホバー(一段明るく)に使う */
  --accent:    #ff4d57;   /* 対 --bg  5.7:1 */
  --accent-dk: #ff8189;   /* 対 --bg  7.7:1 */
  --accent-sf: rgba(229, 9, 20, .18);
  /* 塗りとしての赤(Netflix レッドそのもの)と、そのホバー。
     ホバーは**暗い側**へ振る。明るくすると白文字が 4.5:1 を割るため
     (#e50914 + 白 = 4.79:1 で既に余裕が無い)。 */
  --accent-fill:    #e50914;
  --accent-fill-hi: #c1000c;
  /* 赤の塗りの上に載せる文字。塗りが十分暗いので白で通る */
  --on-accent: #ffffff;
  /* サイト名(.wordmark)・作品数に使う赤(旧 --logo-gold の置き換え) */
  --logo-accent: #ff3b46;   /* 対 --bg 5.2:1 */
  /* 掲示板系リンクの色。掲示板画面の外(検索画面の入口)でも使うので :root に置く。
     暗地なので古典的な濃紺・濃紫ではなく、明度を上げた青・紫にする */
  --bbs-link:    #86b4ff;   /* 対 --bbs-bg 8.1:1 */
  --bbs-visited: #c2a0ea;   /* 対 --bbs-bg 7.7:1 */
  --radius:    14px;
  --maxw:      560px;
  --tap:       48px;
}


/* 作品数の表示に使う極太ゴシック(Dela Gothic One、SIL Open Font License 1.1)。
   数字とカンマだけのサブセットを自前配信する(外部CDNに依存しない。約2.5KB)。 */
@font-face {
  font-family: 'Dela Gothic Digits';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dela-gothic.woff2') format('woff2');
  unicode-range: U+2c, U+30-39;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100dvh; }

button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

.app {
  max-width: var(--maxw);
  margin: 0 auto;
  /* 上端の余白は持たない。sticky の .sitehead が最上部に貼り付くので、
     ここに余白を残すと「ヘッダーの上に白い帯」が見えてしまう。
     ノッチぶんだけは確保する(ヘッダーが切り欠きに潜らないように)。 */
  padding: env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: screen-in .28s ease both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- ボタン ---------- */
.btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  min-height: var(--tap);
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .15s, border-color .15s, transform .08s, opacity .15s;
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: default; }
/* 赤の塗りを半透明にすると黒地では暗い小豆色に沈み、白文字が読めなくなる。
   無効状態は「彩度を落とした暗い赤の塗り+淡色の文字」で作り、不透明度には頼らない。 */
.btn--primary[disabled] {
  opacity: 1;
  background: #3a1a1c;
  border-color: #4d2528;
  color: #d6cccc;          /* 対 #3a1a1c 9.9:1 */
}

.btn--primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  border-color: var(--accent-fill);
}
.btn--primary:hover:not([disabled]) { background: var(--accent-fill-hi); border-color: var(--accent-fill-hi); }

.btn--ghost {
  background: var(--bg-raise);
  color: var(--fg);
  border-color: var(--line);
}
.btn--ghost:hover:not([disabled]) { border-color: var(--fg-faint); }

.btn--link {
  color: var(--fg-dim);
  padding: 10px 6px;
  min-height: 40px;
  font-weight: 500;
  font-size: .9rem;
}
.btn--link:hover:not([disabled]) { color: var(--fg); }

.btn--xl { width: 100%; font-size: 1.05rem; min-height: 56px; }
.btn--sm { min-height: 34px; padding: 6px 12px; font-size: .85rem; border: 1px solid var(--line); }

/* ---------- 年齢確認 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 6, 8, .92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay__panel {
  width: 100%;
  max-width: 380px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}
.overlay__title { margin: 14px 0 8px; font-size: 1.3rem; }
.overlay__body { margin: 0 0 22px; color: var(--fg-dim); font-size: .92rem; }
.overlay__actions { display: grid; gap: 10px; }

/* ---------- ロゴ ---------- */
/* 筆文字ロゴ(黒地に赤)。ページも黒基調なので背景を敷かずそのまま置く。
   画像そのものに赤い発光が入っているので、CSS側で影は足さない。
   .wordmark は画像が用意できるまでの暫定表示だったもの。今は使っていないが、
   ロゴを差し替える期間の受け皿として残してある。 */
.landing__logo img {
  display: block;
  width: 100%;          /* 画面幅いっぱい。ロゴが看板なので最大まで見せる */
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}
img.overlay__logo {
  display: block;
  width: min(320px, 90%);
  height: auto;
  margin: 0 auto 6px;
}
.sitehead__logo img { height: 34px; width: auto; display: block; }

.wordmark {
  display: block;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-weight: 700;
  color: var(--logo-accent);
  letter-spacing: .10em;
  line-height: 1.3;
  white-space: nowrap;
}
/* 「記憶検索」だけ一段明るくして、サイトの機能が名前の中で立つようにする */
.wordmark b { color: var(--accent-dk); font-weight: 700; }

.landing__logo { margin: 0; }
.landing__logo .wordmark {
  font-size: clamp(1.45rem, 7.2vw, 2.15rem);   /* 看板なので画面幅なりに大きく */
  text-align: center;
}
p.overlay__logo {
  margin: 0 auto 6px;
  font-size: clamp(1.1rem, 5.4vw, 1.35rem);
  text-align: center;
}

/* ---------- 検索画面(ランディング兼用) ---------- */
.landing__head { text-align: center; padding: 10px 0 4px; }
.landing__tagline {
  margin: 8px 0 0;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.55;
}
.landing__stat {
  margin: 14px 0 14px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
/* 作品数は赤の極太数字。サイト名(.wordmark)と同じ赤で世界観を揃える。 */
.landing__stat-num {
  display: block;
  font-family: 'Dela Gothic Digits', "Hiragino Sans", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--logo-accent);
  letter-spacing: .04em;
  line-height: 1.2;
  /* 暗地の上で細い赤は痩せて見えるので輪郭を太らせる */
  -webkit-text-stroke: 1.2px var(--logo-accent);
  paint-order: stroke fill;
}
.landing__stat-label { font-size: .85rem; color: var(--fg-dim); }
.landing__stat-asof {
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  color: var(--fg-faint);
  letter-spacing: .02em;
}

.landing__lead {
  margin: 6px 0 0;
  text-align: center;
  font-size: .88rem;
  color: var(--fg-dim);
  line-height: 1.7;
}

.landing__start-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: .76rem;
  color: var(--fg-faint);
}

.landing__how {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.landing__how li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-dim);
  font-size: .92rem;
}
.landing__how span {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
}
.landing__note {
  margin: 0 0 14px;
  font-size: .82rem;
  color: var(--fg-faint);
  text-align: center;
}

/* ---------- 結果 ---------- */
.result__lead { margin: 18px 0 4px; font-size: 1.35rem; text-align: center; }
/* 見出し直下の「検索した内容」。入力の文脈を結果画面でも保持する */
.result__query {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}
.result__query-chip {
  font-size: .8rem;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-sf);
  border: 1px solid var(--accent);
}
.result__query-chip--weak,
.result__query-chip--dead {
  color: var(--fg-faint);
  background: var(--bg-raise);
  border-color: var(--line);
}
.result__query-chip--dead { text-decoration: line-through; }
.result__query-chip--era { color: var(--fg-dim); background: var(--bg-raise); border-color: var(--line); }

.result__sub { margin: 0 0 20px; text-align: center; color: var(--fg-faint); font-size: .82rem; }

.cards { display: grid; gap: 12px; }
.cards__more { display: grid; }
.cards__more .btn { width: 100%; }

.card {
  display: grid;
  grid-template-columns: 1fr 132px;
  grid-template-areas:
    "info thumb"
    "cta  cta"
    "fb   fb"
    "foot foot";
  gap: 10px 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  animation: card-in .38s ease forwards;
}
@keyframes card-in { to { opacity: 1; transform: none; } }

.card--top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-sf), 0 6px 20px rgba(0, 0, 0, .45); }

/* 枠は画像そのものに付ける(箱を引き伸ばして中で contain すると、
   画像の外側に余白の帯が出て枠がずれて見えるため)。幅だけ決めて高さは比率なり。 */
.card__thumb {
  grid-area: thumb;
  width: 100%;
  height: auto;
  /* 表紙は横長・縦長どちらもあり、上端に固定すると下に余白が偏る。
     情報列に対して縦中央に置くと、余った分が上下に割れて収まりが良い。 */
  align-self: center;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);   /* 黒背景に黒い表紙が溶けないように */
  background: var(--bg-raise);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .40);
}
/* 画像が無い/読めないときだけ、レイアウトが崩れないよう縦横比を与える */
.card__thumb--ph {
  aspect-ratio: 3 / 4;
  box-shadow: none;
  display: grid;
  place-items: center;
  color: var(--fg-faint);
  font-size: .7rem;
  border: 1px dashed var(--line);
}
.card__main { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.card__rank { font-size: .72rem; color: var(--fg-faint); display: flex; align-items: center; }
/* 一致バッジは順位と同じ行に置くと順位が埋もれるので、独立した行にまとめる */
.card__badges { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* 順位ラベル。上位3件は金・銀・銅で段階的に強く出す(4位以降は控えめのまま)。
   赤黒に変えても金属色は「順位」の記号として読めるので意匠は残す(赤は
   アクセントに使い切っているため、順位まで赤にすると序列が読めなくなる)。
   金属色の階調は**黒地(#141414)の上で**組んである(地の暗い側の端でも
   4.5:1 を割らない。最小は銅の #c98a55 で 6.4:1)。
   明るい地に載せ替えるときは3本とも取り直すこと。 */
.card__rank-no { font-weight: 700; letter-spacing: .02em; }
.card__rank-no--top1,
.card__rank-no--top2,
.card__rank-no--top3 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card__rank-no--top1,
.card__rank-no--top2,
.card__rank-no--top3 {
  /* 地の金属色より広い背景を右から左へ流して光沢が走るように見せる */
  background-size: 260% 100%;
  background-position: 200% 0;
  animation: rank-shine 4.2s ease-in-out infinite;
}
.card__rank-no--top1 {
  font-size: 1.05rem;
  background-image: linear-gradient(100deg,
    #cfa733 0%, #e0bd58 30%, #ffe9ae 46%, #e0bd58 62%, #cfa733 100%);
}
.card__rank-no--top2 {
  font-size: .95rem;
  background-image: linear-gradient(100deg,
    #9aa4b2 0%, #b6bfcb 30%, #e9eef6 46%, #b6bfcb 62%, #9aa4b2 100%);
  animation-delay: .18s;
}
.card__rank-no--top3 {
  font-size: .88rem;
  background-image: linear-gradient(100deg,
    #c98a55 0%, #dda77b 30%, #f6cda6 46%, #dda77b 62%, #c98a55 100%);
  animation-delay: .36s;
}

/* 右(200%)から左(-60%)へ一気に流し、残りは休む */
@keyframes rank-shine {
  0%   { background-position: 200% 0; }
  45%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card__rank-no--top1,
  .card__rank-no--top2,
  .card__rank-no--top3 { animation: none; background-position: 50% 0; }
}

/* 記憶ワードが「どのフィールドで」一致したかの目印(語ごとに1つ) */
.badge--kw {
  font-size: .66rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: var(--accent-sf);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.45;
  /* 一致フィールドが3つ並ぶと1行に収まらず、狭い画面でサムネへはみ出す。
     折り返して列の中に必ず収める。 */
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.card__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__pct {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card__pct b { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.card__pct span { font-size: .85rem; font-weight: 700; }
.card__pct em { font-style: normal; font-size: .72rem; color: var(--fg-faint); margin-left: 4px; }

/* 補足つきの長いラベルなので、狭い画面でも折り返さず収まるよう文字を少し詰める */
.card__cta { grid-area: cta; width: 100%; min-height: 42px; padding: 9px 10px; font-size: .84rem; letter-spacing: -.01em; }
.card__fb { grid-area: fb; display: flex; gap: 8px; }

/* サイト内の作品ページへの控えめな導線(主役は上の販売ページのボタン) */
/* カード下段。左に自サイト導線、右に共有 */
.card__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__share {
  font-size: .76rem;
  color: var(--fg-dim);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.card__share:hover { color: var(--fg); border-color: var(--fg-faint); }

.card__inner-link {
  font-size: .76rem;
  color: var(--fg-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card__inner-link:hover { color: var(--accent); }
.card__fb .btn {
  flex: 1;
  min-height: 34px;
  padding: 4px 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  background: transparent;
}
.card__fb .btn:hover:not([disabled]) { color: var(--fg); border-color: var(--fg-faint); }
.card__fb .btn.is-sent {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-sf);
  opacity: 1;
}

.result__foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

/* ---------- 記憶ワード入力 ---------- */
.kw { display: grid; gap: 10px; }
.kw--result {
  margin-top: 22px;
  padding: 16px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* 検索画面の主役。検索が核なのでアクセント枠で最も目立たせる */
.kw--hero {
  margin: 0 0 14px;
  padding: 14px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-sf);
  border-radius: var(--radius);
}
.kw__title--hero { font-size: 1.15rem; }
.kw__lead { margin: -4px 0 0; font-size: .84rem; color: var(--fg-dim); }

.kw__title { margin: 0; font-size: .9rem; font-weight: 700; }

.kw__row { display: flex; gap: 8px; }
.kw__input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 14px;
  font: inherit;
  font-size: 1rem;          /* iOS の自動ズーム回避 */
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.kw__input::placeholder { color: var(--fg-faint); }
.kw__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.kw__add { flex: 0 0 auto; padding: 12px 16px; }

.kw__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kw__chips:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--accent-sf);
  border: 1px solid var(--accent);
  border-radius: 999px;
  animation: screen-in .2s ease both;
}
.chip__x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 50%;
}
.chip__x:hover { color: var(--accent); }
.chip__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- 絞り込み状況(件数プレビュー・語ごとの注意) ---------- */
.kw__status { display: grid; gap: 4px; }
.kw__status:empty { display: none; }
.kw__stat { margin: 0; font-size: .92rem; font-weight: 700; }
.kw__stat b {
  font-size: 1.4rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.kw__stat--ok { color: var(--fg); }
.kw__stat--wait { color: var(--fg-faint); font-weight: 500; font-size: .8rem; }
.kw__stat--warn {
  color: #ffd27a;
  font-size: .84rem;
  font-weight: 600;
  background: rgba(255, 210, 122, .1);
  border: 1px solid rgba(255, 210, 122, .35);
  border-radius: 10px;
  padding: 8px 10px;
}
.kw__word { margin: 0; font-size: .76rem; color: var(--fg-faint); }
.kw__word--dead { color: #ff9a9a; }
.kw__word--weak { color: var(--fg-dim); }

/* 絞り込みに使えなかった語のチップは色を落とす */
.chip--dead { border-color: #ff9a9a; background: rgba(255, 154, 154, .1); color: var(--fg-dim); }
.chip--weak { border-color: var(--line); background: var(--bg-card); color: var(--fg-dim); }

.kw__note { margin: 0; font-size: .76rem; color: var(--fg-faint); }

/* ---------- いつ頃見たか(任意) ---------- */
/* ワード入力の補助なので、枠線1本で区切るだけにして主役を食わない */
.era {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.era__title { margin: 0; font-size: .84rem; font-weight: 700; color: var(--fg-dim); }
.era__row { display: flex; gap: 8px; flex-wrap: wrap; }
.era__select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem;          /* iOS の自動ズーム回避 */
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.era__select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.era__select[hidden] { display: none; }
.era__note { margin: 0; font-size: .76rem; color: var(--fg-faint); }
.kw__research { width: 100%; font-size: .9rem; min-height: 44px; }

.hint {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 10px;
  animation: screen-in .3s ease both;
}
.hint__title { margin: 0; font-size: .95rem; font-weight: 700; }
.hint__body { margin: 0; font-size: .84rem; color: var(--fg-dim); }

/* ---------- ローディング ---------- */
.loading {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .68);
}
.loading__dots { display: flex; gap: 7px; }
.loading__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot 1s infinite ease-in-out;
}
.loading__dots i:nth-child(2) { animation-delay: .15s; }
.loading__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ---------- トースト ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  width: calc(100% - 32px);
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--accent-dk);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  animation: screen-in .2s ease both;
}
.toast__msg { flex: 1; font-size: .88rem; }

/* ===========================================================
   戻り確認バー(外部サイトから戻ってきたときだけ画面下に固定)
   トーストと同時に出ることは無いが、重なっても読めるよう z-index は
   トースト(70)より下に置く。
   =========================================================== */
.retbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 65;
  width: calc(100% - 24px);
  max-width: 520px;
  padding: 12px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
  animation: screen-in .2s ease both;
}
.retbar__msg { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; }
.retbar__msg b { font-weight: 700; }
.retbar__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.retbar__btns .btn { flex: 1 1 auto; }
.toast .btn { flex: 0 0 auto; background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }

/* ===========================================================
   文章ページ(web/pages/*.html — 規約・プライバシー等)
   検索UIと同じ黒地・赤のまま、読み物として行間を広く取る。
   =========================================================== */
.doc {
  max-width: 720px;              /* 本文は検索UI(560px)より少し広く取る */
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ページ上部の戻り導線。検索に戻る道を必ず1つ置く */
.doc__nav { padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.doc__nav a { color: var(--fg-dim); font-size: .85rem; font-weight: 600; text-decoration: none; }
.doc__nav a:hover { color: var(--accent); }

.doc__head { margin: 22px 0 6px; }
.doc__title { margin: 0; font-size: 1.5rem; line-height: 1.4; }
.doc__lead { margin: 10px 0 0; color: var(--fg-dim); font-size: .92rem; }
.doc__updated { margin: 8px 0 0; color: var(--fg-faint); font-size: .78rem; }

.doc__body { flex: 1; }
.doc__body h2 {
  margin: 30px 0 10px;
  padding-left: 10px;
  font-size: 1.08rem;
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}
.doc__body h3 { margin: 20px 0 6px; font-size: .96rem; }
.doc__body p { margin: 0 0 12px; font-size: .93rem; }
.doc__body ul, .doc__body ol { margin: 0 0 14px; padding-left: 1.35em; }
.doc__body li { margin: 0 0 6px; font-size: .93rem; }
.doc__body a { color: var(--accent); }
.doc__body a:hover { color: var(--accent-dk); }
.doc__body dl { margin: 0 0 14px; }
.doc__body dt { font-weight: 700; font-size: .93rem; margin-top: 12px; }
.doc__body dd { margin: 2px 0 0; padding-left: 0; font-size: .93rem; color: var(--fg-dim); }

/* 「ここは特に読ませたい」1段落を囲う枠(アフィリエイト表示・年齢制限など) */
.doc__callout {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--accent-sf);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 600;
}
.doc__note {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--fg-dim);
}
/* 連絡先など、そのまま読み取ってほしい値 */
.doc__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 8px;
}

/* 定義表(運営者情報)。狭い画面では縦積みになる */
.doc__table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .92rem; }
.doc__table th, .doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.doc__table th { width: 34%; white-space: nowrap; color: var(--fg-dim); background: var(--bg-raise); }

/* ===========================================================
   共通フッタ(検索画面・結果画面・文章ページで同じ見た目)
   18歳未満禁止とアフィリエイト表示は常時見えるようにする。
   =========================================================== */
.site-foot {
  margin-top: 32px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  text-align: center;
}
.site-foot__warn {
  margin: 0;
  font-size: .76rem;
  line-height: 1.7;
  color: var(--fg-dim);
}
.site-foot__warn b { color: var(--accent); }
.site-foot__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}
.site-foot__nav a {
  font-size: .78rem;
  color: var(--fg-dim);
  text-decoration: none;
  padding: 2px 0;
}
.site-foot__nav a:hover { color: var(--accent); text-decoration: underline; }
.site-foot__copy { margin: 0; font-size: .72rem; color: var(--fg-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (min-width: 600px) {
  .card { grid-template-columns: 1fr 150px; }
}

/* FANZA API クレジット・姉妹サイト表示(既存メディアとフッタの体裁を揃える) */
.site-foot__api,
.site-foot__net {
  margin: 6px 0 0;
  font-size: .74rem;
  color: var(--fg-faint);
  text-align: center;
}
.site-foot__api a,
.site-foot__net a { color: var(--fg-dim); }

/* ===========================================================
   編集部メンバーカード(web/pages/operator.html)
   既存の .doc__* を上書きせず、新規クラスのみで完結させる。
   =========================================================== */
.editor-card {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.editor-card__name {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.4;
}
.editor-card__role {
  margin: 4px 0 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
}
.editor-card__dl { margin: 0; }
.editor-card__dl dt {
  margin: 12px 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--fg-dim);
}
.editor-card__dl dt:first-child { margin-top: 0; }
.editor-card__dl dd {
  margin: 3px 0 0;
  padding-left: 0;
  font-size: .9rem;
  line-height: 1.75;
}

/* ===========================================================
   お問い合わせフォーム(web/pages/contact.html)
   =========================================================== */
.form { margin: 0 0 22px; }
.form__row { margin: 0 0 18px; }
.form__label {
  display: block;
  margin: 0 0 6px;
  font-size: .88rem;
  font-weight: 700;
}
.form__req,
.form__opt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  vertical-align: 2px;
}
.form__req { background: var(--accent-sf); color: var(--accent-dk); border: 1px solid var(--accent); }
.form__opt { background: var(--bg-raise); color: var(--fg-faint); border: 1px solid var(--line); }
.form__control {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem;               /* iOS の自動ズーム回避のため 16px 相当を保つ */
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.form__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-sf);
}
.form__control--area { line-height: 1.7; resize: vertical; min-height: 180px; }
.form__hint { margin: 6px 0 0; font-size: .78rem; color: var(--fg-faint); line-height: 1.7; }
.form__hint a { color: var(--fg-dim); }

/* 種別に応じて出し分ける補足ブロック */
.form__extra {
  margin: -6px 0 18px;
  padding: 12px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: .86rem;
  color: var(--fg-dim);
}
.form__extra-title { margin: 0 0 8px; font-weight: 700; color: var(--fg); font-size: .88rem; }
.form__extra ul { margin: 0 0 8px; padding-left: 1.25em; }
.form__extra li { margin: 0 0 4px; font-size: .86rem; }
.form__extra p:last-child { margin-bottom: 0; }

.form__agree { margin: 0 0 14px; font-size: .8rem; color: var(--fg-dim); line-height: 1.8; }
.form__actions { margin: 0 0 12px; }
.form__submit {
  width: 100%;
  padding: 13px 18px;
  font: inherit;
  font-size: .96rem;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent-fill);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.form__submit:hover:not(:disabled) { background: var(--accent-fill-hi); }
.form__submit:disabled { opacity: .55; cursor: default; }

.form__status {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: .86rem;
  font-weight: 600;
  background: var(--bg-raise);
  border: 1px solid var(--line);
}
.form__status--ok  { background: var(--accent-sf); border-color: var(--accent); color: var(--accent-dk); }
.form__status--err { border-color: var(--accent); color: var(--accent-dk); }

/* API 未実装・送信失敗時のメール導線 */
.form__fallback {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--accent-sf);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.form__fallback h3 { margin: 0 0 8px; font-size: .96rem; }
.form__fallback p { margin: 0 0 10px; font-size: .88rem; line-height: 1.8; }
.form__fallback p:last-child { margin-bottom: 0; }

@media (min-width: 600px) {
  .form__submit { width: auto; min-width: 220px; }
}

/* ===========================================================
   掲示板(見つからなかった作品をみんなで探す)
   一覧 / スレッド詳細 / 新規投稿フォーム

   掲示板の3画面だけ .screen--bbs を付け、昔ながらの掲示板の質感に寄せる。
   ここで上書きするのは **このスコープの中だけ**(検索画面・結果画面・文章
   ページの配色には一切触れない)。作品カード(.bcard)は購買導線なので
   検索側と同じ見た目のまま残す。
   =========================================================== */
.screen--bbs {
  --bbs-bg:      #1c1c1c;   /* 暗い部屋の中の「少し明るい板」。地(#141414)より上げる */
  --bbs-bg-hi:   #262626;   /* 行のhover */
  --bbs-line:    #3a3a3a;
  --bbs-fg:      #f0f0f0;   /* 対 --bbs-bg 15.0:1 */
  --bbs-meta:    #a3a3a3;   /* メタ行。--bbs-bg に対して 6.8:1 */
  --bbs-name:    #7cc47c;   /* 名前の緑。8.2:1 */
  --bbs-flash:   #4a1215;   /* アンカー先の一瞬のハイライト(赤を沈めた暗色) */
  --bbs-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Osaka-Mono", "MS Gothic", monospace;
  /* 共通変数もこのスコープの中でだけ差し替える。地が一段明るいぶん
     4.5:1 を割らないよう、淡色系は元より明るくする */
  --fg-dim:   #c4c4c4;
  --fg-faint: #a3a3a3;
  --line:     #3a3a3a;
  --bg-raise: #262626;
  background: var(--bbs-bg);
  color: var(--bbs-fg);
  /* .app の左右パディングぶん外へ広げて「別の部屋」に見せる */
  margin: 0 -16px;
  padding: 14px 16px 22px;
  border-top: 1px solid var(--bbs-line);
  border-bottom: 1px solid var(--bbs-line);
}
/* 掲示板内のリンクだけ古典配色にする(.btn を名乗るCTAは元の見た目のまま) */
.screen--bbs a:not(.btn) { color: var(--bbs-link); }
.screen--bbs a:not(.btn):visited { color: var(--bbs-visited); }
/* 角丸はほぼ無くす。ただし作品カードまわりは検索側と同じ体裁を保つ */
.screen--bbs .btn,
.screen--bbs .form__control,
.screen--bbs .kw__input,
.screen--bbs .era__select,
.screen--bbs .tmpl { border-radius: 2px; }
.screen--bbs .bcard,
.screen--bbs .bcard__thumb,
.screen--bbs .bcard__cta,
.screen--bbs .card__thumb--ph { border-radius: 8px; }
.screen--bbs .bsolved { border-radius: 2px; }
/* 影は使わない */
.screen--bbs .kw--result { box-shadow: none; background: transparent; border-color: var(--bbs-line); }

.board__head { display: grid; gap: 8px; margin: 2px 0 14px; }
.board__title { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.board__lead { margin: 0; font-size: .8rem; color: var(--bbs-meta); line-height: 1.7; }
.board__empty { margin: 0; padding: 18px 4px; font-size: .86rem; color: var(--bbs-meta); text-align: center; }
.board__policy { margin-top: 12px; text-align: center; }
.board__policy a { color: var(--fg-dim); }

/* ---------- タブ(未解決 / 解決済み / すべて) ---------- */
.board__tabs {
  display: flex;
  gap: 14px;
  margin: 0 0 8px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--bbs-line);
}
.board__tab {
  appearance: none;
  border: none;
  background: transparent;
  min-height: 34px;
  padding: 4px 2px;
  font-size: .84rem;
  color: var(--bbs-link);
  text-decoration: underline;
  cursor: pointer;
}
.board__tab:hover { color: var(--bbs-visited); }
.board__tab.is-on {
  color: var(--bbs-fg);
  font-weight: 700;
  text-decoration: none;
}
.board__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- スレッド一覧(1行1スレの密なリスト) ---------- */
.board__list { display: block; }
.brow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--bbs-line);
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.5;
}
.brow:hover { background: var(--bbs-bg-hi); }
.brow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.brow__no {
  flex: 0 0 auto;
  min-width: 2.2em;
  text-align: right;
  font-family: var(--bbs-mono);
  font-size: .78rem;
  color: var(--bbs-meta);
}
.brow__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--bbs-link);
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.brow:hover .brow__title { color: var(--bbs-visited); }
.brow__n {
  flex: 0 0 auto;
  font-family: var(--bbs-mono);
  font-size: .78rem;
  color: var(--bbs-meta);
}
.brow__flag { flex: 0 0 auto; font-size: .74rem; color: var(--bbs-meta); }

/* ---------- スレッド詳細 ---------- */
.thread__back { justify-self: start; padding-left: 0; }
.thread__main { display: block; }
.bbs__thread-title {
  margin: 4px 0 12px;
  font-size: 1.08rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bbs__thread-flag { color: var(--accent-dk); font-size: .86em; }

/* レス。メタ行だけ等幅、本文は可読性優先でゴシックのまま */
.bres {
  padding: 10px 4px 12px;
  border-top: 1px solid var(--bbs-line);
  transition: background .25s;
}
.bres.is-flash { background: var(--bbs-flash); }
.bres__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  font-family: var(--bbs-mono);
  font-size: .74rem;
  line-height: 1.9;
  color: var(--bbs-meta);
}
.bres__no { font-size: .84rem; font-weight: 700; color: var(--bbs-fg); }
.bres__key { color: var(--bbs-meta); }
.bres__name { font-size: .8rem; font-weight: 700; color: var(--bbs-name); }
.bres__date,
.bres__id { overflow-wrap: anywhere; }
/* 投稿本文は textContent で入る。改行はここで表現する */
.bres__body {
  margin: 5px 0 0;
  padding-left: 1em;
  font-size: .92rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bres__anchor { text-decoration: underline; }
.bres__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 7px 0 0;
  padding-left: 1em;
}
.bres__act {
  appearance: none;
  border: none;
  background: none;
  padding: 4px 0;
  min-height: 30px;
  font-size: .78rem;
  color: var(--bbs-link);
  text-decoration: underline;
  cursor: pointer;
}
.bres__act:hover { color: var(--bbs-visited); }
.bres__act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bres__act--resolve { font-weight: 700; }

.bthread__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 1em; }
.bpost__label { margin: 8px 0 0; padding-left: 1em; font-size: .76rem; color: var(--bbs-meta); }

/* 解決作品(上部の強調表示) */
.bsolved {
  margin: 4px 0 8px;
  padding: 14px;
  background: var(--accent-sf);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
}
.bsolved__title { margin: 0; font-size: .88rem; font-weight: 700; color: var(--accent-dk); }

/* 掲示板の作品カード(%は出さない。リンクは affiliate_url) */
.bcard {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bcard__thumb {
  width: 84px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-raise);
  display: block;
}
/* 画像が読めないときのプレースホルダ。検索結果カードの .card__thumb を流用するので、
   そちらの grid-area(thumb)と幅を掲示板カードの2列グリッド用に打ち消す */
.bcard .card__thumb--ph {
  grid-area: auto;
  width: 84px;
  align-self: stretch;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: .6rem;
}
.bcard__main { min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bcard__title { margin: 0; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.bcard__cta {
  min-height: 40px;
  padding: 8px 10px;
  font-size: .8rem;
  text-align: center;
  text-decoration: none;
  display: block;
}

/* 掲示板の中では試した言葉のチップも素っ気なくする(角丸を落とす) */
.screen--bbs .result__query-chip {
  border-radius: 2px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--bbs-meta);
  background: transparent;
  border-color: var(--bbs-line);
}
/* レスに添える作品カードだけは検索側と同じ体裁のまま(購買導線を崩さない) */
.bres .bcard,
.bsolved .bcard { margin: 10px 0 0; }
.bres .bcard { margin-left: 1em; }

@media (prefers-reduced-motion: reduce) {
  .bres { transition: none; }
}

/* ---------- フォーム(回答・新規投稿) ---------- */
/* 素っ気ないラベル(名前:・本文: …)。等幅で古い掲示板の投稿欄に寄せる */
.bbs-form__label {
  display: block;
  margin: 4px 0 -4px;
  font-family: var(--bbs-mono);
  font-size: .78rem;
  color: var(--bbs-meta);
}
.board__area { min-height: 120px; resize: vertical; }
.board__area--tall { min-height: 200px; }
#reply-form .form__control { margin: 0; }

/* 「書き方に迷ったら」= 開かないと出てこない補助。文体は規定しない */
.tmpl {
  margin: 10px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
}
.tmpl__sum {
  padding: 10px 14px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--fg-dim);
  cursor: pointer;
  list-style: none;
}
.tmpl__sum::-webkit-details-marker { display: none; }
.tmpl__sum::before { content: '＋ '; color: var(--fg-faint); }
.tmpl[open] .tmpl__sum::before { content: '－ '; }
.tmpl__note { margin: 0 14px 10px; font-size: .76rem; color: var(--fg-faint); line-height: 1.7; }
.tmpl__btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.tmpl__btns .btn { background: var(--bg-card); }

/* ===========================================================
   共通ヘッダーと、掲示板への導線(第13弾)

   掲示板は「常時見えるが小さい」。見た目の比率を 検索8 : 掲示板2 に保つため、
   ・ヘッダー = 高さ48pxのテキストリンクだけ(面積を持たせない。sticky で常時見せる)
   ・検索画面の新着 = 文字サイズ .8rem 前後・淡色・枠なし(検索フォームの半分以下)
   ・掲示板を大きく出すのは、検索が外れた瞬間=結果画面の .askboard だけ
   質感は白基調のまま。BBSの見た目は掲示板画面に入ってから始める。
   =========================================================== */
.sitehead {
  flex: 0 0 auto;
  /* スクロールしても常時見せる。z-index はローディング(40)より低く、
     通常のコンテンツより高い値にする(トースト70・戻り確認65・年齢確認60の下)。 */
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  /* .app の左右パディングぶん外へ広げて罫線を端まで引く。
     背景は不透明の白なので、貼り付いた状態でも本文は透けない。 */
  margin: 0 -16px 10px;
  padding: 4px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.sitehead__logo {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-width: 0;
}
.sitehead__logo .wordmark { font-size: .95rem; letter-spacing: .06em; }
.sitehead__logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sitehead__nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* ジャンル切替。現在地(span)とリンク(a)を並べる。主役の検索より必ず弱く見せる */
.sitehead__switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
  font-size: .8rem;
}
.sitehead__switch-cur { color: var(--fg); font-weight: 700; }
.sitehead__switch-link { color: var(--fg-dim); text-decoration: none; }
.sitehead__switch-link:hover { color: var(--accent); text-decoration: underline; }
.sitehead__link {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fg-dim);
  cursor: pointer;
  border-radius: 8px;
}
.sitehead__link:hover { color: var(--fg); }
.sitehead__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sitehead__link[aria-current="page"] { color: var(--accent); }
/* 未解決スレッド数。掲示板が「動いている」ことを伝える唯一の数字 */
.sitehead__badge {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------- 検索画面の掲示板モジュール(小さく・淡く) ---------- */
/* 掲示板の入口。掲示板画面と同じ板の地色を敷いて「別の部屋の色」を覗かせる。
   主役は検索なので、塗りボタンや濃い文字は置かず地色だけで区切る。 */
.bmini {
  margin-top: 26px;
  padding: 14px 14px 12px;
  background: #1c1c1c;
  border: 1px solid #383838;
  border-radius: 3px;
  display: grid;
  gap: 6px;
}
.bmini__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bmini__title { margin: 0; font-size: .86rem; font-weight: 700; color: var(--fg-dim); }
.bmini__count { flex: 0 0 auto; font-size: .72rem; color: var(--fg-faint); white-space: nowrap; }
.bmini__list { margin: 0; padding: 0; list-style: none; display: grid; }
.bmini__list:empty { display: none; }
.bmini__item {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  text-align: left;
  cursor: pointer;
  color: var(--bbs-link);
  font-size: .8rem;
}
.bmini__item-title {
  color: var(--bbs-link);
  text-decoration: underline;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* タイトルは必ず1行 */
}
.bmini__item-n { flex: 0 0 auto; font-size: .72rem; color: var(--fg-faint); }
.bmini__item:hover .bmini__item-title { color: #b7d2ff; }
.bmini__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bmini__empty { margin: 2px 0; font-size: .78rem; color: var(--fg-faint); line-height: 1.7; }
.bmini__link {
  justify-self: start;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--bbs-link);
  text-decoration: underline;
  cursor: pointer;
}
.bmini__link:hover { color: var(--accent); }
.bmini__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 結果画面「この中に無かったら」(掲示板の最大の入口) ---------- */
.askboard {
  margin-top: 26px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  display: grid;
  gap: 10px;
}
.askboard__title { margin: 0; font-size: 1rem; font-weight: 700; }
.askboard__lead { margin: 0; font-size: .84rem; color: var(--fg-dim); line-height: 1.7; }
.askboard__retry { justify-self: center; font-size: .82rem; }

/* ---------- 掲示板から検索への戻り(控えめ) ---------- */
/* .screen は flex(column)なので align-self で左に寄せる */
.nav-back { align-self: flex-start; justify-self: start; padding-left: 0; font-size: .82rem; }
.thread__navrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.thread__navrow .nav-back { align-self: center; }
.thread__retry { margin: 14px 0 0; }
.thread__retry .btn { padding-left: 0; text-align: left; }

/* sticky ヘッダーに隠れないよう、スクロール移動先に余白を持たせる
   (>>アンカーのジャンプ・回答フォームへの移動) */
.bres,
.bbs-form { scroll-margin-top: 60px; }

/* 掲示板内のボタン。検索側の赤の塗りは掲示板の板の上では強すぎて主張するので、
   昔のフォームボタン調(立体感のある薄い階調)を暗色に起こした体裁にする。 */
.screen--bbs .bbs-btn {
  display: inline-block;
  width: auto;
  min-height: 38px;
  padding: 8px 18px;
  background: linear-gradient(#303030, #232323);
  border: 1px solid #4a4a4a;
  border-radius: 3px;
  color: #f0f0f0;
  font-size: .92rem;
  font-weight: 700;
  box-shadow: none;
}
.screen--bbs .bbs-btn:hover:not([disabled]) {
  background: linear-gradient(#3c3c3c, #2c2c2c);
  border-color: #616161;
}
.screen--bbs .bbs-btn:active { background: #232323; }
/* 検索へ戻る系はボタンでなくリンクとして扱う */
.screen--bbs .bbs-tolink {
  justify-self: start;
  padding: 6px 0;
  color: var(--bbs-link);
  text-decoration: underline;
  font-weight: 600;
}
.screen--bbs .bbs-tolink:hover { color: #b7d2ff; }
/* 掲示板内に残る塗りボタン(投稿フォームの「書き込む」等)も同じ体裁へ */
.screen--bbs .btn--primary {
  background: linear-gradient(#303030, #232323);
  border: 1px solid #4a4a4a;
  color: #f0f0f0;
}
.screen--bbs .btn--primary:hover:not([disabled]) {
  background: linear-gradient(#3c3c3c, #2c2c2c);
  border-color: #616161;
}