/* celeb-db スタイル。アクセント色は各人物の --a を利用。 */
:root{
  --bg:#0f1014; --panel:#171922; --panel2:#1f222e; --line:#2a2e3c;
  --txt:#e8eaf0; --muted:#9aa0b4; --a:#5b7cff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.7}
a{color:inherit}
img,svg{vertical-align:middle}
.muted{color:var(--muted)}
.note{font-size:.82rem}

/* ヘッダ / フッタ */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.2rem;border-bottom:1px solid var(--line);background:#0c0d11;position:sticky;top:0;z-index:5}
.brand{font-weight:800;letter-spacing:.04em;text-decoration:none;font-size:1.1rem}
.brand::before{content:"★ ";color:var(--a)}
.hsearch input,.bigsearch input{background:var(--panel);border:1px solid var(--line);
  color:var(--txt);border-radius:999px;padding:.5rem 1rem;outline:none}
.hsearch input{width:min(46vw,260px)}
.site-foot{border-top:1px solid var(--line);padding:1.6rem 1.2rem;margin-top:3rem;
  display:flex;flex-direction:column;gap:.5rem}

/* パンくず */
.crumb{padding:.7rem 1.2rem;color:var(--muted);font-size:.85rem}
.crumb a{color:var(--a);text-decoration:none}

/* ホーム */
.home{max-width:1080px;margin:0 auto;padding:1.2rem}
.hero{text-align:center;padding:2.4rem 1rem 1.6rem}
.hero h1{font-size:2rem;margin:.2rem 0}
.lead{color:var(--muted);max-width:42rem;margin:.4rem auto 1.4rem}
.bigsearch input{width:min(92vw,560px);font-size:1.05rem;padding:.8rem 1.2rem}
.filters{margin:1rem 0 1.4rem}
.filter-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.5rem 0}
.filter-label{color:var(--muted);font-size:.8rem;min-width:4.5rem}
.chip-btn{background:var(--panel);border:1px solid var(--line);color:var(--txt);
  border-radius:999px;padding:.3rem .8rem;font-size:.85rem;cursor:pointer;transition:.15s}
.chip-btn:hover{border-color:var(--a)}
.chip-btn.on{background:var(--a);border-color:var(--a);color:#fff}

/* カードグリッド */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--a)}
.card-link{display:block;text-decoration:none;color:inherit;padding:1.2rem;text-align:center}
.card-avatar{display:flex;justify-content:center;margin-bottom:.6rem}
.avatar{border-radius:50%;box-shadow:0 4px 16px #0006}
.card-name{font-size:1.15rem;margin:.3rem 0 .1rem}
.card-kana{color:var(--muted);font-size:.78rem;margin:0}
.card-genre{font-size:.85rem;margin:.4rem 0;color:var(--a)}
.card-tags{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-top:.5rem}
.tag{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:.1rem .55rem;font-size:.72rem;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:2rem}

/* ランキング */
.ranking{margin-top:2.4rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem}
.ranking h2{margin:.2rem 0 .8rem;font-size:1.1rem}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.rank-list li{display:flex;align-items:center;gap:.7rem}
.rank-list a{text-decoration:none;color:inherit;flex:1}
.rank{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--a);color:#fff;font-size:.8rem;font-weight:700}

/* 人物ページ */
.person{max-width:880px;margin:0 auto;padding:0 1.2rem 2rem}
.phead{display:flex;gap:1.4rem;align-items:center;padding:1.4rem 0;border-bottom:2px solid var(--a);flex-wrap:wrap}
.pavatar .avatar{box-shadow:0 6px 22px #0008}
.pmeta h1{margin:0;font-size:1.9rem}
.kana{margin:.2rem 0;color:var(--muted)}
.genres{margin:.2rem 0;color:var(--a);font-weight:600}
.sub{margin:.2rem 0;color:var(--muted);font-size:.9rem}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.6rem 0 0}
.tags a{--a:var(--a);text-decoration:none;background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--a);border-radius:6px;padding:.12rem .5rem;font-size:.76rem;color:var(--muted)}

.sec{margin:1.4rem 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem;border-left:5px solid var(--a);background:var(--panel2);user-select:none}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::marker{content:""}
.sec>summary:hover{background:#262a38}
.sec>summary h2{font-size:1.15rem;margin:0;border:0;padding:0}
.sec .chev{width:.6rem;height:.6rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);transition:transform .15s;flex:none}
.sec[open]>summary .chev{transform:rotate(45deg)}
.sec-body{padding:1rem}
.sec h3{font-size:1rem;color:var(--muted);margin:1.2rem 0 .4rem}
.sec h3:first-child{margin-top:0}

.kv{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kv .row{display:grid;grid-template-columns:11rem 1fr;background:var(--panel)}
.kv dt{padding:.55rem .8rem;color:var(--muted);font-size:.85rem;background:var(--panel2)}
.kv dd{padding:.55rem .8rem;margin:0}

.tbl{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--panel);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line)}
.tbl th{background:var(--panel2);color:var(--muted);font-weight:600}
.tbl tr:last-child td{border-bottom:none}

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:.3rem 0 .9rem 1.1rem}
.timeline li::before{content:"";position:absolute;left:-7px;top:.7rem;width:12px;height:12px;
  border-radius:50%;background:var(--a)}
.timeline .yr{font-weight:700;color:var(--a);margin-right:.6rem}

.relmap{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:1.1rem}
.relmap-center{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:120px;font-weight:700}
.relmap-nodes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;flex:1}
.rel-node{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;
  display:flex;flex-direction:column;gap:.1rem}
.rel-label{font-size:.72rem;color:var(--a)}
.rel-name a{color:var(--txt)}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.3rem 0}
.chips li{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.25rem .6rem;font-size:.85rem}

.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.links li{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
.links .lk{min-width:6.5rem;color:var(--muted);font-size:.82rem}
.links a{color:var(--a);word-break:break-all}

/* 人物詳細ページの検索ボックス */
.psearch{position:relative;margin:1.2rem 0}
.psearch input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--txt);
  border-radius:999px;padding:.65rem 1.1rem;font-size:1rem;outline:none}
.psearch input:focus{border-color:var(--a)}
.psearch-results{position:absolute;z-index:8;left:0;right:0;top:calc(100% + .3rem);margin:0;padding:.3rem;
  list-style:none;background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 28px #000a;max-height:62vh;overflow:auto}
.psearch-results li{border-radius:8px}
.psearch-results li.on,.psearch-results li:hover{background:var(--a)}
.psearch-results a{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .7rem;text-decoration:none;color:var(--txt)}
.psr-kana{color:var(--muted);font-size:.78rem}
.psearch-results li.on a,.psearch-results li.on .psr-kana{color:#fff}

/* AI 所感 */
.aireview{margin:.4rem 0 0;padding:.9rem 1.1rem;border-left:4px solid var(--a);
  background:var(--panel2);border-radius:0 10px 10px 0;line-height:1.95}

@media(max-width:560px){
  .kv .row{grid-template-columns:7.5rem 1fr}
  .phead{gap:1rem}
  .pmeta h1{font-size:1.5rem}
}