/* ============================================================
 * CARE LIBRARY（索引）ページ専用のスタイル
 * ============================================================
 * 共通部分（色・ヘッダー・ボタン・フッター）は shared.css にある。
 * ヒーローはトップ・FEATURES と違って全画面にせず、見出しと導入文だけの高さに収める。
 * 棚（カテゴリ）ごとに色を持たせ、--spine という変数で1か所から差し替えられるようにした。
 * 色は現行サイト（js/library.js の spine）と同じ値を使っている。
 * ============================================================ */

/* ---------- ヒーロー（書架の図を横に置く。高さと書き出し位置は shared.css の .shero） ---------- */
.lh__grid{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.lh__grid{grid-template-columns:1.05fr .95fr;gap:56px}}
/* 書架の図。狭い画面では出さない（縦に長くなるだけで情報が増えないため） */
.lh__fig{display:none}
@media(min-width:900px){.lh__fig{display:block}}
.lh__fig svg{width:100%;height:auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.08))}

/* ---------- 絞り込み ---------- */
.tools{display:grid;gap:16px;margin:0 0 18px}
.srch{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--line);max-width:520px}
.srch svg{width:17px;height:17px;color:var(--ink-dim);flex:none}
.srch input{border:0;outline:0;background:none;font:inherit;font-size:14px;width:100%;
  color:var(--ink)}
.srch:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.12)}
.tgl{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--ink-mid);cursor:pointer}
.tgl input{accent-color:var(--teal);width:16px;height:16px}
.hits{margin:0 0 32px;font-size:13px;font-weight:800;color:var(--ink-mid)}
/* この1文は1行で見せたい。必要な幅は 14px×41.5em ＝ 約580px。
   680px 以上でだけ折り返しを止める（620px では余裕が9pxしかなく、
   環境によるわずかな字幅の違いではみ出すため）。
   狭い画面では素直に折り返す。 */
.lead--wide{max-width:none}
@media(min-width:680px){.lead--wide{white-space:nowrap}}

/* ---------- 棚をさがすための目印 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 44px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:800;
  text-decoration:none;cursor:pointer;font-family:inherit;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s,background-color .2s}
.chip:hover{transform:translateY(-2px);border-color:var(--c);
  box-shadow:0 8px 18px rgba(0,0,0,.06)}
/* 選ばれている棚は、その棚の色で塗る */
.chip.is-on{background:var(--c);border-color:var(--c);color:#fff}
.chip.is-on::before{background:#fff}
.chip::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--c)}
/* 棚へ飛ぶリンクなので、共通の「→」記号は付けない */
.chip::after{content:none}

/* ---------- 書架 ---------- */
.bk{display:grid;gap:24px;padding:32px 0;border-top:1px solid var(--line)}
.bk:first-of-type{border-top:0;padding-top:0}
@media(min-width:900px){.bk{grid-template-columns:260px 1fr;gap:48px}}
/* 棚の名前の左に、背表紙の色を細い帯で置く */
.bk__head{border-left:5px solid var(--spine);padding-left:16px}
.bk__en{margin:0 0 6px;font-size:10px;font-weight:800;letter-spacing:.24em;
  /* 小さい文字なので、棚の色をそのまま使うとコントラストが足りない。18%暗くする */
  color:color-mix(in srgb,var(--spine) 82%,#000);text-transform:uppercase}
.bk__head h3{margin:0;font-size:21px;font-weight:900;line-height:1.4}
.bk__n{margin:8px 0 0;font-size:12px;color:var(--ink-dim);font-weight:700}
.bk__body{min-width:0}          /* グリッドの中で横幅がはみ出さないようにする */
.bk__s{margin:0 0 20px;font-size:14px;color:var(--ink-mid);line-height:1.9}
.bk__list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
@media(min-width:680px){.bk__list{grid-template-columns:1fr 1fr}}
/* 1冊ぶんの箱。読める本はリンク、準備中は押せない見た目にする */
.bk__list a,.bk__list .bk__soon{display:flex;flex-direction:column;gap:5px;
  padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:#fff;
  font-size:14px;font-weight:700;text-decoration:none;line-height:1.6;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.bk__list a{border-left:4px solid var(--spine)}
.bk__list a:hover{transform:translateY(-2px);border-color:var(--spine);
  box-shadow:0 10px 22px rgba(0,0,0,.07)}
.bk__list a::after{content:none}          /* 一覧なので矢印は付けない */
.bk__soon{color:var(--ink-dim);background:var(--bg-soft);border-style:dashed}
.bk__t{display:block}
.bk__d{font-size:11px;font-weight:700;color:var(--ink-dim)}
/* 冊数が増えたときに出る「残りを表示」 */
.bk__more{margin:14px 0 0;padding:10px 20px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font:inherit;font-size:13px;font-weight:800;color:var(--ink);
  cursor:pointer;transition:border-color .2s,background-color .2s}
.bk__more:hover{border-color:var(--spine);background:var(--bg-soft)}
/* 絞り込みで外れた本と棚は消す */
.bk__list li[hidden],.bk[hidden]{display:none}
.bk--none{display:none}

/* ---------- 要望の受け口 ---------- */
.req{display:grid;gap:24px;align-items:center;padding:36px;border-radius:26px;
  background:linear-gradient(150deg,var(--teal-pale),#fff);border:1px solid var(--line)}
@media(min-width:820px){.req{grid-template-columns:1fr auto;gap:40px}}

/* ---------- 新着 ---------- */
.news{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.news{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.news{grid-template-columns:repeat(4,1fr)}}
.nw{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--spine);
  text-decoration:none;transition:transform .2s,box-shadow .2s}
.nw:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.nw::after{content:none}
.nw__c{font-size:11px;font-weight:800;color:color-mix(in srgb,var(--spine) 82%,#000)}
.nw__t{font-size:15px;font-weight:900;line-height:1.6}
.nw__d{margin-top:auto;font-size:11px;color:var(--ink-dim);font-weight:700}

/* ---------- 編集方針 ---------- */
.pol{display:grid;gap:20px;grid-template-columns:1fr;max-width:1000px;margin:0 auto}
@media(min-width:900px){.pol{grid-template-columns:repeat(3,1fr)}}
.pol>div{padding:30px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.pol h3{margin:0 0 12px;font-size:16px;font-weight:900}
.pol p{margin:0;font-size:13px;color:var(--ink-mid);line-height:1.95}