/* ==========================================================================
   「喋らない司書」フロントUI(2026-08-06)
   全ページ共通(shinen-quicknav.js / shinen-theme-toggle.jsと同じ位置づけ)。
   独自クラスプレフィックス(.shn-lib-)で新規ファイルにまとめ、既存の
   shinen-archive.css / shinen-theme-skin.css は一切変更しない。
   色はサイト共通のダーク基調+金アクセント(shinen-theme-skin.cssの
   :root変数)に合わせるが、フォールバック値も必ず添える(このコンポーネントは
   .shn-arcスコープの外=全ページで動くため、変数未定義でも壊れないようにする)。
   ========================================================================== */

/* ---- 起動ボタン: 右下固定。既存の右下テーマ切替ボタン(shinen-theme-toggle.js,
   44px円・right:18px/bottom:18px)の真上に積む。左下はクイックナビが占有済み。 ---- */
#shn-lib-btn.shn-lib-btn,
.shn-lib-btn {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 10000;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 22px;
  border: 1px solid rgba(201, 164, 92, .5);
  background: var(--shn-deep, #0d1f1a);
  color: var(--shn-gold, #c9a45c);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: background .25s ease, transform .2s ease;
}
.shn-lib-btn:hover { transform: scale(1.05); }
.shn-lib-btn-icon { font-size: 17px; line-height: 1; }
.shn-lib-btn-label {
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--shn-gold, #c9a45c);
  white-space: nowrap;
}
@media (max-width: 750px) {
  .shn-lib-btn { right: 12px; bottom: 60px; height: 40px; padding: 0 14px 0 10px; }
  .shn-lib-btn-icon { font-size: 15px; }
  .shn-lib-btn-label { font-size: 11px; }
}

/* ---- オーバーレイ + パネル ---- */
.shn-lib-overlay {
  position: fixed;
  inset: 0;
  z-index: 10900;
  background: rgba(5, 8, 7, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.shn-lib-overlay.is-open { opacity: 1; visibility: visible; }

.shn-lib-panel {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--shn-ink, #0a0f0d);
  border: 1px solid rgba(201, 164, 92, .35);
  font-family: 'Shippori Mincho', serif;
}

.shn-lib-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  background: var(--shn-ink, #0a0f0d);
  border-bottom: 1px solid rgba(217, 208, 184, .16);
}
.shn-lib-title { margin: 0; font-size: 17px; color: var(--shn-paper, #d9d0b8); font-weight: 600; }
.shn-lib-close {
  background: transparent;
  border: 1px solid rgba(217, 208, 184, .3);
  color: var(--shn-text-dim, #9aa79e);
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shn-lib-close:hover { color: var(--shn-paper, #d9d0b8); border-color: rgba(217, 208, 184, .6); }

.shn-lib-body { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.shn-lib-note {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--shn-text-dim, #9aa79e);
}

/* ---- 検索フォーム ---- */
.shn-lib-form { display: flex; gap: 8px; }
.shn-lib-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(217, 208, 184, .3);
  background: rgba(255, 255, 255, .04);
  color: var(--shn-text, #d8cfc0);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 14px;
}
.shn-lib-input::placeholder { color: var(--shn-text-dim, #9aa79e); }
.shn-lib-submit {
  min-width: 72px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(201, 164, 92, .5);
  background: rgba(201, 164, 92, .12);
  color: var(--shn-gold, #c9a45c);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.shn-lib-submit:hover { background: rgba(201, 164, 92, .22); }

/* ---- 出発点チップ ---- */
.shn-lib-chip-label {
  margin: 0;
  font-family: 'Unbounded', sans-serif;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--shn-gold, #c9a45c);
}
.shn-lib-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shn-lib-chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(217, 208, 184, .3);
  background: rgba(255, 255, 255, .03);
  color: var(--shn-text, #d8cfc0);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.shn-lib-chip:hover { background: rgba(201, 164, 92, .14); border-color: rgba(201, 164, 92, .5); color: var(--shn-gold, #c9a45c); }

/* ---- 結果件数(aria-live) ---- */
.shn-lib-status {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12px;
  color: var(--shn-text-dim, #9aa79e);
  min-height: 1em;
}

/* ---- 結果カード一覧 ---- */
.shn-lib-results { display: flex; flex-direction: column; gap: 10px; }
.shn-lib-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  text-decoration: none;
  border: 1px solid rgba(201, 164, 92, .3);
  background: rgba(201, 164, 92, .05);
  transition: background .2s ease, border-color .2s ease;
}
.shn-lib-card:hover { background: rgba(201, 164, 92, .13); border-color: #c9a45c; }
.shn-lib-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--shn-paper, #d9d0b8);
  line-height: 1.5;
}
.shn-lib-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shn-lib-card-cat {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--shn-text-dim, #9aa79e);
  border: 1px solid rgba(217, 208, 184, .25);
  border-radius: 4px;
  padding: 2px 7px;
}
.shn-lib-badge {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 11.5px;
  color: var(--shn-gold, #c9a45c);
  border: 1px solid rgba(201, 164, 92, .5);
  border-radius: 4px;
  padding: 2px 7px;
}
.shn-lib-card-summary {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12px;
  line-height: 1.7;
  color: var(--shn-text-dim, #9aa79e);
}

/* ---- 0件時の代替導線 ---- */
.shn-lib-empty {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12.5px;
  color: var(--shn-text-dim, #9aa79e);
}
.shn-lib-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.shn-lib-suggestion {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(217, 208, 184, .3);
  background: rgba(255, 255, 255, .03);
  color: var(--shn-text, #d8cfc0);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12.5px;
  text-decoration: none;
}
.shn-lib-suggestion:hover { background: rgba(201, 164, 92, .14); border-color: rgba(201, 164, 92, .5); color: var(--shn-gold, #c9a45c); }

/* ---- モバイル(375px想定): タップ領域44px以上・チップ折り返し ---- */
@media (max-width: 480px) {
  .shn-lib-panel { max-width: 100%; max-height: 92vh; }
  .shn-lib-head { padding: 16px 16px; }
  .shn-lib-body { padding: 14px 16px 20px; }
  .shn-lib-form { flex-direction: column; }
  .shn-lib-submit { width: 100%; }
}

/* ---- ライトテーマ(:root[data-theme="light"]、shinen-theme-toggle.jsが
   documentElementへ付与する属性)。.shn-arcスコープ外のため、サイト共通の
   --shn-*変数自体は明側に切り替わらない(shinen-theme-skin.cssの仕様)。
   quicknav/theme-toggleと同様、この浮遊UIは明側でも読みやすい配色を
   個別に明示指定する。 ---- */
:root[data-theme="light"] .shn-lib-btn { background: #ece4d0; border-color: rgba(156, 113, 48, .5); }
:root[data-theme="light"] .shn-lib-btn-label,
:root[data-theme="light"] .shn-lib-btn { color: #6b4f1d; }
:root[data-theme="light"] .shn-lib-overlay { background: rgba(42, 38, 32, .5); }
:root[data-theme="light"] .shn-lib-panel { background: #f5f0e3; border-color: rgba(156, 113, 48, .4); }
:root[data-theme="light"] .shn-lib-head { background: #f5f0e3; border-bottom-color: rgba(42, 38, 32, .16); }
:root[data-theme="light"] .shn-lib-title { color: #2a2620; }
:root[data-theme="light"] .shn-lib-note,
:root[data-theme="light"] .shn-lib-status,
:root[data-theme="light"] .shn-lib-card-cat,
:root[data-theme="light"] .shn-lib-card-summary,
:root[data-theme="light"] .shn-lib-empty { color: #6b6a5e; }
:root[data-theme="light"] .shn-lib-input {
  background: rgba(0, 0, 0, .03);
  color: #2a2620;
  border-color: rgba(42, 38, 32, .2);
}
:root[data-theme="light"] .shn-lib-chip,
:root[data-theme="light"] .shn-lib-suggestion {
  background: rgba(0, 0, 0, .02);
  color: #2a2620;
  border-color: rgba(42, 38, 32, .2);
}
:root[data-theme="light"] .shn-lib-card { background: rgba(156, 113, 48, .06); border-color: rgba(156, 113, 48, .4); }
:root[data-theme="light"] .shn-lib-card-title { color: #2a2620; }
:root[data-theme="light"] .shn-lib-badge { color: #6b4f1d; border-color: rgba(156, 113, 48, .5); }

/* ---- 印刷では非表示(既存の.shn-qn-btn等と同じ扱い) ---- */
@media print {
  .shn-lib-btn, .shn-lib-overlay { display: none !important; }
}