:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif; color:#1b1f2a; background:#f7f8fb; line-height:1.7; }
body, .name-list a, .chips a { overflow-wrap:anywhere; }
img { max-width:100%; height:auto; }
.wrap { max-width:820px; margin:0 auto; padding:24px 20px 64px; }
.site-head { padding:14px 0 12px; border-bottom:1px solid #e2e6ef; margin-bottom:16px; }
.site-head .site-name { font-size:clamp(19px,4vw,24px); font-weight:800; text-decoration:none; color:#2b4d7e; }
.crumbs { font-size:14px; color:#6b7280; margin-bottom:18px; }
.crumbs a { color:#2b6cb0; text-decoration:none; }
h1 { font-size:clamp(24px,5vw,34px); margin:0 0 8px; }
h2 { font-size:18px; margin:30px 0 10px; display:flex; align-items:center; gap:8px; }
.lead { color:#4b5563; font-size:15px; margin:0 0 20px; }
.note { font-size:13px; color:#6b7280; }
.pr { font-size:11px; color:#6b7280; border:1px solid #d6dbe5; border-radius:4px; padding:1px 6px; font-weight:400; }
.work-list { list-style:none; padding:0; margin:12px 0 8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:18px 12px; }
.work a { display:block; color:#1b1f2a; text-decoration:none; }
.work img, .work .no-cover { display:block; width:100%; aspect-ratio:100/142; object-fit:cover; border-radius:6px; border:1px solid #e2e6ef; background:#fff; }
.work-title { display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.45; margin-top:6px; }
.work-meta { display:block; font-size:11px; color:#6b7280; margin-top:3px; }
.work a:hover .work-title { color:#2b6cb0; text-decoration:underline; }
.name-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0 16px; }
.name-list li { display:flex; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px solid #eceff5; font-size:15px; }
.name-list a { color:#1b1f2a; text-decoration:none; }
.name-list a:hover { color:#2b6cb0; text-decoration:underline; }
.count { font-size:12px; color:#6b7280; margin-left:auto; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips a { display:inline-flex; align-items:center; gap:6px; color:#2b6cb0; text-decoration:none; font-size:13px; border:1px solid #e2e6ef; border-radius:18px; padding:5px 12px; background:#fff; }
.chips a:hover { border-color:#2b6cb0; }
.related, .source-block { margin-top:30px; border-top:1px solid #e2e6ef; padding-top:8px; }
.sources { padding-left:1.2em; font-size:14px; color:#4b5563; margin:8px 0; }
.sources a { color:#2b6cb0; }
.pager { display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 0; }
.pager a, .pager span { border:1px solid #e2e6ef; border-radius:8px; padding:6px 12px; text-decoration:none; color:#2b6cb0; background:#fff; font-size:14px; }
.pager .current { background:#2b4d7e; color:#fff; border-color:#2b4d7e; }
.search { width:100%; font:inherit; padding:12px 14px; border:1px solid #d6dbe5; border-radius:10px; background:#fff; color:inherit; }
#hits { list-style:none; padding:0; margin:12px 0 0; }
#hits li { padding:7px 0; border-bottom:1px solid #eceff5; }
#hits a { color:#1b1f2a; text-decoration:none; }
.ugc { margin-top:32px; border-top:1px solid #e2e6ef; padding-top:8px; }
.vote-box { display:flex; align-items:center; gap:12px; margin:12px 0 4px; flex-wrap:wrap; }
.vote { background:#2b4d7e; color:#fff; border:0; border-radius:8px; padding:10px 20px; font-size:15px; font-weight:700; cursor:pointer; }
.vote[disabled] { background:#b7bdc9; cursor:default; }
.vote-count { font-size:15px; color:#4b5563; }
.reviews { list-style:none; padding:0; margin:10px 0; }
.reviews li { background:#fff; border:1px solid #e2e6ef; border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.review-body { margin:0 0 6px; font-size:15px; white-space:pre-wrap; }
.review-meta { margin:0; font-size:12px; color:#6b7280; }
.review-form { display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.review-form label { font-size:13px; color:#4b5563; }
.review-form input, .review-form textarea { font:inherit; padding:10px 12px; border:1px solid #d6dbe5; border-radius:8px; background:#fff; color:inherit; }
.review-form .button { align-self:flex-start; border:0; cursor:pointer; background:#2b4d7e; color:#fff; border-radius:8px; padding:10px 20px; font-weight:700; }
.rank-list { list-style:none; padding:0; margin:0; counter-reset:rank; }
.rank-list li { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid #eceff5; font-size:15px; }
.rank-list li::before { counter-increment:rank; content:counter(rank); min-width:2.2em; color:#6b7280; font-size:13px; }
.rank-list a { color:#1b1f2a; text-decoration:none; }
.rank-list a:hover { color:#2b6cb0; text-decoration:underline; }
.rank-count { font-size:13px; color:#6b7280; margin-left:auto; }
footer { margin-top:44px; border-top:1px solid #e2e6ef; padding-top:16px; font-size:13px; color:#6b7280; }
footer a { color:#2b6cb0; }
.site-nav { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 12px; }
.site-nav a { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; font-size:14px; font-weight:600; text-decoration:none; border:1px solid #e2e6ef; border-radius:999px; background:#fff; }
.site-nav a:hover { border-color:#2b6cb0; }
@media (max-width:480px) { .wrap { padding:16px 14px 56px; } }
@media (prefers-color-scheme: dark) {
  body { background:#12151c; color:#e7eaf0; }
  .site-head, .crumbs, .related, .source-block, footer { border-color:#262b36; }
  .name-list li, #hits li { border-color:#1e222c; }
  .chips a, .pager a, .pager span, .search, .work img, .work .no-cover { background:#1a1e27; border-color:#262b36; }
  .name-list a, .work a, #hits a, .rank-list a { color:#e7eaf0; }
  .reviews li, .review-form input, .review-form textarea { background:#1a1e27; border-color:#262b36; }
  .ugc, .rank-list li { border-color:#262b36; }
  .site-head .site-name { color:#8ab4e8; }
  .crumbs a, .chips a, .sources a, footer a, .pager a { color:#8ab4e8; }
  .site-nav a { background:#1a1e27; border-color:#262b36; color:#8ab4e8; }
}
