:root {
    color-scheme: dark;
    --bg: #121014;
    --panel: #1a171b;
    --panel-2: #221e23;
    --border: #332e33;
    --text: #e8e4e6;
    --text-dim: #9c939b;
    --accent: #ff4d7e;
    --on-accent: #1a0610;
    --play: #ff6f91;
    --character: #f0a857;
    --fetish: #a86cff;
    /* 4カテゴリ目「世界観」と、プレイ傾向4象限の色（2026-07-29追加。詳細な意図は
       review.html側のコメント参照。両テンプレートで同じ値を使う）。 */
    --setting: #4fb3a6;
    --area-male-sweet: #f2b96f;
    --area-female-sweet: #ff8fb4;
    --area-male-harsh: #4f9fe0;
    --area-female-harsh: #a86cff;
    --fmt-voice_asmr: #52c4d6;
    --fmt-manga: #6a93e0;
    --fmt-game: #6bc47d;
    --fmt-cg: #7a8ba0;
    --fmt-novel: #9b8ec9;
    --fmt-other: #8a8690;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 14px 18px 40px;
    background: var(--bg);
    color: var(--text);
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 1.55;
    font-size: 14.5px;
  }
  .wrap { max-width: 1400px; margin: 0 auto; }
  a { color: inherit; }

  .btn {
    display: inline-block;
    padding: 6px 12px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
  }
  .btn:hover { border-color: var(--accent); }
  .btn.disabled { opacity: 0.35; pointer-events: none; }

  .top-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .top-nav .spacer { margin-right: auto; }
  form.goto { display: flex; gap: 6px; }
  form.goto input {
    width: 110px;
    padding: 5px 9px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
  }

  /* タグページの冒頭ブロック（2026-07-30）：タグ名＋件数＋LLM執筆の紹介記事。
     記事は折りたたみ式：初見は展開、ユーザーが閉じたらlocalStorageに記憶して
     以後は畳んでおく（毎日通う常連の検索体験を邪魔しない、ユーザー発案の方式）。 */
  .tag-intro {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
  }
  .tag-intro-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .tag-intro-head h1 { margin: 0; font-size: 20px; }
  .tag-intro-count { color: var(--text-dim); font-size: 13px; }
  .cat-badge {
    font-size: 11.5px; font-weight: 700; padding: 2px 8px;
    border-radius: 5px; color: var(--on-accent);
  }
  .cat-badge.play { background: var(--play); }
  .cat-badge.character { background: var(--character); }
  .cat-badge.fetish_attribute { background: var(--fetish); }
  .cat-badge.setting { background: var(--setting); }
  /* よく重なる棚（lift上位の共起タグ）。タグ×タグの発見をページ増殖なしで提供する */
  .related-tags { margin-top: 12px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
  .related-tags-label { font-size: 11px; color: var(--text-dim); }
  .related-tag-chip {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 12px; text-decoration: none;
  }
  .related-tag-chip:hover { color: var(--text); border-color: var(--accent); }

  .tag-article-head { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
  .narrator-face {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--panel-2);
    object-fit: cover;
    flex: none;
  }
  .narrator-name {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800; font-size: 14px; letter-spacing: .08em;
    background: linear-gradient(90deg, #ff8fb4, #ff4d7e 55%, #a86cff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-decoration: none;
  }
  .tag-article-body {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.9;
    white-space: pre-wrap;
  }
  .tag-article-body .article-work-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
  }
  .tag-article-body .article-work-link:hover { border-bottom-style: solid; }
  .tag-article.closed .tag-article-body,
  .tag-article.closed .tag-article-head { display: none; }
  .tag-article-toggle {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 12.5px;
    cursor: pointer;
  }
  .tag-article-toggle:hover { color: var(--text); border-color: var(--text-dim); }

  /* この棚の歴史（年推移グラフ＋Mia史観＋全期間の代表作） */
  .tag-history {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 18px; margin-bottom: 16px;
  }
  .tag-history summary {
    cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 700;
  }
  .hist-chart {
    display: flex; align-items: flex-end; gap: 3px; height: 96px;
    margin: 16px 0 6px; padding-bottom: 16px; position: relative;
  }
  .hist-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
  .hist-bar {
    background: linear-gradient(180deg, var(--fetish), var(--accent));
    border-radius: 2px 2px 0 0; min-height: 2px; opacity: .78;
    transition: opacity .15s ease;
  }
  .hist-col:hover .hist-bar { opacity: 1; }
  .hist-bar.peak { opacity: 1; box-shadow: 0 0 10px rgba(255,77,126,.35); }
  .hist-year {
    position: absolute; bottom: -16px; left: 0; right: 0; text-align: center;
    font-size: 9.5px; color: var(--text-dim);
  }
  .hist-body { font-size: 14px; line-height: 1.95; white-space: pre-wrap; margin-top: 14px; }
  .hist-works { margin-top: 16px; display: grid; gap: 1px; }
  .hist-work {
    display: flex; gap: 11px; padding: 11px 0; text-decoration: none; color: var(--text);
    border-top: 1px solid var(--border);
  }
  .hist-work img {
    width: 92px; height: 69px; flex: none; object-fit: cover; border-radius: 4px;
    background: var(--panel-2); opacity: .9;
  }
  .hist-work:hover img { opacity: 1; }
  .hist-work-body { min-width: 0; }
  .hist-work-title { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.5; margin-bottom: 3px; }
  .hist-work:hover .hist-work-title { color: var(--accent); }
  .hist-work-year {
    display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 3px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 10.5px; font-weight: 400; vertical-align: 1px;
  }
  .hist-work-comment { font-size: 11.5px; line-height: 1.75; color: var(--text-dim); }
  .hist-sign { margin-top: 12px; font-size: 11.5px; color: var(--text-dim); }
  .hist-sign a { color: var(--accent); text-decoration: none; }

  /* 検索・絞り込みフォーム */
  .filters {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  .filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .filter-row.format-row { margin-top: 10px; gap: 4px 14px; }
  .format-row-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
  }
  .filters input[type="text"], .filters select {
    padding: 7px 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13.5px;
  }
  .filters input[type="text"] { flex: 1 1 200px; min-width: 140px; }
  .active-q {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: var(--panel-2); border: 1px solid var(--accent); border-radius: 6px;
    color: var(--text); font-size: 13px;
  }
  .filters select { flex: 0 0 auto; }
  .filters button.btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }

  details.tag-filter { margin-top: 12px; }
  details.tag-filter summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .tag-filter-group { margin-bottom: 10px; }
  .tag-filter-group-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
  }
  .tag-filter-options { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  /* 既定で畳む方式にしたので高さの上限は不要（2026-08-01ユーザー指示で撤廃）。
     開けたときは97個ぜんぶ見えたほうが探しやすい。 */
  .tag-filter-scroll { margin-top: 8px; }
  /* タグ一覧の末尾に置くスマホ専用の送信ボタン（2026-08-01ユーザー要望）。
     PCではパネル上部のボタンが視界に入るので出さない。 */
  .tag-filter-apply { display: none; }
  @media (max-width: 700px) {
    .tag-filter-apply {
      display: block; width: 100%; margin-top: 14px; padding: 12px;
      font-size: 15px; font-weight: 700;
      background: var(--accent); color: var(--on-accent); border-color: var(--accent);
    }
  }
  .tag-filter-search { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .tag-filter-search input {
    flex: 0 1 240px; padding: 5px 11px; font-size: 12.5px;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
    color: var(--text);
  }
  .tag-filter-search input:focus { outline: none; border-color: var(--accent); }
  .tag-filter-hint { font-size: 11.5px; color: var(--text-dim); }
  /* 選択中のタグ（畳んでいても見える） */
  .picked-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
  .picked-label { font-size: 11px; letter-spacing: .1em; color: var(--text-dim); }
  .picked-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px 3px 12px;
    border-radius: 999px; background: var(--panel-2); border: 1px solid var(--accent);
    color: var(--text); font-size: 12.5px;
  }
  .picked-x {
    border: none; background: none; color: var(--text-dim); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0 4px;
  }
  .picked-x:hover { color: var(--accent); }
  .tag-checkbox {
    font-size: 13px;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }
  .tag-checkbox input:checked ~ span,
  .tag-checkbox:has(input:checked) { color: var(--text); font-weight: 700; }

  /* 結果件数・件数表示 */
  .result-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--text-dim);
    font-size: 13px;
  }

  /* カードグリッド：確認しやすいよう1枚あたりはやや大きめ、狭い画面では自動的に列数が減る */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
  }
  .result-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .result-card:hover { border-color: var(--accent); }
  /* カード全体を1つの大きなリンクにしつつ（=stretched link）、タグだけは個別リンクとして
     独立クリックできるようにする（2026-07-25追加、ユーザー要望：「カード内のタグを押すと
     そのタグでの検索結果に、それ以外の場所を押すと詳細ページに」）。タグに
     position:relative+z-indexを与えて、下敷きのカード全体リンクより手前に来るようにする
     ことでクリックを横取りさせる仕組み。 */
  .result-card-link { position: absolute; inset: 0; z-index: 1; }
  .result-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--panel-2);
    position: relative;
    overflow: hidden;
  }
  .result-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .result-img .fmt-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 9px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--on-accent);
  }
  .fmt-badge.fmt-voice_asmr { background: var(--fmt-voice_asmr); }
  .fmt-badge.fmt-manga { background: var(--fmt-manga); }
  .fmt-badge.fmt-game { background: var(--fmt-game); }
  .fmt-badge.fmt-cg { background: var(--fmt-cg); }
  .fmt-badge.fmt-novel { background: var(--fmt-novel); }
  .fmt-badge.fmt-other { background: var(--fmt-other); }
  /* 発売7日以内のNEWバッジ（毎日通って新着を見る使い方の目印） */
  .new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: var(--accent);
    color: var(--on-accent);
  }

  .result-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  .result-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .result-meta { font-size: 12px; color: var(--text-dim); }
  .result-circle { font-size: 12.5px; font-weight: 700; }

  .result-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  /* ボリュームは「2時間40分」「本編80ページ」等の可変長文字列なので、数値スタットより
     小さめの字で2行までに収める（超過分は省略）。判明している作品にだけ表示。 */
  .result-stat.vol .n {
    font-size: 12.5px;
    line-height: 1.25;
    max-width: 104px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .result-stat { text-align: center; }
  .result-stat .n { font-size: 17px; font-weight: 700; line-height: 1; }
  .result-stat .n.unset { font-size: 12px; font-weight: 400; color: var(--text-dim); }
  .result-stat .l { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

  .mini-scatter {
    position: relative;
    width: 34px;
    height: 34px;
    background: var(--bg);
    border-radius: 4px;
    flex: none;
  }
  .mini-scatter .v, .mini-scatter .h { position: absolute; background: var(--border); }
  .mini-scatter .v { left: 50%; top: 0; width: 1px; height: 100%; }
  .mini-scatter .h { top: 50%; left: 0; height: 1px; width: 100%; }
  .mini-scatter .dot {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    color: var(--fetish);
    background: currentColor;
    border: 1.5px solid #fff;
    transform: translate(-50%, -50%);
  }
  /* 34px角の図では点の位置だけでは傾向が読めないので、作品が属する象限を塗る。
     色の対応は個別ページの散布図と共通（左＝オス的の琥珀系／右＝メス的の桃紫系、
     上＝甘マゾの淡い色／下＝尊厳破壊の濃い色）。 */
  .mini-scatter .quad { position: absolute; width: 50%; height: 50%; }
  .mini-scatter.area-male-sweet .quad { left: 0; top: 0; background: rgba(242, 185, 111, 0.30); border-radius: 4px 0 0 0; }
  .mini-scatter.area-female-sweet .quad { left: 50%; top: 0; background: rgba(255, 143, 180, 0.30); border-radius: 0 4px 0 0; }
  .mini-scatter.area-male-harsh .quad { left: 0; top: 50%; background: rgba(79, 159, 224, 0.32); border-radius: 0 0 0 4px; }
  .mini-scatter.area-female-harsh .quad { left: 50%; top: 50%; background: rgba(168, 108, 255, 0.34); border-radius: 0 0 4px 0; }
  .mini-scatter.area-male-sweet .dot { color: var(--area-male-sweet); }
  .mini-scatter.area-female-sweet .dot { color: var(--area-female-sweet); }
  .mini-scatter.area-male-harsh .dot { color: var(--area-male-harsh); }
  .mini-scatter.area-female-harsh .dot { color: var(--area-female-harsh); }

  .result-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
  .result-tag {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    text-decoration: none;
  }
  .result-tag:hover { color: var(--text); border-color: var(--text); }
  .result-tag.play { border-color: var(--play); }
  .result-tag.character { border-color: var(--character); }
  .result-tag.fetish_attribute { border-color: var(--fetish); }
  .result-tag.setting { border-color: var(--setting); }
  .result-tag.matched { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; }
  .result-tag.matched:hover { color: var(--on-accent); }
  .result-tag-more { font-size: 11px; color: var(--text-dim); align-self: center; }

  /* サイトロゴ（公開ビューのみ）。文字は画像生成に任せずフォントで組む方針
     （docs/LOGO_PROMPTS.md）。シンボルアイコンはSyncubus CC共通アイコンが
     できたら .brand-link の先頭に挿す想定で、gapを確保してある。 */

  @media (max-width: 620px) {
              }

  /* 18禁ゲート（2026-07-30）。リダイレクト式でなくオーバーレイ式：クローラーは本文を
     読めるのでSEOを損なわず、確認済みかはlocalStorageに記録して再訪時は出さない。
     文言は圧を出さず端的に（居心地方針）。 */
  .age-gate {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 8, 11, 0.94);
    display: none; align-items: center; justify-content: center; padding: 20px;
  }
  .age-gate.open { display: flex; }
  .age-gate-panel {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    max-width: 430px; padding: 30px 26px; text-align: center;
  }
  .age-gate-panel .gate-brand {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800; font-size: 20px; letter-spacing: .08em;
    background: linear-gradient(90deg, #ff8fb4, #ff4d7e 55%, #a86cff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 14px;
  }
  .age-gate-panel p { margin: 0 0 20px; font-size: 14px; line-height: 1.8; color: var(--text); }
  .age-gate-enter {
    display: block; width: 100%; padding: 12px; border: none; border-radius: 8px;
    background: var(--accent); color: var(--on-accent);
    font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .age-gate-leave {
    display: inline-block; margin-top: 14px; font-size: 13px; color: var(--text-dim);
  }
  /* ゲート表示中は背後のコンテンツをぼかし、未成年が内容を視認できない状態にする
     （オーバーレイの黒幕だけだと薄く透けるため。2026-07-30ユーザー指摘） */
  body.age-locked > .wrap { filter: blur(18px); pointer-events: none; user-select: none; }


  .empty { text-align: center; color: var(--text-dim); padding: 60px 0; }
  .zero-mia { padding: 48px 16px 40px; }
  .zero-line { max-width: 560px; margin: 0 auto; line-height: 2; color: var(--text); font-size: 14px; }
  .zero-suggest { margin-top: 18px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .zero-chip {
    display: inline-block; padding: 4px 14px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--fetish);
    color: var(--text); text-decoration: none; font-size: 13px;
  }
  .zero-chip:hover { border-color: var(--accent); }
  .zero-mia-name { display: block; margin-top: 16px; color: var(--accent); text-decoration: none; font-size: 12px; letter-spacing: .1em; }

  /* 2カラム（デスクトップ）。サイドバーは特集の常設枠＋将来の告知・紹介枠 */
  .layout { display: flex; gap: 20px; align-items: flex-start; }
  .layout > .main { flex: 1; min-width: 0; }
  .side {
    width: 300px; flex: none; position: sticky; top: 12px;
    max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin;
  }
  .side-block { padding: 2px 2px 6px; margin-bottom: 14px; }
  /* 棚の見出し（サイドバー最上部） */
  .side-shelf { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .shelf-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .shelf-name { margin: 0; font-size: 19px; line-height: 1.4; }
  .shelf-count { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
  .shelf-related { margin-top: 11px; }
  .shelf-related .related-tag-chip { margin: 0 4px 5px 0; font-size: 11.5px; }

  /* 「○○」について＝Miaのコメント（折りたたみなし） */
  .side-article { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .side-mia-name {
    display: inline-block; margin-bottom: 3px;
    font-family: "Segoe UI", Arial, sans-serif; font-weight: 800; font-size: 12px;
    letter-spacing: .08em; color: var(--accent); text-decoration: none;
  }
  .side-article-body {
    font-size: 12.5px; line-height: 1.95; color: var(--text-dim); white-space: pre-wrap;
  }
  .side-article-body .article-work-link {
    color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent);
  }
  .side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
  .side-eyebrow {
    font-size: 10.5px; letter-spacing: .22em; color: var(--accent);
    white-space: nowrap; text-transform: uppercase;
  }
  .side-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
  .side-title {
    margin: 0 0 11px; font-size: 16px; font-weight: 700; line-height: 1.55;
    letter-spacing: .01em;
  }
  .side-title a {
    text-decoration: none; border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }
  .side-title a:hover { color: var(--accent); border-color: var(--accent); }
  .side-mia { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 14px; }
  .side-mia img {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    border: 1px solid var(--accent); object-fit: cover; background: var(--panel-2);
    opacity: .95;
  }
  .side-lead {
    margin: 0; font-size: 12px; line-height: 1.85; color: var(--text-dim);
  }
  .side-works { list-style: none; margin: 0; padding: 0; }
  .side-works li + li { margin-top: 1px; }
  .side-work {
    display: flex; gap: 10px; padding: 11px 0; text-decoration: none; color: var(--text);
    border-top: 1px solid var(--border);
  }
  .side-work img {
    width: 76px; height: 57px; flex: none; object-fit: cover;
    border-radius: 4px; display: block; background: var(--panel-2);
    opacity: .88; transition: opacity .15s ease;
  }
  .side-work:hover img { opacity: 1; }
  .side-work-body { min-width: 0; }
  .side-work-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; font-weight: 700; line-height: 1.5; margin-bottom: 3px;
  }
  .side-work:hover .side-work-title { color: var(--accent); }
  .side-work-comment {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 11px; line-height: 1.7; color: var(--text-dim);
  }
  .side-note { display: block; }
  .side-past {
    display: inline-block; margin-top: 12px; font-size: 11px; letter-spacing: .06em;
    color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
  }
  .side-past:hover { color: var(--accent); border-color: var(--accent); }

  /* 連動性玩具の入口（2026-08-01）。特集と並ぶ常設枠なので、札ではなく活字で静かに。 */
  .toys-teaser {
    display: block; text-decoration: none; color: var(--text);
    padding: 11px 13px; border-radius: 9px;
    background: linear-gradient(150deg, rgba(168,108,255,.10), rgba(255,77,126,.06));
    border: 1px solid var(--border); transition: border-color .15s ease;
  }
  .toys-teaser:hover { border-color: var(--fetish); }
  .toys-teaser p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.7; }
  .toys-teaser-count { color: var(--fetish); font-weight: 700; }
  .toys-teaser-more { font-size: 11.5px; color: var(--accent); letter-spacing: .04em; }
  @media (max-width: 1019px) {
    /* モバイルは縦積み。サイドバーの中身は**常に**本体の下（2026-08-01ユーザー指示で修正）。
       以前は素の入口だけ特集を先頭に出していたが、スマホで開くと作品より先に
       特集が来てしまい「一覧を見に来たのに一覧が無い」状態になっていた。
       トップだろうと検索中だろうと、先に見せるのは作品。 */
    .layout { flex-direction: column; }
    .side { width: auto; position: static; max-height: none; overflow: visible; }
  }
  @media (min-width: 1020px) {
  }

  .ng-hidden-note { color: var(--text-dim); font-size: 11.5px; margin-left: 10px; }


  .pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; }

  @media (max-width: 480px) {
    body { padding: 10px 10px 32px; font-size: 14px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .filters { padding: 10px 12px; }
  }

/* 検索結果カードの連動マーク（2026-08-01）。NEWバッジと衝突しないよう左下に置く。
   小さすぎて気付かれなかったため、作品ページと同じ2段バッジに揃えた（同日ユーザー指摘）。
   サムネの上に載るので背景は不透明寄りにして可読性を確保する。 */
.ufotw-mark {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 11px; border-radius: 7px;
  background: linear-gradient(135deg, rgba(38,22,52,.93), rgba(52,20,42,.93));
  border: 1px solid var(--fetish); line-height: 1.2;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.ufotw-mark .n { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--fetish); }
.ufotw-mark .s { font-size: 12.5px; font-weight: 700; color: var(--text); }
@media (max-width: 480px) {
  .ufotw-mark { padding: 4px 8px; }
  .ufotw-mark .n { font-size: 9px; }
  .ufotw-mark .s { font-size: 11px; }
}